/* ============================================================================
   MENU-PRODOTTO.CSS — navigazione fra le pagine figlie di un prodotto
   ============================================================================
   A COSA SERVE: le pagine sotto un prodotto (es. Revisione Legale GB ->
   Attivita' preliminare, Pianificazione, ...) avevano un menu in colonna
   laterale fissa. La colonna e. rimasta, ma con l.aspetto dei menu di oggi:

     DESKTOP (>980px)  una COLONNA fissa a sinistra, che scorre in verticale
                       quando le voci sono piu. dello schermo.
     TABLET/MOBILE     il pulsante "+" e il pannello che scorre da destra,
                       IDENTICI a quelli dei Focus in functions.php
                       (#magazine-fab / #magazine-pannello).

   PERCHE' UN FILE A PARTE e non dentro gb-menu.css: quel file dichiara in
   testa di essere una "copia IDENTICA" del CSS che stava nei Moduli Codice
   del sito vivo, ed e' escluso dal linter proprio per quel motivo. Questo
   invece e' codice NUOVO: sta di la' dal confine, e' scritto con i token e
   il linter puo' controllarlo.

   IL MARKUP NON STA QUI: sta in un MODULO GLOBALE Divi (vedi la cartella
   menu-prodotto/ del progetto). Cosi' venti pagine richiamano lo stesso
   modulo e i link si correggono in un posto solo.

   ⚠ UNA SOLA LISTA NEL MARKUP. Il pannello mobile NON ha una seconda copia
   delle voci: se le clona il JS dalla fascia. Il menu vecchio aveva l'elenco
   scritto due volte (desktop e mobile) e bastava aggiornarne uno per averli
   diversi senza accorgersene.
   ============================================================================ */


/* ============================================================
   LA COLONNA LATERALE (desktop)

   Era una fascia orizzontale sul piede, ed e' tornata a essere una colonna a
   sinistra come nel menu vecchio — ma con l'aspetto dei menu di oggi, non
   con quello di prima: voci .voce-link, icone a maschera, nessun riquadro.

   ⚠ LA LEVA --alto NON ESISTE PIU'. Serviva a scegliere fra fascia sul piede
   e fascia sotto la testata: con la colonna la domanda non si pone. Se la
   trovi ancora scritta in un modulo Divi, toglila — non fa niente, ma fa
   credere che ci sia una scelta da fare.

   LA MISURA DELLA TESTATA INVECE SERVE ANCORA, e adesso sempre: la colonna
   parte sotto la testata, quindi il JS misura #header-section (o quello che
   dice data-testata) a ogni fotogramma utile. Vedi menu-prodotto.js.
   ============================================================ */
/* ⚠ QUESTE DUE STANNO SU :root, NON SULLA <nav>, E NON E' UNA SVISTA.
   Le usa anche .ha-menu-prodotto-colonna, che il JS mette sull'AREA CONTENUTI
   di Divi — un elemento che sta FUORI dalla <nav> e che quindi non erediterebbe
   niente. Dichiarate sulla <nav>, la colonna si allargava e il contenuto no:
   il testo finiva sotto la colonna e il conto non tornava piu'.
   E' lo stesso motivo per cui anche l'icona delle voci sta su :root.

   COME SI GESTISCE IL MARGINE DELLA PAGINA:
     --menu-prodotto-colonna  larghezza della colonna. Cambiala QUI e basta:
                              la colonna e il rientro del contenuto la leggono
                              tutti e due, quindi restano per forza d'accordo.
     --menu-prodotto-stacco   aria fra il bordo della colonna e l'inizio del
                              testo. Di serie 0: il contenuto comincia dove
                              finisce la colonna. Alzala se il testo sta
                              troppo appiccicato.
   A DESTRA non tocchiamo niente: quel margine lo decide la larghezza delle
   righe Divi della pagina, ed e' giusto che resti una scelta della pagina. */
:root{
  --menu-prodotto-colonna: 250px;   /* larghezza della colonna, come l.originale */
  --menu-prodotto-stacco: 0px;      /* aria fra colonna e contenuto */
  /* La scrive il JS: dove finisce la testata, misurata a ogni fotogramma
     utile. La colonna comincia li'. */
  --menu-prodotto-testata: 0px;
}
/* Il carattere resta sul COMPONENTE, non su :root: un file di un menu non ha
   nessun diritto di dettare il font a tutto il documento. Le variabili qui
   sopra stanno su :root solo perche' devono arrivare anche fuori dalla <nav>. */
