/* ============================================
   Bite-In — Brand design system
   Orange #FE4D00 · Black #000 · Grey #F2F2F2 · White
   Typeface: Inter (per brand style guide)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Brand */
  --orange:#FE4D00;
  --orange-dark:#D83F00;
  --orange-soft:rgba(254,77,0,.12);
  --black:#000000;
  --ink:#FFFFFF;        /* page surface */
  --ink-2:#FFFFFF;      /* card surface */
  --ink-3:#F7F7F7;      /* recessed surface */
  --grey:#F2F2F2;
  --white:#FFFFFF;
  --fg:#0B0B0B;         /* primary text */
  --line:rgba(0,0,0,.11);
  --line-strong:rgba(0,0,0,.24);
  --muted:rgba(0,0,0,.62);
  --muted-2:rgba(0,0,0,.45);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 18px 50px rgba(0,0,0,.14);

  /* Type scale (brand guide tracking rules baked in) */
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.375rem;
  --text-2xl:1.75rem;
  --text-3xl:2.25rem;
  --text-4xl:3rem;
  --text-hero:clamp(2.75rem,8vw,6.5rem);

  /* Space */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;

  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --maxw:1240px;
  --nav-h:72px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 76px)}
body{
  margin:0;
  background:var(--white);
  color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--text-base);
  line-height:1.28;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}

/* ---------- Display type: echoes the slanted logo wordmark ---------- */
.display{
  font-weight:900;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.03em;
  transform:skewX(-6deg);
  transform-origin:left bottom;
}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1}
p{margin:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--s-5); padding-right:var(--s-5)}
.section{padding-top:var(--s-9); padding-bottom:var(--s-9)}
.section--tight{padding-top:var(--s-8); padding-bottom:var(--s-8)}
.eyebrow{
  font-size:var(--text-xs); font-weight:800; text-transform:uppercase;
  letter-spacing:.16em; color:var(--orange);
}
.lede{font-size:var(--text-lg); line-height:1.5; color:var(--muted); letter-spacing:-.01em; max-width:56ch}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-5); flex-wrap:wrap; margin-bottom:var(--s-7)}
.section-title{font-size:var(--text-4xl)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.6rem; border-radius:var(--radius-pill); border:2px solid transparent;
  background:transparent; -webkit-appearance:none; appearance:none;
  font-weight:800; font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.06em;
  transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--orange); color:var(--white)}
