/*
 * Negozio: carrello, checkout, conferma d'ordine e area clienti
 * (`/mio-account/`), piu' la pagina pubblica del recesso (blocco
 * st/recesso, Task 8). Task 5, spec 2026-09-30-negozio-area-clienti-recesso.
 *
 * Foglio a parte, caricato solo su queste pagine (inc/assets.php,
 * st_enqueue_negozio_assets()): il resto del sito non lo scarica. Stessi
 * token di main.css (var(--wp--preset--...)), niente hex ne' px a mano.
 *
 * WooCommerce carica il proprio CSS (woocommerce.css/-layout/-smallscreen,
 * non nostro, non dequeuato: da' la spina dorsale funzionale - tabelle,
 * form-row, notifiche) e quello dei blocchi Cart/Checkout. Qui si
 * ridisegnano solo colori, font, spaziature e pulsanti sui token del tema;
 * dove serve battere una regola sua si usa !important (l'eccezione che le
 * regole del progetto ammettono per gli stili di terzi).
 *
 * Niente backdrop-filter: sfarfallio gia' risolto altrove (HANDOFF).
 */

/* -------------------------------------------------------------- Layout */

/*
 * page.php stampa the_content() senza contenitore: i blocchi carrello e
 * checkout di WooCommerce (alignwide, ma il tema non supporta align-wide)
 * uscirebbero a bordo pagina. Stessa misura di .st-container.
 */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-order-received .woocommerce-order,
.woocommerce-account .woocommerce {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1140px + 2 * var(--wp--preset--spacing--30));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/*
 * Il logo dell'header: woocommerce-layout.css mette ".woocommerce-page img
 * { height: auto }" (0,1,1), piu' forte della regola di base del tema
 * ".st-brand__logo { height: 56px }" (0,1,0) da sola. Sotto i 1101px
 * main.css usa gia' ".st-header .st-brand__logo" (0,2,0, e quello vince
 * gia' da solo): serve solo qui, sopra i 1101px, dove main.css non ha un
 * selettore con quella specificita'. Stessa altezza della regola di base:
 * non e' un valore nuovo, solo la stessa misura scritta con un selettore
 * che vinca anche sulle pagine del negozio.
 */
@media (min-width: 1101px) {
	.woocommerce-page .st-header .st-brand__logo {
		height: 56px;
	}
}

.woocommerce-order-received .woocommerce-order {
	padding-block-start: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------- Tipografia */

.woocommerce-cart h1,
.woocommerce-cart h2,
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-order-received h1,
.woocommerce-order-received h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-checkout h2,
.woocommerce-order-received h2 {
	font-size: var(--wp--preset--font-size--titolo-m);
}

/* ------------------------------------------------------------ Notifiche */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.wc-block-components-notice-banner {
	border-radius: 4px;
	border-top: none !important;
	border-left: 4px solid var(--wp--preset--color--red) !important;
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--body) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
	display: none;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-left-color: #1a7f37 !important;
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-left-color: var(--wp--preset--color--ink) !important;
}

/* --------------------------------------------------------------- Moduli */

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce table.shop_table td select,
.woocommerce ::placeholder,
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-combobox input {
	font-family: var(--wp--preset--font-family--body);
}

.woocommerce form .input-text,
.woocommerce form textarea,
.woocommerce form select,
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.select2-container--default .select2-selection--single {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 4px !important;
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--body) !important;
	box-shadow: none !important;
}

.woocommerce form .input-text:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--red) !important;
	outline: none;
}

.woocommerce form .form-row label,
.wc-block-components-text-input label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--body);
}

/* ------------------------------------------------------------- Pulsanti */

/*
 * WooCommerce lascia i propri .button (classici) e i pulsanti dei blocchi
 * (React) senza stile forte quando il tema non e' un block theme "con
 * stili per i pulsanti" (il nostro non lo e': niente directory
 * templates/*.html) - qui si applica la stessa veste di .st-button:
 * pillola, bordo 2px trasparente, sfondo nero, testo bianco, hover rosso.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wp-element-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px !important;
	width: auto !important;
	height: auto !important;
	padding: 0.75rem 1.5rem !important;
	border: 2px solid transparent !important;
	border-radius: 50px !important;
	background: var(--wp--preset--color--black) !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wp-element-button:hover {
	background: var(--wp--preset--color--red) !important;
	color: var(--wp--preset--color--white) !important;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wc-block-components-button:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--red) !important;
	outline-offset: 3px;
}

/* Il pulsante "chiudi" di una notifica (icona 16px): resta piccolo, non e' un'azione. */
.wc-block-components-notice-banner .wc-block-components-button {
	min-height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/* -------------------------------------------------------------- Account */

/*
 * woocommerce.css mette un clearfix su .woocommerce (::before/::after con
 * display:table, per il layout a float che qui non usiamo piu'): con
 * .woocommerce diventato un contenitore grid (sotto, da 1024px) quei due
 * pseudo-elementi diventano essi stessi elementi della griglia (contenuto
 * generato prima del <nav> e dopo il <div> di contenuto) e spostano menu e
 * contenuto di una cella, uno per riga invece che affiancati. Si tolgono.
 */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 0.9rem 1.1rem;
	color: var(--wp--preset--color--body);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child a {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
	background: var(--wp--preset--color--paper);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* Due colonne da 1024px: il menu a sinistra, il contenuto a destra. */
@media (min-width: 1024px) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 260px 1fr;
		align-items: start;
		gap: var(--wp--preset--spacing--40);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 0;
	}
}

