/**
 * Carrello e checkout, vestiti come il resto del sito.
 *
 * PERCHÉ SERVE UN FOGLIO APPOSTA
 * Il carrello di questo sito è a **blocchi** (`wp:woocommerce/cart`), non lo shortcode: si
 * costruisce in JavaScript dalla Store API e porta con sé lo stile di WooCommerce, che non
 * sa niente del marchio. Il risultato di partenza, misurato: il blocco **sporge di 30 px a
 * sinistra** rispetto al titolo della pagina, i nomi dei prodotti sono grigi a 13 px e il
 * pulsante di pagamento è un rettangolo grigio ardesia — mentre il sito ha testo verde
 * scuro e pulsanti a pillola.
 *
 * SUI SELETTORI, E SUL PERCHÉ QUI NON C'È UN `!important`
 * Le classi di WooCommerce Blocks sono quasi tutte **singole** (`.wc-block-...`), quindi un
 * selettore a due classi le batte senza forzature. Il caso più insidioso era il margine
 * negativo: viene da `.alignwide { margin-inline: -80px }` nel `theme.css` di WooCommerce,
 * anche quello a una classe sola. Sono andato a cercarlo invece di sovrascriverlo alla
 * cieca, e infatti bastava `.wp-block-woocommerce-cart.alignwide`.
 *
 * @package hello-elementor-child
 */

.wc-block-cart,
.wp-block-woocommerce-checkout {
	--lds-testo: #012F2B;
	--lds-rosso: #FF3B32;
	--lds-carta: #F7F5F1;
	--lds-bordo: #D9D6D0;
	--lds-tenue: #7E7E7E;
}

/* ------------------------------------------------------------- allineamento --- */

/*
 * `alignwide` tira il blocco fuori dalla boxatura di 80 px per lato. Sul resto del sito
 * quella larghezza extra non esiste — header, piede e titolo stanno tutti nella stessa
 * scatola — e il carrello finiva 30 px oltre il bordo sinistro dello schermo.
 */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
	margin-inline: 0;
}

/* ---------------------------------------------------------------- tipografia --- */

/*
 * QUATTRO classi, e c'e' voluto un errore per arrivarci.
 *
 * WooCommerce dimensiona il nome con
 * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name`.
 * Leggendolo in fretta avevo contato `table.wc-block-cart-items` come **una** classe,
 * mentre e' un elemento **piu** una classe: il loro selettore ne ha tre, non due. Con due
 * perdevo di brutto, con tre pareggiavo — e a parita di peso vince chi viene caricato dopo,
 * che e' il loro foglio. Il sintomo era ambiguo e per questo istruttivo: il **colore**
 * passava e il **corpo** no, cioe' la regola c'era ma ne perdeva solo una parte.
 *
 * Trovato spegnendo i fogli di stile uno alla volta e guardando quale spostava il valore,
 * invece di continuare a contare le classi a occhio.
 */
.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-product-name {
	color: var(--lds-testo);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.wc-block-cart .wc-block-components-product-price,
.wc-block-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-product-price {
	color: var(--lds-testo);
	font-weight: 600;
}

.wc-block-cart .wc-block-cart__totals-title,
.wc-block-cart .wc-block-components-title {
	color: var(--lds-testo);
	letter-spacing: 0;
}

/*
 * Il riepilogo della configurazione — carta, copertina, frontespizio, note — è la parte che
 * dice all'utente **che cosa ha comprato davvero**, visto che il prodotto si chiama sempre
 * «Stampa e rilegatura Tesi». Merita di leggersi: etichetta tenue, valore nel colore del
 * testo, e una riga per voce invece del blocco compatto che WooCommerce usa per le varianti.
 */
.wc-block-cart .wc-block-components-product-details {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.55;
}

.wc-block-cart .wc-block-components-product-details__name {
	color: var(--lds-tenue);
	font-weight: 500;
}

.wc-block-cart .wc-block-components-product-details__value {
	color: var(--lds-testo);
}

/*
 * Una voce per riga, e via il separatore.
 *
 * WooCommerce incolonna le voci in linea separandole con uno ` / ` dentro uno span
 * `aria-hidden`: e' pensato per le varianti di un prodotto — «Colore: rosso / Taglia: M» —
 * dove le voci sono due o tre. Qui sono **otto**, fra documento, pagine, pagine a colori,
 * carta, copertina, frontespizio e note, e in fila diventano un paragrafo che nessuno legge.
 * Il separatore e' gia' nascosto ai lettori di schermo, quindi toglierlo dalla vista non
 * porta via niente a nessuno.
 */
.wc-block-cart .wc-block-components-product-details > span {
	display: block;
}

.wc-block-cart .wc-block-components-product-details > span > span[aria-hidden="true"] {
	display: none;
}

/*
 * Il prezzo nella colonna dei totali ha il corpo del NOME, non quello delle note.
 * Sono le due informazioni che l'occhio cerca per prime in una riga di carrello — che cosa
 * e quanto — e tenerle a due corpi diversi le mette su due piani di lettura diversi.
 * Quattro classi per la solita ragione: WooCommerce lo dimensiona con un selettore che
 * comincia per `table.wc-block-cart-items`.
 */
.wc-block-cart .wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-cart .wc-block-cart-items .wc-block-cart-item__total .wc-block-formatted-money-amount {
	color: var(--lds-testo);
	font-size: 17px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ pulsanti --- */

/*
 * Pillole verde scuro, come «Aggiungi al carrello» nel configuratore e come i pulsanti del
 * tema. Il predefinito di WooCommerce è un rettangolo grigio ardesia (`#32373c`), che accanto
 * al resto del sito si legge come un pulsante di un'altra applicazione.
 */
.wc-block-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	/*
	 * `border: 0` non e' pignoleria: senza, «Effettua ordine» ha un filo rosa-arancio attorno.
	 * Viene dal `reset.css` del tema, che su ogni `button` mette
	 * `border: 1px solid rgb(204, 51, 102)` — il colore di servizio con cui si notano i pulsanti
	 * non stilati. Questa regola dichiarava fondo, raggio, testo e imbottitura ma **non** il
	 * bordo, quindi quello del reset sopravviveva: la pillola verde scuro con un contorno rosa.
	 * Misurato il 2026-08-21: era l'unico pulsante della pagina a portarselo dietro.
	 */
	border: 0;
	border-radius: 999px;
	background-color: var(--lds-testo);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	padding: 16px 32px;
	text-transform: none;
}

/* E' un `<a>`: la sottolineatura dei link va tolta, su una pillola non ci sta. */
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-cart a.wc-block-cart__submit-button {
	text-decoration: none;
}

/*
 * Al passaggio la pillola diventa ROSSA, non sbiadita.
 *
 * `opacity: .88` su un verde scuro sopra un fondo chiaro non si legge come un cambio di
 * stato: si legge come un pulsante spento. La convenzione del sito e' invece uno **scambio**
 * di colore — la pillola «Contatti» in testata e' rossa `#FF3B32` e al passaggio diventa
 * verde scuro `#012F2B`, e sono i due colori che il kit di Elementor chiama `accent` e
 * `secondary`. Qui si fa l'inverso, che e' la stessa regola letta dall'altro capo.
 */
.wc-block-cart .wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-cart__submit-button:focus,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:focus {
	background-color: var(--lds-rosso);
	color: #fff;
	opacity: 1;
}

/* Il link «continua gli acquisti» e simili: verde scuro, non il blu di sistema. */
.wc-block-cart a,
.wp-block-woocommerce-checkout a {
	color: var(--lds-testo);
}

/* --------------------------------------------------------------- riquadro totali --- */

/*
 * La colonna dei totali diventa una scheda, come il foglio del configuratore: stesso fondo
 * carta, stesso raggio di 24 px, stesso bordo. Serve a far capire a colpo d'occhio che
 * quello è il riepilogo e non un'altra colonna di contenuto.
 */
/* `wc-block-cart__sidebar` e `wc-block-components-sidebar` stanno sullo STESSO elemento:
 * cercarne uno dentro l'altro non trovava niente, e la scheda non compariva. */
.wc-block-cart .wc-block-cart__sidebar {
	padding: 28px;
	border: 1px solid var(--lds-bordo);
	border-radius: 24px;
	background: var(--lds-carta);
}

.wc-block-cart .wc-block-components-totals-item__label {
	color: var(--lds-tenue);
}

/* Il totale finale è il numero che conta: va letto senza cercarlo. */
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--lds-testo);
	font-size: 26px;
	font-weight: 700;
}

