/* ═══════════════════════════════════════════════════════════════════
   WE ARE MARS · OFFICIAL STORE
   ───────────────────────────────────────────────────────────────────
   Loaded by /store/ only, after mars.css, and it adds nothing to any
   other page. Every colour, face, rail and easing below is one of the
   site's own tokens: the store is the same world seen from inside a
   supply depot, not a second design.

   The grid is built from one object — .sku — at one aspect ratio, so a
   line-drawn plate today and a photograph tomorrow occupy exactly the
   same frame. The franchise pieces (a set, a helmet, the Odyssey, the
   Founder's Edition) take two columns instead of one, which is the
   whole of the hierarchy: no second card design, no badges competing
   for attention, just more room for the things that carry the world.
   ═══════════════════════════════════════════════════════════════════ */

.shop{
  --steel:#15161B;         /* plating: the one colour mars.css lacks   */
  --steel-2:#0F1014;
  --rule:rgba(243,238,234,.14);
  --bar-h:clamp(52px,7vw,64px);

  /* ONE vertical rhythm for the page. --band is the air between major
     blocks; --stack is the air between the lines inside a type block.
     Everything that sets vertical space uses one of the two, so the
     page steps down the screen at a single, even interval instead of a
     dozen separately-tuned clamps. */
  --band:clamp(40px,5vw,76px);
  --stack:clamp(10px,1.1vw,15px);
}

/* ── the depot bar ─────────────────────────────────────────────────
   Sticky, quiet, and the same height at every width. Status left,
   cart right, nothing between them. */
.shop-bar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--bar-h);padding:0 var(--gut);
  background:rgba(8,6,10,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.shop-bar-l{display:flex;align-items:center;gap:clamp(12px,2vw,22px);min-width:0}
.shop-mark{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.32em;color:var(--bone-2);text-decoration:none;white-space:nowrap;
  transition:color .35s var(--ease)}
.shop-mark:hover,.shop-mark:focus-visible{color:var(--ember-l)}
/* COMING SOON: a status light, not a warning sticker */
.shop-status{display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border:1px solid rgba(226,67,42,.42);border-radius:999px;
  background:linear-gradient(180deg,rgba(226,67,42,.16),rgba(226,67,42,.05));
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:10px;letter-spacing:.28em;color:#FFB9A6;white-space:nowrap;
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.shop-status i{width:6px;height:6px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 0 rgba(226,67,42,.6);animation:statusPulse 3.2s var(--ease) infinite}
@keyframes statusPulse{
  0%{box-shadow:0 0 0 0 rgba(226,67,42,.55)}
  70%{box-shadow:0 0 0 7px rgba(226,67,42,0)}
  100%{box-shadow:0 0 0 0 rgba(226,67,42,0)}}
@media(prefers-reduced-motion:reduce){ .shop-status i{animation:none} }

.cart-btn{display:inline-flex;align-items:center;gap:10px;flex:none;
  min-height:42px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;
  background:rgba(243,238,234,.04);color:var(--bone);cursor:pointer;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.22em;
  transition:border-color .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease)}
.cart-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cart-btn:hover,.cart-btn:focus-visible{border-color:var(--ember);background:var(--ember);color:#fff}
.cart-btn.is-bump{animation:cartBump .42s var(--ease)}
@keyframes cartBump{40%{transform:scale(1.09)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){ .cart-btn.is-bump{animation:none} }

/* ── buttons ───────────────────────────────────────────────────────
   Two: one filled in the ember, one outlined. Nothing else. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:46px;padding:13px 26px;border-radius:999px;border:1px solid var(--line);
  background:none;color:var(--bone);cursor:pointer;text-decoration:none;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:12px;letter-spacing:.2em;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),
             color .35s var(--ease),gap .35s var(--ease)}
.btn--solid{background:var(--ember);border-color:var(--ember);color:#fff}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--ember-l);border-color:var(--ember-l);gap:18px}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--ember);color:#fff;background:var(--ember);gap:18px}
.btn--add{flex:1;min-width:0}
.btn--add:hover,.btn--add:focus-visible{border-color:var(--ember);background:var(--ember);color:#fff}
.btn--wide{width:100%}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn.is-done{background:rgba(226,67,42,.16);border-color:var(--ember);color:#FFB9A6}
.icon-btn{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:50%;
  background:none;color:var(--bone-2);font-size:22px;line-height:1;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.icon-btn:hover,.icon-btn:focus-visible{color:#fff;border-color:var(--ember)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── hero ──────────────────────────────────────────────────────────
   The key art is the identity — Earth, the lettering, the Mars horizon —
   so it is shown WHOLE at every width. The picture is never cropped and
   never zoomed: it keeps its own 3:2 and is laid on black, beside the
   copy from 1100px and above it below that. Any space the picture does
   not fill is deep space, which is where it is set anyway. */
.shop-hero{position:relative;background:#000;display:grid}
.shop-hero-key{position:relative;line-height:0;background:#000}
.shop-hero-key img{display:block;width:100%;height:auto}
.shop-hero-key::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,10,0) 74%,rgba(8,6,10,.72) 100%)}
/* no bottom pad: the categories below pay for that gap, like every block */
.shop-hero-copy{position:relative;padding:clamp(22px,3.4vw,38px) var(--rail) 0}
.shop-title{font-family:var(--display);font-weight:700;text-transform:uppercase;
  color:var(--silver);margin:clamp(14px,2vw,20px) 0 0;
  font-size:clamp(2rem,5.4vw,3.75rem);line-height:.98;letter-spacing:.02em}
/* The trademark rides with the wordmark at the size it has in the footer,
   and out of the headline's letter-spacing so it sits tight to the S rather
   than a full display space away from it.

   The offset is measured, not guessed. In Oswald the cap height is .821em and
   the trademark's own ink is .810em of ITS size, so lifting the mark by
   (.821 - .810 x .235) / .235 = 2.68em of its own size puts the top of the T
   exactly on the top of the S. Because every term scales with the heading,
   the one value holds at every width. */
.shop-title .tm{font-size:.235em;line-height:0;vertical-align:baseline;
  position:relative;top:-2.68em;
  letter-spacing:0;margin-left:.1em;font-weight:600}

.shop-sub{margin:clamp(14px,1.8vw,20px) 0 0;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(.875rem,1.7vw,1.25rem);letter-spacing:.3em;color:var(--ember)}
.shop-support{margin:clamp(18px,2.2vw,26px) 0 0;max-width:52ch;
  font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.7;color:var(--bone-2)}
.shop-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,22px);
  margin-top:clamp(24px,3vw,36px)}
