/*
 * MJ Outlet — skin layer (лёгкий редизайн).
 *
 * Отдельный слой поверх dist/assets/main-*.css: собранный CSS почти целиком
 * ходит через --vlt-* переменные, поэтому смена палитры и шрифтов делается
 * здесь, без пересборки Vite (dist содержит ручные патчи, которые сборка
 * из src затрёт). Подключается в inc/enqueue.php после vlt-main-style.
 *
 * Что меняем: палитра (paper/espresso/bronze вместо white/olive),
 * пара шрифтов (Playfair Display + Archivo вместо Bebas Neue + DM Sans),
 * метрики заголовков (сериф шире Bebas — режем размеры и трекинг),
 * размеры/начертания мелкой типографики, мягкие скругления.
 */

/* ---------------------------------------------------------------- tokens */

:root {
	/* палитра */
	--vlt-bg:            #FBF9F5;  /* paper */
	--vlt-bg-2:          #F2EDE3;
	--vlt-ink:           #221D18;  /* espresso */
	--vlt-dim:           #857B70;
	--vlt-dimmer:        #A79C90;
	--vlt-accent:        #8A6526;  /* bronze */
	--vlt-card:          #F2EDE3;
	--vlt-line:          #E3DCD0;

	/* акцент: в собранном CSS исторически называется olive */
	--vlt-olive:         #8A6526;
	--vlt-olive-h:       #A67C33;
	--vlt-dk:            #4A423A;

	--vlt-black:         #221D18;
	--vlt-white:         #FBF9F5;
	--vlt-cream:         #F2EDE3;
	--vlt-text:          #221D18;
	--vlt-text-mute:     #857B70;
	--vlt-text-mute-2:   #A79C90;
	--vlt-text-mute-3:   #C6BCAE;

	--vlt-line-strong:   #D2C8B8;
	--vlt-line-soft:     #EFE9DF;

	/* шрифты */
	--vlt-font-display:  'Playfair Display', 'Times New Roman', Georgia, serif;
	--vlt-font-body:     'Archivo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--vlt-font-mono:     var(--vlt-font-body);
	--vlt-font:          var(--vlt-font-body);

	/* мягкая геометрия вместо острых краёв */
	--vlt-radius:        3px;
	--vlt-nav-h:         58px;
}

/* ------------------------------------------------------- базовая подложка */

html,
body,
body.woocommerce,
.vlt-main {
	background: var(--vlt-bg);
	color: var(--vlt-ink);
}

body,
.site-header,
.site-footer,
.woocommerce,
.vlt-main {
	font-family: var(--vlt-font-body);
	letter-spacing: 0.005em;
}

body .site-header.vlt-header {
	background: rgba(251, 249, 245, 0.94);
	border-bottom: 1px solid var(--vlt-line);
}

/* ------------------------------------------------- дисплейная типографика */
/* Playfair шире и выше Bebas: убираем разрядку, поднимаем интерлиньяж,
   слегка режем кегли, чтобы длинные заголовки не ломали сетку. */

.vlt-main :is(h1, h2, h3, h4, h5, h6),
.vlt-display {
	font-family: var(--vlt-font-display);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.06;
}

.vlt-sec-head h2 {
	font-size: clamp(26px, 4vw, 42px);
	letter-spacing: 0.02em;
	line-height: 1.05;
	text-transform: none;
	font-weight: 600;
}