.btn--primary:hover{background:#ff6320}
.btn--light{background:var(--black); color:var(--white)}
.btn--light:hover{background:#242424}
.btn--ghost{border-color:var(--line-strong); color:var(--fg)}
.btn--ghost:hover{border-color:var(--black); background:rgba(0,0,0,.05)}
.band .btn--ghost,.band--ink .btn--ghost{border-color:rgba(255,255,255,.4); color:#fff}
.band .btn--ghost:hover,.band--ink .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.12)}
.band .btn--light,.band--ink .btn--light{background:#fff; color:var(--black)}
.band .btn--light:hover,.band--ink .btn--light:hover{background:var(--grey)}
.btn--onorange{background:var(--black); color:var(--white)}
.btn--onorange:hover{background:#1a1a1a}
.btn--sm{padding:.6rem 1.1rem; font-size:var(--text-xs)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:80; height:var(--nav-h);
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav__inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5); height:100%; display:flex; align-items:center; gap:var(--s-6)}
.nav__logo{display:flex; align-items:center; flex:0 0 auto}
.nav__logo img{height:40px; width:auto; display:block}
.nav__links{display:flex; align-items:center; gap:var(--s-5); margin-left:auto}
.nav__link{
  font-size:var(--text-sm); font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:.4rem 0; position:relative; transition:color .16s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--fg)}
.nav__link[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange);
}
.nav__actions{display:flex; align-items:center; gap:var(--s-3); margin-left:var(--s-4)}
.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  background:var(--orange); color:#fff; border:none; border-radius:var(--radius-pill);
  padding:.62rem 1.05rem; font-weight:800; font-size:var(--text-xs);
  text-transform:uppercase; letter-spacing:.06em; transition:background-color .16s var(--ease)
}
.cart-btn:hover{background:#ff6320}
.cart-btn__count{
  min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#fff; color:var(--orange);
  font-size:11px; font-weight:900; display:grid; place-items:center;
}
.nav__burger{display:none; background:none; border:none; padding:.5rem; margin-left:auto}
.nav__burger svg{display:block}
.nav__mobile{display:none}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__actions{margin-left:auto}
  .nav__actions .btn{display:none}   /* the burger menu carries Order Online */
  .nav__inner{gap:var(--s-3)}
  .nav__burger{display:block; margin-left:var(--s-3)}
  .nav__mobile{
    display:block; position:fixed; inset:var(--nav-h) 0 auto 0; z-index:79;
    background:var(--white); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
    transform:translateY(-120%); transition:transform .3s var(--ease);
    padding:var(--s-4) var(--s-5) var(--s-6);
  }
  .nav__mobile.open{transform:translateY(0)}
  .nav__mobile a{
    display:block; padding:1rem 0; border-bottom:1px solid var(--line);
    font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:var(--text-lg);
  }
  .nav__mobile a:last-child{border-bottom:none}
}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:min(88vh,780px); display:flex; align-items:flex-end; overflow:hidden}
.hero__img{position:absolute; inset:0}
.hero__img img{width:100%; height:100%; object-fit:cover}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 26%, rgba(255,255,255,.34) 46%, rgba(255,255,255,0) 62%),
    linear-gradient(to top, rgba(255,255,255,.72) 0%, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 60%);
}
@media (max-width:860px){
  .hero__scrim{
    background:
      linear-gradient(to top, rgba(255,255,255,.96) 4%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.42) 58%, rgba(255,255,255,0) 80%);
  }
  .hero__img img{object-position:70% 66%}
}
.hero__inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:var(--s-9) var(--s-5) var(--s-8)}
.hero__title{font-size:var(--text-hero); max-width:15ch}
.hero__title em{font-style:normal; color:var(--orange)}
.hero__sub{margin-top:var(--s-5); font-size:var(--text-lg); color:var(--muted); max-width:42ch; line-height:1.45}
.hero__cta{margin-top:var(--s-6); display:flex; gap:var(--s-3); flex-wrap:wrap}

/* ---------- Marquee ---------- */
.marquee{background:var(--orange); color:#fff; padding:.85rem 0; overflow:hidden; border-top:2px solid var(--black); border-bottom:2px solid var(--black)}
.marquee__track{display:flex; width:max-content; animation:slide 32s linear infinite}
.marquee__group{display:flex; align-items:center; gap:2.2rem; padding-right:2.2rem}
.marquee span{
  font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:1.05rem;
  transform:skewX(-6deg); white-space:nowrap;
}
.marquee .dot{opacity:.6; transform:none; font-size:.9rem}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:var(--s-5)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}}

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.card__media{position:relative; aspect-ratio:4/3; background:var(--ink-3); overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:var(--s-5); display:flex; flex-direction:column; gap:.6rem; flex:1}
.card__name{font-size:var(--text-xl); font-weight:800; letter-spacing:-.02em; line-height:1.1}
.card__desc{font-size:var(--text-sm); color:var(--muted); line-height:1.5}
.card__foot{margin-top:auto; padding-top:var(--s-4); display:flex; align-items:center; justify-content:space-between; gap:var(--s-3)}
.price{font-weight:900; font-size:var(--text-lg); letter-spacing:-.02em}
.badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--orange); color:#fff; font-size:11px; font-weight:900;
  text-transform:uppercase; letter-spacing:.08em; padding:.35rem .6rem; border-radius:6px;
}

/* ---------- Category tiles (home) ---------- */
.tile{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4; display:block}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile__scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.15) 60%, transparent)}
.tile__label{position:absolute; left:var(--s-5); right:var(--s-5); bottom:var(--s-5); z-index:2}
.tile__label h3{font-size:var(--text-2xl); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; transform:skewX(-6deg); transform-origin:left bottom}
.tile__label p{margin-top:.4rem; font-size:var(--text-sm); color:rgba(255,255,255,.72)}

