/* ==========================================================================
   POPPED — Fresh donuts, good mood.
   styles.css — brand tokens, fluid type/space scales, components
   Everything scales with the viewport: type and spacing use clamp(),
   and grids use auto-fit so they reflow at ANY width, not just breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand palette — taken straight from the logo:
     orange #FF7A05 (the wordmark), maroon #8E1C23 (the subtitle + the glaze drip).
     Orange is a FILL colour, never small text — it only reaches 2.4:1 on white.
     Maroon carries every accent that has to be read. */
  --orange:#FF7A05;
  --orange-deep:#E06400;
  --orange-tint:#FFE7CE;
  --maroon:#8E1C23;
  --maroon-deep:#6E1219;
  --maroon-soft:#A8323A;
  --gold:#FFB53D;

  --bg:#FFFFFF;
  --surface:#FFF8F2;
  --tint:#FFF1E3;
  --ink:#2B1A14;
  --ink-soft:#7A675E;
  --line:#F4E4D6;
  --line-strong:#E8D2BF;
  --on-maroon:#FFFFFF;
  --ok:#2E8B57;

  /* Fluid type scale — 320px → 1400px viewport */
  --fs-xs:clamp(0.72rem, 0.69rem + 0.15vw, 0.80rem);
  --fs-sm:clamp(0.84rem, 0.80rem + 0.20vw, 0.94rem);
  --fs-base:clamp(1.00rem, 0.95rem + 0.24vw, 1.12rem);
  --fs-md:clamp(1.10rem, 1.02rem + 0.40vw, 1.32rem);
  --fs-lg:clamp(1.30rem, 1.14rem + 0.78vw, 1.75rem);
  --fs-xl:clamp(1.62rem, 1.32rem + 1.48vw, 2.50rem);
  --fs-2xl:clamp(2.05rem, 1.50rem + 2.70vw, 3.60rem);
  --fs-3xl:clamp(2.45rem, 1.60rem + 4.20vw, 4.60rem);

  /* Fluid space scale */
  --sp-1:clamp(0.25rem, 0.23rem + 0.10vw, 0.35rem);
  --sp-2:clamp(0.5rem, 0.45rem + 0.20vw, 0.65rem);
  --sp-3:clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --sp-4:clamp(1rem, 0.88rem + 0.58vw, 1.5rem);
  --sp-5:clamp(1.5rem, 1.30rem + 1.00vw, 2.25rem);
  --sp-6:clamp(2rem, 1.65rem + 1.75vw, 3.25rem);
  --sp-7:clamp(2.75rem, 2.15rem + 3.00vw, 5rem);
  --sp-8:clamp(3.5rem, 2.60rem + 4.50vw, 7rem);

  --gutter:clamp(1rem, 4vw, 2.5rem);
  --maxw:1180px;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-pill:999px;

  --shadow-sm:0 4px 12px rgba(59,33,24,0.07);
  --shadow-md:0 12px 28px rgba(59,33,24,0.11);
  --shadow-lg:0 24px 48px -18px rgba(59,33,24,0.32);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.8,.45,1);

  --tap:44px; /* minimum touch target */
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  color-scheme:light;
  font-family:'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:var(--fs-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}

h1,h2,h3,h4{
  font-family:'Baloo 2', 'Karla', system-ui, sans-serif;
  font-weight:700;
  line-height:1.12;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
h1{font-size:var(--fs-3xl); letter-spacing:-0.015em;}
h2{font-size:var(--fs-xl);}
h3{font-size:var(--fs-lg);}
h4{font-size:var(--fs-md);}

p{margin:0; color:var(--ink-soft);}
p.measure{max-width:60ch;}

a{color:inherit;}
img,svg,video{max-width:100%; height:auto; display:block;}
button,input,select,textarea{font:inherit; color:inherit;}

.mono{
  font-family:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric:tabular-nums;
}

:focus-visible{
  outline:3px solid var(--maroon);
  outline-offset:2px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-60px; left:var(--gutter); z-index:100;
  background:var(--maroon); color:var(--on-maroon);
  padding:0.7em 1.2em; border-radius:0 0 var(--r-sm) var(--r-sm);
  text-decoration:none; font-weight:700;
  transition:top .2s var(--ease-out);
}
.skip-link:focus{top:0;}

/* Layout primitives ------------------------------------------------------- */
.container{
  width:min(100% - (2 * var(--gutter)), var(--maxw));
  margin-inline:auto;
}
.section{padding-block:var(--sp-7);}
.section--tight{padding-block:var(--sp-6);}

/* Anchor jumps clear the sticky header instead of hiding under it */
:target,
section[id],
#top{scroll-margin-top:clamp(72px, 9vw, 96px);}

.section-head{max-width:62ch; margin-bottom:var(--sp-5);}
.section-head h2{margin-top:var(--sp-2);}
.section-head p{margin-top:var(--sp-3);}

.eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:var(--fs-xs);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--maroon);
  font-weight:600;
}
.eyebrow--light{color:var(--gold);}

