/* ═══════════════════════════════════════════════════════════════════════════
   TITAN LAB — landing + shop + account + cart

   DESIGN SPINE: one door, then a plain shelf.
   The site has exactly two visual registers and the boundary is the click.
   The landing is a single full-bleed door — one photograph, three ways in,
   type at a size nobody uses. Everything behind it is deliberately plain,
   bright and fast, because that is where people are trying to get work done.
   A template cannot do this, because a template applies one register
   everywhere.

   THE OPENING DEVICE: the headline is split around the product. The banner's
   own luminance was measured band by band — near-black across the top 30%
   (3-9 of 255), bright through the middle where the tubs are (48-111), dark
   again at the foot (24). So the two halves of the headline sit in the dark
   bands and the product occupies the gap between them, legible without a
   heavy scrim smothering the photograph.

   Measurements from design-library/LAYOUT.md, motion from MOTION.md.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── spacing ladder ── */
  --space-xs: 0.25rem;  --space-s: 0.375rem; --space-sm: 0.5rem;
  --space-m:  0.75rem;  --space-l: 1.125rem; --space-xl: 1.5rem;
  --section-s: 2rem;  --section-sm: 2.5rem; --section-m: 3.75rem;
  --section-l: 5rem;  --section-xl: 7.5rem;

  /* ── motion: four durations, one curve doing almost everything ── */
  --dur-state: 150ms;
  --dur-ui:    250ms;
  --dur-enter: 400ms;
  --dur-hero:  800ms;
  --ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dist: 16px;

  --gutter: 1.15rem;

  /* ── THE DOOR (dark register) ── */
  --door-ground: #050c11;   /* sampled from the banner's own corners */
  --door-ink:    #ffffff;
  --door-ink-2:  rgba(255, 255, 255, 0.72);
  --door-ink-3:  rgba(255, 255, 255, 0.45);
  --door-rule:   rgba(255, 255, 255, 0.18);
  --door-plate:  rgba(6, 13, 18, 0.66);
  --mask-ink:    #000;
  --door-light:  rgba(255, 255, 255, 0.09);   /* the one light source, top-left */
  --door-floor:  rgba(0, 0, 0, 0.7);
  --tub-shadow:  drop-shadow(0 28px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  --gold-door:   var(--gold-dark);   /* the dark register uses the lifted gold */

  /* ── THE SHELF (light register) ── */
  --ground:  #eceef1;   /* cool, biased toward the tubs rather than to cream */
  --panel:   #ffffff;
  --panel-2: #f6f8f9;
  --ink:     #0c1114;
  --ink-2:   #57616a;
  --ink-3:   #5e6871;
  --rule:    #d3d8dd;
  --rule-2:  #e3e7ea;
  --live:    #0f6b4f;
  --low:     #9a4a1c;
  --brand-gold: #8a6a1f;
  --gold-dark:  #d9b45f;
  --shadow: 0 1px 2px rgba(12,17,20,.05), 0 14px 36px rgba(12,17,20,.09);
  --shadow-lg: 0 2px 6px rgba(12,17,20,.06), 0 28px 64px rgba(12,17,20,.12);
  --focus: #1b6fb8;

  /* Archivo: flat horizontal terminals and rectangular counters where
     Bricolage curved away. Sharp, but still a real family — one file covers
     the door line, the buttons and the 9px labels. */
  --display: 'Archivo', system-ui, -apple-system, sans-serif;
  /* Body is Archivo too, at its normal width — one family fewer to download. */
  --body: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --serif: 'Bodoni Moda', Georgia, serif;
}
@media (min-width: 768px) {
  :root {
    --space-s: 0.5rem;  --space-sm: 0.625rem; --space-m: 0.875rem;
    --space-l: 1.125rem; --space-xl: 1.625rem;
    --section-s: 2.25rem; --section-sm: 3.125rem; --section-m: 4.375rem;
    --section-l: 6.25rem; --section-xl: 9.375rem;
    --gutter: 1.75rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --space-s: 0.5rem;  --space-sm: 0.75rem; --space-m: 1rem;
    --space-l: 1.25rem; --space-xl: 1.75rem;
    --section-s: 2.5rem; --section-sm: 3.75rem; --section-m: 5rem;
    --section-l: 7.5rem; --section-xl: 11.25rem;
    --gutter: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }
/* `hidden` must beat every display rule in this file. Without this, an
   element styled display:grid or display:flex ignores the attribute and stays
   on screen — the empty checkout showed its empty state AND the whole form. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-variation-settings: 'wdth' 100;
  background: var(--ground);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* The wordmark is the only serif in the whole build. Bodoni is Titan Lab's
   locked identity face; giving it a monopoly is what makes it land. */
.mark {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1;
  letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
}
.mark span { color: var(--brand-gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE DOOR — Titan Lab's own tubs on a flat dark ground
   No photograph behind the type, so no scrims. One light source, top-left, and
   the tubs cast their shadow on the floor the ground implies.
   ═══════════════════════════════════════════════════════════════════════════ */
.door {
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(ellipse 55% 45% at 20% 14%, var(--door-light), transparent 62%),
    var(--door-ground);
  color: var(--door-ink);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.door > * { position: relative; z-index: 1; }

.door-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-l);
  padding: var(--gutter) var(--gutter) 0;
}
.door .mark { color: var(--door-ink); }
.door .mark span { color: var(--gold-door); }
.door-meta {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--door-ink-3); text-align: right; line-height: 1.8;
}
.door-meta a { color: var(--door-ink-2); text-decoration: none; border-bottom: 1px solid var(--door-rule); transition: color var(--dur-state) var(--ease); }
.door-meta a:hover, .door-meta a:focus-visible { color: var(--door-ink); }

/* The headline split around the shelf. Phone order puts the rail last so all
   three links sit in thumb reach inside the first screen. */
.door-body {
  flex: 1; display: grid; align-content: space-between;
  grid-template-columns: 1fr;
  grid-template-areas: "top" "shelf" "bot" "rail" "foot";
  padding: var(--space-l) var(--gutter) var(--gutter);
  gap: var(--space-m);
}
@media (min-width: 900px) {
  .door-body {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "top   top"
      "shelf rail"
      "bot   bot"
      "foot  foot";
    column-gap: var(--section-s);
    row-gap: var(--space-m);
    padding-top: var(--space-l);
  }
}
.door-line.a { grid-area: top; }
.door-shelf { grid-area: shelf; }
.rail { grid-area: rail; align-self: end; }
.door-line.b { grid-area: bot; }
.door-foot { grid-area: foot; }
.door-line {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  /* "Not on its way." is fifteen characters; at 1440 the line box is 1360 and
     the phrase needs ~8.2em, so the ceiling is measured, not guessed. */
  font-size: clamp(2.15rem, 11.6vw, 11rem);
  line-height: 0.84;
  letter-spacing: -0.042em;
  margin: 0; text-wrap: nowrap;
}
.door-line.b { text-align: right; }
.door-line em { font-style: normal; color: var(--gold-dark); }

/* ── The shelf ── */
.door-shelf {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0;
  height: clamp(11rem, 32svh, 24rem);
  padding-bottom: var(--space-m);
  min-width: 0;
}
/* the floor: a soft pool under the tubs so they stand rather than float */
.door-shelf::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -0.5rem; height: 2.5rem; z-index: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--door-floor), transparent 70%);
}
.tubw {
  position: relative; z-index: 1;
  height: 82%;
  margin: 0 -2.2%;
  filter: var(--tub-shadow);
  display: block;
}
.tubw .tub {
  height: 100%; width: auto; display: block;
  /* the last few percent fade into the ground, over the sliver of studio shadow
     the cut-out could not separate from the white base */
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-ink) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--mask-ink) 93%, transparent 100%);
}
.tubw.t3 { height: 100%; z-index: 3; }
.tubw.t2, .tubw.t4 { height: 91%; z-index: 2; }
.tubw.t1, .tubw.t5 { height: 82%; }
/* three tubs on a phone; the flanking pair come back from tablet up */
.tubw.t1, .tubw.t5 { display: none; }
@media (min-width: 700px) { .tubw.t1, .tubw.t5 { display: block; } }
/* the one entrance: the tubs settle with the headline, all on the same curve */
.tubw { opacity: 0; transform: translateY(var(--dist)); transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease); }
.door-shelf.in .tubw { opacity: 1; transform: none; }
.tubw.t2, .tubw.t4 { transition-delay: 60ms; }
.tubw.t1, .tubw.t5 { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .tubw { opacity: 1; transform: none; transition: none; } }

