/* ═══════════════════════════════════════════════════════════════
   V4 · DIRECT — "The Offer Angle"
   Olameed Health Nig. Ltd. · PLAN B Fertility Booster (For Men)
   Brand palette pulled from the physical labels.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --yellow:#f5e327;
  --yellow-d:#d8c60c;
  --purple:#6b2d78;
  --purple-d:#4a1c55;
  --blue:#1b5f9e;
  --blue-d:#0d3a68;
  --red:#e03131;
  --green:#12a150;
  --ink:#101014;
  --ink-2:#3a3a44;
  --ink-3:#6e6e7a;
  --paper:#fffdf2;
  --paper-2:#f6f2e2;
  --line:#101014;

  --shell:min(1180px,92vw);
  --sh:6px 6px 0 var(--ink);
  --sh-lg:10px 10px 0 var(--ink);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;font-weight:400;line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

section{position:relative;padding:clamp(60px,7.5vw,110px) 0}
.shell{width:var(--shell);margin-inline:auto}

h1,h2,h3{margin:0 0 20px;font-family:'Archivo Black',sans-serif;font-weight:400;
  line-height:1;letter-spacing:-.035em;text-transform:uppercase}
h1{font-size:clamp(36px,6.6vw,80px)}
h2{font-size:clamp(28px,5vw,60px)}
h3{font-size:clamp(19px,2.2vw,26px);letter-spacing:-.02em}
p{margin:0 0 16px;color:var(--ink-2);font-size:clamp(16px,1.15vw,17.5px)}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:58ch;color:var(--ink-2)}
strong,b{font-weight:800;color:var(--ink)}
.sm{font-size:13.5px;color:var(--ink-3)}
.hl{background:var(--yellow);padding:0 .16em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.underline{position:relative;display:inline-block}
.underline::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.28em;
  background:var(--yellow);z-index:-1;transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .3s}
.on .underline::after,.underline.on::after{transform:scaleX(1)}

.tag{display:inline-block;padding:8px 16px;border:2px solid var(--ink);border-radius:0;
  font-family:'Roboto Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);
  margin-bottom:22px}
.tag.p{background:var(--purple);color:#fff}
.tag.g{background:var(--green);color:#fff}
.tag.r{background:var(--red);color:#fff}

/* ── REVEAL ───────────────────────────────────────────────────── */
[data-r]{opacity:0;transform:translateY(30px)}
[data-r].on{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rs]>*{opacity:0;transform:translateY(24px) rotate(-.6deg)}
[data-rs].on>*{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-r],[data-rs]>*{opacity:1!important;transform:none!important}
}

/* ── ANNOUNCEMENT TICKER ──────────────────────────────────────── */
.ticker{position:fixed;top:0;left:0;right:0;z-index:950;background:var(--red);color:#fff;
  padding:9px 0;overflow:hidden;border-bottom:3px solid var(--ink)}
.ticker .tt{display:flex;gap:44px;width:max-content;animation:tk 26s linear infinite}
@keyframes tk{to{transform:translateX(-50%)}}
.ticker span{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font-family:'Roboto Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.ticker span::before{content:"★";color:var(--yellow)}

/* ── NAV ──────────────────────────────────────────────────────── */
.nav{position:fixed;top:38px;left:0;right:0;z-index:900;background:var(--paper);
  border-bottom:3px solid var(--ink);transition:transform .45s var(--ease)}
.nav.hide{transform:translateY(-140%)}
.nav .in{width:var(--shell);margin-inline:auto;height:64px;display:flex;
  align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-family:'Archivo Black';font-size:16px;
  letter-spacing:-.03em;text-transform:uppercase}
.brand .m{width:30px;height:30px;display:grid;place-items:center;background:var(--yellow);
  border:2px solid var(--ink);font-size:14px}
.brand small{display:block;font-family:'Archivo';font-size:9px;font-weight:600;letter-spacing:.16em;
  color:var(--ink-3);text-transform:uppercase}
.nlinks{display:flex;gap:26px;font-size:13.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em}
.nlinks a{padding-bottom:2px;border-bottom:3px solid transparent;transition:border-color .3s}
.nlinks a:hover{border-color:var(--yellow)}
@media(max-width:960px){.nlinks{display:none}}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 32px;border:3px solid var(--ink);font-family:'Archivo Black';font-size:15.5px;
  letter-spacing:-.01em;text-transform:uppercase;box-shadow:var(--sh);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);will-change:transform}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-y{background:var(--yellow)}
