/* ============================================================
   "Pizza" theme - this theme's own styles.
   Design system + page styles. RTL, Peyda, no external deps.

   Ownership: resources/views/themes/pizza/ + this file. Other themes (burger, ...) have their
   own CSS file and inherit nothing from this one.
   ============================================================ */

/* ---------- Fonts (reuse existing Peyda files) ---------- */
@font-face {
    font-family: 'Peyda';
    src: url('/theme/font/PeydaWeb-Light/PeydaWeb-Light-1.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Peyda';
    src: url('/theme/font/Peyda-Medium/peyda_medium.woff2') format('woff2'),
         url('/theme/font/Peyda-Medium/peyda_medium.woff') format('woff');
    font-weight: 400 500;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Peyda';
    src: url('/theme/font/PeydaWeb-Bold/PeydaWeb-Bold-1.woff2') format('woff2'),
         url('/theme/font/PeydaWeb-Bold/PeydaWeb-Bold-1.woff') format('woff');
    font-weight: 600 800;
    font-style: normal;
    font-display: block;
}

/* ---------- Design tokens ---------- */
:root {
    /* Color */
    --bg: #F6F7F8;
    --surface: #FFFFFF;
    --primary: #F4720B;
    --primary-hover: #DD6303;
    --primary-tint: #FFF3E8;
    --secondary: #2E5252;          /* brand dark green — emphasis only */
    --secondary-deep: #24403F;
    --secondary-tint: #EAF1F1;
    --text-strong: #111827;
    --text: #374151;
    --text-muted: #6B7280;
    --border: #E7EAEC;
    --success: #16A34A;
    --success-tint: #E8F7EE;
    --warning: #F59E0B;
    --error: #DC2626;
    --star: #F5A623;

    /* Scrollbar thumb (neutral, matches the theme's surface contrast). */
    --scroll-thumb: rgba(17, 24, 39, .22);
    --scroll-thumb-hover: rgba(17, 24, 39, .38);

    /* Semantic tokens — the theme-swappable layer. Light values equal the
       literals they replaced, so the light theme is byte-for-byte unchanged;
       [data-theme="green"] below overrides them. */
    --on-primary: #fff;          /* text/icon on primary/accent/dark bands */
    --surface-2: #F1F3F4;        /* faint raised surface (skeleton shimmer) */
    --surface-glass: rgba(255, 255, 255, .92); /* sticky header / floating btns */
    --gradient-top: #FFFFFF;     /* top of light section gradients (hero, page-head) */
    --overlay: rgba(17, 24, 39, .55);          /* modal scrim */
    --error-tint: #FDECEC;       /* destructive hover background */
    --input-bg: var(--surface);  /* text input background */
    --ink: #111827;              /* always-dark chrome (store btn, phone, tooltip) */
    --on-ink: #FFFFFF;           /* light detail carved out of --ink (QR holes) */

    /* Spacing scale: 4 8 12 16 20 24 32 40 48 64 80 96 */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

    /* Type scale */
    --fs-12: 0.75rem;  --fs-14: 0.875rem; --fs-16: 1rem;   --fs-18: 1.125rem;
    --fs-20: 1.25rem;  --fs-24: 1.5rem;   --fs-32: 2rem;   --fs-40: 2.5rem;
    /* Intermediate steps - used in several places but never defined, and they silently fell back
       to the inherited font. */
    --fs-13: 0.8125rem; --fs-15: 0.9375rem;

    /* Radius */
    --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px; --r-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 4px rgba(17, 24, 39, .04);
    --shadow-md: 0 4px 12px rgba(17, 24, 39, .07), 0 2px 4px rgba(17, 24, 39, .04);
    --shadow-lg: 0 16px 40px rgba(17, 24, 39, .12), 0 4px 12px rgba(17, 24, 39, .06);

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: 200ms var(--ease);
    --t-med: 300ms var(--ease);

    --header-h: 76px;
}

/* ============================================================
   Green theme — admin-selectable second skin.
   data-theme sits on <html> (server-rendered in the layout, so no FOUC)
   and lives on :root so it wins over prefers-color-scheme.

   Brand palette:
     --primary   = #ffa600  (orange accent — CTAs, cart count, sale badges)
     --secondary = #193d3d  (dark green — header/footer/dark bands/text)
     light green = #a7d396  (secondary buttons, chips, soft tints)
     white       = main page + cards + inputs

   The interface is white-dominant (~55% white, ~30% light-green,
   ~12% dark-green, ~3% orange). Orange is reserved for buy-flow CTAs
   and attention-grabbing fills only. Every orange fill carries
   dark-green text (white-on-#ffa600 fails WCAG AA). Scoped component
   overrides for the green theme are appended at the bottom of this file.
   ============================================================ */
:root[data-theme="green"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #eef6e8;
    --surface-glass: rgba(25, 61, 61, .94);   /* dark-green header glass */
    --gradient-top: #ffffff;

    --primary: #ffa600;          /* orange accent */
    --primary-hover: #e59400;
    --primary-tint: #eef6e8;     /* light-green soft tint */

    --secondary: #193d3d;        /* dark green — chrome / dark bands / text */
    --secondary-deep: #102626;
    --secondary-tint: #eef6e8;   /* light-green tint for product media etc. */

    --text-strong: #16302f;      /* dark green-charcoal — headings, prices */
    --text: #3a4a48;             /* body text (AA on white) */
    --text-muted: #5e716c;       /* muted gray-green (AA on white) */
    --border: #d8e6d2;           /* soft green-gray hairline */

    --success: #4ea36a;
    --success-tint: rgba(78, 163, 106, .14);
    --error: #d24a3f;
    --error-tint: rgba(210, 74, 63, .12);

    --overlay: rgba(8, 20, 20, .55);
    --input-bg: #ffffff;

    /* Scrollbar: dark-green thumb on white surface. */
    --scroll-thumb: rgba(25, 61, 61, .26);
    --scroll-thumb-hover: rgba(25, 61, 61, .42);

    /* --ink / --on-ink stay dark-on-light: they are the always-dark chrome. */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .14);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .16);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .32), 0 4px 12px rgba(0, 0, 0, .2);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

/* ---------- Scrollbars (theme-aware) ----------
   Firefox reads scrollbar-color from the tokens directly (set below per
   theme). WebKit/Chromium get a slim neutral thumb that also re-reads the
   token layer, so each theme (light / green / green-dark) gets a scrollbar
   that matches its surface + accent without any extra markup. Inner scroll
   areas that hide their scrollbar (rail / account-nav) are left untouched. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

body {
    font-family: 'Peyda', Tahoma, Arial, sans-serif;
    font-size: var(--fs-16);
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* hidden must beat component display rules (.btn, .qty-stepper, .modal, …) */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.4; font-weight: 700; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 60%, white);
    outline-offset: 2px;
    border-radius: var(--r-8);
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--s-4);
    top: -100px;
    z-index: 200;
    background: var(--secondary);
    color: var(--on-primary);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-12);
    transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s-4); }

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--s-8);
}

.icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.icon-sm { width: 16px; height: 16px; }
.icon-star { fill: var(--star); stroke: var(--star); }
.icon-verified { stroke: var(--success); }

.link { color: var(--secondary); font-weight: 600; }
.link:hover { color: var(--primary); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-12);
    border: 1.5px solid transparent;
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
                box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: scale(.97); }
/* Without this a locked "Place order" (empty or below-minimum cart) looked as clickable as ever. */
.btn:disabled,
.btn:disabled:hover {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-lg { padding: var(--s-4) var(--s-8); font-size: var(--fs-16); border-radius: var(--r-16); }
.btn-block { width: 100%; }

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 14px rgba(244, 114, 11, .3);
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 6px 18px rgba(244, 114, 11, .38); }

.btn-secondary {
    background: var(--surface);
    color: var(--secondary);
    border-color: var(--secondary);
}
.btn-secondary:hover { background: var(--secondary-tint); }

.btn-outline {
    background: var(--surface);
    color: var(--text-strong);
    border-color: var(--border);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn-ghost { background: rgba(255, 255, 255, .12); color: var(--on-primary); }
.btn-ghost:hover { background: rgba(255, 255, 255, .22); }

.btn-text { background: none; color: var(--primary); padding-inline: var(--s-2); }
.btn-text:hover { color: var(--primary-hover); }
.btn-text:disabled { color: var(--text-muted); cursor: default; }

.btn-danger { background: var(--error); color: var(--on-primary); }
.btn-danger:hover { background: #B91C1C; }

/* ---------- Badges / tags ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-full);
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.6;
}
.badge-sm { font-size: var(--fs-12); padding-block: 2px; }
.badge-success { background: var(--success-tint); color: var(--success); }
.badge-off { background: var(--error); color: var(--on-primary); font-size: var(--fs-12); }
.badge-warm { background: rgba(255, 255, 255, .14); color: #FFD9B8; }
.badge-muted { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ---------- Inputs ---------- */
.input {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    border: 1.5px solid var(--border);
    border-radius: var(--r-12);
    background: var(--surface);
    color: var(--text-strong);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-tint);
}
textarea.input { resize: vertical; min-height: 110px; }

.input.is-invalid { border-color: var(--error); }
.input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field-label { font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); }
.field-error { font-size: var(--fs-12); font-weight: 600; color: var(--error); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.select-wrap { position: relative; display: block; }
.select { appearance: none; padding-inline-end: var(--s-10); }
.select-wrap > .icon {
    position: absolute;
    inset-inline-end: var(--s-4);
    top: 50%;
    translate: 0 -50%;
    pointer-events: none;
    color: var(--text-muted);
}

/* ---------- Card ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-16);
    box-shadow: var(--shadow-sm);
}

/* ---------- Sections ---------- */
.section { padding-block: var(--s-12); }
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-8);
}
.section-head-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-title { font-size: var(--fs-32); line-height: 1.3; }
.section-sub { color: var(--text-muted); margin-top: var(--s-1); }

.section-tight { padding-block: var(--s-6); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Page head (inner pages: archive, …) ---------- */
.page-head {
    background: linear-gradient(180deg, var(--gradient-top) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    padding-block: var(--s-8);
}
.page-title { font-size: var(--fs-32); }
.page-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-4);
    flex-wrap: wrap;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-14);
    color: var(--text-muted);
}
.breadcrumb a { transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb [aria-current] { color: var(--text-strong); font-weight: 600; }

/* ---------- Menu toolbar (archive) ---------- */
.menu-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-3) var(--s-5);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
}
.menu-toolbar-count {
    font-size: var(--fs-14);
    font-weight: 700;
    background: var(--secondary-tint);
    color: var(--secondary);
    border-radius: var(--r-full);
    padding: var(--s-1) var(--s-4);
}
.menu-toolbar-off {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
/* The "discounted only" checkbox gets the global control styling. */
.menu-toolbar-off .badge-off { font-size: var(--fs-12); padding-block: 0; }
.menu-toolbar-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-inline-start: auto;
}
.menu-toolbar-sort .field-label { white-space: nowrap; }

/* ------------------------------------------------------------
   Menu filter bar on mobile: a two-column grid, not flex-wrap.

   With wrap each control took its content width and rows misaligned: search stayed beside the
   counter and became so narrow its placeholder was cut off, and "Apply" sat alone and
   unbalanced at the bottom of the bar.

   Now search takes the full width and the rest pair up half-and-half. order sets the visual
   order; the tab order of the focusable controls (search > discount > sort > apply) is the same
   because the counter isn't focusable at all.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* WARNING: auto-placement with order, not fixed grid-area. A fixed area was tied to the number
       of controls: after adding the "available" checkbox, two checkboxes took the same "2 / 2" cell and
       overlapped. With order, each new control just fills the next row.
    
       Layout: search full-width, two checkboxes side by side, counter and sort,
       "Apply" full-width. */
    .menu-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: var(--s-3);
        padding: var(--s-4);
    }

    .menu-toolbar-search { order: 1; grid-column: 1 / -1; min-width: 0; }
    .menu-toolbar-off { order: 2; gap: var(--s-2); }
    .menu-toolbar-count { order: 3; justify-self: start; }
    .menu-toolbar-sort { order: 4; margin-inline-start: 0; width: 100%; }
    .menu-toolbar-sort .sort-btn { width: 100%; justify-content: space-between; }
    .menu-toolbar > .btn { order: 5; grid-column: 1 / -1; }
}


/* Custom sort dropdown (the raw select was removed) */
.sort-wrap { position: relative; }
.sort-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--text-strong);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.sort-btn:hover { border-color: var(--primary); }
.sort-btn .sort-chevron { transition: transform var(--t-fast); color: var(--text-muted); }
.sort-wrap.is-open .sort-chevron { transform: rotate(180deg); }
.popover-sort {
    inset-inline-end: 0;
    inset-inline-start: auto;
    min-width: 220px;
    padding: var(--s-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sort-option {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-8);
    font-size: var(--fs-14);
    color: var(--text);
    text-align: start;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.sort-option:hover { background: var(--bg); color: var(--text-strong); }
.sort-option .icon { visibility: hidden; color: var(--primary); flex: none; }
.sort-option.is-active { color: var(--primary); font-weight: 700; background: var(--primary-tint); }
.sort-option.is-active .icon { visibility: visible; }

/* Scroll-reveal (JS adds .is-visible; no-JS stays visible) */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.site-header.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); }

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    height: var(--header-h);
}

.header-logo { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; }
.header-logo img { width: 44px; height: 44px; border-radius: var(--r-12); object-fit: cover; }
.header-logo-text { font-size: var(--fs-20); font-weight: 800; color: var(--text-strong); }

.header-search {
    position: relative;
    /* Base `auto`, not `60%`: with a percentage base the sum of bases always exceeded the row
       width (at 1200px: 128 + 682 + 460 + 40 = 1310 vs 1136), so the browser was always in
       "shrink" mode and crushed the logo and buttons. With a content base the free space is
       "distributed", not "taken back". */
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-16);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2);
    padding-inline-start: var(--s-4);
    color: var(--text-muted);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.header-search:focus-within {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--primary-tint);
}
.header-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding-block: var(--s-2);
    color: var(--text-strong);
}
.header-search-input:focus { outline: none; }
.header-search-input::-webkit-search-cancel-button { display: none; }
.header-search-btn { padding-block: var(--s-2); border-radius: var(--r-12); }

