/* Product detail page - shared styles */
/* 🔴 minmax(0,1fr), never a bare 1fr. `1fr` is `minmax(auto,1fr)`, and that `auto`
   floor refuses to shrink below the track's min-content - so ONE unshrinkable
   descendant widens the whole grid past its container. That is what broke the GLP-3 RT
   PDP on mobile: `.ci-sub` in the cross-sell is `white-space:nowrap`, and the longest
   subtitle ("20mg · Single-Agonist GLP-1 Research Compound") forced a 430px track
   inside a 343px container, pushing the document to 446px against a 375px viewport.
   The page then scrolled sideways and every section looked like it had lost its
   padding. NAD+ only escaped because its cross-sell subtitles are shorter. */
.pdp-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:start; padding-block:clamp(32px,4vw,56px); }
.pdp-gallery { position:sticky; top:calc(var(--nav-h) + 24px); }
.pdp-stage { aspect-ratio:1; border-radius:var(--r-xl); overflow:hidden; background:radial-gradient(130% 100% at 50% 15%,var(--n-0),var(--n-100)); border:1px solid var(--line); display:grid; place-items:center; padding:0; }
.cross-item .vial-img { border-radius:5px; }
.pdp-stage .vial-svg { max-height:340px; width:auto; filter:drop-shadow(0 24px 34px rgba(16,24,40,.18)); }
.pdp-thumbs { display:flex; gap:12px; margin-top:16px; }
.pdp-thumb { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; background:none; border:none; cursor:pointer; }
.pt-vis { width:62px; height:62px; border-radius:var(--r-md); background:var(--n-50); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.pdp-thumb:hover .pt-vis { border-color:var(--ink-3); }
.pdp-thumb.active .pt-vis { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pt-vis .vial-img { width:100%; height:100%; object-fit:cover; }
.pt-zoom .vial-img { transform:scale(1.9); transform-origin:50% 60%; }
.pt-ic { color:var(--ink-3); }
.pdp-thumb.active .pt-ic { color:var(--accent-ink); }
.pt-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; }
.pt-cap { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.pdp-thumb.active .pt-cap { color:var(--accent-ink); }

/* stage views */
.pdp-stage[data-view="label"] .vial-img { transform:scale(1.85); transform-origin:50% 60%; }
.pdp-stage[data-view="coa"], .pdp-stage[data-view="data"] { place-items:stretch; }
.pdp-panel { display:flex; flex-direction:column; padding:clamp(24px,5%,38px); gap:8px; text-align:left; height:100%; }
.pv-ic { color:var(--accent); }
.pv-ic svg { width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.5; }
.pv-h { font-size:20px; font-weight:650; margin-top:4px; letter-spacing:-.01em; }
.pv-sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.02em; }
.pv-list { margin-top:12px; display:flex; flex-direction:column; }
.pv-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); font-size:14px; }
.pv-row:last-child { border-bottom:1px solid var(--line); }
.pv-row span { color:var(--ink-2); }
.pv-row b { color:var(--ink); font-weight:600; text-align:right; }
.pv-seq { margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); word-break:break-word; line-height:1.6; }
.pdp-panel .btn { margin-top:auto; align-self:flex-start; }
.pdp-title { font-size:var(--step-5); letter-spacing:-.035em; line-height:1.02; }
.pdp-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pill-ico { width:13px; height:13px; flex:none; display:block; }
/* three pills (USA made / ISO 17025 / View COA) hold ONE line on phones -
   owner 2026-08-27. Compact tier only where the full size would wrap. */
@media (max-width:430px){
  .pdp-chips { gap:6px; }
  .pdp-chips .pill { font-size:10px; padding:3px 8px; gap:5px; }
  .pdp-chips .pill-flag { width:16px; height:11px; }
  .pdp-chips .pill-ico { width:12px; height:12px; }
}
.pdp-price-row { display:flex; align-items:baseline; gap:10px; margin-top:24px; flex-wrap:wrap; }
/* the struck list price leads the row; #pdpPrice is the per-vial rate the
   shelf advertises everywhere else on the site (app.js dealHtml) */
.pdp-was { font-family:var(--font-mono); font-size:var(--step-0); color:var(--ink-faint); text-decoration:line-through; }
.pdp-price { font-size:var(--step-4); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pdp-bogo { font-family:var(--font-mono); font-size:17px; color:var(--ok); } /* 13px +30% (owner 2026-08-27) */
.variant-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(102px,1fr)); gap:8px; margin-top:8px; }
.variant { position:relative; padding:8px 11px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast); display:flex; flex-direction:column; gap:1px; text-align:left; }
.variant .v-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.variant .v-size { font-weight:700; font-size:var(--step-0); letter-spacing:-.01em; }
.variant .v-price { font-weight:700; font-size:var(--step-0); font-variant-numeric:tabular-nums; }
.variant .v-bot { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:14px; }
.variant .v-per { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }
.variant .v-save { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--ok); background:var(--ok-tint); padding:0 5px; border-radius:var(--r-pill); }
.variant .v-best { position:absolute; top:-8px; right:8px; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--accent); padding:1px 6px; border-radius:var(--r-pill); }
.variant[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 1px var(--accent); }
.variant:focus-visible { outline:none; box-shadow:0 0 0 2px var(--accent); }

