/* ============================================================
   Richvell Pets — Daily Support Chews PDP
   Gold / obsidian brand system
   ============================================================ */

:root{
  --ink:#100F0C; --ink-2:#262119; --ink-3:#4A4235; --muted:#7A7263;

  --gold:#C9A227; --gold-lt:#E7CE7A; --gold-dp:#8A6D1F;
  --gold-soft:#F3E7C2; --gold-tint:#FAF3DF;

  --cream:#FBF8F1; --sand:#F5F1E6; --sand-2:#E4DAC2; --paper:#FFFFFF;
  --line:rgba(16,15,12,.12); --line-2:rgba(16,15,12,.07);

  --foil:linear-gradient(118deg,#8A6D1F 0%,#C9A227 22%,#F2E2A8 46%,#C9A227 64%,#9A7B18 88%,#E7CE7A 100%);

  --shadow-sm:0 1px 2px rgba(16,15,12,.06),0 2px 8px rgba(16,15,12,.04);
  --shadow-md:0 2px 6px rgba(16,15,12,.07),0 12px 32px rgba(16,15,12,.07);
  --shadow-lg:0 4px 12px rgba(16,15,12,.08),0 24px 60px rgba(16,15,12,.10);

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --wrap:1280px;
  --grotesk:"Helvetica Now Display","Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--grotesk); color:var(--ink); background:var(--cream);
  font-size:16px; line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.04; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* clears the sticky header when a nav anchor jumps to a section */
section[id]{ scroll-margin-top:86px; }
.center{ text-align:center; }
.center .sec-lead{ margin-left:auto; margin-right:auto; }

.italic-gold{ font-style:italic; background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ── Announcement + header ──────────────────────────────── */
.announce{
  background:var(--ink); color:var(--gold-soft);
  font-size:12.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  text-align:center; padding:11px 16px; border-bottom:1px solid rgba(201,162,39,.28);
}
.announce b{ color:var(--gold-lt); }

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,248,241,.9);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.header-in{ display:flex; align-items:center; gap:34px; height:72px; }

.logo{ display:inline-flex; width:fit-content; align-items:baseline; gap:1px; font-size:24px; font-weight:800; letter-spacing:-.045em; position:relative; padding-top:6px; }
.logo .r{ color:var(--ink); }
.logo .p{ background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.logo .paw{ position:absolute; top:-6px; right:16px; width:15px; height:15px; }
.logo .paw path{ fill:var(--gold); }
.logo.light .r{ color:var(--cream); }

.nav{ display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:600; letter-spacing:-.01em; }
.nav a{ position:relative; padding:6px 0; color:var(--ink-2); transition:color .18s; }
.nav a:hover{ color:var(--gold-dp); }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--gold); transition:right .25s ease; }
.nav a:hover::after{ right:0; }

.header-right{ margin-left:auto; display:flex; align-items:center; gap:18px; font-size:13.5px; font-weight:600; color:var(--ink-3); }
.icon-btn{ background:none; border:0; padding:4px; display:grid; place-items:center; color:var(--ink-2); }
.icon-btn:hover{ color:var(--gold-dp); }
.cart-dot{ position:relative; }
.cart-dot span{
  position:absolute; top:-3px; right:-5px; min-width:16px; height:16px; border-radius:99px;
  background:var(--foil); color:var(--ink); font-size:10px; font-weight:800;
  display:grid; place-items:center; padding:0 4px;
}
/* the class selector outranks the UA's [hidden]{display:none}, so an empty
   cart badge kept painting even with the attribute set */
.cart-dot span[hidden]{ display:none; }

/* ============================================================
   PDP
   ============================================================ */
.pdp{ padding:34px 0 70px; }
.pdp-grid{ display:grid; grid-template-columns:minmax(0,1fr) 470px; gap:52px; align-items:start; }

/* ── Gallery ── */
.gallery{ display:grid; grid-template-columns:74px minmax(0,1fr); gap:16px; position:sticky; top:96px; }
.thumbs{ display:flex; flex-direction:column; gap:10px; }
.thumb{
  width:74px; height:74px; border-radius:50%; overflow:hidden; padding:0;
  border:2px solid transparent; background:var(--sand); transition:border-color .2s, transform .2s;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.is-active{ border-color:var(--gold); }
.thumb:hover{ transform:translateY(-1px); }

.stage-inner{ display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:12px; }
.hero-shot{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--sand); aspect-ratio:1/1; }
.hero-shot img{ width:100%; height:100%; object-fit:cover; }
.hero-shot .chip-jar{
  position:absolute; left:50%; transform:translateX(-50%); bottom:22px;
  background:var(--foil); color:var(--ink); font-size:19px; font-weight:800; font-style:italic;
  letter-spacing:-.03em; padding:9px 26px; border-radius:99px; white-space:nowrap; box-shadow:var(--shadow-md);
}
.gallery-badge{
  position:absolute; top:14px; left:14px; z-index:3;
  background:var(--ink); color:var(--gold-lt);
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 13px; border-radius:99px; border:1px solid rgba(201,162,39,.5);
}
.gallery-badge b{ color:#fff; font-weight:800; }

.trust-stack{ display:grid; grid-template-rows:repeat(3,1fr); gap:12px; }
.trust-tile{
  background:var(--sand); border-radius:var(--r); padding:18px 12px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--line-2);
}
.trust-tile svg{ width:36px; height:36px; }
.trust-tile svg path:not([stroke]){ fill:var(--ink); }
.trust-tile .t1{ font-size:19px; font-weight:800; letter-spacing:-.035em; line-height:1; }
.trust-tile .t2{
  background:var(--foil); color:var(--ink); font-size:18px; font-weight:800; font-style:italic;
  letter-spacing:-.03em; padding:2px 10px; border-radius:4px; line-height:1.15;
}

/* ── Buy column ── */
.stars{ display:flex; align-items:center; gap:4px; margin:14px 0 15px; }
.stars svg{ width:16px; height:16px; }
.stars svg path{ fill:var(--gold); }
.stars .count{ font-size:14px; font-weight:600; color:var(--ink-3); letter-spacing:-.01em; margin-left:6px; }

.pdp-title{ font-size:46px; }
.pdp-sub{ font-size:17px; color:var(--ink-2); line-height:1.45; letter-spacing:-.015em; }
.pdp-sub b{ font-weight:800; }

.gift-flag{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:16px;
  background:var(--gold-tint); border:1px solid rgba(201,162,39,.42); color:var(--ink-2);
  font-size:12.5px; font-weight:600; letter-spacing:-.01em; padding:7px 14px; border-radius:99px;
}
.gift-flag b{ font-weight:800; color:var(--gold-dp); text-transform:uppercase; letter-spacing:.03em; }

.dosage-strip{
  display:flex; align-items:center; gap:14px; margin:20px 0 18px;
  background:var(--gold-tint); border:1px solid rgba(201,162,39,.35);
  border-radius:var(--r); padding:13px 18px;
}
.dosage-strip .chew{ width:38px; height:38px; border-radius:9px; object-fit:cover; background:var(--sand-2); flex:none; }
.dosage-strip .l1{ font-size:15px; font-weight:800; letter-spacing:-.02em; }
.dosage-strip .l2{ font-size:12.5px; color:var(--muted); font-style:italic; }
.dosage-strip .right{ margin-left:auto; text-align:right; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--paper);
  border:1px solid var(--line); border-radius:99px; padding:6px 13px;
  font-size:12.5px; font-weight:650; color:var(--ink-2); letter-spacing:-.01em;
}
.chip svg{ width:12px; height:12px; stroke:var(--gold-dp); }

