/* San Mai ordering (new interface). Light, fast, readable in daylight at a
   market stall, in the same world as /home/ (brand blue, pink accent,
   no beige). Brand blue carries the header and every primary action;
   pink marks the mix, the cart count and the stickers.
   Shape rule: actions pill, cards 18px, option boxes and inputs 10-12px. */

:root {
    --blue: #004190;
    --blue-press: #00357a;
    --blue-tint: #e3ecf9;
    --blue-tint-2: #cfe0f7;
    --peri: #91a2d1;
    --bg: #f3f5fb;
    --surface: #ffffff;
    --ink: #0e1a33;
    --ink-2: #4a5570;
    --ink-3: #6b7590;
    --line: #dde3f0;
    --accent: #ff8fc0;
    --accent-ink: #002f6b;
    --pink: #ff8fc0;              /* alias of --accent: ready ticket, picked mood */
    --pink-ink: #002a61;          /* any text or line on pink (6.6:1) */
    --pink-deep: #e0457b;
    --paper-2: #dfe5f7;           /* secondary text on blue */
    --blue-deep: #00367a;
    --peri-light: #c6cced;
    --danger: #b42318;
    /* kitchen load tones (queue pill, busy popup, cart note) */
    --calm-bg: #eceff6;
    --warm-bg: #fff3cc; --warm-ink: #6e4400; --warm-edge: #efc14f;
    --hot-bg: #fde6e3; --hot-ink: #a0170d; --hot-edge: #f0a097;
    --ok: #127a4b;
    --radius: 18px;
    --radius-in: 12px;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --gutter: 16px;
    --bar-h: 60px;
    --cats-h: 56px;
    --font-latin: "Archivo", ui-sans-serif, sans-serif;
    --font-he: "Assistant", "Archivo", ui-sans-serif, sans-serif;
    --font-mono: "DM Mono", ui-monospace, monospace;
    color-scheme: light;
}
/* DM Mono has no Hebrew glyphs: prices and tags fall back to Assistant. */
html[dir="rtl"] { --font-mono: "Assistant", sans-serif; }
@media (min-width: 720px) { :root { --gutter: 28px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--font-latin); font-size: 16px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
    /* clip, not hidden: with html's overflow:hidden while a sheet is open,
       "hidden" turns body into a scroll container and unsticks the header. */
    overflow-x: clip;
}
html[dir="rtl"] body { font-family: var(--font-he); font-size: 17px; }
::selection { background: var(--blue-tint-2); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
    font-weight: 800; font-size: 1rem; text-decoration: none; white-space: nowrap;
    transition: transform 140ms var(--ease-out), background-color 160ms ease, opacity 160ms ease;
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-quiet { background: var(--blue-tint); color: var(--blue); }
@media (hover: hover) {
    .btn-primary:hover:not(:disabled) { background: var(--blue-press); }
    .btn-quiet:hover:not(:disabled) { background: var(--blue-tint-2); }
}
.btn-block { width: 100%; }
.btn-grow { flex: 1; justify-content: space-between; padding: 0 22px; }
.btn-price { font-variant-numeric: tabular-nums; opacity: 0.92; }
.btn.is-busy { pointer-events: none; opacity: 0.7; }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--blue); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Header ---------- */
.bar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 12px;
    height: var(--bar-h); padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
    box-sizing: content-box;
    background: var(--blue); color: #fff;
}
.bar-home { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; min-height: 44px; }
.bar-home i { font-size: 20px; opacity: 0.85; }
.bar-home img { height: 38px; width: auto; }
.bar-status {
    margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.86rem; font-weight: 700; color: #dfe5f7;
}
.bar-status .dot { width: 8px; height: 8px; border-radius: 99px; background: #5fe0a0; }
.bar-status[data-open="false"] .dot { background: #ff9f8a; }
.bar-lang {
    width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 800; font-size: 0.85rem;
}

.banner { padding: 10px var(--gutter); font-size: 0.9rem; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.banner-test { background: var(--blue-tint); color: var(--blue-deep); box-shadow: inset 0 -1px 0 var(--blue-tint-2); }
.banner-safety { background: #fde8e6; color: #7a1a12; }
.banner-safety a { color: inherit; }

/* ---------- Category chips ---------- */
.cats {
    position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top)); z-index: 20;
    height: var(--cats-h); background: rgba(243, 245, 251, 0.92);
    backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent; transition: border-color 200ms ease;
}
.cats.stuck { border-bottom-color: var(--line); }
.cats-track {
    display: flex; gap: 8px; height: 100%; align-items: center;
    padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    max-width: 1180px; margin: 0 auto;
}
.cats-track::-webkit-scrollbar { display: none; }
.chip {
    flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
    background: transparent; color: var(--ink-2); font-weight: 700; font-size: 0.95rem;
    transition: background-color 180ms ease, color 180ms ease;
}
.chip[aria-current="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) { .chip:not([aria-current="true"]):hover { background: var(--blue-tint); color: var(--ink); } }

/* ---------- Layout ---------- */
.menu { max-width: 1180px; margin: 0 auto; padding: 8px max(var(--gutter), env(safe-area-inset-right)) 140px max(var(--gutter), env(safe-area-inset-left)); }
.intro { padding: 12px 0 8px; display: grid; gap: 14px; }
.intro-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
/* Orders in the kitchen: grey under 5, yellow 5 to 8, red above 8; the
   last-hour average wait under it. */
.queue { color: var(--ink-2); font-size: 0.92rem; font-weight: 600; display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.queue-count, .queue-wait { display: inline-flex; gap: 6px; align-items: center; }
.queue-count { padding: 5px 11px; border-radius: 999px; background: var(--calm-bg); color: var(--ink-2); transition: background-color 200ms ease, color 200ms ease; }
.q-warm .queue-count { background: var(--warm-bg); color: var(--warm-ink); box-shadow: inset 0 0 0 1px var(--warm-edge); }
.q-hot .queue-count { background: var(--hot-bg); color: var(--hot-ink); box-shadow: inset 0 0 0 1px var(--hot-edge); font-weight: 800; }
.queue-wait { font-size: 0.85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .queue-count { transition: none; } }
.closed-note {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
    background: var(--surface); border-radius: var(--radius); box-shadow: 0 1px 0 var(--line);
}
.closed-note i { font-size: 22px; color: var(--blue); margin-top: 1px; }
.closed-note p { font-weight: 600; }

.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--blue-tint); }
.seg button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
    border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
    font-weight: 700; font-size: 0.95rem; cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 26, 51, 0.12), 0 2px 8px -2px rgba(14, 26, 51, 0.12); }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.seg-wide { display: flex; }
.seg-wide button { flex: 1; justify-content: center; min-height: 46px; }

section.cat { scroll-margin-top: calc(var(--bar-h) + var(--cats-h) + 12px + env(safe-area-inset-top)); padding-top: 28px; }
.cat-title {
    font-weight: 850; font-stretch: 82%; font-size: clamp(1.9rem, 5vw, 2.5rem);
    line-height: 1; letter-spacing: -0.02em; margin-bottom: 16px;
}
html[dir="rtl"] .cat-title { font-weight: 800; letter-spacing: 0; }
.cat-note { color: var(--ink-2); font-size: 0.88rem; margin: -8px 0 16px; }

