/*
Theme Name: Nutriwell 2026
Theme URI: https://abncomunication.com
Author: ABNetworks
Description: Tema a blocchi per Nutriwell Shop. Le ricette aprono, i prodotti sono gli ingredienti: si compra per fase del protocollo e per grammi di carboidrati, e il sito resta leggero abbastanza da reggere le campagne.
Version: 2.2.5
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 e un solo carattere. I colori NON stanno qui: stanno in
 * theme.json, cosi' l'editor di WordPress li conosce e il cliente li usa senza codice.
 *
 * DUE ZONE, e la differenza si vede: il VERDE e' il negozio (merce, prezzi, carrello),
 * l'AMBRA e' la cucina (ricette, ingredienti, programmi). Chi scorre capisce dov'e'
 * senza leggere le intestazioni. L'ambra dice anche una seconda cosa, sempre la stessa:
 * carboidrati. E' l'unico numero che il cliente vuole basso, e non serve altro colore.
 */

/* ---------- fondamenta ---------- */
:root {
  /* Curve condivise: una sola volta, qui. Il «ease» del browser e' pigro in uscita e
     fa sembrare lento tutto cio' che dovrebbe rispondere subito. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --raggio: 12px;
  --raggio-piccolo: 8px;
  --misura: 68ch;                       /* riga di testo: oltre non si legge, si scorre */
}

body {
  margin: 0;
  background: var(--wp--preset--color--fondo);
  color: var(--wp--preset--color--inchiostro);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0 0 0.45em;
}
h1 { font-weight: 900; }

p { max-width: var(--misura); }

/* I numeri incolonnati: prezzi, grammi, quantita'. Senza questo le cifre ballano
   da una riga all'altra e una colonna di prezzi sembra storta. */
.price, .amount, .abn-cifra, .abn-nutrizione td, .abn-macro, .abn-ricetta .dati {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--wp--preset--color--verde); text-underline-offset: 2px; }

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

/* ---------- fascia di servizio ----------
   Le tre promesse del negozio, sopra il logo. Non e' una promozione a tempo: e' cio'
   che distingue questo negozio da una spedizione qualsiasi, e va detto prima di tutto. */
.abn-servizio {
  background: var(--wp--preset--color--verde-cupo);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.abn-servizio .wp-block-group { padding-top: 9px; padding-bottom: 9px; gap: 26px; }
.abn-servizio p { margin: 0; max-width: none; }
/* L'offerta di benvenuto e' l'unica voce della barra che chiede di fare qualcosa: il codice
   sta in un riquadro perche' va letto e ricopiato, non solo scorso con l'occhio. */
.abn-servizio__offerta { color: #fff; }
.abn-servizio__offerta strong {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .abn-servizio .wp-block-group { justify-content: center; }
  /* Sul telefono resta solo l'offerta: e' la voce che vale la riga di spazio che occupa. */
  .abn-servizio p:not(.abn-servizio__offerta) { display: none; }
  .abn-servizio__offerta { text-align: center; font-size: 0.76rem; }
}

/* ---------- testata ---------- */
.abn-testata {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 244, 237, 0.92);
  backdrop-filter: saturate(1.15) blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--linea);
}

.abn-marchio a, .abn-marchio {
  font-weight: 900;
  font-size: 1.45rem;
  letter-spacing: -0.045em;
  text-decoration: none;
  color: var(--wp--preset--color--inchiostro);
}

.abn-testata .wp-block-navigation a {
  color: var(--wp--preset--color--inchiostro);
  font-weight: 600;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.abn-testata .wp-block-navigation a:hover {
  border-bottom-color: var(--wp--preset--color--verde);
  text-decoration: none;
}

.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;
  background: var(--wp--preset--color--carta);
  padding: 9px 15px;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
}
/* Sul telefono il campo resta chiuso sull'icona: la testata ha gia' logo, conto e
   carrello, e una barra larga li spingerebbe fuori. */
@media (max-width: 780px) {
  .abn-cerca .wp-block-search__input { display: none; }
}

.wc-block-mini-cart__badge {
  background: var(--wp--preset--color--verde);
  color: #fff;
  font-weight: 700;
}

/* ---------- vetrina (l'apertura) ----------
   Da bordo a bordo. Un'apertura larga come una colonna di testo non e' un'apertura. */
.abn-vetrina,
.abn-apertura {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--wp--preset--color--verde-cupo);
}
/* L'altezza dell'apertura la detta la FOTO, non una proporzione decisa a tavolino: il
   pannello bianco e' quadrato — le immagini del catalogo sono scontornate su bianco e in
   quadrato non si tagliano — e la lastra e' alta quanto quel quadrato piu' il suo bordo.
   Cosi' l'apertura resta bassa e sotto la piega c'e' subito la merce, che e' quello che
   il cliente e' venuto a vedere. */
.abn-vetrina {
  aspect-ratio: auto;
  height: clamp(360px, 31vw, 460px);
  min-height: 0;
}
@media (max-width: 900px) { .abn-vetrina { height: clamp(520px, 116vw, 620px); min-height: 0; aspect-ratio: auto; } }

.abn-lastra {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  text-decoration: none;
  color: #fff;
}
.abn-lastra.attiva { opacity: 1; }
/* La PRIMA lastra e' visibile senza JavaScript: e' l'immagine piu' grande della pagina
   e quella che Google cronometra. Se aspettasse uno script, il punteggio crollerebbe. */
.abn-lastra:first-child { opacity: 1; }
.abn-vetrina.pronta .abn-lastra:first-child:not(.attiva) { opacity: 0; }

/* Il fondo delle lastre: verde pieno, non un gradiente decorativo. Un solo passaggio
   di luce in alto a sinistra basta a non farlo sembrare una campitura piatta stampata. */
.abn-lastra {
  background:
    radial-gradient(110% 130% at 8% -10%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%),
    var(--wp--preset--color--verde-cupo);
}

.abn-lastra .contenuto {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: min(50%, 36rem);
  display: grid;
  align-content: center;
  gap: 10px;
  /* 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, 1240px)) / 2));
  padding-right: 24px;
}
.abn-lastra .occhiello {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #a9e3bd;
  max-width: none;
}
.abn-lastra h2 {
  color: #fff;
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.038em;
  margin: 0;
}
.abn-lastra p { color: rgba(255, 255, 255, 0.88); margin: 0; }
.abn-lastra .invito {
  justify-self: start;
  margin-top: 8px;
  background: #fff;
  color: var(--wp--preset--color--verde-cupo);
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
}
.abn-lastra .invito:hover { background: var(--wp--preset--color--verde-tenue); }

/* La foto del prodotto su una lastra bianca: le immagini del catalogo sono scontornate
   su bianco, e su un fondo verde resterebbero dentro un rettangolo che sembra un errore.
   Un pannello dichiarato si legge sempre. */
/* Le due immagini della lastra.
   Lo SFONDO riempie tutto e sta sotto il velo verde: e' l'atmosfera. Il RIQUADRO e' il
   pannello bianco a destra, dove la confezione si deve riconoscere per intero — per
   quello ha una forma quadrata e l'immagine dentro sta «contenuta», non ritagliata. */
.abn-lastra__sfondo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Il soggetto scivola nella meta' destra, libera dal testo. */
  object-fit: cover;
  object-position: 68% center;
}

/* Il velo verde. Senza, un titolo bianco su una confezione chiara non si legge; con la
   sfumatura la foto resta viva a destra invece di sparire sotto una campitura piatta. */
.abn-lastra.con-sfondo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 61, 34, 0.94) 0%, rgba(10, 61, 34, 0.86) 38%, rgba(10, 61, 34, 0.52) 72%, rgba(10, 61, 34, 0.42) 100%),
    linear-gradient(180deg, rgba(10, 61, 34, 0.1) 0%, rgba(10, 61, 34, 0.4) 100%);
}

.abn-lastra picture {
  position: absolute;
  z-index: 2;
  /* Quadrato: altezza piena meno il bordo, larghezza di conseguenza. E' la forma in cui
     una confezione scontornata sta comoda, e nessun ritaglio taglia niente. */
  inset: 26px auto 26px auto;
  right: max(24px, calc((100vw - var(--wp--style--global--wide-size, 1240px)) / 2));
  height: calc(100% - 52px);
  width: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: var(--raggio);
}
.abn-lastra picture img {
  /* max-* e non altezze in percentuale: dentro una griglia centrata l'altezza percentuale
     si risolve su un contenitore alto zero, e l'immagine sparisce senza dirlo. */
  position: static;
  width: auto;
  height: auto;
  max-width: 74%;
  max-height: 78%;
  object-fit: contain;
}

/* Sul telefono la fotografia di sfondo resta il fondo, ma il velo si fa piu' fitto: su
   390 pixel il testo passa sopra il centro dell'immagine, non su un margine. */
@media (max-width: 900px) {
  .abn-lastra__sfondo { object-position: center; }
  .abn-lastra.con-sfondo::before {
    background:
      linear-gradient(180deg, rgba(10, 61, 34, 0.55) 0%, rgba(10, 61, 34, 0.86) 55%, rgba(10, 61, 34, 0.95) 100%);
  }
  /* Con tutte e due le immagini, sul telefono vince lo sfondo: pannello, titolo, dato e
     pulsante su 390 pixel diventano una pila che non si legge piu'. */
  .abn-lastra.con-sfondo.con-riquadro picture { display: none; }

  /* Solo riquadro: torna la pila di sempre, foto sopra e testo sotto. */
  .abn-lastra.con-riquadro:not(.con-sfondo) {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 16px;
    padding: 20px 0 24px;
  }
  .abn-lastra.con-riquadro:not(.con-sfondo) picture {
    position: static;
    inset: auto;
    right: auto;
    height: 100%;
    width: auto;
    max-width: min(70%, 300px);
    aspect-ratio: 1;
    justify-self: center;
  }
  .abn-lastra.con-riquadro:not(.con-sfondo) .contenuto {
    position: static;
    inset: auto;
    width: auto;
    align-content: start;
    padding: 0 24px;
  }
  .abn-lastra.senza-foto { grid-template-rows: auto; }
  .abn-lastra.senza-foto .contenuto { align-content: center; }

  .abn-lastra.con-sfondo .contenuto {
    width: auto;
    align-content: end;
    padding: 0 24px 34px;
    inset: 0;
  }
}

/* Due pulsanti affiancati: il secondo e' un contorno, cosi' la scelta principale resta chiara. */
.abn-lastra .inviti { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.abn-lastra .inviti .invito { margin-top: 0; }
.abn-lastra .invito.invito--secondario {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}
.abn-lastra .invito.invito--secondario:hover { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 2px #fff; }
/* Sul telefono le frecce stanno in basso: con due pulsanti il testo sale un poco per non finirci sotto. */
@media (max-width: 900px) {
  .abn-lastra .contenuto:has(.inviti) { padding-bottom: 78px; }
  .abn-lastra .inviti { gap: 10px; }
  .abn-lastra .inviti .invito { padding: 12px 22px; }
}

/* Riquadro fotografico (il negozio): la foto riempie il pannello e ne prende gli angoli. */
.abn-lastra.riquadro-foto picture { overflow: hidden; background: var(--wp--preset--color--verde-cupo); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.6); }
.abn-lastra.riquadro-foto picture img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* Il velo rende cliccabile tutta la lastra senza rubare il fuoco al pulsante: sta sotto
   il testo, non sopra. */
.abn-lastra .velo { position: absolute; inset: 0; z-index: 2; }

.abn-vetrina .punti {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 9px;
  display: flex; justify-content: center; gap: 0;
}
/* Il pulsante e' alto e largo almeno 24 px (area di tocco chiesta da Lighthouse, 2026-10-21);
   il pallino che si vede e' il ::before, 9 px, centrato: l'aspetto resta lo stesso. */
.abn-vetrina .punti button {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  transition: width 0.2s ease;
}
.abn-vetrina .punti button::before {
  content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 9px; margin-top: -4.5px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.45);
  transition: background 0.2s ease;
}
.abn-vetrina .punti button[aria-current="true"] { width: 44px; }
.abn-vetrina .punti button[aria-current="true"]::before { background: #fff; }

/* ---------- ritmo delle sezioni ---------- */
.abn-sezione__titolo {
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: clamp(56px, 7vw, 92px) 0 4px;
}
.abn-sezione__sotto {
  color: var(--wp--preset--color--tenue);
  margin: 0 0 30px;
  font-size: 1.05rem;
}
/* Sottotitolo attaccato al titolo: fra i due non ci va lo stacco di sezione. */
.abn-sezione__titolo + .abn-sezione__sotto { margin-top: 0; }

/* Titolo e descrizione sulla STESSA riga: la descrizione spiega il titolo, non apre un
   discorso nuovo, e andando a capo spingeva i prodotti sotto la piega dello schermo.
   Allineate sulla linea di base, così i due corpi diversi non ballano. */
.abn-sezione__testa {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: clamp(12px, 1.6vw, 24px);
  row-gap: 2px;
  margin: clamp(56px, 7vw, 92px) 0 30px;
}
.abn-sezione__testa .abn-sezione__titolo { margin: 0; flex: none; }
/* La descrizione prende quello che resta e si accorcia da sola invece di spingere fuori
   il titolo; `min-width: 0` è quello che permette al testo di restringersi dentro un flex. */
/* `max-width: none` è la riga che conta: il tema limita i paragrafi a ~730px per
   leggibilità, ed è giusto in un articolo — qui però la descrizione ha tutta la riga
   accanto al titolo, e quel limite la mandava a capo con mezza riga vuota a destra. */
.abn-sezione__testa .abn-sezione__sotto {
  margin: 0;
  flex: 1 1 18ch;
  min-width: 0;
  max-width: none;
  font-size: 1rem;
  text-wrap: pretty;
}

/* Sotto i 780px la riga non ci sta: si torna a due righe, perché leggere viene prima
   dell'allineamento. */
@media (max-width: 780px) {
  .abn-sezione__testa { display: block; }
  .abn-sezione__testa .abn-sezione__titolo { margin-bottom: 4px; }
}

/* ---------- le quattro porte ----------
   Chi arriva su un sito di alimenti proteici non conosce i nomi dei prodotti: conosce il
   proprio obiettivo. Si entra da li'. Tessere piatte con filetto, nessuna ombra: il
   simbolo si riconosce prima della parola. */
.abn-scelte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.abn-scelta {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 24px 22px 26px;
  border-radius: var(--raggio);
  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.16s ease, background 0.16s ease;
}
.abn-scelta:hover { border-color: var(--wp--preset--color--verde); background: #fff; }
.abn-scelta__segno {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 14px;
  border-radius: var(--raggio-piccolo);
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde);
}
.abn-scelta__segno svg { width: 26px; height: 26px; }
.abn-scelta:hover .abn-scelta__segno { background: var(--wp--preset--color--verde); color: #fff; }
.abn-scelta strong { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }
.abn-scelta span { font-size: 0.9rem; color: var(--wp--preset--color--tenue); }

/* ---------- la cucina ----------
   La zona calda. Qui non si vende una confezione, si vende una cena: il fondo cambia e
   si capisce di essere passati dall'altra parte del bancone. */
.abn-cucina .abn-sezione__titolo { margin-top: 0; }

/* ---------- ricette ---------- */
.abn-ricette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.abn-ricetta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--wp--preset--color--carta);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease;
}
.abn-ricetta:hover { border-color: var(--wp--preset--color--ambra); }
.abn-ricetta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.abn-ricetta .corpo { padding: 15px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.abn-ricetta h3 { font-size: 1.12rem; font-weight: 800; margin: 0 0 5px; }
.abn-ricetta p { font-size: 0.92rem; color: var(--wp--preset--color--tenue); margin: 0; }
.abn-ricetta .dati {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto; padding-top: 14px;
  font-size: 0.78rem; font-weight: 700;
}
.abn-ricetta .dati span {
  background: var(--wp--preset--color--fondo);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--wp--preset--color--tenue);
}
.abn-ricetta .dati b { color: var(--wp--preset--color--verde); font-weight: 800; }
.abn-ricetta .dati i { font-style: normal; color: var(--wp--preset--color--ambra); font-weight: 800; }

/* La cucina senza ricette caricate: si dice cosa arrivera' e si manda al catalogo. Un
   buco muto in mezzo alla home vale meno di una frase onesta. */
.abn-cucina-vuota {
  border: 1px dashed #e0c9a6;
  border-radius: var(--raggio);
  padding: clamp(28px, 5vw, 46px);
  background: rgba(255, 255, 255, 0.55);
}
.abn-cucina-vuota h3 { font-size: 1.35rem; margin-bottom: 8px; }
.abn-cucina-vuota p { color: #7a5326; }

/* ---------- scheda ricetta ---------- */
.abn-ricetta-scheda { max-width: var(--misura); }
.abn-ricetta-scheda h2 { margin-top: 2.2rem; }
.abn-ricetta-scheda .occhiello { font-size: 1.15rem; color: var(--wp--preset--color--tenue); }
.abn-ricetta-scheda ol { padding-left: 1.2rem; }
.abn-ricetta-scheda ol li { margin-bottom: 0.9rem; }

.abn-ingredienti { margin: 0 0 4px; }
.abn-ingrediente {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  border-top: 1px solid var(--wp--preset--color--linea);
}
.abn-ingrediente:first-child { border-top: 0; }
/* Quelli in vendita sono caselle vere: si spuntano, e il puntatore lo dice. */
label.abn-ingrediente { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  label.abn-ingrediente:hover { background: rgba(16, 87, 50, 0.05); }
}
.abn-ingrediente input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.abn-ingrediente .segno {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  background: var(--wp--preset--color--verde);
  color: #fff;
  border: 2px solid var(--wp--preset--color--verde);
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Tolta la spunta la casella si svuota: e' l'unico segnale che dice cosa finira' nel
   carrello, e deve essere leggibile da lontano quanto la spunta. */
.abn-ingrediente input:not(:checked) ~ .segno {
  background: transparent;
  color: transparent;
  border-color: var(--wp--preset--color--linea);
}
.abn-ingrediente input:not(:checked) ~ .nome { color: var(--wp--preset--color--tenue); text-decoration: line-through; }
.abn-ingrediente input:focus-visible ~ .segno { outline: 2px solid var(--wp--preset--color--verde); outline-offset: 2px; }

/* Gli ingredienti che il negozio non vende restano nell'elenco ma senza casella:
   nasconderli renderebbe la ricetta incompleta, dargli un quadratino da spuntare
   prometterebbe una spesa che non possiamo fare. */
.abn-ingrediente.altrove { color: var(--wp--preset--color--tenue); }
.abn-ingrediente.altrove .segno {
  background: transparent;
  border: 0;
  width: 22px;
  position: relative;
}
.abn-ingrediente.altrove .segno::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--linea);
}
.abn-ingrediente .costo { margin-left: auto; font-weight: 600; font-size: 0.9rem; }

/* ---------- il pulsante della spesa ---------- */
/* E' l'azione della pagina: prima era un collegamento sottolineato in fondo all'elenco,
   e si confondeva con il testo della ricetta. Ora e' largo quanto la lista, verde pieno,
   con il carrello disegnato accanto — si vede da fermo e da lontano. */
.abn-spesa { margin: 18px 0 0; }
.abn-spesa__pulsante {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  /* Niente width:100%: un elemento in flex e' gia' di blocco e riempie la riga da solo.
     Con la larghezza esplicita, il padding si somma e il pulsante sfonda a destra. */
  box-sizing: border-box;
  padding: 16px 22px;
  border-radius: 999px;
  background: var(--wp--preset--color--verde, #105732);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(16, 87, 50, 0.22);
  transition: background-color 170ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 170ms cubic-bezier(0.23, 1, 0.32, 1), transform 170ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-spesa__pulsante svg { width: 22px; height: 22px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .abn-spesa__pulsante:hover {
    background: var(--wp--preset--color--verde-cupo, #0a3d22);
    box-shadow: 0 14px 30px rgba(16, 87, 50, 0.28);
    transform: translateY(-1px);
  }
}
.abn-spesa__pulsante:active { transform: translateY(0); }
.abn-spesa__pulsante.spento {
  background: var(--wp--preset--color--linea);
  color: var(--wp--preset--color--tenue);
  box-shadow: none;
  cursor: not-allowed;
}
.abn-spesa__nota { margin: 10px 0 0; font-size: 0.88rem; color: var(--wp--preset--color--tenue); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .abn-spesa__pulsante,
  .abn-ingrediente .segno { transition: none; }
  .abn-spesa__pulsante:hover { transform: none; }
}

/* ---------- griglia dei prodotti ----------
   Quattro per riga su schermo largo: con tre le tessere 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: 16px;
  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: 12px; } }

ul.products li.product,
.wc-block-grid__product,
.wc-block-product-template .wc-block-product {
  /* box-sizing esplicito: senza, il pulsante largo 100% piu' il suo padding sfonda il
     bordo della tessera. E max-width sciolto: WooCommerce mette max-width:25% per la sua
     griglia a colonne, e dentro una cella di griglia quel 25% diventa un quarto della
     cella — tessere larghe settanta pixel. */
  box-sizing: border-box;
  position: relative;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  flex: initial !important;
  float: 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: var(--raggio);
  overflow: hidden;
  padding: 0 0 14px;
  text-align: left;
  transition: border-color 0.16s ease;
}
/* Niente sollevamento e niente ombra al passaggio: su una griglia di ventiquattro
   tessere e' un tremolio continuo. Cambia il filetto, che basta a dire "sei qui". */
ul.products li.product:hover,
.wc-block-grid__product:hover,
.wc-block-product-template .wc-block-product:hover { border-color: var(--wp--preset--color--verde); }

ul.products li.product a,
.wc-block-grid__product-link,
.wc-block-product-template .wp-block-post-title a { text-decoration: none; }

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

ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wc-block-product-template .wp-block-post-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  padding: 0 14px;
  margin: 8px 0 6px;
  color: var(--wp--preset--color--inchiostro);
  /* Nomi lunghi tagliati a due righe: cosi' le tessere 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.64em;
}

/* Il prezzo grosso: e' la seconda cosa che si guarda dopo la foto, e su un catalogo in
   promozione permanente la differenza fra pieno e scontato deve leggersi da lontano. */
ul.products li.product .price,
.wc-block-grid__product-price,
.wc-block-product-template .wc-block-components-product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 14px;
  margin: 0 0 14px;
  text-align: left;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--inchiostro);
}
ul.products li.product .price del,
.wc-block-grid__product-price del,
.wc-block-product-template .wc-block-components-product-price del {
  opacity: 1;
  color: var(--wp--preset--color--tenue);
  font-size: 0.72em;
  font-weight: 500;
  order: 2;
}
ul.products li.product .price ins,
.wc-block-grid__product-price ins,
.wc-block-product-template .wc-block-components-product-price ins {
  text-decoration: none;
  color: var(--wp--preset--color--saldo);
}

ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-product-template .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;
  font-weight: 700;
}

/* L'omaggio da scegliere dopo l'ordine (ABN Connect): stessa griglia e stessa tessera del
   catalogo, con «Scelgo questo» al posto del carrello. */
.abn-regalo { padding: 18px 18px 20px; border: 1px solid var(--wp--preset--color--linea); border-radius: var(--raggio); background: var(--wp--preset--color--fondo); opacity: 1; }
.abn-regalo__titolo { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.abn-regalo__scelte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .abn-regalo__scelte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .abn-regalo__scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.abn-regalo__scelta {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0 0 14px;
  text-align: left;
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  overflow: hidden;
  transition: border-color 0.16s ease;
}
.abn-regalo__scelta:hover { border-color: var(--wp--preset--color--verde); }
.abn-regalo__link { display: block; color: inherit; text-decoration: none; }
.abn-regalo__scelta .abn-foto { position: relative; }
.abn-regalo__scelta img {
  display: block;
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: 220px;
  padding: 14px;
  background: #fff;
  border-radius: 0;
  box-sizing: border-box;
}
.abn-regalo__scelta .nome { display: -webkit-box; }
.abn-regalo__scelta .valore { color: var(--wp--preset--color--inchiostro); }
.abn-regalo__scelta .valore small { font-size: 0.68em; font-weight: 600; color: var(--wp--preset--color--tenue); }
.abn-regalo__scelta .button {
  box-sizing: border-box;
  display: block;
  width: calc(100% - 28px);
  margin: auto 14px 0;
  padding: 12px 10px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
}
.abn-regalo__nota { margin: 14px 0 0; font-weight: 500; color: var(--wp--preset--color--tenue); font-size: 0.9rem; }

/* ---------- fase e macronutrienti ----------
   Il motivo per cui questo tema esiste: in questo negozio si compra per fase del
   protocollo, e la fase deve stare sulla tessera, non tre clic piu' in la'. */
.abn-fase {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde-cupo);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 4px 10px;
  border-radius: 999px;
}
.abn-fase--2 { background: #e8eddc; color: #4b5b25; }
.abn-fase--3 { background: #f0eedc; color: #6a6321; }

.abn-macro {
  display: flex;
  gap: 12px;
  padding: 0 14px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 700;
}
.abn-macro .proteine { color: var(--wp--preset--color--verde); }
.abn-macro .carboidrati { color: var(--wp--preset--color--ambra); }

/* L'offerta: due riquadri impilati in basso a destra.
   Il rosso — l'unico rosso del sito — dice CHE c'e' uno sconto e si vede scorrendo la
   griglia; il verde sotto dice QUANTO, e lo si legge dopo essersi fermati. */
.abn-offerta {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(10, 61, 34, 0.18);
  line-height: 1.1;
}
.abn-offerta__che,
.abn-offerta__quanto {
  display: block;
  padding: 5px 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
}
.abn-offerta__che {
  background: var(--wp--preset--color--saldo);
  font-size: 0.68rem;
  text-transform: uppercase;
}
.abn-offerta__quanto {
  background: var(--wp--preset--color--verde, #105732);
  font-size: 0.9rem;
}

/* Il bollino «SCONTO» di WooCommerce esce di scena: due etichette che dicono la stessa
   cosa in due angoli diversi non raddoppiano il messaggio, lo rendono rumore. */
.wc-block-components-product-sale-badge,
.onsale,
ul.products li.product .onsale,
.wc-block-grid__product-onsale { display: none !important; }

/* ---------- scheda prodotto ---------- */
.wc-block-components-product-image img,
.woocommerce-product-gallery img { border-radius: var(--raggio); background: #fff; }

.abn-nutrizione {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0 0 20px;
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  overflow: hidden;
}
.abn-nutrizione caption {
  text-align: left;
  padding-left: 2px !important;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wp--preset--color--tenue);
  padding: 0 0 8px;
}
.abn-nutrizione td { padding: 10px 14px; border-top: 1px solid var(--wp--preset--color--linea); }
.abn-nutrizione tr:first-child td { border-top: 0; }
.abn-nutrizione td:last-child { text-align: right; font-weight: 700; }
.abn-nutrizione tr.chiave td { color: var(--wp--preset--color--ambra); font-weight: 800; }
/* Sul telefono la tabella sta fra prezzo e pulsante: piu' piccola, perche' non spinga
   l'acquisto sotto la piega (richiesta del negozio, 2026-09-13). */
@media (max-width: 600px) {
  .abn-nutrizione { font-size: 0.76rem; margin-bottom: 14px; }
  .abn-nutrizione caption { font-size: 0.74rem; padding-bottom: 5px; }
  .abn-nutrizione td { padding: 5px 12px; }
  .abn-valori { font-size: 0.82rem; }
  .abn-valori caption { font-size: 0.76rem; }
  .abn-valori th, .abn-valori td { padding: 5px 4px; }
}

.abn-disponibilita {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde-cupo);
  padding: 12px 14px;
  border-radius: var(--raggio-piccolo);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 16px;
  max-width: var(--misura);
}
.abn-disponibilita .segnale {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--wp--preset--color--verde); flex: none;
}
.abn-disponibilita.esaurito { background: #fbe9e7; color: #7f2118; }
.abn-disponibilita.esaurito .segnale { background: var(--wp--preset--color--saldo); }

.abn-punti-guadagnati {
  font-size: 0.95rem;
  color: var(--wp--preset--color--ambra);
  background: var(--wp--preset--color--ambra-tenue);
  border-radius: var(--raggio-piccolo);
  padding: 11px 14px;
  margin-bottom: 16px;
}

/* ---------- programmi ---------- */
.abn-programmi,
.abn-ricette-correlate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.abn-programma {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--wp--preset--color--carta);
  display: flex;
  flex-direction: column;
}
.abn-programma .capo {
  padding: 20px;
  color: #fff;
  background: var(--wp--preset--color--verde-cupo);
}
.abn-programma .capo h3 { color: #fff; margin: 0; font-size: 1.3rem; font-weight: 800; }
.abn-programma .capo .occhiello { font-size: 0.85rem; font-weight: 700; color: #a9e3bd; margin: 0 0 4px; }
.abn-programma .contenuto { padding: 0 20px; }
.abn-programma .voce {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--wp--preset--color--linea);
  font-size: 0.94rem;
}
.abn-programma .voce:first-child { border-top: 0; }
.abn-programma .qta {
  font-size: 0.78rem; font-weight: 800;
  color: var(--wp--preset--color--verde-cupo);
  background: var(--wp--preset--color--verde-tenue);
  padding: 3px 9px; border-radius: 999px; min-width: 34px; text-align: center;
}
.abn-confronto-prezzo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 16px 20px; padding: 13px 15px;
  border-radius: var(--raggio-piccolo);
  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); }
