/* =============================================================================
   LA PAGINA CARRELLO — passaggio di design del 04/09/2026
   -----------------------------------------------------------------------------
   Foglio di 000955. Via di fuga: ?pagcar=0

   COM'ERA IERI (versione del 03/09). La tabella era gia' diventata un elenco di
   schede, ma il titolare l'ha guardata e ha detto: «non mi sembra sia
   migliorata, deve essere graficamente piu' moderna, con qualche icona, pulita
   e di design». Aveva ragione, e guardando la pagina VERA — non il foglio — si
   capisce perche'. Cinque difetti, tutti misurati sul posto:

    1. L'ICONA IN CIMA ALLA SCHEDA ERA TAGLIATA e il quadratino grigio non si
       vedeva. Non era un problema di misure: era che dentro
       `td.product-thumbnail` WooCommerce mette un `div.position-relative` che
       contiene la figura E il pulsante «togli», e il quadratino grigio lo
       disegna gia' la casa su QUEL div:
           scatole-officina-03-negozio.css
           body.woocommerce-cart #main td.product-thumbnail .position-relative
             { width: 84px; background; border; border-radius; padding }
       Il foglio di ieri disegnava invece la CELLA (52 px, overflow:hidden) e ci
       appendeva l'icona come fratello del div: risultato, un div da 84 px
       schiacciato dentro una cella da 52 con overflow nascosto, e l'icona
       spinta sotto il taglio. Da oggi l'icona va DENTRO `.position-relative`
       (lo fa 000955) e la piastrella e' quel div — cioe' si usa il contenitore
       che la casa ha gia' vestito, invece di costruirne un secondo sopra.

    2. LA FASCIA BIANCA IN MEZZO ALLA SCHEDA. La griglia della riga aveva tre
       fasce (`nome`, `specif`, `quanti/totale`) e assegnava `grid-area: specif`
       alla lista delle specifiche. Ma quella lista NON e' figlia della riga: e'
       dentro `td.product-name`, e `grid-area` su un elemento che non e' figlio
       di una griglia non fa niente. La fascia centrale restava quindi vuota, e
       si vedeva. Da oggi le fasce sono due e la lista sta dove il markup la
       mette.

    3. LE OTTO SPECIFICHE ERANO OTTO RIGHE DI TESTO GRIGIO TUTTE UGUALI. Ora
       ognuna ha la sua icona (le disegna 000955, in linea, senza librerie), e
       l'etichetta sta SOPRA il valore in maiuscoletto minuto: cosi' le voci
       sono strette e ci stanno in due o tre colonne senza andare a capo — che
       era il motivo per cui il 03/09 si era tornati a una colonna sola.
       LA MISURA INTERNA e' promossa a riga d'apertura, larga tutta la scheda,
       su un velo petrolio: e' quella che identifica la scatola, il resto
       conferma.

    4. LA QUANTITA' SEMBRAVA UNA PASTIGLIA ROTTA. Va detto chiaro: in questo
       negozio LA QUANTITA' NON E' MODIFICABILE, e non per una svista. Lo decide
       il tema figlio:
           themes/porto-child/functions.php  →  //DISABLE QUANTITY ON CART
           add_filter('woocommerce_cart_item_quantity', 'disable_cart_item_quantity')
       che stampa `<strong>50</strong>` piu' un campo nascosto. La tiratura la
       si sceglie nello studio, dove muove il prezzo (000950). Farla SEMBRARE un
       campo di testo sarebbe una bugia: chi ci clicca sopra non ottiene niente.
       Qui diventa quindi un dato dichiarato — etichetta «Quantity» sopra, cifra
       grande in mono sotto — nella fascia in fondo alla scheda, insieme al
       totale di riga. Si legge come un fatto, non come un comando guasto.

    5. NON C'ERA UN ACCENTO. Ora ce ne sono tre e non uno di piu': il velo
       petrolio sotto la misura, le icone petrolio delle specifiche, il pulsante
       per la cassa. Tutto il resto e' inchiostro e linee.

   =============================================================================
   LA REGOLA DI QUESTO FOGLIO: OGNI RIGA COMINCIA CON `body.woocommerce-cart #main`
   -----------------------------------------------------------------------------
   Il foglio di ieri aveva le regole di struttura scritte due volte: una volta a
   sole classi (sezioni 1-8) e una volta col prefisso (sezione 9). Le prime
   PERDEVANO tutte, perche' la casa scrive con un ID:
       body.woocommerce-cart #main tr.cart_item td { padding: 28px 14px; ... }
   che vale (1,2,2) e batte qualunque selettore a sole classi. Misurato sulla
   pagina vera: `td.product-thumbnail` risultava `display:block` con padding
   `28px 14px` invece del `display:flex` e `padding:0` che il foglio credeva di
   aver imposto. Da qui la meta' degli spazi morti.

   Il rimedio e' quello di casa: STESSO PREFISSO, mai `!important`. Con
   `body.woocommerce-cart #main .woocommerce-cart-form ...` si sta a (1,3,x) e
   si vince sempre — e domani si potra' ancora correggere una pagina sola.
   Niente piu' doppioni: ogni regola sta scritta una volta, prefissata.

   ⚠️ E LE MEDIA QUERY. Una regola dentro `@media` batte una regola senza a
   parita' di specificita', quindi le varianti per telefono vanno dentro la loro
   `@media (max-width: 767px)` e basta: NON serve avvolgere il caso desktop in
   una `@media (min-width: …)`, e conviene non farlo. La finestra del browser di
   collaudo puo' essere larga 0 px — misurato oggi: `window.innerWidth` e'
   passato da 2504 a 280 a 70 fra una chiamata e l'altra — e una regola chiusa
   in una media query li' dentro non scatta mai.
   ============================================================================= */

