/* ============ Wimbis — flat red theme ============ */
:root {
    --red-900: #5c0f0b;
    --red-800: #7d140d;
    --red-700: #9e1b12;
    --red-600: #c62016;
    --red-500: #e4342a;
    --red-100: #ffe1de;
    --red-50: #fff3f1;
    --ink: #22150f;
    --ink-soft: #6f5d55;
    --line: #f2e3e0;
    --cream: #fffaf9;
    --veg: #12855a;
    --nonveg: #c62016;
    --egg: #d98f00;
    --radius: 16px;
    --shadow-sm: 0 2px 8px rgba(92, 15, 11, .07);
    --shadow: 0 14px 40px rgba(92, 15, 11, .16);
    /* flat red fills — no gradients anywhere */
    --brand: var(--red-600);
    --brand-soft: var(--red-50);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.5;
}

a { color: var(--red-600); text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0 0 .3rem; line-height: 1.2; letter-spacing: -.02em; }
button { font: inherit; }

.wrap { width: min(760px, 100%); margin: 0 auto; padding: 0 14px; }
.muted { color: var(--ink-soft); }
.small { font-size: .82rem; }
.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1; min-width: 0; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.hide { display: none !important; }

/* Lucide icons are inlined locally and inherit currentColor */
.lu { display: inline-block; vertical-align: -.16em; flex: 0 0 auto; }

/* ---------------- buttons ---------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer; font-weight: 700; padding: 13px 20px; border-radius: 13px;
    background: var(--red-600); color: #fff; box-shadow: 0 6px 18px rgba(198, 32, 22, .25);
    transition: transform .12s, opacity .12s;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-ghost { background: #fff; color: var(--red-600); border: 1.5px solid var(--line); box-shadow: none; }
.btn-wa { background: var(--red-600); box-shadow: 0 6px 18px rgba(198, 32, 22, .3); }

.icon-btn {
    border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
}
.icon-btn:hover { background: #f7ece7; color: var(--ink); }
.icon-btn.danger:hover { background: #ffeceb; color: var(--red-600); }

/* ---------------- inputs ---------------- */
input[type=text], input[type=tel], input[type=url], input[type=number], input[type=time], input[type=password],
input[type=search], input[type=file], select, textarea {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
    font: inherit; background: #fff; color: var(--ink); outline: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--red-600); box-shadow: 0 0 0 3px rgba(198, 32, 22, .15); }
textarea { min-height: 80px; resize: vertical; }
select {
    appearance: none; padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c62016' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
label.field { display: block; margin-bottom: 13px; font-weight: 600; font-size: .85rem; }
label.field span { display: block; margin-bottom: 5px; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .85rem; }
.checkbox input { width: auto; }

.notice { background: var(--red-50); border: 1px solid var(--red-100); color: var(--red-700); padding: 11px 13px; border-radius: 12px; font-size: .86rem; }
.notice.error { background: #ffeceb; border-color: #ffc4c0; color: var(--red-700); }
.notice.success { background: #e9f9ef; border-color: #b5e7c8; color: #11663f; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.settings-form { max-width: 900px; padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.settings-form .field:last-of-type { grid-column: 1/-1; }
.settings-form .btn { justify-self: start; margin-top: 4px; }
@media(max-width:600px) { .settings-form { grid-template-columns: 1fr; padding: 16px; } .settings-form .field:last-of-type { grid-column:auto; } }

/* ══════════════ SITE HEADER — wave style ══════════════ */
.sf-body { background: #fff; min-height: 100vh; display: flex; flex-direction: column; }
#main-app { margin-top: 0; padding-top: 0; }

.site-hdr {
    background: var(--red-600);
    position: sticky; top: 0; z-index: 100;
}
.site-hdr-top { /* colored band */ }
.site-hdr-inner {
    display: flex; align-items: center; gap: 10px;
    min-height: 64px; padding-top: 6px; padding-bottom: 6px;
}

/* Logo button — no border/bg, just the image */
.logo-btn {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    display: flex; align-items: center; line-height: 0;
}
.site-logo {
    height: 48px; width: auto;
    /* White areas in PNG blend on white header top section;
       the PNG has transparent bg so it shows directly */
    filter: brightness(0) invert(1); /* make logo white on red header */
}

.hdr-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* Search button in header (menu mode) */
.hdr-act-btn {
    border: 0; background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    transition: background .12s;
}
.hdr-act-btn:hover { background: rgba(255,255,255,.3); }

/* Social icon buttons */
.social-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.55);
    display: grid; place-items: center; color: #fff;
    text-decoration: none; transition: background .15s, border-color .15s;
    flex: 0 0 36px;
}
.social-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.9); color: #fff; }
.social-btn-sm { width: 32px; height: 32px; flex: 0 0 32px; }

/* Wave SVG at the bottom of the header */
.site-hdr-wave { line-height: 0; overflow: hidden; }
.site-hdr-wave svg { display: block; width: 100%; height: 30px; }

/* ══════════════ SEARCH ══════════════ */
.search-wrap { background: #fff; border-bottom: 1px solid var(--line); padding: 8px 0 10px; }
.searchbar { position: relative; }
.searchbar input { padding-left: 42px; border-radius: 999px; }
.searchbar .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); display: flex; pointer-events: none; }

/* ══════════════ LANDING / PICKER ══════════════ */
/* ══════════════ LOCATION SWITCHER (header pill) ══════════════ */
.loc-sw { position: relative; }
.loc-sw-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
    color: #fff; padding: 5px 11px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.loc-sw-btn:hover { background: rgba(255,255,255,.3); }
.loc-sw-menu {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #fff; border-radius: 14px; padding: 6px;
    box-shadow: 0 8px 28px rgba(34,21,15,.22); min-width: 150px; z-index: 300;
}
.loc-sw-menu button {
    display: block; width: 100%; text-align: left;
    padding: 9px 14px; border: 0; background: transparent; cursor: pointer;
    color: var(--ink); font-size: .88rem; font-weight: 600; border-radius: 9px;
    transition: background .12s;
}
.loc-sw-menu button:hover    { background: var(--red-50);  color: var(--red-600); }
.loc-sw-menu button.active   { background: var(--red-600); color: #fff; }
.loc-single {
    font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85);
    padding: 4px 10px; background: rgba(255,255,255,.15); border-radius: 999px;
}

/* ══════════════ SITE FOOTER ══════════════ */
.site-footer { background: var(--red-600); color: rgba(255,255,255,.9); margin-top: auto; }
.site-footer-wave { line-height: 0; overflow: hidden; }
.site-footer-wave svg { display: block; width: 100%; height: 36px; }
.site-footer-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px; padding: 16px 14px 20px; text-align: center;
}
.footer-logo { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.footer-copy { margin: 0; font-size: .78rem; opacity: .75; }
.footer-social { display: flex; gap: 8px; }
.footer-credit { flex-basis:100%; margin:0; font-size:.72rem; color:rgba(255,255,255,.8); }
.footer-credit a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-credit a:focus-visible { outline:2px solid #fff; outline-offset:4px; border-radius:2px; }

/* ══════════════ CATEGORY PILLS ══════════════ */
.cat-nav {
    background: var(--red-100);
    border-bottom: 1px solid var(--red-100);
    /* lives inside .site-hdr which is already sticky — no separate sticky needed */
}
.cat-nav-inner { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 10px 14px 8px; max-width: 800px; margin: 0 auto; }
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-chip {
    white-space: nowrap; padding: 7px 16px; border-radius: 999px; background: #fff;
    border: 1.5px solid var(--red-100); font-weight: 700; font-size: .82rem; color: var(--ink-soft);
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
    transition: background .12s, color .12s, border-color .12s;
    box-shadow: var(--shadow-sm);
}
.cat-chip:hover { border-color: var(--red-500); color: var(--red-600); }
.cat-chip svg { flex:0 0 18px; width:18px; height:18px; }
.cat-chip.on { background: var(--red-600); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(198,32,22,.25); }

/* ══════════════ MENU GRID ══════════════ */
/* Delivery charge banner */
.delivery-banner {
    display: flex; align-items: center; gap: 7px;
    width: calc(100% - 28px); max-width: 772px; margin: 10px auto 0; padding: 9px 16px;
    background: #fff8f5; border: 1.5px solid var(--red-100);
    border-radius: 12px; font-size: .85rem; color: var(--ink-soft);
}
.delivery-banner b { color: var(--red-600); }
.delivery-banner svg { flex: 0 0 auto; color: var(--red-600); }

.menu-wrap { width: 100%; max-width: 800px; margin: 0 auto; padding: 12px 14px 100px; box-sizing: border-box; }

.cat-block { margin-bottom: 26px; }
.cat-title { display: flex; align-items: center; gap: 9px; font-size: 1rem; margin-bottom: 12px; font-weight: 800; }
.cat-title span { font-weight: 500; font-size: .78rem; color: var(--ink-soft); }
.cat-title:before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--red-600); flex: 0 0 4px; }

