/** Shopify CDN: Minification failed

Line 3492:0 Unexpected "}"

**/
/* ===========================================================
   STRAPY Motion+ — performance, clean, high contrast
   =========================================================== */
:root{
  --deep:#12291F;
  --navy:#2D5749;
  --navy-2:#234439;
  --blue:#8FBBA6;
  --amber:#C9A227;
  --amber-dk:#A9860F;
  --ice:#EAF1EC;
  --cloud:#F6F8F6;
  --paper:#FFFFFF;
  --ink:#14181F;
  --mute:#6B727C;
  --hair:#DFE8E5;

  --f:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;

  --r:20px;
  --r-lg:28px;
  --r-xl:36px;

  --pad:clamp(18px,4.5vw,56px);
  --gap:clamp(64px,8vw,124px);
  --max:1200px;

  --sh:0 24px 60px -34px rgba(22,27,34,.42);
  --sh-sm:0 12px 30px -20px rgba(22,27,34,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--paper);color:var(--ink);font-size:16.5px;line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:12px}
::selection{background:var(--navy);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:900px;margin-inline:auto}
.band{padding-block:var(--gap)}

h1,h2,h3,h4{font-weight:800;letter-spacing:-.04em;line-height:1.04}
h1{font-size:clamp(38px,6.4vw,72px)}
h2{font-size:clamp(30px,4.4vw,54px)}
h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.03em;line-height:1.24}
p{max-width:64ch}
.lede{font-size:clamp(16.5px,1.5vw,19.5px);color:var(--mute);line-height:1.55;font-weight:400}
.lede--pale{color:#467C6A}
.center{text-align:center}
.center p{margin-inline:auto}

/* ---------- eyebrow pill ---------- */
.eye{display:inline-flex;align-items:center;gap:8px;background:var(--ice);color:var(--navy);
  font-size:13px;font-weight:700;padding:8px 16px;border-radius:100px;letter-spacing:-.01em}
.eye--amber{background:#E2F5F1;color:var(--amber-dk)}
.eye--glass{background:rgba(255,255,255,.12);color:#fff}

/* ---------- buttons: smooth pills ---------- */
.btn{
  --bg:var(--navy);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--bg);color:var(--fg);font-weight:700;font-size:17px;letter-spacing:-.02em;
  padding:19px 34px;border-radius:100px;box-shadow:0 14px 30px -16px rgba(49,92,78,.85);
  transition:transform .2s cubic-bezier(.2,.9,.3,1),box-shadow .2s,filter .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px -18px rgba(49,92,78,.9);filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn--wide{width:100%;padding:23px;font-size:18.5px}
.btn--white{--bg:#fff;--fg:var(--ink);box-shadow:0 14px 34px -18px rgba(0,0,0,.55)}
.btn--line{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair)}
.btn--line:hover{--bg:var(--cloud);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn--glass{--bg:rgba(255,255,255,.14);--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn--glass:hover{--bg:#fff;--fg:var(--ink)}
.btn small{font-size:13.5px;font-weight:600;opacity:.66;letter-spacing:0}

/* ---------- header ---------- */
.ann{
  background:var(--navy);color:#fff;overflow:hidden;padding:11px 0;
  -webkit-user-select:none;user-select:none;
}
.ann__track{display:flex;width:max-content;animation:annscroll var(--ann-speed,42s) linear infinite}
.ann__set{display:flex;align-items:center;flex:none;white-space:nowrap}
.ann:hover .ann__track{animation-play-state:paused}
.ann__i{
  /* same wordmark style as the footer CloudSense logo */
  font-family:var(--f);font-weight:800;font-style:italic;letter-spacing:-.02em;
  text-transform:uppercase;font-size:15.5px;line-height:1;padding:0 22px;
}
.ann__sep{color:#3D7A65;font-style:normal;font-size:12px;opacity:.85}
@keyframes annscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ann__track{animation:none;justify-content:center;width:100%}
  .ann__set:last-child{display:none}
}
.hd{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.hd.stuck{border-bottom-color:var(--hair);box-shadow:0 10px 30px -26px rgba(22,27,34,.7)}
.hd__in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px}
.mark{font-weight:800;font-size:19px;letter-spacing:-.055em}
.mark sup{font-size:9px;vertical-align:super;font-weight:600}
.hd nav{display:flex;gap:30px;font-size:15px;font-weight:600;color:var(--mute)}
.hd nav a:hover{color:var(--ink)}
.hd__r{display:flex;align-items:center;gap:12px}
.cartb{display:grid;place-items:center;width:44px;height:44px;border-radius:100px;background:var(--cloud);position:relative}
.cartb i{position:absolute;top:-2px;right:-2px;background:var(--navy);color:#fff;font-style:normal;
  font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:100px;display:grid;place-items:center;padding:0 5px}

/* ---------- dark surfaces ---------- */
.dark{background:var(--deep);color:#fff}
.dark h2,.dark h3{color:#fff}
.darkcard{background:var(--deep);border-radius:var(--r-xl);padding:clamp(28px,4.5vw,66px);color:#fff;
  position:relative;overflow:hidden}
.darkcard::before{content:"";position:absolute;top:-55%;right:-15%;width:80%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(61,122,101,.5),transparent 62%);pointer-events:none}
.darkcard>*{position:relative}

/* ============ WASTE CHART ============ */
.waste__head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,4vw,64px);align-items:end}
.util{position:relative;padding-left:50px;margin-top:clamp(34px,4.5vw,58px)}
.util__ax{position:absolute;left:0;top:0;bottom:0;width:38px;display:flex;flex-direction:column;
  justify-content:space-between;text-align:right;font-size:11px;font-weight:600;color:rgba(169,187,226,.5)}
.util__zero{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(169,187,226,.35);z-index:4}
.ubars{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(7px,1.5vw,24px);height:min(56vh,420px)}
.ub{display:grid;grid-template-rows:1fr 1fr}
.ub__u{align-self:end;position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.ub__d{position:relative}
.ufl{transform:scaleY(0);transition:transform 1.05s cubic-bezier(.25,.85,.3,1)}
.ub__u .ufl{background:linear-gradient(180deg,#fff,#E6EFEB);transform-origin:bottom;height:var(--u);
  border-radius:14px 14px 0 0}
.ub__d .ufl{background:linear-gradient(180deg,var(--amber),#2C4E43);transform-origin:top;height:var(--d);
  border-radius:0 0 14px 14px}
.live .ufl{transform:scaleY(1)}
.ub__n{position:absolute;bottom:calc(var(--u) + 14px);left:0;right:0;text-align:center;
  font-size:clamp(10px,1.05vw,12.5px);font-weight:600;color:rgba(255,255,255,.66);line-height:1.35;
  opacity:0;transition:opacity .5s .7s}
.ub__n b{display:block;font-size:clamp(17px,2.3vw,30px);font-weight:800;letter-spacing:-.05em;color:#fff;margin-top:5px}
.ub__v{position:absolute;top:calc(var(--d) + 11px);left:0;right:0;text-align:center;
  font-size:clamp(12px,1.3vw,16px);font-weight:800;letter-spacing:-.03em;color:var(--amber);
  opacity:0;transition:opacity .5s .7s}
.live .ub__n,.live .ub__v{opacity:1}
.ub.hero .ub__u .ufl{box-shadow:0 0 70px rgba(207,221,255,.55)}
.ulegend{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px}
.ulegend span{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:rgba(169,187,226,.9)}
.sw{width:14px;height:14px;border-radius:5px;flex:none}
.sw--up{background:#fff}
.sw--dn{background:var(--amber)}
.fine{font-size:12px;color:rgba(169,187,226,.5);margin-top:22px;max-width:70ch;line-height:1.65}

/* ============ IMAGE BANDS ============ */
.imgband{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(360px,48vw,520px);
  display:grid;align-items:end}
.imgband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imgband__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,45,57,.05) 0%,rgba(35,45,57,.72) 68%,rgba(35,45,57,.9) 100%)}
.imgband__c{position:relative;padding:clamp(26px,4vw,54px);color:#fff;max-width:640px}
.imgband__c h2{margin:16px 0 14px}
.imgband__c p{color:rgba(255,255,255,.82);font-size:clamp(15.5px,1.4vw,18px)}

/* split image + copy */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:center}
.split--flip .split__i{order:2}
.split__i{border-radius:var(--r-lg);overflow:hidden;background:var(--cloud)}
.split__c h2{margin:16px 0 18px}
.split__list{list-style:none;display:grid;gap:14px;margin-top:28px}
.split__list li{display:flex;gap:14px;align-items:flex-start;font-size:16px}
.ck{width:26px;height:26px;flex:none;border-radius:100px;background:var(--ice);display:grid;place-items:center;margin-top:1px}
.ck svg{width:14px;height:14px;color:var(--navy)}

/* ---------- soft cards ---------- */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.soft{background:var(--cloud);border-radius:var(--r);padding:30px 26px}
.soft b.num{display:block;font-size:clamp(32px,3.6vw,44px);font-weight:800;letter-spacing:-.055em;
  line-height:1;margin-bottom:10px;color:var(--navy)}
.soft b.num small{font-size:.38em;font-weight:700;letter-spacing:-.01em}
.soft span{display:block;font-size:14.5px;color:var(--mute);line-height:1.5}
.soft h3{margin-bottom:8px}
.soft p{font-size:15px;color:var(--mute)}
.stepn{width:38px;height:38px;border-radius:100px;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:16px;margin-bottom:18px}

/* ---------- comparison ---------- */
.cmp{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);background:#fff}
.cmpscroll{overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;min-width:620px}
.cmp th,.cmp td{padding:18px 14px;text-align:center;font-size:15px;border-bottom:1px solid var(--hair)}
.cmp thead th{font-size:14px;font-weight:800;letter-spacing:-.02em;background:var(--cloud);padding-block:20px}
.cmp thead th.me{background:var(--navy);color:#fff}
.cmp td.me{background:rgba(61,122,101,.06);font-weight:700}
.cmp th:first-child,.cmp td:first-child{text-align:left;padding-left:24px;color:var(--mute);font-weight:500;font-size:14.5px}
.cmp tr:last-child td{border-bottom:0}
.ok{color:#12A05F;font-weight:800;font-size:17px}
.nk{color:#C6CDDA;font-weight:800;font-size:17px}

/* ---------- reviews ---------- */
.rhead{display:flex;gap:clamp(24px,5vw,60px);align-items:center;flex-wrap:wrap;justify-content:center}
.rbig{text-align:center}
.rbig b{display:block;font-size:60px;font-weight:800;letter-spacing:-.06em;line-height:1}
.strs{color:var(--amber);letter-spacing:.12em;font-size:15px}
.rrows{display:grid;gap:8px;min-width:250px}
.rr{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--mute)}
.rr i{flex:1;height:7px;border-radius:100px;background:var(--hair);overflow:hidden}
.rr i b{display:block;height:100%;background:var(--amber);border-radius:100px}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.rev{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px 26px}
.rev__h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.av{width:44px;height:44px;border-radius:100px;background:var(--ice);display:grid;place-items:center;
  font-weight:800;color:var(--navy);font-size:15px;flex:none}
.rev__n{font-weight:700;font-size:15px;line-height:1.2}
.rev__v{font-size:12px;font-weight:700;color:#12A05F}
.rev p{font-size:15px;margin-top:12px}

/* ---------- accordion ---------- */
.acc{display:grid;gap:12px}
.ac{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:#fff;transition:border-color .25s}
.ac.on{border-color:var(--navy)}
.ac__b{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;
  text-align:left;font-weight:700;font-size:17px;letter-spacing:-.025em}
.ac__i{flex:none;width:28px;height:28px;border-radius:100px;background:var(--cloud);display:grid;place-items:center;
  position:relative;transition:background .3s,transform .3s}
.ac.on .ac__i{background:var(--navy);transform:rotate(135deg)}
.ac__i::before,.ac__i::after{content:"";position:absolute;background:var(--navy);border-radius:2px;transition:background .3s}
.ac__i::before{width:12px;height:2px}
.ac__i::after{width:2px;height:12px}
.ac.on .ac__i::before,.ac.on .ac__i::after{background:#fff}
.ac__p{max-height:0;overflow:hidden;transition:max-height .38s ease}
.ac__p .in{padding:0 24px 24px;color:var(--mute);font-size:15.5px}
.ac__p ul{margin:12px 0 0 18px}
.ac__p li{margin-bottom:6px;font-size:15px}

/* ---------- footer ---------- */
.ft{background:var(--deep);color:#fff;padding-block:64px 36px}
.ft__g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px}
.ft h4{font-size:14px;font-weight:800;margin-bottom:16px;letter-spacing:-.02em}
.ft ul{list-style:none;display:grid;gap:11px;font-size:15px}
.ft a{color:rgba(240,245,243,.7)}
.ft a:hover{color:#fff}
.ft__note{color:rgba(240,245,243,.55);font-size:14.5px;margin-top:14px;max-width:34ch}
.pays{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}
.pays i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;color:rgba(240,245,243,.6);
  padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.07)}
.dis{margin-top:50px;padding-top:24px;border-top:1px solid rgba(240,245,243,.13);
  font-size:12px;color:rgba(240,245,243,.42);line-height:1.65;max-width:92ch}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.85,.3,1),transform .7s cubic-bezier(.2,.85,.3,1)}
.rise.in{opacity:1;transform:none}

@media(max-width:1000px){
  .split,.waste__head{grid-template-columns:1fr}
  .split--flip .split__i{order:-1}
  .split__i{max-width:520px}
  .hd nav{display:none}
  .g4{grid-template-columns:1fr 1fr}
  .g3,.revs{grid-template-columns:1fr}
  .ft__g{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .util{padding-left:30px}
  .util__ax{width:24px;font-size:9.5px}
  .ubars{gap:6px;height:330px}
  .g4{grid-template-columns:1fr}
  .rbig b{font-size:48px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}.ufl{transform:scaleY(1)}.ub__n,.ub__v{opacity:1}
  html{scroll-behavior:auto}
}

/* ===========================================================
   v5 — TRUSTPILOT-STYLE REVIEWS
   =========================================================== */
:root{
  --tp:#00B67A;
  --tp-dk:#005128;
  --tp-grey:#DFE1E3;
}
.tpstars{display:inline-flex;gap:3px;vertical-align:middle}
.tpstars i{width:var(--sz,22px);height:var(--sz,22px);background:var(--tp);display:grid;place-items:center;
  border-radius:2px;flex:none;position:relative;overflow:hidden}
.tpstars i.off{background:var(--tp-grey)}
.tpstars i.half::after{content:"";position:absolute;inset:0 0 0 50%;background:var(--tp-grey)}
.tpstars i svg{width:76%;height:76%;fill:#fff;position:relative;z-index:2}

.tplogo{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:-.035em;font-size:17px}
.tplogo .s{width:19px;height:19px;fill:var(--tp)}

.tpbar{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(24px,3.2vw,38px);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(22px,4vw,52px);align-items:center;box-shadow:var(--sh-sm)}
.tpbar__score b{display:block;font-size:clamp(38px,4.4vw,56px);font-weight:800;letter-spacing:-.06em;line-height:1}
.tpbar__score em{font-style:normal;font-size:17px;font-weight:800;color:var(--tp-dk);display:block;margin-top:6px}
.tpbar__score span{display:block;font-size:13.5px;color:var(--mute);font-weight:600;margin-top:4px}
.tpbar__rows{display:grid;gap:7px;min-width:200px}
.tprow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;color:var(--mute)}
.tprow u{text-decoration:none;width:36px}
.tprow i{flex:1;height:12px;background:var(--tp-grey);border-radius:2px;overflow:hidden}
.tprow i b{display:block;height:100%;background:var(--tp);width:0;transition:width 1.1s cubic-bezier(.25,.85,.3,1)}
.in .tprow i b{width:var(--w)}
.tpbar__cta{text-align:center}

.tpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.tpcard{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column}
.tpcard__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.tpcard__date{font-size:12.5px;color:var(--mute);font-weight:600}
.tpcard h3,.tpcard h4{font-size:17px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.tpcard p{font-size:15px;color:var(--mute);flex:1}
.tpcard__who{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
.tpav{width:44px;height:44px;border-radius:100px;background:var(--ice);display:grid;place-items:center;
  font-weight:800;font-size:15px;color:var(--navy);flex:none}
.tpcard__n{font-weight:700;font-size:14px;line-height:1.25}
.tpver{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--tp-dk)}
.tpver svg{width:13px;height:13px;fill:var(--tp)}

.tpfoot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;
  font-size:14px;font-weight:600;color:var(--mute);flex-wrap:wrap}

/* ===========================================================
   v5 — TEXT ANIMATIONS (one treatment per section)
   =========================================================== */

/* A. word-by-word rise (hero) */
.aw span{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  transition:opacity .55s cubic-bezier(.2,.85,.3,1),transform .55s cubic-bezier(.2,.85,.3,1)}
.aw.in span{opacity:1;transform:none}

/* B. clip-mask wipe up (dark sections) */
.am{display:inline-block;overflow:hidden;vertical-align:bottom}
.am>span{display:inline-block;transform:translateY(105%);transition:transform .85s cubic-bezier(.16,.9,.28,1)}
.am.in>span{transform:none}

/* C. amber highlight swipe (waste / problem headings) */
.ah{position:relative;display:inline;background-image:linear-gradient(var(--amber),var(--amber));
  background-repeat:no-repeat;background-position:0 88%;background-size:0 .28em;
  transition:background-size .8s .25s cubic-bezier(.2,.85,.3,1)}
.ah.in{background-size:100% .28em}

/* D. letter-spacing settle (centred section headings) */
.al{letter-spacing:.14em;opacity:0;transform:translateY(10px);
  transition:letter-spacing 1s cubic-bezier(.16,.9,.28,1),opacity .7s,transform .7s}
.al.in{letter-spacing:-.04em;opacity:1;transform:none}

/* E. gradient sweep text (product / inside headings) */
.ag{background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,var(--blue) 50%,var(--ink) 62%,var(--ink) 100%);
  background-size:280% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;transition:background-position 1.5s .2s ease}
.ag.in{background-position:0 0}
.dark .ag,.darkcard .ag,.imgband .ag{
  background-image:linear-gradient(100deg,#fff 0%,#fff 38%,#43856F 50%,#fff 62%,#fff 100%)}

/* F. line-by-line slide (lists, split copy) */
.as>*{opacity:0;transform:translateX(-14px);
  transition:opacity .6s cubic-bezier(.2,.85,.3,1),transform .6s cubic-bezier(.2,.85,.3,1)}
.as.in>*{opacity:1;transform:none}

/* G. count-up numbers */
.ac-num{font-variant-numeric:tabular-nums}

/* H. blur-in (guarantee / final) */
.ab{opacity:0;filter:blur(11px);transform:scale(.985);
  transition:opacity .9s ease,filter .9s ease,transform .9s ease}
.ab.in{opacity:1;filter:none;transform:none}

/* free-shipping meter */
.ship{margin-top:18px;background:var(--cloud);border-radius:14px;padding:14px 16px}
.ship__t{font-size:13.5px;font-weight:700;margin-bottom:9px;display:flex;justify-content:space-between;gap:12px}
.ship__t em{font-style:normal;color:var(--tp-dk)}
.ship__b{height:8px;background:var(--hair);border-radius:100px;overflow:hidden}
.ship__b i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--blue));
  border-radius:100px;width:0;transition:width .5s cubic-bezier(.2,.85,.3,1)}
.ship.done .ship__b i{background:linear-gradient(90deg,var(--tp),#0DD68F)}

@media(max-width:1000px){
  .tpbar{grid-template-columns:1fr;text-align:center;justify-items:center}
  .tpgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .aw span,.am>span,.al,.as>*,.ab{opacity:1!important;transform:none!important;filter:none!important}
  .ah{background-size:100% .28em!important}
  .ag{-webkit-text-fill-color:currentColor;background:none}
  .tprow i b{width:var(--w)!important}
}

/* ===========================================================
   v6 — star strip (single SVG, always horizontal)
   =========================================================== */
.tpstars{display:inline-block;vertical-align:middle;flex:none}
.tpstars rect.on{fill:var(--tp)}
.tpstars rect.off{fill:var(--tp-grey)}
.tpstars path{fill:#fff}

/* ===========================================================
   FACEBOOK-STYLE SOCIAL PROOF
   =========================================================== */
.fbwrap{margin-top:26px;display:grid;gap:12px}
.fbhead{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--mute)}
.fbhead b{color:var(--ink)}
.fb{background:#F0F2F5;border-radius:16px;padding:16px 18px}
.fb__top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.fb__av{width:40px;height:40px;border-radius:100px;background:linear-gradient(140deg,#1877F2,#4A9DFF);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:none}
.fb__n{font-weight:700;font-size:14.5px;line-height:1.2;color:#050505}
.fb__meta{font-size:12px;color:#65676B;display:flex;align-items:center;gap:5px}
.fb__meta svg{width:11px;height:11px;fill:#65676B}
.fb__txt{font-size:14.5px;color:#050505;line-height:1.5}
.fb__bar{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
  padding-top:10px;border-top:1px solid #DDE0E4}
.fb__react{display:flex;align-items:center;gap:6px;font-size:13px;color:#65676B}
.fb__pills{display:flex}
.fb__pills i{width:19px;height:19px;border-radius:100px;display:grid;place-items:center;
  border:2px solid #F0F2F5;margin-left:-5px}
.fb__pills i:first-child{margin-left:0}
.fb__pills i svg{width:10px;height:10px;fill:#fff}
.fb__pills i.like{background:#1877F2}
.fb__pills i.love{background:#F3425F}
.fb__acts{display:flex;gap:18px;font-size:13px;font-weight:700;color:#65676B}

/* ===========================================================
   VIDEO CAROUSEL
   =========================================================== */

/* ===========================================================
   ROUTINE — staggered track with glass number circles
   =========================================================== */
.track{position:relative;margin-top:34px;padding-left:0}
.tstep{position:relative;display:grid;grid-template-columns:64px 1fr;gap:20px;padding-bottom:36px}
.tstep:last-child{padding-bottom:0}
.tstep:nth-child(2){margin-left:clamp(0px,3vw,34px)}
.tstep:nth-child(3){margin-left:clamp(0px,6vw,68px)}
.tnum{position:relative;width:64px;height:64px;border-radius:100px;flex:none;z-index:2;
  background:rgba(49,92,78,.08);backdrop-filter:blur(10px);
  border:1.5px solid rgba(49,92,78,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 26px -18px rgba(49,92,78,.9);
  display:grid;place-items:center;font-size:23px;font-weight:800;letter-spacing:-.05em;color:var(--navy);
  transform:scale(.7);opacity:0;transition:transform .55s cubic-bezier(.2,1.5,.4,1),opacity .45s}
.track.in .tstep:nth-child(1) .tnum{transition-delay:.05s}
.track.in .tstep:nth-child(2) .tnum{transition-delay:.55s}
.track.in .tstep:nth-child(3) .tnum{transition-delay:1.05s}
.track.in .tnum{transform:none;opacity:1}
.tline{position:absolute;left:31px;top:64px;bottom:0;width:2px;background:var(--hair);overflow:hidden;z-index:1}
.tstep:last-child .tline{display:none}
.tline i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--navy),var(--blue));
  transform:scaleY(0);transform-origin:top;transition:transform .55s cubic-bezier(.4,0,.3,1)}
.track.in .tstep:nth-child(1) .tline i{transition-delay:.3s;transform:scaleY(1)}
.track.in .tstep:nth-child(2) .tline i{transition-delay:.8s;transform:scaleY(1)}
.tcard{padding-top:8px;opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s}
.track.in .tstep:nth-child(1) .tcard{transition-delay:.2s}
.track.in .tstep:nth-child(2) .tcard{transition-delay:.7s}
.track.in .tstep:nth-child(3) .tcard{transition-delay:1.2s}
.track.in .tcard{opacity:1;transform:none}
.tcard b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.tcard span{display:block;font-size:15px;color:var(--mute)}
.tcard em{font-style:normal;display:inline-block;margin-top:10px;font-size:12px;font-weight:800;
  color:var(--navy);background:var(--ice);padding:5px 12px;border-radius:100px}

/* ===========================================================
   "SOUND LIKE YOU?" — problem/solution switcher
   =========================================================== */
.sly{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(20px,3vw,40px);margin-top:44px;align-items:start}
.slylist{display:grid;gap:12px}
.sly__b{text-align:left;background:#fff;border:2px solid var(--hair);border-radius:var(--r);
  padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  transition:border-color .22s,box-shadow .22s,background .22s}
.sly__b:hover{border-color:#B9C7E8}
.sly__b.on{border-color:var(--navy);background:var(--navy);color:#fff;box-shadow:var(--sh)}
.sly__b b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.03em}
.sly__b span{display:block;font-size:13.5px;color:var(--mute);margin-top:3px}
.sly__b.on span{color:rgba(240,245,243,.72)}
.sly__b i{width:30px;height:30px;border-radius:100px;background:var(--cloud);display:grid;place-items:center;
  font-style:normal;font-size:15px;color:var(--navy);flex:none;transition:background .22s,transform .22s}
.sly__b.on i{background:rgba(255,255,255,.18);color:#fff;transform:translateX(3px)}

.slypanel{background:var(--deep);border-radius:var(--r-lg);overflow:hidden;color:#fff;position:relative;
  min-height:100%;display:grid;grid-template-rows:auto 1fr}
.slypanel__img{position:relative;height:clamp(150px,17vw,210px);overflow:hidden}
.slypanel__img img{width:100%;height:100%;object-fit:cover}
.slypanel__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,45,57,.15),var(--deep))}
.slypanel__c{padding:clamp(22px,2.6vw,32px);margin-top:-40px;position:relative}
.slyfade{animation:slyIn .45s cubic-bezier(.2,.85,.3,1)}
@keyframes slyIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.slypanel h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:12px;color:#fff}
.slypanel p{font-size:15.5px;color:#467C6A;margin-bottom:18px}
.slyfix{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 20px}
.slyfix u{text-decoration:none;display:block;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#43856F;margin-bottom:8px}
.slyfix span{font-size:15px;color:#fff;display:block}
.slycost{margin-top:36px;background:#E2F5F1;border-radius:var(--r);padding:22px 26px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.slycost p{font-size:15.5px;color:#234637;font-weight:600;max-width:60ch;margin:0}
.slycost b{color:var(--amber-dk);font-weight:800}

@media(max-width:1000px){
  .sly{grid-template-columns:1fr}
  .tstep:nth-child(2),.tstep:nth-child(3){margin-left:0}
}
@media(max-width:680px){
  .tstep{grid-template-columns:52px 1fr;gap:16px}
  .tnum{width:52px;height:52px;font-size:19px}
  .tline{left:25px;top:52px}
}
@media(prefers-reduced-motion:reduce){
  .tnum,.tcard{opacity:1!important;transform:none!important}
  .tline i{transform:scaleY(1)!important}
  .slyfade{animation:none}
}

/* ===== FB deck — one post at a time ===== */
.fbdeck{overflow:hidden;border-radius:16px}
.fbdeck__track{display:flex;transition:transform .45s cubic-bezier(.2,.85,.3,1)}
.fbdeck__track>.fb{flex:0 0 100%;border-radius:16px}
.fbnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.fbdots{display:flex;gap:7px}
.fbdots button{width:7px;height:7px;border-radius:100px;background:var(--hair);transition:width .3s,background .3s}
.fbdots button.on{width:22px;background:#1877F2}
.fbarrows{display:flex;gap:8px}
.fbarrows button{width:34px;height:34px;border-radius:100px;background:var(--cloud);display:grid;place-items:center;
  transition:background .2s}
.fbarrows button:hover{background:var(--ice)}
.fbarrows svg{width:14px;height:14px;stroke:var(--navy);stroke-width:2.6;fill:none;stroke-linecap:round}

/* ===========================================================
   v7 — stat row (no boxes, editorial)
   =========================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:26px 26px 4px 0;border-top:2px solid var(--ink);margin-right:26px}
.stat:last-child{margin-right:0}
.stat__k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:clamp(26px,4vw,54px)}
.stat__v{display:block;font-size:clamp(46px,5.6vw,74px);font-weight:800;letter-spacing:-.065em;
  line-height:.9;color:var(--navy)}
.stat__v u{text-decoration:none;font-size:.3em;letter-spacing:-.01em;margin-left:2px;color:var(--mute);
  vertical-align:baseline}
.stat__d{display:block;font-size:14.5px;color:var(--mute);line-height:1.5;margin-top:16px;max-width:26ch}
@media(max-width:860px){
  .stats{grid-template-columns:1fr 1fr;gap:0 0}
  .stat{margin-right:20px;padding-right:20px}
  .stat:nth-child(2n){margin-right:0;padding-right:0}
}
@media(max-width:480px){
  .stats{grid-template-columns:1fr}
  .stat{margin-right:0;padding-right:0}
}

/* ===========================================================
   v7 — problem carousel with tilted image cards
   =========================================================== */
.pv{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4vw,64px);align-items:center;margin-top:clamp(30px,4vw,56px)}
.pv__media{position:relative;padding:clamp(20px,3vw,44px) 0 clamp(46px,6vw,78px);min-height:clamp(400px,44vw,560px)}
.pvc{position:absolute;border-radius:22px;overflow:hidden;background:var(--cloud);
  box-shadow:0 30px 60px -34px rgba(22,27,34,.6);transition:transform .55s cubic-bezier(.2,.85,.3,1),opacity .4s}
.pvc img{width:100%;height:100%;object-fit:cover}
.pvc--a{width:60%;aspect-ratio:4/5;top:0;left:0;transform:rotate(-6.5deg);z-index:2}
.pvc--b{width:58%;aspect-ratio:4/5;bottom:0;right:0;transform:rotate(5.5deg);z-index:3}
.pvc--a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,45,57,.45),rgba(35,45,57,.82))}

/* the scroll-in reveal must land ON the card's own diagonal tilt, not
   transform:none — otherwise the entrance animation cancels the tilt */
.pvc--a.rise-l{transform:translateX(-34px) rotate(-6.5deg)}
.pvc--a.rise-l.in{transform:rotate(-6.5deg)}
.pvc--b.rise-r{transform:translateX(34px) rotate(5.5deg)}
.pvc--b.rise-r.in{transform:rotate(5.5deg)}
.pvc__q{position:absolute;inset:auto 0 0 0;padding:20px;color:#fff;z-index:2;
  font-size:clamp(15px,1.5vw,18px);font-weight:700;letter-spacing:-.025em;line-height:1.3}
.pvlab{position:absolute;z-index:4;display:flex;align-items:center;gap:6px;
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;
  font-size:clamp(16px,1.8vw,22px);letter-spacing:-.01em;white-space:nowrap}
.pvlab svg{width:clamp(38px,4.5vw,56px);height:auto;fill:none;stroke-width:2.2;stroke-linecap:round}
.pvlab--a{top:clamp(14px,3vw,42px);right:0;color:var(--ink)}
.pvlab--a svg{stroke:var(--ink)}
.pvlab--b{bottom:clamp(6px,2vw,20px);left:0;color:var(--blue)}
.pvlab--b svg{stroke:var(--blue)}

.pv__copy h3{font-size:clamp(27px,3.5vw,42px);letter-spacing:-.045em;line-height:1.05;color:var(--navy);margin-bottom:14px}
.pv__copy .pvstars{margin-bottom:16px;display:block}
.pv__copy p{font-size:clamp(15.5px,1.4vw,17.5px);color:var(--mute);margin-bottom:22px}
.pvfix{background:var(--ice);border-radius:18px;padding:18px 22px;margin-bottom:26px}
.pvfix u{text-decoration:none;display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.pvfix span{font-size:15px;color:var(--ink);display:block}
.pvnav{display:flex;align-items:center;gap:20px}
.pvnav button{width:52px;height:36px;display:grid;place-items:center;border-radius:100px;transition:background .2s}
.pvnav button:hover{background:var(--cloud)}
.pvnav svg{width:34px;height:12px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round}
.pvnav span{font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pvnav span i{font-style:normal;color:var(--mute);font-weight:600}
.pvfade{animation:pvIn .45s cubic-bezier(.2,.85,.3,1)}
@keyframes pvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:1000px){
  .pv{grid-template-columns:1fr}
  .pv__media{min-height:clamp(340px,80vw,460px);max-width:520px;margin-inline:auto;width:100%}
}
@media(prefers-reduced-motion:reduce){.pvfade{animation:none}}

/* ===========================================================
   v8 — smooth stat cards (replaces the ruled row)
   =========================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{
  border-radius:26px;padding:34px 28px 30px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#FFFFFF 0%,#F2F6FF 58%,#E9F0FF 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 44px -30px rgba(22,27,34,.5);
  border:1px solid rgba(61,122,101,.1);margin:0;
  transition:transform .35s cubic-bezier(.2,.85,.3,1),box-shadow .35s;
}
.stat::after{content:"";position:absolute;top:-46%;right:-30%;width:74%;aspect-ratio:1;border-radius:100px;
  background:radial-gradient(circle,rgba(61,122,101,.16),transparent 66%);pointer-events:none}
.stat:hover{transform:translateY(-4px);box-shadow:0 28px 54px -30px rgba(22,27,34,.55)}
.stat__k{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);background:rgba(61,122,101,.12);padding:6px 13px;border-radius:100px;margin-bottom:22px}
.stat__v{display:flex;align-items:baseline;gap:2px;font-size:clamp(42px,4.6vw,58px);font-weight:800;
  letter-spacing:-.06em;line-height:.92;
  background:linear-gradient(150deg,var(--navy),var(--blue));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.stat__v u{text-decoration:none;font-size:.3em;letter-spacing:-.01em;font-weight:700;
  -webkit-text-fill-color:var(--mute)}
.stat__d{display:block;font-size:14.5px;color:var(--mute);line-height:1.5;margin-top:16px}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}

/* ===========================================================
   v8 — trustpilot rating rows on one line
   =========================================================== */
.tpbar{grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px)}
.tpbar__rows{grid-template-columns:repeat(5,1fr);display:grid;gap:14px;min-width:0}
.tprow{display:block;text-align:left}
.tprow u{display:block;width:auto;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.tprow i{display:block;width:100%;height:10px;border-radius:3px}
.tprow{font-size:13px;font-weight:800;color:var(--ink)}
.tprow em{font-style:normal;display:block;margin-top:7px;font-size:13px;color:var(--mute);font-weight:700}
.tpbar__cta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;text-align:left;padding-top:22px;margin-top:4px;border-top:1px solid var(--hair)}
.tpbar__cta .tpmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:760px){
  .tpbar{grid-template-columns:1fr}
  .tpbar__rows{gap:10px}
  .tprow u{font-size:10px}
}

/* hide the facebook deck nav bar */
.fbnav .fbdots{display:none}
.fbnav{justify-content:flex-end}

/* ===========================================================
   v9 — trustpilot rows back to stacked, each on one line
   =========================================================== */
.tpbar{grid-template-columns:auto 1fr auto;gap:clamp(22px,4vw,52px)}
.tpbar__rows{display:grid;grid-template-columns:1fr;gap:8px;min-width:260px}
.tprow{display:flex;align-items:center;gap:12px;text-align:left;font-size:13px;font-weight:700;color:var(--mute)}
.tprow u{display:block;width:52px;flex:none;margin:0;font-size:12px;font-weight:800;letter-spacing:.04em;
  text-transform:none;color:var(--mute)}
.tprow i{flex:1;width:auto;height:9px;border-radius:100px}
.tprow i b{border-radius:100px}
.tprow em{display:inline;margin:0;width:38px;flex:none;text-align:right;font-size:12.5px;color:var(--mute);font-weight:700}
.tpbar__cta{grid-column:auto;display:block;text-align:center;padding-top:0;margin-top:0;border-top:0}
.tpbar__cta .tpmeta{display:block}
.tpbar__cta .tplogo{justify-content:center}
.tpbar__cta .btn{margin-top:14px}
@media(max-width:1000px){
  .tpbar{grid-template-columns:1fr}
  .tpbar__rows{min-width:0;width:100%;max-width:340px}
}

/* ===========================================================
   v9 — money-back seal badge
   =========================================================== */
.seal{width:clamp(150px,17vw,196px);height:auto;background:none;border:0;border-radius:0;box-shadow:none;
  display:block;flex:none}
.seal svg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 34px rgba(0,0,0,.42))}
.seal .burst{fill:var(--blue)}
.seal .core{fill:#060C1C}
.seal .curve{fill:#fff;font-weight:800;font-size:19px;letter-spacing:.19em}
.seal .big{fill:#fff;font-weight:800;font-size:52px;letter-spacing:-.05em}
.seal .sml{fill:#fff;font-weight:800;font-size:19px;letter-spacing:.22em}
.seal .hair{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.6}

/* ===========================================================
   v10 — floating pill header
   =========================================================== */
.hd{position:sticky;top:0;z-index:90;background:transparent;backdrop-filter:none;
  border:0;box-shadow:none;padding-block:12px;transition:padding .3s}
.hd.stuck{border:0;box-shadow:none;padding-block:8px}
.hd__in{height:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}

.hpill{
  display:flex;align-items:center;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);
  border-radius:100px;
  box-shadow:0 14px 34px -22px rgba(22,27,34,.55),inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .3s,box-shadow .3s;
}
.hd.stuck .hpill{background:rgba(255,255,255,.82);box-shadow:0 16px 38px -24px rgba(22,27,34,.6),inset 0 1px 0 rgba(255,255,255,.8)}

.hpill--logo{padding:11px 26px}
.hpill--logo .mark{font-size:19px;letter-spacing:-.055em;color:var(--deep)}

.hpill--nav{padding:0 10px;gap:2px}
.hpill--nav a{font-size:14.5px;font-weight:600;color:var(--mute);padding:13px 15px;border-radius:100px;transition:background .2s,color .2s}
.hpill--nav a:hover{background:rgba(255,255,255,.75);color:var(--ink)}

.hpill--act{padding:7px 8px 7px 7px;gap:6px}
.hpill--act .btn{padding:13px 26px;font-size:15.5px;box-shadow:none}
.hpill--act .btn:hover{transform:none;box-shadow:0 10px 22px -14px rgba(49,92,78,.9)}
.hicon{position:relative;width:44px;height:44px;border-radius:100px;display:grid;place-items:center;
  color:var(--deep);transition:background .2s}
.hicon:hover{background:rgba(255,255,255,.8)}
.hicon svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hdot{position:absolute;top:7px;right:7px;min-width:17px;height:17px;border-radius:100px;background:var(--amber);
  color:#12241C;font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 4px;
  border:2px solid rgba(255,255,255,.9)}
.burger span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;margin:4px 0}

/* mobile / overflow menu */
.hmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:10px;
  box-shadow:0 26px 56px -28px rgba(22,27,34,.6);display:grid;gap:2px;
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transform-origin:top right;
  transition:opacity .25s,transform .25s}
.hmenu.open{opacity:1;transform:none;pointer-events:auto}
.hmenu a{padding:13px 18px;border-radius:100px;font-size:15px;font-weight:600;color:var(--ink)}
.hmenu a:hover{background:var(--cloud)}
.hd__in{position:relative}

@media(max-width:1040px){.hpill--nav{display:none}}
@media(max-width:560px){
  .hpill--logo{padding:10px 18px}
  .hpill--logo .mark{font-size:16px}
  .hpill--act .btn{padding:12px 18px;font-size:14px}
  .hicon{width:40px;height:40px}
}

/* ===========================================================
   v10 — pack-style size options
   =========================================================== */
.sz__n{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sz__ct{font-style:normal;font-size:12px;font-weight:800;letter-spacing:-.01em;
  background:var(--ice);color:var(--navy);padding:5px 11px;border-radius:100px}
.sz.on .sz__ct{background:rgba(255,255,255,.18);color:#fff}

/* ===== v11 — burger icon fix ===== */
.hicon.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;margin:0;
  transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ===== v11 — hide header on scroll down, reveal on scroll up ===== */
.hd{transition:transform .38s cubic-bezier(.2,.9,.3,1),padding .3s}
.hd.hide{transform:none}
@media(prefers-reduced-motion:reduce){.hd{transition:none}.hd.hide{transform:none}}

/* ===== v12 — 3-line burger ===== */
.hicon.burger{gap:4px}
.burger span{width:19px;height:2px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===========================================================
   v12 — desktop keeps the original solid header bar
   =========================================================== */
/* Desktop keeps the floating glass pills too — the old solid-bar
   override here was flattening them (background:none, radius:0,
   backdrop-filter:none), so the glass never appeared above 1040px. */
@media(min-width:1041px){
  .hd__in{gap:24px}
  .hpill--nav{gap:2px}
  .hpill--act{gap:6px}
  .hicon{background:rgba(255,255,255,.28)}
  .hicon:hover{background:rgba(255,255,255,.6)}
  .hdot{border-color:#fff}
  .hd:not(.hd--minimal) .burger,.hd:not(.hd--minimal) .hmenu{display:none!important}
}

/* ===========================================================
   v13 — CTA card overlapping the footer
   =========================================================== */
.finalcta{position:relative;z-index:3;padding-bottom:0}
.finalcta .imgband{box-shadow:0 44px 90px -54px rgba(0,0,0,.85)}

.ft--overlap{position:relative;z-index:1;
  margin-top:clamp(-150px,-11vw,-96px);
  padding-top:clamp(150px,13vw,230px)}

/* footer layout to match the reference */
.ft__g{grid-template-columns:1.9fr 1fr 1fr 1fr;gap:40px 32px}
.ft__brand .mark{display:inline-flex;align-items:center;gap:9px;font-size:18px;letter-spacing:-.05em}
.ft__addr{color:rgba(240,245,243,.55);font-size:14px;line-height:1.65;margin-top:16px;max-width:26ch}
.ft__contact{display:flex;gap:44px;flex-wrap:wrap;margin-top:26px}
.ft__contact h4{font-size:12px;font-weight:700;color:rgba(240,245,243,.4);margin-bottom:7px;letter-spacing:0}
.ft__contact a{font-size:14.5px;color:rgba(240,245,243,.85)}
.ft__contact a:hover{color:#fff}
.ft h4{font-size:13.5px;font-weight:800;color:rgba(240,245,243,.42);margin-bottom:18px;letter-spacing:-.01em}
.ft ul{gap:12px;font-size:14.5px}
.ft__bottom{margin-top:56px;padding-top:26px;border-top:1px solid rgba(240,245,243,.12);
  text-align:center;font-size:13px;color:rgba(240,245,243,.45)}
.dis{margin-top:20px;padding-top:0;border-top:0;text-align:center;margin-inline:auto}

@media(max-width:900px){
  .ft__g{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:1/-1}
}
@media(max-width:560px){
  .ft--overlap{margin-top:-70px;padding-top:120px}
}

/* ===========================================================
   v14 — simple footer with oversized wordmark
   =========================================================== */
.ft--overlap{padding-bottom:0;overflow:hidden}
.ft__g,.ft__bottom,.ft__brand,.ft__addr,.ft__contact{all:unset}

.ftop{display:grid;grid-template-columns:1.15fr .7fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.ftop__col h4{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,245,243,.42);margin-bottom:16px}
.ftop .mark{display:block;font-size:18px;letter-spacing:-.05em;color:#fff;margin-bottom:14px}
.ftop__note{font-size:14px;color:rgba(240,245,243,.5);line-height:1.6;max-width:28ch}

.flinks{display:grid;gap:12px;justify-items:start}
.flinks a{font-size:15px;font-weight:600;color:rgba(240,245,243,.72);transition:color .2s}
.flinks a:hover{color:#fff}

.fnews{width:100%;max-width:none}
.fnews p{font-size:14px;color:rgba(240,245,243,.5);margin:0 0 14px;line-height:1.55;max-width:34ch}
.fform{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);border-radius:100px;padding:6px 6px 6px 20px;width:100%}
.fform input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:500;padding:11px 0}
.fform input::placeholder{color:rgba(240,245,243,.42)}
.fform button{width:40px;height:40px;border-radius:100px;background:var(--blue);color:#fff;
  display:grid;place-items:center;flex:none;transition:background .2s,transform .2s}
.fform button:hover{background:#fff;color:var(--deep);transform:translateX(2px)}
.fform svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* payment icons — plain small logo marks, no box */
.fpay{border-top:1px solid rgba(240,245,243,.12);padding:26px 0 34px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.paytile{
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.paytile svg{height:13px;width:auto;display:block}
.paytile--mc svg{height:18px}
.paytile--pp svg{height:15px}

/* the footer sits on a dark background — Apple Pay's black mark needs
   to flip to white there, everything else already reads fine on dark */
.fpay .paytile--apple svg *{fill:#fff}
.fpay .paytile--klarna svg text,
.fpay .paytile--sofort svg text{fill:#fff}
.fpay .paytile--amex svg text{fill:#6FA8DC}
.fpay .paytile--visa svg text{fill:#8FA8F0}

/* the soft gradient card used around the row on the product page + cart */
.paycard{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-radius:18px;
  background:linear-gradient(135deg,rgba(122,90,248,.14),rgba(255,255,255,.9) 55%);
  border:1px solid rgba(122,90,248,.14);
}

@media(max-width:900px){
  .ftop{grid-template-columns:1fr;gap:32px}
  .ftop__note{max-width:none}
}

/* ===== footer logotype lockup ===== */
.fmark{position:relative;width:100%;overflow:hidden;
  margin:clamp(46px,6vw,84px) 0 clamp(26px,3vw,44px);
  padding-bottom:clamp(20px,2.4vw,34px);
  -webkit-user-select:none;user-select:none;text-align:center}

.fmark__w{display:block;white-space:nowrap;line-height:.86;
  font-family:var(--f);font-weight:800;letter-spacing:-.055em;
  font-size:clamp(52px,16.4vw,250px)}
.fmark__w b{font-weight:800;color:#F3F7F5}
.fmark__w i{font-style:normal;color:transparent;
  -webkit-text-stroke:clamp(1.4px,.32vw,4px) #F3F7F5}
.fmark__w sup{font-size:.13em;font-weight:700;color:rgba(239,237,230,.55);
  vertical-align:super;letter-spacing:0;margin-left:.06em}

/* smoother card corners */
.imgband{border-radius:clamp(22px,3.2vw,46px)}
.imgband img,.imgband__scrim{border-radius:inherit}
.finalcta .imgband{box-shadow:0 48px 96px -56px rgba(0,0,0,.9)}

/* ===========================================================
   CLOUDSENSE — new components
   =========================================================== */
:root{ --bad:#B6B9BF; --good:#315C4E; }

/* ---- versus cards ---- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);margin-top:clamp(34px,4vw,54px)}
.vscol{border-radius:var(--r-xl);padding:clamp(24px,3vw,38px)}
.vscol--us{background:linear-gradient(180deg,#F2F7F5,#EBF2EF);box-shadow:0 26px 60px -40px rgba(49,92,78,.9)}
.vscol--them{background:#F5F5F5}
.vscol__top{text-align:center;margin-bottom:clamp(18px,2.4vw,30px)}
.vscol__top img{height:clamp(120px,15vw,190px);width:auto;margin:0 auto 16px;object-fit:contain;mix-blend-mode:multiply}
.vscol__name{font-size:clamp(17px,1.8vw,21px);font-weight:800;letter-spacing:-.03em}
.vscol--them .vscol__name{color:var(--mute)}
.vsrow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 0;border-top:1px solid rgba(22,27,34,.08)}
.vsrow:first-of-type{border-top:0}
.vsico{width:24px;height:24px;flex:none;margin-top:2px}
.vsico svg{width:100%;height:100%;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vscol--us .vsico svg{stroke:var(--good)}
.vscol--them .vsico svg{stroke:var(--bad)}
.vsrow b{display:block;font-size:clamp(15.5px,1.6vw,19px);font-weight:800;letter-spacing:-.03em;line-height:1.25}
.vscol--them .vsrow b{color:#5C5F63}
.vsrow span{display:block;font-size:14.5px;color:var(--mute);margin-top:3px}
@media(max-width:760px){.vs{grid-template-columns:1fr}}

/* ---- ingredient list over image ---- */
.ing{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.ing__img{border-radius:var(--r-xl);overflow:hidden}
.inglist{display:grid;gap:12px;margin-top:28px}
.ingitem{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.ingitem:hover{transform:translateX(4px);border-color:var(--navy);box-shadow:var(--sh-sm)}
.ingdot{width:44px;height:44px;border-radius:100px;background:var(--ice);display:grid;place-items:center;
  font-size:19px;flex:none}
.ingitem b{display:block;font-size:16px;font-weight:800;letter-spacing:-.03em}
.ingitem span{display:block;font-size:14px;color:var(--mute);margin-top:2px}
@media(max-width:960px){.ing{grid-template-columns:1fr}}

/* ---- free-from list ---- */
.freeband{background:var(--deep);border-radius:var(--r-xl);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;color:#fff;position:relative}
.freeband__c{padding:clamp(28px,4vw,62px)}
.freeband h2{font-size:clamp(34px,5vw,62px);line-height:.98;margin-bottom:26px;color:#fff}
.freelist{list-style:none;display:grid;gap:14px}
.freelist li{display:flex;gap:14px;align-items:center;font-size:clamp(16px,1.6vw,19px);font-weight:600}
.freelist svg{width:20px;height:20px;flex:none;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round}
.freeband__i{height:100%;min-height:clamp(300px,38vw,520px)}
.freeband__i img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.freeband{grid-template-columns:1fr}.freeband__i{order:-1;min-height:300px}}

/* ---- results ---- */
.results{border-radius:var(--r-xl);overflow:hidden;background:var(--cloud)}
.results img{width:100%;display:block}

/* ===========================================================
   VERSUS CARD IMAGES
   =========================================================== */
.vscol__top img{
  height:auto;width:100%;max-width:clamp(140px,17vw,210px);
  aspect-ratio:4/5;object-fit:cover;object-position:center;
  border-radius:18px;mix-blend-mode:normal;margin:0 auto 18px;
}

/* ===========================================================
   MOBILE REFINEMENTS
   =========================================================== */

/* stop anything from pushing the page sideways */
html,body{max-width:100%}
img,svg,video{max-width:100%}
.wrap{width:100%}

/* mask reveal was clipping descenders */
.am{padding-bottom:.09em;margin-bottom:-.09em}

@media(max-width:1000px){
  .hero__img{margin-inline:auto}
  .split__i,.ing__img{margin-inline:auto}
}

@media(max-width:860px){
  .freeband__i{min-height:clamp(240px,60vw,340px)}
  .freeband__i img{object-position:center 35%}
}

@media(max-width:760px){
  /* versus stacks — keep the two cards visually distinct */
  .vscol{padding:22px 20px 8px}
  .vscol__top img{max-width:150px;margin-bottom:14px}
  .vscol__name{font-size:18px}
  .vsrow{padding:14px 0;gap:12px}
  .vsrow b{font-size:16px}
  .vsrow span{font-size:14px}
  .vsico{width:21px;height:21px}
}

@media(max-width:680px){
  :root{--gap:clamp(48px,11vw,72px)}

  /* announcement bar */
  .ann{padding:9px 0}
  .ann__i{font-size:13.5px;padding:0 16px}

  /* header pills */
  .hd__in{gap:8px}
  .hpill--logo{padding:10px 16px}
  .hpill--logo .mark{font-size:15px}
  .hpill--act{padding:6px 6px 6px 6px;gap:4px}
  .hpill--act .btn{padding:11px 16px;font-size:13.5px}
  .hicon{width:38px;height:38px}
  .hicon svg{width:18px;height:18px}
  .hdot{min-width:16px;height:16px;font-size:9.5px;top:4px;right:4px}

  /* type */
  h1{font-size:clamp(30px,8.6vw,40px)}
  h2{font-size:clamp(25px,7vw,34px)}
  .lede{font-size:16px}

  /* hero */
  .hero__pill{left:12px;bottom:12px;padding:11px 14px}
  .hero__pill b{font-size:19px}
  .hero__pill span{font-size:11.5px}
  .hero__act{gap:10px}
  .hero__act .btn{width:100%;justify-content:center}

  /* gallery */
  .gal__t{gap:7px}
  .gt{border-radius:11px}
  .gal__badge{font-size:11.5px;padding:7px 13px;top:12px;left:12px}

  /* pack selector — price drops under the name on narrow screens */
  .sz{grid-template-columns:auto 1fr;padding:15px 16px;row-gap:10px}
  .sz > span:last-child{grid-column:2;display:flex;align-items:baseline;gap:10px}
  .sz__p,.sz__e{text-align:left}
  .sz__n{font-size:15.5px;gap:8px}
  .sz__ct{font-size:11px;padding:4px 9px}
  .sz__s{font-size:12.5px}
  .sz__flag{right:12px;font-size:10px;padding:3px 10px}

  /* add to cart */
  .qrow{gap:10px}
  .qty button{width:40px}
  .qty span{width:28px}
  .btn{font-size:15.5px;padding:16px 22px}
  .btn small{font-size:12.5px}
  .btn--wide{padding:19px}

  /* stat cards */
  .stat{padding:26px 22px 24px;border-radius:22px}
  .stat__v{font-size:clamp(38px,12vw,48px)}
  .stat__v u{font-size:.27em}
  .stat__k{margin-bottom:16px}

  /* image bands */
  .imgband{min-height:clamp(300px,86vw,400px);border-radius:22px}
  .imgband__c{padding:22px 20px 24px}
  .imgband__c h2{font-size:clamp(24px,7.4vw,32px)}
  .imgband__c p{font-size:15px}
  .imgband__scrim{background:linear-gradient(180deg,rgba(35,45,57,.12) 0%,rgba(35,45,57,.78) 58%,rgba(35,45,57,.94) 100%)}

  /* ingredients */
  .ingitem{padding:14px 15px;gap:13px}
  .ingdot{width:38px;height:38px;font-size:17px}
  .ingitem b{font-size:15px}
  .ingitem span{font-size:13.5px}

  /* free-from band */
  .freeband{border-radius:22px}
  .freeband__c{padding:26px 22px 30px}
  .freeband h2{font-size:clamp(32px,10vw,44px);margin-bottom:20px}
  .freelist li{font-size:16px;gap:12px}

  /* problem carousel */
  .pv{gap:22px}
  .pv__media{min-height:0;padding:8px 0 54px;max-width:none}
  .pvc--a{width:64%;left:0;top:0}
  .pvc--b{width:56%;right:0;bottom:0}
  .pvc{border-radius:16px;box-shadow:0 20px 40px -28px rgba(22,27,34,.6)}
  .pvc__q{padding:14px;font-size:14px}
  .pvlab{font-size:14px;gap:4px}
  .pvlab svg{width:30px}
  .pvlab--a{top:4px;right:0}
  .pvlab--b{bottom:8px;left:0}
  .pv__copy h3{font-size:clamp(23px,6.6vw,30px)}
  .pvfix{padding:16px 18px;border-radius:14px}
  .pvfix span{font-size:14.5px}
  .pvnav button{width:44px}
  .pvnav svg{width:28px}
  .pv__copy .btn{width:100%;justify-content:center}
  .slycost{padding:20px 20px;border-radius:20px;gap:14px}
  .slycost p{font-size:14.5px}
  .slycost .btn{width:100%;justify-content:center}

  /* routine track */
  .tcard b{font-size:17px}
  .tcard span{font-size:14.5px}
  .tstep{padding-bottom:28px}

  /* reviews */
  .tpbar{padding:22px 20px;border-radius:22px;gap:22px}
  .tpbar__score b{font-size:44px}
  .tpbar__rows{max-width:none}
  .tprow u{width:46px;font-size:11px}
  .tpcard{padding:22px 20px}
  .tpcard h3,.tpcard h4{font-size:16px}
  .tpcard p{font-size:14.5px}
  .tpgrid{gap:12px}
  .tpfoot{font-size:13px;gap:8px}

  /* facebook deck */
  .fb{padding:14px 16px}
  .fb__txt{font-size:14px}
  .fb__av{width:36px;height:36px;font-size:13px}
  .fb__acts{gap:14px;font-size:12.5px}

  /* video rail */

  /* guarantee */
  .darkcard{border-radius:22px;padding:26px 22px 30px}
  .seal{width:112px;height:112px}
  .gua{gap:20px}

  /* faq */
  .ac__b{padding:18px 18px;font-size:15.5px}
  .ac__p .in{padding:0 18px 20px;font-size:14.5px}

  /* footer */
  .ft--overlap{margin-top:-58px;padding-top:100px}
  .ftop{gap:26px}
  .fmark{margin:30px 0 20px}
  .fmark__w{font-size:15vw;letter-spacing:-.05em}
  .fpay{gap:12px;padding:20px 0 26px}
  .paytile svg{height:11px}
  .paytile--mc svg{height:15px}
}

@media(max-width:400px){
  .stat__v{font-size:36px}
  .sz__p{font-size:16.5px}
  .hpill--act .btn{padding:11px 13px;font-size:13px}
  .fmark__w{font-size:16vw}
  .imgband__c h2{font-size:23px}
}

/* landscape phones: keep the sticky gallery from eating the screen */
@media(max-height:520px) and (max-width:900px){
  .gal{position:static}
  .hd{position:relative}
}

/* ===========================================================
   IMAGE CARD PROPORTIONS — shorter, wider, less letterbox
   =========================================================== */

/* full-width photo bands were far too tall */
.imgband{min-height:clamp(280px,32vw,400px)}
.finalcta .imgband{min-height:clamp(300px,34vw,420px)}

/* the square results image was rendering a full-width square block */
.results{max-width:760px;margin-inline:auto}

/* keep square art from becoming a giant block inside split layouts */
.split__i img,.ing__img img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}
.split__i,.ing__img{max-width:560px}

@media(max-width:1000px){
  .split__i,.ing__img,.results{max-width:520px;margin-inline:auto}
}

@media(max-width:680px){
  .imgband,.finalcta .imgband{min-height:clamp(250px,62vw,330px)}
  .split__i,.ing__img,.results{max-width:none}
  /* stop tall square crops from dominating the scroll on phones */
  .split__i img,.ing__img img{aspect-ratio:5/4;height:auto;}
  .results img{aspect-ratio:auto;height:auto;}
}

/* ===========================================================
   FIXES — carousel containment, band ratios, results
   =========================================================== */

/* --- problem carousel: the media box now has real height, so the
       tilted cards can never escape and sit on top of the copy --- */
.pv{align-items:start}
.pv__media{
  position:relative;width:100%;max-width:560px;margin-inline:auto;
  aspect-ratio:1/1.02;min-height:0;padding:0;overflow:visible;
  isolation:isolate;
}
.pvc{position:absolute;aspect-ratio:4/5;height:auto}
.pvc--a{width:57%;top:0;left:0;transform:rotate(-6.5deg);z-index:2}
.pvc--b{width:55%;bottom:0;right:0;transform:rotate(5.5deg);z-index:3}
.pvlab{z-index:4}
.pvlab--a{top:6%;right:0}
.pvlab--b{bottom:2%;left:0}
.pv__copy{position:relative;z-index:5}

/* --- "Pure. Safe. Proven." band: fixed proportions, no baked-in text --- */
.freeband{align-items:stretch}
.freeband__i{min-height:0;height:100%;position:relative}
.freeband__i img{width:100%;height:100%;object-fit:cover;object-position:center}
.freeband__c{display:flex;flex-direction:column;justify-content:center}

/* --- results grid: readable proportions instead of a giant square --- */
.results{max-width:640px;margin-inline:auto;border-radius:var(--r-xl);overflow:hidden}
.results img{width:100%;height:auto;display:block;aspect-ratio:auto}

@media(max-width:1000px){
  .pv__media{aspect-ratio:1/1.06;max-width:480px}
}

@media(max-width:860px){
  .freeband__i{aspect-ratio:16/11;min-height:0;height:auto}
  .freeband__i img{object-position:center 40%}
}

@media(max-width:680px){
  .pv__media{aspect-ratio:1/1.12;max-width:none}
  .pvc--a{width:62%}
  .pvc--b{width:58%}
  .pvlab{font-size:13.5px}
  .pvlab svg{width:26px}
  .pvlab--a{top:2%}
  .results{max-width:none;border-radius:18px}
  .freeband__i{aspect-ratio:4/3}
}

/* ===========================================================
   FINAL IMAGE PASS — one rule per container, no guessing
   Photos are cropped (cover). Infographics are never cropped (contain).
   =========================================================== */

/* --- gallery: square thumbs, product always fully visible on the stage --- */
.gal__stage{aspect-ratio:1/1;background:var(--cloud);display:grid;place-items:center;padding:0}
.gal__stage img{width:100%;height:100%;object-fit:contain;background:var(--cloud)}
.gal__t{grid-template-columns:repeat(4,1fr);gap:8px}
.gt{aspect-ratio:1/1;overflow:hidden;display:block;padding:0}
.gt img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* --- hero image: square, cropped --- */
.hero__img img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;height:auto;}

/* --- split photo (how to use): portrait crop, never oversized --- */
.split__i{max-width:440px;margin-inline:auto;border-radius:var(--r-lg);overflow:hidden;background:var(--cloud)}
.split__i img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;display:block;height:auto;}

/* --- ingredient artwork: it is an infographic, so never crop it --- */
.ing__img{max-width:520px;margin-inline:auto;border-radius:var(--r-lg);overflow:hidden;background:var(--cloud)}
.ing__img img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}

/* --- before / after grid: also an infographic --- */
.results{max-width:520px;margin-inline:auto;border-radius:var(--r-lg);overflow:hidden;background:var(--cloud)}
.results img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}

/* --- versus cards --- */
.vscol__top img{width:100%;max-width:170px;aspect-ratio:4/5;object-fit:cover;border-radius:16px;margin:0 auto 16px;display:block;height:auto;}

/* --- free-from band --- */
.freeband__i img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* --- carousel cards --- */
.pvc img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* --- video rail --- */

/* ===========================================================
   CARD SIZING — consistent padding and radius everywhere
   =========================================================== */
.stat,.prob,.soft{border-radius:24px}
.tpcard,.ac,.ingitem{border-radius:20px}
.vscol{border-radius:26px}
.imgband,.darkcard,.freeband{border-radius:28px}
.tpbar{border-radius:26px}

@media(max-width:1000px){
  .split__i{max-width:400px}
  .ing__img,.results{max-width:460px}
}

@media(max-width:680px){
  .gal__t{gap:6px}
  .gt{border-radius:12px}
  .split__i{max-width:none;border-radius:20px}
  .split__i img{aspect-ratio:1/1;height:auto;}
  .ing__img,.results{max-width:none;border-radius:20px}
  .vscol__top img{max-width:132px;border-radius:14px}
  .stat,.prob,.soft{border-radius:20px}
  .imgband,.darkcard,.freeband,.tpbar,.vscol{border-radius:22px}
}

/* ===========================================================
   SWIPE — main product image + video rail
   =========================================================== */
.gal__stage{display:block;padding:0;overflow:hidden}
.gslides{
  display:flex;width:100%;height:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gslides::-webkit-scrollbar{display:none}
.gslide{flex:0 0 100%;height:100%;scroll-snap-align:center;background:var(--cloud)}
.gslide img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}

/* ===========================================================
   IN-STOCK GLASS PILL
   =========================================================== */
.opts__h{align-items:center;gap:14px}
.instock{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:13px;font-weight:700;
  padding:8px 15px;border-radius:100px;
  background:var(--navy);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
}
.opts__h .instock{color:#fff}
.instock i{width:7px;height:7px;border-radius:100px;background:#fff;flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.3);animation:pulseDot 2.4s ease-in-out infinite}

/* ===========================================================
   TRUSTPILOT MINI BADGE — matches the reference screenshot
   =========================================================== */
.tpmini{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0;border-radius:0;
  background:none;border:0;
  font-size:14.5px;
}
.tpmini__stars{display:inline-flex;gap:3px}
.tpmini__sq{
  position:relative;width:20px;height:20px;flex:none;display:block;
  background:#dcdce0;border-radius:0;overflow:hidden;
}
.tpmini__sq::before{
  content:'';position:absolute;inset:0 auto 0 0;width:var(--fill,0%);
  background:#00b67a;
}
.tpmini__star{position:absolute;inset:0;width:100%;height:100%;display:block;padding:4px;box-sizing:border-box}
.tpmini__star--off{display:none}
.tpmini__star--on{display:block;fill:#fff;z-index:1}
.tpmini__text{color:var(--ink);font-weight:600}
.tpmini__brand{
  display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;
}
.tpmini__brand svg{width:18px;height:18px;fill:#00b67a}
@media(max-width:400px){ .tpmini{font-size:13px;gap:8px} .tpmini__sq{width:18px;height:18px} }

@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.instock i{animation:none}}

/* trust lines: one line each */
.trust li{align-items:center;font-size:14.5px}
.trust li svg{margin-top:0}

/* ===========================================================
   VERSUS — stays side by side on mobile
   =========================================================== */
@media(max-width:760px){
  .vs{grid-template-columns:1fr 1fr;gap:10px}
  .vscol{padding:18px 14px 6px;border-radius:20px}
  .vscol__top{margin-bottom:14px}
  .vscol__top img{max-width:100%;width:100%;border-radius:12px;margin-bottom:10px}
  .vscol__name{font-size:15px}
  .vsrow{grid-template-columns:1fr;gap:6px;padding:12px 0}
  .vsico{width:19px;height:19px;margin-top:0}
  .vsrow b{font-size:14px;line-height:1.22}
  .vsrow span{font-size:12.5px;margin-top:2px;line-height:1.35}
}
@media(max-width:400px){
  .vs{gap:8px}
  .vscol{padding:14px 11px 4px}
  .vsrow b{font-size:13px}
  .vsrow span{font-size:11.5px}
  .vscol__name{font-size:14px}
}

/* ===== versus images: shorter, and the whole product stays visible ===== */
.vscol__top img{
  aspect-ratio:1/1;object-fit:contain;background:transparent;
  max-width:clamp(120px,14vw,168px);width:100%;
  border-radius:16px;margin:0 auto 14px;height:auto;}
@media(max-width:760px){
  .vscol__top img{aspect-ratio:1/1;max-width:112px;border-radius:12px;margin-bottom:10px;height:auto;}
}
@media(max-width:400px){
  .vscol__top img{max-width:92px}
}

/* ===========================================================
   VERSUS — shorter images, tighter text
   =========================================================== */
.vscol__top img{max-width:clamp(96px,10.5vw,132px);aspect-ratio:1/1;object-fit:contain;margin:0 auto 12px;height:auto;}
.vscol__name{font-size:clamp(15px,1.5vw,18px)}
.vsrow{padding:14px 0}
.vsrow b{font-size:clamp(14px,1.4vw,16.5px);line-height:1.24}
.vsrow span{font-size:clamp(12.5px,1.15vw,14px);margin-top:3px;line-height:1.4}
.vsico{width:20px;height:20px;margin-top:1px}
.vscol{padding:clamp(18px,2.2vw,28px) clamp(16px,2vw,26px) 10px}
@media(max-width:760px){
  .vscol__top img{max-width:86px;margin-bottom:9px}
  .vscol__name{font-size:14px}
  .vsrow b{font-size:13.5px}
  .vsrow span{font-size:12px}
}
@media(max-width:400px){
  .vscol__top img{max-width:70px}
  .vsrow b{font-size:12.5px}
  .vsrow span{font-size:11px}
}

/* ===========================================================
   BENEFIT CARDS — icon-style layout, scrollable on mobile
   =========================================================== */
.statshead{text-align:center;margin-bottom:clamp(24px,3vw,38px)}
.statshead h2{
  font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;color:var(--deep);line-height:1.2;
}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.stat{
  background:#F2F6F4;border:0;border-radius:18px;box-shadow:none;
  padding:clamp(26px,2.6vw,34px) clamp(18px,1.8vw,24px) clamp(24px,2.4vw,30px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .3s cubic-bezier(.2,.85,.3,1),box-shadow .3s;
}
.stat::after{display:none}
.stat:hover{transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(35,45,57,.5)}

.stat__v{
  order:1;display:flex;align-items:baseline;justify-content:center;gap:1px;
  font-size:clamp(40px,4.2vw,54px);font-weight:800;letter-spacing:-.055em;line-height:1;
  min-height:clamp(58px,6vw,74px);align-items:center;
  background:linear-gradient(150deg,var(--navy),var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat__v u{font-size:.34em;font-weight:800;letter-spacing:-.01em;-webkit-text-fill-color:var(--navy);align-self:flex-end;margin-bottom:.28em}
.stat__k{
  order:2;background:none;padding:0;border-radius:0;margin:14px 0 8px;
  font-size:clamp(12.5px,1.15vw,14px);font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--deep);
}
.stat__d{order:3;font-size:clamp(13.5px,1.15vw,14.5px);color:var(--mute);line-height:1.5;max-width:26ch}

@media(max-width:760px){
  .stats{
    display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:6px;margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
  }
  .stats::-webkit-scrollbar{display:none}
  .stat{flex:0 0 66%;scroll-snap-align:start;padding:24px 20px 26px}
  .stat__v{font-size:38px;min-height:52px}
  .stat__d{max-width:none}
}
@media(max-width:400px){
  .stat{flex:0 0 76%}
}

/* ===========================================================
   INGREDIENT CARDS
   =========================================================== */
.icards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.icard{
  background:#F2F6F4;border-radius:18px;
  padding:clamp(22px,2.2vw,30px) clamp(16px,1.8vw,24px) clamp(22px,2.2vw,28px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .3s cubic-bezier(.2,.85,.3,1),box-shadow .3s;
}
.icard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(35,45,57,.5)}

/* image slot — drop your own PNG in here */
.icard__img{
  width:100%;max-width:clamp(110px,12vw,150px);aspect-ratio:1/1;
  display:grid;place-items:center;margin:0 auto clamp(16px,1.8vw,22px);
  border-radius:14px;background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1.5px rgba(49,92,78,.28);
  overflow:hidden;
}
.icard__img span{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(49,92,78,.6);padding:0 8px;line-height:1.35;
}
.icard__img img{width:100%;height:100%;object-fit:contain;display:block}

/* When a real image is set, drop the white tile and the outline so a
   transparent PNG sits straight on the card colour. The placeholder box
   above keeps its styling so the empty state is still obvious. */
.icard__img--has{
  background:none;box-shadow:none;border-radius:0;overflow:visible;
}

.icard h3{
  font-size:clamp(13px,1.2vw,15px);font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--deep);margin-bottom:8px;line-height:1.25;
}
.icard p{font-size:clamp(13.5px,1.15vw,14.5px);color:var(--mute);line-height:1.5;max-width:26ch}


/* ===========================================================
   INGREDIENT CARDS — swipe on mobile, with breathing room at the start
   =========================================================== */
@media(max-width:900px){
  .icards{
    display:flex !important;grid-template-columns:none;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-padding-left:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    padding:2px 0 8px;
  }
  .icards::-webkit-scrollbar{display:none}
  .icard{flex:0 0 62%;scroll-snap-align:start;padding:22px 18px 24px}
  /* gap before the first card and after the last one */
  .icard:first-child{margin-left:var(--pad)}
  .icard:last-child{margin-right:var(--pad)}
  .icard__img{max-width:104px}
  .icard p{max-width:none}
}
@media(max-width:400px){ .icard{flex:0 0 72%} }

/* image showcase marquee — 4/5 tiles, capped so the band stays short */
.showcase__strip .stepslide{width:clamp(160px,18vw,224px);padding:9px 6px}
.showcase__strip .stepslide img{aspect-ratio:4/5;height:auto;border-radius:16px}
@media(max-width:680px){
  .showcase__strip .stepslide{width:clamp(140px,40vw,176px);padding:7px 5px}
  .showcase__strip .stepslide img{aspect-ratio:4/5;height:auto}
}



/* ===========================================================
   STEP SECTION — continuous leftward image marquee.
   This is the perpetual sliding motion the images always had —
   separate from the one-time scroll-into-view reveal, which some
   sections opt into via .rise-clip on the wrapper, not here.
   =========================================================== */
.stepshow{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--cloud);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.stepstrip{display:flex;width:max-content;animation:stepSlide 26s linear infinite}
.stepshow:hover .stepstrip{animation-play-state:paused}
.stepslide{flex:0 0 auto;width:clamp(180px,22vw,260px);padding:10px 5px}
.stepslide img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;
  display:block;border-radius:16px;box-shadow:0 16px 30px -22px rgba(22,27,34,.6);
}
@keyframes stepSlide{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media(prefers-reduced-motion:reduce){ .stepstrip{animation:none} }

/* feature list — replaces the numbered "how to wear" steps in the showcase */
.split__p{color:var(--mute);font-size:15.5px;line-height:1.6;margin:14px 0 4px;max-width:46ch}
.feats{list-style:none;display:grid;gap:18px;margin-top:26px}
.feats li{display:flex;gap:14px;align-items:flex-start}
.feats__ic{
  flex:none;width:30px;height:30px;border-radius:100px;display:grid;place-items:center;
  background:var(--ice);color:var(--navy);margin-top:1px;
}
.feats__ic svg{width:15px;height:15px}
.feats__t{display:flex;flex-direction:column;gap:3px}
.feats__t b{font-size:15.5px;letter-spacing:-.01em;color:var(--ink)}
.feats__t span{font-size:14px;color:var(--mute);line-height:1.5}


@media(max-width:680px){
  .stepslide{width:clamp(150px,44vw,200px);padding:8px 4px}
  .stepslide img{aspect-ratio:1/1;height:auto;border-radius:14px}
}

/* ===========================================================
   REVIEW PHOTOS — small thumbnails
   =========================================================== */
.tpcard{display:flex;flex-direction:column}
.tpcard__photos{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.tpthumb{
  width:68px;height:68px;flex:none;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;
  background:var(--ice);box-shadow:inset 0 0 0 1.25px rgba(49,92,78,.2);
  transition:transform .22s;
}
.tpthumb:hover{transform:scale(1.06)}
.tpthumb img{width:100%;height:100%;object-fit:cover;display:block}
.tpthumb svg{width:17px;height:17px;fill:none;stroke:rgba(49,92,78,.5);stroke-width:1.8}
.tpcard__who{margin-top:auto;padding-top:16px}

/* ===========================================================
   SUBSCRIPTION / ONE-TIME TOGGLE
   =========================================================== */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.pl{
  position:relative;text-align:left;background:#fff;
  border:2px solid var(--hair);border-radius:var(--r);
  padding:15px 17px;transition:border-color .2s,box-shadow .2s,background .2s;
}
.pl:hover{border-color:#448570}
.pl.on{border-color:var(--navy);background:var(--navy);color:#fff;
  box-shadow:0 16px 34px -26px rgba(49,92,78,.9)}
.pl b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.025em;line-height:1.25}
.pl span{display:block;font-size:12.5px;color:var(--mute);margin-top:3px}
.pl.on span{color:rgba(240,245,243,.78)}
.pl__save{
  position:absolute;top:-10px;right:14px;
  background:var(--navy);color:#fff;font-size:10.5px;font-weight:800;
  padding:3px 10px;border-radius:100px;letter-spacing:.02em;
}
.pl.on .pl__save{background:#fff;color:var(--navy)}

.subnote{
  display:flex;gap:9px;align-items:flex-start;margin-top:12px;
  background:var(--ice);border-radius:14px;padding:12px 15px;
  font-size:13px;color:var(--navy);font-weight:600;line-height:1.45;
}
.subnote svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--navy);stroke-width:2.2;fill:none}
.subnote.hide{display:none}

@media(max-width:680px){
  .plans{grid-template-columns:1fr;gap:8px}
  .pl__save{right:12px}
  .subnote{font-size:12.5px;padding:11px 13px}
}

/* ===========================================================
   SUBSCRIPTION TOGGLE — glass finish, badge no longer clipped
   =========================================================== */
.plans{margin-top:24px;overflow:visible;position:relative;z-index:1}

.pl{
  overflow:visible;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(246,249,247,.5));
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(49,92,78,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 24px -18px rgba(35,45,57,.4);
  transition:border-color .25s,box-shadow .25s,background .25s,transform .25s;
}
.pl:hover{
  border-color:rgba(49,92,78,.38);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 30px -20px rgba(35,45,57,.5);
}
.pl b{color:var(--ink)}
.pl span{color:var(--mute)}

.pl.on{
  background:linear-gradient(180deg,rgba(49,92,78,.94),rgba(45,80,69,.96));
  border-color:rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 18px 34px -20px rgba(49,92,78,.85);
  transform:none;
}
.pl.on b{color:#fff}
.pl.on span{color:rgba(255,255,255,.8)}

/* the save badge sits above the card and stays readable in both states */
.pl__save{
  top:-11px;right:14px;z-index:3;
  background:#fff;color:var(--navy);
  font-size:11px;font-weight:800;letter-spacing:.01em;
  padding:5px 12px;border-radius:100px;line-height:1;
  border:1px solid rgba(49,92,78,.18);
  box-shadow:0 6px 14px -8px rgba(35,45,57,.5);
}
.pl.on .pl__save{
  background:#fff;color:var(--navy);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 8px 18px -8px rgba(35,45,57,.6);
}

/* matching glass note */
.subnote{
  background:linear-gradient(180deg,rgba(240,245,243,.8),rgba(240,245,243,.5));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(49,92,78,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

@media(max-width:680px){
  .plans{margin-top:22px}
  .pl__save{right:12px;font-size:10.5px;padding:4px 10px}
}

/* ===== facebook avatars: real photos ===== */
.fb__av{overflow:hidden;padding:0}
.fb__av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:100px}

/* ===========================================================
   TIKTOK COMMENT CARD
   =========================================================== */
.tk{background:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
.tk__head{display:flex;align-items:center;gap:8px;margin-bottom:14px;
  font-size:13px;font-weight:700;color:var(--mute)}
.tk__head b{color:#161823}
.tk__head svg{width:15px;height:15px;flex:none}
.tk__row{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:flex-start}
.tk__av{width:38px;height:38px;border-radius:100px;overflow:hidden;flex:none;
  background:var(--ice);display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--navy)}
.tk__av img{width:100%;height:100%;object-fit:cover;display:block}
.tk__user{display:block;font-size:13px;font-weight:600;color:#8a8b91;line-height:1.2}
.tk__txt{font-size:14.5px;color:#161823;margin:4px 0 0;line-height:1.45}
.tk__meta{display:flex;gap:14px;margin-top:7px;font-size:12.5px;color:#8a8b91;font-weight:600}
.tk__like{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11.5px;color:#8a8b91;font-weight:600;padding-top:3px}
.tk__like svg{width:17px;height:17px;fill:#FE2C55}
.tk__reply{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:flex-start;padding-left:28px}
.tk__reply .tk__av{width:30px;height:30px;font-size:11px}
.tk__reply .tk__txt{font-size:13.5px}

/* ===== free gift tag on the bigger packs ===== */
.sz__gift{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-size:11.5px;font-weight:800;letter-spacing:-.01em;
  color:#0F7A4A;background:rgba(18,160,95,.1);
  padding:4px 10px;border-radius:100px;
}
.sz__gift svg{width:12px;height:12px;stroke:#0F7A4A;stroke-width:2;fill:none}
.sz.on .sz__gift{background:rgba(18,160,95,.16)}

/* ===========================================================
   FREE GIFT — named, with the product shown
   =========================================================== */
.sz__gift{
  display:flex;align-items:center;gap:9px;margin-top:9px;padding:7px 12px 7px 7px;
  background:rgba(18,160,95,.09);border-radius:100px;width:fit-content;
  font-size:12px;font-weight:800;color:#0F7A4A;letter-spacing:-.01em;line-height:1.25;
}
.sz__gift img{width:26px;height:26px;object-fit:contain;flex:none;
  background:#fff;border-radius:100px;padding:2px}
.sz__gift em{font-style:normal;display:block;font-weight:700;color:#3E7A5F;font-size:11px;margin-top:1px}
.sz.on .sz__gift{background:rgba(255,255,255,.18);color:#EAFBF2}
.sz.on .sz__gift em{color:rgba(234,251,242,.75)}
.sz__gift svg{display:none}

/* ===========================================================
   SOCIAL DECK — swipeable + auto advancing, tiktok in the header
   =========================================================== */
.fbhead{gap:10px;flex-wrap:wrap}
.fbhead .logos{display:inline-flex;align-items:center;gap:7px}
.fbhead .logos svg{width:16px;height:16px;display:block}

.fbdeck{border-radius:16px}
.fbdeck__track{
  display:flex;gap:12px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;transform:none !important;
}
.fbdeck__track::-webkit-scrollbar{display:none}
.fbdeck__track>.fb{flex:0 0 100%;border-radius:16px}

/* facebook cards keep reactions, drop the reply row */
.fb__acts{display:none}
.fb__bar{justify-content:flex-start}

/* ===========================================================
   PACK ROWS — gift sits in its own attached box underneath
   =========================================================== */
.sz{display:block;padding:0;overflow:hidden;text-align:left}
.sz__main{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:17px 20px;
}
.sz__info{min-width:0}
.sz__n{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-weight:800;font-size:16.5px;letter-spacing:-.03em;line-height:1.2}
.sz__ct{font-style:normal;font-size:11.5px;font-weight:800;background:var(--ice);color:var(--navy);
  padding:4px 10px;border-radius:100px;white-space:nowrap}
.sz.on .sz__ct{background:rgba(255,255,255,.18);color:#fff}
.sz__s{display:block;font-size:13px;color:var(--mute);margin-top:4px;line-height:1.35}
.sz.on .sz__s{color:rgba(240,245,243,.72)}
.sz__price{text-align:right;white-space:nowrap}
.sz__p{display:block;font-weight:800;font-size:18px;letter-spacing:-.04em}
.sz__e{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.sz.on .sz__e{color:rgba(240,245,243,.65)}

/* the attached gift strip */
.sz__gift{
  display:flex;align-items:center;gap:12px;width:auto;margin:0;
  padding:11px 20px;border-radius:0;
  background:linear-gradient(180deg,rgba(18,160,95,.10),rgba(18,160,95,.07));
  border-top:1px dashed rgba(18,160,95,.35);
}
.sz__gift img{width:34px;height:34px;object-fit:contain;flex:none;
  background:#fff;border-radius:9px;padding:3px}
.sz__gift__t b{display:block;font-size:12.5px;font-weight:800;color:#0F7A4A;letter-spacing:-.01em;line-height:1.2}
.sz__gift__t em{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:#3E7A5F;margin-top:2px}
.sz.on .sz__gift{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.10));
  border-top-color:rgba(255,255,255,.32);
}
.sz.on .sz__gift__t b{color:#fff}
.sz.on .sz__gift__t em{color:rgba(255,255,255,.75)}

@media(max-width:680px){
  .sz__main{grid-template-columns:auto 1fr;gap:12px;padding:15px 16px}
  .sz__price{grid-column:2;text-align:left;margin-top:8px;display:flex;align-items:baseline;gap:10px}
  .sz__p{font-size:17px}
  .sz__e{margin-top:0}
  .sz__gift{padding:10px 16px;gap:10px}
  .sz__gift img{width:30px;height:30px}
}

/* ===========================================================
   SOCIAL DECK — no dead space
   =========================================================== */
.fbdeck__track{align-items:flex-start}
.fb{padding:15px 17px}
.fb__txt{font-size:14px;line-height:1.5}
.fb__bar{margin-top:10px;padding-top:9px}
.fbnav{margin-top:8px}
.fbarrows button{width:32px;height:32px}
.tk{padding:15px 17px}
.tk__head{margin-bottom:11px;font-size:12.5px}
.tk__txt{font-size:14px}
.tk__reply{margin-top:11px;padding-top:10px;padding-left:22px}

/* ===== PRODUCT PAGE ===== */

/* ===== product page ===== */
.buy{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:start;
  padding-block:clamp(24px,3vw,44px) clamp(20px,2.4vw,32px)}
.gal{position:sticky;top:92px}
.gal__stage{border-radius:var(--r-lg);overflow:hidden;background:var(--cloud);aspect-ratio:1;position:relative}
.gal__stage img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.gal__badge{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-radius:100px;padding:9px 16px;font-size:12.5px;font-weight:700;color:var(--navy)}
/* solid bestseller badge — reads as a claim, not a variant label */
.gal__badge--hot{
  background:linear-gradient(155deg,rgba(255,255,255,.6),rgba(255,255,255,.32) 55%,rgba(45,89,75,.55));
  color:#fff;letter-spacing:-.01em;
  border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(45,89,75,.3),
             0 12px 26px -14px rgba(45,89,75,.75);
  display:inline-flex;align-items:center;gap:6px;
  transition:opacity .22s ease,transform .22s ease;
  text-shadow:0 1px 4px rgba(40,79,62,.55);
}
.gal__badge--hot.is-hidden{opacity:0;transform:translateY(-6px) scale(.92);pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gal__badge--hot{background:linear-gradient(135deg,var(--navy),var(--navy-2))}
}
.gal__flame{
  position:relative;display:inline-block;width:22px;height:22px;flex:none;
  perspective:70px;transform-style:preserve-3d;
}
.gal__flame::before{
  content:'';position:absolute;inset:-6px;border-radius:100px;
  background:radial-gradient(circle,rgba(50,98,82,.85) 0%,rgba(43,86,72,.35) 45%,transparent 72%);
  filter:blur(3px);animation:flameGlow 1.1s ease-in-out infinite;
}
.gal__flame svg{position:relative;width:100%;height:100%;display:block;transform-style:preserve-3d;
  transform-origin:50% 88%;
  animation:flame3d 0.9s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(43,79,67,.6));
}
.gal__flame__o{fill:#FFD24A;animation:flameHueO 0.9s ease-in-out infinite}
.gal__flame__i{fill:#FF5A1F;animation:flameHueI 0.9s ease-in-out infinite}
@keyframes flameGlow{
  0%,100%{opacity:.65;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.18)}
}
@keyframes flame3d{
  0%,100%{transform:rotateY(0deg) rotateX(0deg) scaleY(1) scaleX(1)}
  18%{transform:rotateY(20deg) rotateX(-9deg) scaleY(1.16) scaleX(.88)}
  40%{transform:rotateY(-16deg) rotateX(6deg) scaleY(.86) scaleX(1.12)}
  62%{transform:rotateY(14deg) rotateX(-5deg) scaleY(1.2) scaleX(.9)}
  84%{transform:rotateY(-10deg) rotateX(4deg) scaleY(.92) scaleX(1.06)}
}
@keyframes flameHueO{0%,100%{fill:#FFD24A}50%{fill:#FFE9A8}}
@keyframes flameHueI{0%,100%{fill:#FF5A1F}50%{fill:#FF8A3D}}
@media(prefers-reduced-motion:reduce){ .gal__flame svg,.gal__flame::before{animation:none} }
.gal__t{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.gt{border-radius:14px;overflow:hidden;background:var(--cloud);border:2.5px solid #000;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,border-color .2s}
.gt.on{border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}

.pi__rate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--mute)}
.pi h1{font-size:clamp(32px,4vw,50px);margin:14px 0 16px}
.pi__sub{font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.02em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font-size:12.5px;font-weight:700;color:var(--navy);background:var(--ice);padding:8px 14px;border-radius:100px}

.opts{margin-top:32px}
.opts__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.opts__h b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.opts__h span{font-size:13px;font-weight:600;color:#12A05F}
.szs{display:grid;gap:10px}
.sz{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;
  border:2px solid var(--hair);border-radius:var(--r);padding:17px 20px;background:#fff;position:relative;
  transition:border-color .2s,box-shadow .2s}
.sz:hover{border-color:#448570}
.sz.on{border-color:var(--navy);box-shadow:0 16px 34px -26px rgba(49,92,78,.9)}
.rad{width:20px;height:20px;flex:none;border-radius:100px;border:2px solid var(--hair);display:grid;place-items:center}
.sz.on .rad{border-color:var(--navy)}
.sz.on .rad::after{content:"";width:10px;height:10px;border-radius:100px;background:var(--navy)}
.sz__n{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:800;font-size:16.5px;letter-spacing:-.03em}
.sz__ct{font-style:normal;font-size:12px;font-weight:800;background:var(--ice);color:var(--navy);padding:5px 11px;border-radius:100px}
.sz.on .sz__ct{background:rgba(49,92,78,.12)}
.sz__s{font-size:13.5px;color:var(--mute);margin-top:3px}
.sz__p{font-weight:800;font-size:18px;letter-spacing:-.04em;display:block;text-align:right}
.sz__e{font-size:12px;color:var(--mute);margin-top:2px;display:block;text-align:right}
.sz__flag{position:absolute;top:-11px;right:18px;background:var(--navy);color:#fff;
  font-size:11px;font-weight:800;padding:4px 12px;border-radius:100px}

.qrow{display:flex;gap:12px;margin-top:22px}
.qty{display:flex;align-items:center;border:2px solid var(--hair);border-radius:100px}
.qty button{width:46px;height:100%;font-size:19px;color:var(--mute);border-radius:100px}
.qty button:hover{color:var(--ink)}
.qty span{width:34px;text-align:center;font-weight:800;font-size:15px}
.qrow .btn{flex:1}

.tot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--hair)}
.tot__l{font-size:14px;font-weight:700;color:var(--mute)}
.tot b{font-size:28px;font-weight:800;letter-spacing:-.05em}
.tot s{color:var(--mute);font-size:16px;font-weight:600;margin-left:9px}

.trust{list-style:none;display:grid;gap:11px;margin-top:22px;font-size:14px;color:var(--mute)}
.trust li{display:flex;gap:11px;align-items:flex-start}
.trust svg{width:16px;height:16px;flex:none;margin-top:4px;color:#12A05F}
.trust__seal{width:19px!important;height:19px!important;margin-top:2px!important;color:var(--navy)!important}

.gua{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.seal{width:140px;height:140px;flex:none;perspective:900px}
.seal svg{
  width:100%;height:auto;display:block;filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
  transform-style:preserve-3d;animation:sealTilt3d 5s ease-in-out infinite;
  will-change:transform;
}
@keyframes sealTilt3d{
  0%,100%{transform:rotateY(0deg) rotateX(4deg)}
  25%{transform:rotateY(24deg) rotateX(-6deg)}
  50%{transform:rotateY(0deg) rotateX(4deg)}
  75%{transform:rotateY(-24deg) rotateX(-6deg)}
}
.seal:hover svg{animation-play-state:paused;transform:rotateY(18deg) rotateX(-8deg) scale(1.05)}
@media(prefers-reduced-motion:reduce){ .seal svg{animation:none} }
.seal .burst{fill:var(--blue)}
.seal .core{fill:#232D39}
.seal .curve{fill:#fff;font-weight:800;font-size:19px;letter-spacing:.19em}
.seal .big{fill:#fff;font-weight:800;font-size:52px;letter-spacing:-.05em}
.seal .sml{fill:#fff;font-weight:800;font-size:19px;letter-spacing:.22em}
.seal .hair{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.6}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);
  border-top:1px solid var(--hair);padding:12px var(--pad);display:flex;align-items:center;gap:14px;
  transform:translateY(115%);transition:transform .3s}
.dock.up{transform:none}
.dock img{width:46px;height:46px;object-fit:cover;border-radius:12px;flex:none;background:var(--cloud)}
.dock__t b{font-weight:800;font-size:15px;letter-spacing:-.03em;display:block;line-height:1.25}
.dock__t span{font-size:12.5px;color:var(--mute);font-weight:600}
.dock .btn{margin-left:auto;padding:15px 26px;font-size:16px}

@media(max-width:1000px){ .buy{grid-template-columns:1fr} .gal{position:static;max-width:500px;min-width:0} .pi{min-width:0} .gua{grid-template-columns:1fr;text-align:center;justify-items:center} }
.buy{min-width:0}
.buy>*{min-width:0}
@media(max-width:680px){ body{padding-bottom:78px} .dock img{display:none} }

/* ===== HOME PAGE ===== */

.hero{background:linear-gradient(180deg,var(--cloud),#fff 70%);padding-block:clamp(36px,5vw,72px) clamp(44px,5vw,80px)}
.hero__g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,68px);align-items:center}
.hero h1{margin:18px 0 20px}
.hero h1 .hl{color:var(--navy)}
.hero h1 .hl span{color:var(--navy)}
.hero__rate{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--mute);flex-wrap:wrap}
.hero__list{list-style:none;display:grid;gap:12px;margin:26px 0 30px}
.hero__list li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;font-weight:500}
.hero__act{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero__img{border-radius:var(--r-xl);overflow:hidden;position:relative;background:var(--cloud)}
.hero__pill{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh-sm)}
.hero__pill b{display:block;font-size:24px;font-weight:800;letter-spacing:-.05em;line-height:1}
.hero__pill span{font-size:12.5px;font-weight:600;color:var(--mute)}

.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.prob{background:var(--cloud);border-radius:var(--r-lg);padding:32px 28px}
.prob__n{display:inline-block;font-size:12px;font-weight:800;color:var(--navy);background:var(--ice);
  padding:6px 13px;border-radius:100px;margin-bottom:18px}
.prob h3{margin-bottom:10px}
.prob p{font-size:15px;color:var(--mute)}
.prob__v{display:block;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);
  font-size:32px;font-weight:800;letter-spacing:-.055em;color:var(--navy)}
.prob__v small{display:block;font-size:12.5px;font-weight:700;color:var(--mute);letter-spacing:-.01em;margin-top:4px}

.qs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.qsc{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px 26px}
.qsc p{font-size:15.5px;margin-top:12px}
.qsc cite{font-style:normal;display:block;margin-top:16px;font-size:13px;font-weight:700;color:var(--mute)}

@media(max-width:1000px){
  .hero__g{grid-template-columns:1fr}
  .hero__img{order:-1;max-width:480px}
  .probs,.qs{grid-template-columns:1fr}
}

/* ===========================================================
   PACK ROWS v3 — glassy bundle cards + tiered gift / discount bar
   Must stay at the END of this file: the "PRODUCT PAGE" block
   above re-declares .sz as a grid, which was breaking the strip
   into a stray 4th column. These rules win by source order.
   =========================================================== */
.szs{display:grid;gap:13px}

.sz{
  display:block;padding:0;text-align:left;overflow:visible;position:relative;
  border:1.5px solid rgba(49,92,78,.16);
  border-radius:var(--r);
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,249,247,.86)),
    linear-gradient(135deg,rgba(49,92,78,.10),rgba(49,92,78,0) 46%);
  background-clip:padding-box;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 10px 26px -20px rgba(50,63,79,.45);
  transition:border-color .22s,box-shadow .22s,transform .22s,background .22s;
}
/* glass sheen along the top edge */
.sz::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 38%);
  opacity:.7;
}
.sz:hover{
  border-color:rgba(49,92,78,.38);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 32px -22px rgba(50,63,79,.55);
}
.sz.on{
  border-color:var(--navy);
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,248,246,.9)),
    linear-gradient(135deg,rgba(49,92,78,.18),rgba(49,92,78,.02) 55%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 0 0 3.5px rgba(49,92,78,.13),
    0 20px 38px -26px rgba(44,78,67,.7);
}

/* top half: radio + name + price */
.sz__main{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:17px 20px;
}
.sz__info{min-width:0}
.sz__price{text-align:right;white-space:nowrap}
.sz__p{display:block;text-align:right;font-weight:800;font-size:18px;letter-spacing:-.04em}
.sz__e{display:block;text-align:right;font-size:11.5px;color:var(--mute);margin-top:2px}
.rad{background:rgba(255,255,255,.7)}

/* ---- the attached gift / discount bar ---- */
.sz__gift{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  width:auto;margin:0;padding:8px 15px;
  border:0;border-top:1px solid rgba(255,255,255,.28);
  border-radius:0 0 calc(var(--r) - 1.5px) calc(var(--r) - 1.5px);
  background:linear-gradient(135deg,#346857 0%,#315C4E 52%,#2D5045 100%);
  box-shadow:0 -1px 0 rgba(49,92,78,.25);
}
.sz__gift__ic{
  width:28px;height:28px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.96);border-radius:9px;overflow:hidden;
  box-shadow:0 2px 6px -2px rgba(20,25,32,.4);
}
.sz__gift__ic img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 18%;display:block;background:transparent}
.sz__gift__t{
  font-style:normal;font-weight:800;font-size:13px;letter-spacing:-.02em;
  line-height:1.25;color:#fff;
}
/* the "save 10%" pill on the top tier */
.sz__gift__d{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font-size:11.5px;font-weight:800;letter-spacing:-.01em;color:#fff;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.34);
  padding:4px 10px;border-radius:100px;white-space:nowrap;
}
.sz__gift__d--solo{margin-left:0}

/* keep the bar solid + readable in every state (an older block above
   re-tints .sz.on .sz__gift white, which washed the selected bar out) */
.sz .sz__gift,
.sz:hover .sz__gift,
.sz.on .sz__gift{
  background:linear-gradient(135deg,#346857 0%,#315C4E 52%,#2D5045 100%);
  border-top-color:rgba(255,255,255,.28);
}
.sz .sz__gift__t,.sz.on .sz__gift__t{color:#fff}
.sz.on .sz__gift__d{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34);color:#fff}
.sz .sz__gift>svg{display:none}

@media(max-width:680px){
  .sz__main{grid-template-columns:auto 1fr;gap:12px;padding:15px 16px}
  .sz__price{grid-column:2;text-align:left;margin-top:8px;display:flex;align-items:baseline;gap:10px}
  .sz__p{font-size:17px;text-align:left}
  .sz__e{margin-top:0;text-align:left}
  .sz__gift{padding:8px 13px;gap:8px}
  .sz__gift__ic{width:26px;height:26px;border-radius:8px}
  .sz__gift__t{font-size:12.5px}
  .sz__gift__d{font-size:11px;padding:3px 9px}
}

/* selected card is light now — undo the old dark-state text colours
   that were leaving the subtitle / pill / savings invisible */
.sz.on .sz__s{color:var(--mute)}
.sz.on .sz__e{color:var(--mute)}
.sz.on .sz__ct{background:var(--ice);color:var(--navy)}


/* ===========================================================
   VIDEO TESTIMONIALS — horizontal rail, video plays on the card
   Cards hold no <video> until tapped, so nothing preloads.
   =========================================================== */
.vt{--vtw:206px;--vtg:14px}
/* exactly three cards wide, centred in the section; the rest scroll in */
.vt__rail{
  display:flex;gap:var(--vtg);
  margin:38px auto 0;
  max-width:calc(var(--vtw) * 3 + var(--vtg) * 2);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:4px 0 14px;
  scrollbar-width:none;
}
.vt__rail::-webkit-scrollbar{display:none}
.vt__card{
  position:relative;flex:0 0 var(--vtw);
}

.vt__open{
  display:block;position:relative;width:100%;padding:0;overflow:hidden;
  aspect-ratio:9/16;border-radius:22px;background:var(--cloud);cursor:pointer;
  border:1px solid rgba(49,92,78,.14);
  box-shadow:none;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s;
}
.vt__open:hover{transform:translateY(-5px);box-shadow:0 24px 44px -26px rgba(43,54,69,.75)}
.vt__open:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.vt__card.playing .vt__open{transform:none}
.vt__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vt__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,45,57,.3) 0%,transparent 32%,rgba(26,33,42,.88) 100%);
}
.vt__brand{
  position:absolute;top:11px;left:11px;z-index:2;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,.65);
  border-radius:100px;padding:5px 12px;font-size:11px;font-weight:800;letter-spacing:-.02em;
  color:#000;
  box-shadow:none;
}
.vt__brand em{font-style:normal;color:var(--navy)}

/* the glassy play button */
.vt__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:100px;
  background:rgba(45,87,73,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.55);display:grid;place-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.15); 
  transition:transform .25s,background .25s;
}
.vt__open:hover .vt__play{transform:translate(-50%,-50%) scale(1.1);background:rgba(255,255,255,.34)}
.vt__play svg{width:17px;height:17px;fill:#fff;margin-left:3px;display:block}

.vt__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:13px;color:#fff;text-align:left}
.vt__q{display:block;font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.vt__who{
  display:flex;align-items:center;gap:7px;margin-top:7px;
  font-size:11.5px;color:rgba(255,255,255,.85);font-weight:600;
}
.vt__who u{
  text-decoration:none;width:22px;height:22px;border-radius:100px;
  background:rgba(255,255,255,.22);display:grid;place-items:center;
  font-weight:800;font-size:10.5px;flex:none;
}
.vt__vf{width:14px;height:14px;flex:none;fill:none;stroke:#6BE6A8;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- the video, mounted on the card at tap ---- */
.vt__v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#000;border-radius:22px;
  z-index:3;opacity:0;pointer-events:none;transition:opacity .2s;
}
.vt__card.playing .vt__v{opacity:1;pointer-events:auto}
/* once playing, the poster furniture gets out of the way */
.vt__card.playing .vt__scrim,
.vt__card.playing .vt__cap,
.vt__card.playing .vt__play,
.vt__card.playing .vt__brand,
.vt__card.playing .vt__thumb{opacity:0;pointer-events:none}
.vt__scrim,.vt__cap,.vt__play,.vt__brand,.vt__thumb{transition:opacity .2s}

/* buffering spinner over the card */
.vt__card.buffering .vt__open::after{
  content:"";position:absolute;top:50%;left:50%;margin:-19px 0 0 -19px;z-index:4;
  width:38px;height:38px;border-radius:100px;
  border:3px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:vtspin .8s linear infinite;pointer-events:none;
}
@keyframes vtspin{to{transform:rotate(360deg)}}

/* failed state */
.vt__fail{
  position:absolute;inset:0;z-index:5;display:none;
  align-content:center;justify-items:center;gap:10px;padding:20px;text-align:center;
  border-radius:22px;background:rgba(17,21,26,.9);color:#fff;
}
.vt__card.failed .vt__fail{display:grid}
.vt__fail b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.vt__fail button{
  padding:9px 18px;border-radius:100px;font-size:13px;font-weight:800;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
}
.vt__fail button:hover{background:rgba(255,255,255,.28)}

/* edge hint that there is more to scroll */
.vt{position:relative}

@media(max-width:760px){
  .vt__rail{gap:12px;max-width:none;padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1)}
  .vt__card{flex:0 0 50vw}
  .vt__cap{padding:12px}
  .vt__q{font-size:12.5px}
  .vt__who{font-size:11px;gap:6px;margin-top:6px}
  .vt__who u{width:20px;height:20px;font-size:9px}
}
@media(max-width:460px){
  .vt__card{flex:0 0 58vw}
}


/* ===========================================================
   VARIANT SELECTOR — sits above the quantity packs
   =========================================================== */
.vsel{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.vsel__b{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  padding:7px 16px 7px 7px;border-radius:100px;cursor:pointer;width:auto;
  background:rgba(255,255,255,.75);
  border:1.5px solid rgba(49,92,78,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s,background .2s,box-shadow .2s,transform .15s;
}
.vsel__sw{
  width:38px;height:38px;border-radius:100px;overflow:hidden;background:var(--cloud);
  flex:none;box-shadow:inset 0 0 0 1px rgba(22,27,34,.08);
}
.vsel__sw img{width:100%;height:100%;object-fit:cover;display:block}
.vsel__nm{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.vsel__b:hover{border-color:rgba(49,92,78,.45);transform:translateY(-1px)}
.vsel__b.on{
  border-color:var(--navy);background:var(--ice);
  box-shadow:0 0 0 3px rgba(49,92,78,.13);
}
.vsel__b.on .vsel__nm{color:var(--navy)}
.vsel__b:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* add-to-cart is full width now that the stepper is gone */
.qrow--solo{display:block}
.qrow--solo .btn{width:100%;padding:19px 30px;font-size:17px;border-radius:16px}


/* ===========================================================
   FACEBOOK CARD — matched to the TikTok card's size
   Both slides stretch to the tallest, so the deck stops
   jumping height as it advances.
   =========================================================== */
/* natural height per slide — stretching left dead grey space in the
   shorter Facebook cards */
.fbdeck__track{align-items:flex-start}
.fbdeck__track>.fb{
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:16px 17px;
  min-height:0;
}
.fbdeck__track>.fb .fb__txt{font-size:14px;line-height:1.5}
.fbdeck__track>.fb .fb__n{font-size:13.5px}
.fbdeck__track>.fb .fb__meta{font-size:11.5px}
.fbdeck__track>.fb .fb__av{width:36px;height:36px;font-size:14px}
.fbdeck__track>.fb .fb__top{margin-bottom:9px;gap:9px}
/* TikTok slide — trimmed so the whole card lands at the same footprint
   as a Facebook card, even with the extra reply row */
.fbdeck__track>.fb.tk{padding-bottom:16px}
.fbdeck__track>.fb.tk .tk__head{font-size:12.5px;margin-bottom:12px}
.fbdeck__track>.fb.tk .tk__av{width:36px;height:36px;font-size:14px}
.fbdeck__track>.fb.tk .tk__txt{font-size:13.5px;line-height:1.45}
.fbdeck__track>.fb.tk .tk__user{font-size:13px}
.fbdeck__track>.fb.tk .tk__meta{font-size:12px;margin-top:7px}
.fbdeck__track>.fb.tk .tk__like{font-size:12px}
.fbdeck__track>.fb.tk .tk__like svg{width:17px;height:17px}
.fbdeck__track>.fb.tk .tk__reply{margin-top:12px;padding-top:11px;padding-left:24px}
.fbdeck__track>.fb.tk .tk__reply .tk__av{width:24px;height:24px;font-size:10.5px}
.fbdeck__track>.fb.tk .tk__reply .tk__txt{font-size:12.5px;line-height:1.4}
.fbdeck__track>.fb.tk .tk__reply .tk__user{font-size:12px}
.fb__txt{flex:0 0 auto}
.fbdeck__track>.fb>.fb__bar{margin-top:12px}
.fb__acts{
  display:flex;gap:15px;font-size:12px;font-weight:700;color:#65676B;
}
@media(max-width:680px){
  .fbdeck__track>.fb{padding:14px 15px}
  .fbdeck__track>.fb .fb__txt{font-size:13.5px}
  .fb__acts{gap:14px;font-size:12px}
}

/* like-count and the Like/Reply/Share row were colliding */
.fbdeck__track>.fb>.fb__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}


/* ===========================================================
   COLLECTION PAGE
   =========================================================== */
.col{padding:clamp(34px,6vw,68px) 0 clamp(56px,8vw,96px)}
.col__head{max-width:660px}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mute);margin-bottom:18px}
.crumb a{color:var(--mute);text-decoration:none}
.crumb a:hover{color:var(--navy)}
.crumb span{color:var(--ink);font-weight:600}
.crumb svg{width:13px;height:13px;fill:none;stroke:var(--mute);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

.col__t{
  font-size:clamp(30px,5vw,50px);font-weight:800;letter-spacing:-.045em;line-height:1.06;
}
.col__d{margin-top:16px;color:var(--mute);font-size:clamp(15.5px,1.5vw,18px);line-height:1.55}
.col__d p{margin:0}

.col__trust{
  display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none;
}
.col__trust li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--navy);
  background:rgba(255,255,255,.7);border:1px solid rgba(49,92,78,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:7px 13px;border-radius:100px;
}
.col__trust svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--navy);
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* sort bar */
.col__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:clamp(26px,4vw,40px) 0 clamp(18px,2.5vw,26px);
  padding-bottom:16px;border-bottom:1px solid var(--hair);
}
.col__count{font-size:13.5px;font-weight:700;color:var(--mute)}
.sortf{display:flex;align-items:center;gap:10px}
.sortf__l{font-size:13.5px;font-weight:700;color:var(--mute)}
.sortf__w{position:relative;display:inline-flex;align-items:center}
.sortf__w select{
  appearance:none;-webkit-appearance:none;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;
  padding:10px 36px 10px 15px;border-radius:100px;
  background:rgba(255,255,255,.8);border:1.5px solid rgba(49,92,78,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s,box-shadow .2s;
}
.sortf__w select:hover{border-color:rgba(49,92,78,.45)}
.sortf__w select:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(49,92,78,.15)}
.sortf__w svg{
  position:absolute;right:13px;width:14px;height:14px;pointer-events:none;
  fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.sortf__go{
  padding:9px 15px;border-radius:100px;font-size:13px;font-weight:800;cursor:pointer;
  background:var(--navy);color:#fff;border:0;
}

/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.pc{position:relative;min-width:0}
.pc__link{display:block;text-decoration:none;color:inherit}
.pc__media{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:20px;background:var(--cloud);
  border:1px solid rgba(49,92,78,.12);
  box-shadow:0 12px 28px -24px rgba(43,54,69,.55);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.pc:hover .pc__media{
  transform:translateY(-6px);border-color:rgba(49,92,78,.32);
  box-shadow:0 26px 46px -28px rgba(43,54,69,.7);
}
.pc__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.3,1);
}
.pc:hover .pc__img{transform:scale(1.05)}
.pc__img--alt{opacity:0}
.pc:hover .pc__img--alt{opacity:1}
.pc__ph{position:absolute;inset:0;background:linear-gradient(140deg,var(--ice),var(--cloud))}

.pc__flags{position:absolute;top:11px;left:11px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pc__flag{
  font-size:11px;font-weight:800;letter-spacing:-.01em;padding:5px 11px;border-radius:100px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pc__flag--sale{background:var(--navy);color:#fff}
.pc__flag--out{background:rgba(22,27,34,.82);color:#fff}

.pc__body{display:block;padding:14px 4px 0}
.pc__v{display:block;font-size:11.5px;font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.pc__t{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15.5px;font-weight:700;letter-spacing:-.025em;
  line-height:1.32;color:var(--ink);
  /* two lines reserved so prices stay on one baseline across the row */
  min-height:calc(15.5px * 1.32 * 2);
}
.pc__p{display:flex;align-items:baseline;gap:8px;margin-top:7px}
.pc__p b{font-size:16px;font-weight:800;letter-spacing:-.03em}
.pc__p s{font-size:13px;color:var(--mute);text-decoration-thickness:1.5px}
.pc__cta{
  display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  font-size:13px;font-weight:800;color:var(--navy);
  opacity:0;transform:translateY(-3px);transition:opacity .25s,transform .25s;
}
.pc:hover .pc__cta,.pc__link:focus-visible .pc__cta{opacity:1;transform:none}
.pc__cta svg{width:13px;height:13px;fill:none;stroke:var(--navy);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.pc__link:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:22px}

/* pagination */
.pager{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,28px);
  margin-top:clamp(36px,5vw,56px);
}
.pager__a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:13.5px;font-weight:800;color:var(--navy);
  padding:11px 19px;border-radius:100px;
  background:rgba(255,255,255,.75);border:1.5px solid rgba(49,92,78,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s,background .2s;
}
.pager__a:hover{border-color:var(--navy);background:var(--ice)}
.pager__a.is-off{opacity:.35;pointer-events:none}
.pager__a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.pager__n{font-size:13.5px;font-weight:700;color:var(--mute)}

/* empty state */
.col__empty{
  text-align:center;padding:clamp(46px,8vw,84px) 24px;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,249,247,.85));
  border:1px solid rgba(49,92,78,.15);
}
.col__empty b{display:block;font-size:21px;font-weight:800;letter-spacing:-.03em}
.col__empty p{margin:10px auto 22px;max-width:44ch;color:var(--mute)}

@media(max-width:1000px){ .pgrid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pc__t{font-size:14.5px}
  .pc__cta{opacity:1;transform:none;font-size:12.5px}
  .col__bar{gap:12px}
  .sortf{width:100%;justify-content:space-between}
}
@media(max-width:420px){
  .pgrid{gap:12px}
  .pc__media{border-radius:16px}
}


/* ===========================================================
   CONTACT PAGE
   =========================================================== */
.ct{padding:clamp(34px,6vw,68px) 0 clamp(56px,8vw,96px)}
.ct__head{max-width:620px;margin-bottom:clamp(28px,4vw,44px)}
.ct__t{font-size:clamp(30px,5vw,50px);font-weight:800;letter-spacing:-.045em;
  line-height:1.06;margin-top:16px}
.ct__lede{margin-top:14px;max-width:52ch}

.ct__grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(18px,3vw,34px);align-items:start}

/* the form card */
.ct__card{
  padding:clamp(22px,3.2vw,36px);border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,249,247,.88)),
    linear-gradient(135deg,rgba(49,92,78,.1),rgba(49,92,78,0) 48%);
  border:1.5px solid rgba(49,92,78,.16);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 44px -34px rgba(50,63,79,.6);
}
.ct__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:block;margin-bottom:15px;min-width:0}
.fld label{
  display:block;font-size:13px;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:7px;
}
.fld label em{font-style:normal;font-weight:600;color:var(--mute);font-size:12px}
.fld input,.fld textarea,.fld select{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,.85);
  border:1.5px solid rgba(49,92,78,.18);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.fld textarea{resize:vertical;min-height:130px;line-height:1.55}
.fld input::placeholder,.fld textarea::placeholder{color:#A7ADB4}
.fld input:hover,.fld textarea:hover,.fld select:hover{border-color:rgba(49,92,78,.4)}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none;border-color:var(--navy);background:#fff;
  box-shadow:0 0 0 3.5px rgba(49,92,78,.14);
}
.fld__sel{position:relative;display:flex;align-items:center}
.fld__sel select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px}
.fld__sel svg{
  position:absolute;right:15px;width:15px;height:15px;pointer-events:none;
  fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.ct__send{width:100%;margin-top:6px}
.ct__fine{margin-top:13px;font-size:12.5px;color:var(--mute);text-align:center}

/* form feedback */
.ct__ok,.ct__err{
  display:grid;gap:5px;padding:16px 18px;border-radius:16px;margin-bottom:20px;
}
.ct__ok{background:#E9FBF1;border:1px solid #B6EBCD;color:#0E6B3D}
.ct__ok svg{width:20px;height:20px;fill:none;stroke:#12A05C;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.ct__ok b{font-size:15.5px;font-weight:800}
.ct__ok span{font-size:14px;color:#2B7C55}
.ct__err{background:#FDECEE;border:1px solid #F5C2C9;color:#9B1C2E}
.ct__err b{font-size:14.5px;font-weight:800}
.ct__err ul{margin:0;padding-left:18px;font-size:13.5px}

/* support panel */
.ct__side{display:grid;gap:12px}
.ct__item{
  display:flex;gap:13px;align-items:flex-start;padding:17px 18px;border-radius:18px;
  background:rgba(255,255,255,.72);border:1px solid rgba(49,92,78,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.ct__ico{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:var(--ice);
}
.ct__ico svg{width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ct__item b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.ct__item a,.ct__item span{
  display:block;margin-top:3px;font-size:14px;color:var(--mute);text-decoration:none;
}
.ct__item a:hover{color:var(--navy);text-decoration:underline}

.ct__faq{
  border-radius:18px;padding:2px 18px;
  background:rgba(255,255,255,.72);border:1px solid rgba(49,92,78,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.ct__faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 0;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.ct__faq summary::-webkit-details-marker{display:none}
.ct__faq summary svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--navy);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.ct__faq[open] summary svg{transform:rotate(180deg)}
.ct__faq__a{padding:0 0 16px;font-size:14px;color:var(--mute);line-height:1.6}

@media(max-width:900px){
  .ct__grid{grid-template-columns:1fr}
  .ct__side{order:-1}
}
@media(max-width:560px){
  .ct__row{grid-template-columns:1fr;gap:0}
  .ct__card{padding:20px 18px;border-radius:20px}
}

/* a card with no video configured stays a still image, not a dead tap */
.vt__card--nosrc .vt__play{display:none}
.vt__card--nosrc .vt__open{cursor:default}
.vt__card--nosrc .vt__open:hover{transform:none}


/* ===========================================================
   MOBILE OVERFLOW FIX
   A grid/flex item defaults to min-width:auto, so it grows to its
   max-content width. .stepshow holds a 2400px marquee strip, so the
   item itself became 2400px wide and overflow:hidden clipped nothing —
   that is what stretched the layout viewport on phones.
   =========================================================== */
.split > *,
.split__i,
.split__c{min-width:0}
.stepshow{min-width:0;max-width:100%}
.stepstrip{min-width:0}

/* belt and braces: nothing may widen the page */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
img,video,svg{max-width:100%}

/* ---- horizontal rails: lock to sideways movement only ----
   'mandatory' snap re-snaps while the page scrolls vertically, which
   is the wobble. 'proximity' keeps the tidy stops without fighting
   the vertical gesture. */
.icards,
.vt__rail,
.fbdeck__track,
.fbdeck{overscroll-behavior:contain}
.icards{scroll-snap-type:x proximity}
/* vt__rail and fbdeck__track: no scroll-snap here on purpose — combined
   with a horizontally-scrolling rail nested in a vertically-scrolling
   page, scroll-snap-type was the most likely source of the stuck/frozen
   vertical scroll some phones hit over these two carousels. Plain
   overflow-x:auto with no snap is the most broadly reliable pattern. */

/* collections index: shorter cards, single-line titles */
.pgrid--col .pc__t{-webkit-line-clamp:1;min-height:0}
.pgrid--col .pc__body{padding-top:12px}
.col__all{display:flex;justify-content:center;margin-top:clamp(30px,4vw,46px)}


/* ===========================================================
   INGREDIENT RAIL — straight horizontal travel, no vertical drift
   The cards carry .rise, which animates from translateY(20px) as the
   observer sees them. Scrolling sideways brought each card into view
   in turn, so every one lifted 20px mid-swipe — that was the wobble.
   Inside the rail the reveal fades only, never moves.
   =========================================================== */
@media(max-width:900px){
  .icards .icard.rise,
  .icards .icard.rise.in{transform:none}
  .icards .icard.rise{opacity:1}

  /* sticky :hover on touch was shifting cards a further 3px */
  .icards .icard:hover{transform:none;box-shadow:none}

  /* nothing may travel vertically inside the rail */
  .icards{
    overflow-y:hidden;
    align-items:stretch;
    scroll-snap-type:x proximity;
    scroll-padding-left:var(--pad);
  }
  .icards .icard{scroll-snap-stop:normal}
}
/* keep the lift on real pointers only */
@media(hover:none){
  .icard:hover{transform:none;box-shadow:none}
}

/* ===========================================================
   VIDEO RAIL — same fix as the ingredient rail above: a transform-
   based reveal on a card living inside a horizontally-scrollable
   rail fights the swipe gesture. Fade only here, never scale.
   =========================================================== */
@media(max-width:900px){
  .vt__rail .vt__card.rise-scale,
  .vt__rail .vt__card.rise-scale.in{transform:none}
  .vt__rail .vt__card.rise-scale{opacity:1}
}


/* ---- save badge: no icon, gentle pulse so it catches the eye ---- */
.sz__gift__d{
  position:relative;overflow:hidden;
  animation:szpulse 2.6s ease-in-out infinite;
}
@keyframes szpulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.42)}
  50%    {transform:scale(1.06);box-shadow:0 0 0 6px rgba(255,255,255,0)}
}
/* a slow sheen sweeping across the pill */
.sz__gift__d::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-120%);
  animation:szsheen 2.6s ease-in-out infinite;
}
@keyframes szsheen{
  0%,55%{transform:translateX(-120%)}
  85%,100%{transform:translateX(120%)}
}
@media(prefers-reduced-motion:reduce){
  .sz__gift__d,.sz__gift__d::after{animation:none}
  .sz__gift__d::after{display:none}
}


/* ---- rating breakdown: star icons instead of "5-star" text ---- */
.tprow u{
  display:inline-flex;align-items:center;gap:2px;width:auto;flex:none;
  text-decoration:none;line-height:0;
}
.tprow__s{width:13px;height:13px;display:block;flex:none;fill:var(--tp)}
.tprow__s--off{fill:var(--tp-grey)}
@media(max-width:680px){
  .tprow{display:flex;align-items:center;gap:10px;text-align:left}
  .tprow u{display:inline-flex;width:auto;margin:0}
  .tprow i{display:block;flex:1;width:auto}
  .tprow__s{width:12px;height:12px}
}


/* ===========================================================
   HEADER — single source of truth.
   Three competing .hpill blocks had built up; one of them also
   painted a full-width white bar on .hd at desktop, which killed
   the floating-pill look. This block replaces all of them.
   =========================================================== */
/* The header sits inside Shopify's header-group wrapper, which is only
   as tall as the header itself. A sticky child can never travel past
   its parent's box, so sticking .hd meant it scrolled away for good and
   could not come back. The WRAPPER is what sticks; .hd rides inside it. */
/* The group is pinned with a NEGATIVE offset equal to the announcement
   bar's height. That parks the bar just above the viewport once you
   scroll, so only the header pill stays on screen — the bar is visible
   only at the very top of the page. --annh is measured in JS. */
#shopify-section-group-header-group{
  position:sticky;top:calc(var(--annh,0px) * -1);z-index:90;
  transition:transform .34s cubic-bezier(.22,.75,.3,1);
  will-change:transform;
}
/* hidden: slide the whole group up out of the way */
#shopify-section-group-header-group.hd-hide{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){
  #shopify-section-group-header-group{transition:none}
  #shopify-section-group-header-group.hd-hide{transform:none}
}

.hd{
  position:relative;top:auto;z-index:90;
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:0;box-shadow:none;padding-block:12px;
  transition:transform .34s cubic-bezier(.22,.75,.3,1),padding .3s;
}
.hd.stuck{background:transparent;border:0;box-shadow:none;padding-block:8px}
.hd.hide{transform:none}
@media(prefers-reduced-motion:reduce){.hd{transition:none}.hd.hide{transform:none}}

/* Thick frosted glass: heavy blur so whatever is behind reads as a soft
   wash of colour, only a thin veil of white on top, and a bright lip
   along the upper edge to catch the light. The transparency is the
   point — a near-opaque fill just looks like a white pill. */
.hpill{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  border-radius:100px;
  /* Frosted glass: heavy blur with only a thin veil of white on top, so
     what is behind reads as a soft wash of colour. */
  background:linear-gradient(165deg,rgba(255,255,255,.30),rgba(255,255,255,.14) 52%,rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(42px) saturate(210%) brightness(1.12);
          backdrop-filter:blur(42px) saturate(210%) brightness(1.12);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    0 20px 50px -28px rgba(22,27,34,.6),
    0 3px 12px -6px rgba(22,27,34,.18),
    inset 0 1.5px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 0 0 22px rgba(255,255,255,.14);
  transition:background .3s,box-shadow .3s,border-color .3s;
}
/* dark content on the light frosted pill */
.hd .hpill .mark,
.hd .hpill--logo .mark{color:var(--deep)}
.hd .hpill--logo .mark sup{color:rgba(35,45,57,.55)}
.hpill--nav a{color:var(--mute)}
.hpill--nav a:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.hpill .hicon{background:rgba(255,255,255,.34);color:var(--ink)}
.hpill .hicon:hover{background:rgba(255,255,255,.72)}
.hpill .burger{color:var(--ink)}
.hpill .burger span{background:currentColor}
/* specular sheen across the top third */
.hpill::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 62%),
    radial-gradient(120% 90% at 22% -30%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%);
}
/* thin refracted rim, brighter at the top than the bottom */
.hpill::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.15) 45%,rgba(255,255,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* once scrolled, thicken it slightly so it holds up over busy imagery */
.hd.stuck .hpill{
  background:linear-gradient(165deg,rgba(255,255,255,.42),rgba(255,255,255,.24) 52%,rgba(255,255,255,.32));
  border-color:rgba(255,255,255,.55);
  box-shadow:
    0 24px 56px -30px rgba(22,27,34,.65),
    0 3px 14px -6px rgba(22,27,34,.22),
    inset 0 1.5px 0 rgba(255,255,255,.85),
    inset 0 0 24px rgba(255,255,255,.16);
}
/* no backdrop-filter support: fall back to a solid-enough pill */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hpill{background:rgba(255,255,255,.9)}
  .hd.stuck .hpill{background:rgba(255,255,255,.95)}
}

/* bigger logo */
.hpill--logo{padding:10px 28px}
.hpill--logo img{display:block}
.hpill--logo .mark{font-size:clamp(21px,2.2vw,26px);letter-spacing:-.045em;font-weight:800;color:var(--deep)}
.mark--wordmark em{font-style:normal;color:var(--navy)}

.hpill--logo .mark sup{font-size:.36em}

.hicon{background:rgba(255,255,255,.32)}
.hicon:hover{background:rgba(255,255,255,.72)}
.hmenu{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
}

@media(max-width:680px){
  .hpill--logo{padding:9px 20px}
  .hpill--logo .mark{font-size:19px}
}



/* ===========================================================
   CART DRAWER — rebuilt mobile-first.
   One scale drives everything, so the header, prices, buttons and
   thumbnails stay in proportion instead of each being sized by eye.
   =========================================================== */
.cd{
  --cd-pad:16px;
  --cd-gap:12px;
  --cd-r:12px;
  --cd-thumb:56px;
  --cd-name:14px;
  --cd-meta:12px;
  --cd-price:14px;
  --cd-btn:48px;

  --cd-bg:#fff;
  --cd-bg2:#F6F9F7;
  --cd-line:#EAF1EE;
  --cd-txt:#161B22;
  --cd-mute:#6E747C;
  --cd-acc:#315C4E;
  --cd-acc-soft:#F0F5F3;
  --cd-ok:#12A05C;

  position:fixed;inset:0;z-index:200;opacity:0;
  transition:opacity .24s ease;
  font-size:var(--cd-name);
}
.cd.is-open{opacity:1}
.cd[hidden]{display:none}

.cd--dark{
  --cd-bg:#14181D;
  --cd-bg2:#1B2128;
  --cd-line:rgba(61,122,101,.18);
  --cd-txt:#F4F8F6;
  --cd-mute:#3C6B5B;
  --cd-acc:#346857;
  --cd-acc-soft:rgba(52,104,87,.16);
  --cd-ok:#3DDC97;
}

.cd__veil{position:absolute;inset:0;background:rgba(17,22,28,.5)}
.cd__panel{
  position:absolute;top:0;right:0;height:100%;height:100dvh;
  width:min(390px,100%);
  display:flex;flex-direction:column;
  background:var(--cd-bg);color:var(--cd-txt);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.8,.28,1);
}
.cd.is-open .cd__panel{transform:none}
@media(prefers-reduced-motion:reduce){
  .cd,.cd__panel{transition:none}
}
.cd.is-busy .cd__list{opacity:.5;transition:opacity .15s}

/* ---- header ---- */
.cd__head{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:14px var(--cd-pad);border-bottom:1px solid var(--cd-line);
}
.cd__title{font-size:15px;font-weight:800;letter-spacing:-.02em}
.cd__count{
  min-width:20px;height:20px;padding:0 6px;border-radius:100px;
  background:var(--cd-acc-soft);color:var(--cd-acc);
  font-size:11.5px;font-weight:800;display:grid;place-items:center;
}
.cd--dark .cd__count{color:#448770}
.cd__x{
  margin-left:auto;width:32px;height:32px;border-radius:100px;flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;border:0;color:var(--cd-mute);transition:background .18s,color .18s;
}
.cd__x:hover{background:var(--cd-acc-soft);color:var(--cd-acc)}
.cd__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* ---- free shipping ---- */
.cd__ship{flex:none;padding:12px var(--cd-pad) 14px;background:transparent;border-bottom:1px solid var(--cd-line)}
.cd__ship[hidden]{display:none}

/* the heading and the bar live together in one glassy card */
.cd__shipcard{
  position:relative;isolation:isolate;overflow:visible;
  padding:9px 12px 11px;border-radius:13px;
  background:linear-gradient(160deg,rgba(52,104,87,.26),rgba(49,92,78,.14) 55%,rgba(61,122,101,.2));
  -webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);
  border:1px solid rgba(52,104,87,.34);
  box-shadow:
    0 12px 28px -20px rgba(44,78,67,.6),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.cd--dark .cd__shipcard{
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(52,104,87,.13));
  border-color:rgba(255,255,255,.17);
  box-shadow:0 12px 28px -20px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.2);
}
/* slow light sweep, clipped to the card shape so the truck stays free */
.cd__shipcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  border-radius:inherit;clip-path:inset(0 round 16px);
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  animation:cdCardSheen 5.5s ease-in-out infinite;
}
@keyframes cdCardSheen{0%,70%{transform:translateX(-115%)}100%{transform:translateX(115%)}}

.cd__shiphead{
  margin:0 0 9px;
  font-size:12px;font-weight:800;letter-spacing:.01em;line-height:1.2;
  text-transform:uppercase;color:var(--cd-txt);
  /* keep it on a single line whatever the drawer width */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cd--dark .cd__shiphead{color:#ECF3EF}
@media(max-width:360px){ .cd__shiphead{font-size:11px} }

.cd__track{
  position:relative;display:block;height:8px;border-radius:100px;
  background:var(--cd-line);margin-right:14px;
}
.cd__fill{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:100px;background:var(--cd-acc);
  transition:width .6s cubic-bezier(.25,.85,.3,1);
}
.cd--dark .cd__fill{box-shadow:0 0 12px rgba(52,104,87,.7)}

.cd__truck{
  position:absolute;left:0;top:50%;
  width:40px;height:23px;pointer-events:none;
  transform:translate(-48%,-56%);
  transition:left .65s cubic-bezier(.25,.85,.3,1);
  filter:drop-shadow(0 2px 3px rgba(44,78,67,.38));
}
.cd__truck svg{
  width:40px;height:23px;display:block;overflow:visible;
  animation:cdTruckBob 1.05s ease-in-out infinite;
}
.cd__truck-box,.cd__truck-cab{fill:var(--cd-acc)}
.cd__truck-glass{fill:rgba(255,255,255,.92)}
.cd__truck-seam{stroke:rgba(255,255,255,.45);stroke-width:1;fill:none;stroke-linecap:round}
.cd__truck-bumper{fill:#2C4E43}
.cd__truck-tyre{fill:#1F252C}
.cd__truck-hub{fill:#F0F5F3}
.cd__truck-shade{fill:rgba(44,78,67,.2)}
.cd--dark .cd__truck-tyre{fill:#0D1014}
.cd--dark .cd__truck-hub{fill:#448770}
.cd--dark .cd__truck-shade{fill:rgba(0,0,0,.35)}
.cd__truck-wheels .cd__truck-hub{transform-origin:center;animation:cdWheel .55s linear infinite}
.cd__truck-puff circle{fill:rgba(49,92,78,.38);animation:cdPuff 1.35s ease-out infinite}
.cd__truck-puff circle:last-child{animation-delay:.4s}
@keyframes cdTruckBob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-1.2px) rotate(-.7deg)}
  70%{transform:translateY(.6px) rotate(.5deg)}
}
@keyframes cdWheel{to{transform:rotate(360deg)}}
@keyframes cdPuff{
  0%{opacity:.5;transform:translate(0,0) scale(.7)}
  100%{opacity:0;transform:translate(-10px,-4px) scale(1.6)}
}
@media(prefers-reduced-motion:reduce){
  .cd__fill,.cd__truck{transition:none}
  .cd__truck svg,.cd__truck-wheels .cd__truck-hub,.cd__shipcard::after{animation:none}
  .cd__truck-puff{display:none}
}

/* ---- scroll area ---- */
.cd__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 var(--cd-pad)}
.cd__load{display:grid;place-items:center;padding:36px 0}
.cd__load[hidden]{display:none}
.cd__load i{
  width:24px;height:24px;border-radius:100px;display:block;
  border:2.5px solid var(--cd-line);border-top-color:var(--cd-acc);
  animation:cdspin .75s linear infinite;
}
@keyframes cdspin{to{transform:rotate(360deg)}}

/* ---- gift banner ---- */
.cd__gift{
  display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:9px 11px;
  border-radius:var(--cd-r);background:var(--cd-acc-soft);
  border:1px solid color-mix(in srgb,var(--cd-acc) 26%,transparent);
}
.cd__gift[hidden]{display:none}
.cd__gift img{width:36px;height:36px;aspect-ratio:1/1;flex:none;border-radius:9px;object-fit:cover;object-position:50% 18%;background:#fff}
.cd__gift span{display:grid;gap:1px;min-width:0}
.cd__gift b{font-size:var(--cd-meta);font-weight:800;color:var(--cd-txt)}
.cd__gift em{font-style:normal;font-size:11.5px;color:var(--cd-mute)}
.cd__gift svg{width:15px;height:15px;margin-left:auto;flex:none;fill:none;stroke:var(--cd-ok);
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---- line items ---- */
.cd__list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.cd__list[hidden]{display:none}
.cd__item{
  display:flex;gap:var(--cd-gap);align-items:flex-start;
  padding:12px;border-radius:var(--cd-r);
  background:var(--cd-bg2);border:1px solid var(--cd-line);
}
.cd__thumb{
  width:var(--cd-thumb);height:var(--cd-thumb);flex:none;border-radius:10px;
  overflow:hidden;background:var(--cd-bg2);display:block;
}
.cd__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cd__ph{display:block;width:100%;height:100%;background:var(--cd-acc-soft)}
.cd__info{flex:1;min-width:0}
.cd__name{
  display:block;font-size:var(--cd-name);font-weight:700;letter-spacing:-.015em;
  line-height:1.3;color:var(--cd-txt);text-decoration:none;
}
.cd__name:hover{color:var(--cd-acc)}
.cd__meta{display:block;font-size:var(--cd-meta);color:var(--cd-mute);margin-top:2px}
.cd__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.cd__qty{display:inline-flex;align-items:center;border:1px solid var(--cd-line);border-radius:100px}
.cd__qty b{min-width:22px;text-align:center;font-size:var(--cd-meta);font-weight:800}
.cd__qty button{
  width:26px;height:26px;border-radius:100px;cursor:pointer;border:0;background:transparent;
  font-size:14px;line-height:1;font-weight:700;color:var(--cd-txt);
  display:grid;place-items:center;transition:background .16s,color .16s;
}
.cd__qty button:hover{background:var(--cd-acc-soft);color:var(--cd-acc)}
.cd__price{font-size:var(--cd-price);font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px}
.cd__price s{font-size:11.5px;font-weight:600;color:var(--cd-mute)}
.cd__rm{
  flex:none;width:24px;height:24px;border-radius:100px;cursor:pointer;border:0;background:transparent;
  color:var(--cd-mute);display:grid;place-items:center;transition:background .18s,color .18s;
}
.cd__rm:hover{background:#FDECEE;color:#C4344A}
.cd--dark .cd__rm:hover{background:rgba(255,120,140,.14);color:#FF8FA3}
.cd__rm svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.cd__tag{
  display:inline-block;margin-top:7px;padding:3px 9px;border-radius:100px;
  font-size:11px;font-weight:800;background:var(--cd-acc);color:#fff;
}
.cd__item.is-gift .cd__thumb{box-shadow:0 0 0 1.5px var(--cd-acc) inset}
.cd__item--err b{font-size:var(--cd-name)}

/* ---- empty ---- */
.cd__empty{text-align:center;padding:44px 8px}
.cd__empty[hidden]{display:none}
.cd__emptyic{
  width:52px;height:52px;margin:0 auto 14px;border-radius:100px;display:grid;place-items:center;
  background:var(--cd-acc-soft);
}
.cd__emptyic svg{width:22px;height:22px;fill:none;stroke:var(--cd-acc);stroke-width:1.8;stroke-linejoin:round}
.cd__empty b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em}
.cd__empty p{margin:6px auto 18px;max-width:30ch;font-size:var(--cd-meta);color:var(--cd-mute);line-height:1.5}

/* ---- upsell ---- */
.cd__up{margin:14px 0 4px;padding:12px;border-radius:var(--cd-r);background:var(--cd-bg2);border:1px solid var(--cd-line)}
.cd__up[hidden]{display:none}
.cd__uptitle{display:block;font-size:var(--cd-meta);font-weight:800;letter-spacing:-.01em;margin-bottom:9px}
.cd__up ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cd__up li{display:flex;align-items:center;gap:10px;background:var(--cd-bg);border-radius:10px;padding:7px 9px;border:1px solid var(--cd-line)}
.cd__up img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;display:block}
.cd__upinfo{flex:1;min-width:0;display:grid;gap:2px}
.cd__upinfo b{font-size:var(--cd-meta);font-weight:700;letter-spacing:-.015em;line-height:1.3}
.cd__upinfo em{font-style:normal;font-size:11.5px;font-weight:800}
.cd__upinfo s{font-weight:600;color:var(--cd-mute)}
.cd__upadd{
  flex:none;padding:7px 14px;border-radius:100px;cursor:pointer;border:0;
  font:inherit;font-size:11.5px;font-weight:800;background:var(--cd-acc);color:#fff;
  transition:opacity .18s;
}
.cd__upadd:hover{opacity:.88}
.cd__upadd:disabled{background:var(--cd-line);color:var(--cd-mute);cursor:default}

/* ---- footer ---- */
.cd__foot{
  flex:none;padding:14px var(--cd-pad);
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--cd-line);background:var(--cd-bg);
}
.cd__foot[hidden]{display:none}
.cd__btn{
  display:flex;align-items:center;justify-content:center;width:100%;
  height:var(--cd-btn);border-radius:100px;cursor:pointer;border:0;
  font:inherit;font-size:var(--cd-name);font-weight:800;letter-spacing:-.01em;
  text-decoration:none;transition:opacity .18s,background .18s;
}
.cd__btn--go{
  position:relative;overflow:hidden;gap:9px;color:#fff;border-radius:14px;
  /* living gradient: the colours drift slowly across the button */
  background:linear-gradient(110deg,#376E5C 0%,#315C4E 28%,#3D7A65 50%,#315C4E 72%,#2C4E43 100%);
  background-size:220% 100%;
  animation:cdBtnFlow 6s ease-in-out infinite;
  box-shadow:
    0 12px 26px -14px rgba(44,78,67,.8),
    0 2px 6px -3px rgba(36,45,57,.35),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1.5px 0 rgba(0,0,0,.16);
  transition:transform .18s ease,box-shadow .22s ease,filter .18s ease;
}
/* subtotal, sitting above the button */
.cd__sub{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:11px;
}
.cd__sub span{font-size:var(--cd-meta);font-weight:700;color:var(--cd-mute)}
.cd__sub b{font-size:19px;font-weight:800;letter-spacing:-.035em;color:var(--cd-txt);
  font-variant-numeric:tabular-nums}
/* light sweeping across on hover */
.cd__btn--go::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.34) 50%,transparent 64%);
  transform:translateX(-130%);
  transition:transform .6s ease;
}
.cd__btn--go:hover{
  filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:
    0 16px 32px -14px rgba(44,78,67,.9),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1.5px 0 rgba(0,0,0,.16);
}
.cd__btn--go:hover::after{transform:translateX(130%)}
.cd__btn--go:active{transform:translateY(1px);filter:brightness(.97)}
@keyframes cdBtnFlow{
  0%,100%{background-position:0% 0}
  50%{background-position:100% 0}
}
@media(prefers-reduced-motion:reduce){
  .cd__btn--go{animation:none}
}
.cd__btn--go:disabled{opacity:.65;cursor:default;transform:none}
@media(prefers-reduced-motion:reduce){
  .cd__btn--go,.cd__btn--go::after{transition:none}
}
.cd__btn--ghost{
  height:42px;background:var(--cd-acc-soft);color:var(--cd-acc);width:auto;padding:0 22px;display:inline-flex;
}

/* a little more room once there is room to give */
@media(min-width:420px){
  .cd{--cd-pad:18px;--cd-thumb:60px;--cd-name:14.5px;--cd-price:15px}
  .cd__title{font-size:16px}
}

/* [hidden] is a UA rule and loses to any class that sets display */
.cd__load[hidden],.cd__list[hidden],.cd__gift[hidden],.cd__up[hidden],
.cd__ship[hidden],.cd__foot[hidden],.cd__empty[hidden]{display:none !important}


/* ===========================================================
   CART PAGE — same scale as the drawer, wider layout
   =========================================================== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cp{padding:clamp(24px,4vw,52px) 0 clamp(48px,7vw,80px)}
.cp__head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.cp__t{font-size:clamp(24px,4vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1.06}
.cp__n{font-size:13px;font-weight:700;color:var(--mute)}

.cp__ship{
  position:static;display:block;opacity:1;padding:12px 14px;margin-bottom:14px;
  max-width:560px;border:1px solid var(--hair);border-radius:14px;background:var(--cloud);
}
.cp__eta{margin:7px 0 0;font-size:12px;color:var(--mute);font-weight:600}
.cp__gift{
  position:static;display:flex;opacity:1;align-items:center;gap:10px;
  max-width:560px;margin:0 0 20px;padding:9px 11px;border-radius:12px;
  background:var(--ice);border:1px solid rgba(49,92,78,.26);
}
.cp__gift img{width:36px;height:36px;aspect-ratio:1/1;flex:none;border-radius:9px;object-fit:cover;object-position:50% 18%;background:#fff}
.cp__gift span{display:grid;gap:1px}
.cp__gift b{font-size:12px;font-weight:800}
.cp__gift em{font-style:normal;font-size:11.5px;color:var(--mute)}
.cp__gift svg{width:15px;height:15px;margin-left:auto;fill:none;stroke:#12A05C;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

.cp__grid{display:grid;grid-template-columns:1fr 330px;gap:clamp(16px,3vw,30px);align-items:start}
.cpline{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--hair)}
.cpline:first-child{padding-top:0}
.cpline__m{width:72px;height:72px;flex:none;border-radius:12px;overflow:hidden;background:var(--cloud);display:block}
.cpline__m img{width:100%;height:100%;object-fit:cover;display:block}
.cp__ph{display:block;width:100%;height:100%;background:var(--ice)}
.cpline__c{min-width:0}
.cpline__t{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;line-height:1.3}
.cpline__t:hover{color:var(--navy)}
.cpline__o{display:block;font-size:12px;color:var(--mute);margin-top:3px}
.cp__tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:100px;
  font-size:11px;font-weight:800;background:var(--navy);color:#fff}
.cpline__q{display:grid;justify-items:center;gap:6px}
.cpline__i{width:62px;padding:8px;text-align:center;font:inherit;font-size:13.5px;font-weight:700;
  border:1.5px solid var(--hair);border-radius:10px;background:#fff}
.cpline__i:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(49,92,78,.13)}
.cpline__x{font-size:11.5px;color:var(--mute);text-decoration:none;font-weight:600}
.cpline__x:hover{color:#C4344A;text-decoration:underline}
.cpline__free{font-size:12.5px;font-weight:800;color:var(--navy)}
.cpline__p{text-align:right;white-space:nowrap}
.cpline__p b{font-size:14.5px;font-weight:800;letter-spacing:-.025em}
.cpline__p s{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.cpline--gift .cpline__m{box-shadow:0 0 0 1.5px var(--navy) inset}

.cp__sum{position:sticky;top:96px;padding:18px;border-radius:16px;background:var(--cloud);border:1px solid var(--hair)}
.cp__sumt{display:block;font-size:15px;font-weight:800;letter-spacing:-.025em;margin-bottom:12px}
.cp__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px}
.cp__row span{color:var(--mute);font-weight:600}
.cp__row b{font-weight:800}
.cp__row--save b{color:#12A05C}
.cp__note{display:block;margin-top:12px;font-size:12px;font-weight:800}
.cp__sum textarea{width:100%;margin-top:6px;font:inherit;font-size:13.5px;padding:10px 12px;
  border-radius:11px;border:1.5px solid var(--hair);resize:vertical;background:#fff}
.cp__sum textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(49,92,78,.13)}
.cp__tot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.cp__tot span{font-size:13px;font-weight:700;color:var(--mute)}
.cp__tot b{font-size:20px;font-weight:800;letter-spacing:-.035em}
.cp__fine{margin:5px 0 11px;font-size:11.5px;color:var(--mute)}
.cp__upd{margin-top:8px}
.cp__back{display:block;text-align:center;margin-top:10px;font-size:13px;font-weight:700;
  color:var(--navy);text-decoration:none}
.cp__back:hover{text-decoration:underline}
.cp__badges{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0 0;padding:0}
.cp__badges li{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--mute)}
.cp__badges svg{width:11px;height:11px;flex:none;fill:none;stroke:#12A05C;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

@media(max-width:900px){
  .cp__grid{grid-template-columns:1fr}
  .cp__sum{position:static}
}
@media(max-width:620px){
  .cpline{grid-template-columns:auto 1fr;gap:12px;row-gap:10px;padding:14px 0}
  .cpline__m{width:64px;height:64px}
  .cpline__q{grid-column:1/-1;justify-items:start;grid-auto-flow:column;align-items:center;gap:14px}
  .cpline__p{grid-column:1/-1;text-align:left}
  .cpline__p s{display:inline;margin-left:7px}
}


/* ===========================================================
   HEADER — floating, always OUT of the page flow.
   The header is its own fixed element, not tied to the announcement
   bar or the section group. --hdtop is set in JS: it starts below the
   announcement bar and rises to 0 as the bar scrolls away.
   =========================================================== */
#shopify-section-group-header-group{
  position:relative;top:auto;z-index:90;
  /* CRITICAL: will-change/transform on an ancestor creates a containing
     block, which would anchor the fixed header to this element instead
     of the viewport — the header would then scroll away with the page. */
  transform:none !important;
  will-change:auto !important;
  filter:none !important;
  perspective:none !important;
  transition:none;
}

/* Real element reserving the fixed header's space, so the header always
   has its own band at the top and never sits on the content. A spacer
   works on every template, whether or not the section-group wrapper
   exists — a CSS variable on a wrapper does not. */
.hd-spacer{display:block;width:100%;flex:none;height:var(--hdh,0px)}

.hd{
  position:fixed !important;
  top:var(--hdtop,0px);
  left:0;right:0;
  z-index:95;
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:0;box-shadow:none;
  transition:transform .34s cubic-bezier(.22,.75,.3,1),top .12s linear;
  will-change:transform;
}
/* slides up out of view; comes back on scroll up */
.hd.hide{transform:translateY(-130%)}

@media(prefers-reduced-motion:reduce){
  .hd{transition:none}
  .hd.hide{transform:none}
}
/* landscape phones: don't let the fixed header eat a short screen */
@media(max-height:430px){
  .hd{position:absolute !important;top:var(--hdtop,0px)}
}


/* ===========================================================
   CART — truck silhouette, glassy close button, payment icons
   =========================================================== */
/* flat silhouette truck with speed lines trailing behind it */
.cd__truck{
  position:absolute;left:0;top:50%;
  width:44px;height:24px;pointer-events:none;
  transform:translate(-44%,-58%);
  transition:left .65s cubic-bezier(.25,.85,.3,1);
  filter:drop-shadow(0 2px 3px rgba(44,78,67,.35));
}
.cd__truck svg{
  width:44px;height:24px;display:block;overflow:visible;
  animation:cdTruckBob 1.05s ease-in-out infinite;
}
.cd__truck-body{fill:var(--cd-acc)}
/* window and wheel centres are punched out to the card colour */
.cd__truck-window,.cd__truck-rim{fill:#F0F6F3}
.cd--dark .cd__truck-window,.cd--dark .cd__truck-rim{fill:#1F252C}
.cd__truck-tyre{fill:var(--cd-acc)}
.cd__truck-lines path{
  stroke:var(--cd-acc);stroke-width:2.6;stroke-linecap:round;fill:none;
  animation:cdTruckLines 1s ease-out infinite;
}
.cd__truck-lines path:nth-child(2){animation-delay:.15s}
.cd__truck-lines path:nth-child(3){animation-delay:.3s}
@keyframes cdTruckLines{
  0%{opacity:.55;transform:translateX(2px)}
  100%{opacity:0;transform:translateX(-7px)}
}

/* glassy circular close button */
.cd__x{
  width:34px;height:34px;border-radius:100px;
  background:linear-gradient(160deg,rgba(52,104,87,.24),rgba(49,92,78,.12));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(52,104,87,.32);
  box-shadow:
    0 6px 16px -10px rgba(44,78,67,.6),
    inset 0 1px 0 rgba(255,255,255,.6);
  color:var(--cd-txt);
  transition:background .2s,box-shadow .2s,transform .18s;
}
.cd__x:hover{
  background:linear-gradient(160deg,rgba(52,104,87,.36),rgba(49,92,78,.2));
  transform:scale(1.06);
}
.cd--dark .cd__x{
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(52,104,87,.16));
  border-color:rgba(255,255,255,.22);color:#F4F8F6;
}

/* five small payment icons under the checkout button */
.cd__pays{
  list-style:none;display:flex;align-items:center;justify-content:center;
  gap:6px;margin:11px 0 0;padding:0;
}
.cd__pays li{display:flex}
.cd__pays .cd__pay,.cd__pays svg{
  height:20px;width:auto;display:block;border-radius:3px;
  box-shadow:0 1px 2px rgba(22,27,34,.16);
}
.cd--dark .cd__pays .cd__pay,.cd--dark .cd__pays svg{opacity:.88}

@media(prefers-reduced-motion:reduce){
  .cd__truck-lines path{animation:none}
  .cd__truck-lines{display:none}
}


/* ---- gift locked state: shown until the cart reaches the minimum ---- */
.cd__gift--locked{
  background:var(--cd-bg2);
  border:1px dashed var(--cd-line);
}
.cd--dark .cd__gift--locked{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.cd__gift--locked b{color:var(--cd-txt)}
.cd__gift--locked em{color:var(--cd-mute)}
.cd__gift__lock{
  width:36px;height:36px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--cd-acc-soft);
}
.cd__gift__lock svg{
  width:18px;height:18px;fill:none;stroke:var(--cd-acc);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.cd__gift--locked[hidden]{display:none !important}


/* ---- upsell card ---- */
.cd__up{
  margin:14px 0 4px;padding:12px;border-radius:var(--cd-r);
  background:var(--cd-bg2);border:1px solid var(--cd-line);
}
.cd__up[hidden]{display:none !important}
.cd__uptitle{
  display:block;font-size:var(--cd-meta);font-weight:800;letter-spacing:-.01em;
  color:var(--cd-txt);margin-bottom:9px;
}
.cd__up ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cd__up li{
  display:flex;align-items:center;gap:10px;padding:7px 9px;
  background:var(--cd-bg);border:1px solid var(--cd-line);border-radius:10px;
}
.cd__up img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;display:block}
.cd__upinfo{flex:1;min-width:0;display:grid;gap:2px}
.cd__upinfo b{
  font-size:var(--cd-meta);font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--cd-txt);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cd__upinfo em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--cd-txt)}
.cd__upinfo s{font-weight:600;color:var(--cd-mute);margin-left:4px}
.cd__upadd{
  flex:none;padding:8px 15px;border-radius:100px;cursor:pointer;border:0;
  font:inherit;font-size:11.5px;font-weight:800;background:var(--cd-acc);color:#fff;
  transition:opacity .18s;
}
.cd__upadd:hover{opacity:.88}
.cd__upadd:disabled{background:var(--cd-line);color:var(--cd-mute);cursor:default}


/* ===========================================================
   FIXES — heading descenders, collection/footer gap
   =========================================================== */
/* Headings run at line-height 1.04. With background-clip:text the text
   box is shorter than the glyphs, so descenders (the y in "buy") were
   sliced in half. Give the gradient headings room to breathe. */
.ag{
  line-height:1.14;
  padding-bottom:.08em;
  /* NOT inline-block — that pulled the heading up beside the eyebrow
     pill and broke the centred layout. Block keeps it on its own line. */
  display:block;
}

/* The footer is pulled up 70px (.ft--overlap) to sit over the section
   above it. On the collection and collections-index pages that ate the
   bottom padding, so the last row of products butted into the footer. */
.col{padding-bottom:clamp(140px,16vw,230px)}
.pager{margin-bottom:14px}
/* the footer's -70px pull is a fixed offset, so wider screens need the
   most compensation, not the least */
@media(min-width:700px) and (max-width:999px){ .col{padding-bottom:210px} }
@media(min-width:1000px){ .col{padding-bottom:230px} }

/* FAQ: the section is set to padding-top:0 inline, which left the
   eyebrow and heading crowded against whatever sits above it. */
#faq{padding-top:clamp(34px,6vw,72px) !important}
#faq .acc{padding-bottom:8px}

/* subscription saving, shown under the "You pay today" row */
.tot__save{
  margin:6px 0 0;text-align:right;
  font-size:13px;font-weight:800;letter-spacing:-.01em;color:#12A05C;
}
@media(max-width:680px){ .tot__save{font-size:12.5px} }

/* ===========================================================
   GALLERY LAYOUT — 6 thumbnails, one row, no scrolling, no
   wrapping — sized to fit the gallery width exactly, on both
   mobile and desktop.
   Appended last on purpose so it wins the cascade over the
   earlier .gal__t / .gt rules without needing !important.
   =========================================================== */
.gal__t{
  display:flex;flex-wrap:nowrap;grid-template-columns:none;
  gap:6px;margin-top:10px;
}
.gt{flex:1 1 0;width:auto;min-width:0;aspect-ratio:1/1;border-radius:11px}
}

/* ===========================================================
   PRODUCT PAGE — real Shopify payment icons under the CTA
   =========================================================== */
.pi__pays{margin-top:16px}
.pi__badges{margin-top:12px}
@media(max-width:680px){ .pi__pays .cd__pay,.pi__pays svg{height:17px} }

/* ===========================================================
   UNIQUE SCROLL-REVEAL VARIANTS — same .in trigger as .rise,
   different motion per section so the page doesn't repeat one
   effect the whole way down.
   =========================================================== */
.rise-l{opacity:0;transform:translateX(-34px);transition:opacity .75s cubic-bezier(.2,.85,.3,1),transform .75s cubic-bezier(.2,.85,.3,1)}
.rise-l.in{opacity:1;transform:none}

.rise-r{opacity:0;transform:translateX(34px);transition:opacity .75s cubic-bezier(.2,.85,.3,1),transform .75s cubic-bezier(.2,.85,.3,1)}
.rise-r.in{opacity:1;transform:none}

.rise-scale{opacity:0;transform:scale(.88);transition:opacity .6s cubic-bezier(.2,.85,.3,1),transform .6s cubic-bezier(.34,1.4,.4,1)}
.rise-scale.in{opacity:1;transform:none}

.rise-clip{
  opacity:0;transform:scaleX(.04);transform-origin:0% 50%;
  transition:transform .8s cubic-bezier(.65,0,.15,1),opacity .25s linear;
}
.rise-clip.in{opacity:1;transform:scaleX(1)}

.rise-flip{opacity:0;transform:perspective(800px) rotateX(-18deg);transform-origin:50% 100%;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.85,.3,1)}
.rise-flip.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rise-l,.rise-r,.rise-scale,.rise-clip,.rise-flip{opacity:1!important;transform:none!important}
}

/* stagger the pop-in for repeated review / video cards so they don't
   all land in the same instant */
.tpgrid .tpcard:nth-child(2){transition-delay:.08s}
.tpgrid .tpcard:nth-child(3){transition-delay:.16s}
.vt__rail .vt__card:nth-child(2){transition-delay:.07s}
.vt__rail .vt__card:nth-child(3){transition-delay:.14s}
.vt__rail .vt__card:nth-child(4){transition-delay:.21s}
.vt__rail .vt__card:nth-child(5){transition-delay:.28s}
.vt__rail .vt__card:nth-child(6){transition-delay:.35s}

@media(max-width:680px){
  /* TikTok has two text blocks (quote + reply) so it wraps to more
     lines than a single Facebook paragraph at narrow widths — trim a
     little further here to keep the two card heights in step.
     Appended last so it wins the cascade over the unconditional
     .fbdeck__track>.fb.tk rules above at this breakpoint. */
  .fbdeck__track>.fb.tk .tk__txt{font-size:12.5px;line-height:1.34}
  .fbdeck__track>.fb.tk .tk__head{margin-bottom:8px}
  .fbdeck__track>.fb.tk .tk__meta{margin-top:4px}
  .fbdeck__track>.fb.tk .tk__reply{margin-top:8px;padding-top:7px}
  .fbdeck__track>.fb.tk .tk__reply .tk__txt{font-size:11.5px;line-height:1.28}
}

/* ===========================================================
   FORCE FOCUS — heading above the image card, copy below it
   =========================================================== */
.ff__heading{
  text-align:center;max-width:640px;margin:0 auto clamp(22px,3.2vw,32px);
  font-size:clamp(28px,3.8vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:#000;
}
.ff__img{
  border-radius:28px;overflow:hidden;background:#000;
  max-width:440px;margin:0 auto;
}
.ff__img img{width:100%;height:auto;display:block;aspect-ratio:900/1125;object-fit:cover}
.ff__body{max-width:640px;margin:clamp(28px,4vw,40px) auto 0}
.ff__body p{font-size:18px;font-weight:600;line-height:1.6;color:var(--ink);margin:0 0 18px;letter-spacing:-.01em}
.ff__em{color:var(--navy)!important;font-weight:800}
@media(max-width:680px){
  .ff__heading{font-size:26px}
  .ff__body p{font-size:16.5px}
}

/* payment icons between Checkout and Update cart on the full cart page */
.cp__pays{margin:14px 0}

/* ===========================================================
   ODENSON-style gallery — full-bleed edge-to-edge on mobile,
   portrait thumbnail rail with an active-state underline
   instead of a border box.
   =========================================================== */
@media(max-width:680px){
  /* full-bleed: break the main image + thumbnail rail out of the
     page's side padding so both run edge to edge like the reference.
     Zero out the top padding too, so the image sits flush against
     the header instead of leaving a gap under it. Row-gap trimmed
     since the review badge sits right after the thumbnails now. */
  .buy{padding-inline:0;padding-block-start:0;row-gap:14px}
  .buy>.pi{padding-inline:var(--pad)}
  .gal{padding-inline:0}
  .gal__stage,.gal__t{border-radius:0}

  /* thumbnail rail: one line, portrait crop, active shown with an
     underline rather than a border box */
  .gal__t{
    display:flex;flex-wrap:nowrap;grid-template-columns:none;
    gap:14px;margin-top:14px;padding:0 var(--pad) 4px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .gal__t::-webkit-scrollbar{display:none}
  .gt{
    flex:0 0 64px;width:64px;aspect-ratio:auto;min-width:0;
    border-radius:0;border:0;box-shadow:none;overflow:visible;
    display:flex;flex-direction:column;gap:6px;background:none;padding:0;
  }
  .gt.on{border-color:transparent;box-shadow:none}
  .gt img{aspect-ratio:7/8;border-radius:6px;display:block}
  .gt::after{
    content:'';display:block;height:2px;width:100%;border-radius:2px;
    background:var(--ink);opacity:0;transition:opacity .18s;
  }
  .gt.on::after{opacity:1}
}

/* ===========================================================
   MINIMAL HEADER — hamburger + search on the left, centered
   wordmark, cart on the right. Overrides the earlier pill-style
   header layout (appended last so it wins the cascade).
   =========================================================== */
.hd--minimal{padding-block:0}
.hd--minimal.stuck{padding-block:0}
.hd--minimal .hd__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:64px;gap:12px;position:relative;
}
.hd--minimal .hd__side{display:flex;align-items:center;gap:2px}
.hd--minimal .hd__side--left{justify-self:start}
.hd--minimal .hd__side--right{justify-self:end}
.hd--minimal .hd__logo{justify-self:center;display:flex;align-items:center}
.hd--minimal .hd__logo .mark{font-size:20px;letter-spacing:-.05em}
.hd--minimal .hicon{
  position:relative;width:38px;height:38px;border-radius:100px;
  display:grid;place-items:center;background:none;color:var(--ink);
  transition:background .2s;
}
.hd--minimal .hicon svg{width:18px;height:18px}
.hd--minimal .hicon:hover{background:var(--cloud)}
.hd--minimal .hicon.burger{gap:3px}
.hd--minimal .burger span{width:15px;height:1.5px}
.hd--minimal .hmenu{top:calc(100% + 8px);left:0;right:auto}

@media(max-width:680px){
  .hd--minimal .hd__in{height:52px}
  .hd--minimal .hd__logo .mark{font-size:17.5px}
  .hd--minimal .hicon{width:34px;height:34px}
  .hd--minimal .hicon svg{width:16px;height:16px}
  .hd--minimal .burger span{width:14px}
}

/* ===========================================================
   Header/gallery tightening pass
   =========================================================== */
/* smaller, calmer hamburger + header height, matching the
   reference proportions rather than the earlier oversized icons */
.hd--minimal .hd__in{height:56px}
.hd--minimal .hicon{width:32px;height:32px}
.hd--minimal .hicon svg{width:16px;height:16px}
.hd--minimal .hicon.burger{gap:3px}
.hd--minimal .burger span{width:14px;height:1.5px}
@media(max-width:680px){
  .hd--minimal .hd__in{height:46px}
  .hd--minimal .hicon{width:28px;height:28px}
  .hd--minimal .hicon svg{width:15px;height:15px}
  .hd--minimal .burger span{width:13px}
}

/* remove the gap between the header and the main image below it —
   the buy grid's own top padding was pushing the gallery down even
   though the mobile gallery is already full-bleed */
.buy{padding-block-start:0}

/* pull the review badge up closer to the thumbnail row on mobile,
   where .gal and .pi stack into a single column and the grid's
   row-gap (sized for desktop's column-gap) was too generous */
@media(max-width:680px){
  .buy{row-gap:10px}
}

/* ===========================================================
   Reference-match pass: header a touch taller, bigger thumbnails,
   boxed payment-icon tiles, flat pack cards, bold green CTA.
   =========================================================== */

/* header — "a little fatter" than the previous slim pass */
.hd--minimal .hd__in{height:60px}
.hd--minimal .hicon{width:34px;height:34px}
.hd--minimal .hicon svg{width:17px;height:17px}
.hd--minimal .burger span{width:15px}
@media(max-width:680px){
  .hd--minimal .hd__in{height:52px}
  .hd--minimal .hicon{width:31px;height:31px}
  .hd--minimal .hicon svg{width:16px;height:16px}
  .hd--minimal .burger span{width:14px}
}

/* thumbnails — a bit larger */
@media(max-width:680px){
  .gt{flex-basis:72px;width:72px}
}

/* payment icons — back to plain marks, no box, smaller */
.paytile{
  height:auto;min-width:0;padding:0;border-radius:0;
  display:flex;align-items:center;justify-content:center;line-height:1;overflow:visible;
  border:0;background:none;
}
.paytile svg{height:11px;width:auto;display:block}
.paytile--visa,.paytile--amex,.paytile--shop,.paytile--sofort{background:none;border-color:transparent}
.paytile--mc svg{height:16px}
.paytile--amex{padding:0}
.paytile--pp svg{height:13px}
.paycard{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:0}

/* pack cards — flat, no glass/blur, matching the reference */
.sz{
  background:#F4F4F5!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:1.5px solid rgba(20,25,32,.08)!important;
  box-shadow:none!important;
}
.sz::before{display:none}
.sz:hover{border-color:rgba(20,25,32,.18)!important}
.sz.on{
  background:rgba(49,92,78,.06)!important;
  border:2px solid var(--navy)!important;
}
.sz__flag{
  top:-13px;right:16px;background:var(--navy);color:#fff;
  font-size:11px;font-weight:800;padding:6px 14px;border-radius:100px;
  box-shadow:0 6px 14px -6px rgba(49,92,78,.6);
}
.sz__was{font-size:14px;color:var(--mute);text-decoration:line-through;margin-left:8px;font-weight:600}
.sz.on .sz__was{color:rgba(49,92,78,.55)}

/* Add to Cart — bold solid green button, uppercase, moderate
   rounded corners (not a full pill) matching the reference */
.qrow--solo .btn{
  background:var(--navy);color:#fff;
  text-transform:uppercase;font-weight:800;letter-spacing:.02em;
  border-radius:16px;box-shadow:none;
}
.qrow--solo .btn:hover{filter:brightness(1.08);box-shadow:none}

/* ===========================================================
   PACK CARDS — precise rebuild to match the reference exactly:
   flat card, title + dollar-savings pill, "$X off" line, price
   stacked over a strikethrough original, bullseye radio.
   =========================================================== */
.szs{display:grid;gap:16px}
.sz{
  display:block!important;position:relative;
  padding:26px 26px 28px!important;
  border-radius:16px!important;
  background:#F4F4F5!important;
  border:1.5px solid rgba(20,25,32,.1)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  text-align:left;
}
.sz::before{display:none!important}
.sz.on{
  background:rgba(49,92,78,.055)!important;
  border:2.5px solid var(--navy)!important;
  padding:25.5px 25.5px 27.5px!important;
}
.sz__main{display:flex;align-items:flex-start;gap:16px;position:relative;z-index:1}
.rad{
  width:26px;height:26px;flex:none;margin-top:2px;
  border-radius:100px;border:2.5px solid rgba(49,92,78,.25);
  display:grid;place-items:center;background:#fff;
}
.sz.on .rad{border-color:var(--navy)}
.sz.on .rad::after{content:"";width:10px;height:10px;border-radius:100px;background:var(--navy)}
.sz__info{display:flex;flex-direction:column;gap:9px}
.sz__n{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);
}
.sz__save{
  font-style:normal;font-weight:800;font-size:13px;letter-spacing:.01em;
  color:var(--navy);background:rgba(49,92,78,.1);
  padding:6px 12px;border-radius:100px;
}
.sz__s{font-size:17px;color:var(--mute);font-weight:400}
.sz__pricerow{
  display:block;position:relative;z-index:1;margin-top:16px;padding-left:42px;
}
.sz__p{display:block;font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--ink)}
.sz__was{display:block;font-size:17px;color:var(--mute);text-decoration:line-through;margin-top:2px}
.sz__flag{
  top:-15px;right:16px;background:var(--navy);color:#fff;
  font-size:13px;font-weight:800;padding:8px 18px;border-radius:100px;
  box-shadow:0 6px 14px -6px rgba(49,92,78,.6);
}
/* the free-gift banner isn't part of this design — keep the markup
   (so the merchant setting still exists) but don't show it here */
.sz__gift{display:none!important}

@media(max-width:520px){
  .sz{padding:20px 20px 22px!important}
  .sz.on{padding:19.5px 19.5px 21.5px!important}
  .sz__n{font-size:20px}
  .sz__s,.sz__was{font-size:15px}
  .sz__p{font-size:24px}
  .sz__pricerow{padding-left:38px}
  .rad{width:23px;height:23px}
}

/* ===========================================================
   Header: solid white (not transparent), bigger, bolder menu
   icon. Appended last so it wins over the older transparent-
   floating-header rules and the earlier smaller-header passes.
   =========================================================== */
.hd--minimal,
.hd--minimal.stuck{
  background:#fff!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-bottom:0;box-shadow:none!important;
}
.hd--minimal .hd__in{height:72px}
.hd--minimal .hicon{width:40px;height:40px}
.hd--minimal .hicon svg{width:19px;height:19px}
.hd--minimal .hd__logo .mark{font-size:23px}
/* bolder, fuller-width lines instead of the short thin ones */
.hd--minimal .hicon.burger{gap:5px}
.hd--minimal .burger span{width:20px;height:2px;border-radius:1px}

@media(max-width:680px){
  .hd--minimal .hd__in{height:60px}
  .hd--minimal .hicon{width:36px;height:36px}
  .hd--minimal .hicon svg{width:18px;height:18px}
  .hd--minimal .hd__logo .mark{font-size:19px}
  .hd--minimal .burger span{width:18px;height:2px}
}

/* pack cards — smaller all round */
.sz{padding:12px 14px 14px!important}
.sz.on{padding:11.5px 13.5px 13.5px!important}
.rad{width:17px;height:17px}
.sz.on .rad::after{width:7px;height:7px}
.sz__n{font-size:15px;gap:6px}
.sz__save{font-size:10px;padding:4px 8px}
.sz__s{font-size:12.5px}
.sz__pricerow{margin-top:7px;padding-left:26px}
.sz__p{font-size:17px}
.sz__was{font-size:12.5px}
.sz__flag{top:-11px;right:12px;font-size:10px;padding:5px 12px}
.sz__main{gap:12px}
.sz__info{gap:5px}
.szs{gap:9px}
@media(max-width:520px){
  .sz{padding:11px 12px 13px!important}
  .sz.on{padding:10.5px 11.5px 12.5px!important}
  .sz__n{font-size:14px}
  .sz__s,.sz__was{font-size:11.5px}
  .sz__p{font-size:16px}
  .sz__pricerow{padding-left:24px}
  .rad{width:16px;height:16px}
}

/* ===========================================================
   Menu icon — thick, fully-rounded, equal-width bars, matching
   the reference exactly. Appended last to win.
   =========================================================== */
.hd--minimal .hicon.burger{gap:3px;align-items:center}
.hd--minimal .burger span{
  width:17px;height:2.5px;border-radius:100px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.hd--minimal .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hd--minimal .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd--minimal .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:680px){
  .hd--minimal .burger span{width:15px;height:2.2px}
  .hd--minimal .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .hd--minimal .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
}

/* ===========================================================
   Announcement bar — icon + text per item, bullet separators,
   store brand colour, infinite scroll. Appended last so it wins
   over the earlier plain-marquee and pink-static passes.
   =========================================================== */
.ann--static{
  background:var(--navy);color:#fff;overflow:hidden;padding:11px 0;
  -webkit-user-select:none;user-select:none;
}
.ann--static .ann__track{display:flex;width:max-content;animation:annscroll var(--ann-speed,42s) linear infinite}
.ann--static .ann__set{display:flex;align-items:center;flex:none;white-space:nowrap}
.ann--static:hover .ann__track{animation-play-state:paused}
.ann--static .ann__i{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f);font-weight:700;font-style:normal;letter-spacing:-.01em;
  text-transform:none;font-size:16px;line-height:1;padding:0 22px 0 0;color:#fff;
}
.ann--static .ann__ic{display:inline-flex;width:17px;height:17px;flex:none}
.ann--static .ann__ic svg{width:100%;height:100%;fill:#fff;stroke:#fff}
.ann--static .ann__sep{color:rgba(255,255,255,.55);font-style:normal;font-size:12px;margin-right:22px}
@media(prefers-reduced-motion:reduce){
  .ann--static .ann__track{animation:none;justify-content:center;width:100%}
  .ann--static .ann__set:last-child{display:none}
}

@media(max-width:680px){
  .ann--static .ann__i{font-size:14px;gap:6px;padding-right:18px}
  .ann--static .ann__ic{width:15px;height:15px}
  .ann--static .ann__sep{margin-right:18px}
}

/* price shown directly under the product title */
.pdp__price{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.pdp__price-now{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pdp__price-was{font-size:16px;color:var(--mute);text-decoration:line-through}

/* Product essentials stay still and readable while the page scrolls. */
.pi .pdp-static,
.pi .pdp__description,
.pi .product__description,
.pi [class*="product-description"]{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  transition:none!important;
}
.pi .pdp-static *,
.pi .pdp__description *,
.pi .product__description *,
.pi [class*="product-description"] *{
  animation:none!important;
  transition:none!important;
}
@media(max-width:520px){
  .pdp__price-now{font-size:19px}
  .pdp__price-was{font-size:14px}
}

/* ===========================================================
   Trust badges under Add to Cart — rebuilt as 3 bordered cards
   (icon, bold heading, subtext) matching the reference exactly.
   Appended last so it wins over the earlier inline-list style.
   =========================================================== */
.cp__badges{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin:16px 0 0;padding:0;
}
.cp__badges li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:22px 14px;border-radius:16px;border:0;
  background:#F0F0F0;
}
.cp__ic{
  width:48px;height:48px;display:grid;place-items:center;flex:none;
}
.cp__ic svg{width:100%;height:100%}
.cp__badges li b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.cp__badges li span:last-child{font-size:11.5px;color:var(--mute);line-height:1.3}

@media(max-width:600px){
  .cp__badges{gap:6px}
  .cp__badges li{padding:14px 8px;gap:7px}
  .cp__ic{width:36px;height:36px}
  .cp__badges li b{font-size:10.5px}
  .cp__badges li span:last-child{font-size:9px;line-height:1.25}
}

/* ===========================================================
   Social-proof bar under Add to Cart — overlapping avatar
   circles, blue verified check, bold-mixed customer-count text.
   =========================================================== */
.spbar{
  display:flex;align-items:center;gap:16px;margin-top:16px;
  padding:16px 18px;border-radius:16px;border:1px solid rgba(20,25,32,.1);
  background:#fff;
}
.spbar__av{position:relative;display:flex;align-items:center;flex:none;width:64px;height:44px}
.spbar__face{
  position:absolute;top:0;width:44px;height:44px;border-radius:100px;
  border:3px solid #fff;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;
}
.spbar__face--1{left:0;background:var(--navy);z-index:1}
.spbar__face--2{left:26px;background:#8FBBA6;z-index:0}
.spbar__check{
  position:absolute;left:52px;top:-2px;width:22px;height:22px;border-radius:100px;
  background:#1877F2;border:2.5px solid #fff;display:grid;place-items:center;z-index:2;
}
.spbar__check svg{width:12px;height:12px}
.spbar__t{font-size:16px;line-height:1.35;color:var(--ink);margin:0}
.spbar__t b{font-weight:800}

@media(max-width:520px){
  .spbar{gap:12px;padding:13px 15px}
  .spbar__av{width:54px;height:38px}
  .spbar__face{width:38px;height:38px;font-size:13px}
  .spbar__face--2{left:22px}
  .spbar__check{left:44px;width:19px;height:19px}
  .spbar__check svg{width:10px;height:10px}
  .spbar__t{font-size:13.5px}
}

/* ===========================================================
   Photo carousel — prev/next arrows, dot pagination, portrait
   rounded photo cards. Matches the "On" reference layout.
   =========================================================== */
.pgal__nav{
  display:flex;align-items:center;justify-content:center;gap:24px;
  margin-bottom:20px;
}
.pgal__arrow{
  width:38px;height:38px;border-radius:100px;border:0;background:none;
  display:grid;place-items:center;color:var(--ink);cursor:pointer;flex:none;
}
.pgal__arrow:hover{background:var(--cloud)}
.pgal__arrow svg{width:20px;height:20px}
.pgal__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:160px}
.pgal__dot{width:8px;height:8px;border-radius:100px;background:var(--hair);cursor:pointer;flex:none}
.pgal__dot.on{background:var(--ink)}

.pgal__track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.pgal__track::-webkit-scrollbar{display:none}
.pgal__card{
  flex:0 0 calc(33.333% - 9.4px);scroll-snap-align:start;
  aspect-ratio:5/8.5;border-radius:22px;overflow:hidden;background:var(--cloud);
}
.pgal__card img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:900px){
  .pgal__card{flex-basis:calc(50% - 7px)}
}
@media(max-width:600px){
  .pgal__card{flex-basis:78%}
  .pgal__nav{gap:16px;margin-bottom:14px}
}

/* ===========================================================
   Comparison table — "Why we're better" style: heading, two
   product columns (ours tinted with ONE seamless full-height
   panel, not per-row backgrounds), rows of feature + a
   checkmark-in-circle for us / plain text for them.
   =========================================================== */
.cmp2__table{
  max-width:640px;margin:40px auto 0;position:relative;
  display:grid;grid-template-columns:1fr 110px 110px;
}
.cmp2__usbg{
  grid-column:2;position:relative;z-index:0;
  background:rgba(49,92,78,.08);border-radius:22px 22px 0 0;
  margin:0 -14px;
}
.cmp2__spacer{grid-column:1}
.cmp2__col--us{grid-column:2}
.cmp2__col--them{grid-column:3}
.cmp2__head-cell{padding:18px 0 22px;align-self:end}
.cmp2__head-cell.cmp2__col--us,
.cmp2__head-cell.cmp2__col--them{position:relative;z-index:1}
.cmp2__head-cell img{width:64px;height:64px;object-fit:contain;margin:0 auto;display:block}
.cmp2__label{
  grid-column:1;position:relative;z-index:1;font-size:15px;color:var(--ink);
  display:flex;align-items:center;border-top:1px solid var(--hair);padding:16px 0;
}
.cmp2__col{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  text-align:center;border-top:1px solid var(--hair);padding:16px 0;
}
.cmp2__col.cmp2__head-cell{border-top:0}
.cmp2__dot{
  width:24px;height:24px;border-radius:100px;background:var(--navy);
  display:grid;place-items:center;
}
.cmp2__dot svg{width:13px;height:13px}
.cmp2__no{font-size:14px;color:var(--mute)}

@media(max-width:520px){
  .cmp2__table{grid-template-columns:1fr 78px 78px}
  .cmp2__usbg{margin:0 -8px}
  .cmp2__head-cell img{width:48px;height:48px}
  .cmp2__label{font-size:13.5px}
  .cmp2__dot{width:20px;height:20px}
  .cmp2__dot svg{width:11px;height:11px}
  .cmp2__no{font-size:12.5px}
}

/* ===========================================================
   Cart drawer — exact match to the reference screenshot:
   clean white panel, bold "My cart • N" title, item thumb,
   title+stepper+price on one row, "You save $X" badge in green,
   trash-icon remove, Discounts row, Subtotal row, solid black
   "Checkout • $N" button.
   =========================================================== */
.cd__panel{width:min(420px,100vw);background:#fff}
.cd__head{border-bottom:1px solid #E8E8E8;padding:18px 20px;display:flex;align-items:center;gap:6px}
.cd__title{font-size:18px;font-weight:700;color:#000;letter-spacing:-.01em}
.cd__dot{color:#000;font-size:18px;font-weight:700}
.cd__count{font-size:18px;font-weight:700;color:#000}
.cd__x{margin-left:auto;width:32px;height:32px;border-radius:100px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:#666}
.cd__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.cd__item{display:grid;grid-template-columns:80px 1fr 28px;gap:14px;align-items:start;padding:16px 20px;border-bottom:1px solid #F2F2F2}
.cd__thumb{display:block;width:80px;height:80px;border-radius:8px;overflow:hidden;flex:none;background:#F5F5F5}
.cd__thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.cd__info{display:flex;flex-direction:column;gap:6px}
.cd__name{font-size:14px;font-weight:600;color:#000;line-height:1.3;text-decoration:none}
.cd__meta{font-size:12px;color:#888}
.cd__row{display:flex;align-items:center;justify-content:space-between}
.cd__qty{display:flex;align-items:center;gap:0}
.cd__qty button{width:32px;height:32px;border-radius:8px;border:1.5px solid #E0E0E0;background:#fff;cursor:pointer;display:grid;place-items:center;font-size:17px;font-weight:500;color:#000;line-height:1}
.cd__qty b{min-width:32px;text-align:center;font-size:14px;font-weight:600;color:#000}
.cd__price{display:flex;flex-direction:column;align-items:flex-end}
.cd__price>:first-child{font-size:14px;font-weight:700;color:#000}
.cd__price s{font-size:12px;color:#888;text-decoration:line-through;font-weight:400}
.cd__save{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#12A05F;background:rgba(18,160,95,.1);border-radius:6px;padding:3px 8px;margin-top:4px;white-space:nowrap}
.cd__save svg{width:12px;height:12px;fill:#12A05F;display:none}
.cd__rm{width:28px;height:28px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:#999;padding:0;border-radius:6px;align-self:center}
.cd__rm:hover{color:#000;background:var(--cloud)}
.cd__rm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cd__foot{border-top:1px solid #E8E8E8;padding:16px 20px;display:flex;flex-direction:column;gap:10px;background:#fff}
.cd__sub{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#000}
.cd__sub span{font-weight:400;color:#444}
.cd__sub b{font-weight:700;color:#000}
.cd__sub--total span{font-weight:700;font-size:15px}
.cd__sub--total b{font-size:15px}
.cd__sub--discount b{color:#12A05F}
.cd__btn--go{background:#000!important;color:#fff!important;border-radius:12px!important;font-size:15px!important;font-weight:700!important;padding:16px!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important;border:0!important}
.cd__btn--go:hover{background:#222!important}