/* ==========================================================================
   Elysium Kitchen Noise — Design System
   Source palette: assets/images/website layout.png

   Contents
   01. Tokens
   02. Reset & base
   03. Layout primitives
   04. Components — buttons, chips, cards
   05. Header & navigation
   06. Hero
   07. Feature bar
   08. Categories
   09. Dishes
   10. How it works
   11. Branches
   12. CTA
   13. Footer
   14. Floating actions — WhatsApp & back-to-top
   15. Auth (login / forgot password)
   16. Modal
   17. Contact page
   18. About page — story timeline
   19. Menu page — branch picker, category tabs, item cards
   20. Item options & quantity stepper
   21. Cart page
   22. Checkout & order confirmation
   23. Toast
   24. Responsive
   ========================================================================== */

/* ==========================================================================
   01. Tokens
   ========================================================================== */

:root {
    /* Brand palette */
    --color-primary: #4F624F;        /* deep sage green — headers, buttons, nav */
    --color-primary-light: #C7D1C2;  /* muted sage — badges, secondary surfaces */
    --color-bg: #F5F2EC;             /* warm off-white — page background */
    --color-bg-alt: #E9E2D6;         /* warm beige — alt sections, cards */

    /* Primary shades */
    --color-primary-dark: #3D4C3D;
    --color-primary-darker: #2C382C;
    --color-primary-soft: #EDF1EB;

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-black: #1A1A1A;
    --color-text: #2B2B2B;
    --color-text-muted: #6B6F6B;
    --color-border: #E4DED2;
    --color-border-strong: #D3CBBA;

    /* Status */
    --color-success: #3F8A4C;
    --color-success-bg: #E8F3E9;
    --color-danger: #C0392B;
    --color-danger-bg: #FBEAE8;
    --color-warn: #A9761B;
    --color-warn-bg: #FBF3DC;

    /* Typography */
    --font-primary: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Fluid type scale */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-h3: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
    --fs-h2: clamp(1.6rem, 1.28rem + 1.35vw, 2.35rem);
    --fs-h1: clamp(2.35rem, 1.55rem + 3.3vw, 3.9rem);

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
    --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Shadows — layered for realistic depth */
    --shadow-xs: 0 1px 2px rgba(44, 56, 44, 0.05);
    --shadow-sm: 0 1px 2px rgba(44, 56, 44, 0.05), 0 2px 8px rgba(44, 56, 44, 0.05);
    --shadow-md: 0 2px 4px rgba(44, 56, 44, 0.04), 0 8px 20px rgba(44, 56, 44, 0.08);
    --shadow-lg: 0 4px 8px rgba(44, 56, 44, 0.04), 0 18px 40px rgba(44, 56, 44, 0.12);
    --shadow-brand: 0 8px 20px -8px rgba(79, 98, 79, 0.5);

    /* Motion */
    --transition-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container-width: 1200px;
    --container-pad: clamp(1.15rem, 0.85rem + 1.4vw, 2rem);
    --header-height: 80px;
    /* Header sits ABOVE the slide-in nav panel so the close button stays clickable */
    --z-header: 200;
    --z-nav: 100;
}

/* ==========================================================================
   02. Reset & base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
    -webkit-text-size-adjust: 100%;
    /* `html`, not `body`, is the browser's actual scrolling root. The
       off-canvas mobile nav panel sits fixed just past the right edge
       (translateX(100%)) while closed, which otherwise expands the root's
       scrollable area and lets the whole layout — including the header —
       drift past the visible viewport on phones. */
    overflow-x: hidden;
    /* Keeps the scrollbar's space reserved at all times, so freezing the
       page for a modal doesn't let the layout jump sideways as the bar
       disappears. */
    scrollbar-gutter: stable;
}

/* Freezes the page behind a modal or the mobile nav. This belongs on <html>
   rather than <body>: because the rule above gives the root a non-visible
   overflow, body's overflow is never propagated to the viewport, so locking
   body alone would have no effect. */
html.is-scroll-locked {
    overflow: hidden;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

h1, h2, h3, h4 {
    font-weight: var(--fw-bold);
    color: var(--color-primary-darker);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 3px;
}

::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   03. Layout primitives
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.section {
    padding-block: var(--space-section);
    background-color: var(--color-white);
}

.section--muted {
    background-color: var(--color-bg);
}

/* Section headings ------------------------------------------------------- */

.section-heading {
    max-width: 52ch;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
    text-align: center;
}

.section-heading h1,
.section-heading h2 {
    /* Pages that use <h1> here (branches.php) still want the normal section
       heading size, not the huge global hero h1 — this keeps it consistent
       with every other section heading on the site regardless of which
       heading level is semantically correct for that page. */
    font-size: var(--fs-h2);
    margin-block: var(--space-md) var(--space-sm);
}

.section-heading p {
    color: var(--color-text-muted);
}

/* Split variant: heading left, action right (desktop) */
.section-heading--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: none;
    text-align: left;
}

.section-heading--split > div {
    max-width: 52ch;
}

.section-heading--split .btn {
    flex-shrink: 0;
}

/* ==========================================================================
   04. Components
   ========================================================================== */

