/* =====================================================================
   STORE.CSS: Pinnacle's layer over the Olympex template.

   base.css and components.css are site-template/ untouched. This file
   adds the brand type, and every commerce component the template did not
   have: variants, tiers, bundles, the builder, the catalogue toolbar,
   the product page, and the cart and checkout pages (adapted from DCL).

   No colour 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); }
h1, h2, h3, h4,
.brandmark__text, .stat__n, .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: -.02em; color: var(--text); }
.dot { color: var(--accent); }
.eyebrow { font-family: var(--font-display); font-weight: var(--fw-med); }
.btn { font-family: var(--font-display); font-weight: var(--fw-bold); }
.btn--sm { padding: 10px 14px; font-size: 10px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn__sep { opacity: .5; margin: 0 4px; }
.section--tight { padding-top: 48px; padding-bottom: 48px; }
[hidden] { display: none !important; }

/* ---- 1. Header -------------------------------------------------------- */

.brandmark { gap: 12px; }
.brandmark__mark { height: 30px; width: auto; }
.brandmark__text { font-weight: var(--fw-black); letter-spacing: .16em; font-size: 15px; line-height: 1; }
.brandmark__text small { display: block; font-size: 8px; letter-spacing: .42em; color: var(--accent); margin-top: 5px; font-weight: var(--fw-med); }
.nav a { font-family: var(--font-display); }

/* ---- 2. Hero ---------------------------------------------------------- */

.phero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--line-faint);
}
.phero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.phero__copy { max-width: 600px; position: relative; z-index: 1; }
.phero h1 { font-size: var(--fs-hero); line-height: 1.02; margin: 18px 0 22px; }
.phero h1 em { font-style: normal; color: var(--accent); }
.phero__lede { font-size: 16px; line-height: 1.7; max-width: 46ch; margin-bottom: 30px; }
.phero .stats { margin-top: 40px; }

/* The image sits in its own column at its natural ratio, so no window
   shape can crop it. The mask fades every edge to transparent, so the
   image's black and the page's black never meet at a visible line. */
.phero__art img, .closing__art img {
  display: block; width: 100%; height: auto;
  /* closest-side: the ellipse ends exactly at the image edge, so the edge
     and the corners are fully transparent and no rectangle can show. */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.phero__art { max-width: 620px; justify-self: end; width: 100%; }

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

.phead { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-faint); }
.phead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.phead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 20%, transparent); }
.phead__in { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 72px; }
.phead h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; margin-top: 16px; }
.phead__lede { max-width: 58ch; margin-top: 16px; font-size: 16px; line-height: 1.7; }

/* ---- 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(--gold) 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 */
.byo-band {
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(60% 120% at 85% 50%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
    var(--band);
}
.byo-band__in {
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-top: 64px; padding-bottom: 64px;
}
.byo-band h2 { font-size: var(--fs-h2); margin: 12px 0 12px; }
.byo-band h2 em { font-style: normal; color: var(--accent); }
.byo-band p { max-width: 46ch; }
.byo-band__tiers { display: flex; gap: 10px; }
.byo-tier {
  text-align: center; padding: 16px 18px; min-width: 104px;
  border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--bg);
}
.byo-tier b { display: block; font: var(--fw-black) 28px/1 var(--font-display); color: var(--accent); }
.byo-tier span { display: block; margin-top: 8px; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }

/* ---- 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, .bitem__sel {
  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(--gold) 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; }

.tiers { display: grid; gap: 8px; }
.tier {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: border-color var(--t-fast), background var(--t-fast);
}
.tier:hover { border-color: var(--accent-line); }
.tier.is-on { border-color: var(--accent); background: var(--accent-soft); }
.tier input { accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.tier__main { flex: 1; min-width: 0; }
.tier__q { display: block; font: var(--fw-bold) 14px/1.2 var(--font-display); color: var(--text); }
.tier__ea { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.tier__right { display: flex; align-items: center; gap: 10px; text-align: right; }
.tier__tag {
  font: var(--fw-bold) 9px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 8px; border-radius: var(--radius-pill); background: var(--accent); color: var(--btn-ink);
}
.tier__save { font-size: 11px; color: var(--accent); white-space: nowrap; }
.tier__total { font: var(--fw-bold) 15px/1 var(--font-display); color: var(--text); min-width: 74px; }

.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 ------------------------------------------------------- */

.byo-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
.byo-steps li {
  font-size: 12px; color: var(--text-dim); padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  transition: all var(--t-fast);
}
.byo-steps li b { color: var(--text); }
.byo-steps li.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.byo-steps li.is-on b { color: var(--accent); }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.builder__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bitem {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.bitem.is-on { border-color: var(--accent); background: var(--accent-soft); }
.bitem__img { width: 58px; height: 80px; object-fit: cover; border-radius: 3px; flex: none; }
.bitem__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bitem__name { font: var(--fw-black) 15px var(--font-display); color: var(--text); }
.bitem__str { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.bitem__sel { padding: 6px 8px; font-size: 12px; }
.bitem__price { font-size: 13px; color: var(--accent); font-weight: var(--fw-bold); }
.bitem__toggle {
  flex: none; min-width: 76px; padding: 11px 12px; cursor: pointer;
  font: var(--fw-bold) 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
}
.bitem__toggle:hover { border-color: var(--accent); }
.bitem.is-on .bitem__toggle { background: var(--accent); color: var(--btn-ink); border-color: var(--accent); }
.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(--gold) 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(--gold); 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.psl-gate { overflow: hidden; }
html.psl-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)); }
  .byo-band__in { grid-template-columns: 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); }
  .builder__items { grid-template-columns: minmax(0, 1fr); }
  .byo-band__tiers { flex-wrap: wrap; }
  .byo-steps { flex-wrap: wrap; }
  .trustrow { grid-template-columns: minmax(0, 1fr); }
  .tier__save { display: none; }
  .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; }