/* Monti Catalogo — base: token, tipografia, pulsanti, testata, piede,
   barra titolo, animazioni. Caricato ovunque. */

/* =========================================================================
   Monti Catalogo — stile catalogo e scheda prodotto
   Palette e tipografia derivate dal mockup approvato.
   ========================================================================= */

:root {
	--ml-blue: #267fba;
	--ml-blue-deep: #0b3048;
	--ml-blue-black: #071f2d;
	--ml-green: #5cba45;
	--ml-green-dark: #327833;
	--ml-green-light: #a7d99a;
	--ml-paper: #f4f3ed;
	--ml-titolo-chiaro: #f3f3ed;
	--ml-titolo-scuro: #0d3048;
	--ml-white: #ffffff;
	--ml-ink: #122129;
	--ml-muted: #5c686e;
	--ml-line: rgba(18, 33, 41, .16);
	--ml-serif: 'Prata', Georgia, 'Times New Roman', serif;
	--ml-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--ml-radius: 2px;
	--ml-container: min(1380px, calc(100vw - 48px));
	--ml-shadow: 0 24px 70px rgba(7, 31, 45, .12);
	--ml-ease: cubic-bezier(.22, .61, .36, 1);
}


/* ---------------------------------------------------------------- Base --- */

.mc-site .ml-container {
	width: min(var(--ml-container), 100%);
	margin-inline: auto;
}


.mc-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}


.mc-site .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
}


.mc-site :where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--ml-green-dark);
	outline-offset: 3px;
}


/* -------------------------------------------------------- Tipografia --- */

.mc-site .ml-kicker,
.mc-site .ml-kicker--light {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	color: var(--ml-green-dark);
	font-family: var(--ml-sans);
	font-size: .73rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.4;
}


.mc-site .ml-kicker::before,
.mc-site .ml-kicker--light::before {
	flex: 0 0 auto;
	width: 32px;
	height: 1px;
	background: currentColor;
	content: '';
}


.mc-site .ml-kicker--light {
	color: var(--ml-green-light);
}


.mc-site .ml-display,
.mc-site .ml-title,
.mc-site .ml-title--sm {
	margin: 0;
	font-family: var(--ml-serif);
	font-weight: 500;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: none;
}


.mc-site .ml-display {
	max-width: 16ch;
	font-size: clamp(3.2rem, 6.4vw, 7rem);
}


.mc-site .ml-title {
	max-width: 20ch;
	font-size: clamp(2.6rem, 4.6vw, 5rem);
}


.mc-site .ml-title--sm {
	max-width: 24ch;
	font-size: clamp(2rem, 3vw, 3.1rem);
}


/* Toglie il limite di misura quando il titolo deve occupare tutta la colonna. */
.mc-site .ml-w-full {
	max-width: none;
}


.mc-site .ml-subtitle {
	margin: 20px 0 0;
	font-size: clamp(1.05rem, 1.2vw, 1.25rem);
	font-weight: 500;
	line-height: 1.4;
}


.mc-site .ml-copy {
	max-width: 66ch;
	color: var(--ml-muted);
	font-size: 1rem;
	line-height: 1.75;
}


.mc-site .ml-section {
	padding: clamp(72px, 8vw, 130px) 0;
}


.mc-site .ml-section--dark {
	color: #fff;
	background: var(--ml-blue-black);
}


.mc-site .ml-section--dark .ml-kicker {
	color: var(--ml-green-light, #8fd47c);
}


.mc-site .ml-section--dark .ml-copy {
	color: rgba(255, 255, 255, .7);
}


.mc-site .ml-rule {
	border-top: 1px solid var(--ml-line);
}


.mc-site .ml-arrow {
	display: inline-block;
	transition: transform .25s var(--ml-ease);
}


.mc-site a:hover .ml-arrow,
.mc-site button:hover .ml-arrow {
	transform: translateX(5px);
}


/* ------------------------------------------------------------ Bottoni --- */

.mc-site .ml-button,
.mc-site .ml-button--green,
.mc-site .ml-button--light {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 13px 22px;
	border: 1px solid currentColor;
	border-radius: var(--ml-radius);
	background: transparent;
	color: var(--ml-blue-deep);
	font-family: var(--ml-sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .25s var(--ml-ease), color .25s var(--ml-ease), border-color .25s var(--ml-ease);
	cursor: pointer;
}


.mc-site .ml-button:hover,
.mc-site .ml-button:focus-visible {
	color: #fff;
	border-color: var(--ml-blue-deep);
	background: var(--ml-blue-deep);
}


.mc-site .ml-button--light {
	color: #fff;
}


.mc-site .ml-button--light:hover {
	color: var(--ml-blue-black);
	border-color: #fff;
	background: #fff;
}


.mc-site .ml-button--green {
	color: #fff;
	border-color: var(--ml-green-dark);
	background: var(--ml-green-dark);
}


.mc-site .ml-button--green:hover,
.mc-site .ml-button--green:focus-visible {
	color: #fff;
	border-color: var(--ml-blue-deep);
	background: var(--ml-blue-deep);
}


.mc-site .ml-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}


.mc-site .ml-link-arrow {
	color: var(--ml-blue-deep);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--ml-line);
	padding-bottom: 4px;
}


.mc-site .ml-link-arrow:hover {
	border-color: var(--ml-green-dark);
	color: var(--ml-green-dark);
}


.mc-site .ml-filter-group {
	margin: 0;
	padding: 22px 0;
	border: 0;
	border-top: 1px solid var(--ml-line);
}


.mc-site .ml-filter-group legend {
	display: block;
	width: 100%;
	margin-bottom: 14px;
	padding: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ml-ink);
}


.mc-site .ml-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 7px 0;
	color: var(--ml-muted);
	font-size: .92rem;
	line-height: 1.3;
	cursor: pointer;
	transition: color .2s var(--ml-ease);
}


.mc-site .ml-check:hover {
	color: var(--ml-ink);
}


.mc-site .ml-check input {
	width: 17px;
	height: 17px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--ml-green-dark);
}


.mc-site .ml-check__label {
	flex: 1 1 auto;
}


.mc-site .ml-check__count {
	flex: 0 0 auto;
	min-width: 22px;
	color: var(--ml-muted);
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	opacity: .7;
}


.mc-site .ml-check.is-disabled {
	opacity: .38;
	cursor: not-allowed;
}


.mc-site .ml-check:has(input:checked) {
	color: var(--ml-ink);
	font-weight: 600;
}


.mc-site .ml-filter-reset {
	padding: 0;
	border: 0;
	border-bottom: 1px solid;
	background: transparent;
	color: var(--ml-blue-deep);
	font-family: var(--ml-sans);
	font-size: .73rem;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
}


.mc-site .ml-filter-reset:hover {
	color: var(--ml-green-dark);
}


.mc-has-js .mc-no-js-only {
	display: none;
}


.mc-site .ml-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--ml-muted);
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}


.mc-site .ml-breadcrumb a {
	color: inherit;
	text-decoration: none;
}


.mc-site .ml-breadcrumb a:hover {
	color: var(--ml-green-dark);
}
@keyframes mc-pulse {

	0%, 100% { box-shadow: 0 0 0 0 rgba(92, 186, 69, .5); }

	60% { box-shadow: 0 0 0 7px rgba(92, 186, 69, 0); }
}