/* Chips ------------------------------------------------------------------ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

.chip i {
    color: var(--color-primary);
    font-size: 0.9em;
}

.chip--ok {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.chip--bad {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
}

.chip--warn {
    background-color: var(--color-warn-bg);
    color: var(--color-warn);
}

/* Buttons ---------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem 1.7rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}

.btn i {
    font-size: 0.85em;
    transition: transform var(--transition-fast);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:hover i.fa-arrow-right {
    transform: translateX(3px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-brand);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 10px 24px -8px rgba(79, 98, 79, 0.62);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-primary-darker);
}

.btn-outline:hover {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.btn-ghost {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.btn-ghost:hover {
    background-color: var(--color-primary-light);
}

.btn-light {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary-darker);
}

.btn-light:hover {
    background-color: var(--color-bg);
    border-color: var(--color-bg);
}

.btn-outline-light {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-white);
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-sm {
    padding: 0.62rem 1.1rem;
    font-size: var(--fs-xs);
}

.btn-lg {
    padding: 1.05rem 2.1rem;
    font-size: var(--fs-base);
}

.btn-block {
    width: 100%;
}

/* ==========================================================================
   05. Header & navigation
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* The frosted-glass background lives on a pseudo-element rather than
   `.site-header` itself. `backdrop-filter` on an element makes it the
   containing block for any `position: fixed` descendant (same family as
   `transform`/`filter`) — and `.main-nav` (the mobile slide-in panel) is
   one such descendant. Putting the filter here keeps `.main-nav` anchored
   to the real viewport instead of collapsing to the header's own height. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(245, 242, 236, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color var(--transition-base);
}

.site-header.is-scrolled {
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.site-header.is-scrolled::before {
    background-color: rgba(245, 242, 236, 0.96);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    height: var(--header-height);
}

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    height: 38px;
    width: auto;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 0.6rem + 1.6vw, 2.25rem);
}

.nav-link {
    position: relative;
    display: inline-block;
    padding-block: 0.35rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-primary-darker);
    font-size: var(--fs-base);
    box-shadow: var(--shadow-xs);
    transition: background-color var(--transition-fast), color var(--transition-fast),
                transform var(--transition-fast);
}

.cart-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-bg);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.625rem;
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: var(--shadow-xs);
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-primary-darker);
    transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) - 1);
    background-color: rgba(26, 26, 26, 0.45);
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Must out-specify the `display: block` the mobile breakpoint sets, or the
   invisible overlay would keep swallowing taps while the menu is closed. */
.nav-overlay[hidden] {
    display: none;
}

.nav-overlay.is-visible {
    opacity: 1;
}

/* ==========================================================================
   06. Hero
   ========================================================================== */

.hero {
    position: relative;
    background-color: var(--color-bg);
    padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) clamp(5rem, 3rem + 8vw, 9rem);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -10%;
    width: 640px;
    height: 640px;
    max-width: 75vw;
    max-height: 75vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 98, 79, 0.10), rgba(79, 98, 79, 0) 68%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
}

.hero-badge {
    margin-bottom: var(--space-lg);
    background-color: var(--color-white);
    box-shadow: var(--shadow-xs);
}

.hero-title {
    font-size: var(--fs-h1);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-primary-darker);
}

.hero-leaf {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    transform: rotate(-10deg) translateY(-0.06em);
}

.hero-leaf svg {
    width: 0.7em;
    height: 0.7em;
}

.hero-text {
    margin-top: var(--space-lg);
    max-width: 44ch;
    font-size: var(--fs-md);
    color: var(--color-text-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.hero-actions .btn {
    padding: 1.05rem 2.1rem;
    font-size: var(--fs-base);
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.hero-facts strong {
    display: block;
    font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.75rem);
    font-weight: var(--fw-bold);
    color: var(--color-primary-darker);
    line-height: 1;
    letter-spacing: -0.02em;
}

.hero-facts span {
    display: block;
    margin-top: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
}

.hero-media {
    position: relative;
    display: grid;
    place-items: center;
    padding: var(--space-lg);
}

.hero-media-ring,
.hero-media-halo {
    position: absolute;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    pointer-events: none;
}

.hero-media-ring {
    width: 92%;
    border: 1.5px dashed var(--color-primary-light);
}

.hero-media-halo {
    width: 80%;
    background-color: var(--color-primary-light);
    opacity: 0.5;
}

.hero-frame {
    position: relative;
    z-index: 1;
    width: min(410px, 84%);
    aspect-ratio: 1 / 1;
    padding: 10px;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hero-tag {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 8%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.05rem;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.hero-tag i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.8rem;
}

.hero-tag strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-darker);
    line-height: 1.3;
}

.hero-tag small {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   07. Feature bar — floats over the hero/next-section boundary
   ========================================================================== */

.feature-bar {
    position: relative;
    z-index: 2;
    background: linear-gradient(to bottom, var(--color-bg) 50%, var(--color-white) 50%);
}

.feature-bar-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-top: clamp(-4.5rem, -3rem - 3vw, -3rem);
    padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-inline: clamp(0.5rem, 0.2rem + 0.8vw, 1rem);
    border-right: 1px solid var(--color-border);
}

.feature-item:last-child {
    border-right: none;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-md);
}

.feature-text strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-darker);
    line-height: 1.35;
}

.feature-text span {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   08. Categories
   ========================================================================== */

/* Centred wrapping row rather than a fixed 8-column grid: the number of
   categories comes from the database, so a hard column count either strands
   three cards against a wide empty gap or squashes twelve. */
.category-scroller {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}

.category-scroller li {
    flex: 1 1 140px;
    max-width: 190px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 0.7rem;
    padding: var(--space-lg) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.category-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-lg);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.category-card:hover .category-icon {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.category-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-darker);
}

/* ==========================================================================
   09. Dishes
   ========================================================================== */

.dishes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}

.dish-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.dish-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.dish-media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background-color: var(--color-bg-alt);
}

.dish-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.dish-card:hover .dish-media img {
    transform: scale(1.07);
}

.dish-badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-sm);
}

.dish-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--space-lg);
}

.dish-category {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.dish-name {
    margin-top: 0.35rem;
    font-size: var(--fs-h3);
}

.dish-desc {
    margin-top: 0.4rem;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.dish-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: auto;
    padding-top: var(--space-lg);
}

.dish-price {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-primary-darker);
    letter-spacing: -0.02em;
}

/* "from $10.00" — shown when a dish costs different amounts at different
   branches, so the homepage never quotes one branch's price as the price. */
.dish-price-from {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
}

.dish-btn:hover i {
    transform: none;
}

/* ==========================================================================
   10. How it works
   ========================================================================== */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}

.step-card {
    position: relative;
    padding: var(--space-xl) var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.step-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

/* Connector line between steps on wide screens */
.step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 3.35rem;
    right: -1px;
    width: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
    height: 1px;
    border-top: 1px dashed var(--color-border-strong);
    transform: translateX(100%);
}

.step-number {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-primary-light);
    line-height: 1;
}

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--fs-lg);
}

