/* ============================================================
   Shared layout for every brand. Colours and shapes come from
   the brand's theme.css (see the token list at the top of it).
   ============================================================ */
:root{
  --font-head:'Poppins','Kanit',sans-serif;          /* Kanit / Sarabun cover Thai glyphs */
  --font-body:'Archivo','Sarabun',system-ui,sans-serif;
  --maxw:1180px;
}
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:130px; }
body{ font-family:var(--font-body); color:var(--ink); background:var(--bg); overflow-x:hidden; line-height:1.6; }
html[lang="th"] body{ line-height:1.7; }
html[lang="th"] body *{ letter-spacing:0 !important; }   /* wide tracking breaks Thai */
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
body.locked{ overflow:hidden; }
.grad-text, .sec-title em, .price{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- type primitives ---------- */
.eyebrow{ font-family:var(--font-head); font-weight:900; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--eyebrow); }
.sec-title{ font-family:var(--font-head); font-weight:900; font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.05; letter-spacing:-.02em; text-transform:uppercase; color:var(--ink); }
.sec-title em{ font-style:var(--em-style); padding-right:.08em; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 3rem; }
.section-head .eyebrow{ display:block; margin-bottom:1rem; }

/* ---------- buttons ---------- */
.btn{ font-family:var(--font-head); font-weight:900; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:1rem 1.9rem; border-radius:var(--btn-radius); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; white-space:nowrap; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease, opacity .15s; }
.btn--primary{ background:var(--grad); color:#fff; box-shadow:var(--btn-shadow); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--btn-shadow-hover); }
.btn--ink{ background:var(--ink-btn-bg); color:#fff; box-shadow:var(--ink-btn-shadow); }
.btn--ink:hover{ transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border:2px solid var(--line-strong); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--sm{ padding:.68rem 1.15rem; font-size:.66rem; }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:12px 32px; background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .2s ease; }
.nav.scrolled{ box-shadow:0 8px 30px -18px rgba(0,0,0,.4); }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--font-head); font-weight:900; font-size:1.12rem; line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); }
.brand svg{ flex:none; }
.brand small{ display:block; font-size:.5rem; letter-spacing:.3em; color:var(--eyebrow); margin-top:.25rem; }
.brand em{ font-style:var(--em-style); background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-right:.06em; }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{ font-family:var(--font-head); font-weight:900; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; transition:color .15s; }
.nav__links a:hover{ color:var(--ink); }
.nav__right{ display:flex; align-items:center; gap:.6rem; }
.nav__cart{ display:inline-flex; align-items:center; gap:.55rem; padding:.65rem 1.1rem; border-radius:var(--btn-radius); background:var(--cart-bg); color:#fff; border:none; cursor:pointer; font-family:var(--font-head); font-weight:900; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; box-shadow:var(--cart-shadow); transition:transform .15s; }
.nav__cart:hover{ transform:translateY(-1px); }
.nav__cart svg{ width:16px; height:16px; }
.nav__count{ min-width:20px; height:20px; padding:0 6px; border-radius:100px; background:var(--count-bg); color:var(--count-ink); display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; letter-spacing:0; }
.nav__count.bump{ animation:bump .4s ease; }
@keyframes bump{ 0%{ transform:scale(1);} 40%{ transform:scale(1.45);} 100%{ transform:scale(1);} }
.nav__burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav__burger span{ display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; }
.nav__burger span+span{ margin-top:5px; }

/* language switch */
.lang{ display:inline-flex; padding:3px; border-radius:100px; background:var(--surface); border:1px solid var(--line); }
.lang button{ border:none; background:none; cursor:pointer; font-family:var(--font-head); font-weight:900; font-size:.62rem; letter-spacing:.06em; padding:.42rem .65rem; border-radius:100px; color:var(--ink-soft); }
.lang button[aria-pressed="true"]{ background:var(--tab-active-bg); color:var(--tab-active-ink); }

/* ---------- ordering from a table (QR code) ---------- */
.tablebar{ display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; padding:.65rem 16px; background:var(--bg-dark); color:var(--dark-ink); font-size:.86rem; text-align:center; }
.tablebar b{ font-family:var(--font-head); font-weight:900; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.35rem .8rem; border-radius:100px; background:var(--grad); color:#fff; }
.tablebox{ background:var(--note-bg); border-radius:14px; padding:.9rem 1rem; font-size:.9rem; color:var(--ink-soft); }
.tablebox b{ display:block; font-family:var(--font-head); font-weight:900; text-transform:uppercase; color:var(--ink); font-size:1rem; margin-bottom:.15rem; }

/* ---------- HERO ---------- */
.phero{ position:relative; overflow:hidden; padding:5rem 0 5.5rem; background:var(--hero-bg); }
.phero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.phero .eyebrow{ display:block; margin-bottom:1.1rem; }
.phero h1{ font-family:var(--font-head); font-weight:900; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; letter-spacing:-.02em; text-transform:uppercase; color:var(--ink); }
.phero h1 span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.phero p{ font-size:clamp(1.02rem,1.6vw,1.18rem); line-height:1.7; color:var(--ink-soft); max-width:520px; margin:1.4rem 0 0; }
.phero__ctas{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }
.phero__plate{ position:relative; justify-self:center; width:min(420px,100%); aspect-ratio:1; }
.phero__plate img{ position:relative; width:100%; height:100%; object-fit:cover; border-radius:50%; border:10px solid var(--surface); box-shadow:0 50px 80px -40px rgba(0,0,0,.55); }
.phero__chip{ position:absolute; background:var(--surface); border-radius:16px; padding:.7rem 1rem; box-shadow:0 20px 40px -22px rgba(0,0,0,.5); font-family:var(--font-head); font-weight:900; text-transform:uppercase; font-size:.62rem; letter-spacing:.12em; color:var(--ink-soft); line-height:1.3; animation:bob 5s ease-in-out infinite; }
.phero__chip b{ display:block; font-size:1.25rem; letter-spacing:-.01em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.phero__chip--a{ top:8%; left:-6%; }
.phero__chip--b{ bottom:6%; right:-4%; animation-delay:-2.5s; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* ---------- open status panel ---------- */
.status{ display:grid; grid-template-columns:200px 1fr; overflow:hidden; background:var(--bg-dark); color:var(--dark-ink); border-radius:22px; box-shadow:0 40px 80px -44px rgba(0,0,0,.7); }
.status__stub{ position:relative; background:var(--stub-bg); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:1.8rem 1.2rem; text-align:center; border-right:3px dashed rgba(255,255,255,.5); }
.status__state{ font-family:var(--font-head); font-weight:900; font-size:1.7rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1; }
.status__label{ font-family:var(--font-head); font-weight:900; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; opacity:.85; }
.status__dot{ position:absolute; top:.9rem; right:.9rem; width:10px; height:10px; border-radius:50%; background:#fff; animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }
.status__main{ padding:1.7rem 2rem 1.6rem; min-width:0; }
.status__title{ font-family:var(--font-head); font-weight:900; font-size:clamp(1.1rem,2.4vw,1.5rem); text-transform:uppercase; letter-spacing:-.01em; color:#fff; margin-bottom:1rem; }
.status__title em, .status__stat b{ font-style:normal; background:var(--grad-dark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.status__stats{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.status__stat b{ display:block; font-family:var(--font-head); font-weight:900; font-size:1.6rem; line-height:1.1; }
.status__stat span{ font-family:var(--font-head); font-weight:900; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dark-soft); }
.status--closed .status__stub{ background:var(--stub-closed); border-right-color:rgba(255,255,255,.25); }
.status--closed .status__dot{ display:none; }

/* ---------- category tab bar ---------- */
.cats{ position:sticky; top:62px; z-index:40; background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.cats__row{ display:flex; gap:.5rem; overflow-x:auto; padding:.8rem 0; scrollbar-width:none; }
.cats__row::-webkit-scrollbar{ display:none; }
.cats a{ flex:none; font-family:var(--font-head); font-weight:900; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:.65rem 1.1rem; border-radius:100px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); transition:background .15s, color .15s, border-color .15s; }
.cats a:hover{ color:var(--ink); border-color:var(--accent); }
.cats a.active{ background:var(--tab-active-bg); color:var(--tab-active-ink); border-color:transparent; }

/* ---------- sections ---------- */
.section{ padding:5.5rem 0; }
.section--tint{ background:var(--bg-tint); }
.section--dark{ background:var(--bg-dark); color:var(--dark-ink); }
.section--band{ background:var(--band-bg); }
.section--band .eyebrow{ color:var(--band-eyebrow); }
.section--dark .sec-title{ color:#fff; }
.section--dark .sec-title em{ background:var(--grad-dark); -webkit-background-clip:text; background-clip:text; }
.section--dark .eyebrow{ color:var(--accent-2); }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.step__n{ font-family:var(--font-head); font-weight:900; margin-bottom:.6rem; }
.step__t{ font-family:var(--font-head); font-weight:900; font-size:1rem; text-transform:uppercase; margin-bottom:.4rem; }
.step__d{ font-size:.92rem; line-height:1.6; color:var(--ink-soft); }

/* ---------- menu grid + cards ---------- */
.menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.menu-grid--4{ grid-template-columns:repeat(4,1fr); }
.mcard{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius); overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.mcard:hover{ transform:translateY(-6px); box-shadow:0 28px 50px -30px rgba(0,0,0,.45); border-color:var(--accent); }
.mcard__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); cursor:pointer; }
.mcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mcard:hover .mcard__media img{ transform:scale(1.05); }
.mcard__tags{ position:absolute; top:.8rem; left:.8rem; display:flex; gap:.35rem; flex-wrap:wrap; }
.tag{ font-family:var(--font-head); font-weight:900; font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; padding:.36rem .62rem; border-radius:100px; background:var(--surface); color:var(--ink); }
.tag--hot{ background:var(--grad); color:#fff; }
.tag--green{ background:var(--ok); color:#fff; }
.mcard__qty{ position:absolute; top:.8rem; right:.8rem; min-width:30px; height:30px; padding:0 .5rem; border-radius:100px; background:var(--qty-bg); color:var(--qty-ink); display:none; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:900; font-size:.72rem; }
.mcard__qty.show{ display:inline-flex; }
.mcard__body{ padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.mcard__name{ font-family:var(--font-head); font-weight:900; font-size:1.02rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1.25; margin-bottom:.45rem; cursor:pointer; }
.mcard__name:hover{ color:var(--accent); }
.mcard__desc{ font-size:.9rem; line-height:1.6; color:var(--ink-soft); flex:1; }
.mcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:1.1rem; }
.price{ font-family:var(--font-head); font-weight:900; font-size:1.35rem; line-height:1.1; }
.mcard--drink .mcard__name{ font-size:.92rem; }
.mcard--drink .mcard__media{ aspect-ratio:1; }
.section--dark .mcard{ border-color:transparent; }

/* ---------- deal tickets (on dark) ---------- */
.deals{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
.ticket{ position:relative; display:grid; grid-template-columns:42% 1fr; background:var(--ticket-bg); color:var(--ink); border-radius:calc(var(--card-radius) + 4px); overflow:hidden; box-shadow:0 44px 90px -44px rgba(0,0,0,.8); transition:transform .22s ease; }
.ticket:hover{ transform:translateY(-6px); }
.ticket__media{ position:relative; min-height:100%; cursor:pointer; }
.ticket__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ticket__save{ position:absolute; left:.9rem; top:.9rem; background:var(--save-bg); color:var(--save-ink); font-family:var(--font-head); font-weight:900; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:.45rem .75rem; border-radius:100px; }
.ticket__body{ position:relative; padding:1.5rem 1.5rem 1.4rem 1.8rem; display:flex; flex-direction:column; border-left:3px dashed var(--line-strong); }
.ticket__body::before, .ticket__body::after{ content:''; position:absolute; left:-14px; width:26px; height:26px; border-radius:50%; background:var(--bg-dark); }
.ticket__body::before{ top:-13px; }
.ticket__body::after{ bottom:-13px; }
.ticket__kick{ font-family:var(--font-head); font-weight:900; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:.4rem; }
.ticket__name{ font-family:var(--font-head); font-weight:900; font-size:1.25rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1.2; margin-bottom:.5rem; }
.ticket__desc{ font-size:.9rem; line-height:1.6; color:var(--ink-soft); flex:1; }
.ticket__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:.8rem; margin-top:1.1rem; flex-wrap:wrap; }
.ticket__was{ display:block; font-family:var(--font-head); font-weight:900; font-size:.75rem; color:var(--ink-soft); text-decoration:line-through; margin-bottom:.2rem; }
.ticket .price{ font-size:1.7rem; }

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.faq details[open]{ border-color:var(--accent); box-shadow:0 20px 40px -30px rgba(0,0,0,.4); }
.faq summary{ cursor:pointer; list-style:none; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.5rem; font-family:var(--font-head); font-weight:900; font-size:.95rem; text-transform:uppercase; letter-spacing:-.01em; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family:var(--font-head); font-weight:900; font-size:1.3rem; line-height:1; color:var(--accent); flex:none; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__a{ padding:0 1.5rem 1.25rem; font-size:.97rem; line-height:1.7; color:var(--ink-soft); }
.faq__a strong{ color:var(--ink); }

/* ---------- FOOTER ---------- */
.footer{ background:var(--bg-footer); color:var(--dark-soft); padding:4.5rem 0 2rem; }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:3rem; margin-bottom:3rem; }
.footer .brand{ color:#fff; margin-bottom:1.1rem; }
.footer .brand em{ background:var(--grad-dark); -webkit-background-clip:text; background-clip:text; }
.footer__tag{ font-size:.88rem; line-height:1.7; color:var(--dark-soft); max-width:260px; }
.footer__col h4{ font-family:var(--font-head); font-weight:900; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); margin-bottom:1.2rem; }
.footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.footer__col a, .footer__col li{ font-family:var(--font-head); font-weight:900; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--dark-ink); opacity:.72; transition:opacity .15s; }
.footer__col a:hover{ opacity:1; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.08); }
.footer__copy{ font-size:.8rem; color:var(--dark-soft); opacity:.75; }
.footer__site{ font-family:var(--font-head); font-weight:900; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; background:var(--grad-dark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.footer__switch{ color:var(--dark-ink); opacity:.7; font-size:.8rem; }
.footer__switch:hover{ opacity:1; }

/* ---------- ITEM POPUP ---------- */
.modal{ position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:24px; pointer-events:none; }
.modal__box{ position:relative; width:min(520px,100%); max-height:calc(100vh - 48px); overflow-y:auto; background:var(--surface); border-radius:24px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); opacity:0; transform:translateY(24px) scale(.97); transition:opacity .22s, transform .25s cubic-bezier(.2,.7,.3,1); pointer-events:none; }
.modal.open{ pointer-events:auto; }
.modal.open .modal__box{ opacity:1; transform:none; pointer-events:auto; }
.modal__media{ position:relative; aspect-ratio:16/10; background:var(--surface-2); }
.modal__media img{ width:100%; height:100%; object-fit:cover; }
.modal__close{ position:absolute; top:.9rem; right:.9rem; width:38px; height:38px; border-radius:50%; border:none; background:var(--surface); color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }
.modal__body{ padding:1.4rem 1.6rem 1.2rem; }
.modal__tags{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.7rem; }
.modal__tags .tag:not(.tag--hot):not(.tag--green){ background:var(--surface-2); }
.modal__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.modal__name{ font-family:var(--font-head); font-weight:900; font-size:1.4rem; line-height:1.15; text-transform:uppercase; letter-spacing:-.01em; }
.modal__desc{ color:var(--ink-soft); font-size:.97rem; line-height:1.65; margin-top:.6rem; }
.modal__was{ display:block; text-align:right; font-family:var(--font-head); font-weight:900; font-size:.75rem; color:var(--ink-soft); text-decoration:line-through; }
.modal .field{ margin-top:1.1rem; }
.modal__foot{ position:sticky; bottom:0; display:flex; gap:.8rem; align-items:center; padding:1rem 1.6rem 1.3rem; background:var(--surface); border-top:1px solid var(--line); }
.modal__foot .btn{ flex:1; }
.qty{ display:inline-flex; align-items:center; gap:.3rem; background:var(--bg); border-radius:100px; padding:4px; }
.qty button{ width:36px; height:36px; border:none; border-radius:50%; background:var(--surface); cursor:pointer; font-weight:700; font-size:1.1rem; line-height:1; color:var(--ink); box-shadow:0 2px 0 var(--line); }
.qty button:hover{ background:var(--surface-2); }
.qty span{ min-width:26px; text-align:center; font-family:var(--font-head); font-weight:900; }
.count-hint{ text-align:right; font-size:.74rem; color:var(--ink-soft); margin-top:.3rem; }

/* ---------- CART DRAWER ---------- */
.scrim{ position:fixed; inset:0; z-index:90; background:rgba(20,10,4,.55); opacity:0; pointer-events:none; transition:opacity .25s; }
.scrim.open{ opacity:1; pointer-events:auto; }
.scrim.top{ z-index:105; }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:100; width:min(440px,100%); background:var(--bg); display:flex; flex-direction:column; transform:translateX(105%); transition:transform .3s cubic-bezier(.2,.7,.3,1); box-shadow:-30px 0 60px -30px rgba(0,0,0,.5); }
.drawer.open{ transform:none; }
.drawer__stub{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.5rem; background:var(--stub-bg); color:#fff; }
.drawer__title{ font-family:var(--font-head); font-weight:900; font-size:.86rem; letter-spacing:.18em; text-transform:uppercase; }
.drawer__close{ background:rgba(255,255,255,.2); color:#fff; border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1.2rem; line-height:1; }
.drawer__close:hover{ background:rgba(255,255,255,.32); }
.drawer__perf{ height:0; border-top:3px dashed var(--line-strong); margin:0 14px; }
.drawer__body{ flex:1; overflow-y:auto; padding:.6rem 0; }
.drawer__foot{ padding:1.1rem 1.5rem 1.4rem; border-top:1px solid var(--line); background:var(--surface); }
.empty{ text-align:center; padding:3.5rem 1.5rem; color:var(--ink-soft); }
.empty b{ display:block; font-family:var(--font-head); font-weight:900; text-transform:uppercase; font-size:1.1rem; color:var(--ink); margin-bottom:.4rem; }
.cline{ display:grid; grid-template-columns:58px 1fr auto; gap:.9rem; align-items:start; padding:.85rem 1.5rem; }
.cline + .cline{ border-top:1px solid var(--line); }
.cline img{ width:58px; height:58px; border-radius:12px; object-fit:cover; }
.cline__name{ font-weight:700; font-size:.94rem; line-height:1.3; }
.cline__opt{ font-size:.78rem; color:var(--ink-soft); }
.cline__note{ font-size:.8rem; color:var(--ink); background:var(--note-bg); border-radius:8px; padding:.3rem .55rem; margin-top:.35rem; font-style:italic; }
.cline__notebtn{ background:none; border:none; cursor:pointer; padding:0; margin-top:.35rem; font-family:var(--font-head); font-weight:900; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:block; }
.cline__noteedit{ display:flex; gap:.4rem; margin-top:.4rem; }
.cline__noteedit input{ flex:1; min-width:0; font-family:var(--font-body); font-size:.85rem; padding:.45rem .6rem; border-radius:8px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); }
.cline__noteedit input:focus{ outline:none; border-color:var(--focus-border); }
.cline__noteedit button{ border:none; border-radius:8px; background:var(--ink-btn-bg); color:#fff; font-family:var(--font-head); font-weight:900; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; padding:0 .7rem; cursor:pointer; }
.cline__price{ font-family:var(--font-head); font-weight:900; font-size:.9rem; color:var(--ink); text-align:right; }
.stepper{ display:inline-flex; align-items:center; gap:.2rem; margin-top:.45rem; background:rgba(0,0,0,.06); border-radius:100px; padding:2px; }
.stepper button{ width:26px; height:26px; border:none; border-radius:50%; background:var(--surface); cursor:pointer; font-weight:700; font-size:.95rem; line-height:1; color:var(--ink); }
.stepper button:hover{ background:var(--surface-2); }
.stepper span{ min-width:22px; text-align:center; font-weight:700; font-size:.86rem; }
.totals{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; font-size:.92rem; color:var(--ink-soft); }
.totals div{ display:flex; justify-content:space-between; }
.totals .grand{ font-family:var(--font-head); font-weight:900; font-size:1.1rem; text-transform:uppercase; color:var(--ink); padding-top:.5rem; margin-top:.2rem; border-top:1px dashed var(--line-strong); }
.totals .free{ color:var(--ok); font-weight:700; }
.hint{ font-size:.8rem; color:var(--ink-soft); text-align:center; margin-top:.8rem; }

/* forms */
.form{ display:flex; flex-direction:column; gap:1rem; padding:1rem 1.5rem 1.5rem; }
.field label{ display:block; font-family:var(--font-head); font-weight:900; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45rem; }
.field input, .field textarea, .field select{ width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink); padding:.8rem .95rem; border-radius:12px; border:1.5px solid var(--line-strong); background:var(--surface); transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--focus-border); box-shadow:0 0 0 3px var(--focus); }
.field textarea{ min-height:80px; resize:vertical; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.85rem .6rem; border-radius:14px; border:1.5px solid var(--line-strong); background:var(--surface); cursor:pointer; font-size:.7rem; color:var(--ink); letter-spacing:.12em; transition:.15s; }
.seg label small{ font-family:var(--font-body); font-weight:500; font-size:.74rem; letter-spacing:0; text-transform:none; color:var(--ink-soft); }
.seg input:checked + label{ background:var(--seg-on); border-color:transparent; color:#fff; }
.seg input:checked + label small{ color:rgba(255,255,255,.85); }
.seg input:focus-visible + label{ box-shadow:0 0 0 3px var(--focus); }
.form__err{ display:none; background:rgba(210,41,28,.08); border:1px solid rgba(210,41,28,.3); color:#C3261A; border-radius:10px; padding:.7rem .9rem; font-size:.88rem; }
.form__err.show{ display:block; }
.back-link{ background:none; border:none; cursor:pointer; font-family:var(--font-head); font-weight:900; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding:.9rem 1.5rem 0; }
.back-link:hover{ color:var(--ink); }

/* order confirmation */
.confirm{ padding:1.6rem 1.5rem; text-align:center; }
.confirm__no{ font-family:var(--font-head); font-weight:900; font-size:3rem; line-height:1.1; margin:.4rem 0 .6rem; }
.confirm h3{ font-family:var(--font-head); font-weight:900; text-transform:uppercase; font-size:1.3rem; }
.confirm p{ color:var(--ink-soft); font-size:.95rem; margin-top:.4rem; }
.track{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; margin:1.6rem 0 1rem; }
.track__step{ display:flex; flex-direction:column; align-items:center; gap:.45rem; font-family:var(--font-head); font-weight:900; font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-align:center; }
.track__step i{ width:100%; height:6px; border-radius:6px; background:rgba(0,0,0,.1); }
.track__step.done i{ background:var(--grad); }
.track__step.done{ color:var(--ink); }
.track__step.now i{ animation:pulseDot 1.4s ease-in-out infinite; }
.receipt{ text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1rem 1.2rem; margin-top:1.2rem; font-size:.9rem; }
.receipt div{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; }
.receipt small{ color:var(--ink-soft); }
.receipt em{ display:block; font-size:.8rem; color:var(--ink-soft); }
.receipt .grand{ font-weight:700; color:var(--ink); border-top:1px dashed var(--line-strong); margin-top:.4rem; padding-top:.5rem; }

/* toast + mobile cart bar */
.toast{ position:fixed; left:50%; bottom:28px; z-index:120; transform:translate(-50%,30px); opacity:0; pointer-events:none; background:var(--ink-btn-bg); color:#fff; padding:.85rem 1.3rem; border-radius:100px; font-weight:600; font-size:.92rem; box-shadow:0 20px 40px -18px rgba(0,0,0,.6); transition:opacity .25s, transform .25s; white-space:nowrap; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.cartbar{ display:none; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .menu-grid{ grid-template-columns:1fr 1fr; }
  .menu-grid--4{ grid-template-columns:repeat(3,1fr); }
  .deals{ grid-template-columns:1fr; max-width:640px; margin:0 auto; }
}
@media (max-width:900px){
  .nav__links{ position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:0; background:var(--bg); padding:1rem 32px 1.6rem; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .3s ease; align-items:stretch; z-index:-1; }
  .nav__links.open{ transform:translateY(0); }
  .nav__links a{ padding:.9rem 0; border-bottom:1px solid var(--line); font-size:.8rem; }
  .nav__burger{ display:block; }
  .phero__inner{ grid-template-columns:1fr; }
  .phero__plate{ width:min(320px,80%); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2.2rem; }
  .steps{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .wrap{ padding:0 16px; }
  .nav{ padding:10px 12px; gap:.5rem; }
  .brand{ font-size:.95rem; gap:.45rem; }
  .nav__right{ gap:.35rem; }
  .nav__cart{ padding:.6rem .8rem; }
  .nav__cart .nav__cart-label{ display:none; }
  .lang button{ padding:.38rem .5rem; }
  .menu-grid{ grid-template-columns:1fr; }
  .menu-grid--4{ grid-template-columns:1fr 1fr; gap:.9rem; }
  .mcard--drink .mcard__body{ padding:.9rem; }
  .mcard--drink .mcard__desc{ font-size:.8rem; }
  .mcard--drink .mcard__foot{ flex-direction:column; align-items:stretch; }
  .ticket{ grid-template-columns:1fr; }
  .ticket__media{ aspect-ratio:16/9; }
  .ticket__body{ border-left:none; border-top:3px dashed var(--line-strong); }
  .ticket__body::before{ top:-14px; left:-13px; }
  .ticket__body::after{ top:-14px; bottom:auto; left:auto; right:-13px; }
  .status{ grid-template-columns:1fr; }
  .status__stub{ flex-direction:row; gap:.7rem; padding:1.1rem; border-right:none; border-bottom:3px dashed rgba(255,255,255,.5); }
  .status__state{ font-size:1.3rem; }
  .status__main{ padding:1.4rem 1.3rem; }
  .status__stats{ gap:1.4rem; }
  .phero__chip--a{ left:-2%; }
  .phero__chip--b{ right:-2%; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; gap:.8rem; text-align:center; }
  .section{ padding:4rem 0; }
  .modal{ padding:0; align-items:flex-end; }
  .modal__box{ border-radius:24px 24px 0 0; max-height:92vh; transform:translateY(100%); }
  .cartbar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:60; display:none; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.3rem; border-radius:var(--btn-radius); border:none; background:var(--grad); color:#fff; font-family:var(--font-head); font-weight:900; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; box-shadow:var(--btn-shadow); cursor:pointer; }
  .cartbar.show{ display:flex; }
  .toast{ bottom:90px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } }

/* =====================================================================
   One-restaurant site additions
   ===================================================================== */
/* anything marked hidden stays hidden, whatever its display style */
[hidden]{ display:none !important; }

/* loading screen until the restaurant's look is applied */
.boot{ position:fixed; inset:0; z-index:200; display:none; flex-direction:column; align-items:center; justify-content:center; gap:1rem; background:#FBF6EE; color:#4a3f33; font-family:var(--font-body); text-align:center; padding:24px; }
.is-loading .boot{ display:flex; }
.is-loading body > *:not(.boot){ visibility:hidden; }
.boot__spin{ width:42px; height:42px; border-radius:50%; border:4px solid rgba(0,0,0,.1); border-top-color:#E0751E; animation:spin 1s linear infinite; }
.boot.is-error .boot__spin{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* hero decorations: each theme switches on its own */
.phero__flame, .phero__dots, .phero__seeds, .phero__wave{ display:none; }
.brand img{ height:38px; width:auto; }

/* notice banners under the nav */
.banner{ display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; padding:.75rem 16px; font-size:.92rem; text-align:center; }
.banner--info{ background:var(--bg-dark); color:var(--dark-ink); }
.banner--warn{ background:#FFF3CD; color:#5C4400; border-bottom:1px solid #F0C36D; }
.banner--error{ background:#C3261A; color:#fff; }
.banner b.pill{ font-family:var(--font-head); font-weight:900; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.35rem .8rem; border-radius:100px; background:var(--grad); color:#fff; }
.banner button{ font-family:var(--font-head); font-weight:900; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; border:none; border-radius:100px; padding:.5rem .9rem; cursor:pointer; background:#fff; color:#3a2a00; }
.banner--error button{ color:#C3261A; }
.banner button.ghost{ background:transparent; border:1.5px solid currentColor; color:inherit; }

/* sold out */
.mcard.is-soldout .mcard__media img, .ticket.is-soldout .ticket__media img{ filter:grayscale(1); opacity:.55; }
.soldout{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-6deg); font-family:var(--font-head); font-weight:900; font-size:.9rem; letter-spacing:.2em; text-transform:uppercase; background:rgba(0,0,0,.78); color:#fff; padding:.5rem 1rem; border-radius:8px; }
.btn--off, .btn--off:hover{ background:rgba(0,0,0,.08); color:var(--ink-soft); box-shadow:none; transform:none; cursor:not-allowed; }

/* option groups in the dish popup */
.ogroup{ margin-top:1.2rem; }
.ogroup__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.ogroup__title{ font-family:var(--font-head); font-weight:900; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.ogroup__rule{ font-size:.74rem; color:var(--ink-soft); white-space:nowrap; }
.ogroup__rule.is-req{ color:var(--accent); font-weight:700; }
.ogroup.is-missing .ogroup__rule{ background:var(--accent); color:#fff; padding:.1rem .5rem; border-radius:100px; }
.opt{ display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; margin-top:.45rem; border:1.5px solid var(--line-strong); border-radius:12px; background:var(--surface); cursor:pointer; font-size:.95rem; }
.opt input{ width:18px; height:18px; accent-color:var(--accent); flex:none; margin:0; }
.opt span{ flex:1; }
.opt b{ font-weight:700; font-size:.86rem; color:var(--ink-soft); }
.opt:has(input:checked){ border-color:var(--accent); background:var(--note-bg); }
.opt.is-off{ opacity:.45; cursor:not-allowed; }
#mAdd:disabled{ opacity:1; background:rgba(0,0,0,.1); color:var(--ink-soft); box-shadow:none; }

/* cart extras */
.cline.is-problem{ background:rgba(195,38,26,.07); }
.cline__warn{ display:block; color:#C3261A; font-size:.78rem; font-weight:700; margin-top:.3rem; }
.consent{ font-size:.8rem; line-height:1.5; color:var(--ink-soft); }
.consent a, .footer__switch{ color:inherit; }
.form__err b{ font-weight:700; }
.form__err .btn{ margin-top:.7rem; }
.retrying{ font-size:.82rem; color:var(--ink-soft); margin-top:.6rem; }
.modechoice{ border:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.modechoice legend{ font-family:var(--font-head); font-weight:900; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; padding:0; }
.modepick{ position:relative; display:block; cursor:pointer; background:var(--surface); border:2px solid var(--line-strong); border-radius:14px; padding:.8rem .9rem; font-size:.85rem; color:var(--ink-soft); line-height:1.35; }
.modepick input{ position:absolute; opacity:0; pointer-events:none; }
.modepick b{ display:block; font-family:var(--font-head); font-weight:900; text-transform:uppercase; color:var(--ink); font-size:.95rem; margin-bottom:.2rem; }
.modepick:has(input:checked){ border-color:var(--accent); background:var(--note-bg); }
.modepick:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:2px; }
.modepick.is-off{ cursor:default; border-style:dashed; }
.modepick.is-off b{ color:var(--ink-soft); }
.botbox:empty{ display:none; }
.servechoice{ border:none; padding:0; margin:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.servechoice legend{ font-family:var(--font-head); font-weight:900; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; padding:0; }
.servepick{ cursor:pointer; }
.servepick input{ position:absolute; opacity:0; pointer-events:none; }
.servepick span{ display:inline-block; padding:.55rem 1rem; border-radius:100px; border:2px solid var(--line-strong); background:var(--surface); font-weight:700; font-size:.9rem; white-space:nowrap; }
.servepick input:checked + span{ border-color:var(--accent); background:var(--note-bg); }
.servepick input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:2px; }

/* demo PromptPay payment card (looks like a Thai bank QR slip; the QR holds plain text only) */
.ppay{ margin:1.1rem auto .4rem; max-width:320px; border-radius:16px; overflow:hidden; background:#fff; color:#0E2A47; text-align:center; box-shadow:0 16px 40px -20px rgba(14,42,71,.55); border:1px solid #D7E0EA; }
.ppay__head{ display:flex; align-items:center; justify-content:center; gap:.5rem; background:#0E3A66; color:#fff; padding:.7rem 1rem; font-weight:700; letter-spacing:.04em; font-size:.95rem; }
.ppay__mark{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; background:#fff; color:#0E3A66; font-size:.62rem; font-weight:900; }
.ppay__body{ padding:1rem 1.2rem 1.2rem; }
.ppay__brand{ font-weight:800; font-size:1.35rem; color:#0E3A66; letter-spacing:-.01em; }
.ppay__brand b{ color:#1B6FB5; }
.ppay__qr{ position:relative; width:190px; margin:.7rem auto; padding:10px; border:1px solid #D7E0EA; border-radius:10px; background:#fff; }
.ppay__qr svg{ display:block; width:100%; height:auto; }
.ppay__qr svg path, .ppay__qr svg rect[fill="black"]{ fill:#0E2A47; }
.ppay__demo-tag{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-12deg); background:#E11D2E; color:#fff; font-weight:900; font-size:.8rem; letter-spacing:.15em; padding:.2rem .6rem; border-radius:6px; box-shadow:0 0 0 3px #fff; }
.ppay__to{ font-size:.85rem; color:#4A6075; }
.ppay__amt{ font-size:1.8rem; font-weight:800; color:#0E2A47; margin:.1rem 0 .4rem; font-variant-numeric:tabular-nums; }
.ppay__how{ font-size:.82rem; color:#4A6075; margin-bottom:.5rem; }
.slip{ margin:1.1rem auto .4rem; max-width:320px; padding:1rem 1.1rem 1.1rem; border-radius:16px; background:var(--surface); border:2px dashed var(--line-strong); text-align:center; }
.slip--done{ border-style:solid; border-color:var(--ok); }
.slip__title{ display:block; font-family:var(--font-head); font-weight:900; text-transform:uppercase; font-size:1rem; margin-bottom:.3rem; }
.slip--done .slip__title{ color:var(--ok); }
.slip p{ font-size:.86rem; color:var(--ink-soft); margin-bottom:.8rem; }
.slip__img{ display:block; max-width:140px; max-height:220px; margin:0 auto .7rem; border-radius:8px; border:1px solid var(--line); object-fit:contain; background:#fff; }
.slip__pick{ cursor:pointer; position:relative; }
.slip__file{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); pointer-events:none; }
.slip__busy{ display:flex; align-items:center; justify-content:center; gap:.6rem; font-weight:700; font-size:.9rem; padding:.6rem 0; }
.slip__busy .boot__spin{ width:22px; height:22px; margin:0; }
.slip__link{ display:inline-block; margin-top:.7rem; background:none; border:none; padding:0; font:inherit; font-size:.85rem; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
.slip .form__err{ margin-top:.7rem; text-align:left; }
.ppay__note{ font-size:.78rem; font-weight:700; color:#B42318; background:#FFF1EF; border-radius:8px; padding:.45rem .6rem; margin-bottom:.8rem; }
@media (max-width:420px){ .modechoice{ grid-template-columns:1fr; } }

/* privacy page */
.doc{ max-width:760px; margin:0 auto; padding:3rem 16px 5rem; }
.doc h1{ font-family:var(--font-head); font-weight:900; text-transform:uppercase; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; margin:1rem 0 1.2rem; }
.doc h2{ font-family:var(--font-head); font-weight:900; text-transform:uppercase; font-size:1.05rem; margin:2rem 0 .6rem; }
.doc p, .doc li{ line-height:1.75; color:var(--ink-soft); }
.doc ul{ padding-left:1.2rem; }
.doc li{ margin-bottom:.4rem; }
.doc b{ color:var(--ink); }
.doc__back{ font-family:var(--font-head); font-weight:900; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); }