/* ============================================================
   CAR SYSTEM FP — layer responsive supplementare.
   Il responsive principale (breakpoint 1080/920/820/560, drawer mobile)
   è già dentro sv-base.css. Qui solo rete di sicurezza e ritocchi
   WooCommerce che si aggiungono dopo. Caricato per ULTIMO.
   ============================================================ */

/* Rete di sicurezza contro lo scorrimento orizzontale.
   `hidden` però trasforma il body in un contenitore di scorrimento, e questo
   disattiva ogni `position: sticky` più in basso (è successo con la colonna
   del checkout). `clip` taglia allo stesso modo senza quell'effetto: si usa
   dove il browser lo supporta, con `hidden` come ripiego. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* Le griglie prodotto: due colonne sui tablet, **una sola** sul telefono.
   Sotto i 560px una card per riga — la foto del pezzo è l'unica cosa che
   distingue una centralina da un'altra, e a mezza riga non si guarda.
   Vale sia per l'archivio WooCommerce sia per `.pgrid` del design (Offerte,
   vetrine in home), che altrimenti resterebbero a due. */
@media (max-width: 820px) {
  .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .woocommerce ul.products[class*="columns-"] { grid-template-columns: 1fr !important; gap: 14px !important; }
  .pgrid { grid-template-columns: 1fr; gap: 14px; }
}

/* ⚠️ La cella della griglia larga metà riga.
   Sotto i 768px WooCommerce impone `width: 48%` alle sue celle con un selettore
   più specifico di quello del tema:

     .woocommerce ul.products[class*="columns-"] li.product   (0,4,2)
     .woocommerce ul.products li.product                      (0,3,2)  ← tema

   L'attributo `[class*="columns-"]` vale come una classe e fa vincere la regola
   di WooCommerce. Dentro un contenitore `grid` il `float` viene ignorato, ma la
   larghezza no: ogni card occupava **metà** della propria cella, con l'altra
   metà bianca e il bottone "Aggiungi" tagliato via da `overflow: hidden`.
   Qui la cella torna larga quanto la colonna. */
@media (max-width: 820px) {
  .woocommerce ul.products[class*="columns-"] > li.product,
  .woocommerce-page ul.products[class*="columns-"] > li.product {
    width: auto; float: none; margin: 0;
  }
}

/* Piede della card: prezzo a sinistra, bottone a destra, come sul desktop —
   con la card a tutta riga lo spazio c'è. A 390px il piede è largo 320px e ne
   servono 182 in italiano, 237 in tedesco (`python3 .pw/diag-etichetta-card.py`).

   La rete è `white-space: normal`, e vale a **ogni** larghezza: il `.btn` nasce
   `nowrap`, e un bottone che non può andare a capo non può nemmeno stringersi —
   sporge dalla card e viene tagliato via dall'`overflow: hidden`, che è come era
   sparito prima. Potendo mandare il testo a capo, al peggio diventa alto due
   righe. Serve anche su desktop: in tedesco l'etichetta è "In den Warenkorb",
   174px contro i 119 di "Aggiungi", e nel layout a tre colonne il piede è largo
   234px mentre prezzo e bottone ne vogliono 237 — sarebbe stato tagliato lì.
   Sweep di controllo: `python3 .pw/diag-card-larghezze.py de/shop/`. */
.pcard .foot .btn { white-space: normal; text-align: center; }

/* Il prodotto su richiesta non ha prezzo: nel piede resta il solo bottone
   "Richiedi preventivo", che è un'etichetta lunga. Da solo si prende tutta la
   riga e sta su una riga sola, invece di stringersi accanto a una scritta. */
.pcard .foot .btn.quote { flex: 1 1 auto; }

/* Il link "Visualizza carrello" che WooCommerce infila dopo il bottone dopo un
   acquisto in AJAX: con il mini carrello che si apre da solo è un doppione, e
   dentro la card sfondava il piede. */
.pcard .added_to_cart { display: none !important; }