/*
 * Pagina prodotto (scheda carabina) — la struttura del prototipo "Kinetic".
 *
 *   HERO → STORYTELLING → CONFIGURAZIONI → GALLERY → SPECIFICHE → PREZZO → DEALER
 *
 * I colori e i caratteri vengono dal kit di Elementor attraverso le variabili
 * di victrix.css (--victrix-*): qui si decidono solo misure, ritmo e
 * comportamento. Le sezioni sono widget del tema dentro al template "Single
 * carabina", ognuna col suo blocco qui sotto.
 *
 * Carica solo dove c'e' uno di quei widget (get_style_depends()).
 */

.vx-config,
.vx-galleria,
.vx-prezzi,
.vx-storia,
.vx-specifiche,
.vx-specifiche__testa {
	--vx-filo: rgba(255, 255, 255, .14);
	--vx-filo-forte: rgba(255, 255, 255, .34);
	--vx-superficie: var(--victrix-surface, #0b0b0b);
	--vx-superficie-2: #131313;
	--vx-tenue: rgba(242, 242, 238, .56);
	--vx-raggio: 18px;
	--vx-titoli: Augustus, var(--victrix-carattere);
	--vx-lato: var(--victrix-margine, 48px);
	color: var(--victrix-text, #fff);
}

/* --- Elementi comuni ------------------------------------------------------ */

.vx-occhiello {
	margin: 0 0 22px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--vx-tenue);
}

.vx-titolo {
	margin: 0;
	font-family: var(--vx-titoli);
	font-size: clamp(26px, 3.8vw, 56px);
	font-weight: 400;
	letter-spacing: .12em;
	line-height: 1.15;
	text-transform: uppercase;
	color: inherit;
}

.vx-config .vx-bottone,
.vx-galleria .vx-bottone,
.vx-prezzi .vx-bottone,
.vx-bottone {
	display: inline-block;
	padding: 15px 34px;
	border: 1px solid var(--vx-filo-forte, rgba(255, 255, 255, .34));
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.vx-bottone:hover,
.vx-bottone:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #000;
}

/* --- Testata --------------------------------------------------------------- */

.victrix-testata-occhiello {
	margin: 0 0 34px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(242, 242, 238, .56);
}

/* La linea che scende dal centro della testata e invita a scorrere: un filo
   tenue e, dentro, un tratto luminoso che cade dall'alto verso il basso
   (prima cresceva dal basso e sembrava indicare di salire). */
.victrix-testata-scroll {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 16vh;
	overflow: hidden;
	background: rgba(255, 255, 255, .22);
	pointer-events: none;
}

.victrix-testata-scroll::after {
	content: "";
	position: absolute;
	left: 0;
	top: -38%;
	width: 1px;
	height: 38%;
	background: linear-gradient(180deg, transparent, #fff 55%, transparent);
	animation: vx-impulso 2.4s ease-in-out infinite;
}

@keyframes vx-impulso {
	0% { top: -38%; opacity: 0; }
	18% { opacity: 1; }
	78% { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

/* --- Storytelling ---------------------------------------------------------- */

/* Come nella pagina Bugatti W16 Mistral:
   - l'immagine resta ferma sullo sfondo (sticky) e il testo le scorre sopra
     dal basso verso l'alto, alla velocita' dello scroll;
   - la schermata dopo sale e copre quella ferma, portandosi dietro il suo
     testo, che continua a salire anche quando la sua immagine si e' fermata.

   Perche' la schermata ferma resti sotto mentre l'altra la copre, ogni
   schermata e' piu' alta di uno schermo intero di quanto serva e restituisce
   quello spazio con un margine negativo: la successiva le si sovrappone per
   l'ultimo schermo. --vx-sosta e' lo scroll in cui l'immagine e' a tutto
   schermo e scoperta. */
.vx-storia {
	--vx-velo: .72;
	position: relative;
}

.vx-storia__schermata {
	--vx-sosta: 100vh;
	position: relative;
	/* Ogni schermata e' un livello: quella che arriva dopo sta sopra. */
	z-index: 0;
	height: calc(200vh + var(--vx-sosta));
	margin-bottom: -100vh;
	background: #000;
}

.vx-storia__schermata:last-child {
	height: calc(100vh + var(--vx-sosta));
	margin-bottom: 0;
}

.vx-storia__schermata--muta {
	--vx-sosta: 40vh;
}

.vx-storia__fondo {
	position: sticky;
	top: 0;
	/* La spinta della copertura la da' lo script (scheda-modello.js). */
	will-change: transform;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
}

/* Doppia classe: le regole di Elementor sulle immagini (height: auto)
   altrimenti vincono e la foto non riempie la schermata. */
.vx-storia .vx-storia__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.vx-storia__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, var(--vx-velo)));
}

/* Il testo sta a un terzo della schermata: entra in vista insieme alla sua
   immagine mentre sale, e se ne va prima che arrivi quella dopo. */
.vx-storia__testo {
	position: absolute;
	z-index: 2;
	top: 32vh;
	left: var(--vx-lato);
	right: var(--vx-lato);
	max-width: 540px;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
}

/* La prima schermata sale con la pagina, senza la spinta delle altre (vedi
   scheda-modello.js): quando e' a tutto schermo il suo testo sarebbe gia' a
   un terzo. Lo si abbassa di quanto le altre arrivano in anticipo, cosi'
   tutti i testi partono dal basso dell'immagine. */
.vx-storia__schermata:first-child .vx-storia__testo {
	top: 62vh;
}

.vx-storia__schermata--centro .vx-storia__testo {
	margin: 0 auto;
	text-align: center;
}

.vx-storia__schermata--destra .vx-storia__testo {
	left: auto;
	text-align: right;
}

.vx-storia__titolo {
	margin: 0;
	font-family: var(--vx-titoli);
	font-size: clamp(22px, 2.6vw, 40px);
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #fff;
}

.vx-storia__copy {
	margin: 22px 0 0;
	max-width: 480px;
	font-size: 15px;
	line-height: 1.8;
	color: rgba(242, 242, 238, .9);
}

.vx-storia__schermata--destra .vx-storia__copy {
	margin-left: auto;
}

/* Il testo e' formattato (paragrafi, grassetto, link): i paragrafi senza i
   margini del tema, i link sottolineati come nel resto del sito. */
.vx-storia__copy p {
	margin: 0;
}

.vx-storia__copy p + p {
	margin-top: .8em;
}

.vx-storia__copy a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.vx-storia__copy a:hover {
	color: #fff;
}

.vx-storia__schermata--centro .vx-storia__copy {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {
	.vx-storia__schermata {
		--vx-sosta: 90vh;
	}

	.vx-storia__testo {
		top: 30vh;
	}

	.vx-storia__schermata:first-child .vx-storia__testo {
		top: 58vh;
	}

	/* Su telefono tutti i testi a sinistra: il testo occupa quasi tutta la
	   larghezza, e un paragrafo allineato a destra o al centro si legge male.
	   L'alternanza scelta nella scheda resta per lo schermo largo. */
	.vx-storia__schermata .vx-storia__testo,
	.vx-storia__schermata--destra .vx-storia__testo,
	.vx-storia__schermata--centro .vx-storia__testo {
		left: var(--vx-lato);
		right: var(--vx-lato);
		margin: 0;
		text-align: left;
	}

	.vx-storia__schermata--destra .vx-storia__copy,
	.vx-storia__schermata--centro .vx-storia__copy {
		margin-left: 0;
		margin-right: 0;
	}
}

/* --- Configurazioni -------------------------------------------------------- */

.vx-config {
	padding: clamp(80px, 12vw, 220px) var(--vx-lato) clamp(60px, 9vw, 160px);
	background: var(--victrix-bg, #050505);
}

.vx-config__testa {
	max-width: 900px;
	margin-bottom: clamp(40px, 6vw, 110px);
}

.vx-config__intro {
	max-width: 560px;
	margin: 28px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--vx-tenue);
}

.vx-config__griglia {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.vx-config__griglia--2 {
	grid-template-columns: repeat(2, 1fr);
}

.vx-config__griglia--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Il box: deve dire "si sceglie" senza sembrare la card di un negozio. Al
   passaggio un bagliore discreto sale dal basso; acceso resta il bagliore e
   il bordo si schiarisce. */
.vx-config .vx-config__box {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 400px;
	padding: 42px 38px 38px;
	overflow: hidden;
	border: 1px solid var(--vx-filo);
	border-radius: var(--vx-raggio);
	background: var(--vx-superficie);
	cursor: pointer;
	transition: background .45s ease, border-color .45s ease;
}

.vx-config__box::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 65%);
	opacity: 0;
	transition: opacity .45s ease;
}

.vx-config__box > * {
	position: relative;
	z-index: 1;
}

/* Box con immagine: la foto sta sotto un velo che scurisce verso il basso,
   dove stanno calibri e azione, e si schiarisce un poco al passaggio. */
.vx-config .vx-config__box > .vx-config__sfondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: .55;
	transition: opacity .45s ease, transform .8s ease;
}