.abn-confronto-prezzo .insieme { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.abn-programma .azione,
.abn-ricetta-scheda .azione { margin: auto 20px 20px; }

/* ---------- pulsanti ---------- */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt {
  box-sizing: border-box;
  background: var(--wp--preset--color--verde);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 700;
  font-family: inherit;
  transition: background 0.15s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover { background: var(--wp--preset--color--verde-cupo); }
.woocommerce button.button:active { transform: scale(0.99); }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--verde);
  border: 2px solid currentColor;
}

/* ---------- fascia di fiducia ---------- */
.abn-fiducia { border-top: 1px solid var(--wp--preset--color--linea); }
.abn-fiducia h3 { font-size: 1.05rem; margin-bottom: 6px; }
.abn-fiducia p { color: var(--wp--preset--color--tenue); font-size: 0.95rem; }

/* ---------- 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: var(--raggio);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.abn-filtri__blocco h3,
.abn-filtri__blocco .wp-block-heading {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--inchiostro);
  margin: 0 0 10px;
}
.abn-filtri .wp-block-search__input { border: 1px solid var(--wp--preset--color--linea); border-radius: var(--raggio-piccolo); padding: 10px 12px; }
.abn-filtri label { font-size: 0.92rem; }

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

/* Il pulsante «Filtri» della barra: esiste solo sul telefono, dove la colonna e' nascosta. */
.abn-filtri-apri { display: none; }
.abn-filtri-velo { display: none; }
.abn-filtri__testa, .abn-filtri__piede { display: none; }

/* Sul telefono i filtri NON stanno piu' sopra la griglia (si scorrevano nove gruppi
   prima del primo prodotto): la colonna e' un pannello che scivola da sinistra quando
   si tocca «Filtri», con il velo scuro sulla pagina dietro. */
@media (max-width: 900px) {
  .abn-catalogo { flex-wrap: wrap; }
  .abn-filtri-apri {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--wp--preset--color--linea);
    border-radius: 999px;
    background: var(--wp--preset--color--carta);
    color: var(--wp--preset--color--inchiostro);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
  }
  .abn-filtri-apri__quante {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--wp--preset--color--verde);
    color: #fff;
    font-size: 0.75rem;
  }
  .abn-filtri-apri__quante[hidden] { display: none; }

  .abn-filtri {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    width: min(86vw, 380px);
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 0 14px 96px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--wp--preset--color--fondo);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    transform: translateX(-104%);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
    visibility: hidden;
  }
  .abn-filtri-aperti .abn-filtri { transform: none; visibility: visible; }
  .abn-filtri-aperti { overflow: hidden; }
  .abn-filtri-velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 69;
    background: rgba(10, 61, 34, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .abn-filtri-aperti .abn-filtri-velo { opacity: 1; pointer-events: auto; }

  .abn-filtri__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -14px 12px;
    padding: 14px 18px;
    background: var(--wp--preset--color--fondo);
    border-bottom: 1px solid var(--wp--preset--color--linea);
    font-size: 1.05rem;
  }
  .abn-filtri__chiudi {
    width: 36px;
    height: 36px;
    border: 1px solid var(--wp--preset--color--linea);
    border-radius: 50%;
    background: var(--wp--preset--color--carta);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
  }
  .abn-filtri__piede {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: min(86vw, 380px);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: var(--wp--preset--color--fondo);
    border-top: 1px solid var(--wp--preset--color--linea);
  }
  .abn-filtri__piede .abn-filtri__mostra { width: 100%; padding: 13px; font-weight: 700; cursor: pointer; }
  .abn-filtri__blocco { margin-bottom: 10px; }
  .abn-filtri .abn-filtri__blocco:first-of-type { margin-top: 0; }
}

/* 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: 16px;
  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 .wp-block-button { margin: auto 14px 0; }
.wc-block-product-template .wp-block-button__link { display: block; width: 100%; }

/* I filtri stanno dentro la loro colonna: il cursore del prezzo e la lista delle
   categorie, lasciati liberi, escono dal riquadro e finiscono sotto ai prodotti. */
.abn-filtri .wp-block-woocommerce-product-filters,
.abn-filtri .wp-block-woocommerce-product-filters * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.abn-filtri .wc-block-product-filter-price-slider { width: 100%; padding-right: 4px; }
.abn-filtri .wc-block-product-filter-price-slider__content { flex-wrap: wrap; gap: 8px; }
.abn-filtri input[type="text"],
.abn-filtri input[type="number"] {
  width: 100%;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio-piccolo);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.88rem;
}
/* Un elenco di trenta categorie riempirebbe lo schermo: si scorre dentro il riquadro. */
.abn-filtri .wc-block-product-filter-checkbox-list { max-height: 240px; overflow-y: auto; padding-right: 6px; }
.abn-filtri .wc-block-product-filter-checkbox-list__item { padding: 3px 0; }

/* ---------- recensioni e testimonianze ---------- */
.abn-rec__stelle { color: var(--wp--preset--color--ambra); }
.abn-rec__vuote { color: var(--wp--preset--color--linea); }
.abn-rec__voce,
.abn-testi__voce {
  padding: 18px 20px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  background: var(--wp--preset--color--carta);
}
.abn-rec__voce h4 { font-size: 1.02rem; font-weight: 800; }
.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 var(--raggio-piccolo) var(--raggio-piccolo) 0;
}
.abn-testi__voce blockquote { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.abn-testi__voce figcaption a { color: var(--wp--preset--color--verde); text-underline-offset: 2px; }

/* ---------- piede ---------- */
.abn-piede {
  background: var(--wp--preset--color--verde-cupo);
  color: #cfe4d5;
  margin-top: clamp(56px, 8vw, 96px);
  /* Solo sopra e sotto: lo `0` sui lati di prima azzerava il margine del sito e sul
     telefono il piede toccava il bordo dello schermo. */
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: 28px;
}
.abn-piede h3 { color: #fff; font-size: 1rem; font-weight: 800; }
.abn-piede a { color: #fff; text-decoration: none; }
.abn-piede a:hover { text-decoration: underline; }
.abn-piede .abn-marchio, .abn-piede .abn-marchio a { color: #fff; }
.abn-piede .wp-block-navigation { gap: 8px; }

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

/* La fase sulla scheda prodotto: non e' una pastiglia sopra una foto, e' una riga di
   testo sotto il prezzo, e va letta come tale. */
.abn-fase-scheda {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde-cupo);
}
.abn-fase-scheda.abn-fase--2 { background: #e8eddc; color: #4b5b25; }
.abn-fase-scheda.abn-fase--3 { background: #f0eedc; color: #6a6321; }

/* ---------- ricetta senza foto ----------
   Finche' il negozio non ha fotografato il piatto, la tessera non resta monca e non
   finge nemmeno di avere una foto: un pannello caldo con un piatto disegnato tiene il
   ritmo della griglia e si vede a colpo d'occhio che li' andra' uno scatto vero.
   Il disegno e' dentro il CSS: nessun file, nessuna richiesta in piu'. */
.abn-ricetta:not(:has(img))::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;
  background-color: #f5e3c8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none' stroke='%23c99a5e' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='60' cy='45' r='22'/%3E%3Ccircle cx='60' cy='45' r='14'/%3E%3Cpath d='M28 30v30M96 30v30'/%3E%3Cpath d='M24 30v9a4 4 0 0 0 8 0v-9'/%3E%3Cpath d='M92 30c0 6 8 6 8 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44%;
}

/* ---------- pastiglie dei filtri ----------
   La fase si sceglie a pastiglie e non a caselle: sono tre valori che si escludono quasi
   sempre, e una pastiglia si preme col pollice. Il resto resta a caselle, perche' li' si
   spunta piu' di una cosa. */
.wc-block-product-filter-chips__item {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  background: var(--wp--preset--color--carta);
  color: var(--wp--preset--color--inchiostro);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.wc-block-product-filter-chips__item:hover { border-color: var(--wp--preset--color--verde); }
.wc-block-product-filter-chips__item[aria-checked="true"] {
  background: var(--wp--preset--color--verde);
  border-color: var(--wp--preset--color--verde);
  color: #fff;
}

/* I filtri attivi in cima: si tolgono uno per uno senza ricaricare la testa. */
.wc-block-product-filter-removable-chips__item {
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde-cupo);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 600;
}
.wc-block-product-filter-clear-button {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wp--preset--color--verde);
}
.abn-filtri .wc-block-product-filter-checkbox-list__label { font-size: 0.9rem; }

/* ---------- movimento ----------
   Regola unica: si muove solo cio' che RISPONDE a un gesto. Niente sezioni che entrano
   scorrendo, niente tessere che si sollevano da sole: su una griglia di ventiquattro
   prodotti sarebbe un tremolio continuo, e non direbbe niente a nessuno.
   Chi ha chiesto meno movimento non ne vede nessuno (regola piu' in alto). */
.woocommerce a.button.added,
.woocommerce button.button.added {
  /* Il prodotto e' entrato nel carrello: il pulsante lo conferma per un istante, poi
     torna com'era. E' l'unico momento in cui il sito si prende la parola da solo. */
  animation: abn-conferma 0.45s ease;
}
@keyframes abn-conferma {
  0%   { background: var(--wp--preset--color--verde); }
  35%  { background: var(--wp--preset--color--verde-vivo); }
  100% { background: var(--wp--preset--color--verde); }
}

.abn-scelta__segno { transition: background 0.16s ease, color 0.16s ease; }

/* ---------- risposta al tocco ----------
   Ogni cosa premibile si abbassa di un soffio sotto il dito. Non e' decorazione: su
   telefono, fra il tocco e il carrello che si aggiorna passa il tempo di una chiamata di
   rete, e senza questo il cliente non sa se ha premuto davvero — e preme due volte.
   0.97 e non 0.9: deve sentirsi, non vedersi. */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.abn-lastra .invito,
.abn-sugg__voce {
  transition: background 0.15s var(--ease-out), transform 0.16s var(--ease-out);
}
.wp-block-button__link:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.abn-lastra .invito:active,
.abn-sugg__voce:active { transform: scale(0.97); }

/* Il numero sul carrello quando cambia: la conferma sta DOVE e' arrivata la merce, non
   solo sul pulsante che si e' premuto. Il pulsante dice «ho sentito», il carrello dice
   «e' dentro». */
.wc-block-mini-cart__badge.abn-cresciuto { animation: abn-badge 0.32s var(--ease-out); }
@keyframes abn-badge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   MOVIMENTO E RIFINITURA — v2.1
   --------------------------------------------------------------------------
   La regola della v2 era «si muove solo cio' che risponde a un gesto». Resta
   vera per tutto cio' che si vede cento volte al giorno (le tessere di una
   griglia, i pulsanti, i filtri). Ma la home la si guarda una volta sola, ed
   e' il momento in cui il negozio deve fare colpo: li' il movimento ha un
   mestiere — accompagnare l'occhio, dire dove finisce una sezione e dove ne
   comincia un'altra.
   Ogni cosa qui sotto rispetta tre vincoli: si muovono SOLO transform e
   opacity (niente riflusso), niente dura piu' di 450 ms, e chi ha chiesto
   meno movimento non vede nulla (il blocco prefers-reduced-motion piu' in
   alto azzera durate e animazioni con !important).
   ========================================================================== */

:root {
  --durata-rapida: 160ms;
  --durata: 220ms;
  --durata-ampia: 420ms;
  /* Le ombre sono UNA sola famiglia: la stessa luce, tre intensita'. Ombre
     scelte a caso su elementi diversi sono la cosa che fa sembrare un sito
     montato a pezzi. */
  --ombra-tessera: 0 1px 2px rgba(46, 49, 42, 0.05), 0 10px 26px -14px rgba(46, 49, 42, 0.28);
  --ombra-alta: 0 2px 4px rgba(46, 49, 42, 0.06), 0 22px 48px -22px rgba(46, 49, 42, 0.38);
  --ombra-testata: 0 1px 0 rgba(46, 49, 42, 0.06), 0 14px 34px -24px rgba(46, 49, 42, 0.5);
}

/* Il valore di riserva serve all'editor classico (scheda prodotto): li' le variabili
   della tavolozza non ci sono e il testo selezionato diventava bianco su niente. */
::selection { background: var(--wp--preset--color--verde, #00733a); color: #fff; }

html { scroll-behavior: smooth; }

/* ---------- entrata delle sezioni ----------
   Il velo iniziale lo mette il JS (classe .abn-js sull'<html>), MAI il CSS da
   solo: se lo script non partisse, il contenuto resterebbe invisibile. Con
   questa forma, senza JavaScript la pagina e' semplicemente ferma e completa. */
[data-rivela] {
  transition:
    opacity var(--durata-ampia) var(--ease-out),
    transform var(--durata-ampia) var(--ease-out);
  transition-delay: var(--ritardo, 0ms);
}
.abn-js [data-rivela] {
  opacity: 0;
  transform: translateY(14px);
}
.abn-js [data-rivela].visibile {
  opacity: 1;
  transform: none;
}

/* ---------- testata che si stacca ----------
   Appena la pagina scorre, la testata smette di essere «parte del foglio» e
   diventa una barra sopra il contenuto: lo dice l'ombra, non un salto. */
.abn-testata {
  view-transition-name: abn-testata;
  transition:
    box-shadow var(--durata) var(--ease-out),
    background-color var(--durata) var(--ease-out);
}
.abn-testata.staccata {
  /* Piu' coperta di prima: adesso che la testata sta davvero ferma sopra i prodotti,
     con l'86% le foto trasparivano dietro i nomi delle categorie e il menu si leggeva
     a fatica. Il velo resta, la leggibilita' viene prima. */
  background: rgba(247, 244, 237, 0.95);
  box-shadow: var(--ombra-testata);
}

/* La riga di avanzamento: due pixel che dicono quanto manca alla fine della
   pagina. Si muove in scaleX — nessun ricalcolo di larghezza, mai. */
.abn-avanzamento {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform: scaleX(var(--avanzamento, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--wp--preset--color--verde), var(--wp--preset--color--verde-vivo));
  pointer-events: none;
}

/* Il filetto sotto le voci di menu cresce da sinistra invece di comparire. */
.abn-testata .wp-block-navigation a {
  position: relative;
  border-bottom: 0;
  padding-bottom: 6px;
}
.abn-testata .wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--wp--preset--color--verde);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--durata) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .abn-testata .wp-block-navigation a:hover::after { transform: scaleX(1); }
}
.abn-testata .wp-block-navigation a:focus-visible::after,
.abn-testata .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); }
.abn-testata .wp-block-navigation a:hover { border-bottom-color: transparent; }

/* ---------- vetrina: l'apertura ----------
   E' l'unico punto del sito visto una volta per visita, ed e' quello che
   decide se uno resta. Qui il movimento e' ammesso per intero. */

/* Il testo della lastra entra a scalini, non tutto insieme: l'occhio legge
   nell'ordine in cui le righe compaiono, che e' l'ordine giusto. */
.abn-vetrina.pronta .abn-lastra .contenuto > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--durata-ampia) var(--ease-out),
    transform var(--durata-ampia) var(--ease-out);
}
.abn-vetrina.pronta .abn-lastra.attiva .contenuto > * { opacity: 1; transform: none; }
.abn-vetrina.pronta .abn-lastra.attiva .contenuto > *:nth-child(1) { transition-delay: 90ms; }
.abn-vetrina.pronta .abn-lastra.attiva .contenuto > *:nth-child(2) { transition-delay: 150ms; }
.abn-vetrina.pronta .abn-lastra.attiva .contenuto > *:nth-child(3) { transition-delay: 210ms; }
.abn-vetrina.pronta .abn-lastra.attiva .contenuto > *:nth-child(4) { transition-delay: 270ms; }

/* La lastra sfuma E scorre di un soffio: la sola dissolvenza fra due foto su
   fondo uguale non si legge come «pagina nuova». */
.abn-lastra {
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}
.abn-vetrina.pronta .abn-lastra:not(.attiva) { transform: scale(1.015); }
.abn-vetrina.pronta .abn-lastra.attiva { transform: none; }

/* Il respiro della foto: nove secondi per il 4% di scala. Non si vede
   passare, si sente che il riquadro e' vivo. */
.abn-vetrina.pronta .abn-lastra.attiva picture img { animation: abn-respiro 9s var(--ease-out) both; }
@keyframes abn-respiro {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

.abn-lastra .invito {
  box-shadow: var(--ombra-tessera);
  transition:
    background var(--durata-rapida) var(--ease-out),
    box-shadow var(--durata) var(--ease-out),
    transform var(--durata-rapida) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .abn-lastra .invito:hover { box-shadow: var(--ombra-alta); }
}

/* I pallini diventano una barretta che si riempie: si vede quanto manca al
   cambio, e chi vuole leggere sa se ha tempo o se conviene fermare. */
.abn-vetrina .punti button {
  transition: width var(--durata) var(--ease-out);
}
.abn-vetrina .punti button i {
  display: block;
  position: absolute; left: 7px; right: 7px; top: 50%; height: 9px; margin-top: -4.5px;
  border-radius: 999px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.abn-vetrina .punti button[aria-current="true"] { width: 48px; }
.abn-vetrina .punti button[aria-current="true"]::before { background: rgba(255, 255, 255, 0.35); }
.abn-vetrina .punti button[aria-current="true"] i {
  animation: abn-riempi var(--pausa, 6000ms) linear both;
}
.abn-vetrina.in-pausa .punti button[aria-current="true"] i { animation-play-state: paused; }
@keyframes abn-riempi {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- tessere: la mano si vede ----------
   Il sollevamento e' di DUE pixel e solo con un puntatore fine: sul telefono
   non esiste il passaggio del mouse, e un «hover» simulato al tocco lascia la
   tessera accesa dopo che l'hai gia' lasciata. */
ul.products li.product,
.wc-block-grid__product,
.wc-block-product-template .wc-block-product {
  transition:
    border-color var(--durata) var(--ease-out),
    box-shadow var(--durata) var(--ease-out),
    transform var(--durata) var(--ease-out);
}
ul.products li.product a img,
.wc-block-grid__product-image img,
.wc-block-product-template .wc-block-components-product-image img {
  transition: transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  ul.products li.product:hover,
  .wc-block-grid__product:hover,
  .wc-block-product-template .wc-block-product:hover {
    border-color: var(--wp--preset--color--verde);
    box-shadow: var(--ombra-tessera);
    transform: translateY(-2px);
  }
  ul.products li.product:hover a img,
  .wc-block-grid__product:hover .wc-block-grid__product-image img,
  .wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img {
    transform: scale(1.045);
  }
  .abn-scelta:hover,
  .abn-ricetta:hover,
  .abn-programma:hover { box-shadow: var(--ombra-tessera); transform: translateY(-2px); }
  .abn-ricetta:hover img { transform: scale(1.04); }
}
.abn-scelta,
.abn-programma {
  transition:
    border-color var(--durata) var(--ease-out),
    background var(--durata) var(--ease-out),
    box-shadow var(--durata) var(--ease-out),
    transform var(--durata) var(--ease-out);
}
.abn-ricetta {
  transition:
    border-color var(--durata) var(--ease-out),
    box-shadow var(--durata) var(--ease-out),
    transform var(--durata) var(--ease-out);
}
.abn-ricetta img { transition: transform 320ms var(--ease-out); }
/* Il simbolo della «porta» ruota di un grado e mezzo quando ci passi sopra:
   basta a farlo sembrare un oggetto e non un francobollo. */
@media (hover: hover) and (pointer: fine) {
  .abn-scelta:hover .abn-scelta__segno { transform: rotate(-3deg) scale(1.06); }
}
.abn-scelta__segno {
  transition:
    background var(--durata-rapida) var(--ease-out),
    color var(--durata-rapida) var(--ease-out),
    transform var(--durata) var(--ease-out);
}

/* La pastiglia dello sconto non lampeggia: sta ferma e basta. E' l'unico
   rosso della pagina, non ha bisogno di muoversi per farsi vedere. */

/* ---------- pastiglie dei filtri e pulsanti ---------- */
.wc-block-product-filter-chips__item {
  transition:
    background var(--durata-rapida) var(--ease-out),
    border-color var(--durata-rapida) var(--ease-out),
    color var(--durata-rapida) var(--ease-out),
    transform var(--durata-rapida) var(--ease-out);
}
.wc-block-product-filter-chips__item:active { transform: scale(0.96); }

/* ---------- barra d'acquisto che segue ----------
   Sulla scheda prodotto il pulsante «Aggiungi» sta in alto: chi legge i
   valori nutrizionali e le recensioni se lo lascia alle spalle e deve
   risalire. La barra compare SOLO quando il pulsante vero e' uscito dallo
   schermo, e sparisce quando torna: non e' un ingombro fisso, e' il pulsante
   che non ti abbandona. */
.abn-acquisto-fisso {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px max(16px, calc((100vw - var(--wp--style--global--wide-size, 1240px)) / 2));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.2) blur(12px);
  border-top: 1px solid var(--wp--preset--color--linea);
  transform: translateY(100%);
  transition: transform 280ms var(--ease-out);
}
.abn-acquisto-fisso.dentro { transform: none; }
.abn-acquisto-fisso .nome {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
  max-width: 44ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abn-acquisto-fisso .prezzo {
  margin-left: auto;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.abn-acquisto-fisso .prezzo del { color: var(--wp--preset--color--tenue); font-size: 0.78em; font-weight: 500; margin-right: 6px; }
.abn-acquisto-fisso .prezzo ins { text-decoration: none; color: var(--wp--preset--color--saldo); }
.abn-acquisto-fisso button {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--verde);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--durata-rapida) var(--ease-out), transform var(--durata-rapida) var(--ease-out);
}
.abn-acquisto-fisso button:hover { background: var(--wp--preset--color--verde-cupo); }
.abn-acquisto-fisso button:active { transform: scale(0.97); }
@media (max-width: 700px) {
  .abn-acquisto-fisso .nome { display: none; }
  .abn-acquisto-fisso button { flex: 1; }
}

/* ---------- ritorno in cima ----------
   Su un catalogo da ventiquattro tessere per pagina la risalita a pollice e'
   lunga. Compare solo dopo due schermate: prima non serve a nessuno. */
.abn-su {
  position: fixed;
  z-index: 55;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  background: var(--wp--preset--color--carta);
  color: var(--wp--preset--color--inchiostro);
  box-shadow: var(--ombra-tessera);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  pointer-events: none;
  transition:
    opacity var(--durata) var(--ease-out),
    transform var(--durata) var(--ease-out),
    background var(--durata-rapida) var(--ease-out);
}
.abn-su.dentro { opacity: 1; transform: none; pointer-events: auto; }
.abn-su:hover { background: var(--wp--preset--color--verde-tenue); }
.abn-su:active { transform: scale(0.94); }
.abn-su svg { width: 20px; height: 20px; }
body.abn-con-barra .abn-su { bottom: 82px; }

/* ---------- passaggio fra le pagine ----------
   Dove il browser lo sa fare (Chrome, Edge, Safari 18), cambiare pagina non e'
   piu' un lampo bianco: il contenuto sfuma, e testata e piede restano fermi.
   Chi ha un browser che non lo conosce non se ne accorge: naviga come prima. */
@view-transition { navigation: auto; }
.abn-piede { view-transition-name: abn-piede; }
::view-transition-old(root) { animation: abn-esce 90ms linear both; }
::view-transition-new(root) { animation: abn-entra 260ms var(--ease-out) both; }
@keyframes abn-esce  { to   { opacity: 0; } }
@keyframes abn-entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- attesa del carrello ----------
   Fra il tocco e la merce dentro il carrello passa una chiamata di rete. In quel
   secondo il pulsante deve dire «sto lavorando», altrimenti il cliente preme
   due volte e si ritrova due confezioni. */
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.wc-block-components-button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.wc-block-components-button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 999px;
  animation: abn-gira 620ms linear infinite;
}
@keyframes abn-gira { to { transform: rotate(360deg); } }

/* ---------- menu del telefono ----------
   Il pannello a tutto schermo non deve sbattere in faccia: entra dall'alto in
   due decimi e mezzo, come una tendina che scende. */
.wp-block-navigation__responsive-container.is-menu-open {
  animation: abn-tendina 260ms var(--ease-out) both;
}
@keyframes abn-tendina {
  from { opacity: 0; transform: translateY(-8px); }
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > * {
  animation: abn-voce 320ms var(--ease-out) both;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(1) { animation-delay: 60ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(2) { animation-delay: 100ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(3) { animation-delay: 140ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(4) { animation-delay: 180ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > *:nth-child(n+5) { animation-delay: 220ms; }
@keyframes abn-voce {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- Ricette FIT: il carosello ----------
   In cucina le ricette non sono un elenco da consultare, sono un vassoio che passa:
   se ne vedono quattro e si intravede la quinta, ed e' proprio il pezzo tagliato a
   destra che dice «ce n'e' ancora, spingi». Una griglia a tutta larghezza direbbe
   invece «e' tutto qui».
   Lo scorrimento e' quello vero del browser (scroll-snap): funziona col dito, con la
   rotella, con il trackpad e con il Tab anche se il JavaScript non parte mai. Le frecce
   sono un di piu' per il mouse, e infatti le aggiunge il JS.
   Sulla PAGINA ricette resta la griglia: li' si cerca, non si sfoglia. */
.abn-cucina .abn-ricette {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra di sistema qui sotto sarebbe un secondo indicatore accanto al nostro:
     si toglie, e al suo posto c'e' la riga di avanzamento del carosello. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Spazio sotto per l'ombra del sollevamento, che altrimenti viene tagliata. */
  padding-bottom: 6px;
}
.abn-cucina .abn-ricette::-webkit-scrollbar { display: none; }
/* QUATTRO per volta su schermo largo, e si scorre di una tessera alla volta: il
   vassoio avanza di un piatto, non di mezza schermata. La quinta non spunta di
   proposito — la fila resta pulita, e a dire che ce n'e' ancora ci pensano la
   riga di avanzamento e le frecce. */
.abn-cucina .abn-ricetta {
  flex: 0 0 calc((100% - 48px) / 4);
  scroll-snap-align: start;
}
@media (max-width: 1100px) { .abn-cucina .abn-ricetta { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 820px)  { .abn-cucina .abn-ricetta { flex-basis: calc((100% - 16px) / 2); } }

/* Sul telefono le tessere scorrono fino al bordo dello schermo: un carosello che si
   ferma a ventiquattro pixel dal bordo sembra un errore di impaginazione. La prima
   resta comunque allineata al testo, perche' il margine tolto lo rimette il padding. */
@media (max-width: 900px) {
  .abn-cucina .abn-ricette {
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-left: 24px;
  }
  .abn-cucina .abn-ricetta { flex-basis: min(76vw, 300px); }
}

/* La riga di comando sotto il vassoio: a sinistra quanta strada resta, a destra le due
   frecce. In zona cucina il colore e' l'ambra, come tutto il resto di qui. */
.abn-carosello__barra {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}
/* Quando le ricette ci stanno tutte il JS nasconde la barra: senza questa riga il
   «display: flex» qui sopra vincerebbe sull'attributo hidden e resterebbe visibile. */
.abn-carosello__barra[hidden] { display: none; }

.abn-carosello__corsa {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: #eddac0;
  overflow: hidden;
}
.abn-carosello__corsa span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wp--preset--color--ambra);
  /* Larghezza e posizione in scaleX/translateX: si muove sulla scheda video, non
     rifacendo l'impaginazione a ogni pixel di scorrimento. */
  transform-origin: 0 50%;
  transform: translateX(var(--corsa-x, 0)) scaleX(var(--corsa-w, 0.3));
  transition: transform 120ms linear;
}
.abn-carosello__frecce { display: flex; gap: 8px; }
.abn-carosello__frecce button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #e0c9a6;
  border-radius: 999px;
  background: var(--wp--preset--color--carta);
  color: var(--wp--preset--color--ambra);
  cursor: pointer;
  transition:
    background var(--durata-rapida) var(--ease-out),
    border-color var(--durata-rapida) var(--ease-out),
    opacity var(--durata) var(--ease-out),
    transform var(--durata-rapida) var(--ease-out);
}
.abn-carosello__frecce button svg { width: 19px; height: 19px; }
.abn-carosello__frecce button:hover { background: #fff; border-color: var(--wp--preset--color--ambra); }
.abn-carosello__frecce button:active { transform: scale(0.94); }
/* In fondo alla corsa la freccia resta al suo posto e si spegne: farla sparire
   sposterebbe l'altra sotto il dito che sta per premere. */
.abn-carosello__frecce button[disabled] {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}
/* Senza mouse le frecce non servono: sul telefono si spinge e basta. */
@media (max-width: 700px) {
  .abn-carosello__frecce { display: none; }
}

/* ==========================================================================
   I FILTRI — v2.2
   --------------------------------------------------------------------------
   Duecentocinquantasei articoli: senza filtri il catalogo non e' un negozio,
   e' un magazzino. La colonna di sinistra e' UN pannello solo diviso da
   filetti, non otto scatole impilate: le scatole facevano sembrare ogni
   filtro un widget a se', e l'occhio non trovava piu' l'ordine (fase prima,
   prezzo ultimo) che e' l'unica cosa che conta qui.
   ========================================================================== */

/* La colonna resta a vista mentre la griglia scorre: cambiare filtro dopo
   dieci tessere non deve costare una risalita. */
@media (min-width: 901px) {
  .abn-filtri {
    position: sticky;
    top: 84px;
    align-self: flex-start;
    /* NIENTE overflow qui: un contenitore che scorre TAGLIA tutto quello che esce dai
       suoi bordi, e quello che esce e' il pannello dei suggerimenti della ricerca —
       che deve poter scendere sopra i prodotti. I gruppi di filtri ora si richiudono,
       quindi la colonna sta in una schermata e non serve farla scorrere.

       E lo z-index serve: «sticky» crea un contesto di impilamento, quindi il pannello
       dei suggerimenti resta prigioniero di questa colonna per quanto in alto lo si
       metta. Alzando la colonna intera passa sopra la griglia — che nel documento viene
       dopo, e altrimenti vince sempre. Sotto la testata (40), che deve restare in cima. */
    z-index: 5;
    padding-right: 6px;
  }
}

.abn-filtri__blocco {
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: none;
}

/* Il pannello dei filtri veri: un contenitore, tante sezioni. */
.abn-filtri .wp-block-woocommerce-product-filters {
  display: block;
  padding: 0;
  overflow: hidden;
}
.abn-filtri .wp-block-woocommerce-product-filters > * {
  padding: 16px 18px;
  border-top: 1px solid var(--wp--preset--color--linea);
}
.abn-filtri .wp-block-woocommerce-product-filters > *:first-child { border-top: 0; }

/* Il titolo di ogni sezione: piccolo, nero, senza maiuscoletto spaziato. */
.abn-filtri .wp-block-heading {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

/* ---------- caselle ----------
   La casella di WooCommerce e' un quadratino di sistema: qui diventa un segno
   verde grande abbastanza da premerlo col pollice, e tutta la riga e' bersaglio. */
.abn-filtri .wc-block-product-filter-checkbox-list__item {
  padding: 0;
  border-radius: var(--raggio-piccolo);
  transition: background var(--durata-rapida) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .abn-filtri .wc-block-product-filter-checkbox-list__item:hover { background: var(--wp--preset--color--fondo); }
}
.abn-filtri .wc-block-product-filter-checkbox-list__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  cursor: pointer;
}
.abn-filtri .wc-block-product-filter-checkbox-list__input-wrapper::before { display: none; }
.abn-filtri input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
  appearance: none;
  width: 19px;
  height: 19px;
  margin: 0;
  flex: none;
  border: 1.5px solid var(--wp--preset--color--linea);
  border-radius: 5px;
  background: var(--wp--preset--color--carta);
  cursor: pointer;
  transition:
    background var(--durata-rapida) var(--ease-out),
    border-color var(--durata-rapida) var(--ease-out),
    transform var(--durata-rapida) var(--ease-out);
}
.abn-filtri input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
  background: var(--wp--preset--color--verde);
  border-color: var(--wp--preset--color--verde);
  /* Il segno di spunta e' disegnato dentro il CSS: nessun file, e prende il
     bianco della pastiglia qualunque verde ci sia sotto. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}
.abn-filtri input[type="checkbox"].wc-block-product-filter-checkbox-list__input:active { transform: scale(0.9); }
.abn-filtri .wc-block-product-filter-checkbox-list__mark { display: none; }
.abn-filtri .wc-block-product-filter-checkbox-list__text-wrapper {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
/* Il numero fra parentesi accanto a ogni voce: piu' chiaro del nome, perche'
   e' un dato di servizio — dice se vale la pena spuntare, non cosa si spunta. */
.abn-filtri .wc-block-product-filter-checkbox-list__count {
  color: var(--wp--preset--color--tenue);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
}
.abn-filtri .wc-block-product-filter-checkbox-list__show-more-button {
  margin-top: 6px;
  padding: 4px 0;
  color: var(--wp--preset--color--verde);
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}

/* ---------- pastiglie della fase ----------
   Tre valori che si escludono quasi sempre: si premono, non si spuntano. */
.abn-filtri .wc-block-product-filter-chips__items { gap: 7px; }
.abn-filtri .wc-block-product-filter-chips__item {
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 0.87rem;
}
.abn-filtri .wc-block-product-filter-chips__item[aria-checked="true"] {
  box-shadow: 0 0 0 3px var(--wp--preset--color--verde-tenue);
}
.abn-filtri .wc-block-product-filter-chips__item[disabled] { opacity: 0.35; cursor: default; }

/* ---------- prezzo ----------
   Due maniglie su una barra: la parte scelta e' verde, il resto e' filetto. */
.abn-filtri .wc-block-product-filter-price-slider { margin-top: 4px; }
.abn-filtri .wc-block-product-filter-price-slider__range { --range-color: var(--wp--preset--color--verde); }
.abn-filtri .wc-block-product-filter-price-slider .range-bar {
  background: var(--wp--preset--color--verde);
  height: 4px;
  border-radius: 999px;
}
.abn-filtri .wc-block-product-filter-price-slider__range::before {
  background: var(--wp--preset--color--linea);
  height: 4px;
  border-radius: 999px;
}
.abn-filtri .wc-block-product-filter-price-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--wp--preset--color--carta);
  border: 2px solid var(--wp--preset--color--verde);
  box-shadow: var(--ombra-tessera);
  cursor: grab;
  transition: transform var(--durata-rapida) var(--ease-out);
}
.abn-filtri .wc-block-product-filter-price-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--wp--preset--color--carta);
  border: 2px solid var(--wp--preset--color--verde);
  box-shadow: var(--ombra-tessera);
  cursor: grab;
}
.abn-filtri .wc-block-product-filter-price-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.abn-filtri .wc-block-product-filter-price-slider__left,
.abn-filtri .wc-block-product-filter-price-slider__right {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--wp--preset--color--inchiostro);
  font-variant-numeric: tabular-nums;
}

/* ---------- filtri attivi ----------
   Stanno in cima e si tolgono uno per uno: e' la mappa di dove ci si e' infilati. */
.abn-filtri .wc-block-product-filter-removable-chips__items { gap: 6px; }
.abn-filtri .wc-block-product-filter-removable-chips__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px 5px 12px;
  transition: background var(--durata-rapida) var(--ease-out);
}
.abn-filtri .wc-block-product-filter-removable-chips__remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--durata-rapida) var(--ease-out);
}
.abn-filtri .wc-block-product-filter-removable-chips__remove:hover { background: rgba(0, 115, 58, 0.14); }
.abn-filtri .wc-block-product-filter-removable-chips__remove-icon { width: 15px; height: 15px; }
.abn-filtri .wc-block-product-filter-clear-button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  align-self: flex-start;
}