:root {
  /* I colori non si inventano: sono quelli della casa (00-fondamenta), con un
     valore di ripiego se un giorno quel foglio non ci fosse. Il petrolio e'
     --sc-mar-testo #226E78 e non il #16808a scritto a mano ieri: due petroli
     diversi nella stessa pagina si notano anche senza saperli nominare. */
  --scp-fondo:   var(--sc-fondo,   #ffffff);
  --scp-tela:    var(--sc-incasso, #f4f6f7);
  --scp-bordo:   var(--sc-linea,   #eceef1);
  --scp-bordo2:  var(--sc-linea-2, #dde1e6);
  --scp-testo:   var(--sc-ink,     #0f1115);
  --scp-testo2:  var(--sc-ink-2,   #3f4750);
  --scp-tenue:   var(--sc-ink-3,   #616a75);
  --scp-accento: var(--sc-mar-testo, #226e78);
  --scp-velo:    var(--sc-mar-velo, #e9f3f4);
  --scp-raggio:  16px;
  --scp-curva:   var(--sc-curva, cubic-bezier(.22, 1, .36, 1));
  --scp-mono:    var(--sc-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
}

/* =============================================================================
   1 · LA TABELLA DIVENTA UN ELENCO DI SCHEDE
   -----------------------------------------------------------------------------
   PERCHE' `display:block` SU UNA TABELLA NON E' UN ABUSO: una tabella e' la
   struttura giusta quando le colonne si confrontano fra loro (prezzo di A
   contro prezzo di B). Qui non si confronta niente — c'e' una scatola per riga,
   ognuna con le sue misure — quindi la tabella era la struttura sbagliata gia'
   prima. I dati restano nell'ordine di lettura giusto.
   ============================================================================= */

body.woocommerce-cart #main .woocommerce-cart-form .shop_table.cart,
body.woocommerce-cart #main .woocommerce-cart-form table.cart-table {
  display: block;
  width: 100%;
  border: 0;
  border-collapse: separate;
  background: transparent;
  margin: 0 0 20px;
}

body.woocommerce-cart #main .woocommerce-cart-form table.cart-table thead { display: none; }
body.woocommerce-cart #main .woocommerce-cart-form table.cart-table tbody { display: block; }


/* ---------- LA SCHEDA -------------------------------------------------------
   DUE FASCE, non tre. La prima porta piastrella + nome + specifiche + prezzo
   unitario; la seconda e' il piede: quantita' a sinistra, totale di riga a
   destra, separati dal resto da un filo che attraversa tutta la scheda.
   La fascia vuota di ieri non esiste piu' perche' non esiste piu' la fascia. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item,
body.woocommerce-cart #main .woocommerce-cart-form tr.woocommerce-cart-form__cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas:
    "icona    nome     prezzo"
    "quantita quantita totale";
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
  background: var(--scp-fondo);
  border: 1px solid var(--scp-bordo2);
  border-radius: var(--scp-raggio);
  padding: 20px 22px;
  margin: 0 0 14px;
  box-shadow: 0 1px 2px rgb(15 17 21 / .04);
  transition: box-shadow .22s var(--scp-curva), border-color .22s var(--scp-curva);
}

/* Il sollevamento al passaggio del mouse: discreto, 1 px, nessun movimento del
   testo. Serve a dire «questa e' una cosa sola», non a fare spettacolo. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item:hover {
  border-color: #cfd6dc;
  box-shadow: 0 2px 4px rgb(15 17 21 / .04), 0 12px 28px rgb(15 17 21 / .07);
}

/* LE CELLE. Qui si annulla `padding: var(--sc-s5) var(--sc-s3)` e il filo in
   fondo che la casa mette a ogni `td` del carrello: dentro una scheda quel filo
   taglia in due il contenuto, e quel padding era meta' degli spazi morti.

   ⚠️ QUESTA REGOLA E' LA PIU' FORTE DEL FOGLIO, e la trappola e' proprio qui.
   `… .woocommerce-cart-form tr.cart_item > td` vale (1,3,3): TRE tipi, perche'
   `tr` e `td` contano anche loro. Le regole per la singola cella scritte come
   `… .woocommerce-cart-form td.product-quantity` valgono (1,3,2) e PERDEVANO
   contro questa — misurato: `display:flex` sulla quantita' risultava `block`, e
   l'icona finiva dove capitava perche' non c'era nessun flex a ordinarla. Non e'
   la casa che vinceva: era questo stesso foglio che vinceva contro se' stesso.
   Per questo ogni regola per cella qui sotto nomina anche `tr.cart_item`: con
   quello sta a (1,4,3) e passa davanti. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item > td {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  vertical-align: top;
  color: inherit;
}


/* =============================================================================
   2 · LA PIASTRELLA CON L'ICONA
   -----------------------------------------------------------------------------
   Il quadratino e' `div.position-relative`, non la cella: e' li' che WooCommerce
   mette la figura e il pulsante «togli», ed e' quello che la casa vestiva gia'
   (84 px). Lo si riporta a 60 e ci si mette dentro l'icona — lo fa 000955.

   `overflow` resta VISIBILE: il pulsante «togli» sta a cavallo dell'angolo
   (top/right -12 px, deciso in 03-negozio per avere un bersaglio da 36 px che
   un dito prende), e con `overflow:hidden` spariva.
   ============================================================================= */

body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-thumbnail {
  grid-area: icona;
  width: 60px;
  overflow: visible;
}

body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-thumbnail .position-relative {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: linear-gradient(160deg, var(--scp-velo), var(--scp-tela));
  border: 1px solid var(--scp-bordo2);
  border-radius: 14px;
  overflow: visible;
}

/* Si nasconde SOLO il segnaposto di WooCommerce. Una figura vera, se un giorno
   ci sara', continua a vedersi: i gusci oggi non ne hanno e non possono averla
   — ogni scatola e' diversa, e una foto sola sarebbe sbagliata per tutte tranne
   una — ma questo foglio non deve decidere per il futuro. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-thumbnail img.woocommerce-placeholder {
  display: none;
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-thumbnail img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}

body.woocommerce-cart #main .woocommerce-cart-form .scp-icona {
  /* Stessa trappola dell'icona della quantita': la piastrella e' un contenitore
     flex, e un elemento con una larghezza dichiarata la cede lo stesso perche'
     `flex-shrink` vale 1 di serie. Misurato sul telefono: l'icona chiedeva
     25 px e ne otteneva 10. */
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--scp-accento);
}


/* =============================================================================
   3 · IL NOME
   ============================================================================= */

body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name {
  grid-area: nome;
  font-family: var(--sc-disp, Lato, "Helvetica Neue", Arial, sans-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--scp-testo);
  /* Spazio a destra per il pulsante «togli», che sta all'angolo della
     piastrella ma sporge, e per il prezzo unitario. */
  padding-right: 4px;
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  transition: color .16s var(--scp-curva);
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name a:hover {
  color: var(--scp-accento);
}

/* LA PASTIGLIA DELLA MISURA (la mette 000913, accanto al nome). Sparisce SOLO
   quando la misura e' gia' diventata la riga d'apertura delle specifiche —
   000955 marca la riga con `.scp-ha-misura` proprio per questo. Scriverla due
   volte a 40 px di distanza era rumore; nasconderla sempre sarebbe stato
   peggio, perche' su un guscio senza specifiche resterebbe l'unica misura in
   pagina. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name .bl-riga-misura {
  display: inline-block;
  margin: 0 0 0 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--scp-velo);
  color: var(--scp-accento);
  font-family: var(--scp-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  vertical-align: 2px;
}

/* ⚠️ E VA DOPO, non prima. Le due regole hanno la stessa specificita' — (1,4,3)
   tutte e due — e a parita' vince l'ultima scritta: messa sopra, la riga che
   nasconde perdeva contro la riga che dipinge, e la pastiglia tornava a
   vedersi. Misurato guardando la pagina, non il foglio. */
body.woocommerce-cart #main .woocommerce-cart-form tr.scp-ha-misura td.product-name .bl-riga-misura {
  display: none;
}


/* =============================================================================
   4 · LE SPECIFICHE — la parte che il titolare chiamava «spenta»
   -----------------------------------------------------------------------------
   Le stampa il plugin WCPA come `li.wcpa_cart_meta_item`, con dentro
   `p.wcpa_cart_meta_item-label` e `div.wcpa_cart_meta_item-value`. Di fabbrica
   etichetta e valore stanno su due righe e il valore e' PIU' PICCOLO
   dell'etichetta: risalta «Size:», che il cliente sa gia', e si rimpiccolisce
   «150 x 120 x 80 mm», che e' quello che cerca.

   QUI: etichetta sopra in maiuscoletto minuto, valore sotto scuro e in evidenza,
   icona a sinistra che copre le due righe. Impaginate cosi' le voci sono
   STRETTE (l'etichetta non sta piu' sulla stessa riga del valore), e allora le
   colonne stanno in piedi davvero: il 03/09 si era tornati a una colonna sola
   perche' «Printing area: LID AND BOTTOM» andava a capo spezzando etichetta e
   valore. Misurato oggi: la voce piu' larga in forma impilata sta in 168 px,
   quindi `minmax(190px, 1fr)` non spezza niente.
   ============================================================================= */

body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name ul.wcpa_cart_meta {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  column-gap: 22px;
  row-gap: 13px;
  font-family: var(--sc-testo, Poppins, system-ui, sans-serif);
  color: var(--scp-testo2);
}

body.woocommerce-cart #main .woocommerce-cart-form li.wcpa_cart_meta_item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.35;
}

body.woocommerce-cart #main .woocommerce-cart-form li.wcpa_cart_meta_item .scp-segno {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--scp-accento);
  opacity: .78;
}

body.woocommerce-cart #main .woocommerce-cart-form p.wcpa_cart_meta_item-label {
  grid-column: 2;
  display: block;
  margin: 0 0 1px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scp-tenue);
  white-space: normal;
}

body.woocommerce-cart #main .woocommerce-cart-form .wcpa_cart_meta_item-value,
body.woocommerce-cart #main .woocommerce-cart-form .wcpa_cart_meta_item-value p {
  grid-column: 2;
  display: block;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--scp-testo);
  text-transform: none;
}

/* ---------- LA RIGA D'APERTURA: LA MISURA INTERNA ---------------------------
   Larga tutta la scheda, su un velo petrolio, col valore in mono e piu' grande.
   E' la sola voce che identifica la scatola: due clienti possono avere la
   stessa carta e la stessa lamina, non la stessa misura. Il resto conferma. */
body.woocommerce-cart #main .woocommerce-cart-form li.wcpa_cart_meta_item.scp-spec--misura {
  grid-column: 1 / -1;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--scp-velo);
}
body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--misura .scp-segno {
  width: 23px;
  height: 23px;
  margin-top: 0;
  opacity: 1;
}
body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--misura p.wcpa_cart_meta_item-label {
  color: var(--scp-accento);
  opacity: .85;
}
body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--misura .wcpa_cart_meta_item-value,
body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--misura .wcpa_cart_meta_item-value p {
  font-family: var(--scp-mono);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--scp-testo);
}

