/* ─────────────────────────────────────────────────────────────────────────────
   assets/mega-l4.css
   Quarta colonna del mega-menu: i MODELLI della serie selezionata.

   File separato di proposito: stile.css e' il foglio del tema e non lo tocco.
   Qui c'e' solo cio' che serve alla colonna nuova, piu' il minimo per far
   stare in fila le quattro colonne. Va incluso DOPO stile.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* Le colonne devono stare affiancate. Se stile.css usa gia' flex/grid qui,
   questa riga e' innocua; se usava due sole colonne, ora ne accoglie tre. */
.desktop-mega-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.desktop-mega-l4-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 0 4px 8px;
  border-left: 1px solid rgba(0, 0, 0, .07);
}

.desktop-mega-l4-wrap[hidden] { display: none; }

.desktop-mega-l4 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-mega-l4 li + li { margin-top: 2px; }

.desktop-mega-l4 a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
  font-size: .93rem;
  line-height: 1.3;
}

.desktop-mega-l4 a:hover,
.desktop-mega-l4 a:focus-visible {
  background: #f1f5f9;
  color: #0f172a;
}

/* La serie attualmente aperta nella colonna 3: si deve capire quale
   sta alimentando la colonna 4. */
.desktop-mega-l3 li.is-active > a {
  background: #eef2f7;
  color: #0f172a;
  font-weight: 600;
}

/* La serie che HA modelli mostra un segno di "c'e' dell'altro". */
.desktop-mega-l3 li.has-children > a::after {
  content: "\f285";               /* bi-chevron-right */
  font-family: "bootstrap-icons";
  float: right;
  font-size: .72em;
  opacity: .45;
}

@media (max-width: 1200px) {
  /* Su schermi stretti la quarta colonna toglie respiro alle altre. */
  .desktop-mega-l4-wrap { display: none; }
}