/*
 * product.css — MorinVibes® Product Page v3.0
 *
 * Architecture mirrors aboutus.css exactly:
 * ─ Same design tokens (:root)
 * ─ Same card-stack system (.pd-card, margin-top:-44px, border-radius:var(--card-r))
 * ─ Same leaf scatter (.section-deco)
 * ─ .pr-reveal scroll reveals (mirrors .ab-reveal)
 * ─ All keyframes prefixed pd-
 * ─ Hero: split layout (text left, photo right) — pure CSS animation, no JS
 * ─ Sections: §1 hero → §9 CTA
 *
 * Loads after: global.css → components.css
 */


/* =============================================
   DESIGN TOKENS
============================================= */
:root {
  --teal:       #0094af;
  --teal-v:     #00b4d8;
  --teal-light: #5ec8d8;
  --teal-pale:  #daf0f6;
  --teal-pale2: #ecf8fb;
  --green:      #1a6545;
  --green-mid:  #2a8a58;
  --green-light:#e8f5ee;
  --gold:       #d4af37;
  --ink:        #0c2630;
  --ink-soft:   #244f5a;
  --ink-muted:  #5d8d97;
  --white:      #ffffff;
  --cream:      #f5f1eb;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;

  --sh-soft:  0 4px 20px rgba(0,148,175,.09);
  --sh-card:  0 8px 36px rgba(0,148,175,.14);
  --sh-float: 0 16px 52px rgba(0,148,175,.18);
  --sh-green: 0 8px 32px rgba(26,101,69,.13);

  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-2xl:  56px;
  --r-pill: 999px;
  --card-r: 52px;   /* card-stack corner radius */
}


/* =============================================
   KEYFRAMES
============================================= */

