/* ================= HEADER =================
   Tre fasce: utilita' (sottile, scura) / barra principale (logo, ricerca, azioni)
   / navigazione (mega menu). Su mobile diventa: menu, logo, ricerca, carrello.
   La ricerca ha il posto centrale: su 5.533 articoli tecnici e' l'ingresso
   piu' usato al catalogo, piu' del menu. ========================= */

.fs-header{position:relative;z-index:200;background:var(--bianco);border-bottom:1px solid var(--bordo)}

/* --- fascia utilita' --- */
.fs-utilita{background:var(--blu-900);color:var(--blu-100);font-size:var(--t-xs)}
.fs-utilita__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:34px}
.fs-utilita ul{list-style:none;display:flex;gap:var(--s5);margin:0;padding:0}
.fs-utilita li{display:flex;align-items:center;gap:var(--s2);white-space:nowrap}
.fs-utilita svg{width:14px;height:14px;flex:none;opacity:.85}
.fs-utilita a{color:#fff}
.fs-utilita__usp{overflow:hidden}
@media(max-width:900px){
  .fs-utilita__servizi{display:none}
  .fs-utilita__usp li:not(:first-child){display:none}
  .fs-utilita__in{justify-content:center}
}

/* --- barra principale --- */
.fs-barra{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s5);padding:var(--s4) 0}
@media(max-width:1023px){
  .fs-barra{grid-template-columns:auto 1fr auto;gap:var(--s3);padding:var(--s3) 0}
}

.fs-logo{display:flex;align-items:center;gap:var(--s3);text-decoration:none!important;flex:none}
.fs-logo__marchio{
  font-family:var(--font-display);font-size:var(--t-xl);font-weight:800;
  letter-spacing:-.02em;color:var(--blu-900);line-height:1
}
.fs-logo__marchio em{font-style:normal;color:var(--azione)}
.fs-logo__paylo{display:block;font-size:var(--t-xs);color:var(--testo-tenue);font-weight:500;letter-spacing:.02em}
@media(max-width:520px){.fs-logo__paylo{display:none}}

/* --- ricerca --- */
.fs-ricerca{position:relative;max-width:660px;width:100%;justify-self:center}
.fs-ricerca__form{display:flex;border:2px solid var(--blu-700);border-radius:var(--r);overflow:hidden;background:#fff}
.fs-ricerca__form:focus-within{box-shadow:0 0 0 3px var(--blu-100)}
.fs-ricerca__campo{flex:1;border:0;padding:var(--s3) var(--s4);font:inherit;min-width:0;min-height:44px}
.fs-ricerca__campo:focus{outline:none}
.fs-ricerca__invio{
  border:0;background:var(--blu-700);color:#fff;padding:0 var(--s5);cursor:pointer;
  display:flex;align-items:center;gap:var(--s2);font-weight:600
}
.fs-ricerca__invio:hover{background:var(--blu-800)}
.fs-ricerca__invio svg{width:18px;height:18px}
.fs-ricerca__invio span{display:none}
@media(min-width:768px){.fs-ricerca__invio span{display:inline}}
.fs-ricerca__aiuto{
  position:absolute;left:0;right:0;top:calc(100% + 2px);font-size:var(--t-xs);
  color:var(--testo-tenue);padding:var(--s1) var(--s2)
}
@media(max-width:1023px){
  .fs-ricerca{position:fixed;inset:0 0 auto;background:#fff;padding:var(--s3);z-index:400;
    display:none;box-shadow:var(--ombra-3);max-width:none}
  .fs-ricerca.aperta{display:block}
  .fs-ricerca__aiuto{position:static}
}

/* --- azioni --- */
.fs-azioni{display:flex;align-items:center;gap:var(--s1);flex:none}
.fs-azione{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--s2) var(--s3);border-radius:var(--r);color:var(--testo-soft);
  text-decoration:none!important;background:none;border:0;cursor:pointer;font:inherit;position:relative
}
.fs-azione:hover{background:var(--grigio-100);color:var(--blu-700)}
.fs-azione svg{width:22px;height:22px}
.fs-azione span{font-size:var(--t-xs);white-space:nowrap}
@media(max-width:1023px){.fs-azione span{display:none}}
.fs-azione__conta{
  position:absolute;top:2px;right:4px;min-width:18px;height:18px;padding:0 4px;
  background:var(--azione);color:#fff;border-radius:var(--r-full);
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center
}
.fs-solo-mobile{display:flex}
@media(min-width:1024px){.fs-solo-mobile{display:none}}

/* --- navigazione --- */
.fs-nav{border-top:1px solid var(--bordo);background:var(--bianco)}
@media(max-width:1023px){.fs-nav{display:none}}
.fs-nav__lista{
  list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;gap:0;align-items:stretch;
  row-gap:0
}
.fs-nav__voce > a{white-space:nowrap}
.fs-nav__voce{position:relative}
.fs-nav__voce > a{
  display:flex;align-items:center;gap:var(--s1);padding:var(--s3) var(--s3);
  font-weight:600;font-size:var(--t-sm);color:var(--testo);text-decoration:none!important;
  border-bottom:3px solid transparent;
  /* i nomi delle categorie sono lunghi: se vanno a capo il menu sembra rotto */
  white-space:nowrap
}
/* le icone della barra devono restare piccole: senza vincolo l'SVG
   prende la dimensione del contenitore e diventa enorme */
