/*
 * Fogli di stile specifici del sito Pasticceria Molè.
 * Sta qui e non in style.css perché style.css è la base condivisa del child
 * theme: va lasciata pulita per non intaccare gli altri siti che la usano.
 */

/*
 * Hello Elementor mette un margine sotto a ogni <p>. Sull'ultimo paragrafo di
 * un blocco di testo diventa spazio fantasma che sballa le altezze: qui i
 * distacchi li decidono i contenitori, uno per uno, come sull'originale.
 * Lo spazio TRA paragrafi dello stesso blocco resta.
 */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/*
 * Sull'originale le voci del sottomenu sono centrate. Il widget Nav Menu di
 * Elementor centra solo il menu a tendina mobile (controllo "text_align"),
 * non i sottomenu desktop: da qui questa regola.
 */
.elementor-nav-menu--main .sub-menu a.elementor-sub-item {
	justify-content: center;
	text-align: center;
}

/*
 * ---------------------------------------------------------------------------
 * SCALA DEL MOBILE
 * ---------------------------------------------------------------------------
 * Il mobile dell'originale e' un progetto rigido di 320px: Wix dichiara
 * <meta viewport content="width=320"> e lascia che sia il browser a ingrandire
 * tutto fino alla larghezza dello schermo (su un telefono da 407px, x1.27).
 *
 * Qui otteniamo lo stesso risultato visivo senza il viewport a larghezza
 * fissa: la radice tipografica segue la larghezza dello schermo, e tutte le
 * misure del mobile sono espresse in rem. 5vw = 16px esatti a 320px, quindi
 * 1rem equivale sempre a 1px del progetto originale.
 *
 * Vantaggio sul metodo di Wix: il testo resta di dimensione reale adeguata
 * (14px su un telefono da 407, non 11px ingranditi), il sito e' fluido su
 * qualunque larghezza e non incappa nei rilievi di leggibilita' di Google.
 *
 * Il limite superiore di 26px (cioe' 520px di schermo) e' una deviazione
 * voluta: sopra quella larghezza non ci sono telefoni, e senza limite una
 * finestra desktop stretta mostrerebbe il progetto mobile ingigantito.
 * L'originale li' servirebbe comunque il desktop, perche' sceglie in base allo
 * user agent e non alla larghezza.
 */
@media (max-width: 767px) {
	html {
		font-size: clamp(16px, 5vw, 26px);
	}
}

/*
 * ---------------------------------------------------------------------------
 * HEADER SOPRA AL CONTENUTO
 * ---------------------------------------------------------------------------
 * Su /catering la fotografia dell'hero comincia 124px sopra la fine
 * dell'header e gli passa dietro. La si ottiene con un margine superiore
 * negativo sulla prima fascia: perche' l'header resti visibile deve stare piu'
 * in alto nell'impilamento, altrimenti la fascia (che viene dopo nel DOM) gli
 * si dipinge sopra.
 */
.elementor-location-header {
	position: relative;
	z-index: 10;
}

/*
 * ---------------------------------------------------------------------------
 * CAROSELLI CHE REPLICANO LE GALLERIE WIX
 * ---------------------------------------------------------------------------
 * L'altezza delle gallerie dell'originale e' fissata dal progetto, non dalle
 * proporzioni delle fotografie. Il carosello di Elementor invece si adatta
 * all'immagine: qui gli imponiamo l'altezza voluta e lasciamo che sia
 * l'immagine a essere ritagliata a copertura.
 */
/*
 * L'`overflow: hidden` va ridichiarato: senza, le diapositive che Swiper
 * tiene di lato restano nel flusso e allargano la pagina. Sul desktop non si
 * nota, sul telefono la pagina diventa larga il doppio.
 */
.df-car .swiper,
.df-car .elementor-main-swiper {
	height: var(--df-car-h);
	overflow: hidden;
}

.df-car .swiper-slide {
	height: var(--df-car-h);
}