.satbar{ margin:0 0 24px; }
.satbar .txt{ font-size:13.5px; font-weight:650; color:var(--ink-2); margin-bottom:8px; letter-spacing:-.01em; }
.satbar .txt b{ font-weight:800; color:var(--gold-dp); }
.satbar .track{ height:7px; border-radius:99px; background:var(--sand-2); overflow:hidden; }
.satbar .fill{ display:block; height:100%; width:0; border-radius:99px; background:var(--foil); transition:width 1.4s cubic-bezier(.2,.7,.2,1); }

.buy-label{ font-size:15px; font-weight:800; letter-spacing:-.02em; margin-bottom:12px; }

.bundles{ display:grid; gap:12px; margin-bottom:16px; }
.bundle{
  position:relative; display:grid; grid-template-columns:22px 54px minmax(0,1fr) auto;
  align-items:center; gap:13px; width:100%; text-align:left;
  border:1.5px solid var(--line); border-radius:var(--r); background:var(--paper);
  padding:15px 17px; transition:border-color .2s, box-shadow .2s, background .2s;
}
.bundle:hover{ border-color:rgba(201,162,39,.55); }
.bundle.is-active{ border-color:var(--gold); background:var(--gold-tint); box-shadow:0 0 0 3px rgba(201,162,39,.14); }
.bundle .radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; }
.bundle.is-active .radio{ border-color:var(--gold-dp); }
.bundle .radio i{ width:10px; height:10px; border-radius:50%; background:var(--gold-dp); transform:scale(0); transition:transform .18s; }
.bundle.is-active .radio i{ transform:scale(1); }
/* multiply drops the shot's white ground on the tinted active row */
.bundle .jar{ width:54px; height:54px; object-fit:contain; mix-blend-mode:multiply; }
.bundle span{ display:block; }
.bundle .b-name{ font-size:16px; font-weight:800; letter-spacing:-.025em; }
.bundle .b-supply{ font-size:12.5px; color:var(--muted); font-style:italic; }
.bundle .b-price{ text-align:right; }
.bundle .was{ font-size:13px; color:#B4483C; text-decoration:line-through; }
.bundle .now{ font-size:20px; font-weight:800; letter-spacing:-.03em; }
.bundle .flag{
  position:absolute; top:-9px; right:14px; background:var(--foil); color:var(--ink);
  font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 10px; border-radius:99px; width:auto;
}
.bundle .save{ display:none; }

.sub-toggle{ border:1.5px solid rgba(201,162,39,.45); border-radius:var(--r); background:var(--gold-tint); padding:14px 17px; margin-bottom:16px; }
.sub-row{ display:flex; align-items:center; gap:11px; }
.switch{ width:42px; height:24px; border-radius:99px; background:var(--sand-2); border:0; padding:3px; display:flex; transition:background .22s; flex:none; }
.switch i{ width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .22s; }
.switch.on{ background:var(--gold); }
.switch.on i{ transform:translateX(18px); }
.sub-row .lab{ font-size:14.5px; font-weight:800; letter-spacing:-.02em; }
.sub-meta{ display:flex; gap:20px; margin-top:11px; font-size:12.5px; color:var(--ink-3); font-style:italic; }
.sub-meta span{ display:inline-flex; align-items:center; gap:6px; }
.sub-meta svg{ width:14px; height:14px; stroke:var(--gold-dp); flex:none; }

.atc{
  width:100%; border:0; border-radius:var(--r); background:var(--ink); color:var(--gold-lt);
  font-size:17px; font-weight:800; letter-spacing:.01em; text-transform:uppercase;
  padding:20px 22px; display:flex; align-items:center; justify-content:center; gap:14px;
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
  transition:transform .16s, box-shadow .2s;
}
.atc::before{ content:""; position:absolute; inset:0; background:var(--foil); opacity:0; transition:opacity .25s; }
.atc span{ position:relative; z-index:2; transition:color .25s; }
.atc:hover::before{ opacity:1; }
.atc:hover span{ color:var(--ink); }
.atc:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.atc .was{ font-weight:600; opacity:.6; text-decoration:line-through; font-size:15px; text-transform:none; }

.guarantee{ display:flex; align-items:center; gap:13px; margin-top:14px; background:var(--sand); border-radius:var(--r); padding:13px 17px; }
.guarantee svg{ width:30px; height:30px; flex:none; }
.guarantee svg circle{ fill:var(--gold); }
.guarantee svg path{ stroke:var(--ink); }
.guarantee .g1{ font-size:14px; font-weight:800; letter-spacing:-.02em; }
.guarantee .g2{ font-size:12.5px; color:var(--muted); font-style:italic; }

.vet-quote{ margin-top:24px; padding:20px 22px; border-radius:var(--r); background:var(--ink); color:var(--cream); border-left:4px solid var(--gold); }
.vet-quote p{ font-size:16px; font-style:italic; letter-spacing:-.02em; line-height:1.4; }
.vet-quote .who{ margin-top:10px; font-size:12.5px; font-weight:700; color:var(--gold-lt); letter-spacing:.02em; }

/* ── UGC video row ── */
.ugc-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; }
.ugc-vid{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:9/13; background:var(--sand-2); }
.ugc-vid img{ width:100%; height:100%; object-fit:cover; }
.ugc-vid .cap{
  position:absolute; left:10px; right:10px; bottom:12px;
  background:rgba(255,255,255,.92); color:var(--ink); border-radius:6px;
  font-size:11px; font-weight:700; line-height:1.3; padding:5px 8px; text-align:center;
}

