/* =============================================================================
   PROBAR - IL CAROSELLO DEI CONSIGLI ("Potresti essere interessato a...")
   -----------------------------------------------------------------------------
   Misura di partenza, telefono da 375 px: il blocco era alto 877 pixel, quattro
   schede impilate. Piu' di una schermata intera fra il carrello e il fondo
   pagina. Adesso e' una riga sola che si scorre col dito.

   TRE REGOLE CHE TENGONO IN PIEDI IL RESTO
   1. La scheda successiva si vede a meta'. E' l'unico segnale che non ha
      bisogno di essere spiegato: se sbuca un pezzo di card, si scorre.
   2. L'aggancio (`scroll-snap`) e' `mandatory` e allineato a `start`: ogni
      gesto lascia una scheda incorniciata, mai due mezze schede.
   3. Il movimento lo fa il sistema operativo, non noi. `overflow-x: auto` +
      snap significa inerzia nativa: nessuna animazione scritta a mano su una
      pagina di carrello puo' esserle pari, e nessuna costa zero come questa.

   PERCHE' TANTI `!important`. Le schede dei consigli sono vestite da
   shop-ui.css (sezioni 8, 12, 16, 25, 31) con dichiarazioni forzate: quelle
   regole disegnavano una card ORIZZONTALE a piena larghezza, ed e' esattamente
   la forma che qui va disfatta. Dove si legge `!important` si sta spegnendo una
   regola che ne aveva gia' uno.

   PERCHE' `.pb-caro.pb-caro` E NON `.cross-sells.pb-caro` (26 agosto 2026, notte).
   Fino a ieri il carosello viveva solo nel carrello, e ogni regola nominava il
   contenitore: `.cross-sells.pb-caro`. Adesso gira anche sui "Prodotti
   correlati" e sugli up-sells della scheda prodotto, che sono contenitori
   diversi (`.related.products`, `.up-sells`).
   Nominarli tutti e tre avrebbe triplicato un foglio gia' lungo. Ripetere la
   classe due volte fa la stessa identica cosa dove conta: **`.pb-caro.pb-caro`
   pesa esattamente quanto `.cross-sells.pb-caro`** (due classi), quindi
   nessuna delle battaglie di specificita' gia' vinte contro shop-ui viene
   riaperta, e la regola vale su qualunque contenitore il JavaScript abbia
   marcato. Le poche regole con `body.woocommerce-cart` davanti restano
   scritte cosi': combattono una regola di Astra Addon che esiste solo nel
   carrello.
   ========================================================================== */

.pb-caro.pb-caro {
  --pb-caro-scheda: 74%;   /* quanto e' larga una scheda: il resto e' la vicina che sbuca */
  --pb-caro-gap: 14px;

  position: relative;
  box-sizing: border-box;
  margin: 26px 0 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

@media (min-width: 600px) {
  .pb-caro.pb-caro { --pb-caro-scheda: 45%; }
}

@media (min-width: 900px) {
  .pb-caro.pb-caro { --pb-caro-scheda: 31%; --pb-caro-gap: 16px; }
}

@media (min-width: 1200px) {
  .pb-caro.pb-caro { --pb-caro-scheda: 23.4%; }
}

/* --- La testa: titolo a sinistra, frecce a destra ------------------------ */
.pb-caro__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 0 2px;
}

.pb-caro.pb-caro .pb-caro__testa h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: #ffffff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.25;
  text-align: left;
}

/* LA TESTA SENZA TITOLO. Nella pagina Indispensabili il titolo resta nel suo
   gruppo (occhiello, titolo, copy) e qui dentro ci sono solo le frecce: si
   spingono a destra, e sul dito - dove le frecce non esistono - la riga non
   deve lasciare nemmeno il suo margine. */
.pb-caro__testa--nuda {
  justify-content: flex-end;
  margin: 0 0 10px;
}

.pb-caro__nav {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

/* Sul dito le frecce non servono e rubano spazio al titolo: le sostituisce
   il gesto, che e' piu' rapido di qualunque pulsante. */
@media (hover: none) {
  .pb-caro__nav { display: none; }
  .pb-caro__testa--nuda { display: none; }
}

/* Quando le schede ci stanno tutte, i comandi spariscono: la classe la mette
   il JavaScript misurando quanto c'e' da scorrere. */
.pb-caro.pb-caro--fermo .pb-caro__nav,
.pb-caro.pb-caro--fermo .pb-caro__punti {
  display: none;
}

.pb-caro__freccia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 206, 83, 0.45) !important;
  border-radius: 50%;
  background: transparent !important;
  color: #FFCE53 !important;
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
}

