/* Order pages (/order): same dark and gold world as the booking widget, laid out like a delivery shop */
.shop-shell {
	--bg: #0c0b0a; --surface: #151312; --surface-2: #1c1a18; --surface-3: #242220;
	--border: rgba(201, 164, 89, 0.22); --border-soft: rgba(245, 240, 230, 0.09);
	--gold: #c9a259; --gold-strong: #e2c07f; --text: #f3ede1; --text-muted: #a89e8c;
	--danger: #e2867c; --success: #8fbf7a;
	--radius-sm: 6px; --radius-md: 10px; --radius-pill: 999px;
	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5;
	min-height: 100vh; -webkit-text-size-adjust: 100%;
}
.shop-shell *, .shop-shell *::before, .shop-shell *::after { box-sizing: border-box; text-shadow: none; }
.shop-shell ::selection { background: var(--gold); color: #1a1408; }
.shop-shell a { color: var(--gold); text-underline-offset: 3px; }
.shop-shell a:hover { color: var(--gold-strong); }
.shop-shell :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.shop-shell button { font-family: inherit; cursor: pointer; }
.shop-shell h1, .shop-shell h2, .shop-shell h3, .shop-shell p, .shop-shell ul { margin: 0; padding: 0; }
.shop-shell ul { list-style: none; }
.shop-shell .brand-logo { display: block; height: 40px; width: auto; }

/* top bar */
.shop-top { position: sticky; top: 0; z-index: 30; background: rgba(12, 11, 10, 0.96); border-bottom: 1px solid var(--border-soft); backdrop-filter: blur(6px); }
.shop-top-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.shop-logo { display: block; flex: none; }
.shop-mode { display: flex; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 3px; }
.mode-btn { border: 0; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); transition: background 150ms ease, color 150ms ease; box-sizing: border-box; }
.mode-btn[aria-pressed="true"] { background: var(--gold); color: #1a1408; }
.mode-btn:disabled { color: rgba(168, 158, 140, 0.4); cursor: not-allowed; }
.shop-status { font-size: 13px; color: var(--text-muted); margin-left: auto; display: flex; align-items: center; gap: 8px; }
.shop-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.shop-status.is-open::before { background: var(--success); }
.shop-status.is-closed::before { background: var(--danger); }
.shop-notice { background: var(--surface-2); border-bottom: 1px solid var(--border-soft); color: var(--gold-strong); text-align: center; font-size: 14px; padding: 10px 16px; }

/* quick delivery-zone check on the menu page, before the guest builds a cart (see checkout.php's own .co-zone for the
   paired flow, re-checked there regardless). Collapsed into a small toggle by default; shop-zone-box is a floating
   dropdown (like the datepicker/offer-dialog elsewhere in this app), not a row reflowing the header. It stays open
   while the guest is filling it in - only a tap outside, Escape, or the backdrop closes it - since auto-closing on
   every resolved check used to snap it shut mid-keystroke on mobile the moment all three fields had some value.
   shop-zone-backdrop dims the category nav/menu behind it (they sit right under the header on a phone, directly in
   the dropdown's path) so the overlay reads as an intentional modal instead of a stray box covering navigation. */
.shop-zone { display: flex; align-items: center; gap: 10px; }
.shop-zone-toggle { border: 0; background: transparent; padding: 0; min-height: 44px; color: var(--gold); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.shop-zone-toggle:hover { color: var(--gold-strong); }
.shop-zone-result { font-size: 13px; color: var(--text-muted); }
.shop-zone-result:empty { display: none; }
.shop-zone-result.ok { color: var(--success); }
.shop-zone-result.bad { color: var(--danger); }
/* the what3words escape hatch: a muted secondary link that only appears once a typed address is
   not found (shop.js), for a location with no real street (a field, an event site) */
.shop-zone-w3w-toggle { display: flex; align-items: center; border: 0; background: transparent; padding: 0; margin-top: 14px; min-height: 44px; color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.shop-zone-w3w-toggle:hover { color: var(--gold); }
/* explicit [hidden] overrides: this toggle's own display:flex, and the box's .co-grid
   display:grid, both have the same specificity as the browser's default [hidden]{display:none}
   and would otherwise win by source order, showing them even while hidden is set */
.shop-zone-w3w-toggle[hidden], #sz-w3w-box[hidden], #co-w3w-box[hidden] { display: none; }
#sz-w3w-box, #co-w3w-box { margin-top: 10px; }
/* two or more real, deliverable streets matched the same typed text (e.g. "Goschentor" is also the start of
   "Goschenstraße") - the guest picks instead of the app silently guessing. Flat at rest (not a floating
   overlay): inside #sz-candidates it already sits in the already-floating .shop-zone-box, inside #co-candidates
   it displaces the checkout page's own flow, so neither needs its own shadow */
.co-candidates { margin-top: 10px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.co-candidates[hidden] { display: none; }
.co-candidate { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 10px 14px; background: var(--surface-2); border: 0; border-bottom: 1px solid var(--border-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.co-candidate:last-child { border-bottom: 0; }
.co-candidate:hover, .co-candidate:focus-visible { background: var(--surface-3); outline: none; }
.co-candidate strong { font-weight: 700; }
.co-candidate small { color: var(--text-muted); font-size: 13px; }
.shop-zone-box { position: absolute; top: 100%; right: 16px; margin-top: 8px; z-index: 40; width: 320px; max-width: calc(100vw - 32px); padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.shop-zone-box .co-grid { margin: 0; }
.shop-zone-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.5); }

/* layout */
.shop-layout { max-width: 1240px; margin: 0 auto; padding: 0 16px 120px; display: grid; grid-template-columns: 1fr; gap: 0 32px; }
/* the bars that stay while the menu scrolls sit one below the other; their offsets are the real heights of what is above them (shop.js sets --shop-sticky-top = the top bar when it is sticky, else 0,
   and --shop-search-h = the search bar). The top bar wraps to up to four rows on a phone, so it scrolls away there and only search and categories stay; from 1024px up it stays too. */
.shop-top--menu { position: relative; z-index: 30; }
.shop-cats { position: sticky; top: calc(var(--shop-sticky-top, 0px) + var(--shop-search-h, 66px)); z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; margin: 0 -16px; background: var(--bg); scrollbar-width: none; }
.shop-cats::-webkit-scrollbar { display: none; }
/* diet filter: three toggles at the start of the category bar (a column of their own above the categories on a wide screen) */
.shop-diets { display: flex; flex: none; gap: 8px; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--border-soft); }
.shop-diet-chip { flex: none; min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px dashed var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.shop-diet-chip:hover { color: var(--text); border-color: var(--gold); }
.shop-diet-chip.is-on { border-style: solid; border-color: var(--gold); background: rgba(201, 162, 89, 0.16); color: var(--gold-strong); font-weight: 700; }
.shop-diet { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.shop-diet span { padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--success); font-size: 12px; font-weight: 700; }
.shop-diet span.is-spicy { color: var(--danger); }
.shop-cats a { flex: none; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.shop-cats a.is-active { color: #1a1408; background: var(--gold); border-color: var(--gold); }
.shop-menu { min-width: 0; }
.shop-cat { padding-top: 28px; scroll-margin-top: calc(var(--shop-sticky-top, 0px) + var(--shop-search-h, 66px) + 76px); }
.shop-cat h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.15; margin-bottom: 6px; text-wrap: balance; }
.shop-cat-desc { color: var(--text-muted); font-size: 14px; max-width: 60ch; margin-bottom: 4px; }
.shop-list { margin-top: 10px; }
.shop-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 18px 0; border-top: 1px solid var(--border-soft); align-items: start; }
.shop-item:first-child { border-top: 0; }
.shop-item-text { grid-column: 1; }
.shop-item h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.shop-item-text p { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin-top: 3px; max-width: 62ch; }
.shop-item-img { grid-column: 2; grid-row: 1 / span 2; width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-soft); }
.shop-item-buy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.shop-price { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-add { min-height: 44px; min-width: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--gold-strong); font-size: 15px; font-weight: 700; transition: background 150ms ease, border-color 150ms ease; }
.shop-add:hover { background: rgba(201, 162, 89, 0.14); border-color: var(--gold); }
.shop-legal { color: var(--text-muted); font-size: 12px; line-height: 1.6; margin-top: 40px; max-width: 70ch; }
.shop-empty { color: var(--text-muted); padding: 40px 0; }
.shop-shell .legal-footer { margin: 20px 0 0; text-align: left; font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
/* the legal links are tap targets like every other control: 44 px high, with the text kept where it was (negative margin on the left edge) */
.shop-shell .legal-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--text-muted); text-underline-offset: 3px; }
.shop-shell .legal-footer a:first-child { margin-left: -8px; }
.shop-shell .legal-footer a:hover, .shop-shell .legal-footer a:focus-visible { color: var(--gold-strong); }
/* a heading for screen readers (the page has no visible h1: the logo is the title) and a link that jumps over the header */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shop-shell .skip-link { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--gold); color: #1a1408; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); transition: top .15s ease; }
.shop-shell .skip-link:focus { top: 12px; color: #1a1408; }
.shop-menu:focus { outline: none; }
.shop-menu { scroll-margin-top: calc(var(--shop-sticky-top, 0px) + var(--shop-search-h, 66px) + 76px); }

/* cart: a sheet on the phone, a fixed column on the desktop */
.shop-cart { position: fixed; inset: 0; z-index: 50; background: var(--bg); padding: 0 16px 24px; overflow-y: auto; transform: translateY(100%); visibility: hidden; transition: transform 240ms cubic-bezier(.16,1,.3,1), visibility 0s 240ms; }
.shop-cart.is-open { transform: none; visibility: visible; transition: transform 240ms cubic-bezier(.16,1,.3,1); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.cart-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; }
.cart-close { width: 44px; height: 44px; border: 1px solid var(--border-soft); border-radius: 50%; background: transparent; color: var(--text); font-size: 26px; line-height: 1; }
.cart-empty { color: var(--text-muted); padding: 24px 0; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--border-soft); }
.cart-line h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.cart-opts { grid-column: 1; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.cart-lineprice { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cart-qty { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.qty-btn { width: 44px; height: 44px; box-sizing: border-box; border: 1px solid var(--border-soft); border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 20px; line-height: 1; }
.qty-btn:hover { border-color: var(--border); }
.qty-num { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-remove { margin-left: auto; border: 0; background: transparent; color: var(--text-muted); font-size: 13px; min-height: 44px; box-sizing: border-box; padding: 0 8px; text-decoration: underline; text-underline-offset: 3px; }
.cart-sum { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; display: grid; gap: 6px; }
.cart-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.cart-row.muted { color: var(--text-muted); font-size: 14px; }
.cart-row.total { font-size: 18px; font-weight: 700; margin-top: 4px; }
.cart-min { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--gold-strong); font-size: 14px; }
.cart-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: var(--radius-pill); background: var(--gold); color: #1a1408; font-size: 16px; font-weight: 700; text-decoration: none; transition: background 150ms ease; }
.shop-shell a.cart-go { color: #1a1408; }
.cart-go:hover { background: var(--gold-strong); }
.cart-go[aria-disabled="true"] { background: var(--surface-3); color: var(--text-muted); pointer-events: none; }
.shop-cartbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--gold); color: #1a1408; font-size: 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.shop-cartbar[hidden] { display: none; }
.cartbar-count { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #1a1408; color: var(--gold-strong); font-size: 15px; }
.cartbar-label { flex: 1; text-align: left; }
.cartbar-total { font-variant-numeric: tabular-nums; }

/* product dialog */
.shop-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--surface); color: var(--text); }
.shop-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.shop-dialog[open] { display: flex; flex-direction: column; }
.pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 8px; }
.pd-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; text-wrap: balance; }
.pd-close { flex: none; width: 44px; height: 44px; border: 1px solid var(--border-soft); border-radius: 50%; background: transparent; color: var(--text); font-size: 26px; line-height: 1; }
.pd-body { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
.pd-desc { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.pd-allergens { color: var(--text-muted); font-size: 12px; margin-top: 8px; }
.pd-step { display: inline-flex; align-items: center; gap: 2px; }
.pd-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-soft); background: var(--surface); }
.pd-add { flex: 1; min-height: 52px; border: 0; border-radius: var(--radius-pill); background: var(--gold); color: #1a1408; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px; }
.pd-add:hover { background: var(--gold-strong); }

/* product dialog: required choices in one highlighted block, optional extras collapsed below */
.pd-required { margin-top: 18px; padding: 2px 14px 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(201, 162, 89, 0.07); }
.pd-req { padding: 14px 0 12px; border-radius: var(--radius-md); }
.pd-req + .pd-req { border-top: 1px solid var(--border-soft); }
.pd-req header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pd-req h3 { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
.pd-need { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pd-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 24px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--gold-strong); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease; }
.pd-badge .pd-check { width: 13px; height: 13px; }
.pd-req.is-done .pd-badge { color: var(--success); border-color: rgba(143, 191, 122, 0.4); }
.pd-req.is-missing .pd-badge { color: #1a0f0d; background: var(--danger); border-color: var(--danger); }
.pd-req.is-flash { animation: pd-flash 900ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pd-flash { 0% { background: rgba(226, 134, 124, 0.22); } 100% { background: transparent; } }
.pd-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.pd-chips.is-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pd-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; line-height: 1.25; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.pd-chip:hover:not(:disabled) { border-color: var(--border); }
.pd-chip-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pd-chip-price { flex: none; color: var(--text-muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pd-chip .pd-check { display: none; flex: none; width: 16px; height: 16px; color: var(--gold-strong); }
.pd-chip[aria-pressed="true"], .pd-chip.is-on { border-color: var(--gold); background: rgba(201, 162, 89, 0.16); color: var(--gold-strong); }
.pd-chip[aria-pressed="true"] .pd-check { display: block; }
.pd-chip[aria-pressed="true"] .pd-chip-price { color: var(--gold-strong); }
.pd-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.pd-chip.has-step { padding: 4px 6px 4px 12px; cursor: default; }
.pd-chip.has-step .qty-btn { width: 36px; height: 36px; }

.pd-extras { margin-top: 26px; }
.pd-extras-title { font-size: 15px; font-weight: 700; padding-bottom: 6px; }
.pd-ext { border-top: 1px solid var(--border-soft); }
.pd-ext:last-child { border-bottom: 1px solid var(--border-soft); }
.pd-ext-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 0; border: 0; background: transparent; color: var(--text); text-align: left; font-size: 15px; font-weight: 600; }
.pd-ext-title { flex: none; max-width: 55%; }
.pd-ext-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 13px; font-weight: 500; text-align: right; }
.pd-ext.has-choice .pd-ext-sum { color: var(--gold-strong); }
.pd-count { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--gold); color: #1a1408; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.pd-chev { flex: none; width: 18px; height: 18px; color: var(--text-muted); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.pd-ext.is-open .pd-chev { transform: rotate(180deg); }
.pd-ext-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.pd-ext.is-open .pd-ext-body { grid-template-rows: 1fr; }
.pd-ext-in { overflow: hidden; min-height: 0; }
.pd-ext.is-open .pd-ext-in { padding-bottom: 14px; }
.shop-shell .pd-limit { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.pd-ext .pd-chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.pd-ext .pd-chips.is-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.pd-ext .pd-chip { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 52px; padding-right: 32px; }
.pd-ext .pd-chip-name { flex: none; width: 100%; overflow-wrap: break-word; hyphens: auto; }
.pd-ext .pd-chip .pd-check { position: absolute; top: 10px; right: 10px; }
.pd-ext .pd-chip.has-step { grid-column: 1 / -1; flex-direction: row; align-items: center; padding-right: 6px; }
.pd-ext .pd-chip.has-step .pd-chip-name { width: auto; flex: 1 1 auto; min-width: 0; }

.pd-note { margin-top: 20px; }
.pd-note-toggle { border: 0; background: transparent; padding: 10px 0; min-height: 44px; color: var(--gold); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pd-note-label { font-size: 14px; font-weight: 700; display: block; margin-bottom: 6px; }
.pd-note textarea { width: 100%; min-height: 64px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; padding: 10px 12px; resize: vertical; }
.pd-add { white-space: nowrap; gap: 8px; padding: 0 18px; }
.pd-add.is-blocked { background: var(--surface-3); color: var(--gold-strong); box-shadow: inset 0 0 0 1px var(--border); }
.pd-add.is-blocked:hover { background: var(--surface-3); }
.pd-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) { .pd-ext-body, .pd-chev, .pd-badge, .pd-chip { transition: none; } .pd-req.is-flash { animation: none; } }

.shop-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 60; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--surface-3); border: 1px solid var(--border); color: var(--text); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; max-width: calc(100% - 32px); text-align: center; }
.shop-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.shop-soon { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.shop-soon .brand-logo { height: 80px; }
.shop-soon h1 { font-family: var(--font-display); font-weight: 300; font-size: 40px; }
.shop-soon p { color: var(--text-muted); max-width: 40ch; }

@media (min-width: 720px) {
	.shop-dialog { width: min(640px, calc(100% - 48px)); height: auto; max-height: calc(100% - 48px); margin: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
	.shop-item { grid-template-columns: minmax(0, 1fr) 96px; }
	.shop-item-img { width: 96px; height: 96px; }
	.shop-item-buy { grid-column: 1; }
}
/* status page: ask for the stamp card reminders / wait for the confirmation mail; two answers of the same size */
.st-nl { margin: 16px 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(201, 162, 89, 0.07); }
.st-nl[hidden] { display: none; }
.st-nl h2 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.st-nl p { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
.st-nl p strong { color: var(--text); }
.st-nl-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.st-nl-btn { flex: 1 1 180px; min-height: 48px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); font-size: 15px; font-weight: 700; }
.st-nl-btn:hover { border-color: var(--gold); color: var(--gold-strong); }
.st-nl-btn.is-yes { background: var(--gold); border-color: var(--gold); color: #1a1408; }
.st-nl-btn.is-yes:hover { background: var(--gold-strong); color: #1a1408; }
.st-nl-btn:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.st-nl .st-nl-fine { font-size: 13px; margin: 0; }
/* checkout: the reminder tick sits right under the stamp card it is about */
.co-nl-stamps { margin: 10px 0 18px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); }
.co-nl-stamps[hidden] { display: none; }
.co-nl-stamps .co-hint { margin: 8px 0 0; }

/* product dialog on a wide screen: wider, required choices as form rows (title left, choices right), extras with more chips per row */
@media (min-width: 960px) {
	.shop-dialog { width: min(920px, calc(100% - 64px)); }
	.pd-head { padding: 20px 24px 8px; }
	.pd-body { padding: 0 24px 20px; }
	.pd-foot { padding-left: 24px; padding-right: 24px; }
	.pd-desc, .pd-allergens { max-width: 72ch; }
	.pd-required { padding: 4px 18px; }
	.pd-req { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; align-items: start; }
	.pd-req header { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding-top: 4px; }
	.pd-req h3 { flex: none; }
	.pd-chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 145px), 1fr)); }
	.pd-chips.is-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
	.pd-chip-name { overflow-wrap: break-word; hyphens: auto; }
	.pd-ext .pd-chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 138px), 1fr)); }
	.pd-ext .pd-chips.is-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
	.pd-ext .pd-chip { min-height: 48px; }
}
@media (min-width: 1024px) {
	.shop-layout { grid-template-columns: 190px minmax(0, 1fr) 340px; padding-bottom: 60px; }
	.shop-top--menu { position: sticky; }
	.shop-cats { position: sticky; top: calc(var(--shop-sticky-top, 61px) + var(--shop-search-h, 66px) + 25px); align-self: start; flex-direction: column; overflow: visible; margin: 28px 0 0; padding: 0; background: transparent; gap: 2px; max-height: calc(100vh - var(--shop-sticky-top, 61px) - var(--shop-search-h, 66px) - 49px); overflow-y: auto; }
	.shop-cats a { border: 0; border-radius: var(--radius-md); min-height: 44px; white-space: normal; }
	.shop-diets { flex-direction: column; gap: 4px; padding: 0 0 10px; margin: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--border-soft); }
	.shop-diet-chip { border-radius: var(--radius-md); text-align: left; }
	.shop-cats a.is-active { background: rgba(201, 162, 89, 0.16); color: var(--gold-strong); }
	.shop-cat { scroll-margin-top: calc(var(--shop-sticky-top, 61px) + var(--shop-search-h, 66px) + 29px); }
	.shop-menu { scroll-margin-top: calc(var(--shop-sticky-top, 61px) + var(--shop-search-h, 66px) + 29px); }
	.shop-cart { inset: auto; position: sticky; top: calc(var(--shop-sticky-top, 61px) + var(--shop-search-h, 66px) + 25px); align-self: start; z-index: 1; transform: none; visibility: visible; margin-top: 28px; padding: 0 20px 20px; max-height: calc(100vh - var(--shop-sticky-top, 61px) - var(--shop-search-h, 66px) - 49px); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
	.cart-head { background: var(--surface); }
	.cart-close { display: none; }
	.shop-cartbar { display: none !important; }
	.shop-toast { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.shop-cart, .shop-toast, .mode-btn, .shop-add { transition: none; }
}

/* checkout */
.co-back { margin-left: auto; font-size: 14px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.co-layout { max-width: 1100px; margin: 0 auto; padding: 16px 16px 60px; display: grid; grid-template-columns: 1fr; gap: 24px 40px; }
.co-form h1 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; margin-bottom: 8px; }
.co-sec { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.co-sec[hidden] { display: none; }
.co-sec legend { font-family: var(--font-display); font-size: 24px; padding: 0; margin-bottom: 12px; }
.co-hint { color: var(--text-muted); font-size: 14px; margin-top: 10px; }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.co-f.wide { grid-column: 1 / -1; }
.co-f input, .co-slots select { width: 100%; min-height: 48px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; padding: 0 14px; }
.co-f input:focus, .co-slots select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(201, 162, 89, 0.3); }
.co-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.co-zone { margin-top: 10px; font-size: 14px; color: var(--text-muted); min-height: 20px; }
.co-zone.ok { color: var(--success); }
.co-zone.bad { color: var(--danger); }
.co-radio { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); cursor: pointer; }
.co-radio:has(input:checked) { border-color: var(--gold); background: rgba(201, 162, 89, 0.08); }
.co-radio input { width: 20px; height: 20px; accent-color: var(--gold); margin: 2px 0 0; flex: none; }
.co-radio small { display: block; color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.co-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; }
.co-tip { margin-top: 16px; }
.co-tip > span { font-size: 14px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.co-tips { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 600; }
.tip-btn[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #1a1408; }
.co-tip-custom { margin-top: 10px; }
.co-tip-custom label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.co-tip-custom-row { display: flex; align-items: center; gap: 8px; max-width: 160px; }
.co-tip-custom-row input { width: 100%; min-height: 44px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; padding: 0 14px; }
.co-tip-custom-row input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(201, 162, 89, 0.3); }
.co-tip-custom-row span { color: var(--text-muted); font-size: 15px; }
.co-error { color: var(--danger); font-size: 15px; margin-top: 18px; min-height: 22px; }
.co-empty { color: var(--text-muted); margin-top: 16px; }
.co-sum { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 20px; align-self: start; }
.co-sum h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin-bottom: 8px; }
.co-sum .cart-line:first-child { border-top: 0; }
.co-legal { color: var(--text-muted); font-size: 12px; line-height: 1.6; margin-top: 16px; }
@media (min-width: 900px) {
	.co-layout { grid-template-columns: minmax(0, 1fr) 360px; }
	.co-sum { position: sticky; top: 84px; }
}

