/*
 * Rice & Spice storefront — Phase 8.
 *
 * Design tokens below match the confirmed live-site palette (see
 * docs/CURRENT-SITE-UX-AUDIT.md: dark-brown text rgb(36,26,16); and the
 * approved-baseline mirror at ricespice-ch/src/homepage-source-mirror.html,
 * which carries the same values plus the rest of this token set) —
 * docs/UX-SPECIFICATION.md: "Preserve the Rice & Spice branding, warm
 * off-white background, dark-brown type, burnt-orange action accent,
 * rounded pills/cards." This file is an original implementation for
 * this plugin, not copied from that reference file.
 */


/* ══ THEME GUARD (alpha.49, production 2026-09-10) ═══════════════════════
   Hello Elementor's reset.css styles EVERY <button> on the site: pink
   (#c36) text and border, a pink fill on :hover AND :focus (= after a
   tap on a phone), `white-space: nowrap` and .5rem/1rem padding. On an
   iPhone the entry cards therefore could not wrap their text and ran off
   the screen, and every tapped button turned pink. Neutralised here for
   the guest surfaces at the theme's own specificity via :where(), placed
   BEFORE the component rules so those still win. */
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) button,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="button"],
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="submit"] {
	-webkit-appearance: none; appearance: none;
	background-color: transparent; border: 0; border-radius: 0; color: inherit;
	font: inherit; line-height: 1.3; padding: 0; margin: 0; width: auto; display: inline-block;
	white-space: normal; text-wrap: wrap; text-align: center; text-decoration: none;
	transition: none; -webkit-tap-highlight-color: transparent;
}
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) button:hover,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) button:focus,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="button"]:hover,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="button"]:focus,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="submit"]:hover,
:where(#rso-storefront, #rso-checkout, #rso-order-status, #rso-qr-root, .rso-entry, .rso-kiosk-idle) [type="submit"]:focus {
	background-color: transparent; color: inherit; text-decoration: none;
}

#rso-storefront {
	/* White, not the old warm grey: the owner asked for the page itself
	   to be white (2026-09-07). Cards keep their border and shadow, which
	   is what separates them now that the ground behind them matches. */
	--rso-bg: #ffffff;
	--rso-surface: #ffffff;
	--rso-surface-2: #f0ede4;
	--rso-ink: #241a10;
	--rso-ink-soft: #6b5d4d;
	--rso-ink-faint: #9a8c79;
	--rso-line: #e8e1d2;
	/* 2026-08-18 owner decision: the action colour is the logo green,
	   not the old burnt orange. Errors and sold-out states move to the
	   explicit danger tokens below so "problem" never reads as "go". */
	--rso-accent: #46a500;
	--rso-accent-deep: #35800a;
	--rso-accent-tint: #eaf6df;
	--rso-danger: #b3261e;
	--rso-danger-deep: #8c1d17;
	--rso-danger-tint: #fdecea;
	--rso-success: #4c7a2e;
	--rso-success-tint: #eaf1e2;
	--rso-shadow: 0 1px 2px rgba(36, 26, 16, .06), 0 8px 24px -12px rgba(36, 26, 16, .18);
	--rso-shadow-lg: 0 20px 60px -20px rgba(36, 26, 16, .35);
	--rso-radius-s: 10px;
	--rso-radius-m: 16px;
	--rso-radius-l: 22px;
	--rso-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI Rounded", ui-rounded, "Segoe UI", Roboto, system-ui, sans-serif;
	--rso-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rso-focus: #1857c4;

	font-family: var(--rso-font-body);
	color: var(--rso-ink);
	background: var(--rso-bg);
	line-height: 1.45;
}

@media (prefers-color-scheme: dark) {
	#rso-storefront:not([data-theme="light"]) {
		--rso-bg: #18130d;
		--rso-surface: #221a11;
		--rso-surface-2: #2b2116;
		--rso-ink: #f3ecdf;
		--rso-ink-soft: #c7b9a4;
		--rso-ink-faint: #8d7c66;
		--rso-line: #3a2d1d;
		--rso-accent: #6cc832;
		--rso-accent-deep: #8ed95e;
		--rso-accent-tint: #1e3312;
		--rso-danger: #ff6b63;
		--rso-danger-deep: #ff8f88;
		--rso-danger-tint: #3a1c19;
		--rso-success: #8fc65e;
		--rso-success-tint: #26311c;
		--rso-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
		--rso-shadow-lg: 0 20px 60px -20px rgba(0, 0, 0, .7);
	}
}

#rso-storefront * { box-sizing: border-box; }
#rso-storefront img { max-width: 100%; display: block; }
/*
 * Deliberately no `color: inherit` here even though it would read as
 * the obvious reset: #rso-storefront (an ID selector) beats every
 * class-based button color rule below it in specificity regardless of
 * source order, which silently forced every button — including
 * .rso-add-btn and .rso-primary-btn's white-on-accent text and
 * .rso-chip-btn[aria-pressed="true"]'s light-on-dark text — back to the
 * dark base ink color, making them unreadable against their own
 * backgrounds. Caught by loading this file in a real browser (see
 * tests/manual-storefront-harness.html), not by reading the CSS.
 * font: inherit alone is enough for what this reset is actually for
 * (buttons not using the UA stylesheet's own font); every button
 * variant below sets its own explicit, correctly-cascading color.
 */
#rso-storefront button { font: inherit; }
#rso-storefront h1, #rso-storefront h2, #rso-storefront h3 { font-family: var(--rso-font-display); margin: 0; }
#rso-storefront p { margin: 0; }
#rso-storefront .rso-visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#rso-storefront :focus-visible {
	outline: 3px solid var(--rso-focus);
	outline-offset: 2px;
	border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	#rso-storefront *, #rso-storefront *::before, #rso-storefront *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}
#rso-storefront .rso-noscript { padding: 16px; text-align: center; color: var(--rso-ink-soft); }

/* --- Layout --- */
#rso-storefront .rso-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px 96px;
}
@media (min-width: 980px) {
	#rso-storefront .rso-layout { grid-template-columns: 1fr 360px; gap: 40px; align-items: start; padding-bottom: 40px; }
}
#rso-storefront .rso-main { min-width: 0; }

/* --- Header (2026-08-18 redesign, owner-approved) ---
 *
 * Sticky slim top bar (brand | search | phone + basket), then a quiet
 * meta row (address · open state), then the order card: segmented
 * service control with live sublabels, the delivery-zone chip, and the
 * compact free-delivery/ETA facts. The postcode form and scheduling
 * keep living in the mode panel directly beneath the card.
 */
#rso-storefront .rso-topbar {
	position: sticky; top: 0; z-index: 30; /* also the anchor for the mobile search overlay */
	background: color-mix(in srgb, var(--rso-surface) 90%, transparent);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--rso-line);
	/* Background bleeds to the screen edges; the CONTENT stays aligned
	   with the menu container below (owner decision 2026-08-18 v2). */
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}
#rso-storefront .rso-topbar-inner {
	display: flex; align-items: center; gap: clamp(10px, 2vw, 20px);
	padding: clamp(12px, 1.8vw, 16px) 0;
}
#rso-storefront .rso-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 1 auto; min-width: 0; border-radius: 8px; text-decoration: none; }
#rso-storefront .rso-brand-row { display: flex; align-items: center; gap: 10px; }
#rso-storefront .rso-brand:focus-visible { outline: 3px solid var(--rso-focus); outline-offset: 3px; }
#rso-storefront .rso-mark svg { display: block; height: clamp(34px, 3.8vw, 46px); width: auto; }
#rso-storefront .rso-word { flex: none;
	font-family: var(--rso-font-display);
	font-size: clamp(1.2rem, 2.1vw, 1.5rem); font-weight: 800;
	letter-spacing: -.015em; line-height: 1.1; white-space: nowrap;
}
#rso-storefront .rso-word .w-rice { color: #46a500; }
#rso-storefront .rso-word .w-spice { color: #35800a; }
#rso-storefront .rso-word .w-tld { color: var(--rso-ink-faint); font-weight: 700; }
/* width:0 + min-width:100% keeps the address from widening the brand
   column — it truncates to the lockup's own width instead of pushing
   the brand name into ellipsis. */
#rso-storefront .rso-brand-address { font-size: clamp(.68rem, 1vw, .8rem); color: var(--rso-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 0; min-width: 100%; }
#rso-storefront .rso-search-toggle { display: none; }
#rso-storefront .rso-actions { display: flex; align-items: center; gap: 10px; flex: none; }
#rso-storefront .rso-phone-btn {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%; color: var(--rso-ink);
	background: var(--rso-surface-2); border: 1px solid var(--rso-line); text-decoration: none;
}
#rso-storefront .rso-phone-btn:hover { background: var(--rso-ink); border-color: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-phone-btn:focus-visible, #rso-storefront .rso-basket-btn:focus-visible { outline: 3px solid var(--rso-focus); outline-offset: 2px; }
#rso-storefront .rso-phone-btn svg { width: 18px; height: 18px; }
#rso-storefront .rso-basket-btn {
	display: flex; align-items: center; gap: 9px; border: 0; cursor: pointer;
	font-family: var(--rso-font-display); font-weight: 700; font-size: .95rem; color: #fff;
	background: var(--rso-accent); border-radius: 999px; padding: 10px 18px; min-height: 44px;
	box-shadow: 0 6px 18px -6px rgba(70, 165, 0, .5);
}
#rso-storefront .rso-basket-btn:hover { background: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-basket-btn svg { width: 18px; height: 18px; }
#rso-storefront .rso-basket-btn-count { background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 1px 8px; font-size: .82rem; }
/* The order card carries its own top margin. This padding stacked on top
   of it, so the band between the logo bar and the Delivery/Pickup row was
   two gaps deep (18 + 18) and read as an empty strip. One gap is enough. */
#rso-storefront .rso-header { padding-top: 0; }
/* --- Status pill ---
   One question, one word, one colour: can I order right now. Green for
   open, red for shut. The delivery window is stated once, on the order
   card below; printing it here too is what made this pill wide enough to
   crowd the search field on a laptop. A shut shop adds the one fact that
   is nowhere else — when it opens again — in a lighter weight. */
#rso-storefront .rso-status { flex: none; margin-left: clamp(14px, 2.5vw, 36px);
	display: inline-flex; align-items: baseline; gap: 8px;
	font-size: .84rem; font-weight: 800; font-family: var(--rso-font-display);
	line-height: 1; letter-spacing: .01em;
	padding: 8px 14px 8px 12px; border-radius: 999px; background: var(--rso-surface-2);
	width: fit-content; border: 1px solid var(--rso-line); white-space: nowrap;
}
#rso-storefront .rso-status[data-open="true"] { background: var(--rso-success-tint); color: var(--rso-success); border-color: color-mix(in srgb, var(--rso-success) 30%, transparent); }
#rso-storefront .rso-status[data-open="false"] { background: var(--rso-danger-tint); color: var(--rso-danger); border-color: color-mix(in srgb, var(--rso-danger) 28%, transparent); }
#rso-storefront .rso-status-dot {
	width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
	align-self: center; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}
/* Open is a live state, so the dot breathes; shut is simply shut. */
@media (prefers-reduced-motion: no-preference) {
	#rso-storefront .rso-status[data-open="true"] .rso-status-dot { animation: rso-status-pulse 2.4s ease-in-out infinite; }
}
@keyframes rso-status-pulse {
	0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
	50%      { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 6%, transparent); }
}
#rso-storefront .rso-status-label { font-weight: 800; }