.df-car .swiper-slide-inner,
.df-car .swiper-slide-bg,
.df-car .swiper-slide-image,
.df-car .elementor-carousel-image {
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.df-car .swiper-slide img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Il carosello a tutta larghezza degli interni, su /il-locale. */
.df-car-locale { --df-car-h: 756px; }

/* Le due gallerie della composizione di /catering. */
.df-car-cat { --df-car-h: 226px; }

/* La fascia fotografica larga di /pasticceria-intro. */
.df-car-pastintro { --df-car-h: 863px; }

/* La fascia fotografica larga di /pralineria. */
.df-car-pral { --df-car-h: 827px; }

/* La fascia fotografica larga di /torte. */
.df-car-torte { --df-car-h: 827px; }

/* La fascia fotografica a scorrimento automatico di /dolci-dedicati (Natale). */
.df-car-natale { --df-car-h: 799px; }

@media (max-width: 767px) {
	.df-car-locale    { --df-car-h: 9.4375rem; }   /* 151px del progetto a 320 */
	.df-car-cat       { --df-car-h: 4.3125rem; }   /*  69px */
	.df-car-pastintro { --df-car-h: 8.75rem; }     /* 140px */
	.df-car-pral      { --df-car-h: 9.4375rem; }   /* 151px */
	.df-car-torte     { --df-car-h: 7.1875rem; }   /* 115px */
	.df-car-natale    { --df-car-h: 10.75rem; }    /* 172px */
}

/*
 * Il contatore "n/12" delle gallerie slideshow di Wix sta in alto a destra
 * dentro all'immagine, in Arial 12 sul grigio scuro del testo. Elementor
 * mette la sua paginazione "frazione" centrata in basso: la riportiamo dove
 * sta sull'originale.
 */
.df-car-cat .swiper-pagination-fraction {
	position: absolute;
	top: 6px;
	right: 8px;
	bottom: auto;
	left: auto;
	width: auto;
	font: 12px/1.2 Arial, Helvetica, sans-serif;
	color: #272521;
	text-align: right;
}

/*
 * ---------------------------------------------------------------------------
 * ALTEZZE IMPOSTE ALLE IMMAGINI SUL TELEFONO
 * ---------------------------------------------------------------------------
 * Wix ritaglia molte fotografie in modo DIVERSO fra desktop e telefono: non
 * le rimpicciolisce, cambia proprio le proporzioni del riquadro. Il widget
 * immagine di Elementor non ha un controllo di altezza, quindi l'altezza del
 * mobile gliela impone il CSS, sulla classe che il costruttore assegna.
 *
 * I valori sono in rem perche' sotto i 767px 1rem = 1px del progetto a 320.
 */
@media (max-width: 767px) {
	.df-alt img {
		width: 100%;
		object-fit: cover;
	}
	.df-alt-76 img  { height: 4.75rem; }
	.df-alt-80 img  { height: 5rem; }
	.df-alt-101 img { height: 6.3125rem; }
	.df-alt-104 img { height: 6.5rem; }
	.df-alt-110 img { height: 6.875rem; }
	.df-alt-123 img { height: 7.6875rem; }
	.df-alt-127 img { height: 7.9375rem; }
	.df-alt-133 img { height: 8.3125rem; }
	.df-alt-141 img { height: 8.8125rem; }
	.df-alt-154 img { height: 9.625rem; }
	.df-alt-190 img { height: 11.875rem; }
	.df-alt-201 img { height: 12.5625rem; }
	.df-alt-219 img { height: 13.6875rem; }
	.df-alt-255 img { height: 15.9375rem; }
	.df-alt-334 img { height: 20.875rem; }
}

/*
 * Ritaglio desktop di un'immagine RIUSATA da un'altra pagina, quando il suo
 * aspect ratio nativo non coincide col taglio richiesto qui. Sul mobile ci
 * pensa gia' .df-alt-NNN; sul desktop l'immagine di Elementor non ha altro
 * controllo di altezza.
 */
@media (min-width: 768px) {
	.df-car-focaccia img { object-fit: cover; height: 213px; }
}

/* Le due gallerie di /bar-caffetteria. */
.df-car-bar-a { --df-car-h: 233px; }
.df-car-bar-b { --df-car-h: 294px; }

@media (max-width: 767px) {
	.df-car-bar-a { --df-car-h: 3.25rem; }   /*  52px */
	.df-car-bar-b { --df-car-h: 4.75rem; }   /*  76px */
}

/*
 * ---------------------------------------------------------------------------
 * GALLERIA A MINIATURE DI /pasticceria
 * ---------------------------------------------------------------------------
 * L'originale mette l'immagine grande a sinistra e una colonna di miniature
 * scorrevole a destra. La skin "slideshow" di Elementor le mette invece sotto,
 * in orizzontale: qui la colonna viene rimessa di lato.
 *
 * Le miniature perdono lo scorrimento di Swiper (transform azzerato) e
 * diventano una lista che scorre da sola con overflow: e' la stessa cosa che
 * fa l'originale, e non dipende da come Swiper e' stato inizializzato.
 */
.df-gal-past { --df-gal-h: 500px; }

/*
 * Il widget non ha un `.elementor-widget-container`: i due swiper sono figli
 * diretti. E il secondo porta ANCHE la classe `elementor-main-swiper`, quindi
 * la regola dello swiper grande va esclusa esplicitamente sulle miniature.
 */
.df-gal-past {
	display: flex;
	align-items: stretch;
}

.df-gal-past .elementor-main-swiper:not(.elementor-thumbnails-swiper) {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--df-gal-h);
	overflow: hidden;
}