.item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.item-card {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .15s, transform .1s;
}
.item-card:hover { box-shadow: 0 6px 20px rgba(92,15,11,.1); }

.card-img { width: 100%; aspect-ratio: 1; background: var(--red-50); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-img .ph { height: 100%; display: grid; place-items: center; color: #ddc8c5; }

.card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.card-body h3 { font-size: .88rem; line-height: 1.3; margin: 0; }
.card-desc { font-size: .73rem; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; }
.card-price { font-size: .92rem; font-weight: 800; }

/* diet indicator */
.diet { width: 13px; height: 13px; border: 2px solid var(--veg); border-radius: 3px; display: inline-grid; place-items: center; flex: 0 0 13px; }
.diet:after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--veg); }
.diet.non-veg, .diet.nonveg { border-color: var(--nonveg); }
.diet.non-veg:after, .diet.nonveg:after { background: var(--nonveg); }
.diet.egg { border-color: var(--egg); }
.diet.egg:after { background: var(--egg); }

/* add / stepper */
.add-btn {
    border: 1.5px solid var(--red-500); background: #fff; color: var(--red-600); font-weight: 800;
    padding: 6px 12px; border-radius: 10px; cursor: pointer; font-size: .78rem;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.add-btn:hover { background: var(--red-600); color: #fff; border-color: transparent; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--red-500); border-radius: 10px; overflow: hidden; background: #fff; }
.stepper button { border: 0; background: #fff; color: var(--red-600); cursor: pointer; width: 30px; height: 32px; display: grid; place-items: center; }
.stepper button:hover { background: #fff3f1; }
.stepper span { min-width: 22px; text-align: center; font-weight: 800; color: var(--red-700); font-size: .86rem; }
.stepper.sm button { width: 28px; height: 30px; }
.stepper.sm span { min-width: 20px; font-size: .84rem; }

/* skeleton loading */
.skel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.skeleton { border-radius: 16px; background: var(--red-50); animation: sk 1.1s ease-in-out infinite alternate; }
.skeleton.img { aspect-ratio: 4/3; width: 100%; display: block; }
.skeleton.line { height: 14px; border-radius: 6px; margin-top: 8px; width: 70%; }
.skeleton.line.short { width: 45%; }
/* Category pill skeletons */
.cat-chip-sk { width: 80px; height: 34px; border-radius: 999px; flex: 0 0 80px; }
/* Location label skeleton */
.loc-label-sk { display: inline-block; width: 64px; height: 11px; border-radius: 4px; vertical-align: middle; }
@keyframes sk { to { opacity: .45; } }

/* empty states */
.empty { text-align: center; padding: 50px 20px; }
.empty em { display: block; color: var(--red-400); margin-bottom: 12px; }

/* ══════════════ CART BAR ══════════════ */
body.has-bar .menu-wrap { padding-bottom: 110px; }

.cartbar {
    position: fixed; left: 0; right: 0; z-index: 50;
    bottom: calc(14px + env(safe-area-inset-bottom));
    display: flex; justify-content: center; padding: 0 14px;
    transform: translateY(180%); transition: transform .3s cubic-bezier(.2,.8,.3,1);
    pointer-events: none;
}
.cartbar.show { transform: translateY(0); }

.cart-pill {
    pointer-events: auto; cursor: pointer; border: 0;
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 786px; padding: 10px 10px 10px 18px; border-radius: 999px;
    background: var(--ink); color: #fff; font-weight: 700; font-size: .88rem;
    box-shadow: 0 12px 32px rgba(34,21,15,.28); transition: transform .14s;
}
.cart-pill:active { transform: scale(.99); }
.cart-pill .pill-ico { display: inline-flex; align-items: center; gap: 8px; }
.cart-pill .pill-ico b { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--red-600); display: grid; place-items: center; font-size: .72rem; }
.cart-pill .pill-total { flex: 1; font-weight: 800; }
.cart-pill .pill-cta { display: inline-flex; align-items: center; gap: 5px; background: var(--red-600); padding: 9px 18px; border-radius: 999px; font-size: .82rem; white-space: nowrap; }

/* ══════════════ CART SHEET ══════════════ */
/* Use display:none so backdrop-filter never leaks when closed */
.sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(34,21,15,.52); z-index: 60; }
.sheet-overlay.open { display: block; }

.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    width: min(800px, 100%); margin: 0 auto;
    background: #fff; border-radius: 24px 24px 0 0; box-shadow: var(--shadow);
    transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.3,1);
    max-height: 88vh; display: flex; flex-direction: column;
}
.sheet.open { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--line); margin: 10px auto 0; flex: 0 0 4px; }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.sheet-head b { display: block; font-size: 1rem; }
.sheet-head > div { flex: 1; }
.sheet-list { overflow-y: auto; padding: 4px 18px; flex: 1; -webkit-overflow-scrolling: touch; }
.sheet-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.sheet-row:last-child { border-bottom: 0; }
.sheet-delivery { background: #fff8f5; margin: 0 -16px; padding: 9px 16px; border-bottom: 1px solid var(--red-100) !important; }
.sheet-row b { display: block; font-size: .92rem; }
.sheet-row span.muted { display: block; }
.sheet-row .line { width: 76px; text-align: right; font-weight: 800; }
.sheet-foot { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fffaf6; }
.sheet-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 1.05rem; }
.sheet-total b { font-size: 1.22rem; }

