/*!
 * Mattioli Geo Entry Banner — modale RL-style, overlay fixed (zero CLS).
 * Stile sobrio coerente con un brand di gioielleria (bianco/nero, maiuscoletto).
 */
.mtl-geo-ov {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 20, 20, .55);
	opacity: 0;
	animation: mtlGeoFade .25s ease forwards;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
@keyframes mtlGeoFade { to { opacity: 1; } }

.mtl-geo-modal {
	position: relative;
	width: 100%;
	max-width: 600px;
	box-sizing: border-box;
	padding: 40px 34px 46px;
	background: #fff;
	color: #1a1a1a;
	text-align: center;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
	font-family: inherit;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px); /* Safari/mobile iOS: dvh esclude la barra indirizzi dinamica (no taglio) */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateY(8px);
	animation: mtlGeoRise .3s ease forwards;
}
@keyframes mtlGeoRise { to { transform: translateY(0); } }

.mtl-geo-x {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #999;
	cursor: pointer;
}
.mtl-geo-x:hover { color: #1a1a1a; }

.mtl-geo-title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
}

.mtl-geo-body {
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.55;
	color: #444;
}
.mtl-geo-body strong { color: #1a1a1a; }

/* Titolo del selettore aree ("Choose your region" / "Scegli la tua area") — richiesta: peso 400. */
.mtl-geo-title-region { font-weight: 400; }

/* ---- MENU A TENDINA custom (area + lingua in un'unica voce) — sobrio Mattioli, mobile/Safari-safe ---- */
.mtl-geo-dd { position: relative; max-width: 360px; margin: 4px auto 0; text-align: left; direction: ltr; }
.mtl-geo-dd-trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; box-sizing: border-box; min-height: 48px;
	padding: 13px 16px;
	background: #fff !important; color: #1a1a1a !important;
	border: 1px solid #1a1a1a !important; border-radius: 0; box-shadow: none !important;
	font: inherit; font-size: 13px; letter-spacing: .04em; line-height: 1.3;
	text-align: left; text-transform: none; cursor: pointer;
	-webkit-appearance: none; appearance: none; /* niente stile pulsante nativo iOS/Safari */
}
.mtl-geo-dd-trigger:hover,
.mtl-geo-dd-trigger:focus { background: #fff !important; border-color: #000 !important; color: #000 !important; }
.mtl-geo-dd-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtl-geo-dd-arrow {
	flex: 0 0 auto; width: 0; height: 0;
	border-left: 5px solid transparent; border-right: 5px solid transparent;
	border-top: 6px solid #1a1a1a;
	transition: transform .2s ease;
}
.mtl-geo-dd.is-open .mtl-geo-dd-arrow { transform: rotate(180deg); }
.mtl-geo-dd-list {
	display: none;
	margin-top: -1px;
	border: 1px solid #1a1a1a; border-top: 0;
	background: #fff;
	max-height: 44vh; /* fallback browser senza dvh/min() */
	max-height: min(44vh, calc(100dvh - 280px)); /* evita il DOPPIO scroll (modale + lista) su mobile */
	overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mtl-geo-dd.is-open .mtl-geo-dd-list { display: block; }
.mtl-geo-dd-opt {
	display: block; box-sizing: border-box; min-height: 44px;
	padding: 12px 16px;
	color: #1a1a1a !important; text-decoration: none !important; box-shadow: none !important;
	border-bottom: 1px solid #eee;
	font-size: 13px; letter-spacing: .04em; line-height: 1.4;
	transition: background .12s ease;
}
.mtl-geo-dd-opt:last-child { border-bottom: 0; }
.mtl-geo-dd-opt:hover,
.mtl-geo-dd-opt:focus { background: #f5f5f5 !important; color: #000 !important; }
.mtl-geo-dd-opt.is-current { font-weight: 600; }
.mtl-geo-dd-opt.is-current::before { content: "•"; margin-right: 8px; color: #1a1a1a; }
/* Touch (niente :hover affidabile): feedback visivo al tap. */
@media (hover: none) {
	.mtl-geo-dd-trigger:active { background: #f4f4f4 !important; }
	.mtl-geo-dd-opt:active { background: #efefef !important; }
}
/* Schermi molto stretti (es. Galaxy Fold ~280px): niente overflow orizzontale. */
@media (max-width: 360px) {
	.mtl-geo-dd { max-width: 100%; }
	.mtl-geo-modal { padding-left: 16px; padding-right: 16px; overflow-x: hidden; }
}

/* Elenco "altre aree" */
.mtl-geo-others { margin-top: 22px; }
.mtl-geo-others-label {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #999;
}
.mtl-geo-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #eee;
	text-align: left;
}
.mtl-geo-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 2px;
	border-bottom: 1px solid #eee;
	font-size: 13px;
}
/* Gruppo sinistro: nome zona + "sei qui" subito a destra del nome. */
.mtl-geo-list .mtl-geo-rmain {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}
/* Gruppo destro: valuta + link lingua, allineati a destra. */
.mtl-geo-list .mtl-geo-rmeta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	white-space: nowrap;
}
.mtl-geo-list .mtl-geo-name { color: #1a1a1a; }
.mtl-geo-list .mtl-geo-cur {
	color: #999;
	font-size: 11px;
	letter-spacing: .05em;
}
.mtl-geo-list .mtl-geo-here {
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #bbb;
}
/* Link lingua: link semplici (non pulsanti), underline all'hover */
.mtl-geo-list .mtl-geo-langs { white-space: nowrap; }
.mtl-geo-list .mtl-geo-langs a {
	color: #1a1a1a !important;
	text-decoration: none !important;
	box-shadow: none !important;
	padding: 2px 3px;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease, color .15s ease;
}
.mtl-geo-list .mtl-geo-langs a:hover,
.mtl-geo-list .mtl-geo-langs a:focus {
	color: #000 !important;
	border-bottom-color: #1a1a1a;
}
.mtl-geo-list .mtl-geo-sep { color: #ccc; }

/* Colori forzati con !important: il tema (Impreza) ha regole a:hover/button che
   altrimenti vincono e rendono il testo nero su nero. */
.mtl-geo-go {
	display: block;
	padding: 14px 18px;
	background: #1a1a1a !important;
	color: #fff !important;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background .2s ease;
}
.mtl-geo-go:hover,
.mtl-geo-go:focus,
.mtl-geo-go:active {
	background: #000 !important;
	color: #fff !important;
	text-decoration: none !important;
	opacity: 1 !important;
}

.mtl-geo-stay {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 12px 18px;
	background: none !important;
	border: 1px solid #ccc !important;
	color: #1a1a1a !important;
	text-decoration: none !important;
	box-shadow: none !important;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.mtl-geo-stay:hover,
.mtl-geo-stay:focus {
	border-color: #1a1a1a !important;
	color: #1a1a1a !important;
	background: none !important;
}

@media (max-width: 480px) {
	.mtl-geo-modal { padding: 30px 22px 34px; }
	.mtl-geo-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mtl-geo-ov,
	.mtl-geo-modal { animation: none; opacity: 1; transform: none; }
}