/* =====================================================================
   Naturwaren — Home Elementor design system (Brand Book aligned)
   Palette ufficiale: verde #0C4E2B, panna #E8E7E2, nebbia #ECF1EE,
   salvia #7E9E8D, bianco. Colore SOLO dai brand/prodotti. Font Lora+Lato.
   Le classi nw-el-* vanno sui container/widget Elementor.
   ===================================================================== */
:root{
  --nw-forest:#0C4E2B; --nw-forest-deep:#093A20; --nw-cream:#E8E7E2; --nw-mist:#ECF1EE;
  --nw-sage:#7E9E8D; --nw-label:#456150; --nw-mint:#CFE3D5;
  --nw-ink:#1C2A20; --nw-muted:#55645A; --nw-line:rgba(12,78,43,.14);
  --nw-shadow:0 10px 34px rgba(12,78,43,.09); --nw-shadow-sm:0 4px 16px rgba(12,78,43,.07);
  --nw-serif:'Lora',Georgia,serif; --nw-sans:'Lato',-apple-system,'Segoe UI',sans-serif;
}

/* ---- Sezione: piena larghezza, ritmo verticale unico, sfondi alternati ----
   padding-top/bottom uguale al margine sotto il blocco titolo (nw-el-head): tra due
   sezioni consecutive i due padding si sommano (sezione N bottom + sezione N+1 top),
   quindi prima erano 104+104=208px di "vuoto" sopra ogni titolo contro soli 52px sotto
   (il margine di nw-el-head) — il titolo sembrava scentrato verso il basso. Dimezzando
   il padding la sezione N+1 top torna a combaciare col margine sotto il titolo (52≈52),
   e lo spazio totale tra due sezioni resta comunque quello di un ritmo verticale unico
   invece che doppio. */
.nw-el-home .nw-el-sec.e-con{--padding-top:clamp(34px,5vw,52px);--padding-bottom:clamp(34px,5vw,52px);
  --padding-left:20px;--padding-right:20px;--width:100%;--content-width:100%;}
.nw-el-home .nw-el-sec>.e-con-inner,.nw-el-home .nw-el-sec{max-width:100%;}
.nw-el-home .nw-el-cream.e-con{background-color:var(--nw-cream);}
.nw-el-home .nw-el-mist.e-con{background-color:var(--nw-mist);}
/* wrapper interno con max-width contenuto */
.nw-el-home .nw-el-wrap.e-con{--width:100%;max-width:1200px;margin-inline:auto;}

/* ---- Header di sezione (eyebrow / titolo / deck) ---- */
.nw-el-home .nw-el-head{max-width:660px;margin:0 auto clamp(34px,5vw,52px);text-align:center;}
.nw-el-home .nw-el-eyebrow .elementor-heading-title,
.nw-el-home .nw-el-eyebrow{font-family:var(--nw-sans);font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nw-label);line-height:1.5;}
.nw-el-home .nw-el-h2 .elementor-heading-title,
.nw-el-home .nw-el-h2{font-family:var(--nw-serif);font-weight:600;color:var(--nw-ink);
  font-size:clamp(29px,4vw,44px);line-height:1.1;letter-spacing:-.01em;margin:14px 0 0;}
.nw-el-home .nw-el-h2 .nw-em,.nw-el-home .nw-el-h2 em{font-style:italic;color:var(--nw-forest);}
.nw-el-home .nw-el-deck .elementor-text-editor,.nw-el-home .nw-el-deck{font-family:var(--nw-sans);
  font-size:17px;line-height:1.6;color:var(--nw-muted);max-width:56ch;margin:14px auto 0;}

/* ---- Bottoni (override widget button Elementor col look brand) ---- */
.nw-el-home .nw-el-btn .elementor-button{font-family:var(--nw-sans);font-weight:700;font-size:15px;
  letter-spacing:.01em;padding:14px 28px;border-radius:999px;transition:background .2s,color .2s,box-shadow .2s,border-color .2s;border:1.5px solid transparent;}
