/* ==========================================================================
   VIKRO — єдина дизайн-система (ТЗ §5.5)
   --------------------------------------------------------------------------
   Підключається темою Chameleon ОСТАННІМ, через налаштування
   «Свій файл стилів» (config_custom_style_chameleon = "vikro").
   Див. згенерований catalog/controller/common/header.php:218 —
   addStyle() для цього файлу йде ПІСЛЯ stylesheet.css і theme_scheme/theme_N.css,
   тому цей шар перекриває схему, не форкаючи її. Жодного OCMOD.

   Структура:
     1. Токени (:root)
     2. Типографіка
     3. Фокус і доступність
     4. Перепризначення селекторів Chameleon на токени
     5. Форми
     6. Картка товару, ціни, бейджі, статуси
     7. Таби, аккордеони, дропдауни, модалки
     8. Утиліти
   ЛИШЕ ЗМІННІ + перекриття. Нових компонентів головної тут немає (Етап 4).
   ========================================================================== */

/* ========================================================================
   1. ТОКЕНИ
   ======================================================================== */
:root {
	/* --- Акцент — жовто-помаранчевий кутик з лого VIKRO (піпетка: #ff8300).
	   Один токен фарбує всі ~13 поверхонь, які mcustom.css робив помаранчевими.
	   ponytail: білим по ньому 2.47:1 — нижче за 3:1 навіть для великого тексту.
	   Рішення клієнта — бренд важливіший. Якщо текст стане нечитабельним,
	   лікується одним рядком: --vk-on-accent: #002e61 (темно-синій з лого,
	   5.44:1), а не темнінням самого акценту. --- */
	--vk-accent:        #ff8300;   /* кутик лого */
	--vk-accent-hover:  #e67600;
	--vk-accent-active: #cc6900;
	--vk-accent-soft:   rgba(255, 131, 0, .12);
	--vk-on-accent:     #fff;
	--vk-menu-accent:   #e77811;

	/* --- Фони --- */
	--vk-bg:      #fff;
	--vk-bg-2:    #f5f6f8;
	--vk-bg-3:    #eef1f5;
	--vk-bg-alt:  #fafbfc;   /* смужка-зебра в довгих таблицях */
	--vk-overlay: rgba(16, 20, 26, .55);

	/* --- Текст --- */
	/* Контраст на білому: text 15.8:1, text-2 5.77:1, text-3 4.63:1.
	   text-3 несе артикул (12px), тож світлішим за 4.5:1 бути не може. */
	--vk-text:    #1b1f24;
	--vk-text-2:  #5c6873;
	--vk-text-3:  #6b7785;
	--vk-on-dark: #fff;

	/* --- Посилання --- */
	--vk-link:       #0f4b82;
	--vk-link-hover: #05335e;

	/* --- Статуси. Кожен носить або білий текст (бейдж), або сам є текстом
	       на білому (статус наявності), тому всі ≥4.5:1 в обидва боки. --- */
	--vk-ok:        #0f7a45;   /* 5.40:1 */
	--vk-ok-soft:   rgba(15, 122, 69, .12);
	--vk-warn:      #8a5a06;   /* 5.93:1 — вихідний #d98806 давав лише 2.81:1 */
	--vk-warn-soft: rgba(138, 90, 6, .12);
	--vk-err:       #d13b3b;   /* 5.24:1 */
	--vk-star:      #f5a623;   /* зірки рейтингу — декор, тексту поверх немає */
	--vk-err-soft:  rgba(209, 59, 59, .1);

	/* --- Межі --- */
	--vk-border:        #e3e7ec;
	--vk-border-strong: #cbd3dc;

	/* --- Типографіка. Chameleon віддає h1..h4 як 22/20/18/14 без ваги —
	       ієрархії немає. Тут задаємо реальну шкалу. --- */
	--vk-fs-h1:   30px;
	--vk-fs-h2:   24px;
	--vk-fs-h3:   19px;
	--vk-fs-h4:   16px;
	--vk-fs-body: 15px;
	--vk-fs-sm:   13px;
	--vk-fs-cap:  12px;

	--vk-lh-tight: 1.2;
	--vk-lh-head:  1.25;
	--vk-lh-body:  1.5;

	--vk-fw-normal: 400;
	--vk-fw-medium: 500;
	--vk-fw-bold:   700;

	/* --- Ціни --- */
	--vk-price:      #101418;  /* 17.4:1 */
	--vk-price-new:  #d13b3b;  /* 5.24:1 */
	--vk-price-old:  #6b7785;  /* 4.63:1 — закреслена ціна теж має читатись */
	--vk-price-opt:  #0f7a45;  /* 5.40:1 — і як текст, і як фон бейджа «Опт» */
	--vk-fs-price:   18px;
	--vk-fs-price-2: 14px;

	/* --- Геометрія --- */
	--vk-r-sm:   6px;
	--vk-r:      10px;
	--vk-r-lg:   16px;
	--vk-r-pill: 999px;

	--vk-sp-1:  4px;
	--vk-sp-2:  8px;
	--vk-sp-3: 12px;
	--vk-sp-4: 16px;
	--vk-sp-5: 24px;
	--vk-sp-6: 32px;
	--vk-sp-7: 48px;

	/* --- Тіні --- */
	--vk-shadow-1: 0 1px 2px rgba(16, 20, 26, .06);
	--vk-shadow-2: 0 4px 16px rgba(16, 20, 26, .1);
	--vk-shadow-3: 0 12px 32px rgba(16, 20, 26, .14);

	/* --- Стани --- */
	--vk-focus-ring: 0 0 0 3px rgba(255, 131, 0, .42);
	--vk-disabled-o: .5;
	--vk-t: .18s ease;
	/* Розкриття панелей: довше за --vk-t і з ease-out — висота, що росте,
	   мусить гальмувати наприкінці, інакше читається як стрибок. */
	--vk-t-panel: .28s cubic-bezier(.22, 1, .36, 1);

	/* --- Керуючі висоти --- */
	--vk-ctrl-h:    46px;
	--vk-ctrl-h-sm: 38px;
}

/* Десктоп/планшет: шкала на ~10% більша (мобільна лишається як є —
   там свій блок токенів у @media (max-width:767px) нижче). */
@media (min-width: 768px) {
	:root {
		--vk-fs-h1:   33px;
		--vk-fs-h2:   26px;
		--vk-fs-h3:   21px;
		--vk-fs-h4:   18px;
		--vk-fs-body: 16px;
		--vk-fs-sm:   14px;
		--vk-fs-cap:  13px;

		--vk-fs-price:   20px;
		--vk-fs-price-2: 15px;

		--vk-ctrl-h:    50px;
		--vk-ctrl-h-sm: 42px;
	}
}

/* ========================================================================
   2. ТИПОГРАФІКА (ТЗ §5.5)
   ======================================================================== */
html {
	scrollbar-gutter: stable;
}

body {
	color: var(--vk-text);
	font-size: var(--vk-fs-body);
	line-height: var(--vk-lh-body);
}

.h1, h1, .h2, h2, .h3, h3, .h4, h4 {
	color: var(--vk-text);
	line-height: var(--vk-lh-head);
}

.h1, h1 { font-size: var(--vk-fs-h1); font-weight: var(--vk-fw-bold);   line-height: var(--vk-lh-tight); }
.h2, h2 { font-size: var(--vk-fs-h2); font-weight: var(--vk-fw-bold); }
.h3, h3 { font-size: var(--vk-fs-h3); font-weight: var(--vk-fw-medium); }
.h4, h4 { font-size: var(--vk-fs-h4); font-weight: var(--vk-fw-medium); }

small, .text-small { font-size: var(--vk-fs-sm); }
.text-muted, .text-secondary { color: var(--vk-text-2); }
.text-caption { font-size: var(--vk-fs-cap); color: var(--vk-text-3); }

a { color: var(--vk-link); transition: color var(--vk-t); }
a:hover, a:focus { color: var(--vk-link-hover); }

/* ========================================================================
   3. ФОКУС І ДОСТУПНІСТЬ (ТЗ §7.2)
   --------------------------------------------------------------------
   Chameleon глушить outline у 7 місцях (stylesheet.css:352, 856, 958,
   1418, 2077, 6823, 8547). Клавіатурна навігація ставала невидимою.
   Повертаємо кільце через :focus-visible — миша його не вмикає,
   тому візуально нічого не змінюється, а з клавіатури все видно.
   ======================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid transparent;   /* видимо у Windows High Contrast */
	outline-offset: 2px;
	box-shadow: var(--vk-focus-ring);
	border-radius: var(--vk-r-sm);
}

/* Chameleon має !important на .btn-general — б'ємо тією ж вагою */
.btn-general:focus-visible,
.chm-btn:focus-visible,
.btn:focus-visible {
	box-shadow: var(--vk-focus-ring) !important;
}

/* Пропустити до контенту — для клавіатури й скрінрідерів */
.vk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: var(--vk-sp-3) var(--vk-sp-4);
	background: var(--vk-accent);
	color: var(--vk-on-accent);
	border-radius: 0 0 var(--vk-r) 0;
}
.vk-skip-link:focus {
	left: 0;
	color: var(--vk-on-accent);
}

/* Доступно лише скрінрідеру */
.vk-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	/* ::details-content не матчиться селектором * — інакше анімація
	   розкриття аккордеона пережила б це правило. */
	*, *::before, *::after, ::details-content {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ========================================================================
   4. ПЕРЕПРИЗНАЧЕННЯ СЕЛЕКТОРІВ CHAMELEON НА ТОКЕНИ
   --------------------------------------------------------------------
   Дзеркалить theme_scheme/theme_N.css один-в-один (той файл — 137 рядків
   «селектор → hex»). Ми не форкаємо схему: адмін може й далі перемикати
   theme_1..12, але фактичний колір бере звідси.
   ======================================================================== */
.btn-menu {
	background: var(--vk-accent);
	color: var(--vk-on-accent);
}
.btn-menu-top.vh1-bl,
.btn-menu-top.vh2,
.btn-menu-top {
	background: var(--vk-bg);
	border: 1.5px solid var(--vk-menu-accent);
	border-radius: var(--vk-r);
	color: var(--vk-menu-accent);
}
.btn-menu-top.show-tc {
	width: 141px;
	height: 41px;
	justify-content: center;
}
.btn-primary,
.chm-btn-primary {
	color: var(--vk-on-accent);
	background-color: var(--vk-accent);
}
.btn-primary.disabled,
.btn-primary.disabled.active,
.btn-primary.disabled.focus,
.btn-primary.disabled:active,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled],
.btn-primary[disabled].active,
.btn-primary[disabled].focus,
.btn-primary[disabled]:active,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:disabled,
.btn-primary:active,
.btn-primary:active:focus,
.chm-btn-primary:focus,
.chm-btn-primary:hover {
	background-color: var(--vk-accent-hover);
	color: var(--vk-on-accent);
}
/* Вимкнена кнопка не повинна виглядати як активна */
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary:disabled,
.chm-btn-primary:disabled,
.chm-btn:disabled,
.btn:disabled {
	opacity: var(--vk-disabled-o);
	cursor: not-allowed;
	box-shadow: none;
}
.chm-btn-white:focus,
.chm-btn-white:hover {
	color: var(--vk-accent-hover);
}
.fixed-goods-menu .viewed-quantity,
.btn-mob-cart .cart-total,
#cart .cart-total,
.wishlist-quantity,
.compare-quantity {
	background: var(--vk-accent);
	color: var(--vk-on-accent);
}
.swiper .swiper-fp-prod-pagination .swiper-pagination-bullet-active,
.megasliderpro .swiper-ms-pagination .swiper-pagination-bullet-active {
	background: var(--vk-accent) !important;
}
.box-menu-top .icon-menu,
.box-menu-top .icon-menu-line,
.box-menu-top .icon-arrow,
.btn-menu-top.vh1-bl,
.btn-menu-top.vh2,
.btn-menu-top,
.icon-menu-line {
	color: var(--vk-on-accent);
}
.box-menu-top .btn-menu-top .icon-menu,
.box-menu-top .btn-menu-top .icon-menu-line,
.box-menu-top .btn-menu-top .icon-arrow,
.btn-menu-top.vh1-bl,
.btn-menu-top.vh2,
.btn-menu-top {
	color: var(--vk-menu-accent);
}
.btn-menu-top:hover {
	background: var(--vk-menu-accent);
	color: var(--vk-on-accent);
}
.box-menu-top .btn-menu-top:hover .icon-menu,
.box-menu-top .btn-menu-top:hover .icon-menu-line,
.box-menu-top .btn-menu-top:hover .icon-arrow {
	color: var(--vk-on-accent);
}
.mobm-list-item .mm-icon-catalog {
	background: var(--vk-accent);
}
#fm-fixed-mobile-bottom.fm_type_design_bottom_3 .icon-menu,
#fm-fixed-mobile-bottom.fm_type_design_bottom_3 .icon-menu-line,
#fm-fixed-mobile-bottom.fm_type_design_bottom_3 .btn-menu-mobile .text-a-icon,
.mob-fix-panel .btn-go-home.active-bg .text-a-icon,
.mob-fix-panel .btn-go-home.active-bg svg {
	color: var(--vk-accent);
}
#fm-fixed-mobile-bottom.fm_type_design_bottom_3 .btn-menu-mobile,
.mob-fix-panel .btn-go-home.active-bg {
	background: var(--vk-accent-soft);
}
#menu-vertical.open-mob .btn-menu,
#menu-vertical.open .btn-menu,
.btn-menu:hover,
.btn-menu:active,
.btn-menu.active,
.btn-menu.disabled,
.btn-menu-top:hover {
	background-color: var(--vk-accent-hover);
}
.ms-price .ms-price-cont {
	background: var(--vk-accent);
}
.ms-price .ms-price-from,
.ms-price .ms-price-text {
	color: var(--vk-on-accent);
}
/* Колір мусить стояти на ТІЙ САМІЙ специфічності, що й фон.
   mcustom.css задає `.product-thumb .btn-general { background:#ff5f00; color:#fff }`.
   Якщо перекрити тут лише фон, а колір лишити на голому `.btn-general`,
   виграє білий текст mcustom — і виходить біле по світло-сірому, 1.08:1. */