/* Hero photo entrance */
@keyframes pd-photoIn {
  from { opacity:0; transform:translateX(32px) scale(.97); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}
/* Hero text words */
@keyframes pd-wordReveal {
  from { opacity:0; filter:blur(6px); transform:translateY(14px); }
  to   { opacity:1; filter:blur(0);   transform:translateY(0); }
}
/* Hero eyebrow, price, badges */
@keyframes pd-heroFadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Decorative rings float */
@keyframes pd-ringFloat {
  0%,100% { transform:translate(0,0) scale(1); opacity:.5; }
  50%     { transform:translate(5px,-8px) scale(1.03); opacity:.8; }
}
/* Photo badge glow dot */
@keyframes pd-dotPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(26,101,69,0); }
  50%     { box-shadow:0 0 0 6px rgba(26,101,69,.14); }
}
/* Photo subtle float */
@keyframes pd-photoFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}
/* Scroll chevrons cascade */
@keyframes pd-chevFade {
  0%,100% { opacity:.3; transform:translateY(0); }
  50%     { opacity:1;  transform:translateY(5px); }
}
/* Stats bar slide up */
@keyframes pd-statsUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
/* USP / benefit circle entrance */
@keyframes pd-circleIn {
  from { opacity:0; transform:scale(.7); }
  to   { opacity:1; transform:scale(1); }
}
/* FAQ chevron rotate */
@keyframes pd-chevRotate {
  from { transform:rotate(0deg); }
  to   { transform:rotate(180deg); }
}
/* Section reveals */
@keyframes pd-fadeUp    { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} }
@keyframes pd-fadeRight { from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:translateX(0);} }
@keyframes pd-scaleIn   { from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);} }
/* Leaf sway — same animation as aboutus.css for consistent leaf motion */
@keyframes ab-leafSway {
  0%,100% { transform:rotate(var(--lr)) translateX(0); }
  35%     { transform:rotate(calc(var(--lr) + 8deg)) translateX(6px); }
  70%     { transform:rotate(calc(var(--lr) - 6deg)) translateX(-4px); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* =============================================
   GLOBAL HELPERS
============================================= */
.product-main { overflow-x:hidden; }

.container {
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 1.25rem;
}
@media(min-width:768px) { .container { padding:0 2rem; } }

/* Eyebrow label */
.pr-eyebrow {
  display:inline-block;
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:.9rem;
}
.pr-eyebrow--teal   { color:var(--teal); }
.pr-eyebrow--green  { color:var(--green); }
.pr-eyebrow--white  { color:rgba(255,255,255,.55); }

/* Small circle dot before eyebrow */
.pr-section-dot {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--teal);
  margin-right:.65rem;
  vertical-align:middle;
  position:relative; top:-.1em;
  flex-shrink:0;
}
.pr-section-dot--green { background:var(--green); }
.pr-section-dot--white { background:rgba(255,255,255,.6); }

/* Italic colour helpers */
.pr-teal       { color:var(--teal-v); font-style:italic; }
.pr-green      { color:var(--green-mid); font-style:italic; }
.pr-white-em   { color:rgba(255,255,255,.9); font-style:italic; display:block; font-size:1.04em; }

/* Section header — centred */
.pr-section-header {
  text-align:center;
  max-width:620px;
  margin:0 auto 3.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative; z-index:1;
}
.pr-section-header h2 {
  font-family:var(--serif);
  font-size:clamp(1.75rem,3.5vw,2.9rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--ink);
  margin:.3rem 0 0;
}
.pr-section-sub {
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:300;
  color:var(--ink-soft);
  line-height:1.72;
  max-width:520px;
  margin:.9rem auto 0;
}

/* Scroll reveal — same system as .ab-reveal */
.pr-reveal[data-reveal="fade-up"]    { opacity:0; transform:translateY(22px); }
.pr-reveal[data-reveal="fade-right"] { opacity:0; transform:translateX(-18px); }
.pr-reveal[data-reveal="scale-in"]   { opacity:0; transform:scale(.92); }
.pr-reveal.is-visible {
  opacity:1!important; transform:none!important;
  transition:opacity .72s cubic-bezier(.4,0,.2,1), transform .72s cubic-bezier(.4,0,.2,1);
}
.pr-reveal[data-delay="1"].is-visible { transition-delay:.12s; }
.pr-reveal[data-delay="2"].is-visible { transition-delay:.24s; }
.pr-reveal[data-delay="3"].is-visible { transition-delay:.38s; }
.pr-reveal[data-delay="4"].is-visible { transition-delay:.52s; }

/* Card-stack system — mirrors aboutus.css exactly */
.pd-card {
  position:relative;
  overflow:hidden;
  border-radius:var(--card-r) var(--card-r) 0 0;
  margin-top:-44px;
}
#product-ingredients { z-index:2; }
#product-usp         { z-index:3; }
#product-compare     { z-index:4; }
#product-benefits    { z-index:5; }
#product-channels    { z-index:6; }
#product-reviews     { z-index:7; }
#product-faq         { z-index:8; }
#product-cta         { z-index:9; }

.pd-card--light       { background:var(--teal-pale); }
.pd-card--white       { background:var(--white); }
.pd-card--teal-pale   { background:linear-gradient(158deg, #daf0f6 0%, #ecf8fb 60%, #daf0f6 100%); }
.pd-card--green-pale  { background:linear-gradient(158deg, #e8f5ee 0%, #f0faf5 60%, #e8f5ee 100%); }
.pd-card--dark        { background:linear-gradient(148deg, #007a96 0%, #00aecf 40%, #004f5e 100%); }

/* Leaf scatter container — identical to aboutus.css */
.section-deco {
  position:absolute; inset:0;
  pointer-events:none; z-index:0; overflow:hidden;
}
.section-deco img {
  position:absolute;
  pointer-events:none; user-select:none;
  object-fit:contain;
  animation:ab-leafSway var(--ld,9s) ease-in-out infinite;
  animation-delay:var(--ldelay,0s);
  will-change:transform;
}

/* USP circle cards — shared between §3 USP (product uses same .usp__card pattern as about-us) */
.usp__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
  max-width:900px;
  margin:0 auto;
  position:relative; z-index:1;
  list-style:none; padding:0;
}
@media(min-width:560px) { .usp__grid { grid-template-columns:1fr 1fr; } }
@media(min-width:960px) { .usp__grid { grid-template-columns:repeat(3,1fr); } }

.usp__card {
  position:relative;
  padding:1.85rem 1.6rem 1.75rem;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-2xl);
  border:1px solid rgba(0,148,175,.10);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .25s;
}
.usp__card::after {
  content:'';
  position:absolute;
  top:0; left:0;
  height:2.5px; width:0;
  background:linear-gradient(to right, var(--teal), var(--teal-v));
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
@media(hover:hover) {
  .usp__card:hover { transform:translateY(-5px); box-shadow:var(--sh-card); border-color:rgba(0,148,175,.2); }
  .usp__card:hover::after { width:100%; }
}
.usp__circle {
  width:46px; height:46px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(0,148,175,.10), rgba(0,180,216,.06));
  border:1.5px solid rgba(0,148,175,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.75rem;
  animation:pd-circleIn .5s ease-out both;
}
.usp__circle span {
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--teal);
  line-height:1;
}
.usp__title {
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:.55rem;
  line-height:1.3;
}
.usp__body {
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:300;
  line-height:1.8;
  color:var(--ink-soft);
}


/* =============================================
   §1  HERO — Split layout · Photo right · Text left
   Pure CSS animation — no JS hero functions needed.
   hero-capsule.jpg: portrait 5:6 aspect.
============================================= */
#product-hero {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:calc(var(--nav-h,72px) + 1.5rem) 0 4rem;
  background:linear-gradient(140deg, #f5fcfd 0%, #dff5f9 45%, #f0faf3 100%);
}

/* Mesh gradient blobs */
.pr-hero__mesh {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(80px);
}
.pr-hero__mesh--1 {
  width:540px; height:540px;
  background:radial-gradient(circle, rgba(0,151,178,.12) 0%, transparent 70%);
  top:-80px; right:4%;
}
.pr-hero__mesh--2 {
  width:360px; height:360px;
  background:radial-gradient(circle, rgba(26,101,69,.08) 0%, transparent 70%);
  bottom:60px; left:8%;
}

/* CSS circle rings — text side, desktop only */
.pr-hero__rings {
  position:absolute;
  top:50%; left:6%;
  transform:translateY(-50%);
  pointer-events:none; z-index:0;
}
.pr-hero__ring {
  position:absolute;
  border-radius:50%;
  display:block;
  top:50%; left:50%;
}
.pr-hero__ring--1 {
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  border:1px solid rgba(0,148,175,.09);
  animation:pd-ringFloat 8s ease-in-out infinite;
}
.pr-hero__ring--2 {
  width:340px; height:340px;
  margin:-170px 0 0 -170px;
  border:1px solid rgba(26,101,69,.07);
  animation:pd-ringFloat 10s ease-in-out 1s infinite;
}
.pr-hero__ring--3 {
  width:170px; height:170px;
  margin:-85px 0 0 -85px;
  border:1px solid rgba(0,148,175,.11);
  animation:pd-ringFloat 7s ease-in-out 2s infinite;
}
@media(max-width:1023px) { .pr-hero__rings { display:none; } }

/* Container-aligned wrapper */
.pr-hero__wrap {
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 1.25rem;
  position:relative; z-index:2;
}
@media(min-width:768px) { .pr-hero__wrap { padding:0 2rem; } }

/* Split grid */
.pr-hero__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}
@media(min-width:900px) {
  .pr-hero__grid {
    grid-template-columns:1fr 420px;
    gap:4rem;
  }
}
@media(min-width:1100px) {
  .pr-hero__grid { grid-template-columns:1fr 480px; }
}

/* ── Text side ── */
.pr-hero__text { z-index:2; }

.pr-hero__eyebrow-wrap {
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.2rem;
  opacity:0;
  animation:pd-heroFadeUp .6s ease-out .3s both;
}
.pr-hero__dot {
  width:8px; height:8px;
  border-radius:50%;
  background:var(--teal);
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(0,148,175,.18);
}

.pr-hero__h1 {
  font-family:var(--serif);
  font-size:clamp(2.4rem, 6.2vw, 4.8rem);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.028em;
  color:var(--ink);
  margin:0 0 1.4rem;
}
.pr-hero__word {
  display:block;
  opacity:0;
  animation:pd-wordReveal .85s cubic-bezier(.25,.46,.45,.94) both;
}
.pr-hero__word[data-word="0"] { animation-delay:.55s; }
.pr-hero__word[data-word="1"] { animation-delay:.75s; }
.pr-hero__word--em { color:var(--teal); }
.pr-hero__em { font-style:italic; color:var(--teal); }

.pr-hero__lead {
  font-family:var(--sans);
  font-size:clamp(.88rem, 1.7vw, 1.02rem);
  font-weight:300;
  color:var(--ink-soft);
  line-height:1.78;
  margin:0 0 1.75rem;
  max-width:480px;
  opacity:0;
  animation:pd-heroFadeUp .65s ease-out 1.05s both;
}

/* Price */
.pr-hero__price-wrap {
  display:flex;
  align-items:baseline;
  gap:.9rem;
  flex-wrap:wrap;
  margin-bottom:1.75rem;
  opacity:0;
  animation:pd-heroFadeUp .6s ease-out 1.2s both;
}
.pr-hero__price {
  font-family:var(--serif);
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  font-weight:300;
  color:var(--teal);
  line-height:1;
  letter-spacing:-.02em;
}
.pr-hero__price-sub {
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:400;
  color:var(--ink-muted);
  line-height:1.5;
}

/* CTA group */
.pr-hero__cta-group {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  margin-bottom:1.5rem;
  opacity:0;
  animation:pd-heroFadeUp .6s ease-out 1.38s both;
}

/* Trust badges — circular pills like about-us */
.pr-hero__badges {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  opacity:0;
  animation:pd-heroFadeUp .6s ease-out 1.55s both;
}
.pr-hero__badge {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .85rem;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(0,148,175,.20);
  border-radius:var(--r-pill);
  font-family:var(--sans);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--teal);
  box-shadow:0 2px 8px rgba(0,148,175,.07);
}
.pr-hero__badge-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px; height:16px;
  border-radius:50%;
  background:rgba(0,148,175,.10);
  flex-shrink:0;
}
.pr-hero__badge--green {
  border-color:rgba(26,101,69,.20);
  color:var(--green);
}
.pr-hero__badge--green .pr-hero__badge-icon {
  background:rgba(26,101,69,.10);
  color:var(--green);
}

/* ── Photo side ── */
.pr-hero__photo-wrap {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2;
  /* On mobile, photo comes first */
  order:-1;
  opacity:0;
  animation:pd-photoIn .9s cubic-bezier(.25,.46,.45,.94) .7s both;
}
@media(min-width:900px) {
  .pr-hero__photo-wrap { order:0; }
}

/* Soft glow ring behind photo */
.pr-hero__photo-ring {
  position:absolute;
  inset:-28px;
  border-radius:50px;
  background:radial-gradient(ellipse at 50% 55%,
    rgba(0,148,175,.13) 0%,
    rgba(26,101,69,.07) 50%,
    transparent 72%);
  pointer-events:none; z-index:0;
  filter:blur(28px);
}

.pr-hero__photo {
  position:relative; z-index:1;
  width:100%;
  max-width:420px;
  height:auto;
  aspect-ratio:5/6;
  object-fit:cover;
  object-position:center 30%;
  border-radius:40px 40px 56px 56px;
  box-shadow:
    0 2px 8px  rgba(0,148,175,.08),
    0 12px 40px rgba(0,148,175,.14),
    0 32px 80px rgba(26,101,69,.10);
  display:block;
  animation:pd-photoFloat 7s ease-in-out 2s infinite;
}
@media(prefers-reduced-motion:reduce) { .pr-hero__photo { animation:none; } }

/* Floating badge bottom-left of photo */
.pr-hero__photo-badge {
  position:absolute;
  bottom:18px; left:-14px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:7px;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(0,148,175,.18);
  border-radius:var(--r-pill);
  padding:6px 13px 6px 9px;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  color:var(--teal);
  box-shadow:0 4px 16px rgba(0,148,175,.14);
  white-space:nowrap;
}
.pr-hero__photo-badge-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
  animation:pd-dotPulse 2.5s ease-in-out infinite;
}
@media(max-width:899px) {
  .pr-hero__photo-badge { left:50%; transform:translateX(-50%); bottom:-12px; }
}

/* Scroll indicator */
.pr-hero__scroll {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  opacity:0;
  animation:pd-heroFadeUp .55s ease-out 1.8s both;
  z-index:10;
  pointer-events:none;
}
.pr-hero__scroll-label {
  font-family:var(--sans);
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--teal);
  opacity:.85;
}
.pr-hero__scroll-chevrons { display:flex; flex-direction:column; align-items:center; }
.pr-hero__scroll-chev {
  width:22px; height:14px;
  color:var(--teal); display:block;
  animation:pd-chevFade 1.5s ease-in-out infinite;
}
.pr-hero__scroll-chev--1 { animation-delay:0s; }
.pr-hero__scroll-chev--2 { animation-delay:.2s; }
.pr-hero__scroll-chev--3 { animation-delay:.4s; }

