/* ==========================================================================
   CTRLd Labs — design system

   Built to the Store Wireframes, round 4. Every value here comes from the
   frames' own inline styles, in px, at the 900px artboard they were drawn at.

   The structural idea: chrome is always dark (#1d2d3d header and footer), and
   the page between them flips. Home, PDP, cart and confirmation are light
   (#F8FAFC); kits and compare are dark (#0F172A) with cyan-lit cards.

   The button rule that follows: on a dark ground the lead action is cyan, on
   a light ground it is navy. Never both on one surface.
   ========================================================================== */

:root {
  --ink:         #0F172A;   /* ink on light, and the dark page ground   */
  --chrome:      #1d2d3d;   /* header, footer, the Lambda split panel   */
  --light:       #F8FAFC;   /* light page ground                        */
  --on-dark:     #f5f5f8;   /* text on chrome                           */
  --muted:       #64748B;
  --muted-soft:  #94A3B8;
  --accent:      #06B6D4;
  --accent-ink:  #06263a;   /* text inside a cyan button                */

  --rule-chrome: rgba(148, 163, 184, .2);    /* header/footer hairlines */
  --rule-dark:   rgba(148, 163, 184, .18);   /* rules on a dark page    */
  --rule-light:  rgba(15, 23, 42, .1);       /* rules on a light page   */
  --rule-field:  rgba(15, 23, 42, .18);      /* form borders            */

  --edge-cyan:   rgba(6, 182, 212, .55);
  --edge-soft:   rgba(148, 163, 184, .35);

  --wash-cyan:   radial-gradient(120% 70% at 50% 0%, rgba(6, 182, 212, .24), rgba(15, 23, 42, 0) 70%);
  --wash-soft:   radial-gradient(120% 70% at 50% 0%, rgba(148, 163, 184, .14), rgba(15, 23, 42, 0) 70%);
  --glow:        0 0 44px rgba(6, 182, 212, .2);
  --glow-img:    0 0 50px rgba(6, 182, 212, .3);
  --glow-lift:   0 8px 26px rgba(6, 182, 212, .4);

  --shell:       900px;

  /* ── the one type dial ────────────────────────────────────────────────
     The sheet was drawn at a 900px artboard with a 13px body, which reads
     small on a real screen. Every font-size in the site is now written as
     calc(<drawn px> * var(--ts)), so this single number scales the whole
     site at once and keeps every size relationship exactly as drawn.
     Values under 20px also carry max(15px, …) — buttercup's hard floor,
     which bites if --ts is ever dialled below about 1.4.

     Her call was "x2 what it is now, minimum 15". Shipped at 1.5, and here
     is the honest reason: at 2 the pages I rebuilt are fine, but the light
     commerce pages that have NOT been reskinned yet — product, cart,
     confirmation — break. Their right-hand column is about 270px wide at a
     900px shell, drawn for 13px text. At 26px that column fits ten
     characters and the cross-sell block folds in half. 1.5 puts body copy at
     19.5px, lifts every label clear of the 15px floor, and breaks nothing.

     TO GO TO 2: change this one number. Nothing else moves. Do it after
     those three pages get rebuilt in the new direction, because their
     columns get redrawn then anyway.                                     */
  --ts:          1.5;

  /* lit tokens — the chrome uses these on every page, signage or commerce */
  --cy-hot:      #5BF3FF;
  --mg-hot:      #FF4FB0;
  --mg:          #E0007C;
  --night-0:     #04060A;   /* the one ground every dark page sits on */
  --slab:        #07090C;   /* the panel that sits on the night          */

  /* ── THE READABILITY RULE, her words 2026-08-27 ────────────────────────
     "if text is light colored then it can't be small, if it needs to be
      small then use darker color."
     Encoded as a pairing: the dimmer the ink, the bigger it has to be.
     HARD FLOOR: nothing under 15px may use anything below --ink-2.
     Lived only in containers.php until now, which meant the rule applied
     to the menu she shops from and to nothing she actually ships. */
  --ink-0:       #F2FEFF;   /* full strength — required under 15px        */
  --ink-1:       #DCEBEF;   /* near full    — ok at 15px and up           */
  --ink-2:       #B4C9D0;   /* mid          — ok at 19px and up           */
  --ink-3:       #8199A1;   /* dim          — 26px and up ONLY            */
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

/* Author display rules otherwise beat the browser's own [hidden] rule. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Without this the body ground shows below the footer on any page shorter
     than the viewport. */
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--light);
  color: var(--ink);
  font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:max(15px, calc(13px * var(--ts,2)));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Dark pages used to sit on #0F172A while their own panels were near-black,
   which put a lighter grey frame around every lit surface. The night is one
   colour now, top to bottom. */
