/* Napoli Pop storefront theme (Pizzeria La Bella Napoli). Part 1: shared multi-page storefront structure (recoloured). Part 2: the Napoli Pop look (tokens at the top of part 2). */

/* 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:                var(--np-cream);
            --color-surface:           #FFFFFF;
            --color-surface-secondary: #F2EFEA;
            --color-text-primary:      #172033;
            --color-text-secondary:    #667085;
            --color-text-muted:        var(--np-mute);

            --color-primary:       var(--np-red);
            --color-primary-hover: #D95F00;
            --color-primary-active:#C65300;
            --color-primary-soft:  var(--np-tint);

            --color-border:        var(--np-line);
            --color-border-strong: #D8D2CB;

            --color-success:    var(--np-basil);
            --color-success-bg: var(--np-basil-s);
            --color-warning:    #B45309;
            --color-warning-bg: var(--np-tint);
            --color-error:      var(--np-bad);
            --color-error-bg:   var(--np-tint);
            --color-info:       #175CD3;
            --color-info-bg:    #EFF8FF;

            --footer-bg:    #111827;
            --footer-text:  var(--np-cream);
            --footer-muted: var(--np-mute);
            --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:        var(--np-red);
            --bt-orange-dark:   #E85D00;
            --bt-navy:          #102A43;
            --bt-blue:          #1686D9;
            --bt-text-secondary:#718096;
            --bt-text-muted:    #9AA6B2;
            --bt-bg:            var(--np-cream);
            --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; }
        }

/* Shared storefront skin. */
:root {
    --color-bg: var(--np-cream);
    --color-surface: #FFFFFF;
    --color-surface-secondary: var(--np-tint);
    --color-text-primary: var(--np-ink);
    --color-text-secondary: var(--np-mute);
    --color-text-muted: var(--np-mute);
    --color-primary: var(--np-red);
    --color-primary-hover: var(--np-red2);
    --color-primary-active: #C92314;
    --color-primary-soft: var(--np-tint);
    --color-border: var(--np-line);
    --color-border-strong: var(--np-line);
    --red: var(--np-red);
    --red-dark: var(--np-red2);
    --text: var(--np-ink);
    --muted: var(--np-mute);
    --border: var(--np-line);
    --card: #FFFFFF;
    --bg: var(--np-cream);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --shadow-card: 0 6px 20px -2px rgba(0,0,0,.05);
    --shadow-elevated: 0 16px 42px rgba(34,25,20,.10);
    --shadow-hover: 0 12px 30px rgba(var(--np-red-rgb,212,44,19),.15);
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--np-cream);
    color: var(--np-ink);
    letter-spacing: -.01em;
}
h1, h2, h3, h4 { color: var(--np-ink); font-weight: 800; letter-spacing: -.035em; }
.container { max-width: 1240px; }
.navbar { background: rgba(255,255,255,.94); border-bottom: 2px dashed var(--np-line); backdrop-filter: blur(14px); }
.navbar-inner { min-height: 76px; }
.navbar-logo img, .brand-logo { max-height: 52px; height: 52px; width: auto; object-fit: contain; }
.navbar-nav a { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 10px 13px; transition: color .2s, background .2s, transform .2s; }
.navbar-nav a:hover, .navbar-nav a.active { color: var(--np-red); background: var(--np-tint); transform: translateY(-1px); }
.cart-btn, .cart-btn-mobile { background: var(--np-red); border-radius: 999px; box-shadow: 0 8px 24px -4px rgba(var(--np-red-rgb,212,44,19),.4); transition: transform .2s, background .2s; }
.cart-btn:hover, .cart-btn-mobile:hover { background: var(--np-red2); transform: translateY(-2px); }
.btn { border-radius: 14px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-primary { background: var(--np-red); box-shadow: 0 8px 24px -4px rgba(var(--np-red-rgb,212,44,19),.28); }
.btn-primary:hover { background: var(--np-red2); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--np-red-rgb,212,44,19),.22); }
.btn-outline { border-color: var(--np-ink); background: var(--np-surface); }
.btn-outline:hover { border-color: var(--np-red); background: var(--np-tint); color: var(--np-red); transform: translateY(-1px); }
.card, .product-card, .cart-page-card, .acct-card, .order-card, .address-card { border-radius: 22px; border-color: var(--np-ink); box-shadow:var(--np-sh); }
.product-card { transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(var(--np-red-rgb,212,44,19),.15); }
.product-card__img { border-radius: 18px 18px 0 0; }
.product-card__add { border-radius: 999px; background: var(--np-red); }
.product-card__add:hover { background: var(--np-red2); transform: scale(1.03); }
.hero-postal-card, .bt-search__input { border-radius: 22px; }
.form-input, .ca-input, select, textarea { border-radius: 14px; border-color: var(--np-ink); }
.form-input:focus, .ca-input:focus, select:focus, textarea:focus { border-color: var(--np-red); box-shadow: 0 0 0 4px rgba(var(--np-red-rgb,212,44,19),.12); outline: none; }
.bottom-nav { border-radius: 28px 28px 0 0; border-top: 2px dashed var(--np-line); box-shadow: 0 -8px 25px rgba(0,0,0,.06); }
.bottom-nav__item--fab { background: var(--np-red); box-shadow: 0 8px 24px -4px rgba(var(--np-red-rgb,212,44,19),.4); }
.footer { background: var(--np-ink); }
.footer a:hover { color: var(--np-red); }
.acct-page, .cart-page-main { max-width: 1040px; }
@media (max-width: 768px) {
    .navbar-inner { min-height: 68px; }
    .navbar-logo img, .brand-logo { height: 44px; }
    .navbar-nav { display: none; }
    .container { padding-left: 16px; padding-right: 16px; }
    .product-card { border-radius: 18px; }
}

        /* ─── Form input (master) ────────────────────── */
        .form-label {
            display: block; font-size: 13px; font-weight: 600; color: var(--np-ink); margin-bottom: 8px;
        }
        .form-input {
            display: block; width: 100%; height: 50px; padding: 0 16px;
            background: var(--np-surface); 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(var(--color-primary-rgb, 212,44,19),.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: 2px dashed var(--np-line);
            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: var(--np-surface); 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: var(--np-surface); border-radius: 14px; box-shadow:var(--np-sh);
            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: var(--np-cream); }
        .search-dropdown__item-img {
            width: 34px; height: 34px; border-radius: 8px; background: var(--np-cream); 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: 2px dashed var(--np-line);
        }
        .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; }
        /* Holds this item's flex share while the actual cart FAB (position: absolute, see below) floats
           out of the row — without it Home/Menu/Account re-center into 3 slots and Menu lands under the FAB. */
        .bottom-nav__spacer { flex: 1; min-width: 44px; }
        /* 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:var(--np-sh);
            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: var(--np-surface); 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:var(--np-sh); }
        }
        /* 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: var(--np-surface); 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: var(--np-surface); 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: 2px dashed var(--np-line); 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: var(--np-surface); 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: var(--np-surface); 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: 2px dashed var(--np-line); 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: var(--np-surface);
            color: var(--np-ink); 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: var(--np-mute); }
        .account-email-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }

        .address-card { background: var(--np-surface); 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: var(--np-mute); }
        .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: var(--np-surface); 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: var(--np-surface); 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, var(--np-cream) 25%, var(--np-cream) 37%, var(--np-cream) 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, var(--np-cream) 25%, var(--np-cream) 37%, var(--np-cream) 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, var(--np-cream) 25%, var(--np-cream) 37%, var(--np-cream) 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: var(--np-basil); }

        /* ─── 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: var(--np-surface); 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 var(--np-basil); }
        .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: var(--np-line); 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: var(--np-line); 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--allo-account { display: none; }
            .footer--mobile-disabled { display: none; }
            .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: var(--np-line); }
            .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; }
        }


/* Customer sign-in/sign-up card (themes/classic/account-login.blade.php, account-register.blade.php),
   to the measurements of the Bontable Genève sign-in card. Shared here so every account page that uses
   these classes gets them, instead of each page carrying its own copy. */
.ca-page{background:var(--np-cream);min-height:60vh;display:flex;justify-content:center;align-items:flex-start;padding:48px 16px 72px}
.ca-card{width:100%;max-width:408px;background:var(--np-surface);border:2px solid var(--np-ink);border-radius:14px;padding:40px 36px;box-shadow:var(--np-sh)}
.ca-title{font-size:26px;line-height:1.2;font-weight:800;color:var(--color-text-primary);margin:0 0 6px}
.ca-sub{font-size:14px;color:var(--color-text-secondary);margin:0 0 24px}
.ca-label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#555;margin-bottom:6px}
.ca-input{width:100%;background:var(--np-surface);border:2px solid var(--np-ink);border-radius:10px;padding:10px 14px;font-size:14px;font-family:inherit;color:var(--color-text-primary);margin-bottom:18px}
.ca-input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}
.ca-input:disabled{background:var(--color-surface-secondary);color:var(--color-text-secondary);cursor:not-allowed}
.ca-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 20px}
.ca-remember{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--color-text-secondary);cursor:pointer;margin:0}
.ca-remember input{width:15px;height:15px;accent-color:var(--color-primary);margin:0}
.ca-link{font-size:13px;font-weight:600;color:var(--color-primary)}
.ca-submit{width:100%;height:48px;border:0;border-radius:10px;background:var(--color-primary);color:#fff;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ca-submit:hover{filter:brightness(.95)}
.ca-sep{display:flex;align-items:center;gap:12px;margin:24px 0 14px;color:var(--color-text-secondary);font-size:13px}
.ca-sep::before,.ca-sep::after{content:"";flex:1;height:1px;background:var(--np-line)}
.ca-secondary{display:flex;align-items:center;justify-content:center;width:100%;height:44px;border:2px solid var(--np-ink);border-radius:10px;background:var(--np-surface);color:var(--color-text-primary);font-size:14px;font-weight:600}
.ca-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}
/* Compact icon+label row for federated sign-in (Google/Facebook), each its own equal-width button. */
.ca-social-row{display:flex;gap:10px}
.ca-social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:46px;border:2px solid var(--np-ink);border-radius:10px;background:var(--np-surface);color:var(--color-text-primary);font-size:13px;font-weight:600}
.ca-social-btn:hover{border-color:var(--np-ink);background:var(--np-cream)}
@media (max-width:340px){.ca-social-btn span{display:none}}
.ca-strength{height:4px;border-radius:2px;background:var(--np-line);overflow:hidden;margin-bottom:6px}
.ca-strength span{display:block;height:100%;width:0;background:var(--color-primary);transition:width .2s}
.ca-strength__text{font-size:12px;color:var(--color-text-secondary);margin:0 0 4px}
@media (max-width:480px){
    .ca-page{padding:24px 14px 56px}
    .ca-card{padding:28px 22px;border-radius:12px}
    .ca-title{font-size:23px}
}

/* Signed-in customer dashboard (themes/classic/account.blade.php): same card/token language as .ca-*. */
.acct-page{background:var(--np-cream);min-height:60vh;padding:32px 16px 72px}
.acct-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.acct-hello{font-size:24px;font-weight:800;color:var(--color-text-primary);margin:0 0 4px}
.acct-card{background:var(--np-surface);border:2px solid var(--np-ink);border-radius:14px;padding:26px 28px}
.acct-card h2{font-size:16px;font-weight:800;color:var(--color-text-primary);margin:0 0 16px}
.acct-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #F0ECE6}
.acct-item:first-of-type{border-top:0;padding-top:0}
.acct-item strong{color:var(--color-text-primary)}
.acct-muted{color:var(--color-text-secondary);font-size:13px}
.acct-pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--np-cream);color:var(--color-text-primary);font-size:11px;font-weight:700}
.acct-actions{display:flex;gap:8px;flex-wrap:wrap}
.acct-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:8px;border:2px solid var(--np-ink);background:var(--np-surface);color:var(--color-text-primary);font-size:13px;font-weight:600;cursor:pointer}
.acct-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.acct-btn--primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.acct-btn--primary:hover{filter:brightness(.95);color:#fff}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.acct-grid .ca-input,.acct-grid .ca-label{margin-bottom:0}
.acct-grid label{display:block;margin-bottom:16px}
.acct-grid .ca-input{margin-top:6px}
.acct-check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--color-text-secondary);margin:10px 0 16px}
.acct-check input{width:15px;height:15px;accent-color:var(--color-primary)}
.acct-empty{color:var(--color-text-secondary);font-size:13px;margin:0}
@media (max-width:600px){.acct-grid{grid-template-columns:1fr}}

