/* ============================================================================
   BRAND 2.0 — le pagine /b/<brand>/ adottano il design system della HOME NUOVA.
   ----------------------------------------------------------------------------
   Tutto è scopato su .nw-brand (il wrapper unico di nw_render_brand()) così
   shop / categorie / PDP restano intatti: qui migra solo la pagina brand.
   I token replicano 1:1 quelli di home2.css — stesso pino, stesso Fraunces —
   senza importare home2.css, che porterebbe con sé il layout della home.
   ============================================================================ */
.nw-brand{
  --pine:#1d4231;
  --pine-2:#2a5a43;
  --ink:#20291f;
  --muted:#57664f;
  --paper:#f7f4ec;
  --felce:#e8efe2;
  --line:#e3ded1;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}

/* ---------------------------------------------------------------------------
   1) TESTATE DI SEZIONE = .sec-head della home (home2.css:47-52)
   Prima: Lora 45px #111 con allineamento misto (3 sezioni a sinistra, 5
   centrate dai componenti condivisi). Ora: Fraunces 38px pino, sempre a
   sinistra su desktop, sempre centrate su mobile.
   --------------------------------------------------------------------------- */
.nw-brand .nw-sec__title{
  font-family:var(--serif);
  font-size:clamp(28px,3vw,38px);
  font-weight:560;
  color:var(--pine) !important;   /* nw-components.css impone #111 !important */
  line-height:1.12;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.nw-brand .nw-sec__eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pine-2);
}
.nw-brand .nw-sec__sub{ color:var(--muted); font-size:15.5px; line-height:1.6; }

/* I componenti condivisi (recensioni, blog, FAQ, approfondimento) centrano la
   propria testata via shop.css con `body.tax-product_brand .nw-revs .nw-sec__head`
   (0,3,1): per vincere serve lo stesso prefisso body, non basta .nw-brand. */
body.tax-product_brand .nw-brand .nw-sec__head,
body.tax-product_brand .nw-brand .nw-revs .nw-sec__head,
body.tax-product_brand .nw-brand .nw-blog .nw-sec__head,
body.tax-product_brand .nw-brand .nw-faqsec .nw-sec__head{
  flex-direction:row; align-items:flex-end; justify-content:space-between;
  text-align:left; gap:24px;
}
body.tax-product_brand .nw-brand .nw-sec__head > div{ text-align:left; }
/* l'approfondimento non ha wrapper .nw-sec__head: i suoi figli diretti */
body.tax-product_brand .nw-brand .nw-pdp__deep .nw-sec__eyebrow,
body.tax-product_brand .nw-brand .nw-pdp__deep .nw-sec__title{ text-align:left; display:block; }
body.tax-product_brand .nw-brand .nw-faqsec .nw-sec__title,
body.tax-product_brand .nw-brand .nw-blog .nw-sec__title,
body.tax-product_brand .nw-brand .nw-revs .nw-sec__title{ text-align:left; }

/* "Vedi tutti →" della home: sottolineatura ambra */
.nw-brand .nw-sec__link{ color:var(--pine) !important; font-weight:700; font-size:14.5px; white-space:nowrap; }

/* ---------------------------------------------------------------------------
   2) HERO — claim in Fraunces, scala più contenuta (su 390px occupava
   mezzo schermo a 3 righe)
   --------------------------------------------------------------------------- */
.nw-brand .nw-brand__claim{
  font-family:var(--serif);
  font-size:clamp(26px,3.4vw,40px);
  font-weight:500;
  line-height:1.1;
}
.nw-brand .nw-brand__intro{ color:rgba(255,255,255,.88); max-width:640px; }
/* occhiello sopra il claim: i copy lo prevedono su tutti e 5 i marchi */
.nw-brand .nw-brand__eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin:0 0 6px;
}

/* ---------------------------------------------------------------------------
   3) "PERCHÉ SCEGLIERE X" — la sezione più compromessa.
   Prima: titolo card in Lora 38px CENTRATO → 4 righe per card, con sotto un
   testo 14.5px grigio slavato (#6B7280). Gerarchia ribaltata: il titolo di una
   card pesava quanto il titolo di sezione. Ora: 19px sans bold a sinistra.
   --------------------------------------------------------------------------- */
/* i copy chiedono da 3 a 5 motivi, non 3 fissi: la griglia si adatta al numero
   invece di lasciare buchi o schiacciare le card su una colonna */