.df-gal-past .elementor-main-swiper:not(.elementor-thumbnails-swiper) .swiper-slide,
.df-gal-past .elementor-main-swiper:not(.elementor-thumbnails-swiper) .elementor-carousel-image {
	height: var(--df-gal-h);
	background-size: cover;
	background-position: center center;
}

.df-gal-past .elementor-thumbnails-swiper {
	flex: 0 0 87px;
	height: var(--df-gal-h);
	overflow-y: auto;
	overflow-x: hidden;
}

.df-gal-past .elementor-thumbnails-swiper .swiper-wrapper {
	flex-direction: column;
	height: auto;
	transform: none !important;
}

.df-gal-past .elementor-thumbnails-swiper .swiper-slide {
	width: 87px !important;
	height: 83px;
	margin: 0 !important;
}

.df-gal-past .elementor-thumbnails-swiper .elementor-carousel-image {
	height: 100%;
	background-size: cover;
	background-position: center center;
}

/* Stessa galleria a miniature, su /pralineria: solo l'altezza cambia. */
.df-gal-pral { --df-gal-h: 827px; }

.df-gal-pral {
	display: flex;
	align-items: stretch;
}

.df-gal-pral .elementor-main-swiper:not(.elementor-thumbnails-swiper) {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--df-gal-h);
	overflow: hidden;
}

.df-gal-pral .elementor-main-swiper:not(.elementor-thumbnails-swiper) .swiper-slide,
.df-gal-pral .elementor-main-swiper:not(.elementor-thumbnails-swiper) .elementor-carousel-image {
	height: var(--df-gal-h);
	background-size: cover;
	background-position: center center;
}

.df-gal-pral .elementor-thumbnails-swiper {
	flex: 0 0 87px;
	height: var(--df-gal-h);
	overflow-y: auto;
	overflow-x: hidden;
}

.df-gal-pral .elementor-thumbnails-swiper .swiper-wrapper {
	flex-direction: column;
	height: auto;
	transform: none !important;
}

.df-gal-pral .elementor-thumbnails-swiper .swiper-slide {
	width: 87px !important;
	height: 83px;
	margin: 0 !important;
}

.df-gal-pral .elementor-thumbnails-swiper .elementor-carousel-image {
	height: 100%;
	background-size: cover;
	background-position: center center;
}

@media (max-width: 767px) {
	.df-gal-pral { --df-gal-h: 9.4375rem; }   /* 151px del progetto a 320 */
	.df-gal-pral .elementor-thumbnails-swiper { flex-basis: 3.75rem; }
	.df-gal-pral .elementor-thumbnails-swiper .swiper-slide { width: 3.75rem !important; height: 3.5625rem; }
}

/*
 * Citazione dell'hero di /pralineria: l'_element_custom_width dei container
 * (quello che regge tutte le pezzo() di _comune.php) qui viene ignorato da
 * un'altra regola con lo stesso peso ma caricata dopo (base-desktop.css) —
 * senza questa l'a-capo esplicito nel testo va comunque a capo una terza
 * volta, sballando tutta l'altezza della pagina sotto la citazione.
 */
