/* Space-Off theme: what the platform needs on top of the design's CSS (site.css, pages.css).
   Loaded last by components/site/site-assets.html on every page. */

/* ---------- 1. The platform's wrappers (playbook §11.1–11.2) ---------- */
/* every section arrives inside <div id="shopline-section-…" class="section">: it must add nothing */
[id^="shopline-section-"].section { padding: 0; margin: 0; }
/* the header group: dissolve its wrappers so the sticky header sticks to the page, not to a wrapper's height */
[id^="shopline-section-"]:has(> .promo),
[id^="shopline-section-"]:has(> .promo-bar),
[id^="shopline-section-"]:has(> .hdr),
[id^="shopline-section-"]:has(> .so-header) { display: contents; }
/* no promo bar on this page (switched off, or not on this page type): the fixed header moves up to the top */
body:not(:has(.promo-bar)) { --promo-h: 0px; }
/* overlays (popup, cookie bar, modals) are sections of the footer group: their wrappers take no space */
[id^="shopline-section-"]:has(> .so-overlay) { display: contents; }
/* the design's `main > section { position: relative; z-index: 2 }` misses: each section sits in a wrapper */
main > [id^="shopline-section-"] > section { position: relative; z-index: 2; }
/* a block wrapper left by a block without "tag": "" must not become the flex or grid item */
.so-blocks > [id^="shopline-block-"] { display: contents; }

/* ---------- 2. Colour schemes ---------- */
/* Every section carries `color-<scheme id> so-scheme` on its root. The scheme drives the section's text and accent
   (buttons, highlights), so the designed look is scheme-1 ("Deep space"). Sections stay transparent over the star
   field unless the merchant turns on the scheme background (`so-scheme--bg`). */
.so-scheme {
  --ink: rgb(var(--color-text));
  --muted: rgba(var(--color-text), .68);
  --faint: rgba(var(--color-text), .42);
  --cyan: rgb(var(--color-button-background));
  --so-btn-ink: rgb(var(--color-button-text));
  color: var(--ink);
}
.so-scheme--bg { background-color: rgb(var(--color-background)); }
.so-scheme .btn--cyan { color: var(--so-btn-ink); }

/* ---------- 3. The base theme's cascade (playbook §11.3) ---------- */
html { background-color: var(--plum-900); color: var(--ink); }
body { font-family: var(--font-body); letter-spacing: normal; }
/* base/index.css: p:first-child / p:last-child / ul reset are harmless here; summary must stay the design's */
.acc__item > summary { display: flex; }
/* base/index.css edits (zero specificity, so the design wins): the link colour and the :empty rule. The base
   `.field` box (native account forms) is reset inside our sections, where `.field` is the design's form row */
.so-scheme .field, .so-overlay .field { margin-block-end: 0; font-size: inherit; }
.so-scheme .field::after, .so-overlay .field::after { content: none; }
/* the platform's skip link class is not used; the design's .skip is */
.skip-to-content-link { display: none; }
/* the editor: hidden overlays a merchant selected are shown by site.js; reduced-motion visitors never animate */
@media (prefers-reduced-motion: reduce) { .ship, .flight, .flight-fx { display: none !important; } }

/* ---------- 4. Native commerce pieces on the brand (cart drawer, product form, collection) ---------- */
/* filled in by the commerce build: see sections/main-product, components/cart */