/* ============================================================================
   SURGE PEPTIDES — Product page (PDP)
   Buy-box layout mirrors the current feelsurge.com PDP, re-skinned to the
   clinical light system. Content sections retained, restyled.
   ============================================================================ */

/* ---- Overview: description + assurance card (two-column on desktop) ------ */
.pdp-about { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
@media (max-width: 900px) { .pdp-about { grid-template-columns: 1fr; gap: 1.6rem; } }
.pdp-about__eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-press); }
.pdp-about__lead { margin-top: var(--space-3); color: var(--ink-2); font-size: 1.09rem; line-height: 1.72; max-width: 60ch; }
.pdp-about__tag { margin-top: var(--space-3); color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.6; }
.pdp-about__facts { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--hairline); overflow: hidden; }
.pdp-about__facts > div { background: var(--surface); padding: 0.85rem 1rem; min-width: 0; }
.pdp-about__facts dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pdp-about__facts dd { margin: 0.3rem 0 0; color: var(--ink); font-size: 0.9rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* The 1px gaps expose the hairline background to draw the dividers, so any cell
   the grid reserves but never fills renders as a solid grey block. Make an odd
   final cell span the full row — belt-and-braces behind the fact fallbacks in
   product.js, so sparse data can never punch a grey hole in this grid again. */
.pdp-about__facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 400px) { .pdp-about__facts { grid-template-columns: 1fr; } }

.pdp-assure { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-tint-2) 55%, #fff), var(--surface) 60%); box-shadow: var(--shadow-2); padding: clamp(1.2rem, 2.2vw, 1.6rem); }
.pdp-assure__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--hairline); }
.pdp-assure__head h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
.pdp-assure__badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); border-radius: 999px; padding: 0.28rem 0.6rem; white-space: nowrap; }
.pdp-assure__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pdp-pulse 2.2s ease-in-out infinite; }
@keyframes pdp-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); } }
.pdp-assure__list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.pdp-assure__row { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; align-items: start; }
.pdp-assure__row > svg { width: 20px; height: 20px; color: var(--accent-press); margin-top: 1px; }
.pdp-assure__row b { display: block; font-size: 0.92rem; color: var(--ink); line-height: 1.25; }
.pdp-assure__row span { display: block; margin-top: 0.2rem; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.pdp-assure__coa { display: flex; align-items: center; gap: 0.6rem; width: 100%; margin-top: 1.1rem; padding: 0.8rem 1rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); color: var(--accent-press); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pdp-assure__coa:hover { background: var(--accent-tint-2); transform: translateY(-1px); }
.pdp-assure__coa > svg { width: 18px; height: 18px; flex: none; }
.pdp-assure__coa .pdp-assure__go { margin-left: auto; width: 15px; height: 15px; }
.pdp-assure__rating { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); font-size: var(--fs-xs); color: var(--ink-3); }
.pdp-assure__rating b { color: var(--ink); }
.pdp-assure__stars { display: inline-flex; gap: 1px; color: var(--c-amber, #E0831F); flex: none; }
.pdp-assure__stars svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .pdp-assure__pulse { animation: none; } }

.pdp {
  --mol-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 360'%3E%3Cg fill='none' stroke='%23183F2C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='.98'%3E%3Cpath d='M44 176 116 126 194 172 270 124 342 168 416 122'/%3E%3Cpath d='M116 126V55M194 172v78M270 124V56M342 168v82'/%3E%3Ccircle cx='44' cy='176' r='9'/%3E%3Ccircle cx='116' cy='126' r='13'/%3E%3Ccircle cx='194' cy='172' r='10'/%3E%3Ccircle cx='270' cy='124' r='13'/%3E%3Ccircle cx='342' cy='168' r='10'/%3E%3Ccircle cx='416' cy='122' r='9'/%3E%3Ccircle cx='116' cy='55' r='9'/%3E%3Ccircle cx='194' cy='250' r='9'/%3E%3Ccircle cx='270' cy='56' r='9'/%3E%3Ccircle cx='342' cy='250' r='9'/%3E%3Cpath d='M86 224h52M286 218h62M222 82h42' stroke-dasharray='2 9'/%3E%3C/g%3E%3C/svg%3E");
  --mol-mini: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 92'%3E%3Cg fill='none' stroke='%23183F2C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='.95'%3E%3Cpath d='M17 54 47 30 84 55 124 28'/%3E%3Cpath d='M47 30v-18M84 55v23M124 28l12 20'/%3E%3Ccircle cx='17' cy='54' r='5'/%3E%3Ccircle cx='47' cy='30' r='8'/%3E%3Ccircle cx='84' cy='55' r='7'/%3E%3Ccircle cx='124' cy='28' r='6'/%3E%3Ccircle cx='47' cy='12' r='4'/%3E%3Ccircle cx='84' cy='78' r='4'/%3E%3Ccircle cx='136' cy='48' r='4'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  padding-top: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-tint-2) 58%, transparent) 0, transparent 520px),
    var(--paper);
}
.pdp::before,
.pdp::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-image: var(--mol-field);
  background-repeat: no-repeat;
  background-size: contain;
}
.pdp::before {
  top: 118px;
  right: -178px;
  width: 760px;
  height: 596px;
  opacity: 0.28;
  transform: rotate(-8deg);
}
.pdp::after {
  top: 760px;
  left: -210px;
  width: 650px;
  height: 508px;
  opacity: 0.18;
  transform: rotate(12deg);
}
.pdp > .container--md:first-child {
  position: relative;
  z-index: 1;
  /* Share the SITE rail with the header and the footer (both plain .container).
     This was 1360px, which put the PDP on a rail 40px wider per side than the
     chrome above and below it - the vial photo and the breadcrumb started 40px
     outside the logo and the footer columns, and no other page does that.
     Note this class normally resolves to --container-md (1200px, NARROWER than
     --container); the PDP is the one place it is widened, so it is set here and
     not by changing the token. */
  max-width: var(--container);
}
.pdp > #pdp-content {
  position: relative;
  z-index: 1;
}

/* ---- Breadcrumb -------------------------------------------------------- */
.breadcrumb { display: flex; gap: 0.5em; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); padding-block: var(--space-5) var(--space-4); }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent-press); }
.breadcrumb .sep { color: var(--muted); }
.breadcrumb [aria-current] { color: var(--ink); }

/* ---- Hero: media | buy box -------------------------------------------- */
.pdp__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
  margin-bottom: var(--space-7);
}
@media (max-width: 880px) {
  /* minmax(0,...) and NOT a bare 1fr: a 1fr track takes its automatic minimum from
     the widest item's min-content, and the cross-sell card's min-content (~353px)
     is wider than the page rail on phones. That stretched the whole stacked column
     - photo, title, price, Add to Cart - past the right gutter and off-screen. */
  .pdp__hero { grid-template-columns: minmax(0, 1fr); }
  .pdp__media { order: 1; }
  .buybox { order: 2; }
  /* mobile: photo leads; drop decorative molecule line-art (it collided with the
     buy-box text) and size the photo frame sensibly so it reads as a product image */
  .pdp { --mol-field: none; --mol-mini: none; }
  .pdp::before, .pdp::after, .pdp__hero::after { display: none; }
  .pdp .pdp__media-frame { min-height: 300px; }
  .pdp .pdp__photo { max-height: 340px; }
}

.pdp__media { position: sticky; top: 92px; z-index: 1; }
@media (max-width: 880px) { .pdp__media { position: static; } }
.pdp__media-frame {
  position: relative; min-height: 600px; border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background:
    radial-gradient(72% 62% at 50% 38%, rgba(58,93,122,0.12), transparent 70%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent-tint-2) 76%, #fff)),
    var(--surface);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: var(--shadow-2);
}
.pdp__media-frame .vial-lg { width: 46%; height: auto; }
.pdp__media-tag { position: absolute; top: 14px; left: 14px; z-index: 1; }
.pdp__media-tag--mono {
  font-family: var(--font-mono); letter-spacing: 0.02em; font-size: 0.78rem;
  color: var(--ink-2); border-color: var(--hairline-strong);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pdp__media-frame--photo {
  background-image:
    var(--mol-field),
    radial-gradient(72% 62% at 50% 38%, rgba(58,93,122,0.12), transparent 70%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent-tint-2) 76%, #fff));
  background-position: right -175px bottom -122px, 50% 38%, 0 0;
  background-size: 560px auto, auto, auto;
  background-repeat: no-repeat;
}
.pdp__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: contain;
  display: block;
  filter: saturate(1.04) contrast(1.04);
  transform: scale(1.02);
}
.pdp__assay-card {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: min(300px, 58%);
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--hairline));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-2);
  color: var(--accent-press);
}
.pdp__assay-card span {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pdp__assay-card svg { width: 100%; height: auto; }
.pdp__assay-card text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: currentColor;
}
/* Molecular structure — dedicated per-compound model section (re-homed from buy box) */
.pdp-structure { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 820px) { .pdp-structure { grid-template-columns: 1fr; } }
.pdp-structure__canvas { min-height: 400px; display: flex; align-items: center; justify-content: center; padding: 0.5rem; }
.pdp-structure__canvas canvas { width: 100%; min-height: 400px; display: block; }
.pdp-structure__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-3); }
.pdp-structure__formula { font-size: var(--fs-xs); color: var(--ink-3); overflow-wrap: anywhere; text-align: right; }
.pdp-structure__meta { margin: 0; border-top: 1px solid var(--hairline); }
.pdp-structure__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); }
.pdp-structure__row:last-child { border-bottom: 0; }
.pdp-structure__row dt { color: var(--ink-3); font-size: var(--fs-sm); }
.pdp-structure__row dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-size: var(--fs-sm); text-align: right; overflow-wrap: anywhere; }
/* American flag trust icon — keep its aspect ratio (override the square svg sizing) */
.trust-icons__item .flag-icon { width: 28px; height: auto; }
.pdp__thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.pdp__thumb { width: 72px; height: 72px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--paper-sunk); display: flex; align-items: center; justify-content: center; }
.pdp__thumb.is-active { border-color: var(--accent); }