/* Account hub (top of themes/classic/account.blade.php): profile summary, quick links and help —
   the "Mon compte" navigation screen. The .acct-card sections it links to (#orders, #addresses,
   #profile, #loyalty) keep the same detail views/forms as before, just reached by anchor instead
   of being shown inline right away. */
.acct-hero{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acct-hero .acct-hello{margin:0}
.acct-points-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;background:var(--color-primary-soft);color:var(--color-primary);font-size:13px;font-weight:700;white-space:nowrap}
.acct-profile-card{display:flex;align-items:center;gap:14px;background:var(--np-surface);border:2px solid var(--np-ink);border-radius:14px;padding:16px 18px;color:inherit}
.acct-profile-card:hover{border-color:var(--color-primary)}
.acct-avatar{flex:none;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:800}
.acct-profile-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-profile-info strong{font-size:15px;color:var(--color-text-primary)}
.acct-profile-card>svg{flex:none;color:var(--color-text-secondary)}
.acct-warn{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--np-tint);border:1px solid var(--np-tint);border-radius:12px;padding:14px 16px;color:var(--np-mute);font-size:13px;font-weight:600}
.acct-warn svg{flex:none;color:#D8850A}
.acct-warn span{flex:1;min-width:180px}
.acct-warn__action{background:none;border:0;padding:0;color:var(--np-mute);font-size:13px;font-weight:800;text-decoration:underline;cursor:pointer;white-space:nowrap;font-family:inherit}
.acct-section-title{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--color-text-secondary);text-transform:uppercase;margin:0 0 10px}
.acct-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--np-surface);border:2px solid var(--np-ink);border-radius:14px;padding:36px 20px}
.acct-empty-state svg{color:var(--np-line);margin-bottom:4px}
.acct-empty-state__title{font-size:15px;font-weight:800;color:var(--color-text-primary);margin:0}
.acct-empty-state .acct-btn{margin-top:6px}
.acct-nav-list{display:flex;flex-direction:column;gap:10px}
.acct-nav-item{display:flex;align-items:center;gap:14px;background:var(--np-surface);border:2px solid var(--np-ink);border-radius:14px;padding:14px 18px;color:inherit}
.acct-nav-item:hover{border-color:var(--color-primary)}
.acct-nav-item>svg:first-child{flex:none;color:var(--color-primary)}
.acct-nav-item>svg:last-child{flex:none;color:var(--color-text-secondary)}
.acct-nav-item__text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-nav-item__text strong{font-size:14px;color:var(--color-text-primary)}
.acct-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:2px solid var(--np-ink);border-radius:12px;background:var(--np-surface);color:var(--color-error);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.acct-logout:hover{background:var(--color-error-bg);border-color:var(--color-error)}
@media (max-width:600px){.acct-hero .acct-hello{font-size:21px}}

/* The hub's quick-link cards each open their own page (themes/classic/account-orders.blade.php and
   siblings): a "‹ Mon compte" breadcrumb, a plain H1 + one-line subtitle, then the same detail
   markup the hub used to show inline. Shared by all four via themes/classic/partials/account-header. */
.acct-crumb{display:inline-flex;align-items:center;gap:2px;color:var(--color-text-secondary);font-size:13px;font-weight:700;margin-bottom:16px}
.acct-crumb:hover{color:var(--color-primary)}
.acct-page-header{margin-bottom:20px}
.acct-page-header h1{font-size:26px;font-weight:800;color:var(--color-text-primary);margin:0 0 4px}
.acct-page-header p{color:var(--color-text-secondary);font-size:14px;margin:0}
.acct-btn-block-outline{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border:1.5px solid var(--color-primary);border-radius:12px;background:var(--np-surface);color:var(--color-primary);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.acct-btn-block-outline:hover{background:var(--color-primary-soft)}
.acct-field{margin-bottom:18px}
.acct-field .ca-label{margin-bottom:6px}
.acct-field .ca-input{margin-bottom:6px}
.acct-field .acct-hint{margin:0;color:var(--color-text-secondary);font-size:12px}
.acct-section-heading{font-size:16px;font-weight:800;color:var(--color-text-primary);margin:28px 0 12px}
.acct-points-card .acct-points-eyebrow{display:flex;align-items:center;gap:6px;color:var(--color-text-secondary);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.acct-points-value{font-size:34px;font-weight:800;color:var(--color-primary);line-height:1.1}
.acct-points-cta{margin-top:14px;padding:10px 14px;border-radius:10px;background:var(--color-success-bg);color:var(--color-success);font-size:13px;font-weight:700}
.acct-how-list{display:flex;flex-direction:column;gap:10px}
.acct-how-item{display:flex;align-items:flex-start;gap:14px;background:var(--np-surface);border:2px solid var(--np-ink);border-radius:14px;padding:16px 18px}
.acct-how-item__icon{flex:none;width:36px;height:36px;border-radius:50%;background:var(--color-primary-soft);color:var(--color-primary);display:flex;align-items:center;justify-content:center}
.acct-how-item__text strong{display:block;font-size:14px;color:var(--color-text-primary);margin-bottom:2px}
.acct-how-item__text span{font-size:13px;color:var(--color-text-secondary)}

/* Plain aliases of .acct-muted/.acct-pill, for partials shared with the default theme
   (partials/order-fulfillment, order-totals, order-tax) that use these generic class names. */
.muted{color:var(--color-text-secondary);font-size:13px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--np-cream);color:var(--color-text-primary);font-size:11px;font-weight:700}

/* Final cascade: kept at the end so legacy classic selectors cannot
   override the selected home-2 skin. */
body { font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--np-cream); color:var(--np-ink); }
.navbar { height:76px; background:rgba(255,255,255,.94); border-bottom:2px dashed var(--np-line); backdrop-filter:blur(14px); }
.navbar-inner { min-height:76px; }
.navbar-logo img,.brand-logo { height:52px; max-height:52px; width:auto; object-fit:contain; }
.navbar-nav { gap:10px; }
.navbar-nav a { padding:10px 13px; border-radius:999px; font-size:13px; font-weight:700; }
.navbar-nav a:hover,.navbar-nav a.active { color:var(--np-red); background:var(--np-tint); transform:translateY(-1px); }
.cart-btn,.cart-btn-mobile { border-radius:999px; background:var(--np-red); box-shadow:0 8px 24px -4px rgba(var(--np-red-rgb,212,44,19),.4); }
.cart-btn:hover,.cart-btn-mobile:hover { background:var(--np-red2); transform:translateY(-2px); }
.btn { border-radius:14px; font-weight:800; }
.btn-primary { background:var(--np-red); box-shadow:0 8px 24px -4px rgba(var(--np-red-rgb,212,44,19),.28); }
.btn-primary:hover { background:var(--np-red2); transform:translateY(-2px); box-shadow:0 12px 30px rgba(var(--np-red-rgb,212,44,19),.22); }
.btn-outline { border-color:var(--np-ink); background:var(--np-surface); }
.btn-outline:hover { border-color:var(--np-red); background:var(--np-tint); color:var(--np-red); transform:translateY(-1px); }
.card,.product-card,.cart-page-card,.acct-card,.order-card,.address-card { border-radius:22px; border-color:var(--np-ink); box-shadow:var(--np-sh); }
.product-card { transition:transform .25s ease,box-shadow .25s ease; }
.product-card:hover { transform:translateY(-5px); box-shadow:0 12px 30px rgba(var(--np-red-rgb,212,44,19),.15); }
.product-card__img { border-radius:18px 18px 0 0; }
.product-card__add { border-radius:999px; background:var(--np-red); }
.product-card__add:hover { background:var(--np-red2); transform:scale(1.03); }
.hero-postal-card,.bt-search__input { border-radius:22px; }
.form-input,.ca-input,select,textarea { border-radius:14px; border-color:var(--np-ink); }
.form-input:focus,.ca-input:focus,select:focus,textarea:focus { border-color:var(--np-red); box-shadow:0 0 0 4px rgba(var(--np-red-rgb,212,44,19),.12); outline:none; }
.bottom-nav { border-radius:28px 28px 0 0; border-top:2px dashed var(--np-line); box-shadow:0 -8px 25px rgba(0,0,0,.06); }
.bottom-nav__item--fab { background:var(--np-red); box-shadow:0 8px 24px -4px rgba(var(--np-red-rgb,212,44,19),.4); }
.footer { background:var(--np-ink); }
.footer a:hover { color:var(--np-red); }
@media(max-width:768px) {
    .navbar { height:68px; }
    .navbar-inner { min-height:68px; }
    .navbar-logo img,.brand-logo { height:44px; max-height:44px; }
    .navbar-nav { display:none; }
    .mobile-menu { inset:68px 0 0; }
    .product-card { border-radius:18px; }
}