/* Elenco "Le mie iscrizioni": righe leggibili come schede sotto i 640px. */
.woocommerce-account .st-account__masterclass {
	display: block;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.woocommerce-MyAccount-orders.shop_table_responsive thead {
		display: none;
	}

	.woocommerce-MyAccount-orders.shop_table_responsive tr {
		display: block;
		margin-bottom: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--20);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 8px;
	}

	/*
	 * !important su display: woocommerce.css nasconde del tutto il <th>
	 * del numero d'ordine sotto i 768px (".shop_table_responsive tbody th",
	 * pensato per il suo layout, piu' specifico del nostro selettore qui
	 * sotto): senza, la riga "Ordine: #123" sparirebbe dalla scheda.
	 */
	.woocommerce-MyAccount-orders.shop_table_responsive tr td,
	.woocommerce-MyAccount-orders.shop_table_responsive tr th {
		display: flex !important;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		width: 100% !important;
		padding: 0.4rem 0 !important;
		border: 0 !important;
		text-align: right;
	}

	.woocommerce-MyAccount-orders.shop_table_responsive tr td::before,
	.woocommerce-MyAccount-orders.shop_table_responsive tr th::before {
		content: attr(data-title) ": ";
		flex-shrink: 0;
		font-weight: 600;
		text-align: left;
	}

	.woocommerce-MyAccount-orders.shop_table_responsive tr td.woocommerce-orders-table__cell-st-masterclass {
		display: block;
		text-align: left;
	}

	.woocommerce-MyAccount-orders.shop_table_responsive tr td.woocommerce-orders-table__cell-st-masterclass::before {
		content: attr(data-title) ":";
		display: block;
		margin-bottom: 0.25rem;
	}
}

/* --------------------------------------------------------------- Coupon */

.woocommerce-cart .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout {
	text-align: right;
}

/* ---------------------------------------------------- Diritto di recesso */

/*
 * La pagina /recesso/ (blocco st/recesso). Ridisegnata il 06-10-2026
 * (Mattia: "una form tutta bianca, bruttissima"; un messaggio di cortesia
 * in apertura), con il linguaggio della pagina "grazie":
 * - la fascia nera della testata (page.php) continua col messaggio e i
 *   contatti (.st-recesso__apertura);
 * - il modulo sta in una scheda bianca col filo rosso, i due passaggi in
 *   cima, che sale nella fascia nera;
 * - "Dopo la conferma" su Carta.
 * Telefono: una colonna nell'ordine del DOM (messaggio, scheda, dopo la
 * conferma). Da 1024px: messaggio e "dopo" a sinistra, la scheda a
 * destra accanto al messaggio.
 *
 * Il nero della fascia arriva ai bordi della finestra con un border-image
 * con l'outset laterale: dipinge fuori dal contenitore senza allargare la
 * pagina (niente scroll di lato) e senza z-index negativi. Sta sotto la
 * scheda perche' la scheda viene dopo nel DOM ed e' posizionata.
 */
.st-recesso {
	--st-recesso-raggio: 18px;
	--st-recesso-raggio-campo: 12px;
	--st-recesso-pad: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);
	--st-recesso-sale: var(--wp--preset--spacing--30);
	/* Bordo dei campi a 3:1 sul bianco (WCAG 1.4.11): la Linea da sola e' 1,2:1. */
	--st-recesso-bordo-campo: color-mix(in srgb, var(--wp--preset--color--body) 50%, var(--wp--preset--color--white));
	--st-recesso-ombra: 0 24px 60px color-mix(in srgb, var(--wp--preset--color--black) 10%, transparent);
	--st-recesso-tinta: color-mix(in srgb, var(--wp--preset--color--red) 10%, var(--wp--preset--color--white));
	padding-block-end: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--paper);
}

.st-recesso__griglia {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/* ----- Apertura: il messaggio sulla fascia nera */

.st-recesso__apertura {
	min-width: 0;
	padding-block: 0 calc(var(--wp--preset--spacing--40) + var(--st-recesso-sale));
	border-image: conic-gradient(var(--wp--preset--color--black) 0 0) fill 0 / / 0 100vmax;
	color: var(--wp--preset--color--white);
}

.st-recesso__lead {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-l);
	line-height: 1.15;
	text-wrap: balance;
}

.st-recesso__intro {
	max-width: 36rem;
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
}

.st-recesso__intro strong {
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.st-recesso__contatti {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.st-recesso__contatti a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1.125rem 0.5rem 0.875rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);
	border-radius: 50px;
	color: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.st-recesso__contatti a:hover {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.st-recesso__icona {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.st-recesso__contatti .st-recesso__icona {
	color: var(--wp--preset--color--red);
}

/*
 * Secondo passaggio, sotto i 1024px: il messaggio intero e i contatti li
 * ha appena letti al primo (ci si arriva solo da li'); resta la frase
 * d'apertura, cosi' riepilogo e "Conferma il recesso" non scivolano due
 * schermate piu' in basso.
 */
@media (max-width: 1023px) {
	.st-recesso--conferma :is(.st-recesso__intro, .st-recesso__contatti) {
		display: none;
	}

	.st-recesso--conferma .st-recesso__lead {
		margin-bottom: 0;
	}
}

/* ----- La scheda del modulo */

.st-recesso__scheda {
	position: relative;
	min-width: 0;
	margin-top: calc(-1 * var(--st-recesso-sale));
	padding: var(--st-recesso-pad);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-recesso-raggio);
	background: var(--wp--preset--color--white);
	box-shadow: var(--st-recesso-ombra);
	overflow: hidden;
}

/* L'ultimo elemento (anche l'avviso da solo, senza modulo) non allunga la scheda. */
.st-recesso .st-recesso__scheda > :last-child {
	margin-bottom: 0;
}

/* Il filo rosso in testa, come le card del sito e la scheda della pagina "grazie". */
.st-recesso__scheda::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background: var(--wp--preset--color--red);
}

/* I due passaggi: tondo rosso per quello in corso, spunta per quello fatto. */
.st-recesso__passi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.st-recesso__passo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.st-recesso__passo + .st-recesso__passo::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	margin-inline-end: 0.25rem;
	border-radius: 2px;
	background: var(--wp--preset--color--line);
}

