/* ============================================================
   JOLLOF IN MOTION - bright-bazaar Nigerian food, food that moves
   Persistent travelling jollof plate + vibrant scroll journey.
   Requires GSAP + ScrollTrigger (loaded before js/main.js).
   ============================================================ */

:root{
  --cream:      #FFF3DE;   /* warm ivory base */
  --cream-2:    #FFE9C6;
  --ink:        #2A1405;   /* deep cocoa text */
  --ink-soft:   #6b4a2e;
  --jollof:     #E8451C;   /* jollof chilli-red */
  --jollof-dk:  #C0330F;
  --gold:       #F6A81C;   /* turmeric / marigold */
  --gold-soft:  #FFC658;
  --palm:       #12925A;   /* palm green */
  --palm-dk:    #0c6e43;
  --hibiscus:   #D81E5B;   /* zobo magenta */
  --indigo:     #2C1A55;   /* ankara indigo */
  --indigo-2:   #3A2470;
  --maxw: 1240px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-weight:400; line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
html{ overflow-x:clip; }
h1,h2,h3,.display{
  font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;
  font-weight:800; line-height:.98; letter-spacing:-.02em;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--jollof); color:#fff; }

.wrap{ width:min(92%,var(--maxw)); margin-inline:auto; }
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--jollof);
}

/* page grain */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1rem,4vw,2.6rem);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.scrolled{ background:rgba(255,243,222,.82); backdrop-filter:blur(12px); box-shadow:0 6px 30px rgba(42,20,5,.08); }
.nav__brand{
  font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.2rem;
  letter-spacing:-.02em; color:var(--ink);
}
.nav__brand span{ color:var(--jollof); }
.nav__links{ display:flex; align-items:center; gap:1.8rem; font-weight:600; font-size:.92rem; }
.nav__links a{ color:var(--ink); opacity:.82; transition:opacity .25s, color .25s; }
.nav__links a:hover{ opacity:1; color:var(--jollof); }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Bricolage Grotesque"; font-weight:700; font-size:.92rem;
  padding:.72rem 1.4rem; border-radius:100px;
  background:var(--jollof); color:#fff;
  box-shadow:0 10px 24px rgba(232,69,28,.34);
  transition:transform .3s var(--ease), background .3s, box-shadow .3s;
  will-change:transform;
}
.btn:hover{ background:var(--jollof-dk); transform:translateY(-3px); box-shadow:0 16px 30px rgba(232,69,28,.42); }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:none; border:2px solid rgba(42,20,5,.18); }
.btn.ghost:hover{ border-color:var(--jollof); color:var(--jollof); transform:translateY(-3px); }
.nav__cta{ padding:.6rem 1.2rem; border-radius:100px; background:var(--ink); color:var(--cream)!important; opacity:1!important; }
.nav__cta:hover{ background:var(--jollof); color:#fff!important; }
.btn.big{ font-size:1.05rem; padding:1rem 2rem; }

/* ---------- TRAVELLING PLATE ---------- */
#plateLayer{
  position:fixed; top:0; left:0; z-index:5;
  width:min(46vw,520px); aspect-ratio:1/1;
  pointer-events:none; will-change:transform,opacity;
  transform:translateZ(0); backface-visibility:hidden;
}
/* Grounding shadow as a cheap GPU gradient (no per-frame filter re-raster,
   so the plate stays buttery while it scales through the journey). */
#plateLayer::after{
  content:""; position:absolute; left:50%; bottom:5%;
  width:62%; height:9%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(42,20,5,.42), rgba(42,20,5,0) 70%);
  z-index:-2;
}
#plateLayer img{ width:100%; height:100%; object-fit:contain; }
#plateLayer.is-armed{ opacity:1; }

/* steam rising off the plate */
.steam{ position:absolute; top:4%; left:50%; transform:translateX(-50%); display:flex; gap:20px; z-index:-1; }
.steam span{
  display:block; width:12px; height:150px; border-radius:50%;
  background:linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.55) 55%, rgba(255,255,255,0));
  filter:blur(7px); opacity:0; animation:rise 5s ease-in-out infinite;
}
.steam span:nth-child(2){ animation-delay:1.2s; height:180px; }
.steam span:nth-child(3){ animation-delay:2.3s; }
.steam span:nth-child(4){ animation-delay:.6s; height:130px; }
.steam span:nth-child(5){ animation-delay:3s; }
@keyframes rise{
  0%{ opacity:0; transform:translateY(30px) scaleX(1); }
  30%{ opacity:.7; }
  100%{ opacity:0; transform:translateY(-90px) scaleX(2); }
}

