/* =====================================================================
   STORE.CSS: Altara Research's layer over the shared template.

   base.css and components.css are shared by every store and untouched.
   This file is Altara's design: a high-key white page with navy panels,
   the logo's orbit as the recurring motif, mono for instrument output,
   and every commerce component (variants, tiers, sets, the builder, the
   catalog toolbar, the product page, cart, checkout, lab reports).

   No color is named here. Everything is a token from tokens.css.
   ===================================================================== */

/* ---- 0. Type and globals ---------------------------------------------- */

body { font-family: var(--font); background: var(--bg); color: var(--text-body); font-size: var(--fs-body); }
h1, h2, h3, h4,
.brandmark__text, .pcard__title, .card h3, .gate__content h1,
.cart-drawer__title, .faq-item summary {
  font-family: var(--font-display);
}
h1, h2 { font-weight: var(--fw-black); letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
h3 { text-wrap: balance; }
.dot { color: var(--accent-fill); }
.eyebrow {
  font: var(--fw-med) 11px/1.3 var(--font-mono); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { background: var(--accent-fill); }
.btn {
  font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: none;
  letter-spacing: var(--track-btn); font-size: 14px; border-radius: var(--radius-sm);
  min-height: 48px;
}
.btn--solid:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent-fill); color: var(--text); background: var(--accent-soft); }
.btn--sm { padding: 10px 14px; font-size: 12px; min-height: 40px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn__sep { opacity: .5; margin: 0 4px; }
.section--tight { padding-top: 48px; padding-bottom: 48px; }
.section--alt { background: var(--bg-alt); border-color: var(--line-faint); }
[hidden] { display: none !important; }
a { color: var(--accent); }
::selection { background: var(--accent-fill); color: var(--white); }

/* The logo's orbit: a dotted arc ending in a filled node. Decoration. */
.orbit { position: absolute; pointer-events: none; color: var(--accent-fill); fill: var(--accent-fill); opacity: .22; }
.orbit circle { fill: currentColor; }
.orbit .orbit__end { fill: var(--cyan); }

/* ---- 1. Top bar and header -------------------------------------------- */

.topbar { background: var(--navy-deep); border-bottom: 1px solid var(--line-faint); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
.topbar__ruo { margin: 0; font: var(--fw-med) 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.topbar__facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--text-dim); }
.topbar__facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--sky); vertical-align: 1px; }

.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner { padding-top: 12px; padding-bottom: 12px; gap: 24px; }
.brandmark { gap: 10px; color: var(--text); }
.brandmark img.brandmark__mark { height: 40px; width: auto; }
.brandmark__text { font-size: 20px; font-weight: var(--fw-black); letter-spacing: -.02em; color: var(--navy); line-height: 1; }
.brandmark__text b { font-weight: var(--fw-black); color: var(--navy); }
.nav { gap: 6px; margin-left: auto; }
.nav a {
  font: var(--fw-bold) 14px/1 var(--font-display); letter-spacing: 0; text-transform: none;
  color: var(--text); padding: 12px 12px; border-radius: var(--radius-sm);
}
.nav a::after { display: none; }
.nav a:hover { background: var(--accent-soft); color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.header-actions { gap: 8px; }
.icon-btn { color: var(--text); border-radius: var(--radius-sm); min-width: 44px; min-height: 44px; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.cart-btn { border-radius: var(--radius-sm); text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 14px; min-height: 44px; }
.cart-btn:hover { background: var(--btn-bg-hover); color: var(--btn-ink); }
.cart-btn__count { background: var(--white); color: var(--navy); border-radius: var(--radius-pill); }
.ordering-closed {
  padding: 11px 16px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--navy);
  background: linear-gradient(90deg, var(--ice), var(--ice-2), var(--ice)); border-bottom: 1px solid var(--line-soft);
}
.drawer { background: var(--white); }
.drawer .brandmark img.brandmark__mark { height: 34px; }

/* ---- 2. Home hero ----------------------------------------------------- */

.ahero { position: relative; overflow: hidden; background: var(--ice-wash); border-bottom: 1px solid var(--line-soft); }
.ahero .orbit { width: min(720px, 80vw); right: -6%; top: 6%; opacity: .16; }
.ahero__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(28px, 3vw, 44px);
}
.ahero__copy { max-width: 600px; }
.ahero h1 { font-size: var(--fs-hero); line-height: 1.04; margin: 18px 0 22px; }
.ahero h1 em {
  font-style: normal; background: var(--ribbon); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--royal);
}
.ahero__lede { font-size: 17px; line-height: 1.7; max-width: 50ch; margin: 0 0 30px; color: var(--text-body); }
.ahero .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ahero__art img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lift); border: 1px solid var(--line-soft);
}
.ledger {
  position: relative; list-style: none; margin: 0 0 clamp(32px, 4vw, 52px); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ledger li { padding: 20px 22px; }
.ledger li + li { border-left: 1px solid var(--line-soft); }
.ledger b { display: block; font: var(--fw-black) clamp(28px, 3vw, 38px)/1 var(--font-display); color: var(--navy); letter-spacing: -.02em; }
.ledger span { display: block; margin-top: 8px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }

/* ---- 3. Page head ----------------------------------------------------- */

.phead { position: relative; overflow: hidden; background: var(--ice-wash); border-bottom: 1px solid var(--line-soft); }
.phead .orbit { width: min(560px, 70vw); right: -4%; top: -10%; }
.phead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ribbon); opacity: .9; }
.phead__in { position: relative; z-index: 1; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); }
.phead h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; margin-top: 14px; max-width: 18ch; }
.phead__lede { max-width: 62ch; margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--text-body); }

/* ---- 4. Product cards ------------------------------------------------- */

.pgrid { gap: 18px; }
.pcard { padding: 18px 18px 20px; background: var(--panel); }
.pcard__media { margin: -18px -18px 12px; overflow: hidden; background: var(--bg); }
.pcard__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 42%;
  transition: transform .6s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__cat {
  font-family: var(--font-display); font-size: var(--fs-micro);
  letter-spacing: .24em; text-transform: uppercase; color: var(--text-faint);
}
.pcard__title { margin: 6px 0 12px; font-size: 16px; letter-spacing: .04em; font-weight: var(--fw-black); }
.pcard__vars { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; min-height: 30px; }
.pcard__price { color: var(--accent); font-weight: var(--fw-bold); font-family: var(--font-display); font-size: 17px; }
.badge { z-index: 2; background: var(--accent); color: var(--btn-ink); font-family: var(--font-display); }