.mc-site .ml-docs {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}


.mc-site .ml-docs a {
	color: var(--ml-blue-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}


.mc-sample {
	position: relative;
	z-index: 2;
}


.mc-sample--icon {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	background: rgba(7, 31, 45, .35);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-4px);
	transition: .25s var(--ml-ease);
	backdrop-filter: blur(3px);
}


.mc-sample--icon .mc-sample__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}


.mc-sample__icon {
	position: relative;
	width: 14px;
	height: 14px;
}


.mc-sample__icon::before,
.mc-sample__icon::after {
	position: absolute;
	background: currentColor;
	content: '';
	transition: transform .25s var(--ml-ease);
}


.mc-sample__icon::before {
	inset: 6px 0 auto;
	height: 1.6px;
}


.mc-sample__icon::after {
	inset: 0 6px auto;
	width: 1.6px;
	height: 14px;
}


.mc-sample[aria-pressed="true"] {
	border-color: var(--ml-green-dark);
	background: var(--ml-green-dark);
	color: #fff;
}


.mc-sample[aria-pressed="true"] .mc-sample__icon::after {
	transform: scaleY(0);
}


/* -------------------------------------------------------------- Modale --- */

.mc-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 20px;
}


.mc-modal[hidden] {
	display: none;
}


.mc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 31, 45, .68);
	backdrop-filter: blur(3px);
}


.mc-modal__dialog {
	position: relative;
	width: min(640px, 100%);
	max-height: 86vh;
	padding: clamp(28px, 4vw, 48px);
	overflow-y: auto;
	background: #fff;
	box-shadow: var(--ml-shadow);
}


.mc-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ml-line);
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}


.mc-modal__title {
	margin: 0 0 22px;
	font-family: var(--ml-serif);
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 500;
	line-height: 1.05;
}


.mc-modal__form input[type="text"],
.mc-modal__form input[type="email"],
.mc-modal__form input[type="tel"],
.mc-modal__form textarea,
.mc-modal__form select {
	width: 100%;
	margin-bottom: 14px;
	padding: 13px 14px;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	background: #fff;
	font-family: var(--ml-sans);
	font-size: .95rem;
	box-shadow: none;
}


/* ------------------------------------------------------------- Lightbox --- */

.mc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: grid;
	place-items: center;
	padding: 4vmin;
	background: rgba(4, 18, 27, .93);
}


.mc-lightbox img {
	max-width: 100%;
	max-height: 92vh;
	object-fit: contain;
}


.mc-lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .5);
	background: none;
	color: #fff;
	font-size: 1.6rem;
	cursor: pointer;
}


/* --------------------------------------------------------------- Motion --- */

.mc-site [data-mc-card] {
	opacity: 1;
}
@keyframes mc-vortex {

	from { transform: rotate(0deg); }

	to { transform: rotate(360deg); }
}


.mc-sr-status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
@media (max-width: 1180px) {

	:root {
		--ml-container: min(100% - 44px, 1000px);
	}
}
@media (max-width: 540px) {

	:root {
		--ml-container: calc(100% - 32px);
	}


	.mc-site .ml-samples {
		width: 100%;
	}
}
@media (prefers-reduced-motion: reduce) {

	.mc-site *,
	.mc-site *::before,
	.mc-site *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}
@media print {

	.mc-samples-fab,
	.mc-samples,
	.ml-filters,
	.ml-final-cta {
		display: none !important;
	}
}


/* ============================================================ HOME KIT ===
   I componenti non si appoggiano alla struttura interna delle colonne di
   Flatsome: ogni blocco ha il proprio contenitore, scritto dentro il blocco
   Testo. Così il risultato non cambia se il tema aggiunge un wrapper. */

/* Le sezioni della home fanno da riferimento all'annotazione di margine. */
.mc-site .mc-sez { position: relative; }


/* --- annotazione di margine ------------------------------------------- */

.mc-site { counter-reset: mc-sez; }


.mc-site .mc-note {
	position: relative;
	margin: 0 0 34px;
	counter-increment: mc-sez;
	color: var(--ml-muted);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.6;
	text-transform: uppercase;
}


.mc-site .mc-note strong,
.mc-site .mc-note b {
	display: block;
	color: var(--ml-ink);
	font-weight: 700;
}


.mc-site .mc-note::before {
	display: block;
	width: 2px;
	height: 64px;
	margin-bottom: 18px;
	background: linear-gradient(180deg, var(--ml-blue), var(--ml-green));
	content: '';
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 1.1s var(--ml-ease);
}


.mc-site .mc-note.is-in::before,
.mc-site .mc-note::before { transform: scaleY(1); }


.mc-has-js .mc-note::before { transform: scaleY(0); }

.mc-has-js .mc-note.is-in::before { transform: scaleY(1); }


/* Il numero della sezione, tenue, sotto l'annotazione. */
.mc-site .mc-note::after {
	display: block;
	margin-top: 22px;
	color: rgba(18, 33, 41, .13);
	content: counter(mc-sez, decimal-leading-zero);
	font-family: var(--ml-serif);
	font-size: 3.1rem;
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1;
}


/* L'annotazione esce nel margine libero fuori dal contenitore, restando nel
   flusso: niente posizionamento assoluto, quindi non può finire sopra o sotto
   il contenuto se il tema cambia gli agganci.
   --mc-container deve valere quanto la larghezza del sito impostata nel tema:
   la soglia qui sotto è quella larghezza più lo spazio che serve alla banda. */
.mc-site { --mc-container: 1920px; }
@media (min-width: 2280px) {

	.mc-site .mc-sez .mc-note {
		float: left;
		width: 168px;
		margin: 0 0 0 calc((var(--mc-container) - 100vw) / 2 + 28px);
	}


	.mc-site .mc-sez .mc-note + * { clear: none; }
}
@media (max-width: 2279px) {

	.mc-site .mc-sez .mc-note {
		display: flex;
		align-items: flex-end;
		gap: 16px;
		margin: 0 0 26px;
		line-height: 1.2;
	}


	.mc-site .mc-sez .mc-note::before {
		width: 2px;
		height: 30px;
		margin: 0;
		order: 0;
		flex: 0 0 auto;
	}


	.mc-site .mc-sez .mc-note::after {
		margin: 0;
		order: 1;
		font-size: 2.3rem;
		line-height: .78;
	}


	.mc-site .mc-sez .mc-note strong { order: 3; }
}


/* --- tipografia -------------------------------------------------------- */