.badge-soon{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:10.5px;letter-spacing:.3em;color:#FFB9A6;
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.badge-soon i{width:6px;height:6px;border-radius:50%;background:var(--ember)}
@media(min-width:1100px){
  .shop-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;
    gap:clamp(24px,3vw,56px);padding:clamp(26px,3.4vw,54px) var(--rail) 0}
  .shop-hero-copy{order:-1;padding:0}
  .shop-hero-key img{max-height:74vh;object-fit:contain;margin-inline:auto}
  .shop-hero-key::after{display:none}
  .shop-title{max-width:12ch}
}

/* ── bands ─────────────────────────────────────────────────────────── */
.shop-band,.cats{padding:var(--band) var(--rail) 0;scroll-margin-top:calc(var(--bar-h) + 14px)}
/* every block pays for the gap above itself, once, with padding-top:
   no margins, no bottom padding, so no boundary is ever charged twice.
   The legal notice closes the page and carries the only bottom pad. */
.band-head{margin-bottom:calc(var(--band) * .5)}
/* the eyebrow sits one step above its heading, not a third of a screen */
.band-head .eyebrow,.story-copy .eyebrow,.feature-copy .eyebrow,
.collect-copy .eyebrow{margin-bottom:var(--stack)}
.band-title{font-family:var(--display);font-weight:700;text-transform:uppercase;
  color:var(--silver);margin:clamp(10px,1.4vw,16px) 0 0;
  font-size:clamp(1.5rem,4vw,2.875rem);line-height:1.04;letter-spacing:.03em;text-wrap:balance}
.band-line{margin:var(--stack) 0 0;max-width:62ch;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.7;color:var(--bone-2)}

/* ── category tiles ────────────────────────────────────────────────
   Six doors into the world. Photograph, one word, one line. */
