.mtd { --mtd-accent: #e30613; position: relative; display: inline-block; z-index: 50; }
/* Dentro l'header: parte dopo il logo (che occupa i primi 250px a sinistra). */
.mtd--header { margin-left: 250px; }

.mtd__btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 15px; border: 0; border-radius: 0; background: transparent;
	font: inherit; font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
	color: #333; cursor: pointer;
}
.mtd__btn:hover, .mtd.is-open .mtd__btn { color: var(--mtd-accent); }
.mtd__btn:focus-visible { outline: 3px solid var(--mtd-accent); outline-offset: 2px; }

.mtd__chev {
	width: 8px; height: 8px; margin-top: -4px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease;
}
.mtd.is-open .mtd__chev { transform: rotate(-135deg); margin-top: 4px; }

.mtd__panel {
	position: absolute; top: 100%; left: 0; min-width: 240px;
	margin: 0; padding: 8px 0; list-style: none;
	background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	border-top: 3px solid var(--mtd-accent);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.mtd.is-open .mtd__panel { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
	.mtd:hover .mtd__panel { opacity: 1; visibility: visible; transform: none; }
	.mtd:hover .mtd__btn { color: var(--mtd-accent); }
}

.mtd__panel li { margin: 0; padding: 0; list-style: none; }
.mtd__panel a {
	display: block; padding: 10px 20px; color: #333; text-decoration: none;
	font-size: 15px; line-height: 1.3; border-left: 3px solid transparent;
}
.mtd__panel a:hover, .mtd__panel a:focus-visible { background: #f2f2f2; color: var(--mtd-accent); border-left-color: var(--mtd-accent); outline: 0; }

/* Versione per telefono e tablet (verticale): visibile solo dove l'header perde Menu, Contatti e Preventivo (sotto i 992px). */
.mtd--mobile { display: none; }
@media (max-width: 992px) {
	.mtd--mobile { display: inline-block; }
	.mtd--mobile .mtd__panel { left: auto; right: 0; }
}
