/* =========================================================================
   Glucagon Research — site-v8.css
   The component layer for every inner page. Loads AFTER
   tokens.css -> base.css -> components.css -> css/home.css.

   Rules it keeps: white page, photography leads, nothing drawn around a
   photograph, one headline / one lead / one paragraph / one underlined link.
   No cards, no chips, no eyebrows, no tinted panels behind type.
   It extends .tile / .pills / .tests / .bb / .trio / .btn — never restyles them.

   1  page-head            6  spec              11 cart + qty
   2  crumbs               7  coa               12 checkout
   3  gallery              8  coa-lib + coa-lb  13 done
   4  buy + opt            9  related           14 prose
   5  section furniture   10  faq + form        15 band-cta + responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Shared furniture — the only two type steps inner pages add
   ---------------------------------------------------------------------- */
.sec {
  padding-block: clamp(64px, 7vw, 104px) 0;
}
.sec--flush { padding-top: clamp(40px, 4.5vw, 64px); }
.sec__title {
  margin: 0;
  font-size: clamp(28px, 2.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: var(--brand-graphite);
  text-wrap: balance;
}
.sec__lead {
  margin: var(--s-5) 0 0;
  max-width: 36ch;
  font-size: 17px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text);
  text-wrap: pretty;
}
.sec__para {
  margin: var(--s-5) 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-soft);
  text-wrap: pretty;
}
.sec__note {
  margin: var(--s-6) 0 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* the one link treatment on the site: emerald, 2px rule, 6px offset */
.link-u {
  display: inline-block;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.link-u:hover { color: var(--brand-hover); text-decoration-color: var(--brand-hover); }
.link-u:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.link-u--sm { font-size: var(--fs-sm); }
.link-u.is-disabled {
  color: var(--n-400);
  text-decoration-color: var(--n-300);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   1. page-head — how every inner page opens
   ---------------------------------------------------------------------- */
.page-head { background: #fff; }

.page-head__title {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(40px, 4.1vw, 56px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--brand-graphite);
  text-wrap: balance;
}
.page-head__lead {
  margin: var(--s-6) 0 0;
  max-width: 44ch;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--text-soft);
  text-wrap: pretty;
}
.page-head .pills { margin-top: var(--s-7); }

/* --photo: the home hero's grid. Words left in clear space, photograph
   right, bleeding top and right. Nothing drawn around it. */
.page-head--photo {
  display: grid;
  grid-template-columns: 48fr 52fr;
  min-height: clamp(420px, 48vh, 560px);
}
.page-head--photo .page-head__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(64px, 7vw, 104px) var(--s-9) clamp(64px, 7vw, 104px)
           max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
}
.page-head--photo .page-head__photo {
  position: relative; overflow: hidden; background: var(--surface);
}
.page-head--photo .page-head__photo img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border: 0; border-radius: 0; box-shadow: none;
}

/* --plain: H1 + lead in the wide container, 96px of air above */
.page-head--plain .page-head__copy {
  padding-block: var(--s-13) 0;
}
.page-head--plain .page-head__title { max-width: 18ch; }

/* --band: 21:9 photograph full bleed, the words beneath it in two columns */
.page-head--band .page-head__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover; object-position: center;
  border: 0; border-radius: 0; box-shadow: none;
}
.page-head--band .page-head__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--s-11);
  align-items: start;
  padding-block: var(--s-10) 0;
}
.page-head--band .page-head__col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.page-head--band .page-head__col--para { padding-top: 10px; }
.page-head--band .page-head__title { max-width: 20ch; }
.page-head--band .page-head__lead { margin-top: var(--s-5); }

/* -------------------------------------------------------------------------
   2. crumbs — sits above the H1, never on the home page
   ---------------------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px;
  margin: 0 0 var(--s-7);
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.crumbs li { display: flex; align-items: center; gap: 12px; list-style: none; }
.crumbs li + li::before { content: "/"; color: var(--n-300); }
.crumbs [aria-current="page"] { color: var(--text-soft); font-weight: var(--fw-medium); }

/* the PDP opens on the crumbs alone — no page-head */
.pdp-top { padding-top: var(--s-9); }

/* -------------------------------------------------------------------------
   3. gallery — the PDP image stage. A rounded --surface frame with the
   product big inside it, four thumbs beneath in one row, one caption line.
   ---------------------------------------------------------------------- */
.gallery { min-width: 0; }
.gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* the cut-outs carry ~12% white air top and bottom: oversize and clip it,
   exactly the way the home tile does, so the product reads BIG in the frame */
