/* =========================================================
   JAY'S BBQ — Design tokens
   Palette: charcoal / ember orange / deep ember red / butcher cream / smoke grey
========================================================= */
:root{
  --charcoal:      #17130f;
  --charcoal-2:    #1f1a15;
  --char-brown:    #3a2a1e;
  --ember:         #e8672b;
  --ember-2:       #ff8a4c;
  --ember-deep:    #b53a1f;
  --cream:         #efe6d4;
  --cream-2:       #e2d5b8;
  --smoke:         #948b7d;
  --ink:           #1c1712;

  --font-display: 'Anton', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --nav-h: 76px;
  --container: 1180px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; }

:focus-visible{
  outline: 3px solid var(--ember-2);
  outline-offset: 3px;
}

.section-label{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ember-deep);
  margin-bottom: 0.6rem;
}
.section-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0 0 1.6rem;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 0.95rem 1.7rem;
  border-radius: 3px;
  border: 2px solid transparent;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-primary{
  background: linear-gradient(180deg, var(--ember-2), var(--ember));
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(232,103,43,.35);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(232,103,43,.45); }
.btn-ghost{
  border-color: currentColor;
  color: inherit;
  background: transparent;
}
.btn-ghost:hover{ background: rgba(0,0,0,.06); transform: translateY(-2px); }

/* =========================================================
   LOADER — grill-door open / smoke clear
========================================================= */
#loader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--charcoal);
  overflow:hidden;
}
.loader-door{
  position:absolute; top:0; bottom:0; width:50%;
  background:
    repeating-linear-gradient(180deg, #2b241e 0 6px, #221c17 6px 8px),
    linear-gradient(180deg,#2a2320,#141110);
  transition: transform 1.1s var(--ease);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6);
}
.door-left{ left:0; transform-origin:left; }
.door-right{ right:0; transform-origin:right; }
.door-left::after, .door-right::after{
  content:"";
  position:absolute; top:0; bottom:0; width:14px;
  background: repeating-radial-gradient(circle, #55483c 0 2px, transparent 3px 22px);
}
.door-left::after{ right:0; }
.door-right::after{ left:0; }

#loader.open .door-left{ transform: translateX(-102%); }
#loader.open .door-right{ transform: translateX(102%); }

.loader-smoke{ position:absolute; inset:0; pointer-events:none; }
.smoke-puff{
  position:absolute; bottom:-10%;
  width: 160px; height:160px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(220,215,205,.55), rgba(220,215,205,0) 70%);
  filter: blur(6px);
  animation: puffRise 3.2s ease-in forwards;
  opacity:0;
}
@keyframes puffRise{
  0%{ opacity:0; transform: translateY(0) scale(.6); }
  15%{ opacity:.85; }
  100%{ opacity:0; transform: translateY(-70vh) scale(2.4); }
}

.loader-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: var(--ember-2);
  z-index:2;
  transition: opacity .5s ease;
}
#loader.open .loader-center{ opacity:0; }
.loader-flame{ animation: flicker 1.4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(232,103,43,.7)); }
@keyframes flicker{
  0%,100%{ transform: scale(1) rotate(0deg); opacity:1; }
  45%{ transform: scale(1.08) rotate(-2deg); opacity:.85; }
  70%{ transform: scale(.96) rotate(2deg); opacity:1; }
}
.loader-word{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  letter-spacing: .05em;
  color: var(--cream);
  margin-top: .9rem;
  text-shadow: 0 0 24px rgba(232,103,43,.55);
}
.loader-sub{
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--smoke);
  margin-top:.6rem;
  text-transform:uppercase;
}
.dots span{ animation: dotBlink 1.2s infinite; opacity:0; }
.dots span:nth-child(2){ animation-delay:.2s; }
.dots span:nth-child(3){ animation-delay:.4s; }
@keyframes dotBlink{ 0%,100%{opacity:0;} 50%{opacity:1;} }

body.loading{ overflow:hidden; height:100vh; }

@media (prefers-reduced-motion: reduce){
  #loader{ display:none; }
  .smoke-puff, .loader-flame{ animation:none; }
}

