/* Accessibility Core by Clivo: copia di modules/advancedmenu/views/css/menu.css con 3 colori cambiati */
/*
 * Advanced Menu by CLIVO - il menu sul sito
 *
 * Tutto quello che si puo' regolare dal pannello arriva qui come variabile CSS, impostata sul
 * contenitore dal template. Questo foglio non va mai modificato per cambiare colori, misure o
 * font: si cambia dal back office.
 *
 * Le variabili scritte sotto sono i valori di ripiego: se il modulo non le passasse - un
 * template sostituito, una configurazione svuotata - il menu resta utilizzabile invece di
 * comparire senza colori.
 *
 * @author    Alessio Abbatantuono
 * @copyright CLIVO
 * @license   Proprietaria
 */

.advancedmenu {
    /* Barra */
    --am-colore: #ca450c;
    --am-barra-sfondo: #fff;
    --am-barra-testo: #ca450c;
    --am-barra-bordo: #fff;
    --am-barra-sopra-sfondo: #ca450c;
    --am-barra-sopra-testo: #fff;
    --am-voce-barra: #fff;
    --am-evidenza-barra: #FFC107;
    --am-evidenza-barra-testo: #1F2937;
    /* Tenda */
    --am-testo: #374151;
    --am-sfondo: #fff;
    --am-evidenza: #FFF6F4;
    --am-icona-macro: 20px;
    --am-icona-figlia: 18px;
    --am-colonna: 340px;
    --am-pannello: 320px;
    --am-colonne: 2;
    --am-altezza: 78vh;
    --am-corpo: 14px;
    --am-corpo-titolo: 19px;
    --am-a-capo: nowrap;
    --am-font: inherit;

    display: flex;
    align-items: stretch;
    gap: 6px;
    font-family: var(--am-font);
}

.advancedmenu-gruppo {
    position: relative;
}

/* --- la voce che apre la cascata ----------------------------------------------------- */
/*
 * Nasce in negativo: fondo chiaro, testo e bordo colorati. La barra del tema e' gia' del
 * colore dell'insegna, e un bottone pieno dello stesso colore su quel fondo non si vede. Al
 * passaggio del mouse i due colori si scambiano e il bottone diventa pieno: e' il segnale che
 * la voce e' viva, senza doverci mettere un'ombra o un bordo in piu'.
 */
