/*
 * Pelle Atelier — i token di tema di SOLI Gioielli.
 *
 * Trasloco del 31 agosto 2026: questo blocco viveva dentro il CSS del modulo
 * galleria prodotti, cioe' in un componente, mentre e' la pelle del sito. Da
 * qui in avanti cambiare la grafica di Atelier vuol dire toccare questo file.
 *
 * Il selettore NON usa :where(), a differenza di com'era nel modulo. La
 * ragione e' che il CSS dei moduli viene emesso due volte - una fusa nel
 * foglio consolidato, una come <style> inline piu' in basso nella pagina - e
 * la copia inline arriva sempre dopo questo foglio, comunque lo si accodi.
 * Fra due regole di pari specificita' vince l'ultima, quindi a specificita'
 * zero la base scavalcava la pelle: con priorita' 5 e anche con priorita' 100.
 * Una specificita' vera rende la pelle indipendente dall'ordine.
 *
 * Restano fuori dal contendere, come prima: i --fm-<componente>-* scritti dai
 * controlli del Kit e dei widget (nomi diversi, non li tocchiamo) e i token
 * che il tema figlio scrive su :root, che agisce su <html> mentre questo
 * agisce su <body> - elementi diversi, non si scavalcano.
 */

/*
 * Atelier prende i colori dai globali del sito invece che da una palette sua,
 * così un negozio risulta in tinta senza configurare niente.
 * Qui si toccano solo i --fm-theme-*, che sono i ripieghi in fondo alla catena:
 * mai i --fm-<componente>-* che scrivono i controlli del Kit e dei widget,
 * altrimenti quei controlli smetterebbero di avere effetto.
 */