/* ---------- HERO ---------- */
.scene{ position:relative; }
#hero{
  min-height:100svh; display:flex; align-items:center; text-align:left;
  overflow:hidden; padding:96px 0 64px;
  background:
    radial-gradient(120% 80% at 80% -10%, var(--gold-soft) 0%, var(--cream) 52%),
    var(--cream);
}
.hero__blobs{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero__blobs i{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; }
.hero__blobs i:nth-child(1){ width:46vw; height:46vw; left:-12vw; top:-8vw; background:var(--jollof); opacity:.28; }
.hero__blobs i:nth-child(2){ width:38vw; height:38vw; right:-10vw; top:6vw; background:var(--palm); opacity:.22; }
.hero__blobs i:nth-child(3){ width:40vw; height:40vw; left:26vw; bottom:-16vw; background:var(--hibiscus); opacity:.2; }
.hero__copy{ position:relative; z-index:6; padding:0 clamp(1rem,4vw,2.6rem); max-width:min(56%,640px); }
.hero__copy .eyebrow{ font-size:.8rem; letter-spacing:.28em; }
#hero h1{ font-size:clamp(2.6rem,6.6vw,5.4rem); margin:.5rem 0 .2rem; letter-spacing:-.03em; }
#hero h1 .hl{
  background:linear-gradient(100deg,var(--jollof),var(--gold) 60%,var(--hibiscus));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{ max-width:42ch; margin:1.2rem 0 2rem; color:var(--ink-soft); font-size:clamp(1rem,1.5vw,1.2rem); }
.hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; }
.scroll-hint{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  z-index:6; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.scroll-hint::after{ content:""; width:2px; height:34px; background:linear-gradient(var(--jollof),transparent); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:.3} 50%{opacity:1} }

