/* ==========================================================================
   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 — the official values from the Popped brand kit:
     orange #FF7900 (the wordmark), maroon #84151E (the descriptor + 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:#FF7900;
  --orange-deep:#E06A00;
  --orange-tint:#FFE7CE;
  --maroon:#84151E;
  --maroon-deep:#6B0F17;
  --maroon-soft:#A02A33;
  --tint-deep:#FFD9B0;

  --bg:#FFFFFF;
  --surface:#FFFAF5;
  --tint:#FBF6EF;
  --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:'Poppins', 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:'Poppins', 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{
  /* figures that line up in columns — same family, tabular numerals */
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

: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-variant-numeric:tabular-nums;
  font-size:var(--fs-xs);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--maroon);
  font-weight:600;
}
.eyebrow--light{color:var(--tint-deep);}

/* 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:'Poppins', 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(34px, 3.4vw, 48px); 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-variant-numeric:tabular-nums; 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:'Poppins', 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-variant-numeric:tabular-nums;
  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:'Poppins', 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:'Poppins', 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-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   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:'Poppins', 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 menu is exactly 12 flavours, so the column count is not arbitrary:
     2, 3, 4 and 6 all divide cleanly and leave no stranded last row. 5 does
     not — at 1280px the old track produced five across and an orphan pair.
     Widening the minimum track settles desktop on four, which also gives the
     photographs enough room to be worth looking at. */
  grid-template-columns:repeat(auto-fill, minmax(min(100%, clamp(150px, 22vw, 260px)), 1fr));
  gap:var(--sp-4);
}
@media (min-width:1100px){
  .menu-grid{ grid-template-columns:repeat(4, 1fr); }   /* 3 rows of 4, exactly */
}
.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:'Poppins', sans-serif; font-weight:700; font-size:var(--fs-sm); color:var(--ink);}
.donut-card__price{
  font-variant-numeric:tabular-nums; 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-variant-numeric:tabular-nums;
  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-variant-numeric:tabular-nums; 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:'Poppins', 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-variant-numeric:tabular-nums; 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-variant-numeric:tabular-nums; 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(--tint-deep), var(--orange), var(--maroon));
  transition:width .08s linear;
}
.squeeze__readout{
  font-variant-numeric:tabular-nums; font-weight:700;
  font-size:var(--fs-sm); color:var(--maroon); min-height:1.6em;
}
.squeeze__btn{touch-action:none;}

/* --------------------------------------------------------------------------
   11. GIFTING
   -------------------------------------------------------------------------- */
/* ---- the three sizes ------------------------------------------------ */
.gift-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-4);
}
@media (max-width:820px){
  .gift-grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}

.gift-card{
  display:flex; flex-direction:column;
  padding:var(--sp-5);
  border:1px solid var(--line);
  border-radius:clamp(16px,2.4vw,24px);
  background:var(--bg);
  transition:transform .28s var(--ease-out), box-shadow .28s ease, border-color .2s ease;
}
.gift-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 44px rgba(43,26,20,.09);
  border-color:var(--line-strong);
}
.gift-card--featured{ border:2px solid var(--orange); background:var(--surface); }

.gift-card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); min-height:30px;
}
.gift-card__size{
  font-variant-numeric:tabular-nums; font-weight:800;
  font-size:var(--fs-sm); letter-spacing:.04em;
  color:var(--maroon);
  background:var(--orange-tint);
  border-radius:8px; padding:.25em .6em;
}
.gift-card__tag{
  font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--on-maroon);
  background:var(--maroon); border-radius:100px; padding:.4em .9em;
}

/* the doughnuts themselves, laid out at the size of the box */
.pile{
  display:grid; justify-content:center; align-content:center;
  gap:8px; margin:var(--sp-4) 0 var(--sp-4);
  min-height:clamp(140px, 19vw, 180px);
  border-radius:clamp(14px, 2vw, 20px);
  /* NB: written as `radial-gradient(70% 62% at ...)`, not `ellipse 70% 62%`.
     Two length values already mean an ellipse, and the `ellipse` keyword form
     broke Hostinger's CSS pipeline — it silently dropped every rule after this
     point, which took the whole Rewards section with it. */
  background:
    radial-gradient(70% 62% at 50% 46%, var(--orange-tint) 0%, var(--tint) 62%, transparent 100%);
  padding:var(--sp-4) var(--sp-3);
}
.gift-card--featured .pile{
  background:
    radial-gradient(70% 62% at 50% 46%, #FFF3E4 0%, #FFFFFF 66%, transparent 100%);
}
.pile img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 4px 8px rgba(43,26,20,.13));
}
.pile--2  { grid-template-columns:repeat(2, clamp(58px, 9vw, 78px)); gap:14px; }
.pile--6  { grid-template-columns:repeat(3, clamp(44px, 6.6vw, 62px)); gap:10px; }
.pile--12 { grid-template-columns:repeat(4, clamp(33px, 5vw, 46px)); gap:7px; }

.gift-card h3{ font-size:var(--fs-lg); line-height:1.15; }
.gift-card__count{
  font-size:var(--fs-xs); color:var(--ink-soft); font-weight:600;
  margin:4px 0 var(--sp-2);
}
.gift-card p{ font-size:var(--fs-sm); color:var(--ink-soft); }
.gift-card__foot{
  margin-top:auto; padding-top:var(--sp-4);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap;
}
.gift-card__price{
  font-variant-numeric:tabular-nums; font-size:var(--fs-lg);
  font-weight:700; color:var(--maroon);
}
.gift-card .stepper{ padding-top:0; }

