html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
button{font-family:var(--font);cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ── Mobile Top Bar ───────────────────────── */
/* z-index is extremely high to stay above Google Translate's banner (z-index
   ~99) in case any visually overlapping is attempted by Google's inline UI. */
.topbar{
  position:fixed!important;top:0!important;left:0;right:0;z-index:2147483000!important;
  height:var(--header-h);
  background:var(--bg);
  border-bottom:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .75rem 0 1rem;
  gap:.5rem;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.topbar-name{
  font-size:1rem;font-weight:800;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;margin:0 .5rem;
}
.topbar-logo{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:2px solid var(--accent);flex-shrink:0;
}
.topbar-logo-placeholder{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;flex-shrink:0;
}
/* Hamburger */
.ham-btn{
  width:var(--tap-min);height:var(--tap-min);
  background:rgba(var(--text-rgb),.08);border:none;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:0;flex-shrink:0;transition:background .2s;
}
.ham-btn:hover{background:rgba(var(--text-rgb),.15)}
.ham-line{width:20px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.ham-btn.open .ham-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.ham-btn.open .ham-line:nth-child(2){opacity:0;transform:scaleX(0)}
.ham-btn.open .ham-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── Language Switcher (top bar trigger) ───── */
.lang-wrap{position:relative;flex-shrink:0}
.lang-btn{
  height:var(--tap-min);min-width:var(--tap-min);
  padding:0 .55rem;
  background:rgba(var(--text-rgb),.08);
  border:none;border-radius:10px;
  display:inline-flex;align-items:center;gap:.35rem;
  color:var(--text);font-weight:700;font-size:.9rem;
  transition:background .2s;
}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:rgba(var(--text-rgb),.16)}
.lang-btn .lang-flag{font-size:1.1rem;line-height:1}
.lang-btn .lang-code{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.lang-btn .lang-caret{font-size:.55rem;opacity:.7;margin-left:1px}
.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:250;
  width:240px;max-height:min(70vh,440px);overflow-y:auto;
  background:var(--bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  padding:.4rem;
  display:none;
  -webkit-overflow-scrolling:touch;
}
[dir="rtl"] .lang-btn .lang-caret{margin-left:0;margin-right:1px}
.lang-menu.open{display:block;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.lang-menu-title{
  font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  opacity:.5;padding:.45rem .65rem .25rem;
}
.lang-opt{
  display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.6rem .65rem;
  background:none;border:none;color:var(--text);text-align:start;
  border-radius:8px;font-size:.88rem;font-weight:600;
  transition:background .15s;cursor:pointer;
}
.lang-opt:hover,.lang-opt:focus-visible{background:rgba(var(--text-rgb),.08)}
.lang-opt.active{background:rgba(var(--text-rgb),.1);color:var(--accent)}
.lang-opt .lang-opt-flag{font-size:1.15rem;width:24px;text-align:center;line-height:1}
.lang-opt .lang-opt-native{flex:1}
.lang-opt .lang-opt-en{font-size:.7rem;opacity:.55;font-weight:500}
.lang-opt .lang-opt-check{margin-inline-start:auto;color:var(--accent);font-weight:800;opacity:0}
.lang-opt.active .lang-opt-check{opacity:1}

/* ── Drawer Overlay ───────────────────────── */
.drawer-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
  backdrop-filter:blur(2px);
}
.drawer-overlay.open{opacity:1;pointer-events:all}

/* ── Category Drawer ──────────────────────── */
.cat-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:400;
  width:var(--nav-w);max-width:85vw;
  background:var(--bg);
  border-right:1px solid var(--card-border);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  contain:layout style;
  will-change:transform;
}
.cat-drawer.open{transform:translateX(0)}
/* ── Drawer (mobile category navigator) ──────────────────────────────
   Lean, dense, mobile-first. The topbar already shows the brand, so the
   drawer skips a separate restaurant-info row to save vertical space. */
.drawer-header{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:linear-gradient(180deg,rgba(var(--text-rgb),.04),transparent);
}
.drawer-title{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.drawer-close{
  width:36px;height:36px;border-radius:10px;border:none;
  background:rgba(var(--text-rgb),.08);color:var(--text);
  font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .15s,transform .1s;
}
.drawer-close:hover{background:rgba(var(--text-rgb),.14)}
.drawer-close:active{transform:scale(.94)}

/* In-drawer category filter — only shows when there are 5+ categories,
   so small menus don't get extra chrome. Pure CSS toggle of .hidden on
   non-matching rows; no scroll handlers. */
.drawer-filter{
  padding:.6rem 1rem;border-bottom:1px solid var(--card-border);
  position:relative;
}
.drawer-filter input{
  width:100%;padding:.55rem .75rem .55rem 2rem;
  background:rgba(var(--text-rgb),.06);border:1px solid rgba(var(--text-rgb),.08);
  color:var(--text);border-radius:10px;font-size:.85rem;font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.drawer-filter input:focus{outline:none;border-color:var(--accent);background:rgba(var(--text-rgb),.1)}
.drawer-filter::before{
  content:'🔍';position:absolute;left:1.45rem;top:50%;transform:translateY(-50%);
  font-size:.85rem;opacity:.55;pointer-events:none;
}

.drawer-cat-list{flex:1;overflow-y:auto;padding:.4rem 0 .6rem;-webkit-overflow-scrolling:touch}
.drawer-cat-list .drawer-cat-group.no-match,
.drawer-cat-list .drawer-cat-item.no-match{display:none}

.drawer-cat-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem;min-height:var(--tap-min);
  border:none;background:none;color:var(--text);
  width:100%;text-align:left;font-size:.9rem;font-weight:600;
  border-left:3px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.drawer-cat-item:hover{background:rgba(var(--text-rgb),.05);color:var(--accent)}
.drawer-cat-item:active{background:rgba(var(--text-rgb),.08)}
.drawer-cat-item.active{
  background:linear-gradient(90deg,rgba(var(--accent-rgb,201,168,76),.15),rgba(var(--accent-rgb,201,168,76),.04));
  color:var(--accent);
  border-left-color:var(--accent);
}
.drawer-cat-icon{flex-shrink:0;display:inline-flex;width:22px;justify-content:center;font-size:1.05rem;line-height:1}
.drawer-cat-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-cat-count{
  margin-left:auto;flex-shrink:0;
  font-size:.7rem;font-weight:700;
  background:rgba(var(--text-rgb),.08);color:var(--text);opacity:.7;
  padding:.15rem .5rem;border-radius:999px;min-width:1.8rem;text-align:center;
}
.drawer-cat-item.active .drawer-cat-count{
  background:rgba(var(--accent-rgb,201,168,76),.2);color:var(--accent);opacity:1;
}

/* Compact action row at the bottom of the drawer — icon-only chips so we
   don't waste a third of the drawer height on full-width CTAs. */
.drawer-actions{
  display:flex;gap:.5rem;justify-content:center;
  padding:.75rem 1rem;border-top:1px solid var(--card-border);
}
.drawer-action{
  flex:0 0 44px;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--text-rgb),.06);color:var(--text);text-decoration:none;
  border:1px solid rgba(var(--text-rgb),.1);border-radius:12px;
  font-size:1.15rem;line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,transform .1s,border-color .15s;
}
.drawer-action:hover,.drawer-action:focus-visible{background:rgba(var(--text-rgb),.12);border-color:rgba(var(--text-rgb),.22);color:var(--text)}
.drawer-action:active{transform:scale(.96)}
.drawer-action.primary{
  background:var(--accent);color:var(--bg);border-color:transparent;
}
.drawer-action.primary:hover{opacity:.92;color:var(--bg)}

/* ── Opening hours block (drawer) ─ */
.drawer-hours{
  padding:.75rem 1rem;border-top:1px solid var(--card-border);
  display:flex;flex-direction:column;gap:.3rem;
}
.drawer-hours-title{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  opacity:.55;display:flex;align-items:center;gap:.4rem;
}
.drawer-hours-line{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.drawer-hours-time{font-size:.85rem;font-weight:600;color:var(--text)}
.drawer-hours-badge{
  font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:.14rem .5rem;border-radius:999px;line-height:1.3;
}
.drawer-hours-badge.is-open{background:rgba(34,197,94,.16);color:#22c55e}
.drawer-hours-badge.is-closed{background:rgba(239,68,68,.15);color:#ef4444}
.drawer-hours-tz{font-size:.68rem;opacity:.45;letter-spacing:.02em}

.drawer-footer{
  padding:.65rem 1rem env(safe-area-inset-bottom);border-top:1px solid var(--card-border);
  font-size:.7rem;opacity:.4;text-align:center;letter-spacing:.04em;
}

/* ── Sticky Cat Pills (desktop fallback / secondary) ─ */
.cat-pills-bar{
  position:sticky;top:var(--header-h);z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--card-border);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.cat-pills-bar::-webkit-scrollbar{display:none}
.cat-pills{display:flex;gap:.5rem;padding:.6rem .85rem;white-space:nowrap}
.cat-pill{
  background:rgba(var(--text-rgb),.07);color:var(--text);border:none;
  padding:.5rem .95rem;border-radius:999px;font-size:.82rem;
  font-weight:600;font-family:var(--font);transition:all .2s;white-space:nowrap;
  min-height:36px;
}
.cat-pill:hover,.cat-pill.active{background:var(--accent);color:var(--bg)}

/* ── Mobile: hide the category pill bar ─────────────────────────────────────
   On phones, customers use the hamburger drawer (categories list) instead of
   the horizontal pill bar. Hiding it removes redundant chrome and gives more
   vertical room to the actual menu items. */
@media (max-width: 768px) {
  .cat-pills-bar { display: none !important; }
}

/* ── Search bar ───────────────────────────── */
.search-wrap{
  max-width:960px;margin:0 auto;
  padding:.85rem 1rem 0;
  position:relative;
}
.search-input{
  width:100%;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  color:var(--text);font-family:var(--font);
  font-size:.92rem;
  padding:.7rem 2.4rem .7rem 2.4rem;
  border-radius:12px;outline:none;
  transition:border-color .2s,background .2s;
  -webkit-appearance:none;
}
.search-input:focus{border-color:var(--accent);background:rgba(var(--text-rgb),.08)}
.search-input::placeholder{color:var(--text);opacity:.4}
/* Hide the browser's built-in clear/cancel button on type="search" — we have
   our own custom .search-clear button. WebKit, Edge legacy, and IE need
   different selectors, so suppress all of them. */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
.search-input::-ms-clear,
.search-input::-ms-reveal{
  display:none;
  width:0;
  height:0;
}
.search-icon{
  position:absolute;left:1.7rem;top:50%;transform:translateY(-50%);
  opacity:.4;pointer-events:none;font-size:.95rem;
}
.search-clear{
  position:absolute;right:1.55rem;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(var(--text-rgb),.1);color:var(--text);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;font-size:.85rem;
}
.search-clear.visible{display:flex}

/* ── Page Body ────────────────────────────── */
.page-body{padding-top:calc(var(--header-h) + 1px)}

/* ── Restaurant Hero ──────────────────────── */
.rest-hero{
  padding:2.25rem 1.25rem 1.5rem;
  text-align:center;
  background:linear-gradient(180deg,var(--hero-overlay) 0%,transparent 100%);
  border-bottom:1px solid var(--card-border);
}
.hero-logo{
  width:80px;height:80px;border-radius:50%;object-fit:cover;
  border:3px solid var(--accent);margin:0 auto 1rem;
  box-shadow:0 0 0 4px rgba(var(--text-rgb),.08);
}
.hero-logo-placeholder{
  width:80px;height:80px;border-radius:50%;
  background:var(--accent);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:900;margin:0 auto 1rem;
  box-shadow:0 0 0 4px rgba(var(--text-rgb),.08);
}
.hero-name{font-size:1.65rem;font-weight:900;color:var(--accent);margin-bottom:.35rem;line-height:1.2}
.hero-tagline{opacity:.75;font-size:.9rem;margin-bottom:.35rem}
.hero-address{opacity:.55;font-size:.8rem;display:flex;align-items:center;justify-content:center;gap:.3rem;margin-bottom:.9rem;flex-wrap:wrap}
.social-btns{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:.15rem}
.gmb-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--accent);color:var(--bg);
  padding:.55rem 1.25rem;border-radius:999px;
  font-weight:700;font-size:.85rem;border:none;
  transition:opacity .2s,transform .15s;white-space:nowrap;
  min-height:40px;
}
.gmb-btn:hover{opacity:.9;color:var(--bg)}
.gmb-btn:active{transform:scale(.97)}
.social-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(var(--text-rgb),.1);color:var(--text);
  border:1px solid rgba(var(--text-rgb),.18);
  padding:.55rem 1.1rem;border-radius:999px;
  font-weight:700;font-size:.85rem;
  transition:background .2s,color .2s,transform .15s;white-space:nowrap;
  min-height:40px;
}
.social-btn:hover{background:rgba(var(--text-rgb),.2);color:var(--text)}
.social-btn:active{transform:scale(.97)}

/* ── Hero quick-actions (Call / Directions / Share) ─────────────────────
   Mobile-first row of small chips. Inline SVG icons (no extra requests).
   Tap targets meet the 44px minimum. Buttons only render when their
   underlying data (phone / address / share API) is available. */
.hero-actions{
  display:flex;gap:.5rem;justify-content:center;
  margin:.85rem auto .85rem;
  max-width:360px;width:100%;padding:0 .5rem;
}
.hero-action{
  flex:1 1 0;min-width:0;min-height:42px;
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  background:rgba(var(--text-rgb),.05);color:var(--text);
  border:1px solid rgba(var(--text-rgb),.12);
  padding:.5rem .65rem;border-radius:999px;
  font-size:.8rem;font-weight:600;text-decoration:none;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .15s,transform .1s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.hero-action:hover,.hero-action:focus-visible{background:rgba(var(--text-rgb),.1);border-color:rgba(var(--text-rgb),.22);color:var(--text)}
.hero-action:active{transform:scale(.97)}
.hero-action svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-action.copied{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.4);color:#a7f3d0}
@media(max-width:380px){
  .hero-action span:last-child{font-size:.74rem}
  .hero-action{padding:.5rem .45rem;gap:.3rem}
}

/* ── Topbar search shortcut (revealed once user scrolls past the hero
      search bar). Single-tap focus + smooth scroll back to search. */
.topbar-search{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;border:0;
  background:rgba(var(--text-rgb),.08);color:var(--text);
  cursor:pointer;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,transform .1s;
}
.topbar-search:hover{background:rgba(var(--text-rgb),.14)}
.topbar-search:active{transform:scale(.94)}
.topbar-search svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.search-out-of-view .topbar-search{display:inline-flex}

/* ── Skip-to-content link (keyboard / screen-reader users only) ──── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2147483647;
  padding:.55rem 1rem;background:var(--accent);color:var(--bg);
  border-radius:0 0 10px 0;font-weight:700;font-size:.85rem;text-decoration:none;
}
.skip-link:focus{left:0}

/* ── Search count chip ─────────────────────────────────────────── */
.search-count{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:.7rem;font-weight:700;color:var(--text);opacity:.6;
  pointer-events:none;letter-spacing:.02em;
  white-space:nowrap;
}
.search-count.visible{opacity:.85}
[dir="ltr"] .search-count{right:2.6rem}
[dir="rtl"] .search-count{left:2.6rem;right:auto}
/* Hide count while typing has produced 0 results (the no-results block already
   tells the user). Hide when input is empty. */
.search-count:empty{display:none}

/* ── Pills bar scroll affordance (edge fades + bigger taps) ──────
   IMPORTANT: don't override the existing `position:sticky` on .cat-pills-bar.
   Sticky already qualifies as a positioned ancestor for our absolute
   pseudo-elements, so the fades anchor correctly without any override. */
.cat-pills-bar::before,
.cat-pills-bar::after{
  content:'';position:absolute;top:0;bottom:0;width:24px;
  pointer-events:none;z-index:1;opacity:0;transition:opacity .18s;
}
.cat-pills-bar::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.cat-pills-bar::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.cat-pills-bar.can-scroll-left::before{opacity:1}
.cat-pills-bar.can-scroll-right::after{opacity:1}
[dir="rtl"] .cat-pills-bar::before{background:linear-gradient(to left,var(--bg),transparent)}
[dir="rtl"] .cat-pills-bar::after{background:linear-gradient(to right,var(--bg),transparent)}

/* Ensure pills + chips meet the 44px tap-target minimum on small screens */
@media(max-width:520px){
  .cat-pill,.cat-pill-parent,.cat-pill-caret{min-height:40px}
  .dt-filter__chip,.dt-filter__reset,.sp-chip{min-height:40px}
}

/* ── Item badge fallback (no image) ────────────────────────────────
   Default position floats over the image; when the card has no image,
   .item-hl-badge in our partial uses .as-inline so it sits inline in
   the body instead of overlapping the title. */
.item-hl-badge.as-inline{
  position:static !important;
  align-self:flex-start;
  box-shadow:none !important;
  margin-bottom:.25rem;
}


/* Footer review CTA card ───────────────────────────────────────── */
.menu-review-cta{
  max-width:560px;margin:2rem 1rem 0;padding:1.25rem 1.4rem;
  background:linear-gradient(135deg,rgba(var(--accent-rgb,201,168,76),.18),rgba(var(--accent-rgb,201,168,76),.06));
  border:1px solid rgba(var(--accent-rgb,201,168,76),.32);
  border-radius:16px;text-align:center;
}
/* On wider screens, center the card again instead of using mobile side gutters. */
@media(min-width:600px){
  .menu-review-cta{margin:2rem auto 0}
}
.menu-review-cta__title{font-size:1.05rem;font-weight:800;color:var(--accent);margin:0 0 .35rem}
.menu-review-cta__sub{font-size:.82rem;opacity:.78;margin:0 0 1rem;line-height:1.5;max-width:34ch;margin-left:auto;margin-right:auto}
.menu-review-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--accent);color:var(--bg);
  padding:.7rem 1.5rem;border-radius:999px;
  font-weight:800;font-size:.9rem;text-decoration:none;
  min-height:44px;
  transition:opacity .2s,transform .1s;
}
.menu-review-cta__btn:hover{opacity:.92;color:var(--bg)}
.menu-review-cta__btn:active{transform:scale(.97)}

/* On phones, keep the floating scroll-to-top button clear of the CTA card */
@media(max-width:520px){
  .menu-review-cta{margin-bottom:.5rem;padding-bottom:1.5rem}
}

/* ── Mobile: switch social buttons to a clean 2-column grid so we never
   end up with a single orphaned button on its own row. The "Leave a Review"
   CTA spans the full width on top to keep it the obvious primary action. */
@media (max-width: 480px) {
  .social-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    width: 100%;
    max-width: 360px;
    margin: .15rem auto 0;
    padding: 0 .5rem;
  }
  .social-btns .gmb-btn {
    grid-column: 1 / -1;        /* full-width primary CTA */
    justify-content: center;
    width: 100%;
  }
  .social-btns .social-btn {
    justify-content: center;
    width: 100%;
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* ── Translation note (shown when language ≠ en) ── */
.translate-note{
  max-width:960px;margin:.85rem auto 0;
  padding:.55rem .9rem;
  background:rgba(var(--text-rgb),.05);
  border:1px dashed var(--card-border);
  border-radius:10px;
  font-size:.72rem;opacity:.65;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
}
.translate-note .ti{font-size:.9rem}

/* ── Menu Content ─────────────────────────── */
.menu-content{max-width:960px;margin:0 auto;padding:1.25rem 1rem 3rem}
.cat-section{
  margin-bottom:2.4rem;
  scroll-margin-top:calc(var(--header-h) + 64px);
  content-visibility:auto;
  contain-intrinsic-size:0 500px;
}
.cat-heading{
  display:flex;align-items:center;gap:.75rem;
  font-size:1.15rem;font-weight:800;color:var(--accent);
  margin-bottom:1rem;
}
.cat-heading::after{content:'';flex:1;height:1px;background:var(--card-border)}
/* Parent category description */
.cat-desc{font-size:.9rem;line-height:1.5;color:var(--text);opacity:.65;margin:-.5rem 0 .9rem;max-width:72ch;}
/* Category cover image */
.cat-img{width:100%;max-height:180px;object-fit:cover;border-radius:10px;margin-bottom:.9rem;display:block;}
.subcat-img{width:100%;max-height:130px;object-fit:cover;border-radius:8px;margin-bottom:.65rem;display:block;}
/* Schedule / date-range badge — sits inline inside the category heading flex row */
.sched-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;
  padding:.22rem .65rem;border-radius:999px;
  background:rgba(var(--accent-rgb,201,168,76),.13);
  color:var(--accent);border:1px solid rgba(var(--accent-rgb,201,168,76),.3);
}
.sched-badge svg{width:11px;height:11px;flex-shrink:0;fill:currentColor;opacity:.85}

/* ── Subcategory heading (one level under a parent category) ─── */
.subcat-section { margin-top:1.25rem; padding-left:.25rem; }
.subcat-heading {
  display:flex; align-items:center; gap:.6rem;
  font-size:.95rem; font-weight:700; color:var(--text);
  opacity:.92; margin: .25rem 0 .65rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.subcat-heading::before {
  content:''; width:14px; height:2px; background:var(--accent); border-radius:2px; flex-shrink:0;
}
.subcat-heading::after { content:''; flex:1; height:1px; background:var(--card-border); opacity:.5; }

/* Subcategory description — a short blurb under the SANDWICHES / FROMAGES title */
.subcat-desc {
  font-size:.88rem; line-height:1.45;
  color:var(--text); opacity:.66;
  margin:-.25rem 0 .85rem .5rem;
  max-width:62ch;
}

/* Drawer: subcategory entries live inside a collapsible dropdown under their parent. */
.drawer-cat-group { display:flex; flex-direction:column; }
.drawer-cat-row {
  display:flex; align-items:stretch; gap:.25rem;
  border-left:3px solid transparent;
}
.drawer-cat-row .drawer-cat-item { flex:1; min-width:0; border-left:none; }
.drawer-cat-toggle {
  background:transparent; border:none; color:inherit; cursor:pointer;
  width:42px; flex-shrink:0; opacity:.55;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .15s, background .15s;
  font-size:1.05rem;
}
.drawer-cat-toggle:hover { opacity:1; background:rgba(var(--text-rgb),.06); }
.drawer-cat-toggle .chev { transition: transform .2s ease; display:inline-block; }
.drawer-cat-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); color:var(--accent); }