.step-title {
    font-size: var(--fs-h3);
    margin-bottom: 0.35rem;
}

.step-text {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* ==========================================================================
   11. Branches
   ========================================================================== */

/* Columns are capped rather than fixed at three: the branch count comes from
   the database, so two branches centre themselves instead of sitting beside
   an empty third column, and more than three still wrap tidily. */
.branches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    justify-content: center;
    gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}

.branch-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.branch-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Buttons/links inside the card open their own destination and shouldn't
   look like part of the "open details" click target. */
.branch-card .branch-actions {
    cursor: auto;
}

.branch-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.branch-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.branch-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-slow);
}

.branch-card:hover .branch-image img {
    transform: scale(1.07);
}

.branch-card.is-unavailable .branch-image img {
    filter: saturate(0.55);
}

.branch-status {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.32rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-sm);
}

.branch-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.branch-status.is-open {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.branch-status.is-closed {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
}

.branch-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--space-lg);
}

.branch-name {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-md);
}

.branch-meta {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-bottom: 1px dashed var(--color-border-strong);
}

/* Used inside the branch details modal, where the meta list is followed by
   other .modal-body sections (which already have their own gap) rather
   than by more card content — no divider/spacing of its own needed. */
.branch-meta--plain {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.modal-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.branch-meta li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.branch-meta i {
    width: 15px;
    margin-top: 0.28rem;
    flex-shrink: 0;
    text-align: center;
    color: var(--color-primary);
}

.branch-meta a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.branch-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: auto;
}

.branch-actions .btn {
    flex: 1;
}

/* Empty state — shown when a listing section (branches, menu, ...) has
   nothing to display yet. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 46ch;
    margin-inline: auto;
    padding: var(--space-xxl) var(--space-lg);
    text-align: center;
}

.empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-sm);
    border-radius: 50%;
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
}

.empty-state h3 {
    font-size: var(--fs-md);
}

.empty-state p {
    color: var(--color-text-muted);
}

.empty-state .btn {
    margin-top: var(--space-sm);
}

/* ==========================================================================
   12. CTA
   ========================================================================== */

.cta {
    padding-block: 0 var(--space-section);
    background-color: var(--color-bg);
}

.cta-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: wrap;
    padding: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
    border-radius: var(--radius-xl);
    background-color: var(--color-primary);
    overflow: hidden;
    isolation: isolate;
}

.cta-card::before,
.cta-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.055);
}

.cta-card::before {
    width: 300px;
    height: 300px;
    top: -140px;
    right: -50px;
}

.cta-card::after {
    width: 200px;
    height: 200px;
    bottom: -110px;
    left: 10%;
}

.cta-content {
    max-width: 46ch;
}

.cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--color-white);
    font-size: var(--fs-md);
}

.cta h2 {
    color: var(--color-white);
}

.cta p {
    margin-top: var(--space-sm);
    color: rgba(255, 255, 255, 0.78);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-footer {
    background-color: var(--color-primary-darker);
    color: rgba(255, 255, 255, 0.68);
    padding-top: var(--space-section);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-xxl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    height: 34px;
    margin-bottom: var(--space-md);
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.footer-brand p {
    max-width: 34ch;
    font-size: var(--fs-sm);
}

.footer-socials {
    display: flex;
    gap: 0.6rem;
    margin-top: var(--space-lg);
}

/* Specificity note: `.footer-col a` (below) also matches these anchors
   since .footer-socials sits inside a .footer-col. Both selectors are
   equally specific (0,1,1), so scoping through the parent here
   (.footer-brand .footer-socials a -> 0,3,1) is what makes this win
   regardless of source order, instead of silently losing `display: flex`
   and leaving the icons unable to center themselves. */
.footer-brand .footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    font-size: var(--fs-sm);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.footer-brand .footer-socials a:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
}

.footer-col h4 {
    margin-bottom: var(--space-md);
    color: var(--color-white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-col a {
    display: inline-block;
    font-size: var(--fs-sm);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-col a:hover {
    color: var(--color-white);
    transform: translateX(3px);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.footer-contact i {
    width: 15px;
    margin-top: 0.3rem;
    flex-shrink: 0;
    text-align: center;
    color: var(--color-primary-light);
}

.footer-bottom {
    padding-block: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.45);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.footer-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-credit::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
}

.footer-credit a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 2px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.footer-credit a:hover {
    color: var(--color-white);
    text-decoration-color: currentColor;
}

.footer-login-btn {
    flex-shrink: 0;
    padding-block: 0.55rem;
}

/* ==========================================================================
   14. Floating actions — WhatsApp & back-to-top

   Both are fixed, corner-anchored circular buttons. They sit below the
   mobile nav panel/overlay in the stacking order (z-index 60 vs. 99/100)
   so they are correctly dimmed and unreachable while that menu is open.
   ========================================================================== */

.whatsapp-btn,
.back-to-top {
    position: fixed;
    bottom: clamp(1.1rem, 0.7rem + 1.2vw, 1.85rem);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                background-color var(--transition-fast), opacity var(--transition-base),
                visibility var(--transition-base);
}

.whatsapp-btn:focus-visible,
.back-to-top:focus-visible {
    outline-offset: 4px;
}

/* --- WhatsApp --------------------------------------------------------- */

.whatsapp-btn {
    left: clamp(1.1rem, 0.7rem + 1.2vw, 1.85rem);
    background-color: #25d366;
    color: var(--color-white);
    font-size: 1.65rem;
}

.whatsapp-btn:hover {
    background-color: #1fb959;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 16px 32px -10px rgba(37, 211, 102, 0.55);
}

.whatsapp-btn__ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #25d366;
    opacity: 0.5;
    animation: whatsapp-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes whatsapp-ping {
    0% { transform: scale(1); opacity: 0.45; }
    75%, 100% { transform: scale(1.7); opacity: 0; }
}

.whatsapp-btn__tooltip {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    padding: 0.55rem 0.95rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary-darker);
    color: var(--color-white);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast),
                visibility var(--transition-fast);
    pointer-events: none;
}

.whatsapp-btn__tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--color-primary-darker);
}

