/* ============================================================
   PDP "DESIGN FINITO" 2026-07-18 — porting 1:1 del mockup
   approvato (nw-mockup-pdp-final.html) sui selettori reali del
   tema. Caricato DOPO nw-components su is_product(): vince i
   pareggi col vecchio blocco .nw-pdp di style.css.
   Fonte di verità visiva: il mockup. Non "migliorare" a mano.
   ============================================================ */
.nw-pdp{
  --deep:#093A20; --mint:#CFE3D5; --mist:#ECF1EE; --cream:#E8E7E2;
  --amber:#E6A817; --ease:cubic-bezier(.2,.7,.2,1);
}
.nw-pdp ::selection{background:var(--mint);color:var(--deep)}
.nw-pdp svg.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* grana fotografica su tutta la pagina prodotto */
.nw-grain{position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- bande FULL-BLEED (mockup): .nw-pdp è max-width 1200, le sezioni con
   sfondo sfondano ai bordi viewport col breakout margin/padding. Il contenuto
   interno resta allineato al contenitore (il padding compensa esattamente). ---- */
.nw-pdp .nw-trustband,
.nw-pdp .nw-pdp__ingr,
.nw-pdp .nw-pdp__howto,
.nw-pdp .nw-pdp__howto + .nw-sec--narrow,
.nw-pdp .nw-pdp__routine-sec,
.nw-pdp .nw-compare,
.nw-pdp .nw-faqsec,
.nw-pdp .nw-pdp__specs-sec,
.nw-pdp .nw-news{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
}

/* ---- testate sezione (tipografia del mockup) ---- */
.nw-pdp .nw-sec__eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:var(--nw-label,#456150)}
.nw-pdp .nw-sec__eyebrow::before,.nw-pdp .nw-sec__eyebrow::after{content:"";width:26px;height:1px;background:var(--nw-sage,#7E9E8D);opacity:.65}
.nw-pdp .nw-sec__eyebrow svg,.nw-pdp .nw-sec__eyebrow .nw-ico{display:none}
.nw-pdp .nw-sec__title{font-size:clamp(29px,3.4vw,40px)!important;font-weight:600;letter-spacing:-.015em;line-height:1.08;text-wrap:balance;margin:12px 0 8px}
.nw-pdp .nw-sec__title em{font-style:italic;color:var(--nw-forest,#0C4E2B)}
.nw-pdp .nw-sec__sub{font-size:16.5px;line-height:1.6}
.nw-pdp .nw-sec__head--center{margin-bottom:clamp(34px,4.5vw,48px)}

/* ============ HERO ============ */
/* body{overflow-x:hidden} del tema crea uno scroll-context che UCCIDE position:sticky:
   clip protegge dallo scroll orizzontale uguale ma non rompe lo sticky della gallery. */
body.single-product{overflow-x:clip!important;overflow-y:visible!important}
.nw-pdp .nw-pdp__top{grid-template-columns:46.5% 1fr;gap:clamp(30px,4.5vw,64px);align-items:start}
.nw-pdp .nw-pdp__gallery{position:sticky;top:24px}
.nw-pdp .nw-pdp__main{position:relative;border-radius:28px;aspect-ratio:1/1.04;overflow:hidden;min-height:0;
  background:radial-gradient(130% 110% at 50% 0%,#fff 0%,var(--mist) 58%,var(--mint) 125%);
  border:1px solid var(--nw-line,rgba(12,78,43,.14));display:flex;align-items:center;justify-content:center}
.nw-pdp .nw-pdp__main::after{content:"";position:absolute;width:120%;height:52%;bottom:-22%;left:-10%;
  background:radial-gradient(50% 60% at 50% 50%,rgba(9,58,32,.14),transparent 70%);filter:blur(6px)}
.nw-pdp .nw-pdp__main>img{position:relative;z-index:2;width:auto;max-width:72%;max-height:78%;object-fit:contain;
  filter:drop-shadow(0 34px 40px rgba(9,58,32,.24));transition:transform .6s var(--ease)}
.nw-pdp .nw-pdp__main:hover>img{transform:scale(1.045) rotate(-1.2deg)}
.nw-pdp .nw-pdp__pda{position:absolute;z-index:3;top:18px;left:18px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);color:var(--nw-forest,#0C4E2B);
  font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:9px 15px;box-shadow:0 10px 24px -8px rgba(9,58,32,.35)}
.nw-pdp .nw-pdp__pda svg{color:var(--amber);width:15px;height:15px}
.nw-gal-bot{position:absolute;z-index:3;right:14px;bottom:14px;width:132px;height:132px;border-radius:999px;
  overflow:hidden;border:6px solid #fff;box-shadow:0 18px 36px -12px rgba(9,58,32,.35)}
.nw-gal-bot img{width:100%;height:100%;object-fit:cover}
.nw-pdp .nw-pdp__thumbs{display:flex;gap:10px;margin-top:14px}
.nw-pdp .nw-pdp__thumb{width:70px;height:70px;border:2px solid var(--nw-line,rgba(12,78,43,.14));border-radius:16px;background:#fff;padding:4px;cursor:pointer;transition:border-color .2s,transform .2s}
.nw-pdp .nw-pdp__thumb:hover{transform:translateY(-2px)}
.nw-pdp .nw-pdp__thumb.is-active{border-color:var(--nw-forest,#0C4E2B)}
.nw-pdp .nw-pdp__thumb img{width:100%;height:100%;object-fit:contain}

.nw-pdp .nw-pdp__tags-top{gap:9px;margin-bottom:16px;flex-wrap:wrap}
.nw-pdp .nw-pdp__brand,.nw-pdp .nw-pdp__cat{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:8px 15px;border:0}
.nw-pdp .nw-pdp__brand{background:var(--nw-forest,#0C4E2B);color:#fff!important}
.nw-pdp .nw-pdp__brand .nw-pcard__dot{background:var(--mint)}
.nw-pdp .nw-pdp__cat{background:var(--mint);color:var(--nw-forest,#0C4E2B)!important}
.nw-pdp .nw-pdp__cat svg{width:13px;height:13px}
.nw-pdp .nw-pdp__title{font-size:clamp(32px,3.6vw,46px)!important;font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0 0 8px}
.nw-pdp .nw-pdp__title em{font-style:italic;color:var(--nw-label,#456150);font-weight:500}
.nw-pdp .nw-pdp__subtitle{font-style:italic;color:var(--nw-muted,#55645A);font-size:17px;font-family:'Lora',serif}
.nw-pdp .nw-pdp__rating{margin:14px 0 3px}
.nw-pdp .nw-pdp__stars{color:var(--amber)}
.nw-pdp .nw-pdp__sku--under{opacity:.75}

/* benefit ✓ (sostituiscono la card "Perché funziona") */
.nw-benef{margin:20px 0 6px;display:flex;flex-direction:column;gap:12px}
.nw-benef span{display:flex;gap:12px;font-size:15.5px;line-height:1.45;align-items:flex-start}
.nw-benef svg{width:23px;height:23px;background:var(--mint);color:var(--nw-forest,#0C4E2B);border-radius:999px;padding:5px;stroke-width:2.2;margin-top:1px;box-sizing:border-box}

.nw-pdp .nw-pdp__buybox{border-radius:22px;box-shadow:0 2px 4px rgba(9,58,32,.05),0 24px 48px -20px rgba(9,58,32,.18);padding:24px;margin-top:20px}
.nw-pdp .nw-pdp__price{color:var(--nw-forest,#0C4E2B);font-size:36px}
.nw-pdp .nw-pdp__price .woocommerce-Price-amount{color:var(--nw-forest,#0C4E2B)}
/* era #9AA3A0 su bianco: 2,6:1 a 12,5px, sotto la soglia leggibile. */
.nw-pdp .nw-pdp__pricesub{font-size:13px;margin-top:3px;color:var(--nw-muted,#55645A)}
.nw-pdp .nw-pdp__qty{border-radius:14px;background:var(--nw-carta,#FAF8F3)}
.nw-pdp .nw-pdp__qty button{width:44px;height:46px;font-size:18px;transition:background .2s}
.nw-pdp .nw-pdp__qty button:hover{background:var(--mint)}
.nw-pdp .nw-pdp__qty input{background:#fff;font-weight:700}
.nw-pdp .nw-pdp__addcart{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;font-size:16.5px;font-weight:900;padding:17px;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.nw-pdp .nw-pdp__addcart svg{transition:transform .25s var(--ease)}
.nw-pdp .nw-pdp__addcart:hover{background:var(--deep);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(9,58,32,.5)}
.nw-pdp .nw-pdp__addcart:hover svg{transform:translateX(4px)}
.nw-pdp .nw-wish--btn{width:56px;border-radius:16px;transition:color .2s,border-color .2s,transform .2s}
.nw-pdp .nw-wish--btn:hover{transform:translateY(-2px)}
/* !important obbligatorio: il tema forza tutti gli <a> a bianco, e questa riga
   è un link su fondo chiarissimo → senza, il testo è bianco su #ECF1EE (1,1:1,
   illeggibile). Stesso motivo per cui .nw-delivery__cta più sotto ce l'ha già. */
.nw-delivery{display:flex;gap:11px;align-items:center;background:var(--mist);border-radius:14px;padding:12px 15px;margin-top:14px;font-size:14px;color:var(--nw-forest,#0C4E2B) !important}
.nw-delivery span,.nw-delivery b{color:var(--nw-forest,#0C4E2B) !important}
.nw-delivery svg{width:19px;height:19px;stroke-width:1.5}
.nw-delivery b{font-weight:900}
.nw-pdp .nw-pdp__microtrust{margin-top:14px}
.nw-payrow{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.nw-payrow span{border:1px solid var(--nw-line,rgba(12,78,43,.14));border-radius:7px;font-size:9.5px;font-weight:900;letter-spacing:.07em;padding:4px 9px;color:var(--nw-muted,#55645A)}
.nw-pdp .nw-pdp__pharma{border-radius:18px;padding:15px 17px}
.nw-pdp .nw-pdp__pharma-ico{background:var(--nw-forest,#0C4E2B);color:#fff;flex:0 0 44px;height:44px}
.nw-pdp .nw-pdp__pharma-ico svg{color:#fff}
.nw-pdp .nw-pdp__chips{margin-top:16px}
.nw-pdp .nw-pdp__chips span{padding:9px 15px;gap:8px}
.nw-pdp .nw-pdp__chips span svg{color:var(--nw-sage,#7E9E8D)}

/* ============ TRUST STRIP (marquee a scorrimento) ============ */
.nw-trustband{background:var(--deep, #093A20);overflow:hidden}
.nw-pdp .nw-trustband{padding-inline:0}
.nw-trustband__track{display:flex;width:max-content;animation:nw-tbscroll 36s linear infinite}
.nw-trustband:hover .nw-trustband__track{animation-play-state:paused}
.nw-trustband__group{display:flex;gap:56px;align-items:center;padding:17px 28px}
.nw-trustband span{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#CFE3D5;white-space:nowrap}
.nw-trustband svg{width:17px;height:17px;color:#fff;stroke-width:1.5}
@keyframes nw-tbscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.nw-trustband__track{animation:none}}

/* ============ FORMULA ============ */
.nw-pdp .nw-pdp__ingr{background:var(--nw-carta,#FAF8F3)}
/* flex al posto della grid repeat(3,1fr): con 1-2 ingredienti gli item si
   centrano da soli, con 3 la base calc((100% - 2*gap)/3) replica i terzi
   identici di prima. Il flex sull'item (specificità 0,3,0) batte il legacy
   .nw-pdp .nw-ingr{flex:0 1 240px} di style.css. */
.nw-pdp .nw-ingr-row{--nw-ingr-gap:clamp(20px,3vw,44px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--nw-ingr-gap);max-width:1000px;margin:0 auto}
.nw-pdp .nw-ingr-row>.nw-ingr{flex:0 1 calc((100% - 2*var(--nw-ingr-gap))/3)}
.nw-pdp .nw-ingr{display:block;text-align:center}
/* i longhand background-* stanno DOPO lo shorthand background (che li resetta):
   l'inline style porta solo background-image → senza cover la foto 800×800
   mostrava l'angolo alto-sinistra nel cerchio 156px. */
/* 156 → 184px: a tre per riga su 1000px di larghezza c'era aria in avanzo, e i
   medaglioni sono la parte più riconoscibile della sezione. */
.nw-pdp .nw-ingr__photo{display:grid;place-items:center;width:184px!important;height:184px!important;margin:0 auto 18px;border-radius:999px;
  background:radial-gradient(115% 115% at 50% 8%,#fff 25%,var(--mint) 135%);background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1px solid var(--nw-line,rgba(12,78,43,.14));
  box-shadow:0 16px 34px -14px rgba(9,58,32,.18);transition:transform .4s var(--ease);overflow:hidden}
.nw-pdp .nw-ingr:hover .nw-ingr__photo{transform:translateY(-6px) rotate(-2deg)}
.nw-pdp .nw-ingr__photo svg{width:74px;height:74px;color:var(--nw-forest,#0C4E2B);stroke-width:1.2}
.nw-pdp .nw-ingr__photo img{width:100%;height:100%;object-fit:cover}
.nw-pdp .nw-ingr__name{display:block;font-family:'Lora',serif;font-size:21px;font-weight:600}
.nw-pdp .nw-ingr__desc{display:block;font-size:14.5px;margin-top:7px;line-height:1.6;max-width:30ch;margin-inline:auto}
.nw-pdp .nw-free{margin-top:40px}
.nw-pdp .nw-free__chip{display:inline-flex;gap:7px;align-items:center;padding:8px 15px}
.nw-pdp .nw-free__chip svg{width:12px;height:12px;color:#B3413A}
.nw-sensory{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:780px;margin:32px auto 0}
.nw-sensory>div{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--nw-line,rgba(12,78,43,.14));border-radius:16px;padding:15px 18px;text-align:left}
.nw-sensory svg{width:22px;height:22px;color:var(--nw-forest,#0C4E2B);stroke-width:1.4}
.nw-sensory b{display:block;font-family:'Lora',serif;font-size:15px;color:var(--nw-forest,#0C4E2B)}
.nw-sensory small{color:var(--nw-muted,#55645A);font-size:12.5px}

/* ============ ADATTO A ============
   Badge invece dei 3 riquadri: le voci sono brevi (una riga) e di numero
   variabile, 2-5 per prodotto, quindi una riga che va a capo regge meglio di
   una griglia a colonne fisse. L'ultima è spesso in negativo. */
.nw-aa-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto}
.nw-aa{display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--nw-line,rgba(12,78,43,.14));border-radius:999px;
  padding:12px 20px;font-size:15px;line-height:1.3;color:var(--nw-forest,#0C4E2B);
  box-shadow:0 10px 24px -18px rgba(9,58,32,.35)}
.nw-aa svg{width:20px;height:20px;flex:0 0 20px;color:var(--nw-sage,#7E9E8D);stroke-width:1.5}
/* il "non adatto" deve leggersi come tale a colpo d'occhio, non solo dall'icona */
.nw-aa--no{border-color:rgba(179,65,58,.28);background:#FDF6F5;color:#8E3B35}
.nw-aa--no svg{color:#B3413A}
@media(max-width:700px){
  .nw-aa-row{gap:9px}
  .nw-aa{padding:10px 15px;font-size:14px}
  .nw-aa svg{width:18px;height:18px;flex-basis:18px}
}

/* ============ USO ============ */
.nw-pdp .nw-pdp__howto{background:var(--mist)}
.nw-pdp .nw-howto__grid{display:flex;justify-content:center;gap:clamp(20px,3.5vw,56px);margin-bottom:38px;flex-wrap:wrap}
.nw-pdp .nw-howto{max-width:240px;text-align:center;position:relative;counter-increment:none}
.nw-pdp .nw-howto::before{display:none}
.nw-pdp .nw-howto__ph{position:relative;width:150px;height:150px;margin:0 auto 16px}
.nw-pdp .nw-howto__ph img{width:100%;height:100%;border-radius:999px;object-fit:cover;border:5px solid #fff;box-shadow:0 16px 34px -14px rgba(9,58,32,.22)}
.nw-pdp .nw-howto__ph em{position:absolute;top:-2px;left:-2px;width:34px;height:34px;background:var(--nw-forest,#0C4E2B);color:#fff;border-radius:999px;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:15px;border:3px solid #fff;box-shadow:0 6px 14px -4px rgba(9,58,32,.4)}
.nw-pdp .nw-howto h3{font-size:19px;font-weight:600}
.nw-pdp .nw-howto p{font-size:14.5px;margin-top:6px;max-width:27ch;margin-inline:auto;line-height:1.55}
.nw-pdp .nw-pharma-tip{border-radius:20px;border-left:4px solid var(--nw-forest,#0C4E2B);box-shadow:0 16px 36px -16px rgba(9,58,32,.16);padding:22px 26px;max-width:780px;margin:0 auto;align-items:flex-start}
.nw-pdp .nw-pharma-tip__ico{flex:0 0 46px;height:46px}
/* il consiglio del farmacista prosegue la banda menta del modo d'uso (mockup: stesso
   blocco). La sezione torna FULL-BLEED (nw-sec--narrow la limitava a 780px → la banda
   verde si interrompeva); a restare stretto è solo il box .nw-pharma-tip interno. */
.nw-pdp .nw-pdp__howto + .nw-sec--narrow{max-width:none;background:var(--mist);margin-top:0;padding-top:0}
.nw-pdp .nw-pdp__howto{padding-bottom:38px}

/* ============ RECENSIONI ============ */
.nw-pdp .nw-revsum{background:linear-gradient(160deg,var(--nw-forest,#0C4E2B),var(--deep) 75%);color:#fff;border-radius:22px;padding:30px;position:sticky;top:24px;box-shadow:0 24px 50px -20px rgba(9,58,32,.5)}
.nw-pdp .nw-revsum__score{color:#fff;font-size:58px}
.nw-pdp .nw-revsum__stars{color:var(--amber);letter-spacing:3px}
.nw-pdp .nw-revsum__meta{color:var(--mint)}
.nw-pdp .nw-revsum__row{color:var(--mint)}
.nw-pdp .nw-revsum__track{background:rgba(255,255,255,.16)}
.nw-pdp .nw-revsum__fill{background:var(--amber)}
.nw-pdp .nw-review{position:relative;border-radius:20px;padding:24px;box-shadow:0 2px 4px rgba(9,58,32,.04);transition:box-shadow .3s,transform .3s var(--ease)}
.nw-pdp .nw-review:hover{box-shadow:0 20px 40px -18px rgba(9,58,32,.2);transform:translateY(-3px)}
.nw-pdp .nw-review::before{content:"\201C";position:absolute;top:6px;right:20px;font-family:'Lora',serif;font-size:70px;line-height:.8;color:var(--mint)}
.nw-pdp .nw-review__av{background:var(--mint);color:var(--nw-forest,#0C4E2B)}
.nw-pdp .nw-review__stars{color:var(--amber)}

/* ============ ROUTINE ============ */
.nw-routine{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.15fr;gap:14px;align-items:stretch;max-width:1140px;margin:0 auto}
.nw-routine__p{background:#fff;border:1px solid var(--nw-line,rgba(12,78,43,.14));border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:8px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s;color:inherit}
.nw-routine__p:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(9,58,32,.22)}
.nw-routine__p figure{background:radial-gradient(115% 110% at 50% 10%,#fff,var(--mist));border-radius:14px;height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0}
.nw-routine__p figure img{max-height:80%;max-width:88%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(9,58,32,.15))}
.nw-routine__p b{font-family:'Lora',serif;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--nw-ink,#1C2A20)}
.nw-routine__p small{color:var(--nw-muted,#55645A);font-size:12.5px}
.nw-routine__p .p{font-family:'Lora',serif;font-weight:700;color:var(--nw-forest,#0C4E2B);font-size:17px;margin-top:auto}
.nw-routine__plus{display:grid;place-items:center;font-size:22px;color:var(--nw-sage,#7E9E8D)}
.nw-routine__box{background:linear-gradient(155deg,var(--nw-forest,#0C4E2B),var(--deep) 80%);color:#fff;border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:9px;text-align:center;box-shadow:0 24px 48px -18px rgba(9,58,32,.5)}
.nw-routine__box .tot{font-family:'Lora',serif;font-weight:700;font-size:34px}
.nw-routine__box small{color:var(--mint);font-size:12.5px}
.nw-routine__box button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--nw-forest,#0C4E2B);border:0;border-radius:14px;font-weight:900;font-size:14.5px;padding:14px 16px;cursor:pointer;margin-top:8px;transition:background .25s,transform .25s var(--ease)}
.nw-routine__box button:hover{background:var(--mint);transform:translateY(-2px)}

/* ============ SCHEDA ============ */
/* Scheda tecnica: tabella SOBRIA centrata, avvertenze/nutrizionale SOTTO e centrate
   (richiesta cliente 2026-07-23: "tabella sobria e consiglio sotto centrati"). */
.nw-specwrap{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;max-width:820px;margin:22px auto 0}
.nw-specwrap--solo{grid-template-columns:1fr;max-width:820px}
.nw-pdp .nw-pdp__specs-sec{background:#fff}
.nw-pdp .nw-pdp__specs{border-radius:16px;margin:0;box-shadow:none}
.nw-pdp .nw-pdp__spec{padding:18px 22px}
.nw-pdp .nw-pdp__spec dt{font-size:10.5px;letter-spacing:.12em;font-weight:900}
.nw-pdp .nw-pdp__spec dd{margin-top:4px}
/* Nota sotto il form recensioni: era #8A958C, 2,9:1 a 12px. */
.nw-pdp .nw-revform__note{color:var(--nw-muted,#55645A)}

/* "Vedi tutte le N recensioni" + "Scrivi una recensione" sotto la lista.
   La lista è una griglia a 3 colonne: senza grid-column i due link finiscono
   affiancati in due celle invece che uno sotto l'altro. Il -8px recupera parte
   del gap di 22px, così i due link restano vicini fra loro. */
/* Il bottone nel riquadro voto è un outline verde scuro sopra un fondo verde
   scuro: contrasto 1:1, la scritta non si vedeva proprio. Sul fondo scuro va in
   bianco, e all'inverso al passaggio del mouse. */
.nw-pdp .nw-revsum__cta{color:#fff !important;border-color:rgba(255,255,255,.55)}
.nw-pdp .nw-revsum__cta:hover{background:#fff;color:var(--nw-forest,#0C4E2B) !important;border-color:#fff}

.nw-pdp .nw-revmore,.nw-pdp .nw-revwrite{grid-column:1/-1}
.nw-pdp .nw-revmore{margin-top:0}
.nw-pdp .nw-revwrite{margin-top:-8px}
.nw-pdp .nw-revmore__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:22px}
.nw-pdp .nw-revmore__t{display:inline-flex;align-items:center;cursor:pointer;list-style:none;padding:2px 0}
.nw-pdp .nw-revmore__t::-webkit-details-marker{display:none}
.nw-pdp .nw-revmore__t:hover{text-decoration:underline}
.nw-pdp .nw-revmore__t:focus-visible{outline:2px solid var(--nw-forest,#0C4E2B);outline-offset:3px;border-radius:4px}
.nw-pdp .nw-revmore__less,.nw-pdp .nw-revmore[open] .nw-revmore__more{display:none}
.nw-pdp .nw-revmore[open] .nw-revmore__less{display:inline}

.nw-pdp .nw-revwrite{display:block}

/* Righe apribili sotto la tabella (istruzioni, avvertenze, valori, INCI).
   Stesso linguaggio della tabella: bianco, filetto sottile, angoli 16.
   Prima erano riquadri verdi pieni impilati — troppo peso per contenuti
   che in gran parte si consultano solo se servono. */
.nw-specmore{max-width:820px;margin:16px auto 0;background:#fff;border:1px solid var(--nw-line,rgba(12,78,43,.14));border-radius:16px;overflow:hidden}
.nw-specmore__row + .nw-specmore__row{border-top:1px solid var(--nw-line,rgba(12,78,43,.14))}
.nw-specmore__head{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;list-style:none;font-family:'Lora',serif;font-size:16px;color:var(--nw-ink,#16241b);transition:background .15s ease}
.nw-specmore__head::-webkit-details-marker{display:none}
.nw-specmore__head::marker{content:''}
.nw-specmore__head:hover{background:var(--nw-carta,#FAF8F3)}
.nw-specmore__head:focus-visible{outline:2px solid var(--nw-forest,#0C4E2B);outline-offset:-2px}
.nw-specmore__ico{flex:0 0 auto;display:inline-flex;color:var(--nw-forest,#0C4E2B);opacity:.75}
.nw-specmore__ico svg{width:18px;height:18px}
.nw-specmore__label{flex:1 1 auto;min-width:0}
.nw-specmore__chev{flex:0 0 auto;color:rgba(12,78,43,.5);transition:transform .18s ease}
.nw-specmore__row[open] .nw-specmore__chev{transform:rotate(180deg)}
.nw-specmore__body{padding:0 20px 18px 50px;font-size:14.5px;line-height:1.65;color:var(--nw-muted,#5c6b60)}
.nw-specmore__body p{margin:0 0 8px}
.nw-specmore__body p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.nw-specmore__head,.nw-specmore__chev{transition:none}}
@media (max-width:640px){
  .nw-specmore__head{padding:14px 16px;font-size:15px;gap:10px}
  .nw-specmore__body{padding:0 16px 16px}
}

/* ============ CONFRONTO (tabella) ============ */
.nw-cmptable{max-width:1020px;margin:0 auto;overflow-x:auto;border-radius:22px}
.nw-cmptable table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--nw-line,rgba(12,78,43,.14));border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -18px rgba(9,58,32,.14);min-width:700px}
.nw-cmptable th,.nw-cmptable td{padding:16px 20px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--nw-line,rgba(12,78,43,.14));vertical-align:middle}
.nw-cmptable tr:last-child td{border-bottom:0}
.nw-cmptable th{font-family:'Lora',serif;font-size:16px;font-weight:600;background:var(--nw-carta,#FAF8F3)}
.nw-cmptable th a{color:inherit}
.nw-cmptable td:first-child,.nw-cmptable th:first-child{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--nw-label,#456150);width:140px;background:var(--nw-carta,#FAF8F3);font-family:'Lato',sans-serif}
.nw-cmptable td.cur{background:#F3F9F1}
.nw-cmptable th.cur{background:var(--nw-forest,#0C4E2B);color:#fff}
.nw-cmptable th.cur a{color:#fff}
.nw-cmptable th.cur small{display:block;font-family:'Lato',sans-serif;font-weight:900;font-size:10px;color:var(--mint);letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.nw-cmptable td .pr{font-family:'Lora',serif;font-weight:700;font-size:18px;color:var(--nw-forest,#0C4E2B)}
.nw-cmptable td .pr .woocommerce-Price-amount{color:var(--nw-forest,#0C4E2B)}
.nw-cmptable td button,.nw-cmptable td .vedi{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--nw-forest,#0C4E2B);background:#fff;color:var(--nw-forest,#0C4E2B);border-radius:11px;font-weight:900;font-size:12.5px;padding:8px 13px;cursor:pointer;margin-top:7px;transition:background .2s,color .2s}
.nw-cmptable td button:hover,.nw-cmptable td .vedi:hover{background:var(--nw-forest,#0C4E2B);color:#fff}
.nw-cmptable td.cur button{background:var(--nw-forest,#0C4E2B);color:#fff}
.nw-cmptable td img{height:66px;width:auto;object-fit:contain}

/* ============ FAQ ============ */
.nw-pdp .nw-faqsec{background:var(--mist)!important}
.nw-pdp .nw-acc{border-radius:18px;box-shadow:0 2px 4px rgba(9,58,32,.04);margin-bottom:11px;transition:box-shadow .3s}
.nw-pdp .nw-acc[open]{box-shadow:0 18px 38px -18px rgba(9,58,32,.2)}
.nw-pdp .nw-acc summary{font-family:'Lora',serif;font-weight:600;font-size:16.5px;padding:18px 22px}
.nw-pdp .nw-acc summary:hover .nw-acc__name{color:var(--nw-forest,#0C4E2B)}
.nw-pdp .nw-acc__plus{order:-1;flex:0 0 30px;width:30px;height:30px;border-radius:999px;background:var(--mint);display:grid;place-items:center;color:var(--nw-forest,#0C4E2B);transition:transform .35s var(--ease),background .35s;position:relative}
.nw-pdp .nw-acc__plus::before,.nw-pdp .nw-acc__plus::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.nw-pdp .nw-acc__plus::before{width:12px;height:2.2px}
.nw-pdp .nw-acc__plus::after{width:2.2px;height:12px}
.nw-pdp .nw-acc[open] .nw-acc__plus{transform:rotate(45deg);background:var(--nw-forest,#0C4E2B);color:#fff}
.nw-pdp .nw-acc[open] summary .nw-acc__name{color:var(--nw-forest,#0C4E2B)}

/* ============ BLOG ============ */
.nw-pdp .nw-blog{background:#fff}
.nw-pdp .nw-bcard{border-radius:22px;transition:transform .35s var(--ease),box-shadow .35s}
.nw-pdp .nw-bcard:hover{transform:translateY(-5px);box-shadow:0 26px 50px -22px rgba(9,58,32,.26)}
.nw-pdp .nw-bcard__meta{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.nw-pdp .nw-bcard:hover .nw-bcard__title{color:var(--nw-forest,#0C4E2B)}

/* ============ NEWSLETTER ============ */
.nw-pdp .nw-news{background:radial-gradient(95% 150% at 50% -25%,var(--nw-forest,#0C4E2B) 0%,var(--deep) 62%)}
.nw-pdp .nw-news__form{gap:8px;max-width:470px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px}
.nw-pdp .nw-news__form input{border:0;outline:none;background:transparent;padding:14px 20px;color:#fff}
.nw-pdp .nw-news__form input::placeholder{color:rgba(207,224,212,.75)}
.nw-pdp .nw-news__form button{background:#fff;color:var(--nw-forest,#0C4E2B);border-radius:999px;padding:14px 28px;transition:background .25s,transform .25s var(--ease)}
.nw-pdp .nw-news__form button:hover{background:var(--mint);transform:translateY(-1px)}

/* ============ STICKY ATC (anche desktop) ============ */
.nw-pdp .nw-pdp__sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--nw-line,rgba(12,78,43,.14));box-shadow:0 -14px 34px -14px rgba(9,58,32,.2);
  transform:translateY(110%);transition:transform .5s var(--ease);
  align-items:center;gap:15px;padding:10px 28px}
.nw-pdp .nw-pdp__sticky.is-visible{transform:none}
.nw-pdp .nw-pdp__sticky-thumb{width:46px;height:46px;object-fit:contain;background:var(--mist);border-radius:12px;padding:5px}
.nw-pdp .nw-pdp__sticky-name{font-family:'Lora',serif;font-weight:600;font-size:15px;line-height:1.25}
.nw-pdp .nw-pdp__sticky-name small{display:block;font-family:'Lato',sans-serif;color:var(--nw-muted,#55645A);font-size:12px;font-weight:400}
.nw-pdp .nw-pdp__sticky-price{margin-left:auto;font-family:'Lora',serif;font-weight:700;font-size:21px;color:var(--nw-forest,#0C4E2B);white-space:nowrap}
.nw-pdp .nw-pdp__sticky-btn{flex:0 0 auto!important;width:auto!important;display:inline-flex;align-items:center;gap:9px;background:var(--nw-forest,#0C4E2B);color:#fff;border:0;border-radius:14px;font-weight:900;font-size:15px;padding:14px 26px;cursor:pointer;white-space:nowrap;transition:background .25s}
.nw-pdp .nw-pdp__sticky-btn:hover{background:var(--deep)}

/* ============ RESPONSIVE ============ */
@media(max-width:1020px){
  .nw-pdp .nw-pdp__top{grid-template-columns:1fr;gap:30px}
  /* width:100% è indispensabile, non ridondante: con margin-inline:auto la
     galleria smette di essere stirata dalla griglia e si dimensiona sul
     contenuto. Il contenuto è il packshot, che però con .is-photo diventa
     position:absolute — così al clic sulla seconda miniatura il riquadro
     restava senza contenuto in flusso e collassava da ~290px a 150px. */
  .nw-pdp .nw-pdp__gallery{position:static;max-width:520px;margin-inline:auto;width:100%}
  .nw-pdp .nw-pdp__main{width:100%}
  .nw-pdp .nw-pdp__revgrid{grid-template-columns:1fr}
  .nw-pdp .nw-revsum{position:static}
  .nw-specwrap{grid-template-columns:1fr}
  .nw-routine{grid-template-columns:1fr;max-width:430px}
  .nw-routine__plus{transform:rotate(90deg);padding:2px 0}
  .nw-who-row{grid-template-columns:1fr;max-width:460px}
  /* ingredienti: stack centrato (la row ora è flex; vince anche sul legacy
     @560 di style.css che la rimetteva column/stretch con foto 84px) */
  .nw-pdp .nw-ingr-row{flex-direction:column;align-items:center;max-width:460px}
  .nw-pdp .nw-ingr-row>.nw-ingr{flex:0 0 auto;width:100%}
  /* il legacy mobile di style.css mette il nome a sinistra: ricentra tutto */
  .nw-pdp .nw-ingr__name,.nw-pdp .nw-ingr__desc{text-align:center}
  .nw-sensory{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nw-pdp .nw-pdp__sticky-name{display:none}
  .nw-pdp .nw-pdp__sticky-btn{flex:1}
  /* Su 390px la frase si spezzava in tre righe attorno a "Spedizioni →", che le
     stava in mezzo: il link va a capo, allineato sotto il testo. */
  .nw-pdp a.nw-delivery{flex-wrap:wrap;row-gap:6px}
  .nw-pdp a.nw-delivery > span:first-of-type{flex:1 1 0;min-width:0}
  .nw-pdp .nw-delivery__cta{flex:1 0 100%;margin-left:30px}
  .nw-pdp .nw-pdp__buyrow{flex-direction:column;align-items:flex-start;gap:12px}
  .nw-gal-bot{width:96px;height:96px;border-width:5px}
  .nw-pdp .nw-ingr{display:block;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .nw-pdp *,.nw-pdp *::before,.nw-pdp *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ============================================================
   TASK pdp-howto — APPENDERE IN CODA A: assets/css/pdp-finito.css
   (dev'essere DOPO le regole esistenti .nw-pdp__howto / .nw-pdp__pharma-ico
   / .nw-pdp__deep, così vince i pareggi di specificità sui rebuild).
   Tutte le classi nuove: .nw-howto2* · .nw-pharm* · .nw-appro*
   Variabili (--mist/--mint/--deep/--ease) ereditate da .nw-pdp.
   ============================================================ */

/* ============ 2) BOX "Anche in farmacia" — logo croce di farmacia ============ */
/* Croce greca PIENA a bracci arrotondati + fogliolina che spunta dal braccio
   superiore (SVG inline nel PHP, fill currentColor): forest su cerchio mint
   48px. La classe è nuova → le regole .nw-pdp__pharma-ico (forest/42-44px,
   svg bianco) non si applicano più. Il layout flex del box .nw-pdp__pharma
   resta invariato. */
.nw-pdp .nw-pharm-ico{flex:0 0 48px;width:48px;height:48px;border-radius:999px;background:var(--mint,#CFE3D5);display:grid;place-items:center;color:var(--nw-forest,#0C4E2B)}
.nw-pdp .nw-pharm-ico .nw-pharm-cross{width:27px;height:27px;display:block;fill:currentColor;stroke:none}

/* ============ 1) MODO D'USO — 2 colonne (foto + step) su banda mist ============ */
/* La sezione conserva la classe .nw-pdp__howto → eredita GRATIS: sfondo mist,
   margin-inline full-bleed e la regola fratello che estende la banda al
   "consiglio del farmacista". Qui azzeriamo solo il padding-inline (che
   ricacciava il contenuto nel container) così la foto può sfondare a sinistra. */
.nw-pdp .nw-howto2{padding-inline:0;padding-top:clamp(46px,6vw,80px)}
.nw-howto2__wrap{width:min(1200px,100% - 48px);margin-inline:auto}
/* testata CENTRATA come le altre sezioni della pagina (pattern head--center),
   per tutti i tier: accordion, testo libero e 3-step generico. */
.nw-howto2__head{text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.nw-howto2__head .nw-sec__eyebrow,.nw-howto2__head .nw-sec__title{text-align:center}
.nw-howto2__head .nw-sec__title{margin:10px auto 0}

.nw-howto2__inner{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,60px);align-items:stretch}
/* margin-left negativo su grid item = il box si allarga verso SINISTRA fino al
   bordo viewport (50% è metà del container, 50vw metà viewport → left edge = 0).
   Il bordo destro resta sul binario della griglia. Radius solo lato interno. */
/* Riquadro 4:3 nella colonna (niente full-bleed): il vecchio box ~2:1 in cover
   decapitava le foto 4:3 (packshot/testi tagliati — feedback utente su
   arnica-crema). Box ratio = ratio foto → crop ~zero. */
.nw-howto2__media{position:relative;aspect-ratio:4/3;align-self:center;width:100%;border-radius:18px;overflow:hidden;background:var(--mint,#CFE3D5)}
.nw-howto2__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nw-howto2__panel{align-self:center;min-width:0}
/* senza NESSUNA foto (repeater senza icona + niente featured): il PHP non
   stampa il media e aggiunge --nomedia → pannello a colonna singola centrata */
.nw-howto2--nomedia .nw-howto2__inner{grid-template-columns:1fr;max-width:720px;margin-inline:auto}

.nw-howto2__steps{border-top:1px solid var(--nw-line,rgba(12,78,43,.14))}
.nw-howto2__step{border-bottom:1px solid var(--nw-line,rgba(12,78,43,.14))}
.nw-howto2__sum{list-style:none;display:flex;align-items:center;gap:18px;padding:20px 2px;cursor:pointer}
.nw-howto2__sum::-webkit-details-marker{display:none}
.nw-howto2__sum:hover .nw-howto2__st{color:var(--nw-forest,#0C4E2B)}
.nw-howto2__lab{flex:1 1 auto;min-width:0}
.nw-howto2__num{display:block;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--nw-label,#456150);margin-bottom:5px}
.nw-howto2__st{display:block;font-family:'Lora',serif;font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:#1a1a1a;text-transform:none;transition:color .25s var(--ease,ease)}
.nw-howto2__ar{flex:0 0 auto;width:22px;height:22px;color:var(--nw-forest,#0C4E2B);transition:transform .3s var(--ease,ease)}
.nw-howto2__step[open] .nw-howto2__ar{transform:rotate(45deg)}
.nw-howto2__step[open] .nw-howto2__st{color:var(--nw-forest,#0C4E2B)}
.nw-howto2__body{padding:2px 0 22px}
.nw-howto2__body p{margin:0;font-size:15px;line-height:1.7;color:#3a3a3a;max-width:56ch}
.nw-howto2__free{font-size:15px;line-height:1.7;color:#3a3a3a}
.nw-howto2__free p{margin:0 0 12px}
.nw-howto2__free p:last-child{margin-bottom:0}

@media(max-width:1020px){
  /* mobile: foto sopra (4:3), step sotto */
  .nw-howto2__inner{grid-template-columns:1fr;gap:22px}
  .nw-howto2__media{margin-left:0;min-height:0;aspect-ratio:4/3;border-radius:18px}
  .nw-howto2__st{font-size:21px}
}

/* ============ 3) APPROFONDIMENTO — banda carta editoriale ============ */
/* Full-bleed carta + colonna 760 centrata. La sezione tiene .nw-pdp__deep
   (centratura eyebrow/titolo esistente) e aggiunge .nw-appro. */
.nw-pdp .nw-appro{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);background:var(--nw-carta,#FAF8F3)}
.nw-appro__head{text-align:center;margin-bottom:clamp(30px,4.5vw,50px)}
.nw-appro__body{max-width:760px;margin-inline:auto}
.nw-appro__block + .nw-appro__block{margin-top:clamp(36px,5vw,52px);padding-top:clamp(36px,5vw,52px);border-top:1px solid var(--nw-line,rgba(12,78,43,.14))}
.nw-pdp .nw-appro__h3{font-family:'Lora',serif;font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:balance;color:var(--nw-forest,#0C4E2B);text-transform:none;margin:0 0 16px}
.nw-appro__media{margin:0 0 22px;border-radius:16px;overflow:hidden;box-shadow:0 18px 38px -18px rgba(9,58,32,.22)}
.nw-appro__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.nw-appro__rich{font-size:16px;line-height:1.75;color:#3a3a3a}
.nw-appro__rich > p{margin:0 0 16px}
.nw-appro__rich > p:last-child{margin-bottom:0}
/* titoli interni provenienti dalla descrizione (HTML sporco): Lora, mai UPPERCASE.
   Specificità 0,2,1 batte .elementor-kit-6 h2 (0,1,1). */
.nw-pdp .nw-appro__rich h2,.nw-pdp .nw-appro__rich h3{font-family:'Lora',serif;font-weight:600;font-size:23px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance;color:var(--nw-forest,#0C4E2B);text-transform:none;margin:30px 0 14px}
.nw-appro__rich ul,.nw-appro__rich ol{margin:4px 0 16px;padding-left:24px}
.nw-appro__rich li{margin:0 0 8px;line-height:1.7}
.nw-appro__rich li::marker{color:var(--nw-forest,#0C4E2B);font-weight:700}
.nw-appro__rich strong{color:var(--deep,#093A20)}
/* primo paragrafo del primo blocco = lead editoriale in serif */
.nw-appro__body > .nw-appro__block:first-child .nw-appro__rich > p:first-of-type{font-family:'Lora',serif;font-size:19.5px;line-height:1.65;color:var(--nw-ink,#1C2A20)}

@media(max-width:760px){
  .nw-appro__rich{font-size:15.5px}
  .nw-appro__block + .nw-appro__block{margin-top:30px;padding-top:30px}
  .nw-appro__media{border-radius:14px;margin-bottom:18px}
  .nw-appro__body > .nw-appro__block:first-child .nw-appro__rich > p:first-of-type{font-size:17.5px}
}

/* ============ Recensioni PDP: stato vuoto + form CENTRATI ============
   "Cosa dicono i clienti" ha già la testata centrata; il paragrafo
   "Ancora nessuna recensione" e il form (max-width 720) restavano a sinistra. */
.nw-pdp .nw-pdp__noreview{text-align:center;font-size:16px;margin:6px auto 0}
.nw-pdp .nw-revform{margin-left:auto;margin-right:auto}
/* Intestazione cliccabile del modulo recensione (ora un <details> chiuso). */
.nw-pdp .nw-revform__open{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none}
.nw-pdp .nw-revform__open::-webkit-details-marker{display:none}
.nw-pdp .nw-revform__open::marker{content:''}
.nw-pdp .nw-revform__open h3{margin:0}
.nw-pdp .nw-revform__open:focus-visible{outline:2px solid var(--nw-forest,#0C4E2B);outline-offset:4px;border-radius:6px}
.nw-pdp .nw-revform__chev{flex:0 0 auto;color:var(--nw-forest,#0C4E2B);opacity:.6;transition:transform .18s ease}
.nw-pdp .nw-revform[open] .nw-revform__chev{transform:rotate(180deg)}
.nw-pdp .nw-revform[open] .nw-revform__open{margin-bottom:18px}
@media(prefers-reduced-motion:reduce){.nw-pdp .nw-revform__chev{transition:none}}

/* ============ BLOG PDP ("Approfondisci sul blog") = replica carosello HOME ============
   Stesse regole degli archivi (shop.css): testata centrata, track full-bleed
   con peek, card a terzi di viewport, dots pillola, frecce verdi ai bordi. */
.nw-pdp .nw-blog .nw-sec__head{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.nw-pdp .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);
}
@media(min-width:1100px){
  .nw-pdp .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){
  .nw-pdp .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);
  }
}
.nw-pdp .nw-blog .nw-slider--static .nw-blog__grid[data-nw-carousel]{justify-content:center}
.nw-pdp .nw-blog .nw-slider--static .nw-slider__ctrl{display:none}
.nw-pdp .nw-blog .nw-slider{position:relative}
.nw-pdp .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}
.nw-pdp .nw-blog .nw-slider__dot.is-active{width:20px;background:var(--nw-forest,#0C4E2B)}
.nw-pdp .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}
.nw-pdp .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)}
.nw-pdp .nw-blog .nw-slider__arrow svg{width:20px;height:20px;display:block}
.nw-pdp .nw-blog .nw-slider__arrow--prev{left:calc(50% - 50vw + 16px)}
.nw-pdp .nw-blog .nw-slider__arrow--next{right:calc(50% - 50vw + 16px)}

/* ============ COOKIE FAB vs BARRA STICKY ============
   Il bottone cookie (.wcc-btn-revisit-wrapper) copriva "Aggiungi al carrello"
   nella barra sticky del PDP (72px, presente a TUTTE le larghezze): alzato sopra
   la barra con lo stesso stacco dal bordo destro e dalla barra (16px).
   Scope: solo PDP (questo CSS carica solo li'). */
.wcc-btn-revisit-wrapper{ left:auto !important; right:16px !important; bottom:88px !important; }

/* ============ GALLERY: packshot intero, foto a pieno riquadro ============
   Il packshot resta "contain" (il prodotto si vede tutto, staccato dal bordo).
   Le foto d'uso, orizzontali, riempiono invece il loro riquadro: nel main e —
   con le stesse proporzioni — nella miniatura, così l'anteprima corrisponde a
   quello che si apre. Il padding di 4px va tolto o resta una cornice bianca. */
.nw-pdp .nw-pdp__thumb[data-photo="1"]{padding:0;overflow:hidden}
.nw-pdp .nw-pdp__thumb[data-photo="1"] img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:12px;display:block;
}

/* Galleria: la foto (non il packshot) riempie il riquadro quadrato.
   Il packshot resta "contain" al 72/78% — così il tubetto si vede intero sul
   fondo sfumato — mentre le foto d'uso, orizzontali, venivano rese piccolissime
   al centro (321×241 in un riquadro 536×557). Con .is-photo coprono tutto. */
/* il riquadro ha 44px di padding per staccare il packshot dal bordo: con la
   foto va tolto, altrimenti resta una cornice e l'immagine si ferma a 446px
   invece dei 536 del riquadro. L'immagine si ancora ai bordi in absolute. */
.nw-pdp .nw-pdp__main.is-photo{padding:0}
.nw-pdp .nw-pdp__main.is-photo > img{
  position:absolute; inset:0;
  width:100% !important; max-width:100% !important;
  height:100% !important; max-height:100% !important;
  object-fit:cover; object-position:center;
  border-radius:inherit;
}
.nw-pdp .nw-pdp__main.is-photo::after{opacity:0}       /* via l'alone da packshot */
.nw-pdp .nw-pdp__main.is-photo:hover > img{transform:scale(1.03) rotate(0)}

/* Loghi pagamento veri (SVG) al posto delle vecchie etichette di testo */
/* Erano 46×30 con 6px di padding: i marchi dentro restavano minuscoli e su
   telefono non si riconoscevano. 60×38 con padding più stretto ≈ +40% di logo. */
.nw-pdp .nw-payrow{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;align-items:center}
.nw-pdp .nw-payrow .nw-pay{display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:38px;padding:5px 7px;background:#fff;
  border:1px solid var(--nw-line,rgba(12,78,43,.14));border-radius:8px;box-sizing:border-box}
.nw-pdp .nw-payrow .nw-pay svg{width:100%;height:auto;display:block}
@media(max-width:640px){
  .nw-pdp .nw-payrow{gap:8px}
  .nw-pdp .nw-payrow .nw-pay{width:56px;height:36px}
}

/* Riga spedizione: ora è un link, si comporta come la riga "Trova farmacia" */
.nw-pdp a.nw-delivery{text-decoration:none;justify-content:space-between;transition:background .18s,border-color .18s}
.nw-pdp a.nw-delivery:hover{background:var(--mint,#CFE3D5)}
.nw-pdp a.nw-delivery > span:first-of-type{flex:1}
.nw-pdp .nw-delivery__cta{font-weight:800;white-space:nowrap;color:var(--nw-forest,#0C4E2B) !important;font-size:12.5px}

/* Recensioni PDP: con 1 o 2 recensioni la riga è centrata (non griglia monca).
   I link "Vedi tutte/Scrivi" tornano a riga piena sotto. */
.nw-pdp .nw-pdp__reviews:not(:has(> .nw-review:nth-child(3))){display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.nw-pdp .nw-pdp__reviews:not(:has(> .nw-review:nth-child(3))) > .nw-review{flex:0 1 300px;max-width:min(340px,100%)}
.nw-pdp .nw-pdp__reviews:not(:has(> .nw-review:nth-child(3))) > .nw-revmore,
.nw-pdp .nw-pdp__reviews:not(:has(> .nw-review:nth-child(3))) > .nw-revwrite{flex:1 0 100%}