/* ============================================================
   SAINT EIR — Home page styles (hero variants + sections)
   ============================================================ */

/* ---------- Hero shell ---------- */
.hero{ position:relative; overflow:hidden; }
.hero-variant{ display:none; }
.hero-variant.show{ display:block; }

/* shared animated bottle stage */
.stage{ position:relative; display:inline-block; }
.stage .bottle{
  position:relative; z-index:2;
  filter:drop-shadow(0 30px 40px rgba(45,63,49,.28));
  animation:bob 7s var(--ease) infinite;
  will-change:transform;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-.4deg);} 50%{ transform:translateY(-14px) rotate(.4deg);} }

/* dropper drips */
.drips{ position:absolute; left:50%; top:var(--tip,8%); transform:translateX(-50%); z-index:3; pointer-events:none; }
.drip{
  position:absolute; left:50%; top:0;
  width:11px; height:15px; margin-left:-5.5px;
  background:radial-gradient(ellipse at 50% 35%, #E8C079 0%, #C9A05A 55%, #B0863F 100%);
  border-radius:50% 50% 50% 50% / 64% 64% 36% 36%;
  opacity:0; filter:saturate(1.05);
  animation:drip 4.4s var(--ease) infinite;
}
.drip::after{ content:""; position:absolute; inset:2px 3px auto 3px; height:5px; border-radius:50%; background:rgba(255,255,255,.45); }
.drip.d2{ animation-delay:1.5s; }
.drip.d3{ animation-delay:3s; }
@keyframes drip{
  0%{ transform:translateY(0) scale(.35); opacity:0; }
  8%{ transform:translateY(2px) scale(1); opacity:1; }
  14%{ transform:translateY(6px) scaleY(1.25) scaleX(.85); opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translateY(var(--fall,210px)) scaleY(1.1) scaleX(.9); opacity:0; }
}
/* landing pool ripple */
.pool{ position:absolute; left:50%; bottom:var(--pool-b,-6px); transform:translateX(-50%); width:var(--pool-w,150px); height:30px; z-index:1; pointer-events:none; }
.ripple{ position:absolute; left:50%; top:50%; width:46px; height:14px; margin:-7px 0 0 -23px; border-radius:50%; border:1.5px solid rgba(192,144,79,.5); opacity:0; animation:ripple 4.4s var(--ease) infinite; }
.ripple.r2{ animation-delay:1.5s; } .ripple.r3{ animation-delay:3s; }
@keyframes ripple{
  0%,58%{ transform:scale(.2); opacity:0; }
  66%{ opacity:.55; }
  100%{ transform:scale(1.7); opacity:0; }
}

/* soft circle backdrop */
.halo{ position:absolute; border-radius:50%; z-index:0; }

/* ============================================================
   VARIANT A — Apotheke / clean split
   ============================================================ */
.heroA{ padding-block:clamp(40px,6vw,84px) clamp(60px,8vw,110px); }
.heroA-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.heroA-copy{ max-width:560px; }
.heroA .display{ margin-top:22px; }
.heroA .lead{ margin-top:24px; max-width:46ch; }
.heroA-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.heroA-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:38px; }
.heroA-art{ position:relative; min-height:520px; display:grid; place-items:center; }
.heroA-art .halo.h1{ width:430px; height:430px; background:radial-gradient(circle at 50% 40%, var(--sage-100), var(--sage-50) 60%, transparent 72%); }
.heroA-art .halo.h2{ width:300px; height:300px; right:8%; top:8%; background:radial-gradient(circle, rgba(215,180,136,.28), transparent 70%); }
.heroA-art .bottle{ height:clamp(360px,42vw,500px); }

/* hero video card */
.hero-video{ position:relative; z-index:2; width:auto; height:clamp(420px,52vw,560px); aspect-ratio:9/16; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line-soft); background:linear-gradient(160deg,var(--cream-100),var(--cream-200)); }
.hero-video video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){ .hero-video{ height:clamp(380px,90vw,500px); margin-inline:auto; } }