.st-recesso__passo-n {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 50%;
	line-height: 1;
}

.st-recesso__passo[aria-current="step"] {
	color: var(--wp--preset--color--ink);
}

.st-recesso__passo[aria-current="step"] .st-recesso__passo-n {
	border-color: var(--wp--preset--color--red);
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
}

.st-recesso__passo.is-fatto {
	color: var(--wp--preset--color--ink);
}

.st-recesso__passo.is-fatto .st-recesso__passo-n {
	border-color: var(--st-recesso-tinta);
	background: var(--st-recesso-tinta);
	color: var(--wp--preset--color--red);
}

.st-recesso__passo-n .st-recesso__icona {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.4;
}

.st-recesso .st-recesso__titolo {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--titolo-m);
	line-height: 1.2;
}

.st-recesso__aiuto {
	margin: 0 0 var(--wp--preset--spacing--30);
	line-height: 1.55;
}

.st-recesso__aiuto strong {
	font-weight: 600;
}

/* La riga dai Termini, prima del modulo. */
.st-recesso__termini {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 1rem 1.25rem;
	border-radius: var(--st-recesso-raggio-campo);
	background: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.st-recesso__termini .st-recesso__icona {
	margin-top: 0.05rem;
	color: var(--wp--preset--color--red);
}

.st-recesso__termini p {
	margin: 0;
}

.st-recesso__termini strong {
	font-weight: 600;
	white-space: nowrap;
}

.st-recesso__termini a,
.st-recesso__esito a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-underline-offset: 0.15em;
}

.st-recesso__termini a:hover,
.st-recesso__esito a:hover {
	color: var(--wp--preset--color--red);
}

/* ----- I campi */

.st-recesso .st-form {
	gap: 1.25rem;
}

.st-recesso .st-form__field {
	gap: 0.4rem;
}

.st-recesso .st-form__label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.st-recesso .st-form__input,
.st-recesso .st-form__textarea {
	min-height: 3.125rem;
	padding: 0.75rem 1rem;
	border-color: var(--st-recesso-bordo-campo);
	border-radius: var(--st-recesso-raggio-campo);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.st-recesso .st-form__textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.st-recesso .st-form__input:hover,
.st-recesso .st-form__textarea:hover {
	border-color: var(--wp--preset--color--body);
}

/* Fuoco: bordo rosso e anello; l'outline trasparente resta per il contrasto elevato di Windows. */
.st-recesso .st-form__input:focus,
.st-recesso .st-form__textarea:focus {
	border-color: var(--wp--preset--color--red);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--red) 18%, transparent);
}

/* Dati dell'ordine gia' compilati dall'area clienti: si leggono, non si cambiano. */
.st-recesso .st-form__input[readonly] {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	cursor: default;
}

.st-recesso .st-form__input[readonly]:focus {
	border-color: var(--wp--preset--color--muted);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--body) 12%, transparent);
}

.st-recesso__suggerimento {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Il pulsante: rosso e largo quanto la scheda, come "Effettua ordine" del checkout. */
.st-recesso .st-recesso__invia {
	width: 100%;
	min-height: 3.25rem;
	margin-top: 0.25rem;
	font-size: 1rem;
	font-weight: 600;
}

.st-recesso__invia .st-button__testo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.st-recesso__invia .st-recesso__icona {
	stroke-width: 2;
}

.st-recesso__nota {
	margin: -0.25rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* ----- Esito: errore (sopra il modulo) e pagina finale */

/*
 * L'esito di main.css e' pensato su fondo scuro e colora il testo: qui il
 * testo resta scuro e il rosso passa al bordo (rosso su fondo chiaro
 * misura circa 4,2:1, sotto il 4,5:1 del testo normale).
 */
.st-recesso .st-recesso__esito {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--red);
	border-radius: 4px var(--st-recesso-raggio-campo) var(--st-recesso-raggio-campo) 4px;
	background: color-mix(in srgb, var(--wp--preset--color--red) 6%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--body);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.st-recesso__esito p {
	margin: 0;
}

.st-recesso__esito p + p {
	margin-top: 0.5em;
}

/* Pagina finale: la ricevuta, in grande, con la busta. */
.st-recesso .st-recesso__esito.st-form__esito--ok {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	font-weight: 500;
}

.st-recesso__esito-icona {
	display: inline-grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--st-recesso-tinta);
	color: var(--wp--preset--color--red);
}

.st-recesso__esito-icona .st-recesso__icona {
	width: 1.75rem;
	height: 1.75rem;
}

/* ----- Riepilogo della conferma */

.st-recesso__riepilogo {
	margin: 0 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-recesso-raggio-campo);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 50%, var(--wp--preset--color--white));
}

.st-recesso__voce {
	padding: 0.875rem 1.25rem;
}

.st-recesso__voce + .st-recesso__voce {
	border-top: 1px solid var(--wp--preset--color--line);
}

.st-recesso__riepilogo dt {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.st-recesso__riepilogo dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.st-recesso__riepilogo dd p {
	margin: 0;
}

.st-recesso__riepilogo dd p + p {
	margin-top: 0.5em;
}

.st-recesso__riepilogo strong {
	font-weight: 600;
}

/* ----- Dopo la conferma */

.st-recesso__dopo {
	min-width: 0;
	max-width: 32rem;
	padding-top: var(--wp--preset--spacing--40);
}

.st-recesso .st-recesso__dopo-titolo {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--titolo-s);
	line-height: 1.2;
}