.nw-el-home .nw-el-btn--solid .elementor-button{background:var(--nw-forest);color:#fff;}
.nw-el-home .nw-el-btn--solid .elementor-button:hover{background:var(--nw-forest-deep);box-shadow:0 8px 22px rgba(12,78,43,.28);}
.nw-el-home .nw-el-btn--ghost .elementor-button{background:transparent;color:var(--nw-forest);border-color:var(--nw-forest);}
.nw-el-home .nw-el-btn--ghost .elementor-button:hover{background:var(--nw-forest);color:#fff;}
.nw-el-home .nw-el-btn--light .elementor-button{background:#fff;color:var(--nw-forest);}
.nw-el-home .nw-el-btn--light .elementor-button:hover{background:var(--nw-cream);}

/* ===== HERO ===== */
.nw-el-home .nw-el-hero.e-con{min-height:clamp(520px,74vh,740px);--justify-content:center;position:relative;}
/* 1280 (era 1200, poi 1248): il cliente vuole il testo ancora un pelo piu' vicino
   al bordo sinistro della banda hero (-40px per lato dal 1200 originale). */
.nw-el-home .nw-el-hero__in.e-con{--width:100%;max-width:1280px;margin-inline:auto;position:relative;z-index:2;}
/* hero CHIARO (desktop): testo scuro sull'area beige della foto, prodotti a destra. Il
   blocco @media(max-width:767px) sovrascrive il layout per il mobile. */
.nw-el-home .nw-el-hero__content.e-con{--width:100%;max-width:560px;color:var(--nw-ink);}
.nw-el-home .nw-el-hero .nw-el-eyebrow .elementor-heading-title{color:var(--nw-label);
  display:inline-flex;align-items:center;gap:12px;}
.nw-el-home .nw-el-hero .nw-el-eyebrow .elementor-heading-title::before{content:"";width:26px;height:1px;background:rgba(12,78,43,.35);}
.nw-el-home .nw-el-hero__title .elementor-heading-title{font-family:var(--nw-serif);font-weight:600;
  color:var(--nw-forest);font-size:clamp(38px,5.6vw,62px);line-height:1.06;letter-spacing:-.015em;margin:6px 0 0;}
.nw-el-home .nw-el-hero__title .nw-em{font-style:italic;color:var(--nw-label);display:block;}
.nw-el-home .nw-el-hero__sub{color:var(--nw-muted);font-size:clamp(16px,1.6vw,18px);
  line-height:1.6;max-width:26em;margin-top:20px;}
/* desktop: sottotitolo forzato più stretto così NON arriva sopra i prodotti (la foto non ha
   crop orizzontale → non si può spostare i prodotti). !important scoped a min-width:768px →
   il mobile (che ha il suo max-width:32ch centrato) non è toccato. */
@media(min-width:768px){
  .nw-el-home .nw-el-hero__sub{max-width:470px !important;}
}
/* gap letterale (non --gap): Elementor genera CSS per-elemento specifico che vince sulla
   custom property per i container flex nativi — pattern già provato altrove nel file. */
.nw-el-home .nw-el-hero__cta.e-con{--flex-direction:row;--flex-wrap:wrap;gap:22px !important;margin-top:32px;}
/* trust pill nascoste anche su desktop: ridondanti con la barra ticker subito sotto l'hero,
   e le pill scure stonavano sull'hero ora chiaro. Hero pulito/editoriale su entrambi i viewport. */
.nw-el-home .nw-el-hero__trust{display:none;}
/* (regole trust sotto restano ma inerti; mantenute per storia/eventuale riattivazione) */
/* sempre in colonna (non solo su mobile): "Ricerca tedesca" deve stare sotto "Qualità
   farmaceutica GMP" a qualsiasi larghezza, non solo quando il flex-wrap le impila da solo */
.nw-el-home .nw-el-hero__trust .elementor-icon-list-items{display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;margin-top:30px;}
/* pill scure traslucide, più opache per contrasto garantito su qualsiasi zona della foto */
.nw-el-home .nw-el-hero__trust .elementor-icon-list-item{font-size:13.5px;color:#fff;
  background:rgba(4,24,14,.72);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:6px 14px;text-shadow:0 1px 3px rgba(0,0,0,.4);}
/* il testo vive in uno span .elementor-icon-list-text annidato con colore sage ereditato
   dal tema (#7E9E8D) — non bianco come sembrava guardando solo il contenitore esterno */
.nw-el-home .nw-el-hero__trust .elementor-icon-list-text{color:#fff !important;}
.nw-el-home .nw-el-hero__trust .elementor-icon-list-icon svg{fill:var(--nw-mint);width:16px;height:16px;}

/* ===== TILE CATEGORIE (Parti dal bisogno) ===== */
.nw-el-home .nw-el-tiles.e-con{display:grid !important;grid-template-columns:repeat(4,1fr);gap:18px;--width:100%;max-width:1200px;margin-inline:auto;}
.nw-el-home .nw-el-tile.e-con{background:#fff;border:1px solid var(--nw-line);border-radius:18px;
  --padding-top:24px;--padding-bottom:22px;--padding-left:22px;--padding-right:22px;
  box-shadow:var(--nw-shadow-sm);transition:box-shadow .2s,border-color .2s,transform .2s;
  --justify-content:flex-start;--align-items:center;text-align:center;--gap:12px;overflow:hidden;}
.nw-el-home .nw-el-tile.e-con:hover{box-shadow:var(--nw-shadow);border-color:var(--nw-sage);transform:translateY(-3px);}
.nw-el-home .nw-el-tile__ic .elementor-widget-container{width:68px;height:68px;border-radius:16px;
  background:var(--nw-mint);display:flex;align-items:center;justify-content:center;}
.nw-el-home .nw-el-tile__ic img{width:46px;height:46px;object-fit:contain;}
.nw-el-home .nw-el-tile__name .elementor-heading-title{font-family:var(--nw-serif);font-size:19px;
  font-weight:600;color:var(--nw-ink);line-height:1.2;}
.nw-el-home .nw-el-tile__n{font-family:var(--nw-sans);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--nw-label);}

/* ===== PRODUCT CARD (Bestseller) — riusa il markup/le classi della vecchia home
   (.nw-pcard, già stilizzate in style.css e agganciate a nw-wishlist.js/nw-cart-drawer.js)
   dentro un widget html per card; qui solo gli adattamenti per il grid e la palette
   brand (il bordo/badge oro di .nw-best--home non si applica: non uso quella classe). */
.nw-el-home .nw-el-rail.e-con{display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;--width:100%;max-width:1200px;margin-inline:auto;}
.nw-el-home .nw-el-rail .elementor-widget-html,
.nw-el-home .nw-el-rail .elementor-widget-html .elementor-widget-container{height:100%;}
.nw-el-home .nw-el-rail .nw-pcard{height:100%;border-color:var(--nw-line);border-radius:18px;box-shadow:var(--nw-shadow-sm);
  transition:box-shadow .2s,transform .2s;}
.nw-el-home .nw-el-rail .nw-pcard:hover{box-shadow:var(--nw-shadow);transform:translateY(-3px);}
.nw-el-home .nw-el-rail .nw-pcard__media{height:260px;border-radius:17px 17px 0 0;border-bottom:1px solid var(--nw-line);
  background:radial-gradient(120% 120% at 50% 25%,#f5f8f2,#e6efe8);}
.nw-el-home .nw-el-rail .nw-pcard__media img{mix-blend-mode:multiply;}
.nw-el-home .nw-el-rail .nw-pcard__name{font-family:var(--nw-serif);color:var(--nw-ink);}
.nw-el-home .nw-el-rail .nw-pcard__name:hover{color:var(--nw-forest);}
.nw-el-home .nw-el-rail .nw-pcard__price{font-family:var(--nw-serif);color:var(--nw-forest);}
.nw-el-home .nw-el-rail .nw-pcard__brand{color:var(--nw-label);}
.nw-el-home .nw-el-rail .nw-pcard__dot{background:var(--nw-label);}
.nw-el-home .nw-el-rail .nw-pcard__btn{border-color:var(--nw-forest);color:var(--nw-forest);}
.nw-el-home .nw-el-rail .nw-pcard__btn:hover{background:var(--nw-forest);color:#fff;}

/* ===== VALORI ===== */
.nw-el-home .nw-el-values.e-con{display:grid !important;grid-template-columns:repeat(4,1fr);gap:22px;--width:100%;max-width:1080px;margin-inline:auto;}
.nw-el-home .nw-el-value.e-con{--gap:12px;--align-items:center;text-align:center;}
.nw-el-home .nw-el-value__ic .elementor-widget-container{width:60px;height:60px;margin:0 auto;border-radius:50%;
  background:#fff;border:1px solid var(--nw-line);box-shadow:var(--nw-shadow-sm);display:flex;align-items:center;justify-content:center;}
.nw-el-home .nw-el-value__ic svg{width:28px;height:28px;stroke:var(--nw-forest);}
.nw-el-home .nw-el-value__t .elementor-heading-title{font-family:var(--nw-serif);font-size:19px;color:var(--nw-ink);}
.nw-el-home .nw-el-value__d{font-size:14.5px;color:var(--nw-muted);max-width:24ch;margin:0 auto;}

/* ===== VALORI 2 — stessa "card chiara" del carosello promo, statica (una sola, niente scorrimento) ===== */
.nw-el-home .nw-el-valori2.e-con{position:relative;min-height:clamp(440px,40vw,580px);--nw-ic:clamp(44px,2.5vw,52px);
  background-color:#efeae1;--justify-content:center;overflow:hidden;
  /* banner FULL-PAGE: esce dal wrap e riempie il viewport (il contenuto __in resta centrato a 1200). */
  width:100vw;max-width:none;margin-inline:calc(50% - 50vw);border-radius:0;box-shadow:none;}
/* niente bande di colore sopra/sotto il banner: azzero il padding verticale della SUA sezione
   (solo quella che contiene il banner) -> il banner riempie la sezione da bordo a bordo. */
.nw-el-home .nw-el-sec:has(.nw-el-valori2){padding-top:0 !important;padding-bottom:0 !important;}
/* scrim quasi opaco su tutta la larghezza del blocco testo (0-58%), stacco netto verso la foto
   (58-76%) — prima scendeva già sotto il 50% di opacità al 50% di larghezza, proprio dove
   sta la 2a colonna di pilastri: testo poco leggibile. Stesso tipo di stacco della slide
   "Farmacia" del carosello promo. */
.nw-el-home .nw-el-valori2.e-con > .elementor-background-overlay{
  background-image:linear-gradient(90deg,rgba(250,248,242,.97) 0%,rgba(250,248,242,.96) 50%,rgba(250,248,242,.9) 58%,rgba(250,248,242,.25) 68%,rgba(250,248,242,0) 76%) !important;
  opacity:1 !important;}
.nw-el-home .nw-el-valori2.e-con::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,248,242,.97) 0%,rgba(250,248,242,.96) 50%,rgba(250,248,242,.9) 58%,rgba(250,248,242,.25) 68%,rgba(250,248,242,0) 76%);}
.nw-el-home .nw-el-valori2__in.e-con{position:relative;z-index:3;--width:100%;max-width:clamp(1200px,94vw,1360px);margin-inline:auto;
  padding:clamp(34px,4.5vw,64px) clamp(28px,6vw,68px);}
/* z-index esplicito: head/grid ora vivono sullo STESSO elemento della card (dopo lo spostamento
   del background dal genitore), quindi devono salire sopra lo scrim ::before (z-index:2) che
   altrimenti li ricopre — prima erano dentro un wrapper __in separato già elevato. */
.nw-el-home .nw-el-valori2__head{max-width:clamp(560px,45vw,700px);position:relative;z-index:3;}
.nw-el-home .nw-el-valori2__head .nw-el-eyebrow .elementor-heading-title{color:var(--nw-label);}
.nw-el-home .nw-el-valori2__head .nw-el-h2 .elementor-heading-title{color:var(--nw-forest);margin-top:12px;font-size:clamp(30px,3.2vw,50px);}
.nw-el-home .nw-el-valori2__grid.e-con{display:grid !important;grid-template-columns:1fr 1fr;gap:clamp(22px,2.4vw,32px) clamp(28px,3vw,48px);
  max-width:clamp(560px,46vw,720px);margin-top:clamp(24px,3.5vw,40px);position:relative;z-index:3;}
/* pilastro: icona a sinistra (righe 1-2), titolo+testo impilati a destra — griglia, non riga flat
   (i 3 widget icona/titolo/testo sono fratelli diretti nel JSON, non c'è un wrapper testo dedicato) */
.nw-el-home .nw-el-valori2__pillar.e-con{display:grid !important;grid-template-columns:var(--nw-ic) 1fr;
  column-gap:clamp(13px,1vw,16px);row-gap:3px;align-items:start;text-align:left;}
.nw-el-home .nw-el-valori2__ic{grid-column:1;grid-row:1/3;}
.nw-el-home .nw-el-valori2__t{grid-column:2;grid-row:1;}
.nw-el-home .nw-el-valori2__d{grid-column:2;grid-row:2;}
.nw-el-home .nw-el-valori2__ic .elementor-widget-container{width:var(--nw-ic);height:var(--nw-ic);border-radius:999px;
  background:#fff;border:1px solid var(--nw-line);box-shadow:var(--nw-shadow-sm);
  display:flex;align-items:center;justify-content:center;}
.nw-el-home .nw-el-valori2__ic svg{width:clamp(20px,1.1vw,24px);height:clamp(20px,1.1vw,24px);}
.nw-el-home .nw-el-valori2__t .elementor-heading-title{font-family:var(--nw-serif);font-size:clamp(16.5px,1.05vw,20px);
  font-weight:600;color:var(--nw-ink);line-height:1.25;}
.nw-el-home .nw-el-valori2__d{font-size:clamp(13.5px,.82vw,15.5px);line-height:1.55;color:var(--nw-muted);margin-top:3px;}
@media(max-width:767px){
  .nw-el-home .nw-el-valori2.e-con{min-height:0;border-radius:0;}
  .nw-el-home .nw-el-valori2.e-con{background-size:auto 220px !important;background-position:82% top !important;
    background-repeat:no-repeat !important;}
  .nw-el-home .nw-el-valori2.e-con::before,.nw-el-home .nw-el-valori2.e-con > .elementor-background-overlay{
    background-image:linear-gradient(180deg,rgba(250,248,242,.2) 0%,rgba(250,248,242,.85) 46%,rgba(250,248,242,.98) 60%) !important;}
  .nw-el-home .nw-el-valori2__in.e-con{padding-top:190px;}
  .nw-el-home .nw-el-valori2__grid.e-con{grid-template-columns:1fr;max-width:100%;}
}

/* ===== BRAND ===== */
/* Griglia COMPATTA logo+claim (scelta cliente 2026-07-23): la lista ampia
   .nw-brandx vive SOLO su /i-nostri-brand/. */
.nw-el-home .nw-el-brands.e-con{display:grid !important;grid-template-columns:repeat(5,1fr);gap:16px;--width:100%;max-width:1200px;margin-inline:auto;}
.nw-el-home .nw-el-brand.e-con{background:#fff;border:1px solid var(--nw-line);border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;
  padding:26px 16px 22px;text-align:center;box-shadow:var(--nw-shadow-sm);transition:box-shadow .2s,border-color .2s;}
.nw-el-home .nw-el-brand.e-con:hover{box-shadow:var(--nw-shadow);border-color:var(--nw-sage);}
/* box logo a misura FISSA: tutti i loghi otticamente allineati sulla stessa riga,
   qualunque sia la proporzione del file (richiesta cliente: "non sono allineati,
   immagini di dimensioni diverse") */
.nw-el-home .nw-el-brand__logo{width:100%;}
.nw-el-home .nw-el-brand__logo .elementor-widget-container{height:56px;display:flex;align-items:center;justify-content:center;}
.nw-el-home .nw-el-brand__logo img{max-height:40px;max-width:150px;width:auto;object-fit:contain;}
.nw-el-home .nw-el-brand__pay{font-family:var(--nw-serif);font-style:italic;font-size:13.5px;color:var(--nw-muted);line-height:1.35;min-height:2.8em;display:flex;align-items:flex-start;justify-content:center;}

/* ===== RECENSIONI ===== */
.nw-el-home .nw-el-revs.e-con{display:grid !important;grid-template-columns:repeat(3,1fr);gap:20px;--width:100%;max-width:1200px;margin-inline:auto;}
.nw-el-home .nw-el-rev.e-con{background:#fff;border:1px solid var(--nw-line);border-radius:18px;
  /* padding REALE (non le var --padding-*: Elementor .e-con non mappa top/bottom -> restavano 0 e
     l'autore risultava incollato al fondo). */
  padding:26px 24px !important;gap:14px;box-shadow:var(--nw-shadow-sm);
  min-height:210px;}
.nw-el-home .nw-el-rev__q{flex:1 1 auto;font-family:var(--nw-serif);font-size:18px;line-height:1.5;color:var(--nw-ink);}
/* foot autore: NIENTE barra/separatore sopra (l'utente la voleva via) + margine sopra per respiro. */
.nw-el-home .nw-el-rev__foot{display:flex;align-items:baseline;margin-top:18px;}
/* avatar RIMOSSO (l'utente lo trovava brutto): autore solo-testo, editoriale. Nascosto via CSS
   -> markup resta, riattivabile se un giorno si rivuole il cerchio. */
.nw-el-home .nw-el-rev__av{display:none;}
/* autore: nome serif marcato + nota muted con spunta verde, su una riga, dopo il separatore. */
.nw-el-home .nw-el-rev__who{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;min-width:0;line-height:1.3;}
.nw-el-home .nw-el-rev__who strong{font-family:var(--nw-serif);font-size:15px;font-weight:700;color:var(--nw-ink);}
.nw-el-home .nw-el-rev__who span{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--nw-muted);}
.nw-el-home .nw-el-rev__who span svg{color:var(--nw-forest,#0C4E2B);}
.nw-el-home .nw-el-stars .elementor-heading-title{color:var(--nw-forest);letter-spacing:2px;font-size:15px;}

/* ===== PROMO CAROUSEL (4 slide, autoplay JS nel mu-plugin) ===== */
.nw-el-home .nw-el-promo{position:relative;max-width:1200px;margin-inline:auto;border-radius:22px;
  overflow:hidden;box-shadow:var(--nw-shadow);}
.nw-el-home .nw-el-promo__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;}
.nw-el-home .nw-el-promo__track::-webkit-scrollbar{display:none;}
.nw-el-home .nw-el-promo__slide{flex:0 0 100%;scroll-snap-align:center;position:relative;
  min-height:clamp(360px,40vw,480px);background-size:cover;background-position:center right;
  background-color:#efeae1;display:flex;align-items:flex-start;}
.nw-el-home .nw-el-promo__slide::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(250,248,242,.95) 0%,rgba(250,248,242,.8) 30%,rgba(250,248,242,.32) 50%,rgba(250,248,242,0) 66%);}
.nw-el-home .nw-el-promo__text{position:relative;z-index:2;max-width:520px;color:#213027;
  padding:clamp(30px,4vw,56px) clamp(28px,6vw,72px);}
.nw-el-home .nw-el-promo__badge{display:inline-block;background:#fff;color:var(--nw-forest);
  border:1px solid rgba(12,78,43,.2);border-radius:999px;font-family:var(--nw-sans);
  font-size:12px;font-weight:700;padding:6px 14px;margin-bottom:16px;}
.nw-el-home .nw-el-promo__title{font-family:var(--nw-serif);font-weight:700;
  font-size:clamp(26px,2.6vw,36px);line-height:1.15;color:var(--nw-forest);margin:0 0 12px;}
.nw-el-home .nw-el-promo__title em{color:var(--nw-sage);font-style:italic;}
.nw-el-home .nw-el-promo__sub{font-family:var(--nw-sans);font-size:15px;line-height:1.6;
  color:#33463c;margin:0 0 22px;max-width:42ch;}
.nw-el-home .nw-el-promo__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.nw-el-home .nw-el-promo__cta{display:inline-flex;align-items:center;font-family:var(--nw-sans);
  font-weight:700;font-size:15px;color:#fff;background:var(--nw-forest);border-radius:999px;
  padding:12px 24px;text-decoration:none;transition:background .2s;}
.nw-el-home .nw-el-promo__cta:hover{background:var(--nw-forest-deep);}
.nw-el-home .nw-el-promo__price{font-family:var(--nw-sans);font-size:14px;color:#33463c;}
.nw-el-home .nw-el-promo__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:999px;background:#fff;border:1px solid var(--nw-line);
  color:var(--nw-forest);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--nw-shadow-sm);transition:background .2s;}
.nw-el-home .nw-el-promo__nav:hover{background:var(--nw-mist);}
.nw-el-home .nw-el-promo__nav svg{width:20px;height:20px;}
.nw-el-home .nw-el-promo__nav--prev{left:16px;}
.nw-el-home .nw-el-promo__nav--next{right:16px;}
.nw-el-home .nw-el-promo__dots{position:absolute;bottom:16px;left:0;right:0;z-index:3;
  display:flex;justify-content:center;gap:8px;}
.nw-el-home .nw-el-promo__dot{width:8px;height:8px;border-radius:999px;border:0;
  background:rgba(12,78,43,.25);cursor:pointer;padding:0;transition:background .2s,width .2s;}
.nw-el-home .nw-el-promo__dot.is-active{background:var(--nw-forest);width:22px;}
@media(max-width:700px){
  /* niente aspect-ratio qui: dentro la catena flex-column di Elementor (container>widget)
     l'altezza calcolata da aspect-ratio può collassare a 0 (visto in pagina) — min-height
     esplicito, stesso approccio robusto del desktop. */
  .nw-el-home .nw-el-promo__slide{min-height:420px;display:block;position:relative;
    background-position:center 30%;}
  .nw-el-home .nw-el-promo__slide::before{background:linear-gradient(180deg,rgba(250,248,242,0) 0%,rgba(250,248,242,.55) 50%,rgba(250,248,242,.98) 72%);}
  .nw-el-home .nw-el-promo__text{max-width:100%;padding:20px 20px clamp(24px,6vw,36px);
    position:absolute;bottom:0;left:0;right:0;}
  .nw-el-home .nw-el-promo__nav{display:none;}
  .nw-el-home .nw-el-promo__dots{bottom:10px;}
}

/* ===== SPLIT PROMO / B2B ===== */
.nw-el-home .nw-el-split.e-con{--width:100%;overflow:hidden;
  /* full-width come il banner Valori: esce dal wrap, niente rounding/ombra. */
  width:100vw;max-width:none;margin-inline:calc(50% - 50vw);border-radius:0;
  background:var(--nw-forest);--flex-direction:row;--gap:0;}
.nw-el-home .nw-el-sec:has(.nw-el-split){padding-top:0 !important;padding-bottom:0 !important;}
.nw-el-home .nw-el-split__text.e-con{--padding-top:clamp(34px,5vw,56px);--padding-bottom:clamp(34px,5vw,56px);
  --padding-left:clamp(30px,5vw,56px);--padding-right:clamp(30px,5vw,56px);--gap:14px;--justify-content:center;--flex-basis:55%;}
.nw-el-home .nw-el-split__text .nw-el-eyebrow .elementor-heading-title{color:var(--nw-mint);}
.nw-el-home .nw-el-split__text .nw-el-h2 .elementor-heading-title{color:#fff;}
.nw-el-home .nw-el-split__text .nw-el-h2 .nw-em{color:var(--nw-mint);}
.nw-el-home .nw-el-split__text .nw-el-deck{color:#cfe0d4;}
/* --- rifinitura testo/spaziatura pannello verde --- */
/* eyebrow con trattino mint (coerente con l'hero) */
.nw-el-home .nw-el-split__text .nw-el-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:12px;}
.nw-el-home .nw-el-split__text .nw-el-eyebrow .elementor-heading-title::before{content:"";width:26px;height:1px;background:var(--nw-mint);opacity:.65;}
/* deck: allineato a sinistra (non centrato) e colonna piu' stretta = piu' leggibile */
.nw-el-home .nw-el-split__text .nw-el-deck,
.nw-el-home .nw-el-split__text .nw-el-deck .elementor-text-editor{max-width:42ch;margin-inline:0;}
/* bottone: piccolo stacco dal testo + micro-lift all'hover */
.nw-el-home .nw-el-split__text .nw-el-btn{margin-top:6px;}
.nw-el-home .nw-el-split__text .nw-el-btn--light .elementor-button{transition:background .2s,color .2s,transform .18s,box-shadow .18s;}
.nw-el-home .nw-el-split__text .nw-el-btn--light .elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(0,0,0,.35);}
.nw-el-home .nw-el-split__media.e-con{--flex-basis:45%;background-color:#0e5d34;background-size:cover;background-position:center;min-height:260px;position:relative;}
/* cucitura morbida verde->foto: overlay sfumato SOPRA la foto sul bordo che tocca il pannello
   verde (non ridimensiona la foto -> nessun crop). Desktop = seam verticale a sinistra. */
.nw-el-home .nw-el-split__media.e-con::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, var(--nw-forest) 0%, rgba(12,78,43,.5) 9%, rgba(12,78,43,0) 26%);}

/* ===== FAQ (widget nativi Elementor: heading categoria + accordion, niente JS custom) ===== */
.nw-el-home .nw-el-faq__wrap.e-con{max-width:820px;}
.nw-el-home .nw-el-faq__contact{margin-top:14px;}
.nw-el-home .nw-el-faq__contact .elementor-heading-title,
.nw-el-home .nw-el-faq__contact .elementor-heading-title a{font-family:var(--nw-sans);font-size:14.5px;
  line-height:1.4;font-weight:700;color:var(--nw-forest);text-decoration:none;}
.nw-el-home .nw-el-faq__contact .elementor-heading-title a:hover{text-decoration:underline;}
/* un solo gruppo (dopo il trim a 6 domande): niente margine proprio, basta quello
   sotto il blocco titolo (nw-el-head) — ":first-of-type" qui non funziona perché
   conta per tag (div), non per classe, e il blocco titolo è anch'esso un div: il
   gruppo non è mai il "primo div" dei suoi fratelli, quindi quella regola non ha mai
   fatto nulla e ricadeva sulla regola base sotto (40px), sommata ai 52px del titolo. */
.nw-el-home .nw-el-faq__group{margin-top:0;}
.nw-el-home .nw-el-faq__cat .elementor-heading-title{font-family:var(--nw-sans);font-size:12.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nw-label);
  margin-bottom:10px;}
/* accordion nativo Elementor: stile pannello bianco coerente col resto (card pattern) */
.nw-el-home .nw-el-faq__acc .elementor-accordion{border:0;}
.nw-el-home .nw-el-faq__acc .elementor-accordion-item{background:#fff;border:1px solid var(--nw-line);
  border-radius:14px;margin-bottom:10px;overflow:hidden;box-shadow:var(--nw-shadow-sm);}
.nw-el-home .nw-el-faq__acc .elementor-tab-title{font-family:var(--nw-serif);font-size:16px;
  font-weight:600;color:var(--nw-ink);padding:16px 20px;border:0;}
.nw-el-home .nw-el-faq__acc .elementor-tab-title .elementor-accordion-icon{color:var(--nw-sage);}
.nw-el-home .nw-el-faq__acc .elementor-tab-title.elementor-active{color:var(--nw-forest);}
/* il testo vero sta in un <a class="elementor-accordion-title"> annidato che eredita
   una regola globale del tema (60px!) pensata per altri title — sovrascritto qui */
.nw-el-home .nw-el-faq__acc .elementor-tab-title .elementor-accordion-title{
  font-family:var(--nw-serif) !important;font-size:16px !important;font-weight:600 !important;
  line-height:1.4 !important;color:inherit !important;text-decoration:none !important;}
.nw-el-home .nw-el-faq__acc .elementor-tab-content{font-family:var(--nw-sans);font-size:14.5px;
  line-height:1.65;color:var(--nw-muted);padding:0 20px 18px;border:0;}
.nw-el-home .nw-el-faq__acc .elementor-tab-content p{margin:0;}
@media(max-width:767px){
  .nw-el-home .nw-el-faq__acc .elementor-tab-title{padding:14px 16px;}
  .nw-el-home .nw-el-faq__acc .elementor-tab-title .elementor-accordion-title{font-size:15px !important;}
  .nw-el-home .nw-el-faq__acc .elementor-tab-content{font-size:14px;padding:0 16px 16px;}
}

/* ===== BLOG ===== */
.nw-el-home .nw-el-journal.e-con{display:grid !important;grid-template-columns:repeat(3,1fr);gap:22px;--width:100%;max-width:1200px;margin-inline:auto;}
.nw-el-home .nw-el-post.e-con{background:#fff;border:1px solid var(--nw-line);border-radius:18px;overflow:hidden;
  box-shadow:var(--nw-shadow-sm);transition:box-shadow .2s,transform .2s;--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;--gap:0;}
.nw-el-home .nw-el-post.e-con:hover{box-shadow:var(--nw-shadow);transform:translateY(-3px);}
.nw-el-home .nw-el-post__img .elementor-widget-container{aspect-ratio:16/10;overflow:hidden;}
.nw-el-home .nw-el-post__img img{width:100%;height:100%;object-fit:cover;}
.nw-el-home .nw-el-post__body.e-con{--padding-top:20px;--padding-bottom:22px;--padding-left:22px;--padding-right:22px;--gap:10px;}
.nw-el-home .nw-el-post__meta{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nw-label);}
.nw-el-home .nw-el-post__t .elementor-heading-title{font-family:var(--nw-serif);font-size:19px;line-height:1.28;color:var(--nw-ink);}

