/* =========================================================================
   pdp.css, fast-lane Product Page (PDP) blocks. The buy-box is the whole game.
   Sibling to lp.css, NOT a re-skin. Buy-box hero, format selector, plan strip,
   dosing table, compressed how-it-works, sticky CTA bar, product-viz placeholder.
   Semantic tokens only, re-tempers with data-temp. Class prefix: pdp-
   ========================================================================= */

/* ===================== A · BUY-BOX HERO ===================== */
.pdp-hero{ position:relative; background:var(--bg-dark); overflow:hidden; border-bottom:1px solid var(--border-on-dark); }
.pdp-hero__inner{ position:relative; z-index:1; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.08fr .92fr; gap:var(--sp-16); align-items:center;
  padding:var(--sp-16) var(--sp-12) var(--sp-20); }
.pdp-hero__halo{ position:absolute; z-index:0; right:-12%; top:42%; transform:translateY(-50%);
  width:56vw; height:56vw; max-width:780px; max-height:780px; border-radius:var(--r-pill); pointer-events:none;
  background:radial-gradient(circle, rgba(var(--glow-rgb),.20) 0%, rgba(var(--glow-rgb),.05) 42%, transparent 70%); }

/* the buy-box itself */
.pdp-buybox{ display:flex; flex-direction:column; align-items:flex-start; max-width:580px; }
.pdp-buybox__eyebrow{ margin-bottom:var(--sp-5); }
.pdp-buybox__name{ font-family:var(--font-heading); font-weight:300;
  font-size:clamp(40px,4.8vw,64px); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight);
  color:var(--fg-on-dark-1); margin:0; text-wrap:balance; }
.pdp-buybox__oneliner{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-18);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-5) 0 0; max-width:46ch; }

/* price, the headline-weight element */
.pdp-buybox__price-row{ display:flex; align-items:baseline; gap:var(--sp-3); margin:var(--sp-9) 0 0; flex-wrap:wrap; }
.pdp-buybox__price-pre{ font-family:var(--font-heading); font-weight:500; font-size:11px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--fg-on-dark-3); align-self:center; }
.pdp-buybox__price{ font-family:var(--font-heading); font-weight:200; font-size:clamp(48px,6vw,72px); line-height:.95;
  color:var(--fg-on-dark-1); letter-spacing:var(--tracking-tight); }
.pdp-buybox__price .unit{ font-size:var(--fs-20); color:var(--fg-on-dark-3); font-weight:400; letter-spacing:0; }
.pdp-buybox__price-cap{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13);
  color:var(--fg-on-dark-3); margin:var(--sp-2) 0 0; }

/* differentiator line, guardrail #2, sits right under the price */
.pdp-buybox__diff{ display:flex; align-items:flex-start; gap:var(--sp-3); margin:var(--sp-5) 0 0;
  font-family:var(--font-edit); font-style:italic; font-weight:400; font-size:var(--fs-18);
  line-height:1.4; color:var(--fg-on-dark-1); max-width:44ch; }
.pdp-buybox__diff svg{ color:var(--accent-hover); flex-shrink:0; margin-top:5px;
  filter:drop-shadow(0 0 6px rgba(var(--glow-rgb),.5)); }

/* format / dose selector, chips, not a wall */
.pdp-selector{ margin:var(--sp-9) 0 0; width:100%; }
.pdp-selector__label{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--fg-on-dark-3); margin-bottom:var(--sp-3); display:block; }
.pdp-selector__chips{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.pdp-selector__chip{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left;
  padding:11px var(--sp-5); border-radius:var(--r-md); background:rgba(255,255,255,.03);
  border:1px solid var(--border-on-dark); cursor:pointer; transition:border-color var(--dur-base), background var(--dur-base), transform var(--dur-fast); }
.pdp-selector__chip:hover{ border-color:rgba(var(--glow-rgb),.4); transform:translateY(-1px); }
.pdp-selector__chip.is-active{ border-color:var(--border-on-dark-strong); background:var(--accent-soft); box-shadow:var(--glow-sm); }
.pdp-selector__chip-label{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-14); color:var(--fg-on-dark-1); letter-spacing:.01em; }
.pdp-selector__chip-price{ font-family:var(--font-mono); font-size:11px; color:var(--fg-on-dark-3); letter-spacing:.02em; }
.pdp-selector__chip.is-active .pdp-selector__chip-price{ color:var(--accent-hover); }

/* the ONE dominant CTA + pre-handoff capture wired into the buy-box */
.pdp-cta{ width:100%; margin-top:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-3); }
.pdp-cta__field{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.pdp-cta__field .nam-router__input{ flex:1; min-width:200px; }
.pdp-cta__btn{ width:100%; justify-content:center; padding:18px 30px; font-size:var(--fs-14); }
.pdp-cta__sub{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-3); text-align:center; max-width:48ch; margin:var(--sp-1) auto 0; }

