.hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }
        body.modal-open { overflow: hidden; }
        
        /* Glassmorphism utilities */
        .glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); }
        .dark .glass { background: rgba(15, 23, 42, 0.85); border-bottom: 1px solid rgba(255,255,255,0.05); }
        
        /* Subtle Golden Michelin Glow */
        .michelin-glow { box-shadow: 0 0 15px -3px rgba(234, 179, 8, 0.2); border-color: rgba(234, 179, 8, 0.4) !important; }
        .dark .michelin-glow { box-shadow: 0 0 20px -5px rgba(234, 179, 8, 0.15); border-color: rgba(234, 179, 8, 0.3) !important; }
        .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }
        .image-vignette::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 28%, transparent 68%, rgba(0,0,0,.45)); }
        .focus-ring:focus-visible { outline: 3px solid rgba(99,102,241,.55); outline-offset: 3px; }
        @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }


        /* Hybrid rollback: keep the original clean site, but retain the redesigned visit cards and mobile command dock. */
        .restaurant-visit-card {
            border-radius: 1.65rem;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        }
        .restaurant-visit-card:hover {
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.13);
        }
        .dark .restaurant-visit-card {
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
        }


        @media (max-width: 767px) {
            body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.8rem); padding-top: .15rem; }
            .legacy-mobile-tabs, .legacy-mobile-sortfilters { display: none !important; }


            .mobile-command-nav {
                position: fixed;
                left: .75rem;
                right: .75rem;
                bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem);
                z-index: 90;
                display: grid;
                grid-template-columns: repeat(var(--mobile-nav-count, 5), minmax(0, 1fr));
                gap: .32rem;
                padding: .42rem;
                border-radius: 28px;
                background: rgba(15,23,42,.88);
                border: 1px solid rgba(255,255,255,.16);
                box-shadow: 0 22px 62px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.10);
                backdrop-filter: blur(22px) saturate(1.15);
                -webkit-backdrop-filter: blur(22px) saturate(1.15);
            }
            .mobile-command-nav button {
                position: relative;
                min-width: 0;
                height: 3.35rem;
                border-radius: 21px;
                color: rgba(255,255,255,.66);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: .18rem;
                font-size: .63rem;
                line-height: 1;
                font-weight: 900;
                letter-spacing: .04em;
                text-transform: uppercase;
                transition: all .18s ease;
            }
            .mobile-command-nav button.is-active {
                color: #111827;
                background: linear-gradient(135deg, #ffffff, #eef2ff 55%, #d1fae5);
                box-shadow: 0 12px 30px rgba(99,102,241,.18);
            }
            .mobile-command-nav button em {
                position: absolute;
                top: .22rem;
                right: .42rem;
                min-width: 1.05rem;
                height: 1.05rem;
                border-radius: 999px;
                display: grid;
                place-items: center;
                background: #10b981;
                color: white;
                font-size: .58rem;
                font-style: normal;
                font-weight: 950;
            }
            .mobile-floating-tools {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 5.15rem) !important;
                right: .85rem !important;
                gap: .45rem !important;
            }


            .mobile-top-searchbar {
                display: flex;
                align-items: center;
                gap: .55rem;
                width: 100%;
            }
            .mobile-top-circle {
                width: 2.75rem;
                height: 2.75rem;
                border-radius: 999px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                border: 1px solid rgba(148, 163, 184, .28);
                box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
                font-size: .78rem;
                font-weight: 950;
                letter-spacing: .04em;
            }
            .mobile-logo-lockup {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: .8rem;
                overflow: hidden;
                transition: max-height .22s ease, opacity .22s ease, transform .22s ease, margin .22s ease, padding .22s ease;
            }
            .mobile-logo-lockup.is-full {
                max-height: 5.6rem;
                opacity: 1;
                transform: translateY(0);
                margin-bottom: .55rem;
                padding-top: .28rem;
            }
            .mobile-logo-lockup.is-compact {
                max-height: 0;
                opacity: 0;
                transform: translateY(-.65rem);
                margin-bottom: 0;
                pointer-events: none;
            }
            .mobile-logo-title {
                transition: font-size .22s ease, letter-spacing .22s ease, opacity .22s ease;
            }
            .mobile-logo-lockup.is-full .mobile-logo-title {
                font-size: 1.72rem;
                letter-spacing: .065em;
            }
            .mobile-logo-lockup.is-compact .mobile-logo-title {
                font-size: 1.62rem;
                letter-spacing: .065em;
                opacity: 0;
            }
            .mobile-logo-lockup.is-compact .mobile-logo-subtitle { display: none; }
            .mobile-bottom-sheet {
                position: fixed !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 9.55rem) !important;
                width: min(21rem, calc(100vw - 1.5rem)) !important;
                max-height: min(62vh, 33rem) !important;
                overflow: auto !important;
                padding: 1rem !important;
                margin: 0 !important;
                border-radius: 30px !important;
                border: 1px solid rgba(255,255,255,.55) !important;
                background: rgba(255,255,255,.96) !important;
                box-shadow: 0 -18px 70px rgba(15,23,42,.18) !important;
                backdrop-filter: blur(24px) saturate(1.1) !important;
                -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
                z-index: 130 !important;
            }
            .dark .mobile-bottom-sheet {
                background: rgba(15,23,42,.96) !important;
                border-color: rgba(255,255,255,.12) !important;
            }
            .legacy-mobile-sortfilters { display: none !important; }


            .glass > .max-w-7xl {
                padding-top: .5rem !important;
                padding-bottom: .5rem !important;
            }
            .glass .mobile-top-searchbar {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }
            .glass .mobile-top-searchbar input {
                font-size: 16px !important;
            }
            .glass .flex.flex-col.lg\:flex-row.w-full {
                gap: .5rem !important;
            }


            @media (max-width: 767px) {
                header.mobile-scrolled > .max-w-7xl {
                    padding-top: .56rem !important;
                    padding-bottom: .56rem !important;
                    display: flex !important;
                    align-items: center !important;
                }
                header.mobile-scrolled .flex.flex-col.lg\:flex-row.w-full {
                    gap: 0 !important;
                    align-items: center !important;
                    justify-content: center !important;
                }
                header.mobile-scrolled .mobile-logo-lockup.is-compact {
                    display: none !important;
                    max-height: 0 !important;
                    height: 0 !important;
                    min-height: 0 !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    line-height: 0 !important;
                    transform: none !important;
                }
                header.mobile-scrolled .flex-1.max-w-md.xl\:max-w-lg.lg\:mx-6.w-full.relative.z-50 {
                    margin-top: 0 !important;
                    margin-bottom: 0 !important;
                    display: flex !important;
                    align-items: center !important;
                }
                header.mobile-scrolled .mobile-top-searchbar {
                    height: 2.45rem !important;
                    padding-top: 0 !important;
                    padding-bottom: 0 !important;
                    margin-top: 0 !important;
                    margin-bottom: 0 !important;
                    align-items: center !important;
                }
                header.mobile-scrolled .mobile-top-searchbar .relative.h-11 {
                    height: 2.45rem !important;
                }
                header.mobile-scrolled .mobile-top-circle {
                    width: 2.45rem !important;
                    height: 2.45rem !important;
                    box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
                }


                header.mobile-scrolled .hidden.lg\:flex.flex-col.lg\:flex-row.items-center {
                    display: none !important;
                    height: 0 !important;
                    margin: 0 !important;
                    padding: 0 !important;
                }
                header.mobile-at-top > .max-w-7xl {
                    padding-top: .62rem !important;
                    padding-bottom: .62rem !important;
                }
                .mobile-logo-title {
                    color: rgb(15 23 42);
                }
                .dark .mobile-logo-title {
                    color: white;
                }
            }


            .mobile-filters-bubble,
            .mobile-sort-bubble {
                top: auto !important;
                transform: none !important;
                z-index: 120 !important;
            }
            header .mobile-sort-bubble {
                display: none !important;
            }
            .mobile-filters-bubble {
                left: .75rem !important;
                right: .75rem !important;
                width: auto !important;
                max-height: min(74vh, 40rem) !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 9.95rem) !important;
            }
            .mobile-sort-bubble {
                right: .85rem !important;
                width: min(18.5rem, calc(100vw - 1.5rem)) !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 9.95rem) !important;
            }
            @media (max-width: 390px) {
                .mobile-bottom-sheet {
                    width: calc(100vw - 1.5rem) !important;
                    right: .75rem !important;
                }
                .mobile-filters-bubble {
                    left: .75rem !important;
                    right: .75rem !important;
                    width: auto !important;
                }
                .mobile-sort-bubble {
                    right: .75rem !important;
                    width: min(18.5rem, calc(100vw - 1.5rem)) !important;
                }
            }


            .mobile-floating-tools {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 5.85rem) !important;
                right: .85rem !important;
                gap: .55rem !important;
                flex-direction: row !important;
                align-items: center !important;
            }
            .top-fab {
                height: 2.85rem !important;
                min-height: 2.85rem !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                align-items: center !important;
                will-change: auto !important;
                transform: none !important;
                border-radius: 20px !important;
            }
            .top-fab:hover,
            .top-fab:active {
                transform: none !important;
            }
            .mobile-jlh-fab {
                min-height: 2.85rem !important;
                padding: .78rem 1rem !important;
                border-radius: 20px !important;
                box-shadow: 0 18px 42px rgba(15,23,42,.22) !important;
            }


            .glass .animate-in.slide-in-from-top-2 {
                position: fixed !important;
                left: .75rem !important;
                right: .75rem !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 4.85rem) !important;
                max-height: min(68vh, 34rem) !important;
                overflow: auto !important;
                padding: 1rem !important;
                margin: 0 !important;
                border-radius: 30px !important;
                border: 1px solid rgba(255,255,255,.48) !important;
                background: rgba(255,255,255,.94) !important;
                box-shadow: 0 -18px 70px rgba(15,23,42,.18) !important;
                backdrop-filter: blur(24px) !important;
                z-index: 89 !important;
            }
            .dark .glass .animate-in.slide-in-from-top-2 {
                background: rgba(15,23,42,.94) !important;
                border-color: rgba(255,255,255,.12) !important;
            }


            .restaurant-visit-card {
                border-radius: 36px !important;
                overflow: hidden !important;
                border: 1px solid rgba(255,255,255,.72) !important;
                background: rgba(255,255,255,.72) !important;
                box-shadow: 0 28px 70px rgba(30,27,23,.15) !important;
            }
            .dark .restaurant-visit-card {
                background: rgba(15,23,42,.72) !important;
                border-color: rgba(255,255,255,.10) !important;
            }
            .restaurant-visit-card .h-56 {
                height: 15.25rem !important;
                border-bottom: none !important;
            }
            .restaurant-visit-card > .p-5 {
                margin: -2.75rem .75rem .75rem !important;
                border-radius: 30px !important;
                background: rgba(255,255,255,.88) !important;
                backdrop-filter: blur(22px) saturate(1.2) !important;
                -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
                box-shadow: 0 18px 45px rgba(15,23,42,.14) !important;
            }
            .dark .restaurant-visit-card > .p-5 { background: rgba(2,6,23,.78) !important; }
            .restaurant-visit-card h3 {
                font-size: 1.55rem !important;
                line-height: 1.02 !important;
                letter-spacing: -.055em !important;
            }
        }






        /* Sleek mobile header refresh */
        @media (max-width: 767px) {
            header.glass {
                background: rgba(248, 250, 252, .92) !important;
                border-bottom: 1px solid rgba(226, 232, 240, .72) !important;
                box-shadow: 0 12px 34px rgba(15, 23, 42, .08) !important;
                backdrop-filter: blur(22px) saturate(1.16) !important;
                -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
            }
            .dark header.glass {
                background: rgba(2, 6, 23, .90) !important;
                border-bottom-color: rgba(51, 65, 85, .55) !important;
                box-shadow: 0 12px 34px rgba(0, 0, 0, .24) !important;
            }
            header.mobile-at-top > .max-w-7xl {
                padding-top: .86rem !important;
                padding-bottom: .76rem !important;
            }
            header.mobile-scrolled > .max-w-7xl {
                padding-top: .46rem !important;
                padding-bottom: .46rem !important;
            }
            .mobile-logo-lockup.is-full {
                max-height: 4.8rem !important;
                margin-bottom: .82rem !important;
                padding-top: .22rem !important;
            }
            .mobile-logo-title {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: .08rem !important;
                padding: .42rem .72rem !important;
                border-radius: 999px !important;
                border: 1px solid rgba(15, 23, 42, .12) !important;
                background: rgba(255, 255, 255, .68) !important;
                box-shadow: 0 10px 28px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255,255,255,.78) !important;
                font-size: 1.36rem !important;
                letter-spacing: .045em !important;
                color: rgb(15 23 42) !important;
            }
            .dark .mobile-logo-title {
                color: rgb(248 250 252) !important;
                background: rgba(15, 23, 42, .58) !important;
                border-color: rgba(255, 255, 255, .12) !important;
                box-shadow: 0 10px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.06) !important;
            }
            .mobile-logo-title::before,
            .mobile-logo-title::after {
                content: '';
                width: .28rem;
                height: .28rem;
                border-radius: 999px;
                background: currentColor;
                opacity: .34;
                margin: 0 .16rem;
            }
            .mobile-top-searchbar {
                gap: .44rem !important;
                padding: .30rem !important;
                border-radius: 999px !important;
                background: rgba(255, 255, 255, .76) !important;
                border: 1px solid rgba(148, 163, 184, .28) !important;
                box-shadow: 0 16px 42px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.84) !important;
                backdrop-filter: blur(18px) saturate(1.12) !important;
                -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
            }
            .dark .mobile-top-searchbar {
                background: rgba(15, 23, 42, .70) !important;
                border-color: rgba(255, 255, 255, .12) !important;
                box-shadow: 0 16px 42px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.07) !important;
            }
            .mobile-top-searchbar .relative.h-11 {
                height: 2.8rem !important;
                border-radius: 999px !important;
                background: rgba(241, 245, 249, .86) !important;
                box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05) !important;
            }
            .dark .mobile-top-searchbar .relative.h-11 {
                background: rgba(2, 6, 23, .54) !important;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35) !important;
            }
            .mobile-top-searchbar input {
                background: transparent !important;
                border-color: transparent !important;
                box-shadow: none !important;
                border-radius: 999px !important;
                font-weight: 800 !important;
                letter-spacing: .01em !important;
            }
            .mobile-top-searchbar input:focus {
                background: transparent !important;
                border-color: transparent !important;
                box-shadow: none !important;
                --tw-ring-shadow: 0 0 #0000 !important;
            }
            .mobile-top-searchbar svg {
                color: rgb(100 116 139) !important;
            }
            .dark .mobile-top-searchbar svg {
                color: rgb(148 163 184) !important;
            }
            .mobile-top-circle {
                width: 2.8rem !important;
                height: 2.8rem !important;
                border-radius: 999px !important;
                border: 1px solid rgba(148, 163, 184, .24) !important;
                box-shadow: 0 10px 24px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.65) !important;
                transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease !important;
            }
            .mobile-top-circle:active {
                transform: scale(.96);
            }
            header.mobile-scrolled .mobile-top-searchbar {
                height: auto !important;
                padding: .22rem !important;
                box-shadow: 0 10px 26px rgba(15, 23, 42, .09), inset 0 1px 0 rgba(255,255,255,.75) !important;
            }
            .dark header.mobile-scrolled .mobile-top-searchbar {
                box-shadow: 0 10px 26px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.06) !important;
            }
            header.mobile-scrolled .mobile-top-searchbar .relative.h-11 {
                height: 2.46rem !important;
            }
            header.mobile-scrolled .mobile-top-circle {
                width: 2.46rem !important;
                height: 2.46rem !important;
                font-size: .72rem !important;
            }
        }




        /* Alternative expanded mobile header: keep the compact/scrolled bar, but make the at-top state cleaner */
        @media (max-width: 767px) {
            header.mobile-at-top > .max-w-7xl {
                padding-top: 1rem !important;
                padding-bottom: .72rem !important;
            }
            header.mobile-at-top .mobile-logo-lockup.is-full {
                max-height: 5.35rem !important;
                margin-bottom: .95rem !important;
                padding-top: .34rem !important;
                display: flex !important;
                justify-content: center !important;
            }
            header.mobile-at-top .mobile-logo-title {
                padding: 0 !important;
                border: 0 !important;
                border-radius: 0 !important;
                background: transparent !important;
                box-shadow: none !important;
                font-size: 1.48rem !important;
                letter-spacing: .075em !important;
                color: rgb(15 23 42) !important;
                text-shadow: none !important;
            }
            .dark header.mobile-at-top .mobile-logo-title {
                color: rgb(248 250 252) !important;
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
            }
            header.mobile-at-top .mobile-logo-title::before,
            header.mobile-at-top .mobile-logo-title::after {
                display: none !important;
            }
            header.mobile-at-top .mobile-top-searchbar {
                padding: 0 !important;
                gap: .58rem !important;
                border: 0 !important;
                border-radius: 0 !important;
                background: transparent !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            .dark header.mobile-at-top .mobile-top-searchbar {
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
            }
            header.mobile-at-top .mobile-top-searchbar .relative.h-11 {
                height: 2.95rem !important;
                border-radius: 1.25rem !important;
                background: rgba(255, 255, 255, .92) !important;
                border: 1px solid rgba(148, 163, 184, .30) !important;
                box-shadow: 0 10px 28px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.82) !important;
            }
            .dark header.mobile-at-top .mobile-top-searchbar .relative.h-11 {
                background: rgba(15, 23, 42, .78) !important;
                border-color: rgba(255, 255, 255, .13) !important;
                box-shadow: 0 10px 28px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255,255,255,.06) !important;
            }
            header.mobile-at-top .mobile-top-searchbar input {
                font-weight: 700 !important;
            }
            header.mobile-at-top .mobile-top-circle {
                width: 2.95rem !important;
                height: 2.95rem !important;
                border-radius: 1.15rem !important;
                box-shadow: 0 10px 26px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.72) !important;
            }
            .dark header.mobile-at-top .mobile-top-circle {
                box-shadow: 0 10px 26px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.06) !important;
            }
        }




        /* Requested polish pass: slimmer mobile controls, shorter hero cards, sleeker dark-grey brand. */
        .brand-logo {
            color: #1f2933 !important;
            letter-spacing: .115em !important;
            font-weight: 800 !important;
            text-rendering: geometricPrecision;
            -webkit-font-smoothing: antialiased;
            filter: drop-shadow(0 1px 0 rgba(255,255,255,.48));
        }
        .brand-logo span {
            color: inherit !important;
        }
        .brand-logo span:first-child,
        .brand-logo span:last-child {
            color: #4b5563 !important;
            font-weight: 300 !important;
        }
        .brand-logo span:nth-child(2) {
            color: #111827 !important;
            font-weight: 900 !important;
            letter-spacing: .055em !important;
        }
        .dark .brand-logo {
            color: #d1d5db !important;
            filter: none;
        }
        .dark .brand-logo span:first-child,
        .dark .brand-logo span:last-child {
            color: #9ca3af !important;
        }
        .dark .brand-logo span:nth-child(2) {
            color: #f3f4f6 !important;
        }


        @media (max-width: 767px) {
            body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) !important; }


            .mobile-command-nav {
                left: .7rem !important;
                right: .7rem !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + .62rem) !important;
                gap: .26rem !important;
                padding: .32rem !important;
                border-radius: 24px !important;
                background: rgba(17, 24, 39, .91) !important;
                box-shadow: 0 18px 48px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.10) !important;
            }
            .mobile-command-nav button {
                height: 2.92rem !important;
                border-radius: 18px !important;
                gap: .12rem !important;
                font-size: .58rem !important;
                letter-spacing: .035em !important;
            }
            .mobile-command-nav button svg {
                width: 1rem !important;
                height: 1rem !important;
            }
            .mobile-command-nav button em {
                top: .16rem !important;
                right: .34rem !important;
                min-width: .95rem !important;
                height: .95rem !important;
                font-size: .52rem !important;
            }


            .mobile-floating-tools {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 5.15rem) !important;
                gap: .4rem !important;
            }
            .top-fab {
                height: 2.52rem !important;
                min-height: 2.52rem !important;
                padding: 0 .78rem !important;
                border-radius: 16px !important;
                font-size: .66rem !important;
                letter-spacing: .045em !important;
                box-shadow: 0 14px 32px rgba(15,23,42,.20) !important;
            }
            .top-fab svg {
                width: .9rem !important;
                height: .9rem !important;
            }


            header.glass {
                background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(248,250,252,.90)) !important;
                border-bottom: 1px solid rgba(203,213,225,.58) !important;
                box-shadow: 0 10px 30px rgba(15, 23, 42, .075) !important;
            }
            .dark header.glass {
                background: linear-gradient(180deg, rgba(2,6,23,.96), rgba(15,23,42,.88)) !important;
                border-bottom-color: rgba(71,85,105,.45) !important;
            }
            header.mobile-at-top > .max-w-7xl {
                padding-top: .82rem !important;
                padding-bottom: .64rem !important;
            }
            header.mobile-scrolled > .max-w-7xl {
                padding-top: .38rem !important;
                padding-bottom: .38rem !important;
            }
            header.mobile-at-top .mobile-logo-lockup.is-full {
                max-height: 4.75rem !important;
                margin-bottom: .74rem !important;
                padding-top: .18rem !important;
            }
            header.mobile-at-top .mobile-logo-title,
            .mobile-logo-title {
                font-size: 1.34rem !important;
                letter-spacing: .092em !important;
                color: #1f2933 !important;
            }
            header.mobile-at-top .mobile-top-searchbar {
                gap: .48rem !important;
            }
            header.mobile-at-top .mobile-top-searchbar .relative.h-11 {
                height: 2.66rem !important;
                border-radius: 1.05rem !important;
                background: rgba(255,255,255,.94) !important;
                box-shadow: 0 9px 24px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.82) !important;
            }
            header.mobile-at-top .mobile-top-circle {
                width: 2.66rem !important;
                height: 2.66rem !important;
                border-radius: 1.05rem !important;
            }
            header.mobile-scrolled .mobile-top-searchbar {
                padding: .18rem !important;
                border-radius: 1.15rem !important;
                background: rgba(255,255,255,.80) !important;
            }
            header.mobile-scrolled .mobile-top-searchbar .relative.h-11 {
                height: 2.32rem !important;
            }
            header.mobile-scrolled .mobile-top-circle {
                width: 2.32rem !important;
                height: 2.32rem !important;
                border-radius: .95rem !important;
            }
            .dark header.mobile-at-top .mobile-top-searchbar .relative.h-11,
            .dark header.mobile-scrolled .mobile-top-searchbar {
                background: rgba(15,23,42,.76) !important;
            }


            .restaurant-visit-card {
                border-radius: 32px !important;
                box-shadow: 0 22px 56px rgba(30,27,23,.13) !important;
            }
            .restaurant-visit-card .h-56 {
                height: 14.25rem !important;
            }
            .restaurant-visit-card > .p-5 {
                margin: -2.45rem .68rem .68rem !important;
                padding: 1.05rem !important;
                border-radius: 26px !important;
                box-shadow: 0 15px 38px rgba(15,23,42,.13) !important;
            }
            .restaurant-visit-card h3 {
                font-size: 1.42rem !important;
                line-height: 1.04 !important;
            }
        }


    


        /* Mobile scrolled header width balance: search + JLH + theme fill the persistent top bar evenly */
        @media (max-width: 767px) {
            header.mobile-scrolled > .max-w-7xl {
                padding-left: .72rem !important;
                padding-right: .72rem !important;
            }
            header.mobile-scrolled .flex.flex-col.lg\:flex-row.w-full,
            header.mobile-scrolled .flex-1.max-w-md.xl\:max-w-lg.lg\:mx-6.w-full.relative.z-50 {
                width: 100% !important;
                max-width: none !important;
                flex: 1 1 auto !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            header.mobile-scrolled .mobile-top-searchbar {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) 2.32rem 2.32rem !important;
                width: 100% !important;
                gap: .42rem !important;
                padding: .18rem !important;
                align-items: center !important;
                box-sizing: border-box !important;
            }
            header.mobile-scrolled .mobile-top-searchbar .relative.h-11 {
                min-width: 0 !important;
                width: 100% !important;
            }
            header.mobile-scrolled .mobile-top-circle {
                flex: 0 0 2.32rem !important;
                width: 2.32rem !important;
                height: 2.32rem !important;
                min-width: 2.32rem !important;
                padding: 0 !important;
            }
        }




        /* Flush mobile persistent top bar: make scrolled search + toggles span the full viewport evenly */
        @media (max-width: 767px) {
            header.mobile-scrolled > .max-w-7xl {
                padding-left: 0 !important;
                padding-right: 0 !important;
                max-width: none !important;
                width: 100% !important;
            }
            header.mobile-scrolled .flex.flex-col.lg\:flex-row.justify-between,
            header.mobile-scrolled .flex.flex-col.lg\:flex-row.w-full,
            header.mobile-scrolled .flex-1.max-w-md.xl\:max-w-lg.lg\:mx-6.w-full.relative.z-50 {
                width: 100% !important;
                max-width: none !important;
                flex: 1 1 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            header.mobile-scrolled .mobile-top-searchbar {
                width: calc(100vw - 1rem) !important;
                max-width: calc(100vw - 1rem) !important;
                margin-left: .5rem !important;
                margin-right: .5rem !important;
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) 2.36rem 2.36rem !important;
                gap: .36rem !important;
                padding: .18rem !important;
                border-radius: 1.22rem !important;
                box-sizing: border-box !important;
                align-items: center !important;
            }
            header.mobile-scrolled .mobile-top-searchbar .relative.h-11 {
                width: 100% !important;
                min-width: 0 !important;
                height: 2.34rem !important;
            }
            header.mobile-scrolled .mobile-top-circle {
                width: 2.36rem !important;
                min-width: 2.36rem !important;
                height: 2.36rem !important;
                padding: 0 !important;
                justify-self: stretch !important;
            }
        }




        /* Dynamic hero cards: score and Michelin driven visual states. No trending logic. */
        .dynamic-hero-card {
            position: relative;
            isolation: isolate;
            transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease, opacity .22s ease;
        }
        .dynamic-hero-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            z-index: -1;
            border-radius: inherit;
            opacity: 0;
            transition: opacity .25s ease;
            pointer-events: none;
        }
        .dynamic-hero-card:hover { transform: translateY(-2px); }
        .dynamic-hero-card.hero-elite::before {
            opacity: 1;
            background:
                radial-gradient(circle at 20% 0%, rgba(16,185,129,.28), transparent 34%),
                radial-gradient(circle at 90% 12%, rgba(99,102,241,.24), transparent 32%);
        }
        .dynamic-hero-card.hero-excellent::before {
            opacity: 1;
            background:
                radial-gradient(circle at 18% 4%, rgba(59,130,246,.24), transparent 34%),
                radial-gradient(circle at 88% 10%, rgba(16,185,129,.18), transparent 30%);
        }
        .dynamic-hero-card.hero-low-score {
            opacity: .92;
            filter: saturate(.88);
        }
        .dynamic-hero-card.hero-low-score::before {
            opacity: 1;
            background:
                radial-gradient(circle at 20% 0%, rgba(239,68,68,.16), transparent 34%),
                radial-gradient(circle at 90% 10%, rgba(245,158,11,.14), transparent 32%);
        }
        .dynamic-hero-card.hero-michelin-star {
            border-color: rgba(234,179,8,.55) !important;
            box-shadow:
                0 24px 70px rgba(15,23,42,.14),
                0 0 34px rgba(234,179,8,.22) !important;
        }
        .dynamic-hero-card.hero-michelin-star::before {
            opacity: 1;
            background:
                radial-gradient(circle at 16% 0%, rgba(250,204,21,.36), transparent 34%),
                radial-gradient(circle at 92% 10%, rgba(251,191,36,.22), transparent 30%);
        }
        .dynamic-hero-card.hero-bib-gourmand {
            border-color: rgba(244,114,182,.42) !important;
            box-shadow:
                0 22px 62px rgba(15,23,42,.12),
                0 0 28px rgba(244,114,182,.16) !important;
        }
        .dynamic-hero-card.hero-bib-gourmand::before {
            opacity: 1;
            background:
                radial-gradient(circle at 18% 0%, rgba(244,114,182,.22), transparent 34%),
                radial-gradient(circle at 92% 12%, rgba(251,146,60,.18), transparent 32%);
        }
        .dynamic-hero-card.hero-awarded::before {
            opacity: 1;
            background: radial-gradient(circle at 20% 0%, rgba(234,179,8,.18), transparent 34%);
        }
        .dynamic-hero-card.hero-michelin-star .image-vignette::after {
            background:
                linear-gradient(to bottom, rgba(0,0,0,.18), transparent 26%, transparent 62%, rgba(0,0,0,.58)),
                radial-gradient(circle at 50% 100%, rgba(234,179,8,.22), transparent 45%);
        }
        .dark .dynamic-hero-card.hero-michelin-star {
            box-shadow:
                0 24px 70px rgba(0,0,0,.32),
                0 0 34px rgba(234,179,8,.18) !important;
        }
        .dark .dynamic-hero-card.hero-bib-gourmand {
            box-shadow:
                0 22px 62px rgba(0,0,0,.28),
                0 0 28px rgba(244,114,182,.14) !important;
        }




        /* Desktop card refresh: borrow the mobile glass-card treatment and wrap to two columns sooner. */
        @media (min-width: 768px) {
            .restaurant-card-grid {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 1.5rem;
            }
            .restaurant-visit-card {
                border-radius: 32px !important;
                overflow: hidden !important;
                border: 1px solid rgba(255,255,255,.72) !important;
                background: rgba(255,255,255,.72) !important;
                box-shadow: 0 24px 62px rgba(30,27,23,.12) !important;
            }
            .restaurant-visit-card:hover {
                transform: translateY(-3px) !important;
                box-shadow: 0 30px 78px rgba(30,27,23,.17) !important;
            }
            .dark .restaurant-visit-card {
                background: rgba(15,23,42,.72) !important;
                border-color: rgba(255,255,255,.10) !important;
                box-shadow: 0 24px 62px rgba(0,0,0,.28) !important;
            }
            .restaurant-visit-card .h-56 {
                height: 13.75rem !important;
                border-bottom: none !important;
            }
            .restaurant-visit-card > .p-5 {
                margin: -2.35rem .8rem .8rem !important;
                padding: 1.05rem !important;
                border-radius: 28px !important;
                background: rgba(255,255,255,.90) !important;
                backdrop-filter: blur(22px) saturate(1.2) !important;
                -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
                box-shadow: 0 16px 42px rgba(15,23,42,.13) !important;
            }
            .dark .restaurant-visit-card > .p-5 {
                background: rgba(2,6,23,.78) !important;
            }
            .restaurant-visit-card h3 {
                font-size: 1.35rem !important;
                line-height: 1.04 !important;
                letter-spacing: -.045em !important;
            }
        }
        @media (min-width: 980px) {
            .restaurant-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (min-width: 1480px) {
            .restaurant-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }




        /* Desktop favourites: let the annual top-three cards sit three across when the content column is wide enough. */
        .favourites-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
            gap: 1.5rem;
        }
        @media (min-width: 1024px) {
            .favourites-card-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }


        /* Desktop reviewer profiles: use three card columns as soon as the expanded profile area has room. */
        @media (min-width: 1024px) {
            .reviewer-card-grid.restaurant-card-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }


        /* Desktop non-All-Visits modes: keep the top gallery/timeline/favourites bar aligned
           with the All Visits content column, while allowing the actual mode content below
           to expand into the space where the filter sidebar would otherwise sit. */
        @media (min-width: 768px) {
            .desktop-view-nav-offset {
                margin-left: 20rem !important;
                width: calc(100% - 20rem) !important;
            }
        }




        /* Desktop timeline: keep the card rail horizontally scrollable with a visible scrollbar.
           Mobile still hides the scrollbar to preserve the existing swipe-first feel. */
        .timeline-card-rail {
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-x: contain;
            scroll-snap-type: x proximity;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
            -webkit-overflow-scrolling: touch;
        }
        .timeline-card-rail::-webkit-scrollbar { height: 8px; }
        .timeline-card-rail::-webkit-scrollbar-track { background: transparent; }
        .timeline-card-rail::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
        .timeline-card-rail::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .dark .timeline-card-rail { scrollbar-color: #475569 transparent; }
        .dark .timeline-card-rail::-webkit-scrollbar-thumb { background: #475569; }
        .dark .timeline-card-rail::-webkit-scrollbar-thumb:hover { background: #64748b; }
        .timeline-card-rail > * { scroll-snap-align: start; }
        @media (max-width: 767px) {
            .timeline-card-rail::-webkit-scrollbar { display: none; }
            .timeline-card-rail { -ms-overflow-style: none; scrollbar-width: none; }
        }






        /* Landscape card proportions: make mini restaurant cards wider and less portrait-heavy. */
        @media (max-width: 767px) {
            .restaurant-visit-card .h-56 {
                height: 14.25rem !important;
                min-height: 0 !important;
            }
            .restaurant-visit-card > .p-5 {
                margin-top: -2.45rem !important;
            }
        }
        @media (min-width: 768px) {
            .restaurant-visit-card .h-56 {
                height: 13.75rem !important;
                min-height: 0 !important;
            }
            .restaurant-visit-card > .p-5 {
                margin-top: -2.35rem !important;
            }
        }
        @media (min-width: 980px) and (max-width: 1479px) {
            .restaurant-visit-card .h-56 { height: 12.75rem !important; }
        }




        /* Subtle purple polish: restrained brand accents, safer gallery pills, and desktop scroll alignment. */
        :root {
            --rc-accent: #6f5a8f;
            --rc-accent-strong: #5b4778;
            --rc-accent-soft: #f3eff8;
            --rc-accent-ring: rgba(111, 90, 143, .24);
            --rc-accent-border: #d9cce8;
        }
        .dark {
            --rc-accent: #c4b5fd;
            --rc-accent-strong: #a78bfa;
            --rc-accent-soft: rgba(88, 62, 128, .26);
            --rc-accent-ring: rgba(196, 181, 253, .22);
            --rc-accent-border: rgba(167, 139, 250, .38);
        }
        .brand-logo,
        .mobile-logo-title {
            color: #332b3f !important;
        }
        .brand-logo span:first-child,
        .brand-logo span:last-child {
            color: #756785 !important;
        }
        .brand-logo span:nth-child(2) {
            color: #241d30 !important;
        }
        .dark .brand-logo,
        .dark .mobile-logo-title {
            color: #ede9fe !important;
        }
        .dark .brand-logo span:first-child,
        .dark .brand-logo span:last-child {
            color: #c4b5fd !important;
        }
        .dark .brand-logo span:nth-child(2) {
            color: #faf5ff !important;
        }
        .bg-indigo-600, .hover\:bg-indigo-600:hover { background-color: var(--rc-accent-strong) !important; }
        .text-indigo-500, .hover\:text-indigo-500:hover { color: var(--rc-accent) !important; }
        .text-indigo-600, .hover\:text-indigo-600:hover { color: var(--rc-accent-strong) !important; }
        .text-indigo-700, .hover\:text-indigo-700:hover { color: #574273 !important; }
        .bg-indigo-50, .hover\:bg-indigo-50:hover { background-color: var(--rc-accent-soft) !important; }
        .bg-indigo-100, .hover\:bg-indigo-100:hover { background-color: #ebe3f4 !important; }
        .border-indigo-100 { border-color: #e5daef !important; }
        .border-indigo-200, .hover\:border-indigo-200:hover { border-color: var(--rc-accent-border) !important; }
        .border-indigo-300, .focus\:border-indigo-300:focus { border-color: #bba8d2 !important; }
        .ring-indigo-500, .focus\:ring-indigo-500:focus { --tw-ring-color: var(--rc-accent-ring) !important; }
        .focus\:ring-indigo-500\/10:focus { --tw-ring-color: rgba(111, 90, 143, .10) !important; }
        .selection\:bg-indigo-200::selection { background-color: #ddd0ec !important; }
        .dark .dark\:text-indigo-300 { color: #ddd6fe !important; }
        .dark .dark\:text-indigo-400 { color: #c4b5fd !important; }
        .dark .dark\:bg-indigo-900\/30 { background-color: rgba(76, 56, 115, .30) !important; }
        .dark .dark\:bg-indigo-900\/40 { background-color: rgba(76, 56, 115, .40) !important; }
        .dark .dark\:hover\:bg-indigo-900\/50:hover { background-color: rgba(76, 56, 115, .50) !important; }
        .dark .dark\:border-indigo-800\/30 { border-color: rgba(167, 139, 250, .32) !important; }
        .mobile-command-nav button.is-active {
            background: linear-gradient(135deg, #ffffff, #f3eff8 58%, #e7ddf2) !important;
            box-shadow: 0 12px 30px rgba(111, 90, 143, .16) !important;
        }
        .mobile-jlh-fab,
        .jlh-mode-toggle.is-active {
            background: linear-gradient(135deg, #6f5a8f, #5b4778) !important;
            border-color: #5b4778 !important;
            color: white !important;
            box-shadow: 0 16px 38px rgba(91, 71, 120, .24) !important;
        }
        .jlh-mode-toggle:not(.is-active) {
            border-color: rgba(111, 90, 143, .26) !important;
        }
        .jlh-mode-toggle:not(.is-active):hover {
            border-color: rgba(111, 90, 143, .54) !important;
            color: var(--rc-accent-strong) !important;
        }


        .expanded-photo-pill-rail {
            max-width: min(calc(100vw - 2rem), 34rem);
            scroll-padding-inline: 1rem;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            left: 50% !important;
            right: auto !important;
            translate: none !important;
            transform: translateX(-50%) !important;
        }
        .expanded-photo-pill-rail::-webkit-scrollbar { display: none; }
        .expanded-photo-pill-rail::before,
        .expanded-photo-pill-rail::after {
            content: '';
            position: sticky;
            width: .9rem;
            height: 1rem;
            flex: 0 0 .9rem;
            pointer-events: none;
            z-index: 1;
        }
        .expanded-photo-pill-rail::before {
            left: -.65rem;
            margin-left: -.65rem;
            background: linear-gradient(to right, rgba(0,0,0,.50), transparent);
        }
        .expanded-photo-pill-rail::after {
            right: -.65rem;
            margin-right: -.65rem;
            background: linear-gradient(to left, rgba(0,0,0,.50), transparent);
        }
        @media (max-width: 767px) {
            .expanded-photo-pill-rail { max-width: calc(100vw - 1.5rem); }
        }


        @media (min-width: 768px) {
            .desktop-view-nav,
            .desktop-filter-sidebar {
                transition: top .22s ease, max-height .22s ease;
            }
            .is-page-scrolled .desktop-view-nav {
                top: 86px !important;
            }
            .is-page-scrolled .desktop-filter-sidebar {
                top: 86px !important;
                max-height: calc(100vh - 86px) !important;
            }
        }




        /* Purple refinement pass: mobile JLH theming, subtler logo, and exact desktop rail/sidebar alignment. */
        :root {
            --rc-accent: #74618f;
            --rc-accent-strong: #5f4a7d;
            --rc-accent-soft: #f2eef7;
            --rc-accent-softer: #faf8fc;
            --rc-accent-border: rgba(116, 97, 143, .24);
            --rc-accent-shadow: rgba(95, 74, 125, .18);
        }
        .dark {
            --rc-accent: #c7b8e6;
            --rc-accent-strong: #b9a4df;
            --rc-accent-soft: rgba(88, 67, 124, .34);
            --rc-accent-softer: rgba(44, 34, 62, .46);
            --rc-accent-border: rgba(199, 184, 230, .30);
            --rc-accent-shadow: rgba(0, 0, 0, .25);
        }
        .brand-logo,
        .mobile-logo-title {
            color: #352d42 !important;
            text-shadow: 0 1px 0 rgba(255,255,255,.45);
        }
        .brand-logo span:first-child,
        .brand-logo span:last-child {
            color: #81708f !important;
        }
        .brand-logo span:nth-child(2) {
            color: #2c2339 !important;
        }
        .brand-logo:hover,
        .mobile-logo-title:hover {
            color: var(--rc-accent-strong) !important;
        }
        .dark .brand-logo,
        .dark .mobile-logo-title {
            color: #eee9f7 !important;
            text-shadow: none;
        }
        .dark .brand-logo span:first-child,
        .dark .brand-logo span:last-child {
            color: #bba9d5 !important;
        }
        .dark .brand-logo span:nth-child(2) {
            color: #f8f5fb !important;
        }


        @media (max-width: 767px) {
            .mobile-top-circle[aria-pressed],
            .mobile-filters-bubble button[aria-pressed] {
                border-color: var(--rc-accent-border) !important;
                color: var(--rc-accent-strong) !important;
                background: linear-gradient(135deg, rgba(255,255,255,.96), var(--rc-accent-soft)) !important;
                box-shadow: 0 12px 30px var(--rc-accent-shadow), inset 0 1px 0 rgba(255,255,255,.75) !important;
            }
            .mobile-top-circle[aria-pressed="true"],
            .mobile-filters-bubble button[aria-pressed="true"] {
                border-color: rgba(95, 74, 125, .76) !important;
                color: white !important;
                background: linear-gradient(135deg, #7d689b, #5f4a7d) !important;
                box-shadow: 0 15px 36px rgba(95, 74, 125, .28) !important;
            }
            .dark .mobile-top-circle[aria-pressed],
            .dark .mobile-filters-bubble button[aria-pressed] {
                color: #eadffd !important;
                background: linear-gradient(135deg, rgba(30, 24, 43, .92), rgba(70, 52, 102, .52)) !important;
                border-color: rgba(199, 184, 230, .26) !important;
            }
            .mobile-filters-bubble button[aria-pressed] .text-emerald-600,
            .mobile-filters-bubble button[aria-pressed] .dark\:text-emerald-300,
            .mobile-filters-bubble button[aria-pressed] .text-emerald-700\/80,
            .mobile-filters-bubble button[aria-pressed] .dark\:text-emerald-200\/75,
            .mobile-filters-bubble button[aria-pressed] .text-emerald-700,
            .mobile-filters-bubble button[aria-pressed] .dark\:text-emerald-200 {
                color: currentColor !important;
            }
            .mobile-filters-bubble button[aria-pressed="true"] .text-emerald-50\/90,
            .mobile-filters-bubble button[aria-pressed="true"] .bg-white\/20,
            .mobile-filters-bubble button[aria-pressed="true"] .bg-white {
                color: white !important;
            }
            .mobile-filters-bubble button[aria-pressed="true"] span:last-child {
                color: var(--rc-accent-strong) !important;
                background: rgba(255,255,255,.92) !important;
            }
        }


        @media (min-width: 768px) {
            .desktop-view-nav,
            .desktop-filter-sidebar {
                top: 96px !important;
                transition: top .22s ease, max-height .22s ease;
            }
            .desktop-filter-sidebar {
                max-height: calc(100vh - 96px) !important;
            }
            .is-page-scrolled .desktop-view-nav,
            .is-page-scrolled .desktop-filter-sidebar {
                top: 82px !important;
            }
            .is-page-scrolled .desktop-filter-sidebar {
                max-height: calc(100vh - 82px) !important;
            }
        }




        /* Dark-mode JLH mobile toggle contrast fix: inactive stays quiet, active is visibly pressed. */
        @media (max-width: 767px) {
            .dark .mobile-top-circle[aria-pressed="false"] {
                color: #d8cbee !important;
                background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(31, 25, 44, .82)) !important;
                border-color: rgba(216, 203, 238, .22) !important;
                box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.22) !important;
            }
            .dark .mobile-top-circle[aria-pressed="true"] {
                color: #fffdfd !important;
                background: linear-gradient(135deg, #d9c7ff, #a98ce1 50%, #7352ad) !important;
                border-color: rgba(233, 221, 255, .88) !important;
                box-shadow:
                    0 0 0 2px rgba(216, 199, 255, .18),
                    0 16px 34px rgba(126, 87, 194, .38),
                    inset 0 1px 0 rgba(255,255,255,.36),
                    inset 0 -10px 18px rgba(52, 35, 82, .18) !important;
                transform: translateY(1px) !important;
            }
            .dark .mobile-top-circle[aria-pressed="true"]:active {
                transform: translateY(1px) scale(.97) !important;
            }
        }




        /* v5: Award sheen only for non-expanded large visit cards.
           Expanded/modal cards deliberately keep their original, stable styling. */
        .restaurant-visit-card.dynamic-hero-card.hero-michelin-star,
        .restaurant-visit-card.dynamic-hero-card.hero-bib-gourmand,
        .restaurant-visit-card.dynamic-hero-card.hero-awarded {
            overflow: hidden !important;
        }
        .restaurant-visit-card.dynamic-hero-card.hero-michelin-star > div:first-child::before,
        .restaurant-visit-card.dynamic-hero-card.hero-bib-gourmand > div:first-child::before,
        .restaurant-visit-card.dynamic-hero-card.hero-awarded > div:first-child::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            opacity: .72;
            mix-blend-mode: screen;
            background:
                linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 32%, rgba(255,255,255,.32) 47%, rgba(255,255,255,.08) 61%, transparent 100%),
                radial-gradient(circle at 18% 0%, rgba(167,139,250,.20), transparent 38%);
        }
        .restaurant-visit-card.dynamic-hero-card.hero-michelin-star > div:first-child::before {
            background:
                linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 32%, rgba(255,255,255,.34) 47%, rgba(255,255,255,.08) 61%, transparent 100%),
                radial-gradient(circle at 18% 0%, rgba(250,204,21,.28), transparent 38%),
                radial-gradient(circle at 88% 10%, rgba(167,139,250,.16), transparent 34%);
        }
        .restaurant-visit-card.dynamic-hero-card.hero-bib-gourmand > div:first-child::before {
            background:
                linear-gradient(115deg, transparent 0%, rgba(255,255,255,.07) 32%, rgba(255,255,255,.30) 47%, rgba(255,255,255,.07) 61%, transparent 100%),
                radial-gradient(circle at 18% 0%, rgba(216,180,254,.24), transparent 38%),
                radial-gradient(circle at 88% 10%, rgba(244,114,182,.14), transparent 34%);
        }
        .restaurant-visit-card.dynamic-hero-card.hero-michelin-star > div:first-child::after,
        .restaurant-visit-card.dynamic-hero-card.hero-bib-gourmand > div:first-child::after,
        .restaurant-visit-card.dynamic-hero-card.hero-awarded > div:first-child::after {
            content: '';
            position: absolute;
            inset: auto .9rem .9rem .9rem;
            height: 1px;
            z-index: 4;
            pointer-events: none;
            opacity: .55;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
        }
        .dark .restaurant-visit-card.dynamic-hero-card.hero-michelin-star > div:first-child::before,
        .dark .restaurant-visit-card.dynamic-hero-card.hero-bib-gourmand > div:first-child::before,
        .dark .restaurant-visit-card.dynamic-hero-card.hero-awarded > div:first-child::before {
            opacity: .58;
            mix-blend-mode: screen;
        }




        /* v6: Google-inspired mobile top navigation. Bottom nav is replaced by a floating top menu. */
        @media (max-width: 767px) {
            body {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem) !important;
            }
            .legacy-bottom-nav,
            .mobile-command-nav.legacy-bottom-nav {
                display: none !important;
            }
            .mobile-floating-tools {
                display: none !important;
            }
            header.glass {
                background: transparent !important;
                border-bottom: 0 !important;
                box-shadow: none !important;
                pointer-events: none;
            }
            header.glass > .max-w-7xl,
            header.glass .flex,
            header.glass .mobile-top-searchbar,
            header.glass .mobile-logo-lockup {
                pointer-events: auto;
            }
            header.mobile-at-top > .max-w-7xl,
            header.mobile-scrolled > .max-w-7xl {
                padding-top: calc(env(safe-area-inset-top, 0px) + .72rem) !important;
                padding-bottom: .46rem !important;
                padding-left: .72rem !important;
                padding-right: .72rem !important;
                max-width: none !important;
                width: 100% !important;
            }
            header.mobile-at-top .mobile-logo-lockup.is-full {
                max-height: 3.25rem !important;
                margin-bottom: .38rem !important;
                padding-top: 0 !important;
            }
            header.mobile-at-top .mobile-logo-title,
            .mobile-logo-title {
                font-size: 1.12rem !important;
                letter-spacing: .105em !important;
                opacity: .88;
            }
            .mobile-top-searchbar,
            header.mobile-scrolled .mobile-top-searchbar,
            header.mobile-at-top .mobile-top-searchbar {
                width: 100% !important;
                max-width: none !important;
                margin: 0 !important;
                display: grid !important;
                grid-template-columns: 3rem minmax(0, 1fr) 2.82rem 2.82rem !important;
                gap: .42rem !important;
                padding: .28rem !important;
                border-radius: 999px !important;
                background: rgba(255,255,255,.88) !important;
                border: 1px solid rgba(148, 163, 184, .24) !important;
                box-shadow: 0 14px 36px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.88) !important;
                backdrop-filter: blur(20px) saturate(1.12) !important;
                -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
                align-items: center !important;
            }
            .dark .mobile-top-searchbar,
            .dark header.mobile-scrolled .mobile-top-searchbar,
            .dark header.mobile-at-top .mobile-top-searchbar {
                background: rgba(15, 23, 42, .82) !important;
                border-color: rgba(199, 184, 230, .18) !important;
                box-shadow: 0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07) !important;
            }
            .mobile-menu-trigger,
            .mobile-top-circle,
            header.mobile-scrolled .mobile-top-circle,
            header.mobile-at-top .mobile-top-circle {
                width: 2.82rem !important;
                min-width: 2.82rem !important;
                height: 2.82rem !important;
                border-radius: 999px !important;
                justify-self: center !important;
            }
            .mobile-menu-trigger {
                background: linear-gradient(135deg, #7d689b, #5f4a7d) !important;
                color: #fff !important;
                border-color: rgba(95, 74, 125, .62) !important;
                box-shadow: 0 12px 28px rgba(95,74,125,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
            }
            .mobile-menu-trigger.is-open {
                background: linear-gradient(135deg, #5f4a7d, #47355f) !important;
            }
            .mobile-top-searchbar .relative.h-11,
            header.mobile-scrolled .mobile-top-searchbar .relative.h-11,
            header.mobile-at-top .mobile-top-searchbar .relative.h-11 {
                height: 2.82rem !important;
                min-width: 0 !important;
                width: 100% !important;
                border-radius: 999px !important;
                background: rgba(248,250,252,.92) !important;
            }
            .dark .mobile-top-searchbar .relative.h-11,
            .dark header.mobile-scrolled .mobile-top-searchbar .relative.h-11,
            .dark header.mobile-at-top .mobile-top-searchbar .relative.h-11 {
                background: rgba(2,6,23,.48) !important;
            }
            .mobile-nav-menu-backdrop {
                position: fixed;
                inset: 0;
                z-index: 91;
                background: rgba(15, 23, 42, .34);
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);
            }
            .mobile-nav-menu-sheet {
                position: fixed;
                left: .72rem;
                right: .72rem;
                top: calc(env(safe-area-inset-top, 0px) + 5.15rem);
                z-index: 101;
                padding: .78rem;
                border-radius: 30px;
                background: rgba(255,255,255,.96);
                border: 1px solid rgba(255,255,255,.75);
                box-shadow: 0 28px 70px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.86);
                backdrop-filter: blur(24px) saturate(1.12);
                -webkit-backdrop-filter: blur(24px) saturate(1.12);
            }
            .dark .mobile-nav-menu-sheet {
                background: rgba(15,23,42,.96);
                border-color: rgba(199,184,230,.16);
                box-shadow: 0 28px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
            }
            .mobile-nav-menu-grid {
                display: grid;
                gap: .58rem;
            }
            .mobile-nav-menu-grid button {
                min-height: 4.15rem;
                border-radius: 999px;
                padding: .75rem .95rem .75rem 1.15rem;
                display: flex;
                align-items: center;
                gap: .85rem;
                text-align: left;
                font-size: 1rem;
                font-weight: 850;
                letter-spacing: -.015em;
                color: #251f2f;
                background: rgba(241,245,249,.78);
                border: 1px solid rgba(226,232,240,.72);
                transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
            }
            .mobile-nav-menu-grid button:active { transform: scale(.985); }
            .mobile-nav-menu-grid button.is-active {
                color: #fff;
                background: linear-gradient(135deg, #7d689b, #5f4a7d);
                border-color: rgba(95,74,125,.56);
                box-shadow: 0 12px 28px rgba(95,74,125,.22);
            }
            .dark .mobile-nav-menu-grid button {
                color: #eee9f7;
                background: rgba(30, 41, 59, .74);
                border-color: rgba(199,184,230,.13);
            }
            .dark .mobile-nav-menu-grid button.is-active {
                color: white;
                background: linear-gradient(135deg, #9a7fd0, #67499d);
                border-color: rgba(216,203,238,.38);
            }
            .mobile-bottom-sheet,
            .mobile-filters-bubble,
            .mobile-sort-bubble,
            .glass .animate-in.slide-in-from-top-2 {
                top: calc(env(safe-area-inset-top, 0px) + 5.25rem) !important;
                bottom: auto !important;
                left: .72rem !important;
                right: .72rem !important;
                width: auto !important;
                max-height: min(74vh, 40rem) !important;
                z-index: 99 !important;
            }
        }






        /* v7: mobile top bar refinements, restored bottom filter/sort buttons, and quieter classic theme. */
        :root {
            --rc-accent: #6f6257;
            --rc-accent-deep: #4f463f;
            --rc-accent-soft: #ede8e2;
            --rc-accent-ink: #2b2724;
        }
        .brand-logo span:first-child,
        .brand-logo span:last-child {
            color: #6f6257 !important;
        }
        .brand-logo span:nth-child(2) {
            color: #27231f !important;
        }
        .dark .brand-logo span:first-child,
        .dark .brand-logo span:last-child {
            color: #c8beb2 !important;
        }
        .dark .brand-logo span:nth-child(2) {
            color: #f4f1ed !important;
        }
        @media (max-width: 767px) {
            body {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) !important;
            }


            /* Keep the header area itself transparent; only the individual controls float. */
            header.glass,
            .dark header.glass {
                background: transparent !important;
                border-bottom: 0 !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            .mobile-top-searchbar,
            header.mobile-scrolled .mobile-top-searchbar,
            header.mobile-at-top .mobile-top-searchbar,
            .dark .mobile-top-searchbar,
            .dark header.mobile-scrolled .mobile-top-searchbar,
            .dark header.mobile-at-top .mobile-top-searchbar {
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                padding: 0 !important;
                gap: .46rem !important;
            }
            .mobile-menu-trigger,
            .mobile-top-circle,
            .mobile-top-searchbar .relative.h-11,
            header.mobile-scrolled .mobile-top-searchbar .relative.h-11,
            header.mobile-at-top .mobile-top-searchbar .relative.h-11 {
                box-shadow: 0 10px 24px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255,255,255,.72) !important;
                border: 1px solid rgba(148, 163, 184, .24) !important;
                background: rgba(255,255,255,.94) !important;
            }
            .dark .mobile-menu-trigger,
            .dark .mobile-top-circle,
            .dark .mobile-top-searchbar .relative.h-11,
            .dark header.mobile-scrolled .mobile-top-searchbar .relative.h-11,
            .dark header.mobile-at-top .mobile-top-searchbar .relative.h-11 {
                box-shadow: 0 12px 26px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.07) !important;
                border-color: rgba(226, 218, 207, .14) !important;
                background: rgba(15,23,42,.88) !important;
            }


            /* Classy neutral/taupe theme instead of purple. */
            .mobile-menu-trigger {
                background: linear-gradient(135deg, #4f463f, #2f2a26) !important;
                color: #fff !important;
                border-color: rgba(79,70,63,.48) !important;
                box-shadow: 0 12px 28px rgba(43,39,36,.24), inset 0 1px 0 rgba(255,255,255,.16) !important;
            }
            .mobile-menu-trigger.is-open {
                background: linear-gradient(135deg, #2f2a26, #1f1b18) !important;
            }
            .mobile-logo-title,
            header.mobile-at-top .mobile-logo-title {
                color: #2b2724 !important;
            }
            .dark .mobile-logo-title,
            .dark header.mobile-at-top .mobile-logo-title {
                color: #f4f1ed !important;
            }
            .mobile-nav-menu-grid button.is-active {
                background: linear-gradient(135deg, #6f6257, #4f463f) !important;
                border-color: rgba(79,70,63,.46) !important;
                box-shadow: 0 12px 28px rgba(43,39,36,.18) !important;
            }
            .dark .mobile-nav-menu-grid button.is-active {
                background: linear-gradient(135deg, #8b8176, #5b5148) !important;
                border-color: rgba(226,218,207,.24) !important;
            }
            .mobile-nav-menu-grid button {
                color: #25211e !important;
            }
            .dark .mobile-nav-menu-grid button {
                color: #f2eee9 !important;
            }


            /* JLH follows the same subtle theme with clear on/off contrast. */
            button[aria-pressed].mobile-top-circle {
                color: #5b5148 !important;
            }
            button[aria-pressed="true"].mobile-top-circle {
                background: linear-gradient(135deg, #6f6257, #4f463f) !important;
                color: #fff !important;
                border-color: rgba(79,70,63,.56) !important;
                box-shadow: 0 12px 28px rgba(43,39,36,.24), inset 0 1px 0 rgba(255,255,255,.16) !important;
            }
            .dark button[aria-pressed].mobile-top-circle {
                color: #d8d0c7 !important;
            }
            .dark button[aria-pressed="true"].mobile-top-circle {
                background: linear-gradient(135deg, #c8beb2, #8b8176) !important;
                color: #171411 !important;
                border-color: rgba(226,218,207,.36) !important;
                box-shadow: 0 12px 28px rgba(0,0,0,.34), 0 0 0 2px rgba(226,218,207,.12), inset 0 1px 0 rgba(255,255,255,.22) !important;
            }


            /* The menu sheet clears the full at-top header; when minimised it tucks closer. */
            .is-page-top .mobile-nav-menu-sheet {
                top: calc(env(safe-area-inset-top, 0px) + 7.25rem) !important;
            }
            .is-page-scrolled .mobile-nav-menu-sheet {
                top: calc(env(safe-area-inset-top, 0px) + 4.95rem) !important;
            }
            .mobile-nav-menu-backdrop {
                background: rgba(15, 23, 42, .20) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }


            /* Restore the bottom floating filter/sort controls and their bottom sheets. */
            .mobile-floating-tools {
                display: flex !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
                right: .85rem !important;
                z-index: 120 !important;
                flex-direction: row !important;
                gap: .48rem !important;
            }
            .top-fab {
                background: rgba(31, 27, 24, .92) !important;
                color: #fff !important;
                border-color: rgba(255,255,255,.14) !important;
                box-shadow: 0 16px 36px rgba(15,23,42,.24) !important;
            }
            .top-fab:hover,
            .top-fab:focus-visible {
                background: rgba(47, 42, 38, .96) !important;
            }
            .dark .top-fab {
                background: rgba(244, 241, 237, .92) !important;
                color: #1f1b18 !important;
                border-color: rgba(226,218,207,.24) !important;
            }
            .mobile-filters-bubble,
            .mobile-sort-bubble,
            .mobile-bottom-sheet,
            .glass .animate-in.slide-in-from-top-2 {
                top: auto !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 5.15rem) !important;
                left: .75rem !important;
                right: .75rem !important;
                width: auto !important;
                max-height: min(68vh, 34rem) !important;
                z-index: 119 !important;
            }
            .mobile-sort-bubble {
                left: auto !important;
                width: min(18.5rem, calc(100vw - 1.5rem)) !important;
            }
        }






        /* v8: coherent subtle blue theme and lighter mobile menu trigger. */
        :root {
            --rc-accent: #4f6f8f;
            --rc-accent-strong: #385a7a;
            --rc-accent-deep: #273f56;
            --rc-accent-soft: #eef4f9;
            --rc-accent-soft-2: #e4edf6;
            --rc-accent-border: #c9d9e8;
            --rc-accent-ring: rgba(79, 111, 143, .22);
            --rc-accent-ink: #203143;
        }
        .dark {
            --rc-accent: #9fbad4;
            --rc-accent-strong: #b8cde0;
            --rc-accent-deep: #d7e5f1;
            --rc-accent-soft: rgba(58, 87, 116, .30);
            --rc-accent-soft-2: rgba(79, 111, 143, .34);
            --rc-accent-border: rgba(159, 186, 212, .34);
            --rc-accent-ring: rgba(159, 186, 212, .24);
            --rc-accent-ink: #e7f0f8;
        }


        /* Convert the original indigo/purple utility usage into one quiet blue system. */
        .bg-indigo-600, .hover\:bg-indigo-600:hover { background-color: var(--rc-accent-strong) !important; }
        .text-indigo-500, .hover\:text-indigo-500:hover { color: var(--rc-accent) !important; }
        .text-indigo-600, .hover\:text-indigo-600:hover { color: var(--rc-accent-strong) !important; }
        .text-indigo-700, .hover\:text-indigo-700:hover { color: #304e6b !important; }
        .bg-indigo-50, .hover\:bg-indigo-50:hover { background-color: var(--rc-accent-soft) !important; }
        .bg-indigo-100, .hover\:bg-indigo-100:hover { background-color: var(--rc-accent-soft-2) !important; }
        .border-indigo-100 { border-color: #dbe7f2 !important; }
        .border-indigo-200, .hover\:border-indigo-200:hover { border-color: var(--rc-accent-border) !important; }
        .border-indigo-300, .focus\:border-indigo-300:focus { border-color: #aec6dc !important; }
        .ring-indigo-500, .focus\:ring-indigo-500:focus { --tw-ring-color: var(--rc-accent-ring) !important; }
        .focus\:ring-indigo-500\/10:focus { --tw-ring-color: rgba(79, 111, 143, .10) !important; }
        .selection\:bg-indigo-200::selection { background-color: #d6e4f0 !important; }
        .dark .dark\:text-indigo-300 { color: #cfe0ef !important; }
        .dark .dark\:text-indigo-400 { color: #adc5dc !important; }
        .dark .dark\:bg-indigo-900\/20 { background-color: rgba(58, 87, 116, .20) !important; }
        .dark .dark\:bg-indigo-900\/30 { background-color: rgba(58, 87, 116, .30) !important; }
        .dark .dark\:bg-indigo-900\/40 { background-color: rgba(58, 87, 116, .40) !important; }
        .dark .dark\:hover\:bg-indigo-900\/50:hover { background-color: rgba(58, 87, 116, .50) !important; }
        .dark .dark\:border-indigo-800\/30 { border-color: rgba(159, 186, 212, .30) !important; }


        /* Subtle logo tint; no purple/taupe remnants. */
        .brand-logo,
        .mobile-logo-title,
        header.mobile-at-top .mobile-logo-title {
            color: #203143 !important;
        }
        .brand-logo span:first-child,
        .brand-logo span:last-child {
            color: #58718a !important;
        }
        .brand-logo span:nth-child(2) {
            color: #172638 !important;
        }
        .dark .brand-logo,
        .dark .mobile-logo-title,
        .dark header.mobile-at-top .mobile-logo-title {
            color: #e7f0f8 !important;
        }
        .dark .brand-logo span:first-child,
        .dark .brand-logo span:last-child {
            color: #9fbad4 !important;
        }
        .dark .brand-logo span:nth-child(2) {
            color: #f7fbff !important;
        }


        .mobile-command-nav button.is-active {
            background: linear-gradient(135deg, #ffffff, #eef4f9 58%, #ddebf6) !important;
            box-shadow: 0 12px 30px rgba(56, 90, 122, .16) !important;
        }
        .mobile-jlh-fab,
        .jlh-mode-toggle.is-active {
            background: linear-gradient(135deg, #4f6f8f, #385a7a) !important;
            border-color: rgba(56, 90, 122, .58) !important;
            color: white !important;
            box-shadow: 0 16px 38px rgba(39, 63, 86, .24) !important;
        }
        .jlh-mode-toggle:not(.is-active) {
            border-color: rgba(79, 111, 143, .28) !important;
        }
        .jlh-mode-toggle:not(.is-active):hover {
            border-color: rgba(79, 111, 143, .54) !important;
            color: var(--rc-accent-strong) !important;
        }


        @media (max-width: 767px) {
            /* Menu button should match the light floating controls, not the previous dark filled treatment. */
            .mobile-menu-trigger,
            .mobile-menu-trigger:not(.is-open) {
                background: rgba(255,255,255,.94) !important;
                color: #385a7a !important;
                border-color: rgba(148, 163, 184, .24) !important;
                box-shadow: 0 10px 24px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255,255,255,.72) !important;
            }
            .mobile-menu-trigger:hover,
            .mobile-menu-trigger:focus-visible {
                background: #f8fbfd !important;
                color: #273f56 !important;
                border-color: rgba(79, 111, 143, .30) !important;
            }
            .mobile-menu-trigger.is-open {
                background: linear-gradient(135deg, #eef4f9, #dfeaf4) !important;
                color: #273f56 !important;
                border-color: rgba(79, 111, 143, .34) !important;
                box-shadow: 0 12px 28px rgba(39, 63, 86, .18), inset 0 1px 0 rgba(255,255,255,.82) !important;
            }
            .dark .mobile-menu-trigger,
            .dark .mobile-menu-trigger:not(.is-open) {
                background: rgba(15,23,42,.88) !important;
                color: #cfe0ef !important;
                border-color: rgba(159, 186, 212, .16) !important;
                box-shadow: 0 12px 26px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.07) !important;
            }
            .dark .mobile-menu-trigger.is-open {
                background: linear-gradient(135deg, rgba(58,87,116,.92), rgba(39,63,86,.92)) !important;
                color: #f7fbff !important;
                border-color: rgba(159, 186, 212, .30) !important;
            }


            .mobile-nav-menu-grid button.is-active {
                background: linear-gradient(135deg, #4f6f8f, #385a7a) !important;
                border-color: rgba(56,90,122,.46) !important;
                color: #fff !important;
                box-shadow: 0 12px 28px rgba(39,63,86,.18) !important;
            }
            .dark .mobile-nav-menu-grid button.is-active {
                background: linear-gradient(135deg, #9fbad4, #6f91b1) !important;
                border-color: rgba(159,186,212,.30) !important;
                color: #0f172a !important;
            }


            /* JLH and bottom floating actions use the same understated blue family. */
            button[aria-pressed].mobile-top-circle {
                color: #385a7a !important;
            }
            button[aria-pressed="true"].mobile-top-circle {
                background: linear-gradient(135deg, #4f6f8f, #385a7a) !important;
                color: #fff !important;
                border-color: rgba(56,90,122,.52) !important;
                box-shadow: 0 12px 28px rgba(39,63,86,.23), inset 0 1px 0 rgba(255,255,255,.18) !important;
            }
            .dark button[aria-pressed].mobile-top-circle {
                color: #cfe0ef !important;
            }
            .dark button[aria-pressed="true"].mobile-top-circle {
                background: linear-gradient(135deg, #b8cde0, #7fa0bf) !important;
                color: #101826 !important;
                border-color: rgba(159,186,212,.36) !important;
                box-shadow: 0 12px 28px rgba(0,0,0,.34), 0 0 0 2px rgba(159,186,212,.12), inset 0 1px 0 rgba(255,255,255,.26) !important;
            }
            .top-fab {
                background: rgba(39, 63, 86, .94) !important;
                color: #fff !important;
                border-color: rgba(255,255,255,.14) !important;
                box-shadow: 0 16px 36px rgba(15,23,42,.23) !important;
            }
            .top-fab:hover,
            .top-fab:focus-visible {
                background: rgba(32, 49, 67, .96) !important;
            }
            .dark .top-fab {
                background: rgba(231, 240, 248, .92) !important;
                color: #172638 !important;
                border-color: rgba(159,186,212,.28) !important;
            }
        }




        /* v9: clean blue theme, mobile menu cleanup, neutral JLH filter button, award spacing, desktop rail alignment. */
        :root {
            --rc-accent: #466b8f;
            --rc-accent-strong: #335878;
            --rc-accent-deep: #20384f;
            --rc-accent-soft: #edf4f9;
            --rc-accent-soft-2: #dfeaf3;
            --rc-accent-border: rgba(70, 107, 143, .28);
            --rc-accent-ring: rgba(70, 107, 143, .20);
            --rc-accent-ink: #1d3145;
        }
        .dark {
            --rc-accent: #a6bfd6;
            --rc-accent-strong: #c5d7e8;
            --rc-accent-deep: #e6f0f8;
            --rc-accent-soft: rgba(54, 82, 110, .30);
            --rc-accent-soft-2: rgba(70, 107, 143, .36);
            --rc-accent-border: rgba(166, 191, 214, .32);
            --rc-accent-ring: rgba(166, 191, 214, .22);
            --rc-accent-ink: #e8f1f9;
        }


        /* Stronger but still subtle blue logo treatment. */
        .brand-logo,
        .mobile-logo-title,
        header.mobile-at-top .mobile-logo-title {
            color: var(--rc-accent-ink) !important;
            letter-spacing: .12em !important;
            text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 10px 26px rgba(70,107,143,.08) !important;
        }
        .brand-logo span:first-child,
        .brand-logo span:last-child { color: #5f7891 !important; }
        .brand-logo span:nth-child(2) { color: #12293f !important; }
        .brand-logo:hover,
        .mobile-logo-title:hover { color: var(--rc-accent-strong) !important; }
        .dark .brand-logo,
        .dark .mobile-logo-title,
        .dark header.mobile-at-top .mobile-logo-title {
            color: #e8f1f9 !important;
            text-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
        }
        .dark .brand-logo span:first-child,
        .dark .brand-logo span:last-child { color: #a6bfd6 !important; }
        .dark .brand-logo span:nth-child(2) { color: #f8fbfe !important; }


        /* Remove purple/violet remnants by normalising utility-like purple classes to the blue system. */
        .text-purple-500, .text-purple-600, .text-violet-500, .text-violet-600,
        .hover\:text-purple-600:hover, .hover\:text-violet-600:hover { color: var(--rc-accent-strong) !important; }
        .bg-purple-50, .bg-violet-50, .hover\:bg-purple-50:hover, .hover\:bg-violet-50:hover { background-color: var(--rc-accent-soft) !important; }
        .bg-purple-600, .bg-violet-600, .hover\:bg-purple-600:hover, .hover\:bg-violet-600:hover { background-color: var(--rc-accent-strong) !important; }
        .border-purple-200, .border-violet-200, .hover\:border-purple-200:hover, .hover\:border-violet-200:hover { border-color: var(--rc-accent-border) !important; }


        .mobile-jlh-fab,
        .jlh-mode-toggle.is-active,
        button[aria-pressed="true"].mobile-top-circle {
            background: linear-gradient(135deg, var(--rc-accent), var(--rc-accent-strong)) !important;
            border-color: rgba(51, 88, 120, .54) !important;
            color: #fff !important;
            box-shadow: 0 14px 32px rgba(32, 56, 79, .22) !important;
        }


        /* Mobile filter-popup JLH button: use neutral/blue site styling, not the old green/purple look. */
        @media (max-width: 767px) {
            .mobile-filters-bubble button[aria-pressed] {
                background: rgba(248,250,252,.94) !important;
                color: var(--rc-accent-ink) !important;
                border-color: rgba(148,163,184,.28) !important;
                box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.74) !important;
            }
            .mobile-filters-bubble button[aria-pressed="true"] {
                background: linear-gradient(135deg, #466b8f, #335878) !important;
                color: #fff !important;
                border-color: rgba(51,88,120,.52) !important;
                box-shadow: 0 14px 32px rgba(32,56,79,.22), inset 0 1px 0 rgba(255,255,255,.16) !important;
            }
            .dark .mobile-filters-bubble button[aria-pressed] {
                background: rgba(15,23,42,.86) !important;
                color: #dceaf5 !important;
                border-color: rgba(166,191,214,.18) !important;
                box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
            }
            .dark .mobile-filters-bubble button[aria-pressed="true"] {
                background: linear-gradient(135deg, #a6bfd6, #789bb9) !important;
                color: #0f172a !important;
                border-color: rgba(166,191,214,.34) !important;
            }
            .mobile-filters-bubble button[aria-pressed] .text-emerald-600,
            .mobile-filters-bubble button[aria-pressed] .dark\:text-emerald-300,
            .mobile-filters-bubble button[aria-pressed] .text-emerald-700\/80,
            .mobile-filters-bubble button[aria-pressed] .dark\:text-emerald-200\/75,
            .mobile-filters-bubble button[aria-pressed] .text-emerald-700,
            .mobile-filters-bubble button[aria-pressed] .dark\:text-emerald-200,
            .mobile-filters-bubble button[aria-pressed] .text-emerald-900,
            .mobile-filters-bubble button[aria-pressed] .dark\:text-emerald-100 {
                color: currentColor !important;
            }
            .mobile-filters-bubble button[aria-pressed="true"] span:last-child {
                background: rgba(255,255,255,.90) !important;
                color: #335878 !important;
            }
            .dark .mobile-filters-bubble button[aria-pressed="true"] span:last-child {
                background: rgba(15,23,42,.88) !important;
                color: #dceaf5 !important;
            }
        }


        /* Awarded filter logo spacing: keep Michelin + Bib close together, then give the label more air. */
        .award-logo-pair { gap: .42rem !important; }
        .award-logo-pair img { margin-left: 0 !important; margin-right: 0 !important; }
        @media (min-width: 768px) {
            .award-logo-pair { gap: .14rem !important; margin-right: .35rem !important; }
        }


        /* Desktop: raise the main tab rail so its top aligns with the sort/filter card top. */
        @media (min-width: 768px) {
            .desktop-view-nav {
                top: 91px !important;
                transform: translateY(-5px);
            }
            .is-page-scrolled .desktop-view-nav {
                top: 77px !important;
                transform: translateY(-5px);
            }
            .desktop-filter-sidebar {
                top: 96px !important;
                max-height: calc(100vh - 96px) !important;
            }
            .is-page-scrolled .desktop-filter-sidebar {
                top: 82px !important;
                max-height: calc(100vh - 82px) !important;
            }
        }




        /* v10: make the desktop view rail and left Sort By card share one exact anchor.
           Edge/Windows is picky with sticky descendants when both scroll states resolve to the
           same top value, so keep separate inherited variables for top vs scrolled states. */
        @media (min-width: 1024px) {
            .is-page-top { --desktop-control-top: 109px; }
            .is-page-scrolled { --desktop-control-top: 82px; }


            .desktop-filter-sidebar {
                top: var(--desktop-control-top, 109px) !important;
                max-height: calc(100vh - var(--desktop-control-top, 109px)) !important;
            }
            .desktop-view-nav {
                top: var(--desktop-control-top, 109px) !important;
                padding-top: 0 !important;
                padding-bottom: .5rem !important;
                margin-top: 0 !important;
                align-items: flex-start !important;
            }
            .is-page-scrolled .desktop-filter-sidebar,
            .is-page-scrolled .desktop-view-nav {
                top: 82px !important;
            }
            .is-page-top .desktop-filter-sidebar,
            .is-page-top .desktop-view-nav {
                top: 109px !important;
            }
        }




        /* v11: keep the desktop floating view rail visually anchored to the exact same top
           as the Sort/Filter sidebar in every scroll state. Earlier polish used a -5px
           translate on the rail; Chromium/Edge can preserve that transform while sticky top
           changes, making the rail touch the header. Reset the transform and drive both
           controls from one variable. */
        @media (min-width: 1024px) {
            .is-page-top { --desktop-control-top: 109px; }
            .is-page-scrolled { --desktop-control-top: 82px; }


            .desktop-filter-sidebar,
            .desktop-view-nav,
            .is-page-top .desktop-filter-sidebar,
            .is-page-top .desktop-view-nav,
            .is-page-scrolled .desktop-filter-sidebar,
            .is-page-scrolled .desktop-view-nav {
                top: var(--desktop-control-top) !important;
                transform: none !important;
            }


            .desktop-filter-sidebar {
                max-height: calc(100vh - var(--desktop-control-top)) !important;
            }


            .desktop-view-nav {
                padding-top: 0 !important;
                margin-top: 0 !important;
            }
        }




        /* v12: final desktop alignment guard.
           The Tailwind config makes `lg` start at 768px, so desktop controls can render
           below 1024px. Previous fixes were scoped to 1024px+, leaving the older -5px
           desktop-view-nav transform active in Edge/Windows at some desktop widths.
           Apply the shared anchor across the full desktop range and use a small rail
           offset so the visible floating pill tip lines up with the Sort By card top. */
        @media (min-width: 768px) {
            .is-page-top { --desktop-control-top: 109px; }
            .is-page-scrolled { --desktop-control-top: 82px; }


            .desktop-filter-sidebar,
            .is-page-top .desktop-filter-sidebar,
            .is-page-scrolled .desktop-filter-sidebar {
                top: var(--desktop-control-top) !important;
                transform: none !important;
                max-height: calc(100vh - var(--desktop-control-top)) !important;
            }


            .desktop-view-nav,
            .is-page-top .desktop-view-nav,
            .is-page-scrolled .desktop-view-nav {
                top: var(--desktop-control-top) !important;
                transform: none !important;
                padding-top: 0 !important;
                padding-bottom: .5rem !important;
                margin-top: 0 !important;
                align-items: flex-start !important;
            }
        }




        /* v14: Mobile collapsed visit cards keep a small gap without looking over-padded.
           Reduced the previous spacing by roughly two thirds while preserving the
           adjacent-card margin fallback for mobile browsers. */
        @media (max-width: 767px) {
            .restaurant-card-grid {
                display: flex !important;
                flex-direction: column !important;
                gap: 0.52rem !important;
                row-gap: 0.52rem !important;
            }
            .restaurant-card-grid > .restaurant-visit-card {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
            .restaurant-card-grid > .restaurant-visit-card + .restaurant-visit-card {
                margin-top: 0.52rem !important;
            }
        }




        /* Mobile focused-search scroll fix: keep the top controls fixed to the viewport.
           iOS/WebKit can let sticky headers slip away while an input owns focus; fixed
           positioning keeps the bar visible, and the same mobile-scrolled classes still
           control the compact/minimised layout. */
        @media (max-width: 767px) {
            header.glass {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                z-index: 100 !important;
                transform: translateZ(0) !important;
                will-change: transform;
            }
            main {
                padding-top: calc(env(safe-area-inset-top, 0px) + 7.35rem) !important;
            }
            .is-page-scrolled main {
                padding-top: calc(env(safe-area-inset-top, 0px) + 4.55rem) !important;
            }
        }






        /* Portrait card polish: give visit cards a taller image window on mobile and desktop
           so restaurant photos feel less landscape-cropped and more of each photo is visible. */
        .restaurant-visit-card .h-56 {
            height: 16.25rem !important;
            min-height: 16.25rem !important;
        }
        .restaurant-visit-card .h-56 img {
            object-fit: cover !important;
            object-position: center center !important;
        }
        .restaurant-visit-card > .p-5 {
            margin-top: -2.2rem !important;
        }
        @media (max-width: 767px) {
            .restaurant-visit-card .h-56 {
                height: 17.25rem !important;
                min-height: 17.25rem !important;
            }
            .restaurant-visit-card > .p-5 {
                margin-top: -2.2rem !important;
            }
        }
        @media (min-width: 768px) {
            .restaurant-visit-card .h-56 {
                height: 16rem !important;
                min-height: 16rem !important;
            }
            .restaurant-visit-card > .p-5 {
                margin-top: -2.15rem !important;
            }
        }
        @media (min-width: 980px) and (max-width: 1479px) {
            .restaurant-visit-card .h-56 {
                height: 15.75rem !important;
                min-height: 15.75rem !important;
            }
        }
        @media (min-width: 1480px) {
            .restaurant-visit-card .h-56 {
                height: 16.5rem !important;
                min-height: 16.5rem !important;
            }
        }




        /* v15: Keep collapsed card photo pills clear of the glass detail panel, and keep
           the desktop mode rail above cards as content scrolls beneath it. */
        .restaurant-visit-card .card-photo-pill-nav {
            left: 50% !important;
            right: auto !important;
            bottom: 3.2rem !important;
            transform: translateX(-50%) !important;
            z-index: 22 !important;
        }
        @media (max-width: 767px) {
            .restaurant-visit-card .card-photo-pill-nav {
                bottom: 3.35rem !important;
            }
        }
        @media (min-width: 768px) {
            .desktop-view-nav {
                z-index: 80 !important;
                isolation: isolate;
            }
        }


        


        /* Awarded visual polish: keep award glow on the card, but never draw a sheen layer over the restaurant photo. */
        .restaurant-visit-card.dynamic-hero-card.hero-michelin-star > div:first-child::before,
        .restaurant-visit-card.dynamic-hero-card.hero-bib-gourmand > div:first-child::before,
        .restaurant-visit-card.dynamic-hero-card.hero-awarded > div:first-child::before,
        .restaurant-visit-card.dynamic-hero-card.hero-michelin-star > div:first-child::after,
        .restaurant-visit-card.dynamic-hero-card.hero-bib-gourmand > div:first-child::after,
        .restaurant-visit-card.dynamic-hero-card.hero-awarded > div:first-child::after {
            content: none !important;
            display: none !important;
            background: none !important;
        }




        /* v15: Desktop search dropdown layering.
           Keep autocomplete results above the All Visits/Gallery/Timeline rail and
           other sticky desktop controls. The dropdown is inside the sticky header,
           so the header's own stacking context must sit above the main nav rail. */
        @media (min-width: 768px) {
            header.glass {
                z-index: 220 !important;
                overflow: visible !important;
            }
            header.glass .flex-1.max-w-md.xl\:max-w-lg.lg\:mx-6.w-full.relative {
                z-index: 230 !important;
            }
            header.glass .custom-scrollbar.absolute.top-full {
                z-index: 240 !important;
            }
            .desktop-view-nav {
                z-index: 30 !important;
            }
            .desktop-filter-sidebar {
                z-index: 20 !important;
            }
        }




        /* Desktop expanded modal clearance + centering: center the card inside the visible
           area below the persistent top bar, while preserving a real top buffer. */
        @media (min-width: 768px) {
            .expanded-card-modal-shell {
                justify-content: center !important;
                align-items: center !important;
                padding-top: calc(76px + 1.25rem) !important;
                padding-bottom: 1.25rem !important;
                overflow-y: auto !important;
                overscroll-behavior: contain !important;
                box-sizing: border-box !important;
            }
            .expanded-card-modal-panel {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                max-height: calc(100dvh - 76px - 2.5rem) !important;
            }
        }
        @media (min-width: 768px) and (max-height: 760px) {
            .expanded-card-modal-shell {
                padding-top: calc(76px + .85rem) !important;
                padding-bottom: .85rem !important;
            }
            .expanded-card-modal-panel {
                max-height: calc(100dvh - 76px - 1.7rem) !important;
            }
        }




        /* Desktop expanded photos: remove the black letterbox frame by sizing the
           photo side to the rendered image instead of letting a black container fill
           leftover space. Mobile keeps the existing full-height gallery behavior. */
        @media (min-width: 768px) {
            .expanded-card-modal-panel {
                width: fit-content !important;
                max-width: calc(100vw - 3rem) !important;
            }
            .expanded-card-photo-pane {
                width: auto !important;
                min-height: 0 !important;
                height: auto !important;
                flex: 0 0 auto !important;
                background: transparent !important;
            }
            .expanded-card-details-panel {
                width: min(23rem, 30vw) !important;
                flex: 0 0 min(23rem, 30vw) !important;
            }
            .expanded-gallery-stage {
                flex: 0 0 auto !important;
                width: auto !important;
                height: auto !important;
                background: transparent !important;
            }
            .expanded-gallery-image-stable {
                display: block !important;
                width: auto !important;
                height: auto !important;
                max-width: min(66vw, calc(100vw - 3rem - 21rem)) !important;
                max-height: calc(100dvh - 76px - 2.5rem) !important;
                object-fit: contain !important;
            }
        }
        @media (min-width: 768px) and (max-height: 760px) {
            .expanded-gallery-image-stable {
                max-height: calc(100dvh - 76px - 1.7rem) !important;
            }
        }
        .expanded-gallery-loading-card {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .75rem;
            min-height: 100%;
            color: rgba(255,255,255,.86);
            background:
                radial-gradient(circle at 50% 35%, rgba(148, 163, 184, .22), transparent 36%),
                linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .98));
            pointer-events: none;
        }
        .expanded-gallery-loading-card::before {
            content: '';
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 999px;
            border: 3px solid rgba(255,255,255,.22);
            border-top-color: rgba(255,255,255,.82);
            animation: spin 0.9s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .expanded-gallery-stage.is-loading-photo .expanded-gallery-image-stable {
            opacity: 0;
        }
        @media (min-width: 768px) {
            .expanded-gallery-stage.is-loading-photo {
                width: min(66vw, calc(100vw - 3rem - 21rem)) !important;
                height: min(70vh, calc(100dvh - 76px - 2.5rem)) !important;
                min-width: min(30rem, calc(100vw - 3rem - 21rem)) !important;
                min-height: min(26rem, calc(100dvh - 76px - 2.5rem)) !important;
                background: #0f172a !important;
            }
            .expanded-gallery-stage.is-loading-photo .expanded-gallery-loading-card {
                border-radius: 0;
            }
            .expanded-card-modal-panel:has(.expanded-gallery-stage.is-loading-photo) {
                width: auto !important;
            }
            .expanded-card-modal-panel:has(.expanded-gallery-stage.is-loading-photo) .expanded-card-photo-pane {
                min-width: min(66vw, calc(100vw - 3rem - 21rem)) !important;
            }
        }
        @media (max-width: 767px) {
            .expanded-gallery-loading-card {
                min-height: 100%;
            }
        }

        .expanded-gallery-no-photo-card {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .9rem;
            min-height: 100%;
            color: rgba(255,255,255,.86);
            background:
                radial-gradient(circle at 50% 35%, rgba(148, 163, 184, .18), transparent 36%),
                linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .98));
            pointer-events: none;
        }
        @media (min-width: 768px) {
            .expanded-gallery-stage.is-no-photo {
                width: min(66vw, calc(100vw - 3rem - 21rem)) !important;
                height: min(70vh, calc(100dvh - 76px - 2.5rem)) !important;
                min-width: min(30rem, calc(100vw - 3rem - 21rem)) !important;
                min-height: min(26rem, calc(100dvh - 76px - 2.5rem)) !important;
                background: #0f172a !important;
            }
            .expanded-card-modal-panel:has(.expanded-gallery-stage.is-no-photo) {
                width: auto !important;
            }
            .expanded-card-modal-panel:has(.expanded-gallery-stage.is-no-photo) .expanded-card-photo-pane {
                min-width: min(66vw, calc(100vw - 3rem - 21rem)) !important;
            }
        }




        /* Restaurant map feature */
        .restaurant-map-shell { position: relative; height: min(72vh, 46rem); min-height: 34rem; border-radius: 2rem; overflow: hidden; }
        .restaurant-map-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; min-height: 100%; background: #e2e8f0; }
        .restaurant-map-canvas .leaflet-container, .restaurant-map-canvas.leaflet-container { width: 100% !important; height: 100% !important; min-height: 100% !important; }
        .dark .restaurant-map-canvas { background: #0f172a; }
        .restaurant-map-card { position: absolute; right: 1rem; top: 1rem; width: min(23rem, calc(100% - 2rem)); z-index: 20; }
        .restaurant-map-card-clickable { cursor: pointer; }
        .restaurant-map-card-clickable:hover h3 { text-decoration: underline; }
        .restaurant-map-loading { position: absolute; left: 1rem; bottom: 1rem; z-index: 15; }
        .restaurant-map-fallback-grid { max-height: min(70vh, 44rem); overflow: auto; }
        .restaurant-map-pin {
            width: 2.2rem; height: 2.2rem; border-radius: 999px 999px 999px 0; transform: rotate(-45deg);
            display: grid; place-items: center; color: white; font-weight: 950; font-size: .72rem;
            background: linear-gradient(135deg, var(--rc-accent), var(--rc-accent-strong));
            border: 2px solid rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(15,23,42,.25);
        }
        .restaurant-map-pin span { transform: rotate(45deg); }
        @media (max-width: 767px) {
            .restaurant-map-shell { height: calc(100dvh - 9rem); min-height: 30rem; border-radius: 1.5rem; }
            .restaurant-map-card { left: .75rem; right: .75rem; top: auto; bottom: .75rem; width: auto; }
            .restaurant-map-loading { left: .75rem; bottom: .75rem; }
        }




        /* Robust custom map renderer: tiles, pins and overlays are plain positioned HTML. */
        .restaurant-static-map { overflow: hidden !important; touch-action: manipulation; }
        .restaurant-map-tiles { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #f4f1ea; }
        .dark .restaurant-map-tiles { background: #111827; }
        .restaurant-map-tile { position: absolute; width: var(--restaurant-map-tile-size, 256px) !important; height: var(--restaurant-map-tile-size, 256px) !important; max-width: none !important; user-select: none; -webkit-user-drag: none; image-rendering: auto; backface-visibility: hidden; transform: translateZ(0); }
        .restaurant-map-soft-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.04) 0%, transparent 58%, rgba(15,23,42,.045) 100%); }
        .restaurant-map-attribution { position: absolute; left: .7rem; bottom: .55rem; z-index: 15; padding: .24rem .42rem; border-radius: 999px; background: rgba(255,255,255,.72); color: rgba(51,65,85,.78); font-size: .58rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 8px 20px rgba(15,23,42,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; }
        .dark .restaurant-map-attribution { background: rgba(15,23,42,.68); color: rgba(226,232,240,.72); }
        .restaurant-map-marker { position: absolute !important; z-index: 8 !important; width: 2.05rem; height: 2.05rem; margin-left: -1.025rem; margin-top: -2.05rem; border: 0; border-radius: 999px 999px 999px .25rem; transform: rotate(-45deg); color: white; box-shadow: 0 8px 20px rgba(15,23,42,.25), 0 0 0 3px rgba(255,255,255,.88); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
        .restaurant-map-marker:hover, .restaurant-map-marker:focus-visible { transform: rotate(-45deg) scale(1.13); box-shadow: 0 12px 28px rgba(15,23,42,.32), 0 0 0 4px rgba(255,255,255,.95); outline: none; }
        .restaurant-map-marker span { transform: rotate(45deg); display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: rgba(255,255,255,.18); font-size: .64rem; font-weight: 950; line-height: 1; letter-spacing: -.035em; }
        .restaurant-map-marker.pin-emerald { background: linear-gradient(135deg, #10b981, #059669); }
        .restaurant-map-marker.pin-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
        .restaurant-map-marker.pin-yellow { background: linear-gradient(135deg, #f59e0b, #d97706); color: #111827; }
        .restaurant-map-marker.pin-red { background: linear-gradient(135deg, #ef4444, #dc2626); }
        .restaurant-map-marker.pin-slate { background: linear-gradient(135deg, #64748b, #475569); }
        .dark .restaurant-map-marker { box-shadow: 0 8px 20px rgba(0,0,0,.38), 0 0 0 3px rgba(15,23,42,.88); }
        .restaurant-map-controls { position: absolute; right: 1rem; bottom: 1rem; z-index: 16; display: grid; gap: .35rem; align-items: center; padding: .28rem; border-radius: 1.15rem; background: rgba(255,255,255,.72); border: 1px solid rgba(148,163,184,.26); box-shadow: 0 12px 30px rgba(15,23,42,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
        .restaurant-map-controls button { width: 2.15rem; height: 2.15rem; border-radius: .9rem; border: 0; background: transparent; color: #334155; font-weight: 950; font-size: 1.1rem; line-height: 1; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
        .restaurant-map-controls button:hover { background: rgba(15,23,42,.08); color: #111827; transform: translateY(-1px); }
        .restaurant-map-controls button:active { transform: translateY(0); }


        .restaurant-map-controls button svg { width: 1.05rem; height: 1.05rem; display: block; margin: 0 auto; }
        .dark .restaurant-map-controls { background: rgba(15,23,42,.72); border-color: rgba(148,163,184,.18); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
        .dark .restaurant-map-controls button { color: #e2e8f0; }
        .dark .restaurant-map-controls button:hover { background: rgba(255,255,255,.10); color: #fff; }
        .restaurant-map-city-nav { display: flex; gap: .55rem; overflow-x: auto; padding: .15rem .1rem .55rem; margin: -.15rem 0 -.2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .restaurant-map-city-nav::-webkit-scrollbar { display: none; }
        .restaurant-map-city-nav button { flex: 0 0 auto; border-radius: 999px; border: 1px solid rgba(148,163,184,.32); background: rgba(255,255,255,.82); color: #334155; padding: .55rem .82rem; font-size: .74rem; line-height: 1; font-weight: 950; letter-spacing: .035em; text-transform: uppercase; box-shadow: 0 8px 22px rgba(15,23,42,.06); transition: transform .15s ease, border-color .15s ease, background-color .15s ease; }
        .restaurant-map-city-nav button:hover { transform: translateY(-1px); border-color: var(--rc-accent-border); background: var(--rc-accent-soft); color: var(--rc-accent-strong); }
        .restaurant-map-city-nav button span { margin-left: .35rem; opacity: .54; font-weight: 900; }
        .dark .restaurant-map-city-nav button { background: rgba(15,23,42,.76); color: #e2e8f0; border-color: rgba(148,163,184,.20); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
        @media (max-width: 767px) {
            .restaurant-map-controls { right: .75rem; bottom: 4.25rem; }
            .restaurant-map-marker { width: 1.85rem; height: 1.85rem; margin-left: -.925rem; margin-top: -1.85rem; }
            .restaurant-map-marker span { width: 1.18rem; height: 1.18rem; font-size: .58rem; }
        }








        /* Map interaction rewrite: London default, draggable touch/mouse map, keyboard controls, anchored popups. */
        .restaurant-static-map { cursor: grab !important; touch-action: none !important; user-select: none !important; outline: none !important; }
        .restaurant-static-map:active { cursor: grabbing !important; }
        .restaurant-static-map:focus-visible { box-shadow: inset 0 0 0 3px rgba(99,102,241,.45); }
        .restaurant-map-marker { cursor: pointer !important; touch-action: none !important; }
        .restaurant-map-marker.is-selected { z-index: 22 !important; transform: translate(-50%, -100%) scale(1.12) !important; box-shadow: 0 0 0 6px rgba(111,90,143,.18), 0 16px 34px rgba(15,23,42,.30) !important; }
        .restaurant-map-pin-popup {
            position: absolute;
            z-index: 28;
            width: min(21rem, calc(100% - 1.5rem));
            transform: translate(-50%, -100%);
            pointer-events: auto;
        }
        .restaurant-map-pin-popup::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -.55rem;
            width: 1.1rem;
            height: 1.1rem;
            transform: translateX(-50%) rotate(45deg);
            background: rgba(255,255,255,.96);
            border-right: 1px solid rgb(226 232 240);
            border-bottom: 1px solid rgb(226 232 240);
            z-index: -1;
        }
        .dark .restaurant-map-pin-popup::after {
            background: rgba(2,6,23,.96);
            border-color: rgb(30 41 59);
        }
        .restaurant-map-popup-close {
            position: absolute;
            right: .65rem;
            top: .65rem;
            z-index: 3;
            width: 1.85rem;
            height: 1.85rem;
            border-radius: 999px;
            display: grid;
            place-items: center;
            background: rgba(15,23,42,.68);
            color: white;
            font-weight: 950;
            line-height: 1;
            backdrop-filter: blur(8px);
        }
        .restaurant-map-controls { pointer-events: auto; }
        @media (max-width: 767px) {
            .restaurant-map-pin-popup { width: min(18.75rem, calc(100vw - 2rem)); }
        }




        /* v4 map UI: map-only filters and cleaner desktop/mobile controls. */
        .restaurant-map-page { --map-panel-radius: 1.65rem; }
        .restaurant-map-hero { padding: .1rem .05rem; }
        .restaurant-map-filter-panel {
            border-radius: var(--map-panel-radius);
            padding: .9rem;
            display: grid;
            gap: .85rem;
        }
        .restaurant-map-filter-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .75rem;
        }
        .restaurant-map-select-wrap { display: grid; gap: .35rem; }
        .restaurant-map-select-wrap span {
            font-size: .66rem;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #64748b;
            padding-left: .2rem;
        }
        .dark .restaurant-map-select-wrap span { color: #94a3b8; }
        .restaurant-map-select-wrap select {
            width: 100%;
            border-radius: 1rem;
            border: 1px solid rgba(148,163,184,.30);
            background: rgba(248,250,252,.92);
            color: #0f172a;
            font-size: .82rem;
            font-weight: 850;
            padding: .72rem .85rem;
            outline: none;
        }
        .dark .restaurant-map-select-wrap select {
            background: rgba(2,6,23,.64);
            border-color: rgba(148,163,184,.20);
            color: #f8fafc;
        }
        .restaurant-map-rating-row, .restaurant-map-chip-row {
            display: flex;
            gap: .45rem;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .restaurant-map-rating-row::-webkit-scrollbar, .restaurant-map-chip-row::-webkit-scrollbar { display: none; }
        .restaurant-map-rating-row button, .restaurant-map-chip-row button, .restaurant-map-filter-toggle, .restaurant-map-reset-btn {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            border-radius: 999px;
            border: 1px solid rgba(148,163,184,.30);
            background: rgba(255,255,255,.86);
            color: #334155;
            padding: .58rem .78rem;
            font-size: .73rem;
            font-weight: 950;
            line-height: 1;
            letter-spacing: .035em;
            text-transform: uppercase;
            box-shadow: 0 8px 22px rgba(15,23,42,.06);
            transition: transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
        }
        .restaurant-map-rating-row button:hover, .restaurant-map-chip-row button:hover, .restaurant-map-filter-toggle:hover, .restaurant-map-reset-btn:hover { transform: translateY(-1px); border-color: var(--rc-accent-border); color: var(--rc-accent-strong); }
        .restaurant-map-rating-row button.is-active { background: linear-gradient(135deg, #74618f, #5f4a7d); color: #fff; border-color: transparent; box-shadow: 0 12px 30px rgba(95,74,125,.20); }
        .restaurant-map-chip-row button { background: var(--rc-accent-soft); color: var(--rc-accent-strong); border-color: var(--rc-accent-border); text-transform: none; letter-spacing: 0; }
        .restaurant-map-filter-toggle span { min-width: 1.15rem; height: 1.15rem; border-radius: 999px; background: #10b981; color: white; display: inline-grid; place-items: center; font-size: .64rem; }
        .restaurant-map-reset-btn { color: #be123c; background: rgba(255,241,242,.88); border-color: rgba(253,164,175,.45); }
        .dark .restaurant-map-rating-row button, .dark .restaurant-map-chip-row button, .dark .restaurant-map-filter-toggle {
            background: rgba(15,23,42,.76);
            color: #e2e8f0;
            border-color: rgba(148,163,184,.20);
            box-shadow: 0 8px 22px rgba(0,0,0,.16);
        }
        .dark .restaurant-map-reset-btn { background: rgba(76,29,43,.40); color: #fda4af; border-color: rgba(251,113,133,.25); }
        .dark .restaurant-map-rating-row button.is-active { background: linear-gradient(135deg, #c7b8e6, #7c5bad); color: #111827; }
        .restaurant-map-shell { height: min(72vh, 48rem); min-height: 36rem; border-radius: 2rem; }
        .restaurant-map-controls {
            right: .9rem !important;
            bottom: .9rem !important;
            display: flex !important;
            flex-direction: column;
            gap: 0 !important;
            padding: .22rem !important;
            border-radius: 999px !important;
            background: rgba(255,255,255,.82) !important;
        }
        .restaurant-map-controls button {
            width: 2.35rem !important;
            height: 2.35rem !important;
            border-radius: 999px !important;
            font-size: 1.18rem !important;
            background: transparent !important;
        }
        .restaurant-map-controls button + button { border-top: 1px solid rgba(148,163,184,.22) !important; border-radius: 0 0 999px 999px !important; }
        .restaurant-map-controls button:first-child { border-radius: 999px 999px 0 0 !important; }
        .restaurant-map-loading { left: .9rem !important; bottom: .9rem !important; max-width: calc(100% - 5.5rem); }
        @media (min-width: 1024px) {
            .restaurant-map-filter-panel {
                grid-template-columns: minmax(18rem, 1.4fr) minmax(22rem, 2fr);
                align-items: end;
            }
            .restaurant-map-search { grid-row: span 2; align-self: center; }
            .restaurant-map-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (max-width: 767px) {
            .restaurant-map-hero { gap: .85rem !important; }
            .restaurant-map-filter-panel { border-radius: 1.35rem; padding: .72rem; gap: .72rem; }
            .restaurant-map-filter-grid { grid-template-columns: 1fr; gap: .55rem; }
            .restaurant-map-select-wrap select { padding: .68rem .8rem; font-size: .78rem; }
            .restaurant-map-shell { height: calc(100dvh - 16.5rem) !important; min-height: 27rem !important; border-radius: 1.35rem !important; }
            .restaurant-map-city-nav { padding-bottom: .35rem !important; }
            .restaurant-map-city-nav button { padding: .5rem .72rem !important; font-size: .68rem !important; }
            .restaurant-map-controls { right: .65rem !important; bottom: .65rem !important; }
            .restaurant-map-controls button { width: 2.12rem !important; height: 2.12rem !important; }
            .restaurant-map-loading { left: .65rem !important; bottom: .65rem !important; font-size: .68rem !important; padding: .52rem .72rem !important; }
            .restaurant-map-pin-popup { width: min(18.75rem, calc(100vw - 1.5rem)) !important; }
        }




        /* v5 map filters: independent left sidebar on desktop, FAB sheet on mobile, no city jump row. */
        .restaurant-map-desktop-grid { display: block; }
        .restaurant-map-main { min-width: 0; }
        .restaurant-map-status-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
        .restaurant-map-status-pill { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .55rem .82rem; background: rgba(255,255,255,.86); border: 1px solid rgba(148,163,184,.25); box-shadow: 0 8px 22px rgba(15,23,42,.055); color: #475569; font-size: .74rem; font-weight: 900; }
        .restaurant-map-status-pill strong { color: var(--rc-accent-strong); font-weight: 950; }
        .restaurant-map-status-pill.is-city { max-width: min(100%, 38rem); overflow: hidden; }
        .restaurant-map-status-pill.is-city span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
        .dark .restaurant-map-status-pill { background: rgba(15,23,42,.78); color: #cbd5e1; border-color: rgba(148,163,184,.18); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
        @media (min-width: 1024px) {
            .restaurant-map-desktop-grid { display: flex; align-items: flex-start; gap: 2rem; }
            .restaurant-map-sidebar { top: 109px !important; }
            .restaurant-map-main { flex: 1 1 auto; }
            .restaurant-map-shell { height: min(76vh, 52rem) !important; min-height: 39rem !important; }
        }
        .restaurant-map-mobile-fab {
            position: fixed;
            right: .85rem;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
            z-index: 88;
            min-height: 2.9rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .82rem 1.05rem;
            color: #fff;
            background: linear-gradient(135deg, #74618f, #5f4a7d);
            border: 1px solid rgba(255,255,255,.18);
            box-shadow: 0 18px 44px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.16);
            font-size: .72rem;
            font-weight: 950;
            letter-spacing: .04em;
            text-transform: uppercase;
        }
        .restaurant-map-mobile-fab em { min-width: 1.1rem; height: 1.1rem; border-radius: 999px; display: grid; place-items: center; background: #10b981; color: white; font-size: .62rem; font-style: normal; }
        .restaurant-map-mobile-backdrop { position: fixed; inset: 0; z-index: 119; background: rgba(15,23,42,.22); backdrop-filter: blur(2px); }
        .restaurant-map-mobile-filter-sheet { z-index: 130 !important; }
        .restaurant-map-rating-row button .award-logo-pair { margin-right: .15rem; }
        .restaurant-map-rating-row button.is-active .award-logo-pair svg { color: currentColor; }
        .restaurant-map-controls { border-radius: 1.25rem !important; padding: .18rem !important; overflow: hidden; background: rgba(255,255,255,.86) !important; box-shadow: 0 12px 32px rgba(15,23,42,.13) !important; }
        .restaurant-map-controls button { font-size: 1rem !important; font-weight: 900 !important; }
        .restaurant-map-controls button:hover { background: var(--rc-accent-soft) !important; color: var(--rc-accent-strong) !important; }
        @media (max-width: 767px) {
            .restaurant-map-hero .text-3xl { font-size: 1.72rem !important; }
            .restaurant-map-status-row { margin-bottom: .55rem; }
            .restaurant-map-status-pill { padding: .48rem .68rem; font-size: .68rem; }
            .restaurant-map-shell { height: calc(100dvh - 12rem) !important; min-height: 30rem !important; }
            .restaurant-map-loading { max-width: calc(100% - 5.4rem); }
        }


        /* v7 map polish/fixes: prevent stale width grey panels, match holistic filters, and keep map chrome quiet. */
        .restaurant-map-shell { width: 100% !important; contain: none !important; }
        .restaurant-map-canvas, .restaurant-map-tiles, .restaurant-map-soft-overlay { width: 100% !important; height: 100% !important; }
        .restaurant-map-main { width: 100%; max-width: 100%; overflow: hidden; }
        @media (min-width: 1024px) {
            .restaurant-map-desktop-grid { width: 100%; }
            .restaurant-map-main { flex: 1 1 0; min-width: 0; }
            .restaurant-map-sidebar { width: 18rem !important; }
        }
        .restaurant-map-controls {
            right: .9rem !important;
            bottom: .9rem !important;
            border-radius: 999px !important;
            padding: .22rem !important;
            gap: .12rem;
            display: inline-flex !important;
            background: rgba(255,255,255,.78) !important;
            border: 1px solid rgba(148,163,184,.22) !important;
            box-shadow: 0 10px 26px rgba(15,23,42,.10) !important;
            backdrop-filter: blur(16px) saturate(1.1);
            -webkit-backdrop-filter: blur(16px) saturate(1.1);
        }
        .dark .restaurant-map-controls { background: rgba(15,23,42,.78) !important; border-color: rgba(148,163,184,.16) !important; }
        /* v8 map canvas width hardening: the sidebar must never shrink the renderer's measured surface. */
        .restaurant-map-desktop-grid { min-width: 0 !important; }
        .restaurant-map-main { min-width: 0 !important; flex-basis: 0 !important; }
        .restaurant-map-shell, .restaurant-map-canvas, .restaurant-map-tiles { box-sizing: border-box !important; }
        .restaurant-map-canvas { overflow: hidden !important; transform: translateZ(0); }


        .restaurant-map-controls button {
            width: 2rem !important;
            height: 2rem !important;
            border-radius: 999px !important;
            font-size: 1rem !important;
            line-height: 1 !important;
            background: transparent !important;
            color: #334155 !important;
        }
        .dark .restaurant-map-controls button { color: #e2e8f0 !important; }
        .restaurant-map-controls button:hover { background: rgba(116,97,143,.12) !important; color: var(--rc-accent-strong) !important; }




        /* v11: mobile map view is map-first and non-scrolling; remove count overlays. */
        .restaurant-map-loading { display: none !important; }
        @media (max-width: 767px) {
            body:has(.restaurant-map-page) {
                overflow: hidden !important;
                padding-bottom: 0 !important;
            }
            .restaurant-map-page {
                height: calc(100dvh - 5.15rem) !important;
                min-height: 0 !important;
                overflow: hidden !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 0 !important;
                margin-top: -.35rem !important;
            }
            .restaurant-map-page > .hidden.lg\:flex { display: none !important; }
            .restaurant-map-desktop-grid {
                display: flex !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                width: 100% !important;
            }
            .restaurant-map-main {
                display: flex !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                width: 100% !important;
                overflow: hidden !important;
            }
            .restaurant-map-status-row { display: none !important; }
            .restaurant-map-shell {
                flex: 1 1 auto !important;
                width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                border-radius: 1.25rem !important;
            }
            .restaurant-map-canvas {
                touch-action: none !important;
                overscroll-behavior: none !important;
            }
            .restaurant-map-mobile-fab {
                z-index: 80 !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + .9rem) !important;
            }
        }




        /* v12: make mobile map slightly shorter so it clears the bottom of the viewport. */
        @media (max-width: 767px) {
            .restaurant-map-page {
                height: calc(100dvh - 6.65rem) !important;
                max-height: calc(100dvh - 6.65rem) !important;
            }
            .restaurant-map-shell {
                margin-bottom: .55rem !important;
            }
            .restaurant-map-mobile-fab {
                bottom: calc(env(safe-area-inset-bottom, 0px) + .72rem) !important;
            }
            .restaurant-map-controls {
                bottom: .55rem !important;
            }
        }




        /* v13: mobile map bottom buffer, top-right filter toggle, and default hosted data. */
        @media (max-width: 767px) {
            .restaurant-map-page {
                height: calc(100dvh - 7.55rem) !important;
                max-height: calc(100dvh - 7.55rem) !important;
            }
            .restaurant-map-shell {
                margin-bottom: 1.25rem !important;
            }
            .restaurant-map-mobile-fab {
                top: calc(env(safe-area-inset-top, 0px) + 5.55rem) !important;
                right: 1rem !important;
                bottom: auto !important;
                z-index: 92 !important;
                min-height: 2.65rem !important;
                padding: .72rem .92rem !important;
                box-shadow: 0 16px 38px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.16) !important;
            }
            .restaurant-map-controls {
                bottom: 1.05rem !important;
                right: .72rem !important;
            }
        }




        /* v14: align mobile map Filters button with the All Restaurants filter FAB and nudge position. */
        @media (max-width: 767px) {
            .restaurant-map-mobile-fab {
                top: calc(env(safe-area-inset-top, 0px) + 6.72rem) !important;
                right: 1.38rem !important;
                bottom: auto !important;
                min-height: 2.52rem !important;
                padding: 0 .78rem !important;
                border-radius: 16px !important;
                gap: .4rem !important;
                font-size: .66rem !important;
                letter-spacing: .045em !important;
                color: #fff !important;
                background: rgba(15, 23, 42, .90) !important;
                border: 1px solid rgba(255, 255, 255, .10) !important;
                box-shadow: 0 14px 32px rgba(15,23,42,.20) !important;
                text-transform: uppercase !important;
            }
            .dark .restaurant-map-mobile-fab {
                color: rgb(15 23 42) !important;
                background: rgba(255, 255, 255, .90) !important;
                border-color: rgba(226, 232, 240, .40) !important;
            }
            .restaurant-map-mobile-fab.is-active {
                color: #fff !important;
                background: var(--rc-accent-strong) !important;
                border-color: var(--rc-accent-strong) !important;
                box-shadow: 0 14px 32px rgba(95,74,125,.24) !important;
            }
            .restaurant-map-mobile-fab svg {
                width: .9rem !important;
                height: .9rem !important;
            }
            .restaurant-map-mobile-fab em {
                margin-left: .05rem !important;
                min-width: 1.15rem !important;
                height: 1.15rem !important;
                font-size: .58rem !important;
            }
        }




        .restaurant-maplibre-canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
        .restaurant-maplibre-canvas .maplibregl-canvas { outline: none !important; }
        .restaurant-maplibre-canvas .maplibregl-control-container .maplibregl-ctrl-bottom-left { bottom: .45rem !important; left: .55rem !important; }
        .restaurant-maplibre-canvas .maplibregl-ctrl-attrib { border-radius: 999px !important; background: rgba(255,255,255,.72) !important; font-size: .58rem !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(15,23,42,.08) !important; backdrop-filter: blur(10px) !important; }
        .dark .restaurant-maplibre-canvas .maplibregl-ctrl-attrib { background: rgba(15,23,42,.68) !important; color: rgba(226,232,240,.72) !important; }
        .restaurant-maplibre-popup .maplibregl-popup-content { padding: 0 !important; border-radius: 1.25rem !important; overflow: hidden !important; box-shadow: 0 22px 54px rgba(15,23,42,.22) !important; border: 1px solid rgba(226,232,240,.85) !important; background: transparent !important; }
        .restaurant-maplibre-popup .maplibregl-popup-tip { border-top-color: rgba(255,255,255,.94) !important; }
        .dark .restaurant-maplibre-popup .maplibregl-popup-content { border-color: rgba(51,65,85,.85) !important; }
        .dark .restaurant-maplibre-popup .maplibregl-popup-tip { border-top-color: rgba(15,23,42,.94) !important; }
        .restaurant-maplibre-popup-card { width: 16.25rem; padding: 0; cursor: pointer; background: rgba(255,255,255,.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
        .dark .restaurant-maplibre-popup-card { background: rgba(15,23,42,.95); }
        .restaurant-maplibre-popup-photo { height: 7.25rem; width: 100%; background: linear-gradient(135deg, #e2e8f0, #f8fafc); position: relative; overflow: hidden; }
        .restaurant-maplibre-popup-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .dark .restaurant-maplibre-popup-photo { background: linear-gradient(135deg, #0f172a, #1e293b); }
        .restaurant-maplibre-popup-body { padding: .9rem; }
        .restaurant-maplibre-canvas .maplibregl-marker { overflow: visible !important; }
        .restaurant-maplibre-canvas .maplibregl-marker .restaurant-map-marker {
            position: relative !important;
            margin: 0 !important;
            left: auto !important;
            top: auto !important;
            transform-origin: 50% 50% !important;
        }
        .restaurant-maplibre-canvas .maplibregl-marker .restaurant-map-marker:hover,
        .restaurant-maplibre-canvas .maplibregl-marker .restaurant-map-marker:focus-visible {
            transform: rotate(-45deg) scale(1.13) !important;
        }
        @media (max-width: 767px) {
            .restaurant-maplibre-popup-card { width: min(16rem, calc(100vw - 2rem)); }
            .restaurant-maplibre-popup-photo { height: 6.5rem; }
        }
        .maplibre-extra-controls { z-index: 8 !important; }




        /* MapLibre marker reset: use a dedicated marker class so old custom-map CSS cannot offset pins. */
        .restaurant-maplibre-canvas .maplibregl-marker { overflow: visible !important; will-change: transform; }
        .restaurant-maplibre-canvas .rc-maplibre-pin {
            width: 2.1rem;
            height: 2.1rem;
            border: 0;
            border-radius: 999px;
            display: grid;
            place-items: center;
            color: white;
            box-shadow: 0 10px 24px rgba(15,23,42,.28), 0 0 0 3px rgba(255,255,255,.92);
            cursor: pointer;
            transform: translateZ(0);
            transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
            touch-action: manipulation;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin:hover,
        .restaurant-maplibre-canvas .rc-maplibre-pin:focus-visible {
            transform: translateZ(0) scale(1.12);
            box-shadow: 0 14px 30px rgba(15,23,42,.34), 0 0 0 4px rgba(255,255,255,.96);
            outline: none;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin span {
            display: grid;
            place-items: center;
            width: 1.48rem;
            height: 1.48rem;
            border-radius: 999px;
            background: rgba(255,255,255,.18);
            font-size: .66rem;
            font-weight: 950;
            line-height: 1;
            letter-spacing: -.035em;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.pin-emerald { background: linear-gradient(135deg, #10b981, #059669); }
        .restaurant-maplibre-canvas .rc-maplibre-pin.pin-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
        .restaurant-maplibre-canvas .rc-maplibre-pin.pin-yellow { background: linear-gradient(135deg, #f59e0b, #d97706); color: #111827; }
        .restaurant-maplibre-canvas .rc-maplibre-pin.pin-red { background: linear-gradient(135deg, #ef4444, #dc2626); }
        .restaurant-maplibre-canvas .rc-maplibre-pin.pin-slate { background: linear-gradient(135deg, #64748b, #475569); }
        .dark .restaurant-maplibre-canvas .rc-maplibre-pin { box-shadow: 0 10px 24px rgba(0,0,0,.42), 0 0 0 3px rgba(15,23,42,.90); }
        .restaurant-maplibre-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: rgba(255,255,255,.95) !important; }
        .dark .restaurant-maplibre-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: rgba(15,23,42,.95) !important; }
        @media (max-width: 767px) {
            .restaurant-maplibre-canvas .rc-maplibre-pin { width: 1.95rem; height: 1.95rem; }
            .restaurant-maplibre-canvas .rc-maplibre-pin span { width: 1.34rem; height: 1.34rem; font-size: .61rem; }
        }


    


        /* v16: MapLibre popup visibility and mobile map filter parity with normal mobile filters. */
        .restaurant-maplibre-popup { z-index: 28 !important; }
        .restaurant-maplibre-popup .maplibregl-popup-content { max-width: calc(100vw - 1.5rem) !important; }
        @media (max-width: 767px) {
            .restaurant-maplibre-popup-card { width: min(16rem, calc(100vw - 1.6rem)) !important; }
            .restaurant-maplibre-popup-photo { height: 5.9rem !important; }
            .restaurant-maplibre-popup-body { padding: .78rem !important; }
            .restaurant-map-mobile-filter-sheet.mobile-filters-bubble {
                display: flex !important;
                flex-direction: column !important;
                gap: .5rem !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
                max-height: min(72vh, 40rem) !important;
            }
            .restaurant-map-mobile-filter-sheet .pb-4 { padding-bottom: 1rem !important; }
            .restaurant-map-mobile-filter-sheet .flex.flex-wrap.gap-2 button {
                border-radius: 999px !important;
            }
        }




        /* Map mode: keep the mobile top bar expanded; map gestures handle movement, not header collapse. */
        @media (max-width: 767px) {
            .is-map-tab header.mobile-at-top .mobile-logo-lockup.is-full {
                display: flex !important;
                max-height: 3.25rem !important;
                opacity: 1 !important;
                transform: translateY(0) !important;
            }
        }




        /* v18: map desktop filter parity and same-location visit clusters. */
        .restaurant-map-sidebar.hide-scrollbar::-webkit-scrollbar { display: none !important; }
        .restaurant-map-sidebar.hide-scrollbar { -ms-overflow-style: none !important; scrollbar-width: none !important; }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin {
            width: 2.25rem;
            height: 2.25rem;
            background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
            box-shadow: 0 14px 34px rgba(79,70,229,.32), 0 0 0 4px rgba(255,255,255,.94) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin span {
            width: 1.58rem;
            height: 1.58rem;
            font-size: .68rem;
            background: rgba(255,255,255,.24);
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider {
            animation: none !important;
        }
        @keyframes rcSpiderIn {
            from { opacity: .2; transform: translateZ(0) scale(.72); }
            to { opacity: 1; transform: translateZ(0) scale(1); }
        }




        /* v19: MapLibre-safe same-location pins. Never animate/override transform on marker elements;
           MapLibre owns that transform. This fixes mobile pins jumping to the top-left. */
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-marker-shell {
            overflow: visible !important;
            transform-origin: center center !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin,
        .restaurant-maplibre-canvas .rc-maplibre-pin:hover,
        .restaurant-maplibre-canvas .rc-maplibre-pin:focus,
        .restaurant-maplibre-canvas .rc-maplibre-pin:focus-visible,
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider,
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider:hover,
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider:focus-visible {
            transform: none !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin:hover,
        .restaurant-maplibre-canvas .rc-maplibre-pin:focus-visible {
            filter: brightness(1.04) saturate(1.06);
            box-shadow: 0 14px 30px rgba(15,23,42,.34), 0 0 0 4px rgba(255,255,255,.96) !important;
            outline: none;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin {
            width: 2.75rem !important;
            height: 2.75rem !important;
            background: var(--group-pie, linear-gradient(135deg, #7c3aed, #4f46e5)) !important;
            border: 0 !important;
            box-shadow: 0 16px 38px rgba(15,23,42,.26), 0 0 0 4px rgba(255,255,255,.96), inset 0 0 0 2px rgba(255,255,255,.34) !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin {
            box-shadow: 0 16px 38px rgba(0,0,0,.42), 0 0 0 4px rgba(15,23,42,.92), inset 0 0 0 2px rgba(255,255,255,.20) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin span {
            width: 1.62rem !important;
            height: 1.62rem !important;
            background: rgba(15,23,42,.82) !important;
            color: white !important;
            font-size: .7rem !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 10px rgba(15,23,42,.20);
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin::after {
            content: '';
            position: absolute;
            inset: -.28rem;
            border-radius: 999px;
            border: 1px dashed rgba(79,70,229,.34);
            pointer-events: none;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider {
            box-shadow: 0 12px 28px rgba(15,23,42,.28), 0 0 0 3px rgba(255,255,255,.95) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: .42rem;
            height: .42rem;
            margin: -.21rem 0 0 -.21rem;
            border-radius: 999px;
            background: rgba(255,255,255,.9);
            opacity: .55;
            pointer-events: none;
        }
        @media (max-width: 767px) {
            .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin {
                width: 2.55rem !important;
                height: 2.55rem !important;
            }
            .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin span {
                width: 1.5rem !important;
                height: 1.5rem !important;
                font-size: .66rem !important;
            }
        }




        /* v20: MapLibre marker shell wrapper fix. MapLibre applies translate transforms to
           .rc-maplibre-marker-shell; the visible button is an inner child, so hover/cluster
           styling can no longer erase MapLibre's coordinate transform and collapse markers
           into the top-left corner. */
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-marker-shell,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell {
            overflow: visible !important;
            width: 0 !important;
            height: 0 !important;
            pointer-events: none !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell > .rc-maplibre-pin {
            pointer-events: auto !important;
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            transform: translate(-50%, -50%) !important;
            transform-origin: center center !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell > .rc-maplibre-pin:hover,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell > .rc-maplibre-pin:focus-visible {
            transform: translate(-50%, -50%) scale(1.08) !important;
        }




        /* v21: same-location group polish — average-label cluster pins and tighter animated spider fan. */
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-cluster-pin span {
            font-size: .74rem !important;
            letter-spacing: -.045em !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            pointer-events: none !important;
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            transform: translate(-50%, -50%) !important;
            width: 6.15rem;
            height: 6.15rem;
            border-radius: 999px;
            background:
                radial-gradient(circle, rgba(255,255,255,.34) 0 26%, rgba(111,90,143,.18) 27% 50%, rgba(111,90,143,.06) 51% 100%);
            border: 1px solid rgba(111,90,143,.24);
            box-shadow: 0 18px 44px rgba(15,23,42,.18), inset 0 0 0 1px rgba(255,255,255,.65);
            animation: rcSameSiteHaloIn .28s cubic-bezier(.2,.82,.2,1) both;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            background:
                radial-gradient(circle, rgba(15,23,42,.42) 0 26%, rgba(196,181,253,.18) 27% 50%, rgba(196,181,253,.07) 51% 100%);
            border-color: rgba(196,181,253,.26);
            box-shadow: 0 18px 44px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.08);
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::before,
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
            content: '';
            position: absolute;
            inset: .78rem;
            border-radius: inherit;
            border: 1px dashed rgba(111,90,143,.34);
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
            inset: 2.34rem;
            border-style: solid;
            opacity: .55;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider {
            animation: rcSpiderFanIn .34s cubic-bezier(.18,.9,.24,1.08) both !important;
            animation-delay: var(--spider-delay, 0ms) !important;
            box-shadow: 0 12px 26px rgba(15,23,42,.26), 0 0 0 3px rgba(255,255,255,.95), 0 0 0 10px rgba(111,90,143,.10) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider::before {
            content: '';
            position: absolute;
            inset: -.42rem;
            border-radius: 999px;
            border: 1px solid rgba(111,90,143,.22);
            background: rgba(111,90,143,.05);
            pointer-events: none;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider {
            box-shadow: 0 12px 26px rgba(0,0,0,.34), 0 0 0 3px rgba(15,23,42,.92), 0 0 0 10px rgba(196,181,253,.10) !important;
        }
        @keyframes rcSameSiteHaloIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        @keyframes rcSpiderFanIn {
            from { opacity: 0; filter: blur(1px); transform: translate(-50%, -50%) scale(.35) !important; }
            70% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) !important; }
            to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1) !important; }
        }
        @media (max-width: 767px) {
            .restaurant-maplibre-canvas .rc-maplibre-same-site-halo { width: 5.45rem; height: 5.45rem; }
        }




        /* v22: minimalist same-location spider pins; expanded visits always layer above normal pins. */
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-spider-shell,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell {
            z-index: 1100 !important;
        }
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-halo-shell,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-halo-shell {
            z-index: 980 !important;
            pointer-events: none !important;
        }
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-group-shell,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-group-shell {
            z-index: 500 !important;
        }
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-single-shell,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-single-shell {
            z-index: 500 !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            width: 4.9rem !important;
            height: 4.9rem !important;
            background: rgba(111, 90, 143, .045) !important;
            border: 1px solid rgba(111, 90, 143, .20) !important;
            box-shadow: 0 10px 26px rgba(15,23,42,.10) !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            background: rgba(196, 181, 253, .055) !important;
            border-color: rgba(196,181,253,.20) !important;
            box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::before {
            inset: .58rem !important;
            border: 1px solid rgba(111, 90, 143, .16) !important;
            border-style: solid !important;
            background: transparent !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
            display: none !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider {
            z-index: 1120 !important;
            box-shadow:
                0 16px 22px rgba(15,23,42,.24),
                0 5px 10px rgba(15,23,42,.18),
                0 0 0 3px rgba(255,255,255,.96) !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider {
            box-shadow:
                0 16px 22px rgba(0,0,0,.42),
                0 5px 10px rgba(0,0,0,.28),
                0 0 0 3px rgba(15,23,42,.92) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider::before {
            inset: -.24rem !important;
            border: 1px solid rgba(111, 90, 143, .18) !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider::after {
            content: '' !important;
            position: absolute !important;
            left: 50% !important;
            top: auto !important;
            bottom: -.42rem !important;
            width: 1.45rem !important;
            height: .42rem !important;
            margin: 0 !important;
            border-radius: 999px !important;
            background: rgba(15, 23, 42, .24) !important;
            filter: blur(5px) !important;
            opacity: .75 !important;
            transform: translateX(-50%) !important;
            pointer-events: none !important;
            z-index: -1 !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-pin.rc-maplibre-pin-spider::after {
            background: rgba(0,0,0,.46) !important;
            opacity: .9 !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin:hover,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin:focus-visible {
            z-index: 1140 !important;
            box-shadow:
                0 18px 28px rgba(15,23,42,.30),
                0 7px 14px rgba(15,23,42,.20),
                0 0 0 4px rgba(255,255,255,.98) !important;
        }
        @media (max-width: 767px) {
            .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
                width: 4.45rem !important;
                height: 4.45rem !important;
            }
        }


    


        /* v23: cleaner same-location spider: normal pins, minimal connector ring, stronger grounded shadows. */
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            width: 5.25rem !important;
            height: 5.25rem !important;
            background: transparent !important;
            border: 1px solid rgba(15, 23, 42, .16) !important;
            box-shadow: none !important;
            opacity: .72 !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            background: transparent !important;
            border-color: rgba(255, 255, 255, .20) !important;
            box-shadow: none !important;
            opacity: .78 !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::before,
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
            display: none !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell,
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-spider-shell {
            z-index: 1600 !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-halo-shell,
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-halo-shell {
            z-index: 1550 !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider {
            width: 2.1rem !important;
            height: 2.1rem !important;
            transform: translate(-50%, -50%) !important;
            animation: rcSpiderPinOut .28s cubic-bezier(.2,.9,.24,1.12) both !important;
            animation-delay: var(--spider-delay, 0ms) !important;
            box-shadow:
                0 24px 26px rgba(15, 23, 42, .38),
                0 13px 16px rgba(15, 23, 42, .26),
                0 0 0 3px rgba(255, 255, 255, .97) !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider {
            box-shadow:
                0 26px 28px rgba(0, 0, 0, .62),
                0 13px 18px rgba(0, 0, 0, .42),
                0 0 0 3px rgba(15, 23, 42, .92) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider::before {
            display: none !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider::after {
            content: '' !important;
            position: absolute !important;
            left: 50% !important;
            top: auto !important;
            bottom: -.66rem !important;
            width: 2.2rem !important;
            height: .7rem !important;
            border-radius: 999px !important;
            background: rgba(15, 23, 42, .38) !important;
            filter: blur(7px) !important;
            opacity: .82 !important;
            transform: translateX(-50%) !important;
            z-index: -1 !important;
            pointer-events: none !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider::after {
            background: rgba(0, 0, 0, .66) !important;
            opacity: .95 !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider:hover,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider:focus-visible {
            transform: translate(-50%, -50%) scale(1.08) !important;
            box-shadow:
                0 28px 32px rgba(15, 23, 42, .42),
                0 15px 18px rgba(15, 23, 42, .30),
                0 0 0 4px rgba(255, 255, 255, .98) !important;
        }
        @keyframes rcSpiderPinOut {
            from { opacity: 0; transform: translate(-50%, -50%) scale(.62) !important; }
            72% { opacity: 1; transform: translate(-50%, -50%) scale(1.07) !important; }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; }
        }
        @media (max-width: 767px) {
            .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
                width: 5rem !important;
                height: 5rem !important;
            }
            .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider {
                width: 1.95rem !important;
                height: 1.95rem !important;
            }
        }




        /* v24: same-site fan visibility — lower zoom, shared group shadow, clearer centre point. */
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            width: 5.7rem !important;
            height: 5.7rem !important;
            border-radius: 999px !important;
            border: 1.5px solid rgba(30, 41, 59, .24) !important;
            background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 48%, transparent 72%) !important;
            opacity: 1 !important;
            box-shadow:
                0 38px 34px rgba(15, 23, 42, .24),
                0 18px 22px rgba(15, 23, 42, .18) !important;
            pointer-events: none !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            border-color: rgba(255, 255, 255, .30) !important;
            background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 50%, transparent 72%) !important;
            box-shadow:
                0 40px 36px rgba(0, 0, 0, .50),
                0 18px 24px rgba(0, 0, 0, .34) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::before {
            display: block !important;
            content: '' !important;
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            width: 1.18rem !important;
            height: 1.18rem !important;
            border-radius: 999px !important;
            transform: translate(-50%, -50%) !important;
            background: rgba(255, 255, 255, .68) !important;
            border: 1.5px solid rgba(30, 41, 59, .28) !important;
            box-shadow: 0 4px 12px rgba(15, 23, 42, .18) !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::before {
            background: rgba(15, 23, 42, .82) !important;
            border-color: rgba(255,255,255,.34) !important;
            box-shadow: 0 5px 14px rgba(0,0,0,.36) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
            display: block !important;
            content: '' !important;
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            width: 4.7rem !important;
            height: 1.9rem !important;
            border-radius: 999px !important;
            transform: translate(-50%, 1.55rem) !important;
            background: rgba(15, 23, 42, .22) !important;
            filter: blur(13px) !important;
            opacity: .90 !important;
            z-index: -1 !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
            background: rgba(0, 0, 0, .54) !important;
            opacity: 1 !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider {
            box-shadow:
                0 10px 12px rgba(15, 23, 42, .20),
                0 0 0 3px rgba(255, 255, 255, .96) !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider {
            box-shadow:
                0 12px 14px rgba(0, 0, 0, .42),
                0 0 0 3px rgba(15, 23, 42, .92) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.rc-maplibre-spider-shell > .rc-maplibre-pin.rc-maplibre-pin-spider::after {
            display: none !important;
        }
        @media (max-width: 767px) {
            .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
                width: 5.25rem !important;
                height: 5.25rem !important;
            }
            .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
                width: 4.35rem !important;
                height: 1.65rem !important;
                transform: translate(-50%, 1.42rem) !important;
            }
        }




        /* v25: same-site expanded group should cast one even circular shadow under the whole cluster, not a bottom-only oval. */
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            background:
                radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,.02) 62%, transparent 76%) !important;
            border-color: rgba(30, 41, 59, .26) !important;
            box-shadow:
                0 0 0 1px rgba(255,255,255,.55),
                0 0 22px 11px rgba(15, 23, 42, .24),
                0 0 46px 20px rgba(15, 23, 42, .14) !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            background:
                radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 42%, rgba(255,255,255,.015) 64%, transparent 76%) !important;
            border-color: rgba(255,255,255,.32) !important;
            box-shadow:
                0 0 0 1px rgba(255,255,255,.08),
                0 0 24px 12px rgba(0, 0, 0, .58),
                0 0 52px 22px rgba(0, 0, 0, .38) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
            display: block !important;
            content: '' !important;
            position: absolute !important;
            inset: -0.35rem !important;
            width: auto !important;
            height: auto !important;
            border-radius: 999px !important;
            transform: none !important;
            background: radial-gradient(circle, rgba(15,23,42,.26) 0%, rgba(15,23,42,.16) 45%, rgba(15,23,42,.06) 68%, transparent 78%) !important;
            filter: blur(12px) !important;
            opacity: .78 !important;
            z-index: -1 !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
            background: radial-gradient(circle, rgba(0,0,0,.64) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.16) 70%, transparent 80%) !important;
            opacity: .82 !important;
        }
        @media (max-width: 767px) {
            .restaurant-maplibre-canvas .rc-maplibre-same-site-halo::after {
                inset: -0.42rem !important;
                transform: none !important;
                width: auto !important;
                height: auto !important;
            }
        }






        /* v6: mobile map filter toggle styled and positioned like the home/zoom controls. */
        @media (max-width: 767px) {
            .restaurant-map-mobile-fab {
                position: absolute !important;
                top: auto !important;
                right: .72rem !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 8.35rem) !important;
                z-index: 92 !important;
                width: 2.85rem !important;
                height: 2.85rem !important;
                min-width: 2.85rem !important;
                min-height: 2.85rem !important;
                padding: 0 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 0 !important;
                border-radius: 999px !important;
                color: #334155 !important;
                background: rgba(255,255,255,.82) !important;
                border: 1px solid rgba(148,163,184,.26) !important;
                box-shadow: 0 12px 32px rgba(15,23,42,.13) !important;
                backdrop-filter: blur(16px) !important;
                -webkit-backdrop-filter: blur(16px) !important;
                font-size: 0 !important;
                letter-spacing: 0 !important;
                text-transform: none !important;
            }
            .restaurant-map-mobile-fab span { display: none !important; }
            .restaurant-map-mobile-fab svg {
                width: 1.08rem !important;
                height: 1.08rem !important;
                display: block !important;
                color: currentColor !important;
            }
            .restaurant-map-mobile-fab em {
                position: absolute !important;
                top: -.28rem !important;
                right: -.28rem !important;
                margin: 0 !important;
                min-width: 1.18rem !important;
                height: 1.18rem !important;
                padding: 0 .28rem !important;
                border-radius: 999px !important;
                display: grid !important;
                place-items: center !important;
                background: var(--rc-accent-strong) !important;
                color: #fff !important;
                border: 2px solid rgba(255,255,255,.92) !important;
                box-shadow: 0 8px 18px rgba(15,23,42,.18) !important;
                font-size: .58rem !important;
                font-weight: 950 !important;
                line-height: 1 !important;
            }
            .restaurant-map-mobile-fab.is-active {
                color: var(--rc-accent-strong) !important;
                background: rgba(255,255,255,.90) !important;
                border-color: var(--rc-accent-border) !important;
                box-shadow: 0 12px 32px rgba(95,74,125,.18), 0 0 0 2px rgba(95,74,125,.10) !important;
            }
            .dark .restaurant-map-mobile-fab {
                color: #e2e8f0 !important;
                background: rgba(15,23,42,.72) !important;
                border-color: rgba(148,163,184,.18) !important;
                box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
            }
            .dark .restaurant-map-mobile-fab.is-active {
                color: #f8fafc !important;
                background: rgba(76,56,115,.84) !important;
                border-color: rgba(199,184,230,.30) !important;
                box-shadow: 0 12px 32px rgba(0,0,0,.32), 0 0 0 2px rgba(199,184,230,.12) !important;
            }
            .dark .restaurant-map-mobile-fab em {
                border-color: rgba(15,23,42,.92) !important;
            }
        }




        /* v27: map popups must sit above every map marker, grouped-pin halo, and map control. */
        .restaurant-maplibre-canvas .maplibregl-popup,
        .restaurant-maplibre-canvas .restaurant-maplibre-popup,
        .restaurant-maplibre-popup.maplibregl-popup {
            z-index: 100000 !important;
            pointer-events: auto !important;
        }
        .restaurant-maplibre-popup .maplibregl-popup-content {
            position: relative !important;
            z-index: 100001 !important;
            pointer-events: auto !important;
        }
        .restaurant-maplibre-popup .maplibregl-popup-tip {
            position: relative !important;
            z-index: 100000 !important;
        }
        .restaurant-maplibre-canvas .maplibregl-marker {
            z-index: 500 !important;
        }
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-halo-shell {
            z-index: 1550 !important;
        }
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-spider-shell {
            z-index: 1600 !important;
        }
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-popup-open {
            z-index: 1700 !important;
        }
        .maplibre-extra-controls,
        .restaurant-map-mobile-fab {
            z-index: 2000 !important;
        }






        /* v28: mobile popup card corner cleanup and map filter sheet layering.
           Keep popups visually clipped to their rounded card, and make the mobile
           filter sheet/backdrop sit above the map controls/filter toggle. */
        .restaurant-maplibre-popup,
        .restaurant-maplibre-popup .maplibregl-popup-content,
        .restaurant-maplibre-popup-card {
            border-radius: 1.35rem !important;
        }
        .restaurant-maplibre-popup .maplibregl-popup-content {
            overflow: hidden !important;
            background: rgba(255,255,255,.96) !important;
            isolation: isolate !important;
            clip-path: inset(0 round 1.35rem) !important;
        }
        .dark .restaurant-maplibre-popup .maplibregl-popup-content {
            background: rgba(15,23,42,.96) !important;
        }
        .restaurant-maplibre-popup-card {
            overflow: hidden !important;
            background-clip: padding-box !important;
            transform: translateZ(0) !important;
        }
        .restaurant-maplibre-popup-photo {
            border-top-left-radius: 1.35rem !important;
            border-top-right-radius: 1.35rem !important;
            overflow: hidden !important;
            transform: translateZ(0) !important;
        }
        .restaurant-maplibre-popup .maplibregl-popup-tip {
            filter: drop-shadow(0 6px 10px rgba(15,23,42,.12)) !important;
        }
        @media (max-width: 767px) {
            .restaurant-maplibre-popup,
            .restaurant-maplibre-popup .maplibregl-popup-content,
            .restaurant-maplibre-popup-card {
                border-radius: 1.28rem !important;
            }
            .restaurant-maplibre-popup .maplibregl-popup-content {
                clip-path: inset(0 round 1.28rem) !important;
            }
            .restaurant-maplibre-popup-photo {
                border-top-left-radius: 1.28rem !important;
                border-top-right-radius: 1.28rem !important;
            }
            .restaurant-map-mobile-backdrop {
                z-index: 240000 !important;
            }
            .restaurant-map-mobile-filter-sheet.mobile-filters-bubble,
            .restaurant-map-mobile-filter-sheet {
                z-index: 250000 !important;
            }
        }


    


        /* v26: selected map pins rise above all other pins while their popup is open,
           and same-site expansion uses a variable circular halo sized to the visit count. */
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.is-selected,
        .restaurant-maplibre-canvas .maplibregl-marker.is-selected,
        .restaurant-maplibre-canvas .maplibregl-marker:has(.rc-maplibre-pin.is-selected) {
            z-index: 3200 !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell.is-selected > .rc-maplibre-pin,
        .restaurant-maplibre-canvas .rc-maplibre-pin.is-selected {
            z-index: 3210 !important;
            transform: translate(-50%, -50%) scale(1.12) !important;
            box-shadow:
                0 0 0 6px rgba(111,90,143,.20),
                0 16px 32px rgba(15,23,42,.32),
                0 0 0 3px rgba(255,255,255,.98) !important;
        }
        .dark .restaurant-maplibre-canvas .rc-maplibre-marker-shell.is-selected > .rc-maplibre-pin,
        .dark .restaurant-maplibre-canvas .rc-maplibre-pin.is-selected {
            box-shadow:
                0 0 0 6px rgba(196,181,253,.18),
                0 16px 32px rgba(0,0,0,.52),
                0 0 0 3px rgba(15,23,42,.94) !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-same-site-halo {
            width: var(--same-site-halo-size, 5.7rem) !important;
            height: var(--same-site-halo-size, 5.7rem) !important;
        }

    

        /* v29: restore MapLibre marker tap/click hit-testing and keep map background clicks from swallowing popups. */
        .restaurant-maplibre-canvas .maplibregl-marker.rc-maplibre-marker-shell,
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell {
            pointer-events: auto !important;
            touch-action: manipulation !important;
        }
        .restaurant-maplibre-canvas .rc-maplibre-marker-shell > .rc-maplibre-pin {
            pointer-events: auto !important;
            touch-action: manipulation !important;
        }


        /* v9: unify mobile map controls (Home, Filters, Zoom) into one visual system. */
        @media (max-width: 767px) {
            .restaurant-map-shell {
                --mobile-map-control-size: 2.78rem;
                --mobile-map-control-radius: 1.05rem;
                --mobile-map-control-bg: rgba(255, 255, 255, .88);
                --mobile-map-control-border: rgba(148, 163, 184, .28);
                --mobile-map-control-color: #334155;
                --mobile-map-control-shadow: 0 14px 34px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255,255,255,.82);
            }
            .dark .restaurant-map-shell {
                --mobile-map-control-bg: rgba(15, 23, 42, .82);
                --mobile-map-control-border: rgba(199, 184, 230, .18);
                --mobile-map-control-color: #e2e8f0;
                --mobile-map-control-shadow: 0 14px 34px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255,255,255,.07);
            }
            .restaurant-map-mobile-fab,
            .restaurant-map-controls button {
                width: var(--mobile-map-control-size) !important;
                height: var(--mobile-map-control-size) !important;
                min-width: var(--mobile-map-control-size) !important;
                min-height: var(--mobile-map-control-size) !important;
                max-width: var(--mobile-map-control-size) !important;
                max-height: var(--mobile-map-control-size) !important;
                padding: 0 !important;
                border-radius: var(--mobile-map-control-radius) !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                color: var(--mobile-map-control-color) !important;
                background: var(--mobile-map-control-bg) !important;
                border: 1px solid var(--mobile-map-control-border) !important;
                box-shadow: var(--mobile-map-control-shadow) !important;
                backdrop-filter: blur(18px) saturate(1.12) !important;
                -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
                font-size: 1.08rem !important;
                font-weight: 950 !important;
                line-height: 1 !important;
                letter-spacing: 0 !important;
                text-transform: none !important;
                transition: transform .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease !important;
            }
            .restaurant-map-mobile-fab {
                position: absolute !important;
                top: calc(env(safe-area-inset-top, 0px) + 6.72rem) !important;
                right: .72rem !important;
                bottom: auto !important;
                z-index: 92 !important;
                gap: 0 !important;
                font-size: 0 !important;
            }
            .restaurant-map-mobile-fab span { display: none !important; }
            .restaurant-map-mobile-fab svg,
            .restaurant-map-controls button svg {
                width: 1.08rem !important;
                height: 1.08rem !important;
                display: block !important;
                color: currentColor !important;
                margin: 0 !important;
            }
            .restaurant-map-controls {
                right: .72rem !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + .72rem) !important;
                padding: 0 !important;
                gap: .46rem !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
                overflow: visible !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            .restaurant-map-controls button + button,
            .restaurant-map-controls button:first-child {
                border-radius: var(--mobile-map-control-radius) !important;
                border-top: 1px solid var(--mobile-map-control-border) !important;
            }
            .restaurant-map-mobile-fab:hover,
            .restaurant-map-controls button:hover,
            .restaurant-map-mobile-fab:focus-visible,
            .restaurant-map-controls button:focus-visible {
                transform: translateY(-1px) !important;
                color: var(--rc-accent-strong) !important;
                border-color: var(--rc-accent-border) !important;
                background: rgba(255,255,255,.94) !important;
            }
            .dark .restaurant-map-mobile-fab:hover,
            .dark .restaurant-map-controls button:hover,
            .dark .restaurant-map-mobile-fab:focus-visible,
            .dark .restaurant-map-controls button:focus-visible {
                color: #f8fafc !important;
                background: rgba(30, 41, 59, .92) !important;
                border-color: rgba(199, 184, 230, .30) !important;
            }
            .restaurant-map-mobile-fab.is-active {
                color: #fff !important;
                background: linear-gradient(135deg, #74618f, #5f4a7d) !important;
                border-color: rgba(255,255,255,.22) !important;
                box-shadow: 0 16px 38px rgba(95,74,125,.26), inset 0 1px 0 rgba(255,255,255,.18) !important;
            }
            .dark .restaurant-map-mobile-fab.is-active {
                color: #111827 !important;
                background: linear-gradient(135deg, #ede9fe, #c7b8e6) !important;
                border-color: rgba(255,255,255,.36) !important;
            }
            .restaurant-map-mobile-fab em {
                position: absolute !important;
                top: -.32rem !important;
                right: -.32rem !important;
                min-width: 1.16rem !important;
                height: 1.16rem !important;
                padding: 0 .28rem !important;
                border-radius: 999px !important;
                display: grid !important;
                place-items: center !important;
                margin: 0 !important;
                background: #10b981 !important;
                color: #fff !important;
                border: 2px solid rgba(255,255,255,.92) !important;
                box-shadow: 0 8px 18px rgba(15,23,42,.20) !important;
                font-size: .58rem !important;
                font-weight: 950 !important;
                line-height: 1 !important;
                font-style: normal !important;
            }
        }

        /* v10: group mobile map controls, share filter-sheet blur, and add JLH parity in map filters. */
        @media (max-width: 767px) {
            .restaurant-mobile-filters-backdrop,
            .restaurant-map-mobile-backdrop {
                position: fixed !important;
                inset: 0 !important;
                z-index: 119 !important;
                background: rgba(15,23,42,.22) !important;
                backdrop-filter: blur(2px) !important;
                -webkit-backdrop-filter: blur(2px) !important;
            }
            .restaurant-map-controls .restaurant-map-control-filter {
                position: relative !important;
            }
            .restaurant-map-controls .restaurant-map-control-filter em {
                position: absolute;
                top: -.28rem;
                right: -.28rem;
                min-width: 1.1rem;
                height: 1.1rem;
                padding: 0 .25rem;
                border-radius: 999px;
                display: grid;
                place-items: center;
                background: #10b981;
                color: white;
                font-size: .62rem;
                font-style: normal;
                font-weight: 950;
                line-height: 1;
                box-shadow: 0 8px 18px rgba(16,185,129,.28);
            }
            .restaurant-map-controls .restaurant-map-control-filter.is-active {
                color: var(--rc-accent-strong) !important;
                border-color: var(--rc-accent-border) !important;
                background: rgba(255,255,255,.96) !important;
            }
            .dark .restaurant-map-controls .restaurant-map-control-filter.is-active {
                color: #f8fafc !important;
                border-color: rgba(199, 184, 230, .30) !important;
                background: rgba(30, 41, 59, .94) !important;
            }
        }



        /* v11: blue glass treatment for non-map mobile sort popup and desktop map rail alignment. */
        @media (max-width: 767px) {
            .restaurant-mobile-sort-backdrop {
                position: fixed !important;
                inset: 0 !important;
                z-index: 119 !important;
                background: rgba(29, 49, 69, .24) !important;
                backdrop-filter: blur(2px) !important;
                -webkit-backdrop-filter: blur(2px) !important;
            }
            .mobile-sort-bubble {
                background: linear-gradient(180deg, rgba(248, 251, 253, .96), rgba(237, 244, 249, .92)) !important;
                border: 1px solid rgba(70, 107, 143, .24) !important;
                box-shadow: 0 22px 70px rgba(29, 49, 69, .22), inset 0 1px 0 rgba(255,255,255,.80) !important;
                backdrop-filter: blur(24px) saturate(1.12) !important;
                -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
            }
            .dark .mobile-sort-bubble {
                background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .92)) !important;
                border-color: rgba(166, 191, 214, .20) !important;
                box-shadow: 0 22px 70px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255,255,255,.07) !important;
            }
            .mobile-sort-bubble h3 {
                color: var(--rc-accent-strong) !important;
            }
            .dark .mobile-sort-bubble h3 {
                color: #c5d7e8 !important;
            }
            .mobile-sort-bubble button.bg-indigo-50,
            .mobile-sort-bubble button.dark\:bg-indigo-900\/30 {
                background: linear-gradient(135deg, var(--rc-accent-soft), var(--rc-accent-soft-2)) !important;
                border-color: var(--rc-accent-border) !important;
                color: var(--rc-accent-strong) !important;
            }
        }
        @media (min-width: 768px) {
            .desktop-map-view-nav {
                margin-left: 20rem !important;
                width: calc(100% - 20rem) !important;
            }
        }



        /* v12: desktop map filters align with the All Visits sort/filter sidebar.
           In map mode the tab rail renders above MapView, so the left map filter sidebar
           needs to be pulled up by the rail height to share the same visual top anchor. */
        @media (min-width: 768px) {
            .restaurant-map-page .restaurant-map-sidebar {
                margin-top: -4.75rem !important;
                top: var(--desktop-control-top, 109px) !important;
                max-height: calc(100vh - var(--desktop-control-top, 109px)) !important;
            }
            .is-page-scrolled .restaurant-map-page .restaurant-map-sidebar {
                top: var(--desktop-control-top, 82px) !important;
                max-height: calc(100vh - var(--desktop-control-top, 82px)) !important;
            }
        }



        /* ChatGPT: menu blur removed. The mobile nav backdrop remains a plain dim click target only. */
        @media (max-width: 767px) {
            .mobile-nav-menu-backdrop {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                filter: none !important;
            }
            header.glass,
            header.glass::before,
            header.glass::after,
            .mobile-top-searchbar,
            .mobile-menu-trigger,
            .mobile-top-circle {
                filter: none !important;
            }
        }