.door-foot {
  display: grid; gap: var(--space-l) var(--section-s);
  grid-template-columns: 1fr;
  align-items: end;
}
.door-note {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--door-ink-3); line-height: 1.9;
}
@media (min-width: 900px) { .door-note { text-align: right; } }
@media (min-width: 900px) {
  .door-foot { grid-template-columns: minmax(0, 1fr) auto; }
}
.door-plate {
  display: block; max-width: 26rem;
  background: var(--door-plate);
  border: 1px solid var(--door-rule);
  border-radius: 4px;
  padding: var(--space-l);
  text-decoration: none; color: var(--door-ink);
  min-height: 7.5rem;
  transition: border-color var(--dur-ui) var(--ease);
}
.door-plate:hover, .door-plate:focus-visible { border-color: var(--door-ink-3); }
.door-plate .pk {
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark);
}
.door-plate .pt { font-size: 1rem; font-weight: 600; margin-top: var(--space-xs); letter-spacing: -0.015em; line-height: 1.3; }
.door-plate .pl {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--door-ink-2); margin-top: var(--space-m);
}
.door-plate .pl .arw { display: inline-block; transition: transform var(--dur-ui) var(--ease); }
.door-plate:hover .pl .arw { transform: translateX(4px); }
.door-plate .pk, .door-plate .pt, .door-plate .pl { transition: opacity var(--dur-ui) var(--ease); }
.door-plate.swap .pk, .door-plate.swap .pt, .door-plate.swap .pl { opacity: 0; }

