/*
 * 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; }
body.rso-kiosk #rso-storefront .rso-stepper span { min-width: 48px; min-height: 48px; }
@media (min-width: 1500px) { 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); }
/* 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));
}
#rso-storefront .rso-mobile-bar:hover, #rso-storefront .rso-mobile-bar:active { background: var(--rso-ink); color: var(--rso-bg); }
@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%); }
.rso-entry-hero.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,8,.05) 0%, rgba(20,14,8,.28) 55%, rgba(20,14,8,.72) 100%); }
.rso-entry-hero-inner { position: relative; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); 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; }
@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; }