/* ===========================================================
   FILE: /assets/css/components/header.css
   VERSION: v6.0 (2026-04-28)
   COMPONENT: HEADER (pill glass, fisso, centrato)
   COMPAT: <header class="nav glass">...<div class="wrap">...</div>
   NOTE:
   - Replica il comportamento legacy: header sempre visibile (fixed),
     pill centrata, blur/ombra/bordo soft.
   - Nessun cambio di markup; mantiene search + language.
   =========================================================== */

/* === START: CONFIG === */
:root{
  --ds-page-max: 1360px;
  --ds-header-max-wide: 1720px;
  --ds-header-gap: 14px;    /* distanza dall'alto (pill staccata) */
  --ds-header-h:   66px;    /* altezza della pill */

  /* top header tuning */
  --ds-header-bg: rgba(255,255,255,0.60);
  --ds-header-border: rgba(255,255,255,0.62);
  --ds-header-shadow: rgba(0,0,0,0.10);
  --ds-header-divider: rgba(0,0,0,0.08);
  --ds-header-divider-strong: rgba(242,179,0,0.34);
}
/* === END: CONFIG === */

/* === START: HEADER CONTAINER (FIXED + CENTER PILL) === */
.nav{
  position: fixed;
  top: var(--ds-header-gap);
  left: 0; right: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: top .22s ease;
}

/* La "pill" vera e propria è .wrap */
.nav .wrap{
  position: relative;
  pointer-events: auto;
  height: var(--ds-header-h);
  width: min(var(--ds-page-max), calc(100vw - 32px));
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw, 24px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.4vw, 22px);

  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.54));
  background-color: var(--ds-header-bg);
  border: 1px solid var(--ds-header-border);
  border-radius: 9999px;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.78),
    0 12px 28px var(--ds-header-shadow);

  -webkit-mask-image: none;
          mask-image: none;
  overflow: visible;

  transition:
    width .22s ease,
    height .22s ease,
    min-height .22s ease,
    padding .22s ease,
    gap .22s ease,
    border-radius .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    transform .22s ease,
    opacity .22s ease;
}

/* micro-contorno esterno (ring soft) */
.nav .wrap::before{
  content:"";
  position:absolute; inset:-1px; border-radius:9999px;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}
/* === END: HEADER CONTAINER (FIXED + CENTER PILL) === */

/* hard-kill overlay legacy dietro l'header */
.nav::before,
.nav::after{
  content:none !important;
  background:none !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  box-shadow:none !important;
  border:0 !important;
}

/* Rende trasparente il contenitore .nav quando ha .glass
   (il glass visivo resta sulla sola .wrap) */