.btn-p{background:var(--purple);color:#fff}
.btn-g{background:var(--green);color:#fff}
.btn-w{background:#fff}
.btn.pulse{animation:pl 2.2s infinite}
@keyframes pl{0%,100%{box-shadow:var(--sh)}50%{box-shadow:6px 6px 0 var(--ink),0 0 0 10px rgba(245,227,39,.35)}}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero{padding-top:150px;background:
  repeating-linear-gradient(45deg,transparent 0 22px,rgba(107,45,120,.035) 22px 44px),
  radial-gradient(70% 55% at 78% 22%,rgba(245,227,39,.35),transparent 62%)}
.hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4.5vw,60px);align-items:center}
@media(max-width:980px){.hgrid{grid-template-columns:1fr;gap:40px}}
.hero h1{margin-bottom:24px}
.hero h1 .p{color:var(--purple)}
.hero h1 .b{color:var(--blue)}

.freebox{display:flex;align-items:center;gap:18px;padding:18px 22px;margin:26px 0;
  background:var(--yellow);border:3px solid var(--ink);box-shadow:var(--sh);
  animation:tilt 5s var(--ease) infinite}
@keyframes tilt{0%,100%{rotate:-.7deg}50%{rotate:.7deg}}
.freebox .ic{width:52px;height:52px;flex:none;display:grid;place-items:center;
  background:var(--ink);color:var(--yellow);font-family:'Archivo Black';font-size:11px;
  text-align:center;line-height:1.1}
.freebox div b{display:block;font-family:'Archivo Black';font-size:17px;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.15}
.freebox div span{font-size:13.5px;font-weight:600}

.hcta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.hticks{display:flex;flex-wrap:wrap;gap:8px}
.hticks i{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-size:12.5px;
  font-weight:700;padding:7px 13px;border:2px solid var(--ink);background:#fff;
  text-transform:uppercase;letter-spacing:.02em}
.hticks svg{width:13px;height:13px;stroke:var(--green);fill:none;stroke-width:3.2}

/* product stack */
.hstage{position:relative;display:grid;place-items:center;min-height:min(60vh,520px)}
.hstage .burst{position:absolute;width:min(88%,470px);aspect-ratio:1;
  background:conic-gradient(from 0deg,var(--yellow) 0 8deg,transparent 8deg 22deg);
  border-radius:50%;opacity:.55;animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}
.hstage .plate{position:absolute;width:min(66%,340px);aspect-ratio:1;border-radius:50%;
  background:#fff;border:3px solid var(--ink)}
/* Percentages, not fixed px: the cut-out bottles are tall and narrow, so a px
   pair overruns the stage on a phone. 52 + 36 - 6 = 82% always fits. */
.hbottles{position:relative;z-index:3;display:flex;align-items:flex-end;
  justify-content:center;gap:0;width:100%;max-width:100%}
.hbottles img{filter:drop-shadow(5px 6px 0 rgba(16,16,20,.22))}
.hbottles .main{width:min(52%,250px);z-index:2;
  filter:drop-shadow(8px 10px 0 rgba(16,16,20,.18));animation:fl 6s var(--ease) infinite}
.hbottles .free{width:min(36%,170px);margin-left:-6%;margin-bottom:4%;
  animation:fl 7s .6s var(--ease) infinite}
@keyframes fl{0%,100%{translate:0 0}50%{translate:0 -14px}}
.freeflag{position:absolute;z-index:5;right:2%;top:8%;padding:13px 18px;background:var(--red);
  color:#fff;border:3px solid var(--ink);box-shadow:var(--sh);
  font-family:'Archivo Black';font-size:14px;text-transform:uppercase;line-height:1.1;
  text-align:center;rotate:9deg;animation:pop 2.6s var(--ease) infinite}
.freeflag b{display:block;font-size:22px}
@keyframes pop{0%,100%{scale:1}50%{scale:1.07}}

/* ── SCARCITY BAND ────────────────────────────────────────────── */
.scarce{background:var(--purple);color:#fff;border-block:3px solid var(--ink)}
.scarce .in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,50px);
  align-items:center;padding:26px 0}
@media(max-width:860px){.scarce .in{grid-template-columns:1fr;text-align:center;gap:20px}}
.scarce h3{margin:0;color:#fff}
.scarce .timer{display:flex;gap:10px;justify-content:center}
.tcell{min-width:70px;padding:11px 8px;background:var(--yellow);border:3px solid var(--ink);
  text-align:center;color:var(--ink)}
.tcell b{display:block;font-family:'Roboto Mono',monospace;font-size:26px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums}
.tcell small{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.stockbar{width:min(300px,100%);margin-inline:auto}
.stockbar .lbl{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.stockbar .track{height:14px;background:rgba(255,255,255,.16);border:2px solid var(--ink)}
.stockbar .track i{display:block;height:100%;width:0;background:var(--yellow);
  transition:width 2s var(--ease)}
.stockbar.on .track i{width:var(--w,22%)}

/* ── PAIN GRID ────────────────────────────────────────────────── */
.pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:0;
  border:3px solid var(--ink);background:var(--ink)}
.pain{padding:30px 26px;background:#fff;transition:background .3s}
.pain:hover{background:var(--yellow)}
.pain .n{font-family:'Roboto Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.16em;color:var(--red);margin-bottom:12px}
.pain h3{font-size:19px;margin-bottom:8px}
.pain p{margin:0;font-size:14.5px}

/* ── VS BLOCK ─────────────────────────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
@media(max-width:820px){.vs{grid-template-columns:1fr;gap:0}}
.vsbox{padding:34px 30px;border:3px solid var(--ink)}
.vsbox.bad{background:#fff}
.vsbox.good{background:var(--green);color:#fff;box-shadow:var(--sh-lg)}
.vsbox.good h3,.vsbox.good b{color:#fff}
.vsbox h3{margin-bottom:20px}
.vsbox ul{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.vsbox li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:15px}
.vsbox li i{font-style:normal;font-weight:900;font-size:17px;line-height:1.2}
.vsbox.bad li i{color:var(--red)}
.vsbox.good li i{color:#fff}
.vsmid{display:grid;place-items:center;padding:0 18px}
@media(max-width:820px){.vsmid{padding:14px 0}}
.vsmid span{width:64px;height:64px;display:grid;place-items:center;background:var(--yellow);
  border:3px solid var(--ink);border-radius:50%;font-family:'Archivo Black';font-size:17px;
  box-shadow:var(--sh);animation:pop 3s var(--ease) infinite}

/* ── OFFER STACK ──────────────────────────────────────────────── */
.stack{max-width:640px;margin-inline:auto;border:3px solid var(--ink);background:#fff;
  box-shadow:var(--sh-lg)}
.stack .row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:17px 24px;border-bottom:2px solid var(--ink);font-size:15.5px}
.stack .row:last-child{border-bottom:0}
.stack .row b{font-weight:800}
.stack .row .v{font-family:'Roboto Mono',monospace;font-weight:700;white-space:nowrap}
.stack .row.free{background:var(--yellow)}
.stack .row.free .v{color:var(--red);text-transform:uppercase;font-family:'Archivo Black';font-size:14px}
.stack .row.total{background:var(--ink);color:#fff;font-family:'Archivo Black';
  text-transform:uppercase;font-size:17px;padding-block:22px}
.stack .row.total .v{font-family:'Archivo Black';font-size:26px;color:var(--yellow)}
.stack .row s{color:var(--ink-3);font-weight:400;font-family:'Roboto Mono'}

/* ── PACKAGES ─────────────────────────────────────────────────── */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:20px;margin-top:44px}
.pk{position:relative;padding:30px 24px;background:#fff;border:3px solid var(--ink);
  text-align:center;cursor:pointer;box-shadow:var(--sh);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pk:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--ink)}
.pk.best{background:var(--yellow);box-shadow:var(--sh-lg)}
.pk.best::before{content:"BEST VALUE";position:absolute;top:-3px;left:-3px;right:-3px;
  padding:7px;background:var(--red);color:#fff;font-family:'Archivo Black';font-size:11px;
  letter-spacing:.16em;border:3px solid var(--ink)}
.pk .q{font-family:'Roboto Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:12px 0 14px}
.pk.best .q{margin-top:34px;color:var(--ink-2)}
.pk .pr{font-family:'Archivo Black';font-size:clamp(30px,3.6vw,40px);letter-spacing:-.045em;line-height:1}
.pk .pr s{display:block;font-family:'Roboto Mono';font-size:15px;font-weight:500;
  color:var(--ink-3);margin-bottom:6px;letter-spacing:0}
.pk .gift{margin:18px 0;padding:11px;border:2px solid var(--ink);background:var(--green);
  color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.pk.best .gift{background:var(--purple)}
.pk .sv{font-size:12.5px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.04em}

/* ── PROOF ────────────────────────────────────────────────────── */
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.pf{padding:30px 28px;background:#fff;border:3px solid var(--ink);box-shadow:var(--sh);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pf:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--ink)}
.pf .st{display:flex;gap:2px;margin-bottom:16px}
.pf .st svg{width:17px;height:17px;fill:var(--yellow-d)}
.pf q{display:block;font-size:17px;font-weight:600;line-height:1.45;margin-bottom:20px;quotes:none}
.pf .by{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:2px solid var(--ink)}
.pf .av{width:42px;height:42px;display:grid;place-items:center;background:var(--purple);
  color:#fff;font-family:'Archivo Black';font-size:16px;border:2px solid var(--ink)}
.pf .by b{display:block;font-size:14.5px;font-weight:800}
.pf .by small{font-family:'Roboto Mono';font-size:11px;color:var(--ink-3);letter-spacing:.08em}
.pf .res{margin-top:14px;padding:10px 13px;background:var(--green);color:#fff;
  font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}

/* ── GUARANTEE ────────────────────────────────────────────────── */
.guar{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  padding:clamp(30px,4vw,48px);background:var(--yellow);border:3px solid var(--ink);
  box-shadow:var(--sh-lg)}
@media(max-width:760px){.guar{grid-template-columns:1fr;text-align:center;gap:22px}}
.guar .seal{width:clamp(120px,15vw,170px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:3px solid var(--ink);margin-inline:auto;animation:spinslow 26s linear infinite}
@keyframes spinslow{to{rotate:360deg}}
.guar .seal img{width:100%;height:100%;object-fit:cover}
.guar h2{margin-bottom:12px}
.guar p{margin:0;font-size:16.5px;color:var(--ink)}

/* ── FORM ─────────────────────────────────────────────────────── */
.formzone{background:var(--blue);border-block:3px solid var(--ink);color:#fff}
.formzone h2,.formzone .lead{color:#fff}
.form{max-width:640px;margin-inline:auto;padding:clamp(26px,4vw,44px);background:var(--paper);
  border:3px solid var(--ink);box-shadow:var(--sh-lg);color:var(--ink)}
.f{margin-bottom:17px}
.f label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:8px}
.f input,.f select,.f textarea{width:100%;padding:14px 16px;border:3px solid var(--ink);
  background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:500;
  transition:box-shadow .2s,background .2s}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;background:var(--yellow);
  box-shadow:4px 4px 0 var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.two{grid-template-columns:1fr}}

/* ── ORDER TOASTS ─────────────────────────────────────────────── */
.toasts{position:fixed;left:16px;bottom:16px;z-index:850;display:grid;gap:10px;
  max-width:min(320px,80vw);pointer-events:none}
@media(max-width:820px){.toasts{bottom:82px}}
.toast{display:flex;align-items:center;gap:12px;padding:12px 15px;background:#fff;
  border:3px solid var(--ink);box-shadow:var(--sh);font-size:13px;
  transform:translateX(-120%);transition:transform .5s var(--ease),opacity .4s}
.toast.in{transform:none}
.toast.out{transform:translateX(-120%);opacity:0}
.toast .d{width:9px;height:9px;flex:none;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(18,161,80,.2)}
.toast b{font-weight:800}
.toast small{display:block;color:var(--ink-3);font-size:11px;font-family:'Roboto Mono'}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:14px}
.q{border:3px solid var(--ink);background:#fff;box-shadow:var(--sh);overflow:hidden}
.q[open]{background:var(--yellow)}
.q summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;
  justify-content:space-between;align-items:center;gap:20px;
  font-family:'Archivo Black';font-size:16px;text-transform:uppercase;letter-spacing:-.02em}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-size:26px;line-height:1;transition:rotate .35s var(--ease)}
.q[open] summary::after{rotate:135deg}
.q .a{padding:0 24px 22px;font-size:15px;color:var(--ink-2);max-width:66ch}

/* ── STICKY BAR ───────────────────────────────────────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:800;padding:11px 16px;display:none;
  align-items:center;justify-content:space-between;gap:14px;background:var(--yellow);
  border-top:3px solid var(--ink);transform:translateY(120%);transition:transform .45s var(--ease)}
.bar.on{transform:none}
.bar .t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.bar .t b{display:block;font-family:'Archivo Black';font-size:18px;letter-spacing:-.03em}
@media(max-width:820px){.bar{display:flex}body{padding-bottom:76px}}

/* ── VIDEO TESTIMONIALS ───────────────────────────────────────── */
.vgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1000px){.vgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.vgrid{grid-template-columns:repeat(2,1fr)}}
.vgrid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.vgrid.three{grid-template-columns:repeat(2,1fr)}}
.vt{margin:0;display:flex;flex-direction:column}
.vt-play{position:relative;display:block;width:100%;padding:0;overflow:hidden;
  border:3px solid var(--ink);background:#fff;aspect-ratio:9/16;box-shadow:var(--sh);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.vt-play:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--ink)}
.vt-play img{width:100%;height:100%;object-fit:cover}
.vt-btn{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--yellow);border:3px solid var(--ink);
  transition:scale .2s var(--ease)}
.vt-play:hover .vt-btn{scale:1.12}
.vt-btn svg{width:20px;height:20px;fill:var(--ink);margin-left:3px}
.vt-time{position:absolute;z-index:2;right:8px;bottom:8px;padding:4px 8px;
  font-family:'Roboto Mono',monospace;font-size:10.5px;font-weight:700;
  color:var(--ink);background:var(--yellow);border:2px solid var(--ink)}
.vt-video{width:100%;aspect-ratio:9/16;border:3px solid var(--ink);box-shadow:var(--sh);
  background:#000;display:block;object-fit:cover}
.vt figcaption{padding:14px 2px 0}
.vt q{display:block;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);quotes:none}
.vt .vt-who{display:block;margin-top:8px;font-family:'Roboto Mono',monospace;font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

.vnote{display:flex;align-items:flex-start;gap:12px;max-width:74ch;margin:0 auto 34px;
  padding:16px 20px;border:3px solid var(--ink);background:var(--yellow);
  font-size:13.5px;font-weight:600;color:var(--ink);text-align:left;box-shadow:var(--sh)}
.vnote svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--ink);fill:none;stroke-width:2.4}
.vnote b{font-weight:800;text-transform:uppercase}
.vsub{margin:56px 0 22px;font-family:'Archivo Black';font-size:15px;text-transform:uppercase;
  letter-spacing:-.02em}

/* ── PACK SHOTS IN PRICING ────────────────────────────────────── */
.packshot{display:grid;place-items:center;margin-bottom:10px}
.packshot img{height:126px;width:auto;filter:drop-shadow(4px 5px 0 rgba(16,16,20,.16))}
.pk.best .packshot img{height:144px}

/* ── INGREDIENT GALLERY ───────────────────────────────────────── */
.herbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.herb{border:3px solid var(--ink);background:#fff;box-shadow:var(--sh);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.herb:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--ink)}
.herb .ph{aspect-ratio:16/10;overflow:hidden;border-bottom:3px solid var(--ink)}
.herb .ph img{width:100%;height:100%;object-fit:cover}
.herb .txt{padding:22px 24px 26px}
.herb .latin{font-family:'Roboto Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin-bottom:9px}
.herb h3{font-size:20px;margin-bottom:8px}
.herb p{margin:0;font-size:14.5px}

/* ── RESULTS GALLERY ──────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gal{position:relative;overflow:hidden;border:3px solid var(--ink);box-shadow:var(--sh)}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.gal span{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:12px 14px;
  background:var(--yellow);border-top:3px solid var(--ink);
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.3}

/* ── BADGE STRIP ──────────────────────────────────────────────── */
.badgerow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,4vw,48px);padding:26px;border:3px solid var(--ink);background:#fff;
  box-shadow:var(--sh)}
.badgerow .marks img{height:48px;width:auto}
.badgerow .bi{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-3)}
.badgerow .bi b{display:block;color:var(--ink);font-size:14.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em}
.badgerow .bi svg{width:28px;height:28px;stroke:var(--purple);fill:none;stroke-width:2}

/* ── FOOTER ───────────────────────────────────────────────────── */
footer{background:var(--ink);color:#a5a5b2;padding:56px 0 40px;border-top:3px solid var(--ink)}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
@media(max-width:760px){.fg{grid-template-columns:1fr}}
footer h4{font-family:'Archivo Black';font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);margin:0 0 15px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14px}
footer .brand{color:#fff}
footer .brand small{color:#7a7a88}
.disc{margin-top:40px;padding-top:24px;border-top:2px solid #26262e;font-size:12px;
  line-height:1.75;color:#77778a;max-width:92ch}
/* ── plugin additions: honeypot + server-rendered form states ─────────────── */
.opl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.opl-ok,.opl-err{display:flex;flex-direction:column;gap:6px;margin:0 0 22px;
  padding:18px 22px;border:3px solid var(--ink);box-shadow:var(--sh);font-size:14.5px}
.opl-ok{background:var(--green);color:#fff}
.opl-err{background:var(--red);color:#fff}
.opl-ok b,.opl-err b{font-family:'Archivo Black';font-size:16px;text-transform:uppercase;
  letter-spacing:-.02em}

/* The page pins a ticker at top:0 and the nav at top:38px. When an editor is
   logged in WordPress adds its own 32px bar over both, so push ours down.
   Visitors never see this rule. */
body.admin-bar .ticker{top:32px}
body.admin-bar .nav{top:70px}
@media screen and (max-width:782px){
  body.admin-bar .ticker{top:46px}
  body.admin-bar .nav{top:84px}
}

/* ══ Elementor build only — inert on the PHP template ══════════════════════
   Elementor's container padding comes from the site kit at a higher specificity
   than a two-class selector can reach, and it was flattening every section to a
   10px band (the page rendered 3,200px short). !important is the override that
   actually holds here; it is scoped to .e-con so nothing else on the site or on
   the PHP template can be affected.
   Order matters: the per-section rules below must come after these. */
.e-con.opl-sec{padding:clamp(60px,7.5vw,110px) 0 !important}
.e-con.opl-foot{padding:56px 0 40px !important}
.e-con.opl-nav{padding:0 !important}
.e-con.hero{padding-top:150px !important;padding-bottom:clamp(60px,7.5vw,110px) !important}
/* the four top-level divs carry their own padding on their own class */
.e-con.opl-div{padding:0 !important}
.e-con.ticker{padding:9px 0 !important}
.e-con.bar{padding:11px 16px !important}
/* containers must not constrain their children — the draft's own .shell does that */
.e-con.opl-sec,.e-con.opl-foot,.e-con.opl-nav,.e-con.opl-div{
  max-width:none !important;width:100% !important}
.e-con.opl-sec,.e-con.opl-foot,.e-con.opl-nav,.e-con.ticker,.e-con.scarce{
  display:block !important}
/* .toasts is a grid and .bar is hidden until the mobile breakpoint — a blanket
   display:block would have put the sticky order bar on screen at every width */
.e-con.toasts{display:grid !important}
.e-con.bar{display:none !important}
@media(max-width:820px){.e-con.bar{display:flex !important}}
.e-con.opl-s5{background:var(--paper-2) !important;border-block:3px solid var(--ink) !important}
.e-con.opl-s7{background:var(--paper-2) !important;border-block:3px solid var(--ink) !important}
.e-con.opl-s10{padding-top:0 !important}
.e-con.opl-s12{background:var(--purple) !important;border-block:3px solid var(--ink) !important}
.e-con.opl-s15{background:var(--yellow) !important;border-top:3px solid var(--ink) !important;text-align:center !important}