.vlt-nav__logo {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.vlt-info__title,
.vlt-pdp-main .vlt-info__title {
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-transform: none;
	font-weight: 600;
}

.vlt-cat-intro__title {
	font-size: clamp(20px, 2.6vw, 28px);
	letter-spacing: 0.02em;
	line-height: 1.15;
}

.vlt-ben__h {
	font-size: clamp(18px, 1.9vw, 24px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: none;
}

.vlt-about__n {
	font-size: clamp(28px, 3.2vw, 46px);
	letter-spacing: 0;
}

.vlt-about__stamp {
	letter-spacing: 0.02em;
}

.vlt-auth__header h2,
.dh-sg-header__brand,
.dh-sg-section-title {
	letter-spacing: 0.06em;
	line-height: 1.15;
}

.site-nav-panel .nav-panel-menu a {
	font-size: 34px;
	letter-spacing: 0.02em;
	text-transform: none;
	line-height: 1.25;
}

.vlt-gutenberg__inner :is(h1, h2, h3, h4, h5, h6) {
	letter-spacing: 0.01em;
	line-height: 1.2;
}

/* h5/h6 в шаблонах — это микро-лейблы 9–12px капсом с большим трекингом.
   Сериф на таком кегле не читается: возвращаем им body-шрифт. */
.vlt-main :is(h5, h6),
.vlt-authmini :is(h4, h5, h6),
.vlt-ben :is(h5, h6) {
	font-family: var(--vlt-font-body);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
}

/* Служебные «иконки-глифы» набраны дисплейным шрифтом — сериф там читается
   хуже, возвращаем им body-шрифт. */
.vlt-acc__icon,
.vlt-authmini__ic,
.vlt-auth__ic,
.vlt-delivery__ic,
.vlt-ben__no,
.vlt-sidebar__head .vlt-sidebar__close,
.mini-cart-panel__close,
.site-nav-panel__close {
	font-family: var(--vlt-font-body);
	font-weight: 600;
}

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

.vlt-eyebrow,
.vlt-kicker {
	letter-spacing: 0.22em;
	font-weight: 700;
}

.vlt-nav__links {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.vlt-card__title {
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.vlt-card__price,
.vlt-info__price,
.woocommerce-Price-amount {
	font-family: var(--vlt-font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.vlt-card__mark {
	font-family: var(--vlt-font-display);
	color: #E4DCCE;
	letter-spacing: 0;
}

.vlt-acc__body p,
.vlt-acc__body ul,
.vlt-acc__body li {
	font-size: 14px;
	line-height: 1.75;
}

.vlt-gutenberg__inner p,
.vlt-gutenberg__inner li {
	font-size: 15.5px;
	line-height: 1.8;
}

/* ------------------------------------------------------------- элементы */

.vlt-btn {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	padding: 14px 30px;
	border-width: 1px;
	border-radius: var(--vlt-radius);
}

.vlt-btn--solid {
	background: var(--vlt-ink);
	color: var(--vlt-bg);
	border-color: var(--vlt-ink);
}

.vlt-btn--solid:hover,
.vlt-btn--ghost:hover,
.vlt-btn--dark:hover {
	background: var(--vlt-olive);
	border-color: var(--vlt-olive);
	color: #FFFDF8;
}

.vlt-card__media,
.vlt-card__img,
.vlt-cat__media,
.vlt-hero__media {
	border-radius: var(--vlt-radius);
	overflow: hidden;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
select,
textarea {
	border-radius: var(--vlt-radius);
	font-family: var(--vlt-font-body);
}

::selection {
	background: var(--vlt-olive);
	color: #FFFDF8;
}

/* ------------------------------ Сайдбар: категории как навигация */
/* Не фасет, а плоский список ссылок на архивы дочерних категорий.
   .vlt-fg__body в теме раскладывает содержимое в строку — здесь
   принудительно возвращаем колонку, иначе пункты идут в ряд. */

.vlt-fg--cats .vlt-fg__body {
	display: block;
}

.vlt-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

.vlt-cats > li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vlt-cats > li + li {
	margin-top: 2px;
}

.vlt-cats__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--vlt-dk);
	text-decoration: none;
	transition: color .18s;
}

.vlt-cats__link:hover {
	color: var(--vlt-olive);
}

.vlt-cats__link.is-active {
	color: var(--vlt-olive);
	font-weight: 600;
}

.vlt-cats__count {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--vlt-text-mute-2);
	font-variant-numeric: tabular-nums;
}

.vlt-cats__link.is-active .vlt-cats__count {
	color: var(--vlt-olive);
}

/* --------------------------------- Каталог: шапка на узких экранах */
/* Заголовок занимает всю первую строку (иначе делил её с Sort/Filter и
   рвался на два слова), сортировка и фильтр уходят на вторую. */

@media (max-width: 900px) {
	.vlt-page-head {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 14px;
		padding-bottom: 8px;
	}

	.vlt-page-head__title {
		flex: 1 0 100%;
		min-width: 0;
		font-size: clamp(24px, 6.4vw, 34px);
		line-height: 1.05;
	}

	.vlt-page-head__right {
		flex: 1 0 100%;
		gap: 10px;
	}

	/* Sort и Filter делят строку ровно пополам. flex: 1 1 0 здесь не давал
	   равенства (кнопка тянулась по содержимому), поэтому ширину задаём явно:
	   половина строки минус половина зазора в 10px. */
	.vlt-sortdd {
		flex: 0 0 auto;
		width: calc(50% - 5px);
		min-width: 0;
	}

	.vlt-sortdd__btn {
		width: 100%;
		justify-content: space-between;
	}

	.vlt-filter-btn {
		flex: 0 0 auto;
		width: calc(50% - 5px);
		min-width: 0;
	}

	/* Sort и Filter стояли рядом с разной высотой (36 против 38.5 — разные
	   паддинги и кегль). Задаём общую высоту и центрируем содержимое
	   вертикальными паддингами, чтобы кегль на неё не влиял. */
	.vlt-sortdd__btn,
	.vlt-filter-btn {
		box-sizing: border-box;
		min-height: 42px;
		padding-top: 0;
		padding-bottom: 0;
		align-items: center;
	}

	/* Иконка-шестерня убрана из шаблона — центрируем оставшуюся надпись. */
	.vlt-filter-btn {
		justify-content: center;
		gap: 0;
	}
}

/* ------------------------- Мобильная панель фильтров: кнопка Apply */
/* Фильтры применяются сразу при клике, поэтому Apply просто закрывает
   панель (обработчик [data-vlt-sidebar-close] уже есть в скрипте). */

.vlt-sidebar__actions {
	display: none;
}

@media (max-width: 900px) {
	/* прижимаем блок с кнопкой к низу панели */
	.vlt-sidebar.is-open {
		display: flex;
		flex-direction: column;
		/* Высота по ВИДИМОЙ области: при inset: 0 панель тянулась на большой
		   viewport (с раскрытой адресной строкой), и её низ вместе с липкой
		   кнопкой уезжал под браузерный интерфейс — «Reset filters» оказывался
		   наполовину под Apply. */
		bottom: auto;
		height: 100dvh;
	}

	.vlt-sidebar.is-open .vlt-filters {
		flex: 1 1 auto;
	}

	.vlt-sidebar__actions {
		display: block;
		position: sticky;
		bottom: 0;
		z-index: 5;
		margin-top: auto;
		/* Нижний margin гасит padding панели (24px), иначе под липкой кнопкой
		   оставалась полоса, сквозь которую просвечивал конец списка. */
		margin: 0 -16px -24px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--vlt-bg);
		border-top: 1px solid var(--vlt-line);
	}

	.vlt-sidebar__apply {
		width: 100%;
		justify-content: center;
	}

	/* Место под липкую кнопку: она висит поверх конца списка, и 8px не
	   хватало — «Reset filters» уезжал под неё. Резервируем её высоту
	   (~73px) плюс запас. */
	.vlt-sidebar.is-open .vlt-filters {
		padding-bottom: 92px;
	}
}

/* ------------------------------------- PDP: отступ до «You May Also Like» */

.vlt-pdp__inner {
	padding-bottom: 28px;
}

.vlt-related {
	padding-top: 6px;
}

.vlt-related .vlt-sec-head {
	padding-top: 28px;
}

/* ------------------------------------- PDP: блок гарантий — списком */
/* Было три колонки с центрированным текстом по 9px. Делаем вертикальный
   список: иконка слева, заголовок и подпись справа, читаемые кегли. */

.vlt-authmini {
	grid-template-columns: 1fr;
	margin-top: 22px;
}

.vlt-authmini > div {
	display: grid;
	grid-template-columns: 30px 1fr;
	align-items: center;
	column-gap: 14px;
	padding: 13px 16px;
	text-align: left;
	border-right: 0;
	border-bottom: 1px solid var(--vlt-line);
}

.vlt-authmini > div:last-child {
	border-bottom: 0;
}

.vlt-authmini__ic {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 30px;
	height: 30px;
	margin: 0;
	font-size: 15px;
}

.vlt-authmini h5 {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.12em;
}

.vlt-authmini p {
	grid-column: 2;
	grid-row: 2;
	margin: 2px 0 0;
	font-size: 12.5px;
}

/* ------------------------------------------------- фасет цвета: свотчи */
/* Вместо вертикального списка «точка + подпись» — компактная сетка кружков.
   Название остаётся в title/aria-label, а выбранные цвета и так видны
   чипами над выдачей. */

.vlt-fg[data-grp='color'] .vlt-fg__body {
	display: grid;
	grid-template-columns: repeat(auto-fill, 26px);
	justify-content: start;
	align-items: center;
	gap: 14px;
	/* У .vlt-fg__body overflow: hidden, а кольцо выбранного свотча выходит на
	   3px за круг — без внутреннего отступа его срезало по левому краю сетки.
	   Отступ ровно в толщину кольца: внешняя граница свотча встаёт по краю
	   сайдбара, как остальной контент. Отрицательный margin тут не годится —
	   у сайдбара нет левого паддинга, ряд вылезал за его границу. */
	padding: 8px 3px 10px;
}

.vlt-fopt--color {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	gap: 0;
	border: 0;
	cursor: pointer;
	line-height: 0;
	font-size: 0;
}

.vlt-fopt--color .vlt-fopt__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* У светлых цветов шаблон дорисовывает inline-бордер — из-за него кружок
   получался крупнее соседей. Гасим его и рисуем обводку тенью, одинаковой
   для всех свотчей. */
.vlt-fopt--color .vlt-fopt__dot {
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	margin: 0;
	flex: 0 0 auto;
	border: 0 !important;
	border-radius: 50%;
	background-size: cover;
	background-position: 50% 50%;
	box-shadow: inset 0 0 0 1px rgba(34, 29, 24, 0.14), 0 0 0 1px var(--vlt-line-strong);
	transition: box-shadow .18s ease, transform .18s ease;
}

.vlt-fopt--color:hover .vlt-fopt__dot {
	box-shadow: inset 0 0 0 1px rgba(34, 29, 24, 0.14), 0 0 0 1px var(--vlt-dim);
}

.vlt-fopt--color.is-active .vlt-fopt__dot,
.vlt-fopt--color:has(input:checked) .vlt-fopt__dot {
	box-shadow: inset 0 0 0 1px rgba(34, 29, 24, 0.14), 0 0 0 2px var(--vlt-bg), 0 0 0 3px var(--vlt-ink);
}

/* Только клавиатурный фокус: после клика мышью чекбокс остаётся
   сфокусированным, и обычный :focus-within оставлял кольцо висеть — читалось
   как «подсветка не снимается». */
.vlt-fopt--color:has(input:focus-visible) .vlt-fopt__dot {
	box-shadow: inset 0 0 0 1px rgba(34, 29, 24, 0.14), 0 0 0 2px var(--vlt-bg), 0 0 0 3px var(--vlt-olive);
}

/* ------------------------------------------- горизонтальный скролл прочь */
/* Ручки price-слайдера уходят за край трека (transform: translate(-50%)),
   а у .vlt-fg__body включён overflow-y: auto — из-за пары появлялась
   боковая прокрутка внутри панели фильтров. */

.vlt-fg__body {
	overflow-x: clip;
}

.vlt-price__track {
	margin-left: 10px;
	margin-right: 10px;
}

html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/* ------------------------------------------ чип активного фильтра: крестик */
/* Глиф × в родительском стиле — просто текст с line-height: 1. Центрировать
   его флексом бесполезно: по вертикали выравнивается строка, а сама «чернильная»
   часть символа у Archivo сидит выше середины em-квадрата. Поэтому глиф
   прячем и рисуем крест двумя палочками — он центрируется геометрически. */

.vlt-chip--filter .vlt-chip__close {
	position: relative;
	display: inline-flex;
	width: 16px;
	height: 16px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: var(--vlt-dim);
}

.vlt-chip--filter .vlt-chip__close::before,
.vlt-chip--filter .vlt-chip__close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 1.4px;
	background: currentColor;
	border-radius: 1px;
}

.vlt-chip--filter .vlt-chip__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.vlt-chip--filter .vlt-chip__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ------------------------- Открытая шторка фильтров: блокировка скролла */
/* Скрипт вешает body.vlt-no-scroll (overflow: hidden), но выше мы задали
   html { overflow-x: clip } ради горизонтального скролла — из-за этого html
   перестал быть «visible» и overflow с body больше не пробрасывается на
   вьюпорт: страница продолжала скроллиться под шторкой. Гасим на html. */

html:has(body.vlt-no-scroll),
html:has(body.vlt-panel-open),
html:has(body.vlt-zoom-open),
html:has(body.dh-sg-open) {
	overflow-y: hidden;
}

/* ---------------------------------- Контентные страницы (.mo): ховер кнопок */
/* Разметка и стили этих страниц лежат в контенте (инлайн <style> в блоке),
   ховер там завязан на свою переменную --verify: #2F6B4B — зелёный, чужой для
   нашей палитры. Перебиваем именно ховер кнопок на бронзовый акцент темы;
   остальные применения --verify (галочки, бейджи) не трогаем.
   Специфичность выше исходной (body + два класса), поэтому инлайн-стиль
   страницы не перекрывает. */

body .mo .mo-btn:hover,
body .mo .mo-btn:focus-visible,
body .mo .mo-btn-dark:hover,
body .mo .mo-btn-dark:focus-visible {
	background: var(--vlt-olive);
	border-color: var(--vlt-olive);
	color: #FFFDF8;
}

/* ------------------------- Статичные страницы: воздух перед футером */
/* У .vlt-page-blank (контентные страницы — контакты, политики) низ контента
   упирался в футер: между ними был только его собственный margin-top 48px, и
   тёмный CTA-блок читался как часть подвала. */

body.vlt-blank .site-main.vlt-page-blank {
	padding-bottom: 72px;
}

@media (max-width: 900px) {
	body.vlt-blank .site-main.vlt-page-blank {
		padding-bottom: 44px;
	}
}

/* ------------------------- Статичные страницы: воздух под хедером */
/* Контент начинался вплотную к нижней границе шапки — кикер «CUSTOMER CARE»
   почти прилипал к меню. Отступ даём самой main, а не блокам в контенте:
   разметка страниц лежит в БД и у каждой свои обёртки. */

body.vlt-blank .site-main.vlt-page-blank {
	padding-top: 40px;
}

@media (max-width: 900px) {
	body.vlt-blank .site-main.vlt-page-blank {
		padding-top: 24px;
	}
}

/* --------------------- Статичные страницы (.mo): зелёный → бронза темы */
/* Стили этих страниц лежат в контенте и красят акценты своей переменной
   --verify: #2F6B4B (плюс подложка --verify-soft) — зелёный, чужой для нашей
   палитры. Перебиваем сами переменные в том же скоупе: так меняются все
   применения разом — рамки заметок, ссылки, галочки, кнопки — и на страницах,
   которые появятся позже. */

body .mo {
	--verify: var(--vlt-olive, #8A6526);
	--verify-soft: var(--vlt-cream, #F2EDE3);
}

/* ------------------- Статичные страницы (.mo): фон и адаптив */
/* Фон страниц был чисто белый (--paper: #FFFFFF) — рядом с бумажным фоном
   сайта это читалось как чужая вставка. Красим через их же переменные, чтобы
   заодно попали карточки и подложки блоков. */

body .mo {
	--paper: var(--vlt-bg, #FBF9F5);
	--sand: var(--vlt-bg-2, #F2EDE3);
	--sand-2: var(--vlt-cream, #F2EDE3);
	--line: var(--vlt-line, #E3DCD0);
	--line-soft: var(--vlt-line-soft, #EFE9DF);
}

/* На узких экранах страница уезжала вбок (~1930px вместо 390). Их мобильное
   правило делает колонку `1fr`, а у такой дорожки автоминимум равен
   min-content содержимого — оглавление с длинными чипами растягивало её,
   и следом всю страницу. minmax(0, 1fr) снимает этот минимум. */

@media (max-width: 920px) {
	body .mo .mo-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	body .mo .mo-toc,
	body .mo .mo-doc {
		min-width: 0;
		max-width: 100%;
	}
}

/* ================= Выезжающее меню: как на статичных страницах ============ */
/* Было: тёмно-коричневая подложка, основные пункты сериф Playfair, вторичные —
   Archivo. Приводим к языку статичных страниц: светлый фон и Manrope
   (её же тянет CSS тех страниц, а глобально шрифт добавлен в inc/enqueue.php). */

.site-nav-panel__content {
	background: var(--vlt-bg);
	color: var(--vlt-ink);
}

.site-nav-panel .nav-panel-menu a,
.site-nav-panel .nav-panel-menu--secondary a {
	font-family: 'Manrope', var(--vlt-font-body);
}

.site-nav-panel .nav-panel-menu a {
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--vlt-ink);
}

.site-nav-panel .nav-panel-menu--secondary a {
	font-weight: 600;
	color: var(--vlt-dim);
}

.site-nav-panel .nav-panel-menu a:hover,
.site-nav-panel .nav-panel-menu--secondary a:hover {
	color: var(--vlt-olive);
}

/* Кнопка закрытия и прочая мелочь панели были рассчитаны на тёмный фон. */
.site-nav-panel__close,
.site-nav-panel .site-nav-panel__foot,
.site-nav-panel a {
	color: var(--vlt-ink);
}

/* =============== Шторка фильтров: кнопка Apply всегда у низа ============== */
/* Sticky зависела от того, где заканчивается прокрутка, и кнопка всплывала
   посреди списка. Делаем классическую схему: скроллится только список
   фильтров, а блок с кнопкой — обычный последний элемент колонки, то есть
   всегда прижат к низу панели. */

@media (max-width: 900px) {
	.vlt-sidebar.is-open {
		overflow: hidden; /* прокручивается внутренний список, не вся панель */
	}

	.vlt-sidebar.is-open .vlt-filters {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		/* поля панели гасим, чтобы полоса прокрутки шла по краю */
		margin-inline: -16px;
		padding-inline: 16px;
		padding-bottom: 16px;
	}

	.vlt-sidebar__actions {
		position: static;
		flex: 0 0 auto;
	}

	/* Заголовок «Filter & Sort» и крестик — в одну линию по центру строки.
	   У .vlt-grp-title свой margin-bottom: 12px (он рассчитан на заголовок
	   группы фильтров), и при align-items: center флекс центрирует margin-box —
	   текст уезжал на 6px вверх относительно крестика. */
	.vlt-sidebar.is-open .vlt-sidebar__head .vlt-grp-title {
		margin: 0;
	}

	.vlt-sidebar.is-open .vlt-sidebar__head {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 32px;
		margin-bottom: 14px;
	}

	/* Крестик рисуем теми же тонкими палочками, что и знаки +/− у групп —
	   жирный текстовый глиф × выбивался из строя шапки. */
	.vlt-sidebar.is-open .vlt-sidebar__close {
		position: relative;
		display: inline-flex;
		width: 32px;
		height: 32px;
		padding: 0;
		margin: 0 -6px 0 0;
		font-size: 0;
		line-height: 0;
		color: var(--vlt-ink);
	}

	.vlt-sidebar.is-open .vlt-sidebar__close::before,
	.vlt-sidebar.is-open .vlt-sidebar__close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 1.4px;
		background: currentColor;
	}

	.vlt-sidebar.is-open .vlt-sidebar__close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.vlt-sidebar.is-open .vlt-sidebar__close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}

/* Вторичные пункты (сервисные страницы) — вдвое мельче основных и плотнее:
   в скине правило `.nav-panel-menu a { font-size: 34px }` цепляло и их, из-за
   чего «Contact Us» шёл тем же кеглем, что «Crossbody». */

.site-nav-panel .nav-panel-menu--secondary {
	margin-top: 18px;
	gap: 0;
}

.site-nav-panel .nav-panel-menu--secondary a {
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: 0;
	padding: 5px 0;
}

/* ------------------- Группы фильтров: заголовок и знак +/− в линию */
/* Знак — текстовый глиф 14px: у «−» вся «краска» сидит на середине кегля, у
   «+» — выше, поэтому при любом выравнивании флексом он не совпадал с
   капителью заголовка. Прячем глиф и рисуем палочки от геометрического центра. */

.vlt-fg__head .vlt-fg__toggle {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	font-size: 0;
	line-height: 0;
	color: var(--vlt-dim);
}

.vlt-fg__head .vlt-fg__toggle::before,
.vlt-fg.is-collapsed .vlt-fg__head .vlt-fg__toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.4px;
	background: currentColor;
	/* -1px: капитель заголовка сидит выше середины строки, и знак на точном
	   геометрическом центре читался как «съехавший вниз». */
	transform: translate(-50%, calc(-50% - 1px));
}

/* «+» — та же палочка, повёрнутая: рисуем только у свёрнутой группы. */
.vlt-fg.is-collapsed .vlt-fg__head .vlt-fg__toggle::after {
	transform: translate(-50%, calc(-50% - 1px)) rotate(90deg);
}

/* Свёрнутая группа цвета показывала полоску свотчей: max-height: 0 обнуляет
   только контент, а свои 8px/10px паддинга (добавлены ради кольца выбранного
   свотча) остаются, и overflow режет по padding-box. Гасим их на время. */
.vlt-fg.is-collapsed[data-grp='color'] .vlt-fg__body {
	padding-top: 0;
	padding-bottom: 0;
}

/* ------------------------------ Мини-корзина: счётчик количества */
/* Кнопки −/+ были залиты холодно-серым #E3E4E8 (чужой для палитры), а сам
   блок стоял на чистом белом. Убираем заливку кнопок и собираем счётчик в
   одну рамку на бумажном фоне. */

.mini-cart-panel .quantity {
	background: var(--vlt-bg);
	border: 1px solid var(--vlt-line);
	border-radius: var(--vlt-radius);
	overflow: hidden;
}

.mini-cart-panel .quantity .quantity-button {
	background: transparent;
	color: var(--vlt-ink);
	transition: background .18s, color .18s;
}

.mini-cart-panel .quantity .quantity-button:hover {
	background: var(--vlt-bg-2);
	color: var(--vlt-olive);
}

/* ------------------------------------------- PDP: кнопка «Buy It Now» */
/* Второстепенное действие рядом с чёрной Add To Cart — поэтому контурная:
   та же геометрия, но фон бумажный, заливка приходит на ховер. */

.vlt-atc--buy {
	background: transparent;
	color: var(--vlt-ink);
	border-color: var(--vlt-ink);
	margin-top: 10px;
}

.vlt-atc--buy:hover {
	background: var(--vlt-ink);
	color: var(--vlt-bg);
}

.vlt-atc--buy:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ------------------- PDP «You May Also Like»: 4 товара в ряд, два ряда */
/* Сетка --8 растягивала восемь карточек в 6–8 колонок, и товары выходили
   мелкими. Оставляем те же восемь позиций, но раскладываем 4 × 2. */

.vlt-related .vlt-grid--8 {
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(10px, 1.4vw, 22px);
}

@media (max-width: 900px) {
	.vlt-related .vlt-grid--8 {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* --------------------------- Карточка товара: цена по нижнему краю */
/* Название занимает то одну строку, то две, и цена в соседних карточках ряда
   вставала на разной высоте. Тянем карточку на всю высоту ячейки грида и
   прижимаем цену к низу — тогда в ряду цены всегда на одной линии. */

.vlt-grid .vlt-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.vlt-grid .vlt-card__meta {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.vlt-grid .vlt-card__pr {
	margin-top: auto;
	padding-top: 6px;
}

/* -------------------------------- PDP: кнопки Add To Cart / Buy It Now */
/* У .vlt-atc-row не оказалось стилей в собранном CSS: строка была блочной, а
   кнопка вишлиста — инлайновой и нулевой высоты, из-за чего под Add To Cart
   висела пустая строка ~24px и разрыв до Buy It Now читался как провал. */

.vlt-atc-row {
	display: flex;
	align-items: stretch;
	/* Без зазора: кнопка вишлиста в этой сборке нулевой ширины, и gap просто
	   срезал 10px у Add To Cart — она выходила уже, чем Buy It Now. */
	gap: 0;
}

.vlt-atc-row .vlt-atc--full {
	flex: 1 1 auto;
}

.vlt-atc-row .vlt-atc-wish {
	flex: 0 0 auto;
	align-self: center;
}

/* ------------------------------ PDP: иконки оплаты в одну строку на моб */
/* Семь логотипов по 46px не влезали в 390px и переносились на вторую строку —
   даём им ужиматься поровну. */

@media (max-width: 600px) {
	.sp-secure__icons {
		flex-wrap: nowrap;
		align-items: center; /* gpay ниже прочих — иначе висит на своей высоте */
		gap: 6px;
	}

	.sp-secure__icons .sp-secure__icon {
		flex: 1 1 0;
		min-width: 0;
		max-width: 46px;
	}

	.sp-secure__icons .sp-secure__icon :is(img, svg) {
		width: 100%;
		height: auto;
	}
}

/* --------------------------------------- Главная: CTA героя — белая кнопка */
/* Тёмная плашка на светлом фото сливалась с сумками на снимке; белая читается
   и на светлых, и на тёмных участках кадра. */

.vlt-hero__cta .vlt-btn--solid {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--vlt-ink);
}

.vlt-hero__cta .vlt-btn--solid:hover {
	background: var(--vlt-ink);
	border-color: var(--vlt-ink);
	color: #FFFFFF;
}

/* ------------------------- Каталог: дропдаун сортировки по ширине кнопки */
/* У меню фиксированный min-width: 210px и привязка к правому краю — на узкой
   кнопке оно вылезало за неё и висело со сдвигом. */

.vlt-sortdd__menu {
	left: 0;
	right: 0;
	min-width: 0;
	width: 100%;
}

/* --------------- PDP: расстояние между блоками рекомендаций поменьше */
/* У каждой секции padding-bottom: 80px, и между «You May Also Like» и
   «Recently Viewed» набегала пустая полоса почти в экран высотой. */

.vlt-related {
	padding-bottom: 44px;
}

@media (max-width: 900px) {
	.vlt-related {
		padding-bottom: 28px;
	}
}

/* ----------------------------- Карточка: название в одну строку */
/* Длинные названия («The Snapshot DTM Convertible Shoulder Bag») занимали две
   строки, и цена в соседних карточках вставала на разной высоте. Режем до одной
   строки с многоточием — высота блока становится одинаковой у всех карточек. */

.vlt-card__nm {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 0;
}

/* ----------------------------- Хедер: мобильный режим до 1043px */
/* В бандле бургер включался только на ≤680px, а меню из 7 пунктов уже на
   ~1040px переползало в две строки и рвало высоту шапки. Поднимаем порог:
   ниже 1043px — бургер + панель, десктопные ссылки скрыты. */

@media (max-width: 1043px) {
	.vlt-nav__links {
		display: none;
	}

	.vlt-nav__acc {
		display: none;
	}

	.vlt-nav__burger {
		display: flex;
	}

	#site-header > nav .vlt-nav__logo {
		margin-right: auto;
	}
}

/* ----------------------------- PayPal Pay Later: блок как на mark */
/* Портировал вид попапа с проекта mark (gucci-child): у каждой опции синий
   бейдж-плашка и строка с суммой — «Pay in 4» показывает конкретные цифры
   (цена / 4, считает paylater.js от текущей цены варианта). */

.vlt-paylater-modal__option-badge {
	display: inline-block;
	background: #003087;
	color: #fff;
	font-family: var(--vlt-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	padding: 5px 10px;
	border-radius: 4px;
	text-transform: none;
}

.vlt-paylater-modal__option-amount {
	font-family: var(--vlt-font-body);
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.35;
	margin: 11px 0 4px;
}