/* Buttons ----------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap);
  padding:0.72em 1.5em;
  border-radius:var(--r-sm);
  border:2px solid transparent;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:var(--fs-sm);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease,
             transform .18s var(--ease-out), box-shadow .18s ease;
}
.btn:active{transform:scale(0.97);}
.btn--primary{background:var(--maroon); color:var(--on-maroon);}
.btn--primary:hover{background:var(--maroon-deep); box-shadow:var(--shadow-md);}
.btn--primary:disabled{background:var(--line); color:var(--ink-soft); cursor:not-allowed; box-shadow:none;}
.btn--ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn--ghost:hover{border-color:var(--maroon); color:var(--maroon); background:var(--surface);}
.btn--white{background:#FFFFFF; color:var(--maroon); box-shadow:var(--shadow-sm);}
.btn--white:hover{background:var(--surface); box-shadow:var(--shadow-md);}
.btn--sm{padding:0.55em 1.1em; min-height:38px; font-size:var(--fs-xs);}
.btn--block{width:100%;}

/* --------------------------------------------------------------------------
   3. SCROLL PROGRESS
   -------------------------------------------------------------------------- */
.scroll-progress{
  position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:60;
  background:linear-gradient(90deg, var(--orange), var(--maroon));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* --------------------------------------------------------------------------
   4. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 6px 20px rgba(59,33,24,0.06);
}
.nav{
  display:flex; align-items:center; gap:var(--sp-4);
  padding-block:var(--sp-3);
}
.nav__logo{display:flex; align-items:center; flex-shrink:0;}
.nav__logo img{height:clamp(26px, 2.4vw, 34px); width:auto;}
.nav__links{
  display:flex; gap:clamp(1rem, 2.2vw, 1.9rem);
  list-style:none; margin:0 auto 0 0; padding:0;
  font-weight:700; font-size:var(--fs-sm);
}
.nav__links a{
  text-decoration:none; position:relative; padding-block:6px; display:inline-block;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--maroon); border-radius:2px; transition:right .25s var(--ease-out);
}
.nav__links a:hover{color:var(--maroon);}
.nav__links a:hover::after{right:0;}
.nav__actions{display:flex; align-items:center; gap:var(--sp-2); margin-left:auto;}

.icon-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap);
  border-radius:var(--r-sm);
  border:2px solid var(--line);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .18s ease, transform .18s var(--ease-out);
}
.icon-btn:hover{border-color:var(--maroon); transform:translateY(-1px);}
.icon-btn:active{transform:scale(0.94);}

.cart-count{
  position:absolute; top:-8px; right:-8px;
  min-width:22px; height:22px; padding:0 5px;
  background:var(--maroon); color:#fff;
  border-radius:var(--r-pill);
  font-family:'JetBrains Mono', monospace; font-size:0.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transform:scale(0); transition:transform .3s var(--ease-pop);
}
.cart-count.is-visible{transform:scale(1);}
.cart-count.is-bumping{animation:pop .4s ease;}

.hamburger{display:none; flex-direction:column; gap:5px;}
.hamburger span{
  display:block; width:20px; height:2.5px; background:var(--ink); border-radius:2px;
  transition:transform .28s var(--ease-out), opacity .2s ease;
}
.hamburger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* Mobile menu panel */
.mobile-menu{
  position:fixed; inset:0; z-index:45;
  background:var(--maroon);
  padding:calc(var(--tap) + var(--sp-6)) var(--gutter) var(--sp-6);
  display:flex; flex-direction:column;
  overflow-y:auto;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .38s var(--ease-out), visibility .38s;
}
.mobile-menu.is-open{transform:translateY(0); visibility:visible;}
.mobile-menu a{
  color:var(--on-maroon); text-decoration:none;
  font-family:'Baloo 2', sans-serif; font-weight:700;
  font-size:var(--fs-lg);
  padding-block:var(--sp-3);
  border-bottom:1px solid rgba(252,239,223,0.18);
}
.mobile-menu .btn{margin-top:var(--sp-5);}