/* ══════════════ TOAST ══════════════ */
#toast { position: fixed; left: 50%; bottom: 110px; transform: translate(-50%, 16px); z-index: 90; background: #1f1512; color: #fff; padding: 11px 18px; border-radius: 999px; font-size: .85rem; font-weight: 600; opacity: 0; pointer-events: none; transition: .22s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── PWA install banner ── */
.pwa-banner {
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
    z-index: 200; display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
    padding: 10px 14px; box-shadow: 0 8px 32px rgba(34,21,15,.18);
    width: calc(100% - 32px); max-width: 420px;
}
.pwa-ico { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px; object-fit: cover; }
.pwa-txt { flex: 1; min-width: 0; }
.pwa-txt b { display: block; font-size: .9rem; }
.pwa-txt span { display: block; font-size: .75rem; color: var(--ink-soft); }
.pwa-install-btn { background: var(--red-600); color: #fff; border: 0; padding: 7px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.pwa-close-btn { color: var(--ink-soft); font-size: 1rem; background: none; border: 0; cursor: pointer; padding: 4px; line-height: 1; flex: 0 0 auto; }

@media (max-width: 480px) {
    .item-grid { gap: 9px; }
    .card-body { padding: 9px 10px 10px; }
    .card-body h3 { font-size: .83rem; }
    .sheet-row .line { width: 62px; font-size: .86rem; }
}

/* ============ admin ============ */
.admin-body { background: #f7f2ef; }

/* ---- mobile topbar (hidden on desktop) ---- */
.adm-bar {
    display: none; align-items: center; gap: 10px;
    background: var(--red-600); color: #fff;
    padding: 0 14px; height: 56px;
    position: sticky; top: 0; z-index: 200;
}
.adm-ham {
    border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; flex: 0 0 44px;
}
.adm-ham:hover { background: rgba(255,255,255,.24); }
.adm-ham svg, .adm-bar .icon-btn svg { color:#fff; stroke:#fff; }
.adm-ham:focus-visible, .adm-bar .icon-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.adm-bar-brand {
    display: flex; align-items: center; gap: 9px;
    color: #fff; font-weight: 800; font-size: .96rem;
}
.adm-bar-brand .brand-mark {
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.18); color: #fff;
}
.adm-bar-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: 0 0 28px; }
.adm-bar .spacer { flex: 1; }
.adm-bar a.icon-btn { color: #fff; opacity: 1; width:44px; height:44px; border:1px solid rgba(255,255,255,.25); border-radius:12px; background:rgba(255,255,255,.14); }

/* ---- layout wrapper ---- */
.adm-wrap { display: flex; min-height: 100vh; }

/* ---- sidebar ---- */
.adm-sidebar {
    width: 220px; flex: 0 0 220px;
    background: #fff; border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 150;
    overflow-y: auto;
    transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.adm-sb-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 16px 14px; border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}
.adm-sb-brand b { display: block; font-size: .94rem; letter-spacing: -.02em; }
.adm-sb-brand small { display: block; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.adm-sb-brand .brand-mark {
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 36px;
    display: grid; place-items: center; background: var(--red-600); color: #fff;
}
.adm-sb-logo { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; flex: 0 0 36px; }

.adm-sb-nav { flex: 1; padding: 10px; }
.adm-sb-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 11px; margin-bottom: 2px;
    font-weight: 600; font-size: .88rem; color: var(--ink-soft);
    transition: background .12s, color .12s;
}
.adm-sb-nav a:hover { background: var(--red-50); color: var(--red-600); }
.adm-sb-nav a.active { background: var(--red-50); color: var(--red-600); font-weight: 700; }

.adm-sb-foot {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); font-size: .82rem; flex: 0 0 auto;
}
.adm-sb-foot .who {
    display: flex; align-items: center; gap: 7px;
    font-weight: 700; color: var(--ink); margin-bottom: 10px;
    padding: 8px 10px; border-radius: 10px; background: var(--red-50);
}
.adm-sb-foot a {
    display: flex; align-items: center; gap: 7px;
    color: var(--ink-soft); font-weight: 600; padding: 7px 10px; border-radius: 10px;
}
.adm-sb-foot a:hover { background: #f7ece7; color: var(--red-600); }

/* ---- main content ---- */
.adm-content { flex: 1; margin-left: 220px; min-width: 0; padding: 32px 0 60px; }
.adm-content .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.adm-content h1 { font-size: 1.35rem; }
.page-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }

/* ---- overlay (mobile) ---- */
.adm-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(34,21,15,.5); z-index: 140;
    opacity: 0; pointer-events: none; transition: opacity .22s;
}

