/* ============================================================
   IVAC Stampa Online — SITE HEADER (restyle "variante-b")
   ============================================================
   Foglio dedicato, caricato dal partial partials/site-header.html
   (un solo <link>, propaga ovunque l'header viene iniettato).
   Carica DOPO css/style.css → vince i pareggi di specificita'.

   TRAPIANTO dal mockup _design-proposta/variante-b/categoria-mockup.html.
   Nota di scoping: il mockup usa il prefisso `.vb-header`; qui usiamo
   `.site-header` (gia' presente sull'host #site-header), cosi' il look
   si applica senza aggiungere classi via JS ne' toccare ~40 pagine.
   I VALORI sono quelli del mockup, verbatim.

   REGOLE
   - Tutto e' prefissato con .site-header: nessuna regola tocca altre pagine.
   - Le divergenze "pesanti" (main-bar, nav, mega-drop) sono in @media
     (min-width:1024px): sotto i 1024px il sito usa il drawer reale
     (#mob-drawer / .main-hamburger / mob-search-overlay) con la SUA JS,
     qui solo avvicinato visivamente — nessun hook JS toccato.
   - Hook funzionali preservati: <a data-sku>, .mega-superpromo[data-cat],
     apertura touch .has-mega.drop-open (oltre a :hover / .is-open).
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   0. L'INCHIOSTRO DI REPARTO — una variabile, una sorgente
   ════════════════════════════════════════════════════════════
   `--voce-db` NON si scrive qui. Lo mette js/site-header-loader.js sulla
   voce, leggendolo da `ivac_categorie.colore` attraverso /api/menu.php.
   In questo foglio non esiste nessuna mappa categoria→colore: se ne cercate
   una, e' perche' e' tornata dove non deve stare.

   `--voce` e' il valore che tutto il resto usa. Il ripiego e' il cyan, cioe'
   il colore che il menu aveva PRIMA di questa consegna: quando il dato non
   arriva — API giu', colonna `colore` non ancora migrata, payload vecchio in
   cache — testo, tick e barra tornano cyan come prima. Ci tornano in barra e
   nel drawer INSIEME, perche' leggono la stessa variabile: non c'e' una
   seconda mappa che possa restare indietro rispetto alla prima.

   DOVE SI VEDE, E DOVE NO. L'inchiostro accende SOLO la voce della pagina che
   si sta guardando: il segnetto sotto il nome in barra, la barretta a sinistra
   e il velo nel drawer. Le altre voci non portano nessun segno, e non lo porta
   nemmeno l'hover. Il menu a riposo e' identico a quello di sempre — l'unica
   differenza e' DI CHE COLORE e' l'evidenza della voce corrente: la sua, non
   piu' il cyan per tutte.
   C'e' stata una versione con un filo colorato sotto ogni voce e una riga
   tinta fra le voci del drawer: tolti il 02/08/2026. Erano un secondo segno
   accanto a quello della voce corrente, e due segni insieme non evidenziano
   niente. Se tornano, non e' un ripensamento: e' una regressione.

   `data-voce` (sempre dal loader) dice "questa voce e' una categoria". Nessuna
   regola di questo foglio lo legge piu': resta come marcatore nel DOM, ed e'
   da li' che il collaudo verifica che il dato sia arrivato. */
.site-header .nav-root > li,
#mob-drawer .mob-accordion,
#mob-drawer .mob-nav > a.mob-link { --voce: var(--voce-db, var(--cyan)); }

/* ════════════════════════════════════════════════════════════
   1. TOP BAR — ciano pieno, testo scuro, telefono protagonista
   ════════════════════════════════════════════════════════════ */
.site-header .top-bar { background: var(--cyan); border-bottom: 0; }

@media (min-width: 1024px) {
  .site-header .top-bar .container { min-height: 48px; height: 48px; }
  .site-header .top-bar a,
  .site-header .top-bar svg { color: #05050C; }
  .site-header .top-bar-left { gap: 1.6rem; align-items: center; }
  .site-header .top-bar-right a:hover { opacity: 0.6; }

  /* Telefono: pill gialla a scritta nera, come su mobile (qui sotto, blocco
     <1024) e come .footer-tel-pill — un solo trattamento per il recapito su
     tutto il sito (uniformato il 2026-08-03; prima qui la pill era tolta).
     Font display, misure scalate sulla barra da 48px. Email e social intatti. */
  .site-header .top-bar a.tb-phone {
    background: var(--yellow);
    color: #000;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 6px 16px 6px 12px;
    border-radius: 999px;
    gap: 0.5rem;
    transition: opacity 0.15s, transform 0.15s;
  }
  /* L'hover generico ".top-bar a:hover" (opacity .65) slaverebbe la pill
     piena: qui vale l'hover della gemella del footer. */
  .site-header .top-bar a.tb-phone:hover { opacity: 0.88; transform: scale(1.02); }
  .site-header .top-bar a.tb-phone svg { width: 18px; height: 18px; stroke-width: 2.4; color: #000; }
  .site-header .tb-email {
    font-family: var(--f-ui);
    font-weight: 600;
    font-size: 0.82rem;
    opacity: 0.85;
  }
  .site-header .tb-email svg { width: 15px; height: 15px; }
}

/* ════════════════════════════════════════════════════════════
   2. MAIN BAR — logo grande, ricerca a pillola larga, azioni a pill
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .site-header .main-bar {
    background: linear-gradient(180deg, #0c0c1b, rgba(8,8,18,0));
    border-bottom: 1px solid var(--border-2);
    /* CAUSA REALE della ricerca intrappolata sotto il menu: in style.css
       .main-bar ha position:relative;z-index:2 → crea uno stacking-context che
       confina la .search-results (creata da main.js dentro .main-search) SOTTO
       la nav-bar (z-index:80), qualunque z-index si dia al figlio. FIX: si alza
       l'INTERO contenitore .main-bar sopra nav (80) e mega-drop (70) → il
       pannello ricerca compare sopra il menu (comportamento A).
       .site-header .main-bar (0,0,2,0) vince su .main-bar di style.css (0,0,1,0). */
    position: relative;
    z-index: 90;
  }
  .site-header .main-bar .container {
    height: 108px;
    gap: clamp(16px, 3vw, 44px);
    padding-top: 0;
    padding-bottom: 0;
  }
  .site-header .main-logo-img { height: 66px; }

  /* Ricerca: pillola larga fino alle azioni */
  .site-header .main-search {
    flex: 1;
    max-width: none;
    margin: 0;
  }
  .site-header .main-search input {
    height: 46px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-2);
    background: var(--bg-input);
    padding: 0 1rem 0 2.8rem;
    font-family: var(--f-body);
    font-size: 0.92rem;
  }
  .site-header .main-search-icon { left: 1rem; }
  .site-header .main-search-icon svg { width: 18px; height: 18px; }

  /* Azioni a pillola con etichetta su due righe */
  .site-header .main-actions { margin-left: 0; gap: 0.7rem; }
  .site-header .main-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border-2);
    color: var(--text);
    font-family: var(--f-ui);
    font-weight: 600;
    font-size: 0.82rem;
  }
  .site-header .main-btn:hover { border-color: rgba(0,212,255,0.45); color: var(--text); }
  .site-header .main-btn svg { width: 18px; height: 18px; }
  .site-header .main-btn .mb-txt {
    font-family: var(--f-ui);
    font-size: 0.66rem;
    line-height: 1.1;
    color: var(--text-2);
    text-align: left;
  }
  .site-header .main-btn .mb-txt b { color: #fff; font-size: 0.82rem; }
  .site-header .main-btn-cart { position: relative; }
  .site-header .main-btn-cart .cart-count { top: -7px; right: -7px; }
}