/* --------------------------------------------------------------------------
   5. HERO BANNER
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  background:
    radial-gradient(90% 70% at 78% 18%, var(--orange-tint) 0%, transparent 62%),
    radial-gradient(70% 60% at 8% 90%, var(--tint) 0%, transparent 70%),
    var(--bg);
  overflow:hidden;
  isolation:isolate;
}
.hero::after{ /* orange scallop, like the edge of a donut box */
  content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(10px, 1.4vw, 16px);
  background:var(--orange);
  -webkit-mask-image:radial-gradient(circle at 50% 100%, #000 0, #000 70%, transparent 71%);
  mask-image:radial-gradient(circle at 50% 100%, #000 0, #000 70%, transparent 71%);
  -webkit-mask-size:clamp(30px, 4vw, 46px) 100%;
  mask-size:clamp(30px, 4vw, 46px) 100%;
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
}
.hero__inner{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap:var(--sp-6);
  align-items:center;
  padding-block:var(--sp-7);
}
.hero h1{margin-top:var(--sp-3);}
.hero h1 .accent{color:var(--maroon);}
.hero__lede{
  color:var(--ink-soft);
  font-size:var(--fs-md);
  margin-top:var(--sp-4);
  max-width:46ch;
}
.hero__ctas{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5);}
.hero__chips{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-5);
  font-family:'JetBrains Mono', monospace;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.hero__chips span{display:inline-flex; align-items:center; gap:0.5em;}
.hero__chips .dot{
  width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0;
}

/* Hero donut stack */
.hero__stage{
  position:relative;
  display:grid; place-items:center;
  min-height:clamp(240px, 34vw, 400px);
}
.hero__stage .glow{
  position:absolute; inset:8% 8% 8% 8%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,5,0.30) 0%, transparent 68%);
  filter:blur(6px);
}
.hero__donut{
  position:relative; z-index:2;
  width:clamp(180px, 26vw, 300px);
  filter:drop-shadow(0 22px 30px rgba(142,28,35,0.22));
  cursor:pointer;
  animation:hover-bob 4.2s ease-in-out infinite;
  transition:transform .3s var(--ease-out);
}
.hero__donut:hover{animation:squish .7s var(--ease-pop) 1;}
.hero__float{
  position:absolute; z-index:1;
  width:clamp(52px, 7.5vw, 96px);
  filter:drop-shadow(0 12px 18px rgba(142,28,35,0.18));
  animation:hover-bob 5.4s ease-in-out infinite;
}
.hero__float--a{top:2%; left:2%; animation-delay:.4s; transform:rotate(-12deg);}
.hero__float--b{bottom:6%; left:8%; animation-delay:1.1s; transform:rotate(9deg);}
.hero__float--c{top:8%; right:4%; animation-delay:1.8s; transform:rotate(14deg);}

/* --------------------------------------------------------------------------
   6. FLAVOR TICKER
   -------------------------------------------------------------------------- */
.ticker{
  background:var(--orange);
  overflow:hidden;
  padding-block:var(--sp-3);
}
.ticker__track{
  display:flex; gap:var(--sp-5); width:max-content;
  padding-inline:var(--sp-4);
  animation:ticker 34s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused;}
.ticker__item{
  display:flex; align-items:center; gap:var(--sp-2);
  white-space:nowrap;
  font-family:'Baloo 2', sans-serif; font-weight:700;
  font-size:var(--fs-sm);
  color:var(--ink);
}
.ticker__item img{width:clamp(24px, 3vw, 34px); flex-shrink:0;}
.ticker__item .sep{color:var(--maroon);}

