/* =========================================================
   DAISY DESIGN — home (dal progetto Claude Design) + footer
   =========================================================
   I toni vengono dal progetto grafico; i caratteri restano
   quelli del sito (Instrument Serif + Outfit), così la home
   non parla una lingua diversa dalle altre pagine. */

/* Il cassetto del mini-carrello parcheggia fuori dal bordo destro e su
   schermi stretti regala alla pagina uno scorrimento orizzontale fantasma.
   Il progetto grafico prevedeva già la cintura di sicurezza: la teniamo. */
html, body { overflow-x: clip; }

/* Senza questo, «larghezza 1400» vuol dire due cose diverse a seconda
   dell'elemento: 1400 in tutto, oppure 1400 più i bordi. Due sezioni con lo
   stesso codice finivano larghe 1400 e 1512, e il testo dell'una partiva venti
   pixel più a destra dell'altra. Il bordo si misura dentro, sempre. */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- una sola fascia ----------
   Ogni sezione di prim'ordine occupa tutta la riga e porta il margine nel
   padding, così: padding-inline: max(--bordo, (100% - --larghezza) / 2).
   Il margine cresce da solo quando lo schermo supera la larghezza utile, e
   il primo carattere di ogni sezione cade sulla stessa verticale a qualunque
   misura. NON usare «max-width + margin: 0 auto»: fa lo stesso lavoro finché
   lo schermo è stretto e poi, sopra i 1400, indenta di un margine in più. */

/* ---------- la scala ----------
   Prima in giro per il sito c'erano cinquantasette misure di carattere diverse
   — 13, 13,5, 14, 14,5, 16, 16,5, 17, 17,5… — e ogni sezione aveva la sua
   spaziatura. Differenze che nessuno sa giustificare una per una, ma che messe
   in fila si sentono tutte: è quello che fa sembrare una pagina «non finita».
   Qui i gradini sono dodici, distanti circa un quarto l'uno dall'altro, e tutto
   il resto ci si appoggia. Chi aggiunge una sezione domani parte da qui. */
:root {
	--t-micro: 10.5px;   /* occhielli e micro-etichette, sempre maiuscolo e spaziato */
	--t-mini: 12.5px;    /* bottoni, briciole di pane, voci del piè di pagina */
	--t-nota: 13.5px;    /* didascalie, note, secondi prezzi */
	--t-piccolo: 15px;   /* righe di tabella e schede tecniche */
	--t-corpo: 17px;     /* il testo corrente */
	--t-lungo: 19px;     /* il testo corrente dove la colonna è larga */
	--t-t1: 21px;
	--t-t2: 26px;
	--t-t3: clamp(26px, 2.6vw, 34px);
	--t-t4: clamp(30px, 3.4vw, 44px);
	--t-t5: clamp(34px, 4.2vw, 56px);
	--t-display: clamp(40px, 5.2vw, 72px);

	/* ---------- il ritmo ----------
	   Due soli respiri verticali (pieno e ridotto) e un solo margine laterale:
	   così passando da una sezione all'altra il testo non balla. */
	--bordo: clamp(24px, 4vw, 56px);
	/* --bordo è quanto si respira dentro una sezione. --margine è dove comincia
	   la pagina: coincide con --bordo finché lo schermo sta dentro la larghezza
	   utile, poi cresce da solo per tenere il testo sulla stessa verticale.
	   Ogni lato che tocca il bordo dello schermo usa --margine; i lati interni
	   usano --bordo. Prima erano la stessa cosa scritta in due modi, e sopra i
	   1400 pixel le due scritture si separavano di una ventina di pixel. */
	--margine: max(var(--bordo), (100vw - var(--larghezza)) / 2);
	--sezione: clamp(48px, 6vw, 88px);
	--sezione-m: clamp(36px, 4.5vw, 64px);
	--vuoto-1: 4px;
	--vuoto-2: 8px;
	--vuoto-3: 12px;
	--vuoto-4: 16px;
	--vuoto-5: 24px;
	--vuoto-6: 32px;
	--vuoto-7: 48px;

	/* LA GRIGLIA DELLE SEZIONI — una sola, per tutto il sito.
	   Ogni sezione a due colonne si inventava le sue proporzioni: 1:0.9,
	   1:1, 1:1.1, 0.9:1.1, 1.1:1, 1.25:1. Sei modi di dire la stessa cosa,
	   e sei assi diversi lungo la pagina — il difetto che si vedeva come
	   «il bottone non è allineato col testo sotto». Qui la griglia è una:
	   chi la usa cade sullo stesso asse, sempre.
	   Si cambia QUI, in un punto solo, e si scrive nei campi di Elementor
	   come var(--griglia-due), esattamente come var(--sezione). */
	--griglia-due: minmax(0, 1.1fr) minmax(0, 1fr);
	--respiro-colonne: var(--sezione);
	/* dove comincia la seconda colonna, misurato dal bordo della finestra.
	   Serve alle bande a tutta pagina (foto a sinistra, testo a destra):
	   loro non hanno il margine da cui contare, ma il testo deve cadere
	   sullo stesso asse di tutto il resto. */
	--asse-secondario: calc(var(--margine) + (100vw - 2 * var(--margine) - var(--respiro-colonne)) * 1.1 / 2.1 + var(--respiro-colonne));

	--larghezza: 1400px; /* la colonna del sito */
	/* La colonna di lettura dei testi lunghi: circa settanta caratteri.
	   In rem e non in em, perché em si calcola sul corpo dell'elemento stesso —
	   e un titoletto da 34px moltiplicava per 34, uscendo largo il doppio del
	   testo che introduce. */
	--misura: 40rem;
}

:root {
	--dh-fondo: #F4F0E8;
	--dh-inchiostro: #1E1D19;
	--dh-spento: #6B6758; /* il tono del progetto (#7E7A6B) dava 3,78 di contrasto: questo passa anche sulla sabbia */
	--dh-filo: #E2DCD0;
	--dh-oliva: #2E3724;
	--dh-oliva-cupa: #333D28;
	--dh-sabbia: #EAE4D9;
	--dh-chiaro: #F4F0E8;
}

/* ---------- la testata ----------
   Il tema la costruiva con tre colonne del blocco «Colonne»: a schermo largo
   la colonna dell'icona account veniva calcolata larga zero e il suo contenuto
   traboccava sopra la pastiglia del telefono; sotto i 768px spariva del tutto
   la colonna con telefono e carrello. Qui la testata è una riga sola, con tre
   pezzi che si dispongono da soli, e l'icona account non c'è: nel progetto non
   c'era, e il collegamento all'area personale vive nel footer. */

.dh-testata {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(244, 240, 232, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--dh-filo);
}

.dh-testata__interno {
	padding: 12px var(--margine);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vuoto-5);
}

.dh-testata__interno > * { margin-block-start: 0 !important; }

.dh-testata__logo { flex: 0 0 auto; margin: 0; line-height: 0; }
.dh-testata__logo img { display: block; height: 56px; width: auto; }

/* il menu prende lo spazio che avanza e si centra dentro */
.dh-testata .dh-testata__menu {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

.dh-testata .wp-block-navigation-item__content {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4A473C;
	padding: 12px 0;
	white-space: nowrap;
}

.dh-testata .wp-block-navigation-item__content:hover,
.dh-testata .current-menu-item .wp-block-navigation-item__content {
	color: var(--dh-inchiostro);
}

.dh-testata .current-menu-item .wp-block-navigation-item__content {
	box-shadow: inset 0 -1px 0 0 var(--dh-inchiostro);
}

.dh-testata__azioni {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.dh-testata__azioni > * { margin-block-start: 0 !important; }

/* pastiglia del telefono. Il tema le appiccica una classe di dimensione
   (has-superbfont-xxsmall-font-size) che vale più della nostra: qui la
   pareggiamo, o resta l'unico 14px in una testata fatta di 12,5. */
.dh-testata .dh-testata__tel .wp-block-button__link,
.dh-testata .dh-testata__tel .wp-block-button__link[class*="font-size"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid #C9C2B2;
	border-radius: 999px;
	background: transparent;
	color: var(--dh-oliva);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 500;
	white-space: nowrap;
}

.dh-testata .dh-testata__tel .wp-block-button__link:hover {
	border-color: var(--dh-oliva);
	background: transparent;
	color: var(--dh-oliva);
}

/* pastiglia del carrello: la parola «Carrello» gliela mettiamo noi in PHP,
   perché il blocco di WooCommerce disegna solo l'icona e il contatore */
.dh-testata .wc-block-mini-cart { margin: 0; }

.dh-testata .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid #C9C2B2;
	border-radius: 999px;
	background: transparent;
}

.dh-testata .wc-block-mini-cart__button:hover { border-color: var(--dh-oliva); }

.dh-testata__carrello {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dh-inchiostro);
}

.dh-testata .wc-block-mini-cart__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	/* WooCommerce scrive i colori del contatore in uno stile IN LINEA
	   sull'elemento, ricavandoli dagli attributi del blocco: crema su crema,
	   cioè un «0» sospeso nel vuoto sopra il carrello. Uno stile in linea batte
	   qualunque foglio, quindi qui !important non è pigrizia: è l'unico modo di
	   riprendersi una proprietà che un terzo ha inchiodato sull'elemento. */
	background: var(--dh-oliva) !important;
	color: var(--dh-chiaro) !important;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	border: 0;
}

/* Sotto i 1100px il menu esteso non ci sta più: passa al panino. Il tema lo
   mostrava solo sotto i 600, e in mezzo le voci si accavallavano. */
@media (max-width: 1100px) {
	/* Panino e carrello sono due comandi pari: stanno insieme a destra, non uno
	   in mezzo alla riga e uno in fondo. Con la distribuzione a spaziatura
	   uniforme il panino galleggiava fra il marchio e il carrello senza
	   appartenere a nessuno dei due. */
	.dh-testata__interno { justify-content: flex-start; }
	.dh-testata .dh-testata__menu { margin-inline-start: auto; }

	/* e col trattamento del carrello, non da glifo nudo accanto a una pastiglia */
	.dh-testata .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border: 1px solid #C9C2B2;
		border-radius: 999px;
		color: var(--dh-inchiostro);
		transition: border-color 0.15s ease;
	}
	.dh-testata .wp-block-navigation__responsive-container-open:hover { border-color: var(--dh-oliva); }
	.dh-testata .wp-block-navigation__responsive-container-open svg { width: 20px; height: 20px; }
	.dh-testata .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.dh-testata .dh-testata__menu { flex: 0 0 auto; }
	.dh-testata__interno { justify-content: space-between; }
}

/* Dentro il pannello del panino le voci vanno toccate col dito: WordPress le
   lascia alte quanto il testo (19px), e anche la crocetta di chiusura è un
   quadratino di 24. Qui diventano bersagli veri. */
.dh-testata .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 13px 8px;
	font-size: var(--t-piccolo);
}

.dh-testata .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
}

.dh-testata .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* Sul telefono resta il carrello: è l'unico gesto che si può perdere.
   Il numero vive nel footer e nella pagina Contatti, a un tocco di distanza. */
@media (max-width: 560px) {
	/* il contenitore dei bottoni, non il bottone: il selettore del tema
	   (.wp-block-buttons > .wp-block-button) pesa più del nostro */
	.dh-testata__azioni .wp-block-buttons { display: none; }
	.dh-testata__logo img { height: 46px; }
	.dh-testata__interno { padding: 10px 16px; gap: 8px; }
}

/* ---------- lessico comune ---------- */

.dh-occhiello {
	display: block;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dh-spento);
}

.dh-occhiello--chiaro { color: rgba(244, 240, 232, 0.62); }

.dh-titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t5);
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 10px 0 0;
	color: var(--dh-inchiostro);
}

.dh-bottone {
	display: inline-block;
	text-align: center;
	background: var(--dh-oliva);
	color: var(--dh-chiaro);
	border-radius: 2px;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 18px 34px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.dh-bottone:hover { background: #222A1A; color: var(--dh-chiaro); }

.dh-bottone--chiaro { background: var(--dh-chiaro); color: var(--dh-oliva); }
.dh-bottone--chiaro:hover { background: #FFFFFF; color: var(--dh-oliva); }

.dh-filo {
	display: inline-block;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dh-inchiostro);
	text-decoration: none;
	border-bottom: 1px solid #B7B0A0;
	padding-bottom: 3px;
}

.dh-etichetta {
	display: block;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(244, 240, 232, 0.62);
	margin-bottom: 14px;
}

/* La centratura sta nel padding, non in max-width + margin auto.
   Con max-width ogni sezione si centrava per conto suo e il bordo sinistro del
   testo cadeva a 56px su una pagina e a 76 o 96 su un'altra, a seconda di
   quanto era larga la sezione: passando da una pagina all'altra il testo
   ballava. Così invece il margine è il più grande fra il bordo minimo e quello
   che serve per centrare — identico ovunque, per costruzione. */

/* ---------- la testata di pagina ----------
   Ne esistevano quattro copie quasi identiche, una per sezione: è lo stesso
   tipo di duplicazione che rendeva il sito disomogeneo. Qui è una sola, e le
   pagine la chiamano col nome che preferiscono. */
.dt-testata,
.dc-testata,
.ds-testata,
.di-testata {
	padding: var(--sezione) var(--margine) var(--sezione-m);
	display: grid;
	grid-template-columns: var(--griglia-due);
	gap: var(--respiro-colonne);
	align-items: end;
}

.ds-testata { border-bottom: 1px solid var(--dh-filo); }

/* Dove sotto la testata c'è subito una sezione con il suo respiro, il suo
   si accorcia: due respiri di fila fanno un buco, non un'apertura. */
.dt-testata:has(+ .dv-vuoto),
.dt-testata:has(+ .dn-aiuto),
.dt-testata:has(+ .dl-elenco) { padding-bottom: var(--vuoto-6); }

.dt-testata__titolo,
.dc-testata__titolo,
.ds-testata__titolo,
.di-testata__titolo {
	/* niente vedove («Facciamo una cosa / sola.»): le righe si bilanciano */
	text-wrap: balance;
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-display);
	line-height: 0.98;
	letter-spacing: -0.02em;
	margin: var(--vuoto-3) 0 0;
	max-width: 13ch;
	color: var(--dh-inchiostro);
}

.dt-testata__intro,
.dc-testata__intro,
.ds-testata__intro,
.di-testata__intro {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: #454236;
	margin: 0;
	max-width: 46ch;
	text-wrap: pretty;
}

/* Sotto i 640 la testata si impila: intro sotto il titolo, piena larghezza.
   La regola storica era rimasta MOZZATA — selettori senza corpo, CSS invalido
   che muore in silenzio (identica anche su main) — e le testate restavano a
   due colonne perfino sul telefono, con l'intro in colonnine da 150px.
   Le sorelle di storia e ispirazione sono contenitori Elementor: il loro
   impilarsi sta nei comandi, non qui. */
@media (max-width: 640px) {
	.dt-testata,
	.dc-testata {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vuoto-5);
		align-items: start;
	}
}

/* ---------- apertura ---------- */

.dh-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border-bottom: 1px solid var(--dh-filo);
	background: var(--dh-fondo);
}

.dh-hero__testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
	padding: var(--sezione) var(--bordo);
}

.dh-hero__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-display);
	line-height: 0.98;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 10ch;
	color: var(--dh-inchiostro);
}

.dh-hero__sotto {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-lungo);
	line-height: 1.55;
	font-weight: 300;
	color: #454236;
	margin: 0;
	max-width: 46ch;
	text-wrap: pretty;
}

.dh-hero__azioni { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }

.dh-hero__cartella { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }

.dh-hero__punti { display: flex; gap: 5px; }

.dh-hero__punto {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

.dh-hero__nota { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-nota); font-weight: 300; color: var(--dh-spento); }

.dh-hero__foto { position: relative; min-height: 480px; background: var(--dh-sabbia); }

.dh-hero__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- configuratore ---------- */

.dh-config {
	background: var(--dh-oliva-cupa);
	color: var(--dh-chiaro);
}

.dh-config__interno { padding: var(--sezione) var(--margine) 40px; }

.dh-config__testata {
	/* la stessa griglia dei comandi qui sotto: prima l'intro era un flex
	   space-between e galleggiava fra gli assi (rassegna di design) */
	display: grid;
	grid-template-columns: var(--griglia-due);
	gap: var(--respiro-colonne);
	align-items: end;
	margin-bottom: 52px;
}

.dh-config__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t5);
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 10px 0 0;
	color: var(--dh-chiaro);
}

.dh-config__intro {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: rgba(244, 240, 232, 0.62);
	margin: 0;
	max-width: 38ch;
	text-wrap: pretty;
}