/* micro-trust row beneath CTA */
.pdp-microtrust{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin-top:var(--sp-7); }
.pdp-microtrust__item{ display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-heading); font-weight:500; font-size:11px; letter-spacing:.04em; color:var(--fg-on-dark-2); }
.pdp-microtrust__item svg{ color:var(--accent-hover); flex-shrink:0; }

/* product visual, studio-render placeholder, dissolves into the void */
.pdp-hero__media{ position:relative; }
.pdp-viz{ position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-on-dark);
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(var(--glow-rgb),.18), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 13px),
    var(--bg-dark-card); }
.pdp-viz::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px rgba(var(--glow-rgb),.16);
  -webkit-mask:radial-gradient(ellipse 92% 92% at 50% 46%, #000 55%, transparent 100%);
          mask:radial-gradient(ellipse 92% 92% at 50% 46%, #000 55%, transparent 100%); }
.pdp-viz__label{ position:absolute; left:0; right:0; bottom:var(--sp-8); text-align:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--fg-on-dark-3); padding:0 var(--sp-6); }
.pdp-viz__label b{ display:block; color:var(--fg-on-dark-2); font-weight:400; margin-bottom:4px; letter-spacing:.04em; }
.pdp-viz__mark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); color:rgba(var(--glow-rgb),.55);
  filter:drop-shadow(0 0 22px rgba(var(--glow-rgb),.45)); }
/* real product photo, renders are shot on a near-black void, so they blend seamlessly */
.pdp-viz--photo{ background:transparent; border-color:transparent; }
.pdp-viz--photo::after{ display:none; }
.pdp-viz--photo img{ display:block; width:100%; height:100%; object-fit:cover; }

@media(max-width:920px){
  .pdp-hero__inner{ grid-template-columns:1fr; gap:var(--sp-10); padding-top:var(--sp-12); }
  .pdp-hero__media{ order:-1; max-width:380px; }
  .pdp-buybox{ max-width:none; }
}

/* ===================== B · PLAN / PRICE STRIP ===================== */
.pdp-plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(188px,1fr)); gap:var(--sp-4); }
.pdp-plan{ position:relative; padding:var(--sp-9) var(--sp-8); border-radius:var(--r-md);
  background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark); display:flex; flex-direction:column; gap:var(--sp-2); }
.pdp-plan.is-featured{ border-color:var(--border-on-dark-strong); background:var(--accent-soft); box-shadow:var(--glow-sm); }
.pdp-plan__flag{ position:absolute; top:-10px; left:var(--sp-8); font-family:var(--font-heading); font-weight:600;
  font-size:9px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:#fff; background:var(--accent);
  padding:4px 10px; border-radius:var(--r-pill); box-shadow:var(--glow-sm); }
.pdp-plan__term{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-hover); }
.pdp-plan__price{ font-family:var(--font-heading); font-weight:200; font-size:var(--fs-40); line-height:1;
  color:var(--fg-on-dark-1); letter-spacing:var(--tracking-tight); margin-top:var(--sp-2); }
.pdp-plan__price .unit{ font-size:var(--fs-14); color:var(--fg-on-dark-3); font-weight:400; }
.pdp-plan__sub{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-1) 0 0; }
.pdp-plans__included{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); justify-content:center; margin-top:var(--sp-9); }
.pdp-plans__inc{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); color:var(--fg-on-dark-2); }
.pdp-plans__inc svg{ color:var(--accent-hover); flex-shrink:0; }
.pdp-plans__note{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-3); text-align:center; max-width:66ch; margin:var(--sp-7) auto 0; }

/* a caveat band, transparent-not-cheapest / compounded-supply note (GLP-1).
   Apple-style elevated card: hairline border, bg-dark-card surface, r-lg radius.
   Full content-width so it lines up flush with the plan grid above. */
.pdp-caveat{ margin:var(--sp-8) 0 0; display:flex; gap:var(--sp-5); align-items:flex-start;
  padding:var(--sp-8) var(--sp-9); border-radius:var(--r-lg); background:var(--bg-dark-card);
  border:1px solid var(--border-on-dark); }
.pdp-caveat svg{ color:var(--status-warning); flex-shrink:0; margin-top:1px; }
.pdp-caveat p{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; max-width:78ch; }

