/* ============================================================
   PULP. — design system
   bg #0C0C08 · cream #F3E7CE · lime #D8FF36
   Display: Big Shoulders Display · Body: Onest
   Committed dark brand site — colours are literal, not themed.
   ============================================================ */

:root{
  --bg:#0C0C08;
  --bg-2:#14130E;
  --bg-3:#1B1A14;
  --cream:#F3E7CE;
  --dim:rgba(243,231,206,.56);
  --dimmer:rgba(243,231,206,.34);
  --line:rgba(243,231,206,.16);
  --lime:#D8FF36;
  --accent:#C2601A;
  --ease:cubic-bezier(.23,1,.32,1);
  --dur:.4s;
  --maxw:1280px;
  --pad:clamp(16px,4vw,52px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--cream);
  font-family:'Onest',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;text-decoration:none;}
/* Never below 16px on any form control at any width: iOS Safari (iPhone AND
   iPad) zooms the page in when a smaller one is focused and won't zoom back. */
input,select,textarea{font-family:inherit;font-size:max(1rem,16px);}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

h1,h2,h3,h4,.h-xxl,.h-xl,.h-lg{
  font-family:'Big Shoulders Display','Arial Narrow',sans-serif;
  font-weight:900;line-height:.86;letter-spacing:-.005em;
  text-transform:uppercase;text-wrap:balance;margin:0;
}
.h-xxl{font-size:clamp(3rem,10vw,8rem);}
.h-xl{font-size:clamp(2.4rem,6.4vw,5.4rem);}
.h-lg{font-size:clamp(1.8rem,3.6vw,3rem);}
p{margin:0;}
.tiny{font-size:.76rem;color:var(--dim);line-height:1.5;}
.lead{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.5;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  font-size:clamp(.95rem,1.3vw,1.15rem);letter-spacing:.1em;text-transform:uppercase;
  padding:14px 30px;border-radius:4px;border:1.5px solid transparent;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn-lime{background:var(--lime);color:#101006;}
.btn-lime:hover{background:#e6ff6b;}
.btn-cream{background:var(--cream);color:#101006;}
.btn-cream:hover{background:#fff;}
.btn-ghost{border-color:var(--line);color:var(--cream);}
.btn-ghost:hover{border-color:var(--cream);background:rgba(243,231,206,.06);}
.btn.full{width:100%;}
.btn.big{padding:18px 30px;font-size:1.2rem;}
.btn.sm{padding:10px 18px;font-size:.85rem;}
.btn.grow{flex:1;}
.btn:disabled{opacity:.4;pointer-events:none;}

/* ---------- announcement ---------- */
.annc{
  background:var(--lime);color:#101006;overflow:hidden;
  padding:7px 0;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  position:relative;z-index:70;
}
.annc-track{display:flex;gap:22px;align-items:center;white-space:nowrap;width:max-content;animation:slide 34s linear infinite;}
.annc-track i{font-style:normal;opacity:.5;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(12px,2vh,18px) var(--pad);
  transition:transform .5s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;background:transparent;
}
.hdr.hide{transform:translateY(-130%);}
.hdr.solid{background:rgba(12,12,8,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line);}
.hdr-logo{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:clamp(1.45rem,2.3vw,1.9rem);text-transform:uppercase;letter-spacing:-.02em;}
.hdr-logo em{font-style:normal;color:var(--lime);}
.hdr-nav{display:none;gap:clamp(14px,2.1vw,28px);align-items:center;}
@media(min-width:1040px){.hdr-nav{display:flex;}}
.hdr-nav a{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7;position:relative;padding:5px 0;transition:opacity .2s;}
.hdr-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--lime);transition:width .3s var(--ease);}
.hdr-nav a:hover,.hdr-nav a.active{opacity:1;}
.hdr-nav a:hover::after,.hdr-nav a.active::after{width:100%;}
.hdr-right{display:flex;align-items:center;gap:clamp(4px,.8vw,10px);}
.hdr-cta{
  display:none;border:1.5px solid currentColor;border-radius:999px;padding:9px 20px;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .28s var(--ease),color .28s var(--ease),transform .28s var(--ease);
}
@media(min-width:820px){.hdr-cta{display:inline-block;}}
.hdr-cta:hover{background:var(--lime);border-color:var(--lime);color:#101006;transform:translateY(-2px);}
.hdr-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative;transition:background-color .2s,transform .2s var(--ease);}
.hdr-icon svg{width:19px;height:19px;}
.hdr-icon:hover{background:rgba(243,231,206,.1);transform:scale(1.07);}
.cart-dot{
  position:absolute;top:0;right:-1px;min-width:18px;height:18px;padding:0 5px;
  background:var(--lime);color:#101006;border-radius:999px;font-size:.63rem;font-weight:700;
  display:grid;place-items:center;font-family:'Onest',sans-serif;
}
.hdr-burger{display:grid;gap:5px;place-content:center;}
@media(min-width:1040px){.hdr-burger{display:none;}}
.hdr-burger span{display:block;width:19px;height:1.8px;background:currentColor;transition:transform .28s var(--ease);}
.hdr-burger.open span:first-child{transform:translateY(3.4px) rotate(45deg);}
.hdr-burger.open span:last-child{transform:translateY(-3.4px) rotate(-45deg);}

.mobile-menu{
  position:fixed;top:0;left:0;right:0;z-index:58;background:var(--bg-2);
  border-bottom:1px solid var(--line);padding:86px var(--pad) 28px;
  transform:translateY(-102%);transition:transform .5s var(--ease);
}
.mobile-menu.open{transform:translateY(0);}
.mob-nav{display:flex;flex-direction:column;}
.mob-nav a{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1.9rem;text-transform:uppercase;padding:8px 0;border-bottom:1px solid var(--line);}
.mob-nav a.active{color:var(--lime);}
.mob-foot{margin-top:16px;font-size:.78rem;color:var(--dim);}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:88svh;--accent:#C2601A;}
.hero-disc{
  position:absolute;left:50%;top:54%;z-index:0;
  width:min(44svh,420px);aspect-ratio:1;border-radius:50%;background:var(--accent);
  /* centring lives in `translate`, NOT `transform`: the float loop writes an
     inline `transform` every frame and would otherwise wipe it out. */
  translate:-50% -50%;
  transition:background-color .62s var(--ease),scale .62s var(--ease);
  will-change:transform,background-color;
}
.hero-disc::after{content:"";position:absolute;inset:-26%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent) 0%,transparent 70%);}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 52%,transparent 42%,rgba(12,12,8,.74) 100%);}
.hero-hed{position:absolute;left:0;right:0;top:clamp(20px,4svh,52px);z-index:2;
  display:grid;justify-items:center;gap:.08em;text-align:center;pointer-events:none;}