/* order status */
.st-wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 60px; }
.st-title { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; margin: 8px 0 8px; text-wrap: balance; }
/* failed/cancelled and delivered used to render through the exact same title styling as every other status -
   the hardest and the happiest moments on this page now get the same Ampel-set accent used elsewhere (.st-warn) */
.st-zeus-head { display: block; width: 72px; height: 72px; margin: 6px 0 12px; }
.st-title.is-danger { color: var(--danger); }
.st-title.is-success { color: var(--success); }
.st-lead { color: var(--text-muted); max-width: 52ch; }
.st-num { display: inline-block; margin-top: 14px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--gold-strong); font-weight: 700; letter-spacing: 0.06em; }
.st-steps { margin: 28px 0 0; display: grid; gap: 0; }
.st-step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 10px 0; color: var(--text-muted); position: relative; }
.st-step::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-soft); margin: 4px 0 0 7px; background: var(--bg); position: relative; z-index: 1; }
.st-step::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -10px; width: 2px; background: var(--border-soft); }
.st-step:last-child::after { display: none; }
.st-step.is-done { color: var(--text); }
.st-step.is-done::before { background: var(--gold); border-color: var(--gold); }
.st-step.is-now { color: var(--gold-strong); font-weight: 700; }
.st-step.is-now::before { border-color: var(--gold); background: var(--bg); box-shadow: 0 0 0 4px rgba(201, 162, 89, 0.22); }
.st-box { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); }
.st-box h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin-bottom: 8px; }
.st-pay { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--gold-strong); }
.st-pay a { font-weight: 700; }
.st-warn { color: var(--danger); }