@media(max-width:420px) {
  .pr-hero__h1 { font-size:2.2rem; }
  .pr-hero__scroll { bottom:1.25rem; }
  .pr-hero__photo { max-width:100%; border-radius:28px 28px 40px 40px; }
}


/* =============================================
   §2  INGREDIENTS — Label table · Stats bar top
============================================= */
#product-ingredients {
  padding:0 0 5.5rem;
  position:relative;
}
#product-ingredients::before {
  content:'';
  position:absolute;
  width:480px; height:480px;
  border-radius:50%;
  border:1px solid rgba(0,148,175,.07);
  top:-120px; right:-100px;
  pointer-events:none; z-index:0;
}

/* Stats strip — inside card, same as origin__stats-bar in about-us */
.pr-stats-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,148,175,.12);
  padding:1.25rem;
  margin-bottom:4rem;
  border-radius:0;
}
.pr-stats-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:.4rem 1.25rem;
  gap:.2rem;
  flex:1;
  min-width:72px;
}
.pr-stat-num {
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.8vw,2.1rem);
  font-weight:400;
  color:var(--teal);
  line-height:1;
  letter-spacing:-.03em;
  display:block;
}
.pr-stats-item > span {
  font-family:var(--sans);
  font-size:.5rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
  text-align:center;
  max-width:72px;
  line-height:1.35;
}
.pr-stats-sep {
  width:1px; height:2.4rem;
  background:rgba(0,148,175,.16);
  flex-shrink:0; align-self:center;
}
@media(max-width:520px) {
  .pr-stats-item { padding:.5rem .6rem; flex:0 0 50%; min-width:50%; }
  .pr-stats-sep  { display:none; }
  .pr-stat-num   { font-size:1.4rem; }
}