.product-thumb .btn-general {
	background-color: var(--vk-bg-2);
	color: var(--vk-text);
}
/* Іконка — то маскований span, її «колір» = background. mcustom.css:133 ставить
   їй #fff на рівні `.btn-general .icon-cart-add`; на світло-сірій кнопці в
   спокої це біле-по-світлому — іконки просто не видно. Перекриваємо тією ж
   логікою, що й текст: у спокої темна, в акцентних контекстах біла (нижче). */
.product-thumb .btn-general .icon-cart-add {
	background: var(--vk-text);
}
.btn-general {
	color: var(--vk-text);
}
#product-options.product-thumb .btn-general,
.kit-cart .btn-general,
.add-to-cart-footer .btn-general,
#popup-quickview .cart .btn-general,
#product .cart .btn-general,
.vk-compare__buy.btn-general,
.product-thumb:hover .cart .btn-general {
	background-color: var(--vk-accent);
	color: var(--vk-on-accent);
}
#product-options.product-thumb .btn-general .icon-cart-add,
.add-to-cart-footer .btn-general .icon-cart-add,
#popup-quickview .cart .btn-general .icon-cart-add,
#product .cart .btn-general .icon-cart-add,
.vk-compare__buy.btn-general .icon-cart-add,
.btn-general:focus .icon-cart-add,
.btn-general:hover .icon-cart-add,
.btn-general:active .icon-cart-add,
.product-thumb:hover .cart .btn-general .icon-cart-add {
	background: var(--vk-on-accent);
}
.btn-general:focus,
.btn-general:hover,
.btn-general:active {
	color: var(--vk-on-accent);
	background-color: var(--vk-accent-hover) !important;
}
/* «В кошику» — підтверджений стан, а не головна дія. Тема давала йому суцільний
   #53A974 (біла іконка = 2.87:1, нижче 3:1 для елементів керування) і робила
   найгучнішою плямою в сітці, де сама дія «Купити» в спокої навмисне тиха.
   Лишаємо той самий тихий регістр, але семантичним зеленим системи: 4.70:1. */
.btn-general.is-active,
.product-thumb:hover .cart .btn-general.is-active {
	background-color: var(--vk-ok-soft) !important;
	color: var(--vk-ok);
	box-shadow: inset 0 0 0 1px var(--vk-ok);
}
.btn-general.is-active .icon-cart-add,
.product-thumb:hover .cart .btn-general.is-active .icon-cart-add {
	background: var(--vk-ok);
}
.btn-general.is-active .text-cart-add {
	color: var(--vk-ok);
}
/* Ховер підтверджує «вже в кошику», а не підмінює його акцентом. */
.btn-general.is-active:focus,
.btn-general.is-active:hover,
.btn-general.is-active:active,
.product-thumb:hover .cart .btn-general.is-active:hover {
	background-color: var(--vk-ok) !important;
	color: var(--vk-on-dark);
}
.btn-general.is-active:focus .icon-cart-add,
.btn-general.is-active:hover .icon-cart-add,
.btn-general.is-active:active .icon-cart-add,
.product-thumb:hover .cart .btn-general.is-active:hover .icon-cart-add {
	background: var(--vk-on-dark);
}
.btn-general.is-active:focus .text-cart-add,
.btn-general.is-active:hover .text-cart-add,
.btn-general.is-active:active .text-cart-add {
	color: var(--vk-on-dark);
}
.footer-ribbon {
	background-color: var(--vk-accent);
}
/* Декоративну «складку» теми під правим кутом стрічки прибрано —
   замовник 2026-08-28 сприймає її як дефект. */
.footer-ribbon-box::after { display: none; }
footer .btn-newsletter {
	background-color: var(--vk-accent);
	color: var(--vk-on-accent);
}
footer .btn-newsletter:hover,
footer .btn-newsletter:active,
footer .btn-newsletter:focus {
	background-color: var(--vk-accent-hover);
	border: 0;
	color: var(--vk-on-accent);
}

/* --- Бренд-помаранчевий клієнта з mcustom.css -------------------------
   mcustom.css фарбує ці поверхні у старий #ff5f00. Переводимо їх на токен,
   щоб бренд-колір жив в одному місці (:root), а не в 13 правилах чужого файлу.
   mcustom вантажиться раніше, тож нам вистачає однакової специфічності;
   !important — лише там, де він стоїть в оригіналі (.subcategory). */
.wall-category-box .wall-cat-name,
.banner-blocks-container.banner_img_left .banner-item,
.container-module .see-all-reviews,   /* mcustom бере саме цю специфічність */
.chm-btn,
.footer-ribbon,
.ocf-theme-light .ocf-search-btn-static,
.ocf-theme-light .ocf-search-btn-popover,
.ocf-theme-light .ocf-search-btn-static.ocf-disabled,
.ocf-theme-light .ocf-search-btn-popover.ocf-disabled {
	background-color: var(--vk-accent);
	color: var(--vk-on-accent);
}
/* Плитка підкатегорії — рамкова кнопка, як «Каталог» (.btn-menu-top), а не
   суцільна заливка. box-shadow гасимо: тема малює ним світле кільце, яке з
   рамкою читалось би як подвійний контур. */
.subcategory {
	background: var(--vk-bg) !important;
	border: 1.5px solid var(--vk-menu-accent);
	box-shadow: none;
	justify-content: center !important;
}
.subcategory .sc-name {
	width: 100%;
	text-align: center;
	color: var(--vk-menu-accent);
}
/* Hover: заливка акцентом, як у кнопки меню (тема лишала синій лінк-колір
   з підкресленням — #0f4b82, 1.7:1 по помаранчевому). */
.subcategory:hover {
	background: var(--vk-menu-accent) !important;
	box-shadow: none;
}
.subcategory:hover .sc-name {
	color: var(--vk-on-accent);
	text-decoration: none;
}
/* Пілюльні таби товару (.my-tabs) — одна схема на всі стани.
   Було з mcustom: актив — білим по #00bc52 (2.53:1), hover сусіда — помаранчева
   пілюля, а hover АКТИВНОГО з'їдався нашим underline-стилем у прозорий фон із
   білим текстом (mcustom тримає color:#fff !important) — біле по білому.
   Тепер: актив — акцентна пілюля в усіх станах (5.26:1), hover неактивного —
   тихий сірий. Селектори повторюють mcustom, щоб виграти каскад пізнішим
   файлом, а не специфічністю. */
.tabs .my-tabs.nav > li > a:focus,
.my-tabs.nav > li > a:hover {
	background-color: var(--vk-bg-3);
	color: var(--vk-text);
}
.my-tabs.nav > li.active > a,
.my-tabs.nav > li.active > a:hover,
.my-tabs.nav > li.active > a:focus,
.tabs .my-tabs.nav > li.active > a:focus,
.tabs__header .my-tabs.nav-tabs > li.active > a:focus,
.tabs__header .my-tabs > li.active a {
	background: var(--vk-accent);
	color: var(--vk-on-accent) !important;   /* mcustom ставить color з !important */
	border-bottom: 0;
}
/* Статус наявності на сторінці товару: тема дає #53A974 по #F0FAF4 — 2.7:1,
   і кількість поруч тим самим кольором. Темнішого зеленого досить. */
#product .stock_status_success,
#popup-quickview .stock_status_success,
#product .stock-quantity_success,
#popup-quickview .stock-quantity_success {
	color: var(--vk-ok);
}
#product .stock_status_success::before,
#popup-quickview .stock_status_success::before {
	background: var(--vk-ok);
}
/* .chm-btn-grey — сіра другорядна кнопка, її mcustom не перефарбовував */
.chm-btn.chm-btn-grey {
	background-color: var(--vk-bg-2);
	color: var(--vk-text);
}
.chm-btn.chm-btn-grey:hover,
.chm-btn.chm-btn-grey:focus {
	background-color: var(--vk-bg-3);
	color: var(--vk-text);
}

/* --- Кнопки: єдина геометрія --- */
.chm-btn,
.btn {
	border-radius: var(--vk-r-sm);
	font-weight: var(--vk-fw-medium);
	transition: background-color var(--vk-t), color var(--vk-t), box-shadow var(--vk-t);
}
.chm-btn { border-radius: var(--vk-r-sm); }

/* Стан завантаження — Chameleon вішає .active-load на «показати ще» */
.chm-btn.active-load,
.btn.active-load,
.vk-is-loading {
	pointer-events: none;
	opacity: var(--vk-disabled-o);
	cursor: progress;
}

/* ========================================================================
   5. ФОРМИ (ТЗ §5.5, §7.2)
   ======================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
	color: var(--vk-text);
	background-color: var(--vk-bg);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r-sm);
	font-size: var(--vk-fs-body);
	transition: border-color var(--vk-t), box-shadow var(--vk-t);
}
.form-control:hover,
input:hover, select:hover, textarea:hover {
	border-color: var(--vk-border-strong);
}
/* Chameleon глушить box-shadow на input (stylesheet.css:352) — повертаємо */
.form-control:focus,
input:focus, select:focus, textarea:focus {
	border-color: var(--vk-accent);
	box-shadow: var(--vk-focus-ring);
	outline: none;
}
/* Поле пошуку в шапці окремо: stylesheet.css має
   `.header-search .form-control { box-shadow: none !important }` — правило
   БЕЗ :focus, тож звичайною вагою його не перебити, і поле лишалось без
   видимого фокуса. Б'ємо тим самим !important, але лише в :focus-visible,
   щоб миша кільця не вмикала. */
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	box-shadow: var(--vk-focus-ring) !important;
}
.form-control::placeholder,
input::placeholder, textarea::placeholder {
	color: var(--vk-text-3);
	opacity: 1;
}
.form-control:disabled,
.form-control[readonly],
input:disabled, select:disabled, textarea:disabled {
	background-color: var(--vk-bg-2);
	color: var(--vk-text-3);
	opacity: 1;
	cursor: not-allowed;
}

/* Помилки валідації — колір + aria-invalid, не лише колір (ТЗ §7.2) */
.has-error .form-control,
.form-control.is-invalid,
[aria-invalid="true"] {
	border-color: var(--vk-err);
	background-color: var(--vk-err-soft);
}
.has-error .form-control:focus,
[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(209, 59, 59, .3);
}
.vk-field-error {
	display: block;
	margin-top: var(--vk-sp-1);
	color: var(--vk-err);
	font-size: var(--vk-fs-sm);
}
.vk-field-success {
	color: var(--vk-ok);
	font-size: var(--vk-fs-sm);
}

label { font-weight: var(--vk-fw-medium); font-size: var(--vk-fs-sm); }

/* --- Показати/сховати пароль ---------------------------------------------
   Око сиділо на inline `right: 50px`, а в модалці праворуч від поля лежить
   декоративна іконка замка: .chm-modal input + label.chm-input-icon —
   блок шириною 60px з роздільною рискою на своєму лівому краї
   (stylesheet.css:5356). 50px кидало око просто на цю риску.
   Тому позиція рахується від ширини тієї іконки, а не з голови. */
.vk-pw-field { position: relative; }
.vk-pw-field .form-control { padding-right: 48px; }

.vk-pw-toggle {
	position: absolute;
	right: var(--vk-sp-3);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--vk-r-sm);
	background: transparent;
	color: var(--vk-text-3);
	cursor: pointer;
	transition: color var(--vk-t);
}
.vk-pw-toggle:hover { color: var(--vk-text); }
.vk-pw-toggle .fa { font-size: 15px; }

/* Поле з декоративною іконкою: відсуваємо око ліворуч від неї та лишаємо
   тексту місце під обидва елементи. */
.chm-modal .vk-pw-field .form-control { padding-right: 100px; }
.chm-modal .vk-pw-field .vk-pw-toggle { right: 68px; }
.text-success { color: var(--vk-ok); }
.text-warning { color: var(--vk-warn); }

/* ========================================================================
   6. КАРТКА ТОВАРУ, ЦІНИ, БЕЙДЖІ, СТАТУСИ
   ======================================================================== */
.product-thumb {
	background: var(--vk-bg);
	border-radius: var(--vk-r);
	transition: box-shadow var(--vk-t);
}
.container-module .item.swiper-slide .product-thumb,
.no-slider .product-thumb {
	border-radius: var(--vk-r);
}
.product-thumb:hover {
	box-shadow: var(--vk-shadow-2);
}
.product-name a {
	color: var(--vk-text);
	font-size: var(--vk-fs-sm);
	line-height: var(--vk-lh-body);
}
.product-name a:hover { color: var(--vk-link); }