.cat-grid{display:grid;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.cat{position:relative;display:block;overflow:hidden;text-decoration:none;
  aspect-ratio:4/3;background:#000;border:1px solid var(--line)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:none;
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
/* The scrim exists to keep the label readable, nothing more, so it starts
   below the middle of the tile and only deepens under the type. The top of
   every photograph is now shown at full brightness and full colour: these
   were being dimmed to 62% and then covered with 88% black, which is why
   they read as almost nothing on a dark screen. */
.cat::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,6,10,0) 46%,rgba(8,6,10,.30) 62%,rgba(8,6,10,.62) 78%,rgba(8,6,10,.9) 100%)}
.cat-text{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(14px,1.8vw,20px)}
.cat-text b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.375rem);letter-spacing:.06em;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9)}
.cat-text i{display:block;margin-top:5px;font-style:normal;
  font-size:12px;letter-spacing:.02em;color:var(--bone-2);
  text-shadow:0 1px 10px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9)}
.cat:hover img,.cat:focus-visible img{transform:scale(1.06);filter:saturate(1.06) brightness(1.08)}
/* Every tile is the same shape, but the photographs are not: two of these are
   standing portraits and one is a wide group shot that runs to the left edge
   of its frame. Each carries its own object-position from store.json, because
   a single centred crop takes the top off somebody's head. */