/* --- Order card --- */
#rso-storefront .rso-ordercard {
	display: flex; align-items: center; gap: clamp(12px, 2vw, 24px);
	background: var(--rso-surface); border: 1px solid var(--rso-line);
	border-radius: 18px; box-shadow: var(--rso-shadow);
	padding: clamp(10px, 1.6vw, 14px) clamp(12px, 2vw, 20px);
	margin-top: clamp(10px, 1.4vw, 14px);
}
#rso-storefront .rso-service-selector {
	display: flex; gap: 2px; flex: none;
	background: var(--rso-surface-2); border: 1px solid var(--rso-line);
	border-radius: 999px; padding: 4px;
}
#rso-storefront .rso-service-btn {
	border: 0; background: transparent; padding: 7px clamp(12px, 1.6vw, 18px); min-height: 48px;
	border-radius: 999px; font-family: var(--rso-font-display);
	color: var(--rso-ink-soft); cursor: pointer; text-align: center; white-space: nowrap;
	transition: background .18s, color .18s, box-shadow .18s;
}
@media (prefers-reduced-motion: reduce) { #rso-storefront .rso-service-btn { transition: none; } }
#rso-storefront .rso-service-btn:hover { color: var(--rso-ink); }
#rso-storefront .rso-service-btn[aria-pressed="true"] { background: var(--rso-surface); color: var(--rso-accent-deep); box-shadow: var(--rso-shadow); }
#rso-storefront .rso-service-btn-label { display: block; font-size: .92rem; font-weight: 700; }
#rso-storefront .rso-service-btn-sub { display: block; font-size: .72rem; font-weight: 500; color: var(--rso-ink-faint); margin-top: 1px; }
#rso-storefront .rso-service-btn[aria-pressed="true"] .rso-service-btn-sub { color: var(--rso-ink-soft); }
/* QR-0 (alpha.35): the in-house banner that replaces the selector. */
#rso-storefront .rso-channel-banner {
	display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-height: 56px;
	padding: 6px 8px 6px 14px; border-radius: 999px;
	background: var(--rso-accent-tint); border: 1px solid transparent; color: var(--rso-accent-deep);
}
#rso-storefront .rso-channel-icon { font-size: 1.2rem; line-height: 1; }
#rso-storefront .rso-channel-label { font-family: var(--rso-font-display); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; flex: 1; }
#rso-storefront .rso-channel-leave {
	border: 0; background: var(--rso-surface); color: var(--rso-ink-soft); cursor: pointer;
	font-family: var(--rso-font-display); font-size: .78rem; font-weight: 700;
	padding: 8px 12px; border-radius: 999px; min-height: 40px; white-space: nowrap;
}
#rso-storefront .rso-channel-leave:hover { color: var(--rso-ink); }
#rso-storefront .rso-channel-leave:focus-visible { outline: 3px solid var(--rso-focus); outline-offset: 2px; }
/* KIOSK-1 (alpha.36/37): a large public touch screen. The phone list
   becomes a photo-tile grid, the basket column stays open on the right,
   every target grows, and the exit reads "Start again". */
body.rso-kiosk #rso-storefront { font-size: 118%; }
body.rso-kiosk #rso-storefront .rso-topbar-inner { padding: 18px 0; }
body.rso-kiosk #rso-storefront .rso-mark svg { height: 52px; }
body.rso-kiosk #rso-storefront .rso-word { font-size: 1.7rem; }
body.rso-kiosk #rso-storefront .rso-brand-address { font-size: .95rem; }
body.rso-kiosk #rso-storefront .rso-basket-btn { min-height: 56px; font-size: 1.05rem; }
body.rso-kiosk #rso-storefront .rso-channel-banner { min-height: 68px; }
body.rso-kiosk #rso-storefront .rso-channel-label { font-size: 1.25rem; }
body.rso-kiosk #rso-storefront .rso-basket { padding: 24px; font-size: 1.05rem; }
body.rso-kiosk #rso-storefront .rso-basket h2 { font-size: 1.5rem; }
body.rso-kiosk #rso-storefront .rso-channel-banner.is-kiosk .rso-channel-leave { background: var(--rso-ink); color: #fff; font-size: .9rem; min-height: 46px; padding: 10px 18px; }
body.rso-kiosk #rso-storefront .rso-phone-btn, body.rso-kiosk #rso-storefront .rso-search-toggle { display: none; }
@media (min-width: 980px) { body.rso-kiosk #rso-storefront .rso-layout { grid-template-columns: 1fr 380px; gap: 28px; } }
body.rso-kiosk #rso-storefront .rso-cat-pill { font-size: 1rem; min-height: 52px; padding: 12px 20px; }
body.rso-kiosk #rso-storefront .rso-section h2 { font-size: 1.7rem; }
body.rso-kiosk #rso-storefront .rso-product-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
body.rso-kiosk #rso-storefront .rso-product-card, body.rso-kiosk #rso-storefront .rso-product-list > li:first-child .rso-product-card {
	flex-direction: column; gap: 10px; padding: 0 0 14px; height: 100%;
	border: 1px solid var(--rso-line); border-radius: var(--rso-radius-l); background: var(--rso-surface); overflow: hidden; box-shadow: var(--rso-shadow);
}
body.rso-kiosk #rso-storefront .rso-product-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
body.rso-kiosk #rso-storefront .rso-product-thumb-btn { width: 100%; }
body.rso-kiosk #rso-storefront .rso-product-main { padding: 0 16px; }
body.rso-kiosk #rso-storefront .rso-product-name { font-size: 1.15rem; }
body.rso-kiosk #rso-storefront .rso-product-price { font-size: 1.05rem; }
body.rso-kiosk #rso-storefront .rso-product-desc { font-size: .9rem; }
body.rso-kiosk #rso-storefront .rso-product-actions { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 16px; margin-top: auto; width: 100%; }
body.rso-kiosk #rso-storefront .rso-add-btn { min-height: 56px; font-size: 1rem; padding: 12px 24px; margin-left: auto; }
body.rso-kiosk #rso-storefront .rso-icon-btn, body.rso-kiosk #rso-storefront .rso-chip-btn { min-height: 52px; }
body.rso-kiosk #rso-storefront .rso-primary-btn, body.rso-kiosk #rso-storefront .rso-basket-btn, body.rso-kiosk #rso-storefront .rso-checkout-link { min-height: 64px; font-size: 1.1rem; }
/* The stepper is buttons, not spans (KIOSK-4 fix: the 32 px web stepper
   was what a kiosk guest got in the option sheet and the basket). */
body.rso-kiosk #rso-storefront .rso-stepper button { width: 56px; height: 56px; font-size: 1.2rem; }
body.rso-kiosk #rso-storefront .rso-stepper output { min-width: 2em; font-size: 1.15rem; font-weight: 800; }
body.rso-kiosk #rso-storefront .rso-choice-row { min-height: 60px; padding: 8px 0; }
body.rso-kiosk #rso-storefront .rso-choice-row input[type="checkbox"], body.rso-kiosk #rso-storefront .rso-choice-row input[type="radio"] { width: 30px; height: 30px; }
body.rso-kiosk #rso-storefront .rso-choice-row label { font-size: 1.08rem; min-height: 44px; }
body.rso-kiosk #rso-storefront .rso-choice-price { font-size: .95rem; }
body.rso-kiosk #rso-storefront .rso-group-heading { font-size: 1.1rem; }
body.rso-kiosk #rso-storefront .rso-group-instructions { font-size: .9rem; }
body.rso-kiosk #rso-storefront .rso-dialog-close, body.rso-kiosk #rso-storefront .rso-dialog-close-float { width: 56px; height: 56px; font-size: 1.5rem; }
body.rso-kiosk #rso-storefront .rso-dialog-title { font-size: 1.35rem; }
body.rso-kiosk #rso-storefront .rso-basket-line-name { font-size: 1.05rem; }
body.rso-kiosk #rso-storefront .rso-basket-line-price { font-size: 1rem; }
body.rso-kiosk #rso-storefront .rso-basket-line-options { font-size: .9rem; }
body.rso-kiosk #rso-storefront .rso-basket-line { padding: 14px 0; }
body.rso-kiosk #rso-storefront .rso-basket-line-actions { gap: 12px; }
body.rso-kiosk #rso-storefront .rso-basket-fulfilment, body.rso-kiosk #rso-storefront .rso-basket-totals-row { font-size: 1rem; }
body.rso-kiosk #rso-storefront .rso-basket-totals-row-total { font-size: 1.25rem; }
/* The brand word must never run under the status pill (iPad width). */
body.rso-kiosk #rso-storefront .rso-word { font-size: clamp(1.15rem, 2.3vw, 1.7rem); }
/* Landscape with a basket column: three tiles from an iPad in landscape up
   (1180 − basket column leaves ~740 px, three 235 px tiles). */
@media (min-width: 1100px) { body.rso-kiosk #rso-storefront .rso-product-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 979px) { body.rso-kiosk #rso-storefront .rso-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rso-kiosk-idle { position: fixed; inset: 0; z-index: 9999; background: rgba(20, 14, 8, .55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.rso-kiosk-idle-card { background: var(--rso-surface, #fff); color: var(--rso-ink, #241a10); border-radius: 28px; padding: 36px 32px; max-width: 520px; width: 100%; text-align: center; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.rso-kiosk-idle-card h2 { margin: 0 0 8px; font-size: 2rem; }
.rso-kiosk-idle-count { margin: 0 0 22px; font-size: 1.1rem; color: var(--rso-ink-soft, #6b5d4d); }
.rso-kiosk-idle-card .rso-button { min-height: 64px; font-size: 1.15rem; width: 100%; }
#rso-storefront .rso-zone { display: flex; align-items: center; gap: 11px; flex: none; }
#rso-storefront .rso-zone[hidden] { display: none; }
#rso-storefront .rso-zone-ico {
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: 11px; background: var(--rso-accent-tint); color: var(--rso-accent-deep); flex: none;
}
#rso-storefront .rso-zone-ico svg { width: 19px; height: 19px; }
#rso-storefront .rso-zone-txt { display: flex; flex-direction: column; }
#rso-storefront .rso-zone-txt .k { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rso-ink-faint); }
#rso-storefront .rso-zone-txt .v { font-size: 1.02rem; font-weight: 800; color: var(--rso-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
#rso-storefront .rso-zone-input {
	font-family: inherit; font-size: 1.02rem; font-weight: 800; color: var(--rso-ink);
	font-variant-numeric: tabular-nums; line-height: 1.15;
	width: 5.5ch; min-height: 0; padding: 0 2px;
	border: 0; border-bottom: 2px solid var(--rso-accent); border-radius: 0;
	background: transparent; outline: none;
}
#rso-storefront .rso-zone-input::placeholder { color: var(--rso-ink-faint); font-weight: 600; font-size: .9rem; }
#rso-storefront .rso-zone-input:focus-visible { outline: 3px solid var(--rso-focus); outline-offset: 2px; border-radius: 4px; }
#rso-storefront .rso-zone-message:empty { display: none; }
#rso-storefront .rso-zone-message { max-width: 480px; }
#rso-storefront .rso-zone-btn {
	font-family: var(--rso-font-display); font-size: .85rem; font-weight: 700; cursor: pointer;
	color: var(--rso-accent-deep); background: transparent;
	border: 1.5px solid color-mix(in srgb, var(--rso-accent) 45%, transparent);
	border-radius: 999px; padding: 7px 14px; min-height: 40px; white-space: nowrap;
}
#rso-storefront .rso-zone-btn:hover { background: var(--rso-ink); border-color: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-zone-btn:focus-visible { outline: 3px solid var(--rso-focus); outline-offset: 2px; }
#rso-storefront .rso-facts { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 26px); margin-inline: auto; }
#rso-storefront .rso-facts[hidden] { display: none; }
#rso-storefront .rso-fact { text-align: right; }
#rso-storefront .rso-fact .v { font-size: .95rem; font-weight: 700; white-space: nowrap; }
#rso-storefront .rso-fact .k { font-size: .76rem; color: var(--rso-ink-soft); white-space: nowrap; }
/* Opening times: three short rows in the space one line of arrival
   estimate occupies. Deliberately smaller and tighter than a normal
   fact value — the block must not make the order card taller than it is
   during service, when this column shows a single line. */