.drawer-sub-list {
  background:rgba(var(--text-rgb),.025);
  border-left:2px solid rgba(var(--text-rgb),.08);
  margin:.1rem 0 .35rem 1.6rem;
  border-radius: 0 8px 8px 0;
  overflow:hidden;
  animation: drawerSubOpen .18s ease-out;
}
@keyframes drawerSubOpen { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

.drawer-cat-item.is-sub {
  padding-left: 1.1rem;
  font-size:.88rem;
  opacity:.85;
}
.drawer-cat-item.is-sub::before { content:none; }

/* When a sub inside the dropdown is the active section, highlight cleanly */
.drawer-cat-item.is-sub.active { background:rgba(201,168,76,.10); }
/* ── Pill dropdown (parent pill owns its subs in a popover) ──────────── */
.cat-pill-group {
  position:relative;
  display:inline-flex;
  flex-shrink:0;
  align-items:stretch;
}
/* Parent pill that owns subs gets a flat right edge so the caret button welds
   onto it visually. */
.cat-pill.cat-pill-parent.has-caret {
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  padding-right:.65rem;
}
.cat-pill-caret {
  background:rgba(var(--text-rgb),.07);
  color:var(--text);
  border:none;
  border-left:1px solid rgba(var(--text-rgb),.12);
  padding:0 .55rem;
  font-size:.72rem; line-height:1;
  border-top-right-radius:999px;
  border-bottom-right-radius:999px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px;
  transition: transform .18s ease, background .15s, color .15s;
  font-family:inherit;
}
.cat-pill-caret:hover { background:rgba(var(--text-rgb),.14); color:var(--accent); }
.cat-pill-group.open .cat-pill-caret { transform: rotate(180deg); background:var(--accent); color:var(--bg); }
/* When the parent pill itself is active, blend the caret with the gold pill */
.cat-pill.cat-pill-parent.active + .cat-pill-caret {
  background:var(--accent); color:var(--bg);
  border-left-color:rgba(0,0,0,.18);
}

.cat-pill-menu {
  position:fixed;            /* fixed so the bar's overflow-x:auto can't clip it */
  top:0; left:0;             /* real position set by JS once opened */
  min-width:180px;
  max-width: 260px;
  background:var(--card-bg, #1f1f33);
  border:1px solid var(--card-border);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  padding:.35rem;
  z-index:60;
  display:none;
  flex-direction:column;
  gap:.1rem;
  animation: pillMenuOpen .14s ease-out;
  /* Make sure the popover isn't clipped by the bar's overflow scroll */
}
@keyframes pillMenuOpen { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }
.cat-pill-group.open .cat-pill-menu { display:flex; }

.cat-pill-menu-item {
  display:flex; align-items:center; gap:.5rem;
  width:100%;
  padding:.55rem .7rem;
  font-size:.85rem; font-weight:600;
  color:var(--text);
  background:transparent;
  border:none; border-radius:8px;
  text-align:left; cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
  transition: background .12s, color .12s;
}
.cat-pill-menu-item:hover { background:rgba(var(--text-rgb),.06); color:var(--accent); }
.cat-pill-menu-item.active { background:rgba(201,168,76,.14); color:var(--accent); }
.cat-pill-menu-count {
  margin-left:auto;
  font-size:.72rem; font-weight:500;
  opacity:.55;
}

/* When a sub inside the dropdown is the active section, mark the parent pill
   visually so the user knows where they are without the popover being open. */
.cat-pill-group.has-active-sub > .cat-pill-parent {
  border-color: var(--accent);
}

@media (max-width: 420px) {
  .cat-pill-menu { min-width: 220px; max-width: 78vw; }
}

/* ── Item Cards ───────────────────────────── */
.items-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
}
@media(min-width:480px){.items-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.items-grid{grid-template-columns:repeat(3,1fr)}}

.menu-item{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;overflow:hidden;
  position:relative; /* anchor for absolute .item-hl-badge */
  display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;
  contain:layout style paint;
}
.menu-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.menu-item.hidden{display:none}

/* Progressive reveal: items past the first batch start hidden. JS un-hides them
   in batches as the user scrolls. content-visibility lets the browser skip
   layout/paint for off-screen cards entirely — huge win for 250-item menus. */
.menu-item.deferred{display:none}
.menu-item.cv-skip{
  content-visibility:auto;
  contain-intrinsic-size:auto 280px;  /* approx card height — keeps scrollbar honest */
}

/* Reveal-batch sentinel — invisible block scroll observer watches */
.reveal-sentinel{height:1px;width:100%;pointer-events:none;}
.reveal-loading{
  text-align:center;padding:1.25rem 1rem;font-size:.85rem;
  opacity:.6;display:none;
}
.reveal-loading.visible{display:block}

/* Mobile: horizontal card layout */
@media(max-width:479px){
  .menu-item.has-img{flex-direction:row;align-items:stretch}
  .menu-item.has-img .item-img-wrap{
    width:120px;min-width:120px;
    aspect-ratio:auto;height:auto;align-self:stretch;
  }
  .menu-item.has-img .item-img-wrap img{width:120px;height:100%;object-fit:cover}
}

.item-img-wrap{aspect-ratio:16/9;overflow:hidden;flex-shrink:0;background:rgba(var(--text-rgb),.04)}
.item-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s;display:block}
.menu-item:hover .item-img-wrap img{transform:scale(1.04)}
.item-body{padding:.9rem;flex:1;display:flex;flex-direction:column;gap:.3rem}
.item-name{font-weight:700;font-size:.95rem;line-height:1.35}
.item-desc{font-size:.78rem;opacity:.65;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.item-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem}
.item-price{font-size:1.05rem;font-weight:800;color:var(--accent)}
.item-badge{font-size:.65rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;background:rgba(var(--text-rgb),.08);opacity:.7;text-transform:uppercase;letter-spacing:.05em}
.item-badge-featured{background:rgba(var(--accent-rgb,201,168,76),.18);color:var(--accent);opacity:1;border:1px solid rgba(var(--accent-rgb,201,168,76),.35)}