/* ---------- Split feature ---------- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s-8); align-items:center}
.split--flip .split__media{order:2}
.split__media img{border-radius:var(--radius-lg); width:100%; aspect-ratio:4/3; object-fit:cover}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:var(--s-6)} .split--flip .split__media{order:0}}

/* ---------- Band ---------- */
.band{background:var(--orange); color:#fff}
.band--grey{background:var(--grey); color:var(--black)}
.band--grey .lede{color:rgba(0,0,0,.66)}
.band--grey .eyebrow{color:var(--orange-dark)}
.band .eyebrow{color:rgba(0,0,0,.72)}
.band--grey .eyebrow,.band--ink .eyebrow{color:var(--orange)}
.band--grey .eyebrow{color:var(--orange-dark)}
.band--ink{background:var(--black); color:#fff}
.band--ink .lede{color:rgba(255,255,255,.72)}
.band--ink .eyebrow{color:var(--orange)}

/* ---------- Rewards ---------- */
.step{background:rgba(0,0,0,.16); border-radius:var(--radius-lg); padding:var(--s-6); border:1px solid rgba(0,0,0,.14)}
.step__n{
  width:44px; height:44px; border-radius:50%; background:#fff; color:var(--orange);
  display:grid; place-items:center; font-weight:900; font-size:var(--text-lg); margin-bottom:var(--s-4)
}
.step h3{font-size:var(--text-xl); margin-bottom:.5rem}
.step p{font-size:var(--text-sm); line-height:1.55; color:rgba(255,255,255,.82)}
.tier{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-6); text-align:center; box-shadow:var(--shadow);
}
.tier__pts{font-size:var(--text-3xl); font-weight:900; color:var(--orange); letter-spacing:-.03em}
.tier h3{font-size:var(--text-lg); margin:.6rem 0 .4rem}
.tier p{font-size:var(--text-sm); color:var(--muted); line-height:1.5}

/* ---------- Menu page ---------- */
.menu-hero{padding:var(--s-8) 0 var(--s-6); border-bottom:1px solid var(--line)}
.filters{
  position:sticky; top:var(--nav-h); z-index:60; background:rgba(255,255,255,.93); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line); padding:var(--s-4) 0;
}
.filters__row{display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5)}
.filters__row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; background:transparent; -webkit-appearance:none; appearance:none; border:1.5px solid var(--line-strong); color:var(--muted);
  border-radius:var(--radius-pill); padding:.55rem 1.05rem; font-size:var(--text-xs);
  font-weight:800; text-transform:uppercase; letter-spacing:.07em; transition:all .16s var(--ease)
}
.chip:hover{color:var(--fg); border-color:var(--black)}
.chip[aria-pressed="true"]{background:var(--orange); border-color:var(--orange); color:#fff}
.cat-title{font-size:var(--text-3xl); margin-bottom:.5rem}
.cat-note{font-size:var(--text-sm); color:var(--muted); margin-bottom:var(--s-6)}

/* Size toggle inside a card */
.sizes{display:flex; gap:.4rem; margin-top:.2rem}
.size-btn{
  flex:1; background:transparent; border:1.5px solid var(--line-strong); color:var(--muted);
  border-radius:10px; padding:.5rem .4rem; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; transition:all .16s var(--ease)
}
.size-btn[aria-pressed="true"]{background:var(--black); border-color:var(--black); color:#fff}

/* Simple list rows (sauces / add-ons) */
.rows{border-top:1px solid var(--line)}
.row{
  display:flex; align-items:center; gap:var(--s-4); padding:1rem 0; border-bottom:1px solid var(--line);
}
.row__name{font-weight:700; font-size:var(--text-base)}
.row__price{margin-left:auto; font-weight:900; color:var(--muted)}

/* ---------- Cart drawer ---------- */
.drawer-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease); z-index:90;
}
.drawer-scrim.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); z-index:91;
  background:var(--white); border-left:1px solid var(--line); box-shadow:-24px 0 60px rgba(0,0,0,.14);
  transform:translateX(102%); transition:transform .32s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer__head{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-5); border-bottom:1px solid var(--line)}
.drawer__head h2{font-size:var(--text-xl); text-transform:uppercase; letter-spacing:-.02em}
.drawer__close{margin-left:auto; background:none; border:none; color:var(--muted); padding:.4rem; line-height:0}
.drawer__close:hover{color:var(--fg)}
.drawer__body{flex:1; overflow-y:auto; padding:var(--s-4) var(--s-5)}
.drawer__foot{padding:var(--s-5); border-top:1px solid var(--line); background:var(--grey)}