/* ------------------------------------------- la riga del carrello sui telefoni stretti --- */

/*
 * IL PREZZO CHE USCIVA DALLO SCHERMO — trovato con la passata responsive del 2026-10-07.
 *
 * Sotto i 700 px WooCommerce impagina la riga come griglia `80px 132px`: immagine, poi il
 * nome che si allarga sulle colonne 2-3, e il totale che finisce in una **quarta colonna
 * implicita**, larga quanto il suo contenuto — il prezzo piu' il nostro badge «Risparmia»,
 * 101 px. Somma minima della riga: 361 px. Misurato quanto sbordava la pagina:
 *
 *   375 → 2-11 px    360 → 17 px    344 → 33 px    320 → 57 px    390 e oltre → 0
 *
 * cioe' su ogni telefono «stretto», compreso il Galaxy Fold chiuso da cui era partita la
 * correzione della testata.
 *
 * Il rimedio: sotto i 400 px il totale va **sotto** il nome, nella stessa colonna, e la
 * colonna del nome diventa elastica (`minmax(0, 1fr)`, che a differenza di `1fr` puo'
 * scendere sotto il proprio contenuto). Esito, provato iniettando la regola: scorrimento
 * **0** a 320, 344, 375, 390 e 400; a 414 e 768 la riga resta quella di WooCommerce.
 *
 * IL PESO DEI SELETTORI, e qui c'e' un errore mio da non ripetere. La prima stesura
 * nominava le celle senza la riga (`… .wc-block-cart-items .wc-block-cart-item__total`):
 * stesso peso delle regole di WooCommerce, che caricate dopo vincevano. Restava applicata
 * solo la griglia a due colonne, quindi lo scorrimento spariva — e la prova lo dava per
 * buono — ma il nome restava su due colonne e il prezzo sulla riga 1, **disegnato sopra il
 * nome**. Me ne sono accorto guardando lo screenshot, non dai numeri: avevo misurato lo
 * scorrimento e non la sovrapposizione. Con `.wc-block-cart-items__row` nel selettore le
 * celle pesano (0,5,1) contro (0,4,1), a prescindere dall'ordine di caricamento.
 *
 * Esito verificato misurando che il prezzo **cominci dove finisce il nome**: 442 su 442 a
 * 344, idem a 320, 375, 390 e 400, tutto dentro lo schermo; a 414 e 768 la riga resta
 * quella di WooCommerce, col prezzo affiancato.
 *
 * L'ultima regola allinea a sinistra prezzo e badge «Risparmia»: WooCommerce li impila in
 * un contenitore allineato a destra, che ha senso quando il prezzo sta in fondo alla riga
 * e non ne ha piu' quando sta sotto il nome.
 */
@media (max-width: 400px) {
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 80px minmax(0, 1fr);
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 3;
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2 / 3;
		grid-row: 2;
		justify-self: start;
		text-align: left;
	}

	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper {
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------ quantità --- */

/*
 * `overflow: hidden` per una ragione sola: senza, il fondo che i due pulsanti prendono al
 * passaggio e' un rettangolo, e sborda dagli angoli tondi della pillola. Dare il raggio
 * anche ai pulsanti non basterebbe — servirebbe tondo solo da un lato per ciascuno, e
 * cambierebbe di nuovo se un giorno il selettore diventasse quadrato. Il ritaglio invece
 * segue la forma del contenitore qualunque essa sia.
 */
.wc-block-cart .wc-block-components-quantity-selector {
	overflow: hidden;
	border: 1px solid var(--lds-bordo);
	border-radius: 999px;
	background: #fff;
}

/* Senza un massimo il selettore si stira in un ovale largo quanto la colonna. */
.wc-block-cart .wc-block-components-quantity-selector {
	max-width: 132px;
}

/*
 * IL NUMERO DELLA QUANTITA NON SI VEDEVA, E NON ERA UN PROBLEMA DI COLORE.
 *
 * Misurato: la casella e' 48x74 con `padding: 24px` e `box-sizing: border-box`, quindi la
 * scatola del contenuto e' larga **zero** — il numero non ha dove disegnarsi — e
 * `overflow: clip` finisce il lavoro. Quei 24 px arrivano dallo stile che il kit di
 * Elementor mette su tutti gli `input` della pagina, che non sa niente di un selettore di
 * quantita largo 48.
 *
 * E' **lo stesso difetto** gia' incontrato nel configuratore il 2026-08-17, stessa causa e
 * stessa cura: la prima volta era stato scambiato per un problema di colore grigio, e
 * cambiare colore non aveva ovviamente risolto niente. Vale la pena riconoscerlo a vista:
 * numero invisibile in una casella piccola = imbottitura che si mangia il contenuto.
 *
 * Quattro classi per superare il selettore del kit, che ne pesa tre piu un elemento.
 */
.wc-block-cart .wc-block-cart-items .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	padding: 0;
	min-width: 0;
	color: var(--lds-testo);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	overflow: visible;
}

/*
 * I due pulsanti + e -: al passaggio si accendono invece di restare grigi.
 * Il fondo appena verde serve a far capire dove si sta cliccando, perche' sono due
 * bersagli stretti dentro una pillola e senza riscontro sembrano decorazioni.
 */
.wc-block-cart .wc-block-components-quantity-selector__button {
	color: var(--lds-testo);
	transition: background-color .12s ease-out, color .12s ease-out;
}

/*
 * `:focus` DICHIARATO INSIEME A `:hover`, e non e' pignoleria.
 *
 * Il kit di Elementor colora **ogni** `button` della pagina con
 * `.elementor-kit-125 button:hover, .elementor-kit-125 button:focus`: fondo verde scuro e
 * testo rosso. Sul `+` di un selettore di quantita quell'effetto e' gia' sbagliato al
 * passaggio, ma il guaio vero e' il `:focus`, che **resta dopo il clic**: si aumenta la
 * quantita una volta e il pulsante rimane verde scuro con il segno rosso finche' non si
 * clicca altrove. Dichiarare solo `:hover` avrebbe corretto meta' del difetto lasciando
 * l'altra meta' a fare la stessa brutta figura.
 *
 * E' lo stesso inciampo gia' costato un giro sul configuratore il 2026-08-17, dove la
 * scheda selezionata restava verde scuro con il testo rosso per la stessa ragione.
 */
