/**
 * =============================================================================
 * PROBAR - LA VETRINA DELLA HOME - css/home-vetrina.css
 * -----------------------------------------------------------------------------
 * Le due fasce di inc/abm-home-vetrina.php. Stessa veste del resto della home:
 * nero, oro #FFCE53, Playfair nei titoli. Caricato solo in home.
 *
 * Le soglie sono in pixel e non in rem: la radice del sito e' 14,592px.
 * =============================================================================
 */

/* Le misure comprendono il bordo e l'imbottitura, anche se un giorno il tema
   smettesse di dirlo per tutti. */
.abm-hv,
.abm-hv *,
.abm-hv *::before,
.abm-hv *::after {
	box-sizing: border-box;
}

.abm-hv {
	--hv-oro: #FFCE53;
	--hv-fondo: #0a0a0a;
	--hv-pannello: #101010;
	--hv-filo: #232323;
	--hv-testo: #cfcfcf;
	--hv-tenue: #9aa2a6;
	background: var(--hv-fondo);
	color: var(--hv-testo);
	padding: 64px 20px;
}

/* width e non max-width: nella home Astra scrive max-width: none su quello
   che sta dentro .entry-content[data-ast-blocks-layout], con una specificita'
   che una classe non batte. Misurato il 18 settembre 2026: il contenitore
   usciva a 1.311 px invece di 1.200 e il testo arrivava ai bordi. */
.abm-hv .abm-hv__dentro {
	width: min(100%, 1200px);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.abm-hv .abm-hv__dentro--stretto {
	width: min(100%, 1120px);
}

/* --- Testata --- */
.abm-hv__sopra {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.2px;
	color: var(--hv-oro);
	margin: 0 0 12px;
	text-align: center;
}

/* L'H1 della pagina. Piu' piccolo dei titoli d'atmosfera: qui serve leggere,
   non fare scena. La specificita' e' alzata perche' Astra scrive h1 e
   .entry-content :where(h1) a 70px. */
.abm-hv .abm-hv__titolo,
.entry-content .abm-hv .abm-hv__titolo {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	text-transform: none;
	color: #f6f6f6;
	margin: 0 0 16px;
	text-align: center;
}

.abm-hv__testo {
	color: var(--hv-testo);
	font-size: 16px;
	line-height: 1.7;
	max-width: 760px;
	margin: 0 auto 36px;
	text-align: center;
}

.abm-hv .abm-hv__sotto,
.entry-content .abm-hv .abm-hv__sotto {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.2px;
	color: var(--hv-tenue);
	margin: 0 0 18px;
	text-align: center;
}

/* --- Le tessere --- */
.abm-hv__griglia {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.abm-hv__tessera {
	margin: 0;
	padding: 0;
}

.abm-hv .abm-hv__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--hv-pannello);
	border: 1px solid var(--hv-filo);
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: #f6f6f6;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.abm-hv .abm-hv__link:hover,
.abm-hv .abm-hv__link:focus-visible {
	border-color: var(--hv-oro);
	transform: translateY(-2px);
	color: #f6f6f6;
}

.abm-hv__foto {
	display: block;
	/* 4:3 e non quadrato: con otto tessere il quadrato portava la fascia a
	   1.294 px su desktop e 1.731 su telefono (misurato in anteprima). */
	aspect-ratio: 4 / 3;
	background: #fff;
	overflow: hidden;
}

.abm-hv__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.abm-hv__nome {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	padding: 14px 14px 2px;
}

.abm-hv__conta {
	font-size: 13px;
	color: var(--hv-tenue);
	padding: 0 14px 14px;
	margin-top: auto;
}

.abm-hv .abm-hv__link:hover .abm-hv__nome,
.abm-hv .abm-hv__link:focus-visible .abm-hv__nome {
	color: var(--hv-oro);
}

/* --- Le otto categorie a carosello, dentro la capsula (18 settembre 2026) ---
   UN PANNELLO SOLO, col linguaggio della fascia eventi: gradiente scuro,
   cornice sottile, filo d'oro in testa. Dentro: la testa (occhiello, titolo,
   frecce), le tessere a tutta foto, i segmenti di avanzamento e le tre
   promesse. Prima erano tre pezzi appoggiati sul nero.

   Il binario scorre gia' da solo con l'aggancio prima che arrivi il
   JavaScript; poi js/carosello-consigli.js ci mette frecce, segmenti,
   trascinamento e inerzia, e le sue classi (pb-caro--presa, --lancio, --altro)
   qui hanno le stesse regole che in carosello-consigli.css valgono per
   ul.products e .pb-grid. */
.abm-hv__capsula {
	--hv-bordo: 40px;
	position: relative;
	margin: 8px 0 0;
	padding: 38px var(--hv-bordo) 0;
	background: linear-gradient(180deg, #131313 0%, #0c0c0c 100%);
	border: 1px solid #2e2e2e;
	border-radius: 20px;
	overflow: hidden;
}

.abm-hv__capsula::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 206, 83, 0.65), transparent);
}

