/* =========================================================
   we need good food: design system
   colours: brand system p.29-30 · type: dazzle unicase (lowercase) + panel sans
   graphics: the O, thick semi-circle, wavy lines, asterisk, dot ring (brand system p.32-34)
   ========================================================= */
@font-face{font-family:"Dazzle Unicase";src:url("../fonts/Dazzle_Unicase_Thin.otf") format("opentype");font-weight:100;font-display:swap}
@font-face{font-family:"Dazzle Unicase";src:url("../fonts/Dazzle_Unicase_Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Dazzle Unicase";src:url("../fonts/Dazzle_Unicase_Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Dazzle Unicase";src:url("../fonts/Dazzle_Unicase_Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Panel Sans";src:url("../fonts/Panel_Sans_Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Panel Sans";src:url("../fonts/Panel_Sans_Bold_Italic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Panel Sans";src:url("../fonts/Panel_Sans_Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Panel Sans";src:url("../fonts/Panel_Sans_Black_Italic.otf") format("opentype");font-weight:900;font-style:italic;font-display:swap}

:root{
  /* main brand colours (p.30) */
  --navy:#00246e; --coral:#ff5a58; --orange:#f4982c; --green:#6bb370; --black:#000; --white:#fff;
  /* secondary (p.30) */
  --electric:#222bf3; --brick:#b03624; --sun:#fcae4a; --forest:#006851;
  /* flavour palette (p.29) */
  --purple:#606cc2; --sky:#7eb8e6; --salmon:#f89880; --yellow:#ffcd4a; --amber:#ffc000; --lime:#a5c606; --pink:#e89dbf;
  --paper:#fdf9f1;

  --display:"Dazzle Unicase","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Panel Sans","Helvetica Neue",Arial,sans-serif;

  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;--s8:112px;
  --radius:clamp(28px,4.5vw,56px);
  --ease:cubic-bezier(.2,.75,.2,1);
  --wrap:1240px;
  --gutter:clamp(18px,4vw,48px);
  --navh:72px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 12px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--body);font-weight:700;font-size:1.0625rem;line-height:1.6;overflow-x:clip;padding-top:var(--navh)}
img,video,svg{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4,p,ol,ul,figure,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--electric);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.nav :focus-visible{outline-color:var(--yellow)}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:12px 18px;z-index:999;border-radius:10px}
.skip:focus{left:8px}
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* every headline and major type: dazzle unicase, always lowercase */
.dz,h1,h2,h3,.btn,.chip,.nav__links a,.eyebrow,.sticker,.tab{font-family:var(--display);text-transform:lowercase;font-weight:700;letter-spacing:.004em}
h1,h2,h3{line-height:.95;text-wrap:balance}
h1{font-size:clamp(3.2rem,9.4vw,8.8rem)}
h2{font-size:clamp(2.4rem,6.4vw,5.6rem)}
h3{font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1}
.h-xl{font-size:clamp(3rem,10vw,9rem);line-height:.92}
.eyebrow{font-size:1.1rem;letter-spacing:.08em;margin-bottom:var(--s3);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:16px;height:16px;border-radius:50%;border:4px solid currentColor}
.lead{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.45;max-width:46ch;margin-top:var(--s4)}
.copy p+p{margin-top:var(--s3)}
.italic{font-style:italic;font-weight:900}

/* ---------- colour themes: full-bleed, bold ---------- */
.blk{position:relative;background:var(--bg,var(--paper));color:var(--fg,var(--navy));padding:clamp(72px,11vw,150px) 0;overflow:clip;isolation:isolate}
.blk--round{border-radius:var(--radius) var(--radius) 0 0;margin-top:calc(var(--radius) * -1);z-index:1}
.t-navy{--bg:var(--navy);--fg:#fff}
.t-coral{--bg:var(--coral);--fg:var(--navy)}
.t-orange{--bg:var(--orange);--fg:var(--navy)}
.t-green{--bg:var(--green);--fg:var(--navy)}
.t-electric{--bg:var(--electric);--fg:#fff}
.t-purple{--bg:var(--purple);--fg:#fff}
.t-sky{--bg:var(--sky);--fg:var(--navy)}
.t-salmon{--bg:var(--salmon);--fg:var(--navy)}
.t-yellow{--bg:var(--yellow);--fg:var(--navy)}
.t-paper{--bg:var(--paper);--fg:var(--navy)}
.t-forest{--bg:var(--forest);--fg:#fff}
.t-navy,.t-electric,.t-purple,.t-forest{--accent:var(--yellow)}
.t-coral,.t-orange,.t-green,.t-sky,.t-salmon,.t-yellow,.t-paper{--accent:var(--electric)}
.t-coral .eyebrow,.t-paper .eyebrow{color:var(--electric)}
.t-navy .eyebrow{color:var(--coral)}

/* ---------- graphic system shapes ---------- */
.shape{position:absolute;pointer-events:none;z-index:-1;--c:var(--accent,#fff)}
.ring{--s:340px;width:var(--s);aspect-ratio:1;border-radius:50%;border:calc(var(--s)*.19) solid var(--c)}
.disc{--s:200px;width:var(--s);aspect-ratio:1;border-radius:50%;background:var(--c)}
.semi{--s:360px;width:var(--s);height:calc(var(--s)/2);background:var(--c);border-radius:0 0 var(--s) var(--s);
  -webkit-mask:radial-gradient(circle at 50% 0,transparent calc(var(--s)*.27),#000 calc(var(--s)*.27 + 1px));mask:radial-gradient(circle at 50% 0,transparent calc(var(--s)*.27),#000 calc(var(--s)*.27 + 1px))}
.waves,.asterisk,.dotring{background:var(--c);-webkit-mask-repeat:repeat;mask-repeat:repeat}
.waves{width:var(--w,300px);height:var(--h,120px);-webkit-mask-image:var(--m-waves);mask-image:var(--m-waves);-webkit-mask-size:100px 40px;mask-size:100px 40px}
.asterisk{--s:200px;width:var(--s);aspect-ratio:1;-webkit-mask-image:var(--m-asterisk);mask-image:var(--m-asterisk);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.dotring{--s:200px;width:var(--s);aspect-ratio:1;-webkit-mask-image:var(--m-dotring);mask-image:var(--m-dotring);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.spin{animation:spin 40s linear infinite}
.float{animation:float 7s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-18px) rotate(3deg)}}

/* ---------- buttons ---------- */
.btn{--b:var(--coral);--t:var(--navy);display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 32px;border-radius:999px;background:var(--b);color:var(--t);border:3px solid var(--navy);text-decoration:none;font-size:1.25rem;line-height:1;transition:transform .3s var(--ease),background .25s,color .25s,box-shadow .3s;box-shadow:0 5px 0 var(--navy)}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--navy)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
.btn svg{width:22px;height:22px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn--navy{--b:var(--navy);--t:#fff;border-color:var(--navy);box-shadow:0 5px 0 rgba(0,0,0,.35)}
.btn--white{--b:#fff;--t:var(--navy)}
.btn--yellow{--b:var(--yellow);--t:var(--navy)}
.btn--ghost{--b:transparent;--t:currentColor;border-color:currentColor;box-shadow:none}
.btn--ghost:hover{box-shadow:none;background:rgba(255,255,255,.18)}
.btn--sm{min-height:46px;padding:0 22px;font-size:1.05rem;box-shadow:0 3px 0 var(--navy)}
.on-dark .btn:not(.btn--ghost),.t-navy .btn:not(.btn--ghost),.t-electric .btn:not(.btn--ghost),.t-purple .btn:not(.btn--ghost){border-color:#000;box-shadow:0 5px 0 rgba(0,0,0,.45)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.btns--sep{margin-top:var(--s7)}

/* stickers (from the catalogue) */
.sticker{display:inline-grid;place-content:center;text-align:center;width:112px;height:112px;padding:10px;border-radius:50%;line-height:1;font-size:1.02rem;background:var(--green);color:var(--navy);transform:rotate(-10deg);border:3px solid var(--navy)}
.sticker b{display:block;font-weight:700}
.sticker--new{background:var(--orange)}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:4px 14px;border-radius:8px;border:none;background:rgba(0,36,110,.1);font-size:.85rem}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.on-dark .chip,.t-navy .chip,.t-electric .chip,.t-purple .chip,.t-forest .chip{background:rgba(255,255,255,.18)}

/* read more: a plain text toggle, never styled like a .btn, for long copy the reader can opt into */
.expand{margin-top:var(--s4)}
.expand summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-family:var(--display);text-transform:lowercase;font-weight:700;font-size:1.05rem;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.expand summary::-webkit-details-marker{display:none}
.expand summary::after{content:"";width:9px;height:9px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease);flex:none}
.expand[open] summary::after{transform:rotate(-135deg)}
.expand summary:hover{opacity:.7}
.expand__body{padding-top:var(--s3);display:grid;gap:var(--s3)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--navh);z-index:500;display:flex;align-items:center;justify-content:flex-end;gap:var(--s4);padding:0 var(--gutter);background:var(--navy);color:#fff;transition:transform .4s var(--ease)}
.nav__logo{position:absolute;left:var(--gutter);top:0;z-index:3;display:block;background:var(--navy);padding:8px 20px 14px;border-radius:0 0 28px 28px;box-shadow:0 5px 0 rgba(0,0,0,.28);transition:transform .35s var(--ease)}
.nav__logo:hover{transform:translateY(3px) rotate(-1deg)}
.nav__logo img{height:clamp(58px,6.4vw,92px);width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.nav__links a:not(.btn){text-decoration:none;font-size:1.2rem;position:relative;padding:10px 0;white-space:nowrap}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:12px;background:var(--coral);-webkit-mask:var(--m-waves) 0 0/34px 14px repeat-x;mask:var(--m-waves) 0 0/34px 14px repeat-x;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a:not(.btn):hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links .btn{--b:var(--coral);border-color:#000;box-shadow:0 3px 0 #000;min-height:44px;font-size:1.1rem;padding:0 22px}
.nav__toggle{display:none;width:48px;height:48px;border:0;background:none;position:relative;color:#fff}
.nav__toggle span{position:absolute;left:11px;right:11px;height:4px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),top .3s}
.nav__toggle span:first-child{top:17px}.nav__toggle span:last-child{top:27px}
.nav__toggle[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}

/* page wipe (circle expands in the destination colour) */
.wipe{position:fixed;inset:0;z-index:900;pointer-events:none;background:var(--wipe,var(--coral));clip-path:circle(0% at var(--wx,50%) var(--wy,50%));visibility:hidden}
.wipe.is-in{visibility:visible;clip-path:circle(150% at var(--wx,50%) var(--wy,50%));transition:clip-path .55s var(--ease)}
.wipe.is-out{visibility:visible;clip-path:circle(0% at 50% 50%);transition:clip-path .6s var(--ease)}
.wipe.is-start{visibility:visible;clip-path:circle(150% at 50% 50%)}

/* ---------- opening animation (home) ---------- */
html.intro-on,html.intro-on body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:1000;display:none;color:var(--navy);font-family:var(--display)}
html.intro-on .intro,html.intro-leave .intro{display:block}
.intro__strips{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}
.intro__strips i{display:block;margin-inline:-1px;background:var(--coral);transition:background .12s linear;will-change:transform}
.intro.is-exit .intro__strips i{transition:transform .95s cubic-bezier(.7,0,.2,1) calc(var(--i) * 70ms),background .2s;transform:translateY(-101%)}
.intro__shapes{position:absolute;inset:0;pointer-events:none}
.intro__shapes .shape{z-index:1;--c:#fff;opacity:.9;will-change:transform}
.intro__center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s4);text-align:center;padding:0 var(--gutter);z-index:3;transition:opacity .35s,transform .5s var(--ease)}
.intro__logo{width:clamp(180px,26vw,320px);animation:pop .7s var(--ease) both;transition:filter .25s}
.intro.is-coral-bg .intro__logo{filter:brightness(0) invert(1)}
.intro__words{font-size:clamp(1.8rem,5.4vw,4.2rem);line-height:1;color:#fff;min-height:1.1em;text-transform:lowercase;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.intro__words span{display:inline-block;animation:pop .4s var(--ease) both}
.intro__count{position:absolute;left:var(--gutter);bottom:calc(var(--gutter) * .7);z-index:3;font-size:clamp(4rem,16vw,13rem);line-height:.8;color:var(--navy);font-variant-numeric:tabular-nums;transition:opacity .3s}
.intro__bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--gutter) * .35);height:8px;border-radius:4px;background:rgba(0,36,110,.22);z-index:3;overflow:hidden;transition:opacity .3s}
.intro__bar b{display:block;height:100%;width:0;background:var(--navy);border-radius:4px}
.intro__skip{position:absolute;right:var(--gutter);top:var(--gutter);z-index:4;min-height:44px;padding:0 20px;border-radius:999px;border:3px solid var(--navy);background:transparent;color:var(--navy);font-family:var(--display);text-transform:lowercase;font-size:1.05rem}
.intro__skip:hover{background:var(--navy);color:#fff}
.intro.is-exit .intro__center,.intro.is-exit .intro__count,.intro.is-exit .intro__bar,.intro.is-exit .intro__skip,.intro.is-exit .intro__shapes{opacity:0;transform:scale(.9)}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}

/* ---------- hero (home): the family shot ---------- */
.hero{position:relative;background:#f3e6d3;overflow:clip;height:max(calc(100svh - var(--navh)),380px);padding-bottom:var(--radius);display:grid;place-items:center}
.hero__bg{position:absolute;inset:-6%;background:url("../img/family.jpg") center/cover;filter:blur(28px) saturate(1.1);opacity:.9}
.hero__img{position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--radius));object-fit:contain;object-position:center}
/* hero product reel: a "stories"-style auto-advancing carousel of the family shot + each pack */
.herocarousel__bars{position:absolute;top:18px;left:var(--gutter);right:var(--gutter);z-index:6;display:flex;gap:6px}
.herocarousel__bars i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.4);overflow:hidden;display:block}
.herocarousel__bars i b{display:block;height:100%;width:0;background:#fff;border-radius:4px}
@keyframes barfill{from{width:0}to{width:100%}}

/* the headline lives inside each slide now (not the family shot, which already carries its own
   copy in the photo). the whole block (headline + subline) is one solid-fill, navy-bordered,
   drop-shadowed card - the same formula the rest of the site uses for buttons and stickers, not a
   one-off effect - filled with that flavour's own brand colour so it reads as belonging to the SKU.
   text colour is that flavour's own card ink (already tuned per-SKU for readability on its own
   colour, e.g. white on the darker flavours), not one fixed colour for all seven. */
.herocarousel__header{position:absolute;left:0;right:0;top:56px;z-index:3;text-align:center;padding:0 var(--gutter)}
.herocarousel__pill{display:inline-block;background:var(--pill);color:var(--pillink);border:5px solid var(--navy);border-radius:36px;box-shadow:0 8px 0 var(--navy);padding:.5em clamp(28px,5vw,48px)}
.herocarousel__pill h2{font-size:clamp(1.9rem,5vw,3.6rem);line-height:1;margin:0;letter-spacing:-.01em}
.herocarousel__pill p{font-family:var(--display);text-transform:lowercase;font-weight:300;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1;margin:10px 0 0;color:inherit;opacity:.85}
@media (max-width:600px){ .herocarousel__pill p{display:none} }

.herocarousel__track{position:absolute;inset:0}
.herocarousel__slide{position:absolute;inset:0;overflow:hidden;background:var(--bg,#f3e6d3);color:var(--ink,var(--navy));opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.herocarousel__slide.is-active{opacity:1;pointer-events:auto;z-index:1}

/* centers in the space below the pill, not across the whole hero - so the pack doesn't need to
   shrink nearly as much to clear the pill, it just sits lower instead. the pill's own height varies
   with viewport width (clamp()-based), so this reserves a flat worst-case amount rather than guessing
   exactly - a little extra breathing room above the pack on a small pill is harmless. */
.herocarousel__packwrap{position:absolute;top:150px;right:0;bottom:0;left:0;display:grid;place-items:center}
/* .box handles the 2D energy (tilt + zoom); .flip handles only the 3D turn. kept apart because mixing
   a Z-axis rotate into the same transform as rotateY makes the backface math unreliable. */
/* width only, via vw/px, ignored how much vertical room was actually available - fine on a tall
   desktop monitor, but on a shorter window (laptop, iPad landscape/portrait) the pack still grew to
   the same size and then the zoom-in animation (up to ~1.46x) pushed it up into the headline pill.
   the calc(vh) term only engages once height is actually the tighter constraint. */
.herocarousel__box{position:relative;width:min(78vw,620px,calc(68vh - 260px));aspect-ratio:1;perspective:1200px}
/* a solid "plate" the pack rests on, sized/positioned so it keeps peeking out from behind the pack as
   both grow together (it's a child of .box, so it scales and tilts along with it for free) */
.herocarousel__plate{position:absolute;width:78%;aspect-ratio:1;left:16%;top:22%;border-radius:50%;background:var(--plate,var(--ink))}
.herocarousel__flip{position:absolute;inset:0;transform-style:preserve-3d}
.herocarousel__boxface{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.herocarousel__boxface img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 20px rgba(0,0,0,.32))}
.herocarousel__boxface--side{transform:rotateY(180deg)}

/* three genuinely different movement languages, not the same move re-timed:
   flip  - turns to show the side shot, then back to the top shot. the turn is the whole point,
           so no extra zoom flourish once it lands.
   shake - never turns at all (the profile shot is never shown) - a quick decaying left-right
           wobble while it slowly zooms in.
   spin  - never turns either - one flat 360deg spin in its own plane while it zooms in.
   all three settle on the same "larger top shot" resting size, then the animation ends there and
   holds (the extra static half-second comes from the slide staying up longer than the animation). */
@keyframes heroTiltFlip{0%{transform:rotate(0) scale(1.2)}45%{transform:rotate(-6deg) scale(1.6)}100%{transform:rotate(0) scale(1.46)}}
@keyframes heroFlipFlip{0%{transform:rotateY(0)}45%{transform:rotateY(200deg)}100%{transform:rotateY(360deg)}}
.v0.is-active .herocarousel__box{animation:heroTiltFlip 2.2s cubic-bezier(.25,.8,.3,1) both}
.v0.is-active .herocarousel__flip{animation:heroFlipFlip 2.2s cubic-bezier(.25,.8,.3,1) both}

@keyframes heroTiltShake{
  0%{transform:rotate(0) scale(1)}
  12%{transform:rotate(-14deg) scale(1.08)}
  26%{transform:rotate(12deg) scale(1.16)}
  40%{transform:rotate(-9deg) scale(1.24)}
  55%{transform:rotate(6deg) scale(1.3)}
  70%{transform:rotate(-3deg) scale(1.36)}
  85%{transform:rotate(1deg) scale(1.4)}
  100%{transform:rotate(0) scale(1.42)}
}
.v1.is-active .herocarousel__box{animation:heroTiltShake 1.3s cubic-bezier(.3,.6,.3,1) both}

@keyframes heroTiltSpin{0%{transform:rotate(0) scale(1)}75%{transform:rotate(380deg) scale(1.44)}100%{transform:rotate(360deg) scale(1.4)}}
.v2.is-active .herocarousel__box{animation:heroTiltSpin 1.5s cubic-bezier(.3,.7,.25,1) both}

.herocarousel__controls{position:absolute;left:0;right:0;bottom:calc(var(--radius) + 18px);z-index:6;margin:0}
.herocarousel__controls .arrow{border-color:rgba(255,255,255,.75);color:#fff}
.herocarousel__controls .arrow:hover{background:#fff;color:var(--navy)}
#heroPlay svg{width:20px;height:20px}
@media (max-width:600px){
  .herocarousel__header{top:48px}
  .herocarousel__pill{border-width:4px;box-shadow:0 6px 0 var(--navy);padding:.4em 24px}
  .herocarousel__pill h2{font-size:clamp(1.5rem,7vw,2.2rem)}
  .herocarousel__controls{bottom:calc(var(--radius) + 20px)}
  .herocarousel__box{width:min(66vw,320px)}
  .herocarousel__packwrap{top:90px}
  /* the desktop sizes above got a boost; mobile already landed right, so it keeps its own numbers */
  @keyframes heroTiltFlip{0%{transform:rotate(0) scale(1.2)}45%{transform:rotate(-6deg) scale(1.65)}100%{transform:rotate(0) scale(1.5)}}
  @keyframes heroTiltShake{
    0%{transform:rotate(0) scale(1)}
    12%{transform:rotate(-14deg) scale(1.05)}
    26%{transform:rotate(12deg) scale(1.1)}
    40%{transform:rotate(-9deg) scale(1.16)}
    55%{transform:rotate(6deg) scale(1.2)}
    70%{transform:rotate(-3deg) scale(1.25)}
    85%{transform:rotate(1deg) scale(1.28)}
    100%{transform:rotate(0) scale(1.3)}
  }
  @keyframes heroTiltSpin{0%{transform:rotate(0) scale(1)}75%{transform:rotate(380deg) scale(1.3)}100%{transform:rotate(360deg) scale(1.28)}}
}
@keyframes nudge{50%{transform:translateY(8px)}}
html.intro-on .hero__img{transform:scale(1.22)}
html.intro-reveal .hero__img{animation:heroZoom 1.7s var(--ease) both}
@keyframes heroZoom{from{transform:scale(1.22)}to{transform:none}}

/* ---------- home sections ---------- */
.tri{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* "good ___.": one big "good" plus a tight stack of what follows it, instead of three repeated pills */
.goodstack{display:flex;align-items:center;gap:16px;margin-top:var(--s5)}
.goodstack__word{font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;color:#fff}
.goodstack__list{display:flex;flex-direction:column;gap:3px;border-left:4px solid #fff;padding-left:16px}
.goodstack__list span{font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.15}
.tri .chip:nth-child(2){background:#fff;color:var(--navy);border-color:var(--navy)}
.tri .chip:nth-child(3){background:var(--yellow);color:var(--navy)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.circle-frame{position:relative;aspect-ratio:1;width:100%;max-width:620px;justify-self:center}
.circle-frame::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--frame,rgba(255,255,255,.14))}
.circle-frame::after{content:"";position:absolute;inset:-4%;border-radius:50%;border:6px solid var(--ringc,var(--yellow));clip-path:polygon(0 0,100% 0,100% 55%,0 55%);transform:rotate(-20deg)}
.circle-frame img{position:absolute;left:5%;top:5%;width:90%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.35));z-index:1}
.circle-frame .sticker{position:absolute;right:0;top:4%;z-index:3}


.buy-strip{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s6);align-items:center}
.buy-strip>*{min-width:0}
.buy-strip h1{font-size:clamp(3rem,7vw,6.4rem)}
.lockup{display:flex;align-items:center;justify-content:center;gap:0;position:relative}
.lockup .a,.lockup .b{width:clamp(150px,20vw,260px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative}
.lockup .a{background:var(--navy);z-index:1}
.lockup .b{background:#8cb22a;margin-left:-6%;z-index:2}
.lockup .a img{width:76%}
.lockup .b img{width:100%}

/* ---------- what is it: cake stage ---------- */
.cakewrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,90px);align-items:start}
.cakestage{position:sticky;top:calc(var(--navh) + 28px);width:100%;max-width:700px;justify-self:center;--ly:60%;--lx:70%}
.cakestage__disc{position:absolute;left:-4%;top:-6%;width:96%;aspect-ratio:1;border-radius:50%;background:var(--electric);z-index:0}
.cakestage img{position:relative;z-index:1;width:72%;margin:7% 0 0 8%;filter:drop-shadow(0 28px 24px rgba(0,0,0,.35))}
.cakeline{position:absolute;z-index:3;left:var(--lx);right:0;top:var(--ly);height:0;transition:top .55s var(--ease),left .55s var(--ease)}
.cakeline::before{content:"";position:absolute;left:0;right:0;top:-3px;height:6px;border-radius:3px;background:var(--coral);box-shadow:0 0 0 3px #fff;transform-origin:right;animation:lineIn .6s var(--ease) both}
.cakeline::after{content:"";position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:var(--coral);border:5px solid #fff;box-shadow:0 0 0 3px var(--coral)}
.cakeline b{position:absolute;right:0;bottom:16px;font-family:var(--display);text-transform:lowercase;font-weight:700;font-size:clamp(1rem,1.8vw,1.35rem);background:var(--coral);color:var(--navy);padding:6px 16px;border-radius:999px;border:3px solid var(--navy);white-space:nowrap}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:none}}
.layers{margin-top:var(--s5);display:grid;gap:var(--s3)}
.layers button{width:100%;display:flex;gap:var(--s4);align-items:flex-start;text-align:left;padding:var(--s4) var(--s5);border:4px solid var(--navy);border-radius:var(--radius);background:transparent;transition:background .3s,color .3s,transform .35s var(--ease)}
.layers button:hover{transform:translateX(8px)}
.layers .n{font-family:var(--display);font-size:2.4rem;line-height:.9;color:var(--coral);min-width:2ch}
.layers strong{display:block;font-family:var(--display);text-transform:lowercase;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1}
.layers em{font-style:normal;display:block;margin-top:6px;font-size:1rem;line-height:1.45}
.layers li.is-active button{background:var(--navy);color:#fff}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s6)}
.proof article{border-radius:var(--radius);padding:var(--s5) var(--s4);background:var(--c);color:var(--navy);min-height:280px;transition:transform .4s var(--ease)}
.proof article:hover{transform:translateY(-10px) rotate(-1deg)}
.proof .n{font-family:var(--display);font-size:4rem;line-height:.9;display:block;margin-bottom:var(--s3)}
.proof h3{margin-bottom:var(--s2)}
.proof p{font-size:1rem}
.steps{margin-top:var(--s5);display:grid;gap:var(--s4)}
.steps li{display:flex;gap:var(--s4);align-items:flex-start}
.steps li>span{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--yellow);font-family:var(--display);font-size:2rem}
.steps strong{font-family:var(--display);text-transform:lowercase;font-size:1.8rem;line-height:1;display:block}
.mask-photo{position:relative;aspect-ratio:1;width:100%;max-width:600px;justify-self:center}
.mask-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mask-photo--semi img{border-radius:50% 50% 0 0/100% 100% 0 0}

/* ---------- range page ---------- */
.rangepage{--bg:#f4982c;--ink:#00246e;--acc:#ffcd4a;background:var(--bg);color:var(--ink);transition:background .6s var(--ease),color .4s;min-height:calc(100svh - var(--navh));position:relative;overflow:clip}
.picker{position:sticky;top:var(--navh);z-index:60;background:var(--bg);transition:background .6s var(--ease);padding:12px 0 0}
.picker ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px var(--gutter) 14px;justify-content:safe center}
.picker ul::-webkit-scrollbar{display:none}
.picker button{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border-radius:999px;border:3px solid var(--ink);background:var(--dot);color:var(--dotink,var(--ink));white-space:nowrap;font-family:var(--display);text-transform:lowercase;font-size:1.05rem;transition:background .3s,color .3s,transform .3s var(--ease)}
.picker button b{font-weight:700;opacity:.85}
.picker button:hover{transform:translateY(-3px)}
.picker button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.stage{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(24px,4vw,60px) 0 clamp(72px,9vw,130px);position:relative}
.stage__giant{position:absolute;left:-2vw;top:-4vw;font-family:var(--display);text-transform:lowercase;font-size:clamp(9rem,34vw,30rem);line-height:.8;color:var(--ink);opacity:.09;pointer-events:none;z-index:0;white-space:nowrap}
.info{position:relative;z-index:2}
.info .no{font-family:var(--display);font-size:1.5rem;display:flex;align-items:center;gap:14px}
.info .no i{flex:1;height:5px;background:var(--ink);border-radius:3px;max-width:120px}
.info .origin{font-family:var(--display);text-transform:lowercase;font-size:clamp(1.6rem,3.4vw,2.6rem);margin-top:var(--s3);line-height:1}
.info h2{font-size:clamp(3rem,8.2vw,7.4rem);margin-top:6px}
.info .zh{font-family:"PingFang TC","Hiragino Sans","Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:1.3rem;margin-top:var(--s3);letter-spacing:.06em}
.info .tag{font-style:italic;font-weight:900;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.25;margin-top:var(--s4)}
.info .desc{margin-top:var(--s3);max-width:52ch}
.info .lbl{font-family:var(--display);text-transform:lowercase;font-size:1.15rem;margin-top:var(--s5)}
.info .ing{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.info .ing li{padding:5px 16px;border-radius:999px;background:var(--acc);color:var(--navy);font-size:.95rem;border:3px solid var(--navy)}
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:var(--s4);margin-top:var(--s5);justify-content:start}
.facts div{border-left:5px solid var(--ink);padding-left:14px;line-height:1.1}
.facts b{display:block;font-family:var(--display);text-transform:lowercase;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700}
.facts span{font-size:.85rem}
.info .btns .btn{--b:var(--ink);--t:var(--bg);border-color:var(--ink);box-shadow:0 5px 0 rgba(0,0,0,.3)}
.info .btns .btn--ghost{--b:transparent;--t:var(--ink);box-shadow:none}

.framewrap{position:relative;z-index:2;justify-self:center;width:100%;max-width:720px}
.frame{position:relative;aspect-ratio:1;width:100%;border-radius:50%;background:var(--paper);box-shadow:0 0 0 clamp(10px,1.6vw,22px) var(--acc),0 0 0 clamp(16px,2.6vw,34px) var(--ink);overflow:hidden;touch-action:pan-y;cursor:grab;transition:box-shadow .6s}
.frame.is-drag{cursor:grabbing}
.track{position:absolute;inset:0;display:flex;width:200%;transition:transform .65s var(--ease);will-change:transform}
.track.no-anim{transition:none}
.slide{position:relative;width:50%;height:100%;flex:none}
.slide img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 22px 20px rgba(0,0,0,.28))}
.frame__lbl{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:3;pointer-events:none}
.frame__lbl span{display:inline-flex;align-items:center;min-height:38px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-family:var(--display);text-transform:lowercase;font-size:1.1rem;transition:opacity .3s}
.slider-ui{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin-top:clamp(28px,4vw,52px)}
.slider-ui .arrow{width:60px;height:60px;border-radius:50%;border:4px solid var(--ink);background:transparent;display:grid;place-items:center;transition:background .3s,color .3s,transform .3s var(--ease)}
.slider-ui .arrow:hover{background:var(--ink);color:var(--bg);transform:scale(1.08)}
.slider-ui .arrow svg{width:26px;height:26px}
.dots{display:flex;gap:10px}
.dots button{min-width:auto;height:44px;padding:0 20px;border-radius:999px;border:3px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--display);text-transform:lowercase;font-size:1.05rem}
.dots button[aria-current="true"]{background:var(--ink);color:var(--bg)}
.badge-gt{position:absolute;z-index:5;right:-3%;top:-1%;width:clamp(96px,15vw,170px);filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));transform:rotate(8deg);animation:float 6s ease-in-out infinite}
.framewrap .sticker{position:absolute;z-index:5;left:-2%;top:2%}
.stage .deco{z-index:0;--c:var(--acc)}

/* ---------- how to cook ---------- */
.eight{position:relative}
.tabs{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.tab{display:grid;text-align:left;padding:16px 34px;border-radius:var(--radius);border:4px solid var(--navy);background:transparent;color:var(--navy);transition:background .3s,color .3s,transform .3s var(--ease)}
.tab:hover{transform:translateY(-4px)}
.tab span{font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1}
.tab small{font-family:var(--body);font-weight:700;font-size:.95rem;margin-top:4px}
.tab.is-active{background:var(--navy);color:#fff}
.cookgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);margin-top:var(--s6);align-items:start}
.csteps{display:grid;gap:var(--s3)}
.csteps[hidden]{display:none}
.csteps li{display:flex;gap:var(--s4);align-items:center;background:#fff;color:var(--navy);border-radius:var(--radius);padding:var(--s4) var(--s5);border:4px solid var(--navy)}
.csteps li>span{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--coral);color:var(--navy);font-family:var(--display);font-size:2rem;border:4px solid var(--navy)}
.csteps .tip>span{background:var(--green)}
.illo{background:#fff;border-radius:var(--radius);border:4px solid var(--navy);padding:clamp(12px,2vw,28px)}
.video{border-radius:var(--radius);overflow:hidden;border:4px solid var(--navy);background:var(--navy);box-shadow:0 12px 0 rgba(0,0,0,.25)}
.video video{width:100%;aspect-ratio:16/9;background:#000}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
.three article{border-radius:var(--radius);padding:var(--s5);background:var(--c);color:var(--navy);min-height:230px}
.three .n{font-family:var(--display);font-size:clamp(3.4rem,7vw,5.6rem);line-height:.85;display:block}

/* ---------- our story ---------- */
.layerstack{display:grid;gap:0;margin-top:var(--s6)}
.layerstack p{font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.4;padding:var(--s5) clamp(20px,4vw,48px);border-radius:var(--radius);max-width:none}
.layerstack p:nth-child(1){background:var(--yellow);color:var(--navy)}
.layerstack p:nth-child(2){background:var(--coral);color:var(--navy);margin-left:clamp(0px,6vw,90px);margin-top:calc(var(--radius) * -.3)}
.layerstack p:nth-child(3){background:var(--electric);color:#fff;margin-left:clamp(0px,12vw,180px);margin-top:calc(var(--radius) * -.3)}

/* ---------- buy online ---------- */
.om{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.om img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 4px #fff}
.om span{font-family:var(--display);text-transform:lowercase;font-size:1.35rem;line-height:1.05}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
.how3 article{background:var(--paper);color:var(--navy);border-radius:var(--radius);padding:var(--s5);border:4px solid var(--navy)}
.how3 .n{font-family:var(--display);font-size:4.4rem;line-height:.85;color:var(--coral);display:block;margin-bottom:var(--s3)}
.buygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,22px);margin-top:var(--s6)}
.buycard{display:flex;flex-direction:column;background:var(--bg);color:var(--ink);border-radius:var(--radius);padding:var(--s4);border:4px solid var(--navy);position:relative;overflow:hidden;transition:transform .4s var(--ease)}
.buycard:hover{transform:translateY(-10px) rotate(-.8deg)}
.buycard .o{font-family:var(--display);text-transform:lowercase;font-size:1.1rem}
.buycard h3{margin-top:2px;color:var(--ink)}
.buycard .btn{margin-top:auto;--b:var(--ink);--t:var(--bg);border-color:#000;width:100%}
.buycard .meta{font-size:.9rem;margin-bottom:var(--s3)}
.buycard--all{--bg:var(--navy);--ink:#fff;justify-content:center;align-items:flex-start;gap:var(--s3)}
.buycard--all .btn{--b:var(--coral);--t:var(--navy);margin-top:var(--s3)}
.handover{position:fixed;inset:0;z-index:950;display:none;place-items:center;text-align:center;background:var(--green);color:var(--navy);padding:var(--gutter);overflow:hidden}
.handover.is-open{display:grid}
.handover__in{position:relative;z-index:2;max-width:820px;animation:pop .5s var(--ease) both}
.handover h2{margin-top:var(--s4)}
.handover p{margin:var(--s3) auto 0;max-width:46ch;font-size:1.2rem}
.handover .lockup{margin-inline:auto}
.handover .bar{width:min(420px,80%);height:12px;border-radius:6px;background:rgba(0,36,110,.22);margin:var(--s5) auto 0;overflow:hidden}
.handover .bar b{display:block;height:100%;width:0;background:var(--navy);border-radius:6px}
.handover.is-open .bar b{animation:fill 2.6s linear forwards}
@keyframes fill{to{width:100%}}
.handover .btns{justify-content:center;margin-top:var(--s4)}

/* ---------- where to buy ---------- */
.finder{display:grid;grid-template-columns:minmax(320px,.42fr) 1fr;gap:0;border:4px solid var(--navy);border-radius:var(--radius);overflow:hidden;background:#fff;color:var(--navy);margin-top:var(--s5);height:min(78vh,760px);min-height:560px}
.finder__side{display:flex;flex-direction:column;min-height:0;border-right:4px solid var(--navy);background:var(--paper)}
.finder__top{padding:var(--s4);border-bottom:4px solid var(--navy);display:grid;gap:var(--s3)}
.finder__search{display:flex;gap:8px}
.finder__top{min-width:0}
.finder__search .btn{flex:none}
.finder__search input{flex:1 1 0;width:0;min-width:0;height:52px;border-radius:999px;border:3px solid var(--navy);background:#fff;padding:0 20px;font:inherit;color:var(--navy)}
.finder__search input::placeholder{color:rgba(0,36,110,.6)}
.finder__search .btn{min-height:52px;padding:0 20px;box-shadow:0 3px 0 var(--navy);font-size:1.05rem}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{min-height:42px;padding:0 16px;border-radius:999px;border:3px solid var(--navy);background:transparent;color:var(--navy);font-family:var(--display);text-transform:lowercase;font-size:1rem;display:inline-flex;align-items:center;gap:8px}
.filters button i{width:14px;height:14px;border-radius:50%;background:var(--dot);border:3px solid var(--navy)}
.filters button[aria-pressed="true"]{background:var(--navy);color:#fff}
.finder__count{font-size:.95rem}
.finder__list{overflow:auto;flex:1;min-height:0}
.finder__list li{border-bottom:3px solid rgba(0,36,110,.15)}
.finder__list button.row{width:100%;text-align:left;background:transparent;border:0;padding:var(--s3) var(--s4);display:grid;gap:2px;transition:background .2s}
.finder__list button.row:hover,.finder__list li.is-on button.row{background:var(--yellow)}
.row .nm{font-family:var(--display);text-transform:lowercase;font-size:1.35rem;line-height:1.05;display:flex;align-items:center;gap:10px}
.row .nm i{width:14px;height:14px;border-radius:50%;flex:none;background:var(--dot);border:3px solid var(--navy)}
.row .ad{font-size:.92rem;opacity:.9}
.row .ln{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;font-size:.9rem}
.row .ln a{text-underline-offset:3px}
.finder__empty{padding:var(--s5) var(--s4);font-size:1rem}
.finder__map{position:relative;min-height:320px;background:#e9e4da}
#map{position:absolute;inset:0}
.pin{width:20px;height:20px;border-radius:50%;background:var(--dot);border:3.5px solid var(--navy);box-shadow:0 2px 0 rgba(0,0,0,.28);transition:transform .2s}
.pin.is-on{transform:scale(1.7);border-color:#fff;box-shadow:0 0 0 3px var(--navy)}
.leaflet-container{font-family:var(--body);font-weight:700}
.leaflet-tile-pane{filter:saturate(.75) sepia(.12) contrast(.96)}
.leaflet-popup-content-wrapper{border-radius:18px;border:3px solid var(--navy)}
.leaflet-popup-content{margin:14px 16px;color:var(--navy)}
.leaflet-popup-content .dz{font-size:1.3rem;display:block;line-height:1}
.samplebar{background:var(--yellow);color:var(--navy);padding:8px var(--gutter);font-size:.9rem;text-align:center;border-bottom:3px solid var(--navy)}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:#fff;padding:var(--s8) 0 var(--s4);position:relative;overflow:clip;isolation:isolate}
.footer .big{font-size:clamp(2.6rem,8vw,7rem);line-height:.92;max-width:14ch}
.footer .big em{font-style:normal;color:var(--coral)}
.footer__grid{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s7);align-items:end;margin-top:var(--s7)}
.footer__grid img.logo{width:180px}
.footer nav{display:grid;gap:2px;justify-items:start}
.footer nav a{text-decoration:none;font-family:var(--display);text-transform:lowercase;font-size:1.4rem;padding:6px 0;min-height:44px;display:inline-flex;align-items:center}
.footer nav a:hover{color:var(--yellow)}
.footer .partner{display:flex;align-items:center;gap:12px;font-size:.95rem}
.footer .partner img{width:64px;height:64px;border-radius:50%}
.footer__small{margin-top:var(--s6);font-size:.85rem;opacity:.75;display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .rail{grid-template-columns:repeat(7,minmax(190px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .rail>a{scroll-snap-align:start;min-height:440px}
  .proof{grid-template-columns:1fr 1fr}
  .buygrid{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(2,auto)}
}
@media (max-width:900px){
  /* not sticky here: on a single mobile column the image and the layer list share the same width,
     so a pinned image on top of scrolling text was never going to work - there's no side-by-side
     room like desktop has for the two to coexist without one covering the other. instead, the image
     and all three layer buttons are sized to fit together in one phone screen with no scrolling
     needed between them, so the point of tapping a layer (seeing the cake respond) isn't lost. */
  .cakestage{position:relative;top:0;max-width:220px;margin-inline:auto}
  .layers{margin-top:14px;gap:8px}
  .layers button{padding:10px 14px;gap:12px}
  .layers .n{font-size:1.5rem;min-width:1.4ch}
  .layers strong{font-size:1.15rem}
  .layers em{font-size:.82rem;line-height:1.3;margin-top:2px}
  .layers+p{display:none}
  /* the intro copy (eyebrow/heading/lead) sits between the image and the buttons in the source, which
     was eating into the "fits in one screen" budget. move it ahead of the image instead, so the image
     and the 3 buttons are directly adjacent with nothing between them. */
  #cake .cakewrap{gap:0}
  #cake .cakewrap>div:last-child{display:contents}
  #cake .eyebrow{order:1;margin-top:0}
  #cake h2{order:2}
  #cake .lead{order:3;margin-top:8px}
  #cake .cakestage{order:4;margin-top:16px}
  #cake .layers{order:5}
  /* the wavy graphic sits behind the layer buttons (z-index:-1, buttons are transparent-background
     except when active) in the blank column under the big "01/02/03" numbers - real dead space in
     every button since the number is one short line but the button is tall - so it never touches the
     number or the heading/description text next to it, and button spacing is untouched */
  #cake .shape.waves{top:742px!important;left:-65px!important;right:auto!important;width:140px!important;height:55px!important}
  .split,.cakewrap,.stage,.buy-strip,.cookgrid,.footer__grid{grid-template-columns:1fr}
  /* image first: pictures lead the story on mobile, text follows */
  .split .circle-frame,.split .mask-photo,.split .buyhero{order:-1}
  .split .circle-frame{max-width:220px;margin:0 auto var(--s4)}
  /* "what" section specifically: image sits between the info tags and the buttons, not before everything.
     display:contents flattens the text wrapper into the grid, so spacing is set explicitly per item below
     instead of relying on the grid gap (which would otherwise add up with each item's own margin). */
  #what .split{gap:0}
  #what .split>div:first-child{display:contents}
  #what .eyebrow{order:1;margin-top:0}
  #what h2{order:2}
  #what .lead{order:3;margin-top:var(--s3)}
  #what .goodstack{order:4;margin-top:var(--s3)}
  #what .circle-frame{order:5;margin:var(--s6) auto var(--s2)}
  #what .btns{order:6;margin-top:var(--s3)}
  .footer__grid{gap:var(--s5);align-items:start}
  .how3,.three{grid-template-columns:1fr}
  .stage__giant{font-size:38vw}
  .hero:not(.herocarousel){height:auto;min-height:0;aspect-ratio:auto;display:block}
  .hero:not(.herocarousel) .hero__img{position:relative;height:auto;width:100%}
    .finder{grid-template-columns:1fr;height:auto;min-height:0}
  /* stacked on phones/tablets: search block, then the map, then a short list (about 3 stores) */
  .finder__side{display:contents}
  .finder__top{order:1;background:var(--paper);border-bottom:4px solid var(--navy)}
  .finder__map{order:2;height:360px;min-height:0;border-bottom:4px solid var(--navy)}
  .finder__list{order:3;flex:none;height:372px;background:var(--paper)}
  .framewrap{max-width:560px;order:-1;margin-top:10px}
  .stage .waves{display:none}
  .stage{padding-top:20px}
  .dots button{padding:0 14px;font-size:.95rem;white-space:nowrap}
  .slider-ui{gap:var(--s3)}
  .slider-ui .arrow{width:52px;height:52px}
  .info h2{font-size:clamp(3rem,15vw,6rem)}
}
@media (max-width:600px){
  /* tighter vertical rhythm: more of each section fits on a phone screen without losing anything */
  .blk{padding:clamp(40px,9vw,72px) 0}
  .lead{font-size:1.05rem;max-width:none;margin-top:var(--s3)}
  .btns{gap:10px;margin-top:var(--s4)}
  .tri{gap:8px;margin-top:var(--s3)}
  .eyebrow{margin-bottom:var(--s2)}
  .split{gap:var(--s4)}
  .proof,.buygrid{grid-template-columns:1fr}
    .chars .char:last-child{grid-column:1/-1}
      .layers button{padding:var(--s3)}
  .cakeline b{font-size:.95rem;padding:4px 12px}
  .facts{gap:var(--s3)}
  .sticker{width:88px;height:88px;font-size:1.1rem}
  .cakestage img{width:74%;margin:7% 0 0 7%}
  /* the 4-step illustration: swipe at a legible size instead of shrinking to fit */
  .illo{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .illo::-webkit-scrollbar{display:none}
  .illo img{width:auto;height:200px;max-width:none}
  /* hob/microwave switch: same proportional trim as the cake layer buttons - tighter padding and
     type sized to the button's own two lines, so picking a method costs less scroll */
  .tab{padding:10px 20px}
  .tab span{font-size:1.4rem}
  .tab small{font-size:.8rem;margin-top:2px}
  /* stockist rows hold three lines (name, address, links) in a list that already scrolls within
     its own panel - trim proportionally so more rows show without scrolling */
  .finder__list button.row{padding:12px 16px}
  .row .nm{font-size:1.15rem}
  .row .ad{font-size:.85rem}
  .row .ln{font-size:.82rem;gap:10px;margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}


/* =========================================================
   refinements, round 2
   ========================================================= */
/* nav: logo tab overhangs the bar; keep first content clear of it */
.picker{padding-top:44px}
@media (max-width:900px){
  .nav__logo{padding:6px 14px 10px;border-radius:0 0 22px 22px}
  .nav__logo img{height:54px}
  .picker{padding-top:0}
}

/* pack shots: every pack is measured and placed so all seven land at one size and centre */
.pack{position:relative;display:block;width:100%;aspect-ratio:1}
.pack img{position:absolute;max-width:none;filter:drop-shadow(0 14px 12px rgba(0,0,0,.26));transition:transform .5s var(--ease)}

/* range rail (home): names always fit, because type scales with each card's own width */
.rail>a:hover,.rail>a:focus-visible{transform:translateY(-12px) rotate(-1deg)}
.rail__txt{display:block;min-width:0}
.rail .pack{margin-top:auto}
.rail>a:hover .pack img{transform:scale(1.07) rotate(3deg)}

/* home: cooked bowl feature + supporting gallery (photos shown whole) */
.bowlfeature{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,6vw,96px);align-items:center}
.bowlfeature__img{position:relative;justify-self:center;margin:0}
.bowlfeature__img::before{content:"";position:absolute;inset:-4% -8% -4% -8%;border-radius:50%;background:var(--yellow);z-index:-1}
.bowlfeature__img img{height:min(76vh,760px);width:auto;max-width:100%;border-radius:clamp(28px,4vw,56px);border:6px solid var(--navy);box-shadow:0 14px 0 rgba(0,36,110,.3)}
.gallerywrap{margin-top:clamp(40px,6vw,80px)}
.gallery{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x proximity;padding:6px 6px 22px;margin:0 -6px;scrollbar-width:thin;scrollbar-color:var(--navy) transparent;cursor:grab;-webkit-overflow-scrolling:touch}
.gallery.is-drag{cursor:grabbing;scroll-snap-type:none}
.gallery img{flex:none;height:clamp(260px,36vw,460px);width:auto;border-radius:clamp(20px,2.6vw,34px);border:5px solid var(--navy);scroll-snap-align:start;user-select:none}

/* what is it: cake always scales with its column */
.cakestage{aspect-ratio:auto}

/* big 8 min */
.eight{display:flex;align-items:baseline;gap:.08em;line-height:.78;font-family:var(--display);text-transform:lowercase}
.eight .big-num{font-size:clamp(9rem,26vw,22rem);line-height:.78;letter-spacing:-.02em}
.eight .min{font-size:clamp(3rem,9vw,7.6rem);line-height:1}
.sub{font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.02;margin-top:var(--s3);max-width:20ch}
.cookhero h1{font-size:clamp(3.2rem,8.6vw,8rem)}

/* how to cook: illustration full width, then horizontal steps */
.tabs{margin-top:var(--s4)}
.illo{margin-top:var(--s5);width:100%}
.illo img{width:100%;height:auto}
.cpanels{margin-top:var(--s5)}
.csteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.csteps[hidden]{display:none}
.csteps li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);background:#fff;color:var(--navy);border-radius:var(--radius);padding:var(--s5) var(--s5) var(--s5);border:4px solid var(--navy)}
.csteps li>span{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--coral);color:var(--navy);font-family:var(--display);font-size:2rem;border:4px solid var(--navy)}
.csteps p{font-size:1.08rem;line-height:1.5}
.csteps .tip{grid-column:1/-1;flex-direction:row;align-items:center;background:var(--navy);color:#fff;border-color:var(--navy)}
.csteps .tip>span{background:var(--green);border-color:#fff}
.three{gap:var(--s4)}
.three article{padding:var(--s6) var(--s5);min-height:280px}
.three .n{margin-bottom:var(--s5)}
.duo{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.duo__video{min-width:0}
.video{width:min(100%,380px);margin-top:var(--s5);background:#000}
.video video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#000;display:block}
.duo__bowl{margin:0;position:relative;justify-self:center;width:min(100%,600px)}
.duo__bowl img{width:100%;border-radius:var(--radius);border:6px solid #fff}
.duo__bowl figcaption{position:absolute;left:-2%;bottom:-3%;background:var(--coral);color:var(--navy);font-size:clamp(1.3rem,2.6vw,2rem);padding:10px 22px;border-radius:999px;border:4px solid var(--navy);transform:rotate(-3deg)}
.duo+.wrap .btns{margin-top:var(--s6)}

/* range page: one fixed layout, only the content swaps */
.stage{grid-template-columns:minmax(0,1fr) minmax(0,var(--frame-w));--frame-w:clamp(320px,42vw,640px);align-items:start;gap:clamp(24px,5vw,72px)}
.info{container-type:inline-size;min-width:0}
.info .no{height:1.6rem}
.info .origin{min-height:1.1em}
.info h2{font-size:clamp(2.2rem,12.4cqw,5.4rem);line-height:.95;min-height:var(--h-name,calc(3 * .95em));display:flex;align-items:flex-start;margin-top:6px}
.info h2 span{display:block}
.info .alt{margin-top:var(--s3);font-family:"Hiragino Sans","PingFang TC","Apple SD Gothic Neo","Thonburi","Sukhumvit Set","Noto Sans CJK","Noto Sans Thai",system-ui,sans-serif;font-size:1.3rem;letter-spacing:.05em;line-height:1.3;min-height:1.3em}
.info .tag{min-height:var(--h-tag,auto)}
.info .desc{min-height:var(--h-desc,auto)}
.info .ing{min-height:var(--h-ing,auto);align-content:flex-start}
.facts{grid-template-columns:repeat(3,auto)}
.spice{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s4);padding:8px 18px 8px 16px;border-radius:999px;background:#d8402f;color:#fff;border:3px solid var(--navy);max-width:100%;white-space:nowrap}
.spice b{font-family:var(--display);text-transform:lowercase;font-size:1.1rem;font-weight:700;margin-right:4px}
.spice i{width:20px;height:20px;border-radius:50%;border:3px solid #fff;flex:none}
.spice i.on{background:#ffcd4a;border-color:#ffcd4a}
.spice--zero b{margin-right:0}
.framewrap{width:100%;max-width:none;justify-self:stretch}
.frame{width:100%}
.framewrap .sticker{width:116px;height:116px;font-size:1rem;padding:12px}

/* our story: the crew */
.chars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin-top:var(--s6);align-items:stretch}
.char{margin:0;background:var(--bg);color:var(--navy);border-radius:var(--radius);border:5px solid var(--navy);padding:var(--s4) var(--s3) var(--s4);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3);position:relative;overflow:hidden}
.char__stage{position:relative;width:100%;height:clamp(300px,34vw,460px);display:flex;align-items:flex-end;justify-content:center;cursor:pointer;outline-offset:-6px}
.char__img{position:relative;z-index:2;max-height:100%;width:auto;max-width:92%;object-fit:contain;transform-origin:50% 100%;will-change:transform;filter:drop-shadow(0 10px 8px rgba(0,0,0,.18))}
.char__shadow{position:absolute;left:50%;bottom:0;width:58%;height:7%;transform:translateX(-50%);border-radius:50%;background:rgba(0,36,110,.28);filter:blur(4px);z-index:1}
.char__mood{position:absolute;right:2%;top:2%;z-index:3;width:clamp(64px,9vw,96px);aspect-ratio:1;border-radius:50%;background:#fff;border:4px solid var(--navy);overflow:hidden;display:grid;place-items:center;transform:rotate(8deg);animation:moodPop 4s ease-in-out infinite}
.char__mood img{width:96%;height:96%;object-fit:contain;object-position:50% 40%;transition:opacity .25s}
.char__views{display:flex;gap:10px;justify-content:center}
.char__views button{width:56px;height:72px;padding:4px;border-radius:16px;border:3px solid var(--navy);background:rgba(255,255,255,.55);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.char__views button:hover,.char__views button.is-on{background:#fff;transform:translateY(-4px)}
.char__views img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.char figcaption{font-family:var(--display);text-transform:lowercase;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1}
.char__img.is-flip{transition:transform .14s ease-in}
.char__img.is-squish{transform:scaleX(.12)}

/* meatball: a proper bouncing ball: anticipation, stretch, squash on landing */
.char--meatball .char__img{animation:hop 1.7s cubic-bezier(.3,.6,.4,1) infinite}
.char--meatball .char__shadow{animation:hopShadow 1.7s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes hop{
  0%,100%{transform:translateY(0) scale(1.05,.93)}
  12%{transform:translateY(0) scale(1.09,.88)}
  30%{transform:translateY(-9%) scale(.95,1.07) rotate(-2.5deg)}
  50%{transform:translateY(-14%) scale(.99,1.02) rotate(0)}
  70%{transform:translateY(-6%) scale(.96,1.06) rotate(2.5deg)}
  88%{transform:translateY(0) scale(1.08,.9)}
  94%{transform:translateY(0) scale(.98,1.03)}
}
@keyframes hopShadow{0%,100%{transform:translateX(-50%) scale(1.05)}50%{transform:translateX(-50%) scale(.6);opacity:.6}}

/* iceman: cold. slow lean, then a proper shiver, and dripping */
.char--ice .char__img{animation:shiver 3.4s ease-in-out infinite}
@keyframes shiver{
  0%,52%{transform:rotate(-1.5deg) scale(1,1)}
  26%{transform:rotate(1.5deg) scale(1,1.012)}
  54%{transform:translateX(-1.6%) rotate(-1deg)}
  56%{transform:translateX(1.6%) rotate(1deg)}
  58%{transform:translateX(-1.6%) rotate(-1deg)}
  60%{transform:translateX(1.6%) rotate(1deg)}
  62%{transform:translateX(-1.2%) rotate(-.8deg)}
  64%{transform:translateX(1.2%) rotate(.8deg)}
  66%{transform:translateX(-.8%)}
  68%{transform:translateX(.8%)}
  70%,100%{transform:rotate(-1.5deg)}
}
.drip{position:absolute;z-index:3;width:12px;height:18px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#9fd2ff;border:2px solid var(--navy);opacity:0;animation:drip 2.6s ease-in infinite}
.drip--1{left:30%;top:52%}.drip--2{left:56%;top:58%;animation-delay:.9s}.drip--3{left:66%;top:46%;animation-delay:1.7s}
@keyframes drip{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:1;transform:translateY(0) scale(1)}100%{transform:translateY(150px) scale(.9);opacity:0}}

/* mr bacon: loose, wavy, with a hop */
.char--bacon .char__img{animation:sway 2.4s ease-in-out infinite,flop 5s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes sway{0%,100%{transform:skewX(-4deg) rotate(-2deg)}50%{transform:skewX(4deg) rotate(2deg)}}
@keyframes flop{0%,72%,100%{translate:0 0;scale:1 1}78%{translate:0 0;scale:1.06 .92}86%{translate:0 -7%;scale:.96 1.06}94%{translate:0 0;scale:1.05 .93}}
@keyframes moodPop{0%,100%{transform:rotate(8deg) scale(1)}50%{transform:rotate(-4deg) scale(1.06)}}

/* buy cards */
.buycard .pack{width:88%;margin:var(--s3) auto var(--s2)}
.buycard .price{font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;margin:0 0 var(--s3);color:var(--ink)}
.buycard .meta{margin-bottom:var(--s2)}

/* responsive */
@media (max-width:1100px){
  .csteps{grid-template-columns:1fr}
  .csteps li{flex-direction:row;align-items:center}
}
@media (max-width:900px){
  .bowlfeature{grid-template-columns:1fr}
  .bowlfeature__img img{height:auto;width:min(100%,420px)}
  .duo{grid-template-columns:1fr}
  .video{margin-inline:auto}
  .duo__video{text-align:left}
  .stage{grid-template-columns:minmax(0,1fr);--frame-w:100%}
  .chars{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .facts{grid-template-columns:repeat(3,auto)}
}
@media (max-width:600px){
  .facts{gap:var(--s3)}
  .facts b{font-size:1.4rem}
  .gallery img{height:clamp(240px,62vw,340px)}
  .char__stage{height:clamp(280px,80vw,400px)}
}
@media (prefers-reduced-motion:reduce){
  .char__img,.char__shadow,.drip,.char__mood{animation:none!important}
}

/* wide screens: size the strip so every photo is fully visible, no scrolling needed */
@media (min-width:1100px){
  .gallery{overflow-x:visible}
  .gallery img{height:calc((min(100vw - var(--gutter) * 2, var(--wrap)) - 5 * clamp(12px,1.6vw,20px) - 40px) / 3.85);width:auto}
}

/* buy cards: heading scales with card width so long names never overflow */
.buycard{container-type:inline-size}
.buycard h3{font-size:clamp(1.15rem,10.4cqw,2rem);overflow-wrap:anywhere}
.duo__bowl figcaption{left:0;max-width:96%;white-space:normal}
/* frame follows you down the page on tall screens so the visual stays dominant */
@media (min-height:880px) and (min-width:901px){
  .framewrap{position:sticky;top:136px;align-self:start}
}


/* =========================================================
   refinements, round 3
   ========================================================= */
/* home: 7 flavours + 1 note = two rows of four, substantially larger */
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:var(--s6);overflow:visible;padding:0;margin-inline:0}
.rail>a{container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:clamp(16px,1.8vw,28px);border-radius:clamp(24px,3vw,44px);min-height:0;aspect-ratio:auto;background:var(--bg);color:var(--ink);text-decoration:none;position:relative;overflow:hidden;transition:transform .45s var(--ease)}
.rail .o{display:block;font-family:var(--display);text-transform:lowercase;font-size:clamp(.8rem,7.6cqw,1.4rem);line-height:1;opacity:.92;overflow-wrap:anywhere}
.rail .n{display:block;font-family:var(--display);text-transform:lowercase;font-size:clamp(1rem,10.6cqw,2.4rem);line-height:.98;margin-top:8px;overflow-wrap:anywhere;hyphens:none}
.rail .pack{margin-top:auto}
.rail__note{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s3);padding:clamp(20px,2.4vw,36px);border-radius:clamp(24px,3vw,44px);background:var(--navy);color:#fff;container-type:inline-size}
.rail__note img{width:clamp(84px,32cqw,130px);height:auto}
.rail__note .n{font-size:clamp(1.5rem,11cqw,2.6rem);line-height:.98;margin:0}
.rail__note p:not(.n){font-size:clamp(.95rem,4.6cqw,1.1rem);line-height:1.5}
@media (max-width:1000px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* range page: a tighter, shorter block. only the English name and the circle are locked. */
.stage{padding:clamp(16px,2.4vw,36px) 0 clamp(48px,6vw,84px)}
.info h2{min-height:0;display:block;margin-top:4px}
.info .origin{margin-top:var(--s2)}
.info .alt{margin-top:var(--s2);font-size:clamp(2.4rem,7.2cqw,3.4rem);line-height:1.1;letter-spacing:.02em;min-height:0}
.info .tag{margin-top:var(--s3);min-height:0;font-size:clamp(1.2rem,2vw,1.55rem)}
.info .desc{margin-top:var(--s2);min-height:0}
.info .lbl{margin-top:var(--s3)}
.info .ing{margin-top:8px;min-height:0}
.facts{margin-top:var(--s3)}
.spice{margin-top:var(--s3)}
.info .btns{margin-top:var(--s4)}
/* stickers: the words fill the circle */
.sticker{padding:8px;font-size:1.5rem;line-height:.95}
.sticker--new{font-size:1.28rem}
.framewrap .sticker{width:124px;height:124px;font-size:1.6rem;padding:8px}
.framewrap .sticker--new{font-size:1.36rem}
.rail .sticker,.buycard .sticker{font-size:1.2rem}

/* how to cook: tighter boxes, less empty space top and bottom */
.tabs{margin-top:var(--s3)}
.illo{margin-top:var(--s4);padding:clamp(6px,1vw,14px) clamp(12px,2vw,24px)}
.cpanels{margin-top:var(--s3)}
.csteps{gap:var(--s3)}
.csteps li{padding:var(--s3) var(--s4);gap:var(--s2)}
.csteps li>span{width:52px;height:52px;font-size:1.7rem}
.csteps .tip{padding:var(--s2) var(--s4)}
.three{margin-top:var(--s4);gap:var(--s3)}
.three article{padding:var(--s4) var(--s4);min-height:0}
.three .n{margin-bottom:var(--s4);font-size:clamp(3rem,6vw,4.8rem)}
.three h3{line-height:1}

.rail__note .btn{white-space:nowrap;align-self:flex-start}


/* round 3: fuller heroes on story / buy / find */
.mask-photo--ring img{border:8px solid var(--navy);box-shadow:0 14px 0 rgba(0,36,110,.3)}
.buyhero{position:relative;justify-self:center;width:min(100%,500px)}
.buyhero__img{margin:0}
.buyhero__img img{width:100%;border-radius:var(--radius);border:6px solid var(--navy);box-shadow:0 14px 0 rgba(0,36,110,.3)}
.lockup--float{position:absolute;left:-14%;bottom:-8%}
.lockup--float .a,.lockup--float .b{width:clamp(104px,13vw,168px)}
.packfan{position:relative;justify-self:center;width:min(100%,540px);aspect-ratio:1}
.packfan img{position:absolute;width:56%;height:auto;filter:drop-shadow(0 18px 16px rgba(0,0,0,.35));transition:transform .5s var(--ease)}
.packfan img:nth-child(1){left:-2%;top:4%;transform:rotate(-10deg)}
.packfan img:nth-child(2){left:38%;top:-2%;transform:rotate(7deg)}
.packfan img:nth-child(3){left:6%;top:44%;transform:rotate(6deg)}
.packfan img:nth-child(4){left:44%;top:42%;transform:rotate(-7deg)}
.packfan:hover img:nth-child(odd){transform:rotate(-2deg) translateY(-6px)}
.packfan:hover img:nth-child(even){transform:rotate(2deg) translateY(-6px)}
.finder__soon{position:absolute;z-index:800;right:16px;bottom:16px;width:min(calc(100% - 32px),360px);background:var(--paper);color:var(--navy);border:4px solid var(--navy);border-radius:var(--radius);padding:var(--s4);text-align:center;box-shadow:0 10px 0 rgba(0,36,110,.3)}
.finder__soon[hidden]{display:none}
.finder__soon .dz{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;margin-bottom:var(--s2)}
.finder__soon .btns{justify-content:center;margin-top:var(--s3)}
@media (max-width:900px){
  .lockup--float{left:-4%}
  .packfan{max-width:420px}
}

.split h1{font-size:clamp(3rem,6.6vw,6.4rem)}
.js .reveal{transition-duration:.6s}

@media (max-width:600px){
  /* keep all 7 flavour cards + the note box the same small size, 2 per row: no oversized odd-one-out */
  .rail__note{align-items:center;text-align:center;padding:clamp(14px,4vw,22px)}
  .rail__note img{width:70%;max-width:120px;margin:0 auto}
  .rail__note .n{font-size:1.05rem}
  .rail__note p:not(.n),.rail__note .btn{display:none}
}


/* =========================================================
   final adjustments
   ========================================================= */
/* range page: native name 20% smaller; 50% more space between the sections */
.info .alt{font-size:clamp(1.9rem,5.8cqw,2.7rem)}
.info .tag{margin-top:var(--s4)}
.info .lbl{margin-top:var(--s4)}
.facts{margin-top:var(--s4)}
.info .btns{margin-top:calc(var(--s4) * 1.5)}

/* crew: front pose only, looping animation, nothing to click */
.char__stage{cursor:default}
.char{padding-bottom:var(--s4)}

/* buy cards: names always sit on two lines under the origin */
.buygrid{gap:clamp(8px,1.1vw,16px)}
.buycard{padding:var(--s3) clamp(14px,1.5vw,20px) var(--s4)}
.buycard h3{font-size:clamp(1.05rem,8.1cqw,1.9rem);line-height:1;text-wrap:balance;overflow-wrap:normal}
.buycard .o{font-size:clamp(.85rem,5.6cqw,1.1rem)}

.buycard h3 .ln{display:block;white-space:nowrap}

#pick .wrap{width:min(100% - var(--gutter) * 1.4, 1400px)}
.buycard .meta{white-space:nowrap;font-size:clamp(.78rem,4.6cqw,.9rem)}

/* stockists: coming soon */
.soon3{margin-top:var(--s6)}
.soon3 article{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);border:4px solid var(--navy)}
.soon3 h3{margin-top:var(--s2)}
.soon3 p{font-size:1rem;line-height:1.5;margin-bottom:var(--s2)}
.soon3 .btn{margin-top:auto}
.soon3 .n{margin-bottom:var(--s2)}
.lockup--mini .a,.lockup--mini .b{width:78px}
#soon-page h2{font-size:clamp(2.6rem,7.2vw,6.4rem);max-width:16ch}


/* =========================================================
   pre-launch fixes (mobile)
   ========================================================= */
/* what is it: the blue disc extends below the cake, so reserve that room and it never covers the text after it */
.cakestage{padding-bottom:12%}

/* range: badge and stickers sit on the circle's edge at every size (sized from the frame, not the screen) */
.framewrap{container-type:inline-size}
.badge-gt{width:24cqw;right:2.5cqw;top:2.5cqw}
.framewrap .sticker{width:24cqw;height:24cqw;left:2.6cqw;top:2.6cqw;padding:2cqw;font-size:4cqw;line-height:.95}
.framewrap .sticker--new{font-size:3.4cqw}

@media (max-width:900px){
  /* home: cake stays inside its circle so the ring shows; bowl stays centred in its oval */
  .circle-frame{max-width:430px}
  .circle-frame img{width:78%;left:11%;top:11%}
  .bowlfeature__img{width:min(100%,400px);justify-self:center}
  .bowlfeature__img img{width:100%;height:auto}
  /* range: all seven flavours visible at once as numbered colour dots */
  .picker{padding-top:0}
  .picker ul{justify-content:center;overflow:visible;gap:6px;padding:10px 8px 14px}
  .picker button{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;background:var(--dot);color:var(--dotink,var(--ink));border:3px solid var(--ink)}
  .picker button b{display:none}
  .picker button[aria-selected="true"]{background:var(--dot);color:var(--dotink,var(--ink));box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--ink);transform:scale(1.1)}
}

@media (max-width:900px){
  .bowlfeature__img::before{inset:-3.5% -3% -3.5% -3%}
}

/* small screens: text spans the full width, so decorative shapes step back and never fight it */
@media (max-width:900px){
  .shape.asterisk,.shape.dotring{opacity:.26}
  .shape.semi{opacity:.5}
  .shape.ring{opacity:.7}
  .shape.waves{opacity:.6}
}

@media (max-width:900px){
  .shape.asterisk,.shape.dotring{opacity:.18;width:110px!important}
  .shape.semi{opacity:.35}
  .shape.ring{opacity:.55}
}

/* eyebrow labels: readable (4.5:1 or better) on every section colour */
.t-coral .eyebrow{color:var(--navy)}
.t-purple .eyebrow{color:#fff!important}
@media (max-width:900px){ .shape.asterisk,.shape.dotring{opacity:.14} }

/* corner-bleed shapes (ring/semi/waves) were still sized for desktop's wide canvas, so on a single
   mobile column - where text runs the full width instead of sharing space with an image - they
   ended up sitting behind headlines and lead paragraphs instead of in the empty margin they bled
   into on desktop. capped the same way asterisk/dotring already are, via the --s/--w/--h custom
   property (not plain width) so border thickness and mask maths stay proportional instead of warping. */
@media (max-width:900px){
  .shape.ring{--s:150px!important}
  .shape.semi{--s:150px!important}
  .shape.waves{--w:200px!important;--h:60px!important}
}

@media (max-width:600px){ .packfan{width:86%;max-width:none} }


/* ---------- privacy & cookies ---------- */
.legal{max-width:820px}
.legal>p,.legal li,.legal dd{font-size:1.08rem;line-height:1.7}
.legal>p{margin-top:var(--s3)}
.legal h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:var(--s7) 0 var(--s2);line-height:1;scroll-margin-top:calc(var(--navh) + 20px)}
.legal ul{list-style:disc;padding-left:1.3em;display:grid;gap:10px;margin-top:var(--s3)}
.legal li::marker{color:var(--coral)}
.legal a{text-underline-offset:3px;text-decoration-thickness:2px}
.legal a:hover{color:var(--electric)}
.legal__card{background:var(--yellow);border:4px solid var(--navy);border-radius:var(--radius);padding:var(--s5)}
.legal__card ul{margin-top:var(--s2)}
.legal__toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.legal__toc a{font-family:var(--display);text-transform:lowercase;text-decoration:none;font-size:1.05rem;min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:3px solid var(--navy);border-radius:999px}
.legal__toc a:hover{background:var(--navy);color:#fff}
.legal__items{display:grid;gap:var(--s4);margin-top:var(--s4)}
.legal__items article{border:4px solid var(--navy);border-radius:var(--radius);padding:var(--s4) var(--s5);background:#fff}
.legal__items h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:var(--s2)}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:6px var(--s4);margin:0}
.legal dt{font-family:var(--display);text-transform:lowercase;font-size:1.05rem;color:var(--electric);padding-top:.2em}
.legal dd{margin:0}
@media (max-width:700px){.legal dl{grid-template-columns:1fr;gap:0}.legal dd{margin-bottom:var(--s2)}.legal__items article{padding:var(--s4)}}
mark.todo{background:var(--yellow);color:var(--navy);padding:0 6px;border-radius:6px;font-weight:900}
.footer__small a{text-underline-offset:3px}
.footer__small a:hover{color:var(--yellow)}
.finder__note{font-size:.8rem;line-height:1.4;opacity:.85}
.finder__note a{text-underline-offset:2px}
.handover .ho__note{font-size:.95rem;margin-top:var(--s2);opacity:.9}

.footer__co{margin-top:var(--s6);font-size:.85rem;line-height:1.6;opacity:.85;max-width:80ch}
.footer__co a{text-underline-offset:3px}
.footer__co a:hover{color:var(--yellow)}
.footer__co+.footer__small{margin-top:var(--s3)}

.footer__social{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5)}
.footer__social a{position:relative;font-family:var(--display);text-transform:lowercase;font-size:1.3rem;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding-bottom:8px}
.footer__social a::after,.footer nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:12px;background:var(--coral);-webkit-mask:var(--m-waves) 0 0/34px 14px repeat-x;mask:var(--m-waves) 0 0/34px 14px repeat-x;transition:background .25s,transform .35s var(--ease)}
.footer__social a:hover{color:var(--yellow)}
.footer__social a:hover::after{background:var(--yellow)}
.footer nav a{position:relative}
.footer nav a::after{transform:scaleX(0);transform-origin:left}
.footer nav a:hover::after{transform:scaleX(1)}


/* navigation: the full menu needs about 1100px next to the logo tab, so tablets and small laptops get the menu button */
@media (max-width:1099px){
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:var(--navh) 0 0 0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:var(--coral);color:var(--navy);padding:var(--s4) var(--gutter);transform:translateY(-105%);transition:transform .5s var(--ease);visibility:hidden;overflow:auto}
  .nav__links.is-open{transform:none;visibility:visible}
  .nav__links a:not(.btn){font-family:var(--display);font-size:clamp(2.2rem,9vw,3.4rem);padding:14px 0;border-bottom:4px solid var(--navy);line-height:1}
  .nav__links a:not(.btn)::after{display:none}
  .nav__links .btn{margin-top:var(--s4);min-height:60px;--b:var(--navy);--t:#fff;font-size:1.5rem}
}
@media (min-width:1100px) and (max-width:1279px){
  .nav__links{gap:18px}
  .nav__links a:not(.btn){font-size:1.02rem}
  .nav__links .btn{padding:0 16px;font-size:1rem}
}

.gopage .lockup{margin:0 auto var(--s5)}
.gopage h1{font-size:clamp(2.6rem,7vw,5.6rem);max-width:14ch;margin-inline:auto}
.gopage .bar{width:min(420px,80%);height:12px;border-radius:6px;background:rgba(0,36,110,.22);margin:var(--s5) auto 0;overflow:hidden}
.gopage .bar b{display:block;height:100%;width:0;background:var(--navy);border-radius:6px;animation:fill .9s linear forwards}
.gopage .btns{margin-top:var(--s4)}

/* ---------- cookie consent banner ---------- */
.cookiebar{position:fixed;inset:auto 0 0 0;z-index:850;background:var(--navy);color:#fff;border-top:4px solid var(--coral);padding:var(--s4) 0;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.cookiebar[hidden]{display:none}
.cookiebar__in{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:space-between}
.cookiebar__in p{font-size:.95rem;line-height:1.5;max-width:64ch;flex:1 1 320px;margin:0}
.cookiebar__in a{text-underline-offset:3px}
.cookiebar__btns{display:flex;gap:10px;flex:none}
@media (max-width:600px){
  .cookiebar{padding:var(--s3) 0}
  .cookiebar__in{gap:var(--s3)}
  .cookiebar__btns{width:100%}
  .cookiebar__btns .btn{flex:1}
}


/* ---------- flavour detail pages + FAQ ----------
   the visitor arrives from the range page, which already showed the pack, tagline and facts,
   so this page goes straight to the detail: ingredients, allergens, nutrition. built to read
   in one screen on a laptop. */
.back{display:flex;width:fit-content}
.back svg{width:20px;height:20px}
.btn.back:hover svg{transform:translateX(-5px)}
.pdp__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);align-items:start}
.pdp__cards article{background:#fff;color:var(--navy);border:4px solid var(--navy);border-radius:var(--radius);padding:var(--s3) var(--s5) var(--s3)}
.pdp__cards h3{margin-bottom:var(--s2)}
.pdp__cards p{margin-top:var(--s2);font-size:1rem;line-height:1.5}
.pdp__cards .pdp__allergen{font-size:1.1rem}
.pdp__cards .pdp__note{font-size:.85rem;opacity:.8}
.pdp__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
.pdp__actions .btns{margin-top:0}
.nutri{width:100%;border-collapse:collapse;font-size:1rem}
.nutri caption{text-align:left;font-size:.85rem;opacity:.8;padding-bottom:6px}
.nutri th,.nutri td{padding:5px 0;border-top:2px solid rgba(0,36,110,.18);text-align:left;font-weight:700}
.nutri td{text-align:right;white-space:nowrap}
.nutri .nsub th{padding-left:14px;opacity:.8}
.info .more{margin-top:var(--s3)}
.info .more a{font-family:var(--display);text-transform:lowercase;text-underline-offset:4px;text-decoration-thickness:2px}
.legal a.go{font-family:var(--display);text-transform:lowercase;font-size:1.05rem;white-space:nowrap;text-underline-offset:4px;text-decoration-thickness:2px}
@media (max-width:900px){.pdp__cards{grid-template-columns:minmax(0,1fr)}.pdp__cards article{padding:var(--s4)}  .pdp__actions{width:100%}
  .pdp__actions .btns{flex-wrap:nowrap;gap:8px;width:100%}
  .pdp__actions .btn{padding:0 14px;font-size:.95rem;gap:8px;flex:1 1 auto;min-width:0}
  .pdp__actions .btn svg{display:none}
}

/* details page: the big cake shot leads (it's the "what's in the bowl" picture), then the key facts, then the small print */
.pdp__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s4);margin-bottom:var(--s4)}
.pdp__head{display:grid;grid-template-columns:minmax(0,clamp(240px,min(46vh,36vw),480px)) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:var(--s5)}
.pdp__cake{max-width:none;width:100%}
.pdp__info h1{font-size:clamp(2rem,4.2vw,3.8rem);margin-top:2px}
.pdp__info .alt{font-family:"Hiragino Sans","PingFang TC","Apple SD Gothic Neo","Thonburi","Sukhumvit Set","Noto Sans CJK","Noto Sans Thai",system-ui,sans-serif;font-size:1.3rem;letter-spacing:.05em;line-height:1.3;margin-top:var(--s2)}
.pdp__info .lbl{font-family:var(--display);text-transform:lowercase;font-size:1.15rem;margin-top:var(--s3)}
.pdp__info .ing{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pdp__info .ing li{padding:5px 16px;border-radius:999px;background:var(--acc);color:var(--navy);font-size:.95rem;border:3px solid var(--navy)}
.pdp__info .facts{margin-top:var(--s3)}
.pdp__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:var(--s3)}
.pdp__row .spice{margin-top:0}
.award{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);text-transform:lowercase;font-size:1.15rem}
.award img{width:48px;height:48px;flex:none}
.pdp__bottom{margin-top:var(--s5)}
.pdp__cards p{font-size:1.05rem}
.nutri{font-size:1.05rem}
@media (max-width:900px){
  .pdp__head{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .pdp__cake{max-width:min(78vw,320px);margin-inline:auto}
  .pdp__cards{grid-template-columns:minmax(0,1fr)}
  .pdp__cards article{padding:var(--s4)}
  .pdp__top{margin-bottom:var(--s3)}
}

/* conversion: a buy button that never hides in the menu, and the flavour you came for is picked out on the buy page */
.nav__cta{display:none;--b:var(--coral);border-color:#000;box-shadow:0 3px 0 #000;min-height:40px;padding:0 16px;font-size:1rem}
@media (max-width:1099px){.nav__cta{display:inline-flex}}
.buycard:target{outline:6px solid var(--yellow);outline-offset:6px}

/* allergens inside the full ingredient list, emphasised exactly where the pack's label does it.
   the site's body text is already bold, so plain <strong> would be invisible: heaviest weight + highlighter. */
.pdp__cards .expand__body strong{font-weight:900;background:linear-gradient(transparent 52%,rgba(255,205,74,.95) 52%);padding:0 1px}

/* FAQ / legal cards: the grid track must be allowed to shrink to the screen (a long no-wrap link was stretching every card past the edge on phones) */
.legal__items{grid-template-columns:minmax(0,1fr)}
.legal__items article{min-width:0;overflow-wrap:break-word}
@media (max-width:600px){.legal a.go{white-space:normal}}

/* phones: single-column card grids must be allowed to shrink to the screen, and long buttons (an email address) may wrap */
@media (max-width:900px){.how3,.three,.proof,.chars,.soon3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .three article,.how3 article{min-width:0}
  .soon3 .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-top:10px;padding-bottom:10px}
}
@media (max-width:600px){.pdp__info,.pdp__head>*{min-width:0}.pdp__row{max-width:100%}.spice{max-width:100%;flex-wrap:wrap}.pdp__info h1{overflow-wrap:break-word}}

/* ---------- contact form ---------- */
.cform-card{background:#fff;color:var(--navy);border:4px solid var(--navy);border-radius:var(--radius);padding:var(--s5);max-width:780px;margin:0 auto var(--s6)}
.cform__title{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:var(--s3)}
.cform__fields{display:grid;gap:var(--s3)}
.cform__fields[hidden]{display:none}
.cform__type{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cform__type legend{font-family:var(--display);text-transform:lowercase;font-size:1.15rem;padding:0;margin-bottom:8px;float:left;width:100%}
.cform__type label{position:relative}
.cform__type input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.cform__type span{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;border:3px solid var(--navy);font-family:var(--display);text-transform:lowercase;font-size:1.05rem;transition:background .25s,color .25s}
.cform__type input:checked+span{background:var(--navy);color:#fff}
.cform__type input:focus-visible+span{outline:3px solid var(--electric);outline-offset:3px}
.cform__row{display:grid;gap:6px}
.cform label.f{font-family:var(--display);text-transform:lowercase;font-size:1.1rem}
.cform input[type=text],.cform input[type=email],.cform textarea{font:inherit;font-weight:700;color:var(--navy);width:100%;padding:12px 18px;border:3px solid var(--navy);border-radius:18px;background:#fff}
.cform textarea{min-height:150px;resize:vertical;border-radius:22px}
.cform input:focus,.cform textarea:focus{outline:3px solid var(--electric);outline-offset:2px}
.cform [aria-invalid="true"]{border-color:var(--brick)}
.cform__err{color:var(--brick);font-size:.9rem;min-height:1.2em}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform__note{font-size:.9rem;opacity:.85}
.cform .btn{justify-self:start}
.cform .btn[disabled]{opacity:.6;pointer-events:none}
.cform__status{font-family:var(--display);text-transform:lowercase;font-size:1.25rem;margin-top:var(--s2)}
.cform__status.is-bad{color:var(--brick);font-family:var(--body);text-transform:none;font-size:1rem}
@media (max-width:600px){.cform-card{padding:var(--s4)}.cform .btn{justify-self:stretch}}
@media (max-width:380px){.nutri td{white-space:normal}.pdp__cards article{padding:var(--s3)}}

/* the email address on the contact card: one line on desktop; on phones "info@" sits above "weneedgoodfood.com", never split mid-word */
@media (max-width:600px){
  .soon3 .btn .em{display:flex;flex-direction:column;align-items:center}
  .soon3 .btn .em__b{font-size:clamp(.7rem,4vw,.98rem)}
}
@media (max-width:380px){.soon3 .btn{padding-left:14px;padding-right:14px;gap:8px}.soon3 .btn svg{width:18px;height:18px}}

/* where to buy: the full stockist list by area */
.dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s5) var(--s6);margin-top:var(--s5)}
.dir__group h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:var(--s2);padding-bottom:var(--s2);border-bottom:4px solid var(--navy)}
.dir__group ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.dir__group li{display:grid;gap:2px;font-size:.98rem;line-height:1.35}
.dir__group li b{font-weight:800}
.dir__group li span{opacity:.85}
.dir__group li a{justify-self:start;text-underline-offset:3px}
.dir__more{margin-top:var(--s5);font-size:1.05rem}
.dir__more a{font-weight:800;text-underline-offset:4px}

.filters .nw{white-space:nowrap}
.filters button>span{padding:6px 0;line-height:1.1}

/* store finder: compact search block so the list gets the most room (desktop and mobile) */
@media (min-width:901px){.finder{grid-template-columns:minmax(360px,.44fr) 1fr;height:min(82vh,780px);min-height:600px}}
.finder__top{padding:12px var(--s4) 14px;gap:10px}
.finder__search input{height:48px}
.finder__search .btn{min-height:48px}
.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.filters button{width:100%;min-height:38px;padding:0 10px;font-size:.9rem;gap:6px;line-height:1.1;justify-content:flex-start;text-align:left}
.filters button>span{padding:4px 0;text-align:left}
.filters button i{flex:none;width:12px;height:12px;border-width:2.5px}
.finder__row{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.finder__row .btn{min-height:38px;padding:0 16px;font-size:.95rem;box-shadow:0 3px 0 var(--navy)}
.finder__row .finder__count{font-size:.9rem;line-height:1.25;margin:0;flex:1 1 140px}
.finder__note{margin-top:14px;max-width:70ch}
@media (max-width:600px){
  .finder__top{padding:12px 14px 14px}
  .finder__search input{padding:0 16px}
  .finder__search .btn{padding:0 16px}
  .filters button{padding:0 10px;font-size:.85rem}
  .finder__row .btn{min-height:36px;padding:0 14px;font-size:.85rem}
  .finder__row .finder__count{font-size:.85rem;flex-basis:110px}
}

/* store finder list: section headings (areas, or "nearest to you" after a search) */
.finder__list li.finder__head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px var(--s4);background:var(--navy);color:#fff;border-bottom:0;font-family:var(--display);text-transform:lowercase;font-size:.95rem;line-height:1.1;letter-spacing:.02em}
.finder__list li.finder__head span:last-child{font-size:.8rem;opacity:.75}
@media (max-width:600px){.finder__list li.finder__head{padding:7px 16px}}