.gallery__stage img {
  position: absolute; inset: -12%;
  width: 124%; height: 124%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* scenes fill the frame instead of floating in it */
.gallery__stage img[data-fit="cover"] {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}
/* the certificate is a document: contained, on white, not multiplied */
.gallery__stage img[data-fit="doc"] {
  inset: 7%; width: 86%; height: 86%;
  object-fit: contain;
  mix-blend-mode: normal;
  background: #fff;
}
.gallery__thumbs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin-top: 10px;
  padding: 0; list-style: none;
}
.gallery__thumb {
  position: relative;
  display: block;
  width: 100%; aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease);
}
.gallery__thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
  mix-blend-mode: multiply;
}
.gallery__thumb[data-fit="cover"] img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.gallery__thumb[data-fit="doc"] { background: var(--surface-2); }
.gallery__thumb[data-fit="doc"] img { mix-blend-mode: normal; background: #fff; padding: 12px; }
.gallery__thumb:hover { border-color: var(--line-strong); }
.gallery__thumb.is-selected {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.gallery__thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gallery__cap {
  margin: 12px 0 0;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   4. buy — the purchase column: code, mechanism, price strip, strength row,
   bundle cards, nudge, purchase option, two buttons, trust rows, attributes.
   The column is long, so it does not stick; it scrolls with the gallery.
   ---------------------------------------------------------------------- */
.buy {
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 0;
}
.buy__code {
  margin: 0;
  font-size: clamp(38px, 3.7vw, 54px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--brand-graphite);
}
.buy__line {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--muted);
}

/* .buy__price / __amount / __unit / __cta / __foot below are the single-price
   buy box styleguide.html still demonstrates; the PDP prices through .psum. */
.buy__price {
  display: flex; align-items: baseline; gap: 10px;
  margin: var(--s-8) 0 0;
}
.buy__amount {
  font-size: 32px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--brand-graphite);
  font-variant-numeric: tabular-nums;
}
.buy__unit { font-size: 15px; color: var(--muted); }
.buy__cta { margin-top: var(--s-8); }
.buy__foot {
  margin: var(--s-6) 0 0;
  font-size: 14px; line-height: 1.5;
  color: var(--muted);
}
.buy__foot + .buy__foot { margin-top: var(--s-4); }

/* option rows — plain 52px rectangles, no card around the group */
.opt { margin-top: var(--s-9); }
.opt__label {
  display: block;
  margin: 0 0 var(--s-4);
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.opt__row { display: flex; flex-wrap: wrap; gap: 10px; }
.opt__row--stack { flex-direction: column; }
.opt__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 52px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 16px; font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.opt__row:not(.opt__row--stack) .opt__item { flex: 1 1 96px; justify-content: center; }
.opt__row--stack .opt__item { width: 100%; }
.opt__item:hover { border-color: var(--n-400); }
.opt__item.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
  color: var(--emerald-800);
}
.opt__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt__item[disabled] { opacity: 0.4; pointer-events: none; }
.opt__aside {
  font-size: 14px; font-weight: var(--fw-medium);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.opt__item.is-selected .opt__aside { color: var(--emerald-700); }

/* -------------------------------------------------------------------------
   4b. The PDP buy box, module by module. Layout ported from the reference
   mockup (_ref-biocollex), every colour, radius and type step taken from
   tokens.css: white page, --surface tints, emerald for anything that means
   money saved, 12–14px radii, Manrope throughout.
   ---------------------------------------------------------------------- */

/* the product section: gallery 44 / details 56, the reference's proportions */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  column-gap: clamp(36px, 4vw, 64px);
  row-gap: var(--s-10);
  align-items: start;
  margin-top: var(--s-8);
}

/* the price summary strip — four cells over one footer line */
.psum {
  margin-top: var(--s-8);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.psum__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.psum__cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 18px;
  border-right: 1px solid var(--line-soft);
}
.psum__cell:last-child { border-right: 0; }
.psum__label {
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.psum__value {
  font-size: 21px; font-weight: 800;
  letter-spacing: -0.022em; line-height: 1.1;
  color: var(--brand-graphite);
  font-variant-numeric: tabular-nums;
}
.psum__value--was {
  font-weight: var(--fw-medium);
  color: var(--n-400);
  text-decoration: line-through;
}
.psum__value--now,
.psum__value--save { color: var(--brand); }
.psum__pill {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--emerald-700);
  white-space: nowrap;
}
.psum__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 0;
  padding: 12px 18px;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--text-soft);
}
.psum__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  align-self: center;
}
.psum__lead { font-weight: var(--fw-semibold); color: var(--text); }
.psum__lead span { font-variant-numeric: tabular-nums; }
.psum__sub { font-size: 12px; color: var(--muted); }

/* a selector title with a badge opposite it */
.opt__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.opt__head .opt__label { margin: 0; }
.buy .opt { margin-top: var(--s-8); }
.badge-purity {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-soft);
}
.badge-purity::before {
  content: "\2713";
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 9px; font-weight: 800;
}

