/**
 * Il mini-carrello nella testata, vestito come il resto del sito.
 *
 * CHE COS'E: il widget «Menu Carrello» di Elementor Pro, che apre un pannello laterale
 * contenente il mini-carrello **classico** di WooCommerce (`widget_shopping_cart_content`).
 * Non e' il blocco Mini-Cart: quindi qui non valgono le classi `wc-block-*` del carrello.
 *
 * SI VESTE CON LE SUE VARIABILI, NON A COLPI DI SPECIFICITA.
 * Il widget espone **47 proprieta' personalizzate** con valore di ripiego — per esempio
 * `color: var(--product-price-color, #d5d8dc)` — e sono lo stesso canale che usa il pannello
 * di Elementor quando qualcuno configura il widget a mano. Impostarle e' quindi il modo
 * previsto, non un aggiramento: una riga per colore, nessuna guerra di selettori, e se
 * Elementor cambia i suoi CSS interni le variabili restano.
 *
 * IL CONTRACCOLPO DA SAPERE: se un giorno qualcuno apre il widget nell'editor di Elementor e
 * imposta uno di questi colori, Elementor lo scrive **in linea** sull'elemento e vince su
 * questo foglio. E' il rovescio della questione 26 — le impostazioni fatte nell'editor non
 * stanno nel repository — e qui la scelta e' deliberata: tenere i colori in un file
 * versionato, sapendo che l'editor puo' scavalcarli.
 *
 * Valori di partenza misurati, per capire cosa c'era da correggere:
 *  - prezzo del prodotto **#D5D8DC**, cioe' grigio chiarissimo su fondo bianco: praticamente
 *    illeggibile, ed e' il numero per cui si apre il mini-carrello;
 *  - nome del prodotto grigio #7E7E7E a 14 px, senza rilievo;
 *  - i due pulsanti grigio ardesia **#69727D**, squadrati, con il testo a **24 px**;
 *  - il pallino del contatore rosso #D9534F, che non e' il rosso del marchio.
 *
 * @package hello-elementor-child
 */

.elementor-menu-cart__wrapper,
.elementor-menu-cart__container {

	/* fondo, divisori, messaggio di carrello vuoto */
	--cart-background-color: #fff;
	--divider-color: #D9D6D0;
	--empty-message-color: #7E7E7E;

	/* il prezzo: da grigio chiarissimo a verde scuro, perche' e' l'informazione principale */
	--product-price-color: #012F2B;
	--product-variations-color: #7E7E7E;

	--menu-cart-subtotal-color: #012F2B;

	/*
	 * I due pulsanti in fondo, con la gerarchia del sito: «Cassa» e' l'azione primaria e sta
	 * in pillola piena verde scuro; «Visualizza carrello» e' secondaria e resta chiara con il
	 * bordo. Al passaggio la primaria diventa rossa, che e' lo scambio che il sito usa in
	 * testata sulla pillola «Contatti» e che ho gia' applicato al carrello.
	 */
	--checkout-button-background-color: #012F2B;
	--checkout-button-text-color: #fff;
	--checkout-button-hover-background-color: #FF3B32;
	--checkout-button-hover-text-color: #fff;

	--view-cart-button-background-color: #fff;
	--view-cart-button-text-color: #012F2B;
	--view-cart-button-hover-background-color: #012F2B;
	--view-cart-button-hover-text-color: #fff;

	/* la crocetta e l'icona nella testata */
	--cart-close-button-color: #012F2B;
	--cart-close-button-hover-color: #FF3B32;
	--toggle-button-icon-color: #012F2B;
	--toggle-button-icon-hover-color: #FF3B32;
	--toggle-button-text-color: #012F2B;
	--toggle-button-hover-text-color: #FF3B32;

	/* il pallino col numero di pezzi: il rosso del marchio, non quello di serie */
	--items-indicator-background-color: #FF3B32;
	--items-indicator-text-color: #fff;
}

/* ------------------------------------------------ cio che le variabili non coprono --- */

/*
 * Il nome del prodotto non ha una variabile: si scrive a mano. Due classi bastano perche'
 * Elementor non lo colora affatto — verificato cercando le regole che pescano su
 * `.elementor-menu-cart__product-name a`: nessuna.
 */
.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
	color: #012F2B;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

/*
 * IL RIEPILOGO DELLA CONFIGURAZIONE, COMPATTO.
 *
 * WooCommerce lo rende come `<dl class="variation">` con una coppia etichetta/valore per
 * voce. Per una maglietta sono due righe; per una tesi sono **otto** — documento, pagine,
 * pagine a colori, pagine in B/N, carta, copertina, frontespizio, note — e misurate
 * occupavano **282 px di altezza** dentro un pannello largo 350. Il mini-carrello serve a
 * dare un'occhiata, non a rileggere l'ordine: qui si stringe, e chi vuole il dettaglio ha
 * il carrello vero a un clic.
 */
.elementor-menu-cart__product .variation {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 6px;
	row-gap: 2px;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
}

