/* ==========================================================================
   AILOV — integrazione visiva delle pagine WooCommerce
   ==========================================================================

   Obiettivo: far sembrare Shop, scheda prodotto, carrello, checkout e account
   parte naturale del sito, invece di pagine WooCommerce grezze.

   Regola che ha guidato tutto il file: NESSUN VALORE INVENTATO. Colori, font,
   raggi, spaziature e formule di tipografia fluida sono gli stessi gia' usati
   dal sito, misurati sulle pagine reali nelle fasi precedenti:

     arancio primario   #f07d00   (nextawards_link_color)
     arancio hover      #e25a00   (nextawards_link_color_hover)
     giallo secondario  #e8bb4c / #e8a600, testo #000
     testo scuro        #4a4a4a
     banda beige        #f4e7e0   (sezione FAQ, footer, sezione Shop in Home)
     grigio chiaro      #f5f5f5
     titoli             Playfair Display 700
     testo              Roboto
     bottoni            padding 14px 35px, raggio 10px
     card               raggio 15px (come .cta-box e le card della Home)
     contenitore        1300px

   Tutte le regole sono ancorate a un contesto WooCommerce
   (.woocommerce-shop, .single-product, .woocommerce-cart, .woocommerce-checkout,
   .woocommerce-account, .post-type-archive-product, .tax-product_cat):
   nessuna puo' raggiungere la Home o le altre pagine del sito.

   Il file viene caricato SOLO sulle pagine WooCommerce: vedi
   ailov_child_enqueue_woocommerce_styles() in functions.php.
   ========================================================================== */

:root {
	--ailov-accent: #f07d00;
	--ailov-accent-hover: #e25a00;
	--ailov-ink: #4a4a4a;
	--ailov-ink-strong: #222222;
	--ailov-beige: #f4e7e0;
	--ailov-grey: #f5f5f5;
	--ailov-radius: 10px;
	--ailov-radius-card: 15px;
	--ailov-serif: "Playfair Display", Georgia, serif;
	--ailov-sans: Roboto, "Helvetica Neue", Arial, sans-serif;
	--ailov-container: 1300px;
	/* stesse clamp che il tema genera per i titoli di sezione e per i bottoni */
	--ailov-h1: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.6293), 2.5rem);
	--ailov-h2: clamp(1.3rem, 1.3rem + ((1vw - 0.2rem) * 1.28), 2rem);
	--ailov-btn: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.612), 1.25rem);
	--ailov-body: clamp(0.95rem, 0.95rem + ((1vw - 0.2rem) * 0.47), 1.125rem);
}

/* ==========================================================================
   1. HEADER — leggibilita' del menu
   ==========================================================================
   Carrello, checkout e account usano il template "menu-trasparent", pensato
   per una hero fotografica scura: il tema rende l'header trasparente e il menu
   BIANCO. Su queste pagine, che hanno fondo bianco, il menu risultava
   invisibile (contrasto misurato: 1.00).

   Qui l'header torna solido e il menu scuro, come gia' accade su Shop e scheda
   prodotto. Cosi' tutte le pagine WooCommerce hanno lo stesso header.
   Gli !important servono perche' le regole del tema padre e del child usano a
   loro volta !important sullo stato "scrolled".                              */

/*
 * Aggiornata in Fase 09-Q. Prima questa regola pretendeva il fondo bianco
 * anche a pagina scorsa, ma non ci riusciva: la regola del tema figlio
 * `body.page-template-menu-trasparent.scroll-down .header` ha specificita'
 * 0,3,1 contro 0,3,0 e vinceva per un solo punto. Il risultato era che
 * carrello, checkout e account diventavano arancioni scorrendo mentre Shop e
 * scheda prodotto restavano bianchi: pagine del negozio incoerenti fra loro.
 *
 * Con la scelta della Fase 09-Q tutte le pagine diventano arancioni allo
 * scorrimento, quindi le varianti .scroll-down sono state tolte: qui resta il
 * solo fondo bianco a pagina ferma.
 */
.woocommerce-cart .header,
.woocommerce-checkout .header,
.woocommerce-account .header {
	background-color: #ffffff !important;
}

.woocommerce-cart .header__content,
.woocommerce-checkout .header__content,
.woocommerce-account .header__content {
	border-bottom: 1px solid rgba(34, 34, 34, 0.12);
}

.woocommerce-cart .menu > li > a,
.woocommerce-checkout .menu > li > a,
.woocommerce-account .menu > li > a,
.woocommerce-cart .header__quick ul li a,
.woocommerce-checkout .header__quick ul li a,
.woocommerce-account .header__quick ul li a,
.woocommerce-cart .header__logo,
.woocommerce-checkout .header__logo,
.woocommerce-account .header__logo {
	color: var(--ailov-ink-strong) !important;
}

/* Il tema inverte logo e icone per renderli bianchi sull'header trasparente:
   qui vanno riportati ai colori originali. */
.woocommerce-cart .header__logo-img,
.woocommerce-checkout .header__logo-img,
.woocommerce-account .header__logo-img,
.woocommerce-cart .header [class^="icon-"],
.woocommerce-checkout .header [class^="icon-"],
.woocommerce-account .header [class^="icon-"] {
	filter: none !important;
}

/*
 * Rimossa in Fase 09-R.
 *
 * Qui il logo scuro veniva nascosto con display:none, e aveva senso finche' la
 * Fase 02-BIS voleva queste pagine sempre con l'intestazione bianca: il logo
 * scuro non sarebbe mai servito.
 *
 * Con la scelta della Fase 09-Q l'intestazione diventa arancione anche qui a
 * pagina scorsa, e quella regola lasciava le tre pagine **senza alcun logo**:
 * quello a colori portato a opacita' zero dallo scambio, quello scuro tolto
 * dal flusso. Ora lo scambio puo' funzionare anche qui.
 */

/* ==========================================================================
   2. SPAZIO SOTTO L'HEADER FISSO
   ==========================================================================
   Il tema riserva lo spazio dell'header fisso con un <div class="spacer">
   alto 140px (110px sotto i 990px). Sul template "menu-trasparent" lo
   nasconde, perche' li' la hero passa sotto l'header trasparente.

   Su carrello, checkout e account il risultato era che il contenuto partiva a
   0px sotto un header alto 111px: il titolo finiva coperto. Qui lo spacer
   torna della stessa altezza usata da Shop e scheda prodotto.                */

.woocommerce-cart .spacer,
.woocommerce-checkout .spacer,
.woocommerce-account .spacer {
	display: block !important;
	height: 140px !important;
}

@media (max-width: 990px) {
	.woocommerce-cart .spacer,
	.woocommerce-checkout .spacer,
	.woocommerce-account .spacer {
		height: 110px !important;
	}
}

/* --- Fase 03: lo spaziatore segue l'header, che cresce --------------------
   L'header e' fisso e la sua altezza NON e' costante: cresce con la finestra.
   Misurata su Shop, scheda prodotto, carrello e account, e' identica ovunque:

     fino a 1100px : 110px              -> spaziatore 140px, 26px di aria
     1200-1920px   : 6,25vw + 65px      -> spaziatore 140px, fino a 49px SOTTO
     oltre 1920px  : si ferma a 185px     (il logo smette di crescere)

   Con lo spaziatore fisso a 140px, dai 1200px in su il titolo della pagina
   finiva sotto l'header: a 1440px la parola "Shop" era coperta per meta'.
   Qui lo spaziatore segue la stessa legge dell'header e mantiene 30px di aria,
   cioe' poco piu' dei 26px che il tema stesso lascia sotto i 1100px.

   Il tetto della clamp (215px) riproduce il punto in cui l'header smette di
   crescere: oltre i 1920px l'aria resta 30px invece di aumentare all'infinito.

   Non tocca il tema padre e non tocca la Home, che usa "menu-trasparent" dove
   lo spaziatore e' disattivato. Si annulla rimuovendo questo blocco.          */

@media (min-width: 1200px) {
	.woocommerce-shop .spacer,
	.post-type-archive-product .spacer,
	.tax-product_cat .spacer,
	.single-product .spacer,
	.woocommerce-cart .spacer,
	.woocommerce-checkout .spacer,
	.woocommerce-account .spacer {
		height: clamp(140px, calc(6.25vw + 95px), 215px) !important;
	}
}

/* ==========================================================================
   3. CONTENITORE E RITMO VERTICALE
   ========================================================================== */

.woocommerce-shop #content,
.post-type-archive-product #content,
.tax-product_cat #content,
.single-product #content,
.woocommerce-cart #content,
.woocommerce-checkout #content,
.woocommerce-account #content {
	padding-bottom: clamp(48px, 6vw, 96px);
}

.woocommerce-shop #content > [class*="col-"],
.post-type-archive-product #content > [class*="col-"],
.tax-product_cat #content > [class*="col-"],
.single-product #content > [class*="col-"],
.woocommerce-cart #content > [class*="col-"],
.woocommerce-checkout #content > [class*="col-"],
.woocommerce-account #content > [class*="col-"] {
	width: 100%;
	max-width: var(--ailov-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 38px);
	box-sizing: border-box;
}

/* ==========================================================================
   4. TITOLI
   ==========================================================================
   Il tema padre nasconde il titolo della pagina Shop con
   `.woocommerce-shop h1{display:none}` (nextawards/style.css:872): la pagina
   restava senza alcun titolo visibile, pur avendo un H1 nel markup.
   Un H1 nascosto e' peggio di nessun H1: qui torna visibile e prende lo stile
   dei titoli di sezione del sito.                                            */

.woocommerce-shop h1.page-title,
.post-type-archive-product h1.page-title,
.tax-product_cat h1.page-title {
	display: block !important;
}

.woocommerce-shop h1.page-title,
.post-type-archive-product h1.page-title,
.tax-product_cat h1.page-title,
.single-product .product_title,
.ailov-wc-title {
	margin: 0 0 clamp(20px, 2.5vw, 32px);
	font-family: var(--ailov-serif);
	font-weight: 700;
	font-size: var(--ailov-h1);
	line-height: 1.15;
	color: var(--ailov-accent);
	text-align: left;
}

/* Titolo aggiunto dal child theme su carrello, checkout e account, che di loro
   non ne avevano alcuno.

   Il rientro laterale e' stato tolto in Fase 09-W: il titolo vive dentro la
   colonna dell'articolo, che quel rientro lo applica gia'. Sommandoli, il
   testo del titolo partiva 38px piu' a destra del percorso e del contenuto
   (23px a 768, 16px a 390): tre bordi diversi sulla stessa pagina.           */
.ailov-wc-title {
	max-width: var(--ailov-container);
	margin-inline: auto;
	box-sizing: border-box;
}

.woocommerce-shop .woocommerce-products-header,
.post-type-archive-product .woocommerce-products-header {
	margin-bottom: clamp(16px, 2vw, 28px);
}

/* Titoli secondari: "Prodotti correlati", "Descrizione", "Il tuo ordine"... */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce-cart .cross-sells > h2,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account h2,
.wc-block-cart h2,
.wc-block-checkout h2,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	font-size: var(--ailov-h2) !important;
	line-height: 1.2;
	color: var(--ailov-ink) !important;
}

/* ==========================================================================
   5. TESTO
   ========================================================================== */

.woocommerce-shop #content p,
.post-type-archive-product #content p,
.single-product #content p,
.woocommerce-cart #content p,
.woocommerce-checkout #content p,
.woocommerce-account #content p,
.woocommerce-shop .woocommerce-result-count,
.post-type-archive-product .woocommerce-result-count {
	font-family: var(--ailov-sans);
	font-size: var(--ailov-body);
	line-height: 1.6;
	color: var(--ailov-ink);
}

