/**
 * Banco - Scheda prodotto.
 *
 * Caricato solo sulla scheda prodotto e solo quando la nuova impaginazione e'
 * attiva: ogni regola e' agganciata a body.banco-pdp-attiva, quindi a interruttore
 * spento la pagina servita ai clienti non cambia di una riga.
 *
 * SPECIFICITA' - lo snippet Code Snippets id 15 stampa il suo <style> nel footer,
 * quindi arriva dopo questo foglio. Dove serve vincere si usa un selettore piu'
 * specifico (body.classe + due classi), non una rincorsa di !important.
 */

/* ------------------------------------------------------------------ *
 *  Griglia: tre colonne vere al posto delle due del tema
 * ------------------------------------------------------------------ */

/* Proporzioni: la colonna centrale e' la piu' larga perche' e' quella che deve
   far leggere le caratteristiche su due colonne senza mandare a capo i valori.
   L'immagine resta grande abbastanza da mostrare il prodotto: su questo catalogo
   sono scatole e flaconi, non fotografie da guardare a schermo intero.

   La riga Bootstrap del tema diventa una griglia con aree nominate. Serve perche'
   su telefono l'ordine non e' quello del documento: il titolo va prima della
   galleria e le schede dopo il box acquisto. Con le aree si riordina senza
   duplicare markup. */
body.banco-pdp-attiva .rbt-store-content-top-thumbnail-area {
  display: grid;
  grid-template-columns: minmax(0, 28fr) minmax(0, 47fr) minmax(0, 25fr);
  grid-template-areas:
    "galleria identita acquisto"
    "galleria schede   acquisto";
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
  margin-left: 0;
  margin-right: 0;
}

/* Le colonne Bootstrap non devono piu' decidere larghezze: le decide la griglia.
   Vale anche per la colonna galleria, che resta del tema. */
body.banco-pdp-attiva .rbt-store-content-top-thumbnail-area > * {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}

body.banco-pdp-attiva .rbt-store-content-top-thumbnail-area > .col-xl-7 {
  grid-area: galleria;
}

body.banco-pdp-attiva [data-banco-area="identita"] { grid-area: identita; }
body.banco-pdp-attiva [data-banco-area="schede"]   { grid-area: schede; }
body.banco-pdp-attiva [data-banco-area="acquisto"] { grid-area: acquisto; }

/* Rete di sicurezza: se il tema o un plugin infila un altro elemento nella riga,
   occupa tutta la larghezza invece di finire fuori posto in una cella. */
body.banco-pdp-attiva .rbt-store-content-top-thumbnail-area > *:not([data-banco-area]):not(.col-xl-7) {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ *
 *  Larghezza della scheda
 * ------------------------------------------------------------------ */

/* Il tema tiene i contenuti dentro un contenitore da ~1466px: su uno schermo da
   1920 restano oltre 400px di margini vuoti mentre le tre colonne stanno strette.
   Qui il contenitore si allarga, ma SOLO dentro il corpo della pagina prodotto:
   intestazione e piede restano larghi come su tutte le altre pagine, altrimenti
   passando da una pagina all'altra il menu si sposterebbe.

   Il limite in vw lascia sempre un margine laterale sui monitor molto larghi.

   L'!important qui non e' pigrizia: un foglio in linea del tema (opzioni Redux)
   dichiara .container{max-width:1500px!important} sopra i 1500px, ripetuto quattro
   volte. Fra due dichiarazioni importanti decide la specificita', e questa e' piu'
   specifica. Senza, la regola viene ignorata: verificato in pagina. */
body.banco-pdp-attiva #main .container {
  max-width: min(1760px, 94vw) !important;
}

/* ------------------------------------------------------------------ *
 *  Colonna identita': testo libero, non piu' una card
 * ------------------------------------------------------------------ */

/* Il riquadro con bordo e sfumatura resta, ma passa al box acquisto: al centro
   la card farebbe da contenitore ad altre card. */