.st-recesso__dopo-lista {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-recesso__dopo-lista li {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
}

.st-recesso__dopo-icona {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
}

.st-recesso__dopo-lista p {
	margin: 0;
	line-height: 1.55;
}

.st-recesso__dopo-lista strong {
	font-weight: 600;
}

/*
 * Telefoni stretti (320px): scheda col bordo interno piu' sottile, niente
 * trattino fra i passaggi e niente icona nel pulsante, cosi' passaggi e
 * "Recedi dal contratto qui" restano su una riga.
 */
@media (max-width: 359px) {
	.st-recesso {
		--st-recesso-pad: 1rem;
	}

	.st-recesso__passo + .st-recesso__passo::before,
	.st-recesso__invia .st-recesso__icona {
		display: none;
	}

	.st-recesso .st-recesso__invia {
		padding-inline: 1rem;
	}
}

/* ----- Da 1024px: messaggio e "dopo" a sinistra, la scheda a destra */

@media (min-width: 1024px) {
	.st-recesso__griglia {
		grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
		grid-template-rows: auto 1fr;
		column-gap: var(--wp--preset--spacing--50);
	}

	.st-recesso__apertura {
		grid-column: 1;
		grid-row: 1;
		padding-block-end: var(--wp--preset--spacing--50);
	}

	.st-recesso__scheda {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
	}

	.st-recesso__dopo {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Pagina finale e ordine che non si puo' recedere: niente "dopo", meno Carta sotto. */
.st-recesso:not(:has(.st-recesso__dopo)) {
	padding-block-end: var(--wp--preset--spacing--40);
}

/*
 * "Vedi" e "Recedi dal contratto qui" nella stessa cella (e nella riga
 * "Azioni" del dettaglio dell'ordine): staccati, e sul telefono vanno a
 * capo sotto l'etichetta invece di allargare la scheda. Selettori con
 * .woocommerce davanti: woocommerce.css azzera il margine dei suoi
 * pulsanti con ".woocommerce:where(...) a.button", che vale (0,2,1).
 */
.woocommerce .woocommerce-orders-table__cell-order-actions a.button,
.woocommerce .woocommerce-table--order-details a.order-actions-button {
	margin: 0.25rem 0.5rem 0.25rem 0;
}

@media (max-width: 640px) {
	.woocommerce-MyAccount-orders.shop_table_responsive tr td.woocommerce-orders-table__cell-order-actions {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.woocommerce-MyAccount-orders.shop_table_responsive tr td.woocommerce-orders-table__cell-order-actions::before {
		flex-basis: 100%;
	}
}

/*
 * Checkout: i campi della fattura aziendale compaiono solo con la casella
 * "Fattura aziendale" spuntata (Mattia, 05-10-2026: "poco intuitiva"). Il
 * "hidden" condizionale di WooCommerce non nasconde nella UI a blocchi
 * (ruling del Task 4), quindi lo fa il CSS; obbligo e validazione restano
 * lato server (st-negozio/checkout.php).
 */
.wc-block-components-address-form:has(#order-st-fattura-azienda:not(:checked)) :is(
	.wc-block-components-address-form__st-ragione-sociale,
	.wc-block-components-address-form__st-partita-iva,
	.wc-block-components-address-form__st-sdi,
	.wc-block-components-address-form__st-pec
) {
	display: none;
}


/* ------------------------------------------------------------ Checkout */

/*
 * Checkout a blocchi (Mattia, 05-10-2026: "piu' carino, che funzioni bene
 * anche su mobile, un po' piu' di colori e di enfasi"; prima: "pagamento a
 * destra, a sinistra fatturazione e note, colori molto flebili per
 * separare le zone"). Solo CSS: nessun nodo di React si sposta e il modulo
 * della carta di Stripe (iframe) resta dov'e'.
 *
 * Il blocco di WooCommerce mette pagamento, Termini e pulsante dentro il
 * form, nella colonna dei dati: il form e il suo contenitore diventano
 * "trasparenti" (display: contents) e ogni passo e' una cella della
 * griglia, insieme al riepilogo.
 * - Sotto i 1024px una colonna: 1 Contatti, 2 Fatturazione, 3 Informazioni
 *   aggiuntive e la nota, poi la scheda del pagamento (4, su Carta) con
 *   Termini e "Effettua ordine". Il riepilogo: sul telefono WooCommerce lo
 *   mette chiudibile in cima e lo ripete sopra il pulsante; da tablet
 *   (.is-large) e' intero, subito prima del pagamento.
 * - Da 1024px due colonne: a sinistra i dati; a destra il riepilogo, che
 *   scorre con la pagina (sticky) accanto ai primi tre passi, e sotto la
 *   scheda del pagamento. Due pile in una griglia condividono le righe: il
 *   riepilogo prende le righe dei dati e il pagamento parte dopo, cosi' la
 *   colonna dei dati resta compatta qualunque sia l'altezza del modulo di
 *   Stripe o dei pagamenti rapidi.
 *
 * L'ordine di tabulazione resta quello di WooCommerce (pagamento subito
 * dopo la fatturazione): cambiarlo vorrebbe dire spostare nodi di React.
 *
 * Gli stili dei campi (#email, etichette, testo dei passi) non si toccano:
 * il plugin di Stripe li legge per vestire il suo modulo.
 */

.wp-block-woocommerce-checkout {
	--st-co-raggio: 18px;
	--st-co-raggio-campo: 12px;
	--st-co-pad: clamp(1rem, 0.55rem + 1.8vw, 1.75rem);
	--st-co-stacco: var(--wp--preset--spacing--20);
	--st-co-fondo-dati: color-mix(in srgb, var(--wp--preset--color--paper) 35%, var(--wp--preset--color--white));
	--st-co-bordo-attivo: color-mix(in srgb, var(--wp--preset--color--red) 45%, var(--wp--preset--color--line));
	--st-co-ombra: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--black) 7%, transparent);
}

.woocommerce-checkout .wp-block-woocommerce-checkout {
	padding-block-start: var(--wp--preset--spacing--40);
}

.wc-block-components-sidebar-layout.wc-block-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 0;
	margin: 0;
}

.wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-checkout__main,
.wc-block-components-sidebar-layout.wc-block-checkout .wc-block-checkout__form {
	display: contents;
}

/*
 * Una colonna: le righe dei passi. Colonna sempre esplicita: il fondo della
 * scheda del pagamento (::before) occupa le sue celle, e un passo con la
 * sola riga verrebbe spinto in una colonna nuova per non sovrapporsi.
 */
.wc-block-checkout > .wc-block-checkout__sidebar,
.wc-block-checkout__form > * { grid-column: 1; }
.wc-block-checkout > .wc-block-checkout__sidebar { grid-row: 1; }
.wc-block-checkout__form > .wc-block-checkout__contact-fields { grid-row: 2; }
.wc-block-checkout__form > .wc-block-checkout__billing-fields { grid-row: 3; }
.wc-block-checkout__form > .wc-block-checkout__order-fields { grid-row: 4; }
.wc-block-checkout__form > .wc-block-checkout__order-notes { grid-row: 5; }
.wc-block-checkout.is-large > .wc-block-checkout__sidebar { grid-row: 6; }
.wc-block-checkout__form > div:first-child { grid-row: 7; } /* pagamenti rapidi */
.wc-block-checkout__form > .wc-block-checkout__payment-method { grid-row: 8; }
.wc-block-checkout__form > #ppcp-recaptcha-v2-container { grid-row: 9; }
.wc-block-checkout__form > .wc-block-checkout__terms { grid-row: 10; }
.wc-block-checkout__form > .wc-block-checkout__actions { grid-row: 11; }

/* La scheda del pagamento: un fondo unico dietro alle sue celle. */
.wc-block-components-sidebar-layout.wc-block-checkout::before {
	content: "";
	grid-column: 1;
	grid-row: 7 / 12;
	align-self: stretch;
	border-radius: var(--st-co-raggio);
	background: var(--wp--preset--color--paper);
}

/*
 * Pagamenti rapidi assenti e reCAPTCHA di PayPal spento: niente celle vuote
 * (il contenitore del reCAPTCHA ha un margine scritto nello style).
 */
.wc-block-checkout__form > div:first-child:empty,
.wc-block-checkout__form > #ppcp-recaptcha-v2-container:empty {
	display: none;
}

