/* =============================================================================
   contatti.css — contatti, form Gravity Forms, mappa
   Proprietario: agente A8 (round 2). Nessun altro agente scrive in questo file.
   Dipende da main.css (design system): usa i token, non ridefinirli.

   Le variabili di spaziatura (--fg-s1..--fg-s8, scala 8px) sono di main.css:
   qui sono sempre usate con valore di ripiego, così il foglio regge anche se
   viene caricato prima che A1 le pubblichi.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Impianto della pagina
   -------------------------------------------------------------------------- */

.fg-contatti__intro {
	max-width: 62ch;
	margin-bottom: var(--fg-s5, 3rem);
}

.fg-contatti__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fg-s4, 2rem);
	align-items: start;
}

@media (min-width: 900px) {
	.fg-contatti__layout {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--fg-s5, 3rem);
	}
}

/* -----------------------------------------------------------------------------
   2. Riquadro del modulo
   -------------------------------------------------------------------------- */

.fg-contatti__form-card {
	position: relative;
	background: var(--fg-white, #fff);
	border: 1px solid var(--fg-grey-200, #e4e4e4);
	border-radius: var(--fg-radius, 4px);
	padding: clamp(1.5rem, 4vw, 3rem);
	box-shadow: var(--fg-shadow, 0 2px 12px rgba(0, 0, 0, .08));
	overflow: hidden;
}

.fg-contatti__form-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--fg-orange, #ef731d) 0 60%, var(--fg-green, #45ad30) 60% 100%);
}

.fg-contatti__form-titolo {
	margin: var(--fg-s1, .5rem) 0 var(--fg-s2, 1rem);
}

.fg-contatti__nota {
	max-width: 58ch;
	margin: 0 0 var(--fg-s4, 2rem);
	color: var(--fg-grey-600, #6b6b6b);
	line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   3. Colonna laterale — schede informative
   -------------------------------------------------------------------------- */

.fg-contatti__aside {
	display: flex;
	flex-direction: column;
	gap: var(--fg-s3, 1.5rem);
	min-width: 0;
}

.fg-info-card {
	background: var(--fg-white, #fff);
	border: 1px solid var(--fg-grey-200, #e4e4e4);
	border-radius: var(--fg-radius, 4px);
	padding: var(--fg-s3, 1.5rem);
}

.fg-info-card__titolo {
	margin: 0 0 var(--fg-s2, 1rem);
	font-family: var(--fg-font-display, sans-serif);
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--fg-black, #111);
}

.fg-info-card__label {
	margin: 0 0 var(--fg-s1, .5rem);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg-orange, #ef731d);
}

.fg-info-card__valore {
	margin: 0;
	font-family: var(--fg-font-display, sans-serif);
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--fg-black, #111);
}

.fg-info-card__testo {
	margin: var(--fg-s2, 1rem) 0 0;
	color: var(--fg-grey-600, #6b6b6b);
	font-size: .9375rem;
	line-height: 1.6;
}

.fg-info-card__testo--piccolo {
	font-size: .875rem;
}

.fg-info-card__azioni {
	margin: var(--fg-s2, 1rem) 0 0;
}

.fg-info-card__orari {
	margin: 0;
	line-height: 1.7;
}

/* Tabelle di dati (orari, riferimenti del punto vendita).
   Due colonne: intestazione di riga a sinistra, valore a destra. Su schermi
   stretti la tabella può eccedere: si lascia scorrere il solo contenitore,
   mai la pagina. */
.fg-dati-tabella {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
	line-height: 1.5;
	text-align: left;
}

.fg-dati-tabella th,
.fg-dati-tabella td {
	padding: var(--fg-s1, .5rem) 0;
	border-top: 1px solid var(--fg-grey-200, #e4e4e4);
	vertical-align: top;
}

.fg-dati-tabella tr:first-child th,
.fg-dati-tabella tr:first-child td {
	border-top: 0;
	padding-top: 0;
}

.fg-dati-tabella th {
	padding-right: var(--fg-s2, 1rem);
	width: 42%;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-grey-600, #6b6b6b);
	white-space: nowrap;
}

.fg-dati-tabella td {
	color: var(--fg-black, #111);
	font-weight: 600;
}

.fg-dati-tabella a {
	color: var(--fg-orange-text, #b35310);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Giorno di chiusura: deve saltare all'occhio senza affidarsi al solo colore,
   quindi resta anche il testo "chiuso" nella cella. */
.fg-orari-tabella .is-chiuso th,
.fg-orari-tabella .is-chiuso td {
	color: var(--fg-grey-600, #6b6b6b);
}

.fg-orari-tabella .is-chiuso td {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}


.fg-info-card__avviso {
	margin: var(--fg-s2, 1rem) 0 0;
	padding: var(--fg-s2, 1rem);
	background: var(--fg-grey-100, #f4f4f4);
	border-left: 3px solid var(--fg-orange, #ef731d);
	border-radius: 0 var(--fg-radius, 4px) var(--fg-radius, 4px) 0;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--fg-grey-900, #2a2a2a);
}

/* Scheda punto vendita: unica scura, fa da àncora visiva in cima alla colonna. */
.fg-info-card--negozio {
	background: var(--fg-black, #111);
	border-color: var(--fg-black, #111);
	color: var(--fg-white, #fff);
}

.fg-info-card--negozio .fg-info-card__valore {
	color: var(--fg-white, #fff);
}

.fg-info-card--negozio .fg-info-card__testo {
	color: rgba(255, 255, 255, .78);
}

.fg-info-card--negozio .fg-btn--ghost {
	color: var(--fg-orange, #ef731d);
}

/* Elenco recapiti */
.fg-recapiti {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fg-recapiti__voce {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--fg-s2, 1rem) 0;
	border-top: 1px solid var(--fg-grey-200, #e4e4e4);
}

.fg-recapiti__voce:first-child {
	border-top: 0;
	padding-top: 0;
}

.fg-recapiti__voce:last-child {
	padding-bottom: 0;
}

.fg-recapiti__label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-grey-600, #6b6b6b);
}

.fg-recapiti__valore {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--fg-black, #111);
	word-break: break-word;
}

/* --fg-orange-dark come testo si ferma a 4.17:1 su bianco, sotto la soglia AA
   di 4.5:1. --fg-orange-text è la stessa tinta a 5.05:1 su bianco. */
/* Telefono, email e PEC sono i bersagli più importanti della pagina: chi apre i
   contatti da telefono tocca quelli. A 360px l'area era alta ~24px, al limite di
   WCAG 2.5.8. Il padding verticale è compensato da un margine negativo, così
   l'area cresce senza spostare di un pixel il layout. */
a.fg-recapiti__valore {
	display: inline-block;
	padding-block: var(--fg-tap-pad, 0);
	margin-block: calc(var(--fg-tap-pad, 0rem) * -1);
	color: var(--fg-orange-text, #b35310);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--fg-transition, .2s ease);
}

a.fg-recapiti__valore:hover,
a.fg-recapiti__valore:focus-visible {
	color: var(--fg-black, #111);
}

.fg-recapiti__nota {
	display: block;
	margin-top: 2px;
	font-size: .8125rem;
	color: var(--fg-grey-600, #6b6b6b);
}

/* Cosa succede dopo l'invio */
.fg-iter {
	list-style: none;
	counter-reset: fg-iter;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fg-s2, 1rem);
}

.fg-iter__passo {
	counter-increment: fg-iter;
	position: relative;
	padding-left: calc(var(--fg-s4, 2rem) + var(--fg-s1, .5rem));
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--fg-grey-900, #2a2a2a);
}

.fg-iter__passo::before {
	content: counter(fg-iter);
	position: absolute;
	left: 0;
	top: 0;
	width: var(--fg-s4, 2rem);
	height: var(--fg-s4, 2rem);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--fg-green, #45ad30);
	color: var(--fg-white, #fff);
	font-family: var(--fg-font-display, sans-serif);
	font-size: .9375rem;
	line-height: 1;
}

/* Social */
.fg-social-lista {
	list-style: none;
	margin: var(--fg-s2, 1rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s1, .5rem);
}

.fg-social-lista .fg-btn {
	width: 100%;
	justify-content: center;
}

@media (min-width: 480px) {
	.fg-social-lista .fg-btn {
		width: auto;
	}
}

/* -----------------------------------------------------------------------------
   4. Gravity Forms — tema Orbital
   I colori e le misure dei controlli arrivano dall'API "form styles"
   (inc/gravityforms.php): qui si sistemano ritmo, riquadri e stati.
   -------------------------------------------------------------------------- */

.fg-form {
	margin-top: var(--fg-s3, 1.5rem);
}

.fg-form .gform_wrapper.gform-theme {
	--gf-form-gap-y: var(--fg-s3, 1.5rem);
	--gf-form-gap-x: var(--fg-s2, 1rem);
	--gf-field-gap-y: var(--fg-s1, .5rem);

	/* Controlli più alti e pulsante più importante: si passa dalle variabili di
	   misura del tema Orbital, che il CSS del plugin usa ovunque. */
	--gf-ctrl-size-lg: 3.25rem;
	--gf-ctrl-btn-padding-x-lg: var(--fg-s4, 2rem);
	--gf-ctrl-btn-font-size-lg: 1.0625rem;
}

/* Etichette dei campi a mezza larghezza: due righe di spazio riservate, così
   i controlli della stessa riga restano allineati anche quando una etichetta va a capo. */
@media (min-width: 641px) {
	.fg-form .gform_wrapper .gfield--width-half > .gform-field-label {
		display: block;
		min-height: 2.8em;
	}
}

.fg-form .gform_wrapper .gform-field-label,
.fg-form .gform_wrapper .gfield_label {
	font-family: var(--fg-font-body, system-ui, sans-serif);
	font-weight: 700;
	letter-spacing: .01em;
}

/* "(Obbligatorio)" è testo di servizio del modulo, deve rispettare AA:
   --fg-orange-dark valeva 4.17:1 su bianco e 3.80:1 su --fg-grey-100.
   --fg-orange-text vale 5.05:1 e 4.59:1. */
.fg-form .gform_wrapper .gfield_required {
	color: var(--fg-orange-text, #b35310);
	font-weight: 600;
}

.fg-form .gform_wrapper .gfield_description,
.fg-form .gform_wrapper .gform-field-label--type-sub {
	line-height: 1.5;
}

.fg-form .gform_wrapper input[type="text"],
.fg-form .gform_wrapper input[type="email"],
.fg-form .gform_wrapper input[type="tel"],
.fg-form .gform_wrapper select,
.fg-form .gform_wrapper textarea {
	max-width: 100%;
	font-family: var(--fg-font-body, system-ui, sans-serif);
	font-size: 1rem;
}

.fg-form .gform_wrapper textarea {
	min-height: 11rem;
	line-height: 1.6;
}

/* Focus visibile sui controlli.
   Il CSS di Gravity Forms viene accodato DOPO i fogli del tema e ridefinisce
   bordo e outline dei campi attraverso le proprie custom property: senza questi
   selettori (più specifici del suo, quindi senza bisogno di !important) il campo
   con il focus resta identico a uno a riposo e la navigazione da tastiera si
   perde per strada. */
.fg-form .gform_wrapper.gform-theme .gfield input:focus,
.fg-form .gform_wrapper.gform-theme .gfield select:focus,
.fg-form .gform_wrapper.gform-theme .gfield textarea:focus {
	border-color: var(--fg-orange, #ef731d);
	/* Token condiviso: --fg-green puro vale 2.63:1 su --fg-grey-100, sotto il
	   3:1 richiesto da WCAG 1.4.11 per gli indicatori di focus. */
	outline: var(--fg-focus, 3px solid #2f7a20);
	outline-offset: 2px;
}

.fg-form .gform_wrapper.gform-theme .gfield input[type="checkbox"]:focus-visible,
.fg-form .gform_wrapper.gform-theme .gfield a:focus-visible,
.fg-form .gform_wrapper.gform-theme .gform_footer .fg-form__invio:focus-visible,
.fg-form .gform_wrapper.gform-theme .gform_validation_errors a:focus-visible {
	/* Token condiviso: --fg-green puro vale 2.63:1 su --fg-grey-100, sotto il
	   3:1 richiesto da WCAG 1.4.11 per gli indicatori di focus. */
	outline: var(--fg-focus, 3px solid #2f7a20);
	outline-offset: 3px;
}

/* Riquadro del consenso privacy */
.fg-form .gform_wrapper .gfield--type-consent {
	background: var(--fg-grey-100, #f4f4f4);
	border: 1px solid var(--fg-grey-200, #e4e4e4);
	border-left: 4px solid var(--fg-green, #45ad30);
	border-radius: var(--fg-radius, 4px);
	padding: var(--fg-s3, 1.5rem);
}

.fg-form .gform_wrapper .gfield--type-consent.gfield_error {
	border-left-color: #d8532a;
}

.fg-form .gform_wrapper .gfield--type-consent .gform-field-label {
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-grey-600, #6b6b6b);
}

.fg-form .gform_wrapper .gfield--type-consent .gchoice {
	margin-top: var(--fg-s1, .5rem);
}

.fg-form .gform_wrapper .gfield--type-consent .gform-field-label--type-inline {
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fg-grey-900, #2a2a2a);
}

/* Il riquadro del consenso ha fondo --fg-grey-100: lì --fg-orange-dark scende
   a 3.80:1. --fg-orange-text tiene 4.59:1. */
.fg-form .gform_wrapper .gfield--type-consent a {
	color: var(--fg-orange-text, #b35310);
	text-underline-offset: 2px;
}

/* Pulsante di invio */
.fg-form .gform_wrapper .gform_footer,
.fg-form .gform_wrapper .gform-footer {
	margin-top: var(--fg-s4, 2rem);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s2, 1rem);
	align-items: center;
}

.fg-form .gform_wrapper.gform-theme .gform_footer .fg-form__invio {
	width: 100%;
	justify-content: center;
	letter-spacing: .04em;
	font-weight: 700;
	text-transform: uppercase;
}

@media (min-width: 480px) {
	.fg-form .gform_wrapper.gform-theme .gform_footer .fg-form__invio {
		width: auto;
	}
}

/* Errori di validazione */
.fg-form .gform_wrapper .gform_validation_errors {
	margin: 0 0 var(--fg-s3, 1.5rem);
	padding: var(--fg-s2, 1rem) var(--fg-s3, 1.5rem);
	background: #fdf1ec;
	border: 1px solid #d8532a;
	border-left: 4px solid #d8532a;
	border-radius: var(--fg-radius, 4px);
	box-shadow: none;
}

.fg-form .gform_wrapper .gform_validation_errors > h2 {
	margin: 0 0 var(--fg-s1, .5rem);
	font-family: var(--fg-font-body, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 700;
	color: #a5350f;
	text-transform: none;
	letter-spacing: 0;
}

.fg-form .gform_wrapper .gform_validation_errors ol,
.fg-form .gform_wrapper .gform_validation_errors ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: .9375rem;
}

.fg-form .gform_wrapper .gfield_validation_message,
.fg-form .gform_wrapper .validation_message {
	margin-top: var(--fg-s1, .5rem);
	padding: .5rem .75rem;
	background: #fdf1ec;
	border: 0;
	border-left: 3px solid #d8532a;
	border-radius: 0 var(--fg-radius, 4px) var(--fg-radius, 4px) 0;
	font-size: .875rem;
	line-height: 1.5;
	color: #a5350f;
}

/* Conferma di invio.
   Gravity Forms annida .gform_confirmation_wrapper > .gform_confirmation_message
   dentro il div .fg-form-conferma aggiunto dal filtro gform_confirmation, e
   main.css disegna una cornice su entrambi i contenitori GF: senza la neutraliz-
   zazione qui sotto la conferma appare come tre riquadri verdi uno dentro l'altro.
   Il riquadro lo disegna un elemento solo, il più esterno. */
.fg-form-conferma,
.fg-form > .gform_confirmation_wrapper,
.fg-contatti__form-card > .gform_confirmation_message {
	padding: var(--fg-s3, 1.5rem);
	background: #f1f8ef;
	border: 1px solid var(--fg-green, #45ad30);
	border-left: 4px solid var(--fg-green, #45ad30);
	border-radius: var(--fg-radius, 4px);
	line-height: 1.6;
	color: #1f4d16;
}

.fg-form-conferma .gform_confirmation_wrapper,
.fg-form-conferma .gform_confirmation_message,
.fg-contatti__form-card .gform_confirmation_wrapper .gform_confirmation_message {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	color: inherit;
}

.fg-form-conferma p:first-child,
.fg-contatti__form-card .gform_confirmation_message p:first-child {
	margin-top: 0;
}

.fg-form-conferma p:last-child,
.fg-contatti__form-card .gform_confirmation_message p:last-child {
	margin-bottom: 0;
}

.fg-form-conferma strong {
	display: block;
	margin-bottom: var(--fg-s1, .5rem);
	font-family: var(--fg-font-display, sans-serif);
	font-size: 1.25rem;
	color: var(--fg-green-dark, #368a25);
}

/* Fallback senza Gravity Forms */
.fg-form-fallback {
	padding: var(--fg-s3, 1.5rem);
	background: var(--fg-grey-100, #f4f4f4);
	border-radius: var(--fg-radius, 4px);
}

/* -----------------------------------------------------------------------------
   5. Dove siamo
   -------------------------------------------------------------------------- */

.fg-mappa {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fg-s4, 2rem);
	align-items: center;
}

@media (min-width: 900px) {
	.fg-mappa {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--fg-s5, 3rem);
	}
}

.fg-mappa__titolo {
	margin: var(--fg-s1, .5rem) 0 var(--fg-s3, 1.5rem);
}

.fg-mappa__testo {
	margin: 0 0 var(--fg-s3, 1.5rem);
	max-width: 46ch;
	line-height: 1.7;
	color: var(--fg-grey-900, #2a2a2a);
}

.fg-mappa__indirizzo {
	margin: 0 0 var(--fg-s2, 1rem);
	padding-left: var(--fg-s2, 1rem);
	border-left: 3px solid var(--fg-orange, #ef731d);
}

.fg-mappa__indirizzo-label {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-grey-600, #6b6b6b);
}

.fg-mappa__indirizzo-valore {
	display: block;
	font-family: var(--fg-font-display, sans-serif);
	font-size: 1.375rem;
	line-height: 1.3;
	color: var(--fg-black, #111);
}

.fg-mappa__nota {
	margin: 0 0 var(--fg-s3, 1.5rem);
	max-width: 46ch;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--fg-grey-600, #6b6b6b);
}

/* Riepilogo dei riferimenti del punto vendita */
.fg-mappa__dati {
	margin: 0 0 var(--fg-s3, 1.5rem);
	max-width: 46ch;
}

.fg-mappa__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s2, 1rem);
	margin: 0;
}

/* Su schermo stretto i due pulsanti stanno uno per riga a piena larghezza:
   sono i due gesti principali da telefono (aprire Maps, chiamare). */
.fg-mappa__azioni .fg-btn {
	width: 100%;
	justify-content: center;
}

@media (min-width: 480px) {
	.fg-mappa__azioni .fg-btn {
		width: auto;
	}
}

.fg-mappa__disclaimer {
	margin: var(--fg-s2, 1rem) 0 0;
	max-width: 46ch;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--fg-grey-600, #6b6b6b);
}

/* Comuni di provenienza */
.fg-mappa__comuni {
	margin-top: var(--fg-s4, 2rem);
	padding-top: var(--fg-s3, 1.5rem);
	border-top: 1px solid var(--fg-grey-200, #e4e4e4);
}

.fg-mappa__comuni-titolo {
	margin: 0 0 var(--fg-s2, 1rem);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-grey-600, #6b6b6b);
}

.fg-mappa__comuni-lista {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s1, .5rem);
	margin: 0;
	padding: 0;
}

.fg-mappa__comuni-lista li {
	padding: .25rem .625rem;
	background: var(--fg-white, #fff);
	border: 1px solid var(--fg-grey-200, #e4e4e4);
	border-radius: var(--fg-radius, 4px);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--fg-grey-900, #2a2a2a);
}

.fg-mappa__foto {
	position: relative;
	margin: 0;
	border-radius: var(--fg-radius, 4px);
	overflow: hidden;
	box-shadow: var(--fg-shadow, 0 2px 12px rgba(0, 0, 0, .08));
}

.fg-mappa__foto-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 12 / 7;
	object-fit: cover;
}

.fg-mappa__foto-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--fg-s4, 2rem) var(--fg-s3, 1.5rem) var(--fg-s2, 1rem);
	background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, .82) 60%);
	color: var(--fg-white, #fff);
	font-size: .875rem;
	letter-spacing: .02em;
}

/* Stato con embed: segnaposto GDPR */
.fg-mappa__box {
	position: relative;
	display: flex;
	min-height: 20rem;
	border: 1px solid var(--fg-grey-200, #e4e4e4);
	border-radius: var(--fg-radius, 4px);
	background: var(--fg-white, #fff);
	overflow: hidden;
}

/* Sfondo del segnaposto: foto del negozio servita da questo dominio, con velo
   scuro per garantire il contrasto del testo. Nessuna risorsa esterna. */
.fg-mappa__sfondo {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.fg-mappa__sfondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, .74);
}

.fg-mappa__sfondo ~ .fg-mappa__placeholder .fg-mappa__avviso,
.fg-mappa__sfondo ~ .fg-mappa__placeholder .fg-mappa__nota {
	color: var(--fg-white, #fff);
}

.fg-mappa__sfondo ~ .fg-mappa__placeholder .fg-mappa__nota a {
	color: var(--fg-white, #fff);
	text-underline-offset: 3px;
}

.fg-mappa__placeholder {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--fg-s2, 1rem);
	padding: var(--fg-s4, 2rem);
	text-align: left;
}

.fg-mappa__avviso {
	margin: 0;
	max-width: 52ch;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--fg-grey-900, #2a2a2a);
}

.fg-mappa__box iframe {
	display: block;
	width: 100%;
	min-height: 24rem;
	border: 0;
}

/* -----------------------------------------------------------------------------
   6. Riconoscere il posto — fascia aerea + reparto segnaletica
   La fascia con la veduta aerea e il carosello della segnaletica usano il
   componente slider (assets/css/slider.css): qui solo l'innesto nella pagina.
   -------------------------------------------------------------------------- */

/* Fascia aerea (variante 'sfondo', full-bleed): il componente la porta a tutta
   larghezza da sé. È un elemento di supporto alla mappa, non un hero: più bassa
   della banda predefinita. Il filo arancio sopra/sotto la stacca dalla sezione
   grigia della mappa e dal carosello che segue. */
.fg-contatti__aerea.fg-slider--sfondo {
	min-height: clamp(20rem, 44vh, 32rem);
	border-top: 4px solid var(--fg-orange, #ef731d);
	border-bottom: 4px solid var(--fg-orange, #ef731d);
}

/* Carosello del reparto segnaletica: sezione bianca standard, il ritmo lo dà
   il padding di .fg-section. Nessun ritocco al componente. */
.fg-contatti-reparto .fg-contatti__reparto-slider {
	margin: 0;
}

/* -----------------------------------------------------------------------------
   7. Dati aziendali
   -------------------------------------------------------------------------- */

.fg-section.fg-dati-fiscali {
	padding-top: var(--fg-s6, 4rem);
	padding-bottom: var(--fg-s6, 4rem);
}

.fg-dati-fiscali__titolo {
	margin: 0 0 var(--fg-s3, 1.5rem);
	font-family: var(--fg-font-display, sans-serif);
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fg-grey-600, #6b6b6b);
}

.fg-dati-fiscali__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fg-s3, 1.5rem);
	width: 100%;
	max-width: none;
	margin: 0;
	padding-top: var(--fg-s3, 1.5rem);
	border-top: 2px solid var(--fg-grey-200, #e4e4e4);
}

@media (min-width: 640px) {
	.fg-dati-fiscali__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.fg-dati-fiscali__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fg-dati-fiscali__voce dt {
	margin: 0 0 4px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-grey-600, #6b6b6b);
}

.fg-dati-fiscali__nota {
	margin: var(--fg-s3, 1.5rem) 0 0;
	max-width: 72ch;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--fg-grey-600, #6b6b6b);
}

.fg-dati-fiscali__voce dd {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--fg-black, #111);
	word-break: break-word;
}

/* -----------------------------------------------------------------------------
   8. Movimento
   Gli ingressi allo scroll sono di motion.css: qui solo le micro-transizioni,
   azzerate quando l'utente chiede meno movimento.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.fg-info-card {
		transition: transform var(--fg-transition, .2s ease), box-shadow var(--fg-transition, .2s ease);
	}

	.fg-info-card:hover {
		transform: translate3d(0, -2px, 0);
		box-shadow: var(--fg-shadow, 0 2px 12px rgba(0, 0, 0, .08));
	}

	.fg-mappa__foto-img {
		transition: transform .5s ease;
	}

	.fg-mappa__foto:hover .fg-mappa__foto-img {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fg-info-card,
	.fg-mappa__foto-img,
	a.fg-recapiti__valore {
		transition: none;
	}
}

/* ---- Colonna foto dell'aside (negozio · personale · esterno) ------------- */
.fg-contatti__foto {
	display: grid;
	gap: var(--fg-s3, 1.5rem);
}
.fg-contatti__foto-item {
	margin: 0;
	border-radius: var(--fg-radius, 4px);
	overflow: hidden;
	box-shadow: var(--fg-shadow, 0 2px 12px rgba(0,0,0,.08));
}
.fg-contatti__foto-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