.ci{display:flex; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line)}
.ci__img{width:62px; height:62px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:var(--ink-3)}
.ci__img--mark{display:grid; place-items:center; background:var(--orange)}
.ci__img--mark img{width:26px; height:26px; object-fit:contain}
.ci__mid{flex:1; min-width:0}
.cart-clear{
  display:block; width:100%; margin-top:.85rem; background:none; border:none; padding:.35rem 0;
  color:var(--muted); font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; text-decoration:underline; text-underline-offset:3px;
}
.cart-clear:hover{color:var(--orange)}
.ci__name{font-weight:800; font-size:var(--text-sm); line-height:1.25}
.ci__meta{font-size:var(--text-xs); color:var(--muted-2); margin-top:.2rem}
.ci__price{font-weight:900; font-size:var(--text-sm); margin-top:.35rem}
.qty{display:flex; align-items:center; gap:.15rem; margin-top:.5rem}
.qty button{
  width:26px; height:26px; border-radius:7px; border:1px solid var(--line-strong);
  background:transparent; color:var(--fg); font-weight:900; line-height:1; display:grid; place-items:center;
}
.qty button:hover{border-color:var(--black); background:rgba(0,0,0,.06)}
.qty span{min-width:28px; text-align:center; font-weight:800; font-size:var(--text-sm)}
.ci__rm{background:none; border:none; color:var(--muted-2); font-size:var(--text-xs); text-decoration:underline; padding:0; margin-top:.4rem}
.ci__rm:hover{color:var(--orange)}

.totals{display:flex; flex-direction:column; gap:.5rem; margin-bottom:var(--s-4); font-size:var(--text-sm)}
.totals div{display:flex; justify-content:space-between; color:var(--muted)}
.totals .total{color:var(--fg); font-weight:900; font-size:var(--text-lg); padding-top:.6rem; border-top:1px solid var(--line)}
.empty{text-align:center; padding:var(--s-8) var(--s-4); color:var(--muted)}
.empty svg{margin:0 auto var(--s-4); opacity:.3}
.note{font-size:var(--text-xs); color:var(--muted-2); line-height:1.5; margin-top:var(--s-3); text-align:center}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:.45rem; margin-bottom:var(--s-4)}
.field label{font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--white); border:1.5px solid var(--line-strong); border-radius:12px; color:var(--fg);
  padding:.85rem 1rem; font:inherit; font-size:var(--text-sm); width:100%;
  transition:border-color .16s var(--ease)
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--orange)}
.field textarea{resize:vertical; min-height:110px}
.radio-row{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.radio-card{
  border:1.5px solid var(--line-strong); border-radius:12px; padding:.9rem; text-align:center;
  font-weight:800; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em;
  background:transparent; color:var(--muted); transition:all .16s var(--ease)
}
.radio-card[aria-pressed="true"]{background:var(--black); border-color:var(--black); color:#fff}

/* ---------- Info / hours ---------- */
.info-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s-6); box-shadow:var(--shadow)}
.info-card h3{font-size:var(--text-lg); margin-bottom:var(--s-4)}
.hours{display:flex; flex-direction:column; gap:.7rem}
.hours div{display:flex; justify-content:space-between; gap:var(--s-4); font-size:var(--text-sm); color:var(--muted)}
.hours div strong{color:var(--fg); font-weight:700}
.hours div.today{color:var(--orange)}
.hours div.today strong{color:var(--orange)}
.status{
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--text-xs); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; padding:.4rem .8rem; border-radius:var(--radius-pill);
}
.status--open{background:rgba(22,163,74,.12); color:#15803d}
.status--closed{background:rgba(0,0,0,.07); color:var(--muted)}
.status i{width:7px; height:7px; border-radius:50%; background:currentColor}

/* ---------- Footer ---------- */
.footer{background:var(--black); color:#fff; border-top:1px solid var(--line); padding:var(--s-8) 0 var(--s-6)}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-6)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer img{height:62px; width:auto; margin-bottom:var(--s-4)}
.footer h4{font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--orange); margin-bottom:var(--s-4)}
.footer a,.footer p{display:block; font-size:var(--text-sm); color:rgba(255,255,255,.64); line-height:1.9}
.footer a:hover{color:#fff}
.footer__bar{margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font-size:var(--text-xs); color:rgba(255,255,255,.45)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,260%); z-index:120; visibility:hidden;
  background:var(--black); color:var(--white); padding:.9rem 1.4rem; border-radius:var(--radius-pill);
  font-weight:800; font-size:var(--text-sm); box-shadow:0 12px 40px rgba(0,0,0,.28);
  transition:transform .34s var(--ease); display:flex; align-items:center; gap:.6rem
}
.toast.show{transform:translate(-50%,0); visibility:visible}

@media (max-width:640px){
  :root{--text-4xl:2.1rem; --text-3xl:1.75rem; --text-2xl:1.45rem}
  .section{padding:var(--s-8) 0}
}

/* ============================================================
   Item customizer modal
   ============================================================ */
.cz{position:fixed;inset:0;z-index:120;display:none}
.cz.open{display:block}
.cz__scrim{position:absolute;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(3px);
  animation:czFade .18s ease}
.cz__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 2rem));max-height:min(88vh,860px);
  background:var(--white);border-radius:20px;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:czIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes czFade{from{opacity:0}to{opacity:1}}