/* ── Accordions ── */
.acc{ margin-top:28px; border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{
  width:100%; background:none; border:0; padding:18px 0; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:15.5px; font-weight:800; letter-spacing:-.02em;
}
.acc-head .pm{ position:relative; width:16px; height:16px; flex:none; }
.acc-head .pm::before,.acc-head .pm::after{
  content:""; position:absolute; left:0; top:7px; width:16px; height:2px; border-radius:2px;
  background:var(--gold-dp); transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.acc-head .pm::after{ transform:rotate(90deg); }
.acc-item.open .pm::after{ transform:rotate(0deg); }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1); }
.acc-item.open .acc-body{ grid-template-rows:1fr; }
.acc-body > div{ overflow:hidden; }
.acc-inner{ padding:0 0 20px; font-size:14.5px; color:var(--ink-3); line-height:1.6; }
.acc-inner b{ color:var(--ink); font-weight:750; }
.acc-inner p + p{ margin-top:11px; }

.ing-table,.dose-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.dose-table{ font-size:14px; margin-top:4px; }
.ing-table th,.dose-table th{
  text-align:left; padding:9px 10px; background:var(--sand);
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
}
.ing-table th:last-child,.ing-table td:last-child,
.dose-table th:last-child,.dose-table td:last-child{ text-align:right; white-space:nowrap; }
.ing-table td,.dose-table td{ padding:9px 10px; border-bottom:1px solid var(--line-2); color:var(--ink-3); }
.ing-table td:last-child,.dose-table td:last-child{ font-weight:750; color:var(--ink); }
.ing-note{ margin-top:12px; font-size:13px; color:var(--muted); line-height:1.55; }

