/* ============================================================
   BioActive+ Mobile — consolidated stylesheet (Dawn asset)
   Auto-built from the prototype CSS. Everything is scoped under
   .ba/.pdp and the page wrapper carries data-dir="C" (App theme).
   Colour pickers in each section override the --m-* / brand vars
   via inline style on the wrapper.
   ============================================================ */

/* ============================================================
   COLLAGEN PDP LAYOUT CONTROLLER
   Hides mobile sections on desktop; hides desktop sections on mobile.
   This CSS is only loaded on the collagen PDP (via ba-m-* sections).
   ============================================================ */

/* Desktop: hide ALL mobile (mob-*) sections */
[id$="__mob-press"],[id$="__mob-why"],
[id$="__mob-ugc"],[id$="__mob-poog"],[id$="__mob-photo"],
[id$="__mob-timeline"],[id$="__mob-learn"],[id$="__mob-compare"],
[id$="__mob-reviews"],[id$="__mob-protocol"],[id$="__mob-faq"],
[id$="__mob-sticky"] { display:none!important; }

/* Mobile: hide desktop sections (except hero) + show mobile sections */
@media(max-width:767px){
  [id$="__press"],[id$="__how"],[id$="__why"],[id$="__power"],
  [id$="__ugc"],[id$="__science"],[id$="__learn"],[id$="__compare"],
  [id$="__timeline"],[id$="__protocol"],[id$="__reviews"],[id$="__faq"],
  [id$="__sticky-sp"] { display:none!important; }

  [id$="__mob-press"],[id$="__mob-why"],
  [id$="__mob-ugc"],[id$="__mob-poog"],[id$="__mob-photo"],
  [id$="__mob-timeline"],[id$="__mob-learn"],[id$="__mob-compare"],
  [id$="__mob-reviews"],[id$="__mob-protocol"],[id$="__mob-faq"],
  [id$="__mob-sticky"] { display:block!important; }
}

/* ===== bundle-styles.css ===== */
/* ============================================================
   BioActive+ — Premium Cart Redesign
   Design tokens + component styles
   ============================================================ */

:root {
  /* Brand greens */
  --green-900: #0e342a;
  --green-800: #134034;
  --green-700: #1b5341;   /* primary */
  --green-600: #246b53;
  --green-500: #2f8163;
  --green-100: #e4ede7;
  --green-50:  #eef4ef;

  /* Gold accents */
  --gold-700: #9c6f24;
  --gold-600: #b3842f;
  --gold-500: #c79a47;
  --gold-300: #e6d3a4;
  --gold-100: #f3ead2;

  /* Neutrals / paper — v4: lighter, brighter, whiter cards */
  --cream:  #f7f5ef;
  --paper:  #ffffff;
  --paper-2:#fbfaf6;
  --ink:    #1c231e;
  --ink-soft:#5c655d;
  --ink-faint:#8a9189;
  --line:   #ece8de;
  --line-soft:#f3f0e8;

  /* ---- v4 splash accents (harmonious oklch-derived pastels) ---- */
  --coral-600:#d96a4f;  --coral-500:#e57e62;  --coral-200:#f6c6b6;  --coral-50:#fcefe9;
  --teal-600: #1f8f86;  --teal-500: #2aa39a;  --teal-200: #aadfd9;  --teal-50: #e7f4f2;
  --lilac-600:#7d5bc0;  --lilac-500:#9072cc;  --lilac-200:#d4c5ee;  --lilac-50:#f1ecfa;
  --amber-600:#d2982a;  --amber-500:#e2ad3e;  --amber-200:#f3dca0;  --amber-50:#fbf3df;

  /* Semantic */
  --primary: var(--green-700);
  --accent:  var(--gold-600);
  --bg:      var(--cream);
  --success: #2f8163;
  --danger:  #b4452f;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(20,40,30,.05), 0 1px 3px rgba(20,40,30,.04);
  --shadow-md: 0 6px 20px rgba(20,40,30,.07), 0 2px 6px rgba(20,40,30,.04);
  --shadow-lg: 0 24px 60px rgba(14,40,30,.16), 0 8px 24px rgba(14,40,30,.10);
  --shadow-drawer: -24px 0 80px rgba(14,40,30,.22);

  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

.ba {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}

.ba h1, .ba h2, .ba h3, .ba h4 { margin: 0; font-weight: 600; }
.ba p { margin: 0; }
.serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: .1px; }
.tnum  { font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: .12em; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-sans);
  border: none; cursor: pointer; border-radius: 999px;
  font-weight: 600; letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.995); }

.btn-primary {
  background: var(--green-700); color: #fcfbf4;
  padding: 16px 22px; font-size: 15px;
  box-shadow: 0 8px 20px rgba(20,70,52,.22);
}
.btn-primary:hover { background: var(--green-800); box-shadow: 0 10px 26px rgba(20,70,52,.30); }

.btn-checkout {
  width: 100%; padding: 18px; font-size: 15.5px; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 14px;
  background: linear-gradient(180deg, var(--m-accent, var(--green-600)), color-mix(in srgb, var(--m-accent, var(--green-700)) 80%, #000));
  color: #fdfcf5; box-shadow: 0 12px 28px rgba(20,70,52,.28);
}
.btn-checkout:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent, var(--green-700)) 90%, #fff), color-mix(in srgb, var(--m-accent, var(--green-700)) 70%, #000)); }

.btn-add {
  background: var(--green-700); color: #fcfbf4;
  padding: 11px 22px; font-size: 13.5px; border-radius: 999px;
}
.btn-add:hover { background: var(--green-800); }
.btn-add.added { background: var(--green-100); color: var(--green-700); }

.btn-ghost {
  background: transparent; color: var(--green-700);
  border: 1.5px solid var(--green-100); padding: 10px 18px; font-size: 13.5px;
}
.btn-ghost:hover { border-color: var(--green-600); background: var(--green-50); }

.icon-btn {
  background: transparent; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(20,40,30,.05); color: var(--ink); }

/* ---------- stepper ---------- */
.stepper {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--paper); overflow: hidden; height: 40px;
}
.stepper button {
  width: 40px; height: 100%; border: none; background: transparent; cursor: pointer;
  color: var(--green-700); display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.stepper button:hover { background: var(--green-50); }
.stepper button:disabled { color: var(--ink-faint); cursor: not-allowed; background: transparent; }
.stepper .count {
  min-width: 34px; text-align: center; font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* ---------- subscription segmented ---------- */
.subseg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--green-50); border-radius: 999px; border: 1px solid var(--green-100);
}
.subseg button {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  padding: 6px 13px; border-radius: 999px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .16s ease;
}
.subseg button.on { background: var(--green-700); color: #fcfbf4; box-shadow: var(--shadow-sm); }
.subseg .save-chip {
  font-size: 10.5px; font-weight: 700; background: var(--gold-100); color: var(--gold-700);
  padding: 1px 6px; border-radius: 999px;
}
.subseg button.on .save-chip { background: rgba(255,255,255,.16); color: #f3e6c4; }

/* ---------- progress / shipping ---------- */
.ship-bar { background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.ship-track {
  height: 7px; border-radius: 999px; background: var(--green-100); overflow: hidden; position: relative;
}
.ship-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green-500), var(--green-700));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.ship-fill.full { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); }

/* ---------- cards / pills ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.pill-review {
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); color: var(--ink);
}
.pill-save {
  background: var(--gold-100); color: var(--gold-700); font-weight: 700;
}

.tag-saving {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--green-600); font-size: 13px; font-weight: 600;
}

/* ---------- prices ---------- */
.price { font-variant-numeric: tabular-nums; font-weight: 600; }
.strike { text-decoration: line-through; color: var(--ink-faint); font-weight: 500; }
.price-now { color: var(--green-700); font-weight: 700; }

/* ---------- line item ---------- */
.line-item { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.line-item:last-child { border-bottom: none; }
.thumb {
  width: 92px; height: 92px; border-radius: 14px; flex-shrink: 0; position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.thumb-lg { width: 104px; height: 104px; }

/* product placeholder tile */
.prod-tile { width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; position: relative; }
.prod-tile .wm { font-family: var(--font-serif); font-weight: 600; font-size: 10px; letter-spacing: .02em; opacity: .9; }
.prod-tile .bottle { width: 34%; height: 52%; border-radius: 5px 5px 7px 7px; position: relative; }
.prod-tile .cap { position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:42%; height:9px; border-radius:3px; }

/* ---------- discount accordion ---------- */
.disc-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  color: var(--green-700); font-weight: 600; font-size: 13.5px; background: none; border: none;
  font-family: var(--font-sans); padding: 0;
}
.disc-toggle .chev { transition: transform .2s; }
.disc-toggle.open .chev { transform: rotate(180deg); }
.disc-input-wrap {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease;
}
.disc-input-wrap.open { grid-template-rows: 1fr; }
.disc-input-inner { overflow: hidden; }
.disc-field {
  display: flex; gap: 8px; margin-top: 12px;
}
.disc-field input {
  flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-family: var(--font-sans); font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); background: var(--paper-2);
}
.disc-field input:focus { outline: none; border-color: var(--green-500); background: var(--paper); }
.disc-apply {
  border: none; background: var(--ink); color: #fff; border-radius: 10px;
  padding: 0 20px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--font-sans);
}
.disc-apply:hover { background: var(--green-800); }
.code-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--green-50); border: 1px dashed var(--green-500); color: var(--green-700);
  padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 13px;
}
.code-chip button { background: none; border: none; cursor: pointer; color: var(--green-600); display: flex; padding: 0; }
.disc-error { color: var(--danger); font-size: 12.5px; margin-top: 8px; font-weight: 500; }

/* ---------- summary rows ---------- */
.sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 14px; }
.sum-row .lbl { color: var(--ink-soft); }
.sum-row.save .lbl, .sum-row.save .val { color: var(--green-600); font-weight: 600; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--line); }
.sum-total .t-lbl { font-size: 17px; font-weight: 700; }
.sum-total .t-val { font-size: 23px; font-weight: 700; color: var(--green-700); font-variant-numeric: tabular-nums; }

.save-banner {
  background: var(--gold-100); color: var(--gold-700); border-radius: 12px;
  padding: 11px 14px; font-size: 13px; font-weight: 700; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* ---------- trust badges ---------- */
.trust-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-item {
  display: flex; align-items: center; gap: 9px; color: var(--ink-soft);
  font-size: 12px; font-weight: 600;
}
.trust-item svg { color: var(--green-600); flex-shrink: 0; }
.pay-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.pay-chip {
  height: 26px; min-width: 40px; padding: 0 9px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft);
}
.cert-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cert-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1px solid var(--green-100); border-radius: 10px; background: var(--green-50);
  font-size: 11px; font-weight: 700; color: var(--green-700); letter-spacing: .02em;
}

/* ---------- upsell ---------- */
.upsell-head { display: flex; align-items: center; justify-content: space-between; }
.upsell-rail { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 4px; scrollbar-width: none; }
.upsell-rail::-webkit-scrollbar { display: none; }
.upsell-card {
  flex: 0 0 auto; width: 250px; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 12px;
}
.upsell-card.grid-mode { width: auto; }
.upsell-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.upsell-stack { display: flex; flex-direction: column; gap: 10px; }
.upsell-stack .upsell-card { width: auto; }
.upsell-mini-thumb { width: 56px; height: 56px; border-radius: 11px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); }

/* horizontal half-width slider cards (vertical layout inside) */
.upsell-slide {
  flex: 0 0 calc(50% - 6px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px;
}
.upsell-slide-thumb { width: 100%; height: 78px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.upsell-rail.snap { scroll-snap-type: x mandatory; }

/* ---------- drawer ---------- */
.drawer {
  display: flex; flex-direction: column; background: var(--cream); height: 100%;
  box-shadow: var(--shadow-drawer);
}
.drawer-scroll { flex: 1; overflow-y: auto; }
.drawer-scroll::-webkit-scrollbar { width: 7px; }
.drawer-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.drawer-footer { border-top: 1px solid var(--line); background: var(--paper); }

.scrim { position: absolute; inset: 0; background: rgba(14,30,24,.42); backdrop-filter: blur(3px); }

/* storefront backdrop (behind drawer) */
.storefront { position: absolute; inset: 0; overflow: hidden; background: var(--cream); }

/* ---------- view switcher (app chrome, outside frames) ---------- */
.app-shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: #eceae3; }
.app-bar {
  height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 18px;
  padding: 0 22px; background: #faf8f1; border-bottom: 1px solid #e3dfd3;
  z-index: 5;
}
.brand-mark { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--green-800); }
.brand-leaf { width: 26px; height: 26px; border-radius: 7px; background: var(--green-700); display: flex; align-items: center; justify-content: center; }
.seg {
  display: inline-flex; background: #eceae1; border: 1px solid #e0dccf; border-radius: 999px; padding: 3px;
}
.seg button {
  border: none; background: transparent; cursor: pointer; font-family: var(--font-sans);
  font-weight: 600; font-size: 12.5px; color: var(--ink-soft); padding: 7px 15px; border-radius: 999px;
  transition: all .15s; white-space: nowrap;
}
.seg button.on { background: #fff; color: var(--green-800); box-shadow: var(--shadow-sm); }
.app-stage { flex: 1; position: relative; overflow: hidden; }
.fit-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* site header for full page (desktop) */
.site-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; border-bottom: 1px solid var(--line); background: var(--paper); }
.site-nav { display: flex; gap: 28px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.site-nav span { cursor: pointer; }
.site-nav span:hover { color: var(--green-700); }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.divider { height: 1px; background: var(--line-soft); }

/* subscription note */
.sub-note {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--green-600);
  font-weight: 600; margin-top: 8px;
}

/* subscription frequency selector */
.sub-detail {
  margin-top: 10px; padding: 11px 12px; border-radius: 12px;
  background: var(--green-50); border: 1px solid var(--green-100);
  display: flex; flex-direction: column; gap: 9px;
}
.freq-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.freq-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--green-700); white-space: nowrap; }
.freq-seg { display: inline-flex; background: var(--paper); border: 1px solid var(--green-100); border-radius: 999px; padding: 2px; gap: 2px; }
.freq-seg button {
  border: none; background: transparent; cursor: pointer; font-family: var(--font-sans);
  font-weight: 600; font-size: 11.5px; padding: 5px 12px; border-radius: 999px; color: var(--ink-soft);
  transition: all .15s ease; white-space: nowrap;
}
.freq-seg button.on { background: var(--green-700); color: #fcfbf4; box-shadow: var(--shadow-sm); }

/* gift / free item row */
.free-gift {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--green-50); border: 1px dashed var(--green-500);
}

@keyframes popIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop { animation: popIn .28s cubic-bezier(.2,.9,.3,1.4); }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }


/* ===== bundle-extra.css ===== */
/* ============================================================
   BioActive+ — Bundle Builder — page-specific styles
   Extends bundle-styles.css (cart tokens / components)
   ============================================================ */

.bb-page { background: var(--bg); min-height: 100vh; }
.bb-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }

/* radius + accent are driven live by tweaks */
.bb-page {
  --bb-r: 22px;
  --accent: var(--gold-600);
}

/* ---------- site header (slim, sticky) ---------- */
.bb-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bb-head-in { max-width: 1200px; margin: 0 auto; padding: 14px clamp(18px,4vw,48px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bb-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.bb-brand-leaf { width: 32px; height: 32px; border-radius: 9px; background: var(--green-700);
  display: flex; align-items: center; justify-content: center; color: #f3e6c4; }
.bb-brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: var(--green-800); letter-spacing: .2px; }
.bb-head-nav { display: flex; gap: 26px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.bb-head-nav span { cursor: pointer; transition: color .15s; }
.bb-head-nav span:hover { color: var(--green-700); }
.bb-head-bag { display: inline-flex; align-items: center; gap: 8px; color: var(--green-800);
  font-weight: 700; font-size: 14px; }
@media (max-width: 860px){ .bb-head-nav { display: none; } }

/* ---------- HERO ---------- */
.bb-hero { padding: clamp(34px,5vw,64px) 0 clamp(20px,3vw,34px); }
.bb-hero-grid { display: grid; grid-template-columns: 1.04fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; }
.bb-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.bb-eyebrow::before { content:""; width:26px; height:1.5px; background: var(--accent); display:inline-block; }
.bb-hero-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(38px,5.2vw,64px);
  line-height: 1.03; letter-spacing: -0.5px; color: var(--green-900); margin: 0 0 22px; }
.bb-hero-title em { font-style: italic; color: var(--accent); }
.bb-hero-grid .bb-hero-copy { font-size: clamp(15px,1.3vw,18px); line-height: 1.55; color: var(--ink-soft); max-width: 40ch; margin: 0 0 28px; }
.bb-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.bb-hero-stats { display: flex; gap: 26px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.bb-stat .n { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--green-800); }
.bb-stat .l { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }

/* hero media */
.bb-hero-media { position: relative; display: flex; flex-direction: column; gap: 16px; }
.bb-hero-imgwrap { position: relative; }
.bb-hero-slot { width: 100%; aspect-ratio: 4 / 3.7; border-radius: var(--bb-r);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--paper-2); }

/* hero subscribe widget */
.bb-hero-sub { background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 16px; box-shadow: var(--shadow-sm); }
.bb-hero-sub-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bb-hero-sub-top .lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--green-800); }
.bb-hero-sub .subseg { width: 100%; }
.bb-hero-sub .subseg button { flex: 1; justify-content: center; }
.bb-hero-sub-note { font-size: 12px; color: var(--green-600); font-weight: 600; margin-top: 11px;
  display: flex; align-items: center; gap: 7px; line-height: 1.4; }
