/* ============================================================
   Scheda prodotto

   Misure prese dalla scheda vera del sito, a 1512px. La riga principale e'
   705 + 30 + 675 = 1410, cioe' il contenuto allineato al logo.
   ============================================================ */

/* --- la fascia sopra le colonne: briciole e navigazione --- */
.of-prodotto__sopra{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  /* 26,4 sotto: la galleria del sito parte a 200, cioe' 26,4 sotto la
     navigazione alta 31,6 che comincia a 142. */
  padding-block:30px 26.4px;
}
/* Le briciole sono larghe quanto la colonna di sinistra, non quanto la riga:
   e' così sul sito (705 di 1410, 497 di 994 a 1024). */
.of-prodotto__sopra .of-briciole{flex:0 1 50%}

/* Le briciole della scheda sono quelle di ogni pagina (base.css): 14px,
   link #888. Qui c'era un'eccezione a 16px/#444 che il sito oggi non ha. */

/* La navigazione fra prodotti: vedi template-parts/prodotto/navigazione.php. */
.of-prodotto__navigazione{position:relative;display:flex;align-items:center;gap:10px;flex:none}
.of-prodotto__nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--wp--preset--color--dark);
  text-decoration:none;
  transition:all .4s;
}
.of-prodotto__nav--prima{padding:10px 10px 10px 0;color:rgba(17,17,17,.6)}
.of-prodotto__nav--dopo{padding:10px 0 10px 10px;color:rgba(17,17,17,.6)}
.of-prodotto__nav:hover{color:var(--wp--preset--color--primary)}
.of-prodotto__nav svg{display:block}

