/*
 * Intestazione nuova del plugin (pezzo 4, dal Passo 44): header#cr-intestazione, stampato al posto di #masthead di
 * Astra dove l'intestazione è accesa. Ogni selettore comincia con #cr-intestazione (o body.admin-bar #cr-intestazione;
 * eccezione del Passo 45: html:has(#cr-intestazione) solo con scroll-padding-top): lo controlla
 * tests/controlla-css-pezzo4.py, con i divieti SEO (niente testo o link nascosto fuori dai pannelli chiusi per disegno
 * e da .cr-sr). Valori della tavola `Header` (spec, "Intestazione a 1280") con i Default del 16/10;
 * tablet e telefono derivati, da approvare. Un blocco per passo, anche vuoto: crea-zip.py taglia il file al passo.
 */

/* PASSO 44 INIZIO */
/* Intestazione chiusa (Task 3): token, barra in alto, riga principale (logo di oggi, ricerca, desideri e carrello),
   riga dei reparti; megamenu (Task 4); pannello del menu di tablet e telefono (Task 5). Astra mette
   box-sizing:border-box su tutto: qui si dice comunque dove conta. */
#cr-intestazione {
	--cr-testo: #1c1b1a;
	--cr-grigio: #6f6a66;
	--cr-superficie: #fff;
	--cr-chip: #f1efec;
	--cr-link: #8a6a1c;
	--cr-filo: rgba(28, 27, 26, .07);
	--cr-barra: #1c1b1a;
	--cr-font: 'Nunito', system-ui, sans-serif;
	display: block;
	position: relative;
	font-family: var(--cr-font);
	line-height: normal;
	color: var(--cr-testo);
}
#cr-intestazione a { color: var(--cr-testo); text-decoration: none; }
#cr-intestazione .cr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Barra in alto: nera, link bianchi a destra (il messaggio a sinistra solo se è nei dati, default 5). */
#cr-intestazione .cr-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--cr-barra);
	color: #fff;
	font-size: 12px;
	padding: 9px 44px;
}
#cr-intestazione .cr-barra-msg { margin: 0; font-size: inherit; color: inherit; }
#cr-intestazione .cr-barra-link { display: flex; column-gap: 22px; margin-left: auto; }
#cr-intestazione .cr-barra-link a { color: #fff; font-size: inherit; }

/* Riga principale: logo, ricerca che prende lo spazio libero, desideri e carrello. */
#cr-intestazione .cr-riga {
	display: flex;
	align-items: center;
	column-gap: 36px;
	background: var(--cr-superficie);
	padding: 20px 44px;
}
#cr-intestazione .cr-logo { flex: none; }
#cr-intestazione .cr-logo a { display: block; }
#cr-intestazione .cr-logo img { display: block; width: auto; height: 46px; max-width: none; }
#cr-intestazione .cr-ricerca {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	column-gap: 10px;
	height: 46px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 16px;
	background: var(--cr-chip);
}
#cr-intestazione .cr-ricerca:focus-within { outline: 2px solid var(--cr-testo); outline-offset: 0; }
#cr-intestazione .cr-ricerca svg { flex: none; }
#cr-intestazione .cr-ricerca input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--cr-testo);
	-webkit-appearance: none;
	appearance: none;
}
#cr-intestazione .cr-ricerca input[type="search"]:focus { outline: none; background: none; border: 0; box-shadow: none; }
#cr-intestazione .cr-icone { flex: none; display: flex; align-items: center; column-gap: 8px; }
#cr-intestazione .cr-icona {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	color: var(--cr-testo);
}
#cr-intestazione .cr-icona svg { display: block; }
#cr-intestazione .cr-carrello-n {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	box-sizing: border-box;
	padding: 0 4px;
	background: var(--cr-testo);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
/* A 0 pezzi il badge è vuoto e [hidden]: display solo quando si vede, così resta nascosto dal browser. */
#cr-intestazione .cr-carrello-n:not([hidden]) { display: flex; align-items: center; justify-content: center; }

/* Reparti: alta 48px con e senza "Offerte" (è lei che la fissa nella tavola), voci in basso con la riga sotto. */
#cr-intestazione .cr-reparti {
	display: flex;
	align-items: center;
	column-gap: 30px;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0 44px;
	background: var(--cr-superficie);
	border-top: 1px solid var(--cr-filo);
}
#cr-intestazione .cr-voci {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 30px;
	min-width: 0;
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
}
#cr-intestazione .cr-reparto { margin: 0; padding: 0; list-style: none; }
#cr-intestazione .cr-voce {
	display: block;
	margin: 0;
	padding: 0 2px 6px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--cr-testo);
	cursor: pointer;
}
#cr-intestazione .cr-reparto.cr-attiva > .cr-voce { font-weight: 700; border-bottom-color: var(--cr-testo); }
#cr-intestazione .cr-offerte {
	margin-left: auto;
	padding: 14px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--cr-link);
}
#cr-intestazione a:hover,
#cr-intestazione .cr-voce:hover,
#cr-intestazione .cr-voce:focus { color: var(--cr-link); background: none; }

/* Megamenu (Task 4): un pannello per reparto, nel suo li dopo la voce, sotto la riga dei reparti e sopra la pagina,
   senza velo. Chiuso con visibility:hidden come i sottomenu di Astra (M3 non letto: default, da riverificare al
   rilascio), così i link chiusi non prendono il fuoco; aperto con :hover e :focus-within anche senza JS e con
   aria-expanded dal JS. .cr-chiuso (Esc, o un altro pannello aperto) vince su tutti. Il li di una voce scende di
   10px oltre la voce senza spostare niente (padding e margine negativo): il mouse passa dalla voce al pannello
   attraverso la fascia sotto le voci senza uscire dal reparto, così non serve un ritardo di chiusura. */
#cr-intestazione .cr-reparti { position: relative; }
#cr-intestazione .cr-voci > .cr-reparto { padding-bottom: 10px; margin-bottom: -10px; }
#cr-intestazione .cr-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	box-sizing: border-box;
	padding: 34px 44px 30px;
	background: var(--cr-superficie);
	border-top: 1px solid var(--cr-filo);
	box-shadow: 0 26px 50px rgba(28, 27, 26, .13);
	font-weight: 400;
	text-align: left;
	visibility: hidden;
}
#cr-intestazione .cr-reparto:hover > .cr-mega,
#cr-intestazione .cr-reparto:focus-within > .cr-mega,
#cr-intestazione .cr-voce[aria-expanded="true"] + .cr-mega { visibility: visible; }
/* Un solo pannello: il mouse su un'altra voce col pannello chiude quello tenuto aperto dal fuoco (anche senza JS). */
#cr-intestazione .cr-voci:has(> .cr-reparto:hover > .cr-mega) > .cr-reparto:not(:hover) > .cr-mega,
#cr-intestazione .cr-voci > .cr-reparto.cr-chiuso > .cr-mega { visibility: hidden; }
/* Con un pannello aperto lo stile attivo passa alla sua voce e la voce corrente torna normale (decisione 8): una sola
   voce sottolineata. Senza JS con :hover e :focus-within, col JS con aria-expanded. */
#cr-intestazione .cr-reparto:not(.cr-chiuso):hover > .cr-voce[aria-controls],
#cr-intestazione .cr-reparto:not(.cr-chiuso):focus-within > .cr-voce[aria-controls],
#cr-intestazione .cr-voce[aria-expanded="true"] { font-weight: 700; border-bottom-color: var(--cr-testo); }
#cr-intestazione .cr-voci:has(> .cr-reparto:not(.cr-attiva):not(.cr-chiuso):hover > .cr-mega) > .cr-attiva > .cr-voce,
#cr-intestazione .cr-voci:has(> .cr-reparto:not(.cr-attiva):not(.cr-chiuso):focus-within > .cr-mega) > .cr-attiva > .cr-voce,
#cr-intestazione .cr-voci:has(.cr-voce[aria-expanded="true"]) > .cr-attiva > .cr-voce:not([aria-expanded="true"]) {
	font-weight: 400;
	border-bottom-color: transparent;
}
/* Griglia: le colonne di link (almeno le 3 della tavola, --cr-colonne dal PHP), poi "In evidenza" nell'ultima. */
#cr-intestazione .cr-mega-griglia {
	display: grid;
	grid-template-columns: repeat(var(--cr-colonne, 3), minmax(0, 1fr)) minmax(0, 1.35fr);
	column-gap: 36px;
	align-items: start;
}
#cr-intestazione .cr-col-titolo {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--cr-font);
	font-size: 10.5px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cr-grigio);
}
#cr-intestazione .cr-col ul,
#cr-intestazione .cr-chip { margin: 0; padding: 0; list-style: none; }
#cr-intestazione .cr-col li { margin: 0; padding: 5px 0; list-style: none; }
#cr-intestazione .cr-col a { font-size: 14px; font-weight: 400; }
#cr-intestazione .cr-col-categorie a { font-size: 15px; font-weight: 600; }
/* "In evidenza": due card in griglia; foto intera in un riquadro alto 150px (vuoto senza foto); titolo h2 ristilato
   (G4, DS1 A: intero), riga col solo prezzo. */
#cr-intestazione .cr-evidenza {
	grid-column: -2 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
}
#cr-intestazione .cr-evidenza > .cr-col-titolo { grid-column: 1 / -1; }
#cr-intestazione .cr-mcard { display: block; background: var(--cr-superficie); }
#cr-intestazione .cr-mcard-foto { display: block; height: 150px; background: var(--cr-superficie); }
#cr-intestazione .cr-mcard-foto img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; }
/* Il testo della card è un div (contiene l'h2): è già un blocco, basta il margine interno. */
#cr-intestazione .cr-mcard-testo { padding: 10px 12px 14px; }
#cr-intestazione h2.cr-mcard-titolo {
	margin: 0;
	padding: 0;
	font-family: var(--cr-font);
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cr-testo);
}
#cr-intestazione .cr-mcard-riga { display: block; margin-top: 3px; font-size: 12px; color: var(--cr-grigio); }
#cr-intestazione .cr-mcard-riga .amount,
#cr-intestazione .cr-mcard-riga bdi { font-size: inherit; font-weight: inherit; color: inherit; }
/* Piede: chip a sinistra, "Vedi tutti" a destra. */
#cr-intestazione .cr-mega-piede {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 24px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--cr-filo);
}
#cr-intestazione .cr-chip { display: flex; flex-wrap: wrap; gap: 10px; }
#cr-intestazione .cr-chip li { margin: 0; padding: 0; list-style: none; }
#cr-intestazione .cr-chip a { display: block; padding: 9px 15px; background: var(--cr-chip); font-size: 13px; }
#cr-intestazione .cr-vedi { margin: 0 0 0 auto; padding: 0; font-size: 14px; font-weight: 600; line-height: normal; color: var(--cr-testo); }

/* Pannello del menu di tablet e telefono (Task 5, spec "Intestazione su tablet e telefono", derivato, da approvare):
   details.cr-menu nella riga principale, prima del logo; si apre al primo tocco anche senza JS. Aperto,
   nav.cr-menu-pannello copre lo schermo (position:fixed, a tutta altezza, z-index 1000, sopra la barra di acquisto di
   casavola-acquisto a 99) e il pulsante resta in alto a sinistra sopra il pannello, con le tre righe girate in una X:
   lo chiude. Chiusi, pannello e fisarmoniche li nasconde il browser (details), come Astra tiene chiusi i suoi
   sottomenu; da 1024px .cr-menu non c'è (display:none, in NASCONDIBILI). Il segno del summary si toglie con
   list-style e display:flex (Chrome, Firefox, Safari da 18.4). */
#cr-intestazione .cr-menu { flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; }
#cr-intestazione .cr-menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
	background: var(--cr-superficie);
	color: var(--cr-testo);
}
#cr-intestazione .cr-menu-btn svg { display: block; }
#cr-intestazione .cr-menu-riga { transform-box: fill-box; transform-origin: center; }
#cr-intestazione .cr-menu[open] > .cr-menu-btn { position: fixed; top: 8px; left: 4px; z-index: 1001; }
#cr-intestazione .cr-menu[open] .cr-menu-riga-1 { transform: translateY(5px) rotate(45deg); }
#cr-intestazione .cr-menu[open] .cr-menu-riga-2 { transform: scaleX(0); }
#cr-intestazione .cr-menu[open] .cr-menu-riga-3 { transform: translateY(-5px) rotate(-45deg); }
#cr-intestazione .cr-menu-pannello {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-padding-top: 60px;
	padding: 0 0 24px;
	background: var(--cr-superficie);
	font-family: var(--cr-font);
	font-weight: 400;
	line-height: normal;
	text-align: left;
}
/* La fascia bianca in cima al pannello, alta 60px, dove sta il pulsante: resta lì scorrendo, le voci le passano
   sotto. */
#cr-intestazione .cr-menu-pannello::before {
	content: "";
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	height: 60px;
	background: var(--cr-superficie);
}
#cr-intestazione .cr-menu-voci,
#cr-intestazione .cr-menu-barra,
#cr-intestazione .cr-fisa-lista,
#cr-intestazione .cr-fisa-chip { margin: 0; padding: 0; list-style: none; }
#cr-intestazione .cr-menu-voci > li,
#cr-intestazione .cr-menu-barra > li,
#cr-intestazione .cr-fisa-lista > li,
#cr-intestazione .cr-fisa-chip > li { margin: 0; padding: 0; list-style: none; }
/* Un reparto per riga, 16px, con la linea sotto: link, nome della fisarmonica, "Offerte" (#8a6a1c). */
#cr-intestazione .cr-menu-link,
#cr-intestazione .cr-fisa > summary,
#cr-intestazione .cr-menu-pannello .cr-offerte {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--cr-filo);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--cr-testo);
	list-style: none;
	cursor: pointer;
}
#cr-intestazione .cr-menu-pannello .cr-offerte { font-weight: 600; color: var(--cr-link); }
#cr-intestazione .cr-fisa { margin: 0; padding: 0; }
/* La freccia della fisarmonica: un angolo disegnato coi bordi, senza testo; in su quando è aperta. */
#cr-intestazione .cr-fisa > summary::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	box-sizing: border-box;
	margin: 0 4px 4px 16px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}