.vpill {
  font: var(--fw-med) 11px/1 var(--font-display);
  letter-spacing: .06em;
  padding: 8px 12px;
  color: var(--text-body);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.vpill:hover { border-color: var(--accent-line); color: var(--text); }
.vpill.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.vpill.is-static { cursor: default; }

/* ---- 5. Bundles ------------------------------------------------------- */

.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: var(--border); border-radius: var(--radius);
  transition: border-color var(--t-med), transform var(--t-med);
}
.bcard:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.bcard .badge { top: 14px; right: 14px; }
.bcard__media {
  display: block; padding: 22px 16px 10px;
  background: radial-gradient(70% 80% at 50% 70%, color-mix(in srgb, var(--accent-fill) 16%, transparent), transparent 70%), var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.bcard__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.bcard__save {
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.bcard__title { margin: 10px 0 8px; font-size: 20px; font-weight: var(--fw-black); }
.bcard__title a { color: var(--text); text-decoration: none; }
.bcard__blurb { font-size: var(--fs-small); line-height: 1.6; margin-bottom: 14px; }
.bcard__list { list-style: none; padding: 0; margin: 0 0 18px; border-top: 1px solid var(--line-soft); }
.bcard__list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-faint); font-size: var(--fs-small);
}
.bcard__list a { color: var(--text); text-decoration: none; }
.bcard__list a:hover { color: var(--accent); }
.bcard__list span { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
.bcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bcard__price ins { text-decoration: none; font: var(--fw-black) 22px/1 var(--font-display); color: var(--text); }
.bcard__price del { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--text-faint); }

/* Vials side by side. Each image is cropped to a narrow 2:5 column around
   the vial and may only SHRINK, so any number of vials fits its card. The
   earlier version overlapped them with negative margins and a ten-vial
   bundle spilled out of the card. */
.bimgs {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 2px; width: 100%; overflow: hidden;
}
.bimgs img {
  flex: 0 1 96px; min-width: 0; width: 96px; height: auto;
  aspect-ratio: 2 / 5; object-fit: cover; object-position: 50% 55%;
}
.bimgs__more {
  flex: none; align-self: center; margin-left: 10px;
  font: var(--fw-bold) 13px/1 var(--font-display); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: var(--radius-pill); padding: 8px 10px;
}
.bimgs--mini { width: 96px; flex: none; gap: 1px; }
.bimgs--mini img { flex-basis: 30px; }
.bimgs--mini .bimgs__more { display: none; }
.bimgs--big img { flex-basis: 170px; }
.bimgs--big .bimgs__more { font-size: 16px; }

/* Build-your-own band on the homepage */

/* ---- 6. Catalogue toolbar -------------------------------------------- */

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.toolbar__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-f {
  font: var(--fw-med) 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 14px; color: var(--text-body); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-pill); cursor: pointer;
}
.chip-f span { color: var(--text-faint); margin-left: 4px; }
.chip-f:hover { color: var(--text); border-color: var(--accent-line); }
.chip-f.is-on { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.chip-f.is-on span { color: inherit; opacity: .6; }
.toolbar__sort {
  display: flex; align-items: center; gap: 10px;
  font: var(--fw-med) 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
}
.toolbar__sort select {
  font: 13px var(--font); color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
}
.cat-empty { text-align: center; padding: 40px 0; color: var(--text-dim); }

/* ---- 7. Product page -------------------------------------------------- */

.pdp-sec { padding-top: 32px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-faint); margin-bottom: 26px; }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.pdp {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px); align-items: start;
}
.pdp__gallery { position: sticky; top: 100px; }
.pdp__media {
  position: relative; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.pdp__media > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.pdp__media--set {
  background: radial-gradient(60% 70% at 50% 70%, color-mix(in srgb, var(--accent-fill) 18%, transparent), transparent 70%), var(--bg);
  padding: 20px;
}
.mchips { position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.mchips span {
  font: var(--fw-med) 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 10px; color: var(--text); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.pdp__thumbs { display: flex; gap: 10px; margin-top: 10px; }
.thumb {
  width: 76px; height: 76px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-on { border-color: var(--accent); }

.pbadges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pbadge {
  font: var(--fw-med) 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 10px; color: var(--text-dim); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.pbadge--gold { color: var(--btn-ink); background: var(--accent); border-color: var(--accent); }
.pdp__title { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; margin: 10px 0 12px; }
.pdp__lede { font-size: 15px; line-height: 1.7; max-width: 52ch; }
.pdp__pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 22px 0 6px; }
.pdp__price { font: var(--fw-black) 34px/1 var(--font-display); color: var(--accent); }
.pdp__compare { font-size: 17px; color: var(--text-faint); }
.pdp__per { font-size: var(--fs-small); color: var(--text-dim); }

.opt { margin-top: 24px; }
.opt__label {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px;
  font: var(--fw-bold) 11px/1.3 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--text);
}
.opt__label span { font-weight: 400; letter-spacing: .04em; text-transform: none; font-family: var(--font); color: var(--text-dim); }
.vpills { display: flex; flex-wrap: wrap; gap: 8px; }
.vpills .vpill { padding: 12px 18px; font-size: 13px; }


.btn--atc { margin-top: 22px; padding-top: 19px; padding-bottom: 19px; font-size: 13px; }
.delivery {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: var(--fs-small); color: var(--text-body);
}
.delivery svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.delivery b { color: var(--text); }
.coalink {
  display: inline-block; margin-top: 10px; font-size: var(--fs-small);
  color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line);
}
.shipbar { margin-top: 18px; }
.shipbar__msg { font-size: 12px; color: var(--text-dim); margin-bottom: 7px; }
.shipbar__track { height: 3px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.shipbar__track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s var(--ease); }

.fbt { margin-top: 26px; padding: 18px; border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--accent-soft); }
.fbt__title { font: var(--fw-bold) 11px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.fbt__row { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.fbt__row + .fbt__row { border-top: 1px solid var(--line-soft); }
.fbt__mid { flex: 1; min-width: 0; }
.fbt__name { font: var(--fw-bold) 14px var(--font-display); color: var(--text); text-decoration: none; }
.fbt__parts { font-size: 12px; color: var(--text-dim); margin: 2px 0 4px; }
.fbt__price { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.fbt__price ins { text-decoration: none; color: var(--accent); font-weight: var(--fw-bold); }
.fbt__price del { color: var(--text-faint); }
.fbt__price span { font-size: 11px; color: var(--text-dim); }

.trustrow {
  list-style: none; padding: 0; margin: 24px 0 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.trustrow li {
  padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-size: 11px; line-height: 1.45; color: var(--text-dim);
}
.trustrow b { display: block; font: var(--fw-bold) 12px var(--font-display); color: var(--text); margin-bottom: 3px; }
.trustrow a { color: var(--accent); }
.pdp__info .faq-item { margin-bottom: 8px; }

.specs { margin: 0; }
.spec { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-faint); font-size: 13px; }
.spec dt { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding-top: 2px; }
.spec dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

.pdp__detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pdp__detail h2 { margin: 12px 0 18px; }
.prose p { line-height: 1.8; margin-bottom: 14px; }
.prose__note { font-size: var(--fs-small); color: var(--text-dim); border-left: 2px solid var(--accent-line); padding-left: 14px; }
.prose--page { max-width: 760px; }
.prose--page h2 { font-size: 22px; margin: 34px 0 12px; }
.footer-notice--card { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; background: var(--panel); }

.bcomps { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.bcomp { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.bcomp + .bcomp { border-top: 1px solid var(--line-soft); }
.bcomp img { width: 44px; height: 60px; object-fit: cover; border-radius: 3px; }
.bcomp div { flex: 1; min-width: 0; }
.bcomp a { display: block; font: var(--fw-bold) 14px var(--font-display); color: var(--text); text-decoration: none; }
.bcomp span { font-size: 12px; color: var(--text-dim); }
.bcomp .bcomp__price { color: var(--text-body); font-size: 13px; }

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); transform: translateY(100%); transition: transform var(--t-med) var(--ease);
}
.stickybar.is-on { transform: none; }
.stickybar__in { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.stickybar img { width: 38px; height: 52px; object-fit: cover; border-radius: 3px; }
.stickybar__mid { flex: 1; min-width: 0; }
.stickybar__name { font: var(--fw-black) 15px var(--font-display); color: var(--text); }
.stickybar__sub { font-size: 12px; color: var(--text-dim); }
.stickybar__total { font: var(--fw-bold) 17px var(--font-display); color: var(--accent); }

/* ---- 8. Builder ------------------------------------------------------- */

.builder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.builder__sum {
  position: sticky; top: 100px; padding: 24px; background: var(--panel);
  border: 1px solid var(--accent-line); border-radius: var(--radius);
}
.builder__title { display: flex; justify-content: space-between; font: var(--fw-black) 18px var(--font-display); color: var(--text); margin-bottom: 12px; }
.builder__title span { color: var(--accent); }
.builder__list { list-style: none; padding: 0; margin: 0 0 16px; border-top: 1px solid var(--line-soft); }
.builder__list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-faint); font-size: 13px; }
.builder__list b { color: var(--text); font-weight: 600; }
.builder__empty { color: var(--text-dim); justify-content: flex-start !important; }
.builder__prog { margin-bottom: 14px; }
.builder__bar { height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.builder__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s var(--ease); }
.builder__msg { font-size: 12px; margin-top: 8px; color: var(--text-dim); }
.builder__msg b { color: var(--accent); }
.builder__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.builder__row--save { color: var(--accent); }
.builder__row--total { font: var(--fw-black) 20px var(--font-display); color: var(--text); padding: 12px 0 16px; }
.builder__share {
  display: block; width: 100%; margin-top: 10px; padding: 10px; cursor: pointer;
  background: none; border: 0; color: var(--text-dim); font-size: 12px; text-decoration: underline;
}
.builder__share[disabled] { opacity: .35; cursor: not-allowed; }
.builder__fine { font-size: 11px; color: var(--text-faint); margin-top: 8px; }

/* ---- 9. Closing band -------------------------------------------------- */

.closing { border-top: 1px solid var(--line-faint); background: var(--bg); overflow: hidden; }
.closing__in {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center; gap: clamp(20px, 4vw, 64px);
  padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px);
}
.closing__copy { max-width: 460px; }
.closing h2 { font-size: var(--fs-h2); margin: 14px 0 14px; }
.closing p { margin-bottom: 26px; }

/* ---- 10. Footer, drawer, gate ---------------------------------------- */

.footer-logo { width: 190px; height: auto; margin-bottom: 18px; }
.cart-viewall { display: block; text-align: center; margin: 10px 0 4px; font-size: 12px; color: var(--text-dim); }
.line__meta { font-size: 11px; color: var(--text-dim); margin: 2px 0 6px; line-height: 1.4; }
.cartline__meta { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.line img, .rec img { object-fit: cover; }
/* Gate brand panel: the logo, not a product. A single vial here read as
   an ad for one compound bolted onto a legal check (client, 1 Oct 2026). */
.gate__mark {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.gate__mark::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 115%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-fill) 16%, transparent), transparent 72%);
  pointer-events: none;
}
.gate__logo { position: relative; width: min(82%, 340px); height: auto; }
@media (max-width: 820px) {
  .gate__mark { flex: 0 0 auto; }
  .gate__mark::before { display: none; }
  .gate__logo { width: auto; height: 48px; }
}
.draftbanner {
  border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
  background: var(--accent-soft); padding: 14px 16px; margin-bottom: 26px;
  font-size: var(--fs-small); color: var(--text); border-radius: var(--radius);
}
.notfound { display: flex; gap: 12px; flex-wrap: wrap; }
.legal-updated { font-size: 12px; color: var(--text-dim); margin: 0 0 18px; }
.prose--page ul { padding-left: 20px; display: grid; gap: 8px; margin: 0 0 16px; }
.prose--page a { color: var(--accent); }
.prose--page ul.assumptions li { color: var(--text-dim); }