/* =========================================================
   NAV
========================================================= */
#siteNav{
  position: fixed; top:0; left:0; right:0; z-index:500;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: transparent;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
#siteNav.scrolled{
  background: rgba(23,19,15,.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  height: 64px;
}
.nav-inner{
  width:100%; max-width: var(--container);
  margin:0 auto; padding: 0 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  display:flex; align-items:center;
  color: var(--cream);
  transition: color .35s var(--ease);
}
.jb-logo{ height: 30px; width: auto; display:block; }
#siteNav.scrolled .jb-logo{ height: 26px; }
.nav-links{ display:flex; gap: 2rem; }
.nav-links a{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  color: var(--cream); position:relative; padding: .3rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--ember); transition: right .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active-link::after{ right:0; }

.nav-actions{ display:flex; align-items:center; gap: 1.1rem; }
.lang-toggle{
  display:flex; align-items:center; gap:.35rem;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.25);
  border-radius: 20px; padding: .3rem .6rem;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.05em;
  color: var(--cream);
}
.lang-toggle span{ padding:.1rem .3rem; border-radius:10px; opacity:.55; transition: all .2s; }
.lang-toggle span.active{ opacity:1; background: var(--ember); color:#1a1a1a; }
.lang-sep{ opacity:.4 !important; background:none !important; }

.nav-burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;
}
.nav-burger span{ width:22px; height:2px; background: var(--cream); transition: all .3s var(--ease); }

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative; min-height: 100svh;
  display:flex; align-items:center;
  background: radial-gradient(120% 90% at 50% 0%, #241d17 0%, var(--charcoal) 55%, #100d0a 100%);
  color: var(--cream); overflow:hidden;
}
.hero-embers{ position:absolute; inset:0; pointer-events:none; }
.ember-dot{
  position:absolute; bottom:-4%; width:5px; height:5px; border-radius:50%;
  background: var(--ember-2); box-shadow: 0 0 8px 2px rgba(255,138,76,.8);
  animation-name: emberRise; animation-timing-function: ease-in; animation-iteration-count: infinite;
}
@keyframes emberRise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translateY(-105vh) translateX(var(--drift,20px)); opacity:0; }
}
.hero-inner{
  position:relative; z-index:2; max-width: var(--container); margin:0 auto;
  padding: calc(var(--nav-h) + 2rem) 1.6rem 6rem;
}
.eyebrow{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.25em;
  color: var(--ember-2); margin:0 0 1rem;
}
.hero-title{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: 1.02; letter-spacing:.01em; margin:0 0 1.4rem;
}
.hero-title .accent{ color: var(--ember); }
.hero-sub{
  max-width: 560px; font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--cream-2); line-height:1.6; margin: 0 0 2.2rem;
}
.hero-actions{ display:flex; gap: 1rem; flex-wrap:wrap; }
.hero .btn-ghost{ border-color: var(--cream-2); }