.of-prodotto__anteprima{
  position:absolute;
  inset-block-start:100%;
  inset-inline-end:0;
  z-index:2;
  display:flex;
  gap:10px;
  width:280px;
  padding:10px;
  border-radius:5px;
  background:#fff;
  box-shadow:5px 0 30px rgba(0,0,0,.08);
  font-size:15px;
  line-height:25.71px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(15px);
  transition:.3s;
}
.of-prodotto__nav--prima:hover + .of-prodotto__anteprima--prima,
.of-prodotto__nav--dopo:hover + .of-prodotto__anteprima--dopo,
.of-prodotto__anteprima:hover{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.of-prodotto__anteprima-foto{flex:0 0 50px;width:50px}
.of-prodotto__anteprima-foto img{display:block;width:50px;height:auto;border-radius:10px}
.of-prodotto__anteprima-nome{display:block;font-size:14px;font-weight:500;line-height:normal;color:var(--wp--preset--color--dark);text-decoration:none}
.of-prodotto__anteprima-prezzo{margin-top:8px;font-size:13px;line-height:normal}
.of-prodotto__anteprima-prezzo .price{margin:0;font-size:13px;font-weight:600;color:var(--wp--preset--color--dark)}

/* --- le due colonne ---
   Sul sito la galleria e' meta' riga e il riepilogo meta' riga meno 30:
   705 + 30 + 675 a 1512, 497 + 30 + 467 a 1024, 385 + 30 + 355 a 800. Due
   colonne fino a 768. */
.of-prodotto{
  display:grid;
  grid-template-columns:minmax(0,1fr) calc(50% - 30px);
  gap:30px;
  align-items:start;
}

/*
 * Il margine sotto la griglia va scritto con `div.product` davanti.
 *
 * `.of-prodotto` porta anche la classe `product` (gliela mette
 * `wc_product_class`), e woocommerce.css dice `.woocommerce div.product{
 * margin-bottom:0}` — 0-2-2. Una regola a sola classe (0-1-0) perde, e infatti
 * il margine calcolato restava **0** per quanto lo scrivessi: misurato.
 *
 * Il valore: fra la fine delle colonne e il blocco specifiche il sito ha
 * **25,9px**. Le specifiche portano 18 di margine proprio, e fra fratelli i
 * margini si fondono prendendo il piu' grande — quindi qui serve 25,9, non
 * 25,9 meno 18.
 */
.woocommerce div.product.of-prodotto{margin-block-end:25.9px}

/* --- la galleria: griglia a due colonne --- */
.of-galleria{position:relative}
.of-galleria__griglia{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.of-galleria__voce{
  flex:0 0 calc((100% - 10px) / 2);
  min-width:0;
}
.of-galleria__foto{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--of-radius-card);
}
/*
 * NIENTE `aspect-ratio:1`.
 *
 * Avevo scritto che il sito tiene le caselle a 347,5x347,5 «comunque sia
 * fatta la foto», e ritagliavo. Misurando /oxalis-tuberosa/ il sito da'
 * **463,3** di altezza su 347,5 di larghezza: cioe' tiene la proporzione
 * vera della foto (600x800), non ritaglia niente. Quella riga sfalsata che
 * volevo raddrizzare e' come si vede il sito.
 *
 * Sulle piante conta: ritagliando al quadrato una foto verticale si perde la
 * cima della pianta, che e' quello che si sta guardando.
 */
/* Una foto sola: prende tutta la colonna invece di restare a meta'. */
.of-galleria__voce:only-child{flex-basis:100%}

/*
 * Ogni foto e' un link all'immagine piena, come sul sito
 * (`product_image_lightbox: yes`): si clicca la foto, non un pulsante in
 * angolo. Il pulsante che c'era qui — 50x50 tondo in alto a destra — non
 * esiste sulla scheda del sito, ed era anche rimasto senza gestore nel
 * JavaScript: un comando che non faceva niente.
 */
.of-galleria__link{
  display:block;
  border-radius:var(--of-radius-card);
  cursor:zoom-in;
}

/* Il pulsante dell'ingrandimento: misure del sito — 50x50 tondo bianco a 15px
   dagli angoli in alto a destra della galleria, icona 14x14, transizione 0,4s.
   Da tablet in su, come sul sito (`d-none d-flex-md`). */
.of-galleria__ingrandisci{
  position:absolute;
  inset-block-start:15px;
  inset-inline-end:15px;
  z-index:2;
  display:none;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  border-radius:100%;
  background:#fff;
  color:var(--wp--preset--color--dark);
  transition:background .4s,color .4s;
}
.of-galleria__ingrandisci:hover,
.of-galleria__ingrandisci:focus-visible{
  background:var(--wp--preset--color--dark);
  color:#fff;
}
.of-galleria__ingrandisci svg{width:14px;height:14px}
@media(min-width:768px){
  .of-galleria__ingrandisci{display:inline-flex}
}
@media(prefers-reduced-motion:reduce){
  .of-galleria__ingrandisci{transition:none}
}

/* ============================================================
   La barra d'acquisto in basso

   Misure del sito (`#glozin-sticky-add-to-cart`): alta 97, fondo bianco,
   ombra `rgba(0,0,0,.08) 5px 0 30px`, a riposo spostata giu' di tutta la sua
   altezza e riportata su con una transizione di `transform` — non di
   `bottom`, che farebbe ricalcolare l'impaginazione a ogni fotogramma.
   Interno 1200 centrato con 15px di respiro sopra e sotto.
   ============================================================ */
.of-barra{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:40;
  background:#fff;
  box-shadow:rgba(0,0,0,.08) 5px 0 30px;
  transform:translateY(100%);
  transition:transform .3s;
  pointer-events:none;
}
.of-barra[data-of-barra-viva]{transform:none;pointer-events:auto}
.of-barra__interno{
  display:flex;
  align-items:center;
  /*
   * NON centrato come un blocco solo: sul sito la foto sta all'inizio del
   * contenitore da 1200 (x=156) e il pulsante alla fine (finisce a 1356).
   * Centrando tutto insieme la foto finiva a 484 e il pulsante a 838.
   */
  justify-content:space-between;
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  /*
   * Nessun rientro laterale su schermo largo: sul sito il contenitore e'
   * 1200 NETTI, con la foto a x=156 e il pulsante che finisce a 1356. Con
   * `padding-inline` da 30 tutto rientrava di 30 — foto a 186, pulsante a
   * 1136. Il rientro serve solo quando la finestra e' piu' stretta del
   * contenitore, ed e' li' che resta.
   */
  padding:15px 0;
  box-sizing:border-box;
}
@media(max-width:1260px){
  .of-barra__interno{padding-inline:var(--of-contenitore-lato)}
}
.of-barra__foto{
  flex:none;
  width:67px;
  height:67px;
  margin-inline-end:15px;
  border-radius:50%;
  overflow:hidden;
}
.of-barra__foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.of-barra__info{padding-inline-end:30px}
.of-barra__nome{
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:normal;
  color:var(--wp--preset--color--dark);
}
.of-barra__nome a{color:inherit;text-decoration:none}
.of-barra__nome a:hover{color:var(--wp--preset--color--primary)}
/* Le stelle: 54x11,5 misurate, cioe' il corpo a 10px. */
.of-barra .star-rating{font-size:10px;width:54px;height:11.5px;margin:0;color:var(--wp--preset--color--text)}

.of-barra__acquisto{
  display:flex;
  align-items:center;
  gap:10px;
  /* Spinto a destra: quello che resta fra le due isole e' vuoto, come sul sito. */
  margin:0 0 0 auto;
  padding:0;
}
/* I due pseudo-elementi di clearfix di WooCommerce, in un contenitore flex,
   diventano elementi flex e si mangiano un `gap` per parte: e' lo stesso
   inganno della griglia del catalogo e del form della scheda. */
.of-barra__acquisto::before,
.of-barra__acquisto::after{content:none}

/*
 * ATTENZIONE ai selettori di questo blocco: la barra sta FUORI da
 * `div.product`, quindi tutto cio' che e' scritto con `div.product` non la
 * tocca. Qui si parte da `.of-barra`, che vale come classe e basta a superare
 * woocommerce.css (0-2-1) arrivando a 0-3-1.
 */
.of-barra .of-barra__qta{
  display:flex;
  align-items:center;
  flex:none;
  width:122px;
  height:50px;
  border:1px solid #ebebeb;
  border-radius:5px;
  background:#f5f5f5;
  box-sizing:border-box;
  overflow:hidden;
}
.of-barra .of-barra__passo{
  flex:none;
  width:34px;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  color:var(--wp--preset--color--dark);
  font-family:inherit;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.of-barra .of-barra__passo:hover{color:var(--wp--preset--color--primary)}
.woocommerce .of-barra .of-barra__qta .quantity,
.of-barra .of-barra__qta .quantity{
  display:block;
  flex:1 1 auto;
  width:auto;
  min-width:0;
  height:100%;
  margin:0;
  border:0;
  background:transparent;
}
.woocommerce .of-barra .of-barra__qta input.qty,
.of-barra .of-barra__qta input.qty{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
  font-family:inherit;
  font-size:15px;
  line-height:1;
  color:var(--wp--preset--color--dark);
  -webkit-appearance:textfield;
  appearance:textfield;
}
/* Le frecciette native del campo numerico: via, i comandi sono i due pulsanti. */
.of-barra .of-barra__qta input.qty::-webkit-outer-spin-button,
.of-barra .of-barra__qta input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.woocommerce .of-barra button.of-barra__azione,
.of-barra button.of-barra__azione,
.of-barra__azione{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:190px;
  height:50px;
  /* 16,5px 20px come sul sito: con `box-sizing:border-box` e altezza fissa il
     padding verticale non cambia la scatola, ma va scritto lo stesso perche'
     e' quello che centra il testo se un domani l'altezza salta. */
  padding:16.5px 20px;
  border:0;
  border-radius:var(--of-radius-bottone,30px);
  background:var(--wp--preset--color--dark);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:15px;
  letter-spacing:-0.36px;
  cursor:pointer;
}
.woocommerce .of-barra button.of-barra__azione:hover,
.of-barra button.of-barra__azione:hover,
.of-barra__azione:hover{background:var(--wp--preset--color--primary);color:var(--of-testo-su-primario,#fff)}

/* Schermo stretto: come sul sito, foto e nome lasciano il posto alla riga
   d'acquisto, che e' quello per cui la barra esiste. */
@media(max-width:767px){
  .of-barra__foto,
  .of-barra__info{display:none}
  .of-barra__interno{justify-content:stretch;gap:10px}
  .of-barra__acquisto{flex:1 1 auto}
  .woocommerce div.product .of-barra__acquisto button.of-barra__azione,
  .of-barra__azione{flex:1 1 auto;width:auto}
}

@media(prefers-reduced-motion:reduce){
  .of-barra{transition:none}
}
.of-galleria__link:focus-visible{outline:2px solid var(--wp--preset--color--dark);outline-offset:3px}

/* ============================================================
   La lente: l'ingrandimento delle foto

   `<dialog>` e non una libreria: la trappola del focus, la chiusura con Esc e
   il resto della pagina reso inerte li fa il browser. Photoswipe e le sue
   dipendenze pesavano circa 60KB per le stesse tre cose.
   ============================================================ */
.of-lente{
  width:100vw;
  max-width:100vw;
  height:100dvh;
  max-height:100dvh;
  margin:0;
  padding:0;
  border:0;
  background:rgba(0,0,0,.92);
  overflow:hidden;
}
.of-lente::backdrop{background:rgba(0,0,0,.92)}
.of-lente__corpo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
  height:100%;
  padding:60px 20px 70px;
  box-sizing:border-box;
}
.of-lente__foto{
  max-width:min(1100px,calc(100vw - 180px));
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--of-radius-card);
  background:rgba(255,255,255,.04);
}
.of-lente__chiudi,
.of-lente__freccia{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--wp--preset--color--background,#fff);
  color:var(--wp--preset--color--dark,#111);
  cursor:pointer;
  transition:background .25s,color .25s;
}
.of-lente__chiudi:hover,
.of-lente__freccia:hover{background:var(--wp--preset--color--primary);color:var(--of-testo-su-primario,#fff)}
.of-lente__chiudi{
  position:absolute;
  inset-block-start:15px;
  inset-inline-end:15px;
  z-index:2;
}
.of-lente__freccia{flex:none}
.of-lente__freccia[hidden]{display:none}
.of-lente__conta{
  position:absolute;
  inset-block-end:24px;
  inset-inline:0;
  margin:0;
  color:#fff;
  font-size:14px;
  line-height:1;
  text-align:center;
}
.of-lente__conta[hidden]{display:none}

@media(max-width:600px){
  .of-lente__corpo{gap:10px;padding:60px 10px 60px}
  .of-lente__foto{max-width:calc(100vw - 140px)}
  .of-lente__chiudi,
  .of-lente__freccia{width:40px;height:40px}
}

@media(prefers-reduced-motion:reduce){
  .of-lente__chiudi,
  .of-lente__freccia{transition:none}
}

/* --- la colonna destra --- */
.of-prodotto__riepilogo{min-width:0}

/* L'etichetta in cima alla colonna: 29 di altezza e 10 sotto, come sul sito. */
.of-prodotto__etichette{display:flex;gap:3px;margin:0 0 10px}

/* Categoria e invito alla recensione: il testo del corpo, 16px su 27,42,
   come sul sito (misurato il 23/09 a 1512, 1024 e 375; prima qui c'erano
   15px su 25,71, e il riepilogo saliva di 3px). */
.of-prodotto__categoria{
  margin:0;
  font-size:16px;
}
.of-prodotto__categoria a{color:var(--wp--preset--color--dark);text-decoration:none}
.of-prodotto__categoria a:hover{color:var(--wp--preset--color--primary)}

/*
 * 32px/600 con interlinea 38,72: la misura del sito. Qui il titolo veniva
 * **15px** — la scala della card del catalogo — ed era il difetto piu' vistoso
 * della pagina: il nome del prodotto piu' piccolo del prezzo.
 */
.of-prodotto__riepilogo .product_title,
.of-prodotto__riepilogo .of-prodotto__titolo{
  margin:0 0 11px;
  font-size:32px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;
  color:var(--wp--preset--color--dark);
}

.of-prodotto__recensioni-link{
  margin:0;
  font-size:16px;
}
.of-prodotto__recensioni-link a{color:var(--wp--preset--color--dark);text-decoration:none}
.of-prodotto__recensioni-link a:hover{color:var(--wp--preset--color--primary)}
/* L'emoji di WordPress: alta quanto il testo, come fa il suo foglio. */
.of-prodotto__recensioni-link img.emoji{display:inline;width:1em;height:1em;margin:0 .07em;vertical-align:-.1em;border:0;box-shadow:none}

/*
 * 26px/600, e 24px di stacco dal blocco sopra: y misurate 114 -> 138.
 *
 * Il selettore e' lungo perche' deve battere `.woocommerce div.product p.price`
 * di woocommerce.css, che vale 0-3-2: a due classi il prezzo restava 18,75px.
 * `.of-prodotto` porta anche la classe `product`, che ci mette la quarta.
 */
.of-prodotto.product .of-prodotto__riepilogo p.price{
  margin:24px 0 0;
  display:flex;
  align-items:baseline;
  gap:5px;
  font-size:26px;
  font-weight:600;
  line-height:25.71px;
  color:var(--wp--preset--color--dark);
}
.of-prodotto.product .of-prodotto__riepilogo p.price del{
  margin-inline-end:10px;
  font-size:20px;
  font-weight:400;
  color:#666;
}
.of-prodotto.product .of-prodotto__riepilogo p.price ins{
  text-decoration:none;
  color:var(--wp--preset--color--primary);
}

/*
 * La disponibilita' compare UNA volta, in cima alla colonna. WooCommerce la
 * stampa anche dentro il blocco dell'aggiungi al carrello: quella si nasconde,
 * perche' e' la stessa frase due volte a quaranta pixel di distanza.
 */
.of-prodotto__riepilogo > p.stock{display:none}

/* --- il form: le stesse misure della finestra rapida --- */
/*
 * Una riga: quantita' + carrello + preferiti, con 10px fra loro. Sul sito e'
 * `.glozin-product-atc-group`; qui e' il form stesso, che contiene gli stessi
 * tre pezzi. Senza `display:flex` il pulsante restava larzo quanto il suo
 * testo — 174,8px invece di 475.
 *
 * 675 = 130 (quantita') + 10 + 475 (pulsante) + 10 + 50 (cuore).
 */
.woocommerce div.product .of-prodotto__riepilogo form.cart{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  /*
   * Il prefisso `.woocommerce div.product` non e' decorazione: woocommerce.css
   * veste questo form con selettori da 0-3-2 e 0-4-3, e a specificita' piu'
   * bassa le mie regole non entravano in scena — il pulsante restava largo
   * quanto il suo testo e i comandi partivano 10px dentro al bordo.
   */
  justify-content:flex-start;
  /* 24,4 e non 20: e' lo stacco misurato fra il «Condividi» e la riga
     d'acquisto sul sito. Il numero non e' tondo perche' nasce dai margini dei
     widget Elementor, non da una scala. */
  margin:24.4px 0 0;
  padding:0;
}
/*
 * I due pseudo-elementi con cui WooCommerce chiude i float diventerebbero due
 * elementi flex in piu': larghi zero, ma ognuno si mangia un `gap`. Erano i
 * 10px a sinistra e i 10 a destra che tenevano la riga staccata dal bordo
 * della colonna, e i 20px che impedivano al pulsante di arrivare a 475.
 * Identico a quello che succedeva nella griglia del catalogo.
 */
.woocommerce div.product .of-prodotto__riepilogo form.cart::before,
.woocommerce div.product .of-prodotto__riepilogo form.cart::after{content:none}

/* Le varianti hanno bisogno di una riga propria sopra i comandi. */
.woocommerce div.product .of-prodotto__riepilogo form.cart .variations,
.of-prodotto__riepilogo form.cart .woocommerce-variation{flex:1 1 100%}
.woocommerce div.product .of-prodotto__riepilogo form.cart .quantity{
  display:flex;
  /* WooCommerce le mette `margin-right:4px`: il distacco lo decide il `gap`. */
  margin:0;
  align-items:center;
  flex:0 0 auto;
  width:130px;
  height:50px;
  line-height:16px;
  color:var(--wp--preset--color--dark);
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--of-radius-sm);
  background:var(--wp--preset--color--surface);
  overflow:hidden;
}
.woocommerce div.product .of-prodotto__riepilogo form.cart .qty{
  flex:0 0 38px;
  width:38px;
  min-width:0;
  height:100%;
  padding:0;
  border:0;
  background:none;
  color:var(--wp--preset--color--text);
  font-size:14px;
  text-align:center;
}
.woocommerce div.product .of-prodotto__riepilogo form.cart .single_add_to_cart_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  gap:10px;
  height:50px;
  margin:0;
  padding:16.5px 20px;
  border:1px solid var(--wp--preset--color--dark);
  border-radius:var(--of-radius-bottone);
  background:var(--wp--preset--color--dark);
  color:#fff;
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.024em;
}
.woocommerce div.product .of-prodotto__riepilogo form.cart .single_add_to_cart_button:hover{
  background:var(--wp--preset--color--primary);
  border-color:var(--wp--preset--color--primary);
}

/* --- rassicurazioni: cosa succede dopo l'acquisto di una pianta viva --- */
.of-fiducia{
  display:grid;
  gap:var(--wp--preset--spacing--30);
  margin-top:var(--wp--preset--spacing--50);
  padding-top:var(--wp--preset--spacing--40);
  border-top:1px solid var(--wp--preset--color--border);
  font-size:var(--wp--preset--font-size--sm);
}
.of-fiducia__voce{display:flex;gap:var(--wp--preset--spacing--30);align-items:flex-start}
.of-fiducia__voce svg{flex:0 0 20px;margin-top:2px;color:var(--wp--preset--color--primary)}

/* --- contenuti in accordion: aperti, non nascosti dietro tab --- */
.of-dettagli{margin-top:var(--wp--preset--spacing--60)}
.of-dettagli details{
  border-top:1px solid var(--wp--preset--color--border);
  padding-block:var(--wp--preset--spacing--40);
}
.of-dettagli summary{
  cursor:pointer;
  font-weight:500;
  font-size:var(--wp--preset--font-size--lg);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.of-dettagli summary::-webkit-details-marker{display:none}
.of-dettagli summary::after{content:'+';font-size:1.4em;line-height:1;color:var(--wp--preset--color--text-muted)}
.of-dettagli details[open] summary::after{content:'\2212'}
.of-dettagli__corpo{padding-top:var(--wp--preset--spacing--30)}

/* --- barra di acquisto persistente (mobile) --- */
.of-sticky-atc{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  display:flex;
  gap:var(--wp--preset--spacing--40);
  align-items:center;
  justify-content:space-between;
  padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  background:var(--wp--preset--color--background);
  border-top:1px solid var(--wp--preset--color--border);
  box-shadow:var(--wp--preset--shadow--md,0 -4px 16px rgb(0 0 0 /.1));
  transform:translateY(110%);
  transition:transform var(--of-transizione);
  padding-bottom:calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom));
}
.of-sticky-atc.is-visibile{transform:translateY(0)}
.of-sticky-atc__info{min-width:0}
.of-sticky-atc__nome{
  margin:0;
  font-size:var(--wp--preset--font-size--sm);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.of-sticky-atc__prezzo{margin:0;font-weight:600}
@media (min-width:900px){.of-sticky-atc{display:none}}

/* --- specifiche pianta: la griglia arriva dal plugin, qui solo il contorno --- */
.plant-specs-wrap{margin-block:var(--wp--preset--spacing--50)}

/* ============================================================
   Blocchi della scheda configurati sul sito attuale:
   vantaggi, promozioni spedizione, pagamento sicuro,
   "fai una domanda", condivisione, accordion.
   ============================================================ */

/* --- vantaggi (product_highlights) --- */
.of-prodotto__vantaggi{
  list-style:none;margin:var(--wp--preset--spacing--40) 0;padding:0;
  display:grid;gap:8px;
}
.of-prodotto__vantaggi li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:15px;
}
.of-prodotto__vantaggi svg{flex:0 0 auto;margin-block-start:4px;color:var(--wp--preset--color--primary)}

/* --- promozioni spedizione (grid, accanto all'aggiungi al carrello) --- */
.of-prodotto__promozioni{
  display:grid;gap:1px;
  margin:var(--wp--preset--spacing--40) 0;
  background:var(--wp--preset--color--border);
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--of-radius-md);
  overflow:hidden;
}
@media(min-width:600px){ .of-prodotto__promozioni{grid-template-columns:repeat(2,1fr)} }
.of-promozione{
  display:grid;gap:2px;
  padding:14px 16px;
  background:var(--wp--preset--color--background);
  font-size:var(--wp--preset--font-size--sm);
}
.of-promozione strong{color:var(--wp--preset--color--dark)}
.of-promozione span{color:var(--wp--preset--color--text-muted)}

/* --- pagamento sicuro --- */
.of-prodotto__sicurezza{
  margin:var(--wp--preset--spacing--40) 0;
  padding:16px;
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--of-radius-md);
  text-align:center;
}
.of-prodotto__sicurezza-titolo{
  margin:0 0 10px;
  font-size:var(--wp--preset--font-size--sm);font-weight:600;
  color:var(--wp--preset--color--dark);
}
.of-prodotto__sicurezza img{margin-inline:auto;max-width:340px}

