/* FILE CUSTOM */

/* =====================================================================
   TIPOGRAFIA
   =====================================================================

   Qui sta TUTTA la tipografia del CSS custom, separata dal resto:

     font-family · font-size · font-weight · font-style · line-height
     letter-spacing · text-transform · resa dei caratteri

   Il resto del file (layout, colori, bordi, spazi, componenti) inizia
   dopo il titolo "LAYOUT, COLORI E COMPONENTI" e non contiene piu'
   nessuna di queste proprieta'.

   FAMIGLIA
   Inter, caricata dal tema. Qui non si dichiara nessun altro font:
   dove compare "font-family: inherit" serve solo a far ereditare Inter
   a pulsanti e campi, che il browser altrimenti scrive col proprio font.

   INDICE (nell'ordine in cui le sezioni compaiono)
   - HOMEPAGE
       Titolo principale
       Nomi delle categorie
       Categorie e banner editoriali
       Pulsanti dei banner e titoli dei caroselli
       Selettore moto: pulsante su mobile
       Selettore moto su desktop e tablet
       Selettore moto: modello in grassetto
       Intestazione delle categorie
       Selettore moto su mobile
       Titoli dei caroselli su mobile
   - HEADER
       Mobile
       Desktop e tablet
   - MENU
       Modelli moto Aprilia
   - SCHEDA PRODOTTO
       Box "La tua moto" · Base del box
       Box "La tua moto" · Contenuto
       Box "La tua moto" · Etichetta "La tua moto"
       Box "La tua moto" · Nome del modello
       Box "La tua moto" · Link "Cambia moto"
       Box "La tua moto" · Pillola "Compatibile"
       Box "La tua moto" · Pillola "Non compatibile"
       Box "La tua moto" · Altri modelli compatibili
       Box "La tua moto" · Elenco dei modelli
       Box "La tua moto" · Versione compatta
       Galleria
       Titolo e metadati
       Prezzo
       Disponibilità
       Quantità e cuore preferiti
       Pulsante "Aggiungi al carrello"
       Descrizione e rassicurazioni
       Contenuto del pacchetto
       Invito a selezionare la moto
   - ELENCHI PRODOTTI
       Card prodotto
       Fascia rosa della categoria
       Barra filtri
       Fine elenco
       Fascia dei marchi
       Smartphone stretti
   - RIFINITURE

   COME E' ORGANIZZATO
   - Una sezione per ogni parte del sito, nell'ordine dell'indice qui
     sopra. Ogni sezione ha un titolo e una riga che dice a cosa serve.
   - Ogni regola ha lo stesso selettore e la stessa condizione
     (@media, @container, @supports) della regola corrispondente piu'
     in basso, che ne contiene il resto dello stile.
   - L'ordine delle regole NON va cambiato: a parita' di selettore vince
     quella scritta dopo.

   COME MODIFICARLA
   - Per cambiare un corpo, un peso o un'interlinea: modificare il
     valore qui, non aggiungere la stessa proprieta' nella parte bassa.
   - Per una regola nuova: metterla nella sezione del suo modulo, dopo
     le regole esistenti dello stesso elemento.
   - I corpi con clamp() e unita' cqi/cqw seguono la larghezza del
     componente (card, tile, banner), non quella della finestra.
   - Attenzione a line-height: in etichette, badge e pulsanti decide
     anche l'altezza del riquadro. Cambiandola cambia l'ingombro.
   - Alcune font-size qui regolano la grandezza di icone e frecce
     disegnate come caratteri: sono indicate dal selettore
     (::before, ::after, i, .fa).
   ===================================================================== */

/* ---------------------------------------------------------------------
   HOMEPAGE · Titolo principale
   Titolo H1 e testo introduttivo in cima alla home.
   --------------------------------------------------------------------- */

main > .homeabstract h1.ptitle {
    font-size: 40px;
    line-height: 1.075;
    font-weight: 700;
    letter-spacing: -.037em;
}

main > .homeabstract .txt {
    font-size: 21px;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -.017em;
}

@container asp-home-hero (min-width: 1000px) {

    main > .homeabstract h1.ptitle {
        font-size: 44px;
    }

}

@container asp-home-hero (max-width: 650px) {

    main > .homeabstract h1.ptitle {
        font-size: clamp(26px, 6.8cqi, 28px);
        line-height: 1.10;
        letter-spacing: -.038em;
        font-weight: 700;
    }

    main > .homeabstract .txt {
        font-size: 16px;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: -.017em;
    }

}

/* ---------------------------------------------------------------------
   HOMEPAGE · Nomi delle categorie
   Valori di base dei nomi sotto le icone.
   --------------------------------------------------------------------- */

main > .homecategories .carousel .h3 {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.012em;
    text-transform: none;
}

/* ---------------------------------------------------------------------
   HOMEPAGE · Categorie e banner editoriali
   Nomi delle categorie (il corpo segue la larghezza del riquadro) e
   testi delle tre card editoriali.
   --------------------------------------------------------------------- */

@container asp-home-categories (max-width: 575px) {

    /* Tipografia V1: il corpo segue la larghezza della tile. Resta 10.5px
       fino a 375px (i nomi più lunghi, "Impianto elettrico / frenante",
       riempiono già la riga) e sale fino a 12px da ~420px, sempre su una riga. */
    main > .homecategories .carousel .h3 {
        font-size: clamp(10.5px, calc(3.58cqw - 2.9px), 12px);
        line-height: 1.1;
    }

}

@media (min-width: 576px) and (max-width: 1199.98px) {

    main > .homecategories .carousel .h3 {
        font-size: 12px;
    }

}

@media (min-width: 1200px) {

    main > .homecategories .carousel .h3 {
        letter-spacing: -.02em;
    }

}

main > .gbanner:not(.prod) .contents .title.ptitle {
    font-size: 12px; /* Tipografia V1: era 11px; ora uguale all'etichetta della card primaria */
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: .065em;
    text-transform: uppercase;
}

main > .gbanner:not(.prod) .contents p {
    font-size: 18px;
    line-height: 1.14;
    letter-spacing: -.028em;
    font-weight: 700;
}

main > .gbanner:not(.prod) .contents .btn {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

main > .gbanner:not(.prod) .contents .btn::after {
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
}

main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents .btn {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}

main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .title.ptitle {
    font-size: 12px;
}

main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p {
    font-size: 29px;
    line-height: 1.1;
    font-weight: 700;
}

@container asp-home-editorial (min-width: 820px) {

    main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p {
        font-size: 30px;
    }

    main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents p {
        font-size: 22px;
    }

}

@container asp-home-editorial (max-width: 520px) {

    main > .gbanner:not(.prod) .contents .title.ptitle {
        font-size: 11px; /* Tipografia V1: era 10px. A 12px "PERFORMANCE PARTS" va a capo a 360-375px */
        line-height: 1.2;
    }

    main > .gbanner:not(.prod) .contents p {
        font-size: 14px;
        line-height: 1.15;
        letter-spacing: -.025em;
    }

    main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p {
        font-size: 24px;
        line-height: 1.10;
    }

    main > .gbanner:not(.prod) .contents .btn {
        font-size: 10px;
    }

    main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents .btn {
        font-size: clamp(10px, calc(4.24cqw - 5.3px), 12px);
        line-height: 1.12;
    }

    main > .gbanner:not(.prod) .contents .btn::after {
        font-size: 12px;
    }

}

@container asp-home-editorial (max-width: 360px) {

    main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents p {
        font-size: 13px;
    }

}

/* ---------------------------------------------------------------------
   HOMEPAGE · Pulsanti dei banner e titoli dei caroselli
   Pulsante della card principale e titoli "In evidenza", "Offerte lampo".
   --------------------------------------------------------------------- */

main > .gbanner:not(.prod)
.row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn {
    font-size: 12px; /* Tipografia V1: era 10.5px */
}

main > .gbanner:not(.prod)
.row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn::after {
    font-size: 13px;
}

@container asp-home-editorial (max-width: 520px) {

    main > .gbanner:not(.prod)
    .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn {
        font-size: 12px; /* Tipografia V1: era 10px */
    }

}

main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.028em;
}

main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle > span {
    font-size: 14px;
    line-height: 1.42;
    font-weight: 400;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------
   HOMEPAGE · Selettore moto: pulsante su mobile
   Pulsante "Seleziona / Cambia modello" e la sua freccia.
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary {
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
        text-transform: none !important; /* HTML contiene gia' «Cambia modello» */
    }

    main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary::after {
        font-size: 17px;
        line-height: 1;
        font-weight: 400;
    }

}

/* ---------------------------------------------------------------------
   HOMEPAGE · Selettore moto su desktop e tablet
   Icona, etichetta, nome del modello e pulsante, da 768px.
   --------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left i {
        font-size: 30px;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline {
        line-height:1.2;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline::before {
        font-size:11px;
        font-weight:700;
        line-height:1.2;
        letter-spacing:.035em;
        text-transform:none;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline > span {
        font-size:20px !important;
        line-height:1.18 !important;
        font-weight:700 !important;
        letter-spacing:-.016em;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span {
        font-size:17px !important;
        font-weight:500 !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary {
        font-size:13px !important;
        font-weight:700 !important;
        line-height:1.2 !important;
        text-transform:none !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary::after {
        font-size:15px;
        line-height:1;
        font-weight:400;
    }

}

/* ---------------------------------------------------------------------
   HOMEPAGE · Selettore moto: modello in grassetto
   Nome del modello selezionato, da 768px.
   --------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
    .ptitle.ptitleline:has(strong) > span strong {
        font-weight: 700 !important;
    }

}

/* ---------------------------------------------------------------------
   HOMEPAGE · Intestazione delle categorie
   Titolo sopra le categorie e pulsante del selettore moto su mobile.
   --------------------------------------------------------------------- */

main > .homecategories .spacerhor::before {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.018em;
}

@media only screen and (max-width: 767px) {

    main > .homecategories .spacerhor::before {
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
    .searchparts .btn.btn-primary {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
    .searchparts .btn.btn-primary::after {
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }

}

/* ---------------------------------------------------------------------
   HOMEPAGE · Selettore moto su mobile
   Dove il corpo è 0 il testo originale è nascosto e sostituito da
   quello più corto della regola ::after che segue.
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left > i {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline {
        line-height: 1.18 !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline::before {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span strong {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span::after {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.23 !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:not(:has(strong)) > span {
        font-size: 13.2px !important;
        line-height: 1.23 !important;
        font-weight: 700 !important;
        letter-spacing: -.01em !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary {
        font-size: 0 !important;
        line-height: 0 !important;
        text-transform: none !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary::after {
        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
    .searchparts button.btn.btn-primary::after {
        font-size: 22px !important;
    }

}

/* ---------------------------------------------------------------------
   HOMEPAGE · Titoli dei caroselli su mobile
   "In evidenza", "Offerte lampo" sotto i 768px.
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle {
        font-size: 24px;
        line-height: 1.17;
        letter-spacing: -.026em;
        font-weight: 700;
    }

}

/* ---------------------------------------------------------------------
   HEADER · Mobile
   Fino a 767px: icone, contatore del carrello, campo di ricerca.
   Il corpo 0 nasconde il testo dei pulsanti che mostrano solo l'icona.
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    header[role="banner"] .testa .info.btns > ul.list-inline > li > a,
    header[role="banner"] .testa .info.btns > ul.list-inline > li > button,
    header[role="banner"] .testa .btn-modal-bike,
    header[role="banner"] .testa #cart .ajax-cart a {
        line-height: 1 !important;
    }

    header[role="banner"] .testa .info.btns i.icon-motorbike-as {
        font-size: 30px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    header[role="banner"] .testa .info.btns i.icon-cart-n,
    header[role="banner"] .testa .info.btns i.icon-menu-n {
        font-size: 0 !important;
        line-height: 0 !important;
        font-style: normal !important;
    }

    header[role="banner"] .testa #cart .badge {
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 17px !important;
    }

    header[role="banner"] .testa #frm_cerca #txt_cerca {
        line-height: 44px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    header[role="banner"] .testa #frm_cerca .input-group-btn > button.btn {
        font-size: 0 !important; /* nasconde solo il testo visivo 'Cerca' */
        line-height: 0 !important;
    }

    header[role="banner"] .testa #frm_cerca .input-group-btn > button.btn > i.icon-search {
        font-size: 20px !important;
        line-height: 1 !important;
    }

}

/* ---------------------------------------------------------------------
   HEADER · Desktop e tablet
   Da 768px: barra nera in alto, ricerca, scritte accanto alle icone,
   menu principale.
   --------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

    header .testa #txt_cerca {
        font-size: 15px !important;
        font-weight: 400 !important;
    }

    header .testa #frm_cerca .input-group-btn .btn {
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }

    header .testa .toggle-canvas i.icon-menu-n {
        font-size: 0 !important;
        line-height: 0 !important;
        font-style: normal !important;
    }

    header .testa .btn-modal-bike {
        font-size: 0 !important;
    }

    header .testa .btn-modal-bike > i {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    header .testa .btn-modal-bike:has(> i)::before {
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
        text-transform: none !important;
    }

    header .testa .btn-modal-bike:has(> i)::after {
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }

    header .testa .btn-modal-bike:has(> img)::before {
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    header .testa .btn-modal-bike:has(> img)::after {
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
    }

    header .testa .a_saveurl {
        font-size: 0 !important;
    }

    header .testa .a_saveurl > i {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    header .testa .a_saveurl::before {
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    header .testa .a_saveurl::after {
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
    }

    header .testa #cart > .ajax-cart > span > a {
        font-size: 0 !important;
    }

    header .testa #cart i.icon-cart-n {
        font-size: 0 !important;
        line-height: 0 !important;
        font-style: normal !important;
    }

    header .testa #cart > .ajax-cart > span > a::before {
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    header .testa #cart > .ajax-cart > span > a::after {
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
    }

    header .testa #cart .badge {
        line-height: 17px !important;
        font-size: 10px !important;
        font-weight: 500 !important;
    }

    header .testa .langselector .flag > button {
        line-height: 1 !important;
    }

}

/* ---------------------------------------------------------------------
   MENU · Modelli moto Aprilia
   Il menu a tendina grande su desktop: famiglie e modelli.
   --------------------------------------------------------------------- */

@media (min-width: 1200px) {

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a {
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 16px !important;
        text-transform: none !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="5"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="14"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="8"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="16"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="7"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="22"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="10"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"])::before {
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        text-transform: uppercase !important;
    }

}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Base del box
   Interlinea di partenza del box.
   --------------------------------------------------------------------- */