/* ============================================================
   Marquees
   ============================================================ */
.marquee{ position:relative; overflow:hidden; padding:17px 0; background:var(--foil); }
.marquee-track{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.marquee-track span{
  display:inline-flex; align-items:center; gap:11px; padding:0 30px; white-space:nowrap;
  font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
}
.marquee.gold .marquee-track span::before{
  content:""; width:17px; height:17px; border-radius:50%; flex:none;
  background:var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.6 7.3l2.9 2.9L11.4 4' fill='none' stroke='%23E7CE7A' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat;
}
@keyframes slide{ to{ transform:translateX(-33.333%); } }

.marquee.seen{ padding:19px 0; }
.marquee.seen .seen-label{
  position:absolute; left:0; top:0; bottom:0; z-index:3; display:flex; align-items:center;
  padding:0 26px 0 24px; background:var(--foil); color:var(--ink);
  font-size:14px; font-weight:800; letter-spacing:-.02em;
  box-shadow:14px 0 18px -6px rgba(201,162,39,.9);
}
.marquee.seen .marquee-track span::before{ display:none; }
.marquee.seen .marquee-track span{ font-size:23px; font-weight:800; letter-spacing:-.035em; opacity:.72; }
.marquee.seen .marquee-track span.cond{ font-size:19px; letter-spacing:.01em; }
.marquee.seen .marquee-track span.ser{ font-family:var(--serif); font-weight:700; letter-spacing:0; }

/* ============================================================
   Sections
   ============================================================ */
.sec{ padding:92px 0; }
.sec.sand{ background:var(--sand); }
.sec.dark{ background:var(--ink); color:var(--cream); }

.eyebrow{
  display:inline-block; background:var(--foil); color:var(--ink);
  font-size:12px; font-weight:800; font-style:italic; letter-spacing:.05em; text-transform:uppercase;
  padding:6px 18px; border-radius:99px; margin-bottom:18px;
}
.sec-title{ font-size:clamp(31px,4.2vw,53px); }
.sec-title mark{ background:var(--gold-soft); color:inherit; padding:0 .1em; border-radius:3px; }
.sec-lead{ margin-top:16px; font-size:17.5px; color:var(--ink-3); max-width:660px; letter-spacing:-.015em; line-height:1.5; }
.sec.dark .sec-lead{ color:rgba(251,248,241,.72); }

/* ── Benefits ── */
.ben-sec{ position:relative; overflow:hidden; }
/* Soft-masked so the shot's cream backdrop dissolves into the
   section instead of reading as a pasted rectangle. */
.ben-hand{
  position:absolute; right:-40px; top:80px; width:min(440px,36vw); z-index:0;
  mix-blend-mode:multiply; pointer-events:none;
  -webkit-mask-image:radial-gradient(115% 105% at 78% 42%,#000 34%,rgba(0,0,0,.55) 58%,transparent 76%);
          mask-image:radial-gradient(115% 105% at 78% 42%,#000 34%,rgba(0,0,0,.55) 58%,transparent 76%);
}
.ben-head{ position:relative; z-index:2; margin-bottom:56px; }
.ben-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:830px; }
.ben-card{
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:28px 26px 30px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
.ben-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(201,162,39,.5); }
.ben-icon{ display:block; width:44px; height:44px; margin-bottom:20px; }
.ben-icon svg{ width:100%; height:100%; stroke:var(--ink); }
.ben-card h3{ font-size:21px; margin-bottom:9px; }
.ben-card p{ font-size:14.5px; color:var(--ink-3); line-height:1.55; }

/* ── Reviews ── */
.reviews-sec{ overflow:hidden; }
.tp-line{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-size:14px; color:var(--ink-3); }
.tp-stars{ display:flex; gap:2px; }
.tp-stars i{
  width:21px; height:21px; background:var(--gold); border-radius:2px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2l2.5 5.3 5.8.8-4.2 4 1 5.8L10 15.2 4.9 17.9l1-5.8-4.2-4 5.8-.8z' fill='white'/></svg>");
  background-size:15px; background-position:center; background-repeat:no-repeat;
}
.tp-stars i.half{ background-color:var(--sand-2); }

.rev-rail{
  display:flex; gap:20px; margin-top:44px; padding:6px 24px 20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.rev-rail::-webkit-scrollbar{ display:none; }
.rev{
  flex:0 0 min(370px,80vw); scroll-snap-align:center;
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:16px 16px 24px; display:flex; flex-direction:column; gap:13px; text-align:center;
}
.rev img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--sand-2); }
.rev .rs{ color:var(--gold); font-size:17px; letter-spacing:3px; }
.rev p{ font-size:14.5px; color:var(--ink-2); line-height:1.55; flex:1; padding:0 6px; }
.rev .by{ font-size:13.5px; font-weight:800; color:var(--ink); }

.rail-nav{ display:flex; justify-content:center; gap:14px; margin-top:8px; }
.rail-nav button{ background:none; border:0; padding:8px; color:var(--ink); }
.rail-nav svg{ width:44px; height:18px; stroke:currentColor; }
.rail-nav button:hover{ color:var(--gold-dp); }

/* ── Stats ── */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; text-align:left; }
.stat{ background:var(--paper); border-radius:var(--r-lg); padding:20px 20px 26px; box-shadow:var(--shadow-sm); }
.stat img{ width:100%; height:170px; object-fit:cover; border-radius:var(--r-sm); background:var(--sand-2); }
.stat .num{ font-size:clamp(44px,5.4vw,62px); font-weight:800; letter-spacing:-.05em; line-height:1; margin-top:20px; }
.stat .num i{ font-size:.42em; font-style:normal; margin-left:3px; }
.stat .track{ height:5px; border-radius:99px; background:var(--sand-2); margin:14px 0 16px; overflow:hidden; }
.stat .fill{ display:block; height:100%; width:0; border-radius:99px; background:var(--foil); transition:width 1.6s cubic-bezier(.2,.7,.2,1); }
.stat h3{ font-size:21px; }
.stat .fine{ margin-top:9px; font-size:12.5px; color:var(--muted); line-height:1.45; }