.nav.glass{
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Brand */
.brand{
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  position: relative;
  flex: 0 0 auto;
  padding-right: clamp(14px, 1.8vw, 20px);
  margin-right: clamp(2px, .4vw, 8px);
}

/* Sess.25 task #4: brand linework rimosso (skip a finiture finali).
   Tentativi v1 (3 stripe locali a fianco logo) e v2 (2 stripe full-header)
   non hanno trovato collocazione visiva convincente — pattern silkscreen
   F6 (doppia stripe yellow su fiancata) richiede iterazione design dedicata.
   Da rivisitare in pass polish post-task #6 con eventuale brief design. */

.brand img{
  display: block;
  height: 34px;
  /* aspect-ratio fissa la larghezza sul logo-desisti (595×209)
     così logo-bianco occupa la stessa box senza shift di layout */
  aspect-ratio: 595 / 209;
  object-fit: contain;
  object-position: left center;
}

.brand::after{
  content:"";
  position:absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 24px;
  transform: translateY(-50%);
  background:
    linear-gradient(180deg,
      transparent 0%,
      var(--ds-header-divider-strong) 24%,
      var(--ds-header-divider) 100%);
  opacity: .9;
}

/* START: small-screen menu toggle base */
.menu-toggle{
  display: none;
  flex: 0 0 auto;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  place-items: center;
}

.menu-toggle__lines{
  display: inline-grid;
  gap: 3px;
}

.menu-toggle__lines span{
  display: block;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(22,22,22,.88);
  transition: transform .18s ease, opacity .18s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible{
  background: rgba(255,255,255,.68);
  border-color: rgba(0,0,0,.14);
}

.menu-toggle:focus-visible{
  outline: 2px solid var(--brand, #F4B532);
  outline-offset: 2px;
}
/* END: small-screen menu toggle base */

/* Menu centrale */
.menu{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  position: relative;
  min-width: 0;
}

.menu-list{
  display: flex;
  gap: clamp(20px, 2.4vw, 38px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list .item a{
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: rgba(18,18,18,.94);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: clamp(.90rem, .16vw + .84rem, 1.02rem);
  transition:
    color .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.menu-list .item a::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(242,179,0,.85) 50%, transparent 100%);
  transform: scaleX(.18);
  transform-origin: center;
  opacity: 0;
  transition: transform .20s ease, opacity .20s ease;
}

.menu-list .item a:hover,
.menu-list .item a:focus-visible{
  color: #111;
  transform: translateY(-1px);
}

.menu-list .item a:hover::after,
.menu-list .item a:focus-visible::after{
  opacity: 1;
  transform: scaleX(1);
}

.menu-list .item a:focus-visible{
  outline: 2px solid var(--brand, #F4B532);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Voci ANNUNCIATE ma non ancora raggiungibili (sess.68, 28/08/2026) ──────
   Prima erano `<a href="#">`: si cliccavano e non succedeva niente.
   Ora l'ancora e' SENZA href — non focusabile col tab, quindi non promette —
   e accanto porta un'etichetta che dice perche'.

   ⚠️ Il selettore e' `a:not([href])`: cosi' le voci VIVE non sono toccate
   da nessuna di queste righe. Non c'e' modo che questa regola spenga per
   sbaglio Lighting o Progetti.

   Le regole sopra continuano ad applicarsi a tutte e due le specie, perche'
   sono scritte su `.menu-list .item a` e un'ancora senza href resta un'ancora:
   e' il motivo per cui non e' stato necessario toccare nient'altro. */
.menu-list .item{ display: inline-flex; align-items: center; gap: 7px; }

.menu-list .item a:not([href]){
  cursor: default;
  opacity: .58;
}
/* niente sottolineatura animata e nessun sollevamento su cio' che non si apre */
.menu-list .item a:not([href])::after{ content: none; }

/* ⚠️ E NIENTE SCHIARITA AL PASSAGGIO. David, 28/08: «togliamo l'hover».
   Non e' una preferenza estetica: un elemento che non e' cliccabile non deve
   comportarsi come se lo fosse — l'hover PROMETTE un'interazione che non c'e'.
   E' lo stesso difetto dei controlli morti, in forma piu' tenue.

   ⚠️ Il colore va RIDICHIARATO, non basta `color: inherit`, e va fatto due
   volte. Motivo misurato: `body.ds-dark .menu-list .item a:hover` ha
   specificita' (0,4,2) e batteva la mia (0,4,1) — in dark mode la voce
   spenta si schiariva lo stesso, da rgba(222,218,210,.88) a rgb(240,237,230).
   Aggiungendo `body.ds-dark` davanti si arriva a (0,5,2) e vince questa.
   E' la terza trappola di specificita' della giornata: vedi
   `feedback_css_batte_stato_js`.
   ⛔ I due valori qui sotto devono restare uguali a quelli a riposo: riga ~219
   per il chiaro, riga ~2032 per lo scuro. Se si cambiano li', si cambiano qui. */
.menu-list .item a:not([href]),
.menu-list .item a:not([href]):hover{
  color: rgba(18, 18, 18, .94);
  transform: none;
}
body.ds-dark .menu-list .item a:not([href]),
body.ds-dark .menu-list .item a:not([href]):hover{
  color: rgba(222, 218, 210, .88);
  transform: none;
}

/* ⚠️ «Dove acquistare» sono due parole: senza questo va a capo e la pill
   diventa piu' alta di una riga. Le altre voci sono singole parole e non lo
   notano. */
.menu-list .item a{ white-space: nowrap; }

/* Utility (search) + lingua a destra */
.util{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: clamp(10px, 1.2vw, 14px);
  margin-left: clamp(0px, .25vw, 4px);
  gap: clamp(6px, .6vw, 10px);
}

.util::before{
  content:"";
  position:absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 24px;
  transform: translateY(-50%);
  background:
    linear-gradient(180deg,
      transparent 0%,
      var(--ds-header-divider-strong) 24%,
      var(--ds-header-divider) 100%);
  opacity: .9;
}

.util > *{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.search-btn{
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .55rem;
  border-radius: 999px;
  color: rgba(20,20,20,.88);
  transition: background-color .2s var(--ds-ease-std), color .2s var(--ds-ease-std);
}

.search-btn svg{ fill: currentColor; }

.search-btn:hover, .search-btn:focus-visible{
  background-color: rgba(255,255,255,.42);
  color: #111;
}

.search-btn:focus-visible{
  box-shadow: 0 0 0 2px rgba(255,209,0,.28);
}

/* RFQ */
.header-rfq{
  flex: 0 0 auto;
  min-height: 36px;
  padding: .34rem .66rem;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.44);
  color: rgba(18,18,18,.92);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  font-weight: 700;
  letter-spacing: .035em;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.header-rfq__count{
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .34rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--brand, #F4B532);
  color: #111;
  font-size: .70rem;
  font-weight: 700;
  line-height: 1;
}

.header-rfq:hover,
.header-rfq:focus-visible{
  background: rgba(255,255,255,.68);
  border-color: rgba(0,0,0,.14);
  color: #111;
  transform: translateY(-1px);
}

.header-rfq:focus-visible{
  box-shadow: 0 0 0 2px rgba(255,209,0,.28);
}

/* Units */
.header-units-toggle{
  position: relative;
  flex: 0 0 auto;
}

.units-btn{
  height: 36px;
  padding: 0 .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  color: rgba(16,16,16,.92);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  font-weight: 700;
  letter-spacing: .035em;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.units-btn:hover,
.units-btn[aria-expanded="true"]{
  background: rgba(255,255,255,.68);
  border-color: rgba(0,0,0,.14);
}

.units-btn:focus-visible{
  outline: 2px solid var(--brand, #F4B532);
  outline-offset: 2px;
}

.units-btn .units-current{
  display: inline-block;
  min-width: 2.2em;
  text-align: center;
}

.units-menu{
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 4500;
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  min-width: 132px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--ds-r-md);   /* era --ds-r-1: token inesistente nel CSS vivo ⇒ 0px, spigolo vivo non voluto */
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.units-menu button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: .42rem .78rem;
  border: 0;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}

.units-menu button:hover{
  background-color: rgba(255,255,255,.22);
}

.units-menu button[aria-selected="true"]{
  outline: 2px solid rgba(0,0,0,.15);
  outline-offset: -2px;
}

/* Text size */
.textsize-btn{
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  color: rgba(16,16,16,.92);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  display: inline-grid;
  place-items: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.textsize-btn:hover,
.textsize-btn:focus-visible{
  background: rgba(255,255,255,.68);
  border-color: rgba(0,0,0,.14);
}

.textsize-btn:focus-visible{
  box-shadow: 0 0 0 2px rgba(255,209,0,.28);
}

.textsize-btn__aa{
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
}

/* Language */
.lang{
  position: relative;
  margin-left: 0;
}

.lang-btn{
  min-height: 36px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: .25rem .78rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.46);
  color: rgba(16,16,16,.92);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  transition: all .2s var(--ds-ease-std);
}

.lang-btn:hover,
.lang-btn[aria-expanded="true"]{
  background: rgba(255,255,255,.68);
  border-color: rgba(0,0,0,.14);
}

.lang-btn:focus-visible{
  outline: 2px solid var(--brand, #F4B532);
  outline-offset: 2px;
}

.lang-menu{
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 4500;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--ds-r-md);   /* era --ds-r-1: token inesistente nel CSS vivo ⇒ 0px, spigolo vivo non voluto */
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  list-style: none;
  margin: 0;
  padding: .25rem 0;
}

.lang-menu button{
  display:flex; align-items:center; gap: .5rem;
  padding: .4rem .75rem; width: 100%;
  border: 0; background: transparent; cursor: pointer;
  font-weight: 600;
}

.lang-menu button::before{
  content: attr(data-lang);
  display:inline-grid; place-items:center;
  min-width: 28px; height: 22px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.15));
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.08);
  font-size: 12px; letter-spacing: .5px;
}

.lang-menu button:hover{ background-color: rgba(255,255,255,.22); }

.lang-menu button[aria-selected="true"]{
  outline: 2px solid rgba(0,0,0,.15); outline-offset: 2px; border-radius: 8px;
}

/* === Compact state === */
.nav.is-compact { --ds-header-h: 58px; }
.nav.is-compact .wrap{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.62));
  border-color: rgba(255,255,255,0.66);
  box-shadow:
    inset 0 1px rgba(255,255,255,0.82),
    0 12px 28px rgba(0,0,0,0.12);
}

.nav.is-compact .brand img{
  height: 30px;
}

/* START: HEADER STICKY PHASE 1 */
:root{
  --ds-header-sticky-top: 8px;
  --ds-header-sticky-h: 58px;
  --ds-header-sticky-side-gap: 20px;
  --ds-pb-sticky-gap: 8px;
}

.brand,
.brand img,
.menu,
.menu-list,
.menu-list .item a,
.util,
.search-btn,
.units-btn,
.textsize-btn,
.lang-btn,
.header-rfq{
  transition:
    gap .22s ease,
    margin .22s ease,
    padding .22s ease,
    width .22s ease,
    min-width .22s ease,
    height .22s ease,
    min-height .22s ease,
    font-size .22s ease,
    letter-spacing .22s ease,
    transform .22s ease,
    opacity .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.nav.is-sticky{
  top: var(--ds-header-sticky-top);
}

.nav.is-sticky .wrap{
  height: var(--ds-header-sticky-h);
  min-height: var(--ds-header-sticky-h);
  width: min(var(--ds-header-max-wide), calc(100vw - var(--ds-header-sticky-side-gap)));
  padding-inline: clamp(15px, 1.25vw, 21px);
  gap: clamp(10px, 1vw, 16px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
  border-color: rgba(255,255,255,.74);
  box-shadow:
    inset 0 1px rgba(255,255,255,.88),
    0 10px 24px rgba(0,0,0,.12);
}

.nav.is-sticky .brand{
  padding-right: 12px;
  margin-right: 0;
}

.nav.is-sticky .brand::after{
  height: 20px;
  opacity: .75;
}

.nav.is-sticky .brand img{
  height: 31px;
}

.nav.is-sticky .menu-list{
  gap: clamp(18px, 1.55vw, 28px);
}

.nav.is-sticky .menu-list .item a{
  min-height: 30px;
  font-size: clamp(.88rem, .10vw + .86rem, .98rem);
  letter-spacing: .032em;
}

.nav.is-sticky .header-rfq{
  min-height: 35px;
  padding: .30rem .62rem;
}

.nav.is-sticky .util{
  padding-left: 10px;
  margin-left: 0;
  gap: 7px;
}

.nav.is-sticky .util::before{
  height: 20px;
  opacity: .75;
}

.nav.is-sticky .search-btn{
  height: 35px;
  min-height: 35px;
  padding-inline: .44rem;
}

.nav.is-sticky .units-btn{
  min-width: 43px;
  height: 35px;
  min-height: 35px;
  padding-inline: .50rem;
}

.nav.is-sticky .textsize-btn,
.nav.is-sticky .lang-btn{
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
}

/* END: HEADER STICKY PHASE 1 */

/* START: HEADER STICKY PHASE 2 / COLLAPSED + EXPANDED DESKTOP */
@media (min-width: 781px){

  /* stato sticky chiuso: capsula corta */
  body.is-page-sticky .nav.is-sticky .wrap{
    width: fit-content;
    max-width: calc(100vw - 36px);
    padding-inline: 0 16px;
    gap: 12px;
    justify-content: flex-start;
    overflow: visible;
    background:
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84));
    border-color: rgba(255,255,255,.80);
    box-shadow:
      inset 0 1px rgba(255,255,255,.92),
      0 10px 22px rgba(0,0,0,.10);
  }

  /* placeholder pallino logo */
  body.is-page-sticky .nav.is-sticky .brand{
    position: relative;
    flex: 0 0 var(--ds-header-sticky-h);
    width: var(--ds-header-sticky-h);
    min-width: var(--ds-header-sticky-h);
    height: var(--ds-header-sticky-h);
    min-height: var(--ds-header-sticky-h);
    padding: 0;
    margin-right: 0;
    border-radius: 999px;
    overflow: hidden;
  }

  body.is-page-sticky .nav.is-sticky .brand img{
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  body.is-page-sticky .nav.is-sticky .brand::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 50%,
        #f0b73a 0 30%,
        #e6df56 31% 69%,
        #111 70% 100%);
    box-shadow:
      inset 0 1px rgba(255,255,255,.24),
      0 6px 14px rgba(0,0,0,.12);
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      filter .18s ease;
  }

  body.is-page-sticky .nav.is-sticky .brand::after{
    display: none;
  }

  /* menu nascosto nello stato collapsed */
  body.is-page-sticky .nav.is-sticky .menu{
    display: none;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
  }

  /* burger integrato nel lato sinistro della capsula */
  body.is-page-sticky .nav.is-sticky .menu-toggle{
    display: inline-grid !important;
    place-items: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    width: var(--ds-header-sticky-h);
    min-width: var(--ds-header-sticky-h);
    height: var(--ds-header-sticky-h);
    min-height: var(--ds-header-sticky-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,0) 74%);
    box-shadow: none;
    z-index: 3;
    line-height: 0;
    transition:
      background-color .18s ease,
      box-shadow .18s ease,
      filter .18s ease,
      transform .18s ease;
  }

  body.is-page-sticky .nav.is-sticky .menu-toggle:hover,
  body.is-page-sticky .nav.is-sticky .menu-toggle:focus-visible{
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), rgba(255,255,255,.04) 76%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.22),
      inset 0 10px 18px rgba(255,255,255,.06),
      0 4px 10px rgba(0,0,0,.08);
    filter: brightness(1.03);
  }

  body.is-page-sticky .nav.is-sticky .menu-toggle__lines{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
  }

  body.is-page-sticky .nav.is-sticky .menu-toggle__lines span{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 1.6px;
    margin-left: 0;
    background: rgba(20,20,20,.92);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    transition:
      top .18s ease,
      transform .18s ease,
      opacity .18s ease,
      box-shadow .18s ease;
  }

  body.is-page-sticky .nav.is-sticky .menu-toggle__lines span:nth-child(1){
    top: calc(50% - 5px);
  }

  body.is-page-sticky .nav.is-sticky .menu-toggle__lines span:nth-child(2){
    top: 50%;
  }

  body.is-page-sticky .nav.is-sticky .menu-toggle__lines span:nth-child(3){
    top: calc(50% + 5px);
  }

  body.is-page-sticky .nav.is-sticky .header-rfq{
    min-height: 34px;
    padding: .28rem .56rem;
  }

  body.is-page-sticky .nav.is-sticky .util{
    padding-left: 0;
    gap: 4px;
  }

  body.is-page-sticky .nav.is-sticky .util::before{
    display: none;
  }

  body.is-page-sticky .nav.is-sticky .search-btn{
    height: 34px;
    min-height: 34px;
    padding-inline: .34rem;
  }

  body.is-page-sticky .nav.is-sticky .search-btn .label{
    display: none;
  }

  body.is-page-sticky .nav.is-sticky .units-btn{
    min-width: 42px;
    height: 34px;
    min-height: 34px;
    padding-inline: .45rem;
  }

  body.is-page-sticky .nav.is-sticky .textsize-btn,
  body.is-page-sticky .nav.is-sticky .lang-btn{
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  /* stato sticky aperto: barra lunga su richiesta */
  body.is-page-sticky .nav.is-sticky.sticky-expanded .wrap{
    width: min(980px, calc(100vw - 48px));
    padding-inline: 0 16px;
    gap: 12px;
  }

  body.is-page-sticky .nav.is-sticky.sticky-expanded .menu{
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    overflow: visible;
    justify-content: center;
    /* sess.71 (V-77): RETE DI SICUREZZA, non estetica. Se un giorno la lista
       non ci sta più (voce nuova, font più grande, lingua più lunga), `center`
       la fa sbordare a SINISTRA, sotto il burger: la voce si vede e non si
       clicca. `safe center` in quel caso allinea a start — sborda a destra,
       dove non c'è nulla che intercetti il click. Chi non lo supporta ignora
       la riga e resta al `center` sopra. */
    justify-content: safe center;
  }

  body.is-page-sticky .nav.is-sticky.sticky-expanded .menu-list{
    display: flex;
    gap: clamp(12px, .92vw, 18px);
  }

  body.is-page-sticky .nav.is-sticky.sticky-expanded .menu-list .item a{
    min-height: 28px;
    font-size: clamp(.82rem, .06vw + .80rem, .90rem);
    letter-spacing: .020em;
  }

  /* il burger diventa "X" quando l'header è expanded */
  body.is-page-sticky .nav.is-sticky.sticky-expanded .menu-toggle__lines span:nth-child(1){
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  body.is-page-sticky .nav.is-sticky.sticky-expanded .menu-toggle__lines span:nth-child(2){
    opacity: 0;
  }

  body.is-page-sticky .nav.is-sticky.sticky-expanded .menu-toggle__lines span:nth-child(3){
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  @media (max-width: 1100px){
    body.is-page-sticky .nav.is-sticky.sticky-expanded .wrap{
      width: min(860px, calc(100vw - 30px));
      gap: 10px;
    }

    body.is-page-sticky .nav.is-sticky.sticky-expanded .menu-list{
      gap: clamp(10px, .70vw, 14px);
    }

    body.is-page-sticky .nav.is-sticky.sticky-expanded .menu-list .item a{
      font-size: .79rem;
      letter-spacing: .016em;
    }

    body.is-page-sticky .nav.is-sticky .util{
      gap: 3px;
    }
  }

  @media (min-width: 1850px){
    body.ds-vp-wide.is-page-sticky .nav.is-sticky.sticky-expanded .wrap{
      width: min(1040px, calc(100vw - 70px));
    }
  }

  @media (min-width: 1400px) and (max-width: 1849.98px){
    body.ds-vp-compact.is-page-sticky .nav.is-sticky .wrap{
      max-width: calc(100vw - 44px);
    }

    /* sess.71 (V-77 caso 1): qui viveva un SECONDO `width` per la capsula
       espansa (`min(860px, 100vw-72px)`), sovrascritto più in basso da quello
       vero (`@media 1400-1849` → `.sticky-expanded .wrap`, ~riga 1280).
       Due numeri per la stessa larghezza: chi leggeva questo credeva di aver
       trovato la misura, e non era quella applicata. Tolto: la larghezza della
       capsula espansa a compact si dichiara in UN posto solo. */
  }
}
/* END: HEADER STICKY PHASE 2 / COLLAPSED + EXPANDED DESKTOP */

/* START: Header desktop rail alignment / compact + wide */
@media (min-width: 1400px){
  :root{
    --ds-rail-left: clamp(16px, 1.35vw, 30px);
    --ds-rail-gap: 12px;
    --ds-rail-stack-gap: 10px;
    --ds-rail-lane-wide: clamp(228px, 14.5vw, 324px);
    --ds-pallino-shift-x: 0px;
    --ds-pallino-shift-y: 0px;
    --ds-pallino-bg-size: 100%;
    --ds-pallino-hit-size: calc(var(--ds-header-sticky-h) - 6px);
  }

  :root{
    --ds-sticky-progress: 0;
    --ds-sticky-progress-eased: 0;
  }

  .nav.is-sticky{
    left: var(--ds-rail-left);
    right: auto;
    width: auto;
  }

  .nav.is-sticky .wrap{
    margin-inline: 0;
  }

  #site-header .nav,
  #site-header .nav .wrap,
  #site-header .nav .brand,
  #site-header .nav .brand img,
  #site-header .nav .menu,
  #site-header .nav .util{
    transition:
      transform 120ms linear,
      opacity 120ms linear,
      filter 120ms linear,
      box-shadow 120ms linear,
      background-color 120ms linear,
      padding 120ms linear,
      gap 120ms linear;
    will-change: transform, opacity;
  }

  /* sess.49 (fix expand, esteso compact+wide): a sticky CONCLUSO ridò un morph
     morbido (≠ 120ms-linear dello scroll-morph qui sopra) agli elementi che
     compaiono nell'espansione del menu. Gated `is-page-sticky` → NON tocca lo
     scroll-morph d'ingresso (che gira su `:not(.is-page-sticky)`). */
  body.is-page-sticky #site-header .nav.is-sticky .menu,
  body.is-page-sticky #site-header .nav.is-sticky .menu-list,
  body.is-page-sticky #site-header .nav.is-sticky .util,
  body.is-page-sticky #site-header .nav.is-sticky .brand{
    transition: opacity .24s ease,
                transform .26s cubic-bezier(.34, 1.1, .5, 1);
  }
  /* wide: stesso morph morbido di compact su nav+wrap (width incluso dove esplicito) */
  body.ds-vp-wide.is-page-sticky #site-header .nav.is-sticky{
    transition: top .22s ease, opacity .24s ease,
                transform .26s cubic-bezier(.34, 1.1, .5, 1);
  }
  body.ds-vp-wide.is-page-sticky #site-header .nav.is-sticky .wrap{
    transition:
      width .26s cubic-bezier(.34, 1.1, .5, 1),
      max-width .26s cubic-bezier(.34, 1.1, .5, 1),
      padding .24s ease, gap .24s ease,
      background .24s ease, border-color .24s ease, box-shadow .24s ease;
  }

  body:not(.is-page-sticky) #site-header .nav{
    --ds-sticky-late: clamp(0, calc((var(--ds-sticky-progress-eased) - 0.52) * 2.2), 1);
    transform: translateX(calc(-48px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .wrap{
    transform:
      translateY(calc(-10px * var(--ds-sticky-progress-eased)))
      scale(calc(1 - (0.052 * var(--ds-sticky-progress-eased))));
    filter: saturate(calc(1 - (0.10 * var(--ds-sticky-progress-eased))));
    transform-origin: left center;
  }

  body:not(.is-page-sticky) #site-header .nav .brand{
    transform: translateX(calc(-10px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .brand::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: calc(var(--ds-header-h) * 0.96);
    height: calc(var(--ds-header-h) * 0.96);
    transform:
      translateY(-50%)
      scale(calc(0.78 + (0.22 * var(--ds-sticky-late))));
    transform-origin: left center;
    border-radius: 999px;
    background-image: url("../../img/pallino%20De%20Sisti.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
    opacity: var(--ds-sticky-late);
    pointer-events: none;
  }

  body:not(.is-page-sticky) #site-header .nav .brand img{
    opacity: calc(1 - (0.30 * var(--ds-sticky-progress-eased)) - (0.46 * var(--ds-sticky-late)));
    transform:
      translateX(calc(-6px * var(--ds-sticky-late)))
      scale(calc(1 - (0.08 * var(--ds-sticky-progress-eased))));
    transform-origin: left center;
  }

  body:not(.is-page-sticky) #site-header .nav .menu{
    opacity: calc(1 - (0.20 * var(--ds-sticky-progress-eased)) - (0.18 * var(--ds-sticky-late)));
    transform:
      translateX(calc(-20px * var(--ds-sticky-progress-eased)))
      translateY(calc(-3px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .util{
    opacity: calc(1 - (0.24 * var(--ds-sticky-progress-eased)) - (0.16 * var(--ds-sticky-late)));
    transform:
      translateX(calc(-14px * var(--ds-sticky-progress-eased)))
      translateY(calc(-2px * var(--ds-sticky-progress-eased)));
  }
}

@media (min-width: 1400px) and (max-width: 1849.98px){
  /* sess.49 b: a compact-sticky il pallino header collassato sparisce → la dock
     (rettangolo 2 righe con hamburger) lo sostituisce. Resta cliccabile via JS
     (.menu-toggle.click() dalla dock) per l'espansione del menu nav. */
  /* sess.49 (fix expand): premendo ≡ l'header appariva/cresceva "di colpo".
     CAUSA: la regola scroll-morph `#site-header .nav .wrap` (120ms linear, sotto)
     ha specificità da id e NON include `width` → la pill saltava 58→820 senza
     transizione, mentre l'opacity faceva solo 120ms linear secco.
     FIX: qui, SOLO in stato sticky (il curtain-drop d'ingresso è già concluso, il
     nav collassato è invisibile), ridò a nav+wrap un transition morbido che
     INCLUDE width/opacity → l'espansione del menu è fluida e coordinata con la
     dock che sfuma (hand-off). Serve `#site-header` per battere la regola id sopra. */
  body.ds-vp-compact.is-page-sticky #site-header .nav.is-sticky{
    transition: top .22s ease, opacity .24s ease,
                transform .26s cubic-bezier(.34, 1.1, .5, 1);
  }
  body.ds-vp-compact.is-page-sticky #site-header .nav.is-sticky .wrap{
    /* sess.71: la capsula espansa è passata a `fit-content` (vedi sotto) e le
       parole chiave intrinseche non si interpolano: senza questo, l'apertura
       tornerebbe a essere lo scatto che sess.49 aveva tolto. */
    interpolate-size: allow-keywords;
    transition:
      width     .26s cubic-bezier(.34, 1.1, .5, 1),
      min-width .26s cubic-bezier(.34, 1.1, .5, 1),
      max-width .26s cubic-bezier(.34, 1.1, .5, 1),
      padding   .24s ease,
      gap       .24s ease,
      background   .24s ease,
      border-color .24s ease,
      box-shadow   .24s ease;
  }
  body.ds-vp-compact.is-page-sticky .nav.is-sticky:not(.sticky-expanded){
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.985);
    transform-origin: left center;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .wrap{
    width: var(--ds-header-sticky-h);
    min-width: var(--ds-header-sticky-h);
    max-width: var(--ds-header-sticky-h);
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center;
    align-items: center;
    overflow: visible;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .wrap::before{
    display: none !important;
  }

  /* collassato (dock visibile): nascondi nav + tool. Quando expanded (≡ premuto)
     riappaiono → menu COMPLETO con toolbar, come a wide. header-rfq resta SEMPRE
     nascosto (anche a wide non è nella barra sticky). */
  body.ds-vp-compact.is-page-sticky .nav.is-sticky:not(.sticky-expanded) .menu,
  body.ds-vp-compact.is-page-sticky .nav.is-sticky:not(.sticky-expanded) .util,
  body.ds-vp-compact.is-page-sticky .nav.is-sticky:not(.sticky-expanded) .lang,
  body.ds-vp-compact.is-page-sticky .nav.is-sticky:not(.sticky-expanded) .theme-toggle-btn{
    display: none !important;
  }
  body.ds-vp-compact.is-page-sticky .nav.is-sticky .header-rfq{
    display: none !important;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .brand{
    position: relative;
    margin: 0;
    flex: 0 0 var(--ds-header-sticky-h);
    width: var(--ds-header-sticky-h);
    min-width: var(--ds-header-sticky-h);
    height: var(--ds-header-sticky-h);
    min-height: var(--ds-header-sticky-h);
    pointer-events: none;
    overflow: hidden;
    border-radius: 999px;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .brand::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-image: url("../../img/pallino%20De%20Sisti.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
    box-shadow: none;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle{
    display: inline-grid !important;
    place-items: center;
    position: absolute;
    /* sess.48: il pallino brand (.brand::before SVG) è offsettato a -1,-1 per
       coprire il bordo 1px del pill → centro reale pallino = (28,28). Il toggle
       era centrato su sticky-h/2 = (29,29) → hamburger +1px a dx/giù. Compenso
       lo stesso -1px così le righe sono perfettamente centrate nel pallino. */
    left: calc(var(--ds-header-sticky-h) / 2 - 1px);
    top: calc(var(--ds-header-sticky-h) / 2 - 1px);
    width: var(--ds-pallino-hit-size);
    min-width: var(--ds-pallino-hit-size);
    height: var(--ds-pallino-hit-size);
    min-height: var(--ds-pallino-hit-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 4;
    pointer-events: auto;
    transform: translate(-50%, -50%);
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle:hover,
  body.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle:focus-visible{
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle__lines{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
  }

  /* hamburger lines perfectly centred on pallino — no x-offset needed */

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle__lines span{
    position: absolute;
    left: 50%;
    width: 11px;
    height: 1.8px;
    background: rgba(16,16,16,.96);
    border-radius: 999px;
    transform: translate(-50%, -50%);
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle__lines span:nth-child(1){
    top: calc(50% - 5px);
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle__lines span:nth-child(2){
    top: 50%;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle__lines span:nth-child(3){
    top: calc(50% + 5px);
  }

  /* sess.71 (V-77 caso 1) — LA CAPSULA ABBRACCIA IL CONTENUTO, come a wide.
     Era `min(820px, 100vw-120px)`: una larghezza FISSA mentre la lista voci
     cresce col `clamp()` del font e col gap in vw. Misurato su product-f7:
     servivano 899 px a 1400 e 932 px a 1849 → la lista sbordava di ~40 px per
     lato (`justify-content:center`) e finiva SOTTO il burger `absolute`, che
     è z-3: «TING» al posto di «LIGHTING» e la X sopra il logo.
     ⚠️ Non è un numero da alzare: la fascia wide aveva già risolto lo stesso
     problema in sess.49 con `fit-content` (nota a ~riga 1440). Qui era rimasto
     il numero fisso — ed è per questo che portfolio.html si salvava per 4 px
     (la sua `.util` è 46 px più stretta): sano per margine, non per costruzione.
     `interpolate-size` tiene viva l'animazione di apertura (58px → fit-content)
     dove il browser la supporta; altrove si apre di scatto, come a wide oggi. */
  body.ds-vp-compact.is-page-sticky .nav.is-sticky.sticky-expanded .wrap{
    width: fit-content;
    max-width: calc(100vw - 120px);
    padding-inline: 0 14px !important;
    gap: 12px !important;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
    background:
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84)) !important;
    border-color: rgba(255,255,255,.80) !important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.92),
      0 10px 22px rgba(0,0,0,.10) !important;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky.sticky-expanded .wrap::before{
    display: block !important;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky.sticky-expanded .menu-toggle{
    left: calc(var(--ds-header-sticky-h) / 2);
    top: 50%;
    width: var(--ds-pallino-hit-size);
    min-width: var(--ds-pallino-hit-size);
    height: var(--ds-pallino-hit-size);
    min-height: var(--ds-pallino-hit-size);
    transform: translate(-50%, -50%);
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky.sticky-expanded .menu{
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    overflow: visible;
    justify-content: center;
    justify-content: safe center;   /* sess.71: vedi nota sulla rete di sicurezza */
  }

  /* sess.49 (fix expand): util/lang/theme NON più nascosti a expanded → toolbar
     completa come a wide (la gestione hide/show è su :not(.sticky-expanded) sopra).
     Resta nascosto solo header-rfq (regola sopra, sempre). */

  body.ds-vp-compact.is-page-sticky .nav.is-sticky.sticky-expanded .menu-toggle__lines span:nth-child(1){
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky.sticky-expanded .menu-toggle__lines span:nth-child(2){
    opacity: 0;
  }

  body.ds-vp-compact.is-page-sticky .nav.is-sticky.sticky-expanded .menu-toggle__lines span:nth-child(3){
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* START: Header pre-dock compact override */
  body:not(.is-page-sticky) #site-header .nav{
    --ds-sticky-late-compact: clamp(0, calc((var(--ds-sticky-progress-eased) - 0.34) * 3.3), 1);
    transform: translateX(calc(-76px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .wrap{
    transform:
      translateY(calc(-12px * var(--ds-sticky-progress-eased)))
      scale(calc(1 - (0.060 * var(--ds-sticky-progress-eased))));
  }

  body:not(.is-page-sticky) #site-header .nav .brand{
    transform: translateX(calc(-18px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .brand::before{
    opacity: var(--ds-sticky-late-compact);
    transform:
      translateY(-50%)
      scale(calc(0.72 + (0.28 * var(--ds-sticky-late-compact))));
  }

  body:not(.is-page-sticky) #site-header .nav .brand img{
    opacity: calc(1 - (0.32 * var(--ds-sticky-progress-eased)) - (0.60 * var(--ds-sticky-late-compact)));
    transform:
      translateX(calc(-12px * var(--ds-sticky-late-compact)))
      scale(calc(1 - (0.10 * var(--ds-sticky-progress-eased))));
  }

  body:not(.is-page-sticky) #site-header .nav .menu{
    transform:
      translateX(calc(-28px * var(--ds-sticky-progress-eased)))
      translateY(calc(-3px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .util{
    transform:
      translateX(calc(-18px * var(--ds-sticky-progress-eased)))
      translateY(calc(-2px * var(--ds-sticky-progress-eased)));
  }
  /* END: Header pre-dock compact override */
}

@media (min-width: 1850px){
  body.ds-vp-wide.is-page-sticky .nav.is-sticky{
    left: var(--ds-rail-left);
    right: auto;
  }

  body.ds-vp-wide.is-page-sticky .nav.is-sticky .wrap{
    width: fit-content;
    max-width: calc(100vw - 120px);
  }

  body.ds-vp-wide.is-page-sticky .nav.is-sticky .brand{
    position: relative;
    flex: 0 0 var(--ds-header-sticky-h);
    width: var(--ds-header-sticky-h);
    min-width: var(--ds-header-sticky-h);
    height: var(--ds-header-sticky-h);
    min-height: var(--ds-header-sticky-h);
    padding: 0;
    margin-right: 0;
    overflow: hidden;
    border-radius: 999px;
  }

  body.ds-vp-wide.is-page-sticky .nav.is-sticky .brand img{
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  body.ds-vp-wide.is-page-sticky .nav.is-sticky .brand::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-image: url("../../img/pallino%20De%20Sisti.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
    box-shadow: none;
  }

  body.ds-vp-wide.is-page-sticky .nav.is-sticky .menu-toggle{
    left: calc(var(--ds-header-sticky-h) / 2);
    top: calc(var(--ds-header-sticky-h) / 2);
    width: var(--ds-pallino-hit-size);
    min-width: var(--ds-pallino-hit-size);
    height: var(--ds-pallino-hit-size);
    min-height: var(--ds-pallino-hit-size);
    transform: translate(-50%, -50%);
  }

  body.ds-vp-wide.is-page-sticky .nav.is-sticky.sticky-expanded .menu-toggle{
    left: calc(var(--ds-header-sticky-h) / 2);
    top: calc(var(--ds-header-sticky-h) / 2);
    transform: translate(-50%, -50%);
  }

  /* sess.49 (fix proporzioni): capsula espansa ABBRACCIA il contenuto (era 1040px
     fisso → vuoto a destra / voci compresse). fit-content = pill bilanciata. */
  body.ds-vp-wide.is-page-sticky .nav.is-sticky.sticky-expanded .wrap{
    width: fit-content;
    max-width: calc(100vw - 120px);
  }

  /* START: Header pre-dock wide override */
  body:not(.is-page-sticky) #site-header .nav{
    --ds-sticky-late-wide: clamp(0, calc((var(--ds-sticky-progress-eased) - 0.36) * 3.1), 1);
    transform: translateX(calc(-58px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .wrap{
    transform:
      translateY(calc(-11px * var(--ds-sticky-progress-eased)))
      scale(calc(1 - (0.056 * var(--ds-sticky-progress-eased))));
  }

  body:not(.is-page-sticky) #site-header .nav .brand{
    transform: translateX(calc(-14px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .brand::before{
    opacity: var(--ds-sticky-late-wide);
    transform:
      translateY(-50%)
      scale(calc(0.74 + (0.26 * var(--ds-sticky-late-wide))));
  }

  body:not(.is-page-sticky) #site-header .nav .brand img{
    opacity: calc(1 - (0.30 * var(--ds-sticky-progress-eased)) - (0.54 * var(--ds-sticky-late-wide)));
    transform:
      translateX(calc(-10px * var(--ds-sticky-late-wide)))
      scale(calc(1 - (0.09 * var(--ds-sticky-progress-eased))));
  }

  body:not(.is-page-sticky) #site-header .nav .menu{
    transform:
      translateX(calc(-24px * var(--ds-sticky-progress-eased)))
      translateY(calc(-3px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #site-header .nav .util{
    transform:
      translateX(calc(-16px * var(--ds-sticky-progress-eased)))
      translateY(calc(-2px * var(--ds-sticky-progress-eased)));
  }
  /* END: Header pre-dock wide override */
}
/* END: Header desktop rail alignment / compact + wide */

/* === Responsive breakpoints === */
@media (max-width: 1360px){
  .nav .wrap{
    width: calc(100vw - 36px);
  }
}

@media (max-width: 1200px){
  .nav .wrap{
    width: calc(100vw - 28px);
  }

  .menu-list{
    gap: clamp(16px, 1.9vw, 26px);
  }

  .menu-list .item a{
    font-size: .96rem;
  }
}

@media (max-width: 1100px){
  .header-rfq{
    display: none !important;
  }
}

/* A ≥1400px il pulsante RFQ è nella product-bar compact card (1400-1899px)
   o nel rail destro (≥1900px): non serve nell'header. */
@media (min-width: 1400px){
  .header-rfq{
    display: none !important;
  }
}

@media (max-width: 1024px){
  .nav .wrap{
    width: calc(100vw - 24px);
  }

  .brand{
    padding-right: 10px;
    margin-right: 0;
  }

  .menu-list{
    gap: clamp(10px, 1.1vw, 14px);
  }

  .menu-list .item a{
    font-size: .84rem;
    letter-spacing: .022em;
  }

  .util{
    padding-left: 8px;
    gap: 4px;
  }

  .search-btn{
    height: 36px;
    padding: 0 .42rem;
    gap: .22rem;
  }

  .search-btn .label{
    display: none;
  }

  .units-btn{
    min-width: 40px;
    padding-inline: .42rem;
  }

  .textsize-btn,
  .lang-btn{
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .util::before{
    display: none;
  }
}

@media (max-width: 820px){
  :root{ --ds-header-h: 58px; }

  .nav .wrap{
    width: calc(100vw - 16px);
    padding-inline: 10px;
    gap: 6px;
    flex-wrap: nowrap;
    border-radius: 24px;
  }

  .brand{
    padding-right: 0;
    margin-right: 0;
    flex: 0 0 auto;
  }

  .brand img{
    height: 30px;
  }

  .menu{
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    justify-content: center;
    padding-top: 0;
  }

  .menu-list{
    width: auto;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
  }

  .menu-list .item a{
    min-height: 24px;
    font-size: .72rem;
    letter-spacing: .01em;
  }

  .util{
    order: 3;
    padding-left: 0;
    margin-left: auto;
    gap: 2px;
    flex: 0 0 auto;
  }

  .search-btn{
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 999px;
  }

  .units-btn{
    min-width: 40px;
    min-height: 36px;
    padding-inline: .42rem;
  }

  .lang{
    order: 4;
    flex: 0 0 auto;
  }

  .textsize-btn,
  .lang-btn{
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .lang-btn{
    padding-inline: 0;
    display: inline-grid;
    place-items: center;
  }

  .brand::after,
  .util::before{
    display: none;
  }

  .search-btn svg{
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 640px){
  .util{
    gap: 1px !important;
  }

  .search-btn,
  .textsize-btn,
  .lang-btn{
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .units-btn{
    min-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-inline: .42rem !important;
  }

  .search-btn svg{
    width: 14px;
    height: 14px;
  }
}

/* =========================
   HEADER FIT STATES
   ========================= */
#site-header.fit-tight .menu-list,
#site-header.fit-reduced .menu-list,
#site-header.fit-tight .menu-list .item a,
#site-header.fit-reduced .menu-list .item a,
#site-header.fit-tight .search-btn,
#site-header.fit-reduced .search-btn,
#site-header.fit-tight .units-btn,
#site-header.fit-reduced .units-btn,
#site-header.fit-tight .textsize-btn,
#site-header.fit-reduced .textsize-btn,
#site-header.fit-tight .lang-btn,
#site-header.fit-reduced .lang-btn,
#site-header.fit-tight .util,
#site-header.fit-reduced .util{
  all: revert;
}

/* ==========================================================
   START: TRUE BURGER STATE
   Da qui in giù il layout smette di essere "menu compresso"
   e diventa davvero "logo + trigger + tools"
   ========================================================== */
@media (max-width: 780px){

  /* sticky mobile reset */
  .nav.is-sticky{
    top: var(--ds-header-gap);
  }

  .nav.is-sticky .wrap{
    height: var(--ds-header-h);
    min-height: var(--ds-header-h);
    width: calc(100vw - 16px);
    padding-inline: 12px;
    gap: 10px;
    border-radius: 24px;
  }

  #site-header .wrap{
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding-inline: 12px !important;
  }

  #site-header .brand{
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  #site-header .brand::after{
    display: none !important;
  }

  #site-header .brand img{
    height: 31px !important;
    width: auto !important;
  }

  #site-header .menu{
    display: none !important;
    order: 5 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 10px !important;
    justify-content: flex-start !important;
  }

  #site-header .menu-list{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #site-header .menu-list .item a{
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    width: 100% !important;
    font-size: .86rem !important;
    letter-spacing: .03em !important;
  }

  #site-header .menu-toggle{
    order: 2 !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;

    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin-left: 8px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.42)) !important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.80),
      0 3px 10px rgba(0,0,0,.10) !important;
  }

  #site-header .util{
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    padding-left: 0 !important;
    gap: 6px !important;
  }

  #site-header .util::before{
    display: none !important;
  }

  #site-header .search-btn{
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #site-header .search-btn .label{
    display: none !important;
  }

  #site-header .search-btn svg{
    width: 14px !important;
    height: 14px !important;
  }

  #site-header .units-btn{
    min-width: 44px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-inline: .52rem !important;
  }

  #site-header .textsize-btn,
  #site-header .lang-btn{
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  #site-header .lang{
    margin-left: 0 !important;
  }

  /* START: burger open state fix */
  #site-header .nav.menu-open .wrap{
    height: auto !important;
    min-height: var(--ds-header-h) !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding-bottom: 12px !important;
  }

  #site-header .nav.menu-open .menu{
    display: flex !important;
  }

  #site-header .nav.menu-open .menu-list{
    display: grid !important;
  }

  #site-header .nav.menu-open .menu-toggle__lines span:nth-child(1){
    transform: translateY(4.5px) rotate(45deg);
  }

  #site-header .nav.menu-open .menu-toggle__lines span:nth-child(2){
    opacity: 0;
  }

  #site-header .nav.menu-open .menu-toggle__lines span:nth-child(3){
    transform: translateY(-4.5px) rotate(-45deg);
  }
  /* END: burger open state fix */
}
/* ==========================================================
   END: TRUE BURGER STATE
   ========================================================== */

/* ==========================================================
   sess.53 — BURGER anche a COMPACT-NARROW (781-1399) su FAMILY/RANGE.
   La nav desktop piena a 1100-1400 era un refuso: quel regime è già "app"
   (body.ds-vp-app). Qui family/range copiano l'header mobile (logo + burger +
   tools). Product NON toccato (ha la sua compact-sticky a scroll).
   ========================================================== */
@media (min-width: 781px) and (max-width: 1399.98px){
  body:is([data-page="family"],[data-page="range"]) #site-header .wrap{
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding-inline: 12px !important;
  }
  body:is([data-page="family"],[data-page="range"]) #site-header .brand{ order: 1 !important; flex: 0 0 auto !important; }
  body:is([data-page="family"],[data-page="range"]) #site-header .brand::after{ display: none !important; }
  body:is([data-page="family"],[data-page="range"]) #site-header .brand img{ height: 31px !important; width: auto !important; }
  body:is([data-page="family"],[data-page="range"]) #site-header .menu{
    display: none !important;
    order: 5 !important; flex: 0 0 100% !important; width: 100% !important;
    padding-top: 10px !important; justify-content: flex-start !important;
  }
  body:is([data-page="family"],[data-page="range"]) #site-header .menu-list{
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    column-gap: 18px !important; row-gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
  }
  body:is([data-page="family"],[data-page="range"]) #site-header .menu-toggle{
    order: 2 !important; display: inline-grid !important; place-items: center !important; flex: 0 0 auto !important;
    width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; margin-left: 8px !important;
    border-radius: 999px !important; border: 1px solid rgba(0,0,0,.10) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.42)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.80), 0 3px 10px rgba(0,0,0,.10) !important;
  }
  body:is([data-page="family"],[data-page="range"]) #site-header .util{ order: 3 !important; display: flex !important; align-items: center !important; margin-left: auto !important; gap: 6px !important; }
  body:is([data-page="family"],[data-page="range"]) #site-header .util::before{ display: none !important; }
  body:is([data-page="family"],[data-page="range"]) #site-header .search-btn .label{ display: none !important; }
  /* menu aperto: drawer 2-col + X */
  body:is([data-page="family"],[data-page="range"]) #site-header .nav.menu-open .wrap{ height: auto !important; align-items: flex-start !important; flex-wrap: wrap !important; padding-bottom: 12px !important; }
  body:is([data-page="family"],[data-page="range"]) #site-header .nav.menu-open .menu{ display: flex !important; }
  body:is([data-page="family"],[data-page="range"]) #site-header .nav.menu-open .menu-list{ display: grid !important; }
  body:is([data-page="family"],[data-page="range"]) #site-header .nav.menu-open .menu-toggle__lines span:nth-child(1){ transform: translateY(4.5px) rotate(45deg); }
  body:is([data-page="family"],[data-page="range"]) #site-header .nav.menu-open .menu-toggle__lines span:nth-child(2){ opacity: 0; }
  body:is([data-page="family"],[data-page="range"]) #site-header .nav.menu-open .menu-toggle__lines span:nth-child(3){ transform: translateY(-4.5px) rotate(-45deg); }
}