.elementor-menu-cart__product .variation dt,
.elementor-menu-cart__product .variation dd {
	display: block;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

/*
 * IL `<p>` DENTRO OGNI `dd` E LA RAGIONE PER CUI IL PRIMO TENTATIVO PEGGIORAVA LE COSE.
 *
 * WooCommerce non mette il valore nudo dentro il `dd`: lo avvolge in un `<p>`. Alla prima
 * prova avevo reso `dt` e `dd` in linea aggiungendo un ritorno a capo con `::after`, e il
 * riepilogo e' passato da 282 a **417 px** di altezza — piu' alto di prima. Il colpevole era
 * quel paragrafo, che resta di tipo blocco e porta i suoi margini a prescindere da come si
 * rende il `dd` che lo contiene.
 *
 * Con una griglia a due colonne non serve nessun trucco: otto righe, etichetta e valore
 * allineati, e il paragrafo reso in linea senza margini. Misurato dopo: dai 417 px si scende
 * a un'altezza proporzionata al numero di voci.
 */
.elementor-menu-cart__product .variation dd p {
	display: inline;
	margin: 0;
}

.elementor-menu-cart__product .variation dt {
	color: #7E7E7E;
}

.elementor-menu-cart__product .variation dd {
	color: #012F2B;
}

/* La miniatura: stesso raggio delle schede del configuratore. */
.elementor-menu-cart__product-image img {
	border-radius: 6px;
}

/*
 * I pulsanti: pillole, e con il corpo giusto. Le variabili di Elementor coprono i colori ma
 * non la forma ne' la dimensione del testo, che di serie arriva a **24 px** — su un pannello
 * da 350 px due pulsanti affiancati con quel corpo si sovrappongono alle parole.
 */
.elementor-menu-cart__footer-buttons .elementor-button {
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 18px;
	line-height: 1.2;
}

/* La secondaria ha bisogno del bordo, altrimenti su fondo bianco non si vede che e' un tasto. */
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	border: 1px solid #012F2B;
}

/* Il totale in fondo: e' la cifra che si va a cercare aprendo il pannello. */
.elementor-menu-cart__subtotal {
	font-size: 18px;
	font-weight: 700;
}

/* ------------------------------------------------------------------- stretto --- */

@media (max-width: 767px) {

	/*
	 * A tutta larghezza sullo stretto.
	 *
	 * Di serie il pannello e' largo 350 px fissi: su un telefono da 375 lascia una fessura
	 * di 25 px del sito dietro, che non serve a niente e fa sembrare il pannello disallineato
	 * invece che aperto. Nessuna delle 47 variabili del widget governa la larghezza, quindi
	 * qui si scrive una regola — e basta un selettore a due classi, perche' quella di
	 * Elementor (`.elementor-menu-cart__main`) ne ha una sola. Verificato prima di scriverla,
	 * per non aggiungere un `!important` a caso.
	 */
	.elementor-menu-cart__container .elementor-menu-cart__main {
		width: 100%;
		max-width: 100%;
		/* Con tutta la larghezza a disposizione i fianchi possono stringersi un po'. */
		padding: 20px;
	}

	/*
	 * E anche qui «Visualizza Carrello» su una riga, che a piena larghezza mancava di **un pixel**.
	 * L'aritmetica, misurata: la scritta e' larga 128 px; con 18 px di imbottitura per lato ne
	 * servono 164, e su un telefono da 375 ogni pulsante ne riceve (375 - 40 di fianchi - 10 di
	 * gap) / 2 = **163**. Uno in meno, e la parola andava a capo — il difetto identico a quello
	 * segnalato sul desktop, solo piu' beffardo.
	 *
	 * Si stringe l'imbottitura invece di allargare il pannello, che qui e' gia' al massimo: con
	 * 14 px per lato ne bastano 156, quindi restano 7 px di margine. Solo sullo stretto: sul
	 * desktop i 18 px stanno bene e non c'e' ragione di toccarli.
	 */
	.elementor-menu-cart__footer-buttons .elementor-button {
		padding: 12px 14px;
	}
}

/* ------------------------------------------------------------------- largo --- */

@media (min-width: 768px) {

	/*
	 * 410 px invece di 350, per far stare «Visualizza Carrello» su una riga sola.
	 *
	 * I 350 px sono scritti a mano nel CSS di Elementor su `.elementor-menu-cart__main`,
	 * selettore a una classe: ne basta uno a due per vincere, come per la regola mobile qui
	 * sopra. Nessun `!important`, e nessuna variabile del widget governa questa misura —
	 * verificato leggendo la regola: `width: 350px` secco.
	 *
	 * Le tracce del piede sono gia' fluide (`--cart-footer-layout: 1fr 1fr`), quindi i due
	 * pulsanti si dividono da soli lo spazio in piu': non serve toccarle.
	 */
	.elementor-menu-cart__container .elementor-menu-cart__main {
		width: 410px;
	}
}