@keyframes czIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.cz__x{position:absolute;top:.85rem;right:.85rem;z-index:2;width:36px;height:36px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:#0B0B0B;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.cz__x:hover{background:#fff}

.cz__head{display:flex;gap:1rem;align-items:center;padding:1.15rem 1.35rem;
  border-bottom:1px solid var(--line);background:var(--ink-3)}
.cz__img{width:92px;height:92px;flex:0 0 92px;object-fit:cover;border-radius:14px;background:var(--grey)}
.cz__name{font-size:1.5rem;line-height:1;margin:0 2.2rem .35rem 0;color:var(--fg)}
.cz__desc{font-size:.8125rem;line-height:1.45;color:var(--muted);margin:0}

.cz__body{padding:1.25rem 1.35rem}
.cz__group + .cz__group{margin-top:1.35rem}
.cz__label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted-2);margin:0 0 .6rem}
.cz__opts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media (max-width:460px){.cz__opts{grid-template-columns:1fr}}

.cz__opt{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem .85rem;border:1.5px solid var(--line-strong);border-radius:11px;
  background:var(--white);color:var(--fg);font:inherit;font-size:.875rem;font-weight:600;
  text-align:left;cursor:pointer;transition:all .14s ease}
.cz__opt em{font-style:normal;font-size:.8125rem;font-weight:700;color:var(--muted);flex:0 0 auto}
.cz__opt:hover{border-color:#0B0B0B}
.cz__opt[aria-pressed="true"]{background:#0B0B0B;border-color:#0B0B0B;color:#fff}
.cz__opt[aria-pressed="true"] em{color:rgba(255,255,255,.72)}
.cz__opt--rm[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}

.cz__body textarea{width:100%;padding:.75rem .85rem;border:1.5px solid var(--line-strong);
  border-radius:11px;background:var(--white);color:var(--fg);font:inherit;font-size:.9rem;
  resize:vertical;min-height:76px}
.cz__body textarea:focus{outline:none;border-color:var(--orange)}
.cz__body textarea::placeholder{color:var(--muted-2)}

.cz__foot{position:sticky;bottom:0;display:flex;gap:.75rem;align-items:center;
  padding:.9rem 1.35rem;border-top:1px solid var(--line);background:var(--ink-3)}
.cz__qty{display:flex;align-items:center;gap:.15rem;border:1.5px solid var(--line-strong);
  border-radius:999px;padding:.2rem;flex:0 0 auto}
.cz__qty button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;
  color:var(--fg);font-size:1.05rem;font-weight:700;cursor:pointer;line-height:1}
.cz__qty button:hover{background:var(--grey)}
.cz__qty span{min-width:26px;text-align:center;font-weight:800;font-size:.9rem}

/* cart line modifier meta */
.ci__meta--add{color:var(--orange);font-weight:700}
.ci__meta--rm{color:var(--muted-2)}
.ci__meta--note{color:var(--muted-2);font-style:italic}

/* ---------- Ingredient & add-on rows (with reference photos) ---------- */
.cz__hint{font-size:.75rem;color:var(--muted);margin:-.35rem 0 .6rem}
.ingl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ingl li{border-bottom:1px solid var(--line)}
.ingl__row{display:flex;align-items:center;gap:.8rem;width:100%;
  padding:.55rem .15rem;background:transparent;border:0;text-align:left;
  font:inherit;color:var(--fg);cursor:pointer;border-radius:10px;
  transition:background .16s ease,opacity .16s ease}
.ingl__row.is-fixed{cursor:default}
button.ingl__row:hover{background:var(--grey)}
.ingl__img{width:52px;height:52px;flex:0 0 52px;object-fit:cover;border-radius:10px;
  background:#fff;border:1px solid var(--line);transition:filter .16s ease,opacity .16s ease}
.ingl__name{flex:1 1 auto;min-width:0;font-size:.9375rem;font-weight:700;line-height:1.3}
.ingl__name em{display:block;font-style:normal;font-size:.8125rem;font-weight:600;
  color:var(--muted);margin-top:.1rem}
.ingl__note{flex:0 0 auto;font-size:.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-2)}
.ingl__mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line-strong);position:relative;transition:all .16s ease}
.ingl__mark::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:no-repeat center/11px 11px;opacity:0;transition:opacity .16s ease}

