/* Classic storefront theme — design system carried over from the Allo-Kebab storefront (layouts/shop.blade.php). */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
        .btn:active, .cat-tab:active, .product-card__add:active, .cart-btn:active { transform: scale(.97); }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
        }

        :root {
            /* ─── Master design system ─────────────────── */
            --color-bg:                #F7F5F2;
            --color-surface:           #FFFFFF;
            --color-surface-secondary: #F2EFEA;
            --color-text-primary:      #172033;
            --color-text-secondary:    #667085;
            --color-text-muted:        #98A2B3;

            --color-primary:       #F26A00;
            --color-primary-hover: #D95F00;
            --color-primary-active:#C65300;
            --color-primary-soft:  #FFF3E8;

            --color-border:        #E7E2DC;
            --color-border-strong: #D8D2CB;

            --color-success:    #15803D;
            --color-success-bg: #F0FDF4;
            --color-warning:    #B45309;
            --color-warning-bg: #FFFBEB;
            --color-error:      #B42318;
            --color-error-bg:   #FEF3F2;
            --color-info:       #175CD3;
            --color-info-bg:    #EFF8FF;

            --footer-bg:    #111827;
            --footer-text:  #F9FAFB;
            --footer-muted: #98A2B3;
            --color-navy:   #1B4D73;

            /* ─── "BonTable" mobile menu redesign tokens ─────────────
               Scoped to the new mobile menu/category-rail/bottom-nav
               components introduced for that redesign — intentionally
               separate from --color-primary etc. above (kept untouched
               for the rest of the site) since the spec calls for these
               exact values. */
            --bt-orange:        #FF6B00;
            --bt-orange-dark:   #E85D00;
            --bt-navy:          #102A43;
            --bt-blue:          #1686D9;
            --bt-text-secondary:#718096;
            --bt-text-muted:    #9AA6B2;
            --bt-bg:            #FAF8F5;
            --bt-surface:       #FFFFFF;
            --bt-border:        #E7E3DE;
            --bt-border-strong: #D7D1C9;
            --bt-success:       #2F9E64;
            --bt-error:         #D64545;

            --radius-sm:   6px;
            --radius-md:   10px;
            --radius-lg:   14px;
            --radius-xl:   18px;
            --radius-pill: 999px;

            --shadow-card:     0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
            --shadow-elevated: 0 8px 24px rgba(16,24,40,.08);
            --shadow-hover:    0 10px 30px rgba(16,24,40,.10);

            /* Legacy variable names — aliased to the tokens above so every
               existing page (checkout, product, tracking, account, auth…)
               inherits the new system without needing an individual rewrite
               yet; each gets restyled properly as its own prompt comes in. */
            --red:       var(--color-primary);
            --red-dark:  var(--color-primary-hover);
            --dark:      var(--footer-bg);
            --blue:      var(--color-info);
            --card:      var(--color-surface);
            --border:    var(--color-border);
            --bg:        var(--color-bg);
            --text:      var(--color-text-primary);
            --muted:     var(--color-text-secondary);
            --white:     #ffffff;
            --radius:    var(--radius-lg);
            --shadow:    var(--shadow-card);
            --shadow-lg: var(--shadow-elevated);
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--color-bg);
            color: var(--color-text-primary);
            font-size: 14px;
            line-height: 1.57;
            min-height: 100vh;
        }

        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; }
        button { cursor: pointer; border: none; background: none; font-family: inherit; }

        /* ─── Typography scale ───────────────────────── */
        h1, h2, h3, h4 { color: var(--color-text-primary); }
        h1 { font-size: 36px; line-height: 44px; font-weight: 700; }
        h2 { font-size: 28px; line-height: 36px; font-weight: 700; }
        h3 { font-size: 22px; line-height: 30px; font-weight: 600; }
        h4 { font-size: 18px; line-height: 26px; font-weight: 600; }
        .text-display  { font-size: 48px; line-height: 56px; font-weight: 700; color: var(--color-text-primary); }
        .text-body-lg  { font-size: 16px; line-height: 26px; font-weight: 400; }
        .text-body     { font-size: 14px; line-height: 22px; font-weight: 400; }
        .text-body-sm  { font-size: 13px; line-height: 20px; font-weight: 400; }
        .text-caption  { font-size: 12px; line-height: 18px; font-weight: 500; }
        .text-eyebrow  { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); }
        @media (max-width: 768px) {
            .text-display, h1 { font-size: 30px; line-height: 38px; }
            h2 { font-size: 24px; line-height: 32px; }
            h3 { font-size: 20px; line-height: 28px; }
        }

        /* ─── Form input (master) ────────────────────── */
        .form-label {
            display: block; font-size: 13px; font-weight: 600; color: #344054; margin-bottom: 8px;
        }
        .form-input {
            display: block; width: 100%; height: 50px; padding: 0 16px;
            background: #ffffff; border: 1.5px solid var(--color-border-strong);
            border-radius: var(--radius-md); font-size: 16px; font-family: inherit; color: var(--color-text-primary);
            box-shadow: var(--shadow-card);
            transition: border-color .15s, box-shadow .15s;
        }
        .form-input::placeholder { color: var(--color-text-muted); }
        .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(242,106,0,.12); }
        .form-input.has-error { border-color: var(--color-error); }

        /* ─── Navbar ─────────────────────────────────── */
        .navbar {
            position: sticky; top: 0; z-index: 100;
            background: var(--color-surface);
            border-bottom: 1px solid #ECE8E3;
            height: 72px;
        }
        .navbar-inner {
            max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px;
            display: flex; align-items: center; justify-content: space-between; gap: 24px;
        }
        .navbar-logo {
            display: flex; align-items: center; gap: 10px;
        }
        .navbar-logo-icon {
            width: 40px; height: 40px; background: var(--red); border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; flex-shrink: 0;
        }
        .navbar-brand {
            font-size: 20px; font-weight: 900; color: var(--blue); letter-spacing: .5px;
        }
        .navbar-brand span { color: var(--red); }
        .navbar-nav {
            display: flex; gap: 32px; list-style: none; align-items: center;
        }
        .navbar-nav a {
            padding: 8px 0; border-radius: 8px;
            font-size: 14px; font-weight: 600; color: var(--color-text-primary);
            transition: all .2s;
        }
        .navbar-nav a:hover { color: var(--color-primary); }
        .navbar-nav a.active { color: var(--color-primary); }
        .cart-btn {
            background: var(--color-primary); color: #ffffff;
            border-radius: var(--radius-md); height: 44px; padding: 0 18px;
            font-size: 14px; font-weight: 700;
            display: flex; align-items: center; gap: 8px;
            transition: background .2s;
        }
        .cart-btn:hover { background: var(--color-primary-hover); }
        .cart-count {
            background: #ffffff; color: var(--color-primary);
            border-radius: 50%; width: 20px; height: 20px;
            font-size: 11px; font-weight: 800;
            display: flex; align-items: center; justify-content: center;
        }
        .hamburger-btn {
            display: none; flex-direction: column; gap: 5px;
            padding: 8px; color: var(--color-text-primary);
        }
        .hamburger-btn span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
        .mobile-menu {
            display: none;
            position: fixed; inset: 72px 0 0 0; z-index: 99;
            background: var(--color-bg); padding: 20px;
            flex-direction: column; gap: 4px;
            overflow-y: auto;
        }
        .mobile-menu.open { display: flex; }
        .mobile-menu a {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 12px; border-radius: 10px;
            font-size: 16px; font-weight: 600; color: var(--color-text-primary);
            border-bottom: 1px solid var(--color-border);
        }
        /* Otherwise the last link's own border-bottom sits ~10px above the
           language switcher's border-top — two near-parallel lines that read
           as a rendering glitch rather than one clean section break. Direct-
           child combinator only — the language pills are nested one level
           deeper (.mobile-menu__lang a) and must keep their own full border. */
        .mobile-menu > a:last-of-type { border-bottom: none; }
        .mobile-menu a svg { flex-shrink: 0; color: var(--color-text-secondary); }
        .mobile-menu a.active { color: var(--color-primary); }
        .mobile-menu a.active svg { color: var(--color-primary); }
        .mobile-menu__lang {
            display: flex; gap: 10px; margin-top: 10px; padding-top: 16px;
            border-top: 1px solid var(--color-border);
        }
        .mobile-menu__lang a {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px; border-radius: var(--radius-pill);
            border: 1.5px solid var(--color-border); background: var(--color-surface);
            font-size: 14px; font-weight: 600; color: var(--color-text-primary);
        }
        .mobile-menu__lang a.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
        .navbar-actions { display: flex; align-items: center; gap: 8px; }
        .search-btn, .user-btn {
            width: 40px; height: 40px; border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center;
            color: var(--color-text-primary); transition: background .15s;
        }
        .search-btn:hover, .user-btn:hover { background: var(--color-surface-secondary); }

        /* ─── Search dropdown ────────────────────────── */
        .search-dropdown-wrap { position: relative; }
        .search-dropdown {
            display: none; position: absolute; top: calc(100% + 10px); right: 0;
            width: 360px; max-width: calc(100vw - 32px);
            background: #ffffff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.16);
            border: 1px solid var(--border); overflow: hidden; z-index: 200;
        }
        .search-dropdown.open { display: block; }
        .search-dropdown__row { padding: 12px; border-bottom: 1px solid var(--border); }
        .search-dropdown__input {
            width: 100%; padding: 10px 14px; border-radius: 10px;
            border: 1.5px solid var(--border); font-size: 14px; font-family: inherit; outline: none;
            transition: border-color .2s;
        }
        .search-dropdown__input:focus { border-color: var(--red); }
        .search-dropdown__results { max-height: 360px; overflow-y: auto; }
        .search-dropdown__hint, .search-dropdown__empty { padding: 18px 16px; text-align: center; color: var(--muted); font-size: 13px; }
        .search-dropdown__section-title {
            padding: 10px 16px 4px; font-size: 11px; font-weight: 800; text-transform: uppercase;
            letter-spacing: .05em; color: #aaaaaa;
        }
        .search-dropdown__item {
            display: flex; align-items: center; gap: 10px; padding: 9px 16px;
            font-size: 14px; color: var(--text); transition: background .15s;
        }
        .search-dropdown__item:hover { background: #f8f8f8; }
        .search-dropdown__item-img {
            width: 34px; height: 34px; border-radius: 8px; background: #f0f0f0; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 16px; overflow: hidden;
        }
        .search-dropdown__item-img img { width: 100%; height: 100%; object-fit: cover; }
        .search-dropdown__item-price { margin-left: auto; color: var(--muted); font-size: 12px; flex-shrink: 0; }


        /* ─── Cart item (shared: checkout page, /panier page) ────── */
        .cart-item {
            display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start;
            padding: 16px 0; border-bottom: 1px solid #ECE8E3;
        }
        .cart-item:last-child { border-bottom: none; }
        .cart-item__name { font-weight: 600; font-size: 16px; color: var(--color-text-primary); margin-bottom: 3px; }
        .cart-item__detail { font-size: 13px; color: var(--color-text-secondary); }
        .cart-item__ingredients { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 2px; }
        .cart-item__price { font-weight: 700; font-size: 16px; color: var(--color-primary); white-space: nowrap; }
        .cart-item__remove {
            width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
            font-size: 18px; cursor: pointer; color: var(--color-text-secondary);
            background: none; border: none; border-radius: var(--radius-md); transition: background .15s, color .15s;
        }
        .cart-item__remove:hover { color: var(--color-error); background: var(--color-error-bg); }
        .cart-item__qty {
            display: flex; align-items: center; gap: 0; margin-top: 10px;
            border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; width: fit-content;
        }
        .cart-item__qty button {
            width: 40px; height: 40px; font-size: 16px; font-weight: 700;
            background: var(--color-surface-secondary); color: var(--color-text-primary); border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .cart-item__qty button:hover { background: var(--color-border); }
        .cart-item__qty span { width: 36px; text-align: center; font-size: 14px; font-weight: 700; }
        .empty-cart { text-align: center; padding: 52px 0; }
        .cart-btn-mobile {
            display: none; position: relative;
            color: var(--color-text-primary); font-size: 22px; line-height: 1; padding: 6px;
        }
        .cart-btn-mobile .cart-count {
            position: absolute; top: -4px; right: -6px;
        }

        /* ─── Bottom tab bar (mobile only) — empty-cart state ──────────
           Floating rounded pill, icon-only, elevated center cart FAB.
           Swaps for the orange cart-filled bar (below) once Cart has
           items — see updateMiniCartBar(). */
        .bottom-nav {
            display: none;
            position: fixed; left: 16px; right: 16px; bottom: 12px; z-index: 50;
            background: var(--bt-surface); border-top: none;
            border-radius: 24px;
            box-shadow: 0 8px 28px rgba(16,42,67,.14);
            padding: 0 20px calc(env(safe-area-inset-bottom));
            height: 76px;
        }
        .bottom-nav__item {
            flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
            position: relative; height: 64px;
            min-width: 44px; min-height: 44px;
            padding: 4px; border: none; background: none; cursor: pointer;
            color: var(--bt-navy); font-family: inherit;
        }
        .bottom-nav__item svg { width: 22px; height: 22px; }
        .bottom-nav__item.active { color: var(--bt-orange); }
        .bottom-nav__item:focus-visible { outline: 2px solid var(--bt-orange); outline-offset: 2px; border-radius: 8px; }
        .bottom-nav__cart-wrap { position: relative; }
        /* Center cart FAB — elevated circular button overlapping the top
           of the bar. Only ever shown in the empty-cart state (see spec:
           no badge here — a non-empty cart swaps the whole bar instead). */
        .bottom-nav__item--fab {
            position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
            width: 60px; height: 60px; border-radius: 50%;
            background: var(--bt-orange); border: 3px solid #ffffff;
            /* The white "cutout" ring (so the button reads as punching through
               the bar rather than merging into it) still needs SOME shadow to
               sit believably above the page — but a big colored blur (first
               try) or even a tight colored one (second try) both still read
               as a halo/glow against busy food photos behind it. A slim,
               fully neutral shadow gives it a flush, deliberate edge instead
               (kullanıcı isteğiyle, 2026-09-20 — "hâlâ leş gibi duruyor"). */
            box-shadow: 0 2px 5px rgba(0,0,0,.18);
            display: flex; align-items: center; justify-content: center;
            color: #ffffff;
        }
        .bottom-nav__item--fab svg { width: 25px; height: 25px; }
        .bottom-nav__item--fab.active { color: #ffffff; }

        /* ─── Cart-filled bottom bar (mobile only) — replaces the empty-cart
           .bottom-nav entirely while Cart has items (browsing pages only,
           not checkout/product which have their own bottom action bar). ── */
        .mini-cart-bar {
            display: none;
            position: fixed; left: 16px; right: 16px; z-index: 50;
            bottom: 12px;
            height: 56px; border-radius: 16px;
            background: var(--bt-orange); color: #ffffff;
            align-items: center; gap: 12px;
            padding: 0 16px;
            cursor: pointer; border: none; width: auto; text-align: left;
            font-family: inherit;
            padding-bottom: env(safe-area-inset-bottom);
        }
        .mini-cart-bar.show { display: flex; }
        .mini-cart-bar__info { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700; flex: 1; }
        .mini-cart-bar__icon { flex-shrink: 0; display: flex; }
        .mini-cart-bar__badge {
            flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
            background: #ffffff; color: var(--bt-orange); font-size: 12px; font-weight: 800;
            display: flex; align-items: center; justify-content: center;
        }
        .mini-cart-bar__sep { flex-shrink: 0; width: 1px; align-self: stretch; margin: 10px 0; background: rgba(255,255,255,.45); }
        .mini-cart-bar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .mini-cart-bar__cta { flex-shrink: 0; display: flex; align-items: center; }
        .mini-cart-bar__cta svg { width: 22px; height: 22px; }
        @media (min-width: 769px) {
            .mini-cart-bar { display: none !important; }
            /* Menu/category pages only: same bar reused on desktop, where
               there's no bottom-nav to sit above, so it docks to the very
               bottom instead of leaving a gap under it. */
            body.has-desktop-cart-bar .mini-cart-bar.show { display: flex !important; bottom: 0; left: auto; right: 24px; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
        }
        /* Very narrow screens (long DE strings especially): tighten the
           padding/gap so the info text (count + total) keeps its room —
           the bar is still fully tappable either way. */
        @media (max-width: 380px) {
            .mini-cart-bar { padding: 0 14px; gap: 8px; }
        }

        /* ─── Account (mon compte) ───────────────────── */
        .account-page { max-width: 720px; margin: 0 auto; padding: 32px 20px 48px; }
        .account-h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 0; }
        .account-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
        @media (max-width: 768px) {
            .account-h1 { font-size: 24px; line-height: 30px; }
        }
        .account-points-badge {
            display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
            background: var(--color-primary-soft); color: var(--color-primary);
            font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
        }
        .account-points-badge svg { flex-shrink: 0; }
        @media (max-width: 380px) {
            .account-points-badge { font-size: 12px; padding: 5px 10px; }
        }
        .account-page-desc { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 24px; }
        .account-back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 20px; }
        .account-back-link:hover { color: var(--color-text-primary); }
        .account-alert { padding: 12px 16px; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; margin-bottom: 20px; }
        .account-alert--success { background: var(--color-success-bg); color: var(--color-success); }

        .profile-summary-row { display: flex; align-items: center; gap: 12px; min-height: 64px; }
        .profile-summary-row__avatar {
            width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: #fff;
            display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0;
        }
        .profile-summary-row__body { flex: 1; min-width: 0; }
        .profile-summary-row__name { font-size: 16px; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-summary-row__email { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-summary-row .icon-chevron { color: var(--color-text-muted); flex-shrink: 0; }

        .account-warning {
            margin-top: 20px; background: var(--color-warning-bg); border: 1px solid rgba(180,83,9,.25);
            border-radius: var(--radius-md); padding: 14px; display: flex; gap: 10px; align-items: flex-start;
        }
        .account-warning svg { color: var(--color-warning); flex-shrink: 0; margin-top: 1px; }
        .account-warning__text { font-size: 14px; color: var(--color-warning); flex: 1; }
        .account-warning__cta { font-size: 13px; font-weight: 700; color: var(--color-warning); text-decoration: underline; white-space: nowrap; }

        .loyalty-card { margin-top: 24px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
        .loyalty-card__icon { color: var(--color-primary); flex-shrink: 0; }
        .loyalty-card__label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
        .loyalty-card__points { font-size: 28px; font-weight: 700; color: var(--color-primary); margin: 4px 0; }
        .loyalty-card__note { font-size: 13px; color: var(--color-success); }
        .loyalty-card__tier { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
        /* Compact variant — dashboard summary only: icon+label+points centered
           as one tight row, no supporting note/tier line underneath. */
        .loyalty-card--compact { padding: 14px 18px; }
        .loyalty-card--compact .loyalty-card__row { display: flex; align-items: center; justify-content: center; gap: 10px; }
        .loyalty-card--compact .loyalty-card__label { margin-bottom: 1px; }
        .loyalty-card--compact .loyalty-card__points { font-size: 22px; margin: 0; }

        .account-section-heading { font-size: 20px; font-weight: 700; margin: 32px 0 16px; }

        .account-menu { margin-top: 28px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
        .account-menu-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; border-bottom: 1px solid #ECE8E3; color: inherit; transition: background .15s; }
        .account-menu-row:last-child { border-bottom: none; }
        .account-menu-row:hover { background: var(--color-surface-secondary); }
        .account-menu-row--static:hover { background: none; }
        .account-menu-row__icon { color: var(--color-primary); flex-shrink: 0; display: flex; }
        .account-menu-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .account-menu-row__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
        .account-menu-row__subtitle { font-size: 13px; color: var(--color-text-secondary); margin-top: 1px; }
        .account-menu-row > svg:last-child { color: var(--color-text-muted); flex-shrink: 0; }

        .account-logout-btn {
            margin-top: 32px; width: 100%; height: 48px; background: #fff; border: 1px solid var(--color-border);
            color: var(--color-error); border-radius: var(--radius-md); display: flex; align-items: center;
            justify-content: center; gap: 8px; font-weight: 600; font-size: 14px;
        }

        /* Order card */
        .order-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
        .order-card__header { padding: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
        .order-card__ref { font-size: 16px; font-weight: 700; }
        .order-card__date { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
        .order-card__content { border-top: 1px solid #ECE8E3; padding: 16px; }
        .order-card__item { font-size: 14px; font-weight: 500; padding: 3px 0; }
        .order-card__item-size { color: var(--color-text-secondary); font-weight: 400; }
        .order-card__total { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 16px; font-size: 14px; color: var(--color-text-secondary); }
        .order-card__total-amount { font-size: 20px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; }
        .order-card__actions { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
        .order-card__actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .order-card__btn-secondary {
            height: 44px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #fff;
            color: #344054; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center;
        }

        .badge-status { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
        .bs-warning  { background: var(--color-warning-bg); color: var(--color-warning); }
        .bs-info     { background: var(--color-info-bg); color: var(--color-info); }
        .bs-success  { background: var(--color-success-bg); color: var(--color-success); }
        .bs-danger   { background: var(--color-error-bg); color: var(--color-error); }
        .bs-primary  { background: #ede9fe; color: #7c3aed; }
        .bs-secondary{ background: var(--color-surface-secondary); color: var(--color-text-secondary); }

        .account-empty { text-align: center; padding: 56px 16px; }
        .account-empty svg { color: var(--color-text-muted); margin-bottom: 12px; }
        .account-empty__title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
        .account-empty__body { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 20px; }

        .account-email-static { background: #F2F4F7; border: 1px solid #EAECF0; border-radius: var(--radius-md); padding: 14px; font-size: 15px; color: #475467; }
        .account-email-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }

        .address-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; margin-top: 16px; }
        .address-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
        .address-card__label { font-size: 16px; font-weight: 600; }
        .address-card__badge { background: var(--color-primary-soft); color: var(--color-primary); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); }
        .address-card__text { margin-top: 10px; font-size: 14px; line-height: 22px; color: #475467; }
        .address-card__zone { margin-top: 8px; font-size: 13px; font-weight: 600; }
        .address-card__actions { margin-top: 16px; display: flex; gap: 18px; flex-wrap: wrap; }
        .address-card__action { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }
        .address-card__action--danger { color: var(--color-error); }
        .address-add-btn {
            margin-top: 24px; width: 100%; height: 48px; background: #fff; border: 1px solid var(--color-primary);
            color: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center;
            justify-content: center; gap: 8px; font-weight: 600; font-size: 14px;
        }
        .address-form-panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-top: 16px; }
        .address-form-panel__title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }

        /* ─── Category tabs (sticky + scrollspy) ─────── */
        .cat-tabs-sticky {
            position: sticky; top: 72px; z-index: 90;
            background: rgba(247,245,242,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--border);
        }
        .cat-tabs-row {
            display: flex; gap: 8px; flex-wrap: nowrap;
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            padding: 14px 0; scrollbar-width: none;
        }
        .cat-tabs-row::-webkit-scrollbar { display: none; }
        .cat-tab {
            display: inline-flex; align-items: center; flex-shrink: 0;
            height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
            font-size: 14px; font-weight: 600;
            background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary);
            transition: all .2s;
        }
        .cat-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
        .cat-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; }

        /* Category rail — avatar + label redesign. Shared by shop/menu.blade.php
           (scrollspy) and shop/category.blade.php (server-computed active tab). */
        .cat-tabs-row { gap: 16px !important; padding: 14px 0 4px !important; }
        .cat-tab {
            display: flex !important; flex-direction: column !important; align-items: center !important;
            width: 72px !important; height: auto !important; min-height: 88px;
            padding: 0 !important; border: none !important; background: none !important;
            border-radius: 0 !important; text-align: center; flex-shrink: 0;
        }
        .cat-tab:hover { border: none; color: inherit; }
        .cat-tab__avatar {
            width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
            box-sizing: border-box; /* any ring below stays WITHIN 64px — never grows the box,
                                        so the first item in the row can never get clipped by
                                        the rail's overflow-x:auto on its left edge */
            display: flex; align-items: center; justify-content: center;
            background: var(--bt-bg); box-shadow: 0 0 0 1px var(--bt-border) inset;
        }
        .cat-tab__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .cat-tab__avatar-placeholder { font-size: 24px; color: var(--bt-text-muted); }
        /* Active ring drawn as an OUTSET box-shadow (4px page-colored gap +
           3px orange ring) instead of a real border+padding — a real border
           would grow the element beyond its 64px slot and get clipped when
           it's the first (leftmost) item in the scrollable rail. */
        .cat-tab.active .cat-tab__avatar { box-shadow: 0 0 0 4px var(--bt-bg), 0 0 0 7px var(--bt-orange); }
        .cat-tab__label {
            margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 18px;
            color: var(--bt-navy);
        }
        .cat-tab.active { background: none !important; }
        .cat-tab.active .cat-tab__label { color: var(--bt-orange); }
        @media (max-width: 374px) {
            .cat-tab { width: 68px !important; }
        }
        /* Web view: rail spans the FULL logo-to-cart width on BOTH the
           all-categories page and a single-category page — they share this
           exact markup/class, so the fix lives here once. `justify-content:
           center` (tried previously) kept a fixed 28px gap but left ~110px
           of empty space on each side unused instead of reaching the edges —
           space-between puts the first/last avatar flush with the row's own
           edges (which already match the header's logo/cart span) and lets
           the gap grow to fill whatever room is left.
           padding-left/right here MUST carry !important — the base rule
           above (line ~593) sets `padding: 14px 0 4px !important` (shorthand,
           so left/right = 0 !important too); a non-!important override here
           would silently lose to it, leaving zero edge clearance and letting
           the active ring's box-shadow (7px outset) get clipped by the row's
           own overflow-x:auto edge — exactly what happened before this fix.
           8px clears the 7px ring with a hair of margin to spare. Tabs are
           also a touch wider here (72px → 80px) than the shared base width,
           which — purely as a side effect of space-between's math — pulls
           the auto-computed gap between avatars down from ~48px to ~37px
           (kullanıcı isteğiyle, "aralığı biraz daraltalım"). */
        @media (min-width: 768px) {
            .cat-tabs-row { justify-content: space-between; padding-left: 8px !important; padding-right: 8px !important; }
            .cat-tab { width: 80px !important; }
        }

        /* ─── "BonTable" product list — featured card + rows ───────────
           Shared by shop/menu.blade.php (all categories) and
           shop/category.blade.php (one category) so both pages render
           byte-identical product lists — the fix for any future drift
           between them lives here, once. */
        /* .container.menu-main (not just .menu-main) — needs to out-specificity
           the base .container's shorthand `padding: 0 24px` rule below, which
           would otherwise win this cascade tie (equal specificity, declared
           later in source order) and silently zero out padding-top/bottom. */
        .container.menu-main { padding-top: 36px; padding-bottom: 80px; }
        .menu-cat-section { margin-bottom: 56px; scroll-margin-top: 144px; }
        .menu-cat-section:last-child { margin-bottom: 0; }
        @media (max-width: 768px) {
            .container.menu-main { padding-bottom: 64px; }
            .menu-cat-section { margin-bottom: 40px; }
        }

        .bt-cat-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
        .bt-cat-heading__title { font-size: 28px; font-weight: 700; line-height: 34px; color: var(--bt-navy); margin: 0; }
        .bt-cat-heading__count { font-size: 14px; font-weight: 500; color: var(--bt-text-secondary); white-space: nowrap; }

        /* Featured product */
        .bt-featured {
            display: block; width: 100%; margin-top: 12px;
            background: var(--bt-surface); border: 1px solid var(--bt-border);
            border-radius: 16px; overflow: hidden;
        }
        .bt-featured__img {
            width: 100%; height: 190px; overflow: hidden;
            background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 37%, #f0f0f0 63%);
            background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite;
            display: flex; align-items: center; justify-content: center;
        }
        .bt-featured__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
        .bt-featured__img img.loaded { opacity: 1; }
        .bt-featured__img-placeholder { font-size: 52px; opacity: .4; }
        .bt-featured__content { padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
        .bt-featured__title { font-size: 20px; line-height: 25px; font-weight: 700; color: var(--bt-navy); }
        .bt-featured__price { font-size: 18px; line-height: 22px; font-weight: 700; color: var(--bt-orange); margin-top: 4px; }
        .bt-featured__desc {
            font-size: 13px; line-height: 18px; color: var(--bt-text-secondary); margin-top: 4px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .bt-featured__btn {
            height: 48px; min-width: 132px; padding: 0 16px; border-radius: 12px;
            background: var(--bt-orange); color: #ffffff; font-size: 14px; font-weight: 700;
            display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
            border: none; transition: background .2s;
        }
        .bt-featured__btn:hover { background: var(--bt-orange-dark); }

        /* Product rows */
        .bt-rows { margin-top: 20px; }
        .bt-row {
            display: grid; grid-template-columns: 72px 1fr auto; column-gap: 12px;
            align-items: center; min-height: 104px; padding: 12px 0;
            border-bottom: 1px solid var(--bt-border);
        }
        .bt-rows .bt-row:last-child { border-bottom: none; }
        .bt-row__img {
            width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
            background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 37%, #f0f0f0 63%);
            background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite;
            display: flex; align-items: center; justify-content: center;
        }
        .bt-row__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
        .bt-row__img img.loaded { opacity: 1; }
        .bt-row__img-placeholder { font-size: 24px; opacity: .4; }
        .bt-row__body { min-width: 0; }
        .bt-row__name { font-size: 16px; line-height: 21px; font-weight: 700; color: var(--bt-navy); }
        .bt-row__desc {
            font-size: 13px; line-height: 18px; color: var(--bt-text-secondary); margin-top: 2px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .bt-row__price { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--bt-orange); margin-top: 4px; }
        .bt-row__action { display: flex; align-items: center; justify-content: center; min-width: 44px; }

        .bt-quickadd {
            width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
            background: var(--bt-orange); color: #ffffff; border: none;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background .15s;
        }
        .bt-quickadd:active { background: var(--bt-orange-dark); }
        .bt-personalize {
            display: inline-flex; align-items: center; justify-content: center;
            height: 44px; padding: 0 12px; border-radius: 10px;
            background: var(--bt-orange); color: #ffffff; font-size: 12px; font-weight: 700;
            white-space: nowrap;
        }
        .bt-stepper {
            display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
            width: 96px; height: 44px; border: 1px solid var(--bt-border-strong); border-radius: 10px;
            background: var(--bt-surface); overflow: hidden;
        }
        .bt-stepper__btn {
            height: 100%; display: flex; align-items: center; justify-content: center;
            background: none; border: none; color: var(--bt-navy); padding: 0;
        }
        .bt-stepper__btn:active { background: var(--bt-bg); }
        .bt-stepper__qty { text-align: center; font-size: 14px; font-weight: 700; color: var(--bt-navy); }

        @media (min-width: 768px) {
            /* Web view only: product rows arranged two per line instead of one
               long single-column list. The featured showcase card stays full-width
               (it's a distinct highlight, not part of this grid). */
            .bt-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; position: relative; }
            .bt-row {
                border-bottom: none;
                border-top: 1px solid var(--bt-border);
                padding-top: 16px; padding-bottom: 16px;
            }
            .bt-rows .bt-row:nth-child(1), .bt-rows .bt-row:nth-child(2) { border-top: none; }
            .bt-rows .bt-row:nth-child(odd) { padding-right: 24px; }
            .bt-rows .bt-row:nth-child(even) { padding-left: 24px; }
            /* Vertical divider between the two columns — a single line spanning
               the full height of .bt-rows (not per-row borders), so an odd item
               count (e.g. 5 products → a lone unpaired 3rd row on the left)
               still gets a divider next to it instead of the line just stopping. */
            .bt-rows::before {
                content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
                width: 1px; background: var(--bt-border);
            }
            /* Web view: no separate "featured" showcase at all — the featured
               product just appears in its natural row position like everything
               else (kullanıcı isteğiyle, 2026-09-20: "web görünümünde bu olmasın
               düz normal sıralamaya girsin ama mobilde bu ayrım olsun"). The
               showcase card is mobile-only; see .bt-row--is-featured below for
               its mobile-only mirror-image counterpart. */
            .bt-featured { display: none; }
        }
        @media (max-width: 767px) {
            /* Hides the plain-row duplicate of the featured product on mobile —
               it already shows as the .bt-featured showcase card above the list. */
            .bt-row--is-featured { display: none; }
        }
        @media (max-width: 374px) {
            .container.menu-main { padding-left: 12px; padding-right: 12px; }
            .bt-row { grid-template-columns: 64px 1fr auto; }
            .bt-row__img { width: 64px; height: 64px; }
            .bt-featured__btn { width: 100%; }
        }

        /* ─── Buttons ────────────────────────────────── */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            height: 48px; padding: 0 20px; border-radius: var(--radius-md);
            font-size: 14px; font-weight: 600; line-height: 20px;
            transition: all .15s; cursor: pointer; white-space: nowrap;
        }
        .btn-primary { background: var(--color-primary); color: #ffffff; }
        .btn-primary:hover { background: var(--color-primary-hover); }
        .btn-primary:active { background: var(--color-primary-active); }
        .btn-outline {
            background: var(--color-surface); color: var(--color-text-primary);
            border: 1px solid var(--color-border-strong);
        }
        .btn-outline:hover { background: var(--color-surface-secondary); }
        .btn-outline-white {
            background: transparent; color: #ffffff;
            border: 2px solid rgba(255,255,255,.5);
        }
        .btn-outline-white:hover { border-color: #ffffff; }
        .btn-sm { height: 40px; padding: 0 16px; font-size: 13px; }
        .btn-lg { height: 48px; padding: 0 32px; font-size: 16px; border-radius: var(--radius-md); }

        /* ─── Card ───────────────────────────────────── */
        .card {
            background: var(--color-surface); border: 1px solid var(--color-border);
            border-radius: var(--radius-lg); overflow: hidden;
            box-shadow: var(--shadow-card);
        }

        /* ─── Product card ───────────────────────────── */
        .product-card {
            background: var(--color-surface); border: 1px solid var(--color-border);
            border-radius: var(--radius-lg); overflow: hidden;
            transition: transform .2s, box-shadow .2s;
            display: flex; flex-direction: column;
            box-shadow: var(--shadow-card);
        }
        .product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
        .product-card__img {
            aspect-ratio: 4/3; overflow: hidden;
            background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 37%, #f0f0f0 63%);
            background-size: 400% 100%;
            animation: skeletonShimmer 1.4s ease infinite;
            display: flex; align-items: center; justify-content: center;
        }
        .product-card__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
        .product-card__img img.loaded { opacity: 1; }
        @keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
        .product-card__img-placeholder { font-size: 52px; opacity: .4; }
        .product-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
        .product-card__name { font-size: 16px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 5px; }
        /* Age-restriction info icon next to the product name — same "i" pattern
           as the homepage's postal-code info button; tap/click shows the
           restriction (not hover-only, since that doesn't work on mobile). */
        .product-card__age-info {
            display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
            height: 18px; padding: 0 6px; border-radius: 4px;
            background: var(--color-error-bg); color: var(--color-error);
            font-size: 11px; font-weight: 800; line-height: 1;
            vertical-align: middle; margin-left: 6px;
        }
        .product-card__desc { font-size: 13px; line-height: 20px; color: var(--color-text-secondary); margin-bottom: 14px; flex: 1;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
        .product-card__price { font-size: 15px; font-weight: 700; color: var(--color-primary); }
        .product-card__from { font-size: 11px; color: var(--color-text-secondary); font-weight: 500; }
        .product-card__add {
            background: var(--color-primary); color: #ffffff;
            border-radius: var(--radius-sm); height: 40px; padding: 0 14px;
            font-size: 13px; font-weight: 700;
            display: inline-flex; align-items: center; gap: 5px;
            transition: background .2s;
        }
        .product-card__add:hover { background: var(--color-primary-hover); }

        /* ─── Badge ──────────────────────────────────── */
        .badge {
            display: inline-flex; align-self: flex-start; align-items: center; height: 26px; padding: 0 10px;
            border-radius: var(--radius-pill);
            font-size: 12px; font-weight: 600;
        }
        .badge-red { background: var(--red); color: #ffffff; }
        .badge-red-outline { background: transparent; color: var(--red); border: 1.5px solid var(--red); }
        .badge-green { background: #dcfce7; color: #16a34a; }

        /* ─── Section ────────────────────────────────── */
        .section { padding: 64px 0; }
        .section-sm { padding: 36px 0; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
        .section-title { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
        .section-subtitle { color: var(--muted); font-size: 15px; margin-bottom: 32px; }

        /* ─── Section heading with line ─────────────── */
        .section-heading {
            text-align: center; margin-bottom: 40px;
        }
        .section-heading h2 {
            font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 10px;
        }
        .section-heading .line {
            width: 48px; height: 3px; background: var(--red);
            border-radius: 2px; margin: 0 auto;
        }

        /* ─── Grid ───────────────────────────────────── */
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

        /* ─── Category card ──────────────────────────── */
        .cat-card {
            display: flex; flex-direction: column; align-items: center; gap: 12px;
            padding: 24px 16px; border-radius: var(--radius);
            background: var(--card); border: 1px solid var(--border);
            transition: all .2s; cursor: pointer; text-align: center;
            box-shadow: var(--shadow); position: relative; overflow: hidden;
        }
        .cat-card:hover, .cat-card.active {
            border-color: var(--red); box-shadow: 0 4px 20px rgba(240,120,0,.12);
        }
        .cat-card:hover .cat-card__arrow { color: var(--red); transform: translateX(4px); }
        .cat-card__icon { font-size: 40px; }
        .cat-card__name { font-size: 14px; font-weight: 700; color: var(--text); }
        .cat-card__sub { font-size: 12px; color: var(--muted); }
        .cat-card__arrow { color: var(--red); font-size: 16px; transition: transform .2s; }

        /* ─── Features bar ───────────────────────────── */
        .features-bar {
            display: flex; justify-content: center; gap: 0; flex-wrap: wrap;
            background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
        }
        .features-bar-item {
            display: flex; align-items: center; gap: 12px;
            padding: 20px 40px; border-right: 1px solid var(--border);
            flex: 1; min-width: 200px;
        }
        .features-bar-item:last-child { border-right: none; }
        .features-bar-item__icon { font-size: 28px; }
        .features-bar-item__title { font-size: 14px; font-weight: 700; color: var(--text); }
        .features-bar-item__sub { font-size: 12px; color: var(--muted); }

        /* ─── Toast ──────────────────────────────────── */
        .toast-container {
            position: fixed; bottom: 24px; right: 24px; z-index: 9999;
            display: flex; flex-direction: column; gap: 10px;
        }
        .toast {
            background: #ffffff; border: 1px solid var(--border);
            border-radius: 12px; padding: 14px 18px;
            font-size: 14px; font-weight: 600; color: var(--text);
            display: flex; align-items: center; gap: 10px;
            animation: slideIn .3s ease;
            max-width: 340px;
            box-shadow: var(--shadow-lg);
        }
        .toast-success { border-left: 4px solid #16a34a; }
        .toast-error   { border-left: 4px solid var(--red); }
        .toast-info    { border-left: 4px solid #2563eb; }
        @keyframes slideIn {
            from { transform: translateX(120%); opacity: 0; }
            to   { transform: translateX(0); opacity: 1; }
        }

        /* ─── Footer ─────────────────────────────────── */
        .footer {
            background: var(--footer-bg); color: var(--footer-text);
            padding: 56px 0 32px;
        }
        /* Desktop footer — stacked: big centered logo + social row on top,
           then a bottom row with the link list at bottom-left and payment
           badges at bottom-right. */
        .footer-main {
            display: flex; flex-direction: column; align-items: center; gap: 32px;
            padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,.1);
        }
        .footer-main__brand { display: flex; flex-direction: column; align-items: center; gap: 16px; }
        .footer-main__brand img { height: 96px; width: auto; display: block; }
        .footer-main__bottom-row {
            width: 100%; display: flex; justify-content: space-between; align-items: flex-end;
            gap: 24px; flex-wrap: wrap;
        }
        .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
        .footer-links a { color: #D0D5DD; font-size: 14px; transition: color .2s; }
        .footer-links a:hover { color: #ffffff; }
        .footer-main__payments { justify-content: flex-end; margin-bottom: 0; }
        .footer-social-icon {
            width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25);
            display: flex; align-items: center; justify-content: center; color: #fff;
            transition: border-color .2s;
        }
        .footer-social-icon:hover { border-color: #fff; }
        .footer-bottom { padding: 24px 0; text-align: center; color: var(--footer-muted); font-size: 13px; }
        /* Mobile-only stacked layout — replaces the desktop row above
           (too cramped as 3 columns on a phone width). */
        .footer-mobile-only, .footer-mobile-links, .footer-mobile-legal { display: none; }
        .footer-payments { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
        .footer-payments.footer-mobile-only { display: none; }
        .footer-payment-badge {
            display: inline-flex; align-items: center; gap: 5px;
            background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
            border-radius: var(--radius-pill); padding: 6px 12px;
            font-size: 12px; font-weight: 600; color: #D0D5DD; white-space: nowrap;
        }

        /* ─── Responsive ─────────────────────────────── */
        @media (max-width: 1024px) {
            .grid-4 { grid-template-columns: repeat(3, 1fr); }
            .features-bar-item { padding: 16px 24px; }
        }
        @media (max-width: 1024px) and (min-width: 769px) {
            .container { padding: 0 24px; }
        }
        @media (max-width: 768px) {
            .container { padding: 0 16px; }
            .grid-4, .grid-3 { grid-template-columns: 1fr; }
            .footer { padding: 40px 0 28px; }
            .footer-main { display: none; }
            .footer-mobile-only { display: block; }
            .footer-mobile-only.footer-payments { display: flex; }
            .footer-mobile-links {
                display: flex; flex-wrap: wrap; justify-content: center;
                gap: 8px 18px; margin: 0; font-size: 13px;
            }
            .footer-mobile-links a { color: #D0D5DD; }
            .footer-mobile-legal {
                display: flex; justify-content: center; gap: 14px;
                margin-top: 18px; font-size: 12px;
            }
            .footer-mobile-legal a { color: var(--footer-muted); }
            .navbar { height: 64px; }
            .navbar-inner { padding: 0 20px; }
            .navbar-logo img { max-width: 170px; max-height: 38px; }
            .mobile-menu { inset: 64px 0 0 0; }
            .hamburger-btn { width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; }
            .navbar-nav, .cart-btn { display: none; }
            /* Cart lives in the bottom tab bar now — the header icon is only
               brought back (see product.blade.php) on pages without one. */
            .cart-btn-mobile { display: none; }
            .hamburger-btn { display: flex; }
            .nav-desktop-only { display: none !important; }
            .bottom-nav { display: flex; }
            .section { padding: 44px 0; }
            .section-title { font-size: 22px; }
            .features-bar { flex-direction: column; }
            .features-bar-item { border-right: none; border-bottom: 1px solid var(--border); }

            /* Horizontal compact product card on mobile (home page best-sellers
               and anywhere else still using bare .product-card — untouched) */
            .product-card { flex-direction: row; }
            .product-card__img { width: 112px; flex-shrink: 0; aspect-ratio: 1/1; }
            .product-card__body { padding: 12px; }
            .product-card__name { font-size: 14px; margin-bottom: 3px; }
            .product-card__desc { font-size: 12px; margin-bottom: 8px; -webkit-line-clamp: 2; }
            .product-card__price { font-size: 16px; }
            .product-card__add { min-height: 44px; }

            /* Restaurant menu row — menu + category pages only (.menu-product-card
               modifier). Borderless divided rows instead of a floating card,
               per the mobile ordering-flow redesign. Scoped so it never touches
               the bare .product-card grid used elsewhere (e.g. home best-sellers). */
            .menu-product-list { display: flex; flex-direction: column; margin-top: 4px; gap: 0; }
            .menu-product-card {
                display: grid !important; grid-template-columns: 1fr 104px; gap: 16px;
                min-height: 116px; padding: 16px 0 !important; margin: 0 !important;
                background: none !important; border: none !important;
                border-bottom: 1px solid var(--color-border) !important;
                border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;
            }
            .menu-product-list .menu-product-card:last-child { border-bottom: none !important; }
            .menu-product-card:hover { transform: none !important; box-shadow: none !important; }
            .menu-product-card .product-card__img {
                order: 2; width: 104px; height: 104px; aspect-ratio: 1/1;
                border-radius: var(--radius-md); flex-shrink: 0;
            }
            .menu-product-card .product-card__img-placeholder { font-size: 28px; }
            .menu-product-card .product-card__body { order: 1; padding: 0; min-width: 0; }
            .menu-product-card .product-card__name { font-size: 16px; margin-bottom: 4px; }
            .menu-product-card .product-card__desc { font-size: 13px; line-height: 19px; margin-bottom: 0; -webkit-line-clamp: 2; }
            .menu-product-card .product-card__footer { margin-top: 10px; }
            .menu-product-card .product-card__price { font-size: 16px; }
            .menu-product-card .product-card__add { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
            .product-card__quickadd {
                width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
                background: var(--color-primary); color: #ffffff;
                display: inline-flex; align-items: center; justify-content: center;
                border: none; transition: background .15s;
            }
            .product-card__quickadd:active { background: var(--color-primary-active); }
        }
        @media (max-width: 480px) {
            .grid-2 { grid-template-columns: 1fr; }
        }