/* ── The side selection. Three ways in, nothing else. ── */
.rail { display: grid; gap: var(--space-sm); }
@media (min-width: 900px) {
  .rail { justify-items: end; }
}
.rail a {
  display: flex; align-items: baseline; gap: var(--space-m);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--door-ink-3);
  transition: color var(--dur-ui) var(--ease);
}
/* Shop is the one thing most visitors came to do, so it is not a peer of the
   other two: heavier, gold, and it keeps its arrow at rest rather than waiting
   for a hover that never happens on a touchscreen. */
.rail a.primary {
  font-weight: 800;
  font-variation-settings: 'wdth' 108;
  color: var(--gold-door);
  letter-spacing: -0.035em;
}
.rail a.primary .arw { opacity: 1; transform: none; }
.rail a.primary:hover, .rail a.primary:focus-visible { color: var(--door-ink); }
.rail a .arw {
  font-family: var(--body); font-size: 0.5em;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.rail a .tally {
  font-family: var(--mono); font-size: 0.3em; letter-spacing: 0.1em;
  color: var(--door-ink-3); align-self: center;
}
.rail a:hover, .rail a:focus-visible { color: var(--door-ink); }
.rail a:hover .arw, .rail a:focus-visible .arw { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE SHELF — inner pages
   ═══════════════════════════════════════════════════════════════════════════ */
.shelf-head {
  position: sticky; top: 0; z-index: 20;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.shelf-head-in {
  max-width: 84rem; margin-inline: auto;
  padding: var(--space-l) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-l); flex-wrap: wrap;
}
.shelf-head .mark { color: var(--ink); }
.shelf-nav {
  display: flex; gap: var(--space-l) var(--section-s); flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.shelf-nav a {
  text-decoration: none; color: var(--ink-2); position: relative; padding-bottom: 3px;
  transition: color var(--dur-state) var(--ease);
}
.shelf-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease);
}
.shelf-nav a:hover { color: var(--ink); }
.shelf-nav a:hover::after { transform: scaleX(1); }
.shelf-nav a[aria-current="page"] { color: var(--ink); }
.shelf-nav a[aria-current="page"]::after { transform: scaleX(1); }

main { max-width: 84rem; margin-inline: auto; padding: var(--section-s) var(--gutter) var(--section-l); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-l); flex-wrap: wrap; }
h1.page-title {
  font-family: var(--display); font-variation-settings: 'wght' 800;
  font-size: clamp(2rem, 5.6vw, 3.4rem); line-height: 0.92;
  letter-spacing: -0.035em; margin: 0;
}
.page-sub { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.eyebrow {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}

/* ── Search ── */
.search { margin-top: var(--section-s); }
.search-field {
  display: flex; align-items: center; gap: var(--space-m);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  padding: var(--space-m) var(--space-l);
  box-shadow: var(--shadow);
  transition: border-color var(--dur-ui) var(--ease);
}
.search-field:focus-within { border-color: var(--ink); }
.search-field svg { flex: none; opacity: 0.5; }
.search-field input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
}
.search-field input::placeholder { color: var(--ink-3); }
.search-note { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); margin-top: var(--space-sm); letter-spacing: 0.04em; }

/* ── Categories ── */
.cats { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-l); }
.cat {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--panel);
  color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.cat:hover { border-color: var(--ink-3); color: var(--ink); }
.cat[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.cat .c { opacity: 0.6; margin-left: 0.35rem; }

/* ── Product grid ── */
/* Dividers are drawn by the cards, not by a grey backing showing through 1px
   gaps. With the gap trick, any row that does not fill — 13 products across
   four columns, or any filtered subset — leaves the backing exposed as a dead
   grey block. Borders plus a negative offset give the same hairline grid and
   an empty tail that is simply panel-coloured. */
.grid {
  display: grid; gap: 0; margin-top: var(--section-s);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden; box-shadow: var(--shadow);
}
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card {
  background: var(--panel); padding: var(--space-l);
  text-decoration: none; color: inherit; min-width: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin: -1px 0 0 -1px;     /* collapse the outer edges into the container */
  transition: background var(--dur-state) var(--ease);
}
.card:hover { background: var(--panel-2); }
.card .shot { aspect-ratio: 1; background: var(--ground); border-radius: 3px; overflow: hidden; margin-bottom: var(--space-l); }
.card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-ui) var(--ease); }
.card:hover .shot img { transform: scale(1.03); }
.card .brand { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.card .name { font-size: 0.875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-top: 0.15rem; }
.card .spec { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-2); margin-top: var(--space-sm); }
.card .foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  margin-top: auto; padding-top: var(--space-m);
  border-top: 1px solid var(--rule-2);
  font-family: var(--mono); font-size: 0.6875rem;
}
.card .stk { color: var(--live); white-space: nowrap; }
.card .stk.low { color: var(--low); }
.card .p { color: var(--ink-3); letter-spacing: 0.04em; }

.empty {
  grid-column: 1 / -1; background: var(--panel);
  padding: var(--section-s) var(--space-l); text-align: center;
}
.empty p { color: var(--ink-2); margin: var(--space-sm) 0 0; font-size: 0.9375rem; }