.product-view .moto-compat {
    font-family: inherit;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Contenuto
   Blocco di testo accanto alla foto della moto.
   --------------------------------------------------------------------- */

.product-view .moto-compat .moto-compat-message {
    font-size: 0;
    line-height: 1.25;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Etichetta "La tua moto"
   La scritta piccola sopra il nome del modello.
   --------------------------------------------------------------------- */

.product-view .moto-compat .moto-compat-message::before {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Nome del modello
   Il modello selezionato dal cliente.
   --------------------------------------------------------------------- */

.product-view .moto-compat .moto-compat-message strong {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Link "Cambia moto"
   Il collegamento per scegliere un altro modello.
   --------------------------------------------------------------------- */

.product-view .moto-compat .moto-compat-change {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
}

.product-view .moto-compat .moto-compat-change::after {
    font-size: 14px;
    line-height: 1;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Pillola "Compatibile"
   Etichetta scura di esito positivo.
   --------------------------------------------------------------------- */

.product-view
.moto-compat:not(.moto-compat-warning)
.moto-compat-current::after {
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Pillola "Non compatibile"
   Etichetta rossa di esito negativo.
   --------------------------------------------------------------------- */

.product-view
.moto-compat.moto-compat-warning
.moto-compat-current::after {
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Altri modelli compatibili
   Intestazione apribile con l'elenco degli altri modelli.
   --------------------------------------------------------------------- */

.product-view .moto-compat .moto-compat-toggle {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Elenco dei modelli
   Le voci dentro l'elenco aperto.
   --------------------------------------------------------------------- */

.product-view .moto-compat .moto-compat-list li {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Box "La tua moto" · Versione compatta
   Mobile e colonna stretta: corpi ridotti, pillole a 11px.
   --------------------------------------------------------------------- */

@container asp-pdp-compat (max-width: 500px) {

    .product-view .moto-compat .moto-compat-message {
        line-height: 1.2 !important;
    }

    .product-view .moto-compat .moto-compat-message::before {
        font-size: 11px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .product-view .moto-compat .moto-compat-message strong {
        font-size: 16px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .product-view
    .moto-compat:not(.moto-compat-warning)
    .moto-compat-content::after {
        font-family: inherit !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    .product-view
    .moto-compat.moto-compat-warning
    .moto-compat-content::after {
        font-family: inherit !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    .product-view .moto-compat .moto-compat-change {
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    .product-view .moto-compat .moto-compat-toggle {
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
    }

}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Galleria
   Frecce avanti e indietro sulle foto.
   --------------------------------------------------------------------- */

.product-view #box_immagini .gallery-button-prev,
.product-view #box_immagini .gallery-button-next {
    font-size: 16px;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Titolo e metadati
   Nome del prodotto, marca, codice.
   --------------------------------------------------------------------- */

.product-view .bgw .originalp {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.02em;
}

.product-view .bgw h1.ptitle {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media only screen and (max-width: 767px) {

    .product-view .bgw h1.ptitle {
        font-size: 22px;
        line-height: 1.2;
    }

}

.product-view .bgw ul.det {
    font-size: 13px;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Prezzo
   Prezzo attuale, prezzo pieno barrato, percentuale di sconto.
   --------------------------------------------------------------------- */

.product-view .bgw .price {
    font-size: inherit;
    font-variant-numeric: tabular-nums;
}

.product-view .bgw .price .prezzo {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.product-view .bgw .price .prezzo-pieno {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
}

html[lang="it"] .product-view:not(:has(#p_variante1, #p_variante2, #comb_var1, #comb_var2, #p_lotto, .persvalue, .csel_var1, .csel_var2)) .bgw .price .prezzo-pieno {
    font-weight: 400;
    letter-spacing: 0;
}

.product-view .bgw .price .percsconto {
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {

    .product-view .bgw .price .prezzo {
        font-size: clamp(24px, 7vw, 26px);
    }

}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Disponibilità
   Riga "Disponibile / Esaurito" e tempi di spedizione.
   --------------------------------------------------------------------- */

.product-view .bgw #comb_disp span {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
}

.product-view .bgw #comb_disp span::before {
    font-size: 0;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Quantità e cuore preferiti
   Numero nello stepper e icone dei pulsanti.
   --------------------------------------------------------------------- */

.product-view .bgw .quantita {
    text-transform: none;
}

.product-view .bgw .quantita .input-group button > i {
    font-size: 16px;
}

.product-view .bgw .quantita .form-control.quant {
    font-size: 17px;
    font-weight: 600;
}

.product-view .bgw .btns .add_topref {
    font-size: 0; /* nasconde solo visivamente "Aggiungi ai preferiti" */
    line-height: 1;
    text-transform: none;
}

.product-view .bgw .btns .add_topref > i {
    font-size: 20px;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Pulsante "Aggiungi al carrello"
   Il pulsante principale della scheda.
   --------------------------------------------------------------------- */

.product-view .bgw #add_carrello {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.product-view .bgw #popupformpnd {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: none;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Descrizione e rassicurazioni
   Titoli e testi delle sezioni apribili, righe di garanzia.
   --------------------------------------------------------------------- */

.product-view .row-eq-height-md .wrapper-tabs .ui-accordion-header {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: none;
}

.product-view .row-eq-height-md .wrapper-tabs .txt {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}

.product-view .row-eq-height-md .wrapper-tabs .txt h1,
.product-view .row-eq-height-md .wrapper-tabs .txt h2 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.product-view .row-eq-height-md .wrapper-tabs .txt h3 {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}

.product-view .row-eq-height-md .wrapper-tabs .txt h4,
.product-view .row-eq-height-md .wrapper-tabs .txt h5 {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

.product-view .row-eq-height-md .wrapper-tabs .txt strong,
.product-view .row-eq-height-md .wrapper-tabs .txt b {
    font-weight: 600;
}

.product-view .row-eq-height-md .wrapper-tabs .txt li {
    line-height: 1.55;
}

.product-view .bgw .bannersdx li {
    font-size: 14px;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Contenuto del pacchetto
   Elenco dei prodotti inclusi in un bundle.
   --------------------------------------------------------------------- */

.product-view .bgw > .wrapper > .bundle-box ~ .title.ptitle,
.product-view .bgw > .wrapper > .title.ptitle:has(+ .bundle-box) {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-box-prod {
    font-size: 0;
    line-height: 0;
}

/* ---------------------------------------------------------------------
   SCHEDA PRODOTTO · Invito a selezionare la moto
   Testo mostrato quando il cliente non ha ancora scelto la moto.
   --------------------------------------------------------------------- */

.product-view .moto-compat:not(:has(.moto-compat-current))::before {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

.product-view .moto-compat:not(:has(.moto-compat-current))::after {
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}

.product-view .moto-compat > .moto-compat-select {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

/* ---------------------------------------------------------------------
   ELENCHI PRODOTTI · Card prodotto
   Marca, titolo, prezzo, sconto e prezzo barrato. Vale per elenchi,
   home, ricerca e card dei pacchetti.
   --------------------------------------------------------------------- */

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref {
    line-height: 1;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref > i {
    line-height: 32px;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .brand {
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title {
    line-height: 18px;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title a {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo {
    font-size: 16px; /* browser senza container query */
    font-size: clamp(13px, calc(17.5cqi - 9px), 17px);
    line-height: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo_pieno {
    font-size: 12px;
    line-height: 16px;
}

@media only screen and (min-width: 768px) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .brand {
        font-size: 12px;
        line-height: 16px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title {
        line-height: 20px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title a {
        font-size: 15px;
        line-height: 20px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo {
        font-size: 20px;
        font-size: clamp(13px, calc(17.5cqi - 9px), 20px);
        line-height: 26px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
        font-size: 12px;
        line-height: 18px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo_pieno {
        font-size: 13px;
        line-height: 20px;
    }

}

/* ---------------------------------------------------------------------
   ELENCHI PRODOTTI · Fascia rosa della categoria
   Titolo, descrizione e pulsanti delle sottocategorie.
   --------------------------------------------------------------------- */

main > .elenco .bgr h1 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

main > .elenco .bgr .navcats ul > li > a {
    font-size: 14px;
    line-height: 20px; /* 20 + 10 + 10 = 40px */
    font-weight: 500; /* stesso peso su mobile e desktop */
}

@media only screen and (max-width: 767px) {

    main > .elenco .bgr h1 {
        font-size: 28px;
        line-height: 32px;
    }

    main > .elenco .bgr .txt {
        font-size: 14px;
        line-height: 20px;
    }

}

@media only screen and (min-width: 768px) {

    main > .elenco .bgr h1 {
        font-size: 32px;
        line-height: 1.15;
    }

    main > .elenco .bgr .txt {
        font-size: 15px;
        line-height: 1.5;
    }

    main > .elenco .bgr .navcats ul > li > a {
        font-weight: 500;
    }

}

/* ---------------------------------------------------------------------
   ELENCHI PRODOTTI · Barra filtri
   "Filtra prodotti", "Ordina per", menu a tendina e conteggio.
   --------------------------------------------------------------------- */

main > .elenco .filters-toolbar .filter-detail-toggler {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: none;
}

main > .elenco .filters-toolbar .filters-product-count > span {
    font-weight: 600;
}

@media only screen and (max-width: 767px) {

    main > .elenco .filters-toolbar .filters-sort-label {
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;
        text-transform: none;
    }

    main > .elenco .filters-toolbar .filters-product-count {
        font-size: 13px;
        line-height: 20px;
    }

}

@media only screen and (min-width: 768px) {

    main > .elenco .filters-toolbar .filters-sort-label {
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;
        text-transform: none;
    }

    main > .elenco .filters-toolbar .filters-product-count {
        font-size: 14px;
        line-height: 20px;
    }

    main > .elenco .filters .filter-field .SumoSelect > .CaptionCont > span,
    main > .elenco .filters .filters-sort-select .SumoSelect > .CaptionCont > span {
        font-size: 14px;
    }

}

/* ---------------------------------------------------------------------
   ELENCHI PRODOTTI · Fine elenco
   "Visualizzati X di Y" e pulsante per caricare altri prodotti.
   --------------------------------------------------------------------- */

main > .elenco .justpag > div:not([class]) {
    font-size: 13px;
    line-height: 20px;
}

main > .elenco .justpag .btn-morep {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.03em;
}

@media only screen and (min-width: 768px) {

    main > .elenco .justpag > div:not([class]) {
        font-size: 14px;
    }

}

/* ---------------------------------------------------------------------
   ELENCHI PRODOTTI · Fascia dei marchi
   Pulsante "Tutti i brand" sotto gli elenchi.
   --------------------------------------------------------------------- */

main > .homebrands .seeall {
    font-size: 14px;
    line-height: 42px;
    font-weight: 600;
    text-transform: none;
}

/* ---------------------------------------------------------------------
   ELENCHI PRODOTTI · Smartphone stretti
   Fino a 359px: corpi ridotti per card da circa 140px.
   --------------------------------------------------------------------- */

@media only screen and (max-width: 359px) {

    main > .elenco .filters-toolbar .filter-detail-toggler,
    main > .elenco .filters-toolbar .filters-sort-label {
        font-size: 13px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title {
        line-height: 17px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title a {
        font-size: 13px;
        line-height: 17px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
        font-size: 10px;
    }

}

/* ---------------------------------------------------------------------
   RIFINITURE
   Badge delle card su mobile, filtri attivi, pagina "Cerca accessori".
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg > div {
        font-size: 9.5px;
        line-height: 20px;
        letter-spacing: -0.01em;
    }

}

main > .elenco .filtri_attivi li > a {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}

main > .elenco .filtri_attivi li > a > sup {
    font-size: 15px;
    line-height: 18px;
}

main > .elenco .filtri_attivi li.elimina > a {
    font-weight: 400;
}

main > .elenco .bgr .navcats .checklist > li label {
    font-size: 14px;
    line-height: 20px;
}

main > .elenco .counter:not(.counter-legacy) {
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
}

main > .elenco .filters .navbarform:not(.filters-form) .SumoSelect > .CaptionCont > span {
    font-size: 14px;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header .navbar-brand {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: none;
}

@media only screen and (max-width: 767px) {

    main > .elenco .counter:not(.counter-legacy) {
        font-size: 13px;
    }

}

/* =====================================================================
   FINE DEL BLOCCO TIPOGRAFIA
   =====================================================================


   =====================================================================
   LAYOUT, COLORI E COMPONENTI
   Tutto cio' che non e' tipografia. Corpi, pesi, interlinee, spaziatura
   delle lettere e maiuscole di questi stessi elementi sono nel blocco
   TIPOGRAFIA in testa al file.
   ===================================================================== */

.vin-candidates{display:grid;gap:8px;margin:12px 0}.vin-candidate{margin:0;text-align:left;white-space:normal}.vin-candidate:focus,.vin-candidate:hover{border-color:#e11937;background:#fff5f6;color:#222}

/*
  V13 - Revisioni rispetto alla V12:
  1) categorie IDENTICHE V12 (Apple-inspired left alignment, non riempire artificialmente)
  2) solo banner editoriale desktop >= 820px (dimensione LOCALE del componente):
     UpMap 392 -> 430px, due secondarie 189 -> 208px, gap invariato 14px.
  3) box moto desktop: icona 50px, titolo modello selezionato 20px,
     testo selezione 17px e migliore peso dell'etichetta.
  4) su mobile banner/hero/selector/categorie conservati esattamente.
  5) nessuna modifica HTML/JS, header, carousel prodotti, layout globale.
  Note: immagine moto dinamica NON ottenibile con solo CSS; richiede img da Daisuke.
  Nota Slick: forzatura mobile categorie temporanea già presente in V12.
*/

/* =====================================================================
   A SPECIAL PARTS - HOMEPAGE EDITORIAL PREMIUM V15 - CORRETTA
   CSS ONLY / SOSTITUISCE INTEGRALMENTE V14 E VERSIONI PRECEDENTI
   CARICARE SOLO QUESTO FILE DOPO GLI STILI NATIVI DAI SUKE

   Desktop e moduli della V7 conservati.
   Novita': scala delle foto delle categorie (non SVG) +
   spostamento progressivo della vera CTA moto sotto l'intro mobile.
   V8: CTA moto 46px e testo sentence case; link secondari 4px più in basso.

   Browser senza CSS Anchor Positioning: fallback sicuro con pulsante
   compatto sopra la hero. Per comportamento identico ovunque, i
   programmatori dovranno spostare .searchparts dopo .homeabstract.
   Nessun JS aggiunto. Nessun nuovo contenuto. Nessun display su main.
   ===================================================================== */

/* =====================================================================
   A SPECIAL PARTS | HOME EDITORIAL PREMIUM V6 | CSS ONLY
   SOSTITUISCE INTEGRALMENTE V5 (NON CARICARLI ASSIEME).
   Caricare dopo il CSS del tema Daisuke.

   4 moduli strettamente locali: homeabstract, homecategories,
   gbanner:not(.prod) e homeprods. Il resto resta invariato.

   ECCEZIONE TEMPORANEA: solo nelle categorie sotto 575px,
   lo scroll CSS sostituisce visivamente quello Slick per il test.
   Daisuke deve in seguito correggere le impostazioni Slick JS.
   ===================================================================== */

/* A SPECIAL PARTS | Homepage | Modulo isolato; SOLO CSS. Non unire al CSS completo ASP_05. */

/* =============== 01. HERO TESTUALE DELLA HOME ========================= */
main > .homeabstract {
  container: asp-home-hero / inline-size;
  background: #fff;
  padding: 25px 0 21px;
  text-align: left;
}

/* Modifica solo il wrapper INTERNO a questo hero, non le colonne generali */
main > .homeabstract > .container > .row > .col-sm-10 {
  width: 100%;
  margin-left: 0;
}

main > .homeabstract h1.ptitle {
  margin: 0 0 5px;
  max-width: 850px;
  text-align: left;
  text-wrap: balance;
}

main > .homeabstract .txt {
  margin: 0;
  text-align: left;
}
main > .homeabstract .txt > span { color: #e22623; }

@container asp-home-hero (min-width: 1000px) {
  main > .homeabstract h1.ptitle {
    max-width: 900px;
  }
}
@container asp-home-hero (max-width: 650px) {
  main > .homeabstract h1.ptitle {
    max-width: none;
    text-align: left;
    margin-bottom: 8px;
  }
  main > .homeabstract .txt {
    text-align: left;
  }
}

/* Usa il breakpoint mobile GIA' PREVISTO dal tema per il SOLO padding hero.
   Non ridefinisce colonne, griglia o comportamenti responsive del sito. */
@media only screen and (max-width: 767px) {
  main > .homeabstract { padding: 12px 0 12px; }
}


/* =====================================================================
   ASP_06 | HOMEPAGE CATEGORIE | EDITORIAL PREMIUM V6
   Selettori SOLO dentro main > .homecategories.

   DESKTOP: Slick nativo, numero di voci invariato.
   MOBILE: eccezione CSS temporanea AUTORIZZATA (~3–3.5 tile).
   TODO Daisuke: aggiornare la configurazione Slick e rimuovere il
   blocco @container asp-home-categories (max-width: 575px), inclusa
   la variante (max-width: 350px), dopo validazione UI.
   ===================================================================== */

main > .homecategories {
  container: asp-home-categories / inline-size;
  margin: 0;
  padding: 12px 0;
  background: #f1f2f3;
}

/* Rimuoviamo il margine residuo nativo di slick-slider: era il principale
   responsabile della grossa striscia grigia in basso, senza barra visibile. */
main > .homecategories .carousel.slick-slider,
main > .homecategories .carousel-wrappersl,
main > .homecategories .spacerhor {
  margin-bottom: 0 !important;
}

/* Le categorie iniziano dove iniziano hero e banner, non centrate.
   L'offset della colonna si modifica SOLO in homecategories. */
main > .homecategories > .container > .row >
.col-lg-offset-1.col-xl-offset-2 {
  margin-left: 0 !important;
}

/* Navigazione Slick: su desktop resta nativa. */
main > .homecategories .carousel-wrappersl .slick-dots {
  bottom: -13px;
  margin: 0;
  padding: 0 4px;
}
main > .homecategories .carousel-wrappersl .slick-dots li button {
  height: 2px;
  border-radius: 999px;
}

main > .homecategories .carousel .item {
  padding: 0 4px;
  text-align: center;
}

/* UN SOLO FORMATO per ogni ampiezza: orizzontale 1.34 : 1.
   È la larghezza concessa da Slick/rail a determinare l'altezza.
   Non esistono più un'altezza desktop e un'altra altezza mobile. */
main > .homecategories .carousel .item > a {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.34 / 1;
  gap: 2px;
  padding: 5px 5px 6px;
  border: 1px solid #e4e5e7;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
  color: #252525;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
main > .homecategories .carousel .item > a:hover,
main > .homecategories .carousel .item > a:focus-visible {
  border-color: #c3c6cb;
  box-shadow: 0 3px 10px rgba(0,0,0,.055);
}

/* Photo-stage sempre proporzionato alla tile. Non ingrandisce
   artificialmente file fotografici con ampi bordi interni. */
main > .homecategories .carousel picture {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
main > .homecategories .carousel picture:hover { background: transparent; }
main > .homecategories .carousel picture img,
main > .homecategories .carousel .item a[title="Accessori"] picture img,
main > .homecategories .carousel .item a[title="Cura della moto"] picture img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Titoli su 1-2 righe, centrati dentro la tile: non sono pulsanti CTA. */
main > .homecategories .carousel .h3 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  color: #282828;
  text-wrap: balance;
}

/* ================================================================
   UNICA FORZATURA TEMPORANEA MOBILE — AUTORIZZATA DAL CLIENTE.
   Visualizzazione CSS ~3.35 voci, con inizio della quarta visibile.
   Il dragging Slick e il suo stato aria potrebbero non corrispondere
   allo scroll nativo; Daisuke dovrà farlo nativamente in JS.
   ================================================================ */
@container asp-home-categories (max-width: 575px) {
  main > .homecategories .carousel.slick-initialized > .slick-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  main > .homecategories .carousel.slick-initialized > .slick-list::-webkit-scrollbar {
    display: none;
  }
  main > .homecategories .carousel.slick-initialized > .slick-list > .slick-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    transform: none !important;
  }
  main > .homecategories .carousel.slick-initialized > .slick-list > .slick-track > .slick-slide {
    box-sizing: border-box;
    flex: 0 0 calc((100cqw - 30px) / 3.35) !important;
    width: calc((100cqw - 30px) / 3.35) !important;
    min-width: 0 !important;
    float: none !important;
    scroll-snap-align: start;
  }
  main > .homecategories .carousel .item { padding: 0 3px; }
  main > .homecategories .carousel .item > a {
    padding: 4px 3px 5px;
    border-radius: 8px;
  }
  /* La progress bar JS non segue lo scroll CSS: va nascosta nel test. */
  main > .homecategories .carousel-wrappersl .slick-dots { display: none !important; }
}
@container asp-home-categories (max-width: 350px) {
  main > .homecategories .carousel.slick-initialized > .slick-list > .slick-track > .slick-slide {
    flex-basis: calc((100cqw - 30px) / 3.12) !important;
    width: calc((100cqw - 30px) / 3.12) !important;
  }
}
/* Tipografia V1 — nomi categoria fuori dal mobile.
   576-1199px (3, 5 o 7 tile per riga, soglie dello script Slick): la tile è
   larga almeno 117px, 12px stanno su una riga.
   Da 1200px (9 tile per riga) la riga utile è 87.4px: il corpo resta 10.5px e
   si stringe solo la spaziatura, perché "Impianto frenante" (87.5px) andava a
   capo da solo e la sua foto risultava più piccola delle altre. */

/* Evita animazioni e hover finti su touch, rispetta le preferenze OS. */
@media (prefers-reduced-motion: reduce) {
  main > .homecategories .carousel .item > a { transition: none !important; }
}


/* A SPECIAL PARTS | Homepage | Modulo isolato; SOLO CSS. Non unire al CSS completo ASP_05. */

/* =============== 03. TRE CARD EDITORIALI, STESSI 3 LINK =============== */
main > .gbanner:not(.prod) {
  container: asp-home-editorial / inline-size;
  margin: 0;
  padding: 11px 0 12px;
  background: #f1f2f3 !important;
}

/* Cambiamo la composizione SOLO delle tre card, non la griglia pagina */
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  align-items: stretch;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4 {
  float: none !important;
  width: auto !important;
  min-width: 0;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child {
  grid-column: 1 / -1;
}

main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4 .wrapper {
  position: relative;
  display: block;
  min-height: 0;
  height: 160px;
  margin: 0;
  border: 0;
  border-radius: 13px;
  overflow: hidden;
  isolation: isolate;
  background: #191919;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .wrapper {
  height: 270px;
}

main > .gbanner:not(.prod) .wrapper > .figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main > .gbanner:not(.prod) .wrapper > .figure picture,
main > .gbanner:not(.prod) .wrapper > .figure img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center 54%;
}
main > .gbanner:not(.prod) .wrapper > .figure img {
  transition: transform .3s ease, filter .25s ease;
}

main > .gbanner:not(.prod) .wrapper > .contents.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-align: left;
  display: flex;
  background: linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.08) 43%, rgba(0,0,0,.44) 100%);
}
main > .gbanner:not(.prod) .wrapper > .contents.overlay > .padding {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 19px;
}
main > .gbanner:not(.prod) .contents .title.ptitle {
  height: auto !important; /* matchHeight inserisce height inline */
  margin: 0 0 7px;
  color: #ff4646;
}
main > .gbanner:not(.prod) .contents p {
  max-width: 92%;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
/* La card primaria conserva una CTA piena, le due secondarie no. */
main > .gbanner:not(.prod) .contents .btn {
  position: absolute;
  left: 18px;
  bottom: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  min-height: 44px;
  max-width: calc(100% - 36px);
  margin: 0;
  padding: 11px 15px;
  border: 1px solid #fff;
  border-radius: 9px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
main > .gbanner:not(.prod) .contents .btn::after {
  content: "→";
  display: inline-block;
  flex: none;
  transition: transform .18s ease;
}
/* Ricambi / Performance: link testuali, bianchi e con ampia area touch. */
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents .btn {
  min-height: 44px;
  max-width: calc(100% - 36px);
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  text-align: left;
}
main > .gbanner:not(.prod) .contents .btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn:focus-visible {
  outline: 2px solid #e22623 !important;
}
/* Desktop: card fotografica reagisce appena al puntatore, senza fade in. */
@media (hover: hover) and (pointer: fine) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn:hover {
    background: #e8e8e8;
    color: #161616;
    border-color: #e8e8e8;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents .btn:hover {
    color: #fff;
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  main > .gbanner:not(.prod) .wrapper:hover > .figure img {
    transform: scale(1.025);
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .wrapper:hover > .figure img {
    filter: brightness(.94);
  }
  main > .gbanner:not(.prod) .contents .btn:hover::after {
    transform: translateX(3px);
  }
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p {
  max-width: 85%;
}

/* CARD PRIMARIA (UpMap): versione chiara.
   Fondo bianco, nessuna sfumatura scura sopra la foto, titolo nero,
   pulsante nero. L'etichetta "UpMap" resta rossa (il rosso del sito,
   più leggibile sul bianco del rosso chiaro usato sulle card scure).
   Le due card secondarie non cambiano. */
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .wrapper {
  background: #fff;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .wrapper > .contents.overlay {
  background: none;
}
/* l'alone scuro che il tema mette sotto i testi serviva sulla foto
   scura: sul bianco sporca le scritte */
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents,
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .title.ptitle,
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p,
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn {
  text-shadow: none;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .title.ptitle {
  color: #ed1c24;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents p {
  color: #1f1f1f;
}
main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn {
  border-color: #1f1f1f;
  background: #1f1f1f;
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn:hover {
    border-color: #000;
    background: #000;
    color: #fff;
  }
}

/* Quando il componente in sé ha spazio, card primaria a sinistra e 2 impilate a destra */
@container asp-home-editorial (min-width: 820px) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4 .wrapper {
    height: 208px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .wrapper {
    height: 430px;
  }
}

/* In card molto strette nessun testo/CTA deve sovrapporsi */
@container asp-home-editorial (max-width: 520px) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile {
    gap: 9px;
    row-gap: 14px;
    column-gap: 9px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .wrapper {
    height: 224px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .wrapper {
    height: 164px;
  }
  main > .gbanner:not(.prod) .wrapper > .contents.overlay > .padding { padding: 12px; }
  main > .gbanner:not(.prod) .contents .title.ptitle {
    margin-bottom: 5px;
  }
  main > .gbanner:not(.prod) .contents p {
    max-width: 100%;
  }
  main > .gbanner:not(.prod) .contents .btn {
    left: 11px;
    bottom: 9px;
    min-height: 44px;
    max-width: calc(100% - 22px);
    padding: 10px 10px;
    border-radius: 7px;
    gap: 6px;
  }
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .contents .btn {
    left: 11px;
    bottom: 3px;
    min-height: 44px;
    max-width: calc(100% - 22px);
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
    /* Tipografia V1: era 10px. Segue la larghezza della card: 10px a 360px,
       12px da ~410px, così "SCOPRI PERFORMANCE →" resta su una riga. */
    gap: 5px;
    text-align: left;
  }
  main > .gbanner:not(.prod) .contents .btn::after {
    display: inline-block;
  }
}
/* Eccezione LOCALE: in una card davvero stretta evitiamo collisioni
   mantenendo leggibili le CTA, senza modificare viewport o layout sito. */
@container asp-home-editorial (max-width: 360px) {
  main > .gbanner:not(.prod) .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child) .wrapper { height: 184px; }
}

@media (prefers-reduced-motion: reduce) {
  main > .gbanner:not(.prod) .figure img,
  main > .gbanner:not(.prod) .contents .btn,
  main > .gbanner:not(.prod) .contents .btn::after {
    transition: none !important;
    animation: none !important;
  }
}


/* =====================================================================
   V6 - UPMAP: CTA piena ma meno ingombrante (solo prima card).
   Il resto delle tre card resta V5.
   ===================================================================== */
main > .gbanner:not(.prod)
.row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn {
  min-height: 39px;
  padding: 8px 12px;
  border-radius: 7px;
  gap: 5px;
  box-shadow: none;
}
/* Solo quando il blocco banner è stretto (non la viewport del sito):
   meno larghezza bianca, senza ridurre l'area touch. */
@container asp-home-editorial (max-width: 520px) {
  main > .gbanner:not(.prod)
  .row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn {
    min-height: 38px;
    padding: 8px 7px;
    gap: 4px;
  }
}
/* Box visivo più basso, area interattiva maggiorata in modo invisibile. */
main > .gbanner:not(.prod)
.row.row-eq-height-sm.nomobile > .col-sm-4:first-child .contents .btn::before {
  content: "";
  position: absolute;
  inset: -3px;
}


/* A SPECIAL PARTS | Homepage | Modulo isolato; SOLO CSS. Non unire al CSS completo ASP_05. */

/* =============== 04. TITOLI E SPAZI DEI PRODOTTI ESISTENTI ========== */
main > .homeprods {
  margin: 0;
  padding: 25px 0 34px;
  background: #ffffff !important;
}
main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle {
  margin: 0 0 20px;
}
main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle > span {
  display: block;
  margin-top: 5px;
  color: #656565;
}
main > .homeprods .carousel .prod-cont {
  background: #fff;
  border-radius: 11px;
  overflow: hidden;
}

/* Solo la spaziatura INTERNA di queste sezioni su mobile nativo. */
@media only screen and (max-width: 767px) {
  main > .homeprods { padding: 19px 0 28px; }
}


/* =======================================================================
   ASP_05 + ASP_06 | HOME V7 - PRECISIONE IMMAGINI + CTA MOTO MOBILE
   Questo blocco integra la V6 e si applica SOLO alla homepage.

   Immagini categorie: occupazione fotografica maggiore, stessa geometria tile.
   Cambio moto: su mobile diventa un pulsante, non un banner.
   Spostamento sotto hero: CSS Anchor Positioning (supporto progressivo).
   Fallback: pulsante compatto nella posizione originale, MAI invisibile.
   Nessuna modifica a main, header, griglie globali, JS, Slick o desktop.
   ======================================================================= */

/* Riempimento più convincente per fotografie (non SVG); ritaglio controllato
   dentro lo stage già esistente. Le fotografie originali con margini bianchi
   molto ampi andranno comunque normalizzate alla sorgente. */
main > .homecategories .carousel picture img:not([src$=".svg"]) {
  transform: scale(1.42);
  transform-origin: center;
}

/* Solo lo stato mobile già previsto dal sito. La barra modello si trasforma
   da fascia full width a CTA; altre pagine non vengono toccate. */
@media only screen and (max-width: 767px) {
  main:has(> .searchparts + .homeabstract) > .searchparts {
    background: #ffffff !important;  /* fallback se anchor non supportato */
    border: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts > .container {
    background: transparent !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .wrapper {
    background: transparent !important;
    border: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .row.row-eq-height-sm {
    min-height: 0 !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .row.row-eq-height-sm > .searchparts {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .text-right {
    text-align: left !important;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    width: auto !important;
    height: 46px !important;
    min-height: 46px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #e22623;
    border-radius: 9px;
    background: #e22623;
    color: #ffffff;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(180, 22, 22, .13);
    transition: background-color .15s ease, border-color .15s ease;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary::after {
    content: "→";
    display: inline-block;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary:hover {
    border-color: #c71e1b;
    background: #c71e1b;
  }
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary:focus-visible {
    outline: 2px solid #202020;
    outline-offset: 3px;
  }

  /* Spostamento locale: anziché cambiare il display/order di main, ancoriamo
     la barra precedente alla hero successiva. La hero riserva lo spazio CTA. */
  @supports (anchor-name: --asp-home-intro-v7) and (top: anchor(bottom)) {
    main:has(> .searchparts + .homeabstract) > .homeabstract {
      anchor-name: --asp-home-intro-v7;
      padding-bottom: 81px !important;
    }
    main:has(> .searchparts + .homeabstract) > .searchparts {
      position: absolute !important;
      position-anchor: --asp-home-intro-v7;
      top: anchor(bottom) !important;
      left: 0;
      width: 100%;
      z-index: 2;
      transform: translateY(-100%);
      background: transparent !important;
      padding: 0 0 19px !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  main:has(> .searchparts + .homeabstract) > .searchparts .btn.btn-primary {
    transition: none !important;
  }
}


/* =====================================================================
   A SPECIAL PARTS — HOMEPAGE EDITORIAL PREMIUM V9
   MICRO-RIFINITURE DEL RITMO VISIVO MOBILE

   Solo tre aree della HOME: .homeabstract, .searchparts in presenza
   della hero, .gbanner:not(.prod). Nessuna regola per header,
   categorie/Slick, griglia sito, carrello o altri template.

   L'ancoraggio CSS della V8 resta invariato; qui aumentiamo
   soltanto la riserva della hero per distanziare la CTA moto.
   ===================================================================== */

/* 1. Sottotitolo rosso → bottone Cambia modello: più aria senza
      ingrandire il bottone. Si applica solo dove l'anchor V8 funziona. */

/* 2–4. Le tre card: stesso numero, stesse altezze,
       stessi font e CTA. Solo ritmo interno e separazione. */
@container asp-home-editorial (max-width: 520px) {
  /* +5px SOLTANTO fra UpMap e le due card inferiori.
     Gap orizzontale fra Ricambi e Performance invariato. */

  /* UpMap: il testo si allontana dal bordo alto; la CTA rimane
     nella posizione e con le dimensioni approvate nella V8. */
  main > .gbanner:not(.prod)
  .row.row-eq-height-sm.nomobile > .col-sm-4:first-child
  .wrapper > .contents.overlay > .padding {
    padding-top: 16px;
  }

  /* Card Ricambi/Performance: etichetta e titolo non sono incollati.
     Nessuna altezza card aggiuntiva o variazione della CTA. */
  main > .gbanner:not(.prod)
  .row.row-eq-height-sm.nomobile > .col-sm-4:not(:first-child)
  .contents .title.ptitle {
    margin-bottom: 9px; /* V8: 5px; +4px */
  }
}


/* ========================================================================
   ASP HOME V11 - CONTROLLO MOTO / SPAZI MOBILE
   Usare SOLO sulla homepage, dopo V9 (non insieme alle patch V10).
   NON cambia main display, non tocca Slick/categorie/header o griglia globale.
   ======================================================================== */

/* MOBILE: ripristina il ritmo V9 e aggiunge SOLO 6px TRA
   il pulsante e la fascia categorie, senza toccare .homecategories.
   L'incremento coordinato delle due riserve mantiene immutata
   la distanza tra sottotitolo rosso e pulsante. */

/* DESKTOP: il blocco moto si integra nella hero, dopo il sottotitolo.
   Niente display:flex su main e niente barra/fascia colorata full-width.
   Due anchor: uno verticale (hero), uno per l'asse orizzontale (container).
   Fallback browser senza anchor: non si nasconde il controllo originale. */
@media only screen and (min-width: 768px) {
  @supports (anchor-name: --asp-desk-hero) and (top: anchor(bottom)) {
    main:has(> .searchparts.bg + .homeabstract) > .homeabstract {
      anchor-name: --asp-desk-hero;
      padding-bottom: 138px !important;
    }
    main:has(> .searchparts.bg + .homeabstract) > .homeabstract .txt {
      anchor-name: --asp-desk-inner;
    }
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg {
      position: absolute !important;
      position-anchor: --asp-desk-hero;
      top: anchor(--asp-desk-hero bottom) !important;
      left: anchor(--asp-desk-inner left) !important;
      width: anchor-size(--asp-desk-inner width) !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: translateY(calc(-100% - 27px));
      background: transparent !important;
      z-index: 2;
    }
  }

  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg > .container.container-f {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Compensa i margini negativi della row Bootstrap esclusivamente qui. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg > .container > .row > .col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .wrapper {
    background: #FCE9EA !important;
    border: 1px solid #F0DCDD !important;
    border-radius: 14px !important;
    min-height: 0 !important;
    padding: 14px 17px !important;
    box-shadow: 0 2px 8px rgba(30,18,20,.03) !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .row.row-eq-height-sm {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF5F5 !important;
    flex: 0 0 72px;
    width: 72px;
    height: 58px;
    margin-right: 18px;
    border-radius: 12px;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left i {
    color: #df2421 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-body {min-width:0;}
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline {
    margin:0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline::before {
    content:"La tua moto";
    display:block;
    margin:0 0 5px;
    color:#876366;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong)::before {
    content:"Trova i ricambi compatibili";
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline > span {
    display:block;
    color:#242424 !important;
    text-wrap:pretty;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .text-right {
    text-align:right;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto !important;
    min-height:43px !important;
    height:43px !important;
    margin:0;
    padding:0 16px !important;
    border:1px solid #df2421 !important;
    border-radius:9px !important;
    background:#df2421 !important;
    box-shadow:none !important;
    color:#fff !important;
    white-space:nowrap;
    transition:background-color .18s ease, border-color .18s ease;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary::after {
    content:"→";
    display:inline-block;
  }
  /* Modello già impostato: il link cambia moto è un'azione secondaria */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:has(.ptitle.ptitleline:not(:has(strong))) .searchparts .btn.btn-primary {
    color:#242424 !important;
    border-color:#ccd0d4 !important;
    background:#fff !important;
  }
  @media (hover:hover) and (pointer:fine) {
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary:hover {
      background:#c81f1c !important;
      border-color:#c81f1c !important;
    }
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:has(.ptitle.ptitleline:not(:has(strong))) .searchparts .btn.btn-primary:hover {
      background:#f8f8f8 !important;
      border-color:#a9afb5 !important;
    }
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary:focus-visible {
    outline:2px solid #222;
    outline-offset:3px;
  }
}

@media (prefers-reduced-motion:reduce) {
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts .btn.btn-primary {
    transition:none !important;
  }
}


/* ======================================================================
   V12 - ULTIME RIFINITURE HOMEPAGE, SOLO DESKTOP
   1. Margini ottici tra hero, selettore, categorie e banner
   2. Gerarchia tipografica tra label / testo e CTA
   3. Piccolo affinamento allineamenti icona/testo/pulsante
   4. FOTO MOTO DINAMICA (CSS predisposto, immagine fornita da Daisuke)
   Nessuna modifica a header, contenuti, colonne o Slick.
   ====================================================================== */
@media only screen and (min-width: 768px) {
  /* La fascia grigia conserva padding e dimensioni; il bianco dopo di essa
     viene dalla sezione banner, senza alterare .homecategories. */
  main > .homecategories + .gbanner:not(.prod) {
    padding-top: 20px;
  }

  /* Segmento già presente in <strong>: gerarchia testo senza nuovi nodi.
     Le parole introduttive e finali rimangono meno marcate. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .ptitle.ptitleline:has(strong) > span strong {
    color: #222 !important;
  }

  /* Testo e azione allineati verticalmente nel contenitore gia' esistente */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts {
    align-self: center;
  }

  /* FOTO MODELLO: diventera' visibile automaticamente NON APPENA
     Daisuke avra' aggiunto alla .media-left lo stesso IMG dinamico
     gia' utilizzato nell'header. Il CSS da solo non copia SRC tra nodi.
     Nessun URL fisso o immagine arbitraria. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .media-left:has(img) {
    background: #fff !important;
    overflow: hidden;
    padding: 3px;
    border: 1px solid rgba(0,0,0,.05);
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .media-left img,
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .media-left picture img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .media-left:has(img) > i {
    display: none !important;
  }
}

/* V14: alternanza approvata categorie / card editoriali / prodotti */

/* Dimensioni del pittogramma del selettore desktop come da prova approvata */

/* =====================================================================
   A SPECIAL PARTS | HOMEPAGE V15 - CORREZIONE SEMPLICE DEL MOBILE
   - Desktop V14 invariato
   - "Categorie" invariato
   - Mobile: una sola CTA originale a piena larghezza + freccia a destra
   - NON riattivare .hidden-xs; niente griglie aggiuntive o falsi bottoni
   ===================================================================== */

/* Intestazione visiva categorie, già approvata nella V14 */
main > .homecategories .spacerhor::before {
  content: "Categorie";
  display: block;
  margin: 0 4px 12px;
  color: #222;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  main > .homecategories .spacerhor::before {
    margin: 0 3px 11px;
    margin-bottom: 11px;
  }

  /* La descrizione desktop deve restare nascosta come nel tema nativo. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .hidden-xs {
    display: flex !important;
    position: absolute !important;
    align-items: center !important;
    float: none !important;
    top: 8px !important;
    bottom: 8px !important;
    left: 12px !important;
    right: 67px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Neutralizza soltanto i margini Bootstrap della riga interna:
     il pulsante parte esattamente dal margine della hero, non 10px fuori. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sfrutta ESCLUSIVAMENTE il bottone già presente, senza modificare la
     posizione o la struttura delle altre sezioni. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts > .row {
    margin: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts .text-right {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Testo vero: 'Seleziona la tua moto' oppure 'Cambia modello',
     in base allo stato prodotto dal sito. La freccia è decorativa. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .searchparts .btn.btn-primary {
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid #e22623 !important;
    border-radius: 10px !important;
    background: #e22623 !important;
    color: #fff !important;
    text-align: left !important;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(180,22,22,.11) !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .searchparts .btn.btn-primary::after {
    content: "→";
    display: inline-block !important;
    flex: none;
    margin: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .searchparts .btn.btn-primary:focus-visible {
    outline: 2px solid #171717 !important;
    outline-offset: 3px;
  }

  /* Altezza CTA +4px rispetto a V13: cresce solo la riserva della hero.
     Nessuna variazione dei padding delle categorie. */
  @supports (anchor-name: --asp-home-intro-v7) and (top: anchor(bottom)) {
    main:has(> .searchparts.bg + .homeabstract) > .homeabstract {
      padding-bottom: 119px !important;
    }
  }
}


/* ========================================================================
   A SPECIAL PARTS - V17 | CORREZIONE SELETTORE MOTO
   BASE OBBLIGATORIA: V15 pulita, NON V16.
   Desktop: stato selezionato = CTA SECONDARIA (non rossa piena).
   Mobile: box rosa 78px stabile, icona / nome modello / freccia,
   senza usare Grid, flex o order su main, sezioni, header o categorie.
   Il solo bottone originale apre la modale, cliccabile sull'intero box.
   ======================================================================== */

/* Desktop: il selettore del precedente file non individuava sempre il
   pulsante. Applichiamo lo stato all'intera sezione in modo esplicito. */
@media only screen and (min-width: 768px) {
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
  .searchparts button.btn.btn-primary {
    color: #292929 !important;
    background: #ffffff !important;
    border: 1px solid #dfb5b8 !important;
    box-shadow: none !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
  .searchparts button.btn.btn-primary::after {
    content: "\2194" !important;
    color: #b92525 !important;
  }
  @media (hover: hover) and (pointer: fine) {
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
    .searchparts button.btn.btn-primary:hover {
      background: #fff7f7 !important;
      border-color: #c78c90 !important;
      color: #222 !important;
    }
  }
}

@media only screen and (max-width: 767px) {
  /* Niente riordino di main: posizione originaria ancorata alla hero V15.
     Riserva calcolata per box 78px + margine inferiore. */
  @supports (anchor-name: --asp-home-intro-v7) and (top: anchor(bottom)) {
    main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg {
      padding: 0 0 18px !important;
    }
  }

  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .wrapper {
    box-sizing: border-box;
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 0 !important;
    border: 1px solid #f0d7d9 !important;
    border-radius: 14px !important;
    background: #fcebec !important;
    box-shadow: none !important;
    overflow: hidden;
  }
  /* Importantissimo: righe Bootstrap NON devono diventare una griglia.
     I due soli blocchi del selettore sono ancorati alla wrapper. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .row.row-eq-height-sm::before,
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .row.row-eq-height-sm::after {
    display: none !important;
  }
  /* Colonna nascosta su mobile, ma usata SOLTANTO per mostrarvi la vera moto.
     Posizionamento assoluto evita che float/width Bootstrap spingano il testo. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff6f6 !important;
    border-radius: 10px !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left > i {
    color: #e22623 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-body {
    display: block !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline::before {
    content: "Trova ricambi compatibili" !important;
    display: block !important;
    margin: 0 0 4px !important;
    color: #896064 !important;
  }
  /* Non selezionato: semplifichiamo solo la frase lunga, senza cambiare DOM. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span {
    display: block !important;
    color: transparent !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:has(strong) > span::after {
    content: "Seleziona la tua moto";
    display: block !important;
    color: #242424 !important;
  }
  /* Selezionato: nome reale nella sorgente HTML (troncamento max 2 righe). */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:not(:has(strong))::before {
    content: "La tua moto" !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .ptitle.ptitleline:not(:has(strong)) > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
    overflow-wrap: anywhere;
    color: #242424 !important;
  }

  /* Tutto il box e' il VERO button HTML trasparente, sopra al contenuto.
     Questa geometria e' piu' sicura della pseudo-overlay su un bottone 44px:
     il click arriva sempre all'elemento che apre la modale. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts,
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts > .row,
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg
  .row.row-eq-height-sm > .searchparts .text-right {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: transparent !important;
    cursor: pointer;
  }
  /* Pulsante/freccia VISIVI, disegnati dentro il button reale. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: #e22623;
    border: 1px solid #e22623;
    border-radius: 10px;
    pointer-events: none;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary::after {
    content: "\2192" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute;
    top: 16px;
    right: 12px;
    width: 44px;
    height: 44px;
    color: #fff !important;
    margin: 0 !important;
    pointer-events: none;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
  .searchparts button.btn.btn-primary::before {
    background: #fff !important;
    border-color: #e1babc !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg:not(:has(.ptitle.ptitleline strong))
  .searchparts button.btn.btn-primary::after {
    content: "\2194" !important;
    color: #b92525 !important;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .searchparts button.btn.btn-primary:focus-visible {
    outline: 2px solid #202020 !important;
    outline-offset: 3px;
  }
  /* Futuro IMG dinamico (Daisuke): nessuna immagine fissa. */
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left:has(img) {
    background: white !important;
    padding: 2px !important;
    overflow: hidden;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left img {
    display: block !important;
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
  }
  main:has(> .searchparts.bg + .homeabstract) > .searchparts.bg .media-left:has(img) > i {display:none !important;}
}


/* ======================================================================
   A SPECIAL PARTS - HOMEPAGE V18
   MODULO ISOLATO: SOLO SFONDO DELLA SEZIONE "IN EVIDENZA"

   Da aggiungere dopo V17, oppure usare direttamente il CSS completo V18.
   Sfondo: stesso colore di Categorie e card editoriali (#f1f2f3).
   Non modifica Offerte lampo, prodotti, categorie, header, layout o breakpoint.

   Nell'HTML reale, la sezione In evidenza e' .homeprods immediatamente
   successiva alla .gbanner senza classe .prod. La sezione Offerte lampo,
   invece, segue una .gbanner.prod e non viene interessata.
   ====================================================================== */
main > .gbanner:not(.prod) + .homeprods {
  background-color: #f1f2f3 !important;
}
/* =====================================================================
   A SPECIAL PARTS | HOMEPAGE V19 - GERARCHIA TIPOGRAFICA
   Caricare DOPO ASP_HOME_Editorial_Premium_CSS_ONLY_V18.css.
   Per uso definitivo caricare invece il CSS completo V19 (non entrambi).

   SOLO quattro elementi nella homepage:
   1) titolo principale su mobile: protagonista (vs titolo In evidenza)
   2) titolo sezioni prodotti (In evidenza / Offerte lampo) su mobile
   3) intestazione Categorie su mobile
   4) leggero affinamento del rapporto tra titolo e sottotitolo mobile

   Non modifica: header/sticky, selector moto, CTA, Slick, griglie,
   breakpoint globali, card prodotto, banner e stili di altre pagine.
   ===================================================================== */

/* Il titolo hero su desktop e' GIA' 40-44px: non va gonfiato.
   Su mobile nella V18 scendeva a 25px, sotto i 28px di In evidenza. */

/* Titoli commerciali: un gradino sotto al titolo principale sul mobile.
   Non tocchiamo desktop, card prodotto e offerte fotografiche. */
@media only screen and (max-width: 767px) {
  main > .homeprods > .container > .row > .col-sm-12 > .title.ptitle {
    margin-bottom: 18px;
  }

  /* Categorie e' una label di navigazione, non un H2 commerciale. */
}


/* ============================================================================
   HEADER · MOBILE (fino a 767px)
   Sostituisce per intero ASP_06_HEADER_MOBILE_CSS_ONLY_V3.css.
   Ambito: header mobile nativo (max-width 767px), nessuna regola globale.

   Stato attuale del DOM: la bandiera/paese e' nell'header, NON nel menu
   hamburger. Qui viene nascosta dall'header come richiesto. Per conservare
   l'accesso alla scelta paese/valuta, Daisuke DEVE aggiungere nell'hamburger
   un controllo funzionante collegato all'azione .open-settings.

   Icone carrello e menu uniformate con due SVG integrati nel CSS: stroke
   1.7px, perche' il solo font-weight non cambia lo spessore delle font-icons.
   Mantiene la grafica nativa della moto, e la foto dinamica se selezionata.

   Ombra sticky: definita una sola volta nel modulo STICKY HEADER SHADOW.
   NON modifica regole desktop, homepage, categorie, cards, menu interno.
   ============================================================================ */

@media only screen and (max-width: 767px) {
  /* 0. Compattazione SOLTANTO del modulo testata mobile.
     Non tocca la posizione sticky o il JavaScript di Daisuke. */
  /* Elimina la linea grigia residua nel punto di uscita dell'header.
     L'ombra rimane solo su .wrapper-affix e sostituisce il bordo. */
  header[role="banner"],
  header[role="banner"] .wrapper-affix,
  header[role="banner"] .testa,
  header[role="banner"] .testa > .container.container-f,
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm {
    border-bottom: 0 !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    outline: 0 !important;
  }
  header[role="banner"] .wrapper-affix::before,
  header[role="banner"] .wrapper-affix::after,
  header[role="banner"] .testa::before,
  header[role="banner"] .testa::after {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  header[role="banner"] .testa {
    padding-block: 0 !important;
    margin-block: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: 0 !important;
    background: #fff !important;
  }
  header[role="banner"] .testa > .container.container-f {
    min-height: 0 !important;
    height: auto !important;
    margin-block: 0 !important;
  }
  /* I. SOLO la riga nativa dell'header: logo + azioni / ricerca sotto */
  header[role="banner"] .testa > .container.container-f {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 15px !important;
  }

  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "asp-logo asp-actions" "asp-search asp-search" !important;
    column-gap: 7px !important;
    row-gap: 4px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 0 7px !important;
  }

  /* Scollegamento SOLO delle tre colonne locali dalle larghezze xs/push/pull.
     La griglia generale del sito non viene modificata. */
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :nth-child(-n+3) {
    float: none !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child {
    grid-area: asp-logo !important;
  }
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :nth-child(2) {
    grid-area: asp-actions !important;
    justify-self: end !important;
  }
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :nth-child(3) {
    grid-area: asp-search !important;
  }

  /* II. LOGO completo ma NON ingrandito: limite visivo identico in entrambi gli stati. */
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper,
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper > ul,
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper > ul > li.logo {
    display: block !important;
    width: 100% !important;
    max-width: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper li.logo > a {
    display: block !important;
    width: 100% !important;
    max-width: 170px !important;
    height: 40px !important;
    background-image: url("https://asparts.pianetaitalia.com/data/logo.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
  }
  header[role="banner"] .testa > .container.container-f > .row.row-eq-height-sm > :first-child .logo-wrapper li.logo > a > picture {
    opacity: 0 !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* III. AZIONI in linea, dimensioni fisse: bandiera (fallback), moto, carrello, menu */
  header[role="banner"] .testa .info.btns,
  header[role="banner"] .testa .info.btns > ul.list-inline {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
  }
  header[role="banner"] .testa .info.btns > ul.list-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 1px !important;
    white-space: nowrap !important;
    list-style: none !important;
  }
  header[role="banner"] .testa .info.btns > ul.list-inline > li {
    float: none !important;
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 44px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    position: static !important;
  }

  /* Le azioni desktop devono rimanere nascoste su mobile */
  header[role="banner"] .testa .info.btns > ul.list-inline > li.hidden-xs,
  header[role="banner"] .testa .info.btns > ul.list-inline > li.moto-selezionata {
    display: none !important;
  }

  /* Sposta LOGICAMENTE paese/valuta al menu: nasconde il controllo in testata.
     ATTENZIONE: inserire la voce reale dentro #canvas_menu (intervento HTML).
     Nessun CSS puo' trasferire un event handler nel menu. */
  header[role="banner"] .testa .info.btns > ul.list-inline > li:has(> .langselector),
  header[role="banner"] .testa .info.btns > ul.list-inline > li:has(> a.open-settings) {
    display: none !important;
  }
  header[role="banner"] .testa .info.btns .langselector {
    display: none !important;
  }

  header[role="banner"] .testa .info.btns > ul.list-inline > li > a,
  header[role="banner"] .testa .info.btns > ul.list-inline > li > button,
  header[role="banner"] .testa .btn-modal-bike,
  header[role="banner"] .testa #cart .ajax-cart a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  /* L'HTML ha uno span inline con display !important: non deve consumare spazio */
  header[role="banner"] .testa .info.btns .open-settings > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  /* Moto non selezionata: glifo ORIGINALE, appena maggiore e tratto rinforzato. */
  header[role="banner"] .testa .info.btns i.icon-motorbike-as {
    display: inline-block !important;
    -webkit-text-stroke: .30px currentColor;
    color: #202020 !important;
    vertical-align: middle !important;
    transform: none !important;
  }

  /* Carrello outline; hamburger a DUE tratti: sopra lungo, sotto corto.
     Manteniamo peso 1.7 px per allineare l'hamburger al carrello. */
  /* Cart e hamburger in stile outline a spessore uguale.
     Gli SVG sostituiscono SOLTANTO i due glifi mobile dell'header. */
  header[role="banner"] .testa .info.btns i.icon-cart-n,
  header[role="banner"] .testa .info.btns i.icon-menu-n {
    display: block !important;
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 25px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 25px 25px !important;
  }
  header[role="banner"] .testa .info.btns i.icon-cart-n {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23202020%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2220%22%20r%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M2%203h2.4l2.25%2012.1a2%202%200%200%200%202%201.65h10.7a2%202%200%200%200%201.95-1.55L23%207H5.2%22%2F%3E%3C%2Fsvg%3E") !important;
  }
  header[role="banner"] .testa .info.btns i.icon-menu-n {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23202020%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h18M3%2016h12%22%2F%3E%3C%2Fsvg%3E") !important;
  }
  header[role="banner"] .testa .info.btns i.icon-cart-n::before,
  header[role="banner"] .testa .info.btns i.icon-menu-n::before {
    content: "" !important;
    display: none !important;
  }

  /* Moto selezionata: foto REALE portata alla dimensione originale 40x40. */
  header[role="banner"] .testa .btn-modal-bike > img {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
  header[role="banner"] .testa .btn-modal-bike > span {
    display: none !important;
  }

  /* Cart: il collegamento è sempre disponibile. Il badge compare soltanto
     se il backend lo genera (non si inventa una quantità con CSS). */
  header[role="banner"] .testa #cart,
  header[role="banner"] .testa #cart > .ajax-cart,
  header[role="banner"] .testa #cart > .ajax-cart > span,
  header[role="banner"] .testa #cart .p-rel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }
  header[role="banner"] .testa #cart .badge:empty,
  header[role="banner"] .testa #cart [data-count="0"] .badge,
  header[role="banner"] .testa #cart .badge[data-count="0"] {
    display: none !important;
  }
  /* Contatore del carrello: il tema lo ancora 7px sopra il riquadro
     dell'icona (alto 44px), quindi restava staccato in alto. Ora poggia
     sull'angolo alto a destra del carrello, con un bordo bianco che lo
     separa dal disegno. Colore e numero restano quelli del tema. */
  header[role="banner"] .testa #cart .badge {
    top: 2px !important;
    left: auto !important;
    right: 2px !important;   /* con 2-3 cifre cresce verso sinistra, non verso il menu */
    box-sizing: border-box !important;
    min-width: 17px !important;
    width: auto !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 2px #fff !important;
  }
  header[role="banner"] .testa .toggle-canvas {
    cursor: pointer !important;
  }

  /* IV. RICERCA: 2a riga compatta, input protagonista, solo lente a destra */
  header[role="banner"] .testa .modal-search,
  header[role="banner"] .testa .modal-search > ul.list-inline,
  header[role="banner"] .testa .modal-search > ul.list-inline > li,
  header[role="banner"] .testa .modal-search .top_search,
  header[role="banner"] .testa .modal-search #frm_cerca {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header[role="banner"] .testa #frm_cerca > .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e7eb !important;
    background: #f1f2f3 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  header[role="banner"] .testa #frm_cerca #txt_cerca {
    display: block !important;
    position: static !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 1% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    color: #202020 !important;
    caret-color: #202020 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  header[role="banner"] .testa #frm_cerca #txt_cerca::placeholder {
    color: #62666b !important;
    opacity: 1 !important;
  }
  header[role="banner"] .testa #frm_cerca #txt_cerca:focus-visible {
    outline: 2px solid #727b89 !important;
    outline-offset: -2px !important;
  }
  header[role="banner"] .testa #frm_cerca .input-group-btn {
    position: static !important;
    display: block !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header[role="banner"] .testa #frm_cerca .input-group-btn > button.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: #202020 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  header[role="banner"] .testa #frm_cerca .input-group-btn > button.btn > i.icon-search {
    display: inline-block !important;
    color: #fff !important;
    margin: 0 !important;
  }
  header[role="banner"] .testa #frm_cerca .input-group-btn > button.btn:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: -4px !important;
  }

  /* Non modificare .search_results, modali, overlay, nav e filtri. */
}


/* =========================================================
   HEADER · OMBRA (tutte le larghezze)
   - header.noaffix = header non sticky -> non interviene
   - sostituisce il bordo inferiore del blocco header con un'ombra
   - unica definizione: il modulo header mobile non la ripete più
   ========================================================= */

header:not(.noaffix) .wrapper-affix,
header:not(.noaffix) .wrapper-affix .megamenu,
header:not(.noaffix) .wrapper-affix .megamenu #canvas_menu.navbar {
    border-bottom: 0 !important;
}

header:not(.noaffix) .wrapper-affix {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
}


/* =========================================================
   HEADER · DESKTOP E TABLET (da 768px)
   COMPONENT-ADAPTIVE / ISOLATED / NO-COLLISION

   PRINCIPIO:
   - NON modifica la griglia/layout responsive della pagina
   - NON modifica col-lg / col-xl / push / pull del sito
   - NON scala progressivamente font o icone
   - la ricerca occupa sempre tutto lo spazio tra logo e azioni
   - icone + scritte da 1200px (dove c'è la barra del menu); sotto,
     sole icone. La scelta è per larghezza di pagina: l'area azioni
     ora è larga quanto il proprio contenuto e non può più misurarsi
     da sola con una container query
   - vale da 768px in su: tra 768 e 1199px (menu a scomparsa) stesso
     stile del desktop, con sole icone e hamburger; sotto 768px resta
     il modulo HEADER MOBILE
   - NON modifica .megamenu, #main, .dropdown-menu o .group-menu
   - allineamento verticale: tutte le azioni sono alte 44px come il
     campo di ricerca e centrate sulla stessa linea (nessuno
     spostamento manuale)
   ========================================================= */

@media only screen and (min-width: 768px) {

    /* =========================================================
       0. BARRA NERA SUPERIORE
       Le quattro voci erano in quattro colonne uguali, le prime tre
       allineate a sinistra e l'ultima a destra: spazi diversi.
       Ora hanno la larghezza del proprio testo e lo spazio fra una
       e l'altra è identico.
       ========================================================= */

    body > .boxtop > .container > .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    body > .boxtop > .container > .row::before,
    body > .boxtop > .container > .row::after {
        display: none !important;
    }

    body > .boxtop > .container > .row > [class*="col-"] {
        flex: 0 0 auto !important;
        float: none !important;
        width: auto !important;
        text-align: left !important;
    }

    /* la terza voce è una lista: senza i suoi rientri lo spazio resta uguale */
    body > .boxtop > .container > .row > [class*="col-"] > .list-inline,
    body > .boxtop > .container > .row > [class*="col-"] > .list-inline > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* =========================================================
       1. STRUTTURA: LOGO | RICERCA | AZIONI
       Le tre colonne Bootstrap avevano larghezze fisse (3/12, 5/12,
       4/12 con push/pull): la ricerca non poteva mai superare la
       propria quota e ai lati restava spazio vuoto.
       Ora logo e azioni occupano solo la larghezza del proprio
       contenuto e la ricerca prende TUTTO lo spazio che resta.
       Le colonne sono riconosciute dal contenuto (:has), non dalle
       classi col-*, che cambiano da un template all'altro.
       ========================================================= */

    header .testa > .container > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 24px !important;
    }

    header .testa > .container > .row::before,
    header .testa > .container > .row::after {
        display: none !important;
    }

    header .testa > .container > .row > [class*="col-"] {
        position: static !important;   /* annulla push/pull */
        float: none !important;
        width: auto !important;
        min-height: 0 !important;
    }

    header .testa > .container > .row > [class*="col-"]:has(.logo-wrapper) {
        order: 1 !important;
        flex: 0 0 auto !important;
        padding-right: 0 !important;   /* lo spazio verso la ricerca è solo il gap */
    }

    header .testa .logo-wrapper ul,
    header .testa .logo-wrapper li {
        margin: 0 !important;
        padding: 0 !important;
    }

    header .testa > .container > .row > [class*="col-"]:has(.modal-search) {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    header .testa > .container > .row > [class*="col-"]:has(.info.btns) {
        order: 3 !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
    }

    /* =========================================================
       2. LOGO
       Larghezza propria (la colonna ora si adatta al contenuto):
       161px a 768px, 220px da circa 1050px in su.
       ========================================================= */

    header .testa .logo img {
        display: block !important;

        width: clamp(160px, 21vw, 220px) !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
    }

    /* =========================================================
       3. SEARCH
       Occupa il 100% DELLA SUA COLONNA ORIGINALE CENTRALE.
       ========================================================= */

    header .testa .modal-search,
    header .testa .modal-search > ul,
    header .testa .modal-search > ul > li,
    header .testa .top_search,
    header .testa #frm_cerca {
        /* il tema impagina <ul>/<li> come tabella: una cella non scende
           sotto la larghezza naturale del campo e la ricerca usciva
           dalla propria colonna a 768px */
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .testa #frm_cerca .input-group {
        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: none !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #f4f4f4 !important;

        border: 0 !important;
        border-radius: 8px !important;

        box-shadow: none !important;

        overflow: hidden !important;
    }

    header .testa #txt_cerca {
        position: static !important;

        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 44px !important;

        margin: 0 !important;

        padding:
            0
            16px
            0
            44px !important;

        color: #1f1f1f !important;
        caret-color: #1f1f1f !important;


        background-color: #f4f4f4 !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") !important;

        background-repeat: no-repeat !important;
        background-position: 15px center !important;
        background-size: 18px 18px !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        outline: none !important;
    }

    header .testa #txt_cerca::placeholder {
        color: #353535 !important;
        opacity: 1 !important;
    }

    header .testa #frm_cerca .input-group-btn {
        position: static !important;

        display: block !important;

        flex: 0 0 auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .testa #frm_cerca .input-group-btn .btn {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-width: 90px !important;
        height: 44px !important;

        margin: 0 !important;

        padding:
            0
            18px !important;

        background: #1f1f1f !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        color: #ffffff !important;
    }

    header .testa #frm_cerca .input-group-btn .btn i {
        display: none !important;
    }

    /* =========================================================
       4. AZIONI A DESTRA
       Manteniamo la colonna Bootstrap originale.
       All'interno creiamo una sola riga ben centrata.
       ========================================================= */

    header .testa .info.btns {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;        /* larga quanto le icone: il resto va alla ricerca */
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .testa .info.btns > ul {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        flex-wrap: nowrap !important;

        gap: 22px !important;

        width: auto !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }

    header .testa .info.btns > ul > li {
        position: relative !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        float: none !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        vertical-align: middle !important;
    }

    /* =========================================================
       5. ORDINE
       Moto | Account | Carrello | Lingua
       ========================================================= */

    header .testa .info.btns > ul > li:has(.btn-modal-bike) {
        order: 1 !important;
    }

    header .testa .info.btns > ul > li:has(.a_saveurl) {
        order: 2 !important;
    }

    header .testa .info.btns > ul > li:has(#cart) {
        order: 3 !important;
    }

    /* Nel DOM .langselector è un <div> dentro il <li>, non una classe del <li> */
    header .testa .info.btns > ul > li:has(> .langselector) {
        order: 4 !important;
    }

    /* cuore OFF desktop */
    header .testa .info.btns > ul > li:has(#preferiti),
    header .testa #preferiti {
        display: none !important;
    }

    /* hamburger: ultimo a destra tra 768 e 1199px (lì il menu è a scomparsa) */
    header .testa .info.btns > ul > li:has(.toggle-canvas) {
        order: 5 !important;
    }

    header .testa .toggle-canvas {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Stessa icona a due linee dell'header mobile (stesso SVG, 25px),
       al posto del glifo a tre linee del tema. */
    header .testa .toggle-canvas i.icon-menu-n {
        display: block !important;
        flex: 0 0 25px !important;
        width: 25px !important;
        height: 25px !important;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23202020%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h18M3%2016h12%22%2F%3E%3C%2Fsvg%3E") !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 25px 25px !important;
    }

    header .testa .toggle-canvas i.icon-menu-n::before {
        content: "" !important;
        display: none !important;
    }

    /* hamburger/X OFF da 1200px: c'è la barra del menu */
    @media only screen and (min-width: 1200px) {
        header .testa .info.btns > ul > li:has(.toggle-canvas),
        header .testa .toggle-canvas {
            display: none !important;
        }
    }

    /* nome modello backend OFF nell'header */
    header .testa .info.btns > ul > li.moto-selezionata {
        display: none !important;
    }

    /* =========================================================
       6. MOTO

       NON SELEZIONATA:
       [icona] Seleziona
               Moto

       SELEZIONATA:
       [foto 40px] La tua
                   Moto
       ========================================================= */

    header .testa .btn-modal-bike {
        display: grid !important;

        grid-template-columns:
            40px
            auto !important;

        grid-template-rows:
            15px
            18px !important;

        /* le due righe (33px) stanno al centro dei 44px, non in alto */
        align-content: center !important;

        align-items: center !important;

        column-gap: 12px !important;

        width: auto !important;
        min-width: max-content !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        box-shadow: none !important;

        color: #1f1f1f !important;


        text-align: left !important;

        white-space: nowrap !important;
    }

    /* icona generica: resta 24px */
    header .testa .btn-modal-bike > i {
        grid-column: 1 !important;
        grid-row:
            1
            /
            3 !important;

        display: block !important;

        align-self: center !important;
        justify-self: center !important;

        margin: 0 !important;

        color: #1f1f1f !important;
    }

    /* foto moto selezionata: RESTA 40x40 */
    header .testa .btn-modal-bike > img {
        grid-column: 1 !important;
        grid-row:
            1
            /
            3 !important;

        display: block !important;

        align-self: center !important;
        justify-self: center !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
    }

    header .testa .btn-modal-bike > span {
        display: none !important;
    }

    /* non selezionata */
    header .testa .btn-modal-bike:has(> i)::before {
        content: "Seleziona" !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        display: block !important;

        margin: 0 !important;

        color: #555555 !important;
    }

    header .testa .btn-modal-bike:has(> i)::after {
        content: "Moto" !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        display: block !important;

        margin-top: 2px !important;

        color: #1f1f1f !important;
    }

    /* selezionata */
    header .testa .btn-modal-bike:has(> img)::before {
        content: "La tua" !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        display: block !important;

        margin: 0 !important;

        color: #555555 !important;
    }

    header .testa .btn-modal-bike:has(> img)::after {
        content: "Moto" !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        display: block !important;

        margin-top: 2px !important;

        color: #1f1f1f !important;
    }

    /* =========================================================
       7. ACCOUNT
       ========================================================= */

    header .testa .a_saveurl {
        display: grid !important;

        grid-template-columns:
            26px
            auto !important;

        grid-template-rows:
            15px
            18px !important;

        /* le due righe (33px) stanno al centro dei 44px, non in alto */
        align-content: center !important;

        align-items: center !important;

        column-gap: 12px !important;

        width: auto !important;
        min-width: max-content !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #1f1f1f !important;


        text-align: left !important;
        text-decoration: none !important;

        white-space: nowrap !important;
    }

    header .testa .a_saveurl > i {
        grid-column: 1 !important;
        grid-row:
            1
            /
            3 !important;

        display: block !important;

        align-self: center !important;
        justify-self: center !important;

        margin: 0 !important;

        color: #1f1f1f !important;
    }

    header .testa .a_saveurl::before {
        content: "Il tuo" !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        color: #555555 !important;
    }

    header .testa .a_saveurl[href*="/login"]::before {
        content: "Ciao, accedi" !important;
    }

    header .testa .a_saveurl::after {
        content: "Account" !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        margin-top: 2px !important;

        color: #1f1f1f !important;
    }

    /* =========================================================
       8. CARRELLO
       ========================================================= */

    header .testa #cart,
    header .testa #cart > .ajax-cart > span {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .testa #cart > .ajax-cart > span > a {
        display: grid !important;

        grid-template-columns:
            28px
            auto !important;

        grid-template-rows:
            15px
            18px !important;

        /* le due righe (33px) stanno al centro dei 44px, non in alto */
        align-content: center !important;

        align-items: center !important;

        column-gap: 12px !important;

        width: auto !important;
        min-width: max-content !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #1f1f1f !important;


        text-align: left !important;
        text-decoration: none !important;

        white-space: nowrap !important;
    }

    header .testa #cart .p-rel {
        grid-column: 1 !important;
        grid-row:
            1
            /
            3 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 28px !important;
        height: 34px !important;

        margin: 0 !important;
    }

    /* Stesso carrello dell'header mobile (stesso SVG, 25px) al posto
       del glifo del font icone: prima erano due disegni diversi. */
    header .testa #cart i.icon-cart-n {
        display: block !important;
        flex: 0 0 25px !important;

        width: 25px !important;
        height: 25px !important;


        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23202020%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2220%22%20r%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M2%203h2.4l2.25%2012.1a2%202%200%200%200%202%201.65h10.7a2%202%200%200%200%201.95-1.55L23%207H5.2%22%2F%3E%3C%2Fsvg%3E") !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 25px 25px !important;
    }

    header .testa #cart i.icon-cart-n::before {
        content: "" !important;
        display: none !important;
    }

    header .testa #cart > .ajax-cart > span > a::before {
        content: "Il tuo" !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        color: #555555 !important;
    }

    header .testa #cart > .ajax-cart > span > a::after {
        content: "Carrello" !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        margin-top: 2px !important;

        color: #1f1f1f !important;
    }

    header .testa #cart .badge {
        top: -6px !important;
        left: 17px !important;

        min-width: 17px !important;
        width: auto !important;

        height: 17px !important;

        padding:
            0
            4px !important;


        border-radius: 999px !important;
    }

    /* =========================================================
       9. LINGUA
       DOM reale: li > div.langselector > div.flag.it > button.open-settings
       Bandiera + freccia verso il basso, a tutte le larghezze.
       ========================================================= */

    header .testa .langselector .flag {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .testa .langselector .flag::before {
        content: "" !important;

        position: absolute !important;

        top: 50% !important;
        left: 0 !important;

        width: 24px !important;
        height: 17px !important;

        transform: translateY(-50%) !important;

        border-radius: 4px !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    header .testa .langselector .flag > button {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;

        width: auto !important;
        min-width: 0 !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 2px 0 31px !important;   /* 24px di bandiera + 7px */

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        color: #1f1f1f !important;
    }

    /* Niente "IT/€" accanto alla bandiera: resta nel DOM (e il pulsante
       ha il suo aria-label), a vista c'è solo la freccia che indica il
       menu. La freccia è decorativa, disegnata con due bordi. */
    header .testa .langselector .flag > button > span {
        display: none !important;
    }

    header .testa .langselector .flag > button::after {
        content: "" !important;
        flex: 0 0 auto !important;

        width: 6px !important;
        height: 6px !important;
        margin-top: -3px !important;

        border-right: 1.7px solid currentColor !important;
        border-bottom: 1.7px solid currentColor !important;

        transform: rotate(45deg) !important;
    }

    /* =========================================================
       10. ETICHETTE IN INGLESE
       Le scritte sono generate dal CSS: senza queste regole la
       versione inglese del sito mostrerebbe i testi in italiano.
       ========================================================= */

    html:lang(en) header .testa .btn-modal-bike:has(> i)::before {
        content: "Select" !important;
    }

    html:lang(en) header .testa .btn-modal-bike:has(> img)::before,
    html:lang(en) header .testa .a_saveurl::before,
    html:lang(en) header .testa #cart > .ajax-cart > span > a::before {
        content: "Your" !important;
    }

    html:lang(en) header .testa .btn-modal-bike:has(> i)::after,
    html:lang(en) header .testa .btn-modal-bike:has(> img)::after {
        content: "Bike" !important;
    }

    html:lang(en) header .testa .a_saveurl[href*="/login"]::before {
        content: "Hello, sign in" !important;
    }

    html:lang(en) header .testa #cart > .ajax-cart > span > a::after {
        content: "Cart" !important;
    }
}

/* =========================================================
   AZIONI SENZA SCRITTE TRA 768 E 1199px

   Da 1200px: Moto / Account / Carrello mantengono icone + scritte
   con dimensioni ORIGINALI FISSE (il gruppo occupa ~424px).

   Sotto 1200px (menu a scomparsa, c'è anche l'hamburger):
   -> nascondiamo esclusivamente le scritte
   -> le icone NON si rimpiccioliscono
   -> la griglia Bootstrap della pagina NON cambia
   ========================================================= */

@media only screen and (min-width: 768px) and (max-width: 1199.98px) {

    header .testa .info.btns > ul {
        gap: 22px !important;
    }

    /* MOTO: icona/foto invariata, testo off */
    header .testa .btn-modal-bike {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 40px !important;

        column-gap: 0 !important;
    }

    header .testa .btn-modal-bike:has(> i)::before,
    header .testa .btn-modal-bike:has(> i)::after,
    header .testa .btn-modal-bike:has(> img)::before,
    header .testa .btn-modal-bike:has(> img)::after {
        content: none !important;
        display: none !important;
    }

    /* ACCOUNT: icona 24px invariata, testo off */
    header .testa .a_saveurl {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 26px !important;

        column-gap: 0 !important;
    }

    header .testa .a_saveurl::before,
    header .testa .a_saveurl::after {
        content: none !important;
        display: none !important;
    }

    /* CARRELLO: icona 24px invariata, testo off */
    header .testa #cart > .ajax-cart > span > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 28px !important;

        column-gap: 0 !important;
    }

    header .testa #cart > .ajax-cart > span > a::before,
    header .testa #cart > .ajax-cart > span > a::after {
        content: none !important;
        display: none !important;
    }
}

/* Tra 768 e 991px: icone più vicine, così resta più spazio alla ricerca. */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {

    header .testa .info.btns > ul {
        gap: 14px !important;
    }
}


/* =========================================================
   MENU · MODELLI MOTO APRILIA (desktop)
   ISOLATED / NO-COLLISION BUILD

   OWNERSHIP CONTRACT:
   - Questo file può modificare SOLO:
     header .megamenu > ... > "Modelli Moto Aprilia"
   - NON modifica header .testa, search, Moto/Account/Carrello/Lingua
   - NON modifica "Tutti i prodotti" o altri dropdown
   - I modelli sono posizionati uno per uno tramite il loro id (value):
     un modello NUOVO aggiunto nel gestionale va aggiunto anche qui.
   ========================================================= */

@media (min-width: 1200px) {

    /* =====================================================
       1. DROPDOWN FULL WIDTH
       ===================================================== */

    header .megamenu {
        position: relative !important;
        overflow: visible !important;
    }

    header .megamenu #wrappermenu,
    header .megamenu #canvas_menu,
    header .megamenu #canvas_menu > .container,
    header .megamenu #canvas_menu > .container > .row,
    header .megamenu #canvas_menu .container-fluid,
    header .megamenu #canvas_menu .wrappermenu,
    header .megamenu #main,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) {
        position: static !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 0 20px !important;
        transform: none !important;

        background: var(--white, #fff) !important;
        border-radius: 0 !important;
        border-color: var(--grey-f0, #f0f0f0) !important;
        box-shadow: none !important;

        overflow: visible !important;
        z-index: 99999 !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    > .container.container-f {
        width: 100% !important;
        max-width: 1716px !important;

        margin: 0 auto !important;
        padding: 0 16px !important;

        box-sizing: border-box !important;

        max-height: calc(100vh - 150px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    /* =====================================================
       2. GRIGLIA BASE
       1px per riga = controllo preciso degli spazi.
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu {
        display: grid !important;
        grid-auto-rows: 1px !important;

        row-gap: 0 !important;

        width: 100% !important;
        margin: 0 !important;

        /* identico .megamenu .hidelv1 */
        padding: 15px 0 5px !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1 {
        position: relative !important;

        display: block !important;
        float: none !important;
        clear: none !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        /*
         * IMPORTANTE:
         * stretch fa riempire al LI tutto lo span assegnato.
         * Quindi la linea ::after finisce DAVVERO 10px sotto
         * il testo, invece di attaccarsi subito alla scritta.
         */
        align-self: stretch !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a::after {
        content: none !important;
        display: none !important;
    }


    /* =====================================================
       3. LINK MODELLO = .megamenu .lv2 > a REALE
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a {
        display: inline-block !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 3px 20px 3px 0 !important;

        color: var(--grey-73, #737373) !important;


        text-align: left !important;
        text-decoration: none !important;

        background: transparent !important;

        /*
         * Vogliamo evitare proprio l'effetto brutto a due righe.
         * Sotto 1600 passiamo a 4 colonne invece di wrappare.
         */
        white-space: nowrap !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a:hover,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu
    > li.lv1
    > a:focus {
        background-color: var(--white, #fff) !important;
        color: var(--red-e2, #E22623) !important;
        text-decoration: none !important;
    }


    /* =====================================================
       4. TITOLI = .megamenu .lv1 > a REALE
       MA NON CLICCABILI
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="5"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="14"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="8"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="16"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="7"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="22"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="10"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"])::before,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"])::before {
        display: block !important;

        margin: 0 !important;
        padding: 6px 0 !important;

        color: var(--black, #1f1f1f) !important;


        text-decoration: none !important;

        background: transparent !important;

        pointer-events: none !important;
        cursor: default !important;
        user-select: none !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="5"])::before  { content:"RSV4" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="14"])::before { content:"RSV 1000" !important; }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="8"])::before  { content:"TUONO V4" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="16"])::before { content:"TUONO 1000" !important; }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="7"])::before  { content:"RS 660" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="22"])::before { content:"TUONO 660" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="10"])::before { content:"TUAREG 660" !important; }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"])::before { content:"RS 457" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"])::before { content:"TUONO 457" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"])::before { content:"RS 250" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"])::before { content:"RXV / SXV" !important; }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"])::before { content:"CAPONORD / FALCO / FUTURA" !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"])::before { content:"DORSODURO / SHIVER" !important; }


    /* =====================================================
       5. DIVISORI
       La linea è a fondo dello span.
       Lo span dell'ultimo link è 33px:
       link 22px + 10px vuoto + 1px linea.
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="4"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="15"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="19"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="17"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="6"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="21"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="9"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="26"])::after,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="27"])::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 1px !important;

        background: var(--grey-f0, #f0f0f0) !important;

        pointer-events: none !important;
    }

    /* Linea nera superiore come "Tutti i prodotti" */
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]):hover
    > .dropdown-menu,
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]).open
    > .dropdown-menu {
        border-top: 1px solid var(--black, #1f1f1f) !important;
    }


    /* =====================================================
       6. COLONNE E POSIZIONI
       Base (da 1200px): 4 colonne. Da 1600px: 5 colonne.
       Le posizioni uguali nelle due griglie sono scritte una
       volta sola; da 1600px cambiano solo RS 250, RXV/SXV,
       Caponord e Dorsoduro.
       Niente intervallo "1200-1599": con lo zoom del sistema la
       finestra può essere larga 1599,2px e non rientrare né in
       "max-width:1599px" né in "min-width:1600px" (il menu
       restava senza colonne).
       ===================================================== */

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 18px !important;
    }

    /* Posizioni comuni a 4 e 5 colonne */
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="5"]) { grid-column:1 !important; grid-row:1 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="1"]) { grid-column:1 !important; grid-row:55 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="2"]) { grid-column:1 !important; grid-row:77 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="3"]) { grid-column:1 !important; grid-row:99 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="4"]) { grid-column:1 !important; grid-row:121 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="14"]) { grid-column:1 !important; grid-row:169 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="15"]) { grid-column:1 !important; grid-row:223 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="8"]) { grid-column:2 !important; grid-row:1 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="11"]) { grid-column:2 !important; grid-row:55 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="12"]) { grid-column:2 !important; grid-row:77 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="13"]) { grid-column:2 !important; grid-row:99 / span 22 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="19"]) { grid-column:2 !important; grid-row:121 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="16"]) { grid-column:2 !important; grid-row:169 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="17"]) { grid-column:2 !important; grid-row:223 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="7"]) { grid-column:3 !important; grid-row:1 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="6"]) { grid-column:3 !important; grid-row:55 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="22"]) { grid-column:3 !important; grid-row:103 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="21"]) { grid-column:3 !important; grid-row:157 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="10"]) { grid-column:3 !important; grid-row:205 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="9"]) { grid-column:3 !important; grid-row:259 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="24"]) { grid-column:4 !important; grid-row:1 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="25"]) { grid-column:4 !important; grid-row:81 / span 65 !important; }

    /* Solo griglia a 4 colonne */
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"]) { grid-column:1 !important; grid-row:271 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"]) { grid-column:2 !important; grid-row:271 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"]) { grid-column:4 !important; grid-row:161 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="26"]) { grid-column:4 !important; grid-row:215 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"]) { grid-column:4 !important; grid-row:263 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="27"]) { grid-column:4 !important; grid-row:317 / span 33 !important; }
}


@media (min-width: 1600px) {

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    .group-menu {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        column-gap: 30px !important;
    }

    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="20"]) { grid-column:4 !important; grid-row:161 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="23"]) { grid-column:4 !important; grid-row:241 / span 65 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="18"]) { grid-column:5 !important; grid-row:1 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="26"]) { grid-column:5 !important; grid-row:55 / span 33 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="28"]) { grid-column:5 !important; grid-row:103 / span 54 !important; }
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i]) .group-menu > li:has(> a[value="27"]) { grid-column:5 !important; grid-row:157 / span 33 !important; }
}


/* >=1800px: padding esatto del tema */
@media (min-width: 1800px) {
    header .megamenu #main > li.dropdown-s:has(> a[title*="Modelli" i])
    > .dropdown-menu
    > .container.container-f {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


/* =========================================================
   SCHEDA PRODOTTO · BOX "LA TUA MOTO"
   COMPONENT-ADAPTIVE / ISOLATED / NO-COLLISION

   PRINCIPIO:
   - modifica SOLO .product-view .moto-compat
   - NON modifica colonne/grid responsive della pagina
   - NON usa breakpoint viewport per cambiare layout
   - il componente reagisce alla SUA larghezza reale
   - dimensioni font/icone NON scalano progressivamente
   - due stati netti:
       1) completo quando c'è spazio
       2) compatto quando il box è stretto
   ========================================================= */


/* =========================================================
   1. ROOT COMPONENTE
   ========================================================= */

.product-view .moto-compat {
    width: 100%;

    margin: 20px 0 12px;
    padding: 0;

    background: #f2f2f2;

    border: 0;
    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04);

    color: #202020;

    /*
     * Responsive LOCALE:
     * nessun breakpoint della pagina viene modificato.
     */
    container-type: inline-size;
    container-name: asp-pdp-compat;
}


/* =========================================================
   2. STATO COMPLETO
   ========================================================= */

.product-view .moto-compat .moto-compat-current {
    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        max-content;

    align-items: center;

    gap: 16px;

    padding:
        14px
        16px;
}


/* =========================================================
   3. IMMAGINE
   ========================================================= */

.product-view .moto-compat .moto-compat-image {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 6px;

    background: #ffffff;

    border-radius: 8px;

    overflow: hidden;
}

.product-view .moto-compat .moto-compat-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   4. CONTENUTO
   ========================================================= */

.product-view .moto-compat .moto-compat-content {
    min-width: 0;
}


/* Nasconde la frase ridondante originale,
   mantenendo visibile il modello dentro <strong>. */
.product-view .moto-compat .moto-compat-message {
    margin: 0;


    color: #202020;
}


/* =========================================================
   5. "LA TUA MOTO"
   ========================================================= */

.product-view .moto-compat .moto-compat-message::before {
    content: "LA TUA MOTO";

    display: block;

    margin-bottom: 4px;


    color: #777777;
}

html[lang^="en"]
.product-view .moto-compat .moto-compat-message::before {
    content: "YOUR BIKE";
}


/* =========================================================
   6. MODELLO
   ========================================================= */

.product-view .moto-compat .moto-compat-message strong {
    display: block;

    margin: 0;


    color: #202020;

    white-space: normal;
    text-wrap: pretty;
    hyphens: none;
}


/* =========================================================
   7. CAMBIA MOTO
   ========================================================= */

.product-view .moto-compat .moto-compat-change {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin: 8px 0 0;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    color: #444444;


    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color 150ms ease;
}

.product-view .moto-compat .moto-compat-change::after {
    content: "→";


    transition:
        transform 150ms ease;
}

.product-view .moto-compat .moto-compat-change:hover {
    color: #000000;
}

.product-view .moto-compat .moto-compat-change:hover::after {
    transform: translateX(2px);
}


/* =========================================================
   8. STATUS — COMPATIBILE
   ========================================================= */

.product-view
.moto-compat:not(.moto-compat-warning)
.moto-compat-current::after {
    content: "✓ COMPATIBILE";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 7px 12px;

    background: #202020;
    color: #ffffff;

    border-radius: 999px;


    white-space: nowrap;
}

html[lang^="en"]
.product-view
.moto-compat:not(.moto-compat-warning)
.moto-compat-current::after {
    content: "✓ COMPATIBLE";
}


/* =========================================================
   9. STATUS — NON COMPATIBILE
   ========================================================= */

.product-view
.moto-compat.moto-compat-warning
.moto-compat-current::after {
    content: "× NON COMPATIBILE";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 7px 12px;

    background: #ed1c24;   /* stesso rosso del badge sconto */
    color: #ffffff;

    border-radius: 999px;


    white-space: nowrap;
}

html[lang^="en"]
.product-view
.moto-compat.moto-compat-warning
.moto-compat-current::after {
    content: "× NOT COMPATIBLE";
}


/* =========================================================
   10. ALTRI MODELLI / ACCORDION
   ========================================================= */

.product-view .moto-compat .moto-compat-other {
    margin: 0;

    padding: 0 16px;

    border-top:
        1px solid rgba(0, 0, 0, 0.08);
}

.product-view .moto-compat .moto-compat-toggle {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0;
    padding: 16px 0;

    background: transparent;

    border: 0;

    color: #202020;

    text-align: left;


    cursor: pointer;
}

.product-view
.moto-compat
.moto-compat-toggle
.icon-plus {
    margin-left: auto;

    flex: 0 0 auto;

    transition:
        transform 180ms ease;
}

.product-view
.moto-compat
.moto-compat-toggle:not(.collapsed)
.icon-plus {
    transform: rotate(45deg);
}


/* =========================================================
   11. LISTA MODELLI
   ========================================================= */

.product-view .moto-compat .moto-compat-list {
    margin: 0;

    padding: 0 0 16px;

    list-style: none;
}

.product-view .moto-compat .moto-compat-list li {
    position: relative;

    margin: 0;

    padding:
        6px
        0
        6px
        16px;

    color: #444444;
}

.product-view .moto-compat .moto-compat-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;

    width: 5px;
    height: 5px;

    background: #202020;

    border-radius: 50%;
}


/* =========================================================
   12. FOCUS
   ========================================================= */

.product-view .moto-compat button:focus-visible {
    outline: 2px solid #202020;
    outline-offset: 3px;
}


/* =========================================================
   13. STATO COMPATTO — MOBILE / COLONNA STRETTA
   V5 — MEDIA OBJECT BILANCIATO

   IDEA:
   [ FOTO ]  LA TUA MOTO
             MODELLO...
             [ STATUS ]  Cambia moto →

   La foto resta a sinistra ma viene centrata VERTICALMENTE
   rispetto all'intero blocco informativo, quindi non crea più
   il "buco morto" sotto di sé.

   Nessun breakpoint viewport.
   Nessuno scaling progressivo.
   La seconda riga usa flex-wrap naturale se serve.
   ========================================================= */

@container asp-pdp-compat (max-width: 500px) {

    /* ---------------------------------------------------------
       BLOCCO PRINCIPALE
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-current {
        display: grid !important;

        grid-template-columns:
            64px
            minmax(0, 1fr) !important;

        align-items: center !important;

        gap: 12px !important;

        padding:
            13px
            14px
            14px
            14px !important;
    }


    /* ---------------------------------------------------------
       IMMAGINE
       Più presente, mai ridotta progressivamente
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-image {
        grid-column: 1 !important;

        width: 64px !important;
        height: 64px !important;

        min-width: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 5px !important;

        background: #ffffff !important;

        border-radius: 9px !important;

        align-self: center !important;

        box-sizing: border-box !important;
    }

    .product-view .moto-compat .moto-compat-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }


    /* ---------------------------------------------------------
       BADGE DESKTOP OFF — UNA SOLA PILL
       --------------------------------------------------------- */
    .product-view
    .moto-compat:not(.moto-compat-warning)
    .moto-compat-current::after,

    .product-view
    .moto-compat.moto-compat-warning
    .moto-compat-current::after {
        content: none !important;
        display: none !important;

        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    /* ---------------------------------------------------------
       CONTENUTO
       Riga 1 = moto
       Riga 2 = status + cambia moto
       Il wrap è naturale se lo spazio non basta.
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-content {
        grid-column: 2 !important;

        display: flex !important;
        flex-wrap: wrap !important;

        align-items: center !important;
        align-content: center !important;

        column-gap: 12px !important;
        row-gap: 8px !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ---------------------------------------------------------
       TITOLO MOTO
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-message {
        order: 1 !important;

        flex:
            0
            0
            100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .product-view .moto-compat .moto-compat-message::before {
        margin:
            0
            0
            3px
            0 !important;

        color: #777777 !important;
    }

    .product-view .moto-compat .moto-compat-message strong {
        display: block !important;


        white-space: normal !important;
        text-wrap: pretty !important;
        hyphens: none !important;
    }


    /* ---------------------------------------------------------
       STATUS — COMPATIBILE
       --------------------------------------------------------- */
    .product-view
    .moto-compat:not(.moto-compat-warning)
    .moto-compat-content::after {
        content: "✓ COMPATIBILE" !important;

        order: 2 !important;

        flex:
            0
            0
            auto !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-height: 26px !important;

        margin: 0 !important;

        padding:
            5px
            9px !important;

        background: #202020 !important;
        color: #ffffff !important;

        border: 0 !important;
        border-radius: 999px !important;

        box-shadow: none !important;


        white-space: nowrap !important;
    }

    html[lang^="en"]
    .product-view
    .moto-compat:not(.moto-compat-warning)
    .moto-compat-content::after {
        content: "✓ COMPATIBLE" !important;
    }


    /* ---------------------------------------------------------
       STATUS — NON COMPATIBILE
       --------------------------------------------------------- */
    .product-view
    .moto-compat.moto-compat-warning
    .moto-compat-content::after {
        content: "× NON COMPATIBILE" !important;

        order: 2 !important;

        flex:
            0
            0
            auto !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-height: 26px !important;

        margin: 0 !important;

        padding:
            5px
            9px !important;

        background: #ed1c24 !important;   /* stesso rosso del badge sconto */
        color: #ffffff !important;

        border: 0 !important;
        border-radius: 999px !important;

        box-shadow: none !important;


        white-space: nowrap !important;
    }

    html[lang^="en"]
    .product-view
    .moto-compat.moto-compat-warning
    .moto-compat-content::after {
        content: "× NOT COMPATIBLE" !important;
    }


    /* ---------------------------------------------------------
       CAMBIA MOTO
       Sta accanto alla pill.
       Se non entra, va a capo SOLO LUI, dentro la colonna testo.
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-change {
        order: 3 !important;

        flex:
            0
            0
            auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #444444 !important;


        white-space: nowrap !important;
    }


    /* ---------------------------------------------------------
       ACCORDION
       --------------------------------------------------------- */
    .product-view .moto-compat .moto-compat-other {
        margin: 0 !important;

        padding:
            0
            14px !important;

        border-top:
            1px solid rgba(0, 0, 0, 0.08) !important;
    }

    .product-view .moto-compat .moto-compat-toggle {
        min-height: 50px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
    }
}


/* =========================================================
   13B. NESSUNA MOTO SELEZIONATA
   Se il blocco "moto corrente" non esiste, l'accordion è il
   primo contenuto della card: il separatore superiore non serve.

   Questa regola modifica SOLO il componente compatibilità.
   ========================================================= */

.product-view
.moto-compat:not(:has(.moto-compat-current))
.moto-compat-other,

.product-view
.moto-compat
> .moto-compat-other:first-child {
    border-top: 0 !important;
}

/* =========================================================
   14. ACCESSIBILITÀ
   Non è una regola di layout.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .product-view .moto-compat *,
    .product-view .moto-compat *::before,
    .product-view .moto-compat *::after {
        transition: none !important;
    }
}


/* =====================================================================
   SCHEDA PRODOTTO
   V4.1: rimosso il modulo 15 (riordino della descrizione sotto 992px).
   CSS ONLY · modulo isolato · in fondo a custom.css
   SOSTITUISCE INTEGRALMENTE il blocco "PDP (SCHEDA PRODOTTO) | V3"
   (e V2, V1). Caricare una sola versione.

   NOVITÀ V4 — ritmo verticale e tipografia (misure prese sul live)
   - Gallery mobile: foto 1:1 invariata; miniature 68px, 8px sotto la
     foto, 18px prima del titolo; una sola navigazione.
   - Ritmo: codice/marca → compatibilità 18px; compatibilità →
     acquisto 20px (22px da 768px); acquisto → "Descrizione" 26px a
     vista; titolo "Descrizione" → contenuto 18px a vista.
   - Descrizione: titolo interno 20px/600 (sotto l'H1), testo 15px
     interlinea 1,6, sottotitoli e liste con spaziature regolari.
   - Micro: padding orizzontale del box compatibilità allineato a
     quello del pannello acquisto (16px mobile / 20px da 768px).

   STORICO V3

   NOVITÀ V3
   - Prezzo pieno barrato SENZA "invece di" (modulo 06): il testo
     "invece di " viene ritagliato visivamente con text-indent in em,
     misurato sul font Inter del sito. Solo pagine in italiano e solo
     prodotti senza varianti/lotti/personalizzazioni (lì lo JS nativo
     riscrive il prezzo pieno come "€ X" e il ritaglio non serve).
   - Bundle (modulo 14): carosello orizzontale di sole foto cliccabili,
     scroll-snap, ultima foto tagliata come segnale di scorrimento.
   - Nessuna moto selezionata (modulo 16): il box spiega che si può
     verificare la compatibilità. Pronto anche per il bottone HTML
     opzionale ".moto-compat-select" (vedi nota nel modulo).
   - Mobile (modulo 17): mini miniature sotto la foto principale al
     posto della barra di avanzamento, solo se le foto sono almeno 2.

   STORICO V2

   NOVITÀ V2 (verificate su: moto compatibile, moto non compatibile +
   bundle, prodotto esaurito, prodotto senza moto)
   - Mobile: la CTA NON è più una barra fissa. Resta nel flusso, sotto
     la quantità, come su desktop (decisione di progetto).
   - Prezzo pieno: il backend scrive "invece di € X". Barrarlo
     barrerebbe anche "invece di": niente barrato, grigio discreto.
   - Esaurito: quantità nascosta dal backend (.is-disponibile.hidden).
     Il cuore va accanto a "Avvisami quando disponibile", che diventa
     un pulsante outline (non si confonde con l'acquisto).
   - Bundle: "Contenuto del pacchetto" esce dal pannello prezzo e va
     sotto la CTA, come card bianca: la CTA non viene più spinta giù.
   - Titolo desktop 28px (titoli bundle molto lunghi).
   - Template nuovo con descrizione sotto la gallery: su desktop niente
     gallery sticky; sotto 992px l'ordine visivo torna gallery →
     acquisto → descrizione (modulo 15). Compatibile anche con il
     template vecchio (descrizione nella colonna destra).

   AMBITO
   - Tutti i selettori partono da .product-view e, dove possibile, da
     .product-view .bgw (colonna acquisto) o .product-view #box_immagini
     (gallery). NON toccano .product-view .prods (carousel "Acquistabile
     nel pacchetto"), header, menu, listing, carrello.
   - Unica eccezione dichiarata: .whatsappbtn.isproduct (classe che il
     tema usa SOLO in scheda prodotto).
   - Breakpoint: solo quelli GIÀ usati dal tema per la scheda
     (767 / 768-991 / 992), sempre dentro selettori .product-view.
   - NON tocca logica di compatibilità, prezzi, disponibilità, IVA,
     PayPal (solo contenitore esterno), quantità, carrello, preferiti.
   - NESSUN container-type sugli antenati di .add_carrello_wrapper.

   MODULI
   00 Token
   01 Contenitore pagina (overflow compatibile con sticky)
   02 Gallery
   03 Titolo e metadati
   04 Box compatibilità moto (ritocchi al modulo esistente)
   05 Area commerciale (pannello grigio chiaro)
   06 Prezzo / prezzo pieno / sconto
   07 PayPal (solo contenitore esterno)
   08 Disponibilità
   09 Quantità + cuore preferiti (+ variante esaurito)
   10 CTA "Aggiungi al carrello" / "Avvisami"
   11 CTA mobile nel flusso (niente barra fissa)
   12 Accordion descrizione e rassicurazioni
   13 Accessibilità / riduzione movimento
   14 Bundle: contenuto del pacchetto sotto la CTA
   15 (rimosso in V4.1: la descrizione resta nella posizione originale)
   16 Nessuna moto selezionata: invito a verificare la compatibilità
   17 Mobile: mini miniature sotto la foto
   18 Micro-rifiniture V4 (allineamenti compatibilità / quantità)
   ===================================================================== */


/* =====================================================================
   00. TOKEN (custom properties locali alla scheda)
   ===================================================================== */

.product-view {
    --asp-pdp-ink: #1f1f1f;
    --asp-pdp-ink-soft: #5f5f5f;
    --asp-pdp-muted: #8a8a8a;
    --asp-pdp-line: #e3e3e3;
    --asp-pdp-panel: #f6f6f6;          /* grigio area commerciale */
    --asp-pdp-red: #e2001a;            /* solo sconto / avvisi */
    --asp-pdp-radius: 12px;
    --asp-pdp-gap: 16px;
    --asp-pdp-control-h: 48px;         /* stepper e cuore */
    --asp-pdp-cta-h: 56px;             /* CTA in pagina */
}


/* =====================================================================
   01. CONTENITORE
   Il tema usa overflow:hidden su .product-view: rende il blocco un
   "scroll container" e impedisce a position:sticky di funzionare.
   overflow:clip ritaglia allo stesso modo ma non crea scroll container;
   flow-root conserva il block formatting context di overflow:hidden.
   I browser senza overflow:clip ignorano la riga e restano su hidden.
   Applicato solo da 992px, dove serve la gallery sticky.
   ===================================================================== */

@media only screen and (min-width: 992px) {
    .product-view {
        overflow: hidden;
        overflow: clip;
        display: flow-root;
    }
}

/* Mobile: tra header e foto c'erano 20px, più dello spazio tra la
   barra di ricerca e la fine dell'header (12px). Ora sono uguali. */
@media only screen and (max-width: 767px) {
    .product-view {
        padding-top: 12px;
    }
}


/* =====================================================================
   02. GALLERY
   - stage bianco, niente ombre;
   - frecce: da riquadri grigi a cerchi bianchi discreti (solo desktop,
     il tema le nasconde già sotto 768px);
   - miniature 72px con stato attivo a contorno;
   - tablet 768-991: la gallery a tutta larghezza arrivava a ~620px,
     la limitiamo e la centriamo;
   - desktop: gallery sticky mentre si legge la colonna destra, SOLO se
     la descrizione non sta sotto la gallery (template nuovo: la
     descrizione è nella colonna sinistra → niente sticky, altrimenti
     la gallery coprirebbe il testo).
   ===================================================================== */

.product-view #box_immagini .product-gallery {
    gap: 16px;
    margin-bottom: 24px;
}

.product-view #box_immagini .gallery-main,
.product-view #box_immagini .gallery-main .swiper-slide,
.product-view #box_immagini .gallery-main img {
    background: #ffffff;
}

.product-view #box_immagini .gallery-main img {
    border-radius: 0;
    box-shadow: none;
}

/* Le foto che riempiono tutto il riquadro (dettagli, primi piani)
   avevano gli angoli vivi: stesso raggio dei box della scheda. Il
   raggio sta sul riquadro, che ritaglia già le foto. */
.product-view #box_immagini .gallery-main {
    border-radius: var(--asp-pdp-radius);
}

/* Sul bordo destro compariva un filo della foto successiva: le foto
   sono affiancate senza spazio e, con lo zoom di Windows (125%), il
   punto di giunzione non cade su un pixel intero. Le foto NON attive
   vengono ritagliate di 1px per lato: quella in vista resta intera. */
.product-view #box_immagini .gallery-main .swiper-slide:not(.swiper-slide-active) {
    clip-path: inset(0 1px);
}

.product-view #box_immagini .gallery-button-prev,
.product-view #box_immagini .gallery-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 1px solid var(--asp-pdp-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--asp-pdp-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: opacity 160ms ease, border-color 160ms ease;
}

.product-view #box_immagini .gallery-button-prev:hover,
.product-view #box_immagini .gallery-button-next:hover {
    border-color: var(--asp-pdp-ink);
}

.product-view #box_immagini .gallery-button-prev.swiper-button-disabled,
.product-view #box_immagini .gallery-button-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.product-view #box_immagini .gallery-thumbs {
    width: 72px;
    flex: 0 0 72px;
    height: auto;
    max-height: 246px; /* 3 x 72 + 2 x 15 */
}

.product-view #box_immagini .gallery-thumbs .swiper-slide {
    width: 72px;
    height: 72px !important; /* il tema lo forza a 88px con !important */
    opacity: 1;
}

.product-view #box_immagini .gallery-thumbs img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--asp-pdp-line);
    border-radius: 8px;
    transition: border-color 160ms ease;
}

.product-view #box_immagini .gallery-thumbs .swiper-slide-thumb-active img {
    border-color: var(--asp-pdp-ink);
    box-shadow: inset 0 0 0 1px var(--asp-pdp-ink);
}

.product-view #box_immagini .gallery-main {
    max-width: calc(100% - 88px); /* 72px miniature + 16px gap */
}

@media only screen and (max-width: 767px) {
    .product-view #box_immagini .gallery-main {
        max-width: 100%;
    }

    .product-view #box_immagini .product-gallery {
        margin-bottom: 16px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .product-view #box_immagini .product-gallery {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 992px) {
    .product-view .row-eq-height-md > [class*="col-md-7"]:not(:has(> .wrapper-tabs)) > .image-block {
        position: -webkit-sticky;
        position: sticky;
        top: 24px;
    }
}