/* Live dropdown of search suggestions, tied to .header-search. */
.search-suggest {
    position: absolute;
    top: calc(100% + var(--s-2));
    inset-inline: 0;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-16);
    box-shadow: var(--shadow-lg);
    padding: var(--s-2);
    max-height: min(70vh, 460px);
    overflow-y: auto;
}
.search-suggest-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-12);
    color: var(--text-strong);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast);
}
.search-suggest-item:hover,
.search-suggest-item.is-active { background: var(--primary-tint); }
.search-suggest-item.is-out { opacity: .6; }
.search-suggest-thumb {
    width: 44px; height: 44px;
    border-radius: var(--r-8);
    object-fit: cover;
    background: var(--bg);
    flex: none;
}
.search-suggest-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-suggest-name {
    font-size: var(--fs-14);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-suggest-meta { font-size: var(--fs-12); color: var(--text-muted); }
.search-suggest-meta strong { color: var(--text-strong); font-weight: 700; }
.search-suggest-dot { margin-inline: 6px; opacity: .5; }
.search-suggest-cat { color: var(--text-muted); }
/* Matching part of the name - text color stays; only a light background. */
.search-suggest-mark {
    background: var(--primary-tint);
    color: inherit;
    border-radius: var(--r-8);
    padding: 0 2px;
}

/* Suggested-phrase chips - before typing. They sit where the suggestion dropdown sits, so both
   are never visible together. */
.search-terms {
    position: absolute;
    top: calc(100% + var(--s-2));
    inset-inline: 0;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-16);
    box-shadow: var(--shadow-lg);
    padding: var(--s-4);
}
.search-terms[hidden] { display: none; }
.search-terms-title {
    display: block;
    font-size: var(--fs-12);
    color: var(--text-muted);
    margin-bottom: var(--s-3);
}
.search-terms-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.search-term-chip {
    padding: 6px var(--s-4);
    border-radius: var(--r-full, 999px);
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text-strong);
    font-size: var(--fs-13);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.search-term-chip:hover { background: var(--primary-tint); border-color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.location-picker {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-12);
    color: var(--text-muted);
    transition: background var(--t-fast);
}
.location-picker:hover { background: var(--bg); }
.location-picker-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.4; }
.location-picker-label { font-size: var(--fs-12); color: var(--text-muted); }
.location-picker-value { font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: var(--r-12);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-strong);
    transition: border-color var(--t-fast), color var(--t-fast);
}
.cart-btn:hover { border-color: var(--primary); color: var(--primary); }

.cart-badge {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    min-width: 21px; height: 21px;
    padding-inline: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--fs-12);
    font-weight: 700;
    border-radius: var(--r-full);
    border: 2px solid var(--surface);
    transition: transform var(--t-fast);
}
.cart-badge.bump { animation: bump .3s var(--ease); }
@keyframes bump { 50% { transform: scale(1.35); } }

/* ---------- Header popovers (address picker / mini-cart) ---------- */
.pop-wrap { position: relative; }

.popover {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    width: min(320px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-16);
    box-shadow: var(--shadow-lg);
    padding: var(--s-5);
    z-index: 120;
}
.popover-title { font-size: var(--fs-16); margin-bottom: var(--s-4); }

/* caret pointing at the toggle */
.popover::before {
    content: '';
    position: absolute;
    top: -6px;
    inset-inline-end: var(--s-6);
    width: 12px; height: 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-inline-start: 1px solid var(--border);
    transform: rotate(315deg);
}

/* Click-driven popover (address): animates in when JS removes [hidden] */
.popover-address {
    width: min(340px, calc(100vw - 24px));
    animation: pop-in .2s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(8px); } }

/* Hover-driven popover (mini-cart): kept in flow, revealed on hover/focus */
.pop-hover .popover {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.pop-hover:hover .popover,
.pop-hover:focus-within .popover {
    opacity: 1;
    visibility: visible;
    transform: none;
}
/* invisible bridge so the pointer can travel into the popover */
.pop-hover::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: 12px;
}

/* Address picker */
.address-list { display: flex; flex-direction: column; gap: var(--s-2); max-height: 240px; overflow-y: auto; }
.address-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1.5px solid var(--border);
    border-radius: var(--r-12);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.address-item:hover { border-color: var(--primary); }
.address-item:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.address-item-text { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.address-item-text strong { font-size: var(--fs-14); color: var(--text-strong); }
.address-item-text small { font-size: var(--fs-12); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Branch picker: open/closed state + loading row */
.branch-loading { padding: var(--s-3); font-size: var(--fs-12); color: var(--text-muted); text-align: center; }
.address-item-text small.branch-open { color: var(--success); }
.address-item-text small.branch-closed { color: var(--text-muted); }

/* "Add new address" button in the header popover - opens the shared modal. */
.address-add-btn {
    margin-top: var(--s-4);
    padding-block: var(--s-2);
    font-size: var(--fs-13);
}

/* Address modal form */
.address-form { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }

/* Addresses in checkout: selectable cards (same family as option-card) */
.checkout-address-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.checkout-address-card { align-items: flex-start; }
.checkout-address-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.checkout-address-zone { font-size: var(--fs-12); color: var(--secondary); font-weight: 600; }
.checkout-address-empty {
    padding: var(--s-5);
    border: 1.5px dashed var(--border);
    border-radius: var(--r-12);
    color: var(--text-muted);
    font-size: var(--fs-13);
    text-align: center;
}

/* "My addresses" page in the panel */
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.address-card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.address-card.is-default { border: 1.5px solid var(--primary); }
.address-card-head { display: flex; align-items: center; gap: var(--s-2); }
.address-card-icon { color: var(--primary); line-height: 0; }
.address-card-title { font-size: var(--fs-15); color: var(--text-strong); margin-inline-end: auto; }
.address-card-text { font-size: var(--fs-13); color: var(--text); line-height: 1.8; }
.address-card-zone { font-size: var(--fs-12); color: var(--text-muted); }
.address-card-phone { font-size: var(--fs-12); color: var(--text-muted); text-align: end; }
.address-card-actions {
    display: flex;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px dashed var(--border);
}
.address-card-delete { color: var(--error); margin-inline-start: auto; }

@media (max-width: 768px) {
    .checkout-address-list, .address-grid { grid-template-columns: 1fr; }
}

/* Mini-cart */
.popover-cart { width: min(300px, calc(100vw - 24px)); }

/* Quick-add feedback on icon buttons */
.addon-add.is-added { background: var(--success, #16a34a); border-color: var(--success, #16a34a); }

/* Logged-in user menu in the header */
.user-btn { max-width: 200px; }
.user-btn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover-user { width: min(240px, calc(100vw - 24px)); }
.popover-user .popover-title { margin-bottom: var(--s-1); }
.popover-sub { font-size: var(--fs-12); color: var(--text-muted); margin-bottom: var(--s-4); }
.user-menu { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); }
.user-menu a {
    display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-12);
    font-size: var(--fs-14); color: var(--text);
}
.user-menu a:hover { background: var(--surface-2); color: var(--text-strong); }
/* Admin panel shortcut - rendered only for users with a panel role, so it stands out more than
   the other menu items. */
.user-menu a.user-menu-admin {
    display: flex; align-items: center; gap: var(--s-2);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: 700;
}
.user-menu a.user-menu-admin:hover { background: var(--primary); color: #fff; }
.user-menu-admin .icon { flex: none; }
.cart-pop-empty { font-size: var(--fs-14); color: var(--text-muted); text-align: center; padding-block: var(--s-4); }
.cart-pop-items { display: flex; flex-direction: column; gap: var(--s-3); max-height: 220px; overflow-y: auto; }
.cart-pop-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); }
.cart-pop-qty { color: var(--primary); font-weight: 700; flex: none; }
.cart-pop-name { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Add-ons / combo items under the name in the header mini-cart - small and faint. */
.cart-pop-extras {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.cart-pop-price { margin-inline-start: auto; font-weight: 600; color: var(--text); flex: none; }
.cart-pop-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--border);
    font-size: var(--fs-14);
    color: var(--text-muted);
}
.cart-pop-total strong { color: var(--text-strong); font-size: var(--fs-16); }
.cart-pop-actions { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-4); }

/* Mobile search button - hidden on desktop (the full form is in the header). */
.header-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--r-12);
    background: var(--surface-glass);
    color: var(--text-strong);
    box-shadow: var(--shadow-sm);
}
.header-search-toggle[aria-expanded="true"] { background: var(--primary); color: var(--on-primary); }

/* Mobile search - full-screen layer.
   z-index stays below the modal (150) so the product popup - opened by clicking a suggestion -
   sits on top of this layer; and above the header (100) and bottom bar (110) to cover the
   whole page. */
.header-search-mobile { display: none; position: fixed; inset: 0; z-index: 140; }
.header-search-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    animation: fade-in .2s var(--ease);
}
.header-search-sheet {
    position: absolute;
    inset-inline: 0;
    top: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--r-16) var(--r-16);
    box-shadow: var(--shadow-lg);
    padding: var(--s-5);
    padding-top: calc(var(--s-4) + env(safe-area-inset-top));
}
/* Layer header: title on the right, close on the left. The button is no longer in the form row,
   so it takes no width from the field. */
.header-search-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.header-search-sheet-title {
    margin: 0;
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--text-strong);
}
.header-search-sheet-form {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
/* The field now takes the full layer width. The padding is asymmetric so the solid button sits
   inside the frame with equal spacing to the frame on its edges. */
.header-search-field {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-16);
    padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
    color: var(--text-muted);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.header-search-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-tint);
}
.header-search-field > .icon { flex: none; }
.header-search-field .header-search-input { padding-block: var(--s-3); }
.header-search-field .header-search-btn { flex: none; padding-inline: var(--s-5); }
.header-search-close {
    flex: none;
    width: 38px; height: 38px;
    border-radius: var(--r-12);
    background: var(--bg);
    border: 1.5px solid var(--border);
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-search-hint { font-size: var(--fs-13); color: var(--text-muted); margin: 0; }
/* The hint shows only when there is neither a suggestion nor a chip - otherwise the layer would
   look empty, and next to the chips it would be redundant. */
.header-search-sheet-form:has(.search-suggest:not([hidden])) .header-search-hint,
.header-search-sheet-form:has(.search-terms:not([hidden])) .header-search-hint { display: none; }

/* Inside the layer, suggestions are no longer a floating dropdown; they sit in normal flow
   and take whatever is left of the page. */
.header-search-mobile .search-terms {
    position: static;
    z-index: auto;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
.header-search-mobile .search-suggest {
    position: static;
    z-index: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    background: linear-gradient(180deg, var(--gradient-top) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: var(--s-12);
    padding-block: var(--s-16);
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.hero-title { font-size: var(--fs-40); font-weight: 800; line-height: 1.35; }
.hero-title em { font-style: normal; color: var(--primary); }
.hero-sub { font-size: var(--fs-18); color: var(--text-muted); max-width: 46ch; }
/* On a phone both buttons must stay on one row: wrap stacked them and made the hero needlessly
   tall. flex: 1 1 0 with min-width: 0 lets the text shrink a bit instead of breaking the row. */
.hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 768px) {
    .hero-ctas { flex-wrap: nowrap; }
    .hero-ctas > .btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding-inline: var(--s-3);
        text-align: center;
    }
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    margin-top: var(--s-2);
    flex-wrap: wrap;
}
.hero-trust li { display: flex; align-items: center; gap: var(--s-2); }
.hero-trust strong { color: var(--text-strong); font-size: var(--fs-18); }
.hero-trust span { color: var(--text-muted); font-size: var(--fs-14); }
.hero-trust-sep { width: 1px; height: 24px; background: var(--border); }

.hero-media { position: relative; justify-self: center; }
.hero-media img {
    width: min(100%, 480px);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 28px 40px rgba(17, 24, 39, .18));
    animation: hero-in .7s var(--ease) both;
}
@keyframes hero-in { from { opacity: 0; transform: scale(.94) translateY(16px); } }
.hero-media-glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-tint) 0%, transparent 68%);
    z-index: -1;
}

.hero-float {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface);
    border-radius: var(--r-16);
    box-shadow: var(--shadow-lg);
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-12);
    color: var(--text-muted);
    animation: float 5s ease-in-out infinite;
}
.hero-float-strong { font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); }
.hero-float-off { top: 10%; inset-inline-start: -4%; }
.hero-float-off .hero-float-strong { color: var(--error); }
.hero-float-time { bottom: 12%; inset-inline-end: -4%; animation-delay: 2.5s; }
.hero-float-time .icon { color: var(--primary); margin-bottom: 2px; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* ============================================================
   Stats strip
   ============================================================ */
.stats { margin-top: calc(-1 * var(--s-8)); position: relative; z-index: 2; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
    padding: var(--s-6) var(--s-8);
    box-shadow: var(--shadow-md);
}
.stat { text-align: center; }
.stat dt { font-size: var(--fs-14); color: var(--text-muted); }
.stat dd { font-size: var(--fs-24); font-weight: 800; color: var(--secondary); margin: 0; }

/* ============================================================
   Categories
   ============================================================ */
/* The category rail is a single-row carousel, not a grid: with dozens of categories a grid broke
   into several rows and ate the whole top of the page, and on a phone nothing hinted that the
   row continues. The scrollbar and arrows are that hint. */
.rail-carousel { position: relative; }

.category-rail {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    padding-bottom: var(--s-2);
    scroll-snap-type: x proximity;
    /* Thin but visible - hiding it was the earlier mistake. */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.category-rail::-webkit-scrollbar { height: 6px; }
.category-rail::-webkit-scrollbar-track { background: var(--secondary-tint); border-radius: var(--r-full); }
.category-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-full); }
.category-rail::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.category-rail > li { flex: none; scroll-snap-align: start; }

.category-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    width: 78px;
    padding: var(--s-2);
    border-radius: var(--r-16);
    transition: transform var(--t-fast);
}

/* Arrows cover the rail edge and show only when the content overflows (class from rail.js).
   :disabled means we have reached the end on that side. */
.rail-nav {
    position: absolute;
    top: calc(50% - var(--s-3));
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: opacity var(--t-fast), background var(--t-fast);
}
.rail-carousel.is-scrollable .rail-nav { display: flex; }
.rail-nav:hover { background: var(--secondary-tint); }
.rail-nav:disabled { opacity: 0; pointer-events: none; }
.rail-nav .icon { width: 18px; height: 18px; }
.rail-nav-prev { inset-inline-start: 0; }
.rail-nav-next { inset-inline-end: 0; }
.category-chip:hover { transform: translateY(-4px); }

.category-chip-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.category-chip-circle img { width: 36px; height: 36px; object-fit: contain; }
.category-chip-circle .icon { width: 28px; height: 28px; color: var(--text-muted); }
.category-chip:hover .category-chip-circle { border-color: var(--primary); box-shadow: var(--shadow-md); }

.category-chip-name {
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--text);
    /* A long name must not widen the rail (the chip has a fixed width), but on one line
       "Pizza Amri..." was truncated with an ellipsis; two lines show almost every name in full and
       keep row height uniform. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    line-height: 1.5;
    min-height: 3em;
}

.category-chip.is-active .category-chip-circle {
    background: var(--primary-tint);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(244, 114, 11, .22);
}
.category-chip.is-active .category-chip-name { color: var(--primary); font-weight: 700; }
.category-chip.is-active .category-chip-circle .icon { color: var(--primary); }

/* ============================================================
   Product cards
   ============================================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
    /* All cards in a row get equal height so a card doesn't end up larger or smaller as descriptions
       vary or a rating is missing. */
    grid-auto-rows: 1fr;
}

.product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    transition: transform var(--t-med), box-shadow var(--t-med);
    /* A click anywhere on the card opens the product popup (product-modal.js). Since the whole card
       is clickable, the browser's blue touch highlight must be off, otherwise every tap puts a halo
       over the whole card. */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.product-card * { -webkit-tap-highlight-color: transparent; }
[data-product-open], [data-quick-add], .qty-btn, .add-btn, .fav-btn { -webkit-tap-highlight-color: transparent; }
/* The hover animation (card lift and photo zoom) was removed at the user's request. */
.product-card.is-hidden { display: none; }

/* The product image is always square; photos with different ratios are cropped with object-fit
   so the grid stays uniform. */
/* The product image is always square. The image is out of layout flow (absolute) so the file's
   intrinsic height has no effect on card height - otherwise one tall photo would enlarge the
   whole row. */
