:root {
  --ink: #1d1d1b;
  --ink-2: #292825;
  --ink-3: #3d3a35;
  --ivory: #f7f3ea;
  --paper: #fffdf8;
  --wash: #eee8dc;
  --wash-2: #e4dccd;
  --copper: #a9653f;
  --copper-dark: #7a4329;
  --copper-soft: #ead1bf;
  --text: #24231f;
  --muted: #706b62;
  --quiet: #958d81;
  --line: #d8d0c2;
  --line-dark: #4a4741;
  --danger: #9a372f;
  --danger-soft: #f4ded9;
  --warning: #8b5d20;
  --warning-soft: #f4e6c8;
  --info: #355f75;
  --info-soft: #dce8ed;
  --shadow-sm: 0 5px 18px rgba(39, 31, 22, .07);
  --shadow-lg: 0 25px 70px rgba(30, 24, 18, .18);
  --serif: Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Storefront themes only. Staff and studio keep the operational palette. */
html[data-theme="ivory"] .guest-shell,
html[data-theme="ivory"] .terminal-shell {
  --ink: #1d1d1b;
  --ink-2: #292825;
  --ink-3: #3d3a35;
  --ivory: #f7f3ea;
  --paper: #fffdf8;
  --wash: #eee8dc;
  --wash-2: #e4dccd;
  --copper: #a9653f;
  --copper-dark: #7a4329;
  --copper-soft: #ead1bf;
  --text: #24231f;
  --muted: #706b62;
  --quiet: #958d81;
  --line: #d8d0c2;
}

html[data-theme="slate"] .guest-shell,
html[data-theme="slate"] .terminal-shell {
  --ink: #17232b;
  --ink-2: #22323c;
  --ink-3: #354650;
  --ivory: #edf1f1;
  --paper: #f8faf9;
  --wash: #e0e7e7;
  --wash-2: #ced9da;
  --copper: #a97952;
  --copper-dark: #765033;
  --copper-soft: #ead9c8;
  --text: #1b292f;
  --muted: #5d6c71;
  --quiet: #7c8a8e;
  --line: #cbd5d5;
}

html[data-theme="terracotta"] .guest-shell,
html[data-theme="terracotta"] .terminal-shell {
  --ink: #442b26;
  --ink-2: #58372f;
  --ink-3: #704a40;
  --ivory: #f7eee5;
  --paper: #fffaf4;
  --wash: #eeddd0;
  --wash-2: #dfc9ba;
  --copper: #b45f3e;
  --copper-dark: #803c29;
  --copper-soft: #efc9b6;
  --text: #392823;
  --muted: #765f56;
  --quiet: #987f74;
  --line: #dcc8ba;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { background: var(--ivory); scroll-behavior: smooth; }
body { min-width: 320px; background: var(--ivory); }
button, input, textarea, select { font: inherit; color: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.22; text-wrap: balance; }
p, td, th, label, small, strong, span { overflow-wrap: anywhere; }
::selection { color: var(--paper); background: var(--copper-dark); }
:focus-visible { outline: 3px solid #c47a50; outline-offset: 3px; }

.sr-only { width: 1px; height: 1px; padding: 0; margin: -1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.eyebrow { color: var(--copper-dark); font-size: .75rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.icon { width: 20px; height: 20px; }
.panel { min-width: 0; padding: 24px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-sm); }
.empty, .error-state, .loading-state { min-height: 180px; padding: 30px; display: grid; place-items: center; align-content: center; gap: 12px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.error-state { color: var(--danger); background: var(--danger-soft); border-color: #d9aaa4; }
.loading-state::before, .spinner { content: ""; width: 24px; height: 24px; display: inline-block; border: 2px solid var(--wash-2); border-top-color: var(--copper); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn { min-height: 44px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 3px; font-size: .875rem; font-weight: 720; line-height: 1.25; text-align: center; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: var(--ink-3); }
.btn-secondary { color: var(--copper-dark); background: var(--copper-soft); border-color: #d6b298; }
.btn-secondary:hover:not(:disabled) { background: #dfc0a9; }
.btn-ghost { color: var(--text); background: transparent; border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: var(--wash); border-color: #bdb2a2; }
.btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: #7e2923; }
.btn-sm { min-height: 44px; padding-inline: 12px; }
.btn-block { width: 100%; }

.badge { min-height: 28px; padding: 4px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; color: var(--ink-3); background: var(--wash); border: 1px solid #ded5c6; font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.badge-pending, [data-status="pending"], [data-status="queued"] { color: var(--warning); background: var(--warning-soft); border-color: #e1c78e; }
.badge-active, .badge-ready, [data-status="active"], [data-status="ready"], [data-status="accepted"] { color: var(--copper-dark); background: var(--copper-soft); border-color: #d6b298; }
.badge-error, .badge-rejected, [data-status="rejected"], [data-status="cancelled"], [data-status="unavailable"] { color: var(--danger); background: var(--danger-soft); border-color: #d9aaa4; }
.badge-info, [data-status="preparing"] { color: var(--info); background: var(--info-soft); border-color: #aac3ce; }
.badge-success { color: var(--copper-dark); background: var(--copper-soft); border-color: #d6b298; }
.badge-warning { color: var(--warning); background: var(--warning-soft); border-color: #e1c78e; }

.field { min-width: 0; display: grid; align-content: start; gap: 7px; color: var(--ink-3); font-size: .875rem; font-weight: 650; }
.field > span, .field > label { display: block; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea,
input.input, select.input, textarea.input { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #cfc6b8; border-radius: 2px; outline: none; background: #fffefb; font-size: 1rem; font-weight: 450; }
.field textarea, textarea.input { min-height: 104px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(169, 101, 63, .14); }
.field small, .help-text { color: var(--muted); font-size: .8125rem; font-weight: 450; }
.field-error { color: var(--danger); font-size: .8125rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .wide, .form-grid > .field:only-child { grid-column: 1 / -1; }
.toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.toolbar > * { min-width: 0; }
.tabs, .category-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.tabs { padding: 4px; background: var(--wash); }
.tabs button, .tabs a, .category-tabs button { min-height: 44px; padding: 9px 14px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: .875rem; font-weight: 680; white-space: nowrap; }
.tabs .active, .tabs [aria-selected="true"] { color: var(--text); background: var(--paper); box-shadow: 0 2px 8px rgba(41, 34, 26, .06); }
.category-tabs { padding-block: 4px 10px; }
.category-tabs button { border-color: var(--line); background: var(--paper); }
.category-tabs button.active, .category-tabs button[aria-selected="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.category-tabs { width: 100%; max-width: 100%; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.category-tabs > * { min-width: max-content; scroll-snap-align: start; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { min-width: 0; padding: 20px; border: 1px solid var(--line); background: var(--paper); }
.stat span, .stat small { display: block; color: var(--muted); font-size: .8125rem; }
.stat strong { display: block; margin-top: 8px; font: 600 clamp(1.5rem, 2.5vw, 2.2rem)/1 var(--serif); }

/* Merchant workspace */
.merchant-shell { min-height: 100dvh; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #f1ede5; }
.merchant-sidebar { height: 100dvh; padding: 26px 18px; position: sticky; top: 0; display: flex; flex-direction: column; overflow-y: auto; color: #f5f0e7; background: var(--ink); border-right: 1px solid #111; }
.merchant-brand { min-height: 54px; padding: 0 9px 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-dark); }
.merchant-brand img { width: 38px; height: 38px; }
.merchant-brand strong, .merchant-brand b { display: block; font: 600 1.125rem var(--serif); letter-spacing: .08em; }
.merchant-brand small { display: block; margin-top: 2px; color: #b9b1a5; font-size: .75rem; }
.merchant-nav { margin-top: 24px; display: grid; gap: 5px; }
.merchant-nav button, .merchant-nav a { min-height: 48px; padding: 11px 13px; display: flex; align-items: center; gap: 12px; border-left: 2px solid transparent; color: #bbb3a8; background: transparent; font-size: .9rem; font-weight: 650; text-align: left; }
.merchant-nav button:hover, .merchant-nav a:hover { color: #fff; background: #2b2a27; }
.merchant-nav .active, .merchant-nav [aria-current="page"] { color: #fff; border-left-color: #cf8357; background: #32302c; }
.merchant-sidebar > footer { margin-top: auto; padding: 18px 9px 0; color: #a9a196; font-size: .75rem; }
.merchant-main { min-width: 0; min-height: 100dvh; }
.merchant-header { min-height: 78px; padding: 16px clamp(20px, 3vw, 46px); position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(247, 243, 234, .96); backdrop-filter: blur(12px); }
.merchant-header h1 { font: 600 clamp(1.45rem, 2.2vw, 2rem) var(--serif); }
.merchant-header p { margin-top: 4px; color: var(--muted); font-size: .875rem; }
.merchant-content { width: min(1500px, 100%); margin: 0 auto; padding: 30px clamp(20px, 3vw, 46px) 56px; }
.merchant-content > * + * { margin-top: 18px; }
.merchant-content > .toolbar:first-child h2 { margin-top: 4px; font: 600 clamp(1.5rem, 2.5vw, 2.15rem) var(--serif); }
.merchant-content > .toolbar:first-child .muted { margin-top: 6px; }
.merchant-bottom-nav { display: none; }
.workspace-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(440px, 1.35fr); gap: 18px; align-items: start; }
.queue-list { min-width: 0; display: grid; gap: 8px; }
.queue-list > article, .queue-list > button, .queue-item { width: 100%; min-height: 74px; padding: 14px; display: grid; gap: 4px; border: 1px solid var(--line); background: var(--paper); color: var(--text); text-align: left; }
.queue-list > button:hover, .queue-item:hover { border-color: #b9a996; }
.queue-list .active, .queue-item.active { border-color: var(--copper); box-shadow: inset 3px 0 var(--copper); }
.detail-panel { min-width: 0; min-height: 420px; }
.order-card { min-width: 0; padding: 18px; display: grid; gap: 14px; border: 1px solid var(--line); background: var(--paper); }
.order-card + .order-card { margin-top: 10px; }
.order-card header, .order-card footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.order-card h3 { font-size: 1rem; }
.order-card footer { padding-top: 12px; border-top: 1px solid var(--line); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.toggle-row { min-height: 72px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); background: var(--paper); }
.toggle-row > div { min-width: 0; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row small { margin-top: 4px; color: var(--muted); font-size: .8125rem; }
.toggle, [role="switch"] { width: 50px; min-width: 50px; height: 30px; padding: 3px; position: relative; border-radius: 99px; background: #b9b0a4; transition: background .16s ease; }
.toggle::after, [role="switch"]::after { content: ""; width: 24px; height: 24px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.18); transition: transform .16s ease; }
.toggle.active, .toggle[aria-checked="true"], [role="switch"][aria-checked="true"] { background: var(--copper); }
.toggle.active::after, .toggle[aria-checked="true"]::after, [role="switch"][aria-checked="true"]::after { transform: translateX(20px); }
.toggle-row input[type="checkbox"] { width: 50px; min-width: 50px; height: 30px; margin: 0; appearance: none; position: relative; border-radius: 99px; background: #b9b0a4; cursor: pointer; transition: background .16s ease; }
.toggle-row input[type="checkbox"]::after { content: ""; width: 24px; height: 24px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.18); transition: transform .16s ease; }
.toggle-row input[type="checkbox"]:checked { background: var(--copper); }
.toggle-row input[type="checkbox"]:checked::after { transform: translateX(20px); }

.data-table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--paper); font-size: .875rem; }
.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { color: var(--muted); background: var(--wash); font-size: .75rem; letter-spacing: .04em; white-space: nowrap; }
.data-table td { max-width: 340px; }
.data-table tr:hover td { background: #fbf7f0; }
.data-table > div { min-height: 58px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.data-table > div:last-child { border-bottom: 0; }
.data-table > div > span { min-width: 0; flex: 1; }
.data-table > div b, .data-table > div small, .data-table > div em { display: block; }
.data-table > div small, .data-table > div em { margin-top: 4px; color: var(--muted); font-size: .8125rem; font-style: normal; }
.data-table > div > strong { flex: 0 0 auto; }
.table-scroll, .data-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); background: var(--paper); scrollbar-width: thin; }

/* Shared products */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); }
.product-image { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; object-fit: cover; background: var(--wash); }
.product-image > img { width: 100%; height: 100%; object-fit: cover; }
.product-body { min-width: 0; padding: 16px; display: flex; flex: 1; flex-direction: column; gap: 7px; }
.product-body h3 { font: 600 1.12rem/1.25 var(--serif); }
.product-body > p { color: var(--muted); font-size: .875rem; }
.product-body footer { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price { font: 600 1.25rem var(--serif); white-space: nowrap; }
.currency-note { color: var(--muted); font-size: .75rem; }
.product-card[aria-disabled="true"], .product-card.disabled, .product-card.sold-out { opacity: .58; }

/* Guest H5 */
.guest-shell { width: min(100%, 760px); min-height: 100dvh; margin: auto; display: flex; flex-direction: column; background: var(--paper); box-shadow: 0 0 50px rgba(46, 36, 24, .08); }
.guest-header { min-height: 70px; padding: 12px 20px; position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); background: rgba(255, 253, 248, .96); backdrop-filter: blur(12px); }
.guest-header strong { font: 600 1.05rem var(--serif); }
.guest-header select { min-height: 44px; padding: 8px 32px 8px 11px; border: 1px solid var(--line); background: var(--paper); }
.guest-main { min-width: 0; flex: 1; padding-bottom: 96px; }
.guest-hero { padding: clamp(28px, 7vw, 58px) clamp(20px, 6vw, 44px); color: var(--paper); background: var(--ink); }
.guest-hero h1 { max-width: 650px; margin-top: 10px; font: 600 clamp(2rem, 7vw, 3.6rem)/1.08 var(--serif); }
.guest-hero p { max-width: 580px; margin-top: 14px; color: #c8c0b5; font-size: .95rem; }
.guest-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #d9b194; font-size: .8125rem; }
.guest-nav { min-height: 72px; padding: 6px 8px max(7px, env(safe-area-inset-bottom)); position: fixed; z-index: 30; left: 50%; bottom: 0; width: min(100%, 760px); transform: translateX(-50%); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); background: rgba(255, 253, 248, .97); backdrop-filter: blur(14px); }
.guest-nav button, .guest-nav a { min-width: 0; min-height: 54px; padding: 5px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); background: transparent; font-size: .75rem; }
.guest-nav .active, .guest-nav [aria-current="page"] { color: var(--copper-dark); }
.guest-nav .active::after { content: ""; width: 18px; height: 2px; background: var(--copper); }
.guest-main > .category-tabs, .guest-main > .product-grid, .guest-main > .panel { margin: 18px clamp(16px, 4vw, 28px); }
.guest-main .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cart-dock { width: min(680px, calc(100% - 28px)); min-height: 60px; padding: 9px 12px 9px 18px; position: fixed; z-index: 35; left: 50%; bottom: 82px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; color: var(--paper); background: var(--ink); box-shadow: 0 14px 40px rgba(24, 20, 16, .25); }
.cart-dock strong { margin-left: auto; font: 600 1.1rem var(--serif); }
.cart-dock .btn { color: var(--ink); background: var(--copper-soft); }

.chat-panel { min-height: calc(100dvh - 142px); display: flex; flex-direction: column; }
.chat-log { padding: 22px clamp(16px, 4vw, 28px); flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.message { width: fit-content; max-width: min(86%, 620px); padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px 14px 14px 14px; background: var(--wash); }
.message p { font-size: .95rem; line-height: 1.65; }
.message small, .message time { display: block; margin-top: 6px; color: var(--muted); font-size: .75rem; }
.message-guest { margin-left: auto; color: var(--paper); background: var(--ink); border-color: var(--ink); border-radius: 14px 3px 14px 14px; }
.message-guest small, .message-guest time { color: #c8c0b5; }
.message-staff { background: #f1e4da; border-color: #dcbba5; }
.message-ai { border-left: 3px solid var(--copper); background: var(--paper); }
.message-system { max-width: 100%; align-self: center; color: var(--muted); background: transparent; border-style: dashed; border-radius: 2px; text-align: center; }
.chat-compose { padding: 12px clamp(14px, 4vw, 24px) max(12px, env(safe-area-inset-bottom)); position: sticky; bottom: 70px; display: flex; align-items: flex-end; gap: 8px; border-top: 1px solid var(--line); background: rgba(255,253,248,.98); }
.chat-compose input, .chat-compose textarea { min-width: 0; min-height: 46px; padding: 11px 13px; flex: 1; border: 1px solid var(--line); background: #fff; resize: none; }
.chat-compose button { min-width: 46px; min-height: 46px; }
.detail-panel > .toolbar + .chat-log { max-height: 52dvh; margin: 18px -2px 0; padding: 4px 2px 18px; }
.detail-panel > .toolbar:last-child { margin-top: 16px; }
.detail-panel form.chat-compose { width: 100%; padding: 0; position: static; border: 0; background: transparent; }
.detail-panel form.chat-compose .field { flex: 1; }
.detail-panel > .toolbar:last-child { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-items: start; gap: 12px; }
.detail-panel > .toolbar:last-child > .toolbar { width: 100%; justify-content: flex-start; }
.detail-panel form[data-action="m-message-send"] { width: 100%; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 11px; border: 1px solid var(--line); background: var(--wash); }
.detail-panel form[data-action="m-message-send"] > .field { width: 100%; min-width: 0; display: grid; }
.detail-panel form[data-action="m-message-send"] textarea { width: 100%; min-width: 0; min-height: 108px; display: block; }
.detail-panel form[data-action="m-message-send"] > .toolbar { width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.detail-panel form[data-action="m-message-send"] > small { width: 100%; display: block; line-height: 1.55; }
.detail-panel .message-guest .btn-ghost { color: var(--paper); background: transparent; border-color: rgba(255, 253, 248, .6); }
.detail-panel .message-guest .btn-ghost:hover:not(:disabled) { color: var(--paper); background: rgba(255, 255, 255, .1); border-color: var(--paper); }
.merchant-mobile-more .merchant-nav { margin-top: 0; display: grid !important; gap: 6px; }
.merchant-mobile-more .merchant-nav button { width: 100%; color: var(--text); border: 1px solid var(--line); background: var(--paper); }
.merchant-mobile-more .merchant-nav button.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* Guest iPad terminal */
.terminal-shell { min-height: 100dvh; display: flex; flex-direction: column; background: var(--ivory); }
.terminal-header { min-height: 72px; padding: 12px clamp(18px, 3vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: var(--paper); }
.terminal-header h1, .terminal-header strong { font: 600 1.2rem var(--serif); }
.terminal-layout { min-height: 0; padding: clamp(16px, 2.5vw, 30px); flex: 1; display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 1.2fr) minmax(190px, .55fr); gap: 16px; align-items: stretch; }
.terminal-menu, .terminal-translation, .terminal-qr { min-width: 0; min-height: 0; border: 1px solid var(--line); background: var(--paper); }
.terminal-menu, .terminal-translation { overflow-y: auto; }
.terminal-menu { padding: 18px; }
.terminal-menu .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.terminal-menu .product-card .product-body { padding: 12px; }
.terminal-translation { padding: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--ink); color: var(--paper); }
.terminal-translation h2 { font: 600 clamp(1.6rem, 3vw, 2.7rem)/1.25 var(--serif); }
.terminal-translation p { margin-top: 12px; color: #c6beb2; }
.terminal-translation .message { max-width: 100%; margin-top: 16px; color: var(--text); text-align: left; }
.terminal-translation .btn { min-height: 54px; margin-top: 18px; align-self: center; }
.terminal-qr { padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: var(--wash); }
.terminal-qr svg, .terminal-qr canvas, .terminal-qr img { width: min(160px, 100%); height: auto; aspect-ratio: 1; padding: 8px; background: #fff; }
.terminal-qr strong { font: 600 1rem var(--serif); }
.terminal-qr p, .terminal-qr small { color: var(--muted); font-size: .8125rem; }
.terminal-layout.pure { grid-template-columns: minmax(0, 1fr) minmax(230px, .34fr); }
.terminal-layout.pure .terminal-menu { display: none; }
.terminal-layout.pure .terminal-translation { min-height: 560px; }
.terminal-layout.pure .terminal-qr { display: flex; }
.qr-preview { min-height: 190px; margin: 18px 0 12px; display: grid; place-items: center; background: var(--wash); border: 1px solid var(--line); }
.qr-preview svg, .qr-preview canvas, .qr-preview img { width: 156px; height: 156px; padding: 8px; background: #fff; }
.panel > code { display: block; padding: 10px; overflow-x: auto; color: var(--muted); background: #f4efe7; font-size: .75rem; white-space: nowrap; }

/* Studio */
.studio-shell { min-height: 100dvh; background: var(--wash); }
.studio-header { min-height: 78px; padding: 14px clamp(20px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.studio-hero { padding: clamp(42px, 7vw, 92px) clamp(20px, 7vw, 100px); color: var(--paper); background: var(--ink); }
.studio-hero h1 { max-width: 930px; font: 600 clamp(2.3rem, 6vw, 5.2rem)/1.02 var(--serif); letter-spacing: -.025em; }
.studio-hero p { max-width: 660px; margin-top: 22px; color: #c6beb2; font-size: 1rem; }
.studio-grid { width: min(1400px, calc(100% - 40px)); margin: -34px auto 0; padding-bottom: 60px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.studio-card { min-height: 230px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-sm); }
.studio-card h2 { margin-top: auto; font: 600 1.45rem var(--serif); }
.studio-card p { margin-top: 9px; color: var(--muted); font-size: .875rem; }
.studio-card .btn { margin-top: 18px; align-self: flex-start; }

/* Uploads, connectivity, feedback */
.upload-preview { min-height: 150px; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; border: 1px dashed #b8aa98; background: var(--wash); }
.upload-preview:empty { place-items: center; grid-template-columns: 1fr; color: var(--muted); }
.upload-preview:empty::after { content: "上传图片后将在这里预览"; }
.upload-preview > article, .upload-preview > figure { min-width: 0; margin: 0; position: relative; border: 1px solid var(--line); background: var(--paper); }
.upload-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.upload-preview figcaption { padding: 8px; color: var(--muted); font-size: .75rem; }
.connection-banner { min-height: 48px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--info); background: var(--info-soft); border-bottom: 1px solid #aac3ce; font-size: .875rem; font-weight: 650; text-align: center; }
.connection-banner.offline, .connection-banner.error { color: var(--danger); background: var(--danger-soft); border-color: #d9aaa4; }
.connection-banner::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.toast-stack { width: min(420px, calc(100% - 28px)); position: fixed; z-index: 200; right: 18px; bottom: 18px; display: grid; gap: 9px; pointer-events: none; }
.toast { min-height: 50px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: var(--paper); background: var(--ink); border-left: 4px solid var(--copper); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in .22s ease-out both; }
.toast.error { border-left-color: #e06f63; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* Modal and dialog */
#overlay:empty { display: none; }
.modal-backdrop { position: fixed; z-index: 100; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(18, 17, 15, .66); backdrop-filter: blur(5px); overflow-y: auto; }
dialog.modal, .modal { width: min(680px, calc(100% - 40px)); max-height: min(90dvh, 900px); margin: 0; padding: 0; position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; flex-direction: column; border: 0; border-radius: 2px; background: var(--paper); box-shadow: var(--shadow-lg); }
dialog.modal[open], .modal-backdrop .modal { display: flex; }
dialog.modal::backdrop { background: rgba(18, 17, 15, .66); backdrop-filter: blur(5px); }
.modal-header { min-height: 64px; padding: 14px 20px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.modal-header h2 { font: 600 1.25rem var(--serif); }
.modal-header button { min-width: 44px; min-height: 44px; display: grid; place-items: center; background: transparent; }
.modal-body { min-height: 0; padding: 22px; overflow-y: auto; }
.modal-footer { padding: 14px 20px max(14px, env(safe-area-inset-bottom)); flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line); background: #fbf8f2; }

/* Root guest, terminal and studio renderers */
.guest-header { flex-direction: column; align-items: stretch; gap: 8px; }
.guest-topline, .guest-topline > div, .brand-lockup, .language-controls, .guest-location { display: flex; align-items: center; }
.guest-topline { justify-content: space-between; gap: 16px; }
.guest-topline > div { min-width: 0; gap: 11px; }
.brand-lockup { flex: 0 0 auto; gap: 9px; }
.brand-lockup img { width: 34px; height: 34px; }
.brand-lockup span { display: grid; line-height: 1.05; }
.brand-lockup b { font: 650 1rem var(--serif); letter-spacing: .12em; }
.brand-lockup small { margin-top: 3px; color: var(--copper-dark); font-size: .65rem; letter-spacing: .12em; }
.store-logo { width: 40px; height: 40px; flex: 0 0 auto; display: block; object-fit: contain; object-position: center; }
.guest-topline .store-logo { width: 36px; height: 36px; }
.terminal-header .store-logo { width: 44px; height: 44px; }
html[data-theme] .guest-shell { background: var(--paper); }
html[data-theme] .guest-header,
html[data-theme] .guest-nav { background: color-mix(in srgb, var(--paper) 96%, transparent); }
html[data-theme] .terminal-shell { background: var(--ivory); }
html[data-theme] .terminal-header { background: var(--paper); }
html[data-theme] .guest-shell .message-staff { background: var(--copper-soft); border-color: color-mix(in srgb, var(--copper) 45%, var(--line)); }
html[data-theme] .guest-shell .chat-compose { background: color-mix(in srgb, var(--paper) 97%, transparent); }
.store-name { min-width: 0; font: 600 1rem var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.language-controls { gap: 7px; }
.language-controls select { min-height: 44px; padding: 8px 30px 8px 10px; border: 1px solid var(--line); background: var(--paper); font-size: .8125rem; }
.language-strip { width: 100%; min-width: 0; padding: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; overflow: visible; background: var(--wash); }
.language-strip button { min-width: max-content; min-height: 44px; padding: 9px 14px; flex: 1 0 auto; border: 1px solid transparent; color: var(--muted); background: transparent; font-size: .875rem; font-weight: 720; line-height: 1.2; white-space: nowrap; }
.language-strip button:hover:not(:disabled) { color: var(--text); border-color: var(--line); background: color-mix(in srgb, var(--paper) 72%, transparent); }
.language-strip button.active,
.language-strip button[aria-pressed="true"],
.language-strip button[aria-current="true"] { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.language-strip button:focus-visible { position: relative; z-index: 1; outline-color: var(--copper); outline-offset: -2px; }
.guest-header > .language-strip, .guest-topline + .language-strip { width: 100%; }
.terminal-header:has(.language-strip) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.terminal-header:has(.language-strip) > .language-strip { grid-column: 1 / -1; }
.terminal-header:has(.language-strip) + .terminal-layout { height: calc(100dvh - 128px); }
html[data-theme="ivory"] .language-strip,
html[data-theme="slate"] .language-strip,
html[data-theme="terracotta"] .language-strip { border: 1px solid var(--line); }
.guest-location { justify-content: space-between; gap: 12px; color: var(--muted); font-size: .75rem; }
.guest-location > span { display: inline-flex; align-items: center; gap: 6px; }
.demo-label { color: var(--copper-dark); letter-spacing: .04em; text-align: right; }
.guest-hero { min-height: 300px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.guest-hero > div { max-width: 68%; position: relative; z-index: 1; }
.hero-art { width: min(290px, 43%); position: absolute; right: -30px; bottom: -45px; opacity: .74; filter: saturate(.7) contrast(1.05); }
.hero-meta { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #d7cfc4; font-size: .8rem; }
.pure-hero > .icon { width: clamp(80px, 18vw, 140px); height: auto; color: #c88860; opacity: .6; }
.menu-section, .orders-section, .service-entry-grid, .store-facts { margin: 22px clamp(16px, 4vw, 28px); }
.section-heading { margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.section-heading h1, .section-heading h2 { margin-top: 4px; font: 600 clamp(1.45rem, 4vw, 2rem) var(--serif); }
.section-heading > small { color: var(--muted); font-size: .75rem; text-align: right; }
.service-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.service-entry { min-height: 150px; padding: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--line); background: var(--paper); text-align: left; }
.service-entry > .icon:first-child { width: 34px; height: 34px; color: var(--copper-dark); }
.service-entry h3 { font: 600 1.1rem var(--serif); }
.store-facts { display: grid; gap: 13px; }
.store-facts > div { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); }
.product-bottom { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.product-bottom > div { min-width: 0; display: grid; }
.add-button { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--ink); }
.image-badge { padding: 5px 8px; position: absolute; left: 8px; bottom: 8px; color: var(--paper); background: rgba(29,29,27,.86); font-size: .75rem; }
.product-card .product-image { position: relative; border: 0; }
.chat-heading { padding: 30px clamp(16px, 5vw, 36px) 20px; text-align: center; }
.chat-heading h1 { margin: 8px auto 0; font: 600 clamp(1.8rem, 6vw, 3rem)/1.14 var(--serif); }
.chat-heading > p { max-width: 560px; margin: 12px auto 0; color: var(--muted); }
.conversation-status { margin-top: 14px; }
.conversation-actions, .quick-questions, .offline-phrases { padding: 0 clamp(16px, 4vw, 28px) 14px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.notice { margin: 0 clamp(16px, 4vw, 28px) 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; color: var(--warning); background: var(--warning-soft); border: 1px solid #e1c78e; font-size: .875rem; }
.chat-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); text-align: center; }
.chat-empty .icon { width: 34px; height: 34px; color: var(--copper); }
.message-meta { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--copper-dark); font-size: .7rem; font-weight: 750; letter-spacing: .06em; }
.message-meta time { margin: 0; }
.message-translation { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(120,100,80,.2); color: var(--muted); }
.message details { margin-top: 8px; font-size: .8125rem; }
.message .btn { min-height: 38px; margin-top: 9px; }
.chat-photo-button { max-width: 100%; margin-bottom: 9px; padding: 0; display: block; border: 0; background: transparent; cursor: zoom-in; }
.chat-photo { width: min(420px, 100%); height: auto; max-height: none; object-fit: contain; }
.chat-photo-expanded { width: 100%; max-height: calc(90dvh - 180px); object-fit: contain; }
.warning-text { color: var(--danger) !important; }
.guest-shell .chat-compose { flex-direction: column; align-items: stretch; }
.guest-shell .chat-compose textarea { width: 100%; min-height: 76px; }
/* Conversation chrome may exceed a short viewport. Give messages a useful
   reading area and let the page grow instead of squeezing them to zero. */
.guest-shell:has(.guest-main > .chat-panel) { height: auto; min-height: 100dvh; padding-bottom: 0; }
.guest-shell:has(.guest-main > .chat-panel) .guest-main {
  min-height: 0;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.guest-shell:has(.guest-main > .chat-panel) .chat-panel { min-height: 0; flex: 1; overflow: visible; }
.guest-shell:has(.guest-main > .chat-panel) .chat-log { min-height: clamp(260px, 38dvh, 340px); max-height: min(52dvh, 600px); flex: 1 0 auto; overscroll-behavior: contain; }
.guest-shell:has(.guest-main > .chat-panel) .chat-compose { position: sticky; z-index: 10; bottom: calc(72px + env(safe-area-inset-bottom)); flex: 0 0 auto; }
.compose-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.compose-actions .disabled { opacity: .5; pointer-events: none; }
.attachment-preview { margin: 0 clamp(16px, 4vw, 28px) 10px; padding: 10px; display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--wash); }
.attachment-preview img { width: 74px; height: 74px; object-fit: cover; }
.attachment-preview small { color: var(--muted); }
.offline-phrases { padding-block: 12px; border-top: 1px solid var(--line); background: var(--wash); }
.offline-phrases > small { width: 100%; color: var(--muted); text-align: center; }

.terminal-layout { grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr); gap: 14px; padding: clamp(14px, 2vw, 24px); }
.terminal-layout { height: calc(100dvh - 72px); overflow: hidden; }
.terminal-menu { position: relative; }
.terminal-menu .cart-dock { width: calc(100% - 28px); margin: 12px auto 0; position: sticky; left: auto; bottom: 0; transform: none; }
.terminal-translation { padding: 0; display: flex; flex-direction: column; justify-content: initial; overflow: hidden; }
.terminal-translation > .chat-panel { min-height: 0; flex: 1; overflow: hidden; }
.terminal-translation .chat-heading { padding: 22px 18px 12px; }
.terminal-translation .chat-heading h1 { font-size: clamp(1.5rem, 2.5vw, 2.35rem); }
.terminal-translation .chat-heading > p { color: #c6beb2; }
.terminal-translation .chat-log { min-height: 140px; padding: 10px 14px; }
.terminal-translation .chat-compose { padding: 10px 14px; position: static; bottom: auto; }
.terminal-translation .offline-phrases { display: none; }
.terminal-translation .conversation-actions .btn,
.terminal-translation .quick-questions .btn,
.terminal-translation .notice .btn,
.terminal-translation .offline-phrases .btn,
.terminal-translation .chat-log .message-guest .btn { min-height: 44px; max-width: 100%; color: #fffaf2; border-color: rgba(255, 250, 242, .76); background: rgba(255, 255, 255, .08); white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.terminal-translation .conversation-actions .btn-secondary,
.terminal-translation .quick-questions .btn-secondary,
.terminal-translation .notice .btn-secondary { color: #241b17; border-color: #e4b998; background: #f0cfb8; }
.terminal-translation .conversation-actions .btn:hover:not(:disabled),
.terminal-translation .quick-questions .btn:hover:not(:disabled),
.terminal-translation .notice .btn:hover:not(:disabled),
.terminal-translation .offline-phrases .btn:hover:not(:disabled),
.terminal-translation .chat-log .message-guest .btn:hover:not(:disabled) { color: #171411; border-color: #fffaf2; background: #fffaf2; }
.terminal-translation .conversation-actions .btn:focus-visible,
.terminal-translation .quick-questions .btn:focus-visible,
.terminal-translation .notice .btn:focus-visible,
.terminal-translation .offline-phrases .btn:focus-visible,
.terminal-translation .chat-log .message-guest .btn:focus-visible { outline-color: #ffd2af; box-shadow: 0 0 0 2px #171411; }
.terminal-translation .conversation-actions .btn:disabled,
.terminal-translation .quick-questions .btn:disabled,
.terminal-translation .notice .btn:disabled,
.terminal-translation .offline-phrases .btn:disabled,
.terminal-translation .chat-log .message-guest .btn:disabled { color: rgba(255, 250, 242, .64); border-color: rgba(255, 250, 242, .3); background: rgba(255, 255, 255, .04); opacity: 1; }
html[data-theme="ivory"] .terminal-translation .conversation-actions,
html[data-theme="slate"] .terminal-translation .conversation-actions,
html[data-theme="terracotta"] .terminal-translation .conversation-actions { row-gap: 9px; }

@media (min-width: 601px) {
  .terminal-shell { height: 100dvh; min-height: 0; overflow: hidden; }
  .terminal-header, .terminal-header:has(.language-strip) { flex: 0 0 auto; }
  .terminal-header:has(.language-strip) + .terminal-layout,
  .terminal-layout { height: auto; min-height: 0; flex: 1 1 auto; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .terminal-menu, .terminal-translation { min-height: 0; max-height: none; }
  .terminal-layout.pure .terminal-translation { min-height: 0; }
}
.terminal-qr { min-height: 174px; padding: 14px; flex: 0 0 auto; display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 14px; text-align: left; color: var(--text); background: var(--wash); border: 0; border-top: 1px solid var(--line); }
.terminal-qr h3 { margin-top: 4px; font: 600 1rem var(--serif); }
.terminal-qr a { min-height: 44px; margin-top: 7px; display: inline-flex; align-items: center; gap: 6px; color: var(--copper-dark); font-weight: 700; }
.terminal-qr small { display: block; }
.qr-code { width: 132px; height: 132px; display: grid; place-items: center; padding: 6px; background: #fff; }
.qr-code svg { width: 100%; height: 100%; display: block; }
.terminal-layout.pure { grid-template-columns: minmax(0, 760px); justify-content: center; }
.terminal-layout.pure .terminal-translation { min-height: 650px; }

.option-group { margin: 22px 0 0; padding: 0; border: 0; }
.option-group legend { width: 100%; margin-bottom: 9px; font-weight: 750; }
.option-group legend small { float: right; color: var(--muted); font-weight: 450; }
.option-choice { min-height: 52px; padding: 10px 12px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; border: 1px solid var(--line); background: #fffefb; cursor: pointer; }
.option-choice + .option-choice { margin-top: 7px; }
.option-choice:has(input:checked) { border-color: var(--copper); background: #f7e8dd; }
.option-choice input { width: 20px; height: 20px; accent-color: var(--copper-dark); }
.option-choice.disabled { opacity: .52; cursor: not-allowed; }
.product-detail { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; }
.product-detail > img { width: 210px; height: 180px; object-fit: cover; }
.product-detail p { margin: 9px 0 14px; color: var(--muted); }
.food-facts { margin: 20px 0 24px; padding: 18px; display: grid; gap: 8px; border: 1px solid var(--line); border-left: 3px solid var(--copper); background: var(--wash); overflow-wrap: anywhere; word-break: normal; }
.food-facts h3 { margin-top: 9px; color: var(--text); font-size: .875rem; font-weight: 780; line-height: 1.4; }
.food-facts h3:first-of-type { margin-top: 0; }
.food-facts p { max-width: 100%; color: var(--text); font-size: .9375rem; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.food-facts small { max-width: 100%; line-height: 1.55; overflow-wrap: anywhere; }
.food-facts[dir="rtl"] { border-right: 3px solid var(--copper); border-left-width: 1px; text-align: right; }
.allergen-tags { max-width: 100%; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; }
.allergen-tags .badge { min-width: 0; max-width: 100%; height: auto; white-space: normal; text-align: start; overflow-wrap: anywhere; word-break: normal; }
.modal-body .food-facts + form { min-width: 0; }
.cart-lines { display: grid; gap: 4px; }
.cart-line { padding: 13px 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.cart-line > img { width: 76px; height: 76px; object-fit: cover; }
.cart-line h3 { font-size: .95rem; }
.cart-line small, .cart-line p { color: var(--muted); font-size: .8125rem; }
.quantity-control { margin-top: 8px; display: flex; align-items: center; gap: 7px; }
.quantity-control .btn { min-width: 44px; padding-inline: 9px; }
.cart-summary { margin: 18px 0 10px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; background: var(--wash); }
.cart-summary small { grid-column: 1 / -1; color: var(--muted); }
.payment-preference { min-width: 0; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; }
.payment-preference > legend { padding-inline: 5px; color: var(--ink); font-weight: 750; }
.payment-preference > p, .payment-preference > small { display: block; margin: 0 0 10px; color: var(--muted); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.payment-preference > small { margin: 12px 0 0; }
.payment-methods, .card-networks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.payment-method { min-width: 0; min-height: 46px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.payment-method:has(input:checked) { border-color: var(--copper); background: var(--copper-soft); }
.payment-method input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--copper-dark); }
.card-networks { margin-top: 12px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
.card-networks[hidden] { display: none; }
.card-networks > legend { grid-column: 1 / -1; margin-bottom: 7px; color: var(--muted); font-size: .8125rem; font-weight: 700; }
.receipt-payment { margin-top: 12px; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--wash); overflow-wrap: anywhere; }
.receipt-payment small { grid-column: 1 / -1; color: var(--copper-dark); }
.order-receipt { margin-bottom: 12px; }
.order-receipt > header, .order-receipt > footer, .receipt-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.order-receipt > header { padding-bottom: 10px; }
.receipt-line { padding: 12px 0; border-bottom: 1px solid var(--line); }
.receipt-line > span { min-width: 0; }
.receipt-line small { display: block; margin-top: 3px; color: var(--muted); }
.order-receipt > footer { padding-top: 14px; }
.phrase-card { padding: 26px; color: var(--paper); background: var(--ink); text-align: center; }
.phrase-card h2 { font: 600 1.7rem var(--serif); }
.phrase-card p { margin-top: 14px; color: #d9c0ad; font-size: 1.15rem; }

#toast { width: min(420px, calc(100% - 28px)); min-height: 50px; padding: 12px 14px; position: fixed; z-index: 250; right: 18px; bottom: 18px; display: flex; align-items: center; color: var(--paper); background: var(--ink); border-left: 4px solid var(--copper); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
#toast:empty { display: none; }
#toast.visible { opacity: 1; transform: none; }
.full-page { min-height: 100dvh; border: 0; }

.studio-mode { margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.studio-preview { min-height: 130px; margin: -24px -24px 24px; padding: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--paper); background: var(--ink-2); }
.studio-preview .icon { width: 32px; height: 32px; color: #d29874; }
.staff-preview { flex-direction: column; }
.guest-preview { position: relative; justify-content: flex-start; }
.guest-preview img { width: 140px; position: absolute; right: -20px; bottom: -35px; opacity: .72; }
.guest-preview span { max-width: 150px; font: 600 1.25rem var(--serif); }
.terminal-preview { background: var(--copper-soft); color: var(--ink); }
.studio-note { width: min(1400px, calc(100% - 40px)); margin: 0 auto 50px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--paper); }
.studio-note > div { min-height: 130px; padding: 22px; border-right: 1px solid var(--line); }
.studio-note > div:last-child { border-right: 0; }
.studio-note .icon { color: var(--copper-dark); }
.studio-note b, .studio-note p { display: block; }
.studio-note b { margin-top: 10px; }
.studio-note p { margin-top: 5px; color: var(--muted); font-size: .8125rem; }
.studio-shell > footer { padding: 22px; color: var(--muted); text-align: center; font-size: .75rem; }

@media (max-width: 1100px) {
  .merchant-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terminal-layout { grid-template-columns: minmax(0, 1fr) minmax(350px, .88fr); gap: 12px; padding: 14px; }
  .terminal-menu .product-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .merchant-shell { display: block; padding-bottom: 76px; }
  .merchant-sidebar { display: none; }
  .merchant-header { min-height: 68px; padding: 12px 18px; }
  .merchant-content { padding: 20px 16px 36px; }
  .merchant-bottom-nav { min-height: 70px; padding: 6px 6px max(7px, env(safe-area-inset-bottom)); position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); background: rgba(255, 253, 248, .98); backdrop-filter: blur(14px); }
  .merchant-bottom-nav button, .merchant-bottom-nav a { min-width: 0; min-height: 52px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); background: transparent; font-size: .75rem; }
  .merchant-bottom-nav .active { color: var(--copper-dark); }
  .workspace-grid { grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); }
  .settings-grid { grid-template-columns: 1fr; }
  .terminal-layout { grid-template-columns: minmax(0, 1fr) minmax(330px, .95fr); }
  .terminal-qr { min-height: 180px; text-align: left; }
  .terminal-qr svg, .terminal-qr canvas, .terminal-qr img { width: 132px; }
  .terminal-layout.pure { grid-template-columns: minmax(0, 680px); }
  .terminal-layout.pure .terminal-qr { min-height: 180px; text-align: left; }
  .studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  :root { font-size: 15px; }
  .panel { padding: 17px; }
  .form-grid, .workspace-grid, .settings-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 15px; }
  .merchant-header { align-items: flex-start; }
  .merchant-header .toolbar { justify-content: flex-end; }
  .detail-panel { min-height: 300px; }
  .product-grid, .guest-main .product-grid { grid-template-columns: 1fr; }
  .guest-header { padding-inline: 14px; }
  .guest-main > .category-tabs, .guest-main > .product-grid, .guest-main > .panel { margin-inline: 14px; }
  .product-card { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
  .product-card .product-image { height: 100%; min-height: 150px; aspect-ratio: auto; }
  .chat-compose { bottom: 68px; }
  .terminal-header { align-items: flex-start; flex-wrap: wrap; }
  .terminal-layout, .terminal-layout.pure { display: flex; flex-direction: column; }
  .terminal-layout, .terminal-layout.pure { height: auto; min-height: calc(100dvh - 72px); overflow: visible; }
  .terminal-layout.pure .terminal-translation, .terminal-translation { min-height: 430px; }
  .terminal-menu { min-height: 360px; }
  .terminal-qr, .terminal-layout.pure .terminal-qr { min-height: 190px; flex-direction: row; text-align: left; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-note { grid-template-columns: 1fr; }
  .studio-note > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .studio-note > div:last-child { border-bottom: 0; }
  .studio-header { align-items: flex-start; flex-direction: column; }
  .modal-backdrop { padding: 0; align-items: end; }
  dialog.modal, .modal { width: 100%; max-height: 92dvh; left: 0; top: auto; bottom: 0; transform: none; }
  .modal-footer .btn { flex: 1 1 130px; }
  .toast-stack { right: 14px; bottom: 84px; }
  #toast { right: 14px; bottom: 84px; }
  .product-detail { grid-template-columns: 1fr; }
  .product-detail > img { width: 100%; height: 190px; }
  .modal-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .food-facts { padding: 15px; }
  .cart-line { grid-template-columns: 62px minmax(0, 1fr); }
  .cart-line > img { width: 62px; height: 62px; }
  .cart-line > strong { grid-column: 2; }
  .payment-methods, .card-networks { grid-template-columns: 1fr; }
  .receipt-payment { grid-template-columns: 1fr; }
  .receipt-payment small { grid-column: 1; }
  .service-entry-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .merchant-content { padding-inline: 12px; }
  .merchant-header { padding-inline: 14px; }
  .merchant-header h1 { font-size: 1.35rem; }
  .merchant-bottom-nav button, .merchant-bottom-nav a, .guest-nav button, .guest-nav a { font-size: .7rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .toolbar .btn { flex: 1 1 auto; }
  .product-card { grid-template-columns: 105px minmax(0, 1fr); }
  .product-body { padding: 13px; }
  .product-body footer { align-items: flex-end; flex-wrap: wrap; }
  .guest-hero h1 { font-size: 2.2rem; }
  .chat-log { padding-inline: 14px; }
  .message { max-width: 92%; }
  .cart-dock { bottom: 78px; }
  .terminal-layout { padding: 10px; }
  .terminal-qr, .terminal-layout.pure .terminal-qr { padding: 14px; }
}

/* iPad terminal: two-row header, bounded live panel and compact catalog. */
.terminal-header { min-height: 0; padding: 10px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.terminal-topbar { min-width: 0; min-height: 46px; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; }
.terminal-topbar > .brand-lockup, .terminal-topbar > .store-logo { flex: 0 0 auto; }
.terminal-topbar > .field, .terminal-topbar > select, .terminal-topbar > .currency-control { width: auto; min-width: 90px; max-width: 150px; flex: 0 1 150px; }
.terminal-topbar > select { min-height: 44px; padding: 8px 30px 8px 10px; border: 1px solid var(--line); background: var(--paper); }
.terminal-topbar > .btn { min-width: max-content; flex: 0 0 auto; }
.terminal-topbar > .btn:first-of-type { margin-left: auto; }
.terminal-header > .language-strip { width: 100%; flex: 0 0 48px; }
.terminal-header:has(.language-strip) { display: flex; flex-direction: column; align-items: stretch; }
.terminal-header:has(.language-strip) > .language-strip { grid-column: auto; }
.terminal-header:has(.language-strip) + .terminal-layout { height: auto; }

.terminal-translation > .chat-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.terminal-translation .chat-heading { padding: 12px 14px 8px; flex: 0 0 auto; }
.terminal-translation .chat-heading h1 { margin-top: 5px; font-size: 1.4rem; line-height: 1.15; }
.terminal-translation .chat-heading > p { margin-top: 6px; font-size: .78rem; line-height: 1.4; }
.terminal-translation .conversation-status { margin-top: 7px; }
.terminal-translation .conversation-actions { padding: 0 10px 8px; flex: 0 0 auto; }
.terminal-translation .chat-log { min-height: 0; padding: 8px 12px; flex: 1 1 auto; overflow-y: auto; }
.terminal-translation .attachment-preview,
.terminal-translation .chat-compose { flex: 0 0 auto; }
.terminal-translation .chat-compose { padding: 8px 10px; flex-direction: column; align-items: stretch; }
.terminal-translation .chat-compose textarea { width: 100%; height: 54px; flex: none; }
.terminal-translation .chat-compose .compose-actions { justify-content: flex-end; flex-wrap: nowrap; }
.terminal-translation .chat-compose .btn { min-height: 40px; margin-top: 0; }
.terminal-translation .chat-compose textarea { min-height: 54px; }
.terminal-translation .not-connected .chat-compose { display: none; }

.terminal-qr { min-height: 150px; max-height: 175px; padding: 10px 12px; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; overflow: hidden; }
.terminal-qr .qr-code { width: 104px; height: 104px; padding: 5px; }
.terminal-qr .qr-code > svg { width: 100%; height: 100%; padding: 0; display: block; }
.terminal-qr > div:not(.qr-code) { min-width: 0; }
.terminal-qr h3 { font-size: .94rem; line-height: 1.25; }
.terminal-qr p, .terminal-qr small { font-size: .7rem; line-height: 1.35; }
.terminal-qr a { min-height: 40px; margin-top: 3px; font-size: .8rem; }
.terminal-qr a .icon { width: 20px; height: 20px; padding: 0; aspect-ratio: auto; background: transparent; }

@media (min-width: 601px) and (max-width: 1299px) {
  .terminal-header { max-height: 126px; }
  .terminal-layout { grid-template-rows: minmax(0, 1fr); }
  .terminal-menu .product-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .terminal-menu .product-card { min-height: 116px; display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .terminal-menu .product-card .product-image { width: 104px; height: 100%; min-height: 116px; aspect-ratio: auto; }
  .terminal-menu .product-card .product-body { min-width: 0; padding: 10px 12px; gap: 3px; }
  .terminal-menu .product-card .product-body h3 { font-size: 1rem; line-height: 1.2; }
  .terminal-menu .product-card .product-body > p { display: -webkit-box; overflow: hidden; font-size: .76rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .terminal-menu .product-card .eyebrow { font-size: .64rem; }
  .terminal-menu .product-bottom { padding-top: 3px; align-items: center; }
  .terminal-menu .price { font-size: 1rem; }
  .terminal-menu .currency-note { font-size: .66rem; }
  .terminal-menu .add-button { width: 44px; height: 44px; }
}

@media (min-width: 1300px) {
  .terminal-menu .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* Guest ordering dialog: facts beside the configurable order on tablets. */
.product-modal { width: min(940px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); }
.product-modal > .modal-body { padding: 0; overflow: hidden; }
.product-modal-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(390px, 1.1fr); min-height: 0; height: 100%; }
.product-summary, .product-config { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.product-summary { padding: 18px 20px; background: #f7f5eb; border-inline-end: 1px solid #e2e6d8; }
.product-config { padding: 4px 22px 22px; }
.product-detail { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
.product-detail > img { width: 132px; height: 106px; object-fit: cover; border-radius: 12px; }
.product-detail > div { min-width: 0; }
.product-detail .price { display: block; margin-top: 11px; font-size: 22px; }
.food-facts { margin-top: 16px; padding: 14px; border: 1px solid #e4ddc8; border-radius: 12px; background: #fffdf6; }
.food-facts h3 { font-size: 13px; margin: 10px 0 4px; color: var(--ink-3); }
.food-facts h3:first-of-type { margin-top: 0; }
.food-facts p { font-size: 14px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.food-facts > .muted { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.allergen-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.allergen-tags .badge { white-space: normal; overflow-wrap: anywhere; }
.product-config .option-group { margin: 18px 0 0; }
.product-config .option-group legend { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; width: 100%; font-size: 15px; color: var(--ink-2); }
.product-config .option-group legend small { margin-inline-start: auto; color: #89947c; }
.option-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option-choice { min-height: 46px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.option-choice:has(input:checked) { border-color: var(--copper); background: var(--copper-soft); color: var(--ink); }
.option-choice input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--green); }
.option-choice > span { min-width: 0; flex: 1; }
.option-choice > b { font-size: 10px; white-space: nowrap; }
.option-choice.disabled { opacity: .55; cursor: not-allowed; }
.product-config .form-grid { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; margin-top: 20px; }
.product-config .field { margin: 0; }
.product-config textarea { min-height: 70px; }
.product-modal > .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 12px 20px; }
.product-modal > .modal-footer > .btn { min-width: 210px; min-height: 48px; }
.product-total { margin-inline-end: auto; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 10px; }
.product-total small { font-size: 10px; color: #7d8870; }
.product-total output { font: 22px Georgia, serif; color: var(--copper-dark); }
.product-total span { grid-column: 1 / -1; font-size: 9px; color: #929d85; }
.product-config .note-policy { font-size: 13px; color: var(--muted); line-height: 1.5; }
.translation-fallback { display: block; margin-top: 5px; color: #9b744f; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.translation-fallback span { display: block; color: #68755c; }
.modal-header > .translation-fallback { flex: 1; margin: 0 12px; font-size: 8px; }
.modal-header > .translation-fallback span { display: inline; margin-inline-start: 5px; }
.product-modal :is(button, input, textarea, label.option-choice) { touch-action: manipulation; }
.product-modal .btn, .product-modal input[type="number"] { min-height: 44px; }
html[dir="rtl"] .guest-shell, html[dir="rtl"] .terminal-shell { text-align: right; }
html[dir="rtl"] .brand-lockup, html[dir="rtl"] .hero-meta, html[dir="rtl"] .product-bottom, html[dir="rtl"] .section-heading, html[dir="rtl"] .message-meta { flex-direction: row-reverse; }
html[dir="rtl"] .language-strip, html[dir="rtl"] .product-modal-grid, html[dir="rtl"] .product-detail, html[dir="rtl"] .option-choices { direction: rtl; }
html[dir="rtl"] .price, html[dir="rtl"] .currency-note, html[dir="rtl"] .product-total output { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 700px) {
  .guest .modal-backdrop { padding: 0; align-items: flex-end; }
  .product-modal { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; }
  .product-modal > .modal-body { overflow: auto; }
  .product-modal-grid { display: block; }
  .product-summary, .product-config { overflow: visible; }
  .product-summary { padding: 14px 16px; border-inline-end: 0; border-bottom: 1px solid #e2e6d8; }
  .product-detail { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .product-detail > img { width: 104px; height: 96px; }
  .food-facts { padding: 12px; }
  .product-config { padding: 1px 16px 18px; }
  .option-choices, .product-config .form-grid { grid-template-columns: 1fr; }
  .product-modal > .modal-footer { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); gap: 10px; }
  .product-modal > .modal-footer > .btn { min-width: 0; flex: 1; }
  .product-total output { font-size: 18px; }
}
@media (max-width: 380px) {
  .product-modal > .modal-footer { align-items: stretch; }
  .product-total { gap: 0 6px; }
  .product-total span { display: none; }
  .product-modal > .modal-footer > .btn { font-size: 11px; }
  .product-detail { grid-template-columns: 88px minmax(0, 1fr); }
  .product-detail > img { width: 88px; height: 86px; }
}

@media (forced-colors: active) {
  .btn, .badge, .panel, .product-card, .order-card, .message, .modal { border: 1px solid CanvasText; }
  .active { outline: 2px solid Highlight; }
}
/* Reception controls stay visible above the conversation, also on small phones. */
.ai-reception-actions{display:grid;gap:12px;padding:0 24px 18px}.ai-reception-actions .notice{margin:0}.ai-reception-actions>.btn{justify-self:start}.store-payment-methods{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media(max-width:560px){.ai-reception-actions{padding:0 16px 16px}.guest-nav button{min-width:0;padding-inline:3px}.guest-nav button span{font-size:11px;line-height:1.2;overflow-wrap:anywhere}}
.language-picker{display:flex;align-items:stretch;gap:8px;min-width:0}.language-picker .language-strip{flex:1;min-width:0}.language-more{flex:0 0 auto;white-space:normal;max-width:140px;line-height:1.3}.language-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.language-grid button{min-height:48px;overflow-wrap:anywhere}
@media(max-width:560px){.language-picker .language-strip{display:none}.language-picker{justify-content:flex-end}.language-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.language-more{max-width:140px;padding:8px}.language-more .icon{flex-shrink:0}.guest-hero{padding:24px 18px}.guest-hero h1{font-size:32px}.hero-art{max-width:76px}}
.product-language-notice{margin:0;padding:10px 20px;font-size:13px;border:0;border-bottom:1px solid var(--line);border-radius:0}
@media(min-width:821px){.product-modal>.modal-body{display:flex;flex-direction:column}.product-modal-grid{flex:1;height:auto;min-height:0}.product-language-notice{flex:0 0 auto}}

/* Guest storefront polish: all colors remain palette tokens so every store
   theme keeps readable foregrounds, focus states and selected controls. */
html[data-theme] .guest-shell,
html[data-theme] .terminal-shell {
  --guest-radius: 16px;
  --guest-radius-sm: 10px;
  --guest-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--text);
}
html[data-theme] .guest-shell .panel,
html[data-theme] .guest-shell .product-card,
html[data-theme] .terminal-shell .product-card,
html[data-theme] .terminal-shell .terminal-menu,
html[data-theme] .terminal-shell .terminal-translation,
html[data-theme] .terminal-shell .terminal-qr { border-radius: var(--guest-radius); }
html[data-theme] .guest-shell .product-card,
html[data-theme] .terminal-shell .product-card { overflow: hidden; box-shadow: var(--guest-shadow); }
html[data-theme] .product-image img { width: 100%; height: 100%; object-fit: cover; }
html[data-theme] .btn-primary,
html[data-theme] .add-button,
html[data-theme] .category-tabs .active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
html[data-theme] .btn-secondary { color: var(--ink); background: var(--copper-soft); border-color: color-mix(in srgb, var(--copper) 55%, var(--line)); }
html[data-theme] .option-choice,
html[data-theme] .payment-method,
html[data-theme] .payment-preference { background: var(--paper); }
html[data-theme] .option-choice:has(input:checked),
html[data-theme] .payment-method:has(input:checked) { color: var(--ink); background: var(--copper-soft); border-color: var(--copper); box-shadow: inset 3px 0 var(--copper); }

.terminal-language-guide { min-height: 22px; display: flex; align-items: center; gap: 10px; overflow: hidden; color: var(--muted); font-size: .72rem; line-height: 1.2; }
.terminal-language-guide b { color: var(--text); white-space: nowrap; }
.terminal-language-guide span { animation: terminal-guide-cycle 8s infinite; }
.terminal-language-guide span:last-child { margin-inline-start: -100%; opacity: 0; animation-delay: 4s; }
@keyframes terminal-guide-cycle { 0%,42% { opacity: 1; } 50%,92% { opacity: 0; } 100% { opacity: 1; } }

@media (min-width: 601px) {
  .terminal-header .language-picker { align-items: center; }
  .terminal-header .language-strip { height: 84px; display: grid; grid-template-rows: repeat(2, 36px); grid-auto-flow: column; grid-auto-columns: minmax(120px, max-content); gap: 5px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  .terminal-header .language-strip button { min-width: 120px; max-width: 168px; min-height: 36px; padding: 6px 10px; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; }
  .terminal-header .language-more { min-height: 76px; max-width: 108px; }
  .terminal-header:has(.language-strip) { max-height: none; }
  .terminal-layout { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr); }
  .terminal-menu .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terminal-menu .product-card { grid-template-columns: minmax(118px, 36%) minmax(0, 1fr); }
  .terminal-menu .product-card .product-image { width: 100%; }
  .terminal-translation .conversation-actions [data-action="g-request"],
  .terminal-translation .compose-actions [data-action="g-record"] { min-width: 46px; min-height: 46px; padding-inline: 12px; color: var(--ink); background: var(--copper-soft); border-color: var(--copper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--copper) 20%, transparent); }
  .terminal-qr { min-height: 128px; max-height: 144px; grid-template-columns: 112px minmax(0, 1fr); padding: 8px 10px; }
  .terminal-qr .qr-code { width: 112px; height: 112px; padding: 2px; }
}

@media (max-width: 600px) {
  .guest-shell { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .guest-main { min-width: 0; overflow-x: clip; }
  .guest-main .product-card { grid-template-columns: minmax(118px, 36%) minmax(0, 1fr); min-height: 152px; }
  .guest-main .product-card .product-image { min-height: 152px; }
  .guest-main .product-body { padding: 12px; }
  .cart-dock { width: calc(100% - 24px); bottom: calc(76px + env(safe-area-inset-bottom)); border-radius: 14px; }
  .product-modal { max-height: 94dvh; }
  .product-modal .modal-body { min-height: 0; padding-bottom: 18px; overscroll-behavior: contain; }
  .product-modal .modal-footer { position: sticky; z-index: 2; bottom: 0; }
  .product-config textarea { scroll-margin-bottom: 96px; }
}

@media (max-width: 390px) {
  .guest-header { padding-inline: 12px; }
  .guest-main .product-card { grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); }
  .guest-main .product-card .product-image { min-height: 146px; }
  .product-bottom { gap: 6px; }
  .add-button { width: 42px; height: 42px; }
}

.pickup-callout { padding: 20px; display: grid; justify-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--wash); text-align: center; }
.pickup-callout small { color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pickup-callout strong { font: 750 clamp(3.4rem, 14vw, 5.8rem)/1 var(--sans); letter-spacing: .08em; color: var(--ink); }
.pickup-callout p, .receipt-guidance { color: var(--muted); }
.order-reference { margin: 14px 0; padding: 12px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.order-reference span { color: var(--muted); font-weight: 700; }
.order-reference strong { color: var(--ink); font: 750 clamp(1.5rem, 7vw, 2.2rem)/1.2 var(--sans); letter-spacing: .04em; }
.receipt-guidance { margin-top: 14px; text-align: center; }
.order-receipt [data-status="expired"] { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); }

.guest-header-actions { min-width: 0; flex: 1 0 100%; }
.guest-header-actions .language-picker { width: 100%; }
.guest-location .currency-select { min-height: 36px; color: var(--text); background: var(--paper); border-color: var(--line); font-weight: 700; }
.guest-shell .product-body h3,
.guest-shell .price,
.guest-shell .currency-note { color: var(--text); }

@media (max-width: 560px) {
  .guest-header { min-height: 0; padding: 8px 12px 7px; gap: 5px; }
  .guest-topline { min-height: 42px; gap: 8px; flex-wrap: nowrap; }
  .guest-topline .brand-lockup { min-width: 0; flex: 1 1 auto; }
  .guest-topline .brand-lockup b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .guest-header-actions { width: auto; min-width: 0; flex: 0 0 auto; }
  .guest-header-actions .language-picker { width: auto; }
  .guest-header-actions .language-more { min-height: 40px; max-width: 132px; padding: 7px 10px; }
  .guest-shell .chat-heading { padding: 14px 16px 10px; }
  .guest-shell .chat-heading h1 { margin-top: 4px; font-size: 1.55rem; }
  .guest-shell .chat-heading > p { margin-top: 6px; font-size: .82rem; line-height: 1.35; }
  .guest-shell .conversation-status { margin-top: 7px; }
  .guest-shell .chat-compose { padding: 8px 12px; }
  .guest-shell .chat-compose textarea { min-height: 54px; }
  .guest-shell .chat-compose .compose-actions { flex-wrap: nowrap; }
  .guest-shell .chat-compose .compose-actions label.btn { width: 46px; min-width: 46px; padding-inline: 8px; }
  .guest-shell .chat-compose .compose-actions label.btn span { display: none; }
  .guest-location { min-height: 30px; }
  .guest-location .currency-select { min-height: 30px; padding-block: 3px; }
  .guest-hero { min-height: 124px; padding: 14px 18px; align-items: center; }
  .guest-hero > div { max-width: calc(100% - 62px); }
  .guest-hero .eyebrow { font-size: .62rem; }
  .guest-hero h1 { margin-top: 3px; font-size: 1.55rem; line-height: 1.06; }
  .guest-hero > div > p { margin-top: 5px; display: -webkit-box; overflow: hidden; font-size: .78rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .guest-hero .hero-meta { margin-top: 7px; gap: 5px; font-size: .7rem; }
  .guest-hero .hero-art { width: 68px; right: 4px; bottom: -8px; opacity: .54; }
  .menu-section { margin: 12px 12px 18px; }
  .menu-section .section-heading { margin-bottom: 8px; }
  .menu-section .section-heading h2 { font-size: 1.35rem; }
  .menu-section .category-tabs { padding-bottom: 7px; }
}

/* V11: predictable touch targets, layered dialogs and readable currency detail. */
html.has-modal, html.has-modal body { overflow: hidden; overscroll-behavior: none; }
.modal { border-radius: 20px; outline: none; }
.modal-header { gap: 12px; }
.modal-header h2 { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.modal-header > button { flex: 0 0 44px; border-radius: 10px; }
.modal-body { scroll-padding-block: 16px; overscroll-behavior: contain; }
.modal-footer { background: var(--paper); }
.modal-footer .btn { white-space: normal; line-height: 1.35; }
.fx-reference { font-variant-numeric: tabular-nums; line-height: 1.5; overflow-wrap: anywhere; }
.terminal-fx-reference { display: block; margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.product-bottom { align-items: flex-end; }
.product-bottom .price { overflow-wrap: anywhere; }
.add-button { flex: 0 0 44px; min-width: 44px; min-height: 44px; }
.guest-location .currency-select { min-height: 44px; font-size: 14px; border-radius: 10px; padding-inline: 12px 28px; }
.guest-header-actions .language-more { min-height: 44px; border-radius: 10px; }
.guest-shell :is(input,textarea,select), .modal :is(input,textarea,select) { font-size: 16px; }
.option-choice { min-height: 48px; transition: background-color .15s, border-color .15s; }
.option-choice:has(input:checked) { background: color-mix(in srgb, var(--copper) 12%, var(--paper)); border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper); }
.option-choice:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 2px; }
.quantity-control button { min-width: 44px; min-height: 44px; }
.cart-summary { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .modal { border-radius: 22px 22px 0 0; max-height: calc(100dvh - 16px); }
  .modal-header { padding: 12px 16px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .menu-section .section-heading { flex-wrap: wrap; gap: 5px; }
  .menu-section .section-heading .fx-reference { flex-basis: 100%; font-size: .75rem; }
  .guest-main .product-body { min-width: 0; }
  .guest-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .guest-nav button { min-height: 56px; }
  .cart-dock { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .product-modal .modal-footer .btn { font-size: 14px; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}
.food-facts > h3:first-child { margin-top: 0; }
.food-facts .allergen-tags { margin: 8px 0; }
.ingredient-details { margin-top: 12px; border-top: 1px solid var(--line); }
.ingredient-details summary { min-height: 44px; padding: 12px 0 6px; font-weight: 650; line-height: 1.45; cursor: pointer; }
.ingredient-details[open] summary { padding-bottom: 12px; }
.image-provenance { display: block; color: var(--muted); font-size: 11px; margin-top: 8px; }
@media (max-width: 560px) {
  .product-summary .food-facts { padding: 14px; margin-top: 14px; }
  .product-summary .food-facts > .muted { display: block; font-size: 12px; line-height: 1.55; }
  .product-language-notice { font-size: 12px; line-height: 1.5; padding: 9px 16px; }
}

/* In a conversation, the language picker remains available through its
   20-language button; the full strip otherwise consumes most of a short iPad. */
.guest-shell:has(.guest-main > .chat-panel) .language-strip { display: none; }
.guest-shell:has(.guest-main > .chat-panel) .language-picker { justify-content: flex-end; }
.guest-shell:has(.guest-main > .chat-panel) .guest-header-actions { width: auto; min-width: 0; flex: 0 0 auto; }
.guest-shell:has(.guest-main > .chat-panel) .guest-header { min-height: 0; padding-block: 6px; gap: 4px; flex: 0 0 auto; }
.guest-shell:has(.guest-main > .chat-panel) .guest-location .currency-select { min-height: 32px; padding-block: 3px; }
.guest-shell:has(.guest-main > .chat-panel) .chat-heading { padding: 8px 16px 5px; }
.guest-shell:has(.guest-main > .chat-panel) .chat-heading .eyebrow { display: none; }
.guest-shell:has(.guest-main > .chat-panel) .chat-heading h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 1.85rem); }
.guest-shell:has(.guest-main > .chat-panel) .chat-heading > p { margin: 4px auto 0; font-size: .8rem; line-height: 1.35; }
.guest-shell:has(.guest-main > .chat-panel) .conversation-status { margin-top: 3px; }
.guest-shell:has(.guest-main > .chat-panel) .ai-reception-actions { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 16px 8px; }
.guest-shell:has(.guest-main > .chat-panel) .ai-reception-actions .notice,
.guest-shell:has(.guest-main > .chat-panel) .ai-reception-actions > small { grid-column: 1 / -1; }
.guest-shell:has(.guest-main > .chat-panel) .ai-reception-actions .notice { padding-block: 7px; }
.guest-shell:has(.guest-main > .chat-panel) .quick-questions { min-width: 0; padding: 0 0 3px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.guest-shell:has(.guest-main > .chat-panel) .quick-questions .btn { flex: 0 0 auto; max-width: min(76vw, 320px); }
.guest-shell:has(.guest-main > .chat-panel) .chat-compose { padding-block: 6px; gap: 6px; }
.guest-shell:has(.guest-main > .chat-panel) .chat-compose textarea { min-height: 46px; height: 46px; }
@media (max-width: 560px) {
  .guest-shell:has(.guest-main > .chat-panel) .ai-reception-actions { grid-template-columns: minmax(0, 1fr); }
  .guest-shell:has(.guest-main > .chat-panel) .ai-reception-actions > .btn { grid-column: 1; }
}
.order-receipt .translation-fallback { font-size: .75rem; line-height: 1.4; }