/* La nota «Die-line template not published for this size yet» e' un avviso, non
   una specifica: si toglie il grassetto e si colora di ambra, cosi' non si
   confonde con quello che il cliente ha scelto. */
body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--nota .scp-segno {
  color: var(--sc-stella, #c8860d);
  opacity: 1;
}
body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--nota .wcpa_cart_meta_item-value,
body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--nota .wcpa_cart_meta_item-value p {
  font-weight: 500;
  color: var(--scp-testo2);
}

/* I contenitori vuoti che il plugin «Upload files» lascia nella cella del nome
   (`mfp-hide`, `wcuf_cart_ajax_container…`): misurano zero ma partecipano al
   flusso e portano margini. Qui non hanno niente da fare. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name > div.mfp-hide,
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name > div[class^="wcuf_cart_ajax"] {
  display: none;
}


/* =============================================================================
   5 · IL PREZZO UNITARIO, E IL PIEDE DELLA SCHEDA
   ============================================================================= */

/* Il prezzo unitario in alto a destra, con la sua etichetta: senza etichetta,
   due cifre nella stessa scheda (10,30 e 515,00) si guardano e ci si chiede
   quale sia quella buona. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-price {
  grid-area: prezzo;
  text-align: right;
  white-space: nowrap;
  padding-top: 2px;
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-price::before {
  content: "Unit price";
  display: block;
  margin-bottom: 2px;
  font-family: var(--sc-testo, Poppins, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scp-tenue);
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-price .amount,
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-price .woocommerce-Price-amount {
  font-family: var(--scp-mono);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--scp-testo2);
}

/* ---------- IL PIEDE --------------------------------------------------------
   Le due celle in fondo portano lo stesso filo sopra: messe una accanto
   all'altra, il filo attraversa la scheda da parte a parte senza che serva un
   elemento in piu' nel markup. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity,
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-subtotal {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--scp-bordo);
}

/* LA QUANTITA'. Non e' modificabile — lo decide il tema figlio, vedi la nota in
   cima — quindi si presenta per quello che e': un dato dichiarato. Etichetta
   sopra, cifra grande in mono sotto. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity {
  grid-area: quantita;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  white-space: nowrap;
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity::before {
  content: "Quantity";
  font-family: var(--sc-testo, Poppins, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scp-tenue);
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--scp-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--scp-testo);
}
/* L'icona a quadretti: dice «pezzi» senza una parola in piu', e senza inventare
   un'unita' di misura che il negozio non scrive da nessun'altra parte.
   `order: -1` perche' il `::before` con l'etichetta e' sempre il PRIMO figlio di
   flex, e l'icona, aggiunta al markup, arriverebbe dopo: si vedeva
   «QUANTITY ▦ 50», con il segno incastrato fra l'etichetta e la cifra. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity .scp-segno {
  order: -1;
  align-self: center;
  /* `flex: 0 0 auto` NON e' pignoleria: in una riga flex stretta un elemento con
     una larghezza dichiarata la CEDE lo stesso, perche' `flex-shrink` vale 1 di
     serie. Misurato sul telefono a 375 px: l'icona risultava alta 16 px e larga
     ZERO, cioe' invisibile, mentre sul desktop si vedeva benissimo. */
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--scp-accento);
  opacity: .72;
}

