/* Customer-facing menu. Themed per venue through --brand / --brand-ink set inline on <html>. */
@layer pages {
  body.public { background: var(--bg); padding-block-end: 6rem; }
  .container { inline-size: min(100% - 2 * var(--gutter), 64rem); margin-inline: auto; }
  .container-s { inline-size: min(100% - 2 * var(--gutter), 38rem); margin-inline: auto; }
  .icon-btn { display: inline-grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; border: 0; background: color-mix(in oklab, var(--surface) 82%, transparent); color: var(--text); backdrop-filter: blur(8px); box-shadow: var(--shadow-1); }
  .icon-btn:hover { background: var(--surface); }

  /* ---- hero */
  .hero { position: relative; color: #fff; padding-block: var(--s-4) var(--s-6); isolation: isolate;
    background: linear-gradient(160deg, var(--brand), color-mix(in oklab, var(--brand) 60%, #000)); }
  .hero.has-cover { background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .18) 70%), var(--cover) center / cover, var(--brand); min-block-size: min(46dvh, 24rem); display: grid; align-content: space-between; }
  .hero:not(.has-cover)::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: radial-gradient(circle at 20% 20%, #fff 0 2px, transparent 3px) 0 0 / 28px 28px; }
  .hero-bar { display: flex; justify-content: space-between; align-items: center; }
  .langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgb(255 255 255 / .22); backdrop-filter: blur(8px); }
  .langs a { padding: .3rem .75rem; border-radius: var(--r-pill); text-decoration: none; font-weight: 700; font-size: var(--fs-xs); color: #fff; }
  .langs a[aria-current="true"] { background: #fff; color: #111; }
  .hero-inner { display: grid; justify-items: start; gap: var(--s-2); margin-block-start: var(--s-5); }
  .hero .logo { inline-size: 5.25rem; block-size: 5.25rem; border-radius: 24px; object-fit: cover; background: #fff; box-shadow: var(--shadow-2); border: 3px solid rgb(255 255 255 / .9); }
  .logo-fallback { display: grid; place-items: center; font-size: 2.2rem; font-weight: 800; color: var(--brand); background: #fff; }
  .hero h1 { font-size: var(--fs-3xl); letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 2px 16px rgb(0 0 0 / .25); }
  .tagline { font-size: var(--fs-l); opacity: .95; max-inline-size: 36rem; }
  .pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-2); }
  .pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: var(--r-pill); font-size: var(--fs-s); font-weight: 600; text-decoration: none; color: #fff; background: rgb(255 255 255 / .2); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .28); }
  .pill .dot { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: currentColor; }
  .pill.ok { background: #16a34a; border-color: transparent; } .pill.closed { background: rgb(0 0 0 / .45); }
  .pill.brand { background: #fff; color: var(--brand); }
  a.pill:hover { background: rgb(255 255 255 / .32); }

  .announce { display: flex; gap: .6rem; align-items: center; margin-block-start: var(--s-4); padding: .75rem 1rem; border-radius: var(--r-m); background: var(--brand-soft); color: var(--text); font-weight: 600; font-size: var(--fs-s); }
  .announce.muted { background: var(--surface-2); font-weight: 500; color: var(--muted); }
  .announce.warn { background: color-mix(in srgb, var(--warn, #d97706) 16%, var(--surface)); }
  .mod-group { border: 0; padding: 0; margin: 0; display: grid; gap: .3rem; }
  .mod-group legend { font-weight: 700; padding: 0; margin-block-end: .25rem; }
  .mod-opt { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); cursor: pointer; }
  .mod-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
  .service-bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-block-start: var(--s-3); padding: .6rem .9rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
  .service-bar .row { gap: .4rem; flex-wrap: wrap; }

  /* ---- sticky categories */
  .cats { position: sticky; inset-block-start: 0; z-index: 20; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-block-end: 1px solid var(--border); margin-block-start: var(--s-4); }
  .cats-inner { display: flex; align-items: center; gap: var(--s-2); padding-block: .55rem; }
  .cats-inner .icon-btn { background: var(--surface-2); box-shadow: none; flex: none; }
  .cats-scroll { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; flex: 1; scroll-behavior: smooth; }
  .cats-scroll::-webkit-scrollbar { display: none; }
  .cat-chip { flex: none; padding: .45rem 1rem; border-radius: var(--r-pill); text-decoration: none; font-weight: 700; font-size: var(--fs-s); color: var(--muted); background: transparent; border: 1px solid transparent; transition: background .2s, color .2s; white-space: nowrap; }
  .cat-chip:hover { color: var(--text); background: var(--surface-2); }
  .cat-chip[aria-current="true"] { background: var(--brand); color: var(--brand-ink); }
  .search-row { padding-block-end: .6rem; }

  /* ---- menu */
  .menu { display: grid; gap: var(--s-6); padding-block-start: var(--s-5); }
  .cat { scroll-margin-block-start: 4.5rem; display: grid; gap: var(--s-3); }
  .cat > h2 { font-size: var(--fs-xl); letter-spacing: -.02em; }
  .group { font-size: var(--fs-m); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-block-start: var(--s-2); }
  .items { display: grid; gap: var(--s-3); }
  @media (min-width: 50rem) { .items { grid-template-columns: 1fr 1fr; } }
  .item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: stretch; padding: var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow-1); transition: transform .15s var(--ease), box-shadow .15s; }
  .item:hover { box-shadow: var(--shadow-2); }
  .item-body { display: grid; align-content: start; gap: .3rem; text-align: start; background: none; border: 0; padding: .1rem .2rem; min-inline-size: 0; }
  .item-name { font-weight: 700; font-size: var(--fs-m); line-height: 1.25; }
  .item-desc { color: var(--muted); font-size: var(--fs-s); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-block-start: auto; padding-block-start: .3rem; }
  .price { font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--fs-m); }
  .price small { font-weight: 500; color: var(--muted); }
  .price.big { font-size: var(--fs-xl); }
  .tag { padding: .1rem .5rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--surface-3); color: var(--muted); }
  .tag-vegan, .tag-vegetarian { background: var(--ok-bg); color: var(--ok); } .tag-spicy { background: var(--danger-bg); color: var(--danger); } .tag-gluten_free { background: var(--info-bg); color: var(--info); } .tag-new, .tag-bestseller { background: var(--warn-bg); color: var(--warn); }
  .flag { padding: .1rem .55rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; }
  .flag.out { background: var(--danger-bg); color: var(--danger); } .flag.low { background: var(--warn-bg); color: var(--warn); }
  .item-media { position: relative; inline-size: 6.5rem; min-block-size: 5.5rem; align-self: stretch; display: grid; }
  .item-media img { inline-size: 100%; block-size: 100%; min-block-size: 5.5rem; max-block-size: 7rem; object-fit: cover; border-radius: var(--r-m); background: var(--surface-3); }
  .add { position: absolute; inset-block-end: -.5rem; inset-inline-end: -.5rem; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; box-shadow: var(--shadow-2); transition: transform .12s var(--ease); }
  .item-media:not(:has(img)) .add { position: static; align-self: center; justify-self: end; }
  .add:active { transform: scale(.88); }
  .add.pop { animation: pop-add .35s var(--ease); }
  @keyframes pop-add { 40% { transform: scale(1.25); } }
  .item.is-out { opacity: .6; } .item.is-out img { filter: grayscale(1); }
  .item.is-out .add { display: none; }

  /* ---- info */
  .info-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .info-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }
  .info-card h3 { font-size: var(--fs-l); display: flex; align-items: center; gap: .5rem; }
  .info-card.about { grid-column: 1 / -1; } .info-card.about img { border-radius: var(--r-m); max-block-size: 18rem; inline-size: 100%; object-fit: cover; }
  .hours > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: .3rem 0; border-block-end: 1px dashed var(--border); font-size: var(--fs-s); }
  .hours dt { color: var(--muted); } .hours dd { text-align: end; font-variant-numeric: tabular-nums; } .hours .today { font-weight: 800; color: var(--brand); } .hours .today dt { color: var(--brand); }
  .contacts { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
  .contacts li { display: flex; gap: .6rem; align-items: flex-start; } .contacts .i { color: var(--brand); margin-block-start: .15rem; }
  .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-6); color: var(--muted); font-size: var(--fs-s); }

  /* ---- cart bar */
  .cartbar { position: fixed; inset-inline: var(--s-3); inset-block-end: max(var(--s-3), env(safe-area-inset-bottom)); z-index: 30; max-inline-size: 36rem; margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); padding: .8rem 1.1rem; border: 0; border-radius: var(--r-xl);
    background: var(--brand); color: var(--brand-ink); font-weight: 800; box-shadow: var(--shadow-3); animation: slide-up .3s var(--ease); }
  .cartbar-count { min-inline-size: 1.9rem; block-size: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .22); }
  .cartbar-label { text-align: start; }
  .cartbar-total { font-variant-numeric: tabular-nums; }
  .cartbar.bump { animation: bump .3s var(--ease); } @keyframes bump { 50% { transform: scale(1.04); } }

  /* ---- sheets */
  dialog.pub-sheet { inline-size: min(100vw, 38rem); max-block-size: 94dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; flex-direction: column; overflow: hidden; }
  dialog.pub-sheet[open] { display: flex; }
  .sheet-media img, .sheet-media .ph { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--surface-3); }
  .sheet-media video { inline-size: 100%; aspect-ratio: 16 / 10; background: #000; display: block; }
  .sheet-media iframe { inline-size: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
  .sheet-media:empty { display: none; }
  .sheet-close { position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3); z-index: 3; }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5) var(--s-2); }
  .sheet-body { padding: var(--s-4) var(--s-5); overflow-y: auto; display: grid; gap: var(--s-3); align-content: start; flex: 1; overscroll-behavior: contain; }
  .sheet-body h2 { font-size: var(--fs-xl); }
  .sheet-body > .row:first-child { padding-inline-end: 3rem; flex-wrap: nowrap; }
  .sheet-media + .sheet-close { background: rgb(0 0 0 / .45); color: #fff; }
  .sheet-foot { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-5) max(var(--s-3), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--border); background: var(--surface); }
  .like { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-weight: 700; }
  .like[aria-pressed="true"] { color: var(--danger); border-color: var(--danger); } .like[aria-pressed="true"] .i { fill: currentColor; }
  .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
  .allergen { padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); font-size: var(--fs-xs); font-weight: 700; }
  .comment-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); margin-block: var(--s-3); }
  .comment-list li { padding: .6rem .8rem; border-radius: var(--r-m); background: var(--surface-2); font-size: var(--fs-s); } .comment-list strong { display: block; font-size: var(--fs-xs); }
  .cart-lines { list-style: none; padding: 0; display: grid; }
  .cart-lines li { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding: .7rem 0; border-block-end: 1px solid var(--border); }
  .cart-lines .q { font-weight: 800; min-inline-size: 1.8rem; }
  .cart-lines .controls { grid-column: 2 / -1; display: flex; gap: var(--s-2); align-items: center; }
  .cart-lines .stepper button { inline-size: 2rem; block-size: 2rem; } .cart-lines .stepper output { min-inline-size: 1.5rem; }
  .seg-wrap { flex-wrap: wrap; } .seg-wrap button { padding: .5rem .9rem; }
  .totals { display: grid; gap: .35rem; } .totals > div { display: flex; justify-content: space-between; gap: var(--s-3); } .totals dt { color: var(--muted); } .totals dd { font-variant-numeric: tabular-nums; font-weight: 600; }
  .totals .grand { font-size: var(--fs-l); padding-block-start: .5rem; border-block-start: 1px solid var(--border); } .totals .grand dt, .totals .grand dd { color: var(--text); font-weight: 800; }
  .field.invalid .input, .field.invalid .select, .field.invalid .textarea { border-color: var(--danger); }
  @media (min-width: 42rem) { dialog.pub-sheet { border-radius: var(--r-xl); margin: auto; inset: 0; } }

  /* ---- PIN gate and tracking */
  body.public:has(.gate) { padding: 0; }
  .gate { min-block-size: 100dvh; display: grid; place-items: center; padding: var(--gutter); background: linear-gradient(160deg, var(--brand), color-mix(in oklab, var(--brand) 55%, #000)); }
  .gate-card { inline-size: min(24rem, 100%); display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-xl); background: var(--surface); text-align: center; justify-items: center; box-shadow: var(--shadow-3); }
  .gate-card .logo { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 22px; } .gate-card .field, .gate-card .input { inline-size: 100%; }
  .pin-input { text-align: center; font-size: var(--fs-xl); letter-spacing: .4em; }
  .track { display: grid; gap: var(--s-4); padding-block: var(--s-4) var(--s-7); }
  .track-head { display: flex; justify-content: space-between; align-items: center; } .back { display: inline-flex; gap: .4rem; align-items: center; text-decoration: none; font-weight: 700; }
  .track-card { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
  .track-num { font-size: var(--fs-3xl); font-weight: 900; letter-spacing: -.04em; color: var(--brand); line-height: 1; }
  .steps { list-style: none; padding: 0; display: grid; gap: .1rem; margin-block-start: var(--s-3); }
  .steps li { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; color: var(--faint); font-weight: 600; position: relative; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: .85rem; inset-block-start: 2.1rem; block-size: .9rem; inline-size: 2px; background: var(--border-strong); }
  .steps .dot { inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: transparent; flex: none; }
  .steps .done { color: var(--text); } .steps .done .dot { background: var(--brand); color: var(--brand-ink); } .steps .done::after { background: var(--brand); }
  .steps .now { color: var(--text); font-weight: 800; } .steps .now .dot { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 5px color-mix(in oklab, var(--brand) 25%, transparent); animation: pulse 1.6s infinite; }
  .track[data-status="completed"] .steps li { color: var(--text); } .track[data-status="completed"] .steps .dot { background: var(--brand); color: var(--brand-ink); }
}