.dh-config__griglia {
	display: grid;
	grid-template-columns: var(--griglia-due);
	gap: var(--respiro-colonne);
	align-items: start;
}

.dh-config__palco {
	position: relative;
	height: 470px;
	overflow: hidden;
	border: 1px solid rgba(244, 240, 232, 0.22);
	background: radial-gradient(120% 90% at 50% 22%, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.16) 72%);
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.dh-config__palco:active { cursor: grabbing; }

.dh-config__scena, .dh-config__scena canvas { width: 100% !important; height: 100% !important; display: block; }

.dh-config__aiuto {
	position: absolute;
	left: 18px;
	bottom: 16px;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(244, 240, 232, 0.62);
	pointer-events: none;
}

.dh-config__scheda { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 18px 0 0; }

.dh-config__nome { font-family: var(--daisy-serif, serif); font-size: var(--t-t2); color: var(--dh-chiaro); }

.dh-config__spec { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-piccolo); font-weight: 300; color: rgba(244, 240, 232, 0.62); }

.dh-config__destra { display: flex; flex-direction: column; gap: 36px; }

.dh-config__modelli, .dh-config__gambe { display: flex; flex-wrap: wrap; gap: 8px; }

.dh-pillola {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	letter-spacing: 0.02em;
	padding: 11px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.15s ease;
	border: 1px solid rgba(244, 240, 232, 0.22);
	background: transparent;
	color: var(--dh-chiaro);
}

.dh-pillola:hover { border-color: rgba(244, 240, 232, 0.6); }

.dh-pillola.is-scelta {
	border-color: var(--dh-chiaro);
	background: var(--dh-chiaro);
	color: var(--dh-oliva-cupa);
}

.dh-pillola--gamba { display: inline-flex; align-items: center; gap: 9px; color: rgba(244, 240, 232, 0.7); }
.dh-pillola--gamba.is-scelta { color: var(--dh-oliva-cupa); }

.dh-gamba__punto { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset; }

.dh-config__blocco--gambe.is-spenta { opacity: 0.35; pointer-events: none; }

.dh-config__finiture { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.dh-finitura { display: flex; flex-direction: column; gap: 8px; border: none; background: none; padding: 0; cursor: pointer; text-align: left; }

.dh-finitura__campo {
	display: block;
	height: 86px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
	transition: box-shadow 0.15s ease;
}

.dh-finitura.is-scelta .dh-finitura__campo { box-shadow: 0 0 0 2px var(--dh-oliva-cupa) inset, 0 0 0 2px var(--dh-chiaro); }

.dh-finitura__nome { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-mini); font-weight: 300; color: rgba(244, 240, 232, 0.62); }

.dh-finitura.is-scelta .dh-finitura__nome { color: var(--dh-chiaro); }

/* la riga sotto dice già «IVA inclusa»: il suffisso di WooCommerce nel
   prezzo la ripeteva a 30px di distanza */
.dh-config__prezzo .woocommerce-price-suffix { display: none; }

.dh-config__prezzo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(244, 240, 232, 0.22);
	padding-top: 26px;
}

.dh-config__cifra { display: block; font-family: var(--daisy-serif, serif); font-size: var(--t-t3); line-height: 1; color: var(--dh-chiaro); }

.dh-config__cifra .woocommerce-Price-amount { color: inherit; }

.dh-config__nota { display: block; font-family: var(--daisy-sans, sans-serif); font-size: var(--t-mini); font-weight: 300; color: rgba(244, 240, 232, 0.62); margin-top: 6px; }

.dh-config__coda {
	border-top: 1px solid rgba(244, 240, 232, 0.22);
	padding: 20px var(--bordo);
	text-align: center;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.06em;
	font-weight: 300;
	color: rgba(244, 240, 232, 0.62);
}

/* ---------- collezione ---------- */

.dh-collezione { padding: var(--sezione) 0 var(--sezione); border-bottom: 1px solid var(--dh-filo); background: var(--dh-fondo); }

.dh-collezione__testata {
	margin: 0 0 44px;
	padding: 0 var(--margine);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.dh-collezione__frecce { display: flex; gap: 8px; }

.dh-freccia {
	width: 46px;
	height: 46px;
	border: 1px solid #C9C2B2;
	background: none;
	border-radius: 999px;
	cursor: pointer;
	font-size: var(--t-corpo);
	color: var(--dh-inchiostro);
	line-height: 1;
	transition: all 0.15s ease;
}

.dh-freccia:hover { border-color: var(--dh-inchiostro); background: var(--dh-sabbia); }

.dh-rail {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 var(--margine);
	/* senza, lo snap aggancia la prima scheda al bordo del contenitore
	   IGNORANDO il padding: all'avvio «Lotus» finiva a x=0, col prezzo
	   incollato al bordo dello schermo, fuori dall'asse del titolo */
	scroll-padding-inline: var(--margine);
	scrollbar-width: none;
}

.dh-rail::-webkit-scrollbar { height: 0; }

.dh-rail__coda { flex: 0 0 32px; }

.dh-scheda {
	flex: 0 0 300px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	color: var(--dh-inchiostro);
	text-decoration: none;
}

.dh-scheda__foto {
	position: relative;
	display: block;
	width: 300px;
	height: 360px;
	background: var(--dh-sabbia);
	overflow: hidden;
}

.dh-scheda__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }

.dh-scheda:hover .dh-scheda__foto img { transform: scale(1.04); }

.dh-scheda__nome { font-family: var(--daisy-serif, serif); font-size: var(--t-t1); line-height: 1.1; margin-top: 18px; }

.dh-scheda__spec { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-nota); font-weight: 300; color: var(--dh-spento); margin-top: 6px; }

.dh-scheda__prezzo { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-piccolo); color: var(--dh-oliva); margin-top: 10px; }

.dh-scheda__prezzo del { color: var(--dh-spento); margin-right: 6px; }
.dh-scheda__prezzo ins { text-decoration: none; }

/* ---------- laboratorio ---------- */

.dh-lab { border-bottom: 1px solid var(--dh-filo); background: var(--dh-fondo); }

.dh-lab__riga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.dh-lab__foto { position: relative; min-height: 420px; background: var(--dh-sabbia); }

.dh-lab__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.dh-lab__testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: var(--sezione) var(--bordo);
}

.dh-lab__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t4);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 16ch;
	color: var(--dh-inchiostro);
}

.dh-lab__testo p {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.65;
	font-weight: 300;
	color: #454236;
	margin: 0;
	max-width: 44ch;
	text-wrap: pretty;
}

.dh-lab__numeri {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--dh-filo);
}

.dh-lab__numero {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 36px var(--bordo);
	border-right: 1px solid var(--dh-filo);
}

.dh-lab__numero:last-child { border-right: 0; }

.dh-lab__numero strong { font-family: var(--daisy-serif, serif); font-weight: 400; font-size: var(--t-t2); line-height: 1; color: var(--dh-inchiostro); }

.dh-lab__numero span { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-nota); font-weight: 300; color: var(--dh-spento); }

/* ---------- journal ---------- */

/* ---------- il diario, in home ----------
   Era un elenco a due colonne: titolo a sinistra, righe a destra. Con due o tre
   articoli la colonna del titolo restava vuota per trecento pixel. Ora la
   testata è una fascia sopra, e sotto ci sono le stesse schede dell'indice del
   diario — un solo componente per la stessa cosa. */

.dh-journal {
	padding: var(--sezione) var(--margine);
	background: var(--dh-fondo);
	border-top: 1px solid var(--dh-filo);
}

.dh-journal__testata {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vuoto-6);
	flex-wrap: wrap;
	margin-bottom: var(--sezione-m);
}

.dh-journal__testata .dh-filo { flex: 0 0 auto; }

/* Le colonne le detta il numero di articoli, non un tre fisso: con due
   appunti la terza colonna restava vuota — lo stesso vuoto di prima, spostato
   di qualche metro più in là. */
.dh-journal__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vuoto-6) var(--sezione-m);
}

/* Due schede restano UGUALI, anche se così la seconda non cade sull'asse
   secondario del sito (752 contro i 793 del piede, che sta subito sotto).
   Provata la griglia canonica 1,1/1: allinea, ma fa due schede di misura
   diversa — su schede con la fotografia si vede subito, ed è peggio dello
   scarto che risolve. Le due cose non stanno insieme: perché la seconda di
   DUE colonne uguali cada a 793 servirebbe uno stacco di 145px, cioè un
   corridoio che nasconde la relazione invece di dichiararla.
   La via d'uscita vera è il terzo articolo: con tre schede la fila torna
   quella per cui è nata, e di assi da rispettare non ce ne sono. */
.dh-journal__lista:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dh-journal__lista:has(> :only-child) { grid-template-columns: minmax(0, 46ch); }

@media (max-width: 900px) {
	.dh-journal__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	/* anche la variante «due soli articoli»: il suo :has è più specifico
	   della riga qui sotto e senza questa deroga vince pure sul telefono,
	   schiacciando due colonnine da 150px coi titoli a serpente */
	.dh-journal__lista,
	.dh-journal__lista:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
}


.dh-journal__titolo { font-family: var(--daisy-serif, serif); font-size: var(--t-t2); line-height: 1.2; transition: color 0.15s ease; }

.dh-journal__estratto { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-piccolo); line-height: 1.6; font-weight: 300; color: #6D6959; }

/* ---------- footer (tutto il sito) ---------- */

.df-footer { background: var(--dh-oliva); color: #E7E3D7; }

.df-footer__invito {
	padding: var(--sezione) var(--margine) var(--sezione-m);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--sezione);
	align-items: center;
	border-bottom: 1px solid rgba(231, 227, 215, 0.16);
}

.df-footer__domanda {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t4);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
	color: var(--dh-chiaro);
	max-width: 18ch;
}

.df-footer__risposta {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	margin: 0;
	color: rgba(231, 227, 215, 0.78);
	max-width: 42ch;
}

.df-footer__recapiti { display: flex; flex-direction: column; gap: 18px; }

.df-footer__mail {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t2);
	color: var(--dh-chiaro);
	text-decoration: none;
	border-bottom: 1px solid rgba(231, 227, 215, 0.3);
	padding-bottom: 10px;
	align-self: flex-start;
}

.df-footer__mail:hover { color: #FFFFFF; border-color: var(--dh-chiaro); }

.df-footer__tel { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-lungo); font-weight: 300; color: rgba(231, 227, 215, 0.85); text-decoration: none; }
.df-footer__tel:hover { color: var(--dh-chiaro); }

.df-footer__sede { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-piccolo); font-weight: 300; color: rgba(231, 227, 215, 0.6); line-height: 1.6; }

.df-footer__base {
	padding: 34px var(--margine) 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.df-footer__marchio {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-corpo);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dh-chiaro);
}

.df-footer__voci { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.df-footer__voci a { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-mini); font-weight: 300; color: rgba(231, 227, 215, 0.7); text-decoration: none; }
.df-footer__voci a:hover { color: var(--dh-chiaro); }

.df-footer__firma { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-mini); font-weight: 300; color: rgba(231, 227, 215, 0.78); }

/* ---------- adattamento ---------- */

@media (max-width: 900px) {
	.dh-hero, .dh-config__griglia, .dh-config__testata, .dh-lab__riga, .dh-journal { grid-template-columns: minmax(0, 1fr); }
	.dh-hero__foto { min-height: 340px; }
	.dh-lab__riga--inversa .dh-lab__foto { order: -1; }
	.dh-lab__numeri { grid-template-columns: minmax(0, 1fr); }
	.dh-lab__numero { border-right: 0; border-bottom: 1px solid var(--dh-filo); }
	.dh-lab__numero:last-child { border-bottom: 0; }
	.dh-journal { gap: 24px; }
	.dh-journal__riga { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.df-footer__invito { grid-template-columns: minmax(0, 1fr); }
	.dh-config__palco { height: 380px; }
}

/* =========================================================
   Le finiture — dal progetto «Finiture Daisy Design»
   ========================================================= */

/* ---------- testata scura con la fascia dei colori ---------- */

.df-testata { background: var(--dh-oliva-cupa); color: var(--dh-chiaro); }

.df-testata__interno {
	padding: var(--sezione) var(--margine) var(--sezione);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: var(--sezione);
	align-items: end;
}

.df-testata__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-display);
	line-height: 0.98;
	letter-spacing: -0.02em;
	margin: 12px 0 0;
	max-width: 11ch;
	color: var(--dh-chiaro);
}

.df-testata__intro {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: rgba(244, 240, 232, 0.78);
	margin: 0;
	max-width: 44ch;
	text-wrap: pretty;
}

.df-testata__coda {
	border-top: 1px solid rgba(244, 240, 232, 0.18);
	padding: 18px var(--bordo);
	text-align: center;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	font-weight: 300;
	letter-spacing: 0.05em;
	color: rgba(244, 240, 232, 0.72);
	margin: 0;
}

.df-fascia { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }

.df-fascia__voce {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* NON è una spaziatura: è l'altezza della fascia colori, e va tenuta
	   generosa perché è lì che si legge la tinta. */
	height: clamp(180px, 24vw, 340px);
	border: none;
	padding: 0 0 22px 22px;
	cursor: pointer;
	text-align: left;
	transition: box-shadow 0.15s ease;
}

.df-fascia__voce.is-scelta {
	box-shadow: inset 0 0 0 4px var(--dh-oliva-cupa), inset 0 0 0 6px rgba(255, 255, 255, 0.85);
}

.df-fascia__nome {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t1);
	color: var(--dh-inchiostro);
}

.df-fascia__nome--chiaro { color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }

/* ---------- la finitura scelta ---------- */

.df-scelta { border-bottom: 1px solid var(--dh-filo); background: var(--dh-fondo); }

.df-scelta__scheda { display: none; }

.df-scelta__scheda.is-attiva {
	display: grid;
	padding: var(--sezione) var(--margine);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--sezione);
	align-items: center;
}

.df-scelta__campione {
	display: block;
	width: 100%;
	/* il campione grande della finitura scelta: è il soggetto della sezione,
	   non un filetto decorativo */
	height: clamp(260px, 32vw, 460px);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.df-scelta__testo { display: flex; flex-direction: column; gap: 20px; }

.df-scelta__nome {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t5);
	line-height: 1;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--dh-inchiostro);
}

.df-scelta__desc {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-lungo);
	line-height: 1.6;
	font-weight: 300;
	color: #454236;
	margin: 0;
	max-width: 44ch;
	text-wrap: pretty;
}

.df-scelta__dati { margin: 0; border-top: 1px solid var(--dh-filo); }

.df-scelta__dati > div {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--dh-filo);
}

.df-scelta__dati dt {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dh-spento);
}

.df-scelta__dati dd { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-piccolo); font-weight: 300; color: #454236; margin: 0; }

.df-scelta__testo .dh-bottone { align-self: flex-start; }

/* ---------- la matrice ---------- */

.df-matrice { padding: var(--sezione) var(--margine); }

.df-matrice__intro { max-width: 56ch; margin-bottom: 40px; }

.df-matrice__intro p {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: #454236;
	margin: 12px 0 0;
	text-wrap: pretty;
}