@media (min-width: 768px) {
	.df-w-pral-quote.elementor-widget-heading { width: 1150px !important; max-width: 1150px !important; }
}

/*
 * L'elenco puntato di /pasticceria: l'originale distanzia le voci di 20px sul
 * desktop e di 10 sul telefono, e rientra il testo di 27 (14 sul telefono).
 */
.df-elenco ul {
	margin: 0;
	padding-left: 27px;
	list-style: disc;
}

.df-elenco li + li {
	margin-top: 20px;
}

@media (max-width: 767px) {
	.df-elenco ul       { padding-left: 0.875rem; }
	.df-elenco li + li  { margin-top: 0.625rem; }
}

/*
 * ---------------------------------------------------------------------------
 * NIENTE SCORRIMENTO ORIZZONTALE SUL TELEFONO
 * ---------------------------------------------------------------------------
 * Su /pasticceria la pila di dolci sporge di 10px oltre i 320 del progetto:
 * sporge anche sull'originale, dove pero' il contenitore di Wix la taglia.
 * `clip` fa lo stesso senza creare un contenitore di scorrimento (a differenza
 * di `hidden`, che romperebbe eventuali elementi appiccicati).
 */
@media (max-width: 767px) {
	[data-elementor-type="wp-page"] {
		overflow-x: clip;
	}
}

/*
 * Le foto a piena larghezza delle pagine-indice (dolci-dedicati-1,
 * copia-di-dolci-dedicati): stesso schema di scheda ripetuto, il widget
 * immagine di Elementor non ha un controllo di altezza nativo.
 */
.df-hub-photo img { width: 100%; object-fit: cover; height: 600px; }
@media (max-width: 767px) {
	.df-hub-photo img { height: 9.5rem; } /* 152px del progetto a 320 */
}

/* Le miniature riempiono la loro cella: senza, restano fasce grigie fra una
   e l'altra. */
.df-gal-past .elementor-thumbnails-swiper .swiper-slide > *,
.df-gal-past .elementor-thumbnails-swiper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * ---------------------------------------------------------------------------
 * GALLERIA A MINIATURE — versione generica (sesto gruppo)
 * ---------------------------------------------------------------------------
 * Stessa tecnica gia' collaudata su /pasticceria e /pralineria, ma con le
 * misure in variabili: le classi di pagina impostano solo i numeri, invece di
 * ripetere venti righe di regole a ogni galleria nuova.
 *
 * Classe distinta da .df-gal apposta: quella la portano anche le due gallerie
 * vecchie, che hanno gia' le loro regole piu' avanti nel file.
 *
 *   --df-gal-h    altezza della galleria
 *   --df-gal-cw   larghezza della colonna delle miniature
 *   --df-gal-ts   lato della miniatura (sono quadrate sull'originale)
 *   --df-gal-gap  spazio verticale fra due miniature
 *   --df-gal-pad  spazio fra la foto grande e la colonna
 */
.df-galg {
	display: flex;
	align-items: stretch;
	--df-gal-cw: 87px;
	--df-gal-ts: 80px;
	--df-gal-gap: 5px;
	--df-gal-pad: 5px;
}

/* Il secondo swiper porta ANCHE la classe elementor-main-swiper: va escluso. */
.df-galg .elementor-main-swiper:not(.elementor-thumbnails-swiper) {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--df-gal-h);
	overflow: hidden;
}

.df-galg .elementor-main-swiper:not(.elementor-thumbnails-swiper) .swiper-slide,
.df-galg .elementor-main-swiper:not(.elementor-thumbnails-swiper) .elementor-carousel-image {
	height: var(--df-gal-h);
	background-size: cover;
	background-position: center center;
}

.df-galg .elementor-thumbnails-swiper {
	flex: 0 0 var(--df-gal-cw);
	height: var(--df-gal-h);
	overflow-y: auto;
	overflow-x: hidden;
	padding-left: var(--df-gal-pad);
}

.df-galg .elementor-thumbnails-swiper .swiper-wrapper {
	flex-direction: column;
	height: auto;
	transform: none !important;
}