/* --------------------------------------------------------------------------
   7. STATS
   -------------------------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap:var(--sp-4);
  padding-block:var(--sp-6);
}
.stat{
  text-align:center;
  padding:var(--sp-4) var(--sp-3);
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line);
}
.stat__num{
  font-family:'Baloo 2', sans-serif; font-weight:800;
  font-size:var(--fs-xl); color:var(--maroon); line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block; margin-top:var(--sp-2);
  font-size:var(--fs-xs); color:var(--ink-soft);
  letter-spacing:0.04em; text-transform:uppercase;
  font-family:'JetBrains Mono', monospace;
}

/* --------------------------------------------------------------------------
   8. MENU
   -------------------------------------------------------------------------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-bottom:var(--sp-5);
}
.filter-btn{
  min-height:40px;
  padding:0.5em 1.15em;
  border-radius:var(--r-pill);
  border:2px solid var(--line);
  background:transparent;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:var(--fs-sm);
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s var(--ease-out);
}
.filter-btn:hover{border-color:var(--maroon); color:var(--maroon);}
.filter-btn[aria-pressed="true"]{
  background:var(--maroon); border-color:var(--maroon); color:var(--on-maroon);
}
.filter-btn:active{transform:scale(0.96);}

.menu-grid{
  display:grid;
  /* The min track itself is fluid, so phones get 2 up, tablets 4, desktops 5 —
     without a single hard-coded breakpoint. */
  grid-template-columns:repeat(auto-fill, minmax(min(100%, clamp(150px, 20vw, 215px)), 1fr));
  gap:var(--sp-4);
}
.donut-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  text-align:center;
  padding:var(--sp-4) var(--sp-3) var(--sp-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  overflow:hidden;
  transition:transform .28s var(--ease-out), box-shadow .28s ease, border-color .2s ease;
}
.donut-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--orange);
}
.donut-card.is-hidden{display:none;}
.donut-card__img{
  width:clamp(88px, 12vw, 124px);
  aspect-ratio:1;
  cursor:zoom-in;
  filter:drop-shadow(0 10px 14px rgba(59,33,24,0.18));
  transition:transform .3s var(--ease-out);
}
.donut-card:hover .donut-card__img{transform:scale(1.06) rotate(-4deg);}
.donut-card__name{font-family:'Baloo 2', sans-serif; font-weight:700; font-size:var(--fs-sm); color:var(--ink);}
.donut-card__price{
  font-family:'JetBrains Mono', monospace; font-weight:600;
  font-size:var(--fs-sm); color:var(--maroon);
}
.donut-card__tag{
  position:absolute; top:14px; left:-34px;
  background:var(--maroon); color:#fff;
  font-family:'JetBrains Mono', monospace;
  font-size:0.6rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 38px;
  transform:rotate(-40deg);
  box-shadow:var(--shadow-sm);
}

/* Quantity stepper */
.stepper{display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-2);}
.stepper__btn{
  width:36px; height:36px;
  border-radius:var(--r-sm);
  border:2px solid var(--line);
  background:var(--surface);
  font-size:1.1rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.stepper__btn:hover:not(:disabled){border-color:var(--maroon); color:var(--maroon);}
.stepper__btn:active:not(:disabled){transform:scale(0.9);}
.stepper__btn--plus{background:var(--maroon); border-color:var(--maroon); color:var(--on-maroon);}
.stepper__btn--plus:hover{background:var(--maroon-deep); border-color:var(--maroon-deep); color:var(--on-maroon);}
.stepper__btn:disabled{opacity:0.35; cursor:not-allowed;}
.stepper__val{
  min-width:22px; text-align:center;
  font-family:'JetBrains Mono', monospace; font-weight:700;
}
.stepper__val.is-bumping{animation:pop .3s ease;}

/* --------------------------------------------------------------------------
   9. BOX BUILDER
   -------------------------------------------------------------------------- */
.builder{
  background:var(--tint);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
}
.builder__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:var(--sp-5);
  align-items:start;
}
.builder__sizes{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4);}
.size-btn{
  min-height:40px; padding:0.45em 1.1em;
  border-radius:var(--r-pill); border:2px solid var(--line-strong);
  background:var(--surface); cursor:pointer;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:var(--fs-sm);
  transition:background .2s, color .2s, border-color .2s;
}
.size-btn[aria-pressed="true"]{background:var(--maroon); border-color:var(--maroon); color:var(--on-maroon);}

.picker{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 94px), 1fr));
  gap:var(--sp-2);
}
.picker__item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:var(--sp-2);
  border-radius:var(--r-sm);
  border:2px solid transparent;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s ease, transform .15s var(--ease-out);
  min-height:var(--tap);
}
.picker__item:hover{border-color:var(--orange); transform:translateY(-3px);}
.picker__item:disabled{opacity:0.45; cursor:not-allowed; transform:none;}
.picker__item img{width:46px;}
.picker__item span{font-size:0.68rem; line-height:1.25; text-align:center; color:var(--ink-soft);}

/* The box */
.box{
  background:var(--surface);
  border:2px dashed var(--line-strong);
  border-radius:var(--r-md);
  padding:var(--sp-4);
}
.box__slots{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(58px, 1fr));
  gap:var(--sp-2);
  margin-block:var(--sp-3);
}
.slot{
  aspect-ratio:1;
  border-radius:50%;
  background:var(--tint);
  display:grid; place-items:center;
  position:relative;
  border:2px solid transparent;
  transition:border-color .2s ease;
}
.slot.is-filled{background:transparent; cursor:pointer;}
.slot.is-filled:hover{border-color:var(--maroon);}
.slot img{width:86%;}
.slot.is-filled::after{
  content:"×";
  position:absolute; top:-4px; right:-4px;
  width:20px; height:20px; border-radius:50%;
  background:var(--maroon); color:#fff;
  font-size:13px; line-height:20px; text-align:center; font-weight:700;
  opacity:0; transition:opacity .18s ease;
}
.slot.is-filled:hover::after{opacity:1;}
.slot.is-pop{animation:pop .35s var(--ease-pop);}

