/* ============================================================
   Alma Formazione — carrello, cassa, account

   WooCommerce porta le proprie tabelle e i propri moduli. Non li
   riscriviamo: li vestiamo con i colori e i caratteri del tema,
   perché carrello e cassa sono la parte che incassa e va lasciata
   funzionante, non reinventata.
   ============================================================ */

/* ---------- AVVISI ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: var(--raggio);
	border-left: 3px solid var(--verde);
	background: var(--pill-verde);
	color: var(--verde-scuro);
	font-size: 15px;
	list-style: none;
}
.woocommerce-info { border-left-color: var(--blu); background: var(--pill-blu); color: var(--blu); }
.woocommerce-error { border-left-color: var(--rosso); background: #fdecec; color: #a10808; }
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { color: inherit; text-decoration: underline; }
.woocommerce-message .button { margin-left: auto; }

/* WooCommerce mette l'icona con un carattere del proprio font,
   che qui non e' caricato: usciva un glifo rotto accanto al
   testo. Il colore del bordo dice gia' di che avviso si tratta. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; display: none; }

/* ---------- TABELLE (carrello, ordini, downloads) ---------- */
.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 28px;
	border: 1px solid var(--bordo);
	border-collapse: collapse;
	border-radius: 0;
}
.woocommerce table.shop_table th {
	padding: 14px 16px;
	background: var(--beige);
	border-bottom: 1px solid var(--bordo);
	font-family: var(--font-titoli);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--testo-muto);
	text-align: left;
}
.woocommerce table.shop_table td {
	padding: 18px 16px;
	border-bottom: 1px solid var(--bordo);
	vertical-align: middle;
	font-size: 15px;
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: none; }

/* La miniatura del prodotto ha una misura sua: senza, eredita
   quella della vetrina e diventa una card dentro una cella. */
.woocommerce table.shop_table td.product-thumbnail { width: 90px; }
.woocommerce table.shop_table td.product-thumbnail img {
	/* WooCommerce serve un file quadrato ma con l'attributo width
	   della vetrina: senza max-width la cella lo schiaccia a 57px
	   e l'immagine esce deformata. */
	width: 72px;
	max-width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
}
.woocommerce table.shop_table td.product-name a {
	font-family: var(--font-titoli);
	font-weight: 600;
	color: var(--blu-profondo);
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--blu); }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
	font-family: var(--font-titoli);
	font-weight: 600;
	color: var(--blu-profondo);
	white-space: nowrap;
}

/* La crocetta per togliere un articolo: un bersaglio grande
   abbastanza da centrare col dito. */
.woocommerce table.shop_table td.product-remove { width: 52px; text-align: center; }
.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--beige);
	color: var(--testo-muto) !important;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
}
.woocommerce a.remove:hover { background: #fdecec; color: #a10808 !important; }

/* ---------- QUANTITÀ ---------- */
.woocommerce .quantity input.qty {
	width: 68px;
	height: 42px;
	padding: 0 8px;
	text-align: center;
	font-family: var(--font-testo);
	font-size: 15px;
	border: 1px solid var(--bordo-campo);
	border-radius: var(--raggio);
	background: var(--bianco);
}

/* ---------- COUPON ---------- */
.woocommerce table.shop_table td.actions { padding: 16px; background: var(--beige); }
.woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.woocommerce .coupon label { display: none; }
.woocommerce #coupon_code {
	width: auto;
	min-width: 180px;
	height: 44px;
	padding: 0 13px;
	font-size: 15px;
	border: 1px solid var(--bordo-campo);
	border-radius: var(--raggio);
}
.woocommerce td.actions > .button { margin-left: auto; }