.hero-grate{
  position:absolute; left:0; right:0; bottom:0; height:34px;
  background: repeating-linear-gradient(90deg, #0c0a08 0 8px, #1c1712 8px 16px);
  box-shadow: 0 -2px 20px rgba(0,0,0,.5) inset;
}

/* reveal-on-scroll */
[data-reveal]{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:none; }

/* =========================================================
   GRATE DIVIDER (signature motif)
========================================================= */
.grate-divider{
  height: 22px;
  background: repeating-linear-gradient(90deg, var(--char-brown) 0 10px, var(--charcoal-2) 10px 20px);
  opacity:.9;
}

/* =========================================================
   STORY
========================================================= */
.story{ background: var(--charcoal); color: var(--cream); }
.story-inner{
  max-width: 760px; margin:0 auto; padding: 5rem 1.6rem;
  text-align:center;
}
.story-text{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height:1.35; color: var(--cream-2);
}

/* =========================================================
   MENU
========================================================= */
.menu{ padding: 5.5rem 1.6rem 4rem; max-width: var(--container); margin:0 auto; }
.menu-header{ text-align:center; margin-bottom: 2.4rem; }
.menu .section-label{ text-align:center; }
.story .section-label, .location .section-label{ color: var(--ember-2); }

.menu-tabs{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem;
  margin-bottom: 2.6rem;
}
.menu-tab{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.06em;
  padding: .7rem 1.2rem; border-radius: 999px;
  border: 1.5px solid var(--char-brown); background: transparent; color: var(--ink);
  transition: all .25s var(--ease);
}
.menu-tab:hover{ border-color: var(--ember); }
.menu-tab.active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

.menu-panel{ display:none; }
.menu-panel.active{ display:block; animation: panelFade .5s var(--ease); }
@keyframes panelFade{ from{ opacity:0; transform: translateY(10px);} to{opacity:1; transform:none;} }

.panel-note{
  text-align:center; font-family: var(--font-mono); font-size:.8rem;
  color: var(--ember-deep); margin-bottom: 1.6rem; letter-spacing:.04em;
}

.menu-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem;
}
.menu-card{
  position:relative;
  background: var(--cream-2);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 1.5rem 1.5rem 1.6rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  overflow:hidden;
}
.menu-card::before{
  content:""; position:absolute; inset:0; opacity:0;
  background: radial-gradient(120px 120px at var(--mx,50%) var(--my,0%), rgba(232,103,43,.28), transparent 70%);
  transition: opacity .3s;
  pointer-events:none;
}
.menu-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.menu-card:hover::before{ opacity:1; }
.menu-card h3{
  font-family: var(--font-display); font-weight:400; font-size:1.15rem;
  letter-spacing:.02em; margin: 0 0 .5rem;
}
.menu-card p{
  font-size:.92rem; line-height:1.5; color:#4a4038; margin:0;
}
.badge-card{ padding-top: 1.9rem; }
.badge{
  position:absolute; top:.9rem; right:.9rem;
  font-family: var(--font-mono); font-size:.62rem; letter-spacing:.06em;
  background: var(--ember-deep); color: var(--cream);
  padding: .25rem .55rem; border-radius: 999px; text-transform:uppercase;
}

/* =========================================================
   LOCATION
========================================================= */
.location{ background: var(--ink); color: var(--cream); }
.location-inner{
  max-width: var(--container); margin:0 auto; padding: 5rem 1.6rem;
  display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start;
}
.location address{ font-style:normal; font-size:1.15rem; line-height:1.6; color: var(--cream-2); margin: 0 0 1.6rem; }
.hours-table{ border-collapse: collapse; margin-bottom: .6rem; font-family: var(--font-mono); font-size:.88rem; }
.hours-table th{ text-align:left; padding: .35rem 1.2rem .35rem 0; color: var(--ember-2); font-weight:400; }
.hours-table td{ padding: .35rem 0; color: var(--cream-2); }
.hours-note{ font-size:.78rem; color: var(--smoke); margin: 0 0 1.8rem; font-style:italic; }
.location-map{ border-radius: 10px; overflow:hidden; border: 1px solid rgba(255,255,255,.12); }
.location-map iframe{ width:100%; height: 360px; border:0; filter: grayscale(.15) contrast(1.05); }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ background: var(--charcoal); color: var(--cream-2); }
.footer-inner{
  max-width: var(--container); margin:0 auto; padding: 3rem 1.6rem 2rem;
  display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between;
}
.footer-logo{ color: var(--cream); }
.footer-logo .jb-logo{ height: 30px; }
.footer-contact p{ margin:.25rem 0; font-size:.88rem; }
.footer-contact a:hover{ color: var(--ember-2); }
.placeholder-tag{ font-size:.7rem; opacity:.5; font-family: var(--font-mono); }
.footer-social{ display:flex; gap:1.2rem; font-family: var(--font-mono); font-size:.8rem; align-self:flex-start; }
.footer-social a:hover{ color: var(--ember-2); }
.footer-copy{
  text-align:center; font-family: var(--font-mono); font-size:.72rem;
  color: var(--smoke); padding: 1.2rem 1rem 2rem; margin:0;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 900px){
  .location-inner{ grid-template-columns: 1fr; }
  .menu-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .nav-links{
    position: fixed; top: var(--nav-h); left:0; right:0; bottom:0;
    background: var(--charcoal); flex-direction:column; align-items:flex-start;
    padding: 2rem 1.8rem; gap: 1.6rem;
    transform: translateX(100%); transition: transform .35s var(--ease);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ color: var(--cream); font-size: 1rem; }
  .nav-burger{ display:flex; }
  .nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .menu-grid{ grid-template-columns: 1fr; }
  .menu-tabs{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:.3rem; -webkit-overflow-scrolling:touch; }
  .menu-tab{ flex:0 0 auto; }
}