/* Артикул/SKU (ТЗ §4.4.2.5). Живе у рядку статусу наявності, праворуч
   (правка 2026-08-18) — окремий рядок під назвою робив картку вищою.
   Гасимо padding-bottom:10px зі stylesheet.css:3049, щоб рядок не ріс. */
.product-model {
	color: var(--vk-text-3);
	font-size: var(--vk-fs-cap);
	font-weight: var(--vk-fw-normal);
	text-align: left;
	padding-bottom: 0;
}
.ch-stock-status .product-model {
	margin-left: auto;
	padding-bottom: 0;
	text-align: right;
}
/* Режим «Список»: тема позиціонує артикул абсолютно над фото
   (stylesheet.css:3769) — правило писалося, коли він був окремим блоком
   у .product-thumb. Тепер він у рядку статусу, тож позиціонування знімаємо,
   інакше відлітає ліворуч над картинкою. */
.product-list .product-thumb .ch-stock-status .product-model {
	position: static;
	width: auto;
	max-width: none;
}
/* На мобільному дві колонки вузькі — артикул поруч зі статусом рветься
   на два рядки і налазить. Кидаємо його під статус (правка 2026-08-18). */
@media (max-width: 767px) {
	.ch-stock-status { flex-wrap: wrap; }
	.ch-stock-status .product-model {
		width: 100%;
		margin-left: 0;
		text-align: left;
	}
}

/* Каталог як на референсі (dailyopt): у спокої картка без ліній,
   рамка і тінь з'являються лише при наведенні. Гасить
   stylesheet.css:3659 (постійний бокс-шедоу 1px #EAEDF7). */
.product-grid .product-thumb { box-shadow: none; }
.product-grid .product-thumb:hover {
	box-shadow: 0 0 0 1px var(--vk-border), var(--vk-shadow-2);
}

/* --- Ціни (ТЗ §4.4.2.7) --- */
.price {
	color: var(--vk-price);
	font-size: var(--vk-fs-price);
	font-weight: var(--vk-fw-bold);
	line-height: var(--vk-lh-tight);
}
.price-old {
	color: var(--vk-price-old);
	font-size: var(--vk-fs-price-2);
	font-weight: var(--vk-fw-normal);
}
.price-new {
	color: var(--vk-price-new);
	font-weight: var(--vk-fw-bold);
}
.price-tax, .points {
	color: var(--vk-text-2);
	font-size: var(--vk-fs-cap);
	opacity: 1;
}

/* --- Низ картки (ТЗ §4.4.2, макет): ціна своїм рядком, під нею ряд
   «степпер + кошик». Партіал рендерить степпер → ціна → опт → кошик,
   а stylesheet.css:6502 малює степпер вертикальним стовпчиком 34px
   впритул до ціни. Розмітку в партіалі не чіпаємо (нею користуються
   й інші контексти) — переставляємо порядком флекс-елементів. --- */
.product-thumb .price-actions-box {
	align-items: center;
	row-gap: var(--vk-sp-2);
}
.product-thumb .price-actions-box .price {
	order: -1;
	flex: 1 0 100%;
	min-height: 0;
}
.product-thumb .price-actions-box .vk-price-opt {
	order: -1;
}
.product-thumb .price-actions-box .quantity_plus_minus {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0 var(--vk-sp-3) 0 0;
	/* category/search/manufacturer несуть інлайновий <style> зі своїм
	   оформленням степпера (блакитна рамка, overflow:hidden) — гасимо,
	   вигляд задають правила вище. */
	border: 0;
	background: transparent;
	overflow: visible;
}
/* Мінус ліворуч, плюс праворуч. Саме через order, а не row-reverse:
   партіал рендерить add-up першим, а власні копії картки в category/search —
   add-down першим, тож реверс DOM-порядку розвертав їх по-різному. */
.product-thumb .price-actions-box .quantity_plus_minus .add-down { order: -1; }
.product-thumb .price-actions-box .quantity_plus_minus .add-up   { order: 1; }
.product-thumb .price-actions-box .quantity_plus_minus .add-action,
#product .qty-cart-line .quantity_plus_minus .add-action,
#popup-quickview .quantity-number .add-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--vk-bg);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r);
}
.product-thumb .price-actions-box .quantity_plus_minus input.quantity-num,
#product .qty-cart-line .quantity_plus_minus input.quantity-num,
#popup-quickview .quantity-number input.quantity-product {
	width: 34px;
	height: auto;
	border: 0;
	background: transparent;
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-medium);
	line-height: 1;
}
/* --- Прайс-лист (common.js:384 вішає .product-price на category/search/
   manufacturer). Тема верстала рядок вкладеними флексами, кожна клітинка
   зі своїм бордером і паддінгом — колонки пливли від рядка до рядка, статус
   різався, ціна тонула. Замість цього: кожен рядок — грід з однаковим
   набором колонок (фото · артикул · назва · наявність · ціна · степпер ·
   кошик), а проміжні обгортки .caption / .price-actions-box /
   .qty-cart-line розчиняються display:contents. Розмітку не чіпаємо.
   Режим живе лише ≥1200px — нижче common.js сам перемикає на grid. --- */
.product-price .product-thumb {
	display: grid;
	grid-template-columns: 64px 132px minmax(0, 1fr) 140px 90px auto 40px;
	align-items: center;
	column-gap: var(--vk-sp-3);
	padding: var(--vk-sp-2) var(--vk-sp-3);
	border-color: var(--vk-border);
	transition: background-color var(--vk-t);
}
.product-price .product-thumb:hover { background: var(--vk-bg-2); }
.product-price .product-thumb .caption,
.product-price .product-thumb .price-actions-box,
.product-price .product-thumb .qty-cart-line {
	display: contents;
}
/* Клітинки: скидаємо бордери-роздільники й паддінги теми — сітку тепер
   тримає грід, а не рамки. */
.product-price .product-thumb .image {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	min-width: 0;
	max-width: none;
	min-height: 0;
	padding: 0;
	border: 0;
}
.product-price .product-thumb .image img {
	display: block;
	width: 56px;
	height: auto;
	border-radius: var(--vk-r-sm);
}
.product-price .product-thumb .product-model {
	grid-column: 2;
	grid-row: 1;
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	color: var(--vk-text-3);
	font-size: var(--vk-fs-sm);
}
.product-price .product-thumb .caption .product-name {
	grid-column: 3;
	grid-row: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	font-size: var(--vk-fs-body);
}
/* Прайс-лист читають заради повних назв — кламп картки тут недоречний */
.product-price .product-thumb .product-name a {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	height: auto;
}
/* Рядок статусу розчиняємо так само, як .caption і .qty-cart-line: статус
   і артикул — самостійні клітинки (4 і 2). Інакше артикул тулиться всередину
   колонки статусу й рветься на три рядки поверх ціни. */
.product-price .product-thumb .ch-stock-status {
	display: contents;
}
.product-price .product-thumb .ch-stock-status .stock-status {
	/* Тема дає статусу display:inherit (stylesheet.css:3085) — від contents
	   батька він теж ставав contents, і галочка з текстом розліталися по
	   вільних клітинках гріда. Повертаємо йому власний бокс. */
	display: flex;
	align-items: center;
	grid-column: 4;
	grid-row: 1;
	padding: 0;
}
/* Тема лишила артикулу вигляд окремої клітинки прайс-листа
   (.caption .product-model — 90px, паддінги, бордер, центрування) і б'є
   специфічністю. Тут він просто текст у своїй колонці гріда: 132px під
   найдовший артикул каталогу (~119px), довший — з трикрапкою, щоб колонки
   сусідніх рядків лишались вирівняними. */
.product-price .product-thumb .ch-stock-status .product-model {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* nowrap + overflow:hidden теми рубали «Немає в наявності» посеред слова
   (ellipsis не працює — елемент flex); у колонці 150px статус і так
   вміщається, а нестандартно довгий нехай переноситься. */
.product-price .product-thumb .stock-status {
	white-space: normal;
	overflow: visible;
}
/* margin-top:0 з !important — перебиває театральне
   .product-thumb .caption > div:nth-child(3) { margin-top:auto !important } */
.product-price .product-thumb .caption > .price {
	grid-column: 5;
	grid-row: 1;
	justify-self: end;
	margin: 0 !important;
	padding: 0;
	text-align: right;
	color: var(--vk-price);
	font-size: var(--vk-fs-price);
	font-weight: var(--vk-fw-bold);
	font-variant-numeric: tabular-nums;
}
.product-price .product-thumb .quantity_plus_minus {
	grid-column: 6;
	grid-row: 1;
	margin: 0;
}
/* Щільніший степпер, ніж у картках: рядків багато, простір дорогий */
.product-price .product-thumb .quantity_plus_minus .add-action {
	width: 32px;
	height: 32px;
	border-radius: var(--vk-r-sm);
}
.product-price .product-thumb .quantity_plus_minus input.quantity-num {
	width: 30px;
	font-size: var(--vk-fs-body);
}
.product-price .product-thumb .qty-cart-line > div:not(.quantity_plus_minus) {
	grid-column: 7;
	grid-row: 1;
}
.product-price .product-thumb .price-actions-box > .vk-avail-btn,
.product-price .product-thumb .price-actions-box > .cart {
	grid-column: 6 / 8;
	grid-row: 1;
	width: 100%;
	margin: 0;
}
.product-price .product-thumb .vk-avail-btn {
	width: 100%;
	white-space: nowrap;
}
/* Атрибути в цьому режимі не показуємо — рядок лишається однорядковим
   (тема так само ховає опис, рейтинг і стікери). */
.product-price .product-thumb .attribute-cat { display: none; }

/* --- Статуси наявності (ТЗ §4.4.2.6) --- */
.stock-status { font-size: var(--vk-fs-sm); font-weight: var(--vk-fw-medium); }
.stock-status.instock    { color: var(--vk-ok); }
.stock-status.lowstock   { color: var(--vk-warn); }
.stock-status.outofstock { color: var(--vk-err); }

/* --- Перемикач Опт/Роздріб у шапці (ТЗ §4.1.5) -------------------------
   Замінює інлайнові стилі, які раніше генерував PHP-інжектор
   (catalog/controller/common/header.php). Тепер це звичайна розмітка,
   тож стан рахує CSS, а не рядок у контролері. */
.vk-pricemode {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	margin-right: var(--vk-sp-3);
	padding: 3px;
	background: var(--vk-bg-2);
	border-radius: var(--vk-r-pill);
	font-size: var(--vk-fs-sm);
	line-height: 1.2;
}
.vk-pricemode__btn {
	flex: 1;
	padding: 6px 18px;
	border-radius: var(--vk-r-pill);
	color: var(--vk-text);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--vk-t), color var(--vk-t);
}
.vk-pricemode__btn:hover { color: var(--vk-accent); }
.vk-pricemode__btn.is-active,
.vk-pricemode__btn.is-active:hover {
	background: var(--vk-accent);
	color: var(--vk-on-accent);
	font-weight: var(--vk-fw-medium);
}
@media (max-width: 991px) {
	/* десктопний пошук прихований — ставимо перемикач по центру свого рядка */
	.vk-pricemode { margin: var(--vk-sp-2) auto; }
}

/* --- Оптовий рядок у картці (ТЗ §4.4.2.7) ------------------------------
   Замовник лишив оптову ціну під авторизацією, тож гість бачить мінімальну
   партію та запрошення увійти, а авторизований оптовик — саму ціну. */
.vk-price-opt {
	flex: 1 0 100%;
	margin-top: var(--vk-sp-1);
	font-size: var(--vk-fs-sm);
	line-height: 1.3;
}
.vk-price-opt__value {
	color: var(--vk-price-opt);
	font-size: var(--vk-fs-price-2);
	font-weight: var(--vk-fw-bold);
}
.vk-price-opt__qty {
	color: var(--vk-text-2);
	font-size: var(--vk-fs-cap);
	white-space: nowrap;
}
/* Компактна рамка навколо «Гурт: ціна після входу». */
.vk-price-opt__login {
	display: inline-flex;
	align-items: baseline;
	gap: var(--vk-sp-1);
	flex-wrap: wrap;
	padding: 2px 10px;
	border: 1px solid var(--vk-price-opt);
	border-radius: var(--vk-r-sm);
	color: var(--vk-price-opt);
	font-weight: var(--vk-fw-medium);
	text-decoration: none;
}
.vk-price-opt__login:hover {
	color: var(--vk-on-accent);
	background: var(--vk-price-opt);
}
.vk-price-opt__login:hover .vk-price-opt__qty { color: inherit; }

/* --- Бейджі/стікери (ТЗ §4.4.2.1) --- */
.sticker-ns.vk-sticker-opt {
	background: var(--vk-price-opt);
	color: var(--vk-on-accent);
}
.sticker-ns {
	border-radius: var(--vk-r-pill);
	font-size: var(--vk-fs-cap);
	font-weight: var(--vk-fw-medium);
	line-height: 1;
	padding: 5px 10px;
}
.sticker-ns.newproduct   { background: var(--vk-ok);     color: var(--vk-on-accent); }
.sticker-ns.bestseller   { background: var(--vk-accent); color: var(--vk-on-accent); }
.sticker-ns.special      { background: var(--vk-err);    color: var(--vk-on-accent); }
.sticker-ns.popular      { background: var(--vk-warn);   color: var(--vk-on-accent); }
.sticker-ch-pd.procent-skidka {
	background: var(--vk-err);
	color: var(--vk-on-accent);
	border-radius: var(--vk-r-pill);
}