.product-media {
    position: relative;
    /* Square, at the product owner's request.
    
       WARNING: this is a deliberate revert: earlier it was 16:10 on the argument that "a square eats
       half the card height without showing anything more". That argument was about saving height, but
       food photos sit better in a square frame and the mobile single-column card was already square -
       so we had two different frames in one site.
    
       `object-fit: cover` stays, so an existing rectangular photo isn't stretched, only cropped. */
    aspect-ratio: 1 / 1;
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--secondary-tint);
}
.product-media > a { position: absolute; inset: 0; display: block; }
.product-media img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-med);
}
/* Badges on the photo (discount/unavailable) stack in the top-right corner; the opposite corner
   holds the wishlist button so they don't overlap. */
.product-badges {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-start: var(--s-3);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
}

.fav-btn {
    position: absolute;
    top: var(--s-3);
    inset-inline-end: var(--s-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--surface-glass);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    transition: color var(--t-fast), transform var(--t-fast);
}
.fav-btn:hover { transform: scale(1.1); color: var(--error); }
/* Liked: the whole button solid red with a white icon - on mobile there is no hover, so it must
   be clear at a glance. */
.fav-btn.is-active {
    background: var(--error);
    color: var(--on-primary);
    box-shadow: 0 2px 10px rgba(220, 38, 38, .45);
}
.fav-btn.is-active .icon { fill: var(--on-primary); stroke: var(--on-primary); }

.product-body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-4) 0; flex: 1; }

/* Meta (time and rating) at the bottom of the body, hugging the left edge. margin-top: auto in
   the body's flex column pushes it down - in the desktop grid and the mobile single-column card
   alike, since the body is a flex column in both. */
.product-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    margin-top: auto;
    padding-top: var(--s-1);
    font-size: var(--fs-12);
    color: var(--text-muted);
}
.product-rating { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 700; color: var(--text-strong); }
.product-time { display: inline-flex; align-items: center; gap: var(--s-1); }

/* Title up to two lines; fixed height so short and long names don't shift the row. */
.product-name {
    font-size: var(--fs-16);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* The product name is a button, not a link (it opens a popup), but it must look like title text. */
.product-name-btn {
    all: unset;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: inherit;
}
.product-name-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
/* Sales note on the grid card. Rendered only when it has text, so a card without a note takes
   no empty space. */
.product-note {
    align-self: flex-start;
    margin: 0;
    padding: 3px var(--s-3);
    border-radius: var(--r-full);
    background: var(--primary-tint);
    color: var(--primary);
    font-size: var(--fs-12);
    font-weight: 700;
}

/* Without min-height: grid-auto-rows: 1fr already aligns the row, but a min-height reserved three
   lines even for a card with no description, and empty cards were the tallest part of the page. */
.product-desc {
    font-size: var(--fs-12);
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The footer is no longer inside .product-body (so it can take the full width in the
   single-column card), so it doesn't inherit the body's padding. margin-inline recreates that
   inset so the dotted line stays exactly where it was, not edge to edge of the card. */
.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: auto;
    margin-inline: var(--s-4);
    margin-bottom: var(--s-4);
    padding-top: var(--s-2);
    border-top: 1px dashed var(--border);
}
.product-price { display: flex; flex-direction: column; line-height: 1.5; }
.price-old { font-size: var(--fs-12); color: var(--text-muted); }
.price-now { font-size: var(--fs-16); font-weight: 800; color: var(--text-strong); }
.price-now small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }

.add-btn {
    width: 38px; height: 38px;
    padding: 0;
    border-radius: var(--r-12);
}
/* The add button in the desktop grid is icon-only - no room for text next to the price. The
   label is in the markup and shows in the mobile single-column card. */
.add-btn-label { display: none; }
.qty-stepper {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--primary-tint);
    border-radius: var(--r-12);
    padding: var(--s-1);
}
.qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: var(--r-8);
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    transition: background var(--t-fast), color var(--t-fast);
}
.qty-btn:hover { background: var(--primary); color: var(--on-primary); }
.qty-value { min-width: 22px; text-align: center; font-weight: 700; color: var(--text-strong); }

/* ------------------------------------------------------------
   Variant product: one row per size, stacked

   Instead of one price and one button, the "Pepperoni pizza" card has a row for "32 cm" and one
   for "25 cm". Rows stack in **both** layouts (an explicit client requirement) and the outer card
   grid is untouched: mobile stays single-column and desktop multi-column.

   WARNING: the footer is normally horizontal flex (price | button); here it must be block,
   otherwise the <ul> doesn't sit beside anything and its width collapses.
   ------------------------------------------------------------ */
.product-footer.has-variants {
    display: block;
}
.variant-rows {
    /* Without these three, the default ul padding (40px) shrinks the row from 182 to 140px and the
       "32 cm" label wraps to two lines (measured at 1440px). */
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
/* Label above the price, button beside both. In the 214px card of the desktop grid (5 columns at
   1440) a three-column "label | price | button" didn't fit and both texts wrapped to two lines
   (measured). Two short lines and a button have the same height and look clean. */
.variant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label action"
        "price action";
    align-items: center;
    column-gap: var(--s-2);
}
.variant-row > .add-control,
.variant-row > .variant-oos {
    grid-area: action;
}
/* The label takes the remaining space so price and button stay aligned across all rows, even when
   "32 cm" and "Family" differ in size. */
.variant-label {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--text-strong);
}
.variant-label:hover { text-decoration: underline; }
.variant-price {
    grid-area: price;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--s-1);
    line-height: 1.4;
    white-space: nowrap;
}
.variant-price .price-now { font-size: var(--fs-14); }
/* An unavailable row is not removed - the user must see that this size exists but is out now. */
.variant-row.is-unavailable { opacity: .55; }
.variant-oos {
    font-size: var(--fs-12);
    color: var(--text-muted);
    white-space: nowrap;
}

.empty-state {
    margin-top: var(--s-6);
    padding: var(--s-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    text-align: center;
    color: var(--text-muted);
}

/* ============================================================
   Product detail page
   ============================================================ */
.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-8);
    align-items: start;
}
.product-detail-media {
    position: relative;
    padding: var(--s-4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-detail-media img { width: 100%; height: auto; border-radius: var(--r-16); }
.product-detail-media .badge-off { position: absolute; inset-inline-start: var(--s-5); inset-block-start: var(--s-5); }
.product-detail-body { display: flex; flex-direction: column; gap: var(--s-4); }
.product-detail-meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; color: var(--text-muted); font-size: var(--fs-14); }
.product-detail-desc { color: var(--text); line-height: 1.9; }
.product-detail-price { display: flex; align-items: baseline; gap: var(--s-3); }
.product-detail-price .price-now { font-size: var(--fs-24); }
.product-detail-actions { margin-top: var(--s-2); }
.product-oos-note { color: var(--text-muted); font-size: var(--fs-14); }

.product-addons { display: flex; flex-direction: column; gap: var(--s-4); }
.product-addon-group { border: 1px solid var(--border); padding: var(--s-4); }
.product-addon-group legend { font-weight: 600; color: var(--text-strong); padding-inline: var(--s-2); }
.product-addon-group legend small { font-weight: 400; color: var(--text-muted); font-size: var(--fs-12); }
.product-addon {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    cursor: pointer;
}
.product-addon-name { flex: 1; min-width: 0; }
.product-addon-price { color: var(--text-muted); font-size: var(--fs-14); white-space: nowrap; }

.product-combo { padding: var(--s-4); }
.product-combo-title { font-size: var(--fs-16); color: var(--text-strong); margin-bottom: var(--s-2); }
.product-combo ul { display: flex; flex-direction: column; gap: var(--s-1); color: var(--text-muted); }

@media (max-width: 900px) {
    .product-detail { grid-template-columns: 1fr; }
}

/* Unavailable products stay visible but clearly inert. */
.product-card.is-unavailable .product-media img { opacity: .5; filter: grayscale(1); }
/* "Unavailable" is a diagonal stamp on the photo itself, not a corner badge - in the corner it
   clashed with the wishlist button. No border or background so the photo shows through;
   legibility comes from a text halo, not a solid rectangle.
   It is aria-hidden because .is-unavailable already conveys the state structurally. */
.product-oos {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    z-index: 1;
    white-space: nowrap;
    text-align: center;
    transform: translateY(-50%) rotate(-24deg);
    font-size: var(--fs-24);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--text-strong);
    text-shadow: 0 0 6px var(--surface), 0 0 14px var(--surface);
    pointer-events: none;
}

/* ============================================================
   Pagination + menu toolbar search
   ============================================================ */
.pagination-wrap { margin-top: var(--s-8); display: flex; justify-content: center; }

/* Footer of the progressive list. It has a minimum height so that even when empty the sensor has
   somewhere to be seen - without it a zero-height element might never intersect the
   IntersectionObserver. */
.infinite-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    min-height: 48px;
    margin-top: var(--s-6);
}
.infinite-status { margin: 0; font-size: var(--fs-14); color: var(--text-muted); }
.pagination { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pagination-item a,
.pagination-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-12);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-14);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.pagination-item a:hover { border-color: var(--primary); color: var(--primary); }
.pagination-item.is-active span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.pagination-item.is-disabled span { opacity: .45; }
.menu-toolbar-search { flex: 1; min-width: 12rem; position: relative; }
/* The browser's raw clear (x) for input[type=search] is removed; our own custom button comes in. */
.menu-toolbar-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.menu-toolbar-search input[type="search"] { padding-inline-end: 42px; }
.search-clear {
    position: absolute;
    inset-inline-end: var(--s-2);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.search-clear:hover { background: var(--bg); color: var(--text-strong); }

/* ============================================================
   Offers band (brand green emphasis)
   ============================================================ */
.offers-panel {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%);
    border-radius: var(--r-24);
    padding: var(--s-10);
    color: var(--on-primary);
}
.offers-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-8);
}
.offers-head .section-title { color: var(--on-primary); margin-top: var(--s-2); }
.offers-head .section-sub { color: rgba(255, 255, 255, .72); }

.offer-rail {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--s-4);
}
.offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    background: var(--surface);
    border-radius: var(--r-16);
    padding: var(--s-5) var(--s-4);
    text-align: center;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.offer-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.offer-off { position: absolute; top: var(--s-3); inset-inline-start: var(--s-3); }
.offer-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.offer-name { font-size: var(--fs-14); min-height: 2.8em; display: flex; align-items: center; }
.offer-price { display: flex; flex-direction: column; line-height: 1.5; }
.offer-btn { width: 100%; padding-block: var(--s-2); }
/* Same contract as the product card: an unavailable item is grey with no order button. */
.offer-card.is-unavailable img { opacity: .5; filter: grayscale(1); }
.offer-card.is-unavailable:hover { transform: none; box-shadow: var(--shadow-sm); }

/* ============================================================
   App download
   ============================================================ */
.app-panel {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--s-10);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-24);
    padding: var(--s-12);
    overflow: hidden;
}
.app-features { display: flex; flex-direction: column; gap: var(--s-3); margin-block: var(--s-6); }
.app-features li { display: flex; align-items: center; gap: var(--s-3); font-weight: 500; color: var(--text-strong); }
.app-features .icon { color: var(--success); }

.app-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    background: var(--ink);
    color: var(--on-primary);
    border-radius: var(--r-12);
    padding: var(--s-2) var(--s-5);
    transition: transform var(--t-fast), background var(--t-fast);
}
.store-btn:hover { transform: translateY(-2px); background: #000; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.5; }
.store-btn small { font-size: var(--fs-12); opacity: .75; }

/* The banner image (shop.home.app_banner.image) is optional; the second column is built only when
   the admin has uploaded an image, otherwise the panel stays single-column. */
.app-panel.has-media { grid-template-columns: 1.2fr .8fr; }
.app-media { display: flex; justify-content: center; min-width: 0; }
.app-media img {
    width: min(100%, 340px);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 24px 40px rgba(17, 24, 39, .18));
    transition: transform var(--t-med);
}
.app-panel:hover .app-media img { transform: translateY(-6px); }

.app-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-12);
    color: var(--text-muted);
}
.app-qr svg { width: 68px; height: 68px; fill: var(--ink); }
.app-qr .qr-hole { fill: var(--on-ink); }

.app-mockup { display: flex; justify-content: center; }
.phone {
    position: relative;
    width: 250px;
    border-radius: 38px;
    background: var(--ink);
    padding: 10px;
    box-shadow: var(--shadow-lg);
    transform: rotate(-6deg);
    transition: transform var(--t-med);
}
.app-panel:hover .phone { transform: rotate(-3deg) translateY(-6px); }
.phone-notch {
    position: absolute;
    top: 18px; left: 50%;
    translate: -50% 0;
    width: 84px; height: 16px;
    background: var(--ink);
    border-radius: var(--r-full);
    z-index: 2;
}
.phone-screen {
    background: var(--bg);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.phone-topbar {
    padding: var(--s-6) var(--s-4) var(--s-2);
    font-weight: 800;
    color: var(--secondary);
    text-align: center;
}
.phone-screen img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.phone-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    background: var(--surface);
    margin: var(--s-3);
    border-radius: var(--r-12);
    padding: var(--s-3);
    font-size: var(--fs-12);
    box-shadow: var(--shadow-sm);
}
.phone-card strong { font-size: var(--fs-14); color: var(--text-strong); }
.phone-cta {
    margin-top: var(--s-1);
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--r-8);
    text-align: center;
    padding: var(--s-1);
    font-weight: 700;
}

/* ============================================================
   Benefits
   ============================================================ */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
}
.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-6);
    text-align: center;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: var(--r-16);
    background: var(--primary-tint);
    color: var(--primary);
}
.benefit-icon .icon { width: 30px; height: 30px; }
.benefit-title { font-size: var(--fs-18); }
.benefit-desc { font-size: var(--fs-14); color: var(--text-muted); }

/* ============================================================
   Testimonials
   ============================================================ */
