/*
 * Coach — green / camel skin layer (гамма статичных страниц).
 *
 * Отдельный слой поверх dist/assets/main-*.css: собранный CSS почти целиком
 * ходит через --vlt-* переменные, поэтому смена палитры и шрифтов делается
 * здесь, без пересборки Vite (dist содержит ручные патчи, которые сборка
 * из src затрёт). Подключается в inc/enqueue.php после vlt-main-style.
 *
 * Что меняем: палитра (чистый чёрный + белый, тёплые нейтрали),
 * пара шрифтов (Bodoni Moda — вордмарк/заголовки, Inter — интерфейс),
 * шапка: логотип по центру, меню строкой ниже, на главной прозрачная
 * поверх hero, на остальных страницах белая; футер чёрный.
 */

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

:root {
	/* палитра */
	/* гамма статичных страниц (.cbx в контенте): тёмно-зелёный, кэмел,
	   холодный светло-серый фон; белый остаётся основной подложкой */
	--vlt-bg:            #FFFFFF;
	--vlt-bg-2:          #EEF1EF;
	--vlt-ink:           #1A2421;
	--vlt-dim:           #5F6D68;
	--vlt-dimmer:        #85938E;
	--vlt-accent:        #1E3530;
	--vlt-card:          #EEF1EF;
	--vlt-line:          #DDE3E0;

	/* акцент: в собранном CSS исторически называется olive */
	--vlt-olive:         #1E3530;
	--vlt-olive-h:       #294640;
	--vlt-dk:            #152723;

	/* второй акцент — кэмел, как кикеры и цифры на статичных страницах */
	--vlt-camel:         #C8955A;
	--vlt-green-2:       #294640;
	--vlt-on-green:      #EEF3F0;
	--vlt-on-green-mute: #A9BDB6;

	--vlt-black:         #1E3530;
	--vlt-white:         #FFFFFF;
	--vlt-cream:         #EEF1EF;
	--vlt-text:          #1A2421;
	--vlt-text-mute:     #5F6D68;
	--vlt-text-mute-2:   #85938E;
	--vlt-text-mute-3:   #B3BDB9;

	--vlt-line-strong:   #C5CFCB;
	--vlt-line-soft:     #E8ECEA;

	/* распродажа/скидка — единственный цветной акцент */
	--vlt-sale:          #C8102E;

	/* шрифты */
	--vlt-font-display:  'Bodoni Moda', 'Didot', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--vlt-font-body:     'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--vlt-font-mono:     var(--vlt-font-body);
	--vlt-font:          var(--vlt-font-body);

	/* острая геометрия Coach */
	--vlt-radius:        0px;
	--vlt-nav-h:         auto;
}

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

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;
}

/* --------------------------------------------------------------- шапка */
/* Раскладка Coach: логотип по центру, иконки справа, меню отдельной строкой
   под ними. Делаем гридом по существующей разметке — четыре прямых потомка
   .vlt-nav раскладываются по областям, PHP и JS не трогаем. */

body .site-header.vlt-header .vlt-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"left  logo  icons"
		"links links links";
	align-items: center;
	height: auto;
	gap: 0;
	padding-top: 20px;
	padding-bottom: 0;
}

/* Бургер и поле поиска делят левую ячейку: на десктопе виден поиск,
   на мобильном — бургер, одновременно они не показываются. */
body .site-header.vlt-header .vlt-nav__burger,
body .site-header.vlt-header .vlt-nav__searchbar {
	grid-area: left;
	justify-self: start;
}

/* Поле поиска слева: подпись + лупа на общей линии, клик открывает попап. */
body .site-header.vlt-header .vlt-nav__searchbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: min(260px, 24vw);
	padding: 0 2px 7px;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
	cursor: pointer;
}

body .site-header.vlt-header .vlt-nav__searchbar-label {
	font-family: var(--vlt-font-display);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.1;
}

body .site-header.vlt-header .vlt-nav__searchbar svg {
	width: 19px;
	height: 19px;
	display: block;
	flex-shrink: 0;
}

body .site-header.vlt-header .vlt-nav__searchbar:hover {
	opacity: 0.7;
}

/* На десктопе иконка поиска справа не нужна — её роль играет поле слева. */
body .site-header.vlt-header .vlt-nav__icons .vlt-nav__search {
	display: none;
}

body .site-header.vlt-header .vlt-nav__logo {
	grid-area: logo;
	justify-self: center;
}

body .site-header.vlt-header .vlt-nav__icons {
	grid-area: icons;
	justify-self: end;
}

body .site-header.vlt-header .vlt-nav__links {
	grid-area: links;
	justify-self: center;
	gap: 34px;
	padding: 22px 0 16px;
}

/* Белая шапка на всех страницах, кроме главной. */
body .site-header.vlt-header {
	background: #FFFFFF;
	border-bottom: 1px solid var(--vlt-line);
	color: var(--vlt-ink);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body .site-header.vlt-header :is(
	.vlt-nav__logo,
	.vlt-nav__links a,
	.vlt-nav__icon,
	.vlt-nav__acc,
	.vlt-nav__wishlist,
	.vlt-nav__search,
	.vlt-nav__searchbar
) {
	color: var(--vlt-ink);
}

body .site-header.vlt-header .vlt-nav__logo-mark,
body .site-header.vlt-header .vlt-nav__links a::after,
body .site-header.vlt-header .vlt-nav__burger span {
	background: var(--vlt-ink);
}

/* Подчёркивание активного пункта — как в меню Coach. */
body .site-header.vlt-header .vlt-nav__links a::after {
	height: 1px;
	bottom: -3px;
}

body .site-header.vlt-header .vlt-nav__bag {
	background: var(--vlt-ink);
	color: #FFFFFF;
}

body .site-header.vlt-header .vlt-nav__bag:hover {
	background: var(--vlt-olive-h);
	opacity: 1;
}

/* На главной шапка прозрачная и накладывается на первый hero,
   не забирая у него высоту. */
body.home .site-header.vlt-header {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Тёмный скрим под прозрачной шапкой: страхует читаемость белого меню,
   если верх hero окажется светлым. */
body.home .site-header.vlt-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: -1;
}

body.home .site-header.vlt-header :is(
	.vlt-nav__logo,
	.vlt-nav__links a,
	.vlt-nav__icon,
	.vlt-nav__acc,
	.vlt-nav__wishlist,
	.vlt-nav__search,
	.vlt-nav__searchbar
) {
	color: #FFFFFF;
}

/* Фолбэк, когда светлый логотип не задан в кастомайзере: одноцветную
   монограмму делаем белой фильтром (см. header.php). */
body.home .site-header.vlt-header .vlt-nav__logo-img--to-white {
	filter: brightness(0) invert(1);
}

body.home .site-header.vlt-header .vlt-nav__logo-mark,
body.home .site-header.vlt-header .vlt-nav__links a::after,
body.home .site-header.vlt-header .vlt-nav__burger span {
	background: #FFFFFF;
}

body.home .site-header.vlt-header .vlt-nav__bag {
	background: #FFFFFF;
	color: var(--vlt-ink);
}

body.home .site-header.vlt-header .vlt-nav__bag:hover {
	background: #F5F3F0;
}

/* Корзина открывается двумя путями: обычным toggle и после AJAX-добавления.
   Во втором случае body-класс может не ставиться, поэтому следим за самой
   открытой панелью и фиксируем шапку относительно viewport. */
body:has(.mini-cart-panel.is-open) .site-header.vlt-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
}

