/* Vossen Russia — основа. Токены сняты с UI-кита макетов. */

:root {
	--ink: #111111;
	--ink-2: #4a4a4a;
	--ink-3: #777777;
	--ink-4: #9a9c9c;
	--line: #e5e5e2;
	--line-2: #d9d9d4;
	--bg: #ffffff;
	--bg-2: #f7f7f5;
	--bg-3: #f1f1ef;
	--accent: #d52331;
	--accent-2: #bc1c26;
	--flat: #c8912e;
	--deep: #d52331;
	--superdeep: #3f4a73;
	--mid: #2e7d4f;
	/* Страница полноширинная с полями 64px — как на всех артбордах.
	   Ограничение по ширине здесь было ошибкой: контент вставал в рамку
	   1440, а тёмные полосы, шапка и подвал шли во всю ширину окна,
	   и на широком экране текст оказывался смещён относительно них. */
	--wrap: none;
	--pad: 64px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Onest', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* Страховка: длинное слово без пробелов (битый текст, длинный адрес)
	   не должно расталкивать страницу и включать горизонтальную прокрутку. */
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

.v-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ---- шапка ---- */

.v-top {
	border-bottom: 1px solid var(--line);
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 40;
}
.v-top-in {
	display: flex;
	align-items: center;
	gap: 40px;
	height: 80px;
}
.v-logo {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink);
}
.v-logo:hover { color: var(--ink); }
.v-logo span { color: var(--accent); }

.v-nav { display: flex; align-items: stretch; align-self: stretch; }
.v-nav a,
.v-nav .menu-item > a {
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: color .15s;
}
.v-nav a:hover { color: var(--accent); }
.v-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 28px; }

/* Пункт занимает всю высоту шапки: иначе между ссылкой и краем шапки
   остаётся зазор, курсор проваливается в него по дороге к списку,
   и выпадающее меню закрывается на полпути. */
.v-nav > ul > .menu-item { position: relative; display: flex; align-items: center; }

.v-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 7px;
	border-right: 1.2px solid currentColor;
	border-bottom: 1.2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .16s;
}
.v-nav .menu-item-has-children:hover > a::after { transform: translateY(-1px) rotate(225deg); }