.wc-block-cart .wc-block-components-quantity-selector__button:hover,
.wc-block-cart .wc-block-components-quantity-selector__button:focus,
.wc-block-cart .wc-block-components-quantity-selector__button:focus-visible {
	background-color: rgba(1, 47, 43, .08);
	color: var(--lds-testo);
}

/* Premuto: un tono piu' marcato, cosi' il clic ha un riscontro suo. */
.wc-block-cart .wc-block-components-quantity-selector__button:active {
	background-color: rgba(1, 47, 43, .16);
	color: var(--lds-testo);
}

/*
 * VIA L'OMBRA INTERNA DI WOOCOMMERCE, CHE DISEGNAVA MEZZO BORDO.
 *
 * `cart.css` segnala lo stato attivo con `box-shadow: currentcolor 0 0 1px 1px inset`:
 * un contorno di 1 px che segue il raggio **del pulsante** — che WooCommerce tiene a
 * `0 4px 4px 0` — e non quello della pillola. Finche' il colore era grigio si notava poco;
 * da quando il testo e' verde scuro, `currentcolor` disegna un rettangolo verde dentro
 * l'angolo tondo, cioe' un bordo che cambia forma su un lato solo.
 *
 * Toglierla e basta pero' lascerebbe senza riscontro chi naviga da tastiera, perche' la
 * stessa regola porta `outline: none`. L'anello si sposta quindi sul CONTENITORE, dove
 * segue la forma della pillola: `:has()` lo accende quando il fuoco e' su uno dei due
 * pulsanti. E resta su `:focus-visible`, cioe' compare per la tastiera e non a ogni clic
 * del mouse.
 */
/*
 * Il selettore del contenitore ripetuto per necessita', non per bellezza: la regola di
 * WooCommerce e' `.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:active`,
 * cioe' due classi piu' una pseudo-classe. La mia, con `.wc-block-cart` davanti, pesava
 * **esattamente uguale** — e a parita' vince chi viene caricato dopo, che e' sempre loro.
 * E' la terza volta in questo foglio che casco sullo stesso pareggio: la regola pratica e'
 * che per battere WooCommerce Blocks bisogna **contare le sue classi e aggiungerne una**,
 * non fidarsi del fatto che il selettore «sembri» piu' specifico.
 */
.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover,
.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus,
.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible,
.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:active {
	box-shadow: none;
}

.wc-block-cart .wc-block-components-quantity-selector:has(.wc-block-components-quantity-selector__button:focus-visible) {
	box-shadow: 0 0 0 2px var(--lds-testo);
}

.wc-block-cart .wc-block-components-quantity-selector__button:disabled,
.wc-block-cart .wc-block-components-quantity-selector__button:disabled:hover {
	background-color: transparent;
	color: var(--lds-tenue);
	cursor: not-allowed;
}

/* Il «togli» resta discreto ma leggibile: è un'azione che non si deve fare per sbaglio. */
.wc-block-cart .wc-block-cart-item__remove-link {
	color: var(--lds-tenue);
	text-decoration: underline;
}

/*
 * Anche il cestino e' un `<button>`, quindi lo prende la stessa regola del kit: senza
 * queste righe, dopo un clic resterebbe con il fondo verde scuro addosso.
 */
.wc-block-cart .wc-block-cart-item__remove-link:hover,
.wc-block-cart .wc-block-cart-item__remove-link:focus,
.wc-block-cart .wc-block-cart-item__remove-link:focus-visible {
	background-color: transparent;
	color: var(--lds-rosso);
}

/* ------------------------------------------------------------------- stretto --- */

@media (max-width: 767px) {

	/*
	 * Tre classi anche qui. Sotto i 699 px WooCommerce azzera l'imbottitura della colonna
	 * con `.wc-block-components-sidebar-layout .wc-block-components-sidebar`, che pesa
	 * quanto un mio selettore a due classi e vince perche' il suo foglio viene caricato
	 * dopo. Il sintomo era di nuovo parziale — il raggio passava, l'imbottitura no — e la
	 * scheda restava un bordo appiccicato al testo. La classe del contenitore sta sullo
	 * stesso elemento di `.wc-block-cart`, quindi si attacca con il punto e non con lo spazio.
	 */
	.wc-block-cart.wc-block-components-sidebar-layout .wc-block-cart__sidebar {
		padding: 20px;
		border-radius: 16px;
	}

	.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 22px;
	}

	/*
	 * LA BARRA FISSA DEL PULSANTE, DUE DIFETTI CON UNA CAUSA SOLA.
	 *
	 * Su mobile WooCommerce appiccica in basso il contenitore del pulsante
	 * (`--sticky`, `position: fixed`). Quel contenitore **si dimensiona sul contenuto**:
	 * misurato a 320 px di schermo era largo **341**, cioe' 21 px oltre il viewport, e da
	 * li' veniva la barra di scorrimento orizzontale. La causa ero io: il corpo a 17 px e
	 * l'imbottitura a 24 px che avevo dato al pulsante lo rendono piu' largo di quanto uno
	 * schermo stretto conceda.
	 *
	 * E siccome la barra e' fissa e alta 89 px, copriva il fondo del riquadro dei totali —
	 * il totale finale finiva sotto — perche' la pagina non lascia spazio di rispetto in
	 * fondo. Le due cose si risolvono insieme: la barra si tiene dentro lo schermo, il
	 * pulsante si allarga quanto serve, e la pagina lascia sotto l'altezza della barra.
	 */
	/*
	 * Nessun `width` qui: WooCommerce lo imposta gia' a 100% con un selettore **identico**
	 * al mio, e a parita' vince chi carica dopo, cioe' lui. Una mia regola di larghezza
	 * sarebbe rimasta nel foglio senza fare niente, che e' peggio che non scriverla: chi
	 * legge crede che serva.
	 */
	.wc-block-cart .wc-block-cart__submit-container--sticky {
		box-sizing: border-box;
	}

	.wc-block-cart .wc-block-cart__submit-button,
	.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 14px 16px;
		text-align: center;
	}

	/*
	 * Lo spazio di rispetto sotto esiste SOLO finche' la barra e' appiccicata.
	 *
	 * WooCommerce toglie la classe `--sticky` quando si arriva in fondo alla pagina e il
	 * pulsante torna in linea: da quel momento il posto riservato non serve piu' a niente e
	 * diventa un buco fra il carrello e il piede. Legandolo a `:has()` la riserva compare e
	 * sparisce insieme alla barra, che e' la condizione che la giustifica.
	 *
	 * Il difetto e' interessante perche' nasce da una cura giusta: i 104 px servivano
	 * davvero — senza, il totale finiva dietro alla barra — ma erano stati messi come
	 * proprieta' fissa della pagina invece che come conseguenza di uno stato.
	 */
	.wp-block-woocommerce-cart:has(.wc-block-cart__submit-container--sticky) {
		padding-bottom: 104px;
	}

	/*
	 * LA TABELLA DEVE POTERSI STRINGERE, ALTRIMENTI L'EURO CADE FUORI.
	 *
	 * Su schermo stretto la riga di carrello non e' comprimibile quanto sembra: misurata,
	 * la sua larghezza **minima** e' 325 px contro i 288 disponibili a 320 px di schermo,
	 * e il primo a uscire e' il prezzo in fondo a destra — il simbolo dell'euro sparisce
	 * oltre il bordo, che e' esattamente il sintomo segnalato.
	 *
	 * Le tre voci che compongono quel minimo, misurate una per una: il **prezzo** a 17 px
	 * (54 px di colonna), il **selettore di quantita** dentro la colonna prodotto (107 px)
	 * e il nome del prodotto. L'immagine invece non c'entra: rimpicciolirla non sposta il
	 * minimo di un pixel, ed e' la prima cosa che verrebbe da toccare.
	 *
	 * Con queste riduzioni il minimo scende da 325 a **308**, cioe' la riga sta dentro da
	 * circa 360 px in su. Sotto quella misura il blocco di WooCommerce non ci sta comunque,
	 * e non e' una cosa che si sistema da questo foglio.
	 */
	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price,
	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__total .wc-block-formatted-money-amount {
		font-size: 15px;
	}

	.wc-block-cart .wc-block-components-quantity-selector {
		max-width: 88px;
	}

	.wc-block-cart .wc-block-components-quantity-selector__button {
		width: 26px;
		min-width: 26px;
	}

	.wc-block-cart .wc-block-components-quantity-selector__input {
		width: 36px;
		min-width: 0;
	}

	/* Un nome o un nome di file lunghi non devono poter allargare la colonna. */
	.wc-block-cart .wc-block-cart-item__product,
	.wc-block-cart .wc-block-components-product-details,
	.wc-block-cart .wc-block-components-product-name {
		overflow-wrap: anywhere;
	}
}