.box__meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3);
  flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-sm);
}
.box__total{font-size:var(--fs-md); font-weight:700; color:var(--maroon);}
.box__bar{
  height:8px; border-radius:var(--r-pill);
  background:var(--tint); overflow:hidden; margin-top:var(--sp-2);
}
.box__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--orange), var(--maroon));
  border-radius:var(--r-pill);
  transition:width .35s var(--ease-out);
}

/* --------------------------------------------------------------------------
   10. FLUFF TEST
   -------------------------------------------------------------------------- */
.fluff{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
}
.fluff__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap:var(--sp-5);
  align-items:center;
}
.fluff__rows{display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4);}
.fluff__row{
  display:grid;
  grid-template-columns:minmax(88px, 1fr) 2.2fr auto;
  align-items:center; gap:var(--sp-3);
  font-size:var(--fs-sm);
}
.fluff__row .name{font-weight:700;}
.fluff__row.is-ours .name{color:var(--maroon);}
.fluff__track{
  height:14px; border-radius:var(--r-pill);
  background:var(--tint); overflow:hidden;
}
.fluff__fill{
  display:block; height:100%; border-radius:var(--r-pill);
  background:var(--ink-soft);
  width:var(--w);
  animation:fill-bar 1.2s var(--ease-out) both;
  animation-delay:var(--delay, 0s);
}
.fluff__row.is-ours .fluff__fill{background:linear-gradient(90deg, var(--orange), var(--maroon));}
.fluff__score{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:var(--fs-sm);}

.squeeze{
  text-align:center;
  padding:var(--sp-4);
  border-radius:var(--r-md);
  background:var(--tint);
}
.squeeze__donut{
  width:clamp(120px, 18vw, 170px);
  margin-inline:auto;
  filter:drop-shadow(0 12px 18px rgba(59,33,24,0.2));
  transition:transform .12s linear;
  user-select:none; -webkit-user-drag:none;
}
.squeeze__meter{
  height:12px; border-radius:var(--r-pill);
  background:var(--surface); overflow:hidden; margin-block:var(--sp-3);
  border:1px solid var(--line);
}
.squeeze__meter span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--orange), var(--maroon));
  transition:width .08s linear;
}
.squeeze__readout{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:var(--fs-sm); color:var(--maroon); min-height:1.6em;
}
.squeeze__btn{touch-action:none;}

/* --------------------------------------------------------------------------
   11. GIFTING
   -------------------------------------------------------------------------- */
.gift-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:var(--sp-4);
}
.gift-card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  transition:transform .28s var(--ease-out), box-shadow .28s ease;
}
.gift-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.gift-card--featured{border:2px solid var(--maroon);}
.gift-card__tag{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-xs);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--maroon); font-weight:700;
}
.gift-card__price{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-lg);
  font-weight:600; color:var(--maroon); margin-block:var(--sp-1);
}
.gift-card .stepper{padding-top:var(--sp-3);}

/* --------------------------------------------------------------------------
   12. COFFEE STRIP
   -------------------------------------------------------------------------- */
.coffee{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-5);
  border-radius:var(--r-lg);
  background:var(--tint);
  border:1px solid var(--line);
}
.coffee h3{margin-top:var(--sp-2);}
.coffee p{max-width:40ch;}

/* --------------------------------------------------------------------------
   13. STORY + PILLARS
   -------------------------------------------------------------------------- */
.story{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:var(--sp-6);
  align-items:center;
}
.story__art{display:grid; place-items:center;}
.story__art img{
  width:clamp(160px, 24vw, 260px);
  filter:drop-shadow(0 18px 26px rgba(59,33,24,0.22));
  animation:hover-bob 5s ease-in-out infinite;
}
.story blockquote{
  font-family:'Baloo 2', sans-serif; font-weight:700;
  font-size:var(--fs-lg); color:var(--maroon);
  margin:var(--sp-3) 0 var(--sp-4);
  text-wrap:balance;
}
.story p + p{margin-top:var(--sp-3);}

.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.pillar{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface);
  transition:transform .28s var(--ease-out), box-shadow .28s ease, border-color .2s ease;
}
.pillar:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--orange);}
.pillar img{width:56px;}
.pillar h4{margin-top:var(--sp-1);}
.pillar p{font-size:var(--fs-sm);}

/* --------------------------------------------------------------------------
   14. TESTIMONIALS CAROUSEL
   -------------------------------------------------------------------------- */