/* =====================================================================
   02B. COLONNA ACQUISTO MENTRE SI SCORRE (da 992px)
   Nel tema la colonna destra è tenuta ferma da uno script (sticky-kit)
   che la sposta DOPO ogni scorrimento: per questo "rimbalzava" contro
   l'header. Qui la tiene ferma il browser stesso (position: sticky),
   che lavora insieme allo scorrimento e non ha scatti. Le posizioni
   che lo script scrive sull'elemento vengono ignorate.

   DOVE SI FERMA
   A. La colonna entra tutta e sotto avanza spazio: resta alla distanza
      dall'header che ha all'apertura della pagina (64,5px). Si blocca
      nello stesso istante dell'header e non si muove più.
   B. Entra tutta ma sotto resterebbe meno spazio che sopra: sale
      insieme alla pagina finché è al centro tra header e fondo
      schermo, poi si ferma.
   C. È più alta dello schermo: sale insieme alla pagina finché
      l'ultima riga è a 24px dal fondo dello schermo, poi si ferma
      (prezzo e pulsante restano visibili; il titolo si rivede
      tornando in cima).

   COME
   - "top" fissa il caso A.
   - Per B e C la colonna deve salire ancora un po': --asp-pdp-scrolled
     conta i pixel scorsi da quando l'header si è bloccato (42px =
     altezza della barra nera) e "translate" la fa salire di altrettanto,
     ma non oltre la posizione finale. Il 50% e il 100% dentro
     "translate" sono metà e tutta l'altezza della colonna: è così
     che il CSS sa se entra nello schermo.
   Misure: header 81px fino a 1199px, 123px da 1200px.

   Serve "animation-timeline" (Chrome, Edge, Safari 26). Negli altri
   browser tutto il blocco è ignorato e resta lo script del tema.
   ===================================================================== */