.mc-site .mc-h1 {
	max-width: 15ch;
	margin: 0 0 30px;
	font-family: var(--ml-serif);
	font-size: clamp(2.5rem, 5vw, 5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.028em;
	text-transform: none;
}


.mc-site .mc-h2 {
	max-width: 18ch;
	margin: 0;
	font-family: var(--ml-serif);
	font-size: clamp(2rem, 3.2vw, 3.3rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.022em;
	text-transform: none;
}


.mc-site .mc-h3 {
	margin: 0 0 14px;
	font-family: var(--ml-serif);
	font-size: clamp(1.3rem, 1.8vw, 1.9rem);
	font-weight: 400;
	line-height: 1.15;
	text-transform: none;
}


/* --- pulsanti ---------------------------------------------------------- */
/* Il riempimento è uno sfondo che scorre, non uno strato sopra: così il testo
   resta visibile anche quando è testo nudo, senza span attorno. */

.mc-site .mc-btn,
.mc-site a.button.mc-btn {
	--mc-fill: var(--ml-ink);
	position: relative;
	display: inline-flex;
	min-height: 54px;
	align-items: center;
	gap: 12px;
	margin: 0 10px 10px 0;
	padding: 15px 28px;
	border: 1px solid var(--ml-ink);
	border-radius: 0;
	background-color: transparent;
	background-image: linear-gradient(to bottom, transparent 0 50%, var(--mc-fill) 50% 100%);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% 200%;
	box-shadow: none;
	color: var(--ml-ink);
	font-family: var(--ml-sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1;
	text-transform: none;
	transition:
		background-position .5s var(--ml-ease),
		color .35s var(--ml-ease),
		border-color .35s var(--ml-ease);
}


.mc-site .mc-btn::after {
	content: '→';
	transition: transform .4s var(--ml-ease);
}


.mc-site .mc-btn:hover,
.mc-site .mc-btn:focus-visible,
.mc-site a.button.mc-btn:hover,
.mc-site a.button.mc-btn:focus-visible {
	background-position: 0 100%;
	border-color: var(--mc-fill);
	color: var(--ml-paper);
}


.mc-site .mc-btn:hover span,
.mc-site a.button.mc-btn:hover span { color: inherit; }


.mc-site .mc-btn:hover::after { transform: translateX(5px); }


.mc-site .mc-btn--solid:hover,
.mc-site .mc-btn--solid:focus-visible,
.mc-site a.button.mc-btn--solid:hover { color: #fff; }


/* --- animazioni --------------------------------------------------------- */

/* Ingresso dei testi: una salita breve, non una parata. Il ritardo cresce
   solo tra i figli diretti del blocco, così le righe entrano in ordine. */

.mc-has-js .mc-rise { opacity: 0; transform: translateY(22px); }


.mc-has-js .mc-rise > * {
	opacity: 0;
	transform: translateY(16px);
}


.mc-has-js .mc-rise.is-in > * {
	opacity: 1;
	transform: none;
	transition: opacity .7s var(--ml-ease), transform .8s var(--ml-ease);
}


.mc-has-js .mc-rise.is-in > *:nth-child(1) { transition-delay: 60ms; }

.mc-has-js .mc-rise.is-in > *:nth-child(2) { transition-delay: 150ms; }

.mc-has-js .mc-rise.is-in > *:nth-child(3) { transition-delay: 240ms; }

.mc-has-js .mc-rise.is-in > *:nth-child(4) { transition-delay: 330ms; }

.mc-has-js .mc-rise.is-in > *:nth-child(5) { transition-delay: 420ms; }


.mc-has-js .mc-rise.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .9s var(--ml-ease), transform 1.1s var(--ml-ease);
}


.mc-has-js .mc-wipe img,
.mc-has-js img.mc-wipe { clip-path: inset(0 0 100% 0); }


.mc-has-js .mc-wipe.is-in img,
.mc-has-js img.mc-wipe.is-in {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.5s var(--ml-ease) .1s;
}
@media (max-width: 849px) {

	.mc-site .mc-note::before { height: 28px; margin-bottom: 10px; }
}
@media (max-width: 720px) {

	.mc-site .mc-h1 { max-width: none; }

	.mc-site .mc-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {


	.mc-has-js .mc-note::before { transform: scaleY(1); }
}


/* ======================================================== BARRA TITOLO ===
   Stessa resa per la testata delle categorie e per le pagine istituzionali
   costruite con un blocco UX. Nessun motivo decorativo: fotografia, velatura
   diagonale, annotazione e titolo serif. */

.mc-site .mc-titlebar {
	position: relative;
	overflow: hidden;
	padding: var(--mc-titlebar-top, 40px) 0 var(--mc-titlebar-bottom, 20px);
	background: var(--ml-blue-black);
	color: #fff;
}


.mc-site .mc-titlebar.has-image {
	background-color: var(--ml-blue-black);
	background-image: var(--mc-hero-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* Velatura: piena a sinistra dove sta il titolo, fino a sparire a destra.
   I quattro valori si possono ritoccare per singola pagina scrivendoli nello
   stile della sezione, senza toccare il plugin. */
.mc-site .mc-titlebar {
	--mc-velo-1: .92;
	--mc-velo-2: .78;
	--mc-velo-3: .4;
	--mc-velo-alto: .32;
}


.mc-site .mc-titlebar::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(7, 31, 45, var(--mc-velo-alto)) 0%, transparent 24%),
		linear-gradient(95deg,
			rgba(7, 31, 45, var(--mc-velo-1)) 0%,
			rgba(7, 31, 45, var(--mc-velo-2)) 26%,
			rgba(7, 31, 45, var(--mc-velo-3)) 56%,
			rgba(7, 31, 45, .08) 84%,
			rgba(7, 31, 45, 0) 100%);
	content: '';
	pointer-events: none;
}


/* Lo sfondo scelto dal builder resta sotto la velatura. */
.mc-site .mc-titlebar .section-bg { z-index: 0; }


/* Due tarature pronte, se una fotografia è più chiara o più scura della media. */
.mc-site .mc-titlebar--velo-forte {
	--mc-velo-1: .97;
	--mc-velo-2: .88;
	--mc-velo-3: .54;
}


.mc-site .mc-titlebar--velo-leggero {
	--mc-velo-1: .82;
	--mc-velo-2: .62;
	--mc-velo-3: .24;
	--mc-velo-alto: .22;
}
@media (max-width: 860px) {

	.mc-site .mc-titlebar::after {
		background: linear-gradient(180deg,
			rgba(7, 31, 45, .88) 0%,
			rgba(7, 31, 45, .74) 46%,
			rgba(7, 31, 45, .5) 100%);
	}
}


.mc-site .mc-titlebar > .ml-container,
.mc-site .mc-titlebar .section-content { position: relative; z-index: 2; }


.mc-site .mc-titlebar .mc-note { color: rgba(255, 255, 255, .6); }

.mc-site .mc-titlebar .mc-note strong { color: #fff; }

.mc-site .mc-titlebar .mc-note::after { color: rgba(255, 255, 255, .18); }


.mc-site .mc-titlebar .mc-note::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, .7), var(--ml-green));
}


.mc-site .mc-titlebar__title,
.mc-site .mc-titlebar h1 {
	max-width: 16ch;
	margin: 0;
	color: var(--ml-titolo-chiaro);
	font-family: var(--ml-serif);
	font-size: clamp(2.5rem, 5vw, 5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.028em;
	text-transform: none;
}


/* Versione chiara, quando l'opzione dello sfondo scuro è spenta. */
.mc-site .mc-titlebar.is-light:not(.has-image) {
	background: var(--ml-paper);
	color: var(--ml-ink);
}


.mc-site .mc-titlebar.is-light:not(.has-image)::after { display: none; }

.mc-site .mc-titlebar.is-light:not(.has-image) .mc-note { color: var(--ml-muted); }

.mc-site .mc-titlebar.is-light:not(.has-image) .mc-note strong { color: var(--ml-ink); }

.mc-site .mc-titlebar.is-light:not(.has-image) .mc-note::after { color: rgba(18, 33, 41, .13); }

.mc-site .mc-titlebar.is-light:not(.has-image) .mc-note::before {
	background: linear-gradient(180deg, var(--ml-blue), var(--ml-green));
}

.mc-site .mc-titlebar.is-light:not(.has-image) .mc-titlebar__title,
.mc-site .mc-titlebar.is-light:not(.has-image) h1 { color: var(--ml-ink); }
@media (max-width: 860px) {

	.mc-site .mc-titlebar__title { max-width: none; }
}


/* --- briciole di pane nella barra titolo -------------------------------- */

.mc-site .mc-crumbs {
	margin: 0 0 26px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.6;
	text-transform: uppercase;
}


.mc-site .mc-crumbs a,
.mc-site .mc-crumbs span {
	color: inherit;
	text-decoration: none;
}


.mc-site .mc-crumbs a {
	border-bottom: 1px solid transparent;
	transition: border-color .25s var(--ml-ease);
}


.mc-site .mc-crumbs a:hover { border-bottom-color: currentColor; }


.mc-site .mc-crumbs > * > *:not(:last-child)::after { content: ''; }


.mc-site .mc-titlebar .mc-crumbs { color: rgba(255, 255, 255, .62); }

.mc-site .mc-titlebar .mc-crumbs .breadcrumb_last,
.mc-site .mc-titlebar .mc-crumbs strong { color: #fff; font-weight: 700; }


.mc-site .mc-titlebar.is-light:not(.has-image) .mc-crumbs { color: var(--ml-muted); }

.mc-site .mc-titlebar.is-light:not(.has-image) .mc-crumbs .breadcrumb_last { color: var(--ml-ink); }


/* ===================================================== ANIMAZIONI D'USO ===
   Classi generiche da mettere su qualunque blocco, riga o colonna nelle pagine
   interne. Entrano quando l'elemento arriva nello schermo, una volta sola. */

.mc-has-js .mc-in,
.mc-has-js .mc-stagger > * {
	opacity: 0;
	transform: translateY(22px);
}


.mc-has-js .mc-in.is-in,
.mc-has-js .mc-stagger.is-in > * {
	opacity: 1;
	transform: none;
	transition: opacity .8s var(--ml-ease), transform .9s var(--ml-ease);
}


/* Direzioni alternative, per impaginazioni asimmetriche. */
.mc-has-js .mc-in--left { transform: translateX(-34px); }

.mc-has-js .mc-in--right { transform: translateX(34px); }

.mc-has-js .mc-in--zoom { transform: scale(1.04); opacity: 0; }

.mc-has-js .mc-in--fade { transform: none; }


.mc-has-js .mc-in--left.is-in,
.mc-has-js .mc-in--right.is-in,
.mc-has-js .mc-in--zoom.is-in { transform: none; }


/* Ritardo progressivo tra i figli di un contenitore. */
.mc-has-js .mc-stagger.is-in > *:nth-child(1) { transition-delay: 40ms; }

.mc-has-js .mc-stagger.is-in > *:nth-child(2) { transition-delay: 130ms; }

.mc-has-js .mc-stagger.is-in > *:nth-child(3) { transition-delay: 220ms; }

.mc-has-js .mc-stagger.is-in > *:nth-child(4) { transition-delay: 310ms; }

.mc-has-js .mc-stagger.is-in > *:nth-child(5) { transition-delay: 400ms; }

.mc-has-js .mc-stagger.is-in > *:nth-child(6) { transition-delay: 490ms; }

.mc-has-js .mc-stagger.is-in > *:nth-child(7) { transition-delay: 580ms; }

.mc-has-js .mc-stagger.is-in > *:nth-child(8) { transition-delay: 670ms; }


/* Ritardo manuale, quando due blocchi vicini devono entrare in sequenza. */
.mc-has-js .mc-in.mc-delay-1.is-in { transition-delay: 120ms; }

.mc-has-js .mc-in.mc-delay-2.is-in { transition-delay: 240ms; }

.mc-has-js .mc-in.mc-delay-3.is-in { transition-delay: 360ms; }

.mc-has-js .mc-in.mc-delay-4.is-in { transition-delay: 480ms; }
@keyframes mc-pulse-spot {

	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }

	70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }

	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}



/* ================================== BARRA TITOLO ARTICOLI (Flatsome) ===
   La testata degli articoli usa il markup del tema: la vestiamo come la barra
   titolo delle pagine, così tutto il sito parla la stessa lingua. */

.mc-site .blog-featured-title,
.mc-site .portfolio-featured-title {
	position: relative;
	background: var(--ml-blue-black);
}


.mc-site .blog-featured-title::after,
.mc-site .portfolio-featured-title::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(7, 31, 45, .32) 0%, transparent 24%),
		linear-gradient(95deg,
			rgba(7, 31, 45, .92) 0%,
			rgba(7, 31, 45, .78) 26%,
			rgba(7, 31, 45, .4) 56%,
			rgba(7, 31, 45, .08) 84%,
			rgba(7, 31, 45, 0) 100%);
	content: '';
	pointer-events: none;
}