/* ════════════════════════════════════════════════════════════
   3. NAV BAR — barra menu separata, maiuscolo, mega-drop compatte
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .site-header .nav-bar {
    background: #0d0d1a;
    border-top: 1px solid var(--border-2);
    border-bottom: 2px solid var(--cyan);
    /* La nav (e le sue tendine) stanno SOPRA la main-bar (z-index:2) cosi'
       il pannello risultati ricerca (.search-results, dentro la main-bar)
       resta sotto la barra menu e le mega-tendine. */
    position: relative;
    z-index: 80;
  }
  .site-header .nav-bar .container { position: relative; justify-content: stretch; }

  /* Lo stacking ora è governato dal contenitore .main-bar (z-index:90, sopra),
     non dal valore di questo figlio: basta un valore positivo normale.
     (.main-search base ha già position:relative → àncora il pannello sotto la
     barra di ricerca, vedi css/style.css.) */
  .site-header .search-results { z-index: 5; }

  .site-header .nav-root {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
    width: 100%;
  }
  .site-header .nav-bar.mega-nav .nav-root > li { position: relative; }

  /* Voci macro: maiuscolo, una riga, niente wrap.
     Le 10 voci a corpo fisso non ci stavano MAI nel container: sforavano di
     236px a 1025 e di 13px anche a 1440 (il container è capped a 1184), e in
     sticky l'eccedenza finiva sotto le icone lente/account/carrello.
     Corpo, spaziatura e padding ora scalano col viewport tra 1024 e 1280,
     dove raggiungono i valori pieni di prima. */
  .site-header .nav-root > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 700;
    /* Corpo ridotto (~1–2px in meno rispetto a prima: cap 0.90→0.84rem, slope
       più conservativa) per dare respiro fra le voci senza affollare le icone.
       Nella fascia critica 1025–1279 il floor resta ~identico a prima → nessun
       overflow reintrodotto; il guadagno di spazio si sente soprattutto da 1280+.
       Il padding orizzontale (= aria fra le voci, gap:0) ha la STESSA pendenza
       di prima nella fascia stretta, ma un cap più alto (0.5→0.72rem) così alle
       larghezze grandi la barra respira e non sembra vuota. */
    font-size: clamp(0.72rem, 0.95vw, 0.84rem);
    letter-spacing: clamp(0.01em, 0.16vw - 0.15em, 0.04em);
    padding: 0.92rem clamp(0.16rem, 0.55vw - 0.06rem, 0.72rem);
    color: var(--text-2);
  }
  .site-header .nav-root > li > a:hover { color: #fff; background: rgba(255,255,255,0.04); }
  .site-header .nav-root > li > a::after { display: none; }   /* niente underline base */

  /* ── VOCE CORRENTE — desktop e sticky (stessa .nav-root con .is-scrolled) ──
     Sotto le voci NON correnti non passa niente: nessun filo, né a riposo né
     al passaggio del mouse. Il <li> resta senza ::after, ed è lì che un tratto
     per-voce verrebbe naturale di riscriverlo: non ci deve tornare. L'unico
     segno sotto la barra è quello della voce accesa, qui sotto.
     L'evidenza è una scelta di design, non un underline di default: sotto la
     voce accesa compare un "ink-tick" luminoso — eco della firma CMYK del sito
     (il border-bottom cyan della nav + la nav-cmyk). DUE segnali oltre al
     colore: testo colorato + tratto/indicatore. Il tick è un ::after in absolute
     → NESSUNO spostamento di layout quando compare (le voci non "saltano").
     Il colore è quello del reparto (--voce), non più il cyan fisso: la voce
     accesa si accende del suo, come la pagina che sta per aprire. */
  .site-header .nav-root > li > a[aria-current="page"],
  .site-header .nav-root > li > a.is-current { color: var(--voce); position: relative; }
  .site-header .nav-root > li > a[aria-current="page"]::after,
  .site-header .nav-root > li > a.is-current::after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 20px;
    height: 2.5px;
    transform: translateX(-50%);
    background: var(--voce);
    border-radius: 2px;
    /* L'alone segue l'inchiostro. color-mix e non un rgba() scritto a mano:
       un rgba() vorrebbe dire ri-scrivere il colore, cioè farne una copia. */
    box-shadow: 0 0 8px color-mix(in srgb, var(--voce) 75%, transparent);
  }
  .site-header .nav-root > li > a svg,
  .site-header .nav-root > li > a .drop-arrow { width: 11px; height: 11px; opacity: 0.6; flex-shrink: 0; }
  /* Freccia = zona di tap DEDICATA al toggle tendina (il nome naviga).
     Allarghiamo l'area cliccabile mantenendo il layout invariato: box-sizing
     content-box tiene il glyph a 11px, il padding cresce l'hit-area e i margin
     negativi compensano l'ingombro (altezza riga e posizione invariate).
     Estensione soprattutto verso destra/alto/basso: a sinistra minima per non
     rubare i tap sul nome. */
  .site-header .nav-root > li.has-mega > a .drop-arrow,
  .site-header .nav-root > li.has-drop > a .drop-arrow {
    box-sizing: content-box;
    padding: 14px 12px 14px 4px;
    margin: -14px -8px -14px 0;
    cursor: pointer;
  }

  /* ── LO SPAZIO SI MISURA SUL TESTO, NON SUL RIQUADRO ─────────────────────
     `justify-content: space-between` distribuisce l'aria fra i RIQUADRI, e i
     riquadri non sono larghi uguale: quelli con la tendina portano anche la
     freccina, quello di Promo anche il pallino. A schermo si leggeva cosi' —
     Home, Promo e Stampa appiccicate, le altre otto staccate (misurato a
     1100px: 34 · 24 · poi 48 px fra nome e nome). L'aria era gia' distribuita
     bene; sbagliato era CIO' SU CUI la si distribuiva.

     Freccina e pallino escono dal conto con un margine negativo pari a quel
     che aggiungono. Fatto questo, la distanza fra due nomi vale
     `padding + aria + padding` per OGNI coppia: uniforme per costruzione, non
     per un numero azzeccato.

       24px  la freccina: 5 di `gap` + 11 di segno + 4 e 12 di area di tocco
             − 8 di rientro (cioe' il riquadro della regola qui sopra, margine
             compreso, piu' lo spazio che lo stacca dal nome)
       7px + .22rem  il pallino di Promo e il `gap` del suo <a>

     Il `gap` sta qui e non in css/style.css (dove .has-mega ne dichiarava 5px)
     perche' il numero della compensazione lo deve poter NOMINARE, invece di
     ereditarlo da un altro foglio; e `.has-drop`, che quel valore lo perdeva
     per specificita', smette di essere l'eccezione silenziosa.

     I 5px SONO RIMASTI 5, e la ragione e' un vincolo che vince su un
     miglioramento. Ad aria uniforme, a dire di chi e' la freccina resta solo
     la vicinanza: nello stato agganciato a 1440 dista 9px dal proprio nome e
     14 dal successivo (1:1,56), mentre a 3px sarebbe 1:2,3, cioe' meglio. Ma
     l'<a> si stringe insieme al suo contenuto, e il tratto della voce corrente
     e' centrato sull'<a>: due pixel di gap in meno sono un pixel di tratto piu'
     a sinistra. Il tratto non si sposta — e' la consegna — quindi la freccina
     resta dov'e'. Se un domani il tratto verra' ancorato al NOME invece che al
     riquadro, questi 5px si possono riprendere in mano.

     IL MARGINE STA SUL <li>, E NON SULL'<a>, ed e' la differenza fra correggere
     e spostare il problema. Sull'<a> il tratto della voce corrente sarebbe
     salvo lo stesso (e' un ::after ancorato al PADDING BOX, che un margine non
     tocca), ma il <li> si stringe su quel che l'<a> occupa margini compresi —
     e sul <li> sono posizionate le mega-tendine, che si sposterebbero. Sul
     <li> non si muove ne' l'uno ne' le altre: cambia solo la distribuzione,
     che e' l'unica cosa che doveva cambiare.

     UN VALORE SOLO PER I DUE STATI. A riposo e agganciato cambiano corpo,
     spaziatura e padding, ma la freccina resta 11px e i suoi stacchi sono in
     pixel: la compensazione e' la stessa, e infatti qui non c'e' nessun
     duplicato per `.is-scrolled`. Chi tocca la regola della freccina qui sopra
     deve tornare su questi numeri — la prova che non siano invecchiati e' un
     collaudo che misura le distanze vere in Chrome
     (_sviluppo_e_note/tools/collaudo-menu-spaziatura.js). */
  .site-header .nav-root > li.has-mega > a,
  .site-header .nav-root > li.has-drop > a  { gap: 5px; }

  .site-header .nav-root > li.has-mega,
  .site-header .nav-root > li.has-drop      { margin-right: -24px; }
  .site-header .nav-root > li.nav-promo-item { margin-left: calc(-7px - 0.22rem); }

  /* Promo — voce accesa col SUO inchiostro + pallino luminoso.
     Era magenta scritto a mano, in tre punti di questo blocco. Ora è --voce,
     cioè `ivac_categorie.colore` della riga 'promozioni' (#FFD600). Non è un
     colore nuovo scelto qui: è quello che c'era già in tabella e che la pagina
     Promo userà come accento il giorno in cui la convertiremo.
     Specificita' >= della regola base .nav-root > li > a (0,0,2,2), altrimenti
     l'accento perde e la voce resta chiara. li.nav-promo-item porta a (0,0,3,2). */
  .site-header .nav-root > li.nav-promo-item > a { color: var(--voce); }
  .site-header .nav-root > li.nav-promo-item > a:hover {
    background: color-mix(in srgb, var(--voce) 10%, transparent);
    color: var(--voce);
  }
  .site-header .promo-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--voce);
    box-shadow: 0 0 10px var(--voce);
    flex-shrink: 0;
  }

  /* Badge PROMO nelle tendine desktop: stesso look giallo del mobile e staccato
     dal nome. Il badge è iniettato dal loader (.nav-promo-badge) dentro .mega-col a;
     la regola base usa margin-left:auto che in un <a> block collassa a 0 → attaccato.
     Qui forziamo un margine reale di .6rem (override più specifico + foglio caricato dopo). */
  .site-header .nav-root .nav-promo-badge,
  .site-header .mega-col a .nav-promo-badge {
    background: var(--yellow);
    color: #1a1300;
    font-family: var(--f-mono);
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: .6rem;
    margin-right: 0;
  }

  /* ── MEGA-DROP — tendina compatta semitrasparente con blur ──
     Sostituisce il vecchio .mega-panel full-width (nessuna JS la nomina). */
  .site-header .mega-drop {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 24px);
    background: rgba(15,22,34,0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-2);
    border-top: 2px solid var(--cyan);
    border-radius: 0 0 12px 12px;
    padding: 1.1rem 1.3rem;
    display: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 1rem 40px;
    z-index: 70;
    box-shadow: 0 26px 64px rgba(0,0,0,0.7);
  }
  /* Ogni voce àncora la propria tendina (i <li> restano position:relative, vedi sopra):
     la mega-drop scende allineata SOTTO la voce cliccata (left:0 = bordo sinistro voce).
     Solo le ultime 2 voci con tendina la estendono verso sinistra (right:0) per non
     uscire a destra dallo schermo — restano comunque ancorate alla propria voce. */
  .site-header .nav-bar.mega-nav .nav-root > li:nth-last-child(-n+3) > .mega-drop { left: auto; right: 0; }

  /* Apertura: hover · focus-within (tastiera) · .is-open · .drop-open (touch, hook reale) */
  .site-header .has-mega:hover > .mega-drop,
  .site-header .has-mega:focus-within > .mega-drop,
  .site-header .has-mega.is-open > .mega-drop,
  .site-header .has-mega.drop-open > .mega-drop { display: flex; }

  /* Colonne adattive */
  .site-header .mega-drop .mega-col {
    flex: 0 0 auto;
    min-width: 184px;
    max-width: 320px;     /* piu' largo: ospita le voci a 0.95rem senza tagli */
    width: max-content;
    text-align: left;
  }

  /* Intestazioni sottocategoria — mono, ciclo CMYK per colonna */
  .site-header .mega-drop .mega-col-title {
    font-family: var(--f-mono);
    font-size: 0.82rem;            /* intestazioni sottocategoria piu' grandi */
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 0.55rem;
    padding-bottom: 0.42rem;
    border-bottom: 1px solid var(--border);
  }
  .site-header .mega-drop .mega-col:nth-child(3n+1) .mega-col-title { color: var(--cyan);    border-bottom-color: rgba(0,212,255,0.30); }
  .site-header .mega-drop .mega-col:nth-child(3n+2) .mega-col-title { color: var(--magenta); border-bottom-color: rgba(255,45,120,0.30); }
  .site-header .mega-drop .mega-col:nth-child(3n+3) .mega-col-title { color: var(--yellow);  border-bottom-color: rgba(255,214,0,0.30); }

  /* Voci prodotto — neutre, niente striping; hover CMYK alternato per riga */
  .site-header .mega-drop .mega-col ul { display: block; margin: 0; padding: 0; list-style: none; }
  .site-header .mega-drop .mega-col ul li { background: none; }
  .site-header .mega-drop .mega-col ul li a {
    display: block;
    padding: 0.32rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: 5px;
    font-family: var(--f-ui);
    font-weight: 500;
    font-size: 0.95rem;            /* voci tendina grandi come il menu vecchio */
    color: var(--text-2);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 1.3;
    transition: color 0.18s, background 0.18s, padding-left 0.18s;
  }
  .site-header .mega-drop .mega-col ul li:nth-child(3n+1) a:hover { color: var(--cyan);    background: rgba(0,212,255,0.10);  padding-left: 1rem; }
  .site-header .mega-drop .mega-col ul li:nth-child(3n+2) a:hover { color: var(--magenta); background: rgba(255,45,120,0.10);  padding-left: 1rem; }
  .site-header .mega-drop .mega-col ul li:nth-child(3n+3) a:hover { color: var(--yellow);  background: rgba(255,214,0,0.10);   padding-left: 1rem; }

  /* ── LINK PRODOTTO CORRENTE nella colonna (voce piccola, lista verticale) ──
     Non l'ink-tick della nav (là è una barra orizzontale sotto una voce macro):
     qui la voce è in colonna, quindi l'indicatore si adatta all'ASSE VERTICALE,
     come nel drawer — barra a sinistra (box-shadow inset → nessuno spostamento
     del testo), velo cyan e peso. Tre segnali oltre al colore. La specificità
     (aria-current/.is-current) e il foglio caricato dopo battono l'hover CMYK
     ciclico dei :nth-child, così la voce corrente resta cyan qualunque sia la
     sua posizione. padding invariato → nessun layout-shift all'evidenza. */
  .site-header .mega-drop .mega-col ul li a[aria-current="page"],
  .site-header .mega-drop .mega-col ul li a.is-current {
    color: var(--cyan);
    font-weight: 700;
    background: rgba(0,212,255,0.10);
    box-shadow: inset 3px 0 0 0 var(--cyan);
  }
  /* Hover sulla voce già corrente: resta cyan, non vira sul colore di riga. */
  .site-header .mega-drop .mega-col ul li a[aria-current="page"]:hover,
  .site-header .mega-drop .mega-col ul li a.is-current:hover {
    color: var(--cyan);
    background: rgba(0,212,255,0.16);
    padding-left: 0.5rem;   /* annulla lo scorrimento dell'hover: la voce corrente non “salta” */
  }

  /* ── Slot SUPER PROMO (dinamico, popolato dal loader) reso come .mega-promo ──
     Si mostra solo quando esiste una promo reale per la categoria (altrimenti [hidden]).
     I sotto-elementi .sp-img/.sp-badge/.sp-name/.sp-btn sono gia' stilati in style.css. */
  .site-header .mega-drop .mega-superpromo {
    flex: 0 0 212px;
    width: 212px;
    max-width: 212px;
    align-self: flex-start;
  }
  /* Tag "Offerta attiva" giallo, come tutto cio' che parla di promozioni
     (replica .mp-tag del mockup, senza toccare il loader) */
  .site-header .mega-drop .mega-superpromo .sp-body::before {
    content: "Offerta attiva";
    font-family: var(--f-mono);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow);
    order: -1;
  }
}