/* Artisan Flame menu family — shared by the menu, category and product listings. */
.np-menu-page{min-height:calc(100vh - 76px);background:var(--np-cream);color:var(--np-ink);padding-bottom:52px}
.np-menu-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--np-ink) 0%,var(--np-ink) 58%,#241915 100%);color:#fff;border-radius:0 0 36px 36px;box-shadow:0 18px 38px -12px rgba(255,77,26,.18)}
.np-menu-hero__ambient{position:absolute;border-radius:50%;pointer-events:none;filter:blur(34px)}.np-menu-hero__ambient--right{width:230px;height:230px;right:-70px;top:-80px;background:rgba(255,77,26,.28)}.np-menu-hero__ambient--left{width:210px;height:210px;left:-80px;bottom:-100px;background:rgba(255,112,67,.18)}
.np-menu-hero__inner{position:relative;z-index:1;padding-top:28px;padding-bottom:34px}.np-menu-hero__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}.np-menu-hero__eyebrow{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid rgba(255,77,26,.55);border-radius:999px;color:var(--np-red2);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.np-menu-hero__closed{padding:7px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;font-size:11px;font-weight:700;background:rgba(255,255,255,.1)}
.np-menu-hero__copy{text-align:center;margin:0 auto 24px}.np-menu-hero__copy h1{color:#fff;font-size:38px;line-height:1.12;letter-spacing:-.045em;margin:0}.np-menu-hero__copy p{margin:8px 0 0;color:#e8d9d3;font-size:14px}
.np-menu-search{display:flex;align-items:center;gap:8px;padding:6px 7px 6px 14px;background:var(--np-surface);border-radius:16px;box-shadow:var(--np-sh);max-width:720px;margin:0 auto}.np-menu-search>span{color:#9a938e;font-size:27px;line-height:1;transform:rotate(-20deg)}.np-menu-search input{width:100%;min-width:0;border:0;background:transparent;color:var(--np-ink);font:inherit;font-size:14px;outline:0}.np-menu-search input::placeholder{color:var(--np-mute)}.np-menu-search button{width:42px;height:42px;border-radius:12px;background:var(--np-red);color:#fff;font-size:22px;line-height:1;box-shadow:0 5px 14px rgba(255,77,26,.35);transition:transform .2s,background .2s}.np-menu-search button:hover{background:var(--np-red);transform:translateY(-1px)}
.np-category-rail{position:sticky;top:76px;z-index:20;background:rgba(250,247,242,.92);backdrop-filter:blur(12px);border-bottom:2px dashed var(--np-line)}.np-category-rail__inner{display:flex;gap:9px;overflow-x:auto;padding-top:14px;padding-bottom:14px;scrollbar-width:none}.np-category-rail__inner::-webkit-scrollbar{display:none}.np-category-pill{display:inline-flex;align-items:center;gap:7px;flex:none;padding:10px 15px;border:1px solid #E8E2D9;border-radius:999px;background:var(--np-surface);color:var(--np-ink);font-size:12px;font-weight:700;white-space:nowrap;transition:transform .2s,background .2s,border-color .2s,color .2s}.np-category-pill span{font-size:15px}.np-category-pill small{color:var(--np-mute);font-size:11px}.np-category-pill:hover{transform:translateY(-1px);background:#F5EFE6;border-color:#d8cfc5}.np-category-pill.is-active{background:var(--np-ink);border-color:var(--np-ink);color:#fff;box-shadow:0 6px 14px -4px rgba(26,24,23,.3)}.np-category-pill.is-active small{color:#e6dcd7}
.np-menu-content{max-width:1280px;padding-top:34px;padding-bottom:88px}.np-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:15px}.np-section-heading h2{margin:0;color:var(--np-ink);font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.03em}.np-section-heading p{margin:5px 0 0;color:var(--np-mute);font-size:12px}.np-section-heading>a,.np-section-heading__link{color:var(--np-red);font-size:12px;font-weight:800;white-space:nowrap}.np-section-heading a span,.np-section-heading__link span{font-size:18px;vertical-align:-1px}.np-section-heading--menu{margin-top:34px;margin-bottom:14px;padding-top:2px}.np-featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.np-featured-card{display:flex;flex-direction:column;min-width:0;background:var(--np-surface);border:2px solid var(--np-ink);border-radius:16px;overflow:hidden;box-shadow:0 4px 12px -2px rgba(26,24,23,.04),0 2px 6px -1px rgba(26,24,23,.02);transition:transform .22s,box-shadow .22s}.np-featured-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -4px rgba(26,24,23,.08),0 6px 12px -2px rgba(255,77,26,.06)}.np-featured-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--np-line)}.np-featured-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.np-featured-card:hover .np-featured-card__media img{transform:scale(1.05)}.np-featured-card__media>span{display:grid;place-items:center;height:100%;font-size:48px}.np-featured-card__badge,.np-menu-card__badge{position:absolute;top:10px;left:10px;padding:5px 9px;border-radius:999px;background:var(--np-red);color:#fff;font-size:10px;font-weight:800;line-height:1;box-shadow:0 2px 5px rgba(26,24,23,.14)}.np-featured-card__body{display:flex;flex-direction:column;gap:4px;padding:13px 14px 15px}.np-featured-card__body>span{color:var(--np-mute);font-size:11px}.np-featured-card__body strong{font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-featured-card__body b{color:var(--np-red);font-size:13px;margin-top:3px}.np-featured-card__body b small{color:var(--np-mute);font-size:10px;font-weight:500}
.np-menu-cat-section{scroll-margin-top:150px}.np-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.np-menu-card{position:relative;display:flex!important;flex-direction:column;min-width:0;overflow:hidden;background:var(--np-surface)!important;border:2px solid var(--np-ink)!important;border-radius:16px!important;box-shadow:0 4px 12px -2px rgba(26,24,23,.04),0 2px 6px -1px rgba(26,24,23,.02);padding:0!important;transition:transform .22s,box-shadow .22s,border-color .22s}.np-menu-card:hover{transform:translateY(-3px);border-color:#f4c7ba!important;box-shadow:0 16px 32px -4px rgba(26,24,23,.08),0 6px 12px -2px rgba(255,77,26,.06)}.np-menu-card__link{display:flex;flex-direction:column;min-width:0;color:inherit}.np-menu-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--np-line)}.np-menu-card__media img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s,transform .35s}.np-menu-card__media img.loaded{opacity:1}.np-menu-card:hover .np-menu-card__media img{transform:scale(1.04)}.np-menu-card__placeholder{display:grid;place-items:center;width:100%;height:100%;font-size:48px;opacity:.5}.np-menu-card__badge--age{background:var(--np-ink);left:auto;right:10px}.np-menu-card__badge--popular{left:auto;right:10px;top:10px;background:var(--np-ink)}.np-menu-card__rating{position:absolute;left:10px;bottom:10px;padding:4px 7px;border-radius:7px;background:rgba(255,255,255,.92);color:var(--np-ink);font-size:11px;font-weight:800;box-shadow:0 2px 5px rgba(26,24,23,.12)}.np-menu-card__rating small{color:var(--np-mute);font-size:10px;font-weight:500}.np-menu-card__body{display:flex;flex-direction:column;gap:7px;min-width:0;padding:14px 16px 18px}.np-menu-card__name{margin:0;padding-right:4px;color:var(--np-ink);font-size:16px;line-height:1.22;font-weight:800;letter-spacing:-.025em}.np-menu-card__desc{display:-webkit-box;overflow:hidden;margin:0;color:var(--np-mute);font-size:12px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.np-menu-card__footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:57px;margin-top:3px}.np-menu-card__price{color:var(--np-red);font-size:17px;line-height:1.1;font-variant-numeric:tabular-nums}.np-menu-card__meta{color:var(--np-mute);font-size:10px}.np-menu-card__action{position:absolute!important;right:14px;bottom:15px;z-index:2;min-width:0!important}.np-menu-card__add{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--np-red);color:#fff;font-size:27px;font-weight:400;line-height:1;box-shadow:0 5px 12px rgba(255,77,26,.28);transition:transform .2s,background .2s}.np-menu-card__add:hover{background:var(--np-red);transform:translateY(-1px)}.np-menu-card__customize{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:10px;background:var(--np-tint);color:var(--np-red);font-size:10px;font-weight:800}.np-menu-card__action .bt-stepper{display:flex;align-items:center;gap:3px;padding:3px;border-radius:12px;background:var(--np-tint);border:1px solid var(--np-tint)}.np-menu-card__action .bt-stepper__btn{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--np-surface);color:var(--np-red);font-size:18px}.np-menu-card__action .bt-stepper__qty{min-width:22px;text-align:center;color:var(--np-ink);font-size:12px;font-weight:800}.np-menu-empty{padding:60px 20px;text-align:center;color:var(--np-mute);font-size:14px;font-weight:700}.np-closed-note{margin-bottom:20px;padding:12px 15px;border:1px solid var(--np-bad-bg);border-radius:12px;background:var(--np-tint);color:var(--np-bad);font-size:13px;font-weight:700}
.np-category-hero{background:linear-gradient(145deg,var(--np-ink),var(--np-ink));color:#fff;padding:30px 0 34px}.np-category-hero__back{display:inline-flex;align-items:center;gap:6px;margin-bottom:25px;color:#eadbd5;font-size:13px;font-weight:700}.np-category-hero__back:hover{color:#fff}.np-category-hero h1{color:#fff;margin:12px 0 5px;font-size:34px}.np-category-hero p{margin:0;color:#e6d7d1;font-size:13px}
@media(max-width:1024px){.np-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.np-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.np-menu-page{min-height:calc(100vh - 68px);padding-bottom:32px}.np-menu-hero{border-radius:0 0 32px 32px}.np-menu-hero__inner{padding:18px 16px 27px}.np-menu-hero__toolbar{margin-bottom:23px}.np-menu-hero__copy h1{font-size:28px}.np-menu-hero__copy p{font-size:12px}.np-menu-search{border-radius:16px}.np-category-rail{top:68px}.np-category-rail__inner{padding-left:16px;padding-right:16px}.np-menu-content{padding:26px 16px 64px}.np-section-heading h2{font-size:20px}.np-featured-grid,.np-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.np-featured-card__body{padding:11px 12px 13px}.np-featured-card__body strong{font-size:14px}.np-menu-card__body{padding:11px 12px 14px}.np-menu-card__name{font-size:15px}.np-menu-card__desc{font-size:11px;-webkit-line-clamp:1}.np-menu-card__price{font-size:16px}.np-menu-card__action{right:10px;bottom:11px}.np-menu-card__add{width:36px;height:36px;border-radius:11px;font-size:23px}.np-menu-card__footer{padding-right:46px}.np-menu-card__action .bt-stepper__btn{width:26px;height:26px}.np-menu-card__action .bt-stepper__qty{min-width:18px}.np-category-hero{padding:20px 16px 25px}.np-category-hero h1{font-size:28px}.np-category-hero__back{margin-bottom:20px}}

/* Product detail follows the same Artisan Flame tokens as the new menu cards. */
.npp-page{background:var(--np-cream)}.npp-hero,.npp-info-card,.npp-choice-card,.npp-quantity-card,.npp-reviews{border-color:var(--np-ink);border-radius:16px;box-shadow:0 4px 12px -2px rgba(26,24,23,.04)}.npp-category{background:var(--np-tint);border-color:var(--np-tint);color:var(--np-red)}.npp-price strong,.npp-size strong,.npp-recommendation b{color:var(--np-red)}.npp-size,.npp-option,.npp-option-row,.npp-recommendation{border-color:var(--np-ink);border-radius:12px}.npp-size.active,.npp-option.selected,.npp-option-row.selected{background:var(--np-tint);border-color:var(--np-red);box-shadow:0 0 0 2px #FF4D1A}.npp-option:hover,.npp-size:hover,.npp-recommendation:hover{border-color:var(--np-red)}.npp-total{background:var(--np-ink);border-radius:16px}.npp-total button,.npp-sticky-add{background:var(--np-red)}.npp-total button:hover,.npp-sticky-add:hover{background:var(--np-red)}.npp-allergens span{border-color:var(--np-tint);background:var(--np-tint)}.npp-sticky-cta{border-color:var(--np-ink)}.npp-sticky-quantity{background:var(--np-tint)}.npp-sticky-quantity button{color:var(--np-red)}

/* ==========================================================================
   NAPOLI POP skin (Pizzeria La Bella Napoli): tomato red, cream, thick ink outlines, hard shadows.
   Everything above is the shared multi-page storefront structure; everything from here on is the look.
   Red text/buttons use a slightly deeper tomato than the artwork so white-on-red and red-on-cream pass WCAG AA (4.5:1).
   ========================================================================== */
:root {
    --np-red: #d42c13;
    --np-red2: #b8240f;
    --np-red-rgb: 212,44,19;
    --np-cream: #fff4e0;
    --np-paper: #fffaf0;
    --np-surface: #fffaf0;
    --np-white: #ffffff;
    --np-ink: #1b1410;
    --np-ink2: #4a3a2e;
    --np-mute: #7a6a5a;
    --np-sun: #ffc531;
    --np-basil: #2f7a3a;
    --np-basil-s: #c9ecc8;
    --np-bad: #c4200d;
    --np-bad-bg: #ffd9d1;
    --np-tint: #ffe3b8;
    --np-line: rgba(27, 20, 16, .2);
    --np-sh: 3px 3px 0 var(--np-ink);
    --np-sh-lg: 5px 5px 0 var(--np-ink);
    --np-r1: 20px;
    --np-r2: 14px;
    --np-r3: 10px;
    --np-fd: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    --np-fi: "Instrument Serif", Georgia, serif;
    --np-ease: cubic-bezier(.2, .9, .25, 1.1);

    /* the shared storefront tokens, mapped onto the Napoli palette */
    --color-bg: var(--np-cream);
    --color-surface: var(--np-paper);
    --color-surface-secondary: var(--np-tint);
    --color-text-primary: var(--np-ink);
    --color-text-secondary: var(--np-mute);
    --color-text-muted: var(--np-mute);
    --color-primary: var(--np-red);
    --color-primary-hover: var(--np-red2);
    --color-primary-active: var(--np-red2);
    --color-primary-soft: var(--np-tint);
    --color-border: var(--np-ink);
    --color-border-strong: var(--np-ink);
    --color-success: var(--np-basil);
    --color-success-bg: var(--np-basil-s);
    --color-error: var(--np-bad);
    --color-error-bg: var(--np-bad-bg);
    --footer-bg: var(--np-ink);
    --footer-text: var(--np-cream);
    --footer-muted: #d9c9b3;
    --bt-orange: var(--np-red);
    --bt-orange-dark: var(--np-red2);
    --radius-sm: 8px;
    --radius-md: var(--np-r3);
    --radius-lg: var(--np-r2);
    --radius-xl: var(--np-r1);
    --shadow-card: var(--np-sh);
    --shadow-elevated: var(--np-sh-lg);
    --shadow-hover: var(--np-sh-lg);
    --red: var(--np-red);
    --red-dark: var(--np-red2);
    --text: var(--np-ink);
    --muted: var(--np-mute);
    --border: var(--np-ink);
    --card: var(--np-paper);
    --bg: var(--np-cream);
}

html, body { overflow-x: clip; }
body.np {
    background: var(--np-cream);
    color: var(--np-ink);
    font: 500 15.5px/1.45 var(--np-fd);
    -webkit-font-smoothing: antialiased;
    min-height: 100svh;
}
body.np.np-lock { overflow: hidden; }
.np h1, .np h2, .np h3, .np h4 { font-family: var(--np-fd); color: var(--np-ink); letter-spacing: -.02em; }
:where(.np) a { color: inherit; }
.np :focus-visible { outline: 3px solid var(--np-ink); outline-offset: 3px; }
.np .np-hd :focus-visible, .np .np-ft :focus-visible, .np .np-drawer :focus-visible, .np .np-hero :focus-visible { outline-color: var(--np-sun); }
.np .np-hero .np-pzf :focus-visible, .np .np-hero .np-btn:focus-visible { outline-color: var(--np-ink); }
.np input, .np select, .np textarea, .np button { font-family: inherit; }
.np [data-cart-count][data-zero="1"] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.np-skip { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--np-sun); color: var(--np-ink); border: 2px solid var(--np-ink); border-radius: 99px; padding: 10px 18px; font-weight: 800; }
.np-skip:focus { top: 10px; }
.np-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.np-icon { flex: none; }

/* ---------- header ---------- */
.np-hd { background: var(--np-ink); color: var(--np-cream); border-bottom: 2px solid var(--np-ink); z-index: 100; }
.np-hd--sticky { position: sticky; top: 0; }
.np-hd__in { display: flex; align-items: center; gap: 10px; height: 62px; }
.np-brand { display: flex; align-items: center; gap: 10px; font: 800 18px/1 var(--np-fd); letter-spacing: -.02em; min-width: 0; }
.np-brand img { height: 38px; width: auto; max-width: 200px; display: block; }
.np-brand__text { font: 800 20px/1 var(--np-fd); color: var(--np-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.np-nav { display: none; gap: 4px; margin-left: 18px; }
.np-nav a { padding: 8px 14px; border-radius: 99px; font-weight: 700; font-size: 15px; color: var(--np-cream); }
.np-nav a.on, .np-nav a:hover { background: var(--np-cream); color: var(--np-ink); }
.np-hd__sp { flex: 1; }
.np-lang { display: none; gap: 2px; font-weight: 800; font-size: 12.5px; }
.np-lang--mobile { display: flex; }
.np-lang a { padding: 5px 8px; border-radius: 7px; color: #f3e6d0; min-width: 32px; text-align: center; }
.np-lang a.on { background: var(--np-cream); color: var(--np-ink); }
.np-lang a:hover:not(.on) { text-decoration: underline; }
.np-ib { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--np-cream); color: var(--np-ink); border: 2px solid var(--np-cream); cursor: pointer; }
.np-ib:hover { background: var(--np-sun); border-color: var(--np-sun); }
.np-ib b, .np-bn__c b { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; border-radius: 99px; background: var(--np-red); color: #fff; border: 2px solid var(--np-ink); font: 800 11px/17px var(--np-fd); text-align: center; padding: 0 4px; }
.np-ib--account { display: none; }

/* ---------- drawer ---------- */
.np-drawer { position: fixed; inset: 0; z-index: 400; background: rgba(27, 20, 16, .55); }
.np-drawer[hidden] { display: none; }
.np-drawer nav { position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 88vw); background: var(--np-cream); border-left: 2px solid var(--np-ink); padding: 18px 20px; display: grid; gap: 6px; align-content: start; overflow-y: auto; }
.np-drawer a { padding: 12px 14px; border-radius: 12px; font: 800 20px var(--np-fd); }
.np-drawer a:hover, .np-drawer a.on { background: var(--np-ink); color: var(--np-cream); }
.np-drawer__close { justify-self: end; background: var(--np-ink); color: var(--np-cream); border-color: var(--np-ink); }
.np-drawer__close:hover { background: var(--np-red); border-color: var(--np-ink); }
.np-lang--drawer { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px; border-top: 2px dashed var(--np-line); margin-top: 8px; }
.np-lang--drawer a { font: 800 14px var(--np-fd); color: var(--np-ink); border: 2px solid var(--np-ink); padding: 8px 14px; border-radius: 99px; }
.np-lang--drawer a.on { background: var(--np-ink); color: var(--np-cream); }

/* ---------- bottom navigation, pay strip, cart bar ---------- */
.np-bn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--np-paper); border-top: 2px solid var(--np-ink); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); min-height: calc(64px + env(safe-area-inset-bottom)); }
.np-bn a { display: grid; justify-items: center; align-content: center; gap: 2px; font-size: 11.5px; font-weight: 800; color: var(--np-mute); border-radius: 12px; position: relative; min-width: 0; padding: 2px 0; text-align: center; }
.np-bn a.on { color: var(--np-red); }
.np-bn__fab { color: #fff !important; }
.np-bn__c { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--np-red); color: #fff; border: 2px solid var(--np-ink); box-shadow: 2px 2px 0 var(--np-ink); margin-top: -22px; }
.np-paystrip { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 85; background: var(--np-sun); color: var(--np-ink); border-top: 2px solid var(--np-ink); text-align: center; font-weight: 800; font-size: 13px; padding: 5px 8px; }
.np-cbar { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translate(-50%, 220%); width: calc(100% - 24px); max-width: 520px; z-index: 88; transition: transform .35s var(--np-ease); }
.np-has-strip .np-cbar { bottom: calc(106px + env(safe-area-inset-bottom)); }
.np-cbar.show { transform: translate(-50%, 0); }
.np-cbar a { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 20px; border-radius: 99px; background: var(--np-ink); color: var(--np-cream); font-weight: 800; box-shadow: 0 10px 24px -10px #000; }
.np-cbar__n { flex: 1; }
.np-cbar__go { width: 40px; height: 40px; border-radius: 50%; background: var(--np-sun); color: var(--np-ink); display: grid; place-items: center; }
body.np .toast-container { z-index: 500; }

/* ---------- footer ---------- */
.np-ft { background: var(--np-ink); color: var(--np-cream); padding: 32px 0 30px; margin-top: 44px; }
.np-ft__in { display: grid; gap: 22px; }
.np-ft h2 { font: 800 13px var(--np-fd); text-transform: uppercase; letter-spacing: .08em; color: var(--np-sun); margin-bottom: 8px; }
.np-ft a { color: var(--np-cream); opacity: .9; }
.np-ft a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 55.99rem) { .np-ft--task-page { display: none; } }
.np-ft__brand img { height: 56px; width: auto; display: block; }
.np-ft__brand p { margin-top: 10px; color: #e9dcc8; max-width: 34ch; }
.np-ft__l { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.np-ft__addr { font-style: normal; display: grid; gap: 4px; }
.np-ft__pay { margin-top: 10px; font-size: 13px; color: #e9dcc8; }
.np-ft__bottom { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 244, 224, .25); display: grid; gap: 8px; font-size: 13px; color: #e9dcc8; }
.np-ft__legal { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.np-ft__legal a { text-decoration: underline; text-underline-offset: 3px; }
.np-ft__bottom small { font-size: 12.5px; }
body.np-has-strip .np-ft { padding-bottom: 130px; }
body.np .np-ft { padding-bottom: 120px; }

/* ---------- notices ---------- */
.np-announcement { background: var(--np-sun) !important; color: var(--np-ink) !important; border-bottom: 2px solid var(--np-ink); font-weight: 800; }
.np-notice { padding: 12px 14px; border-radius: 14px; border: 2px solid var(--np-ink); background: var(--np-sun); font-weight: 700; font-size: 14.5px; }
.np-notice--warn { margin-top: 10px; }
.np-notice--table { margin: 0; border-radius: 0; border-width: 0 0 2px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.np-notice--table form { display: inline; }
body.np .flash { max-width: 1048px; margin: 12px auto 0; padding: 12px 16px; border: 2px solid var(--np-ink); border-radius: 14px; font-weight: 700; }
body.np .flash--ok { background: var(--np-basil-s); color: var(--np-ink); }
body.np .flash--err { background: var(--np-bad-bg); color: var(--np-ink); }

/* ---------- primitives ---------- */
.np-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 99px; background: var(--np-red); color: #fff; border: 2px solid var(--np-ink); box-shadow: var(--np-sh); font: 800 16px var(--np-fd); text-align: center; transition: transform .12s, box-shadow .12s; cursor: pointer; text-decoration: none; }
.np-btn:hover { background: var(--np-red2); }
.np-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--np-ink); }
.np-btn[disabled], .np-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.np-btn--alt { background: var(--np-paper); color: var(--np-ink); }
.np-btn--alt:hover { background: var(--np-tint); }
.np-btn--ink { background: var(--np-ink); color: var(--np-cream); }
.np-btn--sun { background: var(--np-sun); color: var(--np-ink); }
.np-btn--sun:hover { background: #ffd35c; }
.np-btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; }
.np-btn--block { display: flex; width: 100%; }
.np-lk { color: var(--np-red2); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.np-card { background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r1); padding: 18px; box-shadow: var(--np-sh); }
.np-card--flat { box-shadow: none; }
.np-tag { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 11px; border-radius: 99px; border: 2px solid var(--np-ink); background: var(--np-sun); color: var(--np-ink); }
.np-tag--paper { background: var(--np-paper); }
.np-title { font: 800 clamp(34px, 8vw, 54px)/.98 var(--np-fd); letter-spacing: -.045em; }
.np-title i { font: italic 400 1.04em var(--np-fi); letter-spacing: -.02em; color: var(--np-red); }
.np-ph0 { font: italic 400 44px var(--np-fi); color: var(--np-ink); display: grid; place-items: center; width: 100%; height: 100%; background: var(--np-sun); }
.np-ph0--big { font-size: 140px; }
.np-sec { margin-top: 38px; }
.np-sh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.np-sh h2 { font: 800 28px/1 var(--np-fd); letter-spacing: -.03em; }
.np-sh .np-lk { margin-left: auto; font-size: 14px; }
.np-empty { text-align: center; padding: 40px 16px; color: var(--np-ink2); font-weight: 700; }
.np-back { display: inline-block; font-weight: 800; color: var(--np-red2); margin-bottom: 8px; }
.np-ph { padding: 22px 0 14px; }
.np-ph p { color: var(--np-mute); margin-top: 6px; }
.np-age { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; border: 2px solid var(--np-ink); background: var(--np-bad-bg); color: var(--np-bad); font-size: 11px; font-weight: 800; }

/* ---------- home ---------- */
.np-home { padding-bottom: 20px; }
.np-hero { background: var(--np-red); color: #fff; position: relative; overflow: hidden; padding-bottom: 70px; }
.np-hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 44px; background: var(--np-cream); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.np-hero__in { display: grid; gap: 10px; padding-top: 26px; position: relative; z-index: 2; }
.np-hero .np-title { color: #fff; margin: 14px 0 8px; }
.np-hero .np-title i { color: var(--np-sun); }
.np-lead { max-width: 34ch; font-size: 17px; }
.np-pzf { background: var(--np-paper); color: var(--np-ink); border: 2px solid var(--np-ink); border-radius: var(--np-r1); padding: 16px; box-shadow: 4px 4px 0 var(--np-ink); margin-top: 18px; max-width: 460px; }
.np-pzf label { font-weight: 800; display: block; margin-bottom: 8px; }
.np-pzf__r { display: flex; gap: 10px; }
.np-pzf input { flex: 1; min-width: 0; height: 52px; border: 2px solid var(--np-ink); border-radius: 99px; padding: 0 18px; font-weight: 700; background: #fff; color: var(--np-ink); outline: 0; }
.np-pzf input:focus { box-shadow: 3px 3px 0 var(--np-sun); }
.np-pzf .np-btn { box-shadow: 2px 2px 0 var(--np-ink); }
.np-res { margin-top: 10px; font-weight: 700; font-size: 14.5px; min-height: 0; }
.np-res:empty { display: none; }
.np-res.ok { color: var(--np-basil); }
.np-res.bad { color: var(--np-bad); }
.np-res a { color: var(--np-red2); }
.np-skiplink { display: inline-block; color: #fff; margin-top: 12px; font-size: 14.5px; }
.np-hero__cta { margin-top: 18px; }
.np-plate { position: relative; justify-self: center; width: min(70vw, 320px); margin-top: 10px; }
.np-plate__disc { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--np-ink); box-shadow: 8px 12px 0 rgba(0, 0, 0, .3); transform: rotate(12deg); background: var(--np-sun); display: grid; place-items: center; }
.np-plate__disc img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.np-plate__disc .np-plate__logo { object-fit: contain; transform: none; padding: 14%; }
.np-perks { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: -10px; position: relative; z-index: 3; }
.np-perks > div { background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r2); padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; box-shadow: 2px 2px 0 var(--np-ink); }
.np-perks svg { grid-row: 1 / 3; }
.np-perks span { color: var(--np-mute); font-size: 14px; }
.np-hs { display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 14px; margin: 0 -16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.np-hs::-webkit-scrollbar { display: none; }
/* Carousel controls: round arrows next to the section link, a fade where more cards wait, and a pill row showing which page you are on. */
.np-hs-nav { display: flex; gap: 8px; align-self: center; }
.np-hs-nav[hidden], .np-hs-dots[hidden] { display: none; }
.np-hs-arrow { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 2px solid var(--np-ink); border-radius: 50%; background: var(--np-paper, #fff); color: var(--np-ink); cursor: pointer; box-shadow: 0 3px 0 var(--np-ink); transition: transform .12s, box-shadow .12s, background .12s; }
.np-hs-arrow:hover:not(:disabled) { background: var(--np-sun); transform: translateY(-1px); box-shadow: 0 4px 0 var(--np-ink); }
.np-hs-arrow:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--np-ink); }
.np-hs-arrow:focus-visible, .np-hs-dots button:focus-visible, .np-hs:focus-visible { outline: 3px solid var(--np-red); outline-offset: 3px; }
.np-hs-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.np-hs-wrap { position: relative; }
.np-hs-wrap::before, .np-hs-wrap::after { content: ""; position: absolute; top: 0; bottom: 34px; width: 36px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; }
.np-hs-wrap::before { left: -16px; background: linear-gradient(90deg, var(--np-cream, #faf3e8), rgba(250, 243, 232, 0)); }
.np-hs-wrap::after { right: -16px; background: linear-gradient(270deg, var(--np-cream, #faf3e8), rgba(250, 243, 232, 0)); }
.np-hs-wrap.has-more-left::before, .np-hs-wrap.has-more-right::after { opacity: 1; }
.np-hs-dots { display: flex; justify-content: center; gap: 7px; margin-top: 2px; }
.np-hs-dots button { width: 10px; height: 10px; padding: 0; border: 2px solid var(--np-ink); border-radius: 999px; background: transparent; cursor: pointer; transition: width .2s, background .2s; }
.np-hs-dots button:hover { background: var(--np-sun); }
.np-hs-dots button.is-on { width: 30px; background: var(--np-red); }
@media (max-width: 40rem) { .np-hs-arrow { width: 38px; height: 38px; } .np-hs-wrap::before, .np-hs-wrap::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .np-hs-arrow, .np-hs-dots button { transition: none; } }

.np-fc { flex: none; width: 250px; scroll-snap-align: start; background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r1); overflow: hidden; box-shadow: var(--np-sh); display: block; }
.np-fc__im { aspect-ratio: 1.2; overflow: hidden; border-bottom: 2px solid var(--np-ink); background: var(--np-sun); }
.np-fc__im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-fc__b { padding: 12px 14px 14px; display: grid; gap: 4px; }
.np-fc__b > b { font: 800 18px/1.1 var(--np-fd); }
.np-fc__b small { color: var(--np-mute); font-size: 13px; line-height: 1.35; min-height: 35px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-fc__f { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-weight: 800; gap: 8px; }
.np-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; padding: 0; }
.np-steps .np-card { padding: 14px; }
.np-n { width: 34px; height: 34px; border-radius: 50%; background: var(--np-sun); border: 2px solid var(--np-ink); display: grid; place-items: center; font-weight: 800; margin-bottom: 8px; }
.np-steps h3 { margin-bottom: 4px; font-size: 18px; line-height: 1.2; }
.np-steps p { color: var(--np-mute); font-size: 14px; }
.np-info { display: grid; gap: 16px; }
.np-info h3 { margin-bottom: 6px; font-size: 20px; line-height: 1.2; }
.np-info a:not(.np-lk) { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- menu ---------- */
.np-srch { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border: 2px solid var(--np-ink); border-radius: 99px; background: #fff; box-shadow: var(--np-sh); }
.np-srch input { flex: 1; border: 0; outline: 0; background: none; font-weight: 700; min-width: 0; color: var(--np-ink); font-size: 16px; }
.np-srch:focus-within { box-shadow: 3px 3px 0 var(--np-sun), 3px 3px 0 2px var(--np-ink); }
.np-tabs { position: sticky; top: 62px; z-index: 30; background: var(--np-cream); border-bottom: 2px solid var(--np-ink); margin-top: 14px; }
.np-ts { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.np-ts::-webkit-scrollbar { display: none; }
.np-ts a { flex: none; padding: 9px 16px; border-radius: 99px; border: 2px solid var(--np-ink); background: var(--np-paper); font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.np-ts a em { font-style: normal; opacity: .65; margin-left: 4px; }
.np-ts a.on { background: var(--np-ink); color: var(--np-cream); }
.np-ts a:hover:not(.on) { background: var(--np-tint); }
.np-msec { padding-top: 26px; scroll-margin-top: 130px; }
.np-msec h2 { font: 800 32px/1 var(--np-fd); letter-spacing: -.04em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.np-msec h2 small { font: 600 14px var(--np-fd); color: var(--np-mute); letter-spacing: 0; }
.np-plist { display: grid; gap: 12px; margin-top: 14px; }
.np-prow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r1); box-shadow: var(--np-sh); position: relative; }
.np-prow.is-soldout { opacity: .78; }
.np-prow__im { width: 96px; height: 96px; border-radius: 14px; overflow: hidden; border: 2px solid var(--np-ink); background: var(--np-sun); display: grid; place-items: center; }
.np-prow__im img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.np-prow__t { min-width: 0; }
.np-prow__t > a b { display: block; font: 800 18px/1.15 var(--np-fd); letter-spacing: -.02em; }
.np-prow__t > a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.np-prow__t small { display: block; color: var(--np-mute); font-size: 13.5px; line-height: 1.35; margin: 3px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.np-prow__pr { font-weight: 800; color: var(--np-red2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.np-prow__rating { color: var(--np-ink2); font-size: 12.5px; }
.np-prow__act { display: flex; align-items: center; }
.np-prow .bt-quickadd, .np-add { width: 46px; height: 46px; border-radius: 50%; background: var(--np-red); color: #fff; border: 2px solid var(--np-ink); box-shadow: 2px 2px 0 var(--np-ink); display: grid; place-items: center; cursor: pointer; padding: 0; font: 800 24px var(--np-fd); }
.np-prow .bt-quickadd:active { transform: translate(2px, 2px); box-shadow: none; }
.np-prow .bt-stepper { display: inline-flex; align-items: center; border: 2px solid var(--np-ink); border-radius: 99px; background: #fff; height: 44px; }
.np-prow .bt-stepper__btn { width: 38px; height: 38px; border-radius: 50%; color: var(--np-ink); display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; }
.np-prow .bt-stepper__btn:hover { background: var(--np-sun); }
.np-prow .bt-stepper__qty { min-width: 24px; text-align: center; font-weight: 800; }
.np-origin { margin-top: 30px; text-align: center; font-size: 14px; }
.np-origin a { color: var(--np-red2); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.sf-soldout-tag { display: inline-block; padding: 5px 11px; border-radius: 99px; border: 2px solid var(--np-ink); background: var(--np-bad-bg); color: var(--np-bad); font-weight: 800; font-size: 12.5px; text-transform: uppercase; }

/* ---------- desktop ---------- */
@media (min-width: 56rem) {
    .np-nav { display: flex; }
    .np-lang { display: flex; }
    .np-ib--account { display: grid; }
    .np-ib--menu { display: none; }
    .np-bn, .np-paystrip { display: none; }
    .np-cbar { bottom: 20px; }
    .np-ft { padding-bottom: 36px; margin-top: 56px; }
    body.np .np-ft, body.np-has-strip .np-ft { padding-bottom: 36px; }
    .np-ft__in { grid-template-columns: 2fr 1fr 1fr; }
    .np-brand img { height: 44px; }
    .np-hero__in { grid-template-columns: 1.1fr .9fr; align-items: center; padding-top: 44px; padding-bottom: 30px; }
    .np-perks { grid-template-columns: repeat(3, 1fr); }
    .np-steps { grid-template-columns: repeat(4, 1fr); }
    .np-info { grid-template-columns: 1fr 1fr; }
    .np-plist { grid-template-columns: 1fr 1fr; }
    .np-plate { width: min(100%, 380px); }
}
@media (max-width: 55.99rem) {
    body.np { padding-bottom: 0; }
    body.np .np-ft { padding-bottom: 130px; }
}
@media (prefers-reduced-motion: reduce) {
    .np *, .np *::before, .np *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ---------- shared shopfront partials (badges, price, filters, gallery, note, removals) in the Napoli look ---------- */
.np .sf-badge { border: 2px solid var(--np-ink); background: var(--np-paper); color: var(--np-ink); font-size: 11.5px; padding: 1px 9px; }
.np .sf-badge--bestseller { background: var(--np-sun); color: var(--np-ink); border-color: var(--np-ink); }
.np .sf-badge--new, .np .sf-badge--vegetarian, .np .sf-badge--vegan { background: var(--np-basil-s); color: var(--np-ink); border-color: var(--np-ink); }
.np .sf-badge--spicy { background: var(--np-bad-bg); color: var(--np-bad); border-color: var(--np-ink); }
.np .sf-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.np .sf-price__from { flex-basis: auto; font-size: 12.5px; font-weight: 700; color: var(--np-mute); }
.np .sf-price__old { color: var(--np-mute); }
.np .sf-off { background: var(--np-bad); border: 2px solid var(--np-ink); border-radius: 99px; padding: 0 8px; }
.np .sf-soldout-banner { border: 2px solid var(--np-ink); border-radius: 14px; background: var(--np-bad-bg); color: var(--np-ink); }
.np .sf-soldout-banner strong { color: var(--np-bad); }
.np .sf-soldout-tag { border: 2px solid var(--np-ink); background: var(--np-bad-bg); color: var(--np-bad); }
.np .bt-row.is-soldout .bt-row__name { color: var(--np-mute); }
.np .sf-gallery__thumb { border: 2px solid var(--np-ink); border-radius: 12px; background: var(--np-sun); }
.np .sf-gallery__thumb[aria-current="true"] { box-shadow: 2px 2px 0 var(--np-ink); background: var(--np-sun); outline: 2px solid var(--np-red); outline-offset: 1px; }
.np .sf-removals .sf-chip { border: 2px solid var(--np-ink); background: #fff; color: var(--np-ink); font-weight: 800; }
.np .sf-removals .sf-chip[aria-pressed="true"] { background: var(--np-bad-bg); border-color: var(--np-ink); color: var(--np-bad); }
.np .sf-removals__help { color: var(--np-mute); }
.np .sf-note textarea { border: 2px solid var(--np-ink); border-radius: 14px; background: #fff; color: var(--np-ink); }
.np .sf-note textarea:focus { outline: 0; box-shadow: 3px 3px 0 var(--np-sun); }
.np .sf-note label small, .np .sf-note__count { color: var(--np-mute); }
.np .sf-filters { margin: 14px 0 6px; }
.np .sf-filters__search, .np .sf-filters__sort { height: 46px; border: 2px solid var(--np-ink); border-radius: 99px; background: #fff; color: var(--np-ink); font-weight: 700; padding: 0 16px; }
.np .sf-filters__sort { padding-right: 10px; }
.np .sf-chip-check span { border: 2px solid var(--np-ink); background: var(--np-paper); color: var(--np-ink); font-weight: 800; min-height: 40px; padding: 0 16px; }
.np .sf-chip-check input:checked + span { background: var(--np-ink); border-color: var(--np-ink); color: var(--np-cream); }
.np .sf-chip-check input:focus-visible + span { outline: 3px solid var(--np-ink); outline-offset: 2px; }
.np .sf-filters__apply { height: 46px; border-radius: 99px; background: var(--np-red); color: #fff; border: 2px solid var(--np-ink); box-shadow: 2px 2px 0 var(--np-ink); padding: 0 20px; }
.np .sf-filters__note, .np .sf-filters__empty { color: var(--np-mute); }
@media (max-width: 600px) { .np .sf-filters__sort { flex: 1 1 100%; } }


/* ---------- product page ---------- */
.npp-page { padding: 16px 0 140px; }
.npp-shell { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.npp-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.npp-back { color: var(--np-red2); font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.npp-favorite { width: 44px; height: 44px; border: 2px solid var(--np-ink); border-radius: 50%; background: var(--np-paper); color: var(--np-red); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 2px 2px 0 var(--np-ink); display: grid; place-items: center; }
.npp-favorite:hover { background: var(--np-sun); }
.npp-hero { padding: 0; }
.npp-food-stage { position: relative; }
.npp-food-image { aspect-ratio: 1; border-radius: var(--np-r1); overflow: hidden; border: 2px solid var(--np-ink); box-shadow: var(--np-sh-lg); background: var(--np-sun); display: grid; place-items: center; }
.npp-food-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The photo is shown whole (never cropped); the frame behind it is a blurred copy of the same photo, and the photo itself floats on a soft shadow. */
.npp-food-image { position: relative; isolation: isolate; max-height: max(300px, calc(100vh - 300px)); }
.npp-food-image::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--photo) center / cover no-repeat; filter: blur(22px) saturate(1.15); opacity: .9; }
.npp-food-image::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; box-shadow: inset 0 0 48px rgba(26, 24, 23, .28), inset 0 -26px 40px -26px rgba(26, 24, 23, .4); }
.npp-food-image img { position: relative; z-index: 1; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; border-radius: 14px; filter: drop-shadow(0 14px 18px rgba(26, 24, 23, .38)) drop-shadow(0 3px 4px rgba(26, 24, 23, .25)); }
.npp-hero__sizes { margin-top: 26px; }
.npp-hero__sizes .npp-choice-card { margin-top: 0; }
.npp-intro { padding: 22px 0 6px; }
.npp-intro__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.npp-category { display: inline-flex; padding: 4px 11px; border-radius: 99px; background: var(--np-sun); border: 2px solid var(--np-ink); color: var(--np-ink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.npp-intro h1 { margin: 10px 0 0; font: 800 clamp(28px, 6vw, 42px)/1 var(--np-fd); letter-spacing: -.04em; }
.npp-price { text-align: right; white-space: nowrap; padding-top: 6px; }
.npp-price strong { color: var(--np-red2); font: 800 30px/1.1 var(--np-fd); }
.npp-price em { font-style: normal; color: var(--np-mute); font-size: 14px; font-weight: 800; margin-left: 4px; }
.npp-description { max-width: 60ch; margin: 12px 0 0; color: var(--np-ink2); font-size: 15.5px; line-height: 1.6; }
.npp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.npp-meta > span { padding: 6px 12px; border-radius: 99px; background: #fff; border: 2px solid var(--np-ink); color: var(--np-ink); font-size: 12.5px; font-weight: 700; }
.npp-rating { color: var(--np-ink) !important; }
.npp-rating small { color: var(--np-mute); }
.npp-info-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0; }
.npp-info-card, .npp-choice-card, .npp-quantity-card, .npp-reviews { background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r1); padding: 18px; box-shadow: var(--np-sh); }
.npp-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.npp-section-title h2 { margin: 0; font: 800 20px/1.1 var(--np-fd); letter-spacing: -.02em; }
.npp-section-title small { display: block; margin-top: 4px; color: var(--np-mute); font-size: 13px; }
.npp-section-title > b, .npp-section-title > span { font: 800 12px var(--np-fd); text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 99px; background: var(--np-paper); border: 2px solid var(--np-ink); white-space: nowrap; color: var(--np-ink); }
.npp-section-title > b { background: var(--np-bad-bg); color: var(--np-bad); }
.npp-section-title__heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.npp-nutrition { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.npp-nutrition div { padding: 9px 10px; border-radius: 12px; background: #fff; border: 2px solid var(--np-line); }
.npp-nutrition small { display: block; color: var(--np-mute); font-size: 12px; }
.npp-nutrition strong { display: block; margin-top: 2px; font-size: 15px; }
.npp-allergens { display: flex; flex-wrap: wrap; gap: 7px; }
.npp-allergens span { padding: 6px 11px; border-radius: 99px; background: var(--np-sun); border: 2px solid var(--np-ink); color: var(--np-ink); font-size: 12.5px; font-weight: 800; }
.npp-allergen-note { display: flex; justify-content: flex-end; margin-top: 9px; }
.npp-kitchen-note { position: relative; }
.npp-kitchen-note summary { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--np-ink); border-radius: 50%; background: #fff; color: var(--np-ink); font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; list-style: none; }
.npp-kitchen-note summary::-webkit-details-marker { display: none; }
.npp-kitchen-note__tooltip { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(320px, calc(100vw - 60px)); padding: 12px; border: 2px solid var(--np-ink); border-radius: 14px; background: #fff; box-shadow: var(--np-sh); font-size: 13px; line-height: 1.5; color: var(--np-ink2); }
.npp-configurator { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.npp-size-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.npp-size, .npp-option, .npp-option-row { font: inherit; }
.npp-size { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 13px; min-height: 58px; border: 2px solid var(--np-ink); border-radius: 14px; background: #fff; color: var(--np-ink); text-align: left; cursor: pointer; }
.npp-size:hover { background: var(--np-tint); }
.npp-size.active { background: var(--np-sun); box-shadow: 2px 2px 0 var(--np-ink); }
.npp-size span { font-size: 15px; font-weight: 800; }
.npp-size strong { font-size: 13px; color: var(--np-red2); }
.npp-options { display: grid; gap: 8px; }
.npp-options--radio, .npp-options--check, .npp-options--stepper { grid-template-columns: 1fr; }
.npp-option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; border: 2px solid var(--np-ink); border-radius: 14px; background: #fff; color: var(--np-ink); text-align: left; cursor: pointer; width: 100%; }
.npp-option:hover { background: var(--np-tint); }
.npp-option.selected { background: var(--np-sun); box-shadow: 2px 2px 0 var(--np-ink); }
.npp-option > span:first-child { min-width: 0; font-size: 15px; font-weight: 700; flex: 1; }
.npp-option small { color: var(--np-red2); font-size: 13px; font-weight: 800; white-space: nowrap; }
.npp-check { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--np-ink); border-radius: 8px; background: #fff; color: transparent; font-size: 14px; flex: none; }
.npp-options--radio .npp-check { border-radius: 50%; }
.npp-option.selected .npp-check { background: var(--np-ink); color: var(--np-cream); }
.npp-option-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; min-height: 58px; border: 2px solid var(--np-ink); border-radius: 14px; background: #fff; }
.npp-option-row.selected { background: var(--np-sun); box-shadow: 2px 2px 0 var(--np-ink); }
.npp-option-row strong { display: block; font-size: 15px; }
.npp-option-row small { display: block; margin-top: 2px; color: var(--np-red2); font-size: 13px; font-weight: 800; }
.npp-stepper { display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--np-ink); border-radius: 99px; background: #fff; height: 44px; padding: 0 2px; flex: none; }
.npp-stepper button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--np-ink); font: 800 20px var(--np-fd); cursor: pointer; line-height: 1; }
.npp-stepper button:hover:not(:disabled) { background: var(--np-sun); }
.npp-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.npp-stepper span { min-width: 24px; text-align: center; font-weight: 800; }
.npp-stepper--large { height: 48px; }
.npp-quota { padding: 4px 10px; border-radius: 99px; background: var(--np-paper); color: var(--np-ink); border: 2px solid var(--np-ink); font-size: 12px; white-space: nowrap; font-weight: 800; }
.npp-quota.ok { background: var(--np-basil-s); color: var(--np-ink); }
.npp-quota.required { background: var(--np-bad-bg); color: var(--np-bad); border-color: var(--np-bad); }
.npp-quota.over { background: var(--np-sun); color: var(--np-ink); }
@keyframes nppPulse { 50% { transform: scale(1.08); } }
.npp-quantity-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.npp-quantity-card strong, .npp-quantity-card small { display: block; }
.npp-quantity-card small { margin-top: 4px; color: var(--np-mute); font-size: 13px; }
.npp-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-radius: var(--np-r1); background: var(--np-ink); color: var(--np-cream); border: 2px solid var(--np-ink); box-shadow: var(--np-sh); }
.npp-total small { display: block; color: #e9dcc8; font-size: 12.5px; }
.npp-total strong { display: block; margin-top: 2px; font-size: 26px; color: #fff; }
.npp-total button { min-height: 52px; padding: 0 24px; border: 2px solid var(--np-cream); border-radius: 99px; background: var(--np-red); color: #fff; font: 800 16px var(--np-fd); cursor: pointer; }
.npp-total button:hover { background: var(--np-red2); }
.npp-price-details { display: flex; justify-content: flex-end; gap: 15px; color: var(--np-mute); font-size: 12.5px; flex-wrap: wrap; }
.npp-price-details span { display: flex; gap: 4px; }
.npp-price-details b { color: var(--np-ink2); }
.npp-recommendations { margin-top: 26px; }
.npp-recommendation-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.npp-recommendation { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border: 2px solid var(--np-ink); border-radius: var(--np-r2); background: var(--np-paper); color: inherit; box-shadow: 2px 2px 0 var(--np-ink); }
.npp-recommendation:hover { background: var(--np-tint); }
.npp-recommendation img, .npp-recommendation > span { width: 64px; height: 64px; border-radius: 12px; border: 2px solid var(--np-ink); object-fit: cover; background: var(--np-sun); display: grid; place-items: center; font-size: 28px; flex: none; }
.npp-recommendation div { min-width: 0; }
.npp-recommendation strong, .npp-recommendation b { display: block; }
.npp-recommendation strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.npp-recommendation b { margin-top: 4px; color: var(--np-red2); font-size: 14px; }
.npp-recommendation i { margin-left: auto; color: var(--np-red2); font-size: 24px; font-style: normal; }
.npp-reviews { margin-top: 22px; }
.npp-reviews article { padding: 12px 0; border-bottom: 2px dashed var(--np-line); }
.npp-reviews article:last-child { border-bottom: 0; }
.npp-reviews p { margin: 5px 0 0; color: var(--np-ink2); font-size: 14px; }
.npp-sticky-cta { display: none; }
.npp-choice-card .sf-note label { color: var(--np-ink); }

@media (max-width: 55.99rem) {
    .npp-total, .npp-price-details { display: none; }
    .npp-sticky-cta { position: fixed; display: flex; align-items: center; gap: 10px; left: 0; right: 0; bottom: 0; z-index: 96; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--np-paper); border-top: 2px solid var(--np-ink); }
    .npp-sticky-add { display: flex; align-items: center; justify-content: space-between; flex: 1; min-height: 52px; padding: 0 22px; border: 2px solid var(--np-ink); border-radius: 99px; background: var(--np-red); color: #fff; box-shadow: var(--np-sh); font: 800 16px var(--np-fd); cursor: pointer; }
    .npp-sticky-add:hover { background: var(--np-red2); }
    .npp-sticky-add:active { transform: translate(3px, 3px); box-shadow: none; }
    body:has(.npp-sticky-cta) .np-bn, body:has(.npp-sticky-cta) .np-paystrip, body:has(.npp-sticky-cta) .np-cbar { display: none; }
    body:has(.npp-sticky-cta) .np-ft { padding-bottom: 110px; }
}
@media (max-width: 480px) {
    /* Sizes stay three across on a phone: compact cards instead of wrapping to a second row. */
    .npp-size-list, .npp-hero__sizes .npp-size-list, .npp-size-links .npp-size-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .npp-size { padding: 9px 8px; min-height: 0; gap: 2px; border-radius: 12px; }
    .npp-size span { font-size: 13.5px; line-height: 1.15; overflow-wrap: anywhere; }
    .npp-size strong { font-size: 11.5px; line-height: 1.2; white-space: nowrap; }
    .npp-size.active { box-shadow: 1px 1px 0 var(--np-ink); }
}
@media (min-width: 56rem) {
    .npp-shell { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
    .npp-topline { grid-column: 1 / -1; }
    .npp-hero { grid-column: 1; grid-row: 2 / span 30; position: sticky; top: 84px; }
    .npp-shell > :not(.npp-topline):not(.npp-hero) { grid-column: 2; }
    .npp-intro { padding-top: 0; }
    .npp-page { padding-bottom: 60px; }
    .npp-recommendation-grid { grid-template-columns: 1fr 1fr; }
}

/* closer to the artwork: the category chip sits on the photo, the price under the name, option groups are plain sections */
.npp-category--on-photo { position: absolute; left: 12px; top: 12px; background: #fff; z-index: 2; }
.npp-intro__heading { flex-direction: column; gap: 4px; }
.npp-price { text-align: left; padding-top: 0; }
.npp-price strong { font-size: 30px; }
.npp-configurator .npp-choice-card, .npp-configurator .npp-quantity-card { background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 8px; }
.npp-configurator .npp-choice-card + .npp-choice-card { margin-top: 14px; }
.npp-configurator .npp-quantity-card { padding: 14px 16px; background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r1); box-shadow: var(--np-sh); }
.npp-configurator .npp-section-title h2 { font-size: 22px; }
.npp-gallery-wrap { margin-top: 10px; }


/* ---------- page helpers ---------- */
.np-page { padding: 26px 0 40px; min-height: 50vh; }
.np-wrap--wide { max-width: 1040px; }
.np-wrap--narrow { max-width: 780px; }
.np-center { text-align: center; margin: 18px 0 0; }
.np-btn--inline { display: inline-flex; padding: 0 22px; text-decoration: none; }
.np .container { max-width: 1080px; }
.np-card--pad { padding: 24px 20px; }
@media (min-width: 40rem) { .np-card--pad { padding: 32px; } }
.np-page--cart { padding-top: 0; min-height: 0; }
.np-bn-clear { height: 96px; }
.np-has-strip .np-bn-clear { height: 128px; }
@media (min-width: 56rem) { .np-bn-clear { display: none; } }
.np-404 { text-align: center; }
.np-404__code { display: inline-block; font: italic 400 clamp(72px, 22vw, 120px)/1 var(--np-fi); color: var(--np-red); }
.np-404 .np-title { font-size: clamp(28px, 7vw, 40px); margin: 6px 0 10px; }
.np-404 p { color: var(--np-ink2); margin-bottom: 14px; }
.np-404 .np-notice { display: inline-block; }
.np-404__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.np-prow--link { grid-template-columns: 72px minmax(0, 1fr); }
.np-prow--link .np-prow__im { width: 72px; height: 72px; }
.np-promos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 18px; }
.np-ft .origin-link { margin: 0 !important; text-align: left !important; font-size: inherit !important; }
.np-origin .origin-link a { color: var(--np-red2); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* toasts: a pill at the top of the screen, like the artwork */
.np .toast-container { top: max(14px, env(safe-area-inset-top)); bottom: auto; left: 12px; right: 12px; align-items: center; pointer-events: none; }
.np .toast { background: var(--np-ink); color: var(--np-cream); border: 2px solid var(--np-ink); border-radius: 99px; padding: 11px 18px; font-weight: 800; box-shadow: none; max-width: min(520px, 100%); text-align: center; justify-content: center; animation: npToast .3s var(--np-ease); }
.np .toast-error { background: var(--np-bad); color: #fff; border-left-width: 2px; }
.np .toast-success, .np .toast-info { border-left-width: 2px; }
@keyframes npToast { from { transform: translateY(-80px); opacity: 0; } to { transform: none; opacity: 1; } }


/* ---------- courier tip page ---------- */
.np-eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--np-red2); font-weight: 800; }
.np-muted { color: var(--np-mute); font-size: 14px; }
.np-error { padding: 12px 14px; border-radius: 14px; background: var(--np-bad-bg); border: 2px solid var(--np-ink); color: var(--np-bad); font-weight: 800; font-size: 14px; }
.np-tip { max-width: 580px; margin: 0 auto; padding: 28px 16px 50px; }
.np-tip__card { background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r1); padding: 28px 22px; box-shadow: var(--np-sh-lg); text-align: center; }
.np-tip__icon { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--np-sun); border: 2px solid var(--np-ink); box-shadow: 2px 2px 0 var(--np-ink); color: var(--np-red); font-size: 30px; }
.np-tip h1 { font: 800 clamp(28px, 7vw, 36px)/1 var(--np-fd); letter-spacing: -.04em; margin: 8px 0; }
.np-tip p { color: var(--np-ink2); font-size: 15px; }
.np-tip form { text-align: left; margin-top: 22px; }
.np-tip label { display: block; font-size: 14px; font-weight: 800; margin: 14px 0 6px; }
.np-tip input, .np-tip select { width: 100%; height: 52px; border: 2px solid var(--np-ink); border-radius: 14px; padding: 0 14px; font: inherit; font-weight: 600; background: #fff; color: var(--np-ink); }
.np-tip input:focus, .np-tip select:focus { outline: 0; box-shadow: 3px 3px 0 var(--np-sun); }
.np-tip__choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.np-tip__choices button { min-height: 48px; padding: 6px; border: 2px solid var(--np-ink); border-radius: 99px; background: var(--np-paper); color: var(--np-ink); font-weight: 800; cursor: pointer; }
.np-tip__choices button:hover { background: var(--np-sun); }
.np-tip__done { margin: 18px 0; padding: 14px; border-radius: 14px; background: var(--np-basil-s); border: 2px solid var(--np-ink); color: var(--np-ink); font-weight: 800; }
.np-tip__back { display: inline-block; margin-top: 20px; color: var(--np-red2); font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.np-tip .np-btn, .np-reservation .np-btn { margin-top: 22px; width: 100%; }

/* ---------- table reservation ---------- */
.np-reservation { max-width: 920px; margin: 0 auto; padding: 24px 16px 50px; }
.np-reservation__back { display: inline-block; color: var(--np-red2); font-size: 14px; font-weight: 800; margin-bottom: 14px; text-decoration: underline; text-underline-offset: 3px; }
.np-reservation__card { background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r1); padding: 24px 20px; box-shadow: var(--np-sh-lg); }
.np-reservation h1 { font: 800 clamp(30px, 7vw, 42px)/1 var(--np-fd); letter-spacing: -.04em; margin: 8px 0; }
.np-form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
.np-form-grid label { font-size: 14px; font-weight: 800; color: var(--np-ink); }
.np-form-grid input, .np-form-grid textarea { display: block; width: 100%; margin-top: 7px; min-height: 52px; padding: 12px 14px; border: 2px solid var(--np-ink); border-radius: 14px; font: inherit; font-weight: 600; background: #fff; color: var(--np-ink); }
.np-form-grid textarea { min-height: 96px; }
.np-form-grid input:focus, .np-form-grid textarea:focus { outline: 0; box-shadow: 3px 3px 0 var(--np-sun); }
.np-table-select, .np-wide { grid-column: 1 / -1; }
.np-table-select h2 { font: 800 20px/1.1 var(--np-fd); margin-bottom: 4px; }
.np-table-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.np-table { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 112px; border: 2px solid var(--np-ink); border-radius: var(--np-r2); background: var(--np-sun); cursor: pointer; text-align: center; padding: 8px; font-size: 15px; }
.np-table input { position: absolute; opacity: 0; pointer-events: none; }
.np-table:has(input:checked) { background: var(--np-red); color: #fff; box-shadow: 3px 3px 0 var(--np-ink); }
.np-table:has(input:checked) small, .np-table:has(input:checked) em { color: #fff; }
.np-table:has(input:focus-visible) { outline: 3px solid var(--np-ink); outline-offset: 3px; }
.np-table.is-busy, .np-table.is-small { background: #e9dcc0; border-style: dashed; color: var(--np-ink2); cursor: not-allowed; }
.np-table__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--np-basil); border: 2px solid var(--np-ink); margin-bottom: 7px; }
.np-table.is-busy .np-table__dot { background: var(--np-bad); }
.np-table small { color: var(--np-ink2); font-size: 12.5px; margin-top: 3px; }
.np-table em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--np-ink); margin-top: 5px; }
.np-table.is-busy em { color: var(--np-ink); }
.np-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; color: var(--np-ink2); font-size: 13px; }
.np-legend span { display: flex; align-items: center; gap: 6px; }
.np-legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--np-basil); border: 2px solid var(--np-ink); }
.np-legend span:last-child i { background: var(--np-bad); }
@media (min-width: 40rem) {
    .np-reservation__card { padding: 30px; }
    .np-form-grid { grid-template-columns: 1fr 1fr; }
    .np-table-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ---------- shared form and button components (checkout, account, auth pages) ---------- */
.np .btn { border-radius: 99px; font: 800 16px var(--np-fd); border: 2px solid var(--np-ink); box-shadow: var(--np-sh); min-height: 48px; transition: transform .12s, box-shadow .12s, background .12s; }
.np .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--np-ink); }
.np .btn-primary { background: var(--np-red); color: #fff; }
.np .btn-primary:hover { background: var(--np-red2); }
.np .btn-outline { background: var(--np-paper); color: var(--np-ink); border-color: var(--np-ink); }
.np .btn-outline:hover { background: var(--np-tint); }
.np .btn-sm { min-height: 40px; font-size: 14px; }
.np .btn[disabled] { opacity: .5; box-shadow: none; }
.np .form-label { font-size: 14px; font-weight: 800; color: var(--np-ink); }
.np .form-input, .np input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), .np select, .np textarea { font-family: var(--np-fd); }
.np .form-input { height: 52px; border: 2px solid var(--np-ink); border-radius: 14px; background: #fff; box-shadow: none; font-weight: 600; }
.np .form-input:focus { border-color: var(--np-ink); box-shadow: 3px 3px 0 var(--np-sun); }
.np .form-input.has-error, .np [aria-invalid="true"] { border-color: var(--np-bad); background: #fff1ee; }
.np .form-input::placeholder, .np input::placeholder, .np textarea::placeholder { color: var(--np-mute); opacity: 1; }
.np input[type=checkbox], .np input[type=radio] { accent-color: var(--np-red); }

/* ---------- checkout ---------- */
.np .checkout-progress__line { height: 2px; background: var(--np-ink); }
.np .checkout-progress__dot { border: 2px solid var(--np-ink); }
.np .mode-card { height: auto; min-height: 76px; border: 2px solid var(--np-ink); border-radius: 16px; background: #fff; box-shadow: none; }
.np .mode-card:hover { background: var(--np-tint); border-color: var(--np-ink); }
.np .mode-card.active { background: var(--np-sun); border-width: 2px; border-color: var(--np-ink); box-shadow: var(--np-sh); }
.np .mode-card.active .mode-card__title { color: var(--np-ink); }
.np .mode-card__title { font-weight: 800; color: var(--np-ink); }
.np .mode-card__sub { color: var(--np-ink2); font-size: 13px; }
.np .checkout-section h2 { font: 800 24px/1.1 var(--np-fd); letter-spacing: -.03em; }
.np .zone-info, .np .takeaway-info { border: 2px solid var(--np-ink); background: var(--np-basil-s); color: var(--np-ink); border-radius: 14px; }
.np .zone-error { border: 2px solid var(--np-ink); background: var(--np-bad-bg); color: var(--np-bad); border-radius: 14px; }
.np .cart-summary-line small { color: var(--np-mute); }
.np .np-schedule { background: var(--np-paper); }

/* ---------- order review (stars) and misc shared blocks ---------- */
.np .age-badge { border: 2px solid var(--np-ink); background: var(--np-bad-bg); color: var(--np-bad); font-weight: 800; }
.np .store-announcement { border-radius: 0; }
.np .restaurant-page__tabs a { border: 2px solid var(--np-ink); border-radius: 99px; background: var(--np-paper); color: var(--np-ink); font-weight: 800; }
.np .restaurant-page__tabs a.is-on { background: var(--np-ink); color: var(--np-cream); }
.np .restaurant-page h1 { font: 800 clamp(30px, 7vw, 44px)/1 var(--np-fd); letter-spacing: -.04em; }

/* contrast: on the yellow (selected) and tinted fills the text turns ink or the deeper red, never the bright tomato / green */
.npp-size.active strong, .npp-option.selected small, .npp-option-row.selected small { color: var(--np-ink); }
.np .acct-points-pill { color: var(--np-red2); }
.np .acct-points-cta { color: var(--np-ink); }

/* order review (shared .rv partial): thick outline card, ink/yellow stars (empty stars keep a 3:1 outline against the card) */
.np .rv { background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: var(--np-r1); box-shadow: var(--np-sh-lg); color: var(--np-ink); }
.np .rv-title { font: 800 28px/1.1 var(--np-fd); letter-spacing: -.03em; }
.np .rv-lead, .np .rv-note { color: var(--np-ink2); }
.np .rv-stars label { color: #fff; -webkit-text-stroke: 1.5px var(--np-ink); }
.np .rv-stars label:hover, .np .rv-stars label:hover ~ label, .np .rv-stars input:checked ~ label { color: var(--np-sun); }
.np .rv-stars input:focus-visible + label { outline: 3px solid var(--np-ink); }
.np .rv-stars label.rv-clear { -webkit-text-stroke: 0; color: var(--np-ink2) !important; }
.np .rv-fixed { color: var(--np-sun); -webkit-text-stroke: 1px var(--np-ink); }
.np .rv-fixed .rv-off { color: #fff; }
.np .rv-input { border: 2px solid var(--np-ink); border-radius: 14px; background: #fff; }
.np .rv-submit { border: 2px solid var(--np-ink); border-radius: 99px; background: var(--np-red); box-shadow: var(--np-sh); min-height: 52px; }
.np .rv-submit:hover { background: var(--np-red2); }
.np .rv-back { color: var(--np-red2); text-decoration: underline; }
.np .rv-alert { background: var(--np-bad-bg); color: var(--np-bad); border: 2px solid var(--np-ink); }
.np .rv-status { background: var(--np-sun); color: var(--np-ink); border: 2px solid var(--np-ink); }
.np .rv-status--approved { background: var(--np-basil-s); color: var(--np-ink); }
.np .rv-quote { background: var(--np-tint); border: 2px solid var(--np-ink); }
.np .rv-dishes li { border-top: 2px dashed var(--np-line); }

/* Phones: a dish row keeps its photo and text side by side and puts the action under them (long names like "Pizza Margherita - Ø26cm" no longer squeeze into a thin column); the hero disc is smaller so the postal form and the first dishes show sooner. */
@media (max-width: 560px) {
    .np-prow { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 12px; }
    .np-prow__im { width: 72px; height: 72px; }
    .np-prow__t > a b { font-size: 16px; }
    .np-prow__act { grid-column: 1 / -1; }
    .np-prow__act .np-btn { width: 100%; justify-content: center; text-align: center; }
    .np-plate { width: min(48vw, 190px); margin-top: 0; }
    .np-hero { padding-bottom: 54px; }
}

/* Product page: a long option list shows its first five choices, the rest open with "show more"; a choice already ticked stays visible. */
.npp-options[data-collapsible]:not(.is-expanded) .npp-opt-extra:not(.selected):not(.active):not([aria-pressed="true"]) { display: none; }
.npp-more { margin-top: 10px; width: 100%; min-height: 44px; border: 2px dashed var(--np-ink); border-radius: 12px; background: transparent; color: var(--np-red); font: 800 15px/1 var(--np-fd, inherit); cursor: pointer; }
.npp-more:hover { background: var(--np-tint, #fff4e8); }

/* Home: the three perks sit half on the hero, half on the page below; bigger icons. */
.np-perks > div { padding: 16px 20px; gap: 0 16px; min-height: 84px; }
.np-perks b { font-size: 17px; }
.np-perks svg { width: 38px; height: 38px; }
@media (min-width: 48rem) { .np-perks { margin-top: -42px; } }
@media (max-width: 47.99rem) { .np-perks { margin-top: -26px; } }
/* "How it works": an icon in the disc instead of the step number. */
.np-n { width: 48px; height: 48px; margin-bottom: 12px; }
.np-n svg { width: 24px; height: 24px; }
/* Featured dishes: the same card height whatever the length of name or description; the price row sits at the bottom. */
.np-hs { align-items: stretch; }
.np-fc { display: flex; flex-direction: column; }
.np-fc__b { flex: 1; align-content: start; grid-template-rows: auto 1fr auto; }
.np-fc__b > b { min-height: 2.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-fc__f { align-self: end; }
/* Hero photo: floats gently and turns slowly (off for people who ask for less motion). */
.np-plate__disc { animation: npPlateFloat 7s ease-in-out infinite; }
.np-plate__disc .np-plate__photo { animation: npPlateSpin 90s linear infinite; }
@keyframes npPlateFloat { 0%, 100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(14deg) translateY(-10px); } }
@keyframes npPlateSpin { from { transform: scale(1.12) rotate(0deg); } to { transform: scale(1.12) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .np-plate__disc, .np-plate__disc .np-plate__photo { animation: none; } }

/* Menu: today's hours as a small chip at the far right of the title; the filters sit beside the category list. */
.np-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.np-hours-chip { margin: 0 0 8px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 2px solid var(--np-ink); border-radius: 99px; background: var(--np-paper); font-weight: 700; font-size: 13px; line-height: 1; color: var(--np-ink); }
.np-hours-chip svg { color: var(--np-basil, #1a8a3c); }
.np-hours-chip em { font-style: normal; color: var(--np-red2, #b3211f); border-left: 2px solid var(--np-ink); padding-left: 8px; }
.np-hours-chip.is-closed svg { color: var(--np-red2, #b3211f); }
.np-ph .np-hours-chip { color: var(--np-ink); margin-top: 0; }
.np-tabs .np-wrap { display: flex; align-items: center; gap: 14px; }
.np-tabs .np-ts { flex: 1 1 auto; min-width: 0; }
.np-rail-filters { flex: none; position: relative; }
.np-rail-filters .sf-filters { margin: 0; }
.np-rail-filters .sf-filters__row { flex-wrap: nowrap; margin: 0; }
.np-rail-filters .sf-filters__sort { min-height: 40px; height: 40px; font-size: 13.5px; }
.np-rail-filters .sf-filters__apply { display: none; }
.np-rail-filters .sf-filters__note { display: none; }
.np-rail-filters .sf-filters__empty { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; white-space: nowrap; background: var(--np-paper); border: 2px solid var(--np-ink); border-radius: 12px; padding: 8px 12px; margin: 0; font-size: 13px; }
@media (max-width: 47.99rem) {
    .np-tabs .np-wrap { flex-wrap: wrap; gap: 8px; }
    .np-tabs .np-ts { flex-basis: 100%; }
    .np-rail-filters { flex-basis: 100%; }
    .np-rail-filters .sf-filters__row { flex-wrap: wrap; }
    .np-rail-filters .sf-filters__sort { width: 100%; }
}

/* Buttons: brand red offset behind a white edge (instead of the black outline + black offset). Outlined "alt" buttons keep their look. */
.np-btn:not(.np-btn--alt), .np-add, .np-prow .bt-quickadd, .npp-total button, .npp-sticky-add { border-color: #fff; box-shadow: 3px 3px 0 var(--np-red); }
.np-btn:not(.np-btn--alt):active, .np-add:active, .np-prow .bt-quickadd:active, .npp-total button:active, .npp-sticky-add:active { box-shadow: 0 0 0 var(--np-red); }
.np-pzf .np-btn { box-shadow: 3px 3px 0 var(--np-red); }
/* No "from" before a price. */
.sf-price__from { display: none; }
/* Hero dish without its plate: only the pizza, no frame, turning slowly. */
.np-hero .np-plate__disc.np-plate__disc--cutout { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; overflow: visible; animation: none !important; transform: none !important; filter: drop-shadow(8px 14px 0 rgba(0, 0, 0, .28)); }
.np-hero .np-plate__disc--cutout .np-plate__photo { transform: none; animation: npPlateTurn 150s linear infinite; border-radius: 50% !important; object-fit: contain; }
@keyframes npPlateTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .np-hero .np-plate__disc--cutout .np-plate__photo { animation: none; } }

/* Phones: the postal form never pushes past the screen edge. */
.np-hero__text { min-width: 0; }
.np-pzf { max-width: 100%; }
@media (max-width: 420px) { .np-pzf { padding: 14px; } .np-pzf__r { gap: 8px; } .np-pzf .np-btn { padding: 0 16px; } }

/* Checkout on phones: delivery and pick-up stack as two full-width rows instead of two cramped columns. */
@media (max-width: 560px) {
    .mode-selector { grid-template-columns: 1fr !important; }
    .mode-selector .mode-card { height: auto; min-height: 72px; padding: 12px 16px; }
}

/* Checkout, planning a later order: the chosen day keeps readable (white) text on its dark chip. */
.np-schedule__date.active small, .np-schedule__date.active strong, .np-schedule__date.active span { color: #fff; }

/* Cart: desserts and drinks to add, as the same rows the menu uses. */
.np-cart-pairs { padding-top: 8px; padding-bottom: 48px; }
.np-cart-pairs h2 { margin: 0 0 14px; font-size: 24px; }
.np-cart-pairs .np-plist { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .np-cart-pairs .np-plist { grid-template-columns: 1fr 1fr; } }