.df-galg .elementor-thumbnails-swiper .swiper-slide {
	width: var(--df-gal-ts) !important;
	height: var(--df-gal-ts);
	margin: 0 0 var(--df-gal-gap) !important;
}

.df-galg .elementor-thumbnails-swiper .elementor-carousel-image {
	height: 100%;
	background-size: cover;
	background-position: center center;
}

.df-galg .elementor-thumbnails-swiper .swiper-slide > *,
.df-galg .elementor-thumbnails-swiper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le sei gallerie del sesto gruppo. Misurate sull'originale una per una. */
.df-gal-ricor { --df-gal-h: 827px; }
.df-gal-pas-a { --df-gal-h: 1064px; }
.df-gal-pas-b { --df-gal-h: 1064px; }
.df-gal-sva   { --df-gal-h: 870px; --df-gal-cw: 135px; --df-gal-ts: 120px; --df-gal-gap: 10px; --df-gal-pad: 10px; }
.df-gal-car-a { --df-gal-h: 808px; --df-gal-cw: 135px; --df-gal-ts: 120px; --df-gal-gap: 10px; --df-gal-pad: 10px; }
.df-gal-car-b { --df-gal-h: 808px; --df-gal-cw: 135px; --df-gal-ts: 120px; --df-gal-gap: 10px; --df-gal-pad: 10px; }

@media (max-width: 767px) {
	/* Sul telefono le miniature sono 90x90 su tutte e sei, cambia la colonna. */
	.df-galg { --df-gal-cw: 6.0625rem; --df-gal-ts: 5.625rem; --df-gal-gap: 0.3125rem; --df-gal-pad: 0.3125rem; }
	.df-gal-ricor { --df-gal-h: 10.75rem; }   /* 172px */
	.df-gal-pas-a { --df-gal-h: 6.4375rem; }  /* 103px */
	.df-gal-pas-b { --df-gal-h: 6.4375rem; }
	.df-gal-sva   { --df-gal-h: 9.5rem;  --df-gal-cw: 9.0625rem; --df-gal-ts: 5.625rem; --df-gal-gap: 0.3125rem; --df-gal-pad: 0.625rem; }  /* 152 / 145 / 90 */
	.df-gal-car-a { --df-gal-h: 9.4375rem; --df-gal-cw: 6.5625rem; --df-gal-ts: 5.625rem; --df-gal-gap: 0.625rem; --df-gal-pad: 0.625rem; } /* 151 / 105 / 90 */
	.df-gal-car-b { --df-gal-h: 9.4375rem; --df-gal-cw: 6.5625rem; --df-gal-ts: 5.625rem; --df-gal-gap: 0.625rem; --df-gal-pad: 0.625rem; }

	/* Ritagli mobile del sesto gruppo. */
	.df-alt-59 img  { height: 3.6875rem; }
	.df-alt-92 img  { height: 5.75rem; }
	.df-alt-99 img  { height: 6.1875rem; }
	.df-alt-147 img { height: 9.1875rem; }
}

/*
 * Titolo dell'hero a due corpi (/pasqua, /festa-del-papa): l'originale mette
 * il secondo pezzo della riga a 60px sul desktop e 20px sul telefono, dentro
 * lo stesso H1. Un `style` in linea non saprebbe cambiare al breakpoint.
 */
.df-tit-min { font-size: 60px; }

@media (max-width: 767px) {
	.df-tit-min { font-size: 1.25rem; }   /* 20px del progetto a 320 */
}

/*
 * Link alle informative iubenda nel footer. Sull'originale sono una striscia
 * da 22px in cima alla pagina; qui stanno in fondo, per non spostare in basso
 * le 21 pagine gia' misurate. Sul fondo marrone vanno bianchi.
 */
.df-ftr-policy a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.df-ftr-policy a:hover,
.df-ftr-policy a:focus {
	color: #D9CEB4;
}

/*
 * Landing /pranzo — segnaposto del modulo di iscrizione.
 * Sparisce quando il widget HTML viene sostituito col codice Plateform.
 */