/* ── Account ── */
.acct { display: grid; gap: var(--section-s); grid-template-columns: 1fr; margin-top: var(--section-s); }
@media (min-width: 900px) { .acct { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--section-s); align-items: start; } }
.acct > * { min-width: 0; }
.acct-nav {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden; box-shadow: var(--shadow);
}
@media (min-width: 900px) { .acct-nav { position: sticky; top: 5.5rem; } }
.acct-nav button {
  display: block; width: 100%; text-align: left;
  padding: var(--space-m) var(--space-l);
  border: 0; border-bottom: 1px solid var(--rule-2); background: none;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.acct-nav button:last-child { border-bottom: 0; }
.acct-nav button:hover { background: var(--panel-2); color: var(--ink); }
.acct-nav button[aria-selected="true"] { background: var(--ink); color: var(--panel); }

.panel {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: var(--shadow); overflow: hidden;
}
.panel + .panel { margin-top: var(--section-s); }
.panel-head {
  padding: var(--space-l); border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); flex-wrap: wrap;
}
.panel-head h2 { font-family: var(--display); font-variation-settings: 'wght' 700; font-size: 1.125rem; letter-spacing: -0.02em; margin: 0; }
.panel-body { padding: var(--space-l); }

.field-row { display: grid; grid-template-columns: 1fr; gap: var(--space-l); }
@media (min-width: 620px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: block; min-width: 0; }
.field .lab { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: var(--space-xs); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: 0.9375rem; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--rule); border-radius: 3px;
  padding: var(--space-m); outline: none;
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: var(--panel); }
.field .hint { font-size: 0.75rem; color: var(--ink-3); margin-top: var(--space-xs); }
.field-row + .field-row { margin-top: var(--space-l); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: var(--space-m) var(--space-l); border-radius: 3px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--panel);
  cursor: pointer;
  transition: opacity var(--dur-state) var(--ease);
}
.btn:hover { opacity: 0.85; }
.btn.ghost { background: none; color: var(--ink); }
.btn.ghost:hover { background: var(--panel-2); opacity: 1; }
.btn .arw { transition: transform var(--dur-ui) var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-l); }

.rowline {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m);
  padding: var(--space-m) 0; border-bottom: 1px solid var(--rule-2);
  font-size: 0.9375rem; flex-wrap: wrap;
}
.rowline:last-child { border-bottom: 0; }
.rowline .k { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.rowline .v { font-family: var(--mono); font-size: 0.8125rem; }

.pill {
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.25rem 0.5rem; border-radius: 2px;
  background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.pill.on { background: var(--live); border-color: var(--live); color: var(--panel); }

.note {
  border-left: 3px solid var(--brand-gold); background: var(--panel-2);
  padding: var(--space-l); margin-top: var(--space-l); border-radius: 0 3px 3px 0;
  font-size: 0.875rem; line-height: 1.55; color: var(--ink-2);
}
.note strong { color: var(--ink); }

/* ── Cart ── */
.cart-grid { display: grid; gap: var(--section-s); grid-template-columns: 1fr; margin-top: var(--section-s); }
@media (min-width: 900px) { .cart-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.cart-grid > * { min-width: 0; }
.line {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--space-l); align-items: center;
  padding: var(--space-l); border-bottom: 1px solid var(--rule-2);
}
.line:last-child { border-bottom: 0; }
.line .shot { width: 4rem; height: 4rem; border-radius: 3px; overflow: hidden; background: var(--ground); }
.line .shot img { width: 100%; height: 100%; object-fit: cover; }
.line .brand { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.line .name { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.1rem; }
.line .spec { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-2); margin-top: var(--space-xs); }
.qty { display: flex; align-items: center; gap: var(--space-sm); }
.qty button {
  width: 1.9rem; height: 1.9rem; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 0.875rem; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-state) var(--ease), background var(--dur-state) var(--ease);
}
.qty button:hover { border-color: var(--ink); background: var(--panel-2); }
.qty .n { font-family: var(--mono); font-size: 0.8125rem; min-width: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }

@media (min-width: 900px) { .summary { position: sticky; top: 5.5rem; } }

footer.foot {
  border-top: 1px solid var(--rule);
  padding: var(--section-s) var(--gutter);
  max-width: 84rem; margin-inline: auto;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--ink-3); line-height: 1.8;
}

/* ── Entrances. One curve. The split headline is the single big move. ── */
.reveal { opacity: 0; transform: translateY(var(--dist)); }
.reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease); }
.drop { opacity: 0; transform: translateY(calc(var(--dist) * -1.5)); }
.rise { opacity: 0; transform: translateY(calc(var(--dist) * 1.5)); }
.drop.in, .rise.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .drop, .rise { opacity: 1; transform: none; }
}

/* ── Editorial band. The photograph is framed, never bled: these are ~400px
      Instagram exports and a full-width crop would expose every artefact. ── */
.band {
  display: grid; grid-template-columns: 1fr; gap: var(--section-s);
  align-items: center; margin-top: var(--section-m);
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px; padding: var(--space-l); box-shadow: var(--shadow);
}
@media (min-width: 760px) {
  .band { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--section-s); padding: var(--space-xl); }
}
.band > * { min-width: 0; }
.band-shot { margin: 0; border-radius: 3px; overflow: hidden; background: var(--ground); aspect-ratio: 4 / 5; }
.band-shot img { width: 100%; height: 100%; object-fit: cover; }
.band-copy h2 {
  font-family: var(--display); font-variation-settings: 'wght' 800;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.0;
  letter-spacing: -0.03em; margin: var(--space-sm) 0 0; text-wrap: balance;
}
.band-copy p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); margin: var(--space-l) 0 0; max-width: 40rem; }
.band-copy .btn { margin-top: var(--space-l); }