.whatsapp-btn:hover .whatsapp-btn__tooltip,
.whatsapp-btn:focus-visible .whatsapp-btn__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* --- Back to top -------------------------------------------------------- */

.back-to-top {
    right: clamp(1.1rem, 0.7rem + 1.2vw, 1.85rem);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.05rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -10px rgba(79, 98, 79, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-btn__ping {
        animation: none;
        opacity: 0.25;
    }
}

@media (max-width: 480px) {
    .whatsapp-btn,
    .back-to-top {
        width: 50px;
        height: 50px;
    }

    .whatsapp-btn {
        font-size: 1.45rem;
    }

    /* A hover tooltip serves no purpose on touch screens and risks
       clipping against the edge of small viewports. */
    .whatsapp-btn__tooltip {
        display: none;
    }
}

/* ==========================================================================
   15. Auth (login / forgot password)
   ========================================================================== */

.auth-body {
    background-color: var(--color-bg);
}

.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(1rem, 0.6rem + 2vw, 2.5rem);
}

.auth-shell {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    width: 100%;
    max-width: 1000px;
    min-height: 620px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
}

/* Wider variant for longer forms (e.g. the add-admin form) so paired
   fields have room to sit side by side instead of feeling cramped. */
.auth-shell--wide {
    max-width: 1120px;
}

/* --- Visual panel --------------------------------------------------- */

.auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    overflow: hidden;
    isolation: isolate;
}

.auth-visual-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-visual-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(44, 56, 44, 0.88) 0%, rgba(44, 56, 44, 0.94) 55%, rgba(44, 56, 44, 0.98) 100%);
}

.auth-visual-logo img {
    height: 34px;
    width: auto;
    filter: brightness(0) invert(1);
}

.auth-visual-text h2 {
    color: var(--color-white);
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
    line-height: 1.25;
}

.auth-visual-text p {
    margin-top: var(--space-sm);
    color: rgba(255, 255, 255, 0.72);
    max-width: 34ch;
}

.auth-visual-points {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: var(--space-xl);
}

.auth-visual-points li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.auth-visual-points i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    font-size: 0.65rem;
}

/* --- Form panel ------------------------------------------------------- */

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.auth-form-wrap {
    width: 100%;
    max-width: 360px;
}

.auth-form-wrap--wide {
    max-width: 460px;
}

.auth-mobile-logo {
    display: none;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    transition: color var(--transition-fast);
}

.auth-back-link:hover {
    color: var(--color-primary);
}

.auth-chip {
    margin-bottom: var(--space-md);
}

.auth-title {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem);
}

.auth-subtitle {
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: var(--space-lg);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.auth-alert i {
    margin-top: 0.15rem;
}

.auth-alert--success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.auth-alert-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.auth-form {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-darker);
    letter-spacing: 0.02em;
}

.field-hint {
    font-weight: var(--fw-regular);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-muted);
}

/* Hides content visually and from layout while keeping it technically
   present in the DOM — used for the contact form's spam honeypot field,
   which must stay invisible to people but still exist for bots to find. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.auth-link {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.auth-link:hover {
    color: var(--color-primary-darker);
    text-decoration: underline;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrap i:first-child {
    position: absolute;
    left: 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

/* A multi-line field needs its icon pinned to the top instead of vertically
   centered against the whole (tall) textarea. */
.input-wrap--textarea {
    align-items: flex-start;
}

.input-wrap--textarea i:first-child {
    top: 1rem;
    left: 1rem;
}

.input-wrap textarea {
    width: 100%;
    min-height: 140px;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                background-color var(--transition-fast);
}

.input-wrap textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.input-wrap textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px rgba(79, 98, 79, 0.12);
}

.input-wrap input,
.input-wrap select {
    width: 100%;
    /* Right padding reserves room for the optional .input-toggle button so
       typed text (e.g. a long password) never runs under it. */
    padding: 0.85rem 2.75rem 0.85rem 2.6rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                background-color var(--transition-fast);
}

.input-wrap input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.input-wrap input:focus,
.input-wrap select:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px rgba(79, 98, 79, 0.12);
}

.input-wrap select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    /* Custom chevron so the native arrow doesn't clash with the design —
       drawn inline so it needs no extra asset and recolors easily. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B6F6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.input-toggle {
    position: absolute;
    right: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.input-toggle:hover {
    color: var(--color-primary-darker);
    background-color: var(--color-primary-soft);
}

.auth-submit {
    margin-top: 0.25rem;
    padding-block: 1rem;
}

/* Confirmation screens (e.g. "check your email") have no form above the
   button, so the button needs its own top margin rather than the one
   .auth-form normally provides. */
.auth-subtitle + .auth-submit {
    margin-top: var(--space-xl);
}

.auth-footer-note {
    margin-top: var(--space-xl);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* A centred secondary action under the primary button — "back to sign in",
   "try another email" — one tap below the main CTA, not competing with it. */
.auth-footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: var(--space-lg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.auth-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-md);
    border-radius: 50%;
    background-color: var(--color-success-bg);
    color: var(--color-success);
    font-size: var(--fs-lg);
}

.auth-icon-badge--warn {
    background-color: var(--color-warn-bg);
    color: var(--color-warn);
}