/* the bundle picker */
.bundles { margin-top: var(--s-8); }
.bundles__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.bulk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand);
}
.bulk::before { content: "\25CF"; font-size: 7px; }
.bundles__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.bundle {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.bundle:hover:not(.is-selected) { border-color: var(--line-strong); background: var(--n-25); }
.bundle.is-muted:not(.is-selected) { opacity: 0.6; }
.bundle.is-muted:not(.is-selected):hover { opacity: 0.9; }
.bundle.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.bundle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bundle__tag {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
}
.bundle__tag--popular { background: var(--brand); color: #fff; }
.bundle__tag--value {
  background: var(--emerald-100);
  color: var(--emerald-800);
  box-shadow: inset 0 0 0 1px var(--emerald-200);
}
.bundle__qty {
  font-size: 19px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--brand-graphite);
}
.bundle__vials {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  height: 34px;
  margin: 12px 0 14px;
  color: var(--brand);
}
.bundle__vials svg { width: 11px; height: 34px; fill: currentColor; }
.bundle.is-muted:not(.is-selected) .bundle__vials { color: var(--n-500); }
.bundle__price {
  font-size: 15px; font-weight: var(--fw-bold);
  color: var(--brand-graphite);
  font-variant-numeric: tabular-nums;
}
.bundle__was {
  margin-right: 5px;
  font-size: 12px; font-weight: var(--fw-medium);
  color: var(--n-400);
  text-decoration: line-through;
}
.bundle__was[hidden] { display: none; }
.bundle__total {
  margin: 4px 0 12px;
  font-size: 11px; font-weight: var(--fw-medium);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bundle__save {
  align-self: stretch;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-soft);
}
.bundle__save--on { background: var(--brand); color: #fff; }
.bundle__foot {
  margin-top: 10px;
  min-height: 28px;
  font-size: 11px; line-height: 1.3;
  color: var(--muted);
}

/* the upgrade line under the cards */
.nudge {
  display: flex; align-items: center; gap: 10px;
  margin: var(--s-6) 0 0;
  padding: 13px 16px;
  background: var(--brand-soft);
  border: 1px solid var(--emerald-100);
  border-left: 2px solid var(--brand);
  border-radius: var(--r-md);
  font-size: 13px; line-height: 1.45;
  color: var(--text-soft);
}
.nudge__ico { flex: none; font-size: 15px; color: var(--brand); }
.nudge strong { font-weight: var(--fw-bold); color: var(--emerald-800); }

/* the purchase option. One row: this shop has no subscriptions. */
.pay { margin-top: var(--s-8); }
.pay__row {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding: 16px 18px 16px 46px;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.pay__row::before {
  content: "";
  position: absolute; left: 17px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border: 2px solid var(--brand);
  border-radius: 50%;
}
.pay__row::after {
  content: "";
  position: absolute; left: 22px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 50%;
}
.pay__name { font-size: 15px; font-weight: var(--fw-bold); color: var(--text); }
.pay__price {
  font-size: 18px; font-weight: 800;
  color: var(--brand-graphite);
  font-variant-numeric: tabular-nums;
}

/* the two buttons */
.buy__actions { display: grid; gap: 10px; margin-top: var(--s-7); }

/* the four trust rows */
.trust {
  display: grid; row-gap: 11px;
  margin: var(--s-8) 0 0;
  padding: 0;
  list-style: none;
}
.trust li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
.trust strong { font-weight: var(--fw-bold); color: var(--text); }
.trust__ico {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 9px; font-weight: 800;
}
.trust__ico::before { content: "\2713"; }

/* the four attribute cells */
.attrs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s-8);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.attrs__cell { display: flex; flex-direction: column; gap: 5px; padding: 15px 18px; }
.attrs__cell:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.attrs__cell:nth-child(-n + 2) { border-bottom: 1px solid var(--line-soft); }
.attrs__label {
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.attrs__value {
  font-size: 14px; font-weight: var(--fw-semibold); line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}
.attrs__value.is-num { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   4c. Quality documentation — the lab table and the COA card. Nothing here
   ever carries a figure: the first lots are in testing, so every result
   reads pending and the card's hero word is "Pending".
   ---------------------------------------------------------------------- */
/* the three closing sections are parted by one hairline the width of the
   container, exactly where the reference puts it */
.qual, .desc, .pdp-rel { margin-top: clamp(60px, 6.5vw, 96px); padding-top: 0; }
.qual > .container,
.desc > .container,
.pdp-rel > .container {
  padding-top: clamp(44px, 4.6vw, 68px);
  border-top: 1px solid var(--line-soft);
}
.qual__pill {
  display: inline-block;
  margin: 0 0 var(--s-6);
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--emerald-700);
}
.qual__title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.04;
  color: var(--brand-graphite);
}
.qual__sub {
  margin: var(--s-5) 0 0;
  max-width: 62ch;
  font-size: 16px; line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.qual__layout {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 4.5vw, 64px);
  row-gap: var(--s-9);
  align-items: start;
  margin-top: clamp(36px, 4vw, 56px);
}
.lab__h {
  margin: 0 0 var(--s-6);
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.lab__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  padding-block: 15px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.lab__row:first-of-type { border-top: 1px solid var(--line-soft); }
.lab__name { color: var(--text-soft); font-weight: var(--fw-medium); }
.lab__res {
  flex: none;
  font-size: 13px; font-weight: var(--fw-medium);
  color: var(--n-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lab__res.is-fact { color: var(--text); font-weight: var(--fw-semibold); }

.coacard {
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.coacard__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.coacard__title {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--brand-graphite);
}
.coacard__pill {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.coacard__hero {
  padding: clamp(28px, 3vw, 40px) var(--s-6);
  margin-bottom: var(--s-7);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: center;
}
.coacard__big {
  margin: 0 0 10px;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
  color: var(--n-400);
}
.coacard__cap {
  margin: 0;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.coacard__list {
  display: grid; row-gap: 12px;
  margin: 0 0 var(--s-7);
  padding: 0;
  list-style: none;
}
.coacard__list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.45;
  color: var(--muted);
}
.coacard__list strong { font-weight: var(--fw-semibold); color: var(--text); }
.coacard__ico {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 3px;
  border: 1.5px dashed var(--n-400);
  border-radius: 50%;
}

/* -------------------------------------------------------------------------
   4d. Description + the research-use box that closes it.
   ---------------------------------------------------------------------- */
.desc__body { max-width: 74ch; margin-top: var(--s-6); }
.desc__body p {
  margin: 0;
  font-size: 16px; line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}
.desc__body p + p { margin-top: var(--s-5); }
.disclaim {
  max-width: 760px;
  margin-top: var(--s-9);
  padding: 18px 22px;
  background: var(--surface);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 13px; line-height: 1.6;
  color: var(--muted);
}
.disclaim strong {
  display: block;
  margin-bottom: 6px;
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--emerald-700);
}

/* -------------------------------------------------------------------------
   4e. The PDP, narrower. One column from 1023 down, gallery first (it is
   first in the source); the price strip folds to 2x2; the bundle cards go
   two across and then one; nothing may scroll sideways at 390.
   ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bundle__qty { font-size: 17px; }
  .bundle__price { font-size: 14px; }
  .psum__value { font-size: 19px; }
}

@media (max-width: 1023px) {
  .pdp { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-10); }
  .qual__layout { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-10); }
  .bundle__qty { font-size: 19px; }
  .bundle__price { font-size: 15px; }
  .psum__value { font-size: 21px; }
}

@media (max-width: 880px) {
  .pdp-rel .tiles > .tile { grid-column: span 6; }
}

/* four codes go two by two on a phone: home.css sends a LAST tile full width,
   which is right for a row of three and wrong for a row of four */
@media (max-width: 720px) {
  .pdp-rel .tiles > .tile,
  .pdp-rel .tiles > .tile:last-child { grid-column: span 6 !important; }
}

@media (max-width: 760px) {
  .psum__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psum__cell:nth-child(2n) { border-right: 0; }
  .psum__cell:nth-child(-n + 2) { border-bottom: 1px solid var(--line-soft); }
  .psum__foot { gap: 4px 6px; }
  .bundles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bundles__grid > .bundle:last-child { grid-column: 1 / -1; }
  .bundle__foot { min-height: 0; }
  .qual__sub { font-size: 15px; }
  .lab__row { font-size: 14px; }
}

/* one to a row on the narrowest phones: the card turns on its side so three
   of them do not add 700px of scroll — qty and vials left, money right */
@media (max-width: 400px) {
  .bundles__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bundles__grid > .bundle:last-child { grid-column: auto; }
  .bundle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-5); row-gap: 2px;
    padding: 16px 16px 14px;
    text-align: left;
  }
  .bundle__qty { grid-column: 1; }
  .bundle__vials {
    grid-column: 1;
    justify-content: flex-start;
    height: 22px; margin: 4px 0 0;
  }
  .bundle__vials svg { height: 22px; width: 8px; }
  .bundle__price { grid-column: 2; grid-row: 1; text-align: right; }
  .bundle__total { grid-column: 2; grid-row: 2; margin: 0; text-align: right; }
  .bundle__save { grid-column: 2; grid-row: 3; align-self: start; margin-top: 6px; }
  .bundle__foot { grid-column: 1; grid-row: 3; margin-top: 8px; }
  .bundle__tag { left: 16px; transform: none; }
  .psum__cell { padding: 14px; }
  .lab__row { flex-wrap: wrap; row-gap: 2px; }
}

/* -------------------------------------------------------------------------
   5. spec — a data list with room to breathe. Not a ledger, not a table.
   ---------------------------------------------------------------------- */
.spec {
  margin: 0;
  max-width: 62ch;
}
.spec__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: 16px;
  border-top: 1px solid var(--line-soft);
}
.spec__row:first-child { border-top: 0; padding-top: 0; }
.spec dt {
  margin: 0;
  font-size: 15px; font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--text);
}
.spec dd {
  margin: 0;
  font-size: 15px; line-height: 1.5;
  color: var(--text-soft);
  min-width: 0;
  overflow-wrap: anywhere;
}
.spec dd.is-num { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   6. coa — the certificate block. Two columns, 5 / 7.
   ---------------------------------------------------------------------- */
.coa { min-width: 0; }
.coa__doc {
  display: block;
  max-width: 440px;
  aspect-ratio: 3 / 4;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.coa__doc img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(16px, 2vw, 28px);
}
.coa__file {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  max-width: 440px;
  margin-top: var(--s-5);
  font-size: 14px;
  color: var(--muted);
}
.coa__state { font-size: 13px; color: var(--n-500); }

/* the home ledger, with a result column instead of a method column */
.tests__result {
  flex: none; margin-left: auto;
  font-size: 13px; font-weight: var(--fw-medium);
  color: var(--n-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.coa__retest {
  margin: var(--s-7) 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   7. coa-lib — the certificate library. Product-first: one block per code,
   the vial and its code above a row of 3:4 certificate thumbnails, one per
   strength. The document is the picture; clicking it opens .coa-lb.
   Blocks are parted by space, never by a frame — the thumbnail is the only
   thing on this page with a fill. (Replaced the .coa-list row ledger on
   9/21: a flat table of "pending" cells is not how a certificate is shown.)
   ---------------------------------------------------------------------- */
.coa-lib { display: grid; gap: clamp(52px, 5.5vw, 76px); }
.coa-prod { min-width: 0; }
.coa-prod__head {
  display: flex; align-items: center; gap: var(--s-6);
  margin-bottom: var(--s-8);
}
.coa-prod__vial {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 148px; height: 148px;
  background: var(--surface); border-radius: var(--r-lg);
  overflow: hidden;
}
.coa-prod__vial img {
  display: block; width: auto; height: 128%; max-width: none;
  mix-blend-mode: multiply;
}
.coa-prod__id { min-width: 0; }
.coa-prod__code {
  margin: 0;
  font-size: 26px; font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.16;
  color: var(--brand-graphite);
}
.coa-prod__line {
  display: block; margin-top: 4px;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.4;
}

/* the certificates: ~180px wide, as many as fit, 3–4 to a product row */
.coa-prod__docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 224px));
  gap: var(--s-8) var(--s-7);
  margin: 0; padding: 0; list-style: none;
}
.coa-doc { min-width: 0; }
.coa-doc__btn {
  display: block; width: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.coa-doc__frame {
  display: block; aspect-ratio: 3 / 4;
  background: var(--surface); border-radius: var(--r-md);
  overflow: hidden;
}
.coa-doc__frame img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; padding: 10px;
  transition: transform 200ms var(--ease);
}
.coa-doc__btn:hover .coa-doc__frame img { transform: scale(1.03); }
.coa-doc__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-md); }
.coa-doc__mg {
  display: block; margin-top: 14px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text);
}
.coa-doc__btn:hover .coa-doc__mg { color: var(--brand); }
.coa-doc__meta {
  display: block; margin-top: 3px;
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.coa-lib__empty { padding-block: var(--s-11); font-size: var(--fs-sm); color: var(--muted); }
.coa-lib__ns ul { margin: 0; padding: 0; list-style: none; }
.coa-lib__ns li { padding-block: 10px; font-size: var(--fs-sm); color: var(--text-soft); border-top: 1px solid var(--line-soft); }

@media (prefers-reduced-motion: reduce) {
  .coa-doc__frame img { transition: none; }
  .coa-doc__btn:hover .coa-doc__frame img { transform: none; }
}

/* With room, the product takes a rail of its own on the left and the
   certificates run beside it: the vial gets to be big, and three documents
   fill the measure instead of trailing off into white. Narrower than this
   the head simply sits above its row. */
@media (min-width: 1080px) {
  .coa-prod {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    column-gap: clamp(40px, 4vw, 64px);
    align-items: start;
  }
  .coa-prod__head { display: block; margin-bottom: 0; }
  .coa-prod__vial { width: 208px; height: 208px; margin-bottom: var(--s-6); }
  .coa-prod__code { font-size: 28px; }
}

/* the wide container gives the rail and the documents another step up, and
   holds the row at three certificates rather than opening a fourth, empty
   track (no product carries more than three strengths) */
@media (min-width: 1280px) {
  .coa-prod { grid-template-columns: 224px minmax(0, 1fr); }
  .coa-prod__vial { width: 224px; height: 224px; }
  .coa-prod__docs { grid-template-columns: repeat(auto-fill, minmax(0, 256px)); }
}

/* -------------------------------------------------------------------------
   7b. coa-lb — the certificate, full size. Scrim, one white sheet, the
   document on --surface with its lot line and the PDF link beneath.
   Closes on the scrim, on x and on Esc (js/coa.js). No library.
   ---------------------------------------------------------------------- */
.coa-lb {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3vw, 40px);
}
.coa-lb[hidden] { display: none; }
.coa-lb__scrim { position: absolute; inset: 0; background: rgba(27, 38, 51, 0.68); }
.coa-lb__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-lg);
  overflow: auto;
}
.coa-lb__close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text); cursor: pointer;
}
.coa-lb__close:hover { background: var(--surface-2); }
.coa-lb__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.coa-lb__fig { margin: 0; }
.coa-lb__doc {
  display: block; aspect-ratio: 3 / 4;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
}
.coa-lb__doc img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; padding: clamp(12px, 3vw, 24px);
}
.coa-lb__cap { padding: var(--s-6) var(--s-7) var(--s-7); }
.coa-lb__title {
  margin: 0;
  font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -0.015em;
  color: var(--brand-graphite);
}
.coa-lb__meta { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.coa-lb__file {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  margin: var(--s-6) 0 0;
  font-size: 14px;
}
.coa-lb__state { font-size: 13px; color: var(--n-500); }

/* the pill row doubles as a filter on the COA library */
.pills--filter li { padding: 0; background: none; }
.pills--filter button {
  padding: 7px 15px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.3;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
}
.pills--filter button:hover { background: var(--n-200); }
.pills--filter button.is-selected { background: var(--brand); color: #fff; }
.pills--filter button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   8. related — the home tile, verbatim, three across
   ---------------------------------------------------------------------- */
.related { min-width: 0; }
.related__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-9);
}
.related .tiles > .tile { grid-column: span 4; }
/* the PDP runs four codes, so its tiles are the home page's quarter width */
.pdp-rel .tiles > .tile { grid-column: span 3; }