/* ----- I dati: schede chiare, numerate */

.wc-block-checkout__form > :is(
	.wc-block-checkout__contact-fields,
	.wc-block-checkout__billing-fields,
	.wc-block-checkout__order-fields,
	.wc-block-checkout__order-notes
) {
	min-inline-size: 0;
	margin: 0 0 var(--st-co-stacco);
	padding: var(--st-co-pad);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-co-raggio);
	background: var(--st-co-fondo-dati);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.wc-block-checkout__form > :is(
	.wc-block-checkout__contact-fields,
	.wc-block-checkout__billing-fields,
	.wc-block-checkout__order-fields,
	.wc-block-checkout__order-notes
):focus-within {
	border-color: var(--st-co-bordo-attivo);
	box-shadow: var(--st-co-ombra);
}

.wc-block-checkout__form > .wc-block-checkout__order-notes {
	padding-block: var(--wp--preset--spacing--20);
}

/* Titolo e "Accedi" sulla stessa riga; se non c'e' spazio, "Accedi" va sotto, a destra. */
.wc-block-checkout .wc-block-components-checkout-step__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: 0;
}

.wc-block-checkout .wc-block-components-checkout-step__heading-content {
	margin-inline-start: auto;
}

.wc-block-components-checkout-step__heading .wc-block-checkout__login-prompt {
	display: inline-block;
	float: none;
	margin: 0;
	padding-block: 0.125rem;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.wc-block-checkout .wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

/* Il numero del passo: tondo rosso, solo disegno (testo alternativo vuoto). */
.wc-block-checkout :is(#contact-fields, #billing-fields, #order-fields, #payment-method) .wc-block-components-checkout-step__title::before {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
}

.wc-block-checkout #contact-fields .wc-block-components-checkout-step__title::before { content: "1"; content: "1" / ""; }
.wc-block-checkout #billing-fields .wc-block-components-checkout-step__title::before { content: "2"; content: "2" / ""; }
.wc-block-checkout #order-fields .wc-block-components-checkout-step__title::before { content: "3"; content: "3" / ""; }
.wc-block-checkout #payment-method .wc-block-components-checkout-step__title::before { content: "4"; content: "4" / ""; }

.wc-block-components-checkout-step__heading .wc-block-checkout__login-prompt:hover {
	color: var(--wp--preset--color--red);
}

/* Campi: solo l'anello del fuoco (bordi e colori li legge anche Stripe). */
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--red) 18%, transparent) !important;
}

.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: var(--wp--preset--color--line);
}

.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--red);
}

/* Caselle: rosse quando sono spuntate. */
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-color: color-mix(in srgb, var(--wp--preset--color--body) 55%, transparent);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--red);
	background: var(--wp--preset--color--red);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--white);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

.wc-block-checkout .wc-block-components-checkbox label {
	font-size: 0.9375rem;
}

/* ----- La scheda del pagamento (4) */

.wc-block-checkout__form > :is(
	div:first-child,
	.wc-block-checkout__payment-method,
	#ppcp-recaptcha-v2-container,
	.wc-block-checkout__terms,
	.wc-block-checkout__actions
) {
	min-inline-size: 0;
	margin: 0;
	padding-inline: var(--st-co-pad);
	background: none;
}