.bb-hero-badge { position: absolute; top: 18px; left: -14px; z-index: 3;
  background: var(--green-700); color: #f3e6c4; border-radius: 14px; padding: 11px 16px;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 9px; }
.bb-hero-badge .big { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1; }
.bb-hero-float { position: absolute; right: -16px; bottom: 26px; z-index: 3;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px 15px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 11px; max-width: 220px; }
.bb-hero-float .av { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; flex: none; border:1px solid var(--line); }

/* quiz CTA strip under hero */
.bb-quizbar { margin-top: clamp(20px,3vw,34px); display: flex; align-items: center; gap: 18px;
  background: linear-gradient(100deg, var(--green-800), var(--green-700)); color: #eef4ef;
  border-radius: var(--bb-r); padding: 20px clamp(20px,3vw,30px); box-shadow: var(--shadow-md);
  flex-wrap: wrap; }
.bb-quizbar-ic { width: 50px; height: 50px; border-radius: 14px; background: rgba(243,230,196,.16);
  display: flex; align-items: center; justify-content: center; color: var(--gold-300); flex: none; }
.bb-quizbar h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: #fdfcf5; }
.bb-quizbar p { font-size: 13.5px; color: rgba(238,244,239,.75); margin-top: 3px; }
.bb-quizbar .btn { margin-left: auto; }
.btn-cream { background: var(--cream); color: var(--green-800); padding: 14px 22px; font-size: 14.5px; }
.btn-cream:hover { background: #fff; }

/* ---------- section heading ---------- */
.bb-sec { padding: clamp(30px,5vw,58px) 0; }
.bb-sec-head { text-align: center; max-width: 620px; margin: 0 auto clamp(26px,3vw,40px); }
.bb-sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; }
.bb-sec-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px,3.6vw,40px);
  line-height: 1.08; color: var(--green-900); letter-spacing: -0.3px; }
.bb-sec-sub { font-size: 15.5px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; }

/* ============================================================
   BUILDER
   ============================================================ */
.bb-builder { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--bb-r) + 4px);
  box-shadow: var(--shadow-md); overflow: hidden; }
.bb-builder-grid { display: grid; }
.bb-builder.is-stack   .bb-builder-grid { grid-template-columns: 1fr; }
.bb-builder.is-sidebar .bb-builder-grid { grid-template-columns: 1fr 360px; }
.bb-builder.is-split   .bb-builder-grid { grid-template-columns: 1.25fr 0.95fr; }

.bb-main { padding: clamp(22px,3vw,34px); min-width: 0; }
.bb-aside { background: var(--paper-2); border-left: 1px solid var(--line); padding: clamp(22px,3vw,30px); min-width: 0; }
.bb-builder.is-stack .bb-aside { border-left: none; border-top: 1px solid var(--line); background: var(--paper-2); }
.bb-builder.is-stack .bb-aside-inner { max-width: 1200px; }

/* sticky summary on sidebar/split */
@media (min-width: 921px){
  .bb-builder.is-sidebar .bb-aside-inner,
  .bb-builder.is-split   .bb-aside-inner { position: sticky; top: 90px; }
}

/* builder header (bundle identity + price) */
.bb-bhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.bb-bhead-l { display: flex; align-items: flex-start; gap: 15px; min-width: 0; flex: 1 1 auto; }
.bb-bhead-icon { width: 46px; height: 46px; border-radius: 12px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--green-700); background: var(--green-50); flex:none; }
.bb-bhead-title { font-family: var(--font-serif); font-size: clamp(22px,2.6vw,28px); font-weight: 600;
  color: var(--green-900); line-height: 1.08; }
.bb-bhead-meta { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; font-weight: 500; }
.bb-bhead-r { text-align: right; margin-left: auto; flex: 0 0 auto; }
.bb-bhead-pills { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
.pill-save { white-space: nowrap; }

/* stack-layout aside: subscribe | summary side by side, collapse on mobile */
.bb-stack-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 720px){ .bb-stack-aside { grid-template-columns: 1fr; gap: 18px; } }
.bb-freeship { font-size: 12px; font-weight: 700; color: var(--green-700); text-transform: uppercase; letter-spacing: .04em;
  display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-bottom: 6px; }
.bb-price-row { display: flex; align-items: baseline; gap: 11px; justify-content: flex-end; }
.bb-price-now { font-family: var(--font-serif); font-size: clamp(28px,3.4vw,38px); font-weight: 700; color: var(--green-800);
  font-variant-numeric: tabular-nums; line-height: 1; }
.bb-price-cur { font-size: 16px; font-weight: 600; color: var(--green-700); }

/* discount ladder */
.bb-ladder { margin-bottom: 24px; }
.bb-ladder-track { position: relative; height: 6px; border-radius: 999px; background: var(--green-100); margin: 30px 6px 8px; }
.bb-ladder-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green-500), var(--green-700)); transition: width .5s cubic-bezier(.4,0,.2,1); }
.bb-ladder-fill.max { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); }
.bb-milestone { position: absolute; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; }
.bb-ms-dot { width: 18px; height: 18px; border-radius: 999px; background: var(--paper); border: 2.5px solid var(--green-100);
  display: flex; align-items: center; justify-content: center; transition: all .3s; color:#fff; }
.bb-milestone.hit .bb-ms-dot { background: var(--green-700); border-color: var(--green-700); }
.bb-milestone.hit.max .bb-ms-dot { background: var(--gold-600); border-color: var(--gold-600); }
.bb-ms-label { position: absolute; bottom: 20px; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); transition: color .3s; }
.bb-milestone.hit .bb-ms-label { color: var(--green-700); }
.bb-ladder-hint { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
.bb-ladder-hint b { color: var(--accent); }

/* slots */
.bb-slots-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 13px; }
.bb-slots-head h4 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.bb-slots-head .ct { font-size: 13px; font-weight: 700; color: var(--green-700); }
.bb-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bb-builder.is-split .bb-slots { grid-template-columns: repeat(4, 1fr); }
.bb-slot { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: visible; }
.bb-slot-empty { border: 2px dashed var(--green-100); background: var(--green-50);
  display: flex; align-items: center; justify-content: center; color: var(--green-500);
  transition: border-color .2s, background .2s, color .2s; cursor: default; }
.bb-slot-empty.next { border-color: var(--green-500); color: var(--green-700); }
.bb-slot-empty .plus { width: 30px; height: 30px; border-radius: 999px; border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center; }
.bb-slot-filled { border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-sm); }
.bb-slot-x { position: absolute; top: -8px; right: -8px; z-index: 4; width: 24px; height: 24px; border-radius: 999px;
  background: var(--danger); color: #fff; border: 2px solid var(--paper); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s; }
.bb-slot-x:hover { transform: scale(1.12); }
.bb-slot-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 7px;
  background: linear-gradient(transparent, rgba(20,40,30,.55)); color: #fff; font-size: 10.5px; font-weight: 700;
  text-align: center; letter-spacing: .02em; }

/* product picker */
.bb-picker-head { display:flex; align-items:baseline; justify-content:space-between; margin: 26px 0 14px; }
.bb-picker-head h4 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.bb-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bb-builder.is-split .bb-picker { grid-template-columns: repeat(2, 1fr); }
.bb-prod { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.bb-prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-100); }
.bb-prod-img { aspect-ratio: 1.5; position: relative; }
.bb-prod-body { padding: 12px 13px 13px; display: flex; flex-direction: column; flex: 1; }
.bb-prod-name { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.bb-prod-ben { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; font-weight: 500; }
.bb-prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }
.bb-prod-price { font-size: 13.5px; font-weight: 700; color: var(--green-700); font-variant-numeric: tabular-nums; }
.bb-prod-price small { font-size: 10.5px; color: var(--ink-faint); font-weight: 600; }
.bb-prod-add { width: 34px; height: 34px; border-radius: 999px; background: var(--green-700); color: #f3e6c4;
  display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; transition: background .15s, transform .12s; flex:none; }
.bb-prod-add:hover { background: var(--green-800); }
.bb-prod-add:active { transform: scale(.92); }
.bb-prod-incart { position: absolute; top: 9px; right: 9px; background: var(--green-700); color: #fff;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }

/* subscribe block */
.bb-sub { background: var(--green-50); border: 1px solid var(--green-100); border-radius: 16px; padding: 16px; margin-top: 4px; }
.bb-sub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bb-sub-top .lbl { font-size: 13.5px; font-weight: 700; color: var(--green-800); display:flex; align-items:center; gap:8px; }
.bb-sub-hint { font-size: 12px; color: var(--green-600); font-weight: 600; margin-top: 11px;
  display: flex; align-items: center; gap: 7px; line-height: 1.4; }

/* aside summary */
.bb-aside-title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--green-900); margin-bottom: 14px; }
.bb-empty-note { text-align:center; padding: 20px; color: var(--ink-faint); font-size: 13.5px; }

/* CTA */
.bb-cta-row { margin-top: 20px; }
.bb-cta-row .btn-checkout { border-radius: 14px; }
.bb-reassure { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:12px; color: var(--ink-faint); font-size:11.5px; font-weight:600; }
.bb-reassure span { display:inline-flex; align-items:center; gap:5px; }
.bb-startover { width: 100%; margin-top: 10px; background: none; border: 1px solid var(--line); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
  padding: 11px; border-radius: 12px; transition: color .15s, background .15s, border-color .15s; }
.bb-startover:hover:not(:disabled) { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.bb-startover:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   CONCERNS
   ============================================================ */
.bb-concerns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bb-concern { position: relative; text-align: left; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--bb-r); padding: 20px; cursor: pointer; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s; font-family: inherit; }
.bb-concern:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-100); }
.bb-concern.active { border-color: var(--green-600); box-shadow: 0 0 0 2px var(--green-600) inset, var(--shadow-md); }
.bb-concern-bottles { display: flex; margin-bottom: 16px; }
.bb-concern-bottle { width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--paper); overflow: hidden; box-shadow: var(--shadow-sm); }
.bb-concern-bottle + .bb-concern-bottle { margin-left: -14px; }
.bb-concern-name { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--green-900); }
.bb-concern-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; font-weight: 500; }
.bb-concern-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--accent);
  opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s; }
.bb-concern:hover .bb-concern-cta { opacity: 1; transform: translateX(0); }
.bb-concern-save { position: absolute; top: 16px; right: 16px; }

/* ============================================================
   QUIZ MODAL
   ============================================================ */
.bb-modal-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(14,30,24,.46); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 22px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.bb-modal-scrim.show { opacity: 1; pointer-events: auto; }
.bb-modal { width: min(560px, 100%); background: var(--cream); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(16px) scale(.98); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); }
.bb-modal-scrim.show .bb-modal { transform: none; }
.bb-modal-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--paper); }
.bb-modal-prog { display: flex; gap: 6px; align-items: center; }
.bb-modal-prog .d { width: 26px; height: 5px; border-radius: 999px; background: var(--green-100); transition: background .3s; }
.bb-modal-prog .d.on { background: var(--green-600); }
.bb-modal-body { padding: clamp(24px,4vw,38px); }
.bb-modal-q { font-family: var(--font-serif); font-size: clamp(22px,3vw,28px); font-weight: 600; color: var(--green-900); line-height: 1.12; }
.bb-modal-sub { font-size: 14px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }
.bb-modal-opts { display: grid; gap: 11px; margin-top: 26px; }
.bb-modal-opts.cols2 { grid-template-columns: 1fr 1fr; }
.bb-opt { display: flex; align-items: center; gap: 13px; text-align: left; background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 15px; padding: 16px 18px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, transform .12s; }
.bb-opt:hover { border-color: var(--green-500); background: var(--green-50); transform: translateY(-1px); }
.bb-opt-dot { width: 40px; height: 40px; border-radius: 11px; background: var(--green-50); border:1px solid var(--green-100);
  display: flex; align-items: center; justify-content: center; color: var(--green-700); flex: none; }
.bb-opt-l { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.bb-opt-hint { font-size: 12px; color: var(--ink-soft); margin-top: 2px; font-weight: 600; }
.bb-opt-arrow { margin-left: auto; color: var(--ink-faint); transition: transform .2s, color .2s; }
.bb-opt:hover .bb-opt-arrow { color: var(--green-600); transform: translateX(3px); }
.bb-modal-back { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-top: 22px; }
.bb-modal-back:hover { color: var(--green-700); }

/* concern confirmation modal */
.bb-confirm-list { display: flex; flex-direction: column; gap: 8px; margin: 22px 0; }
.bb-confirm-row { display: flex; align-items: center; gap: 13px; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 13px; padding: 10px 14px; }
.bb-confirm-tile { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); flex: none; }
.bb-confirm-name { font-size: 14.5px; font-weight: 600; color: var(--ink); min-width: 0; }
.bb-confirm-qty { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--green-700); font-variant-numeric: tabular-nums; }
.bb-confirm-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 18px; border-top: 1px solid var(--line); }
.bb-confirm-meta { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.bb-confirm-tags { display: flex; gap: 7px; }
.bb-confirm-price { text-align: right; }
.bb-confirm-price .strike { display: block; font-size: 13px; }
.bb-confirm-price .now { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--green-800); font-variant-numeric: tabular-nums; }

/* quiz result */
.bb-result-tiles { display: flex; justify-content: center; margin: 4px 0 20px; }
.bb-result-tile { width: 58px; height: 58px; border-radius: 14px; border: 2px solid var(--cream); overflow: hidden; box-shadow: var(--shadow-sm); }
.bb-result-tile + .bb-result-tile { margin-left: -16px; }
.bb-result-price { text-align:center; margin: 14px 0 22px; }
.bb-result-price .now { font-family: var(--font-serif); font-size: 34px; font-weight: 700; color: var(--green-800); }
.bb-result-price .was { text-decoration: line-through; color: var(--ink-faint); font-size: 16px; margin-left: 8px; font-weight: 600; }

/* footer */
.bb-foot { border-top: 1px solid var(--line); background: var(--paper); padding: 30px 0; margin-top: 30px; }
.bb-foot-in { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px,4vw,48px); display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-faint); font-size: 13px; }

/* ============================================================
   LEARN — "the science, simply" accordion
   ============================================================ */
.bb-learn { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.bb-learn-item { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.bb-learn-item.open { border-color: var(--green-100); box-shadow: var(--shadow-md); }
.bb-learn-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 19px 22px; background: none; border: none;
  cursor: pointer; font-family: inherit; text-align: left; }
.bb-learn-qmark { width: 32px; height: 32px; border-radius: 999px; background: var(--green-50); border: 1px solid var(--green-100);
  color: var(--green-700); font-family: var(--font-serif); font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center; flex: none; transition: background .2s, color .2s; }
.bb-learn-item.open .bb-learn-qmark { background: var(--green-700); color: #f3e6c4; border-color: var(--green-700); }
.bb-learn-qtext { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--green-900); flex: 1; min-width: 0; }
.bb-learn-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.bb-learn-chev { color: var(--ink-faint); transition: transform .25s; flex: none; }
.bb-learn-item.open .bb-learn-chev { transform: rotate(180deg); color: var(--green-700); }
.bb-learn-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.bb-learn-item.open .bb-learn-wrap { grid-template-rows: 1fr; }
.bb-learn-inner { overflow: hidden; }
.bb-learn-a { padding: 0 22px 18px 68px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width:560px){ .bb-learn-tag { display: none; } .bb-learn-a { padding-left: 22px; } }

/* learn infographics */
.bb-learn-info { margin: 0 22px 22px 68px; background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: 14px; padding: 18px 20px; }
@media (max-width:560px){
  .bb-learn-info { margin-left: 22px; }
  .bb-chain-row { flex-direction: column; align-items: flex-start; gap: 7px; }
  .bb-chain-lbl { width: auto; }
  .bb-chain { flex-wrap: nowrap; gap: 4px; }
  .bb-aa { width: 15px; height: 15px; }
  .bb-chain-gap { width: 6px; }
  .bb-barh-lbl { width: 78px; }
}
.bb-info-cap { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--green-700); margin-top: 14px;
  text-align: center; text-transform: uppercase; letter-spacing: .08em; }
/* peptide chain */
.bb-info-chain { display: flex; flex-direction: column; gap: 14px; }
.bb-chain-row { display: flex; align-items: center; gap: 14px; }
.bb-chain-lbl { width: 96px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-align: left; }
.bb-chain { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bb-aa { width: 17px; height: 17px; border-radius: 999px; background: var(--green-300, #cde0d4); border: 1.5px solid var(--green-500); }
.bb-aa.hi { background: var(--gold-300); border-color: var(--gold-600); }
.bb-chain-gap { width: 9px; }
/* horizontal compare bars */
.bb-info-barsh { display: flex; flex-direction: column; gap: 11px; }
.bb-barh-row { display: flex; align-items: center; gap: 12px; }
.bb-barh-lbl { width: 96px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.bb-barh-track { flex: 1; height: 14px; border-radius: 999px; background: #fff; border: 1px solid var(--green-100); overflow: hidden; }
.bb-barh-fill { display: block; height: 100%; border-radius: 999px; background: var(--green-500); transition: width .6s cubic-bezier(.4,0,.2,1); }
.bb-barh-fill.hi { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); }
.bb-barh-val { width: 42px; flex: none; text-align: right; font-size: 13px; font-weight: 800; color: var(--green-700); font-variant-numeric: tabular-nums; }
/* vertical bars */
.bb-info-barsv { display: flex; align-items: flex-end; gap: 16px; height: 120px; padding-top: 6px; position: relative; }
.bb-barv-col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; flex: 1; }
.bb-barv-track { width: 100%; max-width: 46px; height: 100%; border-radius: 9px 9px 0 0; background: #fff;
  border: 1px solid var(--green-100); position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.bb-barv-fill { width: 100%; background: linear-gradient(180deg, var(--green-500), var(--green-700)); border-radius: 9px 9px 0 0; }
.bb-barv-topup { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, var(--gold-300), var(--gold-300) 5px, transparent 5px, transparent 10px);
  border-top: 2px dashed var(--gold-600); }
.bb-barv-lbl { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.bb-barv-legend { position: absolute; top: -2px; right: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--gold-700); }
.bb-barv-legend .dot.topup { width: 12px; height: 12px; border-radius: 3px; background: var(--gold-300); border: 1.5px dashed var(--gold-600); }

/* ============================================================
   DISCOVER — interactive product explorer
   ============================================================ */
.bb-discover { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.bb-discover-rail { display: flex; flex-direction: column; gap: 9px; }
.bb-disc-chip { display: flex; align-items: center; gap: 13px; padding: 11px; background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 15px; cursor: pointer; font-family: inherit; text-align: left; position: relative; transition: border-color .18s, background .18s, transform .14s; }
.bb-disc-chip:hover { border-color: var(--green-100); transform: translateX(3px); }
.bb-disc-chip.on { border-color: var(--green-600); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-600); }
.bb-disc-chip-img { width: 50px; height: 50px; border-radius: 11px; overflow: hidden; flex: none; border: 1px solid var(--line); }
.bb-disc-chip-t { min-width: 0; }
.bb-disc-chip-t .n { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.bb-disc-chip-t .b { display: block; font-size: 12px; color: var(--ink-faint); font-weight: 500; margin-top: 1px; }
.bb-disc-chip-ct { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--green-700);
  color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bb-disc-detail { display: grid; grid-template-columns: 230px 1fr; gap: 24px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--bb-r); padding: 24px; box-shadow: var(--shadow-sm); opacity: 1; transition: opacity .3s ease; }
.bb-disc-detail-img { aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.bb-disc-detail-body { display: flex; flex-direction: column; min-width: 0; }
.bb-disc-detail-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.bb-disc-detail-name { font-family: var(--font-serif); font-size: 25px; font-weight: 600; color: var(--green-900); line-height: 1.1; }
.bb-disc-detail-what { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; }
.bb-disc-actives { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bb-active-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--green-700);
  background: var(--green-50); border: 1px solid var(--green-100); padding: 6px 11px; border-radius: 999px; }
.bb-disc-detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 20px; flex-wrap: wrap; }
.bb-disc-detail-price .now { font-family: var(--font-serif); font-size: 23px; font-weight: 700; color: var(--green-800); font-variant-numeric: tabular-nums; }
.bb-disc-detail-price .per { display: block; font-size: 11.5px; color: var(--ink-faint); font-weight: 600; margin-top: 2px; }
@media (max-width:920px){
  .bb-discover { grid-template-columns: 1fr; }
  .bb-discover-rail { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .bb-discover-rail::-webkit-scrollbar { display: none; }
  .bb-disc-chip { flex: 0 0 200px; }
}
@media (max-width:560px){
  .bb-disc-detail { grid-template-columns: 1fr; }
  .bb-disc-detail-img { width: 140px; }
}

/* discover comparison infographics */
.bb-compare-wrap { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.bb-compare-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.bb-compare-h { font-family: var(--font-serif); font-size: clamp(22px,2.6vw,28px); font-weight: 600; color: var(--green-900); margin-bottom: 22px; }
.bb-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bb-compare-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--bb-r); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.bb-compare-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--green-900); margin-bottom: 18px; }
.bb-compare-cap { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); margin-top: 15px; }
.bb-compare .bb-barh-lbl { width: 122px; }
@media (max-width:760px){ .bb-compare { grid-template-columns: 1fr; } }
@media (max-width:560px){ .bb-compare .bb-barh-lbl { width: 104px; } }

