/* --------------------------------------------------------------------------
   Il negozio, vestito da UNIQUE.

   WooCommerce porta i propri fogli di stile e disegna i pulsanti a modo suo:
   angoli arrotondati, grigi che non sono i nostri, un rosa per il pulsante
   d'acquisto. Qui non si riscrive il negozio, si rimettono i suoi pezzi dentro
   il sistema: inchiostro, filetti da un pixel, angoli vivi, nessuna ombra.

   Tutti i valori vengono dal ponte in cima a style.css, che a sua volta viene da
   src/design/token.css. Nessun esadecimale scritto a mano, qui dentro.
   -------------------------------------------------------------------------- */

/* ── I pulsanti ─────────────────────────────────────────────────────────────
   «Aggiungi al carrello», «Procedi con l'ordine», «Applica»: due ruoli, non
   quindici (DESIGN.md §6.3), e sul sito l'ovale pieno (§5). Il SECONDARIO è il
   default — filetto d'inchiostro su fondo trasparente — perché quasi tutti i
   pulsanti di Woo sono azioni di contorno (aggiorna, applica, calcola). Il
   PRIMARIO, pieno, è solo l'azione della pagina: comprare, andare alla cassa,
   pagare, tornare allo shop dal carrello vuoto. Ogni hover ha il suo active. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tocco-minimo);
	background: transparent;
	color: var(--inchiostro);
	border: 1px solid var(--inchiostro);
	border-radius: var(--raggio-pulsante);
	box-shadow: none;
	text-shadow: none;
	font-family: var(--sistema);
	font-size: var(--piccolo);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	padding: var(--spazio-3) var(--spazio-5);
	line-height: 1.2;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.woocommerce a.button:hover,
.woocommerce a.button:active,
.woocommerce button.button:hover,
.woocommerce button.button:active,
.woocommerce input.button:hover,
.woocommerce input.button:active,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:active {
	background: var(--inchiostro);
	border-color: var(--inchiostro);
	color: var(--carta);
}

/* il primario: pieno */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.button.wc-backward,
.woocommerce #place_order {
	background: var(--inchiostro);
	border-color: var(--inchiostro);
	color: var(--carta);
}

.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:active,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:active,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active,
.woocommerce a.button.wc-backward:hover,
.woocommerce a.button.wc-backward:active,
.woocommerce #place_order:hover,
.woocommerce #place_order:active {
	background: transparent;
	border-color: var(--inchiostro);
	color: var(--inchiostro);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: 2px solid var(--inchiostro);
	outline-offset: 2px;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled,
.woocommerce a.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce input.button:disabled:hover {
	background: var(--velo);
	border-color: var(--filo);
	color: var(--attenuato);
	opacity: 1; /* il velo dice già che è spento: non serve anche la trasparenza */
	padding: var(--spazio-3) var(--spazio-5);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce ul.products li.product a img { transition: none; }
}

/* ── La griglia del negozio ─────────────────────────────────────────────────
   Il nome del capo in serif, il prezzo sotto. Niente riquadri: le foto stanno
   una accanto all'altra e basta.

   WooCommerce impagina a float, con larghezze in percentuale e i clearfix
   `::before/::after`; qui la griglia è una griglia vera, alle tre soglie del
   sistema (DESIGN.md §7.2): 2 colonne sul telefono, 3 al banco, 4 in scrivania.
   I due pseudo-elementi si spengono, altrimenti diventerebbero due celle vuote. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--spazio-6) var(--spazio-4);
	margin: 0 0 var(--spazio-6);
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
}

@media (max-width: 1099px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--spazio-5) var(--spazio-3);
	}
}

/* Tutta la scheda è il collegamento: nessun pulsante sotto (lo toglie il
   plugin). La foto è 4:5, il formato delle schede (DESIGN.md §8.2), col filetto. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	color: var(--inchiostro);
	text-decoration: none;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin: 0;
	border: 1px solid var(--filo);
	box-shadow: none;
	transition: opacity 0.15s;
}

.woocommerce ul.products li.product a:hover img,
.woocommerce ul.products li.product a:active img { opacity: 0.85; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--corpo);
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	margin: var(--spazio-3) 0 var(--spazio-1);
	padding: 0;
}

/* Il prezzo è un importo, e gli importi non sono mai attenuati (DESIGN.md §2.8):
   inchiostro, corpo del testo. Solo il prezzo barrato dell'offerta si attenua. */