#cr-intestazione .cr-fisa[open] > summary::after { margin-top: 4px; margin-bottom: 0; transform: rotate(-135deg); }
/* Le sotto-voci: rientrate di 16px, prima il link del reparto, poi le colonne del megamenu coi loro titoli e i chip. */
#cr-intestazione .cr-fisa-voci { padding: 4px 16px 18px 32px; border-bottom: 1px solid var(--cr-filo); }
#cr-intestazione .cr-fisa-reparto { display: block; padding: 8px 0; font-size: 15px; font-weight: 600; }
#cr-intestazione .cr-fisa-titolo {
	margin: 14px 0 2px;
	padding: 0;
	font-family: var(--cr-font);
	font-size: 10.5px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cr-grigio);
}
#cr-intestazione .cr-fisa-lista a { display: block; padding: 8px 0; font-size: 15px; font-weight: 400; }
#cr-intestazione .cr-fisa-chip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#cr-intestazione .cr-fisa-chip a { display: block; padding: 9px 15px; background: var(--cr-chip); font-size: 13px; }
/* I link della barra in fondo al pannello (restano anche nella barra, SC11). */
#cr-intestazione .cr-menu-barra { padding-top: 12px; }
#cr-intestazione .cr-menu-barra a { display: block; padding: 10px 16px; font-size: 14px; }
/* "Altro", in fondo al pannello: le pagine di servizio di oggi, che non stanno nella barra in alto (decisione 3 di
   Arcangelo del 17/10). Titolo come quelli delle colonne nella fisarmonica. */
#cr-intestazione .cr-menu-titolo {
	margin: 18px 0 0;
	padding: 0 16px;
	font-family: var(--cr-font);
	font-size: 10.5px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cr-grigio);
}
#cr-intestazione .cr-menu-altro { padding-top: 4px; }
/* Con la barra di amministrazione di WordPress (32px, 46px fino a 782px) il pannello parte sotto di lei. */
body.admin-bar #cr-intestazione .cr-menu-pannello { top: 32px; }
body.admin-bar #cr-intestazione .cr-menu[open] > .cr-menu-btn { top: 40px; }
@media (max-width: 782px) {
	body.admin-bar #cr-intestazione .cr-menu-pannello { top: 46px; }
	body.admin-bar #cr-intestazione .cr-menu[open] > .cr-menu-btn { top: 54px; }
}
/* Da 1024px c'è la riga dei reparti col megamenu: niente pannello del menu. */
@media (min-width: 1024px) {
	#cr-intestazione .cr-menu { display: none; }
}

/* Fra 1024 e 1279px le voci di oggi possono non stare su una riga: gap 16px, poi a capo (default 3, derivato). */
@media (min-width: 1024px) and (max-width: 1279px) {
	#cr-intestazione .cr-voci { column-gap: 16px; row-gap: 4px; }
}

/* Tablet (600-1023px, derivato, da approvare): margini 32px, ricerca 44px; la riga dei reparti lascia il posto al
   pannello del menu (Task 5). I tre link restano nella barra (SC11). Nel pannello righe col margine di 32px. */
@media (max-width: 1023px) {
	#cr-intestazione .cr-barra { padding: 9px 32px; }
	#cr-intestazione .cr-riga { padding: 16px 32px; }
	#cr-intestazione .cr-logo img { height: 44px; }
	#cr-intestazione .cr-ricerca { height: 44px; }
	#cr-intestazione .cr-reparti { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	#cr-intestazione .cr-menu-link,
	#cr-intestazione .cr-fisa > summary,
	#cr-intestazione .cr-menu-pannello .cr-offerte,
	#cr-intestazione .cr-menu-barra a,
	#cr-intestazione .cr-menu-titolo { padding-left: 32px; padding-right: 32px; }
	#cr-intestazione .cr-fisa-voci { padding-left: 48px; padding-right: 32px; }
	#cr-intestazione .cr-menu[open] > .cr-menu-btn { left: 20px; }
}

/* Telefono (fino a 599px, derivato, da approvare): barra 11px centrata, che va a capo coi tre link (SC11); logo al
   centro, desideri e carrello; ricerca a tutta larghezza sotto. */
@media (max-width: 599px) {
	#cr-intestazione .cr-barra { flex-wrap: wrap; justify-content: center; padding: 8px 16px; font-size: 11px; text-align: center; }
	#cr-intestazione .cr-barra-link { flex-wrap: wrap; justify-content: center; margin-left: 0; }
	#cr-intestazione .cr-riga { flex-wrap: wrap; column-gap: 8px; row-gap: 12px; padding: 8px 16px 12px; }
	#cr-intestazione .cr-logo { flex: 1 1 auto; min-width: 0; }
	#cr-intestazione .cr-logo a { display: flex; justify-content: center; }
	#cr-intestazione .cr-logo img { height: 36px; }
	#cr-intestazione .cr-ricerca { order: 3; flex: 1 1 100%; height: 44px; }
}
/* PASSO 44 FINE */

/* PASSO 45 INIZIO */
/* Riga dei reparti fissa su desktop (decisione 15, domanda 10; solo CSS, nessun interruttore, SC9). La riga dei
   reparti è figlia di header#cr-intestazione, che è alto solo quanto l'intestazione: è sticky l'intestazione intera,
   il cui genitore (div#page di Astra) arriva in fondo alla pagina. Il top negativo pari a barra + riga principale la
   fa salire finché resta in vista solo la riga dei reparti, da cui si apre il megamenu. Sotto la barra di
   amministrazione (32px da 783px) il top sale di 32px. Barra 9 + 16 + 9 (Nunito 12px) e riga 20 + 46 + 20 = 120px:
   altezze del CSS del Passo 44, misurate nel banco con Nunito, non ancora sul sito (Ruling R-T6-1): da riverificare
   al rilascio con CONFRONTA4 (misure.sopra_reparti). Nessun gestore di scroll, nessun position:fixed, nessun
   segnaposto. */
@media (min-width: 1024px) {
	#cr-intestazione {
		--cr-sopra-reparti: 120px;
		position: sticky;
		top: calc(-1 * var(--cr-sopra-reparti));
		z-index: 1000;
	}
	body.admin-bar #cr-intestazione { top: calc(32px - var(--cr-sopra-reparti)); }
	/* Correzione 1 (Ruling R-T6-4, da confermare al gate, domanda 10): la riga fissa copre la cima della finestra,
	   quindi la pagina riserva lì il suo spazio. scrollIntoView({block:'start'}) delle scorciatoie dei filtri
	   (Passo 13) e della colonna (Passo 14), le ancore e il fuoco fermano l'elemento sotto la riga e non sotto di
	   lei. 48px = altezza della riga dei reparti (min-height del Passo 44, voci su una riga), 80px con la barra di
	   amministrazione; da riverificare al rilascio con CONFRONTA4 (scrollPaddingTop = fondo della riga). Con :has()
	   vale solo dove l'intestazione c'è davvero; senza :has() resta il comportamento di prima. */
	html:has(#cr-intestazione) { scroll-padding-top: 48px; }
	html:has(body.admin-bar #cr-intestazione) { scroll-padding-top: 80px; }
}
/* PASSO 45 FINE */

/* PASSO 46 INIZIO */
/* Default del 16/10: ricerca per referenza non fatta */
/* PASSO 46 FINE */

/* PASSO 47 INIZIO */
/* Intestazione su tutto il sito (interruttore intestazione_sito), carrello e cassa esclusi: nessuna regola nuova.
   Pannello del menu (position:fixed, z-index 1000, pulsante a 1001) e megamenu (dentro #cr-intestazione sticky con
   z-index 1000 da 1024px) stanno già sopra la barra di acquisto di casavola-acquisto (.casavola-barra-acquisto,
   z-index 99, visibile solo fino a 860px). Le righe dell'intestazione hanno i loro fondi: fuori dal catalogo resta il
   fondo della pagina, il grigio #f7f6f4 è solo del catalogo (redesign.css, body.cr-moderna). Margini di Astra
   intorno all'intestazione su home e scheda non misurati (Task 0 non fatto, Ruling R-T8-1): se al rilascio servono,
   si compensano qui solo con regole su #cr-intestazione stesso. */
/* PASSO 47 FINE */

/* PASSO 48 INIZIO */
/* Default del 16/10: carrello e cassa con l'intestazione di oggi */
/* PASSO 48 FINE */

/* PASSO 49 INIZIO */
/* Testata del marchio: il suo CSS sta in aspetto/redesign.css (body.cr-moderna.cr-pagina-marchio); qui nessuna regola. */
/* PASSO 49 FINE */

/* PASSO 50 INIZIO */
/* Testo del marchio: il suo CSS sta in aspetto/redesign.css (body.cr-moderna.cr-pagina-marchio); qui nessuna regola. */
/* PASSO 50 FINE */

/* PASSO 51 INIZIO */
/* Collezioni del marchio: il loro CSS sta in aspetto/redesign.css (body.cr-moderna.cr-pagina-marchio); qui nessuna regola. */
/* PASSO 51 FINE */

/* PASSO 52 INIZIO */
/* Riga del marchio: il suo CSS sta in aspetto/redesign.css (body.cr-moderna.cr-pagina-marchio); qui nessuna regola. */
/* PASSO 52 FINE */

/* PASSO 53 INIZIO */
/* Card del marchio: il loro CSS sta in aspetto/redesign.css (body.cr-moderna.cr-pagina-marchio); qui nessuna regola. */
/* PASSO 53 FINE */

/* PASSO 54 INIZIO */
/* Default del 16/10: percorso del pezzo 1, G6 spenta */
/* PASSO 54 FINE */

/* PASSO 55 INIZIO */
/* 17/10 (Arcangelo: "il menù è più largo della pagina sotto"): da 1280px barra, riga, reparti e pannelli tengono il
 * contenuto largo quanto la pagina (1192px, centrato), come nella tavola a 1280 (44px di margine); sotto, i 44px. */
@media (min-width: 1280px) {
	#cr-intestazione :is(.cr-barra, .cr-riga, .cr-reparti, .cr-mega) {
		padding-left: max(44px, calc((100% - 1192px) / 2));
		padding-right: max(44px, calc((100% - 1192px) / 2));
	}
}
/* I nomi lunghi delle card "In evidenza" (referenze senza spazi, "M049.567.11.041.00") vanno a capo nella loro colonna. */
#cr-intestazione .cr-mcard-testo { min-width: 0; overflow-wrap: anywhere; }
/* Sulla scheda prodotto un CSS del sito mette .size-woocommerce_thumbnail { width: auto !important }: le foto delle card
 * del megamenu prendevano la larghezza dalla proporzione (fino a 283px in colonne di 122-191) e il pannello usciva dallo
 * schermo (Oreficeria, Gemme e diamanti). Qui la foto torna larga quanto la sua card. */
#cr-intestazione .cr-mcard-foto img { width: 100% !important; }
/* 17/10 (Arcangelo: "logo troppo piccolo"): logo di Casavola più alto, 76px da desktop (era 46), 58 sul tablet (44),
 * 46 sul telefono (36); stesso file e stesso alt. */
#cr-intestazione .cr-logo img { height: 76px; }
@media (max-width: 1023px) {
	#cr-intestazione .cr-logo img { height: 58px; }
}
@media (max-width: 599px) {
	#cr-intestazione .cr-logo img { height: 46px; }
}
/* Nessun cambio: categorie già a 40±2px tra intestazione e percorso (M8 da rimisurare al rilascio) */
/* 17/10 (Arcangelo: "menù non mi piace": riga delle voci, pannelli e menu del telefono; "quando cambio megamenu per un
 * attimo sparisce lo sfondo ma non gli elementi"). Testi, link e ordine invariati: solo stile. */
/* Le transizioni di Astra sui link (all .2s) tenevano a vista per 0,2s le voci di un pannello appena chiuso, senza il
 * suo fondo: nell'intestazione si animano solo i colori. */
#cr-intestazione a,
#cr-intestazione button,
#cr-intestazione summary { transition-property: color, background-color, border-color; }
/* Riga delle voci in maiuscolo come prima, nello stile nuovo: 13px, 600, .08em; freccia sotto le voci col pannello;
 * voce attiva o aperta col filo oro; il peso non cambia mai (niente salti della riga). */
#cr-intestazione .cr-voci { column-gap: 28px; }
#cr-intestazione .cr-voci .cr-voce {
	padding: 0 0 10px;
	font-size: 13px;
	font-weight: 600 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
}
#cr-intestazione .cr-voce[aria-controls]::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 0 3px 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	vertical-align: middle;
}
#cr-intestazione .cr-voce[aria-expanded="true"]::after { margin-bottom: 0; transform: rotate(-135deg); }
#cr-intestazione .cr-reparto.cr-attiva > .cr-voce,
#cr-intestazione .cr-reparto:not(.cr-chiuso):hover > .cr-voce[aria-controls],
#cr-intestazione .cr-reparto:not(.cr-chiuso):focus-within > .cr-voce[aria-controls],
#cr-intestazione .cr-voce[aria-expanded="true"] { border-bottom-color: #8a6a1c; }
#cr-intestazione .cr-reparti .cr-offerte { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* Pannelli: più aria, titoli di colonna scuri con filo sotto, voci in maiuscolo; "Scegli per categoria" in grassetto;
 * foto delle card più alte; chip e "Vedi tutti" in maiuscolo. */
#cr-intestazione .cr-mega { padding-top: 40px; padding-bottom: 34px; }
#cr-intestazione .cr-mega-griglia { column-gap: 40px; }
#cr-intestazione .cr-col-titolo {
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--cr-filo);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--cr-testo);
}
/* Un titolo su due righe ("Scegli per materiale cassa") non sposta il filo: tutti alti due righe, testo in basso. */
#cr-intestazione .cr-mega-griglia .cr-col-titolo { display: flex; align-items: flex-end; min-height: 2.6em; }
#cr-intestazione .cr-col li { padding: 6px 0; }
#cr-intestazione .cr-col a { font-size: 13px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: #3a3836; }
#cr-intestazione .cr-col-categorie a { font-weight: 700; color: var(--cr-testo); }
#cr-intestazione .cr-mega a:hover { color: var(--cr-link); }
#cr-intestazione .cr-mcard-foto { height: 180px; }
#cr-intestazione .cr-chip a { padding: 10px 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
#cr-intestazione .cr-vedi { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
/* Menu di tablet e telefono: reparti in maiuscolo con righe più alte, reparto aperto in oro, sotto-voci su fondo
 * #f5f4f2 con i fili, titoli scuri, chip bianchi; pagine di servizio più piccole e grigie in fondo. */
#cr-intestazione .cr-menu-link,
#cr-intestazione .cr-fisa > summary,
#cr-intestazione .cr-menu-pannello .cr-offerte {
	padding: 17px 20px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
#cr-intestazione .cr-fisa[open] > summary { color: var(--cr-link); }
#cr-intestazione .cr-fisa-voci { padding: 6px 20px 22px; background: #f5f4f2; }
#cr-intestazione .cr-fisa-reparto { padding: 12px 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#cr-intestazione .cr-fisa-titolo { margin: 18px 0 4px; font-size: 11px; color: var(--cr-testo); }
#cr-intestazione .cr-fisa-lista a { padding: 11px 0; border-bottom: 1px solid var(--cr-filo); font-size: 14px; }
#cr-intestazione .cr-fisa-chip a { background: var(--cr-superficie); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
#cr-intestazione .cr-menu-barra a { padding: 12px 20px; font-size: 13px; color: #3a3836; }
#cr-intestazione .cr-menu-titolo { padding: 0 20px; font-size: 11px; color: var(--cr-testo); }
/* 17/10 (Arcangelo: "se vai in hover sul logo si ingrandisce, terrificante"): il CSS del sito ha
 * .custom-logo:hover { transform: scale(1.1) !important }; nell'intestazione il logo resta fermo. */