.df-matrice__tavola { border: 1px solid var(--dh-filo); background: #FBF9F5; overflow-x: auto; }

.df-matrice__riga {
	display: grid;
	grid-template-columns: 190px repeat(6, minmax(64px, 1fr));
	align-items: center;
	border-bottom: 1px solid var(--dh-filo);
	min-width: 640px;
}

.df-matrice__riga:last-child { border-bottom: 0; }

.df-matrice__riga--testa { align-items: stretch; }

.df-matrice__angolo, .df-matrice__testa {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.05em;
	line-height: 1.3;
	color: var(--dh-spento);
	padding: 16px 10px;
	border-bottom: 2px solid transparent;
}

.df-matrice__angolo { letter-spacing: 0.16em; text-transform: uppercase; padding-left: 20px; }

.df-matrice__testa { border-left: 1px solid var(--dh-filo); }

.df-matrice__testa.is-scelta { color: var(--dh-inchiostro); font-weight: 500; border-bottom-color: var(--dh-inchiostro); }

.df-matrice__modello { display: flex; flex-direction: column; gap: 3px; padding: 0 20px; text-decoration: none; }

.df-matrice__nome { font-family: var(--daisy-serif, serif); font-size: var(--t-lungo); line-height: 1.1; color: var(--dh-inchiostro); }

.df-matrice__prezzo { font-family: var(--daisy-sans, sans-serif); font-size: var(--t-mini); font-weight: 300; color: var(--dh-spento); }
.df-matrice__prezzo del { margin-right: 5px; }
.df-matrice__prezzo ins { text-decoration: none; }

.df-matrice__cella {
	display: block;
	/* La riga è alta quanto il suo pezzo più alto — il nome del modello su
	   due righe più il prezzo — e align-items:center teneva la pastiglia da
	   76px fissi al centro: sopra e sotto restava una fascia di crema, e le
	   sei colonne di colore sembravano spezzate. Qui la pastiglia riempie la
	   riga, e i 76px restano il minimo per le righe corte. */
	align-self: stretch;
	min-height: 76px;
	border-left: 1px solid var(--dh-filo);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.15s ease;
}

/* La colonna scelta si segna con una cornice CONTINUA sui due fianchi,
   non con un anello attorno a ogni cella: l'anello crema da 3px mangiava
   il colore e apriva un varco bianco fra una cella e l'altra, così la
   colonna sembrava spaziata diversamente dalle altre. Sopra e sotto ci
   pensano l'intestazione e l'ultima riga. */
.df-matrice__cella.is-scelta {
	box-shadow: inset 2px 0 0 var(--dh-inchiostro), inset -2px 0 0 var(--dh-inchiostro);
}

.df-matrice__riga:nth-of-type(2) .df-matrice__cella.is-scelta {
	box-shadow: inset 2px 0 0 var(--dh-inchiostro), inset -2px 0 0 var(--dh-inchiostro), inset 0 2px 0 var(--dh-inchiostro);
}

.df-matrice__riga:last-child .df-matrice__cella.is-scelta {
	box-shadow: inset 2px 0 0 var(--dh-inchiostro), inset -2px 0 0 var(--dh-inchiostro), inset 0 -2px 0 var(--dh-inchiostro);
}

/* ---------- come si vernicia ---------- */

.df-cabina {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	border-top: 1px solid var(--dh-filo);
	border-bottom: 1px solid var(--dh-filo);
	background: var(--dh-fondo);
}

.df-cabina__testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: var(--sezione) var(--bordo);
}

.df-cabina__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t4);
	line-height: 1.08;
	margin: 0;
	max-width: 18ch;
	color: var(--dh-inchiostro);
}

.df-cabina__testo p {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.65;
	font-weight: 300;
	color: #454236;
	margin: 0;
	max-width: 44ch;
	text-wrap: pretty;
}

.df-cabina__foto { position: relative; min-height: 420px; background: var(--dh-sabbia); }

.df-cabina__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.df-testata__interno, .df-scelta__scheda.is-attiva, .df-cabina { grid-template-columns: minmax(0, 1fr); }
	.df-fascia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.df-scelta__dati > div { grid-template-columns: 120px 1fr; gap: 12px; }
}

/* =========================================================
   CATALOGO — «Shop Daisy Design»
   ========================================================= */

/* ---------- barra della finitura ---------- */

.dc-filtro {
	padding: 0 var(--margine);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid var(--dh-filo);
	border-bottom: 1px solid var(--dh-filo);
}

.dc-filtro__voci {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 0;
}

.dc-filtro__etichetta {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dh-spento);
	margin-right: 6px;
}

.dc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	/* 44px di bersaglio anche se il testo è piccolo: sono link da toccare */
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid #D6CFC1;
	background: transparent;
	color: #605C4E;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dc-chip:hover { border-color: #A9A190; color: var(--dh-inchiostro); }

.dc-chip.is-scelta {
	border-color: var(--dh-inchiostro);
	color: var(--dh-inchiostro);
}

.dc-chip__punto {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.dc-filtro__conteggio {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: var(--dh-spento);
	padding: 14px 0;
}

/* ---------- la griglia ---------- */

.woocommerce ul.products.dc-griglia,
ul.products.dc-griglia {
	padding: var(--sezione-m) var(--margine) var(--sezione);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 28px;
	list-style: none;
}

.woocommerce ul.products.dc-griglia::before,
.woocommerce ul.products.dc-griglia::after { content: none; }

.woocommerce ul.products.dc-griglia > li.product,
ul.products.dc-griglia > li.product {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.dc-tessera__foto {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--dh-sabbia);
	border: 1px solid var(--dh-filo);
	overflow: hidden;
}

.woocommerce ul.products.dc-griglia .dc-tessera__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	display: block;
	transition: transform 0.5s ease;
}

.dc-tessera__foto:hover img { transform: scale(1.03); }

.dc-tessera__fascia {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	display: flex;
}

.dc-tessera__fascia > span { flex: 1 1 0; }

.dc-tessera__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vuoto-2);
	/* niente rientro laterale: il testo comincia dove comincia la fotografia,
	   o su sei tessere il bordo sinistro sembra sfocato */
	padding: var(--vuoto-5) 0 0;
}

.woocommerce ul.products.dc-griglia .dc-tessera__nome {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t2);
	line-height: 1.12;
	color: var(--dh-inchiostro);
	text-decoration: none;
	padding: 0;
	margin: 0;
}

.dc-tessera__nome:hover { color: #59654A; }

.dc-tessera__tipo {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: var(--dh-spento);
}

.woocommerce ul.products.dc-griglia .dc-tessera__prezzo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 6px;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	color: var(--dh-oliva);
}

.woocommerce ul.products.dc-griglia .dc-tessera__prezzo .price,
.woocommerce ul.products.dc-griglia .dc-tessera__prezzo .amount {
	font-size: inherit;
	color: inherit;
	font-weight: 400;
	margin: 0;
}

.dc-tessera__prezzo small,
.woocommerce ul.products.dc-griglia .dc-tessera__prezzo .woocommerce-price-suffix {
	font-size: var(--t-mini);
	font-weight: 300;
	color: var(--dh-spento);
}

/* WooCommerce infila «IVA inclusa» dentro il prezzo: la nostra riga lo ripete */
.woocommerce ul.products.dc-griglia .dc-tessera__prezzo .woocommerce-price-suffix { display: none; }

.dc-tessera__cta {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid var(--dh-oliva);
	color: var(--dh-oliva);
	border-radius: 2px;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 12px 24px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dc-tessera__cta:hover { background: var(--dh-oliva); color: var(--dh-chiaro); }

/* ---------- la tessera «su misura» ----------
   Nel progetto era la sesta casella di una griglia da cinque modelli. I modelli
   a catalogo sono sei, quindi la casella resterebbe sola in fondo con due buchi
   accanto: qui prende tutta la riga e si dispone in orizzontale. Vale anche se
   domani i modelli diventano sette. */

.woocommerce ul.products.dc-griglia > li.product.dc-misura,
ul.products.dc-griglia > li.product.dc-misura {
	grid-column: 1 / -1;
	/* Due colonne piene, non una sola: il bottone stava all'estremo destro
	   separato dal testo da mezzo metro di vuoto, e messo in colonna lasciava
	   invece vuoti due terzi di fascia. Qui la domanda sta a sinistra, la
	   risposta e il gesto a destra: la larghezza serve a qualcosa e il bottone
	   sta sotto la frase che lo motiva. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--vuoto-5) var(--sezione);
	align-items: center;
	background: var(--dh-oliva-cupa);
	color: var(--dh-chiaro);
	padding: var(--sezione-m) var(--margine);
}

.dc-misura__testi { display: flex; flex-direction: column; gap: var(--vuoto-4); }

.dc-misura__coda { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vuoto-5); }

.dc-misura__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t3);
	line-height: 1.08;
	margin: 8px 0 0;
	max-width: 20ch;
	color: var(--dh-chiaro);
}

.dc-misura__testo {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: rgba(244, 240, 232, 0.82);
	margin: 0;
	max-width: 40ch;
}

.dc-misura .dh-bottone { flex: 0 0 auto; white-space: nowrap; }

/* ---------- i tre argomenti ---------- */

.dc-argomenti,
.daisy-rassicurazioni {
	padding-inline: var(--margine);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* senza gap le colonne si toccavano: a 768 i titoli si fondevano in
	   «Consegna in 3-4 settimane14 giorni per ripensarci» */
	gap: var(--vuoto-6);
	border-top: 1px solid var(--dh-filo);
	border-bottom: 1px solid var(--dh-filo);
}

@media (max-width: 640px) {
	.daisy-rassicurazioni { grid-template-columns: minmax(0, 1fr); }
}

.daisy-rassicurazioni {
	padding-block: var(--sezione-m);
	margin-top: var(--sezione-m);
	border-top: 1px solid var(--dh-filo);
	border-bottom: 0;
}

.daisy-rassicurazioni > * { padding-inline: 0; }

.daisy-rassicurazioni h2 {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t2);
	line-height: 1.1;
	color: var(--dh-inchiostro);
	margin: 0 0 var(--vuoto-2);
}

.daisy-rassicurazioni p {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	line-height: 1.6;
	color: #605C4E;
	margin: 0;
}

.dc-argomenti__voce {
	display: flex;
	flex-direction: column;
	gap: var(--vuoto-2);
	/* Il margine laterale ce l'ha già la fascia: ripeterlo su ogni colonna
	   portava il primo titolo a 112px, doppio rispetto a tutto il resto della
	   pagina. Qui il respiro sta solo *fra* le colonne. */
	padding: var(--sezione-m) var(--vuoto-6);
	border-right: 1px solid var(--dh-filo);
}

.dc-argomenti__voce:first-child { padding-left: 0; }
.dc-argomenti__voce:last-child { padding-right: 0; border-right: 0; }

.dc-argomenti__titolo {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t2);
	line-height: 1.1;
	color: var(--dh-inchiostro);
}

.dc-argomenti__testo {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	font-weight: 300;
	line-height: 1.6;
	color: #605C4E;
}

@media (max-width: 1000px) {
	.woocommerce ul.products.dc-griglia,
	ul.products.dc-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce ul.products.dc-griglia > li.product.dc-misura,
	ul.products.dc-griglia > li.product.dc-misura { grid-template-columns: minmax(0, 1fr); }
	.dc-argomenti { grid-template-columns: minmax(0, 1fr); }
	.dc-argomenti__voce { border-right: 0; border-bottom: 1px solid var(--dh-filo); }
	.dc-argomenti__voce:last-child { border-bottom: 0; }
}

@media (max-width: 900px) {
}

@media (max-width: 640px) {
	.woocommerce ul.products.dc-griglia,
	ul.products.dc-griglia { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.dc-filtro { justify-content: flex-start; }
	.dc-filtro__conteggio { padding-top: 0; }
	/* con le pastiglie su più righe, l'etichetta in mezzo alla prima sembrava
	   una voce del filtro: qui si stacca e fa da titoletto */
	.dc-filtro__voci { padding-bottom: 8px; }
}

/* Anche a 768 le pastiglie vanno su due righe: l'etichetta si stacca già qui,
   o la prima riga partiva dopo «FINITURA» e la seconda tornava al margine. */
@media (max-width: 900px) {
	.dc-filtro__etichetta { flex: 1 0 100%; margin: 0 0 4px; }
}

/* Casella vuota: quel modello, in quella finitura, non si ordina. Oggi non
   accade mai — ma se domani un pezzo nasce in tre colori, la tavola lo dice. */
.df-matrice__cella--assente {
	background: repeating-linear-gradient(
		45deg,
		transparent, transparent 5px,
		rgba(30, 29, 25, 0.07) 5px, rgba(30, 29, 25, 0.07) 6px
	);
}

/* =========================================================
   SCHEDA PRODOTTO — «Scheda Prodotto Daisy Design»
   ========================================================= */

.dp-testa {
	padding: 20px var(--margine) 0;
}

.dp-testa .woocommerce-breadcrumb,
.dp-testa .wc-block-breadcrumbs {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	font-weight: 300;
	color: var(--dh-spento);
	margin: 0;
	padding: 0;
}

.dp-testa .woocommerce-breadcrumb a { color: var(--dh-spento); text-decoration: none; }
.dp-testa .woocommerce-breadcrumb a:hover { color: var(--dh-inchiostro); }

.dp-scheda {
	padding: 28px var(--margine) var(--sezione);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--sezione);
	align-items: start;
}

/* La colonna d'acquisto accompagna lo scorrimento del configuratore, ferma
   appena sotto la testata: 81px la testata più un respiro. */
.dp-scheda__scelta { position: sticky; top: 97px; }

/* ---------- vista: linguette, 3D, fotografie ---------- */

/* La barra era larga quanto le due linguette e stava sospesa sopra un riquadro
   largo il triplo: sembrava un pezzo staccato. Ora il filo sotto le linguette
   attraversa tutta la colonna, e le lega alla scena che comandano. */
.dp-viste {
	display: flex;
	width: 100%;
	border-bottom: 1px solid var(--dh-filo);
	margin-bottom: var(--vuoto-4);
}

.dp-viste__voce {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 13px 4px;
	margin-right: var(--vuoto-6);
	min-height: 44px;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: transparent;
	color: var(--dh-spento);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.dp-viste__voce.is-scelta { color: var(--dh-inchiostro); border-bottom-color: var(--dh-inchiostro); }

@media (max-width: 420px) {
	.dp-viste__voce { flex: 1 1 0; margin-right: 0; text-align: center; }
}
.dp-viste__voce:not(.is-scelta):hover { color: var(--dh-inchiostro); }

/* Il blocco galleria di WooCommerce si autolimita a 512px: qui la colonna è
   più larga e il configuratore ne è il contenuto principale, non una spalla. */
.dp-scheda__vista .wp-block-woocommerce-product-image-gallery {
	max-width: 100%;
	width: 100%;
}

.dp-scheda__vista .daisy3d,
.dp-scheda__vista .woocommerce-product-gallery { margin: 0; }

.dp-scheda__vista .daisy3d { border-color: var(--dh-filo); background: var(--dh-sabbia); }

/* Vedi il commento in configuratore.js: la vista chiusa deve conservare la
   larghezza, altrimenti FlexSlider misura zero e le foto non tornano più. */
.dp-scheda__vista .dp-vista--chiusa {
	height: 0;
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	border: 0;
	margin: 0;
}

.dp-scheda__vista .dp-vista--chiusa .daisy3d__aiuto { display: none; }

/* ---------- sommario ---------- */

.dp-sommario__nome {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t5);
	line-height: 1.04;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--dh-inchiostro);
}

.dp-sommario__tipo {
	display: block;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	font-weight: 300;
	color: var(--dh-spento);
	margin-top: 8px;
}

.dp-sommario__breve p {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: #454236;
	margin: 16px 0 0;
	max-width: 46ch;
	text-wrap: pretty;
}

.dp-sommario__prezzo {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t3);
	line-height: 1;
	color: var(--dh-inchiostro);
	margin: 28px 0 6px;
}

.dp-sommario__prezzo .price,
.dp-sommario__prezzo .amount,
.dp-sommario__prezzo bdi { font-size: inherit; font-family: inherit; color: inherit; font-weight: 400; }

.dp-sommario__prezzo .woocommerce-price-suffix {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: var(--dh-spento);
}

.dp-sommario__spedizione {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: var(--dh-spento);
	margin: 0;
}

/* ---------- il modulo di WooCommerce, ridisegnato ---------- */

.dp-scheda__scelta .daisy-config__intro { display: none; }

.dp-scheda__scelta table.variations {
	display: block;
	width: 100%;
	margin: 30px 0 0;
	border: 0;
	border-top: 1px solid var(--dh-filo);
	padding-top: 26px;
}

.dp-scheda__scelta table.variations tbody,
.dp-scheda__scelta table.variations tr,
.dp-scheda__scelta table.variations th,
.dp-scheda__scelta table.variations td,
.woocommerce .dp-scheda__scelta table.variations th,
.woocommerce .dp-scheda__scelta table.variations td {
	display: block;
	width: auto;
	border: 0;
	padding: 0;
	background: none;
}

.dp-scheda__scelta table.variations tr + tr { margin-top: 26px; }

/* Etichetta e valore scelto sulla stessa riga: «FINITURA DEL PIANO  Verde
   Salvia». Il nome lo scrive il plugin degli swatch nello span qui accanto. */
.dp-scheda__scelta table.variations th.label {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-bottom: 12px;
}

.dp-scheda__scelta table.variations th.label label {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dh-spento);
	font-weight: 400;
	margin: 0;
}