/* Ingredients grid */
.ingr__grid {
  display:flex;
  flex-direction:column;
  gap:2.5rem;
  position:relative; z-index:1;
}
@media(min-width:768px) {
  .ingr__grid { flex-direction:row; align-items:center; gap:4rem; }
}

/* Circle photo — mirrors origin__photo in about-us */
.ingr__photo { position:relative; margin:0; align-self:center; flex-shrink:0; }
.ingr__photo-circle {
  width:clamp(240px,35vw,380px);
  height:clamp(240px,35vw,380px);
  border-radius:50%;
  overflow:hidden;
  box-shadow:var(--sh-float);
  position:relative; z-index:1;
}
.ingr__photo-circle img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
@media(hover:hover) { .ingr__photo:hover .ingr__photo-circle img { transform:scale(1.06); } }

.ingr__photo-ring {
  position:absolute; inset:-12px;
  border-radius:50%;
  border:2px dashed rgba(0,148,175,.20);
  pointer-events:none;
  animation:pd-ringFloat 8s ease-in-out infinite;
}
.ingr__photo-badge {
  position:absolute;
  bottom:10%; right:-5%;
  display:flex;
  align-items:center;
  gap:.4rem;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-pill);
  padding:.38rem .9rem;
  font-family:var(--sans);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--teal);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  z-index:2;
}