.wc-block-checkout__form > div:first-child,
.wc-block-checkout__form > .wc-block-checkout__payment-method {
	padding-block-start: var(--st-co-pad);
}

.wc-block-checkout__payment-method .wc-block-components-checkout-step__content > *:last-child {
	margin-bottom: 0;
}

/* Le opzioni di pagamento su fondo bianco, quella scelta col bordo rosso. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	margin-bottom: 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-co-raggio-campo);
	background: var(--wp--preset--color--white);
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after {
	content: none !important;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked) {
	border-color: var(--wp--preset--color--red);
	box-shadow: 0 0 0 1px var(--wp--preset--color--red);
}

.wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--red);
}

.wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--red);
}

.wc-block-checkout__payment-method .wc-block-checkout__no-payment-methods-notice {
	margin: 0;
	background: var(--wp--preset--color--white) !important;
}

/* Termini: un riquadro grande e tutto cliccabile, rosso quando e' spuntato. */
.wc-block-checkout__form > .wc-block-checkout__terms {
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: 0;
	font-size: 0.9375rem;
}

.wc-block-checkout__terms .wc-block-components-checkbox {
	margin: 0;
}

.wc-block-checkout__terms .wc-block-components-checkbox label {
	display: flex;
	gap: 0.875rem;
	padding: 1rem 1.125rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-co-raggio-campo);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.wc-block-checkout__terms .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	width: 22px;
	min-width: 22px;
	height: 22px;
}

.wc-block-checkout__terms .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	margin: 4px 0 0 4px;
}

.wc-block-checkout__terms .wc-block-components-checkbox label:hover {
	border-color: var(--st-co-bordo-attivo);
}

.wc-block-checkout__terms .wc-block-components-checkbox label:has(:checked) {
	border-color: var(--wp--preset--color--red);
	box-shadow: 0 0 0 1px var(--wp--preset--color--red);
}

.wc-block-checkout__terms .wc-block-components-checkbox.has-error label {
	border-color: var(--wp--preset--color--red);
	background: color-mix(in srgb, var(--wp--preset--color--red) 6%, var(--wp--preset--color--white));
}

.wc-block-checkout__terms a {
	color: inherit;
	font-weight: 600;
	text-underline-offset: 0.15em;
}

.wc-block-checkout__terms a:hover {
	color: var(--wp--preset--color--red);
}

/* "Effettua ordine": rosso, largo quanto la scheda, ben visibile. */
.wc-block-checkout__form > .wc-block-checkout__actions {
	padding-block: var(--wp--preset--spacing--20) var(--st-co-pad);
}

.wc-block-checkout__actions .wc-block-checkout__actions_row {
	display: block;
}

.wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	width: 100% !important;
	min-height: 3.5rem !important;
	background: var(--wp--preset--color--red) !important;
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--red) 28%, transparent) !important;
}

.wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--black) !important;
	box-shadow: none !important;
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:disabled,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button--loading {
	opacity: 0.75;
	cursor: progress;
}

/* ----- Il riepilogo */

.wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-checkout__sidebar {
	position: static;
	min-inline-size: 0;
	margin: 0 0 var(--st-co-stacco);
	padding: 0;
	width: auto;
}

.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper {
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-co-raggio);
	background: var(--wp--preset--color--white);
	box-shadow: var(--st-co-ombra);
}