body.banco-pdp-attiva .banco-pdp-colonna.rbt-single-product-content {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* La striscia verticale di miniature che lo snippet id 15 costruisce a sinistra
   della foto e' un doppione da quando ci sono le miniature delle varianti: su
   questo catalogo sono venti scatti quasi identici dello stesso flacone, e si
   prende 92px di larghezza. La galleria resta sfogliabile con le frecce.
   Non si puo' spegnere alla fonte perche' lo snippet vive in Code Snippets, che
   il firewall dell'hosting non lascia salvare: sparira' col passo 6. */
body.banco-pdp-attiva .rbt-single-product-media-area .svb-product-thumbs {
  /* Lo snippet dichiara display:flex con lo stesso peso e uscendo dopo vincerebbe:
     serve un antenato in piu'. */
  display: none !important;
}

/* CONSEGUENZA DA NON DIMENTICARE - nascondendo la striscia si toglie al contenitore
   della foto l'unico riferimento di larghezza che aveva: resta un solo elemento
   flessibile con base automatica dentro un contenitore che a sua volta si dimensiona
   sul contenuto. Il calcolo gira a vuoto e Chrome lo blocca a 33.554.432px, in
   larghezza e di conseguenza in altezza, perche' la galleria e' quadrata. Effetto a
   schermo: su telefono la pagina appare vuota, perche' tutto il resto viene spinto
   milioni di pixel piu' in basso.
   Lo snippet prevede il caso "senza miniature", ma lo lega a una classe che continua
   ad esserci anche quando la striscia e' nascosta, quindi non scatta. Qui la
   larghezza si dichiara e basta: nessun calcolo circolare possibile. */
body.banco-pdp-attiva .rbt-single-product-media-area .rbt-medea-lg-img-area {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Marchio: targhetta sopra il titolo, non piu' sulla foto.
   Il perche' sta nel template accanto al codice che la stampa. Qui la parte visiva.

   La targhetta e' bianca DI PROPOSITO. I loghi del catalogo sono rettangoli pieni su
   fondo chiaro - misurati, zero trasparenza - quindi il bianco arriva comunque: o lo
   si subisce come toppa, o lo si dichiara come targhetta. Dichiarato, con un filo di
   bordo e un'ombra corta, si legge come un marchio applicato sulla scheda.

   La fusione in moltiplicazione non tocca il logo (moltiplicare per bianco lascia
   tutto com'e') ma fa sparire il fondo sporco: i grigi vicini al bianco e gli aloni
   della compressione, che senza si vedrebbero come un rettangolo dentro la
   targhetta. */
/* La targhetta vive in cima alla scheda CARATTERISTICHE, a destra del titolo di
   quella scheda: quella riga esisteva gia' ed era vuota a destra, quindi il marchio
   ora non costa altezza. Prima aveva una riga tutta sua sopra il titolo del
   prodotto: 48px in una colonna che vogliamo tenere corta. */
body.banco-pdp-attiva .banco-pdp-marchio {
  margin: 0;
  line-height: 0;
}

body.banco-pdp-attiva .banco-pdp-marchio__targhetta {
  /* Le posizioni assolute dello snippet id 15 vanno annullate: la stessa classe li'
     serviva a incollare il logo su un angolo della foto. */
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 0;
  max-width: 150px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid rgba(15, 25, 45, .12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  line-height: 0;
  transition: box-shadow .18s ease, transform .18s ease;
}

body.banco-pdp-attiva a.banco-pdp-marchio__targhetta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .34);
}

/* 18px di logo + 8 di imbottitura + 2 di bordo = 28px di targhetta: la stessa
   altezza delle righe delle caratteristiche qui sotto, cosi' l'intestazione resta
   una riga e non un gradino. */
body.banco-pdp-attiva .banco-pdp-marchio__targhetta img {
  max-height: 18px;
  width: auto;
  mix-blend-mode: multiply;
}

/* Marca senza logo: resta il nome, nella stessa targhetta. Scritto scuro sul bianco,
   cosi' la forma della scheda non cambia da un prodotto all'altro. */
body.banco-pdp-attiva .banco-pdp-marchio__nome {
  color: #0f192d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Lo snippet id 15 inietta un proprio logo in cima al riquadro informazioni quando
   non ne trova uno li' dentro. Ora il nostro sta sulla foto, quindi il suo e' un
   doppione: si nasconde. Sparira' da solo quando lo snippet verra' alleggerito. */
body.banco-pdp-attiva .rbt-single-product-content > .svb-product-brand {
  display: none;
}

body.banco-pdp-attiva .banco-pdp-colonna .rbt-card-title {
  margin: 0;
  padding-right: 0;
  font-size: clamp(20px, 1.45vw, 26px);
  line-height: 1.22;
}

body.banco-pdp-attiva .banco-pdp-sku {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
}

body.banco-pdp-attiva .banco-pdp-sku__etichetta {
  color: rgba(238, 244, 252, .55);
  text-transform: uppercase;
  letter-spacing: .04em;
}

body.banco-pdp-attiva .banco-pdp-sku__valore {
  color: #eef4fc;
  font-weight: 700;
}

body.banco-pdp-attiva .banco-pdp-intro {
  margin-top: 12px;
}

body.banco-pdp-attiva .banco-pdp-intro p {
  margin: 0;
  color: rgba(238, 244, 252, .78);
  font-size: 14px;
  line-height: 1.55;
}

body.banco-pdp-attiva .banco-pdp-colonna .woocommerce-product-rating {
  margin: 10px 0 0;
}

/* ------------------------------------------------------------------ *
 *  Colonna acquisto
 * ------------------------------------------------------------------ */

/* La colonna si allunga quanto la riga, cosi' il box interno ha spazio per
   scorrere insieme alla pagina invece di restare inchiodato in alto. */
body.banco-pdp-attiva [data-banco-area="acquisto"] {
  align-self: stretch;
}

body.banco-pdp-attiva .banco-pdp-box {
  padding: 18px;
  border: 1px solid rgba(62, 131, 197, .28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(21, 32, 56, .9), rgba(11, 18, 34, .94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .2);
}

@media (min-width: 1200px) {
  body.banco-pdp-attiva .banco-pdp-box {
    position: sticky;
    top: 90px;
  }
}

/* Nel box stretto i controlli vanno a piena larghezza, senza colonne mezze vuote. */
body.banco-pdp-attiva .banco-pdp-box .variations_form,
body.banco-pdp-attiva .banco-pdp-box .single_variation_wrap,
body.banco-pdp-attiva .banco-pdp-box .woocommerce-variation-add-to-cart,
body.banco-pdp-attiva .banco-pdp-box .product-btn-grp {
  width: 100%;
}

body.banco-pdp-attiva .banco-pdp-box .product-btn-grp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.banco-pdp-attiva .banco-pdp-box .rbt-info-box {
  margin-top: 14px;
}

/* "Reimposta tutto" e' un'azione secondaria: il tema le da' un pulsante pieno che
   si prende una riga intera accanto al prezzo. Diventa un collegamento discreto. */
/* Selettore lungo per necessita': sullo sfondo di questo pulsante insistono tre
   regole importanti (tema, foglio in linea del sito, snippet id 15), la piu' forte
   delle quali e' body:not(.home):not(.wp-admin) .rbt-btn. Serve superarla. */
body.banco-pdp-attiva .banco-pdp-box .prd-info-section a.reset_variations,
body.banco-pdp-attiva .banco-pdp-box .prd-id-text a.reset_variations {
  align-self: center;
  min-height: 0;
  height: auto;
  /* Lo snippet id 15 dichiara sfondo e imbottitura con !important: per superarlo
     serve altrettanto. La specificita' qui e' gia' piu' alta, quindi vince. */
  padding: 0 !important;
  border: 0;
  background: none !important;
  box-shadow: none;
  color: rgba(238, 244, 252, .55) !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: underline;
}

body.banco-pdp-attiva .banco-pdp-box .prd-info-section a.reset_variations:hover,
body.banco-pdp-attiva .banco-pdp-box .prd-id-text a.reset_variations:hover {
  color: #eef4fc;
  background: none;
}

/* Disponibilita': una riga di testo, non un blocco con margini propri. */
body.banco-pdp-attiva .banco-pdp-box .woocommerce-variation-availability,
body.banco-pdp-attiva .banco-pdp-box p.stock {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
}

/* WooCommerce stampa il prezzo della variante scelta dentro il riquadro varianti,
   mentre il prezzo grande in cima al box gia' lo mostra aggiornato: due importi
   nella stessa scheda si leggono come un errore. Stesso criterio gia' adottato sul
   sito per il prezzo del tema sui prodotti semplici. */
/* La regola del sito e' ...woocommerce-variation-price:not(:empty): quel :not()
   le da' lo stesso peso di un selettore piu' corto, e uscendo dopo vincerebbe.
   L'antenato .single_variation_wrap sposta l'ago. */
body.banco-pdp-attiva .banco-pdp-box form.variations_form .single_variation_wrap .woocommerce-variation-price {
  display: none !important;
}

/* La disponibilita' della variante viene ricopiata accanto al selettore (vedi
   scheda-prodotto.js). L'originale resta dov'e' - WooCommerce ci riscrive dentro a
   ogni scelta - ma non deve piu' occupare spazio: era lui a far sobbalzare la
   scheda. Misurato su SK0203: alla scelta di un colore il blocco cresceva di 12px e
   il pulsante scendeva, per tornare su un istante dopo. Nascosto qui, WooCommerce
   continua a lavorare come sempre e l'altezza non cambia mai. */
body.banco-pdp-attiva .banco-pdp-box .single_variation_wrap .woocommerce-variation-availability {
  display: none !important;
}

/* Il blocco variante e' vuoto a schermo - prezzo e disponibilita' stanno altrove -
   ma il sito gli mette 12px di margine sopra. A riposo quel margine si fonde con lo
   spazio vicino e non si vede; mentre WooCommerce apre il blocco con la sua
   animazione, pero', gli applica overflow:hidden, i margini smettono di fondersi e
   diventano spazio vero. Misurato alla prima scelta di una variante: il pulsante
   scendeva di 12px e risaliva a fine animazione. Azzerato il margine, l'animazione
   non muove piu' niente e a riposo la scheda resta identica (verificato: 81px prima
   e dopo).
   Selettore lungo per necessita': la regola del sito e'
   body.single-product form.variations_form .woocommerce-variation.single_variation
   con !important, e va superata. */
body.banco-pdp-attiva .banco-pdp-box form.variations_form .single_variation_wrap .woocommerce-variation.single_variation {
  margin: 0 !important;
}

/* Sul telefono il riquadro sta stretto: meno imbottitura, stessa leggibilita'. */
@media (max-width: 600px) {
  body.banco-pdp-attiva .banco-pdp-box {
    padding: 14px;
  }
}

/* ------------------------------------------------------------------ *
 *  Da 768 a 1199px: TABLET, due colonne
 * ------------------------------------------------------------------ */

/* PERCHE' ESISTE QUESTA FASCIA - prima si passava dalle tre colonne alla colonna
   unica del telefono di colpo, sotto i 1200px. Un tablet in orizzontale sta quasi
   sempre fra 962 e 1180px: si ritrovava la pagina del telefono, con la foto larga
   quanto lo schermo. E' il difetto segnalato dal tablet del negozio.

   PERCHE' DUE E NON TRE - misurato a 1024px con le proporzioni del desktop: la
   galleria scendeva a 246px, cioe' un francobollo, e il box acquisto a 219. Con due
   colonne la foto sta a 544px e il box a 333: si legge tutto, e l'impianto e' quello
   del desktop, con l'acquisto a destra sempre in vista.

   Il box acquisto occupa la colonna destra per tutte e tre le righe, cosi' resta in
   alto accanto al titolo. A sinistra l'ordine e' quello commerciale: prima si capisce
   cosa si sta guardando, poi lo si vede, poi si leggono i dettagli. */
@media (min-width: 768px) and (max-width: 1199px) {
  body.banco-pdp-attiva .rbt-store-content-top-thumbnail-area {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    /* Le schede prendono tutta la riga, non la sola colonna di sinistra.
       PERCHE': dentro la colonna stretta la tabella delle caratteristiche non aveva
       spazio per due colonne e passava a una sola, allungando la scheda e mandando a
       capo i valori. A tutta larghezza le due colonne tornano - misurato a 1024:
       450px l'una invece di 253 - e la pagina si accorcia.
       Il box acquisto resta in alto a destra, accanto a titolo e foto: e' li' che
       serve, non accanto alle specifiche. */
    grid-template-areas:
      "identita acquisto"
      "galleria acquisto"
      "schede   schede";
    row-gap: 20px;
  }

  body.banco-pdp-attiva .banco-pdp-box {
    position: static;
  }

  /* La foto si allinea a sinistra come il titolo e la descrizione che stanno sopra,
     nella stessa colonna. Centrata lasciava un rientro di settanta pixel rispetto al
     testo e la colonna non si leggeva piu' come un blocco solo. In colonna unica -
     sotto i 768px - resta invece centrata, perche' li' non ha un testo di fianco a
     cui allinearsi. */
  body.banco-pdp-attiva .rbt-single-product-media-area {
    /* !important perche' il tetto di 420px, che sta piu' in basso nel foglio,
       dichiara i margini automatici e vincerebbe per ordine di scrittura. */
    margin-left: 0 !important;
  }
}

/* ------------------------------------------------------------------ *
 *  Sotto i 768px: colonna unica, ordine commerciale
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
  body.banco-pdp-attiva .rbt-store-content-top-thumbnail-area {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identita"
      "galleria"
      "acquisto"
      "schede";
    row-gap: 20px;
  }

  body.banco-pdp-attiva .banco-pdp-box {
    position: static;
  }

}

/* ------------------------------------------------------------------ *
 *  Box acquisto: i controlli del tema erano disegnati per una colonna larga
 * ------------------------------------------------------------------ */

/* Il tema mette su una sola riga etichetta+menu, "Reimposta tutto" e prezzo:
   348px richiesti dentro 283px disponibili, e il menu Colore finiva schiacciato
   a 36px. Nella colonna stretta gli stessi elementi vanno incolonnati. */
body.banco-pdp-attiva .banco-pdp-box .prd-info-section {
  /* display esplicito: sotto una certa larghezza il tema rende questo contenitore
     a blocco, e senza flex la proprieta' order del prezzo non ha alcun effetto.
     Verificato in emulazione telefono: il prezzo finiva sotto il selettore. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* Il prezzo e' l'informazione principale del box: va in cima, non di fianco. */
body.banco-pdp-attiva .banco-pdp-box .banco-price {
  order: -1;
  margin: 0;
}

body.banco-pdp-attiva .banco-pdp-box .prd-id-text {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Il menu si prende lo spazio che serve, non tutta la riga: accanto ci sta la
   pastiglia della disponibilita'. */
body.banco-pdp-attiva .banco-pdp-box .variations select,
body.banco-pdp-attiva .banco-pdp-box .rbt-variation-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 130px;
  max-width: 100%;
}

/* Riga del selettore: etichetta, menu e stato, con lo stato spinto a destra. */
body.banco-pdp-attiva .banco-pdp-box .prd-id-text {
  flex-wrap: wrap;
}

/* Il LED sta attaccato al menu, non spinto al bordo del riquadro: da solo in fondo
   alla riga non si capisce a che cosa si riferisca. */
body.banco-pdp-attiva .banco-pdp-box .banco-pdp-stato {
  margin-left: 0;
}

/* Riga del selettore: etichetta, menu, stato e "Reimposta tutto" in coda. */
body.banco-pdp-attiva .banco-pdp-box .prd-id-text {
  gap: 10px;
  row-gap: 6px;
}

/* WooCommerce nasconde "Reimposta tutto" con visibility finche' non e' stata
   scelta una variante: invisibile ma ingombrante. Nella colonna stretta lo si
   toglie dal flusso, e ricompare da solo quando WooCommerce lo rende visibile. */
body.banco-pdp-attiva .banco-pdp-box .reset_variations[style*="hidden"] {
  display: none;
}

/* Tre metodi di pagamento affiancati in 279px tagliavano le diciture. */
body.banco-pdp-attiva .banco-pdp-box .svb-payment-methods {
  grid-template-columns: 1fr;
}

/* ------------------------------------------------------------------ *
 *  Card centrali: caratteristiche e assistenza
 * ------------------------------------------------------------------ */

/* Lo spazio fra identita' e schede sta qui e non nel row-gap della griglia:
   quando le schede non ci sono (prodotto senza attributi visibili) non deve
   restare un vuoto sotto l'introduzione. */
body.banco-pdp-attiva [data-banco-area="schede"] {
  margin-top: 20px;
}

body.banco-pdp-attiva .banco-pdp-scheda {
  padding: 14px 16px 16px;
  border: 1px solid rgba(62, 131, 197, .28);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(21, 32, 56, .9), rgba(11, 18, 34, .94));
}

body.banco-pdp-attiva .banco-pdp-scheda + .banco-pdp-scheda {
  margin-top: 12px;
}

body.banco-pdp-attiva .banco-pdp-scheda__titolo {
  margin: 0 0 10px;
  color: #eef4fc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Coppie etichetta/valore su due colonne: il formato piu' compatto per un elenco
   di voci corte.

   LE COLONNE LE DECIDE LO SPAZIO, NON LA LARGHEZZA DELLO SCHERMO. Prima erano due
   fisse: nel tablet a due colonne la scheda si stringe a 429px, le due colonne
   scendevano a 173px l'una e i valori si sbriciolavano - misurato: "94.5 x 43.0 x
   22.5 mm" su due righe e l'elenco delle protezioni su SETTE. Con auto-fit e un
   minimo di 240px si passa da sole a una colonna quando due non ci stanno, e la
   regola vale in qualunque contenitore, senza dover indovinare la larghezza dello
   schermo. */
body.banco-pdp-attiva .banco-pdp-specifiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 18px;
  margin: 0;
}

/* IL TESTO STAVA IN ALTO NELLA RIGA. Misurato sulla scheda vera: 6px di spazio
   sopra e 17px sotto, su una riga di 41px. Due cause, tutte e due tolte qui.

   1) L'etichetta si portava dietro un margine sotto di 10px, che WordPress mette
      di suo su ogni <dt> e che non avevamo mai azzerato. Quei 10px erano tutti
      sotto il testo: da soli spiegano lo squilibrio.

   2) align-items:baseline allinea etichetta e valore sulla linea di scrittura.
      Ma i due hanno corpo diverso (12 e 12,5px), quindi la riga si alzava per
      contenerli e il testo non finiva in mezzo. Con "center" i due blocchi si
      centrano davvero l'uno sull'altro e la riga non cresce.

   Risultato: 4 + 18,8 + 4 + 1 = 28px di riga contro i 41 di prima, un terzo in
   meno, e lo spazio sopra e sotto identico. Su 8 righe di griglia sono circa
   100px di scheda in meno. 28px e' anche l'altezza di riga standard di Banco. */
body.banco-pdp-attiva .banco-pdp-specifiche__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(62, 131, 197, .16);
}

/* L'ETICHETTA PUO' ANDARE A CAPO. Con gli attributi le etichette erano corte
   ("Materiale", "Batteria") e il nowrap non dava fastidio. Le caratteristiche
   scritte nella descrizione sono piu' lunghe ("Range di Resistenza Supportata",
   "Airflow (Flusso d'aria)"): tenute su una riga sola schiacciavano il valore
   fino a farlo sparire. Meglio due righe di etichetta che un valore illeggibile. */
body.banco-pdp-attiva .banco-pdp-specifiche dt {
  margin: 0;
  color: rgba(238, 244, 252, .58);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}

body.banco-pdp-attiva .banco-pdp-specifiche dd {
  margin: 0;
  color: #eef4fc;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

/* RIGHE LUNGHE: VALORE SOTTO L'ETICHETTA, MA SEMPRE NELLA SUA COLONNA. Valori
   come l'elenco delle modalita' di erogazione o delle protezioni sono frasi, non
   dati da incolonnare: affiancati all'etichetta in mezza colonna restava un filo
   di spazio e il testo si spezzava in righe strette allineate a destra. Qui il
   valore passa sotto, con tutta la mezza colonna a disposizione.

   NON prendono la riga intera: provato, e mescolare righe larghe e righe strette
   spezzava la lettura in due griglie diverse, con caselle vuote accanto alle
   corte. Restando tutte della stessa larghezza la scheda resta una tabella sola.

   PARI PASSO CON LA COMPAGNA. Le due colonne stanno appaiate: una riga corta che
   capita accanto a una lunga si trovava una riga sola in una casella alta il
   doppio, con l'etichetta a sinistra e il valore a destra mentre la vicina aveva
   l'etichetta sopra. Due impaginazioni sulla stessa riga. La classe --pari la
   mette lo script sulle compagne di una riga lunga: chi divide la riga con una
   voce a due righe si impagina come lei. */
body.banco-pdp-attiva .banco-pdp-specifiche__riga--lunga,
body.banco-pdp-attiva .banco-pdp-specifiche__riga--pari {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
}

body.banco-pdp-attiva .banco-pdp-specifiche__riga--lunga dd,
body.banco-pdp-attiva .banco-pdp-specifiche__riga--pari dd {
  text-align: left;
}

/* ELENCO ALTO QUANTO LA FOTO. Sulle schede molto ricche arrivava molto piu' in
   basso, lasciando la colonna di sinistra vuota per centinaia di pixel. L'altezza
   la misura lo script a pagina aperta, perche' la foto non e' sempre alta uguale
   (420px da sola, 533px quando ci sono le miniature sotto).

   Senza l'attributo scritto dallo script non succede niente: se il calcolo non
   parte, o il browser non ce la fa, si vede tutto. Mai il contrario. */
body.banco-pdp-attiva .banco-pdp-specifiche-zona {
  position: relative;
}

body.banco-pdp-attiva .banco-pdp-specifiche-zona[data-banco-taglio="chiuso"] .banco-pdp-specifiche {
  max-height: var(--banco-pdp-taglio, none);
  overflow: hidden;
}

/* Niente sfumatura sul taglio: lo script taglia sul bordo di una riga intera, mai
   a meta' di una parola, quindi non c'e' un mozzicone da mascherare. Provata, la
   sfumatura spegneva anche il pulsante che le sta sotto. Che l'elenco continui lo
   dice il pulsante, con il numero delle voci rimaste. */
body.banco-pdp-attiva .banco-pdp-specifiche__altro {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 7px 12px;
  border: 1px solid rgba(62, 131, 197, .34);
  border-radius: 8px;
  background: transparent;
  color: #eef4fc;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}

body.banco-pdp-attiva .banco-pdp-specifiche__altro:hover,
body.banco-pdp-attiva .banco-pdp-specifiche__altro:focus-visible {
  border-color: var(--svb-giallo, #FFD230);
  color: var(--svb-giallo, #FFD230);
}

/* Titolo a sinistra e orari a destra, sulla stessa riga: gli orari non sono un
   canale da usare ma un'informazione di contorno, e da soli occupavano una casella
   grande come WhatsApp. Qui stanno in alto, leggibili, e lasciano la riga sotto ai
   tre contatti veri. */
body.banco-pdp-attiva .banco-pdp-scheda__intestazione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

body.banco-pdp-attiva .banco-pdp-scheda__intestazione .banco-pdp-scheda__titolo {
  margin: 0;
}

/* Variante con la targhetta del marchio a destra. Qui l'allineamento non e' sulla
   linea di scrittura ma al centro: a destra non c'e' un testo, c'e' un riquadro, e
   la sua linea di scrittura non esiste. */
body.banco-pdp-attiva .banco-pdp-scheda__intestazione--marchio {
  align-items: center;
  gap: 10px 12px;
  min-height: 28px;
  margin-bottom: 8px;
}

body.banco-pdp-attiva .banco-pdp-orari {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(238, 244, 252, .6);
  font-size: 11.5px;
  line-height: 1.2;
  white-space: nowrap;
}

body.banco-pdp-attiva .banco-pdp-orari__icona {
  width: 15px;
  height: 15px;
  color: #fcc418;
}

body.banco-pdp-attiva .banco-pdp-orari__etichetta {
  color: #eef4fc;
  font-weight: 700;
}

/* Assistenza: i tre canali su una riga sola, WhatsApp in evidenza col suo colore. */
body.banco-pdp-attiva .banco-pdp-aiuto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.banco-pdp-attiva .banco-pdp-aiuto__voce > a,
body.banco-pdp-attiva .banco-pdp-aiuto__voce > span {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 8px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid rgba(62, 131, 197, .26);
  border-radius: 10px;
  color: #eef4fc;
  text-decoration: none;
}

body.banco-pdp-attiva .banco-pdp-aiuto__voce > a:hover {
  border-color: rgba(62, 131, 197, .55);
  background: rgba(62, 131, 197, .1);
}

body.banco-pdp-attiva .banco-pdp-aiuto__icona {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  color: #fcc418;
}

body.banco-pdp-attiva .banco-pdp-aiuto__etichetta {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}

body.banco-pdp-attiva .banco-pdp-aiuto__valore {
  color: rgba(238, 244, 252, .6);
  font-size: 11px;
  line-height: 1.25;
}

body.banco-pdp-attiva .banco-pdp-aiuto__voce--primaria > a {
  border-color: rgba(37, 211, 102, .45);
  background: rgba(37, 211, 102, .08);
}

body.banco-pdp-attiva .banco-pdp-aiuto__voce--primaria > a:hover {
  border-color: rgba(37, 211, 102, .8);
  background: rgba(37, 211, 102, .16);
}

body.banco-pdp-attiva .banco-pdp-aiuto__voce--primaria .banco-pdp-aiuto__icona {
  color: #25d366;
}

/* Sotto i 900px tre riquadri affiancati tagliano le diciture: si impilano. */
@media (max-width: 900px) {
  body.banco-pdp-attiva .banco-pdp-aiuto {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  /* Le specifiche non stanno piu' qui: ci pensa auto-fit, che decide da solo in
     base allo spazio vero e non alla larghezza dello schermo. */
  body.banco-pdp-attiva .banco-pdp-aiuto {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Su telefono l'orario va a capo sotto il titolo: e' il flusso naturale, e
     white-space:nowrap gli impedisce di spezzarsi a meta'. */
  body.banco-pdp-attiva .banco-pdp-scheda__intestazione {
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------------ *
 *  Miniature delle varianti
 * ------------------------------------------------------------------ */

/* La striscia viene spostata dallo script dentro la colonna della galleria: qui
   si descrive come appare una volta arrivata a destinazione. Finche' e' in
   transito resta nascosta dall'attributo hidden del markup. */
body.banco-pdp-attiva .banco-pdp-varianti {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

body.banco-pdp-attiva .banco-pdp-varianti[hidden] {
  display: none;
}

body.banco-pdp-attiva .banco-pdp-variante {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 74px;
  padding: 6px 4px 7px;
  border: 1px solid rgba(62, 131, 197, .28);
  border-radius: 12px;
  background: rgba(21, 32, 56, .55);
  color: rgba(238, 244, 252, .72);
  font: inherit;
  cursor: pointer;
}

body.banco-pdp-attiva .banco-pdp-variante:hover {
  border-color: rgba(62, 131, 197, .6);
  color: #eef4fc;
}

/* Variante scelta: cornice accesa col giallo del tema, cosi' si distingue a colpo
   d'occhio anche fra molte miniature simili. */
body.banco-pdp-attiva .banco-pdp-variante.is-attiva {
  border-color: #fcc418;
  box-shadow: inset 0 0 0 1px #fcc418;
  color: #eef4fc;
}

body.banco-pdp-attiva .banco-pdp-variante__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(11, 18, 34, .7);
}

body.banco-pdp-attiva .banco-pdp-variante__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ripiego per la variante senza foto propria: un segno neutro al posto
   dell'immagine, cosi' la miniatura resta della stessa misura delle altre e la
   striscia non si scompone. */
body.banco-pdp-attiva .banco-pdp-variante__sigla {
  font-size: 20px;
  line-height: 1;
  color: rgba(238, 244, 252, .35);
}

body.banco-pdp-attiva .banco-pdp-variante__nome {
  width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 *  Box acquisto: una card sola, non una card dentro l'altra
 * ------------------------------------------------------------------ */

/* Il tema disegna il riquadro varianti con bordo e sfondo propri, dentro la card
   d'acquisto: due cornici annidate, e dentro quella interna finiva anche il prezzo,
   che non c'entra con la scelta della variante. Qui la cornice interna sparisce e
   resta un solo riquadro. */
body.banco-pdp-attiva .banco-pdp-box .variations {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

/* Il prezzo era allineato a destra mentre tutto il resto va a sinistra: da solo
   sembrava scollegato dal resto del riquadro. */
body.banco-pdp-attiva .banco-pdp-box .banco-price {
  width: 100%;
  align-items: baseline;
  justify-content: flex-start;
  text-align: left !important;
}

/* DISPONIBILITA': UN LED, NON UNA PAROLA. La pastiglia "Disponibile" era una terza
   voce su una riga che ne ha gia' due, menu e prezzo: bastava un prezzo in offerta
   - che porta con se' il prezzo vecchio barrato e la targhetta - perche' quella
   riga si spezzasse. Dieci pixel di colore dicono la stessa cosa senza occupare
   spazio: verde se c'e', rosso se manca, giallo se e' su ordinazione.

   IL TESTO NON SPARISCE. Resta nel documento, spostato fuori dalla vista con il
   rientro: i lettori di schermo continuano a leggere "Disponibile". Lo script lo
   ricopia anche nel suggerimento del passaggio del mouse, perche' un colore da
   solo non e' un'informazione per chi non lo distingue. */
body.banco-pdp-attiva .banco-pdp-box p.stock {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .16);
  vertical-align: middle;
  overflow: hidden;
  text-indent: -999em;
  white-space: nowrap;
}

/* Il pallino disegnato dentro la pastiglia non serve piu': il pallino e' il blocco. */
body.banco-pdp-attiva .banco-pdp-box p.stock::before {
  content: none;
}

body.banco-pdp-attiva .banco-pdp-box p.stock.out-of-stock {
  background: #ff5f56;
  box-shadow: 0 0 0 3px rgba(255, 95, 86, .16);
}

/* Su ordinazione: ne' un si' ne' un no, e il giallo e' gia' il colore dell'attesa
   nel resto del sito. */
body.banco-pdp-attiva .banco-pdp-box p.stock.available-on-backorder {
  background: #ffd230;
  box-shadow: 0 0 0 3px rgba(255, 210, 48, .16);
}

/* Riga sottile fra la zona "scegli" e la zona "compra": separa due momenti
   diversi senza aggiungere un'altra cornice. */
body.banco-pdp-attiva .banco-pdp-box .single_variation_wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(62, 131, 197, .22);
}

/* Quantita' e pulsante sulla stessa riga: la quantita' e' quasi sempre 1 e non
   merita una riga intera, mentre il pulsante guadagna spazio e sale vicino al
   prezzo. */
body.banco-pdp-attiva .banco-pdp-box .product-btn-grp {
  display: flex;
  /* A capo permesso: sui prodotti semplici il tema mette due pulsanti accanto alla
     quantita' ("Visualizza carrello" e quello di acquisto), e su una riga sola il
     secondo usciva dal riquadro. Con l'andata a capo il secondo scende e riempie
     la riga, mentre sui variabili resta tutto su una riga come previsto. */
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

body.banco-pdp-attiva .banco-pdp-box .product-btn-grp .rbt-qty-area {
  flex: 0 0 118px;
  width: 118px !important;
  min-width: 0;
}

body.banco-pdp-attiva .banco-pdp-box .product-btn-grp > a,
body.banco-pdp-attiva .banco-pdp-box .product-btn-grp > button {
  flex: 1 1 170px;
  width: auto !important;
  min-width: 0;
}

/* ------------------------------------------------------------------ *
 *  Telefono: due righe invece di quattro nel box acquisto
 * ------------------------------------------------------------------ */

/* Sul telefono il box acquisto occupava quattro righe - etichetta e menu, prezzo,
   quantita', pulsante - per due sole scelte da fare. Diventano due righe:

     variante | prezzo
     quantita | pulsante

   VARIANTE E PREZZO. Nella colonna stretta del desktop il prezzo va sopra (regola
   piu' in alto, order: -1): li' il box e' alto e stretto. Sul telefono il box e'
   largo quanto lo schermo e accanto al menu resta spazio, quindi il prezzo torna
   di fianco, allineato in basso col menu. Solo dove c'e' un menu variante: sui
   prodotti semplici il prezzo resta dov'e', altrimenti finirebbe da solo a destra
   di una riga vuota. Se il browser non conosce :has() salta tutto e resta il
   comportamento di prima. */
@media (max-width: 767px) {
  /* Il display porta !important perche' lo porta anche la regola del sito che
     rimette questo blocco in colonna sul telefono
     (body.single-product .single-product-vr-modifire .prd-info-section).
     Senza, il contenitore resta a blocco e le proprieta' flex dei figli non
     valgono niente: si vedono in colonna anche se dichiarate in riga. */
  body.banco-pdp-attiva .banco-pdp-box .prd-info-section:has(.prd-id-text) {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 12px;
  }

  body.banco-pdp-attiva .banco-pdp-box .prd-info-section:has(.prd-id-text) .prd-id-text {
    flex: 1 1 120px;
    width: auto !important;
    min-width: 0;
  }

  /* Il tetto al 46% non e' un vezzo: con l'andata a capo attiva il browser manda
     un elemento sulla riga dopo appena la sua misura naturale non ci sta, invece
     di stringerlo. Un prezzo in offerta - vecchio barrato accanto al nuovo - misura
     186px e faceva saltare la riga. Con il tetto la sua misura di partenza sta
     dentro, e a stringersi ci pensa il prezzo, mandando il vecchio sopra il nuovo. */
  body.banco-pdp-attiva .banco-pdp-box .prd-info-section:has(.prd-id-text) .banco-price {
    order: 0;
    flex: 0 1 auto;
    width: auto !important;
    max-width: 46%;
    min-width: 0;
    justify-content: flex-end;
    text-align: right !important;
  }

  body.banco-pdp-attiva .banco-pdp-box .prd-info-section:has(.prd-id-text) .banco-price__main {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Il menu si prende la sua riga dentro la colonna di sinistra, e accanto
     all'etichetta resta il LED della disponibilita'. */
  body.banco-pdp-attiva .banco-pdp-box .prd-info-section:has(.prd-id-text) .unimart-variation-value {
    order: 2;
    flex: 1 0 100%;
  }

  body.banco-pdp-attiva .banco-pdp-box .prd-info-section:has(.prd-id-text) .banco-pdp-stato {
    order: 1;
    margin-left: 0;
  }

  /* "Reimposta tutto" compare a scelta fatta: riga sua, DOPO le altre due. In
     mezzo, con la sua base al 100%, spezzava la riga della variante mandando il
     prezzo su una terza riga. */
  body.banco-pdp-attiva .banco-pdp-box .prd-info-section a.reset_variations {
    order: 9;
    flex: 1 0 100%;
  }

  /* QUANTITA' E PULSANTE. Una regola mobile del sito
     (body.single-product .woocommerce-variation-add-to-cart .product-btn-grp)
     li rimette in colonna: qui viene scavalcata con un selettore piu' pesante e
     solo dentro la scheda nuova, cosi' resta valida ovunque altrove.

     Le misure scendono rispetto al desktop perche' su uno schermo da 320px
     118+10+170 non ci sta: 104 di quantita' e 120 minimi di pulsante si', con il
     pulsante che si prende tutto il resto. */
  body.banco-pdp-attiva .banco-pdp-box .woocommerce-variation-add-to-cart .product-btn-grp,
  body.banco-pdp-attiva .banco-pdp-box .product-btn-grp {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }

  body.banco-pdp-attiva .banco-pdp-box .product-btn-grp .rbt-qty-area {
    flex: 0 0 104px;
    width: 104px !important;
  }

  body.banco-pdp-attiva .banco-pdp-box .product-btn-grp > a,
  body.banco-pdp-attiva .banco-pdp-box .product-btn-grp > button {
    flex: 1 1 120px;
    width: auto !important;
  }
}

/* ------------------------------------------------------------------ *
 *  Zona inferiore: sezioni al posto delle linguette
 * ------------------------------------------------------------------ */

body.banco-pdp-attiva .banco-pdp-sezioni {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.banco-pdp-attiva .banco-pdp-sezione {
  padding: 18px 20px 20px;
  border: 1px solid rgba(62, 131, 197, .28);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(21, 32, 56, .9), rgba(11, 18, 34, .94));
}

body.banco-pdp-attiva .banco-pdp-sezione__titolo {
  margin: 0 0 12px;
  color: #eef4fc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Le recensioni restano una funzione viva ma sono zero su tutto il catalogo:
   stanno in fondo e non si prendono la scena. */
body.banco-pdp-attiva .banco-pdp-sezione--reviews {
  order: 9;
}

/* ------------------------------------------------------------------ *
 *  Descrizione espandibile
 * ------------------------------------------------------------------ */

/* Il taglio e' solo visivo: il testo resta tutto nel documento. Nessuna altezza
   imposta a priori — la classe la mette il codice soltanto se il contenuto e'
   davvero piu' alto della soglia, altrimenti la descrizione si vede intera. */
body.banco-pdp-attiva .banco-pdp-descrizione {
  transition: max-height .35s ease;
}

body.banco-pdp-attiva .banco-pdp-descrizione.is-ritagliata {
  position: relative;
  max-height: 420px;
  overflow: hidden;
}

/* Sfumatura sull'ultima riga: dice che il testo continua, senza tagliarlo netto. */
body.banco-pdp-attiva .banco-pdp-descrizione.is-ritagliata::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(14, 21, 38, 0), rgba(12, 19, 34, .96));
  pointer-events: none;
}

body.banco-pdp-attiva .banco-pdp-descrizione.is-aperta::after {
  opacity: 0;
}

body.banco-pdp-attiva .banco-pdp-descrizione__comando {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 16px;
  border: 1px solid rgba(62, 131, 197, .45);
  border-radius: 999px;
  background: rgba(62, 131, 197, .12);
  color: #eef4fc;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

body.banco-pdp-attiva .banco-pdp-descrizione__comando:hover {
  border-color: rgba(62, 131, 197, .8);
  background: rgba(62, 131, 197, .22);
}

/* Il contenuto arriva dall'editor: puo' contenere immagini larghe e tabelle.
   Nessuna delle due deve poter allargare la pagina. */
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto img {
  max-width: 100%;
  height: auto;
}

body.banco-pdp-attiva .banco-pdp-descrizione__contenuto table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* COLORE DEL TESTO - qui serve !important, e non per pigrizia.
   Le descrizioni sono importate dai fornitori e portano il colore scritto dentro
   il tag: su questo prodotto 63 elementi hanno color:#000000, perche' quei testi
   nascono per un fondo bianco. Il colore scritto nel tag batte qualsiasi regola
   normale del foglio di stile, quindi su fondo scuro il testo restava nero e
   illeggibile. Solo una regola importante lo supera.
   Si colpisce ogni discendente perche' il testo vive dentro <span> annidati, non
   nei paragrafi: intervenire solo su p e li non cambia nulla di cio' che si legge. */
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto * {
  color: rgba(238, 244, 252, .82) !important;
}

body.banco-pdp-attiva .banco-pdp-descrizione__contenuto {
  font-size: 14px;
  line-height: 1.65;
}

body.banco-pdp-attiva .banco-pdp-descrizione__contenuto p,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto li,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto span {
  font-size: 14px;
  line-height: 1.65;
}

/* Titoli e grassetti piu' chiari: danno il ritmo di lettura al blocco lungo. */
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h1,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h2,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h3,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h4,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h1 *,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h2 *,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h3 *,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h4 *,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto strong,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto b,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto [style*="font-weight:bold"],
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto [style*="font-weight: bold"] {
  color: #eef4fc !important;
}

/* I collegamenti devono restare riconoscibili come tali. */
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto a,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto a * {
  color: #6ea8e8 !important;
}

/* Stessa origine, stesso problema: alcuni contenuti portano dentro il tag anche
   uno sfondo chiaro, pensato per la pagina bianca del fornitore. */
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto [style*="background"] {
  background: transparent !important;
}

body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h1,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h2,
body.banco-pdp-attiva .banco-pdp-descrizione__contenuto h3 {
  font-size: 16px;
  margin: 18px 0 8px;
}

/* ------------------------------------------------------------------ *
 *  Spazio fra la parte alta e la descrizione
 * ------------------------------------------------------------------ */

/* Il tema lascia 80px sotto la parte alta e altri 80px sopra il blocco successivo:
   160px di vuoto in mezzo alla scheda, misurati in pagina. Su una pagina di
   vendita quello spazio non separa, interrompe. Portati a 28+28.
   Il :has serve a colpire solo il contenitore delle nostre sezioni e non gli altri
   blocchi della pagina, che usano le stesse classi del tema. */
body.banco-pdp-attiva .rbt-single-product-area {
  padding-bottom: 28px;
}

body.banco-pdp-attiva #main .rbt-component-area:has(.banco-pdp-sezioni) {
  padding-top: 28px;
}

/* ------------------------------------------------------------------ *
 *  Sezioni richiudibili
 * ------------------------------------------------------------------ */

body.banco-pdp-attiva .banco-pdp-sezione__interruttore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

body.banco-pdp-attiva .banco-pdp-sezione__interruttore .banco-pdp-sezione__titolo {
  margin: 0;
}

/* Freccia disegnata col bordo: nessuna icona da caricare, nessun carattere
   speciale che dipenda dal set di icone del tema. */
body.banco-pdp-attiva .banco-pdp-sezione__freccia {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(238, 244, 252, .55);
  border-bottom: 2px solid rgba(238, 244, 252, .55);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}

body.banco-pdp-attiva .banco-pdp-sezione__interruttore[aria-expanded="true"] .banco-pdp-sezione__freccia {
  transform: rotate(-135deg) translate(-2px, -2px);
}

body.banco-pdp-attiva .banco-pdp-sezione__corpo[hidden] {
  display: none;
}

body.banco-pdp-attiva .banco-pdp-sezione__corpo {
  margin-top: 14px;
}

/* ------------------------------------------------------------------ *
 *  Recensioni: corpi ridotti
 * ------------------------------------------------------------------ */

/* Il blocco del tema e' dimensionato per una pagina intera: qui e' una sezione
   secondaria e va letta come tale. */
body.banco-pdp-attiva .banco-pdp-sezione--reviews .banco-pdp-sezione__corpo {
  font-size: 13px;
}

body.banco-pdp-attiva .banco-pdp-sezione--reviews .rbt-abr-review-number-text {
  font-size: 22px;
}

body.banco-pdp-attiva .banco-pdp-sezione--reviews .rbt-rating-icon-list i,
body.banco-pdp-attiva .banco-pdp-sezione--reviews .stars i {
  font-size: 15px;
}

body.banco-pdp-attiva .banco-pdp-sezione--reviews #reply-title,
body.banco-pdp-attiva .banco-pdp-sezione--reviews h2,
body.banco-pdp-attiva .banco-pdp-sezione--reviews h3 {
  font-size: 15px;
  margin-bottom: 10px;
}

body.banco-pdp-attiva .banco-pdp-sezione--reviews label {
  font-size: 12px;
}

body.banco-pdp-attiva .banco-pdp-sezione--reviews textarea {
  min-height: 96px;
  font-size: 13px;
}

body.banco-pdp-attiva .banco-pdp-sezione--reviews input[type="text"],
body.banco-pdp-attiva .banco-pdp-sezione--reviews input[type="email"] {
  height: 38px;
  font-size: 13px;
}

body.banco-pdp-attiva .banco-pdp-sezione--reviews input[type="submit"],
body.banco-pdp-attiva .banco-pdp-sezione--reviews button[type="submit"] {
  padding: 9px 18px;
  font-size: 13px;
}

/* Sull'offerta gia' scelta convivevano due targhette ancorate allo stesso punto,
   "Scelto" e "Miglior prezzo", sovrapposte di 38px (misurato). Su quella scelta la
   seconda non aggiunge niente: l'hai gia' presa. Resta dove serve, cioe' sulle
   offerte non ancora scelte, dove invita a cambiare. */
body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing__option:has(.svb-chosen-flag) .svb-price-choice__badge {
  display: none;
}

/* Le targhette sporgono di 11px sopra il bordo dell'offerta: senza spazio finiscono
   addosso al titolo del riquadro. */
body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing__options {
  margin-top: 16px !important;
}

/* "Reimposta tutto" tolto su richiesta: la variante si cambia dal menu accanto, e il
   collegamento occupava spazio per un'azione che nessuno cerca. */
body.banco-pdp-attiva .banco-pdp-box .reset_variations {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 *  Metodi di pagamento
 * ------------------------------------------------------------------ */

/* Queste regole ricalcano quelle dello snippet id 15, che oggi le fornisce ancora.
   Sono qui perche' il modulo deve reggersi da solo: quando lo snippet verra' spento,
   dopo l'accensione della scheda nuova per tutti, il box non deve perdere la veste.
   Finche' convivono i valori coincidono, quindi a schermo non cambia nulla. */
body.banco-pdp-attiva .banco-pdp-box .rbt-info-box.rbt-bg-color-brand-50 {
  min-height: 0;
  height: auto;
  padding: 14px 16px;
  border: 1px solid rgba(62, 131, 197, .34);
  border-radius: 14px;
  background: linear-gradient(135deg, #13213b, #0c1628);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

body.banco-pdp-attiva .banco-pdp-box .rbt-payment-info-container {
  width: 100%;
  height: auto;
}

body.banco-pdp-attiva .banco-pdp-box .svb-payments-title {
  margin-bottom: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* TITOLO CHE APRE E CHIUDE, MA SOLO SU TELEFONO. Il titolo e' sempre lo stesso
   pulsante: sopra i 767px non ha freccia, non ha cursore da comando e l'elenco
   resta aperto, quindi si legge come il titolo che era. Sotto, diventa il comando
   che apre le quattro caselle dei pagamenti.

   Nasce aperto: senza JavaScript, o se qualcosa non gira, si vede tutto. */
body.banco-pdp-attiva .banco-pdp-box .banco-pdp-pagamenti__titolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1.3;
  text-align: left;
  cursor: default;
}

body.banco-pdp-attiva .banco-pdp-box .banco-pdp-pagamenti__freccia {
  display: none;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(238, 244, 252, .7);
  border-bottom: 2px solid rgba(238, 244, 252, .7);
  /* Aperto la freccia guarda in su, chiuso in giu': indica dove va il contenuto,
     non dove si trova adesso. */
  transform: translateY(2px) rotate(-135deg);
  transition: transform .18s ease;
}

@media (max-width: 767px) {
  body.banco-pdp-attiva .banco-pdp-box .banco-pdp-pagamenti__titolo {
    cursor: pointer;
    /* Bersaglio da dito: il titolo da solo e' alto 17px. */
    padding: 4px 0;
  }

  body.banco-pdp-attiva .banco-pdp-box .banco-pdp-pagamenti__freccia {
    display: block;
  }

  /* Chiuso: niente elenco e niente spazio sotto il titolo. */
  body.banco-pdp-attiva .banco-pdp-box .banco-pdp-pagamenti__titolo[aria-expanded="false"] {
    margin-bottom: 0;
  }

  body.banco-pdp-attiva .banco-pdp-box .banco-pdp-pagamenti__titolo[aria-expanded="false"] .banco-pdp-pagamenti__freccia {
    transform: translateY(-2px) rotate(45deg);
  }

  /* !important perche' ce l'ha anche la regola del sito che stampa questo elenco
     (body.single-product .svb-payment-methods): senza, chiuso restava visibile e
     si muoveva solo la freccia. */
  body.banco-pdp-attiva .banco-pdp-box .banco-pdp-pagamenti__titolo[aria-expanded="false"] + .svb-payment-methods {
    display: none !important;
  }
}

/* Una colonna: il box acquisto e' stretto, tre affiancati tagliavano le diciture. */
body.banco-pdp-attiva .banco-pdp-box .svb-payment-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.banco-pdp-attiva .banco-pdp-box .svb-payment-methods li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #2b4266;
  border-radius: 10px;
  background: #101b30;
  color: #eef5ff;
}

body.banco-pdp-attiva .banco-pdp-box .svb-pay-icon {
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #1c355a;
  color: #fcc418;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.2px;
}

body.banco-pdp-attiva .banco-pdp-box .svb-payment-methods strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
}

body.banco-pdp-attiva .banco-pdp-box .svb-payment-methods small {
  display: block;
  color: rgba(238, 245, 255, .62);
  font-size: 11px;
  line-height: 1.25;
}

/* ------------------------------------------------------------------ *
 *  Fasce prezzo: riquadri che devono stare dentro la colonna
 * ------------------------------------------------------------------ */

/* Lo snippet id 15 dichiara le colonne con minimi fissi:
   minmax(150px,.7fr) minmax(250px,1.6fr) = 400px piu' spazio, dentro un riquadro
   che ne ha 382. Misurato: la seconda offerta usciva di 29px dal bordo, e con lei
   la targhetta "Miglior prezzo", che le sta attaccata.
   Qui le colonne si adattano: due affiancate se c'e' posto, una sola se non c'e'.
   Nessun minimo che superi lo spazio disponibile. */
body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing__options {
  /* Larghezze diverse di proposito: il prezzo singolo dice due parole, l'offerta ne
     dice quattro piu' il risparmio, ed e' quella che deve farsi notare. Le
     proporzioni sono quelle volute dallo snippet; qui cambiano i minimi, che erano
     fissi a 150 e 250px e insieme non entravano nella colonna. Con minmax(0,...)
     i riquadri possono stringersi quanto serve senza mai sbordare. */
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) !important;
  gap: 18px 8px !important;
}

/* Sul telefono affiancarle non conviene: una sotto l'altra si leggono entrambe. */
@media (max-width: 600px) {
  body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing__options {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing__option {
  min-width: 0;
  padding: 9px 11px !important;
}

/* La targhetta sporge di proposito sopra il bordo dell'offerta: con una sola colonna
   finirebbe sopra l'offerta precedente, per questo lo spazio fra le righe e' 18px. */
body.banco-pdp-attiva .banco-pdp-box .svb-price-choice__badge {
  right: 8px;
  font-size: 9.5px;
  padding: 3px 7px;
}

/* Il suggerimento compare al passaggio del mouse: non deve mai uscire dal riquadro. */
body.banco-pdp-attiva .banco-pdp-box .svb-price-choice__tooltip {
  max-width: min(240px, 100%);
}

body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing {
  margin: 12px 0 0 !important;
  padding: 12px !important;
}

/* ------------------------------------------------------------------ *
 *  Spazio prenotato per le offerte
 * ------------------------------------------------------------------ */

/* Le schede-offerta le disegna il browser appena sa quale variante e' stata scelta:
   fino a quel momento nel riquadro c'e' una riga sola, e quando compaiono la scheda
   cresce di 85px spingendo in basso pulsante e pagamenti (misurato). Qui lo spazio
   viene tenuto libero fin dal primo istante: cambia il contenuto, non l'ingombro.

   Le misure sono quelle vere, prese dal riquadro pieno: imbottitura 24px, titolo
   27px, distacchi 16 e 12px e riepilogo 72px fanno la parte fissa; ogni riga di
   offerte vale 77px, con 18px fra una riga e l'altra. Quante righe siano lo scrive
   il template, che conta le fasce di questo prodotto: due offerte per riga sul
   computer, una sola sul telefono.

   La misura resta leggermente sotto il vero (228px prenotati contro 230 reali sul
   computer, 323 contro 331 sul telefono) di proposito: cosi' il riquadro non resta
   mai piu' alto del suo contenuto, e non si vedono fasce di vuoto.

   Senza la variabile - prodotti senza offerte - il calcolo non e' valido e la regola
   viene semplicemente ignorata: nessuna prenotazione dove non serve. Per questo la
   variabile e' scritta senza valore di ripiego. */
body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing {
  min-height: calc(
    151px
    + var(--banco-pdp-offerte-righe) * 77px
    + (var(--banco-pdp-offerte-righe) - 1) * 18px
  );
}

@media (max-width: 600px) {
  body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing {
    min-height: calc(
      151px
      + var(--banco-pdp-offerte-righe-strette) * 77px
      + (var(--banco-pdp-offerte-righe-strette) - 1) * 18px
    );
  }
}

/* Nello spazio prenotato la riga d'attesa va al centro: cosi' si legge come un
   riquadro che aspetta, non come un riquadro mezzo vuoto. Vale solo finche' la riga
   d'attesa c'e': quando arrivano le offerte questa regola smette da sola di
   applicarsi. */
body.banco-pdp-attiva .banco-pdp-box .banco-quantity-pricing:has(.banco-quantity-pricing__prompt) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ------------------------------------------------------------------ *
 *  Linguette della descrizione
 * ------------------------------------------------------------------ */

/* Una barra di scelte, non un titolo: rilievo, bordo sotto e spazio fra le voci
   servono a far capire a colpo d'occhio che si clicca. Su schermo stretto vanno a
   capo invece di scorrere di lato. */
body.banco-pdp-attiva .banco-pdp-linguette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid rgba(62, 131, 197, .26);
}

body.banco-pdp-attiva .banco-pdp-linguetta {
  position: relative;
  margin: 0;
  padding: 10px 15px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: rgba(238, 244, 252, .58);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.2;
  text-transform: uppercase;
  /* Il dito e la mano: il segnale piu' immediato che l'elemento risponde. */
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

/* La riga colorata sotto la linguetta scelta. Vive su un pseudo-elemento per
   sovrapporsi al bordo della barra invece di spostarlo. */
body.banco-pdp-attiva .banco-pdp-linguetta::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background-color .15s ease;
}

body.banco-pdp-attiva .banco-pdp-linguetta:hover {
  color: #eef4fc;
  background: rgba(62, 131, 197, .14);
}

body.banco-pdp-attiva .banco-pdp-linguetta:hover::after {
  background: rgba(252, 196, 24, .45);
}

/* Chi naviga da tastiera deve vedere dov'e'. */
body.banco-pdp-attiva .banco-pdp-linguetta:focus-visible {
  outline: 2px solid #fcc418;
  outline-offset: -2px;
}

body.banco-pdp-attiva .banco-pdp-linguetta[aria-selected="true"] {
  color: #fff;
  background: rgba(62, 131, 197, .16);
}

body.banco-pdp-attiva .banco-pdp-linguetta[aria-selected="true"]::after {
  background: #fcc418;
}

/* Il pannello non ha veste propria: il contenuto e' gia' vestito dalle regole della
   descrizione. Qui serve solo che i blocchi partano staccati dalla barra. */
body.banco-pdp-attiva .banco-pdp-pannello > .banco-pdp-descrizione__contenuto {
  margin-top: 2px;
}

/* Gli elenchi dei blocchi arrivano dal testo del fornitore senza spaziatura utile:
   una riga per voce, con il rientro del punto elenco. */
body.banco-pdp-attiva .banco-pdp-pannello ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

body.banco-pdp-attiva .banco-pdp-pannello li {
  margin-bottom: 6px;
}

/* Sul telefono le linguette sono tante: caratteri e imbottitura piu' contenuti,
   cosi' ne entrano due o tre per riga senza spezzare le parole. */
@media (max-width: 600px) {
  body.banco-pdp-attiva .banco-pdp-linguetta {
    padding: 9px 11px;
    font-size: 11.5px;
    letter-spacing: .3px;
  }
}

/* ------------------------------------------------------------------ *
 *  Avvisi: messaggio a comparsa invece del riquadro nel box
 * ------------------------------------------------------------------ */

/* Prima gli avvisi di WooCommerce comparivano in cima al box acquisto: un riquadro
   bianco che spingeva in basso prezzo e pulsante e restava li' fino al cambio
   pagina. Qui diventano un messaggio appoggiato in un angolo dello schermo, che non
   sposta niente e se ne va da solo. */
body.banco-pdp-attiva .banco-pdp-avvisi {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(400px, calc(100vw - 40px));
  /* Il contenitore non deve intercettare i clic quando e' vuoto: sotto ci sono i
     comandi della pagina. I messaggi dentro se li riprendono. */
  pointer-events: none;
}

body.banco-pdp-attiva .banco-pdp-avvisi:empty {
  display: none;
}

/* Due selettori per lo stesso vestito: normalmente lo script toglie l'involucro di
   servizio di WooCommerce e il messaggio e' figlio diretto; se lo script non girasse,
   l'involucro resta e a vestirsi dev'essere il messaggio dentro di lui, altrimenti
   resterebbe il riquadro bianco di WooCommerce dentro il nostro. */
body.banco-pdp-attiva .banco-pdp-avvisi > .woocommerce-notices-wrapper {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body.banco-pdp-attiva .banco-pdp-avvisi > :not(.woocommerce-notices-wrapper),
body.banco-pdp-attiva .banco-pdp-avvisi > .woocommerce-notices-wrapper > * {
  pointer-events: auto;
  position: relative;
  margin: 0 !important;
  padding: 15px 42px 15px 16px !important;
  border: 1px solid rgba(62, 131, 197, .34) !important;
  border-left: 4px solid #4ade80 !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #15243f, #0d1727) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42) !important;
  color: #eef4fc !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  list-style: none !important;
  /* Entra scivolando da destra: si nota senza rubare l'attenzione. */
  animation: banco-pdp-avviso-entra .28s ease both;
}

@keyframes banco-pdp-avviso-entra {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* In uscita si allontana: chi sta guardando capisce che se n'e' andato da solo e
   non che e' sparita la pagina. */
body.banco-pdp-attiva .banco-pdp-avvisi > .banco-pdp-avviso--esce {
  animation: banco-pdp-avviso-esce .3s ease both;
}

@keyframes banco-pdp-avviso-esce {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

/* Errori e informazioni: stessa forma, colore diverso sul bordo. Questi non
   spariscono da soli, vanno letti. */
body.banco-pdp-attiva .banco-pdp-avvisi > .woocommerce-error {
  border-left-color: #f87171 !important;
}

body.banco-pdp-attiva .banco-pdp-avvisi > .woocommerce-info {
  border-left-color: #3e83c5 !important;
}

body.banco-pdp-attiva .banco-pdp-avvisi a {
  color: #fcc418 !important;
  font-weight: 700;
  text-decoration: underline;
}

/* Il collegamento al carrello, che WooCommerce mette come pulsante, resta un
   collegamento: nel messaggio un pulsante pieno sarebbe piu' vistoso del testo. */
body.banco-pdp-attiva .banco-pdp-avvisi .button {
  display: inline;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #fcc418 !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
}

body.banco-pdp-attiva .banco-pdp-avviso__chiudi {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(238, 244, 252, .55);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

body.banco-pdp-attiva .banco-pdp-avviso__chiudi:hover {
  color: #fff;
  background: rgba(238, 244, 252, .1);
}

/* Sul telefono il messaggio prende tutta la larghezza in basso: e' li' che cade
   naturalmente il pollice. */
@media (max-width: 600px) {
  body.banco-pdp-attiva .banco-pdp-avvisi {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }
}

/* Il pulsante mentre l'aggiunta e' in corso: resta leggibile ma dice che sta
   lavorando, cosi' nessuno lo preme due volte. */
body.banco-pdp-attiva .single_add_to_cart_button.banco-pdp-in-corso {
  opacity: .72;
  cursor: progress;
}

/* WooCommerce disegna una spunta a sinistra del suo avviso, posizionata sulla sua
   imbottitura: con la nostra finisce a meta' del testo. La riga colorata sul bordo
   dice gia' di che tipo di messaggio si tratta. */
body.banco-pdp-attiva .banco-pdp-avvisi .woocommerce-message::before,
body.banco-pdp-attiva .banco-pdp-avvisi .woocommerce-error::before,
body.banco-pdp-attiva .banco-pdp-avvisi .woocommerce-info::before {
  display: none !important;
}

/* Gli errori WooCommerce li stampa come elenco: qui non e' un elenco da leggere,
   sono una o due righe. Via i punti e il rientro, resta lo spazio fra una riga e
   l'altra. */
body.banco-pdp-attiva .banco-pdp-avvisi ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.banco-pdp-attiva .banco-pdp-avvisi li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.banco-pdp-attiva .banco-pdp-avvisi li + li {
  margin-top: 6px !important;
}

/* ------------------------------------------------------------------ *
 *  La galleria non deve scendere sopra le varianti
 * ------------------------------------------------------------------ */

/* Il tema dichiara la galleria "appiccicata" (position:sticky, 150px dal bordo alto)
   perche' segua la lettura mentre si scorre. Nella nostra colonna pero' sotto la foto
   ci sono le miniature delle varianti: la foto si stacca, scende dentro la colonna e
   le copre. Sul telefono e' evidente - la foto arriva sopra i colori e non si vede
   piu' cosa si sta scegliendo - mentre sul computer, misurato, quel comportamento non
   scatta nemmeno: la galleria scorre insieme alla pagina come tutto il resto.
   Quindi qui si toglie: si perde un effetto che sul computer non c'era e sul telefono
   nascondeva la scelta. */
body.banco-pdp-attiva .rbt-single-product-media-area {
  position: static !important;
  top: auto !important;
}

/* --- Tetto alla galleria: non si ingrandisce una foto oltre quello che ha dentro ---
 *
 * MISURATO il 2026-08-22 su questa scheda: le foto della galleria sono file da
 * 300x300 pixel reali (il tema serve la misura "miniatura", non quella grande, pur
 * esistendo sul server le versioni da 600 e 768). Mostrandole a 559px, come
 * capitava sul tablet, si ingrandisce di quasi il doppio: la foto non e' solo
 * grande, e' anche sgranata.
 *
 * 420px e' il compromesso: sopra la misura vera del file non si sale di molto, la
 * foto resta la piu' grande della pagina e non ruba la scena al prezzo. Sul
 * computer non cambia niente - li' la colonna della galleria e' gia' sotto questa
 * misura - e la foto resta centrata nella sua colonna.
 *
 * SE UN GIORNO SI SERVIRANNO LE FOTO GRANDI (600 o 768) questo tetto si puo'
 * alzare: e' l'unico punto da toccare.
 *
 * L'!important serve: piu' su, per togliere di mezzo le larghezze di Bootstrap,
 * tutte le colonne della griglia ricevono max-width:none !important. Senza, questo
 * tetto non verrebbe applicato - misurato, la galleria restava a 470px. */
body.banco-pdp-attiva .rbt-single-product-media-area {
  max-width: 420px !important;
  margin-left: auto;
  margin-right: auto;
}

/* QUI C'ERA una rete per il caso "carosello che non parte", aggiunta il 2026-08-22
   e tolta lo stesso giorno. Nasceva da una lettura sbagliata della foto del tablet:
   sembravano sette fotografie impilate, ed era invece UNA sola fotografia che
   ritrae sette dispositivi. Il carosello funzionava.
   Nascondere le diapositive finche' il carosello non si e' avviato significa anche
   fargliele misurare a zero proprio mentre calcola le larghezze: un rischio vero,
   preso per un problema che non esisteva. Il problema vero era la misura della
   galleria, ed e' risolto dal tetto piu' sopra. */