/* ---- Buy box ----------------------------------------------------------- */
.buybox {
  position: relative;
  z-index: 1;
  max-width: none;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background:
    var(--mol-mini) right -36px top 16px / 206px auto no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--accent-tint-2) 58%, #fff)),
    var(--surface);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.buybox::before {
  content: "";
  position: absolute;
  right: -74px;
  bottom: 34%;
  width: 270px;
  height: 166px;
  background-image: var(--mol-mini);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.16;
  transform: rotate(-14deg);
  pointer-events: none;
}
.buybox > * {
  position: relative;
  z-index: 1;
}
.buybox__title { font-size: clamp(2.15rem, 1.2rem + 2.2vw, 3.45rem); line-height: 0.98; letter-spacing: -0.02em; }
.buybox__summary {
  margin-top: var(--space-3);
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.55;
}
.buybox__price { display: flex; align-items: baseline; gap: 0.6em; margin-top: var(--space-4); }
.buybox__price .now { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.buybox__price .bogo { font-size: var(--fs-sm); color: var(--accent-press); font-weight: 500; }
.buybox__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
/* callouts beneath the price: USA Lab Verified · ISO/IEC 17025:2017 · View COA */
.chip--callout {
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-tint-2));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--hairline-strong));
  color: var(--ink-2);
  font-weight: 500;
  padding: 0.42em 0.72em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}
button.chip--callout, a.chip--callout { cursor: pointer; }
.chip--callout:hover { border-color: var(--accent); color: var(--accent-press); }
.chip--callout .flag-icon { width: 17px; height: auto; border-radius: 2px; }
.chip--callout > svg:not(.flag-icon) { width: 14px; height: 14px; color: var(--ink-3); }
/* phones: shrink the callout chips so all three sit on one line where they fit.
   Wrapping stays ON: forcing nowrap clipped "View COA" on the narrowest phones. */
@media (max-width: 560px) {
  .buybox__chips { gap: 0.4rem; }
  .chip--callout { padding: 0.36em 0.5em; font-size: 0.68rem; letter-spacing: 0; gap: 0.35em; white-space: nowrap; }
  .chip--callout .flag-icon { width: 13px; }
  .chip--callout > svg:not(.flag-icon) { width: 11px; height: 11px; }
}
.pdp-size .seg__btn[aria-selected="true"] { background: var(--accent); color: #fff; }

/* ---- Variant cards (size selector) ------------------------------------ */
.variants { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 881px) {
  .variants {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* clean original variant selector — slate accent, no decorative molecule/rainbow */
.variant-card {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; padding: 1rem 1.25rem;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.variant-card:hover { border-color: var(--accent); }
.variant-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint-2); box-shadow: inset 0 0 0 1px var(--accent); }
.variant-card__main b { display: block; font-size: 1.05rem; color: var(--ink); line-height: 1.2; }
.variant-card__permg { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--ink-3); }
.variant-card__right { display: flex; align-items: center; gap: 0.8rem; flex: none; }
.variant-card__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 600; color: var(--accent-press); }
.variant-card__save { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600; color: var(--success); background: rgba(29,122,76,0.10); padding: 0.3em 0.6em; border-radius: var(--radius-pill); white-space: nowrap; }
.variant-card__best {
  position: absolute; top: -11px; right: 14px; z-index: 1;
  background: var(--success); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.03em;
  padding: 0.3em 0.7em; border-radius: var(--radius-sm);
}
/* A sold-out size stays selectable — its COA and price must stay readable —
   so it is dimmed rather than hidden, and the ATC below it turns into a
   disabled "Out of Stock" button. */
.variant-card--soldout { background: var(--paper-sunk); }
.variant-card--soldout .variant-card__main b,
.variant-card--soldout .variant-card__price { color: var(--ink-3); }
.variant-card--soldout .variant-card__price { text-decoration: line-through; text-decoration-thickness: 1px; }
.variant-card--soldout[aria-checked="true"] { border-color: var(--ink-3); background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--ink-3); }
.variant-card--soldout:hover { border-color: var(--ink-3); }
.variant-card__oos {
  position: absolute; top: -11px; right: 14px; z-index: 1;
  background: var(--ink-3); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.03em;
  padding: 0.3em 0.7em; border-radius: var(--radius-sm);
}
.pdp-vsheet__opt--soldout { opacity: 0.55; }

.buybox__qtylabel { display: block; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.qty button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 1.1rem; transition: background var(--dur-fast) var(--ease-out); }
.qty button:hover { background: var(--paper-sunk); }
.qty button:active { background: var(--hairline); }
.qty input { width: 52px; height: 44px; text-align: center; border: 0; border-inline: 1px solid var(--hairline); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1rem; background: var(--surface); }

.bogo-callout { display: flex; gap: 0.7em; align-items: flex-start; margin-top: var(--space-3); padding: 0.28rem 0.9rem; border: 1px solid var(--accent-tint); background: var(--accent-tint-2); border-radius: var(--radius-sm); }
.bogo-callout svg { flex: none; color: var(--accent); margin-top: 1px; }
.bogo-callout b { color: var(--ink); display: block; font-size: var(--fs-sm); line-height: 1.2; }
.bogo-callout span { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.25; }

.btn--cart { width: 100%; margin-top: var(--space-4); padding-block: 1.15em; font-size: 1rem; box-shadow: 0 14px 32px rgba(58,93,122,0.18); }
.btn--cart[disabled], .pdp-sticky__add[disabled] { background: var(--ink-3); border-color: var(--ink-3); box-shadow: none; cursor: not-allowed; pointer-events: none; }
.ship-line { text-align: center; font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--space-3); max-width: none; }

.trust-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); text-align: center; }
.trust-icons__item { display: flex; flex-direction: column; align-items: center; gap: 0.45em; }
.trust-icons__item svg { color: var(--accent); width: 22px; height: 22px; }
.trust-icons__item span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; }
@supports (font-size: 0.75rem) { .trust-icons__item span { font-size: 0.6875rem; } } /* >=12px enforced below */
.trust-icons__item span { font-size: 0.6875rem; }

.passed-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 420px) { .passed-cards { grid-template-columns: 1fr; } }
.passed-card { display: flex; gap: 0.6em; align-items: center; padding: 0.85rem 1rem; border: 1px solid rgba(29,122,76,0.25); background: rgba(29,122,76,0.05); border-radius: var(--radius-sm); }
.passed-card svg { flex: none; color: var(--success); }
.passed-card > div { display: flex; flex-direction: column; line-height: 1.1; }
.passed-card b { color: var(--success); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; line-height: 1.05; }
.passed-card span { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.15; margin-top: 1px; }

/* ---- Cross-sell -------------------------------------------------------- */
.cross-sell {
  margin-top: var(--space-6);
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--hairline));
  border-radius: var(--radius-sm);
  background:
    var(--mol-mini) right -50px top -26px / 180px auto no-repeat,
    linear-gradient(145deg, color-mix(in srgb, var(--accent-tint-2) 68%, #fff), var(--surface) 78%);
}
.cross-sell__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-3); }
.cross-sell__row { display: flex; flex-direction: column; gap: var(--space-2); }
.cross-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 14%, var(--hairline));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, var(--cat-tint, var(--accent-tint)));
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  overflow: hidden;
}
.cross-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cat, var(--accent));
  opacity: 0.65;
}
.cross-item:hover {
  border-color: var(--cat, var(--accent));
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -18px color-mix(in srgb, var(--cat, var(--accent)) 56%, transparent);
}
.cross-item .vial-xs { width: 28px; height: 46px; flex: none; }
.cross-item__thumb {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  flex: none;
  object-fit: contain;
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 15%, var(--hairline));
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--cat-tint, var(--accent-tint)) 52%, var(--paper-sunk)));
  filter: drop-shadow(0 8px 10px rgba(21,32,30,0.08));
}
.cross-item__go { flex: none; display: inline-flex; }
.cross-item__name { min-width: 0; flex: 1 1 auto; font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.cross-item__name:hover { color: var(--accent-press); }
.cross-item__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.cross-item__price { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-size: var(--fs-sm); }
/* real add-to-cart button — quiet outline, tint on hover, never a full fill */
.cross-item__add {
  flex: none; min-height: 34px; padding: 0.4em 0.85em;
  font-weight: 600; font-size: var(--fs-sm); color: var(--accent-press);
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--hairline-strong));
  border-radius: var(--radius-sm); white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cross-item__add:hover { border-color: var(--accent); background: var(--accent-tint-2); }