/* ---- the bulk band -------------------------------------------------- */
.crate{
  margin-top:var(--sp-5);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-5);
  padding:clamp(1.4rem,3.5vw,2.4rem);
  border-radius:clamp(16px,2.4vw,24px);
  background:var(--surface);
  border:1px solid var(--line);
}
.crate__body{ flex:1 1 320px; }
.crate__body h3{ font-size:var(--fs-xl); margin:var(--sp-2) 0; }
.crate__body p{ font-size:var(--fs-sm); color:var(--ink-soft); max-width:52ch; }
.crate__cta{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.crate__count{
  font-variant-numeric:tabular-nums; font-weight:800;
  font-size:clamp(2rem,5vw,3rem); line-height:1; color:var(--orange);
  display:flex; align-items:baseline; gap:.3em;
}
.crate__count small{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* --------------------------------------------------------------------------
   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:'Poppins', 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(--orange); font-size:var(--fs-md); letter-spacing:0.1em;}
.quote__text{
  font-family:'Poppins', 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-variant-numeric:tabular-nums; font-size:var(--fs-xs);
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em;
}

/* the person under the quote — initial in a circle, name, city */
.quote__by{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.quote__av{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange); color:var(--ink);
  font-weight:800; font-size:var(--fs-md); line-height:1;
}
.quote__who{ text-align:left; line-height:1.3; }
.quote__who strong{ display:block; font-size:var(--fs-sm); color:var(--ink); }
.quote__who span{ font-size:var(--fs-xs); color:var(--ink-soft); }

/* Until real words are pasted in, the placeholder looks like a placeholder —
   so nobody ships invented praise by accident. Delete data-placeholder
   (or this rule) once the quotes are real. */
.quote__text[data-placeholder]{
  color:var(--ink-soft); font-weight:500; font-style:italic;
}
.quote__text[data-placeholder]::before{
  content:'Placeholder'; display:block;
  font-style:normal; font-size:10px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--maroon); background:var(--orange-tint);
  border-radius:100px; padding:.3em .8em; width:max-content;
  margin:0 auto var(--sp-3);
}
.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);}
/* --------------------------------------------------------------------------
   The empty state for Word of mouth. A new shop has no reviews, and inventing
   some is not an option — so the space asks for one instead of faking one.
   -------------------------------------------------------------------------- */
.quotes-invite{
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.75rem,5vw,3.25rem) clamp(1.25rem,4vw,2.5rem);
}
.quotes-invite img{
  width:clamp(64px,10vw,88px); height:auto; margin:0 auto var(--sp-4); display:block;
  filter:drop-shadow(0 6px 14px rgba(43,26,20,.16));
}
.quotes-invite h3{ font-size:var(--fs-xl); margin-bottom:var(--sp-3); }
.quotes-invite p{
  font-size:var(--fs-sm); color:var(--ink-soft);
  max-width:56ch; margin:0 auto; line-height:1.7;
}
.quotes-invite__actions{
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
  justify-content:center; margin-top:var(--sp-5);
}

/* --------------------------------------------------------------------------
   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:'Poppins', 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-variant-numeric:tabular-nums; 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(--tint-deep); 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-variant-numeric:tabular-nums;
}
.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-variant-numeric:tabular-nums; 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-variant-numeric:tabular-nums; 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(150px, 18vw, 195px); height:auto; 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);}
/* Plain <li> text was inheriting the body size and towering over the links
   next to it, and long email addresses were running past the column edge. */
.site-footer li{
  font-size:var(--fs-sm); color:rgba(255,255,255,0.78);
  line-height:1.5; overflow-wrap:anywhere;
}
.ftr-tag{
  display:block; font-size:var(--fs-xs);
  color:rgba(255,255,255,0.45); letter-spacing:.04em;
}
.site-footer a{
  color:rgba(255,255,255,0.78);
  text-decoration:none; font-size:var(--fs-sm);
}
.site-footer a:hover{color:var(--tint-deep);}
.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(--tint-deep); 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-variant-numeric:tabular-nums; 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:'Poppins', sans-serif; font-size:var(--fs-sm);}
.order-bar__info span{
  font-variant-numeric:tabular-nums; 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-variant-numeric:tabular-nums; 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;}
}

/* --------------------------------------------------------------------------
   23. MEMBERSHIP, REWARDS & LOCATION
   -------------------------------------------------------------------------- */

/* Account button in the header */
.account-btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:var(--tap); padding:0 0.9em 0 0.5em;
  border-radius:var(--r-pill);
  border:2px solid var(--line);
  background:var(--surface);
  cursor:pointer;
  font-weight:600; font-size:var(--fs-sm);
  white-space:nowrap;
  transition:border-color .18s ease, transform .18s var(--ease-out);
}
.account-btn:hover{border-color:var(--maroon); transform:translateY(-1px);}
.account-btn:active{transform:scale(0.96);}
.account-btn__avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--maroon); color:#fff;
  display:grid; place-items:center; flex-shrink:0;
  font-weight:700; font-size:0.82rem; letter-spacing:.02em;
}
.account-btn.is-member .account-btn__avatar{background:var(--orange); color:var(--ink);}
.account-btn__label{max-width:9ch; overflow:hidden; text-overflow:ellipsis;}

/* Rewards section */
.rewards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:var(--sp-5);
  align-items:start;
}
.reward-panel{
  background:var(--maroon); color:var(--on-maroon);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5);
  min-height:220px;
  display:flex; flex-direction:column; justify-content:center;
}
.reward-panel h3{color:var(--on-maroon); font-size:var(--fs-lg);}
.reward-panel p{color:rgba(255,255,255,.8); font-size:var(--fs-sm); margin-top:var(--sp-2);}