/* ------------------------------------------------------------------ checkout --- */

/*
 * IL CHECKOUT NON EREDITA QUASI NULLA DAL CARRELLO, e la ragione e' banale: le mie regole
 * erano circoscritte con `.wc-block-cart`, che sulla pagina di pagamento non esiste. Misurato
 * il 2026-08-18: allineamento e pulsante d'ordine erano giusti — quelli li avevo scritti
 * anche per `.wp-block-woocommerce-checkout` — mentre **nome del prodotto, totale e riquadro
 * del riepilogo restavano quelli di WooCommerce**, cioe' grigi.
 *
 * Le classi interne (`wc-block-components-*`) sono le stesse del carrello: cambia solo la
 * radice. Da qui un secondo giro di selettori invece di allargare i primi, che avrebbero
 * perso in leggibilita' senza guadagnare niente.
 */

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
	color: var(--lds-testo);
	font-size: 15px;
	font-weight: 600;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__label {
	color: var(--lds-tenue);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	color: var(--lds-testo);
	font-weight: 600;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--lds-testo);
	font-size: 24px;
	font-weight: 700;
}

/* Il riepilogo a lato diventa una scheda, come nel carrello. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
	padding: 24px;
	border: 1px solid var(--lds-bordo);
	border-radius: 24px;
	background: var(--lds-carta);
}

/*
 * I campi del modulo: raggio e bordo del sito. WooCommerce li fa a 4 px con un bordo quasi
 * nero all'80% di opacita', che accanto alle schede da 24 px di raggio sembra un modulo
 * incollato da un'altra pagina.
 */
/*
 * QUATTRO livelli di classe, e stavolta li ho contati prima.
 * WooCommerce dimensiona i campi con
 * `.wc-block-components-form .wc-block-components-text-input input[type="email"]`: due
 * classi piu' un selettore d'attributo, che nella specificita' vale come una classe. Il mio
 * `.wp-block-woocommerce-checkout .wc-block-components-text-input input` ne aveva due e
 * perdeva. Il `:not([type="hidden"])` aggiunge il livello che serve senza inventare classi
 * che nel markup non esistono — e per giunta dice una cosa vera, perche' un campo nascosto
 * non ha bisogno di bordi.
 *
 * Nota per chi passera' da qui: sui campi c'e' anche il kit di Elementor, che li vuole a
 * 16 px di raggio con lo stesso peso di WooCommerce; a parita' vinceva WooCommerce perche'
 * caricato dopo. Il valore che si vede non e' quello che si aspetta nessuno dei due.
 */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:not([type="hidden"]),
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-textarea:not([hidden]),
.wp-block-woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__container:not([hidden]) {
	border-radius: 6px;
	border-color: var(--lds-bordo);
}

.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-textarea:focus {
	border-color: var(--lds-testo);
	box-shadow: 0 0 0 1px var(--lds-testo);
	outline: none;
}

@media (max-width: 767px) {

	/*
	 * Sullo stretto il riepilogo del checkout e' un pannello che si apre e chiude: dentro
	 * una scheda con bordo e fondo diventa una scatola in una scatola. Resta solo
	 * l'imbottitura, senza cornice.
	 */
	.wp-block-woocommerce-checkout .wc-block-components-sidebar {
		padding: 16px 0 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 22px;
	}
}

/* ============================================================= i campi fattura ===
 *
 * Al checkout i campi fattura si mostrano a seconda di chi compra: al privato il codice fiscale,
 * all'azienda ragione sociale, partita IVA e un recapito. Non e' una preferenza estetica — i
 * campi sono **obbligatori** quando la fattura e' richiesta, e non si puo' pretendere la partita
 * IVA da un privato.
 *
 * LO STATO ARRIVA DA UN ATTRIBUTO SUL BODY, scritto da assets/js/fattura.js del plugin:
 * `no` (fattura non richiesta), `scegli` (richiesta, tipo non ancora scelto), `privato`,
 * `azienda`. Il perche' e' nel commento in testa a quel file: il checkout e' disegnato da React,
 * e nascondere un elemento con `style.display` non regge al primo ridisegno. Il `body` invece
 * React non lo tocca.
 *
 * GLI INVOLUCRI SI AGGANCIANO PER CLASSE, non con `:has()`. WooCommerce mette su ogni involucro
 * una classe col nome del campo — `wc-block-components-address-form__lds-partita_iva` — e per le
 * tendine ne usa un'altra forma, `wc-block-components-select-input-lds-tipo_cliente`. Verificato
 * sul DOM reso, non dedotto: sono due schemi diversi e vanno scritti entrambi.
 */

/* Fattura non richiesta: si vede solo la casella. */
body[data-lds-fattura="no"] .wc-block-components-select-input-lds-tipo_cliente,
body[data-lds-fattura="no"] .wc-block-components-address-form__lds-codice_fiscale,
body[data-lds-fattura="no"] .wc-block-components-address-form__lds-ragione_sociale,
body[data-lds-fattura="no"] .wc-block-components-address-form__lds-partita_iva,
body[data-lds-fattura="no"] .wc-block-components-address-form__lds-sdi,
body[data-lds-fattura="no"] .wc-block-components-address-form__lds-pec,
/* Richiesta ma senza tipo scelto: si vede la casella e la scelta, nient'altro. */
body[data-lds-fattura="scegli"] .wc-block-components-address-form__lds-codice_fiscale,
body[data-lds-fattura="scegli"] .wc-block-components-address-form__lds-ragione_sociale,
body[data-lds-fattura="scegli"] .wc-block-components-address-form__lds-partita_iva,
body[data-lds-fattura="scegli"] .wc-block-components-address-form__lds-sdi,
body[data-lds-fattura="scegli"] .wc-block-components-address-form__lds-pec,
/* Privato: il codice fiscale, e basta. */
body[data-lds-fattura="privato"] .wc-block-components-address-form__lds-ragione_sociale,
body[data-lds-fattura="privato"] .wc-block-components-address-form__lds-partita_iva,
body[data-lds-fattura="privato"] .wc-block-components-address-form__lds-sdi,
body[data-lds-fattura="privato"] .wc-block-components-address-form__lds-pec,
/* Azienda: tutto tranne il codice fiscale. */
body[data-lds-fattura="azienda"] .wc-block-components-address-form__lds-codice_fiscale {
	display: none;
}

