/*
Theme Name: Nutriwell 2026
Theme URI: https://abncomunication.com
Author: ABNetworks
Description: Tema a blocchi per Nutriwell Shop. Costruito attorno al modo in cui questi prodotti si scelgono davvero — per fase del protocollo e per grammi di carboidrati — e leggero abbastanza da reggere le campagne pubblicitarie.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: Proprietary
Text Domain: abn-nutriwell
Tags: e-commerce, block-theme, full-site-editing
*/

/*
 * Un solo foglio di stile, servito intero: a questa dimensione spezzarlo in più file
 * costerebbe più richieste di quanto farebbe risparmiare in byte. Il sito precedente
 * ne caricava sette, più 106 script.
 *
 * I colori NON stanno qui: stanno in theme.json, così l'editor di WordPress li conosce
 * e il cliente può usarli senza toccare il codice.
 */

/* ---------- fondamenta ---------- */
body {
  margin: 0;
  font-family: var(--wp--preset--font-family--testo);
  color: var(--wp--preset--color--inchiostro);
  background: var(--wp--preset--color--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.4em;
}

a { color: var(--wp--preset--color--verde); }

:focus-visible {
  outline: 3px solid var(--wp--preset--color--verde);
  outline-offset: 2px;
}

/* ---------- testata ---------- */
.abn-testata {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--wp--preset--color--carta);
  border-bottom: 1px solid var(--wp--preset--color--linea);
}

.abn-marchio {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--wp--preset--color--inchiostro);
}
.abn-marchio span { color: var(--wp--preset--color--verde); }

/* ---------- vetrina (slider) ---------- */
.abn-vetrina {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  /* Altezza fissa dichiarata: senza, il testo sotto salta quando l'immagine arriva.
     È metà del punteggio di stabilità visiva che Google misura. */
  aspect-ratio: 5 / 2;
  background: var(--wp--preset--color--verde-tenue);
}
@media (max-width: 700px) { .abn-vetrina { aspect-ratio: 4 / 5; } }

.abn-lastra {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: clamp(16px, 4vw, 34px);
  color: #fff;
  opacity: 0;
  transition: opacity 0.9s ease;
  text-decoration: none;
}
.abn-lastra.attiva { opacity: 1; }
/* La PRIMA slide è visibile senza JavaScript: è l'immagine più grande della pagina e
   quella che Google cronometra. Se dovesse aspettare uno script, il punteggio crollerebbe. */
.abn-lastra:first-child { opacity: 1; }
.abn-vetrina.pronta .abn-lastra:first-child:not(.attiva) { opacity: 0; }

.abn-lastra img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.abn-lastra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 30, 20, 0.78), rgba(9, 30, 20, 0.1) 60%);
  z-index: -1;
}
.abn-lastra .occhiello {
  font-family: var(--wp--preset--font-family--dati);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}
.abn-lastra h2 { color: #fff; font-size: clamp(1.4rem, 3.4vw, 2.3rem); margin: 0; }
.abn-lastra p { margin: 0; opacity: 0.92; }
.abn-lastra .invito {
  justify-self: start;
  margin-top: 10px;
  background: #fff;
  color: var(--wp--preset--color--verde-cupo);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
}

.abn-punti { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 6px; }
.abn-punti button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.45); cursor: pointer;
}
.abn-punti button[aria-current="true"] { background: #fff; }

/* ---------- scheda prodotto nell'elenco ---------- */
ul.products li.product,
.wc-block-grid__product {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 14px;
  overflow: hidden;
  background: var(--wp--preset--color--carta);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-align: left;
}
ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(16,26,21,0.05), 0 10px 26px -14px rgba(16,26,21,0.3);
}
ul.products li.product img { border-radius: 0; margin: 0; }
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--testo);
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 10px 12px 0;
  margin: 0;
}
ul.products li.product .price { padding: 0 12px 12px; font-family: var(--wp--preset--font-family--dati); }

/* Fase e macro: il motivo per cui questo tema esiste. */
.abn-fase {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255,255,255,0.93);
  color: var(--wp--preset--color--verde-cupo);
  font-family: var(--wp--preset--font-family--dati);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