/* IL TOTALE DI RIGA: la cifra piu' grande della scheda. */
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-subtotal {
  grid-area: totale;
  text-align: right;
  white-space: nowrap;
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-subtotal .amount,
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-subtotal .woocommerce-Price-amount {
  font-family: var(--scp-mono);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--scp-testo);
}


/* =============================================================================
   6 · IL PULSANTE «TOGLI»
   -----------------------------------------------------------------------------
   Forma, misura (36 px) e colori li decide gia' 03-negozio, e sono giusti: un
   bersaglio piu' piccolo non lo prende un dito, e sbagliare mira qui significa
   non riuscire a togliere un articolo. Qui si fa solo cio' che quella regola non
   poteva sapere: che la piastrella ora e' larga 60 px, quindi il pallino si
   riporta piu' vicino all'angolo (a -12 px sporgeva quasi fuori dalla scheda).
   ============================================================================= */

body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-thumbnail a.remove.remove-product {
  top: -11px;
  right: -15px;
  z-index: 2;
}


/* =============================================================================
   7 · COUPON E «AGGIORNA»
   ============================================================================= */

body.woocommerce-cart #main .woocommerce-cart-form td.actions {
  display: block;
  padding: 2px 0 0;
  border: 0;
  background: transparent;
}
body.woocommerce-cart #main .woocommerce-cart-form .coupon input[type="text"] {
  border-radius: 10px;
}
body.woocommerce-cart #main .woocommerce-cart-form .coupon input[type="text"]:focus {
  outline: none;
  border-color: var(--scp-accento);
  box-shadow: 0 0 0 3px rgb(34 110 120 / .14);
}