.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}
.review-card { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.review-head { display: flex; align-items: center; gap: var(--s-3); }
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--secondary-tint);
    color: var(--secondary);
    font-weight: 800;
    font-size: var(--fs-18);
    flex: none;
}
.review-id { display: flex; flex-direction: column; line-height: 1.5; margin-inline-end: auto; }
.review-name { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 700; color: var(--text-strong); }
.review-date { font-size: var(--fs-12); color: var(--text-muted); }
.review-stars { display: inline-flex; gap: 2px; color: #F5A623; }
.review-quote { font-size: var(--fs-14); color: var(--text); }

/* Rating summary beside the reviews section title */
.reviews-summary { display: inline-flex; align-items: center; gap: var(--s-2); }
.reviews-avg { font-size: var(--fs-20); font-weight: 800; color: var(--text-strong); }
.reviews-count { font-size: var(--fs-13); color: var(--text-muted); }
.reviews-empty { color: var(--text-muted); padding: var(--s-4) 0; }
.product-rating { color: #F5A623; }
.product-rating small { color: var(--text-muted); font-weight: 400; }

/* Review submission form */
.review-form { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }
.review-form-title { font-size: var(--fs-16); font-weight: 700; }
.review-rating-input { display: inline-flex; gap: var(--s-1); }
.review-star-label { cursor: pointer; color: var(--border); line-height: 0; transition: color .12s ease; }
.review-star-label.is-filled { color: #F5A623; }
.review-star-label .icon { width: 28px; height: 28px; }

/* Review block in the customer panel (under each order line) */
.order-item-review { margin-top: var(--s-2); }
.order-item-review > summary { display: inline-block; cursor: pointer; list-style: none; }
.order-item-review > summary::-webkit-details-marker { display: none; }
.order-item-review[open] > summary { margin-bottom: var(--s-2); }

.btn-sm { padding: var(--s-1) var(--s-3); font-size: var(--fs-13); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Custom checkbox and radio - global.

   Written with :where() so specificity is zero and component overrides (like `.option-card input`,
   which hides the input while the card itself is the selected look, or the `.sr-only` rating
   stars) win without a fight. The green theme moves the tick color to --secondary separately.
   ============================================================ */
:where(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    border: 1.5px solid var(--border);
    background: var(--surface);
    transition: border-color var(--t-fast), background var(--t-fast);
}
:where(input[type="checkbox"]) { border-radius: 6px; }
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):hover { border-color: var(--primary); }

/* Inner mark: a tick for checkbox, a circle for radio. */
:where(input[type="checkbox"], input[type="radio"])::before {
    content: "";
    transform: scale(0);
    transition: transform .15s var(--ease);
}
:where(input[type="checkbox"])::before {
    width: 11px;
    height: 11px;
    background: var(--on-primary);
    clip-path: polygon(14% 46%, 0 66%, 38% 100%, 100% 18%, 82% 2%, 36% 68%);
}
:where(input[type="radio"])::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
}
:where(input[type="checkbox"]):checked { background: var(--primary); border-color: var(--primary); }
:where(input[type="radio"]):checked { border-color: var(--primary); }
:where(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
:where(input[type="checkbox"], input[type="radio"]):disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Wallet/credit options in checkout */
.checkout-wallet { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.checkbox-row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); cursor: pointer; }

/* ===== Toast ===== */
.toast-host {
    position: fixed;
    z-index: 120;
    top: calc(var(--header-h) + var(--s-4));
    inset-inline-end: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    max-width: min(360px, calc(100vw - 32px));
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-12);
    background: var(--surface);
    color: var(--text-strong);
    font-size: var(--fs-14);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    border-inline-start: 4px solid var(--success);
    /* Enters from the right (RTL) with a fade */
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .25s ease, transform .25s ease;
}
.toast.is-in { opacity: 1; transform: translateX(0); }
.toast-success { border-inline-start-color: var(--success); }
.toast-error { border-inline-start-color: var(--error); }
.toast-info { border-inline-start-color: var(--primary); }

@media (max-width: 640px) {
    .toast-host { inset-inline: var(--s-4); inset-inline-end: var(--s-4); top: calc(var(--header-h) + var(--s-2)); }
    .toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity .2s ease; transform: none; }
    .toast.is-in { transform: none; }
}

/* ===== Product popup ===== */
/* Two classes (.modal-card.product-modal-card) to beat the generic rule
   .modal-card { width: min(420px, ...) } - defined later in the file, it would win at equal
   specificity.
   The layout is "top to bottom" at the user's request: photo, then content, then the add bar - at
   every size; mobile just goes full-screen. */
.modal.product-modal { padding: var(--s-6); }
.modal-card.product-modal-card {
    width: min(520px, 100%);
    max-height: min(90vh, 860px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* The close button lands on the photo; without a background it isn't visible. */
.product-modal .modal-close {
    z-index: 2;
    background: var(--surface-glass);
    color: var(--text-strong);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.product-modal-loading { padding: var(--s-6); color: var(--text-muted); }
.product-modal-skel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: stretch;
}
.product-modal-skel-media { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--r-16); }
.product-modal-skel-info { display: flex; flex-direction: column; padding-block: var(--s-3); }
.product-modal-skel-btn { width: 60%; height: 44px; margin-top: auto; border-radius: var(--r-12); }
@media (max-width: 720px) {
    .product-modal-skel-grid { grid-template-columns: 1fr; }
}

.product-modal-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "media"
        "info"
        "foot";
    overflow: hidden;
    min-height: 0;
}
.product-modal-media {
    grid-area: media;
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--secondary-tint);
    overflow: hidden;
}
.product-modal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-modal-media .badge-off { position: absolute; top: var(--s-4); inset-inline-start: var(--s-4); }

.product-modal-info {
    grid-area: info;
    padding: var(--s-5) var(--s-6) var(--s-4);
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.product-modal-title { font-size: var(--fs-20); }
.product-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--fs-12); color: var(--text-muted); }
.product-modal-desc { font-size: var(--fs-14); color: var(--text); line-height: 2; }
/* Sales note - a short pill, not a paragraph. When empty, [hidden] hides it and it takes
   no space. */
.product-modal-note {
    align-self: flex-start;
    margin: 0;
    padding: 4px var(--s-3);
    border-radius: var(--r-full);
    background: var(--primary-tint);
    color: var(--primary);
    font-size: var(--fs-12);
    font-weight: 700;
}
.product-modal-note[hidden] { display: none; }

.product-modal-block { border-top: 1px dashed var(--border); padding-top: var(--s-3); }
.product-modal-block-title { font-size: var(--fs-14); font-weight: 700; margin-bottom: var(--s-2); }
.product-modal-block-title small, .product-modal-block-hint { font-weight: 400; color: var(--text-muted); font-size: var(--fs-12); }

/* Nutrition: a grid of small cards. */
.nutrition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--s-2); }
.nutrition-item {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
    padding: var(--s-3);
    border-radius: var(--r-12);
    background: var(--surface-2);
    text-align: center;
}
.nutrition-value { font-size: var(--fs-16); font-weight: 800; color: var(--text-strong); }
.nutrition-label { font-size: var(--fs-12); color: var(--text-muted); }

/* Allergens: warning chips. */
.allergen-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.allergen-chip {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: 999px;
    background: var(--error-tint);
    color: var(--error);
    border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
    font-size: var(--fs-12); font-weight: 600;
}

/* "Frequently bought together" - a horizontal rail of small cards. */
.frequently-rail { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); }
.frequently-card { flex: 0 0 120px; }
.frequently-btn {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
    width: 100%; padding: var(--s-2); background: none; border: 0; cursor: pointer;
    border-radius: var(--r-12); transition: background var(--t-fast);
}
.frequently-btn:hover { background: var(--surface-2); }
.frequently-btn img { width: 56px; height: 56px; border-radius: var(--r-12); object-fit: cover; }
.frequently-name { font-size: var(--fs-12); color: var(--text); text-align: center; line-height: 1.4; }
.frequently-price { font-size: var(--fs-12); font-weight: 700; color: var(--primary); }

/* The "recently viewed" rail on the home page (from localStorage). */
.recently-rail { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); }
.recently-card {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-12);
    text-decoration: none;
    color: var(--text-strong);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.recently-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.recently-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--r-8);
    background: var(--bg);
}
.recently-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recently-name {
    font-size: var(--fs-13);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recently-price { font-size: var(--fs-12); font-weight: 700; color: var(--primary); }

/* Rating distribution histogram (5 to 1). */
.rating-histogram { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); }
.rating-histogram-row { display: flex; align-items: center; gap: var(--s-2); }
.rating-histogram-star { font-size: var(--fs-12); font-weight: 700; color: var(--text-muted); width: var(--s-4); text-align: end; }
.rating-histogram-star-icon { color: var(--star); width: 14px; height: 14px; flex: none; }
.rating-histogram-bar {
    flex: 1; height: 8px; border-radius: 999px;
    background: var(--surface-2); overflow: hidden;
}
.rating-histogram-fill { display: block; height: 100%; border-radius: 999px; background: var(--star); transition: width var(--t-med) var(--ease); }
.rating-histogram-count { font-size: var(--fs-12); color: var(--text-muted); width: var(--s-6); }

/* Reviews inside the popup (the separate product page was removed) */
.product-modal-reviews { display: flex; flex-direction: column; gap: var(--s-3); }
.product-modal-review {
    display: flex; flex-direction: column; gap: var(--s-1);
    padding: var(--s-3);
    background: var(--surface-2);
    border-radius: var(--r-12);
}
.product-modal-review .review-head { justify-content: space-between; }
.product-modal-review .review-quote { font-size: var(--fs-13); }

/* Ingredients */
/* Manual ingredients text - replaces the chips built from the recipe, so it is one readable
   paragraph, not a list. */
.ingredient-text {
    color: var(--text-muted);
    font-size: var(--fs-14);
    line-height: 1.9;
    white-space: pre-line;
}
.ingredient-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ingredient {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: var(--fs-12);
}
.ingredient-qty { color: var(--text-muted); }

/* Combo items */
.combo-list { display: flex; flex-direction: column; gap: var(--s-2); }
.combo-item {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-8);
    background: var(--bg);
    font-size: var(--fs-13);
}
.combo-item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none; }
.combo-item-name { flex: 1; }
.combo-item-qty { color: var(--text-muted); font-weight: 700; }
/* The member that ran out and made the whole combo unavailable. */
.combo-item.is-unavailable .combo-item-dot { background: var(--error); }
.combo-item.is-unavailable .combo-item-name { color: var(--text-muted); text-decoration: line-through; }
.combo-item.is-unavailable .combo-item-qty { color: var(--error); }

/* Add-ons */
.addon-group { border: 0; padding: 0; margin-bottom: var(--s-4); }
.addon-group-title { font-size: var(--fs-13); font-weight: 700; margin-bottom: var(--s-2); }
.addon-group-title small { font-weight: 400; color: var(--text-muted); }
/* Required-group label - the Add button is disabled until it is chosen. */
.addon-required {
    display: inline-block;
    margin-inline-start: var(--s-2);
    padding: 1px var(--s-2);
    border-radius: 999px;
    background: var(--error-tint);
    color: var(--error);
    font-size: var(--fs-12);
    font-weight: 700;
}
.addon-option {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1.5px solid var(--border);
    border-radius: var(--r-12);
    margin-bottom: var(--s-2);
    cursor: pointer;
    font-size: var(--fs-13);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.addon-option:hover { border-color: var(--primary); }
.addon-option:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.addon-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.addon-option-name { flex: 1; }
.addon-option-price { color: var(--text-muted); font-weight: 700; }
/* Unavailable add-on: locked but not hidden so the reason is clear. */
.addon-option.is-unavailable:hover { border-color: var(--border); }
.addon-option.is-unavailable .addon-option-price { color: var(--error); }

.product-modal-foot {
    grid-area: foot;
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-6);
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.product-modal-price { display: flex; flex-direction: column; line-height: 1.5; }
.product-modal-price .price-now { font-size: var(--fs-20); font-weight: 800; }
.product-modal-qty { margin-inline-start: auto; }
.product-modal-add { flex: 1 1 auto; margin-inline-start: auto; max-width: 300px; }
.product-modal-add:disabled { opacity: .55; cursor: not-allowed; }

/* Mobile: full-screen (dvh so the browser address bar doesn't break the height); photo on top,
   scrollable content, and the add bar at the bottom of the screen respecting safe-area. */
@media (max-width: 720px) {
    .modal.product-modal { padding: 0; }
    .modal-card.product-modal-card {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }
    .product-modal-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "media" "info" "foot";
    }
    .product-modal-media { aspect-ratio: 4 / 3; }
    .product-modal-info { padding: var(--s-5); gap: var(--s-3); }
    .product-modal-title { font-size: var(--fs-20); }
    .product-modal-foot {
        flex-wrap: wrap;
        gap: var(--s-3);
        padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    }
    .product-modal-qty { margin-inline-start: auto; }
    .product-modal-add { flex: 1 1 100%; order: 3; min-width: 0; max-width: none; margin-inline-start: 0; }
}

/* Ingredients line under the product name on the card */
.product-recipe {
    font-size: var(--fs-12);
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Wallet and credit ===== */
/* From now on the wallet summary is shown in .dash-tile tiles, not in a dedicated gradient bar.
   These classes are kept only for reversible compatibility. */
.wallet-hero-label { font-size: var(--fs-13); color: var(--text-muted); }
.wallet-hero-amount { font-size: var(--fs-32); font-weight: 800; line-height: 1.4; color: var(--text-strong); }
.wallet-hero-note { font-size: var(--fs-12); color: var(--text-muted); }

/* Summary tile with the secondary color (credit) */
.dash-tile-icon--secondary {
    background: var(--secondary-tint, var(--bg));
    color: var(--secondary);
}

.wallet-bucket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.wallet-bucket {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
    padding: var(--s-3);
    border-radius: var(--r-12);
    background: rgba(255, 255, 255, .16);
    text-align: center;
}
.wallet-bucket-icon .icon { width: 20px; height: 20px; }
.wallet-bucket dt { font-size: var(--fs-12); opacity: .9; }
.wallet-bucket dd { font-size: var(--fs-14); font-weight: 700; }

.quick-amounts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.quick-amount {
    padding: var(--s-2) var(--s-4);
    border: 1.5px solid var(--border);
    border-radius: var(--r-12);
    background: var(--surface);
    color: var(--text-strong);
    font-weight: 700;
    font-size: var(--fs-14);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.quick-amount small { font-weight: 400; color: var(--text-muted); }
.quick-amount:hover { border-color: var(--primary); }
.quick-amount.is-selected { border-color: var(--primary); background: var(--primary-tint); }

.topup-form { display: flex; flex-direction: column; gap: var(--s-4); }

.settle-box {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s-4);
    margin-top: var(--s-4); padding: var(--s-4);
    border-radius: var(--r-12);
    background: var(--error-tint);
}

.wallet-log { display: flex; flex-direction: column; }
.wallet-log-row {
    display: flex; align-items: center; gap: var(--s-3);
    padding-block: var(--s-3);
    border-bottom: 1px dashed var(--border);
}
.wallet-log-row:last-child { border-bottom: 0; }

/* Round icon for a transaction's in/out */
.wallet-log-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    flex: none;
}
.wallet-log-icon.is-positive { background: var(--success-tint); color: var(--success); }
.wallet-log-icon.is-negative { background: var(--error-tint); color: var(--error); }
.wallet-log-icon .icon { width: 18px; height: 18px; }

.wallet-log-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wallet-log-main small { font-size: var(--fs-12); color: var(--text-muted); }

/* Left-hand column: signed amount + balance after the transaction */
.wallet-log-tail {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 2px; text-align: end; flex: none;
}
.wallet-log-amount { font-weight: 700; white-space: nowrap; }
.wallet-log-amount.is-positive { color: var(--success); }
.wallet-log-amount.is-negative { color: var(--error); }
.wallet-log-balance { font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; }
.is-negative { color: var(--error); }

/* Standard empty state inside a card (credit with no account / empty ledger) */
.card-empty { margin-top: var(--s-2); padding: var(--s-6); }
.card-empty .icon { width: 36px; height: 36px; }

@media (max-width: 640px) {
    .wallet-bucket-grid { grid-template-columns: 1fr; }
    .wallet-log-icon { width: 32px; height: 32px; }
    .wallet-log-balance { display: none; } /* On mobile the third column is compressed */
    .settle-box { flex-direction: column; align-items: stretch; }
    .settle-box .btn { width: 100%; }
}

/* Narrow field + button in one row (like gender and "Save changes") */
.field-inline-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); }
.field-inline-row .btn { flex: 0 0 auto; }
.field-narrow { flex: 0 1 220px; min-width: 160px; }

@media (max-width: 480px) {
    .field-inline-row { align-items: stretch; }
    .field-narrow { flex: 1 1 100%; }
    .field-inline-row .btn { width: 100%; }
}