.advancedmenu-apri {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 12px 22px;
    background: var(--am-barra-sfondo);
    border: 1px solid var(--am-barra-bordo);
    border-radius: 6px 6px 0 0;
    color: var(--am-barra-testo);
    font-family: inherit;
    font-size: calc(var(--am-corpo) + 1px);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.advancedmenu-gruppo:hover > .advancedmenu-apri,
.advancedmenu-gruppo.aperto > .advancedmenu-apri,
.advancedmenu-apri:focus-visible {
    background: var(--am-barra-sopra-sfondo);
    border-color: var(--am-barra-sopra-sfondo);
    color: var(--am-barra-sopra-testo);
}

.advancedmenu-tratti {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    width: 16px;
}

.advancedmenu-tratti i {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

/* --- le voci orizzontali dedicate ----------------------------------------------------- */
.advancedmenu-barra-voce {
    position: relative;
    display: flex;
    align-items: stretch;
}

.advancedmenu-barra-voce > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-radius: 6px 6px 0 0;
    color: var(--am-voce-barra);
    font-size: calc(var(--am-corpo) + 1px);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.advancedmenu-barra-voce > a:hover,
.advancedmenu-barra-voce > a:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: var(--am-voce-barra);
    text-decoration: none;
}

/*
 * La voce in evidenza - saldi, promozioni - e' piena: in una barra di voci tutte uguali, il
 * colore e' l'unica cosa che si vede prima di leggere.
 */
.advancedmenu-barra-voce.e-evidenza > a {
    background: var(--am-evidenza-barra);
    color: var(--am-evidenza-barra-testo);
    border-radius: 6px;
    margin: 6px 0;
    font-weight: 700;
}

.advancedmenu-barra-voce.e-evidenza > a:hover {
    background: var(--am-evidenza-barra);
    color: var(--am-evidenza-barra-testo);
    filter: brightness(.94);
}

.advancedmenu-barra-voce > a .advancedmenu-freccia {
    transform: rotate(90deg);
    color: currentColor;
    opacity: .8;
}

/* --- il pannello della cascata --------------------------------------------------------- */
.advancedmenu-pannello {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 900;
    display: none;
    background: var(--am-sfondo);
    border: 1px solid #e5e7eb;
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.advancedmenu.a-destra .advancedmenu-pannello {
    left: auto;
    right: 0;
    border-radius: 6px 0 6px 6px;
}

/* Apertura al passaggio, che e' il comportamento predefinito. */
.advancedmenu:not(.al-clic) .advancedmenu-gruppo:hover .advancedmenu-pannello,
.advancedmenu:not(.al-clic) .advancedmenu-gruppo:focus-within .advancedmenu-pannello,
.advancedmenu.al-clic .advancedmenu-gruppo.aperto .advancedmenu-pannello {
    display: block;
}

/* --- colonna delle voci ---------------------------------------------------------------- */
.advancedmenu-macro {
    width: var(--am-colonna);
    margin: 0;
    padding: 6px 0;
    list-style: none;
    max-height: var(--am-altezza);
    overflow-y: auto;
}

.advancedmenu-voce > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    color: var(--am-testo);
    font-size: var(--am-corpo);
    text-decoration: none;
}

.advancedmenu-voce > a img {
    flex: none;
    width: var(--am-icona-macro);
    height: var(--am-icona-macro);
}

/*
 * Il nome resta su una riga sola e si accorcia con i puntini se non entra: nel menu una voce
 * che va a capo rompe l'allineamento di tutte le altre. Il ritorno a capo si puo' consentire
 * dal pannello.
 */
.advancedmenu-nome {
    flex: 1;
    min-width: 0;
    white-space: var(--am-a-capo);
    overflow: hidden;
    text-overflow: ellipsis;
}

.advancedmenu-freccia {
    flex: none;
    color: var(--am-colore);
    opacity: .55;
    font-size: 18px;
    line-height: 1;
}

.advancedmenu-voce:hover > a {
    background: var(--am-evidenza);
    color: var(--am-colore);
}

.advancedmenu-voce:hover > a .advancedmenu-freccia {
    opacity: 1;
}

.advancedmenu-extra > a {
    font-weight: 600;
}

.advancedmenu-piede {
    padding: 12px 16px;
    border-top: 1px solid #f1f2f4;
    font-size: calc(var(--am-corpo) - 1px);
}

/* --- la tenda con le sottocategorie ------------------------------------------------------ */
.advancedmenu-tenda {
    position: absolute;
    display: none;
    /*
     * La tenda si dimensiona sul contenuto, e la larghezza impostata nel pannello e' solo un
     * minimo. Prima quel minimo valeva 640 px con il riquadro promozionale accanto, e il
     * risultato era una fascia di bianco fra l'elenco e il riquadro: la tenda era piu' larga
     * della somma delle sue due colonne.
     */
    width: max-content;
    min-width: var(--am-pannello);
    max-width: 90vw;
    padding: 18px 24px 22px;
    background: var(--am-sfondo);
    border: 1px solid #f1f2f4;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    gap: 22px;
}

/* Dalla colonna la tenda esce di lato, all'altezza della voce. */
.advancedmenu-voce .advancedmenu-tenda {
    top: 0;
    left: var(--am-colonna);
    min-height: 100%;
    box-sizing: border-box;
    border-left-color: #f1f2f4;
    box-shadow: none;
}

.advancedmenu.a-destra .advancedmenu-voce .advancedmenu-tenda {
    left: auto;
    right: var(--am-colonna);
    border-radius: 6px 0 0 6px;
}

/* Dalla barra scende sotto la voce, come una tenda qualsiasi. */
.advancedmenu-barra-voce .advancedmenu-tenda {
    top: 100%;
    left: 0;
    z-index: 900;
    border-radius: 0 6px 6px 6px;
}

.advancedmenu-voce.ha-figlie:hover > .advancedmenu-tenda,
.advancedmenu-voce.ha-figlie:focus-within > .advancedmenu-tenda,
.advancedmenu-barra-voce.ha-figlie:hover > .advancedmenu-tenda,
.advancedmenu-barra-voce.ha-figlie:focus-within > .advancedmenu-tenda {
    display: flex;
}

.advancedmenu-elenco {
    flex: 1;
    min-width: 0;
}

/*
 * Lo spazio a destra del titolo non e' decorazione: la larghezza dell'elenco si prende dal suo
 * contenuto piu' largo, che di solito e' proprio il titolo, e il pannello del terzo livello si
 * appoggia al bordo destro dell'elenco. Senza questo spazio il pannello arriverebbe a toccare
 * l'ultima lettera del titolo.
 */
.advancedmenu-testata {
    margin: 0 0 14px;
    padding-right: 30px;
    line-height: 1.3;
}

.advancedmenu-testata strong {
    display: block;
    font-size: var(--am-corpo-titolo);
    color: var(--am-testo);
}

.advancedmenu-testata a {
    font-size: calc(var(--am-corpo) - 1px);
    color: var(--am-colore);
    text-decoration: underline;
}

/*
 * Le colonne si dimensionano sul testo piu' lungo (max-content) invece di dividere in parti
 * uguali una larghezza fissa: e' quello che evita i nomi troncati quando accanto c'e' la
 * promozione.
 *
 * Da qui in giu' la tenda ha tre livelli: il gruppo e' la sottocategoria, e sotto stanno le sue
 * figlie. Con una colonna sola i gruppi si incolonnano; con due o piu' si affiancano.
 */
.advancedmenu-gruppi {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    /*
     * La colonna parte dal testo piu' lungo e poi si prende quello che resta (`1fr`): la riga e'
     * larga quanto l'elenco, non quanto la propria scritta.
     *
     * Non e' una questione di estetica ma di mouse. Con la colonna ferma a max-content, fra il
     * bordo destro della riga e il bordo dell'elenco restava una fascia vuota - qui erano 53 px,
     * perche' la testata e' piu' larga delle voci - che non appartiene a nessuno: il puntatore
     * che andava verso il pannello del terzo livello la attraversava, la riga perdeva il
     * passaggio e il pannello si chiudeva prima di essere raggiunto.
     *
     * Per la stessa ragione le righe non hanno spazio fra loro: uno spazio fra due righe e' fuori
     * da tutte e due, e attraversandolo in diagonale il pannello si chiude. L'aria fra una voce
     * e l'altra la fa il riempimento dentro la voce, che e' area buona.
     */
    grid-template-columns: repeat(var(--am-colonne), minmax(max-content, 1fr));
    column-gap: 34px;
    row-gap: 0;
    /*
     * Niente overflow qui: un contenitore che scorre ritaglia tutto quello che esce dai suoi
     * bordi, e il pannello del terzo livello - che si apre verso destra - si vedeva tagliato a
     * una striscia. L'altezza non e' piu' un problema da quando il terzo livello sta chiuso nel
     * suo pannello invece di essere espanso qui dentro: il secondo livello e' un elenco corto.
     */
}

.advancedmenu-sotto {
    break-inside: avoid;
}

/*
 * Il selettore deve prendere SOLO le voci degli elenchi, non qualunque collegamento dentro la
 * tenda: `.advancedmenu-elenco li a` prendeva anche il riquadro promozionale del terzo livello -
 * che sta dentro un <li> - e lo trasformava in una riga, schiacciando l'immagine a diciotto
 * pixel. Da qui il figlio diretto.
 */
.advancedmenu-gruppi > li > a,
.advancedmenu-nipoti-riquadro > ul > li > a {
    display: flex;
    align-items: center;
    gap: 11px;
    /* L'aria fra una voce e l'altra sta qui dentro, non fra le righe: dentro e' area buona. */
    padding: 10px 8px;
    border-radius: 5px;
    color: var(--am-testo);
    font-size: var(--am-corpo);
    text-decoration: none;
}

.advancedmenu-gruppi > li > a img {
    flex: none;
    width: var(--am-icona-figlia);
    height: var(--am-icona-figlia);
}

.advancedmenu-gruppi > li > a:hover,
.advancedmenu-nipoti-riquadro > ul > li > a:hover {
    background: var(--am-evidenza);
    color: var(--am-colore);
}

/*
 * Il terzo livello si apre DI LATO, con la stessa logica della colonna verso la tenda.
 *
 * Due cose contano, e sono le stesse che valgono un livello piu' su.
 *
 * La PRIMA e' che il pannello si apre sempre nello STESSO POSTO - in alto, a fianco
 * dell'elenco - e non all'altezza della voce puntata. Il riferimento e' l'elenco, non la riga:
 * per questo la posizione si calcola su .advancedmenu-elenco e le righe restano statiche.
 * Aprendolo all'altezza della voce, il pannello ballava su e giu' a ogni passaggio del mouse, e
 * il risultato era disordinato.
 *
 * La SECONDA e' che dentro non si ripete il nome della voce che lo ha aperto: quella voce e'
 * li' accanto, evidenziata, e ripeterla come titolo a mezzo centimetro di distanza era leggerla
 * due volte.
 */
.advancedmenu-elenco {
    position: relative;
}

/*
 * Il pannello e' attaccato al bordo destro dell'elenco, senza spazio in mezzo: uno spazio, anche
 * di pochi pixel, e' fuori dalla voce, e attraversandolo il mouse perde il passaggio e il
 * pannello si chiude prima di essere raggiunto.
 *
 * Il bordo in alto lo allinea alla prima riga dell'elenco, che e' dove sta la sua testata.
 */
/*
 * IL PANNELLO E' DUE COSE: una strada e un riquadro.
 *
 * `.advancedmenu-nipoti` e' la STRADA. Non si vede - niente fondo, niente bordo - ed e' alta
 * quanto l'elenco che la apre. Serve al mouse: il riquadro si apre in alto, e puntando una voce
 * a meta' elenco il puntatore che va verso destra uscirebbe dalla riga in uno spazio che non
 * appartiene a nessuno, la riga perderebbe il passaggio e il riquadro si chiuderebbe prima di
 * essere raggiunto. Alta quanto l'elenco, da qualunque riga basta andare a destra in orizzontale
 * per esserci dentro. I 18 px in piu' recuperano lo scarto di `top`.
 *
 * `.advancedmenu-nipoti-riquadro` e' il RIQUADRO: quello bianco che si vede, alto quanto quello
 * che contiene. Cosi' la strada non si vede e sotto il riquadro non si apre una distesa di
 * bianco.
 */
/*
 * Il corridoio e' agganciato alla TENDA, non alla riga: per questo il terzo livello compare
 * sempre in alto e non all'altezza della voce. I due valori -18 e -22 sono il rientro della
 * tenda, che cosi' viene coperto: il corridoio va dal bordo superiore a quello inferiore.
 *
 * Agganciarlo sopra E sotto gli da' un'altezza definita, ed e' quello che permette al riquadro
 * dentro di chiedere il 100%: una percentuale non si risolve contro un'altezza automatica, ed e'
 * il motivo per cui prima il riquadro restava alto quanto il suo contenuto.
 */
.advancedmenu-nipoti {
    position: absolute;
    top: -18px;
    bottom: -22px;
    left: 100%;
    z-index: 10;
    display: none;
    width: max-content;
}

/*
 * IL RIQUADRO DEL TERZO LIVELLO SI DEVE VEDERE, ed e' un rilievo di Alessio: «con sole due o tre
 * voci e' piccolo e si perde visivamente, io incornicerei la sezione a scomparsa per dare un
 * distacco e rilievo rispetto allo sfondo da cui si naviga».
 *
 * La misura gli da' ragione: la tenda del secondo livello e' alta 620 pixel, i pannelli del terzo
 * stanno fra 141 e 243 - fra un quarto e un terzo. Un rettangolo bianco piccolo, con un bordo
 * grigio chiarissimo, appoggiato su un altro rettangolo bianco grande: non ha nessun motivo per
 * farsi notare.
 *
 * Tre cose lo staccano, e nessuna delle tre allunga il pannello con del vuoto:
 *   - un'altezza minima, cosi' anche tre voci occupano una superficie che si legge come pannello
 *     e non come suggerimento;
 *   - una cornice vera: bordo piu' marcato e ombra piu' profonda e diffusa, che e' il modo in cui
 *     si dice «questo sta sopra»;
 *   - un filo di colore sul lato da cui arriva, che lega il pannello alla voce che lo ha aperto.
 */
.advancedmenu-nipoti-riquadro {
    min-width: 210px;
    max-width: 34vw;
    /*
     * «Lungo quanto il secondo livello», come ha chiesto Alessio. Non serve un numero: il
     * corridoio invisibile che porta il mouse fin qui e' gia' alto quanto la tenda (e' lui
     * che rende raggiungibile il terzo livello), quindi basta che il riquadro visibile lo
     * riempia. Il 100% e' del corridoio, e il corridoio e' la tenda.
     */
    min-height: 100%;
    box-sizing: border-box;
    padding: 18px 22px 20px;
    background: var(--am-sfondo);
    border: 1px solid #d8dce3;
    border-left: 3px solid var(--am-colore);
    border-radius: 0 8px 8px 0;
    box-shadow: 14px 14px 40px rgba(17, 24, 39, .18);
}

.advancedmenu-sotto.ha-nipoti:hover > .advancedmenu-nipoti,
.advancedmenu-sotto.ha-nipoti:focus-within > .advancedmenu-nipoti {
    display: block;
}

/* Verso sinistra il terzo pannello esce dall'altra parte, come la tenda. */
.advancedmenu.a-destra .advancedmenu-nipoti {
    left: auto;
    right: 100%;
}

.advancedmenu-nipoti ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Con il riquadro promozionale il terzo pannello diventa due colonne: l'elenco a sinistra, la
 * proposta a destra. E' la stessa forma della tenda, un livello piu' giu'.
 */
.advancedmenu-nipoti-riquadro.ha-promo {
    display: flex;
    gap: 20px;
}

.advancedmenu-nipoti-riquadro.ha-promo > ul {
    flex: 1;
    min-width: 0;
}

/*
 * Nel terzo livello il riquadro sta piu' stretto - il pannello e' gia' un'aggiunta di lato - e
 * sta IN ALTO, non in mezzo: qui il riquadro e' alto quanto il suo contenuto, e centrare
 * l'immagine vorrebbe dire allungarlo per farle spazio sopra e sotto. In alto, invece, comincia
 * dove comincia l'elenco che ha accanto.
 */
.advancedmenu-promo.advancedmenu-promo--terza {
    width: 190px;
    align-items: flex-start;
}

.advancedmenu-sotto > a > .advancedmenu-freccia {
    margin-left: auto;
}

/* --- spazio promozionale ------------------------------------------------------------------ */
/*
 * Nella tenda il riquadro e' largo 300 px, non 200: lo spazio c'e' e tanto vale usarlo. La
 * tenda si apre a fianco della colonna e finisce ben prima del bordo del contenitore, mentre
 * l'elenco delle sottocategorie e' quasi sempre piu' alto dell'immagine: il riquadro stretto
 * lasciava una fascia di bianco a destra e un vuoto sotto. A 300 px la proposta pesa quanto
 * l'elenco che ha accanto, che e' quello che deve fare - e' una vetrina, non una nota a
 * margine.
 */
.advancedmenu-promo {
    flex: none;
    display: flex;
    align-items: center;
    width: 300px;
    transition: opacity .12s ease;
}

/*
 * Il riquadro prende tutta la larghezza della colonna e sta in mezzo in verticale: con
 * l'elenco lungo, l'immagine appesa in alto lasciava sotto di se' un vuoto che sembrava un
 * errore di impaginazione.
 */
.advancedmenu-promo > .advancedmenu-promo-riquadro {
    width: 100%;
}

/*
 * Quando si apre il pannello del terzo livello, il riquadro della tenda si spegne. Il pannello
 * esce sopra di lui e lasciarlo acceso vuol dire vederne spuntare da sotto la meta' inferiore,
 * che sembra un'immagine tagliata a meta'. Si spegne senza togliere spazio - opacita' e
 * visibilita', non display - cosi' la tenda non cambia larghezza mentre si naviga.
 *
 * Dove :has() non c'e' non succede niente e resta il comportamento di prima: e' una rifinitura,
 * non una cosa da cui dipende la leggibilita' del menu.
 */
@media (min-width: 992px) {
    .advancedmenu-tenda:has(.advancedmenu-sotto.ha-nipoti:hover) > .advancedmenu-promo,
    .advancedmenu-tenda:has(.advancedmenu-sotto.ha-nipoti:focus-within) > .advancedmenu-promo {
        opacity: 0;
        visibility: hidden;
    }
}

.advancedmenu-promo-riquadro {
    display: block;
    padding: 12px;
    border: 1px solid #f1f2f4;
    border-radius: 8px;
    color: var(--am-testo);
    text-align: center;
    text-decoration: none;
    transition: border-color .15s;
}

.advancedmenu-promo-riquadro:hover {
    border-color: var(--am-colore);
}

/*
 * L'immagine da sola deve bastare: i testi sono facoltativi. Il margine sotto sparisce quando
 * non c'e' niente dopo, altrimenti il riquadro con la sola foto resterebbe con otto pixel di
 * vuoto in fondo che sembrano un errore.
 */
.advancedmenu-promo-riquadro img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 8px;
}