/* =============================================================================
   8 · LA COLONNA DEI TOTALI
   -----------------------------------------------------------------------------
   ⚠️ QUI SI TOGLIE, NON SI AGGIUNGE. La scheda dei totali la disegna gia'
   03-negozio, e bene: voci a sinistra, cifre in mono a destra, il totale
   staccato da una linea marcata, e `position: sticky` sul `.card`.

   Il foglio di ieri non lo sapeva e ridisegnava tutto daccapo con selettori
   `.cart-collaterals .shop_table …` — che qui NON FANNO MATCH: la tabella dei
   totali di Porto ha classe `responsive cart-total`, non `shop_table`. Erano
   trenta righe di CSS morto. In compenso metteva bordo, sfondo e padding su
   `.cart_totals`, che AVVOLGE il `.card` gia' disegnato: due riquadri bianchi
   uno dentro l'altro, misurati 421 px contro 379. Quel doppio riquadro sparisce.

   Restano tre cose sole: il riquadro esterno azzerato, il pulsante per la cassa
   e la riga che dice cosa non e' compreso.
   ============================================================================= */

body.woocommerce-cart #main .cart-collaterals .cart_totals {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* IL PULSANTE PER LA CASSA: il comando piu' importante della pagina.
   Non e' `.checkout-button` come in WooCommerce di serie — Porto lo stampa come
   `a.btn.btn-v-dark.w-100.m-t-lg.py-3`, e le regole scritte sul nome di serie
   non lo toccavano nemmeno. Il comando piu' importante si nomina per com'e'
   fatto davvero. */
