/**
 * TapGo — Store Listing page styles  (/store-listing/)
 *
 * Phase 1: extracted verbatim from inline <style> block of page-store-listing.php
 * to enable maintainability + cache-busted enqueue. NEW design tokens added at top
 * for future phases (mobile-first refactor, card redesign).
 *
 * Loaded by: page-store-listing.php → wp_enqueue_style('tapgo-store-listing')
 * Depends on: tapgo-theme.css (--tg-* base palette + dark mode)
 *
 * Dark mode: still uses body.tg-dark selectors for now (Phase 1 = no visual change).
 * Phase 2+ will migrate hardcoded colors to var(--tg-*) so dark mode "just works".
 */

/* ═══════════════════════════════════════════════════════════════
   STORE-LISTING DESIGN TOKENS  (Phase 1 — additions only)
   Phases 2-6 will progressively consume these.
═══════════════════════════════════════════════════════════════ */
:root {
    /* Spacing scale (4px base) */
    --sl-gap-1: 4px;
    --sl-gap-2: 8px;
    --sl-gap-3: 12px;
    --sl-gap-4: 16px;
    --sl-gap-5: 24px;
    --sl-gap-6: 32px;
    --sl-gap-7: 48px;

    /* Border radius */
    --sl-radius-sm:  8px;
    --sl-radius-md:  12px;
    --sl-radius-lg:  16px;
    --sl-radius-xl:  20px;
    --sl-radius-2xl: 24px;
    --sl-radius-pill: 999px;

    /* Shadows */
    --sl-shadow-1: 0 1px 4px rgba(0,0,0,.06);
    --sl-shadow-2: 0 2px 12px rgba(0,0,0,.07);
    --sl-shadow-3: 0 8px 24px rgba(0,0,0,.10);
    --sl-shadow-4: 0 16px 40px rgba(0,0,0,.13);

    /* Layout */
    --sl-header-h: 64px;
    --sl-header-h-mobile: 56px;
    --sl-touch: 44px;            /* min touch target */
    --sl-content-max: 1320px;

    /* Card */
    --sl-card-banner-ratio: 16 / 9;

    /* Z-index scale */
    --sl-z-fab: 200;
    --sl-z-header: 300;
    --sl-z-dropdown: 500;
    --sl-z-modal: 600;
    --sl-z-delivery-modal: 9000;
    --sl-z-pac: 9999;
}

html.tg-dark {
    --sl-shadow-1: 0 1px 4px rgba(0,0,0,.32);
    --sl-shadow-2: 0 2px 12px rgba(0,0,0,.30);
    --sl-shadow-3: 0 8px 24px rgba(0,0,0,.40);
    --sl-shadow-4: 0 16px 40px rgba(0,0,0,.50);
}

/* Box-sizing reset scoped to listing page (safe, no global side-effects) */
#qr-listing-page,
#qr-listing-page *,
#qr-listing-page *::before,
#qr-listing-page *::after {
    box-sizing: border-box;
}

/* Smooth scrolling for in-page anchors + JS-driven scrolls.
   scroll-padding-top: anchor jumps respect fixed header. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--sl-header-h-mobile) + 12px);
}
@media (min-width: 600px) {
    html { scroll-padding-top: calc(var(--sl-header-h) + 12px); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ───────────────────────────────────────────────────────────────
   UNIVERSAL FOCUS-VISIBLE RING
   Keyboard-only ring (mouse clicks don't trigger :focus-visible).
   Green outline = brand consistency, 3px outline-offset = breathing room.
─────────────────────────────────────────────────────────────── */
#qr-listing-page button:focus-visible,
#qr-listing-page a:focus-visible,
#qr-listing-page input:focus-visible,
#qr-listing-page select:focus-visible,
.qr-filter-modal-overlay button:focus-visible,
.qr-filter-modal-overlay label:focus-visible,
.qr-dlv-overlay button:focus-visible,
.qr-dlv-overlay input:focus-visible {
    outline: 3px solid var(--tg-green);
    outline-offset: 2px;
    border-radius: var(--sl-radius-md);
}
/* Cards already define their own focus ring with rounded shape */
#qr-listing-page .qr-vendor-card:focus-visible {
    outline-offset: 3px;
    border-radius: var(--sl-radius-lg);
}

/* ═══════════════════════════════════════════════════════════════
   RESET / PAGE SHELL
═══════════════════════════════════════════════════════════════ */
.ast-breadcrumbs-wrapper, .entry-header { display: none; }

#qr-listing-page {
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 96px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: background .3s;
}

/* ═══════════════════════════════════════════════════════════════
   FIXED HEADER — logo + address LEFT | theme + auth RIGHT
   Mobile-first: smaller default height, grows on ≥600px (see RESPONSIVE).
═══════════════════════════════════════════════════════════════ */
.qr-site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--sl-z-header);
    min-height: var(--sl-header-h-mobile);
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-top: env(safe-area-inset-top, 0);
    padding-right: max(clamp(12px, 3vw, 32px), env(safe-area-inset-right, 0));
    padding-bottom: 0;
    padding-left: max(clamp(12px, 3vw, 32px), env(safe-area-inset-left, 0));
    gap: clamp(8px, 1.5vw, 12px);
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    transition: background .3s, border-color .3s;
}
.admin-bar .qr-site-header { top: 32px; }

/* ── Left: logo + address ── */
.qr-header-left {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 10px);
    min-width: 0;
    flex: 1 1 auto;
}
.qr-site-logo { display: flex; align-items: center; flex-shrink: 0; }
.qr-site-logo img { height: clamp(26px, 6vw, 32px); width: auto; display: block; }

/* Address wrapper — (only present if picker dropdown is rendered).
   Kept for backward-compat; constraints live on the button itself below. */
.qr-addr-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: clamp(180px, 60vw, 320px);
}

/* Address pill — right next to logo.
   Flex/max-width applied directly so it works whether or not .qr-addr-wrap exists. */
.qr-header-address {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: clamp(180px, 60vw, 320px);
    background: #111;
    border: none;
    border-radius: var(--sl-radius-xl);
    padding: 8px 14px;
    min-height: 38px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    font-family: inherit;
    text-align: left;
    transition: background .15s, color .15s;
    /* NO overflow:hidden — that would clip the absolute-positioned picker */
}
/* When the button lives inside a .qr-addr-wrap, the wrap caps the width
   and the button fills it. Reset the button's own cap in that case. */
