/* Shell: header, bottom capsule (A6), menu grid (A4), footer, preloader, page transitions. */

/* ---------- wordmark ---------- */
.site-header__brand, .menu-grid__brand {
	font: 600 var(--va-fs-lead)/1 var(--va-font-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
/* wordmark: VELART 600 + AUTO 300, caps, no gap */
.site-header__brand .va-accent, .menu-grid__brand .va-accent, .site-footer__word .va-accent { font-weight: 300; }

/* ---------- header ---------- */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 50; height: var(--va-header-h);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--va-gutter);
	color: var(--va-paper); mix-blend-mode: difference; pointer-events: none;
	view-transition-name: site-header;
}
/* with JS: plain colours per part (shell.js "header tone"), no blending of the page under a fixed layer */
.va-js .site-header { mix-blend-mode: normal; color: var(--va-ink); }
.va-js .site-header > * { transition: color .25s var(--va-ease-out); }
.va-js .site-header > .is-on-ink { color: var(--va-paper); }
.va-js .site-header > .is-on-photo { text-shadow: 0 1px 12px rgb(var(--va-ink-c) / .5); }
/* scrolled (shell.js): a solid plate in the colour of the section under the header + a hairline; fades by opacity only.
   The plate switches paper/ink at once with the text, so there is no frame of light text on a light plate. */
.site-header::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: var(--va-header-plate, var(--va-paper)); box-shadow: 0 1px 0 rgb(var(--va-ink-c) / .1);
	opacity: 0; transition: opacity .3s var(--va-ease-out);
}
.site-header.is-solid { pointer-events: auto; }
.site-header.is-solid::before { opacity: 1; }
.site-header.is-solid.is-ink::before { background: var(--va-header-plate, var(--va-ink)); box-shadow: 0 1px 0 rgb(var(--va-paper-c) / .12); }
.va-js .site-header.is-solid > * { transition: none; }
.site-header a { pointer-events: auto; text-decoration: none; }
.site-header__menu { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 600 var(--va-fs-small)/1 var(--va-font-text); letter-spacing: .14em; text-transform: uppercase; }
.site-header__burger, .bottom-bar__burger { display: inline-grid; gap: 5px; width: 22px; }
.site-header__burger i, .bottom-bar__burger i { display: block; height: 1.5px; background: currentColor; transition: transform var(--va-dur) var(--va-ease-out); }
.site-header__burger i:last-child { width: 60%; }
.site-header__menu:hover .site-header__burger i:last-child { transform: scaleX(1.66); transform-origin: left; }
.site-header__phone { justify-self: end; font: 500 var(--va-fs-small)/1 var(--va-font-text); letter-spacing: .02em; min-height: 44px; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
	.site-header { grid-template-columns: 1fr auto; }
	.site-header__menu { display: none; }
	.site-header__brand { justify-self: start; font-size: var(--va-fs-lead); }
	.site-header__phone { font-size: var(--va-fs-small); }
}