/* ── Vet ── */
.vet-sec blockquote{
  margin:26px auto 0; max-width:760px;
  font-size:clamp(19px,2.2vw,26px); font-style:italic; font-weight:600;
  letter-spacing:-.025em; line-height:1.36; color:var(--ink-2);
}
.vet-name{ margin-top:18px; font-size:16px; color:var(--ink-3); }
.vet-portrait{ width:96px; height:96px; border-radius:50%; object-fit:cover; margin:30px auto 0; border:2px solid var(--gold); }
.squiggle{ width:210px; height:22px; margin:34px auto 0; stroke:var(--gold); }

/* ── Ingredients ── */
.ing-claim{ margin-top:20px; font-size:16px; color:var(--ink-2); line-height:1.6; }
.ing-claim b{ font-weight:800; }
.ing-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px; }
.ing-card{
  position:relative; display:flex; align-items:center; overflow:hidden;
  background:var(--paper); border-radius:var(--r-lg); min-height:150px;
  box-shadow:var(--shadow-sm); transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.ing-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.ing-card .body{ padding:26px 150px 26px 28px; }
.ing-card h3{ font-size:23px; margin-bottom:9px; }
.ing-card p{ font-size:14.5px; color:var(--ink-3); line-height:1.5; max-width:290px; }
.ing-card img{
  position:absolute; right:0; top:0; bottom:0; width:150px; height:100%;
  object-fit:cover; object-position:center;
}

/* ── Dosage banner ── */
.dose-banner{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.dose-banner > img{ width:100%; aspect-ratio:16/8; object-fit:cover; background:var(--sand-2); }
.dose-panel{ background:var(--sand); padding:36px 40px 40px; }
.dose-panel h2{ font-size:clamp(28px,3.6vw,44px); }
.dose-panel h2 i{ font-style:italic; }
.dose-panel hr{ border:0; border-top:1px solid var(--line); margin:24px 0; }
.dose-panel .row{ display:flex; align-items:center; gap:16px; }
.dose-panel .row img{ width:40px; height:40px; border-radius:9px; object-fit:cover; flex:none; }
.dose-panel .d1{ font-size:23px; font-weight:800; font-style:italic; letter-spacing:-.03em; }
.dose-panel .d2{ font-size:13.5px; color:var(--muted); font-style:italic; }
.dose-panel .right{ margin-left:auto; text-align:right; }
.dose-panel .right .n{ font-size:32px; font-weight:800; font-style:italic; letter-spacing:-.04em; line-height:1; }
.dose-panel .right .u{ font-size:15px; font-weight:800; font-style:italic; letter-spacing:-.02em; }

/* ── FAQ ── */
.faq{ max-width:880px; margin:46px auto 0; border-top:0; }
.faq .acc-head{ font-size:17px; padding:22px 0; }
.faq .acc-inner{ padding:0 0 22px; }
.faq .acc-inner p{ background:var(--sand); border-radius:10px; padding:15px 18px; color:var(--ink-2); }

/* ── Final CTA ── */
.final{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:center; }
.final img{ width:100%; border-radius:var(--r-xl); }
.final h2{ font-size:clamp(32px,4.2vw,52px); color:var(--cream); }
.final .price-line{ margin:24px 0 28px; display:flex; align-items:baseline; gap:12px; }
.final .price-line .now{ font-size:34px; font-weight:800; letter-spacing:-.04em; color:var(--gold-lt); }
.final .price-line .was{ font-size:19px; text-decoration:line-through; color:rgba(251,248,241,.45); }

.btn-gold{
  display:inline-flex; align-items:center; gap:12px; border:0; border-radius:99px;
  background:var(--foil); color:var(--ink);
  font-size:16px; font-weight:800; letter-spacing:.01em; padding:17px 34px;
  box-shadow:var(--shadow-md); transition:transform .16s, box-shadow .2s;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* ── Sticky bar ── */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(16,15,12,.96); backdrop-filter:blur(14px);
  border-top:1px solid rgba(201,162,39,.35);
  transform:translateY(110%); transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.sticky-bar.show{ transform:translateY(0); }
.sticky-in{ display:flex; align-items:center; gap:18px; padding:13px 24px; }
.sticky-in img{ width:46px; height:46px; object-fit:contain; }
.sticky-in .s1{ font-size:15px; font-weight:800; color:var(--cream); letter-spacing:-.02em; }
.sticky-in .s2{ font-size:12.5px; color:rgba(251,248,241,.55); font-style:italic; }
.sticky-in .sp{ margin-left:auto; display:flex; align-items:baseline; gap:9px; }
.sticky-in .sp .now{ font-size:21px; font-weight:800; color:var(--gold-lt); letter-spacing:-.03em; }
.sticky-in .sp .was{ font-size:14px; text-decoration:line-through; color:rgba(251,248,241,.4); }
.sticky-in .btn-gold{ padding:13px 28px; font-size:14.5px; }

/* ── Footer ── */
.footer{ background:var(--ink); color:rgba(251,248,241,.7); padding:0 0 34px; border-top:3px solid transparent; border-image:var(--foil) 1; }
.footer .wrap{ padding-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:44px; }
.footer h4{ font-size:12px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:16px; }
.footer .tagline{ margin:16px 0 26px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,248,241,.5); }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14px; }
.footer a:hover{ color:var(--gold-lt); }
.footer .tag{ font-size:14px; line-height:1.6; max-width:290px; }
.footer .tag b{ color:var(--cream); font-weight:700; }
.foot-form{ display:flex; gap:8px; margin-top:14px; }
.foot-form input{
  flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(201,162,39,.3);
  border-radius:99px; padding:12px 18px; color:var(--cream); font:inherit; font-size:14px;
}
.foot-form input::placeholder{ color:rgba(251,248,241,.4); }
.foot-form button{ background:var(--foil); color:var(--ink); border:0; border-radius:50%; width:44px; height:44px; display:grid; place-items:center; flex:none; }
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(201,162,39,.4);
  display:grid; place-items:center; color:var(--gold-lt); transition:background .2s, color .2s;
}
.socials a:hover{ background:var(--gold); color:var(--ink); }
.socials svg{ width:16px; height:16px; }
.footer-bottom{ margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); font-size:12.5px; line-height:1.65; color:rgba(251,248,241,.45); }
.footer-bottom .legal{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px; }