ul.products li.product { position: relative; }

.abn-macro {
  display: flex;
  gap: 10px;
  padding: 0 12px;
  font-family: var(--wp--preset--font-family--dati);
  font-size: 0.72rem;
}
.abn-macro .proteine { color: var(--wp--preset--color--verde); }
/* L'ambra è riservata ai carboidrati: è l'unico numero che il cliente vuole basso,
   e il colore lo dice prima delle parole. */
.abn-macro .carboidrati { color: var(--wp--preset--color--ambra); }

/* ---------- tabella nutrizionale ---------- */
.abn-nutrizione {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--wp--preset--font-family--dati);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  margin: 0 0 18px;
}
.abn-nutrizione caption {
  text-align: left;
  font-family: var(--wp--preset--font-family--testo);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--tenue);
  padding-bottom: 6px;
}
.abn-nutrizione td { padding: 7px 0; border-top: 1px solid var(--wp--preset--color--linea); }
.abn-nutrizione td:last-child { text-align: right; font-weight: 600; }
.abn-nutrizione tr.chiave td { color: var(--wp--preset--color--ambra); }

/* ---------- disponibilità dal gestionale ---------- */
.abn-disponibilita {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde-cupo);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.abn-disponibilita .segnale {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wp--preset--color--verde); flex: none;
}
.abn-disponibilita.esaurito { background: #fdecec; color: #8c2f2f; }
.abn-disponibilita.esaurito .segnale { background: #c0392b; }

/* ---------- programmi (box) ---------- */
.abn-programma {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 18px;
  overflow: hidden;
  background: var(--wp--preset--color--carta);
}
.abn-programma .capo {
  padding: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--wp--preset--color--verde-cupo), var(--wp--preset--color--verde) 70%);
}
.abn-programma .capo h3 { color: #fff; margin: 0; }
.abn-programma .capo .occhiello {
  font-family: var(--wp--preset--font-family--dati);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85;
}
.abn-programma .contenuto { padding: 0 18px; }
.abn-programma .voce {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--wp--preset--color--linea);
  font-size: 0.9rem;
}
.abn-programma .voce:first-child { border-top: 0; }
.abn-programma .qta {
  font-family: var(--wp--preset--font-family--dati);
  font-size: 0.75rem; font-weight: 600;
  color: var(--wp--preset--color--verde-cupo);
  background: var(--wp--preset--color--verde-tenue);
  padding: 3px 8px; border-radius: 6px; min-width: 34px; text-align: center;
}
.abn-confronto-prezzo {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 18px; padding: 12px 14px; border-radius: 12px;
  background: var(--wp--preset--color--verde-tenue); color: var(--wp--preset--color--verde-cupo);
}
.abn-confronto-prezzo .separati {
  text-decoration: line-through; color: var(--wp--preset--color--tenue);
  font-family: var(--wp--preset--font-family--dati);
}
.abn-confronto-prezzo .insieme {
  font-family: var(--wp--preset--font-family--dati); font-size: 1.35rem; font-weight: 600;
}

/* ---------- ricette ---------- */
.abn-ricette { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.abn-ricetta {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--carta);
  text-decoration: none; color: inherit; display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.abn-ricetta:hover { transform: translateY(-3px); box-shadow: 0 10px 26px -14px rgba(16,26,21,0.3); }
.abn-ricetta img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.abn-ricetta .corpo { padding: 12px 14px 16px; }
.abn-ricetta h3 { font-size: 1.05rem; margin: 0 0 4px; }
.abn-ricetta .dati {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
  font-family: var(--wp--preset--font-family--dati); font-size: 0.75rem;
  color: var(--wp--preset--color--tenue);
}
.abn-ricetta .dati b { color: var(--wp--preset--color--verde); font-weight: 600; }
.abn-ricetta .dati i { font-style: normal; color: var(--wp--preset--color--ambra); font-weight: 600; }

.abn-ingrediente {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--wp--preset--color--linea);
}
.abn-ingrediente:first-of-type { border-top: 0; }
.abn-ingrediente .segno {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  background: var(--wp--preset--color--verde); color: #fff;
  display: grid; place-items: center; font-size: 0.75rem;
}
/* Gli ingredienti che il negozio non vende restano nell'elenco, spenti: nasconderli
   renderebbe la ricetta incompleta, fingere di venderli farebbe fallire il carrello. */