.nw-brand .nw-reasons__grid{
  align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
@media(min-width:1025px){
  .nw-brand .nw-reasons__grid:has(.nw-reason:nth-child(4)){ grid-template-columns:repeat(2,1fr); }
  .nw-brand .nw-reasons__grid:has(.nw-reason:nth-child(5)){ grid-template-columns:repeat(3,1fr); }
}
.nw-brand .nw-reason{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  text-align:left; padding:26px;
  background:#fff; border:1px solid rgba(29,66,49,.10); border-radius:16px;
}
.nw-brand .nw-reason__ico{ margin:0 0 2px; }
.nw-brand .nw-reason__title{
  font-family:inherit;           /* sans, non più il serif display */
  font-size:19px; font-weight:700; line-height:1.28;
  color:var(--pine) !important;  /* idem: il titolo card era #111 !important */
  text-align:left; margin:0;
  text-transform:none;
}
.nw-brand .nw-reason__txt{
  font-size:15px; line-height:1.6; color:var(--muted); text-align:left; margin:0;
}

/* ---------------------------------------------------------------------------
   4) CATEGORIE + APPROFONDIMENTO — contrasti
   --------------------------------------------------------------------------- */
.nw-brand .nw-catcard__count,
.nw-brand .nw-brandtab span{ color:var(--muted); }
.nw-brand .nw-brandtab{ color:var(--pine-2); font-weight:600; }
.nw-brand .nw-brandtab:hover{ color:var(--pine); background:var(--felce); }
.nw-brand .nw-brandtab.is-active{ background:var(--pine); color:#fff; }
.nw-brand .nw-brandtab.is-active span{ color:rgba(255,255,255,.7); }
/* il corpo dell'approfondimento si fermava a metà pagina lasciando un vuoto:
   misura di lettura piena, colore leggibile */
.nw-brand .nw-pdp__deep .nw-pdp__desc{ color:var(--ink); max-width:68ch; }
.nw-brand .nw-pdp__deep .nw-pdp__desc p{ color:var(--ink); }

/* ---------------------------------------------------------------------------
   5) CAROSELLI RECENSIONI / BLOG — dentro i margini.
   shop.css li rende full-bleed a larghezza schermo con frecce verdi piene
   appoggiate ai bordi del viewport (replica della VECCHIA home Elementor).
   La home nuova vuole "slider ma con i margini": qui si riallinea, solo brand.
   --------------------------------------------------------------------------- */
body.tax-product_brand .nw-brand .nw-revs__track,
body.tax-product_brand .nw-brand .nw-blog__grid[data-nw-carousel]{
  margin-left:0; margin-right:0;
  padding:6px 2px 8px;
  scroll-padding-inline:0;
}
/* card a terzi del CONTENITORE (erano a terzi del viewport) */
@media (min-width:1100px){
  body.tax-product_brand .nw-brand .nw-revs__track .nw-revcard,
  body.tax-product_brand .nw-brand .nw-blog__grid[data-nw-carousel] > *{
    flex:0 0 calc((100% - 2*var(--nw-gap,20px))/3);
    max-width:calc((100% - 2*var(--nw-gap,20px))/3);
  }
}
@media (min-width:768px) and (max-width:1099px){
  body.tax-product_brand .nw-brand .nw-revs__track .nw-revcard,
  body.tax-product_brand .nw-brand .nw-blog__grid[data-nw-carousel] > *{
    flex:0 0 calc((100% - var(--nw-gap,20px))/2);
    max-width:calc((100% - var(--nw-gap,20px))/2);
  }
}
/* frecce: dal cerchio verde pieno 46px ai bordi schermo → outline 38px del
   componente base, ancorate al bordo del contenitore */
body.tax-product_brand .nw-brand .nw-revs .nw-slider__arrow,
body.tax-product_brand .nw-brand .nw-blog .nw-slider__arrow{
  width:38px; height:38px;
  background:#fff; color:var(--pine);
  border:1px solid rgba(29,66,49,.16);
  box-shadow:0 3px 10px rgba(29,66,49,.08);
}
body.tax-product_brand .nw-brand .nw-revs .nw-slider__arrow:hover,
body.tax-product_brand .nw-brand .nw-blog .nw-slider__arrow:hover{
  background:#fff; border-color:var(--pine-2);
  transform:translateY(-50%);           /* niente scale: non sposta il layout */
  box-shadow:0 6px 16px rgba(29,66,49,.14);
}
body.tax-product_brand .nw-brand .nw-revs .nw-slider__arrow svg,
body.tax-product_brand .nw-brand .nw-blog .nw-slider__arrow svg{ width:18px; height:18px; }
body.tax-product_brand .nw-brand .nw-revs .nw-slider__arrow--prev,
body.tax-product_brand .nw-brand .nw-blog .nw-slider__arrow--prev{ left:-6px; }
body.tax-product_brand .nw-brand .nw-revs .nw-slider__arrow--next,
body.tax-product_brand .nw-brand .nw-blog .nw-slider__arrow--next{ right:-6px; }

/* Recensioni corte ("Ok") accanto a una lunga: le card restano di pari altezza
   (allinearle al contenuto creava un gradino), ma l'altezza comune scende da
   306px perché il testo è limitato a 4 righe e non c'è più il min-height 210. */
.nw-brand .nw-revcard{ min-height:0; }
.nw-brand .nw-revcard__text{
  min-height:0;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------------------------------------------------------------------------
   6) "MOSTRA ALTRI" — il catalogo parte da 12 invece di stampare tutto
   --------------------------------------------------------------------------- */
.nw-brand .nw-brandmore{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:34px; }
.nw-brand .nw-brandmore[hidden]{ display:none; }
.nw-brand .nw-brandmore__btn{
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  color:var(--pine); background:#fff;
  border:1px solid rgba(29,66,49,.22); border-radius:999px;
  padding:13px 30px; transition:background .18s,border-color .18s;
}
.nw-brand .nw-brandmore__btn:hover{ background:var(--felce); border-color:var(--pine-2); }
.nw-brand .nw-brandmore__left{ margin:0; font-size:13px; color:var(--muted); }
/* gli item oltre la soglia sono nascosti via [hidden]: la griglia li ignora */
.nw-brand .nw-branditem[hidden]{ display:none !important; }

/* ---------------------------------------------------------------------------
   7) MOBILE — come la home: tutto centrato, titoli in scala (erano 45px fissi)
   --------------------------------------------------------------------------- */
/* NB: le media query non alzano la specificità — servono gli stessi prefissi
   body.tax-product_brand delle regole desktop qui sopra, altrimenti perdono. */
@media (max-width:900px){
  body.tax-product_brand .nw-brand .nw-sec__head,
  body.tax-product_brand .nw-brand .nw-revs .nw-sec__head,
  body.tax-product_brand .nw-brand .nw-blog .nw-sec__head,
  body.tax-product_brand .nw-brand .nw-faqsec .nw-sec__head{
    flex-direction:column; align-items:center; text-align:center; gap:14px;
  }
  body.tax-product_brand .nw-brand .nw-sec__head > div{ text-align:center; }
  body.tax-product_brand .nw-brand .nw-sec__title,
  body.tax-product_brand .nw-brand .nw-faqsec .nw-sec__title,
  body.tax-product_brand .nw-brand .nw-blog .nw-sec__title,
  body.tax-product_brand .nw-brand .nw-revs .nw-sec__title,
  body.tax-product_brand .nw-brand .nw-sec__sub,
  body.tax-product_brand .nw-brand .nw-pdp__deep .nw-sec__eyebrow,
  body.tax-product_brand .nw-brand .nw-pdp__deep .nw-sec__title{ text-align:center; }
  .nw-brand .nw-reason,
  .nw-brand .nw-reason__title,
  .nw-brand .nw-reason__txt{ text-align:center; align-items:center; }
  /* il bottone "Aggiungi" sbordava di ~10px dalla card a 390px */
  .nw-brand .nw-pcard__btn{ max-width:100%; white-space:nowrap; }
  .nw-brand .nw-pcard__foot{ flex-wrap:wrap; gap:8px; }
}

/* ---------------------------------------------------------------------------
   Fasce con colonne fisse ma meno elementi delle colonne: restavano accostate
   a sinistra lasciando il vuoto a destra (trustbar 4 voci su 5 colonne → 259px;
   categorie 6 card su 8 colonne). Le tracce hanno larghezza fissa, quindi
   centrarle basta: a griglia piena non cambia nulla.
   --------------------------------------------------------------------------- */
/* justify-content da solo non basta: le tracce dichiarate riempiono già la
   riga, quindi non resta spazio da distribuire. Va ridotto il NUMERO di
   colonne a quello degli elementi presenti.
   Categorie: colonne di larghezza fissa → auto-fit collassa quelle vuote.
   Trustbar: colonne in 1fr → serve :has() per contare le voci. */
body.tax-product_brand .nw-brand .nw-cats__grid{
  grid-template-columns:repeat(auto-fit,130px);
  justify-content:center;
}
body.tax-product_brand .nw-brand .nw-trustbar__inner{justify-content:center}
body.tax-product_brand .nw-brand .nw-trustbar__inner:has(> :last-child:nth-child(4)){grid-template-columns:repeat(4,minmax(0,214px))}
body.tax-product_brand .nw-brand .nw-trustbar__inner:has(> :last-child:nth-child(3)){grid-template-columns:repeat(3,minmax(0,214px))}
body.tax-product_brand .nw-brand .nw-trustbar__inner:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,214px))}

