/* ==========================================================================
   Carini Rent - foglio di stile unico, mobile first.
   Struttura: token, base, componenti, layout, moduli, catalogo, scheda, utility.
   ========================================================================== */

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/unbounded-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+20AC, U+2000-206F;
}

/* --- Token (tema scuro futuristico) --------------------------------------- */
:root {
	color-scheme: dark;
	--ink: #eaf1f6;
	--ink-2: #a9b7c4;
	--muted: #7d8c9a;
	--line: rgb(170 200 225 / 12%);
	--line-2: rgb(170 200 225 / 22%);
	--bg: #06090d;
	--surface: #0c1117;
	--surface-2: #121a22;
	--surface-3: #19232d;
	--accent: #39d5f2;
	--accent-strong: #84e8fa;
	--accent-soft: rgb(57 213 242 / 13%);
	--accent-light: #8fe9fa;
	--on-accent: #03141b;
	--promo: #ffc46b;
	--promo-bg: rgb(255 180 71 / 14%);
	--good: #52d79d;
	--warn: #f5b454;
	--danger: #ff7676;
	--slate-1: #04070a;
	--slate-2: #0f1720;
	--slate: linear-gradient(135deg, #05080c 0%, #0f1922 100%);
	--mist: linear-gradient(180deg, #090e14 0%, #0b1219 100%);
	--glow: 0 0 0 1px rgb(57 213 242 / 40%), 0 14px 44px -14px rgb(57 213 242 / 45%);

	--r-sm: 8px;
	--r: 12px;
	--r-card: 18px;
	--r-lg: 24px;

	--shadow-1: 0 1px 2px rgb(0 0 0 / 45%);
	--shadow-2: 0 20px 44px -22px rgb(0 0 0 / 75%);
	--shadow-3: 0 34px 80px -34px rgb(0 0 0 / 90%);

	--font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Unbounded", "Geist", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gutter: clamp(16px, 4vw, 40px);
	--maxw: 1320px;
	--header-h: 60px;
	--bar-h: 62px;

	interpolate-size: allow-keywords;
}
@media (min-width: 1024px) {
	:root { --header-h: 72px; }
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	background: radial-gradient(1100px 520px at 85% -8%, rgb(57 213 242 / 7%), transparent 62%), var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
h1, h2, h3, h4 { font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1, h2, .section__title, .hero__title, .catalog__title, .page-head__title, .panel__title, .cta__title, .promo-card__title, .empty__title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.035em; }
p { text-wrap: pretty; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }
[hidden] { display: none !important; }

.sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100;
	padding: .6rem 1rem; background: var(--accent); color: var(--on-accent); border-radius: var(--r);
}
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(760px + var(--gutter) * 2); }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }
.hide-mobile { display: none !important; }
@media (min-width: 1024px) { .hide-mobile { display: inline-flex !important; } }

/* --- Pulsanti ------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 46px; padding: .7rem 1.15rem;
	border: 1px solid transparent; border-radius: var(--r);
	font: 600 .9375rem/1.2 var(--font); text-decoration: none; white-space: nowrap;
	cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-strong); color: var(--on-accent); box-shadow: 0 10px 30px -12px rgb(57 213 242 / 70%); }
.btn--soft { background: var(--accent-soft); color: var(--accent-strong); }
.btn--soft { box-shadow: inset 0 0 0 1px rgb(57 213 242 / 22%); }
.btn--soft:hover { background: var(--accent); color: var(--on-accent); }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--light { background: var(--ink); color: var(--bg); }
.btn--light:hover { background: #fff; color: var(--bg); }
.btn--outline-light { background: transparent; border-color: rgb(252 253 253 / 45%); color: #fcfdfd; }
.btn--outline-light:hover { border-color: #fcfdfd; color: #fcfdfd; }
.btn--whatsapp { background: rgb(37 211 102 / 13%); color: #6fe7a3; box-shadow: inset 0 0 0 1px rgb(37 211 102 / 25%); }
.btn--whatsapp:hover { background: rgb(37 211 102 / 22%); color: #8ff0b8; }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: .45rem .9rem; font-size: .875rem; }
.btn--lg { min-height: 54px; font-size: 1rem; }

.icon-btn {
	position: relative; display: inline-grid; place-items: center;
	width: 44px; height: 44px; border: 0; border-radius: var(--r);
	background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
	transition: background-color .2s, color .2s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn--whatsapp { background: rgb(37 211 102 / 13%); color: #6fe7a3; }
.count {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
	display: inline-grid; place-items: center; border-radius: 99px;
	background: var(--accent); color: var(--on-accent); font: 700 .6875rem/1 var(--font); font-style: normal;
}
.btn .count { position: static; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font: 600 .875rem var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-arrow { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-arrow .icon { transition: translate .2s var(--ease); }
.link-arrow:hover .icon { translate: 3px 0; }

/* --- Header --------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgb(6 9 13 / 72%);
	-webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
	border-bottom: 1px solid var(--line);
}
.site-header__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; height: var(--header-h); }
.site-header__menu { margin-left: -8px; }
.site-header__tools { display: flex; align-items: center; gap: .25rem; }
.site-nav { display: none; }
@media (min-width: 1024px) {
	.site-header__bar { grid-template-columns: auto 1fr auto; gap: 2rem; }
	.site-header__menu { display: none; }
	.site-nav { display: block; justify-self: center; }
	.site-header__tools .btn { margin-left: .5rem; }
}
.site-nav__list, .site-nav .menu { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
	display: block; padding: .55rem .8rem; border-radius: var(--r);
	color: var(--ink-2); font-weight: 500; font-size: .9375rem; text-decoration: none; transition: background-color .2s, color .2s;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: var(--accent); }

.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand__mark {
	display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
	background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.04em;
	box-shadow: 0 0 24px -4px rgb(57 213 242 / 55%);
}
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.04em; }
.brand__name b { font-weight: 700; color: var(--accent); }
.brand__logo { height: 36px; width: auto; }

/* --- Pannelli (dialog nativi) --------------------------------------------- */
dialog.sheet {
	position: fixed; inset: auto 0 0 0; margin: 0; padding: 0;
	width: 100%; max-width: 100%; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
	border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
	transform: translateY(100%);
	transition: transform .34s var(--ease), overlay .34s allow-discrete, display .34s allow-discrete;
}
dialog.sheet[open] { transform: none; }
@starting-style { dialog.sheet[open] { transform: translateY(100%); } }
dialog::backdrop { background: rgb(12 18 24 / 0%); transition: background-color .34s, overlay .34s allow-discrete, display .34s allow-discrete; }
dialog[open]::backdrop { background: rgb(12 18 24 / 50%); }
@starting-style { dialog[open]::backdrop { background: rgb(12 18 24 / 0%); } }
@media (min-width: 768px) {
	dialog.sheet {
		inset: 0 0 0 auto; width: min(500px, 100%); height: 100dvh; max-height: none;
		border-radius: var(--r-lg) 0 0 var(--r-lg); transform: translateX(100%);
	}
	@starting-style { dialog.sheet[open] { transform: translateX(100%); } }
}
.sheet__head {
	position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .75rem .75rem .75rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.sheet__title { margin: 0; font-weight: 650; font-size: 1.125rem; }
.sheet__body { display: grid; gap: 1.1rem; padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); }
.sheet__note { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .8125rem; color: var(--muted); }
body:has(dialog[open]) { overflow: hidden; }

