/* =============================================================================
   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: 12px !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: 14px !important;
  font-weight: 400 !important;
}

.pb-caro.pb-caro .astra-shop-summary-wrap .price .abm-price-incl {
  display: block;
  font-size: 14px !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: 12px !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: 14px !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; }
}

/* ==========================================================================
   OFFERTE WOW: LA STESSA GIOSTRA SU UNA VETRINA CHE NON E' WOOCOMMERCE
   --------------------------------------------------------------------------
   Nei primi tre posti il binario e' `ul.products` e le schede sono
   `li.product`. Su Offerte WOW la vetrina e' una griglia di ancore
   (`.pb-grid` con dentro `.pb-card`), disegnata da offerte-wow.css: stessa
   giostra, altre due parole.

   QUI SERVONO POCHE RIGHE, non una copia del foglio. Tutto quello che sta
   sopra e che parla di `.astra-shop-thumbnail-wrap`, prezzi e pulsanti veste
   la scheda di WooCommerce, e a `.pb-card` non serve: quella se la veste gia'
   offerte-wow.css. Del carosello servono solo le due cose che lo fanno
   carosello, cioe' il binario che scorre con l'aggancio e la scheda che non si
   restringe. Le misure sono le stesse variabili di sopra, quindi le due
   vetrine si comportano identiche a ogni larghezza.

   MISURATO PRIMA DI FARLO, telefono da 375 px, 2 settembre 2026: la pagina era
   alta 23.837 px, quasi trenta schermate, e le cinque griglie ne facevano
   12.001.
   ========================================================================== */

.pb-caro.pb-caro .pb-grid {
  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;

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

  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

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

.pb-caro.pb-caro--altro .pb-grid {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
}

.pb-caro.pb-caro--presa .pb-grid {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

/* La scheda non si restringe: senza `flex: 0 0`, dodici schede in un binario
   flessibile si spartiscono la larghezza e diventano dodici colonne di due
   parole. `max()` misura il contenitore, non lo schermo, come sopra. */
.pb-caro.pb-caro .pb-grid .pb-card {
  flex: 0 0 max(var(--pb-caro-scheda), 210px) !important;
  width: max(var(--pb-caro-scheda), 210px) !important;
  max-width: none !important;
  margin: 0 !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* L'apparizione a scomparsa non si usa dentro un binario che scorre: una
   scheda fuori schermo resterebbe invisibile per sempre, perche' l'osservatore
   guarda la finestra e non il binario. */
.pb-caro.pb-caro .pb-grid .pb-card.reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pb-caro.pb-caro .pb-grid { scroll-behavior: auto; }
  .pb-caro.pb-caro .pb-grid .pb-card { transition: none; }
  .pb-caro.pb-caro .pb-grid .pb-card:hover { transform: none; }
}

/* ==========================================================================
   SI PUO' AFFERRARE, E IL CURSORE LO DEVE DIRE
   --------------------------------------------------------------------------
   Il trascinamento col mouse c'era da sempre, ma non lo trovava nessuno: il
   cursore restava quello normale, e l'unico invito a scorrere erano le due
   frecce in alto. Una mano aperta e' il modo con cui ogni vetrina del web dice
   "prendimi", e costa una riga.

   SOLO DOVE C'E' UN MOUSE. Su un telefono il cursore non esiste, e la regola
   non serve a niente: `pointer: fine` la tiene fuori dal dito.

   E VALE ANCHE SULLE SCHEDE, non solo sugli spazi fra una e l'altra. Le schede
   sono link, e il browser ci mette la manina: dentro una vetrina che si
   trascina quella manina dice la cosa meno utile delle due, perche' che siano
   link si vede gia' da come sono fatte.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .pb-caro.pb-caro ul.products,
  .pb-caro.pb-caro ul.products li.product,
  .pb-caro.pb-caro ul.products li.product a,
  .pb-caro.pb-caro .pb-grid,
  .pb-caro.pb-caro .pb-grid .pb-card {
    cursor: grab;
  }

  .pb-caro.pb-caro--presa ul.products,
  .pb-caro.pb-caro--presa ul.products li.product,
  .pb-caro.pb-caro--presa ul.products li.product a,
  .pb-caro.pb-caro--presa .pb-grid,
  .pb-caro.pb-caro--presa .pb-grid .pb-card {
    cursor: grabbing;
  }
}

/* L'immagine non si stacca dalla scheda. `draggable="false"` lo direbbe nel
   markup, ma il markup delle schede WooCommerce non lo scriviamo noi: questa
   riga fa lo stesso lavoro da fuori, e vale per tutte e quattro le vetrine. */
.pb-caro.pb-caro img {
  -webkit-user-drag: none;
  user-select: none;
}

/* ==========================================================================
   LA CORSA DOPO IL RILASCIO
   --------------------------------------------------------------------------
   Mentre l'inerzia e' in corso l'aggancio deve stare zitto: se resta acceso,
   il browser tira verso la scheda piu' vicina a ogni fotogramma mentre noi
   spingiamo dall'altra parte, e il risultato e' un tremolio. Si spegne per la
   durata della corsa e si riaccende alla fine, ed e' allora che il binario si
   allinea: la corsa finisce sempre su una scheda intera.

   E `scroll-behavior: auto`, non `smooth`: qui lo scorrimento lo scriviamo noi
   fotogramma per fotogramma, e un'animazione del browser sopra la nostra
   sarebbe una seconda mano sul volante.
   ========================================================================== */

.pb-caro.pb-caro--lancio ul.products,
.pb-caro.pb-caro--lancio .pb-grid {
  scroll-snap-type: none;
  scroll-behavior: auto;
}