.dp-scheda__scelta .woo-selected-variation-item-name {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 400;
	color: var(--dh-inchiostro);
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

/* le finiture del piano: una fascia di sei campioni larghi, come nel progetto */
.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li.variable-item {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
	background: none;
	transition: box-shadow 0.15s ease;
}

.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li .variable-item-contents { margin: 0; }

/* Il plugin arrotonda i campioni fino al cerchio (wvs-style-rounded). Il
   progetto li vuole rettangolari e affiancati come una cartella colori. */
.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li.variable-item,
.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li .variable-item-contents,
.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li img {
	border-radius: 0 !important;
}

.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li img {
	display: block;
	width: 100%;
	height: 58px;
	object-fit: cover;
	margin: 0;
}

.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li.variable-item.selected,
.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li.variable-item[aria-checked="true"] {
	box-shadow: inset 0 0 0 2px var(--dh-fondo), 0 0 0 2px var(--dh-inchiostro);
}

.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] li.variable-item:hover {
	box-shadow: inset 0 0 0 2px var(--dh-fondo), 0 0 0 1px #9A9384;
}

/* misura e gambe: pastiglie con il nome scritto */
.dp-scheda__scelta ul.variable-items-wrapper:not([data-attribute_name="attribute_pa_colore"]) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-scheda__scelta ul.variable-items-wrapper:not([data-attribute_name="attribute_pa_colore"]) li.variable-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	width: auto;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #D6CFC1;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	color: #605C4E;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dp-scheda__scelta ul.variable-items-wrapper:not([data-attribute_name="attribute_pa_colore"]) li.variable-item:hover {
	border-color: #A9A190;
	color: var(--dh-inchiostro);
}

.dp-scheda__scelta ul.variable-items-wrapper:not([data-attribute_name="attribute_pa_colore"]) li.variable-item.selected,
.dp-scheda__scelta ul.variable-items-wrapper:not([data-attribute_name="attribute_pa_colore"]) li.variable-item[aria-checked="true"] {
	border-color: var(--dh-inchiostro);
	color: var(--dh-inchiostro);
	background: transparent;
}

/* Per i campioni di tipo «colore» il plugin non stampa il nome: lo prendiamo
   dall'attributo data-title, così la pastiglia legge «● Nero opaco» come nel
   progetto invece di essere un pallino muto. */
.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore-gambe"] li.variable-item {
	/* il plugin fissa la larghezza del campione (49px, la misura del pallino):
	   qui la pastiglia deve crescere quanto il nome che ci scriviamo dentro */
	width: auto !important;
	min-width: max-content;
}

.dp-gamba__nome {
	flex: 0 0 auto;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	line-height: 1;
	white-space: nowrap;
	color: inherit;
}

/* il pallino del colore gambe: la pastiglia lo mostra accanto al nome */
.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore-gambe"] li.variable-item .variable-item-span-color,
.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore-gambe"] li.variable-item > .variable-item-contents {
	width: 13px;
	height: 13px;
	min-width: 13px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	margin: 0;
	flex: 0 0 auto;
}

.dp-scheda__scelta .reset_variations {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	font-weight: 300;
	color: var(--dh-spento);
	text-decoration: underline;
}

.dp-scheda__scelta .woocommerce-variation-price { margin: 22px 0 0; }

.dp-scheda__scelta .woocommerce-variation-price .price,
.dp-scheda__scelta .woocommerce-variation-price .amount {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t2);
	color: var(--dh-inchiostro);
	font-weight: 400;
}

.dp-scheda__scelta .woocommerce-variation-add-to-cart,
.dp-scheda__scelta form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

/* avviso e riepilogo stanno sopra la riga del bottone, non accanto */
.dp-scheda__scelta .daisy-config__incompleto,
.dp-scheda__scelta .daisy-config__riepilogo {
	flex: 1 1 100%;
	order: -1;
	margin: 0;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: var(--dh-spento);
}

.dp-scheda__scelta .quantity {
	display: flex;
	align-items: center;
	border: 1px solid #C9C2B2;
	border-radius: 2px;
	margin: 0;
}

.dp-scheda__scelta .quantity input.qty {
	width: 62px;
	height: 54px;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	color: var(--dh-inchiostro);
}

.dp-scheda__scelta button.single_add_to_cart_button {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	background: var(--dh-oliva);
	color: var(--dh-chiaro);
	border: 0;
	border-radius: 2px;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 24px;
	transition: background-color 0.2s ease;
}

.dp-scheda__scelta button.single_add_to_cart_button:hover:not(:disabled) { background: #222A1A; }

.dp-scheda__scelta button.single_add_to_cart_button:disabled {
	background: #B7B2A2;
	color: #FFFFFF;
	opacity: 1;
	cursor: not-allowed;
}

/* ---------- consegna, verniciatura, montaggio ---------- */

.dp-consegna {
	margin: 34px 0 0;
	border-top: 1px solid var(--dh-filo);
}

.dp-consegna > div {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--dh-filo);
}

.dp-consegna dt {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dh-spento);
	margin: 0;
}

.dp-consegna dd {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	font-weight: 300;
	color: #454236;
	margin: 0;
}

/* ---------- descrizione e scheda tecnica ---------- */

.dp-dettagli {
	padding: var(--sezione) var(--margine);
	display: grid;
	grid-template-columns: var(--griglia-due);
	gap: var(--sezione);
	align-items: start;
	border-top: 1px solid var(--dh-filo);
	border-bottom: 1px solid var(--dh-filo);
}

.dp-dettagli__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t3);
	line-height: 1.1;
	margin: 0 0 18px;
	color: var(--dh-inchiostro);
}

.dp-dettagli__testo,
.dp-dettagli__testo p {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.7;
	font-weight: 300;
	color: #454236;
	max-width: 60ch;
	text-wrap: pretty;
}

.dp-dettagli__testo p { margin: 0 0 18px; }
.dp-dettagli__racconto .dh-filo { margin-top: 8px; }

.dp-tecnica { margin: 0; border-top: 1px solid var(--dh-filo); }

.dp-tecnica > div {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 20px;
	padding: 13px 0;
	border-bottom: 1px solid var(--dh-filo);
}

.dp-tecnica dt {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dh-spento);
	margin: 0;
}

.dp-tecnica dd {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	font-weight: 300;
	color: #454236;
	margin: 0;
}

/* ---------- altri modelli ---------- */

.dp-altri {
	padding: var(--sezione) var(--margine) var(--sezione);
}

.dp-altri__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t3);
	line-height: 1.1;
	margin: 0 0 36px;
	color: var(--dh-inchiostro);
}

.dp-altri__griglia {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.dp-altro { display: flex; flex-direction: column; text-decoration: none; }

.dp-altro__foto {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--dh-sabbia);
	border: 1px solid var(--dh-filo);
	overflow: hidden;
	margin-bottom: 16px;
}

.dp-altro__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.dp-altro:hover .dp-altro__foto img { transform: scale(1.03); }

.dp-altro__nome {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t1);
	line-height: 1.15;
	color: var(--dh-inchiostro);
}

.dp-altro__tipo {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: var(--dh-spento);
	margin-top: 5px;
}

.dp-altro__prezzo {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	color: var(--dh-oliva);
	margin-top: 8px;
}

.dp-altro__prezzo .amount, .dp-altro__prezzo bdi { font-size: inherit; color: inherit; }
.dp-altro__prezzo .woocommerce-price-suffix { display: none; }

@media (max-width: 1100px) {
	.dp-altri__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.dp-scheda { grid-template-columns: minmax(0, 1fr); }
	.dp-scheda__scelta { position: static; }
	.dp-dettagli { grid-template-columns: minmax(0, 1fr); }
	.dp-altri__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.dp-consegna > div,
	.dp-tecnica > div { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
	.dp-scheda__scelta ul.variable-items-wrapper[data-attribute_name="attribute_pa_colore"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   LA NOSTRA STORIA — «Storia Daisy Design»
   =========================================================
   La pagina è contenuto a blocchi, non uno shortcode: il racconto
   si riscrive dall'editor. Qui c'è solo l'impaginazione. */

/* Il tema stacca di 24px ogni blocco che segue un altro (is-layout-flow).
   Dentro le nostre griglie quel margine spinge in basso il secondo e il terzo
   riquadro di una stessa riga, sfalsandoli: qui lo azzeriamo. */
.ds-testata > *,
.ds-riga > *,
.ds-progetto__interno > *,
.ds-numeri > *,
.ds-nome > *,
.daisy-rassicurazioni > *,
.dc-argomenti > *,
.dn-vie > *,
.dv-vuoto > * { margin-block-start: 0 !important; }

/* ---------- le due righe alternate ---------- */

.ds-riga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	border-bottom: 1px solid var(--dh-filo);
}

.ds-riga__foto { position: relative; background: var(--dh-sabbia); min-height: 420px; }

.ds-riga__foto figure { margin: 0; height: 100%; }

.ds-riga__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-riga__testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: var(--sezione) var(--bordo);
}

.ds-riga__testo > * { margin: 0; }

.ds-riga__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t4);
	line-height: 1.08;
	margin: 0;
	max-width: 17ch;
	color: var(--dh-inchiostro);
}

.ds-riga__testo p:not(.dh-occhiello):not(.ds-riga__filo) {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.65;
	font-weight: 300;
	color: #454236;
	max-width: 44ch;
	text-wrap: pretty;
}

/* ---------- il racconto, su fondo scuro ---------- */

.ds-progetto { background: var(--dh-oliva-cupa); color: var(--dh-chiaro); }

.ds-progetto__interno {
	padding: var(--sezione) var(--margine);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--sezione);
	align-items: start;
}

.ds-progetto__frase {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t5);
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 14px 0 0;
	max-width: 15ch;
	color: var(--dh-chiaro);
}

.ds-progetto__racconto { display: flex; flex-direction: column; gap: 22px; }

.ds-progetto__racconto p {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-lungo);
	line-height: 1.65;
	font-weight: 300;
	color: rgba(244, 240, 232, 0.86);
	margin: 0;
	max-width: 52ch;
	text-wrap: pretty;
}

.ds-numeri {
	background: var(--dh-oliva-cupa);
	color: var(--dh-chiaro);
	border-top: 1px solid rgba(244, 240, 232, 0.18);
}

.ds-numeri {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-numeri__voce {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--sezione-m) var(--bordo);
	border-right: 1px solid rgba(244, 240, 232, 0.18);
}

.ds-numeri__voce:last-child { border-right: 0; }

.ds-numeri__cifra {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t2);
	line-height: 1.1;
	color: var(--dh-chiaro);
	margin: 0;
}

.ds-numeri__nota {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: rgba(244, 240, 232, 0.68);
	margin: 0;
}

/* ---------- il nome ---------- */

.ds-nome {
	padding: var(--sezione) var(--margine);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sezione);
	align-items: center;
	border-bottom: 1px solid var(--dh-filo);
}

.ds-nome__testo { display: flex; flex-direction: column; gap: 18px; }

.ds-nome__frase {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t3);
	line-height: 1.25;
	font-weight: 400;
	color: var(--dh-inchiostro);
	margin: 0;
	max-width: 26ch;
	text-wrap: pretty;
}

.ds-nome__foto { position: relative; min-height: 380px; background: var(--dh-sabbia); }

.ds-nome__foto figure { margin: 0; height: 100%; }

.ds-nome__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.ds-progetto__interno,
	.ds-nome { grid-template-columns: minmax(0, 1fr); align-items: start; }

	.ds-riga { grid-template-columns: minmax(0, 1fr); }
	/* impilate, la fotografia viene sempre prima del testo che la spiega */
	.ds-riga--inversa .ds-riga__foto { order: -1; }
	.ds-riga__foto, .ds-nome__foto { min-height: 300px; }
	.ds-numeri { grid-template-columns: minmax(0, 1fr); }
	.ds-numeri__voce { border-right: 0; border-bottom: 1px solid rgba(244, 240, 232, 0.18); }
	.ds-numeri__voce:last-child { border-bottom: 0; }
}

/* =========================================================
   LASCIATI ISPIRARE — «Ispirazione Daisy Design»
   ========================================================= */

/* la barra riusa le pastiglie del catalogo: è lo stesso gesto */
.di-filtro .dc-chip { border-radius: 999px; cursor: pointer; }

.di-griglia {
	padding: var(--sezione-m) var(--margine) var(--sezione);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 28px;
}

.di-scatto { margin: 0; display: flex; flex-direction: column; }
.di-scatto[hidden] { display: none; }

.di-scatto__foto {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--dh-sabbia);
	border: 1px solid var(--dh-filo);
	overflow: hidden;
}

.di-scatto__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.di-scatto__voce {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vuoto-4);
	padding: var(--vuoto-4) 0 0;
}

.di-scatto__modello {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-lungo);
	color: var(--dh-inchiostro);
	text-decoration: none;
}

.di-scatto__modello:hover { color: #59654A; }

.di-scatto__finitura {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: var(--dh-spento);
	text-align: right;
}

.di-invito {
	background: var(--dh-oliva-cupa);
	color: var(--dh-chiaro);
	padding: var(--sezione) var(--margine);
	display: grid;
	/* due colonne uguali, non «testo + quel che resta»: col secondo binario
	   largo quanto il bottone, il bottone finiva schiacciato al bordo destro
	   con un vuoto in mezzo. Così comincia dove comincia la seconda colonna,
	   subito accanto alla frase che lo motiva. */
	/* la griglia del sito, come tutte le altre sezioni a due colonne */
	grid-template-columns: var(--griglia-due);
	gap: var(--respiro-colonne);
	align-items: center;
	border-top: 1px solid var(--dh-filo);
}

.di-invito .dh-bottone { justify-self: start; }

.di-invito__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t4);
	line-height: 1.06;
	margin: 0;
	max-width: 16ch;
	color: var(--dh-chiaro);
}

.di-invito__testo {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: rgba(244, 240, 232, 0.82);
	margin: 14px 0 0;
	max-width: 44ch;
}

@media (max-width: 1000px) {
	.di-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.di-invito { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

@media (max-width: 640px) {
	.di-griglia { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* La colonna comune: la usano le pagine che non impaginano da sole (Contatti).
   Stesse misure di negozio, scheda prodotto e finiture, così passando da una
   pagina all'altra il testo non si sposta di lato. */
.dk-pagina {
	padding: var(--sezione) var(--margine) var(--sezione);
}

/* WooCommerce scrive «IVA inclusa» in em dentro il prezzo: a seconda di dove
   sta usciva 10,4px o 12,1px, sempre un gradino fuori scala. */
.woocommerce-price-suffix { font-size: var(--t-nota); }

/* ---------- gli ultimi fuori scala ----------
   Due punti dove il tema vince per forza bruta: WordPress marca !important le
   classi di dimensione dei blocchi, e l'intro dei Contatti non passa da un
   nostro selettore. Qui rientrano nella scala come tutto il resto. */
.dh-testata .dh-testata__tel .wp-block-button__link { font-size: var(--t-mini) !important; }
.daisy-contatti__intro { font-size: var(--t-lungo); }

/* =========================================================
   IL DIARIO — indice e singolo articolo
   ========================================================= */

.dl-elenco {
	padding: 0 var(--margine) var(--sezione);
	display: grid;
	gap: var(--sezione-m);
}

.dl-elenco--coda {
	padding-top: var(--sezione);
	border-top: 1px solid var(--dh-filo);
}

.dl-coda__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t3);
	line-height: 1.1;
	margin: 0;
	color: var(--dh-inchiostro);
}

/* La voce del diario ha la stessa anatomia della tessera di catalogo:
   fotografia quadrata, poi il testo. Cambia solo la disposizione. */
.dl-voce {
	display: grid;
	/* stessa griglia della testata sopra: prima il testo della scheda
	   cadeva a 689 e l'intro della testata a 796, due assi per la stessa
	   colonna nella stessa pagina */
	grid-template-columns: var(--griglia-due);
	gap: var(--respiro-colonne);
	align-items: center;
	padding-bottom: var(--sezione-m);
	border-bottom: 1px solid var(--dh-filo);
}

.dl-elenco > .dl-voce:last-child { border-bottom: 0; padding-bottom: 0; }

.dl-voce__foto {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--dh-sabbia);
	border: 1px solid var(--dh-filo);
	overflow: hidden;
}

.dl-voce__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.dl-voce:hover .dl-voce__foto img { transform: scale(1.03); }

.dl-voce__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vuoto-3); }

.dl-voce__data {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dh-spento);
}

.dl-voce__titolo {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t3);
	line-height: 1.12;
	margin: 0;
	/* 22ch stringevano il titolo a 344px dentro una colonna da 581, e
	   accanto all'estratto largo il pieno sembrava schiacciato, con le
	   righe frastagliate. Ora usa la colonna e le righe si bilanciano. */
	max-width: 34ch;
	text-wrap: balance;
}

/* Il tema riporta il carattere di lettura su OGNI link — a:where(:not(.wp-element-button))
   — e un titolo in grazie che è anche un collegamento tornava senza grazie.
   L'ereditarietà non basta: una regola, per quanto leggera, batte l'eredità. */