.fs-nav__voce > a svg{width:13px;height:13px;flex:none;opacity:.6}
.fs-nav__voce--tutte > a svg{width:16px;height:16px;opacity:1}
.fs-nav__voce:hover > a,.fs-nav__voce:focus-within > a{color:var(--blu-700);border-bottom-color:var(--azione)}
.fs-nav__voce--evidenza > a{color:var(--ambra-600)}

/* mega menu: si apre su hover e su focus da tastiera */
.fs-mega{
  position:absolute;left:0;top:100%;min-width:min(880px,90vw);
  background:#fff;border:1px solid var(--bordo);border-top:0;
  box-shadow:var(--ombra-3);padding:var(--s6);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3) var(--s8);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--transizione),transform var(--transizione),visibility var(--transizione)
}
.fs-nav__voce:hover .fs-mega,.fs-nav__voce:focus-within .fs-mega{opacity:1;visibility:visible;transform:none}
.fs-mega--largo{left:auto;right:0}
.fs-mega a{display:block;padding:var(--s2) 0;font-size:var(--t-sm);color:var(--testo-soft)}
.fs-mega a:hover{color:var(--blu-700)}
.fs-mega__titolo{
  font-weight:700;font-size:var(--t-sm);color:var(--testo);
  padding-bottom:var(--s2);margin-bottom:var(--s2);border-bottom:1px solid var(--bordo)
}
.fs-mega__conta{color:var(--testo-tenue);font-size:var(--t-xs);margin-left:var(--s1)}
.fs-mega__tutte{grid-column:1/-1;border-top:1px solid var(--bordo);padding-top:var(--s3);margin-top:var(--s2);font-weight:600}

/* --- header compatto allo scorrimento --- */
/* L'header NON e' sticky: resta nel flusso e scorre via.
   Al suo posto compare .fs-fissa, in position:fixed, che non tocca il flusso. */
.fs-fissa{
  position:fixed;inset:0 0 auto;z-index:300;background:#fff;
  border-bottom:1px solid var(--bordo);box-shadow:var(--ombra-2);
  transform:translateY(-100%);transition:transform .18s ease;
  will-change:transform
}
.fs-fissa.visibile{transform:none}
.fs-fissa__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);padding:var(--s2) 0}
.fs-fissa .fs-logo__marchio{font-size:var(--t-lg)}
.fs-fissa .fs-ricerca{max-width:560px}
.fs-fissa .fs-ricerca__campo{min-height:38px;padding:var(--s2) var(--s3)}
.fs-fissa .fs-ricerca__invio{padding:0 var(--s4)}
.fs-fissa .fs-ricerca__form{border-width:1px}
.fs-fissa .fs-azione{padding:var(--s1) var(--s2)}
.fs-fissa .fs-azione svg{width:20px;height:20px}
@media(max-width:1023px){
  .fs-fissa .fs-ricerca{position:static;display:block;box-shadow:none;padding:0;max-width:none}
  .fs-fissa .fs-logo__paylo{display:none}
}
@media (prefers-reduced-motion:reduce){.fs-fissa{transition:none}}

/* --- pannello mobile --- */
.fs-pannello{
  position:fixed;inset:0 30% 0 0;background:#fff;z-index:500;
  transform:translateX(-100%);transition:transform .2s ease;
  overflow-y:auto;box-shadow:var(--ombra-3);max-width:380px
}
.fs-pannello.aperto{transform:none}
.fs-pannello__testa{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4);border-bottom:1px solid var(--bordo);position:sticky;top:0;background:#fff
}
.fs-pannello ul{list-style:none;margin:0;padding:0}
.fs-pannello a{display:block;padding:var(--s3) var(--s4);border-bottom:1px solid var(--grigio-100);color:var(--testo)}
.fs-pannello .livello-2 a{padding-left:var(--s8);font-size:var(--t-sm);color:var(--testo-soft)}
.fs-velo{position:fixed;inset:0;background:rgba(11,31,42,.45);z-index:450;opacity:0;visibility:hidden;transition:.2s}
.fs-velo.aperto{opacity:1;visibility:visible}


/* --- voce "Tutte le categorie": ingresso principale al catalogo --- */
.fs-nav__voce--tutte > a{
  background:var(--blu-800);color:#fff;font-weight:700;border-bottom-color:transparent
}
.fs-nav__voce--tutte:hover > a,.fs-nav__voce--tutte:focus-within > a{
  background:var(--blu-900);color:#fff;border-bottom-color:var(--azione)
}
.fs-nav__voce--tutte svg{width:17px;height:17px}

/* pannello a tutta larghezza: 14 categorie con i loro reparti */
.fs-mega--pieno{
  left:0;right:auto;width:min(1400px,96vw);min-width:0;
  grid-template-columns:repeat(4,1fr);gap:var(--s5) var(--s6);
  max-height:min(72vh,640px);overflow-y:auto
}
.fs-mega__gruppo{display:flex;flex-direction:column;min-width:0}
.fs-mega__gruppo .fs-mega__titolo{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  color:var(--testo);text-decoration:none
}
.fs-mega__gruppo .fs-mega__titolo:hover{color:var(--blu-700)}
.fs-mega__gruppo a{padding:var(--s1) 0;font-size:var(--t-xs)}

/* con 14 categorie la barra va a capo: e' voluto, e' come si vede un catalogo
   grande. Le voci di servizio si staccano a destra sull'ultima riga. */
@media(min-width:1024px){
  .fs-nav__lista{padding:var(--s1) 0}
  .fs-nav__voce > a{padding-top:var(--s2);padding-bottom:var(--s2)}
}
@media(max-width:1330px){ .fs-nav__voce > a{font-size:var(--t-xs);padding-left:var(--s2);padding-right:var(--s2)} }