/* ─── Theme Toggle Button ─── */
.theme-toggle-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  color: rgba(16,16,16,.92);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
  background: rgba(255,255,255,.68);
  border-color: rgba(0,0,0,.14);
}

.theme-toggle-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,209,0,.28);
}

.theme-toggle-btn svg {
  fill: currentColor;
  display: block;
}

/* mostra sole in dark mode, luna in light mode */
body:not(.ds-dark) .theme-toggle-btn .icon--sun { display: none; }
body.ds-dark .theme-toggle-btn .icon--moon { display: none; }

/* dark mode overrides */
body.ds-dark .theme-toggle-btn {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(232,230,224,.92);
}

body.ds-dark .theme-toggle-btn:hover {
  background: rgba(255,255,255,.14);
}

/* ── DARK MODE — glass pill (tutti gli stati) ───────────────────────────── */

/* Top state */
body.ds-dark .nav .wrap{
  background: linear-gradient(180deg, rgba(26,22,16,.90), rgba(18,15,10,.82));
  border-color: rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 12px 28px rgba(0,0,0,.45);
}

/* Compact + is-sticky */
body.ds-dark .nav.is-compact .wrap{
  background: linear-gradient(180deg, rgba(26,22,16,.93), rgba(18,15,10,.86));
  border-color: rgba(255,255,255,.11);
}