/* ===== NEWSLETTER ===== */
.nw-el-home .nw-el-news.e-con{--width:100%;max-width:620px;margin-inline:auto;text-align:center;--align-items:center;--gap:0;}
.nw-el-home .nw-el-news .nw-el-h2 .elementor-heading-title strong{color:var(--nw-forest);font-style:normal;}
/* form compatto: pillola bianca, email+bottone in riga (come il vecchio design, senza oro) */
.nw-el-home .nw-el-news__form-wrap{width:100%;max-width:480px;margin:14px auto 0;}
.nw-el-home .nw-el-news__form{display:flex;gap:8px;background:#fff;border:1px solid var(--nw-line);
  border-radius:999px;padding:6px;box-shadow:var(--nw-shadow-sm);}
.nw-el-home .nw-el-news__form input{flex:1;min-width:0;border:0;outline:none;background:transparent;
  padding:12px 18px;font-family:var(--nw-sans);font-size:15px;color:var(--nw-ink);}
.nw-el-home .nw-el-news__form input::placeholder{color:var(--nw-muted);}
.nw-el-home .nw-el-news__form input:focus{outline:2px solid var(--nw-forest);outline-offset:1px;border-radius:999px;}
.nw-el-home .nw-el-news__form button{border:0;background:var(--nw-forest);color:#fff;font-weight:700;
  font-family:var(--nw-sans);font-size:15px;padding:12px 26px;border-radius:999px;cursor:pointer;
  transition:background .2s,box-shadow .2s;}
