/*
 * VM Beauty — дизайн слой.
 *
 * ПАЛИТРАТА И ТИПОГРАФИЯТА СА СНЕТИ ОТ МАКЕТА v3 (`design/v3.html`).
 * Всичко останало в темата чете тези токени, затова смяната им тук
 * пребоядисва целия сайт — точно както е искането.
 *
 * ПРАВИЛА (виж CLAUDE.md):
 * 1. Никакви hex стойности извън блока :root.
 * 2. Макетът ползва глобален `* { box-sizing: border-box }`, а GeneratePress
 *    НЯМА такъв. Затова е обявен изрично долу — без него радиусите и
 *    паддингите на v3 не се събират в колоните си.
 * 3. Специфичността в GP+Woo хапе през #content — там override-ите минават
 *    през ID, не през още класове.
 */

:root {
	/* ─ Синьо ─ */
	--vm-blue-500: #4E7BF0;   /* основното действие, линкове, акценти */
	--vm-blue-hover: #3A66D6; /* hover на линк/бутон (a:hover в макета) */
	--vm-blue-600: #2B4DA5;   /* второстепенно действие, брояч на количката */
	--vm-blue-700: #2D4496;
	--vm-blue-800: #2B3976;   /* лентата над хедъра */

	/* ─ Текст ─ */
	--vm-ink: #16233F;        /* основен текст и заглавия */
	--vm-ink-soft: #41506F;
	--vm-ink-2: #2E3A59;      /* текстът в тялото на статия (макет 22.08) */
	--vm-muted: #5A647D;      /* подзаглавия в хиро/секции */
	--vm-muted-2: #7581A0;
	--vm-muted-3: #8A93AC;
	--vm-muted-4: #9AA2B4;    /* марка над името, стара цена */
	--vm-note: #6B7A99;       /* служебният текст на Woo в резюмето */
	--vm-icon: #8794B3;

	/* ─ Повърхности ─ */
	--vm-surface: #FFFFFF;
	--vm-bg: #EDF2FB;         /* фонът на body в макета */
	--vm-bg-2: #EAF1FB;       /* редуващи се секции */
	--vm-tint: #EEF3FE;       /* бутон „Добави", таймер, меки петна */
	--vm-tint-2: #E7EEFE;     /* етикет над хиро заглавието */
	--vm-tint-3: #F4F7FD;     /* hover на иконите в хедъра */
	--vm-shade-1: #F2F5FC;    /* райето на плейсхолдър снимките */
	--vm-shade-2: #EAEFF9;

	/* ─ Линии ─ */
	--vm-line: #E0E6F2;       /* рамки на полета и бутони */
	--vm-line-soft: #EEF2FA;  /* рамка на продуктова карта */
	--vm-line-card: #E9EDF5;  /* рамка на категорийна карта */
	--vm-line-head: #E6ECF7;  /* долната линия на хедъра */
	--vm-line-strong: #BCD0F6;/* рамка при hover */
	--vm-on-dark: #CDD7F5;    /* текст върху тъмната лента */
	--vm-on-blue: #BFD0FF;    /* надтекстът в синята лента на статия */

	/* ─ Състояния ─ */
	--vm-sale: #E23D6D;
	--vm-ok: #2BA56A;
	--vm-warn: #E08A1E;

	/* ─ Сенки (от макета, буквално) ─ */
	--vm-shadow-sm: 0 3px 10px rgba(43, 57, 118, .14);
	--vm-shadow: 0 12px 30px -16px rgba(43, 57, 118, .2);
	--vm-shadow-hover: 0 14px 28px -14px rgba(43, 57, 118, .24);
	--vm-shadow-card: 0 16px 30px -16px rgba(43, 57, 118, .26);
	--vm-shadow-lg: 0 40px 90px -24px rgba(15, 21, 38, .55);
	--vm-ring: 0 0 0 3px rgba(78, 123, 240, .28);

	/* ─ Форма (радиусите на v3) ─ */
	--vm-r-xs: 6px;
	--vm-r-sm: 9px;
	--vm-r: 11px;
	--vm-r-btn: 10px;      /* бутонът в продуктовата карта (финална стойност) */
	--vm-r-lg: 16px;
	--vm-r-xl: 18px;
	--vm-r-pill: 999px;

	/* ─ Ритъм ─ */
	--vm-gap-xs: 7px;
	--vm-gap-sm: 11px;
	--vm-gap: 18px;        /* мрежата на категориите в макета */
	--vm-gap-row: 16px;    /* редовете с продукти (скролерите) в макета */
	--vm-gap-md: 24px;
	--vm-gap-lg: 48px;
	/*
	 * ⚠️ ОДОБРЕНО ОТКЛОНЕНИЕ ОТ МАКЕТА (21.08, решение на клиента).
	 * Макетът v3 е с фиксирани 1320px; на 1600+ съдържанието изглеждаше като
	 * остров с по 240px празно отстрани. Сега контейнерът пълни екрана до
	 * 1720px, а отстоянието расте с екрана („място за дишане").
	 * До 1320px нищо не се променя — там контейнерът и без това е по-тесен от
	 * тавана и решава само паддингът.
	 */
	/* Съотношението на хиро банерите (1920×700 са файловете на клиентката). */
	--vm-hero-ratio: 1920 / 700;
	--vm-container: 1720px;
	--vm-container-pad: clamp(16px, 4vw, 64px);
	--vm-card: 244px;      /* ширина на карта в хоризонталния ред */

	/*
	 * Ширината на видимата област БЕЗ скролбара — пише се от JS-а. Резервата
	 * `100vw` върши работа, но включва скролбара; затова е само резерва.
	 */
	--vm-vw: 100vw;

	/* ─ Типография ─ */
	--vm-font: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
	--vm-fs-xxs: 10px;
	--vm-fs-xs: 12px;
	--vm-fs-sm: 13.5px;
	--vm-fs: 14.5px;
	--vm-fs-md: 16.5px;
	--vm-fs-lg: 18px;
	--vm-fs-xl: 30px;
	--vm-fs-hero: 44px;

	--vm-dur: .18s;
}

/*
 * Макетът е рисуван върху глобален border-box, GP не го дава. Без това
 * правило всяко поле с width:100% + padding излиза от колоната си — точно
 * капанът от CLAUDE.md т.5.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
body.woocommerce,
button,
input,
select,
textarea {
	font-family: var(--vm-font);
}

/*
 * GeneratePress дава `body { font-size: 17px }` (виж design/live/main.min.css).
 * Макетът е рисуван на 16px и всички размери тук са изведени от него — затова
 * базата се връща на 16px, а не се коригира всеки размер поотделно.
 */
body {
	background: var(--vm-bg);
	color: var(--vm-ink);
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--vm-blue-500);
	text-decoration: none;
}

a:hover {
	color: var(--vm-blue-hover);
}

/* ─── Бутони ─────────────────────────────────────────────────────────── */

.vm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vm-gap-xs);
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--vm-dur) ease, box-shadow var(--vm-dur) ease;
}

.vm-btn:hover,
.vm-btn:focus {
	background: var(--vm-blue-600);
	color: var(--vm-surface);
}

.vm-btn:focus-visible {
	outline: none;
	box-shadow: var(--vm-ring);
}

.vm-btn--ghost {
	background: transparent;
	border-color: var(--vm-line);
	color: var(--vm-blue-700);
}

.vm-btn--ghost:hover,
.vm-btn--ghost:focus {
	background: var(--vm-bg);
	color: var(--vm-blue-800);
}

.vm-btn--block {
	width: 100%;
}

/* ─── Помощни ────────────────────────────────────────────────────────── */

.vm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vm-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ─── Хедър по v3 ────────────────────────────────────────────────────── */

.vm-topbar {
	background: var(--vm-blue-800);
	color: var(--vm-surface);
}

.vm-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vm-gap);
	max-width: var(--vm-container);
	height: 38px;
	margin: 0 auto;
	padding: 0 var(--vm-container-pad);
	font-size: 12.5px;
	font-weight: 600;
}

.vm-topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-gap-xs);
	color: var(--vm-surface);
	font-weight: 700;
	white-space: nowrap;
}

.vm-topbar__phone:hover {
	color: var(--vm-surface);
	text-decoration: underline;
}

.vm-topbar__phone .vm-icon {
	width: 14px;
	height: 14px;
}

.vm-topbar__promo {
	color: var(--vm-on-dark);
	font-weight: 600;
	white-space: nowrap;
}

.vm-lang {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.vm-lang__item {
	padding: 3px 8px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--vm-on-dark);
	font-family: var(--vm-font);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}

.vm-lang__item.is-active {
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

.vm-lang__item:focus-visible,
.vm-action:focus-visible,
.vm-search__submit:focus-visible {
	outline: none;
	box-shadow: var(--vm-ring);
}

/* Бяла лента */

.vm-header {
	background: var(--vm-surface);
	border-bottom: 1px solid var(--vm-line-head);
}

.vm-header__inner {
	display: flex;
	align-items: center;
	gap: 34px;
	max-width: var(--vm-container);
	height: 84px;
	margin: 0 auto;
	padding: 0 var(--vm-container-pad);
}

/* Лого */

.vm-logo {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
}

.vm-logo__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--vm-r);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.vm-logo__text {
	line-height: 1;
	text-align: left;
}

.vm-logo__name {
	display: block;
	color: var(--vm-ink);
	font-size: var(--vm-fs-lg);
	font-weight: 800;
	letter-spacing: .01em;
}

.vm-logo__sub {
	display: block;
	margin-top: 3px;
	color: var(--vm-blue-500);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .34em;
}

.vm-logo img {
	max-height: 48px;
	width: auto;
}

/*
 * Истинското лого (пренесено от живия сайт).
 *
 * ⚠️ СЕЛЕКТОРЪТ Е С ДВА КЛАСА НАРОЧНО — това е капанът от CLAUDE.md т.3 и
 * той ни хвана на живо (22.08).
 *
 * `woocommerce.css` носи `.woocommerce img, .woocommerce-page img
 * { height: auto; max-width: 100% }` — специфичност (0,1,1). Едноклаcовото
 * `.vm-footer__logo-img { height: 50px }` е (0,1,0) и губи, а Woo листът се
 * зарежда СЛЕД темата. Резултат: на всяка Woo страница (продукт, категория,
 * магазин, количка, поръчка, профил) футърното лого рендерираше 226×240 —
 * натуралния си размер — и се застъпваше с надписа „BEAUTY SHOP".
 *
 * ⚠️ Началната НЕ показваше дефекта: тя носи само `woocommerce-js`, не
 * `.woocommerce-page`. Оттам и зеленият рън — проверката гледаше само нея.
 *
 * `.vm-footer__logo .vm-footer__logo-img` е (0,2,0) и бие (0,1,1) по броя
 * класове, без `!important` и без ID. `body .vm-…` НЯМАШЕ да свърши работа:
 * то също е (0,1,1), тоест равенство — а при равенство решава редът на
 * зареждане, който е в полза на Woo.
 *
 * ⚠️ `width: auto` е задължителен ПАРТНЬОР на атрибутите width/height в
 * маркъпа: без него браузърът ползва зададената ширина на файла и логото
 * излиза разтеглено. Атрибутите пък пазят мястото, докато файлът се тегли —
 * иначе хедърът подскача (CLS точно на най-видното място).
 */
.vm-logo .vm-logo__img {
	display: block;
	height: 46px;
	width: auto;
	max-height: none;
}

.vm-footer__logo .vm-footer__logo-img {
	display: block;
	height: 50px;
	width: auto;
	max-height: none;
}

/* Футърното лого е ВРЪЗКА към началната — текстът до него не бива да
   посинява като обикновен линк във футъра. */
.vm-footer__logo {
	color: inherit;
	transition: opacity var(--vm-dur) ease;
}

.vm-footer__logo:hover {
	color: inherit;
	opacity: .85;
}

/* Търсене */

.vm-search {
	display: flex;
	align-items: center;
	flex: 1;
	height: 48px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r);
	overflow: hidden;
	background: var(--vm-surface);
	transition: border-color var(--vm-dur) ease;
}

.vm-search:focus-within {
	border-color: var(--vm-blue-500);
}

.vm-search__icon {
	display: flex;
	padding: 0 8px 0 15px;
	color: var(--vm-muted-3);
}

.vm-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	color: var(--vm-ink);
	font-size: 14px;
	font-weight: 500;
}

.vm-search__submit {
	height: 100%;
	padding: 0 24px;
	border: 0;
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-family: var(--vm-font);
	font-size: var(--vm-fs-sm);
	font-weight: 700;
	cursor: pointer;
}

.vm-search__submit:hover {
	background: var(--vm-blue-hover);
}

/* Икони вдясно */

.vm-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.vm-action {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 10px;
	border-radius: var(--vm-r-sm);
	color: var(--vm-ink-soft);
}

.vm-action:hover {
	background: var(--vm-tint-3);
	color: var(--vm-blue-500);
}

.vm-action .vm-icon {
	width: 21px;
	height: 21px;
	stroke-width: 1.7;
}

.vm-action__label {
	font-size: var(--vm-fs-xxs);
	font-weight: 700;
}

.vm-minicart__count {
	position: absolute;
	top: 2px;
	right: 6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--vm-r-sm);
	background: var(--vm-blue-600);
	color: var(--vm-surface);
	font-size: 9.5px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
}

.vm-minicart__count[data-count="0"] {
	display: none;
}

/* ─── Навигационна лента (52px в макета) ─────────────────────────────── */

/*
 * Лентата стои на `generate_after_header`, тоест ИЗВЪН `#page` — затова белият
 * фон е на цялата ширина, а вътрешният контейнер връща съдържанието на 1320.
 */
.vm-nav {
	position: relative;
	z-index: 40;
	background: var(--vm-surface);
	border-bottom: 1px solid var(--vm-line-head);

	/*
	 * Застраховка: ако тази версия на GP пуска `generate_after_header` ВЪТРЕ в
	 * `#page` (а не преди него), белият фон би стигнал само до 1320. Когато
	 * лентата вече е на цялата ширина, сметката дава 0 и не променя нищо.
	 */
	width: var(--vm-vw);
	max-width: var(--vm-vw);
	margin-left: calc(50% - var(--vm-vw) / 2);
	margin-right: calc(50% - var(--vm-vw) / 2);
}

.vm-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--vm-gap);
	max-width: var(--vm-container);
	margin: 0 auto;
	padding: 0 var(--vm-container-pad);
}

/*
 * ⚠️ `min-width: 0` НЕ е излишно: с BeLLe KOREA и „Марки" елементите станаха
 * седем и списъкът избутваше надписа „100% оригинални продукти" 2px извън
 * екрана (мокът го хвана като 1602/1600). Flex елемент по подразбиране не се
 * свива под съдържанието си.
 */
.vm-nav__list {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 2px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.vm-nav__list::-webkit-scrollbar {
	display: none;
}

/*
 * ⚠️ Скролиращ контейнер РЕЖЕ падащите подменюта (те са absolute вътре в
 * него). Затова скролът се включва само когато наистина не стигат — от 1200px
 * надолу, където подменютата така или иначе не се ползват с мишка.
 */
@media (min-width: 1200px) {
	.vm-nav__list {
		overflow: visible;
	}
}

.vm-nav__item {
	position: relative;
}

.vm-nav__link {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 52px;
	padding: 0 13px;
	border-bottom: 2.5px solid transparent;
	color: #26314F;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .005em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--vm-dur) ease, border-color var(--vm-dur) ease;
}

.vm-nav__link:hover,
.vm-nav__item:focus-within > .vm-nav__link {
	color: var(--vm-blue-500);
	border-bottom-color: var(--vm-blue-500);
}

.vm-nav__link .vm-icon {
	width: 12px;
	height: 12px;
	stroke-width: 2.3;
	opacity: .45;
}

/* Падащият панел е за деца на категорията; няма ли деца, го няма и него. */
.vm-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	display: none;
	min-width: 240px;
	padding: 10px;
	border: 1px solid var(--vm-line-head);
	border-top: 0;
	border-radius: 0 0 var(--vm-r) var(--vm-r);
	background: var(--vm-surface);
	box-shadow: 0 22px 40px -18px rgba(43, 57, 118, .28);
}

.vm-nav__item--has-sub:hover .vm-nav__panel,
.vm-nav__item--has-sub:focus-within .vm-nav__panel {
	display: block;
}

.vm-nav__sub {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-nav__sub a {
	display: block;
	padding: 6px 8px;
	border-radius: 7px;
	color: var(--vm-ink-soft);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
}

.vm-nav__sub a:hover {
	background: var(--vm-tint-3);
	color: var(--vm-blue-500);
}

.vm-nav__note {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	color: var(--vm-blue-500);
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.vm-nav__note .vm-icon {
	width: 15px;
	height: 15px;
	stroke-width: 1.9;
}

/* Под 900px лентата се скролва настрани — по-добре от изчезнало меню. */
@media (max-width: 900px) {
	.vm-nav__inner {
		gap: 0;
		padding: 0 16px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.vm-nav__inner::-webkit-scrollbar {
		display: none;
	}

	.vm-nav__note {
		display: none;
	}

	.vm-nav__link {
		height: 46px;
		padding: 0 10px;
		font-size: 11.5px;
	}

	/* Панелът няма как да се отвори с hover на тъч — линкът води направо. */
	.vm-nav__panel {
		display: none !important;
	}

	.vm-nav__link .vm-icon {
		display: none;
	}
}

/* Ако GP все пак нарисува своята навигация, поне да е в езика на темата. */
.main-navigation {
	background: var(--vm-surface);
	border-bottom: 1px solid var(--vm-line-head);
}

.main-navigation .inside-navigation {
	max-width: var(--vm-container);
	padding: 0 var(--vm-container-pad);
}

.main-navigation .main-nav ul li a {
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 700;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
	color: var(--vm-blue-500);
	background: transparent;
}

@media (max-width: 900px) {
	.vm-header__inner {
		flex-wrap: wrap;
		gap: var(--vm-gap-sm);
		height: auto;
		padding: var(--vm-gap-sm) 16px;
	}

	.vm-search {
		order: 3;
		flex: 1 1 100%;
		height: 44px;
	}

	.vm-actions {
		margin-left: auto;
	}

	/*
	 * М2 · Мобилно горе стои ПРОМОТО, не телефонът (по макета). Телефонът си
	 * остава в бургер панела и във футъра, тоест никъде не се губи.
	 */
	.vm-topbar__phone {
		display: none;
	}

	/*
	 * ⚠️ Д6 (21.08) · Промото ползва ЦЯЛАТА ширина на лентата.
	 *
	 * Дотук до него стоеше превключвателят на езиците (~110px) и на 390px за
	 * текста оставаха 239px — „Безплатна доставка за всяка поръч…" с
	 * многоточие. Езиците слизат в бургер панела (виж `inc/mobile.php`), а
	 * текстът получава реда си цял. `text-overflow` остава като последна
	 * защита, ако прагът някой ден стане дълъг низ.
	 */
	.vm-topbar__promo {
		display: block;
		flex: 1 1 100%;
		min-width: 0;
		font-size: 11.5px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Езиците са в бургера — тук просто няма къде да стоят. */
	.vm-topbar .vm-lang {
		display: none;
	}

	/*
	 * Под 380px („малкият" iPhone SE) промото пак не се събира на 11.5px —
	 * измерено: искат се 316px, а има 288. По-дребен шрифт е за предпочитане
	 * пред многоточие: съобщението има смисъл само ако се прочете цяло.
	 */
	@media (max-width: 380px) {
		.vm-topbar__promo {
			font-size: 10px;
			letter-spacing: -.01em;
		}
	}

	/* В панела са ред за себе си, с рамка отгоре. */
	.vm-menu__lang {
		gap: 6px;
		margin: 14px 20px 4px;
		padding-top: 14px;
		border-top: 1px solid var(--vm-line-soft);
	}

	.vm-menu__lang .vm-lang__item {
		padding: 6px 12px;
		border: 1px solid var(--vm-line);
		border-radius: var(--vm-r-sm);
		color: var(--vm-muted);
		font-size: 12px;
	}

	.vm-menu__lang .vm-lang__item.is-active {
		border-color: var(--vm-blue-500);
		background: var(--vm-tint-2);
		color: var(--vm-blue-600);
	}

	.vm-topbar__inner {
		padding: 0 16px;
	}

	.vm-logo__mark {
		width: 36px;
		height: 36px;
		font-size: 15px;
	}

	/* Мобилно хедърът е 58px висок — логото слиза на 38, футърното на 44. */
	.vm-logo .vm-logo__img {
		height: 38px;
	}

	.vm-footer__logo .vm-footer__logo-img {
		height: 44px;
	}

	.vm-logo__name {
		font-size: 15px;
	}

	.vm-logo__sub {
		letter-spacing: .2em;
		font-size: 8.5px;
	}
}

/* ─── Marquee с марките ──────────────────────────────────────────────── */

.vm-brands {
	padding: 34px 0;
	background: var(--vm-bg-2);
	border-top: 1px solid var(--vm-line-soft);
	border-bottom: 1px solid var(--vm-line-soft);
	overflow: hidden;
}

/*
 * FULL-BLEED · в макета лентата е на ЦЯЛАТА ширина на страницата, а на
 * началната тя стои вътре в контейнера на GP (1320). Оттам и излизането от
 * него: ширина колкото видимата област и отрицателен ляв марж до ръба.
 *
 * `--vm-vw` идва от JS-а и е БЕЗ скролбара. С чист `100vw` лентата става
 * ~15px по-широка от видимото и сайтът получава хоризонтален скрол.
 *
 * Скоупът е `.vm-front` нарочно: сложи ли се лентата с шорткод в текста на
 * страница, тя си остава в колоната, където е сложена.
 */
.vm-front > .vm-brands {
	width: var(--vm-vw);
	max-width: var(--vm-vw);
	margin-left: calc(50% - var(--vm-vw) / 2);
	margin-right: calc(50% - var(--vm-vw) / 2);
}

.vm-brands__title {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--vm-container);
	margin: 0 auto 20px;
	padding: 0 var(--vm-container-pad);
	color: var(--vm-blue-800);
	font-size: var(--vm-fs-xs);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Линията след заглавието — както в макета. */
.vm-brands__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--vm-line-head);
}

/* Маската скрива краищата, за да не се вижда „шевът" на пистата. */
.vm-brands__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, var(--vm-ink) 6%, var(--vm-ink) 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, var(--vm-ink) 6%, var(--vm-ink) 94%, transparent);
}

.vm-brands__track {
	display: flex;
	width: max-content;
	animation: vm-marquee var(--vm-marquee-dur, 28s) linear infinite;
}

.vm-brands__group {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-right: 20px;
}

/* В макета всяка марка е бяло каре 186×78 с рамка, не гол текст. */
.vm-brands__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 186px;
	height: 78px;
	padding: 0 14px;
	border: 1px solid var(--vm-line-head);
	border-radius: 12px;
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	text-decoration: none;
	transition: border-color var(--vm-dur) ease;
}

.vm-brands__item:hover {
	border-color: var(--vm-line-strong);
}

/* Г4 · Логата са ~40px по решение от прегледа (бяха до 58px). */
.vm-brands__item img {
	max-width: 140px;
	max-height: 40px;
	width: auto;
	height: 40px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .7;
	transition: filter var(--vm-dur) ease, opacity var(--vm-dur) ease;
}

.vm-brands__item:hover img,
.vm-brands__item:focus img {
	filter: grayscale(0);
	opacity: 1;
}

.vm-brands__name {
	font-size: var(--vm-fs-lg);
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

/* Пистата е две еднакви групи → -50% я връща точно на шева. */
@keyframes vm-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.vm-brands:hover .vm-brands__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.vm-brands__track {
		animation: none;
	}

	.vm-brands__viewport {
		overflow-x: auto;
	}
}