@property --asp-pdp-scrolled {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* distanza del fondo della colonna destra (il contenitore) dal bordo
   alto dello schermo: serve solo a fine descrizione */
@property --asp-pdp-row-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 100000px;
}

@media only screen and (min-width: 992px) {

    .product-view {
        --asp-pdp-header-h: 81px;
        /* distanza header → colonna all'apertura (64,5px misurati),
           arrotondata perché header + distanza sia multiplo di 4px:
           4px sono pixel interi anche con lo zoom di Windows al 125,
           150 e 175%. Su mezzo pixel i bordi sottili del box moto
           sparivano a tratti. */
        --asp-pdp-stick-gap: 63px;       /* 81 + 63 = 144 */
    }
}

@media only screen and (min-width: 1200px) {

    .product-view {
        --asp-pdp-header-h: 123px;
        --asp-pdp-stick-gap: 65px;       /* 123 + 65 = 188 */
    }
}

@supports (animation-timeline: scroll()) {

    @media only screen and (min-width: 992px) {

        .product-view .sticky-col {
            /* metà dello spazio che avanza: positivo = entra nello schermo */
            --asp-pdp-spare: calc((100vh - var(--asp-pdp-header-h)) / 2 - 50%);

            /* distanza finale dall'header: il centro (B) oppure, se la
               colonna non entra, fondo a 24px dal bordo (C) */
            --asp-pdp-rest: calc(min(var(--asp-pdp-spare), 2 * var(--asp-pdp-spare)) - clamp(0px, -4 * var(--asp-pdp-spare), 24px));

            position: -webkit-sticky !important;
            position: sticky !important;
            top: calc(var(--asp-pdp-header-h) + var(--asp-pdp-stick-gap)) !important;
            bottom: auto !important;
            width: auto !important;

            /* FINE CORSA. Quando la descrizione finisce, il browser spinge
               in su la colonna insieme al suo contenitore. Nei casi B e C
               la colonna è già stata alzata da "translate", quindi
               partirebbe in anticipo e si fermerebbe prima del fondo.
               Di quanto il browser l'ha spinta (--asp-pdp-pushed), di
               tanto si riduce l'alzata: resta ferma finché il fondo del
               contenitore la raggiunge, poi scende fino in fondo con lui. */
            --asp-pdp-pushed: max(0px, calc(var(--asp-pdp-header-h) + var(--asp-pdp-stick-gap) + 100% + 14px - var(--asp-pdp-row-end)));
            margin-bottom: 14px;         /* valore del tema, fissato perché entra nel calcolo qui sopra */

            /* di quanto la colonna sale prima di fermarsi (casi B e C) */
            --asp-pdp-rise: min(0px, calc(var(--asp-pdp-rest) - var(--asp-pdp-stick-gap)));

            translate: 0 min(0px, calc(max(calc(-1 * var(--asp-pdp-scrolled)), var(--asp-pdp-rise)) + var(--asp-pdp-pushed)));

            animation: asp-pdp-scrolled linear both, asp-pdp-row-end linear both;
            animation-timeline: scroll(root block), --asp-pdp-buy-col;
            /* seconda misura: dal momento in cui il fondo del contenitore
               tocca il bordo basso (allargato di 3000px) a quando tocca
               il bordo alto dello schermo */
            animation-range: 42px 3042px, entry-crossing 100% cover 100%;
        }

        /* il contenitore della colonna fa da riferimento per il fine
           corsa; il margine negativo fa partire la misura 3000px prima
           che il suo fondo entri nello schermo */
        .product-view .row-eq-height-md > [class*="col-md-5"]:has(> .sticky-col) {
            view-timeline-name: --asp-pdp-buy-col;
            view-timeline-axis: block;
            view-timeline-inset: 0px -3000px;
        }

        /* stessa salita, fermata su un multiplo di 4px (pixel interi) */
        @supports (top: round(nearest, 1px, 4px)) {

            .product-view .sticky-col {
                --asp-pdp-rise: round(nearest, min(0px, calc(var(--asp-pdp-rest) - var(--asp-pdp-stick-gap))), 4px);
            }
        }

        /* segnaposto che lo script inserisce quando "fissa" la colonna:
           qui la colonna resta nel flusso, il segnaposto la raddoppierebbe */
        .product-view .sticky-col + div[style*="float: none"] {
            display: none !important;
        }
    }

    @keyframes asp-pdp-scrolled {
        from {
            --asp-pdp-scrolled: 0px;
        }
        to {
            --asp-pdp-scrolled: 3000px;
        }
    }

    @keyframes asp-pdp-row-end {
        from {
            --asp-pdp-row-end: calc(100vh + 3000px);
        }
        to {
            --asp-pdp-row-end: 0px;
        }
    }
}