/* ========================================================================
   7. ТАБИ, АККОРДЕОНИ, ДРОПДАУНИ, МОДАЛКИ
   ======================================================================== */
/* Стиль «підкреслення» — ЛИШЕ для звичайних bootstrap-табів.
   Таби товару (.my-tabs) у теми пілюльні; якщо не виключити їх звідси,
   `background: transparent` на активному:hover з'їдає фон пілюлі, а білий
   текст від mcustom (!important) лишається — біле по білому. */
.nav-tabs:not(.my-tabs) { border-bottom: 1px solid var(--vk-border); }
.nav-tabs:not(.my-tabs) > li > a {
	color: var(--vk-text-2);
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-medium);
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	transition: color var(--vk-t), border-color var(--vk-t);
}
.nav-tabs:not(.my-tabs) > li > a:hover { color: var(--vk-text); background: transparent; }
.nav-tabs:not(.my-tabs) > li.active > a,
.nav-tabs:not(.my-tabs) > li.active > a:hover,
.nav-tabs:not(.my-tabs) > li.active > a:focus {
	color: var(--vk-accent);
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--vk-accent);
}

/* Нативний аккордеон <details>/<summary> — використовується для FAQ і
   SEO-тексту (Етап 4). Клавіатура і скрінрідери працюють без JS,
   а текст присутній у вихідному HTML для індексації (ТЗ §4.7, §7.3). */
/* Успадковується — вмикає інтерполяцію до auto лише всередині аккордеона,
   а не глобально на документі. */
.vk-accordion { interpolate-size: allow-keywords; }
.vk-accordion > details {
	border-bottom: 1px solid var(--vk-border);
}
.vk-accordion > details > summary {
	cursor: pointer;
	list-style: none;
	padding: var(--vk-sp-4) var(--vk-sp-6) var(--vk-sp-4) 0;
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-medium);
	color: var(--vk-text);
	position: relative;
}
.vk-accordion > details > summary::-webkit-details-marker { display: none; }
.vk-accordion > details > summary::after {
	content: "";
	position: absolute;
	right: var(--vk-sp-2);
	top: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid var(--vk-text-2);
	border-bottom: 2px solid var(--vk-text-2);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--vk-t);
}
.vk-accordion > details[open] > summary::after {
	transform: translateY(-20%) rotate(-135deg);
}
.vk-accordion > details > summary:hover { color: var(--vk-accent); }
.vk-accordion > details > div,
.vk-accordion > details > p {
	padding-bottom: var(--vk-sp-4);
	color: var(--vk-text-2);
}
/* Розкриття <details> нативно миттєве. ::details-content + interpolate-size
   дають плавну висоту без JS і без обгорток у розмітці; браузери без цієї
   пари просто ігнорують правила і відкривають як раніше — тому fallback
   не потрібен. allow-discrete тримає вміст видимим протягом згортання.
   Тривалість власна, не --vk-t: 180ms для висоти читається як ривок. */
.vk-accordion > details::details-content {
	block-size: 0;
	overflow: hidden;
	transition:
		block-size var(--vk-t-panel),
		content-visibility var(--vk-t-panel) allow-discrete;
}
.vk-accordion > details[open]::details-content { block-size: auto; }

.dropdown-menu {
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r);
	box-shadow: var(--vk-shadow-2);
	color: var(--vk-text);
}
.dropdown-menu > li > a { color: var(--vk-text); }
/* Випадайка контактів абсолютна всередині #phone (position:relative), тож
   shrink-to-fit впирається в ширину колонки телефону, а nowrap-пункти
   («Написати на пошту») вилазили за правий край. */
#phone .drop-contacts { min-width: max-content; }
.phone-box .additional-tel a { white-space: nowrap; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--vk-bg-2);
	color: var(--vk-accent);
}

/* Кнопки на сторінці 404 (ТЗ §5.1) */
/* Сторінка 404. Опис до неї заповнюється в адмінці помовно, і для української
   його не заповнили — лишались дві кнопки в порожньому вікні на пів-екрана.
   Шаблон тепер має власний блок, а тут — його вертикальний ритм. */
.vk-404 {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--vk-sp-7) 0;
	text-align: center;
}
.vk-404__art {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 auto var(--vk-sp-5);
}
.vk-404__title { margin-bottom: var(--vk-sp-3); }
.vk-404__text {
	margin: 0 auto var(--vk-sp-5);
	max-width: 520px;
	color: var(--vk-text-2);
}
.vk-404__search {
	display: flex;
	gap: var(--vk-sp-2);
	max-width: 460px;
	margin: 0 auto;
}
.vk-404__search .form-control {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--vk-ctrl-h);
}
.vk-404__search .chm-btn {
	flex: 0 0 auto;
	height: var(--vk-ctrl-h);
	padding: 0 var(--vk-sp-5);
}
/* Блок із адмінки несе власний <h1> і центрування — лишаємо як є,
   лише прибираємо нижній відступ перед пошуком. */
.vk-404 .chm-not-found { margin-bottom: var(--vk-sp-5); }

.vk-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vk-sp-3);
	justify-content: center;
	margin-top: var(--vk-sp-5);
}

@media (max-width: 575px) {
	.vk-404 { padding: var(--vk-sp-5) 0; }
	.vk-404__search { flex-wrap: wrap; }
	.vk-404__search .form-control,
	.vk-404__search .chm-btn { flex: 1 1 100%; }
	.vk-404-actions .chm-btn { flex: 1 1 100%; }
}

/* Бай-бокс товару (ТЗ §5.5). Розмітка теми сама зве контейнер .qty-cart-line
   («лінія»), але жодного правила для нього ні в темі, ні в mcustom немає —
   тож степпер 60px і кнопка-іконка падали стовпчиком (так і на проді).
   Ставимо їх у ряд і даємо кнопці нормальну ширину. */
#product .qty-cart-line {
	display: flex;
	align-items: stretch;
	gap: var(--vk-sp-3);
	flex-wrap: wrap;
}
/* Тема стилить степпер вертикальним стовпчиком 34px (stylesheet.css:6502)
   і під DOM-порядок «add-up перший», а product.twig рендерить add-down
   першим — стрілки й радіуси стояли догори дриґом. Кладемо в ряд, кнопки
   40px — як у картках вище. */
#product .qty-cart-line .quantity_plus_minus {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
}
/* mcustom дає #product .cart { width:100% } — у флекс-ряду це виштовхує
   кнопку на окремий рядок. Забираємо ширину, кнопка тягнеться на залишок. */
#product .qty-cart-line .cart {
	margin: 0;
	width: auto;
	flex: 1 1 auto;
}
#product .qty-cart-line .btn-general {
	width: 100%;
	min-width: 220px;   /* уся лінія shrink-to-fit: без мінімуму кнопка стискається до іконки */
	min-height: 46px;
	height: 100%;
}

/* Сторінка товару: фото · покупка · умови, як у погодженому референсі. */
.vk-product-breadcrumb {
	display: block !important;
	visibility: visible !important;
	position: relative;
	z-index: 2;
}
.vk-product-page #product {
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r);
	overflow: hidden;
}
.vk-product-page #product > div,
.vk-product-page #product > aside {
	min-width: 0;
}
.vk-product-page .right-block-inner {
	padding: var(--vk-sp-5);
}
.vk-product-page .h1-prod-name {
	margin: 0 0 var(--vk-sp-4);
	font-size: clamp(22px, 1.65vw, 28px);
	line-height: 1.2;
}
.vk-product-page .image-block,
.vk-product-page .right-block {
	border: 0;
}
.vk-product-page .general-image .main-image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.vk-product-service {
	order: 3;
	padding: var(--vk-sp-5);
	background: var(--vk-bg-2);
	color: var(--vk-text-2);
}
.vk-product-service__item + .vk-product-service__item {
	margin-top: var(--vk-sp-4);
	padding-top: var(--vk-sp-4);
	border-top: 1px solid var(--vk-border);
}
.vk-product-service__title {
	margin-bottom: var(--vk-sp-2);
	color: var(--vk-text);
	font-weight: var(--vk-fw-bold);
}
.vk-product-service p {
	margin: 0;
	font-size: var(--vk-fs-sm);
	line-height: 1.55;
}
.tabs-product #tab-description {
	padding: var(--vk-sp-5) !important;
	font-size: var(--vk-fs-body);
	line-height: 1.7;
}
.vk-product-description { white-space: normal; }
.vk-product-description__title {
	margin: 0 0 var(--vk-sp-4);
	color: var(--vk-text);
	font-size: var(--vk-fs-h3);
	font-weight: var(--vk-fw-bold);
}
.vk-product-description__body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	max-height: 5.1em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.vk-product-description.is-expanded .vk-product-description__body {
	display: block;
	max-height: none;
	-webkit-mask-image: none;
	mask-image: none;
}
/* Дві колонки згортаються цілком (line-clamp зрізав би сітку до одного рядка) */
.vk-product-description__body--cols {
	display: block;
	-webkit-line-clamp: none;
	max-height: 11em;
}
.vk-product-description__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vk-sp-5);
}
/* Одна колонка: характеристики першими (на десктопі вони праворуч) */
.vk-product-description__col--specs { order: -1; }
@media (min-width: 768px) {
	.vk-product-description__cols { grid-template-columns: 1fr 1fr; }
	.vk-product-description__col--specs { order: 0; }
}
.vk-product-description__cols h4,
.vk-product-description__cols h5,
.vk-product-description__cols h6 { margin: var(--vk-sp-3) 0 var(--vk-sp-2); font-size: 1.05em; font-weight: var(--vk-fw-bold); }
.vk-product-description__cols p { margin: 0 0 var(--vk-sp-3); }
.vk-product-description__cols ul,
.vk-product-description__cols ol { margin: 0 0 var(--vk-sp-3); padding-left: 1.4em; }
.vk-product-description__toggle {
	margin-top: var(--vk-sp-3);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vk-link);
	font: inherit;
	font-weight: var(--vk-fw-medium);
	cursor: pointer;
}

@media (min-width: 1200px) {
	.vk-product-page #product {
		display: grid;
		grid-template-columns: minmax(0, 40fr) minmax(0, 34fr) minmax(250px, 26fr);
		align-items: stretch;
	}
	.vk-product-page #product > div,
	.vk-product-page #product > aside {
		float: none;
		width: auto;
		max-width: none;
	}
	.vk-product-page #product > .right-block,
	.vk-product-page #product > .vk-product-service {
		border-left: 1px solid var(--vk-border);
	}
	.vk-product-page #product > .vk-product-service { grid-column: 3; }
}

@media (min-width: 768px) and (max-width: 1199px) {
	.vk-product-page .vk-product-service {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--vk-sp-4);
		flex: 0 0 100%;
		width: 100%;
		border-top: 1px solid var(--vk-border);
	}
	.vk-product-page .vk-product-service__item + .vk-product-service__item {
		margin: 0;
		padding: 0 0 0 var(--vk-sp-4);
		border-top: 0;
		border-left: 1px solid var(--vk-border);
	}
}

@media (max-width: 767px) {
	.vk-product-page .right-block-inner,
	.vk-product-service { padding: var(--vk-sp-4); }
	.vk-product-page .vk-product-service {
		flex: 0 0 100%;
		width: 100%;
		border-top: 1px solid var(--vk-border);
	}
	.vk-product-page .h1-prod-name { font-size: 22px; }
}

/* Бай-бокс квіквью — та сама лінія, що й на картці товару вище.
   Тема ставила степпер вертикальним стовпчиком (стрілки одна над одною,
   цифра між ними) і виносила «Купити» окремим рядком під ціною —
   третій варіант того самого контролу на сайті. Тут: ціна рядком,
   під нею [− 1 +] і кнопка поруч. Розмітку не чіпаємо, лише порядок. */
#popup-quickview .qv-price-action-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vk-sp-3);
}
#popup-quickview .qv-price-action-group > .price {
	order: -1;
	flex: 0 0 100%;
	margin: 0;
}
/* Тема замикала степпер у 36px (stylesheet.css:4347) — рівно під стовпчик.
   У ряд йому треба стільки, скільки просять дві кнопки й поле. */
#popup-quickview .quantity-adder {
	flex: 0 0 auto;
	max-width: none;
	margin: 0;
}
#popup-quickview .quantity-number {
	width: auto;
	flex-direction: row;
	align-items: center;
	gap: var(--vk-sp-2);
}
/* Мінус ліворуч, плюс праворуч — як у картці й на сторінці товару.
   Через order, бо шаблон рендерить add-up першим. */
#popup-quickview .quantity-number .add-down { order: -1; }
#popup-quickview .quantity-number .add-up   { order: 1; }
#popup-quickview .qv-price-action-group > .info-group {
	flex: 1 1 220px;
	gap: var(--vk-sp-3);
	margin: 0;
}
#popup-quickview .info-group .cart {
	flex: 1 1 auto;
	max-width: none;
	width: auto;
}
#popup-quickview .info-group .btn-general,
#popup-quickview .info-group .btn-fastorder {
	min-height: var(--vk-ctrl-h);
	height: var(--vk-ctrl-h);
	margin: 0;
}

