/* ============================================================
   HEADER UFFICIALE (modello home2) — scoped su #nw-header.
   2 livelli da fermo → 1 livello compatto allo scroll (isteresi JS).
   Il pannello .nw-mega e l'off-canvas .nw-mnav usano i CSS del tema.
   ============================================================ */

/* Il tema mette overflow-x:hidden su html/body → body diventa scroll-container
   e position:sticky NON funziona. 'clip' taglia uguale ma senza rompere lo sticky
   (stesso fix già collaudato sulle PDP in pdp-finito.css). */
html,body{overflow-x:clip !important}

#nw-header{
  --h2-pine:#1d4231;
  --h2-pine2:#2a5a43;
  --h2-ink:#20291f;
  --h2-muted:#57664f;
  --h2-paper:#f7f4ec;
  --h2-felce:#e8efe2;
  --h2-amber:#e0a43c;
  --h2-amberd:#c98d26;
  --h2-line:#e3ded1;
  /* z-index SOPRA la .nw-mega-overlay del tema (9980): il pannello megamenu
     vive dentro l'header e deve stare sopra l'overlay, non sotto */
  position:sticky;top:0;z-index:9990;
  background:#fff;border-bottom:1px solid var(--h2-line);
  transition:box-shadow .25s;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
#nw-header.scrolled{box-shadow:0 8px 26px rgba(29,66,49,.12)}
#nw-header .wrap2{max-width:1200px;margin:0 auto;padding:0 28px}
#nw-header .hdr-main{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;padding:16px 0;transition:padding .25s}
#nw-header.scrolled .hdr-main{padding:9px 0}
#nw-header .ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ordini: fermo → riga1 logo|shop|search|acts, riga2 nav. scrolled → riga unica. */
#nw-header .burger{order:0;display:none}
#nw-header .logo{order:1;display:flex;align-items:center;text-decoration:none;line-height:1}
#nw-header .logo img{height:44px;width:auto;display:block;transition:height .25s}
#nw-header.scrolled .logo img{height:32px}
#nw-header .shopwrap{order:2;display:flex}
#nw-header .shopbtn{display:inline-flex;align-items:center;gap:7px;background:var(--h2-pine);color:#fff !important;text-decoration:none;
  font-size:14.5px;font-weight:700;border:0;border-radius:999px;padding:11px 20px;cursor:pointer;transition:background .2s;font-family:inherit}
#nw-header .shopbtn:hover{background:var(--h2-pine2)}
#nw-header .shopbtn .ic{width:15px;height:15px}
#nw-header.scrolled .shopbtn{padding:9px 16px;font-size:13.5px}
#nw-header .search{order:3;flex:1;display:flex;align-items:center;gap:10px;background:var(--h2-paper);border:1.5px solid var(--h2-line);
  border-radius:999px;padding:10px 20px;color:var(--h2-muted);max-width:100%;max-height:58px;opacity:1;overflow:visible;position:relative;margin:0;
  transition:border-color .2s,max-width .35s ease,max-height .35s ease,opacity .22s ease,padding .35s ease,margin .35s ease}