/* -------------------------------------------------------------------------
   9. faq — accordion. Type and one hairline, nothing else.
   ---------------------------------------------------------------------- */
.faq { border-top: 0; }
.faq .accordion__item { border-bottom: 1px solid var(--line-soft); }
.faq .accordion__item:last-child { border-bottom: 0; }
.faq .accordion__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-7);
  width: 100%;
  padding: 20px 0;
  font-size: 19px; font-weight: var(--fw-semibold);
  line-height: 1.35; letter-spacing: -0.012em;
  color: var(--brand-graphite);
  text-align: left;
  border: 0; background: none;
}
.faq .accordion__trigger:hover { color: var(--brand); }
.faq .accordion__trigger[aria-expanded="true"] { color: var(--brand-graphite); }
.faq .accordion__trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* the panel collapses with grid-template-rows: 0fr, so the closing space has
   to live on the paragraph — padding on the clipped div would stay visible */
.faq .accordion__panel > div { min-height: 0; padding-bottom: 0; }
.faq .accordion__panel p {
  margin: 0;
  max-width: 52ch;
  padding: 0 0 22px;
  font-size: 16px; line-height: 1.6;
  color: var(--text-soft);
}

/* the glyph: two 1.5px lines, the upright one rotates away on open */
.faq__glyph {
  position: relative; flex: none;
  width: 18px; height: 18px;
  margin-top: 5px;
}
.faq__glyph::before, .faq__glyph::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1.5px;
  background: var(--n-600);
  transform: translateY(-50%);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.faq__glyph::after { transform: translateY(-50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .faq__glyph::after { transform: translateY(-50%) rotate(0deg); }
.accordion__trigger[aria-expanded="true"] .faq__glyph::before,
.accordion__trigger[aria-expanded="true"] .faq__glyph::after { background: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .faq__glyph::before, .faq__glyph::after { transition: none; }
}

/* the sticky question-column layout */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-11); }
.faq-layout__aside { align-self: start; }
@media (min-width: 1024px) {
  .faq-layout__aside { position: sticky; top: 112px; }
}