/* ---------- MARQUEE ---------- */
.marquee{ background:var(--ink); color:var(--cream); padding:1.1rem 0; overflow:hidden; position:relative; z-index:30; }
.marquee__track{ display:flex; gap:2.6rem; white-space:nowrap; width:max-content; animation:scrollx 26s linear infinite; }
.marquee__track span{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:clamp(1.3rem,3vw,2.2rem); display:flex; align-items:center; gap:2.6rem; letter-spacing:-.01em; }
.marquee__track span::after{ content:"✦"; color:var(--gold); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------- CHAPTER SHELL ---------- */
.pad{ padding:clamp(5rem,13vh,9rem) 0; }
.chapter{ position:relative; overflow:hidden; }
.chapter--gold{   background:var(--gold); color:var(--ink); }
.chapter--jollof{ background:var(--jollof); color:#fff; }
.chapter--cream{  background:var(--cream); color:var(--ink); }
.chapter--palm{   background:var(--palm); color:#fff; }
.chapter--indigo{ background:var(--indigo); color:var(--cream); }
.chapter--fiesta{ background:
    radial-gradient(90% 120% at 10% 0%, var(--hibiscus) 0%, transparent 46%),
    radial-gradient(90% 120% at 100% 100%, var(--gold) 0%, transparent 46%),
    var(--jollof); color:#fff; min-height:100svh; display:grid; align-items:center; }
.chapter--jollof .eyebrow,
.chapter--palm .eyebrow,
.chapter--fiesta .eyebrow{ color:var(--gold-soft); }
.chapter--indigo .eyebrow{ color:var(--gold-soft); }

.scene__index{ position:absolute; top:1.4rem; left:clamp(1rem,4vw,2.6rem); font-family:"Bricolage Grotesque"; font-weight:800; font-size:clamp(4rem,12vw,9rem); opacity:.10; line-height:1; }
.scene__tab{ position:absolute; top:1.6rem; right:clamp(1rem,4vw,2.6rem); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; opacity:.55; font-weight:700; }

/* ---------- PANELS (copy beside travelling plate) ---------- */
.wrap{ position:relative; z-index:6; }
.panel{ max-width:min(46%,540px); }
.panel.right{ margin-left:auto; text-align:left; }
.panel.left{ margin-right:auto; text-align:left; }
.panel h2{ font-size:clamp(2.4rem,6vw,4.6rem); margin:.6rem 0 1.1rem; }
.panel p{ font-size:1.05rem; margin-bottom:1rem; max-width:44ch; opacity:.92; }
.panel p.micro{ font-size:.95rem; opacity:.7; }
.panel .btn{ margin-top:.4rem; }

.ticks{ list-style:none; margin:.6rem 0 1.4rem; }
.ticks li{ display:flex; align-items:center; gap:.8rem; padding:.55rem 0; border-bottom:1px solid currentColor; border-color:rgba(255,255,255,.25); }
.chapter--gold .ticks li{ border-color:rgba(42,20,5,.16); }
.ticks b{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.1rem; }
.ticks i{ margin-left:auto; opacity:.75; font-style:normal; font-size:.9rem; }
.tick{ width:14px; height:14px; border-radius:50%; background:currentColor; flex:0 0 auto; }

/* ---------- SECTION HEAD ---------- */
.section-head{ max-width:640px; margin:0 auto 3rem; text-align:center; }
.section-head h2{ font-size:clamp(2.4rem,6vw,4.4rem); margin:.5rem 0 .8rem; }
.section-head p{ opacity:.85; font-size:1.05rem; }

/* ---------- THE SPREAD (dish cards) ---------- */
.dishes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.dish{
  position:relative; border-radius:26px; padding:2rem 1.6rem 1.6rem;
  background:#fff; box-shadow:0 24px 50px rgba(42,20,5,.12);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  overflow:hidden; will-change:transform;
}
.dish::before{ content:""; position:absolute; inset:0 0 auto 0; height:56%; opacity:.9; z-index:0; }
.dish--green::before{ background:radial-gradient(120% 100% at 50% 0%, #34c07e, var(--palm)); }
.dish--red::before{   background:radial-gradient(120% 100% at 50% 0%, #ff6a3d, var(--jollof)); }
.dish--gold::before{  background:radial-gradient(120% 100% at 50% 0%, var(--gold-soft), var(--gold)); }
.dish__img{ position:relative; z-index:1; aspect-ratio:1/1; display:grid; place-items:center; }
.dish__img img{ width:92%; height:92%; object-fit:contain; filter:drop-shadow(0 20px 24px rgba(0,0,0,.28)); transition:transform .6s var(--ease); }
.dish:hover{ transform:translateY(-10px); box-shadow:0 34px 60px rgba(42,20,5,.2); }
.dish:hover .dish__img img{ transform:scale(1.06) rotate(-2deg); }
.dish__body{ position:relative; z-index:1; padding-top:1rem; }
.dish__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.dish__body h3{ font-size:1.5rem; }
.dish__body i{ font-style:normal; font-family:"Bricolage Grotesque"; font-weight:700; color:var(--jollof); }
.dish__body p{ margin-top:.5rem; font-size:.95rem; color:var(--ink-soft); }

/* ---------- OWAMBE DRINKS (CSS Chapman) ---------- */
.drinks{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.drink-stage{ position:relative; height:min(60vh,520px); display:grid; place-items:center; }
.glass{
  position:relative; width:190px; height:300px;
  background:linear-gradient(100deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  border:3px solid rgba(255,255,255,.55); border-top:none;
  border-radius:14px 14px 26px 26px; overflow:hidden;
  box-shadow:inset 0 0 30px rgba(255,255,255,.25), 0 30px 50px rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
}
.glass__liquid{
  position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg,#ff3d6e,#c8102e 70%,#a00a24);
  border-radius:0 0 22px 22px; overflow:hidden;
  animation:fill 4.5s var(--ease) infinite;
}
.glass__liquid::after{ content:""; position:absolute; top:0; left:0; right:0; height:10px; background:rgba(255,255,255,.35); filter:blur(2px); }
@keyframes fill{ 0%{height:0} 22%{height:78%} 82%{height:78%} 100%{height:0} }
.fizz{ position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.7); bottom:6%; animation:bubble 2.6s linear infinite; }
.fizz:nth-child(1){ left:26%; animation-delay:.2s; } .fizz:nth-child(2){ left:52%; animation-delay:1s; } .fizz:nth-child(3){ left:72%; animation-delay:1.7s; }
@keyframes bubble{ 0%{ transform:translateY(0); opacity:0 } 20%{opacity:1} 100%{ transform:translateY(-180px); opacity:0 } }
.glass__ice{ position:absolute; inset:0; }
.glass__ice i{ position:absolute; width:34px; height:34px; background:rgba(255,255,255,.4); border:2px solid rgba(255,255,255,.6); border-radius:7px; transform:rotate(18deg); }
.glass__ice i:nth-child(1){ left:24%; top:34%; } .glass__ice i:nth-child(2){ right:20%; top:46%; transform:rotate(-14deg);} .glass__ice i:nth-child(3){ left:40%; top:58%; transform:rotate(30deg);}
.glass__straw{ position:absolute; top:-40px; right:38px; width:12px; height:210px; background:linear-gradient(90deg,#fff 0 50%,var(--jollof) 50% 100%); background-size:12px 22px; transform:rotate(12deg); border-radius:6px; }
.pour{
  position:absolute; top:-2%; left:calc(50% - 7px); width:14px; height:0;
  background:linear-gradient(180deg,#ff3d6e,#c8102e); border-radius:7px;
  animation:pourdrop 4.5s var(--ease) infinite;
}
@keyframes pourdrop{ 0%{height:0; opacity:0} 6%{opacity:1} 20%{height:120px} 24%{height:0; opacity:0} 100%{height:0; opacity:0} }
.citrus{ position:absolute; width:54px; height:54px; border-radius:50%; box-shadow:0 8px 16px rgba(0,0,0,.2); }
.citrus--orange{ right:12%; bottom:20%; background:radial-gradient(circle at 50% 50%, #ffd27f, #ff8c1a); border:4px solid #ffb347; }
.citrus--lime{ left:14%; bottom:12%; width:44px; height:44px; background:radial-gradient(circle at 50% 50%, #d8ff9e, #4fae2e); border:4px solid #7cc44a; }

/* ---------- GALLERY (polaroids) ---------- */
.polaroids{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; }
.polaroid{
  background:#fff; padding:.7rem .7rem 1.2rem; border-radius:6px;
  box-shadow:0 20px 40px rgba(0,0,0,.35); transform:rotate(var(--r));
  transition:transform .4s var(--ease), box-shadow .4s;
  width:min(42vw,230px);
}
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:3px; }
.polaroid figcaption{ font-family:"Bricolage Grotesque"; font-weight:700; color:var(--ink); text-align:center; margin-top:.7rem; font-size:1rem; }
.polaroid:hover{ transform:rotate(0deg) translateY(-8px) scale(1.03); box-shadow:0 30px 54px rgba(0,0,0,.45); z-index:5; }

/* ---------- STATEMENT / ORDER ---------- */
.statement__ghost{
  position:absolute; inset:0; display:grid; place-items:center; z-index:0;
  font-family:"Bricolage Grotesque"; font-weight:800; font-size:min(40vw,34rem);
  color:rgba(255,255,255,.10); letter-spacing:-.04em; pointer-events:none; user-select:none;
}
.statement__inner{ padding:6rem 0; }
.statement__inner h2{ font-size:clamp(2.8rem,8vw,6rem); }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); color:var(--cream); padding:clamp(3.5rem,8vh,6rem) 0 2.2rem; position:relative; z-index:30; }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2rem; }
.footer h3{ font-family:"Bricolage Grotesque"; font-size:1.5rem; }
.footer h3 span{ color:var(--jollof); }
.footer small{ display:block; margin-top:.7rem; max-width:32ch; opacity:.7; }
.footer__col h4{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.9rem; }
.footer__col a{ display:block; opacity:.78; margin-bottom:.5rem; transition:opacity .25s,color .25s; }
.footer__col a:hover{ opacity:1; color:var(--gold-soft); }
.legal{ margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,243,222,.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; opacity:.65; font-size:.82rem; }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(38px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:899px){
  .nav__links a:not(.nav__cta){ display:none; }
  #plateLayer{ width:min(72vw,340px); }
  #hero{ text-align:center; justify-content:center; }
  .hero__copy{ max-width:100%; margin:0 auto; }
  .hero__sub{ margin-left:auto; margin-right:auto; }
  .hero__cta{ justify-content:center; }
  .panel{ max-width:100%; text-align:center; }
  .panel.right,.panel.left{ margin:0 auto; }
  .panel p{ margin-left:auto; margin-right:auto; }
  .ticks{ max-width:360px; margin-inline:auto; }
  .dishes{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .drinks{ grid-template-columns:1fr; }
  .drink-stage{ order:-1; height:44vh; }
}
@media (max-width:520px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  #hero h1{ font-size:clamp(3rem,18vw,6rem); }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .steam{ display:none; }
}

/* ============================================================
   ORDERING: cart button, add-to-order, drawer, toast
   ============================================================ */

/* nav cart button */
.cart-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Bricolage Grotesque"; font-weight:700; font-size:.9rem;
  padding:.6rem 1.15rem; border:0; border-radius:100px; cursor:pointer;
  background:var(--ink); color:var(--cream);
  transition:transform .3s var(--ease), background .3s;
}
.cart-btn:hover{ background:var(--jollof); color:#fff; transform:translateY(-2px); }
.cart-btn svg{ display:block; }
.cart-count{
  min-width:20px; height:20px; padding:0 6px; border-radius:100px;
  background:var(--jollof); color:#fff; font-size:.72rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.cart-btn:hover .cart-count{ background:#fff; color:var(--jollof); }
.cart-btn.pop{ animation:cartpop .4s var(--ease); }
@keyframes cartpop{ 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* add-to-order button on dish cards */
.add-btn{
  margin-top:1rem; width:100%; border:0; cursor:pointer;
  font-family:"Bricolage Grotesque"; font-weight:700; font-size:.95rem;
  padding:.8rem 1rem; border-radius:100px;
  background:var(--ink); color:var(--cream);
  transition:transform .25s var(--ease), background .25s;
}
.add-btn:hover{ background:var(--jollof); color:#fff; transform:translateY(-2px); }
.add-btn:active{ transform:translateY(0) scale(.98); }

/* overlay + drawer */
.cart-overlay{
  position:fixed; inset:0; z-index:70; background:rgba(20,10,3,.5);
  opacity:0; transition:opacity .3s var(--ease); backdrop-filter:blur(2px);
}
.cart-overlay.show{ opacity:1; }
.cart{
  position:fixed; top:0; right:0; z-index:80; height:100dvh;
  width:min(92vw,420px); background:var(--cream); color:var(--ink);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .42s var(--ease);
  box-shadow:-20px 0 60px rgba(20,10,3,.28);
}
.cart.is-open{ transform:translateX(0); }
.cart__head{ display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.5rem; border-bottom:1px solid rgba(42,20,5,.12); }
.cart__head h3{ font-family:"Bricolage Grotesque"; font-size:1.4rem; }
.cart__close{ background:none; border:0; font-size:2rem; line-height:1; cursor:pointer; color:var(--ink); opacity:.6; transition:opacity .2s,transform .2s; }
.cart__close:hover{ opacity:1; transform:rotate(90deg); }
.cart__items{ flex:1; overflow-y:auto; padding:.6rem 1.5rem; }
.ci{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"info qty" "info rm"; gap:.2rem 1rem; padding:1rem 0; border-bottom:1px solid rgba(42,20,5,.1); }
.ci__info{ grid-area:info; display:flex; flex-direction:column; gap:.25rem; }
.ci__name{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.05rem; }
.ci__price{ color:var(--ink-soft); font-size:.9rem; }
.ci__qty{ grid-area:qty; display:inline-flex; align-items:center; gap:.7rem; align-self:center; }
.ci__step{ width:30px; height:30px; border-radius:50%; border:2px solid rgba(42,20,5,.2); background:none; cursor:pointer; font-size:1.1rem; line-height:1; color:var(--ink); transition:border-color .2s,background .2s,color .2s; }
.ci__step:hover{ border-color:var(--jollof); background:var(--jollof); color:#fff; }
.ci__num{ min-width:1.2ch; text-align:center; font-weight:700; }
.ci__remove{ grid-area:rm; justify-self:end; background:none; border:0; color:var(--jollof); font-size:.8rem; font-weight:600; cursor:pointer; padding:0; opacity:.85; }
.ci__remove:hover{ text-decoration:underline; opacity:1; }
.cart__empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; text-align:center; padding:2rem; color:var(--ink-soft); }
.cart__foot{ padding:1.3rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom)); border-top:1px solid rgba(42,20,5,.12); background:var(--cream-2); }
.cart__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:1.05rem; margin-bottom:.4rem; }
.cart__row b{ font-family:"Bricolage Grotesque"; font-size:1.4rem; }
.cart__note{ font-size:.78rem; color:var(--ink-soft); margin-bottom:1rem; }
.cart__checkout{ width:100%; justify-content:center; }
.cart__done{ text-align:center; padding:3rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.cart__done-mark{ width:64px; height:64px; border-radius:50%; background:var(--palm); color:#fff; display:grid; place-items:center; font-size:2rem; }
.cart__done h4{ font-family:"Bricolage Grotesque"; font-size:1.5rem; }
.cart__done p{ color:var(--ink-soft); max-width:32ch; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:2rem; transform:translate(-50%,20px); z-index:90;
  background:var(--ink); color:var(--cream); padding:.85rem 1.4rem; border-radius:100px;
  font-weight:600; font-size:.9rem; box-shadow:0 14px 34px rgba(20,10,3,.34);
  opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease); pointer-events:none;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

.cart-count[hidden]{ display:none; }