#nw-header .search:hover{border-color:var(--h2-pine2)}
#nw-header .search input[type=search]{border:0;background:none;flex:1;font:inherit;color:var(--h2-ink);outline:none;min-width:0;box-shadow:none;padding:0}
#nw-header .lens{order:4;display:none}
#nw-header .hdr-acts{order:5;display:flex;gap:6px}
#nw-header .nav{order:6;flex-basis:100%;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-width:0}
#nw-header .nav a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--h2-ink);padding:8px 15px;border-radius:999px;transition:background .2s}
#nw-header .nav a:hover{background:var(--h2-felce);color:var(--h2-ink)}
#nw-header .nav a.hot{color:var(--h2-amberd)}
@keyframes nw2fade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* scrolled: search collassa animata, nav sale in riga (centraggio sicuro) */
#nw-header.scrolled .search{flex:0 0 auto;max-width:0;max-height:0;opacity:0;padding:0;border-color:transparent;margin-inline:-11px;pointer-events:none;overflow:hidden}
#nw-header.scrolled .lens{display:grid}
#nw-header.scrolled .nav{order:3;flex-basis:auto;flex:1;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;animation:nw2fade .28s ease}
#nw-header.scrolled .nav::-webkit-scrollbar{display:none}
#nw-header.scrolled .nav a:first-child{margin-left:auto}
#nw-header.scrolled .nav a:last-child{margin-right:auto}
#nw-header.scrolled .nav a{font-size:clamp(11.5px,0.95vw,13.5px);padding:7px clamp(6px,0.8vw,11px);white-space:nowrap}
/* overflow:visible è ESSENZIALE: lo stato .scrolled collassa la barra con
   overflow:hidden e, senza ridichiararlo qui, il pannello live-search aperto
   dalla lente resta clippato (si vedeva il ghost ma non l'elenco prodotti). */
#nw-header.scrolled.search-open .search{flex:1 1 100%;order:7;max-width:100%;max-height:58px;opacity:1;padding:10px 20px;
  border-color:var(--h2-line);margin:2px 0 0;pointer-events:auto;overflow:visible;animation:nw2fade .3s ease}
#nw-header .hact{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;
  border-radius:12px;color:var(--h2-ink);transition:background .2s;text-decoration:none;cursor:pointer;font-family:inherit}
#nw-header .hact:hover{background:var(--h2-paper)}
#nw-header .hact .badge{position:absolute;top:4px;right:3px;min-width:17px;height:17px;border-radius:999px;background:var(--h2-amber);
  color:var(--h2-ink);font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 4px;line-height:1}
/* I due contatori (preferiti e carrello) devono essere IDENTICI: stesso verde,
   stessa misura, stessa posizione. Erano diversi in tutto — ambra 19×17 a 10,5px
   contro verde 18×18 a 11px, e persino a due altezze diverse — perché il carrello
   arriva dal fragment Woo (.nw-cart-count) con la forma del vecchio bollino,
   mentre il cuore usa .badge. Qui si allineano entrambi sul carrello.
   (Sostituisce la scelta "ambra ai preferiti" della mattina del 2026-07-28.) */
#nw-header .hact .badge,
#nw-header .hact .nw-cart-count{
  position:absolute;top:2px;right:0;min-width:18px;width:auto;height:18px;
  border-radius:999px;background:var(--principale,#0C4E2B);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;
  line-height:1;border:0;
  /* anello bianco: il pallino cade sull'angolo del disegno, senza stacco i due
     verdi si impastano e il numero diventa illeggibile */
  box-shadow:0 0 0 2px #fff;
}

/* hide di burger e lente RIBADITI DOPO .hact (stessa specificità: vince l'ultimo) */
#nw-header .burger{display:none}
#nw-header .lens{display:none}
#nw-header.scrolled .lens{display:grid}

/* pannello megamenu: ancorato sotto QUESTO header. Il CSS del tema lo piazza
   con top in px pensati per il vecchio layout (dopo lo scroll finiva fuori
   schermo, a viewport -328px) → ancoraggio blindato con !important. */
#nw-header .nw-mega{position:absolute !important;top:100% !important;bottom:auto !important;left:0 !important;right:0 !important;margin:0 !important}

