/* ==========================================================================
   Intestazione: barra, menu, menu grande "Prodotti", selettore lingua, menu mobile
   ========================================================================== */
#intestazione { position: relative; height: 86px; z-index: 200; }
.barra { height: 86px; background: var(--sfondo-header); display: flex; align-items: center; justify-content: space-between; padding: 0 25px 0 40px; width: 100%; top: 0; left: 0; }
.barra .logo { display: block; width: 67px; height: 47px; flex: 0 0 auto; margin-top: -1px; }
.barra .logo img { width: 67px; height: 47px; }

.menu { position: absolute; left: 0; right: 0; top: 0; height: 86px; width: max-content; margin: 0 auto; }
.menu > ul { display: flex; align-items: center; height: 100%; }
.menu > ul > li { position: static; display: flex; align-items: center; height: 100%; }
.menu > ul > li + li { margin-left: 5px; }
.menu > ul > li:nth-child(4) { margin-left: 0; }
.menu > ul > li > a, .menu > ul > li > .voce {
  display: inline-flex; align-items: center; height: 35px; padding: 0 20px; margin-top: -1px; color: var(--testo);
  font: 600 14px/19px var(--f-ui); text-transform: uppercase;
}
.menu > ul > li > a:hover, .menu > ul > li.attiva > a, .menu > ul > li.attiva > .voce { color: var(--accento); }
.menu .freccia { width: 10px; height: 6px; margin-left: 6px; flex: 0 0 auto; }

/* menu grande Prodotti */
.menu-grande {
  position: fixed; left: 0; top: 86px; width: 100%; height: 356px; background: var(--sfondo); border: 1px solid var(--verde);
  box-shadow: 0 0 20px rgba(78, 60, 49, .05); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease, visibility .3s;
  display: grid; grid-template-columns: 40px 252px 41px 230px 25px 230px 25px 230px 23px 303px; align-content: start; padding-top: 40px; z-index: 300;
}
li.con-menu-grande:hover > .menu-grande, li.con-menu-grande:focus-within > .menu-grande { opacity: 1; visibility: visible; transform: none; }
.menu-grande .foto-sx { grid-column: 2; width: 252px; height: 168px; object-fit: cover; }
.menu-grande .foto-dx { grid-column: 10; width: 303px; height: 204px; object-fit: cover; }
.menu-grande .colonna { padding-top: 0; }
.menu-grande .colonna:nth-of-type(1) { grid-column: 4; } .menu-grande .colonna:nth-of-type(2) { grid-column: 6; } .menu-grande .colonna:nth-of-type(3) { grid-column: 8; }
.menu-grande h6 { font: 400 20.82px/37px var(--f-titoli); color: var(--testo); width: 214px; border-bottom: 1px solid var(--testo); height: 38px; margin-bottom: 20px; }
.menu-grande .colonna.senza-titolo { padding-top: 0; }
.menu-grande .colonna ul li { margin-bottom: 16px; }
.menu-grande .colonna ul a { display: block; font: 600 14px/19px var(--f-ui); text-transform: uppercase; color: var(--testo); }
.menu-grande .colonna ul a:hover { color: var(--accento); }

/* azioni a destra */
.azioni { display: flex; align-items: center; gap: 15px; }
.lingua { text-decoration: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r); background: linear-gradient(45deg, #DCE5D5 50%, #4B5D3A 50%); display: grid; place-items: center; }
.lingua__bandiera { display: block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(31, 45, 24, .22); }
.lingua__bandiera svg { display: block; width: 100%; height: 100%; }
.btn-contatti { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; background: var(--verde); color: var(--bianco); font: 700 12.8px/1 var(--f-testo); letter-spacing: .02em; text-transform: uppercase; }
.btn-contatti:hover { background: var(--accento); color: var(--bianco); }

/* comportamento allo scroll: ancorata in alto, poi scende e sale (come sul sito attuale) */
#intestazione.fluttuante .barra { position: fixed; z-index: 400; box-shadow: 0 2px 14px rgba(0, 0, 0, .08); transition: transform .35s ease; }
#intestazione.fluttuante .barra.nascosta { transform: translateY(-100%); }
#intestazione.fluttuante .menu-grande { top: 86px; }

/* menu mobile */
.hamburger { display: none; width: 40px; height: 40px; border: 0; background: transparent; padding: 0; }
.hamburger span { display: block; width: 40px; height: 1px; background: var(--testo); margin: 0 0 7px; transition: transform .3s ease, opacity .3s ease; }
.menu-mobile { display: none; }

@media (max-width: 1024px) {
  #intestazione { height: 56px; }
  .barra { height: 89px; align-items: flex-start; padding: 0 0 0 10px; }
  .barra .logo { margin-top: 21px; margin-left: 0; }
  .azioni { position: absolute; top: 0; right: 0; margin: 0; gap: 12px; align-items: flex-start; }
  .lingua { margin-top: 35px; width: 28px; height: 28px; }
  .lingua__bandiera { width: 26px; height: 26px; }
  .menu { display: none; }
  .hamburger { display: block; order: 3; margin: 34px 0 0; width: 40px; height: 21px; }
  .menu-mobile { display: block; position: fixed; top: 0; right: 0; width: 320px; max-width: 86vw; height: 100%; background: var(--sfondo-header); transform: translateX(100%); transition: transform .35s ease; z-index: 600; padding: 24px; overflow-y: auto; box-shadow: -8px 0 24px rgba(0, 0, 0, .12); }
  .menu-mobile.aperto { transform: none; }
  .menu-mobile { visibility: hidden; transition: transform .35s ease, visibility .35s; }
  .menu-mobile.aperto { visibility: visible; }
  .menu-mobile .chiudi { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: var(--testo); }
  .menu-mobile ul { margin-top: 48px; }
  .menu-mobile li { border-bottom: 1px solid rgba(45, 45, 45, .12); }
  .menu-mobile li a, .menu-mobile li button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 14px 0; font: 600 14px/19px var(--f-ui); text-transform: uppercase; color: var(--testo); background: transparent; border: 0; text-align: left; }
  .menu-mobile li.attiva > a { color: var(--accento); }
  .menu-mobile .sotto { display: none; padding: 0 0 10px 12px; }
  .menu-mobile .sotto.aperto { display: block; }
  .menu-mobile .sotto a { font-weight: 600; padding: 8px 0; border: 0; }
  .velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 500; }
  .velo.aperto { opacity: 1; visibility: visible; }
  .btn-contatti { display: none; }
}