/* ═══════════════════════════════════════════════════════════════════════════
   Added with the real cart: product page, flavour picker, toast, trust block.
   ═══════════════════════════════════════════════════════════════════════════ */
.page-title em { font-style: normal; color: var(--brand-gold); }
.page-lede { font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 36rem; margin: var(--space-l) 0 0; }
.crumb { display: inline-block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; margin-bottom: var(--space-xl); }
.crumb:hover { color: var(--ink); }

.card .stk.out { color: var(--ink-3); }
.stk.out { color: var(--ink-3); }

/* the door plate is now a link */
a.door-plate { display: block; text-decoration: none; color: inherit; transition: border-color var(--dur-ui) var(--ease); }
a.door-plate:hover { border-color: var(--gold-door); }
.door-plate .pl { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--door-ink); margin-top: var(--space-m); }
.door-plate .pl .arw { display: inline-block; transition: transform var(--dur-ui) var(--ease); }
a.door-plate:hover .pl .arw { transform: translateX(3px); }

/* ── product page ── */
.pd { display: grid; grid-template-columns: 1fr; gap: var(--section-s); }
@media (min-width: 900px) { .pd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--section-m); align-items: start; } }
.pd > * { min-width: 0; }
.pd-media { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; aspect-ratio: 1; box-shadow: var(--shadow); }
@media (min-width: 900px) { .pd-media { position: sticky; top: 5.5rem; } }
.pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-name { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: .92; letter-spacing: -.035em; margin: var(--space-sm) 0 0; }
.pd-meta { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-l); margin-top: var(--space-l); font-family: var(--mono); font-size: .75rem; color: var(--ink-2); }
.pd-meta .stk { color: var(--live); }
.pd-meta .stk.low { color: var(--low); }
.pd-blurb { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin: var(--space-l) 0 0; max-width: 34rem; }

.pd-flav { margin-top: var(--section-s); }
.pd-flav .lab { font-family: var(--mono); font-size: .5625rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-sm); }
.flavs { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.flav {
  font-family: var(--body); font-size: .875rem; font-weight: 500; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
  padding: var(--space-m) var(--space-l); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: .15rem;
  transition: border-color var(--dur-state) var(--ease), background var(--dur-state) var(--ease);
}
.flav small { font-family: var(--mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--low); }
.flav:hover { border-color: var(--ink-3); }
.flav.on { border-color: var(--ink); background: var(--ink); color: var(--panel); }
.flav.on small { color: var(--gold-dark); }
.flav.out { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* The supplement-facts strip, taken off the tub. Data, so it is mono. */
.pd-panel {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--section-s); border: 1px solid var(--ink); border-radius: 3px; overflow: hidden;
  background: var(--panel);
}
.pd-panel > div { padding: var(--space-m) var(--space-l); border-right: 1px solid var(--rule); min-width: 0; }
.pd-panel > div:nth-child(3) { border-right: 0; }
.pd-panel .k { display: block; font-family: var(--mono); font-size: .5625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.pd-panel .v { display: block; font-family: var(--mono); font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.pd-panel .src { grid-column: 1 / -1; border-top: 1px solid var(--rule); border-right: 0; font-family: var(--mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--panel-2); }

.pd-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l); margin-top: var(--section-s); padding-top: var(--space-xl); border-top: 1px solid var(--rule); }
.pd-price { font-family: var(--mono); font-size: 1.125rem; letter-spacing: .02em; color: var(--ink-2); min-width: 8rem; }
.btn.big { padding: var(--space-l) var(--space-xl); font-size: .8125rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.pd-incart { flex-basis: 100%; font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; color: var(--live); }
.pd-note { margin-top: var(--space-xl); font-size: .875rem; line-height: 1.55; color: var(--ink-2); max-width: 34rem; }
.pd-note strong { color: var(--ink); }

/* ── toast ── */
.toast {
  position: fixed; left: 50%; bottom: max(var(--space-xl), env(safe-area-inset-bottom)); z-index: 50;
  transform: translate(-50%, calc(var(--dist) * 1.5)); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--panel);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .04em;
  padding: var(--space-m) var(--space-l); border-radius: 4px; box-shadow: var(--shadow-lg);
  max-width: min(32rem, calc(100vw - 2 * var(--gutter)));
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--gold-dark); text-decoration: none; margin-left: var(--space-sm); white-space: nowrap; }
.toast a:hover { text-decoration: underline; }

/* ── cart lines (now rendered) ── */
.line .shot { display: block; }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
#cart-empty { padding: var(--section-s) var(--space-l); }
#cart-empty .btn-row { justify-content: center; }
.summary > .panel + .panel { margin-top: var(--section-s); }

/* ── trust block ── */
.trust-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-m); padding: var(--space-m) 0; border-bottom: 1px solid var(--rule-2); }
.trust-row:last-child { border-bottom: 0; }
.trust-row .k { font-family: var(--mono); font-size: .5625rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); padding-top: .2rem; }
.trust-row .v { font-size: .8125rem; line-height: 1.5; color: var(--ink-2); }
.trust-row .v b { color: var(--ink); font-weight: 600; }