@media (max-width: 480px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .footer-inner{ flex-direction:column; gap:1.6rem; }
}

/* =========================================================
   ONLINE ORDERING
========================================================= */
html.jb-lock{ overflow:hidden; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.menu-sub{ margin:-.6rem auto 0; max-width:34rem; color:#4a4038; font-size:1rem; line-height:1.5; }

/* menu cards: price + add button */
.menu-card{ display:flex; flex-direction:column; }
.menu-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.menu-card .price{ font-family:var(--font-mono); font-size:.95rem; font-weight:700; color:#962d17; white-space:nowrap; }
.menu-card .badge{ position:static; display:inline-block; align-self:flex-start; margin-bottom:.55rem; }
.badge-card{ padding-top:1.4rem; }
.card-foot{ margin-top:auto; padding-top:1.1rem; }
.add-btn{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em;
  padding:.6rem 1.1rem; border-radius:999px; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.add-btn .plus{ font-size:1.1rem; line-height:1; }
.add-btn:hover:not([disabled]){ background:var(--ink); color:var(--cream); transform:translateY(-1px); }
.add-btn:active:not([disabled]){ transform:scale(.97); }
.add-btn[disabled]{ opacity:.55; cursor:not-allowed; border-style:dashed; }

/* nav order button */
.nav-order{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em;
  padding:.45rem .85rem; border-radius:20px; border:0;
  background:linear-gradient(180deg,var(--ember-2),var(--ember)); color:var(--ink); font-weight:700;
}
.nav-order-count{
  min-width:1.3rem; height:1.3rem; padding:0 .3rem; border-radius:999px;
  background:var(--ink); color:var(--cream); font-size:.68rem; display:inline-flex; align-items:center; justify-content:center;
}
.nav-order-count[hidden]{ display:none; }

/* floating "view order" bar */
.jb-fab{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom)); z-index:450;
  display:flex; align-items:center; gap:.8rem; min-height:52px;
  padding:.5rem 1.2rem .5rem .6rem; border:0; border-radius:999px;
  background:linear-gradient(180deg,var(--ember-2),var(--ember)); color:var(--ink);
  font-family:var(--font-mono); font-size:.82rem; font-weight:700; letter-spacing:.04em;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  animation: fabIn .35s var(--ease);
}
.jb-fab[hidden]{ display:none; }
.fab-count{ min-width:2rem; height:2rem; border-radius:999px; background:var(--ink); color:var(--cream); display:inline-flex; align-items:center; justify-content:center; }
@keyframes fabIn{ from{ opacity:0; transform:translate(-50%,16px); } to{ opacity:1; transform:translate(-50%,0); } }

/* toast */
.jb-toast{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:460;
  transform:translate(-50%,10px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--cream); padding:.7rem 1.1rem; border-radius:8px;
  font-size:.9rem; max-width:calc(100% - 32px); text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35); transition:opacity .25s, transform .25s;
}
.jb-toast.show{ opacity:1; transform:translate(-50%,0); }

/* dialogs */
dialog.jb-dialog{
  border:0; padding:0; margin:0; color:var(--ink); background:var(--cream);
  font-family:var(--font-body); max-width:none; max-height:none;
}
dialog.jb-dialog::backdrop{ background:rgba(16,12,9,.62); backdrop-filter:blur(2px); }
.jb-dialog-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.jb-dialog-head h2{ font-family:var(--font-display); font-weight:400; font-size:1.7rem; letter-spacing:.01em; margin:0; line-height:1.1; }
.jb-x{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(0,0,0,.2);
  background:transparent; color:var(--ink); font-size:1.5rem; line-height:1;
}
.jb-x:hover{ background:rgba(0,0,0,.07); }

/* cart drawer */
dialog.jb-cart{
  position:fixed; inset:0 0 0 auto; width:min(460px,100%); height:100vh; height:100dvh;
  display:none; flex-direction:column;
}
dialog.jb-cart[open]{ display:flex; animation:drawerIn .3s var(--ease); }
@keyframes drawerIn{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
.jb-cart > .jb-dialog-head{ padding:1.3rem 1.3rem 1rem; border-bottom:1px solid rgba(0,0,0,.1); }
.cart-sub{ margin:.35rem 0 0; font-size:.82rem; color:#5a4f45; }
.jb-cart-body{ flex:1; overflow-y:auto; padding:1rem 1.3rem; -webkit-overflow-scrolling:touch; }
.jb-cart-foot{
  padding:1rem 1.3rem calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(0,0,0,.12); background:var(--cream-2);
}
.cart-empty{ color:#5a4f45; margin:2rem 0; text-align:center; }

.cart-banner{ margin:0 0 1rem; padding:.7rem .9rem; border-radius:8px; font-size:.86rem; line-height:1.4; background:#f6dcc0; color:#5b2d0b; border:1px solid #e1b98a; }
.cart-banner.is-block{ background:#f3cfc7; color:#6d1d0e; border-color:#d9998b; }
.cart-banner[hidden]{ display:none; }

.cart-lines{ list-style:none; margin:0 0 1.2rem; padding:0; }
.cart-line{ display:flex; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid rgba(0,0,0,.1); }
.cart-line.is-blocked{ opacity:.75; }
.cart-line-info{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.cart-line-info strong{ font-weight:600; }
.cart-detail{ font-size:.82rem; color:#5a4f45; }
.cart-detail.warn{ color:var(--ember-deep); font-weight:600; }
.cart-line-side{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; flex:0 0 auto; }
.line-total{ font-family:var(--font-mono); font-size:.88rem; }
.stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--ink); border-radius:999px; }
.stepper button{ width:40px; height:40px; border:0; background:transparent; color:var(--ink); font-size:1.25rem; line-height:1; border-radius:50%; }
.stepper button:hover{ background:rgba(0,0,0,.08); }
.stepper .qty{ min-width:1.6rem; text-align:center; font-family:var(--font-mono); font-weight:700; }

.cart-form{ display:grid; gap:.95rem; }
.cart-form[hidden], .cart-lines[hidden], .cart-empty[hidden], .jb-cart-foot[hidden]{ display:none; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#4a4038; }
.field small{ font-size:.78rem; color:#5a4f45; }
.jb-input{
  width:100%; min-height:46px; padding:.65rem .8rem; font:inherit; font-size:1rem; /* 16px stops iOS zoom */
  color:var(--ink); background:#fbf7ee; border:1.5px solid rgba(0,0,0,.28); border-radius:8px;
}
textarea.jb-input{ resize:vertical; min-height:70px; }
.jb-input:focus-visible{ outline:3px solid var(--ember); outline-offset:1px; border-color:var(--ink); }

.cart-totals{ margin:0 0 .9rem; }
.cart-totals .row{ display:flex; justify-content:space-between; padding:.18rem 0; font-size:.92rem; }
.cart-totals dt, .cart-totals dd{ margin:0; }
.cart-totals dd{ font-family:var(--font-mono); }
.cart-totals .grand{ margin-top:.4rem; padding-top:.6rem; border-top:1.5px solid var(--ink); font-weight:700; font-size:1.1rem; }
.cart-error{ margin:0 0 .8rem; color:#8c1d0b; font-weight:600; font-size:.9rem; }
.cart-error[hidden]{ display:none; }
.jb-pay{ width:100%; justify-content:center; min-height:52px; font-size:.95rem; cursor:pointer; }
.jb-pay[disabled], .jb-submit[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.cart-secure{ margin:.7rem 0 0; font-size:.76rem; color:#4a4038; text-align:center; }

/* option picker */
dialog.jb-opt{ position:fixed; inset:0; margin:auto; width:min(460px,calc(100% - 32px)); border-radius:14px; }
dialog.jb-opt[open]{ animation:popIn .25s var(--ease); }
@keyframes popIn{ from{ transform:translateY(14px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.opt-form{ padding:1.3rem; display:grid; gap:1rem; }
.opt-desc{ margin:-.4rem 0 0; font-size:.9rem; color:#4a4038; line-height:1.45; }
.opt-group{ border:0; margin:0; padding:0; min-width:0; }
.opt-group legend{ padding:0; margin-bottom:.5rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:#4a4038; }
.opt-choices{ display:flex; flex-wrap:wrap; gap:.55rem; }
.opt-choice{ position:relative; }
.opt-input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.opt-choice span{
  display:inline-flex; align-items:center; min-height:46px; padding:.55rem 1.1rem; border-radius:999px;
  border:1.5px solid var(--ink); background:transparent; font-weight:600; font-size:.95rem;
}
.opt-input:checked + span{ background:var(--ink); color:var(--cream); }
.opt-input:focus-visible + span{ outline:3px solid var(--ember); outline-offset:2px; }
.opt-hint{ margin:0; min-height:1.1em; font-size:.82rem; color:#5a4f45; }
.jb-submit{ width:100%; justify-content:center; min-height:50px; cursor:pointer; }

/* confirmation page */
body.page-success{ background:var(--cream); }
.success{ max-width:640px; margin:0 auto; padding:calc(var(--nav-h) + 3rem) 1.4rem 4rem; }
.success-card{ background:var(--cream-2); border:1px solid rgba(0,0,0,.1); border-radius:14px; padding:1.8rem 1.5rem; }
.success h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,6vw,2.8rem); line-height:1.05; margin:0 0 .8rem; }
.success p{ line-height:1.55; }
.success .ref{ display:inline-block; font-family:var(--font-mono); font-weight:700; letter-spacing:.12em; font-size:1.3rem; background:var(--ink); color:var(--cream); padding:.4rem .9rem; border-radius:6px; }
.success dl{ margin:1.4rem 0; display:grid; gap:.8rem; }
.success dt{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:#4a4038; }
.success dd{ margin:.15rem 0 0; font-size:1.05rem; }
.success ul{ margin:.3rem 0 0; padding-left:1.1rem; }
.success .btn-ghost{ color:var(--ink); }
.success-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
.success-note{ font-size:.84rem; color:#4a4038; }

@media (max-width:760px){
  .nav-inner{ padding:0 1rem; }
  .nav-actions{ gap:.6rem; }
  dialog.jb-cart{ width:100%; }
  dialog.jb-opt{ margin:auto auto 0; width:100%; border-radius:16px 16px 0 0; }
  .menu-sub{ font-size:.95rem; }
}
@media (max-width:380px){
  .jb-logo{ height:24px; }
  #siteNav.scrolled .jb-logo{ height:22px; }
  .lang-toggle{ padding:.25rem .45rem; }
  .nav-order{ padding:.4rem .65rem; }
}
@media (prefers-reduced-motion: reduce){
  .jb-fab, dialog.jb-cart[open], dialog.jb-opt[open]{ animation:none; }
  .jb-toast{ transition:none; }
}

/* no grey/teal flash when tapping on touch screens */
.add-btn, .opt-choice, .stepper button, .jb-fab, .jb-x, .menu-tab, .nav-order, .lang-toggle, .nav-burger{ -webkit-tap-highlight-color: transparent; }

/* items without a price */
.menu-card.is-sold{ opacity:.78; }
.menu-card .price.is-sold{ color:#4a4038; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; border:1.5px solid currentColor; border-radius:999px; padding:.15rem .6rem; }