/* ————— responsive ————— */
@media (max-width:1024px){
  /* come il vecchio header mobile: UNA riga — burger | logo | lente | icone.
     La barra di ricerca è collassata e si apre con la lente (anche da fermi). */
  #nw-header .burger{display:grid}
  #nw-header .shopwrap,#nw-header .nav{display:none}
  #nw-header.scrolled .nav{display:none}
  /* layout IDENTICO al vecchio: burger | logo CENTRATO | lente + carrello.
     Account e preferiti vivono nel menu hamburger (footer dell'off-canvas). */
  #nw-header .hdr-main{flex-wrap:wrap;gap:6px;padding:9px 0;position:relative}
  #nw-header .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  #nw-header.search-open .logo{top:24px;transform:translate(-50%,0)}
  #nw-header .lens{display:grid;margin-left:auto !important}
  #nw-header .hact{width:40px;height:40px}
  #nw-header .hdr-acts{gap:0;margin-left:0 !important} /* home2.css mette margin auto sulla stessa classe: qui deve spingere SOLO la lente */
  #nw-header .hdr-acts .hact:nth-child(1),
  #nw-header .hdr-acts .hact:nth-child(2){display:none !important}
  #nw-header .search{flex:0 0 auto;max-width:0;max-height:0;opacity:0;padding:0;border-color:transparent;margin:0;pointer-events:none;overflow:hidden}
  #nw-header.search-open .search{flex:1 1 100%;order:7;max-width:100%;max-height:58px;opacity:1;padding:10px 18px;
    border-color:var(--h2-line);margin-top:6px;pointer-events:auto;overflow:visible;animation:nw2fade .3s ease}
  #nw-header .logo img{height:30px}
  #nw-header.scrolled .logo img{height:26px}
}
@media (max-width:400px){
  #nw-header .wrap2{padding:0 10px}
  #nw-header .hact{width:38px;height:38px}
  #nw-header .logo img{height:26px}
}
@media (prefers-reduced-motion:reduce){
  #nw-header *{transition:none !important;animation:none !important}
}

/* ============ FOOTER: contrasto rinforzato (sitewide) ============
   Testi grigio-verde tenui su beige erano sotto soglia di lettura comoda. */