.cross-item__add:active { opacity: 0.7; }
/* phones: the row's fixed parts (thumb, size, price, Add) leave the product name
   almost no room, so let the row wrap - name on line 1, size/price/Add on line 2. */
@media (max-width: 430px) {
  .cross-item { flex-wrap: wrap; }
  /* keep Add on the right of whichever line it lands on, so the wrapped rows
     stay aligned with the unwrapped ones instead of stranding it bottom-left */
  .cross-item__add { margin-left: auto; }
}

/* ---- RFID authenticity card (light) ----------------------------------- */
.rfid-card { margin-top: var(--space-5); padding: 1.4rem 1.5rem; border: 1px solid var(--accent-tint); border-radius: var(--radius-md);
  background: radial-gradient(120% 100% at 100% 0%, var(--accent-tint) 0%, var(--accent-tint-2) 60%, var(--surface) 100%); }
.rfid-card__eyebrow { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-press); }
.rfid-card h3 { margin-top: 0.6rem; font-size: 1.25rem; }
.rfid-card p { margin-top: 0.5rem; color: var(--ink-2); font-size: var(--fs-sm); }

@media (min-width: 881px) {
  .rfid-card {
    margin-top: var(--space-4);
    padding: 1rem 1.1rem;
  }
  .rfid-card h3 {
    font-size: 1.05rem;
  }
  .rfid-card p {
    max-width: none;
  }
}

/* ============================================================ CONTENT ==== */
.pdp-section {
  position: relative;
  padding-block: var(--section-pad);
  overflow: hidden;
}
.pdp-section::before {
  content: "";
  position: absolute;
  top: clamp(1rem, 8vw, 5rem);
  right: -230px;
  width: 570px;
  height: 446px;
  background-image: var(--mol-field);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
}
.pdp-section:nth-child(even)::before {
  right: auto;
  left: -230px;
  transform: rotate(-9deg);
}
.pdp-section > .container {
  position: relative;
  z-index: 1;
}
.pdp-section--sunk { background: var(--paper-sunk); border-block: 1px solid var(--hairline); }
.pdp-section__head { text-align: center; max-width: 60ch; margin-inline: auto; margin-bottom: clamp(2rem, 1rem + 3vw, 3rem); }
.pdp-section__head .eyebrow { display: block; margin-bottom: var(--space-3); }
.pdp-section__head p { margin: var(--space-3) auto 0; color: var(--ink-2); }

/* test panel + COA preview */
.test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 860px) { .test-grid { grid-template-columns: 1fr; } }
.test-list { list-style: none; margin: 0; padding: 0; }
.test-list li { display: flex; gap: 0.8em; padding: 0.9rem 0; border-bottom: 1px solid var(--hairline); }
.test-list li:last-child { border-bottom: 0; }
.test-list svg { flex: none; color: var(--success); margin-top: 1px; }
.test-list b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.test-list span { color: var(--ink-3); font-size: var(--fs-xs); }
/* COA preview — premium lab-document card: gradient border + header, watermark,
   foil seal, animated PASS chip, iconed rows, gradient CTA */
.coa-preview {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #112D1F 0%, #183F2C 45%, #4E8F86 100%) border-box;
  box-shadow: 0 10px 30px -12px rgba(46, 75, 99, 0.35);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.coa-preview:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -14px rgba(46, 75, 99, 0.45), 0 0 24px -6px rgba(78, 143, 134, 0.35);
}
.coa-preview__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.2rem;
  background: linear-gradient(120deg, #0C2016 0%, #112D1F 48%, #3A6B66 100%);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  color: #E8F0EF;
}
.coa-preview__title { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.coa-preview__title svg { flex: none; opacity: 0.85; }
.coa-preview__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coa-preview__chip {
  position: relative; overflow: hidden; flex: none;
  color: #DFF5E8; border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.coa-preview__chip .dot { background: #5BE49B; animation: coa-pulse 2.2s ease-out infinite; }
.coa-preview__chip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: coa-shimmer 4.8s ease-in-out infinite;
}
@keyframes coa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(91, 228, 155, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(91, 228, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 228, 155, 0); }
}
@keyframes coa-shimmer {
  0%, 58% { transform: translateX(-130%); }
  78%, 100% { transform: translateX(130%); }
}
.coa-preview__doc {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, #FDFEFE 0%, #F5F8F8 100%);
}
.coa-preview__watermark {
  position: absolute; inset: 0 0 3.5rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 3.2rem); letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--accent); opacity: 0.05;
  transform: rotate(-16deg);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.coa-preview__seal {
  position: absolute; right: 1.15rem; bottom: 4.9rem;
  width: 62px; height: 62px;
  transform: rotate(-12deg);
  opacity: 0.55; pointer-events: none;
  color: #3F7A72;
  filter: drop-shadow(0 2px 5px rgba(46, 75, 99, 0.22));
}
.coa-preview__seal svg { width: 100%; height: 100%; }
.coa-preview__seal .seal-ring { fill: none; stroke: currentColor; stroke-width: 2.5; }
.coa-preview__seal .seal-ring--inner { stroke-width: 1.25; stroke-dasharray: 2.5 2.5; }
.coa-preview__seal .seal-text { font-family: var(--font-mono); font-size: 6.5px; font-weight: 700; letter-spacing: 0.14em; fill: currentColor; }
.coa-preview__seal .seal-check { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.coa-preview__rows { position: relative; margin: 0; }
.coa-preview__rows .kv {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline;
  padding: 0.72rem 0;
  border-bottom: 1px dashed var(--hairline-strong);
}
.coa-preview__rows .kv:last-of-type { border-bottom: 0; }
.coa-preview__rows dt {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  color: var(--ink-3); white-space: nowrap;
}
.coa-preview__rows dt svg { flex: none; color: var(--accent); opacity: 0.85; }
.coa-preview__rows dd {
  margin: 0; text-align: right; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink);
}
.coa-preview__cta {
  width: 100%; margin-top: 1.15rem;
  border-color: transparent;
  background-color: transparent;
  background-image:
    linear-gradient(110deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.22) 48%, transparent 58%, transparent 100%),
    linear-gradient(120deg, #112D1F 0%, #183F2C 55%, #3F7A72 100%);
  background-size: 240% 100%, 100% 100%;
}
.coa-preview__cta:hover {
  background-color: transparent;
  box-shadow: 0 12px 28px rgba(46, 75, 99, 0.3);
  filter: brightness(1.07);
}
.coa-preview__cta svg { flex: none; transition: transform 160ms ease; }
.coa-preview__cta:hover svg { transform: translateX(3px); }
.coa-preview__browse { margin-top: 1rem; display: inline-block; position: relative; }
@media (prefers-reduced-motion: reduce) {
  .coa-preview, .coa-preview:hover { transform: none; transition: none; }
  .coa-preview__chip .dot, .coa-preview__chip::after { animation: none; }
}

/* stat tiles */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 860px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  position: relative;
  isolation: isolate;
  padding: 1.5rem 1.3rem;
  text-align: left;
  background:
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent-tint-2) 64%, #fff));
  overflow: hidden;
}
.stat-tile::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -16px;
  z-index: -1;
  width: 152px;
  height: 94px;
  background-image: var(--mol-mini);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.28;
}
.stat-tile::after {
  content: "";
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 1rem;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.45;
}
.stat-tile .figure { font-size: clamp(1.8rem, 1rem + 2vw, 2.4rem); }
.stat-tile__label { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); margin-top: 0.5rem; }
.stat-tile__sub { color: var(--ink-3); font-size: var(--fs-xs); margin-top: 0.2rem; }

/* mechanism cards */
.mech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .mech-grid { grid-template-columns: 1fr; } }
.mech-card {
  position: relative;
  isolation: isolate;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-top: 3px solid var(--cat, var(--accent));
  overflow: hidden;
}
.mech-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -14px;
  z-index: -1;
  width: 150px;
  height: 92px;
  background-image: var(--mol-mini);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.32;
}
.mech-card__tag {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 0.32em 0.78em; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  background: var(--cat-tint, var(--accent-tint)); color: var(--cat-ink, var(--accent-press));
}
.mech-card h3 { font-size: 1.1rem; }
.mech-card p { color: var(--ink-2); font-size: var(--fs-sm); }
.mech-card ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.mech-card li { display: flex; gap: 0.55em; color: var(--ink-2); font-size: var(--fs-sm); }
.mech-card li::before { content: "✓"; flex: none; color: var(--success); font-weight: 700; line-height: 1.45; }

/* research bars */
.research-bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-7); max-width: 880px; margin-inline: auto; }
@media (max-width: 620px) { .research-bars { grid-template-columns: 1fr; } }
.research-bar__top { display: flex; justify-content: space-between; align-items: baseline; }
.research-bar__top b { color: var(--ink); font-size: var(--fs-sm); }
.research-bar__top .figure { font-size: 1.3rem; color: var(--cat-ink, var(--accent-press)); }
.research-bar__track { height: 7px; border-radius: 999px; background: var(--paper-sunk); margin-top: 0.5rem; overflow: hidden; }
.research-bar__fill { height: 100%; background: var(--cat, var(--accent)); border-radius: 999px; width: 0; transition: width 900ms var(--ease-out); }
.research-bar.is-visible .research-bar__fill { width: var(--pct, 70%); }