/* ============================================================
   Cart drawer — the step between the PDP and Whop checkout
   ============================================================ */
.cart-scrim{
  position:fixed; inset:0; background:rgba(16,15,12,.5); z-index:80;
  opacity:0; visibility:hidden; transition:opacity .26s ease, visibility .26s;
}
.cart-scrim.on{ opacity:1; visibility:visible; }

.cart{
  position:fixed; top:0; right:0; bottom:0; width:min(432px,100vw); z-index:81;
  background:var(--cream); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:-18px 0 60px rgba(16,15,12,.22);
}
.cart.on{ transform:none; }

.cart-h{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:20px 16px; border-bottom:1px solid var(--line); background:var(--paper);
}
.cart-h h3{ font-size:21px; letter-spacing:-.03em; }
.cart-x{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:0; font-size:26px; line-height:1; color:var(--ink-3); padding:4px 8px;
}
.cart-x:hover{ color:var(--gold-dp); }

.cart-body{ flex:1; overflow-y:auto; padding:18px; }
.cart-li{ display:flex; gap:14px; align-items:flex-start; }
.cart-li > img{
  width:82px; height:82px; flex:0 0 82px; border-radius:var(--r-sm);
  object-fit:contain; background:var(--sand); mix-blend-mode:multiply;
}
.cart-li .nm{ font-size:15px; font-weight:800; letter-spacing:-.025em; line-height:1.3; }
.cart-tag{
  display:inline-block; margin-top:8px; background:var(--gold-tint);
  border:1px solid rgba(201,162,39,.42); color:var(--gold-dp);
  border-radius:6px; padding:4px 9px; font-size:12px; font-weight:750;
}
.cart-tag::before{ content:"🏷 "; }
.cart-pr{ margin-left:auto; text-align:right; flex:0 0 auto; }
.cart-pr s{ color:var(--muted); font-size:13.5px; }
.cart-pr b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.03em; margin-top:2px; }
.cart-save{
  margin-top:8px; background:var(--foil); color:var(--ink); border-radius:6px;
  padding:6px 9px; font-size:12px; font-weight:800; line-height:1.25;
}