/* ============================================================
   VARIANT B — Botanical editorial (forest split)
   ============================================================ */
.heroB{ position:relative; }
.heroB-grid{ display:grid; grid-template-columns:1.1fr .9fr; min-height:min(86vh,760px); }
.heroB-left{
  background:var(--forest); color:var(--cream-100);
  padding:clamp(48px,7vw,96px) clamp(36px,5vw,72px); display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.heroB-left > *{ flex:none; }
.heroB-left::after{ content:""; position:absolute; right:-160px; bottom:-160px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(147,168,126,.22), transparent 65%); }
.heroB-left .eyebrow{ color:var(--gold-soft); }
.heroB-left .eyebrow::before{ background:var(--gold-soft); }
.heroB-left .display{ color:var(--cream-50); margin-top:22px; font-size:clamp(40px,5vw,66px); }
.heroB-left .display em{ font-style:italic; color:var(--gold-soft); }
.heroB-left .lead{ color:color-mix(in srgb,var(--cream-100) 78%, transparent); margin-top:24px; max-width:42ch; }
.heroB-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; position:relative; z-index:2; }
.heroB-right{ position:relative; background:linear-gradient(160deg,var(--cream-100),var(--cream-200)); display:grid; place-items:center; overflow:hidden; }
.heroB-right .halo{ width:360px; height:360px; background:radial-gradient(circle, rgba(255,255,255,.7), transparent 70%); }
.heroB-right .bottle{ height:clamp(340px,40vw,520px); }
.heroB-meta{ position:absolute; left:clamp(36px,5vw,72px); bottom:clamp(28px,4vw,44px); display:flex; gap:26px; z-index:2; }
.heroB-meta .m b{ display:block; font-family:var(--serif); font-size:30px; font-weight:600; color:var(--cream-50); line-height:1; }
.heroB-meta .m span{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb,var(--cream-100) 60%, transparent); }
@media (max-width:900px){ .heroB-grid{ grid-template-columns:1fr; } .heroB-right{ min-height:440px; } }

/* ============================================================
   VARIANT C — Centered serene
   ============================================================ */
.heroC{ position:relative; text-align:center; padding-block:clamp(54px,7vw,92px) 0; overflow:hidden; }
.heroC::before{ content:""; position:absolute; left:50%; top:8%; transform:translateX(-50%); width:min(820px,92vw); height:520px; background:radial-gradient(ellipse at 50% 40%, var(--sage-50), transparent 62%); z-index:0; }
.heroC-copy{ position:relative; z-index:2; max-width:780px; margin:0 auto; }
.heroC .display{ margin-top:22px; }
.heroC .lead{ margin-top:22px; max-width:54ch; margin-inline:auto; }
.heroC-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.heroC-stage{ position:relative; z-index:1; margin-top:18px; display:grid; place-items:center; }
.heroC-stage .bottle{ height:clamp(360px,44vw,520px); }
.heroC-pcts{ position:absolute; inset:0; pointer-events:none; }
.heroC-pcts span{ position:absolute; font-family:var(--serif); font-weight:500; color:var(--gold); opacity:.5; }
.heroC-pcts .p1{ left:14%; top:30%; font-size:clamp(34px,4vw,52px); }
.heroC-pcts .p2{ right:15%; top:20%; font-size:clamp(44px,5.4vw,72px); opacity:.6; }
.heroC-pcts .p3{ right:20%; bottom:18%; font-size:clamp(30px,3.4vw,44px); opacity:.42; }
@media (max-width:680px){ .heroC-pcts{ display:none; } }

@media (max-width:900px){
  .heroA-grid{ grid-template-columns:1fr; gap:18px; }
  .heroA-art{ min-height:420px; order:-1; }
}

/* ============================================================
   Hero variant switcher (design-review control)
   ============================================================ */