/* Порожній стан живого пошуку (ТЗ §4.1.3) */
.vk-search-empty {
	padding: var(--vk-sp-5) var(--vk-sp-4);
	text-align: center;
	list-style: none;
}
.vk-search-empty__title {
	color: var(--vk-text);
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-medium);
	margin-bottom: var(--vk-sp-1);
}
.vk-search-empty__hint {
	color: var(--vk-text-2);
	font-size: var(--vk-fs-sm);
}

/* Випадайка живого пошуку не повинна ховатись під сусідні блоки (ТЗ §4.1) */
.autocomplete-search,
.live-search-result,
.box-search .dropdown-menu {
	z-index: 1050;
	border-radius: var(--vk-r);
	box-shadow: var(--vk-shadow-2);
}

.modal-content {
	border: 0;
	border-radius: var(--vk-r-lg);
	box-shadow: var(--vk-shadow-3);
}

/* --- Плавна анімація відкриття та закриття каталогу (ТЗ §5.5) --- */
@keyframes vkCatalogMenuOpen {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes vkCatalogMenuClose {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateY(-8px) scale(0.99);
	}
}

@keyframes vkSubmenuFadeIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Основний випадаючий блок каталогу в шапці */
.menu-header-box.type-menu-h-1.active-m .m_type_header_1 {
	display: block;
	animation: vkCatalogMenuOpen var(--vk-t-panel) forwards;
	transform-origin: top center;
	will-change: opacity, transform;
}

.menu-header-box.type-menu-h-1.active-m.is-closing .m_type_header_1 {
	animation: vkCatalogMenuClose var(--vk-t) forwards;
}

/* Підменю каталогу 2, 3 та 4 рівнів */
#menu-vertical #menu-vertical-list > li.menu-open > .ns-dd,
#menu-vertical #menu-vertical-list > li .dropdown-menu-simple .menu-open-2level > .nsmenu-ischild-simple,
#menu-vertical #menu-vertical-list > li .dropdown-menu-simple .menu-open-2level > .nsmenu-full3level,
#menu-vertical #menu-vertical-list > li .dropdown-menu-simple .menu-open-4level > .child_4level_simple {
	animation: vkSubmenuFadeIn var(--vk-t-panel) forwards;
	will-change: opacity, transform;
}

/* Плавний перехід для ховера пунктів меню */
#menu-vertical #menu-vertical-list > li > a,
#menu-vertical #menu-vertical-list .nsmenu-haschild > li > a {
	transition: background-color var(--vk-t), color var(--vk-t);
}

/* Плавна анімація фону підтемнення (ch-bg) */
@keyframes vkBackdropFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.6;
	}
}

@keyframes vkBackdropFadeOut {
	from {
		opacity: 0.6;
	}
	to {
		opacity: 0;
	}
}

.ch-bg.active,
.ch-bg-mob.active,
.ch-bg-search.active {
	display: block;
	animation: vkBackdropFadeIn var(--vk-t-panel) forwards;
}

.ch-bg.is-closing,
.ch-bg-mob.is-closing,
.ch-bg-search.is-closing {
	display: block;
	animation: vkBackdropFadeOut var(--vk-t) forwards;
}

.modal-header { border-bottom: 1px solid var(--vk-border); }
.modal-footer { border-top: 1px solid var(--vk-border); }
.modal-backdrop.in { opacity: 1; background: var(--vk-overlay); }

/* ========================================================================
   8. СЕКЦІЇ ГОЛОВНОЇ (ТЗ §4.2.2, §4.5, §4.6)
   ======================================================================== */

/* --- Банер головної: на телефоні 3:1 виглядає смужкою, тож трохи підвищуємо
   його, підрізаючи по краях. Далі 2.5:1 краї починають з'їдати текст на
   макетах — тоді потрібен окремий мобільний банер, а не CSS. --- */
@media (max-width: 767px) {
	.container-slideshow .item img {
		width: 100%;
		aspect-ratio: 2.5 / 1;
		object-fit: cover;
	}
}

/* --- Смуга переваг: 3 під банером, 4 у блоці довіри --- */
.vk-features { padding: var(--vk-sp-5) 0; }
.vk-features__heading {
	margin: 0 0 var(--vk-sp-5);
	font-size: var(--vk-fs-h2);
	font-weight: var(--vk-fw-bold);
	text-align: center;
}
.vk-features__grid {
	display: grid;
	gap: var(--vk-sp-3);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.vk-features__item {
	display: flex;
	align-items: flex-start;
	gap: var(--vk-sp-3);
	padding: var(--vk-sp-4);
	background: var(--vk-bg);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r);
}
.vk-features__body { min-width: 0; }
.vk-features__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--vk-r-sm);
	background: var(--vk-accent-soft);
	color: var(--vk-accent);
}
.vk-features__title {
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-medium);
	color: var(--vk-text);
}
.vk-features__text {
	padding-top: 2px;
	font-size: var(--vk-fs-sm);
	color: var(--vk-text-2);
}
/* Смуга під банером — щільніша, вона службова, а не змістовна */
.vk-features--strip .vk-features__item { background: var(--vk-bg-2); border-color: transparent; }
.vk-features--trust { background: var(--vk-bg-2); padding: var(--vk-sp-7) 0; }
.vk-features--trust .vk-features__item { background: var(--vk-bg); }

/* «Чому VIKRO» — іконка над текстом, а не збоку. У рядок заголовку лишалось
   ~190px на 1280px, і «Перевірка перед відправкою» ламалась на два рядки в
   одній картці з чотирьох: підпис у ній з'їжджав нижче за сусідні, і ряд
   розсипався. Стовпчиком заголовку дістається вся ширина картки, тож він не
   ламається на жодному брейкпоінті, а іконки, заголовки й підписи стоять на
   спільних лініях. Службова смуга під банером лишається горизонтальною. */
.vk-features--trust .vk-features__item {
	flex-direction: column;
	gap: var(--vk-sp-3);
	padding: var(--vk-sp-5) var(--vk-sp-4);
}

/* Чотири картки: auto-fit на планшеті лишав ряд 3 + одну сирітку внизу.
   Нижче 1200px ділимо навпіл, на телефоні — стовпчиком. */
@media (max-width: 1199px) {
	.vk-features--trust .vk-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
	.vk-features--trust .vk-features__grid { grid-template-columns: minmax(0, 1fr); }
	/* На телефоні картки й так на всю ширину — заголовку вистачає місця поруч
	   з іконкою, тож повертаємо горизонтальний рядок і не женемо 500px скролу. */
	.vk-features--trust .vk-features__item {
		flex-direction: row;
		padding: var(--vk-sp-4);
	}
}

/* --- B2B / дропшипінг-хаб --- */
.vk-b2b {
	padding: var(--vk-sp-7) 0;
	background: var(--vk-text);
	color: var(--vk-on-dark);
}
.vk-b2b__heading {
	margin: 0 0 var(--vk-sp-6);
	font-size: var(--vk-fs-h1);
	font-weight: var(--vk-fw-bold);
	color: var(--vk-on-dark);
	max-width: 22ch;
}
.vk-b2b__grid {
	display: grid;
	gap: var(--vk-sp-6);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}
.vk-b2b__benefit + .vk-b2b__benefit { margin-top: var(--vk-sp-5); }
.vk-b2b__benefit-title {
	position: relative;
	padding-left: var(--vk-sp-4);
	font-size: var(--vk-fs-h3);
	font-weight: var(--vk-fw-bold);
	color: var(--vk-on-dark);
}
.vk-b2b__benefit-title::before {
	content: "";
	position: absolute;
	left: 0; top: .35em;
	width: 4px; height: 1em;
	border-radius: 2px;
	background: var(--vk-accent);
}
.vk-b2b__benefit-text {
	margin: var(--vk-sp-2) 0 0 var(--vk-sp-4);
	color: rgba(255, 255, 255, .78);
	font-size: var(--vk-fs-body);
}

/* --- Форма заявки --- */
.vk-b2b__form-wrap { position: sticky; top: var(--vk-sp-4); }
.vk-lead-form {
	padding: var(--vk-sp-5);
	background: var(--vk-bg);
	border-radius: var(--vk-r-lg);
	box-shadow: var(--vk-shadow-3);
	color: var(--vk-text);
}
.vk-lead-form__title {
	margin-bottom: var(--vk-sp-4);
	font-size: var(--vk-fs-h3);
	font-weight: var(--vk-fw-bold);
}
.vk-field + .vk-field { margin-top: var(--vk-sp-3); }
.vk-field__label {
	display: block;
	margin-bottom: var(--vk-sp-1);
	color: var(--vk-text-2);
}
.vk-field .form-control { width: 100%; height: var(--vk-ctrl-h); padding: 0 var(--vk-sp-3); }
.vk-lead-form__submit { width: 100%; margin-top: var(--vk-sp-4); }
.vk-lead-form__result:not(:empty) {
	margin-top: var(--vk-sp-3);
	padding: var(--vk-sp-3);
	border-radius: var(--vk-r-sm);
	font-size: var(--vk-fs-sm);
}
.vk-lead-form__result.is-success { background: var(--vk-ok-soft);  color: var(--vk-ok); }
.vk-lead-form__result.is-error   { background: var(--vk-err-soft); color: var(--vk-err); }

@media (max-width: 991px) {
	.vk-b2b__grid { grid-template-columns: 1fr; }
	.vk-b2b__form-wrap { position: static; }
	.vk-b2b__heading { max-width: none; }
}

/* --- FAQ та SEO-текст (ТЗ §4.7) --- */
.vk-faq { padding: var(--vk-sp-7) 0; }
.vk-faq__heading {
	margin: 0 0 var(--vk-sp-5);
	font-size: var(--vk-fs-h2);
	font-weight: var(--vk-fw-bold);
}
.vk-faq .vk-accordion { max-width: 860px; }