/* ════════════════════════════════════════════════════════════
   4. BARRA CMYK agganciata sotto la nav (firma di quadricromia)
   ════════════════════════════════════════════════════════════ */
/* Fascia CMYK verbatim variante-b (.ink-strip): 24 segmenti flex:1, identica
   a tutti i breakpoint (nessun override responsive). Classe nav-cmyk tenuta
   come hook storico (referenziata solo da CSS, nessuna JS/sticky la nomina). */
.site-header .nav-cmyk {
  display: flex;
  height: 4px;
  width: 100%;
  pointer-events: none;
}
.site-header .nav-cmyk i { flex: 1; }
.site-header .nav-cmyk i:nth-child(4n+1) { background: var(--cyan); }
.site-header .nav-cmyk i:nth-child(4n+2) { background: var(--magenta); }
.site-header .nav-cmyk i:nth-child(4n+3) { background: var(--yellow); }
.site-header .nav-cmyk i:nth-child(4n+4) { background: #1A1A2E; }

/* ════════════════════════════════════════════════════════════
   5. STICKY COLLAPSE (solo desktop ≥1024px)
   Scrollando: top-bar e main-bar collassano, resta nav-bar + CMYK.
   Hook .is-scrolled (js/main.js initNav, soglia 8px) — nessuna modifica JS.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .site-header .top-bar,
  .site-header .main-bar {
    max-height: 220px;
    transition: max-height 0.34s var(--ease-out, ease),
                opacity 0.22s var(--ease-out, ease);
  }
  /* La top-bar non contiene tendine → può clippare sempre.
     La main-bar invece OSPITA la tendina ricerca (.search-results, dentro
     .main-search): da espansa deve restare overflow:visible, altrimenti il
     pannello risultati viene tagliato e non può comparire sopra la nav-bar.
     Clippa SOLO mentre collassa (.is-scrolled) per nascondere il contenuto. */
  .site-header .top-bar { overflow: hidden; }
  .site-header .main-bar { overflow: visible; }
  .site-header.is-scrolled .top-bar,
  .site-header.is-scrolled .main-bar {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-top: 0;
    border-bottom: 0;
    border-bottom-color: transparent;
    min-height: 0;
    pointer-events: none;
  }
  .site-header.is-scrolled .top-bar .container,
  .site-header.is-scrolled .main-bar .container {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    height: 0;
  }
  /* la nav-bar resta visibile: annulla la traslazione di hide */
  .site-header.header-hidden { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   6. MOBILE / TABLET (<1024px) — rifinitura look variante-b
   Struttura e JS invariati (#mob-drawer, .main-hamburger,
   mob-search-overlay). Solo CSS: dimensioni, colori, spaziature.
   Fonte estetica: _design-proposta/variante-b (.vb-mbar / .vb-drawer).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* le etichette a due righe dei pill desktop non servono in compatto */
  .site-header .mb-txt { display: none; }

  /* ── TOP-BAR: fascia cyan sottile, SOLO telefono in pill gialla ──
     Il numero torna nell'header (era nel footer del drawer, ora rimosso).
     Email/social nascosti: la barra resta minima. */
  .site-header .top-bar { display: block; background: var(--cyan); }
  .site-header .top-bar .container { justify-content: center; min-height: 0; height: auto; padding: 5px 12px; }
  .site-header .top-bar-right, .site-header .tb-email { display: none; }
  .site-header .top-bar-left { gap: 0; justify-content: center; }
  .site-header .top-bar a.tb-phone {
    background: var(--yellow);
    color: #000;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .02em;
    line-height: 1;
    padding: 5px 14px 5px 11px;
    border-radius: 999px;
    gap: .45rem;
  }
  .site-header .top-bar a.tb-phone svg { width: 16px; height: 16px; stroke-width: 2.4; color: #000; }

  /* ── RIGA 1 · main-bar: HAMBURGER sx · LOGO centrato · CARRELLO dx ──
     I figli di .main-actions diventano item del container (display:contents),
     così logo, carrello, hamburger e ricerca si ordinano insieme senza
     spostare il markup del partial. Icone NUDE (niente box cyan). */
  .site-header .main-bar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
    gap: 0.4rem;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .site-header .main-actions { display: contents; }
  .site-header .main-hamburger { order: 1; border: 0; background: none; }
  .site-header .main-logo { order: 2; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
  .site-header .main-btn-cart { order: 3; border: 0; background: none; }
  /* Ricerca rimossa dall'header mobile: è un doppione del campo in cima al
     #mob-drawer (vedi .mob-ds). Header mobile = riga unica hamburger/logo/carrello. */
  .site-header .main-search { display: none; }
  /* Account → solo nel #mob-drawer (niente doppione). Lente non serve:
     la ricerca è in cima al drawer. */
  .site-header .main-btn-account,
  .site-header .main-actions .ivac-udrop-wrap,
  .site-header .mob-search-btn { display: none !important; }

  /* LOGO: compatto come il mockup C1 (non 70px) */
  .site-header .main-logo-img { height: 34px; max-width: 210px; width: auto; object-position: center; }

  /* HAMBURGER: 3 barre bianche, area toccabile ≥44px */
  .site-header .main-hamburger {
    width: 44px; height: 44px;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px; padding: 0; flex-shrink: 0;
  }
  .site-header .main-hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }

  /* CARRELLO: solo icona + badge; .mb-txt resta nascosto.
     Badge magenta in alto a destra come .vb-mcart-n del mockup. */
  .site-header .main-btn-cart {
    position: relative;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; flex-shrink: 0;
  }
  .site-header .main-btn-cart svg { width: 23px; height: 23px; }
  .site-header .main-btn-cart .cart-count {
    top: 4px; right: 2px;
    min-width: 15px; height: 15px;
    font-family: var(--f-mono);
    font-size: 0.54rem;
    border: 0;
  }

  /* ── RICERCA DRAWER (in cima al #mob-drawer, stile .vb-msearch) ──
     Campo reale + contenitore risultati .sr-* sotto. Il drawer scrolla,
     così i risultati spingono il contenuto senza salti di layout. */
  #mob-drawer .mob-ds {
    position: relative;
    display: flex;
    align-items: center;
    margin: 12px 14px 8px;
  }
  #mob-drawer .mob-ds-ic {
    position: absolute;
    left: 12px;
    color: var(--text-3);
    display: flex;
  }
  #mob-drawer .mob-ds-ic svg { width: 18px; height: 18px; }
  #mob-drawer .mob-ds-input {
    width: 100%;
    height: 44px;
    background: var(--bg-input);
    border: 1px solid var(--border-2);
    border-radius: 9px;
    padding: 0 14px 0 40px;
    color: #fff;
    font-family: var(--f-ui);
    font-size: 0.86rem;
  }
  #mob-drawer .mob-ds-input::placeholder { color: var(--text-3); }
  #mob-drawer .mob-ds-results { margin: 0 14px; }   /* risultati .sr-* sotto il campo; il drawer scrolla */

  /* Account pill in cima (riuso .mob-drawer-login, ora dentro la nav) */
  #mob-drawer .mob-link--account.mob-drawer-login {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 46px;
    margin: 0 14px 6px;
    font-family: var(--f-ui);
    font-weight: 600;
    font-size: .88rem;
    color: var(--text);
    border: 1px solid var(--border-2);
    border-radius: 9px;
    padding: 0 14px;
  }
  #mob-drawer .mob-link--account.mob-drawer-login svg { width: 20px; height: 20px; color: var(--cyan); flex: 0 0 auto; }

  /* ── Drawer in stile mockup variante-b: fondo scuro, accordion netto ── */
  .site-header ~ #mob-drawer,
  #mob-drawer { background: #0a0a14; }
  /* Tap immediato su ogni voce/chevron: elimina l'attesa iOS del double-tap-zoom
     (~300ms) fra touchend e click. Il click nativo dell'<a> parte senza esitazione;
     nessun handler custom (la navigazione resta quella del browser). */
  #mob-drawer a,
  #mob-drawer button { touch-action: manipulation; }
  /* LAMPO alla chiusura (X/overlay): iOS Safari ricompone l'intero viewport
     quando un layer backdrop-filter sfuma via (l'overlay va opacity 1→0 in 0.35s).
     Rimuoviamo il blur — override sull'id, batte .mob-overlay in css/style.css.
     Lo scrim resta rgba(0,0,0,.72): il fade è identico, senza il flash GPU.
     (Il flash sulla pagina di ARRIVO è invece il flash-header noto → progetto header.) */
  #mob-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
  #mob-drawer .mob-link {
    font-family: var(--f-ui);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* .mob-acc-trigger non è più la riga intera: ora è il solo chevron-toggle
     dentro .mob-acc-head (vedi blocco dedicato sotto). */
  /* voci sottocategoria: area toccabile piena (mockup: min-height 44px) */
  #mob-drawer .mob-acc-panel a { min-height: 44px; }
  #mob-drawer .mob-link--account { color: var(--cyan); }
  /* sotto-titoli sottocategoria in mono (coerenza con desktop/mockup) */
  #mob-drawer .mob-subgroup-title {
    font-family: var(--f-mono);
    font-weight: 500;
    letter-spacing: 0.14em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
  }

  /* PROMO: voce flat col suo inchiostro + pallino luminoso (come .vb-acc-promo).
     Il selettore resta agganciato all'href — la chiave e il percorso non si
     toccano — ma il COLORE non è più scritto qui: è --voce, cioè quello che il
     loader ha letto in tabella. Stesso valore che prende la voce gemella nella
     barra desktop: un posto solo, quindi non possono divergere. */
  #mob-drawer .mob-nav > a.mob-link[href*="promozioni"] { color: var(--voce); }
  #mob-drawer .mob-nav > a.mob-link[href*="promozioni"]::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--voce);
    box-shadow: 0 0 8px var(--voce);
    margin-right: .55rem;
    vertical-align: middle;
  }

  /* Sottotitoli sottocategoria in ciclo CMYK (come .vb-acc-panel h5) */
  #mob-drawer .mob-acc-panel .mob-subgroup-title:nth-of-type(3n+1) { color: var(--cyan); }
  #mob-drawer .mob-acc-panel .mob-subgroup-title:nth-of-type(3n+2) { color: var(--magenta); }
  #mob-drawer .mob-acc-panel .mob-subgroup-title:nth-of-type(3n+3) { color: var(--yellow); }

  /* Badge PROMO giallo (lo span .mob-promo-badge è iniettato dal loader) */
  #mob-drawer .mob-acc-panel a .mob-promo-badge {
    display: inline-block;
    margin-left: .6rem;
    background: var(--yellow);
    color: #1a1300;
    font-family: var(--f-mono);
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
  }

  /* ── ACCORDION HEAD: etichetta-link cliccabile + chevron-toggle ──
     Il tap sull'etichetta apre la pagina categoria; il tap sul chevron
     espande/chiude il pannello. */
  #mob-drawer .mob-acc-head {
    display: flex;
    align-items: center;
  }

  /* ── FRA UNA VOCE E L'ALTRA: UN FILETTO CHE NON SI FA NOTARE ───────────
     Il separatore è GRIGIO e basta. Non porta il colore del reparto: quello
     accende la voce corrente e nient'altro, e una riga tinta sotto OGNI voce
     era un secondo segno che rubava forza all'unico che deve parlare.

     6% di bianco su #0a0a14, cioè rgb(25,25,34) su rgb(10,10,20): +15.

     È PASSATO PER IL 2,5%, e non ha retto. Sul render era quel che serviva —
     +6 di stacco contro i +14 di prima, misurato sui pixel — ma su un telefono
     vero, in mano, non si vedeva. Un filetto da 1px al 2,5% su fondo quasi nero
     muore su uno schermo meno contrastato del monitor, o con la luminosità
     bassa, o alla luce del giorno: sono tre condizioni normali, non estreme.

     La lezione sta qui, non nel numero: il render dice se il filetto C'È e di
     che colore è, NON se si vede. Per la soglia di visibilità comanda la prova
     sul telefono. Chi lo volesse riabbassare "perché a schermo basta" rifà lo
     stesso giro.

     SI AGGIUNGE ALL'ARIA, non la sostituisce: i 17px sopra e sotto restano, e
     sono quelli a dare il ritmo. Il filetto ci passa in mezzo, non al posto
     loro — un separatore che deve fare anche da spaziatura torna a essere una
     linea che divide.

     Vale per tutte e due le famiglie di voci, con lo STESSO valore: le
     fisarmoniche (bordo su .mob-acc-head, che è la riga) e le voci semplici
     Home/Promo/Contatti. Prima erano due grigi diversi per una cosa sola — 6%
     qui e 5% là; adesso 6% per entrambe. */
  #mob-drawer .mob-acc-head,
  #mob-drawer .mob-nav > a.mob-link:not(.mob-link--account) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* Sotto l'ULTIMA voce non c'è niente da separare: lì il filetto non
     dividerebbe due voci, sottolineerebbe Contatti.
     I selettori ripetono per intero quelli che il bordo lo mettono, :last-child
     in più. Scritto corto (`.mob-nav > *:last-child`) perdeva: `:not()` porta
     la specificità del suo argomento, quindi la regola qui sopra vale (1,0,3,1)
     e un azzeramento da (1,0,1,1) non la tocca — l'ordine nel file non basta. */
  #mob-drawer .mob-nav > .mob-accordion:last-child .mob-acc-head,
  #mob-drawer .mob-nav > a.mob-link:not(.mob-link--account):last-child {
    border-bottom: 0;
  }
  /* La spaziatura delle voci semplici. Il valore di `.mob-link` in
     css/style.css resta com'è: si riscrive qui, dentro il drawer, senza
     toccarlo per tutti.
     La pillola Accedi/Registrati è fuori da entrambe le regole: quella non è
     una voce di menu, è un riquadro chiuso con un bordo suo su quattro lati. */
  #mob-drawer .mob-nav > a.mob-link:not(.mob-link--account) {
    padding-top: 17px;
    padding-bottom: 17px;
  }
  #mob-drawer .mob-acc-link {
    flex: 1;
    /* 17px come le voci semplici qui sopra: senza il filetto a scandire le
       righe, le due famiglie devono avere lo STESSO passo, altrimenti si vede
       che sono due cose diverse messe in fila. */
    padding: 17px 18px;
    min-height: 54px;
    display: flex;
    align-items: center;
    font-family: var(--f-ui);
    font-weight: 700;
    font-size: .84rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
  }
  #mob-drawer .mob-acc-link:hover,
  #mob-drawer .mob-acc-link:active { color: var(--voce); }

  /* ── VOCE CORRENTE nel drawer (verticale) ──────────────────────────
     L'ink-tick orizzontale del desktop qui si adatta all'asse verticale:
     una BARRA a sinistra (inset box-shadow → nessuno spostamento del testo),
     più testo colorato e un velo. DUE+ segnali oltre al colore. Vale sia per
     le voci semplici (Home/Contatti) sia per le etichette-categoria.
     Il colore è --voce: la stessa variabile che accende il tick nella barra
     desktop. Timbri è magenta di qua e magenta di là perché è LO STESSO dato,
     non perché due fogli si sono messi d'accordo. */
  #mob-drawer .mob-nav > a.mob-link[aria-current="page"],
  #mob-drawer .mob-acc-link[aria-current="page"] {
    color: var(--voce);
    background: linear-gradient(90deg, color-mix(in srgb, var(--voce) 12%, transparent), transparent);
    box-shadow: inset 3px 0 0 0 var(--voce);
  }

  /* ── LINK PRODOTTO CORRENTE dentro il pannello a fisarmonica ────────────────
     Requisito a due livelli: a pannello chiuso è la macro-categoria (.mob-acc-link
     sopra) a essere accesa; aprendo il pannello, il PRODOTTO corrente deve
     leggersi anche su sfondo scuro e con voci fitte. Il solo testo cyan non
     basta: stesso doppio-segnale delle macro nel drawer — barra cyan a sinistra
     (box-shadow inset → nessuno spostamento del testo) + velo cyan in gradiente +
     peso. Coerente con l'evidenza macro appena sopra, così i due livelli sono
     un unico sistema. Nessun layout-shift. */
  #mob-drawer .mob-acc-panel a[aria-current="page"],
  #mob-drawer .mob-acc-panel a.is-current {
    color: var(--cyan);
    font-weight: 700;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.12), rgba(0, 212, 255, 0));
    box-shadow: inset 3px 0 0 0 var(--cyan);
  }
  #mob-drawer .mob-acc-trigger {
    width: 52px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text);
    padding: 0;
  }
  #mob-drawer .mob-acc-trigger .mob-acc-arrow { width: 14px; height: 14px; transition: transform .2s; }
  #mob-drawer .mob-acc-trigger[aria-expanded="true"] .mob-acc-arrow { transform: rotate(180deg); }

  /* ── Ricerca mobile (overlay) coerente col look variante-b ── */
  .mob-search-overlay input { border-radius: 9px; }
  .mob-search-overlay input:focus { border-color: var(--cyan); }
}