#rso-storefront .rso-fact-hours .v { font-size: .78rem; line-height: 1.28; font-weight: 700; }
#rso-storefront .rso-fact-hours .v:first-child { font-weight: 800; }
#rso-storefront .rso-fact-hours .k { margin-top: 1px; font-size: .7rem; }
/* The progress block and the hours are two different facts; the flex gap
   alone let them sit close enough to read as one column of text. */
#rso-storefront .rso-fact-hours { margin-left: 28px; }
#rso-storefront .rso-fact-progress { text-align: left; min-width: 210px; }
#rso-storefront .rso-fact-progress .v { font-size: .92rem; color: var(--rso-accent-deep); white-space: normal; }
#rso-storefront .rso-fact-progress .k { margin-top: 2px; }
#rso-storefront .rso-fact-progress .bar { height: 4px; border-radius: 999px; background: var(--rso-surface-2); margin-top: 5px; overflow: hidden; }
#rso-storefront .rso-fact-progress .bar span { display: block; height: 100%; border-radius: 999px; background: var(--rso-accent); transition: width .3s; }
@media (prefers-reduced-motion: reduce) { #rso-storefront .rso-fact-progress .bar span { transition: none; } }
#rso-storefront .rso-fact-progress.is-unlocked .v { color: var(--rso-success); }
#rso-storefront .rso-fact-progress.is-unlocked .bar span { background: var(--rso-success); }
#rso-storefront .rso-booking-link { display: inline-flex; align-items: center; width: fit-content; margin-top: 12px; text-decoration: none; }
#rso-storefront .rso-postcode-form {
	margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
	background: var(--rso-surface); border: 1px solid var(--rso-line);
	border-radius: var(--rso-radius-m); padding: 14px; max-width: 420px;
}
#rso-storefront .rso-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
#rso-storefront .rso-field label { font-size: .8rem; font-weight: 700; }
#rso-storefront .rso-field input, #rso-storefront .rso-field select {
	min-height: 44px; padding: 8px 12px; border-radius: var(--rso-radius-s);
	border: 1px solid var(--rso-line); background: var(--rso-surface); color: var(--rso-ink); font-size: .95rem;
}
#rso-storefront .rso-hint { font-size: .78rem; color: var(--rso-ink-soft); flex-basis: 100%; }
#rso-storefront .rso-message {
	margin-top: 10px; padding: 10px 14px; border-radius: var(--rso-radius-s);
	font-size: .86rem; background: var(--rso-surface-2);
}
#rso-storefront .rso-message[data-tone="success"] { background: var(--rso-success-tint); color: var(--rso-success); }
#rso-storefront .rso-message[data-tone="error"] { background: var(--rso-danger-tint); color: var(--rso-danger); }
/* The undo banner packs text + an inline "Undo" action side by side; the
   delivery message (progress bar above its text) relies on .rso-message's
   own plain block stacking instead — an explicit modifier class rather
   than a :has() structural selector, since this project doesn't assume
   a browser-support floor recent enough to rely on that. */
#rso-storefront .rso-message-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#rso-storefront .rso-schedule { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#rso-storefront .rso-schedule-toggle { display: flex; gap: 8px; }
#rso-storefront .rso-chip-btn {
	border: 1px solid var(--rso-line); background: var(--rso-surface); color: var(--rso-ink-soft);
	font-weight: 700; font-family: var(--rso-font-display); font-size: .82rem;
	padding: 9px 16px; min-height: 44px; border-radius: 999px; cursor: pointer;
}
#rso-storefront .rso-chip-btn[aria-pressed="true"] { background: var(--rso-ink); color: var(--rso-bg); border-color: var(--rso-ink); }

/* --- Search --- */
/* No top margin: it is a header column now, not a row beneath one. */
#rso-storefront .rso-search { min-width: 0; }
#rso-storefront .rso-search-field { position: relative; }
/* The magnifier sits inside the field; the input's left padding is what
   keeps the typed text clear of it, so the two values move together. */
#rso-storefront .rso-search-icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	display: flex; pointer-events: none; color: var(--rso-ink-soft);
}
#rso-storefront .rso-search-icon svg { width: 18px; height: 18px; }
#rso-storefront .rso-search-field input {
	width: 100%; min-height: 46px; padding: 10px 16px 10px 42px; border-radius: 999px;
	border: 1px solid var(--rso-line); background: var(--rso-surface); color: var(--rso-ink); font-size: .95rem;
}
#rso-storefront .rso-search-reset {
	margin-top: 8px; background: none; border: 1px dashed var(--rso-line); border-radius: 999px;
	padding: 8px 14px; min-height: 40px; font-weight: 700; font-family: var(--rso-font-display);
	font-size: .8rem; color: var(--rso-ink-soft); cursor: pointer;
}

/* --- Category nav --- */
#rso-storefront .rso-cat-wrap {
	position: sticky; top: var(--rso-topbar-h, 64px); z-index: 20;
	background: var(--rso-bg); border-bottom: 1px solid var(--rso-line);
	margin-top: 8px; display: flex; align-items: center; position: sticky;
}
#rso-storefront .rso-cat-nav {
	flex: 1; min-width: 0;
	padding: 12px 0; display: flex; gap: 8px; overflow-x: auto;
	scrollbar-width: none;
}
#rso-storefront .rso-cat-nav::-webkit-scrollbar { display: none; }
#rso-storefront .rso-cat-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
	color: var(--rso-ink-soft); background: var(--rso-surface);
	border: 1px solid var(--rso-line); box-shadow: var(--rso-shadow);
}
#rso-storefront .rso-cat-arrow:hover { color: var(--rso-ink); }
#rso-storefront .rso-cat-arrow[hidden] { display: none; }
#rso-storefront .rso-cat-arrow svg { width: 15px; height: 15px; }
#rso-storefront .rso-cat-arrow-left { left: 0; }
#rso-storefront .rso-cat-arrow-right { right: 0; }
/* MOBILE-1 (alpha.49): nothing of ours may widen the page — on a phone a
   few px of overflow let the whole page wobble sideways and cut buttons. */
#rso-storefront { overflow-x: clip; }
#rso-storefront .rso-cat-wrap { overflow-x: clip; }
/* Soft fades under the arrows so the strip visibly continues. */
#rso-storefront .rso-cat-arrow-left::before, #rso-storefront .rso-cat-arrow-right::before {
	content: ""; position: absolute; top: 50%; transform: translateY(-50%);
	width: 56px; height: 44px; pointer-events: none; z-index: -1;
}
#rso-storefront .rso-cat-arrow-left::before { left: -6px; background: linear-gradient(90deg, var(--rso-bg) 40%, transparent); }
#rso-storefront .rso-cat-arrow-right::before { right: -6px; background: linear-gradient(270deg, var(--rso-bg) 40%, transparent); }
#rso-storefront .rso-cat-pill {
	flex: none; border: 1px solid var(--rso-line); background: var(--rso-surface);
	color: var(--rso-ink-soft); font-family: var(--rso-font-display); font-weight: 700;
	font-size: .82rem; padding: 9px 16px; min-height: 44px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
#rso-storefront .rso-cat-pill[aria-current="true"] { background: var(--rso-ink); color: var(--rso-bg); border-color: var(--rso-ink); }
#rso-storefront .rso-cat-pill:hover:not([aria-current="true"]) { background: var(--rso-line); }
#rso-storefront .rso-cat-pill:focus-visible { outline: none; background: var(--rso-line); box-shadow: 0 0 0 2px var(--rso-ink-faint); }

/* --- Menu sections --- */
#rso-storefront .rso-section { margin-top: 30px; scroll-margin-top: calc(var(--rso-topbar-h, 64px) + 64px); }
#rso-storefront .rso-section h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.65rem); font-weight: 800;
	letter-spacing: -.015em; line-height: 1.2;
}
#rso-storefront .rso-section h2:focus, #rso-storefront .rso-section h2:focus-visible {
	outline: none; background: var(--rso-surface-2);
	border-radius: 12px; padding: 4px 14px; margin-left: -14px;
	width: fit-content;
}
#rso-storefront .rso-product-list { list-style: none; margin: 12px 0 0; padding: 0; }
#rso-storefront .rso-product-card {
	display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rso-line); align-items: flex-start;
}
#rso-storefront .rso-product-list > li:first-child .rso-product-card { border-top: none; }
#rso-storefront .rso-product-main { flex: 1; min-width: 0; }
#rso-storefront .rso-product-name { font-family: var(--rso-font-display); font-weight: 700; font-size: .98rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#rso-storefront .rso-product-price { margin-top: 6px; font-weight: 800; font-family: var(--rso-font-display); font-size: .92rem; }
#rso-storefront .rso-product-desc { margin-top: 6px; color: var(--rso-ink-soft); font-size: .84rem; }
#rso-storefront .rso-product-thumb { flex: none; width: 96px; height: 96px; border-radius: var(--rso-radius-s); overflow: hidden; background: var(--rso-surface-2); }
#rso-storefront .rso-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The photo opens the dish. It is a real button, so it must not inherit
   the browser's button chrome — and it must say so on hover and to a
   keyboard, or it is a target nobody knows is there. */
#rso-storefront .rso-product-thumb-btn { padding: 0; border: 0; cursor: pointer; display: block; }
#rso-storefront .rso-product-thumb-btn img { transition: transform .25s ease; }
#rso-storefront .rso-product-thumb-btn:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
	#rso-storefront .rso-product-thumb-btn img { transition: none; }
	#rso-storefront .rso-product-thumb-btn:hover img { transform: none; }
}
#rso-storefront .rso-product-thumb-btn:focus-visible { outline: 3px solid var(--rso-focus); outline-offset: 2px; }
#rso-storefront .rso-product-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#rso-storefront .rso-badge {
	font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
	background: var(--rso-surface-2); color: var(--rso-ink-soft); white-space: nowrap;
}
#rso-storefront .rso-badge-soldout { background: var(--rso-danger-tint); color: var(--rso-danger); }

/* ══ SPICE-1 · heat as chillies, never a number ════════════════════════
   Owner 2026-09-13: "instead of 1 to 5 add uncoloured chilli just with the
   border, second level with one chilli and 2 chilli and 3 chilli".
   So: one outlined chilli is the gentlest step, then one, two, three
   filled. The word rides along — a pictogram alone is not a statement,
   and it keeps the scale usable for anyone who cannot see the fill. */