/* ============================================================
   STICKY ADD-TO-CART BAR
   ============================================================ */
.bb-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: color-mix(in srgb, var(--green-900) 96%, transparent); color: #eef4ef;
  box-shadow: 0 -16px 40px rgba(14,30,24,.28); transform: translateY(120%); transition: transform .4s cubic-bezier(.22,.61,.36,1);
  border-top: 1px solid rgba(243,230,196,.14); }
.bb-stickybar.show { transform: translateY(0); }
.bb-sb-strip { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 16px;
  background: rgba(0,0,0,.20); border-bottom: 1px solid rgba(243,230,196,.12); font-size: 12px; font-weight: 600;
  color: #eef4ef; flex-wrap: wrap; line-height: 1.2; }
.bb-sb-strip b { color: var(--gold-300); font-weight: 800; }
.bb-sb-strip .dot { width: 3px; height: 3px; border-radius: 999px; background: rgba(238,244,239,.45); flex: none; }
.bb-sb-strip-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bb-sb-add .lbl-full, .bb-sb-add .lbl-short { display: inline; }
.bb-sb-add .lbl-short { display: none; }
.bb-stickybar-in { max-width: 1200px; margin: 0 auto; padding: 13px clamp(16px,4vw,40px);
  display: flex; align-items: center; gap: 18px; }
.bb-sb-tiles { display: flex; flex: none; }
.bb-sb-tile { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; border: 2px solid var(--green-900); }
.bb-sb-tile + .bb-sb-tile { margin-left: -13px; }
.bb-sb-more { width: 40px; height: 40px; border-radius: 10px; margin-left: -13px; border: 2px solid var(--green-900);
  background: var(--green-700); color: #f3e6c4; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.bb-sb-info { min-width: 0; }
.bb-sb-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: #fdfcf5; line-height: 1.1; white-space: nowrap; }
.bb-sb-meta { font-size: 12px; color: rgba(238,244,239,.7); font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bb-sb-save { color: var(--gold-300); display: inline-flex; align-items: center; gap: 5px; }
.bb-sb-price { margin-left: auto; text-align: right; white-space: nowrap; }
.bb-sb-price .was { text-decoration: line-through; color: rgba(238,244,239,.5); font-size: 13px; font-weight: 600; margin-right: 8px; }
.bb-sb-price .now { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: #fdfcf5; font-variant-numeric: tabular-nums; }
.bb-sb-price .cur { font-size: 13px; font-weight: 600; }
.bb-sb-add { flex: none; background: var(--gold-600); color: #1c1404; border: none; border-radius: 13px; padding: 15px 26px;
  font-family: var(--font-sans); font-weight: 800; font-size: 14.5px; letter-spacing: .02em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; transition: background .18s, transform .12s; white-space: nowrap; }
.bb-sb-add:hover { background: var(--gold-500); }
.bb-sb-add:active { transform: scale(.97); }
.bb-sb-add.done { background: var(--green-500); color: #fff; }
.bb-sb-clear { flex: none; display: inline-flex; align-items: center; gap: 8px; background: rgba(243,230,196,.10); color: #eef4ef;
  border: 1px solid rgba(243,230,196,.22); border-radius: 12px; padding: 12px 16px; font-family: var(--font-sans);
  font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.bb-sb-clear:hover { background: rgba(243,230,196,.18); border-color: rgba(243,230,196,.4); }
@media (max-width:720px){ .bb-sb-clear-l { display: none; } .bb-sb-clear { padding: 12px; } }
@media (max-width:720px){
  .bb-sb-tiles, .bb-sb-meta, .bb-sb-info { display: none; }
  .bb-stickybar-in { gap: 12px; padding: 11px 16px; }
  .bb-sb-price .now { font-size: 20px; }
  .bb-sb-add { padding: 13px 18px; font-size: 13.5px; }
  .bb-sb-add .lbl-full { display: none; }
  .bb-sb-add .lbl-short { display: inline; }
  .bb-sb-strip { gap: 9px; font-size: 11.5px; padding: 7px 14px; }
}
@keyframes bbToast { 0% { transform: translate(-50%,16px); opacity: 0; } 12%,80% { transform: translate(-50%,0); opacity: 1; } 100% { transform: translate(-50%,16px); opacity: 0; } }
.bb-toast { position: fixed; left: 50%; bottom: 92px; z-index: 90; background: var(--green-800); color: #f3e6c4;
  padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 9px; animation: bbToast 2.4s ease forwards; }
@keyframes bbPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.bb-pop { animation: bbPop .34s cubic-bezier(.2,.9,.3,1.3); }
@keyframes bbFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.bb-fade-up { animation: bbFadeUp .4s cubic-bezier(.22,.61,.36,1) both; }
@keyframes bbFlash { 0%,100% { box-shadow: var(--shadow-md); } 35% { box-shadow: 0 0 0 3px var(--green-500), var(--shadow-lg); } }
.bb-flash { animation: bbFlash 1s ease; }

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .bb-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .bb-hero-media { order: -1; }
  .bb-hero-slot { aspect-ratio: 4 / 3; }
  .bb-builder.is-sidebar .bb-builder-grid,
  .bb-builder.is-split   .bb-builder-grid { grid-template-columns: 1fr; }
  .bb-builder.is-sidebar .bb-aside,
  .bb-builder.is-split   .bb-aside { border-left: none; border-top: 1px solid var(--line); }
  .bb-concerns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .bb-slots { grid-template-columns: repeat(2, 1fr); }
  .bb-picker, .bb-builder.is-split .bb-picker { grid-template-columns: repeat(2, 1fr); }
  .bb-concerns { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bb-concern { padding: 16px; }
  .bb-concern-name { font-size: 17px; }
  .bb-hero-grid .bb-hero-copy { margin-bottom: 36px; }
  .bb-hero-cta { flex-direction: column; align-items: stretch; }
  .bb-hero-cta .btn { justify-content: center; }
  .bb-quizbar { flex-direction: column; align-items: flex-start; }
  .bb-quizbar .btn { margin-left: 0; width: 100%; }
  .bb-modal-opts.cols2 { grid-template-columns: 1fr; }
  .bb-bhead-r { text-align: left; margin-left: 0; }
  .bb-price-row, .bb-bhead-pills, .bb-freeship { justify-content: flex-start; }
}


/* ===== pdp.css ===== */
/* ============================================================
   BioActive+ — Liquid Collagen Product Page v2
   Page-specific styles. Extends bundle-styles.css (tokens,
   buttons, pills) + bundle-extra.css (learn / compare infographics).
   ============================================================ */

.pdp { background: var(--bg); min-height: 100vh; }
.pdp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }
.pdp .serif { font-family: var(--font-serif); }

/* radius + accent live (tweakable) */
.pdp { --pr: 22px; --accent: var(--gold-600); }

/* ---------------- announcement ticker ---------------- */
.pdp-announce {
  background: var(--green-900); color: #eef4ef; height: 40px; overflow: hidden; position: relative;
}
.pdp-announce-track { position: absolute; inset: 0; }
.pdp-announce-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
  opacity: 0; transform: translateY(9px); transition: opacity .5s var(--ease,cubic-bezier(.22,.61,.36,1)), transform .5s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.pdp-announce-msg.on { opacity: 1; transform: none; }
.pdp-announce-msg b { color: var(--gold-300); font-weight: 800; }

/* ---------------- header (sticky) ---------------- */
.pdp-head { position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.pdp-head-in { max-width: 1200px; margin: 0 auto; padding: 14px clamp(18px,4vw,48px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pdp-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.pdp-brand-leaf { width: 32px; height: 32px; border-radius: 9px; background: var(--green-700);
  display: flex; align-items: center; justify-content: center; color: #f3e6c4; }
.pdp-brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: var(--green-800); letter-spacing: .2px; }
.pdp-nav { display: flex; gap: 26px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.pdp-nav span { cursor: pointer; transition: color .15s; }
.pdp-nav span:hover { color: var(--green-700); }
.pdp-head-actions { display: flex; align-items: center; gap: 6px; }
.pdp-bag { display: inline-flex; align-items: center; gap: 8px; color: var(--green-800); font-weight: 700; font-size: 14px;
  background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 999px; transition: background .15s; }
.pdp-bag:hover { background: var(--green-50); }
.pdp-bag .ct { background: var(--green-700); color: #f3e6c4; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 860px){ .pdp-nav { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.pdp-hero { padding: clamp(26px,4vw,44px) 0 clamp(18px,3vw,30px); }
.pdp-hero-grid { display: grid; grid-template-columns: 1.04fr 1fr; gap: clamp(26px,4vw,56px); align-items: start; }
.pdp-gallery-col { position: sticky; top: 96px; }

/* gallery — single image carousel with slider bar underneath */
.pdp-gallery { display: flex; flex-direction: column; gap: 16px; }
.pdp-main { position: relative; border-radius: var(--pr); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--paper-2); }
.pdp-badges { position: absolute; top: 16px; left: 16px; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.pdp-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 8px 13px;
  border-radius: 999px; box-shadow: var(--shadow-md); width: fit-content; }
.pdp-badge.green { background: var(--green-700); color: #f3e6c4; }
.pdp-badge.paper { background: var(--paper); color: var(--green-800); }
.pdp-slide { width: 100%; aspect-ratio: 1/1.02; display: none; }
.pdp-slide.on { display: block; animation: bbFadeUp .4s var(--ease,cubic-bezier(.22,.61,.36,1)); }
.pdp-slide.ph { position: relative; flex-direction: column; justify-content: flex-end; padding: 32px; color: #fff; }
.pdp-slide.ph.on { display: flex; }
.pdp-ph-cap { position: absolute; top: 16px; right: 16px; font-family: var(--font-serif); font-size: 11px; letter-spacing: .04em;
  color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.4); padding: 5px 11px; border-radius: 999px; }
.pdp-ph-big { font-family: var(--font-serif); font-size: 44px; font-weight: 600; line-height: 1; position: relative; }
.pdp-ph-sub { font-size: 15px; opacity: .92; margin-top: 8px; position: relative; }

/* carousel arrows */
.pdp-arr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 42px; height: 42px; border-radius: 999px;
  border: none; cursor: pointer; background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--green-800);
  backdrop-filter: blur(6px); box-shadow: var(--shadow-md); display: grid; place-items: center; transition: background .15s, transform .12s; }
.pdp-arr:hover { background: var(--paper); }
.pdp-arr:active { transform: translateY(-50%) scale(.92); }
.pdp-arr.prev { left: 14px; }
.pdp-arr.next { right: 14px; }

/* slider bar (dots) underneath */
.pdp-dots { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pdp-dot { all: unset; cursor: pointer; height: 6px; width: 26px; border-radius: 999px; background: color-mix(in srgb, var(--m-accent,#b3186d) 24%, #fff); transition: background .2s, width .25s var(--ease,cubic-bezier(.2,.7,.2,1)); }
.pdp-dot:hover { background: color-mix(in srgb, var(--m-accent,#b3186d) 42%, #fff); }
.pdp-dot.on { width: 46px; background: var(--m-accent,#b3186d); }

/* swipeable gallery track (up to 6 images) */
.pdp-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-y; }
.pdp-track::-webkit-scrollbar { display: none; }
.pdp-track .pdp-slide { flex: 0 0 100%; width: 100%; display: block !important; scroll-snap-align: center; animation: none; }
.pdp-track .pdp-slide.ph { display: flex !important; }
.pdp-track.dragging { scroll-behavior: auto; cursor: grabbing; }
.pdp-dots[hidden], .pdp-arr[hidden] { display: none !important; }

/* buy panel */
.pdp-rating { all: unset; display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 11px; cursor: pointer; margin-bottom: 12px; }
.pdp-rating .num { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.pdp-bestseller { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--green-700); color: #f3e6c4; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.pdp-rating .rev { font-size: 13.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.pdp-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px,3.6vw,44px); line-height: 1.04;
  letter-spacing: -.4px; color: var(--green-900); }
.pdp-title em { font-style: italic; color: var(--accent); }
.pdp-flavour { display: flex; align-items: center; gap: 10px; margin: 9px 0 14px; }
.pdp-flavour .f { font-size: 15px; font-weight: 700; color: var(--accent); }
.pdp-flavour .dot { width: 4px; height: 4px; border-radius: 9px; background: var(--ink-faint); }
.pdp-flavour .s { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.pdp .pdp-tagline { font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 480px; margin-bottom: 38px; }
.pdp-tagline b { color: var(--green-800); font-weight: 700; }

/* benefit pills */
.pdp-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.pdp-pill { text-align: center; background: var(--green-50); border: 1px solid var(--green-100); border-radius: 14px; padding: 14px 4px; }
.pdp-pill .k { font-family: var(--font-serif); font-weight: 700; font-size: 23px; color: var(--green-800); line-height: 1; }
.pdp-pill .t { font-size: 11px; color: var(--green-700); margin-top: 6px; font-weight: 600; }

/* stack selector */
.pdp-block-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 13px; }
.pdp-block-head h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--green-900); }
.pdp-block-head .hint { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.pdp-stacks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.pdp-stack { all: unset; box-sizing: border-box; cursor: pointer; position: relative; min-width: 0; text-align: center;
  background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 0; overflow: visible;
  transition: border-color .2s, background .2s; }
.pdp-stack:hover { border-color: var(--green-100); }
.pdp-stack.on { border-color: var(--green-700); box-shadow: 0 0 0 1.5px var(--green-700) inset; background: #fff; }
.pdp-stack .off { position: absolute; top: -10px; right: 12px; z-index: 3; }
.pdp-stack .tick { position: absolute; top: 11px; left: 11px; z-index: 3; width: 22px; height: 22px; border-radius: 999px;
  background: var(--green-700); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.pdp-stack.on .tick { display: flex; }

/* gradient product tile with bottle silhouette(s) */
.pdp-stack-tile { height: 132px; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(158deg, #f4dadd, #dca7ad); position: relative; overflow: hidden; }
.pdp-stack-tile::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%); }
.pdp-bottle { position: relative; width: 38px; height: 66px; border-radius: 7px 7px 10px 10px; background: #a82f3c;
  filter: drop-shadow(-3px 3px 4px rgba(110,31,41,.28)); }
.pdp-bottle + .pdp-bottle { margin-left: -11px; }
.pdp-bottle .cap { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 18px; height: 11px;
  border-radius: 3px 3px 2px 2px; background: #6e1f29; }

.pdp-stack-body { padding: 13px 12px 14px; }
.pdp-stack .name { font-weight: 700; font-size: 15px; color: var(--ink); }
.pdp-stack .note { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; font-weight: 600; }
.pdp-stack hr { border: none; height: 1px; background: var(--line); margin: 11px 0 9px; }
.pdp-stack .pr { display: flex; align-items: baseline; gap: 7px; justify-content: center; }
.pdp-stack .pr b { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--green-800); }
.pdp-stack .pr s { font-size: 12px; color: var(--ink-faint); text-decoration: line-through; }

/* purchase mode */
.pdp-modes { display: flex; gap: 11px; margin-top: 22px; }
.pdp-mode { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; text-align: center; position: relative;
  padding: 15px 8px; border-radius: 14px; font-weight: 700; font-size: 13px; letter-spacing: .03em;
  background: var(--paper); color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--line); transition: all .2s; }
.pdp-mode .m-sub { font-size: 11px; font-weight: 600; opacity: .8; display: block; margin-top: 2px; }
.pdp-mode.on { background: var(--green-50); color: var(--green-800); box-shadow: 0 0 0 1.5px var(--green-600) inset; }
.pdp-mode .save15 { position: absolute; top: -9px; right: 12px; background: var(--gold-600); color: #1c1404;
  font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.pdp-mode.on .save15 { background: var(--gold-500); color: #1c1404; }

/* price box */
.pdp-pricebox { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 20px; }
.pdp-pricebox-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.pdp-pricebox .label { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.pdp-pricebox .amount { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.pdp-pricebox .amount b { font-family: var(--font-serif); font-weight: 700; font-size: 34px; line-height: 1; color: var(--green-800); font-variant-numeric: tabular-nums; }
.pdp-pricebox .amount s { font-size: 16px; color: var(--ink-faint); text-decoration: line-through; font-weight: 600; }
.pdp-reassure { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.pdp-reassure span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.pdp-reassure svg { color: var(--green-600); }
.pdp-paylater { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; padding-top: 13px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); font-weight: 600; flex-wrap: wrap; }
.pdp-paylater img { height: 15px; }

/* trust row */
.pdp-trust { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
.pdp-trust > div { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; text-align: center; }
.pdp-trust svg { color: var(--green-700); }
.pdp-trust .t { font-size: 10.5px; color: var(--ink-soft); font-weight: 600; line-height: 1.2; }

/* ---------------- value ribbon ---------------- */
.pdp-ribbon-bg { background: var(--green-900); color: #eef4ef; }
.pdp-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 56px; padding: 12px 0; flex-wrap: wrap; }
.pdp-ribbon span { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.pdp-ribbon svg { color: var(--gold-300); }

/* ---------------- "as featured in" press strip ---------------- */
.pdp-press { background: var(--paper); border-bottom: 1px solid var(--line); padding: 22px 0 24px; }
.pdp-press-label { text-align: center; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 16px; }
.pdp-press-mask { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.pdp-press-track { display: flex; align-items: center; gap: 60px; width: max-content; animation: pressMarquee 34s linear infinite; }
.pdp-press-track span { font-family: var(--font-serif); font-size: 25px; font-weight: 600; line-height: 1;
  color: var(--green-900); opacity: .45; white-space: nowrap; letter-spacing: .02em; }
@keyframes pressMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .pdp-press-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 28px 44px; } }

/* ============================================================
   WHY BIOACTIVE — stat cards
   ============================================================ */
.pdp-why-head { margin-bottom: clamp(22px,3vw,34px); }
#why.pdp-sec { padding-top: clamp(54px,7vw,96px); padding-bottom: clamp(54px,7vw,96px); }
.pdp-why-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-700);
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 7px 15px; border-radius: 999px; }
.pdp-why-eyebrow svg { color: var(--accent); }
.pdp-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.pdp-why-card { display: flex; flex-direction: column; text-align: left; font-family: inherit; cursor: pointer; width: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 22px 22px 18px;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.pdp-why-card:hover { border-color: var(--green-100); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pdp-why-card.on { border-color: var(--green-700); box-shadow: 0 0 0 1.5px var(--green-700) inset; transform: translateY(-3px); }
.pdp-why-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--gold-100); border: 1px solid var(--gold-300); color: var(--gold-700); margin-bottom: 18px;
  transition: background .2s, color .2s, border-color .2s; }
.pdp-why-card:hover .pdp-why-ic { background: var(--green-50); border-color: var(--green-100); color: var(--green-700); }
.pdp-why-card.on .pdp-why-ic { background: var(--green-700); border-color: var(--green-700); color: #f3e6c4; }
.pdp-why-stat { display: flex; align-items: baseline; gap: 7px; }
.pdp-why-stat .k { font-family: var(--font-serif); font-weight: 700; font-size: 44px; line-height: 1; color: var(--green-800); }
.pdp-why-stat .u { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.pdp-why-t { font-weight: 700; font-size: 17px; color: var(--ink); margin-top: 14px; }
.pdp .pdp-why-d { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 9px; min-height: 63px; }
.pdp-why-cue { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; font-weight: 700;
  color: var(--ink-faint); transition: color .2s; }
.pdp-why-card:hover .pdp-why-cue { color: var(--accent); }
.pdp-why-card.on .pdp-why-cue { color: var(--green-700); }

/* selected-card infographic */
.pdp-why-info { margin-top: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--pr);
  padding: 24px clamp(20px,3vw,30px); animation: bbFadeUp .4s var(--ease,cubic-bezier(.22,.61,.36,1)); }
.pdp-why-info-head { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--green-900); margin-bottom: 18px; }
.pdp-why-info-head .k { color: var(--accent); }
.pdp-why-bars { display: flex; flex-direction: column; gap: 12px; }
.pdp-whybar { display: flex; align-items: center; gap: 14px; }
.pdp-whybar .lbl { width: 180px; flex: none; font-size: 13px; font-weight: 700; color: var(--ink); }
.pdp-whybar .track { flex: 1; height: 14px; border-radius: 999px; background: #fff; border: 1px solid var(--green-100); overflow: hidden; }
.pdp-whybar .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-500), var(--green-700)); transition: width .6s cubic-bezier(.4,0,.2,1); }
.pdp-whybar .fill.hi { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); }
.pdp-whybar .val { flex: none; min-width: 56px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--green-700); font-variant-numeric: tabular-nums; }
.pdp-why-info-cap { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; margin-top: 16px; }
@media (max-width: 920px){ .pdp-why-grid { grid-template-columns: repeat(2, 1fr); } .pdp .pdp-why-d { min-height: 0; } }
@media (max-width: 520px){ .pdp-why-grid { grid-template-columns: 1fr; } .pdp-whybar .lbl { width: 120px; } }

/* ============================================================
   #BIOACTIVEGLOW — UGC video rail
   ============================================================ */
.pdp-ugc { background: #e7efe9; color: var(--ink); padding: clamp(56px,6vw,90px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pdp-ugc-rating { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 18px; }
.pdp-ugc-stars { display: inline-flex; color: var(--gold-500); }
.pdp-ugc-revs { font-size: 14px; font-weight: 700; color: var(--ink); }
.pdp-ugc-revs b { color: var(--green-800); }
.pdp-ugc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pdp .pdp-ugc-sub { font-size: 15px; color: var(--ink-soft); max-width: 320px; line-height: 1.5; }
.pdp-ugc-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto;
  padding: 28px clamp(18px,4vw,48px) 4px; }
.pdp-vcard { all: unset; cursor: pointer; width: 100%; aspect-ratio: 5 / 8;
  border-radius: 22px; position: relative; overflow: hidden; box-shadow: 0 22px 44px -22px rgba(0,0,0,.45); }
.pdp-vtag { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-serif); font-size: 10px; letter-spacing: .04em;
  color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.4); padding: 4px 9px; border-radius: 999px; }
.pdp-vviews { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.28); backdrop-filter: blur(4px); padding: 5px 9px; border-radius: 999px; }
.pdp-vplay-wrap { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.pdp-vplay { width: 62px; height: 62px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--green-900);
  display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.3); transition: transform .25s, opacity .25s; }
.pdp-vcard:hover .pdp-vplay { transform: scale(1.07); }
.pdp-vcard.playing .pdp-vplay { opacity: 0; transform: scale(.8); }
.pdp-vcap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 36px 15px 15px;
  background: linear-gradient(transparent, rgba(0,0,0,.62)); text-align: left; }
.pdp-vcap .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pdp-vcap .av { width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--green-900);
  display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.pdp-vcap .hn { font-size: 12.5px; font-weight: 700; color: #fff; }
.pdp-vcap .ct { display: block; font-size: 12.5px; color: rgba(255,255,255,.92); line-height: 1.35; }

/* ============================================================
   SECTION HEADS (page sections)
   ============================================================ */
.pdp-sec { padding: clamp(34px,5vw,64px) 0; }
.pdp-sec-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px,3vw,42px); }
.pdp-sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.pdp-sec-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(28px,3.6vw,42px); line-height: 1.08;
  color: var(--green-900); letter-spacing: -.3px; }
.pdp-sec-title em { font-style: italic; color: var(--accent); }
.pdp .pdp-sec-sub { font-size: 15.5px; color: var(--ink-soft); margin-top: 12px; line-height: 1.55; }

/* ============================================================
   LEARN — how it works "steps" infographic (extends bundle .bb-learn)
   ============================================================ */
.bb-info-steps { display: flex; align-items: stretch; gap: 10px; }
.bb-step { flex: 1; background: #fff; border: 1px solid var(--green-100); border-radius: 14px; padding: 15px 13px; text-align: center; position: relative; }
.bb-step-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--green-50); border: 1px solid var(--green-100);
  color: var(--green-700); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.bb-step.hot .bb-step-ic { background: var(--green-700); color: #f3e6c4; border-color: var(--green-700); }
.bb-step-n { position: absolute; top: 9px; right: 11px; font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.bb-step-t { font-size: 13.5px; font-weight: 700; color: var(--green-900); }
.bb-step-d { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; font-weight: 500; }
.bb-step-arrow { display: flex; align-items: center; color: var(--green-300,#cde0d4); flex: none; }
@media (max-width: 560px){
  .bb-info-steps { flex-direction: column; }
  .bb-step-arrow { transform: rotate(90deg); align-self: center; }
}

/* ============================================================
   COMPARISON — separate section: feature table + bar cards
   ============================================================ */
.pdp-cmp { display: flex; flex-direction: column; gap: 26px; }

/* segmented toggle to switch comparison view */
.pdp-cmp-seg { display: inline-flex; align-self: center; gap: 4px; background: var(--green-50);
  border: 1px solid var(--green-100); border-radius: 999px; padding: 5px; }
.pdp-cmp-seg button { all: unset; cursor: pointer; padding: 10px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--green-700); transition: all .2s; }
.pdp-cmp-seg button.on { background: var(--green-700); color: #fcfbf4; box-shadow: var(--shadow-sm); }

/* feature checkmark table */
.pdp-table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--pr); box-shadow: var(--shadow-sm); overflow: hidden; }
.pdp-table { width: 100%; border-collapse: collapse; }
.pdp-table thead th { padding: 20px 16px 16px; text-align: center; vertical-align: bottom; }
.pdp-table thead th.feat { text-align: left; width: 38%; }
.pdp-table thead th .col-name { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.pdp-table thead th.us { background: var(--green-50); border-top-left-radius: 16px; border-top-right-radius: 16px; }
.pdp-table thead th.us .col-name { color: var(--green-800); }
.pdp-table thead th.us .badge { display: inline-block; margin-bottom: 8px; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #f3e6c4; background: var(--green-700); padding: 4px 11px; border-radius: 999px; }
.pdp-table tbody td { padding: 15px 16px; text-align: center; border-top: 1px solid var(--line-soft); font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.pdp-table tbody td.feat { text-align: left; font-weight: 700; color: var(--ink); }
.pdp-table tbody td.us { background: var(--green-50); color: var(--green-800); font-weight: 800; }
.pdp-table tbody tr:last-child td.us { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.pdp-table tbody tr { transition: background .15s; }
.pdp-table tbody tr:hover td:not(.us) { background: var(--paper-2); }
.pdp-yes { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--green-700); color: #fff; }
.pdp-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px;
  background: #efe7da; color: var(--ink-faint); }
@media (max-width: 620px){
  .pdp-table thead th { padding: 14px 7px 12px; }
  .pdp-table tbody td { padding: 13px 7px; font-size: 12.5px; }
  .pdp-table thead th .col-name { font-size: 13px; }
  .pdp-table thead th .badge { font-size: 8px; padding: 3px 7px; }
}

/* bar-chart cards (reuses .bb-compare grid + .bb-info-barsh from bundle-extra) */
.pdp-cmp-foot { text-align: center; font-size: 12px; color: var(--ink-faint); font-weight: 600; }

/* ============================================================
   SKIN PROTOCOL UPSELL
   ============================================================ */
.pdp-protocol { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(24px,4vw,48px); align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--pr) + 4px); padding: clamp(22px,3vw,34px); }
.pdp-protocol-visual { position: relative; display: flex; gap: 12px; }
.pdp-protocol-badge { position: absolute; top: -13px; left: -6px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-700); color: #f3e6c4; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow-md); }
.pdp-prot-tile { flex: 1; aspect-ratio: 3 / 4; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; }
.pdp-prot-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%); }
.pdp-pbottle { position: relative; z-index: 1; width: 34px; height: 60px; border-radius: 7px 7px 10px 10px; filter: drop-shadow(-3px 3px 4px rgba(0,0,0,.22)); }
.pdp-pbottle .cap { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 16px; height: 10px; border-radius: 3px 3px 2px 2px; }
.pdp-protocol-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px,3vw,34px); color: var(--green-900); line-height: 1.08; margin-top: 10px; }
.pdp .pdp-protocol-desc { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; max-width: 460px; }
.pdp-protocol-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pdp-protocol-list li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pdp-protocol-list .ic { color: var(--green-600); display: inline-flex; flex: none; }
.pdp-protocol-list .ben { color: var(--ink-faint); font-weight: 500; }
.pdp-protocol-foot { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.pdp-protocol-price { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.pdp-protocol-price .now { font-family: var(--font-serif); font-weight: 700; font-size: 30px; color: var(--green-800); font-variant-numeric: tabular-nums; }
.pdp-protocol-price s { color: var(--ink-faint); text-decoration: line-through; font-size: 16px; font-weight: 600; }
.pdp-protocol-cta { width: auto; padding: 15px 26px; border-radius: 14px; }
.pdp-protocol-re { display: flex; gap: 16px; margin-top: 13px; color: var(--ink-faint); font-size: 12px; font-weight: 600; }
.pdp-protocol-re span { display: inline-flex; align-items: center; gap: 6px; }
.pdp-protocol-re svg { color: var(--green-600); }
@media (max-width: 860px){
  .pdp-protocol { grid-template-columns: 1fr; }
  .pdp-protocol-body { text-align: center; }
  .pdp-protocol-body .pdp-sec-eyebrow { text-align: center !important; }
  .pdp-protocol-list { display: inline-block; text-align: left; }
  .pdp-protocol-foot, .pdp-protocol-re { justify-content: center; }
  .pdp-protocol-cta { width: 100%; }
}

/* sticky bar — Start over row */
.pdp-sb-startover { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 11px;
  background: linear-gradient(180deg, #e9e5da, var(--cream)); border: none; border-bottom: 1px solid var(--line);
  cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--ink-soft);
  transition: color .15s, background .15s; }
.pdp-sb-startover:hover { color: var(--danger); background: var(--cream); }

/* ============================================================
   12-WEEK TIMELINE
   ============================================================ */
.pdp-tl { max-width: none; margin: 0; }
.pdp-tl-track { position: relative; padding: 0 8px; }
.pdp-tl-line { position: absolute; left: 14px; right: 14px; top: 16px; height: 5px; border-radius: 999px; background: var(--green-100); }
.pdp-tl-fill { position: absolute; left: 14px; top: 16px; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--green-500), var(--green-700)); transition: width .45s var(--ease,cubic-bezier(.4,0,.2,1)); }
.pdp-tl-steps { display: flex; justify-content: space-between; position: relative; }
.pdp-tl-step { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pdp-tl-dot { width: 26px; height: 26px; border-radius: 999px; background: var(--paper); border: 2.5px solid var(--green-100);
  display: grid; place-items: center; color: #fff; transition: all .25s; }
.pdp-tl-step.done .pdp-tl-dot { background: var(--green-700); border-color: var(--green-700); }
.pdp-tl-step.active .pdp-tl-dot { width: 34px; height: 34px; box-shadow: 0 0 0 6px var(--green-50); }
.pdp-tl-step .wk { font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.pdp-tl-step.active .wk { color: var(--green-800); }
.pdp-tl-detail { margin-top: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--pr); padding: 26px 28px; box-shadow: var(--shadow-sm); }
.pdp-tl-detail .row { display: flex; align-items: center; gap: 12px; }
.pdp-tl-wk { font-size: 12.5px; font-weight: 700; color: #fcfbf4; background: var(--green-700); padding: 6px 13px; border-radius: 999px; }
.pdp-tl-ttl { font-family: var(--font-serif); font-weight: 600; font-size: 26px; color: var(--green-900); }
.pdp-tl-detail p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; max-width: 720px; }

/* progressive skin-metric infographic */
.pdp-tl-metrics { margin-top: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--pr); padding: 22px clamp(20px,3vw,28px); }
.pdp-tl-metrics-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-700); margin-bottom: 18px; }
.pdp-tl-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.pdp-metric-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pdp-metric-top .lbl { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pdp-metric-top .v { font-size: 13px; font-weight: 800; color: var(--green-700); font-variant-numeric: tabular-nums; }
.pdp-tl-metrics .bb-barh-fill { background: linear-gradient(90deg, var(--green-500), var(--green-700)); }
.pdp-tl-metrics-foot { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; margin-top: 16px; }
@media (max-width: 640px){ .pdp-tl-metrics-grid { grid-template-columns: 1fr; } }

/* ============================================================
   REVIEWS
   ============================================================ */
.pdp-rev-summary { max-width: 560px; margin: 0 auto clamp(20px,3vw,28px); display: flex; gap: 24px; align-items: center;
  background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--pr); padding: 24px; }
.pdp-rev-avg { text-align: center; flex-shrink: 0; }
.pdp-rev-avg b { font-family: var(--font-serif); font-weight: 700; font-size: 52px; line-height: 1; color: var(--green-900); }
.pdp-rev-avg .cnt { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-top: 6px; }
.pdp-revlink { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color .15s; }
.pdp-revlink:hover { color: var(--green-800); }
.pdp-rev-dist { flex: 1; }
.pdp-rev-dist .d { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.pdp-rev-dist .d span { font-size: 11px; color: var(--ink-soft); width: 8px; font-weight: 700; }
.pdp-rev-dist .d .bar { flex: 1; height: 7px; border-radius: 999px; background: #fff; border: 1px solid var(--green-100); overflow: hidden; }
.pdp-rev-dist .d .bar i { display: block; height: 100%; background: var(--gold-500); border-radius: 999px; }
.pdp-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pdp-review { background: var(--paper); border: 1px solid var(--line); border-radius: var(--pr); padding: 22px; box-shadow: var(--shadow-sm); }
.pdp-review .top { display: flex; align-items: center; justify-content: space-between; }
.pdp-review .verified { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--green-600); }
.pdp-review .t { font-family: var(--font-serif); font-weight: 600; font-size: 17px; margin-top: 12px; color: var(--green-900); }
.pdp-review p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 8px 0 16px; }
.pdp-review .who { display: flex; align-items: center; gap: 10px; }
.pdp-review .ava { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; }
.pdp-review .nm { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pdp-review .loc { font-size: 11px; color: var(--ink-faint); font-weight: 600; }

/* ============================================================
   FAQ — accordion (left) + video & contact (right)
   ============================================================ */
.ph-stripes { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,0) 12px 24px); }

.pdp-faq-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,56px); align-items: start; }
.pdp-faq-intro { margin-bottom: 24px; }
.pdp-faq-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.pdp-faq-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--accent); }
.pdp-faq-intro .pdp-sec-title { font-size: clamp(30px,3.8vw,48px); }

.pdp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.pdp-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.pdp-faq-item.open { border-color: var(--green-100); box-shadow: var(--shadow-md); }
.pdp-faq-q { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; }
.pdp-faq-qmark { flex: none; width: 34px; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--m-accent, var(--green-700)) 10%, #fff); border: 1px solid color-mix(in srgb, var(--m-accent, var(--green-700)) 20%, transparent);
  color: var(--green-700); font-family: var(--font-serif); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s; }
.pdp-faq-item.open .pdp-faq-qmark { background: var(--m-accent, var(--green-700)); color: #f3e6c4; border-color: var(--m-accent, var(--green-700)); }
.pdp-faq-q .q { flex: 1; font-size: 16.5px; font-weight: 700; color: var(--green-900); }
.pdp-faq-q .ico { flex: none; color: var(--ink-faint); transition: transform .25s, color .2s; display: inline-flex; }
.pdp-faq-item.open .pdp-faq-q .ico { transform: rotate(180deg); color: var(--m-accent, var(--green-700)); }
.pdp-faq-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease,cubic-bezier(.4,0,.2,1)); }
.pdp-faq-item.open .pdp-faq-wrap { grid-template-rows: 1fr; }
.pdp-faq-inner { overflow: hidden; }
.pdp-faq-a { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); padding: 0 20px 18px 68px; max-width: 640px; }