.mc-site .blog-featured-title .page-title-inner,
.mc-site .portfolio-featured-title .page-title-inner {
	position: relative;
	z-index: 2;
	padding-top: clamp(80px, 9vw, 150px);
	padding-bottom: clamp(50px, 6vw, 100px);
}


.mc-site .blog-featured-title h1,
.mc-site .portfolio-featured-title h1 {
	max-width: 18ch;
	margin: 0;
	color: var(--ml-titolo-chiaro);
	font-family: var(--ml-serif);
	font-size: clamp(2.2rem, 4vw, 4rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.028em;
	text-transform: none;
}


.mc-site .blog-featured-title .is-divider,
.mc-site .portfolio-featured-title .is-divider { display: none; }


.mc-site .blog-featured-title .breadcrumbs,
.mc-site .portfolio-featured-title .breadcrumbs,
.mc-site .blog-featured-title .entry-meta,
.mc-site .blog-featured-title .entry-divider {
	color: rgba(255, 255, 255, .62);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}


.mc-site .blog-featured-title a,
.mc-site .portfolio-featured-title a { color: inherit; }
@keyframes mc-bob {

	0%, 100% { transform: translateY(0); }

	50% { transform: translateY(6px); }
}
@media (max-width: 860px) {

	.mc-site .blog-featured-title h1,
	.mc-site .portfolio-featured-title h1 { max-width: none; }
}


/* ============================================================ TITOLI ===
   Due toni, uno per tipo di fondo. L'ordine conta: prima il chiaro, poi lo
   scuro che lo sovrascrive dove serve. */

/* Fondo chiaro: blu profondo del marchio. */
.mc-site .mc-h1,
.mc-site .mc-h2,
.mc-site .mc-h3,
.mc-site .ml-display,
.mc-site .ml-title,
.mc-site .ml-title--sm,
.mc-site .mc-tl__body h3,
.mc-site .mc-path__body h3,
.mc-site .mc-serv strong,
.mc-site .mc-plate > *:first-child,
.mc-site .mc-fact strong,
.mc-site .ml-product-title,
.mc-site .ml-product-card__title {
	color: var(--ml-titolo-scuro);
}


/* Fondo scuro: tono chiaro della carta. */
.mc-site .mc-hero h1, .mc-site .mc-hero h2, .mc-site .mc-hero h3,
.mc-site .mc-hero .mc-h1, .mc-site .mc-hero .mc-h2, .mc-site .mc-hero .mc-h3,
.mc-site .mc-film h1, .mc-site .mc-film h2, .mc-site .mc-film h3,
.mc-site .mc-film .mc-h1, .mc-site .mc-film .mc-h2, .mc-site .mc-film .mc-h3,
.mc-site .mc-cta h1, .mc-site .mc-cta h2, .mc-site .mc-cta h3,
.mc-site .mc-cta .mc-h1, .mc-site .mc-cta .mc-h2, .mc-site .mc-cta .mc-h3,
.mc-site .mc-titlebar h1, .mc-site .mc-titlebar h2, .mc-site .mc-titlebar h3,
.mc-site .mc-titlebar .mc-h1, .mc-site .mc-titlebar .mc-h2,
.mc-site .mc-titlebar__title,
.mc-site .mc-projbar h1, .mc-site .mc-projbar .mc-projbar__title,
.mc-site .mc-prog-next h1, .mc-site .mc-prog-next h2, .mc-site .mc-prog-next .mc-h2,
.mc-site .ml-final-cta h1, .mc-site .ml-final-cta h2, .mc-site .ml-final-cta .ml-title,
.mc-site .ml-page-hero:not(.is-light) h1, .mc-site .ml-page-hero:not(.is-light) .ml-display,
.mc-site .ml-section--dark h1, .mc-site .ml-section--dark h2, .mc-site .ml-section--dark h3,
.mc-site .ml-section--dark .mc-h2, .mc-site .ml-section--dark .ml-title,
.mc-site .blog-featured-title h1,
.mc-site .portfolio-featured-title h1,
.mc-site .dark .mc-h1, .mc-site .dark .mc-h2, .mc-site .dark .mc-h3 {
	color: var(--ml-titolo-chiaro);
}


/* --- testata dell'articolo: ritorno al blog al posto della categoria ---- */

.mc-site .blog-featured-title .entry-meta,
.mc-site .blog-featured-title .entry-category,
.mc-site .blog-featured-title .post-meta,
.mc-site .blog-featured-title .entry-divider { display: none; }


.mc-site .blog-featured-title .page-title-inner { flex-wrap: wrap; }


.mc-site .mc-backlink {
	display: inline-flex;
	width: 100%;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	color: rgba(255, 255, 255, .78);
	font-family: var(--ml-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	transition: gap .3s var(--ml-ease), color .3s var(--ml-ease);
}


.mc-site .mc-backlink:hover { gap: 18px; color: #fff; }


.mc-site .mc-field--full { grid-column: 1 / -1; }


.mc-site .mc-field label {
	display: block;
	margin: 0 0 10px;
	color: var(--ml-titolo-scuro);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}


.mc-site .mc-field label span { color: var(--ml-green-dark); }


/* Campo tecnico: presente nell'invio, invisibile a schermo. */
.mc-site .mc-hidden-field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ================================================== MEGAMENU CATALOGO ===
   Griglia delle categorie e ricerca immediata, pensate per un blocco UX
   richiamato dal menu. */

.mc-site .mc-mega {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(260px, 24%, 340px);
	gap: clamp(26px, 3vw, 56px);
	align-items: start;
	padding: clamp(18px, 1.8vw, 30px) 0 clamp(10px, 1vw, 18px);
}


.mc-site .mc-mega__side {
	padding-left: clamp(22px, 2.4vw, 44px);
	border-left: 1px solid var(--ml-line);
}


.mc-site .mc-mega__title {
	margin: 0 0 18px;
	color: var(--ml-muted);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}


/* --- categorie ---------------------------------------------------------- */

.mc-site .mc-mega__cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 24px);
}


.mc-site .mc-mega__cats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mc-site .mc-mega__cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }


.mc-site .mc-mega__cat {
	display: block;
	overflow: hidden;
	border: 1px solid var(--ml-line);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .3s var(--ml-ease), transform .4s var(--ml-ease);
}


.mc-site .mc-mega__cat:hover {
	border-color: var(--ml-green-dark);
	transform: translateY(-3px);
}


.mc-site .mc-mega__cat-img {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: rgba(18, 33, 41, .06);
}


.mc-site .mc-mega__cat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ml-ease);
}


.mc-site .mc-mega__cat:hover .mc-mega__cat-img img { transform: scale(1.05); }


.mc-site .mc-mega__cat-body { display: block; padding: 14px 16px 16px; }


.mc-site .mc-mega__cat-kicker {
	display: block;
	margin-bottom: 4px;
	color: var(--ml-muted);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}


.mc-site .mc-mega__cat strong {
	display: block;
	font-family: var(--ml-serif);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.2;
}


.mc-site .mc-mega__cat-count {
	display: block;
	margin-top: 4px;
	color: var(--ml-muted);
	font-size: .76rem;
}


/* --- collegamenti rapidi ------------------------------------------------ */

.mc-site .mc-mega__links {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}


.mc-site .mc-mega__links li { margin: 0 0 10px; }


.mc-site .mc-mega__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	font-size: .92rem;
	text-decoration: none;
	transition: gap .25s var(--ml-ease), color .25s var(--ml-ease);
}


.mc-site .mc-mega__links a::after {
	content: '→';
	opacity: 0;
	transition: opacity .25s var(--ml-ease);
}


.mc-site .mc-mega__links a:hover { gap: 12px; color: var(--ml-green-dark); }

.mc-site .mc-mega__links a:hover::after { opacity: 1; }


/* --- ricerca ------------------------------------------------------------ */

.mc-site .mc-search { position: relative; margin: 0; }


.mc-site .mc-search__label {
	display: block;
	margin: 0 0 10px;
	color: var(--ml-muted);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}


.mc-site .mc-search__row {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid rgba(18, 33, 41, .28);
	transition: border-color .3s var(--ml-ease);
}


.mc-site .mc-search__row:focus-within { border-bottom-color: var(--ml-green-dark); }


.mc-site .mc-search input[type="search"] {
	width: 100%;
	padding: 10px 2px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ml-ink);
	font-family: var(--ml-sans);
	font-size: 1rem;
}


.mc-site .mc-search input[type="search"]:focus { box-shadow: none; outline: 0; }


.mc-site .mc-search__go {
	padding: 6px 10px;
	border: 0;
	background: none;
	color: var(--ml-green-dark);
	cursor: pointer;
	font-size: 1.1rem;
	transition: transform .3s var(--ml-ease);
}


.mc-site .mc-search__go:hover { transform: translateX(4px); }


.mc-site .mc-search__out {
	position: absolute;
	z-index: 30;
	top: calc(100% + 10px);
	right: 0;
	left: 0;
	max-height: 60vh;
	overflow-y: auto;
	border: 1px solid var(--ml-line);
	background: #fff;
	box-shadow: 0 22px 50px rgba(7, 31, 45, .14);
}


.mc-site .mc-search__list { margin: 0; padding: 0; list-style: none; }