/* When a category has been entirely filtered out by search */
.cat-section.empty{display:none}

/* ── Empty State ──────────────────────────── */
.empty-state{text-align:center;padding:4rem 1rem;opacity:.6}
.empty-state .icon{font-size:3rem;margin-bottom:1rem}
.empty-state h2{font-size:1.25rem;margin-bottom:.5rem}
.empty-state p{font-size:.875rem;opacity:.75}
.no-results{display:none;text-align:center;padding:2.5rem 1rem;opacity:.6}
.no-results.visible{display:block}

/* ── Footer ───────────────────────────────── */
.menu-footer{
  text-align:center;padding:1.5rem 1rem env(safe-area-inset-bottom);
  border-top:1px solid var(--card-border);
  opacity:.45;font-size:.75rem;line-height:1.8;
}

/* ── Scroll to top btn ────────────────────── */
.scroll-top{
  position:fixed;bottom:calc(1.25rem + env(safe-area-inset-bottom));right:1.25rem;z-index:150;
  width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:var(--on-accent,var(--bg));
  border:none;font-size:1.1rem;font-weight:800;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .15s;
  display:flex;align-items:center;justify-content:center;
}
.scroll-top:active{transform:scale(.93)}
.scroll-top.visible{opacity:1;pointer-events:all}

/* ── Reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Skeleton loader ──────────────────────── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── Google Translate widget: suppress its UI but keep engine alive ─────────
   Google Translate injects a top banner ("Translated to Thai — Show original")
   that shifts the body down and overlaps our fixed top bar (hamburger, logo,
   language switcher). We hide only the visible UI — the widget mount point
   MUST stay rendered (not display:none) or the translation engine won't init. */
#google_translate_element{
  position:absolute!important;
  left:-9999px!important;top:-9999px!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;
  opacity:0!important;pointer-events:none!important;
}
.goog-logo-link,
.goog-te-gadget-icon{display:none!important}

/* Hide the top "Translated to X" banner only — NOT the hidden engine iframes
   (those have class `skiptranslate` but no `goog-te-banner-frame` and are
   required for translation to function). */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.goog-te-ftab,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-te-spinner-pos,
.goog-te-menu-frame{display:none!important;visibility:hidden!important;height:0!important;width:0!important;opacity:0!important;pointer-events:none!important}

/* Google Translate forcibly sets `body { top: 40px; position: relative }`
   via inline style to make room for its banner. We override with !important on
   every variation so the page stays flush with the viewport. The JS watchdog
   also strips these inline styles as a second layer of defense. */
html,
html.translated-ltr,
html.translated-rtl{margin-top:0!important;top:0!important}
body,
html.translated-ltr body,
html.translated-rtl body,
.translated-ltr body,
.translated-rtl body{
  top:0!important;
  position:static!important;
  margin-top:0!important;
  min-height:100vh!important;
}

