/* Car page — minimal layer: photos first, then name / price / one spec line, flat spec list, breakdown, «Как считали». */
.car-gallery { padding-top: calc(var(--va-header-h) + 16px); }
.car-page__crumbs { display: flex; gap: 10px; margin-bottom: 16px; font-size: var(--va-fs-small); color: var(--mute); }
.car-page__crumbs a { color: inherit; }
.car-page__head { padding-top: clamp(40px, 4.4vw, 72px); }
.car-page__title-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 32px clamp(32px, 5vw, 96px); align-items: end; }
.car-page__title { margin: 0; max-width: 18ch; overflow-wrap: anywhere; }
.car-page__title .va-accent { display: block; margin-top: .12em; font-size: .5em; line-height: 1.05; }
.car-page__title--source { text-transform: none; } /* Velart stock: xDrive40d, 740i — as the maker writes them */
.car-page__line { margin-top: 20px; font-size: var(--va-fs-lead); color: var(--mute); font-variant-numeric: tabular-nums; }
.car-page__summary { display: grid; gap: 10px; justify-items: start; }
.car-page__status { font-size: var(--va-fs-small); color: var(--mute); }
.car-page__total { font: 500 var(--va-fs-h2)/.95 var(--va-font-display); font-variant-numeric: tabular-nums; }
.car-page__vat { font: 400 var(--va-fs-small)/1 var(--va-font-text); color: var(--mute); white-space: nowrap; }
.car-page__note { font-size: var(--va-fs-small); color: var(--mute); max-width: 44ch; }
.car-page__cta { margin-top: 14px; }

.car-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 15vw, 290px); gap: 6px; margin: 0; padding: 0; list-style: none; }
.car-gallery__item { position: relative; overflow: hidden; border-radius: var(--va-radius); background: var(--surface); }
.car-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.car-gallery__item--more { display: none; } /* the rest open in the viewer */
.car-gallery__grid--n1 .car-gallery__item:first-child { grid-column: 1 / -1; grid-row: span 3; }
.car-gallery__grid--n2 .car-gallery__item { grid-column: span 2; grid-row: span 2; }
.car-gallery__grid--n3 .car-gallery__item:not(:first-child) { grid-column: span 2; }
.car-gallery__grid--n4 .car-gallery__item:nth-child(4) { grid-column: span 2; }
.car-gallery__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.car-gallery__link img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--va-dur) var(--va-ease-out); }
.car-gallery__link:hover img { opacity: .88; }
.car-gallery__link:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; }
.car-gallery__all { margin-top: 16px; }
.car-gallery__empty { padding: 60px 0; color: var(--mute); }

.car-specs { padding-top: 0; }
.car-specs__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px var(--va-col-gap); padding-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--line); }
.car-specs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--va-col-gap); margin: 0; }
.car-specs__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.car-specs__row dt { color: var(--mute); font-size: var(--va-fs-small); padding-top: 2px; }
.car-specs__row dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.car-specs__unit { color: var(--mute); }

.car-price__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
.car-price__table th, .car-price__table td { padding: 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; font-weight: 400; }
.car-price__table th { overflow-wrap: anywhere; }
.car-price__table td { width: 9.5em; text-align: right; white-space: nowrap; padding-left: 16px; }
.car-price__table th small { display: block; margin-top: 4px; color: var(--mute); font-size: var(--va-fs-small); line-height: 1.4; }
.car-price__row--pending td { color: var(--mute); }
.car-price__table tfoot th, .car-price__table tfoot td { border-bottom: 0; padding-top: 20px; font: 500 var(--va-fs-h3)/1.1 var(--va-font-display); text-transform: uppercase; }
.car-price__table tfoot td { text-transform: none; }
.car-price__detail { min-width: 0; }
.car-price__request { margin: 0; }
.car-price__legal { margin-top: 24px; max-width: 60ch; font-size: var(--va-fs-small); color: var(--mute); }
.car-sources { margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--va-fs-small); color: var(--mute); }
.car-sources summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; color: var(--fg); font-weight: 500; }
.car-sources summary::-webkit-details-marker { display: none; }
.car-sources summary::after { content: '+'; font: 300 var(--va-fs-h3)/.8 var(--va-font-display); color: var(--mute); transition: transform var(--va-dur-fast) var(--va-ease-out); }
.car-sources[open] summary::after { transform: rotate(45deg); }
.car-sources__body { display: grid; gap: 12px; padding-bottom: 20px; max-width: 70ch; overflow-wrap: anywhere; }
.car-sources__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.car-sources__list span { color: var(--fg); }
.car-sources a { color: inherit; }

.car-similar__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 32px; }
.car-similar__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--va-col-gap); }

/* fullscreen viewer (created by single-va_car.js) */
.car-viewer { position: fixed; inset: 0; z-index: 200; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--va-ink); color: var(--va-paper); overscroll-behavior: contain; }
.car-viewer::backdrop { background: var(--va-ink); }
.car-viewer__stage { position: absolute; inset: 64px 0 72px; display: flex; align-items: center; justify-content: center; touch-action: pan-y; user-select: none; }
.car-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity var(--va-dur-fast), transform var(--va-dur) var(--va-ease-out); }
.car-viewer__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 var(--va-gutter); font: 500 var(--va-fs-small)/1 var(--va-font-text); font-variant-numeric: tabular-nums; }
.car-viewer button { width: 48px; height: 48px; border: 1px solid rgb(var(--va-paper-c) / .16); border-radius: 50%; background: rgb(var(--va-ink-c) / .6); color: inherit; cursor: pointer; font: 400 var(--va-fs-lead)/1 var(--va-font-text); }
.car-viewer button:hover { border-color: var(--va-paper); }
.car-viewer button:focus-visible { outline: 2px solid var(--va-paper); outline-offset: 2px; }
.car-viewer__nav { position: absolute; top: 50%; margin-top: -24px; }
.car-viewer__nav--prev { left: var(--va-gutter); }
.car-viewer__nav--next { right: var(--va-gutter); }
.car-viewer__thumbs { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 6px; justify-content: center; overflow-x: auto; padding: 0 var(--va-gutter); }
.car-viewer__thumb { flex: none; width: 64px; height: 44px; padding: 0; border: 0; border-radius: 3px; background: none; opacity: .45; cursor: pointer; transition: opacity var(--va-dur-fast); }
.car-viewer__thumb:hover, .car-viewer__thumb:focus-visible, .car-viewer__thumb[aria-current="true"] { opacity: 1; }
.car-viewer__thumb[aria-current="true"] { outline: 1px solid var(--va-paper); }
.car-viewer__thumb:focus-visible { outline: 2px solid var(--va-paper); outline-offset: 2px; }
.car-viewer__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

@media (max-width: 1100px) { .car-similar__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.car-page__title-row { grid-template-columns: minmax(0, 1fr); }
	.car-gallery__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 calc(-1 * var(--va-gutter)); padding: 0 var(--va-gutter); scrollbar-width: none; }
	.car-gallery__item, .car-gallery__item--more { display: block; flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: center; }
	.car-specs__grid, .car-specs__list { grid-template-columns: minmax(0, 1fr); }
	.car-similar__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--va-gutter)); padding: 0 var(--va-gutter); }
	.car-similar__row > .car-card { flex: 0 0 82%; scroll-snap-align: start; }
	.car-viewer__nav { display: none; }
}
@media (max-width: 760px) { .car-price__table td { width: 8.5em; padding-left: 12px; font-size: var(--va-fs-small); } .car-price__table tfoot th, .car-price__table tfoot td { font-size: var(--va-fs-body); } }