/* Ingredients copy */
.ingr__copy {
  display:flex;
  flex-direction:column;
  gap:.7rem;
  flex:1;
  position:relative; z-index:1;
}
.ingr__copy h2 {
  font-family:var(--serif);
  font-size:clamp(1.75rem,3.5vw,2.85rem);
  font-weight:300;
  line-height:1.13;
  letter-spacing:-.022em;
  color:var(--ink);
  margin:.1rem 0 .3rem;
}
.ingr__copy p {
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:300;
  line-height:1.82;
  color:var(--ink-soft);
}

/* Facts table */
.pr-facts-table {
  width:100%;
  border-collapse:collapse;
  font-family:var(--sans);
  font-size:.82rem;
  margin:.2rem 0 .5rem;
}
.pr-facts-table tr {
  border-bottom:1px solid rgba(0,148,175,.10);
}
.pr-facts-table tr:last-child { border-bottom:none; }
.pr-facts-table tr:hover { background:rgba(0,148,175,.03); }
.pr-facts-table th {
  text-align:left;
  color:var(--ink-muted);
  font-weight:500;
  padding:9px .75rem 9px 0;
  width:38%;
  vertical-align:top;
  white-space:nowrap;
}
.pr-facts-table td {
  color:var(--ink);
  font-weight:400;
  padding:9px 0;
  vertical-align:top;
  line-height:1.5;
}

/* Trust pills */
.ingr__trust {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.5rem;
}
.ingr__trust-pill {
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  padding:.28rem .78rem;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(0,148,175,.14);
  border-radius:var(--r-pill);
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.ingr__trust-dot {
  display:block;
  width:6px; height:6px;
  border-radius:50%; flex-shrink:0;
}
.ingr__trust-dot--teal  { background:var(--teal); }
.ingr__trust-dot--green { background:var(--green); }

@media(min-width:768px) { #product-ingredients { padding-bottom:7rem; } }


/* =============================================
   §3  USP — Not all moringa is this green
============================================= */
#product-usp {
  padding:5.5rem 0 6.5rem;
  position:relative;
}
#product-usp::before {
  content:'';
  position:absolute;
  width:550px; height:550px;
  border-radius:50%;
  border:1px solid rgba(26,101,69,.05);
  top:-80px; right:-140px;
  pointer-events:none; z-index:0;
}
@media(min-width:768px) { #product-usp { padding:7rem 0 8rem; } }


/* =============================================
   §4  COMPARE — Questions worth asking · Table
============================================= */
#product-compare {
  padding:5.5rem 0 6.5rem;
  position:relative;
}
#product-compare::before {
  content:'';
  position:absolute;
  width:440px; height:440px;
  border-radius:50%;
  border:1px solid rgba(0,148,175,.08);
  bottom:-100px; left:-100px;
  pointer-events:none; z-index:0;
}