@media (max-width: 768px) {
	.vm-brands {
		padding: var(--vm-gap) 0;
	}

	.vm-brands__item {
		width: 140px;
		height: 62px;
	}

	.vm-brands__item img {
		max-width: 110px;
		max-height: 46px;
	}

	.vm-brands__group {
		gap: 12px;
		padding-right: 12px;
	}

	.vm-brands__name {
		font-size: var(--vm-fs-sm);
	}
}

/* ─── Банер на категория ─────────────────────────────────────────────── */

/* 206px е височината от макета; текстът е центриран вертикално в нея. */
.vm-cat-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 206px;
	margin: 0 0 var(--vm-gap-md);
	border-radius: var(--vm-r-xl);
	overflow: hidden;
	background: var(--vm-blue-700);
}

.vm-cat-banner--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--vm-cat-image);
	background-size: cover;
	background-position: center;
}

/* Слой за четимост на текста върху снимка. */
.vm-cat-banner--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(43, 57, 118, .82), rgba(43, 57, 118, .35));
}

.vm-cat-banner__inner {
	position: relative;
	z-index: 1;
	padding: var(--vm-gap-lg) var(--vm-gap-md);
	color: var(--vm-surface);
}

.vm-cat-banner--plain .vm-cat-banner__inner {
	padding: var(--vm-gap-md);
}

.vm-cat-banner__title {
	margin: 0;
	color: var(--vm-surface);
	font-size: var(--vm-fs-xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.vm-cat-banner__text {
	max-width: 60ch;
	margin-top: var(--vm-gap-sm);
	font-size: var(--vm-fs-sm);
	opacity: .92;
}

.vm-cat-banner__text p:last-child {
	margin-bottom: 0;
}

/* ─── Архив: ляв панел + мрежа 3 колони (по макета) ─────────────────── */

.vm-shop {
	display: grid;
	grid-template-columns: 262px 1fr;
	gap: 28px;
	align-items: start;
}

.vm-shop__main {
	min-width: 0;
}

.vm-shop__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: var(--vm-gap);
}

.vm-shop__count {
	margin: 0;
	color: var(--vm-muted);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
}

.vm-shop__count b {
	color: var(--vm-ink);
	font-weight: 800;
}

.vm-shop__sorted {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--vm-muted-3);
	font-size: var(--vm-fs-xs);
	font-weight: 600;
}

.vm-shop__sorted span {
	color: var(--vm-blue-800);
	font-weight: 800;
}

.vm-shop__sorted .vm-icon {
	width: 18px;
	height: 18px;
	stroke-width: 1.7;
}

.vm-shop__empty-reset {
	margin: var(--vm-gap) 0 0;
}

/* ─── Продуктови карти в архива ──────────────────────────────────────── */

/*
 * От 18.08 архивът рисува СЪЩАТА карта като началната
 * (`vmbeauty_product_card()`), а дефолтните части на Woo са махнати с
 * `remove_action`. Затова тук няма правила за `.woocommerce-loop-product__title`
 * и `li.product .button` — този маркъп вече не се генерира.
 */

#content ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vm-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * ⚠️ Woo дава `ul.products::before/::after { content: " "; display: table }`
 * за клирфикс на плаващите карти. В GRID контейнер тези псевдоелементи стават
 * ГРИД ЕЛЕМЕНТИ: `::before` изяжда първата клетка (картите тръгват от колона 2
 * и отляво зее празно), а `::after` виси като допълнителна клетка накрая.
 * Мрежата няма нужда от клирфикс — затова ги няма.
 */
#content ul.products::before,
#content ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
}

#content ul.products li.product,
ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
}

ul.products li.product .vm-card {
	flex: 1 1 auto;
	height: 100%;
}

/* Заглавията на продукти носят ID специфичност в GP+Woo — оттам и #content. */
.woocommerce #content ul.products li.product a:not(.button),
.woocommerce #content ul.products li.product a:not(.button):hover {
	color: inherit;
}

.woocommerce #content ul.products li.product a.vm-card__title:hover {
	color: var(--vm-blue-500);
}

/* Woo слага „Разгледано" линк след AJAX добавяне — да не е гол син текст. */
ul.products li.product a.added_to_cart {
	display: block;
	margin: 0 13px 13px;
	color: var(--vm-blue-600);
	font-size: var(--vm-fs-xs);
	font-weight: 700;
	text-align: center;
}

/* ─── Панел с филтри (ляв сайдбар) ───────────────────────────────────── */

/*
 * ⚠️ Д2 (21.08) · Панелът беше 1153px висок при по-нисък екран. Sticky кутия,
 * по-висока от viewport-а, НЕ може да се доскролва — долните групи (Извивка,
 * Дебелина, Дължина) бяха просто недостижими, каквото и да прави потребителят.
 *
 * Затова: таван по височина = екранът минус отстоянията, а списъкът вътре
 * скролва сам. Главата („Филтри · Изчисти") остава на място.
 */
.vm-filters {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 40px);
	padding: 4px 18px 16px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
}

.vm-filters__body {
	display: flex;
	flex-direction: column;
	/* Без това `overflow` на детето няма спрямо какво да се смали. */
	min-height: 0;
}

.vm-filters__scroll {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Тънък скролбар — иначе изяжда 15px от 262-те на колоната. */
	scrollbar-width: thin;
	scrollbar-color: var(--vm-line-strong) transparent;
}

.vm-filters__scroll::-webkit-scrollbar {
	width: 6px;
}

.vm-filters__scroll::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: var(--vm-line-strong);
}

.vm-filters__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.vm-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 0;
	border-bottom: 1px solid var(--vm-line-soft);
}

.vm-filters__name {
	color: var(--vm-ink);
	font-size: 15px;
	font-weight: 800;
}

.vm-filters__reset {
	color: var(--vm-blue-500);
	font-size: var(--vm-fs-xs);
	font-weight: 700;
}

.vm-filters__group {
	padding: 16px 0;
	border-bottom: 1px solid var(--vm-line-soft);
}

.vm-filters__group:last-child {
	border-bottom: 0;
}

.vm-filters__heading {
	margin: 0;
	color: var(--vm-blue-800);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/*
 * Заглавието е бутон на акордеона. `font: inherit` не е козметика — контролите
 * не наследяват шрифта на страницата и без него заглавието става 13px Arial.
 */
.vm-filters__gtoggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
}

/* ⚠️ Изричен фон — GP дава `button:hover { background: #3f4047 }`. */
.vm-filters__gtoggle:hover {
	background: transparent;
	color: var(--vm-blue-500);
}

.vm-filters__gtoggle .vm-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	stroke-width: 2.4;
	transition: transform var(--vm-dur) ease;
}

.vm-filters__group.is-collapsed .vm-filters__gtoggle .vm-icon {
	transform: rotate(-90deg);
}

.vm-filters__panel {
	margin-top: 9px;
}

.vm-filters__group.is-collapsed .vm-filters__panel {
	display: none;
}

/* Сортиране: радио бутони, както в макета. */
.vm-sort {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-sort a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 2px;
	color: var(--vm-ink-soft);
	font-size: 13px;
	font-weight: 600;
}

.vm-sort a:hover {
	color: var(--vm-blue-500);
}

.vm-sort__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	border: 2px solid #CDD6E8;
	border-radius: 50%;
}

.vm-sort .is-active .vm-sort__dot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vm-blue-500);
}

.vm-sort .is-active a {
	color: var(--vm-ink);
	font-weight: 800;
}

/* Цена: две полета + ОК (нативните min_price/max_price на Woo). */
/*
 * ⚠️ Формата вече носи ДВЕ части: плъзгача и реда с полетата. Като flex РЕД
 * плъзгачът е flex елемент без съдържание в потока (дръжките са absolute) →
 * ширина 0 и двете дръжки лягат върху полето „от". Оттам колоната.
 */
.vm-price {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vm-price__slider {
	width: 100%;
}

.vm-price__fields {
	display: flex;
	align-items: center;
	gap: 6px;
}

.vm-price input[type="number"] {
	flex: 1;
	min-width: 0;
	height: 38px;
	padding: 0 8px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r-sm);
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-size: 12.5px;
	font-weight: 700;
}

.vm-price__dash {
	color: var(--vm-muted-4);
}

.vm-price__go {
	height: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--vm-r-sm);
	background: var(--vm-tint);
	color: var(--vm-blue-600);
	font-family: var(--vm-font);
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.vm-price__go:hover {
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

/* Списъците (марки + нативния layered nav widget) изглеждат еднакво. */
.vm-filters__list,
.vm-filters .woocommerce-widget-layered-nav-list,
.vm-filters ul {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-filters__list a,
.vm-filters .woocommerce-widget-layered-nav-list__item a,
.vm-filters li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 2px;
	color: var(--vm-ink-soft);
	font-size: 13px;
	font-weight: 600;
}

.vm-filters li a:hover,
.vm-filters li a:focus {
	color: var(--vm-blue-500);
}

.vm-filters__label {
	flex: 1;
}

.vm-check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	border: 2px solid #CDD6E8;
	border-radius: 5px;
}

.vm-filters__list .is-active .vm-check {
	border-color: var(--vm-blue-500);
	background: var(--vm-blue-500);
}

.vm-filters__list .is-active .vm-check::after {
	content: "";
	width: 9px;
	height: 5px;
	margin-top: -2px;
	border: 2px solid var(--vm-surface);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}

.vm-filters__list .is-active > a,
.vm-filters .woocommerce-widget-layered-nav-list__item--chosen a,
.vm-filters li.chosen a {
	color: var(--vm-ink);
	font-weight: 800;
}

.vm-filters .count {
	color: #A6AFC4;
	font-size: 11.5px;
	font-weight: 600;
}

/* Бутонът „Филтри" е само за мобилно. */
.vm-filters__toggle {
	display: none;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	margin: 10px 0;
	padding: 0 14px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r);
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-family: var(--vm-font);
	font-size: var(--vm-fs-sm);
	font-weight: 800;
	cursor: pointer;
}

.vm-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: var(--vm-fs-xxs);
	font-weight: 800;
}

/* ─── Страниране по v3 ───────────────────────────────────────────────── */

.woocommerce-pagination,
.vm-blog .pagination {
	margin-top: 32px;
}

.woocommerce-pagination ul.page-numbers,
.vm-blog .pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li,
.vm-blog .pagination .nav-links li {
	margin: 0;
	border: 0;
}

.woocommerce-pagination .page-numbers,
.vm-blog .pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r-pill);
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	font-size: var(--vm-fs-sm);
	font-weight: 800;
}

.woocommerce-pagination .page-numbers:hover,
.vm-blog .pagination .page-numbers:hover {
	border-color: var(--vm-blue-500);
	color: var(--vm-blue-500);
}

.woocommerce-pagination .page-numbers.current,
.vm-blog .pagination .page-numbers.current {
	border-color: var(--vm-blue-500);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

@media (max-width: 1100px) {
	#content ul.products,
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	/* Панелът минава над мрежата и се сгъва — 262px колона тук няма къде. */
	.vm-shop {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.vm-filters {
		position: static;
		display: block;
		max-height: none;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.vm-filters__toggle {
		display: flex;
	}

	.vm-filters__body {
		display: none;
		padding: 4px 16px 12px;
		border: 1px solid var(--vm-line-card);
		border-radius: var(--vm-r-lg);
		background: var(--vm-surface);
	}

	.vm-filters.is-open .vm-filters__body {
		display: block;
	}
}

@media (max-width: 860px) {
	#content ul.products,
	ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* ─── Продуктова страница ────────────────────────────────────────────── */

.vm-single-product div.product .woocommerce-product-gallery {
	margin-bottom: var(--vm-gap-md);
}

.vm-single-product div.product .woocommerce-product-gallery__image img {
	border-radius: var(--vm-r);
}

/*
 * Миниатюрите: в макета са РЕД от равни квадратчета под голямата снимка.
 *
 * ⚠️ Трети път същият капан: `.woocommerce div.product div.images img` е
 * (0,3,2) и слага `width: 100%` върху ВСЯКА снимка в галерията — включително
 * миниатюрите. Затова тук селекторът пак е със слепените класове на `body`.
 */
.vm-single-product div.product .flex-control-thumbs {
	display: flex;
	gap: 11px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.vm-single-product div.product .flex-control-thumbs li {
	flex: 1 1 0;
	min-width: 0;
	max-width: 116px;
	margin: 0;
}

body.vm-single-product #content div.product div.images .flex-control-thumbs img,
.vm-single-product #content div.product div.images .flex-control-thumbs img,
.woocommerce.vm-single-product div.product div.images .flex-control-thumbs img,
.vm-single-product div.product .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border: 2px solid transparent;
	border-radius: var(--vm-r);
	background: var(--vm-shade-1);
	object-fit: cover;
	opacity: .82;
	cursor: pointer;
	transition: border-color var(--vm-dur) ease, opacity var(--vm-dur) ease;
}

.vm-single-product div.product .flex-control-thumbs img:hover,
.vm-single-product div.product .flex-control-thumbs img.flex-active {
	border-color: var(--vm-blue-500);
	opacity: 1;
}

.vm-single-product div.product .product_title {
	color: var(--vm-ink);
	font-size: var(--vm-fs-xl);
	line-height: 1.15;
}

.vm-single-product div.product p.price,
.vm-single-product div.product span.price {
	color: var(--vm-blue-700);
	font-size: var(--vm-fs-xl);
	font-weight: 700;
}

.vm-single-product div.product p.price del {
	color: var(--vm-muted);
	font-size: var(--vm-fs-lg);
	font-weight: 400;
}

.vm-single-product div.product p.price ins {
	color: var(--vm-sale);
	text-decoration: none;
}

/* Вариации */

.vm-single-product table.variations {
	width: 100%;
	margin: 0 0 var(--vm-gap);
	border: 0;
}

.vm-single-product table.variations th,
.vm-single-product table.variations td {
	display: block;
	width: 100%;
	padding: 0 0 var(--vm-gap-xs);
	border: 0;
	text-align: left;
}

.vm-single-product table.variations th label {
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.vm-single-product table.variations select {
	box-sizing: border-box;
	width: 100%;
	max-width: 320px;
	padding: 10px 14px;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r-sm);
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
}

.vm-single-product table.variations select:focus {
	outline: none;
	border-color: var(--vm-blue-500);
	box-shadow: var(--vm-ring);
}

.vm-single-product .reset_variations {
	display: inline-block;
	margin-top: var(--vm-gap-xs);
	color: var(--vm-muted);
	font-size: var(--vm-fs-sm);
}

.vm-single-product .woocommerce-variation-price {
	margin-bottom: var(--vm-gap-sm);
}

/* Количество + бутон */

.vm-single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-gap-sm);
	align-items: center;
}

.vm-single-product form.variations_form.cart {
	display: block;
}

.vm-single-product .quantity input.qty {
	box-sizing: border-box;
	width: 84px;
	padding: 11px 8px;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r-sm);
	text-align: center;
}

.vm-single-product .single_add_to_cart_button {
	box-sizing: border-box;
	padding: 13px 28px;
	border: 0;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: var(--vm-fs);
	font-weight: 700;
}

.vm-single-product .single_add_to_cart_button:hover,
.vm-single-product .single_add_to_cart_button:focus {
	background: var(--vm-blue-600);
	color: var(--vm-surface);
}

/* Лента с уверения */

.vm-assurance {
	margin: var(--vm-gap) 0 0;
	padding: var(--vm-gap-sm) var(--vm-gap);
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r);
	background: var(--vm-bg);
	list-style: none;
}

.vm-assurance__item {
	display: flex;
	align-items: center;
	gap: var(--vm-gap-xs);
	margin: 0;
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
}

.vm-assurance__item a {
	color: var(--vm-blue-600);
	font-weight: 700;
}

/* Табове */

.vm-single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-gap-xs);
	margin: 0 0 var(--vm-gap);
	padding: 0;
	border-bottom: 1px solid var(--vm-line);
}

.vm-single-product .woocommerce-tabs ul.tabs::before,
.vm-single-product .woocommerce-tabs ul.tabs li::before,
.vm-single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.vm-single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}

.vm-single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 16px;
	border-bottom: 2px solid transparent;
	color: var(--vm-muted);
	font-weight: 600;
}

.vm-single-product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--vm-blue-500);
	color: var(--vm-blue-800);
}

/* Сходни продукти */

.vm-single-product .related > h2,
.vm-single-product .up-sells > h2 {
	margin-bottom: var(--vm-gap);
	color: var(--vm-ink);
	font-size: var(--vm-fs-lg);
}

@media (max-width: 768px) {
	.vm-single-product div.product .flex-control-thumbs li {
		max-width: 88px;
	}

	.vm-single-product .single_add_to_cart_button {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ─── Количка: прогрес барове и countdown ────────────────────────────── */

.vm-progress-group {
	display: grid;
	gap: var(--vm-gap-sm);
	margin: 0 0 var(--vm-gap-md);
	padding: var(--vm-gap);
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r);
	background: var(--vm-bg);
}

.vm-progress__text {
	margin: 0 0 var(--vm-gap-xs);
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
}

.vm-progress.is-reached .vm-progress__text {
	color: var(--vm-ok);
}

.vm-progress__track {
	position: relative;
	height: 8px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-line);
	overflow: hidden;
}

.vm-progress__fill {
	display: block;
	height: 100%;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
	transition: width var(--vm-dur) ease;
}

.vm-progress--gift .vm-progress__fill {
	background: var(--vm-blue-700);
}

.vm-progress.is-reached .vm-progress__fill {
	background: var(--vm-ok);
}

.vm-countdown {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--vm-gap-xs);
	padding: 3px 10px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-sale);
	color: var(--vm-surface);
	font-size: var(--vm-fs-xs);
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.vm-countdown__value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

@media (max-width: 768px) {
	.vm-countdown {
		font-size: 11px;
		padding: 2px 8px;
	}
}

/* ─── Woo количка: десктоп ───────────────────────────────────────────── */

/*
 * Бутонът „Приключване на поръчката" е <a>, а <a> НЕ получава border-box от
 * браузъра (за разлика от <button>) — виж CLAUDE.md т.5. Без това правило
 * width:100% + padding го изхвърля извън колоната.
 */
.wc-proceed-to-checkout a.checkout-button {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 14px 20px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: var(--vm-fs-sm);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:focus {
	background: var(--vm-blue-600);
	color: var(--vm-surface);
}

.cart_totals h2 {
	font-size: var(--vm-fs-lg);
}

.woocommerce-cart .cart_totals table,
.woocommerce-cart table.cart {
	border-collapse: collapse;
}

/* ─── Woo количка: мобилно ───────────────────────────────────────────── */

@media (max-width: 768px) {

	/*
	 * GP обвивката яде 104px на 390px екран (content-area 22×2 +
	 * inside-article 30×2) и оставя 286px за съдържание. Специфичността на
	 * `#content > .content-area` е (1,1,0) — override БЕЗ #content тихо не се
	 * прилага. Целта е 358px = 16px странично.
	 */
	#content > .content-area {
		padding: 20px 16px 40px;
	}

	.woocommerce-page .inside-article {
		padding: 0;
	}

	/*
	 * woocommerce-smallscreen.css скрива снимката и слага сурови
	 * `td::before { content: attr(data-title) }` етикети. И двете идват СЛЕД
	 * нашия лист в каскадата, затова override-ът минава през #content (ID),
	 * не през още един клас.
	 */
	#content .woocommerce table.shop_table_responsive tr td::before,
	#content .woocommerce-page table.shop_table_responsive tr td::before {
		content: none;
	}

	#content .woocommerce table.shop_table_responsive tr,
	#content .woocommerce-page table.shop_table_responsive tr.cart_item {
		display: grid;
		grid-template-columns: 72px 1fr auto;
		grid-template-areas:
			"thumb name   remove"
			"thumb price  price"
			"thumb qty    subtotal";
		gap: 4px var(--vm-gap-sm);
		align-items: center;
		margin-bottom: var(--vm-gap-sm);
		padding: var(--vm-gap-sm);
		border: 1px solid var(--vm-line);
		border-radius: var(--vm-r);
		background: var(--vm-surface);
	}

	/*
	 * ⚠️ Редът „actions" (купон + „Обновяване на количката") НЕ е продуктов ред.
	 * Правилото горе хваща ВСЕКИ `tr` на отзивчива таблица и слагаше клетката
	 * му в колоната от 72px — оттам вертикалният текст буква по буква (GP дава
	 * `word-wrap: break-word`, така че надписът не преливаше, а се чупеше).
	 * Woo отгоре флоутва купона и дава на полето `width: 100px`.
	 *
	 * Специфичност: правилото по-горе е (1,2,3) заради `#content`; затова и
	 * тук има `#content`, а `:has()` го подрежда след него.
	 */
	#content .woocommerce table.shop_table_responsive tr:has(td.actions),
	#content .woocommerce-page table.shop_table_responsive tr:has(td.actions) {
		display: block;
		margin-bottom: var(--vm-gap-sm);
		padding: 0;
		border: 0;
		background: transparent;
	}

	#content .woocommerce table.shop_table_responsive td.actions,
	#content .woocommerce-page table.shop_table_responsive td.actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		padding: 0;
		text-align: left;
	}

	#content .woocommerce table.cart td.actions .coupon,
	#content .woocommerce-page table.cart td.actions .coupon {
		display: flex;
		flex-direction: column;
		float: none;
		gap: 10px;
		width: 100%;
		padding: 0;
	}

	#content .woocommerce table.cart td.actions .coupon .input-text,
	#content .woocommerce-page table.cart td.actions .coupon .input-text {
		float: none;
		box-sizing: border-box;
		width: 100%;
		height: 46px;
		margin: 0;
		padding: 0 14px;
		border: 1.5px solid var(--vm-line);
		border-radius: var(--vm-r-btn);
	}

	#content .woocommerce table.cart td.actions .button,
	#content .woocommerce-page table.cart td.actions .button,
	#content .woocommerce table.cart td.actions button[name="update_cart"],
	#content .woocommerce-page table.cart td.actions button[name="update_cart"] {
		box-sizing: border-box;
		float: none;
		width: 100%;
		min-height: 46px;
		white-space: nowrap;
	}

	/*
	 * `min-width: 0` НЕ Е излишно: grid/flex клетка по подразбиране е с
	 * min-width:auto и не се свива под съдържанието си. Countdown-ът е
	 * nowrap и точно това изкарваше 471px хоризонтален скрол на 390px екран.
	 */
	#content .woocommerce table.shop_table_responsive tr td {
		display: block;
		min-width: 0;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
		overflow-wrap: anywhere;
	}

	.vm-countdown {
		white-space: normal;
	}

	/* Снимката се връща — smallscreen я слага display:none и оставя празен улей. */
	#content .woocommerce table.shop_table_responsive tr td.product-thumbnail {
		grid-area: thumb;
		display: block;
	}

	#content .woocommerce table.shop_table_responsive tr td.product-thumbnail img {
		width: 72px;
		height: 72px;
		border-radius: var(--vm-r-sm);
		object-fit: cover;
	}

	#content .woocommerce table.shop_table_responsive tr td.product-name { grid-area: name; }
	#content .woocommerce table.shop_table_responsive tr td.product-price { grid-area: price; }
	#content .woocommerce table.shop_table_responsive tr td.product-quantity { grid-area: qty; }
	#content .woocommerce table.shop_table_responsive tr td.product-subtotal { grid-area: subtotal; text-align: right; }
	#content .woocommerce table.shop_table_responsive tr td.product-remove { grid-area: remove; text-align: right; }

	#content .woocommerce table.shop_table_responsive thead {
		display: none;
	}

	#content .woocommerce table.shop_table_responsive tr td.product-name a {
		font-size: var(--vm-fs-sm);
		font-weight: 600;
		line-height: 1.35;
	}

	#content .woocommerce table.shop_table_responsive tr td.product-price {
		color: var(--vm-muted);
		font-size: var(--vm-fs-sm);
	}

	#content .woocommerce table.shop_table_responsive tr td.product-subtotal {
		color: var(--vm-blue-700);
		font-weight: 700;
	}

	#content .woocommerce table.shop_table_responsive tr td.product-quantity input.qty {
		box-sizing: border-box;
		width: 64px;
		padding: 6px 4px;
		border: 1px solid var(--vm-line);
		border-radius: var(--vm-r-sm);
		text-align: center;
	}

	/* Woo core: a.remove { color: red !important } — само !important го бие. */
	#content .woocommerce a.remove {
		color: var(--vm-muted) !important;
		font-size: 20px;
		line-height: 1;
	}

	/*
	 * woocommerce-layout.css: .cart-collaterals .cart_totals { width:48%;
	 * float:right } — на мобилно това свива картата до половин екран.
	 */
	#content .cart-collaterals,
	#content .cart-collaterals .cart_totals {
		box-sizing: border-box;
		width: 100%;
		float: none;
	}

	#content .cart-collaterals .cart_totals {
		margin-top: var(--vm-gap);
		padding: var(--vm-gap);
		border: 1px solid var(--vm-line);
		border-radius: var(--vm-r);
		background: var(--vm-surface);
	}

	#content .cart_totals table.shop_table_responsive tr {
		display: flex;
		justify-content: space-between;
		gap: var(--vm-gap-sm);
		padding: 6px 0;
		border: 0;
		background: transparent;
	}

	#content .cart_totals table.shop_table_responsive th {
		display: block;
		padding: 0;
		border: 0;
		font-weight: 600;
	}
}