.variant-switch{
  position:fixed; left:18px; bottom:18px; z-index:90;
  background:rgba(43,41,37,.92); color:#fff; border-radius:14px; padding:10px 12px;
  display:flex; align-items:center; gap:10px; box-shadow:0 14px 40px -12px rgba(0,0,0,.5);
  backdrop-filter:blur(8px); font-family:var(--sans);
}
.variant-switch .vs-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; padding-left:4px; }
.variant-switch .vs-btns{ display:flex; gap:4px; }
.variant-switch button{
  border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff;
  width:34px; height:32px; border-radius:9px; font-size:13px; font-weight:600; transition:.2s;
}
.variant-switch button:hover{ background:rgba(255,255,255,.12); }
.variant-switch button.on{ background:var(--gold); border-color:var(--gold); color:#fff; }
@media print{ .variant-switch{ display:none; } }

/* ============================================================
   Trust / shops strip
   ============================================================ */
.shopstrip{ border-block:1px solid var(--line); background:var(--cream-100); }
.shopstrip-inner{ display:flex; align-items:center; justify-content:center; gap:clamp(20px,5vw,64px); flex-wrap:wrap; padding-block:26px; }
.shopstrip .label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.shopstrip .shop-name{ font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); font-weight:600; color:var(--forest); opacity:.78; transition:opacity .2s; }
.shopstrip a.shop-name:hover{ opacity:1; }
.shopstrip .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.6; }
.shopstrip .strip-logo{ display:inline-flex; align-items:center; opacity:.85; }
.shopstrip .strip-logo:hover{ opacity:1; }
.shopstrip .strip-logo .sl-sa{ height:19px; }
.shopstrip .strip-logo .sl-dm{ height:18px; }
.shopstrip .strip-logo .sl-mp{ height:24px; }

/* ============================================================
   Product cards
   ============================================================ */
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px; }
@media (max-width:900px){ .prod-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }
.prod{
  background:var(--cream-50); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:30px 28px 28px; display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  position:relative; overflow:hidden;
}
.prod::before{ content:""; position:absolute; inset:0 0 auto 0; height:160px; background:radial-gradient(ellipse at 50% 0%, var(--sage-50), transparent 70%); opacity:0; transition:opacity .35s; }
.prod:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--sage-100); }
.prod:hover::before{ opacity:1; }
.prod-tag{ position:absolute; top:18px; right:18px; z-index:2; }
.prod-img{ height:230px; position:relative; z-index:1; margin-bottom:8px; }
.prod-img img{ height:100%; filter:drop-shadow(0 18px 26px rgba(45,63,49,.18)); transition:transform .4s var(--ease); }
.prod:hover .prod-img img{ transform:translateY(-6px) scale(1.02); }
.prod h3{ font-family:var(--serif); font-size:26px; font-weight:600; color:var(--forest); }
.prod .pct{ color:var(--gold-600); }
.prod-spec{ display:flex; gap:16px; justify-content:center; margin-top:14px; padding-top:16px; border-top:1px solid var(--line-soft); width:100%; }
.prod-spec .s{ font-size:12.5px; color:var(--muted); }
.prod-spec .s b{ display:block; font-family:var(--serif); font-size:19px; color:var(--forest); font-weight:600; }
.prod-buy{ width:100%; margin-top:20px; }
.prod-buy .bl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:10px; }
.prod-buy .shops{ display:flex; flex-direction:column; gap:8px; }
.shopbtn{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 16px; border-radius:11px; border:1px solid var(--line); background:#fff;
  font-size:13.5px; font-weight:600; color:var(--forest); transition:.22s;
}
.shopbtn:hover{ border-color:var(--sage); background:var(--sage-50); transform:translateY(-1px); }
.shopbtn .arr{ opacity:.45; transition:.22s; }
.shopbtn:hover .arr{ opacity:.9; transform:translateX(2px); }

/* ============================================================
   Quality (dark forest) band
   ============================================================ */