.goog-tooltip,.goog-tooltip:hover{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important;box-sizing:border-box!important}
/* The widget's visible UI (the "Select Language" dropdown) is kept rendered
   but invisible — #google_translate_element is already positioned off-screen,
   so we only need to mute its in-flow look. */
.goog-te-gadget-simple{border:none!important;background:transparent!important}
/* Google wraps every translated word in <font style="vertical-align: inherit;">
   which can subtly shift line-heights — neutralise it. */
font[style*="vertical-align"]{vertical-align:baseline!important;background:transparent!important}
/* "Translating…" overlay we show during language switch */
.translate-loader{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.95rem;
  flex-direction:column;gap:.85rem;
}
.translate-loader.visible{display:flex}
.translate-loader .spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(var(--text-rgb),.25);border-top-color:#fff;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── BULLETPROOF Google Translate banner suppression (last in cascade) ─────
   Goggle Translate adds class `translated-ltr` (or `-rtl`) to <html> and sets
   inline `body { top: 40px; position: relative }` to make room for a top
   "Translated to X — Show original" banner iframe. That banner overlaps our
   fixed top bar (hamburger + logo + language switcher).

   These rules have to win against Google's inline styles, so we use both
   maximum specificity AND !important on every single property. Because these
   rules appear last in the cascade, they're applied last — overriding any
   earlier conflicting rules. */
