/* ==========================================================================
   AILOV — Stile globale degli elementi gestibili dal cliente
   ==========================================================================
   Creato nella Fase 09-B.

   Questo foglio si carica su TUTTE le pagine, Home compresa, perché la barra
   promozionale è un elemento globale: metterla nel foglio delle pagine
   WooCommerce la lascerebbe grigia sulla Home.

   Qui non c'è alcun testo commerciale. I testi arrivano dalle opzioni AILOV
   (AILOV → Personalizzazioni AILOV) e i colori arrivano
   dalle stesse opzioni come proprietà CSS, con un ripiego se il plugin delle
   opzioni non fosse attivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barra promozionale in cima al sito
   --------------------------------------------------------------------------
   Sta dentro l'header, che è a posizione fissa: è l'unico punto in cui può
   stare senza scorrere via insieme alla pagina.                             */

.header__topbar.ailov-barra {
	background-color: var(--ailov-barra-sfondo, #6f8f3f);
	color: var(--ailov-barra-testo, #fff);
	font-size: 0.9375rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
	padding: 10px 16px;
	text-align: center;
}

/*
 * Quando la barra segnala lo stato del negozio il colore non e' piu' una
 * scelta di gusto ma un'informazione, e viene dalla classe che il plugin
 * assegna leggendo la configurazione reale. Per questo qui e' fissato e non
 * passa dalla variabile modificabile dal pannello: un verde impostato a mano
 * su un negozio chiuso direbbe il falso.
 *
 * Contrasto misurato sul testo bianco: verde 4,75:1 e rosso 5,44:1, sopra la
 * soglia di 4,5:1 richiesta a questo corpo di testo.
 */
.header__topbar.ailov-barra--attivo {
	background-color: #5f7c35;
}

.header__topbar.ailov-barra--spento {
	background-color: #c0392b;
}

.ailov-barra__link {
	color: inherit;
	text-decoration: none;
}

.ailov-barra__link:hover,
.ailov-barra__link:focus-visible {
	text-decoration: underline;
}

.ailov-barra__sep {
	margin: 0 0.5em;
	opacity: 0.7;
}

/* su schermi stretti il testo si riduce, per restare su una riga sola */
@media (max-width: 560px) {
	.header__topbar.ailov-barra {
		font-size: 0.8125rem;
		padding: 9px 12px;
	}
}

/* --- la barra tocca il bordo superiore ------------------------------------
   Da 1190px in su il tema figlio stacca l'intestazione dal bordo di 44px
   (`body .header { top: 44px }`), cosi' che galleggi sopra la fotografia
   della Home. Con la barra accesa quel vuoto le sta sopra: la barra risulta
   sospesa a meta' aria e si incolla in alto solo dopo lo scorrimento.

   Qui l'intestazione parte gia' a filo, ma solo quando la barra c'e': se il
   cliente la spegne, il tema torna al suo aspetto galleggiante. In piu'
   sparisce lo scatto di 44px che finora si vedeva al primo scorrimento,
   perche' la posizione a riposo e quella scorrendo ora coincidono.

   Sotto i 1190px non serve nulla: li' l'intestazione e' gia' a top: 0.      */

@media (min-width: 1190px) {
	body.ailov-ha-barra .header {
		top: 0 !important;
	}

	/* con la barra di amministrazione di WordPress si parte sotto di essa */
	body.ailov-ha-barra.admin-bar .header {
		top: 32px !important;
	}
}

/* --- l'intestazione resta staccata dalla barra, poi si aggancia -----------
   A riposo la barra sta in alto e il menu galleggia piu' in basso; scorrendo,
   il menu risale e si accosta alla barra.

   Lo stacco non e' dato all'intestazione ma al suo contenuto: l'intestazione
   deve restare a filo del bordo, altrimenti si porterebbe dietro anche la
   barra, che le sta dentro. Crescendo il margine cresce l'altezza
   dell'intestazione.

   Prima stesura limitata alle pagine a intestazione trasparente, cioe' Home,
   Privacy Policy e condizioni di vendita: si era escluso il resto temendo che
   sulle pagine a fondo bianco lo stacco apparisse come una fascia vuota. Su
   indicazione del committente vale ora ovunque. Il timore era infondato: il
   fondo della pagina e quello dell'intestazione sono lo stesso bianco, quindi
   non si vede alcuna fascia — si vede solo il menu partire piu' in basso e
   risalire, che e' l'effetto voluto.

   La transizione ricalca quella del tema sull'intestazione, 1s con la stessa
   curva, cosi' i due movimenti sembrano uno solo.

   Sotto i 1190px non si applica: li' il tema non cambia mai l'intestazione
   allo scorrimento, quindi il menu non avrebbe modo di risalire.            */

@media (min-width: 1190px) {
	body.ailov-ha-barra .header__content {
		margin-top: var(--ailov-stacco, 44px);
		transition: margin-top 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	body.ailov-ha-barra.scroll-down .header__content {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   2. Compenso dell'altezza aggiunta dalla barra
   --------------------------------------------------------------------------
   L'header è fisso e lo spaziatore sotto di esso ha un'altezza fissata dal
   tema. Accendendo la barra l'header diventa più alto: senza questo compenso
   il primo testo di ogni pagina finirebbe coperto.

   Il valore di --ailov-barra-altezza è tarato su una riga di testo. Se un
   giorno il testo della barra andasse a capo su schermi stretti, è l'unico
   numero da ritoccare.                                                      */

body.ailov-ha-barra {
	--ailov-barra-altezza: 46px;
}

/*
 * Il compenso vale a ogni larghezza. Sopra i 1190px l'altezza aggiunta non e'
 * piu' quella della barra ma quella dello stacco fra barra e menu, che vale
 * praticamente lo stesso: 44px contro 41. Il numero quindi non cambia.
 *
 * Fra la fase 09-Z e questa correzione qui c'era un azzeramento a 1190px, che
 * aveva senso finche' lo stacco esisteva sulle sole pagine trasparenti. Ora
 * che lo stacco c'e' ovunque, l'eccezione e' diventata la regola e le due si
 * sono ricongiunte in un valore solo.
 */

body.ailov-ha-barra .spacer {
	height: calc(140px + var(--ailov-barra-altezza)) !important;
}

@media (max-width: 794px) {
	body.ailov-ha-barra .spacer {
		height: calc(110px + var(--ailov-barra-altezza)) !important;
	}
}

/* le pagine WooCommerce hanno uno spaziatore fluido, introdotto in Fase 03.
 *
 * Il limite era 1200px, e fra 1191 e 1199 restava quindi in uso lo spaziatore
 * generico da 140px: troppo corto per queste pagine, che sotto l'intestazione
 * hanno anche la briciola di pane. Con l'intestazione alta 140px a ogni
 * larghezza (sezione 33) quei nove pixel di larghezza mandavano la briciola
 * sotto l'intestazione fissa. Il limite scende dove comincia il desktop. */
@media (min-width: 1191px) {
	body.ailov-ha-barra.woocommerce-shop .spacer,
	body.ailov-ha-barra.post-type-archive-product .spacer,
	body.ailov-ha-barra.tax-product_cat .spacer,
	body.ailov-ha-barra.single-product .spacer,
	body.ailov-ha-barra.woocommerce-cart .spacer,
	body.ailov-ha-barra.woocommerce-checkout .spacer,
	body.ailov-ha-barra.woocommerce-account .spacer {
		/* Il minimo era 140px, tarato su un'intestazione che cresceva con la
		 * larghezza dello schermo. Dalla sezione 33 l'intestazione e' costante,
		 * e queste pagine ne hanno 226px (riga, barra e briciola di pane): sotto
		 * i 185px lo spaziatore non la copre piu' e la briciola le finisce
		 * dietro. 185 e' il valore che la formula raggiunge da se' a 1440px:
		 * sopra quella larghezza non cambia dunque niente. */
		height: calc(clamp(185px, calc(6.25vw + 95px), 215px) + var(--ailov-barra-altezza)) !important;
	}
}

/* --------------------------------------------------------------------------
   3. Comandi Accedi e Carrello nell'intestazione (Fase 09-H)
   --------------------------------------------------------------------------
   Compaiono su tutte le pagine e a tutte le larghezze.

   L'intestazione e' un contenitore flessibile con logo, menu e, sotto i
   1200px, il pulsante del menu a panino. I due comandi si inseriscono alla
   sua destra: sopra i 1200px dopo il menu, sotto i 1200px fra il logo e il
   panino, dove lo spazio c'e' ed e' il posto in cui si cercano.

   Le icone sono SVG in linea, quindi seguono il colore del testo e non
   dipendono da alcun archivio esterno.                                      */

.ailov-header-azioni {
	display: flex;
	align-items: center;
	gap: 10px;
	/* il margine automatico li tiene a destra a ogni larghezza */
	margin-left: auto;
	padding-left: 8px;
	flex: 0 0 auto;
}

/*
 * Tipografia allineata a quella delle voci di menu.
 *
 * Le voci usano Roboto 20px in grassetto, con opacita' 0,8. I comandi
 * riprendono famiglia, peso e opacita', ma restano a 17px: portarli a 20
 * allargherebbe il gruppo di una quarantina di pixel e il menu, che a 1920px
 * ha appena 55px di margine su una riga, andrebbe a capo.
 *
 * L'icona segue il corpo del testo, come faceva a 15px.
 */
.ailov-azione {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ailov-azione__icona {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

/* --- Accedi: comando secondario, solo testo e icona ---------------------- */

.ailov-azione--account {
	color: inherit;
	/* stessa opacita' delle voci di menu, cosi' il grigio coincide */
	opacity: 0.8;
}

.ailov-azione--account:hover,
.ailov-azione--account:focus-visible {
	background-color: rgba(51, 48, 43, 0.07);
	opacity: 1;
}

/* --- Carrello: comando principale, pillola scura ------------------------- */

.ailov-azione--carrello {
	background-color: #33302b;
	color: #fff;
	font-weight: 500;
}

.ailov-azione--carrello:hover,
.ailov-azione--carrello:focus-visible {
	background-color: #4a463f;
	color: #fff;
}

/* il numero e' separato da un punto centrale, come nel riferimento */
.ailov-azione__numero::before {
	content: '\00b7';
	margin: 0 0.45em;
	opacity: 0.75;
}

.ailov-azione:focus-visible {
	outline: 3px solid #33302b;
	outline-offset: 2px;
}

.ailov-azione--carrello:focus-visible {
	outline-color: #f07d00;
}

/* --------------------------------------------------------------------------
   Forma compatta: solo icone
   --------------------------------------------------------------------------
   Le etichette per esteso occupano 253px. Misurando quanto chiede il menu su
   una riga (769px a 1200, 890px da 1366 in su) e quanto ne resta, il conto
   non torna: mancano fra 83 e 124 pixel da 1200 a 1440, e il menu andava a
   capo su due righe.

   Sotto i 1700px i comandi perdono quindi l'etichetta e diventano circolari,
   con il numero come contrassegno sull'angolo. Cosi' occupano circa 108px e
   il menu torna su una riga sola a ogni larghezza.

   L'etichetta non viene rimossa ma ritagliata, cosi' resta leggibile dai
   lettori di schermo; l'attributo aria-label dice comunque quanti articoli
   ci sono.                                                                  */

@media (max-width: 1799px) {

	.ailov-header-azioni {
		gap: 6px;
	}

	.ailov-azione {
		padding: 0;
		width: 38px;
		height: 38px;
		justify-content: center;
		gap: 0;
	}

	.ailov-azione__icona {
		width: 20px;
		height: 20px;
	}

	.ailov-azione__testo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ailov-azione--carrello {
		position: relative;
	}

	.ailov-azione__numero {
		position: absolute;
		top: -2px;
		right: -2px;
		min-width: 19px;
		height: 19px;
		padding: 0 4px;
		border-radius: 999px;
		background-color: #f07d00;
		color: #fff;
		font-size: 0.6875rem;
		font-weight: 600;
		line-height: 19px;
		text-align: center;
		box-sizing: border-box;
	}

	.ailov-azione__numero::before {
		content: none;
	}
}

/* --------------------------------------------------------------------------
   Sotto i 1200px il menu si chiude nel pulsante a panino
   --------------------------------------------------------------------------
   I comandi restano visibili e si collocano fra il logo e il panino, dove lo
   spazio c'e' ed e' il posto in cui si cercano.                             */

@media (max-width: 1199px) {

	.ailov-header-azioni {
		order: 2;
		margin-right: 10px;
		gap: 6px;
	}
}

/*
 * Fra 1190 e 1219px il menu esteso compare ma lo spazio e' al minimo: qui i
 * comandi si stringono ancora un poco. E' la fascia piu' difficile di tutte,
 * perche' il menu del tema vi entra gia' per il rotto della cuffia.
 */
@media (min-width: 1190px) and (max-width: 1219px) {
	.ailov-azione {
		width: 34px;
		height: 34px;
	}

	.ailov-header-azioni {
		gap: 4px;
		padding-left: 4px;
	}

	.header__logo {
		max-width: 225px;
	}
}

/* sotto i 400px lo spazio e' minimo: comandi leggermente piu' compatti */
@media (max-width: 400px) {
	.ailov-azione {
		width: 38px;
		height: 38px;
	}

	.ailov-header-azioni {
		gap: 4px;
		margin-right: 6px;
	}
}

/* --------------------------------------------------------------------------
   Spazio per il menu nella fascia dei portatili
   --------------------------------------------------------------------------
   Misurando quanto chiede il menu su una riga e quanto ne resta dopo logo e
   comandi, fra 1200 e 1440px mancava una ventina di pixel e il menu andava a
   capo su due righe.

   La spaziatura fra le voci viene percio' ridotta nella sola fascia in cui
   serve, e in modo continuo: sopra i 1700px resta intatta quella del tema.

   Il selettore ricalca quello gia' usato in Fase 03 dentro custom.css, che
   comprime la spaziatura fra 1190 e 1365px: con un selettore piu' debole
   quella regola avrebbe continuato a vincere proprio dove serviva agire.    */

@media (min-width: 1190px) and (max-width: 1799px) {
	nav[aria-label="main menu"] .menu > li > a {
		padding-left: clamp(6px, -20px + 2.05vw, 14px);
		padding-right: clamp(6px, -20px + 2.05vw, 14px);
	}
}

/* --------------------------------------------------------------------------
   La fascia piu' stretta: da 1190 a 1319px
   --------------------------------------------------------------------------
   Qui il menu del tema aveva gia' di suo appena cinque pixel di margine su
   una riga: qualunque aggiunta va compensata, non basta stringere le voci.

   Si recuperano due spazi che non servono a nulla di visibile: i venti pixel
   di rientro a sinistra dell'elenco, e una parte della larghezza del logo,
   che a queste dimensioni resta ampiamente leggibile.                       */

@media (min-width: 1190px) and (max-width: 1319px) {

	header nav ul.menu {
		padding-left: 0;
	}

	/* il vincolo va sul collegamento, non sull'immagine: e' il collegamento
	   a essere un elemento flessibile e a prendersi lo spazio */
	.header__logo {
		flex: 0 0 auto;
		max-width: 235px;
	}

	.header__logo-img {
		max-width: 100%;
		height: auto;
	}
}

/* --------------------------------------------------------------------------
   4. Il menu si allinea al resto dell'intestazione (Fase 09-L)
   --------------------------------------------------------------------------
   Logo, comandi e contenitore del menu sono alti uguali e centrati; l'elenco
   delle voci era invece ancorato in alto, con altezza fissa di 58px. Il suo
   centro restava percio' fermo a 103px mentre tutto il resto scendeva al
   crescere dell'intestazione: lo scarto misurato passava da +15px a 1200px a
   -11px a 1920px, cambiando segno.

   Centrando l'elenco nel proprio contenitore, logo, menu e comandi
   condividono una sola linea di centro a ogni larghezza. Non e' una
   compensazione: e' la stessa regola gia' valida per gli altri elementi.

   Restava poi uno scostamento fisso di venti pixel: style.css del tema figlio
   abbassa l'elenco con `.menu{top:20px}` da 1190px in su. Era il modo con cui
   il menu veniva posizionato a occhio finche' era ancorato in alto; ora che
   e' centrato quel ritocco non serve piu' e va annullato, altrimenti resta
   uno scarto costante di venti pixel.

   La soglia e' 1190px, la stessa a cui il tema passa al menu esteso: sotto,
   l'elenco e' fuori schermo dentro il pannello del pulsante a panino e ha un
   posizionamento tutto suo.                                                 */

@media (min-width: 1190px) {
	header nav[aria-label="main menu"] {
		display: flex;
		align-items: center;
	}

	header nav[aria-label="main menu"] > ul.menu {
		width: 100%;
		top: 0;
	}
}

/* --------------------------------------------------------------------------
   5. Il comando Accedi segue il colore del menu (Fasi 09-M e 09-O)
   --------------------------------------------------------------------------
   Il modello di pagina a intestazione trasparente non basta a decidere il
   colore: quel modello e' usato anche da carrello, checkout, area account,
   privacy e cookie policy, e su alcune di esse l'intestazione ha comunque un
   fondo. Le voci di menu sono percio' bianche in un caso e scure nell'altro.

   Colori misurati sulle voci di menu, pagina per pagina:

     Home, cookie policy .................. bianco   (fondo trasparente, foto dietro)
     carrello, checkout, account .......... #222     (fondo bianco, imposto in Fase 02-BIS)
     privacy policy ....................... #000     (fondo arancione, imposto dal tema figlio)
     pagina scorsa (scroll-down) .......... #000     (fondo arancione)
     tutte le altre ....................... #000     (intestazione normale)

   Qui sotto il comando ricalca le stesse condizioni, una per una. L'icona non
   ha bisogno di regole proprie: e' disegnata con currentColor.

   Se un domani una nuova pagina imponesse un fondo all'intestazione, andra'
   aggiunta a questo elenco: e' l'unico punto da aggiornare.

   Come le regole del tema, vale da 1190px in su: sotto, l'intestazione non e'
   mai trasparente. Il carrello non e' toccato: e' una pillola piena e si
   legge su entrambi i fondi.                                                */

@media (min-width: 1190px) {

	/* --- fondo trasparente: testo bianco, come le voci ------------------- */

	body.page-template-menu-trasparent .ailov-azione--account {
		color: #fff;
	}

	body.page-template-menu-trasparent .ailov-azione--account:hover,
	body.page-template-menu-trasparent .ailov-azione--account:focus-visible {
		background-color: rgba(255, 255, 255, 0.18);
	}

	body.page-template-menu-trasparent .ailov-azione--account:focus-visible {
		outline-color: #fff;
	}

	/* --- fondo pieno: testo scuro, con lo stesso valore delle voci ------- */

	body.woocommerce-cart .ailov-azione--account,
	body.woocommerce-checkout .ailov-azione--account,
	body.woocommerce-account .ailov-azione--account {
		color: #222;
	}

	body.privacy-policy .ailov-azione--account,
	body.page-template-menu-trasparent.scroll-down .ailov-azione--account {
		color: #000;
	}

	body.woocommerce-cart .ailov-azione--account:hover,
	body.woocommerce-checkout .ailov-azione--account:hover,
	body.woocommerce-account .ailov-azione--account:hover,
	body.privacy-policy .ailov-azione--account:hover,
	body.page-template-menu-trasparent.scroll-down .ailov-azione--account:hover,
	body.woocommerce-cart .ailov-azione--account:focus-visible,
	body.woocommerce-checkout .ailov-azione--account:focus-visible,
	body.woocommerce-account .ailov-azione--account:focus-visible,
	body.privacy-policy .ailov-azione--account:focus-visible,
	body.page-template-menu-trasparent.scroll-down .ailov-azione--account:focus-visible {
		background-color: rgba(51, 48, 43, 0.12);
	}

	body.woocommerce-cart .ailov-azione--account:focus-visible,
	body.woocommerce-checkout .ailov-azione--account:focus-visible,
	body.woocommerce-account .ailov-azione--account:focus-visible,
	body.privacy-policy .ailov-azione--account:focus-visible,
	body.page-template-menu-trasparent.scroll-down .ailov-azione--account:focus-visible {
		outline-color: #33302b;
	}
}

/* --------------------------------------------------------------------------
   6. Menu leggibile sui documenti legali (Fase 09-P)
   --------------------------------------------------------------------------
   La Cookie Policy usa il modello a intestazione trasparente ma non ha alcuna
   fotografia dietro: le voci di menu, bianche, finivano su fondo bianco con
   contrasto 1:1, cioe' invisibili. Si vedevano solo il logo e la pillola del
   carrello.

   Il tema figlio tratta gia' il caso gemello: alla Privacy Policy da' il menu
   nero. Qui si applica lo stesso rimedio ai documenti legali generati da
   Complianz, che li contrassegna con la classe `cmplz-document`. Usare quella
   classe invece dell'identificativo numerico della pagina ha due vantaggi:
   non cambia passando da un ambiente all'altro, e copre da sola eventuali
   altri documenti legali che venissero aggiunti.

   Se un domani Complianz non fosse piu' in uso, questa regola smetterebbe
   semplicemente di applicarsi: si tornerebbe allo stato di oggi, non a uno
   peggiore.                                                                 */

@media (min-width: 1190px) {

	body.cmplz-document.page-template-menu-trasparent .menu > li > a,
	body.cmplz-document.page-template-menu-trasparent .header__quick ul li a {
		color: #000;
	}

	body.cmplz-document .ailov-azione--account {
		color: #000;
	}

	body.cmplz-document .ailov-azione--account:hover,
	body.cmplz-document .ailov-azione--account:focus-visible {
		background-color: rgba(51, 48, 43, 0.12);
	}

	body.cmplz-document .ailov-azione--account:focus-visible {
		outline-color: #33302b;
	}
}

/* --------------------------------------------------------------------------
   7. Intestazione e logo allo scorrimento, su tutte le pagine (Fase 09-Q)
   --------------------------------------------------------------------------
   Il tema cambia aspetto all'intestazione quando la pagina scorre: fondo
   arancione e logo scuro al posto di quello a colori. Il meccanismo era pero'
   legato al solo modello di pagina a intestazione trasparente, con questo
   esito:

     Home, cookie e privacy policy ....... arancione + logo nero
     carrello, checkout, account ......... arancione + logo nero
     Shop, scheda prodotto ............... restavano bianchi, logo invariato

   Le pagine del negozio erano quindi incoerenti fra loro. Su indicazione del
   committente il comportamento viene esteso a tutte: scorrendo, ogni pagina
   prende il fondo arancione e il logo scuro.

   Il logo scuro non e' un'immagine nuova: e' quella gia' caricata e gia' usata
   dal tema (Aspetto > Personalizza), qui semplicemente resa visibile anche
   dove prima non lo era.

   Soglia 1190px, la stessa del meccanismo del tema: sotto, l'intestazione non
   cambia mai allo scorrimento su nessuna pagina, Home compresa, quindi li' e'
   gia' uniforme e non c'e' nulla da rendere coerente.                        */

@media (min-width: 1190px) {

	body.scroll-down .header {
		background-color: #f07d00 !important;
	}

	/* lo scambio dei due loghi, finora riservato al modello trasparente */
	body.scroll-down .header__logo-img--default {
		opacity: 0;
	}

	body.scroll-down .header__logo-img--scrolled {
		opacity: 1;
	}

	/* sul fondo arancione le voci e i comandi vanno in nero, come gia'
	   avviene sulla Home scorsa */
	body.scroll-down .menu > li > a,
	body.scroll-down .ailov-azione--account {
		color: #000;
	}

	body.scroll-down .ailov-azione--account:hover,
	body.scroll-down .ailov-azione--account:focus-visible {
		background-color: rgba(0, 0, 0, 0.12);
	}

	body.scroll-down .ailov-azione--account:focus-visible {
		outline-color: #000;
	}
}

/* --------------------------------------------------------------------------
   8. Ultima parola sul colore del comando (Fase 09-Q)
   --------------------------------------------------------------------------
   Su carrello, checkout e area account le voci di menu sono #222 a ogni
   larghezza e in ogni stato di scorrimento, per una regola della Fase 02-BIS.
   Il comando deve seguire quel valore, non il #000 delle altre pagine.

   La regola sta qui in fondo, fuori da ogni media query, per due motivi: vale
   a tutte le larghezze, e arrivando per ultima vince sul colore impostato
   allo scorrimento nella sezione 7, con cui condivide la specificita'.       */

body.woocommerce-cart .ailov-azione--account,
body.woocommerce-checkout .ailov-azione--account,
body.woocommerce-account .ailov-azione--account {
	color: #222;
}

/*
 * A pagina scorsa serve un selettore piu' lungo: quelle pagine usano anche il
 * modello trasparente, e la regola che le riguarda in quello stato ha una
 * classe in piu'. Qui si pareggia quel conto e, arrivando dopo, si prevale.
 */
body.woocommerce-cart.scroll-down .ailov-azione--account,
body.woocommerce-checkout.scroll-down .ailov-azione--account,
body.woocommerce-account.scroll-down .ailov-azione--account {
	color: #222;
}

/* --------------------------------------------------------------------------
   Nota sulla Privacy Policy sotto i 1190px (Fase 09-R)
   --------------------------------------------------------------------------
   Li' il tema figlio da' a quella pagina un'intestazione arancione
   semitrasparente e, nello stesso blocco, impone il logo a colori con
   `display:block!important`. Non e' una dimenticanza ma una scelta esplicita,
   e a quelle larghezze non c'e' alcuno scorrimento che possa cambiare
   l'intestazione: si e' quindi deciso di non forzare li' il logo scuro.

   Provato e scartato: sostituirlo richiedeva di combattere due !important del
   tema per un solo caso, su una pagina, alle sole larghezze in cui il fondo
   non cambia mai. Segnalato come Q-050 invece che corretto d'ufficio.

   Resta pero' un difetto del tema, a esattamente 1190px. Le sue due soglie si
   sovrappongono: a quel pixel valgono sia `max-width: 1190px`, che toglie dal
   flusso il logo scuro, sia le regole dello scorrimento, che portano a zero
   quello a colori. La pagina si trova cosi' **senza alcun logo**.

   Verificato che e' preesistente: togliendo del tutto questo foglio il
   risultato non cambia. Si chiude qui perche' costa una regola e lascia la
   pagina sempre con un logo. La specificita' ricalca quella della regola del
   tema che va superata (0,4,1) e prevale arrivando dopo, senza !important.  */

@media (max-width: 1190px) {
	body.privacy-policy.page-template-menu-trasparent.scroll-down .header__logo-img--default {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   10. L'intestazione si incolla in alto su tutte le pagine (Fase 09-S)
   --------------------------------------------------------------------------
   A pagina ferma l'intestazione sta 44px sotto il bordo, e scorrendo risale a
   filo. Anche questo era legato al solo modello a intestazione trasparente:
   Shop e scheda prodotto restavano a 44px, con una striscia di contenuto che
   scorreva sopra di loro.

   Le regole ricalcano quelle del tema figlio, comprese le due varianti per la
   barra di amministrazione, e usano la stessa soglia di 1190px: sotto,
   l'intestazione non si muove su nessuna pagina.                            */

@media (min-width: 1190px) {

	body.scroll-down .header {
		top: 0 !important;
	}

	body.admin-bar.scroll-down .header {
		top: 32px !important;
	}
}

/* --------------------------------------------------------------------------
   11. Menu leggibile su OGNI pagina di contenuto trasparente (Fase 10)
   --------------------------------------------------------------------------
   La sezione 6 dava il menu nero ai soli documenti di Complianz, contando sul
   fatto che ogni futuro documento legale sarebbe arrivato da li'. La pagina
   delle condizioni di vendita, creata a mano, ha smentito quell'assunto: usa
   lo stesso modello a intestazione trasparente, non ha fotografia dietro, e le
   voci bianche finivano su fondo bianco. Contrasto 1:1, menu invisibile.

   La condizione viene quindi riscritta per quello che conta davvero: una
   pagina di contenuto che usa il modello trasparente. Si escludono i due soli
   casi in cui il bianco e' corretto:

     .home ................. dietro c'e' la fotografia
     .woocommerce-page ..... carrello, checkout e account hanno fondo bianco
                             opaco e sono gia' trattati altrove

   Questa regola copre anche i documenti di Complianz, quindi la sezione 6
   diventa ridondante: resta in piedi perche' toglierla non cambia nulla e la
   sua spiegazione documenta come si e' arrivati qui.                        */

@media (min-width: 1190px) {

	body.page-template-menu-trasparent:not(.home):not(.woocommerce-page) .menu > li > a,
	body.page-template-menu-trasparent:not(.home):not(.woocommerce-page) .header__quick ul li a {
		color: #000;
	}

	body.page-template-menu-trasparent:not(.home):not(.woocommerce-page) .ailov-azione--account {
		color: #000;
	}

	body.page-template-menu-trasparent:not(.home):not(.woocommerce-page) .ailov-azione--account:hover,
	body.page-template-menu-trasparent:not(.home):not(.woocommerce-page) .ailov-azione--account:focus-visible {
		background-color: rgba(51, 48, 43, 0.12);
	}

	body.page-template-menu-trasparent:not(.home):not(.woocommerce-page) .ailov-azione--account:focus-visible {
		outline-color: #33302b;
	}
}

/* --------------------------------------------------------------------------
   12. Un solo arancione nell'intestazione (Fase 10)
   --------------------------------------------------------------------------
   Sopra i 1190px l'intestazione scorsa e' #f07d00 su tutte le pagine, gia'
   verificato a schermo. Sotto i 1190 nessuna pagina cambia colore allo
   scorrimento, tranne una: alla Privacy Policy il tema figlio da' un fondo
   arancione permanente, non legato allo scorrimento, e lo fa con un valore
   diverso — rgba(240, 124, 0, 0.698), cioe' #f07c00 al 70%.

   Sono due differenze in una: la tinta cambia di un punto sul rosso, e la
   semitrasparenza su fondo bianco la schiarisce fino a un arancione slavato
   che non somiglia piu' a quello del marchio.

   Qui viene riportata all'arancione unico, pieno. Il selettore ripete quello
   del tema figlio con `body` davanti, per superarne il peso: quella regola
   porta `!important` e senza il prefisso resterebbe la piu' forte.

   Resta aperta la questione Q-050, che riguarda quale logo mettere su quel
   fondo: non e' toccata qui.                                                */

@media (max-width: 1190px) {
	body.privacy-policy.page-template-menu-trasparent .header {
		background-color: #f07d00 !important;
	}
}

/* --------------------------------------------------------------------------
   13. Il carosello delle testimonianze non allarga la pagina (Fase 12)
   --------------------------------------------------------------------------
   Emerso dal controllo completo: sulla Home a 768px la pagina scorreva in
   orizzontale di 2px. La causa non era il contenuto ma la freccia «avanti»
   del carosello, posizionata in assoluto: il suo bordo destro cadeva a 770
   su una finestra di 768.

   Due pixel non si vedono, ma bastano a far comparire la barra di
   scorrimento orizzontale e a far oscillare la pagina al tocco sui telefoni.

   Si contiene il carosello invece di spostare la freccia: cosi' la
   correzione regge anche se il plugin cambia la posizione dei comandi.     */

.swiper, .swiper-container {
	max-width: 100%;
}

/*
 * Il plugin colloca le frecce a `right: -40px`, cioe' di proposito fuori dal
 * carosello: sui monitor larghi ci sta, sotto i 900px no. Il primo tentativo
 * senza `!important` perdeva di peso contro la regola del plugin.
 */
@media (max-width: 900px) {
	.swiper-button-next,
	.swiper-container .swiper-button-next {
		right: 2px !important;
	}

	.swiper-button-prev,
	.swiper-container .swiper-button-prev {
		left: 2px !important;
	}
}

/* --------------------------------------------------------------------------
   14. Selettore di lingua nell'intestazione (Fase 16)
   --------------------------------------------------------------------------
   Due sigle, IT e EN, accanto ai comandi Accedi e Carrello. Si e' scelto il
   testo e non le bandiere: una bandiera indica un paese, non una lingua, e
   l'inglese qui serve a persone che stanno in Italia.

   La sigla attiva resta leggibile ma non cliccabile a vuoto: si distingue per
   peso e colore, non per un fondo colorato, cosi' non compete con il carrello
   che e' il comando principale.                                             */

.ailov-lingua {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-right: 6px;
}

.ailov-lingua__voce {
	padding: 6px 8px;
	font-family: var(--ailov-sans);
	/*
	 * 15px invece dei 13 di partenza. Due sigle di due lettere a 13px sono
	 * piccole per un comando che, in italiano, e' rimasto l'unico lassu' e
	 * l'unica porta verso la versione dove il negozio esiste.
	 *
	 * La misura vale in entrambi gli stati e non solo a intestazione
	 * trasparente: un comando che cambia dimensione mentre si scorre sembra
	 * un difetto, non un'attenzione.
	 */
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	border-radius: 6px;
	opacity: 0.6;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ailov-lingua__voce:hover,
.ailov-lingua__voce:focus-visible {
	opacity: 1;
	background-color: rgba(51, 48, 43, 0.12);
}

.ailov-lingua__voce--attiva {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 1190px) {
	.ailov-lingua {
		margin-right: 2px;
	}

	.ailov-lingua__voce {
		padding: 6px;
	}
}

/* --------------------------------------------------------------------------
   14-bis. Il selettore segue il fondo dell'intestazione (Fase 26)
   --------------------------------------------------------------------------
   Stesso criterio gia' usato per il comando Accedi nella sezione 11: sopra la
   fotografia il testo e' bianco, su fondo pieno torna scuro. Il selettore era
   stato dimenticato in quell'elenco e restava scuro sopra la fotografia, dove
   si leggeva a fatica.

   L'opacita' a riposo sale da 0,6 a 0,85: sei decimi di bianco su una foto
   chiara sono pochi, mentre su fondo pieno quel valore andava bene.

   Come le regole della sezione 11, vale da 1190px in su: sotto,
   l'intestazione non e' mai trasparente e il colore ereditato e' gia'
   giusto — misurato: fino a 1189px il fondo resta bianco in entrambi gli
   stati, su ogni pagina.

   ATTENZIONE: queste regole valgono per la **sola Home**. Erano state scritte
   guardando solo quella, ma il modello a intestazione trasparente lo usano
   anche Accedi, Carrello, Privacy e la pagina inglese — dove pero' il fondo
   e' bianco o chiaro, e il selettore bianco spariva. Le pagine diverse dalla
   Home hanno ora il proprio blocco, la sezione 14-ter.                      */

@media (min-width: 1190px) {

	/* --- fondo trasparente: bianco, come le voci di menu ----------------- */

	body.home.page-template-menu-trasparent .ailov-lingua__voce {
		color: #fff;
		opacity: 0.85;
	}

	body.home.page-template-menu-trasparent .ailov-lingua__voce--attiva {
		opacity: 1;
	}

	body.home.page-template-menu-trasparent .ailov-lingua__voce:hover,
	body.home.page-template-menu-trasparent .ailov-lingua__voce:focus-visible {
		opacity: 1;
		background-color: rgba(255, 255, 255, 0.18);
	}

	body.home.page-template-menu-trasparent .ailov-lingua__voce:focus-visible {
		outline-color: #fff;
	}

	/* --- scorrendo l'intestazione si riempie: si torna scuri -------------
	   I valori sono scritti per esteso e non come var(--ailov-scuro), come
	   gia' fa la sezione 11: quei token sono definiti in
	   woocommerce-ailov.css, che sulla Home non viene caricato. Misurato:
	   la variabile risulta non definita e la regola verrebbe scartata.   */

	body.home.page-template-menu-trasparent.scroll-down .ailov-lingua__voce {
		color: #000;
		opacity: 0.6;
	}

	body.home.page-template-menu-trasparent.scroll-down .ailov-lingua__voce--attiva {
		opacity: 1;
	}

	body.home.page-template-menu-trasparent.scroll-down .ailov-lingua__voce:hover,
	body.home.page-template-menu-trasparent.scroll-down .ailov-lingua__voce:focus-visible {
		opacity: 1;
		background-color: rgba(51, 48, 43, 0.12);
	}

	body.home.page-template-menu-trasparent.scroll-down .ailov-lingua__voce:focus-visible {
		outline-color: #33302b;
	}
}

/* --------------------------------------------------------------------------
   14-ter. Il selettore fuori dalla Home (Fase 35)
   --------------------------------------------------------------------------
   Fuori dalla Home l'intestazione non sta mai sopra una fotografia: a riposo
   ha fondo bianco o contenuto chiaro, e scorrendo si riempie d'arancione.

   Il selettore quindi fa il percorso opposto a quello della Home: **nero da
   fermo, bianco allo scorrimento**.

   Questo blocco chiude anche un difetto della Fase 26: quelle regole
   coloravano di bianco il selettore su ogni pagina col modello trasparente,
   Home compresa ma non solo. Su Accedi e Carrello, dove il fondo e' bianco,
   il risultato era bianco su bianco.

   NOTA SUL CONTRASTO, misurata: il bianco sull'arancione #f07d00 sta a
   **2,75:1**, sotto il minimo di 4,5:1 delle linee guida, mentre il nero sullo
   stesso fondo sta a 7,64:1. Le voci di menu accanto restano nere. E' una
   scelta voluta del committente, registrata come tale: si torna indietro
   cambiando due valori qui sotto.                                           */

@media (min-width: 1190px) {

	/* --- ferma in cima: nero ---------------------------------------------- */

	body:not(.home) .ailov-lingua__voce {
		color: #000;
		opacity: 0.6;
	}

	body:not(.home) .ailov-lingua__voce--attiva {
		opacity: 1;
	}

	body:not(.home) .ailov-lingua__voce:hover,
	body:not(.home) .ailov-lingua__voce:focus-visible {
		opacity: 1;
		background-color: rgba(51, 48, 43, 0.12);
	}

	body:not(.home) .ailov-lingua__voce:focus-visible {
		outline-color: #33302b;
	}

	/* --- scorrendo, sull'arancione: bianco -------------------------------- */

	body:not(.home).scroll-down .ailov-lingua__voce {
		color: #fff;
		opacity: 0.85;
	}

	body:not(.home).scroll-down .ailov-lingua__voce--attiva {
		opacity: 1;
	}

	body:not(.home).scroll-down .ailov-lingua__voce:hover,
	body:not(.home).scroll-down .ailov-lingua__voce:focus-visible {
		opacity: 1;
		background-color: rgba(255, 255, 255, 0.18);
	}

	body:not(.home).scroll-down .ailov-lingua__voce:focus-visible {
		outline-color: #fff;
	}
}

/* --------------------------------------------------------------------------
   15. Invito a WhatsApp al posto del negozio, in italiano (Fase 22)
   --------------------------------------------------------------------------
   Chi legge in italiano non compra online: ordina su WhatsApp. Al posto del
   negozio trova questo riquadro, che deve spiegare e offrire subito l'azione,
   senza sembrare un errore o un divieto.

   Il collegamento alla versione inglese sta sotto, in tono minore: c'e' per
   chi lo cerca, non distrae chi non ne ha bisogno.                          */

.ailov-invito {
	max-width: 640px;
	margin: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px);
}

.ailov-invito__titolo {
	margin: 0 0 clamp(14px, 1.8vw, 20px);
	font-family: var(--ailov-serif);
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	line-height: 1.2;
	color: var(--ailov-scuro);
}

.ailov-invito__testo {
	margin: 0 0 clamp(22px, 2.6vw, 30px);
	font-family: var(--ailov-sans);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ailov-grigio-testo);
}

.ailov-invito__pulsante {
	display: inline-block;
	padding: 14px 28px;
	background-color: var(--ailov-accent);
	color: #fff;
	font-family: var(--ailov-sans);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: var(--ailov-pill);
	transition: background-color 0.2s ease;
}

.ailov-invito__pulsante:hover,
.ailov-invito__pulsante:focus-visible {
	background-color: var(--ailov-accent-hover);
	color: #fff;
}

.ailov-invito__alternativa {
	margin: clamp(26px, 3vw, 36px) 0 0;
	padding-top: clamp(16px, 2vw, 22px);
	border-top: 1px solid var(--ailov-bordo);
	font-family: var(--ailov-sans);
	font-size: 0.9375rem;
	color: var(--ailov-grigio-testo);
}

/* --------------------------------------------------------------------------
   30. Dopo l'ordine: cosa succede adesso (Fase 86)
   --------------------------------------------------------------------------
   La pagina di conferma era un vicolo cieco: diceva tutto dell'ordine e
   niente di cosa fare. Questo riquadro sta subito sotto il riepilogo, dove
   lo sguardo arriva dopo aver controllato il totale.

   Il fondo e' lo stesso beige del sito, non un colore d'avviso: non e' un
   allarme, e' il seguito naturale dell'acquisto.                            */

.ailov-dopo-ordine {
	margin: 32px 0;
	padding: 24px 28px;
	background-color: #f7f1ec;
	border-radius: 10px;
}

.ailov-dopo-ordine__copia {
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(51, 48, 43, 0.15);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.ailov-dopo-ordine__titolo {
	margin: 0 0 12px;
	font-size: 1.25rem;
	line-height: 1.3;
}

.ailov-dopo-ordine__passi {
	margin: 0;
	padding-left: 22px;
	line-height: 1.7;
}

.ailov-dopo-ordine__passi li + li {
	margin-top: 6px;
}

.ailov-dopo-ordine__comandi {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}

/* i comandi restano leggibili anche da soli, senza il contesto del riquadro */
.ailov-dopo-ordine__comando {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid rgba(51, 48, 43, 0.35);
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ailov-dopo-ordine__comando:hover,
.ailov-dopo-ordine__comando:focus-visible {
	background-color: rgba(51, 48, 43, 0.08);
	border-color: rgba(51, 48, 43, 0.6);
}

/*
 * Il primo comando e' quello che vale di piu': un appuntamento nel calendario
 * e' la differenza fra chi si presenta al cancello e chi se ne dimentica.
 */
.ailov-dopo-ordine__comando--primo {
	background-color: #33302b;
	border-color: #33302b;
	color: #fff;
}

.ailov-dopo-ordine__comando--primo:hover,
.ailov-dopo-ordine__comando--primo:focus-visible {
	background-color: #4a463f;
	border-color: #4a463f;
	color: #fff;
}

@media (max-width: 600px) {
	.ailov-dopo-ordine {
		padding: 20px;
	}

	.ailov-dopo-ordine__comandi {
		flex-direction: column;
	}

	.ailov-dopo-ordine__comando {
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   31. — sezione tolta il 27 settembre 2026 (Fase 108)
   --------------------------------------------------------------------------
   Qui stava una copia di tre regole di WordPress: quelle che danno ai blocchi
   con sfondo il riempimento di 20 pixel sopra e sotto e 38 ai lati. Era una
   compensazione, nata nella Fase 92, perche' sul sito online quei fogli non
   arrivavano mai.

   Dalla Fase 107 arrivano: la causa era che WordPress, al momento di creare
   quei fogli, non sapeva ancora di doverne tenere uno per blocco — glielo
   diceva in tempo un plugin che online non era attivo. Adesso glielo dice il
   tema, in `functions.php`.

   La copia è stata tolta perché era una fotocopia: se un aggiornamento di
   WordPress cambiasse quelle regole, il sito avrebbe continuato a usare la
   versione vecchia senza che nessuno se ne accorgesse.                      */

/* --------------------------------------------------------------------------
   32. La pagina che non c'e' (Fase 95)
   --------------------------------------------------------------------------
   Quella del tema padre cominciava subito sotto l'intestazione, senza un
   respiro: il titolo sembrava una riga dell'intestazione stessa.

   Qui il contenuto sta dentro un riquadro beige staccato sopra e sotto. Il
   distacco non e' decorazione: e' quello che dice al visitatore «questa e'
   un'altra cosa», ed e' la prima informazione che gli serve.               */

.ailov-404 {
	padding: 96px 20px 120px;
}

.ailov-404__riquadro {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 48px;
	background-color: #f7f1ec;
	border-radius: 14px;
	text-align: center;
}

/*
 * Il numero e' grande ma leggero: dice dove si e' finiti senza gridarlo, e
 * lascia il peso al titolo, che e' la frase che il visitatore legge davvero.
 */
.ailov-404__codice {
	margin: 0 0 8px;
	font-family: var(--ailov-serif, inherit);
	font-size: clamp(56px, 12vw, 96px);
	font-weight: 700;
	line-height: 1;
	color: rgba(51, 48, 43, 0.22);
	letter-spacing: 0.02em;
}

.ailov-404__titolo {
	margin: 0 0 14px;
	font-size: clamp(26px, 4vw, 36px);
	line-height: 1.2;
}

.ailov-404__testo {
	margin: 0 auto 28px;
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.ailov-404__comandi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 36px;
}

.ailov-404__comando {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid rgba(51, 48, 43, 0.35);
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ailov-404__comando:hover,
.ailov-404__comando:focus-visible {
	background-color: rgba(51, 48, 43, 0.08);
	border-color: rgba(51, 48, 43, 0.6);
}

/* la prima strada e' la Home: chi si e' perso vuole soprattutto ripartire */
.ailov-404__comando--primo {
	background-color: #33302b;
	border-color: #33302b;
	color: #fff;
}

.ailov-404__comando--primo:hover,
.ailov-404__comando--primo:focus-visible {
	background-color: #4a463f;
	border-color: #4a463f;
	color: #fff;
}

.ailov-404__cerca {
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid rgba(51, 48, 43, 0.15);
}

.ailov-404__etichetta {
	display: block;
	margin-bottom: 10px;
	font-size: 0.875rem;
	opacity: 0.75;
}

.ailov-404__campo {
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin: 0 auto;
}

.ailov-404__campo input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid rgba(51, 48, 43, 0.3);
	border-radius: 8px;
	font-size: 0.9375rem;
	background-color: #fff;
}

.ailov-404__campo button {
	padding: 11px 18px;
	border: 1px solid #33302b;
	border-radius: 8px;
	background-color: #33302b;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.ailov-404__campo button:hover,
.ailov-404__campo button:focus-visible {
	background-color: #4a463f;
	border-color: #4a463f;
}

@media (max-width: 600px) {
	.ailov-404 {
		padding: 56px 16px 72px;
	}

	.ailov-404__riquadro {
		padding: 36px 22px;
	}

	.ailov-404__comandi {
		flex-direction: column;
	}

	.ailov-404__comando {
		text-align: center;
	}
}

/* ==========================================================================
   Il collegamento alla pagina del servizio, sotto la sezione del negozio
   ==========================================================================
   Fase 127. Compare solo per chi legge in inglese: porta alla pagina che
   spiega il giro del giovedì, che prima si raggiungeva solo dai motori di
   ricerca. Sta sotto il bottone del negozio e segue il suo allineamento.
   ========================================================================== */

.ailov-home-shop__servizio {
	margin: 14px 0 0;
	text-align: center;
	font-size: 0.95rem;
}

.ailov-home-shop__servizio a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   La barra quando le uova sono finite
   ==========================================================================
   Fase 132. Compare da sola quando l'ultima confezione va a zero. Il colore
   non è quello dello shop chiuso: chiuso è rosso e vuol dire «non si compra»,
   esaurito è ambra e vuol dire «torni giovedì». Due notizie diverse non
   possono avere lo stesso colore.

   Ambra scuro e non chiaro: il testo è bianco, e serve il rapporto di
   contrasto di 4,5:1 richiesto a questo corpo di testo. #8a5a0f su bianco sta
   a 5,9:1.
   ========================================================================== */

.header__topbar.ailov-barra--esaurito {
	background-color: #8a5a0f;
}

/* --------------------------------------------------------------------------
   Lo spazio sopra le pagine di solo testo (Fase 145)
   --------------------------------------------------------------------------
   Termini, resi, privacy e la pagina inglese del servizio usano il modello
   «menu trasparente», che il tema padre pensa per pagine che si aprono con
   un'immagine a tutta larghezza sotto il menu. Queste non ce l'hanno, e il
   tema fa due cose che per loro sono sbagliate:

     sopra 1190px  .spacer { display: none }   e il titolo finisce sotto il menu
     sotto 1190px  .spacer { height: 44px }    con un menu alto 110px

   Per rimediare, nelle tre pagine era stato messo uno spaziatore dentro il
   contenuto, alto clamp(24px, calc(8.3vw + 132px), 291px). Quel valore
   **cresce con la larghezza dello schermo**, mentre il menu resta alto 110px
   fino a 1190px: sul telefono diventavano 164px di vuoto sopra il titolo, e a
   1024px addirittura 217.

   Qui lo spazio torna dove deve stare: una regola sola, con lo scalino alla
   stessa soglia del tema, e gli spaziatori nel contenuto si tolgono.

   Misurato: il vuoto sotto il menu passa da 210px a circa 40px sul telefono,
   da 313px a 60px a 1024px, e sul desktop resta come prima.                 */

body.ailov-pagina-di-testo .spacer {
	display: block;
	height: 150px;
}

@media (min-width: 1190px) {
	body.ailov-pagina-di-testo .spacer {
		display: block;
		height: 206px;
	}
}

/* con la barra accesa si aggiunge la sua altezza, come per tutte le pagine */
body.ailov-ha-barra.ailov-pagina-di-testo .spacer {
	height: calc(150px + var(--ailov-barra-altezza)) !important;
}

@media (min-width: 1190px) {
	body.ailov-ha-barra.ailov-pagina-di-testo .spacer {
		height: calc(206px + var(--ailov-barra-altezza)) !important;
	}
}

/* --------------------------------------------------------------------------
   La cookie policy: spazio in piu' solo da computer (Fase 146)
   --------------------------------------------------------------------------
   Quella pagina ha un involucro suo, scritto da Complianz: un gruppo e delle
   colonne con `padding: 5%` su piu' livelli, piu' uno spaziatore da 50px.
   Sotto i 1190px quel riempimento basta, perche' li' il tema lascia anche i
   suoi 44px di spaziatore: misurato, il titolo ha 123px di aria sul telefono
   e 189 sul tablet. Da computer invece il tema nasconde lo spaziatore
   (`menu-trasparent`), l'intestazione resta fissa e il 5% da solo non arriva:
   33px di aria in italiano, **-8** in inglese, dove l'intestazione e' piu'
   alta di 41px per via della striscia promozionale.

   Quindi non si toglie niente: si rida' lo spaziatore, in pixel, **solo da
   1190px in su**. Sotto resta tutto come prima, e la colonna del testo resta
   la sua, piu' larga delle altre pagine legali.

   Il padding al 5% sta in un attributo `style` dentro il contenuto, e un
   attributo vince su un foglio di stile: toccarlo vorrebbe dire `!important`,
   oppure riscrivere la pagina. Non serve ne' l'uno ne' l'altra.

   Il numero e' piccolo, 38px, perche' qui il 5% lavora **in aggiunta**: a
   1440px mette da se' 188px sopra il titolo. Sulle altre pagine di testo, che
   non hanno involucro, lo stesso risultato richiede 206px.                  */

@media (min-width: 1190px) {
	body.ailov-pagina-cookie .spacer {
		display: block;
		height: 38px !important;
	}

	body.ailov-ha-barra.ailov-pagina-cookie .spacer {
		height: calc(38px + var(--ailov-barra-altezza)) !important;
	}
}

/* --------------------------------------------------------------------------
   La tabella nutrizionale a tre colonne (Fase 155)
   --------------------------------------------------------------------------
   Da due colonne a tre: etichetta, per 100 g, per uovo. Con la larghezza
   ripartita in parti uguali, sul telefono la colonna delle etichette e'
   larga 93px e «Carboidrati» si spezza a meta' parola. Misurato, non
   immaginato.

   Le etichette hanno bisogno di piu' spazio dei valori, che sono corti.
   La tabella e' l'unica con questa classe, e sta solo in Home.             */

/* I valori sono dentro un <mark>, che di suo ha lo sfondo giallo da
   evidenziatore. Nel contenuto c'e' un `background-color: rgba(0,0,0,0)` che
   lo spegne, ma **non si puo' contare su quello**: salvando la pagina da una
   pagina web, e non da riga di comando, WordPress lo toglie. Provato: dalla
   riga di comando sopravvive, dal web no.

   Quindi lo spegne il foglio di stile, che nessun filtro tocca. */

.my_table.wp-block-table mark {
	background-color: transparent;
}

.my_table.wp-block-table th:first-child,
.my_table.wp-block-table td:first-child {
	width: 38%;
}

.my_table.wp-block-table th:not(:first-child),
.my_table.wp-block-table td:not(:first-child) {
	width: 31%;
}

/* le intestazioni delle due colonne: piccole, non gridano */
.my_table.wp-block-table thead th {
	font-size: 0.9em;
	line-height: 1.3;
}

/* Sul telefono il conto non torna: la cella delle etichette e' larga 117px,
   ma il riempimento da 16px per lato ne lascia utili 85 — e «Carbohydrates»
   ne misura 104. Si spezzava a meta' parola.

   Non era la sillabazione a mancare (provata, non cambia niente perche' il
   tema forza `word-break: break-word`): mancava lo spazio. Si restringe il
   riempimento e si allarga un po' la prima colonna. */

@media (max-width: 480px) {
	.my_table.wp-block-table th,
	.my_table.wp-block-table td {
		padding-left: 8px;
		padding-right: 8px;
	}

	.my_table.wp-block-table th:first-child,
	.my_table.wp-block-table td:first-child {
		width: 44%;
	}

	.my_table.wp-block-table th:not(:first-child),
	.my_table.wp-block-table td:not(:first-child) {
		width: 28%;
	}
}


/* --------------------------------------------------------------------------
   33. Il logo torna un elemento normale (Fase 157)
   --------------------------------------------------------------------------
   Sopra i 1190px il logo sbordava dalla riga dell'intestazione: fino a 45px
   fra 1191 e 1300. La striscia che usciva intercettava anche i clic destinati
   al contenuto sotto, perche' l'intestazione e' fissa e sta sopra tutto.

   Tre cose insieme lo causavano:

   - il contenitore del logo e' dichiarato con rapporto 3.5/1, mentre il logo
     vero (logo-1.png) e' 1432x968, cioe' 1,479/1: il contenitore risultava
     alto 67px per un'immagine che ne chiedeva 122;

   - l'immagine e' in position:absolute, quindi non occupa spazio e non poteva
     alzare la riga per farsi contenere. Togliendo un elemento dal flusso si
     toglie anche la correzione che il flusso faceva gratis;

   - la regola del tema figlio che l'avrebbe contenuta (object-fit:contain con
     larghezza e altezza al 100%) non arrivava mai a destinazione:
     `nextawards/style.css` e' accodato DUE volte e la seconda copia parla dopo
     il foglio del figlio, quindi `width:180px; height:auto` del padre vinceva.

   QUI SI TOCCA SOLO L'ALTEZZA, NON LA LARGHEZZA.

   Il primo tentativo stringeva anche il contenitore alla larghezza del logo
   (177,5px invece di 235-420). Funzionava, ma la riga dell'intestazione
   distribuisce lo spazio FRA gli elementi: restringendo il logo, il menu
   scivolava a sinistra - di 28px a 1280 e di 120 a 1920 - e perdeva la
   posizione centrata che aveva dall'origine. La larghezza del contenitore
   resta quindi quella di sempre, e il menu resta dov'era.

   Le due copie del logo restano sovrapposte in position:absolute, perche' e'
   cosi' che si dissolvono una nell'altra allo scorrimento: rimetterle tutte e
   due nel flusso le impilerebbe una sotto l'altra. Quello che cambia non e'
   dove stanno, ma che adesso obbediscono al contenitore invece di tenersi una
   misura propria piu' grande di lui.

   `object-fit: contain` le fa stare dentro senza deformarle, e
   `object-position: left` le tiene a filo a sinistra, dove il logo e' sempre
   stato: dentro un contenitore piu' largo di lui, senza quest'ultima riga si
   centrerebbe e si sposterebbe a destra di una trentina di pixel.

   Perche' 120px e non altro: la riga dell'intestazione misura il logo piu'
   20px di riempimento, e il distanziatore sotto l'intestazione fissa e' tarato
   su 140px (sezione 2). 120 + 20 = 140, cioe' l'intestazione torna alta quanto
   il sito ha sempre assunto che fosse - a ogni larghezza, invece che solo sopra
   i 1800px, dove finora il difetto si riassorbiva da se'.

   Il !important non e' un vezzo. Oltre al padre caricato due volte, il blocco
   "CSS aggiuntivo" del tema (wp-custom-css) arriva DOPO questo foglio e sugli
   schermi Retina a oltre 1024px rimette `width:140px` sul logo. Senza
   !important il difetto resterebbe la', e il logo avrebbe due misure diverse
   secondo lo schermo di chi guarda.

   Nota: la sezione 3 contiene, fra 1190 e 1319px, un primo tentativo di
   contenere il logo (`max-width:100%; height:auto` sull'immagine). Era giusto
   nell'intento e inefficace, perche' il `max-width:none !important` del tema
   figlio lo annullava. Resta li' innocuo: da qui in poi se ne occupa questo
   blocco.                                                                   */

@media (min-width: 1191px) {
	.header__logo {
		/* la larghezza resta quella di prima: la decide la sezione 3 e il
		   foglio del tema figlio. Qui si corregge solo l'altezza. */
		height: 120px;
	}

	.header__logo-img,
	.header__logo_white-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain;
		object-position: left center;
	}
}


/* --------------------------------------------------------------------------
   34. Il rientro delle righe «di cui» nella tabella nutrizionale (Fase 166)
   --------------------------------------------------------------------------
   Su un'etichetta nutrizionale i sotto-valori stanno rientrati rispetto alla
   voce che li contiene: si vede a colpo d'occhio che gli acidi grassi saturi
   sono una parte dei grassi, e gli zuccheri una parte dei carboidrati, invece
   di sembrare voci a se'.

   ATTENZIONE, QUESTA REGOLA DIPENDE DALLA POSIZIONE DELLE RIGHE.

   Il foglio di stile non sa leggere il testo di una cella: le due righe si
   possono colpire solo per il posto che occupano, la terza e la quinta.

     1 Energia
     2 Grassi
     3 di cui acidi grassi saturi   <- rientrata
     4 Carboidrati
     5 di cui zuccheri              <- rientrata
     6 Proteine
     7 Sale
     8 Vitamina A
     9 Vitamina D
    10 Vitamina B12

   Se un giorno si aggiunge o si toglie una riga, il rientro finisce sulla riga
   sbagliata **senza che niente lo segnali**. Per questo il controllo 10 di
   `controllo.py` verifica che la terza e la quinta riga comincino davvero per
   «di cui»: se l'ordine cambia, lo dice.

   Il rientro e' piu' piccolo sul telefono, dove la prima colonna e' stretta e
   ogni pixel tolto manda l'etichetta a capo una riga prima.                 */

.my_table.wp-block-table tbody tr:nth-child(3) td:first-child,
.my_table.wp-block-table tbody tr:nth-child(5) td:first-child {
	padding-left: 26px;
}

@media (max-width: 480px) {
	.my_table.wp-block-table tbody tr:nth-child(3) td:first-child,
	.my_table.wp-block-table tbody tr:nth-child(5) td:first-child {
		padding-left: 18px;
	}
}


/* --------------------------------------------------------------------------
   35. L'ordine della sezione «Le nostre uova» sul telefono (Fase 167)
   --------------------------------------------------------------------------
   La sezione e' fatta di due colonne:

     SINISTRA                        DESTRA
       titolo della sezione            foto delle uova
       Freschezza Garantita            Qualita' Nutrizionali + tabella
       Valore nutrizionale elevato
       Alta digeribilita'
       Consegna rapida e garantita

   Sul telefono le colonne si impilano in ordine: prima tutta la sinistra,
   quindi anche il riquadro della consegna, e solo dopo la foto e la tabella.
   Il committente le vuole in quest'ordine:

       i testi
       la foto delle uova
       la tabella nutrizionale
       Consegna rapida e garantita

   cioe' la colonna destra va infilata IN MEZZO alla sinistra, fra l'ultimo
   testo e il riquadro della consegna.

   Non si puo' fare spostando le colonne, perche' il pezzo da spostare sta
   dentro una di loro. Si fa togliendo di mezzo le due scatole-colonna
   (`display: contents`): i loro figli diventano tutti fratelli, e a quel punto
   si possono ordinare uno per uno.

   Le colonne non hanno sfondo, bordo, riempimento ne' margine - verificato -
   quindi togliere la loro scatola non fa perdere niente.

   DUE CAUTELE, tutte e due imparate sbagliando.

   La prima: ogni selettore parte da `.section-eggs > .wp-block-columns`, con
   il maggiore. Dentro il riquadro della consegna c'e' un ALTRO blocco di
   colonne, che tiene l'icona del camioncino accanto al titolo: senza il
   maggiore le regole prendevano anche quelle, e l'icona finiva sotto il
   titolo invece che sopra.

   La seconda: l'ordine non e' scritto con i numeri di riga, che si
   romperebbero appena qualcuno aggiunge un blocco. Si dice invece:

     - tutto quello che sta nella prima colonna viene per primo;
     - poi tutto quello che sta nella seconda;
     - tranne l'ULTIMO blocco della prima colonna, che va in fondo.

   Il riquadro della consegna e' l'ultimo blocco della sua colonna, e questa
   regola continua a valere anche se i testi davanti aumentano o diminuiscono.

   Lo stacco fra le colonne (40px) qui diventerebbe lo stacco fra ognuno dei
   sette blocchi, sommandosi ai margini che gia' hanno: per questo si azzera e
   si lascia fare ai margini, che sono quelli di prima.                      */

@media (max-width: 781px) {

	.section-eggs > .wp-block-columns {
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 0;
	}

	/* le due scatole-colonna spariscono dal flusso: restano i loro figli */
	.section-eggs > .wp-block-columns > .wp-block-column {
		display: contents;
	}

	.section-eggs > .wp-block-columns > .wp-block-column:first-child > * {
		order: 1;
	}

	.section-eggs > .wp-block-columns > .wp-block-column:last-child > * {
		order: 2;
	}

	/* il riquadro della consegna: ultimo della sua colonna, ultimo di tutti */
	.section-eggs > .wp-block-columns > .wp-block-column:first-child > :last-child {
		order: 3;
	}

	/* Azzerando lo stacco fra le colonne, la foto finirebbe appiccicata
	   all'ultimo testo. Qui le si ridanno i 40px che la separavano dai testi
	   prima, quando quello stacco lo dava il contenitore delle colonne. */
	.section-eggs > .wp-block-columns > .wp-block-column:last-child > :first-child {
		margin-top: 40px;
	}
}

/* ==========================================================================
   Come controlliamo i riscontri
   ==========================================================================
   Fase 172. La riga che dice **come** si verifica chi scrive una
   testimonianza. Non è una rifinitura: l'art. 22 comma 4-bis del Codice del
   Consumo chiede di dire se e come si verifica, e il riquadro finora
   dichiarava la verifica senza spiegarla.

   Il colore è più tenue del testo del riquadro (#444) perché è una
   precisazione, non il messaggio: #5a5a5a su bianco dà 7,0:1, ben oltre il
   4,5:1 richiesto. Tenue non vuol dire illeggibile.

   Lo stacco sopra c'è solo quando la nota segue le testimonianze: dopo il
   riquadro, che già finisce con il suo pulsante, sarebbe spazio doppio.
   ========================================================================== */

.ailov-come-controlliamo {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #5a5a5a;
	text-align: center;
}

.myts-vuoto + .ailov-come-controlliamo {
	margin-top: 1.1rem;
}

/* la nota dopo le testimonianze ha bisogno di piu' aria: sopra di lei finisce
   lo slider, che non ha un fondo come il riquadro */
.myts-testimonials-wrapper + .ailov-come-controlliamo {
	margin-top: 2rem;
}

/* Lo stacco sotto il pulsante non è estetica. La sezione è chiusa da
   un'onda bianca che risale sul fondo colorato, e senza questo spazio l'onda
   taglia il pulsante a metà — visto, non immaginato. L'immagine dell'onda
   è alta 99px a piena larghezza, quindi a 1280px ne copre un'ottantina:
   100px la lasciano fuori con un margine.

   Il plugin fa la stessa cosa per il suo riquadro, ma solo quando le
   testimonianze sono zero. Questo pulsante compare nel caso opposto, dove
   quella regola non arriva.

   Sotto i 782px l'onda si rimpicciolisce con la pagina e ne bastano 30. */
.ailov-invito-sotto {
	margin: 1.2rem 0 0;
	padding-bottom: 100px;
	text-align: center;
}

@media (max-width: 781px) {
	.ailov-invito-sotto {
		padding-bottom: 30px;
	}
}