.quotes{position:relative;}
.quotes__viewport{overflow:hidden; border-radius:var(--r-lg);}
.quotes__track{
  display:flex;
  transition:transform .5s var(--ease-out);
  touch-action:pan-y;
}
.quote{
  flex:0 0 100%;
  padding:var(--sp-6) var(--sp-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  text-align:center;
}
.quote__stars{color:var(--gold); font-size:var(--fs-md); letter-spacing:0.1em;}
.quote__text{
  font-family:'Baloo 2', sans-serif; font-weight:600;
  font-size:var(--fs-md); color:var(--ink);
  margin-block:var(--sp-3);
  max-width:50ch; margin-inline:auto;
  text-wrap:balance;
}
.quote__author{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-xs);
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em;
}
.quotes__nav{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.quotes__dots{display:flex; gap:var(--sp-2);}
.quotes__dot{
  width:10px; height:10px; padding:0; border-radius:50%;
  border:none; background:var(--line-strong); cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.quotes__dot[aria-selected="true"]{background:var(--maroon); transform:scale(1.3);}
.quotes__arrow{
  width:38px; height:38px; border-radius:50%;
  border:2px solid var(--line); background:var(--surface);
  cursor:pointer; display:grid; place-items:center;
  transition:border-color .2s ease;
}
.quotes__arrow:hover{border-color:var(--maroon);}
.quotes__note{
  margin-top:var(--sp-3); text-align:center;
  font-size:var(--fs-xs); color:var(--ink-soft); font-style:italic;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq{display:flex; flex-direction:column; gap:var(--sp-2);}
.faq__item{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface);
  overflow:hidden;
}
.faq__q{
  width:100%; min-height:var(--tap);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4);
  background:transparent; border:none; cursor:pointer; text-align:left;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:var(--fs-sm);
}
.faq__q:hover{color:var(--maroon);}
.faq__icon{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--tint); color:var(--maroon);
  display:grid; place-items:center; font-size:1rem; line-height:1;
  transition:transform .3s var(--ease-out), background .2s ease;
}
.faq__item.is-open .faq__icon{transform:rotate(45deg); background:var(--maroon); color:var(--on-maroon);}
.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ease-out);
}
.faq__item.is-open .faq__a{grid-template-rows:1fr;}
.faq__a > div{overflow:hidden;}
.faq__a p{padding:0 var(--sp-4) var(--sp-4); font-size:var(--fs-sm);}

/* --------------------------------------------------------------------------
   16. ORDER FORM
   -------------------------------------------------------------------------- */
.order{
  background:var(--maroon);
  color:var(--on-maroon);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5);
}
.order__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap:var(--sp-5);
  align-items:start;
}
.order h2{color:var(--on-maroon);}
.order p{color:color-mix(in srgb, var(--on-maroon) 78%, transparent);}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-3);}
.field label{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-xs);
  letter-spacing:0.06em; text-transform:uppercase;
  color:color-mix(in srgb, var(--on-maroon) 80%, transparent);
}
.field input, .field select, .field textarea{
  min-height:var(--tap);
  padding:0.7em 0.9em;
  border-radius:var(--r-sm);
  border:2px solid rgba(252,239,223,0.25);
  background:rgba(252,239,223,0.08);
  color:var(--on-maroon);
  font-size:var(--fs-sm);
  width:100%;
}
.field textarea{min-height:88px; resize:vertical;}
.field input::placeholder, .field textarea::placeholder{color:rgba(252,239,223,0.45);}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(252,239,223,0.14);
}
.field select option{color:var(--ink); background:var(--bg);}
.field.has-error input, .field.has-error select{border-color:var(--orange);}
.field__error{
  font-size:var(--fs-xs); color:var(--orange); min-height:1.1em;
  font-family:'JetBrains Mono', monospace;
}
.order__summary{
  background:rgba(252,239,223,0.08);
  border:1px solid rgba(252,239,223,0.2);
  border-radius:var(--r-md);
  padding:var(--sp-4);
}
.order__summary h3{color:var(--on-maroon); font-size:var(--fs-md);}
.order__lines{
  list-style:none; margin:var(--sp-3) 0; padding:0;
  display:flex; flex-direction:column; gap:var(--sp-2);
  font-size:var(--fs-sm);
  max-height:220px; overflow-y:auto;
}
.order__lines li{display:flex; justify-content:space-between; gap:var(--sp-3);}
.order__lines .empty{color:color-mix(in srgb, var(--on-maroon) 60%, transparent); font-style:italic;}
.order__total{
  display:flex; justify-content:space-between;
  padding-top:var(--sp-3); border-top:1px solid rgba(252,239,223,0.22);
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:var(--fs-md);
}
.order__actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4);}

/* --------------------------------------------------------------------------
   17. VISIT
   -------------------------------------------------------------------------- */