/* side column */
.pdp-faq-side { display: flex; flex-direction: column; gap: 16px; }
.pdp-faq-video { position: relative; aspect-ratio: 1 / .94; border-radius: 22px; overflow: hidden;
  background: linear-gradient(150deg, var(--green-900), var(--green-800)); box-shadow: var(--shadow-lg); }
.pdp-faq-vlabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); letter-spacing: .22em; text-transform: uppercase; font-size: 13px; color: rgba(243,230,196,.22); }
.pdp-faq-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 999px;
  border: none; cursor: pointer; background: var(--gold-600); color: #1c1404; display: grid; place-items: center;
  box-shadow: 0 0 0 16px rgba(255,255,255,.06), 0 14px 32px rgba(0,0,0,.32); transition: transform .15s, background .15s; }
.pdp-faq-play:hover { transform: translate(-50%,-50%) scale(1.06); background: var(--gold-500); }
.pdp-faq-vmeta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px; }
.pdp-faq-vmeta .dur { background: rgba(0,0,0,.4); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; }
.pdp-faq-vmeta .cap { color: #fdfcf5; font-weight: 600; font-size: 14px; }
.pdp-faq-curious { background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; }
.pdp-faq-curious h3 { font-size: 22px; font-weight: 600; color: var(--green-900); }
.pdp-faq-curious p { font-size: 14.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.55; }
.pdp-faq-msg { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 15px; font-weight: 700; color: var(--green-800); transition: gap .18s, color .15s; }
.pdp-faq-msg:hover { gap: 12px; color: var(--green-700); }
@media (max-width: 920px){
  .pdp-faq-layout { grid-template-columns: 1fr; }
  .pdp-faq-side { flex-direction: row; }
  .pdp-faq-video { flex: 1; }
  .pdp-faq-curious { flex: 1; align-self: stretch; }
}
@media (max-width: 620px){
  .pdp-faq-side { flex-direction: column; }
  .pdp-faq-a { padding-left: 20px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.pdp-foot { background: var(--green-900); color: #eef4ef; padding: 52px 0 30px; margin-top: 12px; }
.pdp-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.pdp-foot-brand { max-width: 320px; }
.pdp-foot-brand .pdp-brand-name { color: #fdfcf5; }
.pdp-foot-brand p { font-size: 14px; line-height: 1.6; color: rgba(238,244,239,.7); margin-top: 14px; }
.pdp-foot-col .h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(238,244,239,.5); margin-bottom: 14px; font-weight: 700; }
.pdp-foot-col a { display: block; font-size: 14px; color: rgba(238,244,239,.85); margin-bottom: 11px; cursor: pointer; text-decoration: none; transition: color .15s; }
.pdp-foot-col a:hover { color: #fff; }
.pdp-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 24px; margin-top: 30px;
  border-top: 1px solid rgba(238,244,239,.14); flex-wrap: wrap; font-size: 12.5px; color: rgba(238,244,239,.55); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px){
  .pdp-hero-grid { grid-template-columns: 1fr; }
  .pdp-gallery-col { position: static; max-width: 560px; margin: 0 auto; width: 100%; }
  .pdp-rev-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .pdp-rev-grid { grid-template-columns: 1fr; }
  .pdp-pills { grid-template-columns: repeat(2, 1fr); }
  .pdp-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pdp-trust > div { flex: none; flex-direction: row; justify-content: center; gap: 9px; padding: 12px 8px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
  .pdp-trust > div svg { width: 18px; height: 18px; }
  .pdp-trust .t { font-size: 11px; text-align: left; }
  .pdp-press { padding: 14px 0 15px; }
  .pdp-press-label { margin-bottom: 10px; font-size: 10px; }
  .pdp-press-track { gap: 38px; }
  .pdp-press-track span { font-size: 18px; }
  .pdp-ribbon { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 16px; padding: 11px 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pdp-ribbon::-webkit-scrollbar { display: none; }
  .pdp-ribbon span { flex: none; white-space: nowrap; font-size: 12px; gap: 6px; }
}

/* mobile-specific safeguards for v4 additions */
@media (max-width: 480px){
  .pdp-stacks { grid-template-columns: 1fr; }
  .pdp-stack { display: flex; align-items: center; text-align: left; gap: 14px; padding: 10px; }
  .pdp-stack-tile { width: 92px; height: 92px; flex: none; border-radius: 14px; }
  .pdp-stack-body { padding: 0; flex: 1; }
  .pdp-stack .off { top: 10px; right: 10px; }
  .pdp-stack-pop { top: -10px; left: 10px; }
  .pdp-hero-sub-stats { gap: 7px; }
  .pdp-hero-sub-stats > div { padding: 12px 4px; }
  .pdp-hero-sub-stats b { font-size: 20px; }
  .pdp-checks { gap: 8px; }
  .pdp-modes { flex-direction: column; }
}

/* reveal on scroll */
.pdp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease,cubic-bezier(.2,.7,.2,1)), transform .7s var(--ease,cubic-bezier(.2,.7,.2,1)); }
.pdp-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .pdp-reveal { transition: none; opacity: 1; transform: none; } }


/* ===== pdp-v4.css ===== */
/* ============================================================
   BioActive+ — PDP v4 theme layer
   Loaded AFTER pdp.css. Brighter/whiter base + splashes of
   coral / teal / lilac / amber, and the redesigned, playful
   "Why BioActive" play-off infographic.
   ============================================================ */

/* slightly cooler, brighter page wash */
.pdp { --pr: 22px; --accent: var(--coral-600); }

/* ---- hero benefit pills: rotate the splash hues ---- */
.pdp-pills { gap: 10px; }
.pdp-pill { background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; }
.pdp-pill .k { color: var(--c6, var(--green-800)); }
.pdp-pill .t { color: var(--ink-soft); }
.pdp-pill:nth-child(1) { --c6: var(--coral-600); background: var(--coral-50); border-color: var(--coral-200); }
.pdp-pill:nth-child(2) { --c6: var(--teal-600);  background: var(--teal-50);  border-color: var(--teal-200); }
.pdp-pill:nth-child(3) { --c6: var(--lilac-600); background: var(--lilac-50); border-color: var(--lilac-200); }
.pdp-pill:nth-child(4) { --c6: var(--amber-600); background: var(--amber-50); border-color: var(--amber-200); }
.pdp-pill:nth-child(1) .t { color: var(--coral-600); }
.pdp-pill:nth-child(2) .t { color: var(--teal-600); }
.pdp-pill:nth-child(3) .t { color: var(--lilac-600); }
.pdp-pill:nth-child(4) .t { color: var(--amber-600); }

/* ---- hero eyebrow + benefit checklist (brought over from v5) ---- */
.pdp-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: var(--lilac-50); border: 1px solid var(--lilac-200); color: var(--lilac-600);
  font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 6px 13px; border-radius: 999px; }
.pdp-hero-eyebrow svg { color: var(--lilac-500); }
.pdp-checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.pdp-checks li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pdp-checks svg { color: var(--teal-600); flex: none; background: var(--teal-50); border-radius: 999px; padding: 3px; box-sizing: content-box; }
@media (max-width: 520px){ .pdp-checks { grid-template-columns: 1fr 1fr; gap: 10px 14px; } }

/* ---- hero sub-stat badges beneath the gallery (from v5) ---- */
.pdp-hero-sub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.pdp-hero-sub-stats > div { text-align: center; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 6px; }
.pdp-hero-sub-stats b { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 24px; color: var(--green-800); line-height: 1; }
.pdp-hero-sub-stats span { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 600; margin-top: 6px; }
.pdp-hero-sub-stats > div:nth-child(1) b { color: var(--teal-600); }
.pdp-hero-sub-stats > div:nth-child(2) b { color: var(--coral-600); }
.pdp-hero-sub-stats > div:nth-child(3) b { color: var(--lilac-600); }

/* ---- how it works section (from v5) ---- */
.pdp-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pdp-how-card { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px; padding: 30px 26px 28px;
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.pdp-how-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--c6) 55%, transparent); border-color: var(--c2); }
.pdp-how-n { position: absolute; top: 22px; right: 24px; font-family: var(--font-serif); font-weight: 700; font-size: 30px; color: var(--c2); line-height: 1; }
.pdp-how-ic { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 18px;
  background: var(--c1); border: 1px solid var(--c2); color: var(--c6); margin-bottom: 20px; }
