/* ==========================================================================
   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                */
  --highlight:   #F4DD20B7; /* the one highlighter run, on checkout     */

  --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;
}

/* --------------------------------------------------------------- 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: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.is-dark { background: var(--ink); 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; }

.shell { max-width: var(--shell); margin: 0 auto; }
main { flex: 1 0 auto; }

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

/* -------------------------------------------------------------- chrome -- */

.site-header { background: var(--chrome); border-bottom: 1px solid var(--rule-chrome); }

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

/* The mark is a hollow cyan circle, drawn rather than an image file. */
.mark {
  width: 16px; height: 16px; flex: none;
  border: 1.5px solid var(--accent); border-radius: 50%;
}

.wordmark {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--on-dark);
}

.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a { font-size: 12px; font-weight: 400; color: var(--on-dark); }
.site-nav a:hover { color: var(--accent); }

.site-footer { background: var(--chrome); border-top: 1px solid var(--rule-chrome); }

.site-footer__bar {
  max-width: var(--shell); margin: 0 auto; padding: 35px 30px;
  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: center; gap: 10px; color: var(--on-dark); }
.site-footer__brand .mark { width: 13px; height: 13px; }
.site-footer__name { font-size: 12px; font-weight: 600; white-space: nowrap; }
.site-footer__line { font-size: 11.5px; font-weight: 400; }
.site-footer__nav { display: flex; gap: 18px; font-size: 11.5px; color: var(--on-dark); }
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__flag { font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--on-dark); white-space: nowrap; }

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

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

.btn {
  display: block; width: 100%; padding: 11px; text-align: center;
  font-size: 12px; 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: 22px; font-weight: 600; }