/* ---------- il pannello sul telefono ----------
   WooCommerce ha gia' il suo pannello a scomparsa: qui gli si da' la faccia
   del negozio, con il pulsante di apertura che sembra un pulsante. */
.wc-block-product-filters__open-overlay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 13px 20px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  background: var(--wp--preset--color--carta);
  color: var(--wp--preset--color--inchiostro);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ombra-tessera);
  transition: background var(--durata-rapida) var(--ease-out), transform var(--durata-rapida) var(--ease-out);
}
.wc-block-product-filters__open-overlay:active { transform: scale(0.98); }
.wc-block-product-filters__overlay-dialog {
  background: var(--wp--preset--color--fondo);
  border-radius: 16px 16px 0 0;
}
.wc-block-product-filters__overlay-header,
.wc-block-product-filters__overlay-footer {
  background: var(--wp--preset--color--carta);
  border-color: var(--wp--preset--color--linea);
}
.wc-block-product-filters__overlay-header { border-radius: 16px 16px 0 0; }
.wc-block-product-filters__apply {
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--verde);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 14px 24px;
  cursor: pointer;
}

/* ---------- il catalogo che continua ----------
   La paginazione a numeri resta nel documento (senza JavaScript e' l'unica via
   che c'e'), ma quando il caricamento progressivo parte si toglie di mezzo. */
.abn-nascosto { display: none !important; }

.abn-altri {
  margin: 28px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.abn-altri__sentinella { height: 1px; width: 100%; }
.abn-altri__conto {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wp--preset--color--tenue);
  font-variant-numeric: tabular-nums;
}
.abn-altri__pulsante {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  background: var(--wp--preset--color--carta);
  color: var(--wp--preset--color--inchiostro);
  font: inherit;
  font-weight: 700;
  padding: 13px 30px;
  cursor: pointer;
  transition:
    background var(--durata-rapida) var(--ease-out),
    border-color var(--durata-rapida) var(--ease-out),
    transform var(--durata-rapida) var(--ease-out);
}
.abn-altri__pulsante:hover { background: var(--wp--preset--color--verde-tenue); border-color: var(--wp--preset--color--verde); }
.abn-altri__pulsante:active { transform: scale(0.97); }
.abn-altri__pulsante[disabled] { opacity: 0.6; cursor: default; }
.abn-altri--fine .abn-altri__conto { color: var(--wp--preset--color--inchiostro); font-weight: 700; }

/* Le tessere finte mentre arrivano le vere: tengono l'altezza della pagina, cosi'
   lo scorrimento non salta sotto le dita. Il luccichio dice «sta arrivando», la
   griglia ferma direbbe «e' finito». */
.abn-scheletro {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  background: var(--wp--preset--color--carta);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.abn-scheletro .foto,
.abn-scheletro .riga {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #eeeae1 25%, #f6f3ec 50%, #eeeae1 75%) 0 0 / 300% 100%;
  animation: abn-luccichio 1.3s linear infinite;
}
.abn-scheletro .foto { aspect-ratio: 1; border-radius: var(--raggio-piccolo); }
.abn-scheletro .riga { height: 12px; }
.abn-scheletro .riga.corta { width: 45%; }
@keyframes abn-luccichio {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* ---------- file che scorrono ----------
   Le stesse regole del vassoio delle ricette applicate alle file di prodotti in
   home: UNA riga, quattro per volta su schermo largo, e si avanza di una tessera.
   Due righe di novita' erano dodici tessere in mezzo alla pagina: un muro, e chi
   scorreva le saltava tutte. */
.abn-fila .wc-block-grid__products,
.abn-fila ul.products {
  display: flex !important;
  /* WooCommerce manda a capo la sua griglia: senza questa riga le otto tessere
     si dispongono su due file e non c'e' piu' niente da scorrere. E' la riga che
     fa la differenza fra un carosello e una griglia. */
  flex-wrap: nowrap !important;
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
}
.abn-fila .wc-block-grid__products::-webkit-scrollbar,
.abn-fila ul.products::-webkit-scrollbar { display: none; }
.abn-fila .wc-block-grid__product,
.abn-fila ul.products li.product {
  flex: 0 0 calc((100% - 48px) / 4) !important;
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .abn-fila .wc-block-grid__product,
  .abn-fila ul.products li.product { flex-basis: calc((100% - 32px) / 3) !important; }
}
@media (max-width: 820px) {
  .abn-fila .wc-block-grid__product,
  .abn-fila ul.products li.product { flex-basis: calc((100% - 16px) / 2) !important; }
}
@media (max-width: 560px) {
  .abn-fila .wc-block-grid__products,
  .abn-fila ul.products { margin-inline: -24px; padding-inline: 24px; scroll-padding-left: 24px; }
  .abn-fila .wc-block-grid__product,
  .abn-fila ul.products li.product { flex-basis: min(62vw, 260px) !important; }
}

/* Il colore dei comandi segue la zona: verde in negozio, ambra in cucina. Una
   sola coppia di variabili, cosi' non nascono due caroselli diversi. */
.abn-carosello {
  --tinta: var(--wp--preset--color--verde);
  --tinta-tenue: var(--wp--preset--color--verde-tenue);
}
.abn-cucina .abn-carosello {
  --tinta: var(--wp--preset--color--ambra);
  --tinta-tenue: #eddac0;
}
.abn-carosello__corsa { background: var(--tinta-tenue); }
.abn-carosello__corsa span { background: var(--tinta); }
.abn-carosello__frecce button { border-color: var(--tinta-tenue); color: var(--tinta); }
.abn-carosello__frecce button:hover { border-color: var(--tinta); }

/* ==========================================================================
   FILTRI — correzioni viste a schermo (v2.2.1)
   --------------------------------------------------------------------------
   Tre cose che si vedono solo aprendo la pagina davvero:
   1. i riquadri scuri NON erano nostri: WooCommerce racchiude ogni elenco in un
      <fieldset>, e il bordo di default del browser e' un solco grigio scuro;
   2. su schermo largo il pannello e' comunque quello «a scomparsa» del telefono,
      montato fisso: portava con se' il pulsante «Filtra prodotti», la testata con
      la X, il piede con «Applica» e un fondo beige dentro una scheda bianca;
   3. le sezioni vere non sono figlie diirette del blocco filtri ma del contenuto
      del pannello: i filetti divisori finivano nel posto sbagliato.
   ========================================================================== */

/* 1. Il solco del browser: via, ovunque dentro i filtri. */
.abn-filtri fieldset,
.wc-block-product-filters fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* 2. Il pannello a scomparsa di WooCommerce non si usa mai: su schermo largo i filtri
   sono una colonna, sul telefono stanno nel pannello laterale del tema (.abn-filtri).
   Vale a ogni larghezza (prima solo da 901px: dentro il nostro pannello spuntavano il
   suo «Filtra prodotti» e il suo «Chiudi»). */
@media (min-width: 0px) {
  .abn-filtri .wc-block-product-filters__open-overlay,
  .abn-filtri .wc-block-product-filters__overlay-header,
  .abn-filtri .wc-block-product-filters__overlay-footer { display: none !important; }

  .abn-filtri .wc-block-product-filters__overlay,
  .abn-filtri .wc-block-product-filters__overlay-wrapper,
  .abn-filtri .wc-block-product-filters__overlay-dialog,
  .abn-filtri .wc-block-product-filters__overlay-content {
    position: static;
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    max-width: none;
    max-height: none;
    inset: auto;
    transform: none;
    overflow: visible;
  }

  /* 3. I filetti vanno FRA le sezioni vere. */
  .abn-filtri .wc-block-product-filters__overlay-content > * {
    padding: 16px 18px;
    border-top: 1px solid var(--wp--preset--color--linea);
  }
  .abn-filtri .wc-block-product-filters__overlay-content > *:first-child,
  .abn-filtri .wc-block-product-filter--hidden + * { border-top: 0; }
}

/* Il blocco «filtri attivi» quando non c'e' niente di attivo: non deve lasciare
   ne' spazio ne' filetto. */
.wc-block-product-filter--hidden { display: none !important; }

/* Nessun taglio in altezza sulle liste: cinque voci non devono scorrere dentro un
   riquadro, e per quelle lunghe WooCommerce mette gia' «Mostra N altro». La cornice
   che c'era prima la faceva il fieldset, e non serviva a niente. */

/* Il pannello sul telefono resta un pannello: qui il fondo e la testata servono. */
@media (max-width: 900px) {
  .abn-filtri .wc-block-product-filters__overlay-content > * {
    padding: 14px 16px;
    border-top: 1px solid var(--wp--preset--color--linea);
  }
  .abn-filtri__blocco.wc-block-product-filters { border: 0; padding: 0; background: transparent; }
}

/* La ricerca dentro i filtri aveva due cornici: quella del contenitore di
   WordPress (un grigio di sistema che non appartiene a questo sito) e quella
   del campo. Ne resta una, e il pulsante torna a essere un'icona. */
.abn-filtri .wp-block-search__inside-wrapper {
  border: 0;
  padding: 0;
  gap: 6px;
}
.abn-filtri .wp-block-search__button {
  flex: none;
  padding: 10px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.abn-filtri .wp-block-search__button svg { width: 20px; height: 20px; }

/* ---------- gruppi di filtri richiudibili ----------
   Il titolo di ogni gruppo diventa un comando: si apre e si chiude, e quando e'
   chiuso dice con un numero quante scelte nasconde. Cosi' la colonna sta in una
   schermata e si arriva al prezzo senza scorrere alla cieca. */
.abn-gruppo .wp-block-heading {
  margin: 0;
  width: 100%;
  align-self: stretch;   /* senza, il titolo si stringe sul testo e la freccia
                            resta appiccicata alla parola invece di stare a destra */
}
.abn-gruppo__testa {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-align: left;
  cursor: pointer;
}
.abn-gruppo__testa .nome { flex: 1; }
.abn-gruppo__testa .quante {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--wp--preset--color--verde);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.abn-gruppo__testa .quante[hidden] { display: none; }
.abn-gruppo__testa .segno {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--wp--preset--color--tenue);
  transition: transform var(--durata) var(--ease-out);
}
.abn-gruppo.chiuso .abn-gruppo__testa .segno { transform: rotate(-90deg); }
@media (hover: hover) and (pointer: fine) {
  .abn-gruppo__testa:hover .segno { color: var(--wp--preset--color--verde); }
}

/* L'apertura si anima con le righe della griglia: e' l'unico modo di far crescere
   un contenuto di altezza sconosciuta senza misurarlo in JavaScript a ogni frame. */
.abn-gruppo__corpo {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms var(--ease-out), opacity 160ms var(--ease-out);
  margin-top: 12px;
}
.abn-gruppo__corpo > div { min-height: 0; overflow: hidden; }
.abn-gruppo.chiuso .abn-gruppo__corpo {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
}

/* Chiuso, il gruppo e' una riga sola: il passo fra i titoli si stringe. */
.abn-gruppo.chiuso { padding-top: 12px; padding-bottom: 12px; }

/* ---------- banner promozionali ----------
   Due riquadri fra le novita' e i piu' venduti: e' il punto in cui chi scorre ha gia'
   visto la merce e si chiede «e allora?». Li' un banner non e' un disturbo, e' una
   risposta. Li gestisce il plugin ABN Banner; qui si decide solo come si vedono.

   Con la foto: la foto riempie il riquadro e il testo sta sopra una velatura scura,
   perche' un titolo bianco su una foto chiara non si legge.
   Senza foto: il riquadro si disegna da solo con i colori della zona. Meglio un banner
   onesto che un rettangolo vuoto in attesa del grafico. */
.abn-banner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: clamp(40px, 5vw, 64px) 0 0;
}
.abn-banner--1 { grid-template-columns: minmax(0, 1fr); }
.abn-banner--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abn-banner--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Quattro riquadri su un tablet sono quattro francobolli: si scende a due, e sul
   telefono a uno. La regola vale per tutte le larghezze scelte. */
@media (max-width: 1100px) { .abn-banner--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .abn-banner, .abn-banner--3, .abn-banner--4 { grid-template-columns: minmax(0, 1fr); }
}
/* Piu' sono, meno alti: un riquadro stretto e alto e' una colonna, non un banner. */
.abn-banner--3 .abn-banner__voce, .abn-banner--4 .abn-banner__voce { min-height: 190px; }
.abn-banner--4 .abn-banner__testo h3 { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem); }

.abn-banner__voce {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: 26px 28px;
  border-radius: var(--raggio);
  border: 1px solid var(--wp--preset--color--linea);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition:
    box-shadow var(--durata) var(--ease-out),
    transform var(--durata) var(--ease-out);
}
.abn-banner__voce img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-out);
}
/* La velatura: parte dal basso, dove sta il testo, e lascia respirare la foto in alto. */
.abn-banner__voce.con-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 61, 34, 0) 30%, rgba(10, 61, 34, 0.82) 100%);
}
.abn-banner__voce.disegnato {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%),
    var(--wp--preset--color--verde-cupo);
  border-color: transparent;
}
.abn-banner__voce--verde.disegnato { background-color: var(--wp--preset--color--verde); }
.abn-banner__voce--ambra.disegnato { background-color: var(--wp--preset--color--ambra); }
.abn-banner__voce--cupo.disegnato { background-color: var(--wp--preset--color--verde-cupo); }