/* ─── Общи Woo/WP елементи (страници без макет) ──────────────────────── */

/*
 * Чекаутът, профилът и блогът нямат макет в v3. Стилизират се стандартните
 * Woo/WP елементи в същия език: заоблени полета, синьо на фокуса, картички с
 * рамка --vm-line. Нищо не се преправя структурно.
 */

/* Полета */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
	box-sizing: border-box;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r-sm);
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--vm-blue-500);
	box-shadow: var(--vm-ring);
}

.woocommerce form .form-row label {
	margin-bottom: 4px;
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
}

.required {
	color: var(--vm-sale);
	text-decoration: none;
}

/* Бутони на Woo — общият вид на темата */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button:disabled,
.woocommerce #place_order {
	box-sizing: border-box;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
	background: var(--vm-blue-600);
	color: var(--vm-surface);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--vm-blue-600);
}

/* Съобщения */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	box-sizing: border-box;
	border-top: 0;
	border-left: 4px solid var(--vm-blue-500);
	border-radius: var(--vm-r-sm);
	background: var(--vm-bg);
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
}

.woocommerce-error {
	border-left-color: var(--vm-sale);
}

.woocommerce-message {
	border-left-color: var(--vm-ok);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--vm-blue-500);
}

.woocommerce-error::before {
	color: var(--vm-sale);
}

/* Чекаут */

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	margin-bottom: var(--vm-gap);
	color: var(--vm-ink);
	font-size: var(--vm-fs-lg);
}

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-payment {
	box-sizing: border-box;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r);
	background: var(--vm-surface);
}

.woocommerce-checkout #order_review {
	padding: var(--vm-gap);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var(--vm-r);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: var(--vm-gap);
	border-bottom: 1px solid var(--vm-line);
}

.woocommerce-checkout #payment div.form-row {
	padding: var(--vm-gap);
}

.woocommerce-checkout #place_order {
	width: 100%;
	padding: 15px 24px;
	font-size: var(--vm-fs);
	font-weight: 700;
}

/* Профил */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--vm-gap);
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 0 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r-sm);
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	border-color: var(--vm-blue-500);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

/* Пътечка и странициране */

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--vm-gap);
	color: var(--vm-muted);
	font-size: var(--vm-fs-sm);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--vm-blue-600);
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: var(--vm-gap-xs);
	display: flex;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	padding: 8px 14px;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r-sm);
	color: var(--vm-ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--vm-blue-500);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

/* Подредба и брояч над архива */

.woocommerce .woocommerce-ordering select {
	box-sizing: border-box;
	padding: 9px 14px;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r-pill);
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
}

.woocommerce .woocommerce-result-count {
	color: var(--vm-muted);
	font-size: var(--vm-fs-sm);
}

/* Блог */

.vm-entry-meta,
.entry-meta {
	color: var(--vm-muted);
	font-size: var(--vm-fs-sm);
}

.entry-title a {
	color: var(--vm-ink);
}

.entry-title a:hover {
	color: var(--vm-blue-600);
}

/* ═══ НАЧАЛНА СТРАНИЦА ПО v3 ═════════════════════════════════════════════ */

.vm-container {
	width: 100%;
	max-width: var(--vm-container);
	margin: 0 auto;
	padding: 0 var(--vm-container-pad);
}

/*
 * ⚠️ GeneratePress клампва ЦЯЛАТА страница на 1320px (стойността е от
 * Customizer-а и излиза като inline стил). Без това правило широкият
 * контейнер няма ефект: външната обвивка го стеснява обратно.
 * `#page` е с ID нарочно — inline стилът на GP е с клас и губи.
 */
#page.grid-container,
#page.site.grid-container {
	max-width: 100%;
	padding: 0;
}

/*
 * Страниците, които НЕ минават през `.vm-container` (Woo архив, продукт,
 * количка, чекаут), се държат от обвивката на GP — тя поема ролята.
 */
#content > .content-area,
.site-info .inside-site-info {
	width: 100%;
	max-width: var(--vm-container);
	margin-inline: auto;
}

/*
 * ⚠️ Отстоянието го дава ЕДИН слой, не два. `.vm-container` пада винаги, а
 * обвивката поема само когато вътре няма контейнер (Woo страниците). Обратното
 * (обвивката пада, вложеният контейнер отстъпва) се счупи веднага: блогът
 * нулира паддинга на обвивката си и заглавието му опря в ръба.
 */
#content > .content-area:not(:has(.vm-container)),
.site-info .inside-site-info:not(:has(.vm-container)) {
	padding-inline: var(--vm-container-pad);
}

/* ─── Хиро: ЦЯЛ банер слайдер ────────────────────────────────────────── */

/*
 * ⚠️ Д1 (21.08) · ТРЕТАТА и окончателна форма. Отменя и Г3 (банер като фон
 * със скрим), и Фаза 3.1 (две колони — текст вляво, банер вдясно).
 *
 * Един слайд = едно <img> на цялата ширина, БЕЗ кроп и БЕЗ текст върху него.
 * Банерите на клиентката (1920×700) си носят своето послание.
 */
.vm-hero {
	position: relative;
	width: var(--vm-vw);
	/* Full-bleed без хоризонтален скрол: `--vm-vw` е ширината БЕЗ скролбара. */
	margin-left: calc(50% - var(--vm-vw) / 2);
	overflow: hidden;
}

/*
 * Кутията държи съотношението на банерите, за да не подскача страницата,
 * докато снимките се свалят. `contain` вътре значи „целият банер се вижда" —
 * банер с друго съотношение получава поле отстрани, но НЕ се реже.
 */
/* Стрелките живеят ВЪТРЕ в него — оттам и `relative` (виж `inc/hero.php`). */
.vm-hero__track {
	position: relative;
	width: 100%;
	aspect-ratio: var(--vm-hero-ratio);
	background: var(--vm-tint-2);
}

.vm-hero__slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
}

.vm-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Първият слайд е в потока — така кутията има височина и без JS. */
.vm-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Стрелките: вертикално центрирани, по една на всеки ръб. */
.vm-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--vm-line);
	border-radius: 50%;
	background: var(--vm-surface);
	box-shadow: 0 6px 18px rgba(43, 57, 118, .16);
	color: var(--vm-blue-800);
	cursor: pointer;
	transition: border-color var(--vm-dur) ease, color var(--vm-dur) ease;
}

/* ⚠️ Фонът е ИЗРИЧЕН — GP дава `button:hover { background: #3f4047 }`. */
.vm-hero__arrow:hover,
.vm-hero__arrow:focus-visible {
	border-color: var(--vm-blue-500);
	background: var(--vm-surface);
	color: var(--vm-blue-500);
}

.vm-hero__arrow--prev {
	left: 18px;
}

.vm-hero__arrow--next {
	right: 18px;
}

.vm-hero__arrow .vm-icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.2;
}

/* Точките: центрирани под банера, върху самата снимка. */
.vm-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 4;
	display: flex;
	gap: 7px;
	transform: translateX(-50%);
	padding: 7px 10px;
	border-radius: var(--vm-r-pill);
	background: rgba(255, 255, 255, .72);
}

.vm-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vm-line-strong);
	cursor: pointer;
	transition: width var(--vm-dur) ease, background var(--vm-dur) ease;
}

.vm-hero__dot.is-active {
	width: 26px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
}

/* ─── USP лента ──────────────────────────────────────────────────────── */

.vm-usp {
	padding: 20px 0 6px;
}

/* ЧЕТИРИ карти — толкова са в макета. */
.vm-usp__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.vm-usp__item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 18px;
	border: 1px solid var(--vm-line-head);
	border-radius: 13px;
	background: var(--vm-surface);
}

.vm-usp__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--vm-tint);
	color: var(--vm-blue-500);
}

.vm-usp__icon .vm-icon {
	width: 20px;
	height: 20px;
	stroke-width: 1.7;
}

.vm-usp__text {
	display: block;
	line-height: 1.25;
	min-width: 0;
}

.vm-usp__title {
	display: block;
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 800;
}

.vm-usp__sub {
	display: block;
	margin-top: 2px;
	color: var(--vm-muted-2);
	font-size: var(--vm-fs-xs);
	font-weight: 600;
}

/* ─── Секции ─────────────────────────────────────────────────────────── */

/*
 * Паддингите са по макета, СЕКЦИЯ ПО СЕКЦИЯ (в v3 не са едни и същи):
 *   Оферти                 48 / 8   ← малкото дъно е защото отдолу е тонираната
 *   Най-купувани (tint)    48 / 48  + margin-top 36
 *   Пазарувай по категория 52 / 52
 *   Нови попълнения        48 / 48
 */
.vm-sec {
	padding: var(--vm-gap-lg) 0;
}

.vm-sec--offers {
	padding-bottom: 8px;
}

.vm-sec--cats {
	padding: 52px 0;
}

.vm-sec--tint {
	margin-top: 36px;
	padding: var(--vm-gap-lg) 0;
	background: var(--vm-bg-2);
}

.vm-sec__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: var(--vm-gap-md);
}

.vm-sec__eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 9px;
	color: var(--vm-blue-500);
	font-size: var(--vm-fs-xs);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.vm-sec__bar {
	width: 22px;
	height: 2px;
	background: var(--vm-blue-500);
}

.vm-sec__title {
	margin: 0;
	color: var(--vm-ink);
	font-size: var(--vm-fs-xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* Центрирана глава — така е „Пазарувай по категория" в макета. */
.vm-sec__head--center {
	justify-content: center;
	text-align: center;
}

.vm-sec__head--center .vm-sec__eyebrow {
	justify-content: center;
}

.vm-sec__tools {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 16px;
}

.vm-sec__more {
	flex-shrink: 0;
	color: var(--vm-blue-600);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.vm-sec__more:hover {
	color: var(--vm-blue-500);
}

.vm-sec__nav {
	display: flex;
	gap: 8px;
}

.vm-sec__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1.5px solid var(--vm-line);
	border-radius: 50%;
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	cursor: pointer;
	transition: border-color var(--vm-dur) ease, color var(--vm-dur) ease, opacity var(--vm-dur) ease;
}

.vm-sec__arrow:hover {
	border-color: var(--vm-blue-500);
	color: var(--vm-blue-500);
}

/*
 * ⚠️ Д4 (21.08) · `.vm-arrow` е СЪЩИЯТ бутон.
 *
 * Стрелките на „Клиентите разглеждат също" носеха този клас, а правило за
 * него нямаше — тоест излизаха дефолтни сиви бутони на GeneratePress. Сега
 * маркъпът ползва `.vm-sec__arrow`, но алиасът остава: същият клас се среща
 * и в стари кешове, и в мока, и не бива пак да падне на GP-шкия вид.
 */
.vm-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1.5px solid var(--vm-line);
	border-radius: 50%;
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	cursor: pointer;
	transition: border-color var(--vm-dur) ease, color var(--vm-dur) ease, opacity var(--vm-dur) ease;
}

.vm-arrow .vm-icon {
	width: 19px;
	height: 19px;
	stroke-width: 2.2;
}

/*
 * В края на реда стрелката е неактивна, но не изчезва — иначе редът подскача.
 * ⚠️ Само прозрачност: сив ФОН би изглеждал като счупен бутон, а не като
 * стигнат край (точно оплакването от прегледа).
 */
.vm-sec__arrow.is-off,
.vm-arrow.is-off {
	opacity: .4;
	background: var(--vm-surface);
	pointer-events: none;
}

.vm-sec__arrow .vm-icon {
	width: 19px;
	height: 19px;
	stroke-width: 2.2;
}

/* ─── Ред с продукти ─────────────────────────────────────────────────── */

/*
 * В макета това НЕ е мрежа 2×4, а ХОРИЗОНТАЛЕН СКРОЛЕР: осем карти по 244px в
 * един ред, gap 16, нативен скрол със snap. Мрежата беше грешно прочитане на
 * макета.
 *
 * `padding-bottom` пази сянката на картите от отрязване, защото скролерът е
 * `overflow: auto` и по двете оси.
 */
.vm-row {
	display: flex;
	gap: var(--vm-gap-row);
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 14px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;

	/*
	 * ⚠️ БЕЗ ТОВА СТРАНИЦАТА СКРОЛВА ХОРИЗОНТАЛНО (премерено живо: +402px на
	 * 1600, +906px на 390 — двата продуктови реда).
	 *
	 * `overflow` НЕ реже абсолютно позициониран наследник, чийто съдържащ блок
	 * е ИЗВЪН скролера (плъгинска инжекция в картата — wishlist бутон, бадж,
	 * quick view). Такъв елемент се позиционира спрямо предшественика извън
	 * реда, а картите вътре са наредени до 2000px+ надясно → документът порасва.
	 * Затова и `overflow: hidden` върху реда не помага — пробвано.
	 *
	 * `contain: layout` прави реда съдържащ блок за тези наследници и ги връща
	 * вътре в скролера. Не реже съдържанието (това е `contain: paint`) и не
	 * фиксира височина (това е `contain: size`).
	 */
	contain: layout;
}

.vm-row::-webkit-scrollbar {
	display: none;
}

.vm-row > .vm-card {
	flex: 0 0 var(--vm-card);
	width: var(--vm-card);
	scroll-snap-align: start;
}

/* ─── Продуктова карта по v3 ─────────────────────────────────────────── */

.vm-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vm-line-soft);
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow);
	overflow: hidden;
	transition: border-color var(--vm-dur) ease, box-shadow var(--vm-dur) ease;
}

.vm-card:hover {
	border-color: var(--vm-line-strong);
	box-shadow: var(--vm-shadow-hover);
}

/*
 * Квадрат с БЯЛ фон и `contain` — снимките на клиента са с различни
 * пропорции и подложки; `cover` режеше продукта, а раираният плейсхолдър
 * светеше през прозрачните PNG-та.
 */
.vm-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--vm-surface);
}

.vm-card__media img {
	width: 100%;
	height: 100%;
	padding: 10px;
	object-fit: contain;
}

/* Няма ли снимка изобщо, остава раето — по-добре от бяло нищо. */
.vm-card__media:not(:has(img)) {
	background: repeating-linear-gradient(135deg, var(--vm-shade-1), var(--vm-shade-1) 9px, var(--vm-shade-2) 9px, var(--vm-shade-2) 18px);
}

/*
 * ЕДИН бадж горе-ляво. Приоритетът (отстъпка > ХИТ > НОВО) се решава в PHP
 * (`vmbeauty_card_badge()`), а трите вида са с ЕДИН И СЪЩ стил — финалното
 * решение на дизайнера: 800 11px, бяло върху `--vm-blue-800`, 4/8, r6.
 */
.vm-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

.vm-badge,
.vm-badge--new,
.vm-badge--hit,
.vm-badge--sale {
	padding: 4px 8px;
	border-radius: var(--vm-r-xs);
	background: var(--vm-blue-800);
	color: var(--vm-surface);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0;
}

.vm-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 13px 13px 15px;
}

.vm-card__brand {
	margin: 0;
	color: var(--vm-muted-4);
	font-size: var(--vm-fs-xxs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vm-card__title {
	display: -webkit-box;
	margin: 5px 0 9px;
	min-height: 2.64em;
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
	line-height: 1.32;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vm-card__title:hover {
	color: var(--vm-blue-500);
}

.vm-card__timer {
	display: flex;
	align-items: center;
	gap: var(--vm-gap-xs);
	margin: 0 0 11px;
}

.vm-card__timer-label {
	color: var(--vm-icon);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vm-card__price {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: auto 0 0;
	color: var(--vm-ink);
	font-size: var(--vm-fs-lg);
	font-weight: 800;
}

.vm-card__price del {
	color: var(--vm-muted-4);
	font-size: 12.5px;
	font-weight: 500;
}

.vm-card__price ins {
	text-decoration: none;
}

/*
 * `flex-shrink: 0` не е излишно: картата е flex колона и при дълго име
 * бутонът се сплескваше до 2 реда — тогава долните ръбове в реда престават
 * да съвпадат. Фиксирана височина + без свиване = равни ръбове.
 */
.vm-card__add {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: var(--vm-gap-xs);
	height: 40px;
	margin-top: 11px;
	border-radius: var(--vm-r-btn);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background var(--vm-dur) ease, color var(--vm-dur) ease;
}

.vm-card__add:hover {
	background: var(--vm-blue-hover);
	color: var(--vm-surface);
}

.vm-card__add .vm-icon {
	width: 16px;
	height: 16px;
	stroke-width: 1.9;
}

/* Countdown в карта — по-дискретен от този в количката. */
.vm-card__timer .vm-countdown {
	margin: 0;
	padding: 4px 8px;
	border-radius: var(--vm-r-xs);
	background: var(--vm-tint);
	color: var(--vm-blue-800);
	font-family: ui-monospace, Menlo, monospace;
	font-size: var(--vm-fs-xs);
	font-weight: 800;
}

.vm-card__timer .vm-countdown__label {
	display: none;
}

/* ─── Категорийни карти ──────────────────────────────────────────────── */

.vm-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--vm-gap);
}

.vm-cat {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
	overflow: hidden;
	transition: border-color var(--vm-dur) ease, box-shadow var(--vm-dur) ease;
}

.vm-cat:hover {
	border-color: var(--vm-line-strong);
	box-shadow: var(--vm-shadow-card);
}

.vm-cat__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(135deg, var(--vm-tint), var(--vm-tint) 11px, var(--vm-shade-2) 11px, var(--vm-shade-2) 22px);
	background-size: cover;
	background-position: center;
}

.vm-cat__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 57, 118, 0) 40%, rgba(43, 57, 118, .42) 100%);
}

/*
 * Реалните имена на категориите са дълги („Пинсети за миглопластика") и се
 * чупеха на 1, 2 или 3 реда — картите ставаха различно високи. Два реда с
 * clamp + фиксирано дъно изравняват реда.
 */
.vm-cat__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 70px;
	padding: 15px 17px 17px;
}

.vm-cat__name {
	display: -webkit-box;
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .01em;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vm-cat__count {
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-tint);
	color: var(--vm-blue-500);
	font-size: var(--vm-fs-xxs);
	font-weight: 800;
}

/* ─── Блог ───────────────────────────────────────────────────────────── */

.vm-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.vm-post {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vm-line-soft);
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
	overflow: hidden;
}

.vm-post__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--vm-shade-1);
}

.vm-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vm-post__body {
	padding: 15px 17px 18px;
}

.vm-post__date {
	margin: 0;
	color: var(--vm-muted-4);
	font-size: var(--vm-fs-xs);
	font-weight: 600;
}

.vm-post__title {
	margin: 6px 0 10px;
	font-size: var(--vm-fs-sm);
	font-weight: 800;
	line-height: 1.3;
}

.vm-post__title a {
	color: var(--vm-ink);
}

.vm-post__title a:hover {
	color: var(--vm-blue-500);
}

.vm-post__more {
	color: var(--vm-blue-600);
	font-size: var(--vm-fs-xs);
	font-weight: 700;
}

/* ─── Бюлетин ────────────────────────────────────────────────────────── */

/*
 * В макета бюлетинът е КАРТА с градиент вътре в блока на блога, не тъмна лента
 * на цялата ширина. Фонът тук продължава тонирания блок на блога, за да са
 * визуално един блок, както в макета.
 */
.vm-news {
	padding: 0 0 52px;
	background: var(--vm-bg-2);
}

.vm-news__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	padding: 38px 44px;
	border-radius: var(--vm-r-xl);
	background: linear-gradient(120deg, var(--vm-blue-800), var(--vm-blue-700) 55%, var(--vm-blue-500));
	color: var(--vm-surface);
}

.vm-news__title {
	margin: 0;
	color: var(--vm-surface);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.vm-news__sub {
	margin: 6px 0 0;
	color: var(--vm-on-dark);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
}

.vm-news__form {
	display: flex;
	gap: 10px;
	flex: 1 1 320px;
	max-width: 460px;
}

.vm-news__form input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--vm-r);
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-size: var(--vm-fs);
}

.vm-news__form button {
	height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--vm-r);
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	font-family: var(--vm-font);
	font-size: var(--vm-fs-sm);
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
}

.vm-news__form button:hover {
	background: var(--vm-tint);
}

/* ─── Футър ──────────────────────────────────────────────────────────── */

/* Тъмносиньо, както в макета — не мастиленото на текста. */
.vm-footer {
	padding: 52px 0 30px;
	background: var(--vm-blue-800);
	color: var(--vm-on-dark);
}

/* Четири колони по макета: марка · Категории · Информация · Контакти. */
/*
 * ⚠️ Колоните са ПЕТ от Фаза 2.8 (бранд + Нашите продукти + За нас + Условия
 * + Контакти). Мрежата беше за четири и „Контакти" падаше на втори ред под
 * бранда.
 */
.vm-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr .8fr 1fr 1fr;
	gap: 40px;
}

.vm-footer__logo {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 16px;
}

.vm-footer__logo .vm-logo__name {
	color: var(--vm-surface);
}

.vm-footer__logo .vm-logo__sub {
	color: #8FA6EE;
}

.vm-footer__tagline {
	max-width: 320px;
	margin: 0;
	color: #B9C5EC;
	font-size: var(--vm-fs-sm);
	font-weight: 500;
	line-height: 1.6;
}

.vm-footer__heading {
	margin: 0 0 15px;
	color: var(--vm-surface);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .03em;
}

.vm-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-footer__list li {
	margin: 0;
	color: #B9C5EC;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.vm-footer__list a {
	color: #B9C5EC;
}

.vm-footer__list a:hover {
	color: var(--vm-surface);
}

.vm-footer__list--contacts {
	gap: 12px;
}

.vm-footer__phone {
	color: var(--vm-surface);
	font-size: 15px;
	font-weight: 700;
}

/* ─── Долната лента (копирайт + плащания) ────────────────────────────── */

.vm-pay-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vm-pay__label {
	color: #8FA0D6;
	font-size: 11px;
	font-weight: 600;
}

.vm-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-pay__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 30px;
	padding: 0 8px;
	border-radius: var(--vm-r-xs);
	background: rgba(255, 255, 255, .92);
	color: var(--vm-blue-800);
	font-size: var(--vm-fs-xxs);
	font-weight: 800;
	letter-spacing: .02em;
}

.site-info {
	background: var(--vm-blue-800);
	color: #8FA0D6;
	font-size: 12.5px;
}

.site-info .inside-site-info {
	max-width: var(--vm-container);
	margin: 0 auto;
	padding: 0 var(--vm-container-pad);
}

/*
 * Копирайтът и плащанията са двата края на един ред — както е долната лента в
 * макета. `.copyright-bar` е обвивката на GP около филтъра `generate_copyright`.
 */
.site-info .copyright-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.site-info a {
	color: var(--vm-on-dark);
}

