/* ============================================================================
   NEGOZIO / ARCHIVI PRODOTTO — extra CSS per l'archivio codato (redesign-category.php).
   Il negozio ora usa lo stesso archivio codato delle categorie (card .nw-pcard da style.css).
   Qui solo: selettore prodotti-per-pagina + controlli paginazione (feature nuova, shop).
   Caricato su shop/categorie/brand/tag via wp_enqueue_style('nw-shop-style').
   ============================================================================ */

/* Fix nome-bianco: spostato GLOBALE in style.css (.nw-pcard__name) — vale anche su ricerca/rail/wishlist. */

/* --- selettore "Per pagina" nella top-bar (accanto a "Ordina per") --- */
.nw-archive .nw-results__perpage{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--nw-muted,#5c6b60); white-space:nowrap;
}
.nw-archive .nw-results__perpage select{
  border:1px solid var(--nw-line,#e2e6df); border-radius:999px; padding:6px 30px 6px 12px;
  font:inherit; font-weight:700; color:var(--nw-ink,#1a2a20); background:#fff; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230C4E2B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.nw-archive .nw-results__perpage select:focus-visible{ outline:2px solid var(--nw-forest,#0C4E2B); outline-offset:2px; }

/* --- paginazione --- */
.nw-archive .nw-pagination-wrap{ display:flex; justify-content:center; margin:36px 0 8px; }
.nw-archive .nw-pagination{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nw-archive .nw-pagination__num,
.nw-archive .nw-pagination__arrow{
  min-width:40px; height:40px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--nw-line,#e2e6df); border-radius:12px; background:#fff;
  font-family:var(--nw-serif,'Lora',Georgia,serif); font-size:15px; font-weight:700; color:var(--nw-ink,#1a2a20);
  cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nw-archive .nw-pagination__num:hover,
.nw-archive .nw-pagination__arrow:hover:not([disabled]){
  border-color:var(--nw-forest,#0C4E2B); color:var(--nw-forest,#0C4E2B);
}
.nw-archive .nw-pagination__num.is-active{
  background:var(--nw-forest,#0C4E2B); border-color:var(--nw-forest,#0C4E2B); color:#fff; cursor:default;
  box-shadow:0 10px 22px -12px rgba(12,78,43,.5);
}
.nw-archive .nw-pagination__arrow[disabled]{ opacity:.4; cursor:not-allowed; }
.nw-archive .nw-pagination__gap{ padding:0 4px; color:var(--nw-muted,#8a958c); font-weight:700; align-self:flex-end; }

@media (max-width:600px){
  .nw-archive .nw-pagination__num,
  .nw-archive .nw-pagination__arrow{ min-width:36px; height:36px; font-size:14px; }
}

/* ============================================================================
   SHOP: parte dal catalogo (hero + trust rimossi) → head centrato con respiro.
   ============================================================================ */
.nw-archive .nw-catalog-head--shop{
  text-align:center; max-width:820px; margin:0 auto;
  padding:52px 24px 6px !important;
}
.nw-archive .nw-catalog-head--shop .nw-sec__title{ margin-top:10px; }
.nw-archive .nw-catalog-head__payoff{
  max-width:720px; margin:14px auto 0; font-size:18px; line-height:1.45; color:var(--nw-ink,#16241b);
}
.nw-archive .nw-catalog-head__payoff + .nw-catalog-head__sub{ margin-top:10px; }
.nw-archive .nw-catalog-head__sub{
  max-width:640px; margin:16px auto 0; font-size:15.5px; line-height:1.6; color:var(--nw-muted,#5c6b60);
}
@media (max-width:640px){
  .nw-archive .nw-catalog-head__payoff{ font-size:16px; }
}

/* ============================================================================
   FACET DROPDOWN (Categorie/Brand/Pianta/Prezzo): più aria + polish.
   Scoped .nw-archive → migliora sia il negozio sia le pagine categoria.
   ============================================================================ */
/* respiro verticale della top-bar + non "attaccata" ai bordi (padding laterale maggiore) */
.nw-archive .nw-cattop{ padding:20px 32px !important; gap:18px; }
.nw-archive .nw-cattop__facets{ gap:10px; }
/* pill dei facet: un filo più grandi, hover/active più netti */
.nw-archive .nw-dd__btn{ padding:10px 18px; border-radius:999px; transition:border-color .18s ease, background .18s ease, color .18s ease; }
.nw-archive .nw-dd__btn:hover{ background:var(--nw-sage-tint,#eef4ea); }
/* panel: più morbido, più aria, non incollato al bottone */
.nw-archive .nw-dd__panel{
  padding:10px 10px !important; min-width:280px !important; border-radius:16px !important;
  top:calc(100% + 10px) !important; box-shadow:0 24px 54px -22px rgba(20,42,35,.38) !important;
}
.nw-archive .nw-dd__panel .nw-filter-list{ gap:2px; }
.nw-archive .nw-dd__panel .nw-filter{ padding:10px 12px; border-radius:10px; font-size:14.5px; }
.nw-archive .nw-dd__panel .nw-filter__count{ margin-left:auto; color:var(--nw-muted,#9aa3a0); font-size:12.5px; }
/* se il panel dell'ultimo facet rischia di uscire a destra, ancoralo a destra */
.nw-archive .nw-dd[data-dd="prezzo"] .nw-dd__panel{ left:auto; right:0; }

@media (max-width:900px){
  .nw-archive .nw-cattop{ padding:16px 20px !important; }
}

/* ============================================================================
   LOADER filtri/paginazione: oggi .nw-grid__loader e' solo `height:3px` senza
   colore/animazione (invisibile) -> l'unico segnale di caricamento e' il fade
   della griglia, che senza una barra sembra "bloccato" invece che "in corso".
   Barra indeterminata sottile, sopra la griglia (position:relative su .nw-results
   gia' implicito dal layout a colonna -> qui basta position:absolute sul loader).
   ============================================================================ */
.nw-archive .nw-results{ position:relative; }
.nw-archive .nw-grid__loader{
  position:absolute; top:-1px; left:0; right:0; height:3px; overflow:hidden;
  border-radius:999px; background:var(--nw-line,#e2e6df);
}
.nw-archive .nw-grid__loader::before{
  content:""; position:absolute; top:0; bottom:0; left:-30%; width:30%;
  background:var(--nw-forest,#0C4E2B); border-radius:inherit;
  animation:nw-grid-loader 1.1s ease-in-out infinite;
}
@keyframes nw-grid-loader{
  0%   { left:-30%; }
  100% { left:100%; }
}
@media (prefers-reduced-motion:reduce){
  .nw-archive .nw-grid__loader::before{ animation:none; left:0; width:100%; opacity:.5; }
}

/* ============================================================================
   FILTRI: Reimposta + Ordina per vivono ora in cima alla sidebar (sopra
   Categorie) invece che in una barra a pillole separata sopra la griglia —
   così i filtri stanno tutti in un'unica colonna a sinistra.
   ============================================================================ */
.nw-archive .nw-filters__top{
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--nw-line,#e2e6df);
}
/* Reimposta sopra, "Ordina per" + box sotto a piena larghezza: nella colonna
   stretta della sidebar in riga il select si schiacciava e "Più venduti" veniva
   tagliato a "Più vend". */
.nw-archive .nw-filters__top .nw-results__reset{ align-self:flex-start; }
.nw-archive .nw-filters__top .nw-results__sort{ width:100%; justify-content:space-between; }
.nw-archive .nw-filters__top .nw-results__sort select{ flex:1 1 auto; min-width:0; }

/* Sotto i 1024px la sidebar diventa un drawer chiuso di default (style.css) — la
   copia di Reimposta/Ordina dentro .nw-filters__top non sarebbe raggiungibile
   senza aprire i filtri. Mostriamo invece la copia nella top bar (nascosta sopra
   i 1024px) e nascondiamo quella nella sidebar per non duplicarla nel drawer. */
.nw-archive .nw-cattop__right--mobile-only{ display:none; }
/* Il reset Elementor '[type="button"]{display:inline-block}' pareggia la specificità
   di '[hidden]{display:none}' e vince per ordine: senza questo, "Reimposta"
   resta visibile anche ad archivio senza filtri attivi. */
.nw-archive [data-nw-reset][hidden]{ display:none !important; }
@media (max-width:1024px){
  .nw-archive .nw-cattop__right--mobile-only{ display:flex; }
  .nw-archive .nw-filters .nw-filters__top{ display:none; }
}

/* ============================================================================
   "Per pagina" vive nella TOP-BAR (.nw-cattop), a destra accanto al conteggio;
   in fondo alla griglia resta solo la paginazione centrata (.nw-pagination-wrap).
   Sotto i 1024px il blocco Reimposta/Ordina ha già margin-left:auto: lì il
   selettore si accoda senza un secondo auto-margin (si spartirebbero lo spazio).
   ============================================================================ */
.nw-archive .nw-cattop .nw-results__perpage{ margin-left:auto; }
@media (max-width:1024px){
  /* Top-bar mobile ordinata: riga 1 = conteggio + bottone Filtri a destra;
     sotto, "Ordina per" e "Per pagina" ciascuno su una riga PIENA con label
     a sinistra (nowrap, larghezza comune → select allineate) e select che
     riempie. Senza: Filtri galleggiava, "Ordina per" andava a capo su due
     righe col rientro del margin-left:auto, "Per pagina" era orfano. */
  .nw-archive .nw-cattop{ row-gap:10px; }
  .nw-archive .nw-mfilters-btn{ margin-left:auto; }
  .nw-archive .nw-cattop__right--mobile-only{ margin-left:0; flex:1 1 100%; gap:10px; }
  .nw-archive .nw-cattop__right--mobile-only .nw-results__sort{ flex:1; }
  .nw-archive .nw-cattop .nw-results__perpage{ margin-left:0; flex:1 1 100%; }
  /* display:grid con colonna label fissa: il testo della label è un item anonimo
     → le due select partono ESATTAMENTE allo stesso x, qualunque sia la label. */
  .nw-archive .nw-cattop .nw-results__sort,
  .nw-archive .nw-cattop .nw-results__perpage{ display:grid; grid-template-columns:80px 1fr; align-items:center; gap:0 8px; white-space:nowrap; }
  .nw-archive .nw-cattop .nw-results__sort > select,
  .nw-archive .nw-cattop .nw-results__perpage > select{ width:100%; min-width:0; }
}

/* ============================================================================
   BANNER B2B Farmacisti — sostituisce il vecchio box tratteggiato .nw-b2b su
   shop/categorie/tag. Banda verde compatta: testo a sinistra, CTA a destra,
   caduceo come filigrana. Path immagine relativo a assets/css/ → ../img/…
   ============================================================================ */
.nw-probanner{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  background:linear-gradient(115deg,#0C4E2B 0%,#093A20 100%);
  border-radius:20px; padding:32px 40px;
  box-shadow:0 18px 40px -24px rgba(9,58,32,.55);
}
.nw-probanner__deco{
  position:absolute; right:-8px; top:50%; transform:translateY(-50%);
  width:220px; height:220px; pointer-events:none;
  background:url("../img/deco/farmacia-caduceo.webp?v=323") center/contain no-repeat;
  opacity:.10;
}
.nw-probanner__text{ position:relative; flex:1 1 420px; min-width:0; }
.nw-probanner__tag{
  display:inline-block; background:rgba(255,255,255,.14); color:#CFE3D5;
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:12px;
}
/* Specificità 0,2,0 per battere .elementor-kit-6 h2 (0,1,1) che forzerebbe
   verde scuro + maiuscolo + 45px sul titolo. */
.nw-probanner .nw-probanner__title{
  font-family:'Lora',serif; font-weight:700; font-size:clamp(21px,2vw,27px);
  color:#fff; margin:0 0 6px; line-height:1.15; text-transform:none;
}
.nw-probanner__sub{ color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.55; margin:0; max-width:640px; }
.nw-probanner__cta{
  position:relative; flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  background:#E6A817; color:#0C4E2B !important; -webkit-text-fill-color:#0C4E2B;
  font-weight:700; font-size:15px; padding:14px 26px; border-radius:999px; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nw-probanner__cta:hover{ background:#f0b62e; transform:translateY(-1px); box-shadow:0 12px 24px -12px rgba(230,168,23,.65); }
@media (max-width:760px){
  .nw-probanner{ padding:26px 22px; gap:16px; }
  .nw-probanner__cta{ width:100%; justify-content:center; }
  .nw-probanner__deco{ display:none; }
}


/* ============================================================================
   APPROFONDIMENTO categoria (#nw-cat-approfondimento) — redisegno editoriale v2.
   Banda carta full-bleed (la sezione .nw-approf vive dentro .nw-archive, che e'
   iniettato a wp_body_open => gia' a tutta larghezza viewport: basta lo sfondo).
   Corpo su 2 colonne asimmetriche: testo editoriale (misura ~65ch, lead serif,
   capolettera) a sx; card "In sintesi" + "Il consiglio" (eyebrow + cerchietti
   menta, sticky SOLO desktop) a dx. Variante single-column (.nw-approf--single)
   per le categorie non-topiche: colonna centrata max 720px, stessa cura.
   Tutte le classi prefisso .nw-approf. Scoping .nw-approf per specificita'.
   ============================================================================ */

/* ---- banda carta full-bleed (override del .nw-sec bianco/60px) ---- */
.nw-approf{
  background: var(--carta, #FAF8F3);
  border-top: 1px solid var(--nw-line, rgba(12,78,43,.14));
  border-bottom: 1px solid var(--nw-line, rgba(12,78,43,.14));
  padding: clamp(64px, 8vw, 104px) 0;
  /* clip e non hidden: hidden farebbe da scroll-container e ucciderebbe lo sticky della sidebar */
  overflow: clip;
}
/* inner: colonna editoriale piu' stretta del 1600px di .nw-sec__inner.
   Tengo .nw-sec__inner nel markup per la decorazione edera del termine
   muscoli-e-articolazioni (aggancia #nw-cat-approfondimento .nw-sec__inner). */
.nw-approf .nw-approf__inner{ max-width: 1080px; }

/* ---- testata centrata (eyebrow canonico + titolo + filetto menta) ---- */
.nw-approf__head{
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(38px, 4.6vw, 58px);
}
.nw-approf__head .nw-sec__eyebrow{ margin-bottom: 14px; }
/* h2: specificita' 0,2,0 + !important per battere .elementor-kit-6 h2 (verde/45px/UPPER). */
.nw-approf__title{
  font-family: var(--nw-serif, 'Lora', Georgia, serif);
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.014em;
  text-transform: none !important;
  color: var(--nw-ink, #1C2A20) !important;
  text-wrap: balance;
  margin: 0;
}
.nw-approf__title em{
  font-style: italic;
  color: var(--nw-forest, #0C4E2B);
}
/* filetto menta: chiude la testata, apre la lettura */
.nw-approf__head::after{
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: var(--nw-mint, #CFE3D5);
  margin: 24px auto 0;
}

/* ---- griglia 2 colonne asimmetriche, gap editoriale generoso ---- */
.nw-approf__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: start;
}
/* variante senza box sintesi: colonna singola elegante, max 720px centrata
   (il body da 65ch si centra nel suo track) */
.nw-approf--single .nw-approf__inner{ max-width: 720px; }
.nw-approf--single .nw-approf__grid{ grid-template-columns: 1fr; }
.nw-approf--single .nw-approf__body{ margin-inline: auto; }

/* ---- corpo redazionale: misura ~65ch, 1.7, gerarchia netta ---- */
.nw-approf__body{
  max-width: 65ch;
  font-family: var(--nw-sans, 'Lato', system-ui, sans-serif);
  color: #39423c;
}
.nw-approf__body p{
  font-size: 16.5px;
  line-height: 1.7;
  margin: 0 0 1.35em;
}
.nw-approf__body p:last-child{ margin-bottom: 0; }
/* lead: primo paragrafo serif in evidenza (attacco editoriale, inchiostro pieno) */
.nw-approf__body > p:first-of-type{
  font-family: var(--nw-serif, 'Lora', Georgia, serif);
  font-size: clamp(18.5px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--nw-ink, #1C2A20);
  margin-bottom: 1.5em;
}
/* capolettera Lora forest sul lead (fallback e copy iniziano con <p>): float
   tarato in em (scala col lead, niente override mobile) + progressive
   enhancement initial-letter dove supportato = cap-height/baseline allineate
   senza sbavature di float. */
.nw-approf__body > p:first-of-type::first-letter{
  float: left;
  font-family: var(--nw-serif, 'Lora', Georgia, serif);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .82;
  padding: .05em .13em 0 0;
  color: var(--nw-forest, #0C4E2B);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3){
  .nw-approf__body > p:first-of-type::first-letter{
    float: none;
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-size: 1em;   /* la dimensione la governa initial-letter */
    line-height: 1;
    padding: 0 .14em 0 0;
    margin: 0;
  }
}
/* sottotitoli interni h3 in Lora (specificita' 0,3,0, text-transform esplicito) */
.nw-approf .nw-approf__body h3{
  font-family: var(--nw-serif, 'Lora', Georgia, serif);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 23px);
  line-height: 1.28;
  letter-spacing: -.008em;
  color: var(--nw-ink, #1C2A20);
  text-transform: none;
  margin: 2.1em 0 .6em;
}
.nw-approf .nw-approf__body h3:first-child{ margin-top: 0; }
.nw-approf__body ul,
.nw-approf__body ol{
  font-size: 16.5px;
  line-height: 1.7;
  margin: 0 0 1.35em;
  padding-left: 1.3em;
}
.nw-approf__body li{ margin-bottom: .45em; }
.nw-approf__body li::marker{ color: var(--nw-sage, #7E9E8D); }
.nw-approf__body strong{ color: var(--nw-ink, #1C2A20); font-weight: 700; }
/* link: -webkit-text-fill-color oltre a color (il kit forza il fill sui <a>) */
.nw-approf__body a{
  color: var(--nw-forest, #0C4E2B) !important;
  -webkit-text-fill-color: var(--nw-forest, #0C4E2B);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(12,78,43,.35);
}
.nw-approf__body a:hover{ text-decoration-thickness: 2px; text-decoration-color: var(--nw-forest, #0C4E2B); }

/* ---- colonna laterale: card "In sintesi" + micro-card "Il consiglio" ---- */
.nw-approf__side{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* sticky SOLO desktop (stesso pattern/offset di .nw-filters in nw-components):
   MAI globale — una sticky fuori media query ha gia' rotto il drawer mobile. */
@media (min-width: 1025px){
  .nw-approf__side{ align-self: start; } /* niente sticky: body{overflow-x:hidden} globale lo neutralizza (scroll container) */
}
.nw-approf__card{
  background: #fff;
  border: 1px solid rgba(12,78,43,.10);
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 12px 32px -20px rgba(12,78,43,.22);
}
/* titoletto card = eyebrow (Lato maiuscolo spaziato) + icona in cerchietto menta.
   Specificita' 0,2,0 + proprieta' esplicite per battere gli h3 del kit Elementor. */
.nw-approf .nw-approf__card-title{
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--nw-sans, 'Lato', system-ui, sans-serif);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--nw-forest, #0C4E2B);
  margin: 0 0 18px;
}
.nw-approf__card-ico{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--nw-mint, #CFE3D5);
  color: var(--nw-forest, #0C4E2B);
}
.nw-approf__card-ico svg{ width: 16px; height: 16px; display: block; }

/* lista sintesi: righe con filetti sottili, etichetta sopra e descrizione sotto */
.nw-approf__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.nw-approf__item{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 11px 0;
}
.nw-approf__item + .nw-approf__item{ border-top: 1px solid rgba(12,78,43,.08); }
.nw-approf__item:first-child{ padding-top: 0; }
.nw-approf__item:last-child{ padding-bottom: 0; }
.nw-approf__item-ico{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--nw-mint, #CFE3D5);
  color: var(--nw-forest, #0C4E2B);
  margin-top: 2px;
}
.nw-approf__item-ico svg{ width: 16px; height: 16px; display: block; }
.nw-approf__item-txt{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nw-muted, #55645A);
}
.nw-approf__item-txt strong{
  display: block;
  font-size: 14.5px;
  color: var(--nw-ink, #1C2A20);
  font-weight: 700;
}

/* micro-card "Il consiglio": lavaggio menta + consiglio in corsivo serif */
.nw-approf__card--tip{
  background: linear-gradient(160deg, #EAF3ED 0%, #E0EDE5 100%);
  border-color: rgba(12,78,43,.12);
  box-shadow: none;
}
.nw-approf__card--tip .nw-approf__card-ico{ background: #fff; }
.nw-approf__tip{
  font-family: var(--nw-serif, 'Lora', Georgia, serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.65;
  color: #2e3b33;
}
.nw-approf__tip p{ margin: 0 0 .7em; }
.nw-approf__tip p:last-child{ margin-bottom: 0; }

/* ---- responsive: <=900px stack pulito (card DOPO il testo, gia' in DOM) ---- */
@media (max-width: 900px){
  .nw-approf__grid{ grid-template-columns: 1fr; gap: 34px; }
  .nw-approf__body{ max-width: none; }
}
@media (max-width: 760px){
  .nw-approf{ padding: clamp(46px, 11vw, 64px) 0; }
  .nw-approf__head{ margin-bottom: 30px; }
  .nw-approf__head::after{ margin-top: 18px; }
  .nw-approf__body p{ font-size: 16px; }
  .nw-approf__body > p:first-of-type{ font-size: 18px; }
  .nw-approf__card{ padding: 22px 20px; }
}


/* ============================================================
   FEATURE TILE — "prodotto in evidenza" dentro la griglia archivio
   APPENDERE A: assets/css/shop.css
   Markup: inc/redesign-blocks.php -> nw_feature_tile()
   Inserimento: inc/redesign-category.php -> nw_cat_render_grid()
   La griglia .nw-grid (style.css) è repeat(3,1fr) desktop / 2 col ≤1024.
   La tile è ADDITIVA e occupa 2 colonne × 1 riga: "sorella maggiore"
   delle .nw-pcard (stesso fondo chiaro, bordo, radius 18px), NON un banner.
   ============================================================ */

/* La tile 2×1 può lasciare un buco a fine riga: "dense" fa risalire le card
   a riempirlo. Senza tile la regola non scatta → griglia identica a prima. */
.nw-grid:has(.nw-ftile) { grid-auto-flow: dense; }

/* Card orizzontale: 2 colonne × 1 riga (alta quanto una card), testo a
   sinistra centrato in verticale, packshot DRITTO nella metà destra su
   lavaggio mint delicato (radial dietro la foto). */
.nw-ftile {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  border: 1px solid var(--nw-line, rgba(12, 78, 43, .14));
  border-radius: 18px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  background:
    radial-gradient(52% 78% at 78% 52%, rgba(207, 227, 213, .65) 0%, rgba(207, 227, 213, 0) 72%),
    var(--carta, #FAF8F3);
  box-shadow: var(--nw-shadow-sm, 0 4px 16px rgba(12, 78, 43, .07));
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
/* hover coerente con le .nw-pcard: lift + bordo sage, niente ombroni */
.nw-ftile:hover {
  transform: translateY(-4px);
  border-color: var(--secondario, #7E9E8D);
  box-shadow: var(--nw-shadow, 0 10px 34px rgba(12, 78, 43, .09));
}

.nw-ftile__content {
  flex: 1 1 55%;
  min-width: 0;
}

/* eyebrow: micro-label uppercase forest, niente pillola (meno "adv") */
.nw-ftile__eyebrow {
  display: block;
  color: var(--nw-forest, #0C4E2B);
  font: 800 11px/1.4 'Lato', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Titolo Lora ink: batte `.elementor-kit-6 h2` (spec 0,1,1) con 0,2,0 + text-transform:none.
   -webkit-text-fill-color esplicito per sicurezza (il kit lo forza altrove). */
.nw-ftile .nw-ftile__title {
  margin: 10px 0 8px;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--nw-ink, #1a1a1a);
  -webkit-text-fill-color: var(--nw-ink, #1a1a1a);
  text-transform: none;
}

.nw-ftile__sub {
  margin: 0 0 18px;
  max-width: 40ch;
  color: var(--nw-muted, #55645A);
  font: 400 14.5px/1.55 'Lato', system-ui, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* riga prezzo + CTA, come il footer delle card */
.nw-ftile__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}

/* prezzo stile card: Lora bold forest, del/ins come .nw-pcard__price */
.nw-ftile__price {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--nw-forest, #0C4E2B);
}
.nw-ftile__price del { color: #b9bdc2; font-weight: 400; font-size: 15px; margin-right: 6px; }
.nw-ftile__price ins { text-decoration: none; }

/* CTA pillola FOREST piena (bianco su #0C4E2B, come gli "Aggiungi" a stato
   pieno). È un <a>, quindi il reset `button:hover{background:transparent}`
   del tema non la tocca. Il kit Elementor forza -webkit-text-fill-color sui
   <a>: dichiararlo dello stesso colore del testo o la scritta sparirebbe;
   color !important contro le regole che forzano i link. */
a.nw-ftile__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--nw-forest, #0C4E2B);
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font: 700 14px/1 'Lato', system-ui, sans-serif;
  text-decoration: none;
  transition: background .2s ease;
}
.nw-ftile__arrow {
  font-size: 1.05em;
  transition: transform .2s ease;
}
.nw-ftile:hover a.nw-ftile__cta,
a.nw-ftile__cta:hover { background: #093A20; }
.nw-ftile:hover .nw-ftile__arrow { transform: translateX(3px); }

/* Packshot DRITTO (niente rotazione) centrato nella metà destra, ombra minima */
.nw-ftile__img {
  flex: 0 0 auto;
  width: clamp(180px, 38%, 300px);
  max-height: 300px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(12, 78, 43, .12));
  transition: transform .3s ease;
}
.nw-ftile:hover .nw-ftile__img { transform: scale(1.03); }

/* ---- Mobile ≤760: riga intera (la griglia resta a 2 colonne), impilato:
   testo sopra, foto sotto NON tagliata, lavaggio mint spostato dietro la foto ---- */
@media (max-width: 760px) {
  .nw-ftile {
    grid-column: span 2;
    grid-row: auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 22px 20px;
    background:
      radial-gradient(72% 46% at 50% 82%, rgba(207, 227, 213, .65) 0%, rgba(207, 227, 213, 0) 75%),
      var(--carta, #FAF8F3);
  }
  .nw-ftile__content { flex: 0 0 auto; max-width: 100%; }
  .nw-ftile .nw-ftile__title { font-size: 22px; margin: 10px 0 8px; }
  .nw-ftile__sub { margin-bottom: 16px; font-size: 14px; }
  .nw-ftile__img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 220px;
    margin: 18px auto 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nw-ftile,
  a.nw-ftile__cta,
  .nw-ftile__arrow,
  .nw-ftile__img { transition: none; }
}

/* ============================================================================
   RECENSIONI + BLOG sugli archivi (categorie/shop/tag/brand) = REPLICA 1:1
   dei caroselli della HOME (nw-el-revs / nw-el-journal, elementor-home.css):
   - testata CENTRATA;
   - track full-bleed con "peek" clamp(20px,3.5vw,48px) e gap 20;
   - card a TERZI di viewport ≥1100 (3 piene + sbirciata), metà su tablet;
   - dots pillola forest, frecce = cerchio VERDE 46px ai bordi del viewport;
   - senza overflow → track centrato e controlli nascosti (come in home).
   NB: peek in px/vw (mai %): le % di padding e scroll-padding hanno basi
   diverse (contenitore vs scrollport) e lo snap tirerebbe la card al bordo.
   ============================================================================ */
body.tax-product_cat .nw-revs .nw-sec__head,
body.tax-product_tag .nw-revs .nw-sec__head,
body.tax-product_brand .nw-revs .nw-sec__head,
body.post-type-archive-product .nw-revs .nw-sec__head,
body.tax-product_cat .nw-blog .nw-sec__head,
body.tax-product_tag .nw-blog .nw-sec__head,
body.tax-product_brand .nw-blog .nw-sec__head,
body.post-type-archive-product .nw-blog .nw-sec__head{
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px;
}

body.tax-product_cat .nw-revs__track,
body.tax-product_tag .nw-revs__track,
body.tax-product_brand .nw-revs__track,
body.post-type-archive-product .nw-revs__track,
body.tax-product_cat .nw-blog__grid[data-nw-carousel],
body.tax-product_tag .nw-blog__grid[data-nw-carousel],
body.tax-product_brand .nw-blog__grid[data-nw-carousel],
body.post-type-archive-product .nw-blog__grid[data-nw-carousel]{
  --nw-peek: clamp(20px, 3.5vw, 48px);
  --nw-gap: 20px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 6px var(--nw-peek) 8px;
  scroll-padding-inline: var(--nw-peek);
  gap: var(--nw-gap);
}
/* card a terzi del viewport come in home (≥1100), a metà su tablet */
@media (min-width:1100px){
  body.tax-product_cat .nw-revs__track .nw-revcard,
  body.tax-product_tag .nw-revs__track .nw-revcard,
  body.tax-product_brand .nw-revs__track .nw-revcard,
  body.post-type-archive-product .nw-revs__track .nw-revcard,
  body.tax-product_cat .nw-blog__grid[data-nw-carousel] > *,
  body.tax-product_tag .nw-blog__grid[data-nw-carousel] > *,
  body.tax-product_brand .nw-blog__grid[data-nw-carousel] > *,
  body.post-type-archive-product .nw-blog__grid[data-nw-carousel] > *{
    flex: 0 0 calc((100vw - 2*var(--nw-peek) - 2*var(--nw-gap))/3);
    max-width: calc((100vw - 2*var(--nw-peek) - 2*var(--nw-gap))/3);
  }
}
@media (min-width:768px) and (max-width:1099px){
  body.tax-product_cat .nw-revs__track .nw-revcard,
  body.tax-product_tag .nw-revs__track .nw-revcard,
  body.tax-product_brand .nw-revs__track .nw-revcard,
  body.post-type-archive-product .nw-revs__track .nw-revcard,
  body.tax-product_cat .nw-blog__grid[data-nw-carousel] > *,
  body.tax-product_tag .nw-blog__grid[data-nw-carousel] > *,
  body.tax-product_brand .nw-blog__grid[data-nw-carousel] > *,
  body.post-type-archive-product .nw-blog__grid[data-nw-carousel] > *{
    flex: 0 0 calc((100vw - 2*var(--nw-peek) - 1*var(--nw-gap))/2);
    max-width: calc((100vw - 2*var(--nw-peek) - 1*var(--nw-gap))/2);
  }
}
/* senza overflow → controlli nascosti (in nw-components la coppia .nw-revs/.nw-blog
   forza ctrl visibile anche da static: qui vince la replica del comportamento home) */
body.tax-product_cat .nw-revs .nw-slider--static .nw-slider__ctrl,
body.tax-product_tag .nw-revs .nw-slider--static .nw-slider__ctrl,
body.tax-product_brand .nw-revs .nw-slider--static .nw-slider__ctrl,
body.post-type-archive-product .nw-revs .nw-slider--static .nw-slider__ctrl,
body.tax-product_cat .nw-blog .nw-slider--static .nw-slider__ctrl,
body.tax-product_tag .nw-blog .nw-slider--static .nw-slider__ctrl,
body.tax-product_brand .nw-blog .nw-slider--static .nw-slider__ctrl,
body.post-type-archive-product .nw-blog .nw-slider--static .nw-slider__ctrl{
  display:none;
}
/* senza overflow (es. blog con 3 articoli) → tutte visibili e centrate, come in home */
body.tax-product_cat .nw-slider--static .nw-revs__track,
body.tax-product_tag .nw-slider--static .nw-revs__track,
body.tax-product_brand .nw-slider--static .nw-revs__track,
body.post-type-archive-product .nw-slider--static .nw-revs__track,
body.tax-product_cat .nw-slider--static .nw-blog__grid[data-nw-carousel],
body.tax-product_tag .nw-slider--static .nw-blog__grid[data-nw-carousel],
body.tax-product_brand .nw-slider--static .nw-blog__grid[data-nw-carousel],
body.post-type-archive-product .nw-slider--static .nw-blog__grid[data-nw-carousel]{
  justify-content: center;
}
/* dots pillola come in home */
body.tax-product_cat .nw-revs .nw-slider__dot, body.tax-product_cat .nw-blog .nw-slider__dot,
body.tax-product_tag .nw-revs .nw-slider__dot, body.tax-product_tag .nw-blog .nw-slider__dot,
body.tax-product_brand .nw-revs .nw-slider__dot, body.tax-product_brand .nw-blog .nw-slider__dot,
body.post-type-archive-product .nw-revs .nw-slider__dot, body.post-type-archive-product .nw-blog .nw-slider__dot{
  width:7px; height:7px; border-radius:999px; border:0; padding:0;
  background:rgba(12,78,43,.25); cursor:pointer; transition:width .2s, background .2s;
}
body.tax-product_cat .nw-revs .nw-slider__dot.is-active, body.tax-product_cat .nw-blog .nw-slider__dot.is-active,
body.tax-product_tag .nw-revs .nw-slider__dot.is-active, body.tax-product_tag .nw-blog .nw-slider__dot.is-active,
body.tax-product_brand .nw-revs .nw-slider__dot.is-active, body.tax-product_brand .nw-blog .nw-slider__dot.is-active,
body.post-type-archive-product .nw-revs .nw-slider__dot.is-active, body.post-type-archive-product .nw-blog .nw-slider__dot.is-active{
  width:20px; background:var(--nw-forest,#0C4E2B);
}
/* frecce = cerchio verde pieno ai bordi del viewport (replica .nw-cx-nav home) */
body.tax-product_cat .nw-revs .nw-slider, body.tax-product_cat .nw-blog .nw-slider,
body.tax-product_tag .nw-revs .nw-slider, body.tax-product_tag .nw-blog .nw-slider,
body.tax-product_brand .nw-revs .nw-slider, body.tax-product_brand .nw-blog .nw-slider,
body.post-type-archive-product .nw-revs .nw-slider, body.post-type-archive-product .nw-blog .nw-slider{
  position:relative;
}
body.tax-product_cat .nw-revs .nw-slider__arrow, body.tax-product_cat .nw-blog .nw-slider__arrow,
body.tax-product_tag .nw-revs .nw-slider__arrow, body.tax-product_tag .nw-blog .nw-slider__arrow,
body.tax-product_brand .nw-revs .nw-slider__arrow, body.tax-product_brand .nw-blog .nw-slider__arrow,
body.post-type-archive-product .nw-revs .nw-slider__arrow, body.post-type-archive-product .nw-blog .nw-slider__arrow{
  position:absolute; z-index:5; top:calc(50% - 34px); 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;
}
body.tax-product_cat .nw-revs .nw-slider__arrow:hover, body.tax-product_cat .nw-blog .nw-slider__arrow:hover,
body.tax-product_tag .nw-revs .nw-slider__arrow:hover, body.tax-product_tag .nw-blog .nw-slider__arrow:hover,
body.tax-product_brand .nw-revs .nw-slider__arrow:hover, body.tax-product_brand .nw-blog .nw-slider__arrow:hover,
body.post-type-archive-product .nw-revs .nw-slider__arrow:hover, body.post-type-archive-product .nw-blog .nw-slider__arrow:hover{
  background:#0a3f23; transform:translateY(-50%) scale(1.09);
  box-shadow:0 16px 34px -10px rgba(12,40,24,.7);
}
body.tax-product_cat .nw-revs .nw-slider__arrow svg, body.tax-product_cat .nw-blog .nw-slider__arrow svg,
body.tax-product_tag .nw-revs .nw-slider__arrow svg, body.tax-product_tag .nw-blog .nw-slider__arrow svg,
body.tax-product_brand .nw-revs .nw-slider__arrow svg, body.tax-product_brand .nw-blog .nw-slider__arrow svg,
body.post-type-archive-product .nw-revs .nw-slider__arrow svg, body.post-type-archive-product .nw-blog .nw-slider__arrow svg{
  width:20px; height:20px; display:block;
}
body.tax-product_cat .nw-revs .nw-slider__arrow--prev, body.tax-product_cat .nw-blog .nw-slider__arrow--prev,
body.tax-product_tag .nw-revs .nw-slider__arrow--prev, body.tax-product_tag .nw-blog .nw-slider__arrow--prev,
body.tax-product_brand .nw-revs .nw-slider__arrow--prev, body.tax-product_brand .nw-blog .nw-slider__arrow--prev,
body.post-type-archive-product .nw-revs .nw-slider__arrow--prev, body.post-type-archive-product .nw-blog .nw-slider__arrow--prev{
  left:calc(50% - 50vw + 16px);
}
body.tax-product_cat .nw-revs .nw-slider__arrow--next, body.tax-product_cat .nw-blog .nw-slider__arrow--next,
body.tax-product_tag .nw-revs .nw-slider__arrow--next, body.tax-product_tag .nw-blog .nw-slider__arrow--next,
body.tax-product_brand .nw-revs .nw-slider__arrow--next, body.tax-product_brand .nw-blog .nw-slider__arrow--next,
body.post-type-archive-product .nw-revs .nw-slider__arrow--next, body.post-type-archive-product .nw-blog .nw-slider__arrow--next{
  right:calc(50% - 50vw + 16px);
}

/* ============================================================================
   BANNER A SCORRIMENTO (ticker) — lo stesso della home
   ----------------------------------------------------------------------------
   Copia delle regole .ticker di home2.css (righe 144-150), che su archivi e
   pagine brand non è caricato. Colori scritti per esteso: qui i token --pine /
   --amber della home non esistono. Sostituisce la vecchia trustbar statica.
   ============================================================================ */
.ticker{background:#1d4231;color:#dcebdd;overflow:hidden;padding:11px 0}
.ticker-track{display:flex;gap:26px;width:max-content;animation:nw-tick 32s linear infinite;will-change:transform}
.ticker-group{display:flex;align-items:center;gap:26px}
.ticker-group span{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:600;white-space:nowrap;color:#dcebdd}
.ticker-group .sep{color:#e0a43c;font-weight:400}
.ticker .ic,.ticker-group span svg{width:16px;height:16px}
@keyframes nw-tick{to{transform:translateX(-50%)}}
/* chi preferisce meno movimento vede il nastro fermo */
@media (prefers-reduced-motion:reduce){ .ticker-track{animation:none} }

/* ============================================================
   GUIDA ALLA SCELTA PER ESIGENZA (.nw-guide) — griglia di schede
   dal repeater nw_cat_guida del termine. Il rimando al medico
   (--note) chiude la serie in tinta menta con la croce farmacia.
   ============================================================ */
.nw-guide{background:#fff}
/* flex e non grid: così l'ultima riga incompleta (1 o 2 schede) resta CENTRATA,
   come tutto il resto del sito. Con 3 per riga le misure coincidono con la griglia. */
.nw-guide__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1020px;margin:0 auto}
.nw-guide__card{flex:0 1 calc((100% - 36px)/3);min-width:260px;box-sizing:border-box}
.nw-guide__card{background:#fff;border:1px solid var(--nw-line,rgba(12,78,43,.14));border-radius:18px;padding:24px 26px;box-shadow:0 4px 16px rgba(12,78,43,.05)}
.nw-guide__t{font-family:'Lora',serif;font-size:18px !important;font-weight:600;margin:0 0 8px;color:var(--nw-ink,#1C2A20) !important;line-height:1.3}
.nw-guide__x{font-size:14.5px;line-height:1.65;color:var(--nw-muted,#55645A);margin:0}
.nw-guide__card--note{background:var(--nw-mist,#ECF1EE);border-color:transparent}
.nw-guide__ico{display:inline-flex;margin-bottom:10px;color:var(--nw-forest,#0C4E2B)}
.nw-guide__ico svg{width:20px;height:20px}
@media (max-width:640px){
  .nw-guide__card{padding:20px}
}

/* Testi ricchi dei termini (intro wysiwyg): paragrafi e link leggibili.
   Il !important sui link è il solito antidoto al tema che forza gli <a> a bianco. */
.nw-archive .nw-catalog-head__sub p,.nw-archive .nw-archive__desc p{margin:0 0 8px}
.nw-archive .nw-catalog-head__sub p:last-child,.nw-archive .nw-archive__desc p:last-child{margin-bottom:0}
.nw-archive .nw-catalog-head__sub a,.nw-archive .nw-archive__desc a,.nw-approf__body a,.nw-guide a{color:var(--nw-forest,#0C4E2B) !important;text-decoration:underline}

/* ============================================================
   RIGHE INCOMPLETE SEMPRE CENTRATE (richiesta 2026-07-28).
   Con meno di 3 card, blog e recensioni sugli archivi smettono
   di essere scroller full-bleed e diventano una riga centrata:
   1 centrata, 2 centrate, 3 = layout pieno come oggi.
   ============================================================ */
body.tax-product_cat .nw-blog__grid[data-nw-carousel]:not(:has(> .nw-bcard:nth-child(3))),
body.tax-product_tag .nw-blog__grid[data-nw-carousel]:not(:has(> .nw-bcard:nth-child(3))),
body.tax-product_brand .nw-blog__grid[data-nw-carousel]:not(:has(> .nw-bcard:nth-child(3))),
body.post-type-archive-product .nw-blog__grid[data-nw-carousel]:not(:has(> .nw-bcard:nth-child(3))){
  margin-left:0;margin-right:0;padding-inline:0;
  display:flex;justify-content:center;overflow-x:visible;flex-wrap:wrap;
}
body.tax-product_cat .nw-blog__grid[data-nw-carousel]:not(:has(> .nw-bcard:nth-child(3))) > .nw-bcard,
body.tax-product_tag .nw-blog__grid[data-nw-carousel]:not(:has(> .nw-bcard:nth-child(3))) > .nw-bcard,
body.tax-product_brand .nw-blog__grid[data-nw-carousel]:not(:has(> .nw-bcard:nth-child(3))) > .nw-bcard,
body.post-type-archive-product .nw-blog__grid[data-nw-carousel]:not(:has(> .nw-bcard:nth-child(3))) > .nw-bcard{
  flex:0 1 380px;max-width:min(380px,100%);
}
body.tax-product_cat .nw-revs__track:not(:has(> .nw-revcard:nth-child(3))),
body.tax-product_tag .nw-revs__track:not(:has(> .nw-revcard:nth-child(3))),
body.tax-product_brand .nw-revs__track:not(:has(> .nw-revcard:nth-child(3))),
body.post-type-archive-product .nw-revs__track:not(:has(> .nw-revcard:nth-child(3))){
  margin-left:0;margin-right:0;padding-inline:0;
  display:flex;justify-content:center;overflow-x:visible;flex-wrap:wrap;
}
body.tax-product_cat .nw-revs__track:not(:has(> .nw-revcard:nth-child(3))) > .nw-revcard,
body.tax-product_tag .nw-revs__track:not(:has(> .nw-revcard:nth-child(3))) > .nw-revcard,
body.tax-product_brand .nw-revs__track:not(:has(> .nw-revcard:nth-child(3))) > .nw-revcard,
body.post-type-archive-product .nw-revs__track:not(:has(> .nw-revcard:nth-child(3))) > .nw-revcard{
  flex:0 1 380px;max-width:min(380px,100%);
}