.menu-list ul { list-style: none; margin: 0; padding: 0; }
.menu-list a {
	display: flex; justify-content: space-between; padding: .95rem .25rem; border-bottom: 1px solid var(--line);
	font-size: 1.125rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
.menu-list .sub-menu a { padding-left: 1rem; font-size: 1rem; font-weight: 500; }
.menu-contacts { display: grid; gap: .6rem; }

/* --- Selettore Privati / P.IVA ------------------------------------------- */
.persona { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r); background: var(--surface-2); }
.persona button {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 38px;
	padding: .5rem .85rem; border: 0; border-radius: calc(var(--r) - 3px); background: transparent;
	color: var(--ink-2); font: 600 .875rem/1 var(--font); cursor: pointer; white-space: nowrap;
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.persona .icon { width: 1.05em; height: 1.05em; }
html[data-persona="private"] .persona [data-persona-set="private"],
html[data-persona="business"] .persona [data-persona-set="business"] { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.persona--block { display: flex; }
.persona--block button { flex: 1; }
.persona--seg { background: var(--surface); border: 1px solid var(--line); }
html[data-persona="private"] .persona--seg [data-persona-set="private"],
html[data-persona="business"] .persona--seg [data-persona-set="business"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.bg--slate .persona--seg { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 12%); }
.bg--slate .persona--seg button { color: rgb(252 253 253 / 78%); }
.persona--tabs { display: flex; width: 100%; padding: 0; background: transparent; border-radius: 0; border-bottom: 1px solid rgb(255 255 255 / 22%); }
.persona--tabs button { flex: 1; min-height: 48px; border-radius: 0; color: rgb(252 253 253 / 72%); }
html[data-persona="private"] .persona--tabs [data-persona-set="private"],
html[data-persona="business"] .persona--tabs [data-persona-set="business"] { background: transparent; color: #fcfdfd; box-shadow: inset 0 -2px 0 #fcfdfd; }
.persona--compact button { min-height: 34px; font-size: .8125rem; }
html[data-persona="private"] [data-audience="business"],
html[data-persona="business"] [data-audience="private"] { display: none !important; }

/* --- Sezioni (moduli) ----------------------------------------------------- */
.section { position: relative; }
.space--none { padding-block: 0; }
.space--s { padding-block: clamp(1.5rem, 3vw, 2rem); }
.space--m { padding-block: clamp(2.5rem, 5vw, 4rem); }
.space--l { padding-block: clamp(3rem, 7vw, 5.5rem); }
.bg--mist { background: var(--mist); }
.bg--slate { background: var(--slate); color: #fcfdfd; }
.bg--slate::before, .bg--mist::before { content: ""; position: absolute; top: 0; left: 50%; width: min(860px, 80%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgb(57 213 242 / 45%), transparent); }
.bg--accent { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); color: var(--on-accent); }
.bg--slate a:not(.btn), .bg--accent a:not(.btn) { color: inherit; }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.section__intro { max-width: 720px; }
.section__title { margin: 0; font-size: clamp(1.625rem, 3.4vw, 2.375rem); line-height: 1.12; letter-spacing: -.025em; }
.section__title--sm { font-size: 1.375rem; margin-bottom: 1rem; }
.section__text { margin: .6rem 0 0; color: var(--ink-2); font-size: 1.0625rem; max-width: 62ch; }
.bg--slate .section__text, .bg--accent .section__text { color: rgb(252 253 253 / 78%); }
.eyebrow { margin: 0 0 .5rem; color: var(--accent); font: 500 .75rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow--light { color: var(--accent-light); }

.ticks { display: grid; gap: .55rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.ticks li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.45; }
.ticks .icon { margin-top: .1em; color: var(--accent); }
.ticks--light li { color: rgb(252 253 253 / 92%); }
.ticks--light .icon { color: var(--accent-light); }

/* Comparsa allo scroll senza JavaScript (scroll-driven animations, miglioramento progressivo). */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.reveal { animation: cr-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
	}
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}
@keyframes cr-reveal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

/* --- Hero ----------------------------------------------------------------- */
.section--hero { isolation: isolate; overflow: hidden; color: #fcfdfd; background: var(--slate); }
.hero--plain { background: radial-gradient(900px 520px at 18% 105%, rgb(30 106 133 / 55%), transparent 62%), radial-gradient(700px 400px at 95% -10%, rgb(159 211 227 / 18%), transparent 60%), var(--slate); }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.section--hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(rgb(160 220 240 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(160 220 240 / 5%) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 30%, transparent 75%);
}
.hero--media::before { z-index: 0; }
.hero__inner { position: relative; z-index: 1; }
.hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.hero__video { opacity: 0; transition: opacity .8s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgb(14 21 28 / calc(var(--overlay) + 0.2)) 0%, rgb(14 21 28 / var(--overlay)) 50%, rgb(14 21 28 / calc(var(--overlay) * 0.55)) 100%);
}
.hero__inner { display: grid; gap: 2rem; padding-block: clamp(2rem, 6vw, 4rem) clamp(2.25rem, 6vw, 4rem); }
.hero__title { margin: 0 0 1rem; font-size: clamp(1.875rem, 4.6vw, 3.375rem); line-height: 1.06; letter-spacing: -.04em; max-width: 16ch; }
.hero__text { margin: 0 0 1.4rem; max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.1875rem); color: rgb(252 253 253 / 84%); }
.hero__car { display: block; max-width: 560px; margin: -1rem auto -1.75rem; }
.hero__car img { width: 100%; filter: drop-shadow(0 34px 28px rgb(0 0 0 / 38%)); }
@media (min-width: 1024px) { .hero__car { width: calc(100% + 4rem); max-width: 720px; margin: -.75rem 0 -3.5rem -2rem; } }
@media (min-width: 1024px) {
	.hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: 3.5rem; min-height: min(80vh, 740px); }
	.hero--plain .hero__inner { min-height: 0; }
}
.hero--compact .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero--compact .hero__title { max-width: 22ch; font-size: clamp(1.75rem, 4vw, 2.875rem); }
.hero--compact .hero__car:not(.hero__car--cutout) { display: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .25rem 0 0; }

/* Hero "dock": titolo in alto, auto al centro, barra di ricerca in vetro in basso. Ideale con il video in loop. */
.section--hero.hero--dock .hero__inner { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: min(70vh, 640px); padding-block: clamp(1.75rem, 5vw, 3.5rem) 7rem; }
.section--hero.hero--dock .hero__copy { max-width: 640px; }
.section--hero.hero--dock .hero__title { max-width: 19ch; }
.section--hero.hero--dock .hero__text { max-width: 52ch; }
.section--hero.hero--dock .ticks--light { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.section--hero.hero--dock .hero__bg::after { background: linear-gradient(180deg, rgb(6 9 13 / calc(var(--overlay) + .25)) 0%, rgb(6 9 13 / calc(var(--overlay) * .5)) 38%, rgb(6 9 13 / 0%) 58%, rgb(6 9 13 / .55) 82%, var(--bg) 100%), linear-gradient(90deg, rgb(6 9 13 / calc(var(--overlay) + .1)) 0%, transparent 55%); }
.hero__dock { position: relative; z-index: 2; margin-top: -5.5rem; padding-bottom: clamp(1.5rem, 4vw, 2.75rem); }
@media (min-width: 1024px) {
	.section--hero.hero--dock .hero__inner { min-height: min(86vh, 820px); padding-bottom: 9rem; }
	.section--hero.hero--dock .hero__title { font-size: clamp(2.25rem, 3.4vw, 3rem); }
	.section--hero.hero--dock .ticks--light { display: none; }
	.hero__dock { margin-top: -7.5rem; }
	.section--hero.hero--dock .hero__panel { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(220px, 260px); align-items: center; gap: 1.25rem 1.5rem; padding: 1.1rem 1.25rem; }
	.section--hero.hero--dock .persona--tabs { grid-row: 1; grid-column: 1; align-self: stretch; }
	.section--hero.hero--dock .tiles { grid-row: 1; grid-column: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.section--hero.hero--dock .tile { min-height: 0; padding: .75rem .85rem; }
	.section--hero.hero--dock .tile span { display: none; }
	.section--hero.hero--dock .budget { grid-row: 2; grid-column: 1 / 3; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; }
	.section--hero.hero--dock .budget__label { white-space: nowrap; min-width: 250px; }
	.section--hero.hero--dock .hero__panel > .btn { grid-row: 1 / 3; grid-column: 3; align-self: center; }
}
/* Su telefono e tablet: testo, poi l'auto in una "finestra" 16:10, poi la barra di ricerca. */
@media (max-width: 1023px) {
	.section--hero.hero--dock { display: flex; flex-direction: column; }
	.section--hero.hero--dock .hero__inner { order: 1; min-height: 0; padding-block: 1.75rem .5rem; }
	.section--hero.hero--dock .ticks--light { display: none; }
	.section--hero.hero--dock .hero__bg { order: 2; position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; margin-top: -.5rem; }
	.section--hero.hero--dock .hero__bg img, .section--hero.hero--dock .hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-mobile, 50% 62%); }
	.section--hero.hero--dock .hero__bg::after { background: linear-gradient(180deg, var(--bg) 0%, rgb(6 9 13 / 0%) 22%, rgb(6 9 13 / 0%) 70%, var(--bg) 100%); }
	.section--hero.hero--dock .hero__dock { order: 3; margin-top: -2.75rem; }
}
/* Hero con auto scontornata: niente foto, fondo del sito, pavimento di luce e riflesso sotto l'auto. */
.section--hero.hero--cutout { background: radial-gradient(900px 420px at 72% 82%, rgb(57 213 242 / 16%), transparent 65%), radial-gradient(700px 400px at 8% -5%, rgb(159 211 227 / 10%), transparent 60%), var(--slate); }
.section--hero.hero--cutout::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(100deg, transparent 42%, rgb(57 213 242 / 6%) 50%, transparent 58%) 0 0 / 260% 100% no-repeat;
	animation: cr-sweep 11s linear infinite;
}
@keyframes cr-sweep { from { background-position: 160% 0; } to { background-position: -160% 0; } }
.hero__car--cutout { position: relative; z-index: 1; margin: 0; }
.hero__car--cutout img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 22px rgb(0 0 0 / 45%)); -webkit-box-reflect: below -6px linear-gradient(transparent 74%, rgb(255 255 255 / 12%)); }
.hero__car--cutout::before {
	content: ""; position: absolute; left: 4%; right: 4%; bottom: -3%; z-index: -1; height: 20%;
	border-radius: 50%; background: radial-gradient(closest-side, rgb(57 213 242 / 32%), transparent); filter: blur(8px);
	animation: cr-floor 6s ease-in-out infinite;
}
@keyframes cr-floor { 50% { opacity: .6; transform: scaleX(.94); } }
@media (prefers-reduced-motion: reduce) { .section--hero.hero--cutout::after, .hero__car--cutout::before { animation: none; } }
.hero--cutout .hero__car { max-width: 640px; margin: .5rem auto -1rem; }
.section--hero.hero--compact.hero--cutout .hero__inner { align-items: center; min-height: 0; }
@media (min-width: 1024px) {
	.section--hero.hero--dock.hero--cutout .hero__inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; align-content: center; gap: 2rem; min-height: min(68vh, 620px); padding-block: 1.5rem 8rem; }
	.section--hero.hero--dock.hero--cutout .hero__car { width: calc(100% + 3rem); max-width: 820px; margin: 0 -3rem -2rem 0; }
	.hero--cutout:not(.hero--dock):not(.hero--compact) .hero__car { width: calc(100% + 2rem); max-width: 680px; margin: -.5rem 0 -2.5rem -1rem; }
	.section--hero.hero--compact.hero--cutout .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
	.hero--compact.hero--cutout .hero__car { width: calc(100% + 2rem); max-width: 720px; margin: 0 -2rem -1.5rem 0; }
}
@media (max-width: 1023px) {
	.section--hero.hero--dock.hero--cutout .hero__inner { padding-bottom: 1rem; }
	.section--hero.hero--dock.hero--cutout .hero__dock { margin-top: 0; }
}