.ring-row{display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;}
.ring{
  --pct:0;
  width:112px; height:112px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--orange) calc(var(--pct) * 1%), rgba(255,255,255,.16) 0);
  display:grid; place-items:center;
  position:relative;
}
.ring::after{
  content:""; position:absolute; inset:11px; border-radius:50%; background:var(--maroon);
}
.ring__val{
  position:relative; z-index:1; text-align:center; line-height:1.05;
}
.ring__val strong{display:block; font-size:1.7rem; font-weight:700; font-variant-numeric:tabular-nums;}
.ring__val span{display:block; font-size:0.66rem; opacity:.78; letter-spacing:.08em; text-transform:uppercase; margin-top:2px;}

.reward-free{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:var(--orange); color:var(--ink);
  border-radius:var(--r-pill); padding:0.45em 1em;
  font-weight:700; font-size:var(--fs-sm);
  margin-top:var(--sp-3);
}

.tiers{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3);}
.tier{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface);
}
.tier__n{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:var(--orange-tint); color:var(--maroon);
  display:grid; place-items:center;
  font-weight:700; font-size:1.15rem; font-variant-numeric:tabular-nums;
}
.tier strong{display:block; font-size:var(--fs-sm); font-weight:700;}
/* Scoped to the text column on purpose: a bare `.tier span` also matched the
   number badge and quietly shrank it to caption size in muted grey. */
.tier > div span{display:block; font-size:var(--fs-xs); color:var(--ink-soft); margin-top:2px;}

/* the free donuts each tier earns you */
.tier__free{
  display:flex; gap:4px; margin-left:auto; flex:none;
}
.tier__free img{
  width:clamp(30px, 4.5vw, 44px); height:auto;
  filter:drop-shadow(0 3px 6px rgba(43,26,20,.16));
}

/* a run of donuts with one marked free, under the tiers */
.rewards-strip{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:clamp(.4rem, 1.6vw, 1rem);
  margin-top:var(--sp-5);
  padding:var(--sp-5) var(--sp-4);
  border-radius:var(--r-lg);
  background:
    radial-gradient(60% 120% at 50% 50%, var(--orange-tint) 0%, var(--tint) 55%, transparent 100%);
}
.rewards-strip img{
  width:clamp(38px, 6vw, 62px); height:auto;
  filter:drop-shadow(0 4px 9px rgba(43,26,20,.15));
}
.rewards-strip__free{
  flex:none; display:grid; place-items:center;
  width:clamp(52px, 8vw, 74px); height:clamp(52px, 8vw, 74px);
  border-radius:50%;
  background:var(--maroon); color:var(--on-maroon);
  font-weight:800; font-size:var(--fs-sm);
  box-shadow:0 8px 20px rgba(132,21,30,.30);
  transform:rotate(-8deg);
}

.rewards-note{
  margin-top:var(--sp-5);
  background:var(--tint); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-sm); color:var(--ink-soft);
}
.rewards-note strong{color:var(--ink);}

/* Account sheet (join / sign in / dashboard) */
.sheet{
  position:fixed; inset:0; z-index:78;
  background:rgba(43,26,20,.5);
  display:grid; place-items:center;
  padding:var(--gutter);
  opacity:0; pointer-events:none;
  transition:opacity .26s ease;
  backdrop-filter:blur(3px);
  overflow-y:auto;
}
.sheet.is-open{opacity:1; pointer-events:auto;}
.sheet__card{
  position:relative;
  width:min(460px, 100%);
  background:var(--bg);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow:var(--shadow-lg);
  transform:translateY(14px) scale(.98);
  transition:transform .3s var(--ease-pop);
  max-height:92vh; overflow-y:auto;
}
.sheet.is-open .sheet__card{transform:translateY(0) scale(1);}
.sheet__close{
  position:absolute; top:var(--sp-3); right:var(--sp-3);
  width:38px; height:38px; border-radius:50%;
  border:2px solid var(--line); background:var(--surface);
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.sheet__close:hover{border-color:var(--maroon); color:var(--maroon);}

.sheet h2{font-size:var(--fs-lg); margin-bottom:var(--sp-2);}
.sheet .lede{font-size:var(--fs-sm); color:var(--ink-soft); margin-bottom:var(--sp-4);}
.sheet .field{margin-bottom:var(--sp-3);}
.sheet .field label{
  display:block; font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:5px;
}
.sheet .field input, .sheet .field select, .sheet .field textarea{
  width:100%; min-height:var(--tap);
  padding:0.7em 0.9em;
  border-radius:var(--r-sm);
  border:2px solid var(--line-strong);
  background:#FFFFFF;
  font-size:var(--fs-sm);
  /* The base .field rules were written for the maroon order panel, where the
     text is white. Inside this sheet the ground is white, so the colour has to
     be restated or everything typed here is invisible. */
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
.sheet .field input::placeholder, .sheet .field textarea::placeholder{
  color:var(--ink-soft); opacity:.6; -webkit-text-fill-color:var(--ink-soft);
}
.sheet .field select option{color:var(--ink); background:#FFFFFF;}
.sheet .field input:focus, .sheet .field select:focus, .sheet .field textarea:focus{
  outline:none; border-color:var(--maroon); background:#fff;
  box-shadow:0 0 0 3px rgba(132,21,30,.10);
}
.sheet .field.has-error input, .sheet .field.has-error select{border-color:#C0392B;}
.sheet .field.has-error .field__error{color:#C0392B;}
.sheet .field__error{font-size:var(--fs-xs); color:var(--maroon); min-height:1.1em; margin-top:3px;}
.sheet__switch{
  margin-top:var(--sp-4); padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-soft); text-align:center;
}
.sheet__switch button{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--maroon); font-weight:700; font-size:inherit;
  text-decoration:underline; text-underline-offset:3px;
}

/* Member dashboard inside the sheet */
.member-head{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4);}
.member-head .av{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:var(--orange); color:var(--ink);
  display:grid; place-items:center; font-weight:700; font-size:1.2rem;
}
.member-head .who strong{display:block; font-size:var(--fs-md); font-weight:700;}
.member-head .who span{display:block; font-size:var(--fs-xs); color:var(--ink-soft); font-variant-numeric:tabular-nums;}

.member-progress{
  background:var(--tint); border-radius:var(--r-md);
  padding:var(--sp-4); margin-bottom:var(--sp-4);
}
.member-progress .bar{
  height:10px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line);
  overflow:hidden; margin-block:var(--sp-2);
}
.member-progress .bar span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--orange), var(--maroon));
  border-radius:var(--r-pill);
  transition:width .5s var(--ease-out);
}
.member-progress .line{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  font-size:var(--fs-xs); color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.member-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-bottom:var(--sp-4);}
.member-stats div{
  text-align:center; padding:var(--sp-3) var(--sp-2);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}