/* Payment method when wallet/credit covers the whole amount */
.option-grid.is-disabled { opacity: .45; pointer-events: none; }
.payment-covered {
    margin-top: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-12);
    background: var(--success-tint);
    color: var(--success);
    font-size: var(--fs-13);
    font-weight: 600;
}

/* Horizontal payment-method card: icon on the right, text on the left (RTL). */
.option-card-pay {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
}
.option-card-pay .option-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Payment-method card skeleton while loading. */
.skeleton-pay {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1.5px solid var(--border);
    border-radius: var(--r-12);
}
.skeleton-pay-icon { width: 42px; height: 42px; border-radius: var(--r-12); flex: none; }

/* Trust trail under the place-order button in checkout */
.checkout-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-4);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px dashed var(--border);
}
.checkout-trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text-muted);
    font-size: var(--fs-12);
    font-weight: 600;
}
.checkout-trust-item .icon { color: var(--success); }

/* Wallet/credit row with live balance */
.balance-row { justify-content: flex-start; }
.balance-label { flex: 1; }
.balance-amount { font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.balance-amount.is-empty { font-weight: 400; color: var(--text-muted); }
.balance-row.is-disabled { opacity: .6; cursor: not-allowed; }
.balance-applied { font-size: var(--fs-12); color: var(--success); margin-inline-start: var(--s-6); }

/* ===== Static pages (about/privacy) + FAQ ===== */
/* Long-text body: base typography without depending on classes. */
.static-content { max-width: 760px; margin-inline: auto; line-height: 2; font-size: var(--fs-15); color: var(--text); }
.static-content > * + * { margin-top: var(--s-4); }
.static-content h2 { font-size: var(--fs-20); color: var(--text-strong); margin-top: var(--s-8); }
.static-content h3 { font-size: var(--fs-16); color: var(--text-strong); margin-top: var(--s-6); }
.static-content a { color: var(--primary); }
.static-content ul, .static-content ol { padding-inline-start: var(--s-6); }

/* FAQ accordion with native <details>. */
.faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-12); overflow: hidden; }
.faq-item[open] { border-color: var(--primary); }
.faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    cursor: pointer; font-weight: 600; color: var(--text-strong); list-style: none;
    font-size: var(--fs-15);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon { transition: transform var(--t-fast) var(--ease); color: var(--primary); flex-shrink: 0; }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-a { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); line-height: 2; font-size: var(--fs-14); }
.faq-contact-card { margin-top: var(--s-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.faq-contact-card p { color: var(--text-muted); margin: 0; }

/* Suggestions page: a rail grid instead of the home page's horizontal row. */
.offer-rail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-5); }

/* ===== Blog ===== */
.blog-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.blog-card { display: flex; flex-direction: column; overflow: hidden; }
.blog-card-media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.blog-card-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.blog-card-title { font-size: var(--fs-18); }
.blog-card-excerpt { font-size: var(--fs-14); color: var(--text-muted); }
.blog-card-meta { display: flex; gap: var(--s-3); font-size: var(--fs-12); color: var(--text-muted); margin-top: auto; }

.blog-post { max-width: 820px; margin-inline: auto; }
.blog-post-cover { width: 100%; height: auto; border-radius: var(--r-16); margin-bottom: var(--s-6); }
.blog-post-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-13); color: var(--text-muted); }
.blog-post-lead { font-size: var(--fs-16); color: var(--text-muted); margin-bottom: var(--s-5); }
.blog-post-body { font-size: var(--fs-16); line-height: 2; color: var(--text); }
.blog-post-body h2 { font-size: var(--fs-20); margin: var(--s-6) 0 var(--s-3); }
.blog-post-body h3 { font-size: var(--fs-18); margin: var(--s-5) 0 var(--s-2); }
.blog-post-body p { margin-bottom: var(--s-4); }
.blog-post-body ul, .blog-post-body ol { margin: 0 var(--s-5) var(--s-4) 0; list-style: revert; }
.blog-post-body img { max-width: 100%; height: auto; border-radius: var(--r-12); }

@media (min-width: 640px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Branches
   ============================================================ */
.branch-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-6); }
.branch-card { padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-5); }
.branch-head { display: flex; align-items: center; gap: var(--s-4); }
.branch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--r-16);
    background: var(--secondary-tint);
    color: var(--secondary);
}
.branch-name { font-size: var(--fs-20); }
.branch-info { display: flex; flex-direction: column; gap: var(--s-3); }
.branch-info li { display: flex; align-items: center; gap: var(--s-3); }
.branch-info .icon { color: var(--text-muted); }
.branch-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

.branch-cta {
    padding: var(--s-8);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-4);
    background: var(--primary-tint);
    border-color: transparent;
}
.branch-cta-title { font-size: var(--fs-20); }
.branch-cta .btn { background: var(--surface); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-6); align-items: start; }
.contact-info, .contact-form { padding: var(--s-8); }
.contact-form { display: flex; flex-direction: column; gap: var(--s-5); }
.contact-list { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-6); }
.contact-list li { display: flex; align-items: center; gap: var(--s-4); }
.contact-list .icon { color: var(--primary); }
.contact-list span { display: flex; flex-direction: column; line-height: 1.6; color: var(--text-strong); font-weight: 600; }
.contact-list small { font-size: var(--fs-12); color: var(--text-muted); font-weight: 400; }
.contact-submit { align-self: flex-start; }
.form-success { color: var(--success); font-weight: 600; font-size: var(--fs-14); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    margin-top: var(--s-12);
    background: var(--secondary-deep);
    color: rgba(255, 255, 255, .78);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: var(--s-10);
    padding-block: var(--s-16);
}
.footer-about p { font-size: var(--fs-14); margin-block: var(--s-4); }
.footer-logo .header-logo-text { color: var(--on-primary); }
.footer-social { display: flex; gap: var(--s-3); }
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-12);
    background: rgba(255, 255, 255, .1);
    color: var(--on-primary);
    transition: background var(--t-fast), transform var(--t-fast);
}
.footer-social a:hover { background: var(--primary); transform: translateY(-3px); }

.footer-col h3 { color: var(--on-primary); font-size: var(--fs-16); margin-bottom: var(--s-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-col a { font-size: var(--fs-14); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--primary); }
.footer-newsletter p { font-size: var(--fs-14); margin-bottom: var(--s-4); }

.newsletter-form { display: flex; gap: var(--s-2); }
.newsletter-form .input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: var(--on-primary); }
.newsletter-form .input::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter-form .input:focus { border-color: var(--primary); box-shadow: none; }

.footer-bar { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-5);
    font-size: var(--fs-12);
    flex-wrap: wrap;
}

/* ============================================================
   Mobile bottom nav + floating cart
   ============================================================ */
.bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 110;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(17, 24, 39, .08);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--s-2) 0 var(--s-3);
    font-size: var(--fs-12);
    color: var(--text-muted);
    min-height: 56px;
    justify-content: center;
}
.bottom-nav-item.is-active { color: var(--primary); font-weight: 700; }
.bottom-nav-cart .cart-badge { top: 2px; inset-inline-end: calc(50% - 22px); }

.floating-cart {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom));
    inset-inline: var(--s-4);
    z-index: 105;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    border-radius: var(--r-16);
    padding: var(--s-4);
    box-shadow: var(--shadow-lg);
    animation: slide-up .3s var(--ease);
}
@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } }
.floating-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px; height: 26px;
    background: rgba(255, 255, 255, .25);
    border-radius: var(--r-full);
    font-size: var(--fs-14);
}
@media (min-width: 768px) {
    .floating-cart { inset-inline: auto var(--s-8); bottom: var(--s-8); }
}

/* ===== Floating back-to-top and WhatsApp buttons (opposite side of the cart pill) ===== */
.floating-buttons {
    position: fixed;
    inset-inline-start: var(--s-4);
    bottom: calc(var(--s-8) + env(safe-area-inset-bottom));
    z-index: 105;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.floating-btn {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform var(--t-fast), opacity var(--t-fast);
    color: #fff;
}
.floating-btn:hover { transform: translateY(-2px); }
.floating-btn .icon { width: 22px; height: 22px; }
.floating-top { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border); }
.floating-top[hidden] { display: none; }
.floating-whatsapp { background: #25D366; }

/* Mobile: the buttons sit higher so they don't land on the bottom bar. */
@media (max-width: 767px) {
    .floating-buttons { bottom: calc(72px + var(--s-3) + env(safe-area-inset-bottom)); }

    /* On mobile the cart bar takes the full width, so there is no "opposite side" and the buttons
       landed right behind it. When it is visible (cart.js removes the hidden attribute) the buttons
       move up by the bar's height. */
    body:has(.floating-cart:not([hidden])) .floating-buttons {
        bottom: calc(72px + 58px + var(--s-3) + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   Modal (login)
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.modal[hidden] { display: none; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    animation: fade-in .25s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } }
.modal-card {
    position: relative;
    width: min(420px, 100%);
    background: var(--surface);
    border-radius: var(--r-24);
    padding: var(--s-10) var(--s-8) var(--s-8);
    box-shadow: var(--shadow-lg);
    animation: modal-in .3s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.modal-close {
    position: absolute;
    top: var(--s-4);
    inset-inline-start: var(--s-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: var(--bg); color: var(--text-strong); }
.modal-title { font-size: var(--fs-24); }
.modal-sub { color: var(--text-muted); font-size: var(--fs-14); margin-block: var(--s-2) var(--s-6); }
.login-step { display: flex; flex-direction: column; gap: var(--s-4); }
.otp-input { text-align: center; letter-spacing: .5em; font-size: var(--fs-20); font-weight: 700; }
.otp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-14);
    color: var(--text-muted);
}

.login-success { align-items: center; text-align: center; padding-block: var(--s-6); }
.login-success .modal-sub { margin-bottom: 0; }
.login-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--success-tint);
    color: var(--success);
    animation: success-pop .4s var(--ease);
}
.login-success-icon .icon { width: 36px; height: 36px; stroke-width: 2.2; }
@keyframes success-pop { from { transform: scale(.5); opacity: 0; } }

/* Mobile drawer behaviour for the login modal */
@media (max-width: 640px) {
    .modal { align-items: flex-end; padding: 0; }
    .modal-card {
        width: 100%;
        border-radius: var(--r-24) var(--r-24) 0 0;
        animation: drawer-in .3s var(--ease);
        padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom));
    }
    @keyframes drawer-in { from { transform: translateY(100%); } }
}

/* ============================================================
   Cart page
   ============================================================ */
.steps { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.step {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--text-muted);
}
.step + .step::before {
    content: '';
    width: 28px;
    height: 1.5px;
    background: var(--border);
    margin-inline-end: var(--s-2);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    font-size: var(--fs-12);
    flex: none;
}
.step.is-active { color: var(--text-strong); }
.step.is-active .step-num {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 10px rgba(244, 114, 11, .3);
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--s-6);
    align-items: start;
}
.cart-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }

.cart-card { padding: var(--s-6); }
.cart-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}
.cart-card-title {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--fs-18);
}

.cart-rows { display: flex; flex-direction: column; }
.cart-row {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-bottom: 1px dashed var(--border);
    animation: fade-slide .25s var(--ease);
}
@keyframes fade-slide { from { opacity: 0; transform: translateY(8px); } }
.cart-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-row:first-child { padding-top: 0; }

.cart-row-img {
    width: 96px; height: 96px;
    border-radius: var(--r-12);
    object-fit: cover;
    background: var(--secondary-tint);
    flex: none;
}
.cart-row-info { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.cart-row-name { font-size: var(--fs-16); }
.cart-row-desc {
    font-size: var(--fs-12);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}
.cart-row-unit { font-size: var(--fs-12); color: var(--text-muted); }

.cart-row-actions {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    margin-inline-start: auto;
    flex: none;
}
.cart-row-total { font-weight: 800; color: var(--text-strong); min-width: 90px; }
.cart-row-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }
.cart-row-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--r-8);
    color: var(--text-muted);
    transition: color var(--t-fast), background var(--t-fast);
}
.cart-row-remove:hover { color: var(--error); background: var(--error-tint); }

/* Add-on suggestions */
.addon-rail {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    padding-bottom: var(--s-2);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.addon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    flex: 0 0 128px;
    scroll-snap-align: start;
    border: 1.5px solid var(--border);
    border-radius: var(--r-12);
    padding: var(--s-4) var(--s-3);
    text-align: center;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.addon-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.addon-card img { width: 64px; height: 64px; object-fit: contain; }
.addon-name {
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--text-strong);
    min-height: 2.6em;
    display: flex;
    align-items: center;
}
.addon-price { font-size: var(--fs-12); color: var(--text-muted); }
.addon-add { width: 34px; height: 34px; padding: 0; border-radius: var(--r-8); }

/* Order summary */
.cart-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.cart-summary { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }

/* Free-shipping progress bar - above the discount code. */
.free-delivery-text {
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: var(--s-2);
}
.progress {
    width: 100%;
    height: 8px;
    background: var(--bg);
    border-radius: var(--r-full);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: inherit;
    transition: width var(--t-med);
}

.coupon-form { display: flex; gap: var(--s-2); }
.coupon-form .input { padding-block: var(--s-2); font-size: var(--fs-14); }
.coupon-form .btn { padding-block: var(--s-2); flex: none; }

.summary-lines { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--fs-14);
    color: var(--text-muted);
}
.summary-line dd { margin: 0; color: var(--text-strong); font-weight: 600; }
.summary-muted { color: var(--text-muted) !important; font-weight: 400 !important; font-size: var(--fs-12); }
.summary-line-discount dd { color: var(--success); }
.summary-total {
    padding-top: var(--s-3);
    border-top: 1px dashed var(--border);
    font-weight: 700;
    color: var(--text-strong);
}
.summary-total dd { font-size: var(--fs-20); font-weight: 800; }
.summary-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }

.summary-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-size: var(--fs-12);
    color: var(--text-muted);
}

.cart-empty-state { margin-block: var(--s-8); }
.empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary);
}
.empty-icon .icon { width: 40px; height: 40px; }
.cart-empty-state h2 { font-size: var(--fs-24); }

/* ============================================================
   Checkout page
   ============================================================ */
.step.is-done { color: var(--success); }
.step.is-done .step-num {
    background: var(--success);
    border-color: var(--success);
    color: var(--on-primary);
}
.step.is-done .step-num .icon { width: 14px; height: 14px; }

.req { color: var(--error); }
.field-optional { font-weight: 400; color: var(--text-muted); }

.option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.option-grid-2 { grid-template-columns: repeat(2, 1fr); }
.option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
    border: 1.5px solid var(--border);
    border-radius: var(--r-12);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.option-card:hover { border-color: var(--primary); }
.option-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-tint);
    box-shadow: var(--shadow-sm);
}
.option-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.option-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--r-12);
    background: var(--bg);
    color: var(--primary);
    flex: none;
}
.option-card:has(input:checked) .option-icon { background: var(--surface); }
.option-title { font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); }
.option-desc { font-size: var(--fs-12); color: var(--text-muted); line-height: 1.7; }

.table-field, .checkout-note { margin-top: var(--s-4); }

.summary-items {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    border-bottom: 1px dashed var(--border);
}
.summary-item { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-14); }
.summary-item img {
    width: 48px; height: 48px;
    border-radius: var(--r-8);
    object-fit: cover;
    background: var(--secondary-tint);
    flex: none;
}
.summary-item-name { color: var(--text-strong); font-weight: 600; min-width: 0; }
.summary-item-name small { color: var(--text-muted); font-weight: 500; }
.summary-item-price { margin-inline-start: auto; font-weight: 700; color: var(--text-strong); flex: none; }