.pdp-how-t { font-family: var(--font-serif); font-weight: 600; font-size: 21px; color: var(--green-900); }
.pdp-how-d { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-top: 10px; }
.pdp-how-arrow { position: absolute; top: 50%; right: -28px; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px;
  border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--ink-soft); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
@media (max-width: 820px){ .pdp-how-grid { grid-template-columns: 1fr; } .pdp-how-arrow { top: auto; bottom: -28px; right: 50%; transform: translateX(50%) rotate(90deg); } }

/* ---- Most Popular flag on the bundle stack card + Launch price badge ---- */
.pdp-stack.pop { border-color: var(--coral-200); }
.pdp-stack.pop.on { border-color: var(--coral-600); box-shadow: 0 0 0 1.5px var(--coral-600) inset; }
/* discount pill sits inside the product tile so it never collides with the Most-popular flag */
.pdp-stack .off { top: 12px; right: 12px; }
.pdp-stack-pop { position: absolute; top: -11px; left: 12px; z-index: 5; white-space: nowrap;
  background: var(--coral-600); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.pdp-pricebox.launch { border-color: var(--coral-200); background: #fff; }
.pdp-pb-launch { margin-bottom: 14px; }
.pdp-pb-launchtag { display: inline-flex; align-items: center; gap: 6px; background: var(--coral-600); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

/* ============================================================
   WHY BIOACTIVE — v4 colourful play-off
   ============================================================ */
#why.pdp-why2 { padding-top: clamp(54px,7vw,96px); padding-bottom: clamp(54px,7vw,96px); }
.pdp-why2-head { text-align: center; margin-bottom: clamp(26px,3.5vw,40px); }
.pdp-why2-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  background: var(--coral-50); border: 1px solid var(--coral-200); color: var(--coral-600);
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 7px 15px; border-radius: 999px; }
.pdp-why2-eyebrow svg { color: var(--coral-500); }
.pdp-why2 .pdp-sec-title em { color: var(--coral-600); }

/* accent var assignment per card / panel */
.acc-coral { --c6: var(--coral-600); --c5: var(--coral-500); --c2: var(--coral-200); --c1: var(--coral-50); }
.acc-teal  { --c6: var(--teal-600);  --c5: var(--teal-500);  --c2: var(--teal-200);  --c1: var(--teal-50); }
.acc-lilac { --c6: var(--lilac-600); --c5: var(--lilac-500); --c2: var(--lilac-200); --c1: var(--lilac-50); }
.acc-amber { --c6: var(--amber-600); --c5: var(--amber-500); --c2: var(--amber-200); --c1: var(--amber-50); }

/* ---- cards ---- */
.pdp-why2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.pdp-why2-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px; padding: 22px 22px 18px;
  transition: transform .22s var(--ease,cubic-bezier(.2,.7,.2,1)), box-shadow .22s, border-color .2s, background .2s; }
.pdp-why2-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--c6) 55%, transparent); border-color: var(--c2); }
.pdp-why2-card.on { background: var(--c1); border-color: var(--c5); box-shadow: 0 0 0 1.5px var(--c5) inset, 0 18px 38px -22px color-mix(in srgb, var(--c6) 60%, transparent); transform: translateY(-4px); }
.pdp-why2-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px;
  background: var(--c1); border: 1px solid var(--c2); color: var(--c6); margin-bottom: 18px; transition: background .2s, color .2s; }
.pdp-why2-card.on .pdp-why2-ic { background: var(--c6); border-color: var(--c6); color: #fff; }
.pdp-why2-k { font-family: var(--font-serif); font-weight: 700; font-size: 46px; line-height: .95; color: var(--c6);
  display: flex; align-items: baseline; gap: 7px; letter-spacing: -1px; }
.pdp-why2-k i { font-style: normal; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.pdp-why2-t { font-weight: 700; font-size: 17px; color: var(--ink); margin-top: 14px; }
.pdp-why2-d { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 9px; min-height: 63px; }
.pdp-why2-cue { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; font-weight: 800;
  color: var(--ink-faint); transition: color .2s; }
.pdp-why2-card:hover .pdp-why2-cue { color: var(--c6); }
.pdp-why2-card.on .pdp-why2-cue { color: var(--c6); }

/* ---- play-off panel ---- */
.pdp-why2-panel { margin-top: 18px; display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px,3vw,40px);
  align-items: center; border-radius: 26px; padding: clamp(24px,3vw,34px) clamp(22px,3vw,36px);
  background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 30%, var(--paper)));
  border: 1.5px solid var(--c2); }
.pdp-why2-panel-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--c2);
  color: var(--c6); font-size: 12px; font-weight: 800; letter-spacing: .03em; padding: 8px 14px; border-radius: 999px; }
.pdp-why2-panel-big { font-family: var(--font-serif); font-weight: 700; font-size: clamp(56px,7vw,82px); line-height: .9;
  color: var(--c6); letter-spacing: -2px; margin: 18px 0 12px; }
.pdp-why2-panel-big span { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c6); opacity: .75; margin-top: 6px; }
.pdp-why2-panel-cap { font-size: 14px; line-height: 1.55; color: var(--ink-soft); font-weight: 500; max-width: 32ch; }

/* ---- the column chart ---- */
.pdp-why2-chart { padding: 6px 0 0; }
.pdp-why2-cols { display: flex; align-items: flex-end; gap: clamp(10px,2vw,22px); height: 236px; padding-top: 30px; }
.pdp-why2-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
.pdp-why2-coltrack { flex: 1; width: 100%; max-width: 86px; display: flex; align-items: flex-end; justify-content: center; }
.pdp-why2-colfill { position: relative; width: 100%; border-radius: 16px 16px 7px 7px; background: #fff;
  border: 1.5px solid var(--line); box-shadow: inset 0 -3px 0 rgba(20,40,30,.04);
  transition: height .7s cubic-bezier(.34,1.2,.4,1); }
.pdp-why2-col.win .pdp-why2-colfill { background: linear-gradient(180deg, var(--c5), var(--c6)); border-color: var(--c6);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c6) 70%, transparent); }
.pdp-why2-colval { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-serif); font-weight: 700; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pdp-why2-col.win .pdp-why2-colval { color: var(--c6); }
.pdp-why2-crown { position: absolute; top: -27px; right: -7px; width: 24px; height: 24px; border-radius: 999px;
  background: var(--paper); border: 1.5px solid var(--c2); color: var(--c6); display: grid; place-items: center;
  box-shadow: var(--shadow-sm); }
.pdp-why2-collbl { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.25;
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pdp-why2-collbl em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c6); background: var(--c1); border: 1px solid var(--c2); padding: 2px 8px; border-radius: 999px; }

@media (max-width: 940px){
  .pdp-why2-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-why2-d { min-height: 0; }
  .pdp-why2-panel { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .pdp-why2-panel-aside { display: flex; flex-direction: column; align-items: center; }
  .pdp-why2-panel-cap { max-width: 46ch; }
}
@media (max-width: 520px){
  .pdp-why2-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pdp-why2-card { padding: 16px 15px 15px; }
  .pdp-why2-ic { width: 42px; height: 42px; margin-bottom: 14px; }
  .pdp-why2-k { font-size: 36px; }
  .pdp-why2-cols { gap: 8px; height: 200px; }
  .pdp-why2-colval { font-size: 15px; }
}

/* ---- small splashes elsewhere ---- */
.pdp-ugc { background: linear-gradient(160deg, var(--teal-50), var(--green-50)); }
.pdp-rev-summary { background: linear-gradient(135deg, var(--amber-50), var(--paper)); border-color: var(--amber-200); }
.pdp-rev-dist .d .bar i { background: var(--amber-500); }

/* ---- see more reviews button ---- */
.pdp-rev-more-wrap { display: flex; justify-content: center; margin-top: clamp(26px,3vw,38px); }
.pdp-rev-more { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 14px 26px; font-size: 15px; font-weight: 700; color: var(--green-900); white-space: nowrap;
  transition: border-color .18s, box-shadow .18s, transform .12s, gap .18s; }
.pdp-rev-more:hover { border-color: var(--coral-200); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--coral-600) 60%, transparent); transform: translateY(-2px); gap: 13px; }
.pdp-rev-more .c { font-weight: 800; color: var(--coral-600); }
.pdp-rev-more svg { color: var(--coral-600); }