/* ---- 11. Cart page and checkout (adapted from DCL brand.css) ---------- */

.cartgrid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 360px); gap: clamp(28px, 4vw, 60px); align-items: start; }
.cartlines { min-width: 0; }
.cartline { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.cartline:first-child { padding-top: 0; }
.cartline:last-child { border-bottom: 0; }
.cartline__img { width: 84px; height: 112px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface); }
.cartline__mid { min-width: 0; }
.cartline__name { display: block; font: var(--fw-bold) 15px var(--font-display); color: var(--text); text-decoration: none; margin-bottom: 4px; }
.cartline__name:hover { color: var(--accent); }
.cartline__each, .cartline__tier, .cartline__next { font-size: 11px; font-family: var(--font-mono); letter-spacing: .04em; }
.cartline__each { color: var(--text-dim); margin-bottom: 2px; }
.cartline__tier { color: var(--accent); }
.cartline__next { color: var(--text-faint); }
.cartline .qty { margin-top: 12px; }
.cartline__right { text-align: right; white-space: nowrap; }
.cartline__price { font-weight: var(--fw-bold); color: var(--text); }
.cartline__price del { display: block; font-weight: 400; color: var(--text-faint); font-size: var(--fs-small); }
.cartline__remove { margin-top: 8px; background: none; border: 0; padding: 6px 0; font-size: 10px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); cursor: pointer; }
.cartline__remove:hover { color: var(--text-error); }
.cartsum { position: sticky; top: 104px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 24px; }
.cartsum__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: var(--fs-small); color: var(--text-body); border-bottom: 1px solid var(--line-soft); }
.cartsum .eyebrow + .cartsum__row { border-top: 1px solid var(--line-soft); margin-top: 14px; }
.cartsum__row--off { color: var(--accent); }
.cartsum__row--total { border-bottom: 0; font-size: 19px; font-weight: var(--fw-bold); color: var(--text); }
.cartsum__note, .cartsum__fine { font-size: 11px; color: var(--text-faint); margin: 8px 0 14px; }
.cartsum .btn--block { margin-top: 6px; }
.cartsum__back { display: block; text-align: center; margin-top: 14px; font-size: var(--fs-small); color: var(--text-dim); }
.cartempty { text-align: center; padding: clamp(30px, 6vw, 70px) 0; }
.cartempty h2 { margin-bottom: 10px; }
.cartempty p { color: var(--text-dim); max-width: 44ch; margin: 0 auto 26px; }
.coform { min-width: 0; }
.coform__h { font-size: 21px; margin: 34px 0 14px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.coform > .coform__h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.coform__note { font-size: var(--fs-small); color: var(--text-dim); margin: -6px 0 16px; }
.cfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.cfield--wide { grid-column: 1 / -1; }
.cfield__label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.cfield__input { width: 100%; padding: 12px 13px; font: inherit; font-size: 16px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cfield__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cfield__err { min-height: 15px; margin-top: 4px; font-size: 11px; color: var(--text-error); }
.cfield.is-bad .cfield__input { border-color: var(--text-error); }
.copay { margin-bottom: 8px; }
.paymock { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 18px; background: var(--surface); }
.paymock__head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.paymock__note { font-size: var(--fs-small); color: var(--text-dim); margin-bottom: 14px; }
.paymock__choices { display: grid; gap: 8px; }
.paymock__choice { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--text); cursor: pointer; min-height: 44px; }
.coform__error { margin: 16px 0 10px; font-size: var(--fs-small); color: var(--text-error); }
.coform__error:empty { margin: 0; }
.coform__fine { margin-top: 14px; font-size: 11px; color: var(--text-faint); }
.cosum__line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; font-size: var(--fs-small); color: var(--text-body); }
.cosum__qty { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.cosum__name { min-width: 0; }
.cosum__val { white-space: nowrap; }
.testflag { border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); padding: 14px 16px; margin-bottom: 26px; font-size: var(--fs-small); color: var(--text); }
.ordercard { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 24px; max-width: 520px; margin-bottom: 26px; }
.ordercard__ref { font-family: var(--font-mono); font-size: 24px; letter-spacing: .04em; color: var(--text); margin: 6px 0 12px; }
.ordercard__meta { font-size: var(--fs-small); color: var(--text-dim); margin-bottom: 14px; }
.ordercard__lines { border-top: 1px solid var(--line-soft); padding-top: 10px; }

