/*
 * Menù Digitale - stili frontend, prefissati con "md-" per evitare conflitti
 * con il tema. Nessun font-family e pochissimi colori impostati di proposito:
 * il menù eredita l'aspetto del tema attivo (font, colori del testo, dei
 * titoli, dei link) invece di imporre un proprio stile fisso - cosi lo
 * stesso codice si "veste" in modo diverso su ogni sito senza bisogno di
 * configurazione specifica per tema.
 *
 * Le DISTANZE invece (line-height, margini, spaziatura tra gli elementi) sono
 * sempre impostate esplicitamente qui, MAI lasciate ereditare dal tema: un
 * font che cambia va bene (fa parte dell'identità del sito), ma un
 * line-height molto diverso da un tema all'altro (provato con Salient, che
 * di default usa un'interlinea molto più ariosa di un tema semplice come
 * Storefront) altera la resa visiva della griglia in modo indesiderato.
 */

.md-menu {
	max-width: 1300px;
	margin: 0 auto;
	margin-top: 10%;
	position: relative; /* ancora ".md-coperto" quando esce dal flusso, da desktop */
}

/*
 * Barra di navigazione rapida tra categorie: "sticky" (resta visibile mentre
 * si scorre) per orientarsi facilmente in un menù lungo, specialmente da
 * mobile. Il salto alla sezione è un link ancora nativo, con salto ISTANTANEO
 * (non "scroll-behavior: smooth"): temi premium con un proprio motore di
 * scroll personalizzato (verificato con Salient) intercettano lo scroll
 * nativo e, se è animato invece che istantaneo, lo bloccano del tutto -
 * intera pagina non più scrollabile nemmeno via JS. Il salto istantaneo
 * invece funziona sempre, con qualunque tema. "scroll-margin-top" sulle
 * categorie evita che il titolo finisca nascosto sotto la barra sticky.
 *
 * "background: Canvas" (colore di sistema CSS, non un valore fisso) invece
 * di un colore scelto da noi: si adatta al tema chiaro/scuro del sito senza
 * bisogno di conoscerne il colore di sfondo reale, coerente con la scelta
 * di non imporre colori propri fatta nel resto del file.
 */