html[lang] body,
html.translated-ltr body,
html.translated-rtl body,
html body{
  top:0px!important;
  position:static!important;
  margin-top:0px!important;
  padding-top:0px!important;
}
/* Banner iframe — neutralize regardless of where Google injects it */
html body > iframe.goog-te-banner-frame,
html body > .goog-te-banner-frame,
body > iframe.skiptranslate.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame{
  display:none!important;
  visibility:hidden!important;
  height:0px!important;
  max-height:0px!important;
  min-height:0px!important;
  width:0px!important;
  max-width:0px!important;
  opacity:0!important;
  pointer-events:none!important;
  position:absolute!important;
  top:-9999px!important;
  left:-9999px!important;
  z-index:-1!important;
}

/* ── RTL Overrides (Arabic + other RTL locales) ───────────────────────────
   The base layout uses physical CSS properties (left/right, margin-left,
   border-left, etc.). When <html dir="rtl">, we flip the directional
   properties so the layout mirrors correctly. */
[dir="rtl"] .cat-drawer{
  left:auto; right:0;
  border-right:none; border-left:1px solid var(--card-border);
  transform:translateX(100%);
}
[dir="rtl"] .cat-drawer.open{transform:translateX(0)}
[dir="rtl"] .drawer-cat-item{
  text-align:right;
  border-left:none; border-right:3px solid transparent;
}
[dir="rtl"] .drawer-cat-item.active{
  border-left-color:transparent; border-right-color:var(--accent);
}
[dir="rtl"] .drawer-cat-count{margin-left:0; margin-right:auto}
[dir="rtl"] .drawer-cat-row{border-left:none; border-right:3px solid transparent}
[dir="rtl"] .drawer-cat-row .drawer-cat-item{border-right:none}
[dir="rtl"] .drawer-sub-list{
  border-left:none; border-right:2px solid rgba(var(--text-rgb),.08);
  margin:.1rem 1.6rem .35rem 0;
  border-radius:8px 0 0 8px;
}
[dir="rtl"] .drawer-cat-item.is-sub{padding-left:0; padding-right:1.1rem}
[dir="rtl"] .subcat-section{padding-left:0; padding-right:.25rem}
[dir="rtl"] .subcat-desc{margin:-.25rem .5rem .85rem 0}

[dir="rtl"] .search-icon{left:auto; right:1.7rem}
[dir="rtl"] .search-clear{right:auto; left:1.55rem}