/* SEO-текст обмежений по висоті і скролиться всередині себе. */
.vk-seotext {
	--vk-sb-w: 12px;
	/* Блок — колонка всередині .row (у теми гатер 10px, .row має -10px), тому
	   його бордер-бокс вилазив на 10px за межі .container з обох боків: фон,
	   і скролбар не збігалися з іншими секціями. Гасимо гатер маргіном;
	   width:auto — бо col-sm-12 має width:100% і маргін би просто виштовхнув
	   блок назовні. На головній ця колонка завжди на всю ширину. */
	width: auto;
	margin: 0 10px;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: var(--vk-sp-7);
	color: var(--vk-text-2);
	max-height: 444px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--vk-text-2) var(--vk-bg-3);
	scrollbar-gutter: stable;
	-webkit-mask-image:
		linear-gradient(to bottom, #000 0, #000 calc(100% - 48px), transparent 100%),
		linear-gradient(#000, #000);
	mask-image:
		linear-gradient(to bottom, #000 0, #000 calc(100% - 48px), transparent 100%),
		linear-gradient(#000, #000);
	-webkit-mask-size: calc(100% - var(--vk-sb-w)) 100%, var(--vk-sb-w) 100%;
	mask-size: calc(100% - var(--vk-sb-w)) 100%, var(--vk-sb-w) 100%;
	-webkit-mask-position: left top, right top;
	mask-position: left top, right top;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
/* Chrome/Safari: scrollbar-width там теж працює, але без кольору доріжки */
.vk-seotext::-webkit-scrollbar { width: 8px; }
.vk-seotext::-webkit-scrollbar-track {
	background: var(--vk-bg-3);
	border-radius: 4px;
}
.vk-seotext::-webkit-scrollbar-thumb {
	background: var(--vk-text-2);
	border-radius: 4px;
}
/* На телефоні 420px — це майже весь екран, тож блок нижчий */
@media (max-width: 767px) {
	.vk-seotext { max-height: 324px; }
}
/* Повітря всередині SEO-тексту: контент приходить з модуля як сира HTML,
   тож ритм задаємо тут, а не в редакторі. */
.vk-seotext h2,
.vk-seotext h3,
.vk-seotext h4 { margin-top: var(--vk-sp-5); }
.vk-seotext p { margin-bottom: var(--vk-sp-3); }
.vk-seotext__lead, .vk-seotext__rest { max-width: 860px; }
.vk-seotext__rest { padding-top: var(--vk-sp-3); }
.vk-seotext__more > summary {
	display: inline-block;
	margin-top: var(--vk-sp-3);
	cursor: pointer;
	list-style: none;
	color: var(--vk-accent);
	font-weight: var(--vk-fw-medium);
}
.vk-seotext__more > summary::-webkit-details-marker { display: none; }
.vk-seotext__more > summary:hover { color: var(--vk-accent-hover); }
/* Підпис кнопки міняється станом самого <details> — без JS (ТЗ §4.7.2) */
.vk-seotext__more .vk-seotext__hide,
.vk-seotext__more[open] .vk-seotext__show { display: none; }
.vk-seotext__more[open] .vk-seotext__hide { display: inline; }

/* ========================================================================
   9. УТИЛІТИ
   ======================================================================== */
.vk-bg-2   { background: var(--vk-bg-2); }
.vk-muted  { color: var(--vk-text-2); }
.vk-stack  { display: flex; flex-direction: column; gap: var(--vk-sp-3); }
.vk-section{ padding: var(--vk-sp-7) 0; }

/* Жодного горизонтального скролу (ТЗ §6).
   stylesheet.css:1-3 задає html{width:100vw}. 100vw рахує ширину РАЗОМ зі
   смугою прокрутки, тому на будь-якій сторінці з вертикальним скролом
   документ ширший за видиму область рівно на ширину смуги (~15px) —
   і з'являється горизонтальний скрол. Лікуємо причину, а не симптом:
   body{overflow-x:hidden} у темі лише ховає наслідок. */
html { width: 100%; }

/* .footer-ribbon має декоративний skewX(-15deg). Перекіс розширює
   bounding box на height*tan(15°) (~11px), і стрічка вилазить за контейнер
   на вузьких екранах. Обрізаємо по батьківському блоку, але даємо йому
   відступ на величину перекосу (~9px з боку при двох рядках), щоб скошені кути лишалися
   цілими, а не різалися по прямій. */
.footer-ribbon-box { overflow: hidden; padding: 0 10px; }
/* Тема фіксує height:42px — на мобільному двострочний текст вилазив за фон. */
.footer-ribbon { height: auto; min-height: 42px; }
/* Скруглені лише лівий верхній і правий нижній кути (замовник 2026-08-28). */
.footer-ribbon { border-radius: 8px 0 8px 0; }

img, svg, video { max-width: 100%; height: auto; }
table { max-width: 100%; }

@media (max-width: 767px) {
	:root {
		--vk-fs-h1: 24px;
		--vk-fs-h2: 20px;
		--vk-fs-h3: 17px;
		--vk-fs-price: 17px;
		--vk-sp-7: 32px;
	}
	/* Мінімальна зона натискання 44×44 (ТЗ §6) */
	.vk-tap,
	.mob-fix-panel a,
	.mob-fix-panel button:not(.mobm-close-menu) {
		min-width: 44px;
		min-height: 44px;
	}

	.mobm-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		padding: 10px 15px;
		border-bottom: 1px solid var(--vk-border, #f0f0f0);
		position: relative;
	}
	.mobm-top:after {
		display: none !important;
	}
	.mobm-top .mobm-title {
		font-size: 17px;
		font-weight: 700;
		color: var(--vk-text, #111);
		padding-left: 4px;
	}
	.mobm-top .mobm-close-menu {
		position: absolute !important;
		right: 12px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
		max-width: 34px !important;
		max-height: 34px !important;
		border: 1px solid var(--vk-border-strong, #e5e7eb) !important;
		border-radius: 8px !important;
		background-color: var(--vk-bg-2, #f9fafb) !important;
		background-image: url("../image/sprite.svg#icon-close") !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		background-size: 11px !important;
		cursor: pointer !important;
		outline: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	/* Тап-ціль вище підняла кнопки пошуку в фікс-панелі до 44px, а поле
	   лишалось 40px (.header-search .form-control) — кнопки стирчали за
	   межі поля. Рівняємо поле під кнопки, не навпаки. */
	.mob-fix-panel .header-search .form-control {
		height: 44px;
	}
	/* Той самий 44px роздув хрестик кошика (він теж усередині .mob-fix-panel):
	   тема ставить йому top:13px під розмір 25px, тож кнопка звисала під
	   шапку й налазила на роздільник заголовка. Центруємо по висоті шапки
	   й відсуваємо роздільник, замість того щоб різати тап-ціль. */
	.header-cart-top {
		padding-right: 72px;
	}
	.header-cart-close {
		/* px, не 50%: позиціонується від .header-cart-fix-right (шапка static),
		   тож відсоток відлічувався б від висоти всієї шторки. (54-44)/2 */
		top: 5px;
		right: 12px;
	}
	/* «Переглянути всі відгуки» тема кладе position:absolute поверх
	   заголовка модуля — на десктопі місця вистачає, на мобільному кнопка
	   лягала просто на текст. Повертаємо в потік окремим рядком. */
	.container-module .title-module {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--vk-sp-2) var(--vk-sp-3);
	}
	.container-module .title-module .see-all-reviews {
		position: static;
		white-space: normal;
		height: auto;
	}
}

/* --- Підписка у підвалі (ТЗ §4.8, колонка 4) --- */
.vk-subscribe {
	padding: var(--vk-sp-5) 0;
	background: var(--vk-bg-2);
	border-top: 1px solid var(--vk-border);
}
.vk-subscribe__form {
	display: grid;
	gap: var(--vk-sp-3) var(--vk-sp-5);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	padding: 0;
	background: none;
	box-shadow: none;
}
.vk-subscribe__title {
	font-size: var(--vk-fs-h3);
	font-weight: var(--vk-fw-bold);
}
.vk-subscribe__note {
	margin-top: var(--vk-sp-1);
	font-size: var(--vk-fs-sm);
	color: var(--vk-text-2);
}
.vk-subscribe__controls { display: flex; gap: var(--vk-sp-2); align-items: flex-start; }
.vk-subscribe__controls .vk-field { flex: 1; margin: 0; }
.vk-subscribe__controls .chm-btn { flex: 0 0 auto; }
.vk-subscribe__consent {
	grid-column: 1 / -1;
	display: flex;
	gap: var(--vk-sp-2);
	align-items: flex-start;
	margin: 0;
	font-size: var(--vk-fs-cap);
	font-weight: var(--vk-fw-normal);
	color: var(--vk-text-2);
}
.vk-subscribe__consent input { margin-top: 2px; }
.vk-subscribe .vk-lead-form__result { grid-column: 1 / -1; }

@media (max-width: 767px) {
	.vk-subscribe__form { grid-template-columns: 1fr; }
	.vk-subscribe__controls { flex-direction: column; }
	.vk-subscribe__controls .chm-btn { width: 100%; }
}

/* --- Сітка категорій (ТЗ §4.3): 4×2 десктоп, 2×4 мобільний --- */
.vk-cats { padding: var(--vk-sp-5) 0; }
.vk-cats__heading {
	margin: 0 0 var(--vk-sp-4);
	font-size: var(--vk-fs-h2);
	font-weight: var(--vk-fw-bold);
}
.vk-cats__grid {
	display: grid;
	gap: var(--vk-sp-3);
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* Плитка як у референсі: велике фото зверху, назва капсом по центру під ним */
.vk-cats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vk-sp-2);
	padding: var(--vk-sp-3);
	background: var(--vk-bg);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r);
	color: var(--vk-text);
	text-align: center;
	transition: border-color var(--vk-t), box-shadow var(--vk-t);
}
.vk-cats__item:hover {
	color: var(--vk-text);
	border-color: var(--vk-accent);
	box-shadow: var(--vk-shadow-2);
}
.vk-cats__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 160px;
	background: var(--vk-bg);
	overflow: hidden;
}
/* contain на білому: фото товару виглядає «іконкою», не обрізається
   і не спотворюється при неквадратному співвідношенні (ТЗ §4.3) */
.vk-cats__media img { width: 100%; height: 100%; object-fit: contain; }
.vk-cats__initial {
	font-size: 40px;
	font-weight: var(--vk-fw-bold);
	color: var(--vk-accent);
	line-height: 1;
}
.vk-cats__name {
	font-size: var(--vk-fs-sm);
	font-weight: var(--vk-fw-bold);
	text-transform: uppercase;
	line-height: 1.3;
	/* anywhere розриває і суцільне довге слово («FM-модулятори») */
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Згорнутий стан: максимум два ряди; пороги = 2 × кількість колонок.
   Медіа-правила нижче лише звужують видиме (n+9 ⊃ n+13 ⊃ …). */
.vk-cats__grid.is-collapsed .vk-cats__item:nth-child(n+13) { display: none; }
/* Кнопка — штатна chm-btn (.box-showmore) з chameleon.css */
.vk-cats .box-showmore { margin-top: var(--vk-sp-3); }
/* .chm-btn задає display:inline-block і тим самим глушить UA-правило
   [hidden]{display:none} — повертаємо атрибуту hidden його силу */
#vk-cats-more[hidden] { display: none !important; }

@media (max-width: 991px) {
	.vk-cats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vk-cats__grid.is-collapsed .vk-cats__item:nth-child(n+9) { display: none; }
}
@media (max-width: 767px) {
	.vk-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vk-sp-2); }
	.vk-cats__grid.is-collapsed .vk-cats__item:nth-child(n+5) { display: none; }
	.vk-cats__media { max-width: 120px; }
	.vk-cats__initial { font-size: 28px; }
}

/* --- Товарна витрина з вкладками (ТЗ §4.4) --- */
.vk-tabs { padding: var(--vk-sp-6) 0; }
.vk-tabs__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vk-sp-2);
	margin-bottom: var(--vk-sp-4);
	border-bottom: 1px solid var(--vk-border);
}
.vk-tabs__tab {
	padding: var(--vk-sp-3) var(--vk-sp-4);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--vk-text-2);
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-medium);
	cursor: pointer;
	transition: color var(--vk-t), border-color var(--vk-t);
}
.vk-tabs__tab:hover { color: var(--vk-text); }
.vk-tabs__tab.is-active {
	color: var(--vk-accent);
	border-bottom-color: var(--vk-accent);
}
.vk-tabs__panel[hidden] { display: none; }

/* ==========================================================================
   Оформлення замовлення (simplecheckout) + сторінка кошика

   simple.css під'єднується ПІСЛЯ vikro.css, тому селектори тримаємо на
   id-специфічності (#simplecheckout_form_0) — це дешевше за !important
   і не ламає подальші перевизначення.

   Мета — один регістр із карткою кошика: тихий степер, привид-кошик на
   видалення, ціна праворуч, підсумок як єдиний акцент.
   ========================================================================== */

/* --- Блоки-секції --- */
#simplecheckout_form_0 .simplecheckout-block {
	background: var(--vk-bg);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r);
	box-shadow: var(--vk-shadow-1);
	margin-bottom: var(--vk-sp-5);
	/* Без overflow:hidden — інакше блок обрізає автопідказки міста й відділення,
	   що випадають за його межі. Скруглення тут нема чого кліпати: у заголовка
	   немає заливки, лише волосяна лінія. */
}
/* Тема заливала заголовки суцільним сірим — на сторінці з 7 блоками це сім
   важких смуг. Лишаємо волосяну лінію: розділяє так само, а ваги не додає. */
#simplecheckout_form_0 .checkout-heading,
#simplecheckout_form_0 .panel-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vk-sp-3);
	padding: var(--vk-sp-4) var(--vk-sp-5);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--vk-border);
	border-radius: 0;
	color: var(--vk-text);
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-bold);
	line-height: var(--vk-lh-head);
}
#simplecheckout_form_0 .checkout-heading-button a {
	font-size: var(--vk-fs-sm);
	font-weight: var(--vk-fw-medium);
	color: var(--vk-link);
}
#simplecheckout_form_0 .checkout-heading-button a:hover { color: var(--vk-link-hover); }
#simplecheckout_form_0 .simplecheckout-block-content {
	padding: var(--vk-sp-5);
}

/* --- Підсумок замовлення: рядок-картка (шаблон теми, не таблиця) --- */
#simplecheckout_form_0 .vk-co-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}
#simplecheckout_form_0 .vk-co-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto 172px;
	align-items: center;
	gap: var(--vk-sp-4);
	padding: var(--vk-sp-4) var(--vk-sp-5);
	border-bottom: 1px solid var(--vk-border);
}
#simplecheckout_form_0 .vk-co-item:last-child { border-bottom: 0; }
#simplecheckout_form_0 .vk-co-item__recurring {
	grid-column: 1 / -1;
	margin: 0 0 var(--vk-sp-2);
	color: var(--vk-text-2);
	font-size: var(--vk-fs-sm);
}
#simplecheckout_form_0 .vk-co-item__media { display: block; }
#simplecheckout_form_0 .vk-co-item__media img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: var(--vk-r-sm);
}
#simplecheckout_form_0 .vk-co-item__name {
	display: block;
	color: var(--vk-link);
	font-size: var(--vk-fs-body);
	font-weight: var(--vk-fw-medium);
	line-height: var(--vk-lh-body);
}
#simplecheckout_form_0 a.vk-co-item__name:hover { color: var(--vk-link-hover); }
#simplecheckout_form_0 .vk-co-item__model,
#simplecheckout_form_0 .vk-co-item__options {
	margin-top: var(--vk-sp-1);
	color: var(--vk-text-3);
	font-size: var(--vk-fs-sm);
	line-height: var(--vk-lh-body);
}
#simplecheckout_form_0 .vk-co-item__warning {
	margin-top: var(--vk-sp-1);
	color: var(--vk-warn);
	font-size: var(--vk-fs-sm);
}

/* Степер і кошик — ті самі класи, що на сторінці кошика (.ch-cart-quantity /
   .btn-remove), тож вигляд успадковується з теми. Тут лише розкладка. */
#simplecheckout_form_0 .vk-co-item__controls {
	display: flex;
	align-items: center;
	gap: var(--vk-sp-3);
}
#simplecheckout_form_0 .vk-co-item__controls .ch-cart-quantity {
	justify-content: flex-start;
	align-items: center;
}
/* Загальне правило полів форми нижче ставить input'ам min-height:44px і власні
   відступи — на степер воно не розраховане й розривало групу (34/44/34).
   Повертаємо розміри теми. */
#simplecheckout_form_0 .ch-cart-quantity .form-control {
	min-height: 34px;
	height: 34px;
	padding: 0;
	border-radius: 0;
	border-width: 1px 0;
}
/* Видалення тримаємо на відстані від «+»: промах по сусідній кнопці інакше
   стирає позицію замість того, щоб змінити кількість. */