.dl-voce__titolo a,
.da-corpo h2 a,
.da-corpo h3 a,
.dl-coda__titolo a { font-family: inherit; font-size: inherit; }

.dl-voce__titolo a { color: var(--dh-inchiostro); text-decoration: none; }
.dl-voce__titolo a:hover { color: #59654A; }

.dl-voce__estratto {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: #454236;
	margin: 0;
	max-width: 52ch;
	text-wrap: pretty;
}

.dl-voce__filo { margin-top: var(--vuoto-1); }

.dl-vuoto {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	font-weight: 300;
	color: var(--dh-spento);
	margin: 0;
}

/* ---------- il singolo articolo ----------
   Sulla stessa griglia di ogni altra pagina: titolo a sinistra, dati a destra.
   Prima l'articolo aveva un asse suo, centrato, e sembrava preso da un altro
   sito. Sotto, il testo tiene la sua misura di lettura e la colonna che avanza
   porta l'indice dei paragrafi — che è contenuto, non riempitivo. */

/* Il titolo prende tutta la colonna del sito.
   Prima stava in metà pagina e per giunta tagliato a 18 caratteri: si spezzava
   in cinque righe strette, e la cosa più importante della pagina era quella
   con meno spazio. I dati passano sotto, su una riga sola: sono un'indicazione
   di servizio, non un secondo protagonista da mettere a fianco. */
.da-testata {
	padding: var(--sezione) var(--margine) var(--sezione-m);
}

.da-testata__titoli { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vuoto-4); }

.da-testata__ritorno { text-decoration: none; }
.da-testata__ritorno:hover { color: var(--dh-inchiostro); }

.da-testata__titolo {
	text-wrap: balance;
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	/* la stessa misura del titolo di ogni altra pagina: è un h1 come gli altri */
	font-size: var(--t-display);
	line-height: 1.0;
	letter-spacing: -0.02em;
	margin: 0;
	/* Nessun limite: la colonna del sito è già il limite. Un max-width in ch su
	   un carattere da 72px vale pochissimi pixel — 20ch erano 662, cioè ancora
	   mezza pagina. Al titolo pensa text-wrap: balance, che pareggia le righe
	   invece di lasciarne una lunga e una mozza. */
	color: var(--dh-inchiostro);
	text-wrap: balance;
}

/* I dati: una riga sotto il titolo, separata da un filo. */
.da-testata__dati {
	margin: var(--sezione-m) 0 0;
}

/* Nel modello Elementor un azzeramento di margini vinceva sulla regola qui
   sopra e il filetto finiva incollato alle discendenti del titolo. */
.elementor-location-single .elementor-shortcode > .da-testata__dati {
	margin-top: var(--sezione-m);
}

.da-testata__dati {
	padding-top: var(--vuoto-4);
	border-top: 1px solid var(--dh-filo);
	display: flex;
	flex-wrap: wrap;
	gap: var(--vuoto-4) var(--sezione-m);
}

.da-testata__dati > div {
	display: flex;
	align-items: baseline;
	gap: var(--vuoto-3);
}

.da-testata__dati dt {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dh-spento);
	margin: 0;
}

.da-testata__dati dd {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	font-weight: 300;
	color: #454236;
	margin: 0;
}

.da-foto {
	padding: 0 var(--margine);
}

.da-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	background: var(--dh-sabbia);
}

/* ---------- testo e indice, affiancati ---------- */

.da-lettura {
	padding: var(--sezione) var(--margine);
	display: grid;
	grid-template-columns: minmax(0, var(--misura)) minmax(0, 1fr);
	gap: var(--sezione);
	align-items: start;
}

.da-corpo { font-size: var(--t-lungo); }

.da-corpo p,
.da-corpo li {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-lungo);
	line-height: 1.7;
	font-weight: 300;
	color: #454236;
	text-wrap: pretty;
}

.da-corpo p { margin: 0 0 var(--vuoto-5); }

.da-corpo :is(h2, h3) {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	color: var(--dh-inchiostro);
	line-height: 1.15;
	margin: var(--sezione-m) 0 var(--vuoto-4);
	text-wrap: balance;
	/* l'àncora non deve finire sotto la testata appiccicosa */
	scroll-margin-top: 110px;
}

.da-corpo :is(h2, h3):first-child { margin-top: 0; }
.da-corpo h2 { font-size: var(--t-t3); }
.da-corpo h3 { font-size: var(--t-t2); }

.da-corpo img { max-width: 100%; height: auto; }
.da-corpo figure { margin: var(--sezione-m) 0; }
.da-corpo a { color: var(--dh-oliva); text-underline-offset: 3px; }

/* l'indice, che accompagna la lettura */
.da-indice {
	position: sticky;
	top: 110px;
	border-top: 1px solid var(--dh-filo);
	padding-top: var(--vuoto-4);
}

.da-indice__titolo { color: var(--dh-spento); margin-bottom: var(--vuoto-4); }

.da-indice__voci {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* Non è respiro estetico: le voci sono alte ventuno pixel e portano sopra
	   un riquadro invisibile di sei per lato, che le rende toccabili. Con lo
	   spazio di prima quei riquadri si accavallavano, e vicino al confine il
	   dito prendeva la voce sbagliata. Quattordici li tiene separati. */
	gap: var(--vuoto-3); /* come main: coi margini negativi i bersagli restano separati */
	counter-reset: paragrafo;
}

.da-indice__voci li { counter-increment: paragrafo; display: flex; gap: var(--vuoto-3); }

.da-indice__voci li::before {
	content: counter(paragrafo);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	color: var(--dh-spento);
	padding-top: 4px;
	flex: 0 0 1.5em;
}

.da-indice__voci a {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	line-height: 1.45;
	color: #454236;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.da-indice__voci a:hover { color: var(--dh-inchiostro); border-bottom-color: #B7B0A0; }

@media (max-width: 1100px) {
	/* sotto questa larghezza la colonna dell'indice toglie spazio alla lettura
	   invece di aggiungerne: l'articolo torna a una colonna sola */
	.da-lettura { grid-template-columns: minmax(0, 1fr); }
	.da-indice { display: none; }
	.da-corpo > .entry-content > * { max-width: var(--misura); }
}

@media (max-width: 900px) {
	.da-testata { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* =========================================================
   NON TROVATO, E RICERCA
   ========================================================= */

.dn-aiuto {
	padding: 0 var(--margine) var(--sezione);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sezione);
	align-items: start;
}

.dn-aiuto--sola { grid-template-columns: minmax(0, 1fr); max-width: min(var(--larghezza), 780px); margin-inline: 0; }

.dn-aiuto__etichetta { color: var(--dh-spento); }

.dn-cerca {
	display: flex;
	gap: var(--vuoto-3);
	flex-wrap: wrap;
}

.dn-cerca__campo {
	flex: 1 1 16ch;
	min-height: 56px;
	padding: 0 var(--vuoto-4);
	border: 1px solid #C9C2B2;
	border-radius: 2px;
	background: transparent;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	color: var(--dh-inchiostro);
}

.dn-cerca__campo::placeholder { color: var(--dh-spento); }
.dn-cerca__campo:focus { outline: 2px solid var(--dh-oliva); outline-offset: 2px; }

.dn-cerca__invio { flex: 0 0 auto; border: 0; cursor: pointer; }

.dn-aiuto__scorciatoie { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vuoto-4); }

.dn-vie {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vuoto-4);
	width: 100%;
}

/* Sul telefono le tre tessere si impilano: da affiancate diventavano
   francobolli da ~100px coi prezzi che sconfinavano l'uno nell'altro
   («249,00 €-420,00 €269,00 €…»). */
@media (max-width: 560px) {
	.dn-vie { grid-template-columns: minmax(0, 1fr); }
}

.dn-via { display: flex; flex-direction: column; gap: var(--vuoto-2); text-decoration: none; }

.dn-via__foto {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--dh-sabbia);
	border: 1px solid var(--dh-filo);
	overflow: hidden;
}

.dn-via__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dn-via__nome {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t1);
	line-height: 1.1;
	color: var(--dh-inchiostro);
}

.dn-via:hover .dn-via__nome { color: #59654A; }

@media (max-width: 900px) {
	.dl-voce { grid-template-columns: minmax(0, 1fr); gap: var(--vuoto-5); }
	.dn-aiuto { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   IL PERCORSO D'ACQUISTO — carrello, pagamento, area personale
   =========================================================
   Sono blocchi di WooCommerce: il markup non lo scriviamo noi. Qui li
   riportiamo alla scala e ai materiali del resto del sito — bordi sottili,
   angoli vivi, campi alti quanto un bersaglio da dito. */

/* Il margine laterale una volta sola: applicandolo sia al contenitore della
   pagina sia al blocco, il carrello partiva rientrato di 44px mentre tutto il
   resto del sito parte da 24. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content { padding: 0 0 var(--sezione); }

/* Il margine laterale lo mettono solo i blocchi di WooCommerce, che di suo non
   ne hanno: la testata di pagina porta già il proprio — è la stessa delle altre
   pagine — e sommandoli il carrello partiva rientrato di 152px mentre tutto il
   resto del sito parte da 56. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-account .woocommerce {
	padding-inline: var(--margine);
}

/* ---------- il carrello vuoto ---------- */

/* La faccina triste è un ::before del blocco: qui sparisce. Un carrello vuoto
   non è un lutto, è solo l'inizio. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none !important; }

.wc-block-cart__empty-cart__title {
	font-family: var(--daisy-serif, serif) !important;
	font-weight: 400;
	font-size: var(--t-t3) !important;
	line-height: 1.1;
	text-align: left !important;
	color: var(--dh-inchiostro);
	margin: 0 0 var(--vuoto-5) !important;
	padding: 0 !important;
}

.wp-block-woocommerce-empty-cart-block { text-align: left; }

.wp-block-woocommerce-empty-cart-block .wp-block-heading { text-align: left !important; }

.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t3);
	color: var(--dh-inchiostro);
	margin: var(--sezione) 0 var(--vuoto-5);
}

/* il separatore a puntini del tema non appartiene a questo alfabeto */
.wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none; }

/* ---------- la griglia di prodotti dentro i blocchi ---------- */

.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sezione-m) var(--vuoto-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-grid__product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	max-width: none;
}

.wc-block-grid__product-link { display: block; width: 100%; text-decoration: none; }

.wc-block-grid__product-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--dh-sabbia);
	border: 1px solid var(--dh-filo);
	overflow: hidden;
	margin: 0 0 var(--vuoto-4);
}

.wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.03); }

.wc-block-grid__product-title {
	font-family: var(--daisy-serif, serif) !important;
	font-size: var(--t-t1) !important;
	line-height: 1.15;
	color: var(--dh-inchiostro);
	margin: 0 0 var(--vuoto-2);
}

.wc-block-grid__product-price {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	color: var(--dh-oliva);
	margin: 0 0 var(--vuoto-4);
}

.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	width: auto;
	background: transparent;
	border: 1px solid var(--dh-oliva);
	border-radius: 2px;
	color: var(--dh-oliva);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 12px 24px;
}

.wc-block-grid__product .wp-block-button__link:hover { background: var(--dh-oliva); color: var(--dh-chiaro); }

/* ---------- campi e bottoni, ovunque nel percorso ---------- */

.woocommerce-cart .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select {
	min-height: 56px;
	border: 1px solid #C9C2B2;
	border-radius: 2px;
	background: transparent;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	color: var(--dh-inchiostro);
	padding: 0 var(--vuoto-4);
}

.woocommerce-account textarea { border: 1px solid #C9C2B2; border-radius: 2px; background: transparent; }

.woocommerce-cart .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-account input:focus {
	outline: 2px solid var(--dh-oliva);
	outline-offset: 2px;
}

.wc-block-components-button:not(.is-link),
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account input.button {
	border-radius: 2px !important;
	font-family: var(--daisy-sans, sans-serif) !important;
	font-size: var(--t-mini) !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	min-height: 56px;
	padding: 16px 30px !important;
	background: var(--dh-oliva) !important;
	color: var(--dh-chiaro) !important;
	border: 0 !important;
}

.wc-block-components-button:not(.is-link):hover,
.woocommerce-account .woocommerce-button:hover { background: #222A1A !important; }

/* ---------- tre regole di WooCommerce che passavano davanti alle nostre ----------
   Non erano sviste di scrittura: le nostre erano scritte bene ma pesavano meno,
   e chi pesa di più vince anche se arriva prima. Qui pareggiamo il peso una
   volta sola, invece di inseguire ogni pagina con un !important.

   1. gli angoli. Il riquadro dell'accesso stava a 5px e i campi a 4px, mentre
      tutto il sito taglia a 2. Tre raggi diversi nella stessa schermata. */
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register,
body.woocommerce-account form.woocommerce-EditAccountForm { border-radius: 0; }

body.woocommerce-account form .form-row input.input-text,
body.woocommerce-account form .form-row select,
body.woocommerce-account form .form-row textarea { border-radius: 2px; }

/* 2. il corpo del testo. Il tema dà venti pixel a ogni paragrafo con una regola
      a peso zero — :root :where(p) — che nessuno vede e che nell'area personale
      restava l'unica in campo: venti non è un gradino della nostra scala, sta
      fra il testo corrente e il titoletto e si legge come un'incrinatura. */
body.woocommerce-account main .form-row,
body.woocommerce-account main .woocommerce-LostPassword,
body.woocommerce-account main .woocommerce-MyAccount-content p,
body.woocommerce-account main .woocommerce-form-login > p,
body.woocommerce-account main .woocommerce-form-register > p { font-size: var(--t-corpo); }

/* 3. il «Cancella» della scheda prodotto. WooCommerce lo dimensiona in em sul
      contenitore delle varianti, che è a venti pixel: il link cambiava corpo
      con la larghezza dello schermo — 16,6 poi 15,6 poi 14,2 — senza che
      nessun gradino della scala lo prevedesse. */
.woocommerce div.product form.cart a.reset_variations { font-size: var(--t-mini); }

/* ---------- i totali ---------- */

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	color: #454236;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t2);
	color: var(--dh-inchiostro);
}

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--dh-filo);
	border-radius: 0;
	background: #FBF9F5;
	padding: var(--vuoto-6);
}

/* ---------- area personale ---------- */

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-EditAccountForm {
	border: 1px solid var(--dh-filo);
	border-radius: 0;
	padding: var(--vuoto-6);
	max-width: 52ch;
	margin: 0;
}

/* Legata al contenuto, non alla pagina: il corpo porta la classe
   .woocommerce-account anche attorno al footer, e lì questo inchiostro
   diventava scuro su scuro. È lo stesso inciampo del verde di WooCommerce
   corretto più sopra — vale la pena ricordarselo. */
.woocommerce-account main h2 {
	font-family: var(--daisy-serif, serif);
	font-weight: 400;
	font-size: var(--t-t3);
	color: var(--dh-inchiostro);
	margin: 0 0 var(--vuoto-5);
}

.woocommerce-account main .woocommerce-form__label,
.woocommerce-account main label {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dh-spento);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vuoto-2);
	list-style: none;
	margin: 0 0 var(--sezione-m);
	padding: 0 0 var(--vuoto-5);
	border-bottom: 1px solid var(--dh-filo);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid #D6CFC1;
	border-radius: 999px;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	color: #605C4E;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	border-color: var(--dh-inchiostro);
	color: var(--dh-inchiostro);
}

@media (max-width: 900px) {
	.wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.wc-block-grid__products { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- il carrello vuoto, versione nostra ---------- */

.dv-vuoto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vuoto-5);
	padding: var(--sezione-m) 0 0;
}

.dv-vuoto__riga {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-corpo);
	line-height: 1.6;
	font-weight: 300;
	color: #454236;
	margin: 0;
	max-width: 54ch;
}

.dv-vuoto__etichetta { color: var(--dh-spento); margin: var(--vuoto-4) 0 0; }

.dv-vuoto .dn-vie { max-width: 900px; }

.dn-via__prezzo {
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	color: var(--dh-oliva);
}

.dn-via__prezzo .woocommerce-price-suffix { display: none; }

/* ---------- avvisi ----------
   WooCommerce li disegna col bordo azzurro di sistema e una spunta verde:
   due colori che sul sito non esistono da nessun'altra parte. */

.wc-block-components-notice-banner {
	border: 1px solid var(--dh-filo) !important;
	border-left: 3px solid var(--dh-oliva) !important;
	border-radius: 0 !important;
	background: #FBF9F5 !important;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	color: var(--dh-inchiostro);
	padding: var(--vuoto-4) var(--vuoto-5) !important;
}