.abn-banner__testo { position: relative; z-index: 1; }
.abn-banner__testo h3 {
  color: #fff;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.abn-banner__testo p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.97rem;
  margin: 0;
  max-width: 46ch;
}
.abn-banner__invito {
  display: inline-block;
  margin-top: 16px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--wp--preset--color--verde-cupo);
  font-weight: 800;
  font-size: 0.92rem;
  transition: background var(--durata-rapida) var(--ease-out);
}
.abn-banner__voce--ambra .abn-banner__invito { color: #7a3600; }

@media (hover: hover) and (pointer: fine) {
  .abn-banner__voce:hover { box-shadow: var(--ombra-alta); transform: translateY(-2px); }
  .abn-banner__voce:hover img { transform: scale(1.04); }
  .abn-banner__voce:hover .abn-banner__invito { background: var(--wp--preset--color--verde-tenue); }
}
.abn-banner__voce:active { transform: scale(0.995); }

/* ---------- il dato in evidenza sulla slide ----------
   Certe merci si vendono con un numero: i grammi di carboidrati di un kit keto, i giorni
   di un programma. La cifra grande e la barra che si ferma prima della soglia sono il
   ragionamento di chi compra, disegnato invece che raccontato.
   Il numero e la sua barra li disegna ABN Connect quando la slide porta un «dato»
   (si compila dal plugin Vetrina); qui c'e' solo come si vede. Su fondo scuro l'ambra del
   tema sparirebbe: si usa la sua versione accesa, stessa famiglia di colore. */
.abn-lastra .contenuto:has(.abn-dato) { gap: 12px; }
.abn-vetrina.pronta .abn-lastra.attiva .contenuto > *:nth-child(5) { transition-delay: 330ms; }

.abn-dato {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: start;
  margin-top: 4px;
  padding: 14px 18px 14px 16px;
  border-radius: var(--raggio);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
}
.abn-dato__cifra {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  color: #f6b26b;
  font-variant-numeric: tabular-nums;
}
.abn-dato__cifra strong { font-size: 2.1rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.abn-dato__cifra span { font-size: 1rem; font-weight: 800; }
.abn-dato__corpo { display: grid; gap: 7px; min-width: min(230px, 42vw); }
.abn-dato__che,
.abn-dato__nota {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  max-width: none;
}
.abn-dato__nota strong { color: #f6b26b; font-weight: 800; }
.abn-dato__barra {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.abn-dato__barra span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--quota, 70%);
  border-radius: 999px;
  background: linear-gradient(90deg, #f6b26b, #e78a2e);
  transform-origin: 0 50%;
}
/* La barra si riempie quando la lastra entra: e' il gesto che fa capire «questo numero
   sta sotto la soglia». Mezzo secondo, una volta sola. */
.abn-vetrina.pronta .abn-lastra.attiva .abn-dato__barra span {
  animation: abn-riempi-dato 700ms var(--ease-out) 260ms both;
}
@keyframes abn-riempi-dato {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (max-width: 900px) {
  .abn-dato { padding: 12px 14px; gap: 12px; }
  .abn-dato__cifra strong { font-size: 1.7rem; }
}

/* ---------- le fasce ----------
   Il COLORE non sta piu' qui: lo sceglie il negozio in Impostazioni → Testi delle
   sezioni, e il tema lo stampa in pagina insieme al colore del testo, deciso dalla
   luminosita' del fondo. Qui restano solo le cose che il colore non cambia. */
/* I comandi del carosello sulla fascia scura: bianchi, non verdi su verde. */

/* ---------- il magazine ----------
   Gli articoli sono i normali post di WordPress: stessa fila che scorre delle altre
   sezioni, tessere di carta su fondo chiaro. */
.abn-fila--articoli .wp-block-query { margin: 0; }
.abn-fila--articoli .wp-block-post-template {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.abn-fila--articoli .wp-block-post-template::-webkit-scrollbar { display: none; }
.abn-fila--articoli .wp-block-post-template > li {
  flex: 0 0 calc((100% - 48px) / 4);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  overflow: hidden;
  transition:
    border-color var(--durata) var(--ease-out),
    box-shadow var(--durata) var(--ease-out),
    transform var(--durata) var(--ease-out);
}
@media (max-width: 1100px) { .abn-fila--articoli .wp-block-post-template > li { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 820px)  { .abn-fila--articoli .wp-block-post-template > li { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 560px)  {
  .abn-fila--articoli .wp-block-post-template { margin-inline: -24px; padding-inline: 24px; scroll-padding-left: 24px; }
  .abn-fila--articoli .wp-block-post-template > li { flex-basis: min(76vw, 300px); }
}
.abn-fila--articoli .wp-block-post-featured-image { margin: 0; }
.abn-fila--articoli .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.abn-fila--articoli .wp-block-post-title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 14px 16px 6px;
}
.abn-fila--articoli .wp-block-post-title a { color: var(--wp--preset--color--inchiostro); text-decoration: none; }
.abn-fila--articoli .wp-block-post-excerpt {
  margin: 0 16px 18px;
  color: var(--wp--preset--color--tenue);
  font-size: 0.9rem;
}
.abn-fila--articoli .wp-block-post-excerpt__more-text { display: none; }
@media (hover: hover) and (pointer: fine) {
  .abn-fila--articoli .wp-block-post-template > li:hover {
    border-color: var(--wp--preset--color--verde);
    box-shadow: var(--ombra-tessera);
    transform: translateY(-2px);
  }
}
/* Articolo senza fotografia: un pannello disegnato invece di una tessera monca. */
.abn-fila--articoli .wp-block-post-template > li:not(:has(figure))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--wp--preset--color--verde-tenue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 68' fill='none' stroke='%2300733a' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='34' y='16' width='52' height='38' rx='4'/%3E%3Cpath d='M44 28h32M44 36h32M44 44h20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34%;
}

/* ---------- vieni a trovarci ----------
   L'ultima cosa della pagina, come nella vita: prima si guarda la merce, poi si chiede
   dove siete. Sta su fondo chiaro perche' subito sotto comincia il piede verde scuro:
   due fasce scure di fila diventerebbero una macchia sola. */
/* Il fondo lo dipinge la fascia che la contiene (Impostazioni → Testi delle sezioni):
   se lo dipingesse anche questa, il colore scelto resterebbe sotto e non si vedrebbe. */
.abn-contatti {
  border-top: 1px solid var(--wp--preset--color--linea);
  margin-top: clamp(56px, 7vw, 92px);
  padding: clamp(44px, 6vw, 72px) 24px 0;
  background: transparent;
}
.abn-fascia--contatti .abn-contatti { margin-top: 0; border-top: 0; }
.abn-contatti__dentro { max-width: var(--wp--style--global--wide-size, 1240px); margin: 0 auto; }
.abn-contatti__testa h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: 0 0 8px;
}
.abn-contatti__testa p { color: var(--wp--preset--color--tenue); margin: 0 0 26px; }
.abn-contatti__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.abn-contatti__voce {
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  padding: 22px 22px 24px;
}
.abn-contatti__voce .segno {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: var(--raggio-piccolo);
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde);
}
.abn-contatti__voce .segno svg { width: 22px; height: 22px; }
.abn-contatti__voce h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 8px; }
.abn-contatti__voce p { margin: 0 0 6px; font-size: 0.95rem; color: var(--wp--preset--color--tenue); max-width: none; }
.abn-contatti__voce a { color: var(--wp--preset--color--verde); font-weight: 700; text-decoration: none; }
.abn-contatti__voce a:hover { text-decoration: underline; }
.abn-contatti__link { display: inline-block; margin-top: 8px; border-bottom: 1.5px solid currentColor; }

/* La tessera di WhatsApp e' l'unica con il fondo pieno: e' il canale che vogliamo
   davvero far usare, e la differenza si vede senza leggere. */
.abn-contatti__voce--whatsapp {
  background: var(--wp--preset--color--verde-tenue);
  border-color: #bcdcc2;
}
.abn-contatti__voce--whatsapp .segno { background: var(--wp--preset--color--verde); color: #fff; }
.abn-contatti__voce--whatsapp p { color: #2f5b3d; }
.abn-contatti__whatsapp {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--wp--preset--color--verde);
  color: #fff !important;
  font-weight: 800;
  transition: background var(--durata-rapida) var(--ease-out), transform var(--durata-rapida) var(--ease-out);
}
.abn-contatti__whatsapp:hover { background: var(--wp--preset--color--verde-cupo); text-decoration: none; }
.abn-contatti__whatsapp:active { transform: scale(0.97); }

/* ---------- il modulo «scrivici» ----------
   Sta sotto le tessere dei contatti, dentro la stessa fascia: chi ha fretta usa il
   telefono che vede sopra, chi scrive di sera trova il modulo qui. Due colonne sul
   computer, una sola sul telefono, e il messaggio sempre a tutta larghezza — perche'
   e' il campo in cui si scrive davvero. */
.abn-modulo {
  margin-top: 16px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
}
.abn-modulo__testa h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 6px; }
/* `max-width: none`: il tema taglia i paragrafi a ~740px per leggibilità, e in un articolo
   è giusto. Qui la descrizione ha davanti tutta la sezione, e quel taglio la mandava a capo
   a metà riga lasciando un buco a destra. */
.abn-modulo__testa p { color: var(--wp--preset--color--tenue); margin: 0 0 20px; max-width: none; }

.abn-modulo__campi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 760px) { .abn-modulo__campi { grid-template-columns: minmax(0, 1fr); } }
.abn-modulo__campi .campo { margin: 0; max-width: none; display: grid; gap: 6px; }
.abn-modulo__campi .campo--largo { grid-column: 1 / -1; }
.abn-modulo__campi label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--wp--preset--color--inchiostro);
}
.abn-modulo__campi label span { font-weight: 500; color: var(--wp--preset--color--tenue); }
.abn-modulo__campi input[type="text"],
.abn-modulo__campi input[type="email"],
.abn-modulo__campi input[type="tel"],
.abn-modulo__campi textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio-piccolo);
  background: var(--wp--preset--color--fondo);
  color: var(--wp--preset--color--inchiostro);
  transition: border-color var(--durata-rapida) var(--ease-out), background var(--durata-rapida) var(--ease-out);
}
.abn-modulo__campi input:focus,
.abn-modulo__campi textarea:focus { background: #fff; border-color: var(--wp--preset--color--verde); }
.abn-modulo__campi textarea { resize: vertical; min-height: 110px; }

/* Il campo esca per i robot: fuori dallo schermo, non «display:none» — certi robot
   compilano solo i campi visibili al codice, e questo per loro lo e'. */
.abn-modulo__esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.abn-modulo__consenso label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--wp--preset--color--tenue);
  line-height: 1.45;
}
.abn-modulo__consenso input[type="checkbox"] {
  appearance: none;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  flex: none;
  border: 1.5px solid var(--wp--preset--color--linea);
  border-radius: 5px;
  background: var(--wp--preset--color--carta);
  cursor: pointer;
  transition: background var(--durata-rapida) var(--ease-out), border-color var(--durata-rapida) var(--ease-out);
}
.abn-modulo__consenso input[type="checkbox"]:checked {
  background: var(--wp--preset--color--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--wp--preset--color--verde);
}

/* Piu' specifico della regola dei campi qui sopra, che e' una griglia: senza,
   vinceva quella e il pulsante veniva stirato per tutta la riga. */
.abn-modulo__campi .abn-modulo__azione {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.abn-modulo__azione button {
  /* Il pulsante e' largo quanto la sua etichetta: dentro una griglia a tutta riga,
     senza questo si allarga per tutta la pagina e sembra una barra, non un comando. */
  flex: 0 0 auto;
  width: auto;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--verde);
  color: #fff;
  font: inherit;
  font-weight: 800;
  padding: 14px 30px;
  cursor: pointer;
  transition: background var(--durata-rapida) var(--ease-out), transform var(--durata-rapida) var(--ease-out);
}
.abn-modulo__azione button:hover { background: var(--wp--preset--color--verde-cupo); }
.abn-modulo__azione button:active { transform: scale(0.97); }
.abn-modulo__azione .nota { font-size: 0.84rem; color: var(--wp--preset--color--tenue); }

/* L'esito: una riga sola, del colore di quello che e' successo. */
.abn-modulo__esito {
  margin: 0 0 18px;
  padding: 13px 16px;
  border-radius: var(--raggio-piccolo);
  font-weight: 600;
  font-size: 0.95rem;
  max-width: none;
}
.abn-modulo__esito--ok { background: var(--wp--preset--color--verde-tenue); color: var(--wp--preset--color--verde-cupo); }
.abn-modulo__esito--no { background: #fbe9e7; color: #7f2118; }

/* ==========================================================================
   ZONE INVERTITE (richiesta del negozio, 2026-09-08)
   --------------------------------------------------------------------------
   Fino a ieri: verde = negozio (i box), ambra = cucina (le ricette). Ora le due
   fasce si scambiano il fondo: i BOX stanno sull'ambra chiara, le RICETTE sul
   verde pieno. I nomi delle classi restano quelli di prima — .abn-zona-verde e
   .abn-cucina — perche' li usano anche il JavaScript dei caroselli e le regole
   delle tessere: cambiarli vorrebbe dire toccare quattro file per un colore.
   Quello che conta e' scritto qui sotto, non nel nome.
   ========================================================================== */

/* I comandi del carosello sulle fasce chiare restano su carta, sulle scure diventano
   trasparenti: lo decide la regola stampata in pagina. Qui solo il passaggio del mouse. */
.abn-fascia .abn-carosello__frecce button:hover { background: #fff; }

.abn-fascia .abn-carosello__frecce button:hover { background: rgba(255, 255, 255, 0.14); }

/* Il riquadro «le ricette arrivano fra poco», se un giorno il gestionale si
   svuota di nuovo: sul verde va letto in chiaro. */
.abn-cucina .abn-cucina-vuota {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}
.abn-cucina .abn-cucina-vuota h3 { color: #fff; }
.abn-cucina .abn-cucina-vuota p { color: rgba(255, 255, 255, 0.85); }

/* Le due fasce si toccano: fra il fondo ambra dei box e il verde delle ricette non
   deve comparire una striscia del fondo pagina. Lo stacco serviva quando la cucina
   arrivava dopo una sezione su fondo chiaro; ora che ha una fascia sopra, e' un buco. */

/* La vetrina tocca la testata: quei ventidue pixel erano lo stacco generale fra blocchi,
   giusto fra due paragrafi e sbagliato qui — un'apertura a tutta larghezza che comincia
   staccata sembra un'immagine incollata sopra la pagina, non la pagina che comincia.
   Si toglie solo dove il primo blocco e' davvero a tutta larghezza: sulle altre pagine
   il respiro sotto il menu serve. */
main.wp-block-group:has(> .wp-block-group.alignfull:first-child) { margin-top: 0; }

/* ---------- la testata resta in alto davvero ----------
   `position: sticky` funziona solo DENTRO il proprio contenitore: la testata era
   appiccicata a un <header> alto quanto lei, quindi non aveva un centimetro in cui
   restare e se ne andava col resto della pagina. Togliendo la scatola al contenitore
   (display: contents) la testata diventa figlia della pagina intera e si ferma in alto
   per tutti i sette metri di scorrimento.
   Effetto voluto: la fascia verde delle promesse scorre via — e' un'informazione che si
   legge una volta — mentre la riga con logo, menu, ricerca e carrello resta sempre. */
header.wp-block-template-part:has(.abn-testata) { display: contents; }

/* ---------- riquadri con immagine ----------
   La fascia sopra le quattro porte: immagini che portano da qualche parte. Le righe le
   decide il plugin (piena / due a meta'), qui c'e' solo come si vedono. Le proporzioni
   sono diverse fra riga piena e riga a meta' perche' una foto larga il doppio, con la
   stessa altezza, mostra il doppio del contesto: e' la stessa ragione per cui un
   manifesto e una locandina non hanno la stessa forma. */
.abn-riquadri {
  display: grid;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
}
.abn-riquadri__riga { display: grid; gap: 16px; }
.abn-riquadri__riga--meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .abn-riquadri__riga--meta { grid-template-columns: minmax(0, 1fr); }
}

.abn-riquadro {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--wp--preset--color--verde-tenue);
  text-decoration: none;
  color: #fff;
  transition:
    box-shadow var(--durata) var(--ease-out),
    transform var(--durata) var(--ease-out);
}
/* Fasce basse: un riquadro alto come mezzo schermo spinge fuori pagina la merce, che
   e' quello che il cliente e' venuto a vedere. La riga piena e' una striscia larga
   cinque volte la sua altezza; le mezze restano un po' piu' alte perche' sono larghe
   la meta'. */
.abn-riquadri__riga--piena .abn-riquadro img { aspect-ratio: 1240 / 250; }
.abn-riquadri__riga--meta .abn-riquadro img { aspect-ratio: 1000 / 441; }
.abn-riquadro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-out);
}
@media (max-width: 700px) {
  .abn-riquadri__riga--piena .abn-riquadro img { aspect-ratio: 1000 / 560; }
}

/* Il testo sopra la foto: solo se il negozio lo chiede, e sempre con la velatura,
   perche' un titolo bianco su una foto chiara non si legge. */
.abn-riquadro.con-testo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 61, 34, 0) 35%, rgba(10, 61, 34, 0.8) 100%);
}
.abn-riquadro__testo {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 24px 26px;
}
.abn-riquadro__testo strong {
  font-size: clamp(1.2rem, 0.95rem + 1vw, 1.7rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.abn-riquadro__testo .sotto { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); }
.abn-riquadro__testo .invito {
  margin-top: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--wp--preset--color--verde-cupo);
  font-weight: 800;
  font-size: 0.9rem;
}

@media (hover: hover) and (pointer: fine) {
  .abn-riquadro:hover { box-shadow: var(--ombra-alta); transform: translateY(-2px); }
  .abn-riquadro:hover img { transform: scale(1.03); }
}
.abn-riquadro:active { transform: scale(0.995); }

/* Due pulsanti: il banner non e' piu' un link unico (vedi abn-riquadri.php). Il primo
   pulsante stende un velo invisibile su tutto il riquadro, cosi' la foto resta
   cliccabile; il secondo sta sopra al velo e porta altrove. */
.abn-riquadro__testo .inviti { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.abn-riquadro__testo .inviti .invito { margin-top: 0; text-decoration: none; }
.abn-riquadro--doppio .invito--tutto::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.abn-riquadro--doppio .abn-riquadro__testo { pointer-events: none; }
.abn-riquadro--doppio .abn-riquadro__testo a { pointer-events: auto; }
.abn-riquadro__testo .invito--secondo {
  position: relative;
  z-index: 1;
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.abn-riquadro__testo .invito--secondo:hover { background: rgba(255, 255, 255, 0.14); }
.abn-riquadro--doppio .invito:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Sfondo verde, foto a lato: per le foto piccole o nate quadrate, che allargate a tutta
   la riga diventerebbero una poltiglia di pixel. Il verde regge la larghezza, la foto
   ne occupa un terzo abbondante e sfuma nel verde sul lato del testo. */
.abn-riquadro--verde {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--wp--preset--color--verde);
}
.abn-riquadro--verde.con-testo::after { content: none; }
.abn-riquadro--verde picture {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-height: 100%;
}
.abn-riquadro--verde picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--wp--preset--color--verde) 0%, rgba(0, 115, 58, 0) 38%);
  pointer-events: none;
}
.abn-riquadri__riga .abn-riquadro--verde img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  max-width: none;
}
.abn-riquadro--verde .abn-riquadro__testo {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-content: center;
  gap: 10px;
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px);
}
.abn-riquadro--verde .abn-riquadro__testo strong { font-size: clamp(1.45rem, 1rem + 1.6vw, 2.3rem); text-wrap: balance; }
.abn-riquadro--verde .abn-riquadro__testo .sotto { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem); max-width: 46ch; }
@media (max-width: 700px) {
  .abn-riquadro--verde { grid-template-columns: minmax(0, 1fr); }
  .abn-riquadro--verde picture { grid-column: 1; grid-row: 1; min-height: 0; }
  .abn-riquadro--verde picture::after { background: linear-gradient(0deg, var(--wp--preset--color--verde) 0%, rgba(0, 115, 58, 0) 45%); }
  .abn-riquadri__riga .abn-riquadro--verde img { position: static; aspect-ratio: 16 / 10; }
  .abn-riquadro--verde .abn-riquadro__testo { grid-row: 2; padding: 18px 20px 24px; }
}

/* ---------- la barra nera di WordPress ----------
   Chi e' collegato alla bacheca ha in cima una barra fissa alta 32 pixel. La testata si
   fermava a zero e ci finiva sotto: le voci del menu sparivano a meta'. Si scende della
   stessa altezza — 46 px sui tablet, dove la barra e' piu' alta, e zero sotto i 600,
   dove WordPress la lascia scorrere via con la pagina.
   Ai visitatori non cambia niente: la classe .admin-bar ce l'ha solo chi ha fatto
   l'accesso. */
body.admin-bar .abn-testata { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .abn-testata { top: 46px; }
}

@media screen and (max-width: 600px) {
  body.admin-bar .abn-testata { top: 0; }
}

/* ---------- fasce di sezione ----------
   Lo spazio fra due sezioni sta QUI, sulla fascia, e non piu' sul margine del titolo:
   cosi' e' uno solo, si misura in un posto solo e vale anche per le sezioni senza
   titolo. I margini fra fasce vicine collassano fra loro — due sezioni di seguito
   distano una volta questo valore, non due. */
.abn-fascia {
  background: transparent;
  margin-block: clamp(64px, 8vw, 110px);
}
.abn-fascia .abn-sezione__titolo { margin-top: 0; }

/* I pattern colorati che non sono fasce — l'invito su WhatsApp — respirano come le
   sezioni, altrimenti in mezzo al nuovo ritmo sembrano incollati a quello che li
   precede. */
main > .wp-block-group.has-background { margin-block: clamp(64px, 8vw, 110px); }

/* ---------- le tre promesse ----------
   Non e' un'offerta: sono le regole della casa. Filetto sopra e basta — una campitura
   colorata qui farebbe una zona di colore in piu' in una pagina che ne ha gia' due, a
   meno che non sia il negozio a volerla dalle impostazioni. */
.abn-promesse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 32px;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--wp--preset--color--linea);
}
.abn-promesse h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.abn-promesse p { color: var(--wp--preset--color--tenue); font-size: 0.95rem; margin: 0; }
/* Dentro una fascia colorata il filetto sparisce: lo dice la regola stampata in
   pagina, perche' solo li' si sa se un colore e' stato scelto. */

/* ---------- sezioni senza contenuto ----------
   Un titolo senza niente sotto e' peggio di nessun titolo: chi legge crede che la
   sezione seguente sia la risposta a quella domanda. «Cosa dicono i clienti» seguito
   dalle promesse faceva sembrare le promesse delle testimonianze.
   Se dentro la fascia non c'e' nessuno dei contenuti che il sito sa disegnare, la
   fascia sparisce — titolo compreso — e ricompare da sola il giorno che il gestionale
   pubblica qualcosa. */
/* L'invito su WhatsApp e' fatto SOLO di parole: non ha tessere, prodotti o immagini da
   cercare, quindi la regola qui sotto lo nasconderebbe sempre. */
.abn-fascia--whatsapp { display: block; }

.abn-fascia:not(.abn-fascia--whatsapp):not(:has(
  .abn-scelta,
  .abn-ricetta,
  .abn-programma,
  .abn-promessa,
  .abn-testi__voce,
  .abn-rec__voce,
  .abn-contatti,
  .abn-banner__voce,
  .abn-riquadro,
  .abn-marchio-tessera,
  .wc-block-grid__product,
  .wc-block-product,
  ul.products li.product,
  .wp-block-post-template li,
  .abn-cucina-vuota,
  .abn-giornata,
  .abn-colazioni
)) {
  /* «none» e non «hidden»: la sezione non deve lasciare nemmeno il suo margine.
     La regola stampata in pagina, quando il negozio chiede di vederla comunque,
     arriva dopo e vince. */
  display: none;
}

/* ---------- le frecce della vetrina ----------
   I pallini dicono quante proposte ci sono, le frecce dicono che si possono sfogliare.
   Stanno sopra la lastra ma non sopra il testo: a sinistra la freccia indietro entra
   nella colonna del titolo, quindi si tiene fuori dal margine del contenuto. */
.abn-vetrina__freccia {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition:
    background var(--durata-rapida) var(--ease-out),
    border-color var(--durata-rapida) var(--ease-out),
    transform var(--durata-rapida) var(--ease-out);
}
.abn-vetrina__freccia svg { width: 20px; height: 20px; }
.abn-vetrina__freccia--prima { left: 14px; }
.abn-vetrina__freccia--dopo { right: 14px; }
@media (hover: hover) and (pointer: fine) {
  .abn-vetrina__freccia:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.5); }
}
.abn-vetrina__freccia:active { transform: translateY(-50%) scale(0.94); }

/* Sul telefono si sfoglia col dito: le frecce restano, piu' piccole e piu' in basso,
   dove il pollice arriva senza coprire la fotografia. */
@media (max-width: 700px) {
  .abn-vetrina__freccia {
    width: 38px;
    height: 38px;
    top: auto;
    bottom: 14px;
    transform: none;
  }
  .abn-vetrina__freccia--prima { left: 16px; }
  .abn-vetrina__freccia--dopo { right: 16px; }
  .abn-vetrina__freccia:active { transform: scale(0.94); }
}

/* ---------- copertina di categoria ----------
   L'ombra sopra la fotografia non e' un vezzo: e' l'unica cosa che rende leggibile un
   titolo bianco su una foto qualsiasi. Scende dal basso, dove sta il testo, e lascia
   respirare la fotografia in alto. Senza foto la copertina non e' un buco: e' una
   fascia verde con accanto un prodotto del reparto. */
.abn-copertina {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(210px, 24vw, 320px);
  margin-bottom: clamp(28px, 4vw, 44px);
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 8% -20%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%),
    var(--wp--preset--color--verde-cupo);
  color: #fff;
}
.abn-copertina__sfondo,
.abn-copertina img.abn-copertina__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  /* !important: la regola globale «img { height: auto }» vinceva e la foto usciva dal
     riquadro mostrando solo la parte alta (2026-10-21). Cosi' si vede la parte centrale. */
  height: 100% !important;
  max-height: none;
  object-fit: cover;
  object-position: center center;
}
/* L'ombra: piu' fitta in basso, appena accennata in alto. Su una foto chiara tiene il
   testo leggibile, su una scura non la spegne del tutto. */
.abn-copertina--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 61, 34, 0.15) 0%, rgba(10, 61, 34, 0.72) 78%, rgba(10, 61, 34, 0.88) 100%),
    linear-gradient(90deg, rgba(10, 61, 34, 0.6) 0%, rgba(10, 61, 34, 0) 62%);
}
.abn-copertina__dentro {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 48px) 24px;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.abn-copertina__occhiello {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #a9e3bd;
  max-width: none;
}
.abn-copertina h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.abn-copertina__sotto {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.02rem;
  max-width: 58ch;
}
.abn-copertina__quanti {
  margin: 2px 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

/* Con la fotografia la copertina e' piu' alta e il testo sta in basso, come su una
   locandina: la foto si vede davvero e il titolo non la copre. */
.abn-copertina--foto { min-height: clamp(240px, 28vw, 380px); }
.abn-copertina--foto .abn-copertina__dentro { align-self: end; }

@media (max-width: 780px) {
  .abn-copertina { min-height: 170px; }
  /* Sul telefono la foto e' tagliata ai lati ma non schiacciata: object-fit la centra e
     l'ombra piu' fitta tiene leggibile il titolo anche su una scena chiara. */
  .abn-copertina--foto { min-height: 230px; }
  .abn-copertina--foto::after {
    background:
      linear-gradient(180deg, rgba(10, 61, 34, 0.25) 0%, rgba(10, 61, 34, 0.8) 70%, rgba(10, 61, 34, 0.92) 100%);
  }
}

/* Sull'articolo la copertina e' piu' alta: li' la fotografia e' il pezzo forte, e il
   titolo ha bisogno di aria sotto per non sembrare una didascalia. */
.single .abn-copertina { min-height: clamp(260px, 30vw, 420px); }
.single .abn-copertina__dentro { align-content: end; }

/* ---------- il marchio nella testata ----------
   Il logo ufficiale al posto del nome scritto. Altezza fissa e larghezza libera: un
   marchio schiacciato o stirato e' la prima cosa che un cliente nota, anche senza
   sapere perche'. */
.abn-testata .wp-block-site-logo { margin: 0; line-height: 0; }
.abn-testata .wp-block-site-logo img {
  height: clamp(34px, 3.4vw, 46px);
  width: auto;
  max-width: none;
}
@media (max-width: 780px) {
  .abn-testata .wp-block-site-logo img { height: 32px; }
}

/* ==========================================================================
   CARRELLO, CASSA, ACCOUNT
   --------------------------------------------------------------------------
   Sono le pagine dove si decide se il negozio incassa. Non devono essere «belle»
   in senso decorativo: devono essere CHIARE — campi larghi, un solo pulsante che
   conta, e nessuna sorpresa sul totale. Qui il tema non inventa niente, veste i
   blocchi di WooCommerce con i suoi materiali: carta, filetto, verde.
   ========================================================================== */

.abn-transazione__testa { margin-top: clamp(28px, 4vw, 44px); }
.abn-transazione__testa h1 { margin-bottom: 6px; }
.abn-transazione__rassicura {
  color: var(--wp--preset--color--tenue);
  margin: 0 0 clamp(24px, 3vw, 34px);
  max-width: 62ch;
}

/* ---------- i due mondi affiancati ----------
   La cassa di WooCommerce e' gia' a due colonne: i campi a sinistra, il riepilogo a
   destra. Perche' possa esserlo le serve la larghezza estesa — dentro la colonna del
   testo si accartocciava in una sola. */
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-cart.alignwide { max-width: var(--wp--style--global--wide-size, 1240px); }

.wc-block-checkout__main,
.wc-block-cart__main { padding-right: clamp(0px, 3vw, 40px); }

/* Il riepilogo a destra e' una scheda che resta a vista mentre si compilano i campi:
   il totale non deve mai essere «da qualche parte piu' su». */
.wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-child {
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
}
.wc-block-components-sidebar { padding: 6px 20px 12px; }
@media (min-width: 1000px) {
  .wc-block-components-sidebar { position: sticky; top: 96px; }
}

/* ---------- campi ----------
   Stessa mano del modulo contatti: fondo tenue, filetto, e il verde solo quando il
   campo e' quello attivo. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-combobox-control input.components-combobox-control__input,
.woocommerce form .input-text,
.woocommerce-page form .input-text,
.select2-container .select2-selection--single {
  box-sizing: border-box;
  font: inherit;
  font-size: 0.98rem;
  padding: 13px 14px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio-piccolo);
  background: var(--wp--preset--color--fondo);
  color: var(--wp--preset--color--inchiostro);
  transition: border-color var(--durata-rapida) var(--ease-out), background var(--durata-rapida) var(--ease-out);
}
.wc-block-components-text-input input:focus,
.woocommerce form .input-text:focus {
  background: #fff;
  border-color: var(--wp--preset--color--verde);
  outline: 0;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--wp--preset--color--tenue); }

/* ---------- pulsanti ---------- */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: 999px;
  background: var(--wp--preset--color--verde);
  color: #fff;
  font-weight: 800;
  min-height: 52px;
  transition: background var(--durata-rapida) var(--ease-out), transform var(--durata-rapida) var(--ease-out);
}
.wc-block-components-button:not(.is-link):hover { background: var(--wp--preset--color--verde-cupo); }
.wc-block-components-button:not(.is-link):active { transform: scale(0.98); }

/* ---------- righe del carrello ---------- */
.wc-block-cart-items__row,
.wc-block-components-order-summary-item {
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border-radius: var(--raggio-piccolo);
  background: #fff;
}
.wc-block-components-product-name { font-weight: 700; color: var(--wp--preset--color--inchiostro); }
.wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; font-weight: 700; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Carrello vuoto: non una pagina morta, un invito a tornare al catalogo. */
.wp-block-woocommerce-empty-cart-block { text-align: left; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products { margin-top: 20px; }

/* ---------- il tuo account ----------
   Due schermate diverse sotto lo stesso indirizzo: chi non e' entrato vede un modulo,
   chi e' entrato vede la sua roba. La prima deve essere piccola e centrata — non c'e'
   niente altro da fare li' — la seconda un menu a lato e il contenuto accanto. */
.woocommerce-account .woocommerce { max-width: var(--wp--style--global--wide-size, 1240px); margin: 0 auto; }

/* Il modulo d'accesso: una scheda sola, in mezzo. */
.woocommerce-account:not(.logged-in) .woocommerce > .u-column1,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 460px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  padding: clamp(26px, 3vw, 34px);
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
}
.woocommerce-account h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 16px; }
.woocommerce form .form-row { display: grid; gap: 6px; margin-bottom: 16px; }
.woocommerce form .form-row label { font-size: 0.86rem; font-weight: 700; }
.woocommerce form .form-row .required { color: var(--wp--preset--color--saldo); text-decoration: none; }
.woocommerce-form-login__rememberme { font-size: 0.9rem; color: var(--wp--preset--color--tenue); }
.woocommerce-LostPassword { font-size: 0.9rem; }