/* ─── Мобилно за началната ───────────────────────────────────────────── */

@media (max-width: 1100px) {
	.vm-cats {
		grid-template-columns: repeat(3, 1fr);
	}

	.vm-usp__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 860px) {
	/* Д1 · Банерът остава ЦЯЛ и на пълна ширина; стрелките само стават по-малки. */
	.vm-hero__arrow {
		width: 34px;
		height: 34px;
	}

	.vm-hero__arrow .vm-icon {
		width: 15px;
		height: 15px;
	}

	.vm-hero__arrow--prev {
		left: 8px;
	}

	.vm-hero__arrow--next {
		right: 8px;
	}

	/*
	 * ⚠️ Точките слизат ПОД банера.
	 *
	 * На 390px банерът е висок 142px (1920×700 на пълна ширина) и точките,
	 * закачени за долния му ръб, лягаха ВЪРХУ снимката — и то точно върху
	 * текста в самия банер („VM BEAUTY…"). На десктоп 583px има място за
	 * тях отвътре; на телефон няма.
	 *
	 * Затова тук хирото става колона: банерът горе, а точките — в собствена
	 * светла лента отдолу. Стрелките си остават върху снимката, вертикално
	 * центрирани спрямо НЕЯ (виж `.vm-hero__track` по-долу).
	 */
	.vm-hero {
		display: flex;
		flex-direction: column;
	}

	.vm-hero__dots {
		position: static;
		justify-content: center;
		width: 100%;
		padding: 9px 0;
		border-radius: 0;
		background: var(--vm-tint-3);
		transform: none;
	}

	.vm-hero__dot {
		width: 7px;
		height: 7px;
	}

	.vm-hero__dot.is-active {
		width: 20px;
	}



	.vm-posts {
		grid-template-columns: 1fr;
	}

	/*
	 * USP-ите в мобилния макет са хоризонтален ред, не колона: четири карти под
	 * друга изтласкват съдържанието на цял екран надолу.
	 */
	.vm-usp__grid {
		display: flex;
		gap: 9px;
		overflow-x: auto;
		padding-bottom: 8px;
		scrollbar-width: none;
	}

	.vm-usp__grid::-webkit-scrollbar {
		display: none;
	}

	.vm-usp__item {
		flex: 0 0 auto;
		gap: 9px;
		padding: 11px 13px;
	}

	.vm-usp__icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
	}

	.vm-usp__title,
	.vm-usp__sub {
		white-space: nowrap;
	}

	.vm-cats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.vm-row {
		--vm-card: 200px;

		gap: 12px;
	}

	.vm-sec__nav {
		display: none; /* На тъч скролът е с пръст. */
	}

	.vm-sec {
		padding: 32px 0;
	}

	.vm-sec--offers {
		padding-bottom: 4px;
	}

	.vm-sec--cats {
		padding: 36px 0;
	}

	.vm-sec--tint {
		margin-top: 24px;
		padding: 32px 0;
	}

	.vm-sec__title {
		font-size: 22px;
	}

	.vm-container {
		padding: 0 16px;
	}

	.vm-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--vm-gap-md);
	}

	.vm-news {
		padding-bottom: 32px;
	}

	.vm-news__inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px 20px;
	}

	.vm-news__title {
		font-size: 21px;
	}

	.vm-news__form {
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
	}
}

@media (max-width: 480px) {
	.vm-row {
		--vm-card: 168px;
	}

	/* В тясната карта надписът на бутона се пренася — да остане четим. */
	.vm-card__add {
		font-size: 11px;
		line-height: 1.15;
		text-align: center;
	}

	.vm-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Продуктова страница · v3 доуточнения ───────────────────────────── */

.vm-single-product div.product .product_title {
	font-weight: 800;
	letter-spacing: -.02em;
}

.vm-single-product div.product p.price,
.vm-single-product div.product span.price {
	font-size: 30px;
	font-weight: 800;
}

.vm-sale-timer {
	display: flex;
	align-items: center;
	gap: var(--vm-gap-sm);
	flex-wrap: wrap;
	margin: 0 0 var(--vm-gap);
	padding: 12px 14px;
	border-radius: var(--vm-r);
	background: var(--vm-tint);
}

.vm-sale-timer__label {
	margin: 0;
	color: var(--vm-blue-800);
	font-size: var(--vm-fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vm-sale-timer .vm-countdown {
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--vm-r-xs);
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	font-family: ui-monospace, Menlo, monospace;
	font-size: var(--vm-fs-sm);
	font-weight: 800;
}

.vm-sale-timer .vm-countdown__label {
	display: none;
}

.vm-assurance {
	display: grid;
	gap: 8px;
	margin: var(--vm-gap) 0 0;
	padding: var(--vm-gap-sm) var(--vm-gap);
	border: 1px solid var(--vm-line-soft);
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
	list-style: none;
}

.vm-assurance__item {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0;
	font-size: var(--vm-fs-sm);
}

.vm-assurance__title {
	color: var(--vm-ink);
	font-weight: 800;
}

.vm-assurance__sub {
	color: var(--vm-muted-2);
	font-weight: 600;
	font-size: var(--vm-fs-xs);
}

.vm-assurance__item--phone {
	align-items: center;
	padding-top: 8px;
	border-top: 1px solid var(--vm-line-soft);
}

.vm-assurance__item--phone a {
	color: var(--vm-blue-600);
	font-weight: 800;
}

/* Количката по v3 */

.vm-progress-group {
	border-color: var(--vm-line-soft);
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow);
}

.vm-progress__text {
	font-weight: 700;
}

.vm-countdown {
	background: var(--vm-tint);
	color: var(--vm-blue-800);
	font-weight: 700;
}

.wc-proceed-to-checkout a.checkout-button {
	border-radius: var(--vm-r);
	font-size: var(--vm-fs);
}

#content .cart-collaterals .cart_totals {
	border-radius: var(--vm-r-lg);
	border-color: var(--vm-line-soft);
}

/* ─── Обвивка на началната (фикс след живо QA) ───────────────────────── */

/*
 * GP дава `.site-content { display: flex }`. Всяка секция, оставена като
 * пряко дете, става отделен flex елемент и на 1600px секциите се редят ЕДНА
 * ДО ДРУГА — хирото взима ширината, останалото пада в тясна дясна колона.
 * `.vm-front` е единственият наследник и заема цялата ширина.
 *
 * `min-width: 0` е задължително: flex елемент по подразбиране не се свива под
 * съдържанието си, а вътре има grid-ове и marquee с `width: max-content`.
 */
#content > .vm-front,
.vm-front {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/* Началната няма нужда от паддинга на статия — секциите си носят свой. */
.home #content > .content-area,
.home .inside-article {
	padding: 0;
}

/* ─── Съдържанието на страницата „Начало" ────────────────────────────── */

.vm-page-content .vm-prose {
	padding: var(--vm-gap-md) var(--vm-gap-lg);
	border: 1px solid var(--vm-line-soft);
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow);
}

.vm-prose {
	color: var(--vm-ink-soft);
	font-size: var(--vm-fs);
	line-height: 1.65;
}

.vm-prose > *:first-child {
	margin-top: 0;
}

.vm-prose > *:last-child {
	margin-bottom: 0;
}

.vm-prose h1,
.vm-prose h2,
.vm-prose h3,
.vm-prose h4 {
	margin: 1.2em 0 .5em;
	color: var(--vm-ink);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2;
}

.vm-prose h1,
.vm-prose h2 {
	font-size: var(--vm-fs-xl);
}

.vm-prose h3 {
	font-size: 22px;
}

.vm-prose h4 {
	font-size: var(--vm-fs-lg);
}

.vm-prose p {
	margin: 0 0 1em;
}

.vm-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--vm-r);
}

.vm-prose ul,
.vm-prose ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.vm-prose li {
	margin-bottom: .4em;
}

/*
 * Elementor остави своите обвивки в съдържанието. Не се бият с наши правила —
 * само им се маха фиксираната ширина, за да не изкарват хоризонтален скрол.
 */
.vm-prose .elementor-section,
.vm-prose .elementor-container,
.vm-prose .elementor-widget-wrap,
.vm-prose .elementor-column {
	max-width: 100%;
	width: auto;
	min-width: 0;
	padding: 0;
	margin: 0;
}

@media (max-width: 860px) {
	.vm-page-content .vm-prose {
		padding: var(--vm-gap) var(--vm-gap);
	}
}

/* ─── Sale бадж на продуктовата страница (фикс след живо QA) ─────────── */

/*
 * Дефолтният Woo бадж е жълто-зелен овал 3.7em с `position: absolute` и
 * `border-radius: 100%`. Тук става същият правоъгълен бадж като по картите.
 * Селекторът минава през `.woocommerce` + `span.onsale`, за да бие
 * специфичността на woocommerce.css, който се зарежда СЛЕД темата.
 */
.woocommerce .vm-single-product span.onsale,
.vm-single-product .woocommerce span.onsale,
.vm-single-product div.product span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	display: inline-block;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--vm-r-xs);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: var(--vm-fs-xxs);
	font-weight: 800;
	letter-spacing: .05em;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
}

/* Галерията е relative, за да е баджът спрямо снимката, а не спрямо екрана. */
.vm-single-product div.product .woocommerce-product-gallery {
	position: relative;
}

/* ═══ СТРАНИЧНА КОЛИЧКА (панел по v3) ════════════════════════════════════ */

.vm-drawer {
	position: fixed;
	inset: 0;
	z-index: 300;
}

.vm-drawer[hidden] {
	display: none;
}

.vm-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 21, 38, .42);
	opacity: 0;
	transition: opacity .18s ease;
}

.vm-drawer.is-open .vm-drawer__overlay {
	opacity: 1;
}

/* 428px е ширината от макета; под 92vw панелът би излязъл от екрана. */
.vm-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 428px;
	max-width: 92vw;
	background: var(--vm-surface);
	box-shadow: -24px 0 60px -20px rgba(15, 21, 38, .4);
	transform: translateX(100%);
	transition: transform .22s ease;
}

.vm-drawer.is-open .vm-drawer__panel {
	transform: none;
}

.vm-drawer__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.vm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--vm-line-soft);
}

.vm-drawer__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--vm-ink);
	font-size: var(--vm-fs-lg);
	font-weight: 800;
}

.vm-drawer__title .vm-icon {
	width: 21px;
	height: 21px;
	color: var(--vm-blue-800);
	stroke-width: 1.8;
}

.vm-drawer__count {
	color: var(--vm-muted-3);
	font-weight: 700;
}

.vm-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--vm-r-sm);
	background: transparent;
	color: var(--vm-muted);
	cursor: pointer;
}

.vm-drawer__close:hover {
	background: var(--vm-tint-3);
	color: var(--vm-ink);
}

.vm-drawer__close .vm-icon {
	width: 20px;
	height: 20px;
	stroke-width: 2;
}

/* ─── Прогресът: ЕДИН бар до подаръка с два маркера ─────────────────── */

.vm-drawer__progress {
	padding: 18px 22px;
	background: var(--vm-bg-2);
	border-bottom: 1px solid var(--vm-line-soft);
}

.vm-drawer__progress-text {
	margin: 0 0 11px;
	color: var(--vm-ink-soft);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
}

.vm-drawer__progress-text b {
	color: var(--vm-blue-800);
	font-weight: 800;
}

.vm-drawer__progress-text.is-done {
	color: var(--vm-blue-800);
	font-weight: 700;
}

.vm-drawer__track {
	position: relative;
	height: 8px;
	border-radius: 5px;
	background: #E2E8F4;
	overflow: hidden;
}

.vm-drawer__fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--vm-blue-500), var(--vm-blue-600));
	transition: width .4s ease;
}

.vm-drawer__marks {
	position: relative;
	height: 20px;
	margin-top: 5px;
}

.vm-drawer__mark {
	position: absolute;
	transform: translateX(-50%);
	color: var(--vm-muted);
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.vm-drawer__mark--end {
	right: 0;
	left: auto;
	transform: none;
	color: var(--vm-blue-800);
}

.vm-drawer__mark.is-done {
	color: var(--vm-ok);
}

/* ─── Редовете ───────────────────────────────────────────────────────── */

.vm-drawer__items {
	flex: 1;
	margin: 0;
	padding: 8px 22px;
	overflow-y: auto;
	list-style: none;
}

.vm-drawer__item {
	display: flex;
	gap: 13px;
	padding: 15px 0;
	border-bottom: 1px solid #F0F3F9;
}

.vm-drawer__item.is-busy {
	opacity: .45;
	pointer-events: none;
}

.vm-drawer__thumb {
	display: block;
	flex-shrink: 0;
	width: 74px;
	height: 74px;
	border: 1px solid var(--vm-line-soft);
	border-radius: 10px;
	background: var(--vm-shade-1);
	overflow: hidden;
}

.vm-drawer__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vm-drawer__body {
	flex: 1;
	min-width: 0;
}

.vm-drawer__brand {
	margin: 0;
	color: #A6AFC4;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vm-drawer__name {
	display: -webkit-box;
	margin: 3px 0 8px;
	color: var(--vm-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vm-drawer__name a {
	color: inherit;
}

.vm-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.vm-drawer__price {
	color: var(--vm-ink);
	font-size: 15px;
	font-weight: 800;
}

.vm-drawer__price del {
	display: none; /* В панела мястото стига само за реалната сума. */
}

.vm-drawer__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #B4BCCD;
	cursor: pointer;
}

.vm-drawer__remove:hover {
	color: var(--vm-sale);
}

.vm-drawer__remove .vm-icon {
	width: 16px;
	height: 16px;
	stroke-width: 1.9;
}

/* ─── Количество (панел + Woo полета) ────────────────────────────────── */

.vm-qty,
.woocommerce .quantity[data-vm-qty] {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--vm-line-head);
	border-radius: 8px;
	overflow: hidden;
}

.vm-qty__btn {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vm-blue-800);
	font-family: var(--vm-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.vm-qty__btn:hover {
	background: var(--vm-tint-3);
}

.vm-qty__value {
	min-width: 26px;
	color: var(--vm-ink);
	font-size: 13px;
	font-weight: 800;
	text-align: center;
}

/* Woo полето между двата бутона — без рамка и без стрелките на браузъра. */
.woocommerce .quantity[data-vm-qty] input.qty {
	width: 44px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--vm-ink);
	font-family: var(--vm-font);
	font-size: 15px;
	font-weight: 800;
	text-align: center;
	-moz-appearance: textfield;
}

.woocommerce .quantity[data-vm-qty] input.qty::-webkit-outer-spin-button,
.woocommerce .quantity[data-vm-qty] input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.woocommerce .quantity[data-vm-qty] .vm-qty__btn {
	width: 40px;
	height: 40px;
	font-size: 18px;
}

/* ─── Дъното на панела ───────────────────────────────────────────────── */

.vm-drawer__foot {
	padding: 18px 22px 22px;
	border-top: 1px solid var(--vm-line-soft);
}

.vm-drawer__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	color: var(--vm-muted);
	font-size: 14px;
	font-weight: 600;
}

.vm-drawer__subtotal strong {
	color: var(--vm-ink);
	font-size: 22px;
	font-weight: 800;
}

.woocommerce a.vm-drawer__checkout,
.vm-drawer__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 54px;
	border-radius: 14px;
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: 15px;
	font-weight: 800;
}

.woocommerce a.vm-drawer__checkout:hover,
.vm-drawer__checkout:hover {
	background: var(--vm-blue-hover);
	color: var(--vm-surface);
}

.vm-drawer__checkout .vm-icon {
	width: 18px;
	height: 18px;
	stroke-width: 2.2;
}

.vm-drawer__continue {
	width: 100%;
	height: 46px;
	margin-top: 9px;
	border: 0;
	background: transparent;
	color: var(--vm-blue-800);
	font-family: var(--vm-font);
	font-size: var(--vm-fs-sm);
	font-weight: 700;
	cursor: pointer;
}

.vm-drawer__continue:hover {
	color: var(--vm-blue-500);
}

.vm-drawer__empty {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--vm-muted-3);
	text-align: center;
}

.vm-drawer__empty .vm-icon {
	width: 54px;
	height: 54px;
	color: var(--vm-line-strong);
	stroke-width: 1.4;
}

.vm-drawer__empty p {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

/* Страницата под панела не се скролва — иначе фонът бяга под пръста. */
body.vm-cart-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.vm-drawer__panel {
		width: 100%;
		max-width: none;
	}
}

/* ═══ ПРОДУКТОВА СТРАНИЦА · v3 ═══════════════════════════════════════════ */

.vm-single__brand {
	margin: 0 0 8px;
	color: var(--vm-blue-500);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.vm-single-product div.product .product_title {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.02em;
}

/* Рейтингът след заглавието (Woo го рисува само при включени отзиви). */
.vm-single-product div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	font-size: 13px;
}

.vm-single-product div.product .woocommerce-product-rating .star-rating {
	color: var(--vm-blue-500);
	font-size: 15px;
}

.vm-single-product div.product .woocommerce-review-link {
	color: var(--vm-muted-3);
	font-weight: 600;
}

/*
 * ⚠️ Специфичността хапе: `.woocommerce div.product p.price` в ядрото на Woo е
 * (0,2,2) и боядисва цената в розово. По-къс селектор тихо не се прилага.
 */
.woocommerce.vm-single-product div.product p.price,
.woocommerce.vm-single-product div.product span.price,
.vm-single-product div.product p.price,
.vm-single-product div.product span.price {
	display: flex;
	align-items: baseline;
	gap: 13px;
	flex-wrap: wrap;
	margin: 22px 0 0;
	color: var(--vm-ink);
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.woocommerce.vm-single-product div.product p.price del,
.woocommerce.vm-single-product div.product span.price del,
.vm-single-product div.product p.price del,
.vm-single-product div.product span.price del {
	color: #A6AFC4;
	font-size: 20px;
	font-weight: 500;
	opacity: 1;
}

.woocommerce.vm-single-product div.product p.price ins,
.woocommerce.vm-single-product div.product span.price ins,
.vm-single-product div.product p.price ins,
.vm-single-product div.product span.price ins {
	background: transparent;
	color: var(--vm-ink);
	font-weight: 800;
	text-decoration: none;
}

.vm-single__note {
	margin: 5px 0 0;
	color: var(--vm-muted-3);
	font-size: 12.5px;
	font-weight: 600;
}

.vm-single__dot {
	margin: 0 4px;
	color: var(--vm-line-strong);
}

/* Редът с атрибутите под цената. */
.vm-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.vm-specs__item {
	margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--vm-line-head);
	border-radius: 10px;
}

.vm-specs__label {
	display: block;
	color: var(--vm-muted-3);
	font-size: 10.5px;
	font-weight: 600;
}

.vm-specs__value {
	color: var(--vm-ink);
	font-size: 14px;
	font-weight: 800;
}

/*
 * Бутонът „Добави в количката": Woo го боядисва с `.woocommerce button.button`
 * (0,2,1) в лилаво. Оттам и дългият селектор — по-къс просто не се прилага.
 */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.vm-single-product div.product .single_add_to_cart_button {
	/*
	 * ⚠️ Тук имаше `min-width: 0` срещу +6px хоризонтален скрол — и той пресви
	 * бутона до 104px с надпис на три реда. Правилното решение е другото:
	 * `flex-basis: auto` (расте по съдържанието си, а не от нула) + `nowrap`
	 * (текстът не се чупи), а тесният екран се поема от `flex-wrap: wrap`
	 * върху формата — бутонът просто слиза на свой ред.
	 */
	flex: 1 1 auto;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: 14px;
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-family: var(--vm-font);
	font-size: 15px;
	font-weight: 800;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:focus {
	background: var(--vm-blue-hover);
	color: var(--vm-surface);
}

.vm-single-product div.product form.cart {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
}

.vm-single-product div.product form.variations_form.cart {
	display: block;
}

.vm-single-product div.product form.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 12px;
}

.vm-single-product div.product form.cart .quantity[data-vm-qty] {
	height: 56px;
	border-radius: 12px;
}

.vm-single-product div.product form.cart .quantity[data-vm-qty] input.qty,
.vm-single-product div.product form.cart .quantity[data-vm-qty] .vm-qty__btn {
	height: 54px;
}

.vm-single-product div.product form.cart .quantity[data-vm-qty] .vm-qty__btn {
	width: 48px;
	font-size: 22px;
}

/* Табовете по v3. */
body.vm-single-product #content div.product .woocommerce-tabs ul.tabs,
.vm-single-product #content div.product .woocommerce-tabs ul.tabs,
.vm-single-product .woocommerce-tabs ul.tabs {
	display: flex;
	/* Б3 · разстоянието по макета е 40px, не 4px. */
	gap: 40px;
	margin: 0;
	padding: 0;
	overflow: visible;
	border-bottom: 1.5px solid var(--vm-line-soft);
}

.vm-single-product .woocommerce-tabs ul.tabs::before,
.vm-single-product .woocommerce-tabs ul.tabs li::before,
.vm-single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body.vm-single-product #content div.product .woocommerce-tabs ul.tabs li,
.vm-single-product #content div.product .woocommerce-tabs ul.tabs li,
.vm-single-product .woocommerce-tabs ul.tabs li {
	margin: 0 0 -1.5px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.vm-single-product #content div.product .woocommerce-tabs ul.tabs li a,
.vm-single-product #content div.product .woocommerce-tabs ul.tabs li a,
.vm-single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 0;
	border-bottom: 2px solid transparent;
	color: var(--vm-muted);
	font-size: 14.5px;
	font-weight: 800;
}

body.vm-single-product #content div.product .woocommerce-tabs ul.tabs li.active a,
.vm-single-product #content div.product .woocommerce-tabs ul.tabs li.active a,
.vm-single-product .woocommerce-tabs ul.tabs li.active a,
.vm-single-product .woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var(--vm-blue-500);
	color: var(--vm-ink);
}

.vm-single-product .woocommerce-tabs .panel {
	padding: 28px 0 8px;
	color: var(--vm-ink-soft);
	font-size: var(--vm-fs);
	line-height: 1.65;
}

.vm-single-product .woocommerce-tabs .panel > h2:first-child {
	display: none; /* Табът вече казва какво е това. */
}

/* ═══ БАНЕР НА КАТЕГОРИЯ · доуточнения по v3 ════════════════════════════ */

.vm-cat-banner__eyebrow {
	margin: 0 0 10px;
	color: var(--vm-line-strong);
	font-size: var(--vm-fs-xs);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.vm-cat-banner--plain .vm-cat-banner__eyebrow {
	color: var(--vm-blue-500);
}

/* ─── Двуколонният лейаут на продукта (галерия + резюме) ─────────────── */

/*
 * Woo дава `float: left/right` + 48% ширина (woocommerce.css). Макетът е
 * grid 1fr 1fr с 44px междина и лепната галерия. Селекторите са с
 * `div.product`, за да бият (0,2,2) на ядрото — по-къс селектор тихо пада.
 */
.vm-single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: start;
}

/*
 * ⚠️ СПЕЦИФИЧНОСТ, на два пъти:
 *
 *  1. `woocommerce.css` дава `.woocommerce div.product div.images` = (0,3,2).
 *     Селектор с три класа и един елемент е (0,3,1) и ГУБИ → галерията остава
 *     48% (287px вместо 610px).
 *  2. `woocommerce-LAYOUT.css` дава `.woocommerce #content div.product
 *     div.images` — с **ID**. Никакъв брой класове не бие ID, затова дори
 *     `.woocommerce.vm-single-product …` (0,5,2) губеше и галерията стоеше
 *     598px на живо.
 *
 * ⚠️ И `#content` СЪС САМО класове пак не стига: `.woocommerce` е клас, тоест
 * правилото на Woo е (1,3,2) — точно колкото `.vm-single-product #content
 * div.product div.images`. При РАВНА специфичност решава редът на листовете, а
 * Woo се зарежда след темата. Оттам `body` отпред: (1,3,3).
 */