.vx-config__box--immagine::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(5, 5, 5, .55), rgba(5, 5, 5, .2) 45%, rgba(5, 5, 5, .85));
}

.vx-config .vx-config__box--immagine:hover > .vx-config__sfondo,
.vx-config .vx-config__box--immagine.is-attivo > .vx-config__sfondo {
	opacity: .75;
	transform: scale(1.03);
}

.vx-config__box:hover,
.vx-config__box:focus-visible {
	background: var(--vx-superficie-2);
	border-color: var(--vx-filo-forte);
	outline: none;
}

.vx-config__box:hover::before,
.vx-config__box:focus-visible::before,
.vx-config__box.is-attivo::before {
	opacity: 1;
}

.vx-config__box.is-attivo {
	background: var(--vx-superficie-2);
	border-color: rgba(255, 255, 255, .7);
}

.vx-config__tipo {
	min-height: 16px;
	margin: 0 0 64px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--vx-tenue);
}

.vx-config__nome {
	margin: 0;
	font-family: var(--vx-titoli);
	font-size: clamp(22px, 2.4vw, 36px);
	font-weight: 400;
	letter-spacing: .12em;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
}

/* Il prezzo della configurazione, sopra i calibri (anteprima della pagina
   prodotto). Arriva dopo, dall'endpoint dei prezzi: il posto e' tenuto
   intanto, cosi' il box non salta; fuori dall'Unione lo script lo toglie. */