/* =====================================================================
   03. TITOLO E METADATI
   Il titolo desktop a 36/40px andava su 3 righe e spingeva il prezzo
   sotto la piega. Gerarchia: titolo > prezzo > tutto il resto.
   ===================================================================== */

.product-view .bgw .originalp {
    margin-bottom: 12px;
    padding: 4px 10px;
}

.product-view .bgw h1.ptitle {
    margin: 0 0 10px;
    text-wrap: balance;
}


.product-view .bgw ul.det {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin: 0 0 18px;
    color: var(--asp-pdp-ink-soft);
}

.product-view .bgw ul.det span {
    color: var(--asp-pdp-muted);
}


/* =====================================================================
   04. BOX COMPATIBILITÀ MOTO — RITOCCHI
   Il modulo esistente in custom.css resta la base. Qui:
   - spaziatura coerente con il pannello commerciale che segue;
   - due grigi sovrapposti (box moto + pannello) creano rumore:
     il box moto diventa bianco con bordo, la foto su grigio chiaro;
   - lista modelli: il tema impone columns:2 + bordo superiore; in una
     colonna da ~430px i nomi lunghi vanno a capo male → 1 colonna,
     2 colonne solo quando il box è largo (tablet).
   NB: la versione "moto selezionata" va verificata su HTML reale.
   ===================================================================== */

