/* fm-whatsapp-chat */
.fm-wac-root,
.fm-wac-root * {
	box-sizing: border-box;
}

.fm-wac-root,
.fm-wac-root *,
.fm-wac-root *::before,
.fm-wac-root *::after,
.fm-wac-inline-trigger,
.fm-wac-inline-trigger * {
	font-family: var(--fm-wac-font-family, inherit);
}

.fm-wac-root {
	font-family: var(--fm-wac-font-family, inherit);
	font-size: var(--fm-wac-body-font-size, 15px);
	line-height: 1.45;
	position: fixed;
	z-index: var(--fm-wac-z-index, 99999);
	bottom: calc(var(--fm-wac-bottom, 28px) + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
}

.fm-wac-position-right {
	right: var(--fm-wac-side, 28px);
}

.fm-wac-position-left {
	left: var(--fm-wac-side, 28px);
}

.fm-wac-root .fm-wac-overlay {
	appearance: none;
	background: var(--fm-wac-overlay, rgba(11, 18, 32, 0.22));
	border: 0;
	font: inherit;
	inset: 0;
	margin: 0;
	padding: 0;
	position: fixed;
	pointer-events: auto;
}

.fm-wac-root .fm-wac-overlay[hidden],
.fm-wac-root .fm-wac-panel[hidden] {
	display: none !important;
}

.fm-wac-panel {
	background: var(--fm-wac-panel-bg, #fff);
	border: 0;
	border-radius: var(--fm-wac-panel-radius, 0);
	bottom: calc(var(--fm-wac-launcher-size, 64px) + 16px);
	box-shadow: var(--fm-wac-shadow, 0 24px 70px rgba(16, 24, 40, 0.22));
	color: var(--fm-wac-body-color, #172033);
	display: flex;
	flex-direction: column;
	max-height: min(680px, calc(100vh - var(--fm-wac-bottom, 28px) - env(safe-area-inset-bottom, 0px) - var(--fm-wac-launcher-size, 64px) - 34px));
	overflow: hidden;
	pointer-events: auto;
	position: absolute;
	width: min(var(--fm-wac-panel-width, 380px), calc(100vw - 32px));
	animation: fm-wac-panel-in 180ms cubic-bezier(.2, .8, .2, 1) both;
}

.fm-wac-position-right .fm-wac-panel {
	right: 0;
}

.fm-wac-position-left .fm-wac-panel {
	left: 0;
}

.fm-wac-no-launcher .fm-wac-panel {
	bottom: 0;
	max-height: min(680px, calc(100vh - var(--fm-wac-bottom, 28px) - env(safe-area-inset-bottom, 0px) - 32px));
}

.fm-wac-header {
	align-items: center;
	background: var(--fm-wac-header-bg, #075e54);
	color: var(--fm-wac-header-color, #fff);
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 36px;
	gap: 12px;
	padding: 18px 18px 17px;
}

.fm-wac-header-icon {
	align-items: center;
	background: var(--fm-wac-header-icon-bg, rgba(255, 255, 255, 0.14));
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--fm-wac-panel-radius, 0);
	display: flex;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.fm-wac-header-icon svg {
	fill: currentColor;
	height: 26px;
	width: 26px;
}

.fm-wac-header-copy {
	min-width: 0;
}

.fm-wac-header-kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.2;
	margin-bottom: 3px;
	opacity: .72;
	text-transform: none;
}

.fm-wac-header h2 {
	color: inherit;
	font-family: inherit;
	font-size: var(--fm-wac-title-font-size, 19px);
	font-weight: 750;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fm-wac-root .fm-wac-close {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: var(--fm-wac-panel-radius, 0);
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 28px;
	height: 36px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	opacity: .82;
	padding: 0;
	transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
	width: 36px;
}

.fm-wac-root .fm-wac-close:focus {
	background: transparent;
	color: inherit;
}

.fm-wac-root .fm-wac-close:hover,
.fm-wac-root .fm-wac-close:active {
	background: rgba(255, 255, 255, 0.14);
	opacity: 1;
	transform: scale(.96);
}

.fm-wac-root .fm-wac-close:focus-visible,
.fm-wac-root .fm-wac-launcher:focus-visible,
.fm-wac-root .fm-wac-send:focus-visible,
.fm-wac-inline-trigger.fm-wac-inline-trigger:focus-visible,
.fm-wac-context-link:focus-visible,
.fm-wac-root textarea.fm-wac-textarea:focus-visible {
	outline: 3px solid var(--fm-wac-focus, #128c7e);
	outline-offset: 3px;
}

.fm-wac-body {
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px;
	scrollbar-width: thin;
}

.fm-wac-intro {
	color: var(--fm-wac-body-color, #172033);
	font-size: var(--fm-wac-body-font-size, 15px);
	line-height: 1.55;
	margin: 0 0 17px;
}

.fm-wac-context {
	align-items: stretch;
	background: var(--fm-wac-context-bg, #f2fbf5);
	border: 1px solid var(--fm-wac-context-border, #d6f1df);
	border-radius: var(--fm-wac-panel-radius, 0);
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr);
	margin: 0 0 18px;
	overflow: hidden;
}

.fm-wac-context-no-image {
	grid-template-columns: minmax(0, 1fr);
}

.fm-wac-context-image {
	height: 100%;
	min-height: 112px;
	object-fit: cover;
	width: 78px;
}

.fm-wac-context-content {
	align-content: center;
	display: grid;
	gap: 3px;
	min-width: 0;
	padding: 12px 13px;
}

.fm-wac-context-heading {
	color: var(--fm-wac-muted-color, #667085);
	font-size: 11px;
	font-weight: 650;
	line-height: 1.25;
}

.fm-wac-context-badge {
	color: var(--fm-wac-context-accent, #128c7e);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.25;
	margin-top: 2px;
	text-transform: none;
}

.fm-wac-context-title {
	color: var(--fm-wac-body-color, #172033);
	display: -webkit-box;
	font-size: 14px;
	font-weight: 750;
	line-height: 1.35;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.fm-wac-context-meta {
	color: var(--fm-wac-muted-color, #667085);
	font-size: 12px;
	line-height: 1.35;
}

.fm-wac-context-link {
	color: var(--fm-wac-context-accent, #128c7e);
	font-size: 12px;
	font-weight: 700;
	justify-self: start;
	line-height: 1.35;
	margin-top: 3px;
	text-decoration: none !important;
}

.fm-wac-context-link:hover,
.fm-wac-context-link:active {
	color: var(--fm-wac-context-accent, #128c7e);
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.fm-wac-textarea-label {
	color: var(--fm-wac-body-color, #172033);
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 7px;
}

.fm-wac-root textarea.fm-wac-textarea {
	appearance: none;
	background: var(--fm-wac-input-bg, #fff);
	border: 1px solid var(--fm-wac-input-border, #d0d5dd);
	border-radius: var(--fm-wac-panel-radius, 0);
	box-shadow: none;
	color: var(--fm-wac-input-color, #172033);
	display: block;
	font: inherit;
	font-size: var(--fm-wac-body-font-size, 15px);
	line-height: 1.5;
	margin: 0;
	max-height: 220px;
	min-height: 112px;
	padding: 13px 14px;
	resize: vertical;
	transition: border-color 150ms ease, box-shadow 150ms ease;
	width: 100%;
}

.fm-wac-root textarea.fm-wac-textarea::placeholder {
	color: var(--fm-wac-input-placeholder, #98a2b3);
	opacity: 1;
}

.fm-wac-root textarea.fm-wac-textarea:focus {
	border-color: var(--fm-wac-focus, #128c7e);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fm-wac-focus, #128c7e) 18%, transparent);
}

.fm-wac-footer {
	background: var(--fm-wac-panel-bg, #fff);
	border-top: 1px solid color-mix(in srgb, var(--fm-wac-input-border, #d0d5dd) 60%, transparent);
	padding: 15px 20px 20px;
}

.fm-wac-root .fm-wac-send,
.fm-wac-inline-trigger.fm-wac-inline-trigger {
	align-items: center;
	appearance: none;
	background: var(--fm-wac-send-bg, #25d366);
	border: 0;
	border-radius: var(--fm-wac-panel-radius, 0);
	color: var(--fm-wac-send-color, #fff);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--fm-wac-button-font-size, 15px);
	font-weight: 750;
	gap: 10px;
	justify-content: center;
	letter-spacing: normal;
	line-height: 1.2;
	margin: 0;
	min-height: 50px;
	padding: 12px 18px;
	text-decoration: none !important;
	text-transform: none;
	transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.fm-wac-root .fm-wac-send {
	width: 100%;
}

.fm-wac-root .fm-wac-send svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 20px;
}

.fm-wac-root .fm-wac-send:focus,
.fm-wac-inline-trigger.fm-wac-inline-trigger:focus {
	background: var(--fm-wac-send-bg, #25d366);
	color: var(--fm-wac-send-color, #fff);
}

.fm-wac-root .fm-wac-send:hover,
.fm-wac-root .fm-wac-send:active,
.fm-wac-inline-trigger.fm-wac-inline-trigger:hover,
.fm-wac-inline-trigger.fm-wac-inline-trigger:active {
	background: var(--fm-wac-send-bg-hover, #1fbd5a);
	color: var(--fm-wac-send-color, #fff);
	text-decoration: none !important;
}

.fm-wac-root .fm-wac-send:active,
.fm-wac-inline-trigger.fm-wac-inline-trigger:active {
	transform: translateY(1px) scale(.99);
}

.fm-wac-inline-trigger.fm-wac-inline-trigger svg {
	fill: currentColor;
	height: 22px;
	width: 22px;
}

.fm-wac-root .fm-wac-launcher {
	align-items: center;
	appearance: none;
	background: var(--fm-wac-launcher-bg, #25d366);
	border: 0;
	border-radius: var(--fm-wac-launcher-radius, 0);
	box-shadow: var(--fm-wac-shadow, 0 24px 70px rgba(16, 24, 40, .22));
	box-shadow: 0 14px 36px color-mix(in srgb, var(--fm-wac-launcher-bg, #25d366) 34%, transparent), var(--fm-wac-shadow, 0 24px 70px rgba(16, 24, 40, .22));
	color: var(--fm-wac-launcher-icon, #fff);
	cursor: pointer;
	display: flex;
	font: inherit;
	height: var(--fm-wac-launcher-size, 64px);
	justify-content: center;
	letter-spacing: normal;
	margin: 0;
	overflow: visible;
	padding: 0;
	pointer-events: auto;
	position: relative;
	transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
	text-transform: none;
	width: var(--fm-wac-launcher-size, 64px);
}

.fm-wac-root .fm-wac-launcher:focus,
.fm-wac-root .fm-wac-launcher:focus-visible {
	background: var(--fm-wac-launcher-bg, #25d366);
	color: var(--fm-wac-launcher-icon, #fff);
}

.fm-wac-root .fm-wac-launcher:hover,
.fm-wac-root .fm-wac-launcher:active,
.fm-wac-root .fm-wac-launcher[aria-expanded="true"] {
	background: var(--fm-wac-launcher-bg-hover, #1fbd5a);
	color: var(--fm-wac-launcher-icon, #fff);
	transform: translateY(-2px);
}

.fm-wac-root .fm-wac-launcher:active {
	transform: translateY(0) scale(.96);
}

.fm-wac-launcher-icon {
	display: flex;
	height: var(--fm-wac-icon-size, 32px);
	width: var(--fm-wac-icon-size, 32px);
}

.fm-wac-launcher-icon svg {
	fill: currentColor;
	height: 100%;
	width: 100%;
}

.fm-wac-launcher-label {
	background: var(--fm-wac-launcher-label-bg, #111827);
	border-radius: var(--fm-wac-panel-radius, 0);
	box-shadow: 0 8px 22px rgba(16, 24, 40, .18);
	color: var(--fm-wac-launcher-label-color, #fff);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	max-width: min(240px, calc(100vw - 120px));
	opacity: 0;
	padding: 9px 12px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateX(5px);
	transition: opacity 150ms ease, transform 150ms ease;
	visibility: hidden;
	white-space: nowrap;
}

.fm-wac-position-right .fm-wac-launcher-label {
	right: calc(100% + 12px);
}

.fm-wac-position-left .fm-wac-launcher-label {
	left: calc(100% + 12px);
}

.fm-wac-launcher:hover .fm-wac-launcher-label,
.fm-wac-launcher:focus-visible .fm-wac-launcher-label {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
	visibility: visible;
}

.fm-wac-status-dot {
	background: var(--fm-wac-status-dot, #fff);
	border: 2px solid var(--fm-wac-status-dot-border, #25d366);
	border-radius: 50%;
	height: 12px;
	position: absolute;
	right: 3px;
	top: 3px;
	width: 12px;
}

body.fm-wac-panel-open {
	overscroll-behavior: contain;
}

@keyframes fm-wac-panel-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.fm-wac-root.fm-wac-is-mobile {
	bottom: calc(var(--fm-wac-bottom-mobile, 18px) + env(safe-area-inset-bottom, 0px));
}

.fm-wac-position-right.fm-wac-is-mobile {
	right: var(--fm-wac-side-mobile, 16px);
}

.fm-wac-position-left.fm-wac-is-mobile {
	left: var(--fm-wac-side-mobile, 16px);
}

.fm-wac-is-mobile .fm-wac-launcher {
	height: var(--fm-wac-launcher-size-mobile, 58px);
	width: var(--fm-wac-launcher-size-mobile, 58px);
}

.fm-wac-is-mobile .fm-wac-launcher-icon {
	height: var(--fm-wac-icon-size-mobile, 29px);
	width: var(--fm-wac-icon-size-mobile, 29px);
}

.fm-wac-is-mobile .fm-wac-launcher-label {
	display: none;
}

.fm-wac-is-mobile .fm-wac-panel {
	bottom: calc(var(--fm-wac-launcher-size-mobile, 58px) + 12px);
	max-height: min(74vh, calc(100vh - var(--fm-wac-bottom-mobile, 18px) - env(safe-area-inset-bottom, 0px) - var(--fm-wac-launcher-size-mobile, 58px) - 26px));
	width: min(var(--fm-wac-panel-width, 380px), calc(100vw - (var(--fm-wac-side-mobile, 16px) * 2)));
}

.fm-wac-no-launcher.fm-wac-is-mobile .fm-wac-panel {
	bottom: 0;
	max-height: min(74vh, calc(100vh - var(--fm-wac-bottom-mobile, 18px) - env(safe-area-inset-bottom, 0px) - 24px));
}

@media (max-width: 480px) {
	.fm-wac-panel {
		border-radius: var(--fm-wac-panel-radius, 0);
	}

	.fm-wac-header {
		grid-template-columns: 40px minmax(0, 1fr) 34px;
		padding: 15px;
	}

	.fm-wac-header-icon {
		border-radius: var(--fm-wac-panel-radius, 0);
		height: 40px;
		width: 40px;
	}

	.fm-wac-body {
		padding: 16px;
	}

	.fm-wac-footer {
		padding: 13px 16px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fm-wac-panel,
	.fm-wac-launcher,
	.fm-wac-launcher-label,
	.fm-wac-send,
	.fm-wac-close,
	.fm-wac-inline-trigger {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * Con un pannello FM aperto (menu a pannello, Trigger) il pulsante si toglie
 * di mezzo. Il pannello vive spesso dentro una testata sticky, che ha un suo
 * contesto di sovrapposizione: per quanto alto sia il suo z-index, non puo'
 * salire sopra un elemento della pagina a 99999 come questo.
 */
body:has(.fm-panel-root.is-open) .fm-wac-root {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}


.fm-wac-root,.fm-wac-inline-trigger{--fm-wac-launcher-size:64px;--fm-wac-launcher-size-mobile:58px;--fm-wac-icon-size:32px;--fm-wac-icon-size-mobile:29px;--fm-wac-bottom:28px;--fm-wac-side:28px;--fm-wac-bottom-mobile:18px;--fm-wac-side-mobile:16px;--fm-wac-panel-width:380px;--fm-wac-panel-radius:0px;--fm-wac-launcher-radius:0%;--fm-wac-z-index:99999;--fm-wac-font-family:var(--e-global-typography-text-font-family, inherit);--fm-wac-title-font-size:19px;--fm-wac-body-font-size:15px;--fm-wac-button-font-size:15px;--fm-wac-launcher-bg:#25d366;--fm-wac-launcher-bg-hover:#1fbd5a;--fm-wac-launcher-icon:#ffffff;--fm-wac-launcher-label-bg:#111827;--fm-wac-launcher-label-color:#ffffff;--fm-wac-panel-bg:#ffffff;--fm-wac-header-bg:#075e54;--fm-wac-header-color:#ffffff;--fm-wac-header-icon-bg:rgba(255,255,255,0.14);--fm-wac-body-color:#172033;--fm-wac-muted-color:#667085;--fm-wac-context-bg:#f2fbf5;--fm-wac-context-border:#d6f1df;--fm-wac-context-accent:#128c7e;--fm-wac-input-bg:#ffffff;--fm-wac-input-color:#172033;--fm-wac-input-border:#d0d5dd;--fm-wac-input-placeholder:#98a2b3;--fm-wac-send-bg:#25d366;--fm-wac-send-bg-hover:#1fbd5a;--fm-wac-send-color:#ffffff;--fm-wac-focus:#128c7e;--fm-wac-status-dot:#ffffff;--fm-wac-status-dot-border:#25d366;--fm-wac-overlay:rgba(11,18,32,0.22);--fm-wac-shadow:0 24px 70px rgba(16,24,40,0.22);}
/* fm-menu-pannello */
/*
 * Il menu a pannello del framework.
 *
 * La struttura e' quella del sistema Trigger (bottone, velatura, pannello che
 * entra di lato, chiusura in alto) con gli stessi nomi di classe e le stesse
 * variabili, cosi' le pelli dei temi scritte per le copie continuano a valere.
 *
 * Ogni regola ha ESATTAMENTE la specificita' della regola corrispondente
 * nelle copie dei temi, cosi' le pelli scritte per quelle continuano a
 * vincere e a perdere negli stessi punti. Dove la copia diceva .fm-trigger
 * qui c'e' :where(.fm-menu-pannello) .fm-trigger (vale zero in piu'); dove
 * diceva .fm-panel-root qui c'e' .fm-menu-pannello (vale una classe, come
 * prima). Non e' pignoleria: la regola di apertura
 * .fm-panel-root.is-open .fm-panel__container azzera il ritardo della
 * visibilita', e con una classe in meno una pelle che allunga la transizione
 * la batterebbe, lasciando il pannello invisibile mentre entra.
 * Le varianti nuove valgono zero (:where), cosi' una pelle le scavalca.
 * La classe fm-menu-pannello tiene questo foglio lontano dai pannelli del
 * Trigger WooCommerce, che non la portano.
 *
 * I colori vengono dai token della pelle (--fm-theme-*), la tipografia dai
 * globali del Kit di Elementor; i controlli del widget scrivono le stesse
 * variabili o stampano regole d'istanza, e vincono su tutto il resto.
 */

.fm-menu-pannello,
.fm-menu-pannello * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------- bottone */

:where(.fm-menu-pannello) .fm-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: var( --fm-trigger-size, 48px );
	min-height: var( --fm-trigger-size, 48px );
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var( --fm-theme-ink, #1a1a1a );
	line-height: 1;
}

:where(.fm-menu-pannello) .fm-trigger__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fm-trigger-icon-size, 22px );
	height: var( --fm-trigger-icon-size, 22px );
	line-height: 0;
}

:where(.fm-menu-pannello) .fm-trigger__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * L'etichetta prende il carattere "accento" del Kit, a specificita' zero:
 * la pelle o il controllo del widget la scavalcano.
 */
:where(.fm-menu-pannello) .fm-trigger__label {
	font-family: var( --e-global-typography-accent-font-family, inherit );
	font-weight: var( --e-global-typography-accent-font-weight, inherit );
	letter-spacing: var( --e-global-typography-accent-letter-spacing, inherit );
	text-transform: var( --e-global-typography-accent-text-transform, none );
}

@media ( max-width: 767px ) {
	:where(.fm-menu-pannello--etichetta-no-telefono) .fm-trigger__label {
		display: none;
	}
}

/*
 * Due linee: la seconda e' piu' corta e si allunga al passaggio. Il segno e'
 * piu' largo che alto, quindi l'altezza segue le proporzioni del disegno.
 */
:where(.fm-menu-pannello--icona-due) .fm-trigger__icon {
	width: var( --fm-trigger-icon-size, 26px );
	height: auto;
	aspect-ratio: 26 / 10;
}

:where(.fm-menu-pannello--icona-due) .fm-trigger__linea--corta {
	transform-box: fill-box;
	transform-origin: left center;
	transition: transform 0.35s ease, stroke 0.35s ease;
}

:where(.fm-menu-pannello--icona-due) .fm-trigger:hover .fm-trigger__linea--corta,
:where(.fm-menu-pannello--icona-due) .fm-trigger:focus-visible .fm-trigger__linea--corta {
	transform: scaleX( 1.625 );
	stroke: var( --fm-menu-accento, var( --e-global-color-primary, currentColor ) );
}

:where(.fm-menu-pannello) .fm-trigger:focus-visible,
:where(.fm-menu-pannello) .fm-panel__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ------------------------------------------------------------- velatura */

:where(.fm-menu-pannello) .fm-panel__overlay {
	position: fixed;
	inset: 0;
	z-index: var( --fm-panel-z-index, 100000 );
	background-color: var( --fm-panel-overlay, color-mix( in srgb, var( --fm-theme-ink, #1a1a1a ) 42%, transparent ) );
	opacity: 0;
	transition: opacity 280ms ease;
}

.fm-menu-pannello.is-open .fm-panel__overlay {
	opacity: 1;
}

/*
 * hidden e' un attributo, non una classe: il pannello chiuso non deve essere
 * raggiungibile col tabulatore nemmeno mentre l'animazione finisce.
 */
:where(.fm-menu-pannello) .fm-panel__overlay[hidden] {
	display: none;
}

/* ------------------------------------------------------------- pannello */

:where(.fm-menu-pannello) .fm-panel__container {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: calc( var( --fm-panel-z-index, 100000 ) + 1 );
	display: flex;
	width: min( var( --fm-panel-width, 420px ), 100vw );
	max-width: 100vw;
	max-height: 100dvh;
	flex-direction: column;
	background: var( --fm-panel-background, var( --fm-theme-surface, #fff ) );
	visibility: hidden;
	transition: transform 320ms cubic-bezier( 0.22, 0.61, 0.36, 1 ), visibility 0s linear 320ms;
}

.fm-menu-pannello[data-fm-panel-position="right"] .fm-panel__container {
	right: 0;
	left: auto;
	transform: translate3d( 102%, 0, 0 );
}

.fm-menu-pannello[data-fm-panel-position="left"] .fm-panel__container {
	left: 0;
	right: auto;
	transform: translate3d( -102%, 0, 0 );
}

.fm-menu-pannello.is-open .fm-panel__container {
	transform: translate3d( 0, 0, 0 );
	visibility: visible;
	transition-delay: 0s;
}

:where(.fm-menu-pannello) .fm-panel__close {
	position: absolute;
	z-index: 100;
	top: max( var( --fm-close-offset-top, 12px ), env( safe-area-inset-top ) );
	right: max( var( --fm-close-offset-inline, 12px ), env( safe-area-inset-right ) );
	display: inline-flex;
	width: var( --fm-close-button-size, 44px );
	height: var( --fm-close-button-size, 44px );
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	cursor: pointer;
	color: var( --fm-theme-ink, #1a1a1a );
}

:where(.fm-menu-pannello) .fm-panel__close-icon {
	display: inline-flex;
	width: var( --fm-close-icon-size, 20px );
	height: var( --fm-close-icon-size, 20px );
	line-height: 0;
}

:where(.fm-menu-pannello) .fm-panel__close-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Un solo contenitore che scorre: se scorressero anche la navigazione o la
 * lista, su iOS il gesto si incastrerebbe fra i due.
 */
:where(.fm-menu-pannello) .fm-panel__body {
	width: 100%;
	min-height: 0;
	flex: 1 1 auto;
	padding:
		calc( var( --fm-close-button-size, 44px ) + var( --fm-close-offset-top, 12px ) + var( --fm-close-content-gap, 12px ) )
		clamp( 24px, 4vw, 48px )
		clamp( 24px, 4vw, 48px );
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------- le voci */

:where(.fm-menu-pannello) .fm-panel__nav,
:where(.fm-menu-pannello) .fm-panel__menu {
	width: 100%;
	max-width: 100%;
}

:where(.fm-menu-pannello) .fm-panel__menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	gap: var( --fm-panel-item-gap, 16px );
	list-style: none;
}

:where(.fm-menu-pannello) .fm-panel__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Le voci nel carattere "secondario" del Kit. Tutto a specificita' zero e con
 * ripiego su inherit: un Kit che non lo definisce lascia le voci come sono.
 */
:where(.fm-menu-pannello) .fm-panel__menu a {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: var( --fm-menu-item-icon-gap, 10px );
	font-family: var( --e-global-typography-secondary-font-family, inherit );
	font-size: var( --e-global-typography-secondary-font-size, inherit );
	font-weight: var( --e-global-typography-secondary-font-weight, inherit );
	font-style: var( --e-global-typography-secondary-font-style, inherit );
	line-height: var( --e-global-typography-secondary-line-height, inherit );
	letter-spacing: var( --e-global-typography-secondary-letter-spacing, inherit );
	text-transform: var( --e-global-typography-secondary-text-transform, none );
	color: var( --fm-theme-ink, #1a1a1a );
	text-decoration: none;
	transition: color 180ms ease;
}

:where(.fm-menu-pannello) .fm-panel__menu a:hover,
:where(.fm-menu-pannello) .fm-panel__menu a:focus-visible {
	color: var( --fm-theme-action, #1a1a1a );
}

/*
 * Il secondo livello rientra e resta piu' piccolo del primo. La misura si
 * ricava da quella delle voci e non in em: il sottomenu non sta dentro il
 * link della voce madre, e 0.72em sarebbe una frazione del testo del corpo.
 */
:where(.fm-menu-pannello) .fm-panel__menu .sub-menu {
	display: flex;
	flex-direction: column;
	margin: 10px 0 0;
	padding: 0 0 0 18px;
	gap: calc( var( --fm-panel-item-gap, 16px ) * 0.6 );
	list-style: none;
}

:where(.fm-menu-pannello) .fm-panel__menu .sub-menu a {
	font-size: calc( var( --e-global-typography-secondary-font-size, 1.4em ) * 0.72 );
}

/* ----------------------------------------------------- fisarmonica */

/*
 * La voce con figli tiene il link e la freccia sulla stessa riga; il
 * sottomenu va a capo sotto, chiuso finche' la voce non e' aperta.
 */
:where(.fm-menu-pannello--fisarmonica) .fm-panel__menu li.menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 6px;
}

:where(.fm-menu-pannello--fisarmonica) .fm-panel__menu li.menu-item-has-children > .sub-menu {
	flex-basis: 100%;
	display: none;
}

:where(.fm-menu-pannello--fisarmonica) .fm-panel__menu li.is-aperta > .sub-menu {
	display: flex;
}

:where(.fm-menu-pannello--fisarmonica) .fm-panel__sotto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -8px 0;
	padding: 0;
	border: 0;
	background: none;
	color: var( --fm-theme-ink, #1a1a1a );
	cursor: pointer;
}

:where(.fm-menu-pannello--fisarmonica) .fm-panel__sotto svg {
	width: 12px;
	height: 8px;
	transition: transform 180ms ease;
}

:where(.fm-menu-pannello--fisarmonica) .fm-panel__sotto[aria-expanded="true"] svg {
	transform: rotate( 180deg );
}

:where(.fm-menu-pannello--fisarmonica) .fm-panel__sotto:focus-visible {
	outline: 2px solid var( --fm-theme-action, currentColor );
	outline-offset: -4px;
}

@media ( prefers-reduced-motion: reduce ) {
	:where(.fm-menu-pannello--fisarmonica) .fm-panel__sotto svg {
		transition: none;
	}
}

/* --------------------------------------------------------- numeri */

:where(.fm-menu-pannello--numeri) .fm-panel__menu {
	counter-reset: fm-voce;
}

:where(.fm-menu-pannello--numeri) .fm-panel__menu > li {
	counter-increment: fm-voce;
}

:where(.fm-menu-pannello--numeri) .fm-panel__menu > li > a {
	align-items: baseline;
	gap: 0.6em;
}

:where(.fm-menu-pannello--numeri) .fm-panel__menu > li > a::before {
	content: counter( fm-voce, decimal-leading-zero );
	font-family: var( --e-global-typography-text-font-family, inherit );
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.2em;
	font-variant-numeric: lining-nums;
	color: var( --fm-menu-numeri, var( --e-global-color-primary, currentColor ) );
}

/* ----------------------------------------------------------- piede */

:where(.fm-menu-pannello--con-piede) .fm-panel__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
}

:where(.fm-menu-pannello) .fm-panel__piede {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 36px;
	padding-top: 28px;
	border-top: 1px solid color-mix( in srgb, currentColor 12%, transparent );
	font-family: var( --e-global-typography-text-font-family, inherit );
	font-size: 13px;
}

:where(.fm-menu-pannello) .fm-panel__email {
	color: inherit;
	letter-spacing: 0.06em;
	text-decoration: none;
}

:where(.fm-menu-pannello) .fm-panel__slogan {
	margin: 0 0 0 auto;
	font-family: var( --e-global-typography-secondary-font-family, inherit );
	font-style: italic;
	font-size: 1.5em;
	color: var( --fm-menu-accento, var( --e-global-color-primary, currentColor ) );
}

/* ------------------------------------------------------------- foto */

/* Nella forma laterale la foto non ha posto: resta fuori, e lazy non la scarica. */
:where(.fm-menu-pannello) .fm-panel__foto {
	display: none;
}

/* ------------------------------------------------- a tutto schermo */

:where(.fm-menu-pannello--schermo) .fm-panel__container {
	--fm-panel-width: 100vw;
	transition: transform 0.75s cubic-bezier( 0.77, 0, 0.18, 1 ), visibility 0s linear 0.75s;
}

:where(.fm-menu-pannello--schermo) .fm-panel__body {
	padding: clamp( 96px, 14vh, 150px ) clamp( 28px, 7vw, 120px ) 48px;
}

:where(.fm-menu-pannello--schermo) .fm-panel__menu a {
	padding: 10px 0;
	font-size: clamp( 38px, 4.6vw, 68px );
	line-height: 1.05;
	transition: color 0.35s ease, padding 0.45s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

:where(.fm-menu-pannello--schermo) .fm-panel__menu > li > a:hover,
:where(.fm-menu-pannello--schermo) .fm-panel__menu > li > a:focus-visible {
	padding-left: 14px;
}

:where(.fm-menu-pannello--schermo) .fm-panel__menu .sub-menu a {
	font-size: clamp( 18px, 2vw, 28px );
}

:where(.fm-menu-pannello--schermo) .fm-panel__close {
	top: 26px;
	right: 34px;
}

@media ( min-width: 1025px ) {

	/* Voci a sinistra, foto a destra. */
	:where(.fm-menu-pannello--schermo.fm-menu-pannello--con-foto) .fm-panel__container {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}

	:where(.fm-menu-pannello--schermo) .fm-panel__foto {
		position: relative;
		display: block;
		margin: 0;
		overflow: hidden;
	}

	:where(.fm-menu-pannello--schermo) .fm-panel__foto img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
}

@media ( max-width: 1024px ) {

	:where(.fm-menu-pannello--schermo) .fm-panel__close {
		top: 14px;
		right: 14px;
	}

	:where(.fm-menu-pannello--schermo) .fm-panel__slogan {
		margin-left: 0;
		width: 100%;
	}
}

/* ------------------------------------------------ chiusura in un riquadro */

/*
 * Un quadrato col fondo del pannello: la croce si legge anche sopra una foto.
 * Qui la classe pesa davvero, perche' deve battere il reset dei bottoni
 * (.fm-menu-pannello button); una pelle con body.fm-theme-<nome> resta piu'
 * forte.
 */
.fm-menu-pannello--chiusura-riquadro .fm-panel__close {
	width: var( --fm-close-button-size, 52px );
	height: var( --fm-close-button-size, 52px );
	border: 1px solid color-mix( in srgb, currentColor 18%, transparent );
	background: color-mix( in srgb, var( --fm-panel-background, var( --fm-theme-surface, #fff ) ) 72%, transparent );
	transition: border-color 0.3s ease, color 0.3s ease;
}

.fm-menu-pannello--chiusura-riquadro .fm-panel__close:hover,
.fm-menu-pannello--chiusura-riquadro .fm-panel__close:focus-visible {
	border-color: currentColor;
}

/* -------------------------------------------------------- movimento */

:where(.fm-menu-pannello--movimento) .fm-panel__menu > li {
	opacity: 0;
	transform: translate3d( 0, 24px, 0 );
	transition: opacity 0.6s ease, transform 0.8s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li {
	opacity: 1;
	transform: none;
}

:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(1) { transition-delay: 0.35s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(2) { transition-delay: 0.43s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(3) { transition-delay: 0.51s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(4) { transition-delay: 0.59s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(5) { transition-delay: 0.67s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(6) { transition-delay: 0.75s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(7) { transition-delay: 0.83s; }
:where(.fm-menu-pannello--movimento).is-open .fm-panel__menu > li:nth-child(n+8) { transition-delay: 0.91s; }

:where(.fm-menu-pannello--movimento) .fm-panel__piede {
	opacity: 0;
	transition: opacity 0.6s ease;
}

:where(.fm-menu-pannello--movimento).is-open .fm-panel__piede {
	opacity: 1;
	transition-delay: 0.8s;
}

:where(.fm-menu-pannello--movimento) .fm-panel__foto img {
	transform: scale( 1.08 );
	transition: transform 1.6s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

:where(.fm-menu-pannello--movimento).is-open .fm-panel__foto img {
	transform: scale( 1 );
}

/* ------------------------------------------------- movimento ridotto */

@media ( prefers-reduced-motion: reduce ) {

	:where(.fm-menu-pannello) .fm-panel__container,
	:where(.fm-menu-pannello) .fm-panel__overlay,
	:where(.fm-menu-pannello) .fm-trigger__linea--corta {
		transition: none;
	}

	:where(.fm-menu-pannello--movimento) .fm-panel__menu > li,
	:where(.fm-menu-pannello--movimento) .fm-panel__piede,
	:where(.fm-menu-pannello--movimento) .fm-panel__foto img {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Hello Elementor colora di magenta i bottoni al passaggio e al fuoco: qui i
 * bottoni sono due, quello che apre e quello che chiude, e nessuno dei due si
 * riempie. Cambia solo il colore del segno.
 */
.fm-menu-pannello button {
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
}

/* Il fuoco da clic: spoglio. */
.fm-menu-pannello .fm-trigger:focus,
.fm-menu-pannello .fm-panel__close:focus {
	background: none;
	color: var( --fm-theme-ink, #1a1a1a );
}

.fm-menu-pannello .fm-trigger:hover,
.fm-menu-pannello .fm-trigger:focus-visible,
.fm-menu-pannello .fm-panel__close:hover,
.fm-menu-pannello .fm-panel__close:focus-visible {
	background: none;
	color: var( --fm-menu-accento, var( --e-global-color-primary, currentColor ) );
}

/*
 * Hello Elementor da' ai bottoni un padding di mezzo rem per uno: nel bottone
 * di chiusura (44 px) l'icona veniva schiacciata a larghezza zero e la X
 * spariva. Bottoni senza padding e icone che non si restringono.
 */
.fm-menu-pannello .fm-trigger,
.fm-menu-pannello .fm-panel__close {
	padding: 0;
}

:where(.fm-menu-pannello) .fm-trigger__icon,
:where(.fm-menu-pannello) .fm-panel__close-icon {
	flex: none;
}

/*
 * Il riquadro della chiusura ha il suo fondo: le regole qui sopra, a pari
 * specificita', lo toglierebbero al passaggio e al fuoco.
 */
.fm-menu-pannello--chiusura-riquadro.fm-menu-pannello .fm-panel__close:hover,
.fm-menu-pannello--chiusura-riquadro.fm-menu-pannello .fm-panel__close:focus,
.fm-menu-pannello--chiusura-riquadro.fm-menu-pannello .fm-panel__close:focus-visible {
	background: color-mix( in srgb, var( --fm-panel-background, var( --fm-theme-surface, #fff ) ) 72%, transparent );
}

/* fm-mega-menu */
/*
 * Il megamenù del framework.
 *
 * Tutto a specificita' zero (:where) tranne la struttura che deve reggere:
 * una pelle (body.fm-theme-<nome> .fm-mega__...) vince sempre, i controlli
 * del widget scrivono le variabili sull'istanza e vincono su tutto.
 * Colori dai token della pelle (--fm-theme-*), caratteri dal Kit di
 * Elementor: voci della barra e del pannello nel carattere "Testo", titoli
 * dei gruppi in "Accento".
 *
 * Il pannello e' fissato sotto la testata: lo script scrive --fm-mega-top
 * (il fondo della testata) all'apertura, cosi' non dipende da quale
 * contenitore Elementor sia posizionato.
 */

.fm-mega,
.fm-mega * {
	box-sizing: border-box;
}

:where(.fm-mega) {
	--fm-mega-voce: var( --fm-theme-ink, #1a1a1a );
	--fm-mega-voce-attiva: var( --fm-theme-action, var( --e-global-color-primary, #1a1a1a ) );
	--fm-mega-sfondo: var( --fm-theme-surface, #ffffff );
	--fm-mega-link: var( --fm-theme-ink, #1a1a1a );
	--fm-mega-link-attivo: var( --fm-theme-action, var( --e-global-color-primary, #1a1a1a ) );
	--fm-mega-tenue: var( --fm-theme-muted, #6b6f76 );
	--fm-mega-linea: var( --fm-theme-line, rgba( 0, 0, 0, 0.08 ) );
	--fm-mega-spazio: 28px;
	--fm-mega-colonne: 3;
	--fm-mega-larghezza: 1180px;
	--fm-mega-raggio: var( --fm-theme-radius, 10px );
	display: block;
}

/* ------------------------------------------------------------- barra */

.fm-mega__barra {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --fm-mega-spazio );
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-mega__voce {
	position: relative;
	margin: 0;
}

:where(.fm-mega) .fm-mega__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var( --fm-mega-voce );
	font-family: var( --e-global-typography-text-font-family, inherit );
	font-size: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 160ms ease;
}

:where(.fm-mega) .fm-mega__link:hover,
:where(.fm-mega) .fm-mega__link:focus-visible,
:where(.fm-mega) .fm-mega__voce--attiva > .fm-mega__link,
:where(.fm-mega) .fm-mega__apri[aria-expanded="true"] {
	color: var( --fm-mega-voce-attiva );
}

:where(.fm-mega) .fm-mega__link:focus-visible {
	outline: 2px solid var( --fm-mega-voce-attiva );
	outline-offset: 4px;
	border-radius: 2px;
}

.fm-mega__freccia {
	width: 10px;
	height: 6px;
	flex: 0 0 auto;
	transition: transform 160ms ease;
}

.fm-mega__apri[aria-expanded="true"] .fm-mega__freccia {
	transform: rotate( 180deg );
}

/* ---------------------------------------------------------- pannello */

.fm-mega__pannello {
	position: fixed;
	left: 0;
	right: 0;
	top: var( --fm-mega-top, 80px );
	z-index: 999;
	max-height: calc( 100vh - var( --fm-mega-top, 80px ) - 16px );
	overflow-y: auto;
	opacity: 0;
	transform: translateY( -6px );
	transition: opacity 160ms ease, transform 160ms ease;
}

.fm-mega__pannello[hidden] {
	display: none;
}

.fm-mega__voce.is-open > .fm-mega__pannello {
	opacity: 1;
	transform: none;
}

/* Ponte invisibile fra la voce e il pannello: il puntatore che scende non lo chiude. */
.fm-mega__voce.is-open::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: calc( var( --fm-mega-top, 80px ) - 28px );
	height: 28px;
}

:where(.fm-mega) .fm-mega__pannello {
	background: var( --fm-mega-sfondo );
	border-top: 1px solid var( --fm-mega-linea );
	box-shadow: 0 18px 40px -12px rgba( 22, 25, 34, 0.18 );
}

.fm-mega__dentro {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 40px;
	width: 100%;
	max-width: var( --fm-mega-larghezza );
	margin: 0 auto;
	padding: 32px 0 36px;
}

.fm-mega--schermo .fm-mega__dentro {
	max-width: none;
	padding-left: 4%;
	padding-right: 4%;
}

.fm-mega__dentro--riquadro {
	grid-template-columns: minmax( 0, 1fr ) minmax( 240px, 300px );
}

:where(.fm-mega) .fm-mega__vai {
	display: inline-block;
	margin: 0 0 18px;
	color: var( --fm-mega-voce-attiva );
	font-family: var( --e-global-typography-accent-font-family, inherit );
	font-weight: 600;
	text-decoration: none;
}

.fm-mega__colonne {
	column-count: var( --fm-mega-colonne );
	column-gap: 36px;
}

:where(.fm-mega) .fm-mega__lista {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

:where(.fm-mega) .fm-mega__lista li {
	margin: 0;
	padding: 0;
	break-inside: avoid;
}

:where(.fm-mega) .fm-mega__lista a {
	display: block;
	padding: 6px 0;
	color: var( --fm-mega-link );
	font-family: var( --e-global-typography-text-font-family, inherit );
	line-height: 1.35;
	text-decoration: none;
	transition: color 140ms ease;
}

:where(.fm-mega) .fm-mega__lista a:hover,
:where(.fm-mega) .fm-mega__lista a:focus-visible,
:where(.fm-mega) .fm-mega__lista a[aria-current="page"] {
	color: var( --fm-mega-link-attivo );
}

/* Un gruppo (voce con figli) non si spezza fra due colonne. */
.fm-mega__gruppo {
	break-inside: avoid;
	margin: 0 0 18px;
}

:where(.fm-mega) .fm-mega__gruppo-titolo {
	display: block;
	margin: 0 0 4px;
	padding: 6px 0 8px;
	border-bottom: 1px solid var( --fm-mega-linea );
	color: var( --fm-mega-tenue );
	font-family: var( --e-global-typography-accent-font-family, inherit );
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

:where(.fm-mega) a.fm-mega__gruppo-titolo:hover,
:where(.fm-mega) a.fm-mega__gruppo-titolo:focus-visible {
	color: var( --fm-mega-link-attivo );
}

/* -------------------------------------------------- riquadro in evidenza */

:where(.fm-mega) .fm-mega__riquadro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 0 0 32px;
	border-left: 1px solid var( --fm-mega-linea );
}

.fm-mega__riquadro-foto {
	margin: 0;
	overflow: hidden;
	border-radius: var( --fm-mega-raggio );
	aspect-ratio: 16 / 10;
}

.fm-mega__riquadro-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:where(.fm-mega) .fm-mega__riquadro-titolo {
	margin: 4px 0 0;
	color: var( --fm-mega-link );
	font-family: var( --e-global-typography-primary-font-family, inherit );
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.25;
}

:where(.fm-mega) .fm-mega__riquadro-testo {
	margin: 0;
	color: var( --fm-mega-tenue );
	font-family: var( --e-global-typography-text-font-family, inherit );
	font-size: 0.92em;
	line-height: 1.5;
}

:where(.fm-mega) .fm-mega__riquadro-pulsante {
	align-self: flex-start;
	margin-top: 4px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var( --fm-theme-button, var( --fm-mega-voce-attiva ) );
	color: var( --fm-theme-button-text, #ffffff );
	font-family: var( --e-global-typography-accent-font-family, inherit );
	font-weight: 600;
	font-size: 0.92em;
	text-decoration: none;
	transition: background-color 160ms ease;
}

:where(.fm-mega) .fm-mega__riquadro-pulsante:hover,
:where(.fm-mega) .fm-mega__riquadro-pulsante:focus-visible {
	background: var( --fm-theme-action-hover, var( --fm-mega-voce ) );
}

/* Sotto i 1200 px il riquadro scende sotto le colonne invece di stringerle. */
@media ( max-width: 1199px ) {
	.fm-mega__dentro--riquadro {
		grid-template-columns: minmax( 0, 1fr );
	}
	:where(.fm-mega) .fm-mega__riquadro {
		flex-direction: row;
		align-items: center;
		padding: 20px 0 0;
		border-left: 0;
		border-top: 1px solid var( --fm-mega-linea );
	}
	.fm-mega__riquadro-foto {
		flex: 0 0 180px;
	}
	.fm-mega__dentro {
		padding-left: 4%;
		padding-right: 4%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fm-mega__pannello,
	.fm-mega__freccia,
	:where(.fm-mega) .fm-mega__link {
		transition: none;
	}
}

/* fmct-base */
/*
 * Il fondo comune dei componenti FM.
 *
 * DA DOVE VIENE IL MAGENTA. Hello Elementor, in assets/css/reset.css, veste
 * ogni bottone nudo del sito:
 *
 *   [type="button"], [type="submit"], button {
 *     border: 1px solid #c36; color: #c36;
 *   }
 *   [type="button"]:hover, [type="button"]:focus,
 *   button:hover, button:focus { background-color: #c36; color: #fff; }
 *
 * I widget di Elementor non lo prendono perche' dichiarano da soli il proprio
 * aspetto. I nostri lo prendevano tutti, perche' lasciano il <button> spoglio:
 * e' quel #cc3366 che ricompariva a ogni componente nuovo, su ogni sito col
 * tema Hello. Non e' mai stato un colore scelto da qualcuno.
 *
 * COME SI SPEGNE, DALLA 3.6.60. Non con la specificita'. La 3.6.58 usava
 * button[class^="fm-"] a (0,1,1) per battere il :hover di Hello, e cosi'
 * batteva anche le regole a una classe sola dei nostri moduli - trentuno
 * bottoni (WhatsApp, trigger, wishlist, cassetto, frecce, paginazione,
 * campioni delle varianti) persi sfondo, bordo e colore su ogni sito, a ogni
 * aggiornamento. Il reset di un tema deve stare in fondo alla cascata, e CSS
 * ha lo strumento apposta: il foglio reset.css di Hello viene stampato dal
 * framework come @import ... layer(fm-theme-reset) (vedi
 * FM_Complete_Toolkit::layer_hello_reset). Le regole in un layer perdono
 * contro QUALSIASI regola fuori dal layer, a prescindere dalla specificita'
 * e dall'ordine: il magenta non puo' piu' raggiungere un bottone che un
 * modulo ha vestito, nemmeno al passaggio del mouse.
 *
 * Questo file resta per i bottoni davvero nudi, e per quelli soltanto: le
 * sue regole sono a specificita' ZERO (:where), quindi vincono sul reset nel
 * layer e perdono contro ogni regola di modulo, anche a una classe sola,
 * anche a riposo contro il loro :hover. Un modulo che dichiara qualcosa
 * vince sempre; non deve piu' aggiungere classi per farsi rispettare.
 *
 * SI TOCCANO SOLO I BOTTONI CHE PORTANO UNA CLASSE fm-. Non i bottoni dentro
 * un contenitore FM: dentro una card di prodotto ci sono i bottoni di
 * WooCommerce e di Elementor, che hanno il proprio aspetto e non vanno
 * spogliati.
 *
 * Il colore al passaggio e' quello della pelle, che a sua volta arriva dai
 * Colori globali del Kit.
 */

:where(button[class^="fm-"],
button[class*=" fm-"],
[type="button"][class^="fm-"],
[type="button"][class*=" fm-"]) {
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
}

:where(button[class^="fm-"],
button[class*=" fm-"],
[type="button"][class^="fm-"],
[type="button"][class*=" fm-"]):where(:hover, :focus) {
	background: none;
	color: var( --fm-theme-action, var( --e-global-color-primary, currentColor ) );
}

/* fm-wooe-frontend-fixes */
:root {
  --fm-wooe-color-text: var(--e-global-color-text, currentColor);
  --fm-wooe-color-accent: var(--e-global-color-primary, currentColor);
  --fm-wooe-color-muted: var(--e-global-color-secondary, rgba(17, 17, 17, 0.68));
  --fm-wooe-color-border: color-mix(in srgb, var(--fm-wooe-color-text) 14%, transparent);
}

.woocommerce,
.woocommerce-page {
  color: var(--fm-wooe-color-text);
}

.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--fm-wooe-color-accent);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.woocommerce .woocommerce-privacy-policy-text,
.woocommerce .woocommerce-terms-and-conditions-wrapper,
.woocommerce .woocommerce-form-login-toggle,
.woocommerce .woocommerce-form-coupon-toggle,
.woocommerce #payment .place-order,
.woocommerce form .form-row {
  font-size: 0.98rem;
  line-height: 1.65;
}

.woocommerce .woocommerce-privacy-policy-text p:last-child,
.woocommerce .woocommerce-terms-and-conditions-wrapper p:last-child,
.woocommerce form .form-row:last-child {
  margin-bottom: 0;
}

.woocommerce form .form-row label,
.woocommerce #payment .payment_methods label,
.woocommerce .woocommerce-form__label {
  color: var(--fm-wooe-color-text);
  font-weight: 600;
}

.woocommerce form .form-row .required {
  color: var(--fm-wooe-color-accent);
}

.woocommerce #payment,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border-radius: 18px;
}

.woocommerce .woocommerce-privacy-policy-text,
.woocommerce .woocommerce-terms-and-conditions-wrapper {
  color: var(--fm-wooe-color-muted);
}

.woocommerce-checkout #payment div.payment_box {
  background: color-mix(in srgb, var(--fm-wooe-color-accent) 4%, white);
  color: var(--fm-wooe-color-text);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: color-mix(in srgb, var(--fm-wooe-color-accent) 4%, white);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border-color: var(--fm-wooe-color-border);
  border-radius: 20px;
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border-radius: 0;
  overflow: hidden;
}

.woocommerce .select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection--multiple,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce textarea {
  border-radius: 14px;
}

@media (max-width: 767px) {
  .woocommerce .woocommerce-privacy-policy-text,
  .woocommerce .woocommerce-terms-and-conditions-wrapper,
  .woocommerce .woocommerce-form-login-toggle,
  .woocommerce .woocommerce-form-coupon-toggle,
  .woocommerce #payment .place-order,
  .woocommerce form .form-row {
    font-size: 0.95rem;
  }
}

/* I campi sono volutamente piatti e senza bordo: hover e focus devono
   restare nella stessa lingua, non far spuntare il bordo di default del
   browser. Hover: fondo appena piu' scuro. Focus: sottolineatura netta. */
.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row select:hover,
.woocommerce form .form-row textarea:hover {
  background-color: color-mix(in srgb, currentColor 7%, #f9fafa);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border: 0;
  box-shadow: inset 0 -2px 0 0 var(--e-global-color-text, #333749);
  background-color: #fff;
}

/* "Sei gia' nostro cliente?": deve saltare all'occhio, non sembrare una
   riga qualunque. Grassetto, bordo a sinistra e l'omino davanti. */
.woocommerce .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-login-toggle.e-checkout-secondary-title {
  font-weight: 700;
  padding: 10px 14px;
  border-left: 3px solid var(--e-global-color-accent, #f1135e);
  background: color-mix(in srgb, var(--e-global-color-accent, #f1135e) 7%, #fff);
}

.woocommerce .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-form-login-toggle.e-checkout-secondary-title::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.45em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="8" r="3.4"/><path d="M4.5 20c1.6-3.6 4.2-5.4 7.5-5.4s5.9 1.8 7.5 5.4"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="8" r="3.4"/><path d="M4.5 20c1.6-3.6 4.2-5.4 7.5-5.4s5.9 1.8 7.5 5.4"/></svg>') no-repeat center / contain;
}

/* "Spedire a un indirizzo diverso?" in evidenza ora che parte spento. */
.woocommerce #ship-to-different-address label {
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Loghi dei metodi di pagamento (gateway_icons_map)
   Inline dopo il nome del metodo, come sul checkout storico.
------------------------------------------------------------------ */
.woocommerce-checkout #payment .fm-wooe-gateway-icon {
	display: inline-block;
	max-height: 24px;
	width: auto;
	vertical-align: middle;
	margin-left: 6px;
	float: none;
}
.woocommerce-checkout #payment .fm-wooe-gateway-icon:first-of-type {
	margin-left: 10px;
}