.cat-art img{object-position:50% 50%}
.cat:hover .cat-text b,.cat:focus-visible .cat-text b{color:#fff}
.cat:focus-visible{outline:2px solid var(--ember-l);outline-offset:-2px}

/* ── the product grid ──────────────────────────────────────────────── */
.sku-grid{display:grid;gap:clamp(14px,1.8vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
@media(min-width:900px){ .sku--hero{grid-column:span 2} }
.sku{display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--steel) 0%,var(--steel-2) 100%);
  border:1px solid var(--line);
  transition:border-color .4s var(--ease),transform .5s var(--ease)}
.sku:hover{border-color:rgba(226,67,42,.42);transform:translateY(-3px)}
/* A halo product takes two columns, and its photograph takes all of them at
   the photograph's own shape. It is the biggest picture on the page, which is
   the whole of the hierarchy — and it ends where the picture ends rather than
   being stretched to finish level with the card beside it. */
@media(prefers-reduced-motion:reduce){ .sku,.sku:hover{transform:none;transition:border-color .4s} }
.sku-plate{position:relative;display:block;width:100%;padding:0;border:0;background:none;
  cursor:pointer;overflow:hidden}
.sku-plate:focus-visible{outline:2px solid var(--ember-l);outline-offset:-3px}
.sku-plate-hint{position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);
  padding:8px 16px;border-radius:999px;background:rgba(8,6,10,.78);border:1px solid var(--line);
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.24em;color:var(--bone);
  opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.sku:hover .sku-plate-hint,.sku-plate:focus-visible .sku-plate-hint{opacity:1;transform:translate(-50%,0)}

/* one frame, three ways to fill it — see tools/build-store.mjs */
.plate{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#20222A 0%,#0C0D11 62%,#08080B 100%)}
.sku--hero .plate--scene{aspect-ratio:16/10}
.plate--wide{aspect-ratio:16/10}

/* ── the image stage ───────────────────────────────────────────────
   These products are not one shape. A blister card stands taller than it is
   wide, a helmet on its plinth is square, a spacecraft box is wide, and the
   Founder's Edition case is wider still. So each photograph is cut to the
   shape of the product in it (tools/slice-product-sheets.py) and the stage
   takes its ratio from the photograph, rather than the photograph being
   squeezed into one ratio for everything.

   Because the picture and its stage are the same shape, the product is shown
   whole — no letterbox, no crop — and the fit rule stops mattering. That is
   the point: this is framing, not an object-fit trick.

   Card WIDTHS stay aligned across the grid; only the image height changes,
   by product class, and that is what gives the shelf its rhythm. */
.plate--photo{background:#0B0C10}
.frame-upright{aspect-ratio:9/10}   /* blister cards — Jack … Ava, and Voss  */
.frame-square {aspect-ratio:1/1}    /* helmets, tees, rovers, the backpack   */
.frame-wide   {aspect-ratio:6/5}    /* jackets, collector sets, the Odyssey,
                                       the Founder's Edition                 */
/* a photograph carries its own labelling; the card repeats the collection
   directly beneath it, so the overlay tag comes off and the product is
   the only thing in the frame */
.plate--photo .plate-tag,.plate--photo .plate-seal{display:none}
.plate > picture,.plate > picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.plate-tag{position:absolute;left:12px;top:12px;z-index:3;
  padding:5px 10px;border:1px solid rgba(243,238,234,.16);border-radius:3px;
  background:rgba(8,6,10,.62);
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:8.5px;letter-spacing:.2em;color:var(--bone-3);
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
/* ── the product scene ─────────────────────────────────────────────
   The studio is CSS — sweep, floor, ember rim — and the SVG carries only
   the object and its shadow, fitted inside with `meet`. That way a wide
   scene (a rover, a case) and a square one (a shirt, a pack) sit in the
   same frame at the same size with nothing cropped off either. */
.plate--scene{background:
  radial-gradient(112% 86% at 84% 16%,rgba(226,67,42,.26),transparent 62%),
  radial-gradient(120% 96% at 46% 30%,#23262E 0%,#12141A 52%,#07080B 100%)}
.plate--scene::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(5,6,8,0),rgba(5,6,8,.72));pointer-events:none}
.plate--scene.plate--authority{background:
  radial-gradient(112% 86% at 84% 16%,rgba(232,196,138,.14),transparent 62%),
  radial-gradient(120% 96% at 46% 30%,#1B1E23 0%,#0E1013 52%,#06070A 100%)}
.plate--scene.plate--founders{background:
  radial-gradient(112% 86% at 84% 16%,rgba(232,196,138,.2),transparent 60%),
  radial-gradient(120% 96% at 46% 30%,#272129 0%,#14121A 52%,#07070B 100%)}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.sku:hover .scene{transform:scale(1.022);transition:transform .8s var(--ease)}
.scene{transition:transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){ .scene,.sku:hover .scene{transform:none;transition:none} }
.sku-alts{display:none}

/* the older drawn plate, kept for any product that has no scene yet */
.plate-ground{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(243,238,234,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,238,234,.05) 1px,transparent 1px),
    radial-gradient(circle at 50% 44%,rgba(226,67,42,.18),transparent 58%),
    linear-gradient(180deg,#1B1D23 0%,#101116 46%,#08080B 100%);
  background-size:26px 26px,26px 26px,100% 100%,100% 100%}
.plate--drawn::after{content:'';position:absolute;inset:14px;z-index:2;
  border:1px solid rgba(243,238,234,.08);pointer-events:none}
.plate-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40%;height:40%;z-index:2;fill:none;stroke:var(--bone-2);stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6));
  transition:stroke .5s var(--ease),transform .7s var(--ease)}
.sku:hover .plate-icon{stroke:var(--ember-l);transform:translate(-50%,-50%) scale(1.04)}
.plate--founders{background:radial-gradient(120% 90% at 50% 0%,#2A2018 0%,#12100E 62%,#08080B 100%)}
.plate--founders .plate-icon{stroke:#E8C48A}

/* the dossier pack: each of the five takes its own slice of one Mars
   panorama, so five packs side by side read as one picture */
.plate--pack{background:#07070A}
.plate-pano{position:absolute;inset:0;
  background-image:url(/assets/img/colony-we-are-mars-2176.webp);
  background-size:500% 100%;
  background-position:calc(var(--panel) * 25%) center;
  filter:saturate(.85) brightness(.5) contrast(1.05)}
/* the scrim sits under the figure, not over it */
.plate--pack::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,6,10,.3),rgba(8,6,10,.04) 40%,rgba(8,6,10,.78));
  pointer-events:none}
.plate-figure{position:absolute;left:50%;bottom:0;z-index:2;width:76%;transform:translateX(-50%);
  line-height:0}
.plate-figure picture{display:block}
.plate-figure img{position:static;width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.75));
  -webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.2) 96%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.2) 96%,transparent 100%)}
.plate-seal{position:absolute;right:12px;top:12px;z-index:3;
  padding:5px 10px;border:1px solid rgba(226,67,42,.5);border-radius:3px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:8.5px;letter-spacing:.2em;color:#FFB9A6;background:rgba(8,6,10,.6)}
/* Voss is packed by the regime, not the crew: no panorama, steel and rule */
.plate--authority{background:#0A0B0D}
.plate-authority{position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(243,238,234,.05) 0 2px,transparent 2px 13px),
    linear-gradient(180deg,#191B1F 0%,#0A0B0D 78%)}
.plate--authority .plate-seal{border-color:rgba(243,238,234,.32);color:var(--bone-2)}
.plate--authority::after{background:linear-gradient(180deg,rgba(8,6,10,.42),rgba(8,6,10,.1) 40%,rgba(8,6,10,.92))}
.sku--authority{border-color:rgba(243,238,234,.16)}
.sku--authority:hover{border-color:rgba(243,238,234,.4)}

/* ── card copy ─────────────────────────────────────────────────────── */
.sku-body{display:flex;flex-direction:column;flex:1;
  padding:clamp(16px,1.8vw,22px);gap:10px}
.sku-collection{margin:0;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.26em;color:var(--ember);
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.sku-name{margin:0;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.18;letter-spacing:.04em;color:var(--bone)}
.sku--hero .sku-name{font-size:clamp(1.125rem,1.8vw,1.5rem)}
.sku-short{margin:0;font-size:13.5px;line-height:1.6;color:var(--bone-3)}
.sku-price{margin:2px 0 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--display);font-weight:600;font-size:clamp(1.0625rem,1.4vw,1.25rem);
  letter-spacing:.04em;color:var(--silver)}
.sku-soon{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-3)}
.sku-opts{margin-top:2px}
.sku-opts-label{margin:0 0 8px;font-family:var(--display);font-weight:600;
  font-size:9.5px;letter-spacing:.24em;color:var(--bone-3)}
.opt-row{display:flex;flex-wrap:wrap;gap:7px}
.opt{min-width:46px;min-height:38px;padding:8px 12px;
  border:1px solid var(--line);background:rgba(243,238,234,.03);color:var(--bone-2);
  cursor:pointer;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.1em;
  transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease)}
.opt:hover{border-color:rgba(226,67,42,.5);color:var(--bone)}
.opt[aria-checked="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.opt:focus-visible{outline:2px solid var(--ember-l);outline-offset:2px}
.sku-actions{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.qty{display:inline-flex;align-items:center;flex:none;border:1px solid var(--line)}
.qty-btn{width:38px;height:40px;border:0;background:none;color:var(--bone-2);
  font-size:17px;line-height:1;cursor:pointer;transition:color .3s var(--ease)}
.qty-btn:hover{color:var(--ember-l)}
.qty-btn:focus-visible{outline:2px solid var(--ember-l);outline-offset:-2px}
.qty-n{min-width:26px;text-align:center;font-family:var(--display);font-weight:600;
  font-size:13px;color:var(--bone)}
.sku-more{align-self:flex-start;padding:6px 0 0;border:0;background:none;cursor:pointer;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.24em;color:var(--bone-3);
  transition:color .3s var(--ease)}
.sku-more:hover,.sku-more:focus-visible{color:var(--ember-l)}
.sku-flash{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#FFB9A6;font-family:var(--display);font-weight:600;min-height:14px}

/* ── the feature bands ─────────────────────────────────────────────
   Full bleed, one picture, one statement, one price. They break the
   grid on purpose: these are the pieces that carry the franchise. */
.feature{position:relative;margin-top:0;padding:var(--band) var(--rail) 0;background:#000}
.feature-art{position:relative;line-height:0}
/* A priced feature shows the product, at the product photograph's own shape
   and its own brightness — no box to fit, nothing dimmed for type to sit on,
   because no type sits on it. */
.feature-art img{width:100%;height:auto;display:block}
/* no scrim at any width: no type is laid over a product photograph, so
   there is nothing to darken it for */
.feature-copy{position:relative;padding:clamp(24px,3vw,38px) var(--rail) clamp(44px,6vw,76px)}
.feature-head{margin:0;font-family:var(--display);font-weight:700;
  text-transform:uppercase;color:var(--silver);
  font-size:clamp(1.625rem,4.6vw,3.25rem);line-height:1.02;letter-spacing:.02em;text-wrap:balance}
.feature-line{margin:var(--stack) 0 0;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:clamp(.875rem,1.5vw,1.125rem);letter-spacing:.22em;color:var(--ember)}
.feature-copy-text{margin:var(--stack) 0 0;max-width:54ch;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.7;color:var(--bone-2)}
.feature-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  margin:calc(var(--stack) * 1.6) 0 calc(var(--stack) * 1.4)}
.feature-price span{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.24em;color:var(--bone-3)}
.feature-price b{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2vw,1.75rem);
  letter-spacing:.04em;color:var(--bone)}
.feature-price i{font-style:normal;font-family:var(--display);font-weight:600;
  text-transform:uppercase;font-size:9.5px;letter-spacing:.24em;color:#FFB9A6}
@media(min-width:900px){
  /* the copy sits BESIDE the photograph rather than across it: once a
     picture is shown whole, type laid over it covers the thing the band
     exists to show */
  /* the $999 halo product is given the widest picture column on the page */
  #feature-founders-buy{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .feature{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
    align-items:center;gap:clamp(24px,3.4vw,58px);
    padding:var(--band) var(--rail) 0}
  /* the picture holds the whole left column; the copy, and the collector set
     where a band has one, stack down the right. Nothing sits on top of the
     photograph, which is the point of showing it whole. */
  .feature-art{grid-column:1;grid-row:1/-1;align-self:center}
  .feature-art img{height:auto;margin-inline:auto}
  .feature-copy{grid-column:2;align-self:center;max-width:none;padding:0;background:none}
}
/* the five packs, standing together, as an actual product image */
.feature-packs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.feature-packs{position:relative;overflow:hidden;z-index:2;margin:0 var(--rail) clamp(18px,2.4vw,30px);
  border:1px solid var(--line);background:
    radial-gradient(112% 86% at 84% 16%,rgba(226,67,42,.2),transparent 62%),
    radial-gradient(120% 96% at 46% 30%,#23262E 0%,#12141A 52%,#07080B 100%);
  aspect-ratio:16/10;max-width:620px}
@media(min-width:900px){
  .feature--pano{padding-bottom:0}
  /* under the copy, in the copy's column — `order` puts it after the copy
     although it comes before it in the markup */
  /* stays positioned: the picture inside is absolute, and would otherwise
     escape and fill the whole band */
  .feature-packs{position:relative;order:1;grid-column:2;align-self:start;
    width:min(100%,430px);margin:clamp(18px,2.2vw,28px) 0 0}
}

/* ── the storytelling bands ────────────────────────────────────────
   Type alone. Each band names the section that follows it and hands over
   to the product feature underneath; there is no price here and no cart
   button, because nothing in a band is for sale. The cinematic
   photography sits where it belongs — the hero at the top of the page
   and the shelf at the bottom — so it never competes with, or stands in
   for, the product pictures these bands introduce. */
/* The band's own padding IS the interval — it does not also carry a margin,
   or the space above and below it would come out at twice everything else on
   the page. The feature underneath drops its margin for the same reason: the
   band has already paid for that gap. */
.band-story{margin-top:0;padding:var(--band) 0 0;
  background:#000;border-top:1px solid var(--line)}
.story-copy{padding:0 var(--rail)}
.story-head{margin:0;font-family:var(--display);font-weight:700;
  text-transform:uppercase;color:var(--silver);
  font-size:clamp(1.5rem,4vw,2.875rem);line-height:1.02;letter-spacing:.02em;text-wrap:balance}
.story-line{margin:var(--stack) 0 0;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:clamp(.8125rem,1.4vw,1.0625rem);letter-spacing:.22em;
  color:var(--ember)}
.story-text{margin:var(--stack) 0 0;max-width:62ch;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.7;color:var(--bone-2)}
@media(min-width:900px){
  /* column-gap only: a row gap here would open a hole between the eyebrow,
     the heading and the line, which is what made this band twice as tall as
     the type inside it. The paragraph sits beside the line and shares its
     baseline row. */
  .story-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;column-gap:clamp(24px,3.4vw,58px);row-gap:0}
  .story-copy .eyebrow{grid-column:1;grid-row:1}
  .story-head{grid-column:1;grid-row:2}
  .story-line{grid-column:1;grid-row:3}
  .story-text{grid-column:2;grid-row:3;align-self:end;margin:0}
}

/* ── COLLECT THE WORLD ─────────────────────────────────────────────
   One picture of the entire line, at one scale, so the store says in a
   single frame that these products are one world rather than a list. */
.collect{margin-top:0;padding:var(--band) var(--rail) 0;
  border-top:1px solid var(--line);
  display:grid;gap:clamp(22px,3vw,44px)}
@media(min-width:1000px){
  .collect{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
}
/* the merchandise family, at its own shape — no box to letterbox it into */
.collect-art img{display:block;width:100%;height:auto}
.collect-art{position:relative;overflow:hidden;border:1px solid var(--line);line-height:0;
  background:
    radial-gradient(112% 86% at 78% 14%,rgba(226,67,42,.26),transparent 60%),
    radial-gradient(120% 96% at 46% 30%,#23262E 0%,#11131A 52%,#07080B 100%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.collect-head{margin:0;font-family:var(--display);font-weight:700;
  text-transform:uppercase;color:var(--silver);
  font-size:clamp(1.5rem,3.6vw,2.75rem);line-height:1.02;letter-spacing:.03em}
.collect-line{margin:var(--stack) 0 0;font-family:var(--display);font-weight:600;
  text-transform:uppercase;font-size:clamp(.9375rem,1.5vw,1.125rem);letter-spacing:.24em;
  line-height:1.9;color:var(--ember)}
.collect-text{margin:var(--stack) 0 0;max-width:46ch;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.7;color:var(--bone-2)}

/* the old CSS pack strip, no longer used by the template */
.pano-packs{position:absolute;left:var(--rail);right:var(--rail);bottom:0;z-index:1;
  display:none;gap:6px;pointer-events:none}
@media(min-width:900px){
  .feature--pano .pano-packs{display:grid;grid-template-columns:repeat(5,1fr);
    top:clamp(40px,6vw,72px);bottom:auto;left:auto;right:var(--rail);width:min(40%,420px)}
}
.pano-pack{position:relative;aspect-ratio:3/4;border:1px solid rgba(243,238,234,.22);
  background-image:url(/assets/img/colony-we-are-mars-2176.webp);
  background-size:500% 100%;background-position:calc(var(--panel) * 25%) center;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.9)}
.pano-pack::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,6,10,.12),rgba(8,6,10,.72))}

/* ── the standing notice ───────────────────────────────────────────── */
.shop-legal{padding:var(--band) var(--rail) var(--pad-y);
  border-top:1px solid var(--line);margin-top:0}
.legal-head{margin:0;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(.9375rem,1.6vw,1.25rem);letter-spacing:.22em;color:var(--ember)}
.legal-line{margin:clamp(12px,1.6vw,18px) 0 0;max-width:68ch;
  font-size:clamp(.875rem,1vw,.9375rem);line-height:1.7;color:var(--bone-3)}

/* ── cart, product sheet, notice ───────────────────────────────────── */
.cart-veil,.sheet-veil,.note-veil{position:fixed;inset:0;z-index:90;
  background:rgba(4,3,6,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cart-veil[hidden],.sheet-veil[hidden],.note-veil[hidden],
.cart[hidden],.sheet[hidden],.note[hidden]{display:none}

.cart{position:fixed;top:0;right:0;bottom:0;z-index:100;
  display:flex;flex-direction:column;width:min(430px,100%);
  background:linear-gradient(180deg,#101116,#08080B);border-left:1px solid var(--line);
  box-shadow:-30px 0 80px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .34s var(--ease)}
.cart.is-open{transform:none}
@media(prefers-reduced-motion:reduce){ .cart{transition:none} }
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--line)}
.cart-head h2{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.9375rem,1.6vw,1.125rem);letter-spacing:.18em;color:var(--silver)}
.cart-body{flex:1;overflow-y:auto;padding:clamp(14px,2vw,20px);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.cart-empty{margin:26px 0;text-align:center;color:var(--bone-3);font-size:14px;line-height:1.7}
.cart-line{display:grid;grid-template-columns:72px 1fr;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:0}
.cart-thumb{position:relative;width:72px;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#20222A,#08080B);border:1px solid var(--line)}
.cart-thumb .plate{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
/* the chip is square whatever shape the product is, so the picture is fitted
   inside it rather than cropped to it — this has to out-rank the generic
   `.plate > picture img` fill above */
.cart-thumb img,.cart-thumb .plate img,.cart-thumb picture img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cart-thumb .plate--photo > picture{inset:3px}
.cart-line h3{margin:0;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:12.5px;line-height:1.3;letter-spacing:.06em;color:var(--bone)}
.cart-opt{margin:5px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.cart-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.cart-price{font-family:var(--display);font-weight:600;font-size:13px;color:var(--silver)}
.cart-rm{border:0;background:none;padding:4px 0;cursor:pointer;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.2em;color:var(--bone-3);transition:color .3s var(--ease)}
.cart-rm:hover,.cart-rm:focus-visible{color:var(--ember-l)}
.cart-foot{padding:clamp(16px,2.2vw,22px);border-top:1px solid var(--line);
  display:grid;gap:10px;background:rgba(8,6,10,.6)}
.cart-sum{display:flex;align-items:baseline;justify-content:space-between;margin:0}
.cart-sum span{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:10.5px;letter-spacing:.24em;color:var(--bone-3)}
.cart-sum b{font-family:var(--display);font-weight:700;font-size:clamp(1.125rem,1.8vw,1.375rem);
  letter-spacing:.04em;color:var(--bone)}
.cart-note{margin:0 0 4px;font-size:11px;line-height:1.6;color:var(--bone-3)}

/* product detail */
.sheet{position:fixed;z-index:100;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1040px,calc(100% - 2*var(--gut)));max-height:min(88vh,900px);overflow-y:auto;
  background:linear-gradient(180deg,#101116,#08080B);border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.7);overscroll-behavior:contain}
.sheet-close{position:absolute;right:14px;top:14px;z-index:4;background:rgba(8,6,10,.7)}
.sheet-inner{display:grid;gap:clamp(18px,2.6vw,34px);padding:clamp(18px,2.6vw,34px)}
@media(min-width:860px){ .sheet-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start} }
.sheet-art{display:grid;gap:10px}
.sheet-stage .plate--scene,.sheet-art > .plate--scene{aspect-ratio:4/3}
/* a photographed view keeps its frame here too, capped so a tall product
   cannot push the buy panel off the screen */
.sheet-stage .plate--photo{max-height:min(62vh,620px)}
.sheet-stage .plate--photo img{object-fit:contain}
.sheet-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sheet-thumb{position:relative;display:block;padding:0;border:1px solid var(--line);
  background:none;cursor:pointer;overflow:hidden}
.sheet-thumb .plate{aspect-ratio:4/3}
.sheet-thumb .plate--photo img{object-fit:contain}
.sheet-thumb.is-on{border-color:var(--ember)}
.sheet-thumb:focus-visible{outline:2px solid var(--ember-l);outline-offset:2px}
.sheet-thumb-tag{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:6px 8px;
  background:rgba(8,6,10,.78);
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:8px;letter-spacing:.16em;color:var(--bone-2);text-align:center}
.sheet-name{margin:10px 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.08;letter-spacing:.03em;color:var(--silver)}
.sheet-price{display:flex;align-items:baseline;gap:14px;margin:14px 0 0;
  font-family:var(--display);font-weight:600;font-size:clamp(1.125rem,1.8vw,1.5rem);
  letter-spacing:.04em;color:var(--bone)}
.sheet-soon{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#FFB9A6}
.sheet-desc{margin:16px 0 0;font-size:15px;line-height:1.72;color:var(--bone-2)}
.sheet-sub{margin:22px 0 10px;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:9.5px;letter-spacing:.24em;color:var(--bone-3)}
.sheet-list{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.sheet-list li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.6;color:var(--bone-2)}
.sheet-list li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--ember)}
.sheet-actions{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.sheet-preview{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--bone-3)}

/* the checkout notice */
.note{position:fixed;z-index:110;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(480px,calc(100% - 2*var(--gut)));padding:clamp(24px,3.4vw,40px);
  background:linear-gradient(180deg,#141017,#08080B);border:1px solid rgba(226,67,42,.38);
  box-shadow:0 40px 120px rgba(0,0,0,.72);text-align:center}
.note-head{margin:12px 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.25rem,2.6vw,1.875rem);line-height:1.08;letter-spacing:.03em;color:var(--silver)}
.note-line{margin:14px 0 22px;font-size:14.5px;line-height:1.72;color:var(--bone-2)}

body.shop-locked{overflow:hidden}

/* ── narrow screens ────────────────────────────────────────────────
   Nothing is removed and nothing shrinks below a thumb: the plates
   stay large, the size tiles stay tappable, the cart is one tap away
   in the bar, and the grid simply becomes one column. */
@media(max-width:640px){
  .shop-bar{padding:0 16px}
  .shop-mark{display:none}
  .cart-btn{padding:9px 14px;letter-spacing:.16em}
  .sku-grid{grid-template-columns:1fr}
  .sku--hero .plate--scene{aspect-ratio:4/3}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  /* the tiles keep their 4:3 here too: squaring them cuts 19% more width
     off the group shot, which slices the face at the right-hand edge */
  .opt{min-width:52px;min-height:44px}
  .qty-btn{width:44px;height:44px}
  .sheet{width:100%;max-height:100vh;height:100%;top:0;left:0;transform:none;border:0}
  .sheet-thumbs{grid-template-columns:repeat(3,1fr)}
  .feature-price{gap:10px}
}
/* every touch width, not just phones: tiles and steppers at 44px */
@media(max-width:900px) and (pointer:coarse){
  .opt{min-width:52px;min-height:44px}
  .qty-btn{width:44px;height:44px}
}
@media(max-width:340px){
  .cat-grid{grid-template-columns:1fr}
}