.product-view .moto-compat {
    margin: 0 0 20px;
    background: #ffffff;
    border: 1px solid var(--asp-pdp-line);
    box-shadow: none;
}

/* MOTO SELEZIONATA: niente riquadro grigio con la miniatura.
   La foto entra dal bordo sinistro del box, ingrandita e tagliata a
   metà: si vede la parte anteriore, col muso verso destra (le foto dei
   modelli hanno il muso a destra e fondo bianco, come il box).
   La colonna della foto è una "finestra" alta quanto il box (i margini
   negativi annullano il padding del blocco) che taglia l'immagine.
   NB: il file servito è 80x80px; qui è mostrato a 132px, quindi su
   schermi ad alta densità è meno nitido. Per la piena qualità serve da
   Daisuke una miniatura da almeno 264px. */
.product-view .moto-compat .moto-compat-current {
    --asp-pdp-bike-window: 84px;
    --asp-pdp-bike-size: 132px;
}

.product-view .moto-compat .moto-compat-current:has(> .moto-compat-image) {
    grid-template-columns: calc(var(--asp-pdp-bike-window) - 20px) minmax(0, 1fr) max-content !important;
}

@container asp-pdp-compat (max-width: 500px) {
    .product-view .moto-compat .moto-compat-current:has(> .moto-compat-image) {
        grid-template-columns: calc(var(--asp-pdp-bike-window) - 20px) minmax(0, 1fr) !important;
    }
}

.product-view .moto-compat .moto-compat-image {
    position: relative !important;
    align-self: stretch !important;
    width: var(--asp-pdp-bike-window) !important;
    min-width: var(--asp-pdp-bike-window) !important;
    height: auto !important;
    min-height: 72px !important;
    /* a sinistra la foto è a filo del box (entra dal bordo); sopra e
       sotto resta 2px dentro, per non coprire il bordo grigio (la foto
       ha il fondo bianco: il rientro non si vede) */
    margin: -12px 0 -12px -20px !important;
    padding: 0 !important;
    /* l'angolo in alto a sinistra segue la curva del box (raggio 12px,
       bordo 1px), un pixel più stretto: la foto non tocca la curva */
    border-radius: 10px 0 0 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.product-view .moto-compat .moto-compat-image img {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: var(--asp-pdp-bike-size) !important;
    height: var(--asp-pdp-bike-size) !important;
    max-width: none !important;
    /* centrata con un margine, non con "transform": con transform il
       browser disegna la foto su un livello a parte, che dopo lo
       scorrimento poteva finire spostato di un pixel sopra il bordo */
    margin-top: calc(var(--asp-pdp-bike-size) / -2) !important;
    transform: none !important;
    object-fit: contain !important;
}

@media only screen and (max-width: 767px) {
    .product-view .moto-compat .moto-compat-image {
        margin-left: -16px !important;      /* su mobile il padding laterale è 16px */
    }
}

.product-view .moto-compat .moto-compat-list {
    columns: 1;
    border-top: 0;
}

@container asp-pdp-compat (min-width: 560px) {
    .product-view .moto-compat .moto-compat-list {
        columns: 2;
        column-gap: 24px;
    }
}


/* =====================================================================
   05. AREA COMMERCIALE — PANNELLO GRIGIO CHIARO
   Nel DOM non esiste un contenitore unico per prezzo → CTA: sono
   fratelli dentro .bgw > .wrapper. Il pannello è quindi composto
   colorando i fratelli contigui, da .price fino al blocco .btns
   (escluse descrizione, rassicurazioni, script).
   Margini verticali azzerati: lo spazio interno è padding, così il
   grigio resta continuo.
   ===================================================================== */

.product-view .bgw > .wrapper > .price,
.product-view .bgw > .wrapper > .price ~ :not(.wrapper-tabs):not(.bannersdx):not(script):not(style):not(.wrapper-tabs ~ *):not(.bundle-box):not(.title) {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    background: var(--asp-pdp-panel);
}

.product-view .bgw > .wrapper > .price {
    padding-top: 20px;
    border-radius: var(--asp-pdp-radius) var(--asp-pdp-radius) 0 0;
}

/* Ultimo elemento del pannello: la riga che contiene .btns */
.product-view .bgw > .wrapper > .row:has(.btns) {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 20px;
    border-radius: 0 0 var(--asp-pdp-radius) var(--asp-pdp-radius);
}

.product-view .bgw > .wrapper > .row:has(.btns) > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

@media only screen and (max-width: 767px) {
    .product-view .bgw > .wrapper > .price,
    .product-view .bgw > .wrapper > .price ~ :not(.wrapper-tabs):not(.bannersdx):not(script):not(style):not(.wrapper-tabs ~ *):not(.bundle-box):not(.title) {
        padding-left: 16px;
        padding-right: 16px;
    }

    .product-view .bgw > .wrapper > .price {
        padding-top: 16px;
    }

    .product-view .bgw > .wrapper > .row:has(.btns) {
        padding-bottom: 16px;
    }
}


/* =====================================================================
   06. PREZZO
   - prezzo attuale, prezzo pieno barrato e % sconto su UNA riga con
     allineamento di base comune (il wrapper .row-eq-height diventa
     trasparente al layout con display:contents);
   - il prezzo pieno arriva come "invece di € X". V3: barrato e senza
     "invece di" (ritaglio visivo, il testo resta nel DOM e per i
     lettori di schermo). Vedi blocco "RITAGLIO" qui sotto;
   - prezzo in nero: il rosso resta riservato allo sconto. Un prezzo
     sempre rosso comunica "saldo" anche quando non c'è sconto.
   Visibilità di pieno/sconto: invariata, la gestisce lo JS nativo.
   ===================================================================== */

.product-view .bgw .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    width: 100%;
    row-gap: 6px;
}

.product-view .bgw .price > .row-eq-height {
    display: contents;
}

.product-view .bgw .price .prezzo {
    order: 1;
    color: var(--asp-pdp-ink);
    white-space: nowrap;
}

.product-view .bgw .price .prezzo-pieno {
    order: 2;
    color: var(--asp-pdp-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

/* RITAGLIO "invece di "
   Larghezza di "invece di " in Inter 400 = 4,515em (misurata sul sito
   live il 09/10/2026). text-indent negativo + overflow:hidden la
   nasconde; la larghezza dell'inline-block si riduce da sola alla
   parte visibile (verificato in Chrome sul sito live).
   Condizioni:
   - html lang="it" (in altre lingue la dicitura è diversa);
   - nessun selettore varianti/lotti/personalizzazione nella scheda:
     in quei casi lo JS scrive "€ X" e il ritaglio mangerebbe cifre. */
html[lang="it"] .product-view:not(:has(#p_variante1, #p_variante2, #comb_var1, #comb_var2, #p_lotto, .persvalue, .csel_var1, .csel_var2)) .bgw .price .prezzo-pieno {
    display: inline-block;
    overflow: hidden;
    vertical-align: baseline;
    text-indent: -4.52em;
}

.product-view .bgw .price .percsconto {
    order: 3;
    align-self: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: #ed1c24;
    color: #ffffff;
    white-space: nowrap;
}


/* =====================================================================
   07. PAYPAL — SOLO CONTENITORE ESTERNO
   Il contenuto è un iframe PayPal: non si stila. Solo spaziatura.
   ===================================================================== */

.product-view .bgw > .wrapper > [data-pp-message] {
    padding-top: 8px;
    min-height: 0;
}


/* =====================================================================
   08. DISPONIBILITÀ
   Colore e testo arrivano dal backend (inline): non li tocchiamo.
   Sostituiamo solo il pallino Font Awesome con un punto CSS che usa
   currentColor (nessuna dipendenza dal font icone).
   ===================================================================== */

.product-view .bgw #comb_disp {
    padding-top: 14px;
}

.product-view .bgw #comb_disp:empty {
    padding-top: 0;
}

.product-view .bgw #comb_disp span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.product-view .bgw #comb_disp span::before {
    content: "";
    position: static;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}


/* =====================================================================
   09. QUANTITÀ + CUORE PREFERITI
   - stepper compatto 48px;
   - etichetta "quantità" nascosta solo a vista: il <label> resta nel
     DOM, collegato al campo, e viene letto dai lettori di schermo;
   - il bottone preferiti perde il testo visivo (resta nel DOM, quindi
     resta il nome accessibile) e diventa un cuore 48x48 allineato a
     destra della riga quantità. È posizionato in assoluto dentro .btns
     perché nel DOM sta sotto la CTA: la distanza è fissa e controllata
     da questo file (padding-bottom della riga quantità).
   - Guardia: il cuore va accanto alla quantità SOLO se la quantità è
     visibile (.is-disponibile senza .hidden). Prodotto esaurito: il
     backend nasconde la quantità → il cuore si affianca ad "Avvisami".
   ===================================================================== */

.product-view .bgw .quantita {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 0 16px;
}

.product-view .bgw .quantita label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.product-view .bgw .quantita .input-group {
    display: inline-flex;
    width: auto;
    height: var(--asp-pdp-control-h);
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.product-view .bgw .quantita .input-group button {
    float: none;
    width: 44px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.product-view .bgw .quantita .input-group button:hover {
    background: #f2f2f2;
}


.product-view .bgw .quantita .form-control.quant {
    width: 48px;
    height: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
    text-align: center;
}

.product-view .bgw .quantita .q_add {
    margin-left: 0;
}

/* Riga quantità con spazio a destra per il cuore */
.product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita {
    padding-right: calc(var(--asp-pdp-control-h) + 12px);
}

.product-view .bgw .btns {
    position: relative;
}

.product-view .bgw .btns > .row {
    margin-left: 0;
    margin-right: 0;
}

.product-view .bgw .btns > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .btns > .row > .col-xs-12:has(> .add_topref) {
    position: absolute;
    right: 0;
    top: calc(-1 * (var(--asp-pdp-control-h) + 16px)); /* = altezza stepper + padding-bottom riga quantità */
    width: auto;
}

.product-view .bgw .btns .add_topref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--asp-pdp-control-h);
    height: var(--asp-pdp-control-h);
    margin: 0;
    padding: 0;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #ffffff;
    color: var(--asp-pdp-ink);
    transition: border-color 160ms ease, color 160ms ease;
}

.product-view .bgw .btns .add_topref > i {
    margin: 0;
}

.product-view .bgw .btns .add_topref:hover {
    border-color: var(--asp-pdp-ink);
    color: var(--asp-pdp-red);
}

.product-view .bgw .btns .add_topref:focus-visible {
    outline: 2px solid var(--asp-pdp-ink);
    outline-offset: 2px;
}


/* Variante SENZA quantità visibile (es. esaurito):
   [ Avvisami quando disponibile ][ ♥ ] sulla stessa riga. */
.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row::before,
.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row::after {
    display: none;
}

.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row > .col-sm-12 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns > .row > .col-xs-12:has(> .add_topref) {
    flex: 0 0 auto;
    width: auto;
}

.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) .btns .add_topref {
    width: var(--asp-pdp-cta-h);
    height: var(--asp-pdp-cta-h);
}

/* Senza quantità il pannello ha bisogno di aria sopra i pulsanti */
.product-view .bgw > .wrapper:not(:has(> .is-disponibile:not(.hidden) .quantita)) > .row:has(.btns) {
    padding-top: 16px;
}


/* =====================================================================
   10. CTA "AGGIUNGI AL CARRELLO"
   Resta il pulsante dominante: nero pieno, a tutta larghezza.
   Più compatto del nativo (68px → 56px) ma con contrasto massimo.
   ===================================================================== */

.product-view .bgw .btns .btn {
    margin-bottom: 0;
}

.product-view .bgw #add_carrello {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--asp-pdp-cta-h);
    height: auto;
    padding: 0 20px;
    border-radius: 10px;
    transition: background-color 160ms ease;
}

.product-view .bgw #add_carrello:hover {
    background: #000000;
}

.product-view .bgw #add_carrello:focus-visible {
    outline: 3px solid var(--asp-pdp-red);
    outline-offset: 2px;
}

/* "Avvisami quando disponibile": azione unica ma NON d'acquisto →
   outline scuro su bianco, stessa altezza della CTA. */
.product-view .bgw #popupformpnd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--asp-pdp-cta-h);
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid var(--asp-pdp-ink);
    border-radius: 10px;
    background: #ffffff;
    color: var(--asp-pdp-ink);
    white-space: normal;
}

.product-view .bgw #popupformpnd:hover {
    background: var(--asp-pdp-ink);
    color: #ffffff;
}

.product-view .bgw #popupformpnd.hidden {
    display: none;
}


/* =====================================================================
   11. CTA MOBILE NEL FLUSSO (≤767px)
   Il tema rende .add_carrello_wrapper una barra fissa in basso, sempre
   visibile. Decisione V2: niente barra, la CTA resta sotto la quantità
   come su desktop. WhatsApp torna alla posizione standard del tema.
   ===================================================================== */

@media only screen and (max-width: 767px) {
    .product-view .bgw .add_carrello_wrapper {
        position: static;
        padding: 0;
        background: transparent;
        box-shadow: none;
        z-index: auto;
    }

    .product-view .bgw .add_carrello_wrapper #add_carrello {
        min-height: var(--asp-pdp-cta-h);
        padding: 0 16px !important; /* il tema forza padding:10px !important */
    }

    .whatsappbtn.isproduct {
        bottom: 10px;
    }
}


/* =====================================================================
   12. ACCORDION DESCRIZIONE E RASSICURAZIONI
   Meno aria morta tra intestazione e testo, titoli accordion in
   sentence-case, rassicurazioni più vicine al blocco acquisto.
   ===================================================================== */

/* V4: pannello acquisto → testo "Descrizione" = 14 + 12 = 26px;
   "Descrizione" → primo testo ≈ 18-19px a vista (misurato sul live).
   Il tema annulla i bordi dell'intestazione (nessuna linea extra). */
.product-view .row-eq-height-md .wrapper-tabs {
    margin-top: 14px;
}

.product-view .row-eq-height-md .wrapper-tabs .ui-accordion-header {
    margin: 0;
    padding: 12px 0;
}

/* Intestazioni successive (es. "Richiedi informazioni"): stesso ritmo */
.product-view .row-eq-height-md .wrapper-tabs .ui-accordion-header ~ .ui-accordion-header {
    margin-top: 4px;
    padding-top: 16px;
}

.product-view .row-eq-height-md .wrapper-tabs .ui-accordion-content {
    padding: 4px 0 24px !important; /* il tema forza 1.8em 0 !important ≤991 */
}

/* TIPOGRAFIA DEL TESTO DESCRITTIVO
   Solo presentazione: contenuti invariati. Il titolo interno (spesso
   il nome prodotto) resta subordinato all'H1 della scheda. */
.product-view .row-eq-height-md .wrapper-tabs .txt {
    color: #333333;
    overflow-wrap: break-word;
}

.product-view .row-eq-height-md .wrapper-tabs .txt > :first-child {
    margin-top: 0;
}

.product-view .row-eq-height-md .wrapper-tabs .txt h1,
.product-view .row-eq-height-md .wrapper-tabs .txt h2 {
    margin: 22px 0 10px;
    color: var(--asp-pdp-ink);
}

.product-view .row-eq-height-md .wrapper-tabs .txt h3 {
    margin: 20px 0 8px;
    color: var(--asp-pdp-ink);
}

.product-view .row-eq-height-md .wrapper-tabs .txt h4,
.product-view .row-eq-height-md .wrapper-tabs .txt h5 {
    margin: 18px 0 6px;
    color: var(--asp-pdp-ink);
}

.product-view .row-eq-height-md .wrapper-tabs .txt :is(h1, h2, h3, h4, h5) + :is(h3, h4, h5) {
    margin-top: 8px;
}

.product-view .row-eq-height-md .wrapper-tabs .txt p {
    margin: 0 0 12px;
}

.product-view .row-eq-height-md .wrapper-tabs .txt strong,
.product-view .row-eq-height-md .wrapper-tabs .txt b {
    color: var(--asp-pdp-ink);
}

.product-view .row-eq-height-md .wrapper-tabs .txt ul,
.product-view .row-eq-height-md .wrapper-tabs .txt ol {
    margin: 6px 0 14px;
    padding-left: 20px;
}

.product-view .row-eq-height-md .wrapper-tabs .txt li {
    margin: 0 0 4px;
    padding-left: 2px;
}

