/* =========================================================================
   Negozio.
   Tre prodotti in tutto — i due Placement Test e le lezioni one-to-one — e
   ordini veri. Qui si tocca solo l'aspetto.
   ========================================================================= */

/* WooCommerce mette un ::before e un ::after sulla lista per liberare i float.
   In una griglia uno pseudo-elemento diventa una CELLA: occupava la prima
   colonna e spingeva tutti i prodotti avanti di uno, lasciando un vuoto in
   alto a sinistra. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after { display: none; }

.woocommerce .products ul,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--s8);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce impone `width: 30.75%` e `float: left` con
   `.woocommerce ul.products.columns-3 li.product` — specificita' (0,4,2),
   piu' alta della mia. Dentro una griglia quella percentuale si calcola sulla
   cella, non sulla riga: 30% di 365px fanno 112px, e il titolo andava a capo
   a ogni parola. Il selettore con l'attributo pareggia la specificita' e,
   arrivando dopo, vince — senza ricorrere a !important. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product {
	margin: 0;
	width: auto;
	float: none;
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	padding: var(--s5);
	background: var(--carta);
	border: 1px solid var(--filo);
	border-top: 5px solid var(--rosso);
	border-radius: var(--raggio-g);
	box-shadow: var(--ombra-1);
}

.woocommerce ul.products li.product img { border-radius: var(--raggio); margin-bottom: 0; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--t-h4);
	font-weight: var(--peso-nero);
	color: var(--navy);
	letter-spacing: -0.02em;
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: var(--t-h3);
	font-weight: var(--peso-nero);
	color: var(--navy);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	margin: 0;
}

.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.78rem 1.4rem;
	border-radius: var(--raggio-pil);
	background: var(--rosso);
	color: #fff;
	font: var(--peso-forte) var(--t-picc)/1.2 var(--carattere);
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: var(--rosso-scuro);
	color: #fff;
}

.woocommerce div.product .product_title {
	font-size: var(--t-h2);
	color: var(--navy);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-top-color: var(--rosso);
	background: var(--carta-calda);
	border-radius: var(--raggio);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--rosso); }

.woocommerce table.shop_table {
	border-radius: var(--raggio-g);
	border-color: var(--filo);
}

.woocommerce table.shop_table th { background: var(--carta-calda); color: var(--navy); }

.woocommerce-cart table.cart td.actions .coupon .input-text { width: auto; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--filo-scuro);
	border-radius: var(--raggio);
}

/* La griglia dei prodotti dentro il contenuto di una pagina, dallo shortcode
   [products] di WooCommerce. */
.corpo-pagina ul.products { margin-top: var(--s6); }

/* --- intorno alla griglia ------------------------------------------------- */

.woocommerce-breadcrumb {
	margin: 0 0 var(--s6);
	font-size: var(--t-picc);
	color: var(--grigio);
}

.woocommerce-breadcrumb a { color: var(--grigio); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--rosso-scuro); text-decoration: underline; }

/* Con `woocommerce_show_page_title` a false questa intestazione resta vuota:
   il margine lasciava un vuoto sopra la griglia. */
.woocommerce-products-header:not(:empty) { margin-bottom: var(--s6); }

/* Le immagini dei prodotti sono locandine quadrate: senza un fondo neutro
   galleggiano nel bianco della scheda. */
.woocommerce ul.products li.product img {
	background: var(--carta-calda);
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.woocommerce ul.products li.product .price del { opacity: .5; font-weight: var(--peso-medio); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* La scheda intera e' cliccabile: il titolo e' un collegamento, ma il bersaglio
   comodo e' il rettangolo. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { text-decoration: none; color: inherit; }

/* --- scheda prodotto ------------------------------------------------------- */

.woocommerce div.product { display: grid; gap: var(--s10); }

@media (min-width: 56rem) {
	.woocommerce div.product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }

	/* WooCommerce mette `float:left; width:48%` su `div.images` e `div.summary`
	   con specificita' (0,3,2). Il mio selettore precedente si fermava a
	   (0,3,1) e perdeva: dentro la griglia galleria e riepilogo occupavano
	   meta' della propria cella. E' la pagina dove si compra. */
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary,
	.woocommerce div.product .woocommerce-product-gallery {
		width: auto;
		float: none;
		margin: 0;
	}
	.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
	.woocommerce div.product .related { grid-column: 1 / -1; }
}

.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--raggio-g); background: var(--carta-calda); }

.woocommerce div.product form.cart { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.woocommerce div.product form.cart .quantity input { width: 5rem; }

/* Le linguette della scheda prodotto.

   WooCommerce le disegna come schede sovrapposte: `margin: 0 -5px` sui <li>
   perche' i bordi si tocchino, e nessuno spazio orizzontale sul link, che lo
   prende dal padding del <li>. Dando la pastiglia al <li> con `padding: 0` le
   due etichette finivano una sopra l'altra: «Descrizione» copriva la «I» di
   «Informazioni aggiuntive». Lo spazio va rimesso sul link, e il margine
   negativo annullato. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	padding: 0;
	margin: 0 0 var(--s6);
	border: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: var(--carta-calda);
	border: 1px solid var(--filo);
	border-radius: var(--raggio-pil);
	box-shadow: none;
}

.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: 0.6rem 1.2rem;
	font-weight: var(--peso-forte);
	font-size: var(--t-picc);
	color: var(--navy);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover { background: var(--filo); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--navy);
	border-color: var(--navy);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }

/* «Password dimenticata?» era alto 20px: su telefono e' un bersaglio scomodo. */
.woocommerce-LostPassword a,
.woocommerce-MyAccount-navigation a { display: inline-block; padding-block: 0.5rem; }

/* Lo zoom della galleria prodotto crea un'immagine ingrandita in posizione
   assoluta sopra quella normale: senza un contenitore che la ritagli sfora
   dallo schermo e manda la pagina in scorrimento laterale. E' comunque una
   funzione da mouse: su schermi stretti non serve. */
.woocommerce div.product .woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
	border-radius: var(--raggio-g);
}

.woocommerce div.product .woocommerce-product-gallery img.zoomImg { max-width: none; }

@media (pointer: coarse), (max-width: 62rem) {
	.woocommerce div.product .woocommerce-product-gallery img.zoomImg { display: none !important; }

	/* I comandi della galleria e il collegamento «Ingrandisci» vogliono un
	   bersaglio comodo come tutto il resto. */
	.woocommerce div.product .woocommerce-product-gallery__trigger,
	.woocommerce div.product .flex-control-thumbs a { min-height: 2.5rem; min-width: 2.5rem; }
}

/* La × che toglie un prodotto dal carrello: WooCommerce la disegna come un
   carattere di testo, alta 26px. E' il comando piu' facile da sbagliare col
   dito, e sbagliarlo significa svuotare una riga dell'ordine. */
.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--grigio) !important;
	background: var(--carta-calda);
	border-radius: var(--raggio-pil);
}

.woocommerce a.remove:hover {
	background: var(--rosso-scuro);
	color: #fff !important;
}