.qr-addr-wrap > .qr-header-address {
    width: 100%;
    max-width: none;
    flex: none;
}
.qr-header-address:hover { background: #333; color: #fff !important; }
.qr-header-address .fa-map-marker-alt { color: #B7F51E; font-size: 12px; flex-shrink: 0; }
.qr-addr-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.qr-addr-chevron { font-size: 9px; color: #888; flex-shrink: 0; transition: transform .2s; }
.qr-header-address.open .qr-addr-chevron { transform: rotate(180deg); }

/* Address picker dropdown — sibling of button inside .qr-addr-wrap */
.qr-addr-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 290px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.16);
    padding: 6px 0 8px;
    z-index: 500;
    display: none;
}
.qr-addr-picker.open { display: block; }
.qr-addr-picker-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px 5px;
}
.qr-addr-pick-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background .12s;
}
.qr-addr-pick-item:hover { background: #f5f5f5; }
.qr-addr-pick-item.selected { background: #f0fde4; }
.qr-addr-pick-item .fa-map-marker-alt { color: #9fd919; flex-shrink: 0; margin-top: 3px; font-size: 12px; }
.qr-addr-pick-street { font-size: 13px; font-weight: 600; color: #111; display: block; }
.qr-addr-pick-label  { font-size: 11px; color: #888; display: block; margin-top: 1px; }

/* ── Right: theme toggle + auth group ── */
.qr-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Theme toggle removed from header — lives inside profile/auth panel only */

/* ════════════════════════════════════════════════════════════════
   Phase 23 — Mobile sticky address sub-bar (phones ≤599px only)
   Desktop/tablet keep the inline header address; this bar is hidden
   there. On phones the inline address is hidden and surfaced here
   full-width so it's always readable + tappable.
   ════════════════════════════════════════════════════════════════ */
.qr-subaddr-bar { display: none; }

@media (max-width: 599px) {
    /* Inline header address is too cramped on phones → hide it */
    .qr-header-left .qr-header-address { display: none; }

    .qr-subaddr-bar {
        display: flex;
        align-items: center;
        position: fixed;
        top: calc(var(--sl-header-h-mobile) + env(safe-area-inset-top, 0px));
        left: 0; right: 0;
        z-index: calc(var(--sl-z-header) - 1);
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
        box-shadow: 0 3px 8px rgba(0,0,0,.05);
        padding: 7px max(12px, env(safe-area-inset-right, 0px))
                 7px max(12px, env(safe-area-inset-left, 0px));
    }
    .qr-subaddr-btn {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
        justify-content: flex-start;
        min-height: 40px;
    }
}

/* ── Compensate for fixed header (uses tokens — Phase 3) ── */
#qr-listing-page {
    padding-top: calc(var(--sl-header-h-mobile) + env(safe-area-inset-top, 0px));
}
.admin-bar #qr-listing-page {
    padding-top: calc(var(--sl-header-h-mobile) + 32px + env(safe-area-inset-top, 0px));
}
/* Phase 23: on phones push content down to clear header + sub-bar (~54px) */
@media (max-width: 599px) {
    #qr-listing-page {
        padding-top: calc(var(--sl-header-h-mobile) + 54px + env(safe-area-inset-top, 0px));
    }
    .admin-bar #qr-listing-page {
        padding-top: calc(var(--sl-header-h-mobile) + 54px + 32px + env(safe-area-inset-top, 0px));
    }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — mobile-first grid (1col default, sidebar appears ≥1024px)
═══════════════════════════════════════════════════════════════ */
.qr-listing-layout {
    display: grid;
    grid-template-columns: 1fr;
    max-width: var(--sl-content-max);
    margin: 0 auto;
    padding: clamp(12px, 3vw, 28px) clamp(12px, 3vw, 20px);
    gap: clamp(12px, 2vw, 24px);
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — hidden by default (mobile), shown ≥1024px
═══════════════════════════════════════════════════════════════ */
.qr-listing-sidebar {
    display: none;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: calc(var(--sl-header-h) + 14px);
}
.qr-sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: background .3s, box-shadow .3s;
}
.qr-sidebar-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
}

/* Cuisine grid — sidebar: single column (e-food style).
   Mobile modal uses .qr-modal-cuisine-grid override → 2/3 cols. */
.qr-cuisine-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.qr-cuisine-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    min-height: 46px;
    border-radius: 13px;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #111;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .14s, background .14s, color .14s;
    text-align: left;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.qr-cuisine-btn:hover { border-color: #aaa; background: #f8f8f8; color: #111 !important; }
.qr-cuisine-btn.active { background: #111; color: #fff !important; border-color: #111; }
.qr-cuisine-btn.active:hover { background: #2a2a2a; color: #fff !important; }
.qr-cuisine-btn.qr-cuisine-all { grid-column: 1 / -1; justify-content: center; }

/* Count next to cuisine name — muted, slightly smaller */
.qr-cuisine-count {
    color: #9ca3af;
    font-weight: 700;
    font-size: 13px;
    margin-left: auto;
    flex-shrink: 0;
}
.qr-cuisine-btn.active .qr-cuisine-count { color: #cbd5e1; }
body.tg-dark .qr-cuisine-count { color: #6b7280; }
body.tg-dark .qr-cuisine-btn.active .qr-cuisine-count { color: #4a4a4a; }

/* Hidden cuisines beyond top-N (Phase 12) — revealed via .is-expanded */
.qr-cuisine-hidden { display: none; }
.qr-cuisine-grid.is-expanded .qr-cuisine-hidden { display: flex; }

/* "Δες X ακόμη" expand button — solid pill, always visible (not text-link) */
.qr-cuisine-more {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    background: #f5f5f5 !important;
    border: 1.5px solid #e8e8e8 !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--sl-radius-md);
    transition: background .14s, border-color .14s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    min-height: 36px;
}
.qr-cuisine-more:hover,
.qr-cuisine-more:focus {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}
.qr-cuisine-more-text { color: inherit !important; display: inline-block; }
.qr-cuisine-more-chevron {
    color: inherit !important;
    font-size: 10px;
    line-height: 1;
    display: inline-block;
}
body.tg-dark .qr-cuisine-more {
    background: #1e1e1e !important;
    border-color: #2e2e2e !important;
    color: #f0f0f0 !important;
}
body.tg-dark .qr-cuisine-more:hover,
body.tg-dark .qr-cuisine-more:focus {
    background: #B7F51E !important;
    border-color: #B7F51E !important;
    color: #111 !important;
}

/* Sort radios */
.qr-sort-options { display: flex; flex-direction: column; gap: 5px; }
.qr-sort-radio {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    min-height: 46px;
    border-radius: 13px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    color: #111;
    border: 1.5px solid transparent;
    user-select: none;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}
.qr-sort-radio:hover { background: #f5f5f5; }
.qr-sort-radio.checked { background: #f0f0f0; border-color: #e8e8e8; }
.qr-sort-radio input[type="radio"] { accent-color: #111; width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; }

/* Filter checkboxes */
.qr-filter-opts { display: flex; flex-direction: column; gap: 4px; }
.qr-filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 40px;
    border-radius: var(--sl-radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    border: 1.5px solid transparent;
    user-select: none;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}
.qr-filter-check:hover { background: #f5f5f5; }
.qr-filter-check.checked { background: #f0fde4; border-color: #B7F51E; }
.qr-filter-check input[type="checkbox"] { accent-color: #111; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════════ */
.qr-listing-content { flex: 1; min-width: 0; }
.qr-listing-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.qr-listing-count { font-size: 14px; color: #888; font-weight: 600; margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   CARDS GRID
═══════════════════════════════════════════════════════════════ */
.qr-cards-grid {
    display: grid;
    /* Fluid: 1 col on tiny screens, more as space allows. No breakpoint jumps. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(12px, 2vw, 18px);
    transition: opacity .2s ease;
}
.qr-cards-grid.is-loading { opacity: 0.35; pointer-events: none; }

/* Card: full <a> element */
.qr-vendor-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--sl-radius-lg);
    overflow: hidden;
    box-shadow: var(--sl-shadow-2);
    transition: transform .22s cubic-bezier(.25,.46,.45,.94),
                box-shadow .22s cubic-bezier(.25,.46,.45,.94),
                background .3s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Perf: skip offscreen card rendering on long lists */
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}
/* Hover lift — only when user actually has a mouse (skip mobile touch) */
@media (hover: hover) and (pointer: fine) {
    .qr-vendor-card { will-change: transform; }
    .qr-vendor-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--sl-shadow-4);
        text-decoration: none;
        color: inherit;
    }
    .qr-vendor-card.is-closed:hover {
        transform: translateY(-2px);
        box-shadow: var(--sl-shadow-3);
    }
}
/* Tap feedback on touch devices — visual confirmation of selection */
.qr-vendor-card:active {
    transform: scale(.985);
    transition: transform .08s ease;
}
/* Keyboard focus ring (accessibility) */
.qr-vendor-card:focus-visible {
    outline: 3px solid var(--tg-green);
    outline-offset: 3px;
    border-radius: var(--sl-radius-lg);
}
/* Closed state: dim + slight desaturation (more readable than just opacity) */
.qr-vendor-card.is-closed { opacity: 0.62; }
.qr-vendor-card.is-closed .qr-card-banner { filter: grayscale(.35); }
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .qr-vendor-card,
    .qr-vendor-card:hover,
    .qr-vendor-card:active { transform: none !important; transition: none !important; }
    .qr-status-dot.is-open { animation: none !important; }
}

/* Banner — aspect-ratio scales smoothly without breakpoint heights.
   Solid placeholder color shows through while images decode. */
.qr-card-banner {
    position: relative;
    aspect-ratio: var(--sl-card-banner-ratio);
    flex-shrink: 0;
    background: #e6e6e6;
    overflow: hidden;
}
.qr-card-banner img,
.qr-card-banner .qr-card-banner-gradient {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Subtle fade-in on first paint — eliminates harsh pop when images decode */
.qr-card-banner img {
    animation: qrCardImgIn .3s ease-out both;
}
@keyframes qrCardImgIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .qr-card-banner img { animation: none !important; }
}
.qr-card-banner-gradient { width: 100%; height: 100%; }
.qr-card-banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.28) 100%);
    pointer-events: none;
}

/* Logo circle — clamp for fluid sizing across all viewports */
.qr-card-logo-wrap {
    position: absolute;
    bottom: 10px; left: 14px;
    z-index: 2;
    width: clamp(56px, 13vw, 68px);
    height: clamp(56px, 13vw, 68px);
    border-radius: clamp(13px, 2.8vw, 16px);
    border: 3px solid #fff;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
    overflow: hidden;
}
.qr-card-logo-wrap img, .qr-card-logo-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-card-logo-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
    background: linear-gradient(135deg, #B7F51E, #9fd919);
    color: #111;
}

/* Status badge — sits over banner, blurred backdrop for readability */
.qr-card-status-wrap { position: absolute; top: 10px; right: 12px; z-index: 3; }
.qr-card-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: var(--sl-radius-pill);
    font-size: 11px; font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@keyframes qrPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.8); opacity: 0; } }
.qr-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.qr-status-dot.is-open { animation: qrPulse 2s ease-in-out infinite; }

/* Promo badge slot (top-left of banner) — future use; opt-in via .has-promo */
.qr-card-promo {
    position: absolute; top: 10px; left: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--sl-radius-pill);
    font-size: 11px; font-weight: 800; letter-spacing: .3px;
    background: var(--tg-green); color: #111;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Card body */
.qr-card-body {
    padding: clamp(12px, 2.5vw, 14px) clamp(12px, 2.5vw, 16px) clamp(14px, 2.5vw, 16px);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Row 1: store name (left) + delivery badge (right), vertically centered */
.qr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.qr-card-name {
    font-size: 18px; font-weight: 800; color: #111;
    margin: 0; line-height: 1.2; flex: 1;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qr-delivery-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 11px; border-radius: var(--sl-radius-sm);
    font-size: 12.5px; font-weight: 700;
    background: #eff6ff; color: #3b82f6;
    flex-shrink: 0; white-space: nowrap;
}
.qr-delivery-badge.is-free { background: #e3f7ef; color: #18a558; }
/* Row 2: cuisines (left, fill) + time·min (right), top-aligned on same line */
.qr-card-row2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qr-card-deliv-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: #6b7280; white-space: nowrap; flex-shrink: 0; padding-top: 2px; }
.qr-card-deliv-meta svg { color: #9ca3af; flex-shrink: 0; }
.qr-card-deliv-meta .qr-info-dot { margin: 0 2px; color: #c4c8bf; }
body.tg-dark .qr-card-deliv-meta { color: #9ca3af; }
body.tg-dark .qr-card-deliv-meta .qr-info-dot { color: #444; }
.qr-card-cuisines { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.qr-cuisine-tag {
    padding: 2px 8px; border-radius: var(--sl-radius-sm);
    font-size: 11px; font-weight: 600;
    background: #f2f2f2; color: #888;
}
.qr-card-info-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}
.qr-info-item {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: #6b7280;
}
.qr-info-item svg { flex-shrink: 0; opacity: 0.7; }
.qr-info-item.qr-info-free { color: #10b981; font-weight: 700; }
.qr-info-dot { color: #d0d0d0; font-size: 13px; line-height: 1; }

/* Optional rating slot (future) — render as <span class="qr-card-rating">4.7</span> */
.qr-card-rating {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: var(--sl-radius-sm);
    background: #fffbeb; color: #b45309;
    font-size: 11px; font-weight: 800;
}
.qr-card-rating::before { content: '★'; font-size: 11px; }

/* Empty state */
.qr-empty-state { text-align: center; padding: 80px 20px; color: #888; grid-column: 1 / -1; }
.qr-empty-icon { font-size: 52px; margin-bottom: 16px; }
.qr-empty-state p { font-size: 16px; margin-bottom: 20px; }
.qr-empty-reset {
    padding: 10px 26px; border-radius: 12px; background: #111; color: #fff;
    border: 1.5px solid #111; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: opacity .15s, background .15s, color .15s;
}
.qr-empty-reset:hover { opacity: 0.82; }
/* Coming-soon "register your store" CTA — branded colour-shift hover (light theme):
   black → lime so the hover is a distinct colour, not just a dim. */
.qr-empty-reset--soon:hover { background: #B7F51E; color: #111; border-color: #B7F51E; opacity: 1; }
/* Phase 23: secondary action = outline so the primary CTA stands out */
.qr-empty-reset--ghost { background: transparent; color: #111; }
.qr-empty-reset--ghost:hover { background: #f2f2f2; opacity: 1; }
/* Phase 23: responsive action layout — inline on desktop, stacked on phones */
.qr-empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .qr-empty-state { padding: 56px 18px; }
    .qr-empty-actions { flex-direction: column; align-items: stretch; gap: 10px; max-width: 320px; margin: 0 auto; }
    .qr-empty-reset { width: 100%; padding: 13px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FILTER BUTTON (fixed bottom FAB)
   Safe-area aware for iPhone home indicator.
═══════════════════════════════════════════════════════════════ */
.qr-mobile-filter-btn {
    display: none;
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--sl-z-fab);
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    min-height: var(--sl-touch);
    border-radius: var(--sl-radius-pill);
    background: #111; color: #fff;
    font-size: 15px; font-weight: 700;
    border: none; font-family: inherit; cursor: pointer;
    box-shadow: var(--sl-shadow-4);
    transition: transform .15s, box-shadow .15s, background .3s;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .qr-mobile-filter-btn:hover {
        transform: translateX(-50%) translateY(-2px);
        box-shadow: 0 10px 32px rgba(0,0,0,.32);
    }
}
.qr-mobile-filter-btn:active { transform: translateX(-50%) scale(.96); }
.qr-filter-count-badge {
    display: none; align-items: center; justify-content: center;
    background: var(--tg-green); color: #111;
    border-radius: 50%; width: 22px; height: 22px;
    font-size: 11px; font-weight: 900;
}
.qr-filter-count-badge.visible { display: flex; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE FILTER MODAL — bottom sheet with handle bar
═══════════════════════════════════════════════════════════════ */
.qr-filter-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--sl-z-modal);
    align-items: flex-end;
}
.qr-filter-modal-overlay.open { display: flex; }
.qr-filter-modal {
    width: 100%; background: #fff;
    border-radius: var(--sl-radius-2xl) var(--sl-radius-2xl) 0 0;
    padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    /* dvh handles mobile address bar; vh fallback for older browsers */
    max-height: min(88vh, calc(100vh - 80px));
    max-height: min(88dvh, calc(100dvh - 80px));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1), background .3s;
}
.qr-filter-modal-overlay.open .qr-filter-modal { transform: translateY(0); }
.qr-filter-modal-handle {
    width: 40px; height: 4px;
    background: #ddd; border-radius: 2px;
    margin: 0 auto 18px;
}
.qr-filter-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.qr-filter-modal-title { font-size: 18px; font-weight: 800; color: #111; }
.qr-filter-modal-close {
    width: var(--sl-touch); height: var(--sl-touch);
    border-radius: 50%; background: #f0f0f0;
    border: none; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; color: #111; transition: background .15s;
}
.qr-filter-modal-close:hover { background: #e0e0e0; }
.qr-modal-section { margin-bottom: 24px; }
.qr-modal-section-title {
    font-size: 11px; font-weight: 800; color: #888;
    text-transform: uppercase; letter-spacing: 0.7px;
    margin-bottom: 12px;
}
/* Cuisine pills inside modal — larger touch targets */
.qr-modal-cuisine-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.qr-modal-cuisine-grid .qr-cuisine-btn {
    padding: 12px 12px;
    min-height: var(--sl-touch);
    font-size: 13px;
    justify-content: center;
}
.qr-modal-cuisine-grid .qr-cuisine-btn.qr-cuisine-all { grid-column: 1 / -1; }
/* 3-col on wider phones */
@media (min-width: 480px) {
    .qr-modal-cuisine-grid { grid-template-columns: 1fr 1fr 1fr; }
}
/* Modal sort/filter rows: enforce min touch target */
.qr-filter-modal .qr-sort-radio,
.qr-filter-modal .qr-filter-check {
    min-height: var(--sl-touch);
    padding: 12px 14px;
}
.qr-modal-apply {
    display: block; width: 100%;
    padding: 16px;
    min-height: 52px;
    border-radius: var(--sl-radius-md);
    background: #111; color: #fff;
    font-size: 16px; font-weight: 700;
    border: none; cursor: pointer; font-family: inherit;
    margin-top: 6px;
    transition: opacity .15s, background .3s, transform .08s;
    -webkit-tap-highlight-color: transparent;
}
.qr-modal-apply:hover { opacity: 0.85; }
.qr-modal-apply:active { transform: scale(.985); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL
═══════════════════════════════════════════════════════════════ */
.qr-admin-bar {
    background: #fffbeb; border-bottom: 2px solid #fde68a; padding: 14px 24px;
    position: relative; z-index: 90;
}
.qr-admin-bar-inner { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.qr-admin-title { font-size: 11px; font-weight: 800; color: #92400e; text-transform: uppercase; letter-spacing: 0.6px; }
.qr-admin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qr-admin-label { font-size: 12px; font-weight: 700; color: #78350f; min-width: 80px; }
.qr-admin-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none;
    border: 2px solid #e8e8e8; background: #fff; color: #111;
    transition: all .15s; white-space: nowrap;
}
.qr-admin-chip:hover { border-color: #fbbf24; color: #111; text-decoration: none; }
.qr-admin-chip.active { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.qr-admin-select {
    padding: 5px 26px 5px 10px; border-radius: 8px; border: 2px solid #e8e8e8;
    font-size: 12px; font-weight: 600; color: #111;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
}
.qr-admin-select:focus { border-color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — store listing specific overrides
   (Global vars & auth/profile panels handled by qraveler-homepage.css)
═══════════════════════════════════════════════════════════════ */
body.tg-dark #qr-listing-page        { background: #0f0f0f; }
body.tg-dark .qr-site-header         { background: #161616; border-color: #2a2a2a; box-shadow: 0 1px 8px rgba(0,0,0,.4); }
body.tg-dark .qr-subaddr-bar         { background: #161616; border-color: #2a2a2a; box-shadow: 0 3px 8px rgba(0,0,0,.4); }  /* Phase 23 */
body.tg-dark .qr-sidebar-card        { background: #1a1a1a; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
body.tg-dark .qr-sidebar-title       { color: #555; }

body.tg-dark .qr-cuisine-btn         { background: #1e1e1e; border-color: #2e2e2e; color: #ddd; }
body.tg-dark .qr-cuisine-btn:hover   { background: #252525; border-color: #B7F51E; color: #f0f0f0 !important; }
body.tg-dark .qr-cuisine-btn.active  { background: #B7F51E; color: #111 !important; border-color: #B7F51E; }  /* Phase 23: beat the #fff !important so text is black on the lime "Όλες"/active chip */

body.tg-dark .qr-sort-radio          { color: #ddd; }
body.tg-dark .qr-sort-radio:hover    { background: #1e1e1e; }
body.tg-dark .qr-sort-radio.checked  { background: #1e1e1e; border-color: #333; }
body.tg-dark .qr-filter-check        { color: #ddd; }
body.tg-dark .qr-filter-check:hover  { background: #1e1e1e; }
body.tg-dark .qr-filter-check.checked{ background: #1a2a0e; border-color: #B7F51E; }

body.tg-dark .qr-listing-count       { color: #555; }
body.tg-dark .qr-vendor-card         { background: #1a1a1a; box-shadow: 0 2px 12px rgba(0,0,0,.3); color: #f0f0f0; }
body.tg-dark .qr-vendor-card:hover   { box-shadow: 0 16px 40px rgba(0,0,0,.5); color: #f0f0f0; }
body.tg-dark .qr-card-banner::after  { background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.5) 100%); }
body.tg-dark .qr-card-logo-wrap      { border-color: #1a1a1a; }
body.tg-dark .qr-card-name           { color: #f0f0f0; }
body.tg-dark .qr-delivery-badge      { background: #1e3a5f; color: #60a5fa; }
body.tg-dark .qr-delivery-badge.is-free { background: #11271f; color: #34d399; }
body.tg-dark .qr-cuisine-tag         { background: #252525; color: #888; }
body.tg-dark .qr-card-info-row       { border-color: #2a2a2a; }
body.tg-dark .qr-info-item           { color: #9ca3af; }
body.tg-dark .qr-info-item.qr-info-free { color: #10b981; }
body.tg-dark .qr-info-dot            { color: #333; }
body.tg-dark .qr-card-banner         { background: #1e1e1e; }
body.tg-dark .qr-card-rating         { background: #1f1605; color: #fbbf24; }

body.tg-dark .qr-addr-wrap            { }
body.tg-dark .qr-header-address      { background: #fff; color: #111; }
body.tg-dark .qr-header-address:hover{ background: #B7F51E; color: #111 !important; }
body.tg-dark .qr-addr-picker         { background: #1a1a1a; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
body.tg-dark .qr-addr-picker-title   { color: #555; }
body.tg-dark .qr-addr-pick-item:hover    { background: #222; }
body.tg-dark .qr-addr-pick-item.selected { background: #1a2a0e; }
body.tg-dark .qr-addr-pick-street    { color: #f0f0f0; }
body.tg-dark .qr-addr-pick-label     { color: #777; }


body.tg-dark .qr-mobile-filter-btn   { background: #B7F51E; color: #111; box-shadow: 0 6px 24px rgba(183,245,30,.18); }
body.tg-dark .qr-filter-modal        { background: #1a1a1a; }
body.tg-dark .qr-filter-modal-title  { color: #f0f0f0; }
body.tg-dark .qr-filter-modal-handle { background: #333; }
body.tg-dark .qr-filter-modal-close  { background: #252525; color: #f0f0f0; }
body.tg-dark .qr-filter-modal-close:hover { background: #333; }
body.tg-dark .qr-modal-section-title { color: #555; }
body.tg-dark .qr-modal-apply         { background: #B7F51E; color: #111; }

body.tg-dark .qr-empty-state         { color: #555; }
body.tg-dark .qr-empty-reset         { background: #B7F51E; color: #111; border-color: #B7F51E; }
body.tg-dark .qr-empty-reset--ghost  { background: transparent; color: #B7F51E; }  /* Phase 23 */
body.tg-dark .qr-empty-reset--ghost:hover { background: rgba(183,245,30,.12); }
body.tg-dark .qr-empty-reset--soon:hover  { background: #cdff4d; border-color: #cdff4d; color: #111; opacity: 1; }

body.tg-dark .qr-admin-bar           { background: #1a1505; border-color: #3a2a05; }
body.tg-dark .qr-admin-title         { color: #d4a02a; }
body.tg-dark .qr-admin-chip          { background: #1a1a1a; border-color: #333; color: #ddd; }
body.tg-dark .qr-admin-chip.active   { background: #2a1f05; color: #d4a02a; border-color: #6a4e05; }
body.tg-dark .qr-admin-select        { background-color: #1a1a1a; color: #ddd; border-color: #333; }

/* ═══════════════════════════════════════════════════════════════
   AUTH PANEL + PROFILE PANEL DARK MODE
   Uses html.tg-dark (set globally by anti-flash script) instead of
   body.tapgo-homepage.tg-dark — avoids adding tapgo-homepage body
   class which would hide #page via qraveler-homepage.css rules.
═══════════════════════════════════════════════════════════════ */
html.tg-dark .tg-auth-panel {
    --ap-bg:        #161616;
    --ap-surface:   #1e1e1e;
    --ap-border:    #2a2a2a;
    --ap-text:      #f0f0f0;
    --ap-muted:     #888888;
    --ap-input-bg:  #1e1e1e;
    --ap-input-brd: #333333;
    --ap-shadow:    rgba(0,0,0,0.35);
    background: #161616 !important;
    border-left-color: #2a2a2a;
    box-shadow: -8px 0 40px rgba(0,0,0,0.5);
}
html.tg-dark .tg-profile-panel {
    --ap-bg:        #161616;
    --ap-surface:   #1e1e1e;
    --ap-border:    #2a2a2a;
    --ap-text:      #f0f0f0;
    --ap-text-2:    #888888;
    --ap-muted:     #888888;
    --ap-input-bg:  #1e1e1e;
    --ap-input-brd: #333333;
    --ap-green:     #B7F51E;
    --ap-green-d:   #9fd919;
    --ap-shadow:    rgba(0,0,0,0.35);
    background: #161616 !important;
    border-left-color: #2a2a2a;
    box-shadow: -8px 0 40px rgba(0,0,0,0.5);
}
html.tg-dark .tg-ap-google-btn       { background: #1e1e1e !important; border-color: #333 !important; color: #f0f0f0 !important; }
html.tg-dark .tg-ap-google-btn:hover { background: #2a2a2a !important; }
html.tg-dark .tg-ap-msg.err          { color: #fca5a5; }
html.tg-dark .tg-ap-msg.ok           { color: #B7F51E; }
html.tg-dark .tg-ap-submit           { color: #111111 !important; }
html.tg-dark .tg-pp-theme-switch     { background: #B7F51E; }
html.tg-dark .tg-ap-close,
html.tg-dark .tg-pp-close            { background: #252525 !important; color: #f0f0f0 !important; }
html.tg-dark .tg-ap-close:hover,
html.tg-dark .tg-pp-close:hover      { background: #333 !important; }
html.tg-dark .tg-ap-auth-tab         { color: #888; }
html.tg-dark .tg-ap-auth-tab.active  { color: #f0f0f0; border-color: #f0f0f0; }
html.tg-dark .tg-ap-or span          { background: #161616; color: #555; }
html.tg-dark .tg-ap-or::before       { background: #333; }
html.tg-dark .tg-theme-toggle--panel { background: #252525 !important; color: #ccc !important; }
html.tg-dark .tg-theme-toggle--panel:hover { background: #333 !important; color: #fff !important; }

/* ── Address form dark mode (store listing page) ────────────────────────────── */
html.tg-dark .tg-addr-form-modal {
    background: #161616;
    --ap-bg: #161616; --ap-surface: #1e1e1e; --ap-border: #2a2a2a;
    --ap-text: #f0f0f0; --ap-text-2: #888888;
    --ap-input-bg: #1e1e1e; --ap-input-brd: #333333;
    --ap-green: #B7F51E;
}
html.tg-dark .tg-addr-form-header { color: #f0f0f0; border-bottom-color: #2a2a2a; }
html.tg-dark .tg-addr-form-close  { background: #1e1e1e !important; color: #f0f0f0 !important; }
html.tg-dark .tg-addr-form-lbl    { color: #888; }
html.tg-dark .tg-addr-form-in     { background: #1e1e1e !important; border-color: #333 !important; color: #f0f0f0 !important; }
html.tg-dark .tg-addr-form-in:focus { border-color: #B7F51E !important; }
html.tg-dark .tg-addr-form-body .tg-ap-submit:hover { background: #333 !important; color: #B7F51E !important; }

/* ── Phase 18b: incomplete address warning badge in profile panel ───────────── */
.tg-pp-addr-warning {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fff8e1;
    color: #8d6e1f;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    cursor: help;
}
html.tg-dark .tg-pp-addr-warning {
    background: #3a2a05;
    color: #fbc02d;
}

/* Phase 19 — Profile address management is pure CRUD: add/edit/delete only.
   "Παράδοση εδώ" button + "Τρέχουσα" badge removed. Current delivery is
   displayed in the page header pill (single source of truth). */

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first (min-width cascade)
   Defaults above are tuned for ≤599px (1col cards, no sidebar, FAB filter).
═══════════════════════════════════════════════════════════════ */

/* Mobile filter FAB shown by default; hide at desktop where sidebar takes over */
.qr-mobile-filter-btn { display: flex; }

/* ── ≤375px: ultra-compact header for very small phones ──────────────────────── */
@media (max-width: 375px) {
    .qr-site-header { gap: 6px; }
    .qr-header-address { padding: 7px 11px; font-size: 12px; min-height: 36px; }
    .tg-user-name { display: none; }       /* avatar-only on tiny screens */
}

/* Hide chevron on ultra-tiny phones (saves ~15px for address text) */
@media (max-width: 359px) {
    .qr-addr-chevron { display: none; }
}

/* ── ≥600px: small tablets / large phones landscape ──────────────────────────── */
@media (min-width: 600px) {
    .qr-site-header { min-height: var(--sl-header-h); }
    #qr-listing-page {
        padding-top: calc(var(--sl-header-h) + env(safe-area-inset-top, 0px));
    }
    .admin-bar #qr-listing-page {
        padding-top: calc(var(--sl-header-h) + 32px + env(safe-area-inset-top, 0px));
    }
    .qr-header-address { padding: 9px 14px; min-height: 40px; font-size: 13px; }
    .qr-card-body { gap: 8px; }
    .qr-card-name { font-size: 16.5px; }
    .qr-info-item { font-size: 12px; }
}

/* ── ≥1024px: sidebar appears, layout becomes two-column ─────────────────────── */
@media (min-width: 1024px) {
    .qr-listing-layout {
        grid-template-columns: 280px 1fr;
    }
    .qr-listing-sidebar { display: flex; }
    .qr-mobile-filter-btn { display: none; }
    .qr-card-name { font-size: 18px; }
    /* 2 columns → big "zoomed" cards (e-food feel) */
    .qr-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≥1280px: wider sidebar, larger gap (desktop) ────────────────────────────── */
@media (min-width: 1280px) {
    .qr-listing-layout {
        grid-template-columns: 300px 1fr;
        gap: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Phase C — Offers filter chip + card badge
═══════════════════════════════════════════════════════════════ */
.qr-listing-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ════════════════ Offers carousel (Variation B — Claude design) ════════════════ */
.ofrB{
    /* offer accents (one chroma per type) */
    --ofr-1plus1:#7fa024; --ofr-1plus1-bg:#eef5d9;
    --ofr-combo:#0e9d92;  --ofr-combo-bg:#d9f1ee;
    --ofr-gift:#3b7df0;   --ofr-gift-bg:#e0ebfe;
    --ofr-super:#ef6c2e;  --ofr-super-bg:#fde7da;
    /* surfaces */
    --ofr-surface:#fff; --ofr-border:#e9ebe4; --ofr-text:#181b14; --ofr-text2:#585e54; --ofr-muted:#8b9184;
    --ofr-tint:rgba(183,245,30,.14);
    --ofr-shadow:0 1px 2px rgba(20,22,15,.04),0 8px 24px -12px rgba(20,22,15,.12);
    --ofr-shadow-lg:0 4px 12px -4px rgba(20,22,15,.10),0 24px 48px -20px rgba(20,22,15,.22);
    background:var(--ofr-surface); border:1px solid var(--ofr-border); border-radius:24px;
    padding:16px 16px 18px; box-shadow:var(--ofr-shadow); margin:2px 0 18px;
    background-image:radial-gradient(120% 100% at 0% 0%, var(--ofr-tint) 0%, transparent 55%);
}
body.tg-dark .ofrB, html.tg-dark .ofrB{
    --ofr-1plus1-bg:#222a14; --ofr-combo-bg:#0f2725; --ofr-gift-bg:#15233f; --ofr-super-bg:#2e1c12;
    --ofr-surface:#171b13; --ofr-border:#2a3024; --ofr-text:#eef2e6; --ofr-text2:#b3bba9; --ofr-muted:#7e8676;
    --ofr-tint:rgba(183,245,30,.10);
    --ofr-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
    --ofr-shadow-lg:0 6px 18px -6px rgba(0,0,0,.5),0 30px 60px -24px rgba(0,0,0,.8);
}
.ofrB .tg-svg{ width:1em; height:1em; display:block; flex:none; stroke:currentColor;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.ofrB-track{ display:flex; gap:14px; overflow-x:auto; padding:4px; margin:-4px;
    scrollbar-width:none; scroll-snap-type:x proximity; scroll-behavior:smooth; }
.ofrB-track::-webkit-scrollbar{ display:none; }

.ofrB-card{
    --acc:var(--ofr-1plus1); --accbg:var(--ofr-1plus1-bg);
    position:relative; flex:none; width:200px; scroll-snap-align:start;
    border-radius:18px; overflow:hidden; cursor:pointer; background:var(--ofr-surface);
    border:1.5px solid var(--ofr-border); box-shadow:var(--ofr-shadow); padding:0;
    font-family:inherit; text-align:center;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.ofrB-card[data-acc="combo"]   { --acc:var(--ofr-combo);  --accbg:var(--ofr-combo-bg); }
.ofrB-card[data-acc="gift"]    { --acc:var(--ofr-gift);   --accbg:var(--ofr-gift-bg); }
.ofrB-card[data-acc="discount"]{ --acc:var(--ofr-super);  --accbg:var(--ofr-super-bg); }
.ofrB-card:hover{ transform:translateY(-3px); box-shadow:var(--ofr-shadow-lg); }

.ofrB-hero{ height:100px; position:relative; display:grid; place-items:center; overflow:hidden;
    background:linear-gradient(150deg, color-mix(in srgb, var(--acc) 88%, #fff 12%) 0%, var(--acc) 46%, color-mix(in srgb, var(--acc) 76%, #000 16%) 100%); }
.ofrB-hero::after{ content:""; position:absolute; inset:0;
    background:radial-gradient(72% 120% at 82% -12%, rgba(255,255,255,.40), transparent 58%); }
.ofrB-medallion{ position:relative; z-index:1; width:60px; height:60px; border-radius:50%;
    background:rgba(255,255,255,.20); display:grid; place-items:center;
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42), 0 8px 18px -8px rgba(0,0,0,.45); }
.ofrB-medallion .tg-svg{ font-size:29px; color:#fff; }
.ofrB-deco{ position:absolute; border-radius:50%; }
.ofrB-deco.a{ width:96px; height:96px; right:-30px; bottom:-38px; border:2px solid rgba(255,255,255,.22); }
.ofrB-deco.b{ width:40px; height:40px; left:18px; top:-14px; background:rgba(255,255,255,.14); }

.ofrB-body{ padding:13px 14px 15px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.ofrB-name{ font-weight:800; font-size:15.5px; color:var(--ofr-text); line-height:1.1; }
.ofrB-desc{ font-size:12px; font-weight:600; color:var(--ofr-text2); line-height:1.25; }
.ofrB-pill{ margin-top:2px; display:inline-flex; align-items:center; gap:6px;
    background:var(--accbg); color:var(--acc); font-weight:800; font-size:11px;
    padding:5px 11px; border-radius:999px; white-space:nowrap; }
.ofrB-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.ofrB-ring{ position:absolute; inset:0; border-radius:18px; border:2.5px solid transparent; pointer-events:none; transition:.16s; }
.ofrB-check{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
    background:#fff; color:var(--acc); display:none; place-items:center; font-size:15px; z-index:2;
    box-shadow:0 3px 8px rgba(0,0,0,.2); }
.ofrB-check .tg-svg{ font-size:15px; }
.ofrB-card.active{ border-color:var(--acc); }
.ofrB-card.active .ofrB-ring{ border-color:var(--acc); }
.ofrB-card.active .ofrB-check{ display:grid; }

@media (max-width: 599px){ .ofrB-card{ width:170px; } .ofrB{ padding:14px 12px 16px; } }

/* Desktop: cards share the full width of the section (no empty gap on the right).
   Mobile keeps fixed-width horizontal scroll. */
@media (min-width: 700px){
    .ofrB-track{ overflow:visible; justify-content:center; }
    .ofrB-card{ flex:1 1 0; width:auto; min-width:0; max-width:320px; }
}

/* Card badges — which offer types this store has (top-left, clear of the logo) */
.qr-card-offers-badges {
    position: absolute; left: 10px; top: 10px; z-index: 3;
    display: flex; gap: 5px; flex-wrap: wrap; max-width: calc(100% - 110px);
}
.qr-card-offer-chip {
    background: #B7F51E; color: #111 !important; font-weight: 900; font-size: 10.5px;
    padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   ADDRESS PICKER SHEET (e-food style)
   Shown when a logged-in user with ≥1 saved address taps the
   header address pill. Lets them pick a saved address OR open
   the delivery modal to add a new one.
═══════════════════════════════════════════════════════════════ */
.qr-addr-sheet-overlay {
    position: fixed; inset: 0;
    z-index: var(--sl-z-delivery-modal);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .22s;
}
.qr-addr-sheet-overlay.active { opacity: 1; pointer-events: auto; }
.qr-addr-sheet {
    background: #fff;
    border-radius: var(--sl-radius-2xl) var(--sl-radius-2xl) 0 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 100%;
    max-height: min(85vh, calc(100vh - 60px));
    max-height: min(85dvh, calc(100dvh - 60px));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1), background .3s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.qr-addr-sheet-overlay.active .qr-addr-sheet { transform: translateY(0); }
@media (min-width: 600px) {
    .qr-addr-sheet-overlay {
        align-items: center;
        padding: 20px;
    }
    .qr-addr-sheet {
        border-radius: var(--sl-radius-2xl);
        max-width: 480px;
        padding: 20px 20px 24px;
        max-height: 90vh;
    }
}
.qr-addr-sheet-handle {
    width: 40px; height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 12px;
}
@media (min-width: 600px) { .qr-addr-sheet-handle { display: none; } }
.qr-addr-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px;
    margin-bottom: 10px;
}
.qr-addr-sheet-title {
    font-size: 18px; font-weight: 800; color: #111;
    margin: 0;
}
.qr-addr-sheet-close {
    width: var(--sl-touch); height: var(--sl-touch);
    border-radius: 50%;
    border: none;
    background: #f0f0f0; color: #111;
    cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.qr-addr-sheet-close:hover { background: #e0e0e0; }

/* List of saved addresses */
.qr-addr-sheet-list {
    display: flex; flex-direction: column;
    gap: 2px;
    margin: 4px 0 14px;
}
.qr-addr-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
    min-height: 64px;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: var(--sl-radius-md);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}
.qr-addr-row:hover { background: #f7f7f7; }
.qr-addr-row.is-selected { background: #f0fde4; }
/* Radio circle */
.qr-addr-row-radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #d4d4d4;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color .12s;
}
.qr-addr-row.is-selected .qr-addr-row-radio {
    border-color: var(--tg-green-d);
    background: var(--tg-green);
}
.qr-addr-row.is-selected .qr-addr-row-radio::after {
    content: '';
    position: absolute; inset: 4px;
    border-radius: 50%;
    background: #111;
}
/* Pin icon */
.qr-addr-row-icon {
    color: #9fd919;
    font-size: 16px;
    margin-top: 4px;
    flex-shrink: 0;
}
.qr-addr-row.is-selected .qr-addr-row-icon { color: var(--tg-green-d); }
/* Text block */
.qr-addr-row-text {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.qr-addr-row-street {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.qr-addr-row-city {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.3;
}
.qr-addr-row-extra {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qr-addr-row.is-selected .qr-addr-row-street { color: #15803d; }
/* CTA: add new address */
.qr-addr-sheet-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 16px;
    min-height: 52px;
    border: 2px solid var(--tg-green);
    border-radius: var(--sl-radius-md);
    background: var(--tg-green);
    color: #111;
    font-size: 15px; font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .08s;
    -webkit-tap-highlight-color: transparent;
}
.qr-addr-sheet-cta:hover,
.qr-addr-sheet-cta:focus {
    background: #111;
    color: var(--tg-green);
    border-color: #111;
}
.qr-addr-sheet-cta:active { transform: scale(.985); }
.qr-addr-sheet-cta i { font-size: 14px; }
body.tg-dark .qr-addr-sheet-cta:hover,
body.tg-dark .qr-addr-sheet-cta:focus {
    background: #fff;
    color: #111;
    border-color: #fff;
}

/* Dark mode for sheet */
body.tg-dark .qr-addr-sheet                  { background: #1a1a1a; }
body.tg-dark .qr-addr-sheet-title            { color: #f0f0f0; }
body.tg-dark .qr-addr-sheet-handle           { background: #333; }
body.tg-dark .qr-addr-sheet-close            { background: #252525; color: #f0f0f0; }
body.tg-dark .qr-addr-sheet-close:hover      { background: #333; }
body.tg-dark .qr-addr-row:hover              { background: #222; }
body.tg-dark .qr-addr-row.is-selected        { background: #1a2a0e; }
body.tg-dark .qr-addr-row-radio              { background: #1a1a1a; border-color: #444; }
body.tg-dark .qr-addr-row-street             { color: #f0f0f0; }
body.tg-dark .qr-addr-row.is-selected .qr-addr-row-street { color: var(--tg-green); }
body.tg-dark .qr-addr-row-city               { color: #9ca3af; }
body.tg-dark .qr-addr-row-extra              { color: #6b7280; }

/* ═══════════════════════════════════════════════════════════════
   DELIVERY ADDRESS MODAL
   Mobile: full-screen sheet (better autocomplete + keyboard UX).
   Desktop: centered card 480px wide.
═══════════════════════════════════════════════════════════════ */
.qr-dlv-overlay {
    position: fixed; inset: 0;
    z-index: var(--sl-z-delivery-modal);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;            /* sheet from bottom on mobile */
    justify-content: center;
    padding: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .22s;
}
.qr-dlv-overlay.active { opacity: 1; pointer-events: auto; }
.qr-dlv-box {
    background: #fff;
    border-radius: var(--sl-radius-2xl) var(--sl-radius-2xl) 0 0;
    padding: 32px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 100%;
    position: relative;
    box-shadow: var(--sl-shadow-4);
    animation: dlvSlideUp .28s cubic-bezier(.25,.46,.45,.94);
    max-height: 100dvh;
    overflow-y: auto;
}
/* ≥600px: centered card style */
@media (min-width: 600px) {
    .qr-dlv-overlay {
        align-items: center;
        padding: 20px;
    }
    .qr-dlv-box {
        border-radius: var(--sl-radius-2xl);
        padding: 40px 36px 32px;
        max-width: 480px;
        max-height: 90vh;
    }
}
@keyframes dlvSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
html.tg-dark .qr-dlv-box { background: #1a1a1a; }
.qr-dlv-close {
    position: absolute; top: 14px; right: 14px;
    width: var(--sl-touch); height: var(--sl-touch);
    border-radius: 50%;
    border: none; background: #f0f0f0; color: #666;
    cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.qr-dlv-close:hover { background: #e0e0e0; }
html.tg-dark .qr-dlv-close { background: #333; color: #ccc; }
.qr-dlv-icon { font-size: 52px; text-align: center; margin-bottom: 14px; }
.qr-dlv-title {
    font-size: 22px; font-weight: 800; color: #111; text-align: center; margin: 0 0 8px;
}
html.tg-dark .qr-dlv-title { color: #f0f0f0; }
.qr-dlv-sub {
    font-size: 14px; color: #888; text-align: center; margin: 0 0 28px; line-height: 1.5;
}
.qr-dlv-input-wrap {
    position: relative;
    margin-bottom: 12px;
}
.qr-dlv-input-wrap i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #9fd919; font-size: 14px; pointer-events: none;
}
#qr-dlv-input {
    width: 100%; box-sizing: border-box;
    padding: 14px 16px 14px 44px;
    border: 2px solid #e8e8e8; border-radius: 14px;
    font-size: 15px; font-family: inherit;
    background: #fafafa; color: #111;
    transition: border-color .15s;
    outline: none;
}
#qr-dlv-input:focus { border-color: #9fd919; background: #fff; }
html.tg-dark #qr-dlv-input { background: #222; color: #f0f0f0; border-color: #333; }
html.tg-dark #qr-dlv-input:focus { border-color: #9fd919; }
.qr-dlv-confirm-btn {
    width: 100%; padding: 15px;
    background: #B7F51E; color: #111; font-weight: 800; font-size: 15px;
    border: none; border-radius: 14px; cursor: pointer; font-family: inherit;
    transition: background .15s;
    margin-bottom: 10px;
}
.qr-dlv-confirm-btn:hover { background: #111; color: #B7F51E !important; }
.qr-dlv-confirm-btn:disabled { opacity: .5; cursor: default; }
.qr-dlv-skip {
    width: 100%; padding: 10px;
    background: none; border: none; color: #888; font-size: 13px; cursor: pointer;
    font-family: inherit; text-align: center;
    transition: color .15s;
}
.qr-dlv-skip:hover { color: #444; }
.qr-dlv-current {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: #f0fde4; border-radius: 12px;
    margin-bottom: 16px; font-size: 13px; color: #374151;
}
.qr-dlv-current i { color: #9fd919; flex-shrink: 0; }
/* Google autocomplete dropdown fix */
.pac-container { z-index: 9999 !important; border-radius: 12px !important; }
/* .qr-dlv-active-bar removed in Phase 13 — duplicate of header pill. */

/* ═══════════════════════════════════════════════════════════════
   ASTRA OVERRIDES
═══════════════════════════════════════════════════════════════ */
body { padding-top: 0 !important; margin-top: 0 !important; }
html, body { overflow-x: hidden; }
.site-header { display: none !important; }
#page.site, #content, #content.site-content,
.ast-container, .site-content .ast-container, .entry-content-wrap {
    display: block !important; max-width: 100% !important; width: 100% !important;
    padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
}
#primary, #primary.content-area, #primary.content-area.primary-site-main {
    display: block !important; width: 100% !important; max-width: 100% !important;
    flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
#main, #main.site-main, .entry-content, .post-content {
    padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important;
}
.widget-area, .secondary, #secondary { display: none !important; }