/* Menu Tiles – Stili extra */
@font-face { font-family: "MTX DSEG7"; src: url("DSEG7Classic-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MTX Share Tech"; src: url("share-tech-mono-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MTX Oswald"; src: url("oswald-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* =================================================================
 * 32 DISPLAY ROSSO (old digital): plancia scura, cifre a 7 segmenti
 * con le cifre spente dietro, vetro e profondità
 * ================================================================= */
.mtl--segment {
	counter-reset: mtx 0;
	--mtl-gap: 18px;
	padding: 22px; border-radius: 18px;
	background: radial-gradient(ellipse at 50% 0, #1a1a1d, #0b0b0c 70%);
	box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 20px 40px -20px rgba(0,0,0,.6);
	font-family: "MTX Share Tech", ui-monospace, "Courier New", monospace;
}
.mtl--segment .mtl-item {
	counter-increment: mtx;
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; gap: 10px;
	padding: 86px 16px 14px;
	border-radius: 12px; border: 1px solid #2a2a2e;
	background: linear-gradient(180deg, #19191c, #121214);
	color: #9b948e;
	box-shadow:
		0 1px 0 rgba(255,255,255,.07) inset,
		0 -3px 0 rgba(0,0,0,.55) inset,
		0 2px 0 #000,
		0 14px 26px -12px rgba(0,0,0,.85);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* finestra del display con il numero della voce */
.mtl--segment .mtl-item::before,
.mtl--segment .mtl-item::after {
	position: absolute; top: 16px; left: 16px;
	min-width: 96px; padding: 9px 12px; border-radius: 8px;
	font: 400 34px/1 "MTX DSEG7", "MTX Share Tech", monospace; letter-spacing: .04em; text-align: right;
}
.mtl--segment .mtl-item::before {
	content: counter(mtx, decimal-leading-zero);
	color: #ff3b22;
	text-shadow: 0 0 6px rgba(255,59,34,.7), 0 0 18px rgba(255,59,34,.35);
	background:
		linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 50%),
		#0a0505;
	box-shadow: 0 3px 8px rgba(0,0,0,.8) inset, 0 0 0 1px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.07);
}
.mtl--segment .mtl-item::after { content: "88"; color: rgba(255,59,34,.09); pointer-events: none; }
.mtl--segment .mtl-item:hover {
	transform: translateY(-3px);
	border-color: #4a1d16;
	box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 -3px 0 rgba(0,0,0,.55) inset, 0 2px 0 #000, 0 22px 34px -14px rgba(0,0,0,.9), 0 0 24px -6px rgba(255,59,34,.35);
}
.mtl--segment .mtl-item:hover::before { color: #ff5a3c; text-shadow: 0 0 8px rgba(255,90,60,.9), 0 0 26px rgba(255,59,34,.6); }
.mtl--segment .mtl-body { display: flex; align-items: center; gap: 8px; }
.mtl--segment .mtl-title { margin: 0; font: 700 13px/1.35 "MTX Share Tech", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #ff9a3c; }
.mtl--segment .mtl-title a { color: inherit; text-decoration: none; }
.mtl--segment .mtl-title a::after { content: ""; position: absolute; inset: 0; } /* tutta la piastrella cliccabile */
.mtl--segment .mtl-title a:focus-visible { outline: 2px solid #ff9a3c; outline-offset: 3px; }
.mtl--segment .mtl-desc { font-size: 13px; line-height: 1.45; color: #9b948e; margin: 0; }
.mtl--segment .mtl-icon { color: #ff3b22; filter: drop-shadow(0 0 4px rgba(255,59,34,.6)); }
.mtl--segment .mtl-media { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.8) inset; background: #0a0505; }
.mtl--segment .mtl-media img, .mtl--segment .mtl-ph { filter: grayscale(1) sepia(1) hue-rotate(-40deg) saturate(3.5) brightness(.75) contrast(1.15); }
.mtl--segment .mtl-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.mtl--segment .mtl-rel { position: relative; z-index: 1; font-size: 12px; letter-spacing: .06em; }
.mtl--segment .mtl-rel a { color: #b9b1aa; }
.mtl--segment .mtl-rel a:hover { color: #ff9a3c; }
.mtl--segment.mtl--row .mtl-item { padding-top: 16px; padding-left: 128px; min-height: 72px; justify-content: center; }

/* =================================================================
 * 33 PULSANTI ETICHETTA: riquadro bianco con l'icona + etichetta
 * colorata, testo maiuscolo spaziato, ombra morbida in rilievo
 * ================================================================= */
.mtl--etichetta { --mtl-gap: 22px 40px; }
.mtl--etichetta .mtl-item {
	--c: #1874c4;
	position: relative;
	display: flex; align-items: stretch; min-height: 46px;
	padding: 0; border: 0; border-radius: 4px; overflow: visible;
	background: var(--c); color: #fff;
	box-shadow: 0 2px 0 rgba(0,0,0,.12), 4px 6px 10px -2px rgba(0,0,0,.28), 10px 12px 18px -10px rgba(0,0,0,.25);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mtl--etichetta .mtl-item:nth-child(12n+2)  { --c: #8e2a8c; }
.mtl--etichetta .mtl-item:nth-child(12n+3)  { --c: #df78a6; }
.mtl--etichetta .mtl-item:nth-child(12n+4)  { --c: #4a3fcf; }
.mtl--etichetta .mtl-item:nth-child(12n+5)  { --c: #9d9d9d; }
.mtl--etichetta .mtl-item:nth-child(12n+6)  { --c: #ec7147; }
.mtl--etichetta .mtl-item:nth-child(12n+7)  { --c: #5bbfb0; }
.mtl--etichetta .mtl-item:nth-child(12n+8)  { --c: #df8ee0; }
.mtl--etichetta .mtl-item:nth-child(12n+9)  { --c: #ef524d; }
.mtl--etichetta .mtl-item:nth-child(12n+10) { --c: #63dedb; }
.mtl--etichetta .mtl-item:nth-child(12n+11) { --c: #3fa66a; }
.mtl--etichetta .mtl-item:nth-child(12n+12) { --c: #9b8572; }
.mtl--etichetta .mtl-item:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 3px 0 rgba(0,0,0,.12), 6px 10px 16px -2px rgba(0,0,0,.3), 14px 18px 24px -12px rgba(0,0,0,.28); }
.mtl--etichetta .mtl-item:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.12), 2px 3px 6px -2px rgba(0,0,0,.3); }
.mtl--etichetta .mtl-media { display: none; }
.mtl--etichetta .mtl-body { flex: 1; display: flex; align-items: stretch; padding: 0; }
/* riquadro bianco a sinistra: icona del menu, oppure una freccia se le icone sono spente */
.mtl--etichetta .mtl-icon,
.mtl--etichetta.mtl--no-icon .mtl-body::before {
	flex: none; width: 46px; display: grid; place-items: center;
	background: #fff; color: var(--c);
	border-radius: 4px 0 0 4px;
	box-shadow: 2px 0 0 rgba(0,0,0,.06), inset 0 -2px 0 rgba(0,0,0,.05);
}
.mtl--etichetta .mtl-icon .dashicons { width: 22px; height: 22px; font-size: 22px; }
.mtl--etichetta.mtl--no-icon .mtl-body::before { content: "»"; font: 700 22px/1 "MTX Oswald", sans-serif; }
.mtl--etichetta .mtl-title {
	flex: 1; margin: 0; display: flex; align-items: center; justify-content: center;
	padding: 8px 14px; text-align: center;
	font: 500 15px/1.2 "MTX Oswald", "Roboto Condensed", "Arial Narrow", sans-serif;
	letter-spacing: .18em; text-transform: uppercase; color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.mtl--etichetta .mtl-title a { color: inherit; text-decoration: none; }
.mtl--etichetta .mtl-title a::after { content: ""; position: absolute; inset: 0; }
.mtl--etichetta .mtl-title a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mtl--etichetta .mtl-desc { display: none; }
.mtl--etichetta .mtl-rel { display: none; }

/* =================================================================
 * Miniature nel selettore di Aspetto › Menu Tiles
 * ================================================================= */
.mtl-thumb--segment { background: #0b0b0c; border-color: #2a2a2e; }
.mtl-thumb--segment i, .mtl-thumb--segment i:nth-child(n) {
	border: 1px solid #2a2a2e; border-radius: 5px;
	background:
		linear-gradient(#ff9a3c, #ff9a3c) 6px 6px / 40% 2px no-repeat,
		/* un «8» rosso: 3 segmenti orizzontali + 4 verticali */
		linear-gradient(#ff3b22, #ff3b22) 50% 34% / 34% 3px no-repeat,
		linear-gradient(#ff3b22, #ff3b22) 50% 56% / 34% 3px no-repeat,
		linear-gradient(#ff3b22, #ff3b22) 50% 78% / 34% 3px no-repeat,
		linear-gradient(#ff3b22, #ff3b22) 31% 45% / 3px 20% no-repeat,
		linear-gradient(#ff3b22, #ff3b22) 69% 45% / 3px 20% no-repeat,
		linear-gradient(#ff3b22, #ff3b22) 31% 67% / 3px 20% no-repeat,
		linear-gradient(#ff3b22, #ff3b22) 69% 67% / 3px 20% no-repeat,
		#141416;
	box-shadow: inset 0 0 10px rgba(255,59,34,.25);
}
.mtl-thumb--etichetta { flex-direction: column; justify-content: center; gap: 6px; background: linear-gradient(135deg, #f2f2f2, #dcdcdc); }
.mtl-thumb--etichetta i, .mtl-thumb--etichetta i:nth-child(n) {
	flex: none; height: 13px; border: 0; border-radius: 2px;
	background: linear-gradient(90deg, #fff 0 22%, #1874c4 22%);
	box-shadow: 2px 3px 4px rgba(0,0,0,.25);
}
.mtl-thumb--etichetta i:nth-child(2) { background: linear-gradient(90deg, #fff 0 22%, #8e2a8c 22%); }
.mtl-thumb--etichetta i:nth-child(3) { background: linear-gradient(90deg, #fff 0 22%, #ef524d 22%); }

@media (prefers-reduced-motion: reduce) {
	.mtl--segment .mtl-item, .mtl--etichetta .mtl-item { transition: none; }
}

/* =================================================================
 * 34-36 PULSANTI CON ICONA: Linguetta, Sottolineato, Scuro con freccia
 * colore della voce in --c, a giro su 10 colori
 * ================================================================= */
.mtl--linguetta .mtl-item, .mtl--sottolineato .mtl-item, .mtl--freccia .mtl-item { --c: #f7a046; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+2)  { --c: #22b5f0; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+3)  { --c: #c17ad6; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+4)  { --c: #2fb562; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+5)  { --c: #ea5a5f; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+6)  { --c: #1aa9a6; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+7)  { --c: #46b07f; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+8)  { --c: #2672c9; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+9)  { --c: #a65fc2; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:nth-child(10n+10) { --c: #f57b4f; }

/* struttura comune */
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) { --mtl-gap: 16px 28px; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item {
	position: relative; display: flex; align-items: stretch; min-height: 44px;
	padding: 0; border: 0; overflow: visible; background: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-item:hover { transform: translateY(-2px); }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-media,
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-desc,
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-rel { display: none; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-body { flex: 1; display: flex; align-items: stretch; padding: 0; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-icon,
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia).mtl--no-icon .mtl-body::before {
	flex: none; width: 44px; display: grid; place-items: center;
}
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia).mtl--no-icon .mtl-body::before { content: "▸"; font-size: 18px; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-icon .dashicons { width: 20px; height: 20px; font-size: 20px; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-title {
	flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; padding: 8px 14px; text-align: center;
}
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-title a { color: inherit; text-decoration: none; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-title a::after { content: ""; position: absolute; inset: 0; }
:is(.mtl--linguetta, .mtl--sottolineato, .mtl--freccia) .mtl-title a:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

/* Linguetta: icona su linguetta tonda colorata, corpo bianco, bordo colorato a destra */
.mtl--linguetta .mtl-item {
	border-radius: 22px 3px 3px 22px; border-right: 4px solid var(--c);
	box-shadow: 0 1px 0 #fff inset, 0 2px 0 rgba(0,0,0,.06), 3px 5px 10px -3px rgba(0,0,0,.22);
}
.mtl--linguetta .mtl-icon, .mtl--linguetta.mtl--no-icon .mtl-body::before {
	background: var(--c); color: #fff; border-radius: 22px 0 0 22px;
	box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.25), 3px 0 0 rgba(0,0,0,.08);
}
.mtl--linguetta .mtl-title { font: 400 16px/1.2 "MTX Oswald", "Roboto Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a8fa8; }
.mtl--linguetta .mtl-item:hover .mtl-title { color: var(--c); }

/* Sottolineato: riquadro scuro con icona colorata, corpo chiaro, riga colorata sotto */
.mtl--sottolineato .mtl-item {
	border-radius: 3px; background: #fff;
	box-shadow: inset 0 -4px 0 var(--c), 0 1px 0 rgba(0,0,0,.05), 2px 6px 10px -4px rgba(0,0,0,.2);
}
.mtl--sottolineato .mtl-icon, .mtl--sottolineato.mtl--no-icon .mtl-body::before {
	margin-bottom: 4px; background: #3b3f4c; color: var(--c); border-radius: 3px 0 0 0;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.25);
}
.mtl--sottolineato .mtl-title { padding-bottom: 12px; font: 400 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #868b9e; }
.mtl--sottolineato .mtl-item:hover { box-shadow: inset 0 -6px 0 var(--c), 0 1px 0 rgba(0,0,0,.05), 3px 10px 14px -6px rgba(0,0,0,.25); }

/* Scuro con freccia: icona su colore, corpo ardesia, freccetta colorata a destra */
.mtl--freccia .mtl-item {
	border-radius: 3px; background: linear-gradient(180deg, #4a4e5c, #3d404c); color: #fff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 0 rgba(0,0,0,.25), 3px 6px 12px -4px rgba(0,0,0,.35);
}
.mtl--freccia .mtl-item::before { /* freccetta che entra dal bordo destro */
	content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	border: 9px solid transparent; border-right-color: var(--c); border-left-width: 0;
	filter: drop-shadow(-1px 0 1px rgba(0,0,0,.25));
}
.mtl--freccia .mtl-icon, .mtl--freccia.mtl--no-icon .mtl-body::before {
	background: var(--c); color: #2c2f38; border-radius: 3px 0 0 3px;
	box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.15);
}
.mtl--freccia .mtl-title { font: 500 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.mtl--freccia .mtl-item:hover::before { border-width: 11px; border-left-width: 0; }

/* miniature */
.mtl-thumb--linguetta, .mtl-thumb--sottolineato, .mtl-thumb--freccia { flex-direction: column; justify-content: center; gap: 6px; background: #e4e3ef; }
:is(.mtl-thumb--linguetta, .mtl-thumb--sottolineato, .mtl-thumb--freccia) i:nth-child(n) { flex: none; height: 13px; border: 0; box-shadow: 1px 2px 3px rgba(0,0,0,.2); }
.mtl-thumb--linguetta i:nth-child(n) { border-radius: 7px 2px 2px 7px; background: linear-gradient(90deg, #f7a046 0 20%, #fff 20% 94%, #f7a046 94%); }
.mtl-thumb--linguetta i:nth-child(2) { background: linear-gradient(90deg, #22b5f0 0 20%, #fff 20% 94%, #22b5f0 94%); }
.mtl-thumb--linguetta i:nth-child(3) { background: linear-gradient(90deg, #2fb562 0 20%, #fff 20% 94%, #2fb562 94%); }
.mtl-thumb--sottolineato i:nth-child(n) { border-radius: 2px; background: linear-gradient(0deg, #f7a046 0 3px, transparent 3px), linear-gradient(90deg, #3b3f4c 0 20%, #fff 20%); }
.mtl-thumb--sottolineato i:nth-child(2) { background: linear-gradient(0deg, #22b5f0 0 3px, transparent 3px), linear-gradient(90deg, #3b3f4c 0 20%, #fff 20%); }
.mtl-thumb--sottolineato i:nth-child(3) { background: linear-gradient(0deg, #2fb562 0 3px, transparent 3px), linear-gradient(90deg, #3b3f4c 0 20%, #fff 20%); }
.mtl-thumb--freccia i:nth-child(n) { border-radius: 2px; background: linear-gradient(90deg, #f7a046 0 20%, #444855 20% 94%, #f7a046 94%); }
.mtl-thumb--freccia i:nth-child(2) { background: linear-gradient(90deg, #22b5f0 0 20%, #444855 20% 94%, #22b5f0 94%); }
.mtl-thumb--freccia i:nth-child(3) { background: linear-gradient(90deg, #2fb562 0 20%, #444855 20% 94%, #2fb562 94%); }

/* =================================================================
 * 37-40 Capsula, Nastro, Cucito, Numerato
 * ================================================================= */
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item { --c: #ec2f8f; --c2: #ff7ab8; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item:nth-child(6n+2) { --c: #1fa7e8; --c2: #66d3ff; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item:nth-child(6n+3) { --c: #e21e2c; --c2: #ff6670; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item:nth-child(6n+4) { --c: #f4a300; --c2: #ffd166; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item:nth-child(6n+5) { --c: #8d4be0; --c2: #c08cff; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item:nth-child(6n+6) { --c: #0f9e95; --c2: #5fe0d6; }
.mtl--capsula .mtl-item:nth-child(6n+1) { --c: #0e8f88; --c2: #2c6fd6; }

:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) { --mtl-gap: 22px 32px; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item {
	position: relative; display: flex; align-items: center; min-height: 50px;
	padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible;
	transition: transform .15s ease, filter .15s ease;
}
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item:hover { transform: translateY(-2px); filter: brightness(1.05); }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) :is(.mtl-media, .mtl-desc, .mtl-rel) { display: none; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-body { flex: 1; display: flex; align-items: center; padding: 0; min-height: inherit; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-title { margin: 0; flex: 1; text-align: center; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-title a { color: inherit; text-decoration: none; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-title a::after { content: ""; position: absolute; inset: 0; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-title a:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
:is(.mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-icon .dashicons { width: 22px; height: 22px; font-size: 22px; }

/* Capsula: pillola sfumata dentro un anello, cerchio con l'icona a destra */
.mtl--capsula .mtl-item {
	border-radius: 999px; padding: 4px; background: #fff;
	box-shadow: 0 0 0 3px var(--c), 0 6px 14px -6px rgba(0,0,0,.35);
}
.mtl--capsula .mtl-body { flex-direction: row-reverse; gap: 8px; }
.mtl--capsula .mtl-title {
	align-self: stretch; display: flex; align-items: center; justify-content: center;
	padding: 10px 22px; border-radius: 999px;
	background: linear-gradient(90deg, var(--c), var(--c2));
	box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.15), 4px 0 8px -2px rgba(0,0,0,.25);
	font: 700 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
.mtl--capsula .mtl-icon, .mtl--capsula.mtl--no-icon .mtl-body::before {
	flex: none; width: 36px; height: 36px; margin-right: 6px; border-radius: 50%; display: grid; place-items: center;
	background: linear-gradient(135deg, var(--c2), var(--c)); color: #fff;
	box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 6px -2px rgba(0,0,0,.35);
}
.mtl--capsula.mtl--no-icon .mtl-body::before { content: "▶"; font-size: 13px; }

/* Nastro: rettangolo pieno con bordo destro più scuro, icona fuori a destra */
.mtl--nastro .mtl-body { gap: 14px; }
.mtl--nastro .mtl-title {
	align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 10px 18px;
	border-radius: 3px; background: var(--c);
	box-shadow: inset -10px 0 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.25), 0 6px 12px -6px rgba(0,0,0,.4);
	font: 800 19px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #fff;
	text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.mtl--nastro .mtl-icon, .mtl--nastro.mtl--no-icon .mtl-body::before { order: 2; flex: none; width: 34px; display: grid; place-items: center; color: var(--c); }
.mtl--nastro .mtl-icon .dashicons { width: 30px; height: 30px; font-size: 30px; }
.mtl--nastro.mtl--no-icon .mtl-body::before { content: "▶"; font-size: 24px; }

/* Cucito: piastrella con cucitura tratteggiata, lettere spaziate, ombra a terra */
.mtl--cucito .mtl-item {
	margin-bottom: 12px; border-radius: 4px; background: var(--c);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 color-mix(in srgb, var(--c) 70%, #000), 0 5px 0 rgba(0,0,0,.08);
}
.mtl--cucito .mtl-item::before { /* cucitura */
	content: ""; position: absolute; inset: 5px; border: 2px dashed rgba(255,255,255,.75); border-radius: 2px; pointer-events: none;
}
.mtl--cucito .mtl-item::after { /* ombra sul pavimento */
	content: ""; position: absolute; left: 8%; right: 8%; bottom: -16px; height: 8px; border-radius: 50%;
	background: color-mix(in srgb, var(--c) 35%, transparent); filter: blur(3px); pointer-events: none;
}
.mtl--cucito .mtl-icon { display: none; }
.mtl--cucito .mtl-title { padding: 12px 22px; font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .38em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.mtl--cucito .mtl-item:hover { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 0 color-mix(in srgb, var(--c) 70%, #000); }

/* Numerato: numero a sinistra, pillola sfumata con incavo bianco */
.mtl--numerato { counter-reset: mtxn 0; }
.mtl--numerato .mtl-item { counter-increment: mtxn; gap: 0; }
.mtl--numerato .mtl-item::before {
	content: counter(mtxn, decimal-leading-zero); flex: none; width: 52px;
	font: 300 26px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--c);
}
.mtl--numerato .mtl-icon { display: none; }
.mtl--numerato .mtl-title {
	position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center;
	padding: 12px 26px 12px 44px; border-radius: 6px 999px 999px 6px;
	background: linear-gradient(90deg, var(--c), var(--c2));
	box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--c) 70%, #000);
	font: 400 18px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: uppercase; color: #fff;
}
.mtl--numerato .mtl-title::before { /* incavo tondo bianco */
	content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 30px;
	border-radius: 0 999px 999px 0; background: #fff; box-shadow: inset -3px 0 4px rgba(0,0,0,.08);
}
.mtl--dark.mtl--numerato .mtl-title::before { background: #1b1b1f; }

/* miniature */
.mtl-thumb--capsula, .mtl-thumb--nastro, .mtl-thumb--cucito, .mtl-thumb--numerato { flex-direction: column; justify-content: center; gap: 6px; background: #fff; }
:is(.mtl-thumb--capsula, .mtl-thumb--nastro, .mtl-thumb--cucito, .mtl-thumb--numerato) i:nth-child(n) { flex: none; height: 13px; border: 0; }
.mtl-thumb--capsula i:nth-child(n) { border-radius: 9px; background: radial-gradient(circle at calc(100% - 7px) 50%, #1fa7e8 0 4px, transparent 5px), linear-gradient(90deg, #0e8f88, #2c6fd6 75%, #fff 75%); box-shadow: 0 0 0 2px #0e8f88; }
.mtl-thumb--capsula i:nth-child(2) { background: radial-gradient(circle at calc(100% - 7px) 50%, #ec2f8f 0 4px, transparent 5px), linear-gradient(90deg, #ec2f8f, #ff7ab8 75%, #fff 75%); box-shadow: 0 0 0 2px #ec2f8f; }
.mtl-thumb--capsula i:nth-child(3) { background: radial-gradient(circle at calc(100% - 7px) 50%, #0f9e95 0 4px, transparent 5px), linear-gradient(90deg, #5fe0d6, #0f9e95 75%, #fff 75%); box-shadow: 0 0 0 2px #0f9e95; }
.mtl-thumb--nastro i:nth-child(n) { border-radius: 2px; background: linear-gradient(90deg, #ec2f8f 0 72%, #b81f6c 72% 78%, transparent 78% 86%, #ec2f8f 86%); }
.mtl-thumb--nastro i:nth-child(2) { background: linear-gradient(90deg, #1fa7e8 0 72%, #157bb0 72% 78%, transparent 78% 86%, #1fa7e8 86%); }
.mtl-thumb--nastro i:nth-child(3) { background: linear-gradient(90deg, #e21e2c 0 72%, #a8141f 72% 78%, transparent 78% 86%, #e21e2c 86%); }
.mtl-thumb--cucito i:nth-child(n) { border-radius: 2px; background: #f4a300; outline: 1px dashed rgba(255,255,255,.9); outline-offset: -4px; box-shadow: 0 3px 0 #b77a00; }
.mtl-thumb--cucito i:nth-child(2) { background: #4fb3f0; box-shadow: 0 3px 0 #2a7fb5; }
.mtl-thumb--cucito i:nth-child(3) { background: #1d7be0; box-shadow: 0 3px 0 #1257a3; }
.mtl-thumb--numerato i:nth-child(n) { border-radius: 2px 9px 9px 2px; background: linear-gradient(90deg, transparent 0 22%, #fff 22% 30%, #ec2f8f 30%, #ff7ab8); }
.mtl-thumb--numerato i:nth-child(2) { background: linear-gradient(90deg, transparent 0 22%, #fff 22% 30%, #8d4be0 30%, #c08cff); }
.mtl-thumb--numerato i:nth-child(3) { background: linear-gradient(90deg, transparent 0 22%, #fff 22% 30%, #5b5fd6, #7a7fe8); }

/* =================================================================
 * 41 ICONA A BLOCCO: pulsante pieno, l'icona sta in un blocco
 * dello stesso colore più scuro a sinistra
 * ================================================================= */
.mtl--blocco { --mtl-gap: 10px 12px; }
.mtl--blocco .mtl-item { --c: #43a047; --t: #fff; }
.mtl--blocco .mtl-item:nth-child(8n+2) { --c: #dc3545; }
.mtl--blocco .mtl-item:nth-child(8n+3) { --c: #f2c014; --t: #2b2400; }
.mtl--blocco .mtl-item:nth-child(8n+4) { --c: #3d6ef5; }
.mtl--blocco .mtl-item:nth-child(8n+5) { --c: #e6e6e6; --t: #222; }
.mtl--blocco .mtl-item:nth-child(8n+6) { --c: #52a6ba; }
.mtl--blocco .mtl-item:nth-child(8n+7) { --c: #6f42c1; }
.mtl--blocco .mtl-item:nth-child(8n+8) { --c: #fd7e14; }
.mtl--blocco .mtl-item {
	position: relative; display: flex; align-items: stretch; min-height: 44px;
	padding: 0; border: 0; border-radius: 5px; overflow: hidden;
	background: var(--c); color: var(--t);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.15);
	transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mtl--blocco .mtl-item:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.12), 0 5px 10px -3px rgba(0,0,0,.3); }
.mtl--blocco .mtl-item:active { transform: translateY(1px); filter: brightness(.95); }
.mtl--blocco :is(.mtl-media, .mtl-desc, .mtl-rel) { display: none; }
.mtl--blocco .mtl-body { flex: 1; display: flex; align-items: stretch; padding: 0; }
.mtl--blocco .mtl-icon, .mtl--blocco.mtl--no-icon .mtl-body::before {
	flex: none; width: 48px; display: grid; place-items: center;
	background: rgba(0,0,0,.14); color: var(--t);
	box-shadow: inset -1px 0 0 rgba(0,0,0,.08);
}
.mtl--blocco.mtl--no-icon .mtl-body::before { content: "✔"; font-size: 16px; }
.mtl--blocco .mtl-icon .dashicons { width: 20px; height: 20px; font-size: 20px; }
.mtl--blocco .mtl-title {
	flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; padding: 8px 18px;
	font: 400 17px/1.2 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--t);
}
.mtl--blocco .mtl-title a { color: inherit; text-decoration: none; }
.mtl--blocco .mtl-title a::after { content: ""; position: absolute; inset: 0; }
.mtl--blocco .mtl-title a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.mtl--blocco .mtl-item:nth-child(8n+5) .mtl-title { background: #fff; }

.mtl-thumb--blocco { flex-direction: column; justify-content: center; gap: 6px; background: #fff; }
.mtl-thumb--blocco i:nth-child(n) { flex: none; height: 13px; border: 0; border-radius: 2px; background: linear-gradient(90deg, #35803a 0 24%, #43a047 24%); }
.mtl-thumb--blocco i:nth-child(2) { background: linear-gradient(90deg, #b42b38 0 24%, #dc3545 24%); }
.mtl-thumb--blocco i:nth-child(3) { background: linear-gradient(90deg, #3159c6 0 24%, #3d6ef5 24%); }

/* =================================================================
 * Allineamento con la base di Menu Tiles (che mette voci e corpo in
 * colonna, con padding 20px e icona 42x42): gli stili a pulsante
 * vanno in riga
 * ================================================================= */
:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco, .mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-item { flex-direction: row; }
:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco, .mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-body { flex-direction: row; gap: 0; padding: 0; }
:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco) .mtl-body { align-items: stretch; }
:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco) .mtl-icon { height: auto; border-radius: 0; }
.mtl--etichetta .mtl-icon { border-radius: 4px 0 0 4px; }
.mtl--linguetta .mtl-icon { border-radius: 22px 0 0 22px; }
.mtl--blocco .mtl-icon { border-radius: 0; }
:is(.mtl--capsula, .mtl--nastro, .mtl--numerato) .mtl-body { align-items: center; }
.mtl--capsula .mtl-body { flex-direction: row-reverse; gap: 8px; }
.mtl--nastro .mtl-body { gap: 14px; }
.mtl--segment .mtl-body { flex-direction: row; align-items: center; padding: 0; gap: 8px; }
.mtl--segment .mtl-icon { width: auto; height: auto; }

/* =================================================================
 * Altezza libera (selettore «Altezza pulsanti» o altezza="N"):
 * l'altezza scelta sostituisce quella dello stile, anche più bassa
 * ================================================================= */
.mtl.mtl--altezza { grid-auto-rows: auto; }
.mtl.mtl--altezza .mtl-item {
	height: var(--mtx-h) !important; min-height: 0 !important; max-height: none !important;
	padding-top: 0 !important; padding-bottom: 0 !important;
	aspect-ratio: auto !important; box-sizing: border-box; overflow: hidden;
	justify-content: center;
}
.mtl.mtl--altezza .mtl-item::before, .mtl.mtl--altezza .mtl-item::after { max-height: var(--mtx-h); }
.mtl.mtl--altezza .mtl-body { min-height: 0 !important; flex: 0 1 auto; padding-top: 0 !important; padding-bottom: 0 !important; min-width: 0; }
/* nei pulsanti a riga il corpo riempie tutta l'altezza */
.mtl.mtl--altezza:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco, .mtl--capsula, .mtl--nastro, .mtl--cucito, .mtl--numerato) .mtl-body { flex: 1; align-self: stretch; height: 100%; }
.mtl.mtl--altezza .mtl-title {
	margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
	font-size: clamp(10px, calc(var(--mtx-h) * .36), 26px) !important; line-height: 1.1 !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
	align-self: center;
}
.mtl.mtl--altezza .mtl-title a { overflow: hidden; text-overflow: ellipsis; }
.mtl.mtl--altezza .mtl-media { height: 100% !important; max-height: var(--mtx-h); flex: none; }
.mtl.mtl--altezza .mtl-media img { height: 100% !important; width: auto; object-fit: cover; }
.mtl.mtl--altezza :is(.mtl-desc, .mtl-rel) { display: none; }
.mtl.mtl--altezza .mtl-icon { align-self: stretch; height: auto !important; min-height: 0; }
.mtl.mtl--altezza .mtl-icon .dashicons { width: clamp(12px, calc(var(--mtx-h) * .45), 40px); height: clamp(12px, calc(var(--mtx-h) * .45), 40px); font-size: clamp(12px, calc(var(--mtx-h) * .45), 40px); }
/* nei pulsanti con riquadro icona il riquadro segue l'altezza */
.mtl.mtl--altezza:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco) .mtl-body { align-items: stretch; }
.mtl.mtl--altezza:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco) .mtl-icon,
.mtl.mtl--altezza:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco).mtl--no-icon .mtl-body::before { width: clamp(20px, var(--mtx-h), 64px); }
.mtl.mtl--altezza:is(.mtl--etichetta, .mtl--linguetta, .mtl--sottolineato, .mtl--freccia, .mtl--blocco, .mtl--nastro, .mtl--capsula, .mtl--numerato) .mtl-title { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.mtl.mtl--altezza.mtl--sottolineato .mtl-icon { margin-bottom: 3px; }
.mtl.mtl--altezza.mtl--capsula .mtl-item { padding: 3px !important; }
.mtl.mtl--altezza.mtl--capsula .mtl-icon { width: calc(var(--mtx-h) - 12px); height: calc(var(--mtx-h) - 12px) !important; align-self: center; }
.mtl.mtl--altezza.mtl--cucito .mtl-item::before { inset: max(2px, calc(var(--mtx-h) * .1)); }
.mtl.mtl--altezza.mtl--numerato .mtl-item::before { font-size: calc(var(--mtx-h) * .5); width: calc(var(--mtx-h) * 1.1); }
/* Display rosso: il numero si rimpicciolisce e sta a sinistra del titolo */
.mtl.mtl--altezza.mtl--segment .mtl-item { padding-left: calc(var(--mtx-h) * 1.6 + 16px) !important; }
.mtl.mtl--altezza.mtl--segment .mtl-item::before, .mtl.mtl--altezza.mtl--segment .mtl-item::after {
	top: 50%; transform: translateY(-50%); left: 8px; min-width: 0;
	font-size: clamp(10px, calc(var(--mtx-h) * .45), 34px); padding: 4px 8px;
}
.mtl.mtl--altezza.mtl--segment .mtl-title { font-size: clamp(10px, calc(var(--mtx-h) * .26), 15px) !important; }
/* riquadro del selettore nella pagina opzioni */
.mtx-altezza { margin: 14px 0; display: grid; gap: 6px; }
.mtx-altezza input[type="range"] { width: 100%; max-width: 260px; accent-color: #1b8fa3; }

/* Anteprima fissa in alto nella pagina opzioni di Menu Tiles */
.mtx-fissa {
	position: sticky; top: 32px; z-index: 50;
	margin: 0 0 18px; background: #fff; border: 1px solid #dcdcde; border-radius: 10px;
	box-shadow: 0 10px 24px -14px rgba(0,0,0,.45);
}
.mtx-fissa-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f0f0f1; }
.mtx-fissa-testa strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #1d2327; }
.mtx-fissa-corpo { max-height: 42vh; min-height: 80px; overflow: auto; padding: 10px; resize: vertical; }
.mtx-fissa-corpo .mtl-stage { margin: 0; }
.mtx-fissa.ridotta .mtx-fissa-corpo { display: none; }
.mtx-fissa.ridotta .mtx-fissa-testa { border-bottom: 0; }
@media (max-width: 782px) { .mtx-fissa { top: 46px; } }
@media (max-width: 600px) { .mtx-fissa { top: 0; } }