/* ---------- bottom capsule ---------- */
.bottom-bar {
	position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
	transform: translateX(-50%); transition: transform .5s var(--va-ease-out), opacity .3s;
	view-transition-name: bottom-bar;
}
.bottom-bar.is-hidden { transform: translate(-50%, calc(100% + 32px)); }
.bottom-bar.is-hidden:focus-within { transform: translateX(-50%); }
.bottom-bar__list {
	display: flex; align-items: center; gap: 2px; padding: 6px; margin: 0;
	background: rgb(var(--va-ink-c) / .94); color: var(--va-paper); /* no backdrop blur: it re-blurred the page under the capsule every scroll frame */
	border-radius: var(--va-pill);
}
.bottom-bar__link {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 0 20px; border-radius: var(--va-pill);
	font: 500 var(--va-fs-small)/1 var(--va-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
	transition: background var(--va-dur-fast), color var(--va-dur-fast);
}
.bottom-bar__link:hover { background: rgb(var(--va-paper-c) / .08); }
.bottom-bar__link:focus-visible { outline-offset: -3px; }
.bottom-bar__link[aria-current='page']::after { content: ''; position: absolute; left: 50%; bottom: 7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.bottom-bar__burger { width: 16px; gap: 4px; }
.bottom-bar__link[aria-expanded='true'] .bottom-bar__burger i:first-child { transform: translateY(2.75px) rotate(45deg); }
.bottom-bar__link[aria-expanded='true'] .bottom-bar__burger i:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.bottom-bar__item--lead .bottom-bar__link { background: var(--va-paper); color: var(--va-ink); font-weight: 600; margin-left: 4px; }
.bottom-bar__item--lead .bottom-bar__link:hover { background: var(--va-paper); opacity: .86; }
@media (max-width: 767px) {
	.bottom-bar { left: 8px; right: 8px; transform: none; bottom: max(8px, env(safe-area-inset-bottom)); }
	.bottom-bar.is-hidden { transform: translateY(calc(100% + 24px)); }
	.bottom-bar.is-hidden:focus-within { transform: none; }
	.bottom-bar__list { justify-content: space-between; padding: 4px; }
	.bottom-bar__item { flex: 1 1 0; min-width: 0; }
	.bottom-bar__item--lead { flex: 1.1 1 0; }
	.bottom-bar__link { width: 100%; padding: 0 4px; min-height: 52px; font-size: var(--va-fs-small); gap: 6px; }
	.bottom-bar__item--lead .bottom-bar__link { margin-left: 2px; }
	.bottom-bar__label[data-short] { font-size: 0; }
	.bottom-bar__label[data-short]::after { content: attr(data-short) / ''; font-size: var(--va-fs-small); }
	.bottom-bar__item--menu .bottom-bar__burger { display: none; }
}

/* ---------- menu grid ---------- */
.menu-grid {
	position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column;
	background: var(--va-ink); color: var(--va-paper);
	padding: 0 var(--va-gutter) var(--va-s4); overflow-y: auto; overscroll-behavior: contain;
}
.menu-grid:target, .menu-grid.is-open { display: flex; }
.menu-grid:focus { outline: none; }
.menu-grid__bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--va-header-h); }
.menu-grid__brand { color: inherit; }
.menu-grid__close { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font: 600 var(--va-fs-small)/1 var(--va-font-text); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.menu-grid__close i { position: relative; width: 22px; height: 22px; }
.menu-grid__close i::before, .menu-grid__close i::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; transform: rotate(45deg); transition: transform var(--va-dur) var(--va-ease-out); }
.menu-grid__close i::after { transform: rotate(-45deg); }
.menu-grid__close:hover i::before { transform: rotate(135deg); }
.menu-grid__close:hover i::after { transform: rotate(45deg); }

