/*
 * Spazio sotto l'header, uguale su tutto il sito.
 *
 * Il problema: la barra dell'header è in posizione fissa e il suo contenitore
 * ha altezza zero, quindi non riserva spazio. Ogni vista si arrangiava per conto
 * suo e il risultato era una forbice di oltre 200 pixel fra una pagina e
 * l'altra, con i primi 70px di molte pagine nascosti sotto la barra.
 *
 * Ogni numero qui sotto è stato MISURATO sul sito, non dedotto. La barra è 70px
 * a telefono, tablet e desktop: se un giorno cambia, si tocca una variabile
 * sola.
 */

:root {
	--frasette-barra: 70px;
	--frasette-aria: 32px;
}

/* 1 — Il contenitore dell'header occupa lo spazio che la barra copre. */
body [data-elementor-type="header"] {
	min-height: var(--frasette-barra);
}

/* 2 — Un solo respiro sotto la barra, su ogni tipo di vista. */
body [data-elementor-type="wp-page"],
body [data-elementor-type="product-archive"],
body [data-elementor-type="archive"],
body [data-elementor-type="single-page"],
body [data-elementor-type="search-results"] {
	padding-top: var(--frasette-aria);
}

/*
 * 3 — Via i compensi messi a mano: erano il rimedio artigianale al punto 1 e
 * ora si sommerebbero.
 */
body [data-elementor-type="wp-page"] > .elementor-element:first-child,
body [data-elementor-type="single-page"] > .elementor-element:first-child,
body [data-elementor-type="search-results"] > .elementor-element:first-child {
	margin-top: 0 !important;
}

/*
 * 4 — Archivi prodotto (shop e tutte le categorie).
 * Qui il PRIMO figlio è nascosto (`display:none`) e il margine di compenso —
 * 100px — sta sul secondo: azzerare solo il primo non serviva a niente, ed è
 * il motivo per cui le categorie restavano a 261px di bianco contro i 32 delle
 * altre pagine.
 */
body [data-elementor-type="product-archive"] > .elementor-element:first-child,
body [data-elementor-type="product-archive"] > .elementor-element:first-child + .elementor-element,
body [data-elementor-type="archive"] > .elementor-element:first-child,
body [data-elementor-type="archive"] > .elementor-element:first-child + .elementor-element,
/*
 * Il blocco delle due colonne, agganciato per IDENTIFICATORE e non per
 * posizione: fino al 17/09 era «il secondo figlio», poi sopra è stata inserita
 * la sezione del percorso e la posizione non valeva più — i suoi 100px di
 * margine tornavano a farsi sentire, e filtri e griglia scendevano di 174px.
 */
body [data-elementor-type="product-archive"] .elementor-element-0d5cb61,
body [data-elementor-type="archive"] .elementor-element-0d5cb61 {
	margin-top: 0 !important;
}

/*
 * 5 — Home: il primo elemento è un distanziatore vuoto alto 52px, messo per
 * compensare la barra prima che lo spazio fosse riservato davvero. Ora è
 * l'unico avanzo che tiene la home a 84px invece che a 32.
 */
body .elementor-element-0b3928c,   /* home italiana */
body .elementor-element-15b82b8 {  /* home inglese, stesso ruolo altro id */
	display: none !important;
}

/*
 * 5-bis — Archivi: dopo il margine da 100px ne restava un altro da 103px,
 * annidato due livelli piu dentro (il wrap dei widget). E il motivo per cui le
 * categorie erano ancora a 161px invece che a 32.
 */
body [data-elementor-type="product-archive"] .elementor-element-0d5cb61 .elementor-widget-wrap,
body [data-elementor-type="archive"] .elementor-element-0d5cb61 .elementor-widget-wrap {
	margin-top: 0 !important;
}

/*
 * 5-ter — E sotto ancora restavano 26px: 16 di padding sulla sezione piu 10 sul
 * primo widget. Erano gli ultimi due strati della compensazione fatta a mano,
 * uno dentro l altro. Con questi gli archivi arrivano ai 32 di tutto il resto.
 */
body [data-elementor-type="product-archive"] > .elementor-element:first-child + .elementor-element,
body [data-elementor-type="archive"] > .elementor-element:first-child + .elementor-element {
	padding-top: 0 !important;
}

body [data-elementor-type="product-archive"] .elementor-element-0d5cb61 .elementor-widget-wrap > .elementor-element:first-child,
body [data-elementor-type="archive"] .elementor-element-0d5cb61 .elementor-widget-wrap > .elementor-element:first-child {
	padding-top: 0 !important;
}

/*
 * 6 — Scheda prodotto (`data-elementor-type="product"`, template #58 IT / #2614 EN).
 * Fino al 10/09 il template portava una SUA copia dell'header, tirata su di 96px
 * sotto la barra, e nascondeva quello del sito: su desktop l'header usciva
 * tagliato a metà sul bordo alto, su telefono spariva. Tolta la copia, la scheda
 * usa l'header del sito come ogni altra vista; qui si toglie il compenso che il
 * primo blocco aveva per quella copia (90px di margine + 4em di padding).
 */