/* -------------------------------------------------------------------------
   10. form — contact and checkout fields
   ---------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--s-6); max-width: 560px; }
.form--wide { max-width: none; }
.form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form__label { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text); }
.form__hint { font-size: 13px; color: var(--muted); }
.form__input, .form__select, .form__textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 16px;
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease);
}
.form__textarea { height: 140px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.form__input::placeholder, .form__textarea::placeholder { color: var(--n-400); }
.form__input:hover, .form__select:hover, .form__textarea:hover { border-color: var(--n-400); }
.form__input:focus-visible, .form__select:focus-visible, .form__textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus);
}
.form__select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.form__row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.form__field.is-error .form__input,
.form__field.is-error .form__select,
.form__field.is-error .form__textarea { border-color: var(--danger); }
.form__error { font-size: 13px; color: var(--danger); }
.form__actions { margin-top: var(--s-3); }
.form__sent {
  margin: 0;
  font-size: 16px; font-weight: var(--fw-semibold);
  color: var(--brand);
}

/* -------------------------------------------------------------------------
   11. cart — lines, steppers, summary. Space and one hairline.
   ---------------------------------------------------------------------- */
.cart { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-11); align-items: start; }
.cart__lines { margin: 0; padding: 0; list-style: none; }
.cart__line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-7);
  padding-block: var(--s-7);
  border-top: 1px solid var(--line-soft);
}
.cart__line:first-child { border-top: 0; padding-top: 0; }
.cart__media {
  width: 96px; height: 96px;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cart__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.cart__code { display: block; font-size: 18px; font-weight: var(--fw-bold); letter-spacing: -0.012em; color: var(--text); }
.cart__meta { display: block; margin-top: 4px; font-size: 15px; color: var(--text-soft); }
.cart__each { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cart__right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cart__total { font-size: 17px; font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.cart__remove {
  font-size: 13px; color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.cart__remove:hover { color: var(--danger); }

.cart__summary { align-self: start; }
@media (min-width: 1024px) { .cart__summary { position: sticky; top: 112px; } }
.cart__sum-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  padding-block: 12px;
  font-size: 15px;
  color: var(--text-soft);
}
.cart__sum-row span:last-child { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cart__sum-row--total {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 16px; color: var(--text);
}
.cart__sum-row--total span:last-child { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.cart__summary .btn { margin-top: var(--s-7); }
.cart__ruo { margin: var(--s-5) 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cart__empty-title { margin: 0; font-size: clamp(32px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; color: var(--brand-graphite); }

/* the − 1 + stepper, used in the cart */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.qty__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #fff; border: 0;
  color: var(--text-soft);
  cursor: pointer;
}
.qty__btn:hover { background: var(--surface); color: var(--text); }
.qty__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.qty__btn .icon { width: 16px; height: 16px; }
.qty__value {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: var(--fw-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   12. checkout — form left, summary right
   ---------------------------------------------------------------------- */
.checkout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 88px); align-items: start; }
.checkout__section + .checkout__section { margin-top: var(--s-11); }
.checkout__title {
  margin: 0 0 var(--s-7);
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--brand-graphite);
}
.checkout__note { margin: var(--s-5) 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.checkout__submit { margin-top: var(--s-10); }
.checkout__ruo { margin: var(--s-5) 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.checkout__summary { align-self: start; }
@media (min-width: 1024px) { .checkout__summary { position: sticky; top: 112px; } }
.checkout__lines { margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.checkout__line {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-soft);
}
.checkout__line:first-child { border-top: 0; padding-top: 0; }
.checkout__thumb { width: 64px; height: 64px; background: var(--surface); border-radius: var(--r-md); overflow: hidden; }
.checkout__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.checkout__line-code { display: block; font-size: 16px; font-weight: var(--fw-bold); color: var(--text); }
.checkout__line-meta { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); }
.checkout__line-total { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; }

/* checkout wears a logo-only header */
.site-header--bare .site-header__inner { justify-content: flex-start; }

/* -------------------------------------------------------------------------
   13. done — order confirmed
   ---------------------------------------------------------------------- */
.done { max-width: 720px; }
.done__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
  color: var(--brand-graphite);
  text-wrap: balance;
}
.done__lead { margin: var(--s-6) 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--text-soft); }
.done__lines { margin: var(--s-10) 0 0; padding: 0; list-style: none; }
.done__link { margin-top: var(--s-9); }

/* -------------------------------------------------------------------------
   14. prose — legal long-form
   ---------------------------------------------------------------------- */
.prose-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--s-11); align-items: start; }
.prose-toc { align-self: start; }
@media (min-width: 1080px) { .prose-toc { position: sticky; top: 112px; } }
.prose-toc__title {
  margin: 0 0 var(--s-5);
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.prose-toc a { display: block; padding-block: 5px; font-size: 13px; line-height: 1.45; color: var(--text-soft); text-decoration: none; }
.prose-toc a:hover { color: var(--brand); }
@media (max-width: 1079px) { .prose-toc { display: none; } }

.prose { max-width: var(--container-narrow); }
.prose h2 {
  margin: var(--s-10) 0 var(--s-5);
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
  color: var(--brand-graphite);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--s-8) 0 var(--s-4); font-size: 18px; font-weight: var(--fw-semibold); color: var(--text); }
.prose p { margin: 0 0 var(--s-5); font-size: 16px; line-height: 1.62; color: var(--text-soft); }
.prose ul, .prose ol { margin: 0 0 var(--s-5); padding-left: 20px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 8px; font-size: 16px; line-height: 1.62; color: var(--text-soft); }
.prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: var(--fw-semibold); }
.prose__meta { margin: 0 0 var(--s-9); font-size: 13px; color: var(--muted); }

/* -------------------------------------------------------------------------
   15. band-cta — the closing photo beat on an info page. Uses .bb.
   ---------------------------------------------------------------------- */
.band-cta { margin-top: clamp(72px, 8vw, 112px); }
.band-cta .bb__photo img { aspect-ratio: 16 / 9; height: 100%; object-fit: cover; }

.band-cta .bb__title { font-size: clamp(32px, 3vw, 44px); max-width: 16ch; }

/* -------------------------------------------------------------------------
   16. Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .spec__row { grid-template-columns: 160px minmax(0, 1fr); }
  .faq-layout { column-gap: var(--s-9); }
}

@media (max-width: 1023px) {
  .page-head--photo { grid-template-columns: 1fr; min-height: 0; }
  .page-head--photo .page-head__photo { order: 0; }
  .page-head--photo .page-head__photo img { position: static; aspect-ratio: 4 / 5; height: auto; }
  .page-head--photo .page-head__copy { order: 1; padding: var(--s-9) var(--gutter) 0; }
  .page-head--band .page-head__copy { grid-template-columns: 1fr; row-gap: var(--s-5); }
  .page-head--band .page-head__col--para { padding-top: 0; }
  .page-head--plain .page-head__copy { padding-top: var(--s-11); }

  .pdp-grid { grid-template-columns: 1fr; row-gap: var(--s-10); }
  .coa-grid { grid-template-columns: 1fr; row-gap: var(--s-9); }
  .faq-layout { grid-template-columns: 1fr; row-gap: var(--s-9); }
  .cart { grid-template-columns: 1fr; row-gap: var(--s-10); }
  .checkout { grid-template-columns: 1fr; row-gap: var(--s-10); }
  .prose-layout { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .related .tiles > .tile { grid-column: span 6; }
  .related .tiles > .tile:last-child { grid-column: span 12; }
}

@media (max-width: 720px) {
  .page-head__title { font-size: clamp(34px, 9.6vw, 46px); }
  .sec { padding-top: var(--s-11); }
  .spec__row { grid-template-columns: 1fr; gap: 4px; padding-block: 14px; }
  .coa-prod__vial { width: 92px; height: 92px; }
  .coa-prod__code { font-size: 21px; }
  /* two certificates to a row on a phone */
  .coa-prod__docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
  .cart__line { grid-template-columns: 72px minmax(0, 1fr); row-gap: var(--s-5); }
  .cart__media { width: 72px; height: 72px; }
  .cart__right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .form__row, .form__row--3 { grid-template-columns: 1fr; }
  .buy__code { font-size: clamp(34px, 9.6vw, 44px); }
  .opt__row:not(.opt__row--stack) .opt__item { flex: 1 1 80px; }
}