/* Тёмное мобильное меню продолжает визуальный язык футера. */
.site-nav-panel__content {
	background: var(--vlt-olive);
	color: #FFFFFF;
}

.site-nav-panel .nav-panel-menu a,
.site-nav-panel .nav-panel-menu--secondary a,
.site-nav-panel__close,
.site-nav-panel .site-nav-panel__foot,
.site-nav-panel a {
	color: #FFFFFF;
}

.site-nav-panel .nav-panel-menu a:hover,
.site-nav-panel .nav-panel-menu--secondary a:hover {
	color: #FFFFFF;
	opacity: 0.72;
}

/* Футер: тёмно-зелёная подложка (как hero статичных страниц) и светлая
   типографика во всех уровнях. */
body .site-footer.vlt-foot {
	background: var(--vlt-olive);
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.18);
}

body .site-footer.vlt-foot .vlt-foot__row {
	padding-top: 34px;
	padding-bottom: 34px;
}

body .site-footer.vlt-foot .vlt-foot__links a {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body .site-footer.vlt-foot .vlt-foot__links a:hover {
	opacity: 0.7;
}

body .site-footer.vlt-foot :is(
	.vlt-foot__brand,
	.vlt-foot__about,
	.vlt-foot__h,
	.vlt-foot__link,
	.vlt-foot__links a,
	.vlt-foot__disclaimer,
	.vlt-foot__copy,
	a,
	p
) {
	color: #FFFFFF;
}

body .site-footer.vlt-foot :is(.vlt-foot__disclaimer, .vlt-foot__row) {
	border-color: rgba(255, 255, 255, 0.18);
}

body .site-footer.vlt-foot .vlt-foot__copy {
	color: rgba(255, 255, 255, 0.62);
	font-size: 11px;
	letter-spacing: 0.1em;
}

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

.vlt-main :is(h1, h2, h3, h4, h5, h6),
.vlt-display {
	font-family: var(--vlt-font-display);
	font-weight: 400;
	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: 400;
}

/* Вордмарк: крупный дидон-сериф капсом, как COACH. */
.vlt-nav__logo {
	font-family: var(--vlt-font-display);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.vlt-nav__logo img {
	max-height: 44px;
}

.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: 400;
}

.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: 400;
}

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

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

.vlt-nav__links {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
}

.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;
}

/* Цена со скидкой — красным: в чёрно-белой палитре это единственный цветной
   акцент, как на витрине Coach. */
.vlt-card__pr ins,
.vlt-info__price ins {
	color: var(--vlt-sale);
}

.vlt-card__mark {
	font-family: var(--vlt-font-display);
	color: var(--vlt-line, #E3E0DC);
	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: #FFFFFF;
}

.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: #FFFFFF;
}

/* ------------------------------ Сайдбар: категории как навигация */
/* Не фасет, а плоский список ссылок на архивы дочерних категорий.
   .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: 0;
	background-size: cover;
	background-position: 50% 50%;
	box-shadow: inset 0 0 0 1px rgba(11, 35, 64, 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(11, 35, 64, 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(11, 35, 64, 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(11, 35, 64, 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. Центрировать
   его флексом бесполезно: по вертикали выравнивается строка, а сама «чернильная»
   часть символа у шрифта сидит выше середины 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-zoom-open),
html:has(body.dh-sg-open) {
	overflow-y: hidden;
}

/* Mini-cart блокирует прокрутку через body.vlt-panel-open. Не переносим
   overflow на html: это меняет containing block и срывает sticky-хедер. */
html:has(body.vlt-panel-open) {
	overflow-y: visible;
}

/* ---------------------------------- Контентные страницы (.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: #FFFFFF;
}

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

/* Отменено: контент статичных страниц (.cbx) сам держит серый фон и
   внутренние поля, а белые полосы main и margin футера вокруг него читались
   как разрыв. Серый блок встаёт вплотную к шапке и футеру. */
body.vlt-blank .site-main.vlt-page-blank {
	padding-bottom: 0;
}

body.vlt-blank .site-footer.vlt-foot {
	margin-top: 0;
}

/* autop оставляет пустой <p> после блока — 16px белой полосы над футером. */
body.vlt-blank .site-main.vlt-page-blank > p:empty {
	display: none;
}

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

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

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