/* ---- liquid advantage section ---- */
.pdp-liquid-sec .bb-barh-lbl { width: 108px; }

/* ============================================================
   MOST POWERFUL COLLAGEN / PO-OG infographic
   ============================================================ */
.pdp-pw-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(8px,2vw,22px);
  margin: clamp(26px,3.5vw,40px) 0 clamp(22px,3vw,34px); }
.pdp-pw-panel { position: relative; border-radius: 22px; padding: 22px 22px 20px; border: 1.5px solid var(--line); background: var(--paper); }
.pdp-pw-panel.std { background: var(--paper-2); }
.pdp-pw-panel.pro { background: linear-gradient(180deg, var(--coral-50), var(--paper) 55%); border-color: var(--coral-200);
  box-shadow: 0 20px 44px -28px color-mix(in srgb, var(--coral-600) 60%, transparent); }
.pdp-pw-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); }
.pdp-pw-panel.pro .pdp-pw-tag { background: var(--coral-600); border-color: var(--coral-600); color: #fff; }
.pdp-pw-viz { position: relative; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 2px; }

/* standard: tangled grey chain that must be broken down */
.pw-chain { display: flex; align-items: center; }
.pw-bead { width: 17px; height: 17px; border-radius: 999px; background: #cdc7b8; box-shadow: inset 0 -2px 3px rgba(0,0,0,.08);
  margin-left: -3px; border: 2px solid var(--paper-2); }
.pdp-pw-panel.std .pw-bead:nth-child(2n) { transform: translateY(-9px); }
.pdp-pw-panel.std .pw-bead:nth-child(3n) { transform: translateY(8px); }
.pw-scissors { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.pw-scissors svg { color: var(--ink-faint); }

/* PO-OG: pre-cut di-peptides + signal pulse */
.pw-signal { position: absolute; top: 28px; left: 50%; width: 60px; height: 60px; transform: translateX(-50%); border-radius: 999px;
  border: 2px solid var(--coral-500); opacity: 0; }
.pdp-pw-vs.in .pw-signal { animation: pwPulse 2.4s ease-out infinite; }
@keyframes pwPulse { 0%{ width:54px; height:54px; opacity:.8; } 100%{ width:150px; height:150px; opacity:0; } }
.pw-peps { display: flex; gap: 10px; z-index: 1; }
.pw-pep { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1.5px solid var(--coral-200);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--coral-600) 70%, transparent); gap: 3px;
  opacity: 0; transform: translateY(10px) scale(.8); }
.pdp-pw-vs.in .pw-pep { animation: pwPop .5s var(--ease,cubic-bezier(.34,1.3,.5,1)) forwards; }
.pdp-pw-vs.in .pw-pep:nth-child(2){ animation-delay: .12s; } .pdp-pw-vs.in .pw-pep:nth-child(3){ animation-delay: .24s; }
@keyframes pwPop { to { opacity: 1; transform: none; } }
.pw-pep i { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-style: normal;
  font-family: var(--font-serif); font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(180deg, var(--coral-500), var(--coral-600)); }
.pw-pep.alt i { background: linear-gradient(180deg, var(--teal-500), var(--teal-600)); }
.pw-target { font-size: 11.5px; font-weight: 800; color: var(--coral-600); display: inline-flex; align-items: center; gap: 6px; }
.pdp-pw-cap { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; text-align: center; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--line-soft); }
.pdp-pw-cap b { font-family: var(--font-serif); font-size: 16px; color: var(--ink); }
.pdp-pw-panel.pro .pdp-pw-cap b { color: var(--coral-600); }

/* the 30× medallion */
.pdp-pw-medal { width: 104px; height: 104px; flex: none; border-radius: 999px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 32%, var(--coral-500), var(--coral-600)); box-shadow: 0 18px 38px -16px color-mix(in srgb, var(--coral-600) 75%, transparent);
  border: 3px solid #fff; }
.pdp-pw-medal .n { font-family: var(--font-serif); font-weight: 700; font-size: 34px; line-height: .9; letter-spacing: -1px; }
.pdp-pw-medal .l { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .92; margin-top: 3px; line-height: 1.1; }

/* signal flow — 4 step cards */
.pdp-pw-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pdp-pw-step { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; padding: 22px 20px;
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.pdp-pw-step:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--c6) 55%, transparent); border-color: var(--c2); }
.pdp-pw-n { position: absolute; top: 18px; right: 20px; font-family: var(--font-serif); font-weight: 700; font-size: 24px; color: var(--c2); line-height: 1; }
.pdp-pw-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 15px;
  background: var(--c1); border: 1px solid var(--c2); color: var(--c6); margin-bottom: 16px; }
.pdp-pw-t { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--green-900); }
.pdp-pw-d { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin-top: 8px; }
.pdp-pw-arrow { position: absolute; top: 50%; right: -26px; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px;
  border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--ink-soft); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: reduce){ .pw-signal, .pw-pep { animation: none !important; opacity: 1 !important; transform: none !important; } }
@media (max-width: 860px){
  .pdp-pw-flow { grid-template-columns: 1fr 1fr; }
  .pdp-pw-arrow { display: none; }
}
@media (max-width: 640px){
  .pdp-pw-vs { grid-template-columns: 1fr; }
  .pdp-pw-medal { margin: -8px auto; transform: rotate(0); }
}

/* ---- mobile: hide the "As easy as it gets" how-it-works section ---- */
@media (max-width: 640px){ .pdp-how { display: none; } }
/* ---- mobile: centre-align section intros ---- */
@media (max-width: 640px){
  .pdp-sec-head { text-align: center; margin-left: auto; margin-right: auto; }
  .pdp-sec-head .pdp-sec-eyebrow { text-align: center; }
  .pdp-ugc-head { text-align: center; flex-direction: column; align-items: center; }
  .pdp-ugc-head .pdp-sec-eyebrow, .pdp-ugc-head .pdp-sec-title { text-align: center !important; }
  .pdp-ugc-rating { justify-content: center; }
  .pdp .pdp-ugc-sub { max-width: none; }
  .pdp-faq-intro { text-align: center; }
  .pdp-faq-intro .pdp-sec-title { text-align: center !important; }
  .pdp-faq-curious { text-align: center; }
}