.abm-hv__giostra {
	--hv-scheda: 76%;
	margin: 0;
}

.abm-hv .abm-hv__giostra.pb-caro {
	margin: 0;
}

.abm-hv__giostra-sopra {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.4px;
	color: var(--hv-oro);
	margin: 0 0 8px;
}

.abm-hv .abm-hv__giostra-titolo,
.entry-content .abm-hv .abm-hv__giostra-titolo,
.abm-hv .abm-hv__giostra.pb-caro .pb-caro__testa h2 {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	color: #f6f6f6;
	text-align: left;
}

.abm-hv .abm-hv__giostra-titolo,
.entry-content .abm-hv .abm-hv__giostra-titolo {
	margin: 0 0 24px;
}

.abm-hv .abm-hv__giostra .pb-caro__testa {
	align-items: flex-end;
	margin: 0 0 24px;
	padding: 0;
}

/* Le frecce: piu' grandi, e al passaggio si riempiono d'oro col segno nero.
   Mai oro su oro. */
.abm-hv .abm-hv__giostra .pb-caro__nav {
	gap: 10px;
}

.abm-hv .abm-hv__giostra .pb-caro__freccia {
	width: 46px;
	height: 46px;
	border-color: rgba(255, 206, 83, 0.5) !important;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.abm-hv .abm-hv__giostra .pb-caro__freccia svg {
	width: 16px;
	height: 16px;
	stroke-width: 1.6;
}

.abm-hv .abm-hv__giostra .pb-caro__freccia:hover,
.abm-hv .abm-hv__giostra .pb-caro__freccia:focus-visible {
	background: #FFCE53 !important;
	border-color: #FFCE53 !important;
	color: #0a0a0a !important;
}

.abm-hv .abm-hv__giostra .pb-caro__freccia:active {
	transform: scale(0.94);
}

/* --- Il binario: esce dal bordo destro della capsula, e' li' che sbuca la
   tessera vicina --- */
.abm-hv__giostra .abm-hv__griglia {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 18px;
	margin: 0 calc(var(--hv-bordo) * -1) 0 0;
	padding: 2px var(--hv-bordo) 6px 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.abm-hv__giostra .abm-hv__griglia::-webkit-scrollbar {
	display: none;
}

/* Niente scroll-snap-stop: un colpo deciso attraversa piu' tessere e si ferma
   su una intera, invece di inchiodarsi a ogni passo. */
.abm-hv__giostra .abm-hv__tessera {
	flex: 0 0 max(var(--hv-scheda), 220px);
	width: max(var(--hv-scheda), 220px);
	scroll-snap-align: start;
}

/* --- La tessera: tutta foto, col nome sopra --- */
.abm-hv .abm-hv__giostra .abm-hv__link {
	position: relative;
	display: block;
	height: auto;
	aspect-ratio: 4 / 5;
	background: #0d0d0d;
	border: 1px solid #2a2a2a;
	border-radius: 14px;
	overflow: hidden;
	isolation: isolate;
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.abm-hv .abm-hv__giostra .abm-hv__link:hover,
.abm-hv .abm-hv__giostra .abm-hv__link:focus-visible {
	transform: none;
	border-color: rgba(255, 206, 83, 0.7);
	box-shadow: 0 18px 40px -22px rgba(255, 206, 83, 0.35);
}

/* Il contorno tratteggiato che Astra mette ai link dopo un clic non e' di
   casa. Resta un contorno, ma solo per chi naviga con la tastiera, e d'oro. */
.abm-hv .abm-hv__giostra .abm-hv__link:focus {
	outline: none;
}

.abm-hv .abm-hv__giostra .abm-hv__link:focus-visible {
	outline: 1px solid #FFCE53;
	outline-offset: 3px;
}

.abm-hv__giostra .abm-hv__foto {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: #0d0d0d;
	z-index: -2;
}

.abm-hv__giostra .abm-hv__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.01);
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
	filter: saturate(0.92) brightness(0.92);
}

.abm-hv__giostra .abm-hv__link:hover .abm-hv__foto img,
.abm-hv__giostra .abm-hv__link:focus-visible .abm-hv__foto img {
	transform: scale(1.07);
	filter: saturate(1) brightness(1);
}

/* Il velo: rende leggibile il nome su qualunque foto, chiara o scura. */
.abm-hv .abm-hv__giostra .abm-hv__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8, 8, 8, 0.38) 0%, rgba(8, 8, 8, 0) 26%, rgba(8, 8, 8, 0) 44%, rgba(8, 8, 8, 0.72) 74%, rgba(8, 8, 8, 0.94) 100%);
}