/* -------------------------------------------------------------------------
   17. Grids the PDP and the library pages hang on
   ---------------------------------------------------------------------- */
.pdp-grid { column-gap: clamp(40px, 5vw, 80px); row-gap: var(--s-10); align-items: start; }
.coa-grid { column-gap: clamp(32px, 4vw, 64px); row-gap: var(--s-9); align-items: start; }
.spec-grid { column-gap: clamp(32px, 4vw, 64px); row-gap: var(--s-8); align-items: start; }
@media (min-width: 880px) {
  .spec-grid__data { grid-column: 6 / span 7; }
}
/* the gallery keeps every view in the DOM and hides the ones not chosen */
.gallery__stage img[hidden] { display: none; }

/* -------------------------------------------------------------------------
   18. Stacking resets. These come last on purpose: the .col-N helpers in
   base.css span 12 columns from 880px up, so a grid that collapses to one
   column has to release its children too or the spans invent implicit
   columns and push the page sideways.
   ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .pdp-grid, .coa-grid, .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .pdp-grid > *, .coa-grid > *, .spec-grid > * { grid-column: 1 / -1; }
}

/* =========================================================================
   19. Shop + COA library — page-specific rules only.
   Appended by the shop / COA-library lane. Nothing above this line is
   restyled: these rules only place blocks those two pages introduce.
   ====================================================================== */