/* removal selected */
.ingl__row[data-cz-rm][aria-pressed="true"]{background:rgba(254,77,0,.07)}
.ingl__row[data-cz-rm][aria-pressed="true"] .ingl__img{filter:grayscale(1);opacity:.45}
.ingl__row[data-cz-rm][aria-pressed="true"] .ingl__name{text-decoration:line-through;color:var(--muted)}
.ingl__row[data-cz-rm][aria-pressed="true"] .ingl__mark{background:var(--orange);border-color:var(--orange)}
.ingl__row[data-cz-rm][aria-pressed="true"] .ingl__mark::after{opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}

/* add-on selected */
.ingl__row--add[aria-pressed="true"]{background:rgba(11,11,11,.05)}
.ingl__row--add[aria-pressed="true"] .ingl__mark{background:#0B0B0B;border-color:#0B0B0B}
.ingl__row--add[aria-pressed="true"] .ingl__mark::after{opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.row__img{width:44px;height:44px;flex:0 0 44px;object-fit:cover;border-radius:9px;
  background:#fff;border:1px solid var(--line)}

/* Full-length hero subs need a wider frame than the 4:3 burger cards */
.card[data-cat="sandwiches"] .card__media{aspect-ratio:16/9}

/* ---------- Make It a Combo upsell ---------- */
.combo-up{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;font:inherit;
  color:var(--fg);cursor:pointer;padding:.7rem .85rem;border-radius:14px;
  border:1.5px solid var(--orange);background:rgba(254,77,0,.06);
  transition:background .16s ease,border-color .16s ease}
.combo-up:hover{background:rgba(254,77,0,.11)}
.combo-up__img{width:56px;height:56px;flex:0 0 56px;object-fit:cover;border-radius:11px;
  background:#fff;border:1px solid var(--line)}
.combo-up__txt{flex:1 1 auto;min-width:0;display:block}
.combo-up__txt strong{display:block;font-size:.9375rem;font-weight:800;line-height:1.25}
.combo-up__txt em{display:block;font-style:normal;font-size:.75rem;font-weight:600;
  color:var(--muted);line-height:1.35;margin-top:.12rem}
.combo-up__price{flex:0 0 auto;font-size:.875rem;font-weight:900;color:var(--orange)}
.combo-up[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.combo-up[aria-pressed="true"] .combo-up__txt em{color:rgba(255,255,255,.8)}
.combo-up[aria-pressed="true"] .combo-up__price{color:#fff}
.combo-up[aria-pressed="true"] .combo-up__img{border-color:rgba(255,255,255,.45)}
.combo-up[aria-pressed="true"] .ingl__mark{background:#fff;border-color:#fff}
.combo-up[aria-pressed="true"] .ingl__mark::after{opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FE4D00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
@media (max-width:480px){
  .combo-up{gap:.6rem; padding:.6rem .7rem}
  .combo-up__img{width:48px;height:48px;flex:0 0 48px}
  .combo-up__txt strong{font-size:.875rem; white-space:nowrap}
  .combo-up__txt em{font-size:.6875rem}
  .combo-up__price{font-size:.8125rem}
}