.abm-hv__ordine {
	position: absolute;
	top: 16px;
	left: 18px;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--hv-oro);
}

.abm-hv__testi {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	padding: 0 20px 20px;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.abm-hv__giostra .abm-hv__nome {
	display: block;
	font-size: 24px;
	line-height: 1.2;
	padding: 0;
	color: #f6f6f6;
}

.abm-hv__giostra .abm-hv__conta {
	display: block;
	margin: 6px 0 0;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #b9bec1;
}

.abm-hv .abm-hv__giostra .abm-hv__link:hover .abm-hv__nome,
.abm-hv .abm-hv__giostra .abm-hv__link:focus-visible .abm-hv__nome {
	color: #f6f6f6;
}

/* L'invito: un filo d'oro e "Scopri". Dove c'e' un mouse sale al passaggio;
   sul dito, dove il passaggio non esiste, c'e' sempre. */
.abm-hv__scopri {
	display: block;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid rgba(255, 206, 83, 0.45);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.2px;
	color: var(--hv-oro);
}

.abm-hv__scopri span {
	display: inline-block;
	margin-left: 6px;
	transition: transform 0.3s ease;
}

.abm-hv__giostra .abm-hv__link:hover .abm-hv__scopri span {
	transform: translateX(5px);
}

@media (hover: hover) and (pointer: fine) {
	.abm-hv__testi {
		transform: translateY(44px);
	}

	.abm-hv__scopri {
		opacity: 0;
		transition: opacity 0.35s ease;
	}

	.abm-hv__giostra .abm-hv__link:hover .abm-hv__testi,
	.abm-hv__giostra .abm-hv__link:focus-visible .abm-hv__testi {
		transform: translateY(0);
	}

	.abm-hv__giostra .abm-hv__link:hover .abm-hv__scopri,
	.abm-hv__giostra .abm-hv__link:focus-visible .abm-hv__scopri {
		opacity: 1;
	}

	.abm-hv__giostra .abm-hv__griglia,
	.abm-hv__giostra .abm-hv__link {
		cursor: grab;
	}

	.abm-hv__giostra.pb-caro--presa .abm-hv__link {
		cursor: grabbing;
	}
}

/* La foto e il link non si staccano dal binario quando lo si trascina. */
.abm-hv__giostra .abm-hv__link,
.abm-hv__giostra img {
	-webkit-user-drag: none;
	user-select: none;
}

.abm-hv__giostra.pb-caro--altro .abm-hv__griglia {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent 100%);
}