.nw-el-home .nw-el-news__form button:hover{background:var(--nw-forest-deep);box-shadow:0 8px 22px rgba(12,78,43,.28);}
.nw-el-home .nw-el-news__ok{font-family:var(--nw-sans);font-weight:700;color:var(--nw-forest);margin:14px 0 0;}
.nw-el-home .nw-el-news__note{font-size:12px;color:var(--nw-muted);margin:14px 0 0;}
.nw-el-home .nw-el-news__note a{color:var(--nw-forest);text-decoration:underline;}
.nw-el-home .nw-el-news__form-wrap.nw-el-news--error .nw-el-news__form{outline:2px solid #b3413a;outline-offset:2px;border-radius:999px;}

/* ---- Responsive ---- */
@media(max-width:960px){
  .nw-el-home .nw-el-tiles.e-con,.nw-el-home .nw-el-rail.e-con{grid-template-columns:repeat(2,1fr);}
  .nw-el-home .nw-el-brands.e-con{grid-template-columns:repeat(2,1fr);}
  /* 5 brand in griglia a 2 colonne: l'ultimo dispari centrato, non orfano a sinistra */
  .nw-el-home .nw-el-brands.e-con > .nw-el-brand:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 8px);margin-inline:auto;}
  .nw-el-home .nw-el-values.e-con{grid-template-columns:repeat(2,1fr);}
  .nw-el-home .nw-el-revs.e-con,.nw-el-home .nw-el-journal.e-con{grid-template-columns:1fr;}
  .nw-el-home .nw-el-split.e-con{--flex-direction:column;}
  /* colonna: la cucitura passa da verticale a orizzontale (verde dall'alto della foto) */
  .nw-el-home .nw-el-split__media.e-con::before{background:linear-gradient(180deg, var(--nw-forest) 0%, rgba(12,78,43,.45) 10%, rgba(12,78,43,0) 28%);}
}
@media(max-width:520px){
  .nw-el-home .nw-el-tiles.e-con,.nw-el-home .nw-el-rail.e-con,.nw-el-home .nw-el-values.e-con{grid-template-columns:1fr;}
}