/* ---- 11b. COA history, opt-ins --------------------------------------- */

.coa__intro { max-width: 64ch; margin: -18px 0 22px; }
.coa__head { font: var(--fw-bold) 12px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.coa__wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.coa__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.coa__table th { text-align: left; font: var(--fw-bold) 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.coa__table td { padding: 12px 14px; border-bottom: 1px solid var(--line-faint); color: var(--text-body); white-space: nowrap; }
.coa__table tr:last-child td { border-bottom: 0; }
.coa__table a { color: var(--text); text-decoration: none; }
.coa__batch { font-family: var(--font-mono); color: var(--text); }
.coa__str { color: var(--text-dim); font-size: 12px; margin-left: 4px; }
.coa__pdf { color: var(--accent) !important; border-bottom: 1px solid var(--accent-line); }
.coa__na { color: var(--text-faint); }
.coa__empty { padding: 20px 22px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--text-dim); max-width: 760px; }

.cfield--check { margin-top: -4px; }
.cfield__check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: var(--fs-small); color: var(--text); }
.cfield__check input { accent-color: var(--accent-fill); width: 18px; height: 18px; margin-top: 1px; flex: none; }
.cfield__fine { font-size: 11px; line-height: 1.5; color: var(--text-faint); margin: 6px 0 0 28px; max-width: 70ch; }

/* ---- 11c. Research-use disclaimer and entry gate ----------------------
   The disclaimer is required VERBATIM in header, footer, product pages,
   cart and checkout (docs/STORE-COMPLIANCE-CHECKLIST.md).                */

.ruo-bar {
  text-align: center; padding: 8px 16px;
  font: var(--fw-med) 10px/1.4 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); background: var(--bg-alt); border-bottom: 1px solid var(--line-faint);
}
.ruo-line { margin: 10px 0 0; font-size: 11px; color: var(--text-dim); text-align: center; }
.cart-ruo { font-size: 11px; color: var(--text-dim); margin: -4px 0 12px; }
.gate__ruo { margin: 18px 0 0; font-size: 11px; color: var(--text-dim); }
/* Styled like the template's gate h1, but NOT a heading: the gate is the
   first element on every page, so an h1 here would be every page's h1. */
.gate__title { margin: 0 0 16px; font: var(--fw-black) clamp(26px, 3.4vw, 42px)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--text); }

/* Painted by the <head> script before the page: no flash of content. */
html.alt-gate { overflow: hidden; }
html.alt-gate #researcher-gate { display: flex; }

/* ---- 12. Responsive --------------------------------------------------- */

@media (max-width: 1024px) {
  .phero__in, .closing__in { grid-template-columns: minmax(0, 1fr); }
  .phero__art { order: -1; margin: 0 -10px -20px; }
  .closing__art { order: -1; }
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder { grid-template-columns: 1fr; }
  .builder__sum { position: static; }
  .pdp, .pdp__detail, .cartgrid { grid-template-columns: minmax(0, 1fr); }
  .pdp__gallery, .cartsum { position: static; }
  .pdp__media > img { aspect-ratio: 1 / 1; }
}
@media (max-width: 768px) {
  .bgrid { grid-template-columns: minmax(0, 1fr); }
  .trustrow { grid-template-columns: minmax(0, 1fr); }
  .spec { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cartline { grid-template-columns: 64px minmax(0, 1fr); }
  .cartline__img { width: 64px; height: 86px; }
  .cartline__right { grid-column: 2; text-align: left; }
  .cfields { grid-template-columns: minmax(0, 1fr); }
  .stickybar img { display: none; }
  .toolbar { align-items: flex-start; }
  .pcard__vars .vpill { padding: 7px 9px; font-size: 10px; }
  .pcard__title { font-size: 13px; }
}


/* =====================================================================
   AWAITING LOT VERIFICATION

   A strength whose current PepBoss lot is not attested against a
   laboratory report stays listed and is not orderable. Availability is
   per STRENGTH: GHK-Cu 100 ships while GHK-Cu 50 does not.

   Not "out of stock", which would also be untrue. There may be stock;
   what is missing is the attestation.
   ===================================================================== */
.pcard__pending {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid currentColor;
  opacity: .72;
}

.vpill.is-pending {
  opacity: .45;
  text-decoration: line-through;
  cursor: not-allowed;
}

.pending {
  border: 1px solid currentColor;
  border-left-width: 3px;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
  opacity: .9;
}
.pending__head {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.pending p { margin: 0; font-size: 14px; line-height: 1.6; }

.stickybar__pending {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
  white-space: nowrap;
}

/* Ported from Retabionix, 8 Oct 2026 (forms, help center, wholesale, accounts, admin). */
/* =====================================================================
   FORMS, NEWSLETTER, HELP WIDGET, WHOLESALE, ADMIN
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fform { margin: 18px 0 8px; }
.fform--card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ffield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ffield--wide { grid-column: 1 / -1; }
.ffield label { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.ffield__opt { text-transform: none; letter-spacing: 0; font-family: var(--font); }
.ffield input, .ffield select, .ffield textarea, .news input[type="email"], .help__search {
  width: 100%; min-height: 48px; padding: 12px 14px; font: 16px/1.4 var(--font); color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ffield textarea { resize: vertical; min-height: 96px; }
.ffield input:focus, .ffield select:focus, .ffield textarea:focus, .news input:focus, .help__search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ffield.is-bad input, .ffield.is-bad select, .ffield.is-bad textarea { border-color: var(--text-error); }
.ffield__err { font-size: 12px; color: var(--text-error); }
.ffield__hint { margin: 0; font-size: 12px; color: var(--text-dim); }
.fattest { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px 16px; margin: 18px 0 14px; }
.fattest legend { padding: 0 6px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.fcheck { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 14px; color: var(--text); cursor: pointer; }
.fcheck input, .news__consent input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.fnote { font-size: 13px; color: var(--text-dim); margin: 14px 0; }
.fstatus { margin: 10px 0 0; font-size: 14px; }
.fstatus.is-bad { color: var(--text-error); }
.fdone { margin: 18px 0; padding: 18px 20px; border-radius: var(--radius-sm); border-left: 3px solid var(--accent); background: var(--surface-hover); color: var(--text); font-size: 15px; line-height: 1.6; }

/* Newsletter, at the top of the footer */
.footer-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: 56px 0 44px; border-bottom: 1px solid var(--line-soft); }
.footer-news h2 { font-size: clamp(26px, 3vw, 36px); margin: 6px 0 10px; }
.footer-news p { margin: 0; color: var(--text-body); }
.news__label { display: block; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.news__row { display: flex; gap: 10px; }
.news__row input { flex: 1; min-width: 0; border-radius: var(--radius-pill); padding-left: 18px; }
.news__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-body); cursor: pointer; }