/*
 * Il gruppo dei campi fattura si stacca dal resto del passo. «Informazioni aggiuntive
 * sull'ordine» conterrebbe altrimenti la casella della fattura e la nota per il negozio senza
 * niente in mezzo, e sembrerebbero la stessa cosa.
 */
body[data-lds-fattura="privato"] .wc-block-components-address-form__lds-codice_fiscale,
body[data-lds-fattura="azienda"] .wc-block-components-address-form__lds-ragione_sociale {
	margin-top: 16px;
}

/* ========================================================== i bonus statali ===
 *
 * Due cose sole: l'avviso del carrello misto e il campo del codice del buono.
 *
 * L'AVVISO non e' un errore. Dice a chi ha un buono in mano perche' il metodo non compare, e la
 * risposta e' «ordina i libri da soli»: un'informazione, non un rimprovero. Prende quindi i
 * colori della carta e del bordo, non quelli del rosso.
 */
.lds-bonus-avviso {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--lds-bordo);
	border-left: 3px solid var(--lds-verde);
	border-radius: 4px;
	background: var(--lds-carta);
	color: var(--lds-testo);
	font-size: 0.95rem;
	line-height: 1.5;
}

/*
 * IL CAMPO DEL CODICE NON HA REGOLE SUE, e la storia vale piu' delle regole che non ci sono.
 *
 * Prima era un `<input>` nostro vestito a mano, e ha perso due gare di fila. Il kit di Elementor
 * stila **ogni** input del sito — `.elementor-kit-125 input:not([type="button"]):not([type="submit"])`,
 * (0,3,1), `padding: 24px`, `border-radius: 16px`, `border-style: none` — quindi il campo veniva
 * alto **74 px contro i 50** degli altri e senza bordo. Alzata la specificita' a (0,4,1) e copiate
 * le misure vere, restavano **10 px** di differenza: l'altezza dei campi del checkout la fissa
 * WooCommerce e non deriva dal testo.
 *
 * A quel punto la domanda giusta non era «quanto padding serve» ma «perche' sto ricostruendo un
 * campo che esiste gia'». Ora si usa `wc.blocksCheckout.ValidatedTextInput`, lo stesso componente
 * degli altri campi: identico per costruzione, e l'errore compare **sotto il campo** invece che in
 * cima alla pagina. Zero righe di CSS da mantenere allineate a misure di qualcun altro.
 */

/* Lo stacco fra le istruzioni e il campo. Il resto del campo lo veste WooCommerce. */
.wp-block-woocommerce-checkout .lds-codice-bonus {
	margin-top: 12px;
}

/* Le istruzioni: leggibili, ma non piu' forti del nome del metodo che stanno spiegando. */
.wp-block-woocommerce-checkout .lds-bonus-istruzioni {
	margin: 0;
	color: var(--lds-tenue);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* ================================================ caselle e pallini ===
 *
 * Misurato il 2026-08-21 su segnalazione: al checkout **ogni** casella e ogni pallino era
 * **48x48** — quadroni bianchi con gli angoli tondi, sovrapposti alle etichette — invece dei
 * 20x20 di WooCommerce. Difetto vecchio, non nato coi bonus: c'era da quando il checkout e'
 * a blocchi.
 *
 * IL COLPEVOLE E' LO STESSO DEL CAMPO DEL CODICE: il kit di Elementor stila **ogni** input del
 * sito con `.elementor-kit-125 input:not([type="button"]):not([type="submit"])` — (0,3,1) —
 * mettendo `padding: 24px`, `border-radius: 16px`, `border-style: none`. Le regole di WooCommerce
 * per queste caselle valgono (0,3,0), quindi perdono: `box-sizing: border-box` piu' 48 px di
 * imbottitura contro un lato da 20 fa vincere l'imbottitura, e il quadrato diventa 48.
 *
 * PERCHE' ALLORA NEL RESTO DEL SITO SONO GIUSTE — misurato: nella pagina contatti sono 20x20 e
 * 13x13. Perche' una casella **nativa** ignora il padding: il browser la disegna come widget di
 * sistema. WooCommerce Blocks mette `appearance: none`, e da quel momento la casella e' una
 * scatola come le altre e il padding conta. Ecco perche' la stessa regola e' innocua altrove e
 * distruttiva qui, e perche' la correzione sta in questo foglio e non in uno globale.
 *
 * SI RIMETTONO SOLO LE TRE PROPRIETA' RUBATE — imbottitura, stile del bordo, raggio — e non le
 * misure: larghezza, altezza e colore del bordo li dichiara gia' WooCommerce e vanno lasciati a
 * lui, cosi' se un giorno cambia idea non restiamo indietro con numeri copiati.
 *
 * Tre classi piu' l'attributo fanno (0,4,0), che batte il kit nella colonna che conta.
 */
.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wp-block-woocommerce-cart .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	padding: 0;
	border-style: solid;
	border-radius: 4px;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"],
.wp-block-woocommerce-cart .wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"] {
	padding: 0;
	border-style: solid;
	border-radius: 50%;
}

/* ============================== il riepilogo: spazio per il nome ===
 *
 * Segnalato: nella colonna «Riepilogo dell'ordine» il nome del prodotto restava senza spazio
 * «su alcune risoluzioni». Misurato, e non era un caso limite:
 *
 *   viewport   nome    righe   riga alta
 *   1440       203 px    4       191 px
 *   1240       133 px    7       270 px
 *   1016        68 px   14       546 px
 *    900        28 px   32      1218 px
 *
 * A 900 px il titolo di un libro veniva impaginato su **trentadue righe** dentro 28 px.
 *
 * PERCHE'. La colonna e' il 35% della larghezza del contenuto (regola di WooCommerce), quindi a
 * 900 px la riga interna vale 205 px. In quei 205 px stanno miniatura (48), testo e totale — e il
 * **totale non si stringe mai**: misurato **93 px fissi a ogni larghezza**, perche' contiene
 * «Risparmia 9,75€» e la parola piu' lunga fa da pavimento. Tutta la perdita la assorbe il nome.
 *
 * COSA NON HA FUNZIONATO, misurato e non supposto:
 *
 *  - `overflow-wrap: break-word` sul nome (invece di `anywhere`): nessun cambiamento. Il nome non
 *    era limitato dal proprio minimo;
 *  - una **container query** sul blocco del riepilogo, che sarebbe lo strumento giusto perche' la
 *    decisione dipende dalla colonna e non dalla finestra: `container-type: inline-size` **manda in
 *    collasso il pannello** — il riepilogo vive dentro un elemento richiudibile e il contenimento
 *    azzera le righe. Misurato: tutte le voci a 0x0;
 *  - il solo `flex-wrap: wrap`: spinge il **testo** sotto la miniatura, che resta sola su una riga.
 *    Serve anche `flex: 1 1 0` sulla descrizione, cosi' non chiede spazio e non va a capo.
 *
 * COSA SI FA. Il totale di riga scende su **una riga sua**, allineato a destra, e il nome prende
 * tutta la larghezza. Senza punti di rottura: vale a ogni risoluzione, che e' la risposta giusta a
 * un difetto che si presentava «su alcune risoluzioni». Lo stacco fra miniatura e testo diventa
 * fluido — `clamp(12px, 6%, 24px)`, dove la percentuale si misura sulla riga — quindi si stringe
 * dove serve senza una seconda regola da tenere allineata.
 *
 *   viewport   nome dopo   righe   riga alta
 *   1440         309 px      3       184 px
 *   1240         243 px      4       221 px
 *   1200         230 px      4       221 px
 *   1016         183 px      4       237 px
 *    900         144 px      7       316 px
 *    375         242 px      4       221 px
 *
 * Nessuno scorrimento orizzontale a nessuna di queste larghezze, e la miniatura resta accanto al
 * testo. A 900 px restano 7 righe: li' il limite non e' piu' il layout ma la colonna stessa, larga
 * 289 px. Per guadagnare ancora servirebbe una scelta di disegno — dare piu' del 35% alla colonna
 * in quella fascia, o farla impilare a piena larghezza sotto i 1024 px — e quella non e' una
 * correzione, e' una decisione.
 */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
	flex-wrap: wrap;
}