/* ==========================================================================
   6. BOTTONI
   ==========================================================================
   Prima di questa fase convivevano tre stili diversi:
     - "Aggiungi al carrello"  arancione, raggio 3px, maiuscolo
     - "Procedi al pagamento"  grigio scuro #32373c, raggio 0
     - "Visualizza carrello"   verde #4CAF50, raggio 3px
   Qui diventano tutti il bottone del sito: arancione, raggio 10px,
   padding 14px 35px, Roboto, senza maiuscolo forzato.

   Sono coperte sia la marcatura classica (.button) sia quella a blocchi
   (.wc-block-components-button), perche' WooCommerce 11 usa i blocchi per
   carrello e checkout.                                                       */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message .button,
.woocommerce .actions .button,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-account .woocommerce-Button {
	display: inline-block;
	padding: 14px 35px !important;
	border: 0 !important;
	border-radius: var(--ailov-radius) !important;
	background-color: var(--ailov-accent) !important;
	color: #ffffff !important;
	font-family: var(--ailov-sans) !important;
	font-weight: 400 !important;
	font-size: var(--ailov-btn) !important;
	line-height: 1.25 !important;
	text-transform: none !important;
	text-decoration: none;
	letter-spacing: normal;
	height: auto !important;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-account .woocommerce-Button:hover {
	background-color: var(--ailov-accent-hover) !important;
	color: #ffffff !important;
}

/* Il bottone "Visualizza carrello" accanto al messaggio di aggiunta usa
   l'arancione del sito, come tutti gli altri pulsanti d'azione. Resta piu'
   compatto dei pulsanti principali, perche' vive dentro un avviso. */
.woocommerce .woocommerce-message a.button,
.woocommerce .added_to_cart {
	background-color: var(--ailov-accent) !important;
	color: #ffffff !important;
	padding: 10px 24px !important;
	border-radius: var(--ailov-radius) !important;
	font-family: var(--ailov-sans);
	text-transform: none !important;
	text-decoration: none;
}

.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-message a.button:focus-visible,
.woocommerce .added_to_cart:hover,
.woocommerce .added_to_cart:focus-visible {
	background-color: var(--ailov-accent-hover) !important;
	color: #ffffff !important;
}

/* Il pulsante "Aggiorna carrello" e' disabilitato finche' non cambi qualcosa:
   deve sembrare disabilitato, non rotto. */
.woocommerce .actions .button[disabled],
.wc-block-components-button:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed;
}

/* Focus da tastiera visibile su tutti gli elementi interattivi WooCommerce. */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wc-block-components-button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible,
.wc-block-components-text-input input:focus-visible,
.woocommerce-page a:focus-visible {
	outline: 3px solid var(--ailov-ink-strong) !important;
	outline-offset: 3px !important;
}

/* ==========================================================================
   7. PREZZI
   ==========================================================================
   Il tema padre li forza a nero (`.woocommerce ... .price{color:#000}`).
   Nel sito il prezzo e' un'informazione forte: qui prende l'arancione, come
   nella sezione Shop della Home.                                             */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .summary .price,
.wc-block-components-product-price,
.wc-block-components-totals-item__value {
	color: var(--ailov-accent) !important;
	font-family: var(--ailov-sans) !important;
	font-weight: 700 !important;
}

.woocommerce ul.products li.product .price {
	font-size: clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.55), 1.35rem) !important;
}

.woocommerce div.product .summary .price {
	font-size: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.8), 1.8rem) !important;
	margin-bottom: 18px;
}

.woocommerce .price del,
.wc-block-components-product-price del {
	color: var(--ailov-ink) !important;
	font-weight: 400 !important;
	opacity: 0.6;
	margin-right: 8px;
}

.woocommerce .price ins,
.wc-block-components-product-price ins {
	text-decoration: none;
}

/* ==========================================================================
   8. GRIGLIA E CARD PRODOTTO
   ==========================================================================
   Le card prendono lo stesso trattamento della sezione Shop in Home: fondo
   bianco, raggio 15px, ombra leggera, immagine 4:3.                          */

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
}

.woocommerce ul.products li.product {
	position: relative;
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 0 clamp(18px, 2vw, 24px) !important;
	float: none !important;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: var(--ailov-radius-card);
	box-shadow: 0 2px 14px rgba(74, 74, 74, 0.10);
	text-align: left;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(74, 74, 74, 0.18);
}

.woocommerce ul.products li.product:focus-within {
	outline: 3px solid var(--ailov-accent);
	outline-offset: 3px;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0 0 clamp(14px, 1.6vw, 20px) !important;
	object-fit: cover;
	object-position: center;
	background-color: var(--ailov-grey);
	border-radius: 0;
	box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 !important;
	padding: 0 clamp(16px, 1.8vw, 22px) 6px !important;
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	font-size: clamp(1.065rem, 1.065rem + ((1vw - 0.2rem) * 0.71), 1.5rem) !important;
	line-height: 1.25;
	color: var(--ailov-ink) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-loop-product__link + * {
	padding-inline: clamp(16px, 1.8vw, 22px);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: clamp(12px, 1.5vw, 16px) clamp(16px, 1.8vw, 22px) 0 !important;
	align-self: flex-start;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	text-decoration: none;
	color: inherit;
}

/* ==========================================================================
   9. SEGNAPOSTO IMMAGINE
   ==========================================================================
   I due prodotti non hanno ancora una foto: WooCommerce mostra il proprio
   segnaposto. Senza trattamento risultava ingrandito e sgranato. Qui viene
   contenuto e alleggerito, come nella sezione Shop della Home.
   Resta consigliato caricare le immagini reali dal backend.                  */

.woocommerce img[src*="woocommerce-placeholder"],
.woocommerce-page img[src*="woocommerce-placeholder"] {
	object-fit: contain !important;
	padding: 14% 18%;
	background-color: var(--ailov-grey);
	opacity: 0.5;
	box-sizing: border-box;
}

/* ==========================================================================
   10. SCHEDA PRODOTTO
   ========================================================================== */

.single-product div.product {
	display: block;
}

/*
 * Fino alla Fase 09-G l'intero blocco galleria era una scheda arrotondata con
 * fondo grigio, e per questo il raggio delle immagini veniva azzerato: a
 * smussare gli angoli era il contenitore.
 *
 * Con le miniature incolonnate a sinistra quel disegno non regge piu': il
 * contenitore ora racchiude due colonne, quindi arrotondarlo tutto insieme
 * smusserebbe l'insieme e non le singole immagini, e il fondo grigio
 * comparirebbe nello spazio fra le due colonne.
 *
 * Ora ogni pezzo si arrotonda da se' (sezione 34). Qui resta il solo fondo,
 * utile mentre le immagini si caricano.
 */
.single-product div.product .woocommerce-product-gallery {
	background-color: transparent;
}

.single-product div.product .summary {
	font-family: var(--ailov-sans);
	color: var(--ailov-ink);
}

.single-product .woocommerce-product-details__short-description {
	margin-bottom: 20px;
	font-size: var(--ailov-body);
	line-height: 1.6;
	color: var(--ailov-ink);
}

.single-product .product_meta {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid rgba(74, 74, 74, 0.18);
	font-size: 0.9rem;
	color: var(--ailov-ink);
}

.single-product .woocommerce-tabs ul.tabs {
	padding-left: 0 !important;
}

.single-product .woocommerce-tabs ul.tabs li {
	border-radius: var(--ailov-radius) var(--ailov-radius) 0 0;
	background-color: var(--ailov-beige);
	border-color: rgba(74, 74, 74, 0.18);
}

.single-product .woocommerce-tabs ul.tabs li.active {
	background-color: #ffffff;
}

.single-product .woocommerce-tabs ul.tabs li a {
	font-family: var(--ailov-serif);
	font-weight: 700;
	color: var(--ailov-ink) !important;
}

.single-product .woocommerce-tabs .panel {
	font-family: var(--ailov-sans);
	color: var(--ailov-ink);
}

.single-product div.product .related {
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: clamp(28px, 3vw, 44px);
	border-top: 1px solid rgba(74, 74, 74, 0.15);
}

/* ==========================================================================
   11. CAMPI, QUANTITA', SELECT
   ========================================================================== */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce .quantity input,
.woocommerce-input-wrapper input {
	/*
	 * Aggiornata in Fase 09-V. L'elenco comprendeva anche
	 * `.wc-block-components-text-input input` e
	 * `.wc-blocks-components-select__select`, cioe' i campi del checkout a
	 * blocchi, e imponeva loro padding 12px e interlinea 1,4.
	 *
	 * Quei campi hanno pero' l'etichetta **dentro** al riquadro, in posizione
	 * assoluta, che si rimpicciolisce e sale quando il campo e' compilato.
	 * WooCommerce ci lascia spazio con `padding: 16px 12px` e
	 * `line-height: 25px`: comprimendoli, etichetta e valore finivano uno
	 * sopra l'altro ("Indirizzo email" sovrapposto all'indirizzo scritto).
	 *
	 * Sono quindi usciti da qui. Continuano a ricevere bordo, raggio e colori
	 * dalla sezione 27, che non tocca la disposizione interna.
	 */
	border-radius: var(--ailov-radius) !important;
	border: 1px solid rgba(74, 74, 74, 0.35) !important;
	padding: 12px 14px !important;
	font-family: var(--ailov-sans) !important;
	font-size: 1rem !important;
	line-height: 1.4;
	color: var(--ailov-ink-strong);
	background-color: #ffffff;
	box-sizing: border-box;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--ailov-accent) !important;
}

.woocommerce .quantity input.qty {
	width: 76px !important;
	height: auto !important;
	text-align: center;
}

.woocommerce label,
.woocommerce-page label,
.wc-block-components-text-input label {
	font-family: var(--ailov-sans);
	font-size: 0.95rem;
	color: var(--ailov-ink);
}

.woocommerce .required {
	color: var(--ailov-accent-hover);
	text-decoration: none;
}

/* Il codice sconto era largo 120px fissi: illeggibile. */
.woocommerce #coupon_code {
	width: auto !important;
	min-width: 180px;
	height: auto !important;
}

/* ==========================================================================
   12. TABELLE
   ========================================================================== */

.woocommerce table.shop_table,
.woocommerce table.cart,
.woocommerce-account table.woocommerce-orders-table {
	border: 1px solid rgba(74, 74, 74, 0.15) !important;
	border-radius: var(--ailov-radius-card) !important;
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
	font-family: var(--ailov-sans);
	color: var(--ailov-ink);
}

.woocommerce table.shop_table th,
.woocommerce table.cart th {
	background-color: var(--ailov-beige);
	font-family: var(--ailov-serif);
	font-weight: 700;
	color: var(--ailov-ink);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	padding: 14px 16px !important;
	border-color: rgba(74, 74, 74, 0.12) !important;
}

.woocommerce table.shop_table a {
	color: var(--ailov-ink);
	text-decoration: none;
}

.woocommerce table.shop_table a:hover {
	color: var(--ailov-accent);
}

/* Blocchi carrello/checkout: totali e righe */
.wc-block-components-totals-wrapper,
.wc-block-cart-items__row {
	border-color: rgba(74, 74, 74, 0.12) !important;
}

.wc-block-components-product-name {
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	color: var(--ailov-ink) !important;
	text-decoration: none;
}

.wc-block-components-order-summary__content,
.wc-block-components-totals-item {
	font-family: var(--ailov-sans) !important;
	color: var(--ailov-ink) !important;
}

.wc-block-components-sidebar,
.wc-block-cart__sidebar {
	background-color: var(--ailov-beige);
	border-radius: var(--ailov-radius-card);
	padding: clamp(18px, 2vw, 28px);
	box-sizing: border-box;
}

/* ==========================================================================
   13. MESSAGGI E NOTICE
   ==========================================================================
   Restano perfettamente leggibili: cambia solo la veste. Nessun messaggio
   viene nascosto.                                                            */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--ailov-radius) !important;
	border: 1px solid rgba(74, 74, 74, 0.15) !important;
	border-top-width: 1px !important;
	padding: 16px 20px !important;
	font-family: var(--ailov-sans) !important;
	font-size: var(--ailov-body) !important;
	line-height: 1.5;
	color: var(--ailov-ink-strong) !important;
	background-color: var(--ailov-grey) !important;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background-color: #eef7ea !important;
	border-color: rgba(76, 140, 40, 0.35) !important;
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	background-color: var(--ailov-beige) !important;
	border-color: rgba(240, 125, 0, 0.35) !important;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background-color: #fdeeee !important;
	border-color: rgba(190, 60, 60, 0.4) !important;
}