body.vm-single-product #content div.product div.images,
.vm-single-product #content div.product div.images,
.woocommerce.vm-single-product div.product div.images.woocommerce-product-gallery,
.woocommerce.vm-single-product div.product div.images,
.vm-single-product div.product .woocommerce-product-gallery {
	/*
	 * ⚠️ БЕЗ `position: sticky`. Табовете и „Сходни продукти" са item-и на
	 * СЪЩИЯ грид (`grid-column: 1 / -1`), а лепкавият елемент се ограничава от
	 * своя containing block — не от реда, в който стои. При скрол галерията
	 * минаваше ВЪРХУ тях, а мобилно — върху бутона „Добавяне в количката".
	 * Лепкавост тук се връща само ако галерията и резюмето получат собствена
	 * двуколонна обвивка, извън която да са табовете.
	 */
	position: relative;
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
}

/*
 * Клонингът на zoom плъгина е img 1500×1500 върху галерията. Zoom-ът е изключен
 * в `inc/setup.php` (в макета го няма), но ако плъгин го върне — тук се скрива.
 */
.vm-single-product div.product .zoomImg {
	display: none !important;
}

/*
 * Не тръгне ли flexslider (няма `.flex-viewport`), всички снимки увисват една
 * под друга и галерията изглежда счупена. Тогава се показва само първата, а
 * JS-ът закача миниатюрите да я сменят (`vm-gallery-static`).
 */
.vm-single-product div.product .woocommerce-product-gallery:not(:has(.flex-viewport)):not(.vm-gallery-static) .woocommerce-product-gallery__wrapper > *:not(:first-child) {
	display: none;
}

.vm-single-product div.product .woocommerce-product-gallery.vm-gallery-static .woocommerce-product-gallery__wrapper > * {
	display: none;
}

.vm-single-product div.product .woocommerce-product-gallery.vm-gallery-static .woocommerce-product-gallery__wrapper > .is-active {
	display: block;
}

.vm-single-product div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: var(--vm-r-xl);
}

/*
 * ⚠️ `min-width: auto` на grid item се смята от min-content на съдържанието.
 * „Сходни продукти" мобилно е flex скролер с карти по 160px — но правилото
 * „скролиращият контейнер не свива родителя" важи само за flex/grid ITEM-и,
 * а `ul.products` е обикновен блок вътре в `section.related`. Затова
 * min-content на секцията става 3×160+gap = 504px и разпъва цялата колона
 * (мокът го хвана: 520/390 хоризонтален скрол на 390px).
 */
.vm-single-product div.product .summary,
.vm-single-product div.product .woocommerce-product-gallery,
.vm-single-product div.product .related,
.vm-single-product div.product .upsells,
.vm-single-product div.product .woocommerce-tabs {
	min-width: 0;
}

/* Същата сметка като при галерията, включително `body` + `#content`. */
body.vm-single-product #content div.product div.summary,
.vm-single-product #content div.product div.summary,
.woocommerce.vm-single-product div.product div.summary,
.vm-single-product div.product .summary {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.vm-single-product div.product .woocommerce-tabs,
.vm-single-product div.product .related,
.vm-single-product div.product .upsells,
.vm-single-product div.product .woocommerce-product-gallery + .summary ~ * {
	grid-column: 1 / -1;
}

.vm-single-product div.product .related ul.products,
.vm-single-product div.product .upsells ul.products {
	grid-template-columns: repeat(4, 1fr);
}

.vm-single-product div.product .related > h2,
.vm-single-product div.product .upsells > h2 {
	margin: 0 0 var(--vm-gap-md);
	color: var(--vm-ink);
	font-size: var(--vm-fs-xl);
	font-weight: 800;
	letter-spacing: -.02em;
}

@media (max-width: 900px) {
	.vm-single-product div.product {
		grid-template-columns: 1fr;
		gap: var(--vm-gap-md);
	}

	.vm-single-product div.product .woocommerce-product-gallery {
		position: static;
	}

	.vm-single-product div.product .related ul.products,
	.vm-single-product div.product .upsells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.woocommerce.vm-single-product div.product p.price,
	.vm-single-product div.product p.price {
		font-size: 28px;
	}
}

/* Табовете са <ul> — без това браузърът им слага точки пред всеки таб. */
.vm-single-product .woocommerce-tabs ul.tabs,
.vm-single-product .woocommerce-tabs ul.tabs li {
	list-style: none;
}

/*
 * „Сходни продукти" е 4 колони (v3). Базовото правило е `#content ul.products`
 * — с ID, тоест (1,1,1): всяко правило само с класове тихо губи. Оттам и
 * `#content` тук (капан №3 от CLAUDE.md).
 */
#content .related ul.products,
#content .upsells ul.products {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
	#content .related ul.products,
	#content .upsells ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {
	#content .related ul.products,
	#content .upsells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Woo widget-ът за слоеста навигация слага брояча като СЕСТРА на връзката
 * (`<li><a>C</a><span class="count">24</span></li>`). Щом връзката е flex
 * блок, броячът пада на нов ред — затова редът е самият <li>.
 */
.vm-filters .woocommerce-widget-layered-nav-list li,
.vm-filters .woocommerce-widget-layered-nav-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vm-filters .woocommerce-widget-layered-nav-list li a {
	flex: 1;
}

/* ═══ МОБИЛНО ПО ОТДЕЛНИЯ МОБИЛЕН МАКЕТ v3 ══════════════════════════════
 *
 * ⚠️ Мобилното в v3 НЕ е свит десктоп. Различни са: реда на секциите на
 * началната, заглавията (къси), долната лента с пет бутона, менюто (панел от
 * ляво) и филтрите (долен лист вместо сайдбар).
 *
 * Маркъпът е един и същ — тук се крие, пренарежда и преоразмерява.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── Долна лента (62px, лепната) ────────────────────────────────────── */

.vm-tabbar {
	display: none; /* Само мобилно — виж media блока долу. */
}

.vm-tabbar__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	position: relative;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #98A3BD;
	font-family: var(--vm-font);
	font-size: 9.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.vm-tabbar__item.is-active {
	color: var(--vm-blue-500);
}

.vm-tabbar__item.is-soon {
	opacity: .55;
	cursor: default;
}

.vm-tabbar__item .vm-icon {
	width: 22px;
	height: 22px;
	stroke-width: 1.8;
}

.vm-tabbar__cart .vm-minicart__count {
	position: absolute;
	top: -2px;
	right: 50%;
	margin-right: -20px;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	font-size: 8.5px;
}

/* ─── Панелът „Меню" (бургер + бутон „Категории") ────────────────────── */

.vm-menu {
	position: fixed;
	inset: 0;
	z-index: 320;
}

.vm-menu[hidden] {
	display: none;
}

.vm-menu__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 21, 38, .45);
	opacity: 0;
	transition: opacity .18s ease;
}

.vm-menu.is-open .vm-menu__overlay {
	opacity: 1;
}

.vm-menu__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 82%;
	max-width: 340px;
	background: var(--vm-surface);
	box-shadow: 24px 0 60px -20px rgba(15, 21, 38, .4);
	transform: translateX(-100%);
	transition: transform .22s ease;
}

.vm-menu.is-open .vm-menu__panel {
	transform: none;
}

.vm-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 18px;
	background: var(--vm-blue-800);
	color: var(--vm-surface);
}

.vm-menu__title {
	font-size: 16px;
	font-weight: 800;
}

.vm-menu__close {
	display: flex;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vm-surface);
	cursor: pointer;
}

.vm-menu__close .vm-icon {
	width: 22px;
	height: 22px;
	stroke-width: 2;
}

.vm-menu__list {
	flex: 1;
	margin: 0;
	padding: 10px 0;
	overflow-y: auto;
	list-style: none;
}

.vm-menu__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	color: #26314F;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.vm-menu__list a:hover {
	background: var(--vm-tint-3);
}

.vm-menu__list .vm-icon {
	width: 18px;
	height: 18px;
	color: var(--vm-line-strong);
	stroke-width: 2;
}

.vm-menu__phone {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 18px;
	border-top: 1px solid var(--vm-line-soft);
	color: var(--vm-blue-800);
	font-size: 15px;
	font-weight: 800;
}

/* Бургерът е само мобилен. */
.vm-burger {
	display: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vm-blue-800);
	cursor: pointer;
}

.vm-burger .vm-icon {
	width: 24px;
	height: 24px;
	stroke-width: 2;
}

/* Късото заглавие се показва само мобилно. */
.vm-sec__title-short,
.vm-brands__title-short {
	display: none;
}

/* ─── „Защо ВМ Бюти" (заменя стария гол блок „Защо нас") ─────────────── */

.vm-why__intro {
	max-width: 720px;
	margin: 10px auto 0;
	color: var(--vm-muted);
	font-size: var(--vm-fs-md);
	line-height: 1.6;
}

.vm-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--vm-gap);
}

/* Таблет: 4 колони не се събират — 2×2 (правилото е СЛЕД базовото). */
@media (max-width: 1100px) {
	.vm-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.vm-why__card {
	padding: 24px 22px 26px;
	border: 1px solid var(--vm-line-soft);
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow);
}

.vm-why__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 15px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-tint);
	color: var(--vm-blue-500);
}

.vm-why__icon .vm-icon {
	width: 23px;
	height: 23px;
	stroke-width: 1.8;
}

.vm-why__title {
	margin: 0 0 8px;
	color: var(--vm-ink);
	font-size: var(--vm-fs-md);
	font-weight: 800;
	line-height: 1.25;
}

.vm-why__text {
	margin: 0;
	color: var(--vm-muted);
	font-size: var(--vm-fs-sm);
	line-height: 1.6;
}

/* ─── Дълги групи филтри: 190px и „Покажи още (n)" ───────────────────── */

/*
 * Групата „Марка" на тази инсталация има десетки термина и изяждаше целия
 * сайдбар. Списъкът се сгъва до 190px (≈6 реда) и се разгъва с бутона —
 * `max-height` е на списъка, за да остане бутонът винаги видим.
 */
.vm-filters__list.is-long,
.vm-filters__group ul.is-long {
	max-height: 190px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.vm-filters__group.is-expanded .vm-filters__list.is-long,
.vm-filters__group.is-expanded ul.is-long {
	max-height: none;
	overflow-y: visible;
}

.vm-filters__more {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vm-blue-500);
	font-size: var(--vm-fs-xs);
	font-weight: 700;
	cursor: pointer;
}

.vm-filters__more:hover {
	color: var(--vm-blue-hover);
}

/* ─── Вариации: Woo select-ите по стила на макета ────────────────────── */

/*
 * ⚠️ `.woocommerce div.product form.cart .variations select` в ядрото е
 * (0,4,2) — правило само с нашите класове тихо губи. Оттам `body` + пълният
 * път (капанът е същият като при цената и галерията).
 */
body.vm-single-product div.product form.cart .variations select,
.woocommerce.vm-single-product div.product form.cart .variations select {
	width: 100%;
	height: 44px;
	padding: 0 34px 0 12px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r-btn);
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
}

body.vm-single-product div.product form.cart .variations select:focus,
.woocommerce.vm-single-product div.product form.cart .variations select:focus {
	border-color: var(--vm-blue-500);
	box-shadow: var(--vm-ring);
	outline: none;
}

.vm-single-product div.product form.cart .variations th,
.vm-single-product div.product form.cart .variations label {
	color: var(--vm-ink-soft);
	font-size: var(--vm-fs-sm);
	font-weight: 700;
}

.vm-single-product div.product form.cart .reset_variations {
	color: var(--vm-muted-3);
	font-size: var(--vm-fs-xs);
	font-weight: 600;
}

/* ─── Нула отзива: покана вместо празен звезден ред ──────────────────── */

.vm-first-review {
	margin: 14px 0 0;
	font-size: 13px;
}

.vm-first-review a {
	color: var(--vm-blue-500);
	font-weight: 700;
}

.vm-first-review a:hover {
	color: var(--vm-blue-hover);
}

/* ═══ БЛОК Г · от клиентския преглед ═════════════════════════════════ */

/* ─── Г2 · Бутоните НЕ почерняват на hover ───────────────────────────── */

/*
 * ⚠️ GeneratePress дава `button:hover { background: #3f4047 }` — (0,1,1).
 * Всеки НАШ бутон, чието hover правило не сетва фон, го наследяваше и
 * почерняваше (стрелките на секциите бяха най-видими, но не единствени).
 *
 * ⚠️ `:where()` е с НУЛЕВА специфичност — оттам и целият селектор е (0,1,1),
 * тоест точно колкото GP-шкия. При равенство печели по-късният лист, а нашият
 * се зарежда след родителския. Всяко наше правило с клас (≥ 0,2,0) пък бие
 * този ресет, тоест нарочните hover фонове по-долу остават непокътнати.
 */
:where(.vm-topbar, .vm-header, .vm-nav, .vm-front, .vm-shop, .vm-blog, .vm-article,
	.vm-footer, .vm-drawer, .vm-menu, .vm-filters, .vm-tabbar, .vm-buybar,
	.woocommerce-tabs, .vm-sec, .vm-hero, .vm-news, .related, .up-sells,
	.vm-related, .vm-checkout, .vm-account, .vm-contacts, .vm-about) button:hover,
:where(.vm-topbar, .vm-header, .vm-nav, .vm-front, .vm-shop, .vm-blog, .vm-article,
	.vm-footer, .vm-drawer, .vm-menu, .vm-filters, .vm-tabbar, .vm-buybar,
	.woocommerce-tabs, .vm-sec, .vm-hero, .vm-news, .related, .up-sells,
	.vm-related, .vm-checkout, .vm-account, .vm-contacts, .vm-about) button:focus {
	background: transparent;
}

/* Изрично за всеки бутон, за да не зависи нищо от реда на листовете. */
/*
 * ⚠️ Фонът е ИЗРИЧЕН. GP дава `button:hover { background: #3f4047 }` и всеки
 * наш бутон без собствен hover фон почернява — това беше Г2 и пак се появи
 * при стрелките на „Клиентите разглеждат също" (Д4).
 */
.vm-arrow:hover,
.vm-arrow:focus-visible,
.vm-sec__arrow:hover,
.vm-sec__arrow:focus-visible,
.related .vm-sec__arrow:hover,
.vm-hero__arrow:hover {
	border-color: var(--vm-blue-500);
	background: var(--vm-surface);
	color: var(--vm-blue-500);
}

.vm-burger:hover,
.vm-menu__close:hover,
.vm-filters__close:hover,
.vm-drawer__close:hover {
	background: var(--vm-tint-3);
	color: var(--vm-blue-500);
}

.vm-filters__toggle:hover {
	border-color: var(--vm-blue-500);
	background: var(--vm-surface);
	color: var(--vm-blue-500);
}

.vm-filters__more:hover,
.vm-drawer__remove:hover,
.vm-drawer__continue:hover,
.vm-acc__head:hover {
	background: transparent;
	color: var(--vm-blue-hover);
}

.vm-tabbar__item:hover,
.vm-lang__item:hover {
	background: transparent;
	color: var(--vm-blue-500);
}

/* Точката Е фон — „background: transparent" на hover просто я изтриваше. */
.vm-hero__dot:hover {
	background: var(--vm-blue-hover);
}

.vm-hero__dot.is-active:hover {
	background: var(--vm-blue-500);
}

/* Лепкавата лента на продуктовата — намерен от hover одита на 390. */
.vm-buybar__add:hover,
.vm-coupon__apply.button:hover,
.vm-filters__apply:hover {
	background: var(--vm-blue-hover);
	color: var(--vm-surface);
}

.vm-tabbar__item.is-soon:hover,
.vm-action--wish.is-soon:hover {
	background: transparent;
	color: var(--vm-icon);
}

/* ─── Г3 · Хиро банерите (истинските снимки от живия сайт) ───────────── */

/*
 * Г3 е ОТМЕНЕНО. Д1 (21.08) е окончателното: хирото е ЦЯЛ банер слайдер без
 * текст и без скрим — правилата са горе, при `.vm-hero__track`.
 */

/* ─── Г4 · Логата на марките ─────────────────────────────────────────── */

.vm-brands__item img.vm-brands__logo {
	max-width: 140px;
	max-height: 40px;
	height: 40px;
	width: auto;
	object-fit: contain;
}

/* ═══ ФАЗА 2.8а · поправки от живата проверка ════════════════════════ */

/*
 * „Любими" в хедъра е <button> (няма wishlist плъгин) и браузърът/GP му дават
 * СОБСТВЕН фон — на живо излезе плътен тъмносив квадрат с нечетимо сърце.
 * Изглежда като „Профил": без фон и без рамка, само по-блед.
 */
.vm-action--wish,
.vm-actions button.vm-action {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	cursor: pointer;
}

.vm-action--wish.is-soon {
	opacity: .45;
	cursor: default;
}

.vm-action--wish.is-soon:hover {
	background: transparent;
	color: var(--vm-ink-soft);
}

/*
 * Реалните имена на категориите са двойно по-дълги от макетните („ЛАМИНИРАНЕ
 * И БОЯДИСВАНЕ НА МИГЛИ И ВЕЖДИ"). Съкратени са в PHP, но под ~1700px редът
 * пак опира до надписа вдясно — там надписът отпада, не менюто.
 */
@media (max-width: 1700px) {
	.vm-nav__note {
		display: none;
	}
}

/* Без JS остава горното правило; с JS надписът пада точно когато не се побира. */
.vm-nav.is-tight .vm-nav__note {
	display: none;
}

/* ═══ ФАЗА 2.8 · БЛОК Б ══════════════════════════════════════════════ */

/* ─── Б4 · „Клиентите разглеждат също" ───────────────────────────────── */

.vm-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: var(--vm-gap-md);
}

/* Списъкът е хоризонтален ред (244px карти) — както в макета. */
#content .related ul.products,
#content .upsells ul.products {
	display: flex;
	gap: var(--vm-gap-row);
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	contain: layout;
}

#content .related ul.products::-webkit-scrollbar,
#content .upsells ul.products::-webkit-scrollbar {
	display: none;
}

#content .related ul.products li.product,
#content .upsells ul.products li.product {
	flex: 0 0 var(--vm-card);
	width: var(--vm-card);
	scroll-snap-align: start;
}

/* ─── Б2 · Прогресът на продуктовата ─────────────────────────────────── */

.vm-single__progress {
	margin: 0 0 var(--vm-gap-md);
	padding: 14px 16px 10px;
	border: 1px solid var(--vm-line-soft);
	border-radius: var(--vm-r);
	background: var(--vm-tint);
}

.vm-single__progress .vm-drawer__progress {
	padding: 0;
	border: 0;
	background: transparent;
}

/* ─── Б5 · Количката по макета ───────────────────────────────────────── */

/*
 * Б5 · Купонът вече живее в картата „Резюме" — в таблицата няма работа.
 *
 * ⚠️ `#content` НЕ е излишно: правилата от Фаза 2.7 (`#content … td.actions
 * .coupon { display: flex }`) са с ID и биеха скриването — на мобилно
 * купонът излизаше ДВА пъти.
 */
#content .woocommerce table.cart td.actions .coupon,
#content .woocommerce-page table.cart td.actions .coupon,
body.woocommerce-cart table.cart td.actions .coupon,
body.woocommerce table.cart td.actions .coupon {
	display: none;
}

.vm-cart-progress {
	margin-bottom: var(--vm-gap-md);
}

.vm-cart-progress .vm-drawer__progress {
	padding: 16px 18px 12px;
	border: 1px solid var(--vm-line-soft);
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow);
}

.vm-coupon {
	margin: 0 0 var(--vm-gap-sm);
}

.vm-coupon__label {
	display: block;
	margin-bottom: 8px;
	color: var(--vm-ink-soft);
	font-size: var(--vm-fs-xs);
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vm-coupon__row {
	display: flex;
	gap: 8px;
}

body .vm-coupon__row input.input-text {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r-btn);
	background: var(--vm-surface);
	font-size: var(--vm-fs-sm);
}

body .vm-coupon__apply.button {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 44px;
	margin: 0;
	padding: 0 18px;
	border-radius: var(--vm-r-btn);
	background: var(--vm-blue-800);
	color: var(--vm-surface);
	font-size: var(--vm-fs-sm);
	font-weight: 700;
	white-space: nowrap;
}

body .vm-coupon__apply.button:hover {
	background: var(--vm-blue-600);
	color: var(--vm-surface);
}

.vm-cart-back {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-gap-xs);
	margin-top: var(--vm-gap-sm);
	color: var(--vm-blue-600);
	font-size: var(--vm-fs-sm);
	font-weight: 700;
}

.vm-cart-back .vm-icon {
	width: 17px;
	height: 17px;
}

.vm-cart-info {
	margin-top: var(--vm-gap-sm);
	padding: 16px 18px;
	border: 1px solid var(--vm-line-soft);
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
}

.vm-cart-info__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	color: var(--vm-ink-soft);
	font-size: var(--vm-fs-sm);
	font-weight: 600;
}

.vm-cart-info__row:last-child {
	margin-bottom: 0;
}

.vm-cart-info__row .vm-icon {
	width: 18px;
	height: 18px;
	color: var(--vm-blue-500);
	flex-shrink: 0;
}

.vm-cart-info__row a {
	color: var(--vm-blue-600);
	font-weight: 800;
}

/* Бутонът „Към плащане →" е СВЕТЛОСИН по макета. */
body .wc-proceed-to-checkout a.checkout-button.vm-checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vm-gap-xs);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

body .wc-proceed-to-checkout a.checkout-button.vm-checkout-button:hover {
	background: var(--vm-blue-hover);
}

.vm-checkout-button .vm-icon {
	width: 18px;
	height: 18px;
}

/* ─── Б6 · Соц. икони във футъра ─────────────────────────────────────── */

.vm-footer__social {
	display: flex;
	gap: 10px;
	margin-top: var(--vm-gap-sm);
}

.vm-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--vm-r-pill);
	background: rgba(255, 255, 255, .1);
	color: var(--vm-surface);
	transition: background var(--vm-dur) ease;
}

.vm-social:hover {
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

.vm-social .vm-icon {
	width: 19px;
	height: 19px;
}

/* Facebook глифът е ПЪЛНА форма, не контур — иначе излиза празен. */
.vm-social--facebook .vm-icon {
	fill: currentColor;
	stroke: none;
}

/* ─── Б7 · Цената като плъзгач с две дръжки ──────────────────────────── */

.vm-price__slider {
	position: relative;
	height: 26px;
	margin-bottom: 10px;
}

.vm-price__rail,
.vm-price__range {
	position: absolute;
	top: 11px;
	height: 4px;
	border-radius: var(--vm-r-pill);
}

.vm-price__rail {
	left: 0;
	right: 0;
	background: var(--vm-line);
}

.vm-price__range {
	background: var(--vm-blue-500);
}

/*
 * Двата `range` елемента лежат един върху друг: подложката им е прозрачна и
 * не хваща кликове, а дръжките — да. Без `pointer-events` горният елемент би
 * изял всички кликове по долния.
 */
.vm-price__handle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

.vm-price__handle::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--vm-blue-500);
	border-radius: var(--vm-r-pill);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-sm);
	pointer-events: auto;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.vm-price__handle::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--vm-blue-500);
	border-radius: var(--vm-r-pill);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-sm);
	pointer-events: auto;
	cursor: pointer;
}

.vm-price__handle::-moz-range-track {
	background: transparent;
}