/* Sul telefono il riepilogo completo sta sopra il pulsante. */
.wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Il titolo su una fascia nera, come le testate del sito. */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title,
.wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper > .wc-block-components-checkout-step__heading {
	margin: 0;
	padding: 0.875rem var(--wp--preset--spacing--20);
	border: 0;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text,
.wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-price {
	font-weight: 600;
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon {
	fill: currentcolor;
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title:focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: -3px;
}

.wc-block-checkout .wc-block-components-order-summary-item {
	align-items: flex-start;
}

.wc-block-checkout .wc-block-components-product-name {
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}

.wc-block-checkout .wc-block-components-order-summary-item__individual-prices {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* I posti: tondo rosso; senza la foto segnaposto del prodotto. */
.wc-block-checkout .wc-block-components-order-summary-item__quantity {
	border: 2px solid var(--wp--preset--color--white);
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

.wc-block-checkout .wc-block-components-order-summary-item__image:has(> img[src*="woocommerce-placeholder"]) {
	width: auto;
	padding-bottom: 0;
}

.wc-block-checkout .wc-block-components-order-summary-item__image > img[src*="woocommerce-placeholder"] {
	display: none;
}

.wc-block-checkout .wc-block-components-order-summary-item__image:has(> img[src*="woocommerce-placeholder"]) .wc-block-components-order-summary-item__quantity {
	position: static;
	min-width: 1.75rem;
	height: 1.75rem;
	border: 0;
	font-size: 0.875rem;
	font-weight: 600;
	transform: none;
}

/* Il totale in evidenza. */
.wc-block-checkout .wc-block-components-totals-footer-item {
	align-items: baseline;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--red);
}

.wc-block-checkout .wc-block-components-totals-footer-item-tax {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.wc-block-checkout .wc-block-components-totals-wrapper:has(> .wc-block-components-totals-footer-item) {
	background: color-mix(in srgb, var(--wp--preset--color--red) 5%, var(--wp--preset--color--white));
}

/* ----- Da 1024px: due colonne */

@media (min-width: 1024px) {
	.wc-block-components-sidebar-layout.wc-block-checkout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		column-gap: clamp(1.5rem, 3vw, 2.5rem);
	}

	/* Sinistra: i dati, uno sotto l'altro. */
	.wc-block-checkout__form > .wc-block-checkout__contact-fields { grid-column: 1; grid-row: 1; }
	.wc-block-checkout__form > .wc-block-checkout__billing-fields { grid-column: 1; grid-row: 2 / span 2; }
	.wc-block-checkout__form > .wc-block-checkout__order-fields { grid-column: 1; grid-row: 4 / span 2; }
	.wc-block-checkout__form > .wc-block-checkout__order-notes { grid-column: 1; grid-row: 6 / span 3; }

	/* Destra: il riepilogo e subito sotto la scheda del pagamento (Mattia,
	 * 05-10-2026: niente vuoto sotto il riepilogo). */
	.wc-block-checkout > .wc-block-checkout__sidebar,
	.wc-block-checkout.is-large > .wc-block-checkout__sidebar {
		grid-column: 2;
		grid-row: 1;
	}

	.wc-block-checkout__form > div:first-child { grid-column: 2; grid-row: 2; }
	.wc-block-checkout__form > .wc-block-checkout__payment-method { grid-column: 2; grid-row: 3 / span 2; }
	.wc-block-checkout__form > #ppcp-recaptcha-v2-container { grid-column: 2; grid-row: 5; }
	.wc-block-checkout__form > .wc-block-checkout__terms { grid-column: 2; grid-row: 6; }
	.wc-block-checkout__form > .wc-block-checkout__actions { grid-column: 2; grid-row: 7; }

	.wc-block-components-sidebar-layout.wc-block-checkout::before {
		grid-column: 2;
		grid-row: 2 / 8;
	}

	/*
	 * Il riepilogo segue chi scorre la pagina finche' non arriva al
	 * pagamento. Sticky e' il riepilogo dentro la colonna (che occupa le
	 * righe dei dati), non la colonna: un elemento della griglia sticky
	 * scorrerebbe fino in fondo alla griglia, sopra la scheda del pagamento.
	 */
	.wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-checkout__sidebar {
		align-self: stretch;
	}

	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		position: static;
		top: calc(var(--st-header-h) + var(--wp--preset--spacing--20));
	}
}

/* ----- Telefono */

@media (max-width: 699px) {
	.wc-block-checkout .wc-block-components-checkout-step__title {
		font-size: 1.1875rem;
	}

	.wc-block-checkout :is(#contact-fields, #billing-fields, #order-fields, #payment-method) .wc-block-components-checkout-step__title::before {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.875rem;
	}
}

/* ---------------------------------------------------- Ordine ricevuto */

/*
 * La pagina "grazie" (woocommerce/checkout/thankyou.php del tema, Mattia,
 * 05-10-2026: "metterla in maggior rilievo"). La testata nera dell'ordine
 * prende il posto di quella della pagina ("Checkout"): quella si nasconde
 * solo quando c'e' la nostra, gli altri casi (ordine fallito, accesso
 * richiesto) la tengono. Senza :has() si vedrebbero entrambe, niente si
 * rompe.
 */
.woocommerce-order-received .st-pagehead:has(~ .woocommerce .st-ordine) {
	display: none;
}

.woocommerce-order-received .woocommerce-order:has(> .st-ordine) {
	max-width: none;
	padding: 0;
}

.st-ordine {
	--st-ordine-ombra: 0 24px 60px color-mix(in srgb, var(--wp--preset--color--black) 10%, transparent);
	padding-block-end: var(--wp--preset--spacing--60);
}

/* ----- Testata */

.st-ordine__testata {
	padding-block: var(--wp--preset--spacing--50) calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--40));
	background:
		radial-gradient(ellipse 60% 90% at 88% 0%, color-mix(in srgb, var(--wp--preset--color--red) 38%, transparent), transparent 70%),
		var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.st-ordine__testata-inner > * {
	max-width: 46rem;
}

.st-ordine__segno {
	display: inline-grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: var(--wp--preset--spacing--30);
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--wp--preset--color--red) 25%, transparent);
	color: var(--wp--preset--color--white);
}

.st-ordine__segno svg {
	width: 2.25rem;
	height: 2.25rem;
}

@media (prefers-reduced-motion: no-preference) {
	.st-ordine__segno {
		animation: st-ordine-segno 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}

	.st-ordine__segno path {
		stroke-dasharray: 24;
		stroke-dashoffset: 24;
		animation: st-ordine-spunta 0.45s 0.35s ease-out forwards;
	}
}

@keyframes st-ordine-segno {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
}

@keyframes st-ordine-spunta {
	to {
		stroke-dashoffset: 0;
	}
}

.woocommerce-order-received .st-ordine__titolo {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-xl);
	font-weight: 400;
	line-height: 1.05;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.st-ordine__conferma,
.st-ordine__conferma p {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	line-height: 1.45;
}

.st-ordine__conferma strong,
.st-ordine__email strong {
	font-weight: 600;
}

.st-ordine__email {
	margin: 0.5rem 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 82%, transparent);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.st-ordine__email strong {
	color: var(--wp--preset--color--white);
}

/* ----- Corpo: la scheda della masterclass sale sulla testata */

.st-ordine__corpo {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
}

/* La scheda sale sulla testata (solo lei: un avviso degli hook no). */
.st-ordine__corpo > .st-ordine__mc:first-child {
	margin-top: calc(-1 * (var(--wp--preset--spacing--40) + var(--wp--preset--spacing--50)));
}

.st-ordine__corpo > * {
	min-width: 0;
}

.st-ordine__mc {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--st-ordine-ombra);
}

/* Il filo rosso in testa, come le card del sito. */
.st-ordine__mc::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: 4px;
	background: var(--wp--preset--color--red);
}

.st-ordine__mc-foto {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--paper);
}

/* .st-ordine davanti: woocommerce-layout.css mette "height: auto" alle img (0,1,1). */
.st-ordine .st-ordine__mc-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.st-ordine__mc-corpo {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
}

.st-ordine__mc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--red);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.st-ordine__mc-badge::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: currentcolor;
}