#simplecheckout_form_0 .vk-co-item__controls .btn-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-left: var(--vk-sp-2);
	padding: 0;
	background: var(--vk-bg-2);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r-sm);
	color: var(--vk-text-2);
	font-size: 15px;
	transition: background var(--vk-t), color var(--vk-t), border-color var(--vk-t);
}
#simplecheckout_form_0 .vk-co-item__controls .btn-remove:hover,
#simplecheckout_form_0 .vk-co-item__controls .btn-remove:focus-visible {
	background: var(--vk-err-soft);
	border-color: var(--vk-err);
	color: var(--vk-err);
}
#simplecheckout_form_0 .vk-co-item__controls .btn-remove:focus-visible,
#simplecheckout_form_0 .vk-co-item__controls .btn:focus-visible {
	box-shadow: var(--vk-focus-ring);
	outline: none;
}

#simplecheckout_form_0 .vk-co-item__money { text-align: right; }
#simplecheckout_form_0 .vk-co-item__unit {
	color: var(--vk-text-2);
	font-size: var(--vk-fs-sm);
	white-space: nowrap;
}
#simplecheckout_form_0 .vk-co-item__unit s { color: var(--vk-price-old); }
#simplecheckout_form_0 .vk-co-item__total {
	margin-top: var(--vk-sp-1);
	color: var(--vk-price);
	white-space: nowrap;
}
#simplecheckout_form_0 .vk-co-item__total span {
	color: var(--vk-text-2);
	font-size: var(--vk-fs-sm);
}
#simplecheckout_form_0 .vk-co-item__total b {
	font-size: var(--vk-fs-price);
	font-weight: var(--vk-fw-bold);
}
#simplecheckout_form_0 .vk-co-clear {
	color: var(--vk-text-3);
	font-size: var(--vk-fs-sm);
	font-weight: var(--vk-fw-medium);
}
#simplecheckout_form_0 .vk-co-clear:hover { color: var(--vk-err); }

/* «Всього» — єдина крапка ваги в блоці. */
#simplecheckout_form_0 .vk-co-totals {
	padding: var(--vk-sp-4) var(--vk-sp-5);
	border-top: 1px solid var(--vk-border);
}
#simplecheckout_form_0 .simplecheckout-cart-total {
	display: flex;
	border: 0;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--vk-sp-4);
	padding: var(--vk-sp-1) 0;
	color: var(--vk-text-2);
	font-size: var(--vk-fs-body);
}
#simplecheckout_form_0 .simplecheckout-cart-total:after { content: none; }
#simplecheckout_form_0 .simplecheckout-cart-total b { font-weight: var(--vk-fw-medium); }
#simplecheckout_form_0 .simplecheckout-cart-total-value { min-width: 104px; text-align: right; }
#simplecheckout_form_0 #total_total {
	margin-top: var(--vk-sp-2);
	color: var(--vk-price);
	font-size: var(--vk-fs-h3);
}
#simplecheckout_form_0 #total_total b,
#simplecheckout_form_0 #total_total .simplecheckout-cart-total-value { font-weight: var(--vk-fw-bold); }

/* Порожні блоки (напр. форма платіжки, поки метод не вибрано) інакше
   малюють смужку в 2px висотою з власною рамкою. */
#simplecheckout_form_0 .simplecheckout-block:empty,
#simplecheckout_form_0 #simplecheckout_payment_form:not(:has(*)) { display: none; }

/* --- Поля форм --- */
/* Праворуч вирівняні підписи змушують око стрибати між двома краями.
   Ліворуч — одна вертикаль на всю форму. */
#simplecheckout_form_0 .form-horizontal .control-label {
	text-align: left;
	padding-top: 11px;
	color: var(--vk-text-2);
	font-size: var(--vk-fs-sm);
	font-weight: var(--vk-fw-medium);
}
/* Зірочка перед словом читається як частина підпису; ставимо після. */
#simplecheckout_form_0 .form-group.required .control-label:before { content: none; }
#simplecheckout_form_0 .form-group.required > .control-label:after {
	content: '*';
	margin-left: 2px;
	color: var(--vk-err);
}
#simplecheckout_form_0 .form-group { margin-bottom: var(--vk-sp-4); }
#simplecheckout_form_0 input.form-control,
#simplecheckout_form_0 select.form-control,
#simplecheckout_form_0 textarea.form-control {
	min-height: 44px;
	padding: var(--vk-sp-3) var(--vk-sp-4);
	background: var(--vk-bg);
	border: 1px solid var(--vk-border-strong);
	border-radius: var(--vk-r-sm);
	box-shadow: none;
	color: var(--vk-text);
	font-size: var(--vk-fs-body);
	transition: border-color var(--vk-t), box-shadow var(--vk-t);
}
#simplecheckout_form_0 textarea.form-control { min-height: 96px; resize: vertical; }
#simplecheckout_form_0 .form-control::placeholder { color: var(--vk-text-3); }
#simplecheckout_form_0 .form-control:focus {
	border-color: var(--vk-accent);
	box-shadow: var(--vk-focus-ring);
	outline: none;
}
#simplecheckout_form_0 .has-error .form-control,
#simplecheckout_form_0 .form-control.error { border-color: var(--vk-err); }
#simplecheckout_form_0 .simplecheckout-error-text {
	color: var(--vk-err);
	font-size: var(--vk-fs-sm);
}
#simplecheckout_form_0 .simplecheckout-tooltip {
	margin-top: var(--vk-sp-2);
	color: var(--vk-text-3);
	font-size: var(--vk-fs-sm);
	line-height: var(--vk-lh-body);
}

/* --- Перемикачі способів доставки й оплати --- */
#simplecheckout_form_0 .simplecheckout-block-content > p > b {
	display: block;
	margin: var(--vk-sp-5) 0 var(--vk-sp-2);
	color: var(--vk-text-3);
	font-size: var(--vk-fs-cap);
	font-weight: var(--vk-fw-medium);
	text-transform: uppercase;
	letter-spacing: .04em;
}
#simplecheckout_form_0 .simplecheckout-block-content > p:first-child > b { margin-top: 0; }
#simplecheckout_form_0 .radio,
#simplecheckout_form_0 .checkbox { margin: 0; }
#simplecheckout_form_0 .radio > label,
#simplecheckout_form_0 .checkbox > label {
	/* simple.css: `.simplecheckout label { display: inline-block !important }` */
	display: flex !important;
	align-items: center;
	gap: var(--vk-sp-3);
	min-height: 44px;
	padding: var(--vk-sp-2) var(--vk-sp-3);
	border-radius: var(--vk-r-sm);
	color: var(--vk-text);
	font-size: var(--vk-fs-body);
	font-weight: var(--vk-fw-normal);
	cursor: pointer;
	transition: background var(--vk-t);
}
#simplecheckout_form_0 .radio > label:hover,
#simplecheckout_form_0 .checkbox > label:hover { background: var(--vk-bg-2); }
#simplecheckout_form_0 .radio input[type="radio"],
#simplecheckout_form_0 .checkbox input[type="checkbox"] {
	position: static;
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--vk-accent);
}
#simplecheckout_form_0 .radio:has(input:checked) > label,
#simplecheckout_form_0 .checkbox:has(input:checked) > label {
	background: var(--vk-accent-soft);
	font-weight: var(--vk-fw-medium);
}
#simplecheckout_form_0 .radio > label:focus-within,
#simplecheckout_form_0 .checkbox > label:focus-within { box-shadow: var(--vk-focus-ring); }

/* --- Кнопка підтвердження --- */
#simplecheckout_bottom { margin-top: var(--vk-sp-5); }
#simplecheckout_button_confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--vk-sp-6);
	background: var(--vk-accent);
	border: 0;
	border-radius: var(--vk-r-sm);
	color: var(--vk-on-accent);
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-bold);
	transition: background var(--vk-t);
}
#simplecheckout_button_confirm:hover,
#simplecheckout_button_confirm:focus {
	background: var(--vk-accent-hover);
	color: var(--vk-on-accent);
}
#simplecheckout_button_confirm:focus-visible { box-shadow: var(--vk-focus-ring); outline: none; }

/* --- Вузькі екрани --- */
@media (max-width: 767px) {
	#simplecheckout_form_0 .simplecheckout-block-content,
	#simplecheckout_form_0 .checkout-heading,
	#simplecheckout_form_0 .panel-heading,
	#simplecheckout_form_0 .vk-co-totals { padding: var(--vk-sp-4); }

	/* Рядок ламається на два поверхи: товар зверху, керування й суми знизу. */
	#simplecheckout_form_0 .vk-co-item {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--vk-sp-3) var(--vk-sp-4);
		padding: var(--vk-sp-4);
	}
	#simplecheckout_form_0 .vk-co-item__media { flex: 0 0 64px; }
	/* Базис на решту першого рядка — так керування й суми гарантовано
	   переносяться на другий поверх, а не тиснуть назву в колонку. */
	#simplecheckout_form_0 .vk-co-item__body {
		flex: 0 1 calc(100% - 64px - var(--vk-sp-4));
		min-width: 0;
	}
	#simplecheckout_form_0 .vk-co-item__controls { order: 3; }
	#simplecheckout_form_0 .vk-co-item__money { order: 4; margin-left: auto; }
	#simplecheckout_form_0 .vk-co-item__unit { display: none; }

	#simplecheckout_form_0 .form-horizontal .control-label { padding-top: 0; margin-bottom: var(--vk-sp-1); }
	#simplecheckout_button_confirm { width: 100%; }
	#simplecheckout_form_0 .simplecheckout-button-right { text-align: center; }
}

/* --- Сторінка кошика: вузькі екрани --- */
/* Тема до 620px виносить кнопку видалення в абсолют у правий верхній кут рядка —
   вона опиняється біля назви товару, за півекрана від степера, з яким її
   натискають однією рукою. Ставимо поруч, як у підсумку на чекауті. */
@media (max-width: 619px) {
	.cart-item .cart-item-price-quantity .btn-remove {
		position: static;
		margin-left: var(--vk-sp-3);
	}
	.cart-item .cart-item-price-quantity > .dflex.justify-content-end {
		align-items: center;
		justify-content: flex-start;
	}
}

/* Підказки адреси спливають поверх сусідніх карток — вирівнюємо їх по тій
   самій мові: та сама рамка, скруглення й тінь, що й у блоків. */
#simplecheckout_form_0 ul.dropdown-address {
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r-sm);
	box-shadow: var(--vk-shadow-2);
}
#simplecheckout_form_0 ul.dropdown-address > li {
	padding: var(--vk-sp-2) var(--vk-sp-4);
	color: var(--vk-text);
	cursor: pointer;
}
#simplecheckout_form_0 ul.dropdown-address > li:hover,
#simplecheckout_form_0 ul.dropdown-address > li.active {
	background: var(--vk-accent-soft);
	color: var(--vk-accent);
}

/* --- Вікно входу на чекауті ---
   Плагін сам позиціонує #simple_login (inline top/left/height), тому ширину й
   висоту віддаємо CSS до заміру, а решту — вигляд картки, як у вікна авторизації
   магазину. Селектори на id: власні стилі плагіна підключаються пізніше. */
#simple_login_layer { background: var(--vk-overlay); }
/* simple.css підключається пізніше й має ту саму вагу (#simple_login),
   тому обгортку доводиться гасити !important — картку малює вміст. */
#simple_login {
	width: min(420px, calc(100vw - 2 * var(--vk-sp-4))) !important;
	height: auto !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
#simple_login:after { content: none; }
#simplecheckout_login { border: 0; }
#simplecheckout_login .modal-content {
	padding: 0;
	background: var(--vk-bg);
	border: 0;
	border-radius: var(--vk-r);
	box-shadow: var(--vk-shadow-3);
	overflow: hidden;
}
#simplecheckout_login .modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vk-sp-4);
	padding: var(--vk-sp-4) var(--vk-sp-5);
	border-bottom: 1px solid var(--vk-border);
}
#simplecheckout_login .modal-title {
	color: var(--vk-text);
	font-size: var(--vk-fs-h3);
	font-weight: var(--vk-fw-bold);
	line-height: var(--vk-lh-head);
}
#simplecheckout_login .close-modal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r-sm);
	color: var(--vk-text-2);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--vk-t), color var(--vk-t), border-color var(--vk-t);
}
#simplecheckout_login .close-modal:before { content: '\00d7'; }
#simplecheckout_login .close-modal:hover,
#simplecheckout_login .close-modal:focus-visible {
	background: var(--vk-bg-2);
	border-color: var(--vk-border-strong);
	color: var(--vk-text);
}
#simplecheckout_login .modal-body { padding: var(--vk-sp-5); }
#simplecheckout_login fieldset { margin: 0; padding: 0; border: 0; }
#simplecheckout_login .form-group { margin: 0 0 var(--vk-sp-4); }
#simplecheckout_login .form-group:last-child { margin-bottom: 0; }
#simplecheckout_login .control-label {
	display: block;
	margin-bottom: var(--vk-sp-1);
	color: var(--vk-text-2);
	font-size: var(--vk-fs-sm);
	font-weight: var(--vk-fw-medium);
}
#simplecheckout_login .form-control {
	width: 100%;
	min-height: 44px;
	padding: var(--vk-sp-3) var(--vk-sp-4);
	background: var(--vk-bg);
	border: 1px solid var(--vk-border-strong);
	border-radius: var(--vk-r-sm);
	box-shadow: none;
	color: var(--vk-text);
	font-size: var(--vk-fs-body);
	transition: border-color var(--vk-t), box-shadow var(--vk-t);
}
#simplecheckout_login .form-control:focus {
	border-color: var(--vk-accent);
	box-shadow: var(--vk-focus-ring);
	outline: none;
}
#simplecheckout_login .forgotten-pass { margin-top: var(--vk-sp-2); }
#simplecheckout_login .forgotten {
	color: var(--vk-link);
	font-size: var(--vk-fs-sm);
}
#simplecheckout_login .forgotten:hover { color: var(--vk-link-hover); }
#simplecheckout_login .simplecheckout-warning-block {
	margin-bottom: var(--vk-sp-4);
	padding: var(--vk-sp-3) var(--vk-sp-4);
	background: var(--vk-err-soft);
	border: 0;
	border-radius: var(--vk-r-sm);
	color: var(--vk-err);
	font-size: var(--vk-fs-sm);
}
#simplecheckout_login .modal-footer {
	padding: 0 var(--vk-sp-5) var(--vk-sp-5);
	border: 0;
	text-align: right;
}
#simplecheckout_login .chm-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--vk-sp-6);
	background: var(--vk-accent);
	border: 0;
	border-radius: var(--vk-r-sm);
	color: var(--vk-on-accent);
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-bold);
	cursor: pointer;
	transition: background var(--vk-t);
}
#simplecheckout_login .chm-btn-primary:hover,
#simplecheckout_login .chm-btn-primary:focus {
	background: var(--vk-accent-hover);
	color: var(--vk-on-accent);
}
#simplecheckout_login .chm-btn-primary:focus-visible { box-shadow: var(--vk-focus-ring); outline: none; }