body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout .btn,
body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout a.btn,
body.woocommerce-cart #main .cart-collaterals .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--scp-accento);
  color: #fff;
  font-family: var(--sc-disp, Lato, "Helvetica Neue", Arial, sans-serif);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 12px rgb(34 110 120 / .26);
  transition: transform .16s var(--scp-curva),
              box-shadow .22s var(--scp-curva),
              background-color .22s var(--scp-curva);
}
body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout .btn:hover,
body.woocommerce-cart #main .cart-collaterals .checkout-button:hover {
  background: var(--sc-mar-scuro, #1a555e);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgb(34 110 120 / .32);
}
body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout .btn:active {
  transform: translateY(0);
}
body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout .btn:focus-visible {
  outline: 2px solid var(--scp-accento);
  outline-offset: 3px;
}

/* LA RIGA CHE DICE COSA NON E' COMPRESO — la mette 000955, dentro il corpo
   della scheda. Un totale senza quella riga fa credere che sia il prezzo
   finale, e la sorpresa arriva alla cassa: e' il punto in cui si perdono i
   carrelli gia' pieni. */
body.woocommerce-cart #main .cart-collaterals .scp-nota {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--scp-tela);
  font-size: 12px;
  line-height: 1.5;
  color: var(--scp-tenue);
}
body.woocommerce-cart #main .cart-collaterals .scp-nota .scp-segno {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--scp-tenue);
}