.cart-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:11px 22px;
  margin:28px 0 8px; padding:0 14px; font-size:13px; font-weight:700; color:var(--ink-2);
}
.cart-trust span{ display:flex; align-items:center; gap:7px; }

.cart-foot{ border-top:1px solid var(--line); padding:16px 18px 20px; background:var(--paper); }
.cart-row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:3px 0; color:var(--ink-3); }
.cart-row.sub{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); padding-bottom:13px; }
.cart-go{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  border:0; border-radius:var(--r); background:var(--ink); color:var(--gold-lt);
  font-size:16.5px; font-weight:800; letter-spacing:.01em; padding:18px 20px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-md);
  transition:transform .16s, box-shadow .2s;
}
.cart-go::before{ content:""; position:absolute; inset:0; background:var(--foil); opacity:0; transition:opacity .25s; }
.cart-go > *{ position:relative; z-index:2; transition:color .25s; }
.cart-go:hover::before{ opacity:1; }
.cart-go:hover > *{ color:var(--ink); }
.cart-go:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); }

.cart-pay{ display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:13px; }
.cart-pay i{
  font-style:normal; font-size:10px; font-weight:800; letter-spacing:.03em; color:var(--ink-3);
  border:1px solid var(--line); background:var(--paper); border-radius:5px; padding:6px 9px;
}