/* cart: goal bar, delivery time, upsell, clear */
.shop-shell .cart-eta { margin: 2px 0 12px; color: var(--text-muted); font-size: 14px; }
.cart-goal { margin: 0 0 6px; }
.cart-goal-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.cart-goal-bar span { display: block; width: 100%; height: 100%; border-radius: var(--radius-pill); background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.cart-goal p { margin-top: 8px; font-size: 14px; color: var(--gold-strong); }
.cart-goal.is-met .cart-goal-bar span { background: var(--success); }
.cart-goal.is-met p { color: var(--success); }
.qty-btn.is-trash { color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; }
.qty-btn.is-trash:hover { color: var(--danger); border-color: var(--danger); }
.cart-up { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.cart-up h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.cart-up-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cart-up-item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); font-size: 14px; font-weight: 600; text-align: left; transition: background 150ms ease, border-color 150ms ease; }
.cart-offer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.cart-offer .cart-goal { margin: 0; }
.cart-offer h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.cart-offer-sub { margin: 10px 0 8px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.cart-extra-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cart-extra { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.cart-extra small { color: var(--gold-strong); font-size: 13px; font-weight: 700; }
.cart-extra:hover { background: rgba(201, 162, 89, 0.12); border-color: var(--gold); }
.cart-extra.is-on { background: var(--gold); border-color: var(--gold); color: #1a1408; }
.cart-extra.is-on small { color: #1a1408; }
.cart-up-item:hover { background: rgba(201, 162, 89, 0.12); border-color: var(--gold); }
.cart-up-item small { color: var(--gold-strong); font-size: 13px; font-weight: 700; white-space: nowrap; }
.shop-shell .cart-stamp { margin-top: 10px; color: var(--text-muted); font-size: 13px; text-align: center; text-wrap: balance; }
.shop-shell .cart-stamp strong { color: var(--text); font-weight: 600; }
.shop-shell .cart-stamp-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-strong); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.shop-shell .cart-note-btn { grid-column: 1 / -1; justify-self: start; border: 0; background: transparent; padding: 8px 0; min-height: 44px; color: var(--gold-strong); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.shop-shell .cart-noteform.pd-note { grid-column: 1 / -1; margin-top: 6px; }
.shop-shell .cart-noteact { display: flex; gap: 8px; margin-top: 8px; }
.shop-shell .cart-trust { margin-top: 12px; color: var(--text-muted); font-size: 13px; text-align: center; }
.cart-clear { display: block; margin: 8px auto 0; min-height: 44px; border: 0; background: transparent; color: var(--text-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.shop-inbag { margin-left: 10px; color: var(--success); font-size: 13px; font-weight: 700; }
.shop-inbag[hidden] { display: none; }
.shop-cartbar .cartbar-label { font-size: 15px; }

/* checkout */
.co-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; color: var(--text-muted); font-size: 13px; line-height: 1.45; min-height: 44px; }
.co-check input { width: 20px; height: 20px; accent-color: var(--gold); flex: none; margin: 1px 0 0; }
.co-check[hidden], .co-hint[hidden] { display: none; }
.co-nl { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-soft, rgba(245,240,230,.08)); }
.co-nl .co-check { margin-top: 8px; }
.co-nl .co-hint { margin: 4px 0 0 30px; }
.shop-shell .co-why { margin-top: 10px; color: var(--gold-strong); font-size: 14px; text-align: center; min-height: 20px; }

/* checkout completion progress: how much is left before the order can be placed - a clearly visible,
   encouraging card. On desktop it sits inside the sticky order summary (always in view once scrolled
   to it); below 900px that summary is no longer sticky (it stacks after the whole form), so there the
   same element instead floats fixed above the bottom edge, visible the entire time the guest fills in
   the form, not only once they scroll all the way down next to the submit button. */
.co-progress { margin: 16px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.co-progress-track { height: 8px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.co-progress-fill { height: 100%; width: 100%; background: var(--gold); border-radius: var(--radius-pill); transform: scaleX(0); transform-origin: left; transition: transform 250ms ease; }
.co-progress-text { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--gold-strong); text-align: center; }
@media (max-width: 899px) {
	.co-layout { padding-bottom: 110px; }
	.co-progress { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; margin: 0; }
}

/* status */
.shop-shell .st-sub { margin-top: 6px; font-size: 18px; color: var(--text); max-width: 46ch; }
.st-eta { margin-top: 18px; display: inline-block; padding: 12px 20px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(201, 162, 89, 0.07); }
.st-eta span { color: var(--text-muted); font-size: 14px; }
.st-eta > span:first-child { display: block; margin-bottom: 2px; }
.st-eta > span:last-child { margin-left: 8px; }
.st-eta strong { font-family: var(--font-display); font-weight: 500; font-size: 52px; line-height: 1; color: var(--gold-strong); font-variant-numeric: lining-nums tabular-nums; }
.shop-shell .st-late { margin-top: 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--gold-strong); font-size: 14px; }
.shop-shell .st-hint { margin-top: 14px; color: var(--text-muted); font-size: 13px; }
.shop-shell .st-again { margin-top: 20px; }
.st-again a { display: inline-flex; width: auto; padding: 0 28px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .cart-goal-bar span, .cart-up-item { transition: none; } }
.shop-shell a.cart-go[aria-disabled="true"] { color: var(--text-muted); }
.cart-edit { margin-left: auto; border: 0; background: transparent; color: var(--gold); font-size: 14px; font-weight: 600; min-height: 44px; box-sizing: border-box; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; }
.cart-edit:hover { color: var(--gold-strong); }

/* order status: map */
.st-map { height: 280px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-soft); background: var(--bg); }
.st-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.55); transform: translateZ(0); will-change: filter; }
.st-map .leaflet-control-attribution { background: rgba(12, 11, 10, 0.75); color: var(--text-muted); font-size: 10px; }
.st-map .leaflet-control-attribution a { color: var(--gold); }
.st-map .leaflet-bar a { background: var(--surface-2); color: var(--text); border-color: var(--border-soft); }
.st-pin span { display: block; width: 26px; height: 26px; margin: 2px; border-radius: 50%; border: 3px solid var(--gold); background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.st-pin-home span { border-radius: 8px 8px 8px 0; transform: rotate(-45deg) scale(0.85); background: var(--gold); border-color: var(--bg); }
.st-pin-driver span { width: 50px; height: 50px; margin: 1px; border: 0; border-radius: 0; background: url(zeus_dot.png) 50% 50% / contain no-repeat; box-shadow: none; filter: drop-shadow(0 0 1px #f3ede1) drop-shadow(0 0 5px rgba(226, 192, 127, 0.9)); animation: st-glow 1.8s ease-in-out infinite; }
/* the driver is the silhouette of Zeus: the glow follows his outline (drop-shadow uses the alpha of the picture) */
@keyframes st-glow { 0%, 100% { filter: drop-shadow(0 0 1px #f3ede1) drop-shadow(0 0 4px rgba(226, 192, 127, 0.75)); } 50% { filter: drop-shadow(0 0 1px #f3ede1) drop-shadow(0 0 10px rgba(226, 192, 127, 1)); } }
@keyframes st-pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 162, 89, 0.6); } 100% { box-shadow: 0 0 0 16px rgba(201, 162, 89, 0); } }
.st-tip.leaflet-tooltip { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 600 12px var(--font-body); box-shadow: none; padding: 3px 8px; }
.st-tip.leaflet-tooltip-top::before { border-top-color: var(--border); }
.shop-shell .st-mapnote { margin-top: 10px; color: var(--text-muted); font-size: 14px; }
.shop-shell .st-mapnote:empty { display: none; }
/* who is ordering: the line at the top of the checkout and in the cart, and the question before an order without the account the device had */
.co-acc { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); font-size: 14px; line-height: 1.5; }
.co-acc[hidden], .co-accwarn[hidden] { display: none; }
.co-acc > span:nth-child(2) { flex: 1 1 200px; min-width: 0; }
.co-acc-dot, .cart-acc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.co-acc.is-in .co-acc-dot, .cart-acc-dot { background: var(--success); }
.cart-acc-dot { display: inline-block; margin-right: 8px; }
.co-acc.is-out .co-acc-dot { background: var(--gold); }
.co-acc.is-warn { border-color: var(--gold); background: rgba(201, 162, 89, 0.1); }
.co-acc-btn, .co-acc-out { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--gold-strong); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.co-acc-out { font-weight: 400; color: var(--text-muted); }
.co-acc-btn:hover, .co-acc-out:hover { border-color: var(--gold); color: var(--text); }
.co-accwarn { margin: 0 0 12px; padding: 14px; border: 1px solid var(--gold); border-radius: var(--radius-md); background: rgba(201, 162, 89, 0.1); }
.co-accwarn p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.co-accwarn-act { display: flex; flex-direction: column; gap: 8px; }
.co-accwarn-act .cart-go { text-align: center; }
.co-accwarn-skip { min-height: 44px; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-stamp strong { color: var(--text); }
/* Zeus in small everyday moments (the thanks for a rating, the empty cart, the head of the status page): the picture is a bust cut at the top and the bottom edge, so a glow along his
   outline ends in a flat line there. In a round badge with a gold ring and a soft glow the cut is the circle's edge; still, never animated */
.st-zeus, .cart-zeus, .st-zeus-head { box-sizing: border-box; padding: 6px; border-radius: 50%; object-fit: contain; background: radial-gradient(circle at 50% 40%, #2b251c 0%, #16130f 100%); box-shadow: 0 0 0 1.5px rgba(226, 192, 127, 0.65), 0 0 16px rgba(226, 192, 127, 0.28); }
.st-zeus { width: 56px; height: 56px; padding: 5px; }
.st-ratethanks { display: flex; align-items: center; gap: 12px; }
.st-ratethanks .st-zeus[hidden] { display: none; }
.cart-zeus { display: block; width: 72px; height: 72px; margin: 4px 0 12px; }
.st-push { margin: 14px 0; padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); }
.st-push p { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.st-push .cart-go { width: 100%; }
.st-pushmsg { margin: 8px 0 0 !important; min-height: 20px; }
.st-pushmsg.is-error { color: var(--danger) !important; }
.st-pushdone { margin: 0 !important; color: var(--success) !important; font-weight: 700; }
/* the voucher instead of the free extra, on the status page */
.st-voucher { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(201, 162, 89, 0.08); color: var(--text); font-size: 14px; line-height: 1.5; }
/* pickup: "Ich bin da"; delivery: stars for the driver (one tap) */
.st-here { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.st-here p { margin: 0 0 10px; color: var(--text-muted); }
.st-here .cart-go { width: 100%; }
.st-heredone { color: var(--success) !important; font-weight: 700; }
.st-heremsg { margin: 8px 0 0 !important; color: var(--danger) !important; font-size: 14px; }
.st-heremsg:empty { display: none; }
.st-stars { display: flex; gap: 2px; margin: 4px 0 8px; }
.st-star { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gold); cursor: pointer; }
.st-star svg { fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill .12s ease, transform .12s ease; }
.st-star.is-on svg { fill: currentColor; }
.st-star:hover:not(:disabled) svg { transform: scale(1.12); }
.st-star:disabled { cursor: default; }
.st-ratemsg { margin: 0; min-height: 22px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .st-pin-driver span { animation: none; } .st-star svg { transition: none; } .st-star:hover:not(:disabled) svg { transform: none; } }

/* driver page (order/driver.php): a phone in one hand, in a car or on the street, in sun or at night. Big touch targets, the district and the
   distance first, and nothing that a tap in a pocket could trigger: finishing and starting need a swipe, the risky buttons sit behind "Mehr". */
.dv { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-size: 16px; }
.dv [hidden] { display: none !important; }
.dv input, .dv textarea { caret-color: var(--gold); }
.dv .st-wrap { padding: 12px 16px calc(56px + env(safe-area-inset-bottom)); }
.dv .dv-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.dv .dv-who { flex: none; max-width: 36%; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv .dv-gps { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.dv .dv-gps span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv .dv-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); }
.dv .dv-gps.is-ok { color: var(--text); }
.dv .dv-gps.is-ok .dv-dot { background: var(--success); }
.dv .dv-gps.is-warn .dv-dot { background: var(--gold); }
.dv .dv-gps.is-bad { border-color: var(--danger); color: var(--danger); }
.dv .dv-gps.is-bad .dv-dot { background: var(--danger); }
.dv .dv-icon-btn { flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--gold); }
.dv .dv-icon-btn[aria-pressed="true"] { background: var(--gold); color: #1a1408; }
.dv .dv-state { margin: 0 0 4px; color: var(--text-muted); font-size: 14px; }
.dv .dv-banner { margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--danger); border-radius: var(--radius-md); background: rgba(226, 134, 124, 0.1); font-size: 14px; line-height: 1.45; }
.dv .dv-section { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.15; margin: 28px 0 4px; }
.dv .dv-hint { margin: 0; color: var(--text-muted); font-size: 14px; }
.dv .dv-list { display: grid; gap: 12px; margin-top: 12px; }

/* one delivery: district first, then the way, then the street */
.dv .dv-card, .dv .dv-active { padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); }
.dv .dv-card--queue, .dv .dv-active { border-color: var(--border); }
.dv .dv-active { margin-top: 12px; }
.dv .dv-card.is-new, .dv .dv-card.is-flash, .dv .dv-active.is-flash { outline: 2px solid var(--gold); outline-offset: 2px; }
.dv .dv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dv .dv-sub { min-width: 0; font-size: 24px; font-weight: 800; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.dv .dv-ttl { min-width: 0; }
.dv .dv-place { margin-top: 2px; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text-muted); }
.dv .dv-no { flex: none; font-size: 14px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dv .dv-dist { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 12px; }
.dv .dv-dist strong { font-size: 22px; font-weight: 800; color: var(--gold-strong); font-variant-numeric: tabular-nums; }
.dv .dv-dist > span:not(.dv-meter) { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dv .dv-dist small { flex-basis: 100%; font-size: 13px; color: var(--text-muted); }
.dv .dv-dist--none { color: var(--text-muted); font-size: 14px; }
.dv .dv-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.dv .dv-meter i { width: 6px; border-radius: var(--radius-sm); background: var(--surface-3); }
.dv .dv-meter i:nth-child(1) { height: 9px; }
.dv .dv-meter i:nth-child(2) { height: 14px; }
.dv .dv-meter i:nth-child(3) { height: 20px; }
.dv .dv-meter[data-far="1"] i:nth-child(1), .dv .dv-meter[data-far="2"] i:nth-child(-n+2), .dv .dv-meter[data-far="3"] i { background: var(--gold); }
.dv .dv-street { font-size: 18px; font-weight: 700; line-height: 1.3; }
.dv .dv-street--big { font-size: 24px; margin-top: 4px; }
.dv .dv-city { margin-top: 2px; color: var(--text-muted); font-size: 15px; }
.dv .dv-door, .dv .dv-onote { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 15px; line-height: 1.4; }
.dv .dv-door span, .dv .dv-onote span { margin-right: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.dv .dv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dv .dv-tag { padding: 4px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; font-weight: 600; }
.dv .dv-tag--pay { color: var(--gold-strong); border-color: var(--border); }
.dv .dv-tag.is-late { color: var(--danger); border-color: var(--danger); }
.dv .dv-near { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--text-muted); }
.dv .dv-near .dv-ic { flex: none; color: var(--gold); }
.dv .cart-go { gap: 10px; }
.dv .dv-take { min-height: 60px; margin-top: 16px; font-size: 18px; }
.dv .dv-take:disabled { background: var(--surface-3); color: var(--text-muted); cursor: wait; }
.dv .dv-locked-note { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
.shop-shell .cart-go.dv-alt { background: transparent; color: var(--gold-strong); border: 1px solid var(--border); text-decoration: none; margin-top: 10px; }
.shop-shell .cart-go.dv-alt.dv-fail { color: var(--danger); border-color: var(--danger); }
.dv .dv-fail { background: var(--danger); }
.dv .dv-links { display: grid; gap: 10px; margin-top: 16px; }
.dv .dv-links .cart-go { margin-top: 0; }
.dv .dv-route { min-height: 64px; font-size: 20px; }
.dv .dv-links .dv-alt { min-height: 56px; }

/* what to collect */
.dv .dv-collect { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.dv .dv-collect-l { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.dv .dv-collect-v { font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dv .dv-collect.is-paid { border-color: var(--success); }
.dv .dv-collect.is-paid .dv-collect-v { font-size: 20px; color: var(--success); }
.dv .dv-collect-w { margin-top: 6px; font-size: 17px; color: var(--text); }
.dv .dv-collect-w strong { color: var(--gold-strong); font-variant-numeric: tabular-nums; }
.dv .dv-change { margin-top: 8px; }
.dv .dv-change > summary { color: var(--gold-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dv .dv-change-in { padding-bottom: 4px; }
.dv .dv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dv .dv-chips button { min-height: 48px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dv .dv-change label { display: block; margin: 12px 0 6px; font-size: 13px; color: var(--text-muted); }
.dv .dv-change input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.dv .dv-change-out { min-height: 30px; margin-top: 10px; font-size: 22px; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }
.dv .dv-change-out.is-short { color: var(--danger); }
.dv .dv-h4 { margin: 22px 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 22px; }
.dv .dv-items li { padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: 16px; line-height: 1.4; }
.dv .dv-var { color: var(--text-muted); }
.dv .dv-opts, .dv .dv-inote { display: block; margin-left: 28px; font-size: 14px; color: var(--text-muted); }
.dv .dv-inote { color: var(--text); font-weight: 700; }

/* swipe: the control that cannot be triggered by a tap */
.dv .dv-swipe-slot { margin-top: 16px; }
.dv .dv-swipe { position: relative; height: 64px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dv .dv-swipe-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: rgba(201, 162, 89, 0.22); }
.dv .dv-swipe--go .dv-swipe-fill { background: rgba(143, 191, 122, 0.3); }
.dv .dv-swipe-label { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 20px 0 66px; font-size: 16px; font-weight: 700; text-align: center; pointer-events: none; }
.dv .dv-swipe-thumb { position: absolute; top: 3px; left: 3px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1408; cursor: grab; touch-action: none; }
.dv .dv-swipe--go .dv-swipe-thumb { background: var(--success); }
.dv .dv-swipe.is-drag .dv-swipe-thumb { cursor: grabbing; }
.dv .dv-swipe.is-done .dv-swipe-thumb { opacity: 0.85; }
.dv .dv-swipe[aria-disabled="true"] { background: var(--surface-2); border-color: var(--border-soft); }
.dv .dv-swipe[aria-disabled="true"] .dv-swipe-thumb { background: var(--surface-3); color: var(--text-muted); cursor: not-allowed; }
.dv .dv-swipe[aria-disabled="true"] .dv-swipe-label { color: var(--text-muted); }

/* disclosures: "Mehr" with the risky buttons is far from the main action, the checklist before the start stays optional */
.dv .dv-more { margin-top: 24px; }
.dv .dv-more > summary, .dv .dv-check > summary, .dv .dv-change > summary, .dv .dv-mapbox > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; }
.dv .dv-more > summary::-webkit-details-marker, .dv .dv-check > summary::-webkit-details-marker, .dv .dv-change > summary::-webkit-details-marker, .dv .dv-mapbox > summary::-webkit-details-marker { display: none; }
.dv .dv-more > summary, .dv .dv-check > summary { justify-content: center; }
.dv .dv-more > summary { border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--text-muted); font-weight: 600; }
.dv .dv-more > summary::after, .dv .dv-check > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.dv .dv-more[open] > summary, .dv .dv-check[open] > summary { margin-bottom: 8px; }
.dv .dv-more[open] > summary::after, .dv .dv-check[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.dv .dv-check { margin-top: 12px; border-top: 1px solid var(--border-soft); }
.dv .dv-check > summary { justify-content: space-between; font-size: 15px; font-weight: 600; }
.dv .dv-check > summary::after { display: none; }
.dv .dv-check-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dv .dv-check.is-complete .dv-check-n { color: var(--success); }
.dv .dv-checklist li label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; line-height: 1.35; }
.dv .dv-checklist input { flex: none; width: 22px; height: 22px; accent-color: var(--gold); }
.dv .dv-checklist small { display: block; color: var(--text-muted); font-size: 13px; }
.dv .dv-fail-form { margin-top: 14px; }
.dv .dv-fail-form label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.dv .dv-fail-form textarea { width: 100%; min-height: 80px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; resize: vertical; }
.dv .dv-more .cart-go { min-height: 56px; }

/* map of everything that is open */
.dv .dv-mapbox { margin-top: 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); }
.dv .dv-mapbox > summary { padding: 0 16px; font-weight: 700; }
.dv .dv-mapin { padding: 0 12px 12px; }
.dv .dv-map { height: 260px; }
.dv .dv-legend { margin-top: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.dv .dv-textbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--gold-strong); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dv .dv-pin span { display: grid; place-items: center; width: 32px; height: 32px; margin: 1px; border: 2px solid var(--gold); border-radius: 50%; font: 800 13px var(--font-body); font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.dv .dv-pin--open span { background: var(--gold); color: #1a1408; border-color: var(--bg); }
.dv .dv-pin--queue span { background: var(--bg); color: var(--gold-strong); }
.dv .dv-pin--cur span { background: var(--success); color: #1a1408; border-color: var(--bg); }
.dv .dv-sort { display: flex; margin-top: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.dv .dv-sort button { flex: 1; min-height: 44px; border: 0; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.dv .dv-sort button[aria-pressed="true"] { background: var(--gold); color: #1a1408; }
.dv .dv-dl { display: grid; margin: 8px 0 0; }
.dv .dv-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.dv .dv-dl dt { color: var(--text-muted); }
.dv .dv-dl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.dv .dv-dl small { color: var(--text-muted); font-weight: 600; }
.dv .dv-toast { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 608px; min-height: 56px; margin: 0 auto; padding: 8px 8px 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-3); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); font-size: 15px; }
.dv .dv-toast button { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--gold-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dv-swipe-thumb, .dv-swipe-fill { transition: none !important; } }
.dv .dv-pin--shop span { background: var(--bg); color: var(--gold-strong); border-color: var(--gold-strong); }
.dv .dv-pin--shop svg { display: block; }

/* coupon */
.co-coupon { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.co-coupon-toggle { border: 0; background: transparent; padding: 0; min-height: 44px; color: var(--gold); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.co-coupon-toggle[hidden] { display: none; }
.co-coupon-label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 13px; }
.co-coupon-row { display: flex; gap: 8px; }
.co-coupon-row input { flex: 1; min-width: 0; min-height: 48px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 12px; }
.co-coupon-row input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(201, 162, 89, 0.3); }
.co-coupon-go { min-height: 48px; padding: 0 18px; border: 1px solid var(--gold); border-radius: var(--radius-md); background: transparent; color: var(--gold-strong); font-size: 15px; font-weight: 700; }
.co-coupon-go:hover { background: rgba(201, 162, 89, 0.14); }
.shop-shell .co-coupon-msg { margin-top: 8px; font-size: 14px; color: var(--text-muted); }
.shop-shell .co-coupon-msg:empty { display: none; }
.co-coupon-msg.ok { color: var(--success); }
.co-coupon-msg.bad { color: var(--danger); }
.cart-row.coupon { color: var(--success); }
.co-coupon-off { border: 0; background: transparent; padding: 0 0 0 6px; color: var(--text-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* search */
.shop-search-bar { position: sticky; top: var(--shop-sticky-top, 0px); z-index: 21; background: var(--bg); padding: 10px 16px; }
.shop-search-in { max-width: 1240px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.shop-search-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.shop-search-bar input { width: 100%; min-height: 46px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; padding: 0 44px; }
.shop-search-bar input::placeholder { color: var(--text-muted); }
.shop-search-bar input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(201, 162, 89, 0.3); }
.shop-search-bar input::-webkit-search-cancel-button { display: none; }
.shop-search-clear { position: absolute; right: 6px; width: 44px; height: 44px; box-sizing: border-box; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 20px; line-height: 1; }
.shop-search-clear:hover { color: var(--text); background: rgba(245, 240, 230, 0.08); }
.shop-cats.is-filtered { opacity: 0.4; pointer-events: none; }
.shop-item[hidden], .shop-cat[hidden] { display: none; }

/* shared basket ("Gemeinsam bestellen"): invitation box in the cart, the shared cart grouped by person, name dialog */
.gb-invite { margin-top: 20px; padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.gb-invite h3 { font-size: 15px; font-weight: 700; }
.shop-shell .gb-invite p { margin: 4px 0 12px; color: var(--text-muted); font-size: 13px; }
.gb-btn { min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--gold-strong); font-size: 14px; font-weight: 700; }
.gb-btn:hover { border-color: var(--gold); }
.gb-btn.solid { background: var(--gold); border-color: var(--gold); color: #1a1408; }
.gb-btn.solid:hover { background: var(--gold-strong); }
.gb-btn.ghost { color: var(--text-muted); border-color: var(--border-soft); }
.cart-go + .gb-btn, .gb-state + .gb-btn { display: block; width: 100%; margin-top: 10px; }
.gb-head { display: grid; gap: 8px; justify-items: start; padding: 2px 0 10px; }
.shop-shell .gb-kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-strong); font-weight: 700; }
.shop-shell .gb-who { color: var(--text-muted); font-size: 14px; }
.gb-link { display: grid; gap: 4px; width: 100%; font-size: 12px; color: var(--text-muted); }
.gb-link input { width: 100%; min-height: 44px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; padding: 0 12px; }
.shop-shell .gb-state { margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-soft); font-size: 14px; color: var(--gold-strong); }
.shop-shell .gb-state.is-done { color: var(--success); }
.gb-member { margin-top: 14px; }
.gb-member header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.gb-member header h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.2; }
.gb-member header small { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); font-weight: 400; }
.gb-member header span { font-weight: 700; font-variant-numeric: tabular-nums; }
.gb-member .cart-line:first-of-type { border-top: 0; }
.shop-shell .gb-none { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.gb-dialog { width: min(440px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); }
.gb-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.gb-form { display: grid; gap: 14px; padding: 22px 20px 20px; }
.shop-shell .gb-form h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.shop-shell .gb-form p { color: var(--text-muted); font-size: 14px; }
.shop-shell .gb-form .gb-err { color: var(--danger); font-size: 13px; }
.gb-err:empty { display: none; }
.gb-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.gb-actions .gb-btn { min-width: 120px; }
.shop-group-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--gold-strong); font-size: 14px; font-weight: 600; white-space: nowrap; }
.shop-group-btn:hover { border-color: var(--gold); }

/* sideways rows dragged with the mouse (dragscroll.js): the grabbing hand, no text selection, no snapping against the hand */
.is-dragging { cursor: grabbing !important; user-select: none; -webkit-user-select: none; scroll-snap-type: none !important; scroll-behavior: auto !important; }

/* driver page: deliveries announced while still in the kitchen: looked at, not taken */
.dv .dv-section--soon { margin-top: 22px; color: var(--muted); }
.dv .dv-card--soon { border-style: dashed; border-color: var(--border); background: transparent; opacity: 0.88; }
.dv .dv-tag--kitchen { border-color: var(--gold); color: var(--gold-strong, var(--gold)); }
.dv .dv-soon-note { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; }
.dv .dv-pin--soon span { background: var(--bg); color: var(--text-muted); border: 2px dashed var(--gold); opacity: 0.85; }

/* button to the order chat (order/chat.php), shown only while the chat is switched on: bottom right, above the cart bar on a phone while that is showing */
.shop-chat-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 35; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; border-radius: var(--radius-pill);
	background: var(--gold); color: #1a1408; font-size: 1rem; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); transition: background 150ms ease, transform 150ms ease; }
.shop-shell a.shop-chat-fab, .shop-shell a.shop-chat-fab:visited { color: #1a1408; }
.shop-shell a.shop-chat-fab:hover { background: var(--gold-strong); color: #1a1408; }
.shop-chat-fab:active { transform: scale(0.97); }
.shop-cartbar:not([hidden]) ~ .shop-chat-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* wide screens: the button keeps its own width and ends on the right edge of the cart column (the layout is 1240px wide with 16px padding), so it does not hang out over the column */
@media (min-width: 1024px) { .shop-chat-fab, .shop-cartbar:not([hidden]) ~ .shop-chat-fab { bottom: 24px; right: max(16px, calc((100% - 1240px) / 2 + 16px)); } }
@media (prefers-reduced-motion: reduce) { .shop-chat-fab { transition: none; } }

/* chat bubble (desktop only): the order chat in a window at the bottom right of the order page; below 1024px the button leads to the chat page instead */
.shop-chat-panel { display: none; }
@media (min-width: 1024px) {
	.shop-chat-panel { position: fixed; right: max(16px, calc((100% - 1240px) / 2 + 16px)); bottom: 24px; z-index: 36; display: flex; flex-direction: column; width: 400px; height: min(700px, calc(100vh - 48px)); background: var(--bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
		box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6); transform-origin: bottom right; animation: scp-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both; }
	.shop-chat-panel[hidden] { display: none; }
	.chat-open .shop-chat-fab { display: none; }
	.scp-head { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 8px 0 18px; background: var(--surface); border-bottom: 1px solid var(--border-soft); }
	.scp-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--gold-strong); }
	.scp-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); }
	.scp-close:hover { background: var(--surface-3); color: var(--gold-strong); }
	.scp-frame { flex: 1; width: 100%; border: 0; background: var(--bg); color-scheme: dark; }
}
@keyframes scp-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .shop-chat-panel { animation: none; } }

/* marks next to a dish: "Neu", "Beliebt" (text, not only colour) and the dish that is sold out for today */
.shop-mark { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; vertical-align: 2px; white-space: nowrap; }
.shop-mark.is-new { background: var(--success); color: #10200a; }
.shop-mark.is-pop { border: 1px solid var(--gold); color: var(--gold-strong); }
.shop-mark.is-out { border: 1px solid var(--danger); color: var(--danger); }
.shop-item.is-out h3, .shop-item.is-out .shop-price { color: var(--text-muted); }
.shop-item.is-out .shop-item-img { opacity: 0.45; filter: grayscale(0.7); }
.shop-out-note { font-size: 0.875rem; font-weight: 600; color: var(--danger); }
.st-pay-alt { display: block; margin-top: 10px; color: var(--text-muted); }
.st-pay-sw { margin: 6px 8px 0 0; min-height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.st-pay-sw:hover { border-color: var(--gold-strong); }
.st-pay-sw:disabled { opacity: .5; cursor: default; }

.shop-shell .co-modeline { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--gold-strong); border-radius: var(--radius-md); color: var(--text); font-size: 15px; line-height: 1.45; }
.shop-shell .co-modeline strong { color: var(--gold-strong); }
.shop-shell .co-modeline[hidden] { display: none; }

/* nothing chosen yet: the two choices stand out as two big buttons, so it is clear what has to be done first */
.co-sec.is-ask .shop-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: transparent; border: 0; padding: 0; }
.co-sec.is-ask .mode-btn { min-height: 68px; font-size: 18px; color: var(--text); background: var(--surface-2); border: 2px solid var(--gold-strong); border-radius: var(--radius-md); animation: co-ask 1.8s ease-in-out infinite; }
.co-sec.is-ask .mode-btn:hover, .co-sec.is-ask .mode-btn:focus-visible { background: var(--gold); color: #1a1408; animation: none; }
.co-sec.is-ask .co-hint { color: var(--gold-strong); font-weight: 700; font-size: 16px; margin-top: 10px; }
@keyframes co-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 192, 127, 0); } 50% { box-shadow: 0 0 0 5px rgba(226, 192, 127, 0.28); } }
@media (prefers-reduced-motion: reduce) { .co-sec.is-ask .mode-btn { animation: none; } }

.mode-btn .mode-sub { display: none; }
.co-sec.is-ask .mode-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 12px; }
.co-sec.is-ask .mode-btn .mode-sub { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-sec.is-ask .mode-btn:hover .mode-sub, .co-sec.is-ask .mode-btn:focus-visible .mode-sub { color: #1a1408; }

/* the payment block while nothing is chosen: framed like the mode choice, with the request above */
.co-sec.is-ask .co-askhint { color: var(--gold-strong); font-weight: 700; font-size: 16px; margin: 0 0 10px; }
#co-paysec.is-ask .co-pay { padding: 6px; border: 2px solid var(--gold-strong); border-radius: var(--radius-md); animation: co-ask 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #co-paysec.is-ask .co-pay { animation: none; } }

.st-switch { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.st-switch-q { margin: 0 0 8px; color: var(--text); }
.st-switch-form { display: grid; gap: 10px; margin-top: 10px; max-width: 420px; }
.st-switch-form label { display: grid; gap: 4px; font-size: 14px; color: var(--text-muted); }
.st-switch-form input { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: inherit; }

/* quick view for a returning guest: one card instead of the whole form */
.co-quick { display: none; margin: 20px 0 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
body.co-quick-wait .co-quick, body.co-quick-on .co-quick { display: block; }
.co-quick h2 { font-family: var(--font-display); font-size: 24px; margin: 0 0 10px; }
.co-quick-list { margin: 0 0 12px; display: grid; gap: 8px; }
.co-quick-list > div { display: flex; gap: 12px; flex-wrap: wrap; }
.co-quick-list dt { flex: 0 0 120px; color: var(--text-muted); font-size: 14px; }
.co-quick-list dd { margin: 0; flex: 1 1 200px; color: var(--text); font-weight: 600; }
.co-quick-wait { margin: 0; color: var(--text-muted); }
body.co-quick-on .co-quick-wait { display: none; }
body.co-quick-wait .co-quick-list, body.co-quick-wait .co-quick-note, body.co-quick-wait .co-quick-edit { display: none; }
.co-quick-edit { margin-top: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); background: transparent; color: var(--gold-strong); font: inherit; font-weight: 600; cursor: pointer; }
body.co-quick-wait #co-modesec, body.co-quick-wait #sec-address, body.co-quick-wait #sec-when, body.co-quick-wait #sec-data, body.co-quick-wait #co-paysec,
body.co-quick-on #co-modesec, body.co-quick-on #sec-address, body.co-quick-on #sec-when, body.co-quick-on #sec-data { display: none; }
body.co-quick-on #co-paysec > legend, body.co-quick-on #co-paysec .co-askhint, body.co-quick-on #co-pay { display: none; }