[dir="rtl"] .cat-pill.cat-pill-parent.has-caret{
  border-top-right-radius:999px; border-bottom-right-radius:999px;
  border-top-left-radius:0; border-bottom-left-radius:0;
  padding-right:.95rem; padding-left:.65rem;
}
[dir="rtl"] .cat-pill-caret{
  border-left:none; border-right:1px solid rgba(var(--text-rgb),.12);
  border-top-right-radius:0; border-bottom-right-radius:0;
  border-top-left-radius:999px; border-bottom-left-radius:999px;
}
[dir="rtl"] .cat-pill-menu-item{text-align:right}
[dir="rtl"] .cat-pill-menu-count{margin-left:0; margin-right:auto}

[dir="rtl"] .scroll-top{right:auto; left:1.25rem}

[dir="rtl"] .topbar{padding:0 1rem 0 .75rem}

/* Item card details that use physical alignment */
[dir="rtl"] .item-body{text-align:right}
[dir="rtl"] .cat-heading,
[dir="rtl"] .subcat-heading{text-align:right}

/* The "Show more" / "Back to top" floating actions and any auto-margin
   utilities used inside drawer rows. */
[dir="rtl"] .lang-opt .lang-opt-check{margin-inline-start:auto}

/* ── Item detail bottom sheet ─────────────────────────────────────────────
   Tap a menu card → slide-up sheet with the full photo, unclamped
   description, dietary tags and price. Mobile-first; on wide screens it
   becomes a centered dialog. */
.menu-item{cursor:pointer}
.menu-item:active{transform:scale(.985);transition:transform .08s}

.item-sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
  z-index:1200;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.item-sheet-backdrop.open{opacity:1;pointer-events:auto}

.item-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:1201;
  background:var(--bg);color:var(--text);
  border-top-left-radius:18px;border-top-right-radius:18px;
  box-shadow:0 -8px 40px rgba(0,0,0,.35);
  max-height:88dvh;display:flex;flex-direction:column;
  transform:translateY(105%);transition:transform .28s cubic-bezier(.32,.72,.28,1);
  touch-action:pan-y;overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom,0);
  /* When closed the desktop variant is opacity:0 but still centered over
     the page — without this it silently eats clicks on the cards below. */
  pointer-events:none;
}
.item-sheet.open{transform:translateY(0);pointer-events:auto}
.item-sheet.dragging{transition:none}

.item-sheet-grab{
  flex:0 0 auto;padding:.55rem 0 .35rem;display:flex;justify-content:center;cursor:grab;
}
.item-sheet-grab::before{
  content:"";width:42px;height:4px;border-radius:999px;
  background:rgba(var(--text-rgb),.28);
}
.item-sheet-close{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  width:var(--tap-min);height:var(--tap-min);border-radius:999px;border:none;
  background:rgba(var(--text-rgb),.1);color:var(--text);
  font-size:1.05rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
[dir="rtl"] .item-sheet-close{right:auto;left:.6rem}

.item-sheet-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}

.item-sheet-img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  background:rgba(var(--text-rgb),.06);
}
/* display:block above would defeat the [hidden] attribute for items
   without a photo — re-assert it or the sheet shows a broken image. */
.item-sheet-img[hidden]{display:none}
.item-sheet-body{padding:1rem 1.15rem 1.4rem}
.item-sheet-badge{
  display:inline-flex;align-items:center;gap:.3rem;margin-bottom:.5rem;
  padding:.24rem .65rem;border-radius:999px;font-size:.74rem;font-weight:700;line-height:1;
}
.item-sheet-name{font-size:1.28rem;font-weight:800;line-height:1.25;margin:0 0 .35rem;padding-inline-end:2.2rem}
.item-sheet-price{font-size:1.12rem;font-weight:800;color:var(--accent);margin:.15rem 0 .6rem}
.item-sheet-desc{font-size:.95rem;line-height:1.62;opacity:.92;white-space:pre-line;margin:0 0 .75rem}
.item-sheet-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.25rem}

/* Wide screens: centered card instead of full-width sheet */
@media (min-width:720px){
  .item-sheet{
    left:50%;right:auto;bottom:auto;top:50%;width:min(560px,92vw);
    border-radius:18px;max-height:84vh;
    transform:translate(-50%,-46%) scale(.96);opacity:0;
    transition:transform .2s ease,opacity .2s ease;
  }
  .item-sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .item-sheet-grab{display:none}
}

@media (prefers-reduced-motion:reduce){
  .item-sheet,.item-sheet-backdrop{transition:none}
  .menu-item:active{transform:none}
}

/* ── Compact list layout (per-restaurant card_style = "list") ─────────────
   Horizontal rows: text left, square thumbnail right (auto-flips in RTL via
   row-reverse + logical margins). ~3-4 dishes per phone screen instead of
   ~1.5 with photo cards. Tap still opens the item detail sheet. */
body.layout-list .items-grid{grid-template-columns:1fr;gap:.6rem}
@media(min-width:768px){
  body.layout-list .items-grid{grid-template-columns:repeat(2,1fr)}
}

body.layout-list .menu-item,
body.layout-list .menu-item.has-img{flex-direction:row-reverse;align-items:stretch;border-radius:12px}
body.layout-list .menu-item:hover{transform:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}

/* Specificity note: these intentionally out-rank the legacy
   "@media(max-width:479px) .menu-item.has-img …" horizontal-card rules. */
body.layout-list .menu-item.has-img .item-img-wrap,
body.layout-list .menu-item .item-img-wrap{
  flex:0 0 80px;width:80px;min-width:80px;height:80px;aspect-ratio:1/1;
  border-radius:10px;overflow:hidden;
  margin:.7rem;margin-inline-start:0;
  align-self:center;
}
body.layout-list .menu-item.has-img .item-img-wrap img,
body.layout-list .menu-item .item-img-wrap img{width:100%;height:100%;object-fit:cover}