/* iPad / tablet (768–1023): logo e icone più marcati e proporzionati.
   Layout invariato (hamburger sx · logo centrato · carrello dx · ricerca
   full-width sotto). Aree toccabili ≥50px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header .main-logo-img { height: 42px; max-width: 260px; }
  .site-header .main-btn-cart,
  .site-header .main-hamburger { width: 50px; height: 50px; }
  .site-header .main-btn-cart svg { width: 28px; height: 28px; }
  .site-header .main-hamburger span { width: 30px; height: 3px; }
  .site-header .main-search input { height: 48px; }
}

/* Telefoni stretti (≤480px): logo e icone ridimensionati perché hamburger,
   logo centrato e carrello entrino senza spaginare il viewport.
   La ricerca resta a tutta larghezza nella RIGA 2. Aree toccabili ≥42px. */
@media (max-width: 480px) {
  .site-header .main-logo-img { height: 30px; max-width: 170px; }
  .site-header .main-btn-cart,
  .site-header .main-hamburger { width: 42px; height: 42px; }
  .site-header .main-btn-cart svg { width: 22px; height: 22px; }
  .site-header .main-hamburger span { width: 22px; }
}

/* ════════════════════════════════════════════════════════════
   7. AZIONI COMPATTE IN STICKY (solo desktop ≥1024px)
   In sticky (.is-scrolled) top-bar + main-bar collassano: ricerca,
   account e carrello sparirebbero. Le riproponiamo come sole icone
   ALL'INTERNO della nav-bar, allineate a destra dopo "Contatti",
   dietro una hairline cyan che riprende la firma di quadricromia.
   Il markup .nav-actions è fratello di ul.nav-root (NON figlio) →
   il nth-last-child dei <li> categoria è intatto: tendine allineate.
   Nessuna JS nuova: riuso delega carrello (.main-btn-cart), delega
   ricerca (.mob-search-btn → #mob-search-overlay) e updater badge
   (querySelectorAll('.cart-count')).
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* A riposo: nascoste. La nav-root resta identica (space-between, 100%). */
  .site-header .nav-actions { display: none; }

  /* La lane delle icone (≈142px + separatore) esiste solo dove ci sta davvero:
     sotto i 1280 il menu occupa già tutta la barra, e mostrarle lì è ciò che
     faceva finire "Contatti" sotto lente/account/carrello. Sotto i 1280 la
     barra sticky resta di solo menu. */
  .site-header.is-scrolled .nav-actions { display: none; }

  /* Sticky: la .container diventa riga flex; la nav-root cede lo spazio a
     destra alle azioni mantenendo lo space-between su una traccia più corta
     (le voci restano distribuite, niente vuoto innaturale). */
  .site-header.is-scrolled .nav-bar .container {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .site-header.is-scrolled .nav-root {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Voci un filo più piccole SOLO in sticky: da 1280 in su le .nav-actions
     occupano ~170px a destra e le voci risultavano appiccicate. Riducendo
     font e padding orizzontale (space-between invariato) tornano ariose e
     restano staccate dalle icone. A riposo valgono i valori della regola base.
     Il minimo del clamp (0.70rem) è ben sopra la soglia di leggibilità;
     uppercase/peso invariati. */
  .site-header.is-scrolled .nav-root > li > a {
    font-size: clamp(0.70rem, 1.02vw, 0.82rem);
    letter-spacing: 0.02em;
    padding-left: clamp(0.16rem, 0.42vw - 0.06rem, 0.3rem);
    padding-right: clamp(0.16rem, 0.42vw - 0.06rem, 0.3rem);
  }
}

@media (min-width: 1280px) {
  .site-header.is-scrolled .nav-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    margin-left: 0.9rem;
    padding-left: 0.9rem;
    /* hairline cyan: eco del border-bottom:2px cyan della nav (firma CMYK) */
    border-left: 1px solid rgba(0,212,255,0.28);
    /* compaiono insieme al collasso delle barre, senza scatto */
    animation: navActReveal 0.3s var(--ease-out, ease) both;
  }
  @keyframes navActReveal {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* Icona-bottone: quadrata, stessa grammatica dei pill .main-btn
     (bordo tenue → hover cyan), ma ridotta a sola icona. */
  .site-header .nav-actions .na-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-2);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s var(--ease-out, ease),
                border-color 0.18s var(--ease-out, ease),
                background 0.18s var(--ease-out, ease);
  }
  .site-header .nav-actions .na-btn:hover,
  .site-header .nav-actions .na-btn:focus-visible {
    color: #fff;
    border-color: rgba(0,212,255,0.45);
    background: rgba(0,212,255,0.06);
    outline: none;
  }
  .site-header .nav-actions .na-btn svg { width: 18px; height: 18px; }

  /* Carrello: .main-btn-cart porta position:relative (badge) dalla sez.2.
     Riafferma i valori per sicurezza e posiziona il badge sull'angolo. */
  .site-header .nav-actions .na-cart { position: relative; }
  .site-header .nav-actions .na-cart .cart-count { top: -6px; right: -6px; }

  /* Account: ancora il pallino di presenza dello stato loggato. */
  .site-header .nav-actions .na-account { position: relative; }
  /* Stato LOGGATO (classe .is-logged aggiunta da shop-core initSessionNav):
     icona cyan + pallino di presenza in alto a destra. Comunica "sei dentro"
     senza testo, coerente con l'accento cyan dell'header. */
  .site-header .nav-actions .na-account.is-logged {
    color: var(--cyan);
    border-color: rgba(0,212,255,0.45);
  }
  .site-header .nav-actions .na-account.is-logged::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cyan);
    border: 2px solid #0d0d1a;           /* stacca dal fondo scuro della nav */
    box-shadow: 0 0 8px rgba(0,212,255,0.6);
  }
}

/* Il bottone ricerca riusa la classe .mob-search-btn (per la delega), ma
   quella classe è display:none !important sopra i 1025px (style.css) e
   #mob-search-overlay pure. Qui li riabilitiamo SOLO nel contesto sticky
   desktop: specificità + !important battono le regole di style.css. */
@media (min-width: 1025px) {
  .site-header.is-scrolled .nav-actions .mob-search-btn { display: inline-flex !important; }
  /* l'overlay ricerca (a <body>) può mostrarsi quando aperto anche su desktop */
  .mob-search-overlay.is-open { display: flex !important; }
}