.hero-hed .hh-sm{font-size:clamp(.95rem,3vw,2.2rem);letter-spacing:.05em;line-height:1;opacity:.82;}
.hero-hed .hh-lg{font-size:clamp(3.8rem,15vw,12rem);line-height:.78;letter-spacing:-.015em;}
.hero-hed em{font-style:normal;color:var(--accent);transition:color .62s var(--ease);}
.hero-rule{
  position:absolute;left:0;right:0;top:35%;z-index:2;
  display:flex;align-items:center;gap:clamp(10px,2vw,20px);padding-inline:var(--pad);
  font-size:clamp(.58rem,.85vw,.7rem);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.hero-rule b{color:var(--cream);font-weight:700;margin-left:.35em;}
.hero-rule .hr-l,.hero-rule .hr-r{white-space:nowrap;transition:opacity .3s var(--ease),transform .3s var(--ease);}
.hero-rule.swap .hr-l,.hero-rule.swap .hr-r{opacity:0;transform:translateY(-6px);}
.hr-dots{flex:1;height:1px;background-image:linear-gradient(90deg,var(--line) 0 4px,transparent 4px 10px);background-size:10px 1px;}
.hero-stage{position:absolute;inset:0;z-index:2;pointer-events:none;}
.hero-bottle{
  position:absolute;left:50%;top:54%;z-index:4;
  height:clamp(330px,60svh,660px);width:auto;max-width:none;
  /* see .hero-disc — `transform` is owned by the float loop */
  translate:-50% -50%;
  filter:drop-shadow(0 40px 56px rgba(0,0,0,.6));
  transition:opacity .34s var(--ease),scale .5s var(--ease),translate .5s var(--ease);
  will-change:transform,opacity;pointer-events:auto;cursor:pointer;
}
.hero-bottle:hover{scale:1.02;}
.hero-stage.leaving .hero-bottle{opacity:0;scale:.94;translate:calc(-50% + var(--exit,-46px)) -50%;}
.ing-layer{position:absolute;inset:0;}
.ing-layer.back{z-index:3;} .ing-layer.front{z-index:5;}
.ing{
  position:absolute;transform-origin:50% 50%;width:var(--s);height:var(--s);
  display:grid;place-items:center;
  /* Centring and rotation use the independent properties so the only thing
     that transitions is a plain number. Animating a `transform` that contains
     `translate(-50%,-50%)` re-resolves the percentage against the box every
     frame, which restarts the transition and freezes it near scale(0). */
  translate:-50% -50%;
  rotate:var(--rot);
  scale:0;
  transition:scale .72s var(--ease);will-change:transform;
}
.ing.out{scale:1;}
.ing > span{display:grid;place-items:center;width:100%;height:100%;will-change:transform;}
.ing img{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));}
.hero-arrow{
  position:absolute;top:54%;z-index:6;transform:translateY(-50%);
  width:clamp(46px,5vw,66px);aspect-ratio:1;border-radius:50%;background:var(--cream);color:#101006;
  display:grid;place-items:center;transition:transform .32s var(--ease),background-color .32s var(--ease);
}
.hero-arrow svg{width:42%;height:42%;transition:transform .32s var(--ease);}
.hero-arrow.l{left:var(--pad);} .hero-arrow.r{right:var(--pad);}
.hero-arrow:hover{transform:translateY(-50%) scale(1.04);background:var(--lime);}
.hero-arrow.l:hover svg{transform:translateX(-3px);}
.hero-arrow.r:hover svg{transform:translateX(3px);}
.hero-shop{
  position:absolute;left:50%;bottom:clamp(16px,4svh,42px);z-index:6;transform:translateX(-50%);
  background:var(--cream);color:#101006;
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:.1em;text-transform:uppercase;
  padding:clamp(12px,1.5svh,18px) clamp(34px,5vw,60px);border-radius:4px;
  transition:transform .32s var(--ease),background-color .32s var(--ease);
}
.hero-shop:hover{transform:translateX(-50%) scale(1.04);background:var(--lime);}