/* ---- mobile breakpoint ---- */
@media (max-width: 768px) {
    .adm-bar { display: flex; }
    .adm-wrap { min-height: calc(100vh - 56px); }
    .adm-sidebar { top: 56px; transform: translateX(-100%); }
    .adm-sidebar.open { transform: translateX(0); box-shadow: 4px 0 30px rgba(92,15,11,.2); }
    .adm-overlay { display: block; }
    .adm-overlay.open { opacity: 1; pointer-events: auto; }
    .adm-content { margin-left: 0; padding: 18px 0 60px; }
    .adm-content .wrap { padding: 0 16px; }
}

/* ---- tables, forms, stats ---- */
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px; }
.stat i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--red-50); color: var(--red-600); margin-bottom: 9px; }
.stat b { display: block; font-size: 1.5rem; letter-spacing: -.03em; }
.stat span { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 700; }

.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.tbl th, table.tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl th { background: var(--red-50); font-size: .73rem; text-transform: uppercase; letter-spacing: .06em; color: var(--red-700); }
table.tbl tr:hover td { background: #fffaf7; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.pill.on { background: #e9f9ef; color: #11663f; }
.pill.off { background: #f1f0ef; color: #6b6b6b; }
.btn-sm { padding: 7px 12px; font-size: .8rem; border-radius: 10px; }
.btn-danger { background: #b3140c; box-shadow: none; }

details.editor { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 16px; }
details.editor > summary { padding: 13px 16px; cursor: pointer; font-weight: 800; color: var(--red-600); }
details.editor .body { padding: 0 16px 16px; }
.grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.icon-pick { display: flex; align-items: center; gap: 10px; }
.icon-preview { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 12px; color: var(--red-600); background: var(--red-50); }

.login-shell { min-height: 100vh; display: grid; place-items: center; background: var(--red-700); padding: 20px; }
.login-card { width: min(390px, 100%); background: #fff; border-radius: 20px; padding: 28px; box-shadow: var(--shadow); text-align: center; }
.login-card form { text-align: left; margin-top: 18px; }
.login-ring { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: var(--red-600); color: #fff; }

@media (max-width: 720px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .item-side { width: 96px; flex-basis: 96px; }
    .thumb { width: 96px; height: 76px; }
    .meal-now span { display: none; }
    .sheet-row .line { width: 62px; font-size: .86rem; }
}

/* ===== admin redesign: page header, stat cards, cat cards, modal ===== */

/* page header */
.pg-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.pg-hdr-text { flex: 1; min-width: 0; }
.pg-hdr-text h1 { margin: 0; font-size: 1.3rem; }
.pg-hdr-text p { margin: 5px 0 0; font-size: .84rem; color: var(--ink-soft); }

/* stat cards */
.sc-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 26px; }
.sc { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.sc-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--red-50); color: var(--red-600); display: grid; place-items: center; margin-bottom: 10px; }
.sc-val { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.sc-lbl { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-top: 3px; }

/* section label */
.sec-lbl { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 10px; }

/* category cards grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cat-card {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 13px 15px; display: flex; align-items: center; gap: 11px;
    transition: box-shadow .15s;
}
.cat-card:hover { box-shadow: var(--shadow-sm); }
.cat-c-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--red-50); color: var(--red-600); display: grid; place-items: center; flex: 0 0 40px; }
.cat-c-info { flex: 1; min-width: 0; }
.cat-c-info b { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-c-info span { font-size: .74rem; color: var(--ink-soft); }
.cat-c-acts { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }

/* filter chips */
.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ch {
    padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line);
    font-size: .81rem; font-weight: 700; color: var(--ink-soft); background: #fff;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.ch:hover { border-color: var(--red-400); color: var(--red-600); }
.ch.on { background: var(--red-600); border-color: transparent; color: #fff; }

/* modal */
.modal-bd {
    position: fixed; inset: 0; background: rgba(34,21,15,.55);
    z-index: 300; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .22s;
    padding: 16px;
}
.modal-bd.open { opacity: 1; pointer-events: auto; }
.modal {
    background: #fff; border-radius: 22px; box-shadow: 0 24px 70px rgba(34,21,15,.24);
    width: min(540px, 100%); max-height: 90vh; display: flex; flex-direction: column;
    transform: translateY(24px) scale(.96); transition: transform .25s cubic-bezier(.2,.8,.3,1);
    overflow: hidden;
}
.modal-bd.open .modal { transform: none; }
.modal-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px 13px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.modal-hd h2 { flex: 1; font-size: 1.08rem; margin: 0; }
.modal-body { overflow-y: auto; padding: 20px; flex: 1; -webkit-overflow-scrolling: touch; }
.modal-ft {
    padding: 13px 20px; border-top: 1px solid var(--line);
    background: #fffaf9; flex: 0 0 auto; display: flex; gap: 8px;
}

/* table thumbnail */
.tbl-thumb { width: 48px; height: 40px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); display: block; flex: 0 0 48px; }
.tbl-thumb-ph { width: 48px; height: 40px; border-radius: 9px; flex: 0 0 48px; background: var(--red-50); display: grid; place-items: center; border: 1px solid var(--line); }

/* image preview in modal */
.img-pre { width: 100%; max-height: 130px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 8px; display: block; }

@media (max-width: 600px) {
    .cat-grid { grid-template-columns: 1fr; }
    .sc-row { grid-template-columns: repeat(2, 1fr); }
}

/* Responsive product preview: native dialog manages focus and Escape. */
.card-image-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.card-image-button:focus-visible { outline: 3px solid var(--red-600); outline-offset: -3px; }
.item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-lightbox-open { overflow: hidden; }
.image-lightbox { width: min(480px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 12px; border: 0; border-radius: 16px; background: var(--cream); color: var(--ink); overflow: auto; box-shadow: 0 20px 70px #0006; }
.image-lightbox::backdrop { background: #000b; }
.image-lightbox-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.image-lightbox-header h2 { flex: 1; min-width: 0; font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.image-lightbox-header form { flex: 0 0 auto; }
.image-lightbox-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); cursor: pointer; }
.image-lightbox-close:focus-visible { outline: 3px solid var(--red-600); outline-offset: 2px; }
#image-lightbox-photo { display:block; width:100%; height:min(420px,calc(100dvh - 220px)); object-fit:contain; border-radius:10px; background:#f6eee3; }
.image-lightbox-details { padding:12px 4px 4px; }
.image-lightbox-details p { margin:0 0 10px; font-size:.85rem; color:var(--ink-soft); }
.item-card .card-body { cursor:zoom-in; }
@media (max-width: 480px) {
    .site-hdr-inner { flex-wrap: wrap; column-gap: 7px; row-gap: 3px; padding-top: 5px; padding-bottom: 3px; }
    .site-logo { height: 44px; }
    .loc-sw-btn { padding: 4px 9px; font-size: .7rem; }
    .logo-wrap { order: 1; }
    .hdr-acts { order: 2; flex-basis: auto; justify-content: flex-end; margin-left: auto; padding-bottom: 1px; }
    .loc-sw { order: 3; flex-basis: 100%; display: flex; justify-content: flex-start; padding-bottom: 2px; }
    .card-foot { flex-wrap: wrap; }
    .card-body h3 { overflow-wrap: anywhere; }
}

/* Category scrolling works with arrows, a wheel, keyboard focus and touch. */
.cat-nav-controls { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 10px; }
.cat-nav-controls .cat-nav-inner { flex: 1; min-width: 0; margin: 0; padding-left: 4px; padding-right: 4px; overscroll-behavior-x: contain; }
.cat-chip { flex: 0 0 auto; }
.cat-scroll { flex: 0 0 32px; width: 32px; height: 36px; border: 1px solid var(--red-100); border-radius: 50%; background: #fff; color: var(--red-600); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.cat-scroll:disabled { opacity: .35; cursor: default; }
.cat-scroll[hidden] { display: none; }
.cat-scroll:focus-visible, .cat-chip:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; }

#category-strip { cursor: grab; user-select: none; -webkit-user-select: none; }
#category-strip.dragging, #category-strip.dragging .cat-chip { cursor: grabbing; }

/* Tap a category heading to hide or show its items. */
.cat-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cat-title .cat-toggle-name { color: var(--ink); font-size: inherit; font-weight: inherit; }
.cat-title .cat-count { margin-left: 5px; }
.cat-chevron { flex: 0 0 auto; transition: transform .15s; }
.cat-toggle[aria-expanded="false"] .cat-chevron { transform: rotate(-90deg); }
.cat-toggle:focus-visible { outline: 2px solid var(--red-600); outline-offset: 3px; border-radius: 4px; }
.item-grid[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cat-chevron { transition: none; } }
/* Category management */
.category-overview { display: flex; flex-wrap: wrap; gap: 18px; color: var(--ink-soft); font-size: .85rem; margin-bottom: 16px; }
.category-overview b { color: var(--ink); }
.category-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.category-card { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
.category-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.category-card .cat-c-ico { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
.category-card .cat-c-info h2 { font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; margin: 0; }
.category-card .cat-c-info p { font-size: .82rem; color: var(--ink-soft); margin: 5px 0 0; }
.category-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.category-edit { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; min-height: 40px; padding: 8px 10px; background: var(--red-50); color: var(--red-600); font-weight: 700; cursor: pointer; }
.category-card .icon-btn { width: 40px; height: 40px; }
.category-card .icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.category-dialog { padding: 0; border: 0; border-radius: 22px; width: min(620px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); background: white; overflow: hidden; }
.category-dialog::backdrop { background: rgba(34,21,15,.55); }
.category-dialog .modal { width: 100%; max-height: calc(100dvh - 32px); transform: none; box-shadow: none; }
.category-dialog form { display: flex; flex-direction: column; min-height: 0; }
.category-dialog .modal-body { min-height: 0; }
.category-icon-picker { min-width: 0; padding: 0; margin: 0 0 18px; border: 0; }
.category-icon-picker legend { font-size: .85rem; font-weight: 700; margin-bottom: 10px; }
.category-icon-selected { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--red-50); border-radius: 12px; margin-bottom: 12px; }
.category-icon-selected b { display: block; font-size: .9rem; text-transform: capitalize; }
.category-icon-selected .icon-preview { color: var(--red-600); display: grid; place-items: center; width: 36px; height: 36px; }
.category-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; max-height: 224px; overflow: auto; padding: 3px; }
.category-icon-option { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; min-height: 78px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink-soft); cursor: pointer; }
.category-icon-option span { font-size: .68rem; line-height: 1.25; overflow-wrap: anywhere; }
.category-icon-option:hover, .category-icon-option[aria-pressed="true"] { border-color: var(--red-600); color: var(--red-600); background: var(--red-50); }
.category-icon-option[hidden] { display: none; }
.category-icon-option:focus-visible, .category-edit:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; }
@media (max-width: 480px) { .category-dialog .modal-body { padding: 16px; } .category-dialog .modal-ft { flex-wrap: wrap; } }
.category-visibility { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--red-600); color: white; font-weight: 700; font-size: .78rem; cursor: pointer; }
.category-visibility.is-active { background: white; color: var(--ink-soft); }
.category-visibility:disabled { opacity: .5; cursor: wait; }
.category-drag-handle { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; cursor: grab; touch-action: none; user-select: none; }
.category-drag-handle:active { cursor: grabbing; }
.category-drag-handle span { font-size: .75rem; }
.category-dragging { opacity: .55; outline: 2px dashed var(--red-600); }
.category-grid.saving .category-drag-handle { pointer-events: none; opacity: .4; }
.category-visibility:focus-visible, .category-drag-handle:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; }
#category-save-status:empty { display: none; }
#category-save-status { color: var(--red-700); margin: 0 0 12px; }

/* Menu management: readable product rows and a viewport-sized editor. */
.menu-tools { display:grid; grid-template-columns:minmax(200px,1fr) minmax(170px,240px) auto; align-items:end; gap:12px; padding:12px; margin-bottom:16px; }
.menu-tools .field { margin:0; min-width:0; }
.menu-tools .field > span { font-size:.75rem; font-weight:600; margin-bottom:4px; }
.menu-tools input, .menu-tools select { height:40px; padding:8px 10px; font-size:.82rem; border-radius:10px; }
.menu-result-bar { display:flex; grid-column:1/-1; align-items:center; gap:12px; margin:0; }
.menu-result-bar p { color:var(--ink-soft); font-size:.78rem; margin:0; white-space:nowrap; }
.menu-clear-filter { min-height:40px; padding:8px 10px; white-space:nowrap; }
@media(min-width:601px) and (max-width:1100px) { .menu-tools { grid-template-columns:minmax(0,1fr) auto; } .menu-search { grid-column:1/-1; } }
.admin-menu-list { display:grid; gap:10px; }
.admin-menu-item { display:grid; grid-template-columns:minmax(0,1fr) 130px 130px; align-items:center; gap:18px; padding:16px; }
.admin-menu-item[hidden], .menu-empty[hidden] { display:none; }
.menu-product { display:flex; align-items:center; gap:16px; text-align:left; border:0; padding:0; background:none; color:inherit; font:inherit; min-width:0; cursor:pointer; }
.menu-product img, .menu-photo-placeholder { width:76px; height:76px; object-fit:cover; border-radius:14px; flex:0 0 76px; background:var(--red-50); }
.menu-photo-placeholder { display:grid; place-items:center; color:var(--red); }
.menu-product-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.menu-product-category { color:var(--muted); font-size:.72rem; }
.menu-product strong { font-size:.96rem; overflow-wrap:anywhere; }
.menu-product-description { color:var(--muted); font-size:.8rem; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.menu-food-type { display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--muted); }
.menu-food-type .diet { width:12px; height:12px; }
.menu-item-price { display:flex; align-items:flex-start; flex-direction:column; gap:8px; font-weight:700; font-size:.92rem; }
.menu-item-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.menu-empty { text-align:center; padding:36px 20px; }
.item-dialog { padding:0; border:0; border-radius:22px; width:min(820px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow:hidden; background:white; }
.item-dialog::backdrop { background:rgba(34,21,15,.55); }
.item-dialog .modal { width:100%; max-height:calc(100dvh - 32px); transform:none; box-shadow:none; border-radius:inherit; }
.item-dialog form { display:flex; flex-direction:column; min-height:0; }
.item-dialog .item-editor-body { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; min-height:0; }
.editor-section-title { font-weight:700; font-size:.85rem; margin:0 0 16px; }
.item-details .grid-2 { grid-template-columns:1fr 1fr; gap:12px; }
.item-photo-panel { min-width:0; }
.item-photo-preview { width:220px; max-width:100%; aspect-ratio:1; border:1px dashed var(--line); border-radius:16px; background:#fffaf9; display:grid; place-items:center; overflow:hidden; margin-bottom:16px; }
.item-photo-preview img { width:100%; height:100%; object-fit:contain; }
#item-photo-empty { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--muted); font-size:.85rem; }
#item-photo-empty[hidden] { display:none; }
.item-photo-panel input[type=file] { width:100%; font-size:.78rem; padding:10px; }
.item-live-control { display:flex; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:12px; gap:10px; background:#fffaf9; }
.item-live-control span { display:flex; flex-direction:column; gap:4px; font-size:.82rem; }
.item-dialog .modal-ft { justify-content:flex-end; }
.menu-product:focus-visible { outline:2px solid var(--red); outline-offset:5px; border-radius:10px; }
@media(max-width:1000px) { .admin-menu-item { grid-template-columns:minmax(0,1fr) 110px; } .menu-item-actions { grid-column:1/-1; border-top:1px solid var(--line); padding-top:10px; } }
@media(max-width:600px) {
 .menu-tools { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:10px; } .menu-search { grid-column:1/-1; }
 .admin-menu-item { grid-template-columns:minmax(0,1fr); gap:12px; padding:14px; }
 .menu-product { gap:12px; } .menu-product img, .menu-photo-placeholder { width:64px; height:64px; flex-basis:64px; }
 .menu-item-price { flex-direction:row; align-items:center; justify-content:space-between; }
 .menu-item-actions { grid-column:auto; }
 .item-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:16px; }
 .item-dialog .modal { max-height:calc(100dvh - 16px); }
 .item-dialog .item-editor-body { grid-template-columns:1fr; gap:20px; padding:16px; }
 .item-photo-preview { width:150px; max-width:100%; }
 .item-dialog .modal-ft { padding:12px 16px; } .item-dialog .modal-ft .btn { flex:1; }
}

@media(max-width:600px) { .item-details .grid-2 { grid-template-columns:1fr; gap:0; } }
.menu-category-group[hidden], .menu-group-items[hidden] { display:none; }
.menu-category-group h2 { margin:0; }
.menu-group-toggle { display:flex; width:100%; align-items:center; gap:10px; color:var(--text); padding:16px 0 12px; font:inherit; font-size:1.05rem; font-weight:700; border:0; background:transparent; text-align:left; cursor:pointer; }
.menu-group-count { color:var(--muted); font-size:.8rem; font-weight:400; margin-right:auto; }
.menu-group-toggle svg { transition:transform .2s; }
.menu-group-toggle[aria-expanded=false] svg { transform:rotate(-90deg); }
.menu-group-items { display:grid; gap:10px; }
.menu-group-toggle:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:6px; }

.item-order-settings summary { cursor:pointer; color:var(--muted); font-size:.82rem; padding:8px 0; }
.item-order-settings .field { margin-top:10px; }
.item-drag-handle { display:flex; align-items:center; justify-content:center; gap:5px; border:0; background:transparent; padding:10px 6px; min-height:40px; font:inherit; font-size:.78rem; color:var(--muted); cursor:grab; touch-action:none; user-select:none; }
.item-drag-handle:disabled { opacity:.4; cursor:default; }
.item-drag-handle:focus-visible { outline:2px solid var(--red); border-radius:8px; }
.item-dragging { opacity:.5; outline:2px dashed var(--red); }
.admin-menu-list.saving .item-drag-handle { pointer-events:none; opacity:.4; }
#menu-order-status:empty { display:none; }
#menu-order-status { color:var(--red); }
.admin-menu-item { grid-template-columns:minmax(0,1fr) 120px 270px; }
@media(max-width:1000px) { .admin-menu-item { grid-template-columns:minmax(0,1fr) 110px; } }
@media(max-width:600px) { .admin-menu-item { grid-template-columns:minmax(0,1fr); } .item-drag-handle { margin-right:auto; } }

.item-editor-options { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.item-editor-options .item-live-control { border:0; background:none; padding:0; align-items:center; flex:1; }
.item-editor-options .item-order-field { width:88px; flex:0 0 88px; margin:0; }
@media(max-width:600px) { .item-dialog .modal-ft .btn { white-space:nowrap; font-size:.88rem; padding:12px 10px; } }

.item-drag-handle, .category-drag-handle { min-width:40px; min-height:40px; justify-content:center; padding:10px; }

/* Location must be chosen afresh for each storefront visit. */
body.location-picker-open { overflow:hidden; }
.location-picker { width:min(440px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:26px; border:0; border-radius:24px; background:white; color:var(--text); box-shadow:0 24px 70px rgba(34,21,15,.24); overflow-y:auto; }
.location-picker::backdrop { background:rgba(34,21,15,.6); backdrop-filter:blur(3px); }
.location-picker-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.location-picker-pin { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:var(--red); background:var(--red-50); }
.location-picker h2 { font-size:1.4rem; margin:0 0 8px; }
.location-picker p { font-size:.9rem; color:var(--muted); margin:0 0 22px; }
.location-picker-options { display:grid; gap:10px; }
.location-choice { display:flex; align-items:center; gap:12px; padding:16px; min-height:60px; width:100%; border:1px solid var(--line); border-radius:14px; background:white; font:inherit; font-weight:700; color:inherit; text-align:left; cursor:pointer; }
.location-choice span { flex:1; overflow-wrap:anywhere; }
.location-choice svg { color:var(--red); flex-shrink:0; }
.location-choice:hover, .location-choice.selected { background:var(--red-50); border-color:var(--red); }
.location-choice:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.location-choice:disabled { opacity:.5; cursor:wait; }
.location-picker #location-picker-status { margin:16px 0 0; color:var(--red); }
#location-picker-status:empty, #location-picker-close[hidden] { display:none; }
@media(max-width:480px) { .location-picker { padding:20px; border-radius:20px; } }

.location-picker-heading { gap:14px; }
.location-picker-heading .location-picker-pin { flex:0 0 52px; }
.location-picker-heading h2 { flex:1; margin:0; font-size:1.25rem; line-height:1.25; }
.location-picker-heading .icon-btn { flex-shrink:0; }
.location-admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.location-admin-card { padding:22px; display:flex; flex-direction:column; min-width:0; }
.location-admin-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.location-admin-card h2 { font-size:1.12rem; margin:0 0 16px; overflow-wrap:anywhere; }
.location-contact { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.location-contact span { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.78rem; }
.location-contact strong { font-size:.94rem; overflow-wrap:anywhere; }
.location-delivery-setting { border-top:1px solid var(--line); padding-top:16px; margin-top:auto; }
.delivery-switch-label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.9rem; font-weight:700; cursor:pointer; }
.delivery-switch { display:inline-flex; position:relative; flex:0 0 44px; width:44px; height:26px; }
.delivery-switch input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.delivery-switch-track { width:44px; height:26px; border-radius:20px; background:#ccc3bf; transition:background .18s; }
.delivery-switch-track:before { content:''; position:absolute; width:20px; height:20px; top:3px; left:3px; border-radius:50%; background:white; box-shadow:0 1px 4px #0002; transition:transform .18s; }
.delivery-switch input:checked + .delivery-switch-track { background:var(--red-600); }
.delivery-switch input:checked + .delivery-switch-track:before { transform:translateX(18px); }
.delivery-switch input:focus-visible + .delivery-switch-track { outline:2px solid var(--red-600); outline-offset:3px; }
.delivery-switch input:disabled + .delivery-switch-track { opacity:.5; }
.location-delivery-setting p { margin:10px 0 18px; line-height:1.5; }
.location-admin-actions { display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.location-admin-actions > span { margin-right:auto; }
.location-delivery-editor { padding:16px; border:1px solid var(--line); border-radius:14px; margin:0 0 18px; background:#fffaf9; }
.location-delivery-editor p { margin-bottom:0; }
.location-admin-dialog { width:min(560px,calc(100vw - 24px)); }
.location-admin-dialog .modal-ft { justify-content:flex-end; }
#location-save-status:empty, #form-err[hidden] { display:none; }
#location-save-status { color:var(--red); margin-bottom:16px; }
@media(max-width:600px) { .location-admin-grid { grid-template-columns:1fr; } .location-admin-card { padding:18px; } .location-admin-dialog .modal-ft .btn { flex:1; white-space:nowrap; padding:12px 10px; font-size:.88rem; } }

.location-drag-handle { display:grid; place-items:center; min-width:44px; min-height:44px; padding:8px; color:var(--ink-soft); border:0; border-radius:9px; background:transparent; cursor:grab; touch-action:none; user-select:none; }
.location-drag-handle:hover { background:var(--red-50); color:var(--red-600); }
.location-drag-handle:focus-visible { outline:2px solid var(--red-600); outline-offset:2px; }
.location-dragging { opacity:.55; outline:2px dashed var(--red-600); }
.location-admin-grid.saving .location-drag-handle { pointer-events:none; opacity:.4; }
@media(max-width:360px) { .location-admin-actions { gap:5px; } .location-order-label { font-size:.74rem; } }

/* Keep the install prompt clear of an active order. */
body.has-bar .pwa-banner { display:none !important; }

/* Primary admin pages stay one tap away on phones and tablets. */
.adm-mobile-nav { display:none; }
@media(max-width:768px) {
 .adm-mobile-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:180; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); box-shadow:0 -5px 24px rgba(92,15,11,.07); }
 .adm-mobile-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:56px; min-width:0; padding:0 3px; border:0; background:none; color:var(--ink-soft); font:inherit; font-size:.7rem; font-weight:600; text-decoration:none; cursor:pointer; }
 .adm-mobile-icon { display:grid; place-items:center; width:48px; height:30px; border-radius:10px; }
 .adm-mobile-link.active, .adm-mobile-link.is-open { color:var(--red-600); font-weight:700; }
 .adm-mobile-link.active .adm-mobile-icon, .adm-mobile-link.is-open .adm-mobile-icon { background:var(--red-50); }
 .adm-mobile-link:focus-visible { outline:2px solid var(--red-600); outline-offset:1px; border-radius:10px; }
 .adm-content { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
 .adm-sidebar { bottom:calc(73px + env(safe-area-inset-bottom)); z-index:210; }
 .adm-overlay { top:56px; bottom:calc(73px + env(safe-area-inset-bottom)); z-index:205; }
 body.adm-drawer-open { overflow:hidden; }
}

/* Quantity labels and variable prices */
.price-option-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px; gap:10px; align-items:center; }
.price-option-row .field { min-width:0; }
.price-option-row input { width:100%; min-width:0; }
#price-options-editor { margin:12px 0 20px; }
#fixed-price-field[hidden], #price-options-editor[hidden] { display:none; }
.card-price-options { margin-top:auto; }
.card-price-options .card-foot + .card-foot { margin-top:8px; border-top:1px solid var(--line); }
.variant-price { display:flex; flex-direction:column; gap:2px; min-width:0; }
.variant-label { font-size:.8rem; overflow-wrap:anywhere; }
.cart-variant { font-weight:500; }
@media(max-width:600px) { .card-price-options .card-foot { align-items:flex-start; gap:8px; } }