/* ---------- Mix feature card ---------- */
.mix {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
    width: 100%; margin-bottom: 14px; padding: 18px 18px 18px 22px; border: 0; cursor: pointer;
    border-radius: var(--radius); background: var(--blue); color: #fff; text-align: start;
    transition: transform 160ms var(--ease-out), background-color 180ms ease;
    overflow: hidden; position: relative;
}
html[dir="rtl"] .mix { padding: 18px 22px 18px 18px; }
.mix:active { transform: scale(0.985); }
@media (hover: hover) { .mix:hover { background: var(--blue-press); } .mix:hover img { transform: rotate(18deg) scale(1.03); } }
.mix-copy { display: grid; gap: 6px; }
.mix-title { font-weight: 850; font-stretch: 80%; font-size: clamp(1.5rem, 5.5vw, 2rem); line-height: 1.02; letter-spacing: -0.015em; }
html[dir="rtl"] .mix-title { font-weight: 800; letter-spacing: 0; }
.mix-sub { color: #dfe5f7; font-size: 0.95rem; max-width: 34ch; }
.mix-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; justify-self: start; background: var(--accent); color: var(--accent-ink); font-weight: 800; border-radius: 999px; padding: 8px 14px; font-size: 0.92rem; }
.mix img { width: clamp(120px, 34vw, 190px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0, 18, 58, 0.45)); transition: transform 600ms var(--ease-out); margin-inline-end: -8px; }

