/* ============================================================================
   NW-COMPONENTS — FONTE UNICA dei componenti condivisi del redesign 2026.
   Card prodotto/blog, wishlist, breadcrumb, testate sezione, bottoni, chip,
   paginazione, dropdown facet, filtri, FAQ, newsletter, termcard.
   REGOLA: qui vive il componente BASE; le pagine aggiungono SOLO delta scoped
   (.nw-home, .nw-archive, .nw-pdp, .nw-best--home, .nw-el-home). Non duplicare
   mai queste regole in un CSS di pagina.
   Caricato SEMPRE (functions.php, dep naturwaren-theme-style, prima di shop.css).
   ============================================================================ */
:root {
	--nw-forest:#0C4E2B; --nw-forest-deep:#093A20; --nw-sage:#7E9E8D;
	--nw-line:rgba(12,78,43,.14); --nw-ink:#1C2A20; --nw-label:#456150;
	--nw-muted:#55645A; --nw-mist:#ECF1EE; --nw-cream:#E8E7E2; --nw-mint:#CFE3D5;
	--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;
}

/* ---- Bottoni (.nw-btn) ---- */
.nw-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 28px; border-radius: 10px; font-weight: 700; font-size: 15px;
    text-decoration: none; transition: all .15s ease; cursor: pointer;
}
.nw-btn--solid { background: var(--principale, #0C4E2B); color: #fff !important; }
.nw-btn--solid:hover { background: #0a3f23; }
.nw-btn--outline { border: 1.5px solid var(--principale, #0C4E2B); color: var(--principale, #0C4E2B) !important; }
.nw-btn--outline:hover { background: var(--lightaccent, #CCE4DE); }

/* ---- Testata sezione (.nw-sec__head/eyebrow/title/sub/link) + focus-visible ---- */
.nw-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.nw-sec__head--center { justify-content: center; text-align: center; }
/* Focus visibile sugli elementi interattivi dei componenti condivisi (a11y). */
.nw-pcard__btn:focus-visible, .nw-wish:focus-visible, .nw-chip:focus-visible,
.nw-pagination a:focus-visible, .nw-pagination button:focus-visible, .nw-dd__btn:focus-visible {
	outline: 2px solid var(--principale, #0C4E2B); outline-offset: 2px;
}
.nw-sec__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--principale, #0C4E2B); margin-bottom: 8px; }
.nw-sec__title { font-family: 'Lora', serif; font-weight: 700; font-size: 34px; color: #111 !important; margin: 0 0 6px; text-transform: none !important; }
.nw-sec__sub { color: #6b7280; font-size: 16px; margin: 0; max-width: 620px; }
/* !important: il tema forza gli <a> a bianco e questo link vive su fondo chiaro —
   senza, "Vedi tutte le recensioni →" è bianco su bianco, cioè invisibile. */
.nw-sec__link { color: var(--principale, #0C4E2B) !important; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.nw-sec__link:hover { text-decoration: underline; }

/* ---- Card prodotto (.nw-pcard) — la card canonica di TUTTE le griglie ---- */
.nw-pcard__btn { color: var(--principale, #0C4E2B) !important; }
.nw-pcard__btn:hover { color: #fff !important; }
/* Card prodotto (bestseller) */
.nw-best__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* Meno di 4 prodotti: le colonne restavano 4 e le card si accodavano a sinistra
   lasciando la quarta vuota (es. "Prodotti consigliati" negli articoli, 3 card
   con ~290px di buco a destra). Le colonne seguono il numero reale di card. */
.nw-best__grid:has(> .nw-pcard:last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.nw-best__grid:has(> .nw-pcard:last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); max-width: 700px; margin-inline: auto; }
.nw-best__grid:has(> .nw-pcard:last-child:nth-child(1)) { grid-template-columns: minmax(0, 330px); justify-content: center; }
/* Card = COPIA della bestseller home (.nw-el-rail): flat, bordo verde-linea, radius 18;
   hover = lift -4px + bordo sage, NIENTE ombra. Valori letterali: --nw-line/--nw-sage
   esistono solo nel CSS home, qui non sono definite. */
.nw-pcard { background: #fff; border: 1px solid rgba(12,78,43,.14); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: none; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.nw-pcard:hover { box-shadow: none; transform: translateY(-4px); border-color: var(--secondario, #7E9E8D); }
/* aspect-ratio (non altezza fissa): il riquadro resta sempre 4:3 come le foto-hover, qualunque
   sia la larghezza della card in griglie diverse (bestseller home/negozio/categorie/tag) -
   altrimenti su card larghe il riquadro diventa piu' orizzontale della foto e il crop cover
   sotto (hover) taglia troppo, o la foto appare piccola/persa con contain. */
.nw-pcard__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; background: #ffffff; padding: 18px; overflow: hidden; transition: padding .35s ease; }
.nw-pcard__media img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; transition: transform .35s ease; }
/* Hover: l'immagine riempie tutto il riquadro (crop), non resta "contenuta" con margine bianco.
   !important necessario per vincere le varianti home (padding più grande, stessa specificità). */
.nw-pcard:hover .nw-pcard__media { padding: 0 !important; }
.nw-pcard:hover .nw-pcard__media img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; transform: scale(1.04); }
.nw-pcard__badge { position: absolute; top: 12px; left: 12px; background: #FCEFC7; color: #8a6d1a; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.nw-pcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nw-pcard__brandrow { display: flex; align-items: center; justify-content: space-between; }
.nw-pcard__brand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--principale, #0C4E2B); }
.nw-pcard__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--principale, #0C4E2B); }
.nw-pcard__rating { font-size: 12px; color: #E3A008; font-weight: 700; }
.nw-pcard__rating span { color: #9aa3a0; font-weight: 400; }
/* Crossfade 2ª foto all'hover (stesso effetto della home, ora canone globale su tutte le griglie). */
.nw-pcard .nw-pcard__media img { transition: opacity .45s ease; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* NIENTE zoom extra sopra il crop (coerente con la home): col riquadro ora 4:3 come la foto,
   il cover sotto riempie gia' da solo senza bisogno di ingrandire ulteriormente. */
.nw-pcard:hover .nw-pcard__media-hover { opacity: 1 !important; }
/* La 2ª foto (lifestyle) RIEMPIE tutto il riquadro: cover, non contain (specificità img.classe per battere la regola contain !important più sopra). Transform:none per azzerare lo scale(1.04) generico
   qui sopra - col riquadro gia' 4:3 il cover riempie da solo, zero zoom (stesso trattamento home). */
.nw-pcard:hover .nw-pcard__media img.nw-pcard__media-hover { object-fit: cover !important; transform: none !important; }
/* Fade-out della 1ª foto SOLO se esiste la 2ª (:has) — altrimenti le card senza galleria resterebbero vuote all'hover. */
.nw-pcard:hover .nw-pcard__media:has(.nw-pcard__media-hover) > img:not(.nw-pcard__media-hover) { opacity: 0; }

/* !important: il tema forza gli <a> a bianco — senza, il nome sparisce fuori dagli scope patchati (ricerca/rail/wishlist). */
.nw-pcard__name { font-family: 'Lora', serif; font-size: 17px; color: #1a1a1a !important; text-decoration: none; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.nw-pcard:hover .nw-pcard__name, .nw-pcard__name:hover { color: var(--principale, #0C4E2B) !important; }
.nw-pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.nw-pcard__price { font-family: 'Lora', serif; font-weight: 700; font-size: 18px; color: #111; }
.nw-pcard__price del { color: #b9bdc2; font-weight: 400; font-size: 14px; margin-right: 5px; }
.nw-pcard__btn { border: 1.5px solid var(--principale, #0C4E2B); color: var(--principale, #0C4E2B); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; text-decoration: none; transition: all .15s ease; white-space: nowrap; }
.nw-pcard__btn:hover { background: var(--principale, #0C4E2B); color: #fff; }
.nw-pcard__badge--sale { background: #FBE3E1; color: #b3261e; left: auto; right: 12px; }
.nw-pcard__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---- Wishlist (.nw-wish) ----
   Cuore = SVG (mask), path stile Material: lobi pieni e punta morbida (il
   Lucide precedente era ancora "a punta" per il cliente). Selettori con
   `button.nw-wish` (0,2,1): il tema ha `button:hover{background:transparent}`
   (0,2,0, caricato DOPO) che rendeva il disco trasparente al hover ->
   "il cuore sparisce". Disco bianco PIENO in ogni stato. */
.nw-wish, button.nw-wish { border: 1px solid #e2e6e1; background: #fff; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 40px; height: 40px; transition: border-color .15s ease, transform .15s ease; }
.nw-wish::before { content: ''; width: 19px; height: 19px; background: #64756b; transition: background .15s ease;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.7l-1.3-1.2C6 15.4 2.8 12.6 2.8 9.1c0-2.8 2.2-5 5-5 1.6 0 3.1.7 4.2 2 1.1-1.3 2.6-2 4.2-2 2.8 0 5 2.2 5 5 0 3.5-3.2 6.3-7.9 10.4L12 20.7z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.7l-1.3-1.2C6 15.4 2.8 12.6 2.8 9.1c0-2.8 2.2-5 5-5 1.6 0 3.1.7 4.2 2 1.1-1.3 2.6-2 4.2-2 2.8 0 5 2.2 5 5 0 3.5-3.2 6.3-7.9 10.4L12 20.7z'/></svg>") center / contain no-repeat; }
.nw-wish:hover, .nw-wish:focus, button.nw-wish:hover, button.nw-wish:focus { background: #fff; border-color: #e3a5a5; transform: scale(1.06); }
.nw-wish:hover::before { background: #e3534f; }
.nw-wish.is-active, button.nw-wish.is-active { border-color: #f3c9c7; background: #fff; }
.nw-wish.is-active::before { background: #e3534f;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center / contain no-repeat; }
.nw-wish--card { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; box-shadow: 0 5px 12px -5px rgba(0,0,0,.28); }
.nw-wish--card::before { width: 17px; height: 17px; }
.nw-pcard { position: relative; }
.nw-wish--pdp { position: absolute; top: 18px; right: 18px; z-index: 3; box-shadow: 0 6px 14px -6px rgba(0,0,0,.25); }
.nw-wish--btn { width: 54px; height: 54px; flex: 0 0 auto; border: 1.5px solid #dde2dd; background: #fff; border-radius: 12px; }
.nw-wish--btn::before { width: 23px; height: 23px; }
.nw-wish-count {
    position: absolute; top: -6px; right: -9px;
    background: var(--principale, #0C4E2B); color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
    min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex;
    align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(12,78,43,.28);
}
.nw-wish-count[hidden] { display: none; }

/* ---- Card blog (.nw-bcard) + griglia ---- */
/* Blog */
.nw-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nw-bcard { display: flex; flex-direction: column; text-decoration: none; }
.nw-bcard__media { display: block; height: 200px; background: #eef0ec; background-size: cover; background-position: center; border-radius: 14px; }
.nw-bcard__body { padding: 16px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.nw-bcard__cat { align-self: flex-start; background: #eef3ef; color: var(--principale, #0C4E2B); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 4px 10px; border-radius: 999px; }
.nw-bcard__title { font-family: 'Lora', serif; font-weight: 700; font-size: 19px; color: #1a1a1a; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.nw-bcard:hover .nw-bcard__title { color: var(--principale, #0C4E2B); }
.nw-bcard__ex { color: #5c6b60; font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-bcard__meta { color: #9aa3a0; font-size: 13px; }

/* ---- Breadcrumb (.nw-crumbs) ---- */
/* #7a857e dava 3,8:1 a 13px: sotto la soglia. #55645A porta a 5,6:1. */
.nw-crumbs { font-size:13px; color:#55645A; margin-bottom:18px; }
.nw-crumbs a { color:#55645A !important; text-decoration:none; }
.nw-crumbs a:hover { color:var(--principale,#0C4E2B) !important; }
.nw-crumbs span { margin:0 6px; color:#bcc6c0; }

/* ---- Chip (.nw-chip) ---- */
.nw-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; border:1px solid #dce4dd; background:#fff; color:#3a463f !important; font-size:13.5px; font-weight:600; text-decoration:none; transition:all .15s ease; }
.nw-chip span { color:#9aa3a0; font-size:12px; }
.nw-chip:hover { border-color:var(--secondario,#7E9E8D); }
.nw-chip.is-active { background:var(--principale,#0C4E2B); color:#fff !important; border-color:var(--principale,#0C4E2B); }
.nw-chip.is-active span { color:rgba(255,255,255,.7); }

/* ---- Paginazione (.nw-pagination, markup paginate_links) ---- */
.nw-pagination { margin-top:48px; }
.nw-pagination ul { list-style:none; display:flex; gap:8px; justify-content:center; padding:0; margin:0; flex-wrap:wrap; }
.nw-pagination a, .nw-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border-radius:10px; border:1px solid #e2e7e3; background:#fff; color:#3a463f !important; text-decoration:none; font-weight:600; font-size:14px; }
.nw-pagination a:hover { border-color:var(--secondario,#7E9E8D); }
.nw-pagination .current { background:var(--principale,#0C4E2B); color:#fff !important; border-color:var(--principale,#0C4E2B); }

/* ---- Dropdown facet (.nw-dd) ---- */
.nw-dd { position: relative; }
.nw-dd__btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #dde2dd; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #1c1c1c; cursor: pointer; transition: border-color .15s ease; }
.nw-dd__btn:hover { border-color: var(--secondario, #7E9E8D); }
.nw-dd.is-open .nw-dd__btn, .nw-dd.has-active .nw-dd__btn { border-color: var(--principale, #0C4E2B); color: var(--principale, #0C4E2B); }
.nw-dd__badge { background: var(--principale, #0C4E2B); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.nw-dd__badge[hidden] { display: none !important; }
.nw-dd__caret { font-size: 10px; color: #9aa3a0; }
.nw-dd__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; background: #fff; border: 1px solid #e7ece8; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.28); padding: 14px 16px; min-width: 250px; max-height: 340px; overflow-y: auto; }
.nw-dd__panel[hidden] { display: none; }

/* ---- Filtri (.nw-filters/.nw-filter) ---- */
/* Sticky SOLO desktop: sotto i 1024px .nw-filters è il drawer off-canvas
   position:fixed (style.css) — una sticky senza media query qui lo rimetteva
   in flusso e apriva un buco alto quanto i filtri prima della griglia. */
@media (min-width: 1025px) { .nw-filters { position: sticky; top: 90px; } }
.nw-filter-group { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #eef0ec; }
.nw-filter-group__title { font-family: 'Lato', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .2px !important; text-transform: none !important; color: #1c1c1c !important; margin: 0 0 14px !important; line-height: 1.2 !important; }
.nw-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nw-filter { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #3a3a3a; transition: background .12s ease; }
.nw-filter:hover { background: #f4f6f3; }
.nw-filter input { position: absolute; opacity: 0; width: 0; height: 0; }
.nw-filter__check { width: 18px; height: 18px; border: 1.5px solid #cdd5cf; border-radius: 5px; flex: 0 0 auto; position: relative; transition: all .12s ease; }
.nw-filter input:checked + .nw-filter__check { background: var(--principale, #0C4E2B); border-color: var(--principale, #0C4E2B); }
.nw-filter input:checked + .nw-filter__check::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.nw-filter__name { flex: 1; }
.nw-filter input:checked ~ .nw-filter__name { color: var(--principale, #0C4E2B); font-weight: 600; }
.nw-filter__count { color: #9aa3a0; font-size: 12.5px; }
/* Sottocategorie (senza checkbox, stile lista freccia) */
.nw-filter-list--sub .nw-filter { padding: 8px; }
.nw-filter-list--sub .nw-filter.is-active,
.nw-filter-list--sub .nw-filter input:checked ~ .nw-filter__name { color: var(--principale, #0C4E2B); }
.nw-filter-list--sub .nw-filter input:checked ~ .nw-filter__name { font-weight: 700; }
.nw-filter-list--sub .nw-filter__name { font-weight: 600; }

/* ---- Termcard (.nw-termcard) ---- */
.nw-termcard { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid #e7ede8; border-radius:14px; background:#fff; text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; }
.nw-termcard:hover { border-color:var(--secondario,#7E9E8D); box-shadow:0 12px 24px -16px rgba(0,0,0,.18); }
.nw-termcard__ico { font-size:24px; width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#f1f4f1; border-radius:10px; }
.nw-termcard__ico--svg { color: var(--principale, #0C4E2B); }
.nw-termcard__ico svg { width:26px; height:26px; display:block; }
.nw-termcard strong { display:block; font-family:'Lora', serif; font-size:16px; color:#1a1a1a; }
.nw-termcard small { color:#8a9299; font-size:12.5px; }

/* ---- FAQ accordion (.nw-acc) ---- */
.nw-acc__ico { display: inline-flex; align-items: center; justify-content: center; }
.nw-acc { border: 1px solid #e7ece8; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.nw-acc summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; gap: 12px; font-family: 'Lora', serif; font-weight: 700; font-size: 16px; color: #1a1a1a; }
.nw-acc summary::-webkit-details-marker { display: none; }
.nw-acc__plus { margin-left: auto; width: 22px; height: 22px; position: relative; }
.nw-acc__plus::before, .nw-acc__plus::after { content: ''; position: absolute; background: #9aa3a0; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.nw-acc__plus::before { width: 12px; height: 2px; }
.nw-acc__plus::after { width: 2px; height: 12px; transition: opacity .15s; }
.nw-acc[open] .nw-acc__plus::after { opacity: 0; }
.nw-acc__body { padding: 0 18px 18px 48px; color: #5a5a5a; font-size: 14.5px; line-height: 1.6; }
.nw-acc__ico { width: 36px; height: 36px; border-radius: 10px; background: #EDF5EE; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.nw-acc__ico svg { width: 21px; height: 21px; color: var(--principale, #0C4E2B); }
.nw-acc__name { flex: 1; }

/* ---- Sezione FAQ (.nw-faqsec, output nw_faq_block) ---- */
/* Occhiello e titolo restavano a sinistra mentre ogni altra testata del sito è
   centrata (sottotitolo, contatto e tab lo erano già). Il centraggio sta sul
   contenitore perché l'occhiello è inline-flex: text-align sull'elemento non lo
   sposterebbe. L'accordion torna a sinistra: le risposte si leggono. */
.nw-faqsec > .nw-sec__inner { text-align: center; }
.nw-faqsec > .nw-sec__inner .nw-pdp__accordion { text-align: left; }
.nw-faqsec__sub { text-align: center; color: #6F7A72; font-size: 16px; line-height: 1.6; margin: 10px auto 0; max-width: 620px; }
.nw-faqsec__sub a { color: var(--principale, #0C4E2B); font-weight: 700; text-decoration: none; }
.nw-faqsec__sub a:hover { text-decoration: underline; }
.nw-faqsec__contact { text-align: center; margin: 12px 0 0; }
.nw-faqsec__contact a { color: var(--principale, #0C4E2B); font-weight: 700; text-decoration: none; }
.nw-faqsec__contact a:hover { text-decoration: underline; }
.nw-faqsec__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 28px 0 6px; }
.nw-faqsec__tab { border: 1.5px solid #DDE3DD; background: #fff; color: #3E4A42; border-radius: 999px;
  padding: 10px 22px; font: 700 13.5px 'Lato', sans-serif; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.nw-faqsec__tab:hover { border-color: var(--principale, #0C4E2B); color: var(--principale, #0C4E2B); }
.nw-faqsec__tab.is-active { background: var(--principale, #0C4E2B); color: #fff; border-color: var(--principale, #0C4E2B); }

/* ---- Newsletter (.nw-news, output nw_newsletter_block) ---- */
/* Newsletter */
.nw-news { background: var(--principale, #0C4E2B); padding: 72px 32px; text-align: center; }
.nw-news__inner { max-width: 900px; margin: 0 auto; }
.nw-news__eyebrow { display: inline-flex; align-items: center; gap: 6px; background: #FBF4E6; border: 1px solid #E7D5A8; color: #6b5023; font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.nw-news__title { font-family: 'Lora', serif; font-weight: 700; font-size: clamp(28px, 3.5vw, 38px); color: #fff; margin: 0 0 12px; letter-spacing: -.5px; }
.nw-news__title strong, .nw-news__title em { color: #FFDD00; font-style: italic; }
.nw-news__sub { color: rgba(255,255,255,.78); font-size: 15px; margin: 0 0 28px; max-width: 540px; margin-left: auto; margin-right: auto; }
.nw-news__form { display: flex; gap: 8px; background: #fff; border-radius: 999px; padding: 6px; max-width: 480px; margin: 0 auto; }
.nw-news__form input { flex: 1; border: 0; outline: none; background: transparent; padding: 12px 18px; font-size: 15px; color: #333; font-family: 'Lato', sans-serif; }
.nw-news__form button { border: 0; background: var(--principale, #0C4E2B); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 26px; border-radius: 999px; cursor: pointer; transition: background .15s ease; }
.nw-news__form button:hover { background: #0a3f23; }
.nw-news__note { color: rgba(255,255,255,.6); font-size: 11px; margin: 16px 0 0; }
.nw-news--compact { padding: 52px 24px; }
.nw-news--compact .nw-news__title { font-size: clamp(22px, 2.4vw, 30px); }
.nw-news--compact .nw-news__inner { max-width: 680px; }

/* ---- Responsive componenti ---- */
@media (max-width: 1024px) {
    .nw-best__grid { grid-template-columns: repeat(2, 1fr); }
    .nw-blog__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .nw-best__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .nw-blog__grid { grid-template-columns: 1fr; }
    .nw-pcard__media { height: 180px; }
}

/* ============================================================
   CONFRONTO PRODOTTI (.nw-compare) — ogni colonna è UNA card
   (stesso linguaggio delle card journal/pcard: bianca, bordo
   --nw-line, radius 18, hover lift) che contiene la pcard senza
   bordo + la riga "Descrizione". Righe allineate via subgrid.
   ============================================================ */
.nw-compare__grid { display: grid; grid-template-columns: repeat(var(--nw-cols, 4), minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 22px; align-items: start; margin-top: 8px; }
.nw-compare__col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; position: relative; background: #fff; border: 1px solid var(--nw-line, rgba(12,78,43,.14)); border-radius: 18px; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.nw-compare__col:hover { box-shadow: var(--nw-shadow, 0 10px 34px rgba(12,78,43,.09)); transform: translateY(-3px); border-color: var(--nw-sage, #7E9E8D); }
.nw-compare__col.is-current { border-color: var(--nw-forest, #0C4E2B); box-shadow: 0 0 0 1px var(--nw-forest, #0C4E2B); }
/* badge = stessa pillola bianca del journal, dentro la card in alto a sinistra */
.nw-compare__badge { position: absolute; top: 12px; left: 12px; z-index: 3; background: rgba(255,255,255,.94); color: var(--nw-forest, #0C4E2B); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1; padding: 6px 11px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(12,40,24,.4); }
.nw-compare__card { min-width: 0; }
.nw-compare__card .nw-pcard { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none !important; transform: none !important; }
.nw-compare__desc { border-top: 1px solid var(--nw-line, rgba(12,78,43,.14)); padding: 16px 20px 20px; font-size: 14px; line-height: 1.6; color: var(--nw-muted, #55645A); }
.nw-compare__desc p { margin: 0; }
.nw-compare__desc-label { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nw-label, #456150); }
/* browser senza subgrid: colonne indipendenti, descrizioni non allineate ma nulla si rompe */
@supports not (grid-template-rows: subgrid) {
  .nw-compare__col { grid-template-rows: auto auto; }
}
@media (max-width: 760px) {
  .nw-compare__scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin: 0 -24px; padding: 6px 24px 10px; scroll-padding-left: 24px; scrollbar-width: none; }
  .nw-compare__scroller::-webkit-scrollbar { display: none; }
  .nw-compare__grid { grid-auto-flow: column; grid-auto-columns: min(72vw, 300px); grid-template-columns: none; column-gap: 14px; }
  .nw-compare__col { scroll-snap-align: start; }
}

/* ============================================================
   nw-slider — carosello riutilizzabile (frecce + pallini) del
   componente JS assets/js/nw-slider.js. CSS+JS insieme = widget
   autonomo. Controlli visibili SOLO quando il track sfonda
   (mobile); su desktop le sezioni restano griglie statiche.
   ============================================================ */
.nw-slider { position: relative; }
.nw-slider__ctrl { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
@media (max-width: 760px) { .nw-slider:not(.nw-slider--static) .nw-slider__ctrl { display: flex; } }
.nw-slider__arrow { flex: 0 0 auto; box-sizing: border-box; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--nw-line, rgba(12,78,43,.14)); background: #fff; color: var(--nw-forest, #0C4E2B); border-radius: 999px; cursor: pointer; line-height: 0; box-shadow: var(--nw-shadow-sm, 0 3px 10px rgba(12,78,43,.08)); transition: transform .15s ease, opacity .15s ease, border-color .15s ease; }
.nw-slider__arrow svg { width: 19px; height: 19px; }
.nw-slider__arrow[disabled] { opacity: .32; cursor: default; }
.nw-slider__arrow:not([disabled]):active { transform: scale(.94); }
.nw-slider__arrow:not([disabled]):hover { border-color: var(--nw-sage, #7E9E8D); }
.nw-slider__dots { display: flex; align-items: center; gap: 8px; }
.nw-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #D6DDD6; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.nw-slider__dot.is-active { background: var(--nw-sage, #7E9E8D); transform: scale(1.35); }

/* Blog rail su PDP: griglia statica su desktop, slider scroll-snap su mobile
   (stesso feel della home). I controlli li aggiunge nw-slider quando sfonda. */
@media (max-width: 760px) {
  .nw-pdp .nw-blog__grid { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 14px; margin: 8px -24px 0; padding: 6px 24px 12px; scroll-padding-left: 24px; scrollbar-width: none; }
  .nw-pdp .nw-blog__grid::-webkit-scrollbar { display: none; }
  .nw-pdp .nw-blog__grid > * { flex: 0 0 min(82vw, 320px); scroll-snap-align: start; }
}

/* Sezione stretta canonica (ex inline style su Tabella nutrizionale / Avvertenze) */
.nw-sec--narrow { max-width: 780px; margin: 0 auto; }

/* ============================================================
   CARD BLOG stile "Dal Journal" (home2) — dal 2026-07-17 è il
   default GLOBALE di .nw-bcard (blog index, articolo, ricerca,
   PDP): card bianca radius 18, pill categoria sull'immagine,
   meta in alto, titolo serif, "Leggi l'articolo →".
   ============================================================ */
.nw-bcard { position: relative; background: #fff; border: 1px solid var(--nw-line, rgba(12,78,43,.14)); border-radius: 18px; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.nw-bcard:hover { box-shadow: var(--nw-shadow, 0 10px 34px rgba(12,78,43,.09)); transform: translateY(-4px); border-color: var(--nw-sage, #7E9E8D); }
.nw-bcard__media { height: auto; aspect-ratio: 16 / 10; border-radius: 0; transition: transform .5s ease; backface-visibility: hidden; }
.nw-bcard:hover .nw-bcard__media { transform: scale(1.06); }
.nw-bcard__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-bcard__body { flex: 1 1 auto; padding: 18px 20px 20px; gap: 9px; }
.nw-bcard__meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--nw-label, #456150); }
.nw-bcard__sep { opacity: .55; }
.nw-bcard__title { font-size: 20px; min-height: 0; color: var(--nw-ink, #1C2A20); }
.nw-bcard__ex { color: var(--nw-muted, #55645A); font-size: 14px; line-height: 1.5; }
.nw-bcard__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-bcard__more svg { transition: transform .25s ease; }
.nw-bcard:hover .nw-bcard__more svg { transform: translateX(4px); }

/* Descrizione confronto: 3 righe clampate con altezza riservata → pannelli pieni e pari,
   micro-fade sul troncamento. Label "Descrizione" rimossa (rumore ripetuto 4 volte),
   il divisore basta a spiegare la riga. Rating nascosto nel confronto: metà prodotti
   non lo ha e la brandrow ballava. */
.nw-compare__desc p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.6em * 5); position: relative; }
.nw-compare__desc p::after { content: ""; position: absolute; right: 0; bottom: 0; width: 2.2em; height: 1.6em; background: linear-gradient(90deg, transparent, #fff); }
.nw-compare__desc { padding-top: 16px; }
.nw-compare__desc-label { display: none; }
.nw-compare .nw-pcard__rating { display: none; }
.nw-compare .nw-pcard__brandrow { justify-content: flex-start; }

/* Box informativo con icona (Avvertenze, Tabella nutrizionale, ...) — tinta menta +
   rail forest a sinistra: contenuto di sicurezza, serio ma nel linguaggio brand. */
.nw-infobox { display: flex; gap: 16px; align-items: flex-start; background: #EDF5EE; border: 1px solid rgba(12,78,43,.20); border-left: 3px solid var(--nw-forest, #0C4E2B); border-radius: 14px; padding: 22px 26px; box-shadow: var(--nw-shadow-sm, 0 4px 16px rgba(12,78,43,.07)); }
.nw-infobox__ico { flex: 0 0 auto; }
.nw-infobox__ico .nw-ico { background: #fff; border: 1px solid rgba(12,78,43,.16); }
.nw-infobox__body strong { font-family: var(--nw-serif, 'Lora', serif); font-size: 16px; color: var(--nw-ink, #1C2A20); }
.nw-infobox__body .nw-pdp__desc { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--nw-ink, #1C2A20); }


/* ============================================================================
   BRAND INDEX — righe ampie alternate (/i-nostri-brand/)
   → APPENDERE a: assets/css/nw-components.css
   Sostituisce la vecchia griglia .nw-brandcards (5 card piccole) con una riga
   orizzontale ampia per brand: logo + testo su un lato, collage di immagini
   prodotto REALI sull'altro; righe alternate, separate da hairline; mobile in
   colonna singola con la visual sotto il testo.
   (Le regole .nw-brandcard* restano in style.css: servono ancora alla home.)
   ============================================================================ */

.nw-brandx-list { display: flex; flex-direction: column; }

.nw-brandx {
	display: flex; align-items: center;
	gap: clamp(32px, 5vw, 76px);
	padding: clamp(40px, 5.5vw, 76px) 0;
}
.nw-brandx:first-child { padding-top: 6px; }
.nw-brandx + .nw-brandx { border-top: 1px solid var(--nw-line, rgba(12,78,43,.14)); } /* hairline */
.nw-brandx:nth-child(even) { flex-direction: row-reverse; } /* layout invertito riga alterna */

/* ---- Colonna testo ---- */
.nw-brandx__text { flex: 1 1 40%; min-width: 0; }
.nw-brandx__logo { min-height: 40px; margin-bottom: 18px; display: flex; align-items: center; }
.nw-brandx__logo img { max-height: 48px; max-width: 200px; width: auto; height: auto; object-fit: contain; display: block; }
.nw-brandx__logo .nw-brand__logo-pre { color: var(--principale, #0C4E2B); font-family: var(--nw-serif, 'Lora', serif); font-weight: 800; font-size: 28px; }
.nw-brandx__logo .nw-brand__logo-suf { color: var(--amber, #E6A817); font-family: var(--nw-serif, 'Lora', serif); font-style: italic; font-weight: 700; font-size: 28px; }

/* h2 con specificità 0,2,0 + text-transform:none per battere .elementor-kit-6 h2 */
.nw-brandx .nw-brandx__name {
	font-family: var(--nw-serif, 'Lora', serif); font-weight: 700;
	font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.4px;
	color: #1a1a1a; text-transform: none; margin: 0 0 10px;
}
.nw-brandx__payoff {
	font-family: var(--nw-serif, 'Lora', serif); font-style: italic;
	font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35;
	color: var(--secondario, #7E9E8D); margin: 0 0 20px;
}
.nw-brandx__desc {
	font-family: var(--nw-sans, 'Lato', sans-serif);
	font-size: 16px; line-height: 1.72; color: #3a3a3a;
	max-width: 54ch; margin: 0 0 24px;
}
.nw-brandx__meta { margin: 0 0 26px; }
.nw-brandx__badge {
	display: inline-flex; align-items: center;
	background: var(--mist, #ECF1EE); color: var(--principale, #0C4E2B);
	font-size: 13px; font-weight: 700; letter-spacing: .2px;
	padding: 7px 15px; border-radius: 999px;
}

/* CTA outline — dichiara ANCHE -webkit-text-fill-color (il kit Elementor forza
   il colore dei link via text-fill e vince su color). box-sizing per sicurezza. */
.nw-brandx__cta {
	display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box;
	min-height: 48px; padding: 13px 26px; border-radius: 10px;
	border: 1.5px solid var(--principale, #0C4E2B);
	font-family: var(--nw-sans, 'Lato', sans-serif); font-weight: 700; font-size: 15px;
	color: var(--principale, #0C4E2B) !important; -webkit-text-fill-color: var(--principale, #0C4E2B);
	text-decoration: none; transition: background .15s ease, color .15s ease;
}
.nw-brandx__cta span { transition: transform .2s ease; }
.nw-brandx__cta:hover { background: var(--principale, #0C4E2B); color: #fff !important; -webkit-text-fill-color: #fff; }
.nw-brandx__cta:hover span { transform: translateX(4px); }
.nw-brandx__cta:focus-visible { outline: 2px solid var(--principale, #0C4E2B); outline-offset: 3px; }

/* ---- Colonna visual: UNA foto, nel suo formato ----
   Era un collage di tre card bianche ruotate costruito dai packshot di prodotti
   scelti a tendina. Ora è una foto sola caricata dal widget, che mantiene le
   proprie proporzioni: nessun aspect-ratio imposto, l'altezza la decide
   l'immagine. Il riquadro è solo la cornice arrotondata.
   Il ripiego automatico (--pack) è invece un packshot di prodotto: lì serve un
   riquadro definito, quadrato, con l'immagine contenuta e non ritagliata. */
.nw-brandx__visual {
	flex: 1 1 54%; margin: 0; align-self: center;
	max-width: clamp(380px, 46vw, 680px); width: 100%;
	border-radius: 22px; overflow: hidden; background: var(--mist, #ECF1EE);
	box-shadow: 0 20px 44px -24px rgba(12,78,43,.42);
}
.nw-brandx__visual img { width: 100%; height: auto; display: block; }
.nw-brandx__visual--pack { aspect-ratio: 1 / 1; }
.nw-brandx__visual--pack img { height: 100%; object-fit: contain; padding: 12%; box-sizing: border-box; }

/* ---- Mobile: colonna singola, visual SOTTO il testo ---- */
@media (max-width: 760px) {
	.nw-brandx,
	.nw-brandx:nth-child(even) { flex-direction: column; align-items: stretch; gap: 26px; }
	.nw-brandx__text,
	.nw-brandx__visual { flex: 1 1 auto; }
	.nw-brandx__desc { max-width: none; }
	.nw-brandx__visual { max-width: none; margin-top: 4px; }
	.nw-brandx__cta { width: 100%; justify-content: center; }
}


/* ============================================================================
   LISTING-PARITY — APPENDERE A: assets/css/nw-components.css
   ----------------------------------------------------------------------------
   Recensioni / FAQ / blog dei COMPONENTI CONDIVISI (nw_reviews_carousel,
   nw_faq_block, nw_related_posts_block) allineati allo stile della HOME su
   categoria / negozio / tag / brand / PDP.

   Le classi HOME (.nw-el-rev, .nw-el-post, .nw-el-faq__acc) NON sono toccate:
   qui si copiano le loro metriche ESATTE (da elementor-home.css) sulle classi
   nw-* dei componenti.

   ORDINE DI CARICO: nw-components.css è caricato DOPO style.css (dep
   'naturwaren-theme-style') → questi override vincono sulle vecchie regole
   .nw-revcard*/.nw-acc* di style.css a pari specificità. Su PDP, pdp-finito.css
   è caricato DOPO nw-components (dep 'nw-components') → i suoi .nw-pdp .nw-acc*
   restano prevalenti dove dichiarati: il «design finito» del PDP non regredisce.
   ============================================================================ */

/* ============================================================
   1) RECENSIONI (nw_reviews_carousel) = card .nw-el-rev della HOME
   ============================================================ */
/* Track = scroller orizzontale a scatti su tutte le larghezze (mobile = peek,
   desktop = ~3-4 card + sbirciata). Le frecce+dots le aggiunge nw-slider.js
   (engine [data-nw-carousel]). Vince su style.css .nw-revs__track (source order). */
.nw-revs__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 6px 4px 8px; margin: 0 -4px; scroll-padding-left: 4px;
}
.nw-revs__track::-webkit-scrollbar { display: none; }

/* Card bianca radius 18, padding 26/24, shadow-sm, min-height 210 (metriche HOME .nw-el-rev). */
.nw-revcard {
  scroll-snap-align: start; flex: 0 0 clamp(280px, 33.333%, 384px); max-width: none;
  background: #fff; border: 1px solid var(--nw-line, rgba(12,78,43,.14)); border-radius: 18px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 210px;
  box-shadow: var(--nw-shadow-sm, 0 4px 16px rgba(12,78,43,.07));
}
@media (max-width: 760px) { .nw-revcard { flex-basis: min(82vw, 340px); } }

/* Stelle amber (token #E6A817), fila da 5: piene amber + resto grigio chiaro. */
.nw-revcard__stars { color: #E6A817; letter-spacing: 2px; font-size: 15px; margin: 0; }
.nw-revcard__stars span { color: #DCE3DD; }

/* Testo recensione = Lora 18px (HOME .nw-el-rev__q). Vince su style.css (sans 14.5). */
.nw-revcard__text {
  flex: 1 1 auto; margin: 0;
  font-family: var(--nw-serif, 'Lora', serif); font-size: 18px; line-height: 1.5;
  color: var(--nw-ink, #1C2A20);
}

/* Firma: niente barra/divisore sopra (HOME .nw-el-rev__foot). Avatar rimosso (come HOME). */
.nw-revcard__foot { display: flex; align-items: baseline; gap: 8px; border-top: 0; padding-top: 0; margin-top: 4px; }
.nw-revcard__av { display: none; }
.nw-revcard__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-revcard__who strong { font-family: var(--nw-serif, 'Lora', serif); font-size: 15px; font-weight: 700; color: var(--nw-ink, #1C2A20); }
/* "✓ Acquisto verificato" muted, spunta verde (HOME .nw-el-rev__who span). */
.nw-revcard__verif { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 400; color: var(--nw-muted, #55645A); }
.nw-revcard__verif svg { color: var(--nw-forest, #0C4E2B); flex: 0 0 auto; }

/* ============================================================
   2) BLOG (nw_related_posts_block) = journal HOME → carosello
   ============================================================ */
/* La griglia diventa scroller orizzontale quando è marcata come carosello.
   .nw-blog__grid[data-nw-carousel] (0,2,0) vince sulle regole grid base/responsive. */
.nw-blog__grid[data-nw-carousel] {
  display: flex; grid-template-columns: none; gap: 22px;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 6px 4px 8px; margin: 0 -4px; scroll-padding-left: 4px;
}
.nw-blog__grid[data-nw-carousel]::-webkit-scrollbar { display: none; }
.nw-blog__grid[data-nw-carousel] > * { flex: 0 0 clamp(280px, 33.333%, 384px); scroll-snap-align: start; }
@media (max-width: 760px) { .nw-blog__grid[data-nw-carousel] > * { flex-basis: min(84vw, 340px); } }
/* La card .nw-bcard è già lo stile journal HOME (foto 16:10, pill, meta, titolo Lora,
   "Leggi l'articolo →" forest): non serve ridefinirla qui. */

/* ============================================================
   3) CONTROLLI CAROSELLO (nw-slider.js) stile HOME nelle sezioni listing
   ------------------------------------------------------------
   Frecce verdi tonde + pallini forest, visibili anche su DESKTOP (la HOME li
   mostra; il default del componente li teneva solo su mobile). Scoping
   .nw-revs/.nw-blog per non alterare gli altri caroselli (es. compare PDP).
   ============================================================ */
.nw-revs .nw-slider__ctrl, .nw-blog .nw-slider__ctrl { display: flex; }
.nw-revs .nw-slider__arrow, .nw-blog .nw-slider__arrow {
  width: 46px; height: 46px; background: var(--nw-forest, #0C4E2B); color: #fff;
  border-color: transparent; box-shadow: 0 12px 26px -10px rgba(12,40,24,.55);
}
.nw-revs .nw-slider__arrow:not([disabled]):hover, .nw-blog .nw-slider__arrow:not([disabled]):hover {
  background: var(--nw-forest-deep, #093A20); border-color: transparent;
}
.nw-revs .nw-slider__arrow svg, .nw-blog .nw-slider__arrow svg { width: 20px; height: 20px; }
.nw-revs .nw-slider__dot.is-active, .nw-blog .nw-slider__dot.is-active { background: var(--nw-forest, #0C4E2B); width: 20px; border-radius: 999px; }

/* ============================================================
   4) FAQ (nw_faq_block) = accordion HOME .nw-el-faq__acc
   ------------------------------------------------------------
   Via i «pallino verde a foglia» + il + a destra: card bianca radius 14 +
   shadow-sm, titolo Lora 600, tondo verde a SINISTRA che RUOTA a × quando aperto
   (come HOME/PDP). Scope .nw-faqsec: su PDP pdp-finito.css resta prevalente dove
   dichiarato (radius 18, padding summary, ecc.).
   ============================================================ */
/* pallino a foglia rimosso (la HOME non ce l'ha) */
.nw-faqsec .nw-acc__ico { display: none; }

.nw-faqsec .nw-acc {
  border: 1px solid var(--nw-line, rgba(12,78,43,.14)); border-radius: 14px;
  margin-bottom: 10px; box-shadow: var(--nw-shadow-sm, 0 4px 16px rgba(12,78,43,.07));
}
.nw-faqsec .nw-acc summary {
  gap: 12px; font-family: var(--nw-serif, 'Lora', serif); font-weight: 600; font-size: 16px;
  color: var(--nw-ink, #1C2A20); padding: 16px 20px;
}
.nw-faqsec .nw-acc summary:hover .nw-acc__name,
.nw-faqsec .nw-acc[open] summary .nw-acc__name { color: var(--nw-forest, #0C4E2B); }

/* + tondo verde a sinistra → ruota a × quando aperto */
.nw-faqsec .nw-acc__plus {
  order: -1; margin-left: 0; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px;
  background: var(--nw-mint, #CFE3D5); display: grid; place-items: center; color: var(--nw-forest, #0C4E2B);
  transition: transform .35s ease, background .35s ease; position: relative;
}
.nw-faqsec .nw-acc__plus::before, .nw-faqsec .nw-acc__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: currentColor; border-radius: 2px;
}
.nw-faqsec .nw-acc__plus::before { width: 12px; height: 2.2px; }
.nw-faqsec .nw-acc__plus::after  { width: 2.2px; height: 12px; opacity: 1; }
.nw-faqsec .nw-acc[open] .nw-acc__plus { transform: rotate(45deg); background: var(--nw-forest, #0C4E2B); color: #fff; }
.nw-faqsec .nw-acc[open] .nw-acc__plus::after { opacity: 1; } /* tiene la barra verticale → × (non −) */

.nw-faqsec .nw-acc__body {
  padding: 0 20px 18px; color: var(--nw-muted, #55645A); font-size: 14.5px; line-height: 1.65;
}

/* ---- Card strette (griglie 2 colonne su mobile ≤600px) ----
   Il footer prezzo+bottone non ci sta in riga: .nw-pcard__btn è white-space:nowrap
   e sborda dalla card (~24px a 164px di larghezza). Solo nelle griglie archivio:
   prezzo sopra, bottone a tutta larghezza. I rail/caroselli hanno card più larghe. */
@media (max-width: 600px) {
  .nw-grid .nw-pcard__foot { flex-wrap: wrap; }
  .nw-grid .nw-pcard__btn { flex: 1 1 100%; }
}

/* Sui dispositivi touch lo stato :hover si "incolla" al tocco: la seconda foto
   (cover, ambientata) sostituiva il packshot e la card sembrava zoomata dopo il
   tap — segnalato in ricerca ma valeva ovunque. Senza hover vero, niente crossfade. */
@media (hover: none) {
  .nw-pcard:hover .nw-pcard__media-hover,
  .nw-el-home .nw-el-rail .nw-pcard:hover .nw-pcard__media-hover { opacity: 0 !important; }
  .nw-pcard:hover .nw-pcard__media:has(.nw-pcard__media-hover) > img:not(.nw-pcard__media-hover),
  .nw-el-home .nw-el-rail .nw-pcard:hover .nw-pcard__media > img:not(.nw-pcard__media-hover) { opacity: 1 !important; }
}

/* Le recensioni non allungano le card: al massimo 6 righe, poi ellissi.
   Niente scorrimento interno alla card: su touch è invisibile e frustrante.
   Vale ovunque: PDP (.nw-review), home (.nw-el-rev__q), caroselli (.nw-revcard). */
.nw-review p, .nw-el-rev__q, .nw-revcard__text {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}