/* --- independently-tested panel --- */
.test-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-top:32px; }
.test-card { display:flex; align-items:flex-start; gap:14px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.test-card .test-icon { width:34px; height:34px; border-radius:var(--r-md); background:var(--ok-tint); color:#0f8049; display:grid; place-items:center; flex:none; }
.test-card .test-icon svg { width:18px; height:18px; }
.test-body { flex:1; min-width:0; }
.test-name { font-weight:600; font-size:var(--step-0); }
.test-desc { font-size:var(--step--1); color:var(--ink-2); margin-top:3px; }
.test-result { font-family:var(--font-mono); font-size:12px; font-weight:600; color:#0f8049; background:var(--ok-tint); padding:3px 9px; border-radius:var(--r-pill); flex:none; white-space:nowrap; }
.bogo-note { display:flex; gap:9px; align-items:center; padding:9px 12px; background:var(--accent-tint); border-radius:var(--r-md); margin-top:14px; font-size:var(--step--1); color:var(--ink-2); line-height:1.3; }
.bogo-note svg { width:17px; height:17px; color:var(--accent); flex:none; }
.bogo-note strong { color:var(--ink); }
/* two-line note (owner 2026-08-29): bold offer + the action that activates it.
   Replaces "every 2nd vial free at checkout, mix & match the catalog", which
   also carried an em dash - not allowed in customer-facing copy. */
.bogo-note > span { display:block; }
.bogo-note .bogo-sub { display:block; margin-top:2px; color:var(--ink-2); }
.pdp-buy-actions { display:flex; gap:12px; margin-top:16px; align-items:stretch; }
/* Stacked buy box on phones, ported from Eon (2026-08-29). Side by side, the
   stepper and the CTA compete for one 343px row: that is what crushed the
   stepper to 21px originally, and what made widening it clip the plus. Stacked,
   the stepper keeps its intrinsic 130px and Add to Cart goes FULL WIDTH
   (201px -> 343px at 375, 288px at 320). Desktop is untouched - still one row. */
.qty-label { display: none; }
@media (max-width: 640px) {
  .pdp-buy-actions { flex-direction: column; align-items: stretch; }
  .pdp-buy-actions .qty { align-self: flex-start; }
  .pdp-buy-actions .btn { width: 100%; }
  .qty-label { display: block; }
}
.trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.trust-item { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.trust-item svg { width:22px; height:22px; color:var(--ink-2); }
.trust-item span { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.pass-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
/* the dispatch + free-shipping notes sit under the CTA; centerd on phones where
   the buy box is a single stacked column, left-aligned on desktop where the rest
   of the buy box is left-aligned and a centerd line would read as a mistake. */
.pdp-ship-note { text-align: center; }   /* centerd at every width - the trust row and pass pills below are centerd too */
/* icon() returns an UNSIZED svg. Nothing in .mono-label constrains it, so it
   rendered 343x343 and made the note 361px tall - caught on preview. Every
   context that uses icon() has to size it itself. */
.pdp-ship-note svg { width:13px; height:13px; display:inline-block; vertical-align:-2px; margin-right:5px; stroke-width:2; }
/* Assurance card under the buy box (owner 2026-08-29, modelled on Eon). Only
   claims Aspect already makes: shipment protection is stated in about.html and
   faq.html, and all four card brands are already advertised in the cart drawer.
   The RFID row from the reference is deliberately ABSENT - RFID appears nowhere
   on this site, so it would be a brand-new product claim. */
.pdp-assure { margin-top:12px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.pa-row { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; }
.pa-row--hi { background:var(--accent-tint); }
.pa-row + .pa-row { border-top:1px solid var(--line-2); }   /* divider between assurance rows */
.pa-row svg { width:18px; height:18px; color:var(--accent); flex:none; margin-top:1px; }
.pa-row b { display:block; font-size:14px; color:var(--ink); line-height:1.3; }
.pa-row span { display:block; font-size:13px; color:var(--ink-2); line-height:1.45; margin-top:2px; }
.pa-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 16px; border-top:1px solid var(--line-2); }
.pa-lead { font-size:12.5px; color:var(--ink-3); }
.pa-secure { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.pa-secure svg { width:12px; height:12px; flex:none; }
.pa-cards { display:inline-flex; gap:6px; margin-left:auto; }
@media (max-width:520px){ .pa-cards { margin-left:0; } .pa-foot { gap:8px; } }
.pass { display:flex; gap:10px; align-items:center; padding:12px 14px; background:var(--ok-tint); border-radius:var(--r-md); }
.pass svg { width:18px; height:18px; color:#0f8049; flex:none; }
.pass > div { line-height:1.25; }
.pass .lbl { font-family:var(--font-mono); font-size:11px; color:#0f8049; font-weight:500; line-height:1.2; }
.pass strong { display:block; font-size:11px; color:#0a5c35; font-weight:700; letter-spacing:.04em; line-height:1.2; margin-bottom:1px; }
.cross { margin-top:28px; }
.cross-item {
  display:flex; align-items:center; gap:14px; padding:12px 14px; margin-top:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1); text-decoration:none; color:inherit;
  transition:border-color var(--dur-fast) var(--ease-std),
             box-shadow var(--dur-fast) var(--ease-std),
             transform var(--dur-fast) var(--ease-std);
}
@media (hover:hover){
  .cross-item:hover { border-color:var(--line-strong); box-shadow:var(--sh-2); transform:translateY(-1px); }
}
.ci-media {
  flex:none; width:52px; height:62px; display:grid; place-items:center;
  background:var(--n-50); border:1px solid var(--line-2); border-radius:var(--r-sm);
  overflow:hidden;
}
.ci-media .vial-svg { height:46px; width:auto; }
.ci-media .vial-img { height:54px; width:auto; border-radius:3px; }
.ci-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cross-item .ci-name { font-weight:650; font-size:var(--step--1); color:var(--ink); line-height:1.3; }
.cross-item .ci-sub {
  font-size:12px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ci-right { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.cross-item .ci-price { font-weight:700; font-variant-numeric:tabular-nums; font-size:var(--step-0); color:var(--ink); }
.ci-add {
  font-family:var(--font-sans); font-weight:600; font-size:12.5px; letter-spacing:0.01em;
  color:var(--accent-ink); background:var(--accent-tint);
  border:1px solid var(--accent-tint-2); border-radius:var(--r-pill);
  padding:6px 14px; cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-std),
             color var(--dur-fast) var(--ease-std),
             border-color var(--dur-fast) var(--ease-std),
             transform var(--dur-fast) var(--ease-std);
}
@media (hover:hover){ .ci-add:hover { background:var(--accent); border-color:var(--accent); color:#fff; } }
.ci-add:active { transform:translateY(1px); }
.ci-add:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:380px){ .cross-item { gap:10px; padding:11px 12px; } .ci-media { width:44px; height:54px; } }
.spec-table { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.spec-cell { padding:16px 20px; border-bottom:1px solid var(--line-2); }
.spec-cell:nth-child(odd) { border-right:1px solid var(--line-2); }
.spec-cell .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.spec-cell .v { font-family:var(--font-mono); font-size:var(--step-0); margin-top:6px; }
.verifycard-list { display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.vc-item { display:flex; gap:14px; }
.vc-item svg { width:20px; height:20px; color:var(--accent); flex:none; margin-top:2px; }
.vc-item .t { font-weight:600; font-size:var(--step-0); }
.vc-item .d { font-size:var(--step--1); color:var(--ink-2); margin-top:2px; }
.pathway-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.pathway { padding:20px; }
.pathway .ptag { margin-bottom:12px; }
.pathway h4 { font-size:var(--step-0); margin-bottom:6px; }
.pathway p { font-size:var(--step--1); color:var(--ink-2); }
.about-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:clamp(32px,5vw,64px); align-items:start; }
.about-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:26px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--line); }
.about-facts .af-item { background:var(--n-0); padding:13px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.about-facts .af-k { font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.about-facts .af-v { font-size:var(--step--1); font-weight:600; color:var(--ink); line-height:1.25; overflow-wrap:anywhere; }
.about-facts .af-item:last-child:nth-child(odd) { grid-column:1 / -1; }
@media (max-width:420px){ .about-facts { grid-template-columns:1fr; } }
.sticky-buy { position:fixed; bottom:0; left:0; right:0; z-index:80; background:var(--surface); border-top:1px solid var(--line); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); display:none; align-items:center; gap:10px; box-shadow:0 -4px 16px rgba(16,24,40,.08); }
.sticky-buy .sb-info { min-width:0; flex:1 1 auto; line-height:1.25; }
.sticky-buy .sb-name { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-buy .sb-price { font-family:var(--font-mono); color:var(--ink-2); font-size:12px; white-space:nowrap; }
.sticky-buy .sb-ctl { display:flex; align-items:center; gap:8px; flex:none; }
/* custom size dropdown - per-size vial photos, opens upward */
.sticky-buy .sb-dd { position:relative; flex:none; }
.sb-dd-trigger { display:flex; align-items:center; gap:7px; height:42px; padding:0 9px 0 7px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
.sb-dd-trigger:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-tint); border-color:var(--accent); }
.sb-dd[data-open] .sb-dd-trigger { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.sb-dd-thumb { width:22px; height:30px; flex:none; display:grid; place-items:center; }
.sb-dd-thumb .vial-img, .sb-dd-thumb .vial-svg { height:100%; width:auto; max-width:100%; object-fit:contain; }
.sb-dd-size { font-weight:700; font-size:13px; white-space:nowrap; letter-spacing:-.01em; }
.sb-dd-chev { width:15px; height:15px; color:var(--ink-3); flex:none; transition:transform var(--dur); }
.sb-dd[data-open] .sb-dd-chev { transform:rotate(180deg); }
.sb-dd-panel { display:none; position:absolute; bottom:calc(100% + 10px); left:0; min-width:200px; max-height:min(54vh, calc(100vh - 170px)); overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-4); padding:6px; z-index:90; }
.sb-dd[data-open] .sb-dd-panel { display:block; animation:sbDDpop .16s var(--ease-std); }
@keyframes sbDDpop { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.sb-dd-opt { display:flex; align-items:center; gap:11px; width:100%; padding:8px 11px; border:none; background:none; border-radius:var(--r-md); cursor:pointer; text-align:left; transition:background var(--dur-fast); }
@media (hover:hover){ .sb-dd-opt:hover { background:var(--n-100); } }
.sb-dd-opt[aria-selected="true"] { background:var(--accent-tint); }
.sb-dd-opt .sb-dd-thumb { width:36px; height:46px; }
.sb-dd-opt-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.sb-dd-opt-size { font-weight:700; font-size:14px; letter-spacing:-.01em; }
.sb-dd-opt-price { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
.sticky-buy .sb-qty { display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; flex:none; }
.sticky-buy .sb-qty button { width:30px; height:42px; background:var(--surface); border:none; cursor:pointer; color:var(--ink-2); font-size:16px; display:grid; place-items:center; }
@media (hover:hover){ .sticky-buy .sb-qty button:hover { background:var(--n-100); color:var(--ink); } }
.sticky-buy .sb-qty input { width:30px; height:42px; text-align:center; border:none; border-inline:1px solid var(--line-2); background:var(--surface); font-variant-numeric:tabular-nums; font-weight:600; outline:none; font-size:14px; }
/* Sticky-buy stepper to a real 44px target (2026-08-29). Measured before
   shipping, with the size dropdown present (the tight case): at 375 the Add
   button absorbs it 138->110px, at 320 dd73/qty119/Add91, no overflow at either.
   Its label is just "Add", so 91px is ample. */
@media (pointer: coarse) {
  .sticky-buy .sb-qty button { min-width: 44px; height: 44px; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  .sticky-buy .sb-qty button:active { background: var(--n-200); }
  .sticky-buy .sb-qty input { height: 44px; font-size: 16px; }
}
.sticky-buy #pdpAddSticky { white-space:nowrap; flex:none; padding-inline:16px; }
@media (max-width:400px){ .sticky-buy .sb-info { display:none; } .sticky-buy .sb-ctl { flex:1 1 auto; justify-content:space-between; } .sticky-buy #pdpAddSticky { flex:1 1 auto; } }
@media (max-width:900px){
  .pdp-top{ grid-template-columns:minmax(0,1fr); }   /* see the note on .pdp-top above */
  .pdp-gallery{ position:static; }
  .pdp-stage .vial-svg{ max-height:260px; }
  .pathway-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .sticky-buy.is-visible{ display:flex; }
  main{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}
/* 320px-class devices: the bar's fixed-width controls (dropdown + qty + Add)
   overflow and clip the Add button - compact everything one step */
@media (max-width:360px){
  .sticky-buy{ gap:7px; padding-left:10px; padding-right:10px; }
  .sb-dd-trigger{ padding:0 6px 0 5px; gap:5px; }
  .sb-dd-chev{ display:none; }
  .sticky-buy .sb-qty button{ width:26px; }
  .sticky-buy #pdpAddSticky{ padding-inline:12px; }
}
@media (max-width:520px){ .spec-table{ grid-template-columns:1fr; } .spec-cell:nth-child(odd){ border-right:none; } .trust-row{ grid-template-columns:repeat(3,1fr); gap:6px; } .trust-item{ gap:6px; } .trust-item span{ font-size:9px; letter-spacing:.03em; } /* pass pills stay SIDE BY SIDE on phones (owner 2026-08-29) - measured 166px each at 375 and 138px at 320, no overflow, equal height */ }

/* --- traceability strip --- */
.auth-strip { display:flex; align-items:center; gap:18px; padding:20px 24px; }
.auth-strip .auth-icon { width:44px; height:44px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; flex:none; }
.auth-strip .auth-icon svg { width:22px; height:22px; }
.auth-strip .auth-text { font-size:var(--step--1); color:var(--ink-2); }
.auth-strip .auth-text strong { color:var(--ink); }
.auth-strip .btn { flex:none; }
@media (max-width:640px){ .auth-strip{ flex-direction:column; align-items:flex-start; gap:14px; } .auth-strip .btn{ width:100%; } }

/* --- stats row --- */
.pdp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pdp-stat { border-left:2px solid var(--accent); padding-left:16px; }
.pdp-stat .num { font-family:var(--font-mono); font-size:var(--step-3); font-weight:500; letter-spacing:-.02em; line-height:1; }
.pdp-stat .lbl { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; }
@media (max-width:640px){ .pdp-stats{ grid-template-columns:1fr 1fr; gap:20px; } }

/* --- how it works: diagram + cards --- */
.howworks-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,56px); align-items:center; margin-top:32px; }
.howworks-cards { display:flex; flex-direction:column; gap:12px; }
.howworks-diagram { display:grid; place-items:center; }
.researched-for { margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.rf-chips { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.rf-chip { display:inline-flex; align-items:center; padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface); font-size:var(--step--1); font-weight:500; transition:border-color var(--dur-fast),background var(--dur-fast); }
@media (hover:hover){ .rf-chip:hover{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink); } }
.rf-note { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
@media (max-width:900px){ .howworks-grid{ grid-template-columns:1fr; } }

/* --- animated signaling diagram (v2) --- */
.pathway-diagram { position:relative; width:100%; max-width:460px; aspect-ratio:1; margin-inline:auto; }
.pw-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pw-orbit { fill:none; stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 10; transform-box:fill-box; transform-origin:center; animation:pw-spin 55s linear infinite; opacity:.65; }
.pw-halo { fill:none; stroke:var(--accent); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:pw-halo 3.2s ease-out infinite; }
.pw-curve { fill:none; stroke:var(--accent); stroke-opacity:.20; stroke-width:1.5; transition:stroke-opacity var(--dur); }
.pw-curve.hot { stroke-opacity:.6; }
.pw-dot { fill:var(--accent); filter:drop-shadow(0 0 5px var(--accent-glow)); }
.pw-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border-radius:50%; background:var(--surface); border:1.5px solid var(--accent); display:grid; place-items:center; text-align:center; box-shadow:0 6px 20px var(--accent-glow); z-index:2; }
.pw-center span { font-weight:700; font-size:clamp(11px,2.4vw,15px); letter-spacing:-.02em; line-height:1.05; padding:6px; }
.pw-node { position:absolute; transform:translate(-50%,-50%); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:6px 12px; box-shadow:var(--sh-1); z-index:3; cursor:default; transition:border-color var(--dur),background var(--dur),box-shadow var(--dur),transform var(--dur); }
.pw-node span { font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; white-space:nowrap; color:var(--ink-2); transition:color var(--dur); }
.pw-node.active { border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 3px var(--accent-glow); transform:translate(-50%,-50%) scale(1.06); }
.pw-node.active span { color:var(--accent-ink); }
.pw-caption { position:absolute; left:0; right:0; bottom:-8px; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
@keyframes pw-spin { to { transform:rotate(360deg); } }
@keyframes pw-halo { 0%{ transform:scale(.82); opacity:.5 } 100%{ transform:scale(1.5); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .pw-orbit{ animation:none; } .pw-curve{ stroke-opacity:.4; } }
@media (max-width:400px){ .pw-node span{ font-size:10px; } .pw-node{ padding:5px 9px; } }

/* --- mechanism cards (with citations) --- */
.mech-card { padding:20px; transition:border-color var(--dur),box-shadow var(--dur); }
.mech-card.linked { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.mech-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.mech-cite { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.mech-card h4 { font-size:var(--step-0); margin-bottom:6px; }
.mech-card p { font-size:var(--step--1); color:var(--ink-2); }

/* --- molecular panel --- */
.mol-panel { margin-top:28px; overflow:hidden; }
.mol-formula { padding:22px 24px; background:linear-gradient(135deg,var(--accent-tint),var(--surface)); border-bottom:1px solid var(--line-2); }
.mol-formula .mf { font-family:var(--font-mono); font-size:var(--step-3); font-weight:500; letter-spacing:.01em; margin-top:8px; color:var(--ink); }
.mol-formula .mf sub { font-size:.62em; }
.mol-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.mol-cell { padding:16px 20px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.mol-cell:nth-child(3n){ border-right:none; }
.mol-cell:nth-last-child(-n+3){ border-bottom:none; }
.mol-cell .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.mol-cell .v { font-family:var(--font-mono); font-size:var(--step--1); margin-top:5px; word-break:break-word; }
@media (max-width:560px){ .mol-grid{ grid-template-columns:1fr 1fr; } .mol-cell:nth-child(3n){ border-right:1px solid var(--line-2); } .mol-cell:nth-child(2n){ border-right:none; } .mol-cell:nth-last-child(-n+3){ border-bottom:1px solid var(--line-2); } .mol-cell:nth-last-child(-n+2){ border-bottom:none; } }

/* --- study-reported magnitudes --- */
.magnitudes { margin-top:28px; display:grid; gap:20px; max-width:680px; }
.mag-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.mag-metric { font-size:var(--step--1); color:var(--ink-2); }
.mag-val { font-family:var(--font-mono); font-weight:600; color:var(--accent); }
.mag-track { height:9px; background:var(--n-150); border-radius:var(--r-pill); overflow:hidden; }
.mag-fill { height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); border-radius:var(--r-pill); transition:width 1.1s cubic-bezier(0.2,0,0,1); }
@media (prefers-reduced-motion: reduce){ .mag-fill{ transition:none; } }

/* --- what X is researched for (application cards) --- */
.apps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:32px; }
.app-card { padding:22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur); }
@media (hover:hover){ .app-card:hover{ border-color:var(--line-strong); box-shadow:var(--sh-2); transform:translateY(-2px); } }
.app-card h3 { font-size:var(--step-1); margin:12px 0 8px; letter-spacing:-.01em; }
.app-card p { font-size:var(--step--1); color:var(--ink-2); }
.app-card .app-cite { display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.mag-head { display:flex; align-items:baseline; gap:12px; margin-top:44px; flex-wrap:wrap; }
.mag-head .mag-sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }

/* --- the molecule (animated 3D atom cluster) --- */
.molecule-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,5vw,56px); align-items:center; margin-top:32px; }
.molecule-visual { display:flex; flex-direction:column; align-items:center; gap:18px; }
.molecule-scene { width:100%; max-width:300px; aspect-ratio:1; perspective:640px; display:grid; place-items:center; }
.molecule-spin { position:relative; width:1px; height:1px; transform-style:preserve-3d; animation:mol-rot 20s linear infinite; }
.atom { position:absolute; left:0; top:0; border-radius:50%; transform:translate3d(var(--x),var(--y),var(--z)); box-shadow:0 2px 7px rgba(0,0,0,.28); margin-left:calc(var(--_s,0px)); }
@keyframes mol-rot { from{ transform:rotateY(0deg) rotateX(14deg); } to{ transform:rotateY(360deg) rotateX(14deg); } }
.molecule-legend { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.molecule-legend span { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.molecule-legend i { width:9px; height:9px; border-radius:50%; display:inline-block; }
@media (prefers-reduced-motion: reduce){ .molecule-spin{ animation:none; transform:rotateY(28deg) rotateX(14deg); } }
@media (max-width:800px){ .molecule-grid{ grid-template-columns:1fr; } }

/* --- full specification --- */
.fullspec { margin-top:28px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.fs-row { display:grid; grid-template-columns:220px 1fr; gap:16px; padding:15px 22px; border-bottom:1px solid var(--line-2); }
.fs-row:last-child { border-bottom:none; }
.fs-row:nth-child(even){ background:var(--surface-2); }
.fs-row dt { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); align-self:center; }
.fs-row dd { font-family:var(--font-mono); font-size:var(--step--1); color:var(--ink); word-break:break-word; }
.fs-row dd sub { font-size:.7em; }
@media (max-width:560px){ .fs-row{ grid-template-columns:1fr; gap:4px; } }

/* --- peer-reviewed literature --- */
.lit-cites { margin-top:24px; }
.lit-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.lit-chip { display:inline-flex; align-items:center; padding:6px 12px; border-radius:var(--r-sm); background:var(--surface-sunk); border:1px solid var(--line-2); font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }


/* ============================================================
   ASPECT ELEVATED - flagship module design system
   Numbered spec-sheet kickers · hairline instrument cards ·
   soft layered depth · azure-forward data-viz · mono data.
   ============================================================ */
.el-sec { padding-block: clamp(56px,7vw,100px); }
.el-surface { background: var(--surface); border-block: 1px solid var(--line-2); }

/* section header */
.el-head { max-width: 62ch; }
.el-head.center { max-width: none; text-align: center; }
.el-head.center .el-sub { margin-inline: auto; }
.el-kick { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.el-kick-i { display:inline-grid; place-items:center; min-width:24px; height:20px; padding:0 6px; border:1px solid var(--accent); color:var(--accent); border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.02em; }
.el-h { font-size: clamp(28px,3.6vw,46px); font-weight:800; letter-spacing:-.035em; line-height:1.04; color:var(--ink); margin-top:16px; }
.el-h .accent, .el-display .accent { color: var(--accent); }
.el-sub { margin-top:16px; font-size: clamp(15px,1.2vw,17px); color:var(--ink-2); line-height:1.55; max-width:64ch; }
.el-foot { margin-top:16px; font-size:12px; color:var(--ink-3); line-height:1.55; max-width:94ch; }

/* signature card */
.el-card { background: var(--n-0); border:1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 22px 48px -30px rgba(16,24,40,.34); padding: clamp(20px,2.4vw,30px); }
.el-card.rail { border-left: 3px solid var(--accent); }
.el-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.el-mini { display:inline-flex; align-items:center; --c:var(--accent); font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:5px; background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c); }
.el-mini.soft { background:var(--n-100); color:var(--ink-3); }
.el-tag { font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--n-0); color:var(--ink-2); }
.el-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.el-note { font-family:var(--font-mono); font-size:11px; line-height:1.6; letter-spacing:.02em; color:var(--ink-3); max-width:64ch; }

/* minmax(0,1fr) for the same reason as .pdp-top: `.el-tstats` inside this grid has a
   min-content of ~310px, which an `auto` floor let push the track past its container
   (tz-glp-2x and kisspeptin scrolled sideways at 320px). */
.el-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4.5vw,64px); align-items:start; }

/* hero */
.el-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; }
.el-display { font-size:clamp(34px,5vw,58px); font-weight:800; letter-spacing:-.04em; line-height:1.02; color:var(--ink); }
.el-lede { font-size:clamp(16px,1.4vw,19px); color:var(--ink-2); line-height:1.55; max-width:54ch; }
.el-nodes { width:100%; max-width:440px; height:auto; display:block; margin:0 auto; }
.el-hstats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.el-hstat { border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px; background:var(--n-0); position:relative; }
.el-hstat::before { content:""; position:absolute; top:12px; right:13px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.55; }
.el-hstat .v { font-size:var(--step-2); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink); }
.el-hstat .s { font-size:12px; color:var(--ink-2); margin-top:5px; line-height:1.35; }
.el-hstat .c { font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono); margin-top:8px; }

/* stat blocks (observations) */
.el-stats-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.el-stat { position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; background:var(--n-0); box-shadow:0 1px 2px rgba(16,24,40,.03); }
.el-stat .v { font-size:clamp(28px,3.2vw,38px); font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1; }
.el-stat .v .u { font-size:.42em; font-weight:700; margin-left:3px; color:var(--accent); letter-spacing:0; }
.el-stat .b { font-size:13px; color:var(--ink-2); margin-top:12px; line-height:1.45; }
.el-stat .c { font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono); margin-top:14px; }

/* dose-response / chart card */
.el-chart .el-chart-head h3 { font-size:var(--step-1); font-weight:700; }
.el-chart .el-chart-head p { font-size:12px; color:var(--ink-3); margin-top:5px; font-family:var(--font-mono); }
.el-bars { display:flex; flex-direction:column; gap:15px; margin-top:24px; }
.el-bar { display:grid; grid-template-columns:66px 1fr 58px; align-items:center; gap:14px; }
.el-bar-k { font-size:12px; color:var(--ink-2); font-family:var(--font-mono); }
.el-bar-track { height:10px; background:var(--n-100); border-radius:var(--r-pill); overflow:hidden; }
.el-bar-fill { display:block; height:100%; width:0; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--accent), #42a6ff); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.el-bar-v { font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); font-family:var(--font-mono); }
.el-callout { display:flex; gap:12px; align-items:flex-start; margin-top:24px; padding:16px 18px; background:var(--accent-tint); border-radius:var(--r-md); font-size:13px; color:var(--ink-2); line-height:1.5; }
.el-callout .el-dot { margin-top:6px; }
.el-callout strong { color:var(--ink); }

/* comparison */
.el-cmp-hero { display:grid; grid-template-columns:repeat(3,1fr); margin-top:30px; padding:0; overflow:hidden; }
.el-cmp-item { padding:26px 30px; border-left:1px solid var(--line-2); }
.el-cmp-item:first-child { border-left:none; }
.el-cmp-item .v { font-size:clamp(26px,3vw,40px); font-weight:800; letter-spacing:-.035em; color:var(--c); line-height:1; font-variant-numeric:tabular-nums; }
.el-cmp-item.lead .v { font-size:clamp(38px,5vw,60px); }
.el-cmp-item .n { font-weight:700; margin-top:12px; }
.el-cmp-item .s { font-size:11px; color:var(--ink-3); margin-top:4px; font-family:var(--font-mono); }
.el-tablewrap { margin-top:26px; overflow-x:auto; }
.el-scroll-hint { display:none; text-align:right; font-size:11px; color:var(--ink-3); margin-bottom:8px; font-family:var(--font-mono); }
.el-table { width:100%; border-collapse:collapse; min-width:660px; }
.el-table th { text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:12px 16px; border-bottom:1px solid var(--line); }
.el-table th.num, .el-table td.num { text-align:center; }
.el-table td { padding:16px; border-bottom:1px solid var(--line-2); font-size:14px; font-variant-numeric:tabular-nums; }
.el-table tr.lead td { background:var(--surface); font-weight:600; }
.el-table tr.lead td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.el-cmp-name .nm { font-weight:700; margin-right:10px; }
.el-table td.ok { color:var(--ok); font-weight:700; }
.el-table td.no { color:var(--ink-faint); }

/* radar + legend */
.el-radar { max-width:520px; margin:20px auto 0; opacity:0; transform:scale(.95); transition:opacity .8s ease, transform .8s ease; }
.el-radar.shown { opacity:1; transform:none; }
.el-radar svg { width:100%; height:auto; overflow:visible; }
.el-legend { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top:18px; }
.el-leg { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); font-family:var(--font-mono); }
.el-leg .dot { width:11px; height:11px; border-radius:50%; }
.el-leg .dot.dash { border-radius:2px; height:3px; width:16px; }

/* pk */
.el-pk { margin-top:28px; }
.el-pk svg { width:100%; height:auto; }
.pk-path { will-change:stroke-dashoffset; }

/* full spec */
.el-spec { margin-top:28px; padding:8px clamp(18px,2vw,26px); }
.el-spec-row { display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line-2); }
.el-spec-row:last-child { border-bottom:none; }
.el-spec-row .k { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.el-spec-row .v { font-size:14px; color:var(--ink); font-weight:500; }
.el-spec-row .v.ok { color:var(--ok); font-weight:700; }
.el-spec-row .v.mono { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
.el-spec-side { display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.el-bindcard h3 { font-size:var(--step-1); font-weight:700; }
.el-card-sub { font-size:12px; color:var(--ink-3); margin-top:5px; font-family:var(--font-mono); }
.el-binds { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.el-bind { display:grid; grid-template-columns:82px 1fr 62px; align-items:center; gap:12px; }
.el-bind-k { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink); }
.el-bind-k .dot { width:9px; height:9px; border-radius:50%; }
.el-bind-track { height:10px; background:var(--n-100); border-radius:var(--r-pill); overflow:hidden; }
.el-bind-fill { display:block; height:100%; width:0; border-radius:var(--r-pill); background:var(--c); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.el-bind-v { font-family:var(--font-mono); font-size:12.5px; font-weight:600; text-align:right; color:var(--ink); }
.el-why { display:flex; gap:14px; align-items:flex-start; }
.el-why-ic { width:26px; height:26px; border-radius:7px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; flex:none; }
.el-why-ic svg { width:16px; height:16px; }
.el-why strong { font-size:14px; }
.el-why p { font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.5; }

/* timeline */
.el-timeline { margin-top:30px; }
.el-tl-item { display:grid; grid-template-columns:54px 24px 1fr; padding-bottom:30px; --c:var(--accent); }
.el-tl-item:last-child { padding-bottom:0; }
.el-tl-yr { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-2); text-align:right; padding-right:2px; padding-top:1px; }
.el-tl-rail { position:relative; }
.el-tl-rail::before { content:""; position:absolute; left:50%; top:2px; width:13px; height:13px; transform:translateX(-50%); border-radius:50%; background:var(--n-0); border:3px solid var(--c); z-index:1; }
.el-tl-rail::after { content:""; position:absolute; left:50%; top:15px; bottom:-30px; width:2px; transform:translateX(-50%); background:var(--line); }
.el-tl-item:last-child .el-tl-rail::after { display:none; }
.el-tl-item.now .el-tl-rail::before { animation: el-nowpulse 2.6s ease-in-out infinite; }
@keyframes el-nowpulse { 0%,100% { box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); } 50% { box-shadow:0 0 0 10px color-mix(in srgb, var(--c) 2%, transparent); } }
@media (prefers-reduced-motion: reduce){ .el-tl-item.now .el-tl-rail::before { animation:none; box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent); } }
.el-tl-body { padding-left:16px; padding-bottom:2px; }
.el-tl-body h4 { font-size:var(--step-0); font-weight:700; margin-top:9px; }
.el-tl-body p { font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.5; max-width:52ch; }
.el-tl-side { display:flex; flex-direction:column; gap:16px; margin-top:52px; }
.el-tstats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.el-tstat { border:1px solid var(--line); border-radius:var(--r-md); padding:16px 14px; background:var(--n-0); text-align:center; }
.el-tstat .v { font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.el-tstat .s { font-size:10.5px; color:var(--ink-3); margin-top:6px; font-family:var(--font-mono); letter-spacing:.03em; text-transform:uppercase; }
.el-obscard h3 { font-size:var(--step-0); font-weight:700; }
.el-obslist { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.el-obslist li { display:grid; grid-template-columns:auto 1fr; gap:12px; --c:var(--accent); }
.el-obslist li .dot { width:9px; height:9px; border-radius:50%; background:var(--c); margin-top:5px; }
.el-obslist li p { font-size:13px; color:var(--ink); line-height:1.5; }
.el-obslist li .c { font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono); font-style:italic; margin-top:4px; display:block; }

/* published literature */
.el-filters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:28px; }
.el-fchip { font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--n-0); color:var(--ink-2); cursor:pointer; transition:all var(--dur-fast); }
.el-fchip.on { background:var(--ink); border-color:var(--ink); color:#fff; }
@media (hover:hover){ .el-fchip:not(.on):hover { border-color:var(--line-strong); } }
.el-studies { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.el-study { display:flex; flex-direction:column; text-decoration:none; transition:transform var(--dur-fast), box-shadow var(--dur-fast); border-top:2px solid var(--accent); }
@media (hover:hover){ .el-study:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 28px 50px -28px rgba(16,24,40,.4); } }
.el-study-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.el-study-j { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.el-study-yr { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); }
.el-study h4 { font-size:15px; font-weight:700; line-height:1.3; margin-top:14px; color:var(--ink); }
.el-study-a { font-size:12.5px; color:var(--ink-2); margin-top:10px; font-style:italic; }
.el-study-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.el-study-link { font-family:var(--font-mono); font-size:12px; color:var(--accent); margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:5px; }
.el-study-link svg { width:13px; height:13px; }
.el-lit-more { display:flex; align-items:center; gap:16px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.el-lit-more .el-foot { margin-top:0; }

/* references */
.el-refmeta { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.el-reflist { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.el-ref { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:20px 24px; }
.el-ref-n { font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-tint); border-radius:6px; padding:4px 8px; }
.el-ref-a { font-weight:700; font-size:14px; color:var(--ink); }
.el-ref-t { font-size:13.5px; color:var(--ink-2); font-style:italic; margin-top:5px; line-height:1.45; }
.el-ref-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; }
.el-ref-src { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
.el-ref-doi { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); }
.el-ruo { margin-top:26px; text-align:center; font-size:13px; color:var(--ink-2); line-height:1.6; max-width:none; background:var(--surface); }
.el-ruo strong { display:block; color:var(--ink); font-size:14px; margin-bottom:6px; }

@media (max-width:920px){
  .el-hero, .el-split { grid-template-columns:minmax(0,1fr); }
  .el-studies { grid-template-columns:1fr; }
  .el-tl-side { margin-top:24px; }
  .el-scroll-hint { display:block; }
}
@media (max-width:560px){
  .el-stats-2, .el-cmp-hero, .el-hstats { grid-template-columns:1fr; }
  .el-cmp-item { border-left:none; border-top:1px solid var(--line-2); }
  .el-cmp-item:first-child { border-top:none; }
  .el-spec-row { grid-template-columns:1fr; gap:5px; }
}

/* ---- generic elevated flagship (any compound) ---- */
.el-genbars { display:flex; flex-direction:column; gap:18px; }
.el-genbar { display:flex; flex-direction:column; gap:9px; }
.el-genbar-top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:13.5px; }
.el-genbar-top span:first-child { color:var(--ink-2); }
.el-genbar-v { font-family:var(--font-mono); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.el-mechgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; margin-top:32px; }
.el-mechcard { border-top:2px solid var(--c); }
.el-mechcard h4 { font-size:var(--step-1); font-weight:700; margin-top:12px; }
.el-mechcard p { font-size:13.5px; color:var(--ink-2); margin-top:10px; line-height:1.5; }
.el-mechcite { display:block; margin-top:14px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); font-style:italic; }
.el-checks { display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.el-check { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.el-check-ic { width:20px; height:20px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; font-size:11px; font-weight:700; flex:none; margin-top:1px; }
.el-check strong { display:block; font-size:13.5px; }
.el-check span { font-size:12px; color:var(--ink-3); }

/* ============================================================
   PRODUCT FAQ - reference-grade, Swiss-functionalist
   Structure carries the design: an asymmetric grid, a sticky meta
   rail, and rows that lift into a tinted panel when opened. The
   accent is spent in two places only (the open row's inset rule and
   its numeral), so the section reads as documentation.
   ============================================================ */
.faq-sec { background: var(--surface); border-top: 1px solid var(--line-2); }

.faq-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 72px; align-items: start; }
@media (max-width: 940px) { .faq-grid { grid-template-columns: 1fr; gap: 34px; } }

/* --- left rail --- */
.faq-rail { position: sticky; top: 104px; }
@media (max-width: 940px) { .faq-rail { position: static; } }
.faq-title { margin-top: 12px; }
.faq-lede { margin-top: 14px; color: var(--ink-2); font-size: var(--step--1); line-height: 1.65; max-width: 33ch; }
.faq-meta { margin-top: 30px; border-top: 1px solid var(--line-2); }
.faq-meta > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.faq-meta dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.faq-meta dd { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink); text-align: right; }

/* --- the list --- */
.faq-acc { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); border-radius: var(--r-lg); transition: background var(--dur) var(--ease-std); }
/* open row becomes a panel. The accent rule is an INSET shadow, not a
   pseudo-element bar - a bar sat on top of the numeral and clipped it. */
.faq-item[data-open] {
  background: var(--n-50);
  box-shadow: inset 3px 0 0 0 var(--accent);
  border-bottom-color: transparent;
}
@media (hover: hover) { .faq-item:not([data-open]):hover { background: var(--n-50); } }

.faq-head {
  display: grid; grid-template-columns: 34px 1fr 26px; align-items: start; gap: 16px;
  width: 100%; padding: 24px 20px; text-align: left; background: none; border: 0; cursor: pointer;
}
.faq-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: var(--ink-faint); padding-top: 4px;
  transition: color var(--dur) var(--ease-std);
}
.faq-item[data-open] .faq-num { color: var(--accent); }
/* the question colour never changes - only the numeral and the toggle signal state */
.faq-q { font-size: var(--step-0); font-weight: 620; color: var(--ink); line-height: 1.45; letter-spacing: -.004em; }
.faq-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-lg); box-shadow: none; }

/* toggle: a bordered disc, not a bare glyph */
.faq-head .acc-icon {
  width: 26px; height: 26px; margin-top: 1px; border: 1px solid var(--line-strong);
  border-radius: 50%; background: var(--surface); transition:
    border-color var(--dur) var(--ease-std), background var(--dur) var(--ease-std), transform var(--dur-mod) var(--ease-std);
}
.faq-head .acc-icon::before, .faq-head .acc-icon::after { background: var(--ink-2); }
.faq-head .acc-icon::before { top: 12px; left: 7px; width: 11px; height: 1.5px; }
.faq-head .acc-icon::after  { top: 7px; left: 12px; width: 1.5px; height: 11px; }
@media (hover: hover) { .faq-head:hover .acc-icon { border-color: var(--accent); } }
.faq-item[data-open] .acc-icon { border-color: var(--accent); background: var(--accent-tint); transform: rotate(180deg); }
.faq-item[data-open] .acc-icon::before, .faq-item[data-open] .acc-icon::after { background: var(--accent-ink); }

/* first row ships open before the accordion JS binds */
.faq-item[data-open] > .acc-body { height: auto; }

/* --- answers: aligned to the question, not the numeral --- */
.faq-answer { padding: 0 26px 26px 70px; max-width: 70ch; }
@media (max-width: 560px) {
  .faq-head { grid-template-columns: 26px 1fr 26px; gap: 12px; padding: 20px 14px; }
  .faq-answer { padding: 0 14px 22px 14px; }
}
.faq-answer > p { color: var(--ink-2); line-height: 1.7; font-size: var(--step--1); margin: 0; }

.faq-rows { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.faq-row { display: grid; grid-template-columns: 136px 1fr; gap: 18px; padding: 15px 16px; background: var(--surface); align-items: start; }
@media (max-width: 640px) { .faq-row { grid-template-columns: 1fr; gap: 7px; } }
.faq-row-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-tint); border-radius: var(--r-xs);
  padding: 4px 7px; justify-self: start; white-space: nowrap; line-height: 1.2;
}
.faq-row-text { font-size: var(--step--1); line-height: 1.65; color: var(--ink-2); }
.faq-row-text b { color: var(--ink); font-weight: 640; display: block; margin-bottom: 3px; }
.faq-row-cite { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.faq-row-cite::before { content: "\00b7\00a0"; }

.faq-foot { margin-top: 28px; padding-left: 20px; font-size: 11.5px; line-height: 1.65; color: var(--ink-3); max-width: 76ch; border-left: 1px solid var(--line-2); }
@media (max-width: 560px) { .faq-foot { padding-left: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-num, .faq-head .acc-icon { transition: none; }
  .faq-item[data-open] .acc-icon { transform: none; }
}

/* ==========================================================================
   PDP RAILS UNDER THE BUY BOX
   "Frequently researched together" + "Every batch, independently verified",
   ported from lumenpeptides.com's PDP (Brandon 2026-08-25) and restated in
   Aspect tokens: azure --accent in place of Lumen's navy, and the same mint
   --ok-tint chip the cart line's "1 FREE - BOGO" badge uses, so the discount
   pill reads as one family across the site.
   ========================================================================== */

.pdp-rail { padding-block: clamp(28px, 3.4vw, 44px); }
.pdp-rail + .pdp-rail { padding-top: 0; }

.rail-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.rail-title { font-size:var(--step-2); letter-spacing:-.02em; margin-top:4px; }
.rail-sub { margin-top:8px; color:var(--ink-2); font-size:var(--step--1); max-width:62ch; }
.rail-nav { display:flex; gap:8px; flex:none; }
.rail-nav button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer;
  transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
@media (hover:hover){ .rail-nav button:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-tint); } }
.rail-nav button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* one scroll model for both rails; snap so a card never half-lands */
.fbt-strip, .batch-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:4px 4px 14px; margin:0 -4px; scrollbar-width:thin; }
.fbt-strip > *, .batch-track > * { scroll-snap-align:start; }