/* Help widget: bottom right */
.help { position: fixed; right: 16px; bottom: 16px; z-index: calc(var(--z-sticky) + 5); }
.help__toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; cursor: pointer;
  border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--btn-ink);
  font: var(--fw-med) 15px/1 var(--font-display); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45);
}
.help__toggle svg { width: 22px; height: 22px; }
.help.is-open .help__toggle { display: none; }
.help__panel {
  position: absolute; right: 0; bottom: 0; width: min(400px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
}
.help__panel[hidden] { display: none; }
.help__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.help__title { font: var(--fw-bold) 19px/1.2 var(--font-display); color: var(--text); }
.help__sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.help__view { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 18px; overflow-y: auto; }
.help__view[hidden] { display: none; }
.help__search { background: var(--surface); border-color: var(--line); color: var(--text); }
.help__list { display: flex; flex-direction: column; gap: 6px; }
.help__item { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.help__item summary { cursor: pointer; padding: 12px 14px; min-height: 44px; font-size: 14px; color: var(--text); list-style: none; }
.help__item summary::-webkit-details-marker { display: none; }
.help__item[open] summary { color: var(--accent); }
.help__ans { padding: 0 14px 12px; font-size: 13px; line-height: 1.6; color: var(--text-body); }
.help__ans p { margin: 0 0 8px; }
.help__ans a { color: var(--accent); }
.help__none { font-size: 13px; color: var(--text-dim); }
.help__back { align-self: flex-start; background: none; border: 0; color: var(--text-dim); cursor: pointer; min-height: 44px; padding: 0; font-size: 13px; }
.help .fform { margin: 0; }
.help .fgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.help .ffield input, .help .ffield select, .help .ffield textarea { background: var(--surface); color: var(--text); border-color: var(--line); }
.help .ffield select option { color: var(--btn-ink); }
.help .fnote { font-size: 12px; margin: 10px 0; }
.help .btn { width: 100%; }

/* Wholesale */
.rhero--wholesale { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.wstats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wstats li { padding: 18px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line-soft); }
.wstats b { display: block; font: var(--fw-med) 40px/1 var(--font-display); color: var(--accent); letter-spacing: -.03em; }
.wstats span { display: block; margin-top: 6px; font-size: 13px; color: var(--text-body); }
.wbens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wben { padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-soft); }
.wben b { display: block; font: var(--fw-bold) 18px/1.25 var(--font-display); color: var(--text); margin-bottom: 8px; }
.wben span { font-size: 14px; color: var(--text-body); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wfit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wfit__col { padding: 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-soft); }
.wlist { list-style: none; margin: 8px 0 0; padding: 0; }
.wlist li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--line-faint); font-size: 15px; color: var(--text); }
.wlist li::before { position: absolute; left: 0; top: 9px; font-weight: 700; }
.wlist--yes li::before { content: "\2713"; color: var(--ok); }
.wlist--no li::before { content: "\2715"; color: var(--text-error); }
.wfit__note { margin: 14px 0 0; font-size: 13px; color: var(--text-dim); }
.wapply { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.wapply__copy { position: sticky; top: 130px; }
.wapply__small { font-size: 13px; color: var(--text-dim); }
.wapply__small a { color: var(--accent); }

/* Admin inbox */
.admin-body { background: var(--bg); }
.admin { padding-top: 28px; padding-bottom: 60px; }
.admin__top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.admin__top .logo { height: 28px; width: auto; }
.admin__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.admin__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; color: var(--text-dim); }
.admin__wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--panel); }
.admin__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin__table th { text-align: left; padding: 10px 12px; font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin__table td { padding: 10px 12px; border-bottom: 1px solid var(--line-faint); vertical-align: top; color: var(--text); }
.admin__long { min-width: 280px; white-space: pre-wrap; }
.admin__muted { color: var(--text-dim); }

@media (max-width: 1024px) {
  .wbens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhero--wholesale, .wapply, .footer-news { grid-template-columns: minmax(0, 1fr); }
  .wapply__copy { position: static; }
}
@media (max-width: 640px) {
  .fgrid, .wfit, .wbens, .steps--4 { grid-template-columns: minmax(0, 1fr); }
  .news__row { flex-direction: column; }
  .news__row .btn { width: 100%; }
  .help__toggle span { display: none; }
  .help__toggle { padding: 0; width: 52px; height: 52px; justify-content: center; }
}
/* Product pages: lift the help button above the sticky add-to-cart bar when it shows. */
body:has(.stickybar.is-on) .help { bottom: 84px; }

/* Account (/account/): optional accounts, points, wholesale status */
.acct { display: flex; flex-direction: column; gap: 18px; }
.acct--narrow { max-width: 520px; }
.acct__intro p { margin: 0 0 6px; color: var(--text-body); max-width: 68ch; }
.acct__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.acct__card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.acct__card .fform { margin: 8px 0 0; }
.acct__card .btn--block { margin-top: 16px; }
.acct__h { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 6px; }
.acct__lede { margin: 0; color: var(--text-dim); }
.acct__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.acct__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.acct__stat { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; }
.acct__stat p { margin: 8px 0 0; color: var(--text-body); }
.acct__stat .btn { margin-top: 12px; }
.acct__big { font: 600 clamp(34px, 4vw, 48px)/1.1 var(--font); color: var(--text); margin-top: 8px; }
.acct__big--word { font-size: clamp(24px, 3vw, 32px); }
.acct__orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.acct__order { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--panel); }
.acct__orderhead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.acct__status { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.acct__ordermeta { margin: 6px 0 0; font-size: 14px; color: var(--text-body); overflow-wrap: anywhere; }
.acct__ledger summary { cursor: pointer; font-weight: 600; color: var(--text); }
.acct__ledger ul { margin: 10px 0 0; padding-left: 18px; color: var(--text-body); font-size: 14px; }
.linkbtn { background: none; border: 0; padding: 0; margin-top: 14px; color: var(--accent); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.fstatus.is-ok { color: var(--text); }
@media (max-width: 760px) {
  .acct__grid, .acct__stats { grid-template-columns: minmax(0, 1fr); }
  .acct__card .fgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Checkout: reward points in the summary */
.corewards { margin: 12px 0 0; font-size: 14px; color: var(--text-body); }
.corewards p { margin: 0 0 8px; }
.corewards__use { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.corewards__use select { min-height: 40px; padding: 6px 10px; font: 15px var(--font); color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* Checkout: the account step (accounts required, 8 Oct 2026). */
.coacct { margin-bottom: 8px; }
.coacct .cfield__fine { margin-left: 0; }
.coacct__in { font-size: 14px; color: var(--text-body); margin: 0 0 16px; }
.coacct__in .linkbtn { margin-top: 0; margin-left: 4px; }
.coacct__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 8px; }
.coacct__links .linkbtn { margin-top: 4px; }

/* Footer: social profiles (brand.social), set in type like the rest. */
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.footer-social__label { font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }
.footer-social a { font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; transition: color .2s; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--accent); }

/* Checkout while ordering is closed to the public (8 Oct 2026). */
.coclosed { max-width: 640px; margin: 0 auto; text-align: center; }
.coclosed__eyebrow { font-size: var(--fs-micro); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.coclosed .btn { margin: 8px 6px 0; }
.cotester { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--radius); font-size: 13px; color: var(--text-body); }
.cotester a { color: var(--accent); }

/* Site-wide notice while ordering is closed (ordering.closedNote). */
.ordering-closed { padding: 10px 16px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); }

/* /test-drive/: the tester walkthrough (8 Oct 2026). */
.td-mode { margin: 0 0 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.td-mode.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
.td-mode a { color: var(--accent); }
.td-statuslist, .td-steps { list-style: none; margin: 0; padding: 0; }
.td-status { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.td-status strong { color: var(--text); }
.td-pill { flex: none; min-width: 52px; text-align: center; padding: 3px 8px; border-radius: var(--radius-pill); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); color: var(--text-dim); }
.td-status--live .td-pill { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.td-status--soon .td-pill { color: var(--accent); border-color: var(--accent-line); }
.td-step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.td-num { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent); font-weight: 700; }
.td-step h3 { margin: 4px 0 8px; }
.td-note { font-size: 13px; color: var(--text-dim); }
.td-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }


/* =====================================================================
   ALTARA LAYER (9 Oct 2026)
   Components the home page and reports need, and the light-ground
   corrections to rules inherited from the Pinnacle copy.
   ===================================================================== */

/* ---- Section heads ---------------------------------------------------- */
.sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 34px; }
.sechead h2 { margin: 10px 0 0; }

/* ---- Product cards: white cards with a soft lift ---------------------- */
.pgrid { gap: 18px; }
.pcard {
  padding: 16px 16px 18px; background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med);
}
.pcard:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--accent-line); }
.pcard__media { margin: -16px -16px 12px; border-radius: var(--radius) var(--radius) 0 0; background: var(--ice); }
.pcard__cat { font: 500 10px/1.3 var(--font-mono); letter-spacing: .12em; color: var(--text-dim); }
.pcard__title { font-size: 17px; letter-spacing: -.01em; }
.pcard__title a { color: var(--text); text-decoration: none; }
.pcard__price { color: var(--accent); font-size: 18px; }
.badge { background: var(--navy); color: var(--white); border-radius: var(--radius-pill); font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; }
.vpill { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--text); min-height: 36px; }
.vpill.is-on { color: var(--white); background: var(--navy); border-color: var(--navy); }
/* Contrast: no opacity on text. The inherited .45 opacity measured under AA. */
.vpill.is-pending { opacity: 1; color: var(--text-faint); border-style: dashed; }
.vpill.is-pending.is-on { color: var(--white); background: var(--text-dim); border-color: transparent; }
.pcard__pending, .stickybar__pending {
  opacity: 1; color: var(--text-dim); border: 1px dashed var(--line); background: var(--bg-alt);
  font: 500 11px/1.3 var(--font-mono); letter-spacing: .06em; border-radius: var(--radius-sm);
}
.pending { opacity: 1; color: var(--text); border-color: var(--line); border-left-color: var(--accent-fill); background: var(--bg-alt); border-radius: var(--radius-sm); }
.pending__head { color: var(--accent); }
.pbadge { font-family: var(--font-mono); letter-spacing: .06em; color: var(--text-dim); }
.pbadge--gold { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pbadge--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.pdp__media, .thumb { background: var(--ice); }
.pdp__price { color: var(--accent); }
.mchips span { background: color-mix(in srgb, var(--white) 82%, transparent); color: var(--navy); }
.spec dt, .opt__label, .ffield label, .cfield__label { font-family: var(--font-mono); }
.coa__head { color: var(--accent); font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; }

/* ---- Sets ------------------------------------------------------------- */
.bcard { background: var(--white); box-shadow: var(--shadow); border-color: var(--line-soft); }
.bcard:hover { box-shadow: var(--shadow-lift); }
.bcard__media, .pdp__media--set { background: radial-gradient(70% 80% at 50% 70%, color-mix(in srgb, var(--bright) 10%, transparent), transparent 70%), var(--ice); }
.bcard__save { color: var(--accent); font-family: var(--font-mono); font-weight: 500; }
.builder__sum { background: var(--white); box-shadow: var(--shadow); }

/* ---- Chain: batch to bottle ------------------------------------------- */
.chain {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.chain::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--bright) 0 3px, transparent 3px 12px);
}
.chain__step { position: relative; padding: 0 6px 0 0; }
.chain__n {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px;
  border-radius: 50%; background: var(--white); border: 2px solid var(--bright);
  font: 500 15px/1 var(--font-mono); color: var(--royal); box-shadow: 0 0 0 6px var(--white);
}
.chain__step:last-child .chain__n { background: var(--bright); color: var(--white); border-color: var(--bright); }
.chain h3 { font-size: 18px; margin: 0 0 8px; color: var(--text); }
.chain p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-body); max-width: 34ch; }

