/*
 * unpli — stili BASE/condivisi (incl. :not(variante) e @media base).
 * Split per-variante (Fase 8) dal monolite unpli.css.
 */
    /* Critical TOSC Overrides */
    dw-gen-toolbar,
    .page__toolbar,
    .toolbar,
    .toolbar__logo-wrapper,
    .toolbar__logo {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Bottom nav: centrata anche nella pagina TOSC */
    .bottom-nav {
        left: 50% !important;
        right: auto !important;
        bottom: 2rem !important;
        transform: translateX(-50%) !important;
        z-index: 9999 !important;
        width: auto !important;
    }

    /* Nav item: layout orizzontale compatto */
    .nav-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.90rem;
        padding: 0.5rem 0.5rem;
        border-radius: 4rem;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        color: rgba(255,255,255,0.4);
        text-decoration: none;
        position: relative;
        min-width: 50px;
    }

    /* ── BORDER STREAK ANIMATION ──────────────────────────────────────────────
       Tecnica: conic-gradient in rotazione su ::before.
       ::after maschera il centro con il bg originale, lasciando
       visibile solo 1px di bordo → appare come una linea che scorre.
    */
    .bottom-nav-inner {
        position: relative;
        overflow: visible;
        isolation: isolate;
        background: #050505 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 42px 100px -20px rgba(0, 0, 0, 0.62) !important;
    }

    /* Il "laser" rotante — striscia larga con lunga coda sfumata */
    .bottom-nav-inner::before {
        content: '';
        position: absolute;
        width: 250%;   /* più grande per coprire le estremità pill */
        height: 250%;
        top: -75%;
        left: -75%;
        background: conic-gradient(
            from 0deg,
            transparent                0%,
            transparent               5%,
            rgba(255,255,255,0.02)   10%,
            rgba(255,255,255,0.25)   25%,
            rgba(255,255,255,0.7)    42%,
            rgba(255,255,255,1.0)    50%,   /* picco luminoso */
            rgba(255,255,255,0.7)    58%,
            rgba(255,255,255,0.25)   75%,
            rgba(255,255,255,0.02)   90%,
            transparent               95%,
            transparent              100%
        );
        animation: border-streak 2.2s linear infinite;
        z-index: 0;
        pointer-events: none;
    }

    /* Maschera centrale — stessa tinta del nav */
    .bottom-nav-inner::after {
        content: '';
        position: absolute;
        inset: 1px;          /* lascia 1px di bordo visibile */
        background: #4b5772; /* colore bg della nav bar (dal design) */
        border-radius: inherit;
        z-index: 1;
        pointer-events: none;
    }

    .bottom-nav-inner::before,
    .bottom-nav-inner::after {
        display: none !important;
    }

    /* Tutto il contenuto va sopra i due pseudo-elementi */
    .bottom-nav-inner > * {
        position: relative;
        z-index: 2;
    }

    @keyframes border-streak {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }


    /* Nascondi logo Bondisnar in alto a sx (panel-logo) */
    .panel-logo {
        display: none !important;
    }

    /* Tab links: reset stile anchor */
    a.tosc-tab {
        text-decoration: none !important;
        display: inline-block;
    }

    /* Area Badge */
    .area-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.56rem 0.95rem;
        background: #dc2626;
        color: white;
        border-radius: 9999px;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.085em;
        line-height: 1;
        white-space: nowrap;
        min-width: 0;
    }
    .area-badge svg {
        width: 0.95rem;
        height: 0.95rem;
        flex: 0 0 auto;
    }
    .area-badge-close {
        margin-left: 0.25rem;
        opacity: 0.7;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .area-badge-close:hover { opacity: 1; }

    #tosc-main {
        padding-bottom: 14rem !important;
    }

    /* ── TOSC Widget isolation ── */
    #tosc_alloggi, #tosc_ristoranti, #tosc_eventi, #tosc_punti_interesse,
    #tosc_alloggi *, #tosc_ristoranti *, #tosc_eventi *, #tosc_punti_interesse * {
        color-scheme: light !important;
    }
    #tosc_alloggi dw-gen-product-list, #tosc_ristoranti dw-gen-product-list,
    #tosc_eventi dw-gen-product-list, #tosc_punti_interesse dw-gen-product-list,
    #tosc_alloggi dw-gen-search-result, #tosc_ristoranti dw-gen-search-result,
    #tosc_eventi dw-gen-search-result, #tosc_punti_interesse dw-gen-search-result {
        background: #ffffff !important;
        color: #1e293b !important;
        border-radius: 1rem;
        overflow: hidden;
    }
    #tosc_eventi .event_offer-card__lower {
        padding-bottom: 44% !important;
    }
    .tosc-view { background: #ffffff; overflow: hidden; }

    /* ───────────────────────────────────────── */
    /* TOP BAR                                   */
    /* ───────────────────────────────────────── */
    #tosc-topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        align-content: center;
        gap: 0.52rem;
        row-gap: 0.55rem;
        padding: 0.62rem 0.72rem;
        background: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border: 1px solid rgba(255,255,255,0.24);
        border-bottom-color: rgba(255,255,255,0.28);
        border-radius: 2.25rem;
        box-shadow: 0 22px 70px -20px rgba(0, 0, 0, 0.18);
        overflow: visible;
        scrollbar-width: none;
        position: fixed;
        left: var(--bon-panel-safe-center, 50%);
        top: auto;
        bottom: var(--bon-panel-safe-bottom, calc(8.65rem + 10px));
        transform: translateX(-50%);
        z-index: 10010;
        width: min(calc(var(--bon-panel-safe-width, calc(100vw - 3rem)) - 4px), 100%);
        max-width: calc(var(--bon-panel-safe-width, calc(100vw - 3rem)) - 4px);
    }
    body.bon-has-dpad #tosc-topbar {
        left: var(--bon-panel-safe-center, 50%);
        width: calc(var(--bon-panel-safe-width, calc(100vw - 3rem)) - 4px);
        max-width: calc(var(--bon-panel-safe-width, calc(100vw - 3rem)) - 4px);
    }
    #tosc-topbar::-webkit-scrollbar { display: none; }
    .tosc-detail-active #tosc-topbar {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(1rem) scale(0.96);
    }

    /* Category tabs in top bar */
    .tosc-tab {
        flex: 0 0 auto;
        padding: 0.74rem 1.08rem;
        border-radius: 5rem;
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.085em;
        color: #050505;
        background: transparent;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }
    .tosc-tab:hover { color: #050505; background: rgba(255,255,255,0.22); }
    .tosc-tab.active {
        color: #fff;
        background: rgba(220,38,38,0.22);
        border-color: rgba(220,38,38,0.58);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    /* Toggle button — dentro l'isola di selezione */
    #sidebar-toggle {
        position: static !important;
        top: auto !important;
        left: auto !important;
        z-index: auto;
        width: 3rem;
        height: 3rem;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.22);
        border: 1px solid rgba(0,0,0,0.12);
        border-radius: 50%;
        color: #050505;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }
    #sidebar-toggle:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
    #sidebar-toggle.active { background: rgba(220,38,38,0.15); color: #f87171; border-color: rgba(220,38,38,0.3); }

    /* Nasconde il genie-cat-menu globale su toscpiu — la navigazione avviene via topbar + wizard proprio */
    #genie-cat-menu { display: none !important; }

    @media (max-width: 900px) {
        #tosc-topbar {
            bottom: var(--bon-panel-safe-bottom, calc(7.8rem + 10px));
            max-width: calc(var(--bon-panel-safe-width, calc(100vw - 0.85rem)) - 4px);
            padding: 0.5rem;
            gap: 0.42rem;
            row-gap: 0.45rem;
        }
        .tosc-tab {
            padding: 0.64rem 0.78rem;
            font-size: 0.62rem;
            letter-spacing: 0.06em;
        }
        .area-badge {
            padding: 0.52rem 0.72rem;
            font-size: 0.62rem;
            letter-spacing: 0.055em;
        }
        #sidebar-toggle {
            width: 2.6rem;
            height: 2.6rem;
        }
        #tosc-main {
            padding-bottom: 13rem !important;
        }
}


    /* ── PANNELLO FILTRI PROPRIETARIO (Opzione B) ── */

    /* Backdrop */
    #tosc-filter-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.28);
        z-index: 10000;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
        opacity: 0;
        transition: opacity 0.3s;
    }
    #tosc-filter-backdrop.open {
        display: block;
        opacity: 1;
    }

    /* Pannello centrale sopra la selezione */
    #tosc-filter-panel {
        position: fixed;
        left: var(--bon-panel-safe-center, 50%);
        bottom: calc(var(--bon-panel-safe-bottom, 8.65rem) + 84px);
        width: min(1008px, calc(var(--bon-panel-safe-width, calc(100vw - 3rem)) - 4px));
        max-height: min(36vh, calc(var(--bon-panel-safe-height, 50vh) * 0.8));
        background: rgba(255, 255, 255, 0.18);
        background-color: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        color: #050505;
        border: 1px solid rgba(255,255,255,0.24);
        border-radius: 1.8rem;
        z-index: 10020;
        transform: translateX(-50%) translateY(1rem) scale(0.97);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.32s cubic-bezier(.34,1.56,.64,1);
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 27px 72px -22px rgba(0,0,0,0.18);
    }
    body.bon-has-dpad #tosc-filter-panel {
        left: var(--bon-panel-safe-center, 50%);
        width: min(1008px, calc(var(--bon-panel-safe-width, calc(100vw - 3rem)) - 4px));
    }
    #tosc-filter-panel.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    /* Header */
    .filter-panel-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.92rem 2.8rem 0.72rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        color: #050505;
        z-index: 2;
    }
    .filter-panel-title {
        font-size: 0.64rem;
        font-weight: 900;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: #050505;
        text-align: center;
    }
    .filter-panel-close {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #050505;
        cursor: pointer;
        padding: 0.2rem;
        border-radius: 0.3rem;
        transition: color 0.2s, background 0.2s;
    }
    .filter-panel-close:hover { color: #050505; background: rgba(255,255,255,0.28); }

    /* Sezioni */
    .filter-section {
        padding: 0.84rem 1.12rem 0.64rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        text-align: center;
    }
    .filter-section:last-child { border-bottom: none; }
    .filter-section-label {
        font-size: 0.48rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #050505;
        margin-bottom: 0.6rem;
        text-align: center;
    }

    /* Chips (usate per Area e Comune) */
    .filter-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        padding-bottom: 0.28rem;
    }
    .filter-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.32rem;
        padding: 0.46rem 0.84rem;
        border-radius: 9999px;
        font-size: 0.59rem;
        font-weight: 800;
        background: rgba(255,255,255,0.22);
        color: #050505;
        border: 1px solid rgba(0,0,0,0.12);
        text-decoration: none !important;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        cursor: pointer;
        white-space: nowrap;
    }
    .filter-chip:hover {
        background: rgba(220,38,38,0.15);
        color: #050505;
        border-color: rgba(220,38,38,0.3);
    }
    .filter-chip.active {
        background: #dc2626;
        color: #fff;
        border-color: #dc2626;
        font-weight: 900;
    }

    /* Pulsanti categoria — blocchi full-width */
    .filter-cat-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.44rem;
        width: auto;
        padding: 0.6rem 1.52rem;
        border-radius: 9999px;
        font-size: 0.74rem;
        font-weight: 900;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        background: rgba(220,38,38,0.08);
        color: #dc2626;
        border: 2px solid #dc2626;
        text-decoration: none !important;
        transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
        cursor: pointer;
        margin-bottom: 0.24rem;
    }
    .filter-cat-btn:last-child { margin-bottom: 0; }
    .filter-cat-btn .cat-icon {
        width: 1.6rem;
        height: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.4rem;
        background: rgba(255,255,255,0.06);
        flex-shrink: 0;
        transition: background 0.2s;
    }
    .filter-cat-btn .cat-icon svg { width: 13px; height: 13px; }
    .filter-cat-btn:hover {
        background: rgba(220,38,38,0.12);
        color: #fca5a5;
        border-color: rgba(220,38,38,0.25);
        transform: translateY(-1px);
    }
    .filter-cat-btn:hover .cat-icon { background: rgba(220,38,38,0.2); }
    .filter-cat-btn.active {
        background: rgba(220,38,38,0.18);
        color: #fff;
        border-color: rgba(220,38,38,0.5);
    }
    .filter-cat-btn.active .cat-icon {
        background: #dc2626;
    }

    @media (max-width: 900px) {
        #tosc-topbar {
            background: #ffffff !important;
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 -18px 48px rgba(15,23,42,0.18) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        #tosc-topbar .tosc-tab {
            color: #0f172a !important;
            background: transparent !important;
            border-color: transparent !important;
            text-shadow: none !important;
        }
        #tosc-topbar .tosc-tab.active {
            color: #ffffff !important;
            background: #dc2626 !important;
            border-color: #dc2626 !important;
            box-shadow: 0 10px 26px rgba(220,38,38,0.2) !important;
        }
        #tosc-topbar #sidebar-toggle {
            background: #f8fafc !important;
            border-color: #e2e8f0 !important;
            color: #0f172a !important;
            box-shadow: 0 8px 22px rgba(15,23,42,0.08) !important;
        }
        #tosc-filter-panel {
            left: 12px;
            right: 12px;
            bottom: calc(118px + env(safe-area-inset-bottom, 0px));
            width: auto;
            max-height: min(58dvh, 460px);
            border-radius: 26px;
            background: #ffffff;
            background-color: #ffffff;
            border: 1px solid rgba(15,23,42,0.12);
            box-shadow: 0 -18px 48px rgba(15,23,42,0.22);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            transform: translateY(calc(100% + 120px));
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            z-index: 10118;
        }
        #tosc-filter-panel.open {
            transform: translateY(0);
        }
        #tosc-filter-panel.is-dragging {
            transition: none !important;
        }
        #tosc-filter-panel::before {
            content: "";
            display: block;
            width: 44px;
            height: 5px;
            margin: 10px auto 4px;
            border-radius: 999px;
            background: rgba(15,23,42,0.22);
            flex: 0 0 auto;
        }
        body.bon-place-sheet-open #tosc-topbar {
            opacity: 0;
            pointer-events: none;
            transform: translateY(12px);
        }
        #tosc-filter-backdrop.open {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .filter-panel-header {
            position: relative;
            justify-content: flex-start;
            padding: 0.42rem 3.2rem 0.36rem 1rem;
            border-bottom: 0;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .filter-panel-title {
            color: #050505;
            font-size: 1.06rem;
            line-height: 1;
            letter-spacing: 0;
            text-align: left;
            text-transform: none;
        }
        .filter-panel-close {
            right: 0.72rem;
            top: 50%;
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            color: #0f172a;
            box-shadow: none;
        }
        .filter-panel-close:hover {
            background: #e2e8f0;
            color: #050505;
        }
        .filter-section {
            padding: 0.54rem 1rem 0.9rem;
            border-bottom: 0;
            text-align: left;
            overflow: visible;
            flex: 0 0 auto;
        }
        .filter-section + .filter-section {
            border-top: 1px solid #e2e8f0;
        }
        .filter-section-label {
            color: #475569;
            font-size: 0.78rem;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: 0;
            text-align: left;
            text-transform: none;
            margin-bottom: 0.72rem;
        }
        .filter-chips {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.55rem;
            justify-content: stretch;
            align-items: stretch;
            padding-bottom: 0;
        }
        .filter-chip {
            width: 100%;
            min-height: 48px;
            padding: 0.64rem 0.7rem;
            border-radius: 999px;
            background: #f8fafc;
            border-color: #e2e8f0;
            color: #0f172a;
            box-shadow: 0 10px 24px rgba(15,23,42,0.08);
            font-size: 0.76rem;
            line-height: 1.05;
            text-align: center;
            white-space: normal;
            touch-action: manipulation;
            pointer-events: auto;
            position: relative;
            z-index: 1;
        }
        .filter-chip.active {
            background: #dc2626;
            color: #fff;
            border-color: #dc2626;
            box-shadow: 0 12px 30px rgba(220,38,38,0.24);
        }
        .filter-cat-btn {
            padding: 0.65rem 1.25rem;
            font-size: 0.76rem;
        }
}


    /* Phase 4 UX theme pass: TOSC/UNPLI shell and proprietary controls use shared tokens. */
    body .bon-tosc-shell,
    body #tosc-main,
    body .tosc-view,
    body #tosc_alloggi,
    body #tosc_ristoranti,
    body #tosc_eventi,
    body #tosc_punti_interesse {
        background: var(--bon-bg) !important;
        background-color: var(--bon-bg) !important;
        color: var(--bon-text) !important;
    }

    .bon-site-header {
        background: var(--bon-surface-strong) !important;
        color: var(--bon-text) !important;
        border-bottom-color: var(--bon-border) !important;
    }

    #tosc-topbar,
    #tosc-filter-panel {
        background: var(--bon-surface-strong) !important;
        background-color: var(--bon-surface-strong) !important;
        color: var(--bon-text) !important;
        border-color: var(--bon-border) !important;
        box-shadow: var(--bon-shadow-panel) !important;
    }

    #tosc-filter-panel::before {
        background: var(--bon-border-strong) !important;
    }

    .filter-panel-header {
        background: var(--bon-surface-strong) !important;
        color: var(--bon-text) !important;
        border-bottom-color: var(--bon-border) !important;
    }

    .filter-panel-title,
    .filter-section-label,
    .filter-chip,
    .tosc-tab,
    #sidebar-toggle,
    .filter-panel-close {
        color: var(--bon-text) !important;
    }

    .filter-chip,
    #sidebar-toggle,
    .filter-panel-close {
        background: var(--bon-surface-soft) !important;
        border-color: var(--bon-border) !important;
        box-shadow: var(--bon-shadow-card) !important;
    }

    .filter-section + .filter-section,
    .filter-section {
        border-color: var(--bon-border) !important;
    }

    .filter-chip:hover,
    .tosc-tab:hover,
    #sidebar-toggle:hover,
    .filter-panel-close:hover {
        background: var(--bon-surface) !important;
        color: var(--bon-text) !important;
        border-color: var(--bon-border-strong) !important;
    }

    .filter-chip.active,
    .tosc-tab.active,
    .filter-cat-btn.active,
    .area-badge {
        background: var(--bon-brand) !important;
        color: var(--bon-on-brand) !important;
        border-color: var(--bon-brand) !important;
    }

    .filter-cat-btn {
        background: var(--bon-surface-soft) !important;
        color: var(--bon-brand) !important;
        border-color: var(--bon-brand) !important;
    }

    #tosc-filter-backdrop.open {
        background: rgba(15, 23, 42, 0.22) !important;
    }

    body.is-unpli-page #tosc-main {
        padding-bottom: 6rem !important;
    }

    .unpli-detail-close {
        display: none;
        position: fixed;
        top: clamp(6.25rem, 10vw, 8rem);
        right: clamp(1rem, 3vw, 2.5rem);
        z-index: 10080;
        width: 3.5rem;
        height: 3.5rem;
        border: 0;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.92);
        color: #ffffff;
        font-size: 2rem;
        font-weight: 900;
        line-height: 1;
        align-items: center;
        justify-content: center;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.32);
        cursor: pointer;
    }

    body.is-unpli-page.tosc-detail-active .unpli-detail-close {
        display: inline-flex;
    }

    body.is-unpli-page.tosc-detail-active #tosc-main {
        width: 100% !important;
        max-width: 1170px !important;
        margin: 0 auto !important;
        padding: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2.5vw, 2.5rem) calc(8rem + env(safe-area-inset-bottom, 0px)) !important;
        background: #e9eef4 !important;
        box-sizing: border-box !important;
    }

    body.is-unpli-page.tosc-detail-active #view-eventi,
    body.is-unpli-page.tosc-detail-active #tosc_eventi {
        width: min(1170px, 100%) !important;
        max-width: min(1170px, 100%) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi dw-gen-detail-page,
    body.is-unpli-page.tosc-detail-active #tosc_eventi dw-gen-detail-page-list,
    body.is-unpli-page.tosc-detail-active #tosc_eventi dw-gen-product-detail,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail {
        width: 100% !important;
        max-width: 1170px !important;
        margin: 0 auto !important;
        padding: clamp(1rem, 2.2vw, 2rem) !important;
        background: #ffffff !important;
        color: #0f172a !important;
        border-radius: 1.5rem !important;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14) !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        overflow: auto !important;
        overscroll-behavior: contain;
        touch-action: pan-y;
        box-sizing: border-box !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 1rem;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail {
        padding: 0 !important;
        background: #f8fafc !important;
        border-radius: 1.15rem !important;
        overflow: hidden !important;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16) !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-hero,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-body,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-main,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-kicker,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-facts,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-section,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-desc,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-panel {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-hero {
        position: relative !important;
        height: clamp(230px, 36vh, 430px) !important;
        min-height: 0 !important;
        padding: 0 !important;
        background:
            radial-gradient(circle at 20% 12%, rgba(220, 38, 38, 0.16), transparent 30%),
            linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
        overflow: hidden !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-hero img {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-close {
        display: none !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-body {
        padding: clamp(1.1rem, 3vw, 2.15rem) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
        gap: clamp(1rem, 3.2vw, 2.25rem) !important;
        align-items: start !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-main {
        min-width: 0 !important;
        display: grid !important;
        gap: 1rem !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-kicker {
        padding: 0 !important;
        color: #dc2626 !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-facts {
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.7rem !important;
        margin-top: 0.1rem !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-fact {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0.72rem 0.82rem !important;
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon label"
            "icon value" !important;
        column-gap: 0.72rem !important;
        align-items: center !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        border-radius: 0.85rem !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
        overflow: hidden !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-fact svg {
        grid-area: icon !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0.48rem !important;
        border-radius: 0.72rem !important;
        color: #dc2626 !important;
        background: #fef2f2 !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        box-sizing: border-box !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-fact span {
        grid-area: label !important;
        color: #64748b !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-fact strong {
        grid-area: value !important;
        min-width: 0 !important;
        color: #0f172a !important;
        font-size: 0.9rem !important;
        font-weight: 950 !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-section {
        padding: 0 !important;
        display: grid !important;
        gap: 0.62rem !important;
        margin-top: 0.2rem !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-section h2,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-panel h2 {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 0.82rem !important;
        font-weight: 950 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-desc {
        padding: 0 !important;
        color: #334155 !important;
        max-width: 74ch !important;
        font-size: clamp(0.98rem, 1.1vw, 1.06rem) !important;
        line-height: 1.72 !important;
        text-align: left !important;
        hyphens: auto !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-panel {
        align-self: start !important;
        position: sticky !important;
        top: 1rem !important;
        padding: 1rem !important;
        display: grid !important;
        gap: 0.78rem !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        border-radius: 0.95rem !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-panel p {
        margin: 0 !important;
        color: #475569 !important;
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        font-weight: 850 !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-row {
        display: grid !important;
        gap: 0.18rem !important;
        width: 100% !important;
        padding: 0.72rem 0 !important;
        border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
        text-align: left !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-qr-btn {
        width: 100% !important;
        min-height: 46px !important;
        padding: 0.82rem 1rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        border: 0 !important;
        border-radius: 0.82rem !important;
        background: #dc2626 !important;
        color: #ffffff !important;
        font: 950 0.84rem/1 "Lato", sans-serif !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        text-align: left !important;
        cursor: pointer !important;
        box-shadow: 0 10px 24px rgba(220, 38, 38, 0.22) !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-qr-btn svg {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 18px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2.4 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-row--qr,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-row--link {
        padding: 0.72rem 0.78rem !important;
        margin-top: 0.5rem !important;
        border: 0 !important;
        border-radius: 0.72rem !important;
        background: #15803d !important;
        color: #ffffff !important;
        text-decoration: none !important;
        box-shadow: 0 10px 24px rgba(21, 128, 61, 0.22) !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact {
        color: #0f172a !important;
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        font-weight: 850 !important;
        overflow-wrap: anywhere !important;
        text-decoration: none !important;
    }

    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-row--qr .tosc-local-contact,
    body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-row--link .tosc-local-contact {
        width: 100% !important;
        max-width: 100% !important;
        color: #ffffff !important;
    }

    @media (max-width: 900px) {
        .unpli-detail-close {
            top: calc(8.75rem + env(safe-area-inset-top, 0px));
            right: 1rem;
            width: 3rem;
            height: 3rem;
            font-size: 1.75rem;
        }

        body.is-unpli-page.tosc-detail-active #tosc-main {
            padding: 0.75rem 0.75rem calc(7rem + env(safe-area-inset-bottom, 0px)) !important;
        }

        body.is-unpli-page.tosc-detail-active #tosc_eventi dw-gen-detail-page,
        body.is-unpli-page.tosc-detail-active #tosc_eventi dw-gen-detail-page-list,
        body.is-unpli-page.tosc-detail-active #tosc_eventi dw-gen-product-detail,
        body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail {
            border-radius: 1rem !important;
            padding: 0.9rem !important;
        }

        body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail {
            padding: 0 !important;
        }

        body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-hero {
            height: 220px !important;
        }

        body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-detail-body {
            grid-template-columns: 1fr !important;
            padding: 1rem !important;
        }

        body.is-unpli-page.tosc-detail-active #tosc_eventi .tosc-local-contact-panel {
            position: static !important;
        }
}

@keyframes spin { to { transform: rotate(360deg); } }
    /* ── Wizard Overlay ── */
    #tosc-wizard-overlay {
        position: fixed;
        inset: 0;
        z-index: 1500;
        background: #050505;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
    }
    body.bon-has-dpad #tosc-wizard-overlay {
        padding-left: var(--bon-panel-safe-left, var(--bon-dpad-avoid-left, 0px));
        padding-right: calc(100vw - var(--bon-panel-safe-right, 100vw));
        padding-bottom: calc(var(--bon-nav-bottom-h, 90px) + 32px);
    }
    #tosc-wizard-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }
    #tosc-wizard-box {
        width: min(680px, 94vw);
        background: #050505;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 2rem;
        padding: 2.5rem 2rem 2rem;
        box-shadow: 0 40px 100px rgba(0,0,0,0.5);
        font-family: var(--bon-font);
        color: white;
        position: relative;
        max-height: 90vh;
        overflow-y: auto;
    }
    body.bon-has-dpad #tosc-wizard-box {
        width: min(680px, var(--bon-panel-safe-width, calc(100vw - 3rem)));
        max-height: calc(100vh - var(--bon-nav-bottom-h, 90px) - 64px);
    }
    #tosc-wizard-box::-webkit-scrollbar { display: none; }
    .twiz-close-btn {
        position: absolute;
        top: 1rem; right: 1rem;
        background: rgba(255,255,255,0.08);
        border: none;
        border-radius: 50%;
        width: 2.25rem; height: 2.25rem;
        color: #94a3b8;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background 0.2s;
    }
    .twiz-close-btn:hover { background: rgba(220,38,38,0.3); color: white; }

    /* Steps */
    .twiz-step { display: none; }
    .twiz-step.active { display: block; animation: twiz-in 0.3s ease; }
    @keyframes twiz-in {
        from { opacity:0; transform: translateY(16px); }
        to   { opacity:1; transform: translateY(0); }
    }

    .twiz-title {
        font-size: clamp(1.4rem, 4vw, 2rem);
        font-weight: 900;
        text-align: center;
        margin-bottom: 0.4rem;
    }
    .twiz-subtitle {
        text-align: center;
        color: #94a3b8;
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    /* Grid buttons */
    .twiz-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
    }
    .twiz-grid-comuni {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        justify-content: center;
    }
    .twiz-btn {
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 1rem;
        color: white;
        font-family: var(--bon-font);
        font-weight: 700;
        font-size: 0.95rem;
        padding: 1rem 0.75rem;
        cursor: pointer;
        transition: background 0.2s, transform 0.2s, border-color 0.2s;
        text-align: center;
    }
    .twiz-btn:hover {
        background: rgba(255,255,255,0.14);
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.25);
    }
    .twiz-btn-comune {
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 999px;
        color: white;
        font-family: var(--bon-font);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.55rem 1.2rem;
        cursor: pointer;
        transition: background 0.2s, transform 0.15s;
    }
    .twiz-btn-comune:hover { background: rgba(255,255,255,0.15); transform: scale(1.05); }

    /* Category buttons */
    .twiz-grid-cat {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    @media (max-width: 480px) {
 .twiz-grid-cat { grid-template-columns: repeat(2, 1fr); }
}

    .twiz-btn-cat {
        position: relative;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 1rem;
        color: white;
        font-family: var(--bon-font);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 1.1rem 0.5rem 0.8rem;
        cursor: pointer;
        display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
        transition: background 0.2s, transform 0.2s;
    }
    .twiz-btn-cat:hover { background: rgba(255,255,255,0.14); transform: translateY(-4px); }
    .twiz-btn-cat svg {
        width: 2.75rem; height: 2.75rem;
        background: white;
        border-radius: 50%;
        padding: 0.7rem;
        box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    }
    .twiz-btn-cat[data-cat="ristoranti"] svg { color: #dc2626; border: 2px solid #dc2626; }
    .twiz-btn-cat[data-cat="alloggi"] svg { color: #2563eb; border: 2px solid #2563eb; }
    .twiz-btn-cat[data-cat="punti-interesse"] svg { color: #92400e; border: 2px solid #92400e; }
    .twiz-btn-cat[data-cat="eventi"] svg { color: #ea580c; border: 2px solid #ea580c; }

    /* Badge conteggio POI */
    .twiz-count {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: rgba(0,0,0,0.45);
        color: white;
        font-size: 0.7rem;
        font-weight: 800;
        padding: 0.15rem 0.5rem;
        border-radius: 999px;
        line-height: 1.4;
        pointer-events: none;
    }

    /* Nav controls */
    .twiz-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
    }
    .twiz-back-btn {
        background: transparent;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        font-family: var(--bon-font);
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0.5rem 0;
    }
    .twiz-back-btn:hover { color: white; }
    .twiz-all-btn {
        background: #3b82f6;
        border: none;
        color: white;
        padding: 0.7rem 1.5rem;
        border-radius: 999px;
        font-family: var(--bon-font);
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(59,130,246,0.4);
        transition: transform 0.2s;
    }
    .twiz-all-btn:hover { transform: scale(1.05); }

    /* Phase 4 UX theme pass: fullscreen UNPLI wizard follows the shared panel grammar. */
    #tosc-wizard-overlay {
        background: rgba(15, 23, 42, 0.34) !important;
    }

    #tosc-wizard-box {
        background: var(--bon-surface-strong) !important;
        color: var(--bon-text) !important;
        border-color: var(--bon-border) !important;
        box-shadow: var(--bon-shadow-panel) !important;
    }

    .twiz-title,
    .twiz-btn,
    .twiz-btn-comune,
    .twiz-btn-cat,
    .twiz-back-btn,
    #twiz-lbl-town {
        color: var(--bon-text) !important;
    }

    .twiz-subtitle {
        color: var(--bon-text-muted) !important;
    }

    .twiz-btn,
    .twiz-btn-comune,
    .twiz-btn-cat,
    .twiz-close-btn {
        background: var(--bon-surface-soft) !important;
        border-color: var(--bon-border) !important;
        color: var(--bon-text) !important;
        box-shadow: var(--bon-shadow-card) !important;
    }

    .twiz-btn:hover,
    .twiz-btn-comune:hover,
    .twiz-btn-cat:hover,
    .twiz-close-btn:hover {
        background: var(--bon-surface) !important;
        border-color: var(--bon-border-strong) !important;
        color: var(--bon-text) !important;
    }

    .twiz-count {
        background: var(--bon-text) !important;
        color: var(--bon-surface) !important;
    }

    .twiz-all-btn {
        background: var(--bon-brand) !important;
        color: var(--bon-on-brand) !important;
        box-shadow: 0 12px 28px rgba(229, 37, 40, 0.24) !important;
    }

    /* Dettagli locali UNPLI: titolo pieno e testo descrittivo giustificato. */
    .tosc-local-detail h1 {
        max-width: none;
        font-size: clamp(1.32rem, 3.2vw, 2.56rem);
        line-height: 1.08;
        text-transform: none;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .tosc-local-detail-desc {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
    }