.abn-ingrediente.altrove { color: var(--wp--preset--color--tenue); }
.abn-ingrediente.altrove .segno {
  background: transparent; color: transparent;
  border: 2px solid var(--wp--preset--color--linea);
}
.abn-ingrediente .costo { margin-left: auto; font-family: var(--wp--preset--font-family--dati); font-size: 0.8rem; }

/* ---------- pulsanti ---------- */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt {
  background: var(--wp--preset--color--verde);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  padding: 12px 20px;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { filter: brightness(1.06); }
.woocommerce button.button:active { transform: scale(0.99); }

/* ---------- piede ---------- */
.abn-piede {
  background: var(--wp--preset--color--verde-cupo);
  color: #dff0e6;
  padding: 44px 0 32px;
  margin-top: 56px;
}
.abn-piede a { color: #fff; }

/* ---------- rispetto delle preferenze ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .abn-lastra { transition: none; }
}

/* Il velo rende cliccabile tutta l'immagine della vetrina senza rubare il fuoco al
   pulsante: sta sotto il testo, non sopra. */
.abn-lastra .velo { position: absolute; inset: 0; z-index: 1; }
.abn-lastra .contenuto { position: relative; z-index: 2; }

.abn-vetrina .punti {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 8px;
}
.abn-vetrina .punti button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.45); cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.abn-vetrina .punti button[aria-current="true"] { width: 26px; border-radius: 5px; background: #fff; }

.abn-programmi,
.abn-ricette-correlate {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px;
}

.abn-programma .azione,
.abn-ricetta-scheda .azione { margin: 0 18px 18px; }

.abn-ricetta-scheda { max-width: 44rem; }
.abn-ricetta-scheda h2 { margin-top: 2rem; }
.abn-ricetta-scheda ol { padding-left: 1.2rem; }
.abn-ricetta-scheda ol li { margin-bottom: 0.9rem; }

/* ---------- recensioni ----------
   Il plugin porta i dati e stampa le classi; qui si vestono con i colori del tema. */
.abn-rec__stelle { color: var(--wp--preset--color--ambra); }
.abn-rec__vuote { color: var(--wp--preset--color--linea); }

.abn-rec-sintesi strong,
.abn-rec__testa strong { font-family: var(--wp--preset--font-family--titoli); }

.abn-rec__voce {
  padding: 16px 18px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  background: var(--wp--preset--color--carta);
}
.abn-rec__voce h4 { font-family: var(--wp--preset--font-family--titoli); font-size: 1.02rem; }

.abn-rec__ok {
  border-color: var(--wp--preset--color--verde);
  color: var(--wp--preset--color--verde);
}

.abn-rec__risposta {
  border-left-color: var(--wp--preset--color--verde);
  background: var(--wp--preset--color--verde-tenue);
  border-radius: 0 10px 10px 0;
}

/* ---------- testimonianze ---------- */
.abn-testi__voce {
  background: var(--wp--preset--color--carta);
  border-color: var(--wp--preset--color--linea);
}
.abn-testi__voce blockquote {
  font-family: var(--wp--preset--font-family--titoli);
  font-size: 1.06rem;
}
.abn-testi__voce figcaption a {
  color: var(--wp--preset--color--verde);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---------- scheda prodotto in griglia ----------
   Immagine quadrata e prezzo pieno barrato accanto allo scontato: la differenza si legge
   in un colpo d'occhio, che è il momento in cui si decide di aprire la scheda. */
ul.products li.product img,
.wc-block-grid__product img { aspect-ratio: 1; object-fit: cover; }

.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del {
  opacity: 0.55;
  font-size: 0.86em;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price ins {
  text-decoration: none;
  font-weight: 600;
  color: var(--wp--preset--color--verde-cupo);
}

/* ---------- blocchi categoria della home ---------- */
.abn-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.abn-scelta {
  display: grid;
  gap: 6px;
  padding: 22px 20px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--wp--preset--color--inchiostro);
  background: var(--wp--preset--color--verde-tenue);
  border: 1px solid transparent;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.abn-scelta:hover { border-color: var(--wp--preset--color--verde); transform: translateY(-2px); }
.abn-scelta strong { font-family: var(--wp--preset--font-family--titoli); font-size: 1.1rem; }
.abn-scelta span { font-size: 0.86rem; opacity: 0.75; }

/* ---------- ricerca ---------- */
.abn-cerca .wp-block-search__button {
  background: transparent;
  color: var(--wp--preset--color--inchiostro);
  border: 0;
  padding: 6px;
}
.abn-cerca .wp-block-search__input {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  padding: 8px 14px;
  min-width: 0;
}
/* Sul telefono il campo resta chiuso sull'icona: la testata ha già logo, conto e carrello,
   e una barra di ricerca larga li spingerebbe fuori. */
@media (max-width: 780px) {
  .abn-cerca .wp-block-search__input { display: none; }
}

/* =========================================================================
   DISEGNO — seconda passata, questa volta guardando le schermate.
   I difetti visti: la vetrina larga come una colonna di testo invece che come
   la pagina, le schede prodotto che sfondavano il proprio bordo (il pulsante
   era piu' largo della scheda), le immagini alte il doppio del necessario e i
   titoli sottolineati come collegamenti.
   ========================================================================= */

/* ---------- la vetrina occupa la pagina ----------
   Un'apertura larga come una colonna di testo non e' un'apertura: e' un riquadro.
   Qui esce dai margini del contenuto e prende tutta la larghezza utile. */
.abn-vetrina,
.abn-apertura {
  /* Da bordo a bordo dello schermo: si esce dal contenitore con i margini negativi
     calcolati sulla larghezza della finestra, che e' l'unico modo che funziona anche
     quando il contenitore ha un padding suo. */
  position: relative;
  width: 100%;
  max-width: none;
  margin-top: 0;
  border-radius: 0;
}
.abn-vetrina { aspect-ratio: 21 / 8; min-height: 340px; }
@media (max-width: 900px) { .abn-vetrina { aspect-ratio: 4 / 5; min-height: 0; } }

.abn-lastra .contenuto {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  /* Il testo si allinea alla colonna del contenuto, non al bordo dello schermo: una
     riga che comincia prima del logo fa sembrare la pagina storta. */
  padding-left: max(24px, calc((100vw - var(--wp--style--global--wide-size, 1180px)) / 2));
  padding-right: 24px;
  max-width: none;
}
.abn-lastra h2 {
  color: #fff;
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.abn-lastra .occhiello {
  font-family: var(--wp--preset--font-family--dati);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
/* Il pulsante non e' un collegamento nel testo: la sottolineatura di WordPress qui
   fa sembrare rotto un bottone. */
.abn-lastra .invito,
.abn-apertura .invito {
  justify-self: start;
  margin-top: 14px;
  text-decoration: none;
}

/* Senza foto la lastra e' il fondo colorato del tema: chi non ha ancora lo scatto
   ha comunque una vetrina che sembra fatta apposta. */
.abn-lastra.senza-foto {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--wp--preset--color--verde-cupo) 0%, var(--wp--preset--color--verde) 68%, #22a35c 100%);
}

/* Le lastre con foto: verde a sinistra col messaggio, pannello bianco a destra con
   la confezione. Le foto del catalogo sono scontornate su bianco — su un fondo verde
   resterebbero dentro un rettangolo bianco che sembra un errore, e provare a fonderle
   col colore (mix-blend-mode) le fa sparire. Un pannello dichiarato invece si legge
   sempre, ed e' anche il taglio che usano i negozi che vendono davvero. */
.abn-lastra:not(.senza-foto) {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--wp--preset--color--verde-cupo) 0%, var(--wp--preset--color--verde) 70%, #22a35c 100%);
}
.abn-lastra:not(.senza-foto) picture {
  position: absolute;
  inset: 0 0 0 auto;
  width: 44%;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 90px 0 0 90px;
  box-shadow: -18px 0 40px -22px rgba(0,0,0,0.45);
  /* La regola originale mandava le immagini DIETRO lo sfondo della lastra (z-index -1),
     perche' li' facevano da fotografia di fondo. Qui la fotografia sta davanti, dentro il
     suo pannello: senza questo, l'immagine c'e' ma non si vede — e non c'e' errore da
     nessuna parte che lo dica. */
  z-index: 1;
}
/* Il velo scuro serviva alle foto di fondo: sul pannello bianco lo sporcherebbe. */
.abn-lastra:not(.senza-foto)::after { display: none; }
.abn-lastra:not(.senza-foto) img {
  /* max-* e non width/height in percentuale: dentro una griglia centrata l'altezza
     percentuale si risolve su un contenitore di altezza automatica, cioe' su zero, e
     l'immagine sparisce senza dire niente. */
  position: static;
  width: auto;
  height: auto;
  max-width: 74%;
  max-height: 74%;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 14px 26px rgba(15,26,20,0.18));
}
.abn-lastra:not(.senza-foto) .contenuto { max-width: min(46%, 34rem); }

@media (max-width: 900px) {
  .abn-lastra:not(.senza-foto) picture {
    inset: auto 0 0 0;
    width: 100%;
    height: 44%;
    border-radius: 24px 24px 0 0;
    box-shadow: none;
  }
  .abn-lastra:not(.senza-foto) .contenuto { max-width: none; align-content: start; padding-top: 34px; }
}

/* ---------- ritmo delle sezioni ---------- */
.abn-sezione__titolo {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.2rem);
  letter-spacing: -0.02em;
  margin: clamp(52px, 7vw, 88px) 0 6px;
}
.abn-sezione__sotto { color: var(--wp--preset--color--tenue); margin: 0 0 26px; max-width: 52ch; }

/* ---------- griglia dei prodotti ----------
   Quattro per riga su schermo largo: con tre le schede diventano enormi e la
   pagina si allunga senza mostrare piu' merce. */
.woocommerce ul.products,
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1100px) { .woocommerce ul.products, .wc-block-grid__products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .woocommerce ul.products, .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

.wc-block-grid__product-title,
.wc-block-grid__product-price,
.wc-block-grid__product-add-to-cart { text-align: left; }

ul.products li.product,
.wc-block-grid__product {
  /* box-sizing esplicito: senza, il pulsante largo 100% piu' i suoi 26px di
     padding sfondava il bordo della scheda. Era il difetto piu' visibile.
     E max-width sciolto: WooCommerce mette max-width:25% sulle schede per la
     sua griglia a colonne, e dentro una cella di griglia quel 25% diventa un
     quarto della cella — schede larghe settanta pixel. */
  box-sizing: border-box;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  flex: initial !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  background: var(--wp--preset--color--carta);
  overflow: hidden;
  padding: 0 0 14px;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(15,26,20,0.04), 0 16px 34px -18px rgba(15,26,20,0.35);
}

ul.products li.product a img,
.wc-block-grid__product-image img {
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: 210px;
  padding: 16px;
  background: #fff;
  margin: 0;
  box-sizing: border-box;
}

ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--wp--preset--font-family--testo);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0 14px;
  margin: 6px 0;
  color: var(--wp--preset--color--inchiostro);
  /* Nomi lunghi tagliati a due righe: cosi' le schede restano alte uguali e la
     griglia non fa i gradini. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
/* I titoli dentro le schede non sono collegamenti da sottolineare: e' l'intera
   scheda a essere cliccabile. */
ul.products li.product a,
.wc-block-grid__product-link { text-decoration: none; }

ul.products li.product .price,
.wc-block-grid__product-price {
  padding: 0 14px;
  margin: 0 0 12px;
  text-align: left;
  font-family: var(--wp--preset--font-family--dati);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wp--preset--color--verde-cupo);
}
ul.products li.product .price del,
.wc-block-grid__product-price del { opacity: 0.5; font-size: 0.82em; font-weight: 400; margin-right: 6px; }
ul.products li.product .price ins,
.wc-block-grid__product-price ins { text-decoration: none; }

ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  box-sizing: border-box;
  display: block;
  width: calc(100% - 28px);
  margin: auto 14px 0;
  padding: 12px 10px;
  text-align: center;
  font-size: 0.9rem;
}