/* ===================== C · DOSING & FORMATS ===================== */
.pdp-dosing{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-10); align-items:start; }
.pdp-dose-table{ border:1px solid var(--border-on-dark); border-radius:var(--r-md); overflow:hidden; background:rgba(255,255,255,.02); }
.pdp-dose-row{ display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:var(--sp-5); padding:var(--sp-6) var(--sp-7); border-bottom:1px solid var(--border-on-dark); }
.pdp-dose-row:last-child{ border-bottom:0; }
.pdp-dose-row--head{ background:rgba(255,255,255,.025); }
.pdp-dose-row--head span{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--fg-on-dark-3); }
.pdp-dose-row__fmt{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-15); color:var(--fg-on-dark-1); }
.pdp-dose-row__dose{ font-family:var(--font-mono); font-size:var(--fs-14); color:var(--accent-hover); }
.pdp-dose-row__best{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:1.5; color:var(--fg-on-dark-2); }
.pdp-guide{ display:flex; flex-direction:column; gap:var(--sp-5); }
.pdp-guide__title{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-16); color:var(--fg-on-dark-1); margin:0 0 var(--sp-1); }
.pdp-guide__item{ display:flex; flex-direction:column; gap:3px; padding-left:var(--sp-5); border-left:2px solid rgba(var(--glow-rgb),.4); }
.pdp-guide__k{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-14); color:var(--fg-on-dark-1); }
.pdp-guide__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
@media(max-width:880px){ .pdp-dosing{ grid-template-columns:1fr; gap:var(--sp-8); }
  .pdp-dose-row{ grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-5); }
  .pdp-dose-row__best{ grid-column:1 / -1; } .pdp-dose-row--head .pdp-dose-row__best{ display:none; } }

/* ===================== D · HOW IT WORKS (compressed) ===================== */
.pdp-how{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.pdp-how__step{ display:flex; gap:var(--sp-4); align-items:flex-start; padding:var(--sp-7);
  border-radius:var(--r-md); background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark); }
.pdp-how__n{ font-family:var(--font-heading); font-weight:200; font-size:var(--fs-32); line-height:1; color:var(--accent-hover);
  letter-spacing:var(--tracking-tight); flex-shrink:0; filter:drop-shadow(0 0 14px rgba(var(--glow-rgb),.35)); }
.pdp-how__t{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-15); line-height:var(--lh-relaxed); color:var(--fg-on-dark-1); margin:2px 0 0; }
@media(max-width:780px){ .pdp-how{ grid-template-columns:1fr; } }

/* ===================== E · TRUST / LEGITIMACY STRIP ===================== */
.pdp-legit{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3) var(--sp-4); }
.pdp-legit__item{ display:inline-flex; align-items:center; gap:var(--sp-3); padding:11px var(--sp-6);
  border-radius:var(--r-pill); background:rgba(255,255,255,.03); border:1px solid var(--border-on-dark);
  font-family:var(--font-heading); font-weight:500; font-size:var(--fs-13); letter-spacing:.02em; color:var(--fg-on-dark-1); }
.pdp-legit__item svg{ color:var(--accent-hover); flex-shrink:0; }

/* ===================== G · ELIGIBILITY + COMPLIANCE FOOTER ===================== */
.pdp-elig{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-5);
  padding:var(--sp-10) var(--sp-12); border:1px solid var(--border-on-dark); border-radius:var(--r-lg); background:var(--bg-dark-card); }
.pdp-elig__line{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-18); color:var(--fg-on-dark-1); letter-spacing:-.01em; }
.pdp-elig__compliance{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-3); margin:0; max-width:74ch; }
.pdp-elig__cross{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:var(--sp-2);
  font-family:var(--font-heading); font-weight:500; font-size:var(--fs-13); color:var(--accent-hover); text-decoration:none; }
.pdp-elig__cross span{ transition:transform var(--dur-base); }
.pdp-elig__cross:hover span{ transform:translateX(4px); }

/* ===================== STICKY CTA (pins on scroll · mobile bottom bar) ===================== */
.pdp-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(var(--void-rgb,1,9,29),.86); backdrop-filter:blur(16px) saturate(1.1);
  border-top:1px solid var(--border-on-dark);
  transform:translateY(110%); transition:transform var(--dur-base) var(--ease-out); }
.pdp-sticky.is-shown{ transform:translateY(0); }
.pdp-sticky__inner{ max-width:1280px; margin:0 auto; padding:var(--sp-4) var(--sp-12);
  display:flex; align-items:center; gap:var(--sp-6); }
.pdp-sticky__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pdp-sticky__name{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-15); color:var(--fg-on-dark-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdp-sticky__price{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); color:var(--fg-on-dark-3); }
.pdp-sticky__price b{ color:var(--accent-hover); font-weight:600; font-family:var(--font-heading); }
.pdp-sticky__btn{ margin-left:auto; white-space:nowrap; padding:14px 28px; }
@media(max-width:680px){
  .pdp-sticky__inner{ padding:var(--sp-3) var(--sp-5); gap:var(--sp-4); }
  .pdp-sticky__meta{ display:none; }
  .pdp-sticky__btn{ width:100%; justify-content:center; }
}