.vx-config__prezzo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	min-height: 74px; /* 40 di spazio sopra + la riga del prezzo */
	margin: auto 0 0;
	padding: 40px 0 0;
	opacity: 0;
	transition: opacity .45s ease;
}

.vx-config__prezzo.is-pronto {
	opacity: 1;
}

.vx-config__prezzo + .vx-calibri {
	margin-top: 0;
	padding-top: 18px;
}

.vx-config__prezzo-valore {
	font-size: clamp(19px, 2vw, 28px);
	font-weight: 300;
	letter-spacing: .02em;
	line-height: 1.2;
	color: #fff;
}

.vx-config__prezzo-iva {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vx-tenue);
}

.vx-calibri {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin: auto 0 0;
	padding: 40px 0 0;
	list-style: none;
}

.vx-calibro {
	padding-bottom: 6px;
	border-bottom: 1px solid var(--vx-filo-forte, rgba(255, 255, 255, .34));
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.3;
	color: rgba(242, 242, 238, .85);
}

.vx-config__azione {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 30px 0 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--vx-tenue);
}

.vx-config__x {
	display: none;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0;
}

.vx-config__box.is-attivo .vx-config__azione {
	color: #fff;
}

.vx-config__box.is-attivo .vx-config__x {
	display: inline;
}

/* --- Galleria -------------------------------------------------------------- */

.vx-galleria {
	padding: clamp(70px, 10vw, 180px) 0 0;
	border-top: 1px solid var(--vx-filo);
	background: #000;
	scroll-margin-top: 80px;
}