body.ds-dark .nav.is-sticky .wrap{
  background: linear-gradient(180deg, rgba(26,22,16,.93), rgba(18,15,10,.86));
  border-color: rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.50);
}

/* Collapsed pill (≥781px, non compact) */
body.ds-dark.is-page-sticky .nav.is-sticky .wrap{
  background: linear-gradient(180deg, rgba(26,22,16,.95), rgba(18,15,10,.90));
  border-color: rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.50);
}

/* Expanded pill (standard) */
body.ds-dark.is-page-sticky .nav.is-sticky.sticky-expanded .wrap{
  background: linear-gradient(180deg, rgba(26,22,16,.95), rgba(18,15,10,.90));
  border-color: rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.50);
}

/* Compact (1400-1979px) e Wide (≥1980px) — sticky expanded, override !important */
body.ds-dark.ds-vp-compact.is-page-sticky .nav.is-sticky.sticky-expanded .wrap,
body.ds-dark.ds-vp-wide.is-page-sticky .nav.is-sticky.sticky-expanded .wrap,
body.ds-dark.ds-vp-wide.is-page-sticky .nav.is-sticky.sticky-expanded .wrap{
  background: linear-gradient(180deg, rgba(26,22,16,.96), rgba(18,15,10,.92)) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.55) !important;
}