.pb-caro__freccia svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Astra riempie d'oro qualunque `button:hover` e `button:focus`, e su un
   pulsante gia' dorato vorrebbe dire oro su oro. Qui il colore lo dichiariamo
   noi, sfondo e testo insieme, come si fa in tutto il tema. */
.pb-caro__freccia:hover,
.pb-caro__freccia:focus {
  background: rgba(255, 206, 83, 0.14) !important;
  border-color: #FFCE53 !important;
  color: #FFCE53 !important;
}

.pb-caro__freccia:focus-visible {
  outline: 2px solid #FFCE53;
  outline-offset: 2px;
}

/* Arrivati in fondo la freccia resta al suo posto e smette di promettere. */
.pb-caro__freccia[disabled] {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

/* --- Il binario ---------------------------------------------------------- */
.pb-caro.pb-caro ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: var(--pb-caro-gap) !important;
  margin: 0 !important;
  padding: 4px 2px 16px !important;
  list-style: none;

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  scroll-behavior: smooth;

  /* La barra di scorrimento non si mostra: il segnale e' la scheda che sbuca,
     e una barra grigia in mezzo a una vetrina e' rumore. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.pb-caro.pb-caro ul.products::-webkit-scrollbar {
  display: none;
}

/* La sfumatura sul bordo: c'e' solo finche' c'e' davvero altro da vedere, e la
   classe la mette il JavaScript guardando la posizione dello scorrimento. Una
   sfumatura che resta accesa in fondo alla lista e' una promessa non mantenuta. */
.pb-caro.pb-caro--altro ul.products {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
}

/* Mentre si trascina col mouse il cursore lo dice, e il testo non si
   seleziona: senza questo, trascinare significherebbe evidenziare i titoli. */
.pb-caro.pb-caro--presa ul.products {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

/* --- La scheda ----------------------------------------------------------- */
.pb-caro.pb-caro ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* `max()` MISURA IL CONTENITORE, non lo schermo. Nel carrello la colonna dei
     consigli e' larga 782 px anche su un monitor da 1440: una percentuale
     tarata sullo schermo produceva schede da 182 px, cioe' due parole per riga
     nel nome del prodotto. Il minimo in pixel e' il pavimento sotto il quale
     una scheda smette di essere leggibile, qualunque cosa dica la percentuale. */
  flex: 0 0 max(210px, var(--pb-caro-scheda)) !important;
  width: max(210px, var(--pb-caro-scheda)) !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 12px 12px 14px !important;
  box-sizing: border-box;

  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.022);
  text-align: left !important;
  overflow: hidden;
  transition: border-color 0.26s ease, background-color 0.26s ease, transform 0.26s cubic-bezier(0.16, 1, 0.30, 1);
}

/* IL BORDO, LATO PER LATO E FORZATO. Misurato dal vivo il 26 agosto 2026, notte,
   e in due posti diversi dava due difetti diversi:

     nel carrello        i tre lati giusti, il BASSO a `rgb(221,221,221)`
                         - e' il `border-bottom: 1px solid #ddd` che
                           WooCommerce mette di serie sulle schede in lista
     sulla scheda        tutti e quattro a `rgb(245,245,245)`, cioe' il colore
     prodotto            del testo: qualcuno ridichiara `border` senza dire di
                         che colore, e un bordo senza colore prende
                         `currentColor`

   Un bordo chiaro su fondo nero e' esattamente il contrario del "lusso
   quieto": la scheda si stacca a scatola invece di posarsi. Dichiarato qui in
   tre proprieta' separate perche' la scorciatoia `border` perdeva contro
   dichiarazioni piu' pesanti - e in un file che spegne shop-ui a ogni riga,
   un `!important` in piu' non e' un'eccezione, e' la regola della casa. */