/* =============================================================================
   9 · IL TELEFONO — provata a 375 px
   -----------------------------------------------------------------------------
   Non e' il desktop stretto: e' un'altra impaginazione, e le tre decisioni sono
   tutte state prese guardando la pagina dentro un telaio da 375 px, non a mente.

   · LE SPECIFICHE RESTANO IMPILATE, una colonna. Il primo tentativo le rimetteva
     IN LINEA (etichetta a sinistra, valore a destra) per guadagnare in altezza.
     Misurato: nella colonna che resta — 375 meno i margini di pagina, meno il
     riquadro, meno la piastrella, restano circa 250 px — «INTERNAL PROTECTION»
     accanto a «No Internal Shape» spezzava l'etichetta in QUATTRO righe di due
     lettere. Meglio una scheda piu' alta che una parola a coriandoli.

   · IL PIEDE HA TRE COLONNE, non due. Con le due della fascia di sopra
     (piastrella 48 px | resto) la quantita' finiva schiacciata nei 48 px della
     piastrella e si sovrapponeva al totale: misurato, si leggeva «QUANTITSU50».

   · LA CROCETTA VA ALL'ANGOLO DELLA SCHEDA. Sul telefono la casa la porta a
     44 px — giusto, e' il comando con cui si toglie un articolo — ma 44 px
     appoggiati su una piastrella da 48 la coprono tutta: l'icona della scatola
     spariva sotto il pallino. Qui la piastrella smette di essere il riferimento
     (`position: static`) e il pallino si ancora alla SCHEDA, in alto a destra,
     dove sul telefono non c'e' niente — il prezzo unitario e' nascosto. Al nome
     si lascia il posto per non finirci sotto.
   ============================================================================= */

@media (max-width: 767px) {

  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item,
  body.woocommerce-cart #main .woocommerce-cart-form tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas:
      "icona    nome     nome"
      "quantita quantita totale";
    column-gap: 13px;
    padding: 16px;
    border-radius: 14px;
  }

  /* ⚠️ LA PIASTRELLA CAMBIA CONTENITORE, e c'e' una ragione precisa.
     Il pallino «togli» e' `position:absolute` e si ancora al primo antenato
     posizionato, che sul desktop e' proprio `div.position-relative`. Sul
     telefono quel pallino diventa 44 px (lo vuole 03-negozio, ed e' giusto: e'
     il comando con cui si toglie un articolo) e appoggiato su una piastrella da
     48 la copre tutta — misurato: pallino da x 49 a 93, piastrella da 56 a 104.
     L'icona della scatola spariva sotto.

     `position: static` sul div NON funziona: `.position-relative` e' una utility
     di Bootstrap dentro il tema, scritta `position: relative !important`, e un
     `!important` lo batte solo un altro `!important` — che in questa casa non si
     usa, perche' renderebbe impossibile correggere una pagina sola domani.

     La via che resta e' `display: contents`: il div NON GENERA PIU' UNA SCATOLA,
     quindi il suo `position:relative` non ha piu' niente da posizionare, e il
     pallino risale al primo antenato posizionato vero — la SCHEDA, che e'
     `position:relative` dalla prima riga di questo foglio. Cosi' il pallino va
     all'angolo in alto a destra della scheda, dove sul telefono non c'e' niente
     perche' il prezzo unitario e' nascosto. La piastrella, restata senza il suo
     contenitore, la disegna direttamente la cella. */
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-thumbnail .position-relative {
    display: contents;
  }
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-thumbnail {
    position: static;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--scp-velo), var(--scp-tela));
    border: 1px solid var(--scp-bordo2);
    border-radius: 12px;
  }
  body.woocommerce-cart #main .woocommerce-cart-form .scp-icona { width: 25px; height: 25px; }

  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-thumbnail a.remove.remove-product {
    top: 8px;
    right: 8px;
    left: auto;
  }

  /* Il posto della crocetta: 44 px piu' il respiro. Senza questo, un nome lungo
     ci finisce sotto e non si legge piu'. */
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name {
    font-size: 16px;
    padding-right: 52px;
  }

  /* Il prezzo unitario sparisce: su 375 px c'e' posto per il totale di riga, che
     e' il numero che il cliente controlla. L'unitario resta nella scheda del
     prodotto e nel preventivo. */
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-price { display: none; }

  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name ul.wcpa_cart_meta {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 11px;
    margin-top: 12px;
  }
  body.woocommerce-cart #main .woocommerce-cart-form li.wcpa_cart_meta_item.scp-spec--misura {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 9px 12px;
  }
  body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--misura .wcpa_cart_meta_item-value,
  body.woocommerce-cart #main .woocommerce-cart-form li.scp-spec--misura .wcpa_cart_meta_item-value p {
    font-size: 15px;
  }

  /* IL PIEDE. Quantita' a sinistra, totale a destra, e le due etichette scritte
     con lo stesso maiuscoletto delle specifiche: la casa le disegna in mono a
     12 px per la tabella a righe, che qui non c'e' piu'. */
  /* Etichetta SOPRA il valore, come nelle specifiche. In linea — etichetta e
     cifra sulla stessa riga — i due blocchi finivano a 13 px l'uno dall'altro e
     si leggeva «QUANTITY 50 SUBTOTAL €515.00» tutto attaccato: misurato, la
     colonna del totale si prendeva 175 dei 320 px della scheda e alla quantita'
     ne restavano 98. Su due righe ognuno ha il suo spazio. */
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity {
    display: grid;
    grid-template-columns: 16px auto;
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;
    /* ⚠️ `justify-content` VA RIMESSO A MANO. La casa disegna questa cella come
       flex con `justify-content: space-between` (03-negozio, blocco telefono):
       cambiando `display` in `grid` quella proprieta' NON sparisce, e le colonne
       della griglia si allargavano a riempire la cella — l'icona a 19 px dal
       bordo e il numero a 113, con un buco in mezzo. */
    justify-content: start;
    text-align: left;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--scp-bordo);
  }
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity::before {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity .scp-segno {
    grid-column: 1;
    grid-row: 2;
  }
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity strong {
    grid-column: 2;
    grid-row: 2;
  }
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-subtotal {
    display: grid;
    justify-content: end;
    justify-items: end;
    row-gap: 3px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--scp-bordo);
  }
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-subtotal::before,
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-quantity::before {
    font-family: var(--sc-testo, Poppins, system-ui, sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--scp-tenue);
    white-space: nowrap;
  }
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-subtotal .amount,
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-subtotal .woocommerce-Price-amount {
    font-size: 18px;
  }

  /* Il comando piu' importante, sotto il pollice e con il respiro della barra
     di sistema dell'iPhone. */
  body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout .btn,
  body.woocommerce-cart #main .cart-collaterals .checkout-button {
    padding: 17px 20px;
    font-size: 15.5px;
  }
  body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}