/*
 * L'icona di questi messaggi e' posizionata in assoluto sul bordo sinistro:
 * lo spazio per accoglierla lo faceva il padding sinistro del tema padre
 * (3.5em). Uniformando qui sopra il padding a 16px 20px quello spazio era
 * sparito e l'icona finiva sopra la prima parola.
 *
 * Padding sinistro e posizione dell'icona sono percio' dichiarati insieme,
 * cosi' non possono piu' scostarsi: icona da 20px a 38px, testo da 50px.
 *
 * Non riguarda .wc-block-components-notice-banner, che dispone la propria
 * icona in linea e non ha bisogno di spazio riservato.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding-left: 50px !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	left: 20px !important;
	color: var(--ailov-accent) !important;
}

/*
 * Allineamento di icona, testo e pulsante.
 *
 * Nel comportamento nativo i tre elementi stanno su assi diversi: l'icona e'
 * posizionata in assoluto, il testo scorre nel flusso e il pulsante e'
 * flottato a destra, quindi si appoggia all'alto. Risultato: tre centri
 * verticali diversi (322, 324 e 332 px alla misura).
 *
 * L'avviso diventa percio' una riga flessibile e l'icona smette di essere
 * posizionata in assoluto per diventare un elemento della riga come gli
 * altri. Cosi' l'allineamento non e' piu' il risultato di tre numeri da
 * tenere d'accordo, ma una conseguenza della disposizione.
 *
 * Vale per i soli avvisi che sono un DIV: l'avviso di errore e' una lista, e
 * renderla flessibile affiancherebbe le voci invece di incolonnarle.
 */
div.woocommerce-message,
div.woocommerce-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 14px;
	/* lo spazio a sinistra non serve piu': l'icona non e' piu' sovrapposta */
	padding-left: 20px !important;
}

div.woocommerce-message::before,
div.woocommerce-info::before {
	position: static !important;
	top: auto !important;
	left: auto !important;
	flex: 0 0 auto;
	margin: 0 !important;
}

div.woocommerce-message > a.button,
div.woocommerce-message > .button,
div.woocommerce-info > a.button,
div.woocommerce-info > .button {
	float: none !important;
	/* il margine automatico lo tiene a destra senza bisogno del flottaggio */
	margin: 0 0 0 auto !important;
	order: 2;
}

/*
 * Sotto i 600px la frase non entra piu' accanto all'icona: essendo un solo
 * elemento della riga, andrebbe a capo per intero e lascerebbe l'icona sola
 * sulla prima riga. A quelle larghezze si torna quindi alla disposizione a
 * blocco, con l'icona di nuovo posizionata in assoluto e allineata alla
 * prima riga di testo, e il pulsante a tutta larghezza sotto.
 */
@media (max-width: 600px) {
	div.woocommerce-message,
	div.woocommerce-info {
		display: block;
		padding-left: 50px !important;
	}

	div.woocommerce-message::before,
	div.woocommerce-info::before {
		position: absolute !important;
		left: 20px !important;
		top: 16px !important;
	}

	/* la specificita' serve a vincere sia la regola dei pulsanti della
	   sezione 5 sia il limite di larghezza imposto per gli schermi stretti */
	.woocommerce div.woocommerce-message > a.button,
	.woocommerce div.woocommerce-message > .button,
	.woocommerce div.woocommerce-info > a.button,
	.woocommerce div.woocommerce-info > .button {
		display: block !important;
		width: 100%;
		max-width: none !important;
		margin: 14px 0 0 !important;
		text-align: center;
	}
}

/* ==========================================================================
   14. CARRELLO VUOTO E STATI VUOTI
   ========================================================================== */

.wc-block-cart__empty-cart__title,
.cart-empty {
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	font-size: var(--ailov-h2) !important;
	color: var(--ailov-ink) !important;
}

.woocommerce .return-to-shop {
	margin-top: 24px;
}

.wc-block-grid__product,
.wc-block-cart__empty-cart__title + p {
	font-family: var(--ailov-sans);
	color: var(--ailov-ink);
}

/* ==========================================================================
   15. ORDINAMENTO E CONTEGGIO RISULTATI
   ========================================================================== */

.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
	margin-bottom: clamp(18px, 2vw, 28px);
}

.woocommerce .woocommerce-ordering select {
	width: auto !important;
	min-width: 220px;
	border: 1px solid rgba(74, 74, 74, 0.35) !important;
	border-radius: var(--ailov-radius) !important;
	padding: 10px 14px !important;
}

/* ==========================================================================
   16. BREADCRUMB
   ==========================================================================
   Il tema non ne stampa; la regola c'e' perche' se in futuro verranno attivati
   siano gia' coerenti.                                                       */

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: clamp(14px, 1.6vw, 22px);
	font-family: var(--ailov-sans);
	font-size: 0.9rem;
	color: var(--ailov-ink);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--ailov-accent);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--ailov-accent-hover);
	text-decoration: underline;
}

/* ==========================================================================
   17. AREA ACCOUNT
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(74, 74, 74, 0.12);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 4px;
	font-family: var(--ailov-sans);
	color: var(--ailov-ink);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--ailov-accent);
}

.woocommerce-account form.login,
.woocommerce-account form.register {
	border-radius: var(--ailov-radius-card) !important;
	border: 1px solid rgba(74, 74, 74, 0.15) !important;
	padding: clamp(20px, 2.5vw, 32px) !important;
}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media (max-width: 626px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}

	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button {
		width: 100%;
		max-width: 340px;
		text-align: center;
	}

	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart {
		align-self: stretch;
		margin-inline: clamp(16px, 1.8vw, 22px) !important;
	}

	/* Le tabelle del carrello su mobile diventano righe impilate: WooCommerce
	   lo fa gia', qui si sistemano bordi e spaziature. */
	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		border-bottom: 1px solid rgba(74, 74, 74, 0.12);
	}

	.woocommerce table.shop_table_responsive td::before {
		font-family: var(--ailov-serif);
		font-weight: 700;
		color: var(--ailov-ink);
	}
}

/* ==========================================================================
   19. MOVIMENTO RIDOTTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce a.button,
	.woocommerce button.button,
	.wc-block-components-button {
		transition: none !important;
	}

	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}

/* ==========================================================================
   20. RIFERIMENTO VISIVO — PALETTE
   ==========================================================================
   Le sezioni da 20 in poi allineano le pagine WooCommerce agli screenshot di
   riferimento forniti. Rispetto alle sezioni 1-19, che portavano l'arancione
   del marchio su tutto, il riferimento usa un secondo registro: SCURO per le
   azioni e VERDE per gli accenti di stato, tenendo l'arancione per la Home e
   per il logo. Le sezioni precedenti restano dove il riferimento coincide.

   I colori sono letti dagli screenshot, non inventati.                       */

.woocommerce,
.woocommerce-page,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.single-product,
.post-type-archive-product,
.tax-product_cat {
	--ailov-scuro: #33302b;
	--ailov-scuro-hover: #4a463f;
	--ailov-verde: #6f8f3f;
	--ailov-verde-chiaro: #e4ecd8;
	--ailov-pesca: #f7e2dc;
	--ailov-bordo: #e6e2da;
	--ailov-grigio-testo: #6b675e;
	--ailov-pill: 999px;
	/* aggiunto in Fase 09-S: prima viveva solo sulla scheda prodotto */
	--ailov-stelle: #c9a227;
}

/* ==========================================================================
   21. BREADCRUMB
   ==========================================================================
   Il tema padre non stampa il breadcrumb: viene aggiunto dal child theme
   (vedi ailov_breadcrumb_woocommerce in functions.php). Qui riceve la forma
   discreta del riferimento: testo piccolo, separatore sottile, link grigi.  */

.ailov-breadcrumb {
	max-width: var(--ailov-container);
	margin: 0 auto clamp(14px, 2vw, 26px);
	padding: 0;
	font-family: var(--ailov-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ailov-grigio-testo);
}

.ailov-breadcrumb a {
	color: var(--ailov-grigio-testo);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ailov-breadcrumb a:hover,
.ailov-breadcrumb a:focus-visible {
	color: var(--ailov-scuro);
	border-bottom-color: currentColor;
}

/* l'ultima voce e' la pagina corrente: non e' un link e va distinta */
.ailov-breadcrumb .ailov-breadcrumb__corrente {
	color: var(--ailov-scuro);
}

.ailov-breadcrumb .ailov-breadcrumb__sep {
	margin: 0 0.5em;
	color: #bdb8ae;
}

/* ==========================================================================
   22. ARCHIVIO SHOP — INTESTAZIONE
   ==========================================================================
   Nel riferimento il titolo della pagina non e' arancione ma scuro, e sotto
   compare un testo introduttivo. Conteggio risultati e ordinamento stanno
   sulla stessa riga, separati dal contenuto da un filo sottile.             */

.woocommerce-shop h1.page-title,
.post-type-archive-product h1.page-title,
.tax-product_cat h1.page-title {
	color: var(--ailov-scuro) !important;
	margin-bottom: 0.35em;
	text-align: left;
}

.post-type-archive-product .term-description,
.tax-product_cat .term-description {
	max-width: 52ch;
	margin-bottom: clamp(22px, 3vw, 38px);
	font-family: var(--ailov-sans);
	font-size: var(--ailov-body);
	line-height: 1.65;
	color: var(--ailov-grigio-testo);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: clamp(18px, 2.5vw, 30px);
}

.woocommerce .woocommerce-result-count {
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	color: var(--ailov-grigio-testo);
}

body.woocommerce .woocommerce-ordering select,
body.woocommerce-page .woocommerce-ordering select {
	padding: 9px 34px 9px 16px;
	border: 1px solid var(--ailov-bordo) !important;
	border-radius: var(--ailov-pill) !important;
	background-color: #fff;
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	color: var(--ailov-scuro);
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus-visible {
	outline: 3px solid var(--ailov-scuro);
	outline-offset: 2px;
}

/* filo di separazione sotto la barra risultati/ordinamento */
.woocommerce-shop ul.products,
.post-type-archive-product ul.products,
.tax-product_cat ul.products {
	border-top: 1px solid var(--ailov-bordo);
	padding-top: clamp(22px, 3vw, 36px);
}

/* ==========================================================================
   23. CARD PRODOTTO NELLA GRIGLIA
   ==========================================================================
   Il riferimento mostra card senza cornice: immagine ad angoli arrotondati,
   titolo scuro, prezzo su riga propria, bottone scuro a pillola. Rispetto
   alle sezioni 1-19 cambiano colore del bottone e peso del titolo.          */

body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	color: var(--ailov-scuro) !important;
}

.woocommerce ul.products li.product .price {
	color: var(--ailov-scuro) !important;
	font-family: var(--ailov-sans);
	font-weight: 500;
}

body.woocommerce ul.products li.product a img,
body.woocommerce ul.products li.product img,
body.woocommerce-page ul.products li.product a img {
	border-radius: var(--ailov-radius-card);
}

/* Il bottone nella griglia e' nascosto dal tema padre (nextawards/style.css:871).
   Non lo si forza a comparire: sarebbe un cambio di comportamento, non di
   stile, e resta una decisione aperta (Q-018). Se in futuro verra' mostrato,
   queste regole gli danno gia' la forma del riferimento.                    */
body.woocommerce ul.products li.product a.button,
body.woocommerce ul.products li.product a.add_to_cart_button,
body.woocommerce-page ul.products li.product a.button {
	background-color: var(--ailov-scuro) !important;
	color: #fff !important;
	border-radius: var(--ailov-pill) !important;
	padding: 11px 22px !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
}

body.woocommerce ul.products li.product a.button:hover,
body.woocommerce-page ul.products li.product a.button:hover {
	background-color: var(--ailov-scuro-hover) !important;
}

/* ==========================================================================
   24. SCHEDA PRODOTTO
   ==========================================================================
   Nel riferimento il titolo e il prezzo sono scuri e in serif, non arancioni.
   Il prezzo e' grande e affiancato da una nota piccola. La colonna informazioni
   ha un ritmo verticale piu' arioso.                                         */

.single-product .product_title {
	color: var(--ailov-scuro) !important;
	margin-bottom: 0.3em;
}

body.single-product.woocommerce div.product .summary p.price,
body.single-product.woocommerce div.product .summary p.price .woocommerce-Price-amount,
body.single-product.woocommerce div.product .summary p.price .woocommerce-Price-currencySymbol {
	color: var(--ailov-scuro) !important;
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem) !important;
	line-height: 1.15;
}