/* Chi e' entrato: il menu a sinistra e il contenuto a destra. */
@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: left;
    width: 250px;
    margin-right: 40px;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    float: right;
    width: calc(100% - 290px);
  }
  .woocommerce-account .woocommerce::after { content: ""; display: table; clear: both; }
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--raggio-piccolo);
  color: var(--wp--preset--color--inchiostro);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--durata-rapida) var(--ease-out), color var(--durata-rapida) var(--ease-out);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--wp--preset--color--fondo); }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--wp--preset--color--verde);
  color: #fff;
}
.woocommerce-MyAccount-content { min-height: 320px; }
.woocommerce-MyAccount-content > p:first-child { color: var(--wp--preset--color--tenue); }

/* Tabelle di ordini e indirizzi: filetti, non righe zebrate. */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  overflow: hidden;
  font-size: 0.95rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--wp--preset--color--linea);
  text-align: left;
}
.woocommerce table.shop_table th { font-weight: 800; font-size: 0.86rem; }
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce .woocommerce-Address {
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  padding: 20px 22px;
}
.woocommerce .button,
.woocommerce input[type="submit"] { cursor: pointer; }

/* ---------- ordine ricevuto ----------
   La fascia verde dice «e' andata bene» prima di qualunque parola. Sotto, il riepilogo
   in schede: quello che si guarda e' l'indirizzo e il totale, non un elenco di righe. */