.woocommerce ul.products li.product .price {
	color: var(--inchiostro);
	font-family: var(--sistema);
	font-size: var(--corpo);
	font-weight: 400;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del { opacity: 1; color: var(--attenuato); font-size: var(--piccolo); }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--inchiostro); font-weight: 400; }

/* Il bollino «offerta» di WooCommerce: da pastiglia colorata a occhiello. */
.woocommerce span.onsale {
	background: none;
	color: var(--inchiostro);
	border: 1px solid var(--inchiostro);
	border-radius: 0;
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: 0.45rem 0.7rem 0.45rem calc(0.7rem + var(--tracking-occhiello));
	margin: 0;
	top: var(--spazio-3);
	left: var(--spazio-3);
	right: auto;
}

/* Il bollino «Sold out» lo stampa il plugin (unique_lb_badge_soldout):
   stesso disegno dell'offerta, ma pieno — è un fatto, non una promozione. */
.unique-soldout {
	position: absolute;
	top: var(--spazio-3);
	left: var(--spazio-3);
	z-index: 9;
	background: var(--inchiostro);
	color: var(--carta);
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	line-height: 1;
	padding: 0.45rem 0.7rem 0.45rem calc(0.7rem + var(--tracking-occhiello));
}

.woocommerce ul.products li.product,
.woocommerce div.product div.images { position: relative; }

/* La paginazione: numeri senza cornice, la pagina dove sei in ovale
   d'inchiostro come la voce corrente della pillola. Bersagli da 44px. */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	margin: var(--spazio-5) 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spazio-2);
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	float: none;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tocco-minimo);
	min-height: var(--tocco-minimo);
	padding: 0 var(--spazio-3);
	border-radius: var(--raggio-pulsante);
	font-family: var(--sistema);
	font-size: var(--corpo);
	color: var(--inchiostro);
	text-decoration: none;
	line-height: 1;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:active { background: var(--velo); color: var(--inchiostro); }

.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--inchiostro); color: var(--carta); }

/* ── La scheda del capo ─────────────────────────────────────────────────
   Foto a sinistra, sommario a destra dal banco in su; una colonna sul telefono.
   Il plugin (prodotto.php) toglie briciole, riga «COD/Categoria», linguetta
   «Informazioni aggiuntive» e mette l'occhiello col marchio sopra il titolo:
   qui c'è solo il vestito. */
.woocommerce div.product { color: var(--inchiostro); }

.woocommerce div.product div.images,
.woocommerce-page div.product div.images { width: 52%; margin-bottom: var(--spazio-5); }
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary { width: 42%; margin-bottom: var(--spazio-5); }

/* la galleria: filetto sulla foto grande, miniature a filetto, via la lente
   (un'icona: la galleria si apre comunque toccando la foto) */