/* =====================================================================
   RIFINITURE 2026-07: contrasto, responsive, a11y
   ===================================================================== */

/* ---- HERO CHIARO: nessuno scrim scuro. Velo beige LEGGERO a sinistra per pulire la zona
   testo (contrasto del forest sul beige anche dove ci sono ombre morbide), che si apre a
   destra sui prodotti. ---- */
.nw-el-home .nw-el-hero.e-con{position:relative;}
.nw-el-home .nw-el-hero.e-con > .elementor-background-overlay{background-image:none !important;opacity:1 !important;}
.nw-el-home .nw-el-hero.e-con::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(244,239,231,.96) 0%,rgba(244,239,231,.9) 32%,rgba(244,239,231,.55) 54%,rgba(244,239,231,.14) 68%,rgba(244,239,231,0) 82%);}
.nw-el-home .nw-el-hero__in.e-con{position:relative;z-index:3;}
/* fallback chiaro: se la foto non è ancora caricata l'hero è beige, mai bianco/verde scuro */
.nw-el-home .nw-el-hero.e-con{background-color:#efe8db;}
/* CTA hero: primaria verde piena (la bianca non stacca sul beige), secondaria outline verde */
.nw-el-home .nw-el-hero .nw-el-btn--light .elementor-button{background:var(--nw-forest);color:#fff;}
.nw-el-home .nw-el-hero .nw-el-btn--light .elementor-button:hover{background:var(--nw-forest-deep);}
.nw-el-home .nw-el-hero .nw-el-btn--ghost .elementor-button{color:var(--nw-forest);border-color:var(--nw-forest);background:transparent;}
.nw-el-home .nw-el-hero .nw-el-btn--ghost .elementor-button:hover{background:var(--nw-forest);color:#fff;border-color:var(--nw-forest);}

/* ---- Immagini: mai overflow, spazio riservato (niente layout jump) ----
   SCOPE: solo dentro le sezioni home (.nw-el-sec). Non toccare header/footer:
   una versione precedente non scopata rompeva il logo header (height:38px → auto). */
.nw-el-home .nw-el-sec img{max-width:100%;height:auto;}
.nw-el-home .nw-el-sec.e-con{overflow:hidden;}

/* ---- Touch target minimi 44px + cursor su elementi cliccabili ---- */
.nw-el-home .nw-el-btn .elementor-button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;}
.nw-el-home .nw-el-tile.e-con,.nw-el-home .nw-el-brand.e-con,.nw-el-home .nw-el-post.e-con{cursor:pointer;}
.nw-el-home .nw-el-hero__trust .elementor-icon-list-item{min-height:auto;}

/* ---- MOBILE ---- */
@media(max-width:767px){
  /* HERO MOBILE — stile "farmacy beauty": foto CHIARA a tutto schermo, testo SCURO CENTRATO
     in alto sull'area beige, prodotti centrati in basso. Niente scrim scuro (la foto è già
     chiara → testo forest ben leggibile sul beige). hero-banner.webp 1840x789: beige vuoto
     in alto, prodotti in basso → testo top su beige, prodotti bottom. */
  .nw-el-home .nw-el-hero.e-con{min-height:clamp(560px,86vh,660px);
    --padding-top:40px;--padding-bottom:0;--justify-content:flex-start;}
  /* foto come "oggetto" in banda sul fondo (NON cover: cover ingrandiva troppo i prodotti):
     dimensione controllata, centrata in basso; sopra lo sfondo beige piatto (fallback che
     combacia col beige della foto) fa da zona testo pulita, senza stacco di colore. */
  .nw-el-home .nw-el-hero.e-con{background-size:auto 300px !important;
    background-position:center bottom !important;background-repeat:no-repeat !important;
    background-color:#efe8db !important;}
  /* velo chiaro sottile in alto per uniformare la zona testo; trasparente in basso sui prodotti */
  .nw-el-home .nw-el-hero.e-con::before{background:linear-gradient(180deg,
    rgba(239,232,219,.9) 0%, rgba(239,232,219,.5) 30%, rgba(239,232,219,0) 55%);}
  .nw-el-home .nw-el-hero.e-con > .elementor-background-overlay{background-image:none !important;}
  /* contenuto centrato, testo scuro */
  .nw-el-home .nw-el-hero__content.e-con{max-width:100%;text-align:center;--align-items:center;color:var(--nw-ink);}
  .nw-el-home .nw-el-hero .nw-el-eyebrow .elementor-heading-title{display:block;color:var(--nw-label);}
  .nw-el-home .nw-el-hero .nw-el-eyebrow .elementor-heading-title::before{display:none;}
  .nw-el-home .nw-el-hero__title .elementor-heading-title{font-size:clamp(34px,9vw,46px);
    color:var(--nw-forest);text-shadow:none;}
  .nw-el-home .nw-el-hero__title .nw-em{color:var(--nw-label);}  /* riga italica: verde label (contrasto migliore del salvia) */
  .nw-el-home .nw-el-hero__sub{font-size:15.5px;color:var(--nw-muted);text-shadow:none;
    max-width:32ch;margin-inline:auto;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  /* CTA "pill raffinate": impilate, centrate, larghe QUANTO IL TESTO (auto-width, non full),
     un filo più piccole → leggere nell'hero arioso. */
  .nw-el-home .nw-el-hero__cta.e-con{--flex-direction:column;--align-items:center;
    gap:12px !important;margin-top:22px;}
  .nw-el-home .nw-el-hero__cta .nw-el-btn{width:auto;}
  .nw-el-home .nw-el-hero__cta .elementor-button{width:auto;padding:11px 26px;font-size:14px;min-height:44px;}
  /* primaria: piena verde (bianca su desktop non stacca sul beige); secondaria: outline verde */
  .nw-el-home .nw-el-hero .nw-el-btn--light .elementor-button{background:var(--nw-forest);color:#fff;}
  .nw-el-home .nw-el-hero .nw-el-btn--light .elementor-button:hover{background:var(--nw-forest-deep);}
  .nw-el-home .nw-el-hero .nw-el-btn--ghost .elementor-button{background:transparent;color:var(--nw-forest);border-color:var(--nw-forest);}
  /* trust pill: nascoste su mobile — ridondanti con la barra ticker subito sotto l'hero */
  .nw-el-home .nw-el-hero__trust{display:none;}
  /* header di sezione: titolo un filo più contenuto, deck ≥16px */
  .nw-el-home .nw-el-h2 .elementor-heading-title{font-size:clamp(26px,7vw,34px);}
  .nw-el-home .nw-el-deck{font-size:16px;}
  /* split promo: media sotto con altezza propria */
  .nw-el-home .nw-el-split__media.e-con{min-height:200px;}
  /* niente scroll orizzontale */
  .nw-el-home .nw-el-wrap.e-con,.nw-el-home .nw-el-tiles.e-con,.nw-el-home .nw-el-rail.e-con,
  .nw-el-home .nw-el-values.e-con,.nw-el-home .nw-el-brands.e-con,.nw-el-home .nw-el-revs.e-con,
  .nw-el-home .nw-el-journal.e-con{max-width:100%;}
}

/* ===== TICKER (barra USP a scorrimento continuo, sotto l'hero) =====
   Due gruppi identici affiancati (--track è largo il doppio di un gruppo), animazione
   trasla di -50% cioè esattamente un gruppo: quando il primo esce il secondo è già
   allineato al suo posto — loop CSS puro, nessun JS di misurazione. */
.nw-el-home .nw-el-tickersec{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;}
.nw-el-home .nw-el-ticker{overflow:hidden;background:var(--nw-forest);}
.nw-el-home .nw-el-ticker__track{display:flex;width:max-content;animation:nw-ticker-scroll 32s linear infinite;}
/* pausa su hover: si può leggere fermando lo scorrimento (solo desktop, mobile non ha hover) */
.nw-el-home .nw-el-ticker:hover .nw-el-ticker__track{animation-play-state:paused;}
.nw-el-home .nw-el-ticker__group{display:flex;align-items:center;flex-shrink:0;padding:14px 0;}
.nw-el-home .nw-el-ticker__item{display:inline-flex;align-items:center;gap:9px;font-family:var(--nw-sans);
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;white-space:nowrap;padding:0 26px;}
/* icona chiara, allineata al testo (eredita currentColor = bianco) */
.nw-el-home .nw-el-ticker__ic{display:inline-flex;flex:0 0 auto;color:#fff;}
.nw-el-home .nw-el-ticker__ic svg,.nw-el-home .nw-el-ticker__ic .nw-svgico{width:16px;height:16px;display:block;}
.nw-el-home .nw-el-ticker__sep{color:rgba(255,255,255,.45);font-size:11px;}
@keyframes nw-ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== PEEK CAROUSEL MOBILE (categorie/bestseller/blog) — JS in nw-el-home.php =====
   Sotto i 767px: slider "peek" (card attiva al centro + vicine parziali ai bordi) con loop
   infinito (clone gestiti via JS). Su desktop (>=768px): slider a card uguali + frecce (vedi
   blocco "Slider DESKTOP" piu' sotto). I clone sono nel DOM in entrambi i casi ma nascosti su
   desktop, cosi' lo scroller desktop scorre solo gli item reali (niente loop). */
/* clone su desktop: nascosti di default, MOSTRATI solo quando il track e' in loop infinito
   (classe .nw-cx-loop aggiunta da JS se la sezione ha overflow). Cosi' le sezioni che ci stanno
   tutte restano una riga statica, mentre categorie & c. hanno la "coda" di cloni per il wrap.
   Niente !important: la classe cambia lo stato senza forzare un display esplicito (le tile .e-con
   mantengono il loro flex-column naturale). Su mobile i cloni restano sempre visibili (qui non
   c'e' regola che li nasconde). */
@media(min-width:768px){ .nw-el-home .nw-cx-track:not(.nw-cx-loop) .nw-cx-clone{display:none;} }
@media(max-width:767px){
  /* specificita' (0,4,0) col ".e-con" finale per battere la regola esistente
     ".nw-el-home .nw-el-tiles.e-con{display:grid!important}" (0,3,0) - una specificita'
     0,2,0 NON basta (il grid!important vince), verificato dal vivo. */
  .nw-el-home .nw-el-sec .nw-cx-track.e-con{
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:stretch !important;justify-content:flex-start !important;
    gap:16px !important;overflow-x:auto !important;overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;scroll-behavior:auto !important;
    position:relative !important;                 /* offsetParent per i calcoli JS */
    /* full-bleed: 100% del wrap (= viewport - 40) + 40 = viewport intero, poi margin -20
       per posizionarlo a filo bordo. flex-direction:row esplicito perche' Elementor
       imposta --flex-direction (spesso column) e senza override le slide si impilano. */
    width:calc(100% + 40px) !important;max-width:none !important;margin-inline:-20px !important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .nw-el-home .nw-el-sec .nw-cx-track.e-con::-webkit-scrollbar{display:none;}
  /* durante l'animazione delle frecce mobile: snap OFF. 5 classi (.e-con.nw-cx-anim) per BATTERE
     lo `scroll-snap-type:x mandatory !important` qui sopra; altrimenti ogni micro-scroll dell'anim
     viene ri-snappato alla card successiva e lo slider "vola" via (6+ prodotti a un tocco). */
  .nw-el-home .nw-el-sec .nw-cx-track.e-con.nw-cx-anim{scroll-snap-type:none !important;}
  /* slide: 0,3,0 - il rail usa .elementor-widget-html (NON .e-con) quindi niente ".e-con"
     finale qui; nessuna regola esistente imposta flex/width sulle slide, quindi 0,3,0
     con !important vince comunque. */
  .nw-el-home .nw-el-sec .nw-cx-slide{
    flex:0 0 70% !important;max-width:70% !important;
    position:relative !important;                  /* per far valere lo z-index dello scroll-driven */
    scroll-snap-align:center !important;scroll-snap-stop:always !important;
    /* effetto "centro protagonista": le slide laterali leggermente abbassate/rimpicciolite
       (scala .93 = sembrano card quasi intere tagliate al bordo, NON decorazioni), la
       centrale (.nw-cx-active, assegnata da JS) piena e in alto. transform e' solo visivo:
       non tocca offsetLeft/Width, i calcoli di centratura JS restano validi. */
    transform:scale(.93) translateY(8px);opacity:.9;transform-origin:top center;
    transition:transform .28s ease,opacity .28s ease;
  }
  .nw-el-home .nw-el-sec .nw-cx-slide.nw-cx-active{transform:none;opacity:1;}
  /* durante il jump silenzioso del loop (e la centratura iniziale): niente transizione,
     cosi' lo scambio di classe active clone->reale e' istantaneo e invisibile. */
  .nw-el-home .nw-el-sec .nw-cx-track.nw-cx-instant .nw-cx-slide{transition:none !important;}
  /* pallini indicatori sotto il carosello (creati da JS): mostra quante card ci sono e la
     posizione attuale -> segnale esplicito che la sezione si sfoglia. Stile coerente coi
     pallini del carosello promo (.nw-el-promo__dot): attivo = pillola allungata. */
  .nw-el-home .nw-el-sec .nw-cx-dots{display:flex;justify-content:center;gap:7px;margin-top:16px;}
  .nw-el-home .nw-el-sec .nw-cx-dots button{width:7px;height:7px;border-radius:999px;border:0;
    padding:0;background:rgba(12,78,43,.25);cursor:pointer;transition:width .2s,background .2s;}
  .nw-el-home .nw-el-sec .nw-cx-dots button.is-active{width:20px;background:var(--nw-forest);}
  /* frecce della riga controlli: cerchio verde + chevron bianco, ai lati dei pallini (Farmacy-style).
     3 classi (.nw-el-sec) per battere la globale `.nw-cx-mnav{display:none}` (2 classi, source-order dopo). */
  .nw-el-home .nw-el-sec .nw-cx-mnav{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:42px;height:42px;border-radius:999px;border:0;background:var(--nw-forest,#0C4E2B);color:#fff;
    cursor:pointer;padding:0;box-shadow:0 8px 20px -8px rgba(12,40,24,.55);transition:transform .15s,background .15s;}
  .nw-el-home .nw-el-sec .nw-cx-mnav:active{transform:scale(.92);background:#0a3f23;}
  .nw-el-home .nw-el-sec .nw-cx-mnav svg{width:20px;height:20px;display:block;}
}
/* pallini nascosti di default (mostrati nei blocchi mobile/desktop) */
.nw-cx-dots{display:none;}
/* riga controlli sotto il carosello: pallini centrati + (solo mobile) frecce ai lati */
.nw-el-home .nw-el-sec .nw-cx-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;}
.nw-el-home .nw-el-sec .nw-cx-ctrl .nw-cx-dots{margin-top:0;} /* la spaziatura la da .nw-cx-ctrl */
.nw-el-home .nw-cx-mnav{display:none;} /* su desktop restano le frecce verdi ai bordi del viewport */

/* ===== Tile categoria FOTO-LED (widget "Slider Categorie") =====
   Foto categoria QUADRATA a pieno formato (le nuove foto sono 1200x900, il crop 1:1
   lo fa object-fit:cover), nome serif + conteggio, hover con zoom foto + card che si solleva. */
.nw-el-home .nw-cat-tile{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--nw-line);border-radius:20px;overflow:hidden;box-shadow:var(--nw-shadow-sm);
  text-decoration:none;cursor:pointer;transition:box-shadow .25s,transform .25s,border-color .25s;}
.nw-el-home .nw-cat-tile:hover{box-shadow:var(--nw-shadow);transform:translateY(-4px);border-color:var(--nw-sage);}
.nw-el-home .nw-cat-tile__media{aspect-ratio:1/1;overflow:hidden;padding:0;display:block;
  background:#f6f6f2;} /* neutro: placeholder visibile solo durante il load della foto */
/* 3 classi (0,3,1): la globale ".nw-el-home .nw-el-sec img{height:auto}" (0,2,1, source-order
   dopo) vincerebbe su height:100% a pari specificita'. */
.nw-el-home .nw-cat-tile .nw-cat-tile__media img{width:100%;height:100%;object-fit:cover;
  display:block;filter:none;transition:transform .5s ease;}
.nw-el-home .nw-cat-tile:hover .nw-cat-tile__media img{transform:scale(1.06);}
.nw-el-home .nw-cat-tile__body{padding:16px 16px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;flex:1;gap:8px;}
.nw-el-home .nw-cat-tile__name{display:block;font-family:var(--nw-serif);font-size:18px;line-height:1.25;color:var(--nw-ink);transition:color .2s;}
.nw-el-home .nw-cat-tile:hover .nw-cat-tile__name{color:var(--nw-forest,#0C4E2B);}
/* conteggio come pill (tinta salvia, testo verde) */
.nw-el-home .nw-cat-tile__count{align-self:center;margin-top:2px;padding:3px 10px;border-radius:999px;
  background:var(--nw-sage-tint,#eef4ea);color:var(--nw-forest,#0C4E2B);font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;}
/* CTA "Scopri ->" centrata (gruppo testo+freccia), freccia scorre all'hover */
.nw-el-home .nw-cat-tile__cta{margin-top:auto;padding-top:12px;border-top:1px solid var(--nw-line);
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--nw-forest,#0C4E2B);}
.nw-el-home .nw-cat-tile__cta svg{transition:transform .25s;}
.nw-el-home .nw-cat-tile:hover .nw-cat-tile__cta svg{transform:translateX(4px);}

/* ===== Card articolo del widget "Slider Articoli" (l'attuale .nw-el-post__t/__img dipende dai
   wrapper Elementor; qui stiliamo il markup del widget). ===== */
.nw-el-home a.nw-el-post{text-decoration:none;}
/* le card .e-con del widget ereditano display:flex ma NON il flex-direction:column (che Elementor
   darebbe via --flex-direction) -> forziamo la colonna, altrimenti contenuto affiancato/immagine collassa. */
.nw-el-home .nw-el-rev.e-con,.nw-el-home .nw-el-post.e-con,.nw-el-home .nw-el-post__body.e-con{flex-direction:column;}
.nw-el-home .nw-el-post.e-con{position:relative;background:#fff;border:1px solid var(--nw-line);border-radius:18px;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;}
.nw-el-home a.nw-el-post:hover{box-shadow:var(--nw-shadow);transform:translateY(-4px);border-color:var(--nw-sage);}
.nw-el-home .nw-el-post__img{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;}
.nw-el-home .nw-el-post__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;backface-visibility:hidden;}
.nw-el-home a.nw-el-post:hover .nw-el-post__img img{transform:scale(1.06);}
/* categoria come pill sull'immagine (bianco traslucido, testo verde brand) */
.nw-el-home .nw-el-post__pill{position:absolute;top:12px;left:12px;z-index:2;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--nw-forest,#0C4E2B);font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;box-shadow:0 4px 12px -4px rgba(12,40,24,.4);-webkit-backdrop-filter:saturate(1.3) blur(2px);backdrop-filter:saturate(1.3) blur(2px);}
.nw-el-home .nw-el-post__body.e-con{flex:1 1 auto;display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px;}
/* riga meta: data · tempo di lettura (non piu' la categoria, ora nel pill) */
.nw-el-home .nw-el-post__meta{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--nw-label);letter-spacing:.01em;text-transform:none;}
.nw-el-home .nw-el-post__sep{opacity:.55;}
.nw-el-home .nw-el-post__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--nw-serif);font-size:20px;line-height:1.3;color:var(--nw-ink);transition:color .2s ease;}
.nw-el-home a.nw-el-post:hover .nw-el-post__t{color:var(--nw-forest,#0C4E2B);}
.nw-el-home .nw-el-post__ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14px;line-height:1.5;color:var(--nw-muted,#5c6b60);}
.nw-el-home .nw-el-post__more{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--nw-forest,#0C4E2B);}
.nw-el-home .nw-el-post__more svg{transition:transform .25s ease;}
.nw-el-home a.nw-el-post:hover .nw-el-post__more svg{transform:translateX(4px);}
/* stelle recensioni (widget Slider Recensioni) */
.nw-el-home .nw-el-rev__stars{color:#e6a817;font-size:15px;letter-spacing:2px;margin-bottom:10px;}
/* backface immagini card (fix flicker/lampo bianco) */
.nw-el-home .nw-pcard__media img,.nw-el-home .nw-cat-tile__media img{backface-visibility:hidden;-webkit-backface-visibility:hidden;}
/* ===== Bestseller card (.nw-pcard) SOLO nella rail home: rifinitura di coerenza con articoli/categorie.
   SCOPED sotto .nw-el-home .nw-el-rail (3 classi > .nw-pcard globale a 1 classe -> vince senza !important)
   cosi' NON tocca archivi prodotto / pagine categoria / brand che condividono .nw-pcard (style.css). ===== */
.nw-el-home .nw-el-rail .nw-pcard{border:1px solid var(--nw-line);border-radius:18px;
  box-shadow:var(--nw-shadow-sm);transition:box-shadow .25s,transform .25s,border-color .25s;}
.nw-el-home .nw-el-rail .nw-pcard:hover{box-shadow:var(--nw-shadow);transform:translateY(-4px);border-color:var(--nw-sage);}
.nw-el-home .nw-el-rail .nw-pcard__btn{border-radius:999px;} /* pill coerente, resta a CONTORNO verde */
/* HOVER bestseller: crossfade alla 2a foto galleria (NIENTE zoom - la foto hover e' gia'
   full-bleed/cover, riempie da sola la card senza bisogno di ingrandirsi). overflow per clip. */
.nw-el-home .nw-el-rail .nw-pcard__media{overflow:hidden;}
.nw-el-home .nw-el-rail .nw-pcard__media img{transition:opacity .45s ease;}
.nw-el-home .nw-el-rail .nw-pcard:hover .nw-pcard__media-hover{opacity:1 !important;}
.nw-el-home .nw-el-rail .nw-pcard:hover .nw-pcard__media > img:not(.nw-pcard__media-hover){opacity:0;}
/* NIENTE OMBRE su card bestseller e articoli (flat). L'hover resta: bordo sage + lift + zoom foto.
   !important batte anche l'ombra inline che paintScale scrive per il "centro protagonista" su mobile. */
.nw-el-home .nw-el-rail .nw-pcard,
.nw-el-home .nw-el-rail .nw-pcard:hover,
.nw-el-home .nw-el-post,
.nw-el-home a.nw-el-post:hover,
.nw-el-home .nw-el-post.e-con:hover{box-shadow:none !important;}

/* ====== Slider DESKTOP/TABLET (>=768px): FULL-BLEED, peek ai DUE lati, solo scroll ======
   Le sezioni diventano scroller a larghezza SCHERMO INTERO (100vw): si vedono N card TUTTE UGUALI
   + una "sbirciata" (peek) tagliata al BORDO SCHERMO su ENTRAMBI i lati (card CARD CARD CARD card).
   NIENTE frecce: si scorre come il mobile (drag/trackpad, gestito in JS) + puntini. N responsive
   (tiles/rail 4, revs/journal 3; tablet una in meno). Il taglio ai bordi lo fa l'overflow-x:hidden
   della sezione antenata. Telefono (<768) invariato: card centrale ingrandita (blocco mobile). */
@media(min-width:768px){
  .nw-el-home .nw-el-sec .nw-cx-track.e-con{
    display:flex !important;grid-template-columns:none !important;
    flex-direction:row !important;flex-wrap:nowrap !important;align-items:stretch !important;
    gap:var(--nw-gap) !important;overflow-x:auto !important;overflow-y:hidden !important;
    scroll-snap-type:x proximity;scroll-behavior:auto;scroll-padding-inline:var(--nw-peek);
    scrollbar-width:none;-ms-overflow-style:none;cursor:default; /* niente "manina": drag mouse disabilitato (frecce + trackpad) */
    /* padding verticale: l'overflow-x:auto clippa anche in verticale (regola CSS), quindi
       senza questo spazio l'hover che solleva/ingrandisce la card verrebbe TAGLIATO in alto. */
    padding-block:18px 14px;
    /* FULL-BLEED: esce dal wrap max-width:1200 (centrato) e riempie il viewport. La sezione
       antenata (.e-con-full, overflow-x:hidden, largh. viewport) taglia al bordo schermo. */
    width:100vw !important;max-width:none !important;margin-inline:calc(50% - 50vw) !important;
    --nw-peek:clamp(20px,3.5vw,48px);--nw-gap:20px;
  }
  .nw-el-home .nw-el-sec .nw-cx-track.e-con.nw-cx-grab{cursor:grabbing;}
  .nw-el-home .nw-el-sec .nw-cx-track.e-con::-webkit-scrollbar{display:none;}
  .nw-el-home .nw-el-sec .nw-cx-slide{scroll-snap-align:start !important;}
  /* sezioni che ci stanno TUTTE (no overflow -> niente .nw-cx-loop) = CENTRATE, non a sinistra. */
  .nw-el-home .nw-el-sec .nw-cx-track.e-con:not(.nw-cx-loop){justify-content:center !important;}
  /* larghezza card = (viewport - 2 peek)/N - gap  => N piene + sbirciata ai due lati.
     CARD PIU' GRANDI: desktop 3 (tiles/rail), 2 (recensioni/blog). */
  .nw-el-home .nw-el-tiles.nw-cx-track .nw-cx-slide,
  .nw-el-home .nw-el-rail.nw-cx-track  .nw-cx-slide{
    flex:0 0 calc((100vw - 2*var(--nw-peek) - 3*var(--nw-gap))/4) !important;
    max-width:calc((100vw - 2*var(--nw-peek) - 3*var(--nw-gap))/4) !important;}
  /* larghezza card INVARIATA (niente cap): un cap qui rompe l'incastro esatto peek/frecce, che
     assume che le card riempiano per intero (100vw - 2*peek). Il riquadro foto e' gia'
     aspect-ratio:4/3 di suo (regola condivisa in nw-components.css, vale ovunque: home/negozio/
     categorie) quindi su schermi larghi cresce in altezza CON la card, restando sempre 4:3 come
     le foto hover -> niente foto piccola/persa, e l'allineamento card/frecce/peek resta invariato. */
  .nw-el-home .nw-el-revs.nw-cx-track    .nw-cx-slide,
  .nw-el-home .nw-el-journal.nw-cx-track .nw-cx-slide{
    flex:0 0 calc((100vw - 2*var(--nw-peek) - 2*var(--nw-gap))/3) !important;
    max-width:calc((100vw - 2*var(--nw-peek) - 2*var(--nw-gap))/3) !important;}
  /* fix flicker/lampo bianco scorrendo (layer GPU + backface stabile). Su mobile paintScale mette
     un transform inline che vince, quindi qui tocca solo il desktop. */
  .nw-el-home .nw-cx-slide{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
  .nw-el-home .nw-cx-track.e-con{backface-visibility:hidden;-webkit-backface-visibility:hidden;}
  /* PUNTINI anche su desktop (niente frecce). Stile coerente col mobile. */
  .nw-el-home .nw-el-sec .nw-cx-dots{display:flex;justify-content:center;gap:7px;margin-top:20px;}
  .nw-el-home .nw-el-sec .nw-cx-dots button{width:7px;height:7px;border-radius:999px;border:0;
    padding:0;background:rgba(12,78,43,.25);cursor:pointer;transition:width .2s,background .2s;}
  .nw-el-home .nw-el-sec .nw-cx-dots button.is-active{width:20px;background:var(--nw-forest);}
  /* FRECCE (stile vecchia home .nw-promo__nav): cerchio VERDE pieno + chevron bianco, ai BORDI del
     viewport (il track e' full-bleed). top messo da JS; left/right calcolati sul viewport. In
     aggiunta allo scroll + puntini; NON si disabilitano (loop infinito). */
  .nw-el-home .nw-cx-nav{position:absolute;z-index:5;transform:translateY(-50%);width:46px;height:46px;
    border-radius:999px;border:0;background:var(--nw-forest,#0C4E2B);color:#fff;display:flex;
    align-items:center;justify-content:center;cursor:pointer;padding:0;
    box-shadow:0 12px 28px -10px rgba(12,40,24,.6);transition:transform .18s,background .15s,box-shadow .18s;}
  .nw-el-home .nw-cx-nav:hover{background:#0a3f23;transform:translateY(-50%) scale(1.09);box-shadow:0 16px 34px -10px rgba(12,40,24,.7);}
  .nw-el-home .nw-cx-nav svg{width:20px;height:20px;display:block;}
  .nw-el-home .nw-cx-nav--prev{left:calc(50% - 50vw + 16px);}
  .nw-el-home .nw-cx-nav--next{right:calc(50% - 50vw + 16px);}
  /* durante lo scroll: hover disattivato sulle card -> muovere il cursore mentre si scorre non fa
     flickerare l'hover/lift. Il drag parte comunque (pointerdown sul track, non sulla slide). */
  .nw-el-home .nw-cx-track.nw-cx-scrolling .nw-cx-slide{pointer-events:none;}
}
@media(min-width:768px) and (max-width:1099px){
  /* TABLET: card ancora piu' grandi -> tiles/rail 2, recensioni/blog ~1.5. */
  .nw-el-home .nw-el-tiles.nw-cx-track .nw-cx-slide,
  .nw-el-home .nw-el-rail.nw-cx-track  .nw-cx-slide{
    flex:0 0 calc((100vw - 2*var(--nw-peek) - 1*var(--nw-gap))/2) !important;
    max-width:calc((100vw - 2*var(--nw-peek) - 1*var(--nw-gap))/2) !important;}
  .nw-el-home .nw-el-revs.nw-cx-track    .nw-cx-slide,
  .nw-el-home .nw-el-journal.nw-cx-track .nw-cx-slide{
    flex:0 0 calc((100vw - 2*var(--nw-peek) - 1*var(--nw-gap))/2) !important;
    max-width:calc((100vw - 2*var(--nw-peek) - 1*var(--nw-gap))/2) !important;}
}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .nw-el-home *,.nw-el-home *::before,.nw-el-home *::after{transition:none !important;animation:none !important;}
  .nw-el-home .nw-el-promo__track{scroll-behavior:auto;}
}