#cr-intestazione .cr-logo img,
#cr-intestazione .cr-logo img:hover,
#cr-intestazione .cr-logo a:hover img { transform: none !important; transition: none !important; }
/* 17/10 (Arcangelo: "i megamenu li voglio più wow, con lo stesso stile delle pagine interne"): il pannello prende il
 * fondo delle pagine del catalogo (#f5f4f2) e le sue forme: "In evidenza" come le card della griglia (bianche, foto
 * grande, ombra al passaggio), le scorciatoie come i pulsanti dei filtri, "Vedi tutti" come il pulsante nero del
 * carrello; il pannello entra con una dissolvenza breve (niente movimento con prefers-reduced-motion). */
#cr-intestazione .cr-mega {
	padding-top: 44px;
	padding-bottom: 36px;
	background: #f5f4f2;
	border-top: 0;
	box-shadow: inset 0 1px 0 var(--cr-filo), 0 30px 60px rgba(28, 27, 26, .16);
}
#cr-intestazione .cr-reparto:hover > .cr-mega,
#cr-intestazione .cr-reparto:focus-within > .cr-mega,
#cr-intestazione .cr-voce[aria-expanded="true"] + .cr-mega { animation: cr-mega-entra .18s ease-out; }
@keyframes cr-mega-entra {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	#cr-intestazione .cr-mega { animation: none !important; }
}
#cr-intestazione .cr-mega-griglia {
	grid-template-columns: repeat(var(--cr-colonne, 3), minmax(0, 1fr)) minmax(0, 1.9fr);
	column-gap: 44px;
}
#cr-intestazione .cr-col-titolo { border-bottom-color: #e2ddd5; }
#cr-intestazione .cr-col a { display: inline-block; transition-property: color, transform; transition-duration: .15s; }
#cr-intestazione .cr-col a:hover { color: var(--cr-link); transform: translateX(3px); }
/* "In evidenza": card bianche come nella griglia, foto alta 230px su bianco, titolo 14px, prezzo 15px in grassetto. */
#cr-intestazione .cr-evidenza { column-gap: 16px; }
#cr-intestazione .cr-mcard {
	background: var(--cr-superficie);
	transition-property: box-shadow, transform;
	transition-duration: .2s;
}
#cr-intestazione .cr-mcard:hover { box-shadow: 0 18px 44px rgba(28, 27, 26, .14); transform: translateY(-3px); }
#cr-intestazione .cr-mcard-foto { height: 230px; padding: 14px; box-sizing: border-box; background: var(--cr-superficie); }
#cr-intestazione .cr-mcard-testo { padding: 12px 16px 18px; }
#cr-intestazione h2.cr-mcard-titolo { font-size: 14px; font-weight: 600; line-height: 1.3; }
#cr-intestazione .cr-mcard-riga { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--cr-testo); }
/* Piede: scorciatoie come i pulsanti dei filtri (bianchi, 14px), "Vedi tutti" come il pulsante nero del carrello. */
#cr-intestazione .cr-mega-piede { margin-top: 32px; padding-top: 22px; border-top-color: #e2ddd5; }
#cr-intestazione .cr-chip a {
	padding: 12px 18px;
	background: var(--cr-superficie);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--cr-testo);
}
#cr-intestazione .cr-chip a:hover { background: #1c1b1a; color: #fff; }
/* "Vedi tutti i <reparto>, N pezzi →" (p.cr-vedi col link sul nome del reparto) diventa il pulsante nero: tutto il
 * pulsante porta al link (::after vuoto steso sul p), testo e link come prima. */
#cr-intestazione .cr-vedi {
	position: relative;
	padding: 15px 24px;
	background: #1c1b1a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
#cr-intestazione .cr-vedi:hover { background: #3a3836; }
#cr-intestazione .cr-vedi a,
#cr-intestazione .cr-vedi a:hover { color: #fff; }
#cr-intestazione .cr-vedi a::after { content: ""; position: absolute; inset: 0; }
/* Le foto dei gioielli hanno il fondo grigio chiaro (239): nei pannelli dei gioielli lo stesso ritocco delle card del
 * catalogo (Passo 2, brightness 1.067: il fondo va a bianco senza toccare i pezzi). Orologi e Montblanc no. */
#cr-intestazione :is(#cr-mega-gioielli, #cr-mega-creazioni-casavola, #cr-mega-oreficeria, #cr-mega-gemme-e-diamanti) .cr-mcard-foto img { filter: brightness(1.067); }
/* 17/10 (Arcangelo: "i megamenu avevano le immagini prima, erano fighi; ora banalotti, con prodotti piccoli"): le card
 * "In evidenza" tornano grandi come nei megamenu di prima: metà del pannello (3fr contro 1fr per colonna di link),
 * foto alta 300px senza margine interno, titolo 15px. */
#cr-intestazione .cr-mega-griglia { grid-template-columns: repeat(var(--cr-colonne, 3), minmax(0, 1fr)) minmax(0, 3fr); }
#cr-intestazione .cr-evidenza { column-gap: 20px; }
#cr-intestazione .cr-mcard-foto { height: 300px; padding: 0; }
#cr-intestazione .cr-mcard-testo { padding: 14px 18px 20px; }
#cr-intestazione h2.cr-mcard-titolo { font-size: 15px; }
#cr-intestazione .cr-mcard-riga { font-size: 16px; }

/* ===== Piè di pagina (17/10, agente "piede", provato iniettato a 1470, 1024 e 390) ===== */
/*
 * Piè di pagina (footer del builder di Astra, footer#colophon) nello stile del redesign. Solo CSS: testi, link,
 * immagini e ordine nel DOM restano quelli di oggi; nessun elemento con testo o link è nascosto, rimpicciolito a
 * zero o portato fuori schermo. Ogni selettore comincia con #colophon, così vince sulle regole del builder di Astra
 * (classi e attributi data-section) e su quelle del template Elementor 5851 (newsletter) senza !important.
 * Struttura di oggi: riga sopra (.site-above-footer-wrap) con 4 sezioni a griglia: 1 menu del piede
 * (#nav_menu-4) e newsletter (#elementor-library-4, template 5851), 2 "TI SERVE AIUTO?" (#text-6, due paragrafi di
 * link e il paragrafo coi loghi dei pagamenti), 3 "SERVIZIO CLIENTI" (#text-7), 4 logo bianco (#media_image-3);
 * riga sotto (.site-below-footer-wrap) col copyright.
 * Griglia come l'intestazione nuova: contenuto largo al massimo 1192px e centrato, margini di 44px dal desktop,
 * 32px da 600 a 1023px, 16px sotto i 600px. Fondo #f5f4f2, testo #1c1b1a, grigio #6f6a66, fili #e6e2dc.
 */

/* Fondo, carattere e colori di base delle due righe. */
#colophon .site-above-footer-wrap,
#colophon .site-below-footer-wrap {
	background: #f5f4f2;
	font-family: 'Nunito Sans', 'Nunito', system-ui, sans-serif;
	color: #1c1b1a;
}
#colophon .site-above-footer-wrap {
	border-top: 1px solid #e6e2dc;
	padding: 56px 0 44px;
}
#colophon .site-below-footer-wrap {
	min-height: 0;
	padding: 0;
	border-top: 0;
}

/* Contenitore delle due righe: 1192px di griglia centrata più i margini laterali (content-box). */
#colophon .site-above-footer-inner-wrap,
#colophon .site-below-footer-inner-wrap {
	box-sizing: content-box;
	max-width: 1192px;
	margin: 0 auto;
	padding-left: 44px;
	padding-right: 44px;
}

/* Riga sopra: quattro colonne uguali sul desktop, allineate in alto. */
#colophon .site-above-footer-inner-wrap {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 40px;
	align-items: start;
}
#colophon .site-above-footer-wrap .site-footer-section {
	display: block;
	margin: 0;
	padding: 0;
	min-width: 0;
}
#colophon .site-above-footer-wrap .footer-widget-area,
#colophon .site-above-footer-wrap .footer-widget-area-inner {
	margin: 0;
	padding: 0;
	text-align: left;
}
#colophon .site-above-footer-wrap .widget {
	margin: 0;
	padding: 0;
}

/* Testi delle colonne: 14px, interlinea ariosa ma compatta. Il paragrafo è grigio (così "Telefono:",
   "Whatsapp:" ed "E-mail:" restano etichette), i link sono nel colore del testo. */
#colophon .site-above-footer-wrap .textwidget p {
	margin: 0 0 20px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.9;
	color: #6f6a66;
}
#colophon .site-above-footer-wrap .textwidget p:last-child { margin-bottom: 0; }
#colophon .site-above-footer-wrap a {
	font-family: inherit;
	color: #1c1b1a;
	text-decoration: none;
	transition: color .15s ease;
}
#colophon .site-above-footer-wrap a:hover,
#colophon .site-above-footer-wrap a:focus,
#colophon .site-below-footer-wrap a:hover,
#colophon .site-below-footer-wrap a:focus { color: #8a6a1c; }
#colophon a:focus-visible {
	outline: 2px solid #1c1b1a;
	outline-offset: 2px;
}

/* Titoli di colonna ("TI SERVE AIUTO?", "SERVIZIO CLIENTI"): sono la prima riga del primo paragrafo, prima di un
   <br>, senza un elemento proprio. Si stilizza la riga con ::first-line: il testo resta quello nel DOM. */
#colophon #text-6 .textwidget > p:first-child::first-line,
#colophon #text-7 .textwidget > p:first-child::first-line {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
}

/* Colonna 1: menu del piede (GIOIELLI, SMARTWATCH, OROLOGI, MONTBLANC), voci in maiuscolo come i reparti. */
#colophon #nav_menu-4 ul.menu {
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}
#colophon #nav_menu-4 .menu-item {
	margin: 0;
	padding: 0;
	border: 0;
}
#colophon #nav_menu-4 .menu-item > a {
	display: inline-block;
	padding: 4px 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .06em;
	color: #1c1b1a;
}
#colophon #nav_menu-4 .menu-item > a:hover,
#colophon #nav_menu-4 .menu-item > a:focus { color: #8a6a1c; }

/* Newsletter (template Elementor 5851): "Resta aggiornato!" come etichetta di colonna, consenso in 13px,
   campo email e pulsante sulla stessa riga, angoli vivi. Il template ha due widget modulo (uno per il desktop,
   uno per il telefono, mostrati dalle classi responsive di Elementor): le regole valgono per tutti e due. Il
   contenitore del modulo ha un margine di -20px in alto nel template, che lo farebbe salire sull'etichetta. */
#colophon #elementor-library-4 .elementor-widget { margin-bottom: 0; }
#colophon #elementor-library-4 .elementor-widget-container { margin: 0; }
#colophon #elementor-library-4 .elementor-widget-text-editor {
	margin: 0 0 12px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
}
#colophon #elementor-library-4 .elementor-widget-text-editor p {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}
#colophon #elementor-library-4 .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
}
#colophon #elementor-library-4 .elementor-field-group {
	margin: 0;
	padding: 0;
}
#colophon #elementor-library-4 .elementor-field-type-acceptance {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	margin-bottom: 12px;
}
#colophon #elementor-library-4 .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	column-gap: 8px;
}
#colophon #elementor-library-4 .elementor-field-type-acceptance .elementor-field-option label {
	margin: 0;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	color: #6f6a66;
}
#colophon #elementor-library-4 .elementor-field-type-acceptance .elementor-field-option a {
	color: #1c1b1a;
	text-decoration: underline;
	text-underline-offset: 2px;
}
#colophon #elementor-library-4 .elementor-acceptance-field {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: #1c1b1a;
}
/* Campo email e pulsante affiancati (base di 120px: il campo va a capo dopo il consenso, che è largo 100%, e
   resta sulla riga del pulsante anche nella colonna di 210px a 1024); il gruppo del reCAPTCHA (solo il badge di Google, senza testo del sito)
   va dopo il pulsante con order, così non spezza la riga. */
#colophon #elementor-library-4 .elementor-field-type-email {
	flex: 1 1 120px;
	width: auto;
	max-width: none;
	min-width: 0;
}
#colophon #elementor-library-4 .elementor-field-type-recaptcha_v3 {
	order: 9;
	flex: 0 0 100%;
}
#colophon #elementor-library-4 .elementor-field-type-submit {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}
#colophon #elementor-library-4 .elementor-field-textual {
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #d9d4cc;
	border-right: 0;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: #1c1b1a;
	box-shadow: none;
}
#colophon #elementor-library-4 .elementor-field-textual::placeholder { color: #6f6a66; opacity: 1; }
#colophon #elementor-library-4 .elementor-field-textual:focus {
	border-color: #1c1b1a;
	border-right: 0;
	outline: 0;
	box-shadow: inset 0 0 0 1px #1c1b1a;
}
#colophon #elementor-library-4 .elementor-button {
	box-sizing: border-box;
	width: 48px;
	min-width: 48px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid #1c1b1a;
	border-radius: 0;
	background: #1c1b1a;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	transition: background-color .15s ease, border-color .15s ease;
}
#colophon #elementor-library-4 .elementor-button:hover,
#colophon #elementor-library-4 .elementor-button:focus {
	background: #3a3836;
	border-color: #3a3836;
	color: #fff;
}
#colophon #elementor-library-4 .elementor-button-content-wrapper { justify-content: center; }
#colophon #elementor-library-4 .elementor-button-icon,
#colophon #elementor-library-4 .elementor-button-icon i { color: #fff; font-size: 14px; }

/* Colonna 2: il paragrafo dei loghi dei pagamenti (card.png) dopo i link. */
#colophon #text-6 .textwidget img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 4px 0 0;
}

/* Colonna 4: il logo è la versione bianca (logo-casavola-bianco-footer.png, senza testo nel DOM): sul fondo chiaro
   si scurisce a #1c1b1a circa con un filtro, come il logo scuro dell'intestazione, e si allinea a destra. */
#colophon #media_image-3 { text-align: right; }
#colophon #media_image-3 img {
	display: inline-block;
	width: 132px;
	max-width: 100%;
	height: auto;
	filter: brightness(0) invert(.11);
}

/* Riga sotto: copyright in 12px grigio, a sinistra, con un filo largo quanto la griglia. */
#colophon .site-below-footer-inner-wrap {
	display: block;
}
#colophon .site-below-footer-wrap .site-footer-section {
	display: block;
	margin: 0;
	padding: 20px 0 28px;
	border-top: 1px solid #e6e2dc;
}
#colophon .site-below-footer-wrap .ast-footer-copyright {
	display: block;
	margin: 0;
	text-align: left;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: .02em;
	color: #6f6a66;
}
#colophon .site-below-footer-wrap .ast-footer-copyright p {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}
#colophon .site-below-footer-wrap .ast-footer-copyright a {
	font-size: inherit;
	color: #1c1b1a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Tablet (600-1023px, come l'intestazione): margini di 32px. A 1024 e oltre restano le quattro colonne;
   sotto, due colonne: menu e newsletter con l'aiuto, servizio clienti col logo. */