.single-product .summary p.price {
	margin: 0 0 clamp(16px, 2vw, 24px);
}

.single-product .woocommerce-product-details__short-description {
	max-width: 46ch;
	margin-bottom: clamp(18px, 2.4vw, 28px);
	font-family: var(--ailov-sans);
	font-size: var(--ailov-body);
	line-height: 1.7;
	color: var(--ailov-grigio-testo);
}

/* stato di disponibilita': nel riferimento e' un pallino verde con etichetta.
   WooCommerce lo stampa solo quando la gestione scorte lo prevede: la regola
   resta pronta senza forzarne la comparsa.                                   */
.single-product .stock.in-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(16px, 2vw, 22px);
	font-family: var(--ailov-sans);
	font-weight: 500;
	color: var(--ailov-verde);
}

.single-product .stock.in-stock::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--ailov-verde);
	flex: 0 0 auto;
}

/* quantita' e bottone principale */
.single-product form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: clamp(20px, 2.6vw, 30px);
}

body.single-product.woocommerce div.product form.cart .quantity input.qty {
	border: 1px solid var(--ailov-bordo) !important;
	border-radius: var(--ailov-pill) !important;
	padding: 12px 10px;
	font-family: var(--ailov-sans);
	color: var(--ailov-scuro);
	text-align: center;
}

/* Il tema padre inietta in wp_head, DOPO questo foglio, la regola
   `.woocommerce .button{background-color:#f07d00!important}` (nextawards/functions.php:282).
   A parita' di specificita' vince l'ultima dichiarata: per questo le regole sui
   bottoni classici qui sotto usano selettori piu' specifici. Non e' una
   scorciatoia, e' l'unico modo per sovrascrivere senza toccare il tema padre. */
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button {
	background-color: var(--ailov-scuro) !important;
	color: #fff !important;
	border-radius: var(--ailov-pill) !important;
	padding: 15px 34px !important;
	font-family: var(--ailov-sans) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
}

body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
	background-color: var(--ailov-scuro-hover) !important;
}

/* meta prodotto: etichette in maiuscoletto, valori leggibili */
.single-product .product_meta {
	border-top: 1px solid var(--ailov-bordo);
	padding-top: clamp(16px, 2vw, 22px);
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	line-height: 2;
	color: var(--ailov-grigio-testo);
}

.single-product .product_meta > span {
	display: block;
}

.single-product .product_meta a {
	color: var(--ailov-scuro);
	text-decoration: none;
	border-bottom: 1px solid var(--ailov-bordo);
}

.single-product .product_meta a:hover,
.single-product .product_meta a:focus-visible {
	border-bottom-color: var(--ailov-scuro);
}

/* galleria: angoli arrotondati e miniature in colonna quando esistono */
.single-product .woocommerce-product-gallery img {
	border-radius: var(--ailov-radius-card);
}

.single-product .flex-control-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	padding: 0;
	list-style: none;
}

.single-product .flex-control-thumbs li {
	width: 76px;
	margin: 0;
}

.single-product .flex-control-thumbs img {
	border-radius: 10px;
	border: 2px solid transparent;
	cursor: pointer;
}

.single-product .flex-control-thumbs img.flex-active {
	border-color: var(--ailov-verde);
}

/* ==========================================================================
   25. SCHEDE INFORMATIVE DEL PRODOTTO
   ========================================================================== */

.woocommerce-tabs ul.wc-tabs {
	border-bottom: 1px solid var(--ailov-bordo);
	padding-left: 0;
	margin-bottom: clamp(20px, 2.6vw, 32px);
}

.woocommerce-tabs ul.wc-tabs li a {
	font-family: var(--ailov-serif);
	font-weight: 700;
	color: var(--ailov-grigio-testo);
}

body.woocommerce .woocommerce-tabs ul.wc-tabs li.active a {
	color: var(--ailov-scuro) !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: 68ch;
	font-family: var(--ailov-sans);
	line-height: 1.75;
	color: var(--ailov-grigio-testo);
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
	color: var(--ailov-scuro);
}

.single-product .related.products > h2,
.single-product .up-sells > h2 {
	color: var(--ailov-scuro);
	margin-bottom: clamp(18px, 2.4vw, 28px);
}

/* ==========================================================================
   26. CARRELLO A BLOCCHI
   ==========================================================================
   Nel riferimento il riepilogo e' una scheda bordata ad angoli arrotondati su
   fondo bianco, non un blocco beige pieno, e il bottone principale e' scuro.
   Questa sezione aggiorna quanto stabilito nella sezione 8.                  */

.wc-block-cart .wc-block-cart-items__header {
	font-family: var(--ailov-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ailov-grigio-testo);
	border-bottom: 1px solid var(--ailov-bordo);
}

.wc-block-cart .wc-block-cart-items__row {
	border-bottom: 1px solid var(--ailov-bordo);
}

.wc-block-cart .wc-block-cart-item__image img {
	border-radius: 12px;
}

.wc-block-components-product-name {
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	color: var(--ailov-scuro) !important;
	text-decoration: none !important;
}

.wc-block-cart .wc-block-components-product-price,
.wc-block-cart .wc-block-components-product-price .wc-block-formatted-money-amount {
	color: var(--ailov-scuro) !important;
	font-weight: 500 !important;
}

/* riepilogo: scheda bordata, non fondo pieno */
.wc-block-cart .wc-block-cart__sidebar {
	background-color: #fff !important;
	border: 1px solid var(--ailov-bordo);
	border-radius: var(--ailov-radius-card);
	padding: clamp(20px, 2.4vw, 30px) !important;
}

.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__label {
	font-family: var(--ailov-sans);
	color: var(--ailov-grigio-testo);
}

.wc-block-cart .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--ailov-bordo);
	padding-top: 14px;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	color: var(--ailov-scuro) !important;
	font-size: 1.375rem !important;
}

.wc-block-cart__submit-button,
.wc-block-cart .wc-block-components-button {
	background-color: var(--ailov-scuro) !important;
	color: #fff !important;
	border-radius: var(--ailov-pill) !important;
	font-family: var(--ailov-sans) !important;
	font-weight: 500 !important;
	text-transform: none !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-components-button:hover {
	background-color: var(--ailov-scuro-hover) !important;
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--ailov-bordo) !important;
	border-radius: var(--ailov-pill) !important;
}

/* ==========================================================================
   27. CHECKOUT A BLOCCHI
   ========================================================================== */

.wc-block-checkout__main .wc-block-components-checkout-step__title {
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	color: var(--ailov-scuro) !important;
}

.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
	border: 1px solid var(--ailov-bordo) !important;
	border-radius: 12px !important;
	background-color: #fff !important;
	font-family: var(--ailov-sans) !important;
	color: var(--ailov-scuro) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
	outline: 3px solid var(--ailov-scuro);
	outline-offset: 2px;
}

/* metodi di pagamento: ogni opzione e' una riga bordata arrotondata */
/*
 * Aggiornata in Fase 09-V. Il padding sinistro era 18px, ma il pallino della
 * scelta e' posizionato in assoluto a 16px e largo 20: finiva quindi sopra la
 * prima lettera, e "Spedizione gratuita" si leggeva "edizione gratuita".
 * WooCommerce riserva 48px a sinistra proprio per questo: qui si ripristina
 * quel valore, tenendo il resto della veste AILOV.
 */
.wc-block-checkout .wc-block-components-radio-control__option,
.wc-block-components-radio-control .wc-block-components-radio-control__option {
	border: 1px solid var(--ailov-bordo) !important;
	border-radius: 12px !important;
	padding: 14px 18px 14px 48px !important;
	margin-bottom: 10px;
	background-color: #fff;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--ailov-verde);
	box-shadow: 0 0 0 1px var(--ailov-verde);
}

/* riepilogo ordine come scheda bordata */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar {
	background-color: #fff !important;
}

.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--ailov-bordo);
	border-radius: var(--ailov-radius-card);
	padding: clamp(20px, 2.4vw, 30px);
	background-color: #fff;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 1rem !important;
}

.wc-block-components-checkout-place-order-button {
	background-color: var(--ailov-scuro) !important;
	color: #fff !important;
	border-radius: var(--ailov-pill) !important;
	font-family: var(--ailov-sans) !important;
	font-weight: 500 !important;
	text-transform: none !important;
}

.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--ailov-scuro-hover) !important;
}

.wc-block-checkout__terms {
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	color: var(--ailov-grigio-testo);
}

/* ==========================================================================
   28. AREA ACCOUNT
   ==========================================================================
   Nel riferimento la navigazione laterale e' una scheda bordata con la voce
   attiva a pillola verde, e il contenuto sta in schede bianche.
   Le regole valgono anche per le viste visibili solo dopo l'accesso.        */

.woocommerce-account .woocommerce-MyAccount-navigation {
	border: 1px solid var(--ailov-bordo);
	border-radius: var(--ailov-radius-card);
	padding: 14px;
	background-color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 0 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 18px;
	border-radius: var(--ailov-pill);
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	color: var(--ailov-scuro);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background-color: #f4f2ee;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--ailov-verde);
	color: #fff;
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	border-top: 1px solid var(--ailov-bordo);
	margin-top: 10px;
	padding-top: 10px;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	color: var(--ailov-scuro);
}

/* tabelle di ordini e indirizzi */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table--order-details {
	border: none;
	font-family: var(--ailov-sans);
}

.woocommerce-account .woocommerce-orders-table thead th {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ailov-grigio-testo);
	border-bottom: 1px solid var(--ailov-bordo);
	background: none;
}

.woocommerce-account .woocommerce-orders-table tbody td {
	border-bottom: 1px solid var(--ailov-bordo);
	color: var(--ailov-scuro);
}

/* stato dell'ordine come pastiglia colorata */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-size: 0.875rem;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status mark,
.woocommerce-account .woocommerce-orders-table__cell-order-status .status {
	display: inline-block;
	padding: 5px 14px;
	border-radius: var(--ailov-pill);
	background-color: var(--ailov-verde-chiaro);
	color: #3f5227;
	font-weight: 500;
}

.woocommerce-account .woocommerce-Address {
	border: 1px solid var(--ailov-bordo);
	border-radius: var(--ailov-radius-card);
	padding: clamp(18px, 2.2vw, 26px);
	background-color: #fff;
}

.woocommerce-account .woocommerce-Address-title h3 {
	font-family: var(--ailov-serif);
	font-weight: 700;
}

/* modulo di accesso */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	border: 1px solid var(--ailov-bordo);
	border-radius: var(--ailov-radius-card);
	padding: clamp(20px, 2.6vw, 32px);
	background-color: #fff;
}

body.woocommerce-account .woocommerce button.woocommerce-form-login__submit,
body.woocommerce-account .woocommerce button.woocommerce-Button,
body.woocommerce-account .woocommerce a.woocommerce-Button,
body.woocommerce-account .woocommerce button.button {
	background-color: var(--ailov-scuro) !important;
	color: #fff !important;
	border-radius: var(--ailov-pill) !important;
	text-transform: none !important;
	font-weight: 500 !important;
}