.checkout-form-error { text-align: center; }

/* ============================================================
   Account area (my-account / orders / wishlist)
   ============================================================ */
.account-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--s-6);
    align-items: start;
}
/* min-width: 0 is essential: a grid item has min-width: auto by default, and the menu's horizontal
   rail (wider than the page) widened the column to its own size and stretched the whole page on
   mobile; with this constraint the rail scrolls inside itself instead of stretching the page. */
.account-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); min-width: 0; max-width: 100%; }
.account-nav-card { min-width: 0; }
.account-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }

.account-nav-card { padding: var(--s-5); }
.account-user {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    border-bottom: 1px dashed var(--border);
}
.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary);
    font-size: var(--fs-20);
    font-weight: 800;
    flex: none;
}
.account-user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-user-text strong { font-size: var(--fs-16); color: var(--text-strong); }
.account-user-text small { font-size: var(--fs-12); color: var(--text-muted); }

.account-nav { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-4); }
.account-nav-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-12);
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--text);
    transition: background var(--t-fast), color var(--t-fast);
}
.account-nav-link:hover { background: var(--bg); color: var(--text-strong); }
.account-nav-link.is-active { background: var(--primary-tint); color: var(--primary); }
.account-nav-logout { color: var(--error); }
.account-nav-logout:hover { background: var(--error-tint); color: var(--error); }

.field-hint {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-12);
    color: var(--text-muted);
}
[data-profile-form] .field-row { margin-bottom: var(--s-4); }
.account-form-foot { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }

/* Wallet */
.wallet-sub { margin-bottom: var(--s-5); }
.wallet-balance {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: var(--s-5);
    border-radius: var(--r-12);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%);
    color: var(--on-primary);
}
.wallet-balance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--r-12);
    background: rgba(255, 255, 255, .14);
    flex: none;
}
.wallet-balance-text { display: flex; flex-direction: column; gap: 2px; }
.wallet-balance-text small { font-size: var(--fs-12); color: rgba(255, 255, 255, .75); }
.wallet-balance-text strong { font-size: var(--fs-24); font-weight: 800; }
.wallet-balance-text strong span { font-size: var(--fs-12); font-weight: 500; color: rgba(255, 255, 255, .75); }
.wallet-charge { display: flex; gap: var(--s-2); margin-inline-start: auto; }
.wallet-charge .input { width: 190px; padding-block: var(--s-2); font-size: var(--fs-14); border-color: transparent; }
.wallet-charge .btn { padding-block: var(--s-2); flex: none; }
.wallet-success { margin-top: var(--s-3); }

.wallet-history-title { font-size: var(--fs-16); margin: var(--s-6) 0 var(--s-3); }
.wallet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-8);
    border: 1.5px dashed var(--border);
    border-radius: var(--r-12);
    font-size: var(--fs-14);
    color: var(--text-muted);
}
.wallet-empty .icon { width: 32px; height: 32px; }

/* ============================================================
   Orders page
   ============================================================ */
.orders-group-title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-18);
    margin-bottom: var(--s-4);
}
/* Orders list (orders page + the dashboard's "latest orders"). */
.order-list { display: flex; flex-direction: column; gap: var(--s-4); }
.order-row-badges { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.orders-group + .orders-group { margin-top: var(--s-8); }
.orders-group .order-card + .order-card { margin-top: var(--s-4); }

/* "Preparing" banner above the details of an active order */
.order-eta-banner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
    font-weight: 700;
    color: var(--text-strong);
}
.order-eta-banner .order-eta { margin-inline-start: auto; }

/* Live multi-step timeline (polling).
   [JS: order-tracker.js] - states: is-done | is-current | is-pending | is-canceled

   Vertical on mobile, horizontal on desktop. "Responsive" here means the **layout** changes, not
   just shrinking; the base is mobile and the media query only adds. */
.order-timeline-card { margin-bottom: var(--s-5); }
.order-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.order-timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding-inline-start: var(--s-2);
}

/* Connector line to the next step. Its color tells **this** step's state, so the traveled path
   is bold and the path ahead stays grey - a progress bar with no extra element. */
.order-timeline-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 11px;
    top: 24px;
    bottom: calc(-1 * var(--s-3));
    width: 2px;
    background: var(--border);
}
.order-timeline-step.is-done:not(:last-child)::before { background: var(--primary); }

.order-timeline-dot {
    width: 22px; height: 22px;
    border-radius: var(--r-full);
    background: var(--bg);
    border: 2px solid var(--border);
    flex: none;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}
.order-timeline-body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.order-timeline-name { font-size: var(--fs-14); font-weight: 700; color: var(--text-muted); }
.order-timeline-at { font-size: var(--fs-12); color: var(--text-muted); opacity: .85; }

/* Done: a solid dot with a tick inside. */
.order-timeline-step.is-done .order-timeline-dot {
    background: var(--primary);
    border-color: var(--primary);
}
.order-timeline-step.is-done .order-timeline-dot::after {
    content: "";
    position: absolute;
    inset-inline-start: 6px;
    top: 3px;
    width: 5px; height: 9px;
    border: solid var(--on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.order-timeline-step.is-done .order-timeline-name { color: var(--text-strong); }

/* Current: a pulsing halo. The animation is the only thing that says the page is live and
   updating itself - without it the user hits refresh. */
@keyframes order-step-pulse {
    from { box-shadow: 0 0 0 0 var(--primary-tint); }
    to { box-shadow: 0 0 0 10px transparent; }
}
.order-timeline-step.is-current .order-timeline-dot {
    background: var(--primary);
    border-color: var(--primary);
    animation: order-step-pulse 2s ease-out infinite;
}
/* WARNING: the raw brand orange on a white card gives a contrast of **2.89** - below AA, on the
   most important label of this box. (This flaw predates this change.) The darkened version gives
   5.41 and keeps the color identity.
   Two declarations are deliberate: a browser without color-mix drops the second one and stays on
   the first, which is itself 17.74. */
.order-timeline-step.is-current .order-timeline-name {
    color: var(--text-strong);
    color: color-mix(in srgb, var(--primary) 70%, black);
}

/* A static halo instead of pulsing, for anyone who turned motion off. */
@media (prefers-reduced-motion: reduce) {
    .order-timeline-step.is-current .order-timeline-dot {
        animation: none;
        box-shadow: 0 0 0 6px var(--primary-tint);
    }
}

/* Cancelled. */
.order-timeline-step.is-canceled .order-timeline-dot {
    background: var(--danger, #dc2626);
    border-color: var(--danger, #dc2626);
}
.order-timeline-step.is-canceled::before { display: none; }
.order-timeline-step.is-canceled .order-timeline-name { color: var(--danger, #dc2626); }

/* -- Desktop: the same steps, now horizontal --
   The cancelled list is deliberately left out: a lone row stretched over the whole width looks
   like a rendering error, not a message. */
@media (min-width: 768px) {
    .order-timeline:not(.is-canceled) {
        flex-direction: row;
        gap: 0;
    }
    .order-timeline:not(.is-canceled) .order-timeline-step {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: var(--s-2);
        padding-inline-start: 0;
        text-align: center;
    }
    /* From the center of this dot to the center of the next. With a logical inset it lands right
       in RTL too: start is the right side. */
    .order-timeline:not(.is-canceled) .order-timeline-step:not(:last-child)::before {
        inset-inline-start: 50%;
        inset-inline-end: -50%;
        top: 10px;
        bottom: auto;
        width: auto;
        height: 2px;
    }
    .order-timeline:not(.is-canceled) .order-timeline-dot { margin-top: 0; }
    .order-timeline:not(.is-canceled) .order-timeline-body {
        align-items: center;
        padding-top: 0;
    }
}

/* Initial loading state. */
.order-timeline-loading {
    display: flex;
    gap: var(--s-3);
    padding-block: var(--s-2);
}

/* Order details page */
.order-detail {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--s-6);
    align-items: start;
}
.order-detail-main { padding: var(--s-6); }
.order-detail-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.order-summary { padding: var(--s-5); }

.order-items { display: flex; flex-direction: column; margin-top: var(--s-4); }
.order-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding-block: var(--s-4);
}
.order-item + .order-item { border-top: 1px dashed var(--border); }
.order-item-img {
    width: 56px; height: 56px;
    border-radius: var(--r-12);
    object-fit: cover;
    background: var(--secondary-tint);
    flex: none;
}
.order-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.order-item-name { font-weight: 700; color: var(--text-strong); }
.order-item-name small { color: var(--text-muted); font-weight: 500; }
.order-item-children { font-size: var(--fs-12); color: var(--text-muted); }
.order-item-total { flex: none; font-weight: 700; color: var(--text-strong); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.6; }
.order-item-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }
.order-item-total .price-old { font-size: var(--fs-12); }

.order-note {
    margin-top: var(--s-4);
    padding: var(--s-4);
    background: var(--bg);
    border-radius: var(--r-12);
    font-size: var(--fs-13);
    color: var(--text);
}

/* Summaries beside the order details */
.summary-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.summary-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.summary-list dt { font-size: var(--fs-13); color: var(--text-muted); flex: none; }
.summary-list dd { font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); text-align: end; }
.summary-list dd.is-negative { color: var(--success); }
.summary-list .summary-total { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.summary-list .summary-total dd { font-size: var(--fs-16); }

/* Add-on/combo subtitle in the invoice rows */
.summary-item-children { display: block; font-size: var(--fs-12); color: var(--text-muted); font-weight: 400; }
.summary-item-price .price-old { display: block; font-size: var(--fs-12); text-align: end; }

/* Dashboard summary tiles */
.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
}
.dash-tile { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); min-width: 0; }
.dash-tile-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--r-12);
    background: var(--primary-tint);
    color: var(--primary);
    flex: none;
}
.dash-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-tile-body small { font-size: var(--fs-12); color: var(--text-muted); }
.dash-tile-body strong { font-size: var(--fs-18); color: var(--text-strong); }
.dash-tile-body strong small { font-size: var(--fs-12); font-weight: 500; }
.dash-tile-cta {
    margin-inline-start: auto;
    padding: var(--s-1) var(--s-3);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--primary);
    flex: none;
}

/* Admin panel shortcut card in the customer panel - above "Account info".
   Rendered only for users with a panel role. */
.admin-shortcut {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-5);
    border-color: var(--primary);
    background: var(--primary-tint);
    min-width: 0;
}
.admin-shortcut:hover { box-shadow: var(--shadow-md); }
.admin-shortcut-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--r-12);
    background: var(--primary);
    color: #fff;
    flex: none;
}
.admin-shortcut-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-shortcut-body strong { font-size: var(--fs-16); color: var(--text-strong); }
.admin-shortcut-body small { font-size: var(--fs-12); color: var(--text-muted); }
.admin-shortcut-cta {
    display: inline-flex; align-items: center; gap: var(--s-1);
    margin-inline-start: auto;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-full);
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-14);
    font-weight: 700;
    flex: none;
}
@media (max-width: 640px) {
    .admin-shortcut { flex-wrap: wrap; }
    .admin-shortcut-cta { margin-inline-start: 0; width: 100%; justify-content: center; }
}

/* Wallet/credit summary in the dashboard */
.wallet-total { font-size: var(--fs-18); font-weight: 800; color: var(--secondary); }
.wallet-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.wallet-buckets div {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-4);
    background: var(--bg);
    border-radius: var(--r-12);
}
.wallet-buckets dt { font-size: var(--fs-12); color: var(--text-muted); }
.wallet-buckets dd { font-size: var(--fs-16); font-weight: 800; color: var(--text-strong); }

.order-card { padding: var(--s-6); }
.order-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
}
.order-eta { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); color: var(--text-muted); }
.order-eta [data-countdown] { font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }

.order-facts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
    margin: 0 0 var(--s-5);
    padding: var(--s-4);
    background: var(--bg);
    border-radius: var(--r-12);
}
.order-fact dt { font-size: var(--fs-12); color: var(--text-muted); margin-bottom: 2px; }
.order-fact dd { margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--text-strong); }

.order-card-foot { display: flex; align-items: center; gap: var(--s-4); }
.order-thumbs { display: flex; }
.order-thumbs img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface);
    background: var(--secondary-tint);
}
.order-thumbs img + img { margin-inline-start: -12px; }
.order-total { margin-inline-start: auto; font-size: var(--fs-18); font-weight: 800; color: var(--text-strong); }
.order-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }
[data-order-toggle] .icon { transition: transform var(--t-fast); }
[data-order-toggle].is-open .icon { transform: rotate(180deg); }

.order-invoice { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px dashed var(--border); }
.order-invoice-lines { display: flex; flex-direction: column; gap: var(--s-3); }
/* Middle invoice rows (discount/tax/courier fee) */
.order-invoice-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-2);
    font-size: var(--fs-13);
    color: var(--text-muted);
}
.order-invoice-line .is-negative { color: var(--success); font-weight: 700; }
.order-invoice-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--primary-tint);
    border-radius: var(--r-12);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-strong);
}
.order-invoice-total small { font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }

.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-8);
    color: var(--text-muted);
    font-size: var(--fs-14);
    text-align: center;
}
.orders-empty .icon { width: 36px; height: 36px; }

/* ============================================================
   Wishlist page
   ============================================================ */
.wishlist-head { margin-bottom: 0; }
.wishlist-head-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.account-main .product-grid { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   Thank-you page
   ============================================================ */
.thankyou-card {
    max-width: 680px;
    margin-inline: auto;
    padding: var(--s-10) var(--s-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-4);
}
.thankyou-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--success-tint);
    color: var(--success);
}
.thankyou-icon .icon { width: 44px; height: 44px; }
.thankyou-icon.is-failed { background: var(--error-tint); color: var(--error); }
/* Invoice inside the thank-you page: card text is centered but item rows are not. */
.thankyou-lines { text-align: start; margin-top: var(--s-5); width: 100%; }
/* Card-to-card instructions - thank-you page and order details. */
.pay-instruction {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    border: 1px dashed var(--warning);
    border-radius: var(--r-16);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    text-align: center;
}
.pay-instruction-head {
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-strong);
}
.pay-instruction-number {
    font-size: var(--fs-20);
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--text-strong);
    direction: ltr;
    unicode-bidi: isolate;
    word-break: break-all;
}
.pay-instruction-holder {
    font-size: var(--fs-14);
    color: var(--text);
}
.pay-instruction-note {
    font-size: var(--fs-13);
    color: var(--text-muted);
    line-height: 1.9;
}

.thankyou-total { width: 100%; }
.thankyou-title { font-size: var(--fs-24); }
.thankyou-sub { color: var(--text-muted); }
.thankyou-facts {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    text-align: start;
    margin-bottom: 0;
}
.thankyou-eta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: var(--s-5);
    border-radius: var(--r-12);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%);
    color: var(--on-primary);
}
.thankyou-eta-label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-14);
    color: rgba(255, 255, 255, .8);
}
.thankyou-eta-timer { font-size: var(--fs-32); font-weight: 800; font-variant-numeric: tabular-nums; }
.thankyou-actions { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }

/* ---------- Tooltip ---------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 50%;
    translate: 50% 0;
    background: var(--ink);
    color: var(--on-primary);
    font-size: var(--fs-12);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-8);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; }

/* ---------- Skeleton ---------- */
.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--r-8);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .container { padding-inline: var(--s-6); }
    .section-title { font-size: var(--fs-24); }
    .hero-title { font-size: var(--fs-32); }
    .location-picker { display: none; }
    .product-grid { grid-template-columns: repeat(4, 1fr); }
    .offer-rail { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); }
    .benefit-grid { grid-template-columns: repeat(2, 1fr); }
    .review-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); }
    .app-panel,
    .app-panel.has-media { grid-template-columns: 1fr; padding: var(--s-8); }
    .app-mockup { order: -1; }
    .app-media img { width: min(100%, 280px); }
    .phone { width: 210px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-aside { position: static; }
    .account-layout { grid-template-columns: 1fr; }
    .account-aside { position: static; }
    .order-facts { grid-template-columns: repeat(3, 1fr); }

    /* From the point where the panel layout goes single-column, the side menu must become a
       horizontal chip rail - previously that was only <=768 and in the 769-1024 range a full-width
       vertical sidebar stretched everything. */
    .account-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: var(--s-1);
        scrollbar-width: none;
        gap: var(--s-2);
        margin-top: var(--s-3);
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .account-nav::-webkit-scrollbar { display: none; }
    .account-nav-link {
        flex: none;
        white-space: nowrap;
        border: 1.5px solid var(--border);
        border-radius: 999px;
        padding: var(--s-2) var(--s-4);
        font-size: var(--fs-13);
        scroll-snap-align: start;
    }
    .account-nav-link .icon { width: 18px; height: 18px; }
    .account-nav-link.is-active { border-color: var(--primary); }
    .account-nav-logout { border-color: var(--error-tint); }
    .account-nav-card { padding: var(--s-4); }
    .account-user { padding-bottom: var(--s-3); }
    .account-avatar { width: 40px; height: 40px; font-size: var(--fs-16); }

    .order-detail { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    :root { --header-h: 64px; }
    body { padding-bottom: 72px; } /* room for bottom nav */

    .header-search, .header-actions .btn-outline { display: none; }
    .header-actions { margin-inline-start: auto; }
    /* Search is a button on mobile; the bar opens only on click. */
    .header-search-toggle { display: inline-flex; }
    .header-search-mobile { display: none; }
    .header-search-mobile.is-open { display: block; }
    .header-logo img { width: 38px; height: 38px; }

    .section { padding-block: var(--s-8); }
    .section-head { margin-bottom: var(--s-6); }

    .hero-inner { grid-template-columns: 1fr; gap: var(--s-8); padding-block: var(--s-8); text-align: center; }
    .hero-copy { align-items: center; }
    .hero-title { font-size: var(--fs-24); }
    .hero-sub { font-size: var(--fs-16); }
    .hero-trust { justify-content: center; gap: var(--s-3); }
    .hero-media { max-width: 320px; }
    .hero-float-off { inset-inline-start: 0; }
    .hero-float-time { inset-inline-end: 0; }

    /* Five stats in two columns means 2+2+1 and a lone stretched cell - the same mess. Single-column
       with label/value rows stays tidy and the number of stats no longer matters (it comes from
       settings and can be even or odd). */
    .stats { margin-top: calc(-1 * var(--s-5)); }
    .stats-grid { grid-template-columns: 1fr; gap: 0; padding: var(--s-2) var(--s-5); }
    .stat {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--s-4);
        padding-block: var(--s-3);
        text-align: start;
        border-bottom: 1px solid var(--border);
    }
    .stat:last-child { border-bottom: 0; }
    .stat dd { font-size: var(--fs-18); }

    /* Horizontal scroll rails on mobile.
       .product-grid is deliberately not here: product cards on the home page, wishlist and menu
       must be **exactly one size** (the menu's two-column grid). Previously the home page was a
       horizontal rail with 260px cards and the menu was two-column, so two sizes showed. */
    /* .category-rail is deliberately not in this group: this rule hides the scrollbar and the
       category rail needs it visible. */
    .offer-rail, .review-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--s-4);
        padding-bottom: var(--s-3);
        margin-inline: calc(-1 * var(--s-6));
        padding-inline: var(--s-6);
        scrollbar-width: none;
    }
    .offer-rail::-webkit-scrollbar, .review-grid::-webkit-scrollbar { display: none; }

    .category-chip { width: 68px; }
    .category-chip-circle { width: 56px; height: 56px; }
    .category-chip-circle img { width: 30px; height: 30px; }
    .category-chip-circle .icon { width: 24px; height: 24px; }

    .offer-card { flex: 0 0 180px; scroll-snap-align: start; }
    .review-card { flex: 0 0 300px; scroll-snap-align: start; }

    /* --- Product card on mobile: a single-column list, not a grid ---
       A two-column grid at phone width squeezes each card to ~160px; at that width neither the name,
       nor the ingredients, nor price and button on one line fit. Single-column lays the same
       content out in a horizontal row: small image, text beside it, and price and add under both.
    
       One unified size for all product lists (menu, home, wishlist, related). grid-wrap is no
       longer needed but is harmless. .account-main .product-grid (wishlist) has higher specificity
       and without being named explicitly it would stay three-column. */
    .product-grid, .product-grid.grid-wrap, .account-main .product-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--s-3);
        /* WARNING: 1fr in single-column mode means "all as tall as the tallest card" - one
           description-heavy product stretched the whole list. */
        grid-auto-rows: auto;
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    /* In RTL the first column is on the right, so the image must be the second column to sit on the
       left and keep the text on the right.
    
       Areas are explicit, not auto flow: the body is a single cell, so its variable number of
       children (time, rating, sales note, ingredients - any may be missing) doesn't create a new row.
       With auto flow the 96px photo height made the first row taller and pushed the title down - that
       same empty space above the title. */
    .product-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 96px;
        grid-template-areas:
            "body media"
            "footer footer";
        align-items: start;
        column-gap: var(--s-3);
        padding: var(--s-3);
        height: auto;
        flex: none;
    }

    .product-body { grid-area: body; padding: 0; gap: var(--s-1); }

    .product-media {
        grid-area: media;
        width: 96px;
        border-radius: var(--r-12);
    }

    /* The image is no longer edge to edge of the card, so it doesn't inherit the card's corner
       radius and needs its own. */
    .product-media img { border-radius: inherit; }

    /* On a 96px thumbnail, a 38px button would cover almost half the photo. */
    .fav-btn { width: 30px; height: 30px; top: var(--s-1); inset-inline-end: var(--s-1); }
    .fav-btn .icon { width: 16px; height: 16px; }

    /* Badges run from the top corner to the photo's bottom edge: at 96px wide the top corner can't
       hold the heart and "Unavailable" at once and they overlapped. */
    .product-badges {
        inset-block-start: auto;
        inset-block-end: 0;
        inset-inline: 0;
        align-items: center;
        gap: 2px;
        padding: 2px;
    }
    .product-badges .badge { font-size: 10px; padding-inline: var(--s-1); }
    .product-oos { font-size: var(--fs-14); }

    .product-name { font-size: var(--fs-16); min-height: 0; }
    /* The fixed floor height belonged to the grid so rows stay aligned; in a single-column list
       there is no row to align and it only creates empty space. */
    .product-desc { font-size: var(--fs-12); min-height: 0; -webkit-line-clamp: 3; }

    .product-footer {
        grid-area: footer;
        margin: var(--s-2) 0 0;
    }

    /* At full width there is room for the label; the square icon-only button becomes a
       "+ Add" pill. */
    .add-btn { width: auto; height: 40px; padding-inline: var(--s-4); gap: var(--s-1); }
    .add-btn-label { display: inline; }

    .page-head { padding-block: var(--s-5); }
    .page-title { font-size: var(--fs-24); }

    /* Cart on mobile */
    .step .step-label { display: none; }
    .step.is-active .step-label { display: inline; }
    .step + .step::before { width: 16px; }
    .cart-card { padding: var(--s-4); }
    .cart-row { flex-wrap: wrap; }
    .cart-row-img { width: 72px; height: 72px; }
    .cart-row-actions {
        width: 100%;
        margin-inline-start: 0;
        justify-content: space-between;
        gap: var(--s-3);
    }
    .cart-row-total { min-width: 0; }
    .cart-row-desc { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

    /* Checkout on mobile: option tiles become horizontal rows */
    .option-grid, .option-grid-2 { grid-template-columns: 1fr; }
    .option-card {
        flex-direction: row;
        align-items: center;
        column-gap: var(--s-4);
        flex-wrap: wrap;
        padding: var(--s-3) var(--s-4);
    }
    .option-card .option-desc { flex-basis: 100%; margin-inline-start: calc(42px + var(--s-4)); margin-top: calc(-1 * var(--s-1)); }

    /* The panel menu's chip rail is in the <=1024 block (where the layout goes single-column). */
    .wallet-charge { width: 100%; margin-inline-start: 0; }
    .wallet-charge .input { flex: 1; width: auto; }
    .order-facts { grid-template-columns: repeat(2, 1fr); }
    .order-card-foot { flex-wrap: wrap; }
    .order-row-meta { grid-template-columns: 1fr 1fr; }
    .order-row-actions .btn { width: 100%; }
    .thankyou-card { padding: var(--s-8) var(--s-5); }
    .thankyou-facts { grid-template-columns: 1fr 1fr; }

    .offers-panel { padding: var(--s-6); border-radius: var(--r-16); }
    .offers-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--s-5); }
    .offer-rail { margin-inline: calc(-1 * var(--s-6)); padding-inline: var(--s-6); }

    /* Single-column: in two ~160px columns even a two-word title broke and text turned into
       four-five narrow lines. */
    .benefit-grid { grid-template-columns: 1fr; gap: var(--s-3); }
    .benefit-card { padding: var(--s-5) var(--s-4); }

    .branch-grid, .contact-grid { grid-template-columns: 1fr; }
    .contact-info, .contact-form, .branch-card, .branch-cta { padding: var(--s-6); }
    .field-row { grid-template-columns: 1fr; }
    .contact-submit { align-self: stretch; }

    /* Link columns go two-up so the footer is halved; the intro block keeps the full width since it
       has running text that breaks badly at half width. */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); padding-block: var(--s-8); }
    .footer-about { grid-column: 1 / -1; }
    .footer-bar-inner { justify-content: center; text-align: center; }
    .site-footer { margin-bottom: 0; }

    .bottom-nav { display: grid; }
}

