/*
 * Involucro del template checkout HV.
 * È separato dal foglio dell'interfaccia per sovrascrivere in sicurezza
 * eventuali stili del tema o della pagina Checkout Block.
 */
body.hvcm-card-checkout .hvcm-checkout-page {
	min-height: 100vh;
	overflow: visible;
	padding: clamp(120px, 10vw, 155px) 0 100px;
	background:
		radial-gradient(circle at 4% 16%, rgba(217, 255, 55, 0.22), transparent 23%),
		radial-gradient(circle at 96% 44%, rgba(241, 90, 42, 0.08), transparent 24%),
		linear-gradient(180deg, #f7f6ef, #f2f4e9);
}

body.admin-bar.hvcm-card-checkout .hvcm-checkout-page {
	padding-top: clamp(105px, 9vw, 135px);
}

body.hvcm-card-checkout .hvcm-checkout-shell {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 64px);
}

body.hvcm-card-checkout .hvcm-checkout-shell > .woocommerce {
	overflow: visible;
}

/*
 * Coordinate esplicite della griglia checkout.
 * WooCommerce, il tema o un page builder possono assegnare regole residue ai
 * due blocchi. Senza riga e colonna esplicite il browser puo auto-posizionarli
 * in diagonale, lasciando due grandi aree vuote.
 */
@media (min-width: 1051px) {
	body.hvcm-card-checkout form.checkout.woocommerce-checkout > #customer_details {
		grid-column: 1 !important;
		grid-row: 1 !important;
		align-self: start !important;
		min-width: 0;
	}

	body.hvcm-card-checkout form.checkout.woocommerce-checkout > #order_review {
		grid-column: 2 !important;
		grid-row: 1 !important;
		align-self: start !important;
		min-width: 0;
	}
}

@media (max-width: 1050px) {
	body.hvcm-card-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.hvcm-card-checkout form.checkout.woocommerce-checkout > #customer_details,
	body.hvcm-card-checkout form.checkout.woocommerce-checkout > #order_review {
		grid-column: 1 !important;
		grid-row: auto !important;
		width: 100% !important;
		min-width: 0;
	}

	body.hvcm-card-checkout form.checkout.woocommerce-checkout > #customer_details {
		order: 1;
	}

	body.hvcm-card-checkout form.checkout.woocommerce-checkout > #order_review {
		order: 2;
	}
}

@media (max-width: 700px) {
	body.hvcm-card-checkout .hvcm-checkout-page {
		padding-top: 105px;
		padding-bottom: 70px;
	}

	body.hvcm-card-checkout .hvcm-checkout-shell {
		padding-inline: 14px;
	}
}