/* SPICE-1 (owner 2026-09-13): the heat is a CHOICE the guest makes, so the
   chillies sit on the option rows of a group the kitchen marked as a heat
   scale — never on the menu card. First choice: one chilli in outline only;
   after that one, two, three filled. The choice's own words stay put and are
   what a screen reader reads; the chillies are aria-hidden decoration. */
#rso-storefront .rso-choice-main, #rso-checkout .rso-choice-main {
	display: inline-flex; align-items: center; gap: 9px; min-width: 0;
}
#rso-storefront .rso-choice-chillies, #rso-checkout .rso-choice-chillies {
	display: inline-flex; align-items: center; gap: var(--rso-chilli-gap); flex: none;
	/* One fixed column, sized by the group's hottest step (--rso-chilli-slots,
	   set on the fieldset), so every word starts at the same x. */
	min-width: calc( var(--rso-chilli-slots, 3) * var(--rso-chilli-size) + ( var(--rso-chilli-slots, 3) - 1 ) * var(--rso-chilli-gap) );
}
#rso-storefront, #rso-checkout { --rso-chilli-size: 17px; --rso-chilli-gap: 3px; }
#rso-storefront .rso-chilli, #rso-checkout .rso-chilli {
	width: var(--rso-chilli-size); height: var(--rso-chilli-size); display: block;
}
/* The kiosk's rows and type are larger; the chillies grow with them, and the
   reserved column follows because it is computed from the same variables. */
body.rso-kiosk #rso-storefront { --rso-chilli-size: 23px; --rso-chilli-gap: 4px; }
/* The outline is drawn in the same red as the filled steps, not grey: grey
   reads as "unavailable" and all but vanishes at this size. Uncoloured means
   unfilled, not invisible. */
#rso-storefront .rso-chilli .rso-chilli-body, #rso-checkout .rso-chilli .rso-chilli-body {
	fill: none; stroke: var(--rso-danger); stroke-width: 1.9; stroke-linejoin: round;
}
#rso-storefront .rso-chilli .rso-chilli-stem, #rso-checkout .rso-chilli .rso-chilli-stem {
	fill: none; stroke: var(--rso-accent-deep); stroke-width: 1.9; stroke-linecap: round;
}
#rso-storefront .rso-chilli.is-filled .rso-chilli-body, #rso-checkout .rso-chilli.is-filled .rso-chilli-body {
	fill: var(--rso-danger); stroke: var(--rso-danger);
}
#rso-storefront .rso-chilli.is-filled .rso-chilli-stem, #rso-checkout .rso-chilli.is-filled .rso-chilli-stem {
	stroke: var(--rso-accent-deep);
}
/* Required = red star + red tag; optional = green tag (owner decision
   2026-08-18). The star is decorative (aria-hidden) — the badge text is
   what assistive tech reads. */
#rso-storefront .rso-required-star { color: #c62828; font-weight: 800; font-size: 1.05em; line-height: 1; margin-left: 2px; }
#rso-storefront .rso-badge-required { background: #fdecea; color: #c62828; }
#rso-storefront .rso-badge-optional { background: var(--rso-success-tint); color: var(--rso-success); }
#rso-storefront .rso-add-btn {
	border: 0; background: var(--rso-accent); color: #fff; font-weight: 800;
	font-family: var(--rso-font-display); font-size: .84rem; min-height: 44px; min-width: 44px;
	padding: 10px 18px; border-radius: 999px; cursor: pointer;
}
#rso-storefront .rso-add-btn:hover { background: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-add-btn.rso-in-cart { background: var(--rso-accent-deep); }
#rso-storefront .rso-add-btn[aria-disabled="true"] { background: var(--rso-surface-2); color: var(--rso-ink-faint); cursor: not-allowed; }
#rso-storefront .rso-product-card[data-purchasable="false"] .rso-product-main { opacity: .55; }
#rso-storefront .rso-product-card[data-purchasable="false"] .rso-product-thumb { opacity: .55; }

/* --- Modal / drawer (product customization + mobile basket) --- */
#rso-storefront .rso-overlay {
	position: fixed; inset: 0; background: rgba(20, 14, 8, .5); z-index: 100;
	display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) {
	#rso-storefront .rso-overlay { align-items: center; padding: 20px; }
}
#rso-storefront .rso-dialog {
	background: var(--rso-surface); width: 100%; max-width: 560px; max-height: 92vh;
	border-radius: var(--rso-radius-l) var(--rso-radius-l) 0 0; overflow-y: auto; position: relative;
	padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 640px) {
	#rso-storefront .rso-dialog { border-radius: var(--rso-radius-l); }
}
#rso-storefront .rso-dialog-header { position: sticky; top: 0; background: var(--rso-surface); padding: 16px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--rso-line); z-index: 2; }
#rso-storefront .rso-dialog-title { font-size: 1.15rem; font-weight: 800; }
#rso-storefront .rso-dialog-close {
	flex: none; width: 40px; height: 40px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--rso-accent); color: #fff; border: 0;
	cursor: pointer; font-size: 1.2rem; line-height: 1;
}
#rso-storefront .rso-dialog-close:hover { background: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-dialog-body { padding: 20px; }

/* --- Modal hero photo ---
   The dish the guest tapped, shown at the size a dish deserves. The
   photo runs edge to edge across the top of the sheet; the close button
   floats on it as a light disc so it stays hittable over a dark or a
   pale photo alike. The name sits underneath, on the surface, where it
   is always legible — never overlaid on the image. */
#rso-storefront .rso-dialog-hero { position: relative; margin: 0; line-height: 0; background: var(--rso-surface-2); }
#rso-storefront .rso-dialog-hero-img {
	display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--rso-radius-l) var(--rso-radius-l) 0 0;
}
@media (min-width: 640px) {
	#rso-storefront .rso-dialog-has-hero .rso-dialog-hero-img { aspect-ratio: 3 / 2; }
}
#rso-storefront .rso-dialog-close-float {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	background: rgba(255, 255, 255, .92); color: var(--rso-ink);
	box-shadow: 0 2px 10px rgba(36, 26, 16, .28);
	backdrop-filter: saturate(150%) blur(6px);
}
#rso-storefront .rso-dialog-close-float:hover { background: var(--rso-ink); color: #fff; }
#rso-storefront .rso-dialog-title-hero {
	font-family: var(--rso-font-display); font-size: 1.4rem; line-height: 1.2;
	margin: 0 0 2px; letter-spacing: -.01em;
}
#rso-storefront .rso-dialog-has-hero .rso-dialog-body { padding-top: 16px; }
#rso-storefront .rso-dialog-has-hero .rso-product-price {
	margin-top: 4px; font-size: 1.05rem; color: var(--rso-accent-deep);
}
#rso-storefront .rso-dialog-has-hero .rso-product-desc { margin-top: 8px; font-size: .88rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
	#rso-storefront .rso-dialog-hero-img { animation: rso-hero-in .24s ease-out both; }
}
@keyframes rso-hero-in { from { opacity: 0; } to { opacity: 1; } }
#rso-storefront .rso-dialog-footer {
	position: sticky; bottom: 0; background: var(--rso-surface); padding: 14px 20px;
	border-top: 1px solid var(--rso-line); display: flex; gap: 12px; z-index: 2;
}
#rso-storefront .rso-option-group { margin: 0 0 22px; padding: 0; border: 0; }
#rso-storefront .rso-option-group legend { padding: 0; width: 100%; }
#rso-storefront .rso-group-heading { display: flex; align-items: center; gap: 8px; font-weight: 800; font-family: var(--rso-font-display); font-size: .95rem; }
#rso-storefront .rso-group-instructions { margin-top: 2px; font-size: .8rem; color: var(--rso-ink-soft); }
#rso-storefront .rso-option-group[data-invalid="true"] .rso-group-heading { color: var(--rso-danger); }
#rso-storefront .rso-option-group[data-invalid="true"] { outline: 2px solid var(--rso-accent); outline-offset: 6px; border-radius: 8px; }
#rso-storefront .rso-group-error { color: var(--rso-danger); font-size: .8rem; margin-top: 4px; font-weight: 700; }
#rso-storefront .rso-choice-row {
	display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rso-line);
}
#rso-storefront .rso-option-group > .rso-choice-row:first-of-type { border-top: none; }
#rso-storefront .rso-choice-row label { flex: 1; display: flex; justify-content: space-between; gap: 10px; align-items: center; cursor: pointer; }
#rso-storefront .rso-choice-row input[type="checkbox"], #rso-storefront .rso-choice-row input[type="radio"] { width: 20px; height: 20px; flex: none; }
#rso-storefront .rso-choice-price { color: var(--rso-ink-soft); font-size: .84rem; white-space: nowrap; }
#rso-storefront .rso-choice-row[data-unavailable="true"] { opacity: .55; }
#rso-storefront .rso-choice-unavailable-note { font-size: .76rem; color: var(--rso-danger); }
#rso-storefront .rso-stepper { display: inline-flex; align-items: center; gap: 8px; }
#rso-storefront .rso-stepper button:hover { background: var(--rso-ink); border-color: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-stepper button {
	width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rso-line);
	background: var(--rso-surface-2); font-weight: 800; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 1; padding: 0;
}
#rso-storefront .rso-stepper output { min-width: 1.5em; text-align: center; font-variant-numeric: tabular-nums; }
#rso-storefront .rso-primary-btn {
	flex: 1; border: 0; background: var(--rso-accent); color: #fff; font-family: var(--rso-font-display);
	font-weight: 800; font-size: .94rem; padding: 14px; min-height: 48px; border-radius: 999px; cursor: pointer;
}
#rso-storefront .rso-primary-btn:hover { background: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-primary-btn[disabled] { background: var(--rso-surface-2); color: var(--rso-ink-faint); cursor: not-allowed; }