/* ---------- BOTTONI ---------- */
/* Un solo bottone arancione per schermata: qui è "vai a pagare".
   Gli altri restano neutri, altrimenti nessuno guida l'occhio. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	font-family: var(--font-titoli);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--testo);
	background: var(--bianco);
	border: 1px solid var(--bordo-campo);
	border-radius: var(--raggio);
	cursor: pointer;
	text-decoration: none;
}
/* I selettori ricalcano quelli di WooCommerce, che nomina anche
   l'elemento ("button.button.alt"): con una classe sola le sue
   regole vincevano e al passaggio del mouse tornava fuori il
   viola del suo foglio predefinito. */
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
	border-color: var(--blu);
	color: var(--blu);
	background: var(--bianco);
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce button.single_add_to_cart_button {
	background: var(--arancio);
	border-color: var(--arancio);
	color: var(--bianco);
}
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce div.product form.cart button.button:hover,
.woocommerce button.single_add_to_cart_button:hover {
	background: var(--arancio-scuro);
	border-color: var(--arancio-scuro);
	color: var(--bianco);
}
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- TOTALI ---------- */
.cart_totals,
.woocommerce-checkout-review-order {
	padding: 24px;
	background: var(--beige);
	border: 1px solid var(--bordo);
	border-top: 3px solid var(--blu);
}
.cart_totals h2,
.woocommerce-checkout-review-order h3 {
	font-size: 20px;
	margin: 0 0 16px;
}
.cart_totals table.shop_table,
.woocommerce-checkout-review-order table {
	background: var(--bianco);
	margin-bottom: 18px;
}
.cart_totals table.shop_table th { background: none; width: 45%; }
.cart_totals .order-total td { font-size: 19px; }
.cart_totals .checkout-button { width: 100%; margin-top: 4px; }

/* WooCommerce imposta larghezze in percentuale e float sui propri
   contenitori: senza annullarli il carrello resta schiacciato in
   meta' pagina. */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { width: 100%; }
.woocommerce-cart-form { width: 100%; margin-bottom: 32px; }
/* WooCommerce stampa i suggerimenti prima dei totali. Chi ha il
   carrello pieno vuole pagare, non comprare altro: con "order" i
   totali risalgono senza toccare l'ordine nell'HTML, che resta
   quello giusto per chi legge con la tastiera o con un lettore
   di schermo.
   Colonne separate anziche' una griglia: i blocchi che WooCommerce
   stampa qui cambiano col carrello pieno o vuoto, e in celle
   fisse finirebbero fuori posto. */
.woocommerce .cart-collaterals {
	width: 100%;
	float: none;
	display: flex;
	flex-direction: column;
}
.woocommerce .cart-collaterals .cross-sells {
	width: 100%;
	float: none;
	order: 2;
	margin: 40px 0 0;
	padding-top: 32px;
	border-top: 1px solid var(--bordo);
}
.woocommerce .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
	order: 1;
	max-width: 420px;
	margin-left: auto;
}

/* I prodotti suggeriti usano la griglia della vetrina. */
.woocommerce .cross-sells > h2 { font-size: 22px; margin: 0 0 18px; }
.woocommerce .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce .cross-sells ul.products::before,
.woocommerce .cross-sells ul.products::after { display: none; }
.woocommerce .cross-sells ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border: 1px solid var(--bordo);
	background: var(--bianco);
}
.woocommerce .cross-sells ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0 0 4px;
}
.woocommerce .cross-sells ul.products li.product h2,
.woocommerce .cross-sells ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-titoli);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--blu-profondo);
	margin: 0;
	padding: 0;
}
.woocommerce .cross-sells ul.products li.product .price {
	font-family: var(--font-titoli);
	font-size: 17px;
	font-weight: 700;
	color: var(--blu-profondo);
	margin: auto 0 0;
}
.woocommerce .cross-sells ul.products li.product .price del { font-size: 14px; font-weight: 400; }
.woocommerce .cross-sells ul.products li.product .button { width: 100%; margin-top: 8px; }

/* Il bollino "Sale!" tondo di WooCommerce diventa la nostra
   pillola: un cerchio verde oliva non appartiene alla palette. */
.woocommerce span.onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	min-width: 0;
	min-height: 0;
	padding: 3px 9px;
	margin: 0;
	line-height: 1.4;
	border-radius: var(--raggio-pill);
	background: var(--rosso);
	color: var(--bianco);
	font-family: var(--font-titoli);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.woocommerce ul.products li.product { position: relative; }