body.woocommerce-account .woocommerce button.woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce button.woocommerce-Button:hover,
body.woocommerce-account .woocommerce button.button:hover {
	background-color: var(--ailov-scuro-hover) !important;
}

/* ==========================================================================
   29. PAGINA DI CONFERMA ORDINE (riscritta in Fase 11)
   ==========================================================================
   La prima stesura fu scritta senza poterla vedere: il commento di allora
   diceva che la pagina era raggiungibile solo dopo un ordine reale, mai
   creato in locale. Con il primo ordine di collaudo e' emerso che quelle
   regole sbagliavano quattro cose:

     - i riquadri erano centrati con `margin: auto` e larghi 640px, mentre
       titolo, percorso e striscia del riepilogo stanno a sinistra: il
       contenuto partiva da 433px invece che da 108, disallineato con tutto
       il resto della pagina;
     - i due indirizzi finivano uno sotto l'altro invece che affiancati;
     - la scheda degli indirizzi si afflosciava a riquadro vuoto, con i
       titoli che le uscivano fuori: WooCommerce dispone le due colonne con
       dei float, che senza un contesto di formattazione escono dal genitore
       e ne azzerano l'altezza. Usando una griglia il problema sparisce alla
       radice, senza clearfix;
     - il messaggio di ringraziamento era grande come un titolo e centrato,
       quindi in concorrenza con l'H1 della pagina.

   Impianto: tutto allineato al bordo sinistro del contenuto, come sul resto
   del sito.                                                                 */

/* --- il ringraziamento fa da sottotitolo, non da secondo titolo ---------- */

.woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0 0 clamp(24px, 3vw, 36px);
	padding: 0;
	font-family: var(--ailov-sans);
	font-size: 1.125rem;
	line-height: 1.5;
	font-weight: 400;
	color: var(--ailov-grigio-testo);
	text-align: left;
	background: none;
	border: 0;
}

/* --- coordinate per il bonifico: e' l'informazione piu' urgente della
       pagina, quindi sta in alto e si distingue -------------------------- */

.woocommerce-order .woocommerce-bacs-bank-details {
	margin: 0 0 clamp(24px, 3vw, 36px);
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--ailov-verde);
	border-left-width: 4px;
	border-radius: var(--ailov-radius-card);
	background-color: var(--ailov-verde-chiaro);
}

.woocommerce-order .woocommerce-bacs-bank-details .wc-bacs-bank-details-heading {
	margin: 0 0 12px;
	font-family: var(--ailov-serif);
	font-size: 1.25rem;
	color: var(--ailov-scuro);
}

.woocommerce-order .woocommerce-bacs-bank-details ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-order .woocommerce-bacs-bank-details li {
	margin: 0 0 6px;
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	color: var(--ailov-scuro);
}

/* --- la striscia del riepilogo: numero, data, totale, pagamento --------- */

.woocommerce-order .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: flex-start;
	margin: 0 0 clamp(28px, 3.4vw, 44px);
	padding: 0;
	border: 1px solid var(--ailov-bordo);
	border-radius: var(--ailov-radius-card);
	list-style: none;
	overflow: hidden;
	width: fit-content;
	max-width: 100%;
}

.woocommerce-order .woocommerce-order-overview li {
	margin: 0;
	padding: 16px clamp(16px, 2.4vw, 30px);
	border-right: 1px solid var(--ailov-bordo);
	font-family: var(--ailov-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ailov-grigio-testo);
	text-align: left;
}

.woocommerce-order .woocommerce-order-overview li:last-child {
	border-right: none;
}

.woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-family: var(--ailov-serif);
	font-size: 1.0625rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ailov-scuro);
}

/* --- le due schede: dettagli e indirizzi -------------------------------- */

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
	max-width: none;
	margin: 0 0 clamp(24px, 3vw, 36px);
	border: 1px solid var(--ailov-bordo);
	border-radius: var(--ailov-radius-card);
	padding: clamp(20px, 2.6vw, 32px);
}

.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-customer-details h2 {
	margin: 0 0 clamp(16px, 2vw, 22px);
	font-family: var(--ailov-serif);
	font-size: clamp(1.375rem, 1.9vw, 1.75rem);
	line-height: 1.2;
	color: var(--ailov-scuro);
}

.woocommerce-order .woocommerce-table--order-details {
	width: 100%;
	margin: 0;
}

/*
 * Le due colonne degli indirizzi.
 *
 * WooCommerce marca la sezione come `.col2-set` e le da' `float: left`. Un
 * elemento flottante non concorre all'altezza del genitore: la scheda che lo
 * contiene restava alta 66px contro i 531 del contenuto, cioe' un riquadro
 * vuoto con il testo che gli usciva sotto. Il float la restringeva anche a
 * 579px invece di occupare tutta la scheda.
 *
 * Si toglie quindi il float e si passa a una griglia. L'ordine delle due
 * colonne va imposto: lasciata a se stessa la disposizione automatica metteva
 * la fatturazione a destra e la spedizione a sinistra, al contrario di come
 * WooCommerce le scrive nel markup.
 */
.woocommerce-order .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 40px);
	margin: 0;
	float: none;
	width: 100%;
	max-width: none;
}

.woocommerce-order .woocommerce-column--billing-address {
	order: 1;
}

.woocommerce-order .woocommerce-column--shipping-address {
	order: 2;
}

.woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

.woocommerce-order .woocommerce-columns--addresses .woocommerce-column h2 {
	font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
	margin-bottom: 12px;
}

.woocommerce-order .woocommerce-customer-details address {
	padding: clamp(14px, 1.6vw, 18px);
	border: 1px solid var(--ailov-bordo);
	border-radius: 12px;
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.6;
	color: var(--ailov-scuro);
}

@media (min-width: 768px) {
	.woocommerce-order .woocommerce-columns--addresses {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   30. RESPONSIVE DELLE SEZIONI 20-29
   ========================================================================== */

@media (max-width: 782px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 22px;
	}

	.single-product form.cart {
		gap: 10px;
	}

	.single-product .single_add_to_cart_button {
		flex: 1 1 auto;
	}

	.woocommerce-order .woocommerce-order-overview {
		width: 100%;
	}

	.woocommerce-order .woocommerce-order-overview li {
		flex: 1 1 50%;
		border-bottom: 1px solid var(--ailov-bordo);
	}

	/* le tabelle non devono allargare la pagina: scorrono nel proprio riquadro */
	.woocommerce-account .woocommerce-orders-table,
	.woocommerce-account .woocommerce-table--order-details {
		display: block;
		overflow-x: auto;
	}
}

@media (max-width: 560px) {
	.ailov-breadcrumb {
		font-size: 0.8125rem;
	}

	.single-product .flex-control-thumbs li {
		width: 60px;
	}
}

/* --- Allineamento al riferimento: titoli di pagina e riepilogo -------------
   Nel riferimento i titoli di carrello, checkout e account sono scuri, non
   arancioni: l'arancione resta al marchio e alla Home. Il titolo del riepilogo
   carrello, che WooCommerce rende in maiuscolo, torna in tondo serif.        */

.woocommerce-cart .ailov-wc-title,
.woocommerce-checkout .ailov-wc-title,
.woocommerce-account .ailov-wc-title {
	color: var(--ailov-scuro);
}

.wc-block-cart .wc-block-cart__totals-title,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-checkout .wc-block-components-checkout-order-summary__title,
.wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--ailov-serif) !important;
	font-weight: 700 !important;
	font-size: 1.375rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ailov-scuro) !important;
}

/* nel riferimento anche i valori dei totali sono scuri, non arancioni:
   vale sia per il carrello sia per il riepilogo del checkout */
.wc-block-cart .wc-block-components-totals-item__value,
.wc-block-checkout .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value {
	color: var(--ailov-scuro) !important;
}

/* ==========================================================================
   31. CARRELLO — PARITA' CON IL RIFERIMENTO VISIVO (Fase 09-A)
   ==========================================================================
   Il riferimento mostra una tabella carrello a colonne affiancate
   (prodotto | prezzo | quantita' | totale riga). Il carrello a blocchi di
   WooCommerce impila invece prezzo e quantita' dentro un'unica cella
   "Dettagli", larga e quasi vuota, con il totale riga isolato a destra.

   La struttura HTML dei blocchi non e' modificabile da tema senza toccare
   WooCommerce, ma le celle contengono gia' gli elementi giusti come figli
   diretti: basta quindi ridisporli con una griglia, senza aggiungere,
   togliere o falsificare alcun dato. Riga e intestazione usano le stesse
   tracce, cosi' le colonne restano allineate.

   La griglia parte da 1100px: sotto quella soglia lo spazio non basta per
   quattro colonne e resta valido l'impilamento nativo di WooCommerce.       */

@media (min-width: 1100px) {

	.woocommerce-cart .wc-block-cart-items,
	.woocommerce-cart .wc-block-cart-items thead,
	.woocommerce-cart .wc-block-cart-items tbody {
		display: block;
	}

	.woocommerce-cart .wc-block-cart-items__header,
	.woocommerce-cart .wc-block-cart-items__row {
		display: grid;
		/* immagine | nome | prezzo | quantita' | totale riga */
		grid-template-columns: 96px minmax(120px, 1fr) 96px 136px 104px;
		column-gap: 16px;
		align-items: center;
	}

	/* --- intestazione: quattro etichette sopra le rispettive colonne ------ */

	.woocommerce-cart .wc-block-cart-items__header .wc-block-cart-items__header-image {
		grid-column: 1 / 3;
		width: auto;
	}

	.woocommerce-cart .wc-block-cart-items__header-product {
		grid-column: 3 / 5;
		display: grid;
		grid-template-columns: 96px 136px;
		column-gap: 16px;
		align-items: center;
	}

	/*
	 * La cella centrale dell'intestazione contiene solo "Dettagli" riservato
	 * ai lettori di schermo: e' quindi visivamente vuota. Le due etichette che
	 * la riempiono sono decorative e si aggiungono a quel testo, non lo
	 * sostituiscono: la struttura letta dalle tecnologie assistive resta
	 * quella originale di WooCommerce.
	 *
	 * Il testo delle due etichette non e' scritto qui: arriva da stringhe
	 * traducibili del tema figlio (vedi sezione 32 e functions.php).
	 */

	.woocommerce-cart .wc-block-cart-items__header-total {
		grid-column: 5;
		text-align: right;
	}

	/* --- riga prodotto ---------------------------------------------------- */

	.woocommerce-cart .wc-block-cart-item__image {
		grid-column: 1;
	}

	.woocommerce-cart .wc-block-cart-item__product {
		grid-column: 2 / 5;
	}

	/*
	 * Stesse tracce dell'intestazione, cosi' le colonne combaciano.
	 * WooCommerce impone qui display:flex con priorita' maggiore: la griglia
	 * va quindi dichiarata in modo esplicito.
	 */
	.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__wrap {
		display: grid !important;
		grid-template-columns: minmax(120px, 1fr) 96px 136px;
		/* la scorciatoia gap serve a vincere quella di WooCommerce, che
		   altrimenti riduce lo spazio a 4px e disallinea le colonne */
		column-gap: 16px !important;
		row-gap: 6px;
		align-items: center;
	}

	.woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-name {
		grid-column: 1;
	}

	.woocommerce-cart .wc-block-cart-item__prices {
		grid-column: 2;
		justify-content: flex-start;
	}

	.woocommerce-cart .wc-block-cart-item__quantity {
		grid-column: 3;
		grid-row: 1;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
	}

	/*
	 * Il contenitore dei dati aggiuntivi (varianti, e per questi prodotti la
	 * sola descrizione, qui nascosta) va vincolato sotto al nome: senza
	 * vincolo il posizionamento automatico lo mette accanto al prezzo e
	 * spinge la quantita' a capo.
	 */
	.woocommerce-cart .wc-block-components-product-metadata {
		grid-column: 1;
		grid-row: 2;
	}

	/*
	 * I separatori appartengono alla riga, non alle singole celle: con la
	 * griglia i bordi di cella disegnano segmenti staccati.
	 */
	.woocommerce-cart .wc-block-cart-items__header th,
	.woocommerce-cart .wc-block-cart-items__row td {
		border-top: 0;
		border-bottom: 0;
	}

	.woocommerce-cart .wc-block-cart-item__total {
		grid-column: 5;
		display: flex;
		justify-content: flex-end;
	}
}