.darkband{ background:var(--forest); color:var(--cream-100); position:relative; overflow:hidden; }
.darkband::after{ content:""; position:absolute; right:-180px; top:-180px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(147,168,126,.2), transparent 64%); }
.darkband .eyebrow{ color:var(--gold-soft); } .darkband .eyebrow::before{ background:var(--gold-soft); }
.darkband .h2{ color:var(--cream-50); }
.darkband .lead{ color:color-mix(in srgb,var(--cream-100) 76%, transparent); }
.qa-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; }
@media (max-width:900px){ .qa-grid{ grid-template-columns:1fr; gap:34px; } }
.qa-list{ display:flex; flex-direction:column; gap:4px; margin-top:30px; }
.qa-item{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.qa-item:last-child{ border-bottom:0; }
.qa-num{ font-family:var(--serif); font-size:18px; color:var(--gold-soft); flex:none; width:26px; }
.qa-item p{ color:color-mix(in srgb,var(--cream-100) 82%, transparent); font-size:15.5px; }
.qa-item b{ color:var(--cream-50); }
.coa-card{ background:var(--cream-50); border-radius:var(--radius-lg); padding:30px; color:var(--ink); box-shadow:var(--shadow-lg); position:relative; z-index:2; }
.coa-card .coa-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line-soft); }
.coa-card .coa-rows{ margin-top:8px; }
.coa-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.coa-row:last-child{ border-bottom:0; }
.coa-row .k{ color:var(--muted); }
.coa-row .v{ font-weight:600; color:var(--forest); }
.coa-check{ display:inline-flex; align-items:center; gap:7px; color:var(--sage-700); font-weight:600; font-size:13px; }

/* ============================================================
   Story teaser (split)
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.split.rev .split-media{ order:2; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:30px; } .split.rev .split-media{ order:0; } }
.split-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:linear-gradient(160deg,var(--sage-100),var(--cream-200)); display:grid; place-items:center; }
.split-media.forest{ background:var(--forest); }
.split-media img{ height:84%; filter:drop-shadow(0 24px 36px rgba(45,63,49,.3)); }
.split-media.goddess{ background:linear-gradient(165deg,var(--cream-50),var(--sage-50)); border:1px solid var(--line-soft); }
.split-media.goddess img{ width:90%; height:auto; max-height:none; align-self:end; justify-self:center; filter:none; }
.split-media.goddess::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(to top, color-mix(in srgb,var(--sage-50) 70%, transparent), transparent); pointer-events:none; }

/* ============================================================
   FAQ teaser
   ============================================================ */
.faq-list{ margin-top:40px; max-width:820px; }
.faq-q{ border-bottom:1px solid var(--line); }
.faq-q summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--serif); font-size:clamp(19px,2vw,23px); font-weight:600; color:var(--forest); }
.faq-q summary::-webkit-details-marker{ display:none; }
.faq-q .ic{ flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.25s; }
.faq-q[open] .ic{ background:var(--forest); color:#fff; border-color:var(--forest); transform:rotate(45deg); }
.faq-q .a{ padding:0 0 24px; color:var(--muted); font-size:16px; max-width:68ch; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ text-align:center; background:linear-gradient(165deg,var(--cream-100),var(--cream-200)); border-radius:var(--radius-lg); padding:clamp(44px,6vw,76px); position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; left:50%; top:-40%; transform:translateX(-50%); width:560px; height:560px; background:radial-gradient(circle, rgba(147,168,126,.22), transparent 64%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band .h2{ margin-top:14px; }
.cta-band .lead{ margin:18px auto 0; max-width:48ch; }
.cta-band .cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:54px; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); gap:28px 20px; } }
.stat{ text-align:center; }
.stat b{ display:block; font-family:var(--serif); font-size:clamp(36px,4.4vw,52px); font-weight:600; color:var(--forest); line-height:1; }
.stat span{ display:block; margin-top:8px; font-size:13.5px; color:var(--muted); letter-spacing:.01em; }