body.layout-list .item-body{padding:.7rem .85rem;gap:.25rem;min-width:0}
body.layout-list .item-name{font-size:.98rem}
body.layout-list .item-desc{-webkit-line-clamp:2}
body.layout-list .item-footer{margin-top:.3rem}

/* Inline highlight badge (rendered inside .item-body in list mode) */
body.layout-list .item-hl-badge.as-inline{margin-bottom:.15rem}

/* Slightly tighter dietary chips so rows stay compact */
body.layout-list .dt-badge-row{gap:.3rem}

/* ── Guest order list ──────────────────────────────────────────────────────
   Selection list with totals — NOT online ordering. Floating bar at the
   bottom, + buttons on cards, steppers in the sheets. */

/* + button on each card (pushed to the end of the footer row) */
.item-add-btn{
  margin-inline-start:auto;flex-shrink:0;
  width:28px;height:28px;min-width:28px;aspect-ratio:1/1;border-radius:999px;border:none;
  background:var(--accent);color:var(--on-accent,#fff);
  font-size:1.05rem;font-weight:800;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  position:relative;
  transition:transform .12s;
  -webkit-tap-highlight-color:transparent;
}
/* Invisible hit-area extension: visually 28px (subordinate to the price),
   but the touch target stays a comfortable ~44px. */
.item-add-btn::before{content:'';position:absolute;inset:-8px;border-radius:999px}
/* Desktop: pointer is precise, so the button can be even more discreet. */
@media (min-width:768px){
  .item-add-btn{width:24px;height:24px;min-width:24px;font-size:.95rem}
  .item-add-qty{font-size:.78rem}
}
.item-add-btn:active{transform:scale(.88)}
.item-add-btn.has-qty{box-shadow:0 0 0 2px rgba(var(--text-rgb),.25)}
.item-add-qty{font-size:.85rem;font-weight:800;color:var(--on-accent,#fff);font-variant-numeric:tabular-nums}
@keyframes ol-pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.item-add-btn.pop{animation:ol-pop .25s ease}

/* Floating "My list" bar */
.ol-bar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(.9rem + env(safe-area-inset-bottom,0));
  z-index:1100;
  display:flex;align-items:center;gap:.6rem;
  max-width:min(560px,calc(100vw - 5.5rem));
  padding:.7rem 1.1rem;border:none;border-radius:999px;
  background:var(--accent);color:var(--on-accent,#fff);
  font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  -webkit-tap-highlight-color:transparent;
  animation:ol-bar-in .25s ease;
}
.ol-bar[hidden]{display:none}
@keyframes ol-bar-in{from{transform:translate(-50%,120%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.ol-bar:active{transform:translateX(-50%) scale(.97)}
.ol-bar-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 .35rem;border-radius:999px;
  background:var(--on-accent,#fff);color:var(--accent);
  font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.ol-bar-total{opacity:.85;font-weight:800}
.ol-bar-cta{margin-inline-start:.2rem;opacity:.9}

/* Lift the scroll-top button above the bar when it's visible */
body.ol-bar-visible .scroll-top{bottom:calc(4.4rem + env(safe-area-inset-bottom,0))}

/* Steppers (shared by detail sheet + list sheet) */
.ol-stepper{display:inline-flex;align-items:center;gap:.55rem}
/* display values above/below defeat the [hidden] attribute — re-assert it,
   or the detail sheet shows BOTH the add button and the stepper at once. */
.ol-stepper[hidden],.ol-add-btn[hidden]{display:none}
.ol-step{
  width:34px;height:34px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.25);
  background:rgba(var(--text-rgb),.07);color:var(--text);
  font-size:1.15rem;font-weight:800;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.ol-step:active{transform:scale(.9)}
.ol-step-qty{min-width:1.4ch;text-align:center;font-weight:800;font-size:1.05rem}
.ol-step-note{font-size:.85rem;opacity:.7}
.ol-stepper.sm .ol-step{width:30px;height:30px;font-size:1rem}

/* Add row inside the item detail sheet */
.item-sheet-addrow{margin-top:.9rem}
.item-sheet-addrow .ol-stepper{padding:.35rem 0;min-height:44px}
.ol-add-btn{
  width:100%;padding:.85rem 1rem;border:none;border-radius:12px;
  background:var(--accent);color:var(--on-accent,#fff);
  font-family:inherit;font-size:1rem;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  -webkit-tap-highlight-color:transparent;
}
.ol-add-btn:active{transform:scale(.98)}

/* List sheet */
.ol-sheet-note{font-size:.88rem;opacity:.75;line-height:1.5;margin:.2rem 0 .9rem}
.ol-rows{margin-bottom:.5rem}
.ol-row{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem 0;border-bottom:1px dashed rgba(var(--text-rgb),.14);
}
.ol-row:last-child{border-bottom:0}
.ol-row-name{flex:1;min-width:0;font-weight:600;font-size:.95rem;line-height:1.35}
.ol-row-price{font-weight:800;color:var(--accent);font-size:.95rem;white-space:nowrap}
.ol-empty{font-size:.92rem;opacity:.7;padding:.8rem 0 .4rem}
.ol-total-row{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:.8rem 0 .2rem;margin-top:.3rem;
  border-top:1px solid rgba(var(--text-rgb),.18);
  font-size:1.05rem;font-weight:800;
}
.ol-total-value{color:var(--accent);font-size:1.2rem}
.ol-disclaimer{font-size:.74rem;opacity:.55;line-height:1.5;margin:.6rem 0 .9rem}
.ol-clear-btn{
  width:100%;padding:.7rem 1rem;border-radius:12px;cursor:pointer;
  border:1px solid rgba(var(--text-rgb),.2);
  background:transparent;color:var(--text);
  font-family:inherit;font-size:.9rem;font-weight:700;
  transition:background .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.ol-clear-btn.armed{background:rgba(226,75,74,.15);border-color:rgba(226,75,74,.55);color:#e24b4a}

@media (prefers-reduced-motion:reduce){
  .ol-bar,.item-add-btn.pop{animation:none}
}