.vx-galleria__testa {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	padding: 0 var(--vx-lato) 50px;
}

.vx-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vx-filtri .vx-filtro {
	padding: 11px 20px;
	border: 1px solid var(--vx-filo-forte);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .18em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.vx-filtri .vx-filtro:hover,
.vx-filtri .vx-filtro:focus-visible {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.vx-filtri .vx-filtro[aria-pressed="true"] {
	background: #fff;
	border-color: #fff;
	color: #000;
}

/* Il filtro attivo, fra le Configurazioni e le foto, con la sua X. */
.vx-filtro-attivo {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 var(--vx-lato) 28px;
}

.vx-filtro-attivo[hidden] {
	display: none;
}

.vx-filtro-attivo__nome {
	padding: 10px 18px;
	border: 1px solid var(--vx-filo-forte);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.vx-galleria .vx-filtro-attivo__x {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--vx-filo-forte);
	border-radius: 50%;
	background: none;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.vx-galleria .vx-filtro-attivo__x:hover,
.vx-galleria .vx-filtro-attivo__x:focus-visible {
	background: none;
	border-color: #fff;
	color: #fff;
}

.vx-galleria__palco {
	position: relative;
}

.vx-galleria__nastro {
	display: flex;
	overflow-x: auto;
	/* Niente scroll-snap: lo scorrimento e' libero e l'aggancio lo fa lo script. */
	scrollbar-width: none;
	cursor: grab;
}

.vx-galleria__nastro::-webkit-scrollbar {
	display: none;
}

.vx-galleria__nastro.is-trascinato {
	cursor: grabbing;
	user-select: none;
}

/* Nello slider tutte le foto hanno la stessa altezza e la loro larghezza
   naturale: niente ritaglio e niente foto rimpicciolite dentro un riquadro.
   Le panoramiche escono dallo schermo e si scorrono. */
.vx-galleria__foto {
	position: relative;
	flex: 0 0 auto;
	height: 56vh;
	min-height: 380px;
	margin-right: 2px;
	overflow: hidden;
	background: #0b0b0b;
}

.vx-galleria__foto[hidden] {
	display: none;
}

.vx-galleria .vx-galleria__foto img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	transition: opacity .6s ease, transform .8s ease;
	-webkit-user-drag: none;
}

.vx-galleria__foto:hover img {
	transform: scale(1.02);
}

/* Caricamento: finche' la foto non arriva il riquadro ha gia' le sue misure
   (dalle proporzioni dell'immagine), un fondo scuro e un cerchio che gira al
   centro; poi la foto compare con una dissolvenza. */
.vx-galleria .vx-galleria__img {
	opacity: 0;
	transition: opacity .6s ease, transform .8s ease;
}

.vx-galleria .is-caricata .vx-galleria__img {
	opacity: 1;
}

.vx-galleria__attesa {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-top-color: rgba(255, 255, 255, .8);
	border-radius: 50%;
	animation: vx-gira .9s linear infinite;
	pointer-events: none;
	transition: opacity .3s ease;
}

.vx-galleria .is-caricata .vx-galleria__attesa {
	opacity: 0;
	animation: none;
}

@keyframes vx-gira {
	to { transform: rotate(360deg); }
}

/* Nella griglia di "Vedi tutto" invece i riquadri sono quadrati: le foto li
   riempiono, e quelle di prodotto lunghe e basse ci stanno intere sul loro
   fondo bianco. */
.vx-galleria.is-espansa .vx-galleria__foto img {
	width: 100%;
	object-fit: cover;
}

.vx-galleria.is-espansa .vx-galleria__foto--intera {
	background: #fff;
}

.vx-galleria.is-espansa .vx-galleria__foto--intera img {
	object-fit: contain;
	padding: 4%;
}

/* Su una pastiglia scura: molte foto sono su fondo bianco. */
.vx-galleria__didascalia {
	position: absolute;
	left: 24px;
	bottom: 22px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(5, 5, 5, .6);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.vx-galleria .vx-freccia {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--vx-filo-forte);
	border-radius: 50%;
	background: rgba(5, 5, 5, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}

.vx-galleria .vx-freccia:hover:not(:disabled),
.vx-galleria .vx-freccia:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #000;
}

.vx-galleria .vx-freccia:disabled {
	opacity: .25;
	cursor: default;
}

.vx-freccia--prima {
	left: 24px;
}

.vx-freccia--dopo {
	right: 24px;
}

/* "Vedi tutto": le stesse foto passano da slider a griglia quadrata. */
.vx-galleria.is-espansa .vx-galleria__nastro {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	overflow: visible;
	cursor: auto;
	animation: vx-entra .6s ease both;
}

.vx-galleria.is-espansa .vx-galleria__foto {
	flex: none;
	height: auto;
	min-height: 0;
	margin-right: 0;
	aspect-ratio: 1 / 1;
}

.vx-galleria.is-espansa .vx-freccia {
	display: none;
}

@keyframes vx-entra {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}

.vx-galleria__tutto {
	display: flex;
	justify-content: center;
	padding: 38px var(--vx-lato) 90px;
}

/* --- Specifiche ------------------------------------------------------------ */

/* Titolo a sinistra, modello e prezzi a destra (template definitivo di
   Marika: "Specifiche tecniche" con il logo del modello e una riga di
   prezzo per serie; il modello senza serie ha una riga sola, senza nome). */
.vx-specifiche__testa {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 5vw;
	margin-bottom: 56px;
}

.vx-spec-modello {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	padding-top: 34px;
}

.vx-spec-modello__logo {
	display: block;
	width: clamp(150px, 14vw, 200px);
	height: auto;
}

.vx-spec-modello__nome {
	font-family: var(--vx-titoli);
	font-size: clamp(26px, 2.6vw, 36px);
	letter-spacing: .14em;
	line-height: 1.1;
	text-transform: uppercase;
}

.vx-spec-prezzi {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	gap: 6px 18px;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.4;
	opacity: 0;
	transition: opacity .45s ease;
}

.vx-spec-prezzi.is-pronto {
	opacity: 1;
}

.vx-spec-prezzi__riga {
	display: contents;
}

.vx-spec-prezzi__nome {
	text-align: right;
}

.vx-spec-prezzi__valore {
	white-space: nowrap;
}

.vx-spec-prezzi__valore.is-solo {
	grid-column: 1 / -1;
	text-align: right;
}

/* Lo stesso HTML del prezzo dei box (victrix_prezzi_box), qui su una riga
   sola: "€ 5.490,00 IVA incl." senza maiuscoletto. */
.vx-spec-prezzi .vx-config__prezzo-valore,
.vx-spec-prezzi .vx-config__prezzo-iva {
	font-size: inherit;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.vx-spec-prezzi .vx-config__prezzo-iva {
	margin-left: .3em;
}

@media (max-width: 900px) {
	.vx-specifiche__testa {
		flex-direction: column;
		align-items: stretch;
		gap: 36px;
	}

	.vx-spec-modello {
		padding-top: 0;
		align-items: flex-start;
	}

	.vx-spec-prezzi {
		justify-content: start;
	}

	.vx-spec-prezzi__nome,
	.vx-spec-prezzi__valore.is-solo {
		text-align: left;
	}
}

.vx-specifiche__linguette {
	margin-bottom: 48px;
}

.vx-specifiche__sezione[hidden] {
	display: none;
}

/* --- Chiusura: Dealer | Contattaci ------------------------------------------
   Le regole stanno in victrix.css: la stessa chiusura e' anche in fondo alle
   pagine di linea, dove questo foglio non si carica. */

/* --- Prezzi e Dealer Finder ------------------------------------------------ */

.vx-prezzi {
	padding: clamp(80px, 12vw, 220px) var(--vx-lato) clamp(70px, 10vw, 180px);
	border-top: 1px solid var(--vx-filo);
	background: var(--victrix-bg, #050505);
	text-align: center;
}

.vx-prezzi__logo {
	display: block;
	width: clamp(240px, 34vw, 560px);
	height: auto;
	margin: 0 auto 7vw;
}

/* Il posto dei prezzi, finche' non arrivano: alto quanto una riga di
   colonne, cosi' il resto non salta. Se la zona non ha prezzi si chiude. */
.vx-prezzi__zona {
	min-height: 200px;
	transition: min-height .4s ease;
}

.vx-prezzi__zona.is-pronto {
	min-height: 0;
}

.vx-prezzi__zona > .vx-prezzi__elenco {
	animation: vx-entra .6s ease both;
}

.vx-prezzi__elenco {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1100px;
	margin: 0 auto;
	border-top: 1px solid var(--vx-filo);
	border-bottom: 1px solid var(--vx-filo);
}

.vx-prezzi__elenco--1 {
	grid-template-columns: 1fr;
	max-width: 520px;
}

.vx-prezzi__elenco--2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 800px;
}

.vx-prezzi__elenco--4 {
	grid-template-columns: repeat(4, 1fr);
	max-width: 1280px;
}

.vx-prezzi__colonna {
	padding: 44px 20px;
}

.vx-prezzi__colonna + .vx-prezzi__colonna {
	border-left: 1px solid var(--vx-filo);
}

.vx-prezzi__nome {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--vx-tenue);
}

.vx-prezzi__valore {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 52px);
	font-weight: 300;
	letter-spacing: .02em;
	line-height: 1.1;
	color: #fff;
}

.vx-prezzi__iva {
	margin: 12px 0 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vx-tenue);
}