.wc-block-components-notice-banner.is-error { border-left-color: #B94030 !important; }

.wc-block-components-notice-banner > svg {
	fill: var(--dh-oliva);
	background: none !important;
	border-radius: 0;
}

.wc-block-components-notice-banner.is-error > svg { fill: #B94030; }

.wc-block-components-notice-banner a { color: var(--dh-oliva); }

/* il marchio nella testata ridotta del pagamento: stesso carattere del footer */
.woocommerce-checkout .wp-block-site-title a,
.woocommerce-checkout .wc-block-checkout__actions_row + * .wp-block-site-title {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t1);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dh-inchiostro);
	text-decoration: none;
}

/* L'occhietto che mostra la password è un bersaglio da sedici pixel dentro al
   campo: qui diventa toccabile col dito senza uscire dal riquadro. */
.woocommerce-account button.show-password-input {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-position: center;
}

/* Il blocco carrello e quello pagamento portano la classe alignwide del tema,
   che su schermi stretti li fa partire rientrati e li spinge oltre il bordo
   destro. Qui la nostra colonna ha l'ultima parola. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	width: auto !important;
	max-width: none !important;
	margin-inline: 0 !important;
	box-sizing: border-box;
}

/* WooCommerce riporta il margine globale del tema su ogni blocco che porta la
   classe has-global-padding, e lo fa con un selettore a tre classi che vince
   sui nostri: le nostre sezioni tornavano a 40px mentre tutto il resto del
   sito sta a 56. Qui pareggiamo il peso. */
body.woocommerce-page .daisy-rassicurazioni.has-global-padding,
body.woocommerce-page .dc-argomenti.has-global-padding,
body.woocommerce-page .dt-testata.has-global-padding,
body.woocommerce-page .dv-vuoto.has-global-padding {
	padding-inline: var(--margine);
}

/* ---------- i 24 pixel fantasma ----------
   WordPress stacca di 1,5rem i blocchi di primo livello del sito (testata,
   contenuto, piè di pagina) e ogni blocco che ne segue un altro dentro un
   contenitore di flusso. Le nostre sezioni portano già il loro respiro nel
   padding: quei 24px si sommavano e uscivano come strisce chiare fra una
   fascia e l'altra — su «La nostra storia» erano cinque, e dove il contenuto
   apre su fondo scuro si vedono benissimo.
   Il ritmo verticale lo decidono le sezioni, non il tema. */
:where(.wp-site-blocks) > * { margin-block-start: 0; }

main > * + *,
main > .entry-content > * + *,
main.wp-block-group > * + *,
main.wp-block-group > .entry-content > * + * { margin-block-start: 0; }

/* Lo stesso vale dentro le nostre sezioni: sono griglie e flex, e un margine
   sul secondo figlio non lo stacca — lo sfalsa rispetto al primo, che è come
   nascevano le colonne disallineate. Lo spazio lo dettano gap e padding. */
main :is(
	.dt-testata, .dc-testata, .ds-testata, .di-testata,
	.dp-testa, .dp-scheda, .dp-scheda__vista, .dp-scheda__scelta,
	.dp-dettagli, .dp-altri, .dp-altri__griglia,
	.dc-argomenti, .dc-misura, .dc-misura__testi, .dc-misura__coda,
	.dh-hero, .dh-config, .dh-collezione, .dh-lab, .dh-journal,
	.df-testata, .df-scelta, .df-matrice, .df-cabina,
	.ds-riga, .ds-progetto, .ds-numeri, .ds-nome,
	.di-griglia, .di-invito,
	.dl-elenco, .dl-voce, .dl-voce__corpo,
	.da-testata, .da-testata__interno,
	.dn-aiuto, .dn-vie, .dn-via, .dv-vuoto,
	.daisy-rassicurazioni, .dk-pagina
) > * { margin-block-start: 0; }

/* La scheda d'articolo in verso verticale: la fotografia sopra, il testo
   sotto. La usa la home, dove tre schede stanno in riga. */
.dl-voce--colonna {
	/* In colonna la scheda è una pila, non una griglia: così il corpo può
	   crescere fino in fondo e il «Leggi» si appoggia alla base. Con la
	   griglia i tre link cadevano a quote diverse — un titolo su due righe
	   invece che su tre alzava tutto quello che veniva dopo. */
	display: flex;
	flex-direction: column;
	gap: var(--vuoto-4);
	padding-bottom: 0;
	border-bottom: 0;
	align-items: stretch;
}

.dl-voce--colonna .dl-voce__foto { flex: 0 0 auto; }

.dl-voce--colonna .dl-voce__corpo { flex: 1 1 auto; }

/* il filo del «Leggi» scende in fondo alla scheda, uguale per tutte */
.dl-voce--colonna .dl-voce__filo { margin-top: auto; }

.dl-voce--colonna .dl-voce__foto { aspect-ratio: 3 / 2; }
.dl-voce--colonna .dl-voce__titolo { font-size: var(--t-t2); max-width: 24ch; }
.dl-voce--colonna .dl-voce__estratto { font-size: var(--t-nota); }

/* ---------- l'area toccabile dei link autonomi ----------
   Un link di testo alto venti pixel si legge benissimo e si tocca male: il
   minimo perché un dito lo prenda è ventiquattro.

   La prima soluzione era un riquadro trasparente sopra il link, con ::after:
   il disegno restava identico e il bersaglio cresceva. Sbagliata, e ci sono
   volute sei correzioni una per una per accorgersene. Un pseudo-elemento
   dipinge dentro il proprio elemento, quindi qualunque fratello che venga
   dopo — la voce successiva di un elenco, il blocco sotto — gli passa sopra
   e se lo mangia. Misurando l'area davvero raggiungibile invece di quella
   dichiarata, cinque voci su cinque dell'indice erano irraggiungibili.

   Qui l'altezza è vera. Il filo sotto è il sottolineato e non si può
   staccare dal testo, quindi lo spazio va soprattutto in alto: cinque sopra
   e tre sotto su una riga di venti fanno ventotto. Non si vede, e non
   dipende da chi dipinge per ultimo. */
.dh-filo,
.da-testata__ritorno,
.df-footer__voci a,
.dp-scheda__scelta .reset_variations,
.wp-block-woocommerce-breadcrumbs a,
/* il widget di Elementor rende le briciole con un'altra classe:
   la vecchia veniva dal blocco di WooCommerce, che non usiamo più */
.woocommerce-breadcrumb a,
.woocommerce-LostPassword a {
	display: inline-block;
	padding-block: 5px 3px;
	/* il margine negativo restituisce alla pagina l'altezza di main: l'area
	   toccabile resta 28px, la geometria torna quella del riferimento */
	margin-block: -5px -3px;
}

/* ---------- il lato che tocca il bordo ----------
   Le fasce a due colonne — fotografia di qua, testo di là — non hanno un
   contenitore centrato: occupano tutta la riga, e la colonna di testo tocca
   il bordo dello schermo da un lato solo. Quel lato è il margine di pagina,
   l'altro è spazio interno. Quale dei due dipende dall'ordine nel markup, non
   da noi: :first-child e :last-child se ne accorgono da soli, e la stessa
   regola vale per la fila di numeri e per la giostra della collezione.
   Sotto i 1400 pixel --margine e --bordo coincidono, quindi qui non cambia
   nulla; sopra, il testo resta incolonnato con il resto della pagina. */
.dh-hero__testo,
.dh-lab__testo,
.df-cabina__testo,
.ds-riga__testo,
.dh-lab__numero,
.ds-numeri__voce { padding-inline: var(--bordo); }

:is(.dh-hero__testo, .dh-lab__testo, .df-cabina__testo, .ds-riga__testo,
    .dh-lab__numero, .ds-numeri__voce):first-child { padding-inline-start: var(--margine); }

:is(.dh-hero__testo, .dh-lab__testo, .df-cabina__testo, .ds-riga__testo,
    .dh-lab__numero, .ds-numeri__voce):last-child { padding-inline-end: var(--margine); }

/* ---------- l'indice dell'articolo: bersagli veri, non riquadri ----------
   Le voci avevano il riquadro invisibile come gli altri link autonomi, e lì
   non funziona: un pseudo-elemento non passa sopra i fratelli che vengono
   dopo, quindi la voce successiva se lo mangiava. Misurato: cinque voci su
   cinque irraggiungibili sopra e sotto. Qui l'altezza è vera — tre pixel per
   parte su una riga di ventuno fanno ventisette — e non dipende da chi
   dipinge per ultimo. */
.da-indice__voci a {
	display: inline-block;
	padding-block: 3px;
	margin-block: -3px;
}

/* Stessa lezione dell'indice dell'articolo: il riquadro invisibile perde
   contro il fratello che viene dopo. Qui il link sta in fondo a un elenco di
   recapiti, e il blocco successivo gli passava sopra. Altezza vera. */
.daisy-contatti__mappa-link {
	display: inline-block;
	padding-block: 4px 3px;
	margin-block: -4px -3px;
}

/* «Iris» è largo ventun pixel: la parola più corta del sito, e sotto una
   fotografia fa da sola. Due pixel per lato la portano a venticinque — il
   sottolineato si allunga di pochissimo, e in cambio si riesce a toccarla. */
.di-scatto__modello {
	display: inline-block;
	padding: 4px 2px 3px;
	margin: -4px -2px -3px;
}

/* ---------- le posizioni di Elementor e i nostri shortcode ----------
   Dentro un modello del Theme Builder le sezioni rese dagli shortcode stanno
   in contenitori separati: la compattazione a fratelli adiacenti del template
   originale non può più agganciarsi, e i margini di primo livello vanno
   azzerati qui. Regole ereditate dall'adattatore di parity e promosse a
   foglio del sito: vestono markup nostro, che il pannello non governa. */
.elementor-location-archive .dt-testata { padding-bottom: var(--vuoto-6); }

.elementor-location-archive :is(.dt-testata, .dl-elenco, .dl-voce, .dl-voce__corpo) > *,
.elementor-location-archive :is(.dc-testata, .dc-filtro, .dc-griglia, .dc-misura, .dc-misura__testi, .dc-misura__coda, .dc-argomenti, .dc-argomenti__voce) > *,
.elementor-location-single :is(.dp-testa, .dp-scheda, .dp-scheda__vista, .dp-scheda__scelta, .dp-dettagli, .dp-altri, .dp-altri__griglia) > * {
	margin-block-start: 0;
}

@media (max-width: 900px) {
	.elementor-location-archive .dc-griglia { gap: 32px 28px; }
}
@media (max-width: 560px) {
	.elementor-location-archive .dc-griglia { gap: 36px; }
}

/* Alla cassa main mostrava una testatina minimale, non la testata piena del
   sito: il modello del Theme Builder qui si spegne, e la testatina la rende
   lo shortcode daisy_testata_checkout dentro la pagina. */
body.woocommerce-checkout .elementor-location-header,
body.woocommerce-checkout .elementor-location-footer { display: none; }

/* =========================================================
   RESIDUI DELLA BONIFICA DELL'ADATTATORE (18/8/2026)
   =========================================================
   Regole che vestivano markup reso dagli shortcode dentro le pagine
   Elementor: non sono mai state governabili dal pannello, quindi il loro
   posto è qui, nel foglio del sito, accanto al resto del disegno di quegli
   stessi componenti. Gli !important superstiti litigano con i fogli di
   WordPress/WooCommerce o col nostro stesso foglio, non con Elementor:
   ciascuno è annotato dagli agenti che l'hanno vagliato. */

/* ===== residuo da daisy-home-elementor ===== */
/* Il corpo aveva una quota INCHIODATA a 234px e il filo del «Leggi» il
   margine azzerato per forza: due schede alte uguali, ma il link cadeva
   subito sotto l'estratto, quindi a quote diverse a seconda che il titolo
   stesse su due righe o su tre. Ora la scheda è una pila (vedi
   .dl-voce--colonna): il corpo cresce fino in fondo e il filo si appoggia
   alla base con margin-top:auto. Qui resta solo il minimo, che tiene il
   ritmo verticale di prima. */
@media (min-width: 901px) {
  .dh-journal .dl-voce__corpo { min-height: 234px; }
}

.dh-config__nome,
.dh-config__spec { line-height: 1.4; }

/* ===== residuo da daisy-negozio ===== */
.daisy-elementor-dp-scheda .daisy3d__aiuto,
.daisy-elementor-dp-scheda .dp-sommario__spedizione {
  line-height: 1.4 !important;
}

@media (min-width: 901px) {
  .daisy-elementor-dp-scheda__scelta .dp-consegna {
    margin-top: 39px;
  }
}

@media (max-width: 560px) {
  .daisy-elementor-dp-scheda__scelta .dp-consegna {
    margin-top: 28px;
  }
}

/* ===== residuo da daisy-diario ===== */
/* L'azzeramento con !important che stava qui presumeva che lo spazio sopra i
   dati di servizio lo desse il contenitore del modello: non lo dava, e il
   filetto finiva incollato alle discendenti del titolo (rassegna di design).
   Via l'azzeratore: torna il margine di serie di .da-testata__dati. */

.daisy-elementor-articolo__indice .da-indice {
  margin-top: 24px;
}

/* ===== residuo da daisy-acquisto ===== */
/* Interni dei blocchi WooCommerce/WP resi dai nostri shortcode: il pannello
   non li governa, vivono nel foglio del sito. Valori copiati esatti. */

.daisy-elementor-cart__content .daisy-rassicurazioni {
  margin-top: 0 !important;
}

@media (min-width: 901px) {

  .daisy-elementor-cart__content .wp-block-woocommerce-cart-order-summary-block {
    margin-inline: 2px !important;
    min-height: 335px;
    width: 349px !important;
  }
}

.daisy-elementor-checkout__utility .wp-block-site-title,
.daisy-elementor-checkout__utility .wp-block-site-title a {
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
}

.daisy-elementor-checkout__utility .wp-block-site-title {
  margin: 0 !important;
}

.daisy-elementor-checkout__utility .wc-block-cart-link {
  height: 40px !important;
  width: 40px !important;
}

/* «Carrello» è l'UNICO testo del collegamento: spegnerlo con display:none
   lasciava il link senza nome per chi naviga a orecchio. Sparisce dagli occhi,
   resta per le tecnologie assistive. */
.daisy-elementor-checkout__utility .wc-block-cart-link__text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 901px) {

  .daisy-elementor-checkout__content .wp-block-woocommerce-checkout {
    min-height: 1154px;
  }
}

/* ---------------------------------------------------------------
   IL SIPARIO DEL MENÙ (sotto i 1100)
   Finché il telo è aperto la pagina sotto non scorre. Il resto del
   sipario vive nei comandi del widget nav-menu (strumenti/daisy-
   testata-piede.php): qui solo la regola che tocca il body.
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
    body:has(.elementor-location-header .elementor-menu-toggle.elementor-active) {
        overflow: hidden;
    }
}

/* ---------------------------------------------------------------
   LE COLONNE-FOTOGRAFIA NEGLI ARTICOLI (sotto i 782)
   Il core impila le colonne del blocco con flex-basis:100% !important:
   sei finiture diventavano sei quadrati a tutta larghezza — 4.300px di
   scorrimento a 768. Solo per le colonne che contengono UNA fotografia
   e nient'altro: tre per riga da tablet, due sul telefono. L'!important
   è obbligato: risponde a quello del core, non a una nostra regola.
   --------------------------------------------------------------- */
@media (max-width: 781px) {
	.elementor-location-single .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) {
		gap: var(--vuoto-4);
	}
	.elementor-location-single .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column {
		flex-basis: calc(33.33% - var(--vuoto-4)) !important;
		flex-grow: 1;
	}
}
@media (max-width: 560px) {
	.elementor-location-single .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) > .wp-block-column {
		flex-basis: calc(50% - var(--vuoto-4)) !important;
	}
}

/* ---------------------------------------------------------------
   LA CONFERMA D'ORDINE (order-received)
   Il collaudo la attraversava, nessuno l'aveva mai vestita: markup
   classico di WooCommerce dentro la pagina del pagamento, arrivava
   nudo e incollato al bordo. Cornice, banda dei dati, tabella e
   indirizzi nella lingua del sito.
   --------------------------------------------------------------- */
/* qui il modello di WooCommerce NON emette il solito involucro
   .woocommerce-order: i pezzi stanno sciolti nel div.woocommerce,
   e la cornice va data a lui — solo quando contiene la conferma */