.menu-grid__tiles {
	flex: 1; display: grid; gap: 8px; min-height: 0;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: minmax(150px, 1fr) minmax(150px, 1fr) minmax(170px, .95fr);
	grid-template-areas:
		'catalog catalog stock stock kalkulyator usloviya'
		'catalog catalog stock stock o-kompanii kontakty'
		'dir dir dir dir dir contact';
}
.menu-tile--catalog { grid-area: catalog; }
.menu-tile--stock { grid-area: stock; }
.menu-tile--kalkulyator { grid-area: kalkulyator; }
.menu-tile--usloviya { grid-area: usloviya; }
.menu-tile--o-kompanii { grid-area: o-kompanii; }
.menu-tile--kontakty { grid-area: kontakty; }
.menu-grid__directions { grid-area: dir; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.menu-grid__directions-title { position: absolute; z-index: 2; left: 16px; top: 14px; color: var(--va-paper); pointer-events: none; }
.menu-grid__directions .menu-tile:first-of-type .menu-tile__text { padding-top: 40px; }
.menu-grid__contact { grid-area: contact; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.menu-grid__phone { font: 300 var(--va-fs-h3)/1 var(--va-font-display); letter-spacing: 0; white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
.menu-grid__contact .va-btn { min-height: 48px; padding: 0 22px; }

.menu-tile {
	position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 0; padding: 18px; border-radius: var(--va-radius); background: var(--surface); color: var(--va-paper); text-decoration: none;
}
.menu-tile__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.menu-tile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--va-ease-out); }
.menu-tile__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--va-ink-c) / .5) 0%, rgb(var(--va-ink-c) / .3) 35%, rgb(var(--va-ink-c) / .85) 100%); transition: opacity .6s var(--va-ease-out); }
.menu-tile:is(:hover, :focus-visible) .menu-tile__media::after { opacity: .8; }
.menu-tile:hover .menu-tile__media img, .menu-tile:focus-visible .menu-tile__media img { transform: scale(1.05); }
.menu-tile__text { display: grid; gap: 8px; overflow: hidden; }
.menu-tile__label { display: block; font: 600 var(--va-fs-h3)/.95 var(--va-font-display); letter-spacing: -.005em; text-transform: uppercase; transition: transform .6s var(--va-ease-out); }
.menu-tile--big .menu-tile__label { font-size: var(--va-fs-h2); letter-spacing: -.01em; line-height: .95; }
.menu-tile__meta { font-size: var(--va-fs-small); line-height: 1.35; color: rgb(var(--va-paper-c) / .8); }
.menu-tile:hover .menu-tile__label, .menu-tile:focus-visible .menu-tile__label { transform: translateX(6px); }
.menu-tile:focus-visible { outline: 2px solid var(--va-paper); outline-offset: -4px; }
.menu-grid__directions .menu-tile__label { font-size: var(--va-fs-h3); }

@media (max-width: 1023px) and (min-width: 768px) {
	.menu-grid__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 34vh 18vh 18vh 26vh; grid-template-areas:
		'catalog catalog stock stock' 'kalkulyator usloviya o-kompanii kontakty' 'dir dir dir dir' 'dir dir dir dir'; }
	.menu-grid__contact { display: none; }
}
@media (max-width: 767px) {
	.menu-grid { padding-bottom: calc(var(--va-bar-space) - 16px); }
	.menu-grid__tiles { flex: none; grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(128px, auto); grid-template-areas: none; }
	.menu-grid__tiles > * { grid-area: auto; }
	.menu-tile--big { grid-column: 1 / -1; min-height: 190px; }
	.menu-grid__directions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding-top: 34px; }
	.menu-grid__directions-title { top: 8px; left: 2px; }
	.menu-grid__directions .menu-tile { min-height: 112px; }
	.menu-grid__directions .menu-tile:first-of-type { grid-column: 1 / -1; }
	.menu-grid__directions .menu-tile:first-of-type .menu-tile__text { padding-top: 0; }
	.menu-grid__contact { grid-column: 1 / -1; }
	.menu-tile { padding: 14px; }
}