.mc-site .mc-search__list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ml-line);
	color: inherit;
	text-decoration: none;
	transition: background .25s var(--ml-ease);
}


.mc-site .mc-search__list a:hover { background: var(--ml-paper); }


.mc-site .mc-search__thumb {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	overflow: hidden;
	background: rgba(18, 33, 41, .06);
}


.mc-site .mc-search__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.mc-site .mc-search__text strong {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
}


.mc-site .mc-search__text span {
	display: block;
	margin-top: 2px;
	color: var(--ml-muted);
	font-size: .76rem;
}


.mc-site .mc-search__empty,
.mc-site .mc-search__all {
	display: block;
	padding: 14px 16px;
	color: var(--ml-muted);
	font-size: .88rem;
}


.mc-site .mc-search__all {
	color: var(--ml-green-dark);
	font-weight: 700;
	text-decoration: none;
}
@media (max-width: 1024px) {

	.mc-site .mc-mega { grid-template-columns: minmax(0, 1fr); }

	.mc-site .mc-mega__side { padding-left: 0; border-left: 0; border-top: 1px solid var(--ml-line); padding-top: 24px; }

	.mc-site .mc-mega__cats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* Ricerca compatta, per l'intestazione: etichetta nascosta e campo più basso. */

.mc-site .mc-search--compatto .mc-search__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


.mc-site .mc-search--compatto .mc-search__row {
	padding: 0 4px 0 12px;
	border: 1px solid var(--ml-line-strong, rgba(18, 33, 41, .22));
	border-radius: 0;
	background: transparent;
}


.mc-site .mc-search--compatto .mc-search__row:focus-within {
	border-color: var(--ml-green-dark);
}


.mc-site .mc-search--compatto input[type="search"] {
	padding: 8px 12px;
	font-size: .92rem;
}


.mc-site .mc-search--compatto .mc-search__out {
	top: calc(100% + 8px);
	min-width: 320px;
}


.mc-site .mc-mega__side .mc-btn { margin-bottom: 0; }


/* Colonna informativa del megamenu showroom */

.mc-site .mc-mega__info {
	margin: 0 0 22px;
	color: var(--ml-muted);
	font-size: .92rem;
	line-height: 1.7;
}


.mc-site .mc-mega__info strong {
	display: block;
	margin-bottom: 4px;
	color: var(--ml-titolo-scuro);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}


.mc-site .mc-mega__info + .mc-mega__info { margin-top: -6px; }


/* Le schede dello showroom non hanno conteggio: più aria sotto al nome. */
.mc-site .mc-mega--showroom .mc-mega__cat-body { padding-bottom: 18px; }


/* Collegamento in linea con freccia, per chiudere un blocco di testo. */

.mc-site .mc-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	color: var(--ml-green-dark);
	font-size: .84rem;
	font-weight: 700;
	text-decoration: none;
	transition: gap .3s var(--ml-ease);
}


.mc-site .mc-link::after { content: '→'; }

.mc-site .mc-link:hover { gap: 16px; }


/* --- megamenu su portatili: sei schede devono starci --------------------- */

/* Rete di sicurezza: qualunque cosa succeda, il menu non supera lo schermo e
   resta raggiungibile. La barra di scorrimento compare solo se serve. */
.mc-site .mc-mega {
	max-height: calc(100vh - 170px);
	overflow-y: auto;
	overscroll-behavior: contain;
}


/* Lo showroom ha sei voci: immagini più basse e testo più stretto. */
.mc-site .mc-mega--showroom .mc-mega__cat-img { aspect-ratio: 16 / 9; }


.mc-site .mc-mega--showroom .mc-mega__cat-body { padding: 12px 14px 14px; }


.mc-site .mc-mega--showroom .mc-mega__cat strong { font-size: 1.1rem; }


.mc-site .mc-mega--showroom .mc-mega__cat-count {
	margin-top: 2px;
	font-size: .72rem;
	line-height: 1.4;
}
@media (max-height: 900px) {

	.mc-site .mc-mega { padding-top: 14px; padding-bottom: 10px; }


	.mc-site .mc-mega--showroom .mc-mega__cats { gap: 12px; }

	.mc-site .mc-mega--showroom .mc-mega__cat-img { aspect-ratio: 2 / 1; }

	.mc-site .mc-mega--showroom .mc-mega__cat strong { font-size: 1rem; }

	.mc-site .mc-mega--showroom .mc-mega__cat-count { display: none; }

	.mc-site .mc-mega__info { margin-bottom: 14px; font-size: .86rem; line-height: 1.6; }

	.mc-site .mc-mega__links li { margin-bottom: 6px; }

	.mc-site .mc-mega__links a { font-size: .86rem; }
}
@media (max-height: 760px) {

	.mc-site .mc-mega--showroom .mc-mega__cat-img { aspect-ratio: 5 / 2; }

	.mc-site .mc-mega__title { margin-bottom: 10px; }
}


/* ================================================================ PIEDE ===
   Blocco UX richiamato nel footer del tema. Stessa lingua del resto: fondo
   blu profondo, filetti sottili, titolo serif, etichette in maiuscoletto. */

.mc-site .mc-foot {
	padding: clamp(50px, 6vw, 90px) 0 0;
	background: var(--ml-blue-black);
	color: rgba(255, 255, 255, .72);
	font-size: .94rem;
	line-height: 1.7;
}


.mc-site .mc-foot__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .88fr));
	gap: clamp(26px, 3.4vw, 60px);
	padding-bottom: clamp(36px, 4vw, 60px);
}


.mc-site .mc-foot__claim {
	max-width: 22ch;
	margin: 0 0 24px;
	color: var(--ml-titolo-chiaro);
	font-family: var(--ml-serif);
	font-size: clamp(1.3rem, 1.7vw, 1.7rem);
	font-weight: 400;
	line-height: 1.25;
}


.mc-site .mc-foot h2,
.mc-site .mc-foot h3,
.mc-site .mc-foot__title {
	margin: 0 0 14px;
	color: #fff;
	font-family: var(--ml-sans);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}


.mc-site .mc-foot p { margin: 0 0 12px; }


.mc-site .mc-foot ul {
	margin: 0;
	padding: 0;
	list-style: none;
}


.mc-site .mc-foot li { margin: 0 0 9px; }


.mc-site .mc-foot a {
	color: inherit;
	text-decoration: none;
	transition: color .25s var(--ml-ease);
}


.mc-site .mc-foot a:hover { color: #fff; }


.mc-site .mc-foot__links a {
	position: relative;
	display: inline-block;
}


.mc-site .mc-foot__links a::after {
	position: absolute;
	right: 0;
	bottom: -3px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: '';
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .35s var(--ml-ease);
}


.mc-site .mc-foot__links a:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}


/* Riga dei contatti in evidenza */

.mc-site .mc-foot__strong {
	display: block;
	margin-bottom: 2px;
	color: var(--ml-titolo-chiaro);
	font-family: var(--ml-serif);
	font-size: 1.25rem;
}


/* Filo blu-verde come nelle annotazioni: firma discreta del progetto. */
.mc-site .mc-foot__rule {
	height: 2px;
	background: linear-gradient(90deg, var(--ml-blue), var(--ml-green));
	opacity: .8;
}


