/* Typefaces, self-hosted.
   They used to be an @import from fonts.googleapis.com, which cost a third-party
   DNS lookup, a TLS handshake and a blocking stylesheet before any text could be
   laid out — the single largest delay on a slow mobile connection. Serving them
   from this origin removes all of that, lets the service worker cache them, and
   keeps the restaurant's visitors off a third-party request.

   DM Sans is a variable font, so one file covers all four weights the design uses.
   Playfair Display is instanced down to the single weight it is actually asked for
   (500), which removes the interpolation data and roughly halves those two files.
   Licensed under the SIL Open Font License — see fonts/CREDITS.md.

   The unicode-range below matches what tools/subset_fonts.py kept: Google's Latin
   range. Neither family contains the naira sign, so ₦ in a price is drawn by the
   system font — as it always was, including while these came from Google's CDN.

   font-display:swap means text paints immediately in the fallback face and is
   restyled when the font arrives, rather than staying invisible. The unicode-range
   values are Google's latin subset, so characters outside it (the naira sign, for
   instance) fall back exactly as they did before. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/dm-sans-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/playfair-display-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/playfair-display-latin-italic-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --red:#c4202d; --red-dark:#a11926; --ink:#171512; --muted:#6d675f;
  --paper:#f7f5f0; --white:#fff; --line:#e7e2d9;
  --display:'Playfair Display',Georgia,serif; --sans:'DM Sans',Arial,sans-serif;
  --radius:14px; --shadow:0 10px 30px rgba(23,21,18,.08);
  --focus:0 0 0 3px rgba(196,32,45,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:0;background:none;font:inherit;color:inherit}
input,textarea,select{font:inherit}
img{max-width:100%;display:block}
.hidden{display:none!important}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip-link{position:absolute;left:1rem;top:-5rem;background:var(--red);color:#fff;padding:.8rem 1.2rem;border-radius:8px;z-index:100;font-weight:600}
.skip-link:focus{top:1rem}

/* ---------- announcement ---------- */
.announcement{height:34px;background:var(--ink);color:#e8e5df;display:flex;justify-content:center;align-items:center;gap:10px;font-size:12px;letter-spacing:.04em}
.announcement a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* ---------- header ---------- */
.site-header{height:96px;background:rgba(247,245,240,.97);position:sticky;top:0;z-index:20;border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;backdrop-filter:blur(8px)}
.site-header.scrolled{border-color:var(--line);box-shadow:0 4px 18px rgba(23,21,18,.05)}
.header-inner{height:100%;max-width:1240px;margin:auto;padding:0 34px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:64px;height:64px;object-fit:contain;border-radius:50%}
.brand strong{font-size:21px;letter-spacing:.14em;line-height:1;display:block}
.brand small{display:block;font-size:10px;letter-spacing:.24em;color:var(--muted);margin-top:6px}
.desktop-nav{display:flex;gap:32px;margin-left:auto}
.desktop-nav a{font-size:15px;font-weight:600;color:#6d675f;position:relative;padding:6px 0}
.desktop-nav a.active,.desktop-nav a:hover{color:var(--red)}
.desktop-nav a.active:after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--red);border-radius:2px}
.header-actions{display:flex;align-items:center;gap:14px;margin-left:24px}
.icon-button{font-size:26px;line-height:1;padding:8px;border-radius:8px;color:var(--ink)}
.cart-pill{height:44px;padding:0 14px;border:1px solid var(--line);background:var(--white);border-radius:22px;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.cart-pill b{background:var(--red);color:#fff;border-radius:50%;font-size:12px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 4px}
.cart-icon{font-size:20px;line-height:0;transform:rotate(180deg);display:inline-block}

/* ---------- shared ---------- */
.section-pad{max-width:1240px;margin:0 auto;padding-left:34px;padding-right:34px}
.eyebrow{color:var(--red);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.eyebrow-line{display:inline-block;width:30px;height:2px;background:var(--red);border-radius:2px}
h1,h2{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(46px,6vw,74px);margin-bottom:22px}
h2{font-size:clamp(34px,4vw,52px);margin-bottom:16px}
h1 em,h2 em{color:var(--red);font-style:italic}
p{margin-top:0}
.button{border-radius:10px;min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:700;font-size:15px;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.button:hover{transform:translateY(-1px)}
.button-primary{color:#fff;background:var(--red);box-shadow:0 8px 18px rgba(196,32,45,.28)}
.button-primary:hover{background:var(--red-dark)}
.button-outline{background:var(--white);border:1.5px solid var(--ink);color:var(--ink)}
.button-dark{color:#fff;background:var(--ink)}
.button-whatsapp{background:#1f8a4c;color:#fff;gap:10px}
.button-wide{width:100%}
.text-link{font-size:14px;font-weight:700;padding:8px 0;color:var(--ink)}
.text-link span{color:var(--red);font-size:18px;margin-left:8px}

/* ---------- hero ---------- */
.hero{min-height:600px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:5%;padding-top:56px;padding-bottom:64px}
.hero-text{max-width:440px;font-size:17px;line-height:1.7;color:var(--muted);margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{display:flex;align-items:center;gap:18px;margin-top:46px;flex-wrap:wrap}
.hero-meta div:not(.meta-divider){display:flex;flex-direction:column}
.hero-meta strong{font-size:13px}
.hero-meta span{font-size:12px;color:#8a847b;margin-top:2px}
.meta-divider{width:1px;height:34px;background:var(--line)}
.hero-visual{position:relative;min-height:440px}
.hero-logo{position:absolute;top:2px;left:3%;width:104px;height:104px;border-radius:50%;border:6px solid var(--white);box-shadow:var(--shadow);z-index:3;object-fit:contain;background:var(--white)}
.hero-photo{border-radius:18px;object-fit:cover;box-shadow:var(--shadow)}
.hero-photo-main{width:78%;height:420px;margin-left:auto}
.hero-photo-card{position:absolute;left:0;bottom:24px;width:52%;height:210px;border:6px solid var(--paper)}
.hero-photo-mini{position:absolute;right:0;top:18px;width:34%;height:130px;border:5px solid var(--paper)}
.hero-chip{position:absolute;left:6%;bottom:6px;background:var(--ink);color:#fff;border-radius:12px;padding:13px 16px;display:flex;gap:11px;align-items:center;box-shadow:var(--shadow)}
.hero-chip>span{color:#ffd9dd;font-size:22px}
.hero-chip strong,.hero-chip small{display:block;line-height:1.3}
.hero-chip strong{font-size:14px}
.hero-chip small{font-size:12px;color:#b9b2a8;margin-top:2px}

/* ---------- menu ---------- */
.menu-section{padding-top:96px;padding-bottom:110px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:30px}
.section-heading>p{max-width:340px;font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:6px}
.menu-toolbar{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:34px}
.category-tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.category-tabs::-webkit-scrollbar{display:none}
.category-tab{padding:10px 18px;border-radius:22px;background:var(--white);border:1px solid var(--line);color:#6d675f;font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.category-tab.active{background:var(--red);border-color:var(--red);color:#fff}
.search-box{height:46px;min-width:230px;border:1px solid var(--line);background:var(--white);display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:23px;color:#9a948a}
.search-box span{font-size:22px;line-height:0}
.search-box input{width:100%;min-width:0;border:0;outline:0;background:none;font-size:14px}
.search-box kbd{font-size:10px;color:#a8a197;border:1px solid var(--line);border-radius:5px;padding:2px 6px;white-space:nowrap}
.featured-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px}
.feature-card{background:var(--ink);color:#fff;min-height:230px;border-radius:16px;padding:24px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.feature-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,8,.82),transparent 62%)}
.feature-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-card-content{position:relative;z-index:2}
.feature-card .eyebrow{color:#ffc9ce;font-size:10px;margin-bottom:8px}
.feature-card h3{font:500 25px/1.1 var(--display);margin:0 0 10px}
.feature-price{display:inline-block;background:rgba(255,255,255,.16);padding:6px 11px;font-size:13px;font-weight:600;border-radius:6px;color:#fff}
.feature-card .add-mini{position:absolute;right:18px;bottom:18px;background:#fff;color:var(--red);width:42px;height:42px;border-radius:50%;font-size:24px;z-index:3;box-shadow:var(--shadow);line-height:1}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.menu-card{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.menu-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.food-image{height:190px;background:linear-gradient(135deg,#b93828,#7a2922);position:relative;overflow:hidden}
.food-image picture,.food-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.food-image:after{content:'NAAN’S';position:absolute;top:12px;right:12px;color:#fff;background:rgba(10,9,8,.45);border-radius:50%;width:34px;height:34px;font:italic 6px var(--display);display:grid;place-items:center;z-index:2;letter-spacing:.02em}
.food-tag{position:absolute;top:12px;left:12px;color:#fff;background:var(--red);border-radius:6px;padding:5px 9px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;z-index:2}
.menu-card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.menu-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.menu-card h3{font:500 21px/1.15 var(--display);margin:0}
.price{font-size:16px;color:var(--red);font-weight:700;white-space:nowrap;text-align:right}
.price small{display:block;color:#9a948a;font-weight:400;font-size:11px;margin-top:2px}
.description{font-size:14px;line-height:1.5;color:#7d776e;margin:8px 0 16px}
.card-actions{border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.quantity-control{display:flex;align-items:center;gap:10px}
.quantity-control button{width:34px;height:34px;border-radius:50%;background:#f4efe7;color:var(--ink);font-size:20px;line-height:1;display:grid;place-items:center}
.quantity-control button:hover{background:#e9e1d4}
.quantity-control span{font-size:15px;min-width:16px;text-align:center;font-weight:700}
.add-button{background:none;color:var(--red);font-size:14px;font-weight:700;padding:8px 4px}
.add-button span{font-size:18px;vertical-align:-2px;margin-left:4px}
.empty-state{text-align:center;padding:60px 20px}
.empty-state>span{font-size:44px;color:#c4bdb1;display:block}
.empty-state h3{font:500 26px var(--display);margin:10px 0 6px}
.empty-state p{font-size:15px;color:var(--muted)}
.empty-state .button{margin-top:18px}

/* ---------- experience ---------- */
.experience{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;padding-top:20px;padding-bottom:110px}
.experience-copy .lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:460px;margin-bottom:34px}
.feature-list{border-top:1px solid var(--line);margin-bottom:34px}
.feature-list>div{border-bottom:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:center}
.feature-list span{grid-row:1/3;color:var(--red);font-size:18px;font-weight:700}
.feature-list strong{font-size:16px;display:block}
.feature-list small{font-size:14px;color:var(--muted)}
.experience-actions{display:flex;gap:12px;flex-wrap:wrap}
.experience-gallery{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.experience-gallery img{width:100%;height:240px;object-fit:cover;border-radius:14px;box-shadow:var(--shadow)}
.experience-gallery img:first-child{grid-column:1/3;height:300px}
.gallery-note{position:absolute;bottom:-26px;right:14px;background:var(--red);color:#fff;border-radius:12px;padding:16px 22px;box-shadow:var(--shadow);text-align:center}
.gallery-note strong{display:block;font:italic 22px var(--display)}
.gallery-note span{font-size:13px;opacity:.9}

/* ---------- contact ---------- */
.contact-section{padding-bottom:110px}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:56px 7%;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;box-shadow:var(--shadow)}
.address{font:500 17px/1.8 var(--display);color:var(--ink);margin-bottom:26px}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
.contact-details{border-left:1px solid var(--line);padding-left:9%;display:flex;flex-direction:column;justify-content:center;gap:26px}
.contact-details small,.contact-details span{display:block;font-size:12px;color:#8a847b}
.contact-details a,.contact-details strong{display:block;margin-top:4px;font-size:16px;color:var(--ink);font-weight:600}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding:52px max(34px,calc((100% - 1172px)/2)) 26px}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;padding-bottom:42px}
.brand-light small{color:#9c968c}
.footer-top>p{color:#b3aca1;font:italic 19px/1.3 var(--display)}
.footer-links{display:flex;justify-content:flex-end;gap:26px;align-items:center;flex-wrap:wrap}
.footer-links a,.footer-links button{color:#b3aca1;font-size:14px;font-weight:500}
.footer-links a:hover,.footer-links button:hover,.footer-bottom a{color:#fff}
.footer-bottom{border-top:1px solid #3a3630;padding-top:18px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#8f8a80;font-size:13px}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px}

/* ---------- mobile bottom nav & floating cart ---------- */
.mobile-bottom-nav,.floating-cart{display:none}

/* ---------- modals / sheets ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(16,14,12,.6);z-index:40;display:none;align-items:flex-end;justify-content:center}
.modal-backdrop.open{display:flex}
.sheet{background:var(--paper);width:min(100%,600px);max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:14px 26px 28px;animation:slide-up .25s ease}
.sheet-handle{height:5px;border-radius:5px;width:44px;background:#d6cfc4;margin:0 auto 16px}
.sheet-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.sheet-header h2{font-size:32px;margin:0}
.sheet-header .eyebrow{margin-bottom:6px}
.close-button{width:40px;height:40px;border-radius:50%;background:#ece6db;font-size:26px;line-height:1;display:grid;place-items:center}
.cart-body{min-height:80px}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-thumb{height:72px;border-radius:10px}
.cart-item h3{font:500 18px var(--display);margin:0 0 4px}
.cart-item p{font-size:13px;color:var(--muted);margin:0}
.cart-item .quantity-control{margin-top:10px}
.cart-item-total{font-size:15px;font-weight:700;color:var(--red);align-self:start;margin-top:10px;text-align:right}
.remove-item{font-size:13px;text-decoration:underline;color:#8f887c;margin-top:10px}
.empty-cart{text-align:center;padding:46px 0}
.empty-cart span{font-size:52px;color:#cfc7ba;display:block}
.empty-cart h3{font:500 26px var(--display);margin:8px 0 4px}
.empty-cart p{font-size:14px;color:var(--muted)}
.cart-totals{border-top:2px solid var(--ink);margin-top:20px;padding-top:16px}
.total-line{display:flex;justify-content:space-between;font-size:15px;margin:9px 0}
.total-line strong{font-size:16px}
.total-line.grand{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-weight:700}
.total-line.grand strong{color:var(--red);font-size:22px}
.cart-footer .button{margin-top:18px}

/* ---------- forms ---------- */
.checkout-form,.booking-form{display:flex;flex-direction:column;gap:18px}
.checkout-form label,.booking-form label{font-size:14px;font-weight:600;color:#4c4740;display:block}
.checkout-form input,.checkout-form textarea,.checkout-form select,.booking-form input,.booking-form textarea,.booking-form select{display:block;width:100%;border:1.5px solid #ddd6ca;border-radius:10px;padding:13px;background:#fff;outline-color:var(--red);margin-top:6px;font-size:16px;resize:vertical}
.checkout-form fieldset{border:0;padding:0;margin:0}
.checkout-form legend{font-size:15px;font-weight:700;margin-bottom:12px}
.order-types{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.order-types label{position:relative}
.order-types input{position:absolute;opacity:0;pointer-events:none}
.order-types label span{display:block;border:1.5px solid #ddd6ca;border-radius:12px;padding:14px 10px;background:#fff;height:100%;text-align:center;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.order-types input:checked+span{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.order-types b{font-size:15px;display:block}
.order-types small{font-size:12px;color:var(--muted);font-weight:400;margin-top:3px;display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.optional{font-weight:400;color:#9a948a}
.field-error{display:block;color:var(--red);font-size:13px;font-weight:400;margin-top:4px}
.invalid{border-color:var(--red)!important}
.checkout-summary{background:#ece6db;border-radius:12px;padding:16px}
.checkout-summary .total-line{font-size:14px}
.privacy-note{font-size:13px;line-height:1.6;color:#8a847b;margin:0}

/* ---------- confirmation ---------- */
.confirmation-sheet{text-align:center;padding:46px 30px 34px}
.confirmation-mark{width:60px;height:60px;border-radius:50%;background:#e3f0e4;color:#1f8a4c;display:grid;place-items:center;margin:0 auto 22px;font-size:30px}
.confirmation-sheet .eyebrow{justify-content:center}
.confirmation-sheet h2{font-size:36px}
.confirmation-copy{font-size:15px;max-width:380px;margin:0 auto 24px;color:var(--muted)}
.confirmation-details{text-align:left;background:#ece6db;padding:18px;border-radius:12px;margin-bottom:20px;font-size:14px}
.confirmation-details .total-line{margin:5px 0}
.status-pill{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:20px;vertical-align:2px;margin-left:8px}
.confirmation-note{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:#7a5b18;background:#f7eeda;border-radius:8px;padding:9px 11px}
.checkout-form button[disabled]{opacity:.65;pointer-events:none}
.confirmation-actions{display:flex;flex-direction:column;align-items:center;gap:14px}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:80;bottom:90px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:14px 20px;border-radius:10px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100% - 40px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes slide-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes pop{50%{transform:scale(1.25)}}
.cart-pop{animation:pop .3s ease}

/* ---------- order tracking ---------- */
.header-inner .track-menu-link{height:42px;min-height:42px;font-size:14px;padding:0 18px}
.track-page{padding-top:48px;padding-bottom:60px;max-width:1040px}
.track-intro{max-width:620px;margin-bottom:32px}
.track-intro h1{font-size:44px;margin:0 0 14px}
.track-lede{font-size:17px;color:var(--muted);margin:0}
.track-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:26px;align-items:start}
.card-panel{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.track-form{display:flex;flex-direction:column;gap:16px}
.track-form h2{font:500 26px var(--display);margin:0 0 4px}
.track-form label{font-size:14px;font-weight:600;color:#4c4740;display:block}
.track-form input{display:block;width:100%;border:1.5px solid #ddd6ca;border-radius:10px;padding:13px;background:#fff;outline-color:var(--red);margin-top:6px;font-size:16px}
.track-form input.invalid{border-color:var(--red);background:#fdf3f3}
.track-hint{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}
.track-hint b{color:var(--ink)}
.track-panel{display:flex;flex-direction:column;gap:18px}
.track-state{text-align:center;padding:44px 26px}
.track-state-mark{font-size:44px;color:#cfc7ba;display:block;margin-bottom:10px;line-height:1}
.track-state h3{font:500 24px var(--display);margin:0 0 6px}
.track-state p{font-size:14.5px;color:var(--muted);margin:0 auto;max-width:340px}
.track-state-error .track-state-mark{color:var(--red)}
.track-state-error .button{margin-top:20px}
.spinning{display:inline-block;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.track-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.track-status{font:500 30px var(--display);margin:0 0 6px}
.track-sub{font-size:14px;color:var(--muted);margin:0}
.track-refresh{font-size:13.5px;font-weight:700;color:var(--red);padding:8px 0;white-space:nowrap}
.track-refresh[disabled]{color:var(--muted)}
.cancelled-banner{background:#fdeceb;border:1px solid #f3c9c5;color:#8d1b16;border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.5;margin-top:20px}
.cancelled-banner strong{display:block;margin-bottom:3px;font-size:15px}
.track-section{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.track-section h3{font:500 20px var(--display);margin:0 0 16px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:34px 1fr;gap:14px;position:relative;padding-bottom:20px}
.timeline li:last-child{padding-bottom:0}
.timeline li:before{content:'';position:absolute;left:16px;top:36px;bottom:2px;width:2px;background:var(--line)}
.timeline li:last-child:before{display:none}
.timeline .timeline-dot{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-size:14px;font-weight:700;color:#bdb5a8}
.timeline .done .timeline-dot{background:var(--red);border-color:var(--red);color:#fff}
.timeline .current .timeline-dot{box-shadow:0 0 0 5px rgba(196,32,45,.14)}
.timeline h4{margin:5px 0 2px;font-size:15.5px;font-weight:700}
.timeline p{margin:0;font-size:13.5px;color:var(--muted)}
.timeline .pending h4{color:#a49c91;font-weight:600}
.track-item{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.track-item:last-child{border-bottom:0}
.track-item small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.track-details{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.track-details>div{padding:12px 0;border-bottom:1px solid var(--line)}
.track-details span{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.track-details strong{font-size:15px;font-weight:600;word-break:break-word}
.track-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.track-help{text-align:center;margin-top:54px;background:var(--ink);color:#fff;border-radius:20px;padding:44px 26px}
.track-help h2{font:500 28px var(--display);margin:0 0 8px}
.track-help p{color:#c9c3b9;margin:0 auto 22px;font-size:15px;max-width:420px}

/* ---------- desktop sheet ---------- */
@media(min-width:821px){
  .modal-backdrop{align-items:center}
  .sheet{border-radius:22px;margin-bottom:4vh}
  .checkout-sheet,.booking-sheet{width:640px}
  .confirmation-sheet{width:500px}
}

/* ---------- mobile ---------- */
@media(max-width:820px){
  .announcement{font-size:11px;height:32px}
  .site-header{height:78px}
  .header-inner{padding:0 16px}
  .brand img{width:50px;height:50px}
  .brand strong{font-size:17px}
  .brand small{font-size:8px;margin-top:4px}
  .hero-logo{width:76px;height:76px;border-width:5px;top:0;left:0}
  .desktop-nav,.search-trigger{display:none}
  .header-actions{margin-left:auto}
  .cart-pill{height:40px;padding:0 12px}
  .cart-pill span:nth-child(2){display:none}
  .section-pad{padding-left:16px;padding-right:16px}
  .hero{display:block;min-height:0;padding-top:38px;padding-bottom:8px}
  h1{font-size:44px}
  .hero-text{font-size:15px;max-width:100%}
  .hero-meta{margin-top:28px;gap:14px}
  .hero-visual{min-height:330px;margin-top:38px}
  .hero-photo-main{width:82%;height:290px}
  .hero-photo-card{width:56%;height:150px;bottom:10px}
  .hero-photo-mini{width:38%;height:96px;top:6px}
  .hero-chip{bottom:-6px;left:0;padding:11px 14px}
  .menu-section{padding-top:64px;padding-bottom:86px}
  .section-heading{display:block;margin-bottom:24px}
  .section-heading>p{margin-top:14px}
  .menu-toolbar{display:block;margin-bottom:26px}
  .category-tabs{margin-bottom:14px}
  .search-box{width:100%}
  .featured-row{display:flex;overflow-x:auto;margin-right:-16px;padding-right:16px;gap:12px;scrollbar-width:none}
  .featured-row::-webkit-scrollbar{display:none}
  .feature-card{min-width:270px;min-height:190px}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .food-image{height:120px}
  .menu-card-body{padding:13px}
  .menu-card h3{font-size:18px}
  .price{font-size:14px}
  .description{font-size:13px;margin:6px 0 12px}
  .card-actions{padding-top:11px}
  .quantity-control button{width:30px;height:30px}
  .add-button{font-size:13px}
  .experience{display:block;padding-bottom:86px}
  .experience-gallery{margin-top:44px}
  .experience-gallery img,.experience-gallery img:first-child{height:200px}
  .gallery-note{bottom:-22px;right:10px;padding:13px 18px}
  .contact-section{padding-bottom:86px}
  .contact-card{display:block;padding:34px 24px}
  .contact-details{border-left:0;border-top:1px solid var(--line);padding:26px 0 0;margin-top:30px;gap:20px}
  .mobile-bottom-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);height:66px;display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 18px rgba(23,21,18,.07)}
  .mobile-bottom-nav a,.mobile-bottom-nav button{color:#8a847b;font-size:11px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}
  .mobile-bottom-nav .active{color:var(--red);font-weight:600}
  .mobile-bottom-nav a span,.mobile-bottom-nav button>span:first-child{font-size:22px;height:24px;line-height:1}
  .bottom-cart-icon{position:relative}
  .bottom-cart-icon b{position:absolute;right:-12px;top:-4px;background:var(--red);color:#fff;border-radius:50%;font-size:10px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 3px}
  .floating-cart{position:fixed;z-index:25;bottom:78px;left:14px;right:14px;background:var(--ink);color:#fff;height:56px;border-radius:12px;padding:0 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 22px rgba(10,9,8,.35)}
  .floating-cart .cart-icon{color:#fff}
  .floating-cart span:nth-child(2){font-size:14px;text-align:left;flex:1}
  .floating-cart strong{font-size:14px}
  .sheet{padding-left:18px;padding-right:18px}
  .sheet-header h2{font-size:27px}
  .order-types small{font-size:11px}
  .footer-top{display:block;padding-bottom:34px}
  .footer-top>p{margin:26px 0}
  .footer-links{justify-content:flex-start;gap:20px}
  .footer-bottom{display:block;line-height:2.2}
  .footer-bottom span{display:block}
  .toast{bottom:82px}
  /* two columns of inputs are too cramped on a phone, here and in the checkout sheet */
  .form-grid{grid-template-columns:1fr}
  .header-inner .track-menu-link{height:38px;min-height:38px;font-size:13px;padding:0 14px}
  .track-page{padding-top:26px;padding-bottom:92px}
  .track-intro h1{font-size:32px}
  .track-lede{font-size:15.5px}
  .track-layout{grid-template-columns:1fr;gap:18px}
  .card-panel{padding:20px}
  .track-state{padding:34px 20px}
  .track-state h3{font-size:21px}
  .track-status{font-size:25px}
  .track-details{grid-template-columns:1fr}
  .track-actions{flex-direction:column}
  .track-actions .button{width:100%}
  .track-help{margin-top:34px;padding:34px 20px}
  .track-help h2{font-size:23px}
  .mobile-bottom-nav.nav-4{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}