.elementor-location-footer .elementor-heading-title{color:#0C4E2B !important}
.elementor-location-footer p,
.elementor-location-footer .elementor-icon-list-text,
.elementor-location-footer .elementor-widget-text-editor{color:#2b3a30 !important}
.elementor-location-footer a,
.elementor-location-footer a .elementor-icon-list-text{color:#24422f !important}
.elementor-location-footer a:hover,
.elementor-location-footer a:hover .elementor-icon-list-text{color:#0C4E2B !important;text-decoration:underline}
.elementor-location-footer .elementor-icon-list-icon svg{fill:#41584a !important;color:#41584a !important}
/* il footer (.nw-foot) portava un margin-top di ~80px: creava una fascia di
   colore-body tra l'ultima sezione e il footer. Le sezioni hanno già il loro
   respiro nel padding: il margine non serve. */
footer.nw-foot{margin-top:0 !important}

/* ============ MEGAMENU COMPATTO (2 colonne + barra brand/POY) ============
   Prima ~700px: colonna bisogni ora scrollabile, brand in riga, POY a chip. */
#nw-header .nw-mega__inner{display:grid !important;grid-template-columns:270px minmax(0,1fr) 260px !important;gap:8px 36px !important;align-items:start}
#nw-header .nw-mega__col--needs .nw-needs{max-height:300px;overflow-y:auto;scrollbar-width:thin;padding-right:8px;
  -webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
#nw-header .nw-mega__col--subcats{max-height:340px;overflow-y:auto;scrollbar-width:thin}
/* Prodotto dell'Anno: colonna grande a destra (come prima), auto-contenuta */
#nw-header .nw-mega__col--poy{grid-column:3;grid-row:1}
#nw-header .nw-mega__bar{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid rgba(12,78,43,.12);margin-top:12px;padding-top:14px}
#nw-header .nw-mega__bar-brands{display:flex;gap:8px;flex-wrap:wrap}
#nw-header .nw-mega__bplinth{display:grid;place-items:center;height:46px;padding:0 16px;background:var(--h2-paper);border-radius:10px;transition:background .2s}
#nw-header .nw-mega__bplinth:hover{background:var(--h2-felce)}
#nw-header .nw-mega__bplinth img{max-height:26px;max-width:96px;width:auto;display:block}
#nw-header .nw-mega__poychip{margin-left:auto;display:flex;align-items:center;gap:10px;background:#fbf3df;border:1px solid #ecd9ac;
  border-radius:12px;padding:6px 14px 6px 8px;text-decoration:none;transition:transform .18s,box-shadow .18s}
#nw-header .nw-mega__poychip:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(138,100,20,.35)}
#nw-header .nw-mega__poychip img{width:38px;height:38px;object-fit:contain}
#nw-header .nw-mega__poychip .t{display:flex;flex-direction:column;line-height:1.3}
#nw-header .nw-mega__poychip .t b{font-size:11.5px;color:#8a6414 !important;display:inline-flex;gap:5px;align-items:center;text-transform:uppercase;letter-spacing:.05em}
#nw-header .nw-mega__poychip .t i{font-style:normal;font-size:12.5px;color:var(--h2-ink) !important;font-weight:600}
#nw-header .nw-mega__poychip .go{color:#8a6414 !important;font-weight:800;font-size:16px}
/* POY grande: <a> e icone dentro l'header vengono forzati a bianco !important dal
   tema → "Acquista →" e il trofeo del badge sparivano (bianco su bianco).
   Ripristino i colori che style.css intende (verde outline, verde su hover→bianco). */
#nw-header .nw-poy__btn{color:var(--principale,#0C4E2B) !important}
#nw-header .nw-poy__btn:hover{color:#fff !important}
#nw-header .nw-poy__badge .nw-ico,#nw-header .nw-poy__badge svg{color:var(--principale,#0C4E2B) !important;fill:var(--principale,#0C4E2B) !important}

/* ============ LIVE SEARCH + GHOST AUTOCOMPLETE (header globale) ============ */
/* pannello live-search: ancorato SOTTO la barra (la barra è position:relative,
   overflow:visible → non più clippato) */
#nw-header .search .nw-ls{position:absolute;top:calc(100% + 10px);left:0;right:0;width:auto;z-index:1200}
/* ghost text: wrapper attorno all'input, suggerimento in trasparenza dopo il testo */
#nw-header .search .nw-ac{position:relative;flex:1;display:flex;min-width:0}
#nw-header .search .nw-ac input[type=search]{position:relative;z-index:2;flex:1;background:transparent}
#nw-header .search .nw-ac__ghost{position:absolute;inset:0;z-index:1;display:flex;align-items:center;
  font:inherit;color:var(--h2-muted);pointer-events:none;white-space:pre;overflow:hidden;letter-spacing:normal}
#nw-header .search .nw-ac__ghost .pre{visibility:hidden}      /* occupa lo spazio del testo digitato */
#nw-header .search .nw-ac__ghost .suf{opacity:.55}            /* completamento in trasparenza */
#nw-header .search .nw-ac__ghost .tab{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.06em;
  border:1px solid var(--h2-line);border-radius:5px;padding:1px 5px;opacity:.7;visibility:hidden}
#nw-header .search .nw-ac.has-sug .nw-ac__ghost .tab{visibility:visible}

/* ============ PAGINE DI SERVIZIO (.nw-legal) ============
   Contatti, Spedizioni, Modulo di recesso: contenuto testuale senza Elementor.
   Colonna di lettura centrata + link verdi (il tema forza gli <a> a bianco,
   quindi qui serve !important o spariscono su fondo chiaro). */
.nw-legal{max-width:780px;margin:0 auto;padding:56px 24px 72px;
  font-family:'Lato',system-ui,sans-serif;color:#2b3a30;font-size:16.5px;line-height:1.7}
.nw-legal__title{font-family:'Lora',Georgia,serif;font-size:clamp(30px,4vw,42px);font-weight:700;
  color:#0C4E2B !important;line-height:1.15;margin:0 0 28px;text-transform:none}
.nw-legal p{margin:0 0 18px}
.nw-legal strong{color:#0C4E2B;font-weight:700}
/* i paragrafi che fanno da titoletto (<p><strong>1. …</strong></p>) respirano di più */
.nw-legal p > strong:only-child{display:inline-block;font-size:18.5px;margin-top:16px}
.nw-legal a{color:#0C4E2B !important;text-decoration:underline;text-underline-offset:2px}
.nw-legal a:hover{color:#093A20 !important}
.nw-legal em{color:#57664f}
.nw-legal ul,.nw-legal ol{margin:0 0 18px;padding-left:22px}
.nw-legal li{margin:0 0 8px}
@media (max-width:760px){
  .nw-legal{padding:36px 20px 56px;font-size:16px}
}

/* Footer, colonna Assistenza: i due gruppi (recapiti / pagine di servizio)
   condividono lo stesso stile iconato, separati solo da un filo di respiro. */
.nw-foot__help{margin-top:16px !important;padding-top:14px !important;border-top:1px solid rgba(12,78,43,.10)}

/* ============ COOKIE — pulsante "rivedi consenso" ============
   Il plugin lo dichiara `position:fixed` ma quella regola non arriva ad
   applicarsi: il pulsante restava nel flusso a tutta larghezza in cima al body,
   aprendo una fascia bianca che spingeva giù l'intero sito.
   Qui si ripristina SOLO il posizionamento fisso e la forma. La collocazione
   resta quella già decisa altrove — a destra (style.css) e sollevata a 88px sui
   prodotti, sopra la barra "Aggiungi al carrello" (pdp-finito.css): per questo
   non si dichiarano left/right/bottom, che sovrascriverebbero quelle scelte. */
.wcc-btn-revisit-wrapper{
  position:fixed !important; display:flex !important;
  width:auto !important; max-width:max-content;
  align-items:center; justify-content:center;
  padding:6px; border-radius:8px; background:#fff;
  box-shadow:0 3px 10px rgba(121,141,160,.3); cursor:pointer;
  z-index:999999;
}
/* posizione di partenza del plugin, valida solo se nessuna regola la cambia */
.wcc-btn-revisit-wrapper.wcc-revisit-bottom-left{bottom:15px; left:15px}
.wcc-btn-revisit-wrapper.wcc-revisit-bottom-right{bottom:15px; right:15px}
.wcc-btn-revisit-wrapper.wcc-revisit-hide{display:none !important}

/* Icone dell'header in verde pino, come il pallino del carrello: erano quasi
   nere (#20291F) e stonavano con la barra. Il disegno del cuore riempie il suo
   riquadro più degli altri due, che restano otticamente più piccoli pur avendo
   la stessa altezza reale: qui li si pareggia sull'altezza del cuore. */
/* !important necessario: sulla home home2.css ridichiara .hact col suo --ink e
   vince comunque nel confronto reale (verificato in pagina, non a tavolino). */
#nw-header .hdr-acts .hact,
#nw-header .hdr-acts .hact .ic{color:var(--h2-pine) !important;stroke:var(--h2-pine) !important}
#nw-header .hdr-acts .hact .ic{width:22px;height:22px}
#nw-header .hdr-acts .hact:hover,
#nw-header .hdr-acts .hact:hover .ic{color:var(--h2-pine2) !important;stroke:var(--h2-pine2) !important}

/* ============ HEADER MOBILE: misure un filo più generose ============
   Logo, lente/carrello e hamburger erano tarati sul vecchio header e a schermo
   piccolo restavano sacrificati rispetto alla barra. Il blocco sta in fondo al
   file perché la regola .hdr-acts .hact .ic (22px) vive più su ed è più
   specifica di qualsiasi override scritto dentro il media query di sopra:
   qui pareggia la specificità e vince per ordine. */
@media (max-width:1024px){
  #nw-header .logo img{height:36px}
  #nw-header.scrolled .logo img{height:31px}
  #nw-header .hact{width:46px;height:46px}
  #nw-header .burger .ic,
  #nw-header .hdr-acts .hact .ic{width:25px;height:25px}
}
@media (max-width:400px){
  #nw-header .wrap2{padding:0 8px}
  #nw-header .logo img{height:32px}
  #nw-header .hact{width:44px;height:44px}
}