/* ---------- frequently researched together ---------- */
.fbt-card { flex:0 0 244px; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-1);
  transition:box-shadow var(--dur-fast), border-color var(--dur-fast); }
@media (hover:hover){ .fbt-card:hover { border-color:var(--accent-tint-2); box-shadow:var(--sh-2); } }
.fbt-top { display:flex; align-items:center; gap:6px; }
.fbt-off, .fbt-pure { font-size:11px; font-weight:700; padding:2px 7px; border-radius:var(--r-pill); white-space:nowrap; }
.fbt-off { color:#0d6b3d; background:var(--ok-tint); }
.fbt-pure { color:var(--accent-ink); background:var(--accent-tint); }
.fbt-coa { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; }
@media (hover:hover){ .fbt-coa:hover { text-decoration:underline; } }
.fbt-img { display:grid; place-items:center; height:150px; margin:6px 0 4px; }
.fbt-img .vial-svg, .fbt-img .vial-img { max-height:150px; width:auto; max-width:100%; object-fit:contain; }
.fbt-name { font-weight:700; font-size:var(--step-0); color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.fbt-area { font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.fbt-price { margin:10px 0 12px; font-size:var(--step-1); }
.fbt-price .was-price { font-size:.62em; }
/* Per-vial figure, same expression as the shop/homepage cards (app.js
   bogoPerVial) so the PDP rail and the shelf can never quote different price
   stories for one product. Not breakpoint-scoped: the disagreement was on
   desktop as well. */
.fbt-per { display:block; margin-top:3px; font-family:var(--font-mono); font-size:11px; letter-spacing:0; color:var(--ok); }
.fbt-add { margin-top:auto; width:100%; border:0; cursor:pointer; background:var(--accent); color:#fff;
  font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.06em;
  padding:12px; border-radius:var(--r-md); transition:background var(--dur-fast); }
@media (hover:hover){ .fbt-add:hover { background:var(--accent-hover); } }
.fbt-add:active { background:var(--accent-press); }
.fbt-add:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- certificate hero + QC panel ---------- */
.cert-wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:20px; align-items:start; margin:22px 0 34px; }
.cert-card { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:20px; box-shadow:var(--sh-2); }
.cert-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line-2); }
.cert-lab { display:flex; align-items:center; gap:10px; min-width:0; }
/* The LAB tile. Gradient runs the brand's own accent ramp (light -> base ->
   press) so it reads as depth rather than a second colour.
   🔴 The doubled selector is load-bearing, not decoration: `.cert-lab span`
   two rules below is (0,1,1) and a bare `.lab-badge` is only (0,1,0), so that
   rule was winning and painting the letters --ink-3 grey at 12px instead of
   white at 10px. Same specificity trap as `.asp-pop` in the cart drawer. */
