/* ============================================================
Sonia SaaS — Customer Appetite Overlay
------------------------------------------------------------
Warm kitchen-inspired palette: tomato red, saffron yellow,
cream / parchment, espresso brown, basil green.
Loaded AFTER app.css, only by the customer layout.
All rules scoped under `body.customer-app` so the admin
stylesheet stays untouched.
============================================================ */
/* -----------------------------------------------------------
1. Tokens (warm, food-appetizing)
----------------------------------------------------------- */
body.customer-app {
/* === Admin-controlled === */
--color-primary: #D7263D;
--color-primary-contrast: #FFFFFF;
--color-accent: #00CCBC; /* Deliveroo-ish teal fallback */
--color-bg: #FFFFFF;
--color-text: #0B0B0F;
/* === Derived from --color-primary === */
--color-primary-deep: color-mix(in srgb, var(--color-primary) 80%, #000);
--color-primary-dark: color-mix(in srgb, var(--color-primary) 55%, #000);
--color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, transparent);
--color-primary-glow: color-mix(in srgb, var(--color-primary) 25%, transparent);
/* === Accent-derived (used for success/highlight chips) === */
--color-basil: var(--color-accent);
--color-basil-deep: color-mix(in srgb, var(--color-accent) 70%, #000);
--color-basil-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
/* === Text hierarchy — cool neutral grays === */
--color-text-mid: color-mix(in srgb, var(--color-text) 62%, var(--color-bg));
--color-text-dim: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
--color-text-faint: color-mix(in srgb, var(--color-text) 24%, var(--color-bg));
--color-text-muted: var(--color-text-dim);
/* === Surfaces — neutral, NO warm anchors. Apple-system-like grays === */
--color-bg-2: color-mix(in srgb, var(--color-bg) 96%, #000);
--color-surface: var(--color-bg);
--color-surface-2: color-mix(in srgb, var(--color-bg) 94%, #000);
--color-surface-3: color-mix(in srgb, var(--color-bg) 87%, #000);
--color-elev: var(--color-bg);
/* === Lines — pure neutral === */
--color-line: color-mix(in srgb, var(--color-text) 9%, transparent);
--color-line-strong: color-mix(in srgb, var(--color-text) 18%, transparent);
--color-border: var(--color-line);
/* === Saffron — kept only for the pre-order tag pop; modern vivid yellow === */
--color-saffron: #FFB400;
--color-saffron-bright: #FFC846;
--color-saffron-deep: #B27800;
--color-saffron-soft: rgba(255, 180, 0, 0.14);
--color-saffron-glow: rgba(255, 180, 0, 0.24);
/* === Shadows — clean, cool, modern === */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-red: 0 8px 22px var(--color-primary-glow);
--radius-sm: 8px;
--radius: 12px;
--radius-md: 16px;
--radius-lg: 22px;
--radius-xl: 28px;
--radius-pill: 999px;
--header-h: 60px;
--bottom-nav-h:72px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--t-fast: 140ms cubic-bezier(0.32, 0.72, 0.32, 1);
--t: 240ms cubic-bezier(0.32, 0.72, 0.32, 1);
--t-slow: 420ms cubic-bezier(0.16, 0.84, 0.16, 1);
--font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
--font-script: "Playfair Display", Georgia, "Times New Roman", serif;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Dark variant — pure neutral dark, no warm anchors */
html[data-theme="dark"] body.customer-app {
--color-bg: #0B0B0F;
--color-text: #FFFFFF;
--color-bg-2: color-mix(in srgb, var(--color-bg) 80%, #FFF);
--color-surface: color-mix(in srgb, var(--color-bg) 92%, #FFF);
--color-surface-2: color-mix(in srgb, var(--color-bg) 86%, #FFF);
--color-surface-3: color-mix(in srgb, var(--color-bg) 78%, #FFF);
--color-elev: color-mix(in srgb, var(--color-bg) 88%, #FFF);
--color-line: rgba(255, 255, 255, 0.10);
--color-line-strong: rgba(255, 255, 255, 0.20);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65);
}
/* -----------------------------------------------------------
2. Headings + base typography
----------------------------------------------------------- */
body.customer-app h1,
body.customer-app h2,
body.customer-app h3,
body.customer-app h4,
body.customer-app h5,
body.customer-app h6 {
font-family: var(--font-display);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--color-text);
margin: 0;
}
body.customer-app .h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
body.customer-app .h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
body.customer-app .h3 { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
body.customer-app .h4 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
body.customer-app a { color: var(--color-primary); transition: color var(--t-fast); text-decoration: none; }
body.customer-app a:hover { color: var(--color-primary-deep); text-decoration: none; }
body.customer-app ::selection { background: var(--color-saffron); color: #2A1810; }
body.customer-app .text-link { color: var(--color-primary); font-weight: 600; }
body.customer-app .text-gold { color: var(--color-saffron-deep); }
body.customer-app .text-pink { color: var(--color-primary); }
body.customer-app .text-danger { color: var(--color-primary-dark); }
body.customer-app .text-success{ color: var(--color-basil); }
body.customer-app .text-dim { color: var(--color-text-dim); }
body.customer-app .text-mid { color: var(--color-text-mid); }
body.customer-app .text-faint { color: var(--color-text-faint); }
body.customer-app .text-sm { font-size: 13px; }
body.customer-app .text-md { font-size: 15px; }
body.customer-app .text-lg { font-size: 17px; }
body.customer-app .text-xl { font-size: 20px; }
body.customer-app .fw-500 { font-weight: 500; }
body.customer-app .fw-600 { font-weight: 600; }
body.customer-app .fw-700 { font-weight: 700; }
body.customer-app .uppercase { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; }
body.customer-app .num { font-variant-numeric: tabular-nums; }
body.customer-app .serif { font-family: var(--font-display); letter-spacing: -0.2px; }
body.customer-app .script { font-family: var(--font-script); font-weight: 700; }
/* -----------------------------------------------------------
3. Page shell
----------------------------------------------------------- */
body.customer-app .page {
max-width: var(--container);
margin: 0 auto;
padding-top: calc(var(--header-h) + var(--safe-top));
padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
background: transparent;
position: relative;
display: flex;
flex-direction: column;
}
body.customer-app .page--no-nav { padding-bottom: var(--safe-bottom); }
body.customer-app .page--no-header { padding-top: var(--safe-top); }
/* -----------------------------------------------------------
4. Header — warm sticky brand bar
----------------------------------------------------------- */
body.customer-app .app-header {
height: calc(var(--header-h) + var(--safe-top));
padding-top: var(--safe-top);
background: color-mix(in srgb, var(--color-bg) 80%, transparent);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--color-line);
}
body.customer-app .app-header__inner {
height: var(--header-h);
padding: 0 var(--space-4);
gap: var(--space-3);
}
body.customer-app .app-header__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px; height: 42px;
padding: 0;
line-height: 0;
border-radius: var(--radius-pill);
color: var(--color-text);
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
body.customer-app .app-header__btn:hover,
body.customer-app .app-header__btn:focus-visible {
background: var(--color-primary-soft);
color: var(--color-primary);
outline: 0;
}
body.customer-app .app-header__btn:active { transform: scale(0.96); }
body.customer-app .app-header__title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-text);
margin: 0;
}
body.customer-app .app-header__brand-logo {
height: 36px;
border-radius: var(--radius-sm);
box-shadow: 0 2px 6px rgba(60,30,12,0.15), 0 0 0 1px var(--color-line-strong);
}
body.customer-app .app-header__brand-text {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--color-text);
}
body.customer-app .app-header__badge {
min-width: 18px;
height: 18px;
line-height: 18px;
font-size: 10px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: #fff;
border: 2px solid var(--color-bg);
box-shadow: 0 2px 6px var(--color-primary-glow);
font-weight: 700;
padding: 0 5px;
}
/* -----------------------------------------------------------
5. Bottom nav — warm sticky tabs
----------------------------------------------------------- */
body.customer-app .bottom-nav {
height: calc(var(--bottom-nav-h) + var(--safe-bottom));
padding-bottom: var(--safe-bottom);
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-top: 1px solid var(--color-line);
}
body.customer-app .bottom-nav__inner { height: var(--bottom-nav-h); }
body.customer-app .bottom-nav__item {
gap: 4px;
color: var(--color-text-dim);
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
padding: 8px 4px;
position: relative;
transition: color var(--t-fast), transform var(--t-fast);
}
body.customer-app .bottom-nav__item:hover { color: var(--color-text); }
body.customer-app .bottom-nav__item:active { transform: translateY(1px); }
body.customer-app .bottom-nav__item[aria-current="page"] { color: var(--color-primary); }
body.customer-app .bottom-nav__item[aria-current="page"]::before {
content: "";
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
border-radius: 3px;
background: var(--color-primary);
box-shadow: 0 2px 8px var(--color-primary-glow);
}
/* -----------------------------------------------------------
6. Section labels & headings
----------------------------------------------------------- */
body.customer-app .section-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
padding: 20px var(--space-4) 8px;
background: transparent;
display: flex;
align-items: center;
}
body.customer-app .section-head {
display: flex;
align-items: center;
gap: 12px;
padding: 22px var(--space-4) 12px;
}
body.customer-app .section-head__icon { color: var(--color-primary); }
body.customer-app .section-head__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.025em;
text-transform: none;
color: var(--color-text);
margin: 0;
}
body.customer-app .section-head__action {
margin-inline-start: auto;
color: var(--color-primary);
font-size: 14px;
letter-spacing: 0;
text-transform: none;
font-weight: 700;
}
/* -----------------------------------------------------------
6b. Elegant brand name + home flourishes
----------------------------------------------------------- */
/* On the home screen, render the kitchen name in an elegant serif. */
body.customer-app.is-home .app-header__title {
font-family: var(--font-script);
font-style: italic;
font-weight: 600;
font-size: 23px;
letter-spacing: 0.01em;
background: linear-gradient(95deg, var(--color-text), color-mix(in srgb, var(--color-primary) 70%, var(--color-text)));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* A short tomato accent bar before each section title — boutique-menu feel. */
body.customer-app .section-head__title {
position: relative;
padding-inline-start: 14px;
}
body.customer-app .section-head__title::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 0.78em;
border-radius: var(--radius-pill);
background: linear-gradient(180deg, var(--color-primary), var(--color-primary-deep));
}
/* Customer-reviews tile */
body.customer-app .review-tile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 16px 12px 0;
padding: 18px 18px;
border-radius: var(--radius-lg);
background:
radial-gradient(120% 140% at 100% 0%, var(--color-primary-soft), transparent 60%),
var(--color-surface);
border: 1px solid var(--color-line);
box-shadow: var(--shadow);
text-decoration: none;
transition: transform var(--t-fast), box-shadow var(--t);
}
body.customer-app .review-tile:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
body.customer-app .review-tile__stars {
display: inline-flex;
gap: 2px;
color: var(--color-saffron);
margin-bottom: 6px;
}
body.customer-app .review-tile__label {
font-family: var(--font-script);
font-style: italic;
font-weight: 600;
font-size: 19px;
color: var(--color-text);
line-height: 1.1;
}
body.customer-app .review-tile__sub {
margin-top: 3px;
font-size: 13px;
color: var(--color-text-dim);
}
body.customer-app .review-tile__action {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
color: var(--color-primary);
font-size: 14px;
font-weight: 700;
}
/* -----------------------------------------------------------
7. Buttons — warm, juicy, appetite-friendly
----------------------------------------------------------- */
body.customer-app .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 22px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: #fff;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.005em;
text-transform: none;
text-decoration: none;
line-height: 1;
min-height: 48px;
border: 0;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow:
0 8px 22px var(--color-primary-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: transform var(--t-fast), box-shadow var(--t), filter var(--t-fast);
}
body.customer-app .btn:hover {
color: #fff;
transform: translateY(-1px);
box-shadow:
0 16px 32px var(--color-primary-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
filter: brightness(1.04) saturate(1.1);
text-decoration: none;
}
body.customer-app .btn:active { transform: translateY(0); filter: brightness(0.96); }
body.customer-app .btn:disabled,
body.customer-app .btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
filter: grayscale(50%);
box-shadow: none;
}
body.customer-app .btn--primary { background: linear-gradient(180deg, var(--color-primary), var(--color-primary-deep)); color: #fff; }
body.customer-app .btn--saffron {
background: linear-gradient(180deg, var(--color-saffron-bright), var(--color-saffron));
color: #2A1810;
box-shadow: 0 10px 24px var(--color-saffron-glow), inset 0 1px 0 rgba(255,255,255,0.4);
}
body.customer-app .btn--saffron:hover { color: #2A1810; }
body.customer-app .btn--basil {
background: linear-gradient(180deg, var(--color-basil), var(--color-basil-deep));
color: #fff;
box-shadow: 0 10px 24px rgba(47, 95, 51, 0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
body.customer-app .btn--secondary {
background: var(--color-surface);
color: var(--color-text);
border: 1.5px solid var(--color-line-strong);
box-shadow: 0 4px 12px rgba(60,30,12,0.06);
}
body.customer-app .btn--secondary:hover {
background: var(--color-surface-2);
color: var(--color-primary);
border-color: var(--color-primary);
}
body.customer-app .btn--outline {
background: transparent;
color: var(--color-primary);
border: 1.5px solid var(--color-primary);
box-shadow: none;
}
body.customer-app .btn--outline:hover {
background: var(--color-primary-soft);
color: var(--color-primary-deep);
border-color: var(--color-primary-deep);
}
body.customer-app .btn--ghost { background: transparent; color: var(--color-text); box-shadow: none; }
body.customer-app .btn--ghost:hover { background: var(--color-primary-soft); color: var(--color-primary); }
body.customer-app .btn--danger {
background: linear-gradient(180deg, #E63946, var(--color-primary-dark));
color: #fff;
box-shadow: 0 10px 24px rgba(215,38,61,0.35);
}
body.customer-app .btn--white { background: #fff; color: var(--color-primary); box-shadow: 0 10px 24px rgba(0,0,0,0.15); border: 1.5px solid var(--color-line); }
body.customer-app .btn--white:hover { background: var(--color-cream); color: var(--color-primary-deep); }
body.customer-app .btn--sm { padding: 10px 16px; font-size: 13px; min-height: 38px; letter-spacing: 0; }
body.customer-app .btn--lg { padding: 18px 28px; font-size: 16px; min-height: 56px; letter-spacing: -0.005em; }
body.customer-app .btn--block { width: 100%; }
body.customer-app .btn--icon { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: var(--radius-pill); letter-spacing: 0; }
body.customer-app .btn-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* -----------------------------------------------------------
8. Forms
----------------------------------------------------------- */
body.customer-app .field { position: relative; margin-bottom: var(--space-4); }
body.customer-app .field__label {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--color-text-mid);
margin-bottom: 8px;
letter-spacing: 0.02em;
}
body.customer-app .field__label--floating {
position: absolute;
top: -8px;
inset-inline-start: 14px;
padding: 0 6px;
background: var(--color-surface);
font-size: 12px;
color: var(--color-text-mid);
pointer-events: none;
font-weight: 600;
}
body.customer-app .field__hint { font-size: 12px; color: var(--color-text-dim); margin-top: 6px; }
body.customer-app .field__error { font-size: 12px; color: var(--color-primary-dark); margin-top: 6px; font-weight: 600; }
body.customer-app .input,
body.customer-app .textarea,
body.customer-app .select {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--color-line-strong);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.4;
transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
body.customer-app .input:focus,
body.customer-app .textarea:focus,
body.customer-app .select:focus {
outline: 0;
border-color: var(--color-primary);
background: var(--color-bg-2);
box-shadow: 0 0 0 4px var(--color-primary-soft);
}
body.customer-app .input::placeholder,
body.customer-app .textarea::placeholder { color: var(--color-text-faint); }
body.customer-app .textarea { min-height: 100px; resize: vertical; }
body.customer-app .field-box {
position: relative;
border: 1.5px solid var(--color-line-strong);
border-radius: var(--radius);
padding: 20px 16px 14px;
background: var(--color-surface);
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
body.customer-app .field-box:focus-within {
border-color: var(--color-primary);
background: var(--color-bg-2);
box-shadow: 0 0 0 4px var(--color-primary-soft);
}
body.customer-app .field-box > .field__label--floating { background: var(--color-surface); }
body.customer-app .field-box .input,
body.customer-app .field-box .textarea,
body.customer-app .field-box .select {
width: 100%;
border: 0;
background: transparent;
padding: 0;
font-size: 17px;
line-height: 1.4;
box-shadow: none;
}
body.customer-app .checkbox input,
body.customer-app .radio input {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: var(--radius-sm);
border: 2px solid var(--color-line-strong);
background: var(--color-surface);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
body.customer-app .radio input { border-radius: 50%; }
body.customer-app .checkbox input:checked,
body.customer-app .radio input:checked {
border-color: var(--color-primary);
background: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-primary-soft);
}
body.customer-app .checkbox input:checked::after {
content: "";
width: 5px; height: 10px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
body.customer-app .radio input:checked::after {
content: "";
width: 10px; height: 10px;
border-radius: 50%;
background: #fff;
}
body.customer-app .searchbox {
padding: 14px 18px;
border: 1.5px solid var(--color-line-strong);
border-radius: var(--radius-pill);
background: var(--color-surface);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
body.customer-app .searchbox:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-primary-soft);
}
body.customer-app .searchbox__input::placeholder { color: var(--color-text-dim); }
/* -----------------------------------------------------------
9. Cards
----------------------------------------------------------- */
body.customer-app .card {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: 18px 20px;
position: relative;
box-shadow: var(--shadow-sm);
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t);
}
body.customer-app .card--elev {
background: var(--color-surface);
box-shadow: var(--shadow);
}
body.customer-app .card--accent::after {
content: "";
position: absolute;
inset-inline-start: 0;
top: 18px; bottom: 18px;
width: 4px;
background: var(--color-primary);
border-radius: 2px;
}
body.customer-app .card--clickable {
cursor: pointer;
display: block;
text-decoration: none;
color: var(--color-text);
}
body.customer-app .card--clickable:hover {
color: var(--color-text);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow);
text-decoration: none;
}
body.customer-app .card--clickable:active { transform: translateY(0); }
body.customer-app .card-list {
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
}
body.customer-app .card-list__row {
padding: 18px 20px;
border-top: 1px solid var(--color-line);
transition: background var(--t-fast), color var(--t-fast);
color: var(--color-text);
}
body.customer-app .card-list__row:first-child { border-top: 0; }
body.customer-app .card-list__row:hover { background: var(--color-primary-soft); color: var(--color-text); }
body.customer-app .card-list__row-icon { color: var(--color-primary); }
body.customer-app .card-list__row-title { font-size: 15px; font-weight: 600; }
/* -----------------------------------------------------------
10. Menu items / category tiles
----------------------------------------------------------- */
body.customer-app .item-row {
padding: 18px var(--space-4);
border-top: 1px solid var(--color-line);
transition: background var(--t-fast);
align-items: center;
gap: 14px;
display: flex;
}
body.customer-app .item-row:first-child { border-top: 0; }
body.customer-app .item-row:hover { background: var(--color-primary-soft); color: var(--color-text); text-decoration: none; }
body.customer-app .item-row__name { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
body.customer-app .item-row__desc { color: var(--color-text-dim); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
body.customer-app .item-row__price {
margin-top: 8px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
body.customer-app .item-row__img {
width: 92px; height: 92px;
border-radius: var(--radius);
object-fit: cover;
background:
linear-gradient(135deg, var(--color-surface-2), var(--color-surface-3));
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
border: 1px solid var(--color-line);
transition: border-color var(--t-fast), transform var(--t-fast);
position: relative;
}
/* Placeholder glyph when no ![]()
is supplied (div fallback) */
body.customer-app div.item-row__img::after {
content: "";
position: absolute;
inset: 0;
background: center / 38% no-repeat
url("data:image/svg+xml;utf8,");
opacity: 0.55;
border-radius: inherit;
}
body.customer-app .item-row:hover .item-row__img { border-color: var(--color-line-strong); transform: scale(1.03); }
body.customer-app .item-card {
min-width: 140px;
padding: 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
height: auto;
min-height: 96px;
transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t);
box-shadow: var(--shadow-sm);
}
body.customer-app .item-card:hover {
border-color: var(--color-primary);
color: var(--color-text);
transform: translateY(-3px);
box-shadow: var(--shadow);
text-decoration: none;
}
body.customer-app .item-card__name { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
body.customer-app .item-card__price { font-size: 14px; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
body.customer-app .cat-tile { color: var(--color-text); display: block; text-align: start; text-decoration: none; }
body.customer-app .cat-tile__img {
width: 100%;
height: 134px;
object-fit: cover;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface-3));
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-line);
transition: transform var(--t), box-shadow var(--t), border-color var(--t-fast);
position: relative;
overflow: hidden;
}
body.customer-app div.cat-tile__img::after {
content: "";
position: absolute;
inset: 0;
background: center / 28% no-repeat
url("data:image/svg+xml;utf8,");
opacity: 0.55;
}
body.customer-app .cat-tile:hover .cat-tile__img {
transform: translateY(-3px);
box-shadow: var(--shadow);
border-color: var(--color-line-strong);
}
body.customer-app .cat-tile__name {
margin-top: 10px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.015em;
}
body.customer-app .cat-grid {
grid-template-columns: 1fr 1fr;
gap: 16px;
row-gap: 26px;
padding: 10px var(--space-4) 18px;
display: grid;
}
/* -----------------------------------------------------------
11. Pills / badges — appetite tags
----------------------------------------------------------- */
body.customer-app .pill {
padding: 5px 12px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
color: var(--color-text);
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
line-height: 1.2;
border: 0;
}
body.customer-app .pill--primary { background: var(--color-primary); color: #fff; box-shadow: 0 4px 10px var(--color-primary-glow); }
body.customer-app .pill--gold { background: var(--color-saffron); color: #2A1810; }
body.customer-app .pill--success { background: var(--color-basil-soft); color: var(--color-basil-deep); }
body.customer-app .pill--warning { background: rgba(255, 180, 0, 0.18); color: #A06400; }
body.customer-app .pill--danger { background: rgba(215, 38, 61, 0.14); color: var(--color-primary-deep); }
body.customer-app .pill--info { background: rgba(24, 119, 194, 0.14); color: #0F6CB4; }
body.customer-app .pill--outline { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); }
body.customer-app .preorder-tag {
background: var(--color-saffron-deep);
color: #fff;
padding: 6px 12px;
border-radius: var(--radius-pill);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
/* -----------------------------------------------------------
12. Quantity / segmented / tabs
----------------------------------------------------------- */
body.customer-app .qty__btn {
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
border: 2px solid var(--color-primary);
color: var(--color-primary);
background: var(--color-surface);
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
body.customer-app .qty__btn:hover {
background: var(--color-primary);
color: #fff;
}
body.customer-app .qty__btn:active { transform: scale(0.94); }
body.customer-app .qty__value {
min-width: 30px;
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
body.customer-app .segment {
background: var(--color-surface);
border: 1.5px solid var(--color-line-strong);
border-radius: var(--radius-pill);
padding: 4px;
gap: 4px;
display: flex;
}
body.customer-app .segment__btn {
border-radius: var(--radius-pill);
color: var(--color-text-mid);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 10px 12px;
background: transparent;
border: 0;
}
body.customer-app .segment__btn:hover { color: var(--color-text); }
body.customer-app .segment__btn[aria-pressed="true"],
body.customer-app .segment__btn--active,
body.customer-app .segment__btn.is-active {
background: var(--color-primary);
color: #fff;
box-shadow: 0 4px 10px var(--color-primary-glow);
}
body.customer-app .tabs { border-bottom: 2px solid var(--color-line); padding: 0 var(--space-4); }
body.customer-app .tabs__tab {
padding: 14px 18px;
color: var(--color-text-dim);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
text-transform: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
background: transparent;
transition: color var(--t-fast), border-color var(--t-fast);
}
body.customer-app .tabs__tab:hover { color: var(--color-text); }
body.customer-app .tabs__tab[aria-current="page"],
body.customer-app .tabs__tab.is-active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
/* -----------------------------------------------------------
13. Modifier rows
----------------------------------------------------------- */
body.customer-app .modifier-row { padding: 16px var(--space-4); border-top: 1px solid var(--color-line); transition: background var(--t-fast); display: flex; align-items: center; gap: 14px; }
body.customer-app .modifier-row:hover { background: var(--color-primary-soft); }
body.customer-app .modifier-row__check {
width: 22px;
height: 22px;
border-radius: var(--radius-sm);
border: 2px solid var(--color-line-strong);
background: var(--color-surface);
transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.customer-app .modifier-row__check--circle { border-radius: 50%; }
body.customer-app .modifier-row.is-active .modifier-row__check,
body.customer-app .modifier-row input:checked ~ .modifier-row__check {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
box-shadow: 0 0 0 4px var(--color-primary-soft);
}
/* Square checkbox — white checkmark */
body.customer-app .modifier-row.is-active .modifier-row__check:not(.modifier-row__check--circle)::after,
body.customer-app .modifier-row input:checked ~ .modifier-row__check:not(.modifier-row__check--circle)::after {
content: "";
width: 5px; height: 10px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
/* Circle radio — filled center dot */
body.customer-app .modifier-row.is-active .modifier-row__check--circle::after,
body.customer-app .modifier-row input:checked ~ .modifier-row__check--circle::after {
content: "";
width: 10px; height: 10px;
border-radius: 50%;
background: #fff;
}
body.customer-app .modifier-row__label { font-size: 15px; flex: 1; }
body.customer-app .modifier-row.is-active .modifier-row__label,
body.customer-app .modifier-row input:checked ~ .modifier-row__label { font-weight: 700; color: var(--color-primary-deep); }
body.customer-app .modifier-row__price { font-size: 14px; color: var(--color-text-mid); font-variant-numeric: tabular-nums; }
/* -----------------------------------------------------------
14. Drawer / sheet
----------------------------------------------------------- */
body.customer-app .drawer-overlay {
background: rgba(30, 20, 16, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
body.customer-app .drawer {
background: var(--color-surface);
border-inline-start: 1px solid var(--color-line);
box-shadow: -24px 0 60px rgba(60, 30, 12, 0.2);
}
html[data-theme="dark"] body.customer-app .drawer {
background: var(--color-surface-2);
}
body.customer-app .drawer__header {
padding: 16px var(--space-4);
border-bottom: 1px solid var(--color-line);
background: var(--color-bg-2);
}
body.customer-app .drawer__title { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }
body.customer-app .drawer__body { padding: 18px var(--space-4); }
body.customer-app .drawer__footer { padding: 16px var(--space-4); border-top: 1px solid var(--color-line); background: var(--color-bg-2); }
body.customer-app .sheet {
background: var(--color-surface);
border-top-left-radius: var(--radius-xl);
border-top-right-radius: var(--radius-xl);
padding: 16px var(--space-4) calc(28px + var(--safe-bottom));
border-top: 1px solid var(--color-line);
box-shadow: 0 -24px 60px rgba(60, 30, 12, 0.18);
}
body.customer-app .sheet__handle {
width: 44px; height: 4px;
background: var(--color-line-strong);
margin: 0 auto 14px;
border-radius: 2px;
}
body.customer-app .sheet__title { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }
/* -----------------------------------------------------------
15. Round buttons
----------------------------------------------------------- */
body.customer-app .round-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
padding: 0;
line-height: 0;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-line);
box-shadow: 0 4px 12px rgba(60,30,12,0.08);
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
body.customer-app .round-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
body.customer-app .round-btn:active { transform: scale(0.95); }
body.customer-app .round-btn--dark { background: rgba(30,20,16,0.7); color: #fff; border-color: rgba(255,255,255,0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* -----------------------------------------------------------
16. Action bar + basket button
----------------------------------------------------------- */
body.customer-app .actionbar {
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
padding: 12px var(--space-4) calc(12px + var(--safe-bottom));
border-top: 1px solid var(--color-line);
position: sticky;
bottom: 0;
}
body.customer-app .basket-btn {
background: linear-gradient(180deg, var(--color-primary), var(--color-primary-deep));
color: #fff;
padding: 16px 22px;
border-radius: var(--radius-md);
min-height: 62px;
box-shadow:
0 14px 30px var(--color-primary-glow),
inset 0 1px 0 rgba(255,255,255,0.24);
transition: transform var(--t-fast), box-shadow var(--t), filter var(--t-fast);
overflow: hidden;
position: relative;
border: 0;
}
body.customer-app .basket-btn:hover {
color: #fff;
transform: translateY(-2px);
filter: brightness(1.05) saturate(1.1);
text-decoration: none;
box-shadow: 0 20px 40px var(--color-primary-glow), inset 0 1px 0 rgba(255,255,255,0.32);
}
body.customer-app .basket-btn:active { transform: translateY(0); }
body.customer-app .basket-btn__items {
font-size: 12px;
opacity: 0.9;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
body.customer-app .basket-btn__total {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
margin-top: 2px;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.025em;
}
body.customer-app .basket-btn__label {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.005em;
text-transform: none;
}
body.customer-app .actionbar__num {
text-align: center;
color: var(--color-text-dim);
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
margin-top: 8px;
}
/* -----------------------------------------------------------
17. Toasts
----------------------------------------------------------- */
body.customer-app .toast {
background: var(--color-surface);
color: var(--color-text);
padding: 14px 18px;
border-radius: var(--radius);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-lg);
max-width: 380px;
animation: lux-toastIn 260ms cubic-bezier(0.16, 0.84, 0.16, 1);
}
body.customer-app .toast--success { border-inline-start: 4px solid var(--color-basil); }
body.customer-app .toast--error { border-inline-start: 4px solid var(--color-primary); }
body.customer-app .toast--warning { border-inline-start: 4px solid var(--color-saffron); }
body.customer-app .toast--info { border-inline-start: 4px solid var(--color-primary); }
@keyframes lux-toastIn {
from { transform: translateY(-14px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* -----------------------------------------------------------
18. Empty / skeleton
----------------------------------------------------------- */
body.customer-app .empty { padding: 56px var(--space-4); color: var(--color-text-dim); text-align: center; }
body.customer-app .empty__icon {
width: 80px; height: 80px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
margin: 0 auto 20px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px var(--color-primary-glow);
}
body.customer-app .empty__title { font-family: var(--font-display); color: var(--color-text); font-size: 22px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.025em; }
body.customer-app .empty__body { color: var(--color-text-mid); font-size: 15px; margin-bottom: 20px; line-height: 1.55; max-width: 320px; margin-inline: auto; }
body.customer-app .skeleton {
background: linear-gradient(90deg,
var(--color-surface-2) 0%,
var(--color-surface-3) 50%,
var(--color-surface-2) 100%);
background-size: 200% 100%;
animation: lux-shimmer 1.6s linear infinite;
border-radius: var(--radius-sm);
}
@keyframes lux-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* -----------------------------------------------------------
19. Brand hero + hero card
----------------------------------------------------------- */
body.customer-app .brand-hero { padding: 28px var(--space-4) 20px; gap: 14px; }
body.customer-app .brand-hero__logo {
width: 100px; height: 100px;
border-radius: var(--radius-xl);
background: #fff;
overflow: hidden;
border: 3px solid #fff;
box-shadow:
0 0 0 3px var(--color-primary),
0 16px 32px rgba(60, 30, 12, 0.18);
}
body.customer-app .brand-hero__name {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-text);
}
body.customer-app .brand-hero__meta { font-size: 13px; color: var(--color-text-mid); }
body.customer-app .hero-card {
border-radius: var(--radius-lg);
margin: 10px var(--space-3) 4px;
box-shadow: var(--shadow-lg);
border: 0;
overflow: hidden;
position: relative;
display: block;
text-decoration: none;
}
body.customer-app .hero-card__img { height: 280px; transition: transform 700ms ease; width: 100%; object-fit: cover; }
body.customer-app .hero-card:hover .hero-card__img { transform: scale(1.06); }
body.customer-app .hero-card__gradient {
position: absolute; inset: 0;
background:
linear-gradient(0deg, rgba(30, 20, 16, 0.85) 0%, rgba(30, 20, 16, 0.35) 45%, transparent 75%),
radial-gradient(circle at 80% 10%, rgba(255, 200, 87, 0.25), transparent 50%);
pointer-events: none;
}
body.customer-app .hero-card__badge {
position: absolute;
top: 16px; inset-inline-start: 16px;
background: var(--color-primary);
border: 0;
border-radius: var(--radius-pill);
font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
padding: 6px 14px;
box-shadow: 0 6px 14px var(--color-primary-glow);
}
body.customer-app .hero-card__body {
position: absolute;
left: 22px; right: 22px; bottom: 22px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
}
body.customer-app .hero-card__name {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: #fff;
letter-spacing: -0.4px;
line-height: 1.1;
text-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
body.customer-app .hero-card__price {
padding: 8px 14px;
background: #fff;
color: var(--color-text);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 14px;
font-weight: 800;
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
body.customer-app .dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 6px; }
body.customer-app .dot {
width: 7px; height: 7px;
border-radius: 4px;
background: var(--color-line-strong);
border: 0;
cursor: pointer;
transition: width var(--t), background var(--t);
}
body.customer-app .dot.is-active { width: 26px; background: var(--color-primary); }
/* -----------------------------------------------------------
20. Offer cards
----------------------------------------------------------- */
body.customer-app .offer-card {
flex: 0 0 184px;
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: block;
color: var(--color-text);
text-decoration: none;
transition: transform var(--t), border-color var(--t-fast), box-shadow var(--t);
}
body.customer-app .offer-card:hover {
color: var(--color-text);
transform: translateY(-4px);
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
body.customer-app .offer-card__img { height: 124px; transition: transform 500ms ease; width: 100%; object-fit: cover; }
body.customer-app .offer-card:hover .offer-card__img { transform: scale(1.08); }
body.customer-app .offer-card__badge {
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-sm);
font-size: 11px; font-weight: 700; letter-spacing: 0;
text-transform: none;
padding: 5px 10px;
position: absolute;
top: 10px; inset-inline-start: 10px;
box-shadow: 0 4px 10px var(--color-primary-glow);
}
body.customer-app .offer-card__name { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
body.customer-app .offer-card__now { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }
body.customer-app .offer-card__was { font-size: 12px; color: var(--color-text-dim); text-decoration: line-through; font-variant-numeric: tabular-nums; }
/* -----------------------------------------------------------
21. Timeline + bag check
----------------------------------------------------------- */
body.customer-app .order-status-head {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
padding: 18px var(--space-4);
color: #fff;
border-bottom: 0;
}
body.customer-app .timeline__track { border-top: 2px dashed var(--color-line-strong); }
body.customer-app .timeline__step { background: var(--color-bg); color: var(--color-text-dim); }
body.customer-app .timeline__step.is-active { color: var(--color-primary); }
body.customer-app .timeline__step-circle {
width: 48px; height: 48px;
background: var(--color-surface);
border: 2px solid var(--color-line);
}
body.customer-app .timeline__step.is-active .timeline__step-circle {
color: #fff;
border-color: var(--color-primary);
background: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-bg), 0 0 16px var(--color-primary-glow);
}
body.customer-app .bag-check {
width: 48px; height: 48px;
background: var(--color-primary);
color: #fff;
box-shadow: 0 8px 20px var(--color-primary-glow);
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* -----------------------------------------------------------
22. Simple tables
----------------------------------------------------------- */
body.customer-app .simple-table {
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface);
overflow: hidden;
width: 100%;
}
body.customer-app .simple-table__head { background: var(--color-surface-2); }
body.customer-app .simple-table__head .simple-table__cell {
font-weight: 800;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary);
}
body.customer-app .simple-table__row { border-top: 1px solid var(--color-line); }
body.customer-app .simple-table__row.is-active { background: var(--color-primary-soft); }
body.customer-app .simple-table__cell { padding: 14px 16px; font-size: 14px; color: var(--color-text-mid); }
body.customer-app .simple-table__row.is-active .simple-table__cell { color: var(--color-text); font-weight: 700; }
/* -----------------------------------------------------------
23. Bill / totals
----------------------------------------------------------- */
body.customer-app .bill { padding: 18px var(--space-4); border-top: 1px solid var(--color-line); }
body.customer-app .bill__row { font-variant-numeric: tabular-nums; margin-bottom: 10px; font-size: 14.5px; }
body.customer-app .bill__row--strong { font-size: 16px; font-weight: 700; }
body.customer-app .bill__row--muted { color: var(--color-text-mid); }
body.customer-app .bill__total {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
padding: 18px var(--space-4);
border-top: 2px solid var(--color-line-strong);
background: var(--color-primary-soft);
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
body.customer-app .bill__total > span:last-child { color: var(--color-primary); }
/* -----------------------------------------------------------
24. Line items
----------------------------------------------------------- */
body.customer-app .line-item { padding: 16px var(--space-4); border-top: 1px solid var(--color-line); display: flex; align-items: flex-start; gap: 14px; }
body.customer-app .line-item__qty {
color: #fff;
background: var(--color-primary);
font-family: var(--font-body);
font-weight: 800;
font-size: 13px;
min-width: 28px;
height: 28px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 8px;
flex-shrink: 0;
letter-spacing: -0.01em;
}
body.customer-app .line-item__body { flex: 1; min-width: 0; }
body.customer-app .line-item__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
body.customer-app .line-item__desc { font-size: 13px; color: var(--color-text-dim); margin-top: 4px; line-height: 1.45; }
body.customer-app .line-item__price { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
body.customer-app .line-item__remove { width: 34px; height: 34px; transition: background var(--t-fast), color var(--t-fast); border-radius: var(--radius-pill); }
body.customer-app .line-item__remove:hover { color: var(--color-primary); background: var(--color-primary-soft); }
/* -----------------------------------------------------------
25. Dividers
----------------------------------------------------------- */
body.customer-app .divider {
height: 1px;
background: var(--color-line);
border: 0;
margin: 0;
}
body.customer-app .divider-thick {
height: 2px;
background: var(--color-line-strong);
}
body.customer-app .divider-ornate {
height: 1px;
border: 0;
background: var(--color-line);
margin: 4px 0;
}
/* -----------------------------------------------------------
26. Splash
----------------------------------------------------------- */
body.customer-app .splash__logo {
width: 128px; height: 128px;
border-radius: 30px;
background: #fff;
box-shadow:
0 0 0 4px var(--color-primary),
0 30px 60px var(--color-primary-glow);
}
/* -----------------------------------------------------------
27. Guest card
----------------------------------------------------------- */
body.customer-app .guest-card {
padding: 20px 22px;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-sm);
transition: transform var(--t-fast), box-shadow var(--t), border-color var(--t-fast);
position: relative;
overflow: hidden;
display: block;
text-decoration: none;
}
body.customer-app .guest-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--color-line-strong); text-decoration: none; }
body.customer-app .guest-card__name { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }
body.customer-app .guest-card__sub { margin-top: 6px; color: var(--color-primary); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* -----------------------------------------------------------
28. Status row
----------------------------------------------------------- */
body.customer-app .status-row {
gap: 8px;
padding: 5px 12px;
border-radius: var(--radius-pill);
background: var(--color-basil-soft);
color: var(--color-basil-deep);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
}
/* -----------------------------------------------------------
29. Backdrop + modal
----------------------------------------------------------- */
body.customer-app .backdrop {
background: rgba(30, 20, 16, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body.customer-app .modalbox {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: 22px 24px 26px;
border: 1px solid var(--color-line);
box-shadow: var(--shadow-lg);
}
body.customer-app .modalbox__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.025em; }
body.customer-app .modalbox__textarea {
padding: 14px;
background: var(--color-bg-2);
border: 1.5px solid var(--color-line-strong);
border-radius: var(--radius);
min-height: 96px;
}
body.customer-app .modalbox__counter { font-size: 12px; color: var(--color-text-mid); font-variant-numeric: tabular-nums; }
body.customer-app .modalbox__note { font-size: 13px; color: var(--color-text-mid); line-height: 1.5; }
/* -----------------------------------------------------------
30. Address + support + theme rows
----------------------------------------------------------- */
body.customer-app .addr-row { padding: 18px var(--space-4); border-bottom: 1px solid var(--color-line); transition: background var(--t-fast); }
body.customer-app .addr-row:hover { background: var(--color-primary-soft); }
body.customer-app .addr-row__text { font-size: 15px; line-height: 1.5; }
body.customer-app .addr-row__remove { width: 34px; height: 34px; transition: background var(--t-fast), color var(--t-fast); border-radius: var(--radius-pill); }
body.customer-app .addr-row__remove:hover { color: var(--color-primary); background: var(--color-primary-soft); }
body.customer-app .support-tile { padding: 28px 0; transition: color var(--t-fast); color: var(--color-text); }
body.customer-app .support-tile:hover { color: var(--color-primary); text-decoration: none; }
body.customer-app .support-tile + .support-tile { border-top: 1px solid var(--color-line); padding-top: 32px; margin-top: 8px; }
body.customer-app .support-tile__label { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
body.customer-app .theme-row {
padding: 22px var(--space-4);
border-top: 1px solid var(--color-line);
color: var(--color-text);
transition: background var(--t-fast);
}
body.customer-app .theme-row:hover { background: var(--color-primary-soft); color: var(--color-primary); text-decoration: none; }
body.customer-app .theme-row__label { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
/* -----------------------------------------------------------
31. Pending order
----------------------------------------------------------- */
body.customer-app .pending-order {
background: var(--color-primary-soft);
padding: 16px var(--space-4);
gap: 14px;
color: var(--color-text);
border: 0;
border-bottom: 1px solid var(--color-line);
display: flex;
align-items: center;
transition: background var(--t-fast);
text-decoration: none;
}
body.customer-app .pending-order:hover { background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-text); text-decoration: none; }
body.customer-app .pending-order__thumb {
width: 56px; height: 56px;
background: var(--color-surface);
border-radius: var(--radius);
color: var(--color-text-dim);
border: 1px solid var(--color-line);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.customer-app .pending-order__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--color-text); }
body.customer-app .pending-order__ago { font-size: 13px; color: var(--color-text-dim); font-weight: 500; }
body.customer-app .pending-order__bag { color: var(--color-text-mid); font-size: 13px; font-weight: 500; }
body.customer-app .pending-order__cta { color: var(--color-primary); font-size: 14px; font-weight: 700; }
/* -----------------------------------------------------------
32. Loyalty + saved cards
----------------------------------------------------------- */
body.customer-app .loyalty-balance {
padding: 38px 20px;
border: 0;
border-radius: var(--radius-lg);
margin: 18px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
}
body.customer-app .loyalty-balance::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.14), transparent 50%);
pointer-events: none;
}
body.customer-app .loyalty-balance__num {
font-family: var(--font-display);
font-size: 80px;
font-weight: 800;
line-height: 1;
color: #fff;
font-variant-numeric: tabular-nums;
position: relative;
text-shadow: 0 4px 16px rgba(0,0,0,0.2);
letter-spacing: -0.04em;
}
body.customer-app .loyalty-balance__lbl {
font-size: 11px;
color: rgba(255,255,255,0.85);
margin-top: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
position: relative;
}
body.customer-app .saved-card {
padding: 16px 18px;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
body.customer-app .saved-card:hover { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow); }
body.customer-app .saved-card__icon {
width: 44px; height: 30px;
border-radius: var(--radius-sm);
background: var(--color-primary-soft);
color: var(--color-primary);
border: 1px solid var(--color-line);
display: inline-flex;
align-items: center;
justify-content: center;
}
body.customer-app .saved-card__num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
body.customer-app .saved-card__exp { font-size: 11.5px; color: var(--color-text-dim); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; font-weight: 600; }
/* -----------------------------------------------------------
33. Alerts
----------------------------------------------------------- */
body.customer-app .alert {
padding: 14px 16px;
border-radius: var(--radius);
background: var(--color-saffron-soft);
border: 1px solid rgba(232, 163, 61, 0.4);
color: var(--color-text);
font-size: 13.5px;
line-height: 1.5;
gap: 12px;
display: flex;
align-items: center;
}
body.customer-app .alert--danger { background: rgba(215,38,61,0.10); border-color: rgba(215,38,61,0.35); }
body.customer-app .alert--info { background: var(--color-primary-soft); border-color: rgba(215,38,61,0.30); }
body.customer-app .alert--success{ background: var(--color-basil-soft); border-color: rgba(79,143,79,0.32); }
/* -----------------------------------------------------------
34. List rows + coupon
----------------------------------------------------------- */
body.customer-app .list-row {
padding: 16px var(--space-4);
border-top: 1px solid var(--color-line);
color: var(--color-text);
transition: background var(--t-fast), color var(--t-fast);
gap: 16px;
}
body.customer-app .list-row:first-child { border-top: 0; }
body.customer-app .list-row:hover { background: var(--color-primary-soft); color: var(--color-primary-deep); text-decoration: none; }
body.customer-app .list-row__icon { color: var(--color-primary); }
body.customer-app .list-row__title { font-size: 15.5px; font-weight: 600; }
body.customer-app .list-row__tail { color: var(--color-text-dim); font-size: 13px; gap: 8px; }
body.customer-app .coupon-row {
padding: 20px var(--space-4);
gap: 14px;
color: var(--color-text);
border-top: 1px dashed var(--color-line-strong);
}
body.customer-app .coupon-row__lbl { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
/* -----------------------------------------------------------
35. Hygiene + dark bar + preorder banner
----------------------------------------------------------- */
body.customer-app .hygiene-tile {
margin: 16px var(--space-3) 0;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--color-basil), var(--color-basil-deep));
color: #FFF;
box-shadow: var(--shadow);
overflow: hidden;
}
body.customer-app .hygiene-tile__title { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.015em; }
body.customer-app .hygiene-tile__inspect { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
body.customer-app .hygiene-tile__date { font-size: 15px; font-weight: 700; }
body.customer-app .hygiene-tile__body { height: 92px; background: rgba(255,255,255,0.16); }
body.customer-app .dark-bar {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
color: #fff;
padding: 18px var(--space-4);
border-bottom: 0;
}
body.customer-app .preorder-banner {
margin: 14px 12px 6px;
padding: 13px 15px;
border-radius: var(--radius-md);
background: var(--color-saffron-soft);
border: 1px solid color-mix(in srgb, var(--color-saffron) 42%, transparent);
color: var(--color-text);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
display: flex;
align-items: center;
gap: 12px;
}
/* -----------------------------------------------------------
36. Pin row + spacers
----------------------------------------------------------- */
body.customer-app .pin-row { font-size: 13px; color: var(--color-text-mid); gap: 6px; display: inline-flex; align-items: center; }
body.customer-app .pin-row .star-rating { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
body.customer-app .pin-row .star-rating__num { color: var(--color-saffron-deep); font-weight: 800; }
body.customer-app .pin-row .star-rating__count { color: var(--color-text-dim); font-size: 12px; }
body.customer-app .bottom-pad { height: 96px; }
body.customer-app .bottom-pad--sm { height: 64px; }
/* -----------------------------------------------------------
37. Foodhub label
----------------------------------------------------------- */
body.customer-app .foodhub-label {
color: #E2231A;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.1em;
font-family: var(--font-display);
}
/* -----------------------------------------------------------
38. Apple Pay badge
----------------------------------------------------------- */
body.customer-app .applepay-badge {
background: #2A1810;
color: #fff;
padding: 5px 12px;
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 3px;
}
body.customer-app .applepay-badge svg { fill: #fff; }
/* -----------------------------------------------------------
39. Desktop framing
----------------------------------------------------------- */
@media (min-width: 540px) {
body.customer-app {
background: #EFE3CB;
background-image:
radial-gradient(1200px 700px at 50% -180px, rgba(255, 200, 87, 0.30), transparent 60%),
radial-gradient(900px 500px at 100% 110%, rgba(215, 38, 61, 0.12), transparent 60%),
radial-gradient(700px 400px at 0% 90%, rgba(79, 143, 79, 0.08), transparent 60%);
}
html[data-theme="dark"] body.customer-app {
background: #0E0906;
background-image:
radial-gradient(1200px 700px at 50% -180px, rgba(255, 200, 87, 0.14), transparent 60%),
radial-gradient(900px 500px at 100% 110%, rgba(215, 38, 61, 0.18), transparent 60%);
}
body.customer-app .page {
box-shadow: 0 0 0 1px var(--color-line), 0 40px 100px rgba(60, 30, 12, 0.18);
background: var(--color-bg);
}
body.customer-app .app-header,
body.customer-app .bottom-nav {
box-shadow: 0 0 0 1px var(--color-line);
}
}
/* -----------------------------------------------------------
40. Reduced motion
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.customer-app *,
body.customer-app *::before,
body.customer-app *::after {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
}
/* -----------------------------------------------------------
41. Install-as-app banner (mobile only)
----------------------------------------------------------- */
body.customer-app .install-app-banner {
position: relative;
display: grid;
grid-template-columns: 48px 1fr;
gap: 14px;
align-items: start;
margin: 14px 12px 0;
padding: 16px 44px 16px 16px;
border-radius: var(--radius-lg);
background: var(--color-surface);
border: 1px solid var(--color-line);
box-shadow: var(--shadow);
overflow: hidden;
opacity: 0;
transform: translateY(6px);
transition: opacity var(--t), transform var(--t);
}
body.customer-app .install-app-banner.is-visible {
opacity: 1;
transform: translateY(0);
}
body.customer-app .install-app-banner::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--color-primary);
}
body.customer-app .install-app-banner__icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: grid;
place-items: center;
color: var(--color-primary-contrast);
background: linear-gradient(140deg, var(--color-primary), var(--color-primary-deep));
box-shadow: var(--shadow-red);
}
body.customer-app .install-app-banner__body { min-width: 0; }
body.customer-app .install-app-banner__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
line-height: 1.25;
color: var(--color-text);
margin: 2px 0 4px;
}
body.customer-app .install-app-banner__sub {
font-size: 13.5px;
line-height: 1.45;
color: var(--color-text-mid);
}
body.customer-app .install-app-banner__actions {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
margin-top: 12px;
}
body.customer-app .install-app-banner__cta {
min-height: 38px;
padding-inline: 18px;
border-radius: var(--radius-pill);
font-weight: 700;
letter-spacing: 0.01em;
}
body.customer-app .install-app-banner__later {
appearance: none;
background: transparent;
border: 0;
padding: 6px 4px;
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--color-text-dim);
cursor: pointer;
}
body.customer-app .install-app-banner__later:hover {
color: var(--color-text-mid);
text-decoration: underline;
}
body.customer-app .install-app-banner__hint {
margin-top: 10px;
padding: 10px 12px;
border-radius: var(--radius);
background: var(--color-surface-2);
color: var(--color-text-mid);
font-size: 12.5px;
line-height: 1.5;
}
body.customer-app .install-app-banner__close {
position: absolute;
top: 8px;
inset-inline-end: 8px;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--color-text-dim);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
}
body.customer-app .install-app-banner__close:hover {
background: var(--color-surface-2);
color: var(--color-text);
}
/* Desktop: keep it hidden — banner only makes sense on phones/tablets. */
@media (min-width: 900px) {
body.customer-app .install-app-banner {
display: none !important;
}
}
/* ============================================================
42. Layout completion — display / flex / grid properties for
food-app specific components that don't exist in base app.css.
============================================================ */
/* Brand hero block (menu landing) */
body.customer-app .brand-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
body.customer-app .brand-hero__logo {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.customer-app .brand-hero__logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
body.customer-app .brand-hero__name {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
body.customer-app .brand-hero__meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
max-width: 100%;
}
body.customer-app .brand-hero__row {
display: flex;
align-items: stretch;
gap: 8px;
width: 100%;
flex-wrap: wrap;
margin-top: 6px;
}
/* Hero card slot for primary featured image */
body.customer-app .hero-card { display: block; position: relative; }
/* ---------- Home hero slider (carousel of featured items) ---------- */
body.customer-app .hero-slider-wrap {
padding: 8px 0 0;
position: relative;
}
body.customer-app .hero-slider {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 0 12px;
}
body.customer-app .hero-slider::-webkit-scrollbar { display: none; }
body.customer-app .hero-slider { scrollbar-width: none; -ms-overflow-style: none; }
body.customer-app .hero-slide {
flex: 0 0 calc(100% - 24px);
scroll-snap-align: center;
aspect-ratio: 16 / 10;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
display: block;
text-decoration: none;
box-shadow: var(--shadow);
background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface-3));
}
body.customer-app .hero-slide:hover { text-decoration: none; }
body.customer-app .hero-slide__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms ease;
}
body.customer-app .hero-slide:hover .hero-slide__img { transform: scale(1.03); }
body.customer-app .hero-slide__img--empty {
position: relative;
}
body.customer-app .hero-slide__img--empty::after {
content: "";
position: absolute;
inset: 0;
background: center / 28% no-repeat
url("data:image/svg+xml;utf8,");
opacity: 0.5;
}
body.customer-app .hero-slide__gradient {
position: absolute;
inset: 0;
background: linear-gradient(0deg,
rgba(0,0,0,0.78) 0%,
rgba(0,0,0,0.30) 40%,
rgba(0,0,0,0.05) 70%,
transparent 100%);
pointer-events: none;
}
body.customer-app .hero-slide__body {
position: absolute;
left: 20px;
right: 20px;
bottom: 18px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
color: #fff;
}
body.customer-app .hero-slide__name {
font-family: var(--font-script);
font-style: italic;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.005em;
line-height: 1.12;
color: #fff;
text-shadow: 0 2px 16px rgba(0,0,0,0.55);
flex: 1;
min-width: 0;
}
body.customer-app .hero-slide__price {
padding: 8px 14px;
background: #fff;
color: var(--color-text);
border-radius: var(--radius-pill);
font-weight: 800;
font-size: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,0.20);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
flex-shrink: 0;
}
body.customer-app .hero-slider-dots {
padding: 14px 0 4px;
}
/* ---------- Item detail hero image ---------- */
body.customer-app .item-hero {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
overflow: hidden;
background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface-3));
}
body.customer-app .item-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.customer-app .item-hero__img--empty {
position: relative;
}
body.customer-app .item-hero__img--empty::after {
content: "";
position: absolute;
inset: 0;
background: center / 24% no-repeat
url("data:image/svg+xml;utf8,");
opacity: 0.5;
}
/* The close button sits inside .item-hero — keep it floating top-right */
body.customer-app .item-hero .round-btn {
position: absolute;
top: 14px;
inset-inline-end: 14px;
z-index: 2;
}
body.customer-app .hero-card__body {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
}
/* Card list — vertical stack of clickable rows */
body.customer-app .card-list__row {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
text-decoration: none;
cursor: pointer;
}
body.customer-app .card-list__row-icon { flex-shrink: 0; display: inline-flex; }
body.customer-app .card-list__row-title { flex: 1; min-width: 0; }
body.customer-app .card-list__row-tail {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-text-dim);
font-size: 13px;
}
/* List rows (generic) */
body.customer-app .list-row {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
}
body.customer-app .list-row__icon { flex-shrink: 0; display: inline-flex; }
body.customer-app .list-row__title { flex: 1; min-width: 0; }
body.customer-app .list-row__tail { display: inline-flex; align-items: center; }
/* Item row (menu items on category list) */
body.customer-app .item-row {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
body.customer-app .item-row__body { flex: 1; min-width: 0; }
body.customer-app .item-row__img { flex-shrink: 0; }
/* Item card (horizontal scroller chip) */
body.customer-app .item-card {
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
}
/* Category tile */
body.customer-app .cat-tile { display: block; text-decoration: none; }
/* Horizontal scroll strip */
body.customer-app .scroll-row {
display: flex;
gap: 12px;
overflow-x: auto;
padding: 0 var(--space-4) 16px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
body.customer-app .scroll-row > * {
scroll-snap-align: start;
flex-shrink: 0;
}
/* Offer card (horizontal scroll on home) */
body.customer-app .offer-card { display: block; text-decoration: none; position: relative; }
body.customer-app .offer-card__media { position: relative; }
body.customer-app .offer-card__body { padding: 12px 14px 14px; }
body.customer-app .offer-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
/* Searchbox */
body.customer-app .searchbox {
display: flex;
align-items: center;
gap: 10px;
}
body.customer-app .searchbox__input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
color: var(--color-text);
font-size: 15px;
outline: 0;
}
/* Section heading row */
body.customer-app .section-head { display: flex; align-items: center; gap: 12px; }
/* Modifier row */
body.customer-app .modifier-row { display: flex; align-items: center; gap: 14px; }
body.customer-app .modifier-row__label { flex: 1; min-width: 0; }
/* Quantity stepper */
body.customer-app .qty { display: inline-flex; align-items: center; gap: 14px; }
body.customer-app .qty__btn { display: inline-flex; align-items: center; justify-content: center; }
body.customer-app .qty__value { display: inline-block; text-align: center; }
/* Segmented control */
body.customer-app .segment { display: flex; align-items: stretch; }
body.customer-app .segment__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 1;
text-align: center;
text-decoration: none;
}
body.customer-app .segment__btn-label {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
}
body.customer-app .segment__sub {
display: block;
font-size: 10px;
font-weight: 400;
color: var(--color-text-dim);
line-height: 1.1;
}
/* Tabs */
body.customer-app .tabs { display: flex; overflow-x: auto; gap: 0; -webkit-overflow-scrolling: touch; }
body.customer-app .tabs__tab { display: inline-block; white-space: nowrap; text-decoration: none; }
/* Timeline (order status) */
body.customer-app .timeline { position: relative; padding: 28px var(--space-4) 18px; }
body.customer-app .timeline__steps { display: flex; justify-content: space-between; position: relative; z-index: 1; }
body.customer-app .timeline__step {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 0 6px;
flex: 1;
text-align: center;
}
body.customer-app .timeline__step-circle {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
}
/* Bill rows */
body.customer-app .bill__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
body.customer-app .bill__total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
/* Line items (cart/order) */
body.customer-app .line-item { display: flex; align-items: flex-start; gap: 14px; }
body.customer-app .line-item__body { flex: 1; min-width: 0; }
body.customer-app .line-item__remove {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
background: transparent;
border: 0;
flex-shrink: 0;
}
/* Order status head + bag check */
body.customer-app .order-status-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
/* Vertical order-tracking timeline */
body.customer-app .track-timeline {
list-style: none;
margin: 0;
padding: 4px var(--space-4) 8px;
}
body.customer-app .track-step {
position: relative;
display: flex;
gap: 16px;
min-height: 56px;
}
body.customer-app .track-step__marker {
position: relative;
flex: 0 0 34px;
display: flex;
justify-content: center;
}
/* connecting line between dots */
body.customer-app .track-step:not(:last-child) .track-step__marker::after {
content: '';
position: absolute;
top: 34px;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 2px;
background: var(--color-line);
border-radius: 2px;
}
body.customer-app .track-step__dot {
position: relative;
z-index: 1;
width: 34px;
height: 34px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-surface-2);
color: var(--color-text-dim);
border: 2px solid var(--color-line);
transition: background .2s, border-color .2s, box-shadow .2s;
}
body.customer-app .track-step__num { font-size: 12px; font-weight: 700; }
body.customer-app .track-step__content { flex: 1; padding-block: 5px 12px; }
body.customer-app .track-step__label {
font-weight: 600;
font-size: 15px;
color: var(--color-text-dim);
}
body.customer-app .track-step__sub {
margin-top: 3px;
font-size: 13px;
color: var(--color-primary);
font-weight: 600;
}
/* completed steps */
body.customer-app .track-step.is-done .track-step__dot {
background: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
body.customer-app .track-step.is-done .track-step__marker::after { background: var(--color-success); }
body.customer-app .track-step.is-done .track-step__label { color: var(--color-text); }
/* current step */
body.customer-app .track-step.is-current .track-step__dot {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
box-shadow: 0 0 0 4px var(--color-primary-glow);
}
body.customer-app .track-step.is-current .track-step__label {
color: var(--color-text);
font-weight: 700;
}
/* Address rows */
body.customer-app .addr-row {
display: flex;
align-items: center;
gap: 14px;
}
body.customer-app .addr-row__body { flex: 1; min-width: 0; }
body.customer-app .addr-row__remove {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 0;
background: transparent;
}
/* Support tiles + theme rows */
body.customer-app .support-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 100%;
text-decoration: none;
}
body.customer-app .theme-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-decoration: none;
width: 100%;
cursor: pointer;
background: transparent;
}
/* Pending order */
body.customer-app .pending-order { display: flex; align-items: center; gap: 14px; width: 100%; text-decoration: none; }
body.customer-app .pending-order__body { flex: 1; min-width: 0; }
body.customer-app .pending-order__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
body.customer-app .pending-order__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
body.customer-app .pending-order__bag { display: flex; align-items: center; gap: 8px; }
/* Saved card */
body.customer-app .saved-card { display: flex; align-items: center; gap: 14px; }
body.customer-app .saved-card__body { flex: 1; min-width: 0; }
/* Coupon row */
body.customer-app .coupon-row { display: flex; align-items: center; gap: 14px; width: 100%; text-decoration: none; }
body.customer-app .coupon-row__body { flex: 1; min-width: 0; }
/* Simple table grid */
body.customer-app .simple-table { overflow: hidden; }
body.customer-app .simple-table__head,
body.customer-app .simple-table__row {
display: grid;
grid-template-columns: 1fr 2fr 2fr;
align-items: center;
}
/* Pin / star rating */
body.customer-app .pin-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.customer-app .pin-row .star-rating { display: inline-flex; align-items: center; gap: 4px; }
/* Bottom action bar / basket button */
body.customer-app .actionbar { z-index: 50; }
/* When the page also shows the bottom nav (e.g. menu/item),
raise the sticky actionbar so it sits above the nav instead of behind it. */
body.customer-app .page:not(.page--no-nav) .actionbar {
bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
padding-bottom: 12px;
}
body.customer-app .actionbar__body { display: grid; grid-template-columns: 1fr; gap: 10px; }
body.customer-app .actionbar__split { grid-template-columns: 1fr 1fr; }
body.customer-app .basket-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
text-decoration: none;
width: 100%;
border: 0;
text-align: start;
}
body.customer-app .basket-btn__left { display: flex; flex-direction: column; min-width: 0; }
body.customer-app .basket-btn__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Drawer / sheet header */
body.customer-app .drawer__header { display: flex; align-items: center; gap: 12px; }
body.customer-app .drawer__title { flex: 1; min-width: 0; margin: 0; }
body.customer-app .sheet__header { display: flex; align-items: center; justify-content: space-between; }
/* Modal header */
body.customer-app .modalbox__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Dots row */
body.customer-app .dots { display: flex; justify-content: center; gap: 8px; }
body.customer-app .dot { border: 0; padding: 0; cursor: pointer; }
/* Empty state */
body.customer-app .empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Guest card name/sub wrapping */
body.customer-app .guest-card__name,
body.customer-app .guest-card__sub { position: relative; }
/* Hygiene tile head + body */
body.customer-app .hygiene-tile__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px 18px;
gap: 12px;
}
body.customer-app .hygiene-tile__sub { text-align: end; }
/* Field box (floating-label container) */
body.customer-app .field-box .field__label--floating { display: inline-block; }
/* Toast container */
body.customer-app .toasts { display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
body.customer-app .toast { pointer-events: auto; }
/* Brand row CTA fallback for narrow screens */
@media (max-width: 360px) {
body.customer-app .brand-hero__row { flex-direction: column; }
}
/* Recommendation row inside .card on home — when content uses .row-between */
body.customer-app .card .row-between { gap: 12px; }
body.customer-app .card .row-between > .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ── Social login ("Continue with Google") ─────────────────────────── */
body.customer-app .social-auth { margin-block-start: var(--space-5); }
body.customer-app .social-auth__sep {
display: flex;
align-items: center;
gap: 12px;
margin-block-end: var(--space-4);
}
body.customer-app .social-auth__sep .divider { flex: 1; }
body.customer-app .social-auth__sep-text {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-dim);
white-space: nowrap;
}
body.customer-app .btn-social {
inline-size: 100%;
gap: 10px;
}
body.customer-app .btn-social svg {
inline-size: 18px;
block-size: 18px;
flex-shrink: 0;
}