.vx-dealer {
	max-width: 640px;
	margin: 9vw auto 0;
}

/* La stessa linea verticale della testata: chiude la pagina come l'ha aperta. */
.vx-dealer::before {
	content: "";
	display: block;
	width: 1px;
	height: 64px;
	margin: 0 auto 36px;
	background: linear-gradient(transparent, rgba(255, 255, 255, .6));
}

.vx-dealer__titolo {
	margin: 0;
	font-family: var(--vx-titoli);
	font-size: clamp(22px, 2.6vw, 38px);
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #fff;
}

.vx-dealer__testo {
	margin: 24px 0 44px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--vx-tenue);
}

/* --- Schermi -------------------------------------------------------------- */

@media (max-width: 1100px) {
	.vx-galleria.is-espansa .vx-galleria__nastro {
		grid-template-columns: repeat(3, 1fr);
	}

	.vx-config__griglia--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.vx-config__griglia,
	.vx-config__griglia--2,
	.vx-config__griglia--4 {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.vx-config .vx-config__box {
		min-height: 300px;
	}
}

@media (max-width: 800px) {
	.vx-galleria__testa {
		display: block;
	}

	.vx-filtri {
		margin-top: 30px;
	}

	.vx-galleria__foto {
		height: 46vh;
		min-height: 280px;
	}

	.vx-galleria.is-espansa .vx-galleria__nastro {
		grid-template-columns: repeat(2, 1fr);
	}

	.vx-galleria .vx-freccia {
		display: none;
	}

	.vx-prezzi__elenco,
	.vx-prezzi__elenco--2,
	.vx-prezzi__elenco--4 {
		grid-template-columns: 1fr;
	}

	.vx-prezzi__colonna + .vx-prezzi__colonna {
		border-left: 0;
		border-top: 1px solid var(--vx-filo);
	}

	.vx-prezzi__logo {
		margin-bottom: 12vw;
	}

	.vx-dealer {
		margin-top: 16vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vx-galleria__attesa {
		animation-duration: 2.4s;
	}

	.victrix-testata-scroll::after,
	.vx-galleria.is-espansa .vx-galleria__nastro {
		animation: none;
	}

	.vx-galleria__foto img {
		transition: none;
	}
}

/* Con lo scroll morbido acceso (assets/js/scorrimento-morbido.js) lo scroll
   "smooth" del browser si spegne: i due si inseguirebbero a vicenda. */
html.lenis {
	scroll-behavior: auto !important;
}