/*
 * Aspetto di WooCommerce dentro questo tema.
 *
 * Caricato solo se WooCommerce è attivo (vedi functions.php).
 * WooCommerce porta i propri template e i propri blocchi: qui non si
 * ricostruisce niente, si allinea solo l'aspetto ai token del tema.
 *
 * Regole: specificità bassa, nessun !important.
 */

/* --- Bottoni -------------------------------------------------------------
 * I bottoni di WooCommerce devono somigliare a quelli del tema, senza
 * riscrivere i colori a mano: si leggono dai preset.
 * ------------------------------------------------------------------------- */

.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	min-height: var(--twc-tap, 44px);
	border-radius: var(--wp--custom--raggio--medio);
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--body);
	text-decoration: none;
}

.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--on-accent);
}

/* --- Prezzi --------------------------------------------------------------
 * Cifre allineate in colonna, come nelle voci di menu del tema.
 * ------------------------------------------------------------------------- */

.wc-block-components-product-price,
.woocommerce .price {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-product-price del,
.woocommerce .price del {
	color: var(--wp--preset--color--contrast-2);
}

/* --- Titoli dei prodotti -------------------------------------------------- */

.wc-block-components-product-name,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
}

/* --- Schede prodotto ------------------------------------------------------ */

.wc-block-grid__product,
.wp-block-woocommerce-product-template li {
	border-radius: var(--wp--custom--raggio--grande);
}

/* --- Listino ordinabile --------------------------------------------------
 * Stesso aspetto delle righe del tema, applicato ai prodotti di WooCommerce.
 * Vale solo dentro un gruppo con classe twt-listino: fuori di lì le griglie
 * di WooCommerce restano come sono.
 *
 * Funziona con qualunque blocco elenco prodotti, purché l'immagine sia il
 * primo elemento della scheda: l'immagine tiene la colonna di sinistra per
 * tutta l'altezza, tutto il resto va nella colonna di destra.
 * ------------------------------------------------------------------------- */

.twt-listino li.wc-block-product,
.twt-listino li.wc-block-grid__product,
.twt-listino .wp-block-post-template > li,
.twt-listino .wc-block-product-template > li {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 0.4rem;
	align-items: center;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--raggio--grande);
	padding: var(--wp--preset--spacing--30);
	text-align: left;
}

.twt-listino li > :first-child {
	grid-column: 1;
	grid-row: 1 / -1;
	margin: 0;
}

.twt-listino li > :not(:first-child) {
	grid-column: 2;
	margin: 0;
}

.twt-listino li > :first-child img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--raggio--medio);
}

@media (max-width: 600px) {
	.twt-listino li.wc-block-product,
	.twt-listino li.wc-block-grid__product,
	.twt-listino .wp-block-post-template > li,
	.twt-listino .wc-block-product-template > li {
		grid-template-columns: 1fr;
	}

	.twt-listino li > :first-child,
	.twt-listino li > :not(:first-child) {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --- Carrello in testata -------------------------------------------------- */

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
	min-width: var(--twc-tap, 44px);
	min-height: var(--twc-tap, 44px);
	border-radius: var(--wp--custom--raggio--medio);
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:hover,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:focus-visible {
	background: var(--wp--preset--color--base-2);
}

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--on-accent);
	border-color: var(--wp--preset--color--accent-1);
}

/* --- Avvisi --------------------------------------------------------------
 * Gli avvisi di WooCommerce compaiono spesso durante l'ordine: devono
 * sembrare parte del sito, non un pezzo di un altro tema.
 * ------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--raggio--medio);
	font-family: var(--wp--preset--font-family--body);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--custom--stato--ok);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--custom--stato--pericolo);
}

/* --- Campi dell'ordine ---------------------------------------------------- */

.wc-block-components-text-input input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: var(--twc-tap, 44px);
	border-radius: var(--wp--custom--raggio--medio);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* --- Larghezze -----------------------------------------------------------
 * Nessuna fuoriuscita orizzontale su schermi stretti.
 * ------------------------------------------------------------------------- */

.woocommerce table.shop_table,
.wc-block-cart-items {
	max-width: 100%;
	overflow-wrap: break-word;
}