.mc-site .mc-foot__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 22px 0 26px;
	color: rgba(255, 255, 255, .5);
	font-size: .78rem;
}


.mc-site .mc-foot__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}


.mc-site .mc-foot__bottom li { margin: 0; }


.mc-site .mc-foot__social {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}


.mc-site .mc-foot__social a {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	font-size: .8rem;
	transition: border-color .3s var(--ml-ease), background .3s var(--ml-ease);
}


.mc-site .mc-foot__social a:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
}
@media (max-width: 1024px) {

	.mc-site .mc-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {

	.mc-site .mc-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }

	.mc-site .mc-foot__bottom { flex-direction: column; align-items: flex-start; }
}


/* ======================================================= CONTATTI RAPIDI ===
   Pulsante flottante che apre le voci a ventaglio, lungo un quarto di
   circonferenza verso l'alto e verso sinistra. */

.mc-site .mc-quick {
	position: fixed;
	right: clamp(16px, 2vw, 30px);
	bottom: clamp(16px, 2vw, 30px);
	z-index: 120;
	height: 60px;
	isolation: isolate;
}


.mc-site .mc-quick__toggle {
	position: relative;
	z-index: 2;
	display: inline-flex;
	height: 60px;
	align-items: center;
	gap: 10px;
	padding: 0 22px 0 18px;
	border: 0;
	border-radius: 100px;
	background: var(--ml-green-dark);
	box-shadow: 0 14px 34px rgba(7, 31, 45, .3);
	color: #fff;
	cursor: pointer;
	font-family: var(--ml-sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .35s var(--ml-ease), transform .45s var(--ml-ease), padding .4s var(--ml-ease);
}


.mc-site .mc-quick__toggle:hover { transform: translateY(-2px); }


.mc-site .mc-quick__icon { display: grid; place-items: center; }

.mc-site .mc-quick__icon svg { width: 24px; height: 24px; }


/* Aperto: la pastiglia torna cerchio e l'icona diventa una croce. */
.mc-site .mc-quick.is-open .mc-quick__toggle {
	width: 60px;
	padding: 0;
	justify-content: center;
	background: var(--ml-blue-black);
}


.mc-site .mc-quick.is-open .mc-quick__icon,
.mc-site .mc-quick.is-open .mc-quick__testo { display: none; }


.mc-site .mc-quick__close { display: none; }


.mc-site .mc-quick.is-open .mc-quick__close {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}


.mc-site .mc-quick__close::before,
.mc-site .mc-quick__close::after {
	position: absolute;
	top: 9px;
	left: 0;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	content: '';
}


.mc-site .mc-quick__close::before { transform: rotate(45deg); }

.mc-site .mc-quick__close::after { transform: rotate(-45deg); }


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

.mc-site .mc-quick__list {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}


.mc-site .mc-quick__item {
	--mc-ang: calc(180deg + (90deg / (var(--mc-n) - 1)) * var(--mc-i));
	--mc-r: 112px;
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transform: rotate(var(--mc-ang)) translate(0) rotate(calc(var(--mc-ang) * -1));
	transition:
		transform .5s var(--ml-ease),
		opacity .3s var(--ml-ease);
	transition-delay: calc(var(--mc-i) * 40ms);
}


.mc-site .mc-quick.is-open .mc-quick__item {
	opacity: 1;
	pointer-events: auto;
	transform: rotate(var(--mc-ang)) translate(var(--mc-r)) rotate(calc(var(--mc-ang) * -1));
}


.mc-site .mc-quick__item a {
	display: grid;
	width: 52px;
	height: 52px;
	margin: 4px;
	place-items: center;
	border: 1px solid var(--ml-line);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 24px rgba(7, 31, 45, .18);
	color: var(--ml-blue-deep);
	text-decoration: none;
	transition: background .3s var(--ml-ease), color .3s var(--ml-ease), transform .3s var(--ml-ease);
}


.mc-site .mc-quick__item a:hover {
	background: var(--ml-blue-deep);
	color: #fff;
	transform: scale(1.08);
}


.mc-site .mc-quick__item svg { width: 22px; height: 22px; }


/* L'etichetta compare a lato, così si capisce cosa fa ogni cerchio. */
.mc-site .mc-quick__label {
	position: absolute;
	right: calc(100% + 10px);
	padding: 5px 10px;
	border-radius: 2px;
	background: var(--ml-blue-black);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s var(--ml-ease);
}


.mc-site .mc-quick__item a:hover .mc-quick__label,
.mc-site .mc-quick__item a:focus-visible .mc-quick__label { opacity: 1; }
@media (max-width: 600px) {

	.mc-site .mc-quick__item { --mc-r: 96px; }

	.mc-site .mc-quick__label { display: none; }

	.mc-site .mc-quick__testo { display: none; }

	.mc-site .mc-quick__toggle { width: 60px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {

	.mc-site .mc-quick__item,
	.mc-site .mc-quick__toggle { transition: none; }
}


/* ========================================================= INTESTAZIONE ===
   Ritocchi alla testata di Flatsome: fascia superiore nei colori del marchio,
   sottolineatura sfumata sulle voci, campo di ricerca allineato al resto.
   Nessuna struttura toccata: solo la resa. */

.mc-site .header-top {
	background-color: var(--ml-blue-black) !important;
	border-bottom: 0;
	font-size: .74rem;
	letter-spacing: .06em;
}


.mc-site .header-top a { color: rgba(255, 255, 255, .78); }

.mc-site .header-top a:hover { color: #fff; }


/* Un filo sfumato sotto la testata, come nelle annotazioni di sezione. */
.mc-site .header-wrapper::after,
.mc-site #header .header-bg-container + .header-bottom,
.mc-site .header-main::after {
	display: block;
	height: 2px;
	background: linear-gradient(90deg, var(--ml-blue), var(--ml-green));
	content: '';
	opacity: .9;
}


/* Voci del menu: sottolineatura che cresce da sinistra. */
.mc-site .header-nav .nav > li > a {
	position: relative;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
}


.mc-site .header-nav .nav > li > a::before {
	position: absolute;
	right: 0;
	bottom: 6px;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--ml-blue), var(--ml-green));
	content: '';
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--ml-ease);
}


.mc-site .header-nav .nav > li > a:hover::before,
.mc-site .header-nav .nav > li.current-menu-item > a::before,
.mc-site .header-nav .nav > li.current-menu-parent > a::before { transform: scaleX(1); }


/* Il campo di ricerca nella testata non deve sembrare un corpo estraneo. */
.mc-site .header .mc-search { min-width: clamp(180px, 20vw, 360px); }

.mc-site .header .mc-search--compatto .mc-search__row { background: var(--ml-paper); }

.mc-site .header .mc-search__out { border-radius: 0; }


/* Pulsante di contatto nella testata */
.mc-site .header .mc-btn {
	min-height: 44px;
	margin: 0;
	padding: 12px 20px;
	font-size: .72rem;
}
@media (max-width: 849px) {

	.mc-site .header .mc-search { min-width: 0; width: 100%; }
}


/* Niente angoli tondi nella testata: il sito parla una lingua squadrata. */

.mc-site .header .button,
.mc-site .header .mc-btn,
.mc-site .header input,
.mc-site .header .mc-search__row,
.mc-site .header .mc-search__out {
	border-radius: 0 !important;
}


.mc-site .header .mc-search__go {
	border-radius: 0;
	padding: 6px 8px;
}


/* --- allineamento degli elementi nella testata -------------------------- */
/* I componenti nascono per stare in una pagina, dove hanno margini propri.
   Nella barra devono stare tutti sulla stessa linea e alla stessa altezza. */

/* Solo le voci che contengono i nostri componenti: mettere inline-flex su
   tutte le voci sposta le tendine del tema. Un elemento in posizione assoluta
   dentro un contenitore flex, se non ha tutti gli offset dichiarati, parte
   dalla posizione decisa da align-items — cioè il centro — e la tendina si
   apre centrata sulla voce invece che sotto. */
.mc-site .header-nav > li.html:not(.menu-item-has-children),
.mc-site .header-nav > li.header-block:not(.menu-item-has-children) {
	display: inline-flex;
	align-items: center;
	margin-top: 0;
	margin-bottom: 0;
}


.mc-site .header-nav > li.html:not(.menu-item-has-children) > div,
.mc-site .header-nav > li.header-block:not(.menu-item-has-children) > .header-block-block-1 {
	display: flex;
	align-items: center;
}


/* Le voci con tendina restano come le imposta il tema. */
.mc-site .header-nav > li.menu-item-has-children { position: relative; }


.mc-site .header .mc-btn,
.mc-site .header .button {
	height: 56px;
	min-height: 44px;
	align-items: center;
	align-content: center;
	margin: 0;
}


.mc-site .header .header-block a.button.mc-btn { margin-bottom: 0; }


.mc-site .header .nav-right {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}


.mc-site .header .mc-search,
.mc-site .header .mc-search__row {
	margin: 0;
}


/* Il campo torna alla sua misura naturale: ad allinearlo al pulsante basta
   la centratura verticale, non serve pareggiare le altezze. */
.mc-site .header .mc-search__label { margin: 0; }


/* --- ricerca: fondo bianco e testata più alta su telefono --------------- */

.mc-site .mc-search--compatto .mc-search__row,
.mc-site .header .mc-search--compatto .mc-search__row {
	background: #fff;
}
@media (max-width: 580px) {

	.mc-site .mc-titlebar {
		--mc-titlebar-top: 10px;
		--mc-titlebar-bottom: 0px;
	}
}
@media (max-height: 880px) {

	.mc-site .mc-mega--showroom .mc-mega__cats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px;
	}


	.mc-site .mc-mega--showroom .mc-mega__cat {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		align-items: center;
	}


	.mc-site .mc-mega--showroom .mc-mega__cat-img {
		aspect-ratio: 1;
		height: 100%;
	}


	.mc-site .mc-mega--showroom .mc-mega__cat-body { padding: 10px 14px; }


	.mc-site .mc-mega--showroom .mc-mega__cat strong { font-size: 1.05rem; }


	.mc-site .mc-mega--showroom .mc-mega__cat-count {
		display: block;
		margin-top: 1px;
		font-size: .7rem;
		line-height: 1.35;
	}


	/* A questo punto ci sta: niente scorrimento interno. */
	.mc-site .mc-mega--showroom { max-height: none; overflow: visible; }
}
@media (max-height: 700px) {

	.mc-site .mc-mega--showroom .mc-mega__cat-count { display: none; }

	.mc-site .mc-mega--showroom .mc-mega__cat { grid-template-columns: 68px minmax(0, 1fr); }

	.mc-site .mc-mega__info { margin-bottom: 10px; }
}