.visit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap:var(--sp-5);
}
.visit-card{
  padding:var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface);
}
.visit-card ul{list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2);}
.visit-card li{
  display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  padding-bottom:var(--sp-2); border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
}
.visit-card li:last-child{border-bottom:none; padding-bottom:0;}
.visit-card .meta{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-xs); color:var(--ink-soft);
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--ink); color:#FFFFFF;
  padding-block:var(--sp-6) var(--sp-5);
  margin-top:var(--sp-7);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:var(--sp-5);
}
.site-footer img.logo{width:clamp(130px, 16vw, 170px); margin-bottom:var(--sp-3);}
.site-footer h4{color:#FFFFFF; font-size:var(--fs-sm); margin-bottom:var(--sp-2);}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2);}
.site-footer a{
  color:rgba(255,255,255,0.78);
  text-decoration:none; font-size:var(--fs-sm);
}
.site-footer a:hover{color:var(--gold);}
.site-footer p{color:rgba(255,255,255,0.66); font-size:var(--fs-sm);}
.socials{flex-direction:row !important; gap:var(--sp-3) !important; margin-top:var(--sp-3);}
.socials a{
  width:var(--tap); height:var(--tap); border-radius:var(--r-sm);
  border:1px solid rgba(252,239,223,0.25);
  display:grid; place-items:center;
}
.socials a:hover{border-color:var(--gold); background:rgba(252,239,223,0.08);}
.footer-bottom{
  margin-top:var(--sp-5); padding-top:var(--sp-4);
  border-top:1px solid rgba(252,239,223,0.18);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-3);
  font-size:var(--fs-xs);
  color:rgba(255,255,255,0.6);
}

/* --------------------------------------------------------------------------
   19. CART DRAWER
   -------------------------------------------------------------------------- */
.overlay{
  position:fixed; inset:0; z-index:70;
  background:rgba(59,33,24,0.45);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
  backdrop-filter:blur(2px);
}
.overlay.is-open{opacity:1; pointer-events:auto;}

.drawer{
  position:fixed; top:0; right:0; z-index:71;
  height:100%; height:100dvh;
  width:min(440px, 100%);
  background:var(--bg);
  display:flex; flex-direction:column;
  box-shadow:-20px 0 50px rgba(59,33,24,0.22);
  transform:translateX(101%);
  transition:transform .4s var(--ease-out);
}
.drawer.is-open{transform:translateX(0);}
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
}
.drawer__body{flex:1; overflow-y:auto; padding:var(--sp-3) var(--sp-5); -webkit-overflow-scrolling:touch;}
.drawer__foot{border-top:1px solid var(--line); padding:var(--sp-4) var(--sp-5) var(--sp-5);}
.drawer__empty{text-align:center; padding-block:var(--sp-7); color:var(--ink-soft);}
.drawer__empty img{width:110px; margin:0 auto var(--sp-3); opacity:0.6;}

.cart-line{
  display:flex; align-items:center; gap:var(--sp-3);
  padding-block:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.cart-line img{width:54px; flex-shrink:0;}
.cart-line__info{flex:1; min-width:0;}
.cart-line__name{font-weight:700; font-size:var(--fs-sm);}
.cart-line__unit{font-size:var(--fs-xs); color:var(--ink-soft);}
.cart-line__total{
  font-family:'JetBrains Mono', monospace; font-weight:600;
  font-size:var(--fs-sm); white-space:nowrap;
}
.cart-subtotal{
  display:flex; justify-content:space-between; align-items:baseline;
  font-weight:700; font-size:var(--fs-md);
  margin-bottom:var(--sp-3);
}
.drawer__note{
  margin-top:var(--sp-3); text-align:center;
  font-size:var(--fs-xs); color:var(--ink-soft);
}
.cart-success{
  text-align:center; padding:var(--sp-7) var(--sp-4);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.cart-success img{width:120px;}

/* --------------------------------------------------------------------------
   20. MOBILE ORDER BAR / TOAST / BACK TO TOP / LIGHTBOX
   -------------------------------------------------------------------------- */
.order-bar{
  display:none;
  position:fixed; left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); z-index:40;
  align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--maroon); color:var(--on-maroon);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
}
.order-bar__info{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.order-bar__info strong{font-family:'Baloo 2', sans-serif; font-size:var(--fs-sm);}
.order-bar__info span{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-xs);
  opacity:0.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.toast-stack{
  position:fixed; z-index:90;
  left:50%; transform:translateX(-50%);
  bottom:calc(var(--sp-6) + 60px);
  display:flex; flex-direction:column; gap:var(--sp-2);
  width:min(360px, calc(100% - 2 * var(--sp-4)));
  pointer-events:none;
}
.toast{
  background:var(--ink); color:var(--bg);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm); font-weight:600;
  display:flex; align-items:center; gap:var(--sp-2);
  animation:toast-in .32s var(--ease-pop) both;
}
.toast.is-leaving{animation:toast-out .25s ease forwards;}
.toast img{width:26px; flex-shrink:0;}