.woocommerce div.product div.images .woocommerce-product-gallery__image img { border: 1px solid var(--filo); box-shadow: none; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { display: none; }
.woocommerce div.product div.images .flex-control-thumbs { margin: var(--spazio-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.woocommerce div.product div.images .flex-control-thumbs li { float: none; width: calc(25% - var(--spazio-2) * 3 / 4); margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs li img {
	border: 1px solid var(--filo);
	opacity: 1;
	transition: border-color 0.15s;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img:active { border-color: var(--inchiostro); }

/* titolo e prezzo */
.woocommerce div.product .product_title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	line-height: 1.15;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 var(--spazio-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--inchiostro);
	font-family: var(--sistema);
	font-size: var(--forte);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	margin: 0 0 var(--spazio-5);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del { color: var(--attenuato); opacity: 1; font-size: var(--corpo); }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none; font-weight: 400; }

/* le varianti: etichetta in occhiello sopra, tendina del sistema a 44 e a
   tutta larghezza; «Cambia» è un gesto testuale */
.woocommerce div.product form.cart table.variations { width: 100%; margin: 0 0 var(--spazio-4); border: 0; }
.woocommerce div.product form.cart table.variations tbody { display: block; width: 100%; }
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.woocommerce div.product form.cart table.variations th.label label {
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	color: var(--attenuato);
	display: block;
	margin: 0 0 var(--spazio-2);
}
.woocommerce div.product form.cart table.variations td.value { display: flex; align-items: center; gap: var(--spazio-3); flex-wrap: wrap; }
.woocommerce div.product form.cart table.variations select,
.woocommerce div.product form.cart .variations select {
	flex: 1 1 12rem;
	width: auto;
	max-width: 100%;
	min-width: 0;
	min-height: var(--tocco-minimo);
	margin: 0;
	padding: 0.6rem 2.4rem 0.6rem 0.9rem;
	font-size: var(--corpo);
	color: var(--inchiostro);
	background-color: var(--foglio);
	border: 1px solid var(--filo-forte);
	border-radius: var(--raggio-controllo);
	box-shadow: none;
}
.woocommerce div.product form.cart .reset_variations {
	display: inline-flex;
	align-items: center;
	min-height: var(--tocco-minimo);
	font-size: var(--piccolo);
	color: var(--attenuato);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	visibility: visible;
}
.woocommerce div.product form.cart .reset_variations:hover,
.woocommerce div.product form.cart .reset_variations:active { color: var(--inchiostro); }

/* la variante scelta: prezzo e «Ultimo pezzo» in una riga sobria */
.woocommerce div.product .woocommerce-variation.single_variation { margin: 0 0 var(--spazio-3); }
.woocommerce div.product .woocommerce-variation-price .price { margin: 0; font-size: var(--forte); }
.woocommerce div.product .woocommerce-variation-availability p.stock,
.woocommerce div.product p.stock {
	font-size: var(--piccolo);
	color: var(--attenuato);
	margin: var(--spazio-1) 0 0;
}
.woocommerce div.product p.stock.out-of-stock { color: var(--errore-testo); }

/* il modulo d'acquisto: quantità nascosta (un pezzo per taglia, decisione
   utente 15/08: il campo resta nel modulo con valore 1), «Aggiungi al
   carrello» a tutta larghezza — è l'unico pieno del sommario */
.woocommerce div.product form.cart div.quantity { display: none; }
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
	display: inline-flex;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	float: none;
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	background: var(--velo);
	border-color: var(--filo);
	color: var(--attenuato);
	opacity: 1;
}
.woocommerce div.product form.cart { margin-bottom: var(--spazio-4); }
.woocommerce div.product .ppc-button-wrapper,
.woocommerce div.product .ppcp-messages { margin-top: var(--spazio-3); }

/* le linguette (restano solo se un giorno si accendono le recensioni) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--spazio-5);
	border-bottom: 1px solid var(--filo);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 var(--spazio-5) 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	color: var(--attenuato);
	text-decoration: none;
	padding: var(--spazio-3) 0;
	display: block;
	border-bottom: 1px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--inchiostro); border-bottom-color: var(--inchiostro); }

/* i correlati («Ti potrebbero piacere»): titolo del sistema, filetto sopra,
   griglia già a 2/3/4 come lo shop */
.woocommerce div.product section.related,
.woocommerce div.product section.upsells {
	clear: both;
	border-top: 1px solid var(--filo);
	margin-top: clamp(2rem, 6vw, 3.6rem);
	padding-top: clamp(1.6rem, 4vw, 2.4rem);
}
.woocommerce div.product section.related > h2,
.woocommerce div.product section.upsells > h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	margin: 0 0 var(--spazio-5);
}

@media (max-width: 559px) {
	.woocommerce div.product div.images,
	.woocommerce-page div.product div.images,
	.woocommerce div.product div.summary,
	.woocommerce-page div.product div.summary { float: none; width: 100%; }
}

/* ── Carrello e cassa ─────────────────────────────────────────────────────
   Tabelle a filetti: intestazioni in occhiello, righe separate da un filo,
   niente cornici né righe alternate grigie. Gli importi in inchiostro e con le
   cifre tabellari (DESIGN.md §2.8 e §3.4). */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	width: 100%; /* il blocktheme di Woo le fa al 70%, e non si capisce perché */
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	margin: 0 0 var(--spazio-5);
}

.woocommerce table.shop_table th {
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	color: var(--attenuato);
	border-bottom: 1px solid var(--filo);
	padding: var(--spazio-3) var(--spazio-3) var(--spazio-3) 0;
	vertical-align: middle;
}

.woocommerce table.shop_table td {
	border-top: 1px solid var(--filo);
	padding: var(--spazio-4) var(--spazio-3) var(--spazio-4) 0;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

.woocommerce table.shop_table tbody:first-child tr:first-child td { border-top: 0; }
.woocommerce table.shop_table td.product-name a { color: var(--inchiostro); text-decoration: none; }
.woocommerce table.shop_table td.product-name a:hover,
.woocommerce table.shop_table td.product-name a:active { text-decoration: underline; }
.woocommerce table.shop_table .amount { color: var(--inchiostro); }

/* la foto del capo nel carrello: 4:5 col filetto, non il quadrato di Woo */
.woocommerce-page .woocommerce-cart-form .product-thumbnail { width: 5.5rem; }
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce-page .woocommerce-cart-form .product-thumbnail a img {
	width: 4.5rem;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid var(--filo);
	box-shadow: none;
	display: block;
}

/* «Rimuovi»: un gesto testuale (il plugin sostituisce il «×» rosso di Woo).
   L'area di tocco arriva a 44px, il testo resta piccolo e attenuato. */
.woocommerce table.shop_table td.product-remove { width: 1%; white-space: nowrap; }
.woocommerce .product-remove a.uqc-rimuovi {
	display: inline-flex;
	align-items: center;
	min-height: var(--tocco-minimo);
	font-family: var(--sistema);
	font-size: var(--piccolo);
	color: var(--attenuato);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.woocommerce .product-remove a.uqc-rimuovi:hover,
.woocommerce .product-remove a.uqc-rimuovi:active { color: var(--inchiostro); }

/* la quantità: un campo del sistema, alto 44 */
.woocommerce .quantity .qty {
	border: 1px solid var(--filo-forte);
	border-radius: var(--raggio-controllo);
	min-height: var(--tocco-minimo);
	box-sizing: border-box;
	padding: 0.5rem;
	text-align: center;
	width: 4rem;
	font-size: var(--corpo);
	color: var(--inchiostro);
	background: var(--foglio);
	box-shadow: none;
}

/* La riga delle azioni sotto la tabella: coupon a sinistra (campo + «Applica»
   affiancati), «Aggiorna carrello» a destra. Woo mette il tutto in una cella
   che qui non ha filetto sopra: la tabella finisce con l'ultimo capo. */
.woocommerce table.shop_table td.actions {
	border-top: 0;
	padding: var(--spazio-5) 0 0;
	text-align: left;
}

/* Il blocktheme di Woo limita carrello, cassa e account a 1000px ma li lascia
   a sinistra: al centro del modello largo, sotto la testa. */
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce,
.woocommerce-account main .woocommerce { margin-inline: auto; }
.woocommerce table.shop_table td.actions .coupon {
	display: inline-flex;
	gap: var(--spazio-3);
	align-items: stretch;
	float: none;
	vertical-align: middle;
}
/* l'identificativo nel selettore serve: `woocommerce-blocktheme.css` di Woo
   scrive `#coupon_code` (50% sotto i 768px, alto 50px) e un ID batte le classi */
.woocommerce table.shop_table td.actions .coupon .input-text,
.woocommerce-page .woocommerce-cart-form #coupon_code {
	width: 14rem;
	height: auto;
	min-height: var(--tocco-minimo);
	margin: 0;
	padding: 0.75rem 0.9rem;
	font-size: var(--corpo);
	border: 1px solid var(--filo-forte);
	border-radius: var(--raggio-controllo);
	background: var(--foglio);
	box-shadow: none;
	float: none;
	line-height: 1.2;
}
.woocommerce table.shop_table td.actions .coupon .input-text::placeholder { color: var(--attenuato); }
.woocommerce table.shop_table td.actions > .button { float: right; }

/* «Aggiorna carrello» serve solo dopo aver cambiato una quantità: Woo lo tiene
   spento finché non succede, e spento qui non si vede (decisione utente 24/09:
   da noi è un pezzo per taglia, l'ovale grigio occupava spazio per niente). */
.woocommerce-cart table.cart td.actions > button[name="update_cart"]:disabled { display: none; }

/* I totali: titolo serif, righe a filetto, il TOTALE in evidenza per peso e corpo. */
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--titolo);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 var(--spazio-4);
}