/* ---------- CASSA ---------- */
/* WooCommerce affianca form e riepilogo con i float: senza il suo
   foglio restano impilati e la meta' sinistra della pagina resta
   vuota. Qui li dispone la griglia, e il riepilogo resta in vista
   mentre si compilano i campi. */
@media (min-width: 981px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 40px;
		align-items: start;
	}
	/* Le righe vanno dette, non lasciate all'automatico: titolo e
	   riepilogo hanno entrambi "colonna 2", ma senza una riga
	   assegnata la griglia li accoda uno sotto l'altro dopo la
	   colonna dei dati, che e' alta millequattrocento pixel. Il
	   riepilogo finiva laggiu', staccato dal suo titolo. */

	/* Il riquadro dei pagamenti rapidi sta sopra a tutta larghezza:
	   senza dirlo prenderebbe la prima cella e spingerebbe giu'
	   il resto. Quando e' vuoto non lascia spazio. */
	.woocommerce-checkout form.checkout > .wcpay-express-checkout-wrapper {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.woocommerce-checkout form.checkout > .wcpay-express-checkout-wrapper:empty { display: none; }

	.woocommerce-checkout form.checkout > .col2-set,
	.woocommerce-checkout form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 2;
	}
	/* Titolo e riepilogo stanno in un contenitore loro (lo aggiunge
	   inc/woocommerce.php): su due righe della griglia la prima si
	   allineava all'altezza di quel che aveva accanto a sinistra
	   - duecento pixel per un titolo di ventisei - e il riquadro
	   partiva da laggiu', staccato dal suo titolo. */
	.woocommerce-checkout form.checkout > .alma-riepilogo {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		position: sticky;
		top: 20px;
	}
	.woocommerce-checkout .alma-riepilogo > h3#order_review_heading {
		margin: 0 0 14px;
		padding-bottom: 0;
		border-bottom: none;
	}
	/* Il form ha gia' due colonne dentro: qui la riga e' una sola,
	   altrimenti i campi diventano strettissimi. */
	.woocommerce-checkout form.checkout .col2-set { grid-template-columns: 1fr; }

	/* Nome e cognome, CAP e citta' stanno bene affiancati: uno
	   sotto l'altro allungano il modulo senza motivo.

	   Il plugin dei campi personalizzati marca ogni riga come
	   "wide", quindi le classi di WooCommerce qui non distinguono
	   piu' nulla: si va per nome del campo. */
	.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}
	.woocommerce-checkout #customer_details .form-row { grid-column: 1 / -1; }
	.woocommerce-checkout #customer_details .wooccm-field-first_name,
	.woocommerce-checkout #customer_details .wooccm-field-postcode,
	.woocommerce-checkout #customer_details .wooccm-field-phone { grid-column: 1; }
	.woocommerce-checkout #customer_details .wooccm-field-last_name,
	.woocommerce-checkout #customer_details .wooccm-field-city,
	.woocommerce-checkout #customer_details .wooccm-field-email { grid-column: 2; }
}

/* Il limite dei moduli editoriali non vale alla cassa: li' i campi
   stanno in una colonna di testo, qui in un modulo largo. */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce-cart form .form-row input.input-text {
	max-width: none;
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
.woocommerce-checkout h3 {
	font-size: 20px;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bordo);
}

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 14px;
	padding: 0;
}
.woocommerce form .form-row label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--testo-medio);
}
.woocommerce form .form-row .required { color: var(--arancio); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	height: 46px;
	padding: 0 13px;
	font-family: var(--font-testo);
	font-size: 15px;
	color: var(--testo);
	background: var(--bianco);
	border: 1px solid var(--bordo-campo);
	border-radius: var(--raggio);
}
.woocommerce form .form-row textarea { height: auto; padding: 12px 13px; min-height: 90px; }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding: 0;
	color: var(--testo);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

/* ---------- PAGAMENTI ---------- */
.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid var(--bordo);
	list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: 12px 0;
	list-style: none;
}
.woocommerce-checkout #payment div.payment_box {
	margin: 10px 0 0;
	padding: 14px 16px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--testo-medio);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 18px 0 0; }