@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 460px;
        min-height: 0;
    }

    .auth-shell--wide {
        max-width: 540px;
    }

    .auth-visual {
        display: none;
    }

    .auth-mobile-logo {
        display: inline-flex;
        margin-bottom: var(--space-lg);
    }

    .auth-mobile-logo img {
        height: 32px;
        width: auto;
    }

    .auth-form-panel {
        padding: clamp(1.75rem, 1.4rem + 2vw, 2.5rem);
    }

    .auth-form-wrap {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .auth {
        padding: 0;
    }

    .auth-shell {
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-form-panel {
        min-height: 100vh;
    }
}

/* ==========================================================================
   16. Modal
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.modal[hidden] {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(26, 26, 26, 0.55);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2.5rem);
    /* On phones the browser chrome makes 100vh taller than what's actually
       visible, which pushes the footer (and its Add to Cart button) below the
       fold. dvh tracks the real viewport; vh above stays as the fallback. */
    max-height: calc(100dvh - 2.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.modal.is-open .modal-backdrop {
    opacity: 1;
}

.modal.is-open .modal-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Modals whose contents are wrapped in a <form> (item options, cart edit).
   The form is a flex *item* of the panel but, left as a plain block, it is
   not a flex *container* — so .modal-body can never shrink, the body doesn't
   scroll, and a long ingredient list pushes the footer clean past the bottom
   of the panel where the Add to Cart button can't be reached. */
.modal-panel > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Fixed height rather than an aspect ratio, so every modal header image is
   the same size no matter how tall or wide the uploaded photo is. Capped
   against the viewport too, so a short screen (landscape phone) doesn't end
   up with an image that leaves no room for the details underneath. */
.modal-image {
    position: relative;
    height: min(240px, 32vh);
    flex-shrink: 0;
}

.modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No product photo on file: the brand mark sits centered on a tinted tile
   instead of being stretched/cropped edge-to-edge like a real product shot. */
.modal-image.is-placeholder {
    background-color: var(--color-bg-alt);
}

.modal-image.is-placeholder img {
    object-fit: contain;
    padding: 15% 30%;
    opacity: 0.7;
}

.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(26, 26, 26, 0.45);
    color: var(--color-white);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color var(--transition-fast);
}

.modal-close:hover {
    background-color: rgba(26, 26, 26, 0.7);
}

/* Variant for when the modal has no header image — the close button sits
   on the plain body background instead, so it needs its own contrast. */
.modal-close--plain {
    position: static;
    background-color: var(--color-bg-alt);
    color: var(--color-primary-darker);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modal-close--plain:hover {
    background-color: var(--color-primary-light);
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl) 0;
    flex-shrink: 0;
}

.modal-head h2 {
    font-size: var(--fs-h3);
}

.modal-head .chip {
    margin-bottom: var(--space-xs);
}

.modal-body {
    padding: var(--space-lg) var(--space-xl);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    /* A flex item won't shrink below its content height while min-height is
       `auto`, so without this the body pushes the footer (and its buttons)
       past the bottom of the panel instead of scrolling inside it. */
    min-height: 0;
}

.modal-foot {
    display: flex;
    gap: var(--space-sm);
    padding: 0 var(--space-xl) var(--space-xl);
    flex-shrink: 0;
}

.modal-foot .btn {
    flex: 1;
    flex-shrink: 0;
}

/* Read-only weekly schedule, used inside the branch details modal. */
.hours-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.hours-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.65rem var(--space-md);
    font-size: var(--fs-sm);
}

.hours-list li:nth-child(even) {
    background-color: var(--color-bg);
}

.hours-list li.is-today {
    background-color: var(--color-primary-soft);
    font-weight: var(--fw-semibold);
}

.hours-day {
    color: var(--color-text-muted);
}

.hours-list li.is-today .hours-day {
    color: var(--color-primary-darker);
}

.hours-value {
    color: var(--color-text);
}

.hours-value--closed {
    color: var(--color-text-muted);
}

/* ==========================================================================
   17. Contact page
   ========================================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
    align-items: start;
}

/* --- Info panel ----------------------------------------------------------- */

.contact-info {
    position: relative;
    padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    border-radius: var(--radius-xl);
    background-color: var(--color-primary);
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

.contact-info::before,
.contact-info::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
}

.contact-info::before {
    width: 260px;
    height: 260px;
    top: -120px;
    right: -70px;
}

.contact-info::after {
    width: 180px;
    height: 180px;
    bottom: -100px;
    left: -40px;
}

.contact-info h2 {
    color: var(--color-white);
    font-size: var(--fs-h3);
}

.contact-info > p {
    margin-top: var(--space-sm);
    color: rgba(255, 255, 255, 0.75);
    max-width: 34ch;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

/* Flex items default to min-width: auto (sized to their content), which
   silently defeats overflow-wrap and lets a long value like an email push
   past the panel's edge instead of wrapping — this opts back into normal
   shrink/wrap behavior. */
.contact-info-list li > div {
    min-width: 0;
    flex: 1;
}

.contact-info-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
    font-size: 0.95rem;
}

.contact-info-list strong {
    display: block;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.6);
    font-weight: var(--fw-medium);
}

.contact-info-list a,
.contact-info-list span {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    /* A long unbroken string like an email address won't naturally wrap
       and would otherwise overflow the panel on narrow screens. */
    overflow-wrap: break-word;
}

.contact-info-list a:hover {
    text-decoration: underline;
}

.contact-info .btn {
    margin-top: var(--space-xl);
    width: 100%;
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.contact-info .btn:hover {
    background-color: var(--color-white);
    color: var(--color-primary-darker);
}

/* --- Form panel ------------------------------------------------------------ */

.contact-form-panel {
    padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.contact-form-panel h2 {
    font-size: var(--fs-h3);
}

.contact-form-panel > p {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
}

.contact-form {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* ==========================================================================
   18. About page — story timeline
   ========================================================================== */

/* Inline text link inside prose — e.g. a branch name mentioned mid-sentence
   that should read as a real link, not shout like a button. */
.text-link {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-color: var(--color-primary-light);
    text-underline-offset: 2px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.text-link:hover {
    color: var(--color-primary-dark);
    text-decoration-color: currentColor;
}

.about-hero-image {
    max-width: 960px;
    margin: 0 auto clamp(2.5rem, 1.8rem + 3vw, 4rem);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-hero-image img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.timeline {
    position: relative;
    max-width: 720px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* The connecting line sits behind everything; each solid, opaque marker
   naturally covers the segment that passes through it, so no line is
   visible poking out from beneath a circle. */
.timeline::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 27px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary-light), var(--color-border));
}

.timeline-item {
    position: relative;
    display: flex;
    gap: var(--space-lg);
}

.timeline-marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-md);
}

.timeline-content {
    padding-top: 0.5rem;
}

.timeline-content h2 {
    font-size: var(--fs-h3);
    margin-bottom: 0.6rem;
}

.timeline-content p {
    color: var(--color-text-muted);
    line-height: 1.8;
}

/* ==========================================================================
   19. Menu page
   ========================================================================== */

/* Branch picker — shown when menu.php is opened without a branch id -------- */

.branch-picker-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    max-width: 520px;
    margin-inline: auto;
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.branch-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-lg);
}