.abn-grazie {
  background:
    radial-gradient(90% 130% at 8% -20%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%),
    var(--wp--preset--color--verde-cupo);
  color: #fff;
  padding-block: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.abn-grazie h1 { color: #fff; margin: 0 0 10px; }
.abn-grazie p { color: rgba(255, 255, 255, 0.86); }
.abn-grazie__occhiello { color: #a9e3bd; font-weight: 700; font-size: 0.9rem; margin: 0 0 6px; }
.abn-riepilogo .wp-block-woocommerce-order-confirmation-summary,
.abn-riepilogo .wp-block-woocommerce-order-confirmation-totals,
.abn-riepilogo .wp-block-woocommerce-order-confirmation-shipping-address,
.abn-riepilogo .wp-block-woocommerce-order-confirmation-billing-address {
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  padding: 20px 22px;
  margin-bottom: 16px;
}

/* L'account ha bisogno di tutta la pagina: menu a lato piu' contenuto non stanno in
   una colonna di testo. E le voci del menu sono voci, non paragrafi: senza azzerare i
   margini delle liste del tema restano lontane un dito l'una dall'altra. */
.woocommerce-account .wp-block-post-content,
.woocommerce-account .wp-block-post-content > * {
  max-width: var(--wp--style--global--wide-size, 1240px);
}
.woocommerce-account .wp-block-post-title { max-width: var(--wp--style--global--wide-size, 1240px); }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li + li { margin-top: 2px; }
.woocommerce-MyAccount-content p { max-width: 62ch; }

/* ---------- «I miei punti» ----------
   Il saldo e' la prima cosa, grande. Poi i premi con quanto manca, i codici creati con il
   loro stato, e i movimenti: la stessa storia che il cliente vede sullo scontrino. */
.abn-miei-punti h3 { margin: clamp(26px, 3vw, 36px) 0 12px; font-size: 1.15rem; }
.abn-miei-punti__saldo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 20px 22px;
  border-radius: var(--raggio);
  background: var(--wp--preset--color--verde-cupo);
  color: #fff;
}
.abn-miei-punti__saldo span:first-child { flex-basis: 100%; font-size: 0.86rem; font-weight: 700; color: #a9e3bd; }
.abn-miei-punti__saldo strong { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; line-height: 1; }
.woocommerce-MyAccount-content .abn-miei-punti__nota { margin: 12px 0 0; color: var(--wp--preset--color--tenue); font-size: 0.92rem; }
.abn-miei-punti .abn-punti__esito { padding: 10px 14px; border-radius: var(--raggio-piccolo, 10px); background: var(--wp--preset--color--verde-tenue, #e3f1e8); max-width: none; }
.abn-miei-punti__premi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.abn-miei-punti__premio {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  background: var(--wp--preset--color--carta);
}
.abn-miei-punti__premio.raggiunto { border-color: var(--wp--preset--color--verde); }
.abn-miei-punti__premio .nome { font-weight: 800; }
.abn-miei-punti__premio .costo { font-size: 0.86rem; color: var(--wp--preset--color--tenue); }
.abn-miei-punti__premio .barra { display: block; height: 6px; border-radius: 99px; background: var(--wp--preset--color--linea); overflow: hidden; }
.abn-miei-punti__premio .barra span { display: block; height: 100%; background: var(--wp--preset--color--verde); }
.abn-miei-punti__premio .stato { font-size: 0.84rem; color: var(--wp--preset--color--tenue); }
.abn-miei-punti__premio .abn-punti__azione { justify-self: start; margin-top: 4px; }
.abn-miei-punti__tabella { overflow-x: auto; }
.abn-miei-punti code { font-size: 0.86rem; padding: 2px 8px; border-radius: 6px; background: var(--wp--preset--color--fondo); }
.abn-miei-punti__stato { font-size: 0.82rem; font-weight: 700; }
.abn-miei-punti .stato-active .abn-miei-punti__stato { color: var(--wp--preset--color--verde); }
.abn-miei-punti .stato-used td,
.abn-miei-punti .stato-expired td,
.abn-miei-punti .stato-unavailable td { color: var(--wp--preset--color--tenue); }
.abn-miei-punti__punti { font-weight: 800; white-space: nowrap; }
.abn-miei-punti__punti.piu { color: var(--wp--preset--color--verde); }
.abn-miei-punti .abn-punti__azione.button { padding: 7px 13px; }
/* Su telefono le tabelle diventano schede: una riga per campo, etichetta a sinistra. */
@media (max-width: 640px) {
  .abn-miei-punti table.shop_table,
  .abn-miei-punti table.shop_table tbody,
  .abn-miei-punti table.shop_table tr,
  .abn-miei-punti table.shop_table td { display: block; width: 100%; box-sizing: border-box; }
  .abn-miei-punti table.shop_table thead { display: none; }
  .abn-miei-punti table.shop_table tr { padding: 8px 0; border-bottom: 1px solid var(--wp--preset--color--linea); }
  .abn-miei-punti table.shop_table tr:last-child { border-bottom: 0; }
  .abn-miei-punti table.shop_table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 16px; border: 0; text-align: right; overflow-wrap: anywhere; }
  .abn-miei-punti table.shop_table td[data-title]::before { content: attr(data-title); font-weight: 700; font-size: 0.84rem; text-align: left; color: var(--wp--preset--color--tenue); }
  .abn-miei-punti table.shop_table td:empty { display: none; }
  .abn-miei-punti table.shop_table td .abn-punti__azione { width: 100%; margin-top: 4px; }
}

/* ---------- il piede ----------
   Quattro colonne e una riga in fondo. Le voci che puntano a pagine non pubblicate non
   vengono nemmeno stampate: un piede pieno di collegamenti rotti fa piu' danno di un
   piede corto. */
.abn-piede__colonne { gap: clamp(24px, 3vw, 44px); }
.abn-piede__intro { font-size: 0.95rem; color: #cfe4d5; margin: 12px 0 18px; max-width: 40ch; }
.abn-piede h3 {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #a9e3bd;
  margin: 0 0 14px;
}
.abn-piede__contatti,
.abn-piede__voci {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 0.95rem;
}
.abn-piede__contatti li { color: #cfe4d5; max-width: 34ch; }
/* Indirizzo e recapiti sono due liste diverse, una sotto l'altra: fra le due ci vuole una
   riga vuota, altrimenti il telefono sembra la terza riga dell'indirizzo. */
.abn-piede__contatti + .abn-piede__contatti { margin-top: 20px; }

.abn-piede__voci + .abn-piede__contatti {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.abn-piede__voci a,
.abn-piede__contatti a { color: #fff; text-decoration: none; }
.abn-piede__voci a:hover,
.abn-piede__contatti a:hover { text-decoration: underline; }
.abn-piede .wp-block-navigation { gap: 9px; font-size: 0.95rem; }

/* L'anagrafica di legge, di seguito al copyright sulla stessa riga: si legge quando la si
   cerca, non prima. Su schermo stretto va a capo da sola, ma nel testo resta una riga sola. */
.abn-piede__anagrafica { font-size: 0.78rem; opacity: 0.9; }
/* Una riga sola per tutta la larghezza: l'anagrafica di chi vende non è una colonna
   accanto alle altre, è la firma in fondo alla pagina. Incolonnata a destra dei social
   si leggeva come una voce di menu, che è il contrario di quello che deve fare. */
.abn-piede__basso {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
  color: #a9c9b3;
}
.abn-piede__basso p { margin: 0; max-width: none; width: 100%; }
/* I simboli social stanno in fondo ai recapiti: staccati quanto basta per non sembrare
   un'altra voce dell'elenco. */
.abn-piede__contatti-social { margin-top: 6px; }
.abn-piede__social { display: flex; gap: 10px; }
.abn-piede__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: background var(--durata-rapida) var(--ease-out);
}
.abn-piede__social a:hover { background: rgba(255, 255, 255, 0.14); }
.abn-piede__social svg { width: 18px; height: 18px; }

/* ---------- promessa di spedizione e metodi di pagamento ----------
   La riga della spedizione sta in cima al piede: e' l'ultima cosa che si legge prima di
   decidere se tornare al carrello. I marchi dei pagamenti stanno in fondo, dove si
   guardano per rassicurarsi, non per scegliere. */
/* Sta dentro una colonna, non piu' su una fascia sua: una riga in meno di altezza, e la
   promessa resta all'altezza degli occhi invece che sopra tutto il resto. */
.abn-piede__spedizione {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
  max-width: 30ch;
}
.abn-piede__spedizione svg { width: 20px; height: 20px; color: #a9e3bd; flex: none; margin-top: 1px; }

.abn-piede__pagamenti {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.abn-piede__spedizione + .abn-piede__pagamenti { border-top: 0; padding-top: 0; margin-top: 14px; }
/* In colonna stretta l'etichetta va a capo da sola e i due marchi restano affiancati. */
.abn-piede__pagamenti .etichetta {
  flex: 0 0 100%;
  font-size: 0.85rem;
  color: #a9c9b3;
  margin: 0 0 2px;
}
.abn-pagamento {
  display: inline-grid;
  place-items: center;
  min-width: 76px;
  height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}
/* PayPal: due blu, uno chiaro e uno scuro, in corsivo. Stripe: il suo viola. */
.abn-pagamento--paypal { font-style: italic; }
.abn-pagamento--paypal i { color: #003087; font-style: italic; }
.abn-pagamento--paypal b { color: #0a7ab8; } /* piu' scuro dell'azzurro PayPal: contrasto sufficiente su bianco */
.abn-pagamento--paypal { display: inline-flex; align-items: center; gap: 1px; }
.abn-pagamento--stripe { background: #635bff; color: #fff; }
.abn-pagamento--carte { color: var(--wp--preset--color--inchiostro); }
.abn-pagamento--contanti { color: var(--wp--preset--color--verde-cupo); }

/* Quanto manca alla spedizione gratuita: verde chiaro, dentro il carrello. */
.abn-soglia {
  /* La larghezza la da' il gruppo che la contiene, lo stesso degli altri avvisi del
     carrello: una striscia che sborda oltre i riquadri sopra e sotto sembra un errore di
     impaginazione, non un'informazione. Il «100%» serve perche' i paragrafi del tema
     hanno una misura di lettura piu' stretta: qui non e' un testo da leggere a colonna,
     e' un avviso che accompagna il carrello. Larghezza «auto», non «100%»: il 100% si
     misura sul contenuto e i 16px di riquadro finirebbero fuori dalla colonna. */
  width: auto;
  max-width: none;
  margin: 0 0 18px;
  padding: 13px 16px;
  border-radius: var(--raggio-piccolo);
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde-cupo);
  font-weight: 600;
}

/* ---------- suggerimenti della ricerca ----------
   Il pannello esce dal riquadro della ricerca e si appoggia sopra la pagina: deve stare
   sopra i filtri e sopra le tessere dei prodotti, e restare visibile per intero anche
   quando l'elenco e' lungo. */
.abn-sugg-ancora { position: relative; }
.abn-filtri .abn-sugg,
.abn-cerca .abn-sugg,
.abn-sugg {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: min(62vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--wp--preset--color--carta);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
  padding: 6px;
}
.abn-filtri .abn-sugg { min-width: 320px; }
.abn-sugg[hidden] { display: none; }
.abn-sugg__stato { margin: 0; padding: 14px 12px; font-size: 0.92rem; color: var(--wp--preset--color--tenue); }
.abn-sugg__voce {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--raggio-piccolo);
  text-decoration: none;
  color: var(--wp--preset--color--inchiostro);
  transition: background var(--durata-rapida) var(--ease-out);
}
.abn-sugg__voce:hover,
.abn-sugg__voce[aria-selected="true"] { background: var(--wp--preset--color--fondo); }
.abn-sugg__voce img,
.abn-sugg__nofoto {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio-piccolo);
}
.abn-sugg__testo { display: grid; gap: 2px; min-width: 0; font-size: 0.92rem; }
/* I nomi di questo catalogo sono lunghi («Penne Proteiche CiaoCarb Stage 1 – 250g»):
   su una riga sola verrebbero tagliati proprio dove c'e' l'informazione che distingue
   un formato dall'altro. Due righe, poi si taglia. */
.abn-sugg__testo strong {
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.28;
}

/* ---------- il codice sconto nel cassetto del carrello ---------- */
/* Stesso riquadro tratteggiato della barra in alto: chi l'ha visto entrando lo riconosce
   qui, e capisce che e' lo stesso codice e non una seconda offerta. */
.abn-carrello-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 12px 16px;
  background: rgba(16, 87, 50, 0.07);
  border-top: 1px solid var(--wp--preset--color--linea);
  color: var(--wp--preset--color--verde-cupo);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}
.abn-carrello-promo strong {
  padding: 2px 8px;
  border-radius: 5px;
  background: #fff;
  border: 1px dashed rgba(16, 87, 50, 0.5);
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.wp-block-woocommerce-empty-mini-cart-contents-block .abn-carrello-promo {
  justify-content: center;
  text-align: center;
  border-top: 0;
  border-radius: var(--raggio);
  margin: 0 16px 16px;
}

/* ---------- i punti fedelta' nel carrello ---------- */
/* Nel carrello i punti non sono una decorazione: sono il motivo per cui uno torna. Stanno
   sopra il riepilogo, dove l'occhio passa gia' per guardare il totale. */
.abn-punti {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(16, 87, 50, 0.18);
  border-radius: var(--raggio);
  background: rgba(16, 87, 50, 0.06);
  overflow: hidden;
}
.abn-punti__accumulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 18px;
  color: var(--wp--preset--color--verde-cupo);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
}
.abn-punti__accumulo svg { width: 22px; height: 22px; flex: none; color: var(--wp--preset--color--ambra, #d98324); }
.abn-punti__accumulo strong { font-weight: 800; }

.abn-punti__riscatto,
.abn-punti__invito {
  margin: 0;
  max-width: none;
  padding: 14px 18px;
  border-top: 1px solid rgba(16, 87, 50, 0.16);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.92rem;
}
.abn-punti__saldo { margin: 0 0 6px; font-size: 0.95rem; }
.abn-punti__nota { margin: 0; color: #4d6154; }
.abn-punti__codici + .abn-punti__nota { margin-top: 14px; }
.abn-punti__saldo a { color: var(--wp--preset--color--verde); font-weight: 700; }
.abn-punti__premi,
.abn-punti__codici {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
/* Una riga per premio: nome e costo a sinistra, le due scelte a destra. «Usa ora» e' la
   strada piu' corta e ha il pieno; «Crea codice» e' per chi vuole tenerlo da parte. */
.abn-punti__premio-riga,
.abn-punti__codice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(16, 87, 50, 0.16);
  border-radius: var(--raggio-piccolo, 10px);
  background: #fff;
}
.abn-punti__premio-riga .nome,
.abn-punti__codice .nome { font-weight: 700; color: var(--wp--preset--color--inchiostro); }
.abn-punti__premio-riga .costo,
.abn-punti__codice .scade { font-size: 0.82rem; color: var(--wp--preset--color--tenue); }
.abn-punti__codice code {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--wp--preset--color--verde-tenue, #e3f1e8);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}
.abn-punti__scelte,
.abn-punti__codice .abn-punti__azione { margin-left: auto; }
.abn-punti__scelte { display: flex; flex-wrap: wrap; gap: 6px; }

/* Il bottone: contorno verde; il primario pieno. Al primo clic chiede conferma (ambra
   no: e' dei carboidrati — la conferma e' verde cupo pieno). */
.abn-punti__azione {
  padding: 7px 13px;
  border: 1px solid var(--wp--preset--color--verde, #105732);
  border-radius: 999px;
  background: #fff;
  color: var(--wp--preset--color--verde-cupo);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-punti__azione.primaria { background: var(--wp--preset--color--verde, #105732); color: #fff; }
.abn-punti__azione.da-confermare { background: var(--wp--preset--color--verde-cupo, #0b3d23); border-color: var(--wp--preset--color--verde-cupo, #0b3d23); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .abn-punti__azione:hover { background: var(--wp--preset--color--verde, #105732); color: #fff; }
  .abn-punti__azione.primaria:hover { background: var(--wp--preset--color--verde-cupo, #0b3d23); }
}
.abn-punti__azione[disabled] { opacity: 0.55; cursor: progress; }
@media (max-width: 520px) {
  .abn-punti__scelte { margin-left: 0; width: 100%; }
  .abn-punti__scelte .abn-punti__azione { flex: 1; }
}
.abn-punti__esito:empty { display: none; }
.abn-punti__esito { margin: 10px 0 0; font-size: 0.88rem; }
.abn-punti__esito.ok { color: var(--wp--preset--color--verde-cupo); font-weight: 700; }
.abn-punti__esito.errore { color: #b3261e; font-weight: 700; }

/* Nel cassetto lo spazio e' poco: solo la riga dell'accumulo, senza cornice sua. */
.wp-block-woocommerce-mini-cart-contents .abn-punti {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.wp-block-woocommerce-mini-cart-contents .abn-punti__accumulo {
  padding: 12px 16px 0;
  font-size: 0.88rem;
}

/* ---------- la finestrella «aggiunto al carrello» ---------- */
/* Parte da sotto la testata, sul lato del carrello: nasce dove il cliente sta gia'
   guardando, invece di piombare da un angolo che nessuno stava osservando. */
.abn-avviso-zona {
  position: fixed;
  top: calc(84px + 12px);
  right: clamp(12px, 2vw, 24px);
  z-index: 9999;   /* sopra la testata appiccicata e sopra il cassetto del carrello */
  width: min(340px, calc(100vw - 24px));
  pointer-events: none;
}
body.admin-bar .abn-avviso-zona { top: calc(84px + 44px); }

.abn-avviso {
  pointer-events: auto;
  background: #fff;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  box-shadow: 0 18px 44px rgba(10, 61, 34, 0.18), 0 2px 6px rgba(10, 61, 34, 0.08);
  overflow: hidden;
  /* Entra scendendo di poco e ingrandendosi appena: il gesto dice «vengo da lassu'»,
     non «sono comparso dal nulla». Mai da scala zero. */
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transition:
    opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-avviso.dentro { opacity: 1; transform: none; }
.abn-avviso.via { opacity: 0; transform: translateY(-8px) scale(0.98); }

.abn-avviso__testa {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 11px 14px;
  background: var(--wp--preset--color--verde-cupo, #0a3d22);
  color: #fff;
  font-size: 0.92rem;
}
.abn-avviso__testa svg { width: 18px; height: 18px; flex: none; color: #a9e3bd; }
.abn-avviso__testa strong { flex: 1; font-weight: 800; }
.abn-avviso__chiudi {
  border: 0;
  background: transparent;
  color: #cfe4d5;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.abn-avviso__chiudi:hover { color: #fff; }

.abn-avviso__corpo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.abn-avviso__corpo img {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: var(--wp--preset--color--crema, #f7f4ed);
}
.abn-avviso__corpo p {
  margin: 0;
  max-width: none;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wp--preset--color--inchiostro);
}

.abn-avviso__azioni {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
}
.abn-avviso__azioni a {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-avviso__azioni .continua {
  border: 1px solid var(--wp--preset--color--linea);
  color: var(--wp--preset--color--inchiostro);
}
.abn-avviso__azioni .vai {
  background: var(--wp--preset--color--verde, #105732);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .abn-avviso__azioni .continua:hover { background: var(--wp--preset--color--crema, #f7f4ed); }
  .abn-avviso__azioni .vai:hover { background: var(--wp--preset--color--verde-cupo, #0a3d22); }
}

/* Sul telefono la finestrella occupa la larghezza: una colonna sola, niente da mirare. */
@media (max-width: 600px) {
  .abn-avviso-zona {
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  .abn-avviso { transform: translateY(12px) scale(0.98); }
  .abn-avviso.via { transform: translateY(10px) scale(0.98); }
}

/* Chi ha chiesto meno movimento riceve lo stesso avviso, ma senza scivolate: resta la
   comparsa in dissolvenza, che e' l'informazione — il movimento era solo il modo. */
@media (prefers-reduced-motion: reduce) {
  .abn-avviso,
  .abn-avviso.via { transform: none; transition: opacity 160ms ease; }
}

/* ---------- la scheda prodotto: le sezioni sotto il pulsante ---------- */
.abn-scheda {
  margin: clamp(28px, 3.6vw, 48px) 0 0;
  /* Quando si arriva da un collegamento a una linguetta, ci si ferma sotto la testata E
     sotto la barra: fermarsi al bordo esatto vuol dire finire coperti da tutte e due. */
  scroll-margin-top: 132px;
}
@media (max-width: 900px) {
  .abn-scheda { scroll-margin-top: 118px; }
}

/* La barra delle linguette: appiccicata sotto la testata, cosi' resta a portata anche
   quando si e' scesi dentro un pannello lungo. Sul telefono scorre in orizzontale invece
   di impilarsi su tre righe. */
.abn-scheda__barra {
  position: sticky;
  top: 78px;
  z-index: 6;
  display: flex;
  gap: 4px;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  padding: 6px 0;
  background: var(--wp--preset--color--crema, #f7f4ed);
  border-bottom: 1px solid var(--wp--preset--color--linea);
  overflow-x: auto;
  scrollbar-width: none;
}
.abn-scheda__barra::-webkit-scrollbar { display: none; }
body.admin-bar .abn-scheda__barra { top: calc(78px + 32px); }

.abn-scheda__tab {
  flex: none;
  position: relative;
  padding: 9px 13px 11px;
  border: 0;
  background: transparent;
  color: #4d6154;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--raggio) var(--raggio) 0 0;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* La riga sotto la linguetta attiva: e' l'unica cosa che dice quale pannello stai
   leggendo, quindi e' spessa e del verde del negozio, non un grigio educato. */
.abn-scheda__tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--wp--preset--color--verde, #105732);
  transform: scaleX(0);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-scheda__tab[aria-selected="true"] { color: var(--wp--preset--color--verde-cupo, #0a3d22); }
.abn-scheda__tab[aria-selected="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .abn-scheda__tab:hover { color: var(--wp--preset--color--verde-cupo, #0a3d22); background: rgba(16, 87, 50, 0.06); }
}
.abn-scheda__tab:focus-visible { outline: 2px solid var(--wp--preset--color--verde, #105732); outline-offset: -3px; }

/* Senza JavaScript le linguette non farebbero niente: non si mostrano, e restano i
   pannelli aperti uno sotto l'altro con il loro titolo. */
.abn-scheda:not(.pronta) .abn-scheda__barra { display: none; }
.abn-scheda.pronta .abn-scheda__titolo { display: none; }
.abn-scheda.pronta .abn-scheda__sezione + .abn-scheda__sezione { border-top: 0; padding-top: 0; }
/* Un fondo minimo ai pannelli: passando da «Valori» a «Ingredienti» la pagina non si
   accorcia di colpo sotto le dita, e il piede non salta su. */
.abn-scheda.pronta .abn-scheda__sezione { min-height: 120px; }
.abn-scheda__sezione:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .abn-scheda__tab,
  .abn-scheda__tab::after { transition: none; }
}

.abn-scheda__sezione {
  max-width: 780px;
  padding: 0 0 clamp(20px, 2.4vw, 30px);
  /* L'ancora si ferma sotto la testata e sotto l'indice, non dietro. */
  scroll-margin-top: 150px;
}
.abn-scheda__sezione + .abn-scheda__sezione { border-top: 1px solid var(--wp--preset--color--linea); padding-top: clamp(20px, 2.6vw, 30px); }
.abn-scheda__sezione > h2 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
}
.abn-scheda__testo p { max-width: none; margin: 0 0 10px; }

.abn-scheda__testo > :last-child { margin-bottom: 0; }
/* Gli ingredienti si leggono cercando una parola, non una frase: righe piu' larghe e
   spaziate, come su un'etichetta. */
.abn-scheda__ingredienti p { max-width: none; line-height: 1.6; margin: 0 0 8px; }
.abn-scheda__ingredienti p:last-child { margin-bottom: 0; }
/* Allergeni e avvertenze arrivano come righe a se': si staccano dall'elenco senza
   bisogno di un titolo in piu'. */
.abn-scheda__ingredienti p + p { font-size: 0.92rem; color: #4d6154; }
.abn-scheda__vuoto { color: #4d6154; max-width: 62ch; }

/* La tabella dei valori: due colonne, il valore allineato a destra perche' i numeri si
   confrontano in colonna, non a zig-zag. */
.abn-valori {
  width: min(520px, 100%);
  border-collapse: collapse;
  font-size: 0.93rem;
}
.abn-valori caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 8px;
  color: #4d6154;
  font-size: 0.88rem;
}
.abn-valori th,
.abn-valori td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--wp--preset--color--linea);
  text-align: left;
}
.abn-valori th { font-weight: 600; }
.abn-valori td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
/* «di cui zuccheri» e' una parte dei carboidrati, non una voce sua: il rientro lo dice
   senza scriverlo, come sull'etichetta della confezione. */
/* Più tabelle in una: 100 g, confezione, porzione. Si vede solo la colonna scelta, e il
   pulsante sopra dice quale. Nascondere le altre invece di disegnare tre tabelle tiene le
   righe ferme quando si cambia — e per chi legge con lo screen reader resta una tabella sola. */
.abn-valori thead th { font-size: 0.78rem; font-weight: 600; text-align: right; color: var(--wp--preset--color--tenue); white-space: nowrap; }
.abn-valori__scelte { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.abn-valori__scelta {
  cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--wp--preset--color--linea);
  background: transparent; color: var(--wp--preset--color--tenue);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.abn-valori__scelta:hover { border-color: currentColor; }
.abn-valori__scelta[aria-selected="true"] {
  background: var(--wp--preset--color--verde-cupo, #0a3d22);
  border-color: var(--wp--preset--color--verde-cupo, #0a3d22);
  color: #fff;
}
/* Di base si vede la prima colonna; `data-attiva` dice quale scoprire. */
.abn-valori-blocco [data-colonna] { display: none; }
.abn-valori-blocco[data-attiva="0"] [data-colonna="0"],
.abn-valori-blocco[data-attiva="1"] [data-colonna="1"],
.abn-valori-blocco[data-attiva="2"] [data-colonna="2"],
.abn-valori-blocco[data-attiva="3"] [data-colonna="3"],
.abn-valori-blocco[data-attiva="4"] [data-colonna="4"] { display: table-cell; }
/* I pulsanti hanno anche loro `data-colonna`, ma non sono celle di tabella. */
.abn-valori-blocco .abn-valori__scelta { display: inline-block; }
.abn-valori tr.sotto th { padding-left: 20px; font-weight: 400; color: #4d6154; }
.abn-valori tr.sotto td { font-weight: 500; color: #4d6154; }

/* Le domande: chiuse tranne la prima. Aperte tutte sarebbero un muro, chiuse tutte
   sembrerebbero vuote. */
.abn-domande { display: grid; gap: 8px; max-width: none; }
.abn-domande details {
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  background: #fff;
  overflow: hidden;
}
.abn-domande summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.abn-domande summary::-webkit-details-marker { display: none; }
.abn-domande summary::after {
  content: "";
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--wp--preset--color--verde, #105732);
  border-bottom: 2px solid var(--wp--preset--color--verde, #105732);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-domande details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.abn-domande summary:focus-visible { outline: 2px solid var(--wp--preset--color--verde, #105732); outline-offset: -2px; }
.abn-domande .risposta { padding: 0 14px 12px; }
.abn-domande .risposta p { margin: 0 0 8px; max-width: none; }
.abn-domande .risposta p:last-child { margin-bottom: 0; }

@media (max-width: 782px) {
  body.admin-bar .abn-scheda__barra { top: 68px; }
}
@media (max-width: 900px) {
  .abn-scheda__barra { top: 68px; }
  .abn-scheda__tab { padding: 10px 13px 12px; font-size: 0.9rem; }
  .abn-scheda__sezione { scroll-margin-top: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .abn-domande summary::after { transition: none; }
}

/* ---------- la pagina del prodotto ---------- */
/* La galleria resta ferma mentre si legge la colonna a destra: su una scheda lunga
   l'immagine e' il riferimento, e vederla sparire mentre si scorre disorienta. */
@media (min-width: 900px) {
  .single-product .wp-block-woocommerce-product-image-gallery {
    position: sticky;
    top: 100px;
  }
  body.admin-bar .single-product .wp-block-woocommerce-product-image-gallery { top: 132px; }
}
.woocommerce-product-gallery__image img {
  border-radius: var(--raggio);
  background: #fff;
}
.flex-control-thumbs img,
.woocommerce-product-gallery .flex-control-nav img { border-radius: 10px; }

/* Le miniature restano dove le mette WooCommerce: in fila sotto l'immagine grande, quattro
   per riga. Una versione incolonnata a sinistra è stata provata e scartata. */

/* Le tre promesse: tre caselle affiancate, icona sopra e due parole sotto. Erano tre
   righe di testo lungo e occupavano mezza colonna d'acquisto per dire cose che si
   riconoscono a colpo d'occhio. */
.abn-promesse-scheda {
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  background: #fff;
}
.abn-promesse-scheda li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--inchiostro);
}
/* Il filetto fra una casella e l'altra: separa senza aggiungere una riga di bordo. */
.abn-promesse-scheda li + li { border-left: 1px solid var(--wp--preset--color--linea); }
.abn-promesse-scheda svg { width: 24px; height: 24px; flex: none; color: var(--wp--preset--color--verde, #105732); }
.abn-promesse-scheda .woocommerce-Price-amount { font-weight: 800; white-space: nowrap; }

/* Il riquadro dei punti sopra il pulsante, e il sommario che non deve diventare un muro. */
.wp-block-woocommerce-product-summary { max-width: 62ch; }
.wp-block-woocommerce-product-summary__read_more {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--wp--preset--color--verde, #105732);
}

/* ---------- le tendine del menu ---------- */
/* Il menu del negozio storico ha due tendine, «Caratteristiche» e «Marchi»: chi compra
   qui da anni cerca la merce cosi'. Il pannello e' abbastanza largo da non spezzare
   «Alimenti ketogenici» su due righe — una voce a capo sembra due voci. */
.abn-testata .wp-block-navigation__submenu-container {
  min-width: 244px;
  padding: 6px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  background: #fff;
  box-shadow: 0 18px 40px rgba(10, 61, 34, 0.14), 0 2px 6px rgba(10, 61, 34, 0.06);
}
.abn-testata .wp-block-navigation__submenu-container .wp-block-navigation-item > a,
.abn-testata .wp-block-navigation__submenu-container .wp-block-navigation-item > button {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border-bottom: 0;
  white-space: nowrap;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Il filetto animato sotto le voci vale per la barra principale: dentro una tendina
   diventerebbe una riga che lampeggia sotto ogni voce che si sfiora. */
.abn-testata .wp-block-navigation__submenu-container a::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .abn-testata .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover,
  .abn-testata .wp-block-navigation__submenu-container .wp-block-navigation-item > button:hover {
    background: rgba(16, 87, 50, 0.07);
  }
}

/* ---------- «su ordinazione» ---------- */
/* Ambra, non rosso: il rosso dice «non puoi averlo» e fa chiudere la scheda. Questo
   prodotto si compra — ci vuole solo qualche giorno in piu', ed e' un'informazione, non
   un divieto. */
/* Sta sopra la foto come le altre pastiglie, ma in basso a sinistra: in alto ci sono
   gia' lo stage e lo sconto, e tre bollini nello stesso angolo si coprono a vicenda. */
.abn-ordinabile {
  /* Una fascia sul bordo basso della foto, non una pastiglia: la frase «Prodotto in
     arrivo, ordinalo subito!» e' lunga e deve poter andare a capo senza coprire l'offerta,
     che quando c'e' sale sopra la fascia. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  padding: 6px 10px;
  background: #fff5e6;
  color: #8a4b08;
  border-top: 1px solid rgba(217, 131, 36, 0.35);
  line-height: 1.2;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;
}
.abn-foto { position: relative; }
.abn-foto:has(.abn-ordinabile) .abn-offerta { bottom: calc(10px + 2.6em); }
.abn-disponibilita.ordinabile { color: #8a4b08; }
.abn-disponibilita.ordinabile .segnale { background: #d98324; box-shadow: 0 0 0 4px rgba(217, 131, 36, 0.16); }

/* Nel carrello la riga si segnala sotto il nome: in un elenco di otto articoli la
   scritta piccola di WooCommerce non la vede nessuno. */
.abn-riga-ordinabile {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #8a4b08;
}
.wc-block-components-product-badge,
.abn-stato-ordinabile { color: #8a4b08; font-weight: 700; }

/* L'avviso «su ordinazione» in cima al carrello e alla cassa. */
.abn-avviso-ordinazione {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: none;
  margin: 0 0 clamp(14px, 2vw, 20px);
  padding: 14px 18px;
  border: 1px solid rgba(217, 131, 36, 0.4);
  border-radius: var(--raggio);
  background: #fff5e6;
  color: #6b3a06;
  font-size: 0.94rem;
  line-height: 1.5;
}
.abn-avviso-ordinazione svg { width: 22px; height: 22px; flex: none; color: #d98324; margin-top: 1px; }

/* ---------- il pulsante dentro il carosello ---------- */
/* Quasi a filo della tessera e piu' basso: nel carosello il pulsante non deve gridare —
   e' un invito ad aprire la scheda, non un «compra adesso». Largo quanto la tessera fa da
   base alla colonna e la fila sembra allineata; piu' sottile pesa meno accanto al prezzo.
   
   La larghezza si mette sul CONTENITORE e non sul link: il contenitore di WordPress si
   stringe sul contenuto, e una percentuale dentro un contenitore che si stringe vale il
   testo del pulsante — cioe' non vale niente. */
.abn-fila .wc-block-grid__product-add-to-cart,
.abn-fila .wp-block-button {
  display: block;
  width: calc(100% - 20px);
  margin: auto 10px 12px;
}
.abn-fila .wc-block-grid__product-add-to-cart .wp-block-button__link,
.abn-fila .wp-block-button .wp-block-button__link,
.abn-fila ul.products li.product .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  font-size: 0.86rem;
  border-radius: 999px;
}

/* Il riquadro della foto è il riferimento delle pastiglie: stage in alto a sinistra,
   «su ordinazione» in basso a sinistra, l'offerta in basso a destra — tutte sull'immagine,
   nessuna sul pulsante. */
.abn-foto,
.wc-block-grid__product-image,
.wc-block-components-product-image { position: relative; }
.abn-foto { display: block; }

/* ---------- i nostri marchi ---------- */
/* Una fila che scorre, non una griglia: i marchi sono pochi e si guardano di passaggio,
   e su schermo stretto scorrere è più naturale che impilare sette riquadri. */
.abn-marchi {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-inline: 0;
}
.abn-marchi::-webkit-scrollbar { display: none; }

.abn-marchio-tessera {
  flex: 0 0 auto;
  width: calc((100% - 70px) / 6);
  min-width: 150px;
  scroll-snap-align: start;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 18px 14px 14px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  background: #fff;
  text-decoration: none;
  color: var(--wp--preset--color--inchiostro);
  transition: border-color 170ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 170ms cubic-bezier(0.23, 1, 0.32, 1), transform 170ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Il logo dentro un'altezza fissa: i marchi mandano file di forme diverse, e senza una
   riga d'appoggio comune la fila sembra montata storta. */
.abn-marchio-tessera .logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 54px;
}
.abn-marchio-tessera img {
  max-width: 100%;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* I loghi arrivano su fondo bianco e con saturazioni diverse: un filo di grigio li
     mette d'accordo, il colore torna quando ci passi sopra. */
  filter: grayscale(0.35);
  transition: filter 170ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-marchio-tessera .nome { font-size: 0.86rem; font-weight: 700; text-align: center; line-height: 1.25; }
.abn-marchio-tessera .quanti { font-size: 0.76rem; color: var(--wp--preset--color--tenue); }

@media (hover: hover) and (pointer: fine) {
  .abn-marchio-tessera:hover {
    border-color: var(--wp--preset--color--verde, #105732);
    box-shadow: 0 10px 24px rgba(10, 61, 34, 0.1);
    transform: translateY(-2px);
  }
  .abn-marchio-tessera:hover img { filter: none; }
}
.abn-marchio-tessera:focus-visible { outline: 2px solid var(--wp--preset--color--verde, #105732); outline-offset: 3px; }

@media (max-width: 1100px) { .abn-marchio-tessera { width: calc((100% - 42px) / 4); } }
@media (max-width: 780px)  { .abn-marchio-tessera { width: calc((100% - 14px) / 2); min-width: 140px; } }
@media (prefers-reduced-motion: reduce) {
  .abn-marchio-tessera, .abn-marchio-tessera img { transition: none; }
  .abn-marchio-tessera:hover { transform: none; }
}

/* La foto al centro della tessera.
   WooCommerce lascia il contenitore dell'immagine «a filo di contenuto» e allineato a
   sinistra: con fotografie di larghezze diverse la fila sembrava montata storta. Il
   contenitore resta stretto quanto la foto — serve così, perché è lui a dare l'angolo
   alle pastiglie dell'offerta — ma si centra nella tessera. */
.abn-fila .wc-block-grid__product-image,
.abn-fila .wc-block-grid__product .wc-block-grid__product-image {
  display: block;
  width: fit-content;
  margin-inline: auto;
}
.abn-fila .wc-block-grid__product-image img {
  display: block;
  margin-inline: auto;
}

/* ================= ritocchi per il telefono ================= */

/* Una pastiglia sola per tessera.
   Il catalogo a blocchi disegna la stessa tessera passando da due strade diverse, e le
   pastiglie finivano stampate due volte: una sulla foto e una sopra il pulsante. Vince
   quella sulla foto, che è il posto giusto. */
li:has(.abn-foto) > .abn-ordinabile,
li:has(.abn-foto) > .abn-offerta,
li:has(.abn-foto) > .abn-fase { display: none !important; }

@media (max-width: 782px) {
  /* --- lo slider: le frecce e i pallini sotto il contenuto, non sopra ---
     Con il pulsante e la navigazione alla stessa altezza il pollice colpisce la freccia
     invece del pulsante, ed è l'errore più fastidioso che ci sia su un telefono. */
  .abn-vetrina { height: auto; min-height: clamp(420px, 96vw, 560px); }
  .abn-lastra .contenuto { padding-bottom: 92px; }
  .abn-vetrina .punti { bottom: 18px; }
  .abn-vetrina__freccia { top: auto; bottom: 12px; width: 40px; height: 40px; }
  .abn-vetrina__freccia--prima { left: 12px; }
  .abn-vetrina__freccia--dopo { right: 12px; }

  /* --- la griglia dei prodotti ---
     Due colonne restano (una sola fa scorrere all'infinito), ma tutto dentro si
     rimpicciolisce: su 165 pixel di larghezza il corpo del desktop spezza le parole. */
  ul.products li.product,
  .wc-block-product-template > li,
  .wc-block-grid__product { padding-bottom: 10px; }

  ul.products li.product .woocommerce-loop-product__title,
  .wc-block-product-template .wp-block-post-title,
  .wc-block-grid__product-title {
    font-size: 0.88rem !important;
    line-height: 1.25;
    padding-inline: 10px;
  }
  ul.products li.product .price,
  .wc-block-product-template .wc-block-components-product-price,
  .wc-block-grid__product-price { font-size: 0.95rem !important; padding-inline: 10px; }

  /* I macronutrienti: una riga sola. Andando a capo «P 30%» si spezzava in tre righe
     con una lettera per riga, che è peggio di non mostrarli. */
  .abn-macro {
    flex-wrap: nowrap;
    gap: 8px;
    padding-inline: 10px;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Le pastiglie: più piccole, o coprono metà foto. */
  .abn-fase { font-size: 0.62rem; padding: 3px 7px; top: 6px; left: 6px; }
  .abn-ordinabile { font-size: 0.62rem; padding: 5px 6px; }
  .abn-foto:has(.abn-ordinabile) .abn-offerta { bottom: 40px; }
  .abn-offerta { right: 6px; bottom: 6px; }
  .abn-offerta__che { font-size: 0.56rem; padding: 3px 7px; }
  .abn-offerta__quanto { font-size: 0.74rem; padding: 3px 7px; }

  /* Il pulsante della tessera: pieno e comodo da colpire col pollice. */
  ul.products li.product .button,
  .wc-block-product-template .wp-block-button__link,
  .wc-block-grid__product-add-to-cart .wp-block-button__link {
    width: calc(100% - 20px);
    margin-inline: 10px;
    padding: 10px 8px;
    font-size: 0.82rem;
  }

  /* --- i riquadri --- */
  .abn-riquadri { grid-template-columns: 1fr !important; gap: 12px; }
  .abn-riquadro { min-height: 0; }
  .abn-riquadro .contenuto { padding: 20px 18px; }
  .abn-riquadro h3 { font-size: 1.35rem; line-height: 1.15; }
  .abn-riquadro p { font-size: 0.92rem; }
  /* Le immagini dentro i riquadri: sotto il testo e mai tagliate a metà. */
  .abn-riquadro picture,
  .abn-riquadro img { max-width: 60%; }
  .abn-riquadro--verde picture,
  .abn-riquadri__riga .abn-riquadro--verde img { max-width: none; }
}

/* --- il piede sul telefono ---
   Quattro colonne diventano quattro blocchi uno sotto l'altro: senza un filetto e un po'
   d'aria fra loro sembrano un elenco unico, e non si capisce dove finisce «Il negozio» e
   dove comincia «Servizio clienti». */
@media (max-width: 782px) {
  .abn-piede__colonne { gap: 0 !important; }
  .abn-piede__colonne > .wp-block-column {
    flex-basis: 100% !important;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .abn-piede__colonne > .wp-block-column:first-child { padding-top: 0; border-top: 0; }
  .abn-piede h3 { margin-bottom: 10px; }
  .abn-piede__intro { max-width: none; margin-bottom: 14px; }
  .abn-piede__contatti li { max-width: none; }
  /* Le voci di menu in due colonne: sette voci in fila verticale allungano il piede
     di uno schermo intero, e nessuno scorre fin laggiù. */
  .abn-piede .wp-block-navigation__container,
  .abn-piede__voci {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
  }
  .abn-piede__basso { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Il pulsante della tessera, ovunque: la larghezza va sul contenitore.
   Il wrapper di WordPress si stringe sul testo, e una percentuale dentro un contenitore
   che si stringe vale il testo del pulsante — cioè non allarga niente. */
ul.products li.product .wp-block-button,
.wc-block-product-template .wp-block-button,
.wc-block-grid__product-add-to-cart,
.wc-block-components-product-button {
  display: block;
  width: calc(100% - 20px);
  margin-inline: auto;
}
/* `!important` sulla larghezza: WooCommerce la fissa a «auto» con una regola più
   specifica della nostra, e senza forzarla il pulsante resta grande quanto la parola. */
ul.products li.product .wp-block-button__link,
.wc-block-product-template .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0;
}

/* La riga delle azioni in fondo alla tessera: «Visualizza» largo e, accanto, l'icona
   rotonda del confronto. Il pulsante del tema vale per tutta la riga: qui si corregge
   solo la larghezza, che dentro una riga non puo' piu' essere il 100%. */
.wc-block-product-template .abn-azioni {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 28px);
  margin: auto 14px 0;
}
.wc-block-product-template .abn-azioni .abn-azioni__vedi { flex: 1 1 auto; width: auto; margin: 0; min-width: 0; }
.wc-block-product-template .abn-azioni .wp-block-button__link { margin: 0; width: 100% !important; padding: 11px 10px; }
.wc-block-product-template .abn-azioni .abn-confronta--piccolo { margin: 0; }

/* I macronutrienti arrivano dal fornitore anche come frasi intere («27 % di cui zuccheri
   0,1% di cui polioli 26%»): sulla tessera si taglia con i puntini invece di sfondare il
   bordo. Il dato completo sta nella scheda, dove c'è spazio per leggerlo. */
.abn-macro span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}

/* ---------- il pannello della ricerca ---------- */
.abn-ricerca-apri {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--inchiostro);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-ricerca-apri svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .abn-ricerca-apri:hover { background: rgba(16, 87, 50, 0.08); }
}
.abn-ricerca-apri:focus-visible { outline: 2px solid var(--wp--preset--color--verde, #105732); outline-offset: 2px; }

/* Il cuore della lista desideri: stesso bottone tondo della ricerca, con il numero come
   quello del carrello. */
.abn-desideri-icona {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--wp--preset--color--inchiostro);
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-desideri-icona svg { width: 21px; height: 21px; }
.abn-desideri-icona__numero {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--wp--preset--color--verde);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .abn-desideri-icona:hover { background: rgba(16, 87, 50, 0.08); }
}
.abn-desideri-icona:focus-visible { outline: 2px solid var(--wp--preset--color--verde, #105732); outline-offset: 2px; }
/* Quattro icone con lo spazio di tre facevano andare a capo l'ultima voce del menu sotto i
   1440 pixel: le icone sono gia' bottoni tondi da 40, lo stacco lo fa il loro alone. */
.abn-testata .alignwide > .wp-block-group:last-child { gap: 6px; }

/* Il velo scuro e il pannello. Sta in fondo alla pagina, fuori dalla testata appiccicata:
   dentro un contesto di impilamento nessuno z-index lo porterebbe sopra al resto. */
.abn-ricerca {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10, 61, 34, 0.42);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-ricerca.dentro { opacity: 1; }

.abn-ricerca__pannello {
  position: absolute;
  inset: 0 0 auto auto;
  width: min(460px, 100%);
  max-height: 100dvh;
  overflow-y: auto;
  padding: 18px;
  background: var(--wp--preset--color--carta, #fff);
  box-shadow: -20px 0 50px rgba(10, 61, 34, 0.22);
  transform: translateX(24px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-ricerca.dentro .abn-ricerca__pannello { transform: none; opacity: 1; }

.abn-ricerca form { display: flex; align-items: center; gap: 10px; }
.abn-ricerca__riga {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  background: #fff;
}
.abn-ricerca__riga svg { width: 18px; height: 18px; flex: none; color: var(--wp--preset--color--verde, #105732); }
.abn-ricerca__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
}
.abn-ricerca__campo:focus { outline: none; }
.abn-ricerca__riga:focus-within { border-color: var(--wp--preset--color--verde, #105732); }
.abn-ricerca__chiudi {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--wp--preset--color--tenue);
  cursor: pointer;
}
.abn-ricerca__chiudi:hover { background: rgba(0, 0, 0, 0.05); color: var(--wp--preset--color--inchiostro); }

.abn-ricerca__stato { margin: 14px 2px 8px; font-size: 0.88rem; color: var(--wp--preset--color--tenue); }
.abn-ricerca__stato:empty { display: none; }
.abn-ricerca__esiti { display: grid; gap: 4px; }

.abn-ricerca__voce {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--wp--preset--color--inchiostro);
}
.abn-ricerca__voce img,
.abn-ricerca__voce .senza-foto {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: var(--wp--preset--color--crema, #f7f4ed);
}
.abn-ricerca__voce .testo { display: grid; gap: 2px; min-width: 0; }
.abn-ricerca__voce .nome {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  /* Due righe e poi i puntini: i nomi di questo catalogo sono lunghi, e una tessera che
     cresce fino a otto righe fa sparire i risultati sotto. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.abn-ricerca__voce .prezzo { font-size: 0.85rem; color: var(--wp--preset--color--verde-cupo, #0a3d22); font-weight: 700; }
.abn-ricerca__voce .prezzo del { opacity: 0.5; font-weight: 500; margin-right: 5px; }
.abn-ricerca__voce:hover,
.abn-ricerca__voce:focus-visible { background: rgba(16, 87, 50, 0.07); outline: none; }

.abn-ricerca__tutti {
  display: block;
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--wp--preset--color--verde, #105732);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
}
.abn-ricerca__tutti:hover,
.abn-ricerca__tutti:focus-visible { background: var(--wp--preset--color--verde-cupo, #0a3d22); outline: none; }

/* Con il pannello aperto la pagina sotto non scorre: altrimenti il dito che scorre i
   risultati trascina la pagina e il pannello resta fermo su un fondo che scappa. */
body.abn-ricerca-aperta { overflow: hidden; }

@media (max-width: 600px) {
  .abn-ricerca__pannello { width: 100%; height: 100dvh; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .abn-ricerca,
  .abn-ricerca__pannello { transition: opacity 150ms ease; }
  .abn-ricerca__pannello { transform: none; }
}

/* Il menu del telefono sopra al contenuto.
   Due cose lo tenevano prigioniero nella testata:
   1. lo z-index della testata appiccicata, che la rende un contesto di impilamento;
   2. il `backdrop-filter` del vetro smerigliato — un filtro sullo sfondo rende
      l'antenato il riferimento di TUTTI i discendenti `position: fixed`, e il pannello
      del menu è uno di quelli. Per questo restava ritagliato dentro la barra.
   Col menu aperto la testata si alza e depone il filtro: il vetro smerigliato serve
   quando si scorre, non quando il menu copre tutto lo schermo. */
.abn-testata:has(.wp-block-navigation__responsive-container.has-modal-open) {
  z-index: 99999;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.wp-block-navigation__responsive-container.has-modal-open { z-index: 99999; }

/* ---------- il menu a tutto schermo sul telefono (v2, 2026-09-13) ----------
   Testa col marchio, voci grandi da pollice, sottomenu a fisarmonica (assets/menu.js),
   in fondo account e WhatsApp. Testa e piede li aggiunge il filtro su core/navigation e
   sulla barra del computer non si vedono. */
.abn-menu__testa,
.abn-menu__piede { display: none; }

.wp-block-navigation__responsive-container.has-modal-open {
  background: var(--wp--preset--color--carta);
  padding: 0 !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close-container,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-dialog {
  position: static;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100%;
  min-height: 100dvh;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
  text-align: left;
}

/* la testa: marchio a sinistra, chiusura a destra, appiccicata in alto */
.has-modal-open .abn-menu__testa {
  order: -1;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 12px 76px 12px 22px;
  background: var(--wp--preset--color--carta);
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
.has-modal-open .abn-menu__marchio { display: inline-flex; }
.has-modal-open .abn-menu__logo { width: auto; height: 40px; }
.has-modal-open .abn-menu__marchio::after { content: none !important; }
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wp--preset--color--fondo);
  color: var(--wp--preset--color--inchiostro);
  transition: transform var(--durata-rapida) var(--ease-out);
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close:active { transform: scale(0.94); }
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; }

/* l'elenco */
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 6px 0 0 !important;
  padding: 0 22px !important;
}
.wp-block-navigation__responsive-container.has-modal-open ul,
.wp-block-navigation__responsive-container.has-modal-open li {
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item {
  display: block !important;
  width: 100%;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item {
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content {
  box-sizing: border-box;
  position: relative;
  display: flex !important;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  padding: 14px 40px 14px 0 !important;
  border: 0 !important;
  color: var(--wp--preset--color--inchiostro) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content::after { content: none !important; }
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-icon { display: none !important; }

/* la freccia delle voci con figli, che si gira quando il ramo e' aperto */
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--durata) var(--ease-out);
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-submenu.abn-aperta > .wp-block-navigation-item__content { color: var(--wp--preset--color--verde) !important; }
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-submenu.abn-aperta > .wp-block-navigation-item__content::before { transform: rotate(180deg); }

/* i rami: chiusi finche' non si toccano */
/* `.abn-menu` in testa: il blocco dichiara lo sfondo trasparente con !important e la
   stessa specificita', e arriva dopo. */
.abn-menu .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container {
  position: static !important;
  display: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 0 16px !important;
  padding: 6px 16px !important;
  border: 0 !important;
  border-radius: 14px;
  background: var(--wp--preset--color--fondo) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.abn-menu .wp-block-navigation__responsive-container.has-modal-open .abn-aperta > .wp-block-navigation__submenu-container {
  display: block !important;
  animation: abn-ramo 240ms var(--ease-out) both;
}
@keyframes abn-ramo {
  from { opacity: 0; transform: translateY(-6px); }
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item {
  border-top: 1px solid var(--wp--preset--color--linea);
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 12px 36px 12px 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
/* terzo livello: dentro il ramo, un rientro col filetto verde */
.abn-menu .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  margin: 0 0 10px !important;
  padding: 0 0 0 14px !important;
  border-left: 2px solid var(--wp--preset--color--verde-tenue) !important;
  border-radius: 0;
  background: transparent !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item { border-top: 0; }
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 0 !important;
  color: var(--wp--preset--color--tenue) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

/* il piede: account e una persona a cui chiedere */
/* L'elenco riceve un `order` dagli stili del blocco: il piede va messo in fondo per
   esplicito, altrimenti sale sopra le voci. */
.has-modal-open .abn-menu__piede {
  order: 99;
  display: block;
  margin-top: auto;
  padding: 28px 22px 0;
}
.has-modal-open .abn-menu__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wp-block-navigation__responsive-container.has-modal-open .abn-menu__azione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--linea);
  color: var(--wp--preset--color--inchiostro);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.has-modal-open .abn-menu__azione svg { width: 20px; height: 20px; flex: none; display: block; }
.has-modal-open .abn-menu__azione span { display: block; }
.wp-block-navigation__responsive-container.has-modal-open .abn-menu__azione--whatsapp {
  background: var(--wp--preset--color--verde);
  box-shadow: none;
  color: #fff;
}
.has-modal-open .abn-menu__azione:only-child { grid-column: 1 / -1; }
.has-modal-open .abn-menu__azione::after { content: none !important; }
.has-modal-open .abn-menu__telefono {
  margin: 14px 0 0;
  color: var(--wp--preset--color--tenue);
  font-size: 0.92rem;
  text-align: center;
}
.has-modal-open .abn-menu__telefono a { color: var(--wp--preset--color--verde); font-weight: 700; }

/* L'icona a tre linee in fondo a destra, dopo ricerca, account e carrello: e' li' che il
   pollice la cerca. Solo quando il menu e' davvero a scomparsa. */
@media (max-width: 599px) {
  .abn-testata .wp-block-navigation.abn-menu { order: 3; margin-left: 4px; }
  .abn-testata .alignwide > .wp-block-group:last-child { margin-left: auto; }
  .wp-block-navigation__responsive-container-open {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    color: var(--wp--preset--color--inchiostro);
  }
  .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container.has-modal-open .abn-aperta > .wp-block-navigation__submenu-container { animation: none; }
}

/* La pastiglia dell'offerta sulla galleria della scheda: più grande che nella griglia,
   perché qui c'è spazio e perché è il punto in cui si decide. */
.abn-foto--scheda { position: relative; }
.abn-foto--scheda .abn-offerta { right: 14px; bottom: 14px; }
/* La pastiglia sta dentro la prima foto: è quella la scatola che la tiene, non la galleria. */
.single-product .woocommerce-product-gallery__image { position: relative; }
.single-product .woocommerce-product-gallery__image > .abn-offerta { right: 14px; bottom: 14px; }
.abn-foto--scheda .abn-offerta__che { font-size: 0.74rem; padding: 6px 12px; }
.abn-foto--scheda .abn-offerta__quanto { font-size: 1rem; padding: 6px 12px; }

/* Il pannello della ricerca sul telefono: largo quanto lo schermo e non un pixel di più.
   Con `width:100%` più il padding sfondava a destra, e i risultati uscivano dal bordo. */
@media (max-width: 600px) {
  .abn-ricerca__pannello {
    box-sizing: border-box;
    inset: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .abn-ricerca__voce { padding: 8px 6px; }
  .abn-ricerca__voce .nome { font-size: 0.88rem; }
}

/* ---------- il marchio sulla scheda prodotto ----------
   Fra il nome e il prezzo: il logo dice la marca senza farla leggere. Altezza fissa e
   `object-fit: contain`, così loghi larghi e loghi quadrati restano sulla stessa riga
   ottica; niente cornice, il logo è già la sua forma. */
/* Sopra al nome, piccolo: dice «di chi è» prima ancora che si legga il nome, come il
   marchio stampato in cima alla confezione. */
.abn-marchio { margin: 0 0 8px; line-height: 0; }
.abn-marchio a { display: inline-block; line-height: 0; }
.abn-marchio__logo {
  /* Un terzo della colonna d'acquisto: la larghezza comanda, l'altezza la decide la
     forma del logo. */
  width: 33.333%;
  max-width: 33.333%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  transition: opacity 160ms ease;
}
.abn-marchio a:hover .abn-marchio__logo { opacity: 0.75; }
/* Sul telefono la colonna è tutta la pagina: un logo alto dieci pixel in mezzo a quella
   larghezza sparisce. Lì si misura in proporzione — un terzo della larghezza — e l'altezza
   la decide la forma del logo. */
@media (max-width: 781px) {
  /* Sul telefono il logo si misura sullo SCHERMO, non sull'altezza: un terzo della larghezza,
     chiesto così. L'altezza la decide la forma del logo — i marchi lunghi restano bassi,
     quelli quasi quadrati (CiaoCarb con la sua pastiglia) vengono più alti. */
  .abn-marchio__logo {
    width: 33vw;
    max-width: 33vw;
    height: auto;
    max-height: none;
  }
}
.abn-marchio__nome {
  display: inline-block; line-height: 1.2;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--tenue);
  text-decoration: none;
}


/* ---------- nome e prezzo sulla scheda prodotto ----------
   Sul nome del prodotto il cliente ci arriva gia' sapendo cos'e' (ci ha cliccato sopra):
   quello che cerca sulla scheda e' quanto costa. Per questo il nome scende sotto la misura
   dei titoli di pagina e il prezzo sale sopra — l'occhio va al numero, non all'etichetta.
   Il nome resta comunque l'h1 della pagina: conta per Google la marcatura, non i pixel. */
.single-product .wp-block-post-title {
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.65rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  /* Verde e non nero: è il colore del negozio, e sulla scheda il nome del prodotto è la
     prima cosa che si legge dopo il logo del marchio. */
  color: var(--wp--preset--color--verde-cupo, #0a3d22);
}

/* ---------- il prezzo sulla scheda prodotto ---------- */
.single-product .abn-prezzo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 6px 0 10px;
}
/* Il prezzo che si paga: grande e in rosso quando è scontato, perché quello è il numero
   che il cliente porta via. Quello di prima resta, più piccolo e barrato, a fare da metro.

   ATTENZIONE alla misura: il blocco esce come DUE div annidati, e quello INTERNO porta la
   classe di preset `has-medio-font-size`, che WordPress scrive con `!important`. Ingrandire
   solo il div esterno non si vedeva: il figlio tornava a 1,2rem. Per questo la misura si
   scrive su entrambi, e l'interno la eredita a forza.
   Stessa ragione per il flex: `del` e `ins` sono figli del div INTERNO, quindi è lì che va
   il contenitore, altrimenti l'ordine (prezzo scontato per primo) non si applica. */
.single-product .wp-block-woocommerce-product-price,
.single-product p.price {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.45rem) !important;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price,
.single-product p.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: inherit !important;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.single-product .wp-block-woocommerce-product-price ins,
.single-product p.price ins {
  order: 1;
  text-decoration: none;
  color: var(--wp--preset--color--saldo);
}
.single-product .wp-block-woocommerce-product-price del,
.single-product p.price del {
  order: 2;
  font-size: 0.52em;
  font-weight: 600;
  color: var(--wp--preset--color--tenue);
  opacity: 1;
}
/* Senza sconto il prezzo non è rosso: il rosso di questo sito vuol dire «costa meno di
   prima», e usarlo sempre gli toglierebbe il significato. */
.single-product .wp-block-woocommerce-product-price:not(:has(ins)),
.single-product p.price:not(:has(ins)) { color: var(--wp--preset--color--verde-cupo, #0a3d22); }

.abn-prezzo__risparmio {
  order: 3;
  align-self: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(179, 38, 30, 0.09);
  color: var(--wp--preset--color--saldo);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}
.abn-prezzo__risparmio .woocommerce-Price-amount { font-weight: 800; }

/* ---------- le varianti a schede ---------- */
/* La tendina resta nel modulo — è lei che comanda prezzo, disponibilità e pulsante — ma
   sparisce dalla vista. Non `display:none`: un campo tolto dal flusso non è più
   raggiungibile da tastiera, e chi non usa il mouse resterebbe senza selettore. */
/* `!important` sulle misure: il foglio dei blocchi di WooCommerce impone una larghezza ai
   select del modulo, e la tendina nascosta restava larga mille pixel fuori dallo schermo —
   invisibile, ma la pagina si trascinava di lato su ogni prodotto con varianti. */
.abn-varianti-pronte select[name^="attribute_"] {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* «Svuota» sparisce: con le schede sempre visibili si cambia scelta cliccando un'altra
   scheda, e un link che toglie la selezione senza sceglierne un'altra riporta il prodotto
   a «non comprabile» — un passo indietro travestito da comando.
   `!important` perche' WooCommerce lo rimette in piedi con uno stile in linea. */
.abn-varianti-pronte .reset_variations { display: none !important; }

.abn-varianti {
  display: grid;
  gap: 8px;
  margin: 6px 0 4px;
}
.abn-variante {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: var(--raggio);
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-variante input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Il pallino: è l'unica cosa che dice quale hai preso, quindi si vede da lontano. */
.abn-variante .segno {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--linea);
  display: grid;
  place-items: center;
}
.abn-variante .segno::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wp--preset--color--verde, #105732);
  transform: scale(0);
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.abn-variante input:checked ~ .segno { border-color: var(--wp--preset--color--verde, #105732); }
.abn-variante input:checked ~ .segno::after { transform: scale(1); }
.abn-variante:has(input:checked) {
  border-color: var(--wp--preset--color--verde, #105732);
  box-shadow: 0 0 0 1px var(--wp--preset--color--verde, #105732);
}
.abn-variante input:focus-visible ~ .segno { outline: 2px solid var(--wp--preset--color--verde, #105732); outline-offset: 2px; }

.abn-variante img {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: contain;
  border-radius: 8px;
  background: var(--wp--preset--color--crema, #f7f4ed);
}
.abn-variante .testo { display: grid; gap: 2px; min-width: 0; }
.abn-variante .nome { font-weight: 700; font-size: 0.96rem; line-height: 1.25; }
.abn-variante .prezzo { font-size: 0.9rem; font-weight: 700; color: var(--wp--preset--color--verde-cupo, #0a3d22); }
.abn-variante .prezzo del { font-weight: 500; opacity: 0.55; margin-right: 5px; }
.abn-variante .prezzo ins { text-decoration: none; color: var(--wp--preset--color--saldo); }
.abn-variante .stato { font-size: 0.78rem; font-weight: 700; color: #8a4b08; }

/* Esaurita non vuol dire non comprabile: da noi si ordina. Si segnala, non si spegne. */
.abn-variante.esaurita img { opacity: 0.65; }

@media (hover: hover) and (pointer: fine) {
  .abn-variante:hover { border-color: var(--wp--preset--color--verde, #105732); }
}
@media (prefers-reduced-motion: reduce) {
  .abn-variante, .abn-variante .segno::after { transition: none; }
}

/* La tabella delle varianti diventa una colonna: l'etichetta sopra, le schede sotto e a
   tutta larghezza. Con l'etichetta in una cella a sinistra le schede restavano strette
   sulla destra, e su telefono si stringevano ancora di più. */
.abn-varianti-pronte table.variations,
.abn-varianti-pronte table.variations tbody,
.abn-varianti-pronte table.variations tr,
.abn-varianti-pronte table.variations th,
.abn-varianti-pronte table.variations td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}
.abn-varianti-pronte table.variations { margin: 14px 0 4px; }
.abn-varianti-pronte table.variations th.label {
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wp--preset--color--tenue);
}
.abn-varianti-pronte table.variations tr + tr { margin-top: 14px; }

/* Su schermo largo due schede per riga: sei gusti in colonna allungano la pagina e
   spingono il pulsante d'acquisto sotto la piega. */
@media (min-width: 700px) {
  .abn-varianti { grid-template-columns: 1fr 1fr; }
}

/* ---------- colonna d'acquisto compatta (2026-09-28) ----------
   Chiesto dall'utente: meno vuoto fra prezzo, gusti e pulsante. Le schede dei gusti sono
   pastiglie basse, «Gusto» sta attaccato alle schede, quantità e «Ordinalo» subito sotto.
   Le spaziature che allargavano tutto erano di WooCommerce (padding 1em su th/td, margine
   sulle label, margini del modulo), non nostre. */
.single-product .wp-block-add-to-cart-form { margin-top: 12px; }
.single-product .wp-block-add-to-cart-form form.cart { margin-top: 0; margin-bottom: 0; }
.abn-varianti-pronte table.variations { margin: 0 0 12px; }
.abn-varianti-pronte table.variations th.label { padding: 0; margin-bottom: 6px; }
.abn-varianti-pronte table.variations th.label label { margin: 0; }
.abn-varianti-pronte table.variations td.value { padding: 0; }
.abn-varianti-pronte table.variations tr + tr { margin-top: 10px; }

.abn-varianti { gap: 6px; margin: 0; grid-template-columns: 1fr 1fr; }
.abn-variante {
  gap: 8px;
  margin: 0;
  padding: 5px 10px 5px 8px;
  min-height: 46px;
}
.abn-variante .segno { width: 16px; height: 16px; }
.abn-variante .segno::after { width: 8px; height: 8px; }
.abn-variante img { width: 34px; height: 34px; border-radius: 6px; }
.abn-variante .nome { font-size: 0.88rem; line-height: 1.2; }
.abn-variante .prezzo { font-size: 0.82rem; }
.abn-variante .stato { font-size: 0.72rem; }
@media (min-width: 1100px) {
  .abn-varianti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La descrizione breve sotto quantità e «Ordinalo»: due righe che dicono cos'è, lette
   appena scelto il gusto. Non è più una linguetta in basso. */
.abn-scheda__breve {
  margin-top: 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--wp--preset--color--testo, inherit);
}
.abn-scheda__breve > :first-child { margin-top: 0; }
.abn-scheda__breve > :last-child { margin-bottom: 0; }
.abn-scheda__breve p { margin: 0 0 0.6em; }

/* ==========================================================================
   LA GIORNATA SULL'OROLOGIO (2026-09-13)
   --------------------------------------------------------------------------
   Il kit giornaliero raccontato ora per ora: le lancette arrivano a ogni pasto,
   il piatto intorno al quadrante si accende, il conto dei carboidrati si riempie
   fino alla soglia. Pannello verde cupo (negozio), conto su ambra chiara: l'ambra
   continua a dire una cosa sola — carboidrati.
   Si muovono solo transform e opacity. Senza JavaScript e con meno movimento
   l'orologio e' fermo sulla fine della giornata, gia' completo.
   ========================================================================== */
.abn-giornata {
  --g-fondo: var(--wp--preset--color--verde-cupo);
  --g-chiaro: rgba(255, 255, 255, 0.78);
  color: #fff;
}
/* Il verde va da bordo a bordo della pagina: lo porta la fascia, il contenuto resta
   nella larghezza del sito. overflow-x: clip e non hidden, per non creare un
   contenitore di scorrimento che romperebbe gli sticky. */
.abn-fascia--giornata {
  background: var(--wp--preset--color--verde-cupo);
  padding-block: clamp(40px, 4.5vw, 64px);
  overflow-x: clip;
}
/* Attaccata alla sezione che segue, senza striscia di fondo pagina in mezzo. I margini
   verticali collassano: vanno azzerati TUTTI E DUE, il suo sotto e quello sopra della
   successiva (la cui regola arriva stampata in pagina, da qui la specificita' doppia). */
.abn-fascia.abn-fascia--giornata { margin-bottom: 0; }
.abn-fascia.abn-fascia--giornata + .abn-fascia { margin-top: 0; }

/* Stessa cosa per le colazioni: il fondo colorato della sezione animata arriva a filo con la
   fascia seguente, senza la striscia chiara di pagina in mezzo. */
.abn-fascia.abn-fascia--colazioni { margin-bottom: 0; }
.abn-fascia.abn-fascia--colazioni + .abn-fascia { margin-top: 0; }

/* E il magazine attaccato al prepiede verde: il buco era lo spazio fra blocchi che il tema a
   blocchi mette fra <main> e <footer>, non un margine della fascia. */
main:has(> .abn-fascia--magazine) + footer.wp-block-template-part { margin-top: 0; }
.abn-giornata__pannello {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "testa" "orologio" "pasti" "acquisto";
  gap: clamp(18px, 2.4vw, 28px) clamp(28px, 4.5vw, 64px);
  isolation: isolate;
}
/* Su schermo largo: orologio accanto a titolo e pasti, sotto il kit a tutta larghezza. */
@media (min-width: 1000px) {
  .abn-giornata__pannello {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
      "orologio testa"
      "orologio pasti"
      "acquisto acquisto";
    grid-template-rows: auto 1fr auto;
  }
}

/* ---------- la testa ---------- */
.abn-giornata__testa { grid-area: testa; }
.abn-giornata__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
/* Sul telefono il nome del kit va a capo: la pastiglia diventa un riquadro morbido
   invece di una capsula spezzata. */
@media (max-width: 600px) {
  .abn-giornata__marca { border-radius: 18px; padding-block: 6px; }
}
.abn-giornata__marca span {
  flex: none;
  white-space: nowrap;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--wp--preset--color--ambra-tenue);
  color: var(--wp--preset--color--ambra);
  font-weight: 800;
}
.abn-giornata h2 {
  margin: 0.45em 0 0.25em;
  color: #fff;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  text-wrap: balance;
}
.abn-giornata__sotto {
  margin: 0;
  max-width: 56ch;
  color: var(--g-chiaro);
  font-size: 1rem;
}

/* ---------- l'orologio ---------- */
.abn-giornata__orologio {
  grid-area: orologio;
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, 450px);
  aspect-ratio: 1;
  max-width: 100%;
}
/* Cerchi concentrici appena accennati dietro il quadrante: il pannello resta un
   colore solo, ma l'orologio ha un posto dove stare. */
.abn-giornata__orologio::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  pointer-events: none;
}
.abn-giornata__quadrante {
  position: absolute;
  inset: 16%;
  width: 68%;
  height: 68%;
  overflow: visible;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}
.abn-giornata__quadrante .cassa { fill: var(--wp--preset--color--fondo); }
.abn-giornata__quadrante .binario { fill: none; stroke: rgba(46, 49, 42, 0.08); stroke-width: 3.6; }
.abn-giornata__quadrante .arco { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.abn-giornata__quadrante .arco--mattina { stroke: var(--wp--preset--color--verde-vivo); }
.abn-giornata__quadrante .arco--sera { stroke: var(--wp--preset--color--verde); }
.abn-giornata__quadrante .pallino {
  fill: #fff;
  stroke: var(--wp--preset--color--ambra);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--durata-ampia) var(--ease-out);
}
.abn-giornata__quadrante .pallino.is-fatto { fill: var(--wp--preset--color--ambra); transform: scale(1.25); }
.abn-giornata__quadrante .tacca { stroke: rgba(46, 49, 42, 0.38); stroke-width: 0.7; stroke-linecap: round; }
.abn-giornata__quadrante .tacca--ora { stroke: var(--wp--preset--color--inchiostro); stroke-width: 2; }
.abn-giornata__quadrante text { font-family: inherit; text-anchor: middle; dominant-baseline: central; }
.abn-giornata__quadrante .numero { fill: var(--wp--preset--color--inchiostro); font-size: 12.5px; font-weight: 800; }
.abn-giornata__quadrante .numero--piccolo { fill: var(--wp--preset--color--tenue); font-size: 6.5px; font-weight: 700; }
.abn-giornata__quadrante .fascia { fill: var(--wp--preset--color--tenue); font-size: 7.5px; font-weight: 700; }
.abn-giornata__quadrante .display { fill: var(--g-fondo); }
.abn-giornata__quadrante .ora {
  fill: #fff;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  dominant-baseline: auto;
}
.abn-giornata__quadrante .lancetta {
  transform-box: view-box;
  transform-origin: 100px 100px;
}
.abn-giornata__quadrante .lancetta path { fill: none; stroke-linecap: round; }
.abn-giornata__quadrante .lancetta--ore path { stroke: var(--wp--preset--color--inchiostro); stroke-width: 5.4; }
.abn-giornata__quadrante .lancetta--minuti path { stroke: var(--wp--preset--color--verde); stroke-width: 2.6; }
.abn-giornata__quadrante .lancetta--ombra { translate: 1.4px 2.4px; }
.abn-giornata__quadrante .lancetta--ombra path { stroke: rgba(46, 49, 42, 0.16); }
.abn-giornata__quadrante .perno { fill: var(--g-fondo); }
.abn-giornata__quadrante .perno-dentro { fill: var(--wp--preset--color--fondo); }

/* L'onda che parte dal quadrante quando le lancette arrivano a un pasto. */
.abn-giornata__onda {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--ambra-tenue);
  opacity: 0;
  pointer-events: none;
}
.abn-giornata__onda.is-via { animation: abn-giornata-onda 760ms var(--ease-out); }
@keyframes abn-giornata-onda {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.3); }
}

/* I piatti intorno al quadrante, ognuno all'ora del suo pasto. */
.abn-giornata__piatti { position: absolute; inset: 0; }
.abn-giornata__piatto {
  --s: 0.42;
  position: absolute;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px var(--g-fondo), 0 12px 24px -10px rgba(0, 0, 0, 0.5);
  opacity: 0.55;
  transform: translate(-50%, -50%) scale(var(--s));
  transition: transform var(--durata-ampia) var(--ease-out), opacity var(--durata-ampia) var(--ease-out);
}
.abn-giornata__piatto img,
.abn-giornata__piatto-vuoto {
  /* Fuori dal flusso: dentro, l'altezza propria della foto vince sull'aspect-ratio
     e il piatto diventa un ovale. */
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 9%;
  border-radius: 50%;
  object-fit: contain;
}
.abn-giornata__piatto::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--ambra-tenue);
  opacity: 0;
  transition: opacity var(--durata-ampia) var(--ease-out);
}
.abn-giornata__piatto.is-fatto { opacity: 1; }
.abn-giornata__piatto.is-attivo { --s: 1; opacity: 1; z-index: 2; }
.abn-giornata__piatto.is-attivo::after { opacity: 1; }
.abn-giornata__piatto-ora {
  position: absolute;
  opacity: 0;
  transition: opacity var(--durata) ease;
  left: 50%;
  bottom: -9%;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--g-fondo);
  color: #fff;
  font-size: clamp(0.62rem, 1.4vw, 0.75rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
}
.abn-giornata__piatto.is-attivo .abn-giornata__piatto-ora {
  opacity: 1;
  background: var(--wp--preset--color--ambra-tenue);
  color: var(--wp--preset--color--ambra);
}
/* L'entrata: la mette solo lo script dell'orologio, cosi' senza script i piatti
   restano dove sono invece di sparire. */
.abn-giornata--viva:not(.is-vista) .abn-giornata__piatto {
  --s: 0.2;
  opacity: 0;
}
.abn-giornata--viva .abn-giornata__piatto { transition-delay: var(--ritardo, 0ms); }
.abn-giornata--viva.is-vista .abn-giornata__piatto { transition-delay: 0ms; }

.abn-giornata__play {
  position: absolute;
  top: 1%;
  right: 1%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--durata) ease, transform var(--durata-rapida) var(--ease-out);
}
.abn-giornata__play[hidden] { display: none; }
.abn-giornata__play:active { transform: scale(0.94); }
.abn-giornata__play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.abn-giornata__play .icona-play { fill: currentColor; stroke-width: 1.5; }
.abn-giornata__play .icona-play,
.abn-giornata.is-ferma .abn-giornata__play .icona-pausa { display: none; }
.abn-giornata.is-ferma .abn-giornata__play .icona-play { display: block; }
.abn-giornata__play:focus-visible,
.abn-giornata__pasto button:focus-visible {
  outline: 2px solid var(--wp--preset--color--ambra-tenue);
  outline-offset: 2px;
}

/* ---------- i pasti ---------- */
.abn-giornata__pasti {
  grid-area: pasti;
  display: grid;
  align-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.abn-giornata__pasto button {
  position: relative;
  display: grid;
  grid-template-columns: 3.1rem 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 6px 14px 6px 16px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--durata) ease;
}
.abn-giornata__pasto button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: var(--wp--preset--color--verde-vivo);
  transform: scaleY(0);
  transition: transform var(--durata-ampia) var(--ease-out);
}
.abn-giornata__pasto button > span { opacity: 0.5; transition: opacity var(--durata-ampia) var(--ease-out); }
.abn-giornata__pasto.is-fatto button > span { opacity: 1; }
.abn-giornata__pasto.is-attivo button { background: rgba(255, 255, 255, 0.1); }
.abn-giornata__pasto.is-attivo button::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) {
  .abn-giornata__pasto:not(.is-attivo) button:hover { background: rgba(255, 255, 255, 0.05); }
  .abn-giornata__play:hover { background: rgba(255, 255, 255, 0.16); }
}
.abn-giornata__pasto .ora { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.abn-giornata__pasto .foto {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.abn-giornata__pasto .foto img { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.abn-giornata__pasto .nome { display: grid; line-height: 1.25; }
.abn-giornata__pasto .nome strong { font-size: 1rem; font-weight: 700; }
.abn-giornata__pasto .nome span { color: var(--g-chiaro); font-size: 0.9rem; }
.abn-giornata__pasto .carbo {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--wp--preset--color--ambra-tenue);
  color: var(--wp--preset--color--ambra);
  font-size: 0.86rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- il kit ---------- */
.abn-giornata__acquisto {
  grid-area: acquisto;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 14px 20px;
  padding: 16px;
  border-radius: 20px;
  background: var(--wp--preset--color--carta);
  color: var(--wp--preset--color--inchiostro);
}
@media (min-width: 820px) {
  .abn-giornata__acquisto { grid-template-columns: 104px minmax(0, 1fr) auto; padding: 16px 24px 16px 16px; }
}
.abn-giornata__foto {
  display: block;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea);
}
.abn-giornata__foto img { width: 100%; height: 100%; object-fit: contain; }
.abn-giornata__prodotto h3 { margin: 0 0 8px; font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem); line-height: 1.15; }
.abn-giornata__prodotto h3 a { color: inherit; text-decoration: none; }
.abn-giornata__prodotto h3 a:hover { text-decoration: underline; }
.abn-giornata__prodotto ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--wp--preset--color--tenue);
  font-size: 0.92rem;
}
.abn-giornata__prodotto li { display: inline-flex; align-items: center; gap: 6px; }
.abn-giornata__prodotto li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--wp--preset--color--verde);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.abn-giornata__cassa { grid-column: 1 / -1; }
@media (min-width: 820px) {
  .abn-giornata__cassa { grid-column: auto; text-align: right; }
  .abn-giornata__azioni { justify-content: flex-end; }
}
.abn-giornata__prezzo { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.abn-giornata__prezzo del { margin-right: 6px; color: var(--wp--preset--color--tenue); font-size: 1rem; font-weight: 600; }
.abn-giornata__prezzo ins { text-decoration: none; }
.abn-giornata__bonus { margin: 4px 0 0; color: var(--wp--preset--color--verde); font-size: 0.9rem; font-weight: 700; }
.abn-giornata__azioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.abn-giornata__compra,
.abn-giornata__scheda {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--durata) ease, transform var(--durata-rapida) var(--ease-out);
}
.abn-giornata__compra { background: var(--wp--preset--color--verde); color: #fff; }
.abn-giornata__scheda { box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--inchiostro); color: var(--wp--preset--color--inchiostro); }
.abn-giornata__compra:active,
.abn-giornata__scheda:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .abn-giornata__compra:hover { background: var(--wp--preset--color--verde-cupo); text-decoration: none; }
  .abn-giornata__scheda:hover { background: var(--wp--preset--color--fondo); text-decoration: none; }
}

@media (max-width: 600px) {
  .abn-giornata__piatto { width: 21%; box-shadow: 0 0 0 3px var(--g-fondo), 0 8px 18px -8px rgba(0, 0, 0, 0.5); }
  .abn-giornata__quadrante,
  .abn-giornata__onda { inset: 17.5%; }
  .abn-giornata__quadrante { width: 65%; height: 65%; }
  .abn-giornata__pasto button { grid-template-columns: 2.7rem 40px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px 8px 12px; }
  .abn-giornata__pasto .foto { width: 40px; height: 40px; }
  .abn-giornata__pasto .ora { font-size: 0.95rem; }
  .abn-giornata__pasto .nome strong { font-size: 0.95rem; }
  .abn-giornata__pasto .nome span { font-size: 0.84rem; }
  .abn-giornata__pasto .carbo { padding: 3px 9px; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .abn-giornata *,
  .abn-giornata *::before,
  .abn-giornata *::after { transition: none !important; animation: none !important; }
}

/* ---------- carrello a scomparsa: pulsanti in fondo (2026-09-13) ----------
   Erano alti 78 px ciascuno: due pulsanti cosi' in fondo al pannello si mangiavano un
   quarto dello schermo del telefono e spingevano su i prodotti. Quanto un pulsante del sito. */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions {
  gap: 8px;
  margin-top: 12px;
}
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-components-button {
  box-sizing: border-box;   /* senza, il minimo di 46 px si sommava al padding */
  min-height: 46px;
  padding: 10px 20px;
  font-size: 0.95rem;
  line-height: 1.2;
}
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-components-button .wc-block-components-button__text {
  line-height: 1.2;
}

/* ==========================================================================
   LA CASSA, v2 (2026-09-13)
   --------------------------------------------------------------------------
   Ogni passo e' una scheda di carta; le scelte (spedizione, pagamento) sono
   pastiglie che si accendono di verde quando sono quelle scelte. Su schermo largo
   la colonna destra e' «il conto»: riepilogo, come paghi, note, termini e il
   pulsante (impaginazione in assets/cassa.js, nessun blocco spostato).
   ========================================================================== */
.wc-block-checkout .wc-block-components-checkout-step {
  box-sizing: border-box;
  margin: 0 0 16px !important;
  padding: 22px 24px 24px !important;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 16px;
  background: var(--wp--preset--color--carta);
}
.wc-block-checkout .wc-block-components-checkout-step::before,
.wc-block-checkout .wc-block-components-checkout-step::after { content: none !important; }
.wc-block-checkout .wc-block-components-checkout-step__heading { margin: 0 0 14px; }
.wc-block-checkout .wc-block-components-checkout-step__title {
  margin: 0;
  color: var(--wp--preset--color--inchiostro);
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
.wc-block-checkout .wc-block-components-checkout-step__container,
.wc-block-checkout .wc-block-components-checkout-step__content { padding: 0 !important; margin: 0; }
.wc-block-checkout .wc-block-components-checkout-step__description { color: var(--wp--preset--color--tenue); font-size: 0.9rem; }

/* la nota all'ordine e' una riga sola: scheda piu' bassa */
.wc-block-checkout .wc-block-checkout__order-notes { padding-block: 16px !important; }

/* campi: piu' alti e tondi, fondo carta dentro la scheda */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-checkout .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea {
  border-radius: 10px !important;
  border-color: #cfcabf !important;
  background: var(--wp--preset--color--fondo) !important;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-textarea:focus {
  border-color: var(--wp--preset--color--verde) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 115, 58, 0.14) !important;
  outline: 0 !important;
}
.wc-block-checkout .wc-blocks-components-select__container { border-radius: 10px; background: var(--wp--preset--color--fondo); }
.wc-block-checkout .wc-block-components-address-form__address_2-toggle { color: var(--wp--preset--color--verde); font-weight: 700; }

/* le scelte: pastiglie separate invece di un blocco a righe */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked {
  display: grid;
  gap: 8px;
  border: 0 !important;
  box-shadow: none !important;
}
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::before { content: none !important; display: none !important; }
.wc-block-checkout .wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option,
.wc-block-checkout .wc-block-components-radio-control-accordion-option {
  position: relative;
  margin: 0 !important;
  border: 1.5px solid var(--wp--preset--color--linea) !important;
  border-radius: 12px !important;
  background: var(--wp--preset--color--fondo);
  box-shadow: none !important;
  transition: border-color var(--durata-rapida) ease, background var(--durata-rapida) ease;
}
.wc-block-checkout .wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after { content: none !important; display: none !important; }
.wc-block-checkout .wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option-checked,
.wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: var(--wp--preset--color--verde) !important;
  background: var(--wp--preset--color--verde-tenue);
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { border: 0 !important; box-shadow: none !important; }
.wc-block-checkout .wc-block-components-radio-control__label { font-weight: 700; color: var(--wp--preset--color--inchiostro); }
.wc-block-checkout .wc-block-components-radio-control__secondary-label { font-weight: 700; }
.wc-block-checkout .wc-block-components-radio-control-accordion-content {
  padding: 0 16px 14px 52px !important;
  color: var(--wp--preset--color--tenue);
  font-size: 0.9rem;
}
.wc-block-checkout .wc-block-components-radio-control__input:checked {
  border-color: var(--wp--preset--color--verde) !important;
}
.wc-block-checkout .wc-block-components-radio-control__input:checked::before { background: var(--wp--preset--color--verde) !important; }
.wc-block-checkout .wc-block-components-checkbox__input:checked { background: var(--wp--preset--color--verde) !important; border-color: var(--wp--preset--color--verde) !important; }
.wc-block-checkout .wc-block-components-checkbox__mark { fill: #fff !important; }
@media (hover: hover) and (pointer: fine) {
  .wc-block-checkout .wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option:hover,
  .wc-block-checkout .wc-block-components-radio-control-accordion-option:hover { border-color: #bdb7aa !important; }
}

/* termini e pulsante: il gesto finale */
.wc-block-checkout .wc-block-checkout__terms {
  margin: 0 0 14px !important;
  padding: 0 4px !important;
  border: 0 !important;
  color: var(--wp--preset--color--tenue);
  font-size: 0.86rem;
  line-height: 1.45;
}
.wc-block-checkout .wc-block-checkout__terms::before { content: none !important; }
/* senza la spunta delle condizioni WooCommerce colora solo il quadratino: qui lo si dice
   a parole, sotto la riga, e il riquadro si fa notare anche a chi guarda il pulsante. */
.wc-block-checkout .wc-block-checkout__terms .wc-block-components-checkbox.has-error {
  padding: 10px 12px;
  border: 1.5px solid #b3261e;
  border-radius: 10px;
  background: #fff4f2;
}
.wc-block-checkout .wc-block-checkout__terms .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input {
  border-color: #b3261e !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
}
.wc-block-checkout .wc-block-checkout__terms .wc-block-components-checkbox.has-error .wc-block-components-checkbox__label { color: #b3261e; }
.wc-block-checkout .wc-block-checkout__terms .wc-block-components-checkbox.has-error::after {
  content: "Per inviare l'ordine metti la spunta qui sopra e accetta le condizioni.";
  display: block;
  margin: 8px 0 0 30px;
  font-weight: 700;
  color: #b3261e;
}
.wc-block-checkout .wc-block-checkout__actions { margin: 0 0 16px !important; padding: 0 !important; }
.wc-block-checkout .wc-block-checkout__actions_row { display: block !important; }
.wc-block-checkout .wc-block-components-checkout-place-order-button {
  width: 100% !important;
  min-height: 56px !important;
  font-size: 1.05rem !important;
  box-shadow: 0 12px 24px -14px rgba(0, 115, 58, 0.7);
}
.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0 9px 0 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wc-block-checkout .wc-block-components-checkout-return-to-cart-button { color: var(--wp--preset--color--tenue); font-weight: 600; }

/* il riepilogo */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
  margin: 0 0 16px;
  border-radius: 16px !important;
  overflow: hidden;
}
.wc-block-checkout .wc-block-components-checkout-order-summary__title-text,
.wc-block-checkout .wc-block-components-checkout-order-summary__title,
.wc-block-checkout .wc-block-components-order-summary__button-text { font-weight: 800; }
.wc-block-checkout .wc-block-components-totals-footer-item { background: var(--wp--preset--color--verde-tenue); }

/* ---------- due colonne vere (classe messa da assets/cassa.js) ---------- */
.wc-block-checkout.abn-cassa-griglia {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr);
  grid-auto-rows: 1px;
  grid-auto-flow: row dense;
  column-gap: clamp(28px, 3.5vw, 48px);
  row-gap: 0;
  align-items: start;
}
.wc-block-checkout.abn-cassa-griglia > .wc-block-checkout__main,
.wc-block-checkout.abn-cassa-griglia > .wc-block-checkout__main > form,
.wc-block-checkout.abn-cassa-griglia > .wc-block-checkout__sidebar { display: contents !important; }
.wc-block-checkout.abn-cassa-griglia > *,
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__form > * { grid-column: 1; min-width: 0; }
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__sidebar > *,
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__payment-method,
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__order-notes,
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__order-fields,
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__terms,
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__actions { grid-column: 2; }
/* Il riepilogo arriva ultimo nella pagina ma va in cima alla colonna. */
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__sidebar > * { order: -1; }
.wc-block-checkout.abn-cassa-griglia .wp-block-woocommerce-checkout-order-summary-block { border: 1px solid var(--wp--preset--color--linea); }

/* ---------- cassa: ritiro in negozio (2026-09-13) ----------
   Scelto il ritiro, l'indirizzo non serve: restano nome, cognome e telefono. La classe la
   mette assets/cassa.js leggendo la tariffa scelta; l'obbligo dell'indirizzo per chi
   spedisce lo controlla il server (functions.php). */
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-address-form__country,
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-address-form__address_1,
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-address-form__address_2,
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-address-form__address_2-toggle,
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-address-form__postcode,
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-address-form__city,
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-address-form__state,
.abn-ritiro .wc-block-checkout__use-address-for-billing { display: none !important; }
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title { font-size: 0 !important; }
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title::after {
  content: "I tuoi dati per il ritiro";
  font-size: 1.15rem;
}
.abn-ritiro .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__heading::after {
  content: "Ti avvisiamo quando l’ordine è pronto al banco.";
  display: block;
  margin-top: 4px;
  color: var(--wp--preset--color--tenue);
  font-size: 0.9rem;
}

/* La soglia della spedizione gratuita dentro «Opzioni di spedizione». */
.abn-soglia-cassa {
  /* Verde come l'avviso della soglia nel carrello: è un'informazione del negozio, e
     l'ambra in questo tema parla solo di carboidrati. */
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: var(--raggio-piccolo);
  background: var(--wp--preset--color--verde-tenue);
  color: var(--wp--preset--color--verde-cupo);
  font-size: 0.9rem;
  line-height: 1.35;
}
.abn-soglia-cassa strong { color: var(--wp--preset--color--verde); }
.abn-soglia-cassa.is-raggiunta { background: var(--wp--preset--color--verde); color: #fff; }
.abn-soglia-cassa.is-raggiunta strong { color: #fff; }

/* ---------- punti: dettagli dal gestionale ---------- */
.abn-punti__bonus { font-weight: 600; }
.abn-punti__esclusi {
  margin: 0;
  padding: 0 18px 12px 50px;
  font-size: 0.84rem;
  color: var(--wp--preset--color--tenue);
}
.abn-miei-punti__scadenza {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--raggio-piccolo, 10px);
  background: var(--wp--preset--color--fondo);
  font-size: 0.92rem;
  max-width: none;
}
.abn-miei-punti__premio .descrizione { font-size: 0.86rem; color: var(--wp--preset--color--tenue); }
.abn-miei-punti__saldo .woocommerce-Price-amount,
.abn-miei-punti__saldo .woocommerce-Price-currencySymbol { color: inherit; font-weight: 700; }

/* Prezzo da iscritto: una riga sua sotto il prezzo, in verde. Non è una promo per tutti ma un
   vantaggio del cliente, e deve leggersi come «tuo» — senza competere col numero da pagare. */
.price .abn-iscritto-prezzo,
.wp-block-woocommerce-product-price .abn-iscritto-prezzo,
.wc-block-components-product-price .abn-iscritto-prezzo,
.wc-block-grid__product-price .abn-iscritto-prezzo {
  order: 9;
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--wp--preset--color--verde-cupo, #0a3d22);
}
.single-product .wp-block-woocommerce-product-price .abn-iscritto-prezzo,
.single-product p.price .abn-iscritto-prezzo {
  margin-top: 6px;
  font-size: 0.95rem;
}

/* ==========================================================================
   Colazioni: il vassoio che cambia gusto mentre scorri
   ==========================================================================
   Il pannello resta fermo dentro un binario alto quanto i gusti: mentre la pagina scorre
   cambia il cornetto, il colore del fondo, il nome e il pulsante. Niente "scroll hijack":
   la pagina scorre come sempre.

   Tutto quello che si muove e' qui; il JavaScript cambia soltanto `data-attivo` e la
   variabile `--avanzamento`. Senza JavaScript resta il primo gusto, leggibile e cliccabile. */

.abn-colazioni {
  /* La larghezza piena la dà il gruppo «alignfull» che la contiene nel modello, come per la
     sezione della giornata: dentro la griglia dei temi a blocchi i trucchi con 100vw
     finiscono nella colonna sbagliata. */
  position: relative;
  /* Un tratto di binario per gusto, più mezzo schermo per far respirare l'ultimo. */
  min-height: calc((var(--gusti, 2) + 0.5) * 100vh);
  isolation: isolate;
  /* I colori del testo stanno qui una volta sola: sul fondo chiaro (mandorla, crema) cambiano
     tutti insieme più sotto, invece di essere riscritti riga per riga. */
  --testo: #fff;
  --testo-tenue: rgba(255, 255, 255, 0.76);
  --testo-forte: rgba(255, 255, 255, 0.92);
  --bolla: rgba(255, 255, 255, 0.1);
  --bordo: rgba(255, 255, 255, 0.22);
  --pieno: #fff;
  --pieno-testo: #17321f;
  color: var(--testo);
  transition: color 700ms ease;
}

/* Fondo chiaro: il bianco sopra non si leggerebbe, quindi il testo diventa scuro. Quali gusti
   siano chiari lo decide il PHP guardando la luminanza, e lo scrive in «data-chiari». */
.abn-colazioni[data-chiari~="0"][data-attivo="0"],
.abn-colazioni[data-chiari~="1"][data-attivo="1"],
.abn-colazioni[data-chiari~="2"][data-attivo="2"],
.abn-colazioni[data-chiari~="3"][data-attivo="3"] {
  --testo: #2e1c0d;
  --testo-tenue: rgba(46, 28, 13, 0.72);
  --testo-forte: rgba(46, 28, 13, 0.92);
  --bolla: rgba(46, 28, 13, 0.07);
  --bordo: rgba(46, 28, 13, 0.22);
  --pieno: #2e1c0d;
  --pieno-testo: #fff;
}

/* ---- il fondo che cambia colore ---- */
.abn-colazioni__fondo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.abn-colazioni__tinta {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, color-mix(in srgb, var(--tinta) 55%, #fff) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--tinta) 88%, #000) 0%, var(--tinta) 55%, color-mix(in srgb, var(--tinta) 78%, #000) 100%);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.abn-colazioni[data-attivo="0"] .abn-colazioni__tinta[data-gusto="0"],
.abn-colazioni[data-attivo="1"] .abn-colazioni__tinta[data-gusto="1"],
.abn-colazioni[data-attivo="2"] .abn-colazioni__tinta[data-gusto="2"],
.abn-colazioni[data-attivo="3"] .abn-colazioni__tinta[data-gusto="3"] { opacity: 1; }

/* L'alone dietro al vassoio: gira piano mentre scorri, così il fondo non è mai fermo. */
.abn-colazioni__alone {
  position: absolute; right: 8%; top: 50%; width: min(70vw, 720px); aspect-ratio: 1;
  transform: translate(0, -50%) rotate(calc(var(--avanzamento, 0) * 90deg));
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 42%, transparent 68%);
  filter: blur(2px);
}

/* ---- il pannello fermo ---- */
.abn-colazioni__pannello { position: sticky; top: 0; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.abn-colazioni__dentro {
  width: min(1240px, 92vw); margin: 0 auto; padding: clamp(40px, 7vh, 96px) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px); align-items: center;
}

/* ---- la colonna di sinistra ---- */
.abn-colazioni__occhiello {
  margin: 0 0 10px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--testo-tenue);
}
.abn-colazioni h2 {
  margin: 0 0 10px; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05;
}
.abn-colazioni__sotto { margin: 0 0 22px; max-width: 46ch; color: var(--testo-tenue); font-size: 1.02rem; }

/* Le schede stanno una sopra l'altra: cambia quella visibile, non l'altezza della sezione. */
.abn-colazioni__schede { position: relative; min-height: 190px; }
.abn-colazioni__scheda {
  position: absolute; inset: 0; opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.abn-colazioni[data-attivo="0"] .abn-colazioni__scheda[data-gusto="0"],
.abn-colazioni[data-attivo="1"] .abn-colazioni__scheda[data-gusto="1"],
.abn-colazioni[data-attivo="2"] .abn-colazioni__scheda[data-gusto="2"],
.abn-colazioni[data-attivo="3"] .abn-colazioni__scheda[data-gusto="3"] {
  opacity: 1; transform: none; pointer-events: auto;
}
.abn-colazioni__gusto {
  margin: 0 0 6px; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--testo-tenue);
}
.abn-colazioni__scheda h3 { margin: 0 0 8px; font-size: 1.22rem; font-weight: 800; line-height: 1.25; }
.abn-colazioni__scheda h3 a { color: var(--testo); text-decoration: none; }
.abn-colazioni__scheda h3 a:hover { text-decoration: underline; }
.abn-colazioni__prezzo { margin: 0 0 16px; font-size: 1.05rem; color: var(--testo-forte); }
.abn-colazioni__prezzo del { opacity: 0.6; margin-right: 6px; }
.abn-colazioni__compra {
  display: inline-block; background: var(--pieno); color: var(--pieno-testo); text-decoration: none;
  font-weight: 800; padding: 13px 22px; border-radius: 999px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 700ms ease, color 700ms ease;
}
.abn-colazioni__compra:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); }

/* ---- i gusti da scegliere ---- */
.abn-colazioni__tasti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.abn-colazioni__tasti button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  color: var(--testo-tenue); background: var(--bolla);
  border: 1px solid var(--bordo); border-radius: 999px; padding: 8px 14px;
  font-size: 0.86rem; font-weight: 700; transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.abn-colazioni__tasti button[aria-selected="true"] { background: var(--pieno); color: var(--pieno-testo); border-color: var(--pieno); }
.abn-colazioni__tasti .pallino { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* ---- il vassoio ---- */
.abn-colazioni__vassoio { position: relative; display: grid; place-items: center; min-height: min(56vh, 460px); }
.abn-colazioni__piatto {
  position: absolute; bottom: 16%; width: min(62%, 360px); aspect-ratio: 4.2 / 1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--bolla), transparent 72%);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.6);
  transform: rotate(calc(var(--avanzamento, 0) * -6deg));
  transition: transform 600ms ease;
}
/* `justify-self` e `align-self`: dentro una griglia con `place-items:center` il riquadro
   si allungava, e la foto usciva deformata. */
.abn-colazioni__cornetti {
  position: relative; width: min(82%, 460px); aspect-ratio: 1 / 1;
  justify-self: center; align-self: center;
}
.abn-colazioni__cornetto {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(0.82) rotate(-8deg) translateY(28px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Le foto di questa sezione sono ritagliate col fondo trasparente: niente piatto sotto, il
   cornetto sta per aria. L'ombra la fa il filtro, che segue la sagoma e non il riquadro. */
.abn-colazioni__cornetto img {
  box-sizing: border-box;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.34));
}
.abn-colazioni[data-attivo="0"] .abn-colazioni__cornetto[data-gusto="0"],
.abn-colazioni[data-attivo="1"] .abn-colazioni__cornetto[data-gusto="1"],
.abn-colazioni[data-attivo="2"] .abn-colazioni__cornetto[data-gusto="2"],
.abn-colazioni[data-attivo="3"] .abn-colazioni__cornetto[data-gusto="3"] {
  opacity: 1; transform: none; animation: abn-colazioni-galleggia 6s ease-in-out infinite;
}
@keyframes abn-colazioni-galleggia {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1.2deg); }
}
.abn-colazioni__vuoto { width: 62%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }

/* ---- la bevanda, DIETRO al cornetto ----
   Sul vassoio la tazza sta dietro: il cornetto è il prodotto in vendita, la bevanda è il
   contorno che racconta la colazione. Sta più in alto della base del cornetto (più lontana,
   quindi più su) e spunta da un lato, così si riconosce anche quando il cornetto la copre.

   Le foto sono ritagliate col fondo trasparente come quelle dei cornetti: l'ombra la fa il
   filtro, che segue la sagoma e non il riquadro. */
.abn-colazioni__bevande {
  position: absolute;
  left: -2%;
  bottom: 38%;
  width: min(34%, 200px);
  aspect-ratio: 700 / 900;
  z-index: 0;
  pointer-events: none;
}
.abn-colazioni__bevanda {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: translateY(22px) scale(0.9);
  /* Entra DOPO il cornetto: due cose che compaiono nello stesso istante sembrano una cosa
     sola che si allarga. */
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1) 90ms, transform 640ms cubic-bezier(0.22, 1, 0.36, 1) 90ms;
}
.abn-colazioni__bevanda img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.32));
}
.abn-colazioni[data-attivo="0"] .abn-colazioni__bevanda[data-gusto="0"],
.abn-colazioni[data-attivo="1"] .abn-colazioni__bevanda[data-gusto="1"],
.abn-colazioni[data-attivo="2"] .abn-colazioni__bevanda[data-gusto="2"],
.abn-colazioni[data-attivo="3"] .abn-colazioni__bevanda[data-gusto="3"] {
  opacity: 1; transform: none;
  animation: abn-bevanda-galleggia var(--ritmo, 7.4s) ease-in-out 0.5s infinite;
}
/* Ogni bevanda ha il suo respiro: all'unisono sembrerebbero incollate allo stesso vetro. */
.abn-colazioni__bevanda[data-gusto="0"] { --ritmo: 7.4s; }
.abn-colazioni__bevanda[data-gusto="1"] { --ritmo: 6.2s; }
.abn-colazioni__bevanda[data-gusto="2"] { --ritmo: 8.1s; }
.abn-colazioni__bevanda[data-gusto="3"] { --ritmo: 6.8s; }
@keyframes abn-bevanda-galleggia {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(-1deg); }
}

/* Il cornetto passa davanti: è lui il prodotto. */
.abn-colazioni__cornetti { z-index: 1; }

/* ---- la barra di avanzamento ---- */
.abn-colazioni__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bolla); }
.abn-colazioni__barra span {
  display: block; height: 100%; width: calc(var(--avanzamento, 0) * 100%);
  background: var(--pieno); transition: width 120ms linear;
}

/* ---- telefono: una colonna sola, il vassoio sopra e il testo sotto ----
   Il pannello resta incollato anche qui: senza binario il gusto cambiava in cinquanta pixel
   di pollice, che è uno scatto, non un'animazione. Il vassoio si rimpicciolisce quanto basta
   perché pannello e testo stiano in uno schermo. */
@media (max-width: 820px) {
  .abn-colazioni { min-height: calc((var(--gusti, 2) * 0.72 + 0.4) * 100vh); }
  /* Il riempimento in alto tiene il vassoio sotto all'intestazione appiccicata del sito. */
  .abn-colazioni__dentro { grid-template-columns: 1fr; padding: 88px 0 20px; gap: 6px; }
  .abn-colazioni__vassoio { order: -1; min-height: 0; }
  .abn-colazioni__cornetti { width: min(66vw, 230px); }
  /* Sul telefono il vassoio è piccolo: la bevanda spunta appena da dietro al cornetto. */
  .abn-colazioni__bevande { width: min(30vw, 104px); left: -3%; bottom: 30%; }
  .abn-colazioni__piatto { width: min(52vw, 190px); }
  .abn-colazioni h2 { font-size: clamp(1.55rem, 1rem + 3vw, 2rem); }
  .abn-colazioni__sotto { margin-bottom: 12px; font-size: 0.92rem; }
  .abn-colazioni__schede { min-height: 182px; }
  .abn-colazioni__scheda h3 { font-size: 1.08rem; }
  .abn-colazioni__tasti { margin-top: 12px; }
  .abn-colazioni__alone { width: min(110vw, 520px); right: -10%; }
}

/* Schermi bassi (telefoni piccoli, orizzontale): il pannello non ci starebbe, e un pannello
   incollato più alto dello schermo taglia il testo. Lì la sezione torna a scorrere normale. */
@media (max-width: 820px) and (max-height: 700px) {
  .abn-colazioni { min-height: 0; }
  .abn-colazioni__pannello { position: relative; min-height: 0; }
  .abn-colazioni__dentro { padding: 40px 0 44px; }
}

/* ---- chi ha chiesto meno movimento ---- */
@media (prefers-reduced-motion: reduce) {
  .abn-colazioni__tinta,
  .abn-colazioni__scheda,
  .abn-colazioni__cornetto,
  .abn-colazioni__bevanda,
  .abn-colazioni__piatto { transition-duration: 1ms; }
  .abn-colazioni__cornetto,
  .abn-colazioni__bevanda { animation: none !important; }
  .abn-colazioni__alone { transform: translate(0, -50%); }
}

/* ---------- cassa: «Informazioni sull'ordine» (2026-09-28) ----------
   Chiesto dal negozio: un riquadro solo con, in quest'ordine, la nota all'ordine, il
   consenso alle offerte e termini e privacy. Sono tre blocchi di WooCommerce che non si
   possono annidare (la cassa è React, vedi assets/cassa.js): il modello li mette in fila
   e qui diventano una scheda sola, cucendo bordi e angoli. Il titolo lo porta la nota,
   che è la prima; quello del blocco del consenso si nasconde (resta la <legend> per i
   lettori di schermo). */
.wc-block-checkout .wc-block-checkout__order-notes:has(+ .wc-block-checkout__order-fields) {
  margin-bottom: 0 !important;
  padding: 22px 24px 6px !important;
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* `!important` e posizione statica: WooCommerce usa già il ::before dei passi per il
   numero del passo (assoluto, spento in questo tema). */
.wc-block-checkout .wc-block-checkout__order-notes.wc-block-components-checkout-step:has(+ .wc-block-checkout__order-fields)::before {
  content: "Informazioni sull’ordine" !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 1.15rem !important;
  font-weight: 800;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--inchiostro) !important;
  text-align: left !important;
}
.wc-block-checkout .wc-block-checkout__order-notes + .wc-block-checkout__order-fields {
  margin-block: 0 !important;
  padding: 6px 24px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
}
.wc-block-checkout .wc-block-checkout__order-notes + .wc-block-checkout__order-fields .wc-block-components-checkout-step__heading { display: none; }
.wc-block-checkout .wc-block-checkout__order-fields + .wc-block-checkout__terms {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding: 6px 24px 20px !important;
  background: #fff !important;
  border: 1px solid var(--wp--preset--color--linea) !important;
  border-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
}
.wc-block-checkout .wc-block-checkout__order-fields + .wc-block-checkout__terms::before { display: none; }

/* ---------- cassa: «Pagamento rapido» sotto il riepilogo (2026-09-28) ----------
   Chiesto dal negozio: prima si vede cosa si paga, poi il modo rapido per pagarlo. Nella
   griglia a due colonne (assets/cassa.js) il riquadro passa a destra, subito dopo il
   riepilogo (che ha order -2), e prima di «Opzioni di pagamento». */
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__sidebar > * { order: -2; }
/* La tessera della griglia è il <div> senza classe che WooCommerce mette intorno a
   pulsanti e «O continua di seguito»: si prende da lì con :has(). */
.wc-block-checkout.abn-cassa-griglia .wc-block-checkout__form > div:has(> .wc-block-components-express-payment--checkout) {
  grid-column: 2;
  order: -1;
  padding-top: 16px;
}

/* ---------- carrello e cassa: il codice sconto a vista (2026-09-28) ----------
   Il pannello di WooCommerce diventa una sezione riconoscibile: fondo verde tenue, titolo
   in grassetto. Si apre da solo (assets/coupon.js). */
.wc-block-components-totals-coupon.wc-block-components-panel {
  margin: 12px 16px !important;
  padding: 4px 14px 12px !important;
  border-radius: 12px;
  background: var(--wp--preset--color--verde-tenue);
}
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  padding-block: 10px 6px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: var(--wp--preset--color--verde-cupo) !important;
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__content { padding-top: 4px; }

/* ---------- scheda prodotto: proteine e carboidrati a colpo d'occhio (2026-09-28) ----------
   Tabellina fra «Ordinalo» e la descrizione breve. Due righe, grammi, per 100 g e porzione.
   I carboidrati in ambra: in questo tema l'ambra dice sempre e solo «carboidrati». */
.abn-valori {
  width: auto;
  min-width: min(100%, 340px);
  margin: 16px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.92rem;
  background: #fff;
}
.abn-valori th, .abn-valori td { padding: 7px 14px; text-align: right; white-space: nowrap; border: 0; }
.abn-valori thead th {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--wp--preset--color--tenue);
  background: var(--wp--preset--color--crema, #f7f4ed);
}
.abn-valori thead td { background: var(--wp--preset--color--crema, #f7f4ed); }
.abn-valori tbody th { text-align: left; font-weight: 700; }
.abn-valori tbody td { font-weight: 800; font-variant-numeric: tabular-nums; }
.abn-valori tbody tr + tr > * { border-top: 1px solid var(--wp--preset--color--linea); }
.abn-valori__proteine td { color: var(--wp--preset--color--verde-cupo); }
.abn-valori__carboidrati > * { background: var(--wp--preset--color--ambra-tenue); }
.abn-valori__carboidrati td { color: var(--wp--preset--color--ambra); }