.pr-compare-wrap {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-md);
  box-shadow:var(--sh-card);
  position:relative; z-index:1;
}
.pr-compare-table {
  width:100%;
  min-width:580px;
  border-collapse:collapse;
  font-family:var(--sans);
  font-size:.84rem;
  background:var(--white);
}
.pr-compare-table thead tr { background:var(--teal); }
.pr-compare-table thead th {
  color:var(--white);
  font-weight:600;
  padding:.85rem 1rem;
  text-align:left;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pr-compare-table thead th span {
  display:block;
  font-weight:400;
  font-size:.68rem;
  opacity:.8;
  text-transform:none;
  letter-spacing:0;
  margin-top:2px;
}
.pr-compare-table tbody tr {
  border-bottom:1px solid rgba(0,148,175,.09);
  transition:background .2s;
}
.pr-compare-table tbody tr:last-child { border-bottom:none; }
.pr-compare-table tbody tr:hover { background:rgba(0,148,175,.03); }
.pr-compare-table tbody td {
  padding:11px 1rem;
  line-height:1.45;
  vertical-align:top;
  color:var(--ink-soft);
}
.pr-compare-table tbody td:first-child {
  color:var(--ink);
  font-weight:500;
  width:24%;
}
.pr-compare__attr { width:24%; }
.pr-compare__us   { width:40%; }
.pr-compare__them { width:36%; }
.pr-yes  { color:var(--green)!important; font-weight:500!important; }
.pr-no   { color:#b05252!important; }
.pr-warn { color:#9a7a2a!important; }

.pr-compare-note {
  font-family:var(--serif);
  font-size:1.05rem;
  font-style:italic;
  color:var(--ink-soft);
  text-align:center;
  margin-top:2.5rem;
  line-height:1.65;
  font-weight:300;
  position:relative; z-index:1;
}

@media(min-width:768px) { #product-compare { padding:7rem 0 8rem; } }


/* =============================================
   §5  BENEFITS — 6 cards · D2 disclaimer
============================================= */
#product-benefits {
  padding:5.5rem 0 0;
  position:relative;
}
#product-benefits::before {
  content:'';
  position:absolute;
  width:400px; height:400px;
  border-radius:50%;
  border:1px solid rgba(26,101,69,.07);
  top:-100px; right:-80px;
  pointer-events:none; z-index:0;
}

.ben__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  max-width:900px;
  margin:0 auto 3.5rem;
  position:relative; z-index:1;
}
@media(min-width:560px) { .ben__grid { grid-template-columns:1fr 1fr; } }
@media(min-width:900px) { .ben__grid { grid-template-columns:repeat(3,1fr); } }

.ben__card {
  background:var(--white);
  border-radius:var(--r-2xl);
  padding:1.75rem 1.5rem 1.65rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  border-left:3px solid var(--green);
  box-shadow:var(--sh-green);
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
  position:relative; overflow:hidden;
}
.ben__card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2.5px;
  background:linear-gradient(to right, var(--green), var(--green-mid));
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  opacity:0;
  transition:opacity .25s;
}
@media(hover:hover) {
  .ben__card:hover { transform:translateY(-5px); box-shadow:0 16px 48px rgba(26,101,69,.18); }
  .ben__card:hover::before { opacity:1; }
}