.md-nav-categorie {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	gap: 0.6em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	background: Canvas;
	padding: 0.9em 0;
	margin-bottom: 1.5em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.md-nav-categorie::-webkit-scrollbar {
	display: none;
}

.md-nav-categorie-link {
	flex: 0 0 auto;
	padding: 0.55em 1.2em;
	border-radius: 999px;
	background: rgba(128, 128, 128, 0.12);
	color: inherit;
	text-decoration: none;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.md-nav-categorie-link:hover,
.md-nav-categorie-link:focus-visible {
	background: rgba(128, 128, 128, 0.22);
}

.md-nav-categorie-link-attiva,
.md-nav-categorie-link-attiva:hover,
.md-nav-categorie-link-attiva:focus-visible {
	background: var(--md-colore-link, currentColor);
	color: Canvas;
}

/*
 * Da desktop la barra diventa una colonna fissa sul bordo destro dello
 * schermo invece della fila orizzontale in cima usata da mobile: più
 * comoda quando lo schermo è largo (non serve scorrere orizzontalmente),
 * e non ruba spazio in cima finché non si inizia davvero a scorrere il
 * menù (nascosta via opacity/visibility, mostrata da "gestisciVisibilitaNavCategorie()"
 * in frontend.js quando si supera l'inizio di ".md-menu").
 * "position: fixed" (non "sticky"): a differenza di sticky non risente
 * della regola "overflow: hidden" che alcuni temi (Salient) applicano al
 * body per il proprio menu mobile.
 */
@media (min-width: 779px) {
	.md-nav-categorie {
		position: fixed;
		top: 50%;
		right: 24px;
		left: auto;
		bottom: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0.4em;
		max-width: 220px;
		max-height: 70vh;
		overflow-y: auto;
		padding: 1em;
		margin-bottom: 0;
		border-bottom: 0;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-50%) translateX(12px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	}

	.md-nav-categorie.md-nav-categorie-visibile {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) translateX(0);
	}

	.md-nav-categorie-link {
		text-align: center;
	}
}

.md-categoria {
	margin-bottom: 65px;
	scroll-margin-top: 4.5em;
}

.md-categoria-titolo {
	margin: 0 0 0.8em;
	line-height: 1.25;
}

/*
 * "padding: 0" esplicito su OGNI elemento <p> del plugin (qui e più sotto):
 * alcuni temi (Salient, tramite skin-material.css) applicano un
 * "padding-bottom" a tutti i paragrafi del sito per la propria spaziatura
 * verticale (una property css "--nectar-paragraph-bottom-spacing", di
 * default circa 24-28px). Non basta impostare solo il lato che interessa
 * (es. solo padding-left): senza azzerare esplicitamente anche gli altri
 * lati, quelli restano quelli decisi dal tema e possono gonfiare parecchio
 * l'altezza del blocco - lo stesso principio già visto per "img" più sopra.
 */
.md-categoria-descrizione {
	opacity: 0.75;
	font-style: italic;
	margin-top: -0.4em;
	margin-bottom: 1em;
	padding: 0;
	line-height: 1.5;
}

/*
 * Masonry vero, costruito da JS (vedi inizializzaMasonry() in frontend.js):
 * il CSS multi-colonna è stato scartato perché "column-fill: balance" (l'unica
 * modalità utilizzabile senza un'altezza fissa) a volte lascia una colonna
 * vuota quando una categoria ha poche card (es. 4 card su 3 colonne
 * diventano 2x2 invece di riempire tutte e 3 le colonne) - un comportamento
 * di bilanciamento deciso dal browser, non controllabile via CSS puro. JS
 * inserisce invece ogni card nella colonna attualmente più bassa dentro un
 * wrapper ".md-piatti-righe" > ".md-piatti-colonna" che sostituisce questo
 * contenitore. Senza JS le card restano impilate qui a piena larghezza
 * (fallback semplice ma funzionante).
 */
.md-piatti .md-piatto {
	margin-bottom: 21px;
}

.md-piatti-righe {
	display: flex;
	align-items: flex-start;
	gap: 21px;
}

.md-piatti-colonna {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.md-piatti-colonna > .md-piatto:last-child {
	margin-bottom: 0;
}

.md-piatto {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
	padding: 20px;
}

.md-piatto-badge-riga {
	margin-bottom: 0.6em;
}

.md-piatto-riga {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75em;
}

/* Nessun peso/dimensione forzati: eredita lo stile h3 del tema attivo. */
.md-piatto-nome {
	margin: 0;
	line-height: 1.25;
}

.md-piatto-prezzo {
	margin: 0.35em 0 0;
	font-weight: 700;
	line-height: 1.25;
}

/*
 * Pulsante che apre la galleria foto del piatto: stessa funzione di prima,
 * ma icona piccola accanto al titolo invece di una foto grande a sinistra -
 * su mobile la foto in linea occupava troppo spazio in un contenitore già
 * stretto, l'icona risolve il problema mantenendo l'accesso alle foto.
 */
.md-piatto-foto-trigger,
.md-piatto-foto-trigger:hover,
.md-piatto-foto-trigger:focus,
.md-piatto-foto-trigger:active {
	flex-shrink: 0;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.md-piatto-icona-foto {
	display: block;
	width: 21px;
	height: auto;
}

/*
 * Etichetta "in evidenza": una tra tre varianti scelta in automatico per
 * piatto (vedi $colore_evidenza in render_piatto()), mai impostata a mano.
 * Testo bianco a 14px; sfondi pieni (non più semi-trasparenti) su richiesta
 * esplicita dell'utente per una migliore leggibilità/contrasto.
 */
.md-piatto-badge {
	display: inline-block;
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.4;
	white-space: nowrap;
	color: #fff;
}

.md-piatto-badge-rosso {
	background: #F45656;
}

.md-piatto-badge-verde {
	background: #289D1C;
}

.md-piatto-badge-blu {
	background: #4A63D3;
}

/*
 * Ultima sezione del piatto, mostrata solo se la descrizione facoltativa è
 * presente in aggiunta agli ingredienti: separata da una linea sottile che
 * la stacca dagli allergeni appena sopra, invece di seguire subito senza
 * alcuna divisione.
 */
.md-piatto-descrizione {
	margin: 0.75em 0 0;
	padding-top: 0.75em;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 1rem;
	line-height: 1.5;
}

/*
 * Ingredienti (o descrizione al loro posto se il piatto non li ha, vedi
 * $testo_dettagli in render_piatto()): nessun bordo d'accento, la card
 * stessa (sfondo, ombra, padding) basta a delimitare visivamente il piatto.
 */
.md-piatto-dettagli {
	margin: 0.5em 0 0;
}

.md-piatto-ingredienti {
	margin: 0;
	padding: 0;
	font-style: italic;
	font-size: 1rem;
	line-height: 1.5;
}

/*
 * Sezione finale del piatto, sempre a piena larghezza: elenca gli
 * allergeni indipendentemente da come sono stati mostrati ingredienti o
 * descrizione più sopra.
 */
.md-piatto-allergeni {
	margin: 0.5em 0 0;
	padding: 0;
	font-style: italic;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #e06c16;
}

/*
 * Layout Grid (scelto in Dashboard > Layout Menu > Desktop, vedi
 * MD_Dashboard::OPTION_LAYOUT): da mobile è IDENTICO al layout Masonry, di
 * proposito - il markup di render_piatto() è condiviso tra i due, qui sotto
 * si tocca solo l'aspetto da desktop.
 * ".md-piatto-foto-trigger-grande" (tessera foto grande a sinistra) esiste nel
 * markup solo quando il layout Grid è attivo E il piatto ha una foto: di
 * default resta comunque nascosta anche in quel caso, la mostra solo la
 * media query qui sotto.
 */
.md-piatto-foto-trigger-grande {
	display: none;
}

.md-menu-layout-grid .md-piatto {
	position: relative;
}

@media (min-width: 779px) {
	/*
	 * Griglia tradizionale a 2 colonne (non la masonry del layout Masonry,
	 * disattivata via JS per questo layout, vedi inizializzaMasonry() in
	 * frontend.js): "display: grid" allinea automaticamente l'altezza delle
	 * card della stessa riga alla più alta, senza bisogno di altro CSS.
	 */
	.md-menu-layout-grid .md-piatti {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 21px;
	}

	/* Lo spazio tra le card lo dà il "gap" della grid, non più il margin-bottom pensato per la masonry impilata. */
	.md-menu-layout-grid .md-piatti .md-piatto {
		margin-bottom: 0;
	}

	/*
	 * Padding interno fisso a 25px (costante del "container scheda bianca",
	 * da rispettare sempre): l'altezza della card resta libera, si adatta al
	 * contenuto scritto (nessuna altezza fissata qui). Card come riga
	 * flessibile: foto a sinistra (tessera a larghezza fissa,
	 * "align-items: stretch" la allunga per tutta l'altezza della card, cosi
	 * anche quando la riga si allunga per pareggiare la card vicina più
	 * alta) + corpo testuale a destra, quest'ultimo dentro il normale
	 * padding. Un piatto senza foto ha solo ".md-piatto-corpo" come figlio:
	 * occupa naturalmente tutta la larghezza, nessuna regola aggiuntiva
	 * necessaria.
	 */
	.md-menu-layout-grid .md-piatto {
		display: flex;
		align-items: stretch;
		gap: 20px;
		padding: 25px;
	}

	.md-menu-layout-grid .md-piatto-corpo {
		flex: 1;
		min-width: 0;
	}

	/* Sotto i 779px resta solo l'icona (identica al layout Masonry): qui la si nasconde a favore della tessera grande. */
	.md-menu-layout-grid .md-piatto-riga .md-piatto-foto-trigger {
		display: none;
	}

	/*
	 * La foto non deve avere spazi intorno: "sborda" il padding della card
	 * sui tre lati (sopra/sotto/sinistra) con margini negativi pari al
	 * padding, restando attaccata ai bordi della scheda bianca - a destra
	 * invece niente margine negativo, li lo spazio dal testo lo da il "gap"
	 * della riga flessibile qui sopra. "overflow: hidden" + il border-radius
	 * sui soli due angoli coincidenti con quelli della card (non tutti e
	 * quattro, gli angoli interni verso il testo restano squadrati) tagliano
	 * la foto sulla stessa curva della card, senza dover nascondere anche
	 * l'etichetta "in evidenza" qui sotto (che invece DEVE sporgere dal
	 * bordo superiore della card: per questo l'overflow:hidden non è sulla
	 * card intera, ma solo su questa tessera).
	 */
	.md-menu-layout-grid .md-piatto-foto-trigger-grande {
		display: block;
		flex: 0 0 240px;
		margin: -25px 0 -25px -25px;
		padding: 0;
		border-radius: 18px 0 0 18px;
		overflow: hidden;
	}

	.md-menu-layout-grid .md-piatto-foto {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/*
	 * Etichetta "in evidenza": in cima a destra, a cavallo del bordo
	 * superiore della card invece che come riga sopra il titolo (".md-piatto"
	 * sopra ha "position: relative" apposta per questo; l'overflow:hidden che
	 * taglia la foto qui sopra è scoped alla sola tessera foto, non alla
	 * card, apposta per non tagliare anche questa etichetta).
	 */
	.md-menu-layout-grid .md-piatto-badge-riga {
		position: absolute;
		top: 0;
		right: 25px;
		transform: translateY(-50%);
		margin-bottom: 0;
	}
}

@media (max-width: 778px) {
	/*
	 * Layout Grid da mobile: prova richiesta dall'utente il 2026-08-28 per
	 * vedere come apparirebbe la foto principale anche sotto i 779px, dove
	 * di norma resta nascosta (vedi commento sopra ".md-piatto-foto-trigger-grande"
	 * più in alto) - qui, a differenza del desktop, non c'è spazio per
	 * affiancarla al testo: va quindi a piena larghezza SOPRA il corpo della
	 * card, non di lato. Tutto scoped a ".md-menu-layout-grid": il layout
	 * Masonry resta invariato, identico a prima.
	 */
	/*
	 * +5px di distanza tra una card e l'altra rispetto ai 21px di base
	 * (".md-piatti .md-piatto", condivisi con Masonry): con la foto grande
	 * in cima le card sembravano troppo ravvicinate, richiesta esplicita
	 * dell'utente. Scoped al solo layout Grid da mobile, non tocca Masonry.
	 */
	.md-menu-layout-grid .md-piatti .md-piatto {
		margin-bottom: 26px;
	}

	.md-menu-layout-grid .md-piatto {
		display: flex;
		flex-direction: column;
		/*
		 * "overflow: hidden" qui (non sulla tessera foto) fa si che sia la
		 * card stessa a ritagliare l'angolo in alto con la SUA border-radius
		 * (18px, dichiarata su ".md-piatto" più sopra): cosi la curva della
		 * foto combacia esattamente con quella della card, senza doverla
		 * duplicare (e potenzialmente disallineare) sulla tessera foto - il
		 * bordo INFERIORE della foto resta di conseguenza dritto, nessun
		 * raccordo verso il testo sotto, richiesta esplicita dell'utente.
		 */
		overflow: hidden;
	}

	.md-menu-layout-grid .md-piatto-foto-trigger-grande {
		display: block;
		width: calc(100% + 40px);
		margin: -20px -20px 20px;
		/*
		 * Altezza legata alla viewport (non un aspect-ratio sulla larghezza)
		 * apposta: su un piatto largo tutto lo schermo un rapporto 16:9
		 * produceva una foto troppo alta, costringendo a scorrere parecchio
		 * prima di arrivare al testo - richiesta esplicita dell'utente,
		 * 2026-08-28, valore sperimentale ("proviamo") da verificare.
		 */
		height: 28vh;
		/*
		 * Nel markup l'etichetta "in evidenza" viene PRIMA della foto (vedi
		 * MD_Shortcode::render_piatto()): senza questo "order" restava sopra
		 * la foto, in una fascia bianca sospesa e staccata da essa invece di
		 * seguirla come nel riferimento fornito dall'utente. "order: -1"
		 * sposta solo visivamente la foto in cima (".md-piatto" è già un
		 * flex a colonna, vedi sopra), badge ed corpo del piatto restano
		 * nel loro ordine naturale subito dopo.
		 */
		order: -1;
	}

	.md-menu-layout-grid .md-piatto-foto {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	/* La foto grande sopra basta da sola: l'icona accanto al titolo diventerebbe ridondante (stessa logica già applicata da desktop). */
	.md-menu-layout-grid .md-piatto-riga .md-piatto-foto-trigger {
		display: none;
	}

	/*
	 * Eccezione: se il piatto ha PIU' di una foto (classe aggiunta da
	 * render_piatto() solo in quel caso), l'icona torna visibile - segnala
	 * che dietro c'è una galleria da sfogliare, non solo la stessa foto già
	 * mostrata in cima. Stessa specificità della regola sopra: vince perché
	 * dichiarata dopo (richiesta esplicita dell'utente, 2026-08-28).
	 */
	.md-menu-layout-grid .md-piatto-riga .md-piatto-foto-trigger-multipla {
		display: block;
	}
}

.md-extra-globali {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.md-extra-globali-titolo {
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.3;
	margin-bottom: 0.6em;
}

.md-extra-globali-elenco {
	font-size: 0.9em;
	line-height: 1.5;
	opacity: 0.85;
}

.md-extra-riga-prezzo {
	margin: 0 0 0.5em;
	padding: 0;
}

.md-extra-riga-prezzo:last-child {
	margin-bottom: 0;
}

/*
 * Pillola in risalto (sfondo giallo, testo nero), non più una semplice
 * riga di testo: da mobile resta nel flusso normale, allineata a sinistra,
 * spaziatura sopra/sotto uguale. Da desktop la posizione dipende
 * dall'opzione "Posizione del coperto" (vedi media query sotto):
 * "sopra" esce dal flusso e si aggancia all'angolo in alto a destra del
 * container ".md-menu"; "sotto" invece resta nel flusso normale (render()
 * la mette per ultima, dopo Aggiunzioni/Legenda/Elenco allergeni) ma
 * allineata a destra, cosi è davvero l'ultima voce del menù, staccata di
 * poco dalla riga di separazione verso i credit qui sotto - non un
 * elemento assoluto che potrebbe sovrapporsi al testo della Legenda.
 */
.md-coperto {
	display: inline-block;
	background: #ffd60a;
	color: #000;
	border-radius: 50px;
	padding: 0.5em 1.2em;
	font-size: 0.9em;
	line-height: 1.4;
	margin: 1.5em 0;
}

@media (min-width: 779px) {
	.md-coperto-sopra {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
	}

	.md-coperto-sotto {
		display: block;
		width: fit-content;
		margin: 1.5em 0 0 auto;
	}
}

/*
 * Il separatore verso "Aggiunte disponibili" sta su ".md-sezione-allergeni"
 * (il wrapper comune, vedi render() in class-md-shortcode.php): compare
 * sempre indipendentemente da quale dei due blocchi qui sotto è davvero
 * presente. "> *:first-child" azzera il margine superiore di chiunque
 * finisca per essere il primo, evitando di sommare due spaziature.
 */
.md-sezione-allergeni {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.md-sezione-allergeni > *:first-child {
	margin-top: 0;
}

.md-legenda-allergeni {
	margin-top: 1.5em;
}

.md-legenda-allergeni-corpo {
	font-size: 0.9em;
	line-height: 1.6;
	opacity: 0.85;
}

.md-legenda-allergeni-corpo ol {
	padding-left: 1.2em;
}

.md-elenco-completo-allergeni {
	font-size: 0.9em;
	line-height: 1.6;
	opacity: 0.85;
}

/*
 * Numerazione via CSS counter invece del marcatore nativo dell'<ol>: con
 * "list-style-position: inside" il numero resta comunque leggermente
 * rientrato in alcuni browser (dipende da come renderizzano lo spazio
 * riservato al marcatore) - cosi invece il numero è testo vero e proprio,
 * a filo con il bordo sinistro del contenitore, allineato al titolo sopra.
 */
.md-elenco-completo-allergeni ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: md-allergene;
}

.md-elenco-completo-allergeni li {
	/*
	 * "list-style: none" sull'<ol> qui sopra non basta: il tema (Storefront,
	 * verificato) dichiara "list-style-type: decimal" direttamente sui <li>,
	 * che essendo una dichiarazione diretta sull'elemento vince sempre
	 * sull'ereditarietà dal genitore, indipendentemente dalla specificità -
	 * senza questa riga il marcatore nativo del tema torna a comparire
	 * insieme al contatore CSS, con la numerazione doppia.
	 */
	list-style-type: none;
	counter-increment: md-allergene;
}

.md-elenco-completo-allergeni li::before {
	content: counter(md-allergene) ". ";
}

.md-menu-vuoto {
	text-align: center;
	line-height: 1.5;
	opacity: 0.7;
	padding: 0;
}

/*
 * Galleria a schermo intero: è chrome dell'interfaccia, non contenuto del
 * menù, quindi qui uno stile fisso (sfondo scuro, frecce bianche) è
 * intenzionale e non in contraddizione con l'ereditarietà del tema usata
 * sopra per il testo del menù.
 */
.md-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
}

.md-lightbox.md-lightbox-attivo {
	display: flex;
}

.md-lightbox-sfondo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

/*
 * Un solo <img> riusato per ogni foto (vedi frontend.js): finché il browser
 * non ha scaricato la nuova immagine, mostrerebbe ancora quella precedente
 * invece di un contenitore vuoto. Nascosta (opacity:0) subito dopo aver
 * cambiato "src", ricompare in dissolvenza solo a scaricamento completato
 * (classe aggiunta dall'evento "load" in JS).
 */
.md-lightbox-img {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.md-lightbox-img-caricata {
	opacity: 1;
}

.md-lightbox-chiudi,
.md-lightbox-prev,
.md-lightbox-next {
	position: absolute;
	border: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.md-lightbox-chiudi svg,
.md-lightbox-prev svg,
.md-lightbox-next svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: block;
}

.md-lightbox-chiudi {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
}

.md-lightbox-prev,
.md-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
}

.md-lightbox-prev {
	left: 16px;
}

.md-lightbox-next {
	right: 16px;
}

/* Blocca lo scroll della pagina dietro l'overlay mentre la galleria è aperta. */
html.md-lightbox-aperto {
	overflow: hidden;
}

/*
 * Il numero di colonne del masonry (3 desktop / 2 tablet / 1 mobile) è
 * deciso da JS (vedi numeroColonne() in frontend.js), che usa esattamente
 * queste stesse soglie (778px/1099px) per restare coerente col resto del
 * CSS responsive.
 */
@media (max-width: 778px) {
	.md-menu {
		max-width: 720px;
	}
}

.md-credito {
	max-width: 1300px;
	margin: 2em auto 8%;
	padding: 2em 0;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: #000;
}

.md-credito p {
	margin: 0 0 0.4em;
}

.md-credito p:last-child {
	margin-bottom: 0;
}

.md-credito a {
	color: var(--md-colore-link, inherit);
	text-decoration: underline;
}

.md-tutorial-fine {
	max-width: 1300px;
	margin: 24px auto 0;
	text-align: center;
}

.md-tutorial-fine-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 6px;
	background: #111;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.md-tutorial-fine-btn:hover,
.md-tutorial-fine-btn:focus {
	color: #fff;
	background: #2f3f46;
	text-decoration: none;
}

/*
 * Ultimo passo del tutorial guidato, sul menù pubblico (vedi il blocco
 * dedicato in frontend.js): stessa tecnica visiva (spotlight + tooltip,
 * position:fixed) del tour in Dashboard, qui in classi proprie perché
 * questo file non condivide nulla con dashboard.css.
 */
.md-tutorial-spot-overlay {
	position: fixed;
	inset: 0;
	z-index: 999998;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.md-tutorial-spot-overlay.md-tutorial-spot-visibile {
	opacity: 1;
}

.md-tutorial-spot-evidenza {
	position: fixed;
	border-radius: 8px;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
	transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.md-tutorial-spot-tooltip {
	position: fixed;
	z-index: 999999;
	width: 300px;
	max-width: calc(100vw - 20px);
	background: #fff;
	color: #222;
	padding: 16px 18px;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
	transition: top 0.25s ease, left 0.25s ease;
}

.md-tutorial-spot-titolo {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
}

.md-tutorial-spot-testo {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #444;
}

.md-tutorial-spot-fine {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 18px;
	border-radius: 6px;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.md-tutorial-spot-fine:hover,
.md-tutorial-spot-fine:focus {
	color: #fff;
	background: #2f3f46;
	text-decoration: none;
}