@media (max-width: 1023px) {
	#colophon .site-above-footer-inner-wrap,
	#colophon .site-below-footer-inner-wrap {
		padding-left: 32px;
		padding-right: 32px;
	}
	#colophon .site-above-footer-inner-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
	}
	#colophon .site-above-footer-wrap { padding: 48px 0 40px; }
	#colophon #media_image-3 { text-align: left; }
}

/* Telefono (sotto i 600px): margini di 16px, una colonna sola, sezioni separate da un filo; link alti almeno
   28px per il tocco. */
@media (max-width: 599px) {
	#colophon .site-above-footer-inner-wrap,
	#colophon .site-below-footer-inner-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
	#colophon .site-above-footer-wrap { padding: 8px 0 32px; }
	#colophon .site-above-footer-inner-wrap {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}
	#colophon .site-above-footer-wrap .site-footer-section {
		padding: 28px 0;
		border-top: 1px solid #e6e2dc;
	}
	#colophon .site-above-footer-wrap .site-footer-section-1 { border-top: 0; }
	#colophon .site-above-footer-wrap .site-footer-section-4 { padding-bottom: 0; }
	#colophon .site-above-footer-wrap .textwidget p { line-height: 2.1; }
	#colophon #nav_menu-4 ul.menu { margin-bottom: 28px; }
	#colophon #nav_menu-4 .menu-item > a { padding: 6px 0; }
	#colophon #media_image-3 img { width: 112px; }
	/* 16px nel campo email: sotto i 16px Safari su iPhone ingrandisce la pagina quando il campo prende il fuoco. */
	#colophon #elementor-library-4 .elementor-field-textual { font-size: 16px; }
	#colophon .site-below-footer-wrap .site-footer-section { padding: 18px 0 24px; }
}

/* ===== Carrello, cassa, ordine completato, account, lista dei desideri (17/10, agente "pagine-woo") ===== */
/*
 * Rifiniture: carrello, cassa, conferma d'ordine, il mio account e lista dei desideri con gli stessi segni del
 * catalogo e della scheda (redesign.css, intestazione.css): Nunito (--cr-font del redesign, il foglio che il sito
 * carica già), testo #1c1b1a, grigio #6f6a66, oro #8a6a1c, oro chiaro #f5edda, fili #e6e2dc, bordi #d9d4cc,
 * superfici bianche sul fondo #f7f6f4 di catalogo e scheda, angoli vivi, pulsanti neri maiuscoli 13px .06em
 * (hover #3a3836), etichette 11px maiuscole grigie .14em, prezzi in grassetto #1c1b1a come nelle card.
 *
 * Ogni regola sta dietro la classe del body della sua pagina:
 *   body.woocommerce-cart            carrello (page-id-12)
 *   body.woocommerce-checkout        cassa (page-id-13); vale anche per la conferma, che porta in più
 *                                    body.woocommerce-order-received
 *   body.woocommerce-account         il mio account (page-id-14), da collegati e da sloggati
 *   body.woocommerce-wishlist        lista dei desideri YITH (page-id-18181, ripetuta per sicurezza)
 *
 * Solo stile e posizione: nessun testo cambiato, aggiunto o tolto; niente display:none, visibility, opacity:0,
 * clip, font-size:0, fuori schermo o testo in ::before/::after. Le icone che WooCommerce e YITH già disegnano
 * nei loro pseudo-elementi cambiano solo colore.
 *
 * Carrello, cassa e conferma hanno già l'aspetto di casavola-acquisto (acquisto.css), che prende tutti i colori
 * da nove variabili --casavola-*: qui le variabili ricevono i valori del redesign, così punzoni, campi, fili,
 * metodi di pagamento scelti e pulsanti vuoti cambiano colore senza riscrivere le regole di acquisto.css.
 * Restano da riscrivere i pulsanti pieni (oro con testo scuro → neri con testo bianco) e ciò che acquisto.css
 * non tocca. !important solo dove acquisto.css, il tema o YITH lo usano già sulla stessa proprietà.
 */

/* ——— variabili e fondo ——— */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-wishlist,
body.page-id-18181 {
	--crw-font: var(--cr-font, 'Nunito', system-ui, sans-serif);
	--casavola-oro: #8a6a1c;
	--casavola-brunito: #8a6a1c;
	--casavola-inchiostro: #1c1b1a;
	--casavola-cenere: #6f6a66;
	--casavola-carta: #fff;
	--casavola-fondo: #fff;
	--casavola-filo: #e6e2dc;
	--casavola-filo-forte: #d9d4cc;
	--casavola-oro-velo: #f5edda;
	background: #f7f6f4;
}

/* Il foglio bianco di Astra (ast-separate-container) resta la superficie: sul fondo grigio diventa una card. */
body.woocommerce-cart #primary article.page,
body.woocommerce-checkout #primary article.page,
body.woocommerce-account #primary article.page,
body.woocommerce-wishlist #primary article.page,
body.page-id-18181 #primary article.page {
	background: #fff;
	color: #1c1b1a;
}

/* Titolo della pagina: lo stesso del catalogo (Nunito 600, -.03em), un gradino sotto i 46px del catalogo. */
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-account h1.entry-title,
body.woocommerce-wishlist h1.entry-title,
body.page-id-18181 h1.entry-title {
	font-family: var(--crw-font);
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: #1c1b1a;
}