/* --- fai una domanda --- */
.of-prodotto__domanda{
  display:inline-flex;align-items:center;gap:8px;
  margin:var(--wp--preset--spacing--30) 0 0;padding:0;
  background:none;border:0;cursor:pointer;
  color:var(--wp--preset--color--dark);
  font-size:var(--wp--preset--font-size--sm);
  text-decoration:underline;text-underline-offset:3px;
}
.of-prodotto__domanda:hover{color:var(--wp--preset--color--primary)}
.of-domanda__corpo{padding:20px}
.of-domanda__prodotto{
  margin:0 0 16px;padding-block-end:16px;
  border-bottom:1px solid var(--wp--preset--color--border);
  font-weight:600;color:var(--wp--preset--color--dark);
}

/* --- meta e condivisione --- */
.of-prodotto__meta{
  margin:61px 0 0;
  font-size:16px;
  line-height:1.714;
  color:var(--wp--preset--color--dark);
}
.of-prodotto__meta-etichetta{color:var(--wp--preset--color--text)}
.of-prodotto__meta a{font-size:15px;line-height:25.71px;color:var(--wp--preset--color--dark);text-decoration:none}
.of-prodotto__meta a:hover{color:var(--wp--preset--color--primary)}

/* --- condividi ---
   Sul sito NON e' una riga di link: e' un solo comando «Condividi» che apre
   una finestra con l'indirizzo da copiare e cinque canali. Misure prese da
   /oxalis-tuberosa/:

     comando    inline-flex, gap 10, 16px/400, alto 19,5, a 23,6 dal prezzo
     finestra   larga 440, raggio 15, ombra rgba(0,0,0,.16) 0 4px 8px
     testata    padding 20 30, titolo 18px/600
     corpo      padding 30
     campo      320x49, raggio 5, bordo 1px #ebebeb, testo 14px
     copia      50x50 tondo nero
     etichetta  16px/600, 15 sotto
     canali     40x40, raggio 30, contorno 1px #111, distanza 10 */