/* ---------- footer ---------- */
.site-footer { padding-top: var(--va-section-y); padding-bottom: 0; overflow: hidden; }
.site-footer__copy { margin-bottom: 0; }
.site-footer__lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--va-s7) clamp(40px, 7vw, 140px); padding-bottom: var(--va-section-y); border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.site-footer__lead-copy { display: grid; align-content: start; gap: var(--va-s5); }
.site-footer__lead-title { margin: 0; font-size: clamp(34px, 4.4vw, 76px); }
.site-footer__lead-title > span { white-space: nowrap; } /* two lines: "Подберём машину" / "под вашу задачу" */
.site-footer__lead-text { margin: 0; max-width: 40ch; }
/* contacts as their own block: key — value rows with hairlines */
.lead-contacts { list-style: none; margin: var(--va-s4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.lead-contacts__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lead-contacts__k { font-size: var(--va-fs-small); color: var(--mute); }
.lead-contacts__v { justify-self: start; color: var(--fg); text-decoration: none; }
.lead-contacts__v--phone { font: 400 var(--va-fs-h3)/1.1 var(--va-font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lead-contacts__v--phone:hover { opacity: .8; }
@media (max-width: 559px) { .lead-contacts__row { grid-template-columns: 1fr; } }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: var(--va-s7) var(--va-col-gap); padding-block: var(--va-s8) var(--va-s7); }
.site-footer__grid .va-eyebrow { margin-bottom: var(--va-s4); }
.site-footer__nav ul { columns: 2; column-gap: var(--va-col-gap); }
.site-footer__nav li { break-inside: avoid; padding: 3px 0; }
.site-footer__nav a { text-decoration: none; background-size: 0 1px; }
.site-footer__nav a:hover { background-size: 100% 1px; background-position: 0 100%; }
.site-footer__contacts { font-style: normal; display: grid; align-content: start; gap: 6px; }
.site-footer__phone { display: inline-block; justify-self: start; font: 300 var(--va-fs-h3)/1 var(--va-font-display); text-decoration: none; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.site-footer__legal { display: grid; align-content: start; gap: 12px; color: var(--mute); font-size: var(--va-fs-small); }
.site-footer__legal p:first-of-type:not(.va-eyebrow) { color: var(--fg); font-size: var(--va-fs-body); }
/* static wordmark across the full width, the last thing on the page */
.site-footer__word { font: 600 clamp(56px, 19.2vw, 350px)/.8 var(--va-font-display); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; margin: var(--va-s7) 0 0; padding: 0 0 .06em; color: var(--fg); text-align: center; overflow: hidden; }
.site-footer__copy { font-size: var(--va-fs-small); color: var(--mute); max-width: 72ch; border-top: 1px solid var(--line); padding-top: var(--va-s5); }
@media (max-width: 899px) {
	.site-footer__lead { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__nav { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
	.site-footer__grid { grid-template-columns: 1fr; }
}

/* ---------- preloader: pure CSS, first visit of a session (html.va-intro), ends by 1.15 s ---------- */
.preloader { display: none; }
.va-intro .preloader {
	position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--va-ink); color: var(--va-paper);
	animation: va-pre-out .38s var(--va-ease-in-out) .8s forwards;
}
.preloader__sign { width: min(78vw, 640px); height: auto; overflow: visible; }
.preloader__word, .preloader__auto { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 1; stroke-dasharray: 900; stroke-dashoffset: 900; }
.preloader__word { font: 600 126px/1 var(--va-font-display); letter-spacing: 0; text-transform: uppercase; }
.preloader__auto { font-weight: 300; }
.va-intro .preloader__word, .va-intro .preloader__auto { animation: va-pre-draw .75s var(--va-ease-out) forwards; }
.va-intro .preloader__auto { animation-delay: .1s; }
.preloader__line { stroke: currentColor; stroke-opacity: .4; stroke-width: 1.5; stroke-dasharray: 624; stroke-dashoffset: 624; }
.va-intro .preloader__line { animation: va-pre-line .7s var(--va-ease-in-out) .05s forwards; }
@keyframes va-pre-draw { 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; } }
@keyframes va-pre-line { to { stroke-dashoffset: 0; } }
@keyframes va-pre-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* ---------- page transitions (cross-document View Transitions; ignored where unsupported) ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: va-vt-out .45s var(--va-ease-in-out) both; }
	::view-transition-new(root) { animation: va-vt-in .6s var(--va-ease-out) both; }
}
@keyframes va-vt-out { to { opacity: .2; transform: translateY(-3vh) scale(.985); } }
@keyframes va-vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
	.va-intro .preloader { display: none; }
}

/* admin bar offset (logged-in editors only) */
.admin-bar .menu-grid { top: 32px; }
@media (max-width: 782px) { .admin-bar .menu-grid { top: 46px; } }
@media (max-width: 767px) {
	.bottom-bar { z-index: 90; } /* on phones the capsule stays usable above the open menu */
}