/* ——— avvisi: superficie bianca, filo a sinistra ——— */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-notice,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error,
body.woocommerce-wishlist .woocommerce-message,
body.woocommerce-wishlist .woocommerce-info,
body.woocommerce-wishlist .woocommerce-error,
body.page-id-18181 .woocommerce-message,
body.page-id-18181 .woocommerce-info,
body.page-id-18181 .woocommerce-error {
	background: #fff;
	color: #1c1b1a;
	border: 1px solid #e6e2dc;
	border-left: 3px solid #8a6a1c;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--crw-font);
	font-size: 14px;
	line-height: 1.55;
}
/* WooCommerce porta il fuoco sull'avviso (es. dopo "rimosso"): anello oro invece del blu del browser. */
body.woocommerce-cart .woocommerce-message:focus,
body.woocommerce-cart .woocommerce-info:focus,
body.woocommerce-cart .woocommerce-error:focus,
body.woocommerce-checkout .woocommerce-message:focus,
body.woocommerce-checkout .woocommerce-info:focus,
body.woocommerce-checkout .woocommerce-error:focus,
body.woocommerce-account .woocommerce-message:focus,
body.woocommerce-account .woocommerce-info:focus,
body.woocommerce-account .woocommerce-error:focus,
body.woocommerce-wishlist .woocommerce-message:focus,
body.page-id-18181 .woocommerce-message:focus {
	outline: 1px solid #8a6a1c;
	outline-offset: 0;
}
/* Carrello vuoto: il tema centra la frase, qui a sinistra come gli altri avvisi. */
body.woocommerce-cart .cart-empty.woocommerce-info {
	text-align: left;
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-notice--error,
body.woocommerce-account .woocommerce-error,
body.woocommerce-wishlist .woocommerce-error,
body.page-id-18181 .woocommerce-error {
	border-left-color: #b3261e;
}
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-wishlist .woocommerce-message::before,
body.woocommerce-wishlist .woocommerce-info::before,
body.page-id-18181 .woocommerce-message::before,
body.page-id-18181 .woocommerce-info::before {
	color: #8a6a1c;
}
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-wishlist .woocommerce-error::before,
body.page-id-18181 .woocommerce-error::before {
	color: #b3261e;
}
body.woocommerce-cart .woocommerce-message a:not(.button),
body.woocommerce-cart .woocommerce-info a:not(.button),
body.woocommerce-checkout .woocommerce-message a:not(.button),
body.woocommerce-checkout .woocommerce-info a:not(.button),
body.woocommerce-account .woocommerce-message a:not(.button),
body.woocommerce-account .woocommerce-info a:not(.button),
body.woocommerce-wishlist .woocommerce-message a:not(.button),
body.page-id-18181 .woocommerce-message a:not(.button) {
	color: #8a6a1c;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ——— pulsanti pieni: neri, maiuscoli ——— */
body.woocommerce-cart .casavola-bottone:not(.vuoto),
body.woocommerce-cart .casavola-carrello-riepilogo .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart .return-to-shop .button,
body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-cart .cross-sells ul.products li.product .button,
body.woocommerce-checkout .casavola-bottone:not(.vuoto),
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .woocommerce-order .button:not(.vuoto),
body.woocommerce-account .entry-content .woocommerce .button:not(.view):not(.cancel),
body.woocommerce-account .entry-content .woocommerce button[type="submit"],
body.woocommerce-wishlist .wishlist_table .product-add-to-cart a,
body.woocommerce-wishlist .wishlist_table .add_to_cart_button,
body.woocommerce-wishlist .woocommerce-message .button,
body.page-id-18181 .wishlist_table .product-add-to-cart a,
body.page-id-18181 .wishlist_table .add_to_cart_button {
	background: #1c1b1a !important;
	border: 1px solid #1c1b1a !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: var(--crw-font);
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color .15s ease, border-color .15s ease;
}
body.woocommerce-cart .casavola-bottone:not(.vuoto):hover,
body.woocommerce-cart .casavola-bottone:not(.vuoto):focus-visible,
body.woocommerce-cart .casavola-carrello-riepilogo .wc-proceed-to-checkout .checkout-button:hover,
body.woocommerce-cart .casavola-carrello-riepilogo .wc-proceed-to-checkout .checkout-button:focus-visible,
body.woocommerce-cart .return-to-shop .button:hover,
body.woocommerce-cart .woocommerce-message .button:hover,
body.woocommerce-cart .cross-sells ul.products li.product .button:hover,
body.woocommerce-checkout .casavola-bottone:not(.vuoto):hover,
body.woocommerce-checkout .casavola-bottone:not(.vuoto):focus-visible,
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus-visible,
body.woocommerce-checkout .woocommerce-order .button:not(.vuoto):hover,
body.woocommerce-account .entry-content .woocommerce .button:not(.view):not(.cancel):hover,
body.woocommerce-account .entry-content .woocommerce button[type="submit"]:hover,
body.woocommerce-wishlist .wishlist_table .product-add-to-cart a:hover,
body.woocommerce-wishlist .wishlist_table .add_to_cart_button:hover,
body.woocommerce-wishlist .woocommerce-message .button:hover,
body.page-id-18181 .wishlist_table .product-add-to-cart a:hover,
body.page-id-18181 .wishlist_table .add_to_cart_button:hover {
	background: #3a3836 !important;
	border-color: #3a3836 !important;
	color: #fff !important;
}

/* ——— pulsanti secondari: bianchi, bordo #d9d4cc ———
 * I .vuoto di acquisto.css sono già così con le variabili sopra; qui quelli del tema (Visualizza, Annulla, matita
 * del titolo della lista). */
body.woocommerce-cart .casavola-bottone.vuoto,
body.woocommerce-checkout .casavola-bottone.vuoto,
body.woocommerce-account .entry-content .woocommerce .button.view,
body.woocommerce-account .entry-content .woocommerce .button.cancel,
body.woocommerce-wishlist .wishlist-title .show-title-form,
body.page-id-18181 .wishlist-title .show-title-form {
	background: #fff !important;
	border: 1px solid #d9d4cc !important;
	border-radius: 0 !important;
	color: #1c1b1a !important;
	font-family: var(--crw-font);
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
}
body.woocommerce-cart .casavola-bottone.vuoto:hover,
body.woocommerce-checkout .casavola-bottone.vuoto:hover,
body.woocommerce-account .entry-content .woocommerce .button.view:hover,
body.woocommerce-account .entry-content .woocommerce .button.cancel:hover,
body.woocommerce-wishlist .wishlist-title .show-title-form:hover,
body.page-id-18181 .wishlist-title .show-title-form:hover {
	background: #fff !important;
	border-color: #1c1b1a !important;
	color: #1c1b1a !important;
}

/* ——— campi: bordo #d9d4cc, 48px, angoli vivi, focus oro ——— */
body.woocommerce-cart .casavola-coupon-riga input[type="text"],
body.woocommerce-cart .shipping-calculator-form .input-text,
body.woocommerce-cart .shipping-calculator-form select,
body.woocommerce-checkout #customer_details input[type="text"],
body.woocommerce-checkout #customer_details input[type="email"],
body.woocommerce-checkout #customer_details input[type="tel"],
body.woocommerce-checkout #customer_details input[type="password"],
body.woocommerce-checkout #customer_details textarea,
body.woocommerce-checkout #customer_details select,
body.woocommerce-checkout .checkout_coupon .input-text,
body.woocommerce-account .entry-content .woocommerce form .input-text,
body.woocommerce-account .entry-content .woocommerce form select,
body.woocommerce-account .entry-content .woocommerce form textarea {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #d9d4cc !important;
	border-radius: 0 !important;
	background: #fff;
	color: #1c1b1a;
	font-family: var(--crw-font);
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none !important;
}
body.woocommerce-checkout #customer_details textarea,
body.woocommerce-account .entry-content .woocommerce form textarea { min-height: 96px; }
body.woocommerce-cart .casavola-coupon-riga input[type="text"]:focus,
body.woocommerce-cart .shipping-calculator-form .input-text:focus,
body.woocommerce-checkout #customer_details input:focus,
body.woocommerce-checkout #customer_details textarea:focus,
body.woocommerce-checkout #customer_details select:focus,
body.woocommerce-checkout .checkout_coupon .input-text:focus,
body.woocommerce-account .entry-content .woocommerce form .input-text:focus,
body.woocommerce-account .entry-content .woocommerce form select:focus,
body.woocommerce-account .entry-content .woocommerce form textarea:focus {
	border-color: #8a6a1c !important;
	outline: 1px solid #8a6a1c;
	outline-offset: -2px;
}
body.woocommerce-cart .casavola-coupon-riga input::placeholder,
body.woocommerce-checkout #customer_details input::placeholder,
body.woocommerce-checkout #customer_details textarea::placeholder,
body.woocommerce-account .entry-content .woocommerce form .input-text::placeholder {
	color: #6f6a66;
	opacity: 1;
}
/* Select2 (paese, provincia): stessa altezza e stesso bordo dei campi. */
body.woocommerce-checkout #customer_details .select2-container .select2-selection--single,
body.woocommerce-account .entry-content .woocommerce form .select2-container .select2-selection--single,
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single {
	height: 48px;
	min-height: 48px;
	padding: 0 !important;
	border: 1px solid #d9d4cc !important;
	border-radius: 0 !important;
	background: #fff;
}
body.woocommerce-checkout #customer_details .select2-container .select2-selection__rendered,
body.woocommerce-account .entry-content .woocommerce form .select2-container .select2-selection__rendered,
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__rendered {
	line-height: 46px;
	padding-left: 14px;
	color: #1c1b1a;
	font-family: var(--crw-font);
	font-size: 15px;
}
body.woocommerce-checkout #customer_details .select2-container .select2-selection__arrow,
body.woocommerce-account .entry-content .woocommerce form .select2-container .select2-selection__arrow,
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow {
	height: 46px;
}
body.woocommerce-checkout #customer_details .select2-container--focus .select2-selection--single,
body.woocommerce-checkout #customer_details .select2-container--open .select2-selection--single,
body.woocommerce-account .entry-content .woocommerce form .select2-container--focus .select2-selection--single,
body.woocommerce-account .entry-content .woocommerce form .select2-container--open .select2-selection--single {
	border-color: #8a6a1c !important;
}

/* Etichette: 11px maiuscole grigie .14em, come nel catalogo; le caselle restano frasi. */
body.woocommerce-checkout .entry-content .woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox):not(.checkbox),
body.woocommerce-account .entry-content .woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox):not(.checkbox) {
	font-family: var(--crw-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
	line-height: 1.4;
	margin-bottom: 6px;
}
body.woocommerce-checkout .entry-content .woocommerce form .form-row label .required,
body.woocommerce-account .entry-content .woocommerce form .form-row label .required {
	color: #8a6a1c;
	text-decoration: none;
	border: 0;
}
body.woocommerce-checkout .woocommerce-form__label-for-checkbox,
body.woocommerce-account .woocommerce-form__label-for-checkbox {
	font-size: 14px;
	color: #1c1b1a;
	letter-spacing: 0;
	text-transform: none;
}
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout input[type="radio"],
body.woocommerce-account input[type="checkbox"],
body.woocommerce-account input[type="radio"] {
	accent-color: #1c1b1a;
}

/* ——— carrello ——— */
body.woocommerce-cart .casavola-carrello {
	font-family: var(--crw-font);
	color: #1c1b1a;
}
body.woocommerce-cart .casavola-pezzo-foto img {
	border-color: #e6e2dc;
	background: #fff;
}
body.woocommerce-cart .casavola-pezzo-nome,
body.woocommerce-cart .casavola-pezzo-nome a {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: #1c1b1a;
	line-height: 1.4;
}
body.woocommerce-cart .casavola-pezzo-nome a:hover { color: #8a6a1c; text-decoration: none; }
body.woocommerce-cart .casavola-pezzo-prezzo,
body.woocommerce-cart .casavola-pezzo-prezzo .amount {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #1c1b1a;
}
/* Quantità: tre caselle con il bordo dei campi, senza grigi del tema. */
body.woocommerce-cart .casavola-pezzo-azioni .quantity a.minus,
body.woocommerce-cart .casavola-pezzo-azioni .quantity a.plus {
	border-color: #d9d4cc;
	border-radius: 0;
	background: #fff;
	color: #1c1b1a;
}
body.woocommerce-cart .casavola-pezzo-azioni .quantity a.minus:hover,
body.woocommerce-cart .casavola-pezzo-azioni .quantity a.plus:hover {
	background: #f7f6f4;
	color: #1c1b1a;
}
body.woocommerce-cart .casavola-pezzo-azioni .quantity input.qty {
	border-color: #d9d4cc;
	border-radius: 0;
	color: #1c1b1a;
	font-weight: 700;
}
body.woocommerce-cart .casavola-carrello a.remove {
	letter-spacing: .14em;
}
body.woocommerce-cart .casavola-carrello-azioni .casavola-bottone {
	min-height: 48px;
	font-size: 13px;
}
/* Riepilogo: superficie bianca con il filo del redesign; totale come il prezzo delle card. */
body.woocommerce-cart .casavola-carrello-riepilogo .cart_totals {
	background: #fff;
	border: 1px solid #e6e2dc;
	padding: 28px;
}
body.woocommerce-cart .casavola-carrello-riepilogo .cart_totals h2,
body.woocommerce-cart .casavola-etichetta,
body.woocommerce-cart .cross-sells > h2 {
	font-family: var(--crw-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
}
body.woocommerce-cart .casavola-carrello-riepilogo table.shop_table th {
	font-weight: 400;
	color: #6f6a66;
}
body.woocommerce-cart .casavola-carrello-riepilogo table.shop_table td,
body.woocommerce-cart .casavola-carrello-riepilogo table.shop_table td .amount {
	color: #1c1b1a;
}
body.woocommerce-cart .casavola-carrello-riepilogo table.shop_table tr + tr th,
body.woocommerce-cart .casavola-carrello-riepilogo table.shop_table tr + tr td {
	border-top: 1px solid #e6e2dc;
}
body.woocommerce-cart .casavola-carrello-riepilogo .order-total th,
body.woocommerce-cart .casavola-carrello-riepilogo .order-total td {
	vertical-align: baseline;
}
body.woocommerce-cart .casavola-carrello-riepilogo .order-total th {
	font-size: 15px;
	font-weight: 700;
	color: #1c1b1a;
}
body.woocommerce-cart .casavola-carrello-riepilogo .order-total td .amount {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #1c1b1a;
}
body.woocommerce-cart .casavola-carrello-riepilogo .order-total .includes_tax,
body.woocommerce-cart .casavola-carrello-riepilogo .order-total small {
	display: block;
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
}
body.woocommerce-cart .casavola-carrello-riepilogo .order-total small .amount {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
}
body.woocommerce-cart .casavola-carrello-riepilogo .wc-proceed-to-checkout .checkout-button {
	min-height: 52px;
	padding: 16px 20px !important;
	justify-content: center;
	align-items: center;
}
body.woocommerce-cart .shipping-calculator-button,
body.woocommerce-cart .woocommerce-shipping-destination a {
	color: #8a6a1c;
	font-size: 12px;
}
body.woocommerce-cart .return-to-shop .button {
	display: inline-block;
	padding: 16px 28px !important;
}
/* Correlati del carrello ("Potresti essere interessato a…"): le card del catalogo (redesign.css, passi 2-8) in
 * piccolo. Foto intera in un riquadro 384/460 su bianco, testi a sinistra; il CSS personalizzato del sito forza
 * foto alte 250px e titoli centrati in maiuscolo con !important, quindi !important sulle stesse proprietà. */
body.woocommerce-cart .cross-sells > h2 {
	padding-bottom: 14px;
	border-bottom: 1px solid #e6e2dc;
}
body.woocommerce-cart .cross-sells ul.products li.product {
	padding: 0;
	background: #fff;
	border: 1px solid #e6e2dc;
	border-radius: 0;
	box-shadow: none !important;
	text-align: left !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	margin: 0;
	padding: 0;
	aspect-ratio: 384 / 460;
	background: #fff;
	overflow: hidden;
}
body.woocommerce-cart .cross-sells ul.products li.product .astra-shop-thumbnail-wrap > a:not(.button) {
	display: block;
	position: absolute;
	inset: 0;
}
body.woocommerce-cart .cross-sells ul.products li.product .astra-shop-thumbnail-wrap img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: contain !important;
}
/* Foto dei gioielli: lo stesso schiarimento del catalogo porta il loro grigio #efefef al bianco. */
body.woocommerce-cart .cross-sells ul.products li.product.product_cat-gioielli .astra-shop-thumbnail-wrap img {
	filter: brightness(1.067);
}
body.woocommerce-cart .cross-sells ul.products li.product .astra-shop-summary-wrap {
	padding: 14px 16px 18px;
	margin: 0;
	text-align: left !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--crw-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -.01em;
	line-height: 1.35;
	color: #1c1b1a;
	text-transform: none !important;
	text-align: left !important;
}
body.woocommerce-cart .cross-sells ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	justify-content: flex-start;
	margin: 10px 0 14px;
	text-align: left;
}
body.woocommerce-cart .cross-sells ul.products li.product .price .amount {
	font-family: var(--crw-font);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #1c1b1a;
}
body.woocommerce-cart .cross-sells ul.products li.product .price .woocommerce-price-suffix {
	flex-basis: 100%;
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
}
body.woocommerce-cart .cross-sells ul.products li.product .button {
	display: block !important;
	width: 100% !important;
	margin: 0;
	padding: 13px 12px !important;
	font-size: 12px !important;
	text-align: center;
}
body.woocommerce-cart .cross-sells ul.products li.product .yith-wcwl-add-to-wishlist {
	margin: 10px 0 0;
	font-size: 12px;
	text-align: left;
}
body.woocommerce-cart .cross-sells ul.products li.product .yith-wcwl-add-to-wishlist a {
	color: #6f6a66;
	font-size: 12px;
}

/* ——— cassa ——— */
body.woocommerce-checkout .entry-content .woocommerce {
	font-family: var(--crw-font);
	color: #1c1b1a;
}
body.woocommerce-checkout .entry-content .woocommerce h3,
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout #order_review_heading {
	font-family: var(--crw-font);
	letter-spacing: .14em;
}
body.woocommerce-checkout #customer_details input[type="text"],
body.woocommerce-checkout #customer_details input[type="email"],
body.woocommerce-checkout #customer_details input[type="tel"] {
	color: #1c1b1a;
}
body.woocommerce-checkout #order_review {
	background: #fff;
	border-color: #e6e2dc;
}
body.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #6f6a66;
}
body.woocommerce-checkout #order_review table.shop_table td,
body.woocommerce-checkout #order_review table.shop_table td .amount {
	color: #1c1b1a;
}
body.woocommerce-checkout #order_review .order-total th {
	font-size: 15px;
	font-weight: 700;
	color: #1c1b1a;
}
body.woocommerce-checkout #order_review .order-total td .amount {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #1c1b1a;
}
body.woocommerce-checkout #order_review .order-total small,
body.woocommerce-checkout #order_review .order-total .includes_tax {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
}
body.woocommerce-checkout #order_review .order-total small .amount {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
}
/* Barra in fondo alla cassa (Indietro / Vai al pagamento): filo del redesign. */
body.woocommerce-checkout .casavola-navigazione {
	background: #fff;
	border-color: #e6e2dc;
}
body.woocommerce-checkout .casavola-navigazione .casavola-bottone {
	min-height: 48px;
	font-size: 13px;
}
/* Barra dei passaggi: la linea che unisce i punzoni prende il filo. */
body.woocommerce-checkout .casavola-passaggio {
	color: #6f6a66;
}
body.woocommerce-checkout .casavola-passaggio.attuale,
body.woocommerce-checkout .casavola-passaggio.superato {
	color: #1c1b1a;
}
body.woocommerce-checkout .casavola-passaggio a {
	color: inherit;
}
body.woocommerce-checkout #place_order {
	min-height: 52px;
	padding: 16px 20px !important;
}

/* ——— conferma d'ordine (body.woocommerce-order-received) ———
 * Il modello di casavola-acquisto (.casavola-conferma: testa, numero, dettagli in dl) e, per sicurezza, il markup
 * standard di WooCommerce (ul.woocommerce-order-overview), più i dettagli d'ordine e gli indirizzi che
 * WooCommerce aggiunge sotto in entrambi i casi. */
body.woocommerce-order-received .casavola-numero-ordine {
	font-family: var(--crw-font);
	font-weight: 600;
	letter-spacing: -.03em;
	color: #1c1b1a;
}
body.woocommerce-order-received .casavola-nota { color: #6f6a66; }
body.woocommerce-order-received .casavola-dettaglio dt {
	letter-spacing: .14em;
	color: #6f6a66;
}
body.woocommerce-order-received .casavola-dettaglio dd {
	font-weight: 700;
	color: #1c1b1a;
}
body.woocommerce-order-received .casavola-piano-conferma {
	background: #fff;
	border-color: #e6e2dc;
}
body.woocommerce-order-received .woocommerce-notice--success,
body.woocommerce-order-received .woocommerce-thankyou-order-received {
	padding: 16px 20px;
	font-size: 15px;
}
body.woocommerce-order-received ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e6e2dc;
	overflow: hidden;
}
/* Fili a sinistra e sopra ogni voce, spostati di 1px: quelli del bordo esterno si sovrappongono alla cornice,
 * così anche quando le voci vanno a capo restano solo fili singoli fra una voce e l'altra. :nth-child(n) per
 * battere ".woocommerce-page ul.order_details li:last-of-type { border: none }" di WooCommerce. */