/* ═══ Checkout, confirmation, orders ═══ */
.co { display: grid; grid-template-columns: 1fr; gap: var(--section-s); margin-top: var(--section-s); }
@media (min-width: 960px) { .co { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.co > * { min-width: 0; }
.co-main > .panel + .panel { margin-top: var(--section-s); }
@media (min-width: 960px) { .co-side { position: sticky; top: 5.5rem; } }
/* Numbered because it IS a sequence: who, then how you get it, then how you pay. */
.panel-head h2 .n {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .5rem;
  border-radius: 50%; background: var(--ink); color: var(--panel);
  font-family: var(--mono); font-size: .6875rem; font-weight: 700; vertical-align: 2px;
}
.field .lab em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.field .err { display: none; font-size: .75rem; color: var(--low); margin-top: var(--space-xs); }
.field.bad .err { display: block; }
.field.bad input, .field.bad textarea { border-color: var(--low); }
.field-row.one { grid-template-columns: 1fr; }
.err.block { margin-top: var(--space-m); font-size: .8125rem; color: var(--low); }

.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-m); align-items: start; margin-top: var(--space-xl); padding: var(--space-l); background: var(--panel-2); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.check input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--ink); }
.check b { color: var(--ink); font-weight: 600; }

.choices { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 620px) { .choices { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.choice { position: relative; display: grid; gap: .2rem; padding: var(--space-l); padding-left: 2.6rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); cursor: pointer; transition: border-color var(--dur-state) var(--ease), background var(--dur-state) var(--ease); }
.choice input { position: absolute; left: var(--space-l); top: calc(var(--space-l) + .15rem); width: 1rem; height: 1rem; accent-color: var(--ink); }
.choice:hover { border-color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--panel-2); }
.choice .ct { font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.choice .cd { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.choice .cd b { color: var(--ink); }
.choice[hidden] { display: none; }
.addr { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--rule-2); }

/* Cybersource Unified Checkout mounts here. Drawn as a slot, not a form. */
.mount { margin-top: var(--space-xl); padding: var(--space-xl); border: 1px dashed var(--ink-3); border-radius: 3px; background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--panel-2) 10px 20px); }
.mount-k { font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.mount-t { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.025em; margin-top: var(--space-xs); }
.mount-d { font-size: .8125rem; line-height: 1.5; color: var(--ink-2); margin-top: var(--space-sm); max-width: 32rem; }
.mount-d b { color: var(--ink); }

.co-lines { border-bottom: 1px solid var(--rule); }
.co-line { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--space-m); align-items: center; padding: var(--space-m) var(--space-l); border-bottom: 1px solid var(--rule-2); }
.co-line:last-child { border-bottom: 0; }
.co-line img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 2px; background: var(--ground); }
.co-line .name { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; }
.co-line .spec { font-family: var(--mono); font-size: .625rem; color: var(--ink-2); margin-top: .1rem; }
.co-line .q { font-family: var(--mono); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.rowline.total { border-top: 1px solid var(--ink); border-bottom: 0; margin-top: var(--space-sm); padding-top: var(--space-l); }
.rowline.total .k, .rowline.total .v { color: var(--ink); font-weight: 600; }
.page-sub b { color: var(--ink); font-weight: 700; letter-spacing: .04em; }

.orders { display: grid; gap: var(--space-sm); }
.order-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref pill" "when pill" "what pill"; gap: .15rem var(--space-l); align-items: center; padding: var(--space-m) var(--space-l); border: 1px solid var(--rule); border-radius: 3px; text-decoration: none; color: inherit; transition: border-color var(--dur-state) var(--ease); }
.order-row:hover { border-color: var(--ink); }
.order-row .ref { grid-area: ref; font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; }
.order-row .when { grid-area: when; font-family: var(--mono); font-size: .625rem; color: var(--ink-3); }
.order-row .what { grid-area: what; font-size: .8125rem; color: var(--ink-2); }
.order-row .pill { grid-area: pill; }

/* a status sentence that opens a panel body should not carry the product-page top margin */
.panel-body > .pd-note:first-child { margin-top: 0; }

/* ═══ Shop, marketplace layout: filter rail + results + image-first cards ═══ */
.shop { display: grid; grid-template-columns: 1fr; gap: var(--section-s); margin-top: var(--section-s); }
@media (min-width: 900px) { .shop { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--section-s); align-items: start; } }
.shop > * { min-width: 0; }