@media (max-width: 400px) {
    .product-card { flex-basis: 230px; }
    .hero-ctas .btn-lg { padding-inline: var(--s-4); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Green-theme scoped component overrides.

   Everything below is prefixed :root[data-theme="green"] so the light
   theme is byte-for-byte unaffected. These rules only reassign colors
   that the token layer can't express on its own:

   • Generic .btn-primary becomes dark green (#193d3d). Buy-flow CTAs
     stay orange — they are identified by their stable data-* hooks.
   • Orange (#ffa600) is reserved for fills only. White-on-#ffa600 fails
     WCAG AA (~1.9:1), so every orange fill carries dark-green text, and
     every place that used --primary as TEXT/ICON on white is repointed
     to --secondary so small text stays readable (~9:1 on white).
   • The header is a dark-green band via --surface-glass, so its direct
     text children flip light; white header pills keep their own treatment.
   ============================================================ */
:root[data-theme="green"] {

    /* ---- A. Header dark band: light text on dark-green glass ---- */
    .site-header { color: rgba(255, 255, 255, .92); }
    .site-header .header-logo-text,
    .site-header .location-picker,
    .site-header .location-picker-label,
    .site-header .location-picker-value { color: rgba(255, 255, 255, .92); }
    .site-header .location-picker:hover { background: rgba(255, 255, 255, .12); }
    /* White header pills (.header-search, .cart-btn, .btn-outline) keep
       their own dark-on-white treatment via .btn-outline / their rules. */

    /* ---- B. Button role split ---- */
    /* Generic primary → dark green. Buy-flow CTAs (data-* hooks) stay orange. */
    .btn-primary:not([data-add]):not([data-quick-add]):not([data-addon-add]):not([data-checkout-btn]):not([data-place-order]) {
        background: var(--secondary);
        color: var(--on-primary);
        box-shadow: 0 4px 14px rgba(25, 61, 61, .22);
    }
    .btn-primary:not([data-add]):not([data-quick-add]):not([data-addon-add]):not([data-checkout-btn]):not([data-place-order]):hover {
        background: #2a5757;
        box-shadow: 0 6px 18px rgba(25, 61, 61, .3);
    }
    /* Orange CTAs: dark-green text for WCAG AA (~6.3:1). */
    .btn-primary[data-add],
    .btn-primary[data-quick-add],
    .btn-primary[data-addon-add],
    .btn-primary[data-checkout-btn],
    .btn-primary[data-place-order] { color: var(--secondary); }

    /* ---- C. Secondary buttons → light green ---- */
    .btn-secondary {
        background: #a7d396;
        color: var(--secondary);
        border-color: #a7d396;
    }
    .btn-secondary:hover { background: #94c584; border-color: #94c584; }

    /* ---- D. WCAG: dark text/icon on every orange fill ---- */
    .cart-badge { color: var(--secondary); }            /* keep white ring for separation */
    .floating-cart { color: var(--secondary); }
    .step.is-active .step-num { color: var(--secondary); }
    .phone-cta { color: var(--secondary); }
    .qty-btn:hover { color: var(--secondary); }

    /* ---- E. Orange-as-text/icon on white → repoint to dark green ----
       (orange #ffa600 on white ≈ 1.9:1 fails AA; dark green ≈ 9:1 passes) */
    .btn-text,
    .btn-text:hover,
    .btn-outline:hover,
    .link:hover,
    .breadcrumb a:hover,
    .cart-btn:hover,
    .cart-pop-qty,
    .hero-title em,
    .hero-float-time .icon,
    .category-chip:hover .category-chip-circle { color: var(--secondary); }
    .btn-outline:hover,
    .cart-btn:hover,
    .category-chip:hover .category-chip-circle,
    .address-item:hover,
    .addon-card:hover,
    .option-card:hover,
    .option-card:has(input:checked) { border-color: var(--secondary); }
    .qty-btn,
    .empty-icon,
    .option-icon,
    .branch-icon,
    .benefit-icon,
    .account-avatar,
    .branch-cta,
    .app-features .icon,
    .contact-list .icon { color: var(--secondary); }
    .footer-col a:hover { color: var(--primary); }     /* orange on dark footer = fine */

    /* ---- F. Sale/discount badge -> deep red ----
       Until now the badge was `var(--primary)`, exactly the same #ffa600 as the "Add" button with the
       same #193d3d text - a contrast ratio of 1.00 between the two (measured). On a card two things
       with two completely different jobs became one solid orange blob and the badge no longer drew
       attention.
    
       The same deep red of the green-dark skin is used so "discount = red" stays the same in both
       skins: text contrast on it is 4.85 and on the page's white background 5.2, and it is 2.65 away
       from the button orange (all three measured).
    
       WARNING: `--error` was deliberately left alone: this theme also uses it for error messages and
       changing it would take them along. */
    .badge-off { background: #c8372d; color: #fff5f3; }

    /* ---- G. Active category chip → light green (was orange) ---- */
    .category-chip.is-active .category-chip-circle {
        background: #a7d396;
        border-color: #a7d396;
        box-shadow: 0 6px 16px rgba(167, 211, 150, .4);
    }
    .category-chip.is-active .category-chip-name,
    .category-chip.is-active .category-chip-circle .icon { color: var(--secondary); }

    /* ---- H. Active pagination → dark green (was orange) ---- */
    .pagination-item a:hover { border-color: var(--secondary); color: var(--secondary); }
    .pagination-item.is-active span {
        background: var(--secondary);
        border-color: var(--secondary);
        color: var(--on-primary);
    }

    /* ---- I. Active bottom-nav item → dark green (was orange) ---- */
    .bottom-nav-item.is-active { color: var(--secondary); }

    /* ---- J. Favorite button on cards → white glass (not dark header glass) ---- */
    .fav-btn:not(.is-active) { background: rgba(255, 255, 255, .92); color: var(--text-muted); }

    /* Liked: the same deep red of the discount badge with a light icon (contrast 4.85).
       WARNING: the normal-state rule above has `:not(.is-active)`: previously that rule (under
       `:root[data-theme]`, so more specific than `.fav-btn.is-active`) also covered the liked state -
       in "green" the white heart on the white button was invisible and in "green-dark" the button
       never turned red (measured). This theme's `--error` is deliberately not used: in green-dark it
       is a light pink and light text on it isn't legible. */
    .fav-btn.is-active {
        background: #c8372d;
        color: #fff5f3;
        box-shadow: 0 2px 10px rgba(200, 55, 45, .45);
    }
    .fav-btn.is-active .icon { fill: #fff5f3; stroke: #fff5f3; }

    /* ---- K. Focus ring → dark green (primary focus; orange reserved) ---- */
    .input:focus,
    .header-search:focus-within {
        border-color: var(--secondary);
        box-shadow: 0 0 0 4px rgba(25, 61, 61, .12);
    }
    .input.is-invalid:focus { box-shadow: 0 0 0 4px var(--error-tint); }

    /* ---- L. Controls → dark green (checkbox/radio custom style) ---- */
    input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--secondary); }
    input[type="checkbox"]:checked { background: var(--secondary); border-color: var(--secondary); }
    input[type="radio"]:checked { border-color: var(--secondary); }
    input[type="radio"]::before { background: var(--secondary); }

    /* ---- M. Misc orange-on-white glows → dark-green ---- */
    .step.is-active .step-num { box-shadow: 0 4px 10px rgba(25, 61, 61, .22); }
}

/* ============================================================
   Green-dark theme — immersive dark-green skin.
   Like [data-theme="green"] but with a full dark-green page and
   dark-green cards/surfaces instead of white. Orange (#ffa600)
   stays the accent for buy-flow CTAs / badges / cart-count; light
   green (#a7d396) tints the chips. Component overrides below reuse
   the same role rules as the green theme (button split, WCAG
   orange-on-dark) plus dark-surface-specific tweaks.
   ============================================================ */
:root[data-theme="green-dark"] {
    --bg: #193d3d;
    --surface: #1f4a4a;
    --surface-2: #245050;
    --surface-glass: rgba(16, 38, 38, .94);
    --gradient-top: #1f4a4a;

    --primary: #ffa600;          /* orange accent */
    --primary-hover: #e59400;
    --primary-tint: rgba(255, 166, 0, .16);

    --secondary: #a7d396;        /* light green — used as the "accent text" */
    --secondary-deep: #102626;
    --secondary-tint: #245050;

    --text-strong: #f1f7f3;      /* near-white headings / prices */
    --text: #cdd8d2;             /* body text (AA on dark surface) */
    --text-muted: #93a8a0;       /* muted (AA on dark surface) */
    --border: #2f5e5e;           /* subtle green hairline on dark */

    --success: #5ec47f;
    --success-tint: rgba(94, 196, 127, .16);
    --error: #f08a7e;
    --error-tint: rgba(240, 138, 126, .16);

    --overlay: rgba(0, 0, 0, .6);
    --input-bg: #245050;

    /* Scrollbar: light-green thumb on the dark-green surface. */
    --scroll-thumb: rgba(167, 211, 150, .38);
    --scroll-thumb-hover: rgba(167, 211, 150, .58);

    /* --ink / --on-ink stay dark-on-light: always-dark chrome. */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .28);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .42), 0 2px 4px rgba(0, 0, 0, .3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .32);

    /* ---- Header dark band: light text ---- */
    .site-header { color: rgba(255, 255, 255, .92); }
    .site-header .header-logo-text,
    .site-header .location-picker,
    .site-header .location-picker-label,
    .site-header .location-picker-value { color: rgba(255, 255, 255, .92); }
    .site-header .location-picker:hover { background: rgba(255, 255, 255, .12); }

    /* ---- Button role split (same hooks as green theme) ---- */
    /* Generic primary → dark, slightly deeper than surface. */
    .btn-primary:not([data-add]):not([data-quick-add]):not([data-addon-add]):not([data-checkout-btn]):not([data-place-order]) {
        background: var(--secondary-deep);
        color: var(--on-primary);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    }
    .btn-primary:not([data-add]):not([data-quick-add]):not([data-addon-add]):not([data-checkout-btn]):not([data-place-order]):hover {
        background: #0a1c1c;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
    }
    /* Orange CTAs: dark text on orange (AA on #ffa600). */
    .btn-primary[data-add],
    .btn-primary[data-quick-add],
    .btn-primary[data-addon-add],
    .btn-primary[data-checkout-btn],
    .btn-primary[data-place-order] { color: #193d3d; }

    /* ---- Secondary buttons → light green ---- */
    .btn-secondary {
        background: var(--secondary);
        color: var(--secondary-deep);
        border-color: var(--secondary);
    }
    .btn-secondary:hover { background: #94c584; border-color: #94c584; }

    /* ---- Outline / text / link buttons readable on dark ---- */
    .btn-outline { background: var(--surface); color: var(--text-strong); border-color: var(--border); }
    .btn-outline:hover { border-color: var(--secondary); color: var(--secondary); }
    .btn-text,
    .btn-text:hover,
    .link:hover,
    .breadcrumb a:hover { color: var(--secondary); }

    /* ---- WCAG: dark text/icon on orange fills; light icons elsewhere ---- */
    .cart-badge { color: #193d3d; }
    .floating-cart { color: #193d3d; }
    .step.is-active .step-num {
        color: #193d3d;
        box-shadow: 0 4px 10px rgba(255, 166, 0, .3);
    }
    .phone-cta { color: #193d3d; }
    .qty-btn { background: var(--surface-2); color: var(--secondary); }
    .qty-btn:hover { background: var(--primary); color: #193d3d; }
    .cart-pop-qty { color: var(--primary); }

    /* ---- Dark-surface pills & icons ---- */
    .cart-btn { background: var(--surface-2); border-color: var(--border); color: var(--text-strong); }
    .cart-btn:hover { border-color: var(--secondary); color: var(--secondary); }
    .header-search { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
    .header-search-input { color: var(--text-strong); }
    .fav-btn:not(.is-active) { background: rgba(255, 255, 255, .08); color: var(--text-muted); }

    /* Liked: the same deep red of the discount badge with a light icon (contrast 4.85).
       WARNING: the normal-state rule above has `:not(.is-active)`: previously that rule (under
       `:root[data-theme]`, so more specific than `.fav-btn.is-active`) also covered the liked state -
       in "green" the white heart on the white button was invisible and in "green-dark" the button
       never turned red (measured). This theme's `--error` is deliberately not used: in green-dark it
       is a light pink and light text on it isn't legible. */
    .fav-btn.is-active {
        background: #c8372d;
        color: #fff5f3;
        box-shadow: 0 2px 10px rgba(200, 55, 45, .45);
    }
    .fav-btn.is-active .icon { fill: #fff5f3; stroke: #fff5f3; }

    /* ---- Active category chip → light green (matches dark surface) ---- */
    .category-chip:hover .category-chip-circle { border-color: var(--secondary); }
    .category-chip.is-active .category-chip-circle {
        background: var(--secondary);
        border-color: var(--secondary);
        box-shadow: 0 6px 16px rgba(167, 211, 150, .3);
    }
    .category-chip.is-active .category-chip-name,
    .category-chip.is-active .category-chip-circle .icon { color: var(--secondary-deep); }

    /* ---- Sale/discount badge -> deep red, deliberately NOT the CTA orange ----
    
       This badge used to be `--primary` itself, exactly the orange of the "Add" button a few
       centimeters below it. On the dark green background the eye couldn't tell the two apart and both
       lost their visual role: the badge no longer drew attention and the button was no longer the
       card's only orange spot.
    
       Deep red keeps the "discount" convention and is far from orange in both hue and lightness.
       Text contrast on it is 4.85 (measured), so it stays legible over the product photo too.
    
       WARNING: `--error` was deliberately left alone: this theme also uses it for error messages and
       changing it would take them along. */
    .badge-off { background: #c8372d; color: #fff5f3; }
    .badge-muted { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }

    /* ---- Pagination → light green accent on dark ---- */
    .pagination-item a:hover { border-color: var(--secondary); color: var(--secondary); }
    .pagination-item.is-active span {
        background: var(--secondary);
        border-color: var(--secondary);
        color: var(--secondary-deep);
    }

    /* ---- Bottom nav: dark surface, light-green active ---- */
    .bottom-nav { background: var(--surface); border-top-color: var(--border); }
    .bottom-nav-item { color: var(--text-muted); }
    .bottom-nav-item.is-active { color: var(--secondary); }

    /* ---- Footer: deepest dark green; orange hover ---- */
    .footer-col a:hover { color: var(--primary); }

    /* ---- Focus ring → light green on dark ---- */
    .input:focus,
    .header-search:focus-within {
        border-color: var(--secondary);
        box-shadow: 0 0 0 4px rgba(167, 211, 150, .18);
    }
    .input.is-invalid:focus { box-shadow: 0 0 0 4px var(--error-tint); }

    /* ---- Controls → light green (checkbox/radio custom style) ---- */
    input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--secondary); }
    input[type="checkbox"]:checked { background: var(--secondary); border-color: var(--secondary); }
    input[type="radio"]:checked { border-color: var(--secondary); }
    input[type="radio"]::before { background: var(--secondary); }

    /* ---- Borders on interactive cards → light green on hover ---- */
    .address-item:hover,
    .addon-card:hover,
    .option-card:hover,
    .option-card:has(input:checked) { border-color: var(--secondary); }
}


/* -- Header horizontal overflow on narrow pages --
   A real, site-wide bug: at 375px the header needed 504px, so **every page** got a horizontal
   scroll on mobile. Cause: none of the flex items were allowed to shrink - a flex item's default
   `min-width` is `auto`, i.e. "don't get smaller than your content".

   The fix is structural, not a patch: let the logo and branch name truncate so the header fits
   at any width, and below 430px drop the brand name since the brand mark alone is enough. */

.header-inner > * {
    min-width: 0;
}

/* Search is the first thing to get room, but below 200px it is no longer typeable. It comes after
   `.header-inner > *` so that rule's `min-width: 0` doesn't cancel it. */
.header-search {
    min-width: 200px;
}

.header-logo {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.header-logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-actions {
    flex: 0 1 auto;
    min-width: 0;
}

/* The branch name is the last thing to be truncated; the button itself must stay since price and
   stock are branch-based. */
.header-actions .pop-wrap {
    min-width: 0;
}

/* But only the pickers may shrink. The cart and user account have a fixed width (`.cart-btn` =
   46px) and the button's own `flex: none` does nothing when its wrapper shrinks: the button
   overflows the wrapper and lands on its neighbor - the observed "sticking together" (cart wrapper
   33px for a 46px button). */
.header-actions .pop-wrap.pop-hover,
.header-actions [data-user-wrap] {
    flex: none;
}

.location-picker {
    min-width: 0;
}

.location-picker-value {
    max-width: 100%;
}

@media (max-width: 390px) {
    .header-logo-text {
        display: none;
    }
}

/* The touch target never shrinks. Without this, flex squeezed the cart button down to 26px at
   320px - sacrificing accessibility to fix a 6px scroll. */
.header-burger,
.header-search-toggle,
.header-actions .cart-btn,
.header-actions .user-btn,
.header-logo img {
    flex: none;
}

/* Below 768px the bottom nav (`.bottom-nav`) is visible and already has "Account" and
   "Cart"; repeating them in the header takes space and is pointless. With them gone, the branch
   button and search get enough room and the header fits at any width. */
@media (max-width: 767px) {
    .header-actions [data-user-wrap],
    .header-actions .pop-wrap.pop-hover {
        display: none;
    }
}

@media (max-width: 390px) {
    .header-inner {
        gap: var(--s-2);
    }

    .location-picker-branch {
        max-width: 108px;
    }
}

/* -- Next/previous product navigation in the popup --
   They sit at the middle of the card's left and right edges. In RTL the next item is on the left,
   so "next" is left and "previous" right - the same mapping the arrow keys have. */
.product-modal .modal-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-glass, rgba(255, 255, 255, .82));
    color: var(--text-strong);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}

.product-modal .modal-nav-next { left: 8px; }
.product-modal .modal-nav-prev { right: 8px; }

.product-modal .modal-nav:hover:not(:disabled) {
    transform: scale(1.06);
}

/* At the start and end of the list we stop; the button must look inert. */
.product-modal .modal-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* On mobile swipe does the main job and the buttons are only auxiliary; smaller so they don't
   cover the photo. */
@media (max-width: 640px) {
    .product-modal .modal-nav {
        width: 34px;
        height: 34px;
        margin-top: -17px;
    }
}

/* ===== Demo login hint ===== */
/* Color and shape come from the theme's own `.badge`; only spacing here.
   WARNING: the first version had a hand-picked color (primary-hover on primary-tint) and its
   contrast came out 3.28 in the browser - below AA, on a label whose whole job is to be seen. */
.demo-hint-badge { margin-bottom: var(--s-3); }

/* Credentials box: two label/value rows. The value is large with wider letter spacing since
   the user reads it to type it. */
.demo-hint-creds {
    overflow: hidden;
    margin-block: 0 var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--r-16);
}

.demo-hint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
}

/* WARNING: the row deliberately has **no** colored fill. With var(--surface-2) behind it the grey
   label came to 4.34 - below AA. On the card's own surface it gets the same 4.83 as the
   `.modal-sub` above it, so it stays in the same family as the rest of the modal. */
.demo-hint-row + .demo-hint-row { border-top: 1px solid var(--border); }
.demo-hint-row dt { color: var(--text-muted); font-size: var(--fs-14); }

.demo-hint-row dd {
    margin: 0;
    color: var(--text-strong);
    font-size: var(--fs-16);
    font-weight: 700;
    letter-spacing: .04em;
}

/* ============================================================
   Festival and promo banners
   ============================================================
   Its structure is deliberately the same as `.res-banner` (copy + media, with the has-media
   modifier) so the two home-page banners look like one family. Written separately and not tied
   to that one, since they live in two different files with two different owners. */
.promo-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.promo-banner {
    display: grid;
    gap: var(--s-6);
    padding: var(--s-8);
    border: 1px solid var(--border);
    border-radius: var(--r-24);
    background:
        radial-gradient(120% 120% at 0% 0%, var(--primary-tint), transparent 60%),
        var(--surface);
}

.promo-banner.has-media {
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 900px) {
    .promo-banner.has-media {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.promo-banner-media img {
    width: 100%;
    height: auto;
    border-radius: var(--r-16);
    object-fit: cover;
}

.promo-banner-actions { margin-top: var(--s-5); }