/*
 * Nel riferimento sotto il nome non compare la descrizione del prodotto ma il
 * codice articolo, che oggi non esiste (nessuno dei due prodotti ha SKU). La
 * descrizione lunga, ripetuta dalla scheda prodotto, allunga molto le righe e
 * non e' presente nel riferimento: viene nascosta nel solo carrello. Il dato
 * resta nel database e sulla scheda prodotto.
 */
.woocommerce-cart .wc-block-components-product-metadata__description {
	display: none;
}

/* immagine quadrata come nel riferimento, anche con il segnaposto WooCommerce */
.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__image img {
	width: 96px !important;
	height: 96px;
	max-width: 96px;
	object-fit: cover !important;
	border-radius: 12px;
	background-color: var(--ailov-pesca);
}

/* intestazione colonne: piu' leggibile e distanziata dalla prima riga */
.woocommerce-cart .wc-block-cart-items__header th {
	padding-bottom: 12px;
	vertical-align: middle;
}

/* nome prodotto: dimensione del riferimento, non quella dei titoli di pagina */
.woocommerce-cart .wc-block-components-product-name {
	font-size: 1.0625rem !important;
	line-height: 1.35;
}

/* pannello dei codici promozionali: riga bordata, coerente con la scheda */
.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-family: var(--ailov-sans);
	font-weight: 500;
	color: var(--ailov-scuro);
}

.woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	border-radius: var(--ailov-pill) !important;
}

.woocommerce-cart .wc-block-components-totals-coupon__button {
	border-radius: var(--ailov-pill) !important;
}

/* pulsante principale: larghezza piena e respiro, come nel riferimento */
.woocommerce-cart .wc-block-cart__submit-button {
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 1rem !important;
}

/* ==========================================================================
   32. CONTENUTI GESTIBILI DAL CLIENTE (Fase 09-B)
   ==========================================================================
   Nessun testo commerciale in questo foglio di stile: qui c'e' solo la veste
   grafica. I testi arrivano dalle opzioni AILOV (AILOV >
   "AILOV - Barra e carrello").

   La barra promozionale e' un elemento globale e sta in ailov-globale.css,
   che si carica su tutte le pagine: qui resterebbe grigia sulla Home.       */

/* --- note del carrello scritte dal cliente ------------------------------- */

/*
 * Il carrello di WooCommerce 11 e' disegnato in JavaScript e non offre un
 * punto di aggancio dentro il riquadro del riepilogo. Le note vengono quindi
 * stampate subito sotto quel riquadro e allineate alla stessa colonna, cosi'
 * da leggersi come una sua continuazione.
 */
.woocommerce-cart .ailov-carrello-nota {
	display: block;
	margin-top: 14px;
}

/*
 * L'involucro porta la classe alignwide, la stessa del blocco carrello, quindi
 * ha esattamente la sua larghezza. Il 35% qui sotto si calcola su di esso e
 * coincide percio' con la colonna del riepilogo, senza misure da tenere
 * allineate a mano.
 */
@media (min-width: 1000px) {
	.woocommerce-cart .ailov-carrello-nota {
		width: 35%;
		margin-left: auto;
		margin-top: -18px;
	}
}

.woocommerce-cart .ailov-carrello-nota__riga {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--ailov-bordo);
	border-radius: var(--ailov-radius-card);
	padding: 14px clamp(20px, 2.4vw, 30px);
	font-family: var(--ailov-sans);
	color: var(--ailov-grigio-testo);
}

.woocommerce-cart .ailov-carrello-nota__valore {
	color: var(--ailov-scuro);
	font-weight: 500;
	text-align: right;
}

.woocommerce-cart .ailov-carrello-nota__microcopy {
	margin: 10px 0 0;
	font-family: var(--ailov-sans);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--ailov-grigio-testo);
	text-align: center;
}

/* --- etichette delle colonne del carrello -------------------------------- */

/*
 * Le due etichette aggiunte nella sezione 31 non sono piu' scritte qui: il
 * testo arriva da stringhe traducibili del tema figlio, passate come
 * proprieta' CSS. Il valore di ripiego serve solo se quella regola non
 * venisse stampata.
 */
@media (min-width: 1100px) {
	.woocommerce-cart .wc-block-cart-items__header-product::before {
		content: var(--ailov-etichetta-prezzo, 'Prezzo');
	}

	.woocommerce-cart .wc-block-cart-items__header-product::after {
		content: var(--ailov-etichetta-quantita, 'Quantit\0000e0');
	}
}

/* ==========================================================================
   33. SCHEDA PRODOTTO: VALUTAZIONE, PREZZO, DISPONIBILITA', QUANTITA'
   ==========================================================================
   Fase 09-D. Nessun contenuto qui: solo la veste. Stelle, numero di
   recensioni, prezzo unitario, condizioni di spedizione e disponibilita'
   arrivano tutti da dati reali.                                             */

.single-product .summary {
	--ailov-stelle: #c9a227;
	/* verde e rosso scelti misurando il contrasto su bianco: 4,82:1 e 5,44:1,
	   entrambi sopra la soglia 4,5:1. Il verde del marchio (#6f8f3f) e il
	   verde piu' chiaro non la superano, e qui si tratta di testo. */
	--ailov-verde-ok: #45801f;
	--ailov-rosso-ko: #c0392b;
}

/* --- valutazione sotto il titolo ----------------------------------------- */

.single-product .ailov-valutazione {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 18px;
}

.single-product .ailov-valutazione .star-rating {
	float: none !important;
	margin: 0 !important;
	font-size: 1rem;
	line-height: 1;
	color: var(--ailov-stelle);
}

/* le stelle vuote restano visibili, in tono tenue: cosi' si legge che la
   valutazione e' zero, e non che manca il componente */
.single-product .ailov-valutazione .star-rating::before {
	color: rgba(201, 162, 39, 0.42);
}

.single-product .ailov-valutazione__conteggio {
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	color: var(--ailov-grigio-testo, #6b675e);
	text-decoration: none;
}

.single-product .ailov-valutazione__conteggio:hover,
.single-product .ailov-valutazione__conteggio:focus-visible {
	text-decoration: underline;
	color: var(--ailov-scuro, #33302b);
}

/* --- prezzo e condizioni sulla stessa riga ------------------------------- */

.single-product .ailov-prezzo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 10px;
}

.single-product .ailov-prezzo .price {
	margin: 0 !important;
	line-height: 1.1;
}

.single-product .ailov-prezzo__meta {
	margin: 0 !important;
	font-family: var(--ailov-sans);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ailov-grigio-testo, #6b675e);
}

.single-product .ailov-prezzo__sep {
	margin: 0 0.45em;
	opacity: 0.6;
}

/* --- disponibilita' ------------------------------------------------------ */

.single-product .stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px !important;
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* il pallino accompagna il colore: chi non distingue verde e rosso legge
   comunque la parola, e il pallino aiuta a trovarla */
.single-product .stock::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: currentColor;
	flex: 0 0 auto;
}

.single-product .stock.in-stock {
	color: var(--ailov-verde-ok) !important;
}

.single-product .stock.out-of-stock,
.single-product .stock.available-on-backorder {
	color: var(--ailov-rosso-ko) !important;
}

/* --- quantita' a pillola, come nel carrello ------------------------------ */

.single-product form.cart .quantity.ailov-qta,
.woocommerce-cart .quantity.ailov-qta {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ailov-bordo, #e6e2da);
	border-radius: var(--ailov-pill, 999px);
	background-color: #fff;
	overflow: hidden;
}