/* =============================================================================
   10 · LE ANIMAZIONI, E CHI NON LE VUOLE
   -----------------------------------------------------------------------------
   Le schede entrano dal basso, sfalsate di 50 ms. `animation-fill-mode` e'
   `backwards` e NON `both`, di proposito: con `both` una scheda resterebbe a
   `opacity: 0` se l'animazione non partisse mai — e succede, sulle schede che il
   browser tiene in secondo piano `requestAnimationFrame` non gira. Con
   `backwards` lo stato di partenza vale solo durante l'eventuale ritardo: se
   l'animazione non parte, la scheda e' semplicemente li', visibile.

   Chi ha chiesto al sistema operativo di non ricevere animazioni non le riceve:
   i disturbi vestibolari non sono una preferenza estetica.
   ============================================================================= */

@keyframes scp-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item {
  animation: scp-entra .42s var(--scp-curva) backwards;
}
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item:nth-of-type(2) { animation-delay: .05s; }
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item:nth-of-type(3) { animation-delay: .10s; }
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item:nth-of-type(4) { animation-delay: .15s; }
body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item:nth-of-type(n+5) { animation-delay: .20s; }

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item {
    animation: none;
    transition: none;
  }
  body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout .btn,
  body.woocommerce-cart #main .cart-collaterals .checkout-button,
  body.woocommerce-cart #main .woocommerce-cart-form tr.cart_item td.product-name a {
    transition: none;
  }
  body.woocommerce-cart #main .cart-collaterals .wc-proceed-to-checkout .btn:hover,
  body.woocommerce-cart #main .cart-collaterals .checkout-button:hover {
    transform: none;
  }
}