/* ---------- Top cards: mix, kombucha, post-and-tag ---------- */
.top-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 6px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.top-cards::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .top-cards { grid-auto-columns: calc((100% - 24px) / 3); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.tc-dots { display: flex; justify-content: center; gap: 6px; padding: 6px 0 2px; }
.tc-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--blue-tint-2); cursor: pointer; transition: width 260ms var(--ease-out), background-color 200ms ease; position: relative; }
.tc-dot::after { content: ""; position: absolute; inset: -12px -8px; }   /* tap target at least 24px */
.tc-dot[aria-current="true"] { width: 22px; background: var(--blue); }
.tc-pale { background: var(--blue-tint-2); color: var(--ink); }
.tc-pale .tc-sub { color: var(--ink-2); } .tc-pale .tc-cta { color: var(--blue); }
.tc-blue { background: var(--blue); color: #fff; }
.tc-blue .tc-sub { color: #dfe5f7; } .tc-blue .tc-cta { color: #fff; }
.tc-white { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.tc-white .tc-sub { color: var(--ink-2); } .tc-white .tc-cta { color: var(--blue); }
div.tc { cursor: default; }
.tc {
    scroll-snap-align: start; position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
    min-height: 124px; padding: 16px; border-radius: var(--radius); border: 0; cursor: pointer;
    text-align: start; text-decoration: none; font: inherit;
    transition: transform 160ms var(--ease-out);
}
.tc:active { transform: scale(0.985); }
.tc:disabled { cursor: default; opacity: 0.7; }
.tc-copy { display: grid; gap: 6px; align-content: center; min-width: 0; }
/* Halloween night card (style "halloween"): moon behind the dish, bats flying across. */
.tc-halloween {
    --moon-x: calc(100% - 50px);
    color: #fff;
    background:
        radial-gradient(circle at var(--moon-x) 50%, #ffb45e 0 30px, rgba(255, 154, 60, 0.35) 31px 46px, rgba(255, 154, 60, 0.12) 47px 72px, transparent 73px),
        linear-gradient(165deg, #2d2266 0%, #170f3a 55%, #0d0924 100%);
}
html[dir="rtl"] .tc-halloween { --moon-x: 50px; }
.tc-halloween .tc-sub { color: #dcd6f5; }
.tc-halloween .tc-cta { color: #ffb45e; }
.tc-halloween .tc-copy, .tc-halloween > img { position: relative; z-index: 1; }
.tc-halloween > img { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); }
.tc-bats { position: absolute; inset: 0; pointer-events: none; container-type: size; overflow: hidden; }
.tc-bats i { position: absolute; left: 0; top: 0; width: 36px; height: 16px; animation: tc-bat-fly 11s linear infinite; }
.tc-bats i::before {
    content: ""; position: absolute; inset: 0; background: #07041a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath d='M32%209%20L34%204%20L35.5%209%20Q42%206%2050%204%20Q58%203%2063%207%20Q58%2011%2057%2018%20Q54%2013%2050%2015%20Q48%2019%2046%2021%20Q43%2015%2039%2017%20Q36%2020%2032%2026%20Q28%2020%2025%2017%20Q21%2015%2018%2021%20Q16%2019%2014%2015%20Q10%2013%207%2018%20Q6%2011%201%207%20Q6%203%2014%204%20Q22%206%2028.5%209%20L30%204%20Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath d='M32%209%20L34%204%20L35.5%209%20Q42%206%2050%204%20Q58%203%2063%207%20Q58%2011%2057%2018%20Q54%2013%2050%2015%20Q48%2019%2046%2021%20Q43%2015%2039%2017%20Q36%2020%2032%2026%20Q28%2020%2025%2017%20Q21%2015%2018%2021%20Q16%2019%2014%2015%20Q10%2013%207%2018%20Q6%2011%201%207%20Q6%203%2014%204%20Q22%206%2028.5%209%20L30%204%20Z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: tc-bat-flap 260ms ease-in-out infinite alternate;
}
.tc-bats i:nth-child(1) { --y0: 18px; --y1: 4px; animation-delay: -2s; }
.tc-bats i:nth-child(2) { --y0: 70px; --y1: 38px; width: 24px; height: 11px; animation-duration: 14s; animation-delay: -9s; }
.tc-bats i:nth-child(3) { --y0: 42px; --y1: 60px; width: 46px; height: 20px; animation-duration: 9s; animation-delay: -5s; }
.tc-bats i:nth-child(4) { --y0: 96px; --y1: 80px; width: 22px; height: 10px; animation-duration: 16s; animation-delay: -12s; }
.tc-bats i:nth-child(5) { --y0: 8px; --y1: 30px; width: 30px; height: 13px; animation-duration: 12s; animation-delay: -7.5s; }
.tc-bats i:nth-child(2)::before, .tc-bats i:nth-child(4)::before { animation-duration: 200ms; }
@keyframes tc-bat-fly {
    0% { transform: translate(-40px, var(--y0)); }
    50% { transform: translate(calc(50cqw + 0px), var(--y1)); }
    100% { transform: translate(calc(100cqw + 40px), var(--y0)); }
}
.tc-web { position: absolute; top: 0; right: 0; width: 70px; height: 70px; fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.1; }
html[dir="rtl"] .tc-web { right: auto; left: 0; transform: scaleX(-1); }
.tc-spider { position: absolute; top: 0; right: 22px; width: 22px; height: 18px; animation: tc-spider-dangle 3.2s ease-in-out infinite alternate; }
html[dir="rtl"] .tc-spider { right: auto; left: 22px; }
.tc-spider::before { content: ""; position: absolute; left: 50%; bottom: 60%; width: 1px; height: 80px; background: rgba(255, 255, 255, 0.45); }
.tc-spider svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@keyframes tc-spider-dangle { 0% { transform: translateY(4px); } 70% { transform: translateY(20px); } 100% { transform: translateY(17px) rotate(4deg); } }
@keyframes tc-bat-flap { from { transform: scaleY(1); } to { transform: scaleY(0.35) translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
    .tc-bats i, .tc-bats i::before, .tc-spider { animation: none; }
    .tc-spider { transform: translateY(14px); }
    .tc-bats i:nth-child(1) { transform: translate(38cqw, 10px); } .tc-bats i:nth-child(2) { transform: translate(55cqw, 64px); }
    .tc-bats i:nth-child(3) { transform: translate(8cqw, 92px); } .tc-bats i:nth-child(4), .tc-bats i:nth-child(5) { display: none; }
}

/* Optional admin-set sticker (announcement.sticker): a die-cut badge, e.g. "Halloween special". */
.tc-sticker {
    justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 2px;
    padding: 4px 11px 4px 9px; border-radius: 999px; background: #15110d; color: #ff9a3c;
    box-shadow: 0 0 0 2.5px #fff, 0 6px 14px rgba(0, 0, 0, 0.28);
    font-weight: 900; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    transform: rotate(-4deg); transform-origin: left center; animation: tc-sticker-in 700ms var(--ease-out) both;
}
html[dir="rtl"] .tc-sticker { transform: rotate(4deg); transform-origin: right center; letter-spacing: 0; animation-name: tc-sticker-in-rtl; }
.tc-sticker i { font-size: 0.95rem; }
@keyframes tc-sticker-in { 0% { transform: rotate(-14deg) scale(0.6); opacity: 0; } 60% { transform: rotate(2deg) scale(1.06); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); } }
@keyframes tc-sticker-in-rtl { 0% { transform: rotate(14deg) scale(0.6); opacity: 0; } 60% { transform: rotate(-2deg) scale(1.06); opacity: 1; } 100% { transform: rotate(4deg) scale(1); } }
@media (hover: hover) { .tc:hover .tc-sticker { transform: rotate(3deg) scale(1.05); } html[dir="rtl"] .tc:hover .tc-sticker { transform: rotate(-3deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .tc-sticker { animation: none; } }
.tc-title { font-weight: 850; font-stretch: 85%; font-size: 1.2rem; line-height: 1.05; letter-spacing: -0.01em; }
html[dir="rtl"] .tc-title { font-weight: 800; letter-spacing: 0; }
.tc-sub { font-size: 0.86rem; line-height: 1.35; }
.tc-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.tc img { width: 68px; height: 68px; object-fit: contain; margin-inline-end: -6px; transition: transform 500ms var(--ease-out); }
@media (hover: hover) { .tc:hover img { transform: rotate(-8deg) scale(1.05); } }
.tc-mix { background: var(--blue); color: #fff; }
.tc-mix .tc-sub { color: #dfe5f7; }
.tc-mix .tc-cta { color: #fff; }
.tc-mix img { filter: drop-shadow(0 10px 14px rgba(0, 18, 58, 0.45)); }
.tc-kombucha { background: var(--blue-tint-2); color: var(--ink); }
.tc-kombucha .tc-sub { color: var(--ink-2); }
.tc-kombucha .tc-cta { color: var(--blue); }
.tc-ugc { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.tc-ugc .tc-sub { color: var(--ink-2); }
.tc-ugc .tc-cta { color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.tc-icons { display: grid; gap: 6px; font-size: 22px; color: var(--blue); align-self: center; }
.tc-icons i:last-child { color: #e0457b; }

/* ---------- Gyoza cards ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding-top: 8px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Gyoza cards: the photo tile IS the card; name and price sit under it on the
   page, so a long name never leaves an empty white box next to a short one. */
.card {
    position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; text-align: start;
    padding: 0; border: 0; cursor: pointer; background: none; color: inherit;
    transition: transform 160ms var(--ease-out);
}
.card:active:not(:disabled) { transform: scale(0.98); }
@media (hover: hover) { .card:hover:not(:disabled) .card-img { border-color: var(--blue); } .card:hover:not(:disabled) .card-img img { transform: rotate(-5deg) scale(1.04); } }
.card-img { position: relative; background: var(--blue-tint); aspect-ratio: 1; display: grid; place-items: center; padding: 10px; border-radius: var(--radius); border: 1.5px solid transparent; transition: border-color 160ms ease; }
.card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms var(--ease-out); }
.card-img img.photo { object-fit: cover; border-radius: 12px; }
.card-body { display: grid; gap: 2px; align-content: start; padding: 10px 4px 0; }
.card-name { font-weight: 800; font-size: 1rem; line-height: 1.25; }
.card-price { color: var(--ink-2); font-size: 0.88rem; }
/* The figures face is for money and counts only; the words around them stay in the body font. */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.card:disabled { cursor: not-allowed; }
.card:disabled .card-img img { filter: grayscale(1); opacity: 0.45; }
.card:disabled .card-name { color: var(--ink-3); }
.tag {
    position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1;
    padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 800;
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(14, 26, 51, 0.12);
}
.tag-limited { background: var(--accent); color: var(--accent-ink); }
.tag-off { background: var(--ink); color: #fff; }
.card-signs { position: absolute; bottom: 8px; inset-inline-start: 8px; display: flex; gap: 4px; }
.sign-dot { width: 28px; height: 28px; border-radius: 999px; background: var(--surface); display: grid; place-items: center; font-size: 15px; box-shadow: 0 1px 2px rgba(14, 26, 51, 0.16); }
.sign-dot.vegan i, .sign-dot.vegetarian i { color: var(--ok); }
.sign-dot.spicy i { color: #c2410c; }
.sign-dot.chef i { color: var(--blue); }
.sign-dot.gf i { color: #b7791f; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* Meat and dairy together (dietary.meatAndDairy): a loud red stamp on the photo,
   separate from the top sticker, so nobody orders it by surprise. */
.md-stamp {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px; border-radius: 999px;
    background: #c4161c; color: #fff; font-weight: 900; font-size: 0.76rem; line-height: 1.1; white-space: nowrap;
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(120, 10, 10, 0.35);
}
.md-stamp i { color: #ffd23f; font-size: 0.95rem; }
.mp-img > .md-stamp { position: absolute; z-index: 1; top: 10px; inset-inline-start: 8px; transform: rotate(-4deg); }
.mp-img > .md-stamp.md-under { top: 42px; }
html[dir="rtl"] .mp-img > .md-stamp { transform: rotate(4deg); }
/* Stamps on the dish photo (Halloween, Meat + dairy): bottom corner, tilted, stacked. */
.photo-stamps {
    position: absolute; z-index: 1; bottom: 10px; inset-inline-end: 8px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none;
}
.photo-stamps > * { transform: rotate(-4deg); }
html[dir="rtl"] .photo-stamps > * { transform: rotate(4deg); }
.photo-stamps .lbl-halloween {
    height: auto; padding: 5px 11px 5px 9px; border-radius: 999px; font-weight: 900; font-size: 0.74rem;
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0, 0, 0, 0.35);
}
.photo-stamps .lbl-halloween svg { width: 24px; height: 11px; }
/* Rows: the "+" holds the bottom corner of the small photo, so the stamp rides on its top edge. */
.row-media .photo-stamps { bottom: auto; top: -8px; inset-inline-end: -6px; }
.row-media .photo-stamps .lbl-halloween { padding: 3px 8px 3px 7px; font-size: 0.66rem; }
.md-stamp.md-inline { padding: 2px 8px 2px 6px; font-size: 0.72rem; box-shadow: none; vertical-align: 1px; }
.mix-row-name .md-stamp { margin-inline-start: 6px; }
.line-md { margin-top: 4px; }
.md-note {
    flex-basis: 100%; display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; padding: 10px 12px;
    border-radius: 12px; background: #fdecea; box-shadow: inset 0 0 0 1.5px #f3b8b3; color: #7a1010;
}
.md-note > i { font-size: 1.35rem; color: #c4161c; flex: none; }
.md-note div { display: grid; gap: 2px; }
.md-note strong { font-weight: 900; font-size: 0.98rem; }
.md-note span { font-size: 0.86rem; color: #7a1010; }

/* ---------- Rows (everything that isn't gyoza) ---------- */
.rows { display: grid; gap: 10px; }
@media (min-width: 900px) { .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.row {
    display: grid; grid-template-columns: 1fr 96px; gap: 14px; align-items: center;
    padding: 12px; background: var(--surface); border-radius: var(--radius);
    box-shadow: 0 1px 0 var(--line); position: relative;
}
.row-main { display: grid; gap: 4px; text-align: start; background: none; border: 0; padding: 4px; cursor: pointer; color: inherit; min-height: 88px; align-content: center; }
.row-name { font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.row-desc { color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-price { color: var(--ink); font-size: 0.9rem; }
.row-media { position: relative; width: 96px; height: 96px; border-radius: 14px; background: var(--blue-tint); display: grid; place-items: center; }
.row-media img { width: 88%; height: 88%; object-fit: contain; }
.row-add {
    position: absolute; bottom: -6px; inset-inline-end: -6px;
    min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--blue); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    box-shadow: 0 2px 0 rgba(0, 20, 60, 0.12), 0 6px 14px -4px rgba(0, 45, 110, 0.45);
    transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.row-add:active { transform: scale(0.92); }
.row-add.has-qty { background: var(--ink); }
.row.off .row-media img { filter: grayscale(1); opacity: 0.45; }
.row.off .row-name { color: var(--ink-3); }
.row .tag { top: 8px; inset-inline-start: auto; inset-inline-end: 8px; }

.gate {
    padding: 22px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 0 var(--line);
    display: grid; gap: 14px; justify-items: start;
}
.gate h3 { font-size: 1.2rem; font-weight: 800; }
.gate p { color: var(--ink-2); }
.gate-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.signs { display: flex; flex-wrap: wrap; gap: 6px; }
.sign { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--blue-tint); font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.sign i { font-size: 0.95rem; }
.sign.vegan i, .sign.vegetarian i { color: var(--ok); }
.sign.spicy i { color: #c2410c; }
.sign.chef i { color: var(--blue); }

.menu-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; color: var(--ink-2); font-size: 0.88rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { top: 12px; }
.tc-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* 44px hit area, the same 32px disc as before (negative margin keeps the dots row height). */
.tc-pause { position: relative; width: 44px; height: 44px; margin-block: -6px; padding: 0; border-radius: 999px; border: 0; background: none; color: var(--blue); display: grid; place-items: center; cursor: pointer; font-size: 14px; -webkit-tap-highlight-color: transparent; }
.tc-pause::before { content: ""; position: absolute; inset: 6px; border-radius: 999px; background: var(--blue-tint); transition: background-color 160ms ease; }
.tc-pause i { position: relative; }
@media (hover: hover) { .tc-pause:hover::before { background: var(--blue-tint-2); } }
.menu-foot a { color: var(--blue); font-weight: 700; }

/* ---------- Skeleton ---------- */
.skeleton { padding-top: 28px; display: grid; gap: 16px; }
.sk { background: linear-gradient(90deg, #e4e9f4 0%, #eef1f8 50%, #e4e9f4 100%); background-size: 200% 100%; animation: sk 1.3s linear infinite; border-radius: var(--radius); }
.sk-title { height: 34px; width: 40%; border-radius: 10px; }
.sk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sk-card { aspect-ratio: 0.82; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.load-fail { padding: 48px 0; display: grid; gap: 16px; justify-items: start; }
.load-fail h2 { font-size: 1.4rem; font-weight: 800; }

/* ---------- Cart bar ---------- */
.cartbar {
    position: fixed; z-index: 25; inset-inline: var(--gutter);
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-width: 560px; margin: 0 auto;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    min-height: 60px; padding: 0 20px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--ink); color: #fff; font-weight: 800; font-size: 1rem;
    box-shadow: 0 10px 30px -8px rgba(14, 26, 51, 0.55);
    transition: transform 220ms var(--ease-out), opacity 220ms ease;
}
html[dir="rtl"] .cartbar { padding: 0 12px 0 20px; }
.cartbar:active { transform: scale(0.98); }
.cartbar-count { min-width: 36px; height: 36px; border-radius: 999px; background: #fff; color: var(--blue); display: grid; place-items: center; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.cartbar-label { text-align: start; }
.cartbar-total { font-variant-numeric: tabular-nums; }
.cartbar.bump .cartbar-count { animation: bump 380ms var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cartbar.bump .cartbar-count { animation: none; } }

/* ---------- Sheets (native <dialog>) ---------- */
dialog.sheet {
    position: fixed; inset: auto 0 0 0; margin: 0 auto; padding: 0; border: 0;
    width: 100%; max-width: 640px; max-height: min(92dvh, 900px);
    border-radius: 24px 24px 0 0; background: var(--surface); color: var(--ink);
    display: none; flex-direction: column; overflow: hidden;
    box-shadow: 0 -10px 40px -10px rgba(14, 26, 51, 0.35);
    transform: translateY(100%);
    transition: transform 420ms var(--ease-drawer), display 420ms allow-discrete, overlay 420ms allow-discrete;
}
dialog.sheet[open] { display: flex; transform: translateY(0); }
@starting-style { dialog.sheet[open] { transform: translateY(100%); } }
dialog.sheet::backdrop {
    background: rgba(8, 16, 36, 0); transition: background-color 320ms ease, display 320ms allow-discrete, overlay 320ms allow-discrete;
}
dialog.sheet[open]::backdrop { background: rgba(8, 16, 36, 0.5); }
@starting-style { dialog.sheet[open]::backdrop { background: rgba(8, 16, 36, 0); } }
dialog.sheet.dragging { transition: none; }
@media (min-width: 900px) {
    dialog.sheet { inset: 0; margin: auto; border-radius: 24px; max-height: min(88dvh, 860px); transform: translateY(24px) scale(0.98); opacity: 0; transition: transform 320ms var(--ease-out), opacity 220ms ease, display 320ms allow-discrete, overlay 320ms allow-discrete; }
    dialog.sheet[open] { transform: none; opacity: 1; }
    @starting-style { dialog.sheet[open] { transform: translateY(24px) scale(0.98); opacity: 0; } }
    dialog.sheet-cart { inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: none; border-radius: 0; width: 460px; max-width: 460px; transform: translateX(100%); opacity: 1; }
    html[dir="rtl"] dialog.sheet-cart { inset: 0 auto 0 0; transform: translateX(-100%); }
    dialog.sheet-cart[open], html[dir="rtl"] dialog.sheet-cart[open] { transform: none; }
    @starting-style { dialog.sheet-cart[open] { transform: translateX(100%); } html[dir="rtl"] dialog.sheet-cart[open] { transform: translateX(-100%); } }
    .sheet-grab { display: none; }
}
@media (prefers-reduced-motion: reduce) { dialog.sheet, dialog.sheet::backdrop { transition: none; } }

.sheet-grab { flex: none; height: 22px; display: grid; place-items: center; cursor: grab; touch-action: none; background: var(--surface); }
.sheet-grab span { width: 40px; height: 5px; border-radius: 99px; background: rgba(14, 26, 51, 0.22); }
.sheet-close {
    position: absolute; top: 14px; inset-inline-end: 14px; z-index: 4;
    width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.92); color: var(--ink); display: grid; place-items: center;
    box-shadow: 0 1px 3px rgba(14, 26, 51, 0.18);
}
/* flex-basis auto + min-height 0: Safari collapses a flex:1 (basis 0%) child
   to nothing when the dialog only has a max-height, which showed the dish
   sheet as a bare footer on iPhone. */
.sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
dialog.sheet:focus { outline: none; }
.sheet-foot {
    flex: none; display: flex; gap: 12px; align-items: center;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
}

/* dish */
.dish-media { background: var(--blue-tint); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.dish-media img { width: 78%; height: 88%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 45, 110, 0.25)); }
.dish-media.photo img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.dish-body { padding: 20px var(--gutter) 28px; display: grid; gap: 14px; }
.dish-body h2 { font-weight: 850; font-stretch: 85%; font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.015em; }
html[dir="rtl"] .dish-body h2 { font-weight: 800; letter-spacing: 0; }
.dish-desc { color: var(--ink-2); }
.block-title { font-weight: 800; font-size: 1rem; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.block-title small { color: var(--ink-3); font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* Sizes: a row of outlined boxes, name over a mono price; selected = pale blue. */
.opts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.opt {
    position: relative; display: grid; gap: 4px; align-content: center;
    min-height: 72px; padding: 12px 14px; border-radius: 10px; cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--line); color: var(--blue);
    transition: border-color 150ms ease, background-color 150ms ease, transform 120ms var(--ease-out);
}
.opt:hover { border-color: var(--blue); }
.opt:active { transform: scale(0.97); }
.opt-name { font-weight: 700; font-size: 1rem; line-height: 1.15; }
.opt:has(input:checked) { border-color: var(--blue); background: var(--blue-tint-2); }
.opt:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.opt-price { font-family: var(--font-mono); font-size: 0.88rem; color: var(--ink-2); }
.optset { border: 0; margin: 0; padding: 0; min-width: 0; }
.optset > legend { float: left; width: 100%; padding: 0; }
.optset > legend + * { clear: both; }

/* Options (a dish's variants, e.g. which gyoza goes in the ramen): full width
   radio rows, the label wraps, the price difference at the inline end. */
.optlist { display: grid; gap: 8px; }
.orow {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
    border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 150ms ease, background-color 150ms ease, transform 120ms var(--ease-out);
}
.orow input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--blue); cursor: pointer; }
.orow input:focus-visible { outline: none; }
.orow:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.orow:has(input:checked) { border-color: var(--blue); background: var(--blue-tint-2); }
.orow:active { transform: scale(0.98); }
@media (hover: hover) { .orow:not(.off):hover { border-color: var(--blue); } }
.orow-thumb { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-tint); display: grid; place-items: center; overflow: hidden; }
.orow-thumb img { width: 90%; height: 90%; object-fit: contain; }
.orow-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.orow-price { flex: none; margin-inline-start: auto; font-family: var(--font-mono); font-size: 0.88rem; color: var(--ink-2); white-space: nowrap; }
.orow-price:empty { display: none; }
.orow.off { cursor: not-allowed; background: var(--bg); }
.orow.off .orow-name { color: var(--ink-3); }
.orow.off input { cursor: not-allowed; }
.orow.off .orow-price { font-family: inherit; font-weight: 700; color: var(--ink-2); }
.orow.off .orow-thumb img { filter: grayscale(1); opacity: 0.5; }
.opt:has(input:disabled) .opt-price { font-family: inherit; font-weight: 700; }
@media (max-width: 340px) { .orow { gap: 10px; padding: 10px 12px; } .orow-thumb { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .orow { transition: none; } .orow:active { transform: none; } }
html.a11y-no-motion .orow { transition: none; }

.mixer { display: grid; gap: 8px; }
.mix-meter { display: flex; gap: 6px; margin: -2px 0 6px; }
.mix-meter span { flex: 1; height: 6px; border-radius: 99px; background: var(--line); transition: background-color 200ms ease; }
.mix-meter span.on { background: var(--blue); }
.mix-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 8px 8px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); }
html[dir="rtl"] .mix-row { padding: 8px 16px 8px 8px; }
.mix-row.picked { box-shadow: inset 0 0 0 2px var(--blue); background: var(--blue-tint); }
.mix-row-name { font-weight: 700; line-height: 1.25; }
.mix-row-price { color: var(--ink-2); font-size: 0.88rem; font-variant-numeric: tabular-nums; }

.qty { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--blue-tint); }
.qty button { width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer; background: var(--surface); color: var(--blue); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(14, 26, 51, 0.12); transition: transform 120ms var(--ease-out); }
.qty button:active:not(:disabled) { transform: scale(0.9); }
.qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.qty output { min-width: 28px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.qty-sm button { width: 40px; height: 40px; }

/* "Goes well with": small tiles in a row, tap to add (a + that turns into ✓). */
.pairs { display: grid; grid-auto-flow: column; grid-auto-columns: 124px; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.pairs::-webkit-scrollbar { display: none; }
.pair { position: relative; display: grid; gap: 4px; align-content: start; cursor: pointer; }
.pair input { position: absolute; opacity: 0; pointer-events: none; }
.pair-img { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: var(--blue-tint); border: 1.5px solid transparent; transition: border-color 150ms ease, background-color 150ms ease; }
.pair-img img { width: 82%; height: 82%; object-fit: contain; transition: transform 300ms var(--ease-out); }
.pair:hover .pair-img img { transform: rotate(-6deg) scale(1.04); }
.pair:has(input:checked) .pair-img { border-color: var(--blue); background: var(--blue-tint-2); }
.pair:has(input:focus-visible) .pair-img { outline: 3px solid var(--blue); outline-offset: 2px; }
.pair-name { font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.pair-price { color: var(--ink-2); font-family: var(--font-mono); font-size: 0.82rem; }
.pair-check { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); color: var(--blue); box-shadow: 0 1px 3px rgba(14, 26, 51, 0.2); transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.pair-check .ph-check { display: none; }
.pair:has(input:checked) .pair-check { background: var(--blue); color: #fff; transform: scale(1.06); }
.pair:has(input:checked) .pair-check .ph-check { display: block; }
.pair:has(input:checked) .pair-check .ph-plus { display: none; }

/* Cart: "Complete your order" row */
.upsell { display: grid; gap: 10px; padding: 16px; margin: 0 calc(var(--gutter) * -1); background: var(--bg); border-block: 1px solid var(--line); }
.upsell-title { font-size: 1.05rem; font-weight: 800; }
.upsell-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.upsell-rail::-webkit-scrollbar { display: none; }
.up-card { display: grid; gap: 4px; align-content: start; text-align: start; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.up-img { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.up-img img { width: 80%; height: 80%; object-fit: contain; }
.up-img:has(img.img-failed) { background: var(--blue-tint); }
.up-plus { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 30px; height: 30px; border-radius: 999px; background: var(--blue); color: #fff; display: grid; place-items: center; transition: transform 140ms var(--ease-out); }
.up-card:active .up-plus { transform: scale(0.88); }
.up-name { font-weight: 700; font-size: 0.86rem; line-height: 1.2; }
.up-price { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); }

.dish-more { border-top: 1px solid var(--line); padding-top: 12px; }
.dish-more summary { cursor: pointer; font-weight: 700; color: var(--blue); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; }
.dish-more summary::-webkit-details-marker { display: none; }
.dish-more summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-inline-start: 4px; transition: transform 200ms ease; }
.dish-more[open] summary::after { transform: rotate(-135deg); }
.dish-more-body { display: grid; gap: 10px; color: var(--ink-2); font-size: 0.92rem; padding: 6px 0 4px; }
.dish-more-body strong { color: var(--ink); }

/* cart */
.cart-body { padding: 26px var(--gutter) 24px; display: grid; gap: 20px; }
.cart-body h2 { font-weight: 850; font-stretch: 85%; font-size: 1.9rem; line-height: 1; }
html[dir="rtl"] .cart-body h2 { font-weight: 800; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; }
.line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.line:first-child { padding-top: 0; }
.line-img { width: 56px; height: 56px; border-radius: 12px; background: var(--blue-tint); overflow: hidden; }
.line-img img { width: 100%; height: 100%; object-fit: contain; }
.line-name { font-weight: 800; line-height: 1.25; }
.line-sum { color: var(--ink-2); font-size: 0.86rem; line-height: 1.35; }
.line-price { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.line-end { display: grid; gap: 6px; justify-items: end; }
.line.unavailable { opacity: 0.5; }
.line-warn { color: var(--danger); font-size: 0.82rem; font-weight: 700; }
.empty-cart { padding: 24px 0; color: var(--ink-2); display: grid; gap: 12px; justify-items: start; }

.checkout { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-weight: 700; font-size: 0.92rem; padding: 0; }
.field input {
    width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--radius-in);
    border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
    font: inherit; font-size: 16px; transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 65, 144, 0.16); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
html[dir="rtl"] input[dir="ltr"] { text-align: right; }
.hint { color: var(--ink-3); font-size: 0.84rem; }
.err { color: var(--danger); font-size: 0.86rem; font-weight: 700; }

.club-opt { padding: 16px; border-radius: var(--radius); background: var(--blue-tint); display: grid; gap: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.check span { display: grid; gap: 2px; }
.check small { color: var(--ink-2); font-size: 0.88rem; }
.check-sm span { font-size: 0.88rem; color: var(--ink-2); }
.club-fields { display: grid; gap: 14px; }
.club-opt .hint { color: var(--ink-2); line-height: 1.4; }     /* ink-3 is under 4.5:1 on the tint */
/* Preferred channels: native checkboxes as 44px chips that wrap (fits 320px). */
.channels legend { float: left; width: 100%; line-height: 1.35; margin-bottom: 8px; }
.ch-chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.ch {
    position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px;
    border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line);
    font-weight: 700; font-size: 0.95rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: box-shadow 150ms ease, background-color 150ms ease, transform 120ms var(--ease-out);
}
.field .ch input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--blue); cursor: pointer; border: 0; box-shadow: none; }
.field .ch input:focus { box-shadow: none; }
.ch:has(input:checked) { background: var(--blue-tint-2); box-shadow: inset 0 0 0 1.5px var(--blue); }
.ch:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.ch:active { transform: scale(0.97); }
@media (hover: hover) { .ch:hover { box-shadow: inset 0 0 0 1.5px var(--blue); } }
html[dir="rtl"] .ch { padding: 0 12px 0 14px; }
@media (prefers-reduced-motion: reduce) { .ch { transition: none; } .ch:active { transform: none; } }
html.a11y-no-motion .ch { transition: none; }

.promo { display: grid; gap: 8px; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; min-height: 48px; padding: 0 14px; border-radius: var(--radius-in); border: 1.5px solid var(--line); font: inherit; font-size: 16px; text-transform: uppercase; }
.promo-row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 65, 144, 0.16); }
.promo-row .btn { min-height: 48px; }
.promo-msg { font-size: 0.88rem; font-weight: 700; }
.promo-msg.ok { color: var(--ok); }
.promo-msg.bad { color: var(--danger); }

.cart-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 4px; }
.totals dd { font-family: var(--font-mono); }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; text-align: end; font-weight: 700; }
.totals .grand { color: var(--ink); font-weight: 850; font-size: 1.2rem; }
.pay-error { color: var(--danger); font-weight: 700; font-size: 0.92rem; }
.pay-note { color: var(--ink-2); font-weight: 700; font-size: 0.92rem; }
.wallet img { height: 22px; width: auto; display: block; }
#pay-counter small { font-weight: 600; opacity: 0.85; }

/* payment */
dialog.sheet-pay { max-width: 520px; height: min(92dvh, 760px); }
.pay-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px var(--gutter); border-bottom: 1px solid var(--line); }
.pay-head h2 { font-size: 1.15rem; font-weight: 800; }
.pay-frame { position: relative; flex: 1; }
.pay-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pay-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--surface); z-index: 1; color: var(--ink-2); font-weight: 700; text-align: center; padding: 24px; }

.spinner { width: 34px; height: 34px; border-radius: 999px; border: 3px solid var(--blue-tint-2); border-top-color: var(--blue); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.placing { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(243, 245, 251, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 800; color: var(--ink); text-align: center; padding: 24px; }

.toast {
    position: fixed; z-index: 70; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom));
    transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
    padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 0.95rem;
    box-shadow: 0 10px 30px -10px rgba(14, 26, 51, 0.6);
    transition: opacity 200ms ease, transform 260ms var(--ease-out);
    max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Flavour ratings (dish card + dish sheet) ---------- */
.card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; min-width: 0; }
.card-rate { display: inline-flex; align-items: center; flex: none; }
.card-rate-in { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.row-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

/* Small faces (order.js miniFace): filled body, bold eyes, one clear mouth.
   Colour by score: pink 4.5+, periwinkle 3.5+, light grey below; the
   features always dark so the expression reads at 20px in daylight. */
.fm { width: 22px; height: 22px; overflow: visible; --fm-fill: #e2e5ec; --fm-ink: #33405c; }
.fm-20 { width: 20px; height: 20px; }
.fm-24 { width: 24px; height: 24px; }
.fm-28 { width: 28px; height: 28px; }
.fm-hi { --fm-fill: var(--pink); --fm-ink: var(--pink-ink); }
.fm-mid { --fm-fill: #c9d1ef; --fm-ink: var(--pink-ink); }
.fm .fm-body { fill: var(--fm-fill); stroke: var(--fm-ink); stroke-width: 1.5px; stroke-linejoin: round; }
.fm .fm-eye { fill: var(--fm-ink); stroke: none; }
.fm .fm-mouth path { fill: none; stroke: var(--fm-ink); stroke-width: 2.1px; stroke-linecap: round; stroke-linejoin: round; }
.fm .fm-mouth .fm-fill { fill: var(--fm-ink); stroke-width: 1.4px; }
/* Not rated yet: dotted, empty, a small plus. Quiet on purpose. */
.fm-new .fm-body { fill: none; stroke: var(--ink-3); stroke-width: 1.7px; stroke-dasharray: 0.01 2.7; stroke-linecap: round; }
.fm-new .fm-plus { fill: none; stroke: var(--ink-3); stroke-width: 1.8px; stroke-linecap: round; }
.dish-reviews { border-top: 1px solid var(--line); }
.dish-reviews > summary {
    list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer;
}
.dish-reviews > summary::-webkit-details-marker { display: none; }
.dr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; padding: 6px 0; }
.dish-reviews > summary b { font-weight: 700; }
.dish-reviews > summary .meta { font-size: 0.84rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dish-reviews > summary::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 200ms ease; flex: none; }
.dish-reviews[open] > summary::after { transform: rotate(-135deg); }
@supports (interpolate-size: allow-keywords) {
    .dish-reviews { interpolate-size: allow-keywords; }
    .dish-reviews::details-content { height: 0; overflow: clip; transition: height 240ms var(--ease-out), content-visibility 240ms allow-discrete; }
    .dish-reviews[open]::details-content { height: auto; }
}
.dr-body { padding-bottom: 6px; }
.dr-dist { display: flex; gap: 16px; padding: 6px 0 14px; }
.dr-dist div { display: grid; justify-items: center; gap: 2px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rv { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; }
.rv > .mf { margin-top: 3px; }
.rv p { font-size: 0.95rem; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.rv-tag i { color: var(--blue); }
.rv time { font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; }
.dr-sk { height: 16px; width: 60%; margin: 12px 0; border-radius: 8px; }
.dr-body .link-btn { min-height: 44px; }

/* "How were they?" top card */
.tc-rate { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); padding-inline-end: 44px; }
.tc-rate .tc-sub { color: var(--ink-2); }
.tc-rate .tc-cta { color: var(--blue); text-decoration: none; min-height: 32px; }
.tc-rate .tc-face { width: 64px; height: 64px; stroke-width: 2.25px; transform: rotate(-8deg); }
.tc-x {
    position: absolute; top: 4px; inset-inline-end: 4px; width: 44px; height: 44px; border: 0; border-radius: 999px;
    background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; font-size: 16px;
}
@media (hover: hover) { .tc-x:hover { background: var(--blue-tint); color: var(--ink); } }

/* ---------- When? (later today) ---------- */
.when .opts { margin-bottom: 0; }
.when-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-out); }
.when-more > div { overflow: hidden; display: grid; gap: 12px; min-height: 0; }
.when.is-later .when-more { grid-template-rows: 1fr; }
.when.is-later .when-more > div { padding-top: 12px; }
.when:not(.is-later) .when-more > div { visibility: hidden; }
.when-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scrollbar-width: none; }
.when-chips::-webkit-scrollbar { display: none; }
.chip-t {
    flex: none; display: grid; place-items: center; min-height: 44px; min-width: 56px; padding: 0 14px; border-radius: 12px; border: 0;
    background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.chip-t.mono { font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; }
.chip-t:active:not(:disabled) { transform: scale(0.97); }
.chip-t[aria-pressed="true"] { background: var(--blue-tint-2); box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.chip-t:disabled { opacity: 0.45; cursor: not-allowed; }
.when-mins button { font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; }
.when-mins button:disabled { text-decoration: line-through; }
.when-line { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 15px; color: var(--blue); }
.when-line i { font-size: 18px; }
.foot-when { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.foot-when i { color: var(--blue); font-size: 18px; }
.foot-when .link-btn { margin-inline-start: auto; min-height: 44px; padding: 0; }
.pay-split { justify-content: space-between; }
.pay-cap {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.16); font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; font-size: 13.5px;
}
@media (prefers-reduced-motion: reduce) { .when-more { transition: none; } }
.when label.opt { padding: 12px 14px; font-size: 1rem; }
.when .opt-price { font-family: inherit; font-size: 0.88rem; }

/* ---------- Top of the page from Admin → Marketing → Order page ----------
   Announcements reuse the carousel cards above (style blue / pale / white).
   Below them, two quieter rails: "Mix plates" (148px tiles, same language
   as the gyoza grid) and "Good together" (white cards, overlapping cutouts).
   Brand blue carries the actions; pink stays in the stickers. */
.tc-a.tc-blue img { filter: drop-shadow(0 10px 14px rgba(0, 18, 58, 0.45)); }
.tc-social .tc-cta { text-decoration: underline; text-underline-offset: 0.2em; }

/* minmax(0, 1fr) + min-width 0: a grid item would otherwise grow to its rail's
   full content width in WebKit and scroll the whole page sideways. */
.op-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.op-sec { padding-top: 22px; min-width: 0; }
/* Quieter than the announcement titles above them (owner: these rows are
   "a little smaller"): announcements > Mix plates > Good together. */
.op-h { font-weight: 800; font-stretch: 88%; font-size: 1.1rem; line-height: 1.15; letter-spacing: -0.005em; margin-bottom: 10px; }
.op-bundles .op-h { font-size: 1rem; font-weight: 750; }
html[dir="rtl"] .op-h { font-weight: 800; letter-spacing: 0; }
html[dir="rtl"] .op-bundles .op-h { font-weight: 700; }
.op-rail {
    display: grid; grid-auto-flow: column; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px;
}
.op-rail::-webkit-scrollbar { display: none; }
.op-rail > * { scroll-snap-align: start; min-width: 0; }
.op-rail-mix { --mp-w: 148px; grid-auto-columns: var(--mp-w); }
.op-rail-bundle { grid-auto-columns: min(272px, 82vw); }
@media (min-width: 900px) { .op-rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }

/* Mix plates */
.mp { position: relative; }
.mp-main {
    display: grid; gap: 2px; align-content: start; width: 100%; padding: 0; border: 0; background: none;
    color: inherit; text-align: start; cursor: pointer; touch-action: manipulation;
    transition: transform 160ms var(--ease-out);
}
.mp-main:active { transform: scale(0.98); }
.mp-img {
    position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px; padding: 12px;
    border-radius: var(--radius); background: var(--blue-tint); border: 1.5px solid transparent; overflow: hidden;
    transition: border-color 160ms ease;
}
.mp-img > img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms var(--ease-out); }
.mp-build .mp-img { background: var(--blue); }
.mp-build .mp-img > img { filter: drop-shadow(0 10px 14px rgba(0, 18, 58, 0.45)); }
.mp-stack { position: relative; width: 100%; height: 100%; }
.mp-stack img { position: absolute; width: 64%; height: 64%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 45, 110, 0.22)); transition: transform 500ms var(--ease-out); }
.mp-stack[data-n="2"] img:nth-child(1) { top: 0; left: 0; transform: rotate(-6deg); }
.mp-stack[data-n="2"] img:nth-child(2) { bottom: 0; right: 0; transform: rotate(6deg); }
.mp-stack[data-n="3"] img { width: 56%; height: 56%; }
.mp-stack[data-n="3"] img:nth-child(1) { top: 0; left: 22%; }
.mp-stack[data-n="3"] img:nth-child(2) { bottom: 0; left: 0; transform: rotate(-8deg); }
.mp-stack[data-n="3"] img:nth-child(3) { bottom: 0; right: 0; transform: rotate(8deg); }
.mp-name { font-weight: 800; font-size: 0.98rem; line-height: 1.22; }
.mp-meta { color: var(--ink-2); font-size: 0.84rem; }
.mp-add {
    position: absolute; top: calc(var(--mp-w) - 50px); inset-inline-end: 6px; z-index: 2;
    width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; touch-action: manipulation;
    background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 18px;
    box-shadow: 0 2px 0 rgba(0, 20, 60, 0.12), 0 6px 14px -4px rgba(0, 45, 110, 0.45);
    transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.mp-add:active { transform: scale(0.92); }
.tag-soon { background: var(--ink); color: #fff; }
.mp-off .mp-main { cursor: default; }
.mp-off .mp-img img { filter: grayscale(1); opacity: 0.45; }
.mp-off .mp-name { color: var(--ink-3); }
@media (hover: hover) {
    .mp:not(.mp-off) .mp-main:hover .mp-img { border-color: var(--blue); }
    .mp-main:hover .mp-img > img { transform: rotate(-5deg) scale(1.04); }
    .mp-add:hover { background: var(--blue-press); }
}

/* Good together */
.bd {
    display: grid; grid-template-rows: 1fr auto; background: var(--surface); border-radius: var(--radius);
    box-shadow: 0 1px 0 var(--line), 0 1px 2px rgba(14, 26, 51, 0.04);
}
.bd-main {
    display: grid; gap: 3px; align-content: start; padding: 10px 10px 6px; border: 0; background: none; border-radius: var(--radius);
    color: inherit; text-align: start; cursor: pointer; touch-action: manipulation; transition: transform 160ms var(--ease-out);
}
.bd-main:active { transform: scale(0.985); }
.bd-img { position: relative; display: grid; place-items: center; height: 116px; margin-bottom: 8px; border-radius: 14px; background: var(--blue-tint); overflow: hidden; }
.bd-img > img { width: 100%; height: 100%; object-fit: cover; }
.bd-stack { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px 18px; }
.bd-stack img { width: 36%; max-width: 92px; aspect-ratio: 1; height: auto; object-fit: contain; margin-inline: -5%; filter: drop-shadow(0 8px 10px rgba(0, 45, 110, 0.22)); }
.bd-stack img:nth-child(odd) { transform: rotate(-5deg); }
.bd-stack img:nth-child(even) { transform: translateY(8px) rotate(5deg); }
.bd-stack[data-n="4"] img { width: 30%; }
.bd-name { font-weight: 800; font-size: 1.02rem; line-height: 1.22; }
.bd-items { display: grid; gap: 1px; color: var(--ink); font-size: 0.88rem; line-height: 1.35; }
.bd-items > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-opt { color: var(--ink-2); }
.bd-meta { margin-top: 2px; font-size: 0.86rem; color: var(--ink); }
.bd-foot { display: flex; gap: 8px; padding: 4px 10px 10px; }
.bd-custom, .bd-add {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: 999px; font-weight: 800; font-size: 0.92rem; cursor: pointer; white-space: nowrap;
    touch-action: manipulation; user-select: none; -webkit-user-select: none;
    transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.bd-custom { flex: 1; background: var(--blue-tint); color: var(--blue); }
.bd-add { background: var(--blue); color: #fff; padding: 0 16px 0 12px; }
html[dir="rtl"] .bd-add { padding: 0 12px 0 16px; }
.bd-custom:active, .bd-add:active { transform: scale(0.96); }
@media (hover: hover) {
    .bd-custom:hover { background: var(--blue-tint-2); }
    .bd-add:hover { background: var(--blue-press); }
    .bd-main:hover .bd-stack img:nth-child(odd) { transform: rotate(-9deg) scale(1.03); }
}
.bd-off .bd-main { cursor: default; }
.bd-off .bd-img img { filter: grayscale(1); opacity: 0.45; }
.bd-off .bd-name { color: var(--ink-3); }
/* An announcement pointing at a bundle lands here: a brief ring, then gone. */
.bd.pulse { animation: bd-pulse 1.1s var(--ease-out) 2; }
@keyframes bd-pulse {
    0%, 55% { box-shadow: 0 1px 0 var(--line), inset 0 0 0 3px var(--blue); }
    100% { box-shadow: 0 1px 0 var(--line), inset 0 0 0 3px rgba(0, 65, 144, 0); }
}

/* Customise sheet (bundles) and the prefilled mix sheet */
.bundle-media { aspect-ratio: 16 / 9; }
.bundle-media .bd-stack img { width: 30%; max-width: 150px; }
.bundle-media > img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.bslots { display: grid; gap: 22px; }
.orow-static { cursor: default; }
.orow-static:active { transform: none; }
.bvar { margin-bottom: 10px; }
.bvar .opt { min-height: 48px; padding: 10px 14px; }
/* A set part's size / flavour, under the dish it belongs to. */
.bopt { margin-top: 14px; }
.bopt .bvar { margin-bottom: 0; }
.orow-sub { display: block; margin-top: 2px; font-weight: 600; font-size: 0.85rem; color: var(--ink-2); }
/* No "Customise" (nothing to change): the Add button takes the row. */
.bd-foot .bd-add:only-child { flex: 1; }
.mix-row.off .mix-row-name { color: var(--ink-3); }
.dish-tweak { color: var(--blue); font-weight: 700; margin-bottom: 12px; }
/* A prebuilt mix's sheet: "Build your own mix" under the tweak line (44px tap target). */
.dish-tweak:has(+ .mix-build-link) { margin-bottom: 0; }
.mix-build-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 8px; font-size: 0.95rem; }
.mix-build-link { text-decoration: none; }
.mix-build-link span { text-decoration: underline; text-underline-offset: 0.2em; }
.mix-build-link i { font-size: 0.9em; }
.mix-row.off .mix-row-price { color: var(--ink-3); }
.dish-media .dish-stack { width: 76%; height: 88%; }
.dish-media .dish-stack img { filter: drop-shadow(0 14px 18px rgba(0, 45, 110, 0.25)); }
.line-preset { font-weight: 700; font-size: 0.86rem; color: var(--blue); line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
    .mp-main, .bd-main, .mp-add, .bd-custom, .bd-add { transition: none; }
    .mp-main:active, .bd-main:active, .mp-add:active, .bd-custom:active, .bd-add:active { transform: none; }
    .bd.pulse { animation: none; box-shadow: 0 1px 0 var(--line), inset 0 0 0 3px var(--blue); }
}
html.a11y-no-motion .mp-main, html.a11y-no-motion .bd-main { transition: none; }
html.a11y-no-motion .bd.pulse { animation: none; box-shadow: 0 1px 0 var(--line), inset 0 0 0 3px var(--blue); }

/* ---------- First raters: a drink on us (reviews v2 M1/M2, F8) ----------
   Quiet on purpose: one small line, never louder than the price. */
.fr-hint { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 0.74rem; font-weight: 700; line-height: 1.25; color: var(--ink-2); }
.fr-hint i { color: var(--pink-deep); font-size: 0.95rem; flex: none; }
.card-body .fr-hint { margin-top: 2px; }
.dish-fr { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-in); background: var(--blue-tint); color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.dish-fr[hidden] { display: none; }
.dish-fr i { color: var(--pink-deep); font-size: 1.05rem; flex: none; }
.rv-tags { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.rv-tag-drink i { color: var(--pink-deep); }
.dr-fr { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; font-size: 0.82rem; color: var(--ink-2); }
.dr-fr i { color: var(--pink-deep); margin-top: 2px; flex: none; }
.promo-msg.hint { color: var(--blue); }


/* ---------- Busy kitchen ---------- */
/* Popup: the minutes figure carries the message, amber when busy, red and
   larger when very busy. A tone strip on top marks the level at a glance. */
dialog.sheet-busy { max-width: 480px; }
dialog.sheet-busy::before { content: ""; flex: none; height: 6px; background: var(--warm-edge); }
dialog.sheet-busy.is-severe::before { height: 8px; background: var(--hot-ink); }
.busy { display: grid; gap: 10px; padding: 6px 24px 22px; }
.busy-meter {
    justify-self: start; display: inline-flex; align-items: baseline; gap: 8px; margin: 6px 0 4px;
    padding: 10px 16px 12px; border-radius: 16px; background: var(--warm-bg); color: var(--warm-ink);
    transform-origin: 0 50%;
    transition: transform 360ms var(--ease-out) 140ms, opacity 240ms ease 140ms;
}
html[dir="rtl"] .busy-meter { transform-origin: 100% 50%; }
@starting-style { dialog.sheet-busy[open] .busy-meter { transform: scale(0.94); opacity: 0; } }
.busy-num { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.busy-unit { font-weight: 800; font-size: 0.95rem; }
.sheet-busy.is-severe .busy-meter { background: var(--hot-bg); color: var(--hot-ink); box-shadow: inset 0 0 0 1.5px var(--hot-edge); }
.sheet-busy.is-severe .busy-num { font-size: 3.2rem; font-weight: 600; }
.busy h2 { font-size: 1.45rem; font-weight: 850; line-height: 1.2; }
.sheet-busy.is-severe h2 { color: var(--hot-ink); }
.busy-body { color: var(--ink-2); font-size: 1.02rem; line-height: 1.5; max-width: 42ch; }
.busy-later { font-weight: 700; color: var(--ink); line-height: 1.45; }
.busy-foot .btn { flex: 1; padding: 0 16px; }
@media (max-width: 360px) { .busy-foot { flex-direction: column-reverse; align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .busy-meter { transition: none; } }

/* Cart: a note above the total for an order "now". */
.busy-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; border-radius: var(--radius-in);
    background: var(--warm-bg); color: var(--warm-ink); box-shadow: inset 0 0 0 1px var(--warm-edge);
    font-weight: 700; font-size: 0.92rem; line-height: 1.35;
}
.busy-note i { font-size: 18px; flex: none; }
.busy-note span { flex: 1 1 12ch; }
.busy-note .link-btn { color: inherit; min-height: 36px; padding: 0; }
.busy-note.is-severe { background: var(--hot-bg); color: var(--hot-ink); box-shadow: inset 0 0 0 1.5px var(--hot-edge); font-weight: 800; }
/* "As soon as possible" reads the busy wait in amber. */
.when .opt.is-busy-opt .opt-price { color: var(--warm-ink); font-weight: 700; }
.when-busy { color: var(--warm-ink); font-weight: 700; }
/* Stock: "Only N left" (drinks/sides connected with stock, gyoza amounts). */
/* At the stock cap: "+" stays tappable (it explains why) but reads as done. */
.qty button.at-cap { opacity: 0.4; }
.line-cap, .dish-cap { margin: 4px 0 0; font-size: 0.8rem; font-weight: 800; color: var(--accent-ink, #b45309); }
.dish-cap[hidden] { display: none; }
/* Limited stock ("Only N gyoza left", "That's all we have left"): a warm-red
   pill that reads at a glance, on cards, dish rows and mix flavours. */
.tag-low { background: var(--hot-bg); color: var(--hot-ink); box-shadow: inset 0 0 0 1px var(--hot-edge); display: inline-flex; align-items: center; gap: 4px; }
.low-pill {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    padding: 3px 10px 3px 8px; border-radius: 999px;
    background: var(--hot-bg); color: var(--hot-ink); box-shadow: inset 0 0 0 1px var(--hot-edge);
    font-size: 0.82rem; font-weight: 800; line-height: 1.3;
}
.low-pill i { font-size: 1rem; }
.mix-row.limited:not(.picked) { box-shadow: inset 0 0 0 1.5px var(--hot-edge); }