/* ---------- marquee ---------- */
.mq{overflow:hidden;padding:13px 0;border-block:1.5px solid var(--bg);}
.mq.lime{background:var(--lime);color:#101006;}
.mq-track{display:flex;gap:26px;align-items:center;white-space:nowrap;width:max-content;animation:slide 30s linear infinite;}
.mq-track span{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:clamp(1.2rem,2.4vw,1.9rem);text-transform:uppercase;}
.mq-track i{font-style:normal;opacity:.55;}

/* ---------- section scaffold ---------- */
.sec{max-width:var(--maxw);margin-inline:auto;padding:clamp(52px,8vw,110px) var(--pad);}
.sec.center{text-align:center;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.sec-head{margin-bottom:clamp(24px,4vw,44px);display:grid;gap:12px;}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;}
.page-head{max-width:var(--maxw);margin-inline:auto;padding:clamp(40px,7vw,90px) var(--pad) clamp(16px,2vw,28px);display:grid;gap:14px;}
.page-sub{color:var(--dim);font-size:1.02rem;line-height:1.55;max-width:56ch;}
.ok-k{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);}
.empty-note{color:var(--dim);}

/* reveal */
[data-rise],.sec-head,.pc,.band,.whyi,.way{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
[data-rise].in,.sec-head.in,.pc.in,.band.in,.whyi.in,.way.in{opacity:1;transform:none;}

/* ---------- THREE WAYS ---------- */
.ways{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.way{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:grid;background:var(--bg-2);}
.way-img{aspect-ratio:4/3;overflow:hidden;display:block;}
.way-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.way:hover .way-img img{transform:scale(1.07);}
.way-n{position:absolute;top:14px;left:16px;font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:2.4rem;color:var(--lime);}
.way-body{padding:20px;display:grid;gap:6px;}
.way-body b{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:2rem;text-transform:uppercase;}
.way-body > span{color:var(--dim);font-size:.9rem;}
.way-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);font-style:normal;}
.way-go svg{width:16px;height:16px;transition:transform .35s var(--ease);}
.way:hover .way-go svg{transform:translateX(6px);}

/* ---------- product grid / card ---------- */
.pgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.pc{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg-2);display:flex;flex-direction:column;transition:border-color .3s,transform .4s var(--ease),opacity .8s var(--ease);}
.pc:hover{border-color:var(--cream);transform:translateY(-4px);}
.pc-media{position:relative;aspect-ratio:1;display:block;overflow:hidden;background:
  radial-gradient(120% 100% at 50% 40%,color-mix(in srgb,var(--pc) 34%,transparent),transparent 70%),var(--bg-3);}
.pc-media img{width:100%;height:100%;object-fit:contain;padding:12%;transition:transform .7s var(--ease),opacity .4s var(--ease);}
.pc-alt{position:absolute;inset:0;opacity:0;object-fit:cover !important;padding:0 !important;}
.pc:hover .pc-main{transform:scale(1.06);}
.pc:hover .pc-alt{opacity:1;}
.pc-badge{position:absolute;top:10px;left:10px;background:var(--lime);color:#101006;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:3px;z-index:2;}
.pc-sold{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,12,8,.66);font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:1.6rem;text-transform:uppercase;z-index:3;}
/* flex column, not grid: `margin-top:auto` on the foot pins price + Add to the
   bottom of every card, so they share one baseline across a row even when a
   title or description wraps onto a second line. */
.pc-body{padding:16px;display:flex;flex-direction:column;gap:5px;flex:1;}
.pc-cat{font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);}
.pc-body h3{font-size:1.4rem;}
.pc-short{color:var(--dim);font-size:.83rem;line-height:1.45;}
.pc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;}
.pc-price{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1.35rem;}
.pc-add{background:var(--cream);color:#101006;border-radius:3px;padding:9px 16px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background-color .25s,transform .25s var(--ease);}
.pc-add:hover{background:var(--lime);transform:scale(1.04);}
.pc-add.done{background:var(--lime);}
.pc-add:disabled{background:var(--bg-3);color:var(--dimmer);}

/* ---------- shop bar ---------- */
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.filters{display:flex;gap:8px;flex-wrap:wrap;}
.chip{padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:all .25s var(--ease);}
.chip:hover{border-color:var(--cream);}
.chip.on{background:var(--cream);color:#101006;border-color:var(--cream);}
.sortwrap select{background:var(--bg-2);color:var(--cream);border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-size:max(.82rem,16px);}

/* ---------- benefit bands ---------- */
.bands{max-width:none;padding-inline:0;}
.band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line);}
.band{background:var(--bg);padding:clamp(26px,4vw,44px) var(--pad);display:grid;gap:8px;align-content:start;transition:background-color .35s;}
.band:hover{background:var(--lime);color:#101006;}
.band:hover .band-n{color:#101006;}
.band:hover p{color:rgba(16,16,6,.7);}
.band-n{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:2.6rem;color:var(--lime);line-height:1;}
.band b{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:1.7rem;text-transform:uppercase;}
.band p{color:var(--dim);font-size:.9rem;line-height:1.5;}

/* ---------- feature sections ---------- */
.feat{max-width:var(--maxw);margin-inline:auto;padding:clamp(48px,7vw,100px) var(--pad);display:grid;gap:clamp(24px,4vw,56px);align-items:center;}
@media(min-width:900px){.feat{grid-template-columns:1fr 1fr;} .feat.reverse .feat-copy{order:2;}}
.feat-copy{display:grid;gap:16px;justify-items:start;}
.feat-copy p{color:var(--dim);font-size:1.05rem;line-height:1.55;max-width:38ch;}
.feat-art{border-radius:6px;overflow:hidden;border:1px solid var(--line);}
.feat-art img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease);}
.feat-art:hover img{transform:scale(1.04);}