/* ============================================================================
   CATEGORIE = le tile della home ("Parti dal tuo bisogno")
   ----------------------------------------------------------------------------
   Copia fedele delle regole .tiles/.tile di home2.css (righe 153-168): quel
   foglio non è caricato sulle pagine brand, quindi le regole vanno riportate
   qui. Token già dichiarati in cima a questo file (--r, --shadow, --pine…).
   Le vecchie card bianche con icona (.nw-cats__grid/.nw-cat) non servono più.
   ============================================================================ */
.nw-brand .tiles{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 16px;scrollbar-width:none}
.nw-brand .tiles::-webkit-scrollbar{display:none}
.nw-brand .tile{flex:0 0 262px;scroll-snap-align:start;position:relative;display:block;text-decoration:none;
  border-radius:16px;overflow:hidden;aspect-ratio:1;
  background:linear-gradient(150deg,#e6efe0,#c8dcc0);
  box-shadow:0 4px 14px rgba(29,66,49,.07);transition:transform .2s,box-shadow .2s}
.nw-brand .tile:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(29,66,49,.10)}
.nw-brand .tile .ph{position:absolute;inset:0}
.nw-brand .tile .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.nw-brand .tile:hover .ph img{transform:scale(1.04)}
.nw-brand .tile .scrim{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;
  background:linear-gradient(transparent,rgba(23,42,32,.82));display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.nw-brand .tile .scrim b{color:#fff !important;font-size:16px;font-weight:700;line-height:1.25}
.nw-brand .tile .scrim small{display:block;color:#cfe0d2 !important;font-weight:400;font-size:12.5px;margin-top:2px}
.nw-brand .tile .go{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--pine);
  display:grid;place-items:center;flex:none;transition:background .2s,transform .2s}
.nw-brand .tile .go .ic{width:16px;height:16px}
.nw-brand .tile:hover .go{background:#e0a43c;transform:translateX(3px)}
/* il tema forza gli <a> a bianco: la tile è un <a> e ne eredita il colore */
.nw-brand a.tile{color:inherit !important}

/* Intro brand da wysiwyg: paragrafi + link visibili (antidoto link-bianchi). */
.nw-brand .nw-brand__intro p{margin:0 0 8px}
.nw-brand .nw-brand__intro p:last-child{margin-bottom:0}
.nw-brand .nw-brand__intro a,.nw-brand .nw-pdp__desc a{color:var(--pine,#0C4E2B) !important;text-decoration:underline}

/* Hero marchio: via la foto di sfondo (era hero-arnica.jpg per TUTTI i marchi,
   quindi l'arnica compariva anche su Lacalut e Medipharma), resta il solo verde
   del gradiente. Regola in coda a brand2.css: vince su style.css:995. */
body.tax-product_brand .nw-brand .nw-brand__hero{
  background-image: linear-gradient(155deg, rgba(11,62,35,.98) 0%, var(--pine,#1d4231) 55%, rgba(9,52,29,1) 100%);
}

/* "Acquista per categoria": le tessere sono tante quante le categorie del
   marchio — con 2 o 3 la riga restava a sinistra e avanzava mezzo schermo vuoto.
   `safe center` e NON `center`: la riga scorre in orizzontale, e con un centro
   "non sicuro" quando le tessere sforano la prima finisce fuori dal bordo
   sinistro (misurata a −255px su AllgaSan) e non la si può più raggiungere.
   Con `safe` il centro vale solo quando c'è spazio, se no si riparte da capo.
   I browser che non conoscono la parola chiave scartano la riga e restano
   allineati a sinistra: comportamento corretto comunque. */
.nw-brand #brandtilesrow{justify-content:safe center}

/* La regola qui sopra forza a sinistra TUTTE le testate della pagina marchio:
   quella di "Acquista per categoria" chiede invece il centro, come nel resto
   del sito. Stessa specificità + il modificatore, quindi vince solo lei. */
body.tax-product_brand .nw-brand .nw-sec__head--center{ justify-content:center; text-align:center; }
body.tax-product_brand .nw-brand .nw-sec__head--center > div{ text-align:center; }