body.is-dark { background: var(--night-0); color: var(--on-dark); }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* min-width:0 is the load-bearing half of this rule, not decoration.
   <body> is a column flex container, so .shell is a flex item and its
   automatic minimum size (min-width:auto) resolves to its MIN-CONTENT width.
   The gift ticker's rail is width:max-content — 4695px — so the shell's
   min-content came out enormous and got clamped to max-width, leaving a
   940px-wide page inside a 390px phone. Every element on every page then
   bled sideways and the whole site scrolled horizontally.
   min-width:0 alone does NOT fix it: `margin: 0 auto` is a cross-axis auto
   margin, and per the flexbox spec an item with one does not stretch at all —
   it sizes to fit-content and centres. So the shell kept resolving to its
   max-width no matter how small the phone was. `width:100%` is what actually
   makes it follow the viewport; max-width still caps it at 940 on a desktop
   and the auto margins still centre it there. The rail is then clipped by
   .tick's own overflow:hidden, the way it was always meant to be. */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; min-width: 0; }
main { flex: 1 0 auto; }

/* The dark panels (.hm, .pl, .pd, .trk) reach 24px past the shell on each side
   so they read edge-to-edge, and 18px on phones. Above ~1000px that reach lands
   in the window gutter. Below it the shell IS the window, so it lands outside
   the viewport. Give the shell a gutter of exactly the same size for the bleed
   to eat into — the panel still touches both edges, nothing overflows. */
@media (max-width: 1000px) { .shell { padding-inline: 24px; } }
@media (max-width: 720px)  { .shell { padding-inline: 18px; } }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -------------------------------------------------------------- chrome -- */
/* Rebuilt 2026-08-28 into the signage direction. The old chrome was slate blue
   (#1d2d3d) and it fought every lit page it framed — a dark grey bar reads as
   an unlit object sitting on a lit one.

   The idea holding these two together: the header is the RAIL a sign hangs
   from, and the footer is the FLOOR it stands on. One thin lit line at the
   bottom of the header, one magenta horizon at the top of the footer, and the
   same receding grid buttercup picked out of the container menu as C4. The
   site is bookended by light instead of by grey. */

/* Chrome does not ride the content dial. --ts is a READING size — it exists
   because body copy drawn at a 900px artboard was too small to read. A nav bar
   is an instrument panel, not reading text: at --ts 2 the wordmark, four links
   and the cart pill stopped fitting the shell and "Cart (0)" broke onto two
   lines. The 15px floor still applies here, so the bar cannot go unreadable. */
.site-header, .site-footer { --ts: 1.35; }

/* ── THE PHONE DIAL ─────────────────────────────────────────────────────
   buttercup, 2026-08-30, after this went live: "the header and footer are sized
   for mobile but the rest is sized desktop." Exactly right, and this is why.

   --ts is ONE multiplier over every drawn size in this sheet. It was dialled to
   1.5 for a 900px artboard — and it had NO media query at all. The chrome got
   its own dial on the line above; the content never got one, so body copy landed
   at 13 x 1.5 = 19.5px on a 390px screen, where about 16px is right. Nothing
   overflowed, which is why an overflow test missed it entirely: type can be
   badly oversized and still wrap.

   1.25 puts body copy at 16.25px and drops the small labels onto the 15px floor
   rather than 3-4px above it. One number, the whole page. */
@media (max-width: 720px) { :root { --ts: 1.25; } }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, #090C13 0%, #04060A 100%);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* the rail. Cyan at our end of the street, magenta at theirs — the same
   colour law the whole site runs on, stated once in a 1px line. */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(6, 182, 212, 0) 0%, #5BF3FF 20%, #06B6D4 52%, #E0007C 88%, rgba(224, 0, 124, 0) 100%);
  box-shadow: 0 0 12px rgba(6, 182, 212, .55), 0 2px 26px rgba(6, 182, 212, .22);
}