.product-view .row-eq-height-md .wrapper-tabs .txt a {
    color: var(--asp-pdp-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-view .bgw .bannersdx ul {
    margin: 20px 0 0;
}

.product-view .bgw .bannersdx li {
    color: var(--asp-pdp-ink-soft);
}

.product-view .bgw .bannersdx li + li {
    margin-top: 8px;
}


/* =====================================================================
   13. ACCESSIBILITÀ
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .product-view #box_immagini *,
    .product-view .bgw * {
        transition: none !important;
    }
}


/* =====================================================================
   14. BUNDLE — "CONTENUTO DEL PACCHETTO" SOTTO LA CTA
   Nel DOM il contenuto del pacchetto sta tra prezzo e quantità: spinge
   la CTA molto in basso e spezza il pannello prezzo. Solo quando il
   bundle esiste (:has), la colonna diventa flex verticale e titolo +
   box vengono riordinati SOTTO il pannello (order). Il DOM non cambia.
   ===================================================================== */

.product-view .bgw > .wrapper:has(> .bundle-box) {
    display: flex;
    flex-direction: column;
}

.product-view .bgw > .wrapper:has(> .bundle-box) > * {
    order: 0;
    min-width: 0;
}

.product-view .bgw > .wrapper:has(> .bundle-box) > .originalp {
    align-self: flex-start;
}

.product-view .bgw > .wrapper:has(> .bundle-box) > .title.ptitle,
.product-view .bgw > .wrapper:has(> .bundle-box) > .bundle-box {
    order: 1;
}

.product-view .bgw > .wrapper:has(> .bundle-box) > .wrapper-tabs,
.product-view .bgw > .wrapper:has(> .bundle-box) > .bannersdx {
    order: 2;
}

.product-view .bgw > .wrapper > .bundle-box ~ .title.ptitle,
.product-view .bgw > .wrapper > .title.ptitle:has(+ .bundle-box) {
    margin: 24px 0 10px;
    padding: 0;
    color: var(--asp-pdp-ink-soft);
}

/* V3: carosello orizzontale di sole foto cliccabili.
   - scroll nativo con scroll-snap (niente JS);
   - testi, codice, prezzo e "Più informazioni" nascosti solo alla
     vista: il link della foto resta (title + alt con il nome);
   - il prezzo dei componenti è un nodo di testo senza tag: lo
     azzera font-size:0 sul contenitore;
   - padding-right sul binario: l'ultima foto parzialmente visibile
     segnala che si può scorrere (Baymard). */
.product-view .bgw > .wrapper > .bundle-box {
    display: flex;
    gap: 10px;
    max-height: none;
    margin: 0;
    padding: 2px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf transparent;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.product-view .bgw > .wrapper > .bundle-box::-webkit-scrollbar {
    height: 4px;
}

.product-view .bgw > .wrapper > .bundle-box::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 4px;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-box-prod {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    scroll-snap-align: start;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-box-prod + .bundle-box-prod {
    margin-top: 0;
    border-top: 0;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-box-prod > :not(.bundle-prod-thumb) {
    display: none;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb {
    float: none;
    width: 88px;
    height: 88px;
    margin: 0;
    border: 1px solid var(--asp-pdp-line);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 160ms ease;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb:hover {
    border-color: var(--asp-pdp-ink);
}

.product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb a:focus-visible {
    outline: 2px solid var(--asp-pdp-ink);
    outline-offset: -2px;
}

@media only screen and (max-width: 767px) {
    .product-view .bgw > .wrapper > .bundle-box .bundle-prod-thumb {
        width: 80px;
        height: 80px;
    }
}


/* =====================================================================
   16. NESSUNA MOTO SELEZIONATA — INVITO A VERIFICARE
   Senza moto il box mostrava solo "Modelli compatibili": non si capiva
   che si può verificare la compatibilità. Qui il box diventa un invito.

   LIMITE CSS: il pulsante che apre il selettore moto esiste solo
   nell'header. Il CSS non può creare un pulsante cliccabile, quindi il
   testo rimanda all'icona moto in alto.

   OPZIONE CONSIGLIATA (1 riga HTML nel template Daisuke, nessun JS):
   nel ramo "nessuna moto" del box, prima di .moto-compat-other:
     <button type="button" class="moto-compat-select"
             data-toggle="modal" data-target="#modal_bikesearch">
       Seleziona la tua moto
     </button>
   È lo stesso meccanismo Bootstrap già usato da "Cambia moto". Se il
   bottone c'è, il testo "dall'icona in alto" sparisce e compare lui.
   ===================================================================== */

.product-view .moto-compat:not(:has(.moto-compat-current))::before {
    content: "Si adatta alla tua moto?";
    display: block;
    padding: 16px 16px 2px 52px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='16.5' r='3.5'/%3E%3Ccircle cx='18.5' cy='16.5' r='3.5'/%3E%3Cpath d='M5.5 16.5 9 10h5l2.5 6.5'/%3E%3Cpath d='M14 10l1.5-3H18'/%3E%3Cpath d='M9 10 7.5 7H5'/%3E%3C/svg%3E")
        16px 15px / 24px 24px no-repeat;
    color: var(--asp-pdp-ink);
}

.product-view .moto-compat:not(:has(.moto-compat-current))::after {
    content: "Seleziona la tua moto dall\2019 icona in alto: ti diremo subito se questo ricambio è compatibile.";
    display: block;
    order: 2;
    padding: 0 16px 14px 52px;
    color: var(--asp-pdp-ink-soft);
}

html[lang^="en"] .product-view .moto-compat:not(:has(.moto-compat-current))::before {
    content: "Does it fit your bike?";
}

html[lang^="en"] .product-view .moto-compat:not(:has(.moto-compat-current))::after {
    content: "Select your bike from the bike icon at the top: we\2019 ll tell you right away if this part fits.";
}

/* Il box diventa una colonna: titolo, testo, (bottone), lista modelli */
.product-view .moto-compat:not(:has(.moto-compat-current)) {
    display: flex;
    flex-direction: column;
}

.product-view .moto-compat:not(:has(.moto-compat-current)) > .moto-compat-select {
    order: 3;
}

.product-view .moto-compat:not(:has(.moto-compat-current)) > .moto-compat-other {
    order: 4;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Con il bottone HTML presente: testo più corto, niente rimando all'header */
.product-view .moto-compat:has(> .moto-compat-select)::after {
    content: "Ti diremo subito se questo ricambio è compatibile.";
    padding-bottom: 10px;
}

html[lang^="en"] .product-view .moto-compat:has(> .moto-compat-select)::after {
    content: "We\2019 ll tell you right away if this part fits.";
}

.product-view .moto-compat > .moto-compat-select {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 16px 16px 52px;
    padding: 0 18px;
    border: 1.5px solid var(--asp-pdp-ink);
    border-radius: 10px;
    background: #ffffff;
    color: var(--asp-pdp-ink);
    cursor: pointer;
}

.product-view .moto-compat > .moto-compat-select::after {
    content: "→";
}

.product-view .moto-compat > .moto-compat-select:hover {
    background: var(--asp-pdp-ink);
    color: #ffffff;
}


/* =====================================================================
   17. MOBILE — MINI MINIATURE SOTTO LA FOTO
   Baymard: sul mobile le miniature fanno capire quante foto ci sono e
   cosa mostrano, e danno meno tocchi sbagliati dei puntini. Il tema
   nasconde le miniature sotto 768px (stile inline via JS): qui le
   mostriamo in riga sotto la foto, solo se le foto sono almeno 2, e
   togliamo la barra di avanzamento che diventa ridondante.
   Il click resta quello nativo di Swiper (thumbs).
   ===================================================================== */

@media only screen and (max-width: 767px) {
    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 0;
    }

    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) .gallery-main {
        order: 1;
        width: 100%;
    }

    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) .gallery-thumbs {
        display: block !important; /* il tema la nasconde con style inline via JS */
        order: 2;
        flex: none;
        width: 100%;
        height: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) .gallery-thumbs::-webkit-scrollbar {
        display: none;
    }

    .product-view #box_immagini .gallery-thumbs .swiper-wrapper {
        flex-direction: row !important;
        gap: 8px;
        height: auto !important;
        transform: none !important; /* Swiper verticale scrive translate3d inline */
    }

    .product-view #box_immagini .gallery-thumbs .swiper-slide {
        flex: 0 0 68px;
        width: 68px !important;
        height: 68px !important;
        margin: 0 !important; /* Swiper scrive margin-bottom inline */
        opacity: 1;
    }

    .product-view #box_immagini .gallery-thumbs img {
        width: 68px;
        height: 68px;
        border-radius: 8px;
    }

    /* Miniature → titolo prodotto: 18px (il tema mette 20px sul blocco
       acquisto; la gallery non aggiunge altro margine sotto). */
    .product-view .row-eq-height-md .bgw {
        margin-top: 18px;
    }

    .product-view #box_immagini .product-gallery:has(.gallery-thumbs .swiper-slide:nth-child(2)) .gallery-pagination {
        display: none !important;
    }
}


/* =====================================================================
   18. MICRO-RIFINITURE V4
   Box compatibilità: stesso padding orizzontale del pannello acquisto,
   così foto moto, testi e prezzo partono dalla stessa linea.
   Nessuna riprogettazione: solo allineamenti.
   ===================================================================== */

.product-view .moto-compat .moto-compat-current {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.product-view .moto-compat .moto-compat-other {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.product-view .moto-compat:not(:has(.moto-compat-current))::before {
    padding-left: 52px;
    background-position: 16px 15px;
}

@media only screen and (min-width: 768px) {
    .product-view .moto-compat {
        margin-bottom: 22px;
    }

    .product-view .moto-compat .moto-compat-current,
    .product-view .moto-compat .moto-compat-other {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .product-view .moto-compat:not(:has(.moto-compat-current))::before {
        padding-left: 56px;
        padding-right: 20px;
        background-position: 20px 15px;
    }

    .product-view .moto-compat:not(:has(.moto-compat-current))::after {
        padding-left: 56px;
        padding-right: 20px;
    }

    .product-view .moto-compat > .moto-compat-select {
        margin-left: 56px;
    }
}


/* =====================================================================
   19. AREA ACQUISTO SU UNA RIGA (UX FIX V1, punto 11)
   Larghezza utile del pannello acquisto, misurata:
     768-991px   694px  (colonna unica)
     992-1199px  308px
     1200-1599px 392px
     da 1600px   558px e oltre

   A. QUANTITÀ + CTA + CUORE SULLA STESSA RIGA
      Dove ci stanno: 768-991px e da 1200px. Tra 992 e 1199px (308px)
      e su mobile resta la disposizione su due righe.
      Nel DOM la quantità sta in un blocco che PRECEDE la riga dei
      pulsanti: viene ancorata all'inizio di quella riga, che le lascia
      lo spazio a sinistra (e a destra per il cuore). Stessa tecnica già
      usata dal modulo 09 per il cuore; nessun elemento spostato nel DOM.
      Vale solo se la quantità è visibile (stessa guardia del modulo 09):
      con prodotto esaurito resta [Avvisami][cuore].

   B. DISPONIBILITÀ A DESTRA DEL PREZZO
      Dove c'è spazio per prezzo + prezzo pieno + sconto + disponibilità
      sulla stessa riga: 768-991px e da 1600px. A 1200-1599px (392px) il
      badge sconto andrebbe a capo: lì resta sotto il prezzo.
      La disponibilità è un fratello successivo del prezzo (in mezzo c'è
      PayPal): viene agganciata al prezzo con il posizionamento ad
      ancora CSS. Nei browser che non lo supportano resta dov'è oggi.
      Testo, colore e stato arrivano dal backend e non vengono toccati.
   ===================================================================== */

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 1200px) {

    .product-view {
        --asp-pdp-row-qbtn: 36px;          /* pulsanti - e + */
        --asp-pdp-row-qin: 40px;           /* campo numero */
        --asp-pdp-row-heart: var(--asp-pdp-cta-h);
        --asp-pdp-row-gap: 10px;
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) > .is-disponibile:has(> .quantita) {
        position: relative;
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita {
        position: absolute;
        top: calc(100% + 16px);            /* = padding-top della riga pulsanti */
        left: 20px;                        /* = padding del pannello */
        z-index: 1;
        padding: 0;
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita .input-group {
        height: var(--asp-pdp-cta-h);
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita .input-group button {
        width: var(--asp-pdp-row-qbtn);
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .quantita .form-control.quant {
        width: var(--asp-pdp-row-qin);
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) > .row:has(.btns) {
        padding-top: 16px;
    }

    /* la CTA occupa tutto lo spazio tra quantità e cuore */
    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .btns > .row {
        padding-left: calc(2 * var(--asp-pdp-row-qbtn) + var(--asp-pdp-row-qin) + 2px + var(--asp-pdp-row-gap));
        padding-right: calc(var(--asp-pdp-row-heart) + var(--asp-pdp-row-gap));
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .btns > .row > .col-xs-12:has(> .add_topref) {
        top: 0;
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) .btns .add_topref {
        width: var(--asp-pdp-row-heart);
        height: var(--asp-pdp-cta-h);
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) #add_carrello {
        padding: 0 12px;
        white-space: nowrap;
    }
}

/* 1200-1599px: pannello da 392px. Quantità e cuore più stretti: alla CTA
   restano 231px e "AGGIUNGI AL CARRELLO" (202px in Inter 16px) sta su
   una riga senza ridurre il carattere. */
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {

    .product-view {
        --asp-pdp-row-qbtn: 30px;
        --asp-pdp-row-qin: 34px;
        --asp-pdp-row-heart: 48px;
        --asp-pdp-row-gap: 8px;
    }

    .product-view .bgw > .wrapper:has(> .is-disponibile:not(.hidden) .quantita) #add_carrello {
        padding: 0 8px;
    }
}

@supports (anchor-name: --asp) and (top: anchor(top)) {

    @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 1600px) {

        .product-view .bgw > .wrapper > .price {
            anchor-name: --asp-pdp-price;
            padding-right: 200px;          /* 20px del pannello + 180px riservati alla disponibilità */
        }

        .product-view .bgw > .wrapper > #comb_disp:not(:empty) {
            position: absolute;
            position-anchor: --asp-pdp-price;
            top: calc(anchor(top) + 20px);  /* = padding-top del prezzo */
            right: calc(anchor(right) + 20px);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            max-width: 170px;
            min-height: 33px;              /* = altezza della riga del prezzo (30px x 1.1) */
            padding: 0;
            background: transparent;
            text-align: right;
        }
    }
}


/* =====================================================================
   ELENCHI PRODOTTI (mobile e desktop)
   CSS ONLY · modulo isolato · in fondo a custom.css
   SOSTITUISCE INTEGRALMENTE il blocco "LISTING PRODOTTI | MOBILE | V1".
   Analizzato e provato su: Motore.html (categoria) e Home.html.

   NOVITÀ V2
   - Carrello rapido rimosso dalle card (listing e caroselli prodotto
     della home), su mobile e desktop. Resta solo il cuore preferiti,
     sempre visibile, in alto a destra dell'area fotografica.
   - Card: stesso linguaggio su mobile e desktop (marca, titolo fino a
     3 righe, prezzo nero, badge sconto accanto al prezzo, prezzo pieno
     barrato sotto). Le misure mobile sono quelle approvate in V1.
     Le card NON vengono ridotte: l'area foto resta 1:1 e la riga del
     prezzo pieno resta riservata anche senza sconto.
   - Desktop (da 768px): fascia categoria, toolbar filtri, fine elenco
     e fascia brand allineati al mobile.
   - Fascia brand: card più basse (112px), loghi centrati.
   - Il testo "Continua" NON viene sostituito via CSS: va cambiato
     nelle traduzioni Daisuke.

   AMBITO
   - Pagina elenco: tutti i selettori partono da "main > .elenco".
   - Fascia brand dell'elenco (nel DOM è fuori da .elenco):
     "main > .homebrands". La .homebrands della homepage non
     viene toccata.
   - Card prodotto della home: "main > .homeprods .carousel.products"
     (solo modulo 01). Titoli di sezione, sfondi, banner e carosello
     della home restano quelli del modulo Homepage.
   - NON tocca: header, menu, ricerca Algolia (.facet-hits), footer,
     scheda prodotto (.product-view), carrello.
   - NON tocca logica di filtri, ordinamento, carrello, preferiti,
     prezzi, paginazione / infinite scroll.
   - Breakpoint: solo quelli già usati dal tema (767 / 768), più 359px
     per gli smartphone stretti.

   !important: usato UNA sola volta (modulo 01, altezza del titolo),
   perché lo script matchHeight del tema scrive un'altezza inline
   (style="height:40px") che taglierebbe la terza riga del titolo.

   MODULI
   00 Token
   01 Card prodotto (listing + home, mobile + desktop)
   02 Fascia categoria
   03 Toolbar filtri / ordinamento / conteggio
   04 Griglia
   05 Fine elenco (conteggio + pulsante di caricamento)
   06 Fascia brand
   07 Smartphone stretti (fino a 359px)
   ===================================================================== */


/* =====================================================================
   00. TOKEN (custom properties locali)
   Stessi valori dei token --asp-pdp-* della scheda prodotto V4.1
   (inchiostri, linee, raggi 12/10).
   ===================================================================== */

main > .elenco,
main > .homebrands,
main > .homeprods,
main > .page .prods,
.product-view .prods,
.facet-hits {
    --asp-lst-ink: #1f1f1f;
    --asp-lst-ink-soft: #5f5f5f;
    --asp-lst-muted: #737373;          /* 4,74:1 su bianco (era #8a8a8a, 3,45:1) */
    --asp-lst-line: #e3e3e3;
    --asp-lst-control-line: #d4d4d4;   /* bordo dei controlli, come stepper e cuore in scheda */
    --asp-lst-red: #ed1c24;            /* fondo del badge sconto */
    --asp-lst-radius: 12px;            /* card e pannelli */
    --asp-lst-radius-control: 10px;    /* pulsanti e controlli */
    --asp-lst-gap: 10px;               /* spazio tra le due colonne mobile */
    --asp-lst-control-h: 44px;         /* filtri, ordinamento */
    --asp-lst-hit: 44px;               /* area di tocco del cuore */
}


/* =====================================================================
   01. CARD PRODOTTO (LISTING + HOME)
   Valori base = mobile approvato (V1). Da 768px cambiano solo le
   misure tipografiche e i padding, che restano uguali o superiori a
   quelli nativi del tema: la card non si accorcia.
   Gerarchia: foto 1:1 → cuore → marca → titolo → prezzo + sconto →
   prezzo pieno barrato. Il prezzo è ancorato in basso, così le card
   della stessa riga restano allineate con titoli di lunghezza diversa.
   ===================================================================== */

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont {
    display: flex;
    flex-direction: column;
    border-radius: var(--asp-lst-radius);
}

/* Listing: card bianche su fondo grigio, senza bordo.
   Home: le sezioni hanno anche fondo bianco, il bordo resta. */
main > .elenco .products .prod-cont:not(.active) {
    border-color: transparent;
}

:is(:is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont:not(.active) {
    border-color: var(--asp-lst-line);
}

/* Area immagine: quadrata come nel tema (rapporto 1:1 di .wrapper). */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img {
    flex: 0 0 auto;
    padding: 10px 10px 0;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg {
    top: 10px;
    left: 10px;
    right: 48px;                         /* non finisce sotto il cuore */
    width: auto;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 10px 12px 12px;
}

/* --- Pulsanti ---------------------------------------------------------
   Nel DOM i pulsanti sono fratelli dentro .functional-buttons, a sua
   volta dentro .item-img (position:relative). Il contenitore torna nel
   flusso e non occupa spazio. Resta visibile solo il cuore, ancorato
   all'angolo superiore destro dell'area immagine.
   Carrello rapido (.addtocart) e collegamento "Visualizza" (icona
   occhio dei prodotti con varianti) vengono nascosti: la scheda si
   apre da foto e titolo. Nessuna modifica a eventi o classi.
   Il <button> resta 44x44 (area di tocco); la parte visibile è l'icona
   interna, più piccola. */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons {
    position: static;
    width: auto;
    opacity: 1;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .btn:not(.add_topref) {
    display: none;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--asp-lst-hit);
    min-width: var(--asp-lst-hit);
    height: var(--asp-lst-hit);
    min-height: var(--asp-lst-hit);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref > i {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--asp-lst-radius-control);
    background: rgba(255, 255, 255, 0.92);
    text-align: center;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref:focus-visible {
    outline: 0;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref:focus-visible > i {
    outline: 2px solid var(--asp-lst-ink);
    outline-offset: 2px;
}

/* --- Marca e titolo ---------------------------------------------------
   Titolo fino a 3 righe: i codici ricambio stanno in coda al nome
   (es. "… codice 1A0249990R") e con 2 righe venivano tagliati.
   Il codice NON ha un elemento proprio nell'HTML: non è stilabile
   separatamente e non viene generato. */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .brand {
    margin-bottom: 4px;
    color: var(--asp-lst-muted);
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .brand a {
    color: inherit;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title {
    height: auto !important;             /* annulla l'altezza inline di matchHeight */
    margin-bottom: 8px;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title a {
    color: var(--asp-lst-ink);
    overflow-wrap: break-word;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* --- Prezzo, sconto, prezzo pieno -------------------------------------
   - prezzo in nero e in evidenza; il rosso resta allo sconto;
   - percentuale accanto al prezzo, stesso badge della scheda prodotto
     (rosso pieno, testo bianco, raggio 6);
   - prezzo pieno barrato sulla riga sotto. Il backend scrive
     "invece di € X": il testo "invece di " viene ritagliato solo a
     vista con lo stesso text-indent della scheda prodotto (4,52em,
     Inter 400), solo nelle pagine in italiano. Nelle altre lingue
     resta il testo completo, grigio, non barrato.
   - la riga del prezzo pieno resta riservata anche quando è vuota:
     le card con e senza sconto hanno la stessa struttura. */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra {
    container-type: inline-size;         /* il prezzo si misura sulla larghezza della card */
    margin-top: auto;
    padding: 0;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row {
    display: flex;
    flex-wrap: wrap;                     /* solo ultima risorsa: vedi nota sul prezzo */
    align-items: center;
    gap: 2px 5px;
    margin: 0;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row::before,
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row::after {
    display: none;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row > [class*="col-"] {
    flex: 0 0 auto;
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
    text-align: left;
}

/* PREZZO E BADGE SEMPRE SULLA STESSA RIGA
   Con prezzi a quattro cifre (es. "€ 2.042,10") prezzo + badge non
   entravano nella card a due colonne e il badge andava a capo.
   Il corpo del prezzo ora segue la larghezza della card (unità cqi):
   resta 17px dove c'è spazio e scende quanto basta nelle card strette,
   mai sotto 13px. Dimensionato perché "€ 9.999,99" + "- 99%" stiano
   su una riga da 320px in su. L'altezza della riga non cambia. */
:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo {
    display: inline-block;
    color: var(--asp-lst-ink);
    white-space: nowrap;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
    display: inline-block;
    padding: 2px 6px 2px 3px;            /* il testo inizia con uno spazio (&nbsp;) */
    border-radius: 6px;
    background: var(--asp-lst-red);
    color: #ffffff;
    vertical-align: middle;
}

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo_pieno {
    height: 16px;
    color: var(--asp-lst-muted);
    white-space: nowrap;
    overflow: hidden;
}

html[lang="it"] :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo_pieno {
    text-indent: -4.52em;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* --- Solo home: i caroselli non hanno righe da pareggiare, quindi il
   titolo riserva sempre 3 righe e tutte le card hanno la stessa
   struttura verticale. */
:is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products .prod-cont .prod-title {
    min-height: 54px;                    /* 3 x 18px */
}

/* --- Desktop e tablet (da 768px) -------------------------------------- */
@media only screen and (min-width: 768px) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img {
        padding: 16px 16px 0;            /* come il tema desktop */
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg {
        top: 16px;
        left: 16px;
        right: 56px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-info {
        padding: 12px 16px 16px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref {
        top: 6px;
        right: 6px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .brand {
        margin-bottom: 6px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title {
        margin-bottom: 10px;
    }


    :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products .prod-cont .prod-title {
        min-height: 60px;                /* 3 x 20px */
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row {
        gap: 2px 8px;
    }


    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
        padding: 2px 8px 2px 5px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .prezzo_pieno {
        height: 20px;
    }
}

/* --- Hover (solo dispositivi con puntatore) --------------------------- */
@media (hover: hover) and (pointer: fine) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont:not(.active):hover {
        border-color: var(--asp-lst-control-line);
    }

    main > .elenco .products .prod-cont:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .functional-buttons .add_topref:hover > i {
        color: var(--asp-lst-red);
    }
}


/* =====================================================================
   02. FASCIA CATEGORIA (ROSA)
   Colore invariato. Titolo, descrizione e sottocategorie restano tutti
   visibili; nessun testo modificato.
   ===================================================================== */

main > .elenco .bgr {
    border-radius: var(--asp-lst-radius);
}


main > .elenco .bgr .navcats ul > li > a {
    padding: 10px 18px;
    border-radius: var(--asp-lst-radius-control);
}

/* --- Mobile (approvato in V1) --- */
@media only screen and (max-width: 767px) {

    main > .elenco .bgr {
        padding: 20px 18px 16px;
    }

    main > .elenco .bgr h1 {
        margin-bottom: 6px;
    }

    main > .elenco .bgr .txt {
        margin-bottom: 12px;
    }

    /* Le sottocategorie scorrono in orizzontale fino al bordo della
       fascia: il margine negativo segue il padding (18px). */
    main > .elenco .bgr .navcats {
        margin: 0 -18px;
        padding: 0 18px;
    }
}

/* --- Desktop e tablet --- */
@media only screen and (min-width: 768px) {

    main > .elenco .bgr {
        padding: 28px 32px;
    }

    main > .elenco .bgr h1 {
        margin-bottom: 8px;
    }

    /* Riga di lettura contenuta: su schermi larghi la descrizione non
       corre per tutta la fascia. */
    main > .elenco .bgr .txt {
        max-width: 760px;
        margin-bottom: 18px;
    }

    main > .elenco .bgr .navcats {
        margin: 0;                       /* allineate al titolo anche tra 768 e 991px */
        padding: 0;
    }

    main > .elenco .bgr .navcats ul > li > a {
        transition: box-shadow 160ms ease;
    }
}

@media (hover: hover) and (pointer: fine) {

    main > .elenco .bgr .navcats ul > li > a:hover {
        box-shadow: inset 0 0 0 1px var(--asp-lst-ink);
    }
}


/* =====================================================================
   03. TOOLBAR FILTRI / ORDINAMENTO / CONTEGGIO
   Solo presentazione. Nessun filtro nascosto, nessun evento toccato.
   ===================================================================== */

main > .elenco .filters-toolbar .filter-detail-toggler {
    height: var(--asp-lst-control-h);
    border: 1px solid var(--asp-lst-control-line);
    border-radius: var(--asp-lst-radius-control);
    background: #ffffff;
    color: var(--asp-lst-ink);
    transition: border-color 160ms ease;
}

main > .elenco .filters-toolbar .filter-detail-toggler[aria-expanded="true"] {
    border-color: var(--asp-lst-ink);
}

main > .elenco .filters-toolbar .filter-detail-toggler:focus-visible,
main > .elenco .filters-toolbar .filters-sort-label:focus-visible {
    outline: 2px solid var(--asp-lst-ink);
    outline-offset: 2px;
}

main > .elenco .filters-toolbar .filters-product-count {
    color: var(--asp-lst-ink-soft);
}

/* Nessuna linea tra la fascia rosa e la barra: lo stacco lo fa già lo
   spazio. Il tema disegna un filetto grigio a tutta larghezza sopra il
   modulo filtri e un altro sopra il pannello aperto. */
main > .elenco .filters-form::before {
    display: none;
}

/* il bordo bianco da 1px del tema sfalsava gli spazi (17px sopra, 13 sotto) */
main > .elenco .filters-toolbar-nav {
    border-top: 0;
    border-bottom: 0;
}

main > .elenco .filters-form > .filter-details {
    border-top: 0;
}

/* contenitore dei filtri "in riga" del tema: qui resta sempre vuoto e
   aggiungeva 12px a destra di "Filtra prodotti" */
main > .elenco .filters-inline-host:empty {
    display: none;
}

main > .elenco .filters-toolbar .filters-product-count > span {
    color: var(--asp-lst-ink);
}

/* --- Mobile (approvato in V1) -----------------------------------------
   Due controlli affiancati di pari larghezza. Il conteggio, che il
   tema nasconde su mobile, è visibile su una riga propria sotto. */
@media only screen and (max-width: 767px) {

    main > .elenco .filters-toolbar-nav {
        margin-top: 14px;
        border-top: 0;
    }

    main > .elenco #filter .filters-form {
        padding: 0 0 12px;
    }

    main > .elenco .filters-toolbar {
        align-items: flex-start;
        gap: var(--asp-lst-gap);
        min-height: 0;
        padding-bottom: 30px;            /* riga del conteggio */
    }

    main > .elenco .filters-toolbar-left,
    main > .elenco .filters-toolbar-right {
        flex: 1 1 0;
        min-width: 0;
    }

    main > .elenco .filters-toolbar .filter-detail-toggler,
    main > .elenco .filters-toolbar .filters-sort-label {
        flex: 1 1 auto;
        justify-content: center;
        width: 100%;
        min-width: 0;
        padding: 0 12px;
    }

    /* "Ordina per" su mobile è un pulsante gemello di "Filtra prodotti" */
    main > .elenco .filters-toolbar .filters-sort-label {
        height: var(--asp-lst-control-h);
        border: 1px solid var(--asp-lst-control-line);
        border-radius: var(--asp-lst-radius-control);
        background: #ffffff;
        color: var(--asp-lst-ink);
        transition: border-color 160ms ease;
    }

    main > .elenco .filters-toolbar .filters-order.is-open .filters-sort-label {
        border-color: var(--asp-lst-ink);
    }

    main > .elenco .filters-toolbar .filter-detail-toggler > span,
    main > .elenco .filters-toolbar .filters-sort-label > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    main > .elenco .filters-toolbar .filters-product-count {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    /* Il menu "Ordina per" (aperto dal JS del tema con .is-open) nel
       tema è un pannello assoluto che copre le prime card. Qui resta
       nel flusso, sotto il proprio pulsante e con la stessa larghezza:
       la toolbar si allunga e il conteggio scende di conseguenza. */
    main > .elenco .filters-order {
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    main > .elenco .filters-order.is-open .filters-sort-select {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        padding: 0;
    }
}

/* --- Desktop e tablet -------------------------------------------------
   REGOLA UNICA: ha il bordo solo ciò che si può azionare.
   - Menu a tendina (filtri e ordinamento): bordo, 44px, raggio 10.
   - Etichette ("Ordina per", conteggio): testo semplice, senza bordo.
   - "Filtra prodotti" è SEMPRE un pulsante: i filtri restano chiusi e
     si aprono al clic, in ogni categoria e a ogni larghezza.
     Lo script del tema ha due modalità: filtri in riga sempre visibili
     (.filters-inline, dove il clic sul pulsante non fa nulla) oppure
     filtri in un pannello apribile (.filters-overflow). Sceglie
     sommando le larghezze dei menu: qui, nell'istante della misura, i
     menu sono larghi quanto la pagina, quindi "non entrano" mai e lo
     script usa sempre il pannello apribile. Nessuna modifica allo script.
   - Da 992px il pannello aperto sta ACCANTO al pulsante se i menu
     entrano nella riga, altrimenti SOTTO. La soglia dipende da quanti
     filtri ha la categoria (vedi blocco "ACCANTO O SOTTO" più avanti). */
@media only screen and (min-width: 768px) {

    /* :not(.filters-overflow) = solo l'istante in cui lo script misura i
       menu (toglie entrambe le classi, misura, poi ne rimette una). */
    main > .elenco .filters:not(.filters-overflow) .filter-field {
        flex: 0 0 100vw;
        width: 100vw;
    }

    main > .elenco .filters-toolbar .filters-sort-label {
      cursor: default;
      height: var(--asp-lst-control-h);
      color: var(--asp-lst-ink-soft);
    }

    main > .elenco .filters-toolbar {
        gap: 20px;
        min-height: 0;
        padding: 16px 0;
    }

    main > .elenco .filters-toolbar-left {
        gap: 12px;
    }

    main > .elenco .filters-toolbar-right {
        gap: 20px;
    }

    main > .elenco .filters-toolbar .filter-detail-toggler {
        padding: 0 16px;
    }

    main > .elenco .filters-order {
        gap: 10px;
    }


    /* Menu a tendina (filtri in riga, pannello filtri, ordinamento) */
    main > .elenco .filters .filter-field .SumoSelect > .CaptionCont,
    main > .elenco .filters .filters-sort-select .SumoSelect > .CaptionCont {
        height: var(--asp-lst-control-h);
        min-height: var(--asp-lst-control-h);
        padding: 6px 8px 6px 4px;
        border: 1px solid var(--asp-lst-control-line);
        border-radius: var(--asp-lst-radius-control);
        background: #ffffff;
        transition: border-color 160ms ease;
    }

    main > .elenco .filters .filter-field .SumoSelect > .CaptionCont > span,
    main > .elenco .filters .filters-sort-select .SumoSelect > .CaptionCont > span {
        color: var(--asp-lst-ink);
    }

    main > .elenco .filters .filter-field .SumoSelect:hover > .CaptionCont,
    main > .elenco .filters .filter-field .SumoSelect.open > .CaptionCont,
    main > .elenco .filters .filters-sort-select .SumoSelect:hover > .CaptionCont,
    main > .elenco .filters .filters-sort-select .SumoSelect.open > .CaptionCont {
        border-color: var(--asp-lst-ink);
    }
}


/* --- ACCANTO O SOTTO (da 992px) ---------------------------------------
   La riga diventa una griglia: [pulsante] [pannello filtri] [ordinamento
   e conteggio]. Il pannello (#filterDetails, aperto e chiuso dallo
   script) di base occupa una riga propria SOTTO; passa ACCANTO al
   pulsante solo quando la barra è abbastanza larga per tutti i menu:
   580px (pulsante, ordinamento, conteggio e spazi: 564 misurati + margine) + 192px
   per ogni filtro (menu da 180px + 12px di spazio).
   La larghezza è quella della barra filtri, non della finestra. */
@media only screen and (min-width: 992px) {

    main > .elenco #filter.filters-layout {
        container: asp-lst-filters / inline-size;
    }

    main > .elenco .filters-form {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;                /* come lo spazio tra un menu e l'altro */
        margin: 0;
        padding: 16px 0;
    }

    main > .elenco .filters-form > .filters-toolbar {
        display: contents;
    }

    main > .elenco .filters-form .filters-toolbar-left {
        grid-column: 1;
        grid-row: 1;
    }

    main > .elenco .filters-form .filters-toolbar-right {
        grid-column: 3;
        grid-row: 1;
        margin-left: 8px;                /* 12 + 8 = 20px dal gruppo dei filtri */
    }

    main > .elenco .filters-form > .filter-details {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        margin-top: 12px;
        padding: 0;
    }

    /* 1 filtro: servono almeno 772px */
    @container asp-lst-filters (min-width: 772px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(1)):not(:has(.filter-field:nth-child(2))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(1)):not(:has(.filter-field:nth-child(2))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(1)):not(:has(.filter-field:nth-child(2))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 2 filtri: servono almeno 964px */
    @container asp-lst-filters (min-width: 964px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(2)):not(:has(.filter-field:nth-child(3))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(2)):not(:has(.filter-field:nth-child(3))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(2)):not(:has(.filter-field:nth-child(3))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 3 filtri: servono almeno 1156px */
    @container asp-lst-filters (min-width: 1156px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(3)):not(:has(.filter-field:nth-child(4))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(3)):not(:has(.filter-field:nth-child(4))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(3)):not(:has(.filter-field:nth-child(4))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 4 filtri: servono almeno 1348px */
    @container asp-lst-filters (min-width: 1348px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(4)):not(:has(.filter-field:nth-child(5))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(4)):not(:has(.filter-field:nth-child(5))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(4)):not(:has(.filter-field:nth-child(5))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 5 filtri: servono almeno 1540px */
    @container asp-lst-filters (min-width: 1540px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(5)):not(:has(.filter-field:nth-child(6))) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(5)):not(:has(.filter-field:nth-child(6))) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(5)):not(:has(.filter-field:nth-child(6))) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }

    /* 6 filtri: servono almeno 1732px */
    @container asp-lst-filters (min-width: 1732px) {
        main > .elenco .filters-form:has(.filter-field:nth-child(6)) > .filter-details {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
            padding: 0;
            border-top: 0;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(6)) > .filter-details .filter-fields {
            flex-wrap: nowrap;
        }
        main > .elenco .filters-form:has(.filter-field:nth-child(6)) > .filter-details .filter-field {
            flex: 0 0 180px;
            width: 180px;
        }
    }
}


/* =====================================================================
   04. GRIGLIA
   Colonne native del tema invariate (2 su mobile, 3 da 768px, 5 da
   1600px). Su mobile solo lo spazio tra le colonne (approvato in V1).
   ===================================================================== */

@media only screen and (max-width: 767px) {

    main > .elenco .products.dflex {
        padding-top: 12px;               /* stacco dalla fascia bianca dei filtri */
        margin-left: calc(var(--asp-lst-gap) / -2);
        margin-right: calc(var(--asp-lst-gap) / -2);
    }

    main > .elenco .products.dflex > .pitem {
        padding-left: calc(var(--asp-lst-gap) / 2);
        padding-right: calc(var(--asp-lst-gap) / 2);
        min-width: 0;
    }

    main > .elenco .products .prod-cont {
        margin-bottom: var(--asp-lst-gap);
    }
}

@media only screen and (min-width: 768px) {

    main > .elenco .products.dflex {
        padding-top: 16px;               /* stacco dalla fascia bianca dei filtri */
    }

    main > .elenco .products.dflex > .pitem {
        min-width: 0;
    }
}


/* =====================================================================
   05. FINE ELENCO
   "Visualizzati X di Y" è un <div> senza classe, figlio diretto di
   .justpag: viene agganciato con :not([class]).
   Il testo del pulsante resta quello del gestionale.
   ===================================================================== */

main > .elenco .justpag > div:not([class]) {
    color: var(--asp-lst-ink-soft);
}

main > .elenco .justpag > div:not([class]) > #count {
    color: var(--asp-lst-ink);
}

main > .elenco .justpag .btn-morep {
    display: block;
    width: 100%;
    max-width: 280px;
    height: 48px;
    margin: 12px auto 0;
    padding: 0 20px;
    border-radius: var(--asp-lst-radius-control);
}

@media only screen and (max-width: 767px) {

    main > .elenco {
        margin-bottom: 32px;
    }

    main > .elenco .justpag {
        padding-top: 14px;
    }
}

@media only screen and (min-width: 768px) {

    main > .elenco {
        margin-bottom: 48px;
    }

    main > .elenco .justpag {
        padding-top: 24px;
    }


    main > .elenco .justpag .btn-morep {
        max-width: 320px;
        height: 52px;
        margin-top: 14px;
    }
}


/* =====================================================================
   06. FASCIA BRAND (solo quella che segue un elenco prodotti)
   La larghezza delle slide è calcolata dallo script slick (inline):
   non viene toccata. Card alte 112px, logo centrato.
   I file dei loghi sono 108x180 con ampi margini vuoti dello stesso
   grigio della card (#f8f8f8): il logo viene mostrato a 90x150 e la
   card ne ritaglia solo i margini vuoti sopra e sotto (19px per lato).
   Verificato sui 14 loghi presenti: il disegno più alto (UpMap) occupa
   108px su 180 e resta intero. Un logo futuro che riempisse più del
   75% dell'altezza del file verrebbe tagliato.
   ===================================================================== */

main > .homebrands .carousel .slick-slide {
    margin: 0 5px;
}

main > .homebrands .item {
    height: 112px;
    border-radius: var(--asp-lst-radius);
    overflow: hidden;
}

main > .homebrands .item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

main > .homebrands .item figure {
    flex: 0 0 auto;
    margin: 0;
}

main > .homebrands .item img {
    width: auto;
    max-width: none;
    height: 150px;
}

main > .homebrands .seeall {
    height: var(--asp-lst-control-h);
    margin-top: 14px;
    padding: 0 20px;
    border: 1px solid var(--asp-lst-control-line);
    border-radius: var(--asp-lst-radius-control);
    background: #ffffff;
    color: var(--asp-lst-ink);
    transition: border-color 160ms ease;
}

main > .homebrands .seeall:hover,
main > .homebrands .seeall:focus-visible {
    border-color: var(--asp-lst-ink);
}

@media only screen and (max-width: 767px) {

    main > .homebrands {
        padding: 24px 0 22px;
    }
}

@media only screen and (min-width: 768px) {

    main > .homebrands {
        padding: 36px 0 32px;
    }

    main > .homebrands .carousel .slick-slide {
        margin: 0 8px;
    }
}


/* =====================================================================
   07. SMARTPHONE STRETTI (fino a 359px) — approvato in V1
   Colonna di testo di ~115px: titolo più compatto, fino a 4 righe
   (stessa quantità di testo leggibile delle 3 righe a 375px).
   ===================================================================== */

@media only screen and (max-width: 359px) {

    main > .elenco .bgr {
        padding: 18px 16px 16px;
    }

    main > .elenco .bgr .navcats {
        margin: 0 -16px;
        padding: 0 16px;
    }

    main > .elenco .filters-toolbar .filter-detail-toggler,
    main > .elenco .filters-toolbar .filters-sort-label {
        gap: 6px;
        padding: 0 8px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-info {
        padding: 8px 10px 10px;
    }


    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .prod-title a {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products .prod-cont .prod-title {
        min-height: 68px;                /* 4 x 17px */
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra > .row {
        gap: 2px 4px;
    }

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .cifra .perc {
        padding: 1px 5px 1px 2px;
    }
}


/* =====================================================================
   RIFINITURE
   Correzioni emerse dal controllo visivo del sito. Ogni regola ha un
   ambito proprio; nessuna tocca la logica.

   Le card prodotto di ricerca, pagina 404, pagine generiche e
   "Acquistabile nel pacchetto" (scheda prodotto) NON sono qui: usano
   direttamente il modulo 01 del blocco LISTING V2, esteso a quei
   contesti (stesso stile, carrello rapido e "occhio" nascosti).

   A  Badge delle card su una riga
   B  Ricerca: riga dei risultati
   C  Sottocategorie: scorrimento visibile (desktop e tablet)
   C2 Elenco "Cerca accessori" (template elenco precedente)
   D  Ordinamento e conteggio tra 768 e 991px
   E  Banner dei caroselli home su mobile
   F  Fascia chiara sotto il footer su mobile
   G  Login: pulsante "Accedi"
   ===================================================================== */


/* ---------------------------------------------------------------------
   A. BADGE DELLE CARD SU UNA RIGA
   "OFFERTA LAMPO" andava su due righe nelle card strette e diventava
   un blocco alto accanto al cuore.
   --------------------------------------------------------------------- */

:is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg > div {
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg > div {
        padding: 0 5px;
    }

    /* il badge può arrivare fino al riquadro del cuore (8px di aria) */
    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg {
        right: 40px;
    }
}

/* card da ~140px (schermi fino a 359px): lì il badge non può stare su una riga */
@media only screen and (max-width: 359px) {

    :is(main > .elenco .products, :is(main > .homeprods, main > .page .prods, .product-view .prods) .carousel.products, .facet-hits .products) .prod-cont .item-img .bdg > div {
        white-space: normal;
    }
}


/* ---------------------------------------------------------------------
   B. RICERCA: "184 risultati in 1ms" su una riga
   Il testo è un nodo unico scritto dallo script: "in 1ms" non si può
   togliere via CSS senza nascondere anche il numero dei risultati.
   --------------------------------------------------------------------- */

.search_results #mr-stats {
    white-space: nowrap;
}


/* ---------------------------------------------------------------------
   C. SOTTOCATEGORIE CHE SCORRONO IN MODO VISIBILE (da 768px)
   Con molte sottocategorie la fila proseguiva oltre il bordo destro
   senza barra né frecce: con il mouse non si capiva che scorreva.
   Su mobile resta lo scorrimento orizzontale con il dito.
   --------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

    /* Fila unica (la pagina marca Aprilia ha 43 sottocategorie: a capo
       occuperebbero 5-8 righe). Quando non entrano tutte:
       - il bordo destro sfuma, segnale che la fila continua;
       - compare una barra di scorrimento sottile, trascinabile col mouse.
       Con poche sottocategorie non cambia nulla. */
    main > .elenco .bgr .navcats {
        overflow-x: auto;
        margin-bottom: -6px;             /* con il padding sotto: altezza invariata se non c'e' barra */
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: rgba(31, 31, 31, 0.28) transparent;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    }

    /* spazio in coda: l'ultima voce esce dalla sfumatura a fine corsa */
    main > .elenco .bgr .navcats ul {
        display: inline-block;           /* così lo spazio in coda entra nello scorrimento */
        padding-right: 56px;
        vertical-align: top;
    }
}


/* Su mobile la fila arrivava al bordo della fascia e si interrompeva
   di netto: stessa sfumatura a destra, più corta. Lo spazio in coda fa
   uscire l'ultima voce dalla sfumatura a fine corsa; con poche
   sottocategorie non cambia nulla. */
@media only screen and (max-width: 767px) {

    main > .elenco .bgr .navcats {
        padding-right: 0;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    }

    main > .elenco .bgr .navcats ul {
        display: inline-block;
        padding-right: 44px;
        vertical-align: top;
    }
}


/* ---------------------------------------------------------------------
   C1. FILTRI ATTIVI (riga sotto la barra)
   Il filtro attivo era un blocco nero pieno, più pesante del pulsante
   "Filtra prodotti" che gli sta sopra. Ora è un'etichetta grigia con
   testo scuro; "Elimina tutti filtri" resta un collegamento. Stessa
   altezza (32px) e stessa distanza (8px) per tutte le voci.
   --------------------------------------------------------------------- */

main > .elenco .filtri_attivi {
    padding-bottom: 12px;
}

main > .elenco .filtri_attivi ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

main > .elenco .filtri_attivi li {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #f0f1f2;                 /* il grigio di fondo pagina */
}

main > .elenco .filtri_attivi li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 6px 12px;
    background: transparent;
    color: var(--asp-lst-ink);
}

main > .elenco .filtri_attivi li > a > sup {
    position: static;
    margin: 0;
    color: var(--asp-lst-ink-soft);
}

main > .elenco .filtri_attivi li.elimina {
    background: transparent;
}

main > .elenco .filtri_attivi li.elimina > a {
    padding: 6px 4px;
    color: var(--asp-lst-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

main > .elenco .filtri_attivi li > a:focus-visible {
    outline: 2px solid var(--asp-lst-ink);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {

    main > .elenco .filtri_attivi li:not(.elimina):hover {
        background: var(--asp-lst-line);
    }

    main > .elenco .filtri_attivi li.elimina > a:hover {
        color: var(--asp-lst-ink);
    }
}

@media only screen and (min-width: 768px) {

    /* 12px dalla barra (che ne lascia 16 sotto di sé), 16px dal fondo */
    main > .elenco .filtri_attivi {
        margin-top: -4px;
        padding-bottom: 16px;
    }
}


/* ---------------------------------------------------------------------
   C2. ELENCO "CERCA ACCESSORI" (prodotti per la moto selezionata)
   Questa pagina usa ancora il template elenco PRECEDENTE: sottocategorie
   con casella di spunta (.checklist), barra filtri Bootstrap
   (.navbar-header + .navbarform) e conteggio fuori dalla fascia bianca
   (.counter senza .counter-legacy). Card, fascia rosa e fine elenco
   seguono già il modulo LISTING V2; qui si allineano solo i controlli
   che il nuovo template non ha. Nessuna regola tocca gli altri elenchi:
   queste classi lì non esistono.
   --------------------------------------------------------------------- */

/* l'editor inserisce un a capo vuoto in testa alla descrizione */
main > .elenco .bgr .txt > br:first-child {
    display: none;
}

/* sottocategorie con casella: stessa altezza (40px) e stesso raggio delle altre */
main > .elenco .bgr .navcats .checklist > li label {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: var(--asp-lst-radius-control);
}

/* conteggio: stessa tipografia del conteggio del nuovo template */
main > .elenco .counter:not(.counter-legacy) {
    margin-bottom: 12px;
    padding-top: 12px;
    color: var(--asp-lst-ink-soft);
}

main > .elenco .counter:not(.counter-legacy) span {
    color: var(--asp-lst-ink);
}

/* menu a tendina dei filtri: come nel nuovo template (44px, bordo, raggio 10) */
main > .elenco .filters .navbarform:not(.filters-form) .SumoSelect > .CaptionCont {
    height: var(--asp-lst-control-h);
    min-height: var(--asp-lst-control-h);
    padding: 6px 8px 6px 4px;
    border: 1px solid var(--asp-lst-control-line);
    border-radius: var(--asp-lst-radius-control);
    background: #ffffff;
    transition: border-color 160ms ease;
}

main > .elenco .filters .navbarform:not(.filters-form) .SumoSelect > .CaptionCont > span {
    color: var(--asp-lst-ink);
}

main > .elenco .filters .navbarform:not(.filters-form) .SumoSelect:hover > .CaptionCont,
main > .elenco .filters .navbarform:not(.filters-form) .SumoSelect.open > .CaptionCont {
    border-color: var(--asp-lst-ink);
}

/* Barra: [Filtra prodotti] [filtri, solo se aperti] ... [ordinamento].
   Nel tema l'ordinamento stava DENTRO il pannello dei filtri: su mobile
   non si vedeva finché non si apriva "Filtra prodotti", su desktop i
   menu erano sempre aperti e senza pulsante. Qui i contenitori
   intermedi vengono "sciolti" (display: contents) e le colonne
   diventano voci della stessa riga: l'ordinamento è sempre visibile, i
   filtri compaiono quando lo script di Bootstrap apre #filter (.in).
   Nessun testo aggiunto, nessuno script toccato. */
main > .elenco nav.filters:not(.filters-toolbar-nav) {
    min-height: 0;
    margin-top: 0;
    border: 0;                           /* niente linea sotto la fascia rosa; senza bordi laterali il pulsante è a filo della fascia */
}

main > .elenco nav.filters:not(.filters-toolbar-nav) > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) #filter,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter > .navbarform,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter > .navbarform > .row {
    display: contents !important;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) #filter::before,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter::after,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter > .navbarform > .row::before,
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter > .navbarform > .row::after {
    display: none;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"] {
    flex: 0 0 180px;
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"] .form-group {
    margin: 0;
}

/* filtri chiusi: resta solo l'ordinamento */
main > .elenco nav.filters:not(.filters-toolbar-nav) #filter:not(.in):not(.collapsing[aria-expanded="true"]) .row > [class*="col-"]:not(:has(#sort)) {
    display: none;
}

/* "Filtra prodotti": stesso pulsante del nuovo template. Icona e
   scritta sono due elementi distinti che aprono lo stesso pannello: il
   bordo sta sul loro contenitore e l'area cliccabile della scritta lo
   copre tutto. */
main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    float: none;
    height: var(--asp-lst-control-h);
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--asp-lst-control-line);
    border-radius: var(--asp-lst-radius-control);
    background: #ffffff;
    transition: border-color 160ms ease;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header:has(.navbar-toggle:not(.collapsed)) {
    border-color: var(--asp-lst-ink);
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header:has(:focus-visible) {
    outline: 2px solid var(--asp-lst-ink);
    outline-offset: 2px;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header::before,
main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header::after {
    display: none;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header .navbar-toggle {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--asp-lst-ink);
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header .navbar-brand {
    display: block !important;           /* il tema la nasconde da 768px */
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--asp-lst-ink);
    white-space: nowrap;
}

main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header .navbar-brand::after {
    content: "";
    position: absolute;
    inset: 0;
}

@media only screen and (max-width: 767px) {

    /* come nel nuovo template: due controlli affiancati di pari
       larghezza, i filtri aperti sotto, uno per riga */
    main > .elenco nav.filters:not(.filters-toolbar-nav) {
        margin-top: 14px;
    }

    main > .elenco nav.filters:not(.filters-toolbar-nav) > div {
        gap: var(--asp-lst-gap);
        padding: 0 0 12px;
    }

    main > .elenco nav.filters:not(.filters-toolbar-nav) .navbar-header {
        flex: 1 1 40%;
        order: 1;
        min-width: 0;
        padding: 0 12px;
    }

    main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"] {
        flex: 0 0 100%;
        order: 3;
    }

    main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"]:has(#sort) {
        flex: 1 1 40%;
        order: 2;
        min-width: 0;
    }

    main > .elenco .counter:not(.counter-legacy) {
        justify-content: flex-start;
    }
}

@media only screen and (min-width: 768px) {

    /* ordinamento a destra, come nel nuovo template */
    main > .elenco nav.filters:not(.filters-toolbar-nav) #filter .row > [class*="col-"]:has(#sort) {
        flex-basis: 182px;
        margin-left: auto;
    }
}


/* ---------------------------------------------------------------------
   D. ORDINAMENTO E CONTEGGIO TRA 768 E 991px
   In questa fascia il tema nasconde menu di ordinamento e conteggio e
   lo script non apre il menu al clic (lo fa solo sotto 768px): non si
   poteva ordinare. Qui tornano visibili accanto all'etichetta, come
   da 992px in su.
   --------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 991.98px) {

    main > .elenco .filters-toolbar-left {
        flex: 0 1 auto;
    }

    main > .elenco .filters-toolbar-right {
        flex: 0 0 auto;
        gap: 16px;
    }

    main > .elenco .filters-toolbar .filters-sort-select,
    main > .elenco .filters-toolbar .filters-product-count {
        display: block;
    }
}


/* ---------------------------------------------------------------------
   E. BANNER DEI CAROSELLI HOME SU MOBILE
   Le scritte bianche finivano direttamente sulla fotografia. Una
   sfumatura scura nella parte alta le rende leggibili; la foto resta
   pulita dove c'è il soggetto. Dimensioni del banner invariate (le
   decide lo script del carosello).
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    main > .homeprods .carousel .gbanner .contents > .padding {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 38%, rgba(0, 0, 0, 0) 64%);
    }
}


/* ---------------------------------------------------------------------
   F. FASCIA CHIARA SOTTO IL FOOTER SU MOBILE
   Il footer ha 75px di spazio finale (per il pulsante WhatsApp) che
   mostrava il grigio chiaro della pagina sotto la parte scura.
   --------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    body > footer {
        background-color: #282223;       /* stesso scuro dell'ultima fascia del footer */
    }
}


/* ---------------------------------------------------------------------
   G. LOGIN: PULSANTE "ACCEDI"
   Era verde, fuori dalla palette: nero come gli altri pulsanti primari.
   --------------------------------------------------------------------- */

main > .page.login #loginform .btn-accedi {
    border-color: #1f1f1f;
    background: #1f1f1f;
    color: #ffffff;
}

main > .page.login #loginform .btn-accedi:hover,
main > .page.login #loginform .btn-accedi:focus {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}