.abm-hv__giostra.pb-caro--presa .abm-hv__griglia,
.abm-hv__giostra.pb-caro--lancio .abm-hv__griglia {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.abm-hv__giostra.pb-caro--presa .abm-hv__griglia {
	cursor: grabbing;
	-webkit-user-select: none;
	user-select: none;
}

/* --- L'avanzamento: segmenti sottili al posto dei pallini --- */
.abm-hv .abm-hv__giostra .pb-caro__punti {
	gap: 6px;
	margin: 22px 0 0;
	justify-content: flex-start;
}

.abm-hv .abm-hv__giostra .pb-caro__punto {
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.16) !important;
	transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.abm-hv .abm-hv__giostra .pb-caro__punto:hover,
.abm-hv .abm-hv__giostra .pb-caro__punto:focus {
	background: rgba(255, 255, 255, 0.4) !important;
}

.abm-hv .abm-hv__giostra .pb-caro__punto--attivo,
.abm-hv .abm-hv__giostra .pb-caro__punto--attivo:hover,
.abm-hv .abm-hv__giostra .pb-caro__punto--attivo:focus {
	width: 52px;
	background: #FFCE53 !important;
}

/* --- Le tre promesse, in fondo alla capsula --- */
.abm-hv__capsula .abm-hv__promesse {
	margin: 34px calc(var(--hv-bordo) * -1) 0;
	padding: 0;
	border-top: 1px solid var(--hv-filo);
	background: rgba(255, 255, 255, 0.015);
	gap: 0;
}

.abm-hv__capsula .abm-hv__promesse li {
	padding: 26px 24px 28px;
	border-left: 1px solid var(--hv-filo);
}

.abm-hv__capsula .abm-hv__promesse li:first-child {
	border-left: 0;
}

.abm-hv__capsula .abm-hv__promesse strong {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 17px;
	line-height: 1.3;
	margin-bottom: 6px;
}

.abm-hv__capsula .abm-hv__promesse span {
	font-size: 13px;
	line-height: 1.6;
}

@media (min-width: 600px) {
	.abm-hv__giostra {
		--hv-scheda: 42%;
	}
}

@media (min-width: 900px) {
	.abm-hv__giostra {
		--hv-scheda: 27.2%;
	}
}

@media (max-width: 921px) {
	.abm-hv__capsula {
		--hv-bordo: 26px;
		padding-top: 30px;
	}
}

@media (max-width: 700px) {
	.abm-hv__capsula {
		--hv-bordo: 18px;
		padding-top: 26px;
		border-radius: 16px;
	}

	.abm-hv .abm-hv__giostra-titolo,
	.entry-content .abm-hv .abm-hv__giostra-titolo,
	.abm-hv .abm-hv__giostra.pb-caro .pb-caro__testa h2 {
		font-size: 22px;
	}

	.abm-hv .abm-hv__giostra .pb-caro__testa,
	.abm-hv .abm-hv__giostra-titolo,
	.entry-content .abm-hv .abm-hv__giostra-titolo {
		margin-bottom: 18px;
	}

	.abm-hv__giostra .abm-hv__griglia {
		gap: 12px;
	}

	.abm-hv__giostra .abm-hv__nome {
		font-size: 21px;
	}

	.abm-hv__testi {
		padding: 0 16px 16px;
	}

	.abm-hv .abm-hv__giostra .pb-caro__punti {
		justify-content: center;
		margin-top: 18px;
	}

	.abm-hv .abm-hv__giostra .pb-caro__punto {
		width: 16px;
	}

	.abm-hv .abm-hv__giostra .pb-caro__punto--attivo {
		width: 34px;
	}

	.abm-hv__capsula .abm-hv__promesse {
		margin-top: 26px;
	}

	.abm-hv__capsula .abm-hv__promesse li {
		padding: 18px 18px 20px;
		border-left: 0;
		border-top: 1px solid var(--hv-filo);
	}

	.abm-hv__capsula .abm-hv__promesse li:first-child {
		border-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abm-hv__giostra .abm-hv__griglia {
		scroll-behavior: auto;
	}

	.abm-hv__giostra .abm-hv__foto img,
	.abm-hv__testi,
	.abm-hv__scopri,
	.abm-hv__scopri span,
	.abm-hv .abm-hv__giostra .pb-caro__punto,
	.abm-hv .abm-hv__giostra .pb-caro__freccia {
		transition: none;
	}

	.abm-hv__giostra .abm-hv__link:hover .abm-hv__foto img {
		transform: scale(1.01);
	}
}

/* --- Le tre promesse --- */
.abm-hv__promesse {
	list-style: none;
	margin: 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--hv-filo);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.abm-hv__promesse li {
	margin: 0;
	text-align: center;
}

.abm-hv__promesse strong {
	display: block;
	color: var(--hv-oro);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}

.abm-hv__promesse span {
	display: block;
	color: var(--hv-tenue);
	font-size: 14px;
	line-height: 1.5;
}

/* --- La guida e le domande: veste del 18 settembre 2026 ---
   Pannello scuro, cornice sottile, filo d'oro in testa: lo stesso linguaggio
   della fascia eventi (css/calendario-eventi.css, sezione 13) e del negozio. */
.abm-hv--guida {
	background: #080808;
	padding-top: 76px;
	padding-bottom: 72px;
}

.abm-hv--domande {
	border-top: 1px solid var(--hv-filo);
	padding-top: 76px;
	padding-bottom: 80px;
}

.abm-hv .abm-hv__titolo--h2,
.entry-content .abm-hv .abm-hv__titolo--h2 {
	font-size: 34px;
	margin-bottom: 18px;
}

.abm-hv__testata {
	text-align: center;
	margin: 0 0 44px;
}

.abm-hv__testata .abm-hv__testo {
	max-width: 62ch;
	margin-bottom: 0;
	color: var(--hv-tenue);
}

/* Il filo d'oro sotto il titolo. */
.abm-hv__filo {
	display: block;
	width: 64px;
	height: 1px;
	margin: 0 auto 20px;
	background: linear-gradient(90deg, transparent, var(--hv-oro), transparent);
}

/* --- Le quattro schede --- */
.abm-hv .abm-hv__schede {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.abm-hv__scheda {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 30px 30px 28px;
	background: linear-gradient(180deg, #121212 0%, #0d0d0d 100%);
	border: 1px solid #2e2e2e;
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.25s ease;
}

.abm-hv__scheda::before,
.abm-hv__domande::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 206, 83, 0.6), transparent);
}

.abm-hv__scheda:hover,
.abm-hv__scheda:focus-within {
	border-color: rgba(255, 206, 83, 0.38);
}

.abm-hv__scheda-testa {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 16px;
}

/* La riga sottile che porta l'occhio dal numero al bordo della scheda. */
.abm-hv__scheda-testa::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--hv-filo);
	transform: translateY(-4px);
}