.site-header__bar {
  max-width: var(--shell); margin: 0 auto; padding: 15px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* The mark is a hollow cyan ring, drawn rather than an image file. Lit now. */
.mark {
  width: 15px; height: 15px; flex: none;
  border: 1.6px solid var(--cy-hot); border-radius: 50%;
  box-shadow: 0 0 8px rgba(6, 182, 212, .85), 0 0 20px rgba(6, 182, 212, .40),
              inset 0 0 6px rgba(91, 243, 255, .45);
}

.wordmark {
  display: flex; align-items: center; gap: 11px;
  font-size:max(15px, calc(14px * var(--ts,2))); font-weight: 800; letter-spacing: .005em;
  color: var(--on-dark); text-decoration: none;
}
/* CTRLd is lit, Labs is not. The eye lands on the name, not the noun. */
.wordmark .wm-a { color: #F2FEFF;
  text-shadow: 0 0 2px #FFF, 0 0 12px var(--cy-hot), 0 0 30px rgba(6, 182, 212, .55); }
.wordmark .wm-b { color: #8FB2BE; font-weight: 600; margin-left: .3em; }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  position: relative; padding: 7px 0; text-decoration: none;
  font-size:max(15px, calc(11.5px * var(--ts,2))); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #9FB9C2;
  transition: color .16s ease, text-shadow .16s ease;
}
/* the underline strikes on from the left rather than fading in — a tube
   filling, not a colour change. */
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--cy-hot); box-shadow: 0 0 8px var(--cy-hot), 0 0 18px rgba(6, 182, 212, .6);
  transition: right .22s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: #EAFCFF; text-shadow: 0 0 10px rgba(91, 243, 255, .7); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { right: 0; }

/* the cart is the one lit object in the bar, because it is the one action */
.site-nav .cart-link {
  padding: 8px 17px; border-radius: 999px; color: #EAFCFF;
  border: 1px solid rgba(6, 182, 212, .48);
  box-shadow: inset 0 0 14px rgba(6, 182, 212, .16), 0 0 14px rgba(6, 182, 212, .18);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.site-nav .cart-link::after { display: none; }
.site-nav .cart-link:hover {
  border-color: var(--cy-hot);
  box-shadow: inset 0 0 18px rgba(6, 182, 212, .30), 0 0 24px rgba(6, 182, 212, .45);
}

/* ---- the floor -------------------------------------------------------- */

.site-footer { position: relative; overflow: hidden; background: #04060A; border-top: 0; }
/* the horizon, mirroring the header rail — magenta at our left, cyan at right,
   so the two lit lines read as one loop around the page. */
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg,
    rgba(224, 0, 124, 0) 0%, #FF4FB0 22%, #E0007C 52%, #5BF3FF 90%, rgba(91, 243, 255, 0) 100%);
  box-shadow: 0 0 14px rgba(224, 0, 124, .6), 0 2px 30px rgba(224, 0, 124, .20);
}
/* C4's floor, same numbers, used as the ground the site stands on. */
.site-footer::after {
  content: ""; position: absolute; left: -30%; right: -30%; bottom: 0; height: 120px; z-index: 1;
  background-image:
    repeating-linear-gradient(90deg, rgba(91, 243, 255, .30) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,  rgba(91, 243, 255, .20) 0 1px, transparent 1px 20px);
  transform: perspective(110px) rotateX(58deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 26%, transparent 100%);
          mask-image: linear-gradient(to top, #000 26%, transparent 100%);
}

.site-footer__bar {
  position: relative; z-index: 4;
  max-width: var(--shell); margin: 0 auto; padding: 40px 30px 66px;
  display: flex; align-items: center; justify-content: space-between;
  /* The shell narrows to 560px on the receipt, so the bar has to be able to
     wrap rather than break the brand across two lines. */
  gap: 18px; flex-wrap: wrap; row-gap: 14px;
}
.site-footer__brand { display: flex; align-items: flex-start; gap: 11px; color: var(--on-dark); }
.site-footer__brand .mark { margin-top: 4px; }
/* buttercup 2026-08-28: name, tagline and flag stack as one block. */
.site-footer__stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.site-footer__brand .mark { width: 13px; height: 13px; }
.site-footer__name { font-size:max(15px, calc(12px * var(--ts,2))); font-weight: 800; white-space: nowrap;
  color: #EAFCFF; text-shadow: 0 0 10px rgba(6, 182, 212, .45); }
.site-footer__line { font-size:max(15px, calc(11.5px * var(--ts,2))); font-weight: 400; color: #90AEB8; }
.site-footer__nav { display: flex; gap: 20px; font-size:max(15px, calc(11.5px * var(--ts,2))); }
.site-footer__nav a { color: #9FB9C2; text-decoration: none;
  transition: color .16s ease, text-shadow .16s ease; }
.site-footer__nav a:hover { color: #EAFCFF; text-shadow: 0 0 10px rgba(91, 243, 255, .7); }
/* Was a lit magenta plate. buttercup 2026-08-28: it should not stand out —
   and magenta is Hospira's colour, so a magenta sign in our own footer broke
   the colour law every page carried. Quiet grey type, stacked under the name. */
.site-footer__flag {
  font-size:max(14px, calc(10px * var(--ts,2))); font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: #5E7079; white-space: nowrap;
}
.site-footer__by { color: #5E7079; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .site-nav a, .site-nav a::after, .site-nav .cart-link, .site-footer__nav a { transition: none; }
}

/* --------------------------------------------------------------- parts -- */

/* Letter-spaced label text. The frames never use a filled pill. */
.eyebrow {
  font-size:max(15px, calc(10px * var(--ts,2))); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow--soft { color: var(--muted-soft); }
.eyebrow--sm   { font-size:max(15px, calc(9.5px * var(--ts,2))); }

.btn {
  display: block; width: 100%; padding: 11px; text-align: center;
  font-size:max(15px, calc(12px * var(--ts,2))); font-weight: 600; border: 1px solid transparent;
  border-radius: 6px; cursor: pointer;
  transition: filter .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.btn--cyan    { background: var(--accent); color: var(--accent-ink); }
.btn--navy    { background: var(--ink);    color: var(--light); }
/* Outline buttons, named for the ground they sit on. */
.btn--outline-ink  { background: none; border-color: var(--ink); color: var(--ink); }          /* on light */
.btn--outline-pale { background: none; border-color: rgba(148, 163, 184, .5); color: var(--light); } /* on dark */
.btn--r7      { border-radius: 7px; }
.btn--pad12   { padding: 12px; }
.btn--lift    { box-shadow: var(--glow-lift); }
.btn:hover { filter: brightness(1.07); }
.btn--outline-ink:hover, .btn--outline-pale:hover { filter: none; border-color: var(--accent); color: var(--accent); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Price and SKU share a baseline; the SKU sits inline after the number. */
.pricerow { display: flex; align-items: baseline; gap: 10px; }
.pricerow__amount { font-size:calc(22px * var(--ts,2)); font-weight: 600; }
.pricerow__sku { font-size:max(15px, calc(11px * var(--ts,2))); font-weight: 400; color: var(--muted-soft); }

/* Three-up hairline grid. A 1px gap over a tinted parent draws the rules. */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-light); }
.strip__cell { background: var(--light); padding: 22px 24px; }
.strip__cell strong { display: block; font-size:max(15px, calc(13px * var(--ts,2))); font-weight: 600; color: var(--ink); }
.strip__cell span   { display: block; font-size:max(15px, calc(11px * var(--ts,2))); color: var(--muted); margin-top: 4px; }

.strip--dark { background: var(--rule-chrome); border-top: 1px solid var(--rule-chrome); }
.strip--dark .strip__cell { background: var(--ink); padding: 20px 22px; }
.strip--dark .strip__cell strong { color: var(--light); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  padding: 40px 34px 30px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hero__eyebrow { letter-spacing: .16em; }
.hero__title {
  font-size:calc(40px * var(--ts,2)); line-height: 1.05; font-weight: 600;
  letter-spacing: -.025em; color: var(--ink);
}
.hero__sub { font-size:max(15px, calc(13px * var(--ts,2))); color: var(--muted); }

/* ----------------------------------------------------- the split panel -- */

/* Full width of the shell: no gap, no radius, no border. The two grades meet
   edge to edge and the contrast between the panels does all the work. */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split__side { padding: 34px 28px; display: flex; flex-direction: column; gap: 16px; }
.split__side--dark  { background: var(--chrome); color: var(--on-dark); }
.split__side--light { background: var(--light);  color: var(--ink); }

.split__name { font-size:calc(30px * var(--ts,2)); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; }
.split__name--short { display: none; }
.split__lede { font-size:max(15px, calc(13px * var(--ts,2))); }
.split__side--dark  .split__lede { color: var(--muted-soft); }
.split__side--light .split__lede { color: var(--muted); }

.split__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.split__side--dark .split__img { box-shadow: var(--glow-img); }

.split__side--dark  .pricerow__amount { color: var(--on-dark); }
.split__side--light .pricerow__amount { color: var(--ink); }

/* -------------------------------------------------------- page heading -- */

.pagehead { padding: 32px 34px 0; }
.pagehead__title { font-size:calc(26px * var(--ts,2)); font-weight: 600; letter-spacing: -.02em; }
.pagehead__note  { font-size:max(15px, calc(12px * var(--ts,2))); color: var(--muted); margin-top: 6px; }
.is-dark .pagehead__title { color: var(--light); }
.pagehead--center { text-align: center; padding-left: 30px; padding-right: 30px; }
.pagehead--matrix { text-align: center; padding: 32px 30px 0 200px; }

/* ----------------------------------------------------------- lit cards -- */

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 34px 32px; }

.card {
  border: 1px solid var(--edge-soft); border-radius: 12px; padding: 24px;
  background: var(--wash-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card--lead { border-color: var(--edge-cyan); background: var(--wash-cyan); box-shadow: var(--glow); }
.card:hover { border-color: var(--edge-cyan); }

.card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-top: 14px; }
.card__name { font-size:max(15px, calc(19px * var(--ts,2))); font-weight: 600; color: #fff; margin-top: 16px; }
.card .pricerow { margin-top: 14px; }
.card .pricerow__amount { font-size:calc(24px * var(--ts,2)); color: #fff; }
.card .pricerow__sku { color: var(--muted); }
.card .btn { margin-top: 16px; }

/* ------------------------------------------------------------- compare -- */

.matrix { display: grid; grid-template-columns: 150px 1fr 1fr; column-gap: 20px; padding: 24px 30px 30px; }

.matrix__head { border: 1px solid var(--edge-soft); border-radius: 12px; padding: 20px; background: var(--wash-soft); }
.matrix__head--lead { border-color: var(--edge-cyan); background: var(--wash-cyan); box-shadow: var(--glow); }
.matrix__img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; margin-top: 12px;
}
/* Frame 4c floats a cut-out on a light plate. A scene photograph gets cropped
   like any other image instead, so the two heads still read as one system. */
.matrix__img--cutout { object-fit: contain; background: var(--light); }
.matrix__grade { font-size:max(15px, calc(18px * var(--ts,2))); font-weight: 600; color: #fff; margin-top: 14px; text-align: center; }

.matrix__label { padding: 16px 0;   border-top: 1px solid var(--rule-dark); font-size:max(15px, calc(11px * var(--ts,2))); font-weight: 500; color: var(--muted); }
.matrix__cell  { padding: 16px 20px; border-top: 1px solid var(--rule-dark); font-size:max(15px, calc(12px * var(--ts,2))); color: var(--light); }
.matrix__row1  { margin-top: 22px; }

.matrix__spacer { grid-column: 1; }
.matrix__label--price { padding: 20px 0; }
.matrix__cell--price  { padding: 20px; }
.matrix__price { font-size:calc(22px * var(--ts,2)); font-weight: 600; color: #fff; text-align: center; }
.matrix__cell--price .btn { margin-top: 12px; }

.in-stock { color: var(--accent); }
.scarce   { color: var(--muted-soft); }

/* ----------------------------------------------------------------- PDP -- */

.crumbs { padding: 16px 30px 0; font-size:max(15px, calc(11px * var(--ts,2))); color: var(--muted-soft); }
.crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.crumbs a:hover { color: var(--accent); }

.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 20px 30px 30px; }
.pdp--lit { background: radial-gradient(90% 60% at 50% 0%, rgba(6, 182, 212, .13), rgba(248, 250, 252, 0) 60%); }

.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery__main {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--rule-light);
}
.gallery--lit .gallery__main { border-color: var(--edge-cyan); box-shadow: var(--glow-img); }

.gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery__thumb {
  width: 100%; aspect-ratio: 1; padding: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--rule-light); background: none; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb--vial { background: #fff; }
.gallery__thumb--vial img { object-fit: contain; }
.gallery--lit .gallery__thumb--vial { border-color: rgba(6, 182, 212, .5); }
.gallery__thumb:hover { border-color: var(--accent); }
.gallery__thumb[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* On the un-lit gallery the vial thumb carries a heavier edge (frame 4e). */
.gallery:not(.gallery--lit) .gallery__thumb--vial { border-color: rgba(15, 23, 42, .3); }

.pdp__title { font-size:calc(26px * var(--ts,2)); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; margin-top: 10px; }
.pdp__price { font-size:calc(30px * var(--ts,2)); font-weight: 600; letter-spacing: -.02em; margin-top: 18px; }

.buyrow { display: flex; gap: 10px; margin-top: 16px; align-items: stretch; }
.buyrow .btn { flex: 1; width: auto; padding: 13px; font-size:max(15px, calc(12.5px * var(--ts,2))); }

.specs { display: flex; flex-direction: column; margin-top: 22px; }
.specs__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--rule-light); font-size:max(15px, calc(12px * var(--ts,2)));
}
.specs__row dt { color: var(--muted); }
.specs__row dd { margin: 0; color: var(--ink); }
.specs__row dd.in-stock { color: var(--accent); }

.crosssell {
  margin-top: 18px; padding: 14px;
  border: 1px solid rgba(6, 182, 212, .5); border-radius: 8px;
  background: linear-gradient(180deg, rgba(6, 182, 212, .08), rgba(248, 250, 252, 0));
  display: flex; gap: 12px; align-items: center;
}
.crosssell__img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 4px; flex: none; }
.crosssell__body { flex: 1; }
.crosssell__body strong { display: block; font-size:max(15px, calc(12px * var(--ts,2))); font-weight: 600; }
.crosssell__body span   { display: block; font-size:max(15px, calc(11px * var(--ts,2))); color: var(--muted); margin-top: 2px; }
.crosssell__go {
  padding: 8px 12px; background: var(--ink); color: var(--light);
  border-radius: 5px; font-size:max(15px, calc(11px * var(--ts,2))); font-weight: 600; flex: none;
  transition: filter .18s ease;
}
.crosssell__go:hover { filter: brightness(1.15); }

/* ------------------------------------------------------- cart + forms -- */

.checkout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; padding: 26px 30px 30px; align-items: start; }

.h-cart { font-size:calc(20px * var(--ts,2)); font-weight: 600; letter-spacing: -.02em; }
.h-sub  { font-size:max(15px, calc(15px * var(--ts,2))); font-weight: 600; margin-top: 26px; }

.line { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule-light); }
.line__media { width: 64px; height: 64px; flex: none; border-radius: 6px; overflow: hidden; background: #fff; }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__body { flex: 1; min-width: 0; }
.line__name { font-size:max(15px, calc(13px * var(--ts,2))); font-weight: 600; }
.line__sku  { font-size:max(15px, calc(11px * var(--ts,2))); color: var(--muted); margin-top: 3px; list-style: disc; padding-left: 15px; }
.line__sku li + li { margin-top: 1px; }
.line__price { font-size:max(15px, calc(13px * var(--ts,2))); font-weight: 600; width: 62px; text-align: right; }
.line__tools { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.line__remove { border: 0; background: none; padding: 0; font-size:max(15px, calc(11px * var(--ts,2))); color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.line__remove:hover { color: var(--ink); }

.rails { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rail {
  display: flex; align-items: center; gap: 9px; padding: 14px; cursor: pointer;
  border: 1px solid var(--rule-field); border-radius: 8px;
  font-size:max(15px, calc(13px * var(--ts,2))); font-weight: 600; position: relative;
}
.rail input { position: absolute; opacity: 0; pointer-events: none; }
.rail__dot { width: 14px; height: 14px; flex: none; border: 1.5px solid rgba(15, 23, 42, .35); border-radius: 50%; }
.rail:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(6, 182, 212, .09), rgba(248, 250, 252, 0));
}
.rail:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Frame 4f draws the selected dot as a wide navy ring, not a filled blob. The
   box-sizing reset shrinks it, so the size is restated here. */
.rail:has(input:checked) .rail__dot { width: 22px; height: 22px; border: 4px solid var(--ink); }

.payhow { margin-top: 12px; border: 1px solid rgba(15, 23, 42, .12); border-radius: 8px; padding: 16px; }
.payhow__title { font-size:max(15px, calc(12.5px * var(--ts,2))); font-weight: 600; }
.payhow__body { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; font-size:max(15px, calc(11.5px * var(--ts,2))); }
.payhow__mark { font-weight: 500; color: var(--chrome); align-self: flex-start; }
.payhow__body span { color: var(--muted); }
.payhow__body span.payhow__mark { color: var(--chrome); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.field--wide { grid-column: span 2; }
.field label { display: block; font-size:max(15px, calc(10px * var(--ts,2))); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  width: 100%; margin-top: 6px; padding: 11px 12px;
  border: 1px solid var(--rule-field); border-radius: 6px;
  font-size:max(15px, calc(12px * var(--ts,2))); background: none;
}
.field select { background: var(--light); appearance: none; color: var(--ink); }
.field input::placeholder { color: var(--muted-soft); }
.field input:focus:not(:focus-visible),
.field select:focus:not(:focus-visible) { outline: none; border-color: var(--accent); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--accent); }

.summary { position: sticky; top: 16px; align-self: start; border: 1px solid rgba(15, 23, 42, .12); border-radius: 10px; padding: 20px; }
.summary__title { font-size:max(15px, calc(14px * var(--ts,2))); font-weight: 600; }
.summary__rows { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; font-size:max(15px, calc(12px * var(--ts,2))); color: var(--muted); }
.summary__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.summary__rows span { color: var(--ink); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-light); }
.summary__total dt { font-size:max(15px, calc(13px * var(--ts,2))); font-weight: 600; }
.summary__total dd { margin: 0; font-size:calc(20px * var(--ts,2)); font-weight: 600; }
.summary .btn { margin-top: 16px; padding: 13px; font-size:max(15px, calc(12.5px * var(--ts,2))); }
.summary__fine { font-size:max(15px, calc(10.5px * var(--ts,2))); color: var(--muted-soft); margin-top: 10px; text-align: center; }

.notice { border-radius: 8px; padding: 13px 16px; font-size:max(15px, calc(12px * var(--ts,2))); margin: 0 30px 16px; }
.notice--error { background: #FEF2F2; border: 1px solid #FECACA; color: #7F1D1D; }
.notice--quiet { background: rgba(15, 23, 42, .04); border: 1px solid var(--rule-light); color: var(--muted); margin: 16px 0 0; }
.notice ul { margin: 0; padding-left: 18px; }

.empty { text-align: center; padding: 70px 34px; }
.empty h1 { font-size:calc(26px * var(--ts,2)); font-weight: 600; letter-spacing: -.02em; }
.empty p { color: var(--muted); margin: 8px 0 22px; }
.empty .btn { width: auto; display: inline-block; padding: 12px 22px; }

/* ------------------------------------------------------- confirmation -- */

.confirm__head {
  padding: 40px 34px 26px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.confirm__ring {
  width: 40px; height: 40px; border: 1.5px solid var(--accent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size:max(15px, calc(18px * var(--ts,2)));
}
.confirm__title { font-size:calc(24px * var(--ts,2)); font-weight: 600; letter-spacing: -.02em; }
.confirm__warn { font-size:max(15px, calc(11px * var(--ts,2))); line-height: 1.6; color: var(--muted); max-width: 38ch; }
.confirm__warn--wide { max-width: none; margin: 0 auto; }
.confirm__id { font-size:max(15px, calc(11px * var(--ts,2))); color: var(--muted-soft); }

.confirm__lines { padding: 0 34px 8px; display: flex; flex-direction: column; }
.confirm__line { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule-light); }
.confirm__line .line__media { width: 52px; height: 52px; border-radius: 5px; }
.confirm__line .line__name { font-size:max(15px, calc(12.5px * var(--ts,2))); }
.confirm__line .line__sku { margin-top: 2px; }
.confirm__line .line__price { font-size:max(15px, calc(12.5px * var(--ts,2))); width: auto; }

.confirm__sums { display: flex; flex-direction: column; gap: 7px; padding: 12px 0 0; font-size:max(15px, calc(11.5px * var(--ts,2))); color: var(--muted); }
.confirm__sums > div { display: flex; justify-content: space-between; }
.confirm__sums span { color: var(--ink); }
.confirm__paid { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule-light); }
.confirm__paid dt { font-size:max(15px, calc(12.5px * var(--ts,2))); font-weight: 600; }
.confirm__paid dd { margin: 0; font-size:max(15px, calc(18px * var(--ts,2))); font-weight: 600; }

/* ------------------------------------------------------------- support -- */

.prose { padding: 0 34px 40px; max-width: 62ch; }
.prose h2 { font-size:max(15px, calc(15px * var(--ts,2))); font-weight: 600; margin-top: 26px; }
.prose p  { font-size:max(15px, calc(13px * var(--ts,2))); line-height: 1.7; color: var(--muted); margin-top: 8px; }
.prose a  { color: #0E7490; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 780px) {
  .pdp, .checkout { grid-template-columns: 1fr; }
  .summary { position: static; }
}

/* The headline breaks after "Two grades." on desktop and wraps freely on mobile. */
.hero__title .brk { display: block; height: 0; }
.lbl-short { display: none; }

@media (max-width: 720px) {
  /* The mobile nav used to hide every link except the cart, which left a phone
     with no way to reach Products, Drop or the Tracker at all — flagged in
     OFFER.md as one of the three things outranking the offer itself, since
     every channel in the plan is mobile. The bar wraps to two rows instead:
     wordmark on top, the full nav underneath, spread edge to edge.
     Measured at 390px: 330px of content in a 354px budget. */
  .site-header__bar { padding: 12px 18px; flex-wrap: wrap; row-gap: 11px; justify-content: center; }
  .site-nav { width: 100%; justify-content: space-between; gap: 8px; }
  /* nowrap because the cart pill was breaking INSIDE itself — "Cart" on one
     line and "(3)" on the next — which doubled the header's height on every
     page. The nav as a whole fits at 333px in a 368px bar; it was never an
     overflow, just a word break nobody had forbidden. */
  .site-nav a { font-size:max(15px, calc(10.5px * var(--ts,1.35))); letter-spacing: .06em;
                white-space: nowrap; }
  .site-nav .cart-link { padding: 7px 13px; }
  .wordmark { font-size:max(15px, calc(13px * var(--ts,2))); }
  .mark { width: 14px; height: 14px; }

  .hero { padding: 28px 18px 20px; gap: 11px; }
  .hero__title { font-size:calc(26px * var(--ts,2)); line-height: 1.08; }
  .hero__title .brk { display: inline; height: auto; }
  .hero__title .brk::before { content: " "; }
  .hero__eyebrow { font-size:max(15px, calc(9.5px * var(--ts,2))); }
  .hero__sub { font-size:max(15px, calc(12px * var(--ts,2))); }

  /* Frame 4j is not a narrowed split panel — it is two horizontal cards: a small
     square vial beside the name and price, then a full-width navy button. */
  .split { grid-template-columns: 1fr; gap: 14px; padding: 0 18px 20px; }
  .split__side {
    display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: center;
    grid-template-areas: "eb eb" "im nm" "im pr" "bt bt";
    border-radius: 9px; padding: 16px;
  }
  .split__side--dark {
    background: linear-gradient(180deg, rgba(6, 182, 212, .09), rgba(248, 250, 252, 0));
    border: 1px solid rgba(6, 182, 212, .5); color: var(--ink);
  }
  .split__side--light { border: 1px solid rgba(15, 23, 42, .14); }
  .split__side .eyebrow    { grid-area: eb; font-size:max(15px, calc(9px * var(--ts,2))); }
  .split__side .split__name{ grid-area: nm; font-size:max(15px, calc(13.5px * var(--ts,2))); line-height: 1.25; align-self: end; }
  .split__name--long  { display: none; }
  .split__name--short { display: inline; }
  .split__side .pricerow   { grid-area: pr; align-self: start; }
  .split__side .pricerow__amount { font-size:max(15px, calc(15px * var(--ts,2))); color: var(--ink); }
  .split__side .pricerow__sku    { display: none; }
  .split__imglink { grid-area: im; }
  .split__side .btn { grid-area: bt; padding: 14px; font-size:max(15px, calc(12.5px * var(--ts,2))); }
  .split__lede { display: none; }
  .split__img {
    width: 66px; height: 66px; object-fit: contain;
    background: #fff; border-radius: 5px; box-shadow: none;
  }
  .split__side--dark .btn--cyan { background: var(--ink); color: var(--light); }
  .split__side--dark .split__img { box-shadow: none; }

  /* 4h and 4j carry no kit-contents strip. */
  .strip { display: none; }

  .pagehead { padding: 22px 18px 0; }
  .pagehead--center { padding-left: 18px; padding-right: 18px; }
  .pagehead__title { font-size:calc(21px * var(--ts,2)); line-height: 1.15; }
  .pagehead__note { font-size:max(15px, calc(11px * var(--ts,2))); }

  .cards { grid-template-columns: 1fr; gap: 16px; padding: 18px 18px 22px; }
  .card { border-radius: 11px; padding: 18px; }
  .card--lead { box-shadow: 0 0 34px rgba(6, 182, 212, .18); }
  .card .eyebrow { font-size:max(15px, calc(9.5px * var(--ts,2))); }
  .card__img { aspect-ratio: 16 / 10; border-radius: 7px; margin-top: 12px; }
  .card__name { font-size:max(15px, calc(16px * var(--ts,2))); margin-top: 13px; }
  .card .pricerow { margin-top: 12px; }
  .card .pricerow__amount { font-size:calc(21px * var(--ts,2)); }
  .card .pricerow__sku { display: none; }
  .card .btn { margin-top: 13px; padding: 14px; font-size:max(15px, calc(13px * var(--ts,2))); }

  /* The matrix stops being a three-column grid and stacks into labelled rows. */
  .matrix { grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 18px 16px 22px; }
  .matrix__spacer { display: none; }
  .matrix__label {
    grid-column: 1 / -1; padding: 14px 0 6px; border-top: 1px solid var(--rule-dark);
    font-size:max(15px, calc(10px * var(--ts,2))); letter-spacing: .1em; text-transform: uppercase;
  }
  .matrix__cell { padding: 0 0 8px; border-top: 0; }
  .matrix__row1 { margin-top: 16px; }
  /* Frame 4i puts the image first and drops the badge below the grade name. */
  .matrix__head { display: flex; flex-direction: column; border-radius: 10px; padding: 12px; }
  .matrix__head--lead { box-shadow: 0 0 28px rgba(6, 182, 212, .18); }
  .matrix__head .eyebrow { order: 3; font-size:max(15px, calc(9px * var(--ts,2))); letter-spacing: .13em; margin-top: 3px; text-align: center; }
  .matrix__img   { order: 1; margin-top: 0; }
  .matrix__grade { order: 2; font-size:max(15px, calc(14px * var(--ts,2))); margin-top: 10px; }
  .matrix__label--price { padding: 14px 0 6px; }
  .matrix__cell--price { padding: 0 0 8px; }
  .matrix__price { font-size:max(15px, calc(19px * var(--ts,2))); }
  .matrix__cell--price .btn { padding: 13px; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }

  .pagehead--matrix { padding: 22px 18px 0; }
  .crumbs { padding: 14px 18px 0; }
  .pdp, .checkout { padding: 18px; gap: 20px; }
  .pdp__title { font-size:calc(21px * var(--ts,2)); line-height: 1.15; }
  .pdp__price { font-size:calc(26px * var(--ts,2)); margin-top: 14px; }
  .specs__row { font-size:max(15px, calc(11.5px * var(--ts,2))); padding: 10px 0; }

  /* Frame 4j keeps the buy row pinned to the bottom of the viewport. */
  .buyrow {
    position: sticky; bottom: 0; z-index: 20; margin: 16px -18px 0;
    padding: 14px 18px; border-top: 1px solid var(--rule-light); background: var(--light);
  }
  .buyrow .btn { padding: 15px; }

  .line { padding: 12px 0; }
  .line__media { width: 54px; height: 54px; }
  .line__name { font-size:max(15px, calc(12.5px * var(--ts,2))); }
  .line__sku { font-size:max(15px, calc(10.5px * var(--ts,2))); }
  .line__price { font-size:max(15px, calc(12.5px * var(--ts,2))); width: 56px; }

  .rails, .form { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }

  .confirm__head { padding: 34px 18px 22px; gap: 11px; }
  .confirm__ring { width: 36px; height: 36px; font-size:max(15px, calc(16px * var(--ts,2))); }
  .confirm__title { font-size:calc(21px * var(--ts,2)); }
  .confirm__lines, .prose { padding-left: 18px; padding-right: 18px; }
  .confirm__line { padding: 13px 0; }
  .confirm__line .line__media { width: 46px; height: 46px; }
  .confirm__line .line__name, .confirm__line .line__price { font-size:max(15px, calc(12px * var(--ts,2))); }
  .confirm__line .line__sku { font-size:max(15px, calc(10.5px * var(--ts,2))); }
  .confirm__paid dt { font-size:max(15px, calc(12px * var(--ts,2))); }
  .confirm__paid dd { font-size:max(15px, calc(17px * var(--ts,2))); }
  .notice { margin: 0 18px 16px; }

  /* Footer stacks and centres. */
  .site-footer__bar { flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; text-align: center; }
  .site-footer__brand { flex-direction: column; align-items: center; gap: 6px; }
  .site-footer__stack { align-items: center; }
  .site-footer__nav { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .site-footer__name { font-size:max(15px, calc(11.5px * var(--ts,2))); }
  .site-footer__line { font-size:max(15px, calc(11px * var(--ts,2))); }
  .site-footer__flag { font-size:max(15px, calc(9.5px * var(--ts,2))); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}