/* ---------- build teaser ---------- */
.build-teaser{display:grid;gap:26px;align-items:center;}
@media(min-width:900px){.build-teaser{grid-template-columns:1fr 1fr;}}
.bt-in{display:grid;gap:16px;justify-items:start;}
.bt-in p{color:var(--dim);font-size:1.05rem;}
.bt-fruit{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.bt-fruit span{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;border:1px solid var(--line);
  background:radial-gradient(110% 100% at 50% 40%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%),var(--bg-2);}
.bt-fruit img{width:64%;height:64%;object-fit:contain;}

/* ---------- why ---------- */
.why-grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.whyi{background:var(--bg-2);padding:clamp(22px,3vw,34px);display:grid;gap:8px;align-content:start;}
.whyi span{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:2.2rem;color:var(--lime);line-height:1;}
.whyi b{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:1.6rem;text-transform:uppercase;}
.whyi p{color:var(--dim);font-size:.88rem;line-height:1.5;}

/* ---------- reviews ---------- */
.rev-empty{border:1px dashed var(--line);border-radius:6px;padding:clamp(34px,6vw,70px);text-align:center;display:grid;gap:16px;justify-items:center;}
.rev-empty-k{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);}
.rev-empty h3{font-size:clamp(1.8rem,4vw,3.2rem);}
.rev-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.rev{border:1px solid var(--line);border-radius:6px;padding:22px;display:grid;gap:10px;background:var(--bg-2);}
.rev-stars{color:var(--lime);letter-spacing:.1em;}
.rev-text{color:var(--cream);line-height:1.55;}
.rev-photo{border-radius:4px;}
.rev footer{display:grid;gap:2px;font-size:.8rem;color:var(--dim);}
.rev-ok{color:var(--lime);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- ugc ---------- */
.ugc-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;}
.ugc-i{flex:0 0 clamp(200px,32vw,300px);aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid var(--line);scroll-snap-align:start;}
.ugc-i img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.ugc-i:hover img{transform:scale(1.06);}