.pb-caro.pb-caro ul.products li.product {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

@media (hover: hover) {
  .pb-caro.pb-caro ul.products li.product:hover {
    border-color: rgba(255, 206, 83, 0.55) !important;
    background: rgba(255, 255, 255, 0.045);
    transform: translateY(-3px);
  }
}

/* --- La fotografia: alta uguale per tutti, intera, mai ritagliata ---------
   L'ALTEZZA E' UN NUMERO, non una proporzione, e ci sono voluti tre tentativi
   per arrivarci. `aspect-ratio: 1/1` legava l'altezza alla larghezza della
   scheda: su una scheda larga 263 px la foto diventava alta 263, e la scheda
   sfiorava i 600. Poi `height: 100%` sul contenitore, che non ha funzionato
   affatto: fra la foto e il contenitore ci sono un `<a>` e un `<picture>` alti
   `auto`, e una percentuale che non trova un'altezza definita sopra di se'
   torna ad `auto`. Il numero fisso non ha catene da risalire, e ha il pregio
   che TUTTE le schede hanno la foto alla stessa altezza: e' quello che fa
   sembrare una fila di schede una fila e non un mucchio.

   E LA SPECIFICITA'. `.cross-sells .astra-shop-thumbnail-wrap img` perdeva
   contro `.cross-sells ul.products li.product img` di shop-ui, che ha un
   elemento in piu' nel conto. Da qui il selettore lungo: non e' pignoleria,
   e' l'unico modo di vincere quella riga. */
.pb-caro.pb-caro ul.products li.product .astra-shop-thumbnail-wrap {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 12px !important;
}

.pb-caro.pb-caro ul.products li.product .astra-shop-thumbnail-wrap a,
.pb-caro.pb-caro ul.products li.product .astra-shop-thumbnail-wrap picture {
  display: block !important;
  width: 100% !important;
}

.pb-caro.pb-caro ul.products li.product .astra-shop-thumbnail-wrap img {
  width: 100% !important;
  height: 168px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  padding: 10px;
  border-radius: 10px !important;
  background: #ffffff;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .pb-caro.pb-caro ul.products li.product .astra-shop-thumbnail-wrap img {
    height: 190px !important;
  }
}

/* LE ICONE-AZIONE SULLA FOTO NON SERVONO QUI, e una di loro faceva danno.
   Astra appoggia sulla miniatura tre pastiglie: lo sconto, "scegli le opzioni"
   e l'anteprima rapida. Le prime e l'ultima stanno in posizione assoluta e non
   occupano spazio; **"scegli le opzioni" no**: e' in flusso, e allungava il
   contenitore della foto di 46 pixel oltre la foto stessa, aprendo un buco
   bianco fra l'immagine e il nome del prodotto (misurato: contenitore 214 px
   per una foto di 168).
   Tolte tutte e due le azioni, e non solo quella che sballava: qui sotto c'e'
   gia' un pulsante largo quanto la scheda che fa esattamente la stessa cosa, e
   due modi di fare la stessa cosa a tre centimetri l'uno dall'altro non sono
   una comodita', sono un dubbio. Il badge dello sconto resta: quello informa. */
/* IL SELETTORE PASSA DAL CONTENITORE DELLA FOTO, e non e' un vezzo: quella
   pastiglia porta anche le classi `add_to_cart_button ajax_add_to_cart`, cioe'
   le stesse del pulsante largo qui sotto, e la regola che veste il pulsante la
   riaccendeva un attimo dopo averla spenta. Nominando il contenitore si dice
   quale dei due si intende, che e' l'unica differenza fra loro. */
.pb-caro.pb-caro ul.products li.product .astra-shop-thumbnail-wrap .ast-select-options-trigger,
.pb-caro.pb-caro ul.products li.product .astra-shop-thumbnail-wrap .ast-quick-view-trigger {
  display: none !important;
}

/* --- Il testo: una colonna, il pulsante sempre in fondo ------------------
   `align-items: stretch` E' LA RIGA CHE FA IL LAVORO. shop-ui centrava gli
   elementi (`align-items: center`), e in una colonna flessibile "centrare"
   vuol dire anche "stringere al contenuto": titolo, categoria e prezzo si
   riducevano a 113 px dentro una scheda larga 237, e il nome del prodotto
   andava a capo dopo due parole. Misurato dal vivo, non dedotto.

   Le regole con `body.woocommerce-cart` davanti sono di Astra Addon, che nel
   carrello impagina i consigli come schede ORIZZONTALI: mette il prezzo e il
   pulsante in posizione assoluta a destra e stringe il testo con un padding di
   7,5em. Erano loro a far finire il prezzo sopra la fotografia. */
.pb-caro.pb-caro .astra-shop-summary-wrap,
body.woocommerce-cart .woocommerce .pb-caro.pb-caro ul.products .ast-article-single .astra-shop-summary-wrap {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: stretch !important;
  gap: 3px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  padding: 0 !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  text-align: left !important;
}