.daisy-elementor-checkout__content .woocommerce:has(.woocommerce-thankyou-order-received) {
	padding: var(--vuoto-6) var(--margine) var(--sezione-m);
	/* woocommerce-blocktheme.css incolla max-width:1000px a ogni pagina di
	   account, carrello e cassa, e senza margini automatici: da 1100 in su
	   la conferma restava appesa a sinistra con mezzo schermo vuoto, e il
	   nostro rientro di margine la stringeva dentro quei mille pixel.
	   A 2000 il testo finiva in una colonna di 400. */
	max-width: none;
}

/* Rimessa sull'asse, la conferma prende la griglia canonica del sito:
   saluto e banda dei dati per tutta la larghezza, la tabella nella
   colonna larga, gli indirizzi in quella stretta. Sotto i 900 resta
   tutto in colonna com'era. */
@media (min-width: 901px) {
	.daisy-elementor-checkout__content .woocommerce-order,
	.daisy-elementor-checkout__content .woocommerce:has(> .woocommerce-thankyou-order-received) {
		display: grid;
		grid-template-columns: var(--griglia-due);
		column-gap: var(--respiro-colonne);
		align-items: start;
	}

	.daisy-elementor-checkout__content .woocommerce-order > .woocommerce-notice,
	.daisy-elementor-checkout__content .woocommerce-order > .woocommerce-order-overview,
	.daisy-elementor-checkout__content .woocommerce > .woocommerce-thankyou-order-received,
	.daisy-elementor-checkout__content .woocommerce > .woocommerce-order-overview {
		grid-column: 1 / -1;
	}

	.daisy-elementor-checkout__content .woocommerce-order > .woocommerce-order-details,
	.daisy-elementor-checkout__content .woocommerce > .woocommerce-order-details {
		grid-column: 1;
		margin-bottom: 0;
	}

	.daisy-elementor-checkout__content .woocommerce-order > .woocommerce-customer-details,
	.daisy-elementor-checkout__content .woocommerce > .woocommerce-customer-details {
		grid-column: 2;
	}

	/* nella colonna stretta i due indirizzi si leggono uno sotto l'altro */
	.daisy-elementor-checkout__content .woocommerce-order > .woocommerce-customer-details .woocommerce-columns--addresses,
	.daisy-elementor-checkout__content .woocommerce > .woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vuoto-5);
	}

	.daisy-elementor-checkout__content .woocommerce-order > * > .woocommerce-table--order-details {
		margin-bottom: 0;
	}
}

.daisy-elementor-checkout__content .woocommerce-thankyou-order-received {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t3);
	line-height: 1.1;
	color: var(--dh-inchiostro);
	margin: 0 0 var(--vuoto-6);
	text-wrap: balance;
}

/* la banda dei dati dell'ordine: numero, data, email, totale, metodo */
.daisy-elementor-checkout__content .woocommerce-thankyou-order-details {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vuoto-4) var(--sezione-m);
	margin: 0 0 var(--sezione-m);
	padding: var(--vuoto-5) 0;
	border-top: 1px solid var(--dh-filo);
	border-bottom: 1px solid var(--dh-filo);
}

.daisy-elementor-checkout__content .woocommerce-thankyou-order-details li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dh-spento);
}

.daisy-elementor-checkout__content .woocommerce-thankyou-order-details li strong {
	display: block;
	margin-top: var(--vuoto-1);
	font-size: var(--t-piccolo);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
	color: var(--dh-inchiostro);
}

.daisy-elementor-checkout__content .woocommerce-order-details__title,
.daisy-elementor-checkout__content .woocommerce-column__title {
	font-family: var(--daisy-serif, serif);
	font-size: var(--t-t2);
	font-weight: 400;
	line-height: 1.1;
	color: var(--dh-inchiostro);
	margin: 0 0 var(--vuoto-5);
}

/* la tabella dei dettagli, come quella del carrello */
.daisy-elementor-checkout__content .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0 0 var(--sezione-m);
}

.daisy-elementor-checkout__content .woocommerce-table--order-details th,
.daisy-elementor-checkout__content .woocommerce-table--order-details td {
	border: 0;
	border-bottom: 1px solid var(--dh-filo);
	padding: var(--vuoto-4) 0;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	text-align: left;
	vertical-align: top;
}

.daisy-elementor-checkout__content .woocommerce-table--order-details td:last-child,
.daisy-elementor-checkout__content .woocommerce-table--order-details th:last-child {
	text-align: right;
}

.daisy-elementor-checkout__content .woocommerce-table--order-details thead th {
	font-size: var(--t-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--dh-spento);
}

.daisy-elementor-checkout__content .woocommerce-table--order-details tfoot th {
	font-weight: 400;
	color: var(--dh-spento);
}

.daisy-elementor-checkout__content .woocommerce-table--order-details tfoot tr:last-child th,
.daisy-elementor-checkout__content .woocommerce-table--order-details tfoot tr:last-child td {
	font-weight: 500;
	color: var(--dh-inchiostro);
	border-bottom: 0;
}

.daisy-elementor-checkout__content .wc-item-meta {
	list-style: none;
	margin: var(--vuoto-2) 0 0;
	padding: 0;
	font-size: var(--t-nota);
	color: var(--dh-spento);
}

.daisy-elementor-checkout__content .wc-item-meta li { margin: 0; }
.daisy-elementor-checkout__content .wc-item-meta strong { font-weight: 500; }

/* i due indirizzi, affiancati da larghi e impilati da stretti */
.daisy-elementor-checkout__content .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vuoto-6);
}

.daisy-elementor-checkout__content .woocommerce-columns--addresses .woocommerce-column {
	width: auto;
	float: none;
}

/* WooCommerce appende al contenitore degli indirizzi le due pseudo-classi
   che sturavano i float: dentro una griglia diventano celle vere e aprono
   due righe vuote, che con lo stacco fra le righe spingevano il primo
   titolo 48px più in basso di «Dettagli ordine». */
.daisy-elementor-checkout__content .woocommerce-columns--addresses::before,
.daisy-elementor-checkout__content .woocommerce-columns--addresses::after,
.daisy-elementor-checkout__content .woocommerce-order::before,
.daisy-elementor-checkout__content .woocommerce-order::after {
	content: none;
}

/* WooCommerce inverte le colonne con un order: fatturazione a destra e
   spedizione a sinistra. Qui si legge nell'ordine di lettura. */
.daisy-elementor-checkout__content .woocommerce-columns--addresses .woocommerce-column--1 { order: 1; }
.daisy-elementor-checkout__content .woocommerce-columns--addresses .woocommerce-column--2 { order: 2; }

/* niente zebratura grigia sulle righe dei totali: fondo del sito */
.daisy-elementor-checkout__content .woocommerce-table--order-details tr,
.daisy-elementor-checkout__content .woocommerce-table--order-details tfoot th,
.daisy-elementor-checkout__content .woocommerce-table--order-details tfoot td,
.daisy-elementor-checkout__content .woocommerce-table--order-details tbody td {
	background: transparent;
}

.daisy-elementor-checkout__content .woocommerce-columns--addresses address {
	border: 1px solid var(--dh-filo);
	padding: var(--vuoto-5);
	font-family: var(--daisy-sans, sans-serif);
	font-style: normal;
	font-size: var(--t-piccolo);
	line-height: 1.7;
	color: #454236;
}

@media (max-width: 640px) {
	.daisy-elementor-checkout__content .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Nel riepilogo del pagamento la riga forte di progetto sopra il Totale
   conviveva col bordo di serie del contenitore dei blocchi: doppia riga
   a tre pixel di distanza. Ne resta una, la nostra. */
.daisy-elementor-checkout__content .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	border-top-width: 0;
}

/* ---------------------------------------------------------------
   GLI STATI PIENI (giro da cliente, 19/8)
   Accesso sbagliato, codice sconto rifiutato, ordine da ripagare:
   gli stati d'errore parlavano coi colori di sistema e coi default
   freddi di WooCommerce/Elementor. Qui vestono il linguaggio.
   --------------------------------------------------------------- */

/* il focus degli avvisi: visibile ma nostro, mai l'anello blu di sistema */
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible {
	outline: 1px solid #2E3724;
	outline-offset: 2px;
}

/* il testo degli avvisi non scende mai sotto i 14px */
@media (max-width: 768px) {
	.wc-block-components-notice-banner__content { font-size: 14px; }
}

/* l'accesso: le mezze righe di WooCommerce si impilano da strette
   (i float a 47% facevano montare «Password» sul campo utente) */
@media (max-width: 560px) {
	body.woocommerce-account .form-row-first,
	body.woocommerce-account .form-row-last { float: none; width: 100%; }
}

/* la scheda e i campi dell'accesso nel caldo del sito, come il modulo
   contatti: filo caldo, campi bordati, accenti in tavolozza */
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register,
body.woocommerce-account form.woocommerce-EditAccountForm {
	border-color: #D8D0C2;
	background: #FFFFFF;
}

body.woocommerce-account form .form-row input.input-text,
body.woocommerce-account form .form-row select,
body.woocommerce-account form .form-row textarea {
	background: #FFFFFF;
	border: 1px solid #E6E1D7;
	color: var(--dh-inchiostro);
}