/* -------------------------------------------------------------------------
   SHOP FOLD BLOCK — products.html opens like a shop, not like a poster.
   The 21:9 band that used to stand above the H1 is gone from the top of the
   page: the head is .page-head--plain with 56px of air above and 40px below,
   and the 4 + 3 tile grid starts straight under it, so the H1 and the whole
   first row of tiles are on the first screen at 1440x900. Scoped to
   .shop-head / .shop-range; it replaces the old .range rules.
   ---------------------------------------------------------------------- */
.shop-head .page-head__copy { padding-block: 56px 0; }
.shop-head .page-head__title { max-width: 32ch; }
.shop-head .page-head__lead { max-width: 84ch; margin-top: var(--s-5); }
.shop-range { padding-top: 40px; }

@media (max-width: 1023px) {
  .shop-head .page-head__copy { padding-block: 48px 0; }
}
@media (max-width: 720px) {
  .shop-head .page-head__copy { padding-block: 36px 0; }
  .shop-range { padding-top: 28px; }
}

/* the filter row: code pills left, lot search right, one line at ≥900 */
.coa-filter {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: var(--s-6) var(--s-7);
}
.coa-filter .pills--filter { flex: 1 1 420px; margin: 0; }
.coa-filter__search { flex: 0 1 320px; min-width: 240px; }
.coa-filter__search .form__input { width: 100%; }
.coa-filter__count {
  margin: var(--s-8) 0 var(--s-5);
  font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* the photograph beside "What every certificate shows" — squared off so the
   column stands level with the ledger. No radius, no border, no shadow. */
.coa-lib__photo { min-width: 0; }
.coa-lib__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 4; object-fit: cover; object-position: center;
  border: 0; border-radius: 0; box-shadow: none;
}

@media (max-width: 1023px) {
  .coa-lib__photo img { aspect-ratio: 16 / 9; object-position: center; }
}

@media (max-width: 720px) {
  /* the row becomes a column here, so flex-basis stops meaning width and
     starts meaning height: 420px of it stretched the two wrapped pill lines
     ~200px apart. Both children size to their content instead. */
  .coa-filter { flex-direction: column; align-items: stretch; }
  .coa-filter .pills--filter { flex: 0 0 auto; align-content: flex-start; }
  .coa-filter__search { flex: 0 0 auto; min-width: 0; }
}

/* =========================================================================
   19. COMMERCE LANE — cart.html · checkout.html · order-confirmed.html
   Appended block. Page-specific only: nothing above this line is restyled.
   ========================================================================= */

/* the lines column of .cart is a plain wrapper; give it a floor so long
   codes cannot widen the grid track */
.cart__items { min-width: 0; }
.cart__body { display: block; min-width: 0; }