.woocommerce #place_order { width: 100%; padding: 16px; font-size: 16px; }

/* ---------- CARRELLO VUOTO ---------- */
.cart-empty {
	padding: 20px 0;
	font-size: 17px;
	color: var(--testo-medio);
}
.return-to-shop { margin-bottom: 32px; }

/* ---------- SCHEDA PRODOTTO SINGOLA ---------- */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
/* WooCommerce impagina la scheda con i float: "div.images" al 48%
   e il riassunto accanto. Qui le due colonne le fa la griglia, e
   quel 48% si applicherebbe *dentro* la cella, dimezzando la
   figura. I selettori ricalcano i suoi per peso: senza
   "div.images" il suo vince e l'immagine resta piccola. */
.woocommerce div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
}
.woocommerce div.product div.summary,
.woocommerce #content div.product div.summary,
.woocommerce div.product .entry-summary {
	width: 100%;
	float: none;
	margin: 0;
}

/* La figura riempie la sua colonna: a 600px naturali su una cella
   da 630 resterebbe un bordo bianco irregolare a destra. */
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image > img,
.woocommerce div.product .woocommerce-product-gallery__wrapper > img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
}
/* Lo zoom di WooCommerce sovrappone una copia grande: senza
   questo sborda dalla colonna. */
.woocommerce div.product .woocommerce-product-gallery img.zoomImg { border: none; border-radius: 0; }
/* Le miniature sotto la figura principale. */
.woocommerce div.product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.woocommerce div.product .flex-control-thumbs li { width: 72px; margin: 0; }

/* Categorie e argomenti: WooCommerce li stampa in due <span> di
   fila, che senza impaginazione si leggono come una frase sola
   ("Summer Promo Argomenti: b2"). */
.woocommerce div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--bordo);
	font-size: 14px;
	color: var(--testo-muto);
}
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .product_meta a { color: var(--blu); }
.woocommerce div.product .product_meta a:hover { text-decoration: underline; }
.woocommerce div.product .product_title {
	font-family: var(--font-titoli);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--blu-profondo);
	margin: 0 0 14px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-titoli);
	font-size: 28px;
	font-weight: 700;
	color: var(--blu-profondo);
	margin: 0 0 18px;
}
.woocommerce div.product p.price del { font-size: 19px; color: var(--testo-muto); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.woocommerce div.product form.cart .button { padding: 15px 28px; font-size: 16px; }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 20px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 0 0 0;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--bordo);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 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 {
	display: block;
	padding: 11px 18px;
	font-family: var(--font-titoli);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--testo-muto);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--blu);
	border-bottom-color: var(--blu);
}
/* Con una linguetta sola la barra e' un'etichetta, non un comando:
   il testo sotto si legge lo stesso. */
.woocommerce div.product .woocommerce-tabs ul.tabs:has(li:only-child),
body.alma-scheda-unica div.product .woocommerce-tabs ul.tabs { display: none; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child:empty { display: none; }

.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; margin-top: 8px; }
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 { font-size: 26px; margin: 0 0 20px; }

/* La vetrina dei correlati usa la griglia delle schede: senza
   questo WooCommerce le impila con i propri float. */
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .related ul.products li.product,
.woocommerce div.product .upsells ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* ---------- ACCOUNT ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; margin-bottom: 24px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 9px 14px;
	font-size: 14.5px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	color: var(--testo);
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--blu);
	border-color: var(--blu);
	color: var(--bianco);
}
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }

@media (min-width: 981px) {
	.woocommerce-account { display: grid; grid-template-columns: 230px 1fr; gap: 40px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; }
}