.menu-prodotto{ font-family:var(--gb-font); }
.menu-prodotto-fascia{
  position:fixed;
  left:0; top:var(--menu-prodotto-testata); bottom:0;
  width:var(--menu-prodotto-colonna);
  z-index:9990;                 /* sotto ai menu offcanvas del sito (99997+) */
  display:flex; flex-direction:column; align-items:stretch;
  gap:0;
  padding:18px 14px 26px;
  background:var(--gb-sfondo);
  border-right:1px solid var(--gb-bordo-tenue);
  box-shadow:6px 0 22px rgba(25,62,93,.08);
  /* BARRA DI SCORRIMENTO come nell'originale: le voci possono essere piu'
     dell'altezza dello schermo, e la colonna scorre invece di tagliarle. */
  overflow-y:auto; overflow-x:hidden;
}
/* Scorrimento discreto, stesso trattamento del pannello dei Focus. */
.menu-prodotto-fascia::-webkit-scrollbar{ width:10px; background-color:#fff; }
.menu-prodotto-fascia::-webkit-scrollbar-track{ background-color:#fff; }
.menu-prodotto-fascia::-webkit-scrollbar-thumb{ background-color:#c9d3dc; border-radius:6px; }
.menu-prodotto-fascia:hover::-webkit-scrollbar-thumb{ background-color:#999; }

/* Il <nav> non tiene piu' il posto di niente: la colonna e' fissa a sinistra
   e lo spazio glielo fa il contenuto della pagina (vedi .ha-menu-prodotto-colonna
   piu' sotto, applicata dal JS all'area contenuti di Divi). */
.menu-prodotto{ display:block; }

/* ============================================================
   LE ICONE — maschere, come in tutti gli altri menu del sito.
   L'immagine non si vede: fa da STAMPO, e il colore lo mette il CSS
   (blu di riposo, arancio al passaggio). Cosi' la stessa icona serve
   tutti gli stati senza doverne disegnare due versioni.

   UNA SOLA URL NEL MARKUP, non due. Nei moduli del menu del sito ogni
   icona e' scritta due volte per riga (-webkit-mask-image e mask-image):
   quaranta voci = ottanta indirizzi da tenere allineati a mano. Qui la
   riga inline scrive UNA variabile e il CSS la usa per entrambe.
   ============================================================ */
/* ⚠ LA VARIABILE STA SU :root, NON SU .menu-prodotto. Non e' pigrizia: il
   pannello del "+" lo attacca il JS a <body>, quindi e' FUORI dalla <nav> e
   una variabile dichiarata li' non gli arriverebbe — le voci del pannello
   resterebbero senza icona. Stesso motivo per cui il "+" non compariva.
   Icona uguale per tutte le voci, come fanno i Focus (leggi.png su ogni
   sottocategoria). Si cambia qui per tutte, oppure su una singola voce con
   style="--menu-prodotto-icona:url('...')" sul suo <a>. */
:root{
  --menu-prodotto-icona-voce: url("https://www.softwaregb.it/wp-content/uploads/leggi.png");
}

/* IL PRODOTTO — stessa costruzione di .voce-rich nel menu principale:
   box icona, poi titolo e sottotitolo incolonnati. Resta fermo mentre le
   voci scorrono: e' il ritorno al genitore, non una voce fra le altre. */
/* Valori presi UNO A UNO da .voce-rich in gb-menu.css — gap 14, padding 8/10,
   raggio 10, hover #F8F9FB con scarto di 4px. Non sono arrotondati "a occhio":
   questa riga sta a pochi centimetri dal menu vero, e mezzo pixel di
   differenza sul rientro si vede quando le due cose stanno aperte insieme. */
.menu-prodotto-prodotto{
  flex:0 0 auto;
  max-width:100%;
  display:flex; align-items:center; gap:14px;
  padding:8px 10px; border-radius:10px;
  background:none;
  text-decoration:none !important;
  transition:background-color .2s ease, transform .2s ease;
  /* Riga arancione sotto, come la linea del pannello dei Focus: separa il
     prodotto dalle sue sezioni senza mettere un <hr> nel markup. */
  border-bottom:2px solid var(--gb-arancio);
  border-radius:10px 10px 0 0;
  margin-bottom:14px;
}
.menu-prodotto-prodotto:hover{ background-color:#F8F9FB; transform:translateX(4px); }

/* BOX e MASCHERA sono due elementi, non uno, ed e' la struttura del menu del
   sito (.icona-categoria-box che contiene .icona-categoria-mask). Servono
   separati perche' fanno due mestieri opposti: il box porta lo SFONDO, la
   maschera porta il COLORE DELL'ICONA — e su un elemento solo il
   background-color non puo' essere tutti e due.
   Nella fascia il box e' trasparente (icona "libera", come .icona-voce-box);
   nel pannello prende la tinta, come il collegamento Sistema Integrato. */
.menu-prodotto-icona-box{
  flex:0 0 auto;
  width:38px; height:38px; min-width:38px;   /* misure di .icona-voce-box */
  display:flex; align-items:center; justify-content:center;
  background:none;
  border-radius:9px;
}
.menu-prodotto-icona{
  flex:0 0 auto;
  width:22px; height:22px;                   /* misure di .icona-voce-mask */
  background-color:var(--gb-blu);
  -webkit-mask:var(--menu-prodotto-icona) no-repeat center / contain;
          mask:var(--menu-prodotto-icona) no-repeat center / contain;
  transition:background-color .2s ease;
}
.menu-prodotto-prodotto:hover .menu-prodotto-icona{ background-color:var(--gb-arancio); }

.menu-prodotto-testi{
  display:flex; flex-direction:column; justify-content:center;
  gap:1px; min-width:0;
}
/* >>> INIZIO COPIA FEDELE <<<
   Titolo e sottotitolo sono presi da .titolo-voce e .sottotitolo-voce del
   menu principale (gb-menu.css, blocco "voce ricca"): 15px/700 su #2B2B2B e
   12px/400 su #8A8A8A. Sono i valori che rendono questa voce indistinguibile
   da quelle del menu, che e' quello che serve. In token non esistono, e
   arrotondarli al token piu' vicino li farebbe passare il linter e nello
   stesso momento sfasare di un pelo rispetto al menu accanto. */
.menu-prodotto-titolo{
  display:block;
  color:#2B2B2B !important;
  font-size:15px; font-weight:700; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s ease;
}
.menu-prodotto-sottotitolo{
  display:block;
  color:#8A8A8A !important;
  font-size:12px; font-weight:400; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* >>> FINE COPIA FEDELE <<< */
.menu-prodotto-prodotto:hover .menu-prodotto-titolo{ color:var(--gb-arancio) !important; }

/* Le voci: una riga sola che scorre in orizzontale.
   scrollbar-width:none nasconde la barra, ma lo scorrimento resta —
   col dito, con la rotellina in orizzontale e con le frecce. */
.menu-prodotto-voci{
  flex:0 1 auto;
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  margin:0; padding:0; list-style:none;
  /* Lo scorrimento e' della COLONNA, non della lista: se lo tenesse la lista
     verrebbero due barre, una dentro l'altra, e quella di dentro comparirebbe
     solo passandoci sopra. Qui la lista cresce e la colonna scorre. */
  overflow:visible;
}
.menu-prodotto-voci > li{ list-style:none; }

/* NIENTE CONTORNO E NIENTE PILLOLA. Le voci degli altri menu del sito non ce
   l'hanno: sono icona + testo, e al passaggio si accende un fondo tenue con
   uno scarto di quattro pixel (.voce-rich in gb-menu.css fa esattamente
   questo). Sei contorni in fila facevano una pulsantiera, che e' un'altra
   cosa. Il fondo dell'hover resta, se no non si capisce dove si sta. */
/* Valori di .voce-link in gb-menu.css, quelli dello screen: 15px/500 su
   #555, gap 12, 8px di stacco fra una voce e l.altra, e al passaggio
   arancione con uno scarto di 8px. Niente maiuscolo e niente pillola: in
   colonna le voci sono un elenco, non una pulsantiera. */
/* >>> INIZIO COPIA FEDELE <<<
   Valori di .voce-link in gb-menu.css, quelli dello screen: 15px/500 su
   #555555, gap 12, 8px fra una voce e l.altra, hover arancio con scarto di
   8px, icona 20px. In token non esistono, e arrotondarli farebbe passare il
   linter e nello stesso momento sfasare questa colonna rispetto al menu del
   sito, che e. proprio la cosa che deve somigliare. */
.menu-prodotto-voci a{
  display:flex; align-items:center; gap:12px;
  margin:0 0 8px; padding:4px 0;
  border:0; border-radius:6px;
  background:none;
  color:#555555 !important;
  font-size:15px; font-weight:500;
  text-transform:none; letter-spacing:0; line-height:1.3;
  text-decoration:none !important;
  transition:color .2s ease-in-out, transform .2s ease-in-out;
}
/* L'ICONA DELLA VOCE E' UN ::before, NON UN <span> NEL MARKUP.
   Le voci hanno tutte la stessa icona (come i Focus), quindi metterla nel
   markup vorrebbe dire ripetere lo stesso indirizzo su ogni <li> — e in un
   modulo globale usato da venti pagine e' proprio quello che si evita.
   Cosi' il markup resta <li><a>testo</a></li> e basta. */
.menu-prodotto-voci a::before{
  content:''; flex:0 0 auto;
  width:20px; height:20px; min-width:20px;
  background-color:var(--gb-blu);
  -webkit-mask:var(--menu-prodotto-icona, var(--menu-prodotto-icona-voce)) no-repeat center / contain;
          mask:var(--menu-prodotto-icona, var(--menu-prodotto-icona-voce)) no-repeat center / contain;
  transition:background-color .2s ease;
}
.menu-prodotto-voci a:hover{
  color:#F07E00 !important;
  transform:translateX(8px);
}
/* >>> FINE COPIA FEDELE <<< */
.menu-prodotto-voci a:hover::before{ background-color:var(--gb-arancio); }

/* PAGINA CORRENTE — la mette il JS confrontando l'indirizzo, non il markup.
   Non puo' essere nel markup: il modulo e' GLOBALE, quindi l'HTML e' lo
   stesso identico su tutte le pagine che lo richiamano. */
/* Tolti i contorni, la voce attiva non puo' piu' essere una pillola blu piena:
   in mezzo a voci senza fondo sembrerebbe un pulsante finito li' per sbaglio.
   Fondo azzurro tenue e testo blu marcato — si vede, ma resta della stessa
   famiglia delle altre. */
.menu-prodotto-voci a.menu-prodotto-corrente{
  color:var(--gb-blu) !important;
  font-weight:800;
}
.menu-prodotto-voci a.menu-prodotto-corrente::before{ background-color:var(--gb-blu); }

/* ⚠ LE FRECCE SONO SPENTE. Servivano a scorrere la fascia orizzontale; la
   colonna scorre in verticale con la sua barra. Il markup le tiene ancora e
   il JS le lascia [hidden] da solo (non c.e. traboccamento orizzontale), ma
   qui si spengono in modo esplicito: se un giorno la colonna torna fascia,
   basta togliere questa riga.
   Se la colonna resta, si possono cancellare da markup, CSS e JS insieme. */
.menu-prodotto-scorri{ display:none !important; }
.menu-prodotto-voci a:focus-visible,
.menu-prodotto-prodotto:focus-visible{
  outline:3px solid var(--gb-arancio); outline-offset:2px;
}

/* LO SPAZIO PER LA COLONNA lo fa l'AREA CONTENUTI, non <body>.
   Su <body> il rientro sposterebbe anche la testata, che sta nel flusso ed e'
   larga quanto lo schermo: si vedrebbe rientrare di 250px insieme al resto.
   Il JS mette questa classe sul contenitore dei contenuti di Divi (di serie
   #et-main-area o .et-l--body, oppure quello che dice data-contenuto).
   Se non ne trova nessuno non fa niente e la colonna resta sopra la pagina,
   come faceva il menu vecchio: meglio una sovrapposizione che una testata
   storta. */
.ha-menu-prodotto-colonna{
  /* Niente valore di ripiego: il 250px scritto qui era una SECONDA copia del
     numero, e appena si cambiava la variabile le due misure divergevano in
     silenzio. Adesso il numero esiste in un punto solo, su :root. */
  padding-left:calc(var(--menu-prodotto-colonna) + var(--menu-prodotto-stacco));
  transition:padding-left .2s ease;
}

/* ============================================================
   >>> INIZIO COPIA FEDELE <<<
   IL "+" E IL PANNELLO (tablet e telefono)

   Copia fedele di #magazine-fab / #magazine-pannello in functions.php:
   stesse misure, stessi colori, stessa curva di apertura. Se un giorno
   cambia quello, va cambiato anche questo — sono due, non uno.
   z-index: FAB 99997 · overlay 99998 · pannello 99999, come li'.

   ⚠ I MARCATORI "COPIA FEDELE" NON SONO DECORAZIONE: il linter salta quello
   che sta fra i due, perche' qui dentro le misure sono in px fissi e devono
   restarci. Riscriverle in token le farebbe passare il controllo e nello
   stesso momento romperebbe l'unica cosa che questo blocco garantisce, cioe'
   che i due menu siano identici. Fuori dai marcatori il file e' controllato
   come gli altri: non allargarli per farci stare altro.
   ============================================================ */
.menu-prodotto-piu{
  position:fixed; bottom:100px; left:8px;
  width:50px; height:50px;
  display:none;                       /* lo accende la media query */
  align-items:center; justify-content:center;
  background:var(--gb-arancio);       /* = #F07E00, identico al FAB dei Focus */
  color:#fff;
  border:0 !important; border-radius:50%;
  font-size:30px !important; font-weight:300 !important; line-height:1 !important;
  padding:0 !important; margin:0 !important;
  cursor:pointer; z-index:99997;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:background-color .2s ease, transform .2s ease, opacity .25s ease;
}
/* #d96d00 non e' un token: e' il valore esatto dell'hover del FAB dei Focus,
   e qui conta che siano identici piu' che essere tokenizzati. */
.menu-prodotto-piu:hover{ background:#d96d00; transform:scale(1.08); }
body.menu-prodotto-aperto .menu-prodotto-piu{ opacity:0; pointer-events:none; }

.menu-prodotto-velo{
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,.5);
  z-index:99998;
  opacity:0; visibility:hidden; cursor:pointer;
  transition:opacity .4s ease, visibility .4s ease;
}
.menu-prodotto-velo.attivo{ opacity:1; visibility:visible; }

.menu-prodotto-pannello{
  position:fixed; top:0; right:0;
  height:100vh; width:0;
  z-index:99999;
  overflow-x:hidden; overflow-y:auto;
  background:#fff;
  box-shadow:-10px 0 30px rgba(0,0,0,.15);
  transition:width .4s cubic-bezier(.25,.8,.25,1);
}
.menu-prodotto-pannello.aperto{ width:100%; }

.menu-prodotto-pannello-dentro{
  position:relative; width:100%; min-height:100%;
  padding:15px 25px 60px 25px; text-align:left;
}
.menu-prodotto-chiudi{
  position:absolute; top:0; right:10px;
  background:none !important; border:0 !important;
  font-size:55px !important; font-weight:300 !important; line-height:1 !important;
  color:var(--gb-testo) !important;
  padding:0 !important; margin:0 !important;
  cursor:pointer; z-index:100000;
  transition:color .2s ease;
}
.menu-prodotto-chiudi:hover,
.menu-prodotto-chiudi:focus{ color:var(--gb-arancio) !important; }

/* IN CIMA AL PANNELLO: la riga del prodotto e' costruita come il collegamento
   "Sistema Integrato" del menu principale — box icona con la tinta dietro,
   testi a fianco, tutta la riga cliccabile, e al passaggio fondo tenue piu'
   scarto di 4px. I valori sono i suoi: box 54x42 su #FDF2E5 raggio 10,
   maschera 28px blu -> arancio, fondo hover #F8F9FB.
   Arriva come clone della fascia, quindi qui si ingrandisce: non si
   ricostruisce e non si scrive una seconda volta nel markup. */
.menu-prodotto-pannello-titolo{
  display:inline-flex; align-items:center; gap:12px;
  margin:0 0 4px -4px; padding:6px 14px 6px 4px;
  border-radius:10px;
  background:none !important;
  text-decoration:none !important;
  max-width:100%;
  transition:background-color .2s ease, transform .25s var(--gb-molla);
}
.menu-prodotto-pannello-titolo:hover{
  background-color:#F8F9FB !important;
  transform:translateX(4px);
}
.menu-prodotto-pannello-titolo .menu-prodotto-icona-box{
  width:54px; height:42px; min-width:54px;
  background-color:#FDF2E5;
}
.menu-prodotto-pannello-titolo .menu-prodotto-icona{ width:28px; height:28px; }
.menu-prodotto-pannello-titolo .menu-prodotto-titolo{
  color:var(--gb-blu) !important;
  font-size:20px; font-weight:800; line-height:1.1;
  letter-spacing:0.3px; text-transform:uppercase;
  white-space:normal;
}
.menu-prodotto-pannello-titolo .menu-prodotto-sottotitolo{
  font-size:13px; white-space:normal;
}
/* Il clone perde la classe .menu-prodotto-prodotto (il JS la sostituisce),
   quindi gli hover della fascia non lo raggiungono: vanno ridichiarati. */
.menu-prodotto-pannello-titolo:hover .menu-prodotto-icona{ background-color:var(--gb-arancio); }
.menu-prodotto-pannello-titolo:hover .menu-prodotto-titolo{ color:var(--gb-arancio) !important; }
.menu-prodotto-pannello-linea{
  border:0; border-top:2px solid var(--gb-arancio);
  margin:10px 0 25px 0; width:100%;
}
.menu-prodotto-pannello-voci{ margin:0; padding:0; list-style:none; }
.menu-prodotto-pannello-voci > li{ list-style:none; }
.menu-prodotto-pannello-voci a{
  display:flex !important; align-items:center; gap:15px;
  margin:0 0 15px 0 !important;
  padding:5px 0 5px 18px !important;
  background:transparent !important; border:0 !important;
  color:#555 !important;
  font-size:17px !important; font-weight:500 !important;
  text-transform:none; letter-spacing:0;
  text-decoration:none !important;
  transition:color .2s ease;
}
/* Le voci clonate perdono il selettore della fascia (il loro <ul> ha cambiato
   classe), quindi l'icona va ridichiarata qui — piu' grande, 24px come nei
   Focus invece dei 16px della pillola. */
.menu-prodotto-pannello-voci a::before{
  content:''; flex:0 0 auto;
  width:24px; height:24px;
  background-color:var(--gb-blu);
  -webkit-mask:var(--menu-prodotto-icona, var(--menu-prodotto-icona-voce)) no-repeat center / contain;
          mask:var(--menu-prodotto-icona, var(--menu-prodotto-icona-voce)) no-repeat center / contain;
  transition:background-color .2s ease;
}
.menu-prodotto-pannello-voci a:hover,
.menu-prodotto-pannello-voci a:focus{ color:var(--gb-arancio) !important; }
.menu-prodotto-pannello-voci a:hover::before,
.menu-prodotto-pannello-voci a:focus::before{ background-color:var(--gb-arancio); }
.menu-prodotto-pannello-voci a.menu-prodotto-corrente{
  color:var(--gb-blu) !important; font-weight:800 !important;
}
/* >>> FINE COPIA FEDELE <<< */

/* ---------- BREAKPOINT = quelli di Divi, 980 tablet e 767 telefono ---------- */
@media (max-width:980px){
  /* Sotto i 980 comanda il "+", come nei Focus.
     La colonna sparisce SOLO se il JS e' vivo (classe .menu-prodotto--js):
     se il JS non parte il "+" non esisterebbe, e nascondere anche la colonna
     lascerebbe la pagina senza nessuna navigazione. Cosi' invece la colonna
     resta e si scorre. */
  .menu-prodotto--js .menu-prodotto-fascia{ display:none; }
  /* E il contenuto si riprende i 250px: sotto i 980 la colonna non c'e'. */
  .ha-menu-prodotto-colonna{ padding-left:0; }
  /* ⚠ QUI NIENTE PREFISSO .menu-prodotto--js, ed e' voluto.
     Il "+" lo attacca il JS a <body>, quindi e' un FRATELLO della <nav>, non
     un discendente: ".menu-prodotto--js .menu-prodotto-piu" non scatterebbe
     mai e il pulsante non comparirebbe. Il prefisso qui non serve nemmeno,
     perche' il "+" esiste solo se il JS l'ha creato: la sua presenza e' gia'
     la prova che il JS e' vivo. */
  .menu-prodotto-piu{ display:flex; }
}
@media (max-width:767px){
  /* niente da stringere: sotto i 980 la colonna non c.e. gia. piu. */
}

/* Chi ha chiesto meno animazioni non deve vedere la fascia scorrere da sola. */
@media (prefers-reduced-motion: reduce){
  .menu-prodotto-voci{ scroll-behavior:auto; }
  .menu-prodotto-pannello{ transition:none; }
}
