/* ============================================================
   QualeBanca v2 — Migliori Conti Correnti
   File:   /templates/finion/css/dev/migliori-conti-correnti-v2.css
   Pagina: /conti/i-migliori-conti-correnti-v2
   Tema:   Black Obsidian — Accent #EC651D

   Estratto dai 3 blocchi <style> inline del PHP in data 23/04/2026.
   Ordine preservato per mantenere la cascata CSS originale.

   Prefissi selettori: .qba-*, .v2-*
   ============================================================ */

/* ============================================================
   [BLOCCO 1/3] CSS principale pagina
   Origine: <style> riga 60 del PHP originale
   Contiene: font-face Inter, layout v2, box bonus, filtri,
   responsive, hero, sezioni tematiche
   ============================================================ */

   @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/templates/finion/fonts/inter/Inter-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/templates/finion/fonts/inter/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/templates/finion/fonts/inter/Inter-Bold.woff2') format('woff2');
}

.v2-scope,
.v2-scope * {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.v2-scope {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
} 
    div#products-wrapper {
        position: relative;
    }
    .profilo .group-control {
        display: inline-block;
        margin: 15px 10px 15px;
    }
    label.label-profilo[for="pensionati"] span, label.label-profilo[for="viaggiatori"] span {
        position: relative;
        left: -7px;
    }
    #products-wrappe input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .profilo .control-label label.label-profilo {
        font-size: 14px;
        font-family: 'Source Sans 3';
        border: none;
        color: #162947 !important;
        border-radius: 9px !important;
        background: #F5F5F5;
        padding: 10px 15px !important;
        box-shadow: 5px 5px 11px 1px #aeaec0, -7px -5px 7px -2px white !important;
        margin: 0 !important;
        width: 86px;
        display: inline-flex;
        text-align: center;
        height: 86px;
        justify-content: end;
        flex-flow: column;
        font-weight: 600;
        cursor: pointer;
    }
    .profilo .control-label label.label-profilo {
        font-size: 13px;
        width: 76px;
        height: 76px;
    }
    div.user-icon {
        background: url('/images/user1.png') scroll no-repeat center transparent;
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    div.famiglia-icon {
        background: url('/images/home.png') scroll no-repeat center transparent;
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    div.pensionati-icon {
        background: url('/images/pensionati.png') scroll no-repeat center transparent;
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    div.business-icon {
        background: url('/images/briefcase.png') scroll no-repeat center transparent;
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    div.viaggiatori-icon {
        background: url('/images/map.png') scroll no-repeat center transparent;
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    div.giovani-icon {
        background: url('/images/Profilo.png') scroll no-repeat center transparent;
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    .profilo input:checked ~ .control-label label.label-profilo {
        box-shadow: inset 8px 8px 5px -3px rgb(174 174 192 / 20%), inset -4px -5px 5px -2px #ffffff !important;
        background: #F5F5F5 !important;
        color: #EC651D !important;
        opacity: inherit !important;
    }
    .profilo input:checked ~ .control-label label.label-profilo .user-icon{
        background-image: url('/images/user1-orange.png');
    }
    .profilo input:checked ~ .control-label label.label-profilo .famiglia-icon {
        background-image: url('/images/home-orange.png');
    }
    .profilo input:checked ~ .control-label label.label-profilo .pensionati-icon {
        background-image: url('/images/pensionati-orange.png');
    }
    .profilo input:checked ~ .control-label label.label-profilo .business-icon {
        background-image: url('/images/briefcase-orange.png');
    }
    .profilo input:checked ~ .control-label label.label-profilo .viaggiatori-icon {
        background-image: url('/images/map-orange.png');
    }
    .profilo input:checked ~ .control-label label.label-profilo .giovani-icon {
        background-image: url('/images/Profilo-orange.png');
    }

    @media (max-width: 768px) {
        .profilo {
            margin-bottom: 35px;
        }
    }

    /* ============================================================
       V2 STEP 2 — NUOVO DESIGN FINTECH
       Sostituisce tutti gli step 1 v2-* precedenti.
       Font: Inter (da Google Fonts, vedi link nel head del template)
       Palette: #0f172a testo · #EC651D arancio QBA · #10b981 verde bonus
       ============================================================ */


    .v2-scope { font-family: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif; color: #0f172a; letter-spacing: -0.01em; }
    .v2-scope *, .v2-scope *::before, .v2-scope *::after { box-sizing: border-box; }
    .v2-scope a { color: inherit; text-decoration: none; }
    .v2-scope h1, .v2-scope h2, .v2-scope h3, .v2-scope p { margin: 0; }

    /* ----- HEADER PAGINA ----- */
    .v2-page-header {
        max-width: 1200px;
        margin: 0 auto 32px;
        padding: 0 20px;
    }
    .v2-breadcrumb {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 14px;
        font-weight:600;
    }
    .v2-breadcrumb a { color: #64748b; transition: color 0.15s; }
    .v2-breadcrumb a:hover { color: #0f172a; }
    .v2-breadcrumb .sep { margin: 0 8px; color: #cbd5e1; }
    .v2-page-title {
        font-size: 44px;
        font-weight:700;
        color: #0f172a;
        line-height: 1.05;
        margin: 0 0 14px;
        letter-spacing: -0.03em;
    }
    .v2-page-subtitle {
        font-size: 18px;
        color: #475569;
        line-height: 1.5;
        max-width: 720px;
        margin: 0 0 20px;
        font-weight: 400;
    }
    .v2-meta-row strong { color: #0f172a; font-weight: 600; }
    .v2-meta-row .sep { color: #cbd5e1; margin: 0 12px; }
    .v2-meta-row a { color: #EC651D; font-weight: 600; }

    /* Nasconde l'H1 v1 del banner */
    body:has(.v2-page-header) section#banner-single-product-container h1,
    /* ----- TOOLBAR (Ordina + Filtri) ----- */
    .v2-scope #products-wrapper .filter-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px 28px;
        border-bottom: 1px solid #e2e8f0;
        margin-bottom: 28px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .v2-scope #products-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: block !important;
    }
    .v2-scope #products-container > * {
        grid-column: unset !important;
    }

    /* ----- BOX PRODOTTO BASE ----- */
    /* Reset difensivo */
    .v2-scope .product-item {
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 20px !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        position: relative !important;
        transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
        overflow: hidden !important;
        cursor: default !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        box-shadow: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex-direction: column !important;
    }
    .v2-scope .product-item:hover {
        border-color: #cbd5e1 !important;
        box-shadow: 0 12px 32px rgba(15,23,42,0.06) !important;
        transform: translateY(-2px);
    }
    .v2-scope .product-item.is-featured {
        border: 2px solid #EC651D !important;
        box-shadow: 0 8px 28px rgba(236,101,29,0.12) !important;
    }

    /* Striscia viola a sinistra - NON mostrata quando il box è featured (si vede il bordo arancione) */
    .v2-scope .v2-box-accent {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
        z-index: 1;
    }
    .v2-scope .product-item.is-featured .v2-box-accent {
        display: none !important;
    }

    .v2-box-rank {
        position: absolute;
        top: -14px;
        left: 28px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #EC651D;
        color: #fff;
        font-weight:700;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(236,101,29,0.35);
        z-index: 3;
        border: 3px solid #fff;
    }
    .v2-box-rank.rank-2 { background: #94a3b8; box-shadow: 0 4px 12px rgba(148,163,184,0.35); }
    .v2-box-rank.rank-3 { background: #c08457; box-shadow: 0 4px 12px rgba(192,132,87,0.35); }
    .v2-box-rank.rank-neutral { background: #e2e8f0; color: #64748b; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }

    /* ----- BANNER BONUS (Variante D) ----- */
    /* Deve essere un blocco full-width posizionato SOPRA il grid interno del box */
    .v2-scope .v2-bonus-banner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
        color: #fff !important;
        padding: 12px 24px 12px 32px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        grid-column: 1 / -1 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    .v2-scope .v2-bonus-banner-value {
        font-weight:700 !important;
        font-size: 16px !important;
        letter-spacing: -0.01em !important;
    }
    .v2-scope .v2-bonus-banner-deadline {
        font-size: 12px !important;
        font-weight:600 !important;
        opacity: 0.95 !important;
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .v2-scope .v2-bonus-banner svg { flex-shrink: 0 !important; }

    /* ----- GRID INTERNO BOX ----- */
    .v2-scope .v2-box-inner {
        padding: 28px 32px !important;
        display: grid !important;
        grid-template-columns: 200px 1fr 260px !important;
        gap: 32px !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .v2-scope .v2-box-inner > * {
        min-width: 0;
    }

    /* Colonna SX: logo + rating */
    .v2-box-logo {
        width: 180px;
        height: 82px;
        margin: 0 auto 14px;
        background: #fff;
        border: 1px solid #f1f5f9;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 12px;
    }
    .v2-box-logo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    .v2-box-rating {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .v2-box-rating-num {
        font-weight:700;
        color: #0f172a;
        font-size: 17px;
        letter-spacing: -0.01em;
    }
    .v2-box-stars {
        color: #EC651D;
        font-size: 15px;
        letter-spacing: 1px;
    }
    .v2-box-stars .empty { color: #e2e8f0; }
    .v2-box-stars .half {
        background: linear-gradient(90deg, #EC651D 50%, #e2e8f0 50%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    .v2-box-link-recensione {
        font-size: 12px;
        color: #64748b;
        margin-top: 8px;
        display: block;
        text-align: center;
        font-weight:600;
        transition: color 0.15s;
    }
    .v2-box-link-recensione:hover { color: #EC651D; }

    /* Colonna centro: nome + desc + features */
    .v2-box-name {
        font-size: 21px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 4px;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }
    .v2-box-desc {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 16px;
        line-height: 1.45;
    }
    .v2-box-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;
    }
    .v2-box-feat {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 13px;
        color: #334155;
        line-height: 1.35;
    }
    .v2-box-feat-icon {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        background: #ecfdf5;
        color: #10b981;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 12px;
        font-weight:700;
        margin-top: 1px;
    }
    .v2-box-feat-icon.v-purple { background: #ede9fe; color: #7c3aed; }

    /* ==========================================================================
       FEATURE TOOLTIP (Tappa 7 — 2026-04-22)
       Icona (i) inline accanto al testo feature.
       Hover su desktop, tap su mobile (gestito da JS — classe .is-open).
       ========================================================================== */
    .v2-box-feat-text { display: inline; }
    .v2-feat-tip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        margin-left: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: help;
        position: relative;
        line-height: 1;
        font-family: inherit;
    }
    .v2-feat-tip:focus-visible {
        outline: 2px solid #EC651D;
        outline-offset: 2px;
        border-radius: 50%;
    }
    .v2-feat-tip-icon {
        display: inline-block;
        color: #94a3b8;
        transition: color 0.15s ease, transform 0.15s ease;
        vertical-align: middle;
    }
    .v2-feat-tip:hover .v2-feat-tip-icon,
    .v2-feat-tip.is-open .v2-feat-tip-icon {
        color: #EC651D;
        transform: scale(1.1);
    }
    .v2-feat-tip-bubble {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        min-width: 180px;
        max-width: 260px;
        padding: 8px 12px;
        background: #0f172a;
        color: #f8fafc;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.4;
        text-align: left;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, visibility 0s linear 0.15s;
        z-index: 10;
        white-space: normal;
    }
    .v2-feat-tip-bubble::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #0f172a;
    }
    .v2-feat-tip:hover .v2-feat-tip-bubble,
    .v2-feat-tip:focus .v2-feat-tip-bubble,
    .v2-feat-tip.is-open .v2-feat-tip-bubble {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }
    @media (max-width: 640px) {
        .v2-feat-tip-bubble {
            min-width: 160px;
            max-width: 220px;
            font-size: 11px;
        }
    }
    /* ----- END FEATURE TOOLTIP ----- */

    /* Colonna DX variante NESSUNA (canone grande minimal) */
    .v2-box-price { text-align: center; }
    .v2-box-price-label {
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 4px;
    }
    .v2-box-price-value {
        font-size: 32px;
        font-weight:700;
        color: #0f172a;
        line-height: 1;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
    }
    .v2-box-price-sub {
        font-size: 11px;
        color: #64748b;
        margin-bottom: 18px;
    }

    /* Colonna DX variante B/D (card bonus verde) */
    .v2-bonus-card {
        background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
        border: 1px solid #86efac;
        border-radius: 14px;
        padding: 18px 16px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .v2-bonus-card::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle, rgba(16,185,129,0.15), transparent 70%);
        pointer-events: none;
    }
    .v2-bonus-label {
        font-size: 10px;
        font-weight:700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #047857;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
    .v2-bonus-value {
        font-size: 32px;
        font-weight:700;
        color: #064e3b;
        line-height: 1;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
    }
    .v2-bonus-value.small { font-size: 24px; }
    .v2-bonus-desc {
        font-size: 11px;
        color: #065f46;
        line-height: 1.3;
        margin-bottom: 14px;
        font-weight:600;
    }
    .v2-bonus-subinfo {
        font-size: 10px;
        color: #64748b;
        margin-top: 10px;
    }
    .v2-bonus-subinfo strong { color: #0f172a; }

    /* CTA (usato sia in card bonus sia in variante nessuna) */
    .v2-cta-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: #EC651D;
        color: #fff !important;
        font-weight: 700;
        padding: 14px 20px;
        border-radius: 12px;
        font-size: 15px;
        transition: all 0.15s;
        box-shadow: 0 4px 12px rgba(236,101,29,0.25);
        letter-spacing: -0.01em;
    }
    .v2-cta-primary:hover {
        background: #d4570f;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(236,101,29,0.35);
    }
    .v2-cta-secondary {
        display: block;
        text-align: center;
        font-size: 12px;
        color: #64748b;
        padding: 8px;
        font-weight:600;
        margin-top: 6px;
        transition: color 0.15s;
    }
    .v2-cta-secondary:hover { color: #0f172a; }
    .v2-box-compare {
        font-size: 12px;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 6px;
        justify-content: center;
        cursor: pointer;
        padding: 4px;
        margin-top: 4px;
        user-select: none;
    }
    .v2-box-compare input {
        width: 14px;
        height: 14px;
        accent-color: #EC651D;
        cursor: pointer;
    }

    /* ----- FILTRI ATTIVI CHIPS ----- */
    .v2-active-filters {
        max-width: 1200px;
        margin: 0 auto 20px;
        padding: 0 20px;
        display: none;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .v2-active-filters.is-visible { display: flex; }
    .v2-active-filters__label {
        font-size: 13px;
        color: #64748b;
        font-weight:600;
        margin-right: 4px;
    }
    .v2-active-filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fef4e5;
        color: #8a3e0d;
        border: 1px solid #EC651D;
        padding: 4px 10px 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        font-family: inherit;
    }
    .v2-active-filter-chip:hover { background: #EC651D; color: #fff; }
    .v2-active-filters__reset {
        margin-left: 8px;
        font-size: 12px;
        color: #64748b;
        text-decoration: underline;
        cursor: pointer;
        background: none;
        border: none;
        padding: 4px;
        font-family: inherit;
    }

    /* ----- FOOTER LINK SEZIONE ----- */
    .v2-footer-links {
        max-width: 1200px;
        margin: 56px auto 0;
        padding: 32px 20px 0;
        border-top: 1px solid #e2e8f0;
    }
    .v2-footer-title {
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 16px;
    }
    .v2-footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .v2-footer-col-title {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 10px;
        font-weight:600;
    }
    .v2-footer-col-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .v2-footer-col-links a {
        font-size: 14px;
        color: #0f172a;
        font-weight:600;
        transition: color 0.15s;
        padding: 3px 0;
    }
    .v2-footer-col-links a:hover { color: #EC651D; }


    /* ----- FILTER BAR V2 (Tappa 6 — 2026-04-21) ----- */
    .qba-v2-filter-bar {
        max-width: 1200px !important;
        margin: 0 auto 20px !important;
        padding: 0 20px !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
    @media (max-width: 768px) {
        .qba-v2-filter-bar {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: 12px !important;
        }
        .qba-v2-filter-bar .v2-cta-mobile {
            margin: 0 !important;
            display: inline-block !important;
            flex-shrink: 0 !important;
        }
    }

    .qba-v2-filter-trigger {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1.5px solid #cbd5e1 !important;
        padding: 10px 18px !important;
        border-radius: 999px !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        cursor: pointer !important;
        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    }

    .qba-v2-filter-trigger:hover {
        background: #f8fafc !important;
        border-color: #EC651D !important;
        box-shadow: 0 4px 12px rgba(236, 101, 29, 0.15) !important;
        transform: translateY(-1px) !important;
    }

    .qba-v2-filter-trigger:focus-visible {
        outline: 2px solid #EC651D !important;
        outline-offset: 2px !important;
    }

    .qba-v2-filter-trigger:active { transform: translateY(0) !important; }

    .qba-v2-filter-trigger__icon {
        display: inline-block !important;
        flex-shrink: 0 !important;
        color: #EC651D !important;
    }

    .qba-v2-filter-trigger__label {
        text-transform: uppercase !important;
    }

    .qba-v2-filter-trigger__badge {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #EC651D !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        box-shadow: 0 2px 6px rgba(236, 101, 29, 0.35) !important;
        font-variant-numeric: tabular-nums !important;
    }

    .qba-v2-filter-trigger.has-filters {
        border-color: #EC651D !important;
        background: #fff7ef !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .qba-v2-filter-trigger,
        .qba-v2-filter-trigger:hover,
        .qba-v2-filter-trigger:active { transition: none !important; transform: none !important; }
    }

    @media (max-width: 640px) {
        .qba-v2-filter-bar { padding: 0 16px !important; margin-bottom: 16px !important; }
        .qba-v2-filter-trigger { padding: 9px 16px !important; font-size: 13px !important; }
    }
    /* ----- END FILTER BAR V2 ----- */

    /* ----- NAV STICKY COMPENSATION (post banner removal) ----- */
    /* Prima il banner-single-product-container alto ~280px faceva da spaziatore sotto
       il nav absolute. Senza banner, serve compensare manualmente l'altezza del nav. */
    .v2-scope {
        padding-top: 160px;
    }
    @media (max-width: 768px) {
        .v2-scope { padding-top: 70px; }
    }

    /* ----- TRUST BAR ----- */
    .v2-trust-bar {
        margin: 0 0 20px;
        padding: 10px 0;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 16px;
    }
    .v2-trust-bar__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        font-size: 13px;
        color: #64748b;
        font-weight: 400;
    }
    .v2-trust-signal {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }
    .v2-trust-signal strong { color: #0f172a; font-weight: 600; }
    .v2-trust-icon { flex-shrink: 0; vertical-align: middle; }
    .v2-trust-dot { color: #cbd5e1; font-size: 16px; line-height: 1; }
    @media (max-width: 600px) {
        .v2-trust-bar__inner { gap: 6px 12px; font-size: 12px; }
        .v2-trust-dot { display: none; }
        .v2-trust-bar { padding: 8px 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .v2-trust-bar * { animation: none !important; transition: none !important; }
    }
    .v2-trust-cta {
        color: #EC651D !important;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none !important;
        white-space: nowrap;
        transition: color 0.15s;
        flex-shrink: 0;
    }
    .v2-trust-bar .v2-trust-cta { color: #EC651D !important; }
    .v2-trust-cta:hover { color: #c04e12 !important; text-decoration: underline !important; }
    @media (max-width: 768px) {
        .v2-trust-cta { display: none !important; }
    }
    .v2-cta-mobile {
        display: none;
        color: #EC651D !important;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none !important;
        margin: 0 0 24px;
        text-align: left;
    }
    .v2-cta-mobile:hover { color: #c04e12 !important; text-decoration: underline !important; }
    @media (max-width: 768px) {
        .v2-cta-mobile { display: inline-block; }
    }

    /* ----- H1 SPACING OVERRIDE ----- */
    .v2-page-title { margin-top: 72px !important; margin-bottom: 48px !important; }
    @media (max-width: 768px) {
        .v2-page-title { margin-top: 36px !important; margin-bottom: 16px !important; }
    }

        /* ----- POPUP FILTRI V2 (invariato dallo step 1) ----- */
    .v2-filtri-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 99999;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 20px 20px;
        overflow-y: auto;
    }
    .v2-filtri-overlay.is-open { display: flex; }
    .v2-filtri-modal {
        background: #fff;
        border-radius: 16px;
        width: 100%;
        max-width: 640px;
        padding: 24px 28px;
        font-family: 'Inter', sans-serif;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .v2-filtri-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e2e8f0;
    }
    .v2-filtri-title {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
    }
    .v2-filtri-close {
        background: none;
        border: none;
        font-size: 28px;
        line-height: 1;
        color: #64748b;
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.15s;
    }
    .v2-filtri-close:hover {
        background: #f5f5f5;
        color: #0f172a;
    }
    .v2-filtri-section { margin-bottom: 22px; }
    .v2-filtri-section-title {
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 10px;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .v2-filtri-section-hint {
        font-size: 12px;
        font-weight: 400;
        color: #64748b;
    }
    .v2-filtri-section--profilo .group-control {
        display: inline-block;
        margin: 6px 8px 6px 0;
    }
    .v2-filtri-section--profilo input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .v2-filtri-section--profilo label.label-profilo {
        font-size: 13px;
        font-family: inherit;
        border: none;
        color: #0f172a !important;
        border-radius: 9px !important;
        background: #f8fafc;
        padding: 10px 15px !important;
        box-shadow: 5px 5px 11px 1px #aeaec0, -7px -5px 7px -2px white !important;
        margin: 0 !important;
        width: 76px;
        height: 76px;
        display: inline-flex;
        text-align: center;
        justify-content: end;
        flex-flow: column;
        font-weight: 600;
        cursor: pointer;
    }
    .v2-filtri-section--profilo input:checked ~ .control-label label.label-profilo {
        box-shadow: inset 8px 8px 5px -3px rgb(174 174 192 / 20%), inset -4px -5px 5px -2px #ffffff !important;
        background: #f8fafc !important;
        color: #EC651D !important;
    }
    .v2-filtri-section--profilo input:checked ~ .control-label label.label-profilo .user-icon      { background-image: url('/images/user1-orange.png') !important; }
    .v2-filtri-section--profilo input:checked ~ .control-label label.label-profilo .famiglia-icon  { background-image: url('/images/home-orange.png') !important; }
    .v2-filtri-section--profilo input:checked ~ .control-label label.label-profilo .pensionati-icon{ background-image: url('/images/pensionati-orange.png') !important; }
    .v2-filtri-section--profilo input:checked ~ .control-label label.label-profilo .business-icon  { background-image: url('/images/briefcase-orange.png') !important; }
    .v2-filtri-section--profilo input:checked ~ .control-label label.label-profilo .viaggiatori-icon{ background-image: url('/images/map-orange.png') !important; }
    .v2-filtri-section--profilo input:checked ~ .control-label label.label-profilo .giovani-icon   { background-image: url('/images/Profilo-orange.png') !important; }
    .v2-filtri-modal .user-icon       { background: url('/images/user1.png') scroll no-repeat center transparent; display: inline-block; width: 32px; height: 32px; margin: 0 auto; }
    .v2-filtri-modal .famiglia-icon   { background: url('/images/home.png') scroll no-repeat center transparent; display: inline-block; width: 32px; height: 32px; margin: 0 auto; }
    .v2-filtri-modal .pensionati-icon { background: url('/images/pensionati.png') scroll no-repeat center transparent; display: inline-block; width: 32px; height: 32px; margin: 0 auto; }
    .v2-filtri-modal .business-icon   { background: url('/images/briefcase.png') scroll no-repeat center transparent; display: inline-block; width: 32px; height: 32px; margin: 0 auto; }
    .v2-filtri-modal .viaggiatori-icon{ background: url('/images/map.png') scroll no-repeat center transparent; display: inline-block; width: 32px; height: 32px; margin: 0 auto; }
    .v2-filtri-modal .giovani-icon    { background: url('/images/Profilo.png') scroll no-repeat center transparent; display: inline-block; width: 32px; height: 32px; margin: 0 auto; }
    .v2-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
    .v2-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border: 1px solid #d1d7de;
        border-radius: 20px;
        background: #fff;
        font-size: 13px;
        font-weight:600;
        color: #0f172a;
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
    }
    .v2-chip:hover { border-color: #EC651D; color: #EC651D; }
    .v2-chip input { position: absolute; opacity: 0; pointer-events: none; }
    .v2-chip.is-active {
        background: #fef4e5;
        border-color: #EC651D;
        color: #8a3e0d;
    }
    .v2-chip.is-active::before {
        content: "\2713";
        font-weight: 700;
        color: #EC651D;
        margin-right: 2px;
    }
    .v2-canone-group { display: flex; flex-wrap: wrap; gap: 8px; }
    .v2-canone-btn {
        padding: 8px 16px;
        border: 1px solid #d1d7de;
        border-radius: 20px;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        color: #0f172a;
        cursor: pointer;
        transition: all 0.15s;
        min-width: 70px;
        font-family: inherit;
    }
    .v2-canone-btn:hover { border-color: #EC651D; }
    .v2-canone-btn.is-active {
        background: #0f172a;
        color: #fff;
        border-color: #0f172a;
    }
    .v2-promo-check {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-size: 14px;
        color: #0f172a;
    }
    .v2-promo-check input {
        width: 18px;
        height: 18px;
        accent-color: #EC651D;
        cursor: pointer;
    }
    .v2-filtri-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 18px;
        border-top: 1px solid #e2e8f0;
        margin-top: 8px;
        flex-wrap: wrap;
    }
    .v2-btn-reset {
        background: transparent;
        border: 1px solid #d1d7de;
        color: #0f172a;
        padding: 10px 18px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: all 0.15s;
    }
    .v2-btn-reset:hover {
        border-color: #0f172a;
        background: #f8fafc;
    }
    .v2-btn-apply {
        background: #EC651D;
        border: 1px solid #EC651D;
        color: #fff;
        padding: 10px 24px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        flex: 1;
        min-width: 200px;
        transition: all 0.15s;
    }
    .v2-btn-apply:hover {
        background: #d4570f;
        border-color: #d4570f;
    }

    /* ----- NASCONDO ELEMENTI DEL V1 NON PIU NECESSARI ----- */
    body:has(.v2-page-header) #filtri-container,
    body:has(.v2-page-header) .filtri-container,
    .v2-has-new-header #filtri-container,
    .v2-has-new-header .filtri-container { display: none !important; }

    /* Nascondo TUTTE le vecchie strutture v1 dei box prodotto.
       Il nuovo skeleton .v2-box-* sostituisce .thumbnail, .content, .links del v1.
       Si nascondono le classi v1 nel loop tramite CSS cosi il JS products.js
       continua a funzionare sui data value che vengono comunque renderizzati in hidden inputs. */
    .v2-scope .product-item .thumbnail,
    .v2-scope .product-item > .content,
    .v2-scope .product-item > .links,
    .v2-scope .product-item > .order,
    .v2-scope .product-item > div:not(.v2-box-accent):not(.v2-box-rank):not(.v2-bonus-banner):not(.v2-box-inner) {
        display: none !important;
    }

    /* ----- RESPONSIVE ----- */
    @media (max-width: 1000px) {
        .v2-page-title { font-size: 32px; }
        .v2-box-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; }
        .v2-box-features { max-width: 500px; margin: 0 auto; }
        .v2-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    }
    @media (max-width: 600px) {
        .v2-page-title { font-size: 26px; }
        .v2-bonus-banner { flex-wrap: wrap; padding: 10px 20px; }
        .v2-bonus-banner-deadline { margin-left: 0; }
    }

    /* ============================================================
       RESTORED (2026-04-22): regole per classi iniettate dal template
       Joomla / plugin (ACYMailing, SP Page Builder).
       Include anche classi iniettate dinamicamente da products-v2-compare.js
       (.v2-compare-slot-frame, .v2-compare-slot-remove).
       Non rimuovere.
       ============================================================ */
    .bottom-link i {
        background: #EC641C;
        width: 18.6px;
        height: 18.6px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        border-radius: 15px;
        font-size: 14px;
        color: #FFF;
        position: relative;
        top: -2px;
    }
    .page-content a, div#recensione-singola a {
        color: #EC651D;
    }
    .acym_module_form input[name="user[email]"] {
        position: inherit;
        opacity: inherit;
    }
    .v2-compare-slot-frame {
        width: 100% !important;
        height: 100% !important;
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .v2-compare-slot-frame img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
    .v2-compare-slot-remove {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: #EC651D !important;
        color: #ffffff !important;
        border: 2px solid #0f1218 !important;
        cursor: pointer !important;
        font-size: 14px !important;
        line-height: 1 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
        transition: transform 0.15s ease !important;
    }
    .v2-compare-slot-remove:hover {
        transform: scale(1.15) !important;
    }
    @media (max-width: 640px) {
        .v2-compare-slot-remove {
            width: 20px !important;
            height: 20px !important;
            top: -7px !important;
            right: -7px !important;
            font-size: 12px !important;
        }
    }
    /* ----- END RESTORED ----- */




/* ============================================================
   [BLOCCO 2/3] Barra confronto — Black Obsidian
   Origine: <style> riga 2356 del PHP originale
   Contiene: .v2-compare-bar, .v2-box-compare, checkbox custom
   ============================================================ */

/* ============================================================
   BARRA CONFRONTO v2 — Black Obsidian theme
   Consistente con banner/card bonus del box
   Prefisso: .v2-compare-*
   ============================================================ */
.v2-compare-bar {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99998 !important;
    background: linear-gradient(180deg, #1a1f2e 0%, #0f1218 100%) !important;
    border-top: 1px solid rgba(236, 101, 29, 0.25) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4), 0 -1px 0 rgba(236, 101, 29, 0.3) !important;
    padding: 14px 20px !important;
    transform: translateY(110%) !important;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    pointer-events: none !important;
}
.v2-compare-bar.is-visible {
    transform: translateY(0) !important;
    pointer-events: auto !important;
}
.v2-compare-bar-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}
.v2-compare-bar-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 140px !important;
}
.v2-compare-bar-title {
    color: #f1f5f9 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}
.v2-compare-bar-hint {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight:600 !important;
}
.v2-compare-bar-hint #v2-compare-count {
    color: #EC651D !important;
    font-weight: 700 !important;
}
.v2-compare-slots {
    display: flex !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    max-width: 560px !important;
}
.v2-compare-slot {
    width: 130px !important;
    height: 65px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
.v2-compare-slot.is-active {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.v2-compare-btn {
    background: #2a2a2a !important;
    color: #6e6e6e !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 12px 22px !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 8px !important;
    cursor: not-allowed !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
    min-width: 150px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.v2-compare-btn.is-ready {
    background: #EC651D !important;
    color: #ffffff !important;
    border-color: #EC651D !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(236, 101, 29, 0.45), 0 0 0 1px rgba(236, 101, 29, 0.3) !important;
}
.v2-compare-btn.is-ready:hover {
    background: #d55615 !important;
    border-color: #d55615 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 24px rgba(236, 101, 29, 0.55), 0 0 0 1px rgba(236, 101, 29, 0.4) !important;
}
.v2-compare-btn.is-ready:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}
.v2-compare-btn:disabled {
    cursor: not-allowed !important;
}

/* Mobile */
@media (max-width: 900px) {
    .v2-compare-bar {
        padding: 10px 12px !important;
    }
    .v2-compare-bar-inner {
        gap: 10px !important;
    }
    .v2-compare-bar-label {
        min-width: auto !important;
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: baseline !important;
    }
    .v2-compare-slots {
        gap: 6px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .v2-compare-slot {
        flex: 1 1 0 !important;
        width: auto !important;
        height: 44px !important;
        border-radius: 6px !important;
    }
    .v2-compare-slot img {
        max-width: 70px !important;
        max-height: 32px !important;
    }
    .v2-compare-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 11px 16px !important;
        font-size: 13px !important;
    }
}

/* Rispetto prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .v2-compare-bar { transition: none !important; }
    .v2-compare-btn, .v2-compare-slot-remove { transition: none !important; }
}

/* Bottone checkbox nel box — restyle in tema con QBA */
.v2-box-compare {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    font-weight:600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color 0.15s ease !important;
}
.v2-box-compare:hover { color: #EC651D !important; }
.v2-box-compare input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: #EC651D !important;
    cursor: pointer !important;
}
.v2-box-compare input[type="checkbox"]:checked + .v2-compare-label-text {
    color: #EC651D !important;
    font-weight: 600 !important;
}



/* ============================================================
   [BLOCCO 3/3] CSS CONSOLIDATO FINALE
   Origine: <style> riga 2562 del PHP originale
   Contiene: #no-result, patch responsive, icone profilo,
   override finali
   ============================================================ */

    #no-result {
        font-family: inherit;
        color: #162947;
        font-size: 20px;
        max-width: 1380px;
        margin: 0 auto;
        display: none;
    }
    #no-result .reset-btn,
    #no-result .filtri {
        cursor: pointer;
        color: #EC651D;
        font-weight: 600;
    }
    div#products-container {

    }
    #text-container {
        margin: 40px auto 0 !important;
        max-width: 1380px !important;
    }
    section.grid,
    section#sp-main-body .container {
        max-width: 100%;
    }
    #sp-main-body {
        padding-top: 0;
    }
    section#banner-single-product-container {
       
        display: flex;
        justify-content: center;
        min-height: 320px;
        background-size: cover;
        align-items: center;
    }
    section#banner-single-product-container h1 {
        text-align: center;
        font-family: inherit;
        color: #162947;
        font-size: 48px;
        font-weight: 700;
    }
    .products-container .product-item {
        display: flex;
        align-items: center;
        padding: 20px 20px 15px 20px;
        width: 1380px;
        box-shadow: inset 8px 8px 5px -3px rgb(174 174 192 / 20%), inset -4px -5px 5px -2px #fff;
        background-color: #F5F5F5;
        border-radius: 20px;
        margin: 0 auto 10px;
        position: relative;
        cursor: pointer;
    }
    .products-container .order {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .products-container .order span {
        font-family: 'Source Sans 3';
        font-size: 30px;
        display: flex;
        font-weight: 700;
        color: #FFF;
        background-color: #EC651D;
        width: 74px;
        height: 74px;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        margin-top: -30px !important;
    }
    .products-container .thumbnail {
        width: 367px;
        height: 270px;
        display: inline-block;
        box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
        margin: 0px 70px 0 35px;
        background: #F5F5F5;
        border-bottom: 14px solid #162947;
        border-radius: 13px;
        overflow: hidden;
    }
    .products-container .thumbnail content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        height: 92px;
    }
    .products-container .rating-container {
        display: flex;
        text-align: left;
        align-items: center;
        margin-left: -100px;
    }
    .rate {
        background: url(https://www.qualebanca.com/images/star-rating.png) scroll no-repeat 0 0 transparent;
        background-size: 130px 263px;
        width: 130px;
        height: 25px;
        margin-right: 20px;
        text-align: left;
        display: inline-block;
    }
    .products-container .link {
        text-align: left;
    }
    .bottom-link.orange-btn {
        color: #EC641C;
        font-weight: 300;
        font-style: italic;
        text-decoration: none !important;
    }
    .products-container .content {
        width: 438px;
        display: inline-block;
    }
    .title {
        font-family: 'Source Sans 3';
        font-size: 24px;
        text-transform: uppercase;
        font-weight: 700;
        color: #162947;
        margin-bottom: 0;
    }
    .products-container .content p,
    .products-container .offerta p {
        font-family: 'Source Sans 3';
        font-size: 22px !important;
        font-weight: 400;
        line-height: 25px;
        color: #162947;
    }
    .products-container .offerta h2,
    .products-container .offerta p {
        text-align: right !important;
    }
    .links {
        width: 340px;
    }
    .confronta,
    .offerta {
        text-align: right;
    }
    .offerta {
        margin: 35px 0 !important;
        overflow: hidden;
        display: inline-block;
    }
    .links .vai-al-sito-del-provider {
        position: absolute;
        right: 35px;
        bottom: 35px;
        text-align: right;
    }
    input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .confronta .label-confronta {
        cursor: pointer;
    }
    .confronta .label-confronta .checkmark {
        background: url(/images/jch-optimize/ng/images_checkbox-custom.webp) scroll no-repeat 0 0 transparent;
        width: 30px;
        height: 31px;
        display: inline-block;
        margin-right: 15px;
    }
    .checkmark input[type="checkbox"]:checked + .checkmark-box {
        background: url(https://www.qualebanca.com/images/checkbox-custom-checked.png) !important;
        width: 31px;
        height: 30px;
        display: inline-block;
    }


    .confronta .label-confronta>span {
        vertical-align: top;
        display: inline-block;
        text-decoration: underline;
        font-family: 'Source Sans 3';
        font-size: 20px !important;
        text-transform: uppercase;
        font-weight: 700;
        color: #162947;
        margin-bottom: 0;
    }

    /***** MOBILE *******/
    @media (max-width: 768px) {
         section#banner-single-product-container {
           height: 320px;
        }
                                    section#banner-single-product-container h1 {
                                    height: 77px;
                                    }
                                    
        .products-container .product-item {
            display: block;
            width: auto;
            padding-top: 15px !important;
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom: 35px;
            min-height: 650px;
        }
        .products-container .order {
            display: block;
            width: 100%;
            text-align: center;
            margin-bottom: 10px !important;
        }
        .products-container .order span {
            font-size: 23px !important;
            width: 40px !important;
            height: 40px !important;
            display: inline-flex
        }
        .products-container .thumbnail {
            margin: 0 0 20px 0;
            width: auto;
            height: auto;
        }
        .products-container content {
            height: 82px !important;
            margin-top: 15px !important;
        }
        .products-container .rating-container {
            margin-left: -15px;
            margin-bottom: 10px;
        }
        .products-container .link a.bottom-link.orange-btn {
            font-size: 16px;
        }
        div#app .products-container .content {
            text-align: center !important;
        }
        .title {
            font-size: 16px !important;
        }
        .products-container .content h2,
        .products-container .offerta h2,
        .products-container .content p,
        .products-container .offerta p {
            font-size: 16px !important;
        }
        .prelievi-atm, .canon-annuo-box {
            display: inline-block;
            width: 49%;
            vertical-align: top;
        }
        .title {
            font-size: 16px !important;
        }
        .products-container .offerta h2,
        .products-container .offerta p {
            text-align: center !important;
        }
        .links .vai-al-sito-del-provider {
            text-align: center;
            position: inherit;
        }
        .products-container .content {
            width: auto;
            text-align: center !important;
        }
        .links {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            flex-flow: column !important;
        }
        .confronta {
            order: 2;
            margin: 10px auto 32px;
            width: 75%;
            text-align: center;
            position: relative;
            left: 10px;
        }
        .offerta {
            order: 1;
            margin: 0 !important;
        }
        .confronta {
            font-size: 20px !important;
            width: auto !important;
        }
    }
    @media(min-width: 1280px){
        .links .vai-al-sito-del-provider {
            position: inherit;
            margin-bottom: 10px;
        }
        .links {
            text-align: right;
            width: 420px;
        }
        .confronta {
            position: relative;
            top: -10px;
        }
    }

    input#mod-search {
        position: inherit !important;
        opacity: inherit !important;
        height: auto !important;
    }


    .products-container .order span {
        font-family: 'Source Sans 3';
        font-size: 24px;
        display: flex;
        font-weight: 700;
        color: #FFF;
        background-color: #EC651D;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        margin-right: 10px;
        margin-top: -30px !important;
    }
    .products-container .order {
        display: flex;
        justify-content: start;
        align-items: baseline;
        height: 100%;
        width: 80%;
        position: relative;
        left: 30px;
        margin-bottom: 10px;
    }
    .products-container .order {
        display: flex;
        justify-content: start;
        align-items: baseline;
        height: 100%;
        width: 80%;
        position: relative;
        left: 30px;
        margin-bottom: 10px;
    }
    .products-container .order h2 {
        position: relative;
        top: 3px;
        font-family: 'Source Sans 3';
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 700;
    }
    @media(max-width: 768px) {
        #confronta-bottom-container ul {
            padding-left: 0;
        }
        #confronta-bottom-container ul li:last-child {
            display: block;
            margin-top: 10px;
        }
        .products-container .order span {
            width: 35px !important;
            height: 35px !important;
            font-size: 20px !important;
        }
        .products-container .order h2 {
            font-size: 16px;
            top: -4px;
        }
        .products-container .order {
            left: 0;
            justify-content: center;
            margin-top: 8px;
            width: 100%;
        }
        .mobile-device.box {
            width: 100%;
        }
    }

    div#author-section {
        max-width: 850px;
        margin: 90px auto 0;
    }
    .author_container h3 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 40px;
    }
    .author_container h3, .author_container .author_title, .author_container .author_bio {
        font-family: 'Source Sans 3';
        color: #162947;
    }
    .author_container figure {
        width: 130px;
        height: 130px;
        overflow: hidden;
        margin: 0 25px 25px 0;
        float: left;
        border-radius: 85px;
        box-shadow: 5px 5px 11px 1px rgb(174 174 192 / 36%), -10px -10px 8px -4px white !important;
    }
    .author_container figure img {
        width: 100%;
        display: inline-block;
    }
    #sp-component .author_container .author_name {
        margin-top: 50px !important;
    }
    .author_container .author_name {
        color: #EC651D;
        font-size: 26px;
        margin-top: 75px;
        font-weight: 600;
        line-height: 32px;
    }
    .author_container .author_title {
        font-style: italic;
        font-size: 25px;
        font-weight: 400;
        line-height: 30px;
    }
    .author_container .author_bio {
        font-size: 18px;
        clear: both;
        max-width: 850px;
    }
    div#youtube-video-area {
        text-align: center;
        margin-top: 40px;
    }

    .nrf-widget.tf-video {
        display: inline-block;
    }

    @media(min-width: 1240px){
        section#banner-single-product-container {
            background-image: url(/images/hero-image-1.webp);
            background-position: center bottom;
        }
    }  
    .v2-scope .v2-box-logo {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 200px !important;
    height: 110px !important;
    box-shadow: none !important;
}
.v2-scope .v2-box-logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    /* Nessun border sull'immagine: lasciamo il logo "pulito" */
}
 
/* FIX 3 — Mobile: neutralizzo le regole ereditate dal template vecchio
   Problema: .products-container .product-item {min-height:650px; display:block} 
   del template template globale rompe il layout v2 */
@media (max-width: 768px) {
    .v2-scope .products-container .product-item,
    .v2-scope .product-item {
        display: block !important;
        min-height: unset !important;
        padding: 0 !important;
        width: auto !important;
        margin: 0 0 16px 0 !important;
    }
    .v2-scope .v2-box-inner {
        padding: 24px 20px !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: center !important;
    }
    .v2-scope .v2-box-logo {
        width: 160px !important;
        height: 80px !important;
        margin: 0 auto 12px !important;
    }
    .v2-scope .v2-box-features {
        grid-template-columns: 1fr !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        text-align: left !important;
    }
    .v2-scope .v2-box-rank {
        top: -12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .v2-scope .v2-box-price {
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    .v2-scope .v2-cta-primary {
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    /* Page header mobile */
    .v2-page-title { font-size: 26px !important; }
    .v2-page-subtitle { font-size: 15px !important; }
    .v2-page-header { padding: 0 16px !important; }
    .v2-scope #products-container { padding: 0 16px !important; }
}
 
/* FIX 4 — Box ombra più delicata e staccata, come nel mockup */
.v2-scope .product-item {
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04) !important;
    border: 1px solid #e2e8f0 !important;
}  

/* ============================================================================
   QBA v2 — CSS CONSOLIDATO FINALE
   Ricostruito il 20/04/2026 a partire dai ~18 patch accumulati
   
   Questo blocco RAPPRESENTA LO STATO VISIVO ATTUALE della pagina v2.
   Sostituisce tutti i patch precedenti accumulati in fondo al <style>.
   
   Struttura:
   1. BASE — Wrapper, product-item, box-inner grid
   2. RANK PILL — Uniforme, grigio, posizionato
   3. ACCENT VIOLA — Stanghetta corta laterale
   4. COLONNA LOGO — Container 230x100, ratio 2.3:1
   5. COLONNA CENTRALE — Nome, desc, features verticali
   6. CHECKMARK FEATURES — Verdi uniformi (override v-purple)
   7. COLONNA DESTRA — Bonus card nera, price block
   8. BANNER VARIANTE D — Black Obsidian con glow arancione
   9. CTA PRIMARY — Arancione con hover
   10. RECENSIONE E COMPARE — Link sotto rating, checkbox
   11. MOBILE (≤ 768px) — Column layout, tutto centrato
   12. MOBILE PICCOLO (≤ 400px) — Ottimizzazioni extra
   ============================================================================ */


/* ==========================================================================
   1. BASE — Wrapper, product-item, layout grid
   ========================================================================== */

.v2-scope .product-item {
    position: relative !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 16px !important;
}

.v2-scope .product-item:hover {
    transform: translateY(-2px) !important;
    border-color: #c0c0c0 !important;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15) !important;
}

/* Bordo arancione per Variante D (con banner) */
.v2-scope .product-item.is-featured {
    border: 2px solid #EC651D !important;
}

/* Grid desktop: colonne con dimensioni giuste + gap generoso */
@media (min-width: 769px) {
    .v2-scope .v2-box-inner {
        display: grid !important;
        grid-template-columns: 260px 1fr 280px !important;
        gap: 32px !important;
        padding: 28px 32px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .v2-scope .v2-box-inner > * {
        min-width: 0 !important;
    }
}


/* ==========================================================================
   2. RANK PILL — Uniforme grigio, posizionato in alto-sx
   ========================================================================== */

/* Regola base: TUTTI i rank grigio uniforme (incluso #1) */
.v2-scope .v2-box-rank,
.v2-scope .v2-box-rank.rank-2,
.v2-scope .v2-box-rank.rank-3,
.v2-scope .v2-box-rank.rank-neutral {
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
    transform: none !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    font-weight:700 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    color: #6b7280 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}

/* Variante D (banner): rank dentro il banner, centrato verticalmente */
.v2-scope .product-item.is-featured .v2-box-rank {
    top: 10px !important;
    left: 20px !important;
    transform: none !important;
    background: #e5e7eb !important;
    color: #6b7280 !important;
    /* Halo bianco leggero per staccare dal banner nero */
    box-shadow: 0 0 0 3px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.3) !important;
}


/* ==========================================================================
   3. ACCENT VIOLA — Stanghetta decorativa sx accorciata
   ========================================================================== */

.v2-scope .v2-box-accent {
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;
    bottom: 20px !important;
    height: auto !important;
    width: 4px !important;
    background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%) !important;
    border-radius: 4px !important;
    z-index: 1 !important;
}

/* Nascosta in Variante D (c'è già il bordo arancione) */
.v2-scope .product-item.is-featured .v2-box-accent {
    display: none !important;
}


/* ==========================================================================
   4. COLONNA LOGO — Container 230x100, ratio 2.3:1
   ========================================================================== */

.v2-scope .v2-box-logo {
    width: 230px !important;
    height: 100px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: block !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.v2-scope .v2-box-logo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: block !important;
    transform: none !important;
}


/* ==========================================================================
   5. DESKTOP (≥ 769px) — Layout grid + allineamenti + font
   ========================================================================== */

@media (min-width: 769px) {
    
    /* Box inner: grid 3 colonne, allineamento combinato */
    .v2-scope .v2-box-inner {
        align-items: start !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    
    /* Padding-top maggiorato per rank pill in Var B/1 (no banner) */
    .v2-scope .product-item:not(.is-featured) .v2-box-inner {
        padding-top: 56px !important;
    }
    
    /* Variante D: padding ridotto (banner occupa già spazio sopra) */
    .v2-scope .product-item.is-featured .v2-box-inner {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    /* Colonna SX (logo + rating + link): centrata verticalmente */
    .v2-scope .v2-box-inner > div:first-child,
    .v2-scope .v2-col-logo,
    .v2-scope .v2-box-left-col {
        align-self: center !important;
    }
    
    .v2-scope .v2-box-rating {
        margin-top: 6px !important;
    }
    
    .v2-scope .v2-box-link-recensione {
        margin-top: 6px !important;
        font-size: 12px !important;
        color: #64748b !important;
        text-align: center !important;
        display: block !important;
    }
    
    .v2-scope .v2-box-rating-num {
        font-size: 17px !important;
        font-weight:700 !important;
    }
    
    /* Colonna CENTRALE: allineata in alto con padding moderato */
    .v2-scope .v2-box-inner > div:nth-child(2) {
        align-self: start !important;
        padding-top: 8px !important;
    }
    
    .v2-scope .v2-box-name {
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 6px !important;
    }
    
    .v2-scope .v2-box-desc {
        font-size: 14px !important;
        color: #64748b !important;
        line-height: 1.45 !important;
        margin-top: 4px !important;
        margin-bottom: 14px !important;
    }
    
    /* Features: COLONNA VERTICALE (4 bullet su 4 righe) */
    .v2-scope .v2-box-features {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        gap: 10px !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }
    
    .v2-scope .v2-box-feat {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 13px !important;
        color: #334155 !important;
        line-height: 1.4 !important;
        align-items: flex-start !important;
        gap: 10px !important;
        display: flex !important;
    }
    
    .v2-scope .v2-box-feat-icon {
        width: 20px !important;
        height: 20px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        font-weight:700 !important;
        margin-top: 1px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Colonna DESTRA: bonus card/price block allineati in alto */
    .v2-scope .v2-box-inner > div:last-child,
    .v2-scope .v2-bonus-card,
    .v2-scope .v2-box-price {
        align-self: start !important;
        margin-top: 0 !important;
    }
    
    .v2-scope .v2-box-price-value {
        font-size: 26px !important;
        font-weight:700 !important;
        line-height: 1 !important;
        letter-spacing: -0.03em !important;
    }
    
    .v2-scope .v2-box-compare {
        margin-top: 10px !important;
    }
}


/* ==========================================================================
   6. CHECKMARK FEATURES — Tutti verdi uniformi
   Override: v-purple viene neutralizzato
   ========================================================================== */

.v2-scope .v2-box-feat-icon,
.v2-scope .v2-box-feat-icon.v-purple {
    background: #ecfdf5 !important;
    color: #10b981 !important;
}


/* ==========================================================================
   7. BONUS CARD — Nera con glow arancione radiale (Concept A)
   ========================================================================== */

.v2-scope .v2-bonus-card {
    background: linear-gradient(145deg, #0a0a0a 0%, #1f1f1f 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 22px 20px !important;
    border-radius: 16px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.v2-scope .v2-bonus-card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 140% !important;
    height: 140% !important;
    background: radial-gradient(circle, rgba(236,101,29,0.22) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.v2-scope .v2-bonus-label {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #fb923c !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.v2-scope .v2-bonus-label svg {
    stroke: #fb923c !important;
}

.v2-scope .v2-bonus-value {
    font-size: 42px !important;
    font-weight:700 !important;
    letter-spacing: -0.05em !important;
    line-height: 0.95 !important;
    margin-bottom: 6px !important;
    position: relative !important;
    background: linear-gradient(180deg, #fff 0%, #d4d4d4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.v2-scope .v2-bonus-value.small {
    font-size: 30px !important;
}

.v2-scope .v2-bonus-desc {
    font-size: 12px !important;
    color: #a3a3a3 !important;
    margin-bottom: 16px !important;
    position: relative !important;
    line-height: 1.4 !important;
}

.v2-scope .v2-bonus-desc strong {
    color: #fff !important;
}

.v2-scope .v2-bonus-subinfo {
    font-size: 11px !important;
    color: #737373 !important;
    margin-top: 12px !important;
    position: relative !important;
}

.v2-scope .v2-bonus-subinfo strong {
    color: #fff !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   8. BANNER VARIANTE D — Black Obsidian con icona centrata
   ========================================================================== */

.v2-scope .v2-bonus-banner {
    position: relative !important;
    background: linear-gradient(145deg, #0a0a0a 0%, #1f1f1f 100%) !important;
    color: #fff !important;
    padding: 14px 28px 14px 64px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 52px !important;
    overflow: hidden !important;
    border-radius: 18px 18px 0 0 !important;
}

/* Glow arancione radiale */
.v2-scope .v2-bonus-banner::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle at 25% 50%, rgba(236,101,29,0.18) 0%, transparent 55%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Icona SVG arancione */
.v2-scope .v2-bonus-banner svg {
    display: inline-block !important;
    flex-shrink: 0 !important;
    stroke: #fb923c !important;
    margin-right: 8px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Testo valore banner centrato */
.v2-scope .v2-bonus-banner-value {
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: -0.005em !important;
    color: #fff !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    display: inline-block !important;
    flex-shrink: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Deadline absolute a destra */
.v2-scope .v2-bonus-banner-deadline {
    position: absolute !important;
    right: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    font-weight:600 !important;
    color: rgba(255,255,255,0.75) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
}


/* ==========================================================================
   9. CTA PRIMARY — Arancione con hover glow
   ========================================================================== */

@media (min-width: 769px) {
    .v2-scope .v2-cta-primary {
        font-size: 15px !important;
        font-weight: 700 !important;
        padding: 14px 20px !important;
        border-radius: 12px !important;
        letter-spacing: -0.01em !important;
        background: #EC651D !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(236,101,29,0.25) !important;
        transition: all 0.2s !important;
    }
    
    .v2-scope .v2-cta-primary:hover {
        background: #f97316 !important;
        box-shadow: 0 0 0 4px rgba(236,101,29,0.2) !important;
        transform: translateY(-1px) !important;
    }
}


/* ==========================================================================
   10. RECENSIONE E COMPARE — Link + checkbox
   ========================================================================== */

/* Nascondo "Recensione completa" (doppione di "Leggi la recensione") */
.v2-scope .v2-cta-secondary {
    display: none !important;
}

/* Checkbox "Aggiungi al confronto" */
.v2-scope .v2-box-compare {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    color: #64748b !important;
    padding: 8px !important;
    margin-top: 10px !important;
    transition: color 0.15s !important;
}

.v2-scope .v2-box-compare:hover {
    color: #0f172a !important;
}

.v2-scope .v2-box-compare input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #EC651D !important;
    cursor: pointer !important;
    margin: 0 !important;
}


/* ==========================================================================
   11. MOBILE (≤ 768px) — Column layout, tutto centrato
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Box: border-radius ridotto */
    .v2-scope .product-item,
    .v2-scope .products-container .product-item {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: unset !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Box inner: 1 colonna centrata */
    .v2-scope .v2-box-inner {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 40px 20px 24px 20px !important;
        text-align: center !important;
    }
    
    /* CRITICO: tutti i figli del box-inner devono essere full-width */
    .v2-scope .v2-box-inner > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Var B/1 mobile: padding-top maggiorato per rank in alto */
    .v2-scope .product-item:not(.is-featured) .v2-box-inner {
        padding-top: 48px !important;
    }
    
    /* Var D mobile: banner occupa già spazio */
    .v2-scope .product-item.is-featured .v2-box-inner {
        padding-top: 24px !important;
    }
    
    /* Rank: più piccolo e ripristinato in alto-sx */
    .v2-scope .v2-box-rank {
        top: 12px !important;
        left: 12px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
    
    /* Rank Var D mobile: fisso (banner può wrappare) */
    .v2-scope .product-item.is-featured .v2-box-rank {
        top: 14px !important;
        left: 14px !important;
        transform: none !important;
    }
    
    /* Accent viola mobile: più sottile e accorciato */
    .v2-scope .v2-box-accent {
        top: 16px !important;
        bottom: 16px !important;
        width: 3px !important;
        border-radius: 3px !important;
    }
    
    /* Logo: più piccolo mobile (ratio 2.3:1 mantenuto) */
    .v2-scope .v2-box-logo {
        width: 184px !important;
        height: 80px !important;
        margin: 0 auto !important;
    }
    
    /* Features: 1 colonna */
    .v2-scope .v2-box-features {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: left !important;
        gap: 10px !important;
    }
    
    /* Nome prodotto centrato */
    .v2-scope .v2-box-name {
        font-size: 22px !important;
        font-weight:700 !important;
        text-align: center !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }
    
    .v2-scope .v2-box-desc {
        text-align: center !important;
        margin-bottom: 18px !important;
    }
    
    /* Rating centrato */
    .v2-scope .v2-box-rating {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .v2-scope .v2-box-link-recensione {
        display: block !important;
        text-align: center !important;
        font-size: 12px !important;
        color: #94a3b8 !important;
        margin-top: 8px !important;
        margin-bottom: 4px !important;
    }
    
    /* Card bonus e price block full-width (forza massima) */
    .v2-scope .v2-bonus-card,
    .v2-scope .v2-box-price,
    .v2-scope .product-item .v2-bonus-card,
    .v2-scope .product-item .v2-box-price {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 24px 28px !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .v2-scope .v2-bonus-value {
        font-size: 38px !important;
    }
    
    .v2-scope .v2-bonus-value.small {
        font-size: 26px !important;
    }
    
    /* CTA full-width mobile */
    .v2-scope .v2-cta-primary {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        margin-top: 12px !important;
        display: block !important;
        text-align: center !important;
        background: #EC651D !important;
        color: #fff !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
    }
    
    /* Banner mobile: icona + testo centrati in column, deadline sotto */
    .v2-scope .v2-bonus-banner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 20px 12px 52px !important;
        gap: 4px !important;
        font-size: 12px !important;
        min-height: 52px !important;
        border-radius: 14px 14px 0 0 !important;
    }
    
    .v2-scope .v2-bonus-banner-value {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        text-align: center !important;
        font-size: 13px !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
    }
    
    .v2-scope .v2-bonus-banner svg {
        display: inline-block !important;
        width: 14px !important;
        height: 14px !important;
        margin-right: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .v2-scope .v2-bonus-banner-deadline {
        position: static !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 11px !important;
    }
}


/* ==========================================================================
   12. MOBILE PICCOLO (≤ 400px) — iPhone SE e simili
   ========================================================================== */

@media (max-width: 400px) {
    .v2-scope .v2-box-inner {
        padding: 36px 16px 20px 16px !important;
    }
    
    .v2-scope .v2-box-logo {
        width: 160px !important;
        height: 70px !important;
    }
    
    .v2-scope .v2-bonus-value {
        font-size: 32px !important;
    }
    
    .v2-scope .v2-box-name {
        font-size: 20px !important;
    }
}


/* ==========================================================================
   12. FIX CHECKBOX CONFRONTO — Override template finion (opacity:0 globale)
   Priorità massima: ripristina aspetto nativo del checkbox dentro .v2-box-compare
   ========================================================================== */
.v2-scope .v2-box-compare {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 8px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 12.5px !important;
    font-weight:600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color 0.15s ease !important;
    position: static !important;
}
.v2-scope .v2-box-compare:hover { color: #EC651D !important; }

/* Ripristino aspetto nativo del checkbox, override template finion */
.v2-scope .v2-box-compare input[type="checkbox"] {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    pointer-events: auto !important;
    clip: auto !important;
    clip-path: none !important;
    left: auto !important;
    top: auto !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #EC651D !important;
    cursor: pointer !important;
    display: inline-block !important;
    vertical-align: middle !important;
    background: initial !important;
    border: initial !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

.v2-scope .v2-box-compare input[type="checkbox"]:checked ~ .v2-compare-label-text {
    color: #EC651D !important;
    font-weight: 600 !important;
}


/* ==========================================================================
   13. FALLBACK POOL - nascosti di default, mostrati solo se promossi dai filtri
   I box con data-is-top="0" (fallback) sono sempre nel DOM ma hidden.
   JS aggiunge classe .is-promoted quando un fallback deve comparire.
   ========================================================================== */
body .v2-scope .products-container .product-item.is-fallback:not(.is-promoted) {
    display: none !important;
}

/* Nasconde i box filtrati via JS (classe aggiunta dinamicamente). Alta specificità per battere qualsiasi display:block !important */
body .v2-scope #products-container .product-item.v2-hidden,
body .v2-scope #products-container .product-item.v2-hidden.is-featured {
    display: none !important;
}
/* ==========================================================================
   14. POPUP FILTRI — LIGHT REFINED THEME (Tappa 4 — 2026-04-21)
   Bianco sporco #fafbfc, accenti arancioni, ombre morbide, micro-animazioni.
   Tutti i selettori hanno prefix "body" per specificità garantita.
   ========================================================================== */

/* --- Overlay: backdrop leggermente sfocato --- */
body .v2-filtri-overlay {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* --- Modal: bianco sporco caldo con bordo e ombra raffinata --- */
body .v2-filtri-modal {
    background: #fafbfc !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
}

/* --- Header: separatore delicato, X con hover arancione --- */
body .v2-filtri-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    padding-bottom: 16px !important;
    margin-bottom: 4px !important;
}
body .v2-filtri-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
body .v2-filtri-close {
    color: #64748b !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 10px !important;
    width: 36px !important;
    height: 36px !important;
    transition: all 0.2s ease !important;
}
body .v2-filtri-close:hover {
    background: #EC651D !important;
    border-color: #EC651D !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
    box-shadow: 0 4px 12px rgba(236, 101, 29, 0.25) !important;
}

/* --- Separatori tra sezioni: sottili linee chiare --- */
body .v2-filtri-section {
    border-top: 1px solid rgba(15, 23, 42, 0.05) !important;
    padding-top: 22px !important;
    margin-top: 4px !important;
}
body .v2-filtri-section:first-of-type {
    border-top: none !important;
    padding-top: 8px !important;
}
body .v2-filtri-section-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
}
body .v2-filtri-section-hint {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    font-size: 0.85em !important;
}

/* --- Sezione Profilo: pill con ombra soft + hover animato --- */
body .v2-filtri-section--profilo label.label-profilo {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .v2-filtri-section--profilo label.label-profilo:hover {
    border-color: #EC651D !important;
    color: #EC651D !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(236, 101, 29, 0.15) !important;
}
body .v2-filtri-section--profilo input:checked ~ .control-label label.label-profilo {
    background: #fff7f1 !important;
    border-color: #EC651D !important;
    color: #EC651D !important;
    box-shadow: 0 4px 12px rgba(236, 101, 29, 0.18), inset 0 0 0 1px rgba(236, 101, 29, 0.3) !important;
    font-weight: 600 !important;
}

/* --- Icone profilo: le arancioni esistenti per selezionato (già gestito dal CSS originale) --- */
/* Non tocco le icone: restano quelle di default del CSS originale */

/* --- Chip Caratteristiche: pill ariose con hover curato --- */
body .v2-chip {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight:600 !important;
}
body .v2-chip:hover {
    border-color: #EC651D !important;
    color: #EC651D !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(236, 101, 29, 0.15) !important;
}
body .v2-chip.is-active {
    background: #fff7f1 !important;
    border-color: #EC651D !important;
    color: #EC651D !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(236, 101, 29, 0.18), inset 0 0 0 1px rgba(236, 101, 29, 0.3) !important;
}
body .v2-chip.is-active::before {
    color: #EC651D !important;
}

/* --- Button Canone: pill scalabile con active state evidente --- */
body .v2-canone-btn {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight:600 !important;
}
body .v2-canone-btn:hover {
    border-color: #EC651D !important;
    color: #EC651D !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(236, 101, 29, 0.15) !important;
}
body .v2-canone-btn.is-active {
    background: #EC651D !important;
    border-color: #EC651D !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(236, 101, 29, 0.35) !important;
}
/* ==========================================================================
   TOGGLE PROMO — BULLET-PROOF (pseudo-elementi sulla label)
   Sostituisce l'approccio appearance:none sull'input.
   Funziona anche se JCH minifica/rimuove qualsiasi property.
   ========================================================================== */

/* La label diventa il contenitore flex con toggle */
body .v2-filtri-modal label.v2-promo-check {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
    font-weight:600 !important;
    color: #0f172a !important;
    padding: 4px 0 !important;
    position: relative !important;
    user-select: none !important;
}

/* Nascondo completamente il checkbox nativo — ma resta accessibile */
body .v2-filtri-modal label.v2-promo-check input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Il toggle TRACK (sfondo) — disegnato con ::before della label */
body .v2-filtri-modal label.v2-promo-check::before {
    content: "" !important;
    display: inline-block !important;
    width: 48px !important;
    height: 26px !important;
    background: #e2e8f0 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 26px !important;
    flex-shrink: 0 !important;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    order: -1 !important;
}

/* Il toggle KNOB (cursore bianco) — disegnato con ::after della label */
body .v2-filtri-modal label.v2-promo-check::after {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

/* Stato CHECKED: uso :has() per stilizzare il parent in base al child */
body .v2-filtri-modal label.v2-promo-check:has(input:checked)::before {
    background: #EC651D !important;
    border-color: #EC651D !important;
    box-shadow: 0 0 0 4px rgba(236, 101, 29, 0.12) !important;
}

body .v2-filtri-modal label.v2-promo-check:has(input:checked)::after {
    transform: translate(22px, -50%) !important;
}

/* FALLBACK per browser senza :has() (molto vecchi): aggiungo classe via JS — opzionale */
/* Non necessario per Chrome/Safari/Firefox moderni */

/* --- Footer: separatore + flex --- */
body .v2-filtri-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
}

/* --- Button Reset: ghost elegante --- */
body .v2-btn-reset {
    background: transparent !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    font-weight:600 !important;
}
body .v2-btn-reset:hover {
    background: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}

/* --- Button Apply: arancione con glow e micro-lift al hover --- */
body .v2-btn-apply {
    background: linear-gradient(180deg, #EC651D 0%, #d85615 100%) !important;
    border: 1px solid #d85615 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(236, 101, 29, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}
body .v2-btn-apply:hover {
    background: linear-gradient(180deg, #f17128 0%, #e55e18 100%) !important;
    box-shadow: 0 10px 26px rgba(236, 101, 29, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}
body .v2-btn-apply:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(236, 101, 29, 0.35) !important;
}

/* --- Counter numerico pieno arancione: coerenza visiva --- */
body .v2-btn-apply #v2-counter {
    font-weight: 700 !important;
}
/* ==========================================================================
   15. POPUP FILTRI — PILL FIX + CENTRATURA + MOBILE COMPACT (Tappa 4)
   Fix pill profilo (dimensioni, testo non strabordante, icone visibili),
   centratura sezione profilo, compattezza mobile.
   ========================================================================== */

/* ─── PILL PROFILO: dimensioni più generose, testo rispettato ─── */
body .v2-filtri-modal .v2-filtri-section--profilo label.label-profilo {
    width: 96px !important;
    height: 96px !important;
    padding: 12px 8px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    word-break: normal !important;
    overflow: visible !important;
}

/* Icone dentro le pill: dimensioni appropriate, niente margini auto */
body .v2-filtri-modal .v2-filtri-section--profilo .user-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .famiglia-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .pensionati-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .business-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .viaggiatori-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .giovani-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Testo span dentro il label: evita overflow */
body .v2-filtri-modal .v2-filtri-section--profilo label.label-profilo span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

/* ─── CENTRATURA SEZIONE PROFILO (desktop + mobile) ─── */
body .v2-filtri-modal .v2-filtri-section--profilo .profilo {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px !important;
}
body .v2-filtri-modal .v2-filtri-section--profilo .group-control {
    margin: 0 !important;
    display: inline-block !important;
}

/* ─── CANONE BUTTON uniformi ─── */
body .v2-filtri-modal .v2-canone-btn {
    min-width: 80px !important;
    text-align: center !important;
}

/* ─── CHIP CARATTERISTICHE: centrate anche loro per coerenza ─── */
body .v2-filtri-modal .v2-chip-group {
    justify-content: center !important;
}
body .v2-filtri-modal .v2-canone-group {
    justify-content: center !important;
}

/* ─── FOCUS RING accessibility sul toggle Promo ─── */
body .v2-filtri-modal label.v2-promo-check:has(input:focus-visible)::before {
    box-shadow: 0 0 0 4px rgba(236, 101, 29, 0.25) !important;
}

/* ─── SPACING sezioni più arioso ─── */
body .v2-filtri-modal .v2-filtri-header {
    padding-bottom: 20px !important;
    margin-bottom: 8px !important;
}

/* ========================================================================
   MOBILE: compatto, senza scroll per i pulsanti finali
   ======================================================================== */
@media (max-width: 600px) {
    /* Modal: altezza massima controllata, padding ridotto */
    body .v2-filtri-modal {
        max-height: 92vh !important;
        padding: 18px 16px !important;
        border-radius: 16px !important;
    }
    body .v2-filtri-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
    }
    body .v2-filtri-overlay.is-open {
        padding-top: 16px !important;
    }

    /* Header compatto */
    body .v2-filtri-modal .v2-filtri-header {
        padding-bottom: 12px !important;
        margin-bottom: 0 !important;
    }
    body .v2-filtri-modal .v2-filtri-title {
        font-size: 18px !important;
    }
    body .v2-filtri-modal .v2-filtri-close {
        width: 32px !important;
        height: 32px !important;
    }

    /* Sezioni: meno spazio verticale */
    body .v2-filtri-modal .v2-filtri-section {
        padding-top: 14px !important;
        margin-top: 0 !important;
    }
    body .v2-filtri-modal .v2-filtri-section-title {
        margin-bottom: 10px !important;
        font-size: 14px !important;
    }
    body .v2-filtri-modal .v2-filtri-section-hint {
        font-size: 0.8em !important;
    }

    /* Pill profilo mobile: 80x80 invece di 96x96 */
    body .v2-filtri-modal .v2-filtri-section--profilo label.label-profilo {
        width: 80px !important;
        height: 80px !important;
        padding: 10px 6px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    body .v2-filtri-modal .v2-filtri-section--profilo .user-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .famiglia-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .pensionati-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .business-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .viaggiatori-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .giovani-icon {
        width: 24px !important;
        height: 24px !important;
    }
    body .v2-filtri-modal .v2-filtri-section--profilo .profilo {
        gap: 8px !important;
    }

    /* Chip caratteristiche: padding più piccolo, gap ridotto */
    body .v2-filtri-modal .v2-chip {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    body .v2-filtri-modal .v2-chip-group {
        gap: 6px !important;
    }

    /* Canone: button più piccoli */
    body .v2-filtri-modal .v2-canone-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-width: 65px !important;
    }
    body .v2-filtri-modal .v2-canone-group {
        gap: 6px !important;
    }

    /* Promo: testo più piccolo, toggle uguale */
    body .v2-filtri-modal .v2-promo-check {
        font-size: 13px !important;
    }

    /* Footer: compatto */
    body .v2-filtri-modal .v2-filtri-footer {
        padding-top: 14px !important;
        margin-top: 12px !important;
        gap: 10px !important;
    }
    body .v2-filtri-modal .v2-btn-reset,
    body .v2-filtri-modal .v2-btn-apply {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    /* Hover disabilitato su mobile (transform causa jitter touch) */
    body .v2-filtri-modal .v2-chip:hover,
    body .v2-filtri-modal .v2-canone-btn:hover,
    body .v2-filtri-modal label.label-profilo:hover,
    body .v2-filtri-modal .v2-btn-apply:hover {
        transform: none !important;
    }

    /* Animazioni più rapide su mobile */
    body .v2-filtri-overlay {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
}

/* Extra-small mobile (<380px): ancora più compatto */
@media (max-width: 380px) {
    body .v2-filtri-modal .v2-filtri-section--profilo label.label-profilo {
        width: 72px !important;
        height: 72px !important;
        font-size: 10.5px !important;
    }
    body .v2-filtri-modal .v2-filtri-section--profilo .profilo {
        gap: 6px !important;
    }
}
/* ==========================================================================
   16. POPUP FILTRI — FINAL TWEAKS (Tappa 4)
   - Desktop: pill profilo 78x86 → 6 in una riga
   - Mobile: altezza 88vh, pill 3+3 in due righe
   ========================================================================== */

/* ─── DESKTOP: pill profilo più strette per stare tutte in riga ─── */
body .v2-filtri-modal .v2-filtri-section--profilo label.label-profilo {
    width: 78px !important;
    height: 86px !important;
    padding: 10px 4px !important;
    font-size: 11px !important;
    gap: 4px !important;
}
body .v2-filtri-modal .v2-filtri-section--profilo .profilo {
    gap: 6px !important;
    flex-wrap: nowrap !important;
}
body .v2-filtri-modal .v2-filtri-section--profilo .user-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .famiglia-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .pensionati-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .business-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .viaggiatori-icon,
body .v2-filtri-modal .v2-filtri-section--profilo .giovani-icon {
    width: 26px !important;
    height: 26px !important;
}

/* ========================================================================
   MOBILE: altezza 88vh + pill 3+3 forzate
   ======================================================================== */
@media (max-width: 600px) {
    /* Modal più compatto */
    body .v2-filtri-modal {
        max-height: 88vh !important;
        padding: 16px 14px !important;
    }
    body .v2-filtri-overlay.is-open {
        padding-top: 12px !important;
    }

    /* Header ultra compatto */
    body .v2-filtri-modal .v2-filtri-header {
        padding-bottom: 10px !important;
    }

    /* Sezioni: ancora più stretto il padding */
    body .v2-filtri-modal .v2-filtri-section {
        padding-top: 12px !important;
    }
    body .v2-filtri-modal .v2-filtri-section-title {
        margin-bottom: 8px !important;
        font-size: 13px !important;
    }

    /* Footer compatto */
    body .v2-filtri-modal .v2-filtri-footer {
        padding-top: 12px !important;
        margin-top: 10px !important;
    }

    /* Pill profilo: larghezza calcolata per 3 per riga */
    body .v2-filtri-modal .v2-filtri-section--profilo .profilo {
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    body .v2-filtri-modal .v2-filtri-section--profilo .group-control {
        width: calc((100% - 16px) / 3) !important;
        max-width: 110px !important;
        display: block !important;
    }
    body .v2-filtri-modal .v2-filtri-section--profilo label.label-profilo {
        width: 100% !important;
        height: 78px !important;
        padding: 10px 6px !important;
        font-size: 11px !important;
    }
    body .v2-filtri-modal .v2-filtri-section--profilo .user-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .famiglia-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .pensionati-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .business-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .viaggiatori-icon,
    body .v2-filtri-modal .v2-filtri-section--profilo .giovani-icon {
        width: 22px !important;
        height: 22px !important;
    }
}

/* Extra-small mobile (<380px) */
@media (max-width: 380px) {
    body .v2-filtri-modal .v2-filtri-section--profilo label.label-profilo {
        height: 72px !important;
        font-size: 10.5px !important;
        padding: 8px 4px !important;
    }
}