body.woocommerce-account .required { color: #B94030; }

/* le righe del modulo respirano: l'etichetta Password toccava il campo sopra */
body.woocommerce-account form .form-row { margin: 0 0 var(--vuoto-4); }

body.woocommerce-account .woocommerce-LostPassword a {
	font-size: var(--t-piccolo);
	color: #2E3724;
}

/* il codice sconto rifiutato: mattone smorzato, non il rosso acceso */
.wc-block-components-validation-error p { color: #B94030; }
.wc-block-components-validation-error svg { fill: #B94030; }
.wc-block-components-text-input.has-error label { color: #B94030; }
.wc-block-components-text-input.has-error input { border-color: #B94030; }

/* l'ordine da ripagare (order-pay): stessa cornice della conferma —
   il modulo classico arrivava nudo al vivo dello schermo */
.daisy-elementor-checkout__content .woocommerce:has(#order_review),
.daisy-elementor-checkout__content .woocommerce:has(.daisy-avviso-pagamento) {
	padding: var(--vuoto-6) var(--margine) var(--sezione-m);
}

.daisy-elementor-checkout__content .woocommerce:has(#order_review) table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0 0 var(--sezione-m);
}

.daisy-elementor-checkout__content .woocommerce:has(#order_review) table.shop_table th,
.daisy-elementor-checkout__content .woocommerce:has(#order_review) table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--dh-filo);
	padding: var(--vuoto-4) 0;
	background: transparent;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	text-align: left;
}

.daisy-elementor-checkout__content .woocommerce:has(#order_review) table.shop_table th:last-child,
.daisy-elementor-checkout__content .woocommerce:has(#order_review) table.shop_table td:last-child { text-align: right; }

.daisy-elementor-checkout__content .woocommerce:has(#order_review) thead th {
	font-size: var(--t-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--dh-spento);
}

/* il riquadro dei metodi di pagamento: sabbia e crema, via il lavanda */
.daisy-elementor-checkout__content #payment { background: #EAE4D9; border-radius: 0; }
.daisy-elementor-checkout__content #payment div.payment_box {
	background: #F4F0E8;
	color: var(--dh-inchiostro);
	border: 1px solid var(--dh-filo);
	border-radius: 0;
}
.daisy-elementor-checkout__content #payment div.payment_box::before { display: none; }
.daisy-elementor-checkout__content .woocommerce:has(#order_review) .required { color: #2E3724; }

/* qui non ci sono indirizzo e spedizione: il sottotitolo generico tace,
   parla l'avviso di stato stampato da daisy-pagine */
body:has(.daisy-elementor-checkout__content #order_review) .daisy-elementor-acquisto__intro { display: none; }

/* l'avviso di stato sopra il riepilogo (ordine fallito o in attesa) */
.daisy-avviso-pagamento {
	background: #EAE4D9;
	border: 1px solid #B94030;
	color: var(--dh-inchiostro);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	line-height: 1.6;
	padding: 14px 16px;
	margin: 0 0 var(--vuoto-6);
}

/* ---------------------------------------------------------------
   TASTIERA E LETTORI DI SCHERMO (audit del 20/8)
   Le barriere trovate camminando il sito con il solo Tab. Le cure
   stanno qui perché vestono markup di WooCommerce e di plugin, che
   il pannello di Elementor non governa.
   --------------------------------------------------------------- */

/* Il salto al contenuto: prima fermata di ogni pagina, fuori schermo
   finché non riceve il fuoco. Prima servivano OTTO Tab per uscire
   dalla testata, su ogni pagina.
   Linea guida — Accessibilità: chi naviga da tastiera deve poter
   raggiungere il contenuto senza attraversare ogni volta la navigazione. */
.dh-salta {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	background: var(--dh-oliva, #2E3724);
	color: var(--dh-chiaro, #F4F0E8);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 20px;
	text-decoration: none;
}

.dh-salta:focus,
.dh-salta:focus-visible {
	left: var(--margine);
	top: 8px;
	outline: 2px solid var(--dh-inchiostro, #1E1D19);
	outline-offset: 2px;
}

/* Le pastiglie delle finiture: l'anello di fuoco del plugin è un alone
   #DDD su fondo crema — 1,19:1, invisibile — e per giunta spegne il
   contorno di sistema. Sul percorso d'acquisto è la barriera peggiore.
   Linea guida — Accessibilità: gli elementi interattivi devono mostrare
   chiaramente lo stato di fuoco. */
.woo-variation-swatches .variable-items-wrapper .variable-item:focus-visible,
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):focus-visible {
	/* :focus-visible e non :focus — l'anello lo vede chi arriva col Tab, non
	   chi clicca. Il :not() serve solo a pareggiare il peso della regola del
	   plugin (0,5,0): senza, il box-shadow non si spegne davvero.
	   Stacco a 2px: le finiture stanno in una griglia con 8px di respiro. */
	outline: 2px solid var(--dh-inchiostro, #1E1D19);
	outline-offset: 2px;
	box-shadow: none;
}

/* …e il nome della finitura, che il plugin mostra solo al passaggio del
   mouse, compare anche quando ci si arriva col Tab: senza, chi tabula
   vede sei rettangoli colorati senza nome. */
.woo-variation-swatches [data-wvstooltip]:focus-visible::after,
.woo-variation-swatches [data-wvstooltip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

/* Fermate fantasma. Il pannello del carrello chiuso teneva cinque link
   a 0×0 px nell'ordine di tabulazione; a 390 il menù chiuso riceveva il
   fuoco pur essendo alto zero e aria-hidden. `visibility: hidden` li
   toglie dal percorso senza toccare le transizioni che Elementor anima. */
.elementor-menu-cart__container[aria-hidden="true"] { visibility: hidden; }
nav.elementor-nav-menu--dropdown[aria-hidden="true"] { visibility: hidden; }

/* Il fermo-scorrimento del sipario stava solo su body, ma lo scroller di
   questo documento è <html>: sotto il telo la pagina scorreva davvero. */
@media (max-width: 1100px) {
	html:has(.elementor-location-header .elementor-menu-toggle.elementor-active) {
		overflow: hidden;
	}
}

/* Bersagli sotto la soglia sul tocco: le pastiglie della home stavano a
   42px, due sotto i 44 raccomandati.
   Linea guida — Accessibilità: i bersagli tattili misurano almeno 44pt. */
@media (max-width: 900px) {
	.dh-pillola,
	.dh-pillola--gamba {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Un dito appoggiato sulla scena 3D bloccava lo scorrimento della pagina:
   con pan-y il trascinamento orizzontale gira ancora il tavolino, ma lo
   scorrimento verticale torna alla pagina.
   Linea guida — Gesti: un gesto personalizzato non deve rubare i gesti
   di sistema su cui la gente conta. */
.daisy3d__scena,
.dh-config__palco { touch-action: pan-y; }

/* Chi ha chiesto meno movimento lo ottiene anche dalle transizioni del
   foglio (il JavaScript del configuratore lo rispettava già).
   Linea guida — Movimento: quando la preferenza è attiva, riduci le
   animazioni automatiche e ripetitive. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* La scena in tre dimensioni ora riceve il fuoco (si gira con le frecce):
   quando ci si arriva col Tab deve vedersi, come ogni altro comando. */
.daisy3d__scena:focus-visible,
.dh-config__scena:focus-visible {
	outline: 2px solid var(--dh-inchiostro, #1E1D19);
	outline-offset: 3px;
}

.dh-config__scena:focus-visible { outline-color: var(--dh-chiaro, #F4F0E8); }

/* Il nome del prodotto nel catalogo ora è un h2 (serviva a chi naviga per
   intestazioni: la pagina della collezione non ne aveva nessuno per i
   modelli). L'involucro non porta stile proprio — il vestito resta
   sull'ancora, e il ritmo della tessera non cambia di un pixel. */
.dc-tessera__titolo {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	color: inherit;
}

/* L'indice dell'articolo era già `position: sticky`, ma non aveva strada:
   la colonna che lo ospita è alta quanto il suo contenuto (259px) dentro
   una griglia alta 2147, e uno sticky non può viaggiare oltre il proprio
   contenitore. Qui la colonna si allunga quanto la riga, e l'indice
   accompagna la lettura fino in fondo.
   Linea guida — Layout: un elemento che deve restare a vista mentre si
   scorre ha bisogno di un contenitore alto quanto la scorrimento. */
@media (min-width: 1101px) {
	.daisy-elementor-articolo__indice {
		align-self: stretch;
		height: 100%;
	}
	.daisy-elementor-articolo__indice > .elementor-element,
	.daisy-elementor-articolo__indice > .elementor-element > .elementor-widget-container {
		height: 100%;
	}
}

/* Il nastro si trascina: il cursore lo dice prima ancora che ci si provi. */
.dh-rail { cursor: grab; }
.dh-rail:active { cursor: grabbing; }
.dh-rail img,
.dh-rail a { user-select: none; -webkit-user-drag: none; }
/* mentre si trascina, il testo non si seleziona: è il modo giusto di
   ottenerlo, senza annullare gli eventi del puntatore (preventDefault su
   pointermove fa sparare pointercancel e uccide il trascinamento). */


/* IL CAMPO DELLA QUANTITÀ (scheda prodotto)
   Erano due scatole annidate: il contenitore .quantity con il suo bordo e
   dentro l'input con un SECONDO bordo, 23px più stretto e 4px più basso —
   un riquadro bianco che ballava dentro un riquadro col filo. Ora la
   scatola è una sola: il filo lo porta il contenitore, il campo lo riempie
   e non disegna niente. */
.dp-scheda__scelta .quantity {
	background: #FFFFFF;
	overflow: hidden;
}

.dp-scheda__scelta .quantity input.qty {
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	border-radius: 0;
	margin: 0;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	color: var(--dh-inchiostro);
	-moz-appearance: textfield;
}

/* le frecce del campo numerico non servono: il numero si scrive, e nel
   carrello ci sono i comandi +/− veri */
.dp-scheda__scelta .quantity input.qty::-webkit-outer-spin-button,
.dp-scheda__scelta .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dp-scheda__scelta .quantity input.qty:focus-visible {
	outline: 2px solid var(--dh-inchiostro, #1E1D19);
	outline-offset: -2px;
}

/* ---------------------------------------------------------------
   LA PAGINA DEL PAGAMENTO
   Due cose la facevano sembrare di un altro sito: il marchio in alto
   partiva a x=120 (il blocco di WordPress porta la sua griglia
   «constrained», che non è la nostra) e i campi avevano il vestito
   predefinito di WooCommerce — angoli a 4px e filo scuro trasparente,
   mentre tutto il sito ha angoli vivi e fili caldi.
   --------------------------------------------------------------- */

/* il marchio sull'asse del sito, come ogni altra cosa */
.daisy-elementor-checkout__utility .wp-block-group.has-global-padding,
.daisy-elementor-checkout__utility > .wp-block-group {
	padding-inline: var(--margine);
	max-width: none;
}

.daisy-elementor-checkout__utility .wp-block-group.alignwide {
	max-width: none;
	margin-inline: 0;
}

/* i campi nella lingua del modulo contatti: filo caldo, angoli vivi,
   la stessa altezza dei campi del resto del sito */
/* i fogli di WooCommerce caricano DOPO il nostro e pesano uguale: senza
   un anello in più vincerebbero loro. Il :not() sul tipo aggiunge il
   peso che serve senza cambiare quali campi sono colpiti. */
.daisy-elementor-checkout__content .wc-block-components-form .wc-block-components-text-input input:not([type="hidden"]),
.daisy-elementor-checkout__content .wc-block-components-form .wc-block-components-textarea:not([hidden]),
.daisy-elementor-checkout__content .wc-block-components-form .wc-blocks-components-select__select:not([hidden]) {
	border-radius: 0;
	border: 1px solid #E6E1D7;
	background: #FFFFFF;
	color: var(--dh-inchiostro);
	font-family: var(--daisy-sans, sans-serif);
}

.daisy-elementor-checkout__content .wc-block-components-form .wc-block-components-text-input input:focus,
.daisy-elementor-checkout__content .wc-block-components-form .wc-blocks-components-select__select:focus {
	outline: 2px solid var(--dh-inchiostro, #1E1D19);
	outline-offset: -2px;
	box-shadow: none;
}

/* l'etichetta che galleggia nel campo prende il grigio del sito */
.daisy-elementor-checkout__content .wc-block-components-text-input label {
	color: var(--dh-spento);
	font-family: var(--daisy-sans, sans-serif);
}

/* i riquadri dei metodi di spedizione e pagamento: sabbia e filo caldo,
   non il grigio-lavanda dei blocchi */
.daisy-elementor-checkout__content .wc-block-components-radio-control-accordion-option,
.daisy-elementor-checkout__content .wc-block-components-radio-control__option {
	border-radius: 0;
	border-color: var(--dh-filo);
}

.daisy-elementor-checkout__content .wc-block-components-radio-control-accordion-option:has(input:checked) {
	background: #EAE4D9;
	border-color: #2E3724;
}

/* Il riquadro del riepilogo: angoli vivi e filo caldo come ogni altra
   scheda del sito (aveva gli angoli tondi dei blocchi), e il titolo a
   bandiera come tutti gli altri titoli di sezione — era l'unico
   centrato della pagina. */
.daisy-elementor-checkout__content .wc-block-components-sidebar,
.daisy-elementor-checkout__content .wc-block-checkout__sidebar {
	border-radius: 0;
}

.daisy-elementor-checkout__content .wc-block-components-sidebar > * {
	border-radius: 0;
	border-color: var(--dh-filo);
}

.daisy-elementor-checkout__content .wc-block-components-checkout-order-summary__title,
.daisy-elementor-checkout__content .wc-block-components-checkout-order-summary__title-text {
	text-align: left;
	justify-content: flex-start;
}

/* Le bande a tutta pagina (foto a sinistra, testo a destra) non hanno il
   margine da cui contare: il loro testo cadeva a 776 e 785 mentre tutto
   il resto del sito cade a 793. Qui il rientro si calcola dall'asse
   secondario, così la colonna di testo resta incolonnata col resto della
   pagina a ogni larghezza. */
@media (min-width: 901px) {
	/* La colonna della fotografia finisce esattamente dove comincia
	   l'asse secondario, meno il respiro interno del testo: così il
	   testo della banda cade sullo stesso asse del resto della pagina.
	   (I contenitori portano il prefisso «daisy-elementor-»: sono
	   contenitori del Theme Builder, non markup nostro.) */
	.daisy-elementor-ds-riga:not(.daisy-elementor-ds-riga--inversa) > .elementor-element:first-child,
	.daisy-elementor-lab__riga:not(.daisy-elementor-lab__riga--inversa) > .elementor-element:first-child {
		flex: 0 0 50%;
	}
	/* al testo si dà esattamente la distanza che manca all'asse: così non
	   dipende da quanto vale il respiro interno, che cambia per banda */
	.daisy-elementor-ds-riga:not(.daisy-elementor-ds-riga--inversa) > .elementor-element:last-child,
	.daisy-elementor-lab__riga:not(.daisy-elementor-lab__riga--inversa) > .elementor-element:last-child {
		flex: 1 1 0;
	}
}

/* IL RIEPILOGO DEL CARRELLO
   Il bottone «Procedi al pagamento» usciva dalla colonna del riquadro: le
   righe stavano fra 952 e 1301, lui fra 950 e 1355 — 54 pixel di sbordo a
   destra. E il riquadro aveva respiri diversi sui due fianchi (30 e 28).
   Qui il respiro è uguale e il bottone occupa esattamente la colonna. */
.daisy-elementor-cart__content .wc-block-components-sidebar,
.daisy-elementor-cart__content .wp-block-woocommerce-cart-totals-block {
	padding-inline: 28px;
}

/* Non era il bottone a sbordare: riempie giustamente il riquadro
   (947→1356). Erano le RIGHE a fermarsi prima (950→1299), perché il loro
   involucro porta un rientro in più. Ora tutto sta sulla stessa colonna. */
.daisy-elementor-cart__content .wc-block-components-totals-wrapper,
.daisy-elementor-cart__content .wc-block-components-totals-item,
.daisy-elementor-cart__content .wc-block-components-panel {
	padding-inline: 0;
	margin-inline: 0;
	width: 100%;
	max-width: none;
}

.daisy-elementor-cart__content .wc-block-cart__submit-button {
	width: 100%;
	margin-inline: 0;
}


/* L'AVVISO «aggiunto al carrello»
   Arrivava con il vestito di WooCommerce: una fascia chiara senza filo,
   incollata sopra le briciole di pane, che le copriva. Ora è un avviso
   nella lingua del sito, con il suo respiro e un filo che lo separa. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #EAE4D9;
	border: 1px solid var(--dh-filo);
	border-radius: 0;
	color: var(--dh-inchiostro);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	line-height: 1.6;
	padding: 16px 20px;
	margin: 0 0 var(--vuoto-6);
	display: flex;
	align-items: center;
	gap: var(--vuoto-4);
	flex-wrap: wrap;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	background: transparent;
	border: 1px solid #2E3724;
	color: #2E3724;
	border-radius: 0;
	padding: 8px 18px;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-mini);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

/* La conferma d'ordine usava solo la metà sinistra dello schermo largo:
   la tabella e gli indirizzi ora prendono tutta la colonna del sito. */
.daisy-elementor-checkout__content .woocommerce:has(.woocommerce-thankyou-order-received) > *,
.daisy-elementor-checkout__content .woocommerce-order-details,
.daisy-elementor-checkout__content .woocommerce-columns--addresses {
	max-width: none;
	width: 100%;
}

/* L'avviso «aggiunto al carrello» è un banner dei blocchi
   (.wc-block-components-notice-banner), non il vecchio .woocommerce-message:
   arrivava come una fascia chiara senza filo, appiccicata alle briciole di
   pane. Qui prende sabbia, filo e respiro, come ogni altro avviso del sito. */
.e-woocommerce-notices-wrapper .wc-block-components-notice-banner:not([hidden]):not(.mai) {
	background: #EAE4D9;
	border: 1px solid var(--dh-filo);
	border-left-width: 1px;
	border-radius: 0;
	color: var(--dh-inchiostro);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	/* come sopra: i fogli dei blocchi vincono se non si risponde */
	background: #EAE4D9 !important;
	border: 1px solid var(--dh-filo) !important;
	border-radius: 0 !important;
	padding: 14px 18px !important;
	margin: 0 0 var(--vuoto-6) !important;
}

.e-woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success {
	border-color: #2E3724;
}

.e-woocommerce-notices-wrapper .wc-block-components-notice-banner svg {
	fill: #2E3724;
}

/* Nel riepilogo del carrello il blocco dei totali portava un rientro suo
   (349px dentro una colonna da 409): le righe finivano prima del bottone.
   Ora tutti stanno sulla stessa colonna. */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block:not(.mai),
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:not(.mai),
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block:not(.mai) {
	/* !important obbligato: WooCommerce impone la larghezza del blocco con
	   la stessa precedenza, e senza rispondere allo stesso modo le righe
	   restano a 349 dentro una colonna da 407. Provato: con la precedenza
	   forzata il blocco riempie la colonna e le righe si incolonnano col
	   bottone. */
	padding-inline: 0 !important;
	margin-inline: 0 !important;
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   IL CAMPO DELLA FOTO (modulo contatti)
   «Mandaci una foto» della galleria porta qui: senza un campo per
   allegarla il bottone finiva in un modulo che non c'entrava.
   Elementor lascia il controllo del browser nudo — «Scegli file» di
   sistema in mezzo a campi vestiti — e l'àncora #modulo atterrava
   sotto la testata appiccicata.
   --------------------------------------------------------------- */
#modulo {
	scroll-margin-top: 110px;
}

.daisy-elementor-contatti__form input[type="file"] {
	display: flex;
	align-items: center;
	gap: var(--vuoto-3);
	width: 100%;
	min-height: 51px;
	padding: 8px 12px;
	background: #FFFFFF;
	border: 1px solid #D8D0C2;
	border-radius: 0;
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-piccolo);
	font-weight: 300;
	color: var(--dh-spento);
}

.daisy-elementor-contatti__form input[type="file"]::file-selector-button {
	appearance: none;
	-webkit-appearance: none;
	/* lo stacco non può venire dal gap: il nome del file è un nodo di testo
	   anonimo, non un elemento della riga flessibile */
	margin: 0 var(--vuoto-3) 0 0;
	padding: 9px 18px;
	border: 1px solid var(--dh-inchiostro);
	border-radius: 0;
	background: transparent;
	color: var(--dh-inchiostro);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-micro);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.daisy-elementor-contatti__form input[type="file"]::file-selector-button:hover {
	background: var(--dh-inchiostro);
	color: var(--dh-chiaro);
}

.daisy-elementor-contatti__form input[type="file"]:focus-visible {
	outline: 2px solid var(--dh-inchiostro);
	outline-offset: 2px;
}

/* l'etichetta del consenso esiste solo perché la notifica per mail la usa
   come nome del campo: sopra la casella sarebbe un doppione della frase
   che le sta accanto */
.daisy-elementor-contatti__form .elementor-field-type-acceptance > .elementor-field-label {
	display: none;
}

/* Il testo che il browser scrive da sé accanto al bottone («Nessun file
   selezionato») non si stila e non va a capo: sul telefono si troncava a
   metà parola. Si spegne col colore trasparente — la pseudo-classe del
   bottone tiene il suo — e il nome del file lo scrive lo script, in un
   elemento nostro che può andare a capo come si deve. */
/* il colore del testo dei campi lo fissa un comando del widget Form, con
   un selettore più pesante: qui serve un anello in più per spegnerlo */
.daisy-elementor-contatti__form .elementor-field-group input[type="file"].elementor-field.elementor-upload-field {
	color: transparent;
}

.dm-file__nome {
	display: block;
	margin-top: var(--vuoto-2);
	font-family: var(--daisy-sans, sans-serif);
	font-size: var(--t-nota);
	line-height: 1.5;
	color: var(--dh-inchiostro);
	overflow-wrap: anywhere;
}

.dm-file__nome--vuoto {
	color: var(--dh-spento);
}

/* ---------------------------------------------------------------
   L'AREA PERSONALE SULL'ASSE
   La scheda dell'account vive già dentro un contenitore che porta il
   margine del sito: il rientro di WooCommerce lo raddoppiava, e il
   tetto di 1000px del foglio a blocchi (woocommerce-blocktheme.css)
   la teneva incollata a sinistra. A 1600 il modulo di accesso partiva
   100px dentro il titolo, con 920px di vuoto a destra.
   --------------------------------------------------------------- */
.woocommerce-account .e-my-account-tab .woocommerce {
	max-width: none;
	padding-inline: 0;
}

/* ---------------------------------------------------------------
   LE ULTIME LIMATURE DELLA CONFERMA (revisione avversariale, 22/8)
   Due misure del foglio non arrivavano a destinazione: i fogli di
   WooCommerce pesano uguale e caricano dopo, quindi vincevano loro.
   Un anello in più per ciascuna, misurato.
   --------------------------------------------------------------- */

/* «.woocommerce ul.order_details li{font-size:.715em}» schiacciava la banda
   dei dati dell'ordine a 9,3px: illeggibile. */
.daisy-elementor-checkout__content .woocommerce ul.woocommerce-thankyou-order-details li {
	font-size: var(--t-micro);
}

.daisy-elementor-checkout__content .woocommerce ul.woocommerce-thankyou-order-details li strong {
	font-size: var(--t-piccolo);
}

/* «Dettagli ordine» e «Indirizzo di fatturazione» stanno affiancati e devono
   pesare uguale: su quest'ultimo vinceva
   «.woocommerce-page .woocommerce-column__title{font-size:…--large}» — 36px
   contro 26px. */
.daisy-elementor-checkout__content .woocommerce-customer-details .woocommerce-column__title {
	font-size: var(--t-t2);
}

/* In modalità a colori forzati il sistema riscrive i colori e il nostro
   «color:transparent» sul campo salta: tornava a vedersi il testo del
   browser, sommato al nome che scriviamo noi. Lì l'eco si toglie di mezzo. */
@media (forced-colors: active) {
	.dm-file__nome {
		display: none;
	}
}