body.woocommerce-order-received ul.woocommerce-order-overview li:nth-child(n) {
	flex: 1 1 180px;
	margin: -1px 0 0 -1px;
	padding: 18px 20px;
	border: 0;
	border-left: 1px solid #e6e2dc;
	border-top: 1px solid #e6e2dc;
	font-family: var(--crw-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
	line-height: 1.4;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #1c1b1a;
}

/* ——— dettagli d'ordine: conferma e "Visualizza" del mio account ——— */
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received .woocommerce-order-downloads__title,
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title,
body.woocommerce-account .woocommerce-order-downloads__title,
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3,
body.woocommerce-account .woocommerce-MyAccount-content > h2,
body.woocommerce-account .woocommerce-MyAccount-content > h3,
body.woocommerce-account .woocommerce-EditAccountForm legend {
	margin: 0 0 14px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid #e6e2dc;
	font-family: var(--crw-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
	line-height: 1.4;
}
/* Astra dà ai titoli degli indirizzi un riquadro grigio #fbfbfb con bordo (selettore più forte): qui tornano
 * etichette su filo, come gli altri titoli. */
body.woocommerce-order-received .woocommerce .woocommerce-customer-details .woocommerce-column__title,
body.woocommerce-account .entry-content .woocommerce .woocommerce-customer-details .woocommerce-column__title,
body.woocommerce-account .entry-content .woocommerce .woocommerce-Addresses .woocommerce-Address-title {
	margin: 0 0 14px;
	padding: 0 0 12px;
	background: none;
	border: 0;
	border-bottom: 1px solid #e6e2dc;
}
/* Le due colonne degli indirizzi (float di WooCommerce) si sfalsavano di 24px: affiancate in flex, in cima. */
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--2,
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--2,
body.woocommerce-account .woocommerce-Addresses.col2-set {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--2::before,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--2::after,
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--2::before,
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--2::after,
body.woocommerce-account .woocommerce-Addresses.col2-set::before,
body.woocommerce-account .woocommerce-Addresses.col2-set::after {
	content: none;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--2 > .woocommerce-column,
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--2 > .woocommerce-column,
body.woocommerce-account .woocommerce-Addresses.col2-set > .woocommerce-Address {
	flex: 1 1 260px;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}
body.woocommerce-order-received .woocommerce-customer-details address,
body.woocommerce-account .woocommerce-customer-details address,
body.woocommerce-account .woocommerce-Addresses address {
	margin: 0;
	padding: 20px;
	background: #fff;
	border: 1px solid #e6e2dc;
	border-radius: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: #1c1b1a;
}
body.woocommerce-order-received .woocommerce-customer-details address p,
body.woocommerce-account .woocommerce-customer-details address p {
	margin: 6px 0 0;
	color: #6f6a66;
}

/* ——— tabelle pulite: solo fili orizzontali, intestazioni come etichette ———
 * Riepilogo d'ordine, ordini e scaricamenti del mio account, lista dei desideri. */
/* Sotto un titolo con il suo filo la tabella non ripete il filo di testa. */
body.woocommerce-order-received .woocommerce-order-details__title + table.shop_table,
body.woocommerce-account .woocommerce-order-details__title + table.shop_table {
	border-top: 0;
}
body.woocommerce-order-received table.shop_table,
body.woocommerce-account table.shop_table,
body.woocommerce-wishlist table.shop_table.wishlist_table,
body.page-id-18181 table.shop_table.wishlist_table {
	width: 100%;
	margin: 0 0 32px;
	border: 0;
	border-top: 1px solid #e6e2dc;
	border-collapse: collapse;
	border-radius: 0;
	background: #fff;
	font-family: var(--crw-font);
	font-size: 14px;
	color: #1c1b1a;
}
body.woocommerce-order-received table.shop_table thead,
body.woocommerce-account table.shop_table thead,
body.woocommerce-wishlist table.wishlist_table thead,
body.page-id-18181 table.wishlist_table thead {
	background: none;
}
body.woocommerce-order-received table.shop_table thead th,
body.woocommerce-account table.shop_table thead th,
body.woocommerce-wishlist table.wishlist_table thead th,
body.page-id-18181 table.wishlist_table thead th {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid #e6e2dc;
	background: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
	line-height: 1.4;
	text-align: left;
	vertical-align: bottom;
}
body.woocommerce-order-received table.shop_table thead th .nobr,
body.woocommerce-account table.shop_table thead th .nobr,
body.woocommerce-wishlist table.wishlist_table thead th .nobr,
body.page-id-18181 table.wishlist_table thead th .nobr {
	white-space: normal;
}
body.woocommerce-order-received table.shop_table td,
body.woocommerce-order-received table.shop_table tbody th,
body.woocommerce-order-received table.shop_table tfoot th,
body.woocommerce-account table.shop_table td,
body.woocommerce-account table.shop_table tbody th,
body.woocommerce-account table.shop_table tfoot th,
body.woocommerce-wishlist table.wishlist_table td,
body.page-id-18181 table.wishlist_table td {
	padding: 16px;
	border: 0;
	border-bottom: 1px solid #e6e2dc;
	background: none;
	color: #1c1b1a;
	font-size: 14px;
	line-height: 1.5;
	vertical-align: middle;
}
body.woocommerce-order-received table.shop_table td p,
body.woocommerce-account table.shop_table td p,
body.woocommerce-account table.shop_table tbody th p {
	margin: 0;
}
body.woocommerce-order-received table.shop_table tfoot th,
body.woocommerce-account table.shop_table tfoot th {
	font-weight: 400;
	color: #6f6a66;
}
body.woocommerce-order-received table.shop_table .amount,
body.woocommerce-account table.shop_table .amount,
body.woocommerce-wishlist table.wishlist_table .amount,
body.page-id-18181 table.wishlist_table .amount {
	font-weight: 700;
	color: #1c1b1a;
}
body.woocommerce-order-received table.shop_table tfoot tr:last-child th,
body.woocommerce-account table.shop_table.order_details tfoot tr:last-child th {
	font-weight: 700;
	color: #1c1b1a;
}
body.woocommerce-order-received table.shop_table tfoot tr:last-child .amount,
body.woocommerce-account table.shop_table.order_details tfoot tr:last-child .amount {
	font-size: 18px;
	letter-spacing: -.02em;
}
/* Nomi dei prodotti scuri come i titoli delle card; il numero d'ordine resta un link oro. */
body.woocommerce-order-received table.shop_table .product-name a,
body.woocommerce-account .entry-content .woocommerce table.shop_table .product-name a {
	color: #1c1b1a;
	font-weight: 600;
	text-decoration: none;
}
body.woocommerce-order-received table.shop_table .product-name a:hover,
body.woocommerce-account .entry-content .woocommerce table.shop_table .product-name a:hover {
	color: #8a6a1c;
}
body.woocommerce-order-received table.shop_table .wc-item-meta,
body.woocommerce-account table.shop_table .wc-item-meta {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #6f6a66;
}
body.woocommerce-order-received table.shop_table .wc-item-meta p,
body.woocommerce-account table.shop_table .wc-item-meta p {
	display: inline;
}

/* ——— il mio account: menu a sinistra ——— */
body.woocommerce-account .entry-content .woocommerce {
	font-family: var(--crw-font);
	color: #1c1b1a;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	border-top: 1px solid #e6e2dc;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #e6e2dc;
	background: none;
}
/* Ogni voce comincia con un <br> (markup del sito, senza testo): la prima riga resta vuota, quindi niente
 * padding sopra e il respiro lo dà quella riga (16,8px sopra, 15px sotto). Se il <br> sparisse, padding: 15px 16px. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0 16px 15px;
	border: 0;
	border-left: 2px solid transparent;
	background: #fff;
	color: #1c1b1a;
	font-family: var(--crw-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
	text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
	background: #f7f6f4;
	color: #1c1b1a;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	border-left-color: #1c1b1a;
	background: #f7f6f4;
	font-weight: 700;
	color: #1c1b1a;
}
body.woocommerce-account .woocommerce-MyAccount-content {
	font-size: 15px;
	line-height: 1.7;
	color: #1c1b1a;
}
body.woocommerce-account .woocommerce-MyAccount-content p { color: #1c1b1a; }
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: #8a6a1c;
	text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover {
	color: #1c1b1a;
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.woocommerce-account .woocommerce-MyAccount-content strong,
body.woocommerce-account .woocommerce-MyAccount-content mark {
	background: none;
	color: #1c1b1a;
	font-weight: 700;
}
/* Pulsanti delle righe degli ordini (Pagamento, Visualizza, Annulla): più piccoli, uno sotto l'altro. */
body.woocommerce-account .woocommerce-orders-table .button {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 10px 14px !important;
	font-size: 11px !important;
	line-height: 1.2 !important;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-status {
	color: #6f6a66;
}
/* Il CSS del sito mette la cella delle azioni in display:block: le sue righe uscivano sfalsate rispetto alle
 * altre celle. Da 769px torna cella di tabella; sotto WooCommerce impila comunque le celle. */
@media (min-width: 769px) {
	body.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		display: table-cell;
	}
}
/* Indirizzi: due superfici bianche con il link "Modifica" in oro. */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 {
	margin: 0;
	border-bottom: 0;
}
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit {
	float: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8a6a1c;
}
body.woocommerce-account .entry-content .woocommerce form fieldset {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}
body.woocommerce-account .entry-content .woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}
body.woocommerce-account .woocommerce-form-row em,
body.woocommerce-account #account_display_name_description em {
	font-size: 12px;
	color: #6f6a66;
}
body.woocommerce-account .entry-content .woocommerce .woocommerce-Button,
body.woocommerce-account .entry-content .woocommerce form .button {
	min-height: 48px;
	padding: 14px 28px !important;
}
/* Mostra/nascondi password di WooCommerce: icona dentro il campo, colore del testo. */
body.woocommerce-account .entry-content .woocommerce form .show-password-input {
	color: #6f6a66;
	background: none;
	border: 0;
}

/* ——— il mio account da sloggati: accesso e registrazione ———
 * Due superfici bianche affiancate (.u-columns), titolo come i titoli del redesign, moduli senza la cornice
 * arrotondata di WooCommerce; da 860px in giù una sotto l'altra. */
body.woocommerce-account:not(.logged-in) #primary article.page {
	background: transparent;
	box-shadow: none;
}
body.woocommerce-account .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	width: 100%;
	margin: 0;
}
body.woocommerce-account .u-columns.col2-set::before,
body.woocommerce-account .u-columns.col2-set::after {
	content: none;
}
body.woocommerce-account .u-columns.col2-set .u-column1,
body.woocommerce-account .u-columns.col2-set .u-column2 {
	flex: 1 1 340px;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 32px;
	background: #fff;
	border: 1px solid #e6e2dc;
}
body.woocommerce-account .u-columns h2,
body.woocommerce-account .entry-content .woocommerce > h2 {
	margin: 0 0 20px;
	font-family: var(--crw-font);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: #1c1b1a;
}
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register,
body.woocommerce-account form.woocommerce-ResetPassword,
body.woocommerce-account form.lost_reset_password {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
}
body.woocommerce-account form.woocommerce-ResetPassword,
body.woocommerce-account form.lost_reset_password {
	max-width: 560px;
	padding: 32px;
	background: #fff;
	border: 1px solid #e6e2dc;
}
body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}
body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register .woocommerce-form-register__submit {
	float: none;
	width: 100%;
	margin: 0 0 16px;
}
body.woocommerce-account .woocommerce-LostPassword,
body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .woocommerce-privacy-policy-text,
body.woocommerce-account .woocommerce-form-register > p:not(.form-row) {
	font-size: 13px;
	color: #6f6a66;
}
body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .woocommerce-privacy-policy-text a {
	color: #8a6a1c;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ——— lista dei desideri (YITH) ——— */
body.woocommerce-wishlist .wishlist-title h2,
body.page-id-18181 .wishlist-title h2 {
	font-family: var(--crw-font);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: #1c1b1a;
}
body.woocommerce-wishlist .wishlist-title .show-title-form,
body.page-id-18181 .wishlist-title .show-title-form {
	padding: 8px 12px !important;
	font-size: 11px !important;
}
body.woocommerce-wishlist table.wishlist_table .product-thumbnail img,
body.page-id-18181 table.wishlist_table .product-thumbnail img {
	display: block;
	width: 80px;
	max-width: 80px;
	height: auto;
	background: #fff;
	border: 1px solid #e6e2dc;
}
body.woocommerce-wishlist table.wishlist_table .product-name a,
body.page-id-18181 table.wishlist_table .product-name a {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.4;
	color: #1c1b1a;
	text-decoration: none;
}
body.woocommerce-wishlist table.wishlist_table .product-name a:hover,
body.page-id-18181 table.wishlist_table .product-name a:hover {
	color: #8a6a1c;
}
body.woocommerce-wishlist table.wishlist_table .product-price,
body.page-id-18181 table.wishlist_table .product-price {
	white-space: nowrap;
}
body.woocommerce-wishlist table.wishlist_table .product-price .amount,
body.page-id-18181 table.wishlist_table .product-price .amount {
	font-size: 16px;
	letter-spacing: -.02em;
}
body.woocommerce-wishlist table.wishlist_table .product-price del .amount,
body.page-id-18181 table.wishlist_table .product-price del .amount {
	font-size: 13px;
	font-weight: 400;
	color: #6f6a66;
}
body.woocommerce-wishlist table.wishlist_table .woocommerce-price-suffix,
body.page-id-18181 table.wishlist_table .woocommerce-price-suffix {
	display: block;
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
	white-space: normal;
}
body.woocommerce-wishlist table.wishlist_table .product-stock-status span,
body.page-id-18181 table.wishlist_table .product-stock-status span {
	font-size: 13px;
	font-weight: 600;
}
body.woocommerce-wishlist table.wishlist_table .product-add-to-cart,
body.page-id-18181 table.wishlist_table .product-add-to-cart {
	text-align: right;
}
body.woocommerce-wishlist table.wishlist_table .product-add-to-cart .dateadded,
body.page-id-18181 table.wishlist_table .product-add-to-cart .dateadded {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	color: #6f6a66;
}
body.woocommerce-wishlist table.wishlist_table .product-add-to-cart a,
body.page-id-18181 table.wishlist_table .product-add-to-cart a {
	display: inline-block !important;
	width: auto;
	padding: 12px 18px !important;
	font-size: 12px !important;
	white-space: nowrap;
}
/* Togli dalla lista: quadrato con il bordo dei campi. YITH lo disegna con "#content table.wishlist_table.cart
 * a.remove" (e !important sul colore in hover), Astra aggiunge un cerchio nel ::before: stesso #content qui, e il
 * cerchio perde solo il bordo (il ::before non ha testo). */
body.woocommerce-wishlist #content table.wishlist_table.cart a.remove,
body.page-id-18181 #content table.wishlist_table.cart a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #d9d4cc;
	border-radius: 0;
	background: #fff;
	color: #6f6a66 !important;
	font-size: 18px;
	line-height: 1;
}
body.woocommerce-wishlist #content table.wishlist_table.cart a.remove::before,
body.page-id-18181 #content table.wishlist_table.cart a.remove::before {
	border: 0;
	border-radius: 0;
}
body.woocommerce-wishlist #content table.wishlist_table.cart a.remove:hover,
body.page-id-18181 #content table.wishlist_table.cart a.remove:hover {
	border-color: #1c1b1a;
	background: #fff;
	color: #1c1b1a !important;
}
/* Un CSS del sito mette in display:block (con !important) la colonna della foto sotto una certa larghezza: le
 * sue righe uscivano sfalsate rispetto alle altre celle. Nella tabella classica resta sempre una cella. */
body.woocommerce-wishlist table.wishlist_table.traditional .product-thumbnail,
body.page-id-18181 table.wishlist_table.traditional .product-thumbnail {
	display: table-cell !important;
}
/* Vista per telefono di YITH (ul.wishlist_table.mobile, servita ai browser mobili): ogni pezzo una card
 * bianca, stesse etichette e stessi prezzi della tabella. */