.pricerow__sku { font-size: 11px; 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: 13px; font-weight: 600; color: var(--ink); }
.strip__cell span   { display: block; font-size: 11px; 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: 40px; line-height: 1.05; font-weight: 600;
  letter-spacing: -.025em; color: var(--ink);
}
.hero__sub { font-size: 13px; 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: 30px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; }
.split__name--short { display: none; }
.split__lede { font-size: 13px; }
.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: 26px; font-weight: 600; letter-spacing: -.02em; }
.pagehead__note  { font-size: 12px; 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: 19px; font-weight: 600; color: #fff; margin-top: 16px; }
.card__lede { font-size: 12px; line-height: 1.6; color: var(--muted-soft); margin-top: 6px; }
.card .pricerow { margin-top: 14px; }
.card .pricerow__amount { font-size: 24px; 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: 18px; font-weight: 600; color: #fff; margin-top: 14px; text-align: center; }
.matrix__sku   { font-size: 11px; color: var(--muted); margin-top: 3px; text-align: center; }

.matrix__label { padding: 16px 0;   border-top: 1px solid var(--rule-dark); font-size: 11px; font-weight: 500; color: var(--muted); }
.matrix__cell  { padding: 16px 20px; border-top: 1px solid var(--rule-dark); font-size: 12px; 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: 22px; 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: 11px; 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: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; margin-top: 10px; }
.pdp__meta  { font-size: 12px; color: var(--muted-soft); margin-top: 6px; }
.pdp__lede  { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.pdp__price { font-size: 30px; 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: 12.5px; }

.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: 12px;
}
.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: 12px; font-weight: 600; }
.crosssell__body span   { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.crosssell__go {
  padding: 8px 12px; background: var(--ink); color: var(--light);
  border-radius: 5px; font-size: 11px; 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: 20px; font-weight: 600; letter-spacing: -.02em; }
.h-sub  { font-size: 15px; 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: 13px; font-weight: 600; }
.line__sku  { font-size: 11px; color: var(--muted); margin-top: 3px; }
.line__price { font-size: 13px; 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: 11px; 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: 13px; 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: 12.5px; font-weight: 600; }
.payhow__body { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; font-size: 11.5px; }
.payhow__mark { font-weight: 500; color: var(--chrome); background-color: var(--highlight); 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: 10px; 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: 12px; 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: 14px; font-weight: 600; }
.summary__rows { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; font-size: 12px; 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: 13px; font-weight: 600; }
.summary__total dd { margin: 0; font-size: 20px; font-weight: 600; }
.summary .btn { margin-top: 16px; padding: 13px; font-size: 12.5px; }
.summary__fine { font-size: 10.5px; color: var(--muted-soft); margin-top: 10px; text-align: center; }

.notice { border-radius: 8px; padding: 13px 16px; font-size: 12px; 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: 26px; 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: 18px;
}
.confirm__title { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.confirm__warn { font-size: 11px; line-height: 1.6; color: var(--muted); max-width: 38ch; }
.confirm__warn--wide { max-width: none; margin: 0 auto; }
.confirm__id { font-size: 11px; 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: 12.5px; }
.confirm__line .line__sku { margin-top: 2px; }
.confirm__line .line__price { font-size: 12.5px; width: auto; }

.confirm__sums { display: flex; flex-direction: column; gap: 7px; padding: 12px 0 0; font-size: 11.5px; 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: 12.5px; font-weight: 600; }
.confirm__paid dd { margin: 0; font-size: 18px; font-weight: 600; }

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

.prose { padding: 0 34px 40px; max-width: 62ch; }
.prose h2 { font-size: 15px; font-weight: 600; margin-top: 26px; }
.prose p  { font-size: 13px; 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) {
  .site-header__bar { padding: 13px 18px; }
  .site-nav a:not(.cart-link) { display: none; }
  .site-nav .cart-link { font-size: 11px; }
  .wordmark { font-size: 13px; }
  .mark { width: 14px; height: 14px; }

  .hero { padding: 28px 18px 20px; gap: 11px; }
  .hero__title { font-size: 26px; line-height: 1.08; }
  .hero__title .brk { display: inline; height: auto; }
  .hero__title .brk::before { content: " "; }
  .hero__eyebrow { font-size: 9.5px; }
  .hero__sub { font-size: 12px; }

  /* 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: 9px; }
  .split__side .split__name{ grid-area: nm; font-size: 13.5px; 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: 15px; color: var(--ink); }
  .split__side .pricerow__sku    { display: none; }
  .split__imglink { grid-area: im; }
  .split__side .btn { grid-area: bt; padding: 14px; font-size: 12.5px; }
  .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: 21px; line-height: 1.15; }
  .pagehead__note { font-size: 11px; }

  .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: 9.5px; }
  .card__img { aspect-ratio: 16 / 10; border-radius: 7px; margin-top: 12px; }
  .card__name { font-size: 16px; margin-top: 13px; }
  .card__lede { font-size: 11.5px; line-height: 1.55; margin-top: 5px; }
  .card .pricerow { margin-top: 12px; }
  .card .pricerow__amount { font-size: 21px; }
  .card .pricerow__sku { display: none; }
  .card .btn { margin-top: 13px; padding: 14px; font-size: 13px; }

  /* 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: 10px; 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: 9px; letter-spacing: .13em; margin-top: 3px; text-align: center; }
  .matrix__img   { order: 1; margin-top: 0; }
  .matrix__grade { order: 2; font-size: 14px; margin-top: 10px; }
  .matrix__sku   { display: none; }
  .matrix__label--price { padding: 14px 0 6px; }
  .matrix__cell--price { padding: 0 0 8px; }
  .matrix__price { font-size: 19px; }
  .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: 21px; line-height: 1.15; }
  .pdp__price { font-size: 26px; margin-top: 14px; }
  .pdp__lede { font-size: 12px; margin-top: 12px; }
  .specs__row { font-size: 11.5px; 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: 12.5px; }
  .line__sku { font-size: 10.5px; }
  .line__price { font-size: 12.5px; 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: 16px; }
  .confirm__title { font-size: 21px; }
  .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: 12px; }
  .confirm__line .line__sku { font-size: 10.5px; }
  .confirm__paid dt { font-size: 12px; }
  .confirm__paid dd { font-size: 17px; }
  .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; gap: 6px; }
  .site-footer__nav { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .site-footer__name { font-size: 11.5px; }
  .site-footer__line { font-size: 11px; }
  .site-footer__flag { font-size: 9.5px; }
}

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