/* Rete di sicurezza sulle tendine: qualunque cosa succeda a monte, restano
   ancorate sotto la voce di menu. */

.mc-site .header-nav .nav-dropdown {
	top: 100%;
	bottom: auto;
}


.mc-site .header-nav .nav-dropdown-has-arrow::after,
.mc-site .header-nav .nav-dropdown-has-arrow::before { bottom: auto; }


/* --- assorbite dalle personalizzazioni di progetto ---------------------- */

/* Sfondo della lightbox del tema, in tinta con la carta. */
.mfp-content { background: var(--ml-paper); }
@media (max-width: 580px) {

	.mc-site .mc-note { display: none; }
}


/* Numerazione delle sezioni, spegnibile dalle impostazioni. */
.mc-senza-numeri .mc-note::after { display: none; }


/* ============================================ RICERCA NELLA TESTATA ===
   Da schermo largo: campo aperto. Da telefono: una lente quadrata che apre
   il campo a tutta larghezza. Un campo di ricerca largo due dita, con il
   segnaposto troncato, non serve a nessuno. */

.mc-search-wrap { position: relative; }


.mc-search__trigger,
.mc-search__chiudi { display: none; }


.mc-site .mc-search__trigger {
	display: none;
	width: 48px;
	height: 48px;
	padding: 0;
	min-height: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ml-line-strong, rgba(18, 33, 41, .22));
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var(--ml-blue-deep);
	cursor: pointer;
	transition: background .3s var(--ml-ease), color .3s var(--ml-ease);
}


.mc-site .mc-search__trigger svg { width: 20px; height: 20px; }


.mc-site .mc-search__trigger:hover {
	background: var(--ml-blue-deep);
	color: #fff;
}
@media (max-width: 849px) {

	.mc-site .mc-search-wrap--compatto .mc-search__trigger { display: flex; }


	.mc-site .mc-search-wrap--compatto .mc-search { display: none; }


	.mc-site .mc-search-wrap--compatto.is-open .mc-search {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 260;
		display: block;
		padding: 18px 60px 18px 18px;
		background: #fff;
		box-shadow: 0 18px 40px rgba(7, 31, 45, .18);
	}


	.mc-site .mc-search-wrap--compatto.is-open .mc-search__row {
		height: 52px;
		border-width: 0 0 1px;
	}


	.mc-site .mc-search-wrap--compatto.is-open input[type="search"] { font-size: 1.05rem; }


	.mc-site .mc-search-wrap--compatto.is-open .mc-search__chiudi {
		position: absolute;
		top: 50%;
		right: 14px;
		display: grid;
		width: 40px;
		height: 40px;
		min-height: 0;
		padding: 0;
		place-items: center;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: var(--ml-ink);
		cursor: pointer;
		font-size: 1.6rem;
		line-height: 1;
		transform: translateY(-50%);
	}


	.mc-site .mc-search-wrap--compatto.is-open .mc-search__out {
		position: static;
		margin-top: 12px;
		max-height: 60vh;
		box-shadow: none;
	}


	/* Velo dietro il campo aperto. */
	body.mc-search-open::before {
		position: fixed;
		inset: 0;
		z-index: 250;
		background: rgba(7, 31, 45, .45);
		content: '';
	}
}


/* --- pulsante del menu e chiusure: squadrati e centrati ------------------ */

.mc-site .header .mobile-nav .button,
.mc-site .header a.button.icon,
.mc-site .off-canvas-toggle,
.mc-site .header .menu-item-has-block > a {
	border-radius: 0 !important;
}


.mc-site .header a.button.icon,
.mc-site .off-canvas-toggle {
	display: inline-flex;
	width: 48px;
	height: 48px;
	min-height: 0;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
}