.pb-caro.pb-caro .astra-shop-summary-wrap .ast-woo-product-category {
  order: 1;
  margin: 0 0 2px !important;
  font-size: 10.5px !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.pb-caro.pb-caro .astra-shop-summary-wrap .ast-loop-product__link {
  order: 2;
  display: block;
}

/* Due righe di titolo, mai tre: schede della stessa altezza si guardano
   meglio di schede allineate a caso. */
.pb-caro.pb-caro .astra-shop-summary-wrap .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 2.7em;
  font-size: 14px !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

/* Il prezzo torna nel flusso. Astra Addon lo ancorava in alto a destra
   (`position: absolute; right: 0; top: 1em`) perche' nella sua scheda
   orizzontale quello era il posto giusto: nella nostra, verticale, finiva
   stampato sopra la fotografia. */
.pb-caro.pb-caro .astra-shop-summary-wrap .price,
body.woocommerce-cart .pb-caro.pb-caro ul.products .ast-article-single .astra-shop-summary-wrap .price {
  order: 3;
  position: static !important;
  right: auto !important;
  top: auto !important;
  display: block !important;
  justify-self: auto !important;
  align-self: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
}

/* "IVA escl." accanto alla cifra e non sotto: in una scheda che deve stare in
   una schermata, una riga risparmiata vale piu' di un allineamento perfetto. */
.pb-caro.pb-caro .astra-shop-summary-wrap .price .woocommerce-price-suffix {
  display: inline !important;
  margin: 0 0 0 4px !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
}

.pb-caro.pb-caro .astra-shop-summary-wrap .price .abm-price-incl {
  display: block;
  font-size: 11px !important;
  font-weight: 400 !important;
  opacity: 0.72;
}

/* Il pulsante: pillola dorata a piena larghezza, spinta in fondo da `auto`
   cosi' tutte le schede lo hanno alla stessa altezza anche con titoli diversi. */
.pb-caro.pb-caro ul.products li.product .button,
.pb-caro.pb-caro ul.products li.product a.button,
.pb-caro.pb-caro ul.products li.product a.button.add_to_cart_button,
.pb-caro.pb-caro ul.products li.product a.add_to_cart_button,
.pb-caro.pb-caro ul.products li.product a.abm-xs-add,
body.woocommerce-cart .pb-caro.pb-caro ul.products .ast-article-single .astra-shop-summary-wrap > .button,
body.woocommerce-cart .pb-caro.pb-caro ul.products .ast-article-single .astra-shop-summary-wrap .ast-quick-view-button {
  order: 4;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  margin: 12px 0 0 !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #FFCE53 !important;
  color: #111111 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.9px;
  text-align: center !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.pb-caro.pb-caro ul.products li.product .button:hover,
.pb-caro.pb-caro ul.products li.product a.button:hover,
.pb-caro.pb-caro ul.products li.product a.add_to_cart_button:hover {
  background: #ffd977 !important;
  color: #111111 !important;
}

.pb-caro.pb-caro ul.products li.product a.added_to_cart {
  order: 5;
  position: static !important;
  display: block !important;
  width: 100% !important;
  justify-self: stretch !important;
  margin: 6px 0 0 !important;
  font-size: 11px !important;
  text-align: center;
  color: #FFCE53 !important;
}

/* --- I pallini ----------------------------------------------------------- */
.pb-caro__punti {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
}

.pb-caro__punto {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24) !important;
  cursor: pointer;
  transition: width 0.28s cubic-bezier(0.16, 1, 0.30, 1), background-color 0.28s ease;
}

.pb-caro__punto:hover,
.pb-caro__punto:focus {
  background: rgba(255, 255, 255, 0.45) !important;
}

.pb-caro__punto--attivo,
.pb-caro__punto--attivo:hover,
.pb-caro__punto--attivo:focus {
  width: 22px;
  background: #FFCE53 !important;
}

.pb-caro__punto:focus-visible {
  outline: 2px solid #FFCE53;
  outline-offset: 3px;
}

/* --- Chi ha chiesto meno movimento ne riceve meno ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pb-caro.pb-caro ul.products { scroll-behavior: auto; }
  .pb-caro.pb-caro ul.products li.product { transition: none; }
  .pb-caro.pb-caro ul.products li.product:hover { transform: none; }
  .pb-caro__punto { transition: none; }
}