.branch-picker-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    /* Without this the flex child refuses to shrink and the select overflows
       the card on narrow screens. */
    min-width: 0;
    flex: 1;
}

.branch-picker-body label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-darker);
    letter-spacing: 0.02em;
}

.branch-picker-hint {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.auth-alert--centered {
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

/* Branch switcher sitting in the menu's split heading --------------------- */

.menu-branch-switch {
    flex-shrink: 0;
    width: 260px;
}

/* Category tabs — a swipeable slider on mobile, a wrapped row on desktop -- */

.menu-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xs);
}

.menu-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}

.menu-tab:hover {
    border-color: var(--color-primary-light);
    background-color: var(--color-primary-soft);
}

.menu-tab.is-active {
    border-color: transparent;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.menu-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.menu-tab.is-active .menu-tab-count {
    background-color: rgba(255, 255, 255, 0.22);
    color: var(--color-white);
}

/* Category groups -------------------------------------------------------- */

.menu-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
}

.menu-category-section[hidden] {
    display: none;
}

.menu-category-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    font-size: var(--fs-h3);
    color: var(--color-primary-darker);
}

/* Trailing rule that fills whatever width the title text leaves over. */
.menu-category-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
}

/* Item cards ------------------------------------------------------------- */

.menu-item-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}

.menu-item-card {
    position: relative;
    display: flex;
    gap: var(--space-md);
    /* No padding: the image runs flush to the card's left edge and full
       height, which reads as a finished list row rather than a small
       thumbnail floating in whitespace. */
    min-height: 124px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.menu-item-card:hover,
.menu-item-card:focus-visible {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.menu-item-media {
    position: relative;
    flex-shrink: 0;
    width: 124px;
    /* Stretches to whatever height the card ends up being, so the image
       column never leaves a gap under itself. */
    align-self: stretch;
    background-color: var(--color-bg-alt);
}

/* Taken out of flow so a portrait photo can't stretch the card taller than
   its text needs — the card sets the height, the image fills it. */
.menu-item-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.menu-item-card:hover .menu-item-media img {
    transform: scale(1.07);
}

/* No product photo on file: the brand mark sits centered and static instead
   of filling/cropping the tile or zooming on hover like a real product shot. */
.menu-item-media.is-placeholder img {
    object-fit: contain;
    padding: 22%;
    opacity: 0.7;
}

.menu-item-card:hover .menu-item-media.is-placeholder img {
    transform: none;
}

.menu-item-body {
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
    /* Lets long names/descriptions wrap instead of forcing the card wider. */
    min-width: 0;
    flex: 1;
}

.menu-item-name {
    /* Leaves room for the details cue pinned to the card's top-right. */
    padding-right: 1.9rem;
    font-size: var(--fs-md);
    line-height: 1.35;
}

/* "This card opens details" cue. */
.menu-item-hint {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.menu-item-card:hover .menu-item-hint,
.menu-item-card:focus-visible .menu-item-hint {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.menu-item-desc {
    margin-top: 0.3rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
    /* Two lines max — keeps every card the same height in the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: auto;
    padding-top: var(--space-md);
}

.menu-item-price {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--color-primary-darker);
    letter-spacing: -0.02em;
}

.add-to-cart-btn:hover i {
    transform: none;
}

.add-to-cart-btn.is-added {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

/* Ingredients, inside the item detail modal ------------------------------ */

.ingredient-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.ingredient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-bg);
    font-size: var(--fs-sm);
    color: var(--color-text);
}

/* Non-default ingredients are paid add-ons, not part of the dish as served. */
.ingredient-chip--extra {
    border-style: dashed;
    border-color: var(--color-primary-light);
    background-color: var(--color-white);
    color: var(--color-text-muted);
}

.ingredient-chip-price {
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
}

/* ==========================================================================
   20. Item options & quantity stepper
   ========================================================================== */

.option-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* The whole row is the hit target — easier to tap than a bare checkbox. */
.option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.option-row:hover {
    border-color: var(--color-primary-light);
    background-color: var(--color-primary-soft);
}

/* Native box hidden, not removed — it stays focusable and keyboard-operable,
   and the styled square below mirrors its state. */
.option-row input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 7px;
    background-color: var(--color-white);
    color: transparent;
    font-size: 0.65rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
}

.option-row input[type="checkbox"]:checked ~ .option-check {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.option-row input[type="checkbox"]:focus-visible ~ .option-check {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* An extra whose ingredient has just been removed above — kept visible so the
   list doesn't jump around, but clearly out of play. */
.option-row--locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.option-row--locked:hover {
    border-color: var(--color-border);
    background-color: var(--color-white);
}

/* An ingredient the kitchen can't leave out: shown ticked, but not a control. */
.option-row--fixed {
    cursor: default;
    background-color: var(--color-bg);
}

.option-row--fixed:hover {
    border-color: var(--color-border);
    background-color: var(--color-bg);
}

.option-check--fixed {
    border-color: var(--color-primary-light);
    background-color: var(--color-primary-light);
    color: var(--color-white);
}

.option-name {
    flex: 1;
    min-width: 0;
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.option-hint {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.option-price {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
}

/* Quantity stepper ------------------------------------------------------- */

.qty-stepper {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    overflow: hidden;
}

.qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: transparent;
    color: var(--color-primary-darker);
    font-size: 0.7rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.qty-btn:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}

.qty-input {
    width: 42px;
    border: none;
    background: transparent;
    color: var(--color-primary-darker);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
    /* The spinners would sit on top of the −/+ buttons and confuse the control. */
    appearance: textfield;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.qty-input:focus {
    outline: none;
}

/* The item modal's footer holds the stepper next to the add button. */
.item-form .modal-foot {
    align-items: center;
    gap: var(--space-md);
}

.item-form .modal-foot .btn {
    flex: 1;
}

/* ==========================================================================
   21. Cart page
   ========================================================================== */

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
}

.cart-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.cart-line {
    display: flex;
    gap: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    overflow: hidden;
    transition: opacity var(--transition-base), transform var(--transition-base),
                box-shadow var(--transition-base);
}

.cart-line:hover {
    box-shadow: var(--shadow-md);
}

/* Brief fade-out before the row is pulled from the DOM. */
.cart-line.is-removing {
    opacity: 0;
    transform: translateX(-12px);
}

.cart-line-media {
    position: relative;
    flex-shrink: 0;
    width: 116px;
    align-self: stretch;
    background-color: var(--color-bg-alt);
}

.cart-line-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-line-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
}

.cart-line-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
}

.cart-line-name {
    font-size: var(--fs-md);
    line-height: 1.35;
}

.cart-line-price {
    margin-top: 0.15rem;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.cart-line-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cart-line-remove:hover {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Chosen modifications plus the control that changes them. */
.cart-line-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.cart-line-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* A quiet text button rather than a filled one — it sits beside the chips as
   a refinement, and shouldn't compete with "Proceed to Checkout". */
.cart-line-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.1rem 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.cart-line-edit:hover {
    color: var(--color-primary-darker);
}

.cart-line-edit i {
    font-size: 0.85em;
}

.mod-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}

.mod-chip i {
    font-size: 0.6em;
}

.mod-chip--out {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
}

.mod-chip--in {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.mod-chip-price {
    font-weight: var(--fw-semibold);
}

.cart-line-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: auto;
    padding-top: 0.2rem;
}

.cart-line-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.cart-line-total {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--color-primary-darker);
    letter-spacing: -0.02em;
}

.cart-lines-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

/* Summary ---------------------------------------------------------------- */

.cart-summary {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.cart-summary h2 {
    font-size: var(--fs-h3);
}

.summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    font-size: var(--fs-sm);
}

.summary-row dt {
    color: var(--color-text-muted);
}

.summary-row dd {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.summary-row--muted dd {
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
}

.summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-darker);
}

.summary-total strong {
    font-size: var(--fs-lg);
    letter-spacing: -0.02em;
}

.summary-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.summary-note i {
    margin-top: 0.2rem;
}

/* ==========================================================================
   22. Checkout & order confirmation
   ========================================================================== */

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.checkout-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

.checkout-card-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: var(--fs-h3);
    color: var(--color-primary-darker);
}

/* Numbered so the form reads as a short, finite sequence rather than one
   long wall of fields. */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

/* Radio cards ------------------------------------------------------------ */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm);
}