.df-form-segnaposto {
	max-width: 620px;
	margin: 0 auto;
	padding: 34px 24px;
	border: 2px dashed #756F63;
	background: rgba(255, 255, 255, 0.6);
	text-align: center;
	color: #4E4A42;
	font-family: "Nunito Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

.df-form-segnaposto p { margin: 0; }

.df-form-segnaposto__t {
	font-weight: 700;
	font-size: 17px;
	color: #402B1B;
	margin-bottom: 6px !important;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.df-form-segnaposto {
		max-width: 17.5rem;
		padding: 1.25rem 0.75rem;
		font-size: 0.6875rem;
	}
	.df-form-segnaposto__t { font-size: 0.8125rem; }
}

/* ==========================================================================
 * Landing /pranzo — modulo di iscrizione (Plateform / wcon.io)
 *
 * Il markup arriva da build/config/stile-form-pranzo.php, senza `style` in
 * linea: tutto lo stile sta qui. Palette del sito: marrone #402B1B, beige
 * #D9CEB4, grigio bruno #4E4A42, carattere Nunito Sans come il resto del
 * corpo. Angoli vivi, come ogni altro elemento del sito.
 *
 * Qui le misure NON seguono la scala fluida in rem del telefono (§7.16):
 * quella serve a replicare il progetto rigido del Wix, e un modulo da
 * compilare ha bisogno di controlli leggibili e di un testo da almeno 16px,
 * altrimenti iOS ingrandisce la pagina al primo tocco su un campo.
 * ========================================================================== */

.df-form {
	max-width: 460px;
	margin: 0 auto;
	text-align: left;
	font-family: "Nunito Sans", sans-serif;
}

.df-form__riga { margin: 0 0 16px; }

.df-form label {
	display: block;
	margin-bottom: 6px;
	color: #402B1B;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4px;
}

.df-form input[type="text"],
.df-form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font: 400 16px/1.3 "Nunito Sans", sans-serif;
	color: #402B1B;
	background: #FFFFFF;
	border: 1px solid rgba(64, 43, 27, 0.28);
	border-radius: 0;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.df-form input[type="text"]:focus,
.df-form input[type="email"]:focus {
	border-color: #402B1B;
	box-shadow: 0 0 0 2px rgba(64, 43, 27, 0.12);
}

/* Segnala il campo sbagliato solo DOPO che l'utente ci ha provato, non
   mentre sta ancora scrivendo. */
.df-form input:user-invalid { border-color: #B4453C; }

/* Le due spunte. Selettore piu' forte di `.df-form label`, che le
   trasformerebbe in blocchi. */
.df-form label.df-form__spunta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	color: #4E4A42;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.45;
	cursor: pointer;
}

.df-form__spunta input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: #402B1B;
	cursor: pointer;
}

.df-form__spunta a {
	color: #402B1B;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.df-form__obb { color: #8A6A4F; }

.df-form__invio {
	display: block;
	width: 100%;
	margin-top: 22px;
	padding: 16px 20px;
	font: 700 15px/1 "Nunito Sans", sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #F7F2E7;
	background: #402B1B;
	border: 1px solid #402B1B;
	border-radius: 0;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.df-form__invio:hover,
.df-form__invio:focus {
	background: #D9CEB4;
	color: #402B1B;
}

@media (max-width: 767px) {
	/* La fascia che lo ospita non ha margini laterali: senza questo padding
	   i campi arrivano a filo dello schermo. */
	.df-form { max-width: 100%; padding: 0 12px; box-sizing: border-box; }
	.df-form label { font-size: 13px; }
	.df-form label.df-form__spunta { font-size: 12px; }
	.df-form input[type="text"],
	.df-form input[type="email"] { padding: 11px 12px; }
	.df-form__invio { padding: 14px 16px; font-size: 13px; }
}

/* Occhiello sopra il titolo delle pagine di esito (/grazie-nuovo, /errore-nuovo). */
.df-occhiello {
	text-transform: uppercase;
	letter-spacing: 2.2px;
	opacity: .75;
}

/* Link di ritorno alla landing. */
.df-torna {
	color: #402B1B;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.df-torna:hover { color: #756F63; }

/* Il telefono nei testi: si deve capire che si tocca. */
.elementor-widget-text-editor a[href^="tel:"] {
	color: #402B1B;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}