.abm-hv__numero {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--hv-oro);
}

.abm-hv__scheda-sopra {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.2px;
	color: var(--hv-tenue);
	white-space: nowrap;
}

.abm-hv .abm-hv__scheda-titolo,
.entry-content .abm-hv .abm-hv__scheda-titolo {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	text-transform: none;
	color: #f6f6f6;
	margin: 0 0 12px;
}

.abm-hv__scheda-testo {
	font-size: 15px;
	line-height: 1.75;
	color: var(--hv-testo);
	margin: 0 0 24px;
}

.abm-hv__vai {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: auto 0 0;
}

/* I pulsanti verso le categorie: oro a riposo, oro pieno e testo nero al
   passaggio. Mai oro su oro, mai link scuri. */
.abm-hv .abm-hv__pillola,
.abm-hv .abm-hv__pillola:visited {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 18px;
	border: 1px solid rgba(255, 206, 83, 0.5);
	border-radius: 999px;
	color: var(--hv-oro);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* La freccia: dentro un inline-flex lo spazio scritto nel testo non conta. */
.abm-hv__pillola span {
	margin-left: 8px;
	transition: transform 0.2s ease;
}

.abm-hv__pillola:hover span,
.abm-hv__pillola:focus-visible span {
	transform: translateX(3px);
}

.abm-hv .abm-hv__pillola:hover,
.abm-hv .abm-hv__pillola:focus-visible {
	background: var(--hv-oro);
	border-color: var(--hv-oro);
	color: #0a0a0a;
}

.abm-hv__scorri {
	display: none;
}

/* --- Le domande: titolo e invito a sinistra, elenco a destra --- */
.abm-hv__due {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: start;
}

.abm-hv__due-testo {
	position: sticky;
	top: 120px;
}

.abm-hv__due-testo .abm-hv__sopra,
.abm-hv .abm-hv__due-testo .abm-hv__titolo,
.entry-content .abm-hv .abm-hv__due-testo .abm-hv__titolo,
.abm-hv__due-testo .abm-hv__testo {
	text-align: left;
}

.abm-hv__due-testo .abm-hv__filo {
	margin-left: 0;
	background: linear-gradient(90deg, var(--hv-oro), transparent);
}

.abm-hv__due-testo .abm-hv__testo {
	margin: 0 0 28px;
	max-width: 44ch;
	color: var(--hv-tenue);
}

.abm-hv .abm-hv__bottone,
.abm-hv .abm-hv__bottone:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid var(--hv-oro);
	border-radius: 999px;
	background: var(--hv-oro);
	color: #0a0a0a;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.abm-hv .abm-hv__bottone:hover,
.abm-hv .abm-hv__bottone:focus-visible {
	background: #ffdb7d;
	color: #0a0a0a;
	transform: translateY(-1px);
}

.abm-hv__domande {
	position: relative;
	background: linear-gradient(180deg, #121212 0%, #0d0d0d 100%);
	border: 1px solid #2e2e2e;
	border-radius: 16px;
	overflow: hidden;
}

.abm-hv__domanda {
	border-bottom: 1px solid var(--hv-filo);
	transition: background-color 0.25s ease;
}

.abm-hv__domanda:last-child {
	border-bottom: 0;
}

.abm-hv__domanda[open] {
	background: rgba(255, 206, 83, 0.035);
}

.abm-hv__domanda summary {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
	padding: 21px 68px 21px 28px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.45;
	color: #f6f6f6;
	transition: color 0.2s ease;
}

.abm-hv__domanda summary::-webkit-details-marker {
	display: none;
}

/* Il segno: un cerchio a filo d'oro col piu', che ruota in una croce. */
.abm-hv__domanda summary::after {
	content: "+";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	border: 1px solid rgba(255, 206, 83, 0.5);
	border-radius: 50%;
	color: var(--hv-oro);
	font-size: 18px;
	font-weight: 400;
	line-height: 25px;
	text-align: center;
	transition: transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

.abm-hv__domanda[open] summary::after {
	transform: rotate(45deg);
	background: var(--hv-oro);
	color: #0a0a0a;
}

.abm-hv__domanda[open] summary,
.abm-hv__domanda summary:hover,
.abm-hv__domanda summary:focus-visible {
	color: var(--hv-oro);
}

.abm-hv__domanda summary:focus-visible {
	outline: 1px solid rgba(255, 206, 83, 0.6);
	outline-offset: -4px;
}

.abm-hv__domanda p {
	margin: 0;
	padding: 0 68px 24px 28px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--hv-testo);
	animation: abm-hv-apri 0.35s ease both;
}

@keyframes abm-hv-apri {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* Dove il browser lo sa fare, la risposta si apre in altezza invece di
   comparire di colpo. Altrove resta la dissolvenza qui sopra. */
@supports (interpolate-size: allow-keywords) {
	.abm-hv__domande {
		interpolate-size: allow-keywords;
	}

	.abm-hv__domanda::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
	}

	.abm-hv__domanda[open]::details-content {
		block-size: auto;
	}
}

/* --- Gli H1 della pagina scesi a H2: tengono la veste che avevano.
   I numeri sono quelli che Astra da' a h1 (70 / 50 / 40, interlinea 1,1). --- */
.entry-content h2[data-abm-ex-h1] {
	font-size: 70px;
	font-size: 4.375rem;
	line-height: 1.1em;
}

@media (max-width: 921px) {
	.entry-content h2[data-abm-ex-h1] {
		font-size: 50px;
	}

	.abm-hv {
		padding: 48px 16px;
	}

	.abm-hv__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.abm-hv .abm-hv__titolo,
	.entry-content .abm-hv .abm-hv__titolo {
		font-size: 30px;
	}

	.abm-hv .abm-hv__titolo--h2,
	.entry-content .abm-hv .abm-hv__titolo--h2 {
		font-size: 28px;
	}

	.abm-hv--guida,
	.abm-hv--domande {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.abm-hv__testata {
		margin-bottom: 32px;
	}

	/* Le domande su una colonna: il titolo torna al centro come gli altri. */
	.abm-hv__due {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.abm-hv__due-testo {
		position: static;
		text-align: center;
	}

	.abm-hv__due-testo .abm-hv__sopra,
	.abm-hv .abm-hv__due-testo .abm-hv__titolo,
	.entry-content .abm-hv .abm-hv__due-testo .abm-hv__titolo,
	.abm-hv__due-testo .abm-hv__testo {
		text-align: center;
	}

	.abm-hv__due-testo .abm-hv__filo {
		margin-left: auto;
		background: linear-gradient(90deg, transparent, var(--hv-oro), transparent);
	}

	.abm-hv__due-testo .abm-hv__testo {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 700px) {
	.abm-hv__promesse {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* Le quattro schede scorrono di lato, con l'aggancio e la vicina che sbuca:
	   la fascia e' alta una scheda invece di quattro. Niente JavaScript. */
	.abm-hv .abm-hv__schede {
		display: flex;
		gap: 14px;
		margin: 0 -16px;
		padding: 4px 16px 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.abm-hv .abm-hv__schede::-webkit-scrollbar {
		display: none;
	}

	.abm-hv__scheda {
		flex: 0 0 84%;
		scroll-snap-align: start;
		padding: 26px 22px 24px;
	}

	.abm-hv .abm-hv__scheda-titolo,
	.entry-content .abm-hv .abm-hv__scheda-titolo {
		font-size: 20px;
	}

	.abm-hv__scorri {
		display: block;
		margin: 14px 0 0;
		text-align: center;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: var(--hv-tenue);
	}

	.abm-hv__scorri::after {
		content: " 92";
		color: var(--hv-oro);
	}

	.abm-hv__domanda summary {
		padding: 19px 60px 19px 20px;
		font-size: 15px;
	}

	.abm-hv__domanda summary::after {
		right: 18px;
	}

	.abm-hv__domanda p {
		padding: 0 20px 22px;
	}

}

@media (max-width: 544px) {
	.entry-content h2[data-abm-ex-h1] {
		font-size: 40px;
	}

	.abm-hv__nome {
		font-size: 16px;
		padding: 12px 12px 2px;
	}

	.abm-hv__conta {
		padding: 0 12px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abm-hv .abm-hv__link,
	.abm-hv__scheda,
	.abm-hv .abm-hv__pillola,
	.abm-hv .abm-hv__bottone,
	.abm-hv__domanda summary::after {
		transition: none;
	}

	.abm-hv__domanda p {
		animation: none;
	}

	.abm-hv .abm-hv__link:hover,
	.abm-hv .abm-hv__link:focus-visible {
		transform: none;
	}
}