.choice-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.choice-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice-body {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    height: 100%;
    padding: var(--space-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: border-color var(--transition-fast), background-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.choice-card:hover .choice-body {
    border-color: var(--color-primary-light);
}

.choice-card input[type="radio"]:checked ~ .choice-body {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
    box-shadow: 0 0 0 3px rgba(79, 98, 79, 0.1);
}

.choice-card input[type="radio"]:focus-visible ~ .choice-body {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
    font-size: var(--fs-base);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.choice-card input[type="radio"]:checked ~ .choice-body .choice-icon {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.choice-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.choice-text strong {
    font-size: var(--fs-sm);
    color: var(--color-primary-darker);
}

.choice-text span {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* Shown instead of the address field when collecting in person. */
.pickup-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px dashed var(--color-primary-light);
    border-radius: var(--radius-md);
    background-color: var(--color-primary-soft);
}

.pickup-note[hidden] {
    display: none;
}

.pickup-note i {
    margin-top: 0.2rem;
    color: var(--color-primary);
}

.pickup-note div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pickup-note strong {
    font-size: var(--fs-sm);
    color: var(--color-primary-darker);
}

.pickup-note span {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* Compact read-only item list, shared by checkout and the confirmation. */
.review-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.review-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* No `overflow: hidden` here — the quantity badge deliberately overhangs the
   corner, and clipping the box would cut it in half. The image rounds itself
   instead. */
.review-thumb {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-sm);
}

.review-thumb img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

/* Quantity badge riding the corner of the thumbnail. */
.review-qty {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.3rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.65rem;
    font-weight: var(--fw-bold);
}

/* Confirmation page has no thumbnails, so the count sits inline instead. */
.review-qty--plain {
    position: static;
    flex-shrink: 0;
    min-width: 32px;
    background-color: transparent;
    color: var(--color-primary);
    font-size: var(--fs-sm);
}

.review-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.review-text strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.review-mods {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.review-price {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-darker);
}

.checkout-summary .btn + .btn {
    margin-top: calc(var(--space-sm) * -1);
}

/* Order confirmation ----------------------------------------------------- */

.order-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    max-width: 560px;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
    text-align: center;
}

.order-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-sm);
    border-radius: 50%;
    background-color: var(--color-success-bg);
    color: var(--color-success);
    font-size: var(--fs-lg);
}

.order-hero h1 {
    font-size: var(--fs-h2);
}

.order-hero p {
    color: var(--color-text-muted);
}

.order-ref {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-top: var(--space-sm);
    padding: 0.75rem 1.5rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
}

.order-ref span {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.order-ref strong {
    font-size: var(--fs-md);
    letter-spacing: 0.02em;
    color: var(--color-primary-darker);
}

.order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-md);
}

.order-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

.order-card h2 {
    font-size: var(--fs-h3);
}

.order-address {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    font-size: var(--fs-sm);
    line-height: 1.6;
    overflow-wrap: break-word;
}

.order-address-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.order-address-label i {
    color: var(--color-primary);
}

.order-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* ==========================================================================
   23. Toast
   ========================================================================== */

.toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-xl);
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(420px, calc(100vw - 2rem));
    padding: 0.85rem 1.35rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-darker);
    color: var(--color-white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translate(-50%, 14px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.toast[hidden] {
    display: none;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast--error {
    background-color: var(--color-danger);
}

/* ==========================================================================
   24. Responsive
   ========================================================================== */

/* --- Large tablet / small laptop ---------------------------------------- */
@media (max-width: 1080px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Connector only makes sense between columns 1-2 and 3-4 */
    .step-card:nth-child(2)::after {
        display: none;
    }
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 900px) {
    .dishes-grid,
    .branches-grid,
    .menu-item-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-bar-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg) var(--space-md);
    }

    .feature-item:nth-child(2n) {
        border-right: none;
    }

    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Summary drops below the lines and stops sticking — on a short viewport
       a sticky panel would eat most of the screen. */
    .cart-layout,
    .checkout-layout,
    .order-grid {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }
}

/* --- Mobile navigation breakpoint ---------------------------------------- */
@media (max-width: 860px) {
    :root {
        --header-height: 68px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-overlay {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-nav);
        width: min(310px, 84vw);
        padding: calc(var(--header-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
        background-color: var(--color-white);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--transition-base);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .main-nav.is-open {
        transform: translateX(0);
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-list li + li {
        border-top: 1px solid var(--color-border);
    }

    .nav-link {
        display: block;
        padding-block: var(--space-md);
        font-size: var(--fs-base);
    }

    .nav-link::after {
        display: none;
    }

    .nav-link.active {
        color: var(--color-primary);
        font-weight: var(--fw-semibold);
    }

    /* Hero stacks, image leads */
    .hero {
        text-align: center;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-media {
        order: -1;
        width: min(340px, 78vw);
        margin-inline: auto;
        padding: var(--space-md);
    }

    .hero-badge {
        margin-inline: auto;
    }

    .hero-text {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-facts {
        justify-content: center;
    }

    .hero-facts {
        gap: var(--space-lg) var(--space-xl);
        text-align: center;
    }

    .hero-tag {
        right: auto;
        left: 50%;
        bottom: -0.5rem;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    /* Split headings stack and centre */
    .section-heading--split {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .section-heading--split > div {
        max-width: 52ch;
    }

    /* Category row becomes a swipeable scroller */
    .category-scroller {
        display: flex;
        /* Undoes the centred wrapping row used on wider screens — here the
           cards stay on one line and the row scrolls instead. */
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--space-md);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Bleed to the screen edge so the row reads as scrollable */
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
        padding-bottom: var(--space-xs);
    }

    .category-scroller::-webkit-scrollbar {
        display: none;
    }

    .category-scroller li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .category-card {
        width: 118px;
    }

    /* Steps: no connector when stacked in 2 columns of cards */
    .step-card::after {
        display: none;
    }

    .cta-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-inner {
        text-align: center;
    }

    .footer-brand p {
        margin-inline: auto;
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-contact li {
        justify-content: center;
    }

    .footer-col a:hover {
        transform: none;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-copy {
        justify-content: center;
    }

    .modal-panel {
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
    }

    /* A phone has far less height to spare, so the photo gives some of it
       back to the details and the options below it. */
    .modal-image {
        height: min(180px, 24vh);
    }

    .modal-head,
    .modal-body,
    .modal-foot {
        padding-inline: var(--space-lg);
    }

    .hours-list li {
        font-size: var(--fs-xs);
    }

    /* The branch is already chosen at this point (and stays switchable from
       the Branches page), so on phones the switcher is dropped entirely
       rather than spending scarce vertical space above the menu. */
    .menu-branch-switch {
        display: none;
    }

    /* Category tabs become a swipeable slider instead of wrapping to
       several rows — same bleed-to-the-edge treatment as the homepage
       category scroller, so the row visibly reads as scrollable. */
    .menu-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
    }

    .menu-tabs::-webkit-scrollbar {
        display: none;
    }

    .menu-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/* --- Small mobile -------------------------------------------------------- */
@media (max-width: 620px) {
    .feature-bar-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .feature-item {
        border-right: none;
        padding-block: 0.85rem;
        padding-inline: 0;
    }

    .feature-item + .feature-item {
        border-top: 1px solid var(--color-border);
    }

    .dishes-grid,
    .branches-grid,
    .steps-grid,
    .menu-item-list {
        grid-template-columns: 1fr;
    }

    /* One card per row on phones — the image-left layout the card already
       uses now reads as a compact list row rather than a tall tile. */
    .menu-item-card {
        min-height: 108px;
    }

    .menu-item-media {
        width: 104px;
    }

    .menu-item-desc {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .branch-picker-card {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        padding: var(--space-lg);
    }

    .branch-picker-icon {
        align-self: flex-start;
    }

    /* Cart lines on a phone.
       The desktop card runs its photo full-bleed down the left edge, which
       works when the card is wide and short. Stacked on a narrow screen the
       same card grows tall and that strip of photo dominates the row, so here
       the image becomes a fixed square thumbnail pinned to the top and the
       text column gets the space instead. */
    .cart-line {
        align-items: flex-start;
        gap: var(--space-md);
        padding: var(--space-md);
    }

    .cart-line-media {
        width: 76px;
        height: 76px;
        align-self: flex-start;
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .cart-line-body {
        gap: 0.5rem;
        padding: 0;
    }

    /* Just the stepper and the total now, so the row has room to breathe even
       on a 360px screen and the prices line up down the right edge. */
    .cart-line-foot {
        flex-wrap: nowrap;
        gap: var(--space-sm);
    }

    .cart-line-foot .qty-btn {
        width: 34px;
        height: 34px;
    }

    .cart-line-foot .qty-input {
        width: 36px;
    }

    .cart-lines-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .cart-lines-foot .btn,
    .cart-lines-foot form {
        width: 100%;
    }

    .cart-lines-foot .btn {
        justify-content: center;
    }

    /* Stepper and add button stack so neither gets squashed. */
    .item-form .modal-foot {
        flex-wrap: wrap;
    }

    .item-form .modal-foot .qty-stepper {
        width: 100%;
        justify-content: space-between;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .cta-actions {
        width: 100%;
    }

    .cta-actions .btn {
        flex: 1;
    }

    .timeline-marker {
        width: 46px;
        height: 46px;
        font-size: 0.65rem;
    }

    .timeline::before {
        left: 22px;
    }

    .timeline-item {
        gap: var(--space-md);
    }
}

@media (max-width: 420px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-facts {
        gap: var(--space-md) var(--space-lg);
    }

    .branch-actions {
        flex-direction: column;
    }
}