.advancedmenu-promo-riquadro img:last-child {
    margin-bottom: 0;
}

.advancedmenu-promo-riquadro strong {
    display: block;
    font-size: var(--am-corpo);
    color: var(--am-colore);
}

.advancedmenu-promo-riquadro span {
    display: block;
    margin-top: 3px;
    font-size: calc(var(--am-corpo) - 2px);
    line-height: 1.35;
}

/* --- schermi stretti ---------------------------------------------------------------------- */
@media (max-width: 991px) {
    .advancedmenu {
        display: block;
        width: 100%;
    }

    .advancedmenu-sotto {
        position: static;
    }

    .advancedmenu-apri {
        width: 100%;
        justify-content: flex-start;
        border-radius: 0;
        /* Il bottone diventa l'intestazione del cassetto, non piu' un comando da premere. */
        pointer-events: none;
    }

    /*
     * Su schermo stretto il pannello e' SEMPRE aperto: qui il menu vive gia' dentro il cassetto
     * a scomparsa del tema, e tenerlo chiuso in attesa di un passaggio del mouse - che su un
     * dito non esiste - lo renderebbe semplicemente vuoto.
     */
    .advancedmenu-pannello,
    .advancedmenu.a-destra .advancedmenu-pannello,
    .advancedmenu:not(.al-clic) .advancedmenu-pannello,
    .advancedmenu.al-clic .advancedmenu-pannello {
        position: static;
        display: block;
        width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .advancedmenu-macro {
        width: 100%;
        max-height: none;
    }

    /* Le voci orizzontali diventano righe, come tutte le altre. */
    .advancedmenu-barra-voce {
        position: static;
        display: block;
        width: 100%;
    }

    .advancedmenu-barra-voce > a,
    .advancedmenu-barra-voce.e-evidenza > a {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 12px 16px;
        border-radius: 0;
        color: var(--am-testo);
    }

    .advancedmenu-barra-voce.e-evidenza > a {
        background: var(--am-evidenza-barra);
        color: var(--am-evidenza-barra-testo);
    }

    /*
     * Le sottocategorie non possono stare in un pannello che si apre di lato: restano in linea
     * e rientrate, chiuse finche' non si tocca la freccia. L'apertura la gestisce lo script,
     * che su schermo stretto e' l'unico modo: il passaggio del mouse non esiste.
     */
    /*
     * 0.9.5 - ANCHE IL FOCUS VA ANNULLATO, non solo il passaggio del mouse. Alessio: «su mobile
     * l'apertura dei terzi livelli sfalsa e alle volte apre una categoria». Su Android toccare un
     * collegamento gli da' il focus gia' alla pressione del dito, prima del clic; le regole
     * `:focus-within` del desktop aprivano allora il livello da sole, la lista si allungava sotto
     * il dito e il clic finiva sulla riga sbagliata - un collegamento, quindi una pagina. Misurato
     * in locale a 408 px: il solo focus su «Penne e Refil» apriva il suo terzo livello e spingeva
     * «Matite e Portamine» 212 px piu' in basso, e la tenda passava da block a flex.
     */
    .advancedmenu-tenda,
    .advancedmenu .advancedmenu-tenda,
    .advancedmenu-voce.ha-figlie:hover > .advancedmenu-tenda,
    .advancedmenu-voce.ha-figlie:focus-within > .advancedmenu-tenda,
    .advancedmenu-barra-voce.ha-figlie:hover > .advancedmenu-tenda,
    .advancedmenu-barra-voce.ha-figlie:focus-within > .advancedmenu-tenda {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 0 0 12px 40px;
        border: 0;
        box-shadow: none;
    }

    /*
     * Perche' questi selettori sono cosi' carichi: la regola qui sopra, per annullare
     * l'apertura al passaggio del mouse, deve nominare `:hover` - e quella specificita'
     * (quattro classi) batteva l'apertura al tocco (tre). Risultato: il dito girava la freccia,
     * la voce prendeva la classe `aperta` e le sottocategorie restavano invisibili. Capitava su
     * ogni schermo stretto con un puntatore (una finestra piccola, un tablet col trackpad) e
     * anche sui telefoni, dove dopo un tocco il browser lascia lo stato `:hover` sulla riga
     * toccata. Quindi l'apertura deve vincere anche mentre il mouse e' sopra.
     */
    .advancedmenu-voce.aperta > .advancedmenu-tenda,
    .advancedmenu-voce.ha-figlie.aperta:hover > .advancedmenu-tenda,
    .advancedmenu-voce.ha-figlie.aperta:focus-within > .advancedmenu-tenda,
    .advancedmenu-barra-voce.aperta > .advancedmenu-tenda,
    .advancedmenu-barra-voce.ha-figlie.aperta:hover > .advancedmenu-tenda,
    .advancedmenu-barra-voce.ha-figlie.aperta:focus-within > .advancedmenu-tenda {
        display: block;
    }

    /*
     * LA FRECCIA DIVENTA UN COMANDO CON UNO SPAZIO SUO, e non un carattere in fondo alla riga.
     *
     * Il rilievo e' di Alessio, ed era misurabile: il bersaglio della freccia era 22 x 19 pixel,
     * contro i 44 x 44 che chiede Apple e i 48 x 48 di Material - un quarto dell'area. Su una
     * riga dove il nome porta alla categoria e la freccia apre il livello, un bersaglio cosi'
     * piccolo non e' solo difficile da prendere: fa aprire la pagina quando si voleva la tenda.
     *
     * Quindi la freccia prende 48 pixel di larghezza e tutta l'altezza della riga, e si stacca
     * dal nome con una linea e un fondo appena accennato: deve leggersi come un comando a se',
     * senza diventare un bottone - sono cento righe, e cento bottoni sarebbero un rumore.
     */
    /*
     * La riga si regola insieme alla freccia. Dando alla freccia 44 pixel di altezza minima e
     * lasciando il rientro verticale di prima, la riga passava da 40 a 62 pixel e il cassetto si
     * allungava di piu' di meta': su sedici voci sono due schermate in piu' da scorrere. Cosi'
     * invece il rientro verticale lo tiene la riga (44 di minimo, che e' la stessa misura), il
     * riquadro della freccia la riempie, e la riga si ferma a 52: dentro l'intervallo che Material
     * indica per le voci di elenco toccabili, senza far crescere l'elenco.
     */
    .advancedmenu-voce > a,
    .advancedmenu-sotto > a,
    .advancedmenu-barra-voce > a {
        min-height: 44px;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-right: 0;
    }

    /*
     * Il riquadro sta fermo e gira solo il segno dentro: se si ruotasse la freccia intera,
     * girerebbero anche il bordo e il fondo. Il carattere del template si nasconde con
     * font-size 0 e si ridisegna nel ::before, che e' l'unica parte che ruota.
     */
    .advancedmenu-freccia {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        flex: 0 0 48px;
        min-height: 44px;
        margin-left: 10px;
        padding: 0;
        font-size: 0;
        border-left: 1px solid var(--am-bordo, #E5E7EB);
        background: rgba(0, 0, 0, .025);
        transform: none;
        position: relative;
        /* Su desktop la freccia sta al 55%, perche' li' accompagna il nome; qui e' il comando. */
        opacity: 1;
    }

    /*
     * 0.9.4 - IL SEGNO E' UN «+» CHE DIVENTA «−», come nei filtri delle categorie. Alessio: «puoi
     * usare lo stesso sistema del + nel megamenu delle categorie? perche' quella freccetta passa
     * molto inosservata». Una freccia girata di lato su telefono non dice «qui si apre», e al 55%
     * di opacita' (ereditato dal desktop) si leggeva appena. I due tratti sono disegnati, non un
     * carattere: stanno al centro esatto del riquadro con qualunque font del tema, e il tratto
     * verticale si piega e sparisce quando la voce e' aperta.
     *
     * Lo stato aperto guarda solo la freccia della voce stessa (> a >): prima la regola prendeva
     * anche le frecce delle sottocategorie dentro una voce aperta, che sembravano aperte da chiuse.
     */
    .advancedmenu-freccia::before,
    .advancedmenu-freccia::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 1px;
        background: currentColor;
        transform: translate(-50%, -50%);
        transition: transform .2s ease, opacity .15s ease;
    }

    .advancedmenu-freccia::before {
        width: 14px;
        height: 2px;
    }

    .advancedmenu-freccia::after {
        width: 2px;
        height: 14px;
    }

    .advancedmenu-voce.aperta > a > .advancedmenu-freccia::after,
    .advancedmenu-barra-voce.aperta > a > .advancedmenu-freccia::after,
    .advancedmenu-sotto.aperta > a > .advancedmenu-freccia::after {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .advancedmenu-freccia::before,
        .advancedmenu-freccia::after {
            transition: none;
        }
    }

    /* Su schermo stretto i gruppi stanno sempre in colonna unica, e la tenda non scorre da
       sola: scorre la pagina, che e' il gesto che ci si aspetta con un dito. */
    .advancedmenu-gruppi {
        grid-template-columns: 1fr;
        max-height: none;
        overflow: visible;
    }

    /*
     * Il terzo livello non puo' aprirsi di lato dove non c'e' lato: torna in linea, rientrato,
     * e si apre al tocco della freccia come tutti gli altri.
     */
    .advancedmenu-nipoti,
    .advancedmenu-sotto.ha-nipoti:hover > .advancedmenu-nipoti,
    .advancedmenu-sotto.ha-nipoti:focus-within > .advancedmenu-nipoti {
        position: static;
        display: none;
        width: 100%;
        min-height: 0;
    }

    /*
     * Niente riquadro dentro il riquadro: in linea il terzo livello e' solo un rientro, e la
     * strada per il mouse - che qui non serve, perche' si apre al tocco - non esiste.
     */
    .advancedmenu-nipoti-riquadro,
    .advancedmenu-nipoti-riquadro.ha-promo {
        display: block;
        min-width: 0;
        max-width: none;
        /* L'altezza minima serve al riquadro che si apre di lato: in linea aprirebbe un vuoto. */
        min-height: 0;
        padding: 0 0 8px 22px;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Stessa ragione del secondo livello: l'apertura al tocco deve battere il :hover che chiude. */
    .advancedmenu-sotto.aperta > .advancedmenu-nipoti,
    .advancedmenu-sotto.ha-nipoti.aperta:hover > .advancedmenu-nipoti,
    .advancedmenu-sotto.ha-nipoti.aperta:focus-within > .advancedmenu-nipoti {
        display: block;
    }

    .advancedmenu-testata--terza {
        display: none;
    }

    .advancedmenu-testata {
        display: none;
    }

    /* La promozione va sotto l'elenco e a tutta larghezza, non in colonna. */
    .advancedmenu-promo {
        width: 100%;
        margin-top: 10px;
    }

    .advancedmenu-nome {
        white-space: normal;
    }
}