/* ---------- SCHERMI STRETTI ---------- */
@media (max-width: 980px) {
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr; gap: 24px; }
	.woocommerce div.product { grid-template-columns: 1fr; gap: 28px; }
	.woocommerce div.product .related ul.products,
	.woocommerce div.product .upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.woocommerce div.product .related ul.products,
	.woocommerce div.product .upsells ul.products { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	/* La tabella del carrello diventa una lista di schede: sei
	   colonne su 390px sarebbero illeggibili. */
	.woocommerce table.shop_table.cart thead { display: none; }
	.woocommerce table.shop_table.cart,
	.woocommerce table.shop_table.cart tbody,
	.woocommerce table.shop_table.cart tr,
	.woocommerce table.shop_table.cart td { display: block; width: 100%; }
	.woocommerce table.shop_table.cart tr {
		position: relative;
		padding: 16px 16px 16px 100px;
		border-bottom: 1px solid var(--bordo);
		min-height: 104px;
	}
	.woocommerce table.shop_table.cart td {
		padding: 3px 0;
		border: none;
	}
	.woocommerce table.shop_table.cart td.product-thumbnail {
		position: absolute;
		left: 16px;
		top: 16px;
		width: 72px;
	}
	.woocommerce table.shop_table.cart td.product-remove {
		position: absolute;
		right: 12px;
		top: 14px;
		width: auto;
		z-index: 1;
	}
	/* La croce sta nell'angolo: senza questo copre l'etichetta
	   della prima cella. */
	.woocommerce table.shop_table.cart td.product-name { padding-right: 34px; }
	/* Ogni cella dice cosa contiene: senza intestazione, un numero
	   da solo non si capisce. L'etichetta la mette gia' il foglio
	   mobile di WooCommerce leggendo "data-title": qui si sistema
	   solo come si presenta.

	   Il suo "float: left" spingeva il titolo del prodotto fuori
	   dalla scheda, e le celle senza data-title (miniatura e
	   croce) stampavano un ":" da solo. */
	/* WooCommerce allinea a destra con !important: in una scheda
	   alta e stretta il testo va letto da sinistra come tutto il
	   resto della pagina. */
	.woocommerce table.shop_table.cart tr td { text-align: left !important; }
	.woocommerce table.shop_table.cart tr td::before {
		float: none;
		display: block;
		margin-bottom: 2px;
		font-family: var(--font-titoli);
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--testo-muto);
	}
	.woocommerce table.shop_table.cart tr td.product-thumbnail::before,
	.woocommerce table.shop_table.cart tr td.product-remove::before,
	.woocommerce table.shop_table.cart tr td.actions::before { content: none; display: none; }

	/* Il nome del prodotto e' l'informazione principale: sta su
	   piu' righe senza uscire dalla scheda. */
	.woocommerce table.shop_table.cart td.product-name {
		font-size: 16px;
		overflow-wrap: break-word;
	}
	.woocommerce table.shop_table.cart td.product-name a { display: inline-block; max-width: 100%; }
	.woocommerce table.shop_table.cart td.actions { padding: 16px; }
	/* Il codice sconto e il suo bottone su due righe: affiancati
	   in 232px il testo del bottone va a capo tre volte. */
	.woocommerce .coupon { width: 100%; flex-direction: column; align-items: stretch; }
	.woocommerce #coupon_code { flex: 0 0 auto; width: 100%; min-width: 0; }
	.woocommerce .coupon .button { width: 100% !important; white-space: nowrap; }
	.woocommerce td.actions > .button { width: 100%; margin-left: 0; }

	.cart_totals, .woocommerce-checkout-review-order { padding: 18px; }
	.woocommerce div.product .product_title { font-size: 25px; }
}

/* Il carrello riempie la pagina: senza questo i contenitori di
   WooCommerce restano a larghezza automatica e il contenuto si
   accalca a sinistra con meta' schermo vuoto.

   Niente griglia a due colonne: i blocchi del carrello non sono
   fratelli diretti in un ordine stabile — cambiano a seconda che
   ci siano suggeriti o meno — e forzarli in celle fisse li manda
   fuori posto. Impilati e allineati funzionano sempre. */
.woocommerce-cart .woocommerce > *,
.woocommerce-checkout .woocommerce > * { max-width: none; }
.woocommerce-cart table.shop_table.cart { width: 100%; }
.woocommerce-cart .cart-collaterals { max-width: none; }