.vm-price__fields {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Б7в · „Изчисти" стои винаги; без активни филтри е по-блед. */
.vm-filters__reset.is-idle {
	opacity: .5;
}

/* ─── Б7 · Атрибутите като чипове ────────────────────────────────────── */

/*
 * Извивка/Дебелина/Дължина са къси стойности („C", „0.07", „9 mm") — по
 * макета са чипове в редица, не текстови редове с бройки отдясно.
 */
/*
 * ⚠️ Класовете `vm-chips`/`vm-chip` се слагат от PHP-то върху изхода на
 * widget-а (`vmbeauty_chipify()`). На живо Woo рендира стойностите като голи
 * `<a>` без класове и стил, вързан за `woocommerce-widget-layered-nav-list__item`,
 * изобщо не ги хващаше — мокът светеше зелено, защото в него стоеше маркъпът,
 * който СМЯТАХМЕ, че се рендира.
 *
 * ⚠️ По-горе всички списъци във филтрите са `flex-direction: column` — без
 * изричното `row` тук чиповете си остават един под друг.
 */
.vm-filters .vm-chips,
.vm-filters ul.vm-chips,
.vm-filters .woocommerce-widget-layered-nav-list,
.vm-filters__group ul.woocommerce-widget-layered-nav-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * ⚠️ По-горе `li` е flex ред с `a { flex: 1 }` (за да не пада броячът на нов
 * ред). Чипът е обратното: `li` не се разтяга, връзката е по съдържанието си.
 */
.vm-filters .vm-chips li,
.vm-filters .woocommerce-widget-layered-nav-list li,
.vm-filters__group ul.woocommerce-widget-layered-nav-list li {
	display: block;
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.vm-filters .vm-chips li a,
.vm-filters .woocommerce-widget-layered-nav-list li a,
.vm-filters__group ul.woocommerce-widget-layered-nav-list li a {
	flex: 0 0 auto;
}

.vm-filters a.vm-chip,
.vm-filters__group ul.woocommerce-widget-layered-nav-list li a {
	display: block;
	min-width: 46px;
	padding: 9px 15px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r-sm);
	background: var(--vm-surface);
	color: var(--vm-ink-soft);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.vm-filters a.vm-chip:hover,
.vm-filters__group ul.woocommerce-widget-layered-nav-list li a:hover {
	border-color: var(--vm-blue-500);
	color: var(--vm-blue-500);
}

.vm-filters li.chosen a.vm-chip,
.vm-filters__group ul.woocommerce-widget-layered-nav-list li.chosen a {
	border-color: var(--vm-blue-500);
	background: var(--vm-tint);
	color: var(--vm-blue-600);
}

/* Бройката не влиза в чипа — макетът я няма. */
.vm-filters .vm-chips .count,
.vm-filters__group ul.woocommerce-widget-layered-nav-list li .count {
	display: none;
}

.vm-shop__shown {
	margin: var(--vm-gap-md) 0 0;
	color: var(--vm-muted-2);
	font-size: var(--vm-fs-sm);
	text-align: center;
}

/* ─── Б8 · Категорийният бадж на блог картата ────────────────────────── */

.vm-post__media {
	position: relative;
}

.vm-post__cat {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: var(--vm-r-xs);
	background: var(--vm-blue-800);
	color: var(--vm-surface);
	font-size: var(--vm-fs-xxs);
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ─── Б11 · Лепкавата лента на продуктовата (мобилно) ────────────────── */

/*
 * Скрита по подразбиране — показва се само под 768px (виж мобилния блок).
 * Стои НАД долната нав лента: 62px + нейният safe-area отстъп.
 */
.vm-buybar {
	display: none;
}

/* ═══ БЛОГ · архив и статия (В5/В6) ══════════════════════════════════ */

/*
 * GP дава на статията паддинг от 40px и обвивка; блогът е с ЦЕЛИ секции като
 * началната, затова обвивката се неутрализира само за тези изгледи.
 */
.blog #content > .content-area,
.archive:not(.woocommerce) #content > .content-area,
.single-post #content > .content-area,
.blog .inside-article,
.archive:not(.woocommerce) .inside-article,
.single-post .inside-article {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.vm-blog {
	padding: var(--vm-gap-lg) 0;
}

.vm-blog__head {
	max-width: 720px;
	margin: 0 0 var(--vm-gap-lg);
}

.vm-blog__title {
	margin: 0 0 12px;
	color: var(--vm-ink);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.vm-blog__sub {
	margin: 0;
	color: var(--vm-muted);
	font-size: var(--vm-fs-md);
	line-height: 1.6;
}

/* ─── Картите ────────────────────────────────────────────────────────── */

.vm-blog-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--vm-r-lg);
	overflow: hidden;
	background: var(--vm-surface);
	border: 1px solid var(--vm-line-soft);
	box-shadow: var(--vm-shadow);
	transition: border-color var(--vm-dur) ease, box-shadow var(--vm-dur) ease;
}

.vm-blog-card:hover {
	border-color: var(--vm-line-strong);
	box-shadow: var(--vm-shadow-hover);
}

/* Голямата карта: снимка вляво, бяло тяло вдясно. */
.vm-blog-card--featured {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: stretch;
	margin-bottom: var(--vm-gap-md);
}

.vm-blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(135deg, var(--vm-shade-1), var(--vm-shade-1) 9px, var(--vm-shade-2) 9px, var(--vm-shade-2) 18px);
	overflow: hidden;
}

.vm-blog-card--featured .vm-blog-card__media {
	aspect-ratio: auto;
	min-height: 320px;
}

.vm-blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Баджът ВЪРХУ снимка (архивът). Този в статията е под него, отделно —
   там е в потока и има собствена форма по макета. */
.vm-blog__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 12px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: var(--vm-fs-xxs);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vm-blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 24px;
}

.vm-blog-card--featured .vm-blog-card__body {
	justify-content: center;
	padding: 34px 38px;
}

.vm-blog-card__date {
	margin: 0 0 10px;
	color: var(--vm-muted-3);
	font-size: var(--vm-fs-xs);
	font-weight: 700;
}

.vm-blog-card__title {
	margin: 0 0 10px;
	color: var(--vm-ink);
	font-size: var(--vm-fs-lg);
	font-weight: 800;
	line-height: 1.25;
}

.vm-blog-card--featured .vm-blog-card__title {
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -.01em;
}

/* В мрежата заглавието е на ДВА реда — иначе картите стават различно високи. */
.vm-blog-card:not(.vm-blog-card--featured) .vm-blog-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vm-blog-card__title a {
	color: inherit;
}

.vm-blog-card__title a:hover {
	color: var(--vm-blue-500);
}

.vm-blog-card__excerpt {
	margin: 0 0 16px;
	color: var(--vm-muted);
	font-size: var(--vm-fs-sm);
	line-height: 1.65;
}

.vm-blog-card__more {
	margin-top: auto;
	color: var(--vm-blue-500);
	font-size: var(--vm-fs-sm);
	font-weight: 800;
}

.vm-blog-card__more:hover {
	color: var(--vm-blue-hover);
}

.vm-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vm-gap);
}

.vm-blog__empty {
	color: var(--vm-muted);
}

/* ─── Статията (дизайн „VM Beauty – блог статия", 22.08) ─────────────── */

/*
 * ⚠️ Статията НЕ е тясна колона по средата на екрана.
 *
 * Дотук `.vm-article__inner` беше `max-width: 860px` — както изглеждаше
 * първата версия. Новият макет ползва ЦЕЛИЯ контейнер на сайта: снимката е
 * широка колкото него, а под нея вървят рейл (300px) и тяло. Центрирани са
 * само баджът, заглавието и мета редът — те са в собствена обвивка от 860px.
 */
.vm-article {
	padding: var(--vm-gap-md) 0 var(--vm-gap-lg);
}

.vm-article__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.vm-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--vm-note);
	font-size: 13px;
	font-weight: 600;
}

.vm-crumbs a {
	color: var(--vm-muted-2);
}

.vm-crumbs a:hover {
	color: var(--vm-blue-500);
}

.vm-crumbs__here {
	color: var(--vm-ink);
}

/* ── Хедърът: центриран, 860px ──────────────────────────────────────── */

.vm-article__head {
	display: flex;
	max-width: 860px;
	width: 100%;
	margin: 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

/*
 * Баджът с категорията над H1 (Main.dc.html: 28px висок, r8, тъмно синьо,
 * 11px/800, letter-spacing 1.2). Тук е ВРЪЗКА към архива на категорията, не
 * просто етикет — за читателя това е най-краткият път към „още от същото".
 */
.vm-article__badge,
.vm-article__head .vm-blog__badge {
	display: inline-flex;
	position: static;
	align-items: center;
	height: 28px;
	margin: 0;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--vm-blue-600);
	color: var(--vm-surface);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	white-space: nowrap;
}

.vm-article__badge:hover {
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

.vm-article__title {
	margin: 0;
	color: var(--vm-ink);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	/* Заглавието се цепи на равни редове, а не „шест думи + една". */
	text-wrap: balance;
}

.vm-article__meta {
	margin: 0;
	color: var(--vm-note);
	font-size: 14px;
	font-weight: 600;
}

.vm-article__dot {
	color: var(--vm-line-strong);
}

/* ── Главната снимка: цялата ширина на контейнера ───────────────────── */

/*
 * ⚠️ Височината е ФИКСИРАНА (460px), а не съотношение. Файловете на статиите
 * са с различни размери (1024×682, 1200×800…) и при `aspect-ratio` всяка
 * статия щеше да е с различно висока снимка.
 *
 * `object-position: center 45%` е от макета: при портретна снимка центърът
 * реже очите, а 45% ги оставя цели.
 */
.vm-article__media {
	margin: 0;
	height: 460px;
	border-radius: var(--vm-r-xl);
	overflow: hidden;
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow);
}

.vm-article__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* ── Рейл + тяло ────────────────────────────────────────────────────── */

.vm-article__grid {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	align-items: start;
	gap: 60px;
}

.vm-article__rail {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 24px;
}

/* ── Картата „Съдържание" ───────────────────────────────────────────── */

.vm-toc,
.vm-artprod {
	padding: 20px 22px;
	border-radius: var(--vm-r-lg);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow);
}

.vm-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	cursor: default;
	list-style: none;
}

/* Триъгълникът на `<details>` се маха и в двата двигателя. */
.vm-toc__head::-webkit-details-marker {
	display: none;
}

.vm-toc__label,
.vm-artprod__label {
	color: var(--vm-blue-500);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.4px;
}

/* На десктоп картата е винаги отворена — стрелка няма какво да прави. */
.vm-toc__head .vm-icon {
	display: none;
}

.vm-toc__list {
	display: flex;
	flex-direction: column;
	counter-reset: vm-toc;
}

.vm-toc__link {
	display: block;
	padding: 8px 0 8px 14px;
	border-left: 2px solid var(--vm-line);
	color: var(--vm-muted);
	font-size: 14px;
	line-height: 1.4;
	transition: color var(--vm-dur) ease, border-color var(--vm-dur) ease;
}

.vm-toc__link:hover {
	color: var(--vm-ink);
}

/* Активният ред се сменя от JS-а (IntersectionObserver, без библиотека). */
.vm-toc__link.is-on {
	border-left-color: var(--vm-blue-500);
	color: var(--vm-ink);
	font-weight: 700;
}

/* ── Картата „Продукти от статията" ─────────────────────────────────── */

.vm-artprod {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vm-artprod__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vm-artprod__item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
}

.vm-artprod__media {
	display: block;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--vm-bg);
}

.vm-artprod__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vm-artprod__text {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.vm-artprod__brand {
	color: var(--vm-muted-3);
	font-size: 11px;
	letter-spacing: 1px;
}

.vm-artprod__name {
	color: var(--vm-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.vm-artprod__item:hover .vm-artprod__name {
	color: var(--vm-blue-500);
}

.vm-artprod__price {
	color: var(--vm-ink);
	font-size: 14px;
	font-weight: 800;
}

/*
 * ⚠️ Цената идва от `get_price_html()` на Woo — при промоция това са `<del>`
 * и `<ins>` в един низ. Затова старата цена се облича тук, а не се цепи в
 * PHP: разцепването значи собствена сметка за валута и ДДС.
 */
.vm-artprod__price del {
	margin-right: 4px;
	color: var(--vm-muted-4);
	font-size: 12px;
	font-weight: 400;
}

.vm-artprod__price ins {
	text-decoration: none;
}

.vm-artprod__more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: var(--vm-r-btn);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-size: 14px;
	font-weight: 700;
}

.vm-artprod__more:hover {
	background: var(--vm-blue-hover);
	color: var(--vm-surface);
}

/* ── Тялото ─────────────────────────────────────────────────────────── */

.vm-article__body {
	padding: 44px 56px 48px;
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow);
	color: var(--vm-ink-2);
	font-size: 17px;
	line-height: 1.7;
}

/*
 * Картата е широка колкото колоната, а РЕДЪТ вътре е най-много 760px —
 * над това око губи началото на следващия ред. Затова таванът е на децата,
 * а не на картата.
 */
.vm-article__body > * {
	max-width: 760px;
}

/*
 * Първият абзац е „лийд": по-едър и по-тъмен от текста след него. Класът се
 * слага в PHP (`vmbeauty_article_enrich`) — виж там защо не е `first-of-type`.
 */
.vm-article__body .vm-lead {
	color: var(--vm-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
}

.vm-article__body h2 {
	margin: 34px 0 12px;
	color: var(--vm-ink);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	/* Котвата от „Съдържание" да не се лепва за хедъра. */
	scroll-margin-top: 90px;
}

.vm-article__body h3 {
	margin: 26px 0 12px;
	color: var(--vm-ink);
	font-size: var(--vm-fs-lg);
	font-weight: 800;
}

.vm-article__body p {
	margin: 0 0 18px;
}

.vm-article__body ul {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

/* Булетите са със СИН маркер, както в останалата част на сайта. */
.vm-article__body ul li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 22px;
	font-size: 17px;
	line-height: 1.7;
}

.vm-article__body ul li::before {
	content: "";
	position: absolute;
	top: .62em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: var(--vm-r-pill);
	background: var(--vm-blue-500);
}

.vm-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--vm-r);
}

/*
 * „Съвет от екипа" — и като `blockquote`, и като `<div class="vm-tip">`.
 * Редакторът пише едното или другото според блока, който е избрал; иконката
 * се слага в PHP (`vmbeauty_article_enrich`), защото е inline SVG, не емоджи.
 */
.vm-article__body blockquote,
.vm-article__body .vm-tip {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 8px 0 22px;
	padding: 18px 22px;
	border: 0;
	border-radius: 14px;
	background: var(--vm-bg);
	color: var(--vm-ink);
	font-size: 15px;
	line-height: 1.6;
	font-style: normal;
}

.vm-article__body blockquote > .vm-icon,
.vm-article__body .vm-tip > .vm-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--vm-blue-500);
	stroke-width: 2;
}

.vm-article__body blockquote p:last-child,
.vm-article__body .vm-tip p:last-child {
	margin-bottom: 0;
}

/* ── Рекламната лента ───────────────────────────────────────────────── */

.vm-artcta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 36px 48px;
	border-radius: var(--vm-r-xl);
	background: var(--vm-blue-600);
	color: var(--vm-surface);
}

.vm-artcta__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vm-artcta__eyebrow {
	margin: 0;
	color: var(--vm-on-blue);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.4px;
}

.vm-artcta__title {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
}

.vm-artcta__btn {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	border-radius: var(--vm-r-btn);
	background: var(--vm-surface);
	color: var(--vm-blue-600);
	font-size: 15px;
	font-weight: 800;
}

.vm-artcta__btn:hover {
	background: var(--vm-tint);
	color: var(--vm-blue-600);
}

/* ── „Още от екипа" ─────────────────────────────────────────────────── */

.vm-artmore__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vm-gap-md);
}

/* В макета картите тук са с по-ниска снимка от тези в архива. */
.vm-artmore .vm-blog-card__media {
	aspect-ratio: auto;
	height: 190px;
}

.vm-article__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vm-gap-sm);
	padding-top: var(--vm-gap-md);
	border-top: 1px solid var(--vm-line-soft);
	font-size: var(--vm-fs-sm);
	font-weight: 800;
}

.vm-article__back {
	color: var(--vm-muted-2);
}

.vm-article__back:hover {
	color: var(--vm-blue-500);
}

.vm-article__shop {
	color: var(--vm-blue-500);
}

.vm-article__shop:hover {
	color: var(--vm-blue-hover);
}

/* ── Между 900 и 1200: рейлът се свива, за да остане текст ─────────── */

@media (max-width: 1200px) {
	.vm-article__grid {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 32px;
	}

	.vm-article__body {
		padding: 32px 34px 36px;
	}

	.vm-article__media {
		height: 360px;
	}

	.vm-article__title {
		font-size: 36px;
	}
}

@media (max-width: 1100px) {
	.vm-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ─── ≤900px: бургер и панел ─────────────────────────────────────────── */

@media (max-width: 900px) {
	.vm-burger {
		display: flex;
	}
}

/* ─── ≤768px: мобилният макет ────────────────────────────────────────── */

@media (max-width: 768px) {
	/* Долната лента заема 62px — съдържанието трябва да ги остави свободни. */
	body {
		padding-bottom: 62px;
	}

	.vm-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 310;
		display: flex;
		height: 62px;
		padding: 8px 6px 12px;
		border-top: 1px solid var(--vm-line-soft);
		background: var(--vm-surface);
	}

	/* Панелът на количката спира над лентата, за да не я покрива. */
	.vm-drawer__panel {
		bottom: 62px;
	}

	/* ── Началната: РЕДЪТ е друг (виж мобилния v3) ─────────────────────
	 *   хиро → USP → Оферти → Категории → Марки → Най-купувани → бюлетин
	 * „Нови попълнения" и блогът ги НЯМА в мобилния макет.
	 */
	.vm-front {
		display: flex;
		flex-direction: column;
	}

	.vm-front > .vm-hero { order: 1; }
	.vm-front > .vm-usp { order: 2; }
	.vm-front > .vm-sec--offers { order: 3; }
	.vm-front > .vm-sec--cats { order: 4; }
	.vm-front > .vm-brands { order: 5; }
	.vm-front > .vm-sec--best { order: 6; }
	/* „Защо ВМ Бюти" е ПРЕДИ бюлетина мобилно (в КД файла е точно там). */
	.vm-front > .vm-sec--why { order: 7; }
	.vm-front > .vm-news { order: 8; }

	/*
	 * Скрити мобилно ЗАЩОТО ГИ НЯМА В МАКЕТА, не защото не се побират.
	 * Връщат се с една дума: махни реда или добави клас `vm-mobile-all`
	 * на `.vm-front`.
	 */
	.vm-front:not(.vm-mobile-all) > .vm-sec--new,
	.vm-front:not(.vm-mobile-all) > .vm-sec--blog,
	.vm-front:not(.vm-mobile-all) > .vm-page-content {
		display: none;
	}

	/* Заглавията: късите от макета, без eyebrow, 19px. */
	.vm-sec__eyebrow {
		display: none;
	}

	.vm-sec__title {
		font-size: 19px;
	}

	.vm-sec__title-short {
		display: inline;
	}

	/* Има ли къс вариант — дългият се крие. Няма ли, дългият си остава. */
	.vm-sec__title:has(.vm-sec__title-short) .vm-sec__title-full {
		display: none;
	}

	.vm-sec__head {
		align-items: center;
		margin-bottom: 12px;
	}

	.vm-sec__more {
		font-size: 12px;
	}

	/* Марките: тънка лента с късото заглавие. */
	.vm-brands {
		padding: 16px 0;
	}

	.vm-brands__title {
		margin-bottom: 12px;
		padding: 0 16px;
		font-size: 10.5px;
		letter-spacing: .1em;
	}

	.vm-brands__title::after {
		display: none;
	}

	.vm-brands__title-full {
		display: none;
	}

	.vm-brands__title-short {
		display: inline;
	}

	/* ── „Защо ВМ Бюти": една колона, по-компактни карти ───────────── */
	.vm-why__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.vm-why__card {
		padding: 18px 16px 20px;
	}

	.vm-why__intro {
		font-size: var(--vm-fs-sm);
	}

	/* ── Продукт: табовете стават СТАКНАТ АКОРДЕОН ─────────────────── */

	/*
	 * ⚠️ Тук стоеше `display: none` върху целия блок, защото в мобилния макет
	 * табове няма. „Няма ги в макета" обаче НЕ значи „скрий съдържанието":
	 * изчезваха описанието, характеристиките и отзивите (900+ знака на
	 * продукт), а Google индексира mobile-first — скритото мобилно не се брои.
	 *
	 * Сега лентата с табове я няма, но панелите остават: заглавие + текст под
	 * него. „Описание" е отворено, останалите се разгъват с клик.
	 */
	.vm-single-product .woocommerce-tabs {
		display: block;
		margin-top: var(--vm-gap-md);
	}

	/*
	 * Самата лента с табове е излишна — заглавията са в акордеона.
	 * ⚠️ `#content` НЕ е излишно: десктоп правилото за табовете е с ID (1,3,4)
	 * и правило само с класове тихо губи — лентата оставаше видима.
	 */
	body.vm-single-product #content div.product .woocommerce-tabs ul.tabs,
	.vm-single-product #content div.product .woocommerce-tabs ul.tabs,
	.vm-single-product .woocommerce-tabs ul.tabs {
		display: none;
	}

	/*
	 * ⚠️ `!important` НЕ е козметика: скриптът на Woo (`single-product.js`)
	 * крие неактивните панели с ИНЛАЙН `style="display:none"`. Правило с
	 * `!important` в лист бие инлайн декларация без `!important` — това е
	 * единственият начин панелите да останат в потока без template override.
	 */
	.vm-single-product .woocommerce-tabs .panel {
		display: block !important;
		padding: 0;
	}

	.vm-acc__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		padding: 15px 0;
		border: 0;
		border-top: 1px solid var(--vm-line-soft);
		background: transparent;
		color: var(--vm-ink);
		font-family: inherit;
		font-size: var(--vm-fs-md);
		font-weight: 800;
		text-align: left;
		cursor: pointer;
	}

	.vm-acc__head .vm-icon {
		flex-shrink: 0;
		width: 18px;
		height: 18px;
		color: var(--vm-icon);
		transition: transform var(--vm-dur) ease;
	}

	.vm-acc__head.is-open .vm-icon {
		transform: rotate(180deg);
	}

	/*
	 * Свитият панел е с `max-height: 0`, НЕ с `display: none` — текстът остава
	 * в потока и в DOM-а (виж причината горе).
	 */
	.vm-single-product .woocommerce-tabs.vm-acc--ready .panel {
		overflow: hidden;
		max-height: 6000px;
		transition: max-height .25s ease;
	}

	.vm-single-product .woocommerce-tabs.vm-acc--ready .panel.is-collapsed {
		max-height: 0;
	}

	.vm-single-product .woocommerce-tabs .panel > h2:first-child {
		display: none;
	}

	/*
	 * Краткото описание (Woo го рисува на приоритет 20, точно след атрибутите)
	 * поема ролята на таба „Описание".
	 */
	.vm-single-product div.product .woocommerce-product-details__short-description {
		margin: 18px 0 0;
		color: var(--vm-ink-soft);
		font-size: var(--vm-fs-sm);
		line-height: 1.6;
	}

	/* Сходните стават компактен скролер, както в макета. */
	#content .related ul.products,
	#content .upsells ul.products {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		padding-bottom: 12px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		contain: layout;
	}

	#content .related ul.products::-webkit-scrollbar,
	#content .upsells ul.products::-webkit-scrollbar {
		display: none;
	}

	#content .related ul.products li.product,
	#content .upsells ul.products li.product {
		flex: 0 0 160px;
		width: 160px;
		scroll-snap-align: start;
	}

	/* ── Блогът мобилно: една колона, по-малки заглавия ────────────── */
	.vm-blog {
		padding: var(--vm-gap-md) 0;
	}

	.vm-blog__title,
	.vm-article__title {
		font-size: 27px;
	}

	.vm-blog__sub {
		font-size: var(--vm-fs-sm);
	}

	/* Голямата карта става обикновена: снимка над текста. */
	.vm-blog-card--featured {
		grid-template-columns: 1fr;
	}

	.vm-blog-card--featured .vm-blog-card__media {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.vm-blog-card--featured .vm-blog-card__body {
		padding: 20px 18px 24px;
	}

	.vm-blog-card--featured .vm-blog-card__title {
		font-size: 21px;
	}

	.vm-blog__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/*
	 * Тялото на статията мобилно СЕ ПОДРЕЖДА ПО-ДОЛУ, в собствен блок
	 * (`@media (max-width: 860px)` в края на файла) — там е и рейлът, и
	 * хоризонталният ред с продукти, и сгъваемото „Съдържание".
	 */

	.vm-article__nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* ── Б9 · Нав редът мобилно го НЯМА (менюто е бургерът) ────────── */
	.vm-nav {
		display: none;
	}

	/* ── Б10 · Хедърът е ЕДИН ред: бургер | лого | сърце | количка ─── */
	.vm-header__inner {
		flex-wrap: wrap;
		gap: var(--vm-gap-sm);
		height: auto;
		min-height: 58px;
		padding: 8px 14px 0;
	}

	/*
	 * М3 · Търсачката е ВИДИМА под хедъра (44px), както е в макета. Беше
	 * скрита зад бутона „Търсене" — той остава и само я фокусира.
	 *
	 * Редът с иконите отгоре си остава ЕДИН (бургер | лого | сърце | количка);
	 * търсачката е втори ред, защото `flex: 1 1 100%` я пренася.
	 */
	.vm-search {
		order: 3;
		flex: 1 1 100%;
		height: 44px;
		margin: 0 0 10px;
	}

	.vm-header {
		position: relative;
	}

	.vm-actions {
		gap: 2px;
		margin-left: auto;
	}

	/* Иконите са без етикети — „Профил/Количка" не са в мобилния макет. */
	.vm-action__label {
		display: none;
	}

	.vm-action {
		padding: 8px;
	}

	/* Профилът мобилно е в долната лента; в хедъра е сърцето. */
	.vm-actions .vm-action:not(.vm-action--wish):not(.vm-minicart) {
		display: none;
	}

	.vm-action--wish {
		display: flex;
		border: 0;
		background: transparent;
		cursor: default;
	}

	.vm-action--wish.is-soon {
		color: var(--vm-icon);
	}

	.vm-minicart__count {
		top: 0;
		right: 0;
	}

	/* ── Б11 · Лепкава лента цена + „Добави" над долната нав лента ─── */
	.vm-buybar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 62px;
		z-index: 190;
		display: flex;
		align-items: center;
		gap: var(--vm-gap-sm);
		padding: 10px 14px;
		border-top: 1px solid var(--vm-line-soft);
		background: var(--vm-surface);
		box-shadow: 0 -8px 24px -18px rgba(43, 57, 118, .5);
	}

	.vm-buybar__price {
		flex: 0 0 auto;
		color: var(--vm-ink);
		font-size: var(--vm-fs-lg);
		font-weight: 800;
		white-space: nowrap;
	}

	.vm-buybar__price del {
		display: none;
	}

	.vm-buybar__add {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		gap: var(--vm-gap-xs);
		height: 46px;
		border: 0;
		border-radius: var(--vm-r-btn);
		background: var(--vm-blue-500);
		color: var(--vm-surface);
		font-size: var(--vm-fs-sm);
		font-weight: 800;
		white-space: nowrap;
		cursor: pointer;
	}

	.vm-buybar__add .vm-icon {
		width: 18px;
		height: 18px;
	}

	/* Лентата стои над съдържанието — то ѝ прави място. */
	body.vm-has-buybar {
		padding-bottom: 130px;
	}

	/* ── Б12 · Купонът е на цял ред ────────────────────────────────── */
	.vm-coupon__row {
		flex-direction: column;
	}

	body .vm-coupon__row input.input-text,
	body .vm-coupon__apply.button {
		width: 100%;
		flex: 0 0 auto;
	}

	/* ── Б13 · Категорийният банер е компактен ─────────────────────── */
	.vm-cat-banner {
		min-height: 108px;
		border-radius: var(--vm-r);
	}

	.vm-cat-banner__inner {
		padding: 16px 18px;
	}

	.vm-cat-banner__title {
		font-size: 20px;
	}

	/* Описанието не се събира в 108px — мобилният макет го няма. */
	.vm-cat-banner__text {
		display: none;
	}

	/* ── Категория: филтрите са ДОЛЕН ЛИСТ, не акордеон ────────────── */
	.vm-filters__overlay {
		position: fixed;
		inset: 0;
		z-index: 300;
		display: none;
		background: rgba(15, 21, 38, .45);
	}

	.vm-filters.is-open .vm-filters__overlay {
		display: block;
	}

	.vm-filters__toggle {
		display: flex;
		justify-content: center;
	}

	.vm-filters__toggle .vm-icon {
		width: 18px;
		height: 18px;
	}

	.vm-filters__body {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 301;
		display: flex;
		flex-direction: column;
		max-height: 78vh;
		padding: 0;
		border: 0;
		border-radius: 22px 22px 0 0;
		background: var(--vm-surface);
		transform: translateY(100%);
		transition: transform .22s ease;
	}

	/* На затворено листът е извън екрана, но остава в DOM-а за анимацията. */
	.vm-filters:not(.is-open) .vm-filters__body {
		display: none;
	}

	.vm-filters.is-open .vm-filters__body {
		display: flex;
		transform: none;
	}

	.vm-filters__head {
		flex-shrink: 0;
		padding: 16px 18px;
		border-bottom: 1px solid var(--vm-line-soft);
	}

	.vm-filters__name {
		font-size: 16px;
	}

	.vm-filters__close {
		display: flex;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--vm-muted);
		cursor: pointer;
	}

	.vm-filters__close .vm-icon {
		width: 22px;
		height: 22px;
		stroke-width: 2;
	}

	.vm-filters__group {
		padding: 16px 18px;
	}

	.vm-filters__foot {
		flex-shrink: 0;
		padding: 14px 18px;
		border-top: 1px solid var(--vm-line-soft);
		background: var(--vm-surface);
	}

	.vm-filters__apply {
		width: 100%;
		height: 48px;
		border: 0;
		border-radius: 14px;
		background: var(--vm-blue-500);
		color: var(--vm-surface);
		font-family: var(--vm-font);
		font-size: 14px;
		font-weight: 800;
		cursor: pointer;
	}

	/*
	 * ⚠️ Д2 · Скролът е ВЪТРЕ в листа. Дотук `max-height: 78vh` режеше листа,
	 * но нищо в него не скролваше — под „Марка" просто нямаше как да се стигне.
	 * Главата и бутонът „Покажи N продукта" остават заковани, средата скролва.
	 */
	.vm-filters__scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Заглавията на акордеона са само за мобилно — на десктоп има табове. */