/* --- Basket --- */
#rso-storefront .rso-basket {
	background: var(--rso-surface); border: 1px solid var(--rso-line); border-radius: var(--rso-radius-l);
	padding: 20px; box-shadow: var(--rso-shadow); display: none;
}
@media (min-width: 980px) {
	#rso-storefront .rso-basket {
		display: block; position: sticky; align-self: start;
		top: calc(var(--rso-topbar-h, 64px) + 76px);
		max-height: calc(100vh - var(--rso-topbar-h, 64px) - 96px);
		overflow-y: auto;
	}
}
#rso-storefront .rso-basket h2 { font-size: 1.05rem; font-weight: 800; }
#rso-storefront .rso-basket-empty { margin-top: 20px; text-align: center; color: var(--rso-ink-faint); padding: 20px 0; }
#rso-storefront .rso-basket-lines { list-style: none; margin: 12px 0 0; padding: 0; }
#rso-storefront .rso-basket-line { padding: 12px 0; border-top: 1px solid var(--rso-line); }
#rso-storefront .rso-basket-lines > li:first-child .rso-basket-line { border-top: none; }
#rso-storefront .rso-basket-line-top { display: flex; justify-content: space-between; gap: 10px; }
#rso-storefront .rso-basket-line-name { font-weight: 700; font-size: .88rem; font-family: var(--rso-font-display); }
#rso-storefront .rso-basket-line-price { font-weight: 800; font-size: .86rem; white-space: nowrap; }
#rso-storefront .rso-basket-line-options { margin-top: 4px; font-size: .78rem; color: var(--rso-ink-soft); }
#rso-storefront .rso-basket-line-actions { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#rso-storefront .rso-basket-line[data-unavailable="true"] .rso-basket-line-top, #rso-storefront .rso-basket-line[data-unavailable="true"] .rso-basket-line-options { opacity: .55; }
#rso-storefront .rso-basket-line-unavailable { margin-top: 6px; font-size: .8rem; font-weight: 700; color: var(--rso-danger); }
#rso-storefront .rso-basket-fulfilment { font-size: .84rem; color: var(--rso-ink-soft); padding-bottom: 10px; border-bottom: 1px solid var(--rso-line); margin-bottom: 4px; }
#rso-storefront .rso-basket-fulfilment strong { color: var(--rso-ink); font-family: var(--rso-font-display); }
#rso-storefront .rso-link-btn {
	background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--rso-ink-soft);
	font-size: .8rem; font-weight: 700; cursor: pointer; text-decoration: underline;
}
#rso-storefront .rso-progress {
	-webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 999px;
	overflow: hidden; margin-bottom: 6px;
}
#rso-storefront .rso-progress::-webkit-progress-bar { background: var(--rso-surface-2); border-radius: 999px; }
#rso-storefront .rso-progress::-webkit-progress-value { background: var(--rso-success); border-radius: 999px; }
#rso-storefront .rso-progress::-moz-progress-bar { background: var(--rso-success); border-radius: 999px; }
#rso-storefront .rso-coupon-section, #rso-storefront .rso-tip-section, #rso-storefront .rso-notes-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rso-line); }
#rso-storefront .rso-field-label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 8px; }
#rso-storefront .rso-coupon-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#rso-storefront .rso-coupon-list li { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; background: var(--rso-success-tint); color: var(--rso-success); padding: 6px 10px; border-radius: var(--rso-radius-s); }
#rso-storefront .rso-coupon-list li .rso-link-btn { color: inherit; }
#rso-storefront .rso-coupon-form { display: flex; gap: 8px; }
#rso-storefront .rso-coupon-form input {
	flex: 1; min-height: 40px; padding: 8px 12px; border-radius: var(--rso-radius-s);
	border: 1px solid var(--rso-line); background: var(--rso-surface); color: var(--rso-ink); font-size: .88rem;
}
#rso-storefront .rso-tip-presets { display: flex; gap: 8px; flex-wrap: wrap; }
#rso-storefront .rso-notes-section textarea {
	width: 100%; min-height: 60px; padding: 10px 12px; border-radius: var(--rso-radius-s);
	border: 1px solid var(--rso-line); background: var(--rso-surface); color: var(--rso-ink);
	font-family: inherit; font-size: .86rem; resize: vertical;
}
#rso-storefront .rso-basket-totals { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rso-line); display: flex; flex-direction: column; gap: 6px; }
#rso-storefront .rso-basket-totals-row { display: flex; justify-content: space-between; font-size: .86rem; color: var(--rso-ink-soft); }
#rso-storefront .rso-basket-totals-row-total { font-weight: 800; font-family: var(--rso-font-display); font-size: 1.02rem; color: var(--rso-ink); margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--rso-line); }
#rso-storefront .rso-checkout-link {
	margin-top: 14px; display: flex; justify-content: center; width: 100%; min-height: 48px;
	border: 0; background: var(--rso-accent); color: #fff; font-family: var(--rso-font-display);
	font-weight: 800; font-size: .94rem; padding: 14px; border-radius: 999px; text-decoration: none; align-items: center;
}
#rso-storefront .rso-checkout-link:hover { background: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-mobile-bar {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
	background: var(--rso-accent-deep); color: #fff; border-radius: 999px; padding: 14px 20px;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	box-shadow: var(--rso-shadow-lg); border: 0; font-family: var(--rso-font-display);
	font-weight: 800; font-size: .95rem; cursor: pointer; min-height: 52px; width: calc(100% - 32px);
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
}
/* CART-1: the bar carries two targets now, so the whole bar no longer
   inverts on touch — only the green checkout pill reacts. */
#rso-storefront .rso-mobile-bar { justify-content: space-between; cursor: default; padding-left: 18px; padding-right: 10px; }
#rso-storefront .rso-mobile-bar-sum {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	gap: 1px; line-height: 1.2; min-height: 44px; padding: 4px 8px 4px 0;
	background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
#rso-storefront .rso-mobile-bar-sum strong { font-size: 1.06em; font-weight: 900; }
#rso-storefront .rso-mobile-bar-sum small { font-size: .76em; font-weight: 600; opacity: .85; white-space: nowrap; }
#rso-storefront .rso-mobile-bar-sum:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 10px; }
#rso-storefront .rso-mobile-bar-cta {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	min-height: 44px; padding: 0 22px; border-radius: 999px;
	background: #48b000; color: #fff; font-weight: 800; text-decoration: none; white-space: nowrap;
}
#rso-storefront .rso-mobile-bar-cta:hover, #rso-storefront .rso-mobile-bar-cta:active { background: #3a8f00; color: #fff; }
#rso-storefront .rso-mobile-bar-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 980px) { #rso-storefront .rso-mobile-bar { display: none; } }
#rso-storefront .rso-mobile-bar[hidden] { display: none; }

/* --- Loading / error states --- */
#rso-storefront .rso-loading { padding: 24px; text-align: center; color: var(--rso-ink-soft); }
#rso-storefront .rso-error-banner {
	margin: 12px 0; padding: 14px 16px; border-radius: var(--rso-radius-m);
	background: var(--rso-danger-tint); color: var(--rso-danger); display: flex;
	justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
#rso-storefront .rso-error-banner button {
	border: 1px solid currentColor; background: transparent; color: inherit; font-weight: 700;
	padding: 8px 14px; min-height: 40px; border-radius: 999px; cursor: pointer;
}
#rso-storefront .rso-empty-state { padding: 32px 0; text-align: center; color: var(--rso-ink-soft); }

/* 200% browser zoom / narrow widths: nothing above uses fixed px widths
   for text containers, and the grid collapses to one column below
   980px — verified interactively, see tests/manual-storefront-harness.html. */


/* --- Header responsive collapse --- */
@media (max-width: 1023px) {
	#rso-storefront .rso-ordercard { flex-wrap: wrap; }
#rso-storefront .rso-service-selector { flex: 1 1 100%; }
#rso-storefront .rso-service-btn { flex: 1; }
#rso-storefront .rso-zone { flex: 1 1 auto; }
#rso-storefront .rso-facts { margin-inline: auto; flex: 0 1 auto; justify-content: center; gap: 16px; }
#rso-storefront .rso-fact { text-align: left; }
}

@media (max-width: 639px) {
	/* One line on phones: search collapses to an icon that opens an
	   overlay row under the bar (owner decision 2026-08-18). */
	#rso-storefront .rso-topbar-inner { gap: 6px; padding: 8px 10px; }
#rso-storefront .rso-brand { gap: 6px; }
#rso-storefront .rso-actions { margin-left: auto; }
#rso-storefront .rso-search { display: none; }
#rso-storefront .rso-topbar.rso-search-open .rso-search {
		display: block; position: absolute; left: 0; right: 0; top: 100%;
		padding: 8px 14px 10px; background: var(--rso-surface);
		border-bottom: 1px solid var(--rso-line); box-shadow: var(--rso-shadow);
	}
#rso-storefront .rso-search-toggle {
		display: flex; align-items: center; justify-content: center; flex: none;
		width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
		color: var(--rso-ink); background: transparent; border: 0;
	}
#rso-storefront .rso-search-toggle:active { background: var(--rso-surface-2); }
/* Bigger on a phone: it sits beside the basket button and the logo, and
   at 21px it read as the smallest thing in the bar (owner, 2026-09-07). */
#rso-storefront .rso-search-toggle svg { width: 25px; height: 25px; }
#rso-storefront .rso-search-toggle:focus-visible { outline: 3px solid var(--rso-focus); outline-offset: 2px; }
#rso-storefront .rso-brand-address { font-size: .55rem; }
/* The pill carries one word now — no window, no opening time — so on a
   phone it fits beside the logo instead of being hidden as it once was.
   When to come back is on the order card, as the opening times. */
#rso-storefront .rso-status { font-size: .72rem; padding: 5px 10px 5px 8px; gap: 5px; }
#rso-storefront .rso-basket-btn { padding: 8px 12px; min-height: 40px; }
#rso-storefront .rso-brand { gap: 7px; min-width: 0; }
#rso-storefront .rso-mark svg { height: 24px; }
#rso-storefront .rso-word { font-size: .88rem; }
#rso-storefront .rso-phone-btn { display: none; }
#rso-storefront .rso-basket-btn-amount { display: none; }
#rso-storefront .rso-search-field input { min-height: 42px; padding: 8px 13px 8px 40px; }
#rso-storefront .rso-search-icon { left: 13px; }
#rso-storefront .rso-search-icon svg { width: 19px; height: 19px; }
#rso-storefront .rso-service-btn { padding: 7px 6px; }
#rso-storefront .rso-service-btn-sub { font-size: .68rem; }
#rso-storefront .rso-zone { flex: 1 1 100%; }
#rso-storefront .rso-facts { margin-inline: 0; flex: 1 1 100%; justify-content: space-between; gap: 10px; }
}

/* --- Basket line icon actions (2026-08-19) --- */
#rso-storefront .rso-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--rso-line); background: var(--rso-surface); color: var(--rso-ink-soft);
}
#rso-storefront .rso-icon-btn { padding: 0; /* Hello Elementor's button reset pads 8px 16px, which leaves a 34px border-box button a 0px content box and flex-shrinks the icon to invisible (live finding 2026-08-19) */ }
#rso-storefront .rso-icon-btn svg { width: 16px; height: 16px; min-width: 16px; flex: 0 0 auto; }
#rso-storefront .rso-icon-btn:hover { background: var(--rso-ink); border-color: var(--rso-ink); color: var(--rso-bg); }
#rso-storefront .rso-icon-btn-danger { color: var(--rso-danger); }
#rso-storefront .rso-icon-btn-danger:hover { background: var(--rso-danger); border-color: var(--rso-danger); color: #fff; }

/* "Only 3 left today" beside the quantity stepper. Warm rather than
   alarming: it is information about a good dish, not an error. */
#rso-storefront .rso-portions-left {
	margin-left: 10px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #8a5a00;
}

/* ══ GUEST-ENTRY-1 · the welcome gate ══════════════════════════════════
   One screen before the menu on the web: entry photo, name, two doors.
   Fixed over the page, scrolls inside itself on small phones. */