/* ---- Class cards ------------------------------------------------------ */
.classgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.classcard {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 190px;
  padding: 22px 22px 20px; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius);
  text-decoration: none; color: var(--text-body); overflow: hidden;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.classcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ribbon); opacity: 0; transition: opacity var(--t-med); }
.classcard:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lift); }
.classcard:hover::after { opacity: 1; }
.classcard__n { font: 500 12px/1 var(--font-mono); color: var(--accent); letter-spacing: .08em; }
.classcard h3 { margin: 6px 0 0; font-size: 21px; color: var(--text); }
.classcard__note { margin: 0; font: 500 12px/1.4 var(--font-mono); color: var(--text-dim); letter-spacing: .02em; }
.classcard__eg { margin: 8px 0 0; font-size: 14px; line-height: 1.55; }
.classcard__go { margin-top: auto; padding-top: 12px; font: var(--fw-bold) 14px/1 var(--font-display); color: var(--accent); }

/* ---- Set band (navy) -------------------------------------------------- */
.setband { background: var(--navy-grad); }
.setband__in {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px);
}
.setband h2 { font-size: var(--fs-h2); margin: 12px 0 14px; max-width: 20ch; }
.setband h2 em { font-style: normal; color: var(--sky); }
.setband p { max-width: 54ch; margin: 0 0 26px; color: var(--text-body); }
.setband__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.setband .btn--ghost { color: var(--white); border-color: var(--line); }
.setband .btn--ghost:hover { background: var(--surface-hover); }

