/* Wrapper del modulo menu che hai marcato con classe modulo = mega-nav */
.mega-nav { position: relative; }

/* Livello 1 (radice) */
.mega-nav ul.nav, 
.mega-nav ul.menu { /* compatibilità template diversi */
  display:flex; gap:20px; align-items:center; list-style:none; margin:0; padding:0;
}

/* La voce "Prodotti" è parent: apre il pannello */
.mega-nav li.parent { position:relative; }

/* Pannello mega: usiamo il <ul> di livello 2 come container */
.mega-nav li.parent > ul {
  position:absolute; left:0; top:100%;
  width:min(400px, 92vw);
  display:grid;
  grid-template-columns: repeat(1, minmax(200px,1fr)); /* 3 colonne (adatta liberamente) */
  gap:0px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  padding:20px;
  margin:12px 0 0;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:99;
}

/* Mostra al passaggio */
.mega-nav li.parent:hover > ul,
.mega-nav li.parent:focus-within > ul {
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Colonne = voci di livello 2 (li del sotto-ul) */
.mega-nav li.parent > ul > li {
  display:flex; flex-direction:column; gap:6px;
}

/* Le "Intestazione menu" (level-2) come heading colonna */
.mega-nav li.parent > ul > li > a,
.mega-nav li.parent > ul > li > span {
  /*font-weight: 700;*/
  text-transform: uppercase;
  color: #0a5898;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

/* <li> con bordo + underline animato */
.mega-nav li.parent > ul > li {
  position: relative;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* underline animato */
.mega-nav li.parent > ul > li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;       /* subito sotto al contenuto del li */
  width: 100%;
  height: 2px;
  background-color: #0a5898;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.mega-nav li.parent > ul > li:hover::after {
  transform: scaleX(1);
}

/* Voci di livello 3 (link reali) */
.mega-nav li.parent > ul > li > ul {
  list-style:none; margin:6px 0 0; padding:0;
  display:grid; gap:6px;
}
.mega-nav li.parent > ul > li > ul a {
  display:flex; align-items:center; gap:.5rem;
  padding:6px 0;
  text-decoration:none; color:#222;
  line-height:1.3;
}
.mega-nav li.parent > ul > li > ul a:hover { color:#0a5898; text-decoration:underline; }

/* Icone se usi "Immagine voce di menu" 
.mega-nav img { max-height:18px; width:auto; }*/

/* Icone se usi "Classe CSS del link" tipo .icon-adesivi */
.mega-nav a.icon-adesivi::before { content:""; width:18px; height:18px; background:url(/media/icons/adesivi.svg) no-repeat center/contain; display:inline-block; }

/* Accessibilità caret per il parent (opzionale, dipende dal tuo template) */
.mega-nav > ul > li.parent > a::after {
  content:""; border:6px solid transparent; border-top-color:currentColor; margin-left:.4rem; display:inline-block; transform:translateY(2px);
}

/* Mobile: trasformalo in blocchi impilati */
@media (max-width: 992px){
  .mega-nav li.parent > ul {
    position:static; width:100%;
    grid-template-columns:1fr; gap:12px; padding:14px; margin:8px 0 0;
    box-shadow:none; border-radius:12px;
    opacity:1; visibility:visible; transform:none; /* aperto di default o gestisci con JS del template */
  }
}
/* Nota sotto al titolo (megamenu e mobile) */
.menu-item-note{
  display:block;
  margin-top:4px;
  font-size:14px;
  line-height:1.4 !important;
  color:#333 !important;      /* colore richiesto */
  text-decoration:none;
  cursor:pointer;
  text-transform: none !important;
  padding-top: 0 !important;
}

/* In header/overlay scuri puoi forzare bianco solo se serve leggibilità */
/* #mobileMenuOverlay .menu-item-note{ color:#fff; } */

.menu-item-note-btn{
  background:none;
  border:0;
  padding:0;
  text-align:left;
  width:100%;
}

#mobileMenuOverlay .menu-item-note{ color:#fff !important; opacity:.9; }

/* Struttura con icona a sinistra nelle VOCI DI SOTTOMENU */
#mainMenu .mod-menu__sub > li > a,
#mainMenu .mod-menu__sub > li > span.mod-menu__heading,
#mobileMenuOverlay .mod-menu__sub > li > a,
#mobileMenuOverlay .mod-menu__sub > li > span.mod-menu__heading{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Icona */
.menu-icon{
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 20px;
}

/* Testo + titolo */
.menu-text{
  display: inline-block;
}

/* Riga icona + titolo/nota (solo sottovoci) */
.menu-row{
  display:flex;
  align-items:flex-start;
  gap:25px;
}
.menu-icon-lg{
  width:36px;          /* più grande */
  height:36px;
  object-fit:contain;
  flex:0 0 36px;
}
.menu-col{
  display:flex;
  flex-direction:column;
  min-width:0; /* evita overflow del testo lungo */
}

.menu-item-note-btn{
  background:none; border:0; padding:0; text-align:left; cursor:pointer;
}

/* Mobile: rendi le icone bianche su overlay blu */
@media (max-width: 992px){
  #mobileMenuOverlay .menu-icon-lg{
    filter: brightness(0) invert(1);
  }
  /* Se preferisci NASCONDERLE su mobile:
     #mobileMenuOverlay .menu-icon-lg{ display:none; } */
}
/* Desktop (header chiaro): uppercase + colore brand */
.mega-nav .menu-row .menu-col > a,
.mega-nav .menu-row .menu-col > span.mod-menu__heading{
  text-transform: uppercase;
  color: #0a5898;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
}

/* Hover desktop: stessa palette del mega */
.mega-nav .menu-row .menu-col > a:hover{
  color: #0a5898;
  text-decoration: underline;
}

/* Mobile overlay (sfondo blu): titolo bianco, sempre uppercase */
@media (max-width: 992px){
  #mobileMenuOverlay .menu-row .menu-col > a,
  #mobileMenuOverlay .menu-row .menu-col > span.mod-menu__heading{
    color: #fff !important;
    text-transform: uppercase;
  }
  #mobileMenuOverlay .menu-text {
	  font-weight: 300;
	  font-size: 16px;
  }
  #mobileMenuOverlay .menu-item-note {
	  font-weight: 300;
	  font-size: 14px;
  }
}