/* ── filter rail ── */
.rail-f { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .rail-f { position: sticky; top: 5.5rem; } }
.f-head { font-family: var(--display); font-weight: 800; font-size: .9375rem; letter-spacing: -.02em; margin-bottom: var(--space-sm); }
.f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
/* on a phone the three rails become one row of chips each */
@media (max-width: 899px) {
  .rail-f { gap: var(--space-l); }
  .f-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
}
.f-list button {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-m); width: 100%;
  text-align: left; background: none; border: 0; padding: .35rem 0; cursor: pointer;
  font-family: var(--body); font-size: .9rem; color: var(--ink-2);
  transition: color var(--dur-state) var(--ease), padding-left var(--dur-ui) var(--ease);
}
.f-list button:hover { color: var(--ink); }
.f-list button[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.f-list button:disabled { color: var(--ink-3); cursor: not-allowed; }
.f-list .c { font-family: var(--mono); font-size: .625rem; color: var(--ink-3); letter-spacing: .04em; }
.f-list .c.pend { text-transform: uppercase; letter-spacing: .12em; }
@media (max-width: 899px) {
  .f-list button { width: auto; border: 1px solid var(--rule); border-radius: 999px; padding: .45rem .8rem; background: var(--panel); font-size: .8125rem; }
  .f-list button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
  .f-list button[aria-pressed="true"] .c { color: var(--panel); opacity: .7; }
}
.f-clear { justify-self: start; font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 2px; color: var(--ink); cursor: pointer; }

/* ── results bar ── */
.results-bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-l); flex-wrap: wrap; padding-bottom: var(--space-m); border-bottom: 1px solid var(--rule); }
.results-n { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.025em; }
.results-n b { font-variant-numeric: tabular-nums; }
.results-sub { font-family: var(--mono); font-size: .6875rem; font-weight: 400; letter-spacing: .04em; color: var(--ink-3); margin-left: .35rem; }
.sort { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sort select { font-family: var(--body); font-size: .875rem; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: .45rem .7rem; }
.results-note { font-size: .875rem; color: var(--ink-2); margin: var(--space-m) 0 0; }

/* ── image-first cards. The photograph is the card. ── */
.grid.v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-l); }
@media (min-width: 620px)  { .grid.v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid.v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .grid.v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid.v2 .card { padding: 0; }
.grid.v2 .card .shot {
  position: relative; aspect-ratio: 1; margin: 0; border-radius: 0;
  background: var(--panel-2);
}
.grid.v2 .card .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); }
.grid.v2 .card .shot img.b { opacity: 0; }
/* hover: swap to the next flavour and name it — a real second photograph, not a zoom */
.grid.v2 .card:hover .shot img.a { opacity: 0; }
.grid.v2 .card:hover .shot img.b { opacity: 1; }
.grid.v2 .card:hover .shot img { transform: scale(1.02); }
.grid.v2 .card .swap-hint {
  position: absolute; left: var(--space-m); bottom: var(--space-m);
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--panel); background: var(--ink); padding: .3rem .5rem; border-radius: 2px;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.grid.v2 .card:hover .swap-hint { opacity: 1; transform: none; }
@media (hover: none) { .grid.v2 .card .shot img.b, .grid.v2 .card .swap-hint { display: none; } }