@media (max-width:520px){
  .cart-h h3{ font-size:19px; }
  .cart-li > img{ width:68px; height:68px; flex-basis:68px; }
}

/* ── Reveal ──
   Hidden only once JS has confirmed it can reveal them again
   (html.js-anim). Without JS, or if the observer never fires,
   every section stays visible. */
.js-anim .rv{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js-anim .rv.in{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  .pdp-grid{ grid-template-columns:minmax(0,1fr) 420px; gap:36px; }
  .stage-inner{ grid-template-columns:minmax(0,1fr) 150px; }
  .pdp-title{ font-size:38px; }
}
@media (max-width:1000px){
  .pdp-grid{ grid-template-columns:1fr; gap:40px; }
  .gallery{ position:static; }
  .nav{ display:none; }
  .ben-grid{ max-width:none; }
  .ben-hand{ display:none; }
  .stats{ grid-template-columns:1fr; }
  .final{ grid-template-columns:1fr; gap:34px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .wrap{ padding:0 16px; }
  .sec{ padding:60px 0; }
  .pdp-title{ font-size:31px; }
  .header-right .region{ display:none; }
  .gallery{ grid-template-columns:1fr; }
  .thumbs{ flex-direction:row; overflow-x:auto; order:2; padding-bottom:4px; scrollbar-width:none; }
  .thumbs::-webkit-scrollbar{ display:none; }
  .thumb{ width:58px; height:58px; flex:none; }
  .stage-inner{ grid-template-columns:1fr; }
  .trust-stack{ grid-template-rows:none; grid-template-columns:repeat(3,1fr); }
  .trust-tile{ padding:14px 8px; }
  .trust-tile svg{ width:28px; height:28px; }
  .trust-tile .t1{ font-size:14px; } .trust-tile .t2{ font-size:13px; }
  .hero-shot .chip-jar{ font-size:15px; padding:7px 18px; bottom:14px; }
  .ben-grid,.ing-grid{ grid-template-columns:1fr; }
  .ing-card .body{ padding:22px 128px 22px 22px; }
  .ing-card img{ width:124px; }
  .rev-rail{ padding-inline:16px; }
  .dose-panel{ padding:26px 22px 30px; }
  .dose-panel .row{ flex-wrap:wrap; }
  .dose-panel .right{ margin-left:auto; }
  .footer-grid{ grid-template-columns:1fr; }
  .sticky-in{ padding-inline:16px; }
  .sticky-in img,.sticky-in .s1,.sticky-in .s2{ display:none; }
  .sticky-in .sp{ margin-left:0; }
  .sticky-in .btn-gold{ margin-left:auto; }
  .marquee.seen .seen-label{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}