/* Vehicles: catalogue, cards, filters, vehicle page, gallery, leasing.
   Light pages, a dark catalogue head, the red accent used sparingly. Car photos sit on the studio
   backdrop colour (#eeeff2), so 4:3 "Vinnbilar studio" covers run edge to edge without a seam. */

/* ------------------------------------------------------------------ shared bits */

.vinn-vehicles .screen-reader-text,
.vinn-vehicle-details .screen-reader-text,
.vinn-catalog-bar .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* Buttons are the shell's .vinn-button (site.css); plain links in vehicle components are dark, red on hover. */
:where(.vinn-vehicles, .vinn-vehicle-details, .vinn-leasing-page, .vinn-catalog-end) a:not(.vinn-button) {
	color: #0e0e12;
	text-decoration: none;
}

:where(.vinn-vehicles, .vinn-vehicle-details, .vinn-leasing-page, .vinn-catalog-end) a:not(.vinn-button):hover {
	color: #c0392b;
}

.vinn-vehicle-catalog,
.vinn-catalog-end {
	background: #fff;
	color: #0e0e12;
}

/* ------------------------------------------------------------------ badges and stock state */

.vinn-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.vinn-badge {
	background: #0e0e12;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 0.4rem 0.65rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.vinn-badge--accent {
	background: #c0392b;
}

.vinn-badge--muted {
	background: rgba(14, 14, 18, 0.7);
}

.vinn-badge--sold {
	background: #535457;
}

/* "Á goymslu" / "Fjargoymsla" as a quiet status line with a dot. */
.vinn-vehicle-card__status {
	align-items: center;
	color: #535457;
	display: inline-flex;
	font-size: 0.8125rem;
	gap: 0.45rem;
	line-height: 1.3;
}

.vinn-vehicle-card__status::before {
	background: #9a9ca0;
	border-radius: 50%;
	content: "";
	flex: 0 0 auto;
	height: 0.4375rem;
	width: 0.4375rem;
}

.vinn-vehicle-card__status.is-stock::before {
	background: #1f9d55;
}

.vinn-vehicle-card__status.is-remote::before {
	background: #d68910;
}

/* ------------------------------------------------------------------ grid and cards */

.vinn-vehicle-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The whole card is one link: the title link is stretched over it. */
.vinn-vehicle-card {
	background: #fff;
	border: 1px solid #e3e4e7;
	border-radius: 0.75rem;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	position: relative;
	transition:
		box-shadow 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
		border-color 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
		transform 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.vinn-vehicle-card:hover {
	border-color: #d8d8db;
	box-shadow: 0 16px 44px rgba(14, 14, 18, 0.12);
	transform: translateY(-0.125rem);
}

.vinn-vehicle-card:has(.vinn-vehicle-card__title a:focus-visible) {
	outline: 3px solid #c0392b;
	outline-offset: 2px;
}

.vinn-vehicle-card__media {
	aspect-ratio: 16 / 10;
	background: #eeeff2;
	display: block;
	overflow: hidden;
	position: relative;
}

.vinn-vehicle-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 450ms cubic-bezier(0.25, 0.1, 0.25, 1);
	width: 100%;
}

.vinn-vehicle-card:hover .vinn-vehicle-card__media img {
	transform: scale(1.02);
}

.vinn-vehicle-card__media .vinn-badge {
	left: 0.875rem;
	position: absolute;
	top: 0.875rem;
	z-index: 1;
}

.vinn-vehicle-card__body {
	container-type: inline-size;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.125rem 1.375rem 1.25rem;
}

