/* Space-Off theme: what the global sections need beyond the design's CSS (site.css, pages.css).
   Loaded by the sections that use it (promo bar, header, footer, overlays, password page, page not found):
   the stylesheet component loads it once however many of them ask. */

/* ---------- promo bar ---------- */
/* sections/site-promo-bar: its own stylesheet, theme/css/promo-bar.css (engine pattern promo-bar + the design's mapping) */

/* ---------- header ---------- */
.hdr__logo img { width: 100%; height: auto; }
/* the platform's cart bubble stays in the page (the cart re-renders it on every change) but is never shown */
.so-cart-native { display: none !important; }
/* a mega panel's grid follows its items (cards and link groups): three items give the design's 720px */
.mega { width: min(calc(var(--mega-n, 3) * 240px), 90vw); }
.so-mgroup { display: grid; align-content: start; gap: 2px; min-width: 0; }
.so-mgroup__h { padding: 8px 14px 4px; font: 700 .64rem var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.mega .so-mgroup a { display: block; padding: 11px 14px; border-radius: 10px; font-weight: 600; transition: background .25s, color .25s; }
.mega .so-mgroup a:hover { background: rgba(255, 255, 255, .07); color: var(--cyan); }
.drop .so-mgroup + .so-mgroup { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.drop .mega__all { margin-top: 6px; }

/* ---------- newsletter forms (footer, email offer) ---------- */
/* the native form takes no box of its own, so the field and its message sit in the design's grid;
   the base theme's .field (border box, background, margin, centring) is undone */
.ftr__join form, .offer__body form { display: contents; }
.ftr__join .field, .offer__body .field {
  margin: 0; background: none; align-items: stretch; justify-content: flex-start;
  font: inherit; line-height: inherit; color: inherit;
}
.ftr__join .field::after, .offer__body .field::after { content: none; }
/* review 2026-11-05 (#1, #2): an auto grid column takes the field's natural width (the input's default width plus the
   button), wider than a phone in Safari. The column and the field may shrink, so the input takes what is left. */
.ftr__join, .offer__body { grid-template-columns: minmax(0, 1fr); }
.ftr__join .field, .offer__body .field { min-width: 0; }
.offer__body:has([data-signup-done]) .offer__no { display: none; }

/* ---------- footer ---------- */
.ftr__r1 img { height: 30px; width: auto; }

/* ---------- overlays ---------- */
/* the trailer modal shows its poster while no video is picked */
img.modal__video { height: auto; object-fit: cover; }
/* one button per country the store sells to: a long list scrolls inside the dialog */
.region-list { max-height: min(52vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.region-list button { width: 100%; gap: 12px; }

/* ---------- password page ---------- */
.gate__logo img { width: 100%; height: auto; }
/* the password field and its button are the page's one action: on a short phone the porthole shrinks so both stay
   on the first screen (checked at 360 × 640 by the engine's logged-out check) */
@media (max-width: 720px) and (max-height: 720px) {
  .gate__visual { max-width: 130px; }
  .gate__grid { gap: 10px; }
}

/* ---------- links: undo the base theme's link colour ---------- */
/* base/index.css paints every link (a:not(.button), specificity 0,1,1) in the scheme's link colour (cyan in scheme 1),
   which beats the design's own one-class rules. The design's links inherit or carry their own colour: restore that
   for the links of the global sections (hover rules with more weight still apply). */
a.mega__card, .drop a, .mega .so-mgroup a, .mnav a, .ftr__social a, .ftr__addr a { color: inherit; }
a.hdr__link { color: var(--ink); }
a.mega__all { color: var(--cyan); }
a.ftr__review { color: var(--muted); }
.gate a.link { color: var(--cyan); }
.lost a.btn--ghost { color: var(--txt); }
.lost a.btn--ghost:hover { color: var(--plum-800); }
/* the base theme also hides every empty <p>; the design keeps the form message's line so the form does not jump */
.ftr__join .field__msg:empty, .offer__body .field__msg:empty { display: block; }