/* "Shipping — calculated at checkout": the right-hand cell is a note, not a
   figure, so it drops the semibold treatment the other sum rows carry */
.cart__sum-row--note span:last-child {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--muted);
}

/* the empty cart: the H1 is the page head's, this is only the way out */
.cart-empty { padding-bottom: var(--s-6); }
.cart-empty__link { margin: 0; font-size: 17px; }

/* the checkout's shipping-method rows sit directly under their own H2, so
   they do not want the .opt top margin the buy box gives them */
.opt--flush { margin-top: 0; }
.opt--flush .opt__item { font-weight: var(--fw-medium); }
.opt--flush .opt__item > span:first-child { font-weight: var(--fw-semibold); }

/* "(optional)" inside a field label */
.form__opt { font-weight: var(--fw-regular); color: var(--muted); }

/* the free-shipping line, directly beneath the shipping row */
.checkout__free {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* the page head carries the whole confirmation, so the lines need their own
   air; the totals run to the same right edge as the line figures */
.done__order { margin-top: var(--s-10); }

/* bare header + bare footer on the checkout flow: one hairline, not two */
.site-header--bare .site-header__inner { justify-content: flex-start; }
.site-footer--bare { margin-top: clamp(64px, 7vw, 104px); }
.site-footer--bare .ruo-strip { border-top: 0; }

/* order-confirmed is shorter than one viewport, so the bare footer used to
   stop mid-screen and leave ~330px of white under it. On the two checkout-flow
   pages the body becomes a column and the footer takes the floor; on a page
   taller than the viewport nothing moves. */
body:has(> .site-footer--bare) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(> .site-footer--bare) > main { flex: 1 0 auto; }

/* the summary's first figure sits flush with the last line item */
.checkout__summary .cart__sum-row:first-of-type { padding-top: 0; }

/* =========================================================================
   19. Page-specific rules — about · faq · contact · shipping
   Appended by the info-pages lane. Nothing above this line is restyled;
   every rule here is scoped to a class that only these four pages carry.
   ========================================================================= */

/* about — the opening photograph is a 4:5 portrait in a landscape window, so
   the crop is centred: the glove and the vial sit in the middle band */
.about-head .page-head__photo img { object-position: center 42%; }

/* about — the row of vials is already a 16:9 frame, so the row height comes
   from the photograph instead of from the words beside it */
.about-seven .bb__photo img { aspect-ratio: 16 / 9; object-position: center; }

/* about — the one words-only beat on the page. The heading holds the left four
   columns, the prose starts at column six and keeps the 52ch measure of
   .sec__para. Nothing is drawn around it: no tint, no border, no rule — the
   white page and the empty left column are the whole separation, so it reads
   as a passage of text and not as a panel. It adds no bottom padding: the
   billboard beneath it brings the section rhythm with its own top margin. */
.about-why__grid { column-gap: clamp(32px, 4vw, 64px); row-gap: var(--s-6); align-items: start; }
.about-why__body { grid-column: 6 / span 7; }
.about-why__body .sec__para:first-child { margin-top: 0; }
.about-why__body .sec__para + .sec__para { margin-top: var(--s-6); }

/* shipping — the open shipper is shot from above at 4:5; the landscape window
   is held low so the box and the vial inside it stay whole */
.ship-head .page-head__photo img { object-position: 50% 58%; }

/* contact — the details list runs in a narrow column, so its term column is
   narrower than the specification list's */
.contact-grid { column-gap: clamp(32px, 4vw, 72px); row-gap: var(--s-10); align-items: start; }
.contact-aside .spec__row { grid-template-columns: 132px minmax(0, 1fr); }
.contact-aside .spec dd a { overflow-wrap: anywhere; }
.contact-form[hidden] { display: none; }
[data-contact-sent] { padding-block: var(--s-4); }

/* faq — the question column carries its own closing air above the billboard */
.faq-page .faq-layout { margin-top: var(--s-10); }

@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid > * { grid-column: 1 / -1; }
  .about-seven .bb__photo img { aspect-ratio: auto; }
  .about-why__grid { grid-template-columns: minmax(0, 1fr); }
  .about-why__grid > * { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .contact-aside .spec__row { grid-template-columns: 1fr; }
  .faq-page .faq-layout { margin-top: var(--s-8); }
}

/* products — the sample-box scene beside "Tested in the USA." is a landscape
   frame, so this billboard runs the plain 16:9 window instead of the 4:5 crop
   .bb--tests gives the home page: at 4:5 the crop cut either the vial or the
   box. The picture is centred in the row the six-test list makes tall, and the
   list keeps the air .bb--tests gave it. */
.shop-tests .bb__photo { align-self: center; }
.shop-tests .bb__photo img {
  aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; object-position: center;
}
.shop-tests .bb__link { margin-top: var(--s-7); }
.shop-tests .bb__foot { margin-top: var(--s-7); }

/* the slab scene is a 4:5 photograph in a landscape window at ≥1024: hold the
   crop on the middle band so the certificate and the vial on it stay whole */
.coa-head .page-head__photo img { object-position: center 20%; }
@media (max-width: 1023px) {
  .coa-head .page-head__photo img { object-position: center; }
}

/* stacked, the summary needs a hairline to part it from the last line item;
   side by side it keeps the clear space the desktop layout gives it */
@media (max-width: 1023px) {
  .cart-summary--split {
    padding-top: var(--s-8);
    border-top: 1px solid var(--line-soft);
  }
}

/* faq — the sticky column closes on its own link instead of trailing off */
.faq-aside__link { margin: var(--s-8) 0 0; }

/* stacked, the order summary belongs ABOVE the form: nobody should reach a
   pay button before they have seen what they are paying for */
@media (max-width: 1023px) {
  .checkout-summary--first {
    order: -1;
    padding-bottom: var(--s-8);
    border-bottom: 1px solid var(--line-soft);
  }
}