/* ===========================================================
Orderzy Design System Preview. Shared styles for preview/*.html
Standalone: no Bootstrap, no framework. Pure CSS + Google Fonts.
This file is the de-facto draft of what `orderzy-modern.css` would
look like after the Step 1 token migration from Section 10.
=========================================================== */
/* ---------- Self-hosted fonts ----------
Fix for Windows 7 desktops that shipped with a pre-KB-2729094 Segoe UI
cut without the rupee glyph (U+20B9). base.html still loads the same
families from Google Fonts (parallel path, CDN-cached for everyone else);
these @font-face blocks give the browser a same-origin fallback that
works offline, behind corporate DNS, and on legacy Win7 rigs. `local()`
is listed first so if the OS already has Inter installed, that gets used
(zero payload); otherwise the vendored TTF loads. `font-display: swap`
ensures text renders in the system fallback while the file arrives, so
there's no invisible-text flash. Files are the same TTFs reportlab uses
for the PDF bill (see orders/fonts.py) - one source of truth per weight.
------------------------------ */
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: normal;
font-display: swap;
src: local('Inter Regular'), local('Inter'),
url("/static/fonts/Inter-Regular.4145168e5230.ttf") format('truetype');
}
@font-face {
font-family: 'Inter';
font-weight: 500;
font-style: normal;
font-display: swap;
src: local('Inter Medium'),
url("/static/fonts/Inter-Medium.a6f54808ec0a.ttf") format('truetype');
}
@font-face {
font-family: 'Inter';
font-weight: 700;
font-style: normal;
font-display: swap;
src: local('Inter Bold'),
url("/static/fonts/Inter-Bold.c7b5fabc34e7.ttf") format('truetype');
}
@font-face {
font-family: 'Inter';
font-weight: 400;
font-style: italic;
font-display: swap;
src: local('Inter Italic'),
url("/static/fonts/Inter-Italic.2247b87d078d.ttf") format('truetype');
}
@font-face {
font-family: 'DM Serif Display';
font-weight: 400;
font-style: normal;
font-display: swap;
src: local('DM Serif Display'),
url("/static/fonts/DM-Serif-Display-Regular.2312ec57b28b.ttf") format('truetype');
}
@font-face {
font-family: 'DM Serif Display';
font-weight: 400;
font-style: italic;
font-display: swap;
src: local('DM Serif Display Italic'),
url("/static/fonts/DM-Serif-Display-Italic.2cfd6017cc5c.ttf") format('truetype');
}
/* ---------- Tokens ----------
Post-Luxe-unification (2026-08-14): the former Luxe token block (previously
scoped to `body.theme-luxe`) merged into :root. Every surface now renders on
the single unified token set. Historical values from both eras noted inline
where they differed. Wordmark orange is preserved as the Orderzy brand anchor.
------------------------------ */
:root {
/* Brand (Orderzy wordmark + brand anchor; never per-outlet-tinted) */
--orderzy-brand: #f28500;
--orderzy-brand-deep: #b86600;
--orderzy-brand-hover: #965200;
--orderzy-brand-soft: #fef1e0;
--orderzy-brand-ink: #7a4500;
/* Surface */
--orderzy-canvas: #fdfbf7; /* was #faf8f4 pre-unification */
--orderzy-surface: #ffffff;
--orderzy-surface-alt: #f6f0e6; /* was #f3efe8 */
/* L18: --orderzy-surface-sand aliases --orderzy-border. Existing consumers
stay stable; future code should prefer --orderzy-border directly. */
--orderzy-surface-sand: var(--orderzy-border);
/* Text */
--orderzy-ink: #1a1815; /* was #1f1d1a */
--orderzy-ink-soft: #6b6760; /* was #5e5d59 */
--orderzy-ink-muted: #9a948b; /* was #87867f */
--orderzy-ink-invert: #fdfbf7; /* was #faf9f5 */
/* Borders */
--orderzy-border: #ede5d7; /* was #ebe5da */
--orderzy-border-soft: rgba(26,24,21,0.08);
--orderzy-border-strong: #d4cdc0;
/* Semantic */
--orderzy-success: #4a6b3a; /* was #1f9d55, Luxe muted */
--orderzy-success-soft: #e3f5ea;
--orderzy-warning: #a17a3a; /* was #c9820a */
--orderzy-warning-soft: #faf0dc;
--orderzy-danger: #8b3a3a; /* was #b53333 */
--orderzy-danger-soft: #fae5e3;
/* Per-brand accent (set by in base.html
when brand.accent_hex is set; otherwise falls through to Orderzy orange so
no-accent brands still feel like Orderzy restaurants). */
--accent: var(--orderzy-brand-deep);
--accent-hover: color-mix(in srgb, var(--accent) 88%, #000);
--accent-contrast: #fdfbf7;
--badge-veg: #4a6b3a;
--badge-nonveg: #8b3a3a;
/* Shadows (Luxe: barely-there) */
--orderzy-shadow-card: 0 2px 8px rgba(0,0,0,0.04);
--orderzy-shadow-lift: 0 8px 24px rgba(0,0,0,0.06);
--orderzy-shadow-whisper: 0 16px 48px rgba(0,0,0,0.08);
--shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
--shadow-medium: 0 8px 24px rgba(0,0,0,0.06);
--shadow-strong: 0 16px 48px rgba(0,0,0,0.08);
/* Radii: production aliases + STYLEGUIDE names */
--r-xs: 4px;
--r-sm: 4px; /* was 8px */
--r-md: 8px; /* was 12px */
--r-lg: 12px; /* was 20px */
--r-pill: 9999px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
/* Borders (composite shorthands) */
--border-thin: 1px solid var(--orderzy-border);
--border-emphasis: 1px solid var(--accent);
/* P4.C09 (2026-08-15): canonical breakpoint tokens.
CSS custom properties CANNOT be used inside `@media (max-width: …)`
conditions (the spec resolves `var()` only in a declaration context),
so the tokens below function as documentation + consistency anchors
for anyone editing the file. When adding a new media query, prefer
the four canonical widths below unless the design genuinely needs a
one-off breakpoint; if it does, add a comment explaining why. Current
one-off widths that the site still ships with, and what they map to:
360, 400, 420, 480, 540, 560 → mobile (canonical 520)
620, 640, 720 → tablet (canonical 768)
767 → tablet-minus-one; treat as 768
840, 880 → desktop (canonical 1024)
Migrating each one-off to its canonical bucket is a follow-up: the
regressions from re-flowing every layout are wider than a single-phase
cleanup can safely land, so leave existing rules alone and start
fresh rules on the canonical set.
*/
--bp-mobile: 520px;
--bp-tablet: 768px;
--bp-desktop: 1024px;
--bp-wide: 1440px;
/* Type */
--font-heading: "DM Serif Display", Georgia, serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-display: "DM Serif Display", Georgia, serif;
--font-mono: "Inter", ui-monospace, monospace;
/* Type scale: fluid clamp() on the 5 biggest tokens so type scales
smoothly from phone (540px) → desktop (1200px) instead of jumping at
the 768px breakpoint. */
--text-display: clamp(56px, calc(56px + (100vw - 540px) * 24 / 660), 80px);
--text-h1: clamp(40px, calc(40px + (100vw - 540px) * 16 / 660), 56px);
--text-h2: clamp(32px, calc(32px + (100vw - 540px) * 8 / 660), 40px);
--text-h3: clamp(24px, calc(24px + (100vw - 540px) * 4 / 660), 28px);
--text-h4: clamp(20px, calc(20px + (100vw - 540px) * 2 / 660), 22px);
--text-body: 17px;
--text-small: 15px;
--text-caption: 13px;
--text-label: 13px; /* ALL-CAPS, pair with --tracking-wide */
--text-price: 22px; /* tabular-nums */
/* Line-height */
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
--leading-loose: 1.85;
/* Letter-spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.12em;
--tracking-wider: 0.18em;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--space-9: 128px;
--space-section: 128px; /* between menu courses */
--space-page-x: 64px; /* desktop page margin; 24px mobile (see @media) */
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* signature */
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* entering view */
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* leaving view */
--dur-fast: 180ms; /* was 120ms */
--dur-med: 320ms; /* was 200ms */
--duration-fast: 180ms;
--duration-base: 320ms;
--duration-slow: 600ms;
/* Focus ring (WCAG 2.4.7): reads per-brand accent */
--focus-ring: var(--accent);
/* ---------- z-index scale (Phase C, 2026-08-29) ----------
Single source of truth for cross-component stacking. Before this
scale, orderzy.css had 35 raw z-index literals ranging from -1 to
99999 !important, chosen ad hoc by different authors. Every author
picked a number without seeing every other author's number, and
the drawer-hidden-behind-chip-strip bug (audit Z-01 / 2026-08-29)
was the direct consequence.
Rules going forward:
- New z-index values MUST use one of these tokens.
- Component-internal micro-layering (z-index: -1 / 0 / 1 / 2 for a
card's own overlay, a badge on a media block, etc.) MAY stay as
raw numbers because they never collide with cross-component
layers. Anything >= 30 or with !important MUST use a token.
- The grep guard test in tests/regression/test_z_index_tokens.py
enforces this rule.
Bug fix stack order (top -> bottom, top wins):
tooltip-escape (skip link, tooltip) > modal > modal-backdrop >
toast > get-bill-sticky > fab > drawer > drawer-backdrop >
nav-dropdown-inline (user menu, notif dropdown) > nav >
sticky-strip (chip strip - BELOW nav so it does not hide the
drawer) > sticky-course-open > sticky-course > sticky-cart-bar >
sticky-hero > raised > base > below.
-------------------------------------------------- */
--z-below: -1;
--z-base: 0;
--z-raised: 2;
--z-sticky-hero: 30;
--z-sticky-cart-bar: 40;
--z-sticky-course: 40;
--z-sticky-strip: 45;
--z-nav: 50;
--z-nav-dropdown-inline: 60;
--z-sticky-course-open: 80;
--z-drawer-backdrop: 1000;
--z-drawer: 1010;
--z-fab: 1100;
--z-getbill-sticky: 1120;
--z-toast: 1200;
--z-modal-backdrop: 1300;
--z-modal: 1310;
--z-tooltip-escape: 1400;
/* 2026-08-31: fixed-position browser-level nudges. These sit above
every in-app overlay because they instruct the operator to leave the
app (grant notification perm, install PWA). Stack order (top wins):
kitchen-banner > notif-nag > pwa-nudge > audio-nudge.
audio-nudge is the first-load "tap to enable sound" pill from the
ring-reliability autoplay fallback; it sits under the two blue action
prompts so the more actionable nudges are always on top when they
co-occur. */
--z-audio-nudge: 1490;
--z-pwa-nudge: 1500;
--z-notif-nag: 1510;
--z-kitchen-banner: 1520;
/* Navbar height. Consumed by .oz-nav__drawer (fixed positioning below
the nav after Phase C reparenting, 2026-08-29). Kept as a root token
so the drawer can position itself without probing the DOM. Mobile
value is 56px, set in the @media (max-width: 768px) block below. */
--oz-nav-h: 72px;
}
/* Mobile type-scale + page-margin adjustments. The 5 biggest type tokens
(--text-display, --text-h1..h4) use clamp() in :root above; this media
query handles the remaining non-fluid sizes plus spacing tightens:
128px between courses reads as too-much-air on a phone. */
@media (max-width: 768px) {
:root {
--text-body: 16px;
--text-price: 20px;
--space-page-x: 24px;
--space-section: 64px;
--space-5: 24px;
--oz-nav-h: 56px;
}
}
/* RA-0 M5: respect prefers-reduced-motion. Suppresses long animations and
transitions for users who set OS-level reduced motion. The carousel
autoplay is also gated separately in JS at restaurant__detail.html. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* M22: skip-to-content link. Hidden until focused, then surfaces top-left. */
.skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: var(--z-tooltip-escape);
padding: 10px 16px;
background: var(--orderzy-ink);
color: var(--orderzy-ink-invert);
font-family: var(--font-body);
font-weight: 600;
border-radius: var(--r-sm);
text-decoration: none;
transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
top: 8px;
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* ---------- Link reset for UI patterns ----------
Browsers underline every by default. That's the right behavior for
inline body-prose links, but wrong for nav items, buttons, chips, cards,
and other UI surfaces where the link is just the click target. We list
every UI-link class here so per-class rules don't keep forgetting it.
Body-prose links keep their underline via .mk-ar-prose / .mk-prose:hover
rules further down. */
.btn,
.adm-btn,
.adm-chip,
.adm-table__row-link,
.auth-field__link,
.btn-cancel,
.cart-add-more,
.cart-bar__cta,
.contact-edit-link,
.cust-nav__item,
.filter-chip,
.mb-cat,
.mini-cart,
.mk-bl-card__media,
.mk-cl-nearby__chip,
.mo-btn-sm,
.mo-filter,
.oz-nav__cart,
.oz-nav__link,
.oz-nav__link--muted,
.oz-nav__link--restaurant,
.oz-nav__user,
.oz-wordmark,
.pos-back-btn,
.r-btn,
.rest-card {
text-decoration: none;
}
/* Reset: Bootstrap handles box-sizing and base styles.
We only enforce Orderzy-specific body defaults. */
/* 2026-08-26 viewport hardening: any ![]()
without an explicit inline
width constraint must never overflow its container. `max-width:100%`
caps the rendered width to the parent; `height:auto` preserves aspect
ratio (safe with HTML `width`/`height` attrs because the browser uses
the CSS `height:auto` alongside the intrinsic ratio implied by those
attrs). Icon-sized images with explicit `width="64" height="64"`
still render at 64x64 because max-width only clamps larger images,
never enlarges below the intrinsic size. */
img { max-width: 100%; height: auto; }
/* 2026-09-01 layout fix: reserve the vertical scrollbar gutter on every
page so a short view (e.g. clicking Non-veg on an outlet with 1 non-veg
item) does not cause a ~15px horizontal jump when the scrollbar
disappears. `scrollbar-gutter: stable` is supported on Chrome 94+ /
Firefox 97+ / Safari 18.2+ (Feb 2025). On older browsers the property
is silently ignored and the layout falls back to today's behaviour -
no worse than pre-fix. */
html {
scrollbar-gutter: stable;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--orderzy-ink);
background: var(--orderzy-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#main-content { flex: 1 0 auto; }
.oz-footer { flex-shrink: 0; }
h1, h2, h3, h4, h5 {
font-family: var(--font-heading);
color: var(--orderzy-ink);
margin: 0;
letter-spacing: -0.01em;
}
.num, .price, .total { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* ---------- Layout helpers ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.stack-lg > * + * { margin-top: 24px; }
.stack-md > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
/* ---------- Navbar ---------- */
.oz-nav {
position: sticky;
top: 0;
z-index: var(--z-nav);
background: rgba(250,248,244,0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--orderzy-border-soft);
}
.oz-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.oz-wordmark {
font-family: "Playfair Display", "DM Serif Display", Georgia, serif;
font-weight: 800;
font-size: 26px;
letter-spacing: 0;
color: var(--orderzy-brand);
line-height: 1;
}
.oz-nav__links {
display: flex;
align-items: center;
gap: 28px;
}
.oz-nav__link {
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
color: var(--orderzy-ink);
transition: color var(--dur-fast) var(--ease);
}
.oz-nav__link:hover { color: var(--orderzy-brand); }
.oz-nav__link--restaurant {
color: var(--orderzy-ink);
padding: 8px 14px;
border-radius: var(--r-sm);
border: 1px solid var(--orderzy-border-strong);
transition: all var(--dur-fast) var(--ease);
}
.oz-nav__link--restaurant:hover {
background: var(--orderzy-brand-soft);
border-color: var(--orderzy-brand);
color: var(--orderzy-brand-ink);
}
.oz-nav__cart {
position: relative;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--r-pill);
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
color: var(--orderzy-ink);
transition: all var(--dur-fast) var(--ease);
}
.oz-nav__cart:hover { border-color: var(--orderzy-ink); }
.oz-nav__cart-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
/* Brighter orange (brand) for the cart badge so it reads clearly distinct
from the bell's red danger badge - the two used to share a similar
dark tone, creating an unintentional visual rhyme. */
background: var(--orderzy-brand);
color: #fff;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 700;
display: grid;
place-items: center;
padding: 0 5px;
border: 2px solid var(--orderzy-canvas);
}
.oz-nav__cart-badge.hidden { display: none; }
.oz-nav__cart--empty { opacity: 0.5; }
.oz-nav__link--muted {
font-size: 14px;
font-weight: 600;
color: var(--orderzy-ink-muted);
transition: color var(--dur-fast) var(--ease);
}
.oz-nav__link--muted:hover { color: var(--orderzy-danger); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
padding: 12px 20px;
border-radius: var(--r-sm);
border: 1px solid transparent;
transition: all var(--dur-fast) var(--ease);
text-align: center;
white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
background: var(--orderzy-brand-deep);
color: #fff;
box-shadow: 0 1px 2px rgba(31,29,26,0.1);
}
.btn--primary:hover {
background: var(--orderzy-brand-hover);
box-shadow: var(--orderzy-shadow-lift);
}
/* FE1-5: .btn--ink removed - unused in production templates. */
.btn--secondary {
background: var(--orderzy-surface-sand);
color: var(--orderzy-ink);
border-color: var(--orderzy-border);
}
.btn--secondary:hover { background: var(--orderzy-border-strong); }
.btn--ghost {
background: transparent;
color: var(--orderzy-ink);
}
.btn--ghost:hover { color: var(--orderzy-brand); }
/* FE1-3: shared disabled states for buttons + inputs */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
background: inherit;
color: inherit;
transform: none;
}
.input:disabled,
.input[aria-disabled="true"] {
background: var(--orderzy-surface-alt);
color: var(--orderzy-ink-muted);
cursor: not-allowed;
border-color: var(--orderzy-border);
}
.btn--large {
font-size: 17px;
padding: 14px 26px;
}
.btn--block { width: 100%; }
/* ---------- Status pill ---------- */
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.pill--success { background: var(--orderzy-success-soft); color: var(--orderzy-success); }
.pill--warn { background: var(--orderzy-warning-soft); color: var(--orderzy-warning); }
.pill--brand { background: var(--orderzy-brand-soft); color: var(--orderzy-brand-ink); }
.pill--closed { background: var(--orderzy-surface-alt); color: var(--orderzy-ink-muted); }
/* Variant for status pills laid over hero photos. Solid semi-opaque white
surface + strong shadow + frosted backdrop so the pill reads against ANY
underlying photography (bright food, dark interiors, varied compositions).
Text color is forced dark; the colored status dot via ::before stays
theme-aware (success green / closed grey). FE0 follow-up 2026-06-02:
strengthened from blur(2px) + soft shadow which faded on bright photos. */
.pill--on-photo {
background: rgba(255,255,255,0.92) !important;
color: var(--orderzy-ink) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
border: 1px solid rgba(255,255,255,0.6);
}
/* Status dot picks up the variant color even though text is dark. */
.pill--on-photo.pill--success::before { background: var(--orderzy-success); }
.pill--on-photo.pill--warn::before { background: var(--orderzy-warning); }
.pill--on-photo.pill--brand::before { background: var(--orderzy-brand-ink); }
.pill--on-photo.pill--closed::before { background: var(--orderzy-ink-muted); }
.pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ---------- Trust badge ---------- */
.trust-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
color: var(--orderzy-ink-soft);
font-size: 13px;
font-weight: 600;
}
.trust-badge__icon {
width: 14px;
height: 14px;
color: var(--orderzy-brand);
}
/* ---------- Inputs ---------- */
.input {
width: 100%;
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border-strong);
border-radius: var(--r-sm);
padding: 12px 14px;
font: inherit;
color: var(--orderzy-ink);
transition: all var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--orderzy-ink-muted); }
.input:focus {
outline: none;
border-color: var(--orderzy-brand);
box-shadow: 0 0 0 3px var(--orderzy-brand-soft);
}
.input-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--orderzy-ink);
margin-bottom: 6px;
}
/* ---------- Search bar (hero) ---------- */
.search-bar {
display: flex;
align-items: center;
gap: 8px;
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-pill);
padding: 6px 6px 6px 18px;
box-shadow: var(--orderzy-shadow-card);
max-width: 480px;
}
.search-bar__icon {
width: 18px;
height: 18px;
color: var(--orderzy-ink-muted);
flex-shrink: 0;
}
.search-bar__input {
flex: 1;
border: none;
background: transparent;
font: inherit;
outline: none;
color: var(--orderzy-ink);
padding: 10px 0;
}
.search-bar__input::placeholder { color: var(--orderzy-ink-muted); }
.search-bar__btn {
background: var(--orderzy-brand-deep);
color: #fff;
border: none;
width: 42px;
height: 42px;
border-radius: var(--r-pill);
display: grid;
place-items: center;
transition: background var(--dur-fast) var(--ease);
}
.search-bar__btn:hover { background: var(--orderzy-brand-hover); }
/* ---------- Quick-search chips below hero search bar ---------- */
/* P1.C05.hotfix (2026-08-16): dropped the max-width: 480px cap. It was sized
for a phantom left column that disappeared when the phone mock retired,
which forced any sixth (or wide-labelled) chip to wrap onto a second row
on desktop. The row now uses whatever horizontal space the hero column
offers; the hero__grid rules gate the actual width. */
.search-suggest {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.search-suggest__chip {
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-pill);
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
color: var(--orderzy-ink);
cursor: pointer;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
font-family: inherit;
}
.search-suggest__chip:hover {
background: var(--orderzy-brand-soft);
border-color: var(--orderzy-brand);
color: var(--orderzy-brand-ink);
}
.search-suggest__chip:focus-visible {
outline: 2px solid var(--orderzy-brand);
outline-offset: 2px;
}
/* ---------- Card (Airbnb-style restaurant listing) ---------- */
.rest-card {
background: var(--orderzy-surface);
border-radius: var(--r-lg);
box-shadow: var(--orderzy-shadow-card);
overflow: hidden;
transition: box-shadow var(--dur-med) var(--ease);
display: flex;
flex-direction: column;
}
.rest-card:hover { box-shadow: var(--orderzy-shadow-lift); }
.rest-card--closed { opacity: 0.65; }
.rest-card--closed .rest-card__media img { filter: grayscale(40%); }
/* =========== Marketplace browse header =========== */
.browse-head {
padding: 32px 0 8px;
background: var(--orderzy-canvas);
position: sticky;
top: 72px;
z-index: var(--z-sticky-hero);
border-bottom: 1px solid var(--orderzy-border-soft);
}
.browse-head__search {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 18px;
}
.browse-head__search .search-bar { flex: 1; min-width: 260px; margin: 0; }
.browse-head__location {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-sm);
padding: 10px 14px;
font-size: 14px;
color: var(--orderzy-ink);
font-weight: 600;
}
.browse-head__location svg { color: var(--orderzy-brand); width: 16px; height: 16px; }
.browse-head__location-change {
color: var(--orderzy-brand-ink);
font-size: 12px;
font-weight: 700;
margin-left: 4px;
border-left: 1px solid var(--orderzy-border);
padding-left: 10px;
background: none;
border-top: none;
border-right: none;
border-bottom: none;
cursor: pointer;
}
.filter-row {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 4px 0 16px;
scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--r-pill);
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
color: var(--orderzy-ink);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: all var(--dur-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--orderzy-ink); }
.filter-chip.is-active {
background: var(--orderzy-ink);
color: var(--orderzy-ink-invert);
border-color: var(--orderzy-ink);
}
.filter-chip:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.filter-chip:disabled:hover { border-color: var(--orderzy-border); }
.filter-chip__dot { width: 8px; height: 8px; border-radius: 50%; }
.filter-chip__dot--veg { background: #1f9d55; }
.filter-chip__dot--nonveg { background: #b53333; }
.results-head {
padding: 20px 0 12px;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.results-head__count { font-size: 15px; color: var(--orderzy-ink-soft); }
.results-head__count strong { color: var(--orderzy-ink); }
.results-head__sort { font-size: 14px; color: var(--orderzy-ink-soft); }
.results-head__sort strong { color: var(--orderzy-ink); font-weight: 700; }
@media (max-width: 520px) {
.browse-head { top: 56px; padding: 16px 0 4px; }
.browse-head__search { margin-bottom: 12px; }
.results-head { padding: 14px 0 10px; }
}
.rest-card__media {
aspect-ratio: 16 / 10;
background: var(--orderzy-surface-alt);
position: relative;
overflow: hidden;
}
.rest-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rest-card__badge {
position: absolute;
top: 12px;
left: 12px;
}
/* CTA row at the foot of the card. Both CTAs sit above the stretched-link
overlay (z-index:2) so they receive their own clicks. View menu is primary
(outlined, brand-ink), Book a table is secondary text-link. */
.rest-card__ctas {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 12px;
}
.rest-card__view-cta {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 1px solid var(--orderzy-brand-ink);
border-radius: 9999px;
color: var(--orderzy-brand-ink);
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
text-decoration: none;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rest-card__view-cta:hover {
background: var(--orderzy-brand-ink);
color: #fff;
}
.rest-card__book-cta {
display: inline-flex;
align-items: center;
padding: 8px 12px;
color: var(--orderzy-ink-muted);
font-family: var(--font-heading);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
.rest-card__book-cta:hover {
color: var(--orderzy-brand-ink);
text-decoration: underline;
text-underline-offset: 4px;
}
/* 2026-09-13 Get directions on the card. Soft-pill chip. Kept visually
lighter than See menu (primary conversion) and Book a table (secondary
conversion) because Directions is a leave-the-site utility action.
Mirrors the detail-page `.oz-directions-link` treatment for recognition. */
.rest-card__directions-cta {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: var(--orderzy-brand-soft);
color: var(--orderzy-brand-ink);
border-radius: 9999px;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
text-decoration: none;
line-height: 1;
white-space: nowrap;
}
.rest-card__directions-cta:hover {
background: var(--orderzy-brand-ink);
color: #fff;
}
.rest-card__body { padding: 14px 18px 18px; }
.rest-card__title {
font-size: 18px;
font-weight: 700;
color: var(--orderzy-ink);
margin: 0 0 4px;
}
.rest-card__meta {
font-size: 14px;
color: var(--orderzy-ink-soft);
line-height: 1.4;
/* 2026-08-28 audit F.19: allow the meta line to wrap to two lines before
ellipsis so a real address like "142 MG Road, Chhatarpur, Madhya
Pradesh" isn't cut at 30 chars while the card has room. The template
still truncates the raw string at a safe upper bound so runaway
content can't push the card taller than its neighbours. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rest-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--orderzy-border);
}
.rest-card__price {
font-size: 14px;
color: var(--orderzy-ink-soft);
}
.rest-card__rating {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 600;
color: var(--orderzy-ink);
}
/* ---------- Hero ---------- */
.hero {
padding: 48px 0 64px;
}
.hero__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
.hero__eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--orderzy-brand-ink);
background: var(--orderzy-brand-soft);
padding: 5px 12px;
border-radius: var(--r-pill);
margin-bottom: 20px;
}
.hero__headline {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--orderzy-ink);
margin: 0 0 16px;
}
.hero__headline-accent { color: var(--orderzy-brand); }
.hero__subline {
font-size: 18px;
color: var(--orderzy-ink-soft);
line-height: 1.55;
max-width: 480px;
margin: 0 0 28px;
}
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 28px;
}
/* ---------- Hero location pill (three-state, no CLS) ---------- */
/* P1.C05.hotfix (2026-08-16). Before this pass the pill was styled inline on
the element itself (a hostile pattern for CSP nonces) and always mounted
the Change button, so the "Add your location" state read as the literal
string "Add your location Change" - two labels smoothed together with no
affordance. State-machine is now data-state-driven and Change only shows
when there is a real location to change AWAY FROM. */
.search-bar__location {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-pill);
padding: 8px 14px;
font-size: 13px;
color: var(--orderzy-ink);
font-weight: 600;
min-height: 36px;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.search-bar__location:hover { border-color: var(--orderzy-border-strong); }
.search-bar__location svg { color: var(--orderzy-brand); flex-shrink: 0; }
.search-bar__location .location-refresh {
color: var(--orderzy-brand-ink);
font-size: 12px;
font-weight: 700;
border: none;
background: none;
cursor: pointer;
border-left: 1px solid var(--orderzy-border);
padding: 2px 0 2px 10px;
margin-left: 4px;
font-family: inherit;
transition: color var(--dur-fast) var(--ease);
}
.search-bar__location .location-refresh:hover { color: var(--orderzy-brand); }
.search-bar__location .location-refresh:focus-visible {
outline: 2px solid var(--orderzy-brand);
outline-offset: 2px;
border-radius: 4px;
}
/* Detecting: no Change button (nothing to change from). */
.search-bar__location[data-state="detecting"] .location-refresh { display: none; }
.search-bar__location[data-state="detecting"] { color: var(--orderzy-ink-muted); }
/* Add: whole pill is the affordance; no trailing Change button. */
.search-bar__location[data-state="add"] .location-refresh { display: none; }
.search-bar__location[data-state="add"] {
cursor: pointer;
color: var(--orderzy-brand-ink);
border-color: var(--orderzy-brand-soft);
background: var(--orderzy-brand-soft);
}
.search-bar__location[data-state="add"]:hover {
background: var(--orderzy-surface);
border-color: var(--orderzy-brand);
}
/* ---------- Phone mockup ---------- */
.phone {
position: relative;
width: 300px;
margin: 0 auto;
aspect-ratio: 300 / 620;
background: var(--orderzy-ink);
border-radius: 44px;
padding: 10px;
box-shadow: var(--orderzy-shadow-whisper),
0 40px 80px -20px rgba(31,29,26,0.25);
}
.phone__screen {
width: 100%;
height: 100%;
background: var(--orderzy-canvas);
border-radius: 34px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.phone__notch {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 88px;
height: 22px;
background: var(--orderzy-ink);
border-radius: 16px;
z-index: 2;
}
.phone__status {
padding: 16px 22px 6px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
font-weight: 700;
color: var(--orderzy-ink);
z-index: 1;
}
.phone__body {
flex: 1;
padding: 6px 14px 14px;
overflow: hidden;
}
.phone__rest-header {
padding: 8px 6px 14px;
border-bottom: 1px solid var(--orderzy-border);
margin-bottom: 12px;
}
.phone__rest-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
color: var(--orderzy-ink);
margin: 0;
}
.phone__rest-meta {
font-size: 11px;
color: var(--orderzy-ink-soft);
margin-top: 2px;
}
.phone__item {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--orderzy-border-soft);
}
.phone__item:last-child { border-bottom: 0; }
.phone__item-img {
width: 58px;
height: 58px;
flex-shrink: 0;
background: var(--orderzy-surface-alt);
border-radius: var(--r-md);
overflow: hidden;
}
.phone__item-img img { width: 100%; height: 100%; object-fit: cover; }
.phone__item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.phone__item-title {
font-size: 12.5px;
font-weight: 700;
color: var(--orderzy-ink);
line-height: 1.25;
margin: 0;
}
.phone__item-desc {
font-size: 10.5px;
color: var(--orderzy-ink-muted);
line-height: 1.3;
margin: 2px 0 0;
}
.phone__item-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
}
.phone__item-price {
font-weight: 700;
font-size: 12px;
color: var(--orderzy-ink);
}
.phone__item-add {
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--r-xs);
background: var(--orderzy-brand-deep);
color: #fff;
border: none;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* P1.C05.hotfix.r4 (2026-08-16). The stepper used to render as one text run
("− 1 +") which read as a cramped, ambiguous glyph string.
Unpacked into three balanced sub-elements: .phone__item-qty-btn for - / +
(bolder glyphs sized as buttons) and .phone__item-qty-num for the count
(tabular numeral so it stays aligned as it grows past 9). Vertical hairline
dividers between the three cells mirror the real product's .qty-stepper
shape without pretending to be interactive. */
.phone__item-qty {
display: inline-flex;
align-items: stretch;
font-weight: 700;
border-radius: var(--r-xs);
border: 1px solid var(--orderzy-brand);
color: var(--orderzy-brand-ink);
background: var(--orderzy-brand-soft);
overflow: hidden;
line-height: 1;
}
.phone__item-qty-btn,
.phone__item-qty-num {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 0;
min-width: 22px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1;
color: var(--orderzy-brand-ink);
}
.phone__item-qty-btn { font-weight: 800; }
.phone__item-qty-num {
font-weight: 700;
font-variant-numeric: tabular-nums;
border-left: 1px solid rgba(184, 102, 0, 0.22);
border-right: 1px solid rgba(184, 102, 0, 0.22);
padding-left: 4px;
padding-right: 4px;
}
/* ---------- Phone status-bar (shared across every .phone mock) ---------- */
/* P1.C05.hotfix.r3 (2026-08-16). Clock + signal indicator live at the .phone
scope, not the .phone--hero-mock scope, because both the home hero mock
and the /dine-in-ordering-system/ hero mock (base .phone) use them. */
.phone__clock {
font-family: var(--font-body);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.phone__signal {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 12px;
}
.phone__signal-dots {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 10px;
}
.phone__signal-dot {
width: 3px;
background: var(--orderzy-ink);
border-radius: 1px;
}
.phone__signal-dot:nth-child(1) { height: 4px; }
.phone__signal-dot:nth-child(2) { height: 6px; }
.phone__signal-dot:nth-child(3) { height: 8px; }
.phone__signal-dot:nth-child(4) { height: 10px; }
.phone__signal-label {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.01em;
}
/* ---------- Hero phone mock (right column, ≥1024px only) ---------- */
/* Sits inside .hero__grid's right column on home. Wider than the base .phone
(which is 300px) so the item rows breathe more, matching the mockup in
Image #4. Hides at ≤1023px (tablet + mobile) so the hero collapses to a
single centered column - matches the responsive rule set for the retired
.hero__preview card. */
.phone--hero-mock {
width: 320px;
aspect-ratio: 320 / 640;
justify-self: end;
margin: 0;
}
.phone--hero-mock .phone__status {
padding: 14px 22px 4px;
font-size: 12px;
color: var(--orderzy-ink);
}
.phone--hero-mock .phone__rest-name { font-size: 18px; letter-spacing: -0.005em; }
.phone--hero-mock .phone__rest-meta { font-size: 12px; margin-top: 4px; }
.phone--hero-mock .phone__item { padding: 12px 0; }
.phone--hero-mock .phone__item:first-of-type { padding-top: 4px; }
.phone--hero-mock .phone__item-img { width: 64px; height: 64px; }
.phone--hero-mock .phone__item-title { font-size: 13.5px; }
.phone--hero-mock .phone__item-desc { font-size: 11px; margin-top: 3px; }
.phone--hero-mock .phone__item-price { font-size: 13px; }
.phone--hero-mock .phone__item-add { font-size: 10.5px; padding: 4px 12px; }
/* Stepper sized down slightly for the hero mock; cells shrink together so
the pill stays symmetric. */
.phone--hero-mock .phone__item-qty-btn,
.phone--hero-mock .phone__item-qty-num {
font-size: 12px;
min-width: 20px;
padding-top: 4px;
padding-bottom: 4px;
}
/* Hide the phone at tablet + mobile. The tablet/mobile hero collapses to a
centered single-column via the existing @media rules on .hero__grid. */
@media (max-width: 1023px) {
.phone--hero-mock { display: none; }
}
/* ---------- Section title ---------- */
.section {
padding: 56px 0;
}
.section__head {
margin-bottom: 28px;
}
.section__title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--orderzy-ink);
margin: 0;
}
.section__sub {
font-size: 16px;
color: var(--orderzy-ink-soft);
margin-top: 6px;
}
.rest-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
/* ---------- How it works ---------- */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.step {
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-lg);
padding: 28px 24px;
text-align: left;
position: relative;
}
.step__num {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--orderzy-brand);
text-transform: uppercase;
margin-bottom: 12px;
}
.step__title {
font-size: 20px;
font-weight: 700;
margin: 0 0 8px;
}
.step__desc {
font-size: 15px;
color: var(--orderzy-ink-soft);
line-height: 1.55;
margin: 0;
}
.step__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--orderzy-brand-soft);
color: var(--orderzy-brand-ink);
display: grid;
place-items: center;
margin-bottom: 16px;
}
/* ---------- Restaurant acquisition band ---------- */
.ra-band {
background: var(--orderzy-brand-soft);
padding: 72px 0;
position: relative;
overflow: hidden;
}
.ra-band::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 85% 50%, rgba(242,133,0,0.08) 0%, transparent 55%);
pointer-events: none;
}
.ra-band__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
position: relative;
}
.ra-band__title {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 12px;
line-height: 1.1;
}
.ra-band__sub {
font-size: 17px;
color: var(--orderzy-ink-soft);
line-height: 1.55;
margin: 0 0 20px;
max-width: 480px;
}
.ra-band__benefits {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
}
.ra-band__benefits li {
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
color: var(--orderzy-ink);
font-weight: 600;
}
.ra-band__benefits li::before {
content: "";
width: 8px;
height: 8px;
background: var(--orderzy-brand);
border-radius: 50%;
flex-shrink: 0;
}
/* Mini dashboard mockup */
.dash-mini {
background: var(--orderzy-surface);
border-radius: var(--r-lg);
box-shadow: var(--orderzy-shadow-lift);
padding: 20px;
font-size: 12px;
}
.dash-mini__head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid var(--orderzy-border);
margin-bottom: 14px;
}
.dash-mini__brand {
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
color: var(--orderzy-brand);
}
.dash-mini__metric {
display: flex;
gap: 14px;
margin-bottom: 16px;
}
.dash-mini__metric-cell {
flex: 1;
background: var(--orderzy-surface-alt);
border-radius: var(--r-md);
padding: 10px 12px;
}
.dash-mini__metric-label {
font-size: 10px;
font-weight: 600;
color: var(--orderzy-ink-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dash-mini__metric-value {
font-family: var(--font-heading);
font-weight: 700;
font-size: 22px;
color: var(--orderzy-ink);
margin-top: 2px;
}
.dash-mini__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--orderzy-border-soft);
font-size: 12px;
}
.dash-mini__row:last-child { border-bottom: none; }
.dash-mini__row-id { color: var(--orderzy-ink-muted); font-weight: 600; }
.dash-mini__row-amt { font-weight: 700; }
/* ---------- Footer ---------- */
/* P4.C08 (2026-08-15): the legacy (dark-ink) `.oz-footer` block plus its
`.oz-footer__grid` and `.oz-footer__bottom` variants was deleted. Every
production render uses `.oz-footer .oz-footer--compact` (see
`templates/includes/footer.html`); the compact-specific rules further
down still declare the shell (background/color come from the Luxe
override at §3.6 of the components section). No template referenced
`.oz-footer__grid` or `.oz-footer__bottom` after Wave 0. */
/* ---------- Compact footer (production default) ----------
Two-column top (brand on left, 3-column link grid on right) +
bottom strip with contact + copyright. */
.oz-footer--compact { padding: 48px 0 24px; margin-top: 0; }
.oz-footer__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.oz-footer__top {
display: grid;
grid-template-columns: 1.2fr 2fr;
gap: 48px;
margin-bottom: 36px;
}
.oz-footer__brand {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Brand title uses .oz-wordmark + .oz-footer__brand-title - inherits the
Playfair Display Bold 800 from .oz-wordmark; size is footer-specific. */
.oz-footer__brand-title {
font-size: 26px;
text-decoration: none;
}
.oz-footer__tagline {
font-family: var(--font-body);
font-style: italic;
font-size: 13px;
color: rgba(250,249,245,0.6);
}
.oz-footer__brand-desc {
color: rgba(250,249,245,0.5);
font-size: 13px;
line-height: 1.5;
margin: 8px 0 0;
max-width: 280px;
}
.oz-footer__cols {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
}
/* Selector renamed h4 → h3 on 2026-08-22 to fix H2→H4 heading-skip. */
/* Footer column titles kept their 12px uppercase caption look. */
.oz-footer__col h3 {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(250,249,245,0.85);
margin: 0 0 12px;
}
.oz-footer__col ul { list-style: none; padding: 0; margin: 0; }
.oz-footer__col li { margin-bottom: 8px; }
.oz-footer__col a {
color: rgba(250,249,245,0.55);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
.oz-footer__col a:hover {
color: var(--orderzy-brand);
text-decoration: underline;
text-underline-offset: 4px;
}
.oz-footer__bottom-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 20px;
border-top: 1px solid rgba(250,249,245,0.08);
flex-wrap: wrap;
}
.oz-footer__contact {
display: flex;
align-items: center;
gap: 16px;
}
.oz-footer__contact a {
color: rgba(250,249,245,0.55);
font-size: 13px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--dur-fast) var(--ease);
}
.oz-footer__contact a:hover { color: var(--orderzy-brand); }
.oz-footer__copy {
color: rgba(250,249,245,0.4);
font-size: 12px;
}
@media (max-width: 768px) {
.oz-footer--compact { padding: 36px 0 20px; }
.oz-footer__top {
grid-template-columns: 1fr;
gap: 28px;
}
.oz-footer__cols { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.oz-footer__brand-desc { max-width: none; }
}
@media (max-width: 480px) {
.oz-footer__cols { grid-template-columns: 1fr 1fr; gap: 20px; }
.oz-footer__bottom-strip {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.oz-footer__contact { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* =========== Restaurant detail page =========== */
.rest-hero {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: var(--orderzy-ink);
}
@media (max-width: 880px) { .rest-hero { height: 220px; } }
@media (max-width: 520px) { .rest-hero { height: 180px; } }
/* Image Standards v1.2 Phase 1 (2026-08-29): the 0.85 opacity was stacking on
top of the .rest-hero__overlay gradient below, producing a muddy render on
every uploaded photo (~15% darker than the owner saw). The gradient alone
is enough to keep the white overlay text readable. */
.rest-hero img { width: 100%; height: 100%; object-fit: cover; }
.rest-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(31,29,26,0.8) 0%, rgba(31,29,26,0.2) 60%, transparent 100%);
}
.rest-hero__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 32px 24px;
color: var(--orderzy-ink-invert);
}
.rest-info { max-width: 1200px; margin: 0 auto; }
.rest-info__name {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 6px;
color: #fff;
}
.rest-info__meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 14px;
color: rgba(255,255,255,0.9);
align-items: center;
}
.rest-info__meta-sep { opacity: 0.5; }
.rest-info__outlet {
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.92);
margin: -2px 0 6px;
}
.cw-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
border-radius: 17px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
background: var(--orderzy-brand);
border: 1px solid var(--orderzy-brand);
color: #fff;
transition: background 150ms, color 150ms, border-color 150ms, transform 80ms;
}
.cw-btn:hover { background: var(--orderzy-brand-ink); border-color: var(--orderzy-brand-ink); }
.cw-btn:active { transform: scale(0.98); }
.cw-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.rest-banner {
background: var(--orderzy-brand-soft);
border-bottom: 1px solid var(--orderzy-border);
padding: 14px 0;
}
.rest-banner__inner {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: var(--orderzy-brand-ink);
font-weight: 600;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.rest-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px;
padding: 32px 0 120px;
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
.cat-nav {
position: sticky;
top: 96px;
align-self: start;
/* 2026-08-28: sidebar taller than viewport (e.g. Kulhadwala's 25 categories
on a 730px viewport = 1068px sidebar) left the bottom half of the list
unreachable because the sticky element clipped below the viewport bottom
with no internal scroll. max-height caps the sidebar to the space below
its sticky top offset; overflow-y:auto lets it scroll internally when
content exceeds that. Short menus keep no scrollbar (invisible no-op).
Hidden entirely at <=880px per the media block below, so mobile is
unaffected by 100vh's iOS address-bar quirk. */
max-height: calc(100vh - 96px);
overflow-y: auto;
}
.cat-nav__title {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--orderzy-ink-muted);
margin: 0 0 12px;
padding: 0 12px;
}
.cat-nav__list { list-style: none; padding: 0; margin: 0; }
.cat-nav__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px; /* 2026-09-05: prevents name + count from colliding when the name is long */
padding: 10px 12px;
border-radius: var(--r-sm);
font-size: 14px;
color: var(--orderzy-ink);
font-weight: 600;
border-left: 3px solid transparent;
cursor: pointer;
transition: all var(--dur-fast) var(--ease);
}
/* 2026-09-05: long category names ("Kulhadwala Special Thalis") get truncated
with an ellipsis rather than growing to consume the count column. Ties into
the flex-shrink: 0 on .cat-nav__count below. */
.cat-nav__item > span:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
}
.cat-nav__item:hover { background: var(--orderzy-surface-alt); }
.cat-nav__item.is-active {
background: var(--orderzy-brand-soft);
border-left-color: var(--orderzy-brand);
color: var(--orderzy-brand-ink);
}
.cat-nav__count {
/* 2026-09-05: reserve enough width for 2-3 digit counts and stop flexbox
from squeezing the count into a partial glyph. Fixes SYS-Q4 (audit
verification 2026-09-04). */
flex-shrink: 0;
min-width: 32px;
text-align: right;
font-weight: 600;
color: var(--orderzy-ink-muted);
font-size: 13px;
}
.cat-nav__item.is-active .cat-nav__count { color: var(--orderzy-brand-ink); }
/* Mobile: sidebar hides completely; category navigation moves to the
sticky pill strip (.cat-nav__mobile-strip below in this file). Prior
to 2026-08-28 audit F.22 the sidebar was ALSO reflowed as a horizontal
underlined-tab row here, so two category strips rendered side-by-side
on <=880px (the pill row from the mobile primitive AND the reflowed
sidebar). The two disagreed on which category was active; users saw
both scrolling in different directions. The reflow rules are gone and
the sidebar is display:none so only the pill strip renders.
2026-08-28 audit F.22 (acceptance follow-up): the grid track `1fr` was
silently expanding to ~384px on a 306-360px viewport, forcing the whole
menu column wider than the phone and dumping a horizontal scrollbar on
the page. Root cause: CSS grid items default `min-width: auto` (=
min-content), so a horizontal-scroll carousel child (.menu-rail__track,
.menu-item__variants, .oz-parcel-toggle) pushed the track past the
viewport. Setting `min-width: 0` on the grid item + the nested overflow
containers teaches the layout to actually shrink to fit. */
@media (max-width: 880px) {
.rest-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px; }
/* !important beats the later .menu-page-content { max-width: 800px }
rule at ~9317 outside any media query, and beats the base .menu-item
{ display: flex } row min-content. Grid items with intrinsic
min-content > track were overflowing the 306-360px viewport and
shipping a horizontal scrollbar on the whole page. min-width: 0 +
max-width: 100% forces every grid + flex descendant of the layout
to shrink to the actual viewport. */
.rest-layout > * { min-width: 0 !important; max-width: 100% !important; }
.cat-nav { display: none; }
.rest-info__name { font-size: 24px; }
.menu-page-content { min-width: 0 !important; max-width: 100% !important; overflow-x: clip; }
.menu-rail { max-width: 100% !important; min-width: 0 !important; }
.menu-rail__track { min-width: 0 !important; max-width: 100% !important; }
.menu-cat { min-width: 0 !important; max-width: 100% !important; }
.menu-item { min-width: 0 !important; max-width: 100% !important; }
/* HTML defaults to min-width: auto = intrinsic 20-char width
(~200-220px). Inside a CSS grid with minmax(0, 1fr) that intrinsic
width forces the grid track past the viewport. */
.search-bar__input,
.menu-search input,
.menu-page-content input { min-width: 0 !important; }
}
@media (max-width: 520px) {
.rest-info__meta { font-size: 12px; gap: 8px; }
}
/* --------------------------------------------------------------------
.oz-bottom-stack - 2026-09-01 permanent stacking fix.
Retires the F.27/F.28 architecture (3 independent `position: fixed`
elements coordinated via 4 magic numbers spread across CSS + JS).
The three bottom-anchored surfaces are now children of ONE flex-column
container:
Row 1: .oz-bottom-stack__fab-row (holds .oz-fab-callwaiter)
Row 2: .cart-bar (centered dark pill)
Row 3: .oz-getbill-sticky (full-width green tray)
Why this fixes the class of overlap the old design kept producing:
flex-column siblings cannot occupy the same vertical band, so the
Call-staff-over-View-cart collision seen in the 2026-09-01 screenshot
is architecturally impossible in this layout. All positioning is
CSS-only; sticky-stack.js no longer computes any `bottom` value.
pointer-events: none on the container so the menu scrolls behind the
gaps; each visible surface (.cart-bar, .oz-getbill-sticky,
.oz-fab-callwaiter) re-enables pointer events on itself.
-------------------------------------------------------------------- */
.oz-bottom-stack {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: max(8px, env(safe-area-inset-bottom));
pointer-events: none;
z-index: var(--z-sticky-cart-bar);
}
.oz-bottom-stack .cart-bar,
.oz-bottom-stack .oz-getbill-sticky,
.oz-bottom-stack .oz-fab-callwaiter {
pointer-events: auto;
}
/* When the Get Bill tray is on the page AND visible (mobile only), it sits
flush against the viewport bottom - its own padding-bottom absorbs the
safe-area, so we drop the container's padding-bottom to avoid doubling
up. Media-guarded because the tray is display:none on >=768px; :has()
alone would match a hidden-tray DOM node and wrongly drop the padding
the FAB / cart-bar rely on there. */
@media (max-width: 767px) {
.oz-bottom-stack:has(.oz-getbill-sticky) {
padding-bottom: 0;
}
}
/* FAB row: right-aligned pill. Empty area of the row must pass clicks
through so the menu underneath stays scrollable in that band. */
.oz-bottom-stack__fab-row {
display: flex;
justify-content: flex-end;
padding: 0 16px;
pointer-events: none;
}
/* Q2 answer (2026-09-01): Call staff is a QR-scan-flow control; hide it
on desktop (>=1025px) where the diner is not seated at the table.
Tablet (768-1024) keeps it. Was previously shown on all breakpoints. */
@media (min-width: 1025px) {
.oz-bottom-stack__fab-row { display: none; }
}
/* Cart bar (centered dark pill). No longer `position: fixed` - it's a
flex-column child of .oz-bottom-stack and centers itself horizontally
via align-self. Visual style is byte-for-byte identical to the pre-fix
version; only positioning + z-index moved to the parent. */
.cart-bar {
display: none;
align-self: center;
width: calc(100% - 48px);
max-width: 560px;
background: var(--orderzy-ink);
color: var(--orderzy-ink-invert);
border-radius: var(--r-md);
padding: 14px 18px;
align-items: center;
justify-content: space-between;
box-shadow: 0 20px 48px -12px rgba(31,29,26,0.3), var(--orderzy-shadow-lift);
}
.cart-bar--visible { display: flex; }
/* Prompt 2 · S2-24 (2026-09-13). When the sticky cart bar is showing,
reserve room at the bottom of the menu list so the last item's Add
button isn't tap-blocked by the bar. Uses `:has()` where supported
(modern iOS Safari, Chrome, Firefox); the fallback path - every
older browser - keeps today's shape (occasional overlap on the
last item, not a regression). safe-area-inset keeps the reserve
correct on notched iPhones. */
body:has(.cart-bar--visible) .menu-page-content {
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.cart-bar__count {
display: inline-flex;
align-items: center;
gap: 10px;
}
.cart-bar__count-badge {
background: var(--orderzy-brand);
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-grid;
place-items: center;
font-weight: 700;
font-size: 13px;
}
/* 2026-08-28 audit F.16: hide the count badge on desktop (>=768px) - the
label "3 items in cart" already carries the number, so the leading pill
duplicates it and reads as visual noise. Kept in DOM as screen-reader
text so assistive tech still hears the count without a repeat visual. */
@media (min-width: 768px) {
.cart-bar__count-badge {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
.cart-bar__label { font-weight: 700; font-size: 15px; }
.cart-bar__total { font-family: var(--font-heading); font-weight: 700; font-size: 14px; opacity: 0.75; margin-left: 6px; }
.cart-bar__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
color: var(--orderzy-brand);
text-decoration: none;
white-space: nowrap;
}
/* 2026-08-28 audit F.27 (rationale updated 2026-09-01): keep the cart-bar
single-line at 320-414px. Originally protected the FAB-stack math; that
math is now retired but the single-line invariant still matters for the
cart-bar's own readability - a wrapped "View cart" reads worse than a
tighter one-liner even without any FAB context. Tightening label / CTA
sizing keeps every element inline down to 320px. */
@media (max-width: 414px) {
.cart-bar { padding: 11px 14px; width: calc(100% - 24px); gap: 8px; }
.cart-bar__count { gap: 8px; min-width: 0; }
.cart-bar__count-badge { width: 24px; height: 24px; font-size: 12px; }
.cart-bar__label { font-size: 13.5px; }
.cart-bar__total { font-size: 12.5px; margin-left: 4px; }
.cart-bar__cta { font-size: 13px; }
.cart-bar__cta svg { width: 12px; height: 12px; }
}
@media (max-width: 880px) {
.rest-layout { grid-template-columns: 1fr; gap: 0; }
.cat-sidebar {
position: static;
display: none;
}
.rest-info__name { font-size: 24px; }
.rest-hero__content { padding: 20px 16px; }
.rest-info__meta { font-size: 12px; gap: 8px; }
}
/* =========== Checkout page specific =========== */
.co-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
padding: 40px 0 80px;
}
.co-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 6px;
}
.co-subtitle {
color: var(--orderzy-ink-soft);
font-size: 15px;
margin: 0 0 28px;
}
.co-step-indicator {
display: flex;
gap: 6px;
margin-bottom: 16px;
font-size: 13px;
color: var(--orderzy-ink-muted);
font-weight: 600;
}
.co-step-indicator strong { color: var(--orderzy-ink); }
.card-box {
background: var(--orderzy-surface);
border: 1px solid var(--orderzy-border);
border-radius: var(--r-md);
padding: 24px;
}
.card-box + .card-box { margin-top: 16px; }
.card-box__title {
font-size: 17px;
font-weight: 700;
margin: 0 0 16px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-row--single { grid-template-columns: 1fr; }
.pay-option {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid var(--orderzy-border-strong);
border-radius: var(--r-sm);
cursor: pointer;
transition: all var(--dur-fast) var(--ease);
}
.pay-option + .pay-option { margin-top: 10px; }
.pay-option:hover { border-color: var(--orderzy-ink); }
.pay-option.selected {
border-color: var(--orderzy-brand);
background: var(--orderzy-brand-soft);
box-shadow: 0 0 0 3px var(--orderzy-brand-soft);
}
.pay-option__radio {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--orderzy-border-strong);
flex-shrink: 0;
position: relative;
}
.pay-option.selected .pay-option__radio { border-color: var(--orderzy-brand); }
.pay-option.selected .pay-option__radio::after {
content: "";
position: absolute;
inset: 3px;
background: var(--orderzy-brand);
border-radius: 50%;
}
.pay-option__body { flex: 1; }
.pay-option__title { font-weight: 700; font-size: 15px; }
.pay-option__sub { font-size: 13px; color: var(--orderzy-ink-soft); }
.pay-option__logos {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.pay-logo {
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
background: var(--orderzy-surface-alt);
color: var(--orderzy-ink-soft);
letter-spacing: 0.04em;
}
/* Order summary */
.summary {
position: sticky;
top: 96px;
background: var(--orderzy-surface);
border-radius: var(--r-md);
box-shadow: var(--orderzy-shadow-whisper);
padding: 24px;
border: 1px solid var(--orderzy-border);
}
.summary__title {
font-size: 17px;
font-weight: 700;
margin: 0 0 4px;
}
.summary__rest {
font-size: 13px;
color: var(--orderzy-ink-soft);
margin: 0 0 20px;
}
.summary__item {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
font-size: 14px;
}
.summary__item-name { flex: 1; }
.summary__item-qty { color: var(--orderzy-ink-muted); font-weight: 600; margin-right: 8px; }
.summary__item--rich { align-items: center; gap: 10px; }
.summary__item-thumb { width: 40px; height: 40px; border-radius: var(--r-xs, 6px); object-fit: cover; flex-shrink: 0; }
.summary__divider { border-top: 1px solid var(--orderzy-border); margin: 10px 0; }
.summary__line {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--orderzy-ink-soft);
padding: 4px 0;
}
.summary__line--total {
font-size: 20px;
font-weight: 700;
color: var(--orderzy-ink);
padding-top: 14px;
margin-top: 6px;
border-top: 1px solid var(--orderzy-border);
}
.summary__btn { margin-top: 20px; }
.summary__trust {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
margin-top: 14px;
font-size: 12px;
color: var(--orderzy-ink-muted);
}
/* Compact navbar for checkout */
.oz-nav--minimal .oz-nav__links { gap: 18px; }
/* ---------- Mobile adjustments ---------- */
/* P1.C05.hotfix (2026-08-16). Tablet range (881-1023px) between the desktop
two-column hero and the mobile stack. The preview card hides here so the
hero doesn't feel cramped, and the copy column centres to a comfortable
editorial width instead of clinging to the left edge of a 1000px viewport. */
@media (max-width: 1023px) {
.hero__preview { display: none; }
}
@media (min-width: 881px) and (max-width: 1023px) {
.hero__grid {
grid-template-columns: 1fr;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.hero__headline { font-size: 48px; }
.hero__trust { justify-content: flex-start; }
}
@media (max-width: 880px) {
.hero { padding: 32px 0 40px; }
/* 2026-08-28 audit F.22 (acceptance follow-up): `1fr` = `minmax(auto, 1fr)`
lets grid items grow past the viewport when a child has intrinsic
min-content > viewport width (e.g. a search at ~220px inside
a 306px viewport - the input's default `size` attribute forces min-
content, and the grid track expands to accommodate). `minmax(0, 1fr)`
forces the track to actually shrink with the viewport. See same fix
on `.rest-layout` at ~1706. */
.hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hero__grid > * { min-width: 0; max-width: 100%; }
.hero__grid input { min-width: 0; }
.hero__headline { font-size: 40px; }
.ra-band__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.ra-band__grid > * { min-width: 0; max-width: 100%; }
.ra-band__title { font-size: 30px; }
.ra-band__benefits { grid-template-columns: minmax(0, 1fr); }
.ra-band__benefits > * { min-width: 0; max-width: 100%; }
.steps { grid-template-columns: minmax(0, 1fr); }
.steps > * { min-width: 0; max-width: 100%; }
.co-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0 48px; }
.co-layout > * { min-width: 0; max-width: 100%; }
.summary { position: static; }
/* P4.C08 (2026-08-15): `.oz-footer__grid` mobile fallback deleted; the
compact footer's `.oz-footer__cols` already collapses at ≤540px. */
.oz-nav__links { gap: 14px; }
.oz-nav__link--restaurant { padding: 6px 10px; font-size: 13px; }
}
@media (max-width: 520px) {
.hero__headline { font-size: 32px; }
.section__title { font-size: 24px; }
/* P4.C08 (2026-08-15): `.oz-footer__grid` mobile fallback deleted alongside
the legacy grid selector. Compact footer collapses at its own breakpoint. */
.form-row { grid-template-columns: 1fr; }
/* Navbar: plain text links collapse at mobile. Restaurant pill + cart/bell stay visible. */
.oz-nav__inner { padding: 0 16px; height: 60px; }
.oz-nav__links { gap: 8px; }
.oz-nav__link { display: none; }
.oz-nav__link--restaurant { padding: 5px 10px; font-size: 12px; }
.oz-wordmark { font-size: 20px; }
/* Minimal checkout navbar keeps its links visible (Back + Secure badge). */
.oz-nav--minimal .oz-nav__link { display: inline-flex; font-size: 12.5px; }
.oz-nav--minimal .oz-nav__links { gap: 10px; }
}
@media (max-width: 420px) {
.oz-nav__inner { padding: 0 14px; height: 56px; }
.oz-nav__links { gap: 6px; }
.oz-nav__link--restaurant { padding: 4px 8px; font-size: 11.5px; }
.oz-nav__cart, .oz-nav__bell { width: 36px; height: 36px; }
.oz-wordmark { font-size: 19px; }
.oz-nav--minimal .oz-nav__link { font-size: 11.5px; }
}
/* ===================================================================
BATCH 1 ADDITIONS. Cross-cutting patterns
(toasts, empty states, mobile nav, bell, error pages, gallery)
=================================================================== */
/* ---------- Toasts ---------- */
.toast-stack {
position: fixed;
top: 24px;
right: 24px;
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: 10px;
max-width: 420px;
width: calc(100% - 48px);
}
.toast-stack--inline { position: static; width: 100%; max-width: 480px; }
/* Toast class prefixed `oz-toast` to sidestep Bootstrap 5.3's
`.toast:not(.show) { display: none; }` collision (loaded globally from
base.html). Prior fix used `.show` on the toast + a specificity override
as a band-aid; the rename below eliminates the collision at the root so
neither band-aid is needed any more. If a future refactor reintroduces
the plain `.toast` class name, the regression test guarding this file
will fail and remind whoever did it why the rename happened. */
.oz-toast {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-radius: var(--r-md);
background: var(--orderzy-surface);
box-shadow: var(--orderzy-shadow-lift);
border: 1px solid var(--orderzy-border);
}
.oz-toast__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.oz-toast__body { flex: 1; min-width: 0; }
.oz-toast__title { font-size: 14px; font-weight: 700; color: var(--orderzy-ink); margin: 0; line-height: 1.4; }
.oz-toast__msg { font-size: 13px; color: var(--orderzy-ink-soft); line-height: 1.45; margin: 3px 0 0; }
.oz-toast__action { background: none; border: none; font-weight: 700; color: var(--orderzy-brand-ink); cursor: pointer; margin-top: 8px; font-size: 13px; padding: 0; }
.oz-toast__action:hover { text-decoration: underline; }
.oz-toast__close {
background: transparent;
border: none;
color: var(--orderzy-ink-muted);
cursor: pointer;
padding: 2px;
margin: -2px;
border-radius: var(--r-xs);
flex-shrink: 0;
}
.oz-toast__close:hover { color: var(--orderzy-ink); background: var(--orderzy-surface-alt); }
.oz-toast--success { border-left: 3px solid var(--orderzy-success); }
.oz-toast--success .oz-toast__icon { color: var(--orderzy-success); }
.oz-toast--error { border-left: 3px solid var(--orderzy-danger); }
.oz-toast--error .oz-toast__icon { color: var(--orderzy-danger); }
.oz-toast--warning { border-left: 3px solid var(--orderzy-warning); }
.oz-toast--warning .oz-toast__icon { color: var(--orderzy-warning); }
.oz-toast--info { border-left: 3px solid var(--orderzy-brand); }
.oz-toast--info .oz-toast__icon { color: var(--orderzy-brand); }
/* M12: native