/* ---------- newsletter ---------- */
.news{background:var(--lime);color:#101006;}
.news-in{max-width:var(--maxw);margin-inline:auto;padding:clamp(48px,7vw,96px) var(--pad);display:grid;gap:16px;justify-items:start;}
.news-sub{font-size:1.05rem;opacity:.78;}
.news-form{display:flex;gap:10px;flex-wrap:wrap;width:min(520px,100%);}
.news-form input{flex:1;min-width:200px;background:transparent;border:1.5px solid rgba(16,16,6,.4);border-radius:4px;padding:14px 18px;color:#101006;}
.news-form input::placeholder{color:rgba(16,16,6,.5);}
.news-form .btn-lime{background:#101006;color:var(--lime);}
.news-form .btn-lime:hover{background:#000;}
.news-msg{font-size:.86rem;font-weight:600;min-height:1.2em;}
.news-msg.err{color:#8a1408;} .news-msg.ok{color:#14400a;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(44px,6vw,80px) var(--pad) 24px;}
.foot-top{max-width:var(--maxw);margin-inline:auto;display:grid;gap:36px;}
@media(min-width:860px){.foot-top{grid-template-columns:1fr 1.4fr;}}
.foot-word{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:clamp(3rem,8vw,5.4rem);text-transform:uppercase;line-height:.85;}
.foot-word em{font-style:normal;color:var(--lime);}
.foot-brand p{color:var(--dim);margin-top:10px;max-width:30ch;}
.foot-cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
.foot-cols h4{font-size:1rem;color:var(--lime);margin-bottom:10px;}
.foot-cols a{display:block;padding:5px 0;font-size:.86rem;color:var(--dim);transition:color .2s,transform .25s var(--ease);}
.foot-cols a:hover{color:var(--cream);transform:translateX(4px);}
.foot-bot{max-width:var(--maxw);margin:32px auto 0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.76rem;color:var(--dimmer);}

/* ---------- scrim / drawer / search ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:80;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);}
.scrim.on{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:90;background:var(--bg-2);border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .5s var(--ease);display:flex;flex-direction:column;}
.drawer.on{transform:none;}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line);}
.drawer-head h2{font-size:1.5rem;}
.close-x{font-size:1.9rem;line-height:1;width:38px;height:38px;border-radius:50%;color:var(--dim);transition:background-color .2s,transform .3s var(--ease);}
.close-x:hover{background:var(--bg-3);color:var(--cream);transform:rotate(90deg);}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;display:grid;gap:14px;align-content:start;}
.drawer-foot{border-top:1px solid var(--line);padding:16px 20px 22px;display:grid;gap:10px;}

.freeship{display:grid;gap:7px;font-size:.78rem;color:var(--dim);padding-bottom:6px;}
.freeship b{color:var(--cream);}
.freeship i{display:block;height:3px;border-radius:99px;background:var(--bg-3);position:relative;overflow:hidden;}
.freeship i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--lime);transition:width .5s var(--ease);}
.freeship.done{color:var(--lime);}

.cl{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line);}
.cl-img{width:64px;height:64px;flex:none;border-radius:4px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(110% 100% at 50% 40%,color-mix(in srgb,var(--pc) 34%,transparent),transparent 70%),var(--bg-3);}
.cl-img img{width:100%;height:100%;object-fit:contain;padding:10%;}
.cl-meta{flex:1;display:grid;gap:2px;}
.cl-meta b{font-size:.94rem;font-weight:600;}
.cl-meta span{font-size:.76rem;color:var(--dim);}
.cl-note{color:var(--dimmer) !important;font-size:.72rem !important;}
.cl-rm{font-size:.72rem;color:var(--dimmer);text-decoration:underline;text-align:left;padding:2px 0;width:fit-content;}
.cl-rm:hover{color:var(--cream);}
.cl-right{display:grid;gap:8px;justify-items:end;}
.cl-price{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1.1rem;}
.qty{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 8px;}
.qty button{width:22px;height:22px;border-radius:50%;font-weight:700;display:grid;place-items:center;transition:background-color .2s;}
.qty button:hover{background:var(--bg-3);}
.qty b{min-width:16px;text-align:center;font-size:.9rem;}
.qty.big{padding:8px 14px;} .qty.big button{width:28px;height:28px;font-size:1.1rem;}
.cart-sum{display:grid;gap:7px;font-size:.88rem;}
.cart-sum > div{display:flex;justify-content:space-between;}
.cart-sum .muted{color:var(--dim);font-size:.8rem;}
.cart-sum .disc{color:var(--lime);}
.cart-empty{text-align:center;padding:50px 10px;display:grid;gap:18px;justify-items:center;}
.cart-empty h3{font-size:2rem;}
.cart-empty.big{padding:80px 10px;}
.promo{display:flex;gap:8px;}
.promo input{flex:1;background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:10px 14px;color:var(--cream);font-size:.86rem;}
.promo-msg{font-size:.76rem;min-height:1em;}
.promo-msg.ok{color:var(--lime);} .promo-msg.err{color:#ff7a5c;}

.search-panel{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--bg-2);border-bottom:1px solid var(--line);
  transform:translateY(-102%);transition:transform .45s var(--ease);max-height:86svh;overflow-y:auto;}
.search-panel.on{transform:none;}
.search-head{display:flex;gap:12px;align-items:center;padding:18px var(--pad);border-bottom:1px solid var(--line);}
.search-head input{flex:1;background:transparent;border:none;font-size:clamp(1.1rem,3vw,1.7rem);color:var(--cream);font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.search-head input:focus{outline:none;}
.search-results{padding:14px var(--pad) 26px;display:grid;gap:8px;max-width:var(--maxw);margin-inline:auto;width:100%;}
.search-hint,.search-none{color:var(--dim);font-size:.9rem;}
.search-none b{color:var(--cream);display:block;margin-bottom:4px;}
.search-none a{color:var(--lime);text-decoration:underline;}
.sres{display:flex;gap:12px;align-items:center;padding:8px;border-radius:4px;transition:background-color .2s;}
.sres:hover{background:var(--bg-3);}
.sres-img{width:52px;height:52px;border-radius:4px;overflow:hidden;display:grid;place-items:center;flex:none;
  background:radial-gradient(110% 100% at 50% 40%,color-mix(in srgb,var(--pc) 34%,transparent),transparent 70%),var(--bg-3);}
.sres-img img{width:100%;height:100%;object-fit:contain;padding:10%;}
.sres-meta{display:grid;gap:1px;}
.sres-meta span{font-size:.78rem;color:var(--dim);}

/* ---------- PDP ---------- */
.crumbs{max-width:var(--maxw);margin-inline:auto;padding:22px var(--pad) 0;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);display:flex;gap:8px;flex-wrap:wrap;}
.crumbs a:hover{color:var(--cream);}
.pdp{max-width:var(--maxw);margin-inline:auto;padding:clamp(20px,3vw,40px) var(--pad) clamp(40px,6vw,80px);display:grid;gap:clamp(22px,4vw,54px);}
/* Grid items default to min-width:auto, so the fixed-width thumbnail strip
   below would otherwise push the whole column past a 320px viewport. */
.pdp > *{min-width:0;}
@media(min-width:900px){.pdp{grid-template-columns:1.05fr .95fr;align-items:start;}}
.pdp-gal{display:grid;gap:12px;position:sticky;top:90px;}
@media(max-width:899px){.pdp-gal{position:static;}}
.pdp-main{aspect-ratio:1;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(120% 100% at 50% 40%,color-mix(in srgb,var(--pc) 32%,transparent),transparent 72%),var(--bg-2);}
.pdp-main img{width:100%;height:100%;object-fit:contain;padding:8%;}
.pdp-thumbs{display:flex;gap:8px;flex-wrap:wrap;}
.thumb{width:76px;height:76px;border:1px solid var(--line);border-radius:4px;overflow:hidden;flex:none;
  background:radial-gradient(110% 100% at 50% 40%,color-mix(in srgb,var(--pc) 26%,transparent),transparent 70%),var(--bg-2);
  transition:border-color .25s;}
.thumb.on,.thumb:hover{border-color:var(--cream);}
.thumb img{width:100%;height:100%;object-fit:contain;padding:10%;}
.pdp-info{display:grid;gap:16px;align-content:start;}
.pdp-cat{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);}
.pdp-price{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:2.4rem;}
.pdp-price span{font-size:1rem;color:var(--dim);font-family:'Onest',sans-serif;font-weight:400;}
.pdp-desc{color:var(--dim);line-height:1.6;}
.pdp-buy{display:flex;gap:10px;align-items:stretch;}
.pdp-out{border:1px solid var(--line);border-radius:6px;padding:18px;display:grid;gap:4px;}
.pdp-out b{font-family:'Big Shoulders Display',sans-serif;font-size:1.5rem;text-transform:uppercase;}
.pdp-out p{color:var(--dim);font-size:.88rem;}
.love{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:8px;}
.love h3{font-size:1.2rem;}
.love ul{margin:0;padding-left:18px;display:grid;gap:5px;color:var(--dim);font-size:.9rem;}
.spec{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.spec-row{background:var(--bg-2);padding:12px 15px;display:flex;justify-content:space-between;gap:14px;font-size:.85rem;}
.spec-row span{color:var(--dim);flex:none;}
.spec-row b{font-weight:500;text-align:right;}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--bg-2);border-top:1px solid var(--line);
  padding:12px var(--pad);display:none;justify-content:space-between;align-items:center;gap:14px;}
.sticky-buy div{display:grid;} .sticky-buy b{font-size:.92rem;} .sticky-buy span{font-size:.82rem;color:var(--dim);}
@media(max-width:899px){.sticky-buy{display:flex;} body:has(.sticky-buy) .foot{padding-bottom:90px;}}

/* ---------- build a box ---------- */
.bab{display:grid;gap:26px;align-items:start;}
@media(min-width:960px){.bab{grid-template-columns:1.4fr .6fr;}}
.bab-step{display:grid;gap:14px;margin-bottom:30px;}
.step-k{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;gap:10px;}
.step-k em{font-style:normal;color:var(--lime);}
.size-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.size-opt{border:1.5px solid var(--line);border-radius:6px;padding:16px;display:grid;gap:3px;text-align:left;transition:all .25s var(--ease);}
.size-opt:hover{border-color:var(--cream);transform:translateY(-3px);}
.size-opt.on{background:var(--lime);color:#101006;border-color:var(--lime);}
.size-opt b{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:1.6rem;text-transform:uppercase;}
.size-opt span{font-size:.76rem;opacity:.72;}
.size-opt .sp{font-weight:700;opacity:1;}
.fruit-pick{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));}
.fp{border:1.5px solid var(--line);border-radius:6px;padding:12px 8px;display:grid;gap:7px;justify-items:center;transition:all .25s var(--ease);position:relative;}
.fp:hover{transform:translateY(-3px);border-color:var(--c);}
.fp-img{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(110% 100% at 50% 40%,color-mix(in srgb,var(--c) 40%,transparent),transparent 72%),var(--bg-3);}
.fp-img img{width:78%;height:78%;object-fit:contain;}
.fp-n{font-size:.74rem;font-weight:600;}
.fp.on{background:var(--c);color:#101006;border-color:var(--c);}
.fp.on .fp-img{background:rgba(255,255,255,.35);}
.fp.on::after{content:"✓";position:absolute;top:6px;right:8px;font-size:.72rem;font-weight:800;}
.fp.maxed{opacity:.35;}
.bab-side{border:1px solid var(--line);border-radius:6px;padding:20px;display:grid;gap:16px;position:sticky;top:90px;background:var(--bg-2);}
@media(max-width:959px){.bab-side{position:static;}}
.bab-box{border:1px dashed var(--line);border-radius:6px;padding:14px;display:grid;gap:10px;}
.bab-lid{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:.9rem;letter-spacing:.16em;color:var(--dimmer);}
.bab-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.slot{aspect-ratio:1;border-radius:4px;background:var(--bg-3);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;}
.slot.filled{border-color:transparent;background:radial-gradient(110% 100% at 50% 40%,color-mix(in srgb,var(--c) 46%,transparent),transparent 74%),var(--bg-3);animation:pop .4s var(--ease);}
.slot img{width:76%;height:76%;object-fit:contain;}
@keyframes pop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
.bab-sum{display:grid;gap:8px;font-size:.86rem;}
.bab-sum > div{display:flex;justify-content:space-between;gap:12px;color:var(--dim);}
.bab-sum b{color:var(--cream);text-align:right;font-weight:600;}
.bab-sum .tot{border-top:1px solid var(--line);padding-top:10px;}
.bab-sum .tot b{font-family:'Big Shoulders Display',sans-serif;font-size:1.7rem;font-weight:800;color:var(--lime);}

/* ---------- cart page / checkout / success ---------- */
.cp-grid{display:grid;gap:26px;}
@media(min-width:880px){.cp-grid{grid-template-columns:1.5fr .5fr;align-items:start;}}
.cp-lines{display:grid;gap:14px;}
.cl.big .cl-img{width:88px;height:88px;}
.cp-sum,.co-sum{border:1px solid var(--line);border-radius:6px;padding:20px;display:grid;gap:10px;background:var(--bg-2);font-size:.9rem;}
.cp-sum > div{display:flex;justify-content:space-between;}
.cp-sum .muted,.co-line.muted{color:var(--dim);}
.cp-sum .disc,.co-line.disc{color:var(--lime);}
.co{display:grid;gap:26px;align-items:start;}
@media(min-width:900px){.co{grid-template-columns:1.4fr .6fr;}}
.co-form{display:grid;gap:22px;}
.co-form fieldset{border:1px solid var(--line);border-radius:6px;padding:20px;display:grid;gap:14px;margin:0;}
.co-form legend{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:1.3rem;text-transform:uppercase;padding-inline:8px;}
.co-form label{display:grid;gap:6px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.co-form input,.co-form select,.co-form textarea{
  background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:13px 15px;color:var(--cream);
  font-size:max(.95rem,16px);font-weight:400;letter-spacing:normal;text-transform:none;
}
.co-form input:focus,.co-form select:focus,.co-form textarea:focus{border-color:var(--lime);outline:none;}
.f2{display:grid;gap:14px;} @media(min-width:640px){.f2{grid-template-columns:1fr 1fr;}}
.f3{display:grid;gap:14px;} @media(min-width:640px){.f3{grid-template-columns:1fr 1fr 1fr;}}
.pay{display:grid;gap:10px;}
.pay-opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:6px;padding:15px;cursor:pointer;transition:border-color .25s;text-transform:none;letter-spacing:normal;}
.pay-opt:hover{border-color:var(--cream);}
.pay-opt:has(input:checked){border-color:var(--lime);background:rgba(216,255,54,.05);}
.pay-opt input{margin-top:3px;accent-color:var(--lime);}
.pay-opt span{display:grid;gap:2px;}
.pay-opt b{color:var(--cream);font-size:.98rem;font-weight:600;}
.pay-opt i{font-style:normal;font-size:.8rem;color:var(--dim);}
.pay-opt.off{opacity:.5;cursor:not-allowed;}
.co-err{color:#ff7a5c;font-size:.88rem;min-height:1.1em;}
.co-line{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:3px 0;}
.co-line.tot{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;font-size:1rem;}
.co-line.tot b{font-family:'Big Shoulders Display',sans-serif;font-size:1.6rem;font-weight:800;color:var(--lime);}
.co-sum h3{font-size:1.3rem;margin-bottom:6px;}
.page-head.success .h-xxl{color:var(--lime);}
.os{display:grid;gap:16px;} @media(min-width:800px){.os{grid-template-columns:1fr 1fr;}}
.os-card{border:1px solid var(--line);border-radius:6px;padding:22px;background:var(--bg-2);display:grid;gap:6px;align-content:start;}
.os-card h3{font-size:1.3rem;margin-bottom:6px;}
.os-card h3.mt{margin-top:14px;}
.os-addr{color:var(--dim);line-height:1.6;font-size:.92rem;}

/* ---------- about / faq / legal / contact ---------- */
.story{display:grid;gap:30px;} @media(min-width:900px){.story{grid-template-columns:1fr 1fr;align-items:center;}}
.story-copy{display:grid;gap:16px;color:var(--dim);line-height:1.6;}
.story-copy .lead{color:var(--cream);}
.story-art{border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.big-art{padding-bottom:clamp(30px,5vw,60px);}
.faq{display:grid;gap:8px;max-width:820px;}
.acc{border:1px solid var(--line);border-radius:6px;background:var(--bg-2);overflow:hidden;}
.acc summary{padding:18px 20px;cursor:pointer;font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1.3rem;text-transform:uppercase;display:flex;justify-content:space-between;gap:14px;align-items:center;list-style:none;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary i{width:12px;height:12px;flex:none;position:relative;}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;background:var(--lime);transition:transform .3s var(--ease);}
.acc summary i::before{inset:5px 0;height:2px;}
.acc summary i::after{inset:0 5px;width:2px;}
.acc[open] summary i::after{transform:scaleY(0);}
.acc-body{padding:0 20px 18px;color:var(--dim);line-height:1.6;font-size:.94rem;}
.legal{max-width:760px;display:grid;gap:14px;color:var(--dim);line-height:1.7;}
.legal h3{font-size:1.4rem;color:var(--cream);margin-top:12px;}
.legal ul{padding-left:18px;display:grid;gap:6px;}
.legal-flag{border:1px solid var(--lime);border-radius:6px;padding:14px 16px;color:var(--cream);background:rgba(216,255,54,.06);font-size:.9rem;}
.contact{display:grid;gap:26px;} @media(min-width:880px){.contact{grid-template-columns:1.3fr .7fr;align-items:start;}}
.contact-side{border:1px solid var(--line);border-radius:6px;padding:20px;display:grid;gap:10px;background:var(--bg-2);}
.contact-side h3{font-size:1.2rem;}
.contact-side h3.mt{margin-top:12px;}
.cs-row{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--line);}
.cs-row b{font-size:.95rem;}
.cs-row span{font-size:.8rem;color:var(--dim);}
.cs-row.off{opacity:.55;}

/* ---------- toast / whatsapp ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,24px);z-index:120;background:var(--cream);color:#101006;
  padding:13px 24px;border-radius:4px;font-size:.88rem;font-weight:600;opacity:0;pointer-events:none;transition:all .4s var(--ease);}
.toast.on{opacity:1;transform:translate(-50%,0);}
.wa{position:fixed;right:18px;bottom:18px;z-index:75;width:52px;height:52px;border-radius:50%;background:#25D366;color:#06210F;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .3s var(--ease);}
.wa:hover{transform:scale(1.08);}
.wa svg{width:28px;height:28px;}
@media(max-width:899px){.wa{bottom:78px;}}

/* ---------- motion prefs ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  [data-rise],.sec-head,.pc,.band,.whyi,.way{opacity:1 !important;transform:none !important;}
  .ing{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1) !important;}
  html{scroll-behavior:auto;}
}

/* ---------- mobile hero ---------- */
@media (max-width:760px){
  .hero{min-height:84svh;}
  .hero-hed{top:clamp(14px,3svh,34px);}
  .hero-hed .hh-lg{font-size:clamp(3.2rem,19vw,6rem);}
  /* lifted clear of the back-layer ingredients, which sit at y:33% */
  .hero-rule{top:24%;letter-spacing:.14em;}
  .hero-bottle{height:clamp(270px,50svh,450px);top:56%;}
  .hero-disc{width:min(34svh,250px);top:56%;}
  .hero-arrow{top:auto;bottom:clamp(78px,13svh,116px);transform:none;}
  .hero-arrow:hover{transform:none;}
  .hero-arrow.l{left:12px;} .hero-arrow.r{right:12px;}

  /* ----- touch ergonomics -----
     iOS Safari zooms the whole page when a form control under 16px is
     focused, and never zooms back out. 16px on every control prevents it. */
  input,select,textarea,
  .sortwrap select,
  .co-form input,.co-form select,.co-form textarea{font-size:16px;}

  /* 44px minimum tap target (Apple HIG / WCAG 2.5.5). */
  .qty button,.qty.big button{width:44px;height:44px;font-size:1.15rem;}
  .qty{gap:2px;padding:2px 6px;}
  .qty.big{padding:2px 8px;}
  .pc-add{min-height:44px;padding-inline:20px;font-size:.75rem;}
  .chip{min-height:44px;display:inline-flex;align-items:center;}
  .sortwrap select{min-height:44px;}
  .foot-cols a{min-height:44px;display:flex;align-items:center;padding:4px 0;}
  .mob-nav a{min-height:48px;display:flex;align-items:center;}
  .crumbs a,.crumbs span{padding-block:13px;display:inline-block;}
  .hdr-logo{padding:6px 2px;}
  .close-x{width:44px;height:44px;}
  .search-head input{min-height:44px;}
  /* Card titles stay compact: the product image above each is a 300px+ link
     to the same page, so WCAG 2.5.5's equivalent-target exception applies. */

  /* nothing under ~11px: 9–10px type is unreadable on a phone */
  .hero-rule{font-size:.7rem;}
  .pc-cat{font-size:.7rem;}
  .pc-badge{font-size:.72rem;}
  .cart-dot{font-size:.72rem;}
  .pdp-cat{font-size:.72rem;}
  .step-k{font-size:.74rem;}
  .cost-note span{font-size:.78rem;}
}

/* ---------- pricing / weight / cost surfaces ---------- */
.bundle-save{
  display:inline-block;background:rgba(216,255,54,.1);border:1px solid rgba(216,255,54,.35);
  border-radius:4px;padding:8px 13px;font-size:.84rem;color:var(--cream);
}
.bundle-save s{color:var(--dimmer);} .bundle-save b{color:var(--lime);}
.eat-blend{
  border-left:3px solid var(--lime);padding:9px 0 9px 14px;font-size:.93rem;
  color:var(--dim);line-height:1.5;
}
.eat-blend b{color:var(--cream);}
.cost-note{
  border:1px dashed var(--line);border-radius:4px;padding:12px 14px;
  font-size:.8rem;color:var(--dim);line-height:1.5;display:grid;gap:5px;
}
.cost-note b{color:var(--cream);}
.cost-note span{font-size:.73rem;color:var(--dimmer);}
.cost-note code{background:var(--bg-3);padding:1px 5px;border-radius:3px;font-size:.92em;}
.two-ways{display:grid;gap:12px;margin:4px 0 6px;}
@media(min-width:540px){.two-ways{grid-template-columns:1fr 1fr;}}
.two-ways div{border-top:2px solid var(--lime);padding-top:10px;display:grid;gap:4px;}
.two-ways b{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:1.25rem;text-transform:uppercase;}
.two-ways span{font-size:.85rem;color:var(--dim);line-height:1.45;}

/* ---------- shipping method chooser ---------- */
.ship{display:grid;gap:10px;}
.ship-hint{font-size:.85rem;color:var(--dim);line-height:1.5;text-transform:none;letter-spacing:normal;}
.ship-opt{
  display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:6px;padding:15px;cursor:pointer;transition:border-color .25s,background-color .25s;
  text-transform:none;letter-spacing:normal;
}
.ship-opt:hover{border-color:var(--cream);}
.ship-opt:has(input:checked){border-color:var(--lime);background:rgba(216,255,54,.05);}
.ship-opt input{margin-top:4px;accent-color:var(--lime);flex:none;}
.ship-body{display:grid;gap:3px;flex:1;min-width:0;}
.ship-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.ship-top > b{color:var(--cream);font-size:.98rem;font-weight:600;}
/* price never wraps, so a long method name shrinks instead of the number */
.ship-price{display:flex;align-items:baseline;gap:6px;white-space:nowrap;flex:none;}
.ship-price b{color:var(--cream);font-size:.98rem;font-weight:600;}
.ship-price s{color:var(--dimmer);font-size:.8rem;}
.ship-free{color:var(--lime);}
.ship-opt i{font-style:normal;font-size:.8rem;color:var(--dim);line-height:1.45;}

/* ---------- delivery rate table ---------- */
.rate-table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:.9rem;}
.rate-table th,.rate-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);}
.rate-table th{
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:.82rem;color:var(--cream);
}
.rate-table td{color:var(--dim);font-variant-numeric:tabular-nums;}
.rate-table td:first-child{color:var(--cream);}
@media(max-width:560px){
  /* stack the table into labelled rows rather than letting it scroll sideways */
  .rate-table thead{display:none;}
  .rate-table tr{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--line);}
  .rate-table td{border:none;padding:2px 0;display:flex;justify-content:space-between;gap:14px;}
  .rate-table td:first-child{font-weight:600;margin-bottom:4px;}
  .rate-table td:nth-child(2)::before{content:"Greater Cairo";color:var(--dimmer);}
  .rate-table td:nth-child(3)::before{content:"Other governorates";color:var(--dimmer);}
  .rate-table td:nth-child(4)::before{content:"Arrives";color:var(--dimmer);}
}