.grid.v2 .card .body { padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.grid.v2 .card .brand { font-family: var(--mono); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.grid.v2 .card .name { font-size: .9375rem; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; margin: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.grid.v2 .card:hover .name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.grid.v2 .card .proof { display: flex; align-items: baseline; gap: var(--space-sm); font-family: var(--mono); font-size: .6875rem; color: var(--ink-2); }
.grid.v2 .card .proof .dot { color: var(--ink-3); }
.grid.v2 .card .foot { display: none; }

/* the price, Amazon-style: currency small, whole large, cents raised. Styled now
   so the day the list arrives nothing shifts. */
.price { display: inline-flex; align-items: flex-start; gap: .15rem; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: var(--space-xs); color: var(--ink); }
.price .cur { font-size: .75rem; font-weight: 500; margin-top: .25rem; margin-right: .1rem; }
.price .whole { font-size: 1.75rem; }
.price sup { font-size: .8125rem; font-weight: 600; margin-top: .2rem; }
.price.tbd { font-family: var(--mono); font-weight: 500; font-size: .9375rem; letter-spacing: .04em; color: var(--ink-3); padding: .35rem 0; }

.grid.v2 .card .get { font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; color: var(--ink-3); }
.grid.v2 .card .quick {
  margin-top: auto; padding-top: var(--space-m);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; gap: var(--space-sm); align-items: center;
}
.grid.v2 .card .quick .arw { transition: transform var(--dur-ui) var(--ease); }
.grid.v2 .card:hover .quick .arw { transform: translateX(3px); }

/* "4 flavours" must stay one unit when the proof line wraps in a narrow card */
.grid.v2 .card .proof { flex-wrap: wrap; }
.grid.v2 .card .proof > span { white-space: nowrap; }

/* ═══ Promotions ticker — MOTION.md marquee: one keyframe, linear, 90s ═══ */
.ticker {
  background: var(--ink); color: var(--panel);
  overflow: hidden; border-bottom: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: tick 90s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; flex: none; }
.ticker a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .7rem 2.25rem; white-space: nowrap; text-decoration: none; color: var(--panel);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  border-right: 1px solid var(--page-rule-2, rgba(255,255,255,.18));
  transition: color var(--dur-state) var(--ease);
}
.ticker a b { color: var(--gold-dark); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ticker a:hover { color: var(--gold-dark); }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker-set[aria-hidden="true"] { display: none; }
  .ticker { mask-image: none; -webkit-mask-image: none; }
}

/* ═══ Sample products: a designed placeholder, never a borrowed photograph ═══ */
.ph {
  position: absolute; inset: 0; display: grid; align-content: end; gap: .2rem;
  padding: var(--space-l);
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, var(--panel) 0%, transparent 70%),
    repeating-linear-gradient(-45deg, transparent 0 14px, var(--rule-2) 14px 15px),
    var(--panel-2);
  color: var(--ink-3);
}
.ph.mini { position: static; width: 3rem; height: 3rem; padding: 0; border-radius: 2px; align-content: center; justify-items: center; }
.ph.mini .ph-brand, .ph.mini .ph-cat { display: none; }
.ph.mini .ph-tag { position: static; font-size: .5rem; }
.ph-brand { font-family: var(--mono); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; }
.ph-cat { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; line-height: .95; color: var(--ink-2); }
.ph-tag {
  position: absolute; top: var(--space-m); left: var(--space-m);
  font-family: var(--mono); font-size: .5rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: .25rem .45rem; border: 1px solid var(--ink-3); border-radius: 2px; color: var(--ink-2); background: var(--panel);
}
.grid.v2 .card.is-sample .shot { background: var(--panel-2); }
.sample-tag { font-family: var(--mono); font-size: .5625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .15rem .4rem; border: 1px solid var(--ink-3); border-radius: 2px; color: var(--ink-2); }
.pd-panel.empty-panel { grid-template-columns: 1fr; border-style: dashed; border-color: var(--ink-3); }
.pd-panel.empty-panel .src { border-top: 0; text-transform: none; letter-spacing: .02em; font-size: .75rem; line-height: 1.5; padding: var(--space-l); }

/* ═══ Show more ═══ */
.more { display: flex; justify-content: center; margin-top: var(--section-s); }
.more .c { font-family: var(--mono); font-size: .625rem; letter-spacing: .04em; text-transform: none; color: var(--ink-3); margin-left: .4rem; }

/* ═══ Sample badge on photo cards, and the details section ═══ */
.sample-badge {
  position: absolute; z-index: 2; top: var(--space-m); left: var(--space-m);
  font-family: var(--mono); font-size: .5rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: .25rem .45rem; border: 1px solid var(--ink-3); border-radius: 2px;
  color: var(--ink-2); background: var(--panel); opacity: .92;
}
.pd-panel.typical { border-style: dashed; border-color: var(--ink-3); }
.pd-panel.typical .src { text-transform: none; letter-spacing: .02em; }

.pd-details { margin-top: var(--section-s); border-top: 1px solid var(--rule); padding-top: var(--space-xl); }
.pd-details-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); flex-wrap: wrap; margin-bottom: var(--space-m); }
.pd-details-head h2 { font-family: var(--display); font-weight: 800; font-size: 1.125rem; letter-spacing: -.025em; margin: 0; }
.pd-detail { display: grid; grid-template-columns: 1fr; gap: .25rem var(--space-l); padding: var(--space-m) 0; border-bottom: 1px solid var(--rule-2); }
@media (min-width: 620px) { .pd-detail { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.pd-detail:last-child { border-bottom: 0; }
.pd-detail .k { font-family: var(--mono); font-size: .5625rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); padding-top: .3rem; }
.pd-detail .v { font-size: .9375rem; line-height: 1.6; color: var(--ink-2); max-width: 40rem; }
.pd-details.is-sample .pd-detail .v { color: var(--ink-3); }

/* ═══ Brand range: indicative prices ═══ */
.price .ind { align-self: flex-end; margin-left: .35rem; font-family: var(--mono); font-size: .5rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 2px; padding: .1rem .3rem; }
.pd-ind { display: block; font-family: var(--body); font-size: .75rem; letter-spacing: 0; color: var(--ink-3); margin-top: .35rem; max-width: 18rem; line-height: 1.4; }
.pd-details.is-brand .pd-details-head a { color: var(--ink-2); text-decoration: none; }
.pd-details.is-brand .pd-details-head a:hover { color: var(--ink); text-decoration: underline; }
[data-price-note] { margin-top: var(--space-m); }

/* ═══ Phone: nothing cropped ═══
   Two cards per row at 375px leaves ~170px per card. Three things were being
   cut: the square cover-crop took the lid and base off every tub, the long
   flavour list truncated mid-word, and the "indicative" chip ran past the
   card edge. Below 620px the photograph is shown whole, the flavour list is
   dropped from the card (the count still shows, and the product page lists
   them), and the chip sits under the figure. */
@media (max-width: 619px) {
  .grid.v2 .card .shot { background: var(--panel); }
  .grid.v2 .card .shot img { object-fit: contain; padding: 6%; }
  .grid.v2 .card .flav-list { display: none; }
  .grid.v2 .card .name { -webkit-line-clamp: 2; font-size: .875rem; }
  .grid.v2 .card .proof { flex-direction: column; gap: .1rem; }
  .grid.v2 .card .proof .dot { display: none; }
  .price { flex-wrap: wrap; row-gap: .3rem; }
  .price .ind { flex-basis: 100%; margin-left: 0; width: max-content; }
  .grid.v2 .card .body { padding: var(--space-m); }
  .grid.v2 .card .get { display: none; }
}

@media (max-width: 619px) { .grid.v2 .card .name { -webkit-line-clamp: 3; } }