/* --- Другорядні кнопки (.chm-btn-white / .chm-btn-grey) ---
   Наш акцент вище задано широким селектором `.chm-btn`, тож у пару «Замовити» +
   «Переглянути кошик» потрапляли дві однакові акцентні плями — жодна не веде.
   А колірні схеми теми (theme_scheme/*.css) фарбують ці ж класи по-своєму, аж до
   зеленого. Тому визначаємо другорядний регістр явно й на токенах: тоді вигляд
   не залежить від того, яка схема ввімкнена в налаштуваннях. */
.chm-btn.chm-btn-white,
.chm-btn.chm-btn-grey {
	background: var(--vk-bg);
	border: 1px solid var(--vk-border-strong);
	color: var(--vk-text);
}
.chm-btn.chm-btn-white:hover,
.chm-btn.chm-btn-white:focus,
.chm-btn.chm-btn-grey:hover,
.chm-btn.chm-btn-grey:focus {
	background: var(--vk-bg-2);
	border-color: var(--vk-text-3);
	color: var(--vk-text);
}
.chm-btn.chm-btn-white:focus-visible,
.chm-btn.chm-btn-grey:focus-visible {
	box-shadow: var(--vk-focus-ring);
	outline: none;
}

/* Підсумок у панелі кошика без розкривашки: та сама типографіка, але без
   вигляду та поведінки посилання — розкривати нічого. */
.header-cart-text-info--plain {
	cursor: default;
	color: var(--vk-text);
}

/* ========================================================================
   10. ПОРІВНЯННЯ ТОВАРІВ (product/compare)
   --------------------------------------------------------------------
   Стокова таблиця OpenCart була єдиним екраном поза дизайн-системою.
   Тут вона стає карткою: липкий стовпчик з назвами параметрів + колонки-
   товари, що горизонтально гортаються, коли їх 3-4.
   ======================================================================== */
.vk-compare {
	background: var(--vk-bg);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r-lg);
	box-shadow: var(--vk-shadow-1);
	overflow: hidden;
}

.vk-compare__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.vk-compare__table {
	/* max-content, а не 100%: колонки тримають свою ширину, а зайве
	   віддається горизонтальному скролу замість того, щоб душити текст.
	   border-collapse: separate — інакше рамки липкого стовпчика від'їжджають. */
	width: max-content;
	min-width: 100%;
	/* Глобальний table{max-width:100%} тиснув таблицю до min-content, і задана
	   ширина колонок ігнорувалась — на мобільному вони стискались до ~135px. */
	max-width: none;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
}

.vk-compare__table th,
.vk-compare__table td {
	width: 320px;
	padding: var(--vk-sp-4);
	border-bottom: 1px solid var(--vk-border);
	vertical-align: top;
	text-align: left;
	font-size: var(--vk-fs-body);
	font-weight: var(--vk-fw-normal);
	color: var(--vk-text);
}
.vk-compare__table tbody tr:last-child > * { border-bottom: 0; }

/* --- Липкий стовпчик параметрів --- */
.vk-compare__table .vk-compare__label,
.vk-compare__table .vk-compare__corner {
	position: sticky;
	left: 0;
	z-index: 2;
	/* width:1% + min-width — щоб зайву ширину таблиця віддавала колонкам-товарам,
	   а не стовпчику назв: інакше при двох товарах ліворуч зяяла сіра пляма. */
	width: 1%;
	min-width: 190px;
	background: var(--vk-sticky-bg, var(--vk-bg-2));
	/* Друга тінь — «штора» ліворуч: при інерційній прокрутці липка колонка
	   на субпіксель відстає від краю картки, і в шов було видно контент.
	   Колір беремо зі змінної, щоб смугасті рядки не розсинхронились. */
	box-shadow: 1px 0 0 var(--vk-border), -12px 0 0 var(--vk-sticky-bg, var(--vk-bg-2));
	font-size: var(--vk-fs-sm);
	font-weight: var(--vk-fw-medium);
	color: var(--vk-text-2);
}
.vk-compare__table .vk-compare__corner { z-index: 3; }
.vk-compare__table tbody tr:nth-child(even) > * { background: var(--vk-bg-alt); }
.vk-compare__table tbody tr:nth-child(even) .vk-compare__label {
	--vk-sticky-bg: var(--vk-bg-3);
	background: var(--vk-bg-3);
}

/* --- Колонка-товар у шапці --- */
.vk-compare__table .vk-compare__card {
	position: relative;
	background: var(--vk-bg);
	padding-top: var(--vk-sp-5);
	text-align: center;
	vertical-align: top;
}

.vk-compare__remove {
	position: absolute;
	top: var(--vk-sp-2);
	right: var(--vk-sp-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--vk-r-pill);
	background: var(--vk-bg-2);
	color: var(--vk-text-3);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background var(--vk-t), color var(--vk-t);
}
.vk-compare__remove:hover,
.vk-compare__remove:focus {
	background: var(--vk-err-soft);
	color: var(--vk-err);
}

.vk-compare__thumb {
	display: block;
	height: 150px;
	margin-bottom: var(--vk-sp-3);
}
.vk-compare__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Три рядки фіксовано: назви товарів різної довжини інакше зсувають ціну
   й кнопку кожної колонки на свою висоту, і ряд «Купити» йде сходами. */
.vk-compare__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 4.05em;
	margin-bottom: var(--vk-sp-3);
	color: var(--vk-text);
	font-size: var(--vk-fs-sm);
	font-weight: var(--vk-fw-medium);
	line-height: 1.35;
}
.vk-compare__name:hover { color: var(--vk-accent); }

.vk-compare__price {
	margin-bottom: var(--vk-sp-3);
	color: var(--vk-price);
	font-size: var(--vk-fs-price);
	font-weight: var(--vk-fw-bold);
}
.vk-compare__price .price-old {
	display: block;
	color: var(--vk-price-old);
	font-size: var(--vk-fs-price-2);
	font-weight: var(--vk-fw-normal);
	text-decoration: line-through;
}
.vk-compare__price .price-new { color: var(--vk-price-new); }

.vk-compare__buy { width: 100%; }

/* --- Значення в рядках --- */
.vk-compare__desc {
	color: var(--vk-text-2);
	font-size: var(--vk-fs-sm);
	line-height: 1.5;
}
.vk-compare__stars { color: var(--vk-star); letter-spacing: 1px; }
.vk-compare__reviews {
	display: block;
	margin-top: var(--vk-sp-1);
	color: var(--vk-text-3);
	font-size: var(--vk-fs-cap);
}

/* Заголовок групи характеристик */
.vk-compare__group > * {
	background: var(--vk-bg-3);
	color: var(--vk-text);
	font-size: var(--vk-fs-h4);
	font-weight: var(--vk-fw-bold);
}
.vk-compare__table tbody tr.vk-compare__group:nth-child(even) > * { background: var(--vk-bg-3); }

/* --- Порожній стан --- */
.vk-compare-empty {
	padding: var(--vk-sp-7) var(--vk-sp-4);
	border: 1px dashed var(--vk-border-strong);
	border-radius: var(--vk-r-lg);
	color: var(--vk-text-2);
	text-align: center;
}
.vk-compare-empty p { margin-bottom: var(--vk-sp-5); }

@media (max-width: 767px) {
	.vk-compare__table th,
	.vk-compare__table td {
		width: 260px;
		padding: var(--vk-sp-3);
	}
	.vk-compare__table .vk-compare__label,
	.vk-compare__table .vk-compare__corner { min-width: 130px; }
	.vk-compare__thumb { height: 110px; }
}

/* ========================================================================
   Поп-ап «Уточнити наявність» (картка товару без залишку, 2026-08-14)
   ======================================================================== */
.vk-avail {
	width: min(420px, calc(100vw - 32px));
	padding: var(--vk-sp-4);
	border: 0;
	border-radius: var(--vk-r);
	box-shadow: var(--vk-shadow-3);
	opacity: 0;
	transform: translateY(6px) scale(.985);
	transition: opacity .16s ease, transform .16s ease,
		display .16s allow-discrete, overlay .16s allow-discrete;
}
.vk-avail[open] {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition-duration: .28s;
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
@starting-style {
	.vk-avail[open] { opacity: 0; transform: translateY(8px) scale(.98); }
}
.vk-avail::backdrop {
	background: rgba(16, 20, 26, 0);
	transition: background .16s ease, display .16s allow-discrete, overlay .16s allow-discrete;
}
.vk-avail[open]::backdrop {
	background: rgba(16, 20, 26, .5);
	transition-duration: .28s;
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
@starting-style {
	.vk-avail[open]::backdrop { background: rgba(16, 20, 26, 0); }
}
.vk-avail .vk-lead-form { position: relative; box-shadow: none; }
.vk-avail__close {
	position: absolute;
	top: calc(-1 * var(--vk-sp-2));
	right: calc(-1 * var(--vk-sp-2));
	width: 36px; height: 36px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var(--vk-text-2);
	cursor: pointer;
}
.vk-avail__close:hover { color: var(--vk-text); }
.vk-avail__product {
	margin-bottom: var(--vk-sp-3);
	color: var(--vk-text-2);
	font-size: var(--vk-fs-sm);
}
.vk-avail .vk-lead-form__submit { width: 100%; }

/* Кнопка «Уточнити наявність» у картці — спокійна другорядна, на місці «Купити» */
.product-thumb .vk-avail-btn {
	width: 100%;
	padding: 10px 12px;
	background: var(--vk-bg-2);
	border: 1px solid var(--vk-border);
	border-radius: var(--vk-r);
	color: var(--vk-text);
	font-size: var(--vk-fs-sm);
	font-weight: var(--vk-fw-medium);
	white-space: normal;
	transition: border-color var(--vk-t), background var(--vk-t);
}
.product-thumb .vk-avail-btn:hover {
	border-color: var(--vk-accent);
	color: var(--vk-accent);
}

/* Опис товару з KeyCRM: зберігаємо авторські абзаци та списки. */
#tab-description {
	white-space: pre-line;
	line-height: 1.65;
}
#tab-description .ch-h2 { white-space: normal; }

/* Футер: п'ять колонок в один ряд на десктопі (4 блоки посилань + контакти). */
@media (min-width: 992px) {
	footer .two-c-pc { column-count: 1; }
}
@media (max-width: 767px) {
	/* Контакти на мобільному завжди розгорнуті — акордеонний заголовок тут зайвий. */
	footer .footer-contact .title-f { display: none; }
}
/* Підказка «Гурт: ціна після входу» на сторінці товару — окремим рядком
   після статусу наявності (.info-product-stock має order:4). */
.info-product .vk-price-opt { order: 5; margin-top: var(--vk-sp-2); }
/* Тост про нестачу. Свої стилі, а не .alert/.option-danger теми: ті класи
   зносять гуртом і тема, і OpenCart (getRecurringDescription при зміні
   кількості). Вигляд — як у .option-danger; поверх усіх тостів теми
   (.add_product_alert має z-index 999999999). */
.vk-stock-alert {
	position: fixed;
	right: 15px;
	top: 15px;
	width: 330px;
	z-index: 1000000000;
	display: flex;
	align-items: center;
	padding: 25px 50px 25px 25px;
	color: #000;
	background: #fff;
	border-radius: 12px;
	box-shadow: 4px 5px 12px rgba(0,0,0,0.067);
	animation: slider_add_product 0.5s linear;
}
.vk-stock-alert .text-modal-block { margin-left: 20px; }
.vk-stock-alert .close {
	position: absolute;
	right: 17px;
	top: 17px;
	width: 26px;
	height: 26px;
	opacity: 1;
	font-size: 0;
	background: var(--vk-bg) url("../image/sprite.svg#icon-close") no-repeat 50% 50% / 10px auto;
	border: 1px solid var(--vk-border);
	border-radius: 6px;
}