.lab-badge,
.cert-lab .lab-badge {
  flex:none; width:38px; height:38px; border-radius:var(--r-md);
  background:linear-gradient(140deg, var(--accent-dark) 0%, var(--accent) 55%, var(--accent-press) 100%);
  color:#fff; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em;
  box-shadow:0 2px 8px -3px var(--accent-glow);
}
.cert-lab b { display:block; font-size:var(--step-0); color:var(--ink); }
.cert-lab span { font-size:12px; color:var(--ink-3); }
.cert-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); text-align:right; }
.cert-bd { display:flex; align-items:flex-start; gap:26px; flex-wrap:wrap; padding:20px 0; }
.cert-big { font-size:clamp(38px, 5.4vw, 56px); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.cert-big sup { font-size:.42em; font-weight:700; margin-left:2px; top:-.6em; position:relative; }
.cert-purity .mono-label { margin-top:6px; display:block; }
.cert-meta { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 26px; margin:0; flex:1 1 220px; }
.cert-meta dt { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.cert-meta dd { margin:3px 0 0; font-weight:700; font-size:var(--step-0); color:var(--ink); font-variant-numeric:tabular-nums; }
.cert-cta { margin-top:4px; }

.qc-panel { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden; }
.qc-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line-2); }
.qc-hd b { font-size:var(--step-0); }
.qc-hd span { font-size:12px; color:var(--ink-3); }
.qc-row { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-2); }
.qc-row:last-child { border-bottom:0; }
.qc-nm { font-weight:650; font-size:var(--step--1); color:var(--ink); }
.qc-mth { font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.qc-val { margin-left:auto; font-weight:700; font-size:var(--step--1); white-space:nowrap; }
.qc-flag { flex:none; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.06em;
  padding:3px 7px; border-radius:var(--r-xs); color:var(--ink-3); background:var(--n-100); }
.qc-flag.is-pass { color:#0d6b3d; background:var(--ok-tint); }

/* ---------- every batch on record ---------- */
.bcard { flex:0 0 288px; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-1); }
.bcard-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bcard-top b { font-size:var(--step-0); letter-spacing:-.01em; }
.b-badge { flex:none; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.08em;
  padding:3px 7px; border-radius:var(--r-pill); color:var(--ink-3); background:var(--n-100); white-space:nowrap; }
.b-badge--latest { color:var(--accent-ink); background:var(--accent-tint); }
.b-lot { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint); margin-top:6px; }
.b-lot b { color:var(--ink-2); }
.b-purity { display:flex; align-items:center; gap:11px; margin:14px 0 4px; }
.b-tick { flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; }
.b-tick svg { width:18px; height:18px; }
.b-num { font-size:var(--step-2); font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums; }
.b-num sup { font-size:.5em; top:-.65em; position:relative; }
.b-sub { font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.b-specs { margin:14px 0 0; border-top:1px solid var(--line-2); }
.b-specs .row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.b-specs dt { font-size:12.5px; color:var(--ink-3); }
.b-specs dd { margin:0; font-size:12.5px; font-weight:650; color:var(--ink); text-align:right; }
.b-foot { margin-top:12px; font-size:11.5px; color:var(--ink-3); }
.b-foot b { color:var(--ink-2); }
.b-cta { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--accent); color:#fff; text-decoration:none; font-size:13px; font-weight:700;
  padding:11px; border-radius:var(--r-md); transition:background var(--dur-fast); }