/* CIRCLE icon */
.ben__circle {
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(26,101,69,.08);
  border:1.5px solid rgba(26,101,69,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  flex-shrink:0;
  animation:pd-circleIn .5s ease-out both;
}
.ben__circle svg { width:22px; height:22px; }
.ben__card h3 {
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
}
.ben__card p {
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:300;
  line-height:1.8;
  color:var(--ink-soft);
}

/* D2 + D3 disclaimers */
.pr-disclaimer-wrap {
  padding-top:1.5rem;
  padding-bottom:2.5rem;
  position:relative; z-index:1;
}
.pr-disclaimer {
  font-family:var(--sans);
  font-size:.72rem;
  color:var(--ink-muted);
  line-height:1.6;
  max-width:780px;
  padding:.75rem 1rem;
  border-left:2px solid rgba(0,148,175,.20);
  background:var(--teal-pale2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.pr-disclaimer--d3 {
  background:#f2faf4;
  border-left-color:rgba(26,101,69,.22);
}

@media(min-width:768px) { #product-benefits { padding-top:7rem; } }


/* =============================================
   §6  CHANNELS — Where to buy · Dark background
============================================= */
#product-channels {
  padding:6rem 0 7rem;
  position:relative;
  overflow:hidden;
  text-align:center;
}
#product-channels .pr-section-header h2,
#product-channels .pr-section-header .pr-eyebrow { color:var(--white); }
#product-channels .pr-section-header h2 { color:var(--white); }

/* CTA decorative rings — same as about-cta */
.pr-cta__ring {
  position:absolute;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.pr-cta__ring--1 { width:500px; height:500px; top:-180px; left:-120px; }
.pr-cta__ring--2 { width:360px; height:360px; bottom:-100px; right:-80px; }

.ch__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  max-width:900px;
  margin:0 auto;
  position:relative; z-index:1;
  align-items:start;
}
@media(min-width:640px) { .ch__grid { grid-template-columns:1fr 1fr; } }
@media(min-width:900px) { .ch__grid { grid-template-columns:repeat(3,1fr); } }

/* Base channel card */
.ch__card {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-2xl);
  padding:2rem 1.75rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:border-color .3s;
  text-align:left;
}
@media(hover:hover) { .ch__card:hover { border-color:rgba(255,255,255,.28); } }

/* Featured / Direct card */
.ch__card--featured {
  background:var(--white);
  border:2px solid rgba(0,180,216,.7);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  position:relative;
}
.ch__card--featured::before {
  content:'Best Value';
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  background:var(--teal);
  color:var(--white);
  font:700 10px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 18px;
  border-radius:var(--r-pill);
  white-space:nowrap;
  box-shadow:var(--sh-soft);
}

.ch__label {
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0;
}
.ch__label--muted { color:rgba(255,255,255,.4); }
.ch__card--featured .ch__label { color:var(--teal); }

.ch__title {
  font-family:var(--sans);
  font-size:1.1rem;
  font-weight:600;
  color:var(--white);
  margin:0;
  letter-spacing:-.02em;
}
.ch__card--featured .ch__title { color:var(--ink); }

.ch__price {
  font-family:var(--serif);
  font-size:2.2rem;
  font-weight:300;
  color:var(--teal);
  margin:0;
  line-height:1;
}

.ch__sub {
  font-family:var(--sans);
  font-size:.78rem;
  color:rgba(255,255,255,.55);
  margin:0;
}
.ch__card--featured .ch__sub { color:var(--ink-muted); }

.ch__list {
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  flex:1;
}
.ch__list li {
  font-family:var(--sans);
  font-size:.8rem;
  color:rgba(255,255,255,.65);
  padding-left:1.1rem;
  position:relative;
  line-height:1.5;
}
.ch__list li::before {
  content:'✓';
  position:absolute; left:0;
  color:var(--teal-v);
  font-weight:700;
  font-size:.72rem;
}
.ch__card--featured .ch__list li { color:var(--ink-soft); }
.ch__card--featured .ch__list li::before { color:var(--green); }

.ch__note {
  font-family:var(--sans);
  font-size:.86rem;
  color:rgba(255,255,255,.55);
  text-align:center;
  max-width:620px;
  margin:3rem auto 0;
  line-height:1.7;
  position:relative; z-index:1;
}

@media(min-width:768px) { #product-channels { padding:8rem 0 9rem; } }


/* =============================================
   §7  REVIEWS — Swiper · D3 disclaimer
============================================= */
#product-reviews {
  padding:5.5rem 0 0;
  position:relative;
}
#product-reviews::before {
  content:'';
  position:absolute;
  width:400px; height:400px;
  border-radius:50%;
  border:1px solid rgba(26,101,69,.08);
  top:-100px; right:-80px;
  pointer-events:none; z-index:0;
}

.reviews-swiper {
  margin-top:2.5rem;
  padding-bottom:2.5rem!important;
  position:relative; z-index:1;
}
.pr-review-card {
  background:var(--white);
  border:1px solid rgba(26,101,69,.13);
  border-radius:var(--r-2xl);
  padding:1.75rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  height:auto;
  box-shadow:var(--sh-green);
}
.pr-review-card__stars {
  color:#f4b942;
  font-size:.95rem;
  letter-spacing:1px;
}
.pr-review-card__body {
  font-family:var(--serif);
  font-size:1rem;
  font-weight:300;
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.65;
  margin:0;
  flex:1;
}
.pr-review-card__footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:.6rem;
  border-top:1px solid rgba(26,101,69,.10);
}
.pr-review-card__name {
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:600;
  color:var(--ink);
}
.pr-review-card__source {
  font-family:var(--sans);
  font-size:.68rem;
  color:var(--ink-muted);
  background:rgba(26,101,69,.07);
  padding:3px 9px;
  border-radius:var(--r-pill);
}
.reviews-swiper .swiper-pagination-bullet { background:var(--green); opacity:.3; }
.reviews-swiper .swiper-pagination-bullet-active { opacity:1; }

.pr-reviews-note {
  font-family:var(--sans);
  font-size:.86rem;
  color:var(--ink-soft);
  text-align:center;
  margin-top:1.5rem;
  line-height:1.65;
  position:relative; z-index:1;
}
.pr-reviews-note a { margin-top:.75rem; display:inline-block; }