/* ---- mobile: UGC becomes a swipeable slider with bigger cards ---- */
@media (max-width: 640px){
  .pdp-ugc-rail { display: flex; grid-template-columns: none; overflow-x: auto; gap: 14px;
    scroll-snap-type: x mandatory; padding: 22px 18px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pdp-ugc-rail::-webkit-scrollbar { display: none; }
  .pdp-vcard { flex: 0 0 clamp(200px, 60vw, 250px); width: auto; scroll-snap-align: center; }
  .pdp-vplay { width: 66px; height: 66px; }
  .pdp-vcap .ct { font-size: 14px; }
  .pdp-vcap .hn, .pdp-vcap .hd .hn { font-size: 13.5px; }
}

/* ============================================================
   COLLAGEN ANIMATED INFOGRAPHIC (mechviz) — ported from Skin Protocol
   ============================================================ */
.pdp-mechviz-sec { --accent: var(--gold-600); }
.mechviz { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--pr); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.mv-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.mv-tab { display: flex; align-items: center; gap: 12px; padding: 17px 20px; text-align: left; border-right: 1px solid var(--line-soft); transition: background .2s; position: relative; background: none; border-top: none; border-left: none; cursor: pointer; }
.mv-tab:last-child { border-right: none; }
.mv-tab:hover { background: var(--paper-2); }
.mv-tab.on { background: var(--green-50); }
.mv-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green-700); }
.mv-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 16px; background: var(--gold-100); border: 1px solid var(--gold-300); color: var(--gold-700); transition: all .2s; }
.mv-tab.on .mv-ic { background: var(--green-700); border-color: var(--green-700); color: #f3e6c4; }
.mv-tt { display: flex; flex-direction: column; min-width: 0; }
.mv-tt .n { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--green-900); line-height: 1.15; }
.mv-tt .s { font-size: 11.5px; font-weight: 700; color: var(--accent); margin-top: 3px; letter-spacing: .01em; white-space: nowrap; }
.mv-panel { display: none; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); padding: clamp(20px,3vw,36px); align-items: center; }
.mv-panel.on { display: grid; }
.mv-viz { position: relative; height: 280px; border-radius: 18px; overflow: hidden; }
.mv-cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 14px 10px 11px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); background: linear-gradient(transparent,rgba(0,0,0,.34)); }
.mv-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mv-h { font-family: var(--font-serif); font-size: clamp(21px,2.3vw,27px); font-weight: 600; color: var(--green-900); margin-top: 9px; line-height: 1.12; }
.mv-p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; }
.mv-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.mv-step { display: flex; align-items: center; gap: 13px; }
.mv-num { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); }
.mv-step b { font-size: 14px; color: var(--green-900); font-weight: 700; display: block; }
.mv-step span { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }
@keyframes mvFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* viz 1 · collagen weave */
.viz-collagen { background: radial-gradient(ellipse 90% 85% at 50% 42%,#7a2440,#330f1f); }
.vc-fiber { position: absolute; height: 4px; border-radius: 999px; transform-origin: center; opacity: 0;
  background: linear-gradient(90deg,rgba(233,184,198,.15),rgba(255,222,231,.95),rgba(233,184,198,.15));
  box-shadow: 0 0 9px rgba(255,200,215,.55); animation: fiberIn 4.6s ease-in-out infinite; }
@keyframes fiberIn { 0%{opacity:0} 12%{opacity:1} 76%{opacity:1} 92%{opacity:0} 100%{opacity:0} }
.vc-cell { position: absolute; left: 50%; top: 48%; width: 26px; height: 26px; border-radius: 999px; z-index: 2;
  background: radial-gradient(circle at 40% 35%,#ffd9e2,#d2738c); transform: translate(-50%,-50%); animation: cellPulse 2.6s ease-in-out infinite; }
@keyframes cellPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,200,215,.55); transform:translate(-50%,-50%) scale(1); } 50%{ box-shadow:0 0 0 15px rgba(255,200,215,0); transform:translate(-50%,-50%) scale(1.14); } }
.vc-meter { position: absolute; right: 18px; top: 24px; bottom: 50px; width: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; z-index: 2; }
.vc-meter-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; border-radius: 999px; background: linear-gradient(180deg,#ffdfe7,#e98ba2); animation: meterFill 4.6s ease-in-out infinite; }
@keyframes meterFill { 0%{height:18%} 78%{height:90%} 100%{height:18%} }

/* viz 2 · oxidative shield */
.viz-shield { background: linear-gradient(180deg,#0e342a,#16463a); }
.vs-sun { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 999px; z-index: 2;
  background: radial-gradient(circle at 40% 35%,#ffe9b0,#e0a93c); box-shadow: 0 0 28px rgba(224,169,60,.7); }
.vs-sun::before { content: ""; position: absolute; inset: -15px; border-radius: 999px;
  background: repeating-conic-gradient(from 0deg,rgba(255,221,150,.55) 0 3.5deg,transparent 3.5deg 22deg);
  -webkit-mask: radial-gradient(circle,transparent 24px,#000 25px); mask: radial-gradient(circle,transparent 24px,#000 25px); animation: mvSpin 16s linear infinite; }
@keyframes mvSpin { to { transform: rotate(360deg); } }
.vs-uv { position: absolute; top: 62px; width: 8px; height: 8px; border-radius: 999px; background: #ff8d6b; box-shadow: 0 0 9px rgba(255,141,107,.85); animation: uvFall 2.5s ease-in infinite; }
@keyframes uvFall { 0%{ top:62px; opacity:0; transform:scale(1) } 14%{opacity:1} 64%{ top:150px; opacity:1; transform:scale(1) } 78%{ top:150px; opacity:0; transform:scale(.3) } 100%{opacity:0} }
.vs-shield { position: absolute; left: 24px; right: 24px; top: 158px; height: 62px; border-radius: 220px 220px 0 0;
  border: 3px solid rgba(124,196,150,.92); border-bottom: none; background: linear-gradient(180deg,rgba(124,196,150,.2),transparent); animation: shieldPulse 2.5s ease-in-out infinite; }
@keyframes shieldPulse { 0%,100%{ box-shadow:0 0 16px rgba(124,196,150,.3) } 50%{ box-shadow:0 0 32px rgba(124,196,150,.72) } }
.vs-skin { position: absolute; left: 0; right: 0; bottom: 34px; height: 46px; background: linear-gradient(180deg,rgba(255,232,205,.14),transparent); }

/* viz 3 · cellular glow */
.viz-glow { background: radial-gradient(circle at 50% 48%,#2b5e4d,#103428); }
.vg-core { position: absolute; left: 50%; top: 46%; width: 62px; height: 62px; border-radius: 999px; transform: translate(-50%,-50%); z-index: 2;
  background: radial-gradient(circle,#fff7e2,#ffd98a 58%,transparent 72%); box-shadow: 0 0 44px rgba(255,225,160,.7); animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.12); } }
.vg-ring { position: absolute; left: 50%; top: 46%; width: 54px; height: 54px; border-radius: 999px; transform: translate(-50%,-50%); border: 2px solid rgba(255,225,160,.6); animation: ringExpand 3s ease-out infinite; }
@keyframes ringExpand { 0%{ width:50px; height:50px; opacity:.85; } 100%{ width:210px; height:210px; opacity:0; } }
.vg-cell { position: absolute; width: 18px; height: 18px; border-radius: 999px; background: #6f897d; transform: translate(-50%,-50%); animation: cellGlow 3s ease-in-out infinite; }
@keyframes cellGlow { 0%,100%{ background:#6f897d; box-shadow:none; } 50%{ background:#ffe6b0; box-shadow:0 0 15px rgba(255,220,150,.85); } }
@media (prefers-reduced-motion:reduce){ .vc-fiber,.vc-cell,.vc-meter-fill,.vs-uv,.vs-shield,.vs-sun::before,.vg-core,.vg-ring,.vg-cell{ animation: none; } .vc-fiber{ opacity: 1; } }

/* collagen-themed recolour for the How-it-works & Benefits visualisations */
.viz-shield.cgn { background: linear-gradient(180deg,#330f1f,#5a1a38); }
.cgn .vs-sun { background: radial-gradient(circle at 40% 35%,#ffe3ea,#e98ba2); box-shadow: 0 0 28px rgba(233,139,162,.7); }
.cgn .vs-sun::before { background: repeating-conic-gradient(from 0deg,rgba(255,200,215,.55) 0 3.5deg,transparent 3.5deg 22deg); }
.cgn .vs-uv { background: #ff8db0; box-shadow: 0 0 9px rgba(255,141,176,.85); }
.cgn .vs-shield { border-color: rgba(255,182,202,.92); background: linear-gradient(180deg,rgba(255,182,202,.2),transparent); animation-name: shieldPulsePink; }
@keyframes shieldPulsePink { 0%,100%{ box-shadow:0 0 16px rgba(255,160,190,.3) } 50%{ box-shadow:0 0 32px rgba(255,160,190,.72) } }
.cgn .vs-skin { background: linear-gradient(180deg,rgba(255,220,230,.16),transparent); }
.viz-glow.cgn { background: radial-gradient(circle at 50% 48%,#7a2440,#330f1f); }
.cgn .vg-core { background: radial-gradient(circle,#fff2f5,#ffb3c6 58%,transparent 72%); box-shadow: 0 0 44px rgba(255,160,190,.7); }
.cgn .vg-ring { border-color: rgba(255,170,195,.6); }
.cgn .vg-cell { animation-name: cellGlowPink; }
@keyframes cellGlowPink { 0%,100%{ background:#7a5a64; box-shadow:none; } 50%{ background:#ffd0de; box-shadow:0 0 15px rgba(255,160,190,.85); } }

@media (max-width: 820px){
  .mv-tabs { grid-template-columns: 1fr; }
  .mv-tab { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .mv-panel { grid-template-columns: 1fr; }
}

/* ============================================================
   TWEAK · lighter / whiter section surfaces (toggle-gated)
   Remaps surface tokens so cards pop against a brighter page.
   Inert unless the .pdp-surf-* class is set on <html> by the Tweak.
   Dark green bands (announce / ribbon) are left intact for contrast.
   ============================================================ */
html.pdp-surf-lighter {
  --cream:#fbfaf6; --bg:#fbfaf6; --paper-2:#fefefe;
  --green-50:#f4f9f5; --coral-50:#fdf5f0; --teal-50:#f1f8f6; --lilac-50:#f7f3fc; --amber-50:#fdf8ea;
  --line:#efece4; --line-soft:#f6f3ec;
}
html.pdp-surf-whitest {
  --cream:#fdfdfc; --bg:#fdfdfc; --paper-2:#ffffff;
  --green-50:#f8fbf9; --coral-50:#fef8f5; --teal-50:#f6fbfa; --lilac-50:#fbf9fe; --amber-50:#fefcf6;
  --green-100:#eef3ef; --line:#f2efe8; --line-soft:#faf8f3;
}
html.pdp-surf-lighter body { background:#fbfaf6; }
html.pdp-surf-whitest body { background:#fdfdfc; }


/* ===== m-mobile.css ===== */
/* ============================================================
   BioActive+ — MOBILE-FIRST PDP (shared base)
   Loaded AFTER pdp.css / pdp-v4.css to reshape the page into a
   single-column, app-like mobile experience. Direction skins
   (A/B/C) live in m-themes.css and key off [data-dir].
   ============================================================ */

/* ---- shared berry palette (remaps the green brand tokens) ---- */
:root {
  --green-900:#25091f; --green-800:#380f30; --green-700:#531944; --green-600:#6d2057;
  --green-500:#8a2e6f; --green-300:#cf9cbd; --green-100:#ecd7e4; --green-50:#f8edf3;
  --paper-2:#fcf7fa; --ink:#251823; --ink-soft:#695663; --ink-faint:#988a93;
  --line:#efe4ea; --line-soft:#f6eff3;
  --coral-600:#8e2960; --coral-500:#a83a78; --coral-200:#e8bdd5; --coral-50:#faecf3;
}
/* product tubes: deep blackberry on muted berry tiles */
.pdp-stack-tile { background: linear-gradient(158deg, #ead7e4, #b886a6); }
.pdp-bottle { background: #3a0f2a; filter: drop-shadow(-3px 3px 4px rgba(20,6,16,.34)); }
.pdp-bottle .cap { background: #21060f; }
.ba .btn-buy, .pdp .btn-buy { box-shadow: 0 12px 28px rgba(83,25,68,.30); }
/* hero sub-stat badges: bold, coloured accent, stand out */
.pdp-hero-sub-stats { gap: 8px; }
.pdp-hero-sub-stats > div { padding: 16px 6px; border: 1.5px solid var(--line); border-radius: 16px;
  background: #fff; box-shadow: 0 6px 18px -14px rgba(40,12,32,.3); }
.pdp-hero-sub-stats b { font-size: 34px; font-weight: 800; letter-spacing: -.6px; color: var(--ink) !important; }
.pdp-hero-sub-stats span { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-top: 6px;
  text-transform: capitalize; letter-spacing: .01em; }

/* ---- phone frame + mobile-only layout overrides (max 767px only) ---- */
@media(max-width:767px){
html, body { background: var(--m-page, #efe6ec); }
.pdp {
  max-width: var(--m-frame, 600px);
  margin-inline: auto;
  background: var(--m-app-bg, #ffffff);
  box-shadow: 0 30px 90px -40px rgba(40,12,32,.5);
  min-height: 100vh;
  padding-bottom: 96px; /* room for the sticky CTA */
}
.pdp-wrap { max-width: 100%; padding: 0 18px; }

/* tablets: a touch wider + a little breathing room around the frame */
@media (min-width: 700px){
  html, body { padding: 0; }
  .pdp { --m-frame: 640px; }
  .pdp-wrap { padding: 0 22px; }
}

/* ============================================================
   HEADER / ANNOUNCE — thinner, merged
   ============================================================ */
.pdp-head-in { max-width: 100%; padding: 11px 16px; }
.pdp-nav { display: none !important; }           /* drop desktop nav links */
.pdp-brand-name { font-size: 18px; }
.pdp-announce { height: 34px; }
.pdp-announce-msg { font-size: 11.5px; }

/* ============================================================
   HERO — kept faithful, just fluid + tightened for mobile.
   Crucially: stacks stay 3-up and modes stay 2-up at every width.
   ============================================================ */
.pdp-hero { padding: 16px 0 8px; }
.pdp-hero-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
.pdp-gallery-col { position: static !important; max-width: 100% !important; margin: 0 !important; }

/* gallery a little shorter on phones */
.pdp-main { border-radius: 22px; }
.pdp-gallery .pdp-slide { aspect-ratio: 4 / 4 !important; min-height: 0 !important; }


.pdp-hero-eyebrow { font-size: 12px; }
.pdp-title { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.05; margin-bottom: 14px; }
.pdp-slide.on { opacity: 1 !important; }
/* hero badges: never wrap */
.pdp-badge { font-size: 10.5px !important; padding: 6px 11px !important; white-space: nowrap; }
.pdp-badges { gap: 7px; }
.pdp-badges .pdp-badge.paper { display: none !important; }  /* remove Halal Certified badge */
.pdp .pdp-tagline { font-size: 15px; margin-bottom: 22px; max-width: 100%; }

/* --- KEEP STACKS 3-UP (override pdp.css 480px collapse) --- */
@media (max-width: 480px){
  .pdp-stacks { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 9px !important; }
  .pdp-stack { display: block !important; text-align: center !important; padding: 0 !important; }
  .pdp-stack-body { padding: 11px 6px 12px !important; flex: none !important; }
  .pdp-stack .off { top: -9px !important; right: 7px !important; }
  .pdp-modes { flex-direction: row !important; }
}
.pdp-stacks { gap: 9px; }
.pdp-stack-tile { height: 104px !important; width: auto !important; border-radius: 16px 16px 0 0 !important; }
.pdp-bottle { width: 30px; height: 54px; }
.pdp-bottle .cap { width: 15px; height: 9px; top: -6px; }
.pdp-bottle + .pdp-bottle { margin-left: -9px; }
.pdp-stack .name { font-size: 13.5px; }
.pdp-stack .note { font-size: 10.5px; }
.pdp-stack-pop { font-size: 9px !important; padding: 4px 8px !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%); white-space: nowrap; }
.pdp-stack .off.pill { font-size: 10px !important; padding: 3px 7px !important; }
.pdp-stack .tick { width: 19px; height: 19px; top: 8px; left: 8px; }

/* modes: always two side-by-side */
.pdp-modes { display: flex !important; gap: 9px; margin-top: 18px; }
.pdp-mode { padding: 14px 6px; font-size: 12.5px; }
/* subscription "Deliver every" panel: full width, spanning both purchase modes */
.sub-detail { width: 100% !important; margin-left: 0 !important; box-sizing: border-box; }

/* price box + buy button: a little bigger / bolder */
.pdp-pricebox { border-radius: 18px; padding: 18px; }
.pdp-pricebox .amount b { font-size: 32px; }
.btn-checkout { font-size: 15px; padding: 16px 18px; border-radius: 14px; }

/* hero sub-stats already boosted in the inline theme; keep 3-up */
.pdp-hero-sub-stats { grid-template-columns: repeat(3,1fr) !important; }

/* hero trust row → single compact line directly under the buy box */
.pdp-trust { display: none !important; }
.pdp-trust::-webkit-scrollbar { display: none; }
.pdp-trust > div { flex: none !important; flex-direction: row !important; align-items: center; gap: 7px !important;
  padding: 9px 13px !important; background: var(--paper); border: 1px solid var(--line); border-radius: 999px !important;
  white-space: nowrap; }
.pdp-trust > div svg { width: 16px !important; height: 16px !important; }
.pdp-trust .t { font-size: 11px !important; white-space: nowrap; text-align: left; }

/* ============================================================
   GLOBAL SECTION RHYTHM — full-bleed, app-like, less small text
   ============================================================ */
.pdp-sec { padding: 40px 0; }
/* #why carries a large top padding from pdp.css — trim it to match the rhythm (esp. Direction A) */
.pdp:not([data-dir="C"]) #why.pdp-sec { padding-top: 26px !important; }
.pdp-sec-head { text-align: center; max-width: 100%; margin: 0 auto 22px; padding: 0 2px; }
.pdp-sec-title { font-size: clamp(26px, 7vw, 34px); line-height: 1.08; }
.pdp-sec-eyebrow { font-size: 11px; margin-bottom: 9px; }
/* trim secondary descriptive paragraphs site-wide (mobile = punchier) */
.pdp .pdp-sec-sub { display: none; }
/* centre-align section intros (eyebrow + title), consistent across all sections */
.pdp-sec-head .pdp-sec-eyebrow { text-align: center; }
.pdp-sec-head { text-align: center; margin-left: auto; margin-right: auto; }

/* thin trust line under the hero (single row, scrolls) */
.m-trustline { display: flex; gap: 16px; align-items: center; justify-content: flex-start;
  overflow-x: auto; scrollbar-width: none; padding: 13px 18px; background: var(--m-trust-bg, var(--green-900));
  color: var(--m-trust-fg, #f4e9f0); }
.m-trustline::-webkit-scrollbar { display: none; }
.m-trustline span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; flex: none; }
.m-trustline svg { color: var(--m-trust-ic, var(--gold-300)); }

/* press strip: thinner */
.pdp-press { padding: 16px 0 17px; }
.pdp-press-track span { font-size: 19px; }

/* ============================================================
   WHY BIOACTIVE — compact: icon left, stat + title stacked right
   ============================================================ */
.pdp-why2-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
.pdp-why2-card { display: grid !important; grid-template-columns: auto 1fr; column-gap: 12px;
  align-items: center; padding: 13px 14px !important; }
.pdp-why2-ic { grid-row: 1 / span 2; align-self: center; width: 40px !important; height: 40px !important;
  margin-bottom: 0 !important; }
.pdp-why2-k { grid-column: 2; align-self: end; font-size: 25px !important; line-height: 1 !important; }
.pdp-why2-k i { font-size: 11px; }
.pdp-why2-t { grid-column: 2; align-self: start; font-size: 13px !important; margin-top: 3px !important; line-height: 1.2; }
.pdp-why2-d { display: none !important; }        /* drop the small descriptions */
.pdp-why2-cue { display: none !important; }
/* play-off panel: compact (was up to 82px number + 236px chart) */
.pdp-why2-panel { margin-top: 12px !important; padding: 12px 14px 12px !important; gap: 10px !important; border-radius: 18px !important; }
.pdp-why2-panel-big { font-size: 40px !important; margin: 4px 0 0 !important; }
.pdp-why2-panel-big span { font-size: 11px !important; margin-top: 3px !important; }
.pdp-why2-panel-tag { font-size: 11px !important; padding: 6px 11px !important; }
.pdp-why2-panel-cap { display: block !important; font-size: 11.5px !important; font-weight: 600;
  margin-top: 6px !important; max-width: none !important; }
.pdp-why2-cols { height: 156px !important; padding-top: 18px !important; gap: 9px !important; }
.pdp-why2-colval { font-size: 14px !important; top: -24px !important; }
/* uniform label height so every bar shares one baseline */
.pdp-why2-collbl { min-height: 50px !important; margin-top: 10px !important; justify-content: flex-start !important; }
.pdp-why2-head { margin-bottom: 18px; text-align: center; }
.pdp-why2-head .pdp-sec-title, .pdp-why2-head .pdp-why2-eyebrow { text-align: center; }
.pdp-why2-head .pdp-why2-eyebrow { justify-content: center; white-space: nowrap; }
.pdp-why2-head .pdp-sec-title { white-space: nowrap; font-size: clamp(19px, 5.8vw, 28px) !important; }
/* the play-off panel stacks */
.pdp-why2-panel { grid-template-columns: 1fr !important; }

/* ============================================================
   MERGED "WHY IT WORKS" CARD (replaces 2 infographics)
   ============================================================ */
.m-wiw { background: var(--m-card-bg, #fff); border: 1.5px solid var(--line); border-radius: 24px;
  padding: 24px 20px; overflow: hidden; position: relative; }
.m-wiw-eyebrow { display: flex; width: fit-content; margin: 0 auto 14px; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent, var(--green-700));
  background: color-mix(in srgb, var(--m-accent, var(--green-700)) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--m-accent, var(--green-700)) 22%, transparent); padding: 8px 16px; border-radius: 999px; }
.m-wiw-h { font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px,6.5vw,30px); line-height: 1.08;
  color: var(--green-900); letter-spacing: -.3px; text-align: center; }
.m-wiw-h em { font-style: italic; color: var(--m-accent, var(--green-700)); }
.m-wiw-big { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 4px; }
.m-wiw-big b { font-family: var(--font-serif); font-weight: 700; font-size: 64px; line-height: .9; color: var(--m-accent, var(--green-700)); }
.m-wiw-big span { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.m-wiw-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }
.m-wiw-bar { }
.m-wiw-bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.m-wiw-bar-top .l { font-size: 13px; font-weight: 700; color: var(--ink); }
.m-wiw-bar-top .v { font-size: 13px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.m-wiw-bar.hi .v { color: var(--m-accent, var(--green-700)); }
.m-wiw-track { height: 13px; border-radius: 999px; background: var(--line-soft, #f4f1fb); overflow: hidden; }
.m-wiw-fill { display: block; height: 100%; border-radius: 999px; background: var(--green-300);
  transition: width .8s cubic-bezier(.4,0,.2,1); }
.m-wiw-bar.hi .m-wiw-fill { background: linear-gradient(90deg, var(--m-accent, var(--green-600)), var(--green-800)); }

/* mini absorb→signal→glow flow */
.m-wiw-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.m-wiw-step { text-align: center; background: var(--m-step-bg, var(--green-50)); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 8px; cursor: pointer; font-family: inherit; transition: border-color .18s, box-shadow .18s, transform .18s; }
.m-wiw-step.on { border-color: var(--m-accent, var(--green-700));
  box-shadow: 0 0 0 1.5px var(--m-accent, var(--green-700)) inset; transform: translateY(-2px); }
.m-wiw-step .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto 9px;
  background: var(--m-step-ic-bg, var(--green-300)); color: var(--m-step-ic-fg, var(--green-900)); transition: background .18s, color .18s; }
.m-wiw-step.on .ic { background: var(--m-accent, var(--green-700)); color: #fff; }
.m-wiw-step .t { font-size: 13px; font-weight: 800; color: var(--green-900); }
.m-wiw-step .d { font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }

/* selectable stage above the steps — fixed min-height so the steps don't jump */
.m-wiw-stage { margin-top: 18px; min-height: 384px; animation: bbFadeUp .35s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.m-wiw-stage-title { font-family: var(--font-serif); font-weight: 600; font-size: 20px; color: var(--green-900);
  margin-bottom: 14px; text-align: center; }
.m-wiw-stage-text { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); font-weight: 500; margin: 22px 0 0 !important; text-align: center; }
.m-wiw-stage-text strong { color: var(--green-900); font-weight: 800; }

/* tab 1 — PO-OG di-peptide pair */
.m-wiw-dipair { display: flex; align-items: stretch; justify-content: center; gap: 12px; margin-top: 22px; }
.m-wiw-di { flex: 1; background: var(--m-step-bg, #fbeff5); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.m-wiw-di .k { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--m-accent); }
.m-wiw-di .pair { display: flex; gap: 6px; justify-content: center; }
.m-wiw-di .pair i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 13px; font-weight: 800; color: #fff; background: var(--m-accent, #b3186d); }
.m-wiw-di.b .pair i { background: #1f8a5b; }
.m-wiw-di .sub { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.m-wiw-plus { align-self: center; font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--m-accent); }

/* tab 2 — three advantages multiplied */
.m-wiw-mult { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }
.m-wiw-adv { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--m-step-bg, #fbeff5);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 13px; position: relative; }
.m-wiw-adv .n { font-family: var(--font-serif); font-weight: 700; font-size: 15px; color: var(--m-accent); flex: none; }
.m-wiw-adv .tx b { display: block; font-size: 14px; font-weight: 800; color: var(--green-900); line-height: 1.2; }
.m-wiw-adv .tx span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.m-wiw-adv .op { display: none; }
.m-wiw-eq { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap;
  background: var(--m-accent, #b3186d); color: #fff; border-radius: 14px; padding: 18px 14px; text-align: center;
  font-size: 13.5px; font-weight: 700; margin-top: 7px; }
.m-wiw-eq span { font-family: var(--font-serif); font-size: 18px; }
.m-wiw-eq b { font-family: var(--font-serif); font-size: 30px; font-weight: 700; }

/* tab 3 — four how-it-works steps (cream / green / gold scheme) */
.m-wiw-steps4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px;
  background: #f3ebda; border-radius: 18px; padding: 11px; }
.m-wiw-steps4 .s { background: #fff; border: 1px solid #ece0c8; border-radius: 14px; padding: 13px 13px 14px; position: relative; }
.m-wiw-steps4 .s .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: #efe2c5; color: #9c7a31; }
.m-wiw-steps4 .s .n { position: absolute; top: 13px; right: 14px; font-family: var(--font-serif); font-weight: 700; font-size: 14px; color: #c3a14d; }
.m-wiw-steps4 .s b { display: block; font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: #234034; margin: 10px 0 4px; }
.m-wiw-steps4 .s span { font-size: 12.5px; font-weight: 600; color: #6f6657; line-height: 1.45; }

/* tabs (text-only, no icons) */
.m-wiw-tabs .m-wiw-step { padding: 12px 6px; }
.m-wiw-tabs .m-wiw-step .t { font-size: 14.5px; font-weight: 800; color: var(--green-900); }
.m-wiw-tabs .m-wiw-step .d { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-top: 3px; }

/* micro-text floor: nudge the roomy small labels up to 12px (design-safe;
   tiny corner pills like "Most popular" / "20% OFF" / "winner" left as-is) */
.pdp-announce-msg { font-size: 12px; }
.pdp-why2-panel-cap { font-size: 12px !important; }
.m-cta-info .meta { font-size: 12px; }
.pdp-review .loc { font-size: 12px; }
.pdp-protocol-badge { font-size: 12px; }
.pdp-vviews { font-size: 12px; }
.pdp-ph-cap { font-size: 12px; }
.pdp-hero-sub-stats .pdp-why2-k i { font-size: 12px; }
.m-wiw-tabs .m-wiw-step.on .t { color: var(--m-accent, var(--green-700)); }

/* learn-more link, reused everywhere */
.m-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  font-size: 13.5px; font-weight: 800; color: var(--m-accent, var(--green-700)); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--m-accent, var(--green-700)) 30%, transparent); padding-bottom: 2px; }
.m-link:hover { border-bottom-color: var(--m-accent, var(--green-700)); }
.m-links-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; padding-left: 5px; }

/* ============================================================
   HOW IT WORKS — 3 steps, big, no paragraphs
   ============================================================ */
.pdp-how-grid { grid-template-columns: 1fr !important; gap: 11px; }
.pdp-how-card { padding: 18px 18px !important; flex-direction: row !important; align-items: center; text-align: left !important;
  display: flex !important; gap: 16px; }
.pdp-how-ic { margin: 0 !important; flex: none; }
.pdp-how-n { position: static !important; }
.pdp .pdp-how-d { display: none !important; }
.pdp-how-t { font-size: 17px !important; margin: 0 !important; }
.pdp-how-arrow { display: none !important; }

/* ============================================================
   UGC RAIL — horizontal scroll, snappy
   ============================================================ */
.pdp-ugc { padding: 40px 0; background: var(--m-ugc-bg, #f6eff3); }
.pdp-ugc-head { padding: 0 18px; }
.pdp .pdp-ugc-sub { display: none !important; }   /* drop secondary line (was overlapping the title) */
.pdp-ugc-rail { display: flex !important; grid-template-columns: none !important; gap: 12px; padding: 20px 18px 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pdp-ugc-rail::-webkit-scrollbar { display: none; }
.pdp-vcard { flex: 0 0 clamp(200px, 60vw, 250px); scroll-snap-align: start; }

/* ============================================================
   TIMELINE — compact, big numbers
   ============================================================ */
.pdp-tl-detail .pdp-tl-ttl { font-size: 22px; }
.pdp-tl-metrics-grid { grid-template-columns: 1fr 1fr !important; }
.pdp-tl-metrics-foot, .pdp-cmp-foot { font-size: 10.5px; }

/* ============================================================
   LEARN — the science, as links to explainer pages
   ============================================================ */
.m-photo-wrap { margin: 4px 0 16px; }
.m-photo-sec { padding: 16px 0; }
.m-learn-list { display: flex; flex-direction: column; gap: 10px; }
.m-learn-link { display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--m-card-bg, #fff); border: 1.5px solid var(--line); border-radius: 16px; padding: 17px 16px;
  transition: border-color .15s, transform .15s; }
.m-learn-link:active { transform: scale(.99); }
.m-learn-link:hover { border-color: var(--m-accent, var(--green-700)); }
.m-learn-link .qmark { width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center;
  background: var(--m-accent, var(--green-700)); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 16px; }
.m-learn-link .q { font-size: 16px; font-weight: 700; color: var(--green-900); }
.m-learn-link .go { margin-left: auto; color: var(--m-accent, var(--green-700)); }

/* ============================================================
   COMPARE — collapsed under an accordion
   ============================================================ */
.m-acc { border: 1.5px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--m-card-bg,#fff); }
.m-acc-head { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center;
  gap: 12px; padding: 20px 18px; }
.m-acc-head .ico { margin-left: auto; transition: transform .3s; color: var(--m-accent, var(--green-700)); }
.m-acc.open .m-acc-head .ico { transform: rotate(180deg); }
.m-acc-head .t { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--green-900); }
.m-acc-head .s { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.m-acc-badge { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--m-accent, var(--green-700)); color: #fff; padding: 4px 9px; border-radius: 999px; }
.m-acc-wrap { overflow: hidden; max-height: 0; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.m-acc.open .m-acc-wrap { max-height: 1600px; }
.m-acc-inner { overflow: hidden; }
.m-acc-body { padding: 0 16px 18px; }

/* compress the compare table inside the accordion */
.pdp-table-wrap { margin: 0; }
.pdp-table th .col-name { font-size: 11px; }
.pdp-table td, .pdp-table th { padding: 9px 6px; }
.pdp-table .feat { font-size: 11.5px; }

/* ============================================================
   REVIEWS — summary + cards in a scroll rail
   ============================================================ */
.pdp-rev-summary { max-width: 100%; flex-direction: row; }
.pdp-rev-grid { display: flex !important; grid-template-columns: none !important; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.pdp-rev-grid::-webkit-scrollbar { display: none; }
.pdp-review { flex: 0 0 84%; scroll-snap-align: start; }

/* ============================================================
   PROTOCOL — stack vertical, centered
   ============================================================ */
/* ============================================================
   PROTOCOL — compact: short tiles, tight gaps, no filler
   ============================================================ */
.pdp-protocol { grid-template-columns: 1fr !important; gap: 14px !important; padding: 20px 16px !important; }
.pdp-protocol-desc { display: none; }
.pdp-protocol-body { text-align: left !important; }
.pdp-protocol-visual { gap: 9px; }
.pdp-prot-tile { aspect-ratio: auto !important; height: 108px; }
.pdp-protocol-title { font-size: 25px !important; margin-top: 4px !important; }
.pdp-protocol-list { margin-top: 12px !important; gap: 8px !important; display: flex !important; }
.pdp-protocol-list li { font-size: 14px; }
.pdp-protocol-list .ben { display: none; }       /* drop wrapping benefit text */
.pdp-protocol-foot { margin-top: 16px !important; }
.pdp-protocol-re { margin-top: 10px !important; }

/* ============================================================
   FAQ — single column, no side video column
   ============================================================ */
.pdp-faq-layout { grid-template-columns: 1fr !important; }
.pdp-faq-side { display: none !important; }
.pdp-faq-a { padding: 0 18px 16px 60px !important; }

/* ============================================================
   FOOTER — compact
   ============================================================ */
.pdp-foot-grid { grid-template-columns: 1fr 1fr !important; }
.pdp-foot-brand { grid-column: 1 / -1; }

/* toast already styled globally; nudge it above the CTA */
.bb-toast { bottom: 92px !important; }
} /* end @media(max-width:767px) — phone frame + mobile layout overrides */

/* ============================================================
   STICKY BOTTOM CTA — outside media query so it always works
   (section itself is display:none on desktop via self-hiding style)
   ============================================================ */
.m-cta { position: fixed; left: 50%; bottom: 0; z-index: 9999;
  width: min(620px, 100%);
  background: var(--m-cta-bg, #fff); border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -12px 30px -18px rgba(40,12,32,.4);
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px;
  transform: translateX(-50%) translateY(120%); transition: transform .35s cubic-bezier(.4,0,.2,1); }
.m-cta.show { transform: translateX(-50%) translateY(0); display:none !important; }
.m-cta-info { display: flex; flex-direction: column; line-height: 1.1; flex: none; }
.m-cta-info .now { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--green-900); }
.m-cta-info .was { font-size: 12px; color: var(--ink-faint); text-decoration: line-through; font-weight: 600; }
.m-cta-info .meta { font-size: 11px; font-weight: 700; color: var(--m-accent, var(--green-700)); margin-top: 2px; }
.m-cta-add { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; text-align: center;
  background: var(--m-accent, var(--green-700)); color: #fff; font-weight: 800; font-size: 15px;
  padding: 16px 14px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--m-accent, var(--green-700)) 70%, transparent); transition: filter .15s; }
.m-cta-add:active { filter: brightness(.94); }
.m-cta-add.done { background: var(--green-700); }


/* ===== m-themes.css ===== */
/* ============================================================
   BioActive+ — MOBILE PDP — three direction skins.
   Keys off [data-dir] on .pdp. The hero stays nearly identical
   across all three; directions diverge below the fold in colour
   brightness, type treatment, section rhythm and card style.
   ============================================================ */

/* ============================================================
   DIRECTION A — "EDITORIAL"
   Deep berry on lots of warm white. Serif headlines, hairline
   dividers, generous air, restrained and premium.
   ============================================================ */
.pdp[data-dir="A"]{
  --m-page:#ece1e8; --m-app-bg:#ffffff; --m-card-bg:#ffffff;
  --m-accent:#7a1f54; --m-ugc-bg:#f8f1f5; --m-step-bg:#faf3f8;
  --m-trust-bg:#2b0f24; --m-trust-fg:#f3e3ed; --m-trust-ic:#e7b7d2;
  --m-cta-bg:#ffffff;
}
.pdp[data-dir="A"] .pdp-sec { border-top: 1px solid var(--line); }
.pdp[data-dir="A"] #top.pdp-hero { border-top: none; }
.pdp[data-dir="A"] .pdp-sec-eyebrow { color: var(--m-accent); }
.pdp[data-dir="A"] .m-wiw { border-radius: 4px; border-width: 1px;
  border-left: 3px solid var(--m-accent); }

/* ============================================================
   DIRECTION B — "BOLD"
   High-energy. Bright magenta pop, alternating full-bleed berry
   blocks vs white, oversized uppercase headlines, chunky pills.
   ============================================================ */
.pdp[data-dir="B"]{
  --m-page:#1c0717; --m-app-bg:#ffffff; --m-card-bg:#ffffff;
  --m-accent:#e0457f; --m-ugc-bg:#ffffff; --m-step-bg:#fdeef4;
  --m-trust-bg:#e0457f; --m-trust-fg:#fff; --m-trust-ic:#ffd9e7;
  --m-cta-bg:#2b0f24;
}
/* loud section titles */
.pdp[data-dir="B"] .pdp-sec-title,
.pdp[data-dir="B"] .pdp-why2-head .pdp-sec-title{
  font-family: var(--font-sans, 'Hanken Grotesk'); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.5px; line-height: .98;
  font-size: clamp(30px, 9vw, 44px); }
.pdp[data-dir="B"] .pdp-sec-title em { font-style: normal; color: var(--m-accent); }
.pdp[data-dir="B"] .pdp-sec-eyebrow { color: var(--m-accent); font-weight: 800; }

/* alternating dark berry blocks for rhythm */
.pdp[data-dir="B"] #why { background: #2b0f24; }
.pdp[data-dir="B"] #why .pdp-sec-title, .pdp[data-dir="B"] #why .pdp-why2-eyebrow {
  color: #fff; }
.pdp[data-dir="B"] #why .pdp-why2-card { background:#3a1430; border-color:#52204360; }
.pdp[data-dir="B"] #why .pdp-why2-k { color:#fff; }
.pdp[data-dir="B"] #why .pdp-why2-t { color:#f0d9e6; }
.pdp[data-dir="B"] #why .pdp-why2-ic { color:#fff; }

/* huge merged-card number */
.pdp[data-dir="B"] .m-wiw-big b { font-size: 78px; }
.pdp[data-dir="B"] .m-wiw { border:none; background: linear-gradient(160deg,#fdeef4,#fbe0ec); border-radius: 26px; }

/* chunky buttons */
.pdp[data-dir="B"] .m-cta-add, .pdp[data-dir="B"] .btn-checkout { border-radius: 999px; font-weight: 800; }
.pdp[data-dir="B"] .m-cta-info .now { color:#fff; }
.pdp[data-dir="B"] .m-cta-info .was { color:#c79bb4; }
.pdp[data-dir="B"] .m-link { border-radius: 999px; border: none; background: var(--m-accent); color:#fff;
  padding: 9px 16px; }

/* ============================================================
   DIRECTION C — "APP"
   Modern DTC app. Berry-tinted page, content in white floating
   rounded cards with soft shadows, vibrant accent, pill subnav.
   ============================================================ */
.pdp[data-dir="C"]{
  --m-page:#e7d8e3; --m-app-bg:#f7eef4; --m-card-bg:#ffffff;
  --m-accent:#b3186d; --m-ugc-bg:#ffffff; --m-step-bg:#fbeff5;
  --m-trust-bg:#ffffff; --m-trust-fg:#5a1c47; --m-trust-ic:#b3186d;
  --m-cta-bg:#ffffff;
}
.pdp[data-dir="C"] .m-trustline { border-bottom: 1px solid var(--line); }
/* float every content section into a white card */
.pdp[data-dir="C"] .pdp-sec { padding: 14px 0; }
.pdp[data-dir="C"] .pdp-sec > .pdp-sec-head { padding: 0 18px; }
.pdp[data-dir="C"] #why, .pdp[data-dir="C"] #how, .pdp[data-dir="C"] #timeline,
.pdp[data-dir="C"] #compare, .pdp[data-dir="C"] #reviews, .pdp[data-dir="C"] #faq,
.pdp[data-dir="C"] .m-wiw-sec, .pdp[data-dir="C"] #protocol {
  margin: 12px 12px; padding: 22px 16px; background:#fff; border-radius: 24px;
  box-shadow: 0 18px 40px -28px rgba(40,12,32,.45); }
.pdp[data-dir="C"] .m-wiw { border:none; box-shadow:none; padding:0; border-radius:0; overflow:visible; }
.pdp[data-dir="C"] .pdp-ugc { background: var(--m-app-bg); }
.pdp[data-dir="C"] .pdp-sec-eyebrow { color: var(--m-accent); }
.pdp[data-dir="C"] .pdp-why2-card { box-shadow: 0 10px 24px -18px rgba(40,12,32,.4); }
/* sticky pill subnav */
.pdp[data-dir="C"] .m-subnav { display: flex !important; }

/* subnav hidden by default (only C shows it) */
.m-subnav { display: none; position: sticky; top: 0; z-index: 55; gap: 8px; overflow-x: auto;
  scrollbar-width: none; padding: 10px 14px; background: color-mix(in srgb, var(--m-app-bg,#fff) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.m-subnav::-webkit-scrollbar { display: none; }
.m-subnav button { all: unset; cursor: pointer; flex: none; white-space: nowrap; font-size: 12.5px; font-weight: 700;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; }
.m-subnav button:active { color: var(--m-accent); border-color: var(--m-accent); }



/* ===== Shopify/Dawn section overrides =====
   Each block is its own section (no single phone-frame wrapper), so drop the
   centred-card frame and instead centre the inner content on wide screens. */
/* Remove phone-frame look on all screens (box-shadow, fixed height etc.) */
/* Note: Shopify puts shopify-section + ba + pdp on the SAME element, so we use compound selectors (no space) */
.shopify-section .pdp{max-width:none!important;margin:0!important;box-shadow:none!important;min-height:0!important;padding-bottom:0!important;background:transparent;}
.shopify-section.ba.pdp{max-width:none!important;margin:0!important;box-shadow:none!important;min-height:0!important;padding-bottom:0!important;background:transparent!important;}
.shopify-section .pdp-head{position:static!important;}
/* pdp-wrap width cap + mobile-only CTA width: only on mobile (desktop uses 1200px from bioactive-pdp.css) */
@media(max-width:767px){
  .shopify-section .pdp .pdp-wrap{max-width:620px!important;margin-inline:auto!important;}
  .m-cta{width:min(620px,100%)!important;}
  .ba.pdp{--m-frame:620px;}
}

/* hero alignment toggle (Shopify) */
.pdp-hero.m-hero--center .pdp-title,.pdp-hero.m-hero--center .pdp-tagline{text-align:center;margin-inline:auto;}
.pdp-hero.m-hero--center .pdp-rating{justify-content:center;}
.pdp-hero.m-hero--center .pdp-hero-eyebrow{display:flex;width:fit-content;max-width:100%;margin-inline:auto;}
.pdp-hero.m-hero--center .pdp-checks{justify-content:center;width:fit-content;margin-inline:auto;}

.pdp-vmedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}

/* ============================================================
   TABLET / DESKTOP BREAKPOINT LAYER
   • ≤859px  → single column; device frame widens to fill the
               viewport so there are no awkward side gutters.
   • ≥860px  → hero switches to the original two-column layout
               (gallery + sub-stats  |  buy box).
   ============================================================ */
@media (min-width: 700px) and (max-width: 859.98px){
  .ba.pdp { --m-frame: min(92vw, 800px); }
  .shopify-section .pdp .pdp-wrap { max-width: min(92vw, 800px) !important; }
  .pdp-wrap { padding: 0 clamp(22px, 4vw, 40px); }
  .m-cta { width: min(min(92vw, 800px), 100%) !important; }
  .pdp-gallery .pdp-slide { aspect-ratio: 3 / 3 !important; }
}
@media (min-width: 860px){
  .ba.pdp { --m-frame: min(96vw, 1160px); }
  .shopify-section .pdp .pdp-wrap { max-width: min(96vw, 1160px) !important; }
  .pdp-wrap { padding: 0 clamp(28px, 4vw, 56px); }
  .m-cta { width: min(min(96vw, 1160px), 100%) !important; }
  .pdp-hero { padding: clamp(28px,4vw,48px) 0 clamp(20px,3vw,32px); }
  .pdp-hero-grid { grid-template-columns: 1.04fr 1fr !important; gap: clamp(30px,4vw,56px) !important; align-items: start; }
  .pdp-gallery-col { position: sticky !important; top: 88px !important; max-width: 100% !important; margin: 0 !important; }
  .pdp-gallery .pdp-slide { aspect-ratio: 1 / 1 !important; }
  .pdp-arr { display: grid !important; }
  .pdp-title { font-size: clamp(38px, 4vw, 52px); line-height: 1.04; }
  .pdp .pdp-tagline { font-size: 17px; }
  .pdp-hero-sub-stats b { font-size: 30px; }
}

/* ============================================================
   CONSISTENCY PASS — eyebrow pills, star rating, UGC grid
   ============================================================ */
/* every section eyebrow reads as a pill badge, centred */
.pdp-sec-eyebrow { display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  margin: 0 auto 14px; padding: 7px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--m-accent,#b3186d) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--m-accent,#b3186d) 24%, transparent);
  color: var(--m-accent,#b3186d); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
/* gold stars in the hero rating */
.pdp-rating-stars { color: var(--gold-500,#e6a93b); font-size: 14px; letter-spacing: 1.5px; }
/* UGC: real multi-up grid (not a giant slider) + centred head from tablet up */
@media (min-width: 900px){
  .pdp-ugc-rail { max-width: 1200px; margin-inline: auto; }
  .pdp-vcard { flex: 0 0 250px !important; width: auto !important; }
  .pdp-ugc-head { flex-direction: column !important; align-items: center !important; text-align: center; justify-content: center; }
  .pdp-ugc-head > div { width: 100%; }
  .pdp-ugc-head .pdp-sec-eyebrow, .pdp-ugc-head .pdp-sec-title { text-align: center !important; }
  .pdp-ugc-rating { justify-content: center; }
}

/* hero centre-align refinements (eyebrow, rating group, sub-stats) */
.pdp-hero.m-hero--center .pdp-rating{width:fit-content;max-width:100%;margin-inline:auto;flex-wrap:wrap;}
.pdp-hero.m-hero--center .pdp-rating .pdp-bestseller{margin-left:8px;}
.pdp-hero.m-hero--center .pdp-hero-sub-stats{justify-content:center;}
/* perf: pause CSS animations + inline media while offscreen (set by IntersectionObserver) */
.anim-idle, .anim-idle *{ animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce){ .pdp-press-track, .mv-viz *, .vc-fiber, .vc-cell, .vc-meter-fill, .vs-uv, .vs-shield{ animation: none !important; } }
/* sold-out add buttons */
.btn-checkout.is-soldout, .m-cta-add.is-soldout, [data-add].is-soldout{ opacity:.55 !important; filter:grayscale(.5); cursor:not-allowed; box-shadow:none !important; }


@media (max-width: 860px){
  section#shopify-section-template--22179112026361__why_men .pdp-wrap.pdp-sec.pdp-men,
  section#shopify-section-template--22179112026361__why_us,
  section#shopify-section-template--22179112026361__peptides,
  section#shopify-section-template--22179112026361__liquid {
      display: none !important;
  }
  section#shopify-section-template--22179112026361__protocol,
  section#shopify-section-template--22179112026361__reviews,
  section#shopify-section-template--22179112026361__faq {
      display: block !important;
  }
  section#shopify-section-template--22179112026361__sticky-sp,
  .shopify-section.sp-section.sp-sticky {
      display: block !important;
  }
}