body [data-elementor-type="product"] {
	padding-top: var(--frasette-aria);
}

body [data-elementor-type="product"] > .elementor-element:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* I 10px che Elementor mette in cima a ogni colonna: tolti a tutte e due, cosi' foto e titolo restano allineati. */
body [data-elementor-type="product"] > .elementor-element:first-child > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-top: 0 !important;
}

/* Sul telefono lo stesso respiro ruba troppo schermo. */
@media (max-width: 767px) {
	:root {
		--frasette-aria: 20px;
	}
}

/*
 * 7 — Pagine che aprono con un'immagine a tutta larghezza.
 *
 * Il respiro serve quando sotto la barra comincia del testo. Sopra una foto a
 * tutta larghezza invece stacca l'immagine dall'header e si vede che è un
 * rattoppo: lì l'immagine deve toccare la barra.
 *
 * La classe la mette il PHP leggendo la struttura della pagina: in CSS non si
 * può sapere se un elemento ha un'immagine di sfondo, e farlo in JavaScript
 * farebbe lampeggiare il bianco prima di toglierlo.
 */
body.frasette-apre-con-immagine [data-elementor-type="wp-page"],
body.frasette-apre-con-immagine [data-elementor-type="single-page"] {
	padding-top: 0;
}

/*
 * 8 — Header su telefono (header #6550 IT / #54217 EN: stessi id, una regola vale per tutti e due).
 * L'header era sistemato a mano a colpi di margini fissi (carrello +54px, lingua -13px, logo +14px
 * dall'alto...): sotto i 415px non ci stava, il carrello andava a capo sotto la barra e la lingua
 * finiva addosso al logo. Qui si rifà la riga: menu 22% · logo 34% · icone 44%, tutto centrato in
 * verticale nei 70px della barra, icone in fila a destra con passo uguale. Tablet e desktop invariati.
 * Misurato a 360/390/414px in italiano e in inglese.
 */
@media (max-width: 767px) {
	body [data-elementor-type="header"] .elementor-element-f43b631 {
		padding: 0 !important;
	}
	body [data-elementor-type="header"] .elementor-element-f43b631 > .elementor-container {
		align-items: center !important;
		flex-wrap: nowrap !important;
		height: var(--frasette-barra);
	}
	body [data-elementor-type="header"] .elementor-element-f43b631 > .elementor-container > .elementor-column,
	body [data-elementor-type="header"] .elementor-element-f43b631 > .elementor-container > .elementor-column > .elementor-widget-wrap {
		margin: 0 !important;
		padding: 0 !important;
		align-content: center !important;
		align-items: center !important;
	}
	/* Elementor mette i margini dei widget sul contenitore interno: sono quelli fatti a mano. */
	body [data-elementor-type="header"] .elementor-element-f43b631 .elementor-widget-container {
		margin: 0 !important;
	}
	body [data-elementor-type="header"] .elementor-element-c19bef7 { width: 22% !important; }
	body [data-elementor-type="header"] .elementor-element-5f2f78d { width: 34% !important; }
	body [data-elementor-type="header"] .elementor-element-750dcd6 { width: 44% !important; }
	body [data-elementor-type="header"] .elementor-element-f2bf618,
	body [data-elementor-type="header"] .elementor-element-801593a {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}
	body [data-elementor-type="header"] .elementor-element-801593a img {
		width: 100%;
		max-width: 110px;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	/* Seconda stellina dei preferiti: già nascosta, ma la sua sezione occupava altezza. */
	body [data-elementor-type="header"] .elementor-element-9905ce8 {
		display: none !important;
	}
	body [data-elementor-type="header"] .elementor-element-59eff96,
	body [data-elementor-type="header"] .elementor-element-59eff96 > .e-con-inner {
		flex-wrap: nowrap !important;
		justify-content: flex-end !important;
		align-items: center !important;
		gap: 12px !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}
	body [data-elementor-type="header"] .elementor-element-59eff96 {
		padding-right: 14px !important;
	}
	body [data-elementor-type="header"] .elementor-element-59eff96 > .e-con-inner > .elementor-element,
	body [data-elementor-type="header"] .elementor-element-59eff96 > .elementor-element {
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 auto !important;
		align-self: center !important;
	}
	body [data-elementor-type="header"] .elementor-element-9f78936,
	body [data-elementor-type="header"] .elementor-element-1707142 {
		width: auto !important;
		min-width: max-content;
	}
	/* La scritta della lingua siede più in basso delle icone. */
	body [data-elementor-type="header"] .elementor-element-9f78936 .cpel-switcher__nav {
		top: -3px;
	}
	body [data-elementor-type="header"] .elementor-element-ecaf6a5 {
		width: 14px !important;
	}
	/* La ricerca è larga zero con l'icona in assoluto 16px più in là: finiva sul carrello. */
	body [data-elementor-type="header"] .elementor-element-cbfbc77 {
		width: 16px !important;
		height: 18px !important;
		overflow: visible !important;
	}
	body [data-elementor-type="header"] .elementor-element-cbfbc77 i.icon-search-2 {
		left: 0 !important;
		top: 0 !important;
		transform: none !important;
	}
}