@media(min-width:768px) { #product-reviews { padding-top:7rem; } }


/* =============================================
   §8  FAQ — Accordion · 7 questions
============================================= */
#product-faq {
  padding:5.5rem 0 6.5rem;
  position:relative;
}
#product-faq::before {
  content:'';
  position:absolute;
  width:380px; height:380px;
  border-radius:50%;
  border:1px solid rgba(0,148,175,.07);
  bottom:-80px; right:-60px;
  pointer-events:none; z-index:0;
}

.pr-faq__list {
  max-width:760px;
  margin:0 auto;
  border-top:1px solid rgba(0,148,175,.12);
  position:relative; z-index:1;
}
.pr-faq__item { border-bottom:1px solid rgba(0,148,175,.12); }

.pr-faq__trigger {
  width:100%;
  background:none;
  border:none;
  padding:1.2rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  cursor:pointer;
  text-align:left;
  font-family:var(--sans);
  font-size:.93rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.45;
  transition:color .2s;
}
.pr-faq__trigger:hover,
.pr-faq__trigger[aria-expanded="true"] { color:var(--teal); }

.pr-faq__chevron {
  width:18px; height:18px;
  flex-shrink:0;
  color:var(--teal);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.pr-faq__trigger[aria-expanded="true"] .pr-faq__chevron { transform:rotate(180deg); }

.pr-faq__answer {
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .32s cubic-bezier(.4,0,.2,1);
}
.pr-faq__answer.is-open { max-height:420px; opacity:1; }
.pr-faq__answer p {
  font-family:var(--sans);
  font-size:.87rem;
  font-weight:300;
  color:var(--ink-soft);
  line-height:1.78;
  padding:.1rem 0 1.25rem;
  margin:0;
}

@media(min-width:768px) { #product-faq { padding:7rem 0 8rem; } }


/* =============================================
   §9  CTA — Final strip · Deep teal gradient
============================================= */
#product-cta {
  position:relative;
  overflow:hidden;
  background:linear-gradient(148deg, #007a96 0%, #00aecf 40%, #00c4af 100%);
  padding:6.5rem 0 7.5rem;
  text-align:center;
  border-radius:var(--card-r) var(--card-r) 0 0;
  margin-top:-44px;
  z-index:9;
}

.pr-cta__vmark {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  opacity:.045;
  pointer-events:none; z-index:0;
}
.pr-cta__vmark img { filter:brightness(0) invert(1); }

.pr-cta__content {
  position:relative; z-index:1;
  max-width:580px;
  margin:0 auto;
  padding:0 1rem;
}
.pr-cta__content h2 {
  font-family:var(--serif);
  font-size:clamp(2rem,4.5vw,3.4rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.025em;
  color:#fff;
  margin:.5rem 0 .75rem;
}
.pr-cta__em {
  display:block;
  font-style:italic;
  color:rgba(255,255,255,.9);
  font-size:1.06em;
  -webkit-text-fill-color:rgba(255,255,255,.9);
}
.pr-cta__sub {
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:300;
  color:rgba(255,255,255,.72);
  margin-bottom:2rem;
}
.pr-cta__btn { margin-bottom:1.75rem; }
#product-cta .btn--white {
  background:#fff;
  color:var(--teal);
  border:none;
  font-weight:600;
  transition:background .2s, transform .18s, box-shadow .2s;
}
#product-cta .btn--white:hover {
  background:rgba(255,255,255,.94);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,40,60,.2);
}
.pr-cta__trust {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.4rem;
}
.pr-cta__trust span {
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

@media(min-width:768px) { #product-cta { padding:8.5rem 0 9.5rem; } }


/* =============================================
   RESPONSIVE OVERRIDES
============================================= */
@media(max-width:767px) {
  .pd-card { border-radius:36px 36px 0 0; margin-top:-28px; }
  #product-cta { border-radius:36px 36px 0 0; margin-top:-28px; }

  .pr-compare-wrap { margin:0 -1.25rem; border-radius:0; }

  .ch__grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  .ch__card--featured { transform:none; }
  .ch__card--featured::before { font-size:9px; }

  /* Shrink circle photo on mobile — never hide */
  .ingr__photo-circle { width:220px; height:220px; }
}

@media(max-width:900px) {
  /* Mobile: photo above text in hero */
  .pr-hero__grid { grid-template-columns:1fr; }
  .pr-hero__photo-wrap { order:-1; }
  .pr-hero__photo { max-width:300px; }
  .pr-hero__lead { max-width:100%; }
  .pr-hero__cta-group { justify-content:center; }
  .pr-hero__badges { justify-content:center; }
  .pr-hero__price-wrap { justify-content:center; }
  .pr-hero__text { text-align:center; }
  .pr-hero__eyebrow-wrap { justify-content:center; }
}