.to-top{
  position:fixed; right:var(--sp-4); bottom:var(--sp-4); z-index:39;
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--line); background:var(--surface);
  cursor:pointer; display:grid; place-items:center;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s var(--ease-out), border-color .2s ease;
  box-shadow:var(--shadow-sm);
}
.to-top.is-visible{opacity:1; transform:translateY(0); pointer-events:auto;}
.to-top:hover{border-color:var(--maroon);}

.lightbox{
  position:fixed; inset:0; z-index:80;
  background:rgba(59,33,24,0.72);
  display:grid; place-items:center;
  padding:var(--gutter);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
  backdrop-filter:blur(4px);
}
.lightbox.is-open{opacity:1; pointer-events:auto;}
.lightbox__card{
  background:var(--bg); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5);
  width:min(420px, 100%);
  text-align:center;
  transform:scale(0.92);
  transition:transform .32s var(--ease-pop);
  position:relative;
}
.lightbox.is-open .lightbox__card{transform:scale(1);}
.lightbox__card img{width:min(220px, 60%); margin:0 auto var(--sp-3);}
.lightbox__close{
  position:absolute; top:var(--sp-3); right:var(--sp-3);
  width:36px; height:36px; border-radius:50%;
  border:2px solid var(--line); background:var(--surface); cursor:pointer;
  font-size:1.1rem; line-height:1;
}
.lightbox__price{
  font-family:'JetBrains Mono', monospace; font-size:var(--fs-md);
  color:var(--maroon); font-weight:700; margin-block:var(--sp-2);
}

/* Fly-to-cart clone */
.fly-donut{
  position:fixed; z-index:85; pointer-events:none;
  width:70px;
  transition:transform .75s cubic-bezier(.55,-0.1,.75,.6), opacity .75s ease;
}

.confetti{
  position:absolute; top:0; width:9px; height:15px; border-radius:2px;
  animation:confetti-fall 1.5s ease-in forwards;
}

/* --------------------------------------------------------------------------
   21. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes pop{
  0%{transform:scale(1);} 45%{transform:scale(1.35);} 100%{transform:scale(1);}
}
@keyframes squish{
  0%{transform:scale(1,1);}
  28%{transform:scale(1.12,0.86);}
  55%{transform:scale(0.9,1.1);}
  78%{transform:scale(1.04,0.97);}
  100%{transform:scale(1,1);}
}
@keyframes hover-bob{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-14px) rotate(3deg);}
}
@keyframes ticker{
  from{transform:translateX(0);} to{transform:translateX(-50%);}
}
@keyframes fill-bar{
  from{width:0;} to{width:var(--w);}
}
@keyframes toast-in{
  from{opacity:0; transform:translateY(16px) scale(0.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes toast-out{
  to{opacity:0; transform:translateY(-8px);}
}
@keyframes confetti-fall{
  to{transform:translateY(380px) rotate(240deg); opacity:0;}
}

/* --------------------------------------------------------------------------
   22. BREAKPOINTS
   Most layout adapts continuously via auto-fit grids + clamp().
   These handle navigation mode and small-screen affordances only.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .nav__links{display:none;}
  .hamburger{display:flex;}
}
@media (min-width:901px){
  .mobile-menu{display:none;}
}
@media (max-width:640px){
  .nav__actions .btn{display:none;}          /* CTA lives in the order bar */
  .order-bar{display:flex;}
  body{padding-bottom:88px;}                  /* room for the order bar */
  .to-top{bottom:calc(var(--sp-4) + 72px);}
  .toast-stack{bottom:calc(var(--sp-4) + 96px);}
  .fluff__row{grid-template-columns:minmax(72px, 1fr) 1.6fr auto; gap:var(--sp-2);}
  .drawer{width:100%;}
}
@media (max-width:400px){
  .picker{grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));}
  .box__slots{grid-template-columns:repeat(auto-fit, minmax(48px, 1fr));}
}
@media (min-width:1500px){
  :root{--maxw:1280px;}
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .fluff__fill{width:var(--w);}
  .ticker__track{animation:none;}
  .hero__donut, .hero__float, .story__art img{animation:none;}
  .donut-card:hover, .gift-card:hover, .pillar:hover{transform:none;}
}

/* Print ------------------------------------------------------------------- */
@media print{
  .site-header, .order-bar, .to-top, .drawer, .overlay, .ticker, .toast-stack{display:none !important;}
  body{background:#fff; color:#000;}
}