/* Il comando a 23,5 dal prezzo e alto 19,5 (16px), come sul sito: da qui il
   carrello cade a 24,4 dal suo fondo. */
.of-prodotto__condividi{display:flex;margin:23.5px 0 0}
.of-condividi__apri{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--wp--preset--color--text);
  font-size:16px;
  line-height:normal;
  min-height:19.5px;
  text-decoration:none;
  transition:color .25s;
}
.of-condividi__apri:hover,
.of-condividi__apri:focus-visible{color:var(--wp--preset--color--dark)}
.of-condividi__apri svg{flex:none}

.of-condividi{
  width:440px;
  max-width:calc(100vw - 30px);
  padding:0;
  border:0;
  border-radius:15px;
  background:#fff;
  box-shadow:rgba(0,0,0,.16) 0 4px 8px;
  color:var(--wp--preset--color--text);
}
.of-condividi::backdrop{background:rgba(0,0,0,.4)}
.of-condividi__testata{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 30px;
}
.of-condividi__titolo{
  margin:0;
  font-size:18px;
  font-weight:600;
  line-height:1;
  letter-spacing:normal;
  color:var(--wp--preset--color--dark);
}
.of-condividi__chiudi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:none;
  /* 22,28 e non 16: sul sito la chiusura e' un `<a>` e porta con se' la sua
     riga di testo, che rende la testata alta 62,28. Con un pulsante da 16 la
     testata veniva 58. */
  height:22.28px;
  color:var(--wp--preset--color--dark);
  cursor:pointer;
  transition:color .25s;
}
.of-condividi__chiudi:hover{color:var(--wp--preset--color--primary)}