body.rso-entry-open { overflow: hidden; }
.rso-entry { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--rso-bg, #fff); color: var(--rso-ink, #241a10); font-family: var(--rso-font-display, system-ui, sans-serif); -webkit-font-smoothing: antialiased; overflow-y: auto; opacity: 0; transform: translateY(12px); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.8,.3,1); }
.rso-entry.is-in { opacity: 1; transform: none; }
.rso-entry.is-out { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.rso-entry * { box-sizing: border-box; }
.rso-entry-hero { position: relative; flex: 0 0 auto; min-height: 46vh; min-height: 46dvh; background: var(--rso-ink, #241a10) center/cover no-repeat; display: flex; align-items: flex-end; justify-content: center; padding: 28px 20px 56px; }
.rso-entry-hero.is-branded { min-height: 38vh; min-height: 38dvh; padding-bottom: 44px; background-size: cover; background-position: center; }
.rso-entry-hero.is-branded::before { background: linear-gradient(180deg, rgba(20,14,8,0) 0%, rgba(20,14,8,0) 70%, rgba(20,14,8,.35) 100%); }
.rso-entry .rso-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rso-entry-hero.no-photo { background: radial-gradient(120% 90% at 80% 0%, #72cc00 0%, #46a500 40%, #2f7a05 100%); }
/* HOME-IMG-1 (owner 2026-09-13: "can you not dim it"). The photo is the
   point — no curtain over it. The words stay readable on their own: a soft
   shadow under the type, and a small pool of shade behind the text block
   only, which never touches the dishes at the edges. */
.rso-entry-hero.has-photo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 52% at 50% 82%, rgba(20,14,8,.42) 0%, rgba(20,14,8,.16) 55%, rgba(20,14,8,0) 100%); }
.rso-entry-hero-inner { position: relative; text-align: center; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5); max-width: 640px; }
.rso-entry-logo { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 26px; background: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.rso-entry-logo svg, .rso-entry-logo img { width: 64px; height: auto; max-height: 64px; object-fit: contain; display: block; }
.rso-entry-title { margin: 0; font-family: inherit; font-size: clamp(26px, 5vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.rso-entry-tagline { margin: 8px 0 0; font-size: 15px; font-weight: 600; opacity: .92; color: #fff; }
.rso-entry-sheet { position: relative; flex: 1 0 auto; margin-top: -30px; background: var(--rso-bg, #fff); border-radius: 32px 32px 0 0; padding: 26px 20px 28px; box-shadow: 0 -12px 40px -20px rgba(36,26,16,.35); display: flex; flex-direction: column; align-items: center; }
.rso-entry-options { display: grid; gap: 12px; width: 100%; max-width: 560px; margin: 0 0 16px; }
.rso-entry-option { display: grid; grid-template-columns: 60px 1fr 24px; align-items: center; gap: 14px; width: 100%; padding: 16px 16px 16px 14px; border: 2px solid var(--rso-line, #e8e1d2); border-radius: 24px; background: var(--rso-surface, #fff); text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 92px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.rso-entry .rso-entry-option { white-space: normal; text-wrap: wrap; background: var(--rso-surface, #fff); color: inherit; }
.rso-entry .rso-entry-option:hover, .rso-entry .rso-entry-option:focus { border-color: var(--rso-accent, #46a500); background: var(--rso-accent-tint, #eaf6df); color: inherit; box-shadow: 0 14px 36px -22px rgba(70,165,0,.7); }
.rso-entry-option:active { transform: scale(.985); }
.rso-entry-option:focus-visible { outline: 3px solid var(--rso-focus, #1857c4); outline-offset: 3px; }
.rso-entry-ic { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 20px; background: var(--rso-accent-tint, #eaf6df); color: var(--rso-accent-deep, #35800a); }
.rso-entry-ic svg { width: 34px; height: 34px; display: block; }
.rso-entry-tx b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.rso-entry-sub { display: block; font-size: 13px; color: var(--rso-ink-soft, #6b5d4d); margin-top: 3px; line-height: 1.35; }
.rso-entry-ch { width: 24px; height: 24px; color: var(--rso-ink-faint, #9a8c79); }
.rso-entry-ch svg { width: 24px; height: 24px; display: block; }
/* ENTRY-ZONE-1 (alpha.58): the delivery-zone check inside the gate. */
.rso-entry-zone { width: 100%; max-width: 560px; margin: -4px 0 16px; padding: 18px 18px 14px; border: 2px solid var(--rso-accent, #46a500); border-radius: 24px; background: var(--rso-surface, #fff); box-sizing: border-box; }
.rso-entry-zone-title { margin: 0 0 4px; font-family: var(--rso-font-display, inherit); font-weight: 800; font-size: 18px; color: var(--rso-ink, #241a10); }
.rso-entry-zone-hint { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--rso-ink-soft, #6b5d4d); }
.rso-entry-zone-form { display: flex; gap: 10px; }
.rso-entry-zone-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 20px; font-weight: 700; letter-spacing: .06em; padding: 12px 14px; border: 2px solid var(--rso-line, #e8e1d2); border-radius: 14px; background: var(--rso-bg, #fff); color: var(--rso-ink, #241a10); }
.rso-entry-zone-input:focus { outline: none; border-color: var(--rso-accent, #46a500); box-shadow: 0 0 0 4px var(--rso-accent-tint, #eaf6df); }
.rso-entry-zone-check, .rso-entry-zone-go { flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--rso-accent, #46a500); color: #fff; font: inherit; font-weight: 800; font-size: 15px; padding: 12px 20px; cursor: pointer; min-height: 48px; }
.rso-entry-zone-check:hover, .rso-entry-zone-go:hover { background: var(--rso-accent-deep, #35800a); color: #fff; }
.rso-entry-zone.is-busy .rso-entry-zone-check { opacity: .6; pointer-events: none; }
.rso-entry-zone-result { margin-top: 12px; }
.rso-entry-zone-result .rso-message { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; background: var(--rso-surface-2, #f6f3ea); color: var(--rso-ink, #241a10); }
.rso-entry-zone-result .rso-message[data-tone="success"] { background: var(--rso-success-tint, #eaf6df); color: var(--rso-success, #2f6f0a); }
.rso-entry-zone-result .rso-message[data-tone="error"] { background: var(--rso-danger-tint, #fdecec); color: var(--rso-danger, #b42318); }
.rso-entry-zone-result .rso-message p { margin: 0; }
.rso-entry-zone-yes { font-weight: 800; }
.rso-entry-zone-actions { display: flex; justify-content: center; margin-top: 12px; }
.rso-entry-zone-go { width: 100%; }
.rso-entry-zone-back { display: block; margin: 8px auto 0; border: 0; background: transparent; color: var(--rso-ink-faint, #9a8c79); font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.rso-entry-zone-back:hover { color: var(--rso-ink, #241a10); background: var(--rso-accent-tint, #eaf6df); }
@media (max-width: 420px) { .rso-entry-zone-form { flex-direction: column; } }
.rso-entry-note { margin: 0 0 14px; max-width: 560px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--rso-ink-soft, #6b5d4d); }
.rso-entry-browse { border: 0; background: transparent; color: var(--rso-ink-faint, #9a8c79); font: inherit; font-size: 14px; font-weight: 700; padding: 10px 14px; border-radius: 999px; cursor: pointer; }
.rso-entry-browse:hover { color: var(--rso-ink, #241a10); background: var(--rso-accent-tint, #eaf6df); }
.rso-entry-foot { margin: 18px 0 0; font-size: 12.5px; color: var(--rso-ink-faint, #9a8c79); text-align: center; }

/* ══ HOME-FULL-1 · the welcome screen IS the photograph ════════════════
   Owner 2026-09-13: "can we have the whole picture as the background, and
   the logo without white background a bit bigger with the symbol visible
   well, buttons white slightly transparent and in green, bottom we can
   have the footer in the ricespice.ch".

   So: no band, no white sheet, no curtain. The picture fills the screen,
   the brand sits on it, the two doors are panes of frosted glass with
   green type, and the site's own legal footer closes the page. */
.rso-entry.has-photo { background-image: var(--rso-entry-photo); background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--rso-ink, #241a10); }
.rso-entry.no-photo { background: radial-gradient(120% 90% at 80% 0%, #72cc00 0%, #46a500 40%, #2f7a05 100%); }
.rso-entry-stage { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.rso-entry.has-photo .rso-entry-hero, .rso-entry.no-photo .rso-entry-hero { background: none; min-height: 0; flex: 0 0 auto; align-items: center; padding: 34px 20px 8px; }
.rso-entry.has-photo .rso-entry-hero::before, .rso-entry.no-photo .rso-entry-hero::before { display: none; }
.rso-entry.has-photo .rso-entry-sheet, .rso-entry.no-photo .rso-entry-sheet { background: transparent; box-shadow: none; margin-top: 0; border-radius: 0; flex: 0 0 auto; padding: 6px 20px 26px; }

/* The logo as a mark, not a sticker: the white block behind it is dropped
   (screen blend over an inverted image knocks the white out), the symbol
   and wordmark carry their own weight, and a shadow keeps them legible
   wherever the photo is bright. */
.rso-entry.has-photo .rso-entry-logo { width: auto; height: auto; max-width: 100%; background: none; box-shadow: none; border-radius: 0; margin: 0 auto 16px; }
.rso-entry.has-photo .rso-entry-logo img { width: clamp(150px, 26vw, 210px); height: auto; max-height: none; filter: invert(1) hue-rotate(180deg) drop-shadow(0 8px 22px rgba(0, 0, 0, .6)); mix-blend-mode: screen; }
/* LOGO-CONTRAST-1: a logo file that is already transparent needs no blend
   and no inversion — it goes straight onto the photograph, at its own
   colours, with a shadow that holds it against a bright dish. */
.rso-entry.has-photo .rso-entry-logo.is-plain img, .rso-entry.no-photo .rso-entry-logo.is-plain img {
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .75)) drop-shadow(0 12px 34px rgba(0, 0, 0, .5));
	mix-blend-mode: normal;
}
.rso-entry .rso-entry-logo.is-plain { width: auto; height: auto; max-width: 100%; background: none; box-shadow: none; border-radius: 0; margin: 0 auto 16px; }
.rso-entry .rso-entry-logo.is-plain img { width: clamp(170px, 30vw, 240px); height: auto; max-height: none; }
.rso-entry.has-photo .rso-entry-logo svg { width: clamp(72px, 14vw, 104px); height: auto; max-height: none; color: #fff; }
.rso-entry.has-photo .rso-entry-title, .rso-entry.no-photo .rso-entry-title { text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .5); }

/* Frosted glass, green type. */
.rso-entry.has-photo .rso-entry-option, .rso-entry.no-photo .rso-entry-option,
.rso-entry.has-photo .rso-entry .rso-entry-option {
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	border: 1.5px solid rgba(255, 255, 255, .6);
	color: var(--rso-accent-deep, #2f6f0a);
	box-shadow: 0 22px 54px -28px rgba(0, 0, 0, .85);
}
.rso-entry.has-photo .rso-entry-option:hover, .rso-entry.has-photo .rso-entry-option:focus,
.rso-entry.no-photo .rso-entry-option:hover, .rso-entry.no-photo .rso-entry-option:focus {
	background: rgba(255, 255, 255, .97);
	border-color: var(--rso-accent, #46a500);
	color: var(--rso-accent-deep, #2f6f0a);
}
.rso-entry.has-photo .rso-entry-tx b, .rso-entry.no-photo .rso-entry-tx b { color: var(--rso-accent-deep, #2f6f0a); }
.rso-entry.has-photo .rso-entry-sub, .rso-entry.no-photo .rso-entry-sub { color: #3f5a27; }
.rso-entry.has-photo .rso-entry-ic, .rso-entry.no-photo .rso-entry-ic { background: rgba(70, 165, 0, .14); color: var(--rso-accent-deep, #2f6f0a); }
.rso-entry.has-photo .rso-entry-ch, .rso-entry.no-photo .rso-entry-ch { color: rgba(47, 111, 10, .6); }

/* Everything that sits directly on the photo is white with a shadow. */
.rso-entry.has-photo .rso-entry-note, .rso-entry.has-photo .rso-entry-foot,
.rso-entry.no-photo .rso-entry-note, .rso-entry.no-photo .rso-entry-foot { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.rso-entry.has-photo .rso-entry-browse, .rso-entry.no-photo .rso-entry-browse { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); background: rgba(255, 255, 255, .16); }
.rso-entry.has-photo .rso-entry-browse:hover, .rso-entry.no-photo .rso-entry-browse:hover { color: #fff; background: rgba(255, 255, 255, .3); }

/* The copied site footer: its own veil stays (it is what makes the legal
   type readable), its own photo layer goes — the page's picture is already
   behind it, uncut. */
.rso-entry .rso-legal-footer { flex: 0 0 auto; width: 100%; }
.rso-entry .rso-legal-footer--photo::before { display: none; }
@media (min-width: 700px) { .rso-entry.has-photo .rso-entry-hero, .rso-entry.no-photo .rso-entry-hero { padding-top: 40px; } }

/* ══ MOBILE-BG-1 · the phone gets its own picture ══════════════════════
   Owner 2026-09-13: "update the mobile background to be different, also to
   be responsive for mobile devices". A wide photo on an upright screen can
   only be cropped to its middle — which is the empty slate. So a narrow,
   upright screen takes the upright photo (when one is configured; without
   it nothing changes), and the whole welcome screen is re-proportioned for
   a phone held in one hand: the screen scrolls, nothing is cut off, and
   the two doors stay thumb-sized. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
	.rso-entry.has-photo { background-image: var(--rso-entry-photo-portrait, var(--rso-entry-photo)); }
	.rso-entry { overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.rso-entry-stage { flex: 1 0 auto; }
	.rso-entry.has-photo .rso-entry-hero, .rso-entry.no-photo .rso-entry-hero { padding: 26px 18px 6px; }
	.rso-entry.has-photo .rso-entry-logo img { width: clamp(132px, 44vw, 190px); }
	.rso-entry .rso-entry-logo.is-plain img { width: clamp(150px, 52vw, 220px); }
	.rso-entry-title { font-size: clamp(24px, 7.4vw, 32px); }
	.rso-entry-tagline { font-size: 14px; }
	.rso-entry.has-photo .rso-entry-sheet, .rso-entry.no-photo .rso-entry-sheet { padding: 4px 16px 18px; }
	.rso-entry-options { gap: 10px; margin-bottom: 12px; }
	.rso-entry-option { min-height: 76px; padding: 13px 14px 13px 12px; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: 12px; border-radius: 20px; }
	.rso-entry-ic { width: 52px; height: 52px; border-radius: 17px; }
	.rso-entry-ic svg { width: 28px; height: 28px; }
	.rso-entry-tx b { font-size: 17px; }
	.rso-entry-sub { font-size: 12.5px; }
	.rso-entry-note { font-size: 12.5px; margin-bottom: 10px; }
	.rso-entry-foot { margin-top: 12px; }
	/* The legal footer is long on a phone: let it breathe, and let the
	   payment badges wrap instead of squeezing. */
	.rso-entry .rso-legal-footer__inner { padding: 12px 14px 14px; gap: 10px; }
	.rso-entry .rso-legal-footer__row { justify-content: center; text-align: center; gap: 4px 12px; }
	.rso-entry .rso-legal-footer__nav { margin-left: 0; justify-content: center; }
}

/* A short landscape phone: the picture stays wide, the screen gets tight. */
@media (max-height: 520px) and (orientation: landscape) {
	.rso-entry.has-photo .rso-entry-hero, .rso-entry.no-photo .rso-entry-hero { padding: 16px 18px 4px; }
	.rso-entry.has-photo .rso-entry-logo img { width: clamp(110px, 18vw, 150px); }
	.rso-entry .rso-entry-logo.is-plain img { width: clamp(120px, 20vw, 170px); }
	.rso-entry-title { font-size: clamp(20px, 3.4vw, 28px); }
	.rso-entry-option { min-height: 68px; }
	.rso-entry.has-photo .rso-entry-sheet, .rso-entry.no-photo .rso-entry-sheet { padding-bottom: 14px; }
}
@media (min-width: 700px) { .rso-entry-hero { min-height: 42vh; } .rso-entry-sheet { border-radius: 40px 40px 0 0; padding: 34px 28px 32px; } .rso-entry-options { grid-template-columns: 1fr 1fr; max-width: 720px; } .rso-entry-option { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; text-align: center; padding: 30px 20px 26px; min-height: 200px; border-radius: 30px; } .rso-entry-ic { width: 76px; height: 76px; border-radius: 24px; margin-bottom: 12px; } .rso-entry-ic svg { width: 42px; height: 42px; } .rso-entry-tx b { font-size: 22px; } .rso-entry-ch { display: none; } }
@media (prefers-reduced-motion: reduce) { .rso-entry { transition: none; } .rso-entry-option { transition: none; } }

/* HOURS-HEADER-1: the day, start to finish, as the first fact. */
#rso-storefront .rso-fact-today .v { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
#rso-storefront .rso-fact-today.is-open .v { color: var(--rso-accent-deep); }
#rso-storefront .rso-fact-today.is-closed .v { color: var(--rso-danger); }
#rso-storefront .rso-fact-today .k { font-weight: 600; }

/* KIOSK-2 (alpha.67): a PORTRAIT 24/27-inch touch screen (1080 × 1920,
   sometimes 1200 × 1920). The landscape rule above keeps the basket in a
   right-hand column; upright there is no room beside a readable grid, so
   the grid takes the width in three columns, the category tabs stay
   pinned under the header, and the basket lives in the bottom bar (the
   phone's own bar, sized for a hand at arm's length). Targets ≥ 64 px:
   this screen is touched standing up. */
@media (orientation: portrait) and (min-width: 900px) {
	body.rso-kiosk #rso-storefront { font-size: 128%; }
	body.rso-kiosk #rso-storefront .rso-layout { grid-template-columns: 1fr; gap: 0; padding-bottom: 140px; }
	body.rso-kiosk #rso-storefront .rso-basket-col, body.rso-kiosk #rso-storefront .rso-basket { display: none; }
	body.rso-kiosk #rso-storefront .rso-mobile-bar { display: flex; left: 32px; right: 32px; bottom: 28px; width: calc(100% - 64px); min-height: 84px; font-size: 1.35rem; border-radius: 28px; }
	body.rso-kiosk #rso-storefront .rso-mobile-bar[hidden] { display: none; }
	body.rso-kiosk #rso-storefront .rso-cat-strip, body.rso-kiosk #rso-storefront .rso-cats { position: sticky; top: 0; z-index: 40; background: var(--rso-bg); padding: 12px 0; }
	body.rso-kiosk #rso-storefront .rso-cat-pill { font-size: 1.15rem; min-height: 64px; padding: 14px 26px; }
	body.rso-kiosk #rso-storefront .rso-product-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
	body.rso-kiosk #rso-storefront .rso-product-thumb { aspect-ratio: 1 / 1; }
	body.rso-kiosk #rso-storefront .rso-product-name { font-size: 1.3rem; }
	body.rso-kiosk #rso-storefront .rso-product-price { font-size: 1.2rem; }
	body.rso-kiosk #rso-storefront .rso-product-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	body.rso-kiosk #rso-storefront .rso-add-btn { min-height: 64px; font-size: 1.1rem; padding: 14px 28px; }
	body.rso-kiosk #rso-storefront .rso-icon-btn, body.rso-kiosk #rso-storefront .rso-chip-btn { min-height: 64px; min-width: 64px; }
	body.rso-kiosk #rso-storefront .rso-section h2 { font-size: 2rem; margin-top: 28px; }
	body.rso-kiosk #rso-storefront .rso-dialog, body.rso-kiosk #rso-storefront .rso-drawer { max-width: 900px; font-size: 1.05rem; }
	body.rso-kiosk #rso-storefront .rso-primary-btn, body.rso-kiosk #rso-storefront .rso-checkout-link { min-height: 76px; font-size: 1.25rem; }
	.rso-kiosk-idle-card { max-width: 680px; padding: 48px 40px; }
	.rso-kiosk-idle-card h2 { font-size: 2.6rem; }
}

/* ══ KIOSK-4 (alpha.70) · the self-checkout format on every screen ═════
   The owner's reference is the standard wall kiosk: a portrait screen,
   a category rail down the LEFT, a photo grid filling the rest, and one
   bar across the bottom — the sum at the left, the green button at the
   right; the card terminal and the receipt printer sit under the glass.
   That format is the kiosk on every size:
     portrait  1080 × 1920 (24" / 27" FHD)   rail 220 · 3 tiles
     portrait  1440 × 2560 (27" QHD)         rail 260 · 3 tiles, root ×1.3
     landscape 1920 × 1080 (24" / 27" FHD)   rail 240 · 3 tiles · basket pane
     landscape 2560 × 1440 (27" QHD)         rail 280 · 4 tiles · basket pane
     iPad 820 × 1180 / 1180 × 820            second priority: the phone
                                             strip upright, the rail flat.
   Web visitors never see any of this: every rule keys off body.rso-kiosk. */

/* The rail: from 1000 px up the storefront is a two-column grid — the
   category strip becomes a sticky vertical rail beside the menu. */
@media (min-width: 1000px) {
	body.rso-kiosk #rso-storefront { display: grid; grid-template-columns: var(--rso-rail-w, 220px) minmax(0, 1fr); align-items: start; }
	body.rso-kiosk #rso-storefront > .rso-topbar, body.rso-kiosk #rso-storefront > .rso-header,
	body.rso-kiosk #rso-storefront > .rso-mobile-bar, body.rso-kiosk #rso-storefront > #rso-dialog-root, body.rso-kiosk #rso-storefront > #rso-live-region { grid-column: 1 / -1; }
	body.rso-kiosk #rso-storefront > .rso-topbar { grid-row: 1; }
	body.rso-kiosk #rso-storefront > .rso-header { grid-row: 2; }
	body.rso-kiosk #rso-storefront > .rso-cat-wrap { grid-column: 1; grid-row: 3; }
	body.rso-kiosk #rso-storefront > .rso-layout { grid-column: 2; grid-row: 3; }
	body.rso-kiosk #rso-storefront .rso-cat-wrap {
		position: sticky; top: var(--rso-topbar-h, 64px); align-self: start; margin: 0;
		height: calc(100vh - var(--rso-topbar-h, 64px)); height: calc(100dvh - var(--rso-topbar-h, 64px));
		display: block; border-bottom: 0; border-right: 1px solid var(--rso-line); background: var(--rso-surface);
	}
	body.rso-kiosk #rso-storefront .rso-cat-nav { flex-direction: column; gap: 6px; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 16px 12px 120px; }
	body.rso-kiosk #rso-storefront .rso-cat-arrow { display: none; }
	body.rso-kiosk #rso-storefront .rso-cat-pill {
		width: 100%; white-space: normal; text-align: center; line-height: 1.2;
		border-radius: 18px; min-height: 76px; padding: 12px 10px; font-size: 1rem; border-color: transparent;
	}
	body.rso-kiosk #rso-storefront .rso-cat-pill[aria-current="true"] { background: #48b000; border-color: #48b000; color: #fff; }
	body.rso-kiosk #rso-storefront .rso-cat-pill:hover:not([aria-current="true"]) { background: var(--rso-surface-2); }
	body.rso-kiosk #rso-storefront .rso-layout { max-width: none; padding: 0 24px 40px; }
	body.rso-kiosk #rso-storefront .rso-topbar { margin: 0; padding: 0 24px; }
	body.rso-kiosk #rso-storefront .rso-header { padding-left: 24px; padding-right: 24px; }
	body.rso-kiosk #rso-storefront .rso-section h2 { margin-top: 20px; }
}

/* The bottom bar of the format (portrait, where no basket pane fits):
   white, full width, the sum at the left, the green button at the right. */
body.rso-kiosk #rso-storefront .rso-mobile-bar-sum { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
body.rso-kiosk #rso-storefront .rso-mobile-bar-sum strong { font-size: 1.5em; font-weight: 900; }
body.rso-kiosk #rso-storefront .rso-mobile-bar-sum small { font-size: .85em; font-weight: 600; opacity: .8; }
body.rso-kiosk #rso-storefront .rso-mobile-bar-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 32px; border-radius: 999px; background: #48b000; color: #fff; font-size: 1.05em; font-weight: 800; }
body.rso-kiosk #rso-storefront .rso-mobile-bar { justify-content: space-between; }
@media (orientation: portrait) and (min-width: 900px) {
	body.rso-kiosk #rso-storefront .rso-mobile-bar {
		left: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; min-height: 112px;
		padding: 16px 32px calc(16px + env(safe-area-inset-bottom, 0)); background: var(--rso-surface); color: var(--rso-ink);
		border-top: 1px solid var(--rso-line); box-shadow: 0 -12px 40px -24px rgba(0,0,0,.35); font-size: 1.15rem;
	}
	body.rso-kiosk #rso-storefront .rso-mobile-bar:hover, body.rso-kiosk #rso-storefront .rso-mobile-bar:active { background: var(--rso-surface); color: var(--rso-ink); }
	body.rso-kiosk #rso-storefront .rso-mobile-bar:active .rso-mobile-bar-cta { background: #3a8f00; }
	body.rso-kiosk #rso-storefront .rso-mobile-bar-cta { min-height: 76px; padding: 0 44px; font-size: 1.2em; }
	body.rso-kiosk #rso-storefront .rso-mobile-bar[hidden] { display: none; }
	body.rso-kiosk #rso-storefront .rso-layout { padding-bottom: 160px; }
	body.rso-kiosk #rso-storefront .rso-cat-nav { padding-bottom: 140px; }
}

/* Portrait FHD (1080 × 1920): rail 220, three tiles beside it. */
@media (orientation: portrait) and (min-width: 1000px) {
	body.rso-kiosk #rso-storefront { --rso-rail-w: 220px; }
	body.rso-kiosk #rso-storefront .rso-product-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	body.rso-kiosk #rso-storefront .rso-dialog, body.rso-kiosk #rso-storefront .rso-drawer { max-width: 900px; }
}
/* Portrait QHD (1440 × 2560): every rem grows a third with the root, so the
   27" upright shows the 24" screen at the same physical size. */
@media (orientation: portrait) and (min-width: 1300px) {
	html:has(body.rso-kiosk) { font-size: 21px; }
	body.rso-kiosk #rso-storefront { --rso-rail-w: 260px; font-size: 118%; }
	body.rso-kiosk #rso-storefront .rso-layout { padding: 0 32px 200px; }
	body.rso-kiosk #rso-storefront .rso-topbar { padding: 0 32px; }
	body.rso-kiosk #rso-storefront .rso-header { padding-left: 32px; padding-right: 32px; }
	body.rso-kiosk #rso-storefront .rso-product-list { gap: 24px; }
	body.rso-kiosk #rso-storefront .rso-cat-pill { min-height: 84px; }
	body.rso-kiosk #rso-storefront .rso-add-btn { min-height: 76px; padding: 16px 32px; }
	body.rso-kiosk #rso-storefront .rso-icon-btn, body.rso-kiosk #rso-storefront .rso-chip-btn { min-height: 72px; min-width: 72px; }
	body.rso-kiosk #rso-storefront .rso-stepper button { width: 68px; height: 68px; }
	body.rso-kiosk #rso-storefront .rso-choice-row { min-height: 72px; }
	body.rso-kiosk #rso-storefront .rso-choice-row input[type="checkbox"], body.rso-kiosk #rso-storefront .rso-choice-row input[type="radio"] { width: 36px; height: 36px; }
	body.rso-kiosk #rso-storefront .rso-mobile-bar { min-height: 132px; padding: 20px 40px calc(20px + env(safe-area-inset-bottom, 0)); }
	body.rso-kiosk #rso-storefront .rso-mobile-bar-cta { min-height: 88px; }
	body.rso-kiosk #rso-storefront .rso-dialog, body.rso-kiosk #rso-storefront .rso-drawer { max-width: 1200px; }
	body.rso-kiosk #rso-storefront .rso-primary-btn, body.rso-kiosk #rso-storefront .rso-checkout-link { min-height: 92px; }
	.rso-kiosk-idle-card { max-width: 820px; }
}

/* Landscape FHD (1920 × 1080): the rail, three tiles, the basket open in a
   480 px pane at the right (the bottom bar is the portrait's; here the
   basket is always in view). */
@media (orientation: landscape) and (min-width: 1500px) {
	body.rso-kiosk #rso-storefront { --rso-rail-w: 240px; font-size: 128%; }
	body.rso-kiosk #rso-storefront .rso-layout { padding: 0 40px 40px; grid-template-columns: 1fr 480px; gap: 40px; }
	body.rso-kiosk #rso-storefront .rso-topbar { padding: 0 40px; }
	body.rso-kiosk #rso-storefront .rso-header { padding-left: 40px; padding-right: 40px; }
	body.rso-kiosk #rso-storefront .rso-cat-pill { font-size: 1.05rem; min-height: 80px; }
	body.rso-kiosk #rso-storefront .rso-product-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
	body.rso-kiosk #rso-storefront .rso-product-thumb { aspect-ratio: 4 / 3; }
	body.rso-kiosk #rso-storefront .rso-product-name { font-size: 1.25rem; }
	body.rso-kiosk #rso-storefront .rso-product-price { font-size: 1.15rem; }
	body.rso-kiosk #rso-storefront .rso-product-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	body.rso-kiosk #rso-storefront .rso-add-btn { min-height: 64px; font-size: 1.1rem; padding: 14px 28px; }
	body.rso-kiosk #rso-storefront .rso-icon-btn, body.rso-kiosk #rso-storefront .rso-chip-btn { min-height: 64px; min-width: 64px; }
	body.rso-kiosk #rso-storefront .rso-section h2 { font-size: 2rem; margin-top: 28px; }
	body.rso-kiosk #rso-storefront .rso-basket { padding: 28px; font-size: 1.1rem; top: calc(var(--rso-topbar-h, 80px) + 100px); max-height: calc(100vh - var(--rso-topbar-h, 80px) - 120px); }
	body.rso-kiosk #rso-storefront .rso-basket h2 { font-size: 1.7rem; }
	body.rso-kiosk #rso-storefront .rso-basket-line-name { font-size: 1.15rem; }
	body.rso-kiosk #rso-storefront .rso-basket-line-price { font-size: 1.1rem; }
	body.rso-kiosk #rso-storefront .rso-stepper button { width: 60px; height: 60px; }
	body.rso-kiosk #rso-storefront .rso-dialog, body.rso-kiosk #rso-storefront .rso-drawer { max-width: 900px; font-size: 1.05rem; }
	/* A 3:2 photo at 900 px would eat 600 of the 1080 px: cap it so the
	   options and the Add button stay on the glass without scrolling. */
	body.rso-kiosk #rso-storefront .rso-dialog-has-hero .rso-dialog-hero-img { aspect-ratio: auto; height: min(34vh, 380px); }
	body.rso-kiosk #rso-storefront .rso-primary-btn, body.rso-kiosk #rso-storefront .rso-checkout-link { min-height: 76px; font-size: 1.25rem; }
	.rso-kiosk-idle-card { max-width: 680px; padding: 48px 40px; }
	.rso-kiosk-idle-card h2 { font-size: 2.6rem; }
}
/* Landscape QHD (2560 × 1440): four tiles, a wider pane, the root a third up. */
@media (orientation: landscape) and (min-width: 2200px) {
	html:has(body.rso-kiosk) { font-size: 21px; }
	body.rso-kiosk #rso-storefront { --rso-rail-w: 280px; font-size: 118%; }
	body.rso-kiosk #rso-storefront .rso-layout { grid-template-columns: 1fr 560px; padding: 0 56px 56px; }
	body.rso-kiosk #rso-storefront .rso-topbar { padding: 0 56px; }
	body.rso-kiosk #rso-storefront .rso-header { padding-left: 56px; padding-right: 56px; }
	body.rso-kiosk #rso-storefront .rso-product-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
	body.rso-kiosk #rso-storefront .rso-cat-pill { min-height: 88px; }
	body.rso-kiosk #rso-storefront .rso-add-btn { min-height: 76px; }
	body.rso-kiosk #rso-storefront .rso-stepper button { width: 68px; height: 68px; }
	body.rso-kiosk #rso-storefront .rso-choice-row { min-height: 72px; }
	body.rso-kiosk #rso-storefront .rso-choice-row input[type="checkbox"], body.rso-kiosk #rso-storefront .rso-choice-row input[type="radio"] { width: 36px; height: 36px; }
	body.rso-kiosk #rso-storefront .rso-dialog, body.rso-kiosk #rso-storefront .rso-drawer { max-width: 1100px; }
	body.rso-kiosk #rso-storefront .rso-dialog-has-hero .rso-dialog-hero-img { height: min(34vh, 480px); }
	body.rso-kiosk #rso-storefront .rso-primary-btn, body.rso-kiosk #rso-storefront .rso-checkout-link { min-height: 88px; }
}
/* iPad portrait (820): the phone strip stays on top, two tiles, 56 px targets. */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 999px) {
	body.rso-kiosk #rso-storefront .rso-cat-pill { min-height: 56px; }
	body.rso-kiosk #rso-storefront .rso-mobile-bar { min-height: 68px; font-size: 1.05rem; left: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0)); background: var(--rso-surface); color: var(--rso-ink); border-top: 1px solid var(--rso-line); }
	body.rso-kiosk #rso-storefront .rso-mobile-bar:hover, body.rso-kiosk #rso-storefront .rso-mobile-bar:active { background: var(--rso-surface); color: var(--rso-ink); }
	body.rso-kiosk #rso-storefront .rso-mobile-bar-cta { min-height: 56px; }
	body.rso-kiosk #rso-storefront .rso-layout { padding-bottom: 120px; }
	body.rso-kiosk #rso-storefront .rso-dialog, body.rso-kiosk #rso-storefront .rso-drawer { max-width: 720px; }
}
/* iPad landscape (1180): the rail at 200, two tiles beside the basket pane. */
@media (orientation: landscape) and (min-width: 1000px) and (max-width: 1499px) {
	body.rso-kiosk #rso-storefront { --rso-rail-w: 200px; }
	body.rso-kiosk #rso-storefront .rso-layout { grid-template-columns: 1fr 340px; gap: 24px; padding: 0 20px 40px; }
	body.rso-kiosk #rso-storefront .rso-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.rso-kiosk #rso-storefront .rso-cat-pill { min-height: 64px; font-size: .95rem; }
}