/* application cards */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 760px) { .app-grid { grid-template-columns: 1fr; } }
.app-card {
  position: relative;
  isolation: isolate;
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--cat-tint, var(--surface));
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 24%, var(--hairline));
  overflow: hidden;
}
.app-card::before {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -24px;
  z-index: -1;
  width: 156px;
  height: 96px;
  background-image: var(--mol-mini);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.34;
}
.app-card__tag { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--cat-ink, var(--ink-3)); }
.app-card h3 { font-size: 1.1rem; }
.app-card p { color: var(--ink-2); font-size: var(--fs-sm); }
.app-card .cite { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--cat-ink, var(--accent-press)); }

/* sources */
.sources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 720px) { .sources-grid { grid-template-columns: 1fr; } }
.source-item { padding: 1.2rem 1.3rem; }
.source-item__tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--ink-3); }
.source-item h4 { margin-top: 0.4rem; font-size: var(--fs-sm); }
.source-item__meta { color: var(--ink-3); font-size: var(--fs-xs); margin-top: 0.3rem; }

/* FAQ (kit accordion, PDP styling) */
.pdp-faq__item { border-bottom: 1px solid var(--hairline); }
.pdp-faq__item:first-child { border-top: 1px solid var(--hairline); }
.pdp-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: 1.3em 0.25em; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.pdp-q:hover { color: var(--accent-press); }
.pdp-q:active { opacity: 0.7; }
.pdp-faq__a { padding: 0 0.25em 1.4em; }
.pdp-faq__a p { color: var(--ink-2); max-width: 68ch; }

/* drawers (kit [data-surge-drawer] panel internals) */
[data-surge-drawer] { display: flex; flex-direction: column; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--hairline); }
.drawer__head h3 { font-size: 1.1rem; }
.drawer__body { padding: 1.4rem; overflow-y: auto; }

/* RUO strip */
.ruo-strip { text-align: center; padding: var(--space-6); border: 1px dashed var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface); }
.ruo-strip b { color: var(--ink); }
.ruo-strip p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0.4rem auto 0; max-width: 60ch; }

/* ===================================== CLEAN PDP HERO (no decorative molecules / no photo box) === */
/* kill the decorative molecule line-art in & around the buy box (and the whole PDP) */
.pdp { --mol-field: none; --mol-mini: none; }
.pdp::before, .pdp::after, .pdp__hero::after { display: none !important; }
/* no frame, no panel — the hero is a plain flush layout */
.pdp__hero { background: none; }
/* the whole top section (breadcrumb + hero + overview) sits on a clean, full-width white band */
.pdp > .container--md { position: relative; z-index: 0; padding-top: var(--space-6); }
.pdp > .container--md::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: #fff;
}
/* product photo: remove the container/backdrop behind it — bare photo, no frame box */
.pdp__media-frame, .pdp__media-frame--photo {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.pdp__media-frame--photo .pdp__photo { height: auto !important; max-height: 540px; }
/* flat, borderless buy box — no card frame */
.buybox {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible;
  padding: 0 !important;
}
.buybox::before { display: none !important; }
/* bare product photo — no overlay tag or assay card around it */
.pdp__media-tag, .pdp__assay-card { display: none !important; }

/* ===================================== GLP-3 RT extended dossier ===== */
/* receptor cards */
.rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 820px) { .rec-grid { grid-template-columns: 1fr; } }
.rec-card { padding: 1.5rem; border-top: 3px solid var(--cat, var(--accent)); display: flex; flex-direction: column; gap: 0.85rem; }
.rec-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rec-card__tag { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; color: var(--cat-ink, var(--accent-press)); background: var(--cat-tint, var(--accent-tint)); padding: 0.32em 0.7em; border-radius: var(--radius-pill); font-size: var(--fs-sm); }
.rec-card__ec { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.rec-card__bar { height: 6px; border-radius: 999px; background: var(--paper-sunk); overflow: hidden; }
.rec-card__bar i { display: block; height: 100%; border-radius: 999px; background: var(--cat, var(--accent)); }
.rec-card p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }

/* dose-response bars */
.dose-bars { display: grid; gap: var(--space-5); max-width: 820px; margin-inline: auto; }
.dose-bar__top { display: flex; justify-content: space-between; align-items: baseline; }
.dose-bar__top b { color: var(--ink); font-size: var(--fs-sm); }
.dose-bar__top .figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.3rem; color: var(--cat-ink, var(--accent-press)); }
.dose-bar__track { height: 8px; border-radius: 999px; background: var(--paper-sunk); margin-top: 0.5rem; overflow: hidden; }
.dose-bar__fill { height: 100%; width: 0; border-radius: 999px; background: var(--cat, var(--accent)); transition: width 1s var(--ease-out); }
.dose-bar.is-visible .dose-bar__fill { width: var(--pct, 60%); }
.glp-notes { margin: var(--space-6) auto 0; max-width: 820px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); padding: 1.3rem 1.5rem; }
.glp-notes__h { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.glp-notes ul { margin: 0.7rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.glp-notes li { color: var(--ink-2); font-size: var(--fs-sm); }

/* class comparison table */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-1); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 660px; font-size: var(--fs-sm); }
.cmp-table th, .cmp-table td { padding: 0.9rem 1rem; text-align: center; border-bottom: 1px solid var(--hairline); }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table thead th { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-sunk); }
.cmp-table th:first-child, .cmp-table td:first-child { text-align: left; }
.cmp-name { font-weight: 600; color: var(--ink); }
.cmp-table .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cmp-yes { color: var(--success); font-weight: 700; }
.cmp-no { color: var(--muted); }
.cmp-table tr.is-feature td { background: var(--accent-tint-2); }
.cmp-table tr.is-feature .cmp-name { color: var(--accent-press); }
.cmp-bw { color: var(--accent-press); font-weight: 600; }
.cmp-foot { max-width: 820px; margin: var(--space-4) auto 0; font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }

/* research timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: var(--hairline); }
.timeline__item { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.timeline__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); position: relative; z-index: 1; }
.timeline__year { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--accent-press); font-weight: 600; }
.timeline__body b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.timeline__body span { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.5; }
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: var(--space-5); }
  .timeline::before { left: 6px; top: 0; bottom: 0; right: auto; width: 2px; height: auto; }
  .timeline__item { padding-left: 1.6rem; }
  .timeline__dot { position: absolute; left: 0; top: 3px; }
}
.timeline__metrics { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); justify-content: center; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.timeline__metrics span { font-size: var(--fs-sm); color: var(--ink-3); }
.timeline__metrics b { font-family: var(--font-mono); font-size: 1.4rem; color: var(--accent-press); margin-right: 0.35em; }

/* handling & storage */
.recon { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 760px) { .recon { grid-template-columns: 1fr; } }
.recon__store { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.recon__store-row { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--hairline); }
.recon__store-row:last-child { border-bottom: 0; }
.recon__store-row span { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.recon__store-row b { color: var(--ink); font-size: var(--fs-sm); }
.recon__steps { margin: 0; padding: 0; list-style: none; counter-reset: recon; display: grid; gap: 0.9rem; }
.recon__steps li { position: relative; padding-left: 3rem; color: var(--ink-2); font-size: var(--fs-sm); min-height: 2rem; display: flex; align-items: center; }
.recon__steps li::before { counter-increment: recon; content: counter(recon); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent-press); font-family: var(--font-mono); font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); }

/* ============================================================ STICKY ATC BAR
   Mobile-only pinned bottom bar (built by product.js initStickyBar). Slides up
   after the buybox ATC scrolls out of view. Sits under the drawers (z 100)
   and the toast (z 120). */