.vinn-vehicle-card__meta {
	color: #6b6d70;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}

.vinn-vehicle-card__title {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	overflow-wrap: anywhere;
}

.vinn-vehicle-card .vinn-vehicle-card__title a {
	color: inherit;
	outline: none;
}

.vinn-vehicle-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

.vinn-vehicle-card__body > .vinn-vehicle-card__status {
	margin: 0.4rem 0 0;
}

/* Fixed three-cell spec row: Koyrt · Orka · Megi. Each cell is as wide as its value needs, so short values leave
   room for a long fuel ("Plugin Hybrid/Bensin"), which wraps after the slash instead of being cut. */
.vinn-vehicle-card__specs {
	border-block: 1px solid #e3e4e7;
	display: grid;
	grid-template-columns: auto auto auto;
	margin: 0.9rem 0 0;
}

.vinn-vehicle-card__specs div {
	min-width: 0;
	padding: 0.55rem 0.75rem 0.6rem 0;
}

.vinn-vehicle-card__specs div + div {
	border-left: 1px solid #e3e4e7;
	padding-left: 0.75rem;
}

.vinn-vehicle-card__specs div:last-child {
	padding-right: 0;
}

.vinn-vehicle-card__specs dt {
	color: #6b6d70;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vinn-vehicle-card__specs dd {
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	line-height: 1.3;
	margin: 0.1rem 0 0;
	overflow-wrap: break-word;
}

.vinn-vehicle-card__placeholder {
	align-items: center;
	color: #c9cacd;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.vinn-vehicle-card__placeholder svg {
	height: 3.5rem;
	width: 3.5rem;
}

.vinn-vehicle-card.is-sold .vinn-vehicle-card__media img {
	filter: grayscale(1);
	opacity: 0.75;
}

.vinn-vehicle-card__price {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 1rem;
}

.vinn-vehicle-card__amount {
	margin: 0;
	min-width: 0;
}

.vinn-vehicle-card__amount strong {
	font-size: 1.625rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.vinn-vehicle-card__amount span,
.vinn-vehicle-card__amount small {
	color: #6b6d70;
	font-size: 0.75rem;
}

.vinn-vehicle-card__amount span {
	margin-left: 0.35rem;
}

.vinn-vehicle-card__amount small {
	display: block;
	font-variant-numeric: tabular-nums;
	margin-top: 0.15rem;
}

.vinn-vehicle-card__lease {
	background: #f4f5f7;
	border-radius: 0.6rem;
	color: #535457;
	display: grid;
	font-size: 0.8125rem;
	line-height: 1.25;
	margin: 0;
	padding: 0.4rem 0.7rem;
	white-space: nowrap;
}

.vinn-vehicle-card__lease span:first-child {
	color: #0e0e12;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vinn-vehicle-card__lease b {
	color: #c0392b;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* A narrow card (phones, the home page strip): the leasing figure gets its own full row. */
@container (max-width: 19.5rem) {
	.vinn-vehicle-card__lease {
		align-items: baseline;
		display: flex;
		flex: 1 1 100%;
		justify-content: space-between;
	}
}

/* ------------------------------------------------------------------ empty state */

.vinn-empty-state {
	background: #f4f5f7;
	border-radius: 0.75rem;
	grid-column: 1 / -1;
	padding: clamp(2rem, 5vw, 4.5rem);
	text-align: center;
}

.vinn-empty-state h3 {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 1rem;
}

.vinn-empty-state p {
	color: #535457;
	margin: 0 auto;
	max-width: 34rem;
}

.vinn-empty-state__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.vinn-empty-state__link {
	font-weight: 600;
}

/* ------------------------------------------------------------------ catalogue head and filter bar */

.vinn-vehicles-hero.vinn-page-hero {
	padding-bottom: 0.25rem;
}

.vinn-vehicles-hero .vinn-shell {
	max-width: none;
}

.vinn-vehicles-hero .vinn-eyebrow {
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 0.85rem;
}

.vinn-vehicles-hero h1 {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0 0 0.6rem;
}

.vinn-vehicles-hero__sub {
	color: rgba(255, 255, 255, 0.5);
}

.vinn-vehicles-hero .vinn-lead p {
	color: rgba(255, 255, 255, 0.72);
	font-size: 1.125rem;
	margin: 0;
	max-width: 44rem;
}

.vinn-vehicles-hero .vinn-lead p + p {
	margin-top: 0.75rem;
}

.vinn-vehicles-hero .vinn-search-form {
	margin-top: 1.25rem;
}

.vinn-vehicles-hero .vinn-page-hero__actions {
	margin-top: 1rem;
}

.vinn-vehicles-hero .vinn-page-hero__actions p {
	margin: 0;
}

.vinn-vehicles {
	position: relative;
}

/* The dark band continues under the hero edge to edge (border-image paints outside without overflow). */
.vinn-result-count,
.vinn-catalog-bar {
	background: #0e0e12;
	border-image: conic-gradient(#0e0e12 0 0) fill 0 // 0 100vmax;
	color: #fff;
}

.vinn-result-count {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.9375rem;
	margin: 0;
	padding: 0.15rem 0 1.1rem;
}

.vinn-catalog-bar {
	color-scheme: dark;
	padding: 0.75rem 0 1.5rem;
	margin-top: -0.75rem;
	position: sticky;
	top: var(--vinn-header-height, 4.5rem);
	z-index: 20;
}

.vinn-catalog-bar__phone {
	display: none;
}

.vinn-filter-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.vinn-filter-row__selects {
	display: contents;
}

.vinn-select-chip--sort {
	margin-left: auto;
}

.vinn-fuel-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vinn-filter-row .vinn-fuel-chips::after {
	background: rgba(255, 255, 255, 0.14);
	content: "";
	height: 1.5rem;
	margin: auto 0.35rem;
	width: 1px;
}

/* Chip look for links, buttons and selects in the dark band. */
.vinn-chip,
.vinn-select-chip,
.vinn-filter-sheet__toggle {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.88);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	height: 2.5rem;
	line-height: 1;
	padding: 0 1rem;
	position: relative;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
	white-space: nowrap;
}

.vinn-catalog-bar a.vinn-chip {
	color: rgba(255, 255, 255, 0.88);
}

.vinn-chip:hover,
.vinn-select-chip:hover,
.vinn-filter-sheet__toggle:hover {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.vinn-catalog-bar a.vinn-chip:hover {
	color: #fff;
}

.vinn-chip:focus-visible,
.vinn-select-chip:focus-within,
.vinn-filter-sheet__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.vinn-catalog-bar a.vinn-chip.is-active,
.vinn-select-chip.is-active {
	background: #fff;
	border-color: #fff;
	color: #0e0e12;
}

.vinn-select-chip {
	padding: 0;
}

.vinn-select-chip select {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	height: 100%;
	max-width: 14rem;
	outline: none;
	padding: 0 2.25rem 0 1rem;
	text-overflow: ellipsis;
}

.vinn-select-chip select option {
	background: #fff;
	color: #0e0e12;
}

.vinn-select-chip__chevron {
	height: 0.95rem;
	pointer-events: none;
	position: absolute;
	right: 0.85rem;
	top: calc(50% - 0.475rem);
	width: 0.95rem;
}

/* Filters that are on, removable one by one, above the cards. */
.vinn-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.vinn-active-filter {
	align-items: center;
	background: #f4f5f7;
	border: 1px solid #e3e4e7;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: 0.4rem;
	height: 2.25rem;
	padding: 0 0.7rem 0 0.95rem;
}

.vinn-active-filter__icon {
	height: 0.9rem;
	width: 0.9rem;
}

.vinn-vehicles .vinn-active-filters__reset {
	align-items: center;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	height: 2.25rem;
	padding: 0 0.5rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vinn-vehicles--has-filters .vinn-vehicle-grid {
	margin-top: 1.5rem;
}

/* Loading: the grid dims while the server answers. */
.vinn-vehicles.is-loading .vinn-vehicle-grid {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 160ms ease;
}

.vinn-vehicles.is-loading .vinn-catalog-bar {
	cursor: progress;
}

.vinn-vehicle-catalog {
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.vinn-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.vinn-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vinn-pagination :where(a, span) {
	align-items: center;
	border: 1px solid #e3e4e7;
	border-radius: 0.6rem;
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem 0.8rem;
}

.vinn-pagination .current {
	background: #0e0e12;
	border-color: #0e0e12;
	color: #fff;
}

/* ------------------------------------------------------------------ phone filter sheet */

.vinn-filter-sheet {
	flex: 0 0 auto;
}

.vinn-filter-sheet__toggle {
	background: #fff;
	border-color: #fff;
	color: #0e0e12;
	font-weight: 600;
	gap: 0.45rem;
	list-style: none;
	padding: 0 1rem 0 0.85rem;
}

.vinn-filter-sheet__toggle:hover {
	color: #0e0e12;
}

.vinn-filter-sheet__toggle::-webkit-details-marker {
	display: none;
}

.vinn-filter-sheet__icon {
	height: 1.1rem;
	width: 1.1rem;
}

.vinn-filter-sheet[open]::before {
	animation: vinn-fade-in 160ms ease;
	background: rgba(14, 14, 18, 0.55);
	content: "";
	inset: 0;
	position: fixed;
	z-index: 300;
}

.vinn-filter-sheet__panel {
	animation: vinn-sheet-in 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
	background: #fff;
	border-radius: 1.25rem 1.25rem 0 0;
	bottom: 0;
	box-shadow: 0 -12px 40px rgba(14, 14, 18, 0.25);
	color: #0e0e12;
	color-scheme: light;
	display: flex;
	flex-direction: column;
	left: 0;
	max-height: min(90dvh, 46rem);
	position: fixed;
	right: 0;
	z-index: 301;
}

.vinn-filter-sheet__head {
	align-items: center;
	border-bottom: 1px solid #e3e4e7;
	display: flex;
	justify-content: space-between;
	padding: 0.65rem 0.75rem 0.65rem 1.25rem;
}

.vinn-filter-sheet__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0;
}

.vinn-filter-sheet__close {
	align-items: center;
	background: #f4f5f7;
	border: 0;
	border-radius: 50%;
	color: #0e0e12;
	cursor: pointer;
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.vinn-filter-sheet__close-icon {
	height: 1.25rem;
	width: 1.25rem;
}

.vinn-filter-sheet__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem 1.25rem 0.5rem;
	/* A chip scrolled into view after a change keeps some room from the sheet's edges. */
	scroll-padding-block: 0.75rem;
}

.vinn-filter-sheet__search {
	align-items: center;
	border: 1px solid #d8d8db;
	border-radius: 0.75rem;
	display: flex;
	margin: 0 0 1.25rem;
	padding-left: 0.85rem;
}

.vinn-filter-sheet__search:focus-within {
	border-color: #0e0e12;
}

.vinn-filter-sheet__search-icon {
	color: #6b6d70;
	flex: 0 0 auto;
	height: 1.1rem;
	width: 1.1rem;
}

.vinn-filter-sheet__search input {
	background: transparent;
	border: 0;
	color: #0e0e12;
	flex: 1;
	font-size: 1rem;
	min-height: 3rem;
	min-width: 0;
	outline: none;
	padding: 0 0.6rem;
}

.vinn-filter-sheet__search button {
	background: transparent;
	border: 0;
	border-left: 1px solid #e3e4e7;
	color: #0e0e12;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 600;
	min-height: 3rem;
	padding: 0 1rem;
}

.vinn-sheet-group {
	border: 0;
	margin: 0 0 1.25rem;
	min-width: 0;
	padding: 0;
}

.vinn-sheet-group legend,
.vinn-sheet-group__label {
	color: #6b6d70;
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.6rem;
	padding: 0;
	text-transform: uppercase;
}

.vinn-sheet-group__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vinn-radio-chip {
	cursor: pointer;
	position: relative;
}

.vinn-radio-chip input {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.vinn-radio-chip span {
	align-items: center;
	border: 1px solid #d8d8db;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.9375rem;
	gap: 0.45rem;
	min-height: 2.75rem;
	padding: 0 1rem;
}

.vinn-radio-chip small {
	color: #6b6d70;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.vinn-radio-chip input:checked + span {
	background: #0e0e12;
	border-color: #0e0e12;
	color: #fff;
}

.vinn-radio-chip input:checked + span small {
	color: rgba(255, 255, 255, 0.7);
}

.vinn-radio-chip input:disabled + span {
	cursor: default;
	opacity: 0.4;
}

.vinn-radio-chip input:focus-visible + span {
	outline: 3px solid #c0392b;
	outline-offset: 2px;
}

.vinn-sheet-select {
	position: relative;
}

.vinn-sheet-select select {
	appearance: none;
	background: #fff;
	border: 1px solid #d8d8db;
	border-radius: 0.75rem;
	color: #0e0e12;
	font-size: 1rem;
	min-height: 3rem;
	padding: 0 2.5rem 0 0.9rem;
	width: 100%;
}

.vinn-sheet-select .vinn-select-chip__chevron {
	right: 1rem;
}

.vinn-filter-sheet__foot {
	align-items: center;
	border-top: 1px solid #e3e4e7;
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.vinn-vehicles .vinn-filter-sheet__reset {
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.75rem 0.5rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vinn-filter-sheet__show {
	background: #0e0e12;
	border: 0;
	border-radius: 0.6rem;
	color: #fff;
	cursor: pointer;
	flex: 1;
	font-size: 1rem;
	font-weight: 600;
	min-height: 3.25rem;
}

html.vinn-sheet-open {
	overflow: hidden;
}

@keyframes vinn-sheet-in {
	from {
		transform: translateY(1.5rem);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes vinn-fade-in {
	from {
		opacity: 0;
	}
}

/* ------------------------------------------------------------------ below the catalogue */

.vinn-catalog-end {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.vinn-catalog-cta {
	align-items: center;
	background: #f4f5f7;
	border-radius: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	justify-content: space-between;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.vinn-catalog-cta p {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.45;
	margin: 0;
	max-width: 48rem;
}

.vinn-catalog-end .vinn-catalog-cta__button {
	align-items: center;
	background: #0e0e12;
	border-radius: 0.6rem;
	color: #fff;
	display: inline-flex;
	font-weight: 600;
	gap: 0.5rem;
	min-height: 3.25rem;
	padding: 0 1.4rem;
	white-space: nowrap;
}

.vinn-catalog-end .vinn-catalog-cta__button:hover {
	background: #c0392b;
	color: #fff;
}

.vinn-catalog-cta__icon {
	height: 1.1rem;
	width: 1.1rem;
}

.vinn-catalog-links {
	display: grid;
	gap: 1.5rem 3rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(2rem, 4vw, 3rem);
}

.vinn-catalog-links__title {
	color: #6b6d70;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.vinn-catalog-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vinn-catalog-links a {
	align-items: center;
	border: 1px solid #e3e4e7;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: 0.45rem;
	min-height: 2.5rem;
	padding: 0 0.95rem;
}

.vinn-catalog-links a span {
	color: #6b6d70;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ vehicle page: layout */

.vinn-vehicle-details {
	margin-inline: auto;
	padding-block: clamp(1rem, 2.5vw, 2rem) clamp(3rem, 6vw, 5rem);
	width: var(--vinn-shell, min(100% - 3rem, 90rem));
}

/* Desktop: gallery, facts, text and calculator on the left, the price card sticky on the right. The DOM has the
   phone order (gallery, price card, facts, the rest), so reading and Tab order follow it at every width. */
.vinn-vehicle-details__top {
	align-items: start;
	column-gap: clamp(2rem, 4vw, 4rem);
	display: grid;
	grid-template-areas:
		"gallery summary"
		"facts summary"
		"main summary";
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-rows: auto auto 1fr;
}

.vinn-vehicle-details__top > .vinn-vehicle-gallery {
	grid-area: gallery;
}

.vinn-vehicle-details__top > .vinn-vehicle-summary {
	grid-area: summary;
}

.vinn-vehicle-details__top > .vinn-vehicle-facts {
	grid-area: facts;
}

.vinn-vehicle-details__main {
	grid-area: main;
	min-width: 0;
}

/* Breadcrumb trail above the gallery. */
.vinn-breadcrumb {
	font-size: 0.8125rem;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.vinn-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vinn-breadcrumb li {
	align-items: center;
	color: #6b6d70;
	display: inline-flex;
	gap: 0.5rem;
	min-width: 0;
}

.vinn-breadcrumb li + li::before {
	color: #b9babd;
	content: "/";
}

.vinn-vehicle-details .vinn-breadcrumb a {
	color: #535457;
	font-weight: 500;
}

.vinn-vehicle-details .vinn-breadcrumb a:hover {
	color: #c0392b;
}

.vinn-breadcrumb [aria-current="page"] {
	color: #0e0e12;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ vehicle page: gallery */

.vinn-vehicle-gallery {
	min-width: 0;
}

.vinn-vehicle-gallery__stage {
	background: #eeeff2;
	border-radius: 0.75rem;
	overflow: hidden;
	position: relative;
}

/* All photos in one scroll-snap track: swipes follow the finger, with native momentum. */
.vinn-vehicle-gallery__track {
	aspect-ratio: 4 / 3;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vinn-vehicle-gallery__track::-webkit-scrollbar {
	display: none;
}

.vinn-vehicle-gallery__slide {
	cursor: zoom-in;
	flex: 0 0 100%;
	margin: 0;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.vinn-vehicle-gallery__slide img {
	-webkit-user-drag: none;
	display: block;
	height: 100%;
	object-fit: cover;
	user-select: none;
	width: 100%;
}

.vinn-vehicle-gallery__nav {
	align-items: center;
	background: rgb(255 255 255 / 0.92);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgb(14 14 18 / 0.16);
	color: #0e0e12;
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	justify-content: center;
	opacity: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.15s ease, background 0.15s ease;
	width: 2.75rem;
	z-index: 2;
}

.vinn-vehicle-gallery__nav[hidden] {
	display: none;
}

.vinn-vehicle-gallery__nav svg,
.vinn-lightbox__nav svg,
.vinn-lightbox__close svg {
	height: 1.5rem;
	width: 1.5rem;
}

.vinn-vehicle-gallery__nav.is-prev {
	left: 0.75rem;
}

.vinn-vehicle-gallery__nav.is-next {
	right: 0.75rem;
}

.vinn-vehicle-gallery__stage:hover .vinn-vehicle-gallery__nav,
.vinn-vehicle-gallery__nav:focus-visible {
	opacity: 1;
}

.vinn-vehicle-gallery__nav:hover {
	background: #fff;
}

.vinn-vehicle-gallery__counter {
	background: rgb(14 14 18 / 0.72);
	border-radius: 999px;
	bottom: 0.75rem;
	color: #fff;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0;
	padding: 0.3rem 0.7rem;
	pointer-events: none;
	position: absolute;
	right: 0.75rem;
	z-index: 2;
}

.vinn-vehicle-gallery__all {
	align-items: center;
	background: rgb(255 255 255 / 0.94);
	border: 0;
	border-radius: 999px;
	bottom: 0.75rem;
	box-shadow: 0 2px 10px rgb(14 14 18 / 0.14);
	color: #0e0e12;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.4rem;
	height: 2.25rem;
	left: 0.75rem;
	padding: 0 0.85rem 0 0.7rem;
	position: absolute;
	z-index: 2;
}

.vinn-vehicle-gallery__all[hidden] {
	display: none;
}

.vinn-vehicle-gallery__all-icon {
	height: 1rem;
	width: 1rem;
}

.vinn-vehicle-gallery__placeholder {
	align-items: center;
	aspect-ratio: 4 / 3;
	background: #eeeff2;
	border-radius: 0.75rem;
	color: #6b6d70;
	display: flex;
	justify-content: center;
}

/* One row of thumbnails (72 x 54), scrolling sideways when there are many. */
.vinn-vehicle-gallery__thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	overflow-x: auto;
	padding: 2px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.vinn-vehicle-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.vinn-vehicle-gallery__thumb {
	aspect-ratio: 4 / 3;
	background: #eeeff2;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	flex: 0 0 4.5rem;
	opacity: 0.7;
	overflow: hidden;
	padding: 0;
	scroll-snap-align: start;
	transition: opacity 150ms ease, box-shadow 150ms ease;
}

.vinn-vehicle-gallery__thumb:hover {
	opacity: 1;
}

.vinn-vehicle-gallery__thumb.is-active {
	box-shadow: 0 0 0 2px #0e0e12;
	opacity: 1;
}

.vinn-vehicle-gallery__thumb:focus-visible {
	outline: 3px solid #c0392b;
	outline-offset: 2px;
}

.vinn-vehicle-gallery__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Lightbox: one picture as large as the screen allows (desktop); a scrolling list on phones. */
.vinn-lightbox {
	background: rgb(14 14 18 / 0.97);
	border: 0;
	box-sizing: border-box;
	color: #fff;
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: none;
	max-width: none;
	padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.5rem, 5vw, 5rem);
	width: 100%;
}

.vinn-lightbox::backdrop {
	background: rgb(14 14 18 / 0.97);
}

.vinn-lightbox[open] {
	align-items: center;
	display: flex;
	justify-content: center;
}

html.vinn-lightbox-open {
	overflow: hidden;
}

.vinn-lightbox__figure {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	margin: 0;
	touch-action: pan-y;
	width: 100%;
}

.vinn-lightbox__figure img {
	-webkit-user-drag: none;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	user-select: none;
	width: auto;
}

.vinn-lightbox__list {
	display: none;
}

.vinn-lightbox__close,
.vinn-lightbox__nav {
	align-items: center;
	background: rgb(255 255 255 / 0.12);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	width: 2.75rem;
}

.vinn-lightbox__close:hover,
.vinn-lightbox__nav:hover {
	background: rgb(255 255 255 / 0.24);
}

.vinn-lightbox__close {
	right: 0.75rem;
	top: 0.75rem;
	z-index: 2;
}

.vinn-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
}

.vinn-lightbox__nav.is-prev {
	left: 0.75rem;
}

.vinn-lightbox__nav.is-next {
	right: 0.75rem;
}

.vinn-lightbox__counter {
	bottom: 1rem;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	left: 50%;
	margin: 0;
	position: absolute;
	transform: translateX(-50%);
}

/* ------------------------------------------------------------------ vehicle page: key facts */

.vinn-vehicle-facts {
	border: 1px solid #e3e4e7;
	border-radius: 0.75rem;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 1rem 0 0;
	overflow: hidden;
}

.vinn-vehicle-facts div {
	align-content: start;
	box-shadow:
		1px 0 0 #e3e4e7,
		0 1px 0 #e3e4e7;
	display: grid;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.9rem 1rem 1rem;
}

.vinn-vehicle-facts__icon {
	color: #6b6d70;
	height: 1.25rem;
	margin-bottom: 0.4rem;
	width: 1.25rem;
}

.vinn-vehicle-facts dt {
	color: #6b6d70;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vinn-vehicle-facts dd {
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ vehicle page: price card */

.vinn-vehicle-summary {
	background: #f4f5f7;
	border-radius: 1rem;
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	position: sticky;
	top: calc(var(--vinn-header-height, 4.5rem) + 1.5rem);
}

/* A sticky card taller than the window would hide its bottom (reference, salesperson) on short laptop screens. */
@media (max-height: 46rem) {
	.vinn-vehicle-summary {
		position: static;
	}
}

.vinn-vehicle-summary__meta {
	color: #6b6d70;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.vinn-vehicle-summary h1 {
	font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.06;
	margin: 0 0 0.75rem;
	overflow-wrap: anywhere;
}

.vinn-vehicle-summary__state {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1.25rem;
}

.vinn-vehicle-summary__price {
	border-top: 1px solid #e3e4e7;
	padding-top: 1.1rem;
}

.vinn-vehicle-summary__amount {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	margin: 0;
}

.vinn-vehicle-summary__amount strong {
	font-size: clamp(2rem, 1.5rem + 1.2vw, 2.5rem);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.vinn-vehicle-summary__amount span {
	color: #6b6d70;
	font-size: 0.9375rem;
}

.vinn-vehicle-summary__price-option small {
	color: #535457;
	display: block;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	margin-top: 0.3rem;
}

.vinn-vehicle-summary__price-option + .vinn-vehicle-summary__price-option {
	border-top: 1px solid #e3e4e7;
	margin-top: 1rem;
	padding-top: 1rem;
}

.vinn-vehicle-summary__price-option > b {
	color: #535457;
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
}

.vinn-vehicle-summary__lease {
	align-items: center;
	background: #fff;
	border-radius: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	margin: 1.1rem 0 0;
	padding: 0.8rem 1rem;
}

.vinn-vehicle-summary__lease b {
	color: #c0392b;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.vinn-vehicle-details .vinn-vehicle-summary__lease a {
	align-items: center;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 0.3rem;
	white-space: nowrap;
}

.vinn-vehicle-summary__lease-icon {
	height: 0.95rem;
	width: 0.95rem;
}

.vinn-vehicle-summary__actions {
	display: grid;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.vinn-vehicle-summary__actions .vinn-button,
.vinn-vehicle-details .vinn-vehicle-summary__phone {
	align-items: center;
	border-radius: 0.6rem;
	display: flex;
	font-size: 1rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0 1.25rem;
	text-align: center;
}

.vinn-vehicle-details .vinn-vehicle-summary__phone {
	background: #fff;
	border: 1px solid #c9cacd;
	color: #0e0e12;
}

.vinn-vehicle-details .vinn-vehicle-summary__phone:hover {
	border-color: #0e0e12;
	color: #0e0e12;
}

.vinn-vehicle-summary__phone svg {
	height: 1.1rem;
	width: 1.1rem;
}

.vinn-vehicle-summary .vinn-person {
	border-top: 1px solid var(--vinn-line, #e4e4e7);
	margin-top: 1.1rem;
	padding-top: 1.1rem;
}

.vinn-vehicle-summary__ref {
	color: #6b6d70;
	font-size: 0.8125rem;
	margin: 0.9rem 0 0;
}

/* ------------------------------------------------------------------ vehicle page: text and equipment */

.vinn-vehicle-details__content {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.vinn-vehicle-details__content h2,
.vinn-vehicle-related__head h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0 0 1rem;
}

.vinn-vehicle-details__description {
	color: #2b2c30;
	line-height: 1.65;
	max-width: 46rem;
}

.vinn-vehicle-details__description > :first-child {
	margin-top: 0;
}

.vinn-vehicle-details__description > :last-child {
	margin-bottom: 0;
}

/* Long text folds to about seven lines; vehicles.js adds the class only when it is that long. */
.vinn-vehicle-details__description.is-folded {
	-webkit-mask-image: linear-gradient(#000 55%, transparent);
	mask-image: linear-gradient(#000 55%, transparent);
	max-height: 11.5em;
	overflow: hidden;
}

.vinn-fold-toggle,
.vinn-equipment-more > summary {
	align-items: center;
	background: #fff;
	border: 1px solid #d8d8db;
	border-radius: 999px;
	color: #0e0e12;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 0.35rem;
	list-style: none;
	margin-top: 0.85rem;
	min-height: 2.75rem;
	padding: 0 1.1rem;
}

.vinn-fold-toggle:hover,
.vinn-equipment-more > summary:hover {
	border-color: #0e0e12;
}

.vinn-fold-toggle[hidden],
.vinn-equipment-more[open] > summary {
	display: none;
}

.vinn-equipment-more > summary::-webkit-details-marker {
	display: none;
}

.vinn-fold-toggle__icon {
	height: 1rem;
	width: 1rem;
}

.vinn-equipment-list {
	column-gap: 2rem;
	columns: 2;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vinn-equipment-list li {
	border-bottom: 1px solid #e3e4e7;
	break-inside: avoid;
	padding-block: 0.6rem;
}

.vinn-equipment-list li::before {
	color: #197e10;
	content: "✓";
	font-weight: 700;
	margin-right: 0.5rem;
}

.vinn-vehicle-details__leasing {
	container-type: inline-size;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.vinn-vehicle-details__back {
	border-top: 1px solid #e3e4e7;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: 1.5rem;
}

/* Related vehicles. */
.vinn-vehicle-related {
	border-top: 1px solid #e3e4e7;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.vinn-vehicle-related__head {
	align-items: flex-end;
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.vinn-vehicle-related__head h2 {
	margin: 0;
}

.vinn-vehicle-related__head .vinn-eyebrow {
	margin-bottom: 0.75rem;
}

.vinn-vehicle-related__all {
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Sticky action bar for phones: price + call + inquiry always within reach. */
.vinn-vehicle-stickybar {
	display: none;
}

/* ------------------------------------------------------------------ leasing (leasing-calculator) */

.vinn-leasing-page {
	background: #fff;
}

.vinn-leasing-stage {
	scroll-margin-top: 6rem;
}

.vinn-leasing-stage,
.vinn-leasing-points,
.vinn-leasing-steps {
	margin-inline: auto;
	padding-block: clamp(3rem, 7vw, 6rem);
	width: min(100% - clamp(2rem, 6vw, 6rem), 72rem);
}

.vinn-leasing-calc {
	display: grid;
	gap: 1.5rem;
}

.vinn-leasing-calc--page {
	background: #eeeff2;
	border-radius: 1.25rem;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.vinn-leasing-calc__intro h2,
.vinn-leasing-points h2,
.vinn-leasing-steps h2 {
	font-size: clamp(2.25rem, calc(2.25rem + (1vw - 0.2rem) * 1.875), 3.75rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.vinn-leasing-calc__intro h2,
.vinn-leasing-calc--vehicle h2,
.vinn-leasing-points h2,
.vinn-leasing-steps h2 {
	margin: 0 0 0.75rem;
}

.vinn-leasing-calc__intro,
.vinn-leasing-cars,
.vinn-leasing-calc--vehicle > h2 {
	grid-column: 1 / -1;
}

/* Grid items default to min-width:auto, which lets the car strip widen the page on phones. */
.vinn-leasing-calc > * {
	min-width: 0;
}

.vinn-leasing-calc__intro > p:last-child {
	color: #535457;
	margin: 0;
	max-width: 40rem;
}

.vinn-leasing-cars__head {
	align-items: center;
	display: flex;
	gap: 0.75rem 1rem;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.vinn-leasing-cars__head span {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vinn-leasing-cars__nav {
	display: none;
	gap: 0.4rem;
}

.vinn-leasing-cars.is-scrollable .vinn-leasing-cars__nav {
	display: flex;
}

.vinn-leasing-cars__nav button {
	align-items: center;
	background: #fff;
	border: 1px solid #d8d8db;
	border-radius: 999px;
	color: #0e0e12;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.95rem;
	height: 2.25rem;
	justify-content: center;
	width: 2.25rem;
}

.vinn-leasing-cars__nav button:hover:not(:disabled) {
	border-color: #0e0e12;
}

.vinn-leasing-cars__nav button:disabled {
	cursor: default;
	opacity: 0.35;
}

.vinn-leasing-cars__scroller {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	padding: 0.25rem 0.125rem 0.5rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vinn-leasing-cars__scroller::-webkit-scrollbar {
	display: none;
}

.vinn-leasing-cars.is-scrollable:not(.is-end) .vinn-leasing-cars__scroller {
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.75rem), transparent);
}

.vinn-leasing-cars.is-scrollable:not(.is-start):not(.is-end) .vinn-leasing-cars__scroller {
	mask-image: linear-gradient(90deg, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent);
}

.vinn-leasing-cars.is-scrollable.is-end:not(.is-start) .vinn-leasing-cars__scroller {
	mask-image: linear-gradient(90deg, transparent, #000 2.75rem, #000);
}

.vinn-leasing-cars__grid {
	display: flex;
	gap: 0.75rem;
}

.vinn-leasing-cars__item {
	display: flex;
	flex: 0 0 calc((100% - 2.25rem) / 4.35);
	min-width: 10.25rem;
	scroll-snap-align: start;
}

.vinn-leasing-car {
	background: #fff;
	border: 2px solid transparent;
	border-radius: 0.85rem;
	box-shadow: 0 8px 24px rgba(14, 14, 18, 0.06);
	color: #0e0e12;
	cursor: pointer;
	display: grid;
	font: inherit;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	padding: 0;
	text-align: left;
	width: 100%;
}

.vinn-leasing-car:hover {
	border-color: #d8d8db;
}

.vinn-leasing-car.is-selected {
	border-color: #0e0e12;
	box-shadow: 0 12px 32px rgba(14, 14, 18, 0.12);
}

.vinn-leasing-car:focus-visible {
	outline: 3px solid #c0392b;
	outline-offset: 2px;
}

.vinn-leasing-car__media {
	aspect-ratio: 4 / 3;
	background: #eeeff2;
	display: block;
	overflow: hidden;
}

.vinn-leasing-car__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.vinn-leasing-car__body {
	align-content: start;
	display: grid;
	gap: 0.15rem;
	padding: 0.7rem 0.8rem 0.85rem;
}

.vinn-leasing-car__meta {
	color: #6b6d70;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vinn-leasing-car__name {
	font-size: 0.95rem;
	line-height: 1.25;
}

.vinn-leasing-car__lease {
	color: #535457;
	font-size: 0.8125rem;
	margin-top: 0.2rem;
}

.vinn-leasing-car__lease b {
	color: #c0392b;
	font-variant-numeric: tabular-nums;
}

.vinn-leasing-calc__form {
	display: grid;
	gap: 1rem;
	grid-column: 1;
	margin: 0;
}

.vinn-leasing-calc__field {
	display: grid;
	gap: 0.4rem;
}

.vinn-leasing-calc__label,
.vinn-leasing-calc__terms legend {
	color: #535457;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0;
	text-transform: uppercase;
}

.vinn-leasing-calc__amount {
	align-items: center;
	background: #fff;
	border: 1px solid #d8d8db;
	border-radius: 0.6rem;
	display: flex;
	min-height: 3rem;
	padding-right: 0.9rem;
}

.vinn-leasing-calc__amount:focus-within {
	border-color: #c0392b;
	outline: 1px solid #c0392b;
}

.vinn-leasing-calc__amount input {
	background: transparent;
	border: 0;
	color: #0e0e12;
	flex: 1;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	min-height: 2.9rem;
	min-width: 0;
	padding: 0.7rem 0.5rem 0.7rem 0.85rem;
	width: 100%;
}

.vinn-leasing-calc__amount input[readonly] {
	color: #535457;
}

.vinn-leasing-calc__amount input:focus,
.vinn-leasing-calc__amount input:focus-visible {
	outline: none;
}

.vinn-leasing-calc__amount > span {
	color: #6b6d70;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.vinn-leasing-calc__hint {
	color: #535457;
	font-size: 0.8125rem;
	margin: 0.15rem 0 0;
}

.vinn-leasing-calc__hint[hidden],
.vinn-leasing-calc__vat[hidden] {
	display: none;
}

/* The period picker: no browser fieldset frame; the pills share the row and never wrap alone. */
.vinn-leasing-calc__terms {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.vinn-leasing-calc__terms div {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.4rem;
}

.vinn-leasing-calc__terms label {
	cursor: pointer;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
}

.vinn-leasing-calc__terms input {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.vinn-leasing-calc__terms span {
	align-items: center;
	background: #fff;
	border: 1px solid #d8d8db;
	border-radius: 0.6rem;
	display: flex;
	font-size: 0.875rem;
	font-weight: 600;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	white-space: nowrap;
}

.vinn-leasing-calc__terms input:checked + span {
	background: #0e0e12;
	border-color: #0e0e12;
	color: #fff;
}

.vinn-leasing-calc__terms input:focus-visible + span {
	outline: 3px solid #c0392b;
	outline-offset: 2px;
}

.vinn-leasing-calc__result {
	align-self: start;
	background: #0e0e12;
	border-radius: 1rem;
	color: #fff;
	grid-column: 2;
	padding: 1.5rem;
	transition: opacity 160ms ease;
}

.vinn-leasing-calc[aria-busy="true"] .vinn-leasing-calc__result {
	opacity: 0.86;
}

.vinn-leasing-calc__monthly {
	margin: 0 0 1.25rem;
}

.vinn-leasing-calc__monthly strong {
	display: block;
	font-size: clamp(2rem, 4vw, 3rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.vinn-leasing-calc__monthly span,
.vinn-leasing-calc__note,
.vinn-leasing-calc__vat {
	color: rgba(255, 255, 255, 0.66);
}

.vinn-leasing-calc__result dl {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.vinn-leasing-calc__result dl div {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.vinn-leasing-calc__result dt {
	color: rgba(255, 255, 255, 0.66);
}

.vinn-leasing-calc__result dd {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
}

.vinn-leasing-calc__vat {
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0 0 0.65rem;
}

.vinn-leasing-calc__note {
	font-size: 0.8125rem;
	margin: 0 0 1.25rem;
}

.vinn-leasing-calc__actions {
	display: grid;
	gap: 0.65rem;
}

.vinn-leasing-calc .vinn-leasing-calc__link {
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
}

.vinn-leasing-calc .vinn-leasing-calc__link[hidden] {
	display: none;
}

.vinn-leasing-points__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 1.75rem;
}

.vinn-leasing-points article {
	background: #eeeff2;
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.vinn-leasing-points span {
	color: #c0392b;
	font-size: 0.75rem;
	font-weight: 800;
}

.vinn-leasing-points h3 {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0.55rem 0 0.45rem;
}

.vinn-leasing-points p,
.vinn-leasing-steps span {
	color: #535457;
	margin: 0;
}

.vinn-leasing-steps ol {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
}

.vinn-leasing-steps li {
	align-content: start;
	border-top: 2px solid #0e0e12;
	display: grid;
	gap: 0.45rem;
	padding-top: 1rem;
}

.vinn-leasing-calc--vehicle {
	background: #f4f5f7;
	border-radius: 1rem;
	gap: clamp(1.25rem, 3vw, 1.75rem);
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.vinn-leasing-calc--vehicle h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.vinn-leasing-calc--vehicle .vinn-leasing-calc__monthly strong {
	font-size: 2rem;
}

/* The calculator sits in the main column: stack it when that column is narrow. */
@container (max-width: 42rem) {
	.vinn-leasing-calc--vehicle {
		grid-template-columns: minmax(0, 1fr);
	}

	.vinn-leasing-calc--vehicle .vinn-leasing-calc__form,
	.vinn-leasing-calc--vehicle .vinn-leasing-calc__result {
		grid-column: 1;
	}
}

/* ------------------------------------------------------------------ breakpoints */

@media (max-width: 64rem) {
	.vinn-vehicle-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* One column in DOM order: gallery, name and price, facts, text, calculator. */
	.vinn-vehicle-details__top {
		align-items: stretch;
		grid-template-areas:
			"gallery"
			"summary"
			"facts"
			"main";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	/* A landscape tablet (1024 x 768) still shows the name under the photo; studio covers letterbox on #eeeff2.
	   The width is set, so the height cap does not narrow the track through its aspect ratio. */
	.vinn-vehicle-gallery__track {
		max-height: 50vh;
		width: 100%;
	}

	.vinn-vehicle-summary {
		background: none;
		border-radius: 0;
		padding: 1.25rem 0 0;
		position: static;
	}

	.vinn-vehicle-summary__price {
		border-top: 0;
		padding-top: 0;
	}

	.vinn-vehicle-summary__lease {
		background: #f4f5f7;
	}

	/* The sticky bar carries the call and inquiry buttons on phones and tablets. */
	.vinn-vehicle-summary__actions {
		display: none;
	}

	.vinn-vehicle-facts {
		margin-top: 1.25rem;
	}

	.vinn-vehicle-details {
		/* Keep the footer reachable above the sticky bar. */
		padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
	}

	.vinn-vehicle-stickybar {
		align-items: center;
		background: rgb(255 255 255 / 0.94);
		-webkit-backdrop-filter: blur(18px) saturate(1.3);
		backdrop-filter: blur(18px) saturate(1.3);
		border-top: 1px solid rgb(14 14 18 / 0.1);
		bottom: 0;
		display: flex;
		gap: 0.6rem;
		left: 0;
		padding: 0.65rem max(1rem, env(safe-area-inset-right, 0px)) calc(0.65rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
		position: fixed;
		right: 0;
		z-index: 80;
	}

	.vinn-vehicle-stickybar__price {
		display: grid;
		flex: 1 1 auto;
		gap: 0.1rem;
		min-width: 0;
	}

	.vinn-vehicle-stickybar__price strong {
		font-size: 1.125rem;
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
		line-height: 1.1;
		white-space: nowrap;
	}

	.vinn-vehicle-stickybar__price span {
		color: #6b6d70;
		font-size: 0.75rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vinn-vehicle-details .vinn-vehicle-stickybar__call {
		align-items: center;
		border: 1px solid #c9cacd;
		border-radius: 0.6rem;
		color: #0e0e12;
		display: inline-flex;
		flex: 0 0 auto;
		height: 3rem;
		justify-content: center;
		width: 3rem;
	}

	.vinn-vehicle-stickybar__call svg {
		height: 1.25rem;
		width: 1.25rem;
	}

	.vinn-vehicle-stickybar .vinn-vehicle-stickybar__inquiry {
		flex: 0 0 auto;
		padding-inline: 1.1rem;
		white-space: nowrap;
	}

	.vinn-vehicle-related__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
	}

	.vinn-leasing-calc--page,
	.vinn-leasing-points__grid,
	.vinn-leasing-steps ol {
		grid-template-columns: minmax(0, 1fr);
	}

	.vinn-leasing-calc--page .vinn-leasing-calc__form,
	.vinn-leasing-calc--page .vinn-leasing-calc__result {
		grid-column: 1;
	}

	.vinn-leasing-cars__item {
		flex-basis: calc((100% - 0.75rem) / 2.25);
	}
}

/* Cards side by side: the price figures of a row stay on one line. A leasing pill that does not fit beside the
   price wraps above it, not below, and a card without a VAT line keeps that line's room. */
/* Only where the 50vh cap is narrower than the 4:3 track does the photo letterbox; phones keep cover. */
@media (max-width: 64rem) and (min-aspect-ratio: 4/3) {
	.vinn-vehicle-gallery__slide img {
		object-fit: contain;
	}
}

/* Just above the one-column break the main column is narrow: facts take two rows so "Automatiskt" fits. */
@media (min-width: 64.0625rem) and (max-width: 72rem) {
	.vinn-vehicle-facts {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 48.0625rem) {
	.vinn-vehicle-card__price {
		align-items: flex-start;
		flex-wrap: wrap-reverse;
	}

	.vinn-vehicle-card__amount:not(:has(small))::after {
		content: "";
		display: block;
		font-size: 0.75rem;
		height: 1lh;
		margin-top: 0.15rem;
	}
}

@media (max-width: 48rem) {
	.vinn-vehicle-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Phones: the gallery runs edge to edge; swiping replaces thumbnails and arrows. */
	.vinn-vehicle-gallery {
		margin-inline: calc(-1 * var(--vinn-page-gutter, 1.5rem));
	}

	.vinn-vehicle-gallery__stage {
		border-radius: 0;
	}

	.vinn-vehicle-gallery__thumbs,
	.vinn-vehicle-gallery__nav {
		display: none;
	}

	.vinn-lightbox[open] {
		display: block;
		overflow-y: auto;
		padding: 0;
	}

	.vinn-lightbox__figure,
	.vinn-lightbox__nav,
	.vinn-lightbox__counter {
		display: none;
	}

	.vinn-lightbox__list {
		display: grid;
		gap: 0.5rem;
		padding: 4rem 0 2rem;
	}

	.vinn-lightbox__list figure {
		margin: 0;
	}

	.vinn-lightbox__list img {
		display: block;
		height: auto;
		width: 100%;
	}

	.vinn-lightbox__close {
		position: fixed;
	}

	/* The filter row becomes a "Filtur" sheet plus the fuel chips, scrolling sideways. */
	.vinn-catalog-bar {
		padding-bottom: 1.25rem;
		position: static;
		z-index: auto;
	}

	.vinn-filter-row {
		display: none;
	}

	.vinn-catalog-bar__phone {
		align-items: center;
		display: flex;
		gap: 0.5rem;
	}

	.vinn-catalog-bar__phone .vinn-fuel-chips {
		flex-wrap: nowrap;
		margin-right: calc(-1 * var(--vinn-page-gutter, 1.5rem));
		min-width: 0;
		overflow-x: auto;
		padding-right: var(--vinn-page-gutter, 1.5rem);
		scrollbar-width: none;
	}

	.vinn-catalog-bar__phone .vinn-fuel-chips::-webkit-scrollbar {
		display: none;
	}

	.vinn-catalog-links {
		grid-template-columns: minmax(0, 1fr);
	}

	.vinn-catalog-cta .vinn-catalog-cta__button {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 40rem) {
	.vinn-vehicle-details .vinn-breadcrumb {
		display: none;
	}

	.vinn-vehicle-details {
		padding-top: 0;
	}

	.vinn-vehicle-facts {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vinn-vehicle-facts div {
		padding: 0.75rem 0.8rem 0.8rem;
	}

	.vinn-vehicle-facts__icon {
		height: 1.1rem;
		margin-bottom: 0.25rem;
		width: 1.1rem;
	}

	.vinn-vehicle-facts dd {
		font-size: 0.9375rem;
	}

	.vinn-leasing-cars__item {
		flex-basis: 72%;
		min-width: 0;
	}

	/* Phones: brand, year and stock state share the first line, so a card is about 20% shorter. */
	.vinn-vehicle-card__body {
		column-gap: 0.75rem;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto 1fr;
		padding: 0.95rem 1.125rem 1.05rem;
	}

	.vinn-vehicle-card__body > * {
		grid-column: 1 / -1;
	}

	.vinn-vehicle-card__body > .vinn-vehicle-card__meta {
		grid-column: 1;
		grid-row: 1;
	}

	.vinn-vehicle-card__body > .vinn-vehicle-card__status {
		align-self: start;
		font-size: 0.75rem;
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.vinn-vehicle-card__title {
		font-size: 1.25rem;
	}

	.vinn-vehicle-card__specs {
		margin-top: 0.75rem;
	}

	.vinn-vehicle-card__specs div {
		padding-block: 0.45rem 0.5rem;
	}

	.vinn-vehicle-card__price {
		padding-top: 0.8rem;
	}

	.vinn-vehicle-card__price {
		column-gap: 0.5rem;
	}

	.vinn-vehicle-card__amount strong {
		font-size: 1.375rem;
	}

	.vinn-vehicle-card__lease {
		font-size: 0.75rem;
		padding: 0.35rem 0.6rem;
	}
}

@media (max-width: 35rem) {
	.vinn-equipment-list {
		columns: 1;
	}
}

@media (max-width: 22rem) {
	.vinn-vehicle-stickybar__price span {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vinn-vehicle-card,
	.vinn-vehicle-card__media img,
	.vinn-chip,
	.vinn-select-chip,
	.vinn-filter-sheet__panel,
	.vinn-filter-sheet[open]::before,
	.vinn-vehicle-gallery__thumb {
		animation: none;
		transition: none;
	}

	.vinn-vehicle-card:hover,
	.vinn-vehicle-card:hover .vinn-vehicle-card__media img {
		transform: none;
	}

	.vinn-vehicle-gallery__track {
		scroll-behavior: auto;
	}
}

/* No cars for a filter: the empty state already offers the sourcing page, so the band below does not repeat it. */
.vinn-vehicle-catalog:has(.vinn-empty-state) + .vinn-catalog-end .vinn-catalog-cta {
	display: none;
}