body.fm-theme-atelier,
.fm-wpgc-theme-atelier {
	--fm-theme-ink: var(--e-global-color-text, #3c3c3b);
	--fm-theme-muted: color-mix(in srgb, var(--e-global-color-text, #3c3c3b) 68%, #fff);
	--fm-theme-line: color-mix(in srgb, var(--e-global-color-text, #3c3c3b) 18%, transparent);
	--fm-theme-surface-soft: color-mix(in srgb, var(--e-global-color-secondary, #f6f6f6) 34%, #fff);
	--fm-theme-action: var(--e-global-color-accent, #111);
	--fm-theme-action-hover: color-mix(in srgb, var(--e-global-color-accent, #111) 84%, #000);
	--fm-theme-panel-ink: var(--e-global-color-text, #3c3c3b);
	--fm-theme-badge: var(--e-global-color-accent, #111);
	--fm-theme-badge-soft: var(--fm-theme-surface, #fff);
	--fm-theme-badge-soft-text: var(--e-global-color-text, #3c3c3b);
	--fm-theme-badge-sale: var(--e-global-color-accent, #111);
	--fm-theme-button: var(--e-global-color-accent, #111);
	--fm-theme-overlay: color-mix(in srgb, var(--e-global-color-text, #3c3c3b) 55%, transparent);
}

/*
 * Header: i widget Icona nudi (es. l'account) stanno nella stessa scatola
 * 40px dei trigger FM, così il ritmo della fila di icone è uniforme su ogni
 * breakpoint. Il padding sta sul wrapper interno perché sull'elemento
 * l'avanzate di istanza veniva azzerato da regole a valle.
 */
.elementor-location-header .elementor-widget-icon .elementor-icon-wrapper {
	padding: 8px;
}

.elementor-location-header .elementor-widget-icon .elementor-icon {
	font-size: 24px;
}

/*
 * Header su una riga sola, sempre. Il flex-wrap:nowrap impostato sulle
 * istanze dei container non emette CSS (l'ennesimo controllo che fallisce
 * in silenzio), quindi la regola vive qui. Su mobile la colonna delle icone
 * (34b75ca) si dimensiona sul contenuto e quella del logo (01fa2e1) assorbe
 * lo spazio che avanza: così la borsa non va mai a capo, a qualunque
 * larghezza. I selettori .elementor-element-* sono legati all'header
 * template 37 di Soli: se l'header si ricostruisce, vanno aggiornati.
 */
.elementor-location-header .e-con {
	flex-wrap: nowrap;
}

/*
 * Testata su telefono: logo al centro, due icone soltanto.
 *
 * L'account esce dalla fila e diventa una voce del menu: su 375 pixel ogni
 * icona toglie spazio al marchio, e chi cerca il proprio account lo cerca
 * nel menu, non fra i simboli. Restano preferiti e carrello, che sono
 * scorciatoie d'acquisto e vanno raggiunte con il pollice.
 *
 * Il logo sta davvero in mezzo solo se le due colonne laterali pesano
 * uguale: entrambe prendono la stessa frazione di spazio e il marchio si
 * centra da sé, senza numeri da correggere a ogni cambio di icone.
 */
@media (max-width: 767px) {
	.elementor-location-header .e-con {
		column-gap: 4px;
	}

	/* L'account vive nel menu, non nella testata. */
	.elementor-location-header .elementor-element-f8c1ae5 {
		display: none;
	}

	/* Colonna menu e colonna icone: stesso peso, logo in mezzo. */
	.elementor-location-header .elementor-element-82ad888,
	.elementor-location-header .elementor-element-34b75ca {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.elementor-location-header .elementor-element-34b75ca {
		justify-content: flex-end;
	}

	.elementor-location-header .elementor-element-01fa2e1 {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
	}

	/* Con una icona in meno, le due che restano possono respirare. */
	.elementor-location-header .elementor-element-6a1e094 .fm-trigger-icon,
	.elementor-location-header .elementor-element-07e3352 .fm-trigger-icon,
	.elementor-location-header .elementor-element-6a1e094 svg,
	.elementor-location-header .elementor-element-07e3352 svg {
		width: 30px;
		height: 30px;
	}
}

/*
 * Pulsante preferiti sulle schede prodotto: stessa ricetta dei pulsanti del
 * sito (variabili --fm-panel-button-* agganciate ai Colori globali dal Kit),
 * piena larghezza come "Aggiungi al carrello" e testo centrato — l'icona del
 * widget non sempre viene resa, e senza icona il testo deve stare al centro.
 */
.fm-wishlist-button-wrap { width: 100%; }
.fm-wishlist-button {
	width: 100%;
	justify-content: center;
	gap: 10px;
	background: var(--fm-panel-button-background, var(--fm-theme-button, #BA8F4F)) !important;
	color: var(--fm-panel-button-color, var(--fm-theme-button-text, #FFFFFF)) !important;
	border: 0 !important;
	min-height: var(--fm-panel-button-min-height, 46px);
	padding: var(--fm-panel-button-padding, 13px 18px);
	text-decoration: none;
}
.fm-wishlist-button:hover,
.fm-wishlist-button:focus {
	background: var(--fm-panel-button-hover-background, var(--fm-theme-button-text, #FFFFFF)) !important;
	color: var(--fm-panel-button-hover-color, var(--fm-theme-button, #BA8F4F)) !important;
}

/*
 * Blocco "presto disponibile" (lista d'attesa) sulle schede prodotto.
 *
 * Il widget arriva dal framework senza vestito: nasce per qualunque sito e
 * lascia la grafica alla pelle. Qui prende la divisa di Soli — Chillax, il
 * pulsante identico ad "Aggiungi al carrello", il campo con lo stesso raggio
 * dei selettori del configuratore — così a carrello spento la scheda non
 * sembra prestata da un altro sito.
 *
 * Campo e pulsante sulla stessa riga e della stessa altezza: sotto i 480px
 * vanno in colonna, dove un campo email stretto diventa illeggibile.
 */
body.fm-theme-atelier .fm-bis {
	font-family: 'Chillax', sans-serif;
	color: var(--fm-theme-ink, #3c3c3b);
}

body.fm-theme-atelier .fm-bis__message {
	font-size: 14px;
	line-height: 1.55;
	color: var(--fm-theme-ink, #3c3c3b);
	margin-bottom: 14px;
}

body.fm-theme-atelier .fm-bis__form { gap: 10px; }

body.fm-theme-atelier .fm-bis__email {
	flex: 1 1 220px;
	min-height: 48px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--fm-theme-ink, #3c3c3b);
	background: #fff;
	border: 1px solid var(--fm-theme-line, rgba(60, 60, 59, 0.18));
	border-radius: 8px;
}

body.fm-theme-atelier .fm-bis__email::placeholder {
	color: var(--fm-theme-muted, #7c7c7b);
	opacity: 1;
}

body.fm-theme-atelier .fm-bis__email:focus {
	outline: none;
	border-color: var(--fm-theme-button, #BA8F4F);
}

/* La ricetta dei pulsanti del sito, la stessa del preferiti qui sopra. */
body.fm-theme-atelier .fm-bis__button {
	min-height: 48px;
	padding: 13px 26px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	border: 0;
	border-radius: 0;
	background: var(--fm-panel-button-background, var(--fm-theme-button, #BA8F4F));
	color: var(--fm-panel-button-color, var(--fm-theme-button-text, #FFFFFF));
}

body.fm-theme-atelier .fm-bis__button:hover,
body.fm-theme-atelier .fm-bis__button:focus {
	background: var(--fm-panel-button-hover-background, var(--fm-theme-button-text, #FFFFFF));
	color: var(--fm-panel-button-hover-color, var(--fm-theme-button, #BA8F4F));
	box-shadow: inset 0 0 0 1px var(--fm-theme-button, #BA8F4F);
}

body.fm-theme-atelier .fm-bis__privacy {
	font-size: 12px;
	line-height: 1.5;
	color: var(--fm-theme-muted, #7c7c7b);
	margin-top: 12px;
}

body.fm-theme-atelier .fm-bis__privacy a {
	color: inherit;
	text-decoration: underline;
}

body.fm-theme-atelier .fm-bis__status { font-size: 13px; }

@media (max-width: 480px) {
	body.fm-theme-atelier .fm-bis__form { flex-direction: column; }

	/*
	 * Il flex-basis di 220px del modulo e' pensato per la riga: messo in
	 * colonna diventa un'ALTEZZA, e il campo email cresce fino a sembrare
	 * un'area di testo. In colonna si torna alla dimensione naturale.
	 */
	body.fm-theme-atelier .fm-bis__email,
	body.fm-theme-atelier .fm-bis__button {
		width: 100%;
		flex: 0 0 auto;
		height: 48px;
	}
}

/*
 * Sezione recensioni in fondo alle schede prodotto.
 *
 * Il markup lo stampa WooCommerce, che non sa niente della pelle: senza
 * queste regole la sezione esce con il carattere di sistema e le linguette
 * grigie del tema base, in fondo a una pagina che fino a un attimo prima era
 * tutta Chillax. Stessa cura del blocco lista d'attesa qui sopra.
 *
 * La barra delle linguette resta anche con una sola scheda: dice al
 * visitatore che lì sotto c'è una sezione, e serve quando le recensioni
 * arriveranno davvero.
 */
body.fm-theme-atelier .woocommerce-tabs {
	font-family: 'Chillax', sans-serif;
	color: var(--fm-theme-ink, #3c3c3b);
}

body.fm-theme-atelier .woocommerce-tabs ul.tabs {
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid var(--fm-theme-line, rgba(60, 60, 59, 0.18));
}

body.fm-theme-atelier .woocommerce-tabs ul.tabs::before,
body.fm-theme-atelier .woocommerce-tabs ul.tabs li::before,
body.fm-theme-atelier .woocommerce-tabs ul.tabs li::after {
	display: none;
}

/*
 * Il riquadro bianco con l'angolo arrotondato attorno alla linguetta e' di
 * WooCommerce, che lo disegna con un selettore piu' specifico di questo:
 * qui l'unica arma e' !important, come per il pulsante preferiti.
 */
body.fm-theme-atelier .woocommerce-tabs ul.tabs li {
	margin: 0 24px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.fm-theme-atelier .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 10px 2px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fm-theme-muted, #7c7c7b);
	border-bottom: 2px solid transparent;
}

body.fm-theme-atelier .woocommerce-tabs ul.tabs li.active a,
body.fm-theme-atelier .woocommerce-tabs ul.tabs li a:hover {
	color: var(--fm-theme-ink, #3c3c3b);
	border-bottom-color: var(--fm-theme-button, #BA8F4F);
}

body.fm-theme-atelier .woocommerce-Tabs-panel > h2 {
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 12px;
}

body.fm-theme-atelier .woocommerce-Tabs-panel p,
body.fm-theme-atelier .woocommerce-verification-required {
	font-size: 14px;
	line-height: 1.6;
	color: var(--fm-theme-muted, #7c7c7b);
}

/* Il modulo per chi ha comprato: stessi campi e stesso pulsante del sito. */
body.fm-theme-atelier #review_form input[type="text"],
body.fm-theme-atelier #review_form input[type="email"],
body.fm-theme-atelier #review_form textarea {
	font-family: 'Chillax', sans-serif;
	font-size: 14px;
	padding: 12px 16px;
	color: var(--fm-theme-ink, #3c3c3b);
	background: #fff;
	border: 1px solid var(--fm-theme-line, rgba(60, 60, 59, 0.18));
	border-radius: 8px;
}

body.fm-theme-atelier #review_form .submit {
	min-height: 48px;
	padding: 13px 26px;
	font-family: 'Chillax', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	border: 0;
	border-radius: 0;
	background: var(--fm-panel-button-background, var(--fm-theme-button, #BA8F4F));
	color: var(--fm-panel-button-color, var(--fm-theme-button-text, #FFFFFF));
	cursor: pointer;
}

body.fm-theme-atelier #review_form .submit:hover,
body.fm-theme-atelier #review_form .submit:focus {
	background: var(--fm-panel-button-hover-background, var(--fm-theme-button-text, #FFFFFF));
	color: var(--fm-panel-button-hover-color, var(--fm-theme-button, #BA8F4F));
	box-shadow: inset 0 0 0 1px var(--fm-theme-button, #BA8F4F);
}

body.fm-theme-atelier .comment-form-rating .stars a {
	color: var(--fm-theme-button, #BA8F4F);
}

/*
 * Stelle del catalogo: presenti ma discrete.
 *
 * Finché non ci sono recensioni vere restano spente e in un grigio tenue -
 * dicono "qui ci andranno le recensioni" senza gridarlo e senza fingere un
 * giudizio che nessuno ha dato. Piccole e leggere, come chiesto: su una
 * scheda di gioielleria la stella non deve competere con la fotografia.
 */
body.fm-theme-atelier .fm-wpgc-product-rating {
	line-height: 1;
	margin: 0;
}

body.fm-theme-atelier .fm-wpgc-product-rating.is-empty .star-rating {
	color: var(--fm-theme-line, rgba(60, 60, 59, 0.3));
	opacity: .85;
}

body.fm-theme-atelier .fm-wpgc-product-rating .star-rating {
	font-size: 11px;
	letter-spacing: 1px;
	height: 1.2em;
}

/*
 * Schede del catalogo: il prezzo sale sotto le stelle.
 *
 * Il blocco di testo si allargava per riempire tutta l'altezza della scheda
 * e il prezzo, ancorato in fondo, finiva a più di cento pixel dal titolo:
 * un vuoto che sembrava un errore di caricamento. Ora il testo occupa lo
 * spazio che gli serve e la scheda si chiude sotto il prezzo.
 */
body.fm-theme-atelier .fm-wpgc-product-content {
	flex: 0 0 auto;
}

/*
 * Lo spazio sotto il titolo e quello fra gli elementi della scheda arrivano
 * da due variabili che il Kit imposta a 30px: e' li' che vanno cambiate,
 * perche' le regole del modulo le leggono con una specificita' che nessun
 * !important qui riuscirebbe a superare con eleganza. Sei pixel bastano:
 * sotto il titolo ora ci sono le stelle, che fanno da respiro.
 */
body.fm-theme-atelier {
	--fm-product-title-spacing: 6px;
	--fm-product-card-gap: 10px;
}

body.fm-theme-atelier .fm-wpgc-product-footer {
	margin-top: 10px !important;
}

/*
 * L'altezza della scheda la decide il contenuto.
 *
 * Il modulo fissa un'altezza uguale per tutte, calcolata sulla più alta:
 * dopo aver compattato il testo restava un buco di oltre cento pixel sotto
 * il prezzo, perché quell'altezza era stata decisa quando il testo era più
 * lungo. Le schede si pareggiano comunque, perché la griglia le allunga
 * tutte alla riga più alta.
 */
body.fm-theme-atelier .fm-wpgc-product-card {
	height: auto !important;
}


/*
 * Il pannello dell'anello, in alto, su telefono.
 *
 * Compare al primo tocco su una pietra o su un colore, si posa all'altezza
 * del logo e li' resta per tutta la scelta: la meta' bassa dello schermo
 * rimane libera, cosi' si continua a toccare le pietre e l'anello cambia
 * all'istante. Si chiude con la X, con Esc, o da solo alla scelta della
 * taglia.
 *
 * Non e' una modale vera e non deve esserlo: niente fondo scuro, niente
 * blocco dello scorrimento. Il contenitore lascia passare i tocchi e solo il
 * pannello li riceve — se no la parte "libera" sarebbe libera per finta.
 */
.fm-atelier-finestra[hidden] {
	display: none;
}

.fm-atelier-finestra {
	position: fixed;
	top: 10px;
	left: 0;
	right: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;

	/* Tocchi che attraversano: e' questo che tiene libero il resto. */
	pointer-events: none;
}

.fm-atelier-finestra-riquadro {
	position: relative;
	pointer-events: auto;
	width: min(88vw, 340px);
	background: #FFFFFF;
	border-radius: 2px;
	padding: 14px 14px 12px;
	box-shadow: 0 18px 44px -20px rgba(60, 60, 59, .45);
}

/*
 * La comparsa: veloce e morbida.
 *
 * Sale di pochi pixel, si mette a fuoco e prende corpo. La curva e' una
 * "expo out": parte decisa e si posa piano, che e' quello che fa sembrare un
 * movimento naturale invece che meccanico. 340ms — sotto i 200 sembra uno
 * scatto, sopra i 400 si aspetta.
 *
 * `prefers-reduced-motion`: chi ha chiesto meno animazioni al telefono se le
 * vede togliere, e il pannello compare e basta.
 */
@keyframes fm-atelier-comparsa {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(.97);
		filter: blur(6px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

.fm-atelier-finestra-riquadro.sta-comparendo {
	animation: fm-atelier-comparsa 340ms cubic-bezier(.16, 1, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.fm-atelier-finestra-riquadro.sta-comparendo {
		animation: none;
	}
}

/*
 * La X, senza sfondo.
 *
 * Lo sfondo oro non veniva dal tema ma dal Kit di Elementor, che colora
 * QUALSIASI <button> con `.elementor-kit-11 button` — specificita' 0,2,1,
 * piu' alta della sola classe, per questo il mio `background: none` perdeva.
 * Si vince alzando la specificita', non con `!important`: tre classi bastano.
 *
 * Tocco da 44px perche' sia presa al primo colpo col pollice, ma il segno
 * dentro resta sottile.
 */
body.fm-theme-atelier .fm-atelier-finestra .fm-atelier-finestra-chiudi {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: #3C3C3B;
	cursor: pointer;
}

body.fm-theme-atelier .fm-atelier-finestra .fm-atelier-finestra-chiudi:hover,
body.fm-theme-atelier .fm-atelier-finestra .fm-atelier-finestra-chiudi:focus {
	background: none;
	background-color: transparent;
	color: #BA8F4F;
}

.fm-atelier-finestra-chiudi svg {
	width: 20px;
	height: 20px;
	display: block;
}

/*
 * L'anello nel pannello e' grande come quello in pagina.
 *
 * Non si copia il NUMERO ma la REGOLA: in pagina la figura e' un quadrato
 * largo quanto la colonna, con l'anello dentro senza tagli. Qui si fa lo
 * stesso sul pannello, e le due foto vengono identiche da sole su qualunque
 * telefono -- misurato a 375px: 208x300 in pagina, 209x302 nel pannello.
 * Fissare "300px" avrebbe funzionato solo su quello schermo li'.
 *
 * `max-height` e' solo una rete per i telefoni bassi: li' il quadrato cede e
 * l'anello si rimpicciolisce, invece di sfondare lo schermo.
 */
.fm-atelier-finestra-immagine {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	max-height: 52vh;
	object-fit: contain;
	margin: 0 auto;
}

/*
 * La foto che stava sotto al pannello sparisce: era la stessa identica
 * immagine due volte, una sopra l'altra.
 *
 * Si nasconde solo quella DENTRO le sezioni dei selettori, che e' il doppione
 * di cui il pannello ha preso il posto. Le altre anteprime della pagina --
 * "Il tuo Anello Essenza e' pronto", quella in fondo -- restano: non sono
 * ripetizioni, sono momenti diversi del racconto.
 */
@media (max-width: 767px) {
	body.fm-theme-atelier [id^="selettore_"] .elementor-widget-fm_wvp_variation_preview {
		display: none;
	}
}

/*
 * La tendina della pietra sparisce dalla vista su telefono, ma NON con
 * `display: none`: è il campo che porta la variante al carrello e deve
 * restare funzionante. Questa è la maniera con cui si toglie una cosa dagli
 * occhi lasciandola viva — occupa un pixel, non si vede, e i lettori di
 * schermo la trovano ancora.
 */
@media (max-width: 767px) {
	body.fm-theme-atelier .fm-atelier-tendina-nascosta {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		white-space: nowrap;
		clip-path: inset(50%);
		border: 0;
	}
}

/*
 * I riquadri dell'anello sono quadrati, ovunque.
 *
 * `contain` e non `cover`: un anello non si taglia mai per far quadrare
 * un riquadro. La foto è verticale, quindi dentro il quadrato resta aria
 * sopra e sotto — ed è voluto, è il respiro che rende la fila di riquadri
 * uguale e ordinata invece che a scalini.
 */
body.fm-theme-atelier .fm-wvp-preview-figure {
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	/*
	 * `min-height: 0` non e' pignoleria: la figura sta dentro un flex in
	 * colonna, e li' il minimo di un elemento e' l'altezza del suo contenuto.
	 * Senza questa riga la foto verticale spinge la figura fino a 444px e il
	 * quadrato non si chiude mai -- misurato, mentre `aspect-ratio` risultava
	 * regolarmente applicato. Il rapporto c'era: era il minimo a vincerlo.
	 */
	min-height: 0;
	overflow: hidden;
}

/*
 * All'immagine si danno solo i limiti, mai un'altezza piena: `height: 100%`
 * si risolve contro un'altezza che a sua volta dipende dal contenuto, e il
 * giro si chiude su se stesso. Con `auto` piu' i due massimi, la foto si
 * rimpicciolisce fin dove serve e resta intera.
 */
body.fm-theme-atelier .fm-wvp-preview-image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/*
 * Dentro gli accordion della scheda prodotto.
 *
 * I titoli del testo prodotto erano resi come titoli di pagina — 32px, la
 * stessa misura di un'intestazione di sezione — dentro un pannello che si
 * apre. Il risultato era che il titolo gridava piu' forte del contenuto che
 * introduceva. Ora hanno la misura del testo e il peso di quello in risalto:
 * si distinguono, senza pretendere il palco.
 *
 * `font-size: inherit` invece di scrivere "14px": cosi' seguono il corpo del
 * testo qualunque misura abbia, anche dove cambia fra telefono e desktop.
 * Il colore NON si tocca: resta quello dei titoli, ed e' cio' che li fa
 * ancora leggere come titoli e non come un grassetto qualsiasi.
 *
 * Il titolo dell'accordion stesso (il <summary> "Caratteristiche", 16px) non
 * viene sfiorato: la regola vive dentro i widget di testo, lui e' fuori.
 */
body.fm-theme-atelier .e-n-accordion .elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6) {
	font-size: inherit;
	font-weight: 700;
	line-height: 1.5;
	margin: 20px 0 6px;
}

body.fm-theme-atelier .e-n-accordion .elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/*
 * Via lo sfondo dietro all'accordion.
 *
 * L'accordion e' trasparente: il beige veniva dalla colonna che lo contiene,
 * con un gradiente dal bianco a #F2EFE6 — e siccome l'accordion sta in fondo
 * alla colonna, si trovava proprio nel punto piu' carico.
 *
 * Il contenitore si prende con `:has()` e per DISCENDENZA DIRETTA, non
 * semplicemente "un contenitore che contiene un accordion": quest'ultimo ne
 * pescherebbe due, perche' anche la sezione che avvolge tutto lo contiene.
 * Verificato in pagina prima di scriverlo: il selettore diretto ne trova uno
 * solo, ed e' quello che dipinge.
 */
body.fm-theme-atelier .e-con:has(> .elementor-widget > .e-n-accordion) {
	background-image: none;
}