@media (min-width: 769px) {
	.vm-acc__head {
		display: none;
	}
}

/* Бутонът за затваряне и лепнатият бутон нямат работа на десктоп. */
@media (min-width: 769px) {
	.vm-filters__close,
	.vm-filters__foot,
	.vm-filters__overlay {
		display: none;
	}
}

/* Отворен панел (меню или филтри) — страницата отдолу не се скролва. */
body.vm-menu-open {
	overflow: hidden;
}

/* ═══ БЛОК В · четирите „голи" страници (21.08) ══════════════════════════
 *
 * ⚠️ Макет за чекаута, профила, „За нас" и „Контакти" в `design/v3.html`
 * НЯМА — построени са с ТОКЕНИТЕ на темата по описанието от прегледа:
 * полета r10 / h44 / рамка `--vm-line`, карти `--vm-r-xl`, същите сини.
 * Никаква нова hex стойност.
 */

/* ─── Общи полета за Woo формите (чекаут, профил, контакти) ──────────── */

/*
 * ⚠️ Селекторът е по ТИП и по клас на Woo, а НЕ по имена на полета.
 * На тази инсталация Българизация я няма, но добави ли се, тя внася свои
 * полета („офис на Еконт/Спиди"). Стил по име би ги оставил без вид, а
 * `display: none` по име би ги скрил и поръчките биха тръгвали без адрес.
 */
.vm-checkout-page .form-row input.input-text,
.vm-checkout-page .form-row textarea,
.vm-checkout-page .form-row select,
.vm-checkout-page .select2-container--default .select2-selection--single,
.vm-account-page .woocommerce-form input.input-text,
.vm-account-page .woocommerce form .form-row input.input-text,
.vm-account-page .woocommerce form .form-row select,
.vm-contacts .vm-form input,
.vm-contacts .vm-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--vm-line);
	border-radius: 10px;
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-family: var(--vm-font);
	font-size: 14.5px;
	line-height: 1.4;
}

.vm-checkout-page .form-row textarea,
.vm-contacts .vm-form textarea {
	min-height: 110px;
	padding-top: 12px;
	resize: vertical;
}

.vm-checkout-page .form-row input.input-text:focus,
.vm-checkout-page .form-row textarea:focus,
.vm-checkout-page .form-row select:focus,
.vm-account-page .woocommerce input.input-text:focus,
.vm-contacts .vm-form input:focus,
.vm-contacts .vm-form textarea:focus {
	outline: 0;
	border-color: var(--vm-blue-500);
	box-shadow: 0 0 0 3px var(--vm-tint-2);
}

.vm-checkout-page .form-row label,
.vm-account-page .woocommerce form .form-row label,
.vm-contacts .vm-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--vm-blue-800);
	font-size: 12.5px;
	font-weight: 700;
}

.vm-checkout-page .form-row label .required,
.vm-contacts .vm-form abbr {
	border: 0;
	color: var(--vm-sale);
	text-decoration: none;
}

.vm-checkout-page .form-row {
	margin: 0 0 14px;
	padding: 0;
}

/* ─── В1 · Чекаут ────────────────────────────────────────────────────── */

.vm-checkout {
	max-width: var(--vm-container);
	margin: 0 auto;
}

/* Индикаторът 1-2-3 — визуален, формата остава ЕДНА. */
.vm-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.vm-steps__item {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r);
	background: var(--vm-surface);
	color: var(--vm-muted);
	cursor: pointer;
}

.vm-steps__item.is-active {
	border-color: var(--vm-blue-500);
	background: var(--vm-tint-2);
	color: var(--vm-blue-800);
}

.vm-steps__item.is-done {
	border-color: var(--vm-blue-500);
}

.vm-steps__num {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--vm-line-soft);
	color: var(--vm-muted);
	font-size: 13px;
	font-weight: 800;
}

.vm-steps__item.is-active .vm-steps__num,
.vm-steps__item.is-done .vm-steps__num {
	background: var(--vm-blue-500);
	color: var(--vm-surface);
}

.vm-steps__label {
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Двете колони. Woo дава `#customer_details`, `#order_review_heading` и
 * `#order_review` като ПРЕКИ деца на формата — оттам и grid-ът тук вместо
 * копиран `form-checkout.php`, който би изостанал при следващата версия.
 */
.vm-checkout-page form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	/*
	 * ⚠️ `auto 1fr` НЕ Е КОЗМЕТИКА — това е целият фикс за 130-те празни
	 * пиксела между „Твоята поръчка" и картата под него.
	 *
	 * `#customer_details` заема ЕДНА клетка на ДВА реда. Без изрични редове
	 * те са `auto auto` и браузърът разпределя височината на този елемент
	 * между ДВАТА реда — тоест редът със заглавието се разтяга до ~150px и
	 * заглавието увисва само̀ горе. Не беше нито sticky offset, нито празен
	 * елемент преди таблицата.
	 *
	 * С `auto 1fr` първият ред е точно колкото заглавието, а цялата останала
	 * височина отива във втория, където е картата.
	 */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"details heading"
		"details review";
	align-items: start;
	gap: 0 26px;
}

.vm-checkout-page #customer_details {
	grid-area: details;
	min-width: 0;
}

.vm-checkout-page #order_review_heading {
	grid-area: heading;
	/* 16px до картата — измеримо, не „на око". */
	margin: 0 0 16px;
	color: var(--vm-ink);
	font-size: 20px;
	font-weight: 800;
}

.vm-checkout-page #order_review {
	position: sticky;
	top: 20px;
	grid-area: review;
	min-width: 0;
	padding: 18px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
}

/* Woo слага двете колони на клиента една до друга — тук са една под друга. */
.vm-checkout-page #customer_details .col-1,
.vm-checkout-page #customer_details .col-2 {
	float: none;
	width: 100%;
}

.vm-checkout-page #customer_details .col2-set {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vm-checkout-page #customer_details h3 {
	margin: 0 0 14px;
	color: var(--vm-ink);
	font-size: 17px;
	font-weight: 800;
}

.vm-checkout-page .woocommerce-billing-fields,
.vm-checkout-page .woocommerce-shipping-fields,
.vm-checkout-page .woocommerce-additional-fields {
	margin-bottom: 18px;
	padding: 20px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
}

.vm-checkout__progress {
	margin-bottom: 14px;
}

/*
 * ⚠️ Широкото съдържание скролва В СВОЯ КОНТЕЙНЕР, вместо да изкарва цялата
 * страница настрани. Премерено на живо: 1734px документ при екран 1600 и
 * 629px при 390. Таблицата с поръчката е с `table-layout: fixed`, но Woo и
 * плъгините слагат в нея неща с нула шанс да се свият (дълги имена на
 * вариации, select2 падащи менюта) — един такъв елемент чупи страницата.
 *
 * ⚠️ `clip`, НЕ `hidden`: `hidden` прави от кутията скрол контейнер и убива
 * `position: sticky` — а точно сайдбарът тук е лепнат.
 */
.vm-checkout-page #order_review {
	overflow-x: clip;
}

.vm-checkout-page .woocommerce-checkout-review-order,
.vm-checkout-page .woocommerce-checkout-review-order-table-wrapper {
	max-width: 100%;
	overflow-x: auto;
}

.vm-checkout-page form.checkout,
.vm-checkout-page #customer_details,
.vm-checkout-page .vm-checkout {
	max-width: 100%;
	min-width: 0;
}

/*
 * Таблицата с редовете на поръчката.
 *
 * ⚠️ Премерено на живо: на 390px тя изкарваше страницата на 541px
 * (+151px извън екрана). Причината е `table-layout: auto` — колоната с
 * името на продукта („Тъмно кафяви мигли — Извивка: C, Дебелина: 0.07")
 * не се свива под най-дългата си дума и издува цялата таблица.
 * Фиксираният лейаут + пренасяне на думите я връщат в колоната ѝ.
 */
.vm-checkout-page .shop_table {
	table-layout: fixed;
	width: 100%;
	max-width: 100%;
	border: 0;
	border-collapse: collapse;
}

.vm-checkout-page .shop_table th,
.vm-checkout-page .shop_table td,
.vm-checkout-page #order_review {
	min-width: 0;
}

.vm-checkout-page .shop_table .product-name {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Сумата вдясно е кратка и не бива да се пренася — стеснява се колоната. */
.vm-checkout-page .shop_table .product-total,
.vm-checkout-page .shop_table thead th:last-child {
	width: 38%;
}

.vm-checkout-page .shop_table th,
.vm-checkout-page .shop_table td {
	padding: 9px 0;
	border: 0;
	border-bottom: 1px solid var(--vm-line-soft);
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}

.vm-checkout-page .shop_table thead th {
	color: var(--vm-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/*
 * ⚠️ Премерено на живо (1600px, 1 продукт в количката): клетката „Доставка"
 * носи служебния текст на Woo („Въведете адреса си, за да видите наличните
 * методи…") и се РЕЖЕШЕ — `scrollWidth > clientWidth`.
 *
 * Виновникът беше `white-space: nowrap` тук. Слаган е, за да не се пренася
 * цената („65,40 €"), но същото правило важи и за всяка друга клетка в
 * последната колона, включително тази с цяло изречение в нея.
 *
 * Сега колоната пренася нормално. Цената е кратка и без `nowrap` — тя се
 * побира на един ред сама.
 */
.vm-checkout-page #order_review .shop_table th,
.vm-checkout-page #order_review .shop_table td {
	white-space: normal;
	word-break: normal;
	overflow-wrap: anywhere;
	text-overflow: clip;
}

.vm-checkout-page .shop_table td:last-child,
.vm-checkout-page .shop_table th:last-child {
	text-align: right;
}

/* Служебният текст на Woo е по-тих от сумите — той е обяснение, не число. */
.vm-checkout-page #order_review .woocommerce-shipping-totals td,
.vm-checkout-page #order_review .woocommerce-shipping-destination,
.vm-checkout-page #order_review .shop_table td small {
	color: var(--vm-note);
	font-size: 13px;
	line-height: 1.45;
}

/*
 * ⚠️ РЕДЪТ „Доставка" СТАВА ЦЯЛ РЕД, ЩОМ В НЕГО ИМА МЕТОДИ.
 *
 * Колоната със сумите е 38% от 360px ≈ 137px — там радио карта „Еконт до
 * офис · 5,90 €" няма как да се побере. Затова при наличие на
 * `#shipping_method` двете клетки стават блокове на цялата ширина и картите
 * получават цялата колона от 360px.
 *
 * Без методи (както е сега на площадката) редът си остава двуклетъчен:
 * етикет вляво, обяснението на Woo вдясно, на два реда.
 *
 * ⚠️ `:has()` не се поддържа в много стари браузъри. Там редът просто остава
 * двуклетъчен — тесен, но не счупен. Алтернативата беше override на
 * `cart-shipping.php`, а темата нарочно няма нито един template override.
 */
.vm-checkout-page #order_review tr.shipping:has(#shipping_method) th,
.vm-checkout-page #order_review tr.shipping:has(#shipping_method) td {
	display: block;
	width: 100%;
	text-align: left;
}

.vm-checkout-page #order_review tr.shipping:has(#shipping_method) th {
	padding-bottom: 4px;
	border-bottom: 0;
}

.vm-checkout-page #order_review tr.shipping:has(#shipping_method) td {
	padding-top: 0;
	color: var(--vm-ink);
	font-size: 14px;
}

/* Самите карти се четат отляво надясно, каквото и да прави клетката. */
.vm-checkout-page #order_review #shipping_method {
	text-align: left;
}

.vm-checkout-page .shop_table .order-total th,
.vm-checkout-page .shop_table .order-total td {
	border-bottom: 0;
	color: var(--vm-ink);
	font-size: 17px;
	font-weight: 800;
}

/*
 * ⚠️ Доставката и плащането са РАДИО КАРТИ, но остават там, където Woo ги
 * рисува. Изместването им извън `#order_review` чупи AJAX пре-рендера —
 * Woo подменя цялата таблица при всяка смяна на адрес.
 */
.vm-checkout-page #shipping_method,
.vm-checkout-page .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-checkout-page #shipping_method li,
.vm-checkout-page .wc_payment_methods li {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.vm-checkout-page #shipping_method li label,
.vm-checkout-page .wc_payment_methods li > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--vm-line);
	border-radius: 10px;
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--vm-dur) ease, background var(--vm-dur) ease;
}

.vm-checkout-page #shipping_method li label:hover,
.vm-checkout-page .wc_payment_methods li > label:hover {
	border-color: var(--vm-line-strong);
	background: var(--vm-tint-3);
}

/* Избраната карта — `:has()` пада тихо там, където го няма, и картата пак
   е четима, само без синята рамка. */
.vm-checkout-page #shipping_method li:has(input:checked) label,
.vm-checkout-page .wc_payment_methods li:has(input:checked) > label {
	border-color: var(--vm-blue-500);
	background: var(--vm-tint-2);
}

.vm-checkout-page #shipping_method li input[type="radio"],
.vm-checkout-page .wc_payment_methods li input[type="radio"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--vm-blue-500);
}

/*
 * ⚠️ При ЕДИН наличен метод Woo НЕ рисува радио бутон — само етикета.
 * Без това правило единственият метод оставаше гол текст в таблицата.
 */
.vm-checkout-page #shipping_method li:only-child label,
.vm-checkout-page .woocommerce-shipping-methods li:only-child label {
	background: var(--vm-tint-2);
	border-color: var(--vm-blue-500);
}

.vm-ship__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--vm-blue-500);
}

.vm-ship__icon .vm-icon {
	width: 19px;
	height: 19px;
}

.vm-ship__text {
	flex: 1 1 auto;
}

.vm-checkout-page .wc_payment_methods .payment_box {
	margin: 6px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--vm-tint-3);
	color: var(--vm-muted);
	font-size: 13px;
}

.vm-checkout-page .wc_payment_methods .payment_box p:last-child {
	margin-bottom: 0;
}

.vm-checkout-page #payment {
	margin-top: 16px;
	padding: 0;
	border-radius: 0;
	background: transparent;
}

/*
 * ⚠️ Премерено на живо: бутонът излизаше 324px в карта от 360px. Не беше
 * той — беше редът около него: Woo дава на `.place-order` собствен
 * хоризонтален паддинг и бутонът, макар и на 100%, стоеше стеснен.
 */
.vm-checkout-page #payment .place-order,
.vm-checkout-page #payment div.form-row.place-order {
	margin: 0;
	padding: 14px 0 0;
}

/*
 * ⚠️ Премерено на живо: бутонът излизаше 286px в колона от 322px.
 * Причината е двойна и двете части са задължителни:
 * · `#payment #place_order` на Woo носи ДВА ID-та (2,0,0) и бие всеки наш
 *   селектор с един ID — оттам и `#payment` в нашия;
 * · GeneratePress НЯМА глобален border-box, тоест `width: 100%` + паддинг
 *   дава кутия по-широка от колоната си.
 */
.vm-checkout-page #payment #place_order,
.vm-checkout-page #payment .place-order button#place_order {
	box-sizing: border-box;
	display: block;
	float: none;
	width: 100%;
	min-height: 52px;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--vm-r);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-family: var(--vm-font);
	font-size: 15.5px;
	font-weight: 800;
	cursor: pointer;
}

.vm-checkout-page #payment #place_order:hover,
.vm-checkout-page #payment #place_order:focus {
	background: var(--vm-blue-hover);
	color: var(--vm-surface);
}

.vm-checkout__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 12px 0 0;
	color: var(--vm-muted);
	font-size: 12.5px;
}

.vm-checkout__note .vm-icon {
	width: 15px;
	height: 15px;
	color: var(--vm-ok);
}

/* Купонът в сайдбара — div, не form (виж `inc/checkout.php`). */
.vm-coupon--checkout {
	margin: 14px 0 0;
	padding: 14px;
	border: 1px dashed var(--vm-line-strong);
	border-radius: var(--vm-r);
	background: var(--vm-tint-3);
}

.vm-coupon--checkout .vm-coupon__row {
	display: flex;
	gap: 8px;
}

.vm-coupon--checkout input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--vm-line);
	border-radius: var(--vm-r-sm);
	background: var(--vm-surface);
	font-family: var(--vm-font);
	font-size: 14px;
}

.vm-coupon--checkout .vm-coupon__apply {
	flex-shrink: 0;
	min-height: 42px;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--vm-r-sm);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-family: var(--vm-font);
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.vm-coupon__msg {
	margin: 8px 0 0;
	font-size: 12.5px;
}

.vm-coupon__msg.is-ok {
	color: var(--vm-ok);
}

.vm-coupon__msg.is-error {
	color: var(--vm-sale);
}

/* Woo рисува купона и над формата — там го няма в макета. */
.vm-checkout-page .woocommerce-form-coupon-toggle {
	display: none;
}

/* ─── В2 · Профил ────────────────────────────────────────────────────── */

.vm-account__intro {
	max-width: 640px;
	margin: 0 0 22px;
	color: var(--vm-muted);
	font-size: 15px;
}

/*
 * ⚠️ Премерено на живо (рън #1 на live-check): на тази инсталация Woo
 * рендерира САМО формата за вход — `#customer_login` изобщо го няма, тоест
 * регистрацията на клиенти е ИЗКЛЮЧЕНА в WooCommerce → Профили и поверителност.
 * Затова самотната форма получава свой вид на карта, вместо да лежи гола;
 * включи ли се регистрацията, правилата отдолу поемат двете колони.
 */
.vm-account-page .woocommerce > form.woocommerce-form-login {
	max-width: 520px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-card);
}