@media (hover:hover){ .b-cta:hover { background:var(--accent-hover); } }
.b-cta svg { width:15px; height:15px; }

@media (max-width:880px){
  .cert-wrap { grid-template-columns:1fr; }
  .rail-hd { flex-direction:column; align-items:flex-start; gap:12px; }
  .rail-nav { align-self:flex-end; margin-top:-52px; }
}
@media (max-width:520px){
  /* 2026-08-29: at 375px the strip is 351px, so a 212px card showed 1.66 cards
     and the peek sliced the second card's COA link mid-word - it read as broken
     rather than scrollable. 188px gives ~1.85 cards, so the cut lands across the
     vial image instead.
     MEASURED CONSTRAINT: the top row's min-content is 157px (BOGO 47 + 99%+ 43
     + View COA 55 + 12 gaps) and the card pads 14px a side, so 188px would have
     left 3px of slack and clipped any card whose COA label is the longer
     fallback 'COA library'. The BOGO pill is what gives way, because the price
     line now states the same offer with an actual number - dropping it leaves
     ~36px of slack even in the fallback case. Do not narrow this card without
     re-measuring that row. */
  /* EXACTLY 2-up, no partial card. 188px gave a 1.87-card view whose 147px
     slice still guillotined the second card COA link: because .fbt-top spans
     the full card width, ANY partial card clips something in that row, and
     narrowing the card makes the exposed slice BIGGER, not smaller. Two whole
     cards removes the cut entirely; the rail header prev/next buttons and
     scroll-snap carry the scroll affordance. 167px at 375 also matches the
     shop grid card (165px), so the two shelf surfaces share a scale. */
  .fbt-card { flex-basis:calc((100% - 16px) / 2); }
  .fbt-off { display:none; }
  .fbt-img { height:120px; margin:4px 0 2px; }
  .fbt-img .vial-svg, .fbt-img .vial-img { max-height:120px; }
  .fbt-price { margin:8px 0 10px; }
  .fbt-per { font-size:10px; }
  .bcard { flex-basis:262px; }
  .cert-bd { gap:18px; }
}


/* Third-party lab verified header + AuthentiChain strip (2026-08-29), ported
   from eonpeptides.com. The orbit mark is SVG, not a GIF, so it can be stopped
   under prefers-reduced-motion - see the note above AC_MARK in product.js. */