/* ── Testo e controlli ─────────────────────────────────────────────────── */

body.ds-dark .menu-list .item a{
  color: rgba(222,218,210,.88);
}
body.ds-dark .menu-list .item a:hover,
body.ds-dark .menu-list .item a:focus-visible{
  color: rgba(240,237,230,1);
}

body.ds-dark .search-btn{ color: rgba(218,214,206,.88); }
body.ds-dark .search-btn:hover{ color: rgba(236,232,224,1); }

body.ds-dark .units-btn{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  color: rgba(218,214,206,.88);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
body.ds-dark .units-btn:hover,
body.ds-dark .units-btn[aria-expanded="true"]{
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.14);
}

body.ds-dark .textsize-btn{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  color: rgba(218,214,206,.88);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
body.ds-dark .textsize-btn:hover{ background: rgba(255,255,255,.13); }

body.ds-dark .lang-btn{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  color: rgba(218,214,206,.88);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
body.ds-dark .lang-btn:hover,
body.ds-dark .lang-btn[aria-expanded="true"]{
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.14);
}

body.ds-dark .header-rfq{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  color: rgba(218,214,206,.88);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
body.ds-dark .header-rfq:hover{
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.14);
  color: rgba(236,232,224,1);
}

/* Burger toggle */
body.ds-dark #site-header .menu-toggle{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07) !important;
}
/* Bug fix scentramento pallino sticky in dark mode (1400-1849):
   la regola dark sopra aggiungeva bg/border/shadow al menu-toggle anche
   in compact-sticky, ma in compact-sticky il toggle vive DENTRO il
   pallino dorato e deve restare trasparente (come fa in light mode).
   Il bg/border/shadow aggiungevano spessore visivo che spostava
   l'icona di 1-3px dal centro ottico del pallino. Reset esplicito.
   Wide >=1850 NON ha questo problema (geometria diversa). */