/*
 * Нелогнат: двете карти една до друга.
 *
 * ⚠️ ТОЧНО СЪЩИЯТ КАПАН КАТО ПРИ `ul.products` — и той пак ни хвана.
 *
 * Woo дава `.col2-set::before/::after { content: " "; display: table }` за
 * клирфикс на плаващите колони. В GRID контейнер тези псевдоелементи стават
 * ГРИД ЕЛЕМЕНТИ: `::before` заема клетка (1,1), „Вход" отива в (1,2),
 * `::after` заема (2,1) и „Регистрация" пада на ВТОРИ РЕД. Отвън изглежда
 * като „две колони, но картите не са една до друга" — точно каквото
 * премери живата проверка (рън #17: „2 карти · 2 колони ✗").
 *
 * Клирфикс на grid контейнер не трябва — затова псевдоелементите се махат.
 */
.vm-account-page #customer_login::before,
.vm-account-page #customer_login::after,
.vm-account-page .u-columns::before,
.vm-account-page .u-columns::after {
	display: none;
}

.vm-account-page #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 24px;
}

/*
 * ⚠️ Woo дава на колоните и `u-column1/u-column2`, и `col-1/col-2`. Тук са
 * изброени и двете двойки: коя от тях ще носи маркъпът зависи от версията на
 * шаблона, а картата трябва да изглежда еднакво и в двата случая.
 */
.vm-account-page #customer_login > .col-1,
.vm-account-page #customer_login > .col-2,
.vm-account-page #customer_login > .u-column1,
.vm-account-page #customer_login > .u-column2 {
	float: none;
	width: 100%;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-card);
}

.vm-account-page #customer_login h2 {
	margin: 0 0 16px;
	color: var(--vm-ink);
	font-size: 19px;
	font-weight: 800;
}

.vm-account-page .woocommerce-form-login__submit,
.vm-account-page .woocommerce-form-register__submit,
.vm-account-page .woocommerce-Button,
.vm-account-page .woocommerce button.button {
	min-height: 46px;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--vm-r);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-family: var(--vm-font);
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
}

.vm-account-page .woocommerce button.button:hover,
.vm-account-page .woocommerce button.button:focus {
	background: var(--vm-blue-hover);
	color: var(--vm-surface);
}

/*
 * Регистрацията е СЪЩАТА карта като входа: същите полета (h44 / r10) и същият
 * син бутон. Woo ѝ дава собствени класове, затова са изброени изрично —
 * иначе полето за парола излиза сурово, а бутонът сив.
 */
.vm-account-page .woocommerce-form-register input.input-text,
.vm-account-page .woocommerce-form-register input[type="text"],
.vm-account-page .woocommerce-form-register input[type="email"],
.vm-account-page .woocommerce-form-register input[type="password"],
.vm-account-page .woocommerce-form-login input[type="password"],
.vm-account-page .woocommerce-Input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--vm-line);
	border-radius: 10px;
	background: var(--vm-surface);
	color: var(--vm-ink);
	font-family: var(--vm-font);
	font-size: 14.5px;
}

.vm-account-page .woocommerce-Input:focus {
	outline: 0;
	border-color: var(--vm-blue-500);
	box-shadow: 0 0 0 3px var(--vm-tint-2);
}

/* Woo слага полето за парола в обвивка с иконка „покажи" — тя не бива да
   стърчи извън заоблената рамка. */
.vm-account-page .password-input,
.vm-account-page .woocommerce-password-hint {
	display: block;
	width: 100%;
}

.vm-account-page .show-password-input {
	top: 12px;
	right: 12px;
}

.vm-account-page .woocommerce-privacy-policy-text {
	color: var(--vm-muted);
	font-size: 13px;
	line-height: 1.5;
}

.vm-account-page .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	color: var(--vm-muted);
	font-size: 13.5px;
	font-weight: 600;
}

.vm-account-page .woocommerce-LostPassword {
	margin: 12px 0 0;
	font-size: 13.5px;
}

/*
 * Логнат: табло. `div.woocommerce` съдържа поздрава, навигацията и
 * съдържанието като СЪСЕДИ — оттам и grid-ът тук.
 */
.vm-account-page.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	align-items: start;
	gap: 22px;
}

.vm-account-page.logged-in .woocommerce > .woocommerce-notices-wrapper,
.vm-account__hello {
	grid-column: 1 / -1;
}

.vm-account__hello {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: linear-gradient(120deg, var(--vm-tint-2), var(--vm-surface));
}

.vm-account__eyebrow {
	margin: 0;
	color: var(--vm-blue-600);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.vm-account__name {
	margin: 4px 0 0;
	color: var(--vm-ink);
	font-size: 22px;
	font-weight: 800;
}

.vm-account__stat {
	margin: 0 0 0 auto;
	text-align: center;
}

.vm-account__stat-num {
	display: block;
	color: var(--vm-blue-500);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
}

.vm-account__stat-label {
	color: var(--vm-muted);
	font-size: 12px;
	font-weight: 700;
}

.vm-account__shop {
	flex-shrink: 0;
	padding: 11px 18px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r);
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	font-size: 13.5px;
	font-weight: 700;
}

.vm-account__shop:hover {
	border-color: var(--vm-blue-500);
	color: var(--vm-blue-500);
}

/* Навигацията като карти. */
.vm-account-page .woocommerce-MyAccount-navigation {
	width: auto;
	float: none;
}

.vm-account-page .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-account-page .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-account-page .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 16px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r);
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	font-size: 14px;
	font-weight: 700;
}

.vm-account-page .woocommerce-MyAccount-navigation li a:hover {
	border-color: var(--vm-blue-500);
	background: var(--vm-tint-3);
	color: var(--vm-blue-500);
}

.vm-account-page .woocommerce-MyAccount-navigation li.is-active a {
	border-color: var(--vm-blue-500);
	background: var(--vm-tint-2);
	color: var(--vm-blue-600);
}

.vm-account-page .woocommerce-MyAccount-navigation li.is-logout a {
	color: var(--vm-muted);
}

.vm-account-page .woocommerce-MyAccount-content {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
}

.vm-account-page .woocommerce-MyAccount-content > *:first-child {
	margin-top: 0;
}

.vm-account-page .woocommerce-MyAccount-content .shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.vm-account-page .woocommerce-MyAccount-content .shop_table th,
.vm-account-page .woocommerce-MyAccount-content .shop_table td {
	padding: 12px 8px;
	border: 0;
	border-bottom: 1px solid var(--vm-line-soft);
	font-size: 14px;
	text-align: left;
}

/* ─── В3 · За нас ────────────────────────────────────────────────────── */

.vm-about__hero {
	margin-bottom: 26px;
	padding: 26px 28px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: linear-gradient(120deg, var(--vm-tint-2), var(--vm-surface));
}

.vm-about__eyebrow {
	margin: 0;
	color: var(--vm-blue-600);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.vm-about__lead {
	max-width: 760px;
	margin: 10px 0 0;
	color: var(--vm-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
}

.vm-about__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 28px;
}

.vm-about__card {
	padding: 24px 22px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-card);
}

.vm-about__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: var(--vm-r);
	background: var(--vm-tint-2);
	color: var(--vm-blue-500);
}

.vm-about__icon .vm-icon {
	width: 23px;
	height: 23px;
}

.vm-about__title {
	margin: 0 0 8px;
	color: var(--vm-ink);
	font-size: 17px;
	font-weight: 800;
}

.vm-about__text {
	margin: 0;
	color: var(--vm-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

.vm-about__prose {
	margin-bottom: 28px;
	padding: 24px 26px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
}

/* Снимки в текста — в грид, не сурови една под друга. */
.vm-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--vm-r);
}

.vm-prose .wp-block-gallery,
.vm-prose .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.vm-about .vm-brands {
	margin-top: 6px;
}

/* ─── В4 · Контакти ─────────────────────────────────────────────────── */

.vm-contacts__grid {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	align-items: start;
	gap: 22px;
}

.vm-contacts__card,
.vm-contacts__form-card {
	padding: 24px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-card);
}

.vm-contacts__title {
	margin: 0 0 16px;
	color: var(--vm-ink);
	font-size: 18px;
	font-weight: 800;
}

.vm-contacts__hint {
	margin: -8px 0 16px;
	color: var(--vm-muted);
	font-size: 14px;
}

.vm-contacts__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--vm-line-soft);
	color: var(--vm-ink);
}

.vm-contacts__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

a.vm-contacts__row:hover .vm-contacts__value {
	color: var(--vm-blue-500);
}

.vm-contacts__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--vm-r-sm);
	background: var(--vm-tint-2);
	color: var(--vm-blue-500);
}

.vm-contacts__icon .vm-icon {
	width: 18px;
	height: 18px;
}

.vm-contacts__label {
	display: block;
	color: var(--vm-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vm-contacts__value {
	display: block;
	color: var(--vm-ink);
	font-size: 15px;
	font-weight: 700;
}

.vm-contacts__row--hours .vm-contacts__value {
	font-size: 14px;
	font-weight: 600;
}

.vm-form__row {
	margin: 0 0 14px;
}

.vm-form__submit {
	min-height: 48px;
	padding: 13px 26px;
	border: 0;
	border-radius: var(--vm-r);
	background: var(--vm-blue-500);
	color: var(--vm-surface);
	font-family: var(--vm-font);
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}

.vm-form__submit:hover,
.vm-form__submit:focus {
	background: var(--vm-blue-hover);
	color: var(--vm-surface);
}

/* Honeypot: скрито и за окото, и от подредбата — но НЕ с `hidden`, защото
   ботовете прескачат `hidden`, а точно те трябва да го попълнят. */
.vm-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vm-contacts__msg {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-left: 3px solid var(--vm-line-strong);
	border-radius: var(--vm-r-sm);
	background: var(--vm-tint-3);
	font-size: 14px;
	font-weight: 600;
}

.vm-contacts__msg.is-ok {
	border-left-color: var(--vm-ok);
	color: var(--vm-ink);
}

.vm-contacts__msg.is-error {
	border-left-color: var(--vm-sale);
	color: var(--vm-ink);
}

.vm-contacts__map {
	margin-top: 22px;
	overflow: hidden;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	line-height: 0;
}

.vm-contacts__map iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}

.vm-contacts__prose {
	margin-top: 22px;
}

/* ─── Блок В · мобилно ──────────────────────────────────────────────── */

@media (max-width: 980px) {
	.vm-checkout-page form.checkout {
		grid-template-columns: 1fr;
		/* Три реда една под друга — `auto 1fr` от десктопа тук няма смисъл. */
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"details"
			"heading"
			"review";
	}

	/* Сайдбарът минава ПОД формата и вече не е лепнат — иначе на телефон
	   заема целия екран и формата остава невидима. */
	.vm-checkout-page #order_review {
		position: static;
		margin-top: 18px;
		/* ⚠️ `clip`, не `hidden`: `hidden` прави от кутията скрол контейнер и
		   убива `position: sticky` на предците ѝ. Тук sticky вече е изключен,
		   но правилото не бива да се превърне в капан при следваща промяна. */
		overflow-x: clip;
	}



	.vm-contacts__grid,
	.vm-account-page #customer_login,
	.vm-account-page.logged-in .woocommerce {
		grid-template-columns: 1fr;
	}

	.vm-about__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.vm-steps {
		gap: 6px;
		margin-bottom: 18px;
	}

	.vm-steps__item {
		flex-direction: column;
		gap: 5px;
		padding: 10px 6px;
		text-align: center;
	}

	.vm-steps__label {
		font-size: 11.5px;
	}

	.vm-checkout-page .woocommerce-billing-fields,
	.vm-checkout-page .woocommerce-shipping-fields,
	.vm-checkout-page .woocommerce-additional-fields,
	.vm-checkout-page #order_review,
	.vm-contacts__card,
	.vm-contacts__form-card,
	.vm-about__card,
	.vm-about__hero,
	.vm-about__prose,
	.vm-account-page #customer_login > .col-1,
	.vm-account-page #customer_login > .col-2,
	.vm-account-page .woocommerce-MyAccount-content {
		padding: 16px;
	}

	/* Бутонът „Поръчай" е цял ред — така иска заданието. */
	.vm-checkout-page #place_order,
	.vm-contacts .vm-form__submit,
	.vm-account-page .woocommerce button.button {
		width: 100%;
	}

	.vm-about__grid {
		grid-template-columns: 1fr;
	}

	.vm-about__lead {
		font-size: 16px;
	}

	.vm-account__hello {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
	}

	.vm-account__stat {
		margin-left: 0;
	}

	.vm-contacts__map iframe {
		height: 260px;
	}
}

/* ═══ 404 · страницата „не е намерена" (21.08) ═══════════════════════════
 *
 * Дотук беше гол GeneratePress — сива търсачка с тъмен бутон. Тук е една
 * карта с езика на v3: същите токени, същата търсачка като в хедъра.
 */

.vm-404 {
	padding: 40px 0 64px;
}

.vm-404__card {
	max-width: 720px;
	margin: 0 auto;
	padding: 44px 40px 40px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r-xl);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-card);
	text-align: center;
}

.vm-404__code {
	display: block;
	color: var(--vm-blue-500);
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	opacity: .35;
}

.vm-404__title {
	margin: 14px 0 0;
	color: var(--vm-ink);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.vm-404__text {
	max-width: 460px;
	margin: 12px auto 0;
	color: var(--vm-muted);
	font-size: 15px;
	line-height: 1.55;
}

/*
 * Търсачката е `.vm-search` от хедъра — тук само височината и радиусът са по
 * заданието (44/10), а не хедърните 48/11.
 */
.vm-404__search {
	max-width: 460px;
	height: 44px;
	margin: 22px auto 0;
	border-radius: 10px;
}

.vm-404__home {
	display: inline-block;
	margin-top: 18px;
	padding: 13px 26px;
	border: 1.5px solid var(--vm-line);
	border-radius: var(--vm-r);
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	font-size: 14.5px;
	font-weight: 700;
}

.vm-404__home:hover {
	border-color: var(--vm-blue-500);
	background: var(--vm-tint-3);
	color: var(--vm-blue-500);
}

.vm-404__label {
	margin: 28px 0 0;
	color: var(--vm-muted-3);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.vm-404__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.vm-404__links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-404__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--vm-line-card);
	border-radius: var(--vm-r);
	background: var(--vm-surface);
	color: var(--vm-blue-800);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	/* Дълго име на категория пренася, вместо да разтяга картата. */
	overflow-wrap: anywhere;
}

.vm-404__links a:hover {
	border-color: var(--vm-blue-500);
	background: var(--vm-tint-3);
	color: var(--vm-blue-500);
}

.vm-404__links .vm-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--vm-muted-3);
}

@media (max-width: 768px) {
	.vm-404 {
		padding: 20px 0 40px;
	}

	.vm-404__card {
		padding: 28px 18px 26px;
	}

	.vm-404__code {
		font-size: 46px;
	}

	.vm-404__title {
		font-size: 23px;
	}

	.vm-404__text {
		font-size: 14.5px;
	}

	/* Един под друг — две колони от по ~170px режат имената на категориите. */
	.vm-404__links {
		grid-template-columns: 1fr;
	}

	.vm-404__home {
		display: block;
	}
}

/* ─── Блог карта БЕЗ снимка (компактна) ─────────────────────────────────
 *
 * ⚠️ 23-те статии имат `_thumbnail_id`, но прикачените файлове не са
 * мигрирали (`wp/v2/media/<id>` → 404). Дотук това даваше десет празни кутии
 * 16:9 с диагонални райета на /novini/. Кутията вече изобщо не се рисува,
 * когато няма какво да се сложи в нея — виж `vmbeauty_has_real_thumbnail()`.
 */

.vm-blog-card--noimg .vm-blog-card__body {
	padding-top: 20px;
}

.vm-blog-card--noimg .vm-blog__badge {
	position: static;
	display: inline-block;
	margin-bottom: 10px;
}

/* Без снимка картата няма как да е висока колкото съседките си — затова
   заглавието поема мястото, вместо да остане празнина под него. */
.vm-blog-card--noimg .vm-blog-card__title {
	font-size: 19px;
}

.vm-blog-card--featured.vm-blog-card--noimg .vm-blog-card__title {
	font-size: 26px;
}

/* ─── Статията на 390 (макет Mobile.dc.html) ────────────────────────────
 *
 * Всичко в ЕДНА колона, в реда от макета: съдържание → тяло → продукти.
 *
 * ⚠️ Редът се получава с `display: contents` на рейла: децата му излизат от
 * него и стават елементи на общата колона, а `order` ги подрежда. Иначе
 * продуктите щяха да стоят НАД текста (в маркъпа рейлът е пръв, защото на
 * десктоп е лявата колона) — а два отделни блока с едни и същи продукти се
 * разминават при първата промяна.
 */

@media (max-width: 860px) {
	.vm-article__inner {
		gap: 16px;
	}

	/* Хедърът мобилно е ПОДРАВНЕН ВЛЯВО, не центриран (виж макета). */
	.vm-article__head {
		align-items: flex-start;
		gap: 12px;
		text-align: left;
	}

	/* Mobile.dc.html: `align-self: flex-start` — баджът не се разтяга на
	   целия ред, а стои плътно вляво над заглавието. */
	.vm-article__badge,
	.vm-article__head .vm-blog__badge {
		align-self: flex-start;
		height: 26px;
		padding: 0 10px;
		font-size: 10px;
	}

	.vm-article__title {
		font-size: 28px;
		line-height: 1.2;
	}

	.vm-article__meta {
		font-size: 13px;
	}

	.vm-article__media {
		height: 215px;
		border-radius: var(--vm-r-lg);
	}

	/*
	 * ⚠️ `align-items: stretch` НЕ Е ИЗЛИШНО — то поправя КОРЕНА.
	 *
	 * Десктоп правилото на този грид носи `align-items: start`. Смени ли се
	 * `display` на `flex`, тази стойност ОСТАВА и значи `flex-start`, тоест
	 * НИТО ЕДНО дете не се разтяга по ширина: всяко става широко колкото
	 * съдържанието си. Оттам двата дефекта на 390 —
	 *   • „Съдържание" излизаше хапче 158×46 (със скрит списък максималното
	 *     съдържание е само етикетът и стрелката), а не карта на цялата
	 *     ширина;
	 *   • редът с продукти пък ставаше 474px и буташе документа настрани.
	 * Тялото се разминаваше, защото абзацът е дълъг и без това пълни реда —
	 * затова изглеждаше, че всичко е наред.
	 */
	.vm-article__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.vm-article__rail {
		display: contents;
	}

	.vm-toc {
		order: 1;
		padding: 14px 16px;
		border-radius: 14px;
	}

	.vm-article__body {
		order: 2;
		padding: 22px 18px 24px;
		border-radius: var(--vm-r-lg);
		font-size: 16px;
	}

	/*
	 * ⚠️ `min-width: 0` остава и след поправения `align-items`: вътре стои
	 * ред от три карти по 150px (474px при екран 358px), а флекс елемент с
	 * `min-width: auto` не може да се свие под съдържанието си. Без него
	 * скролът излиза на целия сайт вместо да остане в самия ред.
	 */
	.vm-artprod {
		order: 3;
		min-width: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		gap: 10px;
	}

	/* ── „Съдържание": сгъваема карта, затворена по подразбиране ──── */

	/*
	 * ⚠️ Сгъването мобилно се кара от КЛАС, не от атрибута `open`.
	 *
	 * Първата версия рисуваше картата отворена и JS-ът я затваряше след
	 * DOMContentLoaded. Премерено на живо: CLS 0.111 при таван 0.1 — петте
	 * реда изчезваха СЛЕД първото рисуване и цялата страница под тях
	 * подскачаше. Сега списъкът е скрит от CSS-а още при първото рисуване,
	 * а JS-ът само отваря и затваря; `<details>` остава отворен през цялото
	 * време (виж `initArticleToc`).
	 */
	.vm-toc__list {
		display: none;
	}

	.vm-toc.is-open .vm-toc__list {
		display: flex;
	}

	.vm-toc__head {
		margin-bottom: 0;
		cursor: pointer;
	}

	.vm-toc.is-open .vm-toc__head {
		margin-bottom: 10px;
	}

	.vm-toc__head .vm-icon {
		display: block;
		width: 18px;
		height: 18px;
		color: var(--vm-ink);
		stroke-width: 2;
		transition: transform var(--vm-dur) ease;
	}

	.vm-toc.is-open .vm-toc__head .vm-icon {
		transform: rotate(180deg);
	}

	/* Мобилно редовете са НОМЕРИРАНИ и без лявата линия — както в макета. */
	.vm-toc.is-open .vm-toc__list {
		gap: 6px;
	}

	.vm-toc__link {
		padding: 0;
		border-left: 0;
	}

	.vm-toc__link::before {
		counter-increment: vm-toc;
		content: counter(vm-toc) ". ";
	}

	.vm-toc__link.is-on {
		color: var(--vm-ink);
	}

	/* ── Продуктите: хоризонтален ред с карти по 150px ─────────────── */

	/*
	 * ⚠️ `overflow-x: auto` е ВЪТРЕ в реда, не на страницата. Ред от три
	 * карти по 150px + разстоянията е 474px при екран 358px — без свой
	 * скрол контейнер това е хоризонтален скрол на целия сайт.
	 */
	.vm-artprod__list {
		flex-direction: row;
		min-width: 0;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.vm-artprod__item {
		flex: none;
		width: 150px;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 10px;
		border-radius: 14px;
		background: var(--vm-surface);
		box-shadow: var(--vm-shadow);
		scroll-snap-align: start;
	}

	.vm-artprod__media {
		width: 100%;
		height: 110px;
	}

	.vm-artprod__brand {
		font-size: 10px;
	}

	.vm-artprod__name {
		font-size: 13px;
	}

	.vm-artprod__more {
		height: 46px;
	}

	/* ── Тялото ────────────────────────────────────────────────────── */

	.vm-article__body .vm-lead {
		font-size: 18px;
		line-height: 1.55;
	}

	.vm-article__body p,
	.vm-article__body ul li {
		font-size: 16px;
	}

	.vm-article__body h2 {
		margin: 26px 0 10px;
		font-size: 22px;
	}

	.vm-article__body blockquote,
	.vm-article__body .vm-tip {
		gap: 12px;
		margin: 6px 0 18px;
		padding: 14px 16px;
		border-radius: 12px;
		font-size: 14px;
		line-height: 1.55;
	}

	/* ── Рекламната лента: стакната ────────────────────────────────── */

	.vm-artcta {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 22px 20px;
		border-radius: var(--vm-r-lg);
	}

	/* Надтекстът мобилно го няма — мястото отива за самото изречение. */
	.vm-artcta__eyebrow {
		display: none;
	}

	.vm-artcta__title {
		font-size: 20px;
		line-height: 1.25;
	}

	.vm-artcta__btn {
		height: 46px;
		font-size: 14px;
	}

	/* ── „Още от екипа": ДВЕ хоризонтални карти ────────────────────── */

	.vm-artmore__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/*
	 * Третата карта отпада мобилно: макетът показва две, а три хоризонтални
	 * карти изтласкват футъра толкова надолу, че никой не стига до тях.
	 */
	.vm-artmore__grid > *:nth-child(3) {
		display: none;
	}

	.vm-artmore .vm-blog-card {
		flex-direction: row;
		align-items: stretch;
		border-radius: 14px;
	}

	.vm-artmore .vm-blog-card__media {
		flex: none;
		width: 110px;
		height: auto;
	}

	.vm-artmore .vm-blog-card__body {
		padding: 12px 12px 12px 0;
	}

	.vm-artmore .vm-blog-card--noimg .vm-blog-card__body {
		padding: 12px;
	}

	.vm-artmore .vm-blog-card__title {
		font-size: 14px;
	}

	.vm-artmore .vm-blog-card__date {
		margin-bottom: 4px;
		font-size: 11px;
	}

	/* Баджът върху 110px снимка не се чете — остава само в архива. */
	.vm-artmore .vm-blog-card__media .vm-blog__badge {
		display: none;
	}
}