body .mo {
	--verify: var(--vlt-olive, #1E3530);
	--verify-soft: var(--vlt-cream, #EEF1EF);
}

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

body .mo {
	--paper: var(--vlt-bg, #FFFFFF);
	--sand: var(--vlt-bg-2, #F5F3F0);
	--sand-2: var(--vlt-cream, #F5F3F0);
	--line: var(--vlt-line, #E3E0DC);
	--line-soft: var(--vlt-line-soft, #F1EEEA);
}

/* Политики используют собственные переменные в контенте. Повышенная
   специфичность удерживает общую black/white палитру даже при позднем inline CSS. */
body .tob-doc {
	--navy: var(--vlt-olive);
	--ink: var(--vlt-ink);
	--muted: var(--vlt-dim);
	--line: var(--vlt-line);
	--paper: #FFFFFF;
	--shell: var(--vlt-cream);
	--gold: var(--vlt-camel);
	--serif: 'Bodoni Moda', 'Didot', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* На узких экранах страница уезжала вбок (~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%;
	}
}

/* ================= Выезжающее меню: типографика ========================== */

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

.site-nav-panel .nav-panel-menu a {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-nav-panel .nav-panel-menu--secondary a {
	font-weight: 600;
}

/* =============== Шторка фильтров: кнопка 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 */
/* Две строки: сверху Add To Cart во всю ширину, снизу Buy It Now и справа от
   неё квадратная кнопка вишлиста. Раскладываем гридом с явными строками —
   в разметке вишлист стоит между кнопками, и на поток полагаться нельзя. */

.vlt-atc-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	margin-top: 24px;
	align-items: stretch;
}

/* Распроданный цвет: PHP и pdp-color.js прячут строку кнопок атрибутом
   [hidden], но display:grid выше перебивает display:none из UA-стилей — и
   Add To Cart / Buy It Now оставались видны рядом с блоком «Notify me».
   Возвращаем атрибуту силу. */
.vlt-atc-row[hidden] {
	display: none;
}

/* Собственный margin-top у .vlt-atc--full (28px) и добавка WooCommerce к
   .single_add_to_cart_button разъезжались, из-за чего кнопки стояли на разной
   высоте. Обнуляем отступы, высоту задаём паддингом. */
.vlt-atc-row .vlt-atc--full {
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 15px 16px;
	font-size: 14px;
	letter-spacing: 1.8px;
	line-height: 1.2;
}

.vlt-atc-row .single_add_to_cart_button {
	grid-column: 1 / -1;
	grid-row: 1;
}

.vlt-atc-row .vlt-atc--buy {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
}

.vlt-atc-row .vlt-atc-wish {
	grid-column: 2;
	grid-row: 2;
	width: 52px;
	min-width: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--vlt-line-strong);
	color: var(--vlt-ink);
	cursor: pointer;
	padding: 0;
	transition: 0.18s;
}

.vlt-atc-row .vlt-atc-wish svg {
	width: 20px;
	height: 20px;
	display: block;
}

.vlt-atc-row .vlt-atc-wish:hover {
	border-color: var(--vlt-ink);
}

.vlt-atc-row .vlt-atc-wish.is-active svg,
.vlt-atc-row .vlt-atc-wish[aria-pressed="true"] svg {
	fill: var(--vlt-ink);
}

/* Sold Out: кнопки Buy It Now нет — вишлист занимает всю вторую строку. */
.vlt-atc-row:not(:has(.vlt-atc--buy)) .vlt-atc-wish {
	grid-column: 1 / -1;
	width: 100%;
}

/* ------------------------------ 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;
	}

	/* Логотип остаётся по центру и на мобильном: auto-margin в гриде
	   перебивает justify-self, поэтому гасим его явно. */
	#site-header > nav .vlt-nav__logo {
		margin-right: 0;
	}

	/* Строка меню скрыта — возвращаем шапке нижний отступ. */
	body .site-header.vlt-header .vlt-nav {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/* Слева на мобильном стоит бургер — поле поиска убираем,
	   вместо него возвращаем иконку-лупу в правую группу. */
	body .site-header.vlt-header .vlt-nav__searchbar {
		display: none;
	}

	body .site-header.vlt-header .vlt-nav__icons .vlt-nav__search {
		display: inline-flex;
	}
}

/* ----------------------------- 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;
}

/* ------------- PDP: Pay Later + карты + trust-строка (порт блока с mark) */
/* Три блока под кнопками покупки переехали на вёрстку gucci-child: сообщение
   PayPal с двухцветным вордмарком, ряд карточных бейджей по центру и три
   обещания в рамке с линейными иконками (вместо глифов ✓/→/⇄). */

.vlt-paylater {
	margin: 14px 0 0;
}

.vlt-paylater .vlt-paylater__row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	font-family: var(--vlt-font-body);
	font-size: 12px;
	letter-spacing: 0.03em;
	line-height: 1.35;
	color: var(--vlt-text-mute);
}

.vlt-paylater__mark {
	height: 15px;
	width: auto;
	flex-shrink: 0;
}

.vlt-paylater__brand {
	font-weight: 700;
	font-style: italic;
	margin-right: 1px;
}

.vlt-paylater__brand .vlt-pp-a { color: #003087; }
.vlt-paylater__brand .vlt-pp-b { color: #0070e0; }

.vlt-paylater__learn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.vlt-paylater__learn:hover { color: #0070e0; }

/* принятые карты */
.vlt-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 10px 0 0;
}

/* Класс .vlt-pay в собранном dist-CSS — это текстовый бейдж с рамкой и
   паддингом; для карточных SVG рамка не нужна, гасим её. */
.vlt-payments .vlt-pay {
	display: inline-flex;
	line-height: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.vlt-payments .vlt-pay svg {
	display: block;
	width: 34px;
	height: 34px;
}

/* три обещания */
.vlt-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 28px;
	border: 1px solid var(--vlt-line);
}

.vlt-trust__i {
	padding: 18px 14px;
	text-align: center;
	border-right: 1px solid var(--vlt-line);
}

.vlt-trust__i:last-child { border-right: 0; }

.vlt-trust__i svg {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto 9px;
	fill: none;
	stroke: var(--vlt-ink);
	stroke-width: 1.5;
}

.vlt-trust__i b {
	display: block;
	font-family: var(--vlt-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vlt-ink);
	margin-bottom: 3px;
}

.vlt-trust__i span {
	font-family: var(--vlt-font-body);
	font-size: 11px;
	line-height: 1.4;
	color: var(--vlt-text-mute);
}

/* На узком экране три колонки сжимаются в нечитаемые столбики — переводим
   в список: иконка слева, заголовок и подпись справа. */
@media (max-width: 900px) {
	.vlt-trust { grid-template-columns: 1fr; }

	.vlt-trust__i {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 12px;
		row-gap: 2px;
		text-align: left;
		padding: 14px 18px;
		border-right: 0;
		border-bottom: 1px solid var(--vlt-line);
	}

	.vlt-trust__i:last-child { border-bottom: 0; }

	.vlt-trust__i svg {
		margin: 0;
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: center;
	}

	.vlt-trust__i b,
	.vlt-trust__i span { grid-column: 2; }

	.vlt-trust__i b { margin-bottom: 0; }
}

/* ------------------------------- PDP: обещания списком вместо трёх плиток */
/* Три колонки в рамке съедали много высоты и на десктопе, и на мобильном.
   Тот же контент — пунктами: иконка, заголовок и пояснение в одной строке.
   Флекс, а не грид: заголовок и пояснение — отдельные элементы разметки,
   в одной грид-ячейке они легли бы друг на друга. */

body .vlt-trust.vlt-trust--list {
	display: block;
	border: 0;
	margin-top: 22px;
	padding: 0;
}

body .vlt-trust--list .vlt-trust__i {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 2px;
	text-align: left;
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--vlt-line-soft);
}

body .vlt-trust--list .vlt-trust__i:last-child {
	border-bottom: 0;
}

body .vlt-trust--list .vlt-trust__i svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
}

body .vlt-trust--list .vlt-trust__i b {
	display: inline-block;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vlt-ink);
}

body .vlt-trust--list .vlt-trust__i span {
	display: inline-block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--vlt-text-mute);
}

/* Точка-разделитель между заголовком и пояснением. */
body .vlt-trust--list .vlt-trust__i b::after {
	content: "·";
	margin-left: 10px;
	color: var(--vlt-text-mute-2);
	font-weight: 400;
}

/* ------------------------------------ PDP: срок доставки над кнопкой ATC */

.vlt-atc-eta {
	margin-top: 22px;
	font-family: var(--vlt-font-body);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	color: var(--vlt-text-mute);
}

/* Класс темы .single-product__shipping нужен только её JS (подставляет дату);
   её правило body.single-product .single-product__shipping гасим. */
body.single-product .vlt-atc-eta.single-product__shipping {
	display: block;
	margin-top: 22px;
	padding: 0;
	border: 0;
}

body.single-product .vlt-atc-eta[hidden] {
	display: none;
}

.vlt-atc-eta b {
	font-weight: 600;
	color: var(--vlt-ink);
}

/* Зазор между строкой доставки и кнопками покупки. */
.vlt-atc-eta + .vlt-atc-row {
	margin-top: 22px;
}

@media (max-width: 600px) {
	.vlt-payments { gap: 2px; }
	.vlt-payments .vlt-pay svg { width: 30px; height: 30px; }
}

/* ------------------------- PDP: мобильный sticky-бар покупки (порт с mark) */
/* Выезжает снизу, когда строка Add To Cart / Buy It Now ушла из вьюпорта
   (assets/pdp-sticky.js). На десктопе не нужен — кнопки и так в поле зрения. */

.vlt-pdp-sticky {
	display: none;
}

@media (max-width: 900px) {
	.vlt-pdp-sticky {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		background: var(--vlt-bg);
		border-top: 1px solid var(--vlt-line);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform 0.28s ease;
		box-shadow: 0 -6px 24px rgba(11, 35, 64, 0.08);
	}

	.vlt-pdp-sticky.is-visible {
		transform: translateY(0);
	}

	.vlt-pdp-sticky__inner {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.vlt-pdp-sticky__thumb {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		overflow: hidden;
		background: var(--vlt-card);
	}

	.vlt-pdp-sticky__thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.vlt-pdp-sticky__info {
		flex: 1 1 auto;
		min-width: 0;
	}

	.vlt-pdp-sticky__name {
		display: block;
		font-family: var(--vlt-font-body);
		font-size: 12px;
		color: var(--vlt-ink);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.vlt-pdp-sticky__price {
		display: block;
		font-family: var(--vlt-font-body);
		font-size: 14px;
		font-weight: 600;
		color: var(--vlt-ink);
		line-height: 1.3;
	}

	.vlt-pdp-sticky__price :is(del, s) {
		font-size: 12px;
		font-weight: 400;
		color: var(--vlt-text-mute);
		margin-left: 6px;
	}

	.vlt-pdp-sticky__price ins {
		text-decoration: none;
		background: transparent;
	}

	.vlt-pdp-sticky__btn {
		flex: 0 0 auto;
		background: var(--vlt-ink);
		color: #FFFFFF;
		border: 2px solid var(--vlt-ink);
		font-family: var(--vlt-font-body);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		padding: 13px 18px;
		white-space: nowrap;
		cursor: pointer;
	}

	.vlt-pdp-sticky__btn:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}

	/* Распродано: кнопка живая — уводит к форме подписки back-in-stock. */
	.vlt-pdp-sticky__btn.is-notify {
		background: transparent;
		color: var(--vlt-ink);
		opacity: 1;
		cursor: pointer;
	}

	/* Бар перекрывает низ страницы — освобождаем место под ним. */
	body.single-product .site-footer {
		padding-bottom: 78px;
	}
}

/* ------------------------ Открытая корзина / меню: страница не скроллится */
/* В сборке есть только `body.vlt-panel-open { overflow: hidden }`, а на мобиле
   прокручивается html — фон продолжал ехать под панелью. Плюс мини-корзину
   открывает ещё и AJAX-добавление, где body-класс может не проставиться:
   поэтому ловим и сами открытые панели через :has(). */

html.mini-cart-open,
html:has(body.vlt-panel-open),
html:has(.mini-cart-panel.is-open),
html:has(.site-nav-panel.is-open) {
	overflow: hidden;
}

html.mini-cart-open body,
body.vlt-panel-open,
body:has(.mini-cart-panel.is-open),
body:has(.site-nav-panel.is-open) {
	overflow: hidden;
}

/* Докрутив список внутри панели до конца, дальше тянули страницу под ней. */
.mini-cart-panel,
.mini-cart-panel__content,
.site-nav-panel,
.site-nav-panel__content {
	overscroll-behavior: contain;
}

/* PDP-бар покупки не должен висеть поверх открытой панели. */
body:has(.mini-cart-panel.is-open) .vlt-pdp-sticky,
body:has(.site-nav-panel.is-open) .vlt-pdp-sticky,
body.vlt-panel-open .vlt-pdp-sticky {
	transform: translateY(100%);
}

/* ------------------ Мобильные фильтры: кнопка Apply всегда в поле зрения */
/* Панель раскрывается на `height: 100dvh`. Если браузер dvh не понимает
   (Safari до 15.4, старый Android WebView), правило отбрасывается целиком,
   высота становится auto — панель тянется по контенту, и блок с Apply
   оказывается ниже экрана, а у самой панели overflow: hidden, так что
   докрутить до кнопки нельзя. Даём vh-фолбэк перед dvh. */

@media (max-width: 900px) {
	.vlt-sidebar.is-open {
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
	}

	/* Список фильтров забирает остаток высоты и скроллится сам, блок с
	   кнопкой не сжимается и остаётся прижатым к низу панели. */
	.vlt-sidebar.is-open .vlt-filters {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	.vlt-sidebar.is-open .vlt-sidebar__actions {
		display: block;
		flex: 0 0 auto;
	}
}

/* ------------------- Статические страницы (.tob-doc): блок «Questions» */
/* Стили этих страниц лежат инлайном в контенте (БД), и там два правила бьются
   друг с другом:
   .tob-support p  { max-width: 460px; margin: 0 auto }  ← центрирует абзацы
   .tob-support .tob-eyebrow { margin: 0 0 18px }        ← сбрасывает auto
   Из-за второго «QUESTIONS» с шириной 460px прижимался влево, а у строки с
   почтой правило для p (специфичнее) съедало верхний отступ, и она липла к
   кнопке. Перебиваем обоих, добавив body в селектор. */

body .tob-doc .tob-support .tob-eyebrow {
	margin-left: auto;
	margin-right: auto;
}

body .tob-doc .tob-support .tob-support-mail {
	margin-top: 30px;
}

/* ---------- Статические страницы (.cc-page): заголовки и текст во всю ширину */
/* Вёрстка этих страниц лежит в контенте (БД) со своим CSS. Там шапка секции —
   грид «220px под надзаголовок + заголовок», поэтому заголовок вставал в
   правую колонку узкой строкой и переносился в две. Сам текст ограничен
   660–720px и занимал половину полосы.
   Ставим шапку в две строки (надзаголовок → заголовок) и снимаем лимиты
   ширины с текстовых блоков. */

.cc-page .cc-sec-hd-inner {
	grid-template-columns: 1fr;
	gap: 10px;
}

/* Отступ сверху был нужен для выравнивания с заголовком в соседней колонке. */
.cc-page .cc-tag {
	padding-top: 0;
}

.cc-page .cc-psec,
.cc-page .cc-p,
.cc-page .cc-box,
.cc-page .cc-table {
	max-width: none;
}

/* Всё содержимое — одной колонкой по левому краю заголовков. Блок .cc-two был
   гридом в две колонки и вдобавок добавлял свой боковой отступ поверх отступа
   .cc-sec-body — текст уезжал на 64px правее заголовка. */
.cc-page .cc-sec-body .cc-two {
	grid-template-columns: 1fr;
	gap: 0;
	padding-left: 0;
	padding-right: 0;
}

/* ------- Те же страницы внутри модалок чекаута (Refund/Shipping/…) */
/* На чекауте контент страниц политик рендерится в .modal__text шириной ~800px,
   а блок «Questions» свёрстан на всю ширину экрана
   (left: 50%; width: 100vw; margin: 0 -50vw). Внутри модалки это вылезало за
   её границы тёмным прямоугольником и давало горизонтальный скролл.
   Внутри модалки гасим full-bleed и возвращаем блок в поток. */
.modal__text .tob-doc .tob-support {
	left: auto;
	right: auto;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* Страховка от любых других full-bleed-вставок в контенте политик. */
.modal__text {
	overflow-x: hidden;
}

/* ---------------------------- PDP: крошки в размер каталожных */
/* В собранном CSS у PDP свой стиль крошек — 11.5px капсом и bold, из-за чего
   строка выглядела заголовком и переносилась в две. Приводим к каталожным
   метрикам (.vlt-crumbs): 12px, обычное начертание, без капса. */

.vlt-pdp__crumbs,
.vlt-pdp__crumbs a,
.vlt-pdp__crumbs .vlt-crumbs__sep {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.3px;
	text-transform: none;
}

/* ------------- Каталог и PDP: боковые поля контейнеров 5px (мобайл) */
/* Только до 900px: на десктопе поля остаются на var(--vlt-pad-x), то есть
   каталог и карточка товара стоят по той же линии, что шапка и футер. */

@media (max-width: 900px) {
	.vlt-catalog-main .vlt-crumbs,
	.vlt-catalog-main .vlt-page-head,
	.vlt-catalog-main .vlt-catalog__inner,
	.vlt-catalog-main .vlt-cat-intro__inner,
	.vlt-catalog-main .vlt-cat-seo__inner,
	.vlt-pdp-main .vlt-pdp__crumbs,
	.vlt-pdp-main .vlt-pdp__inner,
	.vlt-pdp-main .vlt-related {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* ------------------------------- Подложка под фото товара: светло-серая */
/* У поставщика предметная съёмка на белом — на белой карточке товар терялся.
   Серая плашка #f0f0f0 очерчивает кадр (так же выглядит витрина Coach). */

body .gc-card .gc-card__image-wrap,
body .gc-card .gc-card-swiper .swiper-slide,
body .gc-card__slide-link,
body .vlt-card__ph,
body .vlt-sdd__card-img {
	background: #f0f0f0;
}

body .vlt-gallery--grid .vlt-gallery__cell {
	background-color: #f0f0f0;
}

/* --------------------------------------- PDP: выбор цвета вариации */

.vlt-selector-color .vlt-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vlt-cswatch {
	width: 38px;
	height: 38px;
	padding: 3px;
	background: none;
	border: 1px solid var(--vlt-line);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.vlt-cswatch__dot {
	display: block;
	width: 100%;
	height: 100%;
}

.vlt-cswatch:hover {
	border-color: var(--vlt-text-mute);
}

.vlt-cswatch.is-active {
	border-color: var(--vlt-ink);
	box-shadow: 0 0 0 1px var(--vlt-ink);
}

/* Нет в наличии — гасим и перечёркиваем. */
.vlt-cswatch.is-disabled {
	opacity: 0.45;
	cursor: default;
	position: relative;
}

.vlt-cswatch.is-disabled::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 1px;
	background: var(--vlt-ink);
	transform: rotate(-45deg);
}

/* Свотч-фото вариации: квадрат — как остальные чипы выбора (размеры),
   иначе вытянутая плитка выбивается из ряда. */
.vlt-cswatch--thumb {
	width: 52px;
	height: 52px;
	padding: 0;
	background: #fff;
}

.vlt-cswatch__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Распроданный цвет: гасим фото; диагональ рисует общее правило is-disabled. */
.vlt-cswatch--thumb.is-disabled .vlt-cswatch__thumb {
	opacity: 0.55;
}

@media (max-width: 767px) {
	.vlt-cswatch--thumb {
		width: 48px;
		height: 48px;
	}
}

/* --------------------------- PDP: подписка на возврат (Notify me) */
/* Бокс приехал с mark со скруглениями и своей типографикой. Приводим к
   геометрии магазина: блок занимает ту же ширину, что кнопки покупки,
   которые он заменяет, поле и кнопка — одной высоты с Add To Cart. */

body .vale-bis {
	width: 100%;
	margin-top: 22px;
	padding: 0;
	background: none;
	border: 0;
}

body .vale-bis__head {
	display: block;
	margin-bottom: 12px;
	font-family: var(--vlt-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--vlt-text-mute);
}

body .vale-bis__title {
	display: inline;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--vlt-ink);
}

body .vale-bis__sub {
	color: var(--vlt-text-mute);
}

body .vale-bis__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: stretch;
}

body .vale-bis__email {
	height: auto;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--vlt-line-strong);
	border-radius: 0;
	background: #FFFFFF;
	font-family: var(--vlt-font-body);
	font-size: 14px;
	color: var(--vlt-ink);
}

body .vale-bis__email::placeholder {
	color: var(--vlt-text-mute-2);
}

body .vale-bis__email:focus {
	outline: none;
	border-color: var(--vlt-ink);
}

body .vale-bis__btn {
	height: auto;
	min-height: 52px;
	padding: 14px 30px;
	border: 1px solid var(--vlt-ink);
	border-radius: 0;
	background: var(--vlt-ink);
	color: #FFFFFF;
	font-family: var(--vlt-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: 0.18s;
}

body .vale-bis__btn:hover:not(:disabled) {
	background: #FFFFFF;
	color: var(--vlt-ink);
}

body .vale-bis__msg {
	margin-top: 10px;
	font-family: var(--vlt-font-body);
	font-size: 12.5px;
	color: var(--vlt-text-mute);
}

/* Узкий экран: кнопка под полем, обе во всю ширину. */
@media (max-width: 520px) {
	body .vale-bis__form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============ Десктоп: выпадающие подкатегории в шапке ==================== */
/* Порт с tory. .vlt-nav__links раскладывает пункты флексом, поэтому вложенный
   ul без позиционирования растекался бы по строке. Возвращаем ему блок и
   вешаем под пунктом. */

.vlt-nav__links > li {
	position: relative;
}

.vlt-nav__links .sub-menu {
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 6px);
	min-width: 210px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 60;
}

.vlt-nav__links > li:hover > .sub-menu,
.vlt-nav__links > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Пункты подменю — обычный текст, а не капс верхнего уровня. */
body .site-header.vlt-header .vlt-nav__links .sub-menu a {
	display: block;
	padding: 7px 18px;
	color: var(--vlt-ink);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
}

body .site-header.vlt-header .vlt-nav__links .sub-menu a:hover {
	color: var(--vlt-ink);
	background: #F5F3F0;
}

/* Подчёркивание — фича верхнего уровня. */
.vlt-nav__links .sub-menu a::after {
	display: none;
}

/* Мостик между пунктом и выпадашкой: без него курсор проскакивает зазор
   и меню закрывается на полпути. */
.vlt-nav__links > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 10px;
}

/* На главной шапка прозрачная и меню белое — выпадашка остаётся светлой,
   поэтому её пункты красим отдельно. */
body.home .site-header.vlt-header .vlt-nav__links .sub-menu a {
	color: var(--vlt-ink);
}

/* ============ Мобильное меню: подпункты ================================== */

/* У закрытого .sub-menu margin-top действует даже при max-height: 0 и давал
   лишний зазор между пунктами. Отступ появляется только в раскрытом виде. */
.site-nav-panel .nav-panel-menu .sub-menu {
	margin-top: 0;
}

.site-nav-panel .nav-panel-menu .sub-menu.is-open {
	margin-top: 8px;
	margin-bottom: 6px;
}

/* «View all …» — первый пункт раскрытого списка, добавляет nav-submenu.js. */
.site-nav-panel .nav-panel-menu__all > a {
	font-weight: 600;
}

/* ---- Стрелка у пунктов с подменю ---- */
/* Мобильная панель: кнопка от родителя есть, но её галочка нарисована рамкой
   нулевой ширины и цветом тёмного текста — на чёрной панели её попросту не
   видно. Рисуем свою: белая, у правого края, с тап-таргетом 44px. */

.site-nav-panel .nav-panel-menu > li.menu-item-has-children {
	position: relative;
}

/* Селектор длиннее, чем у родителя (.nav-panel-menu .menu-item-has-children
   .nav-panel-menu__sub-toggle), иначе его 16×16 перебивает наш размер. */
.site-nav-panel .nav-panel-menu .menu-item-has-children .nav-panel-menu__sub-toggle {
	position: static;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin: 0 0 0 2px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-nav-panel .nav-panel-menu .menu-item-has-children .nav-panel-menu__sub-toggle::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border: 2px solid #FFFFFF;
	border-left: 0;
	border-top: 0;
	transform: rotate(45deg);
	transition: transform 0.18s ease, margin-top 0.18s ease;
}

.site-nav-panel .nav-panel-menu > li.is-open.menu-item-has-children > .nav-panel-menu__sub-toggle::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

/* Десктоп: галочка справа от пункта — подсказка, что есть выпадающий список.
   Рисуем на ::before у <li>: ::after там занят «мостиком» до выпадашки,
   а a::after — подчёркиванием пункта. */
.vlt-nav__links > li.menu-item-has-children {
	padding-right: 13px;
}

.vlt-nav__links > li.menu-item-has-children::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	border: 1.5px solid currentColor;
	border-left: 0;
	border-top: 0;
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.18s ease;
	pointer-events: none;
}

.vlt-nav__links > li.menu-item-has-children:hover::before {
	transform: translateY(-30%) rotate(-135deg);
}

/* На главной шапка прозрачная и меню белое, но галочка рисуется на <li>, а не
   на ссылке — currentColor у него остаётся тёмным. Красим явно. */
body.home .site-header.vlt-header .vlt-nav__links > li.menu-item-has-children::before {
	border-color: #FFFFFF;
}

/* ===================================================================
 * МОБИЛЬНЫЙ ДРОВЕР МЕНЮ (порт из tory).
 *
 * В бандле панель раскрывается на весь экран (inset:0; width:100%,
 * выезд сверху), а подложка прозрачная — сайт под меню не читается и
 * непонятно, куда нажать, чтобы закрыть. Здесь: узкая панель слева,
 * затемнённый фон справа (по нему же закрывается), структура из
 * шапки / прокручиваемого тела с секциями / подвала.
 * =================================================================== */

.site-nav-panel__overlay {
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .32s ease;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.site-nav-panel.is-open .site-nav-panel__overlay { opacity: 1; }

.site-nav-panel .site-nav-panel__content {
	inset: 0 auto 0 0;
	width: min(340px, 86vw);
	max-width: 86vw;
	height: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	box-shadow: 0 0 40px rgba(0, 0, 0, .45);
}

.site-nav-panel.is-open .site-nav-panel__content { transform: none; }

/* ── шапка дровера ── */
.site-nav-panel .vlt-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	margin: 0;
	flex: none;
}

.vlt-drawer__logo img {
	width: 58px;
	max-width: 58px;
	height: auto;
	display: block;
	/* Логотип тёмный на прозрачном — на чёрной панели красим в белый. */
	filter: brightness(0) invert(1);
}

.vlt-drawer__logo span {
	font-family: var(--vlt-font-display);
	font-size: 17px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.site-nav-panel .site-nav-panel__close {
	font-size: 26px;
	line-height: 1;
	padding: 4px 6px;
}

/* ── тело со скроллом ── */
.vlt-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 20px 20px;
}

.vlt-drawer__sec + .vlt-drawer__sec {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.vlt-drawer__lbl {
	display: block;
	margin: 18px 0 6px;
	font-family: var(--vlt-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.vlt-drawer__sec + .vlt-drawer__sec .vlt-drawer__lbl { margin-top: 0; }

/* Меню внутри секции: отступы задаёт секция, поэтому сбрасываем те,
   что бандл ставил для полноэкранного варианта. */
.site-nav-panel .vlt-drawer__sec .nav-panel-menu,
.site-nav-panel .vlt-drawer__sec .nav-panel-menu--secondary {
	margin-top: 0;
	gap: 0;
}

.site-nav-panel .vlt-drawer__sec .nav-panel-menu > li {
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.site-nav-panel .vlt-drawer__sec .nav-panel-menu > li:last-child { border-bottom: 0; }

.site-nav-panel .vlt-drawer__sec .nav-panel-menu a {
	font-size: 17px;
	font-weight: 500;
	padding: 12px 0;
	letter-spacing: 0;
	text-transform: none;
}

.site-nav-panel .vlt-drawer__sec .nav-panel-menu .sub-menu a {
	font-size: 14.5px;
	padding: 8px 0 8px 14px;
	opacity: .8;
}

.site-nav-panel .vlt-drawer__sec--info .nav-panel-menu a {
	font-size: 14px;
	font-weight: 400;
	padding: 9px 0;
	color: rgba(255, 255, 255, .72);
}

/* Пункт с подменю: ссылка и стрелка в одну строку, стрелка у правого края. */
.site-nav-panel .vlt-drawer__sec .nav-panel-menu > li.menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-nav-panel .vlt-drawer__sec .nav-panel-menu > li.menu-item-has-children > a {
	flex: 1 1 auto;
}

.site-nav-panel .vlt-drawer__sec .nav-panel-menu > li.menu-item-has-children > .sub-menu {
	flex: 0 0 100%;
}

/* ── подвал: быстрые ссылки ── */
.vlt-drawer__foot {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
}

.site-nav-panel .vlt-drawer__flink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	font-family: var(--vlt-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	text-decoration: none;
}

.vlt-drawer__flink svg {
	width: 17px;
	height: 17px;
	flex: none;
	stroke: currentColor;
	fill: none;
}

/* На планшете/десктопе (панель открывается только бургером) чуть шире. */
@media (min-width: 768px) {
	.site-nav-panel .site-nav-panel__content { width: min(380px, 60vw); }
}


/* ===================================================================
 * HERO — масштаб по макету (как в tory).
 *
 * Бандл рисует «мега-заголовок» (clamp(40px, 7vw, 92px)) — на широком
 * экране заголовок разваливался на три строки и съедал первый экран.
 * Здесь спокойнее: вдвое мельче, ровно две строки (перенос — <br> из ACF),
 * компактнее подпись и кнопки. Разметка не трогается.
 * =================================================================== */

.vlt-hero {
	height: min(74vh, 620px);
}

.vlt-hero__title {
	font-size: clamp(26px, 3.7vw, 52px);
	line-height: 1.06;
	max-width: none;
	text-wrap: balance;
}

.vlt-hero .vlt-kicker {
	margin-bottom: 14px;
	font-size: 11px;
}

.vlt-hero__sub {
	margin-top: 16px;
	max-width: 44ch;
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.55;
}

.vlt-hero__cta {
	margin-top: 22px;
	gap: 11px;
}

.vlt-hero__cta .vlt-btn {
	font-size: 11.5px;
	letter-spacing: 1.3px;
	padding: 13px 26px;
	border-width: 1.5px;
}

@media (max-width: 767px) {
	/* Первый экран во всю высоту: 90vh, на iOS — 90svh (без прыжков от
	   сворачивающейся адресной строки). */
	.vlt-hero { height: 90vh; }
	.vlt-hero__title { font-size: clamp(28px, 8vw, 40px); }
	.vlt-hero__cta .vlt-btn { padding: 12px 20px; font-size: 11px; }

	/* Текст с кнопками — внизу кадра, по центру. */
	.vlt-hero .vlt-hero__content {
		align-items: center;
		text-align: center;
		justify-content: flex-end;
		padding-top: 92px;
		padding-bottom: 40px;
	}

	/* Kicker — маленькая плашка в две строки, отдельно в левом верхнем углу
	   под шапкой (--vlt-nav-h = auto, calc с ней не работает, потому 92px).
	   Селектор с .vlt-hero__content — ниже по файлу лежит правило белой
	   плашки (.vlt-hero .vlt-kicker), оно перебивало max-width и padding. */
	.vlt-hero .vlt-hero__content .vlt-kicker {
		position: absolute;
		top: 92px;
		left: var(--vlt-pad-x-sm, 16px);
		max-width: 132px;
		padding: 7px 12px;
		font-size: 9px;
		letter-spacing: 1.2px;
		line-height: 1.45;
		text-align: left;
		white-space: normal;
		margin: 0;
	}

	.vlt-hero .vlt-hero__sub { margin-top: 12px; font-size: 14px; }
	.vlt-hero .vlt-hero__cta { margin-top: 20px; }

	.vlt-hero .vlt-hero__title,
	.vlt-hero .vlt-hero__sub {
		margin-left: auto;
		margin-right: auto;
	}

	.vlt-hero .vlt-hero__cta { justify-content: center; }
}

@media (max-width: 767px) {
	@supports (height: 90svh) {
		.vlt-hero { height: 90svh; }
	}
}

/* Кадр hero — 16:9 с головами у самого верха. При высоте 620px и центровке
   cover срезал макушки. На десктопе высота идёт по пропорции картинки
   (56.25vw), но не выше экрана; якорь фона — верх, поэтому если что и
   режется на низких экранах, то пол, а не головы. */
@media (min-width: 768px) {
	.vlt-hero {
		height: min(56.25vw, 100vh);
	}
}

.vlt-hero .vlt-hero__bg {
	background-position: center top;
}

/* ===================================================================
 * AUTHENTICITY STRIP — полоса под hero.
 *
 * В бандле она зажата по --vlt-max (пункты кучковались по центру, бока
 * пустовали), свёрстана под 4 колонки и глифы-символы, иконка стоит над
 * заголовком. Здесь: полоса от края до края, колонок столько, сколько
 * пунктов, линейные SVG-иконки слева от текста, кегли — как в tory.
 * На мобиле — одна колонка с центровкой (иконка над текстом).
 * =================================================================== */

/* Секция сама держала боковые поля 50px — гасим. */
.vlt-auth {
	padding: 0;
}

.vlt-auth .vlt-auth__inner {
	/* Колонок столько, сколько пунктов (число приходит из шаблона): жёсткие
	   4 и 2 из бандла оставляли «висящую» пятую ячейку. */
	grid-template-columns: repeat(var(--vlt-auth-cols, 4), 1fr);
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

.vlt-auth__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	align-content: center;
	padding: 22px clamp(12px, 1.3vw, 20px);
}

/* Позиции явные: на мобиле бандл гасит иконку (display:none), и при неявной
   раскладке заголовок уезжал в её колонку, а текст — в соседнюю. */
.vlt-auth .vlt-auth__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	border-radius: 0;
	line-height: 1;
	color: rgba(255, 255, 255, .92);
}

/* Бандл жмёт svg внутри .vlt-auth__ic до 14px и красит в оливковый —
   селектор берём с запасом по специфичности. */
.vlt-auth .vlt-auth__ic--svg .vlt-auth__svg {
	width: 24px;
	height: 24px;
	display: block;
	flex: none;
	fill: none;
	stroke: currentColor;
}

/* Заголовок — в одну строку: кегль и трекинг мельче, чем в бандле, иначе
   самый длинный пункт («What You See Is What You Get») рвётся на две. */
.vlt-auth .vlt-auth__item .vlt-auth__h {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--vlt-font-body);
	font-size: clamp(8.6px, 0.72vw, 10.5px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

.vlt-auth .vlt-auth__p {
	grid-column: 2;
	grid-row: 2;
	color: rgba(255, 255, 255, .62);
	font-size: 12px;
	line-height: 1.5;
	margin: 4px 0 0;
	max-width: none;
}

/* Планшет: в один ряд пять пунктов уже не читаются — две колонки, нечётный
   последний занимает обе (иначе «висящая» ячейка). */
@media (max-width: 1280px) {
	.vlt-auth .vlt-auth__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.vlt-auth__item {
		padding: 18px 16px;
		border-bottom: 1px solid var(--vlt-green-2);
	}

	.vlt-auth__item:nth-child(2n) {
		border-right: 0;
	}

	.vlt-auth__item:nth-child(odd):last-child {
		grid-column: 1 / -1;
		border-right: 0;
	}

	.vlt-auth__item:last-child,
	.vlt-auth__item:nth-last-child(2):nth-child(odd) {
		border-bottom: 0;
	}
}

/* Мобильный: по два пункта в ряд, иконка над текстом, всё по центру
   (иконка слева в колонке ~190px не оставляет места тексту). */
@media (max-width: 560px) {
	.vlt-auth .vlt-auth__inner {
		grid-template-columns: repeat(2, 1fr);
		text-align: center;
	}

	.vlt-auth__item {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 18px 12px;
		border-bottom: 1px solid var(--vlt-green-2);
	}

	/* Нечётный последний пункт занимает обе колонки — «висящей» ячейки нет. */
	.vlt-auth__item:nth-child(odd):last-child {
		grid-column: 1 / -1;
		border-right: 0;
	}

	.vlt-auth__item:last-child,
	.vlt-auth__item:nth-last-child(2):nth-child(odd) {
		border-bottom: 0;
	}

	.vlt-auth .vlt-auth__ic {
		grid-column: 1;
		grid-row: auto;
		margin-bottom: 8px;
	}

	.vlt-auth .vlt-auth__item .vlt-auth__h {
		grid-column: 1;
		grid-row: auto;
		font-size: 10px;
		letter-spacing: 0.12em;
		white-space: normal;
	}

	.vlt-auth .vlt-auth__p {
		grid-column: 1;
		grid-row: auto;
		font-size: 11.5px;
		max-width: 24ch;
		margin: 4px auto 0;
	}
}

/* ===================================================================
 * ВИШЛИСТ — пустое состояние с кнопкой в каталог + без мигания футера.
 * Шаблон родителя переопределён в page-wishlist.php.
 * =================================================================== */

/* Бандл задаёт .wishlist-page__footer{display:flex}, а это перебивает
   атрибут hidden: кнопки «Add all / Buy all» успевали мигнуть до того, как
   JS вишлиста навесит класс --hidden. */
.wishlist-page__footer[hidden] {
	display: none;
}

.wishlist-page__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	margin: 0 0 8px;
}

.wishlist-page__empty-text {
	color: var(--vlt-text-mute, #6b6f79);
	font-size: 15px;
	line-height: 1.6;
}

.wishlist-page__cta {
	display: inline-block;
	padding: 14px 30px;
	background: var(--vlt-black, #000);
	color: #fff;
	font-family: var(--vlt-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid var(--vlt-black, #000);
	transition: background .2s, color .2s;
}

.wishlist-page__cta:hover,
.wishlist-page__cta:focus {
	background: transparent;
	color: var(--vlt-black, #000);
}

@media (max-width: 767px) {
	.wishlist-page__empty { align-items: stretch; }
	.wishlist-page__cta { text-align: center; }
}

/* Каталог: пока сетка перезапрашивается (смена сортировки — assets/catalog-sort.js),
   гасим её и блокируем клики — видно, что запрос идёт. */
[data-vlt-grid-wrap].is-loading {
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* Купон: сообщение о пустом поле (assets/coupon-validate.js). */
.vlt-coupon-msg {
	margin-top: 8px;
	font-family: var(--vlt-font-body);
	font-size: 12.5px;
	line-height: 1.4;
	color: #b3261e;
}

.vlt-coupon-msg:empty { margin-top: 0; }

.vlt-coupon-input--error {
	border-color: #b3261e !important;
}


/* Hero: kicker — белая плашка с чёрным текстом (DESIGNER STYLE, READY FOR YOU). */
.vlt-hero .vlt-kicker {
	display: inline-block;
	width: max-content;
	max-width: 100%;
	padding: 9px 16px;
	background: var(--vlt-white, #fff);
	color: var(--vlt-black, #000);
	border: 0;
}

/* ------------------- Гамма статичных страниц: кэмел-акценты */
/* Как на /contact-us/: иконки и кикеры на зелёном — кэмел, текст на зелёном
   — светлый холодный вместо чисто белого. */

.vlt-auth .vlt-auth__ic {
	color: var(--vlt-camel);
}

.vlt-auth .vlt-auth__p {
	color: var(--vlt-on-green-mute);
}

body .site-footer.vlt-foot .vlt-foot__links a:hover {
	color: var(--vlt-camel);
	opacity: 1;
}

body .site-footer.vlt-foot .vlt-foot__copy {
	color: var(--vlt-on-green-mute);
}

/* Дисклеймер о товарном знаке — отдельной строкой во всю ширину под
   ссылками и копирайтом (ряд футера — flex с переносом). Селектор с p.,
   иначе общее правило футера для p красит его в чисто белый. */
body .site-footer.vlt-foot p.vlt-foot__legal {
	flex: 1 1 100%;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--vlt-font-body);
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--vlt-on-green-mute);
}

/* ------------------------------ Чекаут: единый радиус скруглений */
/* Стили чекаута собраны из разных файлов родителя, и радиусы разъехались:
   поля 6px, выбор адреса 5px, заметки 4px, купон 5px, карточка доставки 12px,
   а у customs clearance толстая левая полоса на скруглённом углу давала
   кривой край. Сводим всё к радиусу полей — 6px. */

body.woocommerce-checkout {
	--vlt-co-radius: 6px;
}

body.woocommerce-checkout #order_comments,
body.woocommerce-checkout :has(> button.apply_coupon) > input,
body.woocommerce-checkout button.apply_coupon,
body.woocommerce-checkout #shipping_method li > label {
	border-radius: var(--vlt-co-radius);
}

body.woocommerce-checkout .billing-variants > label:first-child > span {
	border-radius: var(--vlt-co-radius) var(--vlt-co-radius) 0 0;
}

body.woocommerce-checkout .billing-variants > label:last-child > span {
	border-radius: 0 0 var(--vlt-co-radius) var(--vlt-co-radius);
}

/* Customs clearance: ровная рамка по периметру вместо полосы слева,
   внутренняя плашка с галочкой — тонкой линией, как поля формы. */
/* Родитель скоупит блок по id (#customs-clearance) — перебиваем тем же id. */
body.woocommerce-checkout #customs-clearance {
	border: 1px solid #E3E3E3;
	border-radius: var(--vlt-co-radius);
}

body.woocommerce-checkout #customs-clearance .customs-clearance__check {
	border-width: 1px;
	border-radius: var(--vlt-co-radius);
}

body.woocommerce-checkout #customs-clearance .customs-clearance__box {
	border-radius: 3px;
}