.of-condividi__corpo{padding:30px}
.of-condividi__riga{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.of-condividi__campo{
  flex:1 1 auto;
  min-width:0;
  height:49px;
  padding:15px 20px;
  border:1px solid var(--of-campo-bordo,#ebebeb);
  border-radius:var(--of-radius-campo,5px);
  background:var(--of-campo-sfondo,#fff);
  box-sizing:border-box;
  font-family:inherit;
  font-size:14px;
  color:var(--wp--preset--color--text);
}
.of-condividi__copia{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  padding:0;
  border:0;
  border-radius:var(--of-radius-bottone,30px);
  background:var(--wp--preset--color--dark);
  color:#fff;
  cursor:pointer;
  transition:background .25s;
}
.of-condividi__copia:hover{background:var(--wp--preset--color--primary)}

.of-condividi__etichetta{
  margin:0 0 15px;
  font-size:16px;
  font-weight:600;
  line-height:1.21;
  color:var(--wp--preset--color--dark);
}
.of-condividi__canali{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.of-condividi__canale{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--wp--preset--color--dark);
  border-radius:30px;
  color:var(--wp--preset--color--dark);
  transition:background .25s,color .25s,border-color .25s;
}
.of-condividi__canale:hover,
.of-condividi__canale:focus-visible{
  background:var(--wp--preset--color--dark);
  color:#fff;
}
@media(prefers-reduced-motion:reduce){
  .of-condividi__apri,
  .of-condividi__chiudi,
  .of-condividi__copia,
  .of-condividi__canale{transition:none}
}

/* --- accordion (product_tabs_layout=accordion, under-summary) --- */
.of-accordion{
  margin-block-start:25px;
  border-top:1px solid var(--wp--preset--color--border);
}
.of-accordion__voce{border-bottom:1px solid var(--wp--preset--color--border)}

/* La tipografia DENTRO la descrizione, misurata sul sito:
     paragrafi  16px/27,424 con 10 sotto e 0 sopra
     titoli H2  35,4849px/42,9367 con 24,8394 sopra e sotto
     elenchi    16px/27,424, senza margine fra le voci
   Senza questi valori il pannello rendeva 1560 invece di 1694,7: erano i
   titoli interni, che qui scendevano alla scala dei sottotitoli. */
.of-accordion__corpo{font-size:16px;line-height:1.714}
.of-accordion__corpo p{margin:0 0 10px}
.of-accordion__corpo h1{
  /* Misurato sul sito: alto 38,7 (32 x 1,21) con 21,44 di margine sopra e
     sotto. Senza questa regola ereditava il corpo del testo e usciva 19,4. */
  margin:21.44px 0;
  font-size:32px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;
  color:var(--wp--preset--color--dark);
}
.of-accordion__corpo h2{
  margin:24.8394px 0;
  font-size:35.4849px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;
  color:var(--wp--preset--color--dark);
}
/* h3-h6, grassetto, link ed elenco numerato: misurati inserendo i tag nella
   descrizione del sito. Mancavano, e un H3 della descrizione usciva a 16px
   invece di 27,83. */
.of-accordion__corpo :is(h3,h4,h5,h6){font-weight:600;line-height:1.21;letter-spacing:normal;color:var(--wp--preset--color--dark)}
.of-accordion__corpo h3{margin:19.4798px 0;font-size:27.8283px}
.of-accordion__corpo h4{margin:18.2px 0;font-size:26px}
.of-accordion__corpo h5{margin:12.6px 0;font-size:18px}
.of-accordion__corpo h6{margin:11.2px 0;font-size:16px}
.of-accordion__corpo :is(strong,b){color:var(--wp--preset--color--dark)}
.of-accordion__corpo a{color:var(--wp--preset--color--dark);text-decoration:none}
.of-accordion__corpo a:hover{color:var(--wp--preset--color--primary)}
.of-accordion__corpo img.emoji{display:inline;width:1em;height:1em;margin:0 .07em;vertical-align:-.1em;border:0;box-shadow:none}
.of-accordion__corpo ul{margin:10px 0;padding-inline-start:17px}
.of-accordion__corpo ol{margin:16px 0;padding:0 0 24px 20.8px}
.of-accordion__corpo li{margin:0}
.of-accordion__titolo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  /* 16px/600 e 17px sopra e sotto: misure del sito (`.woocommerce-tabs-title`,
     alto 53,5 = 17 + 19,5 + 17). Prima erano 17px e 18px di padding, e la riga
     usciva 65,13. */
  padding:17px 0;cursor:pointer;
  font-size:16px;font-weight:600;line-height:normal;
  color:var(--wp--preset--color--dark);
  list-style:none;
}
.of-accordion__titolo::-webkit-details-marker{display:none}
.of-accordion__titolo:hover{color:var(--wp--preset--color--primary)}
.of-accordion__freccia{flex:0 0 auto;transition:transform 200ms ease}
.of-accordion__voce[open] .of-accordion__freccia{transform:rotate(180deg)}
/* Sul sito il pannello della descrizione non ha respiro in fondo
   (`.woocommerce-tabs-content` padding 0): i 24px di prima allungavano il
   blocco e spostavano giu' recensioni e visti. */
.of-accordion__corpo{padding-block-end:0}

/* Il focus da tastiera deve vedersi: <summary> non lo mostra da solo
   in tutti i browser. */
.of-accordion__titolo:focus-visible{
  outline:2px solid var(--wp--preset--color--primary);
  outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  .of-accordion__freccia{transition:none}
}

/* ============================================================
   Sotto le colonne, a tutta larghezza
   ============================================================ */

/* --- recensioni: titolo 24px/600, come sul sito --- */
/*
 * 38 e non 60. Misurato sul sito: fra la fine del blocco specifiche e il
 * titolo delle recensioni ci sono **38px**; da me erano 60, e quei 22 di
 * troppo spostavano in giu' tutto il resto della pagina.
 *
 * I margini fra fratelli si fondono e vince il piu' grande: le specifiche
 * hanno 18 sotto, quindi 38 qui danno 38, non 56.
 */
.of-prodotto__recensioni{margin-block:38px 0}

/* --- recensioni ---
   Misure prese da /oxalis-tuberosa/: il blocco sta a x=51 e larg. 1410, cioe'
   a tutta larghezza sotto le colonne, ed e' alto **115,04** in tutto —
   29,04 di titolo + 36 di stacco + 50 di pulsante. Non uno in piu': sul sito
   il resto del blocco e' nascosto. */
.of-recensioni__titolo,
.of-prodotto__recensioni h2,
.of-prodotto__recensioni .woocommerce-Reviews-title{
  margin:0 0 36px;
  font-size:24px;
  font-weight:600;
  line-height:1.21;         /* 29,04 / 24 */
  letter-spacing:normal;    /* il token del tema mette -0.034em: il sito no */
  text-align:center;
  color:var(--wp--preset--color--dark);
}

/* La riga del pulsante: sul sito e' alta esattamente 50 e il pulsante sta al
   centro dei 1410 (misurato x=636, cioe' 51 + (1410 − 240) / 2). */
.of-recensioni__sommario{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* `gz-button-outline` misurato: 240x50, contorno 1px #ebebeb, raggio 30,
   15px/600 con interlinea 15 e crenatura −0,36px, fondo trasparente.
   La larghezza e' un minimo e non una gabbia: se un domani l'etichetta
   cambia lingua, il pulsante cresce invece di tagliare il testo. */
.of-recensioni__apri{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:240px;
  padding:16.5px 20px;
  gap:10px;
  display:inline-flex;
  border:1px solid #ebebeb;
  border-radius:var(--of-radius-bottone,30px);
  background:transparent;
  color:var(--wp--preset--color--dark);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:15px;
  letter-spacing:-0.36px;
  cursor:pointer;
  transition:border-color .25s,background .25s,color .25s;
}
.of-recensioni__apri:hover,
.of-recensioni__apri:focus-visible{
  border-color:var(--wp--preset--color--dark);
  background:var(--wp--preset--color--dark);
  color:#fff;
}

/*
 * «Sii il primo a lasciare una recensione.» NON si mostra qui: sul sito
 * `.woocommerce-noreviews` e' `display:none`, e il motivo si vede guardando la
 * colonna destra — quella frase compare già sotto il titolo del prodotto, dove
 * la stampa lo shortcode `[if_no_reviews]`. Mostrarla in due posti sarebbe un
 * doppione. Resta nel markup per chi legge la pagina senza fogli di stile.
 */
.of-recensioni__nessuna{display:none}

/* Il form: chiuso di suo (lo chiude lo script), e quando si apre e' separato
   da una riga sopra. Sul sito: `border-top py-24 mb-20`. */
.of-recensioni__form{
  margin:0 0 20px;
  padding:24px 0;
  border-top:1px solid var(--wp--preset--color--line,#ebebeb);
}
.of-recensioni__form .comment-reply-title{
  display:block;
  margin:0 0 16px;
  font-size:24px;
  font-weight:600;
  line-height:1.714;
  text-align:center;
  color:var(--wp--preset--color--dark);
}
.of-recensioni__form .must-log-in,
.of-recensioni__solo-clienti{
  margin:16px 0 24px;
  font-size:16px;
  line-height:1.714;
  text-align:center;
}

/* ------------------------------------------------------------------
   Il modulo della recensione, misurato sul sito rendendo la scheda da
   utente connesso: contenitore 600 con 16 di lato (568 di campi) al
   centro; etichette 16px/400 #444 con 8 sotto; stelle 24x24 a 3 di
   distanza, #c4c4c4 e #ff9c05 al passaggio (0,4s); campo 568x150,
   padding 20, bordo #ebebeb, angoli vivi, 14px; zona di caricamento alta
   138 con tratteggio #dedede e raggio 20; pulsanti affiancati a 15 di
   distanza, 50 di altezza e 55 di lato.
   ------------------------------------------------------------------ */
.of-recensioni__form #review_form,
.of-recensioni__form .comment-respond{
  max-width:600px;
  margin-inline:auto;
  padding-inline:16px;
  text-align:center;
}
.of-recensioni__form .comment-form{margin:0;text-align:center}
.of-recensioni__form .comment-form-author,
.of-recensioni__form .comment-form-email,
.of-recensioni__form .comment-form-comment,
.of-recensioni__form .comment-form-media{text-align:center}

.of-voto{margin:0 0 24px}
.of-voto__etichetta{
  display:block;
  margin:0 0 8px;
  font-size:16px;
  font-weight:400;
  line-height:27.424px;
  color:var(--wp--preset--color--text);
}
.of-voto__stelle{
  display:inline-flex;
  align-items:center;
  gap:3px;
  /* L'ordine nel markup e' 5→1: si ribalta qui, cosi' resta 1→5 a schermo e
     il selettore `~` puo' accendere le stelle prima di quella scelta. */
  flex-direction:row-reverse;
}
.of-voto__radio{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
  white-space:nowrap;
}
/* 0-2-0: deve battere `.of-recensioni__form label`, che dipingeva le stelle. */
.of-voto__stelle .of-voto__stella{
  display:inline-flex;
  margin:0;
  cursor:pointer;
  color:#c4c4c4;
  transition:.4s;
}
.of-voto__stella svg{width:24px;height:24px;fill:currentColor}
.of-voto__radio:checked + .of-voto__stella,
.of-voto__radio:checked ~ .of-voto__stella{color:#ff9c05}
.of-voto__stelle:hover .of-voto__stella{color:#c4c4c4}
.of-voto__stelle .of-voto__stella:hover,
.of-voto__stelle .of-voto__stella:hover ~ .of-voto__stella{color:#ff9c05}
.of-voto__radio:focus-visible + .of-voto__stella{
  outline:2px solid var(--wp--preset--color--dark);
  outline-offset:2px;
  border-radius:3px;
}

.of-allega{margin:0}
.of-allega__etichetta{
  display:block;
  margin:0 0 8px;
  font-size:16px;
  font-weight:400;
  line-height:27.424px;
  color:var(--wp--preset--color--text);
}
.of-allega__zona{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:138px;
  padding:0;
  border:1px dashed #dedede;
  border-radius:20px;
  background:#fff;
  transition:border-color .2s,background .2s;
}
.of-allega__zona[data-of-allega-sopra]{
  border-color:var(--wp--preset--color--dark);
  background:#fafafa;
}
/* Il campo copre tutto il riquadro: si clicca dove si vuole. */
.of-allega__campo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.of-allega__icona{width:40px;height:40px;color:var(--wp--preset--color--text)}
.of-allega__elenco{
  margin:0;
  font-size:14px;
  line-height:1.4;
  color:var(--wp--preset--color--text);
}
.of-allega__elenco:empty{display:none}

/* Gli allegati dentro una recensione pubblicata. */
.of-recensione__media{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
.of-recensione__media-voce{flex:none}
.of-recensione__media img,
.of-recensione__media video{
  display:block;
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:8px;
}

.of-recensioni__form .comment-form-rating{margin:0 0 24px}
.of-recensioni__form label{
  display:block;
  margin:0 0 8px;
  font-size:16px;
  font-weight:400;
  color:var(--wp--preset--color--text);
}
.of-recensioni__form .comment-form-comment label{line-height:16px}
.of-recensioni__form select,
.of-recensioni__form input[type="text"],
.of-recensioni__form input[type="email"],
.of-recensioni__form textarea{
  display:block;
  width:100%;
  padding:20px;
  border:1px solid #ebebeb;
  border-radius:0;
  background:#fff;
  font-family:inherit;
  font-size:14px;
  line-height:normal;
  color:var(--wp--preset--color--text);
  transition:all .4s;
}
.of-recensioni__form select,
.of-recensioni__form input[type="text"],
.of-recensioni__form input[type="email"]{height:50px;padding-block:0}
/* Con gli id: woocommerce.css scrive `.woocommerce #reviews #comment`
   (altezza 75) e `#respond p`, e a sole classi il campo restava alto 110 e senza stacco. */
.woocommerce .of-recensioni__form #respond #comment,
.of-recensioni__form #respond textarea{height:150px;min-height:110px;resize:vertical}
/* 2-2-1 contro `.woocommerce #review_form #respond p` (2-1-1), che metteva
   10 sotto ogni paragrafo, pulsanti compresi. */
.woocommerce .of-recensioni__form #review_form #respond .comment-form-author,
.woocommerce .of-recensioni__form #review_form #respond .comment-form-email,
.woocommerce .of-recensioni__form #review_form #respond .comment-form-comment{margin:0 0 26px}
.woocommerce .of-recensioni__form #review_form #respond .form-submit{margin:30px 0 0}

.of-recensioni__form .form-submit{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  margin:30px 0 0;
}
/* Due id per battere `#respond input#submit` di woocommerce.css (2-1-1). */
.of-recensioni__form #respond .of-recensioni__invia,
.of-recensioni__form .of-recensioni__annulla{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:50px;
  padding:16.5px 55px;
  border:1px solid #111;
  border-radius:var(--of-radius-bottone,30px);
  background:#111;
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:15px;
  letter-spacing:-0.024em;
  cursor:pointer;
  transition:all .25s;
}
.of-recensioni__form .of-recensioni__annulla{
  border-color:#ebebeb;
  background:transparent;
  color:var(--wp--preset--color--dark);
}
.of-recensioni__form #respond .of-recensioni__invia:hover{background:var(--wp--preset--color--primary);border-color:var(--wp--preset--color--primary)}
.of-recensioni__form .of-recensioni__annulla:hover{border-color:#111}

/* L'elenco, quando ci sono recensioni. */
.of-recensioni__elenco .commentlist{margin:36px 0 0;padding:0;list-style:none}
.of-recensioni__elenco .commentlist li{margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid var(--wp--preset--color--line,#ebebeb)}
.of-recensioni__elenco .commentlist li:last-child{margin-bottom:0;border-bottom:0}

/* --- visualizzati di recente ---
   Misurato sul sito: contenitore x=51 larg. 1410 con 80px di respiro sopra,
   titolo 35,4849px/600 (interlinea 42,9367) centrato e a 10px dal
   sottotitolo, sottotitolo 16px/400 #444 a 35px dalla fila. */
.of-visti{
  margin-block:0;
  padding-block:80px 0;
  /* Sul sito il blocco e' staccato da una riga sottile. */
  border-top:1px solid #ebebeb;
}
/*
 * Lo stacco dal blocco sopra. Misurato sul sito: fra la fine delle recensioni
 * e il titolo «Visualizzati di recente» ci sono **199px** — 80 di respiro del
 * blocco stesso (il `padding` qui sopra) piu' 119 che Elementor mette attorno
 * al contenitore delle recensioni. Con i soli 80 il blocco saliva di 118 e la
 * pagina finiva troppo presto.
 *
 * I due pezzi restano distinti invece di diventare un numero magico solo.
 */
.of-prodotto__recensioni{margin-block-end:118px}
.of-visti__testata{text-align:center}
/* 35,48px/600: e' la scala dei titoli di sezione del sito, la stessa dei
   blocchi della homepage. */
.of-visti__titolo{
  margin:0 0 10px;
  font-size:35.4849px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;   /* il token del tema mette -0.034em: il sito no */
  color:var(--wp--preset--color--dark);
}
.of-visti__sottotitolo{
  margin:0 0 35px;
  font-size:16px;
  font-weight:400;
  line-height:1.714;
  color:var(--wp--preset--color--text);
}

/* Lo stato vuoto: alla prima visita non c'e' niente da mostrare, e sul sito
   il blocco esce comunque con questa frase e il ritorno al catalogo. */
.of-visti__vuoto{text-align:center}
.of-visti__vuoto p{margin:16px 0;font-size:16px;line-height:1.714}
.woocommerce .of-visti__vuoto a.of-visti__torna,
.of-visti__torna{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* 145x50 sul sito: 16,5 20 di respiro, bordo 1px, 15px/600 stretto. */
  min-height:50px;
  margin:20px 0 0;
  padding:16.5px 20px;
  border:1px solid var(--wp--preset--color--dark);
  border-radius:var(--of-radius-bottone,30px);
  background:var(--wp--preset--color--dark);
  color:#fff;
  font-size:15px;
  font-weight:600;
  line-height:15px;
  letter-spacing:-0.024em;
  text-decoration:none;
}
.woocommerce .of-visti__vuoto a.of-visti__torna:hover,
.of-visti__torna:hover{background:var(--wp--preset--color--primary);color:var(--of-testo-su-primario,#fff)}
.of-visti__fila{
  display:flex;
  flex-wrap:nowrap;
  gap:30px;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.of-visti__fila::-webkit-scrollbar{display:none}
/* Le card sono quelle del catalogo: qui si dice solo quante per volta.
   QUATTRO, non cinque: il widget del sito porta `slides_to_show: 4`, e
   misurando la fila le card sono larghe 330 con 30 di distacco —
   4 x 330 + 3 x 30 = 1410, cioe' la larghezza esatta del contenitore. */
.of-visti__fila > li.of-card{
  flex:0 0 calc((100% - 3 * 30px) / 4);
  width:auto;
  padding:0;
  margin:0;
  scroll-snap-align:start;
}

/* ============================================================
   Schermo stretto
   ============================================================ */
/* Fino a 768 restano le due colonne e le misure del computer; il titolo
   resta a 32 a ogni larghezza, come sul sito (misurato a 1024, 800, 375). */
@media(max-width:1024px){
  .of-visti__fila > li.of-card{flex-basis:calc((100% - 2 * 30px) / 3)}
}

@media(max-width:767px){
  /* Una colonna; la navigazione fra prodotti sparisce e le briciole prendono
     la riga (sul sito: due righe, e la galleria 26 sotto). */
  .of-prodotto{grid-template-columns:minmax(0,1fr)}
  .of-prodotto__sopra{padding-block-end:26px}
  .of-prodotto__sopra .of-briciole{flex:1 1 auto}
  .of-prodotto__navigazione{display:none}
  .of-prodotto.product .of-prodotto__riepilogo p.price{font-size:24px}
  .of-visti__fila{gap:15px}
  .of-visti__fila > li.of-card{flex-basis:calc((100% - 15px) / 2)}
}

/* Il cuore accanto al carrello: 50x50 tondo col filo di bordo, come sul sito.
   Tre classi per battere `.woocommerce a.button` — lo stesso inganno della
   card: quel pulsante porta anche lui la classe `button`. */
.woocommerce div.product .of-prodotto__riepilogo form.cart .wcboost-wishlist-button,
.of-prodotto__riepilogo .of-prodotto__preferiti .wcboost-wishlist-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  gap:10px;
  width:50px;
  height:50px;
  margin:0;
  padding:0;
  /* 13px/600: il plugin dimensiona l'icona in `em`, quindi qui il corpo non e'
     tipografia, e' la misura del cuore. */
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.312px;
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--of-radius-bottone,30px);
  background:none;
  color:var(--wp--preset--color--dark);
  transition:background .25s,color .25s,border-color .25s;
}
.woocommerce div.product .of-prodotto__riepilogo form.cart .wcboost-wishlist-button:hover{
  background:var(--wp--preset--color--dark);
  border-color:var(--wp--preset--color--dark);
  color:#fff;
}
.of-prodotto__riepilogo form.cart .wcboost-wishlist-button > *:not(.wcboost-wishlist-button__icon){
  position:absolute;
  width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);border:0;
}
.of-prodotto__riepilogo form.cart .wcboost-wishlist-button__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0;
}
.of-prodotto__riepilogo form.cart .wcboost-wishlist-button__icon svg{width:16px;height:16px}

/* «−» e «+» della quantita': 45x48 con l'icona da 11 al centro (glozin:
   `glozin-qty-button`, padding 0 17). */
.of-qta__passo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 45px;
  width:45px;
  height:48px;
  padding:0 17px;
  border:0;
  background:none;
  color:var(--wp--preset--color--dark);
  cursor:pointer;
}
.of-qta__passo svg{display:block;width:11px;height:11px}

/* Il blocco dentro una pagina (Lista dei desideri): senza il respiro e il
   filo che lo staccano dalle recensioni sulla scheda — sul sito il titolo
   parte subito, 40 sotto la lista. */
.of-visti.of-visti--pagina{padding-block:0;border-top:0}


/* ============================================================
   Scheda prodotto: le varianti del pannello (inc/prodotto/scheda-opzioni.php)
   Di serie: griglia di due, ingrandimento dentro il riquadro, accordion.
   ============================================================ */

/* --- ingrandimento al passaggio --- */
.of-galleria__link--zoom{position:relative;overflow:hidden;border-radius:var(--of-radius-card);cursor:zoom-in}
.of-galleria__link--zoom-bounding img{transition:transform .2s ease-out}
.of-galleria__lente{
  position:absolute;z-index:3;
  width:160px;height:160px;
  margin:-80px 0 0 -80px;
  border:2px solid #fff;
  box-shadow:0 5px 20px rgb(0 0 0 / .2);
  background-repeat:no-repeat;
  pointer-events:none;
}
.of-galleria__lente--magnifier{border-radius:50%}
@media(prefers-reduced-motion:reduce){.of-galleria__link--zoom-bounding img{transition:none}}

/* --- disposizioni della galleria --- */
.of-galleria--grid-1 .of-galleria__voce{flex-basis:100%}
.of-galleria--stacked .of-galleria__voce:first-child{flex-basis:100%}
/* Con le miniature: una foto grande per volta, le piccole accanto o sotto. */
.of-galleria--con-miniature .of-galleria__voce{display:none;flex-basis:100%}
.of-galleria--con-miniature .of-galleria__voce.is-attiva{display:block}
.of-galleria__miniature{
  display:flex;gap:10px;
  margin:10px 0 0;padding:0;list-style:none;
  overflow-x:auto;
}
.of-galleria__miniatura{
  display:block;width:80px;padding:0;
  border:1px solid transparent;border-radius:var(--of-radius-card);
  background:none;cursor:pointer;opacity:.6;
  transition:opacity .2s,border-color .2s;
}
.of-galleria__miniatura img{display:block;width:100%;height:auto;border-radius:var(--of-radius-card)}
.of-galleria__miniatura.is-attiva,
.of-galleria__miniatura:hover{opacity:1;border-color:var(--wp--preset--color--dark)}
@media(min-width:1025px){
  .of-galleria--miniature-sinistra.of-galleria--con-miniature{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;align-items:start}
  .of-galleria--miniature-sinistra .of-galleria__miniature{grid-row:1;grid-column:1;flex-direction:column;margin:0;overflow:visible}
  .of-galleria--miniature-sinistra .of-galleria__griglia{grid-row:1;grid-column:2}
}
.of-galleria--hidden-thumbnails .of-galleria__miniature{display:none}

/* --- su telefono la galleria scorre di lato: foto all'85% con la seguente
       che spunta, 10 fra l'una e l'altra, e la fila che arriva al bordo dello
       schermo (sul sito: 293 di 345, margine destro -15). Le frecce se il
       pannello le chiede (sul sito non si vedono) --- */
@media(max-width:767px){
  .of-galleria .of-galleria__griglia{
    flex-wrap:nowrap;
    gap:10px;
    margin-inline-end:-15px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .of-galleria .of-galleria__griglia::-webkit-scrollbar{display:none}
  .of-galleria .of-galleria__voce,
  .of-galleria--con-miniature .of-galleria__voce{display:block;flex:0 0 calc((100% - 15px) * .85)}
  .of-galleria--frecce .of-galleria__griglia{scroll-snap-type:x mandatory}
  .of-galleria--frecce .of-galleria__voce{scroll-snap-align:start}
  .of-galleria__miniature{display:none}
  .of-galleria__freccia{
    position:absolute;inset-block-start:50%;z-index:3;
    display:grid;place-items:center;
    width:36px;height:36px;margin-block-start:-18px;padding:0;
    border:0;border-radius:50%;
    background:var(--wp--preset--color--background);color:var(--wp--preset--color--dark);
    box-shadow:0 2px 10px rgb(0 0 0 / .1);cursor:pointer;
  }
  .of-galleria__freccia--prima{inset-inline-start:10px}
  .of-galleria__freccia--dopo{inset-inline-end:10px}
}
@media(min-width:768px){.of-galleria__freccia{display:none}}

/* Il cuore sulla foto (solo su telefono): 50x50 bianco col filo #ebebeb, a
   15 dall'angolo; quello accanto al carrello, li', sparisce. */
.of-galleria__preferiti{display:none}
@media(max-width:767px){
  .of-galleria__preferiti{position:absolute;inset-block-start:15px;inset-inline-end:15px;z-index:2;display:flex}
  .woocommerce div.product .of-galleria__preferiti .wcboost-wishlist-button{
    display:inline-flex;align-items:center;justify-content:center;
    width:50px;height:50px;margin:0;padding:0;
    font-size:13px;
    border:1px solid var(--wp--preset--color--border);
    border-radius:var(--of-radius-bottone,30px);
    background:#fff;color:var(--wp--preset--color--dark);
    transition:background .25s,color .25s,border-color .25s;
  }
  .woocommerce div.product .of-galleria__preferiti .wcboost-wishlist-button:hover{background:var(--wp--preset--color--dark);border-color:var(--wp--preset--color--dark);color:#fff}
  .of-galleria__preferiti .wcboost-wishlist-button > *:not(.wcboost-wishlist-button__icon){
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;
  }
  .of-galleria__preferiti .wcboost-wishlist-button__icon{display:inline-flex;margin:0}
  .of-galleria__preferiti .wcboost-wishlist-button__icon svg{width:14px;height:14px}
  .woocommerce div.product .of-prodotto__riepilogo form.cart .wcboost-wishlist-button{display:none}
}

/* --- le linguette (Scheda prodotto → Schede → «Schede») --- */
.of-linguette{margin-block-start:30px}
.of-linguette--largo{margin-block:50px 0}
.of-linguette__elenco{display:flex;flex-wrap:wrap;gap:30px;border-bottom:1px solid var(--wp--preset--color--border)}
.of-linguette__linguetta{
  padding:0 0 12px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;background:none;
  font:inherit;font-size:16px;font-weight:600;color:var(--wp--preset--color--text-muted);cursor:pointer;
}
.of-linguette__linguetta[aria-selected="true"]{color:var(--wp--preset--color--dark);border-bottom-color:var(--wp--preset--color--dark)}
.of-linguette__pannello{padding-block-start:25px}
.of-linguette--pronte .of-linguette__pannello[data-of-nascosto]{display:none}
.of-accordion--largo{margin-block-start:50px}

/* --- punti di forza: un nastro che scorre --- */
.of-forza{overflow:hidden;margin-block:20px;padding-block:10px;border-block:1px solid var(--wp--preset--color--border)}
.of-forza__nastro{display:flex;width:max-content;animation:of-forza var(--of-forza-durata,16s) linear infinite}
.of-forza__fila{display:flex;align-items:center;gap:20px;padding-inline-end:20px;white-space:nowrap;font-size:14px;color:var(--wp--preset--color--dark)}
.of-forza__immagine{width:12px;height:12px;object-fit:contain}
.of-forza__punto{width:5px;height:5px;border-radius:50%;background:var(--wp--preset--color--primary)}
@keyframes of-forza{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.of-forza__nastro{animation:none}}

/* --- spedizione e promozioni: a elenco invece che a griglia --- */
@media(min-width:600px){ .of-prodotto__promozioni--elenco{grid-template-columns:1fr} }
.of-promozione{display:flex;align-items:center;gap:12px}
.of-promozione__immagine{flex:none;width:24px;height:24px;object-fit:contain}

/* --- offerta a tempo sotto il prezzo --- */
.of-conto-offerta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block:10px 15px;font-size:14px}
.of-conto-offerta__etichetta{color:var(--wp--preset--color--text)}
.of-conto-offerta .of-campagna__conto{display:inline-flex;gap:8px;font-weight:600;color:var(--wp--preset--color--primary)}
.of-conto-offerta--v2 .of-campagna__cifra{
  display:inline-flex;flex-direction:column;align-items:center;
  min-width:52px;padding:6px 8px;border-radius:var(--of-radius-sm);
  background:var(--wp--preset--color--surface);color:var(--wp--preset--color--dark);
}

/* --- consigliati e correlati: colonne dal pannello --- */
.of-fila-prodotti .of-visti__fila > li.of-card{flex-basis:calc((100% - (var(--of-fila-computer,4) - 1) * 30px) / var(--of-fila-computer,4))}
@media(max-width:1199px){
  .of-fila-prodotti .of-visti__fila > li.of-card{flex-basis:calc((100% - (var(--of-fila-tablet,3) - 1) * 30px) / var(--of-fila-tablet,3))}
}
@media(max-width:767px){
  .of-fila-prodotti .of-visti__fila > li.of-card{flex-basis:calc((100% - (var(--of-fila-telefono,2) - 1) * 15px) / var(--of-fila-telefono,2))}
  /* «Schede a larghezza automatica nei caroselli»: si vede un pezzo della prossima. */
  .of-fila-prodotti--auto .of-visti__fila > li.of-card{flex-basis:70%}
}

/* --- forma dei campioni a etichetta (WCBoost Variation Swatches) --- */
.of-campioni--round .wcboost-variation-swatches--label .wcboost-variation-swatches__item{border-radius:30px}
.of-campioni--rounded .wcboost-variation-swatches--label .wcboost-variation-swatches__item{border-radius:5px}
.of-campioni--square .wcboost-variation-swatches--label .wcboost-variation-swatches__item{border-radius:0}