/*
 * `flex: 1 1 0` e non `auto`: con `auto` la descrizione chiede la larghezza del proprio contenuto,
 * non ci sta accanto alla miniatura e va a capo da sola, lasciando la miniatura su una riga vuota.
 * Con base 0 non chiede niente e cresce per riempire quel che resta.
 */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-order-summary-item__description {
	flex: 1 1 0;
	padding-left: clamp(12px, 6%, 24px);
	padding-right: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-order-summary-item__total-price {
	flex: 0 0 100%;
	margin-top: 4px;
	padding: 0;
	text-align: right;
}

/*
 * LO STACCO FRA UNA VOCE E LA SUCCESSIVA, che la correzione qui sopra si era mangiato.
 *
 * Segnalato subito dopo: col totale su una riga sua, il prezzo finiva «praticamente attaccato al
 * titolo del prodotto successivo». Misurato, ed era peggio di uno spazio mancante — era una
 * gerarchia rovesciata:
 *
 *   fra il prezzo e il titolo della voce dopo        5 px
 *   fra due righe della STESSA voce                  4 px
 *   fra la descrizione e il prezzo, stessa voce      16 px
 *
 * Cioe' due prodotti diversi stavano piu' vicini di due righe dello stesso prodotto, e l'occhio
 * non aveva modo di capire dove finisse una voce. Prima non si vedeva perche' il totale stava in
 * una colonna a lato e l'altezza della riga la dettava la descrizione, con i suoi 12 px di
 * imbottitura in fondo: quei 12 px erano lo stacco fra le voci, per caso.
 *
 * Quindi: l'imbottitura in fondo alla descrizione va a **0** — il prezzo appartiene alla sua voce e
 * ci sta appiccicato di proposito, 4 px — e lo stacco vero si dichiara sulla **voce**, 16 px, che
 * misurati diventano 20 px fra il prezzo e il titolo dopo. Cinque volte la distanza interna: la
 * gerarchia si legge senza doverci pensare.
 *
 * Tre classi e non due: la regola di WooCommerce `.wc-block-components-order-summary
 * .wc-block-components-order-summary-item` vale (0,2,0) come la mia prima versione, e a parita'
 * vince chi carica dopo — che qui e' `checkout.css`. Misurato: `padding-bottom: 16px` dichiarato e
 * ignorato, con il calcolato fermo a 1px.
 */
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item {
	padding-bottom: 16px;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-order-summary-item__description {
	padding-bottom: 0;
}

/* ===========================================================================
   IL CARRELLO VUOTO
   ===========================================================================

   Segnalato il 2026-08-26. Cosa c'era: due titoli da **62 px** — «Il tuo
   carrello e' attualmente vuoto!» e «Novita' in negozio» — una faccia triste
   disegnata da WooCommerce come pseudo-elemento di **310 x 310**, un separatore
   a puntini e **quattro prodotti scelti a caso** fra i piu' recenti. In tutto
   **1106 px** di pagina non stilata, che per giunta proponeva camici e zoccoli
   a chi cercava un libro.

   Faccia e vetrina casuale sono state tolte dal contenuto della pagina, non
   nascoste con il foglio: erano blocchi, e un blocco che non serve si elimina.

   ---------------------------------------------------------------------------
   COSA C'E' ADESSO, E PERCHE'

   Un carrello vuoto e' un vicolo cieco: l'unica cosa utile che puo' fare e'
   **rimettere in strada**. Da qui le due vie, che sono le due meta' reali del
   negozio — il catalogo e la stampa della tesi — e non una vetrina di prodotti
   che nessuno ha chiesto.

   La forma e' quella delle schede dei servizi in home: pannello verde chiaro,
   angoli da 50, imbottitura 56. I pulsanti sono le pillole del sito, rosso per
   la via principale e verde scuro per l'altra. Nessun colore nuovo, nessuna
   misura nuova: **il carrello vuoto non e' il posto dove inventare un
   linguaggio**.
   =========================================================================== */

.wp-block-woocommerce-empty-cart-block {
	background: #DEF39B;
	border-radius: 50px;
	padding: 56px;
	max-width: 720px;
	margin: 24px auto 64px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.wp-block-woocommerce-empty-cart-block .lds-vuoto__titolo {
	font-family: Archivo, sans-serif;
	font-size: 36px;
	line-height: 1.15;
	font-weight: 700;
	color: #012F2B;
	margin: 0;
}

.wp-block-woocommerce-empty-cart-block .lds-vuoto__testo {
	font-family: Archivo, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: #012F2B;
	margin: 0;
	max-width: 46ch;
}

.wp-block-woocommerce-empty-cart-block .lds-vuoto__azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 4px;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 32px;
	border-radius: 100px;
	font-family: Archivo, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

/* Primario pieno, secondario contornato — e perche' non sono due pillole uguali
   ---------------------------------------------------------------------------

   Prima erano due pillole piene, rossa e verde, che al passaggio del mouse si
   scambiavano il colore: passandoci sopra una diventava **identica allo stato a
   riposo dell'altra**. L'utente l'ha notato guardando, e la domanda giusta che
   ha posto era come risolverlo.

   La collisione era il sintomo. Il problema stava sotto: **due pulsanti di pari
   peso non dicono quale sia l'azione principale**, e su schermo tattile — dove
   l'hover non esiste — lo stato a riposo e' tutto cio' che l'utente riceve.

   Da cui la forma: **primario pieno, secondario contornato**. Nessuno stato
   dell'uno puo' piu' coincidere con uno stato dell'altro, perche' il primario
   non e' mai contornato e il secondario non e' mai rosso — e la gerarchia c'e'
   gia' da fermo.

   **Entrambi vanno al verde scuro al passaggio**: il primario dal rosso pieno,
   il secondario dal contorno. Deciso dall'utente il 2026-08-26 in tre passaggi,
   e ognuno ha tolto un difetto:

     - due pillole piene che si scambiavano rosso e verde -> passandoci sopra una
       diventava identica all'altra da ferma;
     - primario pieno e secondario contornato, con il rosso che scuriva a
       `#B3241C` -> la collisione spariva, ma quel rosso scuro **non apparteneva
       alla grafica**: nel tema c'era, ma solo come colore di **testo**
       (collegamenti in hover, messaggi d'errore), mai come fondo di un pulsante;
     - primario al verde scuro e secondario al rosso pieno -> il rosso scuro
       spariva, ma l'hover del secondario tornava uguale al primario da fermo.

   La forma di adesso e' l'unica delle quattro in cui **nessuno stato somiglia a
   nessun altro stato a riposo**: il primario e' l'unico rosso, il secondario
   l'unico contornato, e il verde scuro appartiene solo al passaggio del mouse —
   dove i due possono somigliarsi quanto vogliono, visto che il puntatore sta su
   uno solo per volta.

   Il bordo di 2 px c'e' su **entrambi** — trasparente sul primario — cosi' i due
   pulsanti hanno la stessa scatola e la stessa altezza, e il contorno non fa
   sembrare il secondario piu' piccolo o disattivato. */
.wp-block-woocommerce-empty-cart-block .wp-block-button__link { border: 2px solid transparent; box-sizing: border-box; }

.wp-block-woocommerce-empty-cart-block .lds-vuoto__primario .wp-block-button__link { background: #FF3B32; border-color: transparent; color: #F7F5F1; }
.wp-block-woocommerce-empty-cart-block .lds-vuoto__primario .wp-block-button__link:hover { background: #012F2B; border-color: #012F2B; color: #DEF39B; }

.wp-block-woocommerce-empty-cart-block .lds-vuoto__secondario .wp-block-button__link { background: transparent; border-color: #012F2B; color: #012F2B; }
.wp-block-woocommerce-empty-cart-block .lds-vuoto__secondario .wp-block-button__link:hover { background: #012F2B; border-color: #012F2B; color: #DEF39B; }

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:focus-visible {
	outline: 2px solid #012F2B;
	outline-offset: 3px;
}

/* Rete di sicurezza: se un domani qualcuno rimettesse il blocco predefinito,
   la faccia triste resta comunque fuori. Non sostituisce la rimozione dal
   contenuto — la fa solo sopravvivere a una modifica distratta. */
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before { display: none !important; }

@media (max-width: 767px) {
	.wp-block-woocommerce-empty-cart-block { padding: 40px 24px; border-radius: 32px; margin: 16px auto 48px; gap: 16px; }
	.wp-block-woocommerce-empty-cart-block .lds-vuoto__titolo { font-size: 28px; }
	.wp-block-woocommerce-empty-cart-block .lds-vuoto__testo { font-size: 16px; }
	.wp-block-woocommerce-empty-cart-block .lds-vuoto__azioni { width: 100%; flex-direction: column; }
	.wp-block-woocommerce-empty-cart-block .wp-block-button { width: 100%; }
	.wp-block-woocommerce-empty-cart-block .wp-block-button__link { width: 100%; }
}

/* --------------------------------------------------------------------------
 * IL PULSANTE «APPLICA» DEL CODICE PROMOZIONALE
 *
 * Era alto 72px accanto a un campo da 50, con il testo a 24px: sembrava il
 * pulsante principale della pagina messo accanto a una casella di servizio.
 *
 * La causa e' una sola, e le due misure sbagliate ne discendono entrambe. Il
 * kit di Elementor impone la tipografia «accent» a OGNI `button` della pagina
 * (`.elementor-kit-125 button { font-size: ... }`), quindi 24px anche qui; e
 * WooCommerce Blocks calcola l'altezza minima del pulsante come `3em`, che a
 * 24px fa esattamente 72. Rimesso il corpo del testo, l'altezza torna da se':
 * qui la si fissa lo stesso, per non dipendere da quel calcolo.
 *
 * Le misure sono prese dal campo che gli sta accanto — 50px — perche' i due
 * elementi vanno letti come una cosa sola. Il rosso e la forma a pastiglia
 * restano quelli del sito: e' la scala a essere sbagliata, non lo stile.
 *
 * TRE CLASSI E NON DUE, ED E' LA PARTE CHE VALE LA PENA RICORDARE.
 * Con due classi la regola pareggiava `.wc-block-components-button.contained`
 * di WooCommerce Blocks, che dichiara `min-height: 3em` e `padding: 0 16px`;
 * a parita' di peso vince chi viene dopo, e il foglio dei blocchi si carica
 * dopo il nostro. Il risultato era il peggiore possibile da diagnosticare:
 * `font-size` e `border-radius` passavano — nessuno li contendeva — mentre
 * altezza e spaziatura no, e la regola sembrava applicata a meta'.
 *
 * Vale per carrello e checkout: e' lo stesso blocco in tutti e due.
 * ----------------------------------------------------------------------- */
.wc-block-components-totals-coupon
	.wc-block-components-totals-coupon__button.wc-block-components-button {
	min-height: 50px;
	height: 50px;
	padding: 0 24px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: 50px;
	flex: none;
}

/* I due elementi sulla stessa linea di base anche se un domani uno dei due
   cambiasse altezza: senza questo il contenitore flex li stira. */
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__form {
	align-items: center;
}

@media (max-width: 480px) {
	/* Sotto i 480px il campo si stringe troppo perche' il pulsante gli tolga
	   altri 24px di respiro: il testo del pulsante basta a se stesso. */
	.wc-block-components-totals-coupon
		.wc-block-components-totals-coupon__button.wc-block-components-button {
		padding: 0 18px;
	}
}

/* --------------------------------------------------------------------------
 * IL BORDO E LO STATO DI PASSAGGIO DELLO STESSO PULSANTE.
 *
 * Il bordo `1px solid #CC3366` c'e' anche a riposo, misurato: sul fondo rosso
 * non si vede, ma al passaggio — quando il fondo diventa verde scuro — resta
 * un filo rosa attorno al pulsante. Non serve a niente in nessuno dei due
 * stati, quindi va via da entrambi.
 *
 * DEL PASSAGGIO SI TOCCA SOLO CIO' CHE E' SBAGLIATO: il testo, che deve essere
 * bianco, e il bordo. Il colore di fondo NON viene dichiarato qui di proposito:
 * cercandolo non e' emersa nessuna regola `:hover` che riguardi questo pulsante
 * in tutto il CSS leggibile della pagina, e sovrascrivere un colore di cui non
 * si conosce l'origine vuol dire spegnere qualcosa senza sapere cosa.
 *
 * `:focus-visible` insieme a `:hover` perche' chi arriva col tabulatore deve
 * vedere lo stesso stato di chi arriva col mouse.
 * ----------------------------------------------------------------------- */
.wc-block-components-totals-coupon
	.wc-block-components-totals-coupon__button.wc-block-components-button {
	border: 0;
}

.wc-block-components-totals-coupon
	.wc-block-components-totals-coupon__button.wc-block-components-button:hover,
.wc-block-components-totals-coupon
	.wc-block-components-totals-coupon__button.wc-block-components-button:focus-visible {
	color: #FFFFFF;
	border: 0;
}

/* -------------------------------------------- etichette di scelta: spedizione e pagamento --- */

/*
 * PERCHE'. Le voci che l'utente deve scegliere — «Spedizione con corriere»,
 * «PayPal e carte di credito», «Bonifico bancario» — WooCommerce le scrive in grigio
 * (`#7E7E7E`, misurato) e peso 400. Sono proprio le righe su cui si decide, e col grigio
 * tenue si perdono nella pagina. Le portiamo al verde scuro del sito e al grassetto, come
 * i titoli: la gerarchia della cassa torna leggibile.
 *
 * UN SOLO SELETTORE PER TUTTE E TRE. Spedizione e pagamento, nella cassa a blocchi, usano
 * la stessa classe `.wc-block-components-radio-control__label`. Verificato in pagina: sotto
 * `.wp-block-woocommerce-checkout` quella classe seleziona esattamente quelle tre etichette
 * e nient'altro. Niente `!important`: la regola di WooCommerce e' a classe singola, due
 * classi la battono.
 *
 * Il prezzo della spedizione («5,90€») sta in un elemento a parte, fuori dall'etichetta,
 * quindi resta col suo peso: ingrassiamo la voce, non la cifra.
 *
 * IL SECONDO SELETTORE non e' un doppione. Per la spedizione WooCommerce ha gia' una
 * regola a pari specificita' della nostra —
 * `.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label`
 * in `checkout.css`, che mette peso 500 — e siccome il suo foglio si carica dopo il nostro,
 * a parita' vinceva lei e «Spedizione con corriere» restava a 500. Verificato il 2026-10-06.
 * Rifacciamo lo stesso percorso di classi aggiungendo l'antenato del pacco: una classe in
 * piu', quindi specificita' superiore, e la voce passa a 700 senza bisogno di `!important`.
 */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label,
.wp-block-woocommerce-checkout
	.wc-block-components-shipping-rates-control__package
	.wc-block-components-radio-control__label {
	color: var(--lds-testo);
	font-weight: 700;
}

/* ------------------------------------------------- loghi delle carte accanto a Nexi --- */

/*
 * COSA FA. Mette i loghi Visa e Mastercard accanto a «Carta di credito o debito», il metodo
 * Nexi XPay, al posto dell'icona generica di carta che il plugin disegna da se'
 * (`assets/images/card.png`, classe `…payment-method-icon--xpay-nexixpay`).
 *
 * STORIA. Dal 2026-10-06 al 2026-10-13 gli stessi loghi stavano accanto a PayPal, allora
 * l'unico modo di pagare con carta («PayPal e carte di credito»). Collegato Nexi, le carte
 * passano da li' e PayPal torna a chiamarsi «PayPal» (vedi `LDS_Pagamenti` nel plugin).
 *
 * PERCHE' NON AMERICAN EXPRESS. Accanto a PayPal c'era, ed era giusto: PayPal accetta Amex.
 * Con Nexi Amex non e' inclusa di serie, dipende dal contratto del negozio, e dalla cassa di
 * prova i circuiti attivi non si vedono. Si mostrano solo i due certi; se il contratto
 * comprende Amex basta aggiungere `url(../img/carte/amex.svg)` e allargare il riquadro.
 *
 * LE SVG SONO NOSTRE (`assets/img/carte/`), versionate e indipendenti dai plugin. Percorso
 * relativo al foglio: vale su staging e in produzione. `background-size: auto 20px` tiene
 * l'altezza senza deformare; le due posizioni sinistra/destra le distanziano da sole.
 */
#radio-control-wc-payment-method-options-xpay__label
	.wc-block-components-payment-method-icon {
	display: none;
}

#radio-control-wc-payment-method-options-xpay__label
	.wc-block-components-payment-method-icons::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 74px;
	height: 20px;
	margin-left: 10px;
	background-image:
		url(../img/carte/visa.svg),
		url(../img/carte/mastercard.svg);
	background-repeat: no-repeat;
	background-size: auto 20px;
	background-position: left center, right center;
}

/* ---------------------------------------- niente icone dei metodi accettati nel carrello --- */

/*
 * Sotto «Procedi al pagamento» il carrello a blocchi ha il riquadro «metodi di pagamento
 * accettati» (`cart-accepted-payment-methods-block`), che mostra le icone dei metodi che ne
 * dichiarano una. Finche' c'erano solo PayPal e bonifico, che non ne passano, restava vuoto.
 * Dal 2026-10-13, collegato Nexi XPay, ci compariva la sua icona generica di carta
 * (`card.png`), da sola. Deciso con l'utente: il riquadro si nasconde e il carrello torna
 * com'era. Alla cassa i loghi Visa e Mastercard restano, accanto a «Carta di credito o debito».
 *
 * Due classi contro la sola `.wc-block-components-payment-method-icons` di WooCommerce. Per
 * ripristinarlo basta togliere questa regola: il contenuto della pagina carrello non e' toccato.
 */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-accepted-payment-methods-block {
	display: none;
}

/* ------------------------------------------------ la pagina di passaggio verso Nexi --- */

/*
 * «Paga per l'ordine» con Nexi: per un istante, prima che lo script del plugin invii il
 * modulo verso Nexi, si vedevano due pulsanti rossi «Invia Richiesta» — il modulo esce doppio
 * e il pulsante non ha etichetta (il perche' per esteso e' in `inc/pagamento-nexi.php`).
 * I moduli si nascondono e basta: restano nella pagina e lo script li invia lo stesso. Al loro
 * posto il riquadro stampato da quel file.
 */
#nexi_xpay_receipt_form {
	display: none;
}

.lds-redirect-pagamento {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	max-width: 560px;
	margin: 32px auto 48px;
	padding: 36px 24px;
	border: 1px solid var(--lds-bordo, #D9D6D0);
	border-radius: 16px;
	background: #FFFFFF;
	text-align: center;
	color: var(--lds-testo, #012F2B);
}

.lds-redirect-pagamento__giro {
	width: 44px;
	height: 44px;
	border: 4px solid #DEF39B;
	border-top-color: var(--lds-testo, #012F2B);
	border-radius: 50%;
	animation: lds-giro .9s linear infinite;
}

.lds-redirect-pagamento__testo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

/*
 * Il pulsante di riserva compare solo dopo 5 secondi: se lo script di Nexi funziona, e quasi
 * sempre e' cosi', la pagina se ne va prima e nessuno lo vede. Stessa forma del pulsante
 * «Procedi al pagamento» del carrello. `button.` e `!important` per le stesse ragioni del
 * pulsante del buono: il tema impone la pillola rossa e le iniziali maiuscole a ogni pulsante.
 */
.lds-redirect-pagamento button.lds-redirect-pagamento__vai {
	visibility: hidden;
	opacity: 0;
	animation: lds-compari .3s ease 5s forwards;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px !important;
	background: var(--lds-testo, #012F2B) !important;
	color: #FFFFFF !important;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	text-transform: none !important;
	cursor: pointer;
}

.lds-redirect-pagamento button.lds-redirect-pagamento__vai:hover,
.lds-redirect-pagamento button.lds-redirect-pagamento__vai:focus-visible {
	background: #024A43 !important;
	color: #FFFFFF !important;
}

@keyframes lds-giro {
	to { transform: rotate(360deg); }
}

@keyframes lds-compari {
	to { visibility: visible; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.lds-redirect-pagamento__giro {
		animation: none;
	}
}