body.ds-dark.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.ds-dark .menu-toggle__lines span{
  background: rgba(218,214,206,.90);
}

/* Compact overlay burger lines — generico dark */
body.ds-dark.is-page-sticky .nav.is-sticky .menu-toggle__lines span{
  background: rgba(218,214,206,.90);
}

/* Nel pallino (compact + wide): il burger è su sfondo dorato → deve restare SCURO */
body.ds-dark.ds-vp-compact.is-page-sticky .nav.is-sticky .menu-toggle__lines span,
body.ds-dark.ds-vp-wide.is-page-sticky .nav.is-sticky .menu-toggle__lines span,
body.ds-dark.ds-vp-wide.is-page-sticky .nav.is-sticky .menu-toggle__lines span{
  background: rgba(16,16,16,.92);
}

/* Dropdown menus */
body.ds-dark .lang-menu,
body.ds-dark .units-menu{
  background: rgba(22,19,14,.96);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
body.ds-dark .lang-menu button,
body.ds-dark .units-menu button{
  color: rgba(218,214,206,.88);
}
body.ds-dark .lang-menu button:hover,
body.ds-dark .units-menu button:hover{
  background: rgba(255,255,255,.07);
}

/* ── «in arrivo» VISIBILE nelle voci spente (verbale menu 28/08 §4) ───────
   Le quattro voci disabilitate (Rigging, Company, Support, Contacts) erano
   solo sbiadite, e dicevano «Pagina in arrivo» dentro un `title`: invisibile
   al tocco, e su desktop solo passandoci sopra.
   ⚠️ Una voce spenta e muta non dice «non ancora»: dice «non funziona», o
   peggio non dice niente — e chi tace viene letto come un no. Il drawer
   mobile la marca gia' cosi' (`.dmd-soon`); qui il desktop si allinea.
   ⇒ Stessa grammatica del drawer: pillola piccola, maiuscoletto, spenta. */
.menu-list .item {           /* il badge sta ACCANTO all'ancora, non dentro */
  display: inline-flex;
  align-items: center;
}
.menu-list .menu-soon {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
  vertical-align: middle;
  white-space: nowrap;
}