.v-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -20px;
	z-index: 50;
	display: block;
	min-width: 280px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--bg);
	border: 1px solid var(--line);
	box-shadow: 0 8px 28px rgba(17, 17, 17, .10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s, transform .16s, visibility .16s;
}
.v-nav .menu-item-has-children:hover > .sub-menu,
.v-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.v-nav .sub-menu .menu-item { display: block; }
.v-nav .sub-menu .menu-item + .menu-item { border-top: 1px solid #f0f0ed; }
.v-nav .sub-menu a {
	display: block;
	padding: 16px 22px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}
/* Активный пункт — красное подчёркивание 2 px (Kit). */
.v-nav > ul > .current-menu-item > a,
.v-nav > ul > .current-menu-ancestor > a,
.v-nav > ul > .current_page_parent > a,
.v-nav > ul > .is-current > a {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
}

.v-top-side { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.v-cart { position: relative; display: flex; align-items: center; color: var(--ink); }
.v-cart-num {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* ---- кнопки ---- */

.v-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 26px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.v-btn-primary { background: var(--ink); color: #fff; }
.v-btn-primary:hover { background: #000; color: #fff; }
.v-btn-secondary { background: #fff; color: var(--ink); border-color: var(--ink); }
.v-btn-secondary:hover { background: var(--ink); color: #fff; }
.v-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.v-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.v-btn-sm { height: 38px; padding: 0 18px; font-size: 12px; }
/* Состояния из Kit: недоступная кнопка и видимый фокус с клавиатуры. */
.v-btn:disabled, .v-btn.is-disabled, .v-btn[aria-disabled="true"] { background: #f3f3f1; color: #a9a9a4; border-color: var(--line); cursor: not-allowed; }
a:focus-visible, button:focus-visible, .v-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v-sel:focus, .v-field input:focus, .v-cofield input:focus, .v-cofield .v-sel:focus, .v-cotext:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.v-sel:disabled { background-color: #f3f3f1; color: #a9a9a4; cursor: not-allowed; }

/* ---- хлебные крошки и заголовок раздела ---- */

.v-crumbs {
	font-size: 12.5px;
	color: var(--ink-3);
	padding: 22px 0 0;
}
.v-crumbs a { color: var(--ink-3); }
.v-crumbs a:hover { color: var(--ink); }

.v-head { padding: 26px 0 40px; border-bottom: 1px solid var(--line); }
.v-head h1 { font-size: 44px; letter-spacing: -.02em; margin-bottom: 14px; }
.v-head p { max-width: 720px; color: var(--ink-2); margin: 0 0 22px; }

/* ---- каталог ---- */

.v-catalog { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 44px; padding-top: 40px; padding-bottom: 72px; }

/* Колонка фильтров прилипает под шапкой. Одного position:sticky мало:
   серий и диаметров набирается больше экрана, и колонка выше окна просто
   уезжает вместе с сеткой дисков. Поэтому ограничиваем её высотой экрана
   и даём собственную прокрутку — прилипает при любом числе фильтров. */
/*
 * Фильтр показывается целиком, без внутренней прокрутки: колонка задаёт
 * высоту строки сетки, поэтому страница не короче фильтра даже при четырёх
 * карточках. Прилипает к экрану, только когда целиком в него помещается
 * (класс is-fit ставит скрипт) — иначе нижние группы было бы не достать.
 */
.v-filters {
	align-self: start;
	padding-right: 8px;
}
.v-filters.is-fit {
	position: sticky;
	top: 100px;
}
.v-filters-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 22px;
}
.v-filters-top b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.v-filters-top a { font-size: 12.5px; color: var(--ink-3); }

.v-fgroup { margin-bottom: 26px; }
.v-fgroup > h3 {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 10px;
}
.v-f {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	color: var(--ink);
	font-size: 14px;
}
.v-f:hover { color: var(--accent); }
.v-f-count { margin-left: auto; font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.v-f-box {
	width: 15px;
	height: 15px;
	border: 1px solid var(--line-2);
	background: #fff;
	flex: 0 0 15px;
}
.v-f.is-on .v-f-box { background: var(--ink); border-color: var(--ink); }
.v-f.is-on { font-weight: 600; }

.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chip {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--line);
	font-size: 13px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.v-chip:hover { border-color: var(--ink); color: var(--ink); }
.v-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- результаты ---- */

.v-results {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 34px;
	font-size: 13.5px;
	color: var(--ink-3);
}
.v-results b { color: var(--ink); }

.v-series { margin-bottom: 58px; }
.v-series-head { margin-bottom: 28px; }
.v-series-top { margin-bottom: 18px; }
/* Логотип серии без рамки: оконтовка поля превращала его в кнопку,
   которой он не является. Высота задана жёстко — у SVG нет собственных
   размеров, и ограничение сверху схлопывает его в ноль. */
.v-series-badge { display: inline-flex; align-items: center; }
.v-series-badge img { height: 52px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.v-series-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.v-series-head h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 12px; }
.v-series-head p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 620px; }
.v-series-meta { flex: none; text-align: right; }
.v-series-meta b { display: block; font-size: 14px; font-weight: 500; }
.v-series-meta i { display: block; margin-top: 4px; font-style: normal; font-size: 13px; color: var(--ink-3); }

.v-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 26px; }

.v-card {
	background: #fff;
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	color: var(--ink);
	transition: box-shadow .18s, border-color .18s;
}
.v-card:hover { box-shadow: 0 6px 24px rgba(17, 17, 17, .08); border-color: var(--line-2); color: var(--ink); }
/* Квадрат: диск снят по центру кадра, и 4:3 срезает его сверху и снизу.
   position нужен метке «Новинка» — она лежит поверх снимка. */
.v-card-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--bg-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.v-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v-thumb-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--ink-4);
	text-align: center;
	padding: 20px;
}
.v-thumb-empty span { font-size: 19px; font-weight: 600; letter-spacing: .04em; color: var(--line-2); }
.v-thumb-empty small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

.v-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.v-card-head { display: flex; align-items: center; gap: 9px; }
.v-card-title { font-size: 19px; font-weight: 600; }
.v-card-lug {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-2);
	background: var(--bg-3);
	padding: 3px 7px;
}
.v-card-sub { font-size: 13px; color: var(--ink-3); }
/* Диаметры перечнем через тонкую черту — как в макете. */
.v-card-dias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.v-card-dias i { font-style: normal; color: var(--line); }
.v-card-dias em { font-style: normal; color: var(--ink-4); }
.v-dia {
	font-size: 11.5px;
	padding: 3px 7px;
	background: var(--bg-3);
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}
.v-card-dots { display: flex; gap: 5px; align-items: center; }
.v-dot {
	width: 15px;
	height: 15px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}
.v-card-price { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.v-card-price b { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.v-card-none { color: var(--ink-4); font-size: 13px; }

.v-empty { padding: 60px 0; color: var(--ink-3); }

/* ---- подвал ---- */

.v-foot { background: var(--ink); color: #fff; padding: 56px 0 26px; margin-top: 0; }
.v-foot-cols { display: grid; grid-template-columns: 1.1fr 1fr 1.15fr 1.15fr 1.3fr; gap: 32px; }
.v-foot h3 { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.v-foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.v-foot-links a, .v-foot-links span { color: var(--ink-4); transition: color .15s; }
.v-foot-cols > * { min-width: 0; }
.v-foot-links a, .v-foot-links span { overflow-wrap: anywhere; }
.v-foot-links a:hover, .v-foot-links a:focus-visible { color: #fff; }
.v-foot-social { display: flex; gap: 12px; margin-top: 28px; }
.v-foot-social a { width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; color: var(--ink-4); transition: color .15s, border-color .15s; }
.v-foot-social a:hover { color: #fff; border-color: #fff; }
.v-foot-social svg { width: 15px; height: 15px; }
.v-foot-note { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px; font-size: 12px; color: #75797a; }
.v-foot-note a { color: #75797a; }
.v-foot-note a:hover, .v-foot-note a:focus-visible { color: #fff; }
.v-foot-legal { flex: 1 1 480px; min-width: 0; }
.v-foot-legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.v-foot-legal-links a { overflow-wrap: anywhere; }

@media (max-width: 1180px) {
	:root { --pad: 32px; }
	.v-catalog { grid-template-columns: 1fr; gap: 30px; }
	.v-filters, .v-filters.is-fit { position: static; padding-right: 0; }
	.v-foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.v-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	:root { --pad: 18px; }
	.v-head h1 { font-size: 32px; }
	.v-top-in { gap: 18px; }
	.v-nav { display: none; }
	.v-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
	.v-foot-contacts { grid-column: 1 / -1; }
	.v-foot-note { gap: 16px; }
	.v-foot-legal { flex-basis: 100%; }
	.v-foot-legal-links { flex-direction: column; gap: 12px; }
}

/* ---- страница диска ---- */

.v-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; padding-top: 26px; padding-bottom: 70px; }
.v-hero-shot { background: #fff; border: 1px solid #f0f0ed; aspect-ratio: 620 / 560; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Диск вписывается целиком: кадрирование срезает обод и диск «вываливается». */
.v-hero-shot img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }

.v-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.v-hero-h1 { font-size: 46px; letter-spacing: -.02em; margin-bottom: 14px; }
.v-hero-price { font-size: 14px; color: var(--ink-3); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.v-hero-price b { font-size: 27px; color: var(--ink); font-variant-numeric: tabular-nums; }
.v-stock { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.v-stock i { width: 8px; height: 8px; border-radius: 999px; background: var(--mid); flex: none; }
.v-stock.is-order i { background: var(--flat); }
.v-stock em { font-style: normal; font-weight: 500; color: var(--ink-3); }
/* Перечень фактов через точку — как в макете; подписи убраны. */
.v-hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.v-hero-facts span + span::before { content: '·'; margin-right: 10px; color: var(--line-2); }
.v-hero-facts b { color: var(--ink); }

.v-block { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.v-block-h { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.v-fin-name { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 500; margin-left: 8px; }

/* Кружки отделок заменены карточками — см. .v-finblock ниже. */

.v-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin: 12px 0 0; }

.v-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.v-tab {
	height: 38px; padding: 0 16px; background: #fff; border: 1px solid var(--line);
	font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: .15s;
}
.v-tab:hover { border-color: var(--ink); color: var(--ink); }
.v-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.v-axle { border: 1px solid var(--line); padding: 16px 18px 14px; margin-bottom: 12px; }
.v-axle-h { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.v-field { display: block; margin-bottom: 10px; }
.v-field > span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.v-sel { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-size: 14px; color: var(--ink); }
.v-axle-sum { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.v-axle-sum b { margin-left: auto; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.v-tag { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

.v-total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--ink); margin-top: 6px; font-size: 14px; }
.v-total b { font-size: 27px; font-variant-numeric: tabular-nums; }
.v-add { width: 100%; }
.v-add:disabled { background: var(--bg-3); color: var(--ink-4); cursor: not-allowed; }

/* ---- таблица размеров ---- */

.v-sizes, .v-about { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--line); }
/* «О модели»: текст слева, карточка с главным справа — строка не обрывается пустотой. */
.v-about { background: #fff; }
.v-about-in { max-width: 1180px; margin: 0 auto; padding-top: 24px; padding-bottom: 24px; text-align: center; }
.v-about-kick { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.v-about-in .v-sec-rule { margin: 14px auto 34px; }
.v-about-in .v-prose { max-width: 1000px; margin: 0 auto; font-size: 17px; line-height: 1.75; text-align: left; }
.v-about-in .v-prose p { margin: 0 0 1.1em; }
.v-about-in .v-prose ul, .v-about-in .v-prose ol { padding-left: 1.2em; }
@media (max-width: 1020px) {
}
.v-sec-h { font-size: 30px; }
.v-sec-rule { width: 40px; height: 3px; background: var(--accent); margin: 12px 0 30px; }

.v-legend { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 22px; font-size: 12.5px; color: var(--ink-2); }
.v-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 7px; }
.v-legend-note { color: var(--ink-4); }

.v-table { width: 100%; border-collapse: collapse; }
.v-table th {
	text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-3); font-weight: 600; padding: 0 0 10px; border-bottom: 1px solid var(--line);
}
.v-table td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.v-table-size { width: 170px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Позиция вылета — обычная строка текста. Своей заливки у неё нет:
   фон задаёт строка таблицы, и плашка поверх него читалась как
   отдельный серый прямоугольник на белой строке. */
.v-offsets { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.v-offset {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 15px; font-variant-numeric: tabular-nums;
}

.v-blank { margin-top: 40px; padding: 26px 28px 28px; background: var(--bg-2); }
.v-blank h3 { font-size: 17px; margin-bottom: 6px; }
/* Заказные размеры выводятся той же таблицей, что и стандартные. */


@media (max-width: 980px) {
	.v-hero { grid-template-columns: 1fr; gap: 30px; }
	.v-hero-h1 { font-size: 34px; }
	.v-table-size { width: 110px; }
}

/* ---- заявка: корзина, оформление, готово — артборды Cart, Checkout, Success ---- */

.v-shophead { background: #fff; border-bottom: 1px solid var(--line); padding: 22px 0 26px; }
.v-shophead-crumbs { margin-bottom: 18px; font-size: 13px; color: var(--ink-3); }
.v-shophead-crumbs a { color: var(--ink-3); }
.v-shophead-crumbs span { color: var(--ink); }
.v-shophead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.v-shophead h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.v-shophead h1 small { font-size: 22px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #a9a9a4; }
.v-shophead.is-center { padding: 22px 0 24px; }
.v-shophead.is-center .v-shophead-row { justify-content: center; }

.v-steps { display: flex; align-items: center; margin: 0; padding: 0 0 6px; list-style: none; }
.v-steps li { display: flex; align-items: center; gap: 10px; }
.v-steps li + li::before { content: ""; width: 40px; height: 1px; margin-right: 10px; background: var(--line); }
.v-steps-n { width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #fff; color: #a9a9a4; border: 1px solid var(--line); }
.v-steps-n svg { width: 12px; height: 12px; }
.v-steps-l { font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #a9a9a4; }
.v-steps li.is-done .v-steps-n, .v-steps li.is-on .v-steps-n { background: var(--ink); color: #fff; border-color: var(--ink); }
.v-steps li.is-on .v-steps-l { font-weight: 700; color: var(--ink); }
.v-shophead.is-center .v-steps { padding-bottom: 0; }

.v-shop { padding-top: 32px; padding-bottom: 64px; }
.v-shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 24px; align-items: start; }
.v-shop-empty { padding: 60px 0 20px; }
.v-errors { border: 1px solid var(--accent); background: #fdf3f3; padding: 14px 16px; margin-bottom: 20px; font-size: 13.5px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.v-shop-empty p { margin: 0 0 22px; font-size: 16px; color: var(--ink-3); }
.v-shop:has(+ .v-donewait) { padding-bottom: 0; }

/* позиция корзины */
.v-cpos { background: #fff; border: 1px solid var(--line); padding: 24px 26px; margin-bottom: 20px; }
.v-cpos-head { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.v-cpos-img { display: block; width: 104px; height: 104px; background: #fff; border: 1px solid #f0f0ed; overflow: hidden; }
.v-cpos-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v-cpos-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.v-cpos-sub { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.v-cpos-stock { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12px; font-weight: 600; }
.v-cpos-stock i { width: 7px; height: 7px; border-radius: 999px; background: var(--mid); flex: none; }
.v-cpos-stock.is-order i { background: var(--flat); }
.v-cpos-del { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.v-cpos-del svg { width: 12px; height: 12px; }
.v-cpos-del:hover { color: var(--accent); }
.v-cpos-rows { margin-top: 18px; }
.v-cpos-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 132px 108px; gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid #f2f2ef; }
.v-cpos-row.is-opt { padding: 11px 0; }
.v-cpos-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-cpos-size { font-size: 14px; font-weight: 600; }
.v-cpos-spec { margin-left: 10px; font-size: 13px; color: var(--ink-3); }
.v-cpos-optname { font-size: 13.5px; color: var(--ink-2); }
.v-cpos-mul { font-size: 13px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.v-cpos-sum { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.v-cpos-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.v-cpos-total { display: flex; align-items: baseline; gap: 14px; }
.v-cpos-total span { font-size: 12.5px; color: var(--ink-3); }
.v-cpos-total b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-acc1-qty.is-small { height: 40px; border-color: var(--line); }
.v-acc1-qty.is-small button { width: 32px; font-size: 16px; }
.v-acc1-qty.is-small input { width: 34px; font-size: 14px; border: 0; }

/* сводка справа */
.v-shopsum { position: sticky; top: 24px; background: #fff; border: 1px solid var(--line); padding: 26px; }
.v-shopsum.is-static { position: static; }
.v-shopsum-h { margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-shopsum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid #f2f2ef; font-size: 13.5px; }
.v-shopsum-row span { color: var(--ink-2); }
.v-shopsum-row b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v-shopsum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.v-shopsum-total span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v-shopsum-total b { font-size: 26px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v-shopsum.is-static .v-shopsum-total b { font-size: 24px; }
.v-shopsum-count { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.v-shopsum-box { margin: 20px 0 18px; padding: 16px 18px; background: #fafaf8; border: 1px solid #f0f0ed; }
.v-shopsum-box .v-shopsum-h { margin-bottom: 10px; }
.v-shopsum-box p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.v-shopsum .v-btn-wide { margin-bottom: 16px; }
.v-shopsum-edit { margin-top: 14px; font-size: 11.5px; }
.v-shopsum-next { margin-top: 22px; padding-top: 20px; border-top: 1px solid #f0f0ed; margin-bottom: 22px; }
.v-shopsum-next > div:not(.v-shopsum-h) { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.v-shopsum-next > div + div { margin-top: 14px; }
.v-shopsum-next b { font-weight: 700; color: var(--accent); }
.v-shopsum-facts { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #f0f0ed; font-size: 13.5px; }
.v-shopsum-facts div { display: flex; justify-content: space-between; gap: 14px; }
.v-shopsum-facts span { color: var(--ink-3); }
.v-shopsum-facts b { font-weight: 600; text-align: right; }
.v-shopsum-facts + .v-paynote { margin-top: 20px; }
.v-paynote { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.v-paynote i { width: 7px; height: 7px; margin-top: 6px; border-radius: 999px; background: var(--flat); flex: none; }
.v-shopsum-total + .v-paynote { margin-top: 20px; }

/* оформление */
.v-cocard { background: #fff; border: 1px solid var(--line); padding: 28px 30px; margin-bottom: 20px; }
.v-cocard h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-cocard h2.is-solo { margin-bottom: 20px; }
.v-cocard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 4px; }
.v-cocard-top h2 { margin: 0; }
.v-cocard-top span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a9a9a4; }
.v-cocard-note { margin: 0 0 24px; max-width: 560px; font-size: 13.5px; color: var(--ink-3); }
.v-cogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 22px; }
.v-cogrid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.v-cofield { display: block; }
.v-cofield > span, .v-cofield-h { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-cofield-h { margin-bottom: 14px; }
.v-cofield em { font-style: normal; color: var(--accent); }
.v-cofield input, .v-cofield .v-sel, .v-cotext { width: 100%; height: 52px; padding: 0 16px; background: #fff; border: 1px solid var(--line); border-radius: 0; font: inherit; font-size: 15px; color: var(--ink); }
.v-cotext { height: auto; min-height: 110px; padding: 14px 16px; resize: vertical; display: block; }
.v-cofield input::placeholder, .v-cotext::placeholder { color: #a9a9a4; }
.v-cofield input:focus, .v-cofield .v-sel:focus, .v-cotext:focus { outline: none; border-color: var(--ink); }
.v-cofield .v-sel:disabled { color: #a9a9a4; background-color: #fff; }
.v-cofield.has-error input { border-color: var(--accent); }
.v-cochecks { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.v-cocheck { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.v-cocheck input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.v-cocheck i { width: 18px; height: 18px; margin-top: 2px; border: 1px solid #c4c4bf; background: #fff; display: flex; align-items: center; justify-content: center; }
.v-cocheck input:checked + i { background: var(--ink); border-color: var(--ink); }
.v-cocheck input:checked + i::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.v-cocheck input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.v-cocheck > span { font-size: 14px; line-height: 1.5; }
.v-cocheck small { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.v-cocheck small a { color: var(--ink-3); text-decoration: underline; }
.v-cocheck.is-block { margin-top: 18px; }
.v-cocheck.is-agree { margin: 0 0 8px; }
.v-cocheck.has-error i { border-color: var(--accent); }
.v-cohint { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fafaf8; border: 1px solid #f0f0ed; font-size: 13.5px; color: var(--ink-2); }
.v-cohint i { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; }
.v-cohint b { font-weight: 600; color: var(--ink); }

/* заявка отправлена */
.v-done { padding-top: 56px; padding-bottom: 60px; background: #fff; text-align: center; }
.v-done-mark { width: 82px; height: 82px; margin-bottom: 28px; border-radius: 999px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.v-done-mark svg { width: 36px; height: 36px; }
.v-done h1 { margin: 0 0 16px; font-size: 42px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.v-done p { max-width: 520px; margin: 0 auto 26px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.v-done-num { display: inline-flex; align-items: center; gap: 16px; padding: 14px 24px; background: #fafaf8; border: 1px solid var(--line); }
.v-done-num span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.v-done-num b { font-size: 19px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.v-done-mail { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }
.v-done-mail b { font-weight: 600; color: var(--ink); }
.v-done + .v-shop { padding-top: 44px; }
.v-donenext { background: #fff; border: 1px solid var(--line); padding: 8px 30px 12px; }
.v-donenext-h { padding: 20px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.v-donenext-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; border-top: 1px solid #f0f0ed; }
.v-donenext-step > b { font-size: 15px; font-weight: 700; color: var(--accent); }
.v-donenext-step strong { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: .03em; }
.v-donenext-step span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.v-donenext-acts { display: flex; flex-wrap: wrap; gap: 14px; padding: 22px 0 24px; border-top: 1px solid #f0f0ed; }
.v-donewait { padding-top: 56px; padding-bottom: 64px; }
.v-donewait h2 { margin: 0 0 24px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-donewait-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v-donewait-card { display: block; color: inherit; background: #fff; border: 1px solid var(--line); }
.v-donewait-card:hover { color: inherit; border-color: var(--line-2); }
.v-donewait-img { display: block; aspect-ratio: 16 / 9; background: #1a1a1a; overflow: hidden; }
.v-donewait-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-donewait-body { display: block; padding: 16px 18px 20px; }
.v-donewait-body em { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.v-donewait-body b { display: block; margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.v-donewait-go { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.v-donewait-go svg { width: 14px; height: 9px; }

@media (max-width: 1020px) {
	.v-shop-grid { grid-template-columns: minmax(0, 1fr); }
	.v-shopsum, .v-shopsum.is-static { position: static; }
	.v-donewait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.v-shophead-row { flex-direction: column; align-items: flex-start; gap: 18px; }
	.v-shophead.is-center .v-shophead-row { align-items: center; }
	.v-shophead h1 { font-size: 28px; }
	.v-shophead h1 small { font-size: 16px; }
	.v-steps li + li::before { width: 18px; }
	.v-steps-l { font-size: 11px; letter-spacing: .04em; }
	.v-cpos, .v-cocard { padding: 20px 18px; }
	.v-cpos-head { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
	.v-cpos-img { width: 72px; height: 72px; }
	.v-cpos-del { grid-column: 2; }
	.v-cpos-row, .v-cpos-row.is-opt { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
	.v-cpos-label { grid-column: 1 / -1; }
	.v-cpos-mul { text-align: left; }
	.v-cpos-spec { display: block; margin: 3px 0 0; }
	.v-cpos-row > span:nth-child(2) { grid-column: 1 / -1; }
	.v-cpos-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
	.v-cogrid, .v-cogrid.is-three { grid-template-columns: minmax(0, 1fr); }
	.v-done h1 { font-size: 30px; }
	.v-done-num { flex-direction: column; gap: 6px; }
	.v-donenext { padding: 4px 18px 8px; }
	.v-donewait-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- главная ---- */

.v-home-hero { position: relative; background: var(--bg-2); overflow: hidden; }
.v-home-hero.has-img { background: var(--ink); }
.v-home-hero-img { position: absolute; inset: 0; }
.v-home-hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.v-home-hero-in { position: relative; padding-top: 108px; padding-bottom: 116px; }
.v-home-hero.has-img .v-home-hero-in { color: #fff; }
.v-home-hero.has-img .v-eyebrow { color: #fff; }
.v-home-hero h1 { font-size: 64px; line-height: 1.05; letter-spacing: -.03em; max-width: 14ch; margin-bottom: 18px; }
.v-home-hero p { font-size: 18px; color: var(--ink-2); max-width: 46ch; margin: 0 0 32px; }
.v-home-hero.has-img p { color: rgba(255,255,255,.85); }
.v-home-hero-acts { display: flex; gap: 12px; flex-wrap: wrap; }

.v-home-about { padding-top: 76px; padding-bottom: 0; max-width: 900px; }
.v-home-about p { font-size: 17px; color: var(--ink-2); line-height: 1.7; }

.v-home-sec { padding-top: 76px; padding-bottom: 0; }
.v-home-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.v-home-sec-head .v-sec-rule { margin-bottom: 0; }

.v-home-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.v-gal-card { display: block; color: var(--ink); }
.v-gal-thumb { display: block; aspect-ratio: 4/3; background: var(--bg-2); overflow: hidden; }
.v-gal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.v-gal-card:hover .v-gal-thumb img { transform: scale(1.04); }
.v-gal-body { display: block; padding: 12px 0 0; font-size: 15px; }

.v-home-promo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 76px; padding-bottom: 0; }
.v-promo { display: block; padding: 34px 36px 30px; background: var(--bg-2); color: var(--ink); transition: background .18s; }
.v-promo:hover { background: var(--bg-3); color: var(--ink); }
/* Обёртка фотографии — тоже span, поэтому правила для текста её не
   должны задевать: max-width на ней обрезал картинку до 44ch. */
.v-promo > b { display: block; font-size: clamp(22px, 1.9vw, 28px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
/* Текст плитки — не больше трёх строк: плитка фиксированной высоты,
   длинный лид со страницы иначе выдавит ссылку за край. */
.v-promo > span:not(.v-promo-img) {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.55;
	max-width: 44ch;
}
.v-promo > i { display: inline-block; margin-top: 18px; font-style: normal; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

.v-home-cta { background: var(--ink); color: #fff; padding: 76px 0; margin-top: 90px; text-align: center; }
.v-home-cta h2 { font-size: 34px; margin-bottom: 10px; }
.v-home-cta p { color: var(--ink-4); margin: 0 auto 28px; max-width: 52ch; }
.v-home-cta .v-home-hero-acts { justify-content: center; }
.v-btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.v-btn-ghost-dark:hover { border-color: #fff; color: #fff; }

@media (max-width: 900px) {
	.v-home-hero h1 { font-size: 40px; }
	.v-home-hero-in { padding-top: 66px; padding-bottom: 72px; }
	.v-home-promo { grid-template-columns: 1fr; }
}

/* ---- обычные страницы ---- */

.v-page { padding-top: 56px; padding-bottom: 90px; }
.v-page-shot { padding-top: 8px; }
.v-page-shot img { width: 100%; }
.v-page-updated { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-4); }

.v-prose { max-width: 760px; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.v-prose h2 { font-size: 26px; color: var(--ink); margin: 44px 0 12px; }
.v-prose h3 { font-size: 20px; color: var(--ink); margin: 32px 0 10px; }
.v-prose p { margin: 0 0 18px; }
.v-prose ul, .v-prose ol { margin: 0 0 20px; padding-left: 20px; }
.v-prose li { margin-bottom: 8px; }
.v-prose img { margin: 26px 0; }
.v-prose blockquote {
	margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent);
	font-size: 18px; color: var(--ink); font-style: normal;
}
.v-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.v-prose th, .v-prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }

/* ---- отделки ---- */

.v-fin-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; }
.v-fin-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
/* Ширина обязательна: колонка выравнивает содержимое по центру, и без неё
   образец без фотографии схлопывается в ноль. */
.v-fin-swatch,
.v-fin-photo { width: 100%; }
.v-fin-swatch {
	display: block; aspect-ratio: 1/1; border-radius: 999px; margin-bottom: 8px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.v-fin-item b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-top: 6px; }
.v-fin-item i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.v-fin-item u { text-decoration: none; font-size: 12px; color: var(--accent); }
.v-fin-foot { max-width: 720px; margin-top: 10px; }

/* ---- контакты ---- */

.v-cthero { position: relative; background: #0c0c0c; color: #fff; }
.v-cthero-img { position: absolute; inset: 0; opacity: .42; overflow: hidden; }
.v-cthero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-cthero-in { position: relative; min-height: 340px; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 48px; }
.v-cthero-kick { margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.v-cthero h1 { margin: 0 0 14px; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.v-cthero p { margin: 0; max-width: 400px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .75); }

.v-ctmain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: start; padding-top: 56px; }
.v-ctinfo h2 { margin: 0 0 12px; font-size: 28px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-ctrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: 26px 0; }
.v-ctrow + .v-ctrow { border-top: 1px solid var(--line); }
.v-ctrow-ic { width: 56px; height: 56px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.v-ctrow-ic svg { width: 24px; height: 24px; }
.v-ctrow-h { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.v-ctrow-v { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.v-ctrow-v a { color: inherit; }
.v-ctrow-v a:hover { color: var(--accent); }
.v-ctmsg { padding-top: 26px; border-top: 1px solid var(--line); }
.v-ctmsg-h { margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-ctmsg-list { display: flex; flex-wrap: wrap; gap: 12px; }
.v-ctmsg-list a { display: inline-flex; align-items: center; gap: 11px; height: 46px; padding: 0 20px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.v-ctmsg-list a:hover { border-color: var(--ink); }
.v-ctmsg-list svg { width: 18px; height: 18px; }
.v-ctnote { margin-top: 24px; font-size: 13px; line-height: 1.7; color: var(--ink-3); }
.v-ctform { background: #fff; border: 1px solid var(--line); padding: 36px 40px 32px; scroll-margin-top: 100px; }
.v-ctform h2 { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-ctform-text { margin: 0 0 28px; font-size: 14.5px; line-height: 1.65; color: var(--ink-3); }
.v-ctform .v-cogrid { gap: 20px; margin-bottom: 20px; }
.v-ctform-msg { margin-bottom: 20px; }
.v-ctform-msg .v-cotext { min-height: 120px; }
.v-ctform-agree { margin: 4px 0 24px; }
.v-ctform-agree a { color: var(--accent); }
.v-ctform-req { margin-top: 16px; font-size: 12.5px; color: #a9a9a4; }
.v-ctform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v-ctsent { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 18px; padding: 20px; background: #fafaf8; border: 1px solid #f0f0ed; }
.v-ctsent span { width: 44px; height: 44px; border-radius: 999px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.v-ctsent svg { width: 20px; height: 20px; }
.v-ctsent p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.v-ctbody { padding-top: 48px; }
.v-ctmap { position: relative; height: 420px; margin-top: 56px; background: #eeeeea; overflow: hidden; }
.v-ctmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v-ctmap-card { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); max-width: 380px; padding: 30px 34px; background: #fff; border: 1px solid var(--line); }
.v-ctmap-h { margin-bottom: 12px; font-size: 20px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.v-ctmap-t { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.v-blcta.is-flush { margin-top: 0; }
.v-ctmain + .v-blcta.is-flush { margin-top: 56px; }

/* ---- аксессуары ---- */

.v-acc { padding-top: 48px; padding-bottom: 90px; }
.v-acc-cats { margin-bottom: 30px; }
.v-chip-n { margin-left: 6px; color: var(--ink-4); font-size: 11.5px; }
.v-chip.is-on .v-chip-n { color: rgba(255,255,255,.65); }

/* ---- блог ---- */

.v-blog { padding-top: 48px; padding-bottom: 90px; }
.v-blog-topics { margin-bottom: 34px; }
.v-blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.v-blog-list.is-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.v-post { display: block; color: var(--ink); }
.v-post.is-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: center; }
.v-post-thumb { display: block; aspect-ratio: 16/10; background: var(--bg-2); overflow: hidden; }
.v-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.v-post:hover .v-post-thumb img { transform: scale(1.03); }
.v-post-body { display: block; padding-top: 14px; }
.v-post.is-lead .v-post-body { padding-top: 0; }
.v-post-topic { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.v-post-body b { display: block; font-size: 19px; font-weight: 600; line-height: 1.35; }
.v-post.is-lead .v-post-body b { font-size: 30px; letter-spacing: -.01em; }
.v-post-lead { display: block; margin-top: 10px; color: var(--ink-2); font-size: 14.5px; }
.v-post-body i { display: block; margin-top: 12px; font-style: normal; font-size: 12.5px; color: var(--ink-4); }

.v-pager { display: flex; gap: 8px; margin-top: 50px; }
.v-pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
	padding: 0 10px; border: 1px solid var(--line); color: var(--ink); font-size: 14px;
}
.v-pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- статья ---- */

.v-article-head { padding: 20px 0 26px; max-width: 820px; }
.v-article-head h1 { font-size: 42px; letter-spacing: -.02em; line-height: 1.15; }
.v-article-meta { display: flex; gap: 20px; margin-top: 16px; font-size: 13px; color: var(--ink-4); }
.v-article-shot img { width: 100%; }
.v-article { padding-top: 40px; padding-bottom: 90px; }
.v-article-more { margin-top: 70px; padding-top: 50px; border-top: 1px solid var(--line); }

/* ---- галерея и альбом ---- */

.v-gallery { padding-top: 48px; padding-bottom: 90px; }
.v-gal-filters { margin-bottom: 30px; }
.v-gal-body i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-4); margin-top: 4px; }

.v-album { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 46px; padding-top: 20px; padding-bottom: 90px; align-items: start; }
.v-album-shots figure { background: var(--bg-2); aspect-ratio: 4 / 3; overflow: hidden; }
.v-album-shots img { width: 100%; height: 100%; object-fit: cover; }
.v-album-side { position: sticky; top: 100px; }
.v-album-h1 { font-size: 32px; letter-spacing: -.02em; margin-bottom: 24px; }
.v-album-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.v-album-facts span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.v-album-facts b { font-size: 16px; font-weight: 500; }
.v-album-fin { display: flex; align-items: center; gap: 9px; }
.v-album-fin i { width: 16px; height: 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.v-album-text { margin: 22px 0; font-size: 15px; }

/* ---- 404 ---- */

.v-nfhero { position: relative; background: #0c0c0c; color: #fff; }
.v-nfhero-img { position: absolute; inset: 0; opacity: .3; overflow: hidden; }
.v-nfhero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-nfhero-in { position: relative; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 48px; padding-bottom: 48px; text-align: center; }
.v-nfhero-code { font-size: 96px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #fff; }
.v-nfhero h1 { margin: 20px 0 14px; font-size: 32px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-nfhero p { max-width: 480px; margin: 0 0 30px; font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.v-nfhero-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.v-nfhero-acts .v-btn-ghost-dark { border-color: rgba(255, 255, 255, .5); }
.v-nflinks, .v-nfmodels { padding-top: 48px; }
.v-nflinks h2, .v-nfmodels h2 { margin: 0 0 22px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-nflinks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v-nflink { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); color: inherit; }
.v-nflink:hover { color: inherit; border-color: var(--ink); }
.v-nflink b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.v-nflink em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--ink-3); }
.v-nflink svg { flex: none; }
.v-nfmodels-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.v-nfmodels-head h2 { margin: 0; }
.v-nfmodels-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.v-nfmodel { display: block; background: #fff; border: 1px solid var(--line); color: inherit; text-align: center; }
.v-nfmodel:hover { color: inherit; border-color: var(--line-2); box-shadow: 0 6px 24px rgba(17, 17, 17, .08); }
.v-nfmodel-img { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.v-nfmodel-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v-nfmodel-body { display: block; padding: 4px 14px 18px; border-top: 1px solid #f0f0ed; }
.v-nfmodel-body b { display: block; margin-top: 12px; font-size: 19px; font-weight: 700; }
.v-nfmodel-body em { display: block; margin-top: 7px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a9a9a4; }
@media (max-width: 1020px) {
	.v-nflinks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-nfmodels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.v-nfhero-in { min-height: 360px; }
	.v-nfhero-code { font-size: 72px; }
	.v-nfhero h1 { font-size: 24px; }
	.v-nflinks-grid { grid-template-columns: minmax(0, 1fr); }
	.v-nfmodels-grid { gap: 12px; }
}

@media (max-width: 1020px) {
	.v-album { grid-template-columns: 1fr; gap: 30px; }
	.v-album-side { position: static; }
	.v-post.is-lead { grid-template-columns: 1fr; gap: 16px; }
	.v-post.is-lead .v-post-body b { font-size: 24px; }
}

/* образец покраски вместо кружка цвета */
.v-fin-photo { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: 999px; margin-bottom: 8px; background: var(--bg-2); }
.v-fin-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- меню на узком экране ---- */

.v-burger { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.v-burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: .18s; }
.v-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.v-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.v-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: #fff;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s, transform .2s;
	overflow-y: auto;
}

/*
 * ВАЖНО: без этой строки атрибут hidden не работает.
 * Правило .v-drawer{display:flex} перебивает стиль браузера для [hidden],
 * и закрытая панель остаётся невидимым слоем поверх всей страницы —
 * прозрачным, но перехватывающим каждый клик на сайте.
 */
.v-drawer[hidden] { display: none; }
.v-drawer:not(.is-open) { pointer-events: none; }
.v-drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }

.v-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 78px;
	padding: 0 var(--pad);
	border-bottom: 1px solid var(--line);
}
.v-drawer-close { border: 0; background: none; font-size: 34px; line-height: 1; color: var(--ink); cursor: pointer; padding: 0 4px; }

.v-drawer-nav { padding: 12px var(--pad); flex: 1; }
.v-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.v-drawer-nav a {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-size: 19px;
	font-weight: 500;
}
.v-drawer-nav a:hover { color: var(--accent); }
.v-drawer-nav .sub-menu { margin: 0 0 6px; padding: 0 0 0 16px; border-left: 1px solid var(--line); }
.v-drawer-nav .sub-menu a { font-size: 14px; letter-spacing: .02em; text-transform: none; color: var(--ink-2); }

.v-drawer-foot { padding: 22px var(--pad) 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.v-drawer-phone { display: block; margin-top: 8px; font-size: 21px; font-weight: 600; color: var(--ink); text-align: center; }

.v-filters-toggle { display: none; width: 100%; margin-bottom: 18px; }

@media (max-width: 900px) {
	.v-burger { display: block; }
	.v-nav { display: none; }
	.v-top-cta { display: none; }
	.v-top-in { height: 66px; gap: 14px; }
	.v-top-side { gap: 14px; }

	/* Фильтры каталога сворачиваются: иначе на телефоне до карточек не долистать. */
	.v-filters-toggle { display: inline-flex; }
	.v-filters { display: none; }
	.v-filters.is-open { display: block; margin-bottom: 26px; }
}

/* ---------- Страница аксессуара ---------- */

.v-acc-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.v-acc-shots figure { margin: 0; background: var(--bg-2); aspect-ratio: 1 / 1; overflow: hidden; }
.v-acc-shots img { width: 100%; height: 100%; object-fit: cover; display: block; }

.v-acc-lead { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 18px 0 0; }

.v-acc-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.v-acc-row .v-field { margin-bottom: 0; }
.v-acc-row .v-field input { width: 108px; height: 40px; padding: 0 10px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
.v-acc-row .v-field input:focus { outline: none; border-color: var(--ink); }

.v-acc-sum { text-align: right; font-size: 12.5px; color: var(--ink-3); }
.v-acc-sum span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
.v-acc-sum b { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }

.v-acc-buy .v-add { width: 100%; margin-top: 18px; }

@media (max-width: 640px) {
	.v-acc-shots { grid-template-columns: repeat(2, 1fr); }
	.v-acc-row { align-items: stretch; }
	.v-acc-sum { text-align: left; }
}

/* ---------- Шапка раздела ---------- */

/* Полноширинный блок в начале страницы: без него контент упирался
   в меню и раздел выглядел незавершённым. */
.v-phero { position: relative; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.v-phero.is-dark { background: var(--ink); color: #fff; border-bottom-color: transparent; }
.v-phero-img { position: absolute; inset: 0; }
.v-phero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.v-phero-in { position: relative; padding-top: 26px; padding-bottom: 46px; }
.v-phero.is-dark .v-phero-in { padding-top: 30px; padding-bottom: 62px; }
.v-phero .v-crumbs { padding: 0; }
.v-phero h1 { font-size: 44px; letter-spacing: -.02em; margin: 18px 0 0; }
.v-phero p { max-width: 720px; margin: 16px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.v-phero .v-eyebrow { margin: 18px 0 0; }
.v-phero .v-eyebrow + h1 { margin-top: 8px; }
.v-phero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Тёмный вариант: чёрная кнопка на чёрном фоне не читается. */
.v-phero.is-dark .v-crumbs,
.v-phero.is-dark .v-crumbs a { color: rgba(255, 255, 255, .6); }
.v-phero.is-dark .v-crumbs a:hover { color: #fff; }
.v-phero.is-dark .v-eyebrow { color: #fff; }
.v-phero.is-dark p { color: rgba(255, 255, 255, .82); }
.v-phero.is-dark .v-btn-primary { background: #fff; color: var(--ink); }
.v-phero.is-dark .v-btn-primary:hover { background: rgba(255, 255, 255, .88); color: var(--ink); }
.v-phero.is-dark .v-btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.v-phero.is-dark .v-btn-secondary:hover { background: #fff; color: var(--ink); }

/* Архивы приносят внутрь свой .v-head — гасим его рамку и двойной отступ. */
.v-phero .v-head { padding: 0; border-bottom: 0; }
.v-phero .v-head h1 { margin-bottom: 0; }
.v-phero .v-head p { margin: 16px 0 0; }

/* ---------- Логотип ---------- */

/* Размер снят с макета: 161x14 CSS-пикселя. Файл логотипа должен быть
   минимум вдвое крупнее (322x28) или в SVG — тогда на Retina и других
   HiDPI-экранах он рисуется без замыливания. */
.v-logo-img { display: block; width: 161px; height: 14px; object-fit: contain; object-position: left center; }
.v-logo.has-img { display: inline-flex; align-items: center; letter-spacing: 0; flex: 0 0 auto; }
.v-logo-foot { display: inline-block; color: #fff; }
.v-logo-foot .v-logo-img { width: 184px; height: 16px; }

/* ---------- Платные опции кованого диска ---------- */

.v-check { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.v-check:last-child { border-bottom: 0; }
.v-check input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--ink); }
.v-check span { flex: 1; }
.v-check b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.v-break { margin-top: 16px; padding: 14px 16px; background: var(--bg-2); font-size: 13px; }
.v-break:empty { display: none; }
/* Разбивка считается за один диск — подпись снимает двусмысленность
   рядом с итогом за комплект. */
.v-break-cap { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.v-total i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.v-break-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--ink-3); }
.v-break-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.v-break-row.is-sum { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); color: var(--ink); font-weight: 600; }

/* ---------- Промо-плитки главной с фотографией ---------- */

.v-promo { position: relative; overflow: hidden; }
.v-promo.has-img { color: #fff; background: var(--ink); min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; }
.v-promo.has-img:hover { background: var(--ink); }
.v-promo-img { position: absolute; inset: 0; max-width: none; }
.v-promo-img img { width: 100%; height: 100%; object-fit: cover; opacity: .45; transition: transform .4s; }
.v-promo.has-img:hover .v-promo-img img { transform: scale(1.04); }
/* Обёртка фотографии — тоже span. Общее правило для текста забирало
   у неё position:absolute, картинка вставала в поток в натуральном
   размере, и плитка растягивалась по её высоте. */
.v-promo.has-img > b,
.v-promo.has-img > span:not(.v-promo-img),
.v-promo.has-img > i { position: relative; z-index: 2; }
.v-promo.has-img span { color: rgba(255, 255, 255, .82); }
.v-promo.has-img i { color: var(--accent); }

@media (max-width: 700px) {
	.v-phero h1 { font-size: 30px; }
	.v-phero-in { padding-top: 20px; padding-bottom: 34px; }
	.v-phero.is-dark .v-phero-in { padding-top: 24px; padding-bottom: 44px; }
	.v-break-row { font-size: 12.5px; }
}

/* ---------- Плитки программ на главной ---------- */

.v-home-tiles { padding-top: 56px; padding-bottom: 0; }
.v-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.v-tile { position: relative; display: block; aspect-ratio: 390 / 252; background: #0c0c0c; overflow: hidden; color: #fff; }
/* Плитка без фотографии всё равно видна: иначе блок исчезает и его негде наполнить. */
.v-tile.is-empty { background: linear-gradient(135deg, #1b1c1e, #0c0c0c); }
.v-tile.is-empty .v-tile-cap { background: none; }
.v-tile:hover { color: #fff; }
.v-tile-img { position: absolute; inset: 0; }
.v-tile-img img { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: transform .45s, opacity .2s; }
.v-tile:hover .v-tile-img img { transform: scale(1.04); opacity: .9; }
.v-tile-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 30px;
	font-size: clamp(26px, 3vw, 44px);
	font-weight: 300;
	letter-spacing: -.01em;
	line-height: 1.1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .68));
}

/* ---------- Фон у нижнего призыва ---------- */

/* Красных кнопок нет (Kit): на тёмном первом экране и в призыве —
   белая кнопка и прозрачная с рамкой. */

.v-home-cta { position: relative; overflow: hidden; }
.v-home-cta-img { position: absolute; inset: 0; }
.v-home-cta-img img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.v-home-cta .v-wrap { position: relative; z-index: 2; }
.v-home-cta.has-img p { color: rgba(255, 255, 255, .84); }

@media (max-width: 700px) {
	.v-tiles { grid-template-columns: 1fr; }
	.v-tile-cap { padding: 20px; font-size: 26px; }
	.v-home-tiles { padding-top: 44px; padding-bottom: 0; }
}

/* ---------- Съёмка диска ---------- */

.v-hero-shot { position: relative; }
.v-shot-fin {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 7px 12px;
	background: rgba(17, 17, 17, .72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.v-shot-fin:empty { display: none; }

/* Ряд миниатюр под главным кадром — как в макете, пять в строке. */
.v-shot-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
/* Скрытие атрибутом должно побеждать display выше — иначе пустой ряд ловит клики. */
.v-shot-row[hidden] { display: none; }
.v-shot-thumb {
	padding: 6px;
	border: 1px solid var(--line);
	background: #fff;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	transition: border-color .15s;
}
.v-shot-thumb img { width: 100%; height: 100%; object-fit: contain; }
.v-shot-thumb:hover { border-color: var(--line-2); }
.v-shot-thumb.is-on { border: 2px solid var(--ink); padding: 5px; }

.v-finshots { padding-top: 64px; padding-bottom: 0; }
.v-finshots[hidden] { display: none; }
.v-finshots-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v-finshots-grid figure { margin: 0; aspect-ratio: 16 / 10; background: #fff; border: 1px solid #f0f0ed; overflow: hidden; }
.v-finshots-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 700px) {
	.v-shot-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.v-finshots { padding-top: 44px; padding-bottom: 0; }
	.v-finshots-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---------- Производство ---------- */

.v-prod-hero {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	align-items: stretch;
	background: #f2f1ee;
	border-bottom: 1px solid var(--line);
}
.v-prod-hero.no-img { grid-template-columns: 1fr; }
.v-prod-hero-text { padding: 56px var(--pad) 52px; border-right: 3px solid var(--accent); }
.v-prod-hero.no-img .v-prod-hero-text { border-right: 0; max-width: 900px; }
.v-prod-hero h1 { font-size: 52px; line-height: 1.03; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 26px; }
.v-prod-hero p { margin: 0 0 32px; font-size: 15px; line-height: 1.75; color: var(--ink-2); max-width: 400px; }
.v-prod-hero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.v-prod-hero-img { min-height: 420px; background: var(--ink); }
.v-prod-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.v-prod-skills { display: flex; flex-wrap: wrap; gap: 16px 30px; padding-top: 24px; border-top: 1px solid #dedbd5; }
.v-prod-skills span { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.v-prod-nav { background: #fff; border-bottom: 1px solid var(--line); }
.v-prod-nav-in { display: flex; }
.v-prod-nav a {
	flex: 1;
	padding: 17px 8px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	border-bottom: 2px solid transparent;
}
.v-prod-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
/* Активный раздел — чёрный текст и красная черта, как у первого пункта на артборде. */
.v-prod-nav a.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.v-prod-nav a b { color: var(--ink); margin-right: 6px; }

.v-prod-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 0; }
.v-prod-sec.is-flip .v-prod-sec-text { order: 2; }
.v-prod-sec p { font-size: 15px; line-height: 1.75; color: var(--ink-2); margin: 0; max-width: 52ch; }
.v-prod-sec-img { aspect-ratio: 4 / 3; background: var(--bg-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.v-prod-sec-img img { width: 100%; height: 100%; object-fit: cover; }
.v-prod-slot { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }

.v-prod-quote {
	margin: 24px 0 0;
	padding: 0 0 0 20px;
	border-left: 2px solid var(--accent);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	font-style: italic;
}

.v-prod-num { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.v-prod-num .v-sec-h { min-width: 0; }
.v-prod-num b { font-size: 26px; font-weight: 700; color: var(--accent); }
.v-prod-num i { font-style: normal; color: var(--ink-4); }
.v-prod-num .v-sec-h { text-transform: uppercase; }
.v-prod-num.is-dark .v-sec-h { color: #fff; }

.v-prod-stages { background: var(--ink); color: #fff; padding: 64px 0; margin-top: 64px; }
.v-prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v-prod-stage {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr) 40%;
	align-items: stretch;
	border: 1px solid rgba(255, 255, 255, .1);
	background: #151515;
	min-height: 132px;
}
.v-prod-stage-n {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: transparent;
	-webkit-text-stroke: 1.4px rgba(255, 255, 255, .45);
}
.v-prod-stage-body { padding: 20px 18px 20px 0; }
.v-prod-stage-body b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.v-prod-stage-body span { font-size: 12.5px; line-height: 1.6; color: var(--ink-4); }
.v-prod-stage-img { background: #1a1a1a; overflow: hidden; }
.v-prod-stage-img img { width: 100%; height: 100%; object-fit: cover; }

.v-prod-sum { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 0; }
.v-prod-sum h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 22px; max-width: 20ch; }
.v-prod-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.v-prod-facts b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
.v-prod-facts span { font-size: 14px; color: var(--ink-2); }

@media (max-width: 1020px) {
	.v-prod-hero { grid-template-columns: 1fr; }
	.v-prod-hero-text { border-right: 0; border-bottom: 3px solid var(--accent); }
	.v-prod-hero-img { min-height: 280px; }
	.v-prod-grid { grid-template-columns: 1fr; }
	.v-prod-sum { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 700px) {
	.v-prod-hero h1 { font-size: 32px; }
	.v-prod-nav-in { overflow-x: auto; }
	.v-prod-nav a { flex: 0 0 auto; padding: 15px 14px; }
	.v-prod-sec { grid-template-columns: 1fr; gap: 22px; padding-top: 44px; }
	.v-prod-sec.is-flip .v-prod-sec-text { order: 0; }
	.v-prod-stage { grid-template-columns: 62px minmax(0, 1fr); }
	.v-prod-stage-img { display: none; }
	.v-prod-sum h2 { font-size: 26px; }
}

/* Очень узкие экраны (320px): длинные слова в заголовках не должны
   расталкивать страницу — иначе появляется горизонтальная прокрутка. */
@media (max-width: 380px) {
	.v-prod-hero h1,
	.v-prod-sum h2,
	.v-sec-h,
	.v-hero-h1,
	.v-phero h1 { overflow-wrap: anywhere; }

	.v-prod-num { flex-wrap: wrap; row-gap: 4px; }
	.v-prod-num .v-sec-h { flex: 1 1 100%; font-size: 22px; }
	.v-prod-hero h1 { font-size: 27px; }
	.v-prod-hero p { font-size: 14px; }
	.v-prod-skills { gap: 10px 18px; }
}

/* ---------- Страница диска: якорная лента и подбор ---------- */

.v-wnav { margin-top: 16px; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v-wnav-in { display: flex; overflow-x: auto; }
.v-wnav a {
	flex: 1 0 auto;
	padding: 16px 18px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.v-wnav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Подбор по автомобилю — тёмная полоса под первым экраном.
   Пропорции сняты с артборда: колонка вопроса 290px, поля в ряд,
   кнопка прижата вправо. */
.v-wfit { background: var(--ink); color: #fff; }
.v-wfit-in { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: end; padding-top: 40px; padding-bottom: 40px; }
.v-wfit .v-fdform { max-width: none; }
.v-wfit-text b { display: block; font-size: 20px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; margin-bottom: 8px; }
.v-wfit-text span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-4); }
.v-wfit-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v-wfit-fields .v-field { margin-bottom: 0; }
.v-wfit-fields .v-field > span { color: var(--ink-4); }
.v-wfit-fields .v-sel { height: 50px; }
.v-wfit-go { flex: none; align-self: end; }

/* ---------- Модель в деталях ---------- */

/* Это кнопка: снимок открывается во весь экран. Пропорция и обрезка
   те же, что были у обычного блока. */
.v-wdetail-img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	aspect-ratio: 4 / 3;
	background: var(--bg-2);
	border: 1px solid var(--line);
	overflow: hidden;
	cursor: zoom-in;
}
.v-wdetail-img[disabled] { cursor: default; }
.v-wdetail-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Профили concave ---------- */

.v-wprofiles { background: var(--ink); color: #fff; padding: 64px 0; margin-top: 64px; }
.v-wprofiles .v-sec-h { color: #fff; }
.v-wprofiles .v-note { color: var(--ink-4); }
.v-wprofiles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.v-wprofile { border: 1px solid rgba(255, 255, 255, .12); background: #151515; padding: 18px; }
.v-wprofile-img { aspect-ratio: 4 / 3; background: #1a1a1a; margin-bottom: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.v-wprofile-img:empty { display: none; }
/* Схема профиля кадрированию не подлежит — вписываем целиком по центру. */
.v-wprofile-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 10px; }
.v-wprofile-code {
	display: inline-block;
	min-width: 30px;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	margin-bottom: 10px;
}
.v-wprofile b { display: block; font-size: 16px; margin-bottom: 8px; }
.v-wprofile span { display: block; font-size: 13px; color: var(--ink-4); }

/* ---------- Производственный процесс ---------- */

/* Единый фон на весь блок: снимки этапов лежат на том же сером, и
   раньше блок читался как четыре серых плитки на белом. */
.v-wprocess { padding-top: 64px; padding-bottom: 64px; background: var(--bg-2); }
.v-wprocess-lead { max-width: 60ch; margin: 16px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.v-wprocess-tabs { display: none; }
.v-wprocess-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.v-wstep { border-top: 2px solid var(--ink); padding-top: 14px; }
.v-wstep-img { aspect-ratio: 4 / 3; background: transparent; overflow: hidden; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.v-wstep-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.v-wstep-n { display: block; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.v-wstep b { display: block; font-size: 16px; margin-bottom: 8px; }
.v-wstep span { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Видео ---------- */

.v-wvideo { background: var(--ink); color: #fff; padding: 64px 0; margin-top: 64px; }
.v-wvideo .v-sec-h { color: #fff; }
.v-wvideo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.v-wvideo-card { display: block; color: #fff; }
.v-wvideo-card:hover { color: #fff; }
.v-wvideo-img { position: relative; display: block; aspect-ratio: 16 / 10; background: #1a1a1a; overflow: hidden; }
.v-wvideo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.v-wvideo-card:hover .v-wvideo-img img { transform: scale(1.04); }
.v-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
}
.v-play::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 14px;
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent var(--ink);
}
.v-wvideo-card b { display: block; font-size: 15px; margin: 12px 0 4px; }
.v-wvideo-card span { font-size: 13px; color: var(--ink-4); }

/* ---------- Галереи и аксессуары модели ---------- */

.v-wgal { padding-top: 64px; }
.v-wgal .v-tabs { margin-bottom: 22px; }
.v-wacc { padding-top: 64px; }

/* ---------- Индивидуальный проект ---------- */

.v-wcustom { background: var(--ink); color: #fff; padding: 60px 0; margin-top: 64px; text-align: center; }
.v-wcustom h2 { font-size: 32px; margin-bottom: 12px; }
.v-wcustom p { max-width: 60ch; margin: 0 auto 26px; color: var(--ink-4); font-size: 15px; line-height: 1.7; }

@media (max-width: 1020px) {
	.v-wprofiles-grid,
	.v-wprocess-grid,
	.v-wvideo-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
	.v-wfit-form { grid-template-columns: 1fr; }
	/* Профили concave на телефоне — сеткой 2 × 2, по одному в ряд они уходили на полэкрана. */
	.v-wprofiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.v-wprofile { padding: 12px; }
	.v-wprofile-img { margin-bottom: 10px; }
	.v-wprofile b { font-size: 14px; margin-bottom: 0; }
	.v-wvideo-grid { grid-template-columns: 1fr; }
	.v-wprocess { padding-top: 36px; padding-bottom: 40px; background: #fff; }
	.v-wprocess .v-sec-h { font-size: 18px; line-height: 1.4; font-weight: 800; text-transform: uppercase; }
	.v-wprocess .v-sec-rule { display: none; }
	.v-wprocess-lead { margin-top: 10px; font-size: 14px; }
	.v-wprocess-tabs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0 6px;
		margin-top: 24px;
	}
	.v-wprocess-tabs button {
		min-height: 46px;
		padding: 0 0 10px;
		border: 0;
		border-bottom: 3px solid var(--line);
		background: #fff;
		color: var(--ink);
		font: inherit;
		font-size: 15px;
		text-align: left;
		cursor: pointer;
	}
	.v-wprocess-tabs .is-on { border-bottom-color: var(--accent); font-weight: 700; }
	.v-wprocess-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
	.v-wprocess-grid { grid-template-columns: 1fr; margin-top: 0; }
	.v-wstep { border-top: 0; padding: 28px clamp(16px, 10vw, 40px) 8px; }
	.v-wstep-img { width: min(100%, 160px); aspect-ratio: auto; margin: 0 auto 14px; }
	.v-wstep-img img { height: auto; max-height: 230px; }
	.v-wstep .v-wstep-n { display: none; }
	.v-wstep span { font-size: 15px; line-height: 1.55; }
	/* Лента переносится по строкам: горизонтальная прокрутка на телефоне
	   не видна, и пункты справа выглядели обрезанными. */
	.v-wnav-in { flex-wrap: wrap; overflow-x: visible; }
	.v-wnav a { flex: 0 0 auto; padding: 12px 14px; }
	.v-wcustom h2 { font-size: 24px; }
}

/* Второй телефон: мобильный рядом с основным, шрифтом поменьше. */
.v-contact-second { font-size: 22px; color: var(--ink-2); margin-top: 6px; }
.v-contact-second:hover { color: var(--ink); }
.v-drawer-phone + .v-drawer-phone { margin-top: 4px; font-size: 18px; color: var(--ink-2); }

/* Счётчик отснятых отделок. */
.v-fin-count { display: block; margin-top: 4px; font-style: normal; font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--ink-4); }

/* ---------- Альбом диска ---------- */

.v-gal-switch { margin-top: 26px; }
.v-gal-switch .v-tab { text-decoration: none; }

.v-album-w { padding-top: 48px; }
.v-album-w-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 30px; }
.v-album-w-facts span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.v-album-w-facts b { font-size: 16px; }

.v-album-w-slider figure { aspect-ratio: 16 / 10; background: var(--bg-2); overflow: hidden; }
.v-album-w-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1020px) {
	.v-album-w-facts { grid-template-columns: 1fr 1fr; }
}

/* Разболтовки и описание в первом экране диска. */
.v-lugs { display: flex; gap: 28px; margin: 20px 0 4px; }
.v-lug {
	padding: 0 4px 12px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ink-3);
	border-bottom: 2px solid var(--line);
}
.v-lug:hover { color: var(--ink); }
.v-lug.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
/* Конструкции одного товара: перечисление, а не переключатель — щёлкать
   по ним некуда, поэтому подчёркнута каждая, но без состояния «выбрано». */
.v-lug.is-plain { color: var(--ink); border-bottom-color: var(--line-2); }
.v-hero-lead { margin: 18px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 48ch; }

/* ================= Страница диска: приведение к макету ================= */

/* ---- отделки двумя группами карточками ---- */

.v-finblock { margin-top: 28px; }
.v-fin-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.v-fin-head + .v-fin-grid { margin-bottom: 20px; }
.v-fin-head i { font-style: normal; font-size: 12px; letter-spacing: 0; text-transform: none; }

.v-finblock .v-fin-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.v-finblock .v-fin {
	all: unset;
	cursor: pointer;
	display: block;
	text-align: center;
	border: 1px solid var(--line);
	background: #fff;
	padding: 5px 4px 7px;
	transition: border-color .15s;
}
.v-finblock .v-fin:hover { border-color: var(--line-2); }
.v-finblock .v-fin.is-on { border: 2px solid var(--ink); padding: 4px 3px 6px; }
.v-fin-img { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.v-fin-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v-fin-img i { display: block; width: 100%; height: 100%; }
.v-fin-cap { display: block; font-size: 9.5px; font-weight: 500; color: var(--ink); margin-top: 6px; line-height: 1.2; }
.v-finblock .v-fin.is-on .v-fin-cap { font-weight: 700; }

.v-finblock:not(.is-forged) .v-fin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v-finblock:not(.is-forged) .v-fin { display: flex; flex-direction: column; justify-content: flex-start; }
.v-finblock:not(.is-forged) .v-fin-cap { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.v-finblock:not(.is-forged) .v-fin:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.v-hero-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ---- размеры: таблица во вкладках + конфигуратор ---- */

/* 344px по макету оказалось тесно для трёх списков — плюс 5%. */
.v-sizes-grid { display: grid; grid-template-columns: minmax(0, 1fr) 361px; gap: 24px; align-items: start; margin-top: 20px; }
.v-sizes-card { border: 1px solid var(--line); background: #fff; }
.v-sizes-tabs { display: flex; gap: 28px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.v-sizes-tab {
	all: unset;
	cursor: pointer;
	padding: 14px 2px 12px;
	margin-bottom: -1px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-4);
	border-bottom: 2px solid transparent;
}
.v-sizes-tab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

.v-sizes-card .v-legend {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 9px 22px;
	background: #fafaf8;
	border-bottom: 1px solid var(--bg-3);
	margin: 0;
}
.v-legend-t { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.v-size-dia {
	padding: 14px 22px 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.v-sizes-card .v-table { width: 100%; border-collapse: collapse; }
.v-sizes-card .v-table td { padding: 10px 22px; border-top: 1px solid var(--bg-3); vertical-align: middle; }
.v-table-price { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-blank-note { padding: 16px 22px 0; }


/* ---- конфигуратор комплекта ---- */

.v-config { position: sticky; top: 24px; background: #fff; border: 1px solid var(--line); }
.v-config-head { padding: 22px 24px 0; }
.v-config-t { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.v-config-model { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--bg-3); }
.v-config-thumb { width: 52px; height: 52px; flex: none; background: #fff; border: 1px solid var(--bg-3); overflow: hidden; }
.v-config-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v-config-model b { display: block; font-size: 15px; font-weight: 600; }
.v-config-model i { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 3px; }

.v-scheme { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 24px 0; border: 1px solid var(--line); }
.v-scheme-b {
	all: unset;
	cursor: pointer;
	padding: 10px 8px;
	text-align: center;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ink-3);
}
.v-scheme-b.is-on { background: var(--ink); color: #fff; font-weight: 700; }

.v-config .v-axles { padding: 20px 24px 0; }
.v-config .v-axle { border: 0; padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--bg-3); }
.v-config .v-axle:last-child { border-bottom: 0; margin-bottom: 0; }
.v-config .v-axle-h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.v-config .v-field { margin-bottom: 8px; }
.v-config .v-field > span { font-size: 10px; }
.v-config .v-sel { height: 40px; font-size: 13px; }
.v-config .v-axle-sum { padding-top: 10px; border-top: 0; font-size: 13px; }

.v-config .v-break { margin: 0 24px; padding: 14px 0 0; background: none; border-top: 1px solid var(--bg-3); }
.v-config .v-total { margin: 0 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.v-config .v-total b { font-size: 24px; }
.v-config-foot { padding: 4px 24px 24px; }
.v-config-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; }
.v-config-note i { width: 7px; height: 7px; border-radius: 999px; background: var(--flat); flex: none; margin-top: 6px; }

/* ---- галереи: вкладки во всю ширину ---- */

.v-gtabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	text-align: center;
	margin-bottom: 32px;
}
.v-gtabs:has(> :only-child) { grid-template-columns: 1fr; }
.v-gtab {
	all: unset;
	cursor: pointer;
	padding-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	border-bottom: 1px solid var(--line);
}
.v-gtab.is-on { color: var(--ink); border-bottom: 2px solid var(--accent); }

@media (max-width: 1180px) {
	.v-sizes-grid { grid-template-columns: 1fr; }
	.v-config { position: static; }
	.v-finblock .v-fin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.v-finblock .v-fin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.v-finblock:not(.is-forged) .v-fin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.v-sizes-tabs { gap: 16px; padding: 0 14px; }
	.v-sizes-tab { font-size: 11px; }
	.v-sizes-card .v-table td,
	.v-size-dia { padding-left: 14px; padding-right: 14px; }
	.v-gtabs { margin-bottom: 22px; }
	.v-gtab { font-size: 11.5px; }
}


/* ---------- Слайдер ---------- */

/* Лента прокручивается сама — overflow-x и scroll-snap. Кнопки появляются
   только после инициализации (класс is-ready), чтобы без JS не висели
   мёртвые стрелки. */
.v-slider { position: relative; }
.v-slider-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.v-slider-track::-webkit-scrollbar { display: none; }
.v-slider-track > * { scroll-snap-align: start; margin: 0; min-width: 0; }
.v-slider-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.v-slider-btn {
	position: absolute;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line-2);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	transition: background .15s, color .15s, opacity .15s;
}
.v-slider.is-ready .v-slider-btn { display: flex; }
.v-slider-btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.v-slider-btn:disabled { opacity: .3; cursor: default; }
.v-slider-btn svg { width: 16px; height: 16px; }

/* Карточки: стрелки над лентой, справа — рядом с заголовком раздела. */
.v-slider.is-cards .v-slider-track > * { flex: 0 0 calc((100% - 48px) / 3); }
.v-slider.is-cards .v-slider-btn { top: -66px; }
.v-slider.is-cards .v-slider-btn.is-prev { right: 52px; }
.v-slider.is-cards .v-slider-btn.is-next { right: 0; }

/* Фотографии: один кадр на всю ширину, стрелки поверх снимка. */
.v-slider.is-single .v-slider-track { gap: 0; }
.v-slider.is-single .v-slider-track > * { flex: 0 0 100%; }
.v-slider.is-single .v-slider-btn { top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .92); border-color: transparent; }
.v-slider.is-single .v-slider-btn.is-prev { left: 16px; }
.v-slider.is-single .v-slider-btn.is-next { right: 16px; }

.v-slider-dots { display: none; gap: 8px; justify-content: center; margin-top: 16px; }
.v-slider.is-ready .v-slider-dots { display: flex; }
.v-slider-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--line-2); cursor: pointer; transition: background .15s, transform .15s; }
.v-slider-dot.is-on { background: var(--ink); transform: scale(1.25); }

@media (max-width: 900px) {
	.v-slider.is-cards .v-slider-track > * { flex: 0 0 78%; }
	/* На узком экране стрелки под лентой не помещаются рядом с заголовком —
	   листается пальцем, точки показывают, где находишься. */
	.v-slider.is-cards .v-slider-btn { display: none !important; }
	.v-slider.is-single .v-slider-btn { width: 38px; height: 38px; }
	.v-slider.is-single .v-slider-btn.is-prev { left: 8px; }
	.v-slider.is-single .v-slider-btn.is-next { right: 8px; }
}


/* ---------- Цвета отделок ---------- */

.v-fincolors { padding-top: 8px; }
.v-fincolors-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.v-fincolors-head .v-sec-h { margin: 0; }
.v-fincolors-head .v-note { margin: 0; }

/* Прозрачные и сплошные — вкладки, а не два списка подряд: покрытий
   больше сорока, и сплошные иначе уезжают за пределы экрана. */
.v-sectabs { display: flex; gap: 32px; margin: 26px 0 34px; border-bottom: 1px solid var(--line); }
.v-sectab {
	position: relative;
	padding: 0 0 14px;
	border: 0;
	background: none;
	color: var(--ink-3);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s;
}
.v-sectab:hover { color: var(--ink); }
.v-sectab.is-on { color: var(--ink); }
.v-sectab.is-on::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--accent);
}

@media (max-width: 1180px) {
	.v-fin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
	.v-fin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; }
	.v-sectabs { gap: 22px; }
}
@media (max-width: 480px) {
	.v-fin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- Страница отделок ---------- */

/* Первый экран тёмный и на всю ширину: на артборде фотография диска
   уходит под шапку, а текст лежит на ней слева. */
.v-fhero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.v-fhero-img { position: absolute; inset: 0; }
.v-fhero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.v-fhero-img::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Слева текст, справа фотография — градиент держит контраст,
	   не затемняя снимок целиком. */
	background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .72) 42%, rgba(10, 10, 10, .18) 100%);
}
/* Ограничивать надо содержимое, а не сам .v-wrap: у него margin auto,
   и max-width на нём уводит весь первый экран в центр страницы. */
.v-fhero-in { position: relative; padding-top: 86px; padding-bottom: 92px; }
.v-fhero-in > * { max-width: 780px; }
.v-fhero .v-eyebrow { color: var(--accent); margin-bottom: 14px; }
.v-fhero h1 { font-size: 66px; line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; }
.v-fhero-sub { margin-top: 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.v-fhero p { max-width: 44ch; margin: 26px 0 0; color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.7; }

/* Имя .v-play занято круглой кнопкой поверх видео на карточке диска —
   здесь другая сущность: строка-ссылка с кружком слева. */
.v-playlink { display: inline-flex; align-items: center; gap: 14px; margin-top: 32px; color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.v-playlink:hover { color: #fff; }
.v-play-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	transition: background .16s, color .16s, border-color .16s;
}
.v-play-btn svg { width: 20px; height: 20px; }
.v-playlink:hover .v-play-btn { background: #fff; color: var(--ink); border-color: #fff; }

/* Якорная навигация: тёмная полоса под первым экраном, пункты через точку. */
.v-fnav { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .1); }
.v-fnav-in { display: flex; justify-content: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.v-fnav-in::-webkit-scrollbar { display: none; }
.v-fnav a { position: relative; padding: 17px 34px; color: rgba(255, 255, 255, .68); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.v-fnav a:hover { color: #fff; }
.v-fnav a + a::before { content: '·'; position: absolute; left: -2px; color: rgba(255, 255, 255, .3); }

.v-finishes { padding-top: 66px; padding-bottom: 20px; }

/* Варианты отделки: крупный снимок, список и столбец кадров справа. */
.v-fopts { padding-top: 72px; }
.v-fopts-in { display: grid; grid-template-columns: 1fr 1.15fr .7fr; gap: 34px; margin-top: 30px; align-items: start; }
.v-fopts-lead img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.v-fopts-in.one-shot { grid-template-columns: 1fr 1.15fr; }
.v-fopts-in.no-shots { grid-template-columns: minmax(0, 780px); }
.v-fopts-side { display: grid; gap: 18px; }
.v-fopts-side figure { margin: 0; }
.v-fopts-side img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.v-fopts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.v-fopts-list li,
.v-fsteps-list li { display: flex; gap: 16px; }
.v-fopts-list b,
.v-fsteps-list b { flex: none; color: var(--accent); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.v-fopts-list strong,
.v-fsteps-list strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.v-fopts-list p,
.v-fsteps-list p { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* Галерея дисков: подпись лежит на снимке, как на артборде. */
.v-fgal { padding-top: 72px; }
.v-fgal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.v-fgal-card { position: relative; display: block; overflow: hidden; background: var(--bg-2); color: #fff; }
.v-fgal-shot { display: block; aspect-ratio: 4 / 3; }
.v-fgal-shot img,
.v-fgal-shot .v-thumb-empty { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.v-fgal-card:hover .v-fgal-shot img { transform: scale(1.04); }
.v-fgal-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 18px 16px;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, .8) 100%);
}
.v-fgal-body b { display: block; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.v-fgal-body i { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .75); }
.v-fgal-foot { display: flex; justify-content: center; margin-top: 30px; }

/* Колпачки — светлая полоса во всю ширину. */
.v-fcaps { margin-top: 78px; padding: 68px 0 74px; background: var(--bg-2); }
.v-fcaps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.v-fcap-img { aspect-ratio: 16 / 7; overflow: hidden; background: var(--bg-3); }
.v-fcap-img img { width: 100%; height: 100%; object-fit: cover; }
.v-fcap b { display: block; margin: 18px 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.v-fcap p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* Этапы — тёмная полоса: видео слева, нумерованный список справа. */
.v-fsteps { padding: 74px 0 80px; background: var(--ink); color: #fff; }
.v-fsteps-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.v-fsteps h2 { font-size: 34px; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 24px; }
.v-fsteps-left { position: relative; }
.v-fsteps-video { position: relative; display: block; overflow: hidden; background: #101010; }
.v-fsteps-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .8; }
.v-fsteps-video .v-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; background: rgba(0, 0, 0, .35); }
.v-fsteps-video:hover .v-play-btn { background: #fff; color: var(--ink); }
.v-fsteps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.v-fsteps-list strong { color: #fff; }
.v-fsteps-list p { color: rgba(255, 255, 255, .68); }

@media (max-width: 1180px) {
	.v-fopts-in,
	.v-fopts-in.one-shot { grid-template-columns: 1fr 1fr; }
	.v-fopts-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
	.v-fgal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.v-fhero-in { padding-top: 56px; padding-bottom: 60px; }
	.v-fhero h1 { font-size: 40px; }
	.v-fnav-in { justify-content: flex-start; }
	.v-fopts-in,
	.v-fopts-in.one-shot,
	.v-fopts-in.no-shots,
	.v-fsteps-in { grid-template-columns: 1fr; gap: 28px; }
	.v-fcaps-grid { grid-template-columns: 1fr; }
	.v-fsteps h2 { font-size: 26px; }
}

@media (max-width: 480px) {
	.v-fhero h1 { font-size: 32px; }
	.v-fopts-side { grid-template-columns: 1fr; }
	.v-fgal-grid { grid-template-columns: 1fr; }
}


/* Вкладки во всю ширину, поделённые поровну — так они стоят
   над галереями на главной. */
.v-sectabs.is-split { gap: 0; }
.v-sectabs.is-split .v-sectab { flex: 1; text-align: center; font-size: 14px; padding-bottom: 16px; }
.v-sectabs.is-split .v-sectab.is-on::after { background: var(--ink); height: 2px; }

/* Кнопка под блоком, по центру. */
.v-home-more { display: flex; justify-content: center; margin-top: 34px; }
.v-home-sec-head.is-center { display: block; text-align: center; }
.v-home-sec-head.is-center .v-sec-rule { margin-left: auto; margin-right: auto; }

/* Галереи на главной: крупная карточка слева, мелкие справа.
   Пропорция снята с артборда — 47 на 53. Мелкие лежат в своей сетке,
   поэтому при двух карточках правая часть не оставляет пустых клеток,
   а крупная не растёт выше неё. */
.v-hgal { display: grid; grid-template-columns: 47fr 53fr; gap: 18px; align-items: stretch; }
.v-hgal.is-alone { grid-template-columns: 1fr; }
.v-hgal-rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; align-content: start; }
.v-hgal-card { display: flex; flex-direction: column; color: var(--ink); }
.v-hgal-card:hover { color: var(--ink); }
.v-hgal-shot { display: block; overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 10; }
.v-hgal-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.v-hgal-card:hover .v-hgal-shot img { transform: scale(1.04); }
.v-hgal-body { display: block; padding-top: 12px; }
.v-hgal-body b { display: block; font-size: 14px; }
.v-hgal-body i { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--ink-4); }

.v-hgal-card.is-lead .v-hgal-shot { aspect-ratio: auto; flex: 1; min-height: 300px; }
.v-hgal-card.is-lead .v-hgal-body b { font-size: 17px; }
.v-hgal-card.is-lead .v-hgal-body i { font-size: 13.5px; }
.v-hgal.is-alone .v-hgal-card.is-lead .v-hgal-shot { aspect-ratio: 16 / 7; flex: none; min-height: 0; }

@media (max-width: 1020px) {
	.v-hgal { grid-template-columns: 1fr; }
	.v-hgal-card.is-lead .v-hgal-shot { aspect-ratio: 16 / 8; flex: none; min-height: 0; }
}

@media (max-width: 700px) {
	.v-hgal-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
	.v-sectabs.is-split .v-sectab { font-size: 12px; }
}


/* ---------- Фон первого экрана: видео и слайдер ---------- */

/* Приглушение то же, что у фотографии: иначе текст на светлом кадре не прочесть. */
.v-hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .62; }

/* Кадры лежат стопкой и проявляются по очереди. Первый виден сразу,
   поэтому без JS экран не остаётся пустым. */
.v-hero-slides { position: relative; }
.v-hero-slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.v-hero-slides img.is-on { opacity: .62; }

@media (prefers-reduced-motion: reduce) {
	.v-hero-slides img { transition: none; }
}

/* Фоновое видео Vimeo.
   Плеер держит пропорцию 16:9, а первый экран шире и ниже её. Чтобы
   кадр закрывал блок целиком, рамка растягивается по большей стороне
   и центрируется — лишнее уходит за края. */
.v-hero-vimeo { position: absolute; inset: 0; overflow: hidden; }
.v-hero-vimeo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100%, 177.78vh);
	height: max(100%, 56.25vw);
	border: 0;
	opacity: 0;
	transition: opacity .9s ease;
	pointer-events: none;
}
.v-hero-vimeo.is-ready iframe { opacity: .62; }
/* Фотография уходит, только когда плеер действительно показал кадр. */
.v-hero-vimeo.is-ready img { opacity: 0; transition: opacity .9s ease; }


/* ---------- Каталог: правки по артборду ---------- */

/* Отделки фильтром не служат — это справка, а не список для отбора. */
.v-fnote { margin: 0; font-size: 13px; color: var(--ink-3); }
.v-f.is-child { padding-left: 16px; }

/* Кнопка под фильтрами: на телефоне ею закрывают развёрнутую панель. */
.v-filters-go { width: 100%; margin-top: 26px; }

.v-card-flag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 6px 10px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Финальный блок каталога — про подбор, а не общий призыв. */
.v-cat-cta { background: var(--ink); color: #fff; padding: 64px 0; }
.v-cat-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.v-cat-cta h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 16px; }
.v-cat-cta p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-4); }
.v-btn-on-dark { flex: none; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); }
.v-btn-on-dark:hover { background: rgba(255, 255, 255, .88); color: var(--ink); }

@media (max-width: 900px) {
	.v-series-row { flex-direction: column; align-items: flex-start; gap: 14px; }
	.v-series-meta { text-align: left; }
	.v-cat-cta-in { flex-direction: column; align-items: flex-start; gap: 26px; }
}

/*
 * Каталог на компьютере: 3 или 4 диска в ряд — из настроек.
 * Узкий ноутбук (до 1400 px) при «4 в ряд» показывает 3, иначе карточки
 * рядом с колонкой фильтров становятся слишком мелкими.
 */
@media (min-width: 1181px) {
	.v-grid.is-catalog.is-cols-3,
	.v-grid.is-catalog.is-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
	.v-grid.is-catalog.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Каталог на телефоне: карточки в два столбца, логотип серии крупнее (×1.5). */
@media (max-width: 700px) {
	.v-series-badge img { height: 78px; }
	.v-grid.is-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.v-grid.is-catalog .v-card-body { padding: 12px 12px 14px; gap: 7px; }
	.v-grid.is-catalog .v-card-head { flex-wrap: wrap; gap: 6px; }
	.v-grid.is-catalog .v-card-title { font-size: 15px; }
	.v-grid.is-catalog .v-card-lug { font-size: 9.5px; padding: 2px 5px; }
	.v-grid.is-catalog .v-card-sub,
	.v-grid.is-catalog .v-card-dias { font-size: 11.5px; gap: 4px; }
	.v-grid.is-catalog .v-card-dots { gap: 4px; flex-wrap: wrap; }
	.v-grid.is-catalog .v-dot { width: 12px; height: 12px; }
	.v-grid.is-catalog .v-card-price { padding-top: 9px; font-size: 11.5px; }
	.v-grid.is-catalog .v-card-price b { font-size: 14px; }
	.v-grid.is-catalog .v-card-flag { padding: 4px 7px; font-size: 9px; }
}


/* ---------- Страница диска: правки по артборду ---------- */

/* Съёмка отделки — своя полоса: слева название цвета и пояснение,
   справа ссылка на галерею, ниже кадры в три колонки. */
.v-finshots-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.v-finshots-head .v-sec-h { margin: 0; font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-finshots-head .v-note { margin: 10px 0 0; max-width: 640px; font-size: 15px; line-height: 1.6; }
.v-finshots-link {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}
.v-finshots-link:hover { color: var(--accent); }

/* Финальный призыв про модель. */
.v-wcta { background: var(--ink); color: #fff; padding: 64px 0; margin-top: 72px; }
.v-wcta-in { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.v-wcta h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 16px; }
.v-wcta p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-4); }

@media (max-width: 900px) {
	.v-wcta-in { flex-direction: column; align-items: flex-start; gap: 26px; }
}


@media (max-width: 1020px) {
	.v-wfit-in { grid-template-columns: 1fr; gap: 22px; }
	.v-wfit-go { justify-self: start; }
}

@media (max-width: 700px) {
	.v-wfit-fields { grid-template-columns: 1fr; }
	.v-finshots-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}


/* ---------- Крупные планы: кнопка увеличения и всплывающая галерея ---------- */

.v-wdetail-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	opacity: 0;
	transition: opacity .18s;
}
.v-wdetail-zoom svg { width: 17px; height: 17px; }
.v-wdetail-img:hover .v-wdetail-zoom,
.v-wdetail-img:focus-visible .v-wdetail-zoom { opacity: 1; }

.v-lightbox {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 40px;
	background: rgba(10, 10, 10, .93);
}
.v-lightbox[hidden] { display: none; }
.v-lightbox-figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.v-lightbox-figure img { max-width: 100%; max-height: calc(100vh - 160px); width: auto; object-fit: contain; }
.v-lightbox-figure figcaption { color: rgba(255, 255, 255, .8); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.v-lightbox-nav,
.v-lightbox-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	background: none;
	color: #fff;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.v-lightbox-nav:hover,
.v-lightbox-close:hover { background: #fff; color: var(--ink); }
.v-lightbox-nav svg { width: 18px; height: 18px; }
/* Закрывающая кнопка — в углу подложки, а не в ряду со стрелками. */
.v-lightbox > .v-lightbox-close { position: absolute; top: 24px; right: 24px; font-size: 26px; line-height: 1; border-radius: 999px; }

@media (max-width: 700px) {
	.v-lightbox { padding: 16px; gap: 8px; }
	.v-lightbox-nav { width: 38px; height: 38px; }
	.v-wdetail-zoom { opacity: 1; }
}


/* ---------- Крупные планы: текст и один крупный кадр ---------- */

/* Снизу воздух: точки слайдера налезали на якорную ленту. */
.v-wdetails { padding-top: 64px; padding-bottom: 56px; }
.v-wdetails-in { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: center; }
.v-wdetails-text h2 { font-size: clamp(30px, 3.4vw, 50px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; }
.v-wdetails-text p { margin: 26px 0 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.v-wdetails-shots figure { margin: 0; background: #fff; }
.v-wdetails-shots .v-wdetail-img { aspect-ratio: 4 / 3; border: 0; background: #fff; }
.v-wdetails-shots .v-wdetail-img img { width: 100%; height: 100%; object-fit: contain; }
/* Стрелки выносим к краям кадра, а не поверх диска. */
.v-wdetails-shots .v-slider-btn { background: none; border-color: var(--line-2); }
.v-wdetails-shots .v-slider-btn.is-prev { left: -6px; }
.v-wdetails-shots .v-slider-btn.is-next { right: -6px; }
.v-wdetails-seo { margin-top: 44px; max-width: 860px; }

/* ---------- Таблица размеров ---------- */

.v-dias { margin-bottom: 22px; }
.v-dias-t { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.v-dias-row { display: flex; flex-wrap: wrap; gap: 8px; }
.v-dia-tab {
	min-width: 74px;
	height: 56px;
	padding: 0 14px;
	border: 1px solid var(--line-2);
	background: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.v-dia-tab:hover { border-color: var(--ink); }
.v-dia-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.v-size-head {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 120px;
	gap: 20px;
	align-items: start;
	padding: 0 16px 12px;
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.v-size-head span { text-align: center; }
.v-size-head span:first-child { text-align: left; }
/* Полоса идёт через строку и во всю ширину: раньше фон считался вместе
   с шапкой и вылезал кусками. Внутренние отступы у самой строки, чтобы
   серая полоса не обрывалась по краям. */
.v-size-rows .v-size-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 120px;
	gap: 20px;
	align-items: center;
	padding: 18px 16px;
	background: #fff;
}
.v-size-rows .v-size-row:nth-child(even) { background: var(--bg-2); }

.v-size-w { font-size: 16px; font-weight: 500; }
.v-size-price { text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
/* Вылеты в два столбца — как у Vossen: длинный список в одну колонку
   читается хуже и растягивает строку. */
.v-size-offsets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
/* Значок профиля — квадрат с буквой, как у Vossen. */
.v-offset i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 2px;
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
}

@media (max-width: 1020px) {
	.v-wdetails-in { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 700px) {
	.v-size-head { display: none; }
	.v-size-rows .v-size-row { grid-template-columns: 1fr; gap: 10px; padding: 16px 14px; }
	.v-size-price { text-align: left; }

	.v-size-offsets { grid-template-columns: 1fr; }
	.v-dia-tab { min-width: 62px; height: 48px; font-size: 15px; }
}


/* ---------- Размеры кованой программы ---------- */

/* Вылеты здесь не перечисляют — их считают под автомобиль. Поэтому
   таблица короткая: диаметр, доступные ширины, базовая цена. */
.v-fsizes { background: #fff; border: 1px solid var(--line); }
.v-fsizes-head {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) 118px;
	gap: 20px;
	padding: 16px 18px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.v-fsizes-head span:last-child { text-align: right; }
.v-fsizes-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 118px; gap: 20px; align-items: center; padding: 14px 18px; border-top: 1px solid #f0f0ed; }
.v-fsizes-d { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.v-fsizes-w { display: flex; flex-wrap: wrap; gap: 6px; }
.v-fsizes-w i {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px;
	border: 1px solid var(--line);
	background: #fff;
	font-style: normal;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.v-fsizes-p { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.v-fsizes-foot { padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 13px; color: var(--ink-3); }

@media (max-width: 700px) {
	.v-fsizes-head { display: none; }
	.v-fsizes-row { grid-template-columns: 1fr; gap: 10px; }
	.v-fsizes-p { text-align: left; }
}

/* ---------------------------------------------- КОВАНАЯ СТРАНИЦА ДИСКА */

/* Ссылка-стрелка «смотреть всё». Одна на все блоки кованой страницы. */
.v-seeall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}
.v-seeall svg { width: 14px; height: 9px; flex: none; }
.v-seeall:hover { color: var(--accent); }

/* Первый экран: палитра кованой программы снимками этой модели. */
.v-finblock.is-forged .v-fin-head { align-items: center; }
.v-finblock.is-forged .v-fin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v-finall {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink);
}
.v-finall:hover { color: var(--accent); }
.v-fin-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 1px dashed var(--line-2);
	background: #fff;
	color: var(--ink);
	text-align: center;
	padding: 8px 4px;
}
.v-fin-more b { font-size: 19px; font-weight: 700; }
.v-fin-more span { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.v-fin-more:hover { border-color: var(--ink); }

/* Заказные отделки во всю ширину. */
.v-ffins { padding-top: 64px; }
.v-ffins .v-fincolors-head { align-items: flex-end; }
.v-ffins .v-fincolors-head .v-note { max-width: 640px; margin-top: 10px; }
/* На артборде палитра идёт по восемь образцов в ряд — их 48, и в шесть
   колонок блок вырастает выше первого экрана. */
.v-ffins .v-fin-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 26px 20px; }

/* Дополнительные опции кованой программы. */
.v-fopt { padding-top: 64px; }
.v-fopt-head .v-note { margin: 8px 0 0; max-width: 720px; }
.v-fopt-in { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin-top: 24px; }
.v-fopt-list { background: #fff; border: 1px solid var(--line); }
.v-fopt-row {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: start;
	padding: 16px 18px;
	border-top: 1px solid var(--line);
	cursor: pointer;
}
.v-fopt-row:first-child { border-top: 0; }
.v-fopt-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.v-fopt-text b { display: block; font-size: 15px; font-weight: 600; }
.v-fopt-text i { display: block; font-style: normal; font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: 5px; }
.v-fopt-price { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v-fopt-price em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.v-fopt-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	border-top: 1px solid var(--line);
	background: var(--bg-2);
	font-size: 14px;
	color: var(--ink-2);
}
.v-fopt-sum { position: sticky; top: 24px; background: #fff; border: 1px solid var(--line); padding: 26px; }
.v-fbreak { display: flex; flex-direction: column; font-size: 14px; margin-bottom: 20px; }
.v-fbreak .v-break-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.v-fbreak .v-break-row.is-sum { border-bottom: 0; padding-bottom: 0; color: var(--ink); font-weight: 600; }
.v-btn-wide { width: 100%; }

/* «Модель в деталях» у кованой: три карточки с подписями. */
.v-fdet { padding-top: 64px; }
.v-fdet-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 24px; align-items: start; }
.v-fdet-img { display: block; aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.v-fdet-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-fdet-card h3 { margin: 16px 0 0; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.v-fdet-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.v-fdet-links { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

/* Итоговая лента внизу страницы. */
.v-fstrip-wrap { padding-top: 56px; }
.v-fstrip { background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v-fstrip-item { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 22px 12px; border-left: 1px solid var(--line); }
.v-fstrip-item:first-child { border-left: 0; }
.v-fstrip-item svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.v-fstrip-item span { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 1000px) {
	.v-ffins .v-fin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.v-fopt-in { grid-template-columns: 1fr; }
	.v-fopt-sum { position: static; }
	.v-fdet-grid { grid-template-columns: 1fr 1fr; }
	.v-fstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-fstrip-item { border-left: 0; border-top: 1px solid var(--line); }
	.v-fstrip-item:nth-child(2) { border-top: 0; }
}

@media (max-width: 700px) {
	.v-ffins .v-fin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; }
	.v-finblock.is-forged .v-fin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.v-fdet-grid { grid-template-columns: 1fr; }
	.v-fstrip { grid-template-columns: 1fr; }
	.v-fstrip-item:nth-child(2) { border-top: 1px solid var(--line); }
	.v-fopt-row { grid-template-columns: 22px minmax(0, 1fr); }
	.v-fopt-price { grid-column: 2; }
	.v-fopt-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ------------------------------ КОВАНАЯ СТРАНИЦА: ПРИВЕДЕНИЕ К АРТБОРДУ */

/* Значок «во весь экран» на главном снимке — правый верхний угол. */
.v-shot-zoom {
	position: absolute; right: 16px; top: 16px; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--line); color: var(--ink); cursor: pointer; padding: 0;
}
.v-shot-zoom svg { width: 14px; height: 14px; }
.v-shot-zoom:hover { border-color: var(--ink); }
.v-lightbox.is-single .v-lightbox-nav { display: none; }

/* Цена, диаметры и ширина — одной строкой через точку. */
.v-hero-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; font-size: 16px; color: var(--ink-2); }
.v-hero-line span + span::before { content: '·'; margin-right: 12px; color: var(--line); }
.v-hero-line-price { font-weight: 600; color: var(--ink); }
/* На артборде плитки стоят сразу под заголовком, строка — через 24px под ними. */
.v-hero-panel .v-lugs + .v-hero-line { margin-top: 20px; }
.v-fproc-media { min-width: 0; }

/* Образцы в блоке заказных отделок — круги 74px, как на артборде. */
.v-ffins .v-fin-photo,
.v-ffins .v-fin-swatch { width: 74px; height: 74px; margin: 0 auto; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.v-ffins .v-fin-item b { font-size: 11px; font-weight: 600; margin-top: 10px; line-height: 1.3; }

/* Опция, которая включается сама от цвета. */
.v-fopt-row.is-auto { cursor: default; }
.v-fopt-row.is-auto input { opacity: 1; }

/* «Гибкость concave-профиля». */
.v-fprof { background: var(--ink); color: #fff; padding: 56px 0; margin-top: 72px; }
.v-fprof-in { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: center; }
.v-fprof-text h2 { margin: 0 0 12px; font-size: 30px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-fprof-text p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-4); }
.v-fprof-media { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.v-fprof-blank { display: block; aspect-ratio: 16 / 10; background: #1a1a1a; overflow: hidden; }
.v-fprof-blank img { width: 100%; height: 100%; object-fit: cover; }
.v-fprof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v-fprof-grid figure { margin: 0; }
.v-fprof-grid figure span { display: block; aspect-ratio: 3 / 4; background: #1a1a1a; overflow: hidden; }
.v-fprof-grid figure img { width: 100%; height: 100%; object-fit: cover; }
.v-fprof-grid figcaption { margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* Процесс кованой программы. */
.v-fproc { background: #f4f4f1; padding: 56px 0; }
.v-fproc-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px; }
.v-fproc-in { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: center; }
.v-fproc-img { display: block; aspect-ratio: 16 / 10; background: #e8e8e4; overflow: hidden; margin-bottom: 20px; }
.v-fproc-img img { width: 100%; height: 100%; object-fit: cover; }
.v-fproc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v-fproc-step { border-top: 2px solid var(--ink); padding-top: 14px; }
.v-fproc-step-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 14px; background: transparent; }
.v-fproc-step-img img { width: 100%; height: 100%; object-fit: contain; }
/* Общего фото процесса нет — кнопка идёт строкой над шагами, шаги во всю ширину. */
.v-fproc-in.no-img { grid-template-columns: 1fr; gap: 24px; }
.v-fproc-in.no-img .v-fproc-media { order: 2; }
.v-fproc-n { display: block; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.v-fproc-step b { display: block; font-size: 16px; margin-bottom: 8px; }
.v-fproc-step span { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* Видео кованой страницы: список слева, крупный плеер справа. */
.v-fvid { background: #1a1a1a; color: #fff; padding: 64px 0 72px; margin-top: 72px; }
.v-fvid-h { margin: 0 0 28px; font-size: 36px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-fvid-in { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.v-fvid-in.is-single { grid-template-columns: 1fr; }
.v-fvid-list { display: flex; flex-direction: column; gap: 8px; }
.v-fvid-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px; background: var(--ink); color: #fff; }
.v-fvid-item:hover { color: #fff; background: #222; }
.v-fvid-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.v-fvid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v-fvid-thumb .v-play { transform: scale(.7); }
.v-fvid-cap b { display: block; font-size: 14px; font-weight: 600; }
.v-fvid-cap span { display: block; font-size: 12.5px; color: var(--ink-4); margin-top: 4px; }
.v-fvid-main { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; color: #fff; }
.v-fvid-main:hover { color: #fff; }
.v-fvid-main img { width: 100%; height: 100%; object-fit: cover; }
.v-fvid-main-cap { position: absolute; left: 24px; bottom: 22px; right: 24px; }
.v-fvid-main-cap b { display: block; font-size: 18px; font-weight: 700; }
.v-fvid-main-cap span { display: block; font-size: 13px; color: rgba(255, 255, 255, .8); margin-top: 4px; }

/* Индивидуальный проект — белая карточка с фото. */
.v-fcus { padding-top: 56px; }
.v-fcus-card { background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 36px; align-items: center; padding: 28px 32px; }
.v-fcus-card.no-img { grid-template-columns: minmax(0, 1fr) auto; }
.v-fcus-img { display: block; aspect-ratio: 16 / 10; background: var(--bg-2); overflow: hidden; }
.v-fcus-img img { width: 100%; height: 100%; object-fit: contain; }
.v-fcus-text b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 8px; }
.v-fcus-text p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Аксессуары кованой страницы — белые карточки. */
.v-wacc.is-forged .v-card-thumb { background: #fff; }
.v-wacc.is-forged .v-home-sec-head { align-items: flex-end; }

@media (max-width: 1000px) {
	.v-fprof-in, .v-fproc-in, .v-fvid-in { grid-template-columns: 1fr; gap: 28px; }
	.v-fprof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Модификатор .no-img сильнее простого класса — перечисляем его явно,
	   иначе на телефоне остаются две колонки и текст сжимается в столбик. */
	.v-fcus-card,
	.v-fcus-card.no-img { grid-template-columns: 1fr; gap: 20px; }
	.v-fcus-card { padding: 22px 20px; }
	.v-fcus-card .v-btn { justify-self: start; }
}
@media (max-width: 700px) {
	.v-fproc-steps { grid-template-columns: 1fr; }
	.v-fvid-h { font-size: 26px; }
	/* «ГИБКОСТЬ CONCAVE-ПРОФИЛЯ» в 30px не помещается в узкий экран одним словом. */
	.v-fprof-text h2 { font-size: 24px; }
	.v-fcus-text b { font-size: 18px; }
	.v-hero-panel .v-lugs { flex-wrap: wrap; gap: 8px 22px; }
}

/* Палитра заказных отделок — это выбор цвета для расчёта. */
.v-ffins button.v-fin-item {
	appearance: none; background: none; border: 0; padding: 0; margin: 0;
	font: inherit; color: inherit; cursor: pointer;
}
.v-ffins button.v-fin-item:hover .v-fin-photo,
.v-ffins button.v-fin-item:hover .v-fin-swatch { box-shadow: 0 0 0 1px var(--ink-3); }
.v-ffins button.v-fin-item.is-on .v-fin-photo,
.v-ffins button.v-fin-item.is-on .v-fin-swatch { box-shadow: 0 0 0 2px var(--ink); }
.v-ffins button.v-fin-item.is-on b { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.v-ffins button.v-fin-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.v-ffins .v-ffins-pick { margin-top: 6px; color: var(--ink); font-weight: 600; }

/* ======================================== ПРОИЗВОДСТВО — ПО АРТБОРДУ */

.v-prod-film {
	display: inline-flex; align-items: center; gap: 12px; margin-bottom: 44px;
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.v-prod-film:hover { color: var(--accent); }
.v-prod-film-ic { width: 34px; height: 34px; border-radius: 999px; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; }
.v-prod-film-ic svg { width: 11px; height: 11px; margin-left: 2px; }

/* Шапка раздела: «01 / НАША ФАБРИКА». */
.v-pr { padding-top: 64px; }
.v-pr-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.v-pr-head b { font-size: 26px; font-weight: 700; color: var(--accent); }
.v-pr-head i { font-style: normal; font-size: 16px; color: #a9a9a4; }
.v-pr-head h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-pr-head.is-dark h2 { color: #fff; }

.v-pr-img { display: block; aspect-ratio: 16 / 10; background: #111; overflow: hidden; }
.v-pr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-pr-img.is-wide { aspect-ratio: 16 / 7; }

/* Показатель: крупная цифра и подпись. */
.v-pr-stat { padding-top: 22px; border-top: 1px solid var(--line); }
.v-pr-stat b { display: block; font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.v-pr-stat span { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-pr-stat.is-big { padding-top: 0; border-top: 0; margin-bottom: 18px; }
.v-pr-stat.is-big b { font-size: 56px; }
.v-pr-stat.is-big span { color: var(--ink); font-size: 13px; font-weight: 700; }

/* 01 — фабрика. */
.v-pr1-top { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; margin-bottom: 24px; }
.v-pr1-top.no-img { grid-template-columns: minmax(0, 640px); }
.v-pr1-side p { margin: 0 0 26px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.v-pr1-side .v-prod-quote { margin: 0 0 26px; font-size: 15px; }
.v-pr1-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v-pr-card b { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.v-pr-card p { margin: 7px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

/* 02 — дизайн: серый фон. */
.v-pr2 { background: #eceae6; padding: 64px 0; margin-top: 64px; }
.v-pr2-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; margin-bottom: 32px; }
.v-pr2-top.no-img { grid-template-columns: minmax(0, 720px); }
.v-pr2-quote blockquote { margin: 0 0 12px; padding-left: 20px; border-left: 2px solid var(--accent); font-size: 21px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.v-pr2-quote cite { display: block; padding-left: 22px; font-style: normal; font-size: 13px; color: var(--ink-3); }
.v-pr2-quote p { margin: 20px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.v-pr2-bottom { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; }
.v-pr2-bottom.is-one { grid-template-columns: 1fr; }
.v-pr2-proc { background: #fff; padding: 22px; }
.v-pr2-proc b { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v-pr2-proc .v-pr-img { aspect-ratio: 16 / 9; }
.v-pr2-cards { display: grid; gap: 24px; }
.v-pr2-card { background: #fff; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; }
.v-pr2-card > div { padding: 22px; }
.v-pr2-card b { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v-pr2-card span:not(.v-pr-img) { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.v-pr2-card .v-pr-img { aspect-ratio: 16 / 9; height: 100%; }

/* 03 — инжиниринг. */
.v-pr3-top { display: grid; grid-template-columns: 300px 1fr 1fr; gap: 36px; align-items: center; margin-bottom: 44px; }
.v-pr3-top.pics-1 { grid-template-columns: 300px 1fr; }
.v-pr3-top.pics-0 { grid-template-columns: minmax(0, 640px); }
.v-pr3-top .v-pr-img { aspect-ratio: 4 / 3; }
.v-pr3-side p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.v-pr3-side .v-prod-quote { font-size: 15px; margin-top: 18px; }
.v-pr3-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.v-pr3-col-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.v-pr3-col-h i { width: 11px; height: 11px; border-radius: 999px; border: 2px solid var(--accent); background: #fff; flex: none; }
.v-pr3-col-h b { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.v-pr3-col p { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.v-pr3-wide { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; background: #fff; border: 1px solid var(--line); margin-top: 40px; }
.v-pr3-wide .v-pr-img { aspect-ratio: 16 / 6; }
.v-pr3-wide > div { padding: 28px 32px; }
.v-pr3-wide b { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.v-pr3-wide p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* 04 — этапы: без фото карточка не оставляет пустую колонку. */
.v-prod-stage.no-img { grid-template-columns: 86px minmax(0, 1fr); }

/* Итог в три колонки. */
.v-prsum { background: #fff; padding: 56px 0; margin-top: 64px; }
.v-prsum-in { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 44px; align-items: center; }
.v-prsum-in.no-img { grid-template-columns: 1fr 1fr; }
.v-prsum-col { display: flex; flex-direction: column; gap: 26px; }
.v-prsum-col h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.18; letter-spacing: -.01em; text-transform: uppercase; }
.v-prsum-col .v-btn { align-self: flex-start; }
.v-prsum-fact { border-left: 2px solid var(--accent); padding-left: 16px; }
.v-prsum-fact b { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.v-prsum-fact span { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.v-prsum-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.v-prsum-img img { width: 100%; height: 100%; object-fit: contain; }

/* Нижний призыв с фото на фоне. */
.v-prcta { position: relative; background: #0c0c0c; color: #fff; overflow: hidden; }
.v-prcta-bg { position: absolute; inset: 0; opacity: .4; }
.v-prcta-bg img { width: 100%; height: 100%; object-fit: cover; }
.v-prcta-in { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 40px; padding-bottom: 40px; }
.v-prcta h2 { margin: 0; max-width: 16em; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-prcta .v-btn { flex: none; }

@media (max-width: 1020px) {
	.v-pr1-top, .v-pr1-top.no-img,
	.v-pr2-top, .v-pr2-top.no-img,
	.v-pr2-bottom, .v-pr2-bottom.is-one,
	.v-pr3-top, .v-pr3-top.pics-0, .v-pr3-top.pics-1,
	.v-pr3-wide,
	.v-prsum-in, .v-prsum-in.no-img { grid-template-columns: 1fr; gap: 24px; }
	.v-pr1-cards, .v-pr3-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-prsum-img { max-width: 420px; }
}

@media (max-width: 700px) {
	.v-pr { padding-top: 44px; }
	.v-pr2 { padding: 44px 0; margin-top: 44px; }
	.v-pr-head h2 { font-size: 22px; }
	.v-pr-head { flex-wrap: wrap; row-gap: 4px; }
	.v-pr1-cards, .v-pr3-cols { grid-template-columns: 1fr; }
	.v-pr2-card { grid-template-columns: 1fr; }
	.v-pr2-card .v-pr-img { order: -1; }
	.v-pr2-quote blockquote { font-size: 18px; }
	.v-pr-stat.is-big b { font-size: 44px; }
	.v-prod-stage.no-img { grid-template-columns: 62px minmax(0, 1fr); }
	.v-prsum { padding: 44px 0; margin-top: 44px; }
	.v-prsum-col h2 { font-size: 22px; }
	.v-prcta-in { flex-direction: column; align-items: flex-start; gap: 22px; }
	.v-prcta h2 { font-size: 22px; }
}

/* ========================================== ГАЛЕРЕЯ АВТОМОБИЛЕЙ — АРТБОРД */

.v-galhero { position: relative; background: #0c0c0c; color: #fff; overflow: hidden; }
.v-galhero-bg { position: absolute; inset: 0; opacity: .32; }
.v-galhero-bg img { width: 100%; height: 100%; object-fit: cover; }
.v-galhero-in { position: relative; min-height: 330px; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; padding-bottom: 56px; }
.v-galhero-crumbs { margin-bottom: 16px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.v-galhero-crumbs a { color: rgba(255, 255, 255, .6); }
.v-galhero-crumbs a:hover { color: #fff; }
.v-galhero-crumbs b { font-weight: 400; color: #fff; }
.v-galhero h1 { margin: 0 0 10px; font-size: 46px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.v-galhero p { margin: 0; max-width: 60ch; font-size: 16px; color: rgba(255, 255, 255, .78); }

.v-galfilter { background: #111; padding: 26px 0 30px; }
.v-galfilter-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 16px; align-items: end; }
.v-galfilter-f span { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.v-galfilter-f .v-sel { width: 100%; height: 50px; background-color: #fff; border: 0; }
.v-galfilter-f .v-sel:disabled { color: #a9a9a4; opacity: 1; }
.v-galfilter-in .v-btn { height: 50px; }
.v-galfilter-reset { height: 50px; display: flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.v-galfilter-reset:hover { color: #fff; }

.v-galgrid-wrap { padding-top: 36px; }
.v-galbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.v-galbar-found { font-size: 14px; color: var(--ink-3); }
.v-galbar-found b { color: var(--ink); font-weight: 600; }
.v-galbar-sort label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.v-galbar-sort span { color: var(--ink-3); }
.v-galbar-sort select { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; padding: 4px 0; }
.v-galgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.v-galgrid-cell { scroll-margin-top: 110px; }
.v-galmore { display: flex; justify-content: center; margin-top: 44px; }
.v-galmore .v-btn { padding: 0 52px; }

/* Карточка альбома. */
.v-galcard { display: block; color: inherit; }
.v-galcard:hover { color: inherit; }
.v-galcard-img { display: block; aspect-ratio: 4 / 3; background: #e9e9e5; overflow: hidden; }
.v-galcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.v-galcard:hover .v-galcard-img img { transform: scale(1.03); }
.v-galcard-body { display: block; }
.v-galcard-t { display: block; margin-top: 16px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.v-galcard-t i { font-style: normal; font-weight: 400; color: #a9a9a4; }
.v-galcard-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.v-galcard-go { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.v-galcard:hover .v-galcard-go { color: var(--accent); }
.v-galcard.is-boxed { background: #fff; border: 1px solid var(--line); }
.v-galcard.is-boxed .v-galcard-img { aspect-ratio: 16 / 9; }
.v-galcard.is-boxed .v-galcard-body { padding: 16px 18px 20px; }
.v-galcard.is-boxed .v-galcard-t { margin-top: 0; font-size: 15px; }
.v-galcard.is-boxed .v-galcard-go { margin-top: 12px; }

/* Призыв галереи и альбома. */
.v-galcta { position: relative; background: #0c0c0c; color: #fff; overflow: hidden; margin-top: 64px; }
.v-galcta-bg { position: absolute; inset: 0; opacity: .38; }
.v-galcta-bg img { width: 100%; height: 100%; object-fit: cover; }
.v-galcta-in { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 36px; padding-bottom: 36px; }
.v-galcta h2 { margin: 0; max-width: 18em; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-galcta p { margin: 10px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.v-galcta .v-btn { flex: none; }

/* ============================================== АЛЬБОМ АВТОМОБИЛЯ — АРТБОРД */

.v-ahero { position: relative; background: #0c0c0c; color: #fff; overflow: hidden; }
.v-ahero-bg { position: absolute; inset: 0; }
.v-ahero-bg img { width: 100%; height: 100%; object-fit: cover; }
.v-ahero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .7) 44%, rgba(8, 8, 8, .2) 80%); }
.v-ahero-in { position: relative; min-height: 470px; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 48px; }
.v-ahero-kick { margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.v-ahero h1 { margin: 0 0 12px; max-width: 14em; font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.v-ahero-wheel { margin-bottom: 34px; font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.v-ahero-acts { display: flex; flex-wrap: wrap; gap: 16px; }
.v-ahero-acts .v-btn-on-dark { gap: 11px; }
.v-ahero-acts .v-btn-ghost-dark { border-color: rgba(255, 255, 255, .5); gap: 10px; }
.v-ahero-zoom { position: absolute; right: 26px; bottom: 26px; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff; cursor: pointer; }
.v-ahero-zoom svg { width: 14px; height: 14px; }
.v-ahero-zoom:hover { border-color: #fff; }

.v-astrip { background: #151515; padding: 18px 0; }
.v-astrip-in { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.v-astrip-n { color: #fff; white-space: nowrap; }
.v-astrip-n b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-astrip-n span { font-size: 14px; color: rgba(255, 255, 255, .5); }
.v-astrip-btn { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: #fff; cursor: pointer; }
.v-astrip-btn svg { width: 14px; height: 14px; }
.v-astrip-btn:hover { border-color: #fff; }
.v-astrip-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 6); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.v-astrip-row::-webkit-scrollbar { display: none; }
.v-astrip-thumb { aspect-ratio: 16 / 10; padding: 0; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, .16); overflow: hidden; cursor: pointer; }
.v-astrip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-astrip-thumb.is-on { border: 2px solid #fff; padding: 2px; }

.v-aparams { background: #fff; border-bottom: 1px solid var(--line); }
.v-aparams-crumbs { padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid #f0f0ed; }
.v-aparams-crumbs a { color: var(--ink-3); }
.v-aparams-crumbs a:hover { color: var(--ink); }
.v-aparams-crumbs span { color: var(--ink); }
.v-aparams-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 26px; padding-bottom: 26px; }
.v-aparams-grid span { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-aparams-grid b { font-size: 16px; font-weight: 600; }

.v-amosaic { padding-top: 32px; }
.v-amosaic-row { display: grid; gap: 20px; margin-bottom: 20px; }
.v-amosaic-row.is-r2a { grid-template-columns: 1.55fr 1fr; }
.v-amosaic-row.is-r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-amosaic-row.is-r2b { grid-template-columns: 1fr 1.3fr; }
.v-amosaic-row.is-r2 { grid-template-columns: 1fr 1fr; }
.v-amosaic-row.is-r1 { grid-template-columns: 1fr; }
.v-amosaic-tile { display: block; width: 100%; padding: 0; border: 0; background: #e9e9e5; overflow: hidden; cursor: zoom-in; aspect-ratio: 16 / 9; }
.v-amosaic-row.is-r3 .v-amosaic-tile { aspect-ratio: 4 / 3; }
.v-amosaic-row.is-r1 .v-amosaic-tile { aspect-ratio: 21 / 9; }
.v-amosaic-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.v-amosaic-tile:hover img { transform: scale(1.02); }
.v-atext { padding-top: 24px; }

.v-asizes-wrap, .v-awheel-wrap { padding-top: 44px; }
.v-asizes { background: #fff; border: 1px solid var(--line); padding: 26px 32px; }
.v-asizes-h { margin-bottom: 22px; font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.v-asizes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-asizes-grid > div + div { padding-left: 32px; border-left: 1px solid #f0f0ed; }
.v-asizes-grid > div:first-child { padding-right: 32px; }
.v-asizes-grid.is-one { grid-template-columns: 1fr; }
.v-asizes-grid span { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-asizes-grid b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-asizes-grid b i { font-style: normal; color: #d5d5d0; }

.v-awheel { display: grid; grid-template-columns: 230px 300px minmax(0, 1fr); gap: 36px; align-items: center; background: #fff; border: 1px solid var(--line); padding: 28px 32px; }
.v-awheel.no-img { grid-template-columns: 230px minmax(0, 1fr); }
.v-awheel-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.v-awheel-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.v-awheel-img img { width: 100%; height: 100%; object-fit: contain; }
.v-awheel-name { margin-bottom: 16px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.v-awheel-facts { display: flex; flex-wrap: wrap; gap: 14px 48px; margin-bottom: 18px; }
.v-awheel-facts span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-awheel-facts b { font-size: 14px; font-weight: 600; }

.v-asimilar { padding-top: 56px; }
.v-asimilar-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.v-asimilar-head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-asimilar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

@media (max-width: 1020px) {
	.v-galfilter-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-galgrid, .v-asimilar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-aparams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-awheel, .v-awheel.no-img { grid-template-columns: 1fr; gap: 20px; }
	.v-awheel-img { max-width: 320px; }
	.v-astrip-row { grid-auto-columns: calc((100% - 36px) / 4); }
}

@media (max-width: 700px) {
	.v-galhero-in { min-height: 240px; padding-top: 36px; padding-bottom: 36px; }
	.v-galhero h1 { font-size: 30px; }
	.v-galfilter-in { grid-template-columns: 1fr; }
	.v-galfilter-in .v-btn { width: 100%; }
	.v-galgrid, .v-asimilar-grid { grid-template-columns: 1fr; }
	.v-galcta-in { flex-direction: column; align-items: flex-start; gap: 20px; }
	.v-galcta h2 { font-size: 22px; }

	.v-ahero-in { min-height: 380px; }
	.v-ahero h1 { font-size: 32px; }
	.v-ahero-shade { background: linear-gradient(0deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .55) 60%, rgba(8, 8, 8, .25) 100%); }
	.v-astrip-in { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
	.v-astrip-btn { display: none; }
	.v-astrip-row { grid-auto-columns: calc((100% - 24px) / 3); }
	.v-aparams-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
	.v-amosaic-row.is-r2a, .v-amosaic-row.is-r3, .v-amosaic-row.is-r2b, .v-amosaic-row.is-r2 { grid-template-columns: 1fr; gap: 12px; }
	.v-amosaic-row { margin-bottom: 12px; }
	.v-amosaic-row .v-amosaic-tile, .v-amosaic-row.is-r3 .v-amosaic-tile { aspect-ratio: 4 / 3; }
	.v-asizes { padding: 20px; }
	.v-asizes-grid { grid-template-columns: 1fr; gap: 18px; }
	.v-asizes-grid > div + div { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid #f0f0ed; }
	.v-asizes-grid > div:first-child { padding-right: 0; }
	.v-asizes-grid b { font-size: 18px; }
	.v-awheel { padding: 20px; }
	.v-asimilar-head h2 { font-size: 22px; }
}
.v-awheel-body { min-width: 0; }

/* ================================================= ГАЛЕРЕЯ ДИСКОВ — АРТБОРД */

.v-galfilter-in.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; }
.v-galgrid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

/* Album covers fill the card for existing and future imports; originals stay intact. */
.v-wgcard { display: block; height: 100%; color: inherit; background: #fff; border: 1px solid var(--line); text-align: center; }
.v-wgcard:hover { color: inherit; border-color: var(--line-2); box-shadow: 0 6px 24px rgba(17, 17, 17, .08); }
.v-wgcard-img { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.v-wgcard-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.v-wgcard-body { display: block; padding: 6px 16px 22px; border-top: 1px solid #f0f0ed; }
.v-wgcard-body b { display: block; margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.v-wgcard-body em { display: block; margin-top: 7px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a9a9a4; }
.v-wgcard-fin { display: block; margin-top: 9px; font-size: 14px; color: var(--ink-2); }
.v-wgcard .v-galcard-go { justify-content: center; margin-top: 16px; font-size: 11.5px; }
.v-wgcard:hover .v-galcard-go { color: var(--accent); }

/* Альбом диска: первый экран в две колонки. */
.v-wahero { display: grid; grid-template-columns: 1.45fr 1fr; align-items: stretch; background: #0c0c0c; color: #fff; }
.v-wahero.no-img { grid-template-columns: 1fr; }
.v-wahero-img { position: relative; min-height: 470px; background: #0c0c0c; overflow: hidden; }
.v-wahero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-wahero-img .v-ahero-zoom { right: 22px; bottom: 22px; border-color: rgba(255, 255, 255, .35); }
.v-wahero-text { padding: 56px var(--pad, 64px) 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.v-wahero-text .v-ahero-kick { margin-bottom: 14px; color: rgba(255, 255, 255, .55); }
.v-wahero-text h1 { margin: 0 0 12px; font-size: 58px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; }
.v-wahero-fin { margin-bottom: 36px; font-size: 19px; color: rgba(255, 255, 255, .85); }
.v-wahero-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.v-wahero-acts .v-btn-on-dark { gap: 11px; }
.v-wahero-acts .v-btn-ghost-dark { border-color: rgba(255, 255, 255, .5); gap: 10px; }

.v-aparams-link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.v-aparams-link:hover { color: var(--accent); }

/* Мозаика альбома диска: студийные кадры на белом и один широкий. */
.v-amosaic-row.is-r3w { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-amosaic-row.is-r3w .v-amosaic-tile { aspect-ratio: 4 / 3; background: #fff; border: 1px solid #eceae6; }
.v-amosaic-row.is-r3w .v-amosaic-tile img { object-fit: contain; }
.v-amosaic-row.is-r1w { grid-template-columns: 1fr; }
.v-amosaic-row.is-r1w .v-amosaic-tile { aspect-ratio: 21 / 7; background: #111; }
.v-amosaic-row.is-r2a .v-amosaic-tile { background: #111; }

/* Другие отделки модели. */
.v-wfother { display: block; color: inherit; background: #fff; border: 1px solid var(--line); }
.v-wfother:hover { color: inherit; border-color: var(--line-2); }
.v-wfother-img { display: block; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; }
.v-wfother-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v-wfother b { display: block; padding: 16px; border-top: 1px solid #f0f0ed; text-align: center; font-size: 14px; font-weight: 600; }

/* Призыв с дополнительной ссылкой под кнопкой. */
.v-galcta-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; }
.v-galcta-link { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.v-galcta-link:hover { color: #fff; opacity: .8; }

@media (max-width: 1020px) {
	.v-galfilter-in.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-galgrid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-wahero, .v-wahero.no-img { grid-template-columns: 1fr; }
	.v-wahero-img { min-height: 340px; }
	.v-wahero-text { padding: 36px 24px; }
	.v-amosaic-row.is-r3w { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.v-galfilter-in.is-three { grid-template-columns: 1fr; }
	.v-galgrid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.v-wgcard-body { padding: 4px 10px 16px; }
	.v-wgcard-body b { font-size: 17px; }
	.v-wahero-img { min-height: 260px; }
	.v-wahero-text h1 { font-size: 40px; }
	.v-amosaic-row.is-r3w { grid-template-columns: 1fr; }
	.v-amosaic-row.is-r1w .v-amosaic-tile { aspect-ratio: 16 / 9; }
	.v-galcta-acts { align-items: flex-start; }
}

/* =================================================== АКСЕССУАРЫ — АРТБОРД */

.v-acchero { position: relative; background: #0c0c0c; color: #fff; overflow: hidden; }
.v-acchero-bg { position: absolute; inset: 0; opacity: .42; }
.v-acchero-bg img { width: 100%; height: 100%; object-fit: cover; }
.v-acchero-in { position: relative; min-height: 344px; display: flex; flex-direction: column; justify-content: center; padding-top: 52px; padding-bottom: 40px; }
.v-acchero-kick { margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.v-acchero h1 { margin: 0 0 12px; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.v-acchero-sub { margin-bottom: 22px; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.v-acchero p { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .7); }
.v-acchero-tabs { position: relative; border-top: 1px solid rgba(255, 255, 255, .14); }
.v-acchero-tabs-in { display: flex; gap: 40px; padding-top: 16px; overflow-x: auto; scrollbar-width: none; }
.v-acchero-tabs-in::-webkit-scrollbar { display: none; }
.v-acchero-tabs a { flex: none; padding: 0 2px 16px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); border-bottom: 2px solid transparent; white-space: nowrap; }
.v-acchero-tabs a:hover { color: #fff; }
.v-acchero-tabs a.is-on { color: #fff; font-weight: 700; border-bottom-color: var(--accent); }

.v-accbar { background: #fff; border-bottom: 1px solid var(--line); }
.v-accbar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 20px; padding-bottom: 20px; }
.v-accbar-found { font-size: 14px; color: var(--ink-3); }
.v-accbar-found b { color: var(--ink); font-weight: 600; }
.v-accbar-acts { display: flex; align-items: center; gap: 16px; }
.v-accbar-btn { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.v-accbar-btn:hover { border-color: var(--ink); }
.v-accbar-btn.is-select { padding: 0 8px 0 12px; }
.v-accbar-btn select { border: 0; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; padding: 0 8px; height: 100%; }
.v-accbar-filters { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding-top: 18px; border-top: 1px solid #f0f0ed; }
.v-accbar-filters .v-field { min-width: 240px; }
.v-accbar-reset { height: 48px; display: flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.v-accgrid-wrap { padding-top: 36px; }
.v-accgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

/* Карточка аксессуара. */
.v-accard { display: flex; flex-direction: column; height: 100%; color: inherit; background: #fff; border: 1px solid var(--line); }
.v-accard:hover { color: inherit; border-color: var(--line-2); box-shadow: 0 6px 24px rgba(17, 17, 17, .08); }
.v-accard-img { display: block; aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid #f0f0ed; overflow: hidden; }
.v-accard-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v-accard-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 22px; }
.v-accard-body em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #a9a9a4; }
.v-accard-body b { margin-top: 8px; font-size: 16px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.v-accard-dots { display: flex; gap: 7px; margin-top: 14px; }
.v-accard-dots i { width: 15px; height: 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.v-accard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.v-accard-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-accard-price small { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.v-accard-price.is-none { font-weight: 600; color: var(--ink-3); }
.v-accard-sep { color: var(--line); }
.v-accard-stock { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.v-accard-stock i { width: 7px; height: 7px; border-radius: 999px; background: #2e7d4f; flex: none; }
.v-accard-stock.is-order i { background: #c8912e; }
.v-accard .v-galcard-go { margin-top: auto; padding-top: 14px; font-size: 11.5px; }
.v-accard.is-compact .v-accard-body b { margin-top: 0; font-size: 14px; }

/* Блок ухода, преимущества, призыв. */
.v-acccare { position: relative; background: #0c0c0c; color: #fff; overflow: hidden; margin-top: 64px; }
.v-acccare-bg { position: absolute; inset: 0; opacity: .4; }
.v-acccare-bg img { width: 100%; height: 100%; object-fit: cover; }
.v-acccare-in { position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 40px; padding-bottom: 40px; }
.v-acccare .v-acchero-kick { margin-bottom: 14px; }
.v-acccare h2 { margin: 0 0 14px; font-size: 34px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-acccare p { margin: 0 0 28px; max-width: 470px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .72); }

.v-accben { background: #f2f1ee; padding: 44px 0; }
.v-accben-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.v-accben-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 0 8px; }
.v-accben-item svg { width: 44px; height: 44px; color: var(--ink); }
.v-accben-item b { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v-accben-item span { font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.v-accben.is-compact { padding: 32px 0; border-bottom: 1px solid var(--line); }
.v-accben.is-compact .v-accben-in { gap: 32px; }
.v-accben.is-compact .v-accben-item { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
.v-accben.is-compact .v-accben-item + .v-accben-item { border-left: 1px solid var(--line); padding-left: 32px; }
.v-accben.is-compact b, .v-accben.is-compact span { font-size: 12.5px; }

.v-acccta { background: #111; color: #fff; padding: 56px 0; margin-top: 64px; }
.v-accben + .v-acccta, .v-page + .v-acccta { margin-top: 0; }
.v-acccta-in { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.v-acccta h2 { margin: 0 0 12px; font-size: 30px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-acccta p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--ink-4); }
.v-acccta .v-btn { flex: none; }

/* ------------------------------------------------ Карточка аксессуара */

.v-acc1 { background: #fff; border-bottom: 1px solid var(--line); }
.v-acc1-crumbs { padding-top: 20px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.v-acc1-crumbs a { color: var(--ink-3); }
.v-acc1-crumbs a:hover { color: var(--ink); }
.v-acc1-crumbs span { color: var(--ink); }
.v-acc1-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; padding-top: 26px; padding-bottom: 48px; }
.v-acc1-main { position: relative; aspect-ratio: 4 / 3; background: #f7f7f5; border: 1px solid #f0f0ed; overflow: hidden; }
.v-acc1-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v-acc1-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.v-acc1-thumb { aspect-ratio: 1 / 1; padding: 6px; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.v-acc1-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v-acc1-thumb.is-on { border: 2px solid var(--accent); padding: 5px; }
.v-acc1-panel .v-eyebrow { margin-bottom: 14px; letter-spacing: .14em; }
.v-acc1-panel h1 { margin: 0 0 12px; font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; }
.v-acc1-variant { margin-bottom: 22px; font-size: 16px; color: var(--ink-2); }
.v-acc1-price { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 22px; }
.v-acc1-sum b { font-size: 28px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.v-acc1-sum b.is-none { font-size: 22px; color: var(--ink-3); }
.v-acc1-sum small { font-size: 14px; color: var(--ink-3); }
.v-acc1-stock { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.v-acc1-stock i { width: 8px; height: 8px; border-radius: 999px; background: #2e7d4f; flex: none; }
.v-acc1-stock.is-order i { background: #c8912e; }
.v-acc1-stock em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.v-acc1-lead { margin: 0 0 30px; max-width: 460px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.v-acc1-form { max-width: 460px; }
.v-acc1-field { display: block; margin: 0 0 24px; padding: 0; border: 0; }
.v-acc1-field > span, .v-acc1-field legend { display: block; margin-bottom: 10px; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-acc1-field .v-sel { width: 100%; height: 52px; }
.v-acc1-swatches { display: flex; flex-wrap: wrap; gap: 18px; }
.v-acc1-swatches label { position: relative; cursor: pointer; }
.v-acc1-swatches input { position: absolute; opacity: 0; pointer-events: none; }
.v-acc1-swatches i { display: block; width: 34px; height: 34px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); outline: 2px solid transparent; outline-offset: 3px; }
.v-acc1-swatches input:checked + i { outline-color: var(--ink); }
.v-acc1-swatches input:focus-visible + i { outline-color: var(--accent); }
.v-acc1-order { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.v-acc1-order i, .v-acc1-pay i { width: 7px; height: 7px; border-radius: 999px; background: #c8912e; flex: none; }
.v-acc1-qty { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--line); background: #fff; }
.v-acc1-qty button { width: 46px; height: 100%; border: 0; background: transparent; font-size: 19px; color: var(--ink); cursor: pointer; }
.v-acc1-qty input { width: 56px; height: 100%; border: 0; border-left: 1px solid #f0f0ed; border-right: 1px solid #f0f0ed; text-align: center; font: inherit; font-size: 15px; font-weight: 600; -moz-appearance: textfield; }
.v-acc1-qty input::-webkit-inner-spin-button, .v-acc1-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.v-acc1-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 4px; }
.v-acc1-hint { font-size: 12.5px; line-height: 1.6; color: #a9a9a4; }
.v-acc1-pay { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.v-acc1-pay i { margin-top: 5px; }

.v-acctabs { background: #fff; border-bottom: 1px solid var(--line); }
.v-acctabs-in { display: flex; gap: 44px; padding-top: 24px; overflow-x: auto; scrollbar-width: none; }
.v-acctabs-in::-webkit-scrollbar { display: none; }
.v-acctabs a { flex: none; margin-bottom: -1px; padding: 0 2px 16px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.v-acctabs a:hover { color: var(--ink); }
.v-acctabs a.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

.v-accdesc { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 48px; scroll-margin-top: 90px; }
.v-accdesc.no-img { grid-template-columns: minmax(0, 760px); }
.v-accdesc-img { display: block; aspect-ratio: 16 / 10; background: #111; overflow: hidden; }
.v-accdesc-img img { width: 100%; height: 100%; object-fit: cover; }
.v-accdesc-text h2 { margin: 0 0 18px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-accdesc-text .v-prose { font-size: 15px; line-height: 1.75; color: var(--ink-2); }

.v-accdet { background: #111; color: #fff; padding: 56px 0; margin-top: 56px; }
.v-accdet h2 { margin: 0 0 28px; font-size: 28px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-accdet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v-accdet-img { display: block; aspect-ratio: 16 / 10; background: #1a1a1a; overflow: hidden; }
.v-accdet-img img { width: 100%; height: 100%; object-fit: cover; }
.v-accdet-card b { display: block; margin-top: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v-accdet-card p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-4); }

.v-accspecs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding-top: 56px; scroll-margin-top: 90px; }
.v-accspecs.no-care { grid-template-columns: minmax(0, 760px); }
.v-accspecs h2, .v-acccompat h2, .v-accdeliv h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-accspecs-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.v-accspecs-row span { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-accspecs-row b { font-size: 14px; font-weight: 500; }
.v-accspecs-care { background: #fff; border: 1px solid var(--line); padding: 28px 32px; }
.v-accspecs-care-h { margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.v-accspecs-care p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.v-accspecs-care p:last-child { margin-bottom: 0; }

.v-acccompat, .v-accdeliv { padding-top: 56px; scroll-margin-top: 90px; }
.v-acccompat .v-note { margin: 0 0 20px; }
.v-acccompat-list { display: flex; flex-wrap: wrap; gap: 12px; }
.v-acccompat-list a { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.v-acccompat-list a:hover { border-color: var(--ink); }
.v-acccompat-list span { width: 44px; height: 44px; overflow: hidden; }
.v-acccompat-list img { width: 100%; height: 100%; object-fit: contain; }
.v-acccompat-list b { font-size: 14px; font-weight: 600; }
.v-accdeliv p { margin: 12px 0 0; max-width: 760px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.v-accsim .v-accgrid { margin-top: 0; }

@media (max-width: 1020px) {
	.v-accgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.v-accben-in { grid-template-columns: 1fr; gap: 24px; }
	.v-accben.is-compact .v-accben-item + .v-accben-item { border-left: 0; padding-left: 8px; }
	.v-acc1-in { grid-template-columns: 1fr; gap: 32px; }
	.v-accdesc, .v-accdesc.no-img, .v-accspecs, .v-accspecs.no-care { grid-template-columns: 1fr; gap: 28px; }
	.v-accdet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.v-acchero h1 { font-size: 36px; }
	.v-acchero-in { min-height: 280px; padding-top: 40px; }
	.v-acchero-tabs-in { gap: 26px; }
	.v-accbar-acts { width: 100%; }
	.v-accbar-btn { flex: 1; justify-content: space-between; padding: 0 14px; }
	.v-accbar-filters .v-field { min-width: 0; flex: 1 1 100%; }
	.v-accgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.v-accard-body { padding: 14px 12px 16px; }
	.v-accard-body b { font-size: 14px; }
	.v-accard-sep { display: none; }
	.v-accard-meta { gap: 6px 12px; }
	.v-acccare h2, .v-acccta h2 { font-size: 24px; }
	.v-acccta-in { flex-direction: column; align-items: flex-start; gap: 20px; }
	.v-acc1-panel h1 { font-size: 28px; }
	.v-acc1-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.v-accdet-grid { grid-template-columns: 1fr; }
	.v-accspecs-row { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
	.v-accspecs-care { padding: 20px; }
}
.v-acc1-media { min-width: 0; }
.v-acc1-colors { min-width: 0; }
/* Текст только для экранных дикторов. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/*
 * Атрибут hidden должен скрывать всегда. Штатное правило браузера слабее
 * любого своего display: стоит у блока display:flex — и hidden перестаёт
 * работать. Так ломалась кнопка «Открыть фильтры» у аксессуаров: скрипт
 * переключал атрибут, а панель оставалась на экране.
 */
[hidden] { display: none !important; }

/* ======================================================== БЛОГ — АРТБОРД */

.v-blhead { background: #fff; padding: 56px 0 48px; }
.v-blhead-kick { margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.v-blhead h1 { margin: 0 0 14px; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.v-blhead p { margin: 0 0 40px; max-width: 380px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }

.v-blfeat { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: stretch; }
.v-blfeat.count-1 { grid-template-columns: 1fr; }
.v-blfeat-main, .v-blfeat-item { position: relative; display: block; overflow: hidden; background: #111; color: #fff; }
.v-blfeat-main:hover, .v-blfeat-item:hover { color: #fff; }
.v-blfeat-main { aspect-ratio: 16 / 10; }
.v-blfeat.count-1 .v-blfeat-main { aspect-ratio: 21 / 9; }
.v-blfeat-main img, .v-blfeat-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.v-blfeat-main:hover img, .v-blfeat-item:hover img { transform: scale(1.03); }
.v-blfeat-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 8, 8, .92) 8%, rgba(8, 8, 8, .45) 52%, rgba(8, 8, 8, .1) 100%); }
.v-blfeat-shade.is-side { background: linear-gradient(90deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .72) 52%, rgba(8, 8, 8, .15) 100%); }
.v-blfeat-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 40px 38px; display: block; }
.v-blfeat-text b { display: block; margin-top: 14px; max-width: 520px; font-size: 32px; font-weight: 700; line-height: 1.18; letter-spacing: -.01em; text-transform: uppercase; }
.v-blfeat-lead { display: block; margin-top: 14px; max-width: 440px; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .72); }
.v-blfeat-go { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.v-blfeat-side { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.v-blfeat-item { min-height: 214px; }
.v-blfeat-item .v-blfeat-text { inset: 0; padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; }
.v-blfeat-item .v-blfeat-text b { margin-top: 12px; max-width: 330px; font-size: 20px; line-height: 1.25; }
.v-blfeat-item .v-blfeat-lead { margin-top: 10px; max-width: 330px; font-size: 13px; line-height: 1.6; }
.v-blfeat-item .v-blfeat-go { margin-top: 18px; }

/* Рубрика · дата. */
.v-bmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.v-bmeta em { font-style: normal; color: var(--accent); }
.v-bmeta i { font-style: normal; color: #d5d5d0; }
.v-bmeta span { font-weight: 600; color: #a9a9a4; }
.v-bmeta.is-dark i { color: rgba(255, 255, 255, .35); }
.v-bmeta.is-dark span { color: rgba(255, 255, 255, .65); }

.v-bltabs { background: #fff; border-bottom: 1px solid var(--line); }
.v-bltabs-in { display: flex; gap: 44px; overflow-x: auto; scrollbar-width: none; }
.v-bltabs-in::-webkit-scrollbar { display: none; }
.v-bltabs a { flex: none; margin-bottom: -1px; padding: 0 2px 16px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.v-bltabs a:hover { color: var(--ink); }
.v-bltabs a.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

.v-blgrid-wrap { padding-top: 44px; }
.v-blgrid-h { margin: 0 0 28px; font-size: 28px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-blgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }

.v-bcard { display: flex; flex-direction: column; color: inherit; background: #fff; border: 1px solid var(--line); }
.v-bcard:hover { color: inherit; border-color: var(--line-2); box-shadow: 0 6px 24px rgba(17, 17, 17, .08); }
.v-bcard-img { display: block; aspect-ratio: 16 / 9; background: #1a1a1a; overflow: hidden; }
.v-bcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-bcard-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 24px; }
.v-bcard-body b { margin-top: 12px; font-size: 18px; font-weight: 700; line-height: 1.28; letter-spacing: -.01em; text-transform: uppercase; }
.v-bcard-author { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.v-bcard-lead { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.v-bcard-go { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.v-bcard:hover .v-bcard-go { color: var(--accent); }

.v-blpager { display: flex; justify-content: center; margin-top: 44px; }
.v-blpager .page-numbers { min-width: 40px; height: 40px; margin: 0 5px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); }
.v-blpager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.v-blpager a.page-numbers:hover { border-color: var(--ink); }
.v-blpager .page-numbers.dots { border: 0; background: none; }

.v-blcta { display: grid; grid-template-columns: 340px minmax(0, 1fr) auto; gap: 44px; align-items: center; margin-top: 64px; padding-right: var(--pad, 64px); background: #111; color: #fff; }
.v-blcta.no-img { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--pad, 64px); }
.v-blcta-img { display: block; height: 190px; background: #0c0c0c; overflow: hidden; }
.v-blcta-img img { width: 100%; height: 100%; object-fit: cover; }
.v-blcta-text { padding: 34px 0; }
.v-blcta h2 { margin: 0 0 12px; font-size: 28px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.v-blcta p { margin: 0; max-width: 44ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-4); }

/* ===================================================== СТАТЬЯ — АРТБОРД */

.v-art-crumbs { padding-top: 22px; font-size: 13px; color: var(--ink-3); }
.v-art-crumbs a { color: var(--ink-3); }
.v-art-crumbs a:hover { color: var(--ink); }
.v-art-crumbs span { color: var(--ink); }
.v-art-head { padding-top: 44px; padding-bottom: 40px; text-align: center; }
.v-art-topics { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 22px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.v-art-topics a { color: var(--accent); }
.v-art-topics i { font-style: normal; color: #d5d5d0; }
.v-art-head h1 { margin: 0 auto 22px; max-width: 900px; font-size: 48px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; text-transform: uppercase; }
.v-art-lead { margin: 0 auto 26px; max-width: 620px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.v-art-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a9a9a4; }
.v-art-meta i { font-style: normal; }
.v-art-cover { height: 520px; background: #1a1a1a; overflow: hidden; }
.v-art-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.v-art-body { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 44px; align-items: start; max-width: 1000px; margin: 0 auto; padding-top: 56px; }
.v-art-share { position: sticky; top: 24px; }
.v-art-share-h { margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v-art-share-list { display: flex; flex-direction: column; gap: 10px; }
.v-art-share-list a, .v-art-share-list button { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; background: #111; border: 0; color: #fff; cursor: pointer; transition: background .15s; }
.v-art-share-list a:hover, .v-art-share-list button:hover { background: var(--accent); color: #fff; }
.v-art-share-list svg { width: 18px; height: 18px; }
.v-art-share-list button.is-done { background: #2e7d4f; }

/* Тело статьи и штатные блоки. */
.v-art-content { min-width: 0; font-size: 16.5px; line-height: 1.78; color: #2c2c2c; }
.v-art-content > * { margin-top: 0; margin-bottom: 20px; }
.v-art-content p { margin: 0 0 20px; }
.v-art-content h2 { margin: 48px 0 18px; font-size: 26px; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); scroll-margin-top: 90px; }
.v-art-content h3 { margin: 36px 0 14px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); scroll-margin-top: 90px; }
.v-art-content ul, .v-art-content ol { margin: 0 0 20px; padding-left: 22px; }
.v-art-content li { margin-bottom: 8px; }
.v-art-content li::marker { color: var(--accent); }
.v-art-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.v-art-content a:hover { color: var(--accent); }
.v-art-content .has-drop-cap:not(:focus)::first-letter { float: left; margin: 4px 14px 0 0; font-size: 64px; line-height: .86; font-weight: 700; color: var(--ink); }
.v-art-content .is-style-lead { font-size: 20px; line-height: 1.65; color: var(--ink); }

.v-art-content .wp-block-quote { margin: 36px 0; padding: 0 0 0 58px; border: 0; position: relative; }
.v-art-content .wp-block-quote::before { content: '\201C'; position: absolute; left: 0; top: -6px; font-size: 64px; line-height: 1; color: var(--accent); }
.v-art-content .wp-block-quote p { margin: 0 0 12px; font-size: 22px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.v-art-content .wp-block-quote cite { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); }
.v-art-content .wp-block-quote cite::before { content: '— '; }

.v-art-content .wp-block-image { margin: 32px 0; }
.v-art-content .wp-block-image img { width: 100%; height: auto; display: block; }
.v-art-content .wp-block-image figcaption, .v-art-content .wp-block-video figcaption, .v-art-content .wp-block-embed figcaption, .v-art-content .wp-block-gallery figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); text-align: left; }
/* Широкое — во всю сетку текста и колонки «Поделиться», во всю страницу — от края до края. */
.v-art-content .alignwide { width: calc(100% + 164px); max-width: none; margin-left: -164px; }
.v-art-content .alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.v-art-content .alignfull img { max-height: 620px; object-fit: cover; }

.v-art-content .wp-block-gallery { margin: 32px 0; gap: 16px !important; }
.v-art-content .wp-block-gallery figure.wp-block-image { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #1a1a1a; cursor: zoom-in; }
.v-art-content .wp-block-gallery figure.wp-block-image img { height: 100%; object-fit: cover; }
.v-art-content .wp-block-gallery .is-extra { display: none !important; }
.v-art-content .wp-block-gallery .has-more { position: relative; }
.v-art-content .wp-block-gallery .has-more::after { content: attr(data-more); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 8, 8, .62); color: #fff; font-size: 30px; font-weight: 700; }

.v-art-content .wp-block-embed, .v-art-content .wp-block-video { margin: 32px 0; }
.v-art-content .wp-block-embed__wrapper iframe, .v-art-content .wp-block-video video { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; background: #000; }

.v-art-content .wp-block-separator.is-style-vossen, .v-art-content hr.wp-block-separator { position: relative; height: 1px; margin: 48px auto; border: 0; background: var(--line); overflow: visible; }
.v-art-content .wp-block-separator.is-style-vossen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; background: #fff; border: 2px solid var(--accent); transform: translate(-50%, -50%) rotate(45deg); }

/* Свои блоки статьи. */
.v-bnote { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 20px; margin: 32px 0; padding: 22px 24px 22px 0; background: #f7f7f5; }
.v-bnote-bar { background: var(--ink-3); }
.v-bnote.is-important .v-bnote-bar { background: var(--accent); }
.v-bnote.is-warning .v-bnote-bar { background: #c8912e; }
.v-bnote-h { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.v-bnote p { margin: 0; font-size: 15px; line-height: 1.7; }

.v-bcompare { margin: 32px 0; }
.v-bcompare-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1a1a; user-select: none; }
.v-bcompare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v-bcompare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cut, 50%)) 0 0); }
.v-bcompare-line { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.v-bcompare-knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 999px; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.v-bcompare-knob svg { width: 20px; height: 20px; }
.v-bcompare-tag { position: absolute; bottom: 16px; padding: 6px 12px; background: rgba(17, 17, 17, .72); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.v-bcompare-tag.is-left { left: 16px; }
.v-bcompare-tag.is-right { right: 16px; }
.v-bcompare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

.v-bconfig { margin: 32px 0; padding: 26px 30px 28px; background: #111; color: #fff; }
.v-bconfig-h { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.v-bconfig-row { display: grid; grid-template-columns: 110px 18px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.v-bconfig-row span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.v-bconfig-row i { font-style: normal; color: #5c5f63; }
.v-bconfig-row b { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.v-art-content .v-bconfig-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }

.v-bproduct { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 28px; align-items: center; margin: 32px 0; padding: 20px 24px 20px 20px; background: #fff; border: 1px solid var(--line); }
.v-bproduct-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.v-bproduct-img img { width: 100%; height: 100%; object-fit: contain; }
.v-bproduct-kick { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.v-bproduct-name { margin-top: 6px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.v-bproduct-facts { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.v-bproduct-price { margin-top: 12px; }
.v-bproduct-price b { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.v-bproduct-price b.is-none { font-size: 15px; color: var(--ink-3); }
.v-bproduct-price small { font-size: 13px; color: var(--ink-3); }
.v-art-content .v-bproduct .v-btn { color: #fff; text-decoration: none; }

.v-bcta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 36px 0; padding: 28px 32px; background: #111; color: #fff; }
.v-bcta-h { font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.v-bcta-t { margin-top: 6px; font-size: 14px; color: var(--ink-4); }
.v-art-content .v-bcta .v-btn { flex: none; color: var(--ink); text-decoration: none; }

.v-bsteps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; margin: 32px 0; }
.v-bstep { padding-top: 14px; border-top: 2px solid var(--ink); }
.v-bstep-n { font-size: 13px; font-weight: 700; color: var(--accent); }
.v-bstep-h { margin-top: 8px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.v-bstep-t { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.v-btoc { margin: 32px 0; padding: 24px 28px; background: #f7f7f5; border-left: 2px solid var(--accent); }
.v-btoc-h { margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.v-art-content .v-btoc a { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 7px 0; font-size: 15px; color: var(--ink); text-decoration: none; }
.v-btoc a span:first-child { font-weight: 700; color: var(--accent); }
.v-art-content .v-btoc a:hover span:last-child { text-decoration: underline; }

/* Подвал статьи. */
.v-art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; max-width: 1000px; margin: 0 auto; padding-top: 36px; }
.v-art-tags > span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.v-art-tags div { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.v-art-tags a { padding-bottom: 3px; border-bottom: 1px solid #d5d5d0; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.v-art-tags a:hover { border-color: var(--accent); }

.v-art-pn { padding-top: 32px; }
.v-art-pn-in { display: grid; grid-template-columns: 1fr 1px 1fr; border: 1px solid var(--line); }
.v-art-pn-in > i { background: var(--line); }
.v-art-pn a { display: block; padding: 24px 28px; color: inherit; }
.v-art-pn a:hover b { color: var(--accent); }
.v-art-pn a.is-next { text-align: right; }
.v-art-pn a span { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a9a9a4; }
.v-art-pn a.is-next span { justify-content: flex-end; }
.v-art-pn a b { font-size: 16px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }

.v-art-author { padding-top: 24px; }
.v-art-author-in { display: grid; grid-template-columns: 96px 240px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 32px; border: 1px solid var(--line); }
.v-art-author-photo { width: 96px; height: 96px; border-radius: 999px; overflow: hidden; background: #e9e9e5; display: block; }
.v-art-author-photo img { width: 100%; height: 100%; object-fit: cover; }
.v-art-author-name { font-size: 19px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.v-art-author-role { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a9a9a4; }
.v-art-author-links { display: flex; gap: 10px; margin-top: 16px; }
.v-art-author-links a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 10px; font-weight: 700; color: var(--ink); }
.v-art-author-links a:hover { border-color: var(--ink); }
.v-art-author-in p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); }

.v-art-similar { padding-top: 56px; }
.v-art-similar h2 { margin: 0 0 24px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }

@media (max-width: 1020px) {
	.v-blfeat, .v-blfeat.count-1 { grid-template-columns: 1fr; }
	.v-blfeat-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
	.v-blgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-blcta, .v-blcta.no-img { grid-template-columns: 1fr; gap: 0; padding: 0 24px 32px; }
	.v-blcta-img { margin: 0 -24px; }
	.v-art-body { grid-template-columns: 1fr; gap: 24px; }
	.v-art-share { position: static; display: flex; align-items: center; gap: 16px; }
	.v-art-share-h { margin: 0; }
	.v-art-share-list { flex-direction: row; }
	.v-art-content .alignwide { width: 100%; margin-left: 0; }
	.v-art-author-in { grid-template-columns: 96px minmax(0, 1fr); }
	.v-art-author-in p { grid-column: 1 / -1; }
	.v-bproduct { grid-template-columns: 120px minmax(0, 1fr); }
	.v-bproduct .v-btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 700px) {
	.v-blhead { padding: 40px 0 36px; }
	.v-blhead h1 { font-size: 40px; }
	.v-blfeat-main { aspect-ratio: 4 / 5; }
	.v-blfeat-text { padding: 22px 20px 24px; }
	.v-blfeat-text b { font-size: 22px; }
	.v-blfeat-side { grid-template-columns: 1fr; }
	.v-bltabs-in { gap: 26px; }
	.v-blgrid { grid-template-columns: 1fr; }
	.v-blcta h2 { font-size: 22px; }
	.v-art-head h1 { font-size: 30px; }
	.v-art-cover { height: 280px; }
	.v-art-content h2 { font-size: 22px; }
	.v-art-content .wp-block-quote { padding-left: 40px; }
	.v-art-content .wp-block-quote p { font-size: 18px; }
	.v-bsteps { grid-template-columns: 1fr; }
	.v-bcta { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
	.v-bconfig { padding: 20px; }
	.v-bconfig-row { grid-template-columns: 90px 12px minmax(0, 1fr); }
	.v-bproduct { grid-template-columns: 1fr; padding: 18px; }
	.v-bproduct-img { max-width: 200px; }
	.v-art-pn-in { grid-template-columns: 1fr; }
	.v-art-pn-in > i { height: 1px; }
	.v-art-pn a.is-next { text-align: left; }
	.v-art-pn a.is-next span { justify-content: flex-start; }
	.v-art-author-in { grid-template-columns: 1fr; padding: 22px; }
}

/* Преимущества на контактах: плотная раскладка, но с полями артборда. */
.v-accben.is-flat { padding: 44px 0; border-bottom: 0; }
.v-accben.is-flat .v-accben-in { gap: 44px; }
.v-accben.is-flat .v-accben-item + .v-accben-item { padding-left: 34px; }

/* ============================================== ПРАВОВОЙ ДОКУМЕНТ — АРТБОРД LEGAL */

.v-legal-crumbs { background: #fff; border-bottom: 1px solid var(--line); }
.v-legal-crumbs .v-wrap { padding-top: 20px; padding-bottom: 20px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.v-legal-crumbs a, .v-legal-crumbs .is-mid { color: var(--ink-3); }
.v-legal-crumbs span:last-child { color: var(--ink); }
.v-legal-head { background: #f2f1ee; padding: 48px 0; text-align: center; }
.v-legal-kick { margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.v-legal-head h1 { max-width: 880px; margin: 0 auto 14px; font-size: 42px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; text-transform: uppercase; }
.v-legal-head p { max-width: 640px; margin: 0 auto 22px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.v-legal-dates { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a9a9a4; }
.v-legal-dates i { font-style: normal; }

.v-legal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 44px; }
.v-legal.no-toc { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.v-legal-toc { position: sticky; top: 100px; }
.v-legal-body { min-width: 0; }
.v-legal-intro { border-top: 0; padding-top: 0; }
.v-legal-toc-h { margin-bottom: 12px; padding-left: 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.v-legal-toc a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 0 11px 14px; border-left: 2px solid transparent; color: inherit; }
.v-legal-toc a span:first-child { font-size: 12.5px; font-weight: 700; color: #a9a9a4; }
.v-legal-toc a span:last-child { font-size: 12.5px; font-weight: 500; line-height: 1.45; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.v-legal-toc a:hover span:last-child { color: var(--ink); }
.v-legal-toc a.is-on { border-left-color: var(--accent); }
.v-legal-toc a.is-on span:first-child { color: var(--ink); }
.v-legal-toc a.is-on span:last-child { font-weight: 700; color: var(--accent); }

.v-legal-sum { margin-bottom: 8px; padding: 26px 30px; background: #fff; border: 1px solid var(--line); }
.v-legal-sum-h { margin-bottom: 22px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.v-legal-sum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.v-legal-sum-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start; }
.v-legal-sum-item + .v-legal-sum-item { padding-left: 28px; border-left: 1px solid var(--line); }
.v-legal-sum-item svg { width: 30px; height: 30px; color: var(--accent); }
.v-legal-sum-item b { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.v-legal-sum-item span { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

.v-legal-sec { padding: 28px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.8; color: #2c2c2c; scroll-margin-top: 90px; }
.v-legal-sec:last-child { padding-bottom: 0; }
.v-legal-sec h2 { margin: 0 0 16px; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); scroll-margin-top: 110px; }
.v-legal-sec h3 { margin: 20px 0 10px; font-size: 14.5px; font-weight: 700; }
.v-legal-sec p { margin: 0 0 12px; }
.v-legal-sec ul, .v-legal-sec ol { margin: 0 0 12px; padding-left: 20px; }
.v-legal-sec li { margin-bottom: 7px; }
.v-legal-sec a { color: var(--accent); }
.v-legal-sec > :last-child { margin-bottom: 0; }

.v-boperator { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px 28px; border: 1px solid var(--accent); }
.v-boperator-ic { width: 44px; height: 44px; border-radius: 999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.v-boperator-ic svg { width: 22px; height: 22px; }
.v-boperator-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v-boperator-cols > div + div { padding-left: 28px; border-left: 1px solid #f0d6d8; }
.v-boperator-cols b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.v-boperator-cols span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.v-legal-sec .v-boperator-cols a { color: var(--ink-3); }

.v-legal-docs { margin-top: 48px; margin-bottom: 64px; background: #fff; border-top: 1px solid var(--line); }
.v-legal-docs-in { display: flex; align-items: center; }
.v-legal-docs-ic { display: flex; align-items: center; padding-right: 22px; color: #a9a9a4; }
.v-legal-docs-ic svg { width: 18px; height: 18px; }
.v-legal-docs-list { flex: 1; display: flex; min-width: 0; }
.v-legal-docs-list a { flex: 1; padding: 20px 12px; border-bottom: 2px solid transparent; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.v-legal-docs-list a:hover { color: var(--ink); }
.v-legal-docs-list a.is-on { font-weight: 700; color: var(--accent); border-bottom-color: var(--accent); }
.v-legal-top { display: flex; align-items: center; gap: 10px; padding: 20px 0 20px 22px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.v-legal-top svg { width: 10px; height: 14px; }

@media (max-width: 1020px) {
	.v-legal, .v-legal.no-toc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.v-legal-toc { position: static; border: 1px solid var(--line); padding: 16px 16px 8px 0; }
	.v-legal-sum-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.v-legal-sum-item + .v-legal-sum-item { padding-left: 0; border-left: 0; }
	.v-boperator-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.v-boperator-cols > div + div { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
	.v-legal-head { padding: 36px 0; }
	.v-legal-head h1 { font-size: 28px; }
	.v-legal-sum { padding: 20px 18px; }
	.v-boperator { grid-template-columns: minmax(0, 1fr); padding: 20px; }
	.v-legal-docs-in { flex-wrap: wrap; }
	.v-legal-docs-ic { display: none; }
	.v-legal-docs-list { flex: 1 1 100%; flex-direction: column; }
	.v-legal-docs-list a { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
	.v-legal-docs-list a.is-on { border-bottom-color: var(--line); border-left-color: var(--accent); padding-left: 12px; }
}

@media (max-width: 1020px) {
	.v-ctmain { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 700px) {
	.v-cthero-in { min-height: 280px; }
	.v-cthero h1 { font-size: 38px; }
	.v-ctinfo h2 { font-size: 22px; }
	.v-ctrow { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
	.v-ctrow-ic { width: 48px; height: 48px; }
	.v-ctform { padding: 26px 20px 24px; }
	.v-ctform h2 { font-size: 22px; }
	.v-ctform .v-cogrid { grid-template-columns: minmax(0, 1fr); }
	.v-ctmap { height: auto; display: flex; flex-direction: column; }
	.v-ctmap iframe { position: static; height: 320px; }
	.v-ctmap-card { position: static; transform: none; max-width: none; border-width: 1px 0 0; padding: 22px 24px; }
	.v-accben.is-flat .v-accben-item + .v-accben-item { padding-left: 0; }
}

/* ---- кнопка «Наверх» ---- */
.v-totop {
	position: fixed;
	bottom: 28px;
	z-index: 60;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	box-shadow: 0 6px 24px rgba(17, 17, 17, .08);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s, visibility .2s, background .15s, color .15s, border-color .15s;
}
.v-totop.is-right { right: 28px; }
.v-totop.is-left { left: 28px; }
.v-totop.is-shown { opacity: 1; visibility: visible; transform: none; }
.v-totop:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.v-totop svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
	.v-totop { bottom: 18px; width: 42px; height: 42px; }
	.v-totop.is-right { right: 16px; }
	.v-totop.is-left { left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.v-totop { transition: none; }
}

/* Страницы галереи дисков: на телефоне кнопки мельче и переносятся. */
.v-galpager { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 700px) {
	.v-galpager .page-numbers { min-width: 34px; height: 34px; margin: 0 3px; padding: 0 8px; font-size: 13px; }
}

@media (max-width: 700px) {
	.v-about-in .v-prose { font-size: 16px; line-height: 1.75; }
}


/* Ответ «встанет ли» под формой подбора на странице диска. */
.v-wfit-res { grid-column: 1 / -1; padding: 22px 26px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.v-wfit-res-h { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; }
.v-wfit-res-h i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.v-wfit-res.is-yes .v-wfit-res-h i { background: #3dbd6b; }
.v-wfit-res.is-no .v-wfit-res-h i { background: var(--accent); }
.v-wfit-res.is-loading .v-wfit-res-h { font-weight: 500; color: rgba(255, 255, 255, .62); }
.v-wfit-res-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.v-wfit-res-list li { display: flex; }
.v-wfit-res-list button { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border: 2px solid #fff; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.v-wfit-res-list button:hover { border-color: var(--accent); }
.v-wfit-res-list button.is-on { border-color: var(--accent); background: #fff5f5; }
.v-wfit-res-list b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.v-wfit-res-tip { margin: 8px 0 0 22px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.v-wfit-res-list em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.v-wfit-res-list span { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.v-wfit-res-note { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.v-wfit-res-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.v-wfit-res-link:hover { color: var(--accent); }
@media (max-width: 700px) {
	.v-wfit-res { padding: 18px; }
	.v-wfit-res-h { font-size: 15px; align-items: flex-start; }
	.v-wfit-res-h i { margin-top: 6px; }
}


/* Конфигурация комплекта у Forged: опции прямо под размерами. */
.v-copts { margin: 4px 24px 0; padding: 16px 0 6px; border-top: 1px solid var(--bg-3); }
.v-copts-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.v-copts-h em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--ink-3); }
.v-copt { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #f2f2ef; font-size: 13.5px; }
.v-copt.is-auto { grid-template-columns: minmax(0, 1fr) auto 22px; color: var(--ink-3); }
.v-copt-x { width: 22px; height: 22px; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.v-copt-x:hover { color: var(--accent); }
.v-copts-empty { padding: 6px 0 4px; font-size: 13px; color: var(--ink-3); }
.v-copts-empty a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v-fopt-in.is-list { grid-template-columns: minmax(0, 1fr); }
.v-copt:first-of-type { border-top: 0; }
.v-copt input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); }
.v-copt-t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.v-copt-t i { display: block; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.v-copt-p { font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v-copt.is-auto { cursor: default; }
.v-copt.is-auto input { opacity: 1; }
.v-copts-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #f2f2ef; font-size: 12px; color: var(--ink-3); }
.v-copts-foot a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@keyframes v-flash { 0% { box-shadow: 0 0 0 0 rgba(213, 35, 49, .55); } 100% { box-shadow: 0 0 0 14px rgba(213, 35, 49, 0); } }
.v-config.is-flash { animation: v-flash .9s ease-out 1; }

/* Опции Forged в левой колонке под таблицей размеров. */
.v-fopt.is-inline { margin-top: 40px; padding: 0; }
.v-fopt.is-inline .v-sec-h { font-size: 26px; }
.v-fopt.is-inline .v-fopt-in { margin-top: 18px; }

/* ---- О нас ---- */
.v-abt-top { padding-top: 56px; }
.v-abt-intro { max-width: 900px; margin: 0; font-size: 20px; line-height: 1.6; color: var(--ink); }
.v-abt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.v-abt-fact b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.v-abt-fact span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.v-abt-text { padding-top: 44px; }
.v-abt-text .v-prose { max-width: 820px; font-size: 17px; line-height: 1.75; }
.v-abt-blocks { padding-top: 56px; display: grid; gap: 56px; }
.v-abt-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.v-abt-block.is-right .v-abt-block-img { order: 2; }
.v-abt-block.no-img { grid-template-columns: minmax(0, 820px); }
.v-abt-block-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.v-abt-block-text p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-2, var(--ink-3)); }
.v-abt-quote { margin-top: 64px; background: var(--ink); color: #fff; }
.v-abt-quote-in { padding-top: 56px; padding-bottom: 56px; text-align: center; }
.v-abt-quote blockquote { margin: 0 auto; max-width: 860px; font-size: 22px; line-height: 1.55; font-weight: 600; }
.v-abt-quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
@media (max-width: 900px) {
	.v-abt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v-abt-block, .v-abt-block.is-right { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.v-abt-block.is-right .v-abt-block-img { order: 0; }
	.v-abt-intro { font-size: 18px; }
	.v-abt-quote blockquote { font-size: 18px; }
}

/* Аксессуар: выбор исполнения кнопками вместо кружков цвета. */
.v-acc1-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v-acc1-chips label { position: relative; }
.v-acc1-chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.v-acc1-chips span { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.v-acc1-chips label:hover span { border-color: var(--ink); }
.v-acc1-chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.v-acc1-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Аксессуар: выбранный вариант видно сразу — подпись и заметная отметка. */
.v-acc1-colors legend b { font-weight: 600; color: var(--ink); }
.v-acc1-swatches i { transition: box-shadow .15s, outline-color .15s; }
.v-acc1-swatches input:checked + i { outline-color: var(--ink); outline-width: 3px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(0, 0, 0, .25); }
.v-acc1-swatches label:hover i { outline-color: rgba(0, 0, 0, .25); }

/* Страница диска: галереи и аксессуары — один ряд из четырёх и кнопка «Показать все». */
.v-home-gal.is-four, .v-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v-wgal-more { display: flex; justify-content: center; margin-top: 28px; }
@media (max-width: 1020px) {
	.v-home-gal.is-four, .v-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.v-home-gal.is-four, .v-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.v-wgal-more .v-btn { width: 100%; text-align: center; justify-content: center; }
}

/* Карточка галереи автомобилей повторяет карточку галереи дисков,
   но снимок машины — кадр 4:3 и без полей. */
.v-wgcard-auto .v-wgcard-img { aspect-ratio: 4 / 3; }
.v-wgcard-auto .v-wgcard-img img { object-fit: cover; }
.v-wgcard-auto .v-wgcard-body b { font-size: 18px; }
.v-wgcard-auto .v-galcard-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Cart and account: current selection is separate from ordered fitments. */
.v-selected-car { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; border:1px solid var(--line); margin-bottom:32px; }
.v-selected-car p { margin:8px 0 0; }
.v-selected-car .v-selected-car-note { color:var(--ink-3); font-size:13px; max-width:68ch; }
.v-selected-car .v-btn { flex-shrink:0; }
.v-gallery-banner { position:relative; isolation:isolate; min-height:260px; height:clamp(260px,32vw,560px); margin-top:80px; overflow:hidden; background:var(--ink); color:#fff; display:flex; align-items:flex-end; }
.v-gallery-banner>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.v-gallery-banner:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 70%); z-index:-1; }
.v-gallery-banner .v-wrap { width:100%; padding-top:40px; padding-bottom:48px; }
.v-gallery-banner h2 { font-size:clamp(44px,7vw,110px); line-height:1.1; font-weight:300; margin:0; }
.v-account .woocommerce { display:flow-root; }
.v-account .woocommerce-MyAccount-navigation ul { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.v-account .woocommerce-MyAccount-navigation li a { display:block; padding:14px 16px; border-bottom:1px solid var(--line); }
.v-account .woocommerce-MyAccount-navigation .is-active a { background:var(--ink); color:#fff; }
.v-account .woocommerce input.input-text { padding:12px; border:1px solid var(--line); background:#fff; font:inherit; }
.v-account .woocommerce button.button, .v-account .woocommerce a.button { background:var(--ink); color:#fff; border-radius:0; padding:13px 20px; }
.v-account .woocommerce table.shop_table { border-radius:0; }
@media(max-width:700px) {
 .v-selected-car { flex-direction:column; align-items:stretch; padding:20px; gap:18px; }
 .v-selected-car .v-btn { text-align:center; }
 .v-gallery-banner { margin-top:48px; }
 .v-gallery-banner .v-wrap { padding-bottom:30px; }
 .v-account .woocommerce-MyAccount-navigation, .v-account .woocommerce-MyAccount-content { float:none; width:100%; margin-bottom:24px; }
 .v-account .woocommerce-MyAccount-content { overflow-x:auto; }
}

/* WooCommerce hides tbody th on small screens, including order numbers.
   Keep this override within the account and WooCommerce's 768px breakpoint. */
@media (max-width: 768px) {
 .v-account .woocommerce table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number {
  display:block; padding:12px; text-align:left; background:#f7f7f7;
 }
 .v-account .woocommerce table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number::before {
  content:attr(data-title) ": "; font-weight:600;
 }
 .v-account .woocommerce table.woocommerce-table--order-details,
 .v-account .woocommerce table.woocommerce-table--order-details tbody,
 .v-account .woocommerce table.woocommerce-table--order-details tfoot,
 .v-account .woocommerce table.woocommerce-table--order-details tr,
 .v-account .woocommerce table.woocommerce-table--order-details td,
 .v-account .woocommerce table.woocommerce-table--order-details th {
  display:block; width:100%; box-sizing:border-box;
 }
 .v-account .woocommerce table.woocommerce-table--order-details thead { display:none; }
 .v-account .woocommerce table.woocommerce-table--order-details td,
 .v-account .woocommerce table.woocommerce-table--order-details th {
  padding:12px 16px; text-align:left; word-break:normal; overflow-wrap:break-word;
 }
 .v-account .woocommerce table.woocommerce-table--order-details .wc-item-meta {
  list-style:none; margin:16px 0 0; padding:0;
 }
 .v-account .woocommerce table.woocommerce-table--order-details .wc-item-meta li { margin:0 0 12px; }
 .v-account .woocommerce table.woocommerce-table--order-details .wc-item-meta .wc-item-meta-label {
  float:none; display:block; margin:0 0 3px;
 }
 .v-account .woocommerce table.woocommerce-table--order-details .wc-item-meta p {
  margin:0; word-break:normal; overflow-wrap:break-word;
 }
 .v-account .woocommerce table.woocommerce-table--order-details td.product-total {
  padding-top:0; border-top:0; text-align:right; font-weight:600;
 }
 .v-account .woocommerce table.woocommerce-table--order-details .amount { white-space:nowrap; }
 .v-account .woocommerce table.woocommerce-table--order-details tfoot td { border-top:0; padding-top:0; }
}

/* Vehicle requirements in the existing Forged calculator. */
.v-fit-summary { padding:16px 24px; border-top:1px solid #e5e5e5; overflow-wrap:anywhere; }
.v-fit-summary[hidden] { display:none; }
.v-fit-summary strong { display:block; font-size:14px; line-height:1.5; }
.v-fit-summary p { margin:8px 0 0; font-size:12px; line-height:1.6; }

/* Two component selection uses existing typography and form controls. */
.v-finish-pair{margin:20px 24px;padding:16px 0;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.v-pair-toggle{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer}
.v-pair-toggle input{accent-color:#111;width:18px;height:18px;flex-shrink:0}
.v-pair-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.v-pair-fields .v-field{min-width:0}.v-pair-fields select{max-width:100%;width:100%}
.v-finish-pair .v-note{margin:14px 0 0}.v-finish-part{display:block;margin-bottom:8px;color:#777;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.v-project-finish-in+.v-project-finish-in{margin-top:22px}
.v-config.has-pending-price .v-total{align-items:flex-start;gap:12px}
.v-config.has-pending-price .v-total b{font-size:18px;max-width:65%;text-align:right;line-height:1.4}
@media(max-width:600px){.v-pair-fields{grid-template-columns:1fr}}

.v-project-finish .v-finish-details{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}

/* Component swatches in wheel albums reuse the established gallery styles. */
.v-wheel-album-finishes{padding-top:36px;padding-bottom:36px}
.v-wheel-album-finishes .v-project-finish{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;width:100%;max-width:none}
.v-wheel-album-finishes .v-project-finish h2{grid-column:1/-1;margin:0;font-size:24px}
.v-wheel-album-finishes .v-project-finish-in+.v-project-finish-in{margin-top:0}
@media(max-width:600px){.v-wheel-album-finishes .v-project-finish{grid-template-columns:1fr}}

.v-ctmap.v-ctmap--static {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 4vw, 56px);
	height: auto;
	padding: clamp(20px, 4vw, 56px) var(--pad);
}
.v-ctmap--static .v-ctmap-image { display: block; max-width: 100%; }
.v-ctmap--static .v-ctmap-image img { display: block; max-width: 100%; height: auto; }
.v-ctmap--static .v-ctmap-card { position: static; transform: none; max-width: min(380px, 100%); border: 1px solid var(--line); }
.v-ctmap--static .v-ctmap-link { display: inline-block; margin-top: 12px; text-decoration: underline; }