/* ---------- pulsanti ---------- */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt {
  box-sizing: border-box;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 600;
  transition: transform 0.14s ease, filter 0.14s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wp-block-button__link:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* ---------- testata ---------- */
.abn-testata { background: rgba(255,255,255,0.94); backdrop-filter: saturate(1.1) blur(8px); }
.abn-marchio { letter-spacing: -0.02em; font-size: 1.4rem; }

/* ---------- piede ---------- */
.abn-piede {
  background: var(--wp--preset--color--verde-cupo);
  color: #fff;
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(40px, 6vw, 68px) 0 28px;
}
.abn-piede a { color: #fff; opacity: 0.92; }
.abn-piede a:hover { opacity: 1; }
.wc-block-mini-cart__badge { background: var(--wp--preset--color--verde); }

/* ---------- le quattro porte ----------
   Erano quattro rettangoli verdi tutti uguali: si distinguevano solo leggendoli, che è
   il contrario di quello che deve fare un ingresso. Il simbolo si riconosce prima. */
.abn-scelte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.abn-scelta {
  display: grid;
  gap: 4px;
  padding: 26px 22px 24px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--wp--preset--color--inchiostro);
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.abn-scelta:hover {
  border-color: var(--wp--preset--color--verde);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(15, 26, 20, 0.35);
}
.abn-scelta__segno {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde);
}
.abn-scelta__segno svg { width: 28px; height: 28px; }
.abn-scelta:hover .abn-scelta__segno { background: var(--wp--preset--color--verde); color: #fff; }
.abn-scelta strong { font-family: var(--wp--preset--font-family--titoli); font-size: 1.12rem; }
.abn-scelta span { font-size: 0.88rem; color: var(--wp--preset--color--tenue); }

/* ---------- catalogo con i filtri ---------- */
.abn-catalogo { align-items: flex-start; }

.abn-filtri__blocco {
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.abn-filtri__blocco h3,
.abn-filtri__blocco .wp-block-heading {
  font-family: var(--wp--preset--font-family--testo);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--tenue);
  margin: 0 0 10px;
}
.abn-filtri .wp-block-search__input {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 10px;
  padding: 10px 12px;
}
.abn-filtri label { font-size: 0.9rem; }

.abn-catalogo__barra {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wp--preset--color--linea);
  font-size: 0.9rem;
  color: var(--wp--preset--color--tenue);
}
.abn-catalogo__barra select {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.9rem;
  background: var(--wp--preset--color--carta);
}

/* Sul telefono i filtri stanno sopra la griglia: un pannello laterale su 390 pixel
   diventa una colonna di due centimetri, e non lo usa nessuno. */
@media (max-width: 900px) {
  .abn-catalogo { flex-wrap: wrap; }
  .abn-filtri { flex-basis: 100% !important; }
  .abn-filtri__blocco { margin-bottom: 10px; }
}

/* La griglia del blocco «product collection»: senza queste righe esce una colonna sola,
   con le immagini grandi come manifesti. */
.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1200px) { .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.wc-block-product-template .wc-block-product {
  box-sizing: border-box;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  overflow: hidden;
  padding: 0 0 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wc-block-product-template .wc-block-product:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(15,26,20,0.04), 0 16px 34px -18px rgba(15,26,20,0.35);
}
.wc-block-product-template .wc-block-components-product-image { margin: 0; }
.wc-block-product-template .wc-block-components-product-image img {
  aspect-ratio: 1;
  object-fit: contain;
  padding: 14px;
  background: #fff;
  box-sizing: border-box;
}
.wc-block-product-template .wp-block-post-title {
  padding: 0 14px;
  margin: 8px 0 6px;
  font-family: var(--wp--preset--font-family--testo);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wc-block-product-template .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--inchiostro); }
.wc-block-product-template .wc-block-components-product-price {
  padding: 0 14px;
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--dati);
  font-weight: 600;
  color: var(--wp--preset--color--verde-cupo);
}
.wc-block-product-template .wp-block-button { margin: auto 14px 0; }
.wc-block-product-template .wp-block-button__link { display: block; width: 100%; text-align: center; padding: 12px 10px; font-size: 0.88rem; }