.pdp-lv { text-align: center; }
.pdp-lv .rail-sub { max-width: 46rem; margin-left: auto; margin-right: auto; }
.ac-strip {
  display: flex; align-items: center; gap: 14px;
  margin: 20px auto 0; max-width: 46rem; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; text-align: left;
}
.ac-mark { flex: none; display: block; width: clamp(38px, 4vw, 50px); }
.ac-mark svg { width: 100%; height: auto; display: block; }
.ac-mark__orbit { transform-origin: 24px 24px; animation: ac-spin 26s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-strip__txt { min-width: 0; }
.ac-strip__txt b { display: block; color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.ac-strip__txt span { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .ac-mark__orbit { animation: none; } }
@media (max-width: 520px) { .ac-strip { gap: 11px; padding: 12px 13px; } }


/* Trust row: claim + evidence (owner 2026-08-29). Was three bare uppercase mono
   labels; each now pairs the claim with what backs it. Icons take the Aspect
   accent - ONE colour, not one per cell: three hues on a 60px row is noise and
   breaks the single-reserved-accent rule the rest of the site follows.
   ⚠️ .trust-item span already sets uppercase + mono + 9px on mobile and it
   matches these nested spans directly, so text-transform/letter-spacing/font
   MUST be reset explicitly here or the sentence-case copy renders shouting.
   ⚠️ "Full refund, no time limit" is a POLICY commitment, true per
   refund-policy.html (COA non-conformance: no time limit, full refund or
   replacement, no return). If that policy ever tightens, this line changes. */
.trust-item svg { color: var(--accent); }
.trust-item .ti-w { display: block; }
.trust-item .ti-t, .trust-item .ti-s { display: block; font-family: inherit; text-transform: none; letter-spacing: normal; }
.trust-item .ti-t { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; }
.trust-item .ti-s { font-size: 11px; color: var(--ink-3); line-height: 1.3; margin-top: 2px; }
@media (max-width: 520px) { .trust-item .ti-t { font-size: 11.5px; } .trust-item .ti-s { font-size: 10px; } }


/* ============================================================
   Certificate card v2 (2026-08-29). Every figure comes from the lot record;
   the archive holds NO chromatographic data, so the trace is a derived profile
   and is captioned as one. No retention times, no UV wavelength, no impurity
   percentages - those do not exist and must not be drawn.
   🔴 BOTH animations FAIL VISIBLE: the resting state below is a fully drawn
   trace and a full bar. The undrawn state lives ONLY under .coa-anim, which JS
   adds on scroll-in. If the observer never fires the card reads complete.
   🔴 The trace reveal is a CLIP WIPE, not stroke-dasharray: dasharray plus
   vector-effect:non-scaling-stroke resolves the dash in SCREEN space, which
   leaves the flat baseline reading as a drawn line while the peak dissolves,
   with no error anywhere.
   ============================================================ */
.cc { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.cc-top { display: flex; align-items: center; justify-content: space-between; }
.cc-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-tint-2); background: var(--accent-tint); padding: 4px 10px; border-radius: var(--r-pill); }
.cc-latest { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cc-name { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0; line-height: 1.1; }
.cc-lot { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.cc-lot b { color: var(--ink); }

.cc-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, var(--accent) 0%, #0b4fa0 100%); color: #fff; }
.cc-hero__k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cc-hero__v { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: 4px 0 2px; }
.cc-hero__v sup { font-size: .42em; font-weight: 700; vertical-align: super; margin-left: 1px; }
.cc-hero__s { font-size: 13px; opacity: .9; }

.cc-panel { border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; }
.cc-panel__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cc-panel__hd b { font-size: 13.5px; color: var(--ink); }
.cc-panel__hd span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cc-chart { display: block; width: 100%; height: 96px; }
.cc-trace { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cc-cap { margin: 7px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-3); }

.cc-bar { height: 12px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; }
.cc-bar__fill { display: block; height: 100%; width: var(--pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent) 0%, #57a0ff 100%); }
.cc-bar__legend { margin-top: 7px; font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.cc-bar__legend b { color: var(--ink); }

.cc-rows { margin: 0; }
.cc-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.cc-rows > div:last-child { border-bottom: 0; }
.cc-rows dt { font-size: 13px; color: var(--ink-3); }
.cc-rows dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); text-align: right; }
.cc-foot { font-size: 12.5px; color: var(--ink-3); }
.cc-foot b { color: var(--ink); }

/* --- resting state IS the finished state (see the note above) --- */
.cc .cc-wipe { width: 300px; }
.cc.coa-anim .cc-wipe { animation: cc-wipe 1.15s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes cc-wipe { from { width: 0; } to { width: 300px; } }
.cc.coa-anim .cc-bar__fill { animation: cc-fill 1s cubic-bezier(.22,.61,.36,1) .12s backwards; }
@keyframes cc-fill { from { width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cc.coa-anim .cc-wipe, .cc.coa-anim .cc-bar__fill { animation: none; }
}
@media (max-width: 520px) {
  .cc { padding: 15px; }
  .cc-hero { padding: 14px; }
}


/* purity bar scale + the 99% specification marker. The bar runs a STATED 95-100%
   window so a real difference between 99.1 and 99.95 is visible; the endpoints are
   printed so the scale is never implied. */
.cc-scale { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:5px; }
.cc-bar { position: relative; }
.cc-spec { position:absolute; top:-2px; bottom:-2px; left:80%; width:2px; background:var(--ink-3); opacity:.55; border-radius:2px; z-index:2; }


/* #lab-verified is a .pdp-rail following another .pdp-rail, so the pre-existing
   `.pdp-rail + .pdp-rail { padding-top: 0 }` collapsed its top padding to zero -
   leaving a full eyebrow + heading flush against the cross-sell rail above, and
   only 28px between it and the batch heading it introduces. It is the INTRO to
   #batches, so: full separation above, and a tight gap below so the pair reads
   as one region instead of two cramped sections. ID beats the adjacent-sibling
   rule on specificity. */
#lab-verified { padding-top: clamp(30px, 3.6vw, 48px); padding-bottom: 10px; }


/* ============================================================================
   Certificate card v3 - CONDENSED (2026-08-29)
   The v2 card stacked every block in one column, so the card ran taller than the
   QC panel beside it and the fact rows were five full-width lines. This packs the
   chart and the purity figure side by side and puts the facts in a 2-up grid,
   which is the layout Brandon specified from a mockup.
   NOTE ON WHAT IS DELIBERATELY ABSENT: the mockup also carried a retention time,
   a UV wavelength, an impurity percentage, a mAU response scale and a net-peptide
   composition split. None of those exist - all 147 source certificates were swept
   and they carry no chromatographic data at all, and net-peptide-vs-label
   computes 25.7% to 150% across the archive (a single-value blend reads 50%), so
   it cannot be published. Do not add them back without new source data.
   ========================================================================== */
.cc-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.cc-grid > .cc-panel { display: flex; flex-direction: column; margin: 0; }
.cc-grid .cc-chart { height: 84px; flex: none; }

.cc-key { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.cc-key::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* the figure block mirrors the mockup's big-number treatment: value, key beside
   it, and the spec pushed to the right edge on the same baseline */
.cc-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 12px; }
.cc-fig__v { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-fig__v sup { font-size: .42em; font-weight: 700; vertical-align: super; margin-left: 1px; }
.cc-fig__k { font-size: 13px; color: var(--ink-2); }
.cc-fig__side { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* facts: 2 columns, ruled like the mockup. The 5th cell sits alone on the last
   row by design - the mockup shows the same empty slot beside Tested. */
.cc-facts { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-facts > div { display: flex; align-items: center; gap: 9px; padding: 11px 13px; min-width: 0;
  border-bottom: 1px solid var(--line-2); }
.cc-facts > div:nth-child(odd) { border-right: 1px solid var(--line-2); }
.cc-facts > div:nth-last-child(-n+1) { border-bottom: 0; }
.cc-facts__i { flex: none; display: inline-flex; color: var(--ink-faint); }
.cc-facts__i svg { width: 16px; height: 16px; }   /* icon() returns an UNSIZED svg */
.cc-facts dt { font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.cc-facts dd { margin: 0 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums; min-width: 0;
  overflow-wrap: anywhere; }

/* footer line: centerd, accent, sitting between the facts and the CTA */
.cc-foot { text-align: center; font-size: 13px; color: var(--accent); font-weight: 650; padding: 2px 0; }
.cc-foot b { color: var(--accent); }


@media (max-width: 420px) {
  .cc-facts { grid-template-columns: minmax(0, 1fr); }
  .cc-facts > div:nth-child(odd) { border-right: 0; }
  .cc-facts > div:last-child { border-bottom: 0; }
}

/* a lot with no reported purity draws NO bar - see the note in product.js. The
   legend line still renders and carries the explanation. */
.cc-panel--fig.is-nopur .cc-scale,
.cc-panel--fig.is-nopur .cc-bar { display: none; }
.cc-panel--fig.is-nopur .cc-fig { margin-bottom: 6px; }

/* --- gridded chromatogram frame + callouts (mockup structure) --- */
.cc-panel--chart .cc-chart { height: auto; width: 100%; aspect-ratio: 320 / 138; }
.cc-meth { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cc-grid-l line { stroke: var(--line-2); stroke-width: .7; }
.cc-ax text { font-family: var(--font-mono); font-size: 7.5px; fill: var(--ink-faint); text-anchor: end; }
.cc-ax .cc-ax-t { font-size: 7px; letter-spacing: .1em; text-anchor: middle; fill: var(--ink-faint); }
.cc-fillArea { fill: url(#ccFillG); stroke: none; }
.cc-note__v { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.cc-note__k { font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; fill: var(--ink-3); text-anchor: middle; }
.cc-note__i { font-family: var(--font-mono); font-size: 7px; letter-spacing: .06em; fill: var(--ink-3); text-anchor: end; }
.cc-arrow { stroke: var(--ink-faint); stroke-width: .9; fill: none; marker-end: none; }

/* the bar carries its own % inside the fill, like the mockup's segmented bar */
.cc-bar { height: 26px; display: flex; align-items: center; }
.cc-bar__fill { display: flex; align-items: center; justify-content: center; }
.cc-bar__fill i { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: .02em; white-space: nowrap; }
.cc-panel--fig.is-nopur .cc-bar__fill i { display: none; }

/* --- card brand mark, top right (mockup) --- */
.cc-logo { height: 30px; width: auto; display: block; flex: none; object-fit: contain; }
@media (max-width: 520px) { .cc-logo { height: 25px; } }

/* the caption under the chart is gone, so the plot takes that space instead of
   leaving a gap - the two panels are still stretched level by the grid.
   ℹ️ The "derived" disclosure now lives on the x-axis label itself
   (DERIVED ELUTION PROFILE), which is why removing the caption is safe. */
.cc-panel--chart .cc-chart { margin-top: auto; margin-bottom: auto; }

/* --- compound name: gradient fill (mockup) ---
   Fallback FIRST: a solid accent colour, then transparent only where
   background-clip:text actually works. Without the @supports guard a browser that
   ignores the clip paints transparent text on a transparent background = an
   invisible product name. */
.cc-name { color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* the gradient is declared INSIDE the guard on purpose: declared outside, a
     browser that ignores background-clip would paint the gradient as a solid
     rectangle behind the heading instead of filling the glyphs */
  .cc-name {
    background-image: linear-gradient(135deg, #4E93F5 0%, #1E56B0 55%, #143A78 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* --- QUALITY VERIFIED seal --- */
.cc-seal { flex: none; display: block; }
.cc-seal__svg { width: 74px; height: 74px; display: block; overflow: visible; }
.cc-seal__ring { fill: none; stroke: #cfe2ff; stroke-width: 2; opacity: .9; }
.cc-seal__ring--in { stroke-width: 1; opacity: .5; }
.cc-seal__dot { fill: #cfe2ff; opacity: .9; }
.cc-seal__t { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .22em; fill: #eaf2ff; }
.cc-seal__shield { stroke: #dbe9ff; stroke-width: 1.1; }   /* fill set inline per card - unique gradient id */
.cc-seal__check { fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) { .cc-seal__svg { width: 58px; height: 58px; } }

/* ============================================================================
   Batch rail cards - same aesthetic as the featured certificate card, scaled to
   a 300px card. They reuse .cc-name / .cc-lot / .cc-hero / .cc-facts / .cc-foot
   outright, so the two can never drift; only the sizes are overridden here.
   No chromatogram: at this width the plot would be unreadable and the card would
   run twice as tall for no added information.
   ========================================================================== */
.bcard.bc { flex: 0 0 300px; padding: 16px; gap: 0; }
.bc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.bc-logo { height: 22px; }
.bc-name { font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem); margin: 8px 0 0; line-height: 1.15; }
.bc .cc-lot { font-size: 11px; margin-top: 4px; }
.bc-hero { margin-top: 12px; padding: 12px 13px; border-radius: 12px; gap: 10px; }
.bc-hero .cc-hero__k { font-size: 9.5px; }
.bc-hero .cc-hero__v { font-size: 1.7rem; margin: 3px 0 1px; }
.bc-hero .cc-hero__s { font-size: 11.5px; }
.bc-seal .cc-seal__svg { width: 50px; height: 50px; }
/* the arched text is set in absolute SVG user units, so it does NOT need scaling
   down with the badge - it scales with the viewBox automatically */
.bc-facts { margin-top: 12px; grid-template-columns: minmax(0, 1fr); }   /* one column at this width */
.bc-facts > div { padding: 9px 11px; }
.bc-facts > div:nth-child(odd) { border-right: 0; }
.bc-facts > div:last-child { border-bottom: 0; }
.bc-facts dt, .bc-facts dd { font-size: 12px; }
.bc-facts__i svg, .bc .cc-facts__i svg { width: 15px; height: 15px; }
.bc-foot { margin-top: 12px; font-size: 12px; }
.bcard.bc .b-cta { margin-top: 12px; }
@media (max-width: 520px) {
  .bcard.bc { flex-basis: 280px; }
  .bc-seal .cc-seal__svg { width: 46px; height: 46px; }
}

/* ============================================================================
   "What every batch is screened for" panel - replaces the old QC value table.
   ⚠️ No information was lost in the swap: every value that table showed
   (appearance, purity, identity, net peptide content) already appears on the
   certificate card beside it, in the hero and the ruled fact grid.
   ========================================================================== */
.qc-panel.sc { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sc-hd { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--line-2); }
.sc-hd b { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-ink, var(--accent)); line-height: 1.25; min-width: 0; }
.sc-hd__n { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.sc-hd__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, #4E93F5 0%, #1B52A8 100%); }
.sc-hd__ic svg { width: 18px; height: 18px; }

.sc-list { display: flex; flex-direction: column; gap: 9px; }
.sc-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line-2);
  border-radius: 12px; background: var(--surface); }
.sc-tile { flex: none; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, #6FA8F8 0%, #2E68C8 55%, #1B4796 100%);
  box-shadow: 0 1px 3px rgba(16,42,86,.28); }
.sc-tile svg { width: 24px; height: 24px; }
.sc-body { min-width: 0; flex: 1 1 auto; padding-left: 12px; border-left: 1px solid var(--line-2); }
.sc-n { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent); line-height: 1; }
.sc-t { margin-top: 3px; font-size: var(--step--1); font-weight: 750; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.sc-d { margin-top: 2px; font-size: 12px; color: var(--ink-3); line-height: 1.35; overflow-wrap: anywhere; }
.sc-ck { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, #3E86F0 0%, #1B52A8 100%); }
.sc-ck svg { width: 15px; height: 15px; stroke-width: 3; }

@media (max-width: 520px) {
  .sc-row { padding: 10px; gap: 10px; }
  .sc-tile { width: 40px; height: 40px; border-radius: 10px; }
  .sc-tile svg { width: 21px; height: 21px; }
  .sc-body { padding-left: 10px; }
}

/* --- "Verified" pill with the live dot (beside Peptide / LATEST on every card) --- */
.cc-pills { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.cc-vpill { display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #0d6b3d; background: var(--ok-tint, #e4f6ec);
  border: 1px solid #bfe6cf; padding: 4px 10px; border-radius: var(--r-pill); line-height: 1; }
.cc-vdot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: none;
  animation: cc-blink 1.7s ease-in-out infinite; }
@keyframes cc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
/* the dot RESTS fully visible - the keyframe only dims it - so an environment that
   never runs the animation shows a solid green dot rather than an invisible one */
@media (prefers-reduced-motion: reduce) { .cc-vdot { animation: none; } }
@media (max-width: 520px) {
  .cc-vpill { font-size: 9px; padding: 3px 8px; letter-spacing: .1em; }
  .cc-vdot { width: 6px; height: 6px; }
}

/* ============================================================================
   Phones keep the two panels SIDE BY SIDE (Brandon: the card was far too long
   stacked). At ~150px per panel the SVG text is the problem, not the layout:
   the chart scales with its viewBox, so a 10.5-unit label that renders ~10px on
   desktop renders ~4.9px here - present but unreadable. Below 560px the chart
   therefore sheds ALL of its text and keeps the gridlines, trace and fill.
   Nothing is lost: the purity appears in the hero AND as the composition figure,
   and the impurity remainder is a derived number, not a measurement.
   ========================================================================== */
@media (max-width: 760px) {
  .cc-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 8px; }
}
/* Below ~700px a 2-up chart panel is under ~280px, where its 9 text labels render
   ~5px and had to be stripped. Brandon wants the FULL chart on mobile, so the
   panels go single-column there and the chart gets the whole card width (313px at
   375) - i.e. desktop scale, every label present and the same size as desktop. */
@media (max-width: 700px) {
  .cc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cc-grid { gap: 7px; }
  .cc-grid > .cc-panel { padding: 10px 9px; }
  .cc-panel__hd { margin-bottom: 6px; }
  .cc-panel__hd b { font-size: 12px; }

  /* axis text and callouts are KEPT - the chart is full width here now */
  .cc-key { font-size: 8.5px; letter-spacing: .05em; }
  .cc-key::before { width: 6px; height: 6px; }

  .cc-fig { margin: 0 0 8px; gap: 2px 6px; }
  .cc-fig__v { font-size: 1.5rem; }
  .cc-fig__k { font-size: 11px; }
  /* the side figure sits back on the value row - it was pushed to its own line
     only because the panel was 151px wide; at full width it fits inline */
  .cc-fig__side { font-size: 11px; }
  .cc-scale { font-size: 8.5px; margin-bottom: 4px; }
  .cc-bar { height: 20px; }
  .cc-bar__fill i { font-size: 9.5px; }
  .cc-bar__legend { margin-top: 6px; font-size: 10.5px; line-height: 1.35; }
}

/* the panel header wrapped to two lines at ~151px, and because the two panels are
   height-matched that cost BOTH of them ~23px. The legend dot label is decoration,
   so it goes rather than the title. */


/* ============================================================================
   Fact rows: stack the value under the label in NARROW cells.
   A long value ("White lyophilized powder", "Confirmed (LC-MS/MS)") was wrapping
   to 2-3 right-aligned lines beside a left-aligned label. The flex gap keeps them
   9px apart so they never literally touch, but a ragged 3-line block hard against
   the label reads as broken - and "LC-MS/MS" was breaking mid-token.
   🔵 Keyed to a CONTAINER query, not a media query, because the cell width does
   not track the viewport: a 300px rail card has narrow cells at EVERY viewport,
   while the featured card's cells are roomy at 1280 and cramped at 900. A media
   query cannot tell those apart. Browsers without container queries keep the
   current inline layout, which is what ships today.
   ========================================================================== */
/* 🔴 flex-wrap and row-gap live on the CELL, OUTSIDE the query: a container
   query styles the container's DESCENDANTS, never the container itself, so putting
   .cc-facts > div rules inside @container silently did nothing - the cell kept
   nowrap while dd was told flex-basis:100%, which is worse than the original.
   Wrapping is a no-op at wide sizes because dd stays flex:0 1 auto there. */
.cc-facts > div { container-type: inline-size; flex-wrap: wrap; row-gap: 2px; }
/* ⚠️ an inline-size container query measures the CONTENT box, so a 287px cell
   with 13px side padding queries as 261px. 235px is the point where the widest
   label ("Appearance", ~70px) plus the longest routine value ("White lyophilized
   powder", ~145px) plus the 9px gap stops fitting on one line. */
@container (max-width: 235px) {
  .cc-facts__i { align-self: flex-start; margin-top: 1px; }
  .cc-facts dd {
    flex: 1 0 100%;            /* own line, full width */
    margin-left: 0;
    text-align: left;
    padding-left: 25px;        /* 16px icon + 9px gap, so the value aligns under the label */
  }
}
/* only break a word that genuinely cannot fit, instead of anywhere it likes -
   "anywhere" is what split Confirmed (LC-MS/MS) across lines mid-token */
.cc-facts dd { overflow-wrap: break-word; }

/* ============================================================================
   Size picker: 4 variants go 2x2 on phones, not 3 + 1 orphan.
   The grid is repeat(auto-fit, minmax(102px,1fr)), which fits THREE columns in a
   ~311px buy box - fine for 1, 2, 3, 5 or 6 variants, but a 4-variant product
   (GLP-2 TZ) rendered 3 across with the fourth card stranded alone on row two.
   Keyed off data-n, written by both variant-row emitters, so it is explicit
   rather than depending on :has() support - and any future 4-variant product
   picks it up with no further change.
   ℹ️ Only n=4 is overridden on purpose: 3 across is already a clean single row
   for 3, and 5 (3+2) and 6 (3+3) are balanced. Forcing 2 columns on those would
   create the orphan this rule exists to remove.
   ========================================================================== */
@media (max-width: 560px) {
  .variant-row[data-n="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* ⚠️ row-gap widened from 8px: .v-best is absolutely positioned at top:-8px and
       is ~16px tall, so in a single-row layout it hangs into empty space, but on a
       second row it landed 0.7px under the card above - touching, not overlapping,
       which measures as "fine" and looks broken. */
    gap: 20px 8px;
  }
}

/* ============================================================================
   "USA lab test provided by" - top right of every certificate card, in the slot
   the Aspect brand mark used to occupy. Thin outline to match the other COA
   panels. Falls back to the lab NAME when that lab has no artwork in the tree,
   so the module is never a broken image.
   ========================================================================== */
.cc-lab {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 7px;
  background: var(--surface); min-width: 84px; max-width: 44%;
}
/* ⚠️ NOT white-space:nowrap. The caption is ~115px on one line at this size; in
   the featured card at 375px the module resolves to ~61px, so a nowrap caption
   overflowed 63px to the LEFT (align-items:flex-end right-aligns it, so it spills
   leftward and reads as text escaping the box). It wraps to two lines instead. */
.cc-lab__k {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .09em;
  /* --ink-3, not --ink-faint: at 5-6px this caption was too light to read.
     --ink-3 (#626a79) is the palette's own AA-safe muted step, documented 5.1:1 on
     the surface, so this is a readability fix rather than an arbitrary darkening. */
  text-transform: uppercase; color: var(--ink-3); line-height: 1.15; text-align: right;
  max-width: 100%;
}
/* these are STACKED lockups (mark above wordmark), so a 20px height renders the
   wordmark illegibly - 34px is the smallest at which all three read cleanly */
.cc-lab__img { display: block; height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.cc-lab__nm { font-size: 12px; font-weight: 750; color: var(--ink); line-height: 1.15; text-align: right; }

/* header holds single-line items again, so centre them as before */
.cc-top, .bc-top { align-items: center; }

/* rail cards are 300px - keep the module, shrink it */
.bc-top .cc-lab { padding: 5px 8px 6px; border-radius: 9px; max-width: 52%; }
.bc-top .cc-lab__k { font-size: 7px; letter-spacing: .07em; }
.bc-top .cc-lab__img { height: 24px; }
.bc-top .cc-lab__nm { font-size: 10.5px; }

@media (max-width: 520px) {
  .cc-lab { padding: 5px 8px 6px; }
  .cc-lab__k { font-size: 7.5px; }
  .cc-lab__img { height: 28px; }
  .cc-lab__nm { font-size: 11px; }
}

/* The lab module sits BESIDE the name/lot, filling the white space under the
   Aspect mark, instead of stacking under it and growing the header (Brandon: do
   not increase the header height - there is more than enough room below).
   align-items:flex-end drops it to the lot baseline so it fills downward. */
/* ⚠️ align-items:flex-start, not center. Centring pinned the short LOT text to the
   middle of a row whose height is set by the capsule, so every time the capsule grew
   the name-to-LOT gap grew with it (10.6 -> 16.9px when the capsule went 33 -> 45).
   Top-aligned, the LOT stays put and the capsule extends downward instead. */
.cc-lotrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 2px; }
.cc-lot { min-width: 0; flex: 1 1 auto; }

/* the module now has real width beside the name, so the caption fits on one line
   and the logo can be read at a sensible size */
.cc-lotrow .cc-lab { min-width: 0; max-width: 152px; padding: 6px 10px 7px; }
.cc-lotrow .cc-lab__k { font-size: 7.5px; letter-spacing: .07em; white-space: nowrap; }
.cc-lotrow .cc-lab__img { height: 30px; }
.bcard .cc-lotrow { gap: 10px; }
.bcard .cc-lotrow .cc-lab { max-width: 124px; padding: 5px 8px 6px; }
.bcard .cc-lotrow .cc-lab__k { font-size: 6.5px; letter-spacing: .05em; }
.bcard .cc-lotrow .cc-lab__img { height: 22px; }
@media (max-width: 520px) {
  .cc-lotrow { gap: 10px; }
  .cc-lotrow .cc-lab { max-width: 132px; }
  .cc-lotrow .cc-lab__k { font-size: 7px; letter-spacing: .05em; }
  .cc-lotrow .cc-lab__img { height: 26px; }
}
/* last resort: if the caption still cannot fit on one line in a very narrow card,
   let it wrap rather than escape the box (the failure mode fixed earlier) */
@media (max-width: 360px) {
  .cc-lotrow .cc-lab__k { white-space: normal; }
}

/* On phones the caption sits BESIDE the logo rather than above it (Brandon), which
   keeps the module short and uses the horizontal room that is actually available
   next to the name. The caption wraps to two lines in that narrower column - it is
   ~105px on one line and the text column is ~85px - which is intended: two short
   lines beside a 28px logo balances better than one long line above it. */
@media (max-width: 520px) {
  /* ⚠️ 132px, not wider: the product name needs ~180px to stay on ONE line and the
     row is ~311px at 375. A 151px module pushed the name to two lines - a
     regression the vertical layout did not have. */
  .cc-lotrow .cc-lab { flex-direction: row; align-items: center; gap: 7px; max-width: 132px; }
  .cc-lotrow .cc-lab__k { white-space: normal; text-align: right; flex: 1 1 auto; min-width: 0; }
  .cc-lotrow .cc-lab__img { flex: none; height: 28px; }
  .cc-lotrow .cc-lab__nm { text-align: right; flex: 1 1 auto; min-width: 0; }
  .bcard .cc-lotrow .cc-lab { max-width: 126px; gap: 6px; }
  .bcard .cc-lotrow .cc-lab__img { height: 24px; }
}

/* ℹ️ The hero band trim that used to live here is REVERTED. It was only ever
   borrowed height to pay for the lab module beside the LOT line; now the capsule is
   smaller the band goes back to its original padding (Brandon). The purity figure,
   the seal and the copy were never touched by the trim, so nothing else moves. */

/* Tighten name -> LOT, and shrink the lab capsule (Brandon).
   Two things were spacing them apart, not one: the card's own 12px flex gap, AND
   the LOT text being vertically centred in a row made tall by the capsule. So the
   capsule comes down in size and the row is pulled up against the flex gap.
   The featured card is the only one with a flex gap to fight - the rail card's
   .cc is gap:0 and spaces by margin, so it must NOT get the negative pull. */
/* The -8px pull put the LOT 4px under the name, which read as too tight once the
   row was also top-aligned. Brandon asked for it back toward the original spacing:
   +5px against the 12px flex gap lands it at ~17px, between the original 25.6 and
   the 4px it had shrunk to. Featured card only. */
.cc:not(.bc) .cc-lotrow { margin-top: 5px; }

.cc-lab { padding: 4px 8px 5px; }
.cc-lotrow .cc-lab { padding: 4px 8px 5px; }
.cc-lotrow .cc-lab__k { font-size: 6.5px; letter-spacing: .05em; }
.cc-lotrow .cc-lab__img { height: 24px; }
.bcard .cc-lotrow .cc-lab { padding: 3px 7px 4px; max-width: 118px; }
.bcard .cc-lotrow .cc-lab__k { font-size: 6px; letter-spacing: .04em; }
.bcard .cc-lotrow .cc-lab__img { height: 19px; }
@media (max-width: 520px) {
  .cc-lotrow .cc-lab { max-width: 124px; padding: 4px 7px 5px; }
  .cc-lotrow .cc-lab__img { height: 22px; }
  .bcard .cc-lotrow .cc-lab { max-width: 116px; }
  .bcard .cc-lotrow .cc-lab__img { height: 18px; }
}

/* desktop keeps the stacked capsule (caption above logo), so trim its internal gap
   and logo a touch as well - same intent, just the layout that applies above 520px */
@media (min-width: 521px) {
  .cc-lotrow .cc-lab { gap: 3px; }
  .cc-lotrow .cc-lab__img { height: 22px; }
  .bcard .cc-lotrow .cc-lab__img { height: 18px; }
}

/* Capsule enlarged (Brandon: there is plenty of space).
   🔵 It can grow now because the compound name moved to its OWN full-width line -
   the capsule shares its row only with the LOT text (~90px of a ~311px row), so
   ~200px is free. It could NOT grow upward into the gap under the Aspect mark:
   that gap is the name's own line, and the longest name ("Thymosin Alpha-1 10mg",
   255px) would run straight under the capsule. Growing in place is the safe axis. */
.cc-lotrow .cc-lab { max-width: 190px; padding: 7px 11px 8px; gap: 9px; }
.cc-lotrow .cc-lab__k { font-size: 7.5px; letter-spacing: .07em; }
.cc-lotrow .cc-lab__img { height: 32px; }
.bcard .cc-lotrow .cc-lab { max-width: 152px; padding: 6px 9px 7px; gap: 7px; }
.bcard .cc-lotrow .cc-lab__k { font-size: 6.5px; letter-spacing: .05em; }
.bcard .cc-lotrow .cc-lab__img { height: 25px; }
@media (min-width: 521px) {
  .cc-lotrow .cc-lab { gap: 5px; }
  .cc-lotrow .cc-lab__img { height: 30px; }
  .bcard .cc-lotrow .cc-lab__img { height: 24px; }
}
@media (max-width: 520px) {
  .cc-lotrow .cc-lab { max-width: 178px; padding: 6px 10px 7px; gap: 8px; }
  .cc-lotrow .cc-lab__img { height: 30px; }
  .bcard .cc-lotrow .cc-lab { max-width: 146px; }
  .bcard .cc-lotrow .cc-lab__img { height: 24px; }
}

/* Featured certificate card, DESKTOP: the capsule goes horizontal like the phone
   layout - caption left, logo right - and gets much bigger. It has the room: the
   card is ~600px wide and the capsule only shares its row with the ~170px LOT
   line, so ~390px is free and it was using 136px.
   🔵 Scoped to .cc:not(.bc): a rail card is 300px, where a nowrap caption (~118px)
   plus a 40px logo plus padding is ~185px against ~168px of usable row - it would
   not fit, so the rail keeps the stacked capsule on desktop. */
@media (min-width: 521px) {
  .cc:not(.bc) .cc-lotrow .cc-lab {
    flex-direction: row; align-items: center;
    max-width: 268px; padding: 9px 13px; gap: 12px;
  }
  .cc:not(.bc) .cc-lotrow .cc-lab__k {
    font-size: 8.5px; letter-spacing: .09em; white-space: nowrap;
    text-align: right; flex: 0 1 auto;
  }
  .cc:not(.bc) .cc-lotrow .cc-lab__img { height: 42px; flex: none; }
  .cc:not(.bc) .cc-lotrow .cc-lab__nm { font-size: 13px; text-align: right; }
}

/* Rail cards, DESKTOP: capsule goes horizontal with the caption on TWO lines to the
   left of the logo, and trades width for a taller, more visible logo (24 -> 34px).
   ⚠️ The width budget is real and measured: the card is 300px (268 inner), the
   widest LOT string renders at 121px, so the capsule must stay under ~137px or it
   starts squeezing the LOT. 128px leaves ~10px of slack. */
@media (min-width: 521px) {
  .bcard .cc-lotrow .cc-lab {
    flex-direction: row; align-items: center;
    max-width: 118px; padding: 13px 8px; gap: 7px;
  }
  .bcard .cc-lotrow .cc-lab__k {
    /* 5.5px so "USA LAB TEST" / "PROVIDED BY" land on exactly TWO lines inside the
       ~44px column. ⚠️ At 6px it measured 2 lines in an iframe sweep but rendered 3
       on the live page: an iframe has NO SCROLLBAR, so the sweep was testing ~15px
       wider than the real viewport. Verify tight text fits on a real window. */
    font-size: 5.5px; letter-spacing: .03em; white-space: normal;
    text-align: right; flex: 0 1 44px; min-width: 0;
  }
  .bcard .cc-lotrow .cc-lab__img { height: 30px; flex: none; }
  .bcard .cc-lotrow .cc-lab__nm { font-size: 10px; text-align: right; }
}

/* Rail LOT drops a step so the capsule can be bigger without wrapping it.
   Measured: the widest lot ("LOT GTT1500-WM2607-001") renders 152px at 11px, which
   left only 106px of the 268px inner width - not enough for a 2-line caption beside
   a readable logo. At 10px it is ~138px, which frees the ~118px the capsule needs.
   Featured card keeps its 12px LOT; only the 300px rail card is squeezed. */
@media (min-width: 521px) {
  .bcard .cc-lot { font-size: 10px; }
}

/* 🔴 REGRESSION FIX: the enlarged capsule was wrapping the LOT number on phones.
   Measured budgets, worst-case lot ("LOT GTT1500-WM2607-001"):
     featured 375: inner 311 - lot ~166px@12 - 10 gap = 135px for the capsule
     rail     375: inner 248 - lot ~138px@10 - 10 gap = 100px for the capsule
   The capsule was 178 / 146, so 9-10 lots per product were breaking onto a second
   line. Sized to the budget instead, and the rail LOT drops to 10px on phones too.
   ⚠️ This went unnoticed because the sweeps selected `.cc`, and a rail card is
   `.bcard.bc` - `.cc` never matched one. Rail cards are `.cc, .bc` now. */
@media (max-width: 520px) {
  .bcard .cc-lot { font-size: 10px; }
  .cc:not(.bc) .cc-lotrow .cc-lab { max-width: 134px; }
  .cc:not(.bc) .cc-lotrow .cc-lab__k { flex: 0 1 46px; font-size: 6.5px; }
  .cc:not(.bc) .cc-lotrow .cc-lab__img { height: 26px; }
  .bcard .cc-lotrow .cc-lab { max-width: 100px; padding: 6px 7px; gap: 6px; }
  .bcard .cc-lotrow .cc-lab__k { flex: 0 1 38px; font-size: 6px; letter-spacing: .03em; }
  .bcard .cc-lotrow .cc-lab__img { height: 22px; }
}

/* PHONES: the rail capsule gets its OWN row under the LOT.
   🔴 A 280px rail card cannot do caption-beside-logo: after reserving ~138px for
   the widest LOT, ~100px remains, which forced the caption to 4 lines beside a
   22px logo. On its own row it has the full ~248px, so the caption sits on ONE
   line next to a properly sized logo. Costs ~34px of card height, which is cheap
   in a horizontally-scrolling rail.
   The featured card keeps the side-by-side layout - 311px inner is enough - just
   with a wider caption column so it lands on two lines rather than three. */
@media (max-width: 520px) {
  .bcard .cc-lotrow { flex-direction: column; align-items: stretch; gap: 8px; }
  /* ⚠️ NOT a wide one-line strip. On its own row the capsule had ~248px and used
     160x41 - a 3.9:1 rectangle. The caption wraps to two lines instead so the block
     is squarer (~2.2:1) and the logo can be much taller. Text stays left of it. */
  .bcard .cc-lotrow .cc-lab {
    align-self: flex-end; max-width: 152px; padding: 10px; gap: 8px;
  }
  .bcard .cc-lotrow .cc-lab__k {
    flex: 0 1 46px; white-space: normal; text-align: right;
    font-size: 6.5px; letter-spacing: .04em;
  }
  .bcard .cc-lotrow .cc-lab__img { height: 40px; }

  /* squarer here too - taller logo, narrower caption column. Width stays inside the
     ~135px the LOT budget allows on a 311px row. */
  .cc:not(.bc) .cc-lotrow .cc-lab { max-width: 132px; padding: 7px 8px; gap: 7px; }
  .cc:not(.bc) .cc-lotrow .cc-lab__k { flex: 0 1 46px; font-size: 6px; letter-spacing: .03em; }
  .cc:not(.bc) .cc-lotrow .cc-lab__img { height: 34px; }
}

/* Lab logos scaled back a step (Brandon, seen on the glutathione card). They were
   pushed up while chasing "more visible"; at 40px on a phone rail card the mark
   dominated the capsule it sits in. ℹ️ Sizing is global, not per product - there is
   no per-lab or per-product logo rule, so this applies everywhere the mark appears. */
.cc-lotrow .cc-lab__img { height: 30px; }
.bcard .cc-lotrow .cc-lab__img { height: 26px; }
@media (min-width: 521px) {
  .cc:not(.bc) .cc-lotrow .cc-lab__img { height: 36px; }
  .bcard .cc-lotrow .cc-lab__img { height: 26px; }
}
@media (max-width: 520px) {
  .cc:not(.bc) .cc-lotrow .cc-lab__img { height: 28px; }
  .bcard .cc-lotrow .cc-lab__img { height: 32px; }
}

/* ⚠️ 6px of side padding, not 8, and a 40px caption column: the longest lot
   ("LOT GTT1500-WM2607-001") needs 150px on a rail card and was getting 147.4 -
   short by 2.6px, so it wrapped on that one product while every other lot fit.
   Trimming the capsule frees ~6px and clears it with margin. */
@media (min-width: 521px) {
  .bcard .cc-lotrow .cc-lab { padding: 11px 6px; }
  .bcard .cc-lotrow .cc-lab__k { flex: 0 1 40px; }
}

/* 🔴 Structural fix, replacing pixel-shaving: the LOT can never wrap, and the
   capsule absorbs the pressure instead. Sizing the capsule so the longest lot
   "just fits" left 0.1px of slack - one font-rendering difference from breaking
   again. Now the lot is nowrap and the capsule is shrinkable down to a floor, so
   a longer lot steals width from the capsule rather than breaking itself. */
.cc-lotrow .cc-lot { white-space: nowrap; }
.cc-lotrow .cc-lab { flex: 0 1 auto; min-width: 84px; }

/* Capsule floor raised on desktop rail cards: at the 84px base floor the longest
   lot squeezed it to 97.6px, which pushed the caption to THREE lines on that one
   product. 106px still fits the widest lot (150 + 10 gap + 106 = 266 of 268) and
   holds the caption at two. */
@media (min-width: 521px) {
  .bcard .cc-lotrow .cc-lab { min-width: 106px; }
}

/* ⚠️ The caption column must FLEX, not carry a fixed basis. A `flex: 0 1 40px`
   basis capped it below the ~46px actually available inside a 106px capsule, so it
   wrapped to three lines while the box had room to spare. Filling the remainder
   after the logo lets it settle on two. */
@media (min-width: 521px) {
  .bcard .cc-lotrow .cc-lab { max-width: 108px; }
  /* back up to 6.5px: 5px was only needed to squeeze two lines into a FIXED 40px
     basis, and that basis is gone - the column flexes now, so the text can be
     legible again. */
  /* 6px, not 6.5: the larger size pushed 1-2 rail cards per product to a THREE-line
     caption. Readability here comes from the colour (--ink-3, 5.44:1) rather than
     from a half-pixel of size that costs a consistent two-line block. */
  .bcard .cc-lotrow .cc-lab__k { flex: 1 1 auto; min-width: 0; font-size: 6px; letter-spacing: .03em; }
}

/* 🔴 GLOBAL: the caption column never carries a fixed flex-basis.
   Every `flex: 0 1 <N>px` on .cc-lab__k capped the text below the width its own
   capsule actually had, wrapping it to three lines while the box had room spare -
   it happened on desktop rail, then again on mobile (10-12 cards per product).
   Filling the remainder after the logo is self-correcting at every capsule size. */
.cc-lab__k { flex: 1 1 auto !important; min-width: 0; }

/* The LOT holds its natural width; the capsule is the element that yields.
   `.cc-lot` was `flex: 1 1 auto`, so with `white-space: nowrap` it could be shrunk
   BELOW its own text and clip (NAD's long lot on a 375px featured card). Making it
   flex: 0 0 auto pushes the pressure onto the capsule, which has a min-width floor
   and degrades gracefully. */
.cc-lotrow .cc-lot { flex: 0 0 auto; }

/* Last 4px for the caption column on desktop rail cards: at a 7px gap and 6px side
   padding the caption had ~46px, and "USA LAB TEST" measures ~45px at 6px/.03em -
   close enough that the two pH Solutions lots (widest logo) tipped to three lines.
   Tightening the gap and padding buys the margin without shrinking the text. */
@media (min-width: 521px) {
  .bcard .cc-lotrow .cc-lab { padding: 11px 5px; gap: 5px; }
}

/* ============================================================================
   ZERO-GROWTH PASS (Brandon: eliminate the height the lab capsule added above the
   hero band). Target: the region from card top to hero top returns to its pre-lab
   size - featured 135.5 desktop / 120 mobile, rail 102.3 / 99.6.
   Two levers, because no single one is enough:
     1. the capsule becomes COMPACT so it barely exceeds the LOT line it sits on
        (small logo, two-line caption, tight padding) - and goes back INLINE on the
        phone rail card, giving up its own row;
     2. the spacing I added around the LOT line is handed back.
   🔵 Overlaying the capsule beside the NAME was measured and rejected: the longest
   name ("BPC-157 / TB-500 20mg") is 252px of a 294px inner width on a 375px
   featured card, so there is no room for anything to its right.
   ========================================================================== */
@media (max-width: 520px) {
  /* phone rail card gives up its own row and goes back beside the LOT */
  .bcard .cc-lotrow { flex-direction: row; align-items: flex-start; gap: 8px; }
  .bcard .cc-lotrow .cc-lab { align-self: auto; }
}
.cc-lotrow { margin-top: 0; }
.cc:not(.bc) .cc-lotrow { margin-top: -6px; }

.cc-lotrow .cc-lab { padding: 4px 7px; gap: 6px; }
.cc-lotrow .cc-lab__img { height: 20px; }
.bcard .cc-lotrow .cc-lab { padding: 4px 6px; gap: 5px; max-width: 96px; }
.bcard .cc-lotrow .cc-lab__img { height: 18px; }
@media (min-width: 521px) {
  .cc:not(.bc) .cc-lotrow .cc-lab { max-width: 190px; padding: 4px 8px; gap: 7px; }
  .cc:not(.bc) .cc-lotrow .cc-lab__img { height: 22px; }
  .bcard .cc-lotrow .cc-lab { padding: 4px 6px; gap: 5px; max-width: 100px; }
  .bcard .cc-lotrow .cc-lab__img { height: 18px; }
}
@media (max-width: 520px) {
  .cc:not(.bc) .cc-lotrow .cc-lab { max-width: 130px; padding: 4px 7px; gap: 6px; }
  .cc:not(.bc) .cc-lotrow .cc-lab__img { height: 20px; }
  .bcard .cc-lotrow .cc-lab { max-width: 94px; }
  .bcard .cc-lotrow .cc-lab__img { height: 18px; }
}

/* the last ~6px: pull the hero band up against the card's 12px flex gap. After the
   compact capsule the region was +4.1 to +6.2 over pre-lab; this closes it out. */
.cc-hero:not(.bc-hero) { margin-top: -6px; }

/* pH Solutions is a wider mark than the other two (199x120 vs 172x120), so at the
   same height it stole 4px from the caption and wrapped it to 3 lines on a 280px
   rail card. Cap the logo BOX rather than tuning per lab, so a future lab logo of
   any aspect ratio cannot re-open this. */
.bcard .cc-lotrow .cc-lab__img { max-width: 26px; }
@media (max-width: 520px) { .bcard .cc-lotrow .cc-lab { max-width: 100px; } }

/* Rail hero: .bc-hero sets margin-top:12px at line 1098 and has the SAME specificity
   as .cc-hero, so a bare .cc-hero pull REPLACES that 12px instead of adding to it
   (that is what put the capsule 6px on top of the hero band). Trim it here instead,
   matching the featured card's 6px, which pays back the height the taller capsule
   costs the LOT row. */
.bc-hero { margin-top: 6px; }

/* Long lot numbers must not crush the capsule. .cc-lot is nowrap/no-shrink (a lot
   number is a verification id and must stay readable in one piece), so an 18-char lot
   like GTT1500-WM2607-001 was squeezing the capsule to 89px and wrapping its caption
   to four lines. Give the capsule a floor wide enough for the two-line caption beside
   the logo and let it absorb the squeeze instead. The row must stay nowrap: flex-wrap
   picks line breaks from HYPOTHETICAL sizes before any shrinking, so wrap sent the
   capsule to its own line (+29px) rather than letting it shrink into the space there. */
.cc-lotrow { flex-wrap: nowrap; }
.cc-lotrow .cc-lot { flex-shrink: 0; }
.cc-lotrow .cc-lab { min-width: 96px; }
.cc:not(.bc) .cc-lotrow .cc-lab { min-width: 96px; }

/* Below ~360px a long lot leaves under 70px beside it, which is less than the capsule
   needs for even a two-line caption, so it would deform rather than shrink. At that
   width let the row wrap after all: a card with a long lot puts the capsule on its own
   line and stays legible, while short-lot cards still sit inline (wrap only breaks a
   line when the items' hypothetical sizes genuinely do not fit). Height matters least
   on the smallest screens; a four-line caption looks broken at any size. */
@media (max-width: 360px) { .cc-lotrow { flex-wrap: wrap; } }