.member-stats strong{display:block; font-size:var(--fs-md); font-weight:700; color:var(--maroon); font-variant-numeric:tabular-nums;}
.member-stats span{display:block; font-size:0.66rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}

.order-history{list-style:none; margin:0 0 var(--sp-4); padding:0; display:flex; flex-direction:column; gap:var(--sp-2); max-height:180px; overflow-y:auto;}
.order-history li{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:var(--fs-xs);
}
.order-history .ref{font-weight:700; font-variant-numeric:tabular-nums;}
.order-history .meta{color:var(--ink-soft);}
.history-empty{font-size:var(--fs-sm); color:var(--ink-soft); text-align:center; padding-block:var(--sp-4);}

/* Location control */
.locate-btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:38px; margin-bottom:var(--sp-2);
  padding:0.45em 0.9em;
  border-radius:var(--r-pill);
  border:2px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);
  color:#fff; cursor:pointer;
  font-size:var(--fs-xs); font-weight:600;
}
.locate-btn:hover{border-color:var(--orange); background:rgba(255,255,255,.16);}
.locate-btn:disabled{opacity:.6; cursor:wait;}
.locate-result{
  font-size:var(--fs-xs); min-height:1.2em; margin-bottom:var(--sp-2);
  color:var(--tint-deep); font-variant-numeric:tabular-nums;
}
.locate-result.is-out{color:#FFC9A3;}

/* Free-donut row in the cart */
.cart-reward{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  background:var(--orange-tint);
  border-radius:var(--r-sm);
  padding:var(--sp-3);
  margin-bottom:var(--sp-3);
  font-size:var(--fs-sm);
}
.cart-reward strong{color:var(--maroon);}
.cart-reward button{
  border:2px solid var(--maroon); background:transparent; color:var(--maroon);
  border-radius:var(--r-sm); padding:0.35em 0.8em;
  font-weight:700; font-size:var(--fs-xs); cursor:pointer; white-space:nowrap;
}
.cart-reward button:hover{background:var(--maroon); color:#fff;}
.cart-reward.is-on{background:var(--maroon);}
.cart-reward.is-on, .cart-reward.is-on strong{color:#fff;}
.cart-reward.is-on button{border-color:rgba(255,255,255,.5); color:#fff;}
.cart-reward.is-on button:hover{background:#fff; color:var(--maroon);}

.cart-progress{
  font-size:var(--fs-xs); color:var(--ink-soft);
  text-align:center; margin-bottom:var(--sp-3);
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .account-btn__label{display:none;}
  .account-btn{padding:0 0.35em; }
  .member-stats{grid-template-columns:repeat(3,1fr);}
}

/* ==========================================================================
   24. ACCOUNT PAGES & CHECKOUT
   Signing up, signing in, paying. These pages get a stripped-back header —
   no menu, no cart drawer — because every link out of a checkout is a
   customer who didn't finish one.
   ========================================================================== */

.page-header{
  position:sticky; top:0; z-index:40;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.page-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); min-height:72px;
}
.page-header__logo{ display:flex; align-items:center; }
.page-header__logo img{ height:clamp(28px,4vw,38px); width:auto; display:block; }
.page-header__link{
  font-size:var(--fs-xs); font-weight:600; color:var(--maroon);
  display:inline-flex; align-items:center; gap:.4em; min-height:var(--tap);
}
.page-header__link svg{ flex:none; }

.page-main{ padding:var(--sp-6) 0 var(--sp-8); }

/* ---- the two-up auth layout ---------------------------------------- */
.auth{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  align-items:start;
}
.auth__pitch{
  background:var(--maroon); color:var(--on-maroon);
  border-radius:clamp(18px,2.5vw,28px);
  padding:clamp(1.5rem,4vw,2.75rem);
  position:relative; overflow:hidden;
}
.auth__pitch::after{
  content:''; position:absolute; right:-70px; bottom:-90px;
  width:230px; height:230px; border-radius:50%;
  border:34px solid var(--orange); opacity:.28;
}
.auth__pitch h2{ color:var(--on-maroon); }
.auth__pitch p{ color:rgba(255,255,255,.88); }
.auth__steps{ list-style:none; margin:var(--sp-5) 0 0; display:grid; gap:var(--sp-3); position:relative; z-index:1; }
.auth__steps li{ display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fs-sm); color:rgba(255,255,255,.92); }
.auth__steps b{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--orange); color:var(--ink);
  display:grid; place-items:center; font-size:var(--fs-xs); font-weight:800;
}

.auth__card{
  background:var(--bg); border:1px solid var(--line);
  border-radius:clamp(18px,2.5vw,28px);
  padding:clamp(1.5rem,4vw,2.5rem);
  box-shadow:0 18px 50px rgba(43,26,20,.07);
}
.auth__card h1{ font-size:var(--fs-2xl); margin-bottom:var(--sp-2); }
.auth__card .lede{ color:var(--ink-soft); font-size:var(--fs-sm); margin-bottom:var(--sp-5); }
.auth__switch{
  margin-top:var(--sp-4); text-align:center;
  font-size:var(--fs-xs); color:var(--ink-soft);
}
.auth__switch a, .auth__switch button{
  color:var(--maroon); font-weight:700; text-decoration:underline;
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
}
.auth__fine{ margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.6; }

/* a status strip that can say something went right or wrong */
.notice{
  border-radius:12px; padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-xs); line-height:1.6; margin-bottom:var(--sp-4);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
.notice--bad{ border-color:#E7B7B7; background:#FDF2F2; color:#7A1520; }
.notice--good{ border-color:#BFE0CB; background:#F1FAF4; color:#1F6B42; }
.notice[hidden]{ display:none; }

/* ---- checkout ------------------------------------------------------- */
.checkout{
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,1.35fr) minmax(min(100%,300px),.85fr);
  align-items:start;
}
@media (max-width:860px){ .checkout{ grid-template-columns:1fr; } }

.co-step{
  border:1px solid var(--line); border-radius:clamp(14px,2vw,20px);
  padding:clamp(1.1rem,3vw,1.75rem); margin-bottom:var(--sp-4);
  background:var(--bg);
}
.co-step > h2{
  font-size:var(--fs-md); display:flex; align-items:center; gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.co-step > h2 span{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--maroon); color:var(--on-maroon);
  display:grid; place-items:center; font-size:11px; font-weight:800;
}

/* radio / toggle cards, used for both fulfilment and payment method */
.choice-grid{ display:grid; gap:var(--sp-2); }
.choice-grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); }
.choice{
  display:flex; align-items:center; gap:var(--sp-3);
  border:1.5px solid var(--line-strong); border-radius:12px;
  padding:var(--sp-3) var(--sp-4); cursor:pointer; min-height:var(--tap);
  transition:border-color .16s ease, background .16s ease;
}
.choice:hover{ border-color:var(--maroon-soft); }
.choice input{ accent-color:var(--maroon); width:18px; height:18px; flex:none; margin:0; }
.choice__body{ flex:1; min-width:0; }
.choice__body strong{ display:block; font-size:var(--fs-sm); }
.choice__body span{ display:block; font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.5; }
.choice:has(input:checked){ border-color:var(--maroon); background:var(--surface); }
.choice input:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.choice__logos{ display:flex; gap:6px; flex:none; }
.choice__chip{
  font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:5px; padding:3px 6px; color:var(--ink-soft);
}

/* the order summary rail */
.co-summary{
  position:sticky; top:84px;
  border:1px solid var(--line); border-radius:clamp(14px,2vw,20px);
  background:var(--surface); padding:clamp(1.1rem,3vw,1.6rem);
}
@media (max-width:860px){ .co-summary{ position:static; } }
.co-summary h2{ font-size:var(--fs-md); margin-bottom:var(--sp-4); }
.co-lines{ list-style:none; margin:0 0 var(--sp-4); display:grid; gap:var(--sp-3); }
.co-lines li{ display:flex; gap:var(--sp-3); align-items:center; font-size:var(--fs-xs); }
.co-lines img{ width:38px; height:38px; flex:none; }
.co-lines .who{ flex:1; min-width:0; }
.co-lines .who strong{ display:block; font-weight:600; }
.co-lines .who span{ color:var(--ink-soft); }
.co-lines .amt{ font-variant-numeric:tabular-nums; font-weight:600; }
.co-totals{ border-top:1px solid var(--line-strong); padding-top:var(--sp-3); display:grid; gap:var(--sp-2); }
.co-totals div{ display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--ink-soft); }
.co-totals div.is-free{ color:var(--ok); font-weight:600; }
.co-totals div.grand{
  font-size:var(--fs-md); color:var(--ink); font-weight:800;
  border-top:1px solid var(--line-strong); padding-top:var(--sp-3); margin-top:var(--sp-1);
}
.co-reward{
  display:flex; align-items:center; gap:var(--sp-3);
  border:1.5px dashed var(--maroon-soft); border-radius:12px;
  padding:var(--sp-3); margin-bottom:var(--sp-4); font-size:var(--fs-xs);
}
.co-reward.is-on{ border-style:solid; background:#F1FAF4; border-color:var(--ok); }
.co-reward button{
  margin-left:auto; flex:none; border:1px solid currentColor; background:none;
  color:var(--maroon); font:inherit; font-size:var(--fs-xs); font-weight:700;
  border-radius:8px; padding:6px 12px; cursor:pointer; min-height:36px;
}
.co-empty{ text-align:center; padding:var(--sp-7) var(--sp-4); }
.co-empty img{ width:120px; height:120px; opacity:.5; margin:0 auto var(--sp-4); display:block; }

/* ---- confirmation --------------------------------------------------- */
.confirm{ max-width:640px; margin:0 auto; text-align:center; }
.confirm__mark{
  width:88px; height:88px; margin:0 auto var(--sp-5); border-radius:50%;
  display:grid; place-items:center; background:var(--orange-tint); color:var(--maroon);
}
.confirm__ref{
  display:inline-block; margin:var(--sp-4) 0;
  font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:.08em;
  font-size:var(--fs-lg); color:var(--maroon);
  background:var(--surface); border:1px dashed var(--line-strong);
  border-radius:12px; padding:var(--sp-3) var(--sp-5);
}
.confirm__next{
  text-align:left; border:1px solid var(--line); border-radius:16px;
  padding:var(--sp-5); margin-top:var(--sp-5);
}
.confirm__next ol{ margin:var(--sp-3) 0 0 1.1em; display:grid; gap:var(--sp-2); font-size:var(--fs-sm); }

/* ---- account dashboard ---------------------------------------------- */
.acct{
  display:grid; gap:clamp(1.5rem,4vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  align-items:start;
}
.acct-card{
  border:1px solid var(--line); border-radius:clamp(14px,2vw,20px);
  padding:clamp(1.1rem,3vw,1.75rem);
}
.acct-card h2{ font-size:var(--fs-md); margin-bottom:var(--sp-4); }
.acct-orders{ list-style:none; margin:0; display:grid; gap:var(--sp-2); }
.acct-orders li{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:var(--sp-2); font-size:var(--fs-xs);
}
.acct-orders li:last-child{ border-bottom:0; }
.acct-orders .ref{ font-weight:800; letter-spacing:.05em; color:var(--maroon); }
.acct-orders .meta{ color:var(--ink-soft); }
.acct-orders .pill{
  margin-left:auto; border-radius:100px; padding:3px 10px; font-weight:700;
  font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  background:var(--tint); color:var(--ink-soft);
}
.acct-orders .pill.is-paid{ background:#E8F6EE; color:var(--ok); }
.acct-orders .pill.is-due{ background:var(--orange-tint); color:var(--maroon); }


/* --------------------------------------------------------------------------
   The base .field styles were written for the maroon order panel on the home
   page — white labels on a dark ground. On these light pages they'd be white
   on white, so the same fields are restated here for a pale background.
   -------------------------------------------------------------------------- */
.auth__card .field label,
.co-step .field label,
.acct-card .field label{ color:var(--ink-soft); }

.auth__card .field input, .auth__card .field select, .auth__card .field textarea,
.co-step .field input,   .co-step .field select,   .co-step .field textarea,
.acct-card .field input, .acct-card .field select, .acct-card .field textarea{
  border:2px solid var(--line-strong);
  background:var(--bg);
  color:var(--ink);
}
.auth__card .field input::placeholder, .auth__card .field textarea::placeholder,
.co-step .field input::placeholder,   .co-step .field textarea::placeholder,
.acct-card .field input::placeholder, .acct-card .field textarea::placeholder{
  color:var(--ink-soft); opacity:.65;
}
.auth__card .field input:focus, .auth__card .field select:focus, .auth__card .field textarea:focus,
.co-step .field input:focus,   .co-step .field select:focus,   .co-step .field textarea:focus,
.acct-card .field input:focus, .acct-card .field select:focus, .acct-card .field textarea:focus{
  border-color:var(--maroon); background:var(--bg);
}
.auth__card .field.has-error input, .auth__card .field.has-error select, .auth__card .field.has-error textarea,
.co-step .field.has-error input,   .co-step .field.has-error select,   .co-step .field.has-error textarea,
.acct-card .field.has-error input, .acct-card .field.has-error select, .acct-card .field.has-error textarea{
  border-color:#C0392B;
}
.auth__card .field__error,
.co-step .field__error,
.acct-card .field__error{ color:#C0392B; }

.auth__card .locate-btn, .co-step .locate-btn{
  color:var(--maroon); border-color:var(--line-strong); background:var(--surface);
}
.auth__card .locate-result, .co-step .locate-result{ color:var(--ink-soft); }
.auth__card .locate-result.is-out, .co-step .locate-result.is-out{ color:#C0392B; }

/* the fine print under the join form inside the popup */
.sheet__fine{
  margin-top:var(--sp-3); font-size:var(--fs-xs);
  color:var(--ink-soft); line-height:1.6;
}

/* the "spend a bit more for free delivery" line under the checkout totals */
.co-nudge{
  margin-top:var(--sp-3);
  font-size:var(--fs-xs); line-height:1.6;
  color:var(--maroon);
  background:var(--orange-tint);
  border-radius:10px; padding:var(--sp-2) var(--sp-3);
}
.co-nudge[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   25. WHATSAPP
   A floating button, because in Pakistan that is how people actually want to
   talk to a shop. Its position is set in section 26 with everything else that
   lives in that corner.
   -------------------------------------------------------------------------- */
.wa-fab{
  display:grid; place-items:center; border-radius:50%;
  background:#25D366; color:#FFFFFF;
  box-shadow:0 10px 26px rgba(37,211,102,.38), 0 2px 6px rgba(43,26,20,.18);
  transition:transform .22s var(--ease-out), box-shadow .22s ease;
}
.wa-fab:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 14px 32px rgba(37,211,102,.46); }
.wa-fab:focus-visible{ outline:3px solid var(--maroon); outline-offset:3px; }
.wa-fab[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){
  .wa-fab:hover{ transform:none; }
}

/* the WhatsApp button inside the Visit card */
.visit-card .btn svg{ margin-right:.5em; }
.visit-card a{ color:var(--maroon); font-weight:600; }
.visit-card .btn{ color:var(--on-maroon); font-weight:700; }

/* the "need to change something?" block on the confirmation page */
.contact-card{
  margin-top:var(--sp-6); text-align:left;
  border:1px solid var(--line); border-radius:clamp(14px,2vw,20px);
  padding:clamp(1.1rem,3vw,1.6rem);
  background:var(--surface);
}
.contact-card h2{ font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.contact-card p{ font-size:var(--fs-sm); color:var(--ink-soft); }
.contact-card__row{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4);
}
.btn--wa{
  background:#25D366; color:#FFFFFF; border:2px solid #25D366;
}
.btn--wa:hover{ background:#1FB855; border-color:#1FB855; color:#FFFFFF; }
.btn--wa svg{ margin-right:.5em; }

/* ==========================================================================
   26. THE BOTTOM-RIGHT STACK
   Three separate things want this corner: the mobile order bar, the WhatsApp
   button, and back-to-top. They are positioned together here, from one set of
   variables, so they cannot land on top of each other. They did exactly that
   when WhatsApp was added — the green button and the back-to-top circle were
   sitting in the same spot, and on phones back-to-top was hidden behind the
   order bar entirely.

   Reading upward from the bottom of the screen:
        order bar (phones only, full width)
        WhatsApp
        back to top
   ========================================================================== */
:root{
  --fab-size:56px;
  --fab-gap:12px;
  --fab-bottom:calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
}

.wa-fab,
.to-top{
  position:fixed;
  right:var(--gutter);
  z-index:39;
  width:var(--fab-size);
  height:var(--fab-size);
}
.wa-fab{ bottom:var(--fab-bottom); }
.to-top{ bottom:calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap)); }

.wa-fab svg{ width:calc(var(--fab-size) * .46); height:auto; }

@media (max-width:640px){
  :root{
    --fab-size:48px;
    /* the order bar owns the very bottom on phones — start above it */
    --fab-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* Printing has no use for any of it. */
@media print{
  .wa-fab{ display:none !important; }
}

/* ===========================================================================
   26b — SOLD OUT
   ---------------------------------------------------------------------------
   Shopify decides this, not the site. A card only gets `.is-soldout` once the
   Storefront API has actually said availableForSale:false — an undefined
   availability reads as in stock, so a missing token can never black out the
   whole menu.
   =========================================================================== */
.donut-card.is-soldout{ opacity:.62; }
.donut-card.is-soldout .donut-card__img{ filter:grayscale(.85); }
.donut-card__tag--out{
  background:var(--ink-soft, #6b5a52);
  color:#fff;
}
.donut-card__out{
  display:block;
  margin-top:var(--sp-3);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--maroon);
}

/* ===========================================================================
   27 — LEGAL PAGES, CONTACT, ERROR PAGES, NEWSLETTER
   ---------------------------------------------------------------------------
   All of these are text-first pages. They reuse the existing tokens rather
   than introducing new colours, so the brand does not drift page to page.
   =========================================================================== */

.legal{
  max-width:68ch;
  margin:0 auto;
  padding:clamp(1.5rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 5rem);
}
.legal h1{ margin-top:var(--sp-2); }
.legal h2{
  margin-top:clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom:var(--sp-2);
  font-size:var(--fs-h4, 1.25rem);
  color:var(--maroon);
}
.legal p, .legal li{
  color:var(--ink-soft);
  line-height:1.7;
  overflow-wrap:anywhere;
}
.legal p{ margin-top:var(--sp-3); }
.legal ul{
  margin:var(--sp-3) 0 0;
  padding-left:1.25rem;
  display:grid;
  gap:var(--sp-2);
}
.legal li::marker{ color:var(--orange); }
.legal a{ color:var(--maroon); font-weight:600; }

/* ---- contact page --------------------------------------------------- */
.contact-list{
  list-style:none;
  margin:var(--sp-4) 0 0;
  padding:0;
  display:grid;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
}
.contact-list a{ font-weight:700; }
.field__opt{
  font-weight:400;
  font-size:var(--fs-xs);
  opacity:.7;
}

/* ---- 404 / 500 ------------------------------------------------------- */
.errpage{
  max-width:52ch;
  margin:0 auto;
  padding:clamp(2.5rem, 8vw, 6rem) 0;
  text-align:center;
}
.errpage img{ margin-bottom:var(--sp-4); }
.errpage h1{ margin-top:var(--sp-2); }
.errpage .lede{ margin-top:var(--sp-3); }
.errpage__actions{
  margin-top:clamp(1.5rem, 4vw, 2.5rem);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  justify-content:center;
}

/* ---- newsletter ------------------------------------------------------
   The note is a live region. It must reserve its line even when empty, or
   the whole footer column jumps the moment someone submits.
   ---------------------------------------------------------------------- */
.nl form{
  margin-top:var(--sp-3);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  align-items:center;
}
.nl input[type=email]{
  flex:1 1 clamp(11rem, 40%, 18rem);
  min-width:0;
  padding:.7rem .9rem;
  border-radius:var(--r-sm, 10px);
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  background:rgba(255,255,255,.08);
  color:inherit;
  -webkit-text-fill-color:currentColor;
  font:inherit;
  font-size:var(--fs-sm);
}
.nl input[type=email]::placeholder{ color:currentColor; opacity:.55; }
.nl input[type=email]:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}
.nl__note{
  flex:1 0 100%;
  min-height:1.25em;
  font-size:var(--fs-xs);
  font-weight:600;
}
.nl__note.is-good{ color:#9BE8B8; }
.nl__note.is-bad{ color:#FFC9C9; }

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

/* ===========================================================================
   28 — PHOTOGRAPHY
   ---------------------------------------------------------------------------
   The flavour art changed from flat SVG illustrations to real photographs of
   the actual doughnuts. Two consequences worth handling rather than hoping
   about: a photo is a filled square, not a transparent cut-out, so it needs a
   corner radius and a boundary or it reads as a pasted rectangle; and a photo
   carries its own lighting, so the card must not add a second shadow on top.
   =========================================================================== */
.donut-card__img{
  border-radius:var(--r-md, 14px);
  object-fit:cover;
  aspect-ratio:1;
  width:100%;
  height:auto;
  max-width:230px;
  /* The photographs are flat-lay on a ground already matched to --surface,
     so no fill and no shadow: anything added here shows up as a visible
     rectangle around an image that is meant to sit flush on the card. */
  background:none;
  box-shadow:none;
}
.donut-card.is-soldout .donut-card__img{ filter:grayscale(.85) brightness(.97); }

/* The description line. Small, quiet, and clamped to two lines so a long one
   cannot push the price button out of alignment across the grid. */
.donut-card__note{
  margin-top:var(--sp-2);
  font-size:var(--fs-xs);
  line-height:1.45;
  color:var(--ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.9em;
}

/* Small round photos: cart lines, order summary, tier rewards, the ticker. */
.cart-line img, .co-line img, .tier__free img, .ticker img, .pile img,
.rewards-strip img, .picker__thumb img, .pillar img, .drawer__empty img,
.errpage img, .squeeze__donut, .hero__float, .hero__donut{
  border-radius:50%;
  object-fit:cover;
  aspect-ratio:1;
}
.tier__free img, .rewards-strip img, .ticker img{
  box-shadow:0 2px 6px rgba(43,26,20,.14);
}

/* The hero photographs sit on cream, so they need a soft edge rather than the
   hard circle crop the illustrations could get away with. */
.hero__donut, .hero__float{
  box-shadow:0 18px 40px rgba(43,26,20,.18);
}

.lightbox__card img{
  border-radius:var(--r-md, 14px);
  object-fit:cover;
  aspect-ratio:1;
  width:min(260px, 60vw);
  height:auto;
}
.lightbox__kind{
  margin-top:var(--sp-2);
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}

/* ---- story ---------------------------------------------------------- */
.story blockquote{
  font-size:clamp(1.6rem, 4.2vw, 2.6rem);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--maroon);
  margin:var(--sp-2) 0 0;
}
.story__sub{
  margin-top:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}
.story__kicker{
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:2px solid color-mix(in srgb, var(--orange) 30%, transparent);
  font-weight:800;
  color:var(--maroon);
}

.form-foot{
  margin-top:var(--sp-3);
  text-align:center;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.form-foot a{ color:var(--maroon); font-weight:700; }

/* The story photo. The tilt was designed around a transparent illustration;
   a photograph needs a radius and a frame or the rotation just looks like a
   mistake. */
.story__art img{
  border-radius:var(--r-lg, 20px);
  object-fit:cover;
  aspect-ratio:1;
  width:min(300px, 70vw);
  height:auto;
  box-shadow:0 22px 50px rgba(43,26,20,.22);
}
.pillar img{
  box-shadow:0 3px 10px rgba(43,26,20,.16);
}

/* ===========================================================================
   29 — THE TAGLINE
   ---------------------------------------------------------------------------
   The pitch paragraph under the headline is gone, so the headline now carries
   the whole left column on its own. That means it has to be bigger than a
   normal h1 and it has to breathe — a two-word line at the old size would
   read as an unfinished page rather than a deliberate one.
   =========================================================================== */
.hero__tagline{
  font-size:clamp(3.2rem, 11vw, 7.5rem);
  line-height:.92;
  letter-spacing:-.045em;
  margin-top:var(--sp-3);
}
.hero__tagline .accent{ display:inline-block; }

/* The buttons were spaced for a paragraph sitting above them. Without it they
   sit too close to a much larger headline. */
.hero__tagline + .hero__ctas{ margin-top:clamp(1.75rem, 4vw, 2.75rem); }

/* Illustrations are transparent cut-outs, so the photo treatment from
   section 28 — object-fit, a square aspect ratio, a drop shadow — is wrong
   for them. Undo it wherever a drawing is what renders. */
.hero__float, .hero__donut, .squeeze__donut,
.ticker img, .pile img, .tier__free img, .rewards-strip img,
.pillar img, .story__art img, .drawer__empty img, .errpage img,
.toast img, .quotes-invite img{
  object-fit:contain;
  aspect-ratio:auto;
  background:none;
  box-shadow:none;
  border-radius:0;
}
.story__art img{ width:min(300px, 70vw); height:auto; }

/* ---- box builder: photographs, so they need room and a round crop -------
   The picker used to hold 46px transparent drawings, which read fine at that
   size because they are simple shapes on nothing. A photograph at 46px is
   mud. Bigger, circular, and with a ring so it sits on the cream panel. */
.picker__item img{
  width:clamp(46px, 11vw, 62px);
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 2px 8px rgba(43,26,20,.12);
}
.slot.is-filled img{
  width:100%;
  height:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
}