body.woocommerce-wishlist ul.wishlist_table.mobile,
body.page-id-18181 ul.wishlist_table.mobile {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	border: 0;
	background: none;
}
body.woocommerce-wishlist ul.wishlist_table.mobile > li,
body.page-id-18181 ul.wishlist_table.mobile > li {
	margin: 0 0 12px;
	padding: 16px;
	list-style: none;
	background: #fff;
	border: 1px solid #e6e2dc;
	font-family: var(--crw-font);
	color: #1c1b1a;
}
body.woocommerce-wishlist ul.wishlist_table.mobile .product-name h3,
body.woocommerce-wishlist ul.wishlist_table.mobile .product-name a,
body.page-id-18181 ul.wishlist_table.mobile .product-name h3,
body.page-id-18181 ul.wishlist_table.mobile .product-name a {
	font-family: var(--crw-font);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.4;
	color: #1c1b1a;
	text-decoration: none;
}
body.woocommerce-wishlist ul.wishlist_table.mobile table,
body.woocommerce-wishlist ul.wishlist_table.mobile td,
body.page-id-18181 ul.wishlist_table.mobile table,
body.page-id-18181 ul.wishlist_table.mobile td {
	border: 0;
	background: none;
	padding: 4px 8px 4px 0;
	font-size: 14px;
	color: #1c1b1a;
}
body.woocommerce-wishlist ul.wishlist_table.mobile td.label,
body.page-id-18181 ul.wishlist_table.mobile td.label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
}
body.woocommerce-wishlist ul.wishlist_table.mobile .amount,
body.page-id-18181 ul.wishlist_table.mobile .amount {
	font-weight: 700;
	color: #1c1b1a;
}
body.woocommerce-wishlist ul.wishlist_table.mobile .product-remove a,
body.page-id-18181 ul.wishlist_table.mobile .product-remove a {
	color: #6f6a66;
}
body.woocommerce-wishlist .yith-wcwl-share .yith-wcwl-share-title,
body.page-id-18181 .yith-wcwl-share .yith-wcwl-share-title {
	font-family: var(--crw-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6a66;
}

/* ——— tablet e telefono ——— */
/* Da 860px in giù acquisto.css mette in colonna le azioni del carrello: la base di 280px del codice sconto
 * (pensata per la riga) diventava un'altezza, con un vuoto bianco sotto "Applica". */
@media (max-width: 860px) {
	body.woocommerce-cart .casavola-carrello-azioni .casavola-coupon {
		flex: 0 0 auto;
	}
}
/* Fino a 768px WooCommerce impila le celle delle tabelle "responsive" (ordini): ogni ordine diventa una card. */
@media (max-width: 768px) {
	body.woocommerce-account table.shop_table_responsive {
		border-top: 0;
		background: none;
	}
	body.woocommerce-account table.shop_table_responsive tbody tr {
		margin: 0 0 16px;
		background: #fff;
		border: 1px solid #e6e2dc;
	}
	body.woocommerce-account table.shop_table_responsive tbody tr td:last-child {
		border-bottom: 0;
	}
	/* Tabella classica della lista dei desideri in uno schermo stretto con il browser da computer: scorre
	 * dentro di sé invece di allargare la pagina. */
	body.woocommerce-wishlist table.wishlist_table.traditional,
	body.page-id-18181 table.wishlist_table.traditional {
		display: block;
		overflow-x: auto;
	}
}
@media (max-width: 1023px) {
	body.woocommerce-cart h1.entry-title,
	body.woocommerce-checkout h1.entry-title,
	body.woocommerce-account h1.entry-title,
	body.woocommerce-wishlist h1.entry-title,
	body.page-id-18181 h1.entry-title {
		font-size: 32px;
	}
}
@media (max-width: 599px) {
	body.woocommerce-cart h1.entry-title,
	body.woocommerce-checkout h1.entry-title,
	body.woocommerce-account h1.entry-title,
	body.woocommerce-wishlist h1.entry-title,
	body.page-id-18181 h1.entry-title {
		font-size: 26px;
	}
	body.woocommerce-cart .casavola-carrello-riepilogo .cart_totals { padding: 20px 16px; }
	/* Correlati su due colonne come il catalogo al telefono, non una foto alta quanto lo schermo. */
	body.woocommerce-cart .cross-sells ul.products {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	body.woocommerce-cart .cross-sells ul.products::before,
	body.woocommerce-cart .cross-sells ul.products::after {
		content: none;
	}
	body.woocommerce-cart .cross-sells ul.products li.product {
		float: none;
		width: auto !important;
		margin: 0 !important;
	}
	body.woocommerce-cart .cross-sells ul.products li.product .astra-shop-summary-wrap { padding: 10px 10px 14px; }
	body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; }
	body.woocommerce-cart .cross-sells ul.products li.product .price .amount { font-size: 15px; }
	body.woocommerce-cart .cross-sells ul.products li.product .button {
		padding: 11px 6px !important;
		font-size: 11px !important;
		letter-spacing: .04em !important;
	}
	body.woocommerce-account .u-columns.col2-set .u-column1,
	body.woocommerce-account .u-columns.col2-set .u-column2,
	body.woocommerce-account form.woocommerce-ResetPassword,
	body.woocommerce-account form.lost_reset_password {
		padding: 24px 16px;
	}
	body.woocommerce-order-received ul.woocommerce-order-overview li:nth-child(n) {
		flex-basis: 40%;
	}
	body.woocommerce-wishlist table.wishlist_table .product-add-to-cart,
	body.page-id-18181 table.wishlist_table .product-add-to-cart {
		text-align: left;
	}
}

/* 17/10 (Arcangelo, pannello Orologi: "non mi convince ancora"): voci delle colonne in minuscolo 15px (le maiuscole
 * spaziate spezzavano "Frederique Constant" e "Polimero rinforzato in fibra" su più righe), titoli di colonna in uno
 * spazio alto uguale per tutti (i fili sotto i titoli tutti alla stessa altezza anche con un titolo su due righe),
 * "In evidenza" un po' più stretta (2.4fr) perché le colonne respirino, pannello che scorre dentro di sé se è più alto
 * dello schermo (Brand degli orologi: niente voci tagliate in fondo). */
#cr-intestazione .cr-mega {
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
#cr-intestazione .cr-mega-griglia {
	grid-template-columns: repeat(var(--cr-colonne, 3), minmax(0, 1fr)) minmax(0, 2.4fr);
	column-gap: 36px;
}
#cr-intestazione .cr-mega-griglia .cr-col-titolo { min-height: 3.1em; line-height: 1.3; }
#cr-intestazione .cr-col li { padding: 5px 0; }
#cr-intestazione .cr-col a {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
	color: #3a3836;
}
#cr-intestazione .cr-col-categorie a { font-weight: 600; color: var(--cr-testo); }
#cr-intestazione .cr-mcard-foto { height: 260px; }
/* 17/10: senza la banda nera (barra solo col messaggio) sopra la riga dei reparti resta solo la riga principale,
 * alta 20 + 76 (logo) + 20 = 116px: la riga dei reparti fissa sale esattamente di tanto (prima restava una striscia
 * col logo tagliato). */
@media (min-width: 1024px) {
	#cr-intestazione { --cr-sopra-reparti: 116px; }
}
/* Anteprima dei prodotti nella ricerca (JS del Passo 55): elenco sotto il campo, card come nel catalogo in piccolo. */
#cr-intestazione .cr-ricerca { position: relative; }
#cr-intestazione .cr-sugg {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1002;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	margin-top: 6px;
	padding: 8px 0 0;
	background: var(--cr-superficie);
	box-shadow: 0 24px 50px rgba(28, 27, 26, .16);
	border: 1px solid var(--cr-filo);
}
#cr-intestazione .cr-sugg-lista { margin: 0; padding: 0; list-style: none; }
#cr-intestazione .cr-sugg-lista li { margin: 0; padding: 0; list-style: none; }
#cr-intestazione .cr-sugg-voce {
	display: flex;
	align-items: center;
	column-gap: 14px;
	padding: 8px 16px;
	color: var(--cr-testo);
	text-decoration: none;
}
#cr-intestazione .cr-sugg-voce:hover,
#cr-intestazione .cr-sugg-voce:focus { background: #f5f4f2; color: var(--cr-testo); }
#cr-intestazione .cr-sugg-foto { flex: none; width: 64px; height: 64px; background: #fff; }
#cr-intestazione .cr-sugg-foto img { display: block; width: 64px !important; height: 64px; max-width: none; object-fit: contain; }
#cr-intestazione .cr-sugg-testo { display: flex; flex-direction: column; row-gap: 4px; min-width: 0; }
#cr-intestazione .cr-sugg-nome { font-size: 14px; font-weight: 600; line-height: 1.3; }
#cr-intestazione .cr-sugg-prezzo { font-size: 14px; font-weight: 700; color: var(--cr-testo); }
#cr-intestazione .cr-sugg-prezzo del { font-weight: 400; color: var(--cr-grigio); }
#cr-intestazione .cr-sugg-prezzo ins { text-decoration: none; background: none; }
#cr-intestazione .cr-sugg-prezzo .woocommerce-price-suffix { margin-left: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-grigio); }
#cr-intestazione .cr-sugg-vuoto { margin: 0; padding: 14px 16px 16px; font-size: 14px; color: var(--cr-grigio); }
#cr-intestazione .cr-sugg-tutti {
	display: block;
	width: 100%;
	margin: 8px 0 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 0;
	background: #1c1b1a;
	color: #fff;
	font-family: var(--cr-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}
#cr-intestazione .cr-sugg-tutti:hover { background: #3a3836; }
#cr-intestazione .cr-ricerca.cr-sugg-carica svg { opacity: .45; }
/* 17/10 (Arcangelo: "dobbiamo lasciare lo sfondo bianco nel carrello, wishlist e account? non mi convince"): via il
 * foglio bianco di Astra intorno alla pagina. Il contenuto sta sul fondo del catalogo, largo quanto le altre pagine,
 * col titolo grande della testata del catalogo; i blocchi (carrello e riepilogo, colonne della cassa, menu e contenuto
 * dell'account, lista dei desideri) restano bianchi, come le card del catalogo. Testi e link invariati. */
body.woocommerce-cart #primary article.page,
body.woocommerce-checkout #primary article.page,
body.woocommerce-account #primary article.page,
body.woocommerce-wishlist #primary article.page,
body.page-id-18181 #primary article.page {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-account #primary,
body.woocommerce-wishlist #primary,
body.page-id-18181 #primary { margin-top: 44px !important; margin-bottom: 64px !important; padding: 0 !important; }
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-account h1.entry-title,
body.woocommerce-wishlist h1.entry-title,
body.page-id-18181 h1.entry-title { margin: 0 0 28px !important; font-size: 46px !important; }
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header,
body.woocommerce-wishlist .entry-header,
body.page-id-18181 .entry-header { margin: 0 !important; padding: 0 !important; text-align: left; }
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart .casavola-carrello-riepilogo .cart_totals,
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .wc-empty-cart-message,
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout form.checkout #order_review,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account:not(.logged-in) .woocommerce > .u-columns > .u-column1,
body.woocommerce-account:not(.logged-in) .woocommerce > .u-columns > .u-column2,
body.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login,
body.page-id-18181 .wishlist-title-container,
body.page-id-18181 form#yith-wcwl-form {
	box-sizing: border-box;
	padding: 28px !important;
	background: #fff !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation { padding: 12px 0 !important; }
body.page-id-18181 .wishlist-title-container { margin-bottom: 16px !important; padding-top: 22px !important; padding-bottom: 22px !important; }
@media (max-width: 599px) {
	body.woocommerce-cart #primary,
	body.woocommerce-checkout #primary,
	body.woocommerce-account #primary,
	body.woocommerce-wishlist #primary,
	body.page-id-18181 #primary { margin-top: 24px !important; }
	body.woocommerce-cart h1.entry-title,
	body.woocommerce-checkout h1.entry-title,
	body.woocommerce-account h1.entry-title,
	body.woocommerce-wishlist h1.entry-title,
	body.page-id-18181 h1.entry-title { font-size: 34px !important; margin-bottom: 18px !important; }
	body.woocommerce-cart .woocommerce-cart-form,
	body.woocommerce-cart .casavola-carrello-riepilogo .cart_totals,
	body.woocommerce-checkout form.checkout #customer_details,
	body.woocommerce-checkout form.checkout #order_review,
	body.woocommerce-account .woocommerce-MyAccount-content,
	body.page-id-18181 form#yith-wcwl-form { padding: 18px 16px !important; }
}
/* Recensioni Google sopra il piè di pagina (PHP, recensioni_google, hook astra_footer_before): fascia bianca col filo,
 * contenuto centrato nei 1192px della pagina, stelle oro, voto e numero, "Leggi le recensioni" in oro. */
#cr-recensioni-piede { background: #fff; border-top: 1px solid #e6e2dc; }
#cr-recensioni-piede .cr-rec-link {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; max-width: 1192px;
	margin: 0 auto; padding: 24px 44px; color: #1c1b1a; text-decoration: none;
}
#cr-recensioni-piede .cr-rec-g { flex: none; display: block; width: 22px; height: 22px; }
#cr-recensioni-piede .cr-rec-stelle {
	position: relative; flex: none; display: block; width: 110px; height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath fill='%23e2ddd5' d='M10 0l2.9 6 6.6.8-4.9 4.5 1.3 6.5L10 14.6 4.1 17.8l1.3-6.5L.5 6.8 7.1 6z'/%3E%3C/svg%3E") repeat-x 0 0 / 22px 20px;
}
#cr-recensioni-piede .cr-rec-stelle-piene {
	position: absolute; top: 0; left: 0; bottom: 0; display: block;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath fill='%23c19a3e' d='M10 0l2.9 6 6.6.8-4.9 4.5 1.3 6.5L10 14.6 4.1 17.8l1.3-6.5L.5 6.8 7.1 6z'/%3E%3C/svg%3E") repeat-x 0 0 / 22px 20px;
}
#cr-recensioni-piede .cr-rec-testo { font-family: "Nunito Sans", "Nunito", sans-serif; font-size: 16px; color: #1c1b1a; }
#cr-recensioni-piede .cr-rec-voto { font-size: 18px; font-weight: 700; }
#cr-recensioni-piede .cr-rec-leggi {
	font-family: "Nunito Sans", "Nunito", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: #8a6a1c; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
#cr-recensioni-piede .cr-rec-link:hover .cr-rec-leggi { color: #1c1b1a; }
@media (max-width: 599px) {
	#cr-recensioni-piede .cr-rec-link { padding: 20px 16px; }
}
/* 17/10 (Arcangelo, tablet: "non ci siamo proprio", la ricerca schiacciata fra logo e quattro icone): sotto i 1024px
 * come sul telefono: prima riga pulsante del menu, logo al centro e icone; la ricerca su una riga sua, a tutta
 * larghezza. */
@media (max-width: 1023px) {
	#cr-intestazione .cr-riga { flex-wrap: wrap; column-gap: 8px; row-gap: 12px; }
	#cr-intestazione .cr-logo { flex: 1 1 auto; min-width: 0; }
	#cr-intestazione .cr-logo a { display: flex; justify-content: center; }
	#cr-intestazione .cr-ricerca { order: 3; flex: 1 1 100%; }
}
/* 17/10 (Arcangelo: "vanno troppo in basso le voci dentro la tendina"): pannello più corto. Voci fitte (14px, 3px sopra
 * e sotto), meno spazio in alto (30px), sotto i titoli (8px) e prima delle scorciatoie (20px); foto "In evidenza" alte
 * 210px. Con Brand degli orologi (15 voci) il pannello sta nello schermo. */
#cr-intestazione .cr-mega { padding-top: 30px; padding-bottom: 26px; }
#cr-intestazione .cr-mega-griglia .cr-col-titolo { min-height: 2.8em; margin-bottom: 8px; padding-bottom: 8px; }
#cr-intestazione .cr-col li { padding: 3px 0; }
#cr-intestazione .cr-col a { font-size: 14px; line-height: 1.3; }
#cr-intestazione .cr-mcard-foto { height: 210px; }
#cr-intestazione .cr-mcard-testo { padding: 10px 14px 14px; }
#cr-intestazione .cr-mega-piede { margin-top: 20px; padding-top: 16px; }
/* Una colonna con più di 10 voci (Brand degli orologi, Tipologia di Montblanc) prende due tracce della griglia e mette
 * le voci in due colonne: il pannello resta basso. La griglia ha una traccia in più solo in quei pannelli. */