.hero--media .hero__inner { min-height: min(78vh, 720px); }
.hero--media.hero--compact .hero__inner { min-height: min(62vh, 560px); align-content: center; }
.hero--media .hero__bg img { object-position: var(--focus, 50% 50%); }
/* Su telefono la foto resta nella parte alta (meno ingrandita) e sfuma nell'ardesia sotto il pannello. */
@media (max-width: 1023px) {
	.hero--media:not(.hero--compact) .hero__bg { bottom: auto; height: min(92vw, 560px); }
	.hero--media:not(.hero--compact) .hero__bg::after { background: linear-gradient(180deg, rgb(14 21 28 / calc(var(--overlay) + .1)) 0%, rgb(14 21 28 / var(--overlay)) 55%, var(--slate-1) 100%); }
	.hero--media .hero__bg img { object-position: var(--focus-mobile, var(--focus, 50% 50%)); }
}

.glass {
	border: 1px solid rgb(255 255 255 / 11%); border-radius: var(--r-lg);
	background: linear-gradient(160deg, rgb(255 255 255 / 9%) 0%, rgb(255 255 255 / 3%) 100%);
	-webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), var(--shadow-3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgb(32 44 54 / 92%); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: rgb(32 44 54 / 96%); backdrop-filter: none; } }
.hero__panel { display: grid; gap: 1.1rem; padding: .5rem 1.1rem 1.25rem; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; list-style: none; margin: 0; padding: 0; }
.tile {
	display: flex; flex-direction: column; gap: .2rem; height: 100%; min-height: 112px; padding: .95rem;
	border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--r);
	background: rgb(255 255 255 / 8%); color: #fcfdfd; text-decoration: none; transition: background-color .2s, border-color .2s;
}
.tile:hover { background: rgb(255 255 255 / 15%); border-color: rgb(255 255 255 / 24%); color: #fcfdfd; }
.tile strong { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.tile span { font-size: .8125rem; line-height: 1.35; color: rgb(252 253 253 / 72%); }
.tile__icon { width: 26px; height: 26px; margin-bottom: .35rem; color: var(--accent-light); }
.budget { display: grid; gap: .35rem; }
.budget__label { display: flex; align-items: baseline; gap: .35rem; font-size: .9375rem; color: rgb(252 253 253 / 85%); }
.budget__label output { margin-left: auto; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: #fcfdfd; letter-spacing: -.03em; }
.budget__label span { font-size: .8125rem; color: rgb(252 253 253 / 70%); }

/* Cursore canone */
input[type="range"] { width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --fill: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--accent) var(--fill), var(--line-2) var(--fill)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-2); transition: scale .15s; }
input[type="range"]:active::-webkit-slider-thumb { scale: 1.12; }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--line-2); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-2); }
.glass input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, #fcfdfd var(--fill), rgb(255 255 255 / 25%) var(--fill)); }
.glass input[type="range"]::-webkit-slider-thumb { border-color: #fcfdfd; }
.glass input[type="range"]::-moz-range-track { background: rgb(255 255 255 / 25%); }
.glass input[type="range"]::-moz-range-progress { background: #fcfdfd; }

/* --- Bento punti di forza ------------------------------------------------- */
.bento { display: grid; gap: 1rem; }
@media (min-width: 960px) { .bento { grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); } .bento--solo { grid-template-columns: 1fr; } }
.bento__main {
	display: grid; gap: 1.75rem; padding: clamp(1.4rem, 3vw, 2.4rem);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	background: radial-gradient(600px 260px at 0% 0%, rgb(57 213 242 / 9%), transparent 70%), linear-gradient(150deg, #0f1821 0%, #0b1117 60%, #0d141b 100%);
}
@media (min-width: 700px) { .bento__main { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.feature__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgb(57 213 242 / 25%); }
.feature__icon .icon { width: 26px; height: 26px; }
.feature__title { margin: 1rem 0 .4rem; font-size: 1.375rem; }
.feature p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.bento__side { display: grid; gap: 1rem; }
.btile {
	position: relative; display: flex; align-items: flex-end; min-height: 170px; overflow: hidden;
	border-radius: var(--r-lg); color: #fcfdfd; background: linear-gradient(165deg, #5d7f8f 0%, #23323d 100%);
}
.btile--2 { background: linear-gradient(165deg, #3f8ba6 0%, #1c4b5e 100%); }
.btile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.btile.has-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgb(10 16 22 / 70%) 100%); }
.btile:hover > img { scale: 1.04; }
.btile__link {
	position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	width: 100%; margin: 0; padding: 1.1rem 1.25rem; border: 0; background: none;
	color: inherit; font: 600 1.0625rem var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.btile__link::after { content: ""; position: absolute; inset: -400px 0 0; }
.btile__link:hover { color: #fcfdfd; }
.btile__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / 18%); transition: background-color .2s; }
.btile:hover .btile__icon { background: rgb(255 255 255 / 30%); }

/* --- Card veicolo --------------------------------------------------------- */
.vcard {
	position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	border: 1px solid var(--card-line, var(--line)); border-radius: var(--r-card);
	background: var(--card-bg, var(--surface)); color: inherit;
	transition: border-color .2s, box-shadow .25s var(--ease), translate .25s var(--ease);
}
@media (hover: hover) {
	.vcard:hover { border-color: rgb(57 213 242 / 45%); box-shadow: var(--glow); translate: 0 -3px; }
	.vcard:hover .vimg { scale: 1.04; }
}
.vcard__media {
	position: relative; display: block; aspect-ratio: 16 / 10; padding: 1.4rem 1rem .4rem;
	background: radial-gradient(120% 95% at 50% 108%, #213140 0%, #131c25 48%, var(--card-bg, var(--surface)) 100%);
}
/* Luce da studio sotto l'auto. */
.vcard__media::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 9%; height: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgb(57 213 242 / 26%), transparent); pointer-events: none; }
.vcard__media .vimg { position: relative; }
.vimg { width: 100%; height: 100%; object-fit: contain; transition: scale .45s var(--ease); }
.vimg--empty { display: grid; place-items: center; height: 100%; color: var(--line-2); }
.vimg--empty .icon { width: 3rem; height: 3rem; }
.vcard__badges { position: absolute; top: .75rem; left: .75rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; max-width: calc(100% - 4rem); }
.badge { padding: .3rem .55rem; border-radius: var(--r-sm); background: rgb(8 12 17 / 75%); color: var(--ink); font: 500 .6875rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.badge--promo { background: var(--promo-bg); color: var(--promo); box-shadow: inset 0 0 0 1px rgb(255 180 71 / 30%); }
.badge--new { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgb(57 213 242 / 30%); }
.badge--available, .badge--fast { background: rgb(82 215 157 / 13%); color: #74e3b2; box-shadow: inset 0 0 0 1px rgb(82 215 157 / 28%); }
.badge--last { background: rgb(255 118 118 / 13%); color: #ff9c9c; }
.vcard__fav {
	position: absolute; top: .6rem; right: .6rem; z-index: 3; display: grid; place-items: center;
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: rgb(8 12 17 / 72%); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vcard__fav .icon--on { display: none; color: #d4443b; }
.vcard__fav[aria-pressed="true"] .icon--on { display: block; animation: cr-pop .35s var(--ease); }
.vcard__fav[aria-pressed="true"] .icon--off { display: none; }
@keyframes cr-pop { 0% { scale: .6; } 60% { scale: 1.2; } 100% { scale: 1; } }
.vcard__body { display: flex; flex-direction: column; flex: 1; gap: .3rem; padding: 1rem 1.1rem 1.1rem; }
.vcard__amount { display: flex; align-items: baseline; gap: .15rem; margin: 0; }
.vcard__amount strong { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.vcard__amount span { color: var(--muted); font-size: .875rem; }
.vcard__terms { margin: 0; color: var(--muted); font-size: .8125rem; }
.vcard__plan { margin: 0; color: var(--accent); font: 500 .75rem var(--font-mono); letter-spacing: .04em; }
.vcard__title { margin: .65rem 0 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.vcard__title a { color: inherit; text-decoration: none; }
.vcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vcard__version { margin: 0; overflow: hidden; color: var(--muted); font-size: .8125rem; white-space: nowrap; text-overflow: ellipsis; }
.vcard__specs { display: flex; flex-wrap: wrap; gap: .35rem .9rem; list-style: none; margin: .55rem 0 0; padding: 0; color: var(--ink-2); font-size: .8125rem; }
.vcard__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.vcard__specs .icon { width: 1.1em; height: 1.1em; color: var(--muted); }
.vcard__note { margin: .3rem 0 0; color: var(--warn); font-size: .75rem; font-weight: 650; }
.vcard__actions { position: relative; z-index: 2; display: flex; gap: .5rem; margin-top: auto; padding-top: 1rem; }
.vcard__compare {
	display: grid; place-items: center; flex: none; width: 46px; height: 46px;
	border: 1px solid var(--card-line, var(--line)); border-radius: var(--r);
	background: transparent; color: inherit; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.vcard__compare:hover { border-color: var(--line-2); }
.vcard__compare[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.vcard.is-expired .vcard__media { opacity: .55; }
.vcard.is-filtered { display: none; }
.vcard.is-updated [data-price] { animation: cr-bump .35s var(--ease); }
@keyframes cr-bump { 0% { opacity: .2; translate: 0 4px; } 100% { opacity: 1; translate: 0 0; } }

.bg--slate .vcard { --card-bg: rgb(255 255 255 / 3%); --card-line: rgb(255 255 255 / 9%); color: var(--ink); }
.bg--slate .vcard__terms, .bg--slate .vcard__version, .bg--slate .vcard__amount span, .bg--slate .vcard__specs, .bg--slate .vcard__specs .icon { color: rgb(252 253 253 / 70%); }
.bg--slate .btn--soft { background: rgb(255 255 255 / 12%); color: #fcfdfd; }
.bg--slate .btn--soft:hover { background: #fcfdfd; color: var(--ink); }
.bg--slate .vcard__note { color: #f4c27a; }

/* --- Griglie e caroselli -------------------------------------------------- */
.grid { display: grid; gap: 1rem; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 640px) { .grid--cards { gap: 1.25rem; } }
.rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 320px); gap: 1rem;
	margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) .75rem;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 700px) { .rail { grid-auto-columns: calc((100% - var(--gutter) * 2 - 1rem) / 2); } }
@media (min-width: 1024px) { .rail { grid-auto-columns: calc((100% - var(--gutter) * 2 - 3rem) / 4); } }
.rail--quotes { grid-auto-columns: min(86%, 380px); }
@media (min-width: 1024px) { .rail--quotes { grid-auto-columns: calc((100% - var(--gutter) * 2 - 2rem) / 3); } }
.rail--media { grid-auto-columns: min(80%, 420px); }
.rail-nav { display: flex; align-items: center; gap: .4rem; }
.rail-nav--end { justify-content: flex-end; margin-top: 1rem; }
.rail-nav__pos { min-width: 3.5ch; font-size: .875rem; text-align: center; font-variant-numeric: tabular-nums; }
.rail-nav .icon-btn { border: 1px solid var(--line); background: var(--surface); }
.bg--slate .rail-nav .icon-btn { border-color: rgb(255 255 255 / 15%); background: rgb(255 255 255 / 8%); color: #fcfdfd; }
.bg--slate .rail-nav .icon-btn:hover { background: rgb(255 255 255 / 18%); }
.rail-nav .icon-btn:disabled { opacity: .35; cursor: default; }

/* --- Schede (tab) --------------------------------------------------------- */
.tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
	display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .55rem .95rem;
	border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
	color: var(--ink-2); font: 600 .875rem var(--font); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s;
}
.tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.tabs--line { gap: 1.25rem; }
.tabs--line .tab { padding: .55rem 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -2px 0 transparent; }
.tabs--line .tab[aria-selected="true"] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 currentColor; }
.bg--slate .tabs--line .tab { color: rgb(252 253 253 / 65%); }
.bg--slate .tabs--line .tab[aria-selected="true"] { color: #fcfdfd; }
.vehicles__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-bottom: 1.25rem; }

/* --- Soluzioni ------------------------------------------------------------ */
.solutions__switch { margin-bottom: 1.25rem; }
.solutions { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.solution { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.solution__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.solution__body { display: flex; flex: 1; flex-direction: column; gap: .8rem; padding: 1.35rem; }
.solution__label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--accent); font-size: .8125rem; font-weight: 650; }
.solution__title { margin: 0; font-size: 1.375rem; }
.solution .ticks { margin: 0; }
.solution__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .4rem; }

/* --- Passaggi ------------------------------------------------------------- */
.steps { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); } }
.step { position: relative; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.step__num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); font: 500 .9375rem var(--font-mono); box-shadow: inset 0 0 0 1px rgb(57 213 242 / 28%); }
.step__title { margin: 1rem 0 .35rem; font-size: 1.125rem; }
.step p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.steps__cta { margin: 1.75rem 0 0; }

/* --- Immagine e testo ----------------------------------------------------- */
.mt { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .mt { grid-template-columns: 1fr 1fr; gap: 4rem; } .mt--left .mt__media { order: -1; } }
.mt__copy .section__title { margin-bottom: 1rem; }
.mt__copy .prose { margin-bottom: 1.25rem; color: var(--ink-2); }
.mt__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--surface-2); }
.mt__media > img, .mt__media > video { width: 100%; height: 100%; object-fit: cover; }
.mt__media .video { height: 100%; aspect-ratio: auto; border-radius: 0; }
.mt__media--empty { display: grid; place-items: center; color: var(--line-2); }
.mt__media--empty .icon { width: 3rem; height: 3rem; }

/* --- Video leggero -------------------------------------------------------- */
.video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--slate-1); }
.video__play { position: absolute; inset: 0; padding: 0; border: 0; background: none; color: #fcfdfd; cursor: pointer; }
.video__play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.video__play:hover img { opacity: 1; }
.video__icon {
	position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center;
	width: 76px; height: 76px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 40px -6px rgb(57 213 242 / 70%); transition: scale .2s var(--ease);
}
.video__icon .icon { width: 30px; height: 30px; margin-left: 3px; }
.video__play:hover .video__icon { scale: 1.06; }
.video__label { position: absolute; left: 1.1rem; bottom: 1rem; font-weight: 600; text-shadow: 0 1px 8px rgb(0 0 0 / 50%); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame { max-width: 1080px; margin-inline: auto; }
dialog.video-modal { width: min(1100px, 94vw); max-width: none; padding: 0; border: 0; border-radius: var(--r-lg); background: #000; overflow: visible; }
dialog.video-modal .video { border-radius: var(--r-lg); }
dialog.video-modal .icon-btn { position: absolute; top: -52px; right: 0; color: #fcfdfd; background: rgb(255 255 255 / 14%); }

/* --- Numeri, marchi, recensioni ------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 0; }
.stat { display: flex; flex-direction: column-reverse; gap: .25rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.stat dd { margin: 0; color: var(--accent); font-family: var(--font-display); font-size: clamp(1.875rem, 3.6vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.stat dt { color: var(--ink-2); font-size: .9375rem; }
.bg--slate .stat { background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 12%); }
.bg--slate .stat dd { color: #fcfdfd; }
.bg--slate .stat dt { color: rgb(252 253 253 / 72%); }

.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; }
.brands__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-height: 112px; padding: 1rem;
	border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.brands__item:hover { border-color: var(--accent); box-shadow: var(--shadow-2); color: var(--ink); }
.brands__item img { width: auto; max-height: 42px; }
.brands__name { font-size: 1.3125rem; font-weight: 700; letter-spacing: -.02em; }
.brands__item small { color: var(--muted); font-size: .75rem; }

.rating { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.rating strong { font-size: 1.25rem; }
.rating .icon { width: 1em; height: 1em; color: #e9a10f; }
.rating span { color: var(--ink-2); font-size: .8125rem; }
.quote { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.quote__stars { display: flex; gap: 2px; color: #e9a10f; }
.quote__stars .icon { width: 1rem; height: 1rem; }
.quote blockquote { margin: 0; }
.quote blockquote p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.quote figcaption strong { display: block; }
.quote figcaption span { color: var(--muted); font-size: .8125rem; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
/* Gli elementi di griglia con righe scorrevoli all'interno non devono allargare la pagina. */
.faq > *, .finder > *, .leadbox > *, .mt > *, .bento > *, .calc > *, .catalog__layout > *, .vehicle__top > *, .hero__inner > * { min-width: 0; }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(280px, 340px) 1fr; gap: 3.5rem; align-items: start; } .faq__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.faq__aside .section__head { margin-bottom: 1rem; }
.faq__cats { display: flex; gap: .35rem; margin: 0 calc(var(--gutter) * -1) 1rem; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
@media (min-width: 960px) { .faq__cats { flex-direction: column; margin: 0 0 1.25rem; padding: 0; overflow: visible; } }
.faq__cat {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none; padding: .7rem 1rem;
	border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink-2);
	font: 600 .9375rem var(--font); text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s;
}
.faq__cat span { padding: .1rem .5rem; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: .75rem; }
.faq__cat[aria-selected="true"] { border-color: var(--line-2); background: var(--surface-3); color: var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0;
	font-size: 1.0625rem; font-weight: 600; list-style: none; cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { color: var(--muted); transition: rotate .25s var(--ease); }
.faq__item[open] summary .icon { rotate: 180deg; }
.faq__answer { padding: 0 0 1.15rem; color: var(--ink-2); }
.faq__answer p { margin: 0 0 .75rem; }
.faq__item.is-filtered { display: none; }
details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
details[open]::details-content { block-size: auto; }

/* --- CTA, modulo richiesta ----------------------------------------------- */
.cta {
	position: relative; display: grid; gap: 1.5rem; overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--r-lg); border: 1px solid rgb(57 213 242 / 22%); color: var(--ink);
	background: radial-gradient(700px 320px at 100% 0%, rgb(57 213 242 / 16%), transparent 65%), linear-gradient(135deg, #0e1c26 0%, #0a1118 100%);
}
@media (min-width: 900px) { .cta--media { grid-template-columns: 1.2fr .8fr; align-items: center; } }
.cta__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.cta p { margin: 0; color: var(--ink-2); max-width: 56ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.cta__media img { width: 100%; border-radius: var(--r-card); }
.bg--accent .cta { background: rgb(0 0 0 / 14%); }

.leadbox { display: grid; gap: 2rem; }
@media (min-width: 960px) { .leadbox { grid-template-columns: 1fr minmax(0, 1.1fr); gap: 4rem; align-items: start; } }
.leadbox__form { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.leadbox__alt { color: var(--ink-2); }
.leadbox__alt a { margin-left: .5rem; font-weight: 600; }

/* --- Form ----------------------------------------------------------------- */
.lead { display: grid; gap: 1rem; }
.lead__progress { display: flex; gap: 6px; }
.lead__progress span { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background-color .3s; }
.lead__progress span.is-active { background: var(--accent); }
.lead__step { display: none; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.lead__step.is-active { display: grid; animation: cr-step .3s var(--ease); }
@keyframes cr-step { from { opacity: 0; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
.lead__legend { margin-bottom: .25rem; padding: 0; font-size: 1.25rem; font-weight: 650; }
.choices { display: grid; gap: .6rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice__box {
	display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; padding: .9rem 1rem;
	border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface-2); transition: border-color .2s, background-color .2s;
}
.choice__box .icon { grid-row: span 2; width: 28px; height: 28px; color: var(--accent); }
.choice__box strong { font-weight: 600; }
.choice__box small { color: var(--muted); font-size: .8125rem; }
.choice input:checked + .choice__box { border-color: var(--accent); background: var(--accent-soft); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.fields { display: grid; gap: .9rem; }
@media (min-width: 560px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .35rem; align-content: start; }
.field label, .field__label { color: var(--ink); font-size: .875rem; font-weight: 600; }
.field input, .field select, .field textarea, .toolbar__sort select {
	width: 100%; min-height: 48px; padding: .7rem .9rem;
	border: 1px solid var(--line-2); border-radius: var(--r); background-color: var(--surface-2);
	color: var(--ink); font: 400 1rem/1.4 var(--font); transition: border-color .2s, box-shadow .2s;
}
.field select, .toolbar__sort select {
	-webkit-appearance: none; appearance: none; padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b7c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
}
.field input:focus, .field select:focus, .field textarea:focus, .toolbar__sort select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(57 213 242 / 20%); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { min-height: 96px; resize: vertical; }
.field__hint { margin: 0; color: var(--muted); font-size: .8125rem; }
.field__error { margin: 0; color: var(--danger); font-size: .8125rem; }
.field__error:empty { display: none; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field--unit .field__wrap { position: relative; }
.field--unit .field__wrap span { position: absolute; top: 50%; right: .9rem; translate: 0 -50%; color: var(--muted); font-size: .875rem; pointer-events: none; }
.field--unit input { padding-right: 3.5rem; }
[data-business-only] { display: none; }
.lead.is-business [data-business-only] { display: grid; }
.check { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink-2); font-size: .875rem; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: .05rem 0 0; accent-color: var(--accent); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead__nav { display: flex; gap: .6rem; }
.lead__nav .btn--primary { flex: 1; }
.lead__error { margin: 0; color: var(--danger); font-size: .875rem; }
.lead.is-sending [type="submit"] { opacity: .6; pointer-events: none; }
.lead__done { display: grid; justify-items: center; gap: .6rem; padding: 1.5rem 0; text-align: center; }
.lead__done:focus { outline: none; }
.lead__done-icon .icon { width: 60px; height: 60px; color: var(--good); }
.lead__done-title { margin: 0; font-size: 1.375rem; font-weight: 650; }
.lead__done p { margin: 0; color: var(--ink-2); }
.lead-vehicle { display: flex; align-items: center; gap: .9rem; padding: .75rem; border-radius: var(--r); background: var(--surface-2); }
.lead-vehicle img { width: 104px; height: 64px; object-fit: contain; }
.lead-vehicle__title { margin: 0; font-weight: 600; line-height: 1.3; }
.lead-vehicle__config { margin: .15rem 0 0; color: var(--ink-2); font-size: .8125rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chip { position: relative; flex: none; cursor: pointer; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
	display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem;
	border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface);
	font-size: .875rem; font-weight: 500; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s;
}
.chip span .icon { width: 1.05em; height: 1.05em; }
.chip em { color: var(--muted); font-size: .75rem; font-style: normal; font-variant-numeric: tabular-nums; }
.chip input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.chip input:checked + span em { color: rgb(3 20 27 / 70%); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.is-empty span { opacity: .45; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-weight: 500; cursor: pointer; }
.switch input {
	position: relative; order: 2; flex: none; width: 46px; height: 28px; margin: 0;
	border-radius: 99px; background: var(--line-2); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color .2s;
}
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); box-shadow: var(--shadow-1); transition: translate .2s var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { background: var(--on-accent); }
.switch input:checked::after { translate: 18px 0; }

/* --- Calcolatore ---------------------------------------------------------- */
.calc { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .calc { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: start; } }
.calc__form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.calc__result { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.calc__col { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.calc__col--accent { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.calc__label { margin: 0; font-size: .875rem; font-weight: 600; }
.calc__total { margin: .35rem 0 0; font-family: var(--font-display); font-size: clamp(1.375rem, 2.8vw, 1.875rem); font-weight: 600; letter-spacing: -.04em; }
.calc__sub { margin: .15rem 0 0; font-size: .8125rem; opacity: .8; }
.calc__verdict { grid-column: 1 / -1; margin: 0; font-size: 1.0625rem; font-weight: 600; }
.calc__note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .8125rem; }
.calc__result .btn { grid-column: 1 / -1; justify-self: start; }

/* --- Ricerca per canone (finder) ----------------------------------------- */
.finder { display: grid; gap: 1.75rem; }
@media (min-width: 960px) { .finder { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; align-items: center; } }
.finder__tool { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.finder__value { display: flex; align-items: baseline; gap: .25rem; margin: 0; }
.finder__value output { font-family: var(--font-display); font-size: clamp(2.125rem, 4.6vw, 2.875rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.finder__value span { color: var(--muted); }
.histogram { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.histogram--lg { height: 76px; }
.histogram i { flex: 1; height: 100%; border-radius: 3px 3px 0 0; background: var(--accent-soft); transform: scaleY(var(--h, .04)); transform-origin: bottom; transition: transform .3s var(--ease), background-color .2s; }
.histogram i.is-in { background: var(--accent); box-shadow: 0 0 12px -2px rgb(57 213 242 / 60%); }

/* --- Contatti ------------------------------------------------------------- */
.contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.contact-card { display: grid; gap: .35rem; align-content: start; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.contact-card__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .5rem; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.contact-card__title { margin: 0; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.contact-card__value { margin: 0; font-size: 1.125rem; font-weight: 600; }
.contact-card__value a { color: var(--ink); text-decoration: none; }
.contact-card__value a:hover { color: var(--accent); }
.contact-card__note { margin: 0; color: var(--ink-2); font-size: .875rem; }
.map { display: grid; place-items: center; gap: .5rem; margin-top: 1rem; min-height: 280px; padding: 2rem; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); text-align: center; }
.map p { margin: 0; color: var(--muted); font-size: .8125rem; }
.map iframe { width: 100%; height: 420px; border: 0; border-radius: var(--r-lg); }
.map.is-loaded { padding: 0; border: 0; }

/* --- Galleria modulo ------------------------------------------------------ */
.gfig { margin: 0; }
.gfig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.gfig figcaption { margin-top: .5rem; color: var(--ink-2); font-size: .875rem; }
.grid--media { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

/* --- Testi ---------------------------------------------------------------- */
.prose { line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose h2 { margin: 1.6em 0 .5em; font-size: 1.625rem; }
.prose h3 { margin: 1.4em 0 .4em; font-size: 1.25rem; }
.prose img { border-radius: var(--r-card); }
.prose a { text-decoration: underline; }
.page-head { padding-block: 1.25rem 1.75rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.page-head__title { margin: .6rem 0 0; font-size: clamp(1.875rem, 4vw, 2.75rem); letter-spacing: -.03em; }
.page-head__text { margin: .45rem 0 0; color: var(--ink-2); }
.page-standard .entry-content { padding-block: 2rem 4rem; }
.post__date { margin: .75rem 0 0; color: var(--muted); font-size: .875rem; }
.post__cover { margin-block: 2rem 0; }
.post__cover img { width: 100%; border-radius: var(--r-lg); }
.entry-content .alignwide { width: min(var(--maxw), 100vw - var(--gutter) * 2); max-width: none; margin-inline: calc(50% - min(var(--maxw), 100vw - var(--gutter) * 2) / 2); }
.entry-content .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.entry-content--modules > :not(.section):not(.alignwide):not(.alignfull) { max-width: calc(760px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.entry-content--modules > .alignwide { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); width: auto; }
.entry-content--modules > .alignfull { width: auto; margin-inline: 0; }
.is-style-cr-panel { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.is-style-cr-mist { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--mist); }
.wp-block-button.is-style-cr-ghost .wp-block-button__link { border: 1px solid var(--line-2); background: transparent; color: var(--ink); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: .8125rem; }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--line-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs .rank-math-breadcrumb p { margin: 0; color: var(--muted); font-size: .8125rem; }
.crumbs .rank-math-breadcrumb a { color: var(--ink-2); text-decoration: none; }
.crumbs .separator { margin-inline: .25rem; color: var(--line-2); }

/* --- Elenco offerte ------------------------------------------------------- */
.catalog__head { padding-block: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.catalog__title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .5rem 0 1rem; }
.catalog__head .catalog__title-row:last-child { margin-bottom: 0; }
.catalog__title { margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -.03em; }
.catalog__intro { margin: .4rem 0 0; color: var(--ink-2); max-width: 62ch; }
.catalog__layout { display: grid; gap: 1.5rem; padding-block: 1.25rem 3rem; }
@media (min-width: 1100px) { .catalog__layout { grid-template-columns: 290px minmax(0, 1fr); gap: 2rem; padding-top: 1.75rem; } }
.filters {
	position: fixed; inset: auto 0 0 0; z-index: 70; display: flex; flex-direction: column; max-height: 88dvh;
	border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); box-shadow: var(--shadow-3);
	transform: translateY(105%); visibility: hidden; transition: transform .34s var(--ease), visibility .34s;
}
.filters.is-open { transform: none; visibility: visible; }
.filters-backdrop { position: fixed; inset: 0; z-index: 65; background: rgb(12 18 24 / 50%); opacity: 0; transition: opacity .3s; }
.filters-backdrop.is-visible { opacity: 1; }
@media (min-width: 1100px) {
	.filters {
		position: sticky; top: calc(var(--header-h) + 1rem); z-index: auto; max-height: calc(100dvh - var(--header-h) - 2rem);
		border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none; transform: none; visibility: visible;
	}
	.filters__close, .filters__foot, .toolbar__filters { display: none !important; }
	.filters-backdrop { display: none; }
}
.filters__head { display: flex; align-items: center; gap: .75rem; padding: .75rem .75rem .75rem 1.25rem; border-bottom: 1px solid var(--line); }
.filters__title { flex: 1; margin: 0; font-size: 1.0625rem; font-weight: 650; }
.filters__body { flex: 1; padding: .25rem 1.25rem 1rem; overflow: auto; overscroll-behavior: contain; }
.filters__foot { padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.facet { margin: 0; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facet:last-child { border-bottom: 0; }
.facet legend { margin-bottom: .65rem; padding: 0; font-size: .9375rem; font-weight: 650; }
.facet--budget legend { margin-bottom: .4rem; }
.facet__value { margin: .35rem 0 0; color: var(--ink-2); font-size: .875rem; }
.facet__value output { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.toolbar__count { flex: 1; margin: 0; color: var(--ink-2); }
.toolbar__count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.toolbar__sort { position: relative; display: inline-flex; align-items: center; }
.toolbar__sort > .icon { position: absolute; left: .75rem; color: var(--muted); pointer-events: none; }
.toolbar__sort select { min-height: 40px; padding: .45rem 2.2rem .45rem 2.3rem; font-size: .875rem; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.active-filters button { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .5rem .35rem .75rem; border: 0; border-radius: 99px; background: var(--accent-soft); color: var(--accent-strong); font: 600 .8125rem var(--font); cursor: pointer; }
.active-filters button .icon { width: 1em; height: 1em; }
.promo-card { display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; min-height: 320px; padding: 1.5rem; border-radius: var(--r-card); background: var(--slate); color: #fcfdfd; }
.promo-card__title { margin: 0; font-size: 1.5rem; font-weight: 650; line-height: 1.2; }
.promo-card p { margin: 0 0 .75rem; color: rgb(252 253 253 / 80%); }
.promo-card .btn { align-self: flex-start; }
.results__more { display: flex; justify-content: center; margin-top: 1.5rem; }
.empty { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1rem; text-align: center; }
.empty__icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); }
.empty__icon .icon { width: 30px; height: 30px; }
.empty__title { margin: .5rem 0 0; font-size: 1.25rem; font-weight: 650; }
.empty p { max-width: 50ch; margin: 0; color: var(--ink-2); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .75rem; }
.empty--page .empty__title { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.catalog__seo { padding-block: 0 3rem; }
.recent { padding-block: 0 3rem; }
.skeleton { min-height: 400px; border-radius: var(--r-card); background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface) 50%, var(--surface-2) 70%); background-size: 300% 100%; animation: cr-shimmer 1.4s linear infinite; }
@keyframes cr-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- Scheda veicolo ------------------------------------------------------- */
.vehicle { padding-top: 1rem; }
.notice { display: flex; align-items: flex-start; gap: .75rem; margin: 1rem 0; padding: 1rem 1.25rem; border-radius: var(--r); background: rgb(245 180 84 / 12%); color: #ffd08a; box-shadow: inset 0 0 0 1px rgb(245 180 84 / 25%); }
.notice p { margin: 0; }
.vehicle__top { display: grid; gap: 1.25rem; margin-top: 1rem; padding-bottom: 2rem; }
/* Scheda sul modello KINTO: contenuti a sinistra, pannello prezzo fisso a destra. */
.vehicle__nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.back-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var(--accent); font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.back-link .icon { width: 1em; height: 1em; }
.vehicle__layout { display: grid; gap: 1.5rem; margin-top: 1rem; padding-bottom: 2.5rem; }
.vehicle__main { min-width: 0; }
.vehicle__main > .vsection:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
	.vehicle__layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 3rem; align-items: start; }
	.vehicle__layout .panel { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
@media (max-width: 1023px) {
	/* Le sezioni diventano figlie dirette della griglia: colonna esplicita, altrimenti la tabella dei canoni la allarga oltre lo schermo. */
	.vehicle__layout { grid-template-columns: minmax(0, 1fr); }
	.vehicle__layout > *, .vehicle__main > * { min-width: 0; }
	.vehicle__layout .panel { order: -1; grid-row: 2; }
	.vehicle__main { display: contents; }
	.vehicle__main > .gallery { grid-row: 1; }
}
.config__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.config__field { gap: .3rem; }
.config__field .field__label { color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.config select:disabled { color: var(--muted); background-color: var(--surface-2); opacity: 1; cursor: default; }
.summary div { display: contents; }
.badge--fuel { display: inline-flex; align-items: center; gap: .3rem; }
.badge--fuel .icon { width: 1.1em; height: 1.1em; }
.vlegal { padding-block: .5rem 3rem; }
.vlegal__text { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.6; white-space: pre-line; }
.vlegal__until { margin: .5rem 0 0; color: var(--ink-2); font-size: .75rem; font-weight: 600; }
.quicklinks { position: fixed; right: 0; top: 58%; z-index: 40; display: none; }
@media (min-width: 1024px) { .quicklinks { display: block; } }
.quicklinks summary { display: flex; align-items: center; gap: .45rem; padding: .65rem .85rem; border-radius: var(--r) 0 0 var(--r); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; list-style: none; cursor: pointer; }
.quicklinks summary::-webkit-details-marker { display: none; }
.quicklinks summary .icon { width: 26px; height: 26px; padding: 5px; border-radius: 4px; background: var(--accent); color: var(--on-accent); }
.quicklinks ul { position: absolute; right: .5rem; bottom: calc(100% + .5rem); min-width: 230px; margin: 0; padding: .5rem; list-style: none; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-3); }
.quicklinks a { display: block; padding: .55rem .75rem; border-radius: var(--r); color: var(--ink); font-size: .875rem; text-decoration: none; }
.quicklinks a:hover { background: var(--surface-2); color: var(--accent); }
@media (min-width: 1024px) { .vehicle__top { grid-template-columns: minmax(0, 1.5fr) minmax(360px, .95fr); gap: 2rem; align-items: start; } }
.gallery { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 95% at 50% 110%, #1f2f3d 0%, #111a22 50%, #0a0f14 100%); }
.gallery::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 12%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgb(57 213 242 / 22%), transparent); pointer-events: none; }
.gallery__track { display: flex; aspect-ratio: 16 / 10; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { display: grid; place-items: center; flex: 0 0 100%; margin: 0; padding: clamp(1rem, 3vw, 2rem); scroll-snap-align: center; }
.gallery__slide--video { padding: 0; }
.gallery__slide--video .video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.gallery__zoom { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__zoom img { width: 100%; height: 100%; object-fit: contain; }
.gallery__badges { top: 1rem; left: 1rem; }
.gallery__arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; translate: 0 -50%; border: 0; border-radius: 50%; background: rgb(8 12 17 / 70%); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gallery__arrow--prev { left: .85rem; }
.gallery__arrow--next { right: .85rem; }
@media (pointer: coarse) { .gallery__arrow { display: none; } }
.gallery__dots { position: absolute; bottom: .4rem; left: 50%; display: flex; translate: -50% 0; }
/* Pallino piccolo, area di tocco 24 px. */
.gallery__dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.gallery__dots button::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 8px; right: 8px; border-radius: 99px; background: rgb(234 241 246 / 28%); transition: background-color .2s; }
.gallery__dots button[aria-current="true"] { width: 40px; }
.gallery__dots button[aria-current="true"]::before { background: var(--accent); }
.gallery__360 { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; }
.panel { display: grid; gap: 1rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, rgb(255 255 255 / 3%) 0%, transparent 40%), var(--surface); box-shadow: var(--shadow-2); scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (min-width: 1024px) { .panel { position: sticky; top: calc(var(--header-h) + 1rem); } }
.panel__brand { margin: 0; color: var(--accent); font: 500 .75rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.panel__title { margin: -.65rem 0 0; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.03em; }
.panel__version { margin: -.8rem 0 0; color: var(--ink-2); }
.panel__price { padding-top: .25rem; }
.price { display: flex; align-items: baseline; gap: .2rem; margin: 0; }
.price strong { font-family: var(--font-display); font-size: clamp(2.125rem, 3.6vw, 2.625rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.price span { color: var(--muted); }
.price strong.is-bump, .sticky-cta strong.is-bump { animation: cr-bump .35s var(--ease); }
.panel__terms { margin: .3rem 0 0; color: var(--ink-2); font-size: .875rem; }
.panel__note { margin: 0; color: var(--warn); font-size: .8125rem; font-weight: 600; }
.config { display: grid; gap: .9rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.config__title { margin: 0; font-weight: 650; }
.config__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.config__group legend { margin-bottom: .45rem; padding: 0; color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: .4rem; }
.opt {
	display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .55rem .7rem;
	border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink);
	text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.opt strong { font-size: .9375rem; font-weight: 600; }
.opt small { color: var(--muted); font: 500 .6875rem var(--font-mono); letter-spacing: .02em; }
.opt:hover { border-color: var(--line-2); }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -14px rgb(57 213 242 / 70%); }
.opt[aria-pressed="true"] small { color: var(--accent); }
.opt.is-alt small { color: var(--warn); }
.summary { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; padding: .85rem 1rem; border-radius: var(--r); background: var(--surface-2); font-size: .875rem; }
.summary dt { color: var(--ink-2); }
.summary dd { margin: 0; font: 500 .8125rem var(--font-mono); text-align: right; }
.panel__actions { display: grid; gap: .6rem; }
.book { display: grid; gap: .35rem; margin: 0; }
.book__note { margin: 0; color: var(--muted); font-size: .75rem; text-align: center; }
.panel__trust { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0; color: var(--ink-2); font-size: .8125rem; }
.jumpnav { position: sticky; top: var(--header-h); z-index: 20; border-block: 1px solid var(--line); background: rgb(6 9 13 / 82%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.jumpnav__inner { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.jumpnav__inner::-webkit-scrollbar { display: none; }
.jumpnav a { flex: none; padding: .85rem .9rem; color: var(--ink-2); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.jumpnav a:hover, .jumpnav a.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.vehicle__body { padding-block: .5rem 3rem; }
.vsection { padding-block: 2.25rem; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 56px); }
.vsection:last-child { border-bottom: 0; }
.vsection__title { margin: 0 0 1.25rem; font-size: 1.5rem; }
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; }
.services li { display: flex; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: .9375rem; font-weight: 500; line-height: 1.35; }
.services__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .75rem; margin: 0; }
.specs__item { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.specs__item .icon { grid-row: span 2; width: 26px; height: 26px; color: var(--accent); }
.specs__item dt { color: var(--muted); font-size: .8125rem; }
.specs__item dd { margin: 0; font-weight: 600; }
.equipment { margin: 0 0 1rem; padding: 0; list-style: none; columns: 2 260px; column-gap: 2rem; }
.equipment li { display: flex; align-items: flex-start; gap: .55rem; padding: .4rem 0; break-inside: avoid; }
.equipment .icon { margin-top: .15em; color: var(--good); }
.howto { display: grid; gap: .75rem; list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: howto; }
@media (min-width: 768px) { .howto { grid-template-columns: repeat(3, 1fr); } }
.howto li { display: grid; gap: .3rem; align-content: start; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); counter-increment: howto; }
.howto li::before { content: counter(howto); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .45rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.howto span { color: var(--ink-2); font-size: .9375rem; }
.legal { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.legal summary { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.1rem; font-weight: 600; list-style: none; cursor: pointer; }
.legal summary::-webkit-details-marker { display: none; }
.legal__text { padding: 0 1.1rem 1rem; color: var(--ink-2); font-size: .8125rem; line-height: 1.65; white-space: pre-line; }
.legal__until { margin: 0; padding: 0 1.1rem 1rem; font-size: .8125rem; font-weight: 600; }
.sticky-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: .6rem;
	padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line); background: rgb(8 12 17 / 92%);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	transform: translateY(110%); transition: transform .3s var(--ease);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta__price { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .15rem; flex: 1; min-width: 0; }
.sticky-cta__price strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.04em; }
.sticky-cta__price span { color: var(--muted); font-size: .8125rem; }
.sticky-cta__price small { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }
dialog.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 14 18 / 96%); }
dialog.lightbox::backdrop { background: transparent; }
.lightbox__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox__track figure { display: grid; place-items: center; flex: 0 0 100%; margin: 0; padding: 3.5rem 1rem; scroll-snap-align: center; }
.lightbox__track img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__close { position: fixed; top: 1rem; right: 1rem; z-index: 2; background: rgb(255 255 255 / 14%); color: #fcfdfd; }

/* --- Risposte citabili (GEO): In breve, tabella canoni, domande ---------- */
.brief__answer { margin: 0 0 1.25rem; max-width: 72ch; font-size: 1.0625rem; line-height: 1.65; }
.brief__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: .5rem; margin: 0; }
.brief__facts div { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.brief__facts dt, .answer__facts dt { color: var(--muted); font: 500 .75rem var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.brief__facts dd, .answer__facts dd { margin: .25rem 0 0; font-weight: 600; }
.brief__updated, .catalog__updated { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .9rem 0 0; color: var(--muted); font-size: .8125rem; }
.brief__updated .icon, .catalog__updated .icon { width: 15px; height: 15px; }
.vsection__lead { max-width: 62ch; margin: -.5rem 0 1.1rem; color: var(--ink-2); }

.otable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.otable-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.otable { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.otable th, .otable td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.otable thead th { background: var(--surface-2); color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.otable thead small { display: block; color: var(--muted); font-size: .75rem; font-weight: 400; }
.otable tbody tr:last-child td { border-bottom: 0; }
.otable tbody tr:hover { background: var(--surface-2); }
.otable tr.is-featured td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.otable .otable__p, .otable .otable__b { transition: opacity .2s var(--ease); }
.otable td.otable__p, .otable td.otable__b { font-family: var(--font-mono); }
.otable strong { color: var(--ink); font-weight: 600; }
html[data-persona="private"] .otable .otable__b,
html[data-persona="business"] .otable .otable__p { opacity: .45; }
.otable__note { margin: .75rem 0 0; color: var(--muted); font-size: .8125rem; }

.vfaq { display: grid; gap: .75rem; }
@media (min-width: 768px) { .vfaq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vfaq__item { padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.vfaq__item h3 { margin: 0 0 .45rem; font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.vfaq__item p { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }
.faq__q { margin: 0; font: inherit; letter-spacing: inherit; }

.answer { max-width: 880px; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--accent-soft), transparent 55%), var(--surface); }
.answer__label { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .8rem; color: var(--accent); font: 500 .75rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.answer__label .icon { width: 16px; height: 16px; }
.answer__q { margin: 0 0 .75rem; font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
.answer__a { max-width: 70ch; margin: 0; font-size: 1.0625rem; line-height: 1.7; }
.answer__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1.25rem; margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.answer__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 1.25rem 0 0; color: var(--muted); font-size: .8125rem; }

/* --- Pagina Offerte: collegamenti rapidi e offerta speciale (come KINTO One) -- */
.quicklinks-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .75rem; margin-top: -1.5rem; position: relative; z-index: 2; }
.qlink { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); font: 600 1rem var(--font); text-align: left; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-2); transition: border-color .2s, color .2s; }
.qlink:hover { border-color: var(--accent); color: var(--accent); }
.qlink .icon { color: var(--accent); }
.spotlight { display: grid; gap: 1rem; padding: clamp(1rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.spotlight__main { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .spotlight__main { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.spotlight__info { display: grid; gap: .45rem; align-content: start; }
.spotlight__eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--ink-2); font-size: .875rem; font-weight: 600; }
.spotlight__title { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.spotlight__version { margin: -.2rem 0 0; color: var(--ink-2); }
.spotlight__specs { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: .3rem 0; padding: 0; color: var(--ink-2); font-size: .875rem; }
.spotlight__price { margin-top: .4rem; }
.spotlight__terms, .spotlight__plan { margin: 0; font-size: .8125rem; color: var(--ink-2); }
.spotlight__plan { color: var(--ink); font-weight: 600; }
.spotlight__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.spotlight__media { display: block; }
.spotlight__media img { width: 100%; max-height: 380px; object-fit: contain; transition: opacity .25s var(--ease); }
.spotlight__media.is-swapping img { opacity: 0; }
.spotlight__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: .5rem; margin: 0; padding: .5rem 0 0; list-style: none; overflow-x: auto; scrollbar-width: thin; border-top: 1px solid var(--line); }
.spotlight__thumb { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: .55rem .65rem; border: 1px solid transparent; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.spotlight__thumb img { grid-row: span 2; width: 64px; height: 40px; object-fit: contain; }
.spotlight__thumb-price { font-weight: 700; font-size: .9375rem; }
.spotlight__thumb-price small { color: var(--ink-2); font-weight: 400; }
.spotlight__thumb-name { overflow: hidden; color: var(--ink-2); font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.spotlight__thumb:hover, .spotlight__thumb[aria-current="true"] { border-color: var(--line-2); background: var(--surface-2); }
.catalog--main .catalog__head { padding-top: 1.75rem; }

/* --- Sedi ------------------------------------------------------------------ */
.sedi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.sede { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.sede__media { aspect-ratio: 16 / 7; max-width: 100%; background: var(--surface-2); }
.sede__media img { width: 100%; height: 100%; object-fit: cover; }
.sede__media--empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--accent) 0%, var(--slate-2) 100%); color: rgb(255 255 255 / 88%); font: 600 1.375rem/1.2 var(--font-display); letter-spacing: .01em; text-align: center; padding: 1rem; }
.sede__body { display: grid; gap: .6rem; padding: 1.25rem 1.35rem 1.4rem; }
.sede__title { margin: 0; font-size: 1.1875rem; }
.sede__address { margin: 0; color: var(--ink-2); font-style: normal; line-height: 1.5; }
.sede__brands { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.sede__brands li { padding: .2rem .55rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 600; }
.sede__actions { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .2rem 0 0; font-size: .9375rem; }
.site-footer__sedi { margin: 1rem 0 0; font-size: .875rem; line-height: 1.7; }
.site-footer__sedi strong { display: block; margin-bottom: .2rem; }

/* --- Contenuti personalizzati Mautic (Dynamic Web Content) --------------- */
.mautic-slot:empty { display: none; }
.panel .mautic-slot { margin-top: 1rem; }
.results .mautic-slot { margin-bottom: 1rem; }

/* --- Barra mobile, confronto --------------------------------------------- */
.mobile-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column;
	padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgb(8 12 17 / 90%);
	-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.mobile-bar a, .mobile-bar button {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
	min-height: var(--bar-h); border: 0; background: none; color: var(--ink-2);
	font: 600 .6875rem/1 var(--font); text-decoration: none; cursor: pointer;
}
.mobile-bar .icon { width: 23px; height: 23px; }
.mobile-bar [aria-current="page"] { color: var(--accent); }
.mobile-bar__cta .icon { width: 44px; height: 44px; margin-top: -18px; padding: 10px; border-radius: 15px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 26px -4px rgb(57 213 242 / 75%); }
.mobile-bar__cta { color: var(--accent) !important; }
.mobile-bar .count { top: 7px; right: auto; left: calc(50% + 4px); }
@media (min-width: 1024px) { .mobile-bar { display: none; } }
body.has-sticky-cta .mobile-bar { display: none; }
.compare-tray { position: fixed; left: 50%; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + .75rem); z-index: 56; translate: -50% 0; max-width: calc(100% - 1.5rem); animation: cr-rise .3s var(--ease); }
body.has-sticky-cta .compare-tray { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .compare-tray, body.has-sticky-cta .compare-tray { bottom: 1.25rem; } }
@keyframes cr-rise { from { opacity: 0; translate: -50% 16px; } to { opacity: 1; translate: -50% 0; } }
.compare-tray__inner { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem 1rem; border-radius: 16px; background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.compare-tray__inner p { margin: 0; font-size: .875rem; }
.compare-tray .link-btn { color: rgb(252 253 253 / 72%); }
.compare { overflow-x: auto; }
.compare__row { display: grid; grid-template-columns: 130px repeat(var(--cols), minmax(240px, 1fr)); gap: 1rem; align-items: center; padding-block: .75rem; border-bottom: 1px solid var(--line); }
.compare__row--head { align-items: stretch; border-bottom: 0; }
.compare__label { position: sticky; left: 0; z-index: 1; background: var(--bg); color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.compare .is-yes { color: var(--good); }
.compare .is-no { color: var(--muted); }

/* --- Blog ----------------------------------------------------------------- */
.grid--posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.post-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__placeholder { display: grid; place-items: center; height: 100%; color: var(--line-2); }
.post-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.post-card__date { margin: 0; color: var(--muted); font-size: .8125rem; }
.post-card__title { margin: .35rem 0 .5rem; font-size: 1.1875rem; }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 2.5rem; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.pagination .current { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { padding-top: 3.25rem; background: var(--slate-1); color: rgb(252 253 253 / 76%); font-size: .9375rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fcfdfd; }
.site-footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.brand--footer .brand__name { color: #fcfdfd; }
.brand--footer .brand__name b { color: var(--accent-light); }
.site-footer__brand > p { max-width: 36ch; margin: 1rem 0; }
.site-footer__title { margin: 0 0 .9rem; color: #fcfdfd; font-weight: 650; }
.site-footer ul { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.site-footer__contacts li { display: flex; align-items: flex-start; gap: .6rem; }
.site-footer__contacts .icon { margin-top: .15em; color: var(--accent-light); }
.socials { display: flex !important; gap: .3rem !important; margin-top: 1.1rem !important; }
.socials .icon-btn { background: rgb(255 255 255 / 6%); color: #fcfdfd; }
.socials .icon-btn:hover { background: rgb(255 255 255 / 14%); }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.75rem; padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / 10%); font-size: .8125rem; }
.site-footer__legal p { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; }
.site-footer__note { flex-basis: 100%; order: 3; color: rgb(252 253 253 / 52%); }
.legal-menu { display: flex !important; flex-wrap: wrap; gap: 1rem !important; }

/* --- WooCommerce: carrello, checkout, account ---------------------------- */
.is-wc-flow .site-main { padding-block: 2rem 4rem; }
.is-wc-flow .site-main > .woocommerce, .is-wc-flow .entry-content { max-width: var(--maxw); }
.wc-wrap { padding-block: 2rem 4rem; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--r); }

/* --- Movimento ridotto, stampa ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
	.site-header, .site-footer, .mobile-bar, .sticky-cta, .compare-tray, .jumpnav, .gallery__arrow, .panel__actions, .vcard__fav, .vcard__actions { display: none !important; }
	body { padding: 0; background: #fff; color: #111; }
	.panel { box-shadow: none; }
}