/* ---- FAQ: heading column + list --------------------------------------- */
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.faq__head { position: sticky; top: 110px; }
.faq__head h2 { margin: 12px 0 14px; }
.faq__head p { color: var(--text-dim); max-width: 36ch; }
.faq-item { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); margin-bottom: 10px; }
.faq-item summary { font-weight: var(--fw-bold); color: var(--text); text-transform: none; letter-spacing: 0; font-size: 16px; min-height: 56px; }
.faq-item[open] { border-color: var(--accent-line); box-shadow: var(--shadow); }
.faq-item[open] summary { color: var(--accent); }

/* ---- Closing (navy) --------------------------------------------------- */
.closing { background: var(--navy-grad); border: 0; }
.closing__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.closing h2 { max-width: 16ch; }
.closing p { color: var(--text-body); max-width: 44ch; }
.closing__art img { display: block; width: 100%; height: auto; border-radius: var(--radius-panel); -webkit-mask-image: none; mask-image: none; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--navy-deep) 80%, transparent); }

/* ---- Lab report cards and library (ported from Retabionix) ------------ */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.rcard {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px; background: var(--white); box-shadow: var(--shadow);
  border: 1px solid var(--line-soft); border-top: 3px solid var(--line); border-radius: var(--radius-sm);
}
.rcard--lot { border-top-color: var(--bright); }
.rcard__kind { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.rcard--lot .rcard__kind { color: var(--accent); }
.rcard__kind span { color: var(--text-dim); letter-spacing: .04em; }
.rcard__title { font-size: 19px; margin: 0; }
.rcard__title a { text-decoration: none; color: var(--text); }
.rcard__title a:hover { color: var(--accent); }
.rcard__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.rcard__meta dt, .rcard__res dt { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.rcard__meta dd { margin: 3px 0 0; font: 500 13px/1.35 var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.rcard__test { margin: 0; font-size: 13px; color: var(--text-dim); }
.rcard__results { margin: 0; border-top: 1px solid var(--line-faint); }
.rcard__res { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-faint); }
.rcard__res dt { padding-top: 2px; }
.rcard__res dd { margin: 0; font: 600 14px/1.35 var(--font-mono); color: var(--text); text-align: right; }
.rcard__note, .rcard__rel { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-body); }
.rcard__verify { margin-top: auto; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--ice); font-size: 13px; line-height: 1.6; color: var(--text); }
.rcard__verify span { display: block; font: 500 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.rcard__verify a { color: var(--accent); }
.rcard__verify b { font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
.rcard__file { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.coa + .coa { margin-top: 0; }
.coa__intro { margin: -14px 0 22px; max-width: 70ch; }
.rsearch { max-width: 640px; margin: 0 0 24px; }
.rsearch__label { display: block; font: 500 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; }
.rsearch__input { width: 100%; min-height: 52px; padding: 12px 18px; font: 16px var(--font); color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rsearch__input:focus { outline: 2px solid var(--accent-fill); outline-offset: 1px; }
.rsearch__status { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }

/* ---- Footer and gate (navy) ------------------------------------------- */
.site-footer { background: var(--navy-grad); border-top: 0; }
.footer-logo { width: 200px; height: auto; }
.footer-col h4 { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.footer-col h4::before { background: var(--sky); }
.footer-col a { color: var(--text-body); min-height: 44px; display: flex; align-items: center; }
.footer-col a:hover { color: var(--sky); }
.footer-notice__label { color: var(--accent); font-family: var(--font-mono); }
.footer-bottom { color: var(--text-dim); }
.footer-news .btn--solid, .news__row .btn--solid { background: var(--white); color: var(--navy); border-color: var(--white); }
.news__row input[type="email"] { background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.news__row input::placeholder { color: var(--text-faint); }

.gate { background: var(--white); color: var(--text-body); }
.gate__brand { background: var(--navy-grad); border-right: 0; }
.gate__mark::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--bright) 30%, transparent), transparent 72%); }
.gate__logo { width: min(78%, 300px); }
.gate__est { color: var(--text-dim); font-family: var(--font-mono); letter-spacing: .12em; }
.gate__tagline { color: var(--text); font: var(--fw-bold) 18px/1.4 var(--font-display); max-width: 300px; }
.gate__title { text-transform: none; letter-spacing: -.02em; color: var(--navy); }
.gate__checks label { color: var(--text); }
.gate__checks input { accent-color: var(--bright); }

/* ---- Cart, checkout, help: light-ground corrections -------------------- */
.cart-drawer, .search-overlay { background: var(--white); }
.reward__bar { background: var(--line-soft); }
.reward__bar i, .shipbar__track i, .builder__bar i { background: var(--ribbon); }
.cartsum { background: var(--white); box-shadow: var(--shadow); }
.help__toggle { background: var(--navy); color: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); }
.help__panel { background: var(--white); box-shadow: var(--shadow-lift); border-radius: var(--radius); }
.draftbanner { border-radius: var(--radius-sm); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav a { padding: 12px 8px; font-size: 13px; }
}
@media (max-width: 1024px) {
  .ahero__in, .closing__in, .setband__in, .faq__in { grid-template-columns: minmax(0, 1fr); }
  .ahero__art { order: -1; }
  .closing__art { order: -1; }
  .faq__head { position: static; }
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .chain::before { display: none; }
  .classgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger li:nth-child(3) { border-left: 0; }
  .ledger li:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 900px) {
  .topbar__facts { display: none; }
  .topbar__in { justify-content: center; text-align: center; }
}
@media (max-width: 768px) {
  .brandmark__text { font-size: 17px; }
  .brandmark img.brandmark__mark { height: 34px; }
  .chain { grid-template-columns: minmax(0, 1fr); }
  .classgrid { grid-template-columns: minmax(0, 1fr); }
  .classcard { min-height: 0; }
  .rcard__meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ahero h1 { font-size: clamp(34px, 9vw, 44px); }
}
@media (max-width: 420px) {
  .brandmark__text { display: none; }
  .ledger li { padding: 16px; }
}

.pcard__title { text-transform: none; }
@media (min-width: 1025px) { .pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tap targets: 44px minimum (DESIGN.md). Hit areas extended with an
   invisible ::after so the visual size and the layout do not move. */
.brandmark { min-height: 44px; min-width: 44px; }
.cart-btn { min-width: 44px; justify-content: center; }
.vpill { position: relative; }
.vpill::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.pcard__title a, .rcard__title a, .bcard__title a { position: relative; }
.pcard__title a::after, .rcard__title a::after, .bcard__title a::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.chip-f { min-height: 44px; }
.btn--sm { min-height: 44px; }
.crumbs a { position: relative; }
.crumbs a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -12px; }
.coalink { display: inline-flex; align-items: center; min-height: 44px; }
.cart-viewall, .linkbtn { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.toolbar__sort select { min-height: 44px; }
.pcard__title a::after, .crumbs a::after { left: -8px; right: -8px; }


/* =====================================================================
   13. CLIENT CHANGE LIST, 13 OCT 2026
   Compact catalog head, family chips, the cart rule, the set builder
   (one row per strength, steppers, lot status), cart and account notes.
   ===================================================================== */

/* Compact page head: products above the fold on the catalog and builder. */
.chead { background: var(--ice-wash); border-bottom: 1px solid var(--line-soft); }
.chead__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; padding-top: 26px; padding-bottom: 18px; }
.chead h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; margin: 0; }
.chead__lede { margin: 0; flex: 1 1 360px; max-width: 70ch; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.catsec { padding-top: 18px; }

/* One row of chips that scrolls sideways rather than wrapping into three. */
.toolbar { gap: 12px; margin-bottom: 20px; padding-bottom: 14px; flex-wrap: nowrap; }
.toolbar__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; min-width: 0; flex: 1 1 auto;
  padding-bottom: 4px; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.toolbar__chips .chip-f, .famchips .chip-f { flex: none; white-space: nowrap; padding: 9px 12px; }
.toolbar__tools { display: flex; gap: 8px; flex: none; }
.toolbar__search input {
  font: 14px var(--font); color: var(--text); background: var(--panel); width: 200px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 9px 14px;
}
.toolbar__search input:focus { outline: 2px solid var(--accent-line); border-color: var(--accent); }

.famrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 30px; }
.famrow__label { font: var(--fw-med) 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.famchips { display: flex; flex-wrap: wrap; gap: 8px; }
.famchips .chip-f { text-decoration: none; }
.sechead__lede { margin: 10px 0 0; max-width: 62ch; color: var(--text-body); font-size: 15px; }

/* The cart rule, stated the same way everywhere. */
.tierchips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; }
.tierchips li { padding: 8px 12px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  background: var(--accent-soft); font-size: 12px; color: var(--text-body); }
.tierchips li b { color: var(--accent); font-family: var(--font-display); margin-right: 2px; }
.tierchips--band { align-self: center; }
.tierchips--band li { background: transparent; border-color: color-mix(in srgb, var(--sky) 40%, transparent); color: var(--white); padding: 14px 16px; }
.tierchips--band li b { color: var(--sky); font-size: 22px; display: block; margin-bottom: 4px; }
.volnote { margin: 18px 0 20px; }
.volnote p { margin: 10px 0 0; font-size: 13px; color: var(--text-dim); }
.volnote a { color: var(--accent); font-weight: var(--fw-bold); }
.setnote { font-size: 13px; color: var(--text-dim); margin: 10px 0 0; }
.bcard__note { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }

/* Lot status on a row or a set component. */
.lotchip { display: inline-block; font: var(--fw-med) 10px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; }
.lotchip--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.bcomp .lotchip { margin-left: 8px; }

/* Ready-made sets as one-tap starting points. */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; }
.presets__label { font: var(--fw-med) 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-right: 4px; }
.preset { font: var(--fw-bold) 13px/1.2 var(--font); color: var(--accent); background: var(--panel); cursor: pointer;
  border: 1px solid var(--accent-line); border-radius: var(--radius-pill); padding: 9px 14px; }
.preset:hover { background: var(--accent-soft); border-color: var(--accent); }

/* The builder: a table of strengths, a sticky summary. */
.builder__main { min-width: 0; }
.toolbar--builder { margin-bottom: 12px; }
.builder__rows { border-top: 1px solid var(--line-soft); }
.krow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 10px 6px; border-bottom: 1px solid var(--line-faint); }
.krow.is-on { background: var(--accent-soft); }
.krow__img { width: 44px; height: 66px; object-fit: cover; border-radius: 4px; background: var(--ice); }
.krow__mid { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.krow__name { font: var(--fw-black) 15px var(--font-display); color: var(--text); text-decoration: none; }
.krow__name:hover { color: var(--accent); }
.krow__str { font: 12px var(--font-mono); color: var(--text-dim); }
.krow__price { font: var(--fw-bold) 14px var(--font-display); color: var(--text); text-align: right; min-width: 72px; }
.krow.is-pending .krow__price, .krow.is-pending .krow__name { color: var(--text-dim); }
.krow__locked { font-size: 11px; color: var(--text-faint); width: 128px; text-align: center; }
.krow__qty { border-radius: var(--radius-pill); overflow: hidden; background: var(--panel); }
.krow__qty button { width: 38px; height: 38px; font-size: 18px; }
.krow__qty input { width: 44px; height: 38px; border: 0; text-align: center; font: var(--fw-bold) 15px var(--font-display);
  color: var(--text); background: transparent; -moz-appearance: textfield; }
.krow__qty input::-webkit-outer-spin-button, .krow__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.builder__sum .btn + .builder__share { margin-top: 10px; }
.builder__clear { display: block; margin: 8px auto 0; font-size: 12px; }

/* On a phone the summary sits below 40 rows, so a bar carries the total. */
.kitbar { display: none; }
@media (max-width: 1024px) {
  .kitbar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--panel);
    border-top: 1px solid var(--line); box-shadow: var(--shadow-lift); transform: translateY(110%); transition: transform var(--t-med) var(--ease); }
  .kitbar.is-on { transform: none; }
  body.has-kitbar .help { bottom: 84px; }
  .kitbar__mid { flex: 1; display: flex; flex-direction: column; font-size: 13px; color: var(--text-dim); }
  .kitbar__mid b { color: var(--text); font-family: var(--font-display); font-size: 15px; }
}

/* Cart: the rule, applied, and the next step. */
.cart-tier { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 12px; color: var(--text-body); }
.cart-tier b { color: var(--accent); font-family: var(--font-display); }
.cartsum__tier { font-size: 13px; color: var(--accent); font-weight: var(--fw-bold); margin: 0 0 4px; }
.cartsum__next { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }

/* Account: the researcher statements and the opt-in, as checkboxes. */
.fgroup__label { font: var(--fw-med) 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
.fcheck { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-body); cursor: pointer; }
.fcheck input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent-fill); }
.ffield--opt { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-faint); }
.acct__flag { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--text); font-size: 14px; margin: 0 0 14px; }
.acct__flag p { margin: 0 0 6px; }

@media (max-width: 768px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar__chips { flex: 1 1 100%; }
  .toolbar__tools { flex: 1 1 100%; }
  .toolbar__search { flex: 1; }
  .toolbar__search input { width: 100%; }
  .chead__in { padding-top: 18px; padding-bottom: 12px; }
  .krow { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px 2px; }
  .krow__img { width: 40px; height: 60px; }
  .krow__price { grid-column: 2; grid-row: 2; text-align: left; min-width: 0; font-size: 13px; }
  .krow__qty, .krow__locked { grid-column: 3; grid-row: 1 / span 2; }
  .krow__locked { width: 84px; }
  .famrow { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
  .famchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
    mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .famchips::-webkit-scrollbar { display: none; }
  .presets { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .presets::-webkit-scrollbar, .toolbar__chips::-webkit-scrollbar { display: none; }
  .toolbar__chips { scrollbar-width: none; }
  .presets__label { flex: none; white-space: nowrap; }
  .preset { flex: none; white-space: nowrap; }
  .builder__sum { margin-bottom: 70px; }
}