#cr-intestazione .cr-mega-griglia > .cr-col:has(li:nth-child(11)) { grid-column: span 2; }
#cr-intestazione .cr-mega-griglia > .cr-col:has(li:nth-child(11)) ul { columns: 2; column-gap: 28px; }
#cr-intestazione .cr-mega-griglia > .cr-col:has(li:nth-child(11)) li { break-inside: avoid; }
#cr-intestazione .cr-mega-griglia[style*="--cr-colonne:3"]:has(> .cr-col li:nth-child(11)) { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2.4fr); }
#cr-intestazione .cr-mega-griglia[style*="--cr-colonne:4"]:has(> .cr-col li:nth-child(11)) { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 2.4fr); }
#cr-intestazione .cr-mega-griglia[style*="--cr-colonne:5"]:has(> .cr-col li:nth-child(11)) { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 2.4fr); }
/* PASSO 55 FINE */

/* PASSO 56 INIZIO */
/* Nessuna regola: il passo è di redesign.css (scheda tecnica fissa sulla scheda prodotto) */
/* PASSO 56 FINE */

/* PASSO 57 INIZIO */
/* Nessuna regola: il passo è di redesign.css (cuore dei preferiti sulla card senza fondo bianco) */
/* PASSO 57 FINE */

/* PASSO 58 INIZIO */
/* Nessuna regola: il passo è solo PHP (scheda e catalogo senza recensioni dei clienti) */
/* PASSO 58 FINE */

/* PASSO 59 INIZIO */
/* Finestra di chiusura per ferie (issue #7, interruttore ferie_popup). Il <template id="cr-ferie-modello"> è stampato
   da Casavola_Redesign_Ferie in wp_footer e non si disegna; il blocco 59 di intestazione.js, dentro la finestra delle
   date e dopo 3 secondi, ne copia il contenuto in un <dialog class="cr-ferie"> e lo apre con showModal(). Nessun testo
   nascosto: la finestra chiusa non c'è nel documento. Moderna, tutta centrata: fondo bianco, spigoli vivi, 480px al
   massimo (16px di margine sul telefono), velo rgba(28,27,26,.5) con 2px di sfocatura, ombra 0 30px 60px; X in alto a
   destra (area 44px), logo 104px, etichetta 16px/600 .12em oro tra due fili, due testi tutti a 16px divisi da un filo
   oro di 40px, pulsante nero a tutta larghezza. Ingresso di 220ms, tolto con prefers-reduced-motion. I pulsanti e le
   immagini del sito hanno stili propri su selettori semplici: qui si sovrascrivono con selettori più specifici (e
   !important sul logo). Contorno da tastiera 1px #8a6a1c. */
dialog.cr-ferie {
	box-sizing: border-box; width: min(480px, calc(100vw - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto;
	padding: 0; border: 0; border-radius: 0; background: #fff; color: #1c1b1a; overflow: auto;
	box-shadow: 0 30px 60px rgba(28, 27, 26, .18); animation: cr-ferie-entra .22s ease-out;
	font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; line-height: 1.65; text-align: center;
}
@keyframes cr-ferie-entra {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	dialog.cr-ferie { animation: none; }
}
dialog.cr-ferie:focus { outline: none; }
dialog.cr-ferie::backdrop { background: rgba(28, 27, 26, .5); backdrop-filter: blur(2px); }
dialog.cr-ferie .cr-ferie-corpo { padding: 44px 44px 40px; }
dialog.cr-ferie .cr-ferie-corpo img.cr-ferie-logo {
	display: block; width: 104px !important; max-width: 104px !important; height: auto !important; margin: 0 auto 32px;
}
dialog.cr-ferie .cr-ferie-corpo p.cr-ferie-etichetta {
	display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 20px;
	font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: #8a6a1c;
}
dialog.cr-ferie .cr-ferie-corpo p.cr-ferie-etichetta::before,
dialog.cr-ferie .cr-ferie-corpo p.cr-ferie-etichetta::after { content: ''; width: 32px; height: 1px; background: #8a6a1c; opacity: .5; }
dialog.cr-ferie .cr-ferie-corpo p.cr-ferie-testo { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.65; color: #1c1b1a; }
dialog.cr-ferie .cr-ferie-corpo p.cr-ferie-testo strong { font-weight: 700; }
dialog.cr-ferie .cr-ferie-corpo hr.cr-ferie-filo { width: 40px; height: 1px; margin: 24px auto; padding: 0; border: 0; background: #8a6a1c; opacity: .5; }
dialog.cr-ferie button.cr-ferie-chiudi,
dialog.cr-ferie button.cr-ferie-chiudi:focus {
	display: block; box-sizing: border-box; width: 100%; height: 52px; min-height: 0; margin: 28px 0 0; padding: 0 24px;
	border: 1px solid #1c1b1a; border-radius: 0; background: #1c1b1a; color: #fff; box-shadow: none; cursor: pointer;
	font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
	transition: background-color .15s ease, border-color .15s ease;
}
dialog.cr-ferie button.cr-ferie-chiudi:hover { border-color: #3a3836; background: #3a3836; color: #fff; }
dialog.cr-ferie button.cr-ferie-x,
dialog.cr-ferie button.cr-ferie-x:hover,
dialog.cr-ferie button.cr-ferie-x:focus {
	position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
	color: #6f6a66; line-height: 0; cursor: pointer;
}
dialog.cr-ferie button.cr-ferie-x:hover { color: #1c1b1a; }
dialog.cr-ferie button.cr-ferie-x svg { display: block; width: 18px; height: 18px; }
dialog.cr-ferie button.cr-ferie-chiudi:focus-visible,
dialog.cr-ferie button.cr-ferie-x:focus-visible { outline: 1px solid #8a6a1c; outline-offset: 2px; }
@media (max-width: 599px) {
	dialog.cr-ferie .cr-ferie-corpo { padding: 40px 24px 28px; }
	dialog.cr-ferie .cr-ferie-corpo img.cr-ferie-logo { width: 92px !important; max-width: 92px !important; margin-bottom: 24px; }
}
/* PASSO 59 FINE */

/* PASSO 60 INIZIO */
/* Nessuna regola qui: il riquadro d'acquisto della scheda sta in redesign.css (blocco 60). */
/* PASSO 60 FINE */

/* PASSO 61 INIZIO */
/*
 * Card "In evidenza" del megamenu in saldo (issue #12, interruttore megamenu_sconti): come le card del catalogo
 * (Passo 7), il prezzo con il listino barrato accanto e l'etichetta "-N%" nera in alto a sinistra sulla foto. Il PHP
 * (trait-megamenu-sconti.php) stampa `<del aria-hidden="true">listino</del> <ins>prezzo</ins>` e span.cr-mcard-sconto
 * solo per i prodotti semplici in saldo; le altre card restano come prima. Prezzo prima (order), listino 13px #6f6a66
 * barrato con filo di 1px.
 */
#cr-intestazione .cr-mcard-foto { position: relative; }
#cr-intestazione .cr-mcard-sconto {
	position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 9px; background: #1c1b1a; color: #fff;
	font-family: var(--cr-font); font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: normal;
}
#cr-intestazione .cr-mcard-riga:has(> del) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
#cr-intestazione .cr-mcard-riga > ins { order: 1; background: none; color: var(--cr-testo); text-decoration: none; }
#cr-intestazione .cr-mcard-riga > del {
	order: 2; font-size: 13px; font-weight: 400; color: var(--cr-grigio); text-decoration: line-through;
	text-decoration-thickness: 1px;
}
/* PASSO 61 FINE */

/* PASSO 62 INIZIO */
/* Nessuna regola: il testo della categoria raccolto sta in redesign.css (blocco 62) */
/* PASSO 62 FINE */

/* PASSO 63 INIZIO */
/* Nessuna regola: il pulsante WhatsApp verde della scheda sta in redesign.css (blocco 63) */
/* PASSO 63 FINE */

/* PASSO 64 INIZIO */
/* Nessuna regola: la scheda prodotto sul telefono sta in redesign.css (blocco 64) */
/* PASSO 64 FINE */

/* PASSO 65 INIZIO */
/* Nessuna regola: la galleria fissa della scheda sta in redesign.css (blocco 65), il resto del passo è PHP */
/* PASSO 65 FINE */

/* PASSO 66 INIZIO */
/* Nessuna regola: etichetta e titolo sopra la descrizione della scheda stanno in redesign.css (blocco 66) */
/* PASSO 66 FINE */

/* PASSO 67 INIZIO */
/* Nessuna regola: la riga del marchio come le categorie sta in redesign.css (blocco 67) */
/* PASSO 67 FINE */

/* PASSO 68 INIZIO */
/* Nessuna regola: il percorso in fondo sta in redesign.css (blocco 68) */
/* PASSO 68 FINE */

/* PASSO 69 INIZIO */
/* Nessuna regola: i numeri di pagina con lo scorrimento infinito li toglie redesign.js (blocco 69) */
/* PASSO 69 FINE */

/* PASSO 70 INIZIO */
/* Nessuna regola: il testo del marchio nel riquadro bianco sta in redesign.css (blocco 70) */
/* PASSO 70 FINE */

/* PASSO 71 INIZIO */
/* Nessuna regola: il logo del marchio nella testata sta in redesign.css (blocco 71) */
/* PASSO 71 FINE */

/* PASSO 72 INIZIO */
/* Passo 72 (interruttore marchi_piede; Arcangelo 21/10: i loghi dei marchi prima del piè di pagina, senza appesantire,
 * «deve essere elegante»): la striscia che Marchi_Piede stampa sopra il piè di pagina, su tutto il sito tranne carrello
 * e cassa, sullo stesso fondo della pagina (#f7f6f4, il body: «non mi piace differenza di colori di sfondo»), senza
 * scritte («toglierei i nostri marchi»). Loghi alti 72px a 36px l'uno dall'altro (54px e 24px sul telefono: «troppo
 * piccoli e troppo lontani»), mix-blend-mode multiply sul fondo del nastro (il bianco dei JPG sparisce), tutti dello
 * stesso grigio antracite («loghi tutti di colori diversi»: grayscale, brightness .66 e contrast 5 portano il segno al
 * nero e il quasi bianco al bianco senza sgranare i bordi, poi opacity), pieni al passaggio. Nessun JS: il nastro con la lista due volte scorre lento (140s) di metà della sua larghezza
 * (solo transform), si ferma al passaggio e col tab; content-visibility:auto salta la resa finché la striscia è lontana.
 * Con prefers-reduced-motion niente animazione: la riga si scorre a mano e la copia (aria-hidden, link fuori dal tab)
 * esce dalla vista. */
#cr-marchi-piede {
	content-visibility: auto; contain-intrinsic-size: auto 132px;
	background: #f7f6f4; border-bottom: 1px solid #e6e2dc; padding: 24px 0 30px; text-align: center;
	font-family: "Nunito Sans", "Nunito", sans-serif;
}
#cr-marchi-piede .cr-marchi-piede-binario {
	overflow: hidden; max-width: 1180px; margin: 0 auto;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
#cr-marchi-piede .cr-marchi-piede-nastro { display: flex; width: max-content; background: #f7f6f4; animation: cr-marchi-scorri 140s linear infinite; }
#cr-marchi-piede .cr-marchi-piede-binario:hover .cr-marchi-piede-nastro,
#cr-marchi-piede .cr-marchi-piede-binario:focus-within .cr-marchi-piede-nastro { animation-play-state: paused; }
#cr-marchi-piede .cr-marchi-piede-lista { display: flex; align-items: center; gap: 36px; margin: 0; padding: 0 36px 0 0; list-style: none; }
#cr-marchi-piede .cr-marchi-piede-lista li { flex: none; margin: 0; padding: 0; list-style: none; }
#cr-marchi-piede .cr-marchi-piede-lista a { display: flex; align-items: center; justify-content: center; height: 72px; }
#cr-marchi-piede .cr-marchi-piede-lista a:focus-visible { outline: 1px solid #1c1b1a; outline-offset: 6px; }
#cr-marchi-piede .cr-marchi-piede-logo {
	display: block; width: auto; height: 72px; max-width: none;
	mix-blend-mode: multiply; filter: grayscale(1) brightness(.66) contrast(5); opacity: .6; transition: opacity .3s ease;
}
#cr-marchi-piede .cr-marchi-piede-lista a:hover .cr-marchi-piede-logo,
#cr-marchi-piede .cr-marchi-piede-lista a:focus .cr-marchi-piede-logo { opacity: 1; }
#cr-marchi-piede .cr-marchi-piede-nome { color: #6f6a64; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@keyframes cr-marchi-scorri { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 860px) {
	#cr-marchi-piede { padding: 18px 0 22px; }
	#cr-marchi-piede .cr-marchi-piede-lista { gap: 24px; padding-right: 24px; }
	#cr-marchi-piede .cr-marchi-piede-lista a,
	#cr-marchi-piede .cr-marchi-piede-logo { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
	#cr-marchi-piede .cr-marchi-piede-binario { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
	#cr-marchi-piede .cr-marchi-piede-nastro { animation: none; padding: 0 20px; }
	#cr-marchi-piede .cr-marchi-piede-lista li { scroll-snap-align: start; }
	#cr-marchi-piede .cr-marchi-piede-copia { display: none; }
}
/* PASSO 72 FINE */

/* PASSO 73 INIZIO */
/* Nessuna regola: il Passo 73 (marchio_mostra_altro) è solo PHP */
/* PASSO 73 FINE */

/* PASSO 74 INIZIO */
/* Nessuna regola: la testata del marchio sul telefono sta in redesign.css (blocco 74) */
/* PASSO 74 FINE */

/* PASSO 75 INIZIO */
/* Nessuna regola: la rotazione 360 nella galleria sta in redesign.css (blocco 75) */
/* PASSO 75 FINE */

/* PASSO 76 INIZIO */
/* Passo 76 (issue #26; Arcangelo 23/10: «farei sulla banda tutta bianca», «anche i laterali»): la barra in fondo
 * alla cassa (Torna al carrello / Vai al pagamento) bianca da bordo a bordo della finestra, col filo in cima, invece
 * che solo sopra la colonna. Il fondo esce ai lati con border-image (outset di 100vmax, larghezza 0): pittura fuori
 * dalla scatola che non sposta nulla e non fa scorrere la pagina in orizzontale; pulsanti, misure e posizione fissa
 * in basso restano quelli di oggi. */
body.woocommerce-checkout .casavola-navigazione {
	border-image: linear-gradient(#e6e2dc 0 1px, #fff 1px) fill 0 / 0 / 0 100vmax;
}
/* PASSO 76 FINE */