.woocommerce-order-received .st-ordine__mc-titolo {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-l);
	font-weight: 400;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
	text-wrap: balance;
}

.st-ordine__mc-titolo a {
	color: inherit;
	text-decoration: none;
}

.st-ordine__mc-titolo a:hover {
	color: var(--wp--preset--color--red);
}

.st-ordine__mc-titolo a:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 3px;
}

.st-ordine__mc-dati {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 500;
}

.st-ordine__mc-dati li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.st-ordine__icona {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	color: var(--wp--preset--color--red);
}

.st-ordine__mc-totale {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 60%, var(--wp--preset--color--white));
}

.st-ordine__etichetta {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.st-ordine__mc-cifra {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	line-height: 1;
	color: var(--wp--preset--color--red);
}

.st-ordine__mc-iva {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 768px) {
	.st-ordine__mc {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.st-ordine__mc--foto {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto;
	}

	.st-ordine__mc-foto {
		aspect-ratio: auto;
		min-height: 13rem;
	}

	.st-ordine__mc-corpo {
		align-self: center;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.st-ordine__mc-totale {
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin: 0;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--line);
		text-align: right;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.st-ordine__mc--foto {
		grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	}

	.st-ordine__mc--foto .st-ordine__mc-foto {
		grid-row: 1 / span 2;
	}

	.st-ordine__mc--foto .st-ordine__mc-totale {
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		padding-block: var(--wp--preset--spacing--20);
		border-top: 1px solid var(--wp--preset--color--line);
		border-left: 0;
		text-align: left;
	}
}

/* ----- Numero, data, totale, pagamento */

.st-ordine__riepilogo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--paper);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.st-ordine__riepilogo {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

.st-ordine__voce {
	display: grid;
	gap: 0.35rem;
	align-content: start;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--line);
	margin-left: -1px;
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: -1px;
}

.st-ordine__voce dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.st-ordine__voce dd small {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* ----- Cosa succede ora */

.woocommerce-order-received .st-ordine__poi-titolo {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titolo-l);
	font-weight: 400;
	line-height: 1.15;
}

.st-ordine__passi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-ordine__passo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
}

.st-ordine__passo p {
	margin: 0;
	line-height: 1.55;
}

.st-ordine__passo strong {
	font-weight: 600;
}

.st-ordine__passo a:not(.st-button) {
	color: inherit;
	font-weight: 600;
	text-underline-offset: 0.15em;
}

.st-ordine__passo a:not(.st-button):hover {
	color: var(--wp--preset--color--red);
}

.st-ordine__passo-icona {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--red) 10%, var(--wp--preset--color--white));
}

.st-ordine__passo-azione {
	margin-top: auto;
}

/* Sul telefono l'icona accanto al testo: schede piu' basse. */
@media (max-width: 640px) {
	.st-ordine__passo {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		padding: var(--wp--preset--spacing--20);
	}

	.st-ordine__passo:has(.st-ordine__passo-azione) .st-ordine__passo-icona {
		grid-row: span 2;
		align-self: start;
	}

	.st-ordine__passo-azione {
		justify-self: start;
		margin-top: 0;
	}
}

.st-ordine__contatti {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--base);
}

.st-ordine__contatti strong {
	font-weight: 600;
}

.st-ordine__contatti a {
	color: inherit;
	font-weight: 500;
	text-underline-offset: 0.15em;
}

.st-ordine__contatti a:hover {
	color: var(--wp--preset--color--red);
}

/* ----- Tabelle di WooCommerce: sobrie */

.st-ordine__dettagli {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}

@media (min-width: 900px) {
	.st-ordine__dettagli {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
}

.st-ordine__dettagli > * {
	min-width: 0;
}

.woocommerce .st-ordine__dettagli .woocommerce-order-details,
.woocommerce .st-ordine__dettagli .woocommerce-customer-details {
	margin: 0;
}

.woocommerce-order-received .st-ordine__dettagli h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--titolo-s);
}

.woocommerce .st-ordine__dettagli table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce .st-ordine__dettagli table.shop_table th,
.woocommerce .st-ordine__dettagli table.shop_table td {
	padding: 0.75rem 0;
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
}

.woocommerce .st-ordine__dettagli table.shop_table thead th {
	padding-top: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce .st-ordine__dettagli table.shop_table :is(td, th):last-child {
	text-align: right;
}

.woocommerce .st-ordine__dettagli table.shop_table tfoot th {
	font-weight: 500;
}

.woocommerce .st-ordine__dettagli table.shop_table tfoot tr:last-child :is(th, td) {
	border-bottom: 0;
}

.woocommerce .st-ordine__dettagli .woocommerce-customer-details address {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: var(--wp--preset--color--paper);
	font-style: normal;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* ----- Ordine fallito e link senza ordine: i messaggi di WooCommerce */

.woocommerce-order-received .woocommerce-thankyou-order-failed {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-left: 4px solid var(--wp--preset--color--red);
	border-radius: 4px;
	background: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

.woocommerce-order-received .woocommerce-thankyou-order-failed-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce-order-received .woocommerce-order > .woocommerce-thankyou-order-received {
	font-size: var(--wp--preset--font-size--lead);
}

/*
 * Con assets/js/checkout-colonne.js attivo (html.st-co-js) le righe della
 * griglia diventano di 4px e ogni passo ne occupa quante ne servono: le due
 * colonne si impilano ciascuna per conto suo, senza vuoti. Le posizioni le
 * scrive lo script; senza script vale la griglia qui sopra.
 */
@media (min-width: 1024px) {
	html.st-co-js .wc-block-components-sidebar-layout.wc-block-checkout {
		grid-auto-rows: 4px;
		grid-template-rows: none;
		row-gap: 0;
	}
}