.pdp-sticky { display: none; }
@media (max-width: 768px) {
  .pdp-sticky {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; /* under the drawers (z 100) */
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--hairline-strong, #e2e6ea);
    box-shadow: 0 -8px 24px rgba(16, 39, 64, 0.09);
    padding: 0.55rem 0.9rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1);
    will-change: transform;
  }
  .pdp-sticky.is-on { transform: translateY(0); }
  .pdp-sticky__main { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
  .pdp-sticky__meta { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1; }
  .pdp-sticky__name {
    font-size: 0.72rem; font-weight: 600; color: #44535f;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .pdp-sticky__price { font-size: 0.98rem; font-weight: 600; color: #102740; line-height: 1.1; }
  .pdp-sticky__sizebtn {
    flex: none; display: inline-flex; align-items: center; gap: 0.36rem;
    height: 40px; padding: 0 0.5rem 0 0.28rem; max-width: 118px;
    border: 1px solid var(--hairline-strong, #cdd6dd); border-radius: 8px;
    background: #fff; color: #102740; font-family: var(--font-mono); font-size: 0.74rem;
    cursor: pointer; white-space: nowrap;
  }
  .pdp-sticky__sizebtn-img {
    width: 30px; height: 30px; border-radius: 6px; object-fit: contain;
    background: #f4f7f9; border: 1px solid #eef2f5; flex: none;
  }
  .pdp-sticky__sizebtn svg { color: #7a8790; flex: none; }
  .pdp-sticky__qty {
    flex: none; display: inline-flex; align-items: center; height: 40px;
    border: 1px solid var(--hairline-strong, #cdd6dd); border-radius: 8px;
    overflow: hidden; background: #fff;
  }
  .pdp-sticky__qty button {
    width: 30px; height: 100%; border: 0; background: #f4f7f9;
    color: var(--accent, #183F2C); font-size: 1.05rem; font-weight: 700;
    line-height: 1; cursor: pointer; font-family: inherit;
  }
  .pdp-sticky__qty [data-sticky-qty] {
    min-width: 26px; text-align: center; font-family: var(--font-mono);
    font-size: 0.82rem; font-weight: 600; color: #102740;
  }
  .pdp-sticky__add {
    flex: none; height: 40px; padding: 0 1rem; border: 0; border-radius: 8px;
    background: var(--accent, #183F2C); color: #fff; font-weight: 600;
    font-size: 0.84rem; letter-spacing: 0.01em; cursor: pointer; font-family: inherit;
    white-space: nowrap;
  }
  .pdp-sticky__add:active { background: var(--accent-press, #112D1F); }
  .pdp-sticky__trust {
    margin-top: 0.35rem; text-align: center;
    font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.09em;
    text-transform: uppercase; color: #7a8790;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  @media (prefers-reduced-motion: reduce) { .pdp-sticky { transition: none; } }
}

/* ============================================================ VARIANT SHEET
   Slide-up image-card size picker opened from the sticky bar's size chip
   (built by product.js). Above the bar (z 90), below drawers (z 100). */
.pdp-vsheet { display: none; }
@media (max-width: 768px) {
  html.pdp-vsheet-lock { overflow: hidden; }
  .pdp-vsheet { display: block; position: fixed; inset: 0; z-index: 96; pointer-events: none; }
  .pdp-vsheet__scrim {
    position: absolute; inset: 0; background: rgba(16, 39, 64, 0.38);
    opacity: 0; transition: opacity 0.26s ease;
  }
  .pdp-vsheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff; border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--hairline-strong, #e2e6ea);
    box-shadow: 0 -14px 40px rgba(16, 39, 64, 0.18);
    padding: 0.45rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1);
    max-height: 72vh; overflow-y: auto; will-change: transform;
  }
  .pdp-vsheet.is-open { pointer-events: auto; }
  .pdp-vsheet.is-open .pdp-vsheet__scrim { opacity: 1; }
  .pdp-vsheet.is-open .pdp-vsheet__panel { transform: translateY(0); }
  .pdp-vsheet__grab { width: 40px; height: 4px; border-radius: 2px; background: #d5dce2; margin: 0.3rem auto 0.75rem; }
  .pdp-vsheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.75rem; }
  .pdp-vsheet__title { font-weight: 650; font-size: 0.95rem; color: #102740; }
  .pdp-vsheet__sub {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: #7a8790;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .pdp-vsheet__opts { display: flex; flex-direction: column; gap: 0.55rem; }
  .pdp-vsheet__opt {
    display: flex; align-items: center; gap: 0.8rem; width: 100%;
    padding: 0.55rem 0.7rem; border: 1.5px solid var(--hairline-strong, #dde3e8);
    border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font-family: inherit;
  }
  .pdp-vsheet__opt[aria-selected="true"] {
    border-color: var(--accent, #183F2C);
    background: var(--accent-tint, #eef3f7);
    box-shadow: 0 0 0 1px var(--accent, #183F2C) inset;
  }
  .pdp-vsheet__imgwrap {
    flex: none; width: 52px; height: 52px; border-radius: 10px;
    background: #f4f7f9; border: 1px solid #e8edf1;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .pdp-vsheet__imgwrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pdp-vsheet__lbl { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
  .pdp-vsheet__lbl b { font-size: 0.92rem; color: #102740; font-weight: 650; }
  .pdp-vsheet__permg { font-family: var(--font-mono); font-size: 0.64rem; color: #7a8790; }
  .pdp-vsheet__price { flex: none; font-size: 0.95rem; font-weight: 600; color: #102740; }
  .pdp-vsheet__check {
    flex: none; color: var(--accent, #183F2C);
    opacity: 0; transform: scale(0.6); transition: opacity 0.18s, transform 0.18s;
  }
  .pdp-vsheet__opt[aria-selected="true"] .pdp-vsheet__check { opacity: 1; transform: scale(1); }
  @media (prefers-reduced-motion: reduce) {
    .pdp-vsheet__scrim, .pdp-vsheet__panel, .pdp-vsheet__check { transition: none; }
  }
}

/* ======================================================= PDP COA SECTION ====
   "Independently tested. Verifiably pure." - built by assets/js/pdp-coa.js into
   the empty <section id="pdp-coa"> placeholder.

   THE CARD is Brandon's 2026-08-25 mockup INVERTED TO LIGHT: compound + dose,
   lot, an HPLC purity profile that draws itself, Labeled / Measured / Tested
   rows, a vial-composition block with an animated net-peptide bar, and a
   gradient CTA. Surge green to a lighter blue throughout.

   🔴 THE GRADIENT STOPS ARE CONTRAST-BOUND, NOT PICKED BY EYE.
   White text on the CTA must clear 4.5:1 at the LIGHTEST point of the gradient,
   not the average. Measured: #183F2C 6.94 · #42688A 5.87 · #4A739A 4.99 ·
   #5080A8 4.20 FAIL. So --coa-blue-2 is #4A739A and nothing lighter may carry
   white text. The bar may run lighter than that because it carries no text.

   🔵 --trace / --trace-soft already existed in tokens.css, described there as
   "chromatogram / mass-spec stroke" and "secondary trace, under-curve". The
   plot uses them rather than inventing a colour.

   🔴 THE ANIMATION FAILS VISIBLE. The resting state below is a fully drawn
   trace and a full bar. The undrawn state lives ONLY under .coa-anim, a class
   the JS adds only when it can also drive it back, and a hard timer force-lands
   every card. An environment where IntersectionObserver never fires (the
   automation pane does exactly this, and it is what froze the sale-bar sun on
   2026-08-25) therefore shows a finished card, never an empty box.
   ⚠️ Never invert this to "hidden by default, shown by JS".

   🔴 The section is LIGHT. Earlier passes went austere-white (rejected as
   "terrible") and then fully dark; neither is this. tokens.css is a light-only
   variable file, not the design system - judge against a screenshot of the page.
========================================================================== */
.pdp-coa {
  --coa-blue:   #183F2C;   /* Surge accent                                    */
  --coa-blue-0: #112D1F;   /* accent-press, the gradient's dark end         */
  --coa-blue-2: #4A739A;   /* lightest stop that keeps white text >= 4.5:1  */
  --coa-blue-3: #7FA8C9;   /* decorative only - never behind text           */

  --coa-shell: #F6F7F9;   /* Brandon-specified; a touch lighter and cooler than
                             --paper-sunk (#F0F0F2), which is why it is set here
                             rather than pulled from the token file. */
  background: var(--paper);
  padding-inline: clamp(0.6rem, 2.2vw, 2.25rem);
}
/* 🔵 The section ground is the PAGE ground; the grey lives in a rounded SHELL
   inside it, rather than banding the full viewport width. The shell wraps the
   .container rather than sitting inside it, so the content rail keeps its exact
   previous width on desktop - the grey is added OUTSIDE the rail, not taken out
   of it. */
.pdp-coa__shell {
  max-width: 1420px; margin-inline: auto;
  background: var(--coa-shell);
  border-radius: clamp(18px, 2vw, 34px);
  padding-block: clamp(1.8rem, 1.1rem + 3vw, 3.6rem);
}
/* On a phone the shell already supplies the visual inset, so the container
   gutter inside it is trimmed - otherwise the cards lose ~30px of width to
   two nested insets doing the same job. */
@media (max-width: 640px) {
  .pdp-coa .container { padding-inline: 0.85rem; }
}
.pdp-coa .pdp-section__head { margin-bottom: clamp(1.8rem, 1rem + 2.4vw, 2.8rem); }

/* ---- AuthentiChain verification strip ------------------------------------ */
/* Every certificate in the archive is AuthentiChain-verified (Brandon,
   first-hand, 2026-08-25), so this is stated ONCE for the section rather than
   repeated on twelve cards; the cards carry a compact "Verified" chip instead.
   🔴 Do NOT re-derive coverage from lot numbers: only 52 of 119 lots carry an
   Auth/Whol/Upti prefix, which reflects the import route, not verification.
   ⚠️ Their brand green stays their brand green. A third party mark is not
   recoloured to fit the Surge palette - it is their trademark, and a recoloured
   logo is a misrepresented one. The Surge-blue rule governs Surge elements only. */
.ac-strip {
  display: flex; align-items: center; gap: clamp(0.7rem, 0.4rem + 1vw, 1.1rem);
  margin: 0 auto clamp(1.4rem, 0.9rem + 1.6vw, 2.2rem);
  max-width: 46rem;
  padding: clamp(0.7rem, 0.55rem + 0.5vw, 0.95rem) clamp(0.9rem, 0.6rem + 1vw, 1.3rem);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px;
  text-align: left;
}
.ac-mark { flex: none; display: block; width: clamp(38px, 4vw, 50px); }
.ac-mark svg { width: 100%; height: auto; display: block; }
.ac-mark__orbit { transform-origin: 24px 24px; animation: ac-spin 26s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-strip__txt { min-width: 0; }
.ac-strip__txt b {
  display: block; color: var(--ink); font-weight: 700;
  font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem); letter-spacing: -0.01em;
}
.ac-strip__txt span {
  display: block; margin-top: 0.2rem; color: var(--ink-3);
  font-size: var(--fs-xs); line-height: 1.4;
}
@media (max-width: 420px) {
  .coa-card__logo { width: 62px; }
  .coa-chip { font-size: 0.5rem; padding: 4px 8px; letter-spacing: 0.12em; }
}
.coa-chip--ac {
  color: #0A7A50; border-color: #BFE6D3;
  display: inline-flex; align-items: center; gap: 0.32rem;
}
.coa-chip--ac::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #12A971; flex: none;
}
/* ⚠️ A GIF could not do this. The mark is SVG precisely so the rotation stops
   when the visitor has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .ac-mark__orbit { animation: none; }
}

/* ---- layout ------------------------------------------------------------- */
.coa-grid {
  display: grid; gap: clamp(1rem, 0.5rem + 1.6vw, 1.6rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 900px) { .coa-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- the card ----------------------------------------------------------- */
/* A stack of sub-panels on a tinted card ground, per Brandon's 2026-08-25
   mockup. 🔴 The mockup's accents are a bright azure; every one of them is
   rendered here in SURGE blue (--accent / --accent-press / #4A739A) instead, at
   his instruction. Nothing on this card uses a hue that is not Surge's. */
.coa-card {
  --pad: clamp(0.7rem, 0.58rem + 0.4vw, 0.9rem);
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: var(--pad);
  box-shadow: 0 1px 2px rgba(21, 32, 30, 0.04), 0 20px 44px -28px rgba(46, 75, 99, 0.36);
}

/* ---- header -------------------------------------------------------------- */
.coa-card__head {
  position: relative; padding: 0.15rem 0.25rem 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  column-gap: var(--space-3);
}
.coa-card__chips {
  grid-column: 1; grid-row: 1;
  display: flex; flex-wrap: wrap; gap: 0.35rem; position: relative;
}
.coa-chip {
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-tint); border-radius: 999px; padding: 5px 11px;
  background: var(--surface);
}
.coa-chip--q { color: var(--ink-3); border-color: var(--hairline); letter-spacing: 0.12em; }
.coa-card__logo { grid-column: 2; grid-row: 1; width: 80px; align-self: start; }
.coa-card__logo img { display: block; width: 100%; height: auto; opacity: 0.42; }
@supports ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
  .coa-card__logo {
    height: 35px; background: var(--accent);
    -webkit-mask: url("/assets/img/surge-logo-dark.png") right center/contain no-repeat;
            mask: url("/assets/img/surge-logo-dark.png") right center/contain no-repeat;
  }
  .coa-card__logo img { display: none; }
}
.coa-card__head h4 {
  grid-column: 1 / -1; grid-row: 2;
  position: relative; margin: 0.35rem 0 0; color: var(--ink); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.05;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem);
}
.coa-card:not(.coa-card--full) .coa-card__head h4 { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.3rem); }
.coa-card__lot {
  grid-column: 1 / -1; grid-row: 3;
  position: relative; display: block; margin-top: 0.22rem;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.coa-card__flag {
  font-style: normal; display: inline-block; margin-left: 0.5rem;
  font-size: 0.52rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--accent-press); background: var(--accent-tint);
  border-radius: 999px; padding: 3px 8px; vertical-align: 1px;
}

/* ---- sub-panels ---------------------------------------------------------- */
.coa-pane {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 14px; padding: var(--pad);
}
.coa-pane__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.coa-pane__label {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.coa-pane__meta {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-3);
  letter-spacing: 0.06em; text-align: right;
}
.coa-lab {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
  color: var(--accent-press);
}
.coa-lab svg { flex: none; color: var(--accent); }
.coa-lab b {
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  letter-spacing: -0.005em; white-space: nowrap;
}
.coa-card:not(.coa-card--full) .coa-lab b { font-size: var(--fs-xs); }
.coa-card:not(.coa-card--full) .coa-lab svg { width: 13px; height: 13px; }
.coa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* purity panel */
.coa-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-top: 0.3rem;
}
.coa-main__fig { min-width: 0; }
.coa-purity {
  display: block; color: var(--accent-press);
  font-weight: 700; letter-spacing: -0.045em; line-height: 0.95;
  font-size: clamp(2rem, 1.35rem + 2.4vw, 2.8rem);
  font-variant-numeric: tabular-nums;
}
.coa-card:not(.coa-card--full) .coa-purity { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.1rem); }
.coa-purity i { font-style: normal; font-size: 0.62em; }
.coa-purity__sub { display: block; margin-top: 0.2rem; color: var(--ink-2); font-size: var(--fs-sm); }

/* the QUALITY VERIFIED seal */
.coa-seal { flex: none; width: clamp(54px, 5.4vw, 66px); }
.coa-card:not(.coa-card--full) .coa-seal { width: 52px; }
.coa-seal svg { width: 100%; height: auto; display: block; }
.coa-seal__ring { fill: none; stroke: var(--accent-tint); stroke-width: 2; }
.coa-seal__disc { fill: var(--accent-tint-2); }
.coa-seal__txt {
  fill: var(--accent); font-family: var(--font-mono); font-size: 7.2px;
  font-weight: 600; letter-spacing: 0.16em;
}
.coa-seal__shield { fill: var(--accent); }
.coa-seal__check { fill: none; stroke: var(--surface); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the HPLC purity profile -------------------------------------------- */
/* 🔵 Uniform scaling (no preserveAspectRatio="none"). Non-uniform scaling
   stretches SVG <text> horizontally, which is why the tick numbers and axis
   units can only live inside the svg now that it scales evenly. */
.coa-trace { margin: 0.3rem 0 0; }
.coa-trace__svg { display: block; width: 100%; height: auto; }
.coa-trace__frame { fill: none; stroke: var(--hairline); stroke-width: 1; }
.coa-trace__grid { stroke: var(--hairline); stroke-width: 0.6; }
.coa-trace__g0 { stop-color: var(--trace); stop-opacity: 0.28; }
.coa-trace__g1 { stop-color: var(--trace); stop-opacity: 0.02; }
.coa-trace__line { fill: none; stroke: var(--trace); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.coa-trace__lead { stroke: var(--trace-soft); stroke-width: 0.8; }
.coa-trace__tick, .coa-trace__impt, .coa-trace__peaksub {
  fill: var(--ink-3); font-family: var(--font-mono); font-size: 6.4px; letter-spacing: 0.09em;
}
/* NOT uppercased: the unit is "mAU", and text-transform would print "MAU". */
.coa-trace__xlab, .coa-trace__ylab { fill: var(--ink-3); font-family: var(--font-mono); font-size: 6px; letter-spacing: 0.16em; }
.coa-trace__peaksub { font-size: 5.6px; letter-spacing: 0.16em; text-transform: uppercase; }
.coa-trace__impt { font-size: 6px; }
.coa-trace__peak {
  fill: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
}
/* ⚠️ Load-bearing caption. The curve is DERIVED from the reported purity - the
   archive stores no chromatographic data - and this line is what stops it
   reading as the instrument's own trace. Do not remove it, and do not add a
   retention time for the main peak. */
.coa-trace__cap {
  fill: var(--ink-3); font-family: var(--font-mono); font-size: 5.6px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* The svg scales uniformly, so on a ~330px rail card the 6px in-plot type lands
   near 4px and is unreadable clutter. The rail keeps the frame, the curve and
   the figure that matters; the axis furniture is for the full card. */
.coa-card:not(.coa-card--full) .coa-trace__tick,
.coa-card:not(.coa-card--full) .coa-trace__xlab,
.coa-card:not(.coa-card--full) .coa-trace__ylab,
.coa-card:not(.coa-card--full) .coa-trace__impt,
.coa-card:not(.coa-card--full) .coa-trace__cap,
.coa-card:not(.coa-card--full) .coa-trace__lead { display: none; }
.coa-card:not(.coa-card--full) .coa-trace__peak { font-size: 15px; }
.coa-card:not(.coa-card--full) .coa-trace__peaksub { font-size: 7px; }

/* ---- net peptide content ------------------------------------------------- */
.coa-comp__fig { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.3rem; }
.coa-comp__fig b {
  font-weight: 700; color: var(--ink); letter-spacing: -0.035em; line-height: 1;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); font-variant-numeric: tabular-nums;
}
.coa-comp__fig b i { font-style: normal; font-size: 0.62em; }
.coa-comp__fig > span { color: var(--ink-2); font-size: var(--fs-sm); }
.coa-comp__fig em {
  margin-left: auto; font-style: normal; font-family: var(--font-mono);
  font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.coa-bar {
  position: relative; margin-top: 0.35rem; height: 16px; border-radius: 5px;
  background: var(--accent-tint); overflow: hidden;
}
.coa-bar__fill {
  display: block; height: 100%; width: var(--w, 100%); border-radius: 7px;
  background: linear-gradient(90deg, var(--coa-blue-0) 0%, var(--coa-blue) 55%, var(--coa-blue-2) 100%);
}
/* 🔵 The scale runs 0-120% of label, so the mark is what makes the fill
   readable: it shows whether the vial met, missed or exceeded its label. */
.coa-bar__mark {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--surface); opacity: 0.85;
}
.coa-bar__legend {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); margin-top: 0.28rem;
  font-family: var(--font-mono); font-size: 0.54rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.coa-bar__legend span:nth-child(2) { color: var(--ink-2); }
.coa-bar__legend span:last-child { text-align: right; }

/* ---- reported values ----------------------------------------------------- */
.coa-card__rows { margin: 0; }
.coa-comp + .coa-card__rows { margin-top: 0.45rem; padding-top: 0.05rem; border-top: 1px solid var(--hairline-strong); }
.coa-comp + .coa-card__rows .coa-row:first-child,
.coa-card--full .coa-comp + .coa-card__rows .coa-row:nth-child(-n+2) { border-top: 0; }
.coa-card--full .coa-card__rows {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}
@media (max-width: 620px) { .coa-card--full .coa-card__rows { grid-template-columns: minmax(0, 1fr); } }
.coa-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-4);
  padding: 0.42rem 0; border-top: 1px solid var(--hairline);
}
.coa-row:first-child { border-top: 0; }
.coa-card--full .coa-card__rows .coa-row:nth-child(-n+2) { border-top: 0; }
.coa-card--full .coa-row--wide { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .coa-card--full .coa-card__rows .coa-row:nth-child(2) { border-top: 1px solid var(--hairline); }
}
.coa-row dt {
  display: flex; align-items: center; gap: 0.6rem; color: var(--ink-2);
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.coa-row dt svg { flex: none; width: 13px; height: 13px; color: var(--accent); }
.coa-row dd {
  margin: 0; text-align: right; overflow-wrap: anywhere;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- the CTA ------------------------------------------------------------- */
.coa-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  width: 100%; min-height: 46px; margin-top: auto; cursor: pointer;
  padding: 0.62rem 1.1rem; border: 0; border-radius: 999px;
  color: #fff; font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem); letter-spacing: 0.01em;
  background: linear-gradient(100deg, var(--coa-blue-0) 0%, var(--coa-blue) 55%, var(--coa-blue-2) 100%);
  box-shadow: 0 12px 26px -12px rgba(46, 75, 99, 0.85);
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}
.coa-cta__ico {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.coa-cta__ico svg { width: 15px; height: 15px; }
.coa-cta > svg { width: 18px; height: 18px; transition: transform 0.18s ease; }
.coa-cta:hover { filter: brightness(1.08); box-shadow: 0 16px 32px -12px rgba(46, 75, 99, 0.95); }
.coa-cta:hover > svg { transform: translateX(3px); }
.coa-cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ---- the screening panel ------------------------------------------------- */
/* Matched to Brandon's 2026-08-25 mockup, in Surge green. It sits beside the
   certificate card in a stretch grid, so its own height is set by the card -
   the six items FLEX to fill whatever that is, which is what keeps the two
   columns exactly level however many rows the certificate happens to report. */
.coa-screen {
  --pad: clamp(0.7rem, 0.58rem + 0.4vw, 0.9rem);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 20px; padding: var(--pad);
}
.coa-screen__head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.35rem 0.35rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
.coa-screen__tile {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--accent-tint-2);
  border: 1px solid var(--hairline); color: var(--accent);
}
.coa-screen__tile svg { width: 17px; height: 17px; }
.coa-screen__title {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.coa-screen__count {
  flex: none; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-tint); border-radius: 999px; padding: 5px 11px;
}

.coa-screen__list {
  list-style: none; margin: 0; padding: 0;
  flex: 1; display: flex; flex-direction: column; gap: 0.45rem;
  padding-top: 0.55rem;
}
.coa-screen__item {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(0.7rem, 0.4rem + 1vw, 1.1rem);
  padding: 0.5rem clamp(0.5rem, 0.3rem + 0.6vw, 0.8rem);
  border: 1px solid var(--hairline); border-radius: 14px;
}
/* the illustration tile */
.coa-screen__ico {
  flex: none; display: grid; place-items: center;
  width: clamp(48px, 5.4vw, 66px); aspect-ratio: 1;
  border-radius: 12px; background: var(--accent-tint-2);
  border: 1px solid var(--hairline); color: var(--accent);
}
.coa-art { width: 72%; height: 72%; display: block; }
.coa-screen__body { min-width: 0; }
.coa-screen__h { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
/* 🔵 01..06 encodes a real enumeration - the six assays - not decoration. */
.coa-screen__n {
  font-style: normal; flex: none;
  font-family: var(--font-mono); font-size: 0.86rem; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.coa-screen__h b {
  color: var(--ink); font-weight: 700; letter-spacing: -0.012em;
  font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.05rem); line-height: 1.2;
}
.coa-screen__d {
  display: block; margin-top: 0.2rem; color: var(--ink-3);
  font-size: var(--fs-xs); line-height: 1.35;
}
.coa-screen__ok {
  flex: none; display: grid; place-items: center;
  width: clamp(28px, 2.6vw, 34px); aspect-ratio: 1; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-press);
}
.coa-screen__ok svg { width: 55%; height: 55%; }

@media (max-width: 900px) {
  .coa-screen__item { flex: 0 0 auto; }
}

/* ---- every batch on record ----------------------------------------------- */
.coa-record { margin-top: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); }
.coa-record__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline-strong);
}
.coa-record__head h3 { margin: 0 0 0.3rem; font-size: var(--fs-h4); }
.coa-record__head p { margin: 0; max-width: 60ch; color: var(--ink-3); font-size: var(--fs-xs); }
.coa-record__nav { display: flex; gap: 0.4rem; flex: none; }
.coa-record__arrow {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--hairline-strong); color: var(--ink-2);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.coa-record__arrow svg { width: 16px; height: 16px; }
.coa-record__arrow:hover { border-color: var(--accent); color: var(--accent); }
.coa-record__arrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.coa-figs { display: flex; flex-wrap: wrap; margin: var(--space-5) 0; gap: clamp(1rem, 0.5rem + 1.6vw, 2.2rem); }
.coa-figs > div + div { padding-left: clamp(1rem, 0.5rem + 1.6vw, 2.2rem); border-left: 1px solid var(--hairline); }
.coa-figs dt {
  font-family: var(--font-mono); font-weight: 600; color: var(--ink);
  font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.coa-figs dd {
  margin: 0.45rem 0 0; max-width: 22ch;
  font-family: var(--font-mono); font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
/* On a phone the flex row wraps 2+1 and the wrapped item keeps a divider rule
   with nothing to its left. An explicit 3-track grid holds one row instead. */
@media (max-width: 560px) {
  .coa-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .coa-figs > div + div { padding-left: 0.75rem; }
}

/* Rail. overflow-x lives on its own container so the page body never scrolls
   sideways. 🔴 grid-auto-columns needs a FLOOR: minmax(0, ...) let all the
   cards collapse instead of overflowing - the mirror of the 2026-08-23 buy-box
   bug where a MISSING minmax(0, ...) let content widen a track. */
.coa-record__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 330px;
  gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.25rem 0.25rem 0.9rem; margin: 0 -0.25rem; scrollbar-width: thin;
}
@media (min-width: 1000px) { .coa-record__rail { grid-auto-columns: minmax(330px, calc((100% - 2rem) / 3)); } }
.coa-record__rail > * { scroll-snap-align: start; }
.coa-record__rail:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* ---- animation ----------------------------------------------------------- */
/* 🔴 Everything above is the RESTING state and it is the FINISHED state: the
   trace is drawn and the bar is full. The two rules below only apply once the
   JS has added .coa-anim, which it does only when it can also drive them back,
   and it force-lands every card on a timer regardless. Inverting this would
   make a missing IntersectionObserver render an empty card. */
/* 🔴 The reveal is a CLIP WIPE, not stroke-dasharray.
   dasharray + pathLength="1" is the usual way to draw an SVG line on, but it
   CANNOT be combined with vector-effect: non-scaling-stroke, which this plot
   needs because preserveAspectRatio="none" stretches x by ~1.7 and would
   otherwise render an oval stroke. With non-scaling-stroke the dash pattern is
   resolved in SCREEN space, so pathLength normalisation stops applying and
   "dasharray: 1" becomes a literal 1px-on/1px-off dotted line: the flat
   baseline still reads as a line while the narrow peak dissolves into
   nothing - a chromatogram with no peak, and no error anywhere.
   A clip wipe composites, respects non-scaling-stroke, and carries the area
   fill in with the line. */
.coa-anim .coa-trace__svg { clip-path: inset(0 100% 0 0); }
.coa-anim .coa-bar__fill { width: 0; }

.coa-anim .coa-card.is-live .coa-trace__svg {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1150ms cubic-bezier(0.33, 1, 0.68, 1);
}
.coa-anim .coa-card.is-live .coa-bar__fill {
  width: var(--w, 100%); transition: width 1000ms cubic-bezier(0.33, 1, 0.68, 1) 320ms;
}

@media (prefers-reduced-motion: reduce) {
  .coa-record__rail { scroll-behavior: auto; }
  .coa-cta, .coa-cta svg, .coa-record__arrow { transition: none; }
  .coa-cta:hover svg { transform: none; }
  .coa-anim .coa-trace__svg { clip-path: none; }
  .coa-anim .coa-bar__fill { width: var(--w, 100%); }
}

/* ---- lab mark beside the QUALITY VERIFIED seal --------------------------- */
/* The analysing lab's own mark, scaled to read as the seal's visual equal and
   welded to it on the right of the purity row (Brandon, 2026-08-29). It lives in
   the one part of the card that already had whitespace, so it adds no height to
   the header and cannot push the lot line around.
   ⚠️ These are WORDMARKS, not pictograms: matching the seal on HEIGHT would make
   them enormous, so they match on visual AREA instead - a shorter, wider box that
   reads as the same weight next to a 54-66px disc. `contain` + a width cap keeps
   the three different aspect ratios (1.43 / 1.58 / 1.66) optically equal. */
.coa-main__end { flex: none; display: flex; align-items: center; gap: var(--space-3); }
.coa-labmark {
  flex: none; display: block; object-fit: contain; object-position: right center;
  height: clamp(38px, 3.8vw, 46px); width: auto; max-width: 88px;
}
.coa-card:not(.coa-card--full) .coa-labmark { height: 36px; max-width: 64px; }
@media (max-width: 520px) {
  .coa-main__end { gap: 10px; }
  .coa-labmark { height: 40px; max-width: 78px; }
  .coa-card:not(.coa-card--full) .coa-labmark { height: 34px; max-width: 60px; }
}

/* ---- "Not reported" placeholders on rail cards --------------------------- */
/* Rail cards render a fixed four rows and an always-present net-peptide block so
   every card in a rail is the same height regardless of which fields its
   certificate happened to state. Where a figure is absent the card says so.
   ⚠️ This must never read as a result: it is "Not reported", not "Not tested" and
   not a pass mark. A missing field means the certificate did not state the figure. */
.coa-na { color: var(--ink-3); font-weight: 500; font-style: normal; }
/* the empty third line of the figure block still has to occupy its line, or the
   placeholder card would come out shorter than a card carrying a real figure */
.coa-comp--na .coa-comp__fig em::before { content: "\00a0"; }
.coa-comp--na .coa-comp__fig b { color: var(--ink-3); }
.coa-comp--na .coa-bar__fill { background: var(--hairline); }

/* Rail-card fact values hold ONE line. A blend reports net peptide per component
   ("Ipamorelin - 5.08 mg"), which wrapped to two lines on some lots and not others
   and left the rail uneven again. The full value is on the featured certificate
   and on the PDF. */
.coa-card:not(.coa-card--full) .coa-row dd {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* Rail lab mark: small enough that the purity figure keeps its sub-label on ONE
   line. At 36px the mark took ~68px of width from the figure, so a lot WITH a logo
   wrapped "High Purity Confirmed" to two lines and a lot without did not - 27.9px
   of difference between cards in the same rail. */
.coa-card:not(.coa-card--full) .coa-main__end { gap: 8px; }
.coa-card:not(.coa-card--full) .coa-labmark { height: 28px; max-width: 50px; }
/* a lot whose lab is unknown still reserves the slot, so the figure has the same
   width on every card */
.coa-labmark--none { display: block; height: 28px; width: 50px; }
.coa-card--full .coa-labmark--none { display: none; }

/* The lab chip sits in the purity pane's top row, so the 18 lots with no known lab
   made that row 4.8px shorter than the rest. Reserve the row's height instead. */
.coa-card:not(.coa-card--full) .coa-pane--plot .coa-pane__top { min-height: 22.2px; }

/* 🔴 .coa-row is a grid of `minmax(0,1fr) auto` - the LABEL column flexes and the
   VALUE column sizes to its content. Adding white-space:nowrap to the value above
   therefore blew that `auto` column out to the full text width, collapsed the label
   column to 0, and drew the label and the value ON TOP OF EACH OTHER (visible on
   Appearance, whose value is the longest). On rail cards the value is the column
   that must flex, so it can ellipsise inside its own box instead of overflowing. */
.coa-card:not(.coa-card--full) .coa-row { grid-template-columns: auto minmax(0, 1fr); }
.coa-card:not(.coa-card--full) .coa-row dt { white-space: nowrap; }

/* ============================================================ MOBILE BUY BOX (2026-09-06)
   Phone-only condensed hero: 4:3 photo tile with trust labels, tighter title
   block, one-row size cards with top-edge ribbons, quantity + View COA row,
   full-width Add to Cart, BOGO note under the button. Desktop untouched. */
.buybox__qtyrow { display: block; }
.buybox__coa { display: none; }
.pdp__tile-pill { display: none; }
@media (max-width: 640px) {
  .pdp .breadcrumb { display: none; }
  .pdp > .container--md { padding-top: var(--space-3); }
  .pdp__hero { margin-bottom: var(--space-5); gap: 14px; }

  /* photo tile: the wide photo, edge to edge, cropped to 4:3 */
  .pdp .pdp__media-frame--photo { position: relative; aspect-ratio: 4 / 3; min-height: 0 !important; border-radius: 18px; overflow: hidden; background: #D9DAE3 !important; }
  .pdp .pdp__media-frame--photo picture { position: absolute; inset: 0; display: block; }
  .pdp .pdp__media-frame--photo .pdp__photo { position: absolute; inset: 0; width: 100%; height: 100% !important; max-height: none !important; object-fit: cover; object-position: 50% 50%; transform: none; filter: none; }
  .pdp__tile-pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,0.92); border: 1px solid #DCDEE5; font-family: var(--font-mono); font-size: 7.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; line-height: 1; }
  .pdp__tile-pill--tl { top: 9px; left: 9px; }
  .pdp__tile-pill--tr { top: 9px; right: 9px; }
  .pdp__tile-pill .flag-icon { width: 10px; height: auto; border-radius: 1px; }
  .pdp__tile-pill i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--success); }

  /* title block */
  .buybox { display: flex; flex-direction: column; }
  .buybox__title { font-size: 1.65rem; line-height: 1.02; }
  .buybox__summary { margin-top: 3px; font-size: 0.85rem; line-height: 1.35; }
  .buybox__price { margin-top: 6px; gap: 8px; }
  .buybox__price .now { font-size: 1.4rem; }
  .buybox__price .bogo { font-size: 0.8rem; }
  .buybox__chips { display: none; }
  .buybox__qtylabel { margin-top: var(--space-4); margin-bottom: 8px; }

  /* size cards: one row, identical, ribbon along the top edge */
  .variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .variants:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variants:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: baseline; column-gap: 4px; row-gap: 0; padding: 24px 10px 0; height: 72px; overflow: hidden; min-width: 0; border-radius: 12px; }
  .variant-card__main, .variant-card__right { display: contents; }
  .variant-card__main b { grid-column: 1; grid-row: 1; font-size: 0.95rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .variant-card__price { grid-column: 2; grid-row: 1; font-size: 0.95rem; line-height: 1.1; }
  .variant-card__permg { grid-column: 1 / -1; grid-row: 2; margin-top: 3px; font-size: 0.64rem; white-space: nowrap; }
  .variant-card__save, .variant-card__best, .variant-card__oos { position: absolute; left: 0; right: 0; top: 0; height: 17px; display: flex; align-items: center; justify-content: center; border-radius: 0; padding: 0; font-size: 0.54rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
  .variant-card__save { background: #E8F3EC; color: var(--success); }
  .variant-card__best { background: var(--success); color: #fff; }
  .variant-card__best::after { content: attr(data-save); margin-left: 0.35em; }
  .variant-card:has(.variant-card__best) .variant-card__save { display: none; }
  .variant-card__oos { background: var(--ink-3); color: #fff; }

  /* quantity row: label + stepper left, View COA right */
  .buybox__qtyrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
  .buybox__qtyrow .buybox__qtylabel { margin: 0; }
  .buybox__qtyrow .qty { margin-right: auto; }
  .buybox__coa { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 10px; border: 1px solid rgba(58,93,122,0.42); border-radius: 9px; background: linear-gradient(180deg, #FFFFFF, var(--accent-tint-2)); color: var(--accent-press); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,39,64,0.06); white-space: nowrap; text-align: left; cursor: pointer; font-family: inherit; text-decoration: none; }
  .buybox__coa-seal { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; position: relative; }
  .buybox__coa-seal::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgba(58,93,122,0.55); }
  .buybox__coa-seal::after { content: ""; width: 5px; height: 8px; border: solid var(--accent); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); margin-top: -2px; }
  .buybox__coa-t { display: flex; flex-direction: column; line-height: 1.05; }
  .buybox__coa-t b { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--accent-press); }
  .buybox__coa-t small { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--success); margin-top: 3px; }

  /* button, then the notes beneath it */
  .btn--cart { margin-top: 12px; padding-block: 1em; }
  .bogo-callout { order: 1; margin-top: 10px; padding: 0.4rem 0.8rem; }
  .ship-line { order: 2; }
  .trust-icons { order: 3; }
  .passed-cards { order: 4; }
  .cross-sell { order: 5; }
  .rfid-card { order: 6; }
}