.ailov-qta__passo {
	appearance: none;
	background: none;
	border: 0;
	width: 40px;
	height: 44px;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--ailov-scuro, #33302b);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ailov-qta__passo:hover {
	background-color: var(--ailov-grey, #f5f5f5);
}

.ailov-qta__passo:focus-visible {
	outline: 3px solid var(--ailov-scuro, #33302b);
	outline-offset: -3px;
}

.single-product form.cart .quantity.ailov-qta input.qty,
.woocommerce-cart .quantity.ailov-qta input.qty {
	width: 44px !important;
	min-width: 0;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	text-align: center;
	font-family: var(--ailov-sans) !important;
	font-size: 1rem !important;
	color: var(--ailov-scuro, #33302b) !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
}

/* le frecce native del campo numerico duplicherebbero i due pulsanti */
.single-product form.cart .quantity.ailov-qta input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity.ailov-qta input.qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity.ailov-qta input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity.ailov-qta input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- stelle del modulo recensione ----------------------------------------
   Le stelle da cliccare erano arancioni, quelle di lettura sotto al titolo
   oro: due colori diversi per la stessa cosa sulla stessa pagina. Qui si
   allineano a quelle di lettura, che riprendono il riferimento visivo.
   Il colore vive nella stessa proprieta', cosi' se ne cambia uno solo.       */

.single-product .comment-form-rating .stars a,
.single-product .comment-form-rating .stars a::before,
.single-product .comment-form-rating .stars.selected a.active,
.single-product .comment-form-rating .stars.selected a:not(.active) {
	color: var(--ailov-stelle, #c9a227) !important;
}

.single-product .comment-form-rating .stars:hover a,
.single-product .comment-form-rating .stars a:hover {
	color: var(--ailov-stelle, #c9a227) !important;
}

/* il riquadro di fuoco deve restare ben visibile: le stelle si scelgono
   anche da tastiera, con Tab per entrare e le frecce per spostarsi */
.single-product .comment-form-rating .stars a:focus-visible {
	outline: 3px solid var(--ailov-scuro, #33302b);
	outline-offset: 2px;
	border-radius: 3px;
}

/* la variabile e' dichiarata su .summary, che non contiene il modulo:
   va ripetuta qui perche' il modulo vive nelle schede sotto al prodotto */
.single-product .comment-form-rating {
	--ailov-stelle: #c9a227;
}

/* ==========================================================================
   34. GALLERIA PRODOTTO: MINIATURE IN COLONNA A SINISTRA
   ==========================================================================
   Fase 09-G. Il riferimento mostra le miniature incolonnate a sinistra
   dell'immagine grande, non in riga sotto di essa.

   WooCommerce usa FlexSlider, che misura la larghezza del riquadro e la
   scrive negli stili in linea delle diapositive. Il foglio di stile viene
   applicato prima che quel calcolo avvenga, quindi FlexSlider misura gia'
   il riquadro ristretto e le larghezze restano coerenti. Non serve
   sostituire alcun template.

   Sotto i 768px le miniature tornano in riga sotto l'immagine: in colonna
   toglierebbero all'immagine grande larghezza che li' non avanza.          */

@media (min-width: 768px) {

	.single-product .woocommerce-product-gallery {
		/*
		 * La miniatura e' una frazione della galleria, non una misura fissa:
		 * cosi' l'altezza della colonna resta vicina a quella dell'immagine
		 * a ogni larghezza. Con una misura fissa, a 1024px la colonna
		 * sporgeva di una novantina di pixel sotto l'immagine.
		 */
		--ailov-miniatura: clamp(56px, 16%, 96px);
		--ailov-galleria-spazio: 14px;

		display: flex;
		align-items: flex-start;
		gap: var(--ailov-galleria-spazio);
	}

	/* l'icona di ingrandimento e' posizionata in assoluto: resta fuori dalla
	   disposizione e non va considerata */

	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		order: 1;
		flex: 0 0 var(--ailov-miniatura);
		display: flex;
		flex-direction: column;
		gap: var(--ailov-galleria-spazio);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.single-product .woocommerce-product-gallery .flex-viewport {
		order: 2;
		/* min-width a zero: senza, il riquadro non si stringe sotto la
		   larghezza del suo contenuto e la colonna sborda */
		flex: 1 1 auto;
		min-width: 0;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}
}

/* --- veste delle miniature e dell'immagine grande, a ogni larghezza ------ */

.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid var(--ailov-bordo, #e6e2da);
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--ailov-verde, #6f8f3f);
}

/* la miniatura in uso si riconosce dal bordo, non solo dall'opacita': un
   bordo si vede anche senza distinguere i colori */
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img[aria-current='true'] {
	border-color: var(--ailov-verde, #6f8f3f);
	opacity: 1;
}

/*
 * Gli angoli arrotondati vanno messi sul riquadro che ritaglia, non solo
 * sull'immagine: sopra l'immagine WooCommerce sovrappone quella
 * dell'ingrandimento, che coprirebbe gli angoli.
 */
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
	border-radius: 12px;
	overflow: hidden;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	border-radius: 12px;
	display: block;
}


/* ==========================================================================
   35. ELENCO PRODOTTI: CARD PIU' VICINE AL RIFERIMENTO (Fase 09-S)
   ==========================================================================
   Il riferimento mostra due card ampie, con la fotografia grande ad angoli
   arrotondati, il titolo sotto, il prezzo e il pulsante di acquisto. Le
   differenze rispetto a com'erano:

   1. Le card restavano strette. La griglia usava `auto-fill`, che tiene in
      piedi anche le colonne vuote: con due soli prodotti restavano quattro
      colonne da 276px e le card occupavano meta' riga. Con `auto-fit` le
      colonne vuote si ritirano e i due prodotti si prendono tutta la
      larghezza.
   2. Le stelle erano nere, minuscole e attaccate al titolo, senza rientro.
   3. Il pulsante di acquisto era nascosto dal tema.                         */

.woocommerce ul.products {
	/* auto-fit al posto di auto-fill: e' la differenza fra due card strette e
	   due card larghe quando i prodotti sono pochi */
	grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 22vw, 340px), 1fr));
}

/* la card perde fondo e ombra: nel riferimento e' la fotografia a reggere
   tutto, senza contorno */
.woocommerce ul.products li.product {
	background-color: transparent;
	box-shadow: none;
	overflow: visible;
	padding-bottom: 0 !important;
}

.woocommerce ul.products li.product:hover {
	transform: none;
	box-shadow: none;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	aspect-ratio: 3 / 2;
	border-radius: 14px !important;
	margin-bottom: clamp(14px, 1.4vw, 18px) !important;
}

.woocommerce ul.products li.product:hover a img {
	filter: brightness(0.97);
}

/* senza il fondo della card il rientro laterale non serve piu' */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating {
	padding-inline: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-bottom: 4px !important;
	color: var(--ailov-scuro, #33302b) !important;
}

/* --- le stelle ----------------------------------------------------------
   Erano nere, alte 14px e senza spazio attorno. Ora prendono l'oro gia' usato
   sulla scheda prodotto, con le stelle vuote in tono tenue: cosi' si legge se
   la valutazione e' bassa, invece di sembrare che manchi qualcosa.          */

.woocommerce ul.products li.product .star-rating {
	float: none !important;
	margin: 2px 0 10px !important;
	font-size: 0.95rem;
	line-height: 1;
	height: 1em;
	width: 5.6em;
	color: var(--ailov-stelle, #c9a227);
}

.woocommerce ul.products li.product .star-rating::before {
	color: rgba(201, 162, 39, 0.42);
}

.woocommerce ul.products li.product .price {
	font-family: var(--ailov-sans) !important;
	color: var(--ailov-scuro, #33302b) !important;
}

/* --- il pulsante di acquisto -------------------------------------------
   Il tema lo nasconde nell'elenco. Il riferimento lo mostra, quindi torna
   visibile: da qui si aggiunge al carrello senza passare dalla scheda.     */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: clamp(12px, 1.4vw, 16px) 0 0 !important;
	padding: 12px 26px !important;
	background-color: var(--ailov-scuro, #33302b) !important;
	color: #fff !important;
	border-radius: var(--ailov-pill) !important;
	font-family: var(--ailov-sans) !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible,
.woocommerce ul.products li.product .added_to_cart:hover,
.woocommerce ul.products li.product .added_to_cart:focus-visible {
	background-color: var(--ailov-scuro-hover, #4a463f) !important;
	color: #fff !important;
}

/* il collegamento "Visualizza carrello" che compare dopo l'aggiunta e'
   un'azione secondaria: resta leggibile ma non compete con il pulsante */
.woocommerce ul.products li.product .added_to_cart {
	background-color: transparent !important;
	color: var(--ailov-scuro, #33302b) !important;
	padding: 12px 0 !important;
	text-decoration: underline;
}

.woocommerce ul.products li.product .added_to_cart:hover {
	background-color: transparent !important;
	color: var(--ailov-accent-hover, #e25a00) !important;
}

/* ==========================================================================
   36. TENDINE DI SCELTA LEGGIBILI (Fase 09-T)
   ==========================================================================
   Il tema padre, alla riga 792 del suo style.css, colora le voci delle
   tendine cosi':

       .woocommerce select option { color: inherit; background-color: #320a28 }

   Un fondo prugna scuro con il testo che eredita il colore del contesto, cioe'
   scuro: aprendo la tendina dell'ordinamento le voci risultavano nere su
   viola, praticamente illeggibili. Il campo chiuso invece si vedeva bene, ed
   e' il motivo per cui il difetto era passato inosservato.

   Il tema padre non si tocca: qui si riportano le voci a fondo chiaro e testo
   scuro. `color-scheme: light` serve a chiedere al sistema operativo di
   disegnare la tendina in chiaro anche a chi usa il tema scuro.             */

.woocommerce select,
.woocommerce-page select {
	color-scheme: light;
}

.woocommerce select option,
.woocommerce-page select option {
	background-color: #ffffff;
	color: var(--ailov-scuro, #33302b);
}

/* la voce in evidenza resta riconoscibile anche dove il sistema non impone
   il proprio colore di selezione */
.woocommerce select option:checked,
.woocommerce-page select option:checked {
	background-color: var(--ailov-verde-chiaro, #e4ecd8);
	color: var(--ailov-scuro, #33302b);
}

/* ==========================================================================
   37. PRODOTTI CORRELATI E SUGGERITI (Fase 09-U)
   ==========================================================================
   Nell'elenco principale dello Shop `auto-fit` e' quello che serve: con due
   soli prodotti ritira le colonne vuote e le card si prendono tutta la riga.

   Nelle sezioni secondarie fa il danno opposto. Il catalogo ha due prodotti,
   quindi sotto una scheda ne compare **uno solo** correlato: le colonne vuote
   si ritiravano e quell'unica card occupava l'intera larghezza, con una
   fotografia da 1224x816 pixel a 1440.

   Qui si torna quindi ad `auto-fill`, che le colonne vuote le tiene: la card
   resta della sua misura qualunque sia il numero di prodotti suggeriti. Le
   tracce sono anche piu' strette di quelle dell'elenco principale, perche'
   questa e' una fascia di servizio e non deve competere con la scheda.      */

.woocommerce .related ul.products,
.woocommerce .up-sells ul.products,
.woocommerce .upsells ul.products,
.woocommerce .cross-sells ul.products {
	grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 20vw, 300px), 1fr));
}

/* una card sola non deve comunque allargarsi oltre misura */
.woocommerce .related ul.products li.product,
.woocommerce .up-sells ul.products li.product,
.woocommerce .upsells ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
	max-width: 420px;
}

/* ==========================================================================
   38. CHECKOUT: ARIA FRA ETICHETTA E VALORE (Fase 09-V)
   ==========================================================================
   I campi del checkout a blocchi tengono l'etichetta dentro al riquadro: fa
   da segnaposto quando il campo e' vuoto, e si rimpicciolisce salendo in alto
   quando viene compilato.

   Nella misura nativa di WooCommerce l'etichetta finisce a 24px dal bordo
   superiore e il valore comincia esattamente a 24px: **zero spazio fra le
   due**. Verificato che e' il comportamento di WooCommerce e non un effetto
   di questo foglio: togliendo i fogli AILOV la misura non cambia.

   Il campo cresce quindi da 50 a 58px e il valore scende di sei pixel. Ne
   guadagnano la leggibilita' e anche l'area toccabile su schermo piccolo.   */

.wc-block-components-text-input input,
.wc-block-components-combobox input {
	height: 58px !important;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-combobox.is-active input {
	padding-top: 30px !important;
	padding-bottom: 8px !important;
}

/* a campo vuoto l'etichetta fa da segnaposto e va centrata sulla nuova
   altezza, altrimenti resterebbe alta come in un campo da 50px */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
	top: 50%;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-combobox.is-active label {
	top: 6px;
}


/* ==========================================================================
   39. CARRELLO E CHECKOUT DENTRO LA COLONNA (Fase 09-W)
   ==========================================================================
   I blocchi di carrello e checkout hanno la classe `alignwide`, che li allarga
   di 54px per lato rispetto alla colonna. Il loro titolo e il percorso di
   navigazione restano pero' nella colonna: il contenuto partiva quindi da 54
   e il titolo da 108.

   Qui rientrano nella colonna, cosi' percorso, titolo e contenuto condividono
   lo stesso bordo sinistro. La tabella del carrello passa da 1332 a 1224px.

   Solo sopra i 1190px: sotto, `alignwide` non allarga nulla e i tre elementi
   erano gia' a filo.                                                        */

@media (min-width: 1190px) {

	.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
	.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide,
	.woocommerce-cart .ailov-carrello-nota-cornice.alignwide {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* ==========================================================================
   40. PAGINA ACCEDI SU DUE COLONNE (Fase 09-Y)
   ==========================================================================
   Il riferimento visivo mostra il modulo a sinistra, con una frase di
   presentazione sotto al titolo, e una fotografia a destra ad angoli
   arrotondati.

   Senza fotografia impostata la seconda colonna non esiste e la pagina resta
   a una colonna: le regole qui sotto reggono entrambi i casi.               */

@media (min-width: 1000px) {
	.woocommerce-account .ailov-accedi--con-foto {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(32px, 4vw, 64px);
		align-items: start;
	}

	/*
	 * Con accesso e registrazione affiancati i moduli sono due dentro la
	 * stessa meta' di pagina: misurati a 268px l'uno, con l'informativa sulla
	 * privacy che andava a capo ogni tre parole. La fotografia cede spazio,
	 * perche' qui a contare e' il modulo: da questa pagina passa ogni nuovo
	 * cliente.
	 */
	.woocommerce-account .ailov-accedi--con-foto.ailov-accedi--due-moduli {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	}

	/*
	 * Le due colonne le costruisce gia' WooCommerce, dentro #customer_login:
	 * `.u-column1` per l'accesso, `.u-column2` per la registrazione. Un primo
	 * tentativo aveva impaginato a griglia i figli di `.ailov-accedi__modulo`,
	 * che pero' sono cinque — titoli e moduli separati — e finivano appaiati
	 * a due a due, stretti a 154px. Si impagina il contenitore giusto.
	 *
	 * La griglia sostituisce anche il `float` che WooCommerce mette su
	 * `.col2-set`: lo stesso inciampo gia' incontrato nella Fase 11 sulla
	 * pagina di conferma ordine.
	 */
	.woocommerce-account .ailov-accedi--due-moduli #customer_login,
	.woocommerce-account .ailov-accedi--due-moduli:not(.ailov-accedi--con-foto) #customer_login {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(24px, 2.6vw, 40px);
		align-items: start;
	}

	.woocommerce-account .ailov-accedi--due-moduli #customer_login > .u-column1,
	.woocommerce-account .ailov-accedi--due-moduli #customer_login > .u-column2 {
		float: none;
		width: auto;
		margin: 0;
	}

	/*
	 * La colonna si dichiara, non si lascia indovinare: misurato, la
	 * disposizione automatica metteva l'accesso a destra e la registrazione a
	 * sinistra, al contrario di come stanno nel markup. Stessa lezione della
	 * Fase 11 sulla pagina di conferma ordine.
	 */
	.woocommerce-account .ailov-accedi--due-moduli #customer_login > .u-column1 {
		grid-column: 1;
	}

	.woocommerce-account .ailov-accedi--due-moduli #customer_login > .u-column2 {
		grid-column: 2;
	}

	.woocommerce-account .ailov-accedi--due-moduli .ailov-accedi__intro {
		max-width: 60ch;
	}

	/*
	 * Su schermi larghi due colonne a meta' pagina diventano campi lunghi
	 * quasi seicento pixel: si scrive un indirizzo email, non un tema. La
	 * griglia si ferma, e resta allineata a sinistra come il titolo.
	 */
	.woocommerce-account .ailov-accedi--due-moduli:not(.ailov-accedi--con-foto) #customer_login {
		max-width: 900px;
		column-gap: clamp(32px, 3.4vw, 56px);
	}
}

/*
 * Sotto i 1000px le colonne non esistono e i moduli si impilano: fra l'uno e
 * l'altro serve una separazione, o si leggono come un modulo solo lunghissimo.
 */
.woocommerce-account .ailov-accedi--due-moduli .woocommerce-form-register {
	margin-top: clamp(28px, 3vw, 40px);
}

@media (min-width: 1000px) {
	.woocommerce-account .ailov-accedi--due-moduli .woocommerce-form-register {
		margin-top: 0;
	}
}

/*
 * Senza fotografia il modulo resterebbe steso su tutta la larghezza del
 * contenitore: una riga di campi lunga oltre mille pixel e' scomoda da
 * leggere e da compilare, quindi si ferma a una misura ragionevole.
 */
.woocommerce-account .ailov-accedi:not(.ailov-accedi--con-foto) .ailov-accedi__modulo {
	max-width: 560px;
}

/*
 * Salvo quando i moduli sono due. Allora la larghezza non e' sprecata: la
 * occupano accesso e registrazione affiancati, e stringerli a 560px in due
 * significherebbe 260px l'uno, cioe' l'informativa sulla privacy che va a capo
 * ogni tre parole.
 */
.woocommerce-account .ailov-accedi--due-moduli:not(.ailov-accedi--con-foto) .ailov-accedi__modulo {
	max-width: none;
}

.woocommerce-account .ailov-accedi__intro {
	margin: 0 0 clamp(22px, 2.4vw, 32px);
	font-family: var(--ailov-sans);
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--ailov-grigio-testo, #6b675e);
	max-width: 46ch;
}

.woocommerce-account .ailov-accedi__figura {
	margin: 0;
}

/*
 * Proporzione orizzontale, unica a tutte le larghezze: il ritaglio scelto in
 * libreria resta lo stesso ovunque, senza sorprese fra desktop e telefono.
 *
 * 4:3 non e' una scelta estetica: a 1440 la colonna e' larga 583px, quindi la
 * foto risulta alta 437px contro i 445px del modulo accanto. Le due colonne
 * finiscono insieme. Con la proporzione verticale precedente la foto era alta
 * 778px e sbordava sotto al modulo di oltre trecento pixel.
 */
.woocommerce-account .ailov-accedi__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 18px;
}

@media (max-width: 999px) {
	.woocommerce-account .ailov-accedi__figura {
		margin-top: clamp(28px, 4vw, 40px);
	}
}

/* --- il modulo ----------------------------------------------------------
   Nel riferimento il titolo compare una volta sola. La pagina ha gia' il
   proprio H1: il secondo titolo, quello che WooCommerce stampa sopra al
   modulo, resta leggibile dai lettori di schermo ma non si vede due volte.  */

/*
 * Il secondo titolo e' figlio del contenitore aperto dall'aggancio, non del
 * modulo: WooCommerce lo stampa dopo l'apertura della colonna.
 */
.woocommerce-account .ailov-accedi__modulo > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Il selettore porta `form` davanti alla classe per pareggiare quello della
 * sezione 12, che con `form.login` imponeva un rientro di 32px: arrivando
 * dopo, a parita' di peso, questa prevale.
 *
 * Il modulo diventa una griglia a due colonne. Le prime due righe sono i
 * campi; nella terza stanno "Ricordami" a sinistra e "Password dimenticata?"
 * a destra; nella quarta il pulsante, a tutta larghezza.
 *
 * `display: contents` sul gruppo che WooCommerce chiama form-row fa si' che
 * i suoi figli diventino elementi della griglia del modulo: e' cio' che
 * permette di affiancare la casella al collegamento, che nel markup sono
 * lontani, senza sostituire il template.
 */
.woocommerce-account form.woocommerce-form-login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(12px, 2vw, 24px);
	align-items: center;
	max-width: none;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/*
 * Ogni elemento riceve la sua casella nella griglia. Senza collocazioni
 * esplicite il posizionamento automatico infilava il pulsante fra i due
 * campi, perche' "Ricordami" e il collegamento avevano una riga assegnata e
 * i campi no.
 *
 *   riga 1  campo utente          riga 3  Ricordami | Password dimenticata?
 *   riga 2  campo password        riga 4  pulsante, a tutta larghezza
 */
.woocommerce-account form.woocommerce-form-login > p.woocommerce-form-row:nth-of-type(1) {
	grid-area: 1 / 1 / 2 / 3;
}

.woocommerce-account form.woocommerce-form-login > p.woocommerce-form-row:nth-of-type(2) {
	grid-area: 2 / 1 / 3 / 3;
}

/*
 * `display: contents` fa uscire i figli di questo gruppo dal loro
 * contenitore e li rende elementi della griglia del modulo: e' cio' che
 * permette di affiancare "Ricordami" a "Password dimenticata?", che nel
 * markup di WooCommerce sono lontani, senza sostituire il template.
 */
.woocommerce-account form.woocommerce-form-login > p.form-row:not(.woocommerce-form-row) {
	display: contents;
}

.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme {
	grid-area: 3 / 1 / 4 / 2;
	justify-self: start;
	margin: 0 !important;
	font-weight: 400;
}

.woocommerce-account form.woocommerce-form-login > p.woocommerce-LostPassword {
	grid-area: 3 / 2 / 4 / 3;
	justify-self: end;
	margin: 0 !important;
	text-align: right;
}

.woocommerce-account form.woocommerce-form-login button.button {
	grid-area: 4 / 1 / 5 / 3;
}

.woocommerce-account form.woocommerce-form-login input.woocommerce-Input,
.woocommerce-account form.woocommerce-form-login .password-input {
	width: 100%;
}


.woocommerce-account .woocommerce-form-login label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ailov-scuro, #33302b);
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-row {
	margin-bottom: clamp(16px, 1.8vw, 22px);
}

.woocommerce-account .woocommerce-form-login button.button {
	width: 100%;
	margin: clamp(14px, 1.6vw, 20px) 0 0 !important;
	background-color: var(--ailov-scuro, #33302b) !important;
	color: #fff !important;
	border-radius: var(--ailov-pill, 999px) !important;
	padding: 15px 28px !important;
}

.woocommerce-account .woocommerce-form-login button.button:hover,
.woocommerce-account .woocommerce-form-login button.button:focus-visible {
	background-color: var(--ailov-scuro-hover, #4a463f) !important;
}

.woocommerce-account .woocommerce-LostPassword a {
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	color: var(--ailov-grigio-testo, #6b675e);
	text-decoration: none;
}

.woocommerce-account .woocommerce-LostPassword a:hover,
.woocommerce-account .woocommerce-LostPassword a:focus-visible {
	color: var(--ailov-scuro, #33302b);
	text-decoration: underline;
}

/* ==========================================================================
   41. IL RIEPILOGO DELLA CASSA: MENO ROBA NELLA COLONNA STRETTA (Fase 192)
   ==========================================================================
   Il committente, guardando la cassa: «non ti sembra un po' stretta e il testo
   che va diverse volte a capo?».

   Misurato renderizzando la cassa con tre confezioni dentro. La colonna NON e'
   stretta: 370px a 1440, che e' una larghezza normale per un riepilogo. E'
   stretto quello che ci sta dentro.

   La riga del prodotto e': miniatura da 48px, nome, prezzo unitario,
   **descrizione**, totale. Dei ~310px utili, al testo ne restavano poco piu'
   di cento.

   | larghezza | spazio per la descrizione | come si legge          |
   |-----------|---------------------------|------------------------|
   | 1440px    | ~120px                    | tre righe, compressa   |
   | 900px     | ~55px                     | una parola per riga, e |
   |           |                           | «organic» spezzato in  |
   |           |                           | «organi / c»           |

   A 900px smette di essere brutta e diventa sbagliata: una parola tagliata a
   meta' non e' una questione di gusto.

   LA DECISIONE ERA GIA' PRESA, A META'. La stessa descrizione era gia' stata
   nascosta nel carrello per questo identico motivo (sezione 36). Alla cassa
   era rimasta, e li' la colonna e' ancora piu' stretta. Non e' una scelta
   nuova: e' quella di allora, finita.

   E alla cassa serve ancora meno: il cliente ha gia' scelto. Un riepilogo
   risponde a tre domande - cosa, quanti, quanto - e la descrizione non
   risponde a nessuna. Il testo resta nel database e sulla scheda prodotto.   */

.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	display: none;
}

/* --------------------------------------------------------------------------
   Due prezzi arancioni nella stessa riga, e uno solo si paga.

   Sotto il nome compariva «18,00 €» - il prezzo di UNA confezione - con lo
   stesso colore acceso del totale «54,00 €» a destra. Due numeri diversi,
   stesso richiamo, stessa riga: si legge il primo e si crede di spendere
   diciotto euro.

   Il prezzo unitario resta, perche' serve a capire da dove viene il totale,
   ma smette di gridare: grigio e piu' piccolo. Quante confezioni siano lo
   dice gia' il contrassegno sulla miniatura.                                */

.woocommerce-checkout .wc-block-components-order-summary-item__individual-price,
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
	color: var(--ailov-grigio-testo) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
}

/* ==========================================================================
   42. LA COLONNA DEL RIEPILOGO, LARGA QUANTO BASTA (Fase 197)
   ==========================================================================
   WooCommerce 11.2.1 ha cambiato il modo di dimensionare la colonna del
   riepilogo: da una proporzione (35%) a una misura fissa (360px). Misurata
   sui pixel, la scheda che il cliente vede ne occupa 304 - e il nome del
   prodotto ci va a capo.

   Prima avevo provato due strade, e tutte e due misurate NON funzionavano:
   un minimo di larghezza (304px prima, 304 dopo) e un nome piu' piccolo (6px
   di differenza, cioe' la riga restava spezzata). Vengono dalla Fase 194 e
   stanno nel diario perche' non si ripetano.

   Quella che funziona e' allargare la colonna:

   | colonna | scheda | altezza |
   |---------|--------|---------|
   | normale | 304px  | 481px   |
   | 420px   | 364px  | 460px   |

   Ventuno pixel in meno di altezza sono una riga in meno: il nome sta su una
   riga sola. Al modulo restano sessanta pixel in meno, e a 1440 ne ha
   d'avanzo.

   PERCHE' `!important`: la misura di WooCommerce arriva anche da una query di
   contenitore, che vince sulla specificita' normale. E' l'unico modo di
   sovrascriverla senza toccare il loro codice.

   SOLO SOPRA I 1180px. Sotto, WooCommerce impila le due colonne da se' e
   questa regola non deve avere voce: a quelle larghezze la cassa ha gia' i
   suoi problemi (L-59), e allargare la colonna spingerebbe il modulo fuori.  */

@media (min-width: 1180px) {

	.woocommerce-checkout .wc-block-components-sidebar {
		flex-basis: 420px !important;
		width: 420px !important;
	}
}