/*
 * La testata con il menu in riga e i mega menu (schermi larghi).
 *
 * Questo foglio non ha dentro nessuna media query: la soglia la decide il
 * tema quando lo carica (attributo «media» del tag), dall impostazione
 * «Il menu diventa a scomparsa sotto». Cosi lo stesso tema puo passare al
 * menu col pulsante a 900, a 1200 o a 1400 pixel a seconda di quante voci
 * ha il negozio, senza riscrivere una riga di CSS.
 */


  /* terzo livello dei menu normali: di lato */
  .iw-menu .sub-menu .sub-menu { top: calc(-1 * var(--iw-spazio-2)); left: 100%; }
  /* l ultima voce sta vicino al bordo destro: i suoi sottomenu si aprono verso
     sinistra. Con voci lunghe (in francese «Écharpes et bonnets») il terzo
     livello usciva dallo schermo anche chiuso, e la pagina scorreva di lato */
  .iw-menu__lista > .menu-item:last-child > .sub-menu { right: calc(-1 * var(--iw-spazio-3)); left: auto; }
  .iw-menu__lista > .menu-item:last-child .sub-menu .sub-menu { right: 100%; left: auto; }

  .iw-menu .menu-item.iw-mega { position: static; }
  .iw-mega__pannello {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 20;
    background: var(--iw-superficie);
    border-top: 1px solid var(--iw-bordo);
    box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--iw-transizione), transform var(--iw-transizione), visibility 0s linear 160ms;
  }
  /* un ponte invisibile fra la voce e il pannello: scendendo col mouse non si chiude */
  .iw-mega__pannello::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 30px; }
  .iw-mega:hover > .iw-mega__pannello,
  .iw-mega:focus-within > .iw-mega__pannello,
  .iw-mega.iw-menu__voce--aperta > .iw-mega__pannello { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .iw-mega__griglia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--iw-spazio-7); padding-block: var(--iw-spazio-6) var(--iw-spazio-7); }
  .iw-menu .iw-mega__colonne {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    align-content: start;
    gap: var(--iw-spazio-5) var(--iw-spazio-6);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: inherit; /* visible scavalcherebbe il pannello nascosto e resterebbe cliccabile sopra la pagina */
    transform: none;
  }
  .iw-menu .iw-mega__colonne > li > a { padding: 0 0 var(--iw-spazio-2); font-weight: 600; }
  .iw-menu .iw-mega__colonne > li > a:hover { background: none; }
  .iw-menu .iw-mega__colonne .sub-menu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: inherit; /* visible scavalcherebbe il pannello nascosto e resterebbe cliccabile sopra la pagina */
    transform: none;
  }
  .iw-menu .iw-mega__colonne .sub-menu a { padding: 6px 0; color: var(--iw-testo-tenue); font-weight: 400; border-radius: 0; }
  .iw-menu .iw-mega__colonne .sub-menu a:hover { background: none; color: var(--iw-testo); text-decoration: underline; }
  .iw-mega__promo { position: relative; display: block; width: 300px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--iw-raggio); background: var(--iw-fondo-tenue); color: var(--iw-testo); text-decoration: none; }
  .iw-mega__promo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
  .iw-mega__promo:hover img { transform: scale(1.04); }
  .iw-menu .iw-mega__promo { padding: 0; }
  .iw-mega__promo-testo { position: absolute; right: var(--iw-spazio-3); bottom: var(--iw-spazio-3); left: var(--iw-spazio-3); display: flex; align-items: center; justify-content: space-between; gap: var(--iw-spazio-2); padding: var(--iw-spazio-3) var(--iw-spazio-4); border-radius: var(--iw-raggio-piccolo); background: var(--iw-superficie); font-weight: 600; }
  .iw-mega__promo-testo .iw-icona { width: 18px; height: 18px; }

/* su schermo largo i due gusci del cassetto non esistono: la riga del menu
   resta quella di sempre */
/* i pezzi che esistono solo dentro il cassetto: qui il menu e una riga sola,
   e il corpo del cassetto sparisce (display:contents), quindi quello che ci
   sta dentro finirebbe in mezzo alla testata */
.iw-menu__testa, .iw-menu__aiuto, .iw-menu__utili, .iw-menu .iw-lingue { display: none; }
.iw-menu__corpo { display: contents; }

  /* grandezza del menu dal gestore (solo le voci principali); il menu «fitto», in riga col logo, la stringe un poco */
  .iw-menu__lista > li > a { font-size: var(--iw-menu-corpo, 0.95rem); }
  .iw-menu--fitto .iw-menu__lista > li > a { font-size: calc(var(--iw-menu-corpo, 0.95rem) * 0.97); }
  .iw-menu-maiuscolo .iw-menu__lista > li > a { text-transform: uppercase; letter-spacing: 0.08em; }