.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td { border-top: 1px solid var(--filo); border-bottom: 0; }
.woocommerce-cart .cart-collaterals .cart_totals table tr:first-child th,
.woocommerce-cart .cart-collaterals .cart_totals table tr:first-child td { border-top: 0; }
.woocommerce-cart .cart-collaterals .cart_totals table th { width: 40%; }
.woocommerce-cart .cart-collaterals .cart_totals table td { text-align: right; padding-right: 0; }
.woocommerce-cart .cart-collaterals .cart_totals table .order-total td,
.woocommerce-cart .cart-collaterals .cart_totals table .order-total .amount { font-size: var(--forte); font-weight: 600; color: var(--inchiostro); }
.woocommerce-cart .cart-collaterals .cart_totals table .order-total th { color: var(--inchiostro); }

/* «Calcola spedizione»: gesto testuale senza l'iconcina di Woo, 44px */
.woocommerce .shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	min-height: var(--tocco-minimo);
	color: var(--inchiostro);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	font-size: var(--corpo);
}
.woocommerce .shipping-calculator-button::after { display: none; }
.woocommerce .shipping-calculator-form { text-align: left; }
.woocommerce .shipping-calculator-form .form-row label { font-size: var(--piccolo); color: var(--attenuato); }

/* Sotto il totale: la riga delle rate, poi l'unico pulsante pieno, poi «oppure»
   e i pagamenti rapidi (Apple/Google Pay di Stripe, PayPal) bianchi col filetto
   — il loro aspetto si sceglie nei due plugin, qui solo l'ordine e gli spazi.
   Il separatore è uno pseudo-elemento rimesso in fila con `order`, così non
   dipende da cosa stampano i plugin né dal loro ordine nel markup. */
.woocommerce-cart .wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: var(--spazio-3);
	padding: 0;
	margin-top: var(--spazio-5);
}
.woocommerce-cart .wc-proceed-to-checkout > * { order: 5; margin: 0; }
.woocommerce-cart .wc-proceed-to-checkout > .ppcp-messages { order: 1; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	order: 2;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}
.woocommerce-cart .wc-proceed-to-checkout::after {
	content: "oppure";
	order: 3;
	text-align: center;
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	color: var(--attenuato);
}
.woocommerce-cart .wc-proceed-to-checkout > #wc-stripe-express-checkout-element { order: 4; margin: 0 !important; }

/* Sul telefono Woo trasforma la tabella in blocchetti «etichetta → valore»
   (la stessa regola di DESIGN.md §7.1). Qui l'etichetta è un occhiello, via
   il grigio alternato e il due punti; «Rimuovi» e la quantità restano a 44px. */
@media (max-width: 767px) {
	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr { border-top: 1px solid var(--filo); }
	.woocommerce table.shop_table_responsive tr:first-child,
	.woocommerce-page table.shop_table_responsive tr:first-child { border-top: 0; }
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td { border-top: 0; padding: var(--spazio-3) 0; }
	.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
	.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td { background: transparent; }
	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		content: attr(data-title);
		font-family: var(--sistema);
		font-size: var(--occhiello);
		font-weight: 600;
		letter-spacing: var(--tracking-occhiello);
		text-transform: uppercase;
		color: var(--attenuato);
	}
	.woocommerce table.shop_table_responsive tr td.product-remove,
	.woocommerce-page table.shop_table_responsive tr td.product-remove { text-align: left; padding-top: var(--spazio-4); }
	.woocommerce table.shop_table_responsive tr td.actions,
	.woocommerce-page table.shop_table_responsive tr td.actions { border-top: 0; padding-top: var(--spazio-5); }
	.woocommerce table.shop_table td.actions .coupon,
	.woocommerce-cart table.cart td.actions .coupon { display: flex; flex-direction: column; gap: var(--spazio-3); }
	.woocommerce-page .woocommerce-cart-form #coupon_code,
	.woocommerce-cart table.cart td.actions .coupon .button { width: 100%; margin: 0; }
	.woocommerce table.shop_table td.actions > .button,
	.woocommerce-cart table.cart td.actions > .button { float: none; width: 100%; margin-top: var(--spazio-3); }
	.woocommerce-cart .cart-collaterals .cart_totals table th { width: auto; }
}

/* In cassa i pagamenti rapidi stanno in cima, prima dell'indirizzo (li accende
   Stripe → Pagamenti rapidi → «Pagamento»). Il suo «— OPPURE —» è testo con le
   lineette: si spegne e al suo posto va lo stesso «oppure» del carrello. */
.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
	margin: var(--spazio-3) 0 var(--spazio-5) !important; /* Stripe scrive margin-top in linea */
	font-size: 0;
	line-height: 0;
	text-align: center;
}
.woocommerce-checkout #wc-stripe-express-checkout-button-separator::after {
	content: "oppure";
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	color: var(--attenuato);
}

.woocommerce-checkout #payment {
	background: var(--velo);
	border-radius: var(--raggio);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--carta);
	border-radius: var(--raggio);
	font-size: var(--piccolo);
}

.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--carta); }

/* ── Avvisi ─────────────────────────────────────────────────────────────────
   «Prodotto aggiunto al carrello», gli errori della cassa. Filetto a sinistra
   invece della fascia colorata: è il gesto del resto del sito. Woo ne ha due
   generazioni (le classi `woocommerce-message/info/error` e i nuovi
   `wc-block-components-notice-banner`): stesso vestito per entrambe, e via
   l'icona SVG. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .wc-block-components-notice-banner,
.wc-block-components-notice-banner {
	background: var(--velo);
	color: var(--inchiostro);
	border: 0;
	border-left: 2px solid var(--inchiostro);
	border-radius: 0;
	font-size: var(--piccolo);
	padding: var(--spazio-4) var(--spazio-5);
	margin: 0 0 var(--spazio-5);
	box-shadow: none;
	line-height: 1.5;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce .wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner > svg { display: none; }

.wc-block-components-notice-banner .wc-block-components-notice-banner__content { color: inherit; }

.woocommerce-message,
.wc-block-components-notice-banner.is-success { border-left-color: var(--ok-testo); background: var(--ok-sfondo); }
.woocommerce-error,
.wc-block-components-notice-banner.is-error { border-left-color: var(--errore-testo); background: var(--errore-sfondo); color: var(--errore-testo); }

/* L'avviso è una riga: la frase a sinistra, il gesto a destra; sul telefono
   il gesto va a capo sotto la frase. Woo stampa il link PRIMA del testo e lo
   manda a destra con un float: qui l'ordine lo decide il flex. Gli errori
   restano fuori: sono un elenco (`ul > li`), uno sotto l'altro. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: var(--spazio-5);
	row-gap: var(--spazio-1);
	padding-top: var(--spazio-2);
	padding-bottom: var(--spazio-2);
}

/* Dopo «Aggiungi al carrello» Woo sposta il fuoco sull'avviso (tabindex=-1)
   perché il lettore di schermo lo annunci: Chrome ci disegnava attorno il
   suo anello blu. L'avviso non è una cosa da toccare, quindi niente contorno;
   i veri comandi tengono il loro :focus-visible. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.wc-block-components-notice-banner:focus { outline: none; }

/* Il pulsante dentro l'avviso («Visualizza carrello»): un gesto testuale,
   non un pulsante. Serve `.woocommerce` davanti: senza, `.woocommerce
   a.button` (più specifica) gli rimetteva cornice, maiuscolo e spaziatura.
   Vale anche per la forma a blocchi (`wc-block-components-notice-banner`),
   che è quella che Woo stampa sulla scheda del capo. */
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce .wc-block-components-notice-banner a.button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.wc-block-components-notice-banner .button {
	order: 2;
	display: inline-flex;
	align-items: center;
	float: none;
	margin: 0;
	padding: 0;
	min-height: var(--tocco-minimo);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--inchiostro);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .woocommerce-error a.button:hover,
.woocommerce .wc-block-components-notice-banner a.button:hover,
.wc-block-components-notice-banner .button:hover { background: transparent; color: var(--attenuato); }
.woocommerce .woocommerce-message a.button:active,
.woocommerce .woocommerce-info a.button:active,
.woocommerce .woocommerce-error a.button:active,
.woocommerce .wc-block-components-notice-banner a.button:active,
.wc-block-components-notice-banner .button:active { background: transparent; color: var(--attenuato); }
.woocommerce .woocommerce-error a.button { color: inherit; }

/* ── I passaggi dell'ordine ─────────────────────────────────────────────── */
.woocommerce-breadcrumb {
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	color: var(--attenuato);
}

.woocommerce-breadcrumb a { color: var(--attenuato); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--inchiostro); text-decoration: underline; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-size: var(--piccolo);
	color: var(--attenuato);
}

/* Le stelline delle recensioni: oro, non giallo. */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--oro-scuro); }