/*
 * Новий бренд: токени з Figma (rUFoXFBAjR5bVM6VlKErpS, кіт 1:51).
 * Старі сторінки ще на захардкоджених кольорах — компоненти переводимо на токени по черзі.
 * Іконки: <svg class="vv-icon"><use href="/assets/brand/icons.svg?v=2026_10_01#vv-cart"></use></svg>, колір — через color.
 * ?v= обов'язковий: Cloudflare на проді кешує статику на рік — змінив спрайт, підніми версію в усіх шаблонах.
 */

:root {
	--vv-brand: #E7F127;
	/* наведення на лаймові кнопки — трохи темніший лайм (дизайнер, 2026-10-01) */
	--vv-brand-hover: #D6E01F;
	--vv-black: #000;
	--vv-white: #fff;
	--vv-bg: #F7F8F9;
	--vv-muted: #898E86;
	--vv-surface: #EDEEEB;
	--vv-surface-hover: #DCDED7;
	--vv-star: #FFD12E;
	--vv-accent: #7EB6FF;
	/* #0BF50A — токен зі змінних кіту; у макеті 9:xxxx кнопка «Ціни тижня» вже #75F300, тож поки ніде не вживається */
	--vv-green: #0BF50A;
	/* стікер «Шалена знижка» і рамка картки «Ціна тижня» */
	--vv-green-light: #75F300;
	/* стікер «ТОП»; #9747FF зі змінних Figma — колір рамок наборів компонентів, у дизайні його нема */
	--vv-violet: #BA76FF;
	/* знижка: стікер «-10%» і нова ціна */
	--vv-red: #F64C53;
}

.vv-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	vertical-align: middle;
}

/* ---------- Шапка (Figma 1:2654 — десктоп, 1:1576 — мобілка) ---------- */

:root {
	--vv-header-h: 62px;
}

header {
	border-bottom: 0;
}

header .header-content {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	grid-template-areas: "brand catalog search icons";
	align-items: center;
	gap: 20px;
	height: 100%;
	/* у макеті ряд 40px стоїть на 13px від верху й 9px від низу */
	padding-top: 4px;
}

header .header-row {
	height: auto;
}

header .header-brand {
	grid-area: brand;
	gap: 12px;
}

header .header-catalog-row {
	grid-area: catalog;
}

header .header-search {
	grid-area: search;
}

header .icon-block {
	grid-area: icons;
	gap: 20px;
	padding: 0;
}

header .header-burger {
	display: flex;
}

header .header-logo {
	height: auto;
	padding: 0;
	overflow: visible;
}

/* лого в макеті 9:7818 — група 120.66×39.76 (на мобілці знак лишився 23.24×31.19, див. нижче) */
header .header-logo .header-logo-link {
	display: flex;
	align-items: center;
	gap: 6.04px;
	height: auto;
}

header .header-logo .header-logo-mark {
	width: 26.13px;
	height: 35.07px;
}

header .header-logo .header-logo-text {
	width: 88.49px;
	height: 39.76px;
}

header .header-catalog-btn-wrapper {
	height: auto;
}

header .header-catalog-btn {
	gap: 4px;
	padding: 8px 12px;
	border-radius: 0;
	font-size: 14px;
	line-height: 1.4;
}

header .header-catalog-block {
	top: calc(100% + 9px);
}

header .header-search-block {
	gap: 8px;
	padding: 8px;
	border-radius: 0;
}

header .header-search .header-search-input {
	height: 24px;
	padding: 0;
	border-radius: 0;
	font-size: 14px;
	line-height: 24px;
}

header .header-search .header-search-input::placeholder {
	color: #D1D3CC;
}

header .header-search-block .header-search-icon {
	height: 24px;
	padding: 0;
}

header .header-search-block #search-back {
	transform: none;
}

header .icon-block .panel-url {
	height: 24px;
}

header .icon-block .all-icon {
	width: 24px;
	height: 24px;
	margin: 0;
}

header .icon-block .all-icon svg {
	width: 24px;
	height: 24px;
}

/* відкрита панель кошика вішає на іконку .iclose (common.js), і стара тема (x001 + stylesheet.css) міняє її на хрестик.
   Хрестик непотрібний: шапка під затемненням, а в панелі свій. id — щоб перебити !important з x001 */
header #cart-url.iclose .all-icon svg {
	visibility: visible !important;
}

header #cart-url.iclose .all-icon::before,
header #cart-url.iclose .all-icon::after {
	visibility: hidden !important;
}

@media (max-width: 1000px) {
	header .header-content {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "brand search icons";
	}

	/* кнопку тут ховає X1, а випадайка каталогу — fixed, тож ряду в сітці не треба */
	header .header-catalog-row {
		grid-area: auto;
		position: absolute;
	}

	header .header-catalog-block {
		top: var(--vv-header-h);
	}
}

@media (max-width: 767px) {
	:root {
		--vv-header-h: 48px;
	}

	header .header-content {
		gap: 12px;
		padding: 0 16px;
	}

	header .header-brand {
		gap: 8px;
	}

	header .header-logo .header-logo-mark {
		width: 23.24px;
		height: 31.19px;
	}

	header .header-logo .header-logo-text {
		display: none;
	}

	/* акаунт і збережені на мобілці — у боковому й нижньому меню */
	header .icon-block > :not(#cart-url) {
		display: none;
	}

	header .header-search-block {
		padding: 4px 8px;
	}

	/* дрібніше за 16px — iOS зумить сторінку на фокусі */
	header .header-search .header-search-input {
		font-size: 16px;
	}
}

/* на мобілці пошук стоїть у шапці, а по фокусу (.open) розгортається на весь екран — це вже стара логіка теми */
@media (max-width: 700px) {
	header .header-search:not(.open) {
		position: static;
		display: flex;
		flex-direction: row;
		width: auto;
		height: auto;
		padding: 0;
		background: none;
	}

	header .header-search:not(.open) .header-search-block {
		display: flex;
	}

	header .header-search:not(.open) #search-back,
	header .header-search:not(.open) .header-search-list {
		display: none;
	}
}

/* ---------- Пошук (Figma 9:11197 поле, 9:11156 фокус, 9:11073 видача; мобілка 9:5966) ---------- */
/* Розмітку видачі малює JS у common/header_search.twig. Старі правила теми — stylesheet.css 817-1132.
   Поле в пошукових макетах має відступ 12 (у шапці головної 9:7845 — 8): беремо 12, щоб текст поля
   стояв на одній лінії з видачею */

header .header-search:not(.open) .header-search-list {
	display: none !important;
}

header .header-search-list {
	gap: 16px;
	padding: 16px 12px;
	border-radius: 0;
	box-shadow: none;
	color: var(--vv-black);
}

/* лише популярні (порожнє поле) — 9:11156 */
header .header-search-list:has(> .vv-search-popular:first-child) {
	padding: 12px;
}

header .header-search-list .vv-search-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

header .header-search-list .vv-search-sep {
	flex-shrink: 0;
	height: 1px;
	background: #EFEFEF;
}

header .header-search-list .vv-search-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}

header .header-search-list .vv-search-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* рядок підказки / категорії: збіг із запитом чорним, решта сіра */
header .header-search-list .vv-search-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 17px;
	color: #D1D3CC;
}

header .header-search-list .vv-search-row b {
	font-weight: 400;
	color: var(--vv-black);
}

header .header-search-list .vv-search-row--category .vv-icon {
	color: var(--vv-black);
}

header .header-search-list .vv-search-row:hover {
	color: var(--vv-muted);
}

header .header-search-list .vv-search-all {
	flex-shrink: 0;
	padding: 8px 12px;
	background: var(--vv-accent);
	font-size: 14px;
	font-weight: 500;
	line-height: 11px;
	color: var(--vv-black);
}

header .header-search-list .vv-search-all:hover,
header .header-search-list .vv-search-all-btn:hover {
	opacity: .85;
}

/* кнопка на всю ширину під товарами — лише мобілка */
header .header-search-list .vv-search-all-btn {
	display: none;
}

header .header-search-list .vv-search-products {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

header .header-search-list .vv-search-product {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	column-gap: 8px;
	color: var(--vv-black);
}

header .header-search-list .vv-search-product-image {
	width: 44px;
	height: 44px;
}

header .header-search-list .vv-search-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

header .header-search-list .vv-search-product-name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 14px;
	line-height: 1.2;
}

header .header-search-list .vv-search-product:hover .vv-search-product-name {
	text-decoration: underline;
}

/* ціна: колонка 60px на 20px від назви; стара над новою, нова чорна навіть зі знижкою (так у макеті) */
header .header-search-list .vv-search-price {
	display: flex;
	flex-direction: column;
	min-width: 60px;
	margin-left: 12px;
	white-space: nowrap;
}

header .header-search-list .vv-search-price-old {
	font-size: 12px;
	line-height: 15px;
	color: #B5B5B5;
	text-decoration: line-through;
}

header .header-search-list .vv-search-price-new {
	font-size: 18px;
	font-weight: 500;
	line-height: 22px;
}

header .header-search-list .vv-search-currency {
	font-weight: 400;
}

header .header-search-list .vv-search-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* рамка в Figma всередині: 8+17+8 = 33 разом із нею */
header .header-search-list .vv-search-chip {
	padding: 7px 11px;
	border: 1px solid #EFEFEF;
	border-radius: 50px;
	font-size: 14px;
	line-height: 17px;
	color: var(--vv-black);
}

header .header-search-list .vv-search-chip:hover {
	border-color: #D1D3CC;
}

header .header-search-list .vv-search-empty {
	font-size: 14px;
	line-height: 17px;
	color: var(--vv-muted);
}

@media (min-width: 701px) {
	header .header-search-block {
		padding: 8px 12px;
	}

	/* видача — одразу під полем (2px), шириною з поле; на 701–900 тема ставила її на всю шапку */
	header .header-search {
		position: relative;
	}

	header .header-search-list {
		top: calc(100% + 2px);
		max-height: calc(100vh - var(--vv-header-h) - 16px);
		overflow-y: auto;
	}

	/* затемнення як у каталогу: сіре й під шапкою */
	#search-overlay {
		top: var(--vv-header-h);
		bottom: 0;
		height: auto;
		background: rgba(158, 158, 158, .5);
	}
}

/* мобілка: попап поверх затемненої сторінки разом із шапкою (9:5966) */
@media (max-width: 700px) {
	header .header-search.open {
		inset: 0;
		width: auto;
		height: auto;
		gap: 2px;
		padding: 6px 16px 16px;
		background: rgba(158, 158, 158, .5);
	}

	header .header-search.open .header-search-block {
		flex-shrink: 0;
		gap: 4px;
		padding: 4px 8px;
	}

	header .header-search.open #search-back {
		color: #D1D3CC;
	}

	header .header-search-list {
		flex: 0 1 auto;
		min-height: 0;
		max-height: none;
		gap: 12px;
		padding: 8px;
	}

	header .header-search-list:has(> .vv-search-popular:first-child) {
		padding: 8px;
	}

	header .header-search-list .vv-search-section {
		gap: 8px;
	}

	header .header-search-list .vv-search-section:has(.vv-search-products),
	header .header-search-list .vv-search-popular {
		gap: 12px;
	}

	header .header-search-list .vv-search-title {
		font-size: 14px;
		line-height: 17px;
	}

	header .header-search-list .vv-search-all {
		display: none;
	}

	header .header-search-list .vv-search-all-btn {
		display: block;
		padding: 8px 20px;
		background: var(--vv-accent);
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		text-align: center;
		color: var(--vv-black);
	}

	header .header-search-list .vv-search-products {
		gap: 12px;
	}

	header .header-search-list .vv-search-price {
		min-width: 52px;
		margin-left: 4px;
	}

	header .header-search-list .vv-search-price-new {
		font-size: 16px;
		line-height: 20px;
	}

	header .header-search-list .vv-search-chip {
		padding: 5px 11px;
		font-weight: 500;
	}
}

/* ---------- Каталог товарів (Figma 9:8425 / 9:10443 — десктоп) ---------- */
/* Розмітка й логіка — common/header_catalog.twig: пункт з дітьми відкривається кліком, діти JS малює в
   #header-catalog-list. Дві окремі панелі одразу під шапкою: білий список 283px і сіре підменю 283px праворуч.
   `display` обох списків ставить JS інлайном — тому тут без flex на самих списках */

/* шеврон пунктів з дітьми — зі спрайта; стара тема фарбувала активний у жовтий фільтром */
header .header-catalog-list .arrow-icon {
	width: 24px;
	height: 24px;
	color: #D1D3CC;
	filter: none !important;
}

header .header-catalog-list .header-catalog-list-block.active .arrow-icon {
	color: var(--vv-black);
}

/* діти в підменю — без шевронів (JS додає кожному <img arrow.svg>) */
header #header-catalog-list .header-catalog-list-block img {
	display: none;
}

/* затемнення в макеті сіре й лише під шапкою (шапка вища за нього по z-index) */
#catalog-overlay {
	top: var(--vv-header-h);
	bottom: 0;
	height: auto;
	background: rgba(158, 158, 158, 0.5);
}

@media (min-width: 1001px) {
	header .header-catalog-block {
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	header .header-catalog-wrapper,
	header .header-catalog-wrapper:has(:nth-child(2)[style*="display: none"]) {
		display: flex;
		align-items: flex-start;
		gap: 0;
	}

	header .header-catalog-list {
		width: 283px;
		min-width: 0;
		box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.08);
	}

	/* пункт 267×40: плашка активного з відступом 8px навколо, крок 44 */
	header #main-list {
		padding: 8px;
		background: var(--vv-white);
	}

	header #main-list .header-catalog-list-block {
		min-height: 40px;
		padding: 8px;
		color: var(--vv-black);
		font-size: 14px;
		font-weight: 500;
		line-height: 17px;
	}

	header #main-list .header-catalog-list-block + .header-catalog-list-block {
		margin-top: 4px;
	}

	header #main-list .header-catalog-list-block:hover,
	header #main-list .header-catalog-list-block.active {
		background: #F2F2F2;
	}

	header #main-list .header-catalog-list-block.active,
	header #main-list .header-catalog-list-block.active a {
		color: var(--vv-black);
	}

	header #main-list .header-catalog-list-block:hover .arrow-icon {
		color: var(--vv-black);
	}

	/* підменю: сіра панель, пункти 17px з кроком 37, без шевронів */
	header #header-catalog-list {
		padding: 16px;
		background: #F2F2F2;
	}

	header #header-catalog-list .header-catalog-list-block {
		padding: 0;
		color: #1F1F22;
		font-size: 14px;
		font-weight: 500;
		line-height: 17px;
	}

	header #header-catalog-list .header-catalog-list-block + .header-catalog-list-block {
		margin-top: 20px;
	}

	header #header-catalog-list .header-catalog-list-block a {
		color: #1F1F22;
	}

	header #header-catalog-list .header-catalog-list-block a:hover {
		color: var(--vv-black);
		text-decoration: underline;
	}

	/* фірмові пункти (контент з адмінки) — у нових відступах панелі: смуги на всю ширину, текст на 16px */
	header #main-list .header-catalog-list-block.bf-menu,
	header #main-list .header-catalog-list-block.valday {
		margin-right: -8px;
		margin-left: -8px;
		padding: 0;
	}

	/* банан над смугою виступає на 11px — щоб не лягав на шапку, смуга на 12px від верху панелі */
	header #main-list .header-catalog-list-block.bf-menu:first-child {
		margin-top: 4px;
	}

	header #main-list .header-catalog-list-block.bf-menu a,
	header #main-list .header-catalog-list-block.valday a {
		padding: 12px 16px;
	}

	header #main-list .header-catalog-list-block.bf-menu:hover,
	header #main-list .header-catalog-list-block.valday:hover {
		background: none;
	}
}

/* мобілка й планшет (Figma 9:6784 / 9:7299): панель на всю ширину під шапкою, у шапці панелі заголовок і хрестик,
   у підменю ще стрілка «назад» (заголовок тоді по центру — обидві іконки по 24px) */
@media (max-width: 1000px) {
	header .header-catalog-block {
		max-height: calc(100vh - var(--vv-header-h));
		overflow-y: auto;
		padding: 8px;
		border-radius: 0;
		box-shadow: none;
	}

	header .header-catalog-header {
		height: auto;
		margin: 0 0 8px;
		padding: 0 0 8px;
		border-bottom: 1px solid #EFEFEF;
		color: var(--vv-black);
		font-size: 14px;
		font-weight: 600;
		line-height: 17px;
	}

	header .header-catalog-back-arrow,
	header .header-catalog-close {
		width: 24px;
		height: 24px;
		padding: 0;
		color: #9E9E9E;
		line-height: 0;
		transform: none;
	}

	header .header-catalog-close.ui-close::before,
	header .header-catalog-close.ui-close::after {
		display: none;
	}

	header .header-catalog-wrapper {
		gap: 0;
	}

	header .header-catalog-list .header-catalog-list-block {
		min-height: 24px;
		padding: 0;
		color: var(--vv-black);
		font-size: 14px;
		font-weight: 500;
		line-height: 17px;
	}

	header #main-list .header-catalog-list-block + .header-catalog-list-block {
		margin-top: 12px;
	}

	header .header-catalog-list .header-catalog-list-block.active,
	header .header-catalog-list .header-catalog-list-block.active a {
		color: var(--vv-black);
	}

	header #header-catalog-list .header-catalog-list-block {
		min-height: 0;
		color: #1F1F22;
	}

	header #header-catalog-list .header-catalog-list-block a {
		color: #1F1F22;
	}

	header #header-catalog-list .header-catalog-list-block + .header-catalog-list-block {
		margin-top: 20px;
	}

	/* фірмові смуги — на всю ширину панелі, текст на 8px */
	header #main-list .header-catalog-list-block.bf-menu,
	header #main-list .header-catalog-list-block.valday {
		margin-right: -8px;
		margin-left: -8px;
		padding: 0;
	}

	header #main-list .header-catalog-list-block.bf-menu a,
	header #main-list .header-catalog-list-block.valday a {
		padding: 12px 8px;
	}
}

/* ---------- Бокове меню (Figma 9:9042 / 9:9736 — десктоп 288px, 9:11200 / 9:11608 — мобілка, у нас на всю ширину) ---------- */
/* Розмітка — common/sidebar.twig; відкривається ModalManager (common.js): клас .open + .modal-backdrop.
   Пункт поточної сторінки — .active, блакитний (#7EB6FF — колір активного пункту меню, так сказав Юра) */

:root {
	--vv-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9C6 9 10.4189 15 12 15C13.5812 15 18 9 18 9' stroke='%239E9E9E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* закрите меню ховається зсувом і visibility: раніше воно стояло на left: -300px, і тінь світила на лівому краї екрана */
.sidebar.vv-sidebar {
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 288px;
	max-width: 100%;
	padding: 16px;
	/* горизонтального скролу в панелі бути не може — навіть якщо щось (схований тултіп) вилізе за край */
	overflow-x: hidden;
	box-shadow: none;
	color: var(--vv-black);
	visibility: hidden;
	transform: translateX(-100%);
	transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
}

.sidebar.vv-sidebar.open {
	visibility: visible;
	transform: none;
	transition: transform 0.3s ease-in-out;
}

/* затемнення як у каталогу — сіре й під шапкою (панель меню її перекриває) */
body:has(#sidebar.open) .modal-backdrop {
	top: var(--vv-header-h);
	background: #9E9E9E;
}

.vv-sidebar a {
	color: inherit;
}

.vv-sidebar .vv-icon {
	width: 24px;
	height: 24px;
}

/* блоки через лінію #EFEFEF, 16px до і після неї */
.vv-sidebar-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #EFEFEF;
}

/* .vv-sidebar — щоб скидання padding у списків (.vv-sidebar-nav) не перебивало відступ після лінії */
.vv-sidebar .vv-sidebar-main > * + * {
	padding-top: 16px;
	border-top: 1px solid #EFEFEF;
}

.vv-sidebar-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vv-sidebar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 32.7px;
}

.vv-sidebar-logo {
	display: flex;
	align-items: center;
	gap: 4.97px;
}

.vv-sidebar-logo-mark {
	width: 21.49px;
	height: 28.84px;
}

.vv-sidebar-logo-text {
	width: 72.78px;
	height: 32.7px;
}

.vv-sidebar-top-btns {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vv-sidebar-close {
	display: flex;
	color: #9E9E9E;
	cursor: pointer;
}

/* мова — нативний select форми common/language: «УКР ⌄», стрілка 22px сіра */
.vv-sidebar-lang form {
	margin: 0;
}

.vv-sidebar-lang select {
	height: 22px;
	margin: 0;
	padding: 0 26px 0 0;
	border: 0;
	border-radius: 0;
	background: var(--vv-chevron-down) right center / 22px no-repeat;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.vv-sidebar-catalog {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px;
	background: var(--vv-brand);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	cursor: pointer;
}

.vv-sidebar-login {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 0;
	background: var(--vv-surface);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 15px;
	cursor: pointer;
}

/* залогінений: картка аватар + ім'я + бонуси над пунктами кабінету — Figma 96:12887
   (у макеті 9:9736 блоку не було — помилка макета, Юра) */
.vv-sidebar-account {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vv-sidebar-user {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vv-sidebar .vv-sidebar-user-avatar {
	flex: 0 0 45.31px;
	width: 45.31px;
	height: 45.31px;
	border-radius: 50%;
	object-fit: cover;
}

.vv-sidebar-user-meta {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}

/* 14 × 1.1 — Figma малює 15px */
.vv-sidebar-user-name {
	max-width: 100%;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 15px;
	overflow-wrap: anywhere;
}

.vv-sidebar-user-bonus {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #211A23;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	white-space: nowrap;
}

.vv-sidebar-user-zap {
	flex: 0 0 20px;
}

.vv-sidebar-user-bonus .bonus-tooltip {
	display: flex;
	color: #D1D3CC;
	line-height: 0;
}

/* плашка тултіпа (200) — від лівого краю блоку з ім'ям, над ним: по центру над «і» вона вилазила за правий край
   сайдбару на 5px і давала горизонтальний скрол */
.vv-sidebar-user-bonus .bonus-tooltip {
	position: static;
}

.vv-sidebar-user-bonus .bonus-tooltip .ui-tooltip-text {
	bottom: calc(100% + 6px);
	left: 0;
	border-radius: 0;
	background: var(--vv-black);
	line-height: 1.3;
	transform: none;
}

/* «Чат з VANDAL» — завжди блакитний (Юра), як у макеті головної */
.vv-sidebar-nav a.vv-sidebar-chat,
.vv-sidebar-nav a.vv-sidebar-chat .vv-icon {
	color: var(--vv-accent);
}

.vv-sidebar-nav,
.vv-sidebar-links,
.vv-sidebar-soc {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vv-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vv-sidebar-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

.vv-sidebar-nav .vv-icon {
	color: #9E9E9E;
}

.vv-sidebar-nav a.active,
.vv-sidebar-nav a.active .vv-icon,
.vv-sidebar-links a.active {
	color: var(--vv-accent);
}

.vv-sidebar-nav a:hover,
.vv-sidebar-nav a:hover .vv-icon,
.vv-sidebar-links a:hover {
	color: var(--vv-accent);
}

.vv-sidebar-help {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vv-sidebar-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

.vv-sidebar-links {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 14px;
	line-height: 17px;
}

.vv-sidebar-contacts {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.vv-sidebar-phone {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vv-sidebar-phone a,
.vv-sidebar .vv-sidebar-mail {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.vv-sidebar-phone a {
	font-size: 16px;
	line-height: 20px;
}

.vv-sidebar-phone p {
	margin: 0;
	font-size: 12px;
	line-height: 14px;
}

.vv-sidebar .vv-sidebar-mail {
	font-size: 14px;
	line-height: 17px;
}

/* пошта й соцмережі — окрема пара з кроком 16 */
.vv-sidebar-mail {
	margin-bottom: -4px;
}

.vv-sidebar-soc {
	display: flex;
	gap: 4px;
}

.vv-sidebar-soc a {
	display: flex;
	padding: 4px;
	background: var(--vv-brand);
	/* іконки соцмереж у макеті (сайдбар 9:9721, футер 9:8408) — #141B34, не чорні */
	color: #141B34;
}

/* у макеті мобілки 356px зі смужкою сторінки праворуч; Юра сказав — на всю ширину */
@media (max-width: 767px) {
	.sidebar.vv-sidebar {
		width: 100%;
	}

	.vv-sidebar-nav {
		gap: 12px;
	}

	.vv-sidebar-links {
		gap: 12px;
	}
}

/* ---------- Футер (Figma 84:12021 — оновлення 2026-09-30, десктоп 1440; мобілки в макеті нема, адаптив за логікою десктопа) ---------- */
/* line-height у px дорівнюють висотам текстових боксів Figma: normal у браузера для Montserrat дає +1px на рядок */

.vv-footer {
	background: #F9F9F9;
	color: var(--vv-black);
}

.vv-footer .vv-footer-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.vv-footer a {
	color: inherit;
	font-size: inherit;
}

.vv-footer-benefits {
	display: flex;
	gap: 4px;
}

.vv-footer-benefit {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	height: 90px;
	padding: 22px 24px;
	background: var(--vv-surface);
}

.vv-footer-benefit:nth-child(2) {
	flex: 0 0 auto;
}

.vv-footer-benefit-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 21px;
	white-space: nowrap;
}

.vv-footer-benefit-text {
	font-size: 14px;
	line-height: 18px;
	color: #878480;
	white-space: nowrap;
}

/* у макеті блискавка — контур 14.44×20 з обводкою 1.5px назовні */
.vv-footer .vv-icon-zap {
	width: 17.44px;
	height: 23px;
	margin: -1.5px;
}

/* 4 рівні колонки через 4 — по 337 при контейнері 1360 */
.vv-footer-content {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas: "brand catalog help contacts";
	column-gap: 4px;
	align-items: start;
}

.vv-footer-brand {
	grid-area: brand;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vv-footer-catalog {
	grid-area: catalog;
}

.vv-footer-help {
	grid-area: help;
}

.vv-footer-logo {
	display: flex;
	align-items: center;
	gap: 7.74px;
}

.vv-footer .vv-footer-logo-mark {
	width: 33.51px;
	height: 44.96px;
}

.vv-footer .vv-footer-logo-text {
	width: 113.47px;
	height: 50.98px;
}

.vv-footer-tagline {
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
}

.vv-footer-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vv-footer-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}

.vv-footer-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 17px;
}

.vv-footer-contacts {
	grid-area: contacts;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 37px;
}

.vv-footer-phone {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.vv-footer .vv-footer-phone-number {
	display: block;
	font-size: 22px;
	font-weight: 500;
	line-height: 27px;
}

.vv-footer-phone-note {
	max-width: 170px;
	font-size: 12px;
	line-height: 16px;
	color: #878480;
}

.vv-footer .vv-footer-mail {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

.vv-footer-soc {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vv-footer-soc a {
	display: flex;
	padding: 4px;
	background: var(--vv-brand);
	color: #141B34;
}

.vv-footer-copyright {
	padding-top: 24px;
	border-top: 1px solid #EBEAE9;
	font-size: 12px;
	line-height: 16px;
}

/* з 1200 плитки переваг і колонки під ними — в одній сітці (subgrid): кожна колонка починається рівно з лівого краю
   своєї плитки. Друга колонка — по ширині плитки «Відправляємо в день замовлення» (auto), решта ділять залишок */
@media (min-width: 1200px) {
	.vv-footer .vv-footer-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 4px;
		row-gap: 24px;
	}

	.vv-footer-benefits,
	.vv-footer-content,
	.vv-footer-copyright {
		grid-column: 1 / -1;
	}

	.vv-footer-benefits,
	.vv-footer-content {
		display: grid;
		grid-template-columns: subgrid;
	}
}

/* 1200–1365: плитки 1, 3, 4 вужчі за свій текст в один рядок (на 1200 — 246 при «Купуй — отримуй кешбек 5%» ≈ 275) —
   дозволяємо перенос; друга колонка лишається по ширині свого тексту (max-content рядком) */
@media (min-width: 1200px) and (max-width: 1365px) {
	.vv-footer-benefit {
		height: auto;
		min-height: 90px;
		padding: 16px;
	}

	.vv-footer-benefit-title,
	.vv-footer-benefit-text {
		white-space: normal;
	}
}

@media (max-width: 1199px) {
	.vv-footer-benefits {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	/* плитки 2×2 — вміст від лівого краю, як на проді (рішення Юри 2026-09-30); колонки під ними — як на проді: лого рядком + 3 */
	.vv-footer-benefit {
		justify-content: flex-start;
	}

	.vv-footer-content {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas:
			"brand brand brand"
			"catalog help contacts";
		row-gap: 32px;
	}
}

@media (max-width: 767px) {
	.vv-footer .vv-footer-inner {
		padding: 24px 16px;
	}

	.vv-footer-benefits {
		grid-template-columns: 1fr;
	}

	.vv-footer-benefit {
		justify-content: flex-start;
		height: auto;
		padding: 16px;
	}

	/* плитки тут вирівняні вліво, а блискавка займає 14.44px — добиваємо до 24, як інші іконки,
	   інакше текст «Кешбеку» стоїть на 10px лівіше за решту */
	.vv-footer .vv-icon-zap {
		margin: -1.5px 3.28px;
	}

	.vv-footer-benefit-title,
	.vv-footer-benefit-text {
		white-space: normal;
	}

	.vv-footer-content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"brand brand"
			"catalog help"
			"contacts contacts";
		column-gap: 16px;
	}


	.vv-footer-contacts {
		gap: 24px;
	}
}

/* нижнє меню (fixed, 68px) і плаваючі кнопки з'являються до 700px — як у старому футері */
@media (max-width: 700px) {
	.vv-footer .vv-footer-inner {
		padding-bottom: 100px;
	}
}

/* ---------- Картка товару (Figma 1:3043 / кіт 1:265 — десктоп 222×336; 1:1494 / кіт 1:167 — мобілка 164×258) ---------- */
/* Розмітка — product/_product_card.twig; старі класи лишились (на них ocmod і JS), тому все під .vv-card */

/* Висоти в ряду рівні й без JS (фіксоване фото, назва ≤2 рядків, низ притиснутий). equalizeSlideHeight з common.js
   міряє каруселі на window.load, зокрема приховану в кошику, і ставить їм height: 18px — тому інлайнова висота гаситься */
.vv-card-wrap {
	display: flex;
	flex-direction: column;
}

.vv-card-wrap > .product-thumb.vv-card {
	flex: 1 0 auto;
	height: auto !important;
}

/* X1 заокруглює кожен слайд каруселі на 6px з overflow: hidden — у картки кутів нема */
.swiper-viewport .vv-card-wrap.swiper-slide {
	border-radius: 0 !important;
}

.product-thumb.vv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 8px;
	border: 0;
	border-radius: 0 !important;
	background: var(--vv-white);
	box-shadow: none !important;
	color: var(--vv-black);
}

.product-layout .product-thumb.vv-card:hover {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* верхній ряд над фото: стікер ліворуч, серце праворуч */
.product-thumb.vv-card .sticker {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	margin: 0;
	padding: 0;
	background: none;
}

.product-thumb.vv-card .l-icon {
	position: absolute;
	top: 8px !important;
	right: 8px !important;
	left: auto;
	z-index: 2;
	display: block !important;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

.product-thumb.vv-card .wishlist {
	position: static;
	display: block;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: var(--vv-white);
	color: var(--vv-black);
	cursor: pointer;
}

.product-thumb.vv-card .wishlist svg {
	display: block;
	width: 22px !important;
	height: 22px !important;
}

.product-thumb.vv-card .wishlist .icon-remove,
.product-thumb.vv-card .wishlist.active .icon-add {
	display: none;
}

.product-thumb.vv-card .wishlist.active .icon-remove {
	display: block;
}

/* у макеті фото фіксованої висоти 208 (ширина — яка вийде) і на 2px нижче верху, під рядом стікера */
.product-thumb.vv-card .image {
	width: 100%;
	height: 208px;
	margin: 2px 0 0;
	padding: 0;
}

.product-thumb.vv-card .image a {
	display: block;
	width: 100%;
	height: 100%;
}

.product-thumb.vv-card .image img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.product-thumb.vv-card .caption {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	min-height: 102px;
	margin: 0;
	padding: 0;
}

.product-thumb.vv-card .hp {
	display: none;
}

.product-thumb.vv-card .vv-card-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.product-thumb.vv-card .h4 {
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

.product-thumb.vv-card .h4 a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
	white-space: normal;
}

.product-thumb.vv-card .rating-info {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	height: 20px !important;
	margin: 0;
	padding: 0;
	border: 0;
}

.product-thumb.vv-card .vv-card-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	color: var(--vv-black);
	font-size: 12px;
	font-weight: 400;
	line-height: 15px;
}

.product-thumb.vv-card .vv-card-rating .vv-icon {
	width: 16px;
	height: 16px;
}

.product-thumb.vv-card .vv-card-rating--empty .vv-icon {
	--vv-star: var(--vv-muted);
}

.product-thumb.vv-card .vv-card-score {
	font-weight: 500;
}

.product-thumb.vv-card .vv-card-reviews {
	color: var(--vv-muted);
}

.product-thumb.vv-card .rating-info-reward {
	display: flex;
	flex: none;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 2px 4px;
	border-radius: 0;
	background: var(--vv-surface);
	color: var(--vv-black);
	font-size: 12px;
	font-weight: 400;
	line-height: 15px;
}

.product-thumb.vv-card .rating-info-reward .vv-icon {
	width: 16px;
	height: 16px;
}

.product-thumb.vv-card .action-block {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* hpmodel при виборі смаку вписує в .price голий текст або price-new/price-old — стилі на обидва випадки */
.product-thumb.vv-card .price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
}

/* стара тема робить `.price > span` флексом з gap 4px — «₴» відʼїжджав від числа на 5px замість 1 */
.product-thumb.vv-card .price > span {
	display: block;
}

.product-thumb.vv-card .price .current-price,
.product-thumb.vv-card .price .price-new {
	margin: 0;
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
}

/* зі старою ціною рядок нової в макеті 20px, без неї — 16; нова ціна при знижці червона (кіт 9:12032) */
.product-thumb.vv-card .price .price-new {
	color: var(--vv-red);
	line-height: 20px;
}

.product-thumb.vv-card .price .price-currency {
	margin-left: 1px;
	font-size: 16px;
	font-weight: 400;
}

.product-thumb.vv-card .price .price-old {
	order: -1;
	margin: 0;
	color: var(--vv-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	text-decoration: line-through;
}

.product-thumb.vv-card .c-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	cursor: pointer;
}

.product-thumb.vv-card .c-icon svg {
	width: 22px;
	height: 22px;
}

.product-thumb.vv-card .btn-notify svg {
	width: 18px;
	height: 18px;
}

/* «Ціна тижня» (Figma 9:8257): рамка 2px, кнопка кошика того ж #75F300. Рамка в Figma всередині — вміст на тих
   самих 8px від краю */
.product-thumb.vv-card.vv-card--week {
	padding: 6px;
	border: 2px solid var(--vv-green-light);
}

/* absolute рахується від внутрішнього краю рамки: 2 + 6 = 8, як у звичайній картці */
.product-thumb.vv-card.vv-card--week .sticker {
	top: 6px;
	left: 6px;
}

.product-thumb.vv-card.vv-card--week .l-icon {
	top: 6px !important;
	right: 6px !important;
}

/* стара рамка «Ціни тижня» з stylesheet.css (outline 3px #96F03D) малювалась поверх нової */
.price-week-left .product-card .product-thumb.vv-card {
	outline: 0;
}

.price-week-left .product-thumb.vv-card .caption .btn-cart,
.product-thumb.vv-card.vv-card--week .c-icon {
	background: var(--vv-green-light) !important;
}

/* ---------- Стікери-маркери (Figma 9:12575) ---------- */
/* Маркер у Figma — обводка тексту 4px назовні з гострими кутами (miter, ліміт ~2.5). Малює його inline-SVG
   з тим самим текстом (макрос vv_sticker у product/_product_card.twig): stroke 8px під заливкою = 4px назовні.
   HTML-текст лишається прозорим — він задає розмір плашки й читається скрінрідерами.
   Не text-shadow (80 копій зі зсувами давали квадратні кути й «поплавлені» краї) і не -webkit-text-stroke
   (на варіативному Montserrat — шпичаки з внутрішніх контурів; у SVG їх зрізає miterlimit) */

.vv-sticker {
	--vv-sticker-bg: var(--vv-accent);
	position: relative;
	display: inline-block;
	padding: 0 3px;
	color: var(--vv-black);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.vv-sticker-text {
	color: transparent;
}

.vv-sticker-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* шрифт і кегль SVG-текст бере від .vv-sticker. Базова лінія — атрибут y у em (макрос): WebKit не застосовує
   CSS transform до SVG-тексту й інакше трактує dominant-baseline — текст у Safari з'їжджав угору */
.vv-sticker-svg text {
	fill: currentColor;
	stroke: var(--vv-sticker-bg);
	stroke-width: 8px;
	stroke-linejoin: miter;
	stroke-miterlimit: 2.5;
	paint-order: stroke;
}

/* набір стікерів 9:12575: «Новинка» — лайм, знижка — червона з білим текстом */
.vv-sticker--new {
	--vv-sticker-bg: var(--vv-brand);
}

.vv-sticker--sale {
	--vv-sticker-bg: var(--vv-red);
	color: var(--vv-white);
}

.vv-sticker--top {
	--vv-sticker-bg: var(--vv-violet);
	color: var(--vv-white);
}

/* «Шалена знижка» — два рядки з інтерліньяжем 0.9 (у SVG — tspan на кожне слово з dy 0.9em) */
.vv-sticker--week {
	--vv-sticker-bg: var(--vv-green-light);
	width: min-content;
	line-height: 0.9;
	white-space: normal;
}


/* Outlet у макеті нема — лишено фірмовий фіолетовий аутлету */
.vv-sticker--outlet {
	--vv-sticker-bg: #7927D8;
	color: var(--vv-white);
}

@media (max-width: 767px) {
	/* фрейм картки в макеті 9:5833 — фіксовані 258, вміст 256.57 */
	.product-thumb.vv-card {
		min-height: 258px;
	}

	.product-thumb.vv-card .image {
		height: 146.57px;
	}

	.product-thumb.vv-card .caption {
		min-height: 84px;
	}

	.product-thumb.vv-card .h4,
	.product-thumb.vv-card .h4 a {
		font-size: 12px;
		line-height: 14px;
	}

	.product-thumb.vv-card .rating-info {
		height: 16px !important;
	}

	.product-thumb.vv-card .vv-card-rating,
	.product-thumb.vv-card .rating-info-reward {
		font-size: 10px;
		line-height: 12px;
	}

	.product-thumb.vv-card .vv-card-rating .vv-icon,
	.product-thumb.vv-card .rating-info-reward .vv-icon {
		width: 12px;
		height: 12px;
	}

	.product-thumb.vv-card .price .price-old {
		font-size: 10px;
		line-height: 12px;
	}

	.product-thumb.vv-card .price .price-new {
		line-height: 18px;
	}

	.product-thumb.vv-card .c-icon {
		width: 28px;
		height: 28px;
	}

	.product-thumb.vv-card .c-icon svg {
		width: 20px;
		height: 20px;
	}

	/* мобільний стікер 9:5833 — 11/140% (інтерліньяж і SVG-маркер відносні, підлаштовуються самі) */
	.product-thumb.vv-card .vv-sticker {
		font-size: 11px;
	}
}

/* ---------- Нижнє меню мобілки (Figma 9:5930 / кіт 9:12372) — усі сторінки, до 700px ---------- */
/* Розмітка — common/mobile_menu.twig; «Зв'язатися» відкриває віджет зв'язку з footer.twig, його кругла кнопка тут схована */

.mobile-menu {
	justify-content: space-between;
	gap: 0;
	padding: 12px 16px;
	background: var(--vv-white);
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
}

.mobile-menu .mobile-menu-item {
	gap: 4px;
	width: 56px;
	color: var(--vv-black);
	font-size: 10px;
	font-weight: 500;
	line-height: 14px;
	white-space: nowrap;
	cursor: pointer;
}

.mobile-menu .mobile-menu-item-icon,
.mobile-menu .mobile-menu-item .vv-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.mobile-menu .mobile-menu-item.active {
	color: var(--vv-accent);
}

/* підписи ширші за пункт 56px («Зв'язатися» 56, «Збережені» 56): на 320 між ними лишалось ~2px */
@media (max-width: 359px) {
	.mobile-menu {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (max-width: 700px) {
	.mobile-menu {
		display: flex;
	}

	/* месенджери віджета виїжджають над пунктом «Зв'язатися» (крайній праворуч), за 12px від меню; невидима кнопка
	   стоїть за меню, тож обгортка не ловить тапи — лише самі месенджери */
	.b24-widget-button-wrapper.b24-widget-button-position-bottom-right {
		right: 16px !important;
		bottom: 2px !important;
		pointer-events: none;
	}

	.b24-widget-button-wrapper .b24-widget-button-inner-container {
		visibility: hidden;
	}

	.b24-widget-button-wrapper .b24-widget-button-social-item {
		pointer-events: auto;
	}
}

/* ---------- Головна (Figma 9:7807 — десктоп 1440, 9:5576 — мобілка 375) ---------- */
/* Лише body.common-home: внутрішні сторінки чекають свого макета. body — щоб перебити X1 (він вантажиться останнім).
   Секції — модулі макета «Главная» у .m-section; порядок і вміст HTML-модулів задаються в адмінці (див. 11-rebranding.md).
   Ритм макета: 28px між секціями, 12px від заголовка до контенту, 4px між картками й плитками. */

:root {
	--vv-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6C9 6 15 10.4189 15 12C15 13.5812 9 18 9 18' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--vv-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6C15 6 9 10.4189 9 12C9 13.5812 15 18 15 18' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.common-home #content {
	padding-top: 12px;
}

body.common-home .m-section {
	margin-bottom: 28px;
}

/* на десктопі плашка Hot Friday — заголовок своєї каруселі (до неї 12px), а заголовок модуля товарів
   («Рекомендуємо» — з адмінки, модуль 59) видно лише на мобілці, як у макеті 9:5576 */
@media (min-width: 768px) {
	body.common-home .m-section:has(.vv-hf) {
		margin-bottom: 12px;
	}

	body.common-home .m-section:has(.vv-hf) + .m-section .adaptive-h2 {
		display: none;
	}
}

body.common-home .adaptive-h2 {
	margin: 0 0 12px;
	color: #1F1F22;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

/* слайди без старого відступу знизу 5px (ряд карток рівно 336) і без радіусів: 6px ставлять .first-container
   і X1 (на слайдах — з !important), 4px — opencart.css на .swiper-viewport */
body.common-home .swiper-slide {
	padding: 0 !important;
}

body.common-home .swiper-viewport,
body.common-home .swiper-container,
body.common-home .swiper-viewport .swiper-slide,
body.common-home .swiper-slide img {
	border-radius: 0 !important;
}

/* Arrow Button (кіт 9:12158): 26×26, стрілка 22px з прозорістю 0.4 / hover 0.7 / натиснута 1 */
body.common-home .slick-arrow {
	width: 26px;
	height: 26px;
	padding: 2px;
	border-radius: 0;
	background: var(--vv-surface);
	color: var(--vv-black);
}

body.common-home .slick-arrow:hover {
	background: var(--vv-surface-hover);
}

body.common-home .slick-arrow.arrow-left {
	left: 0;
}

body.common-home .slick-arrow.arrow-right {
	right: 0;
}

body.common-home .slick-arrow img {
	display: none;
}

body.common-home .slick-arrow::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	opacity: 0.4;
	-webkit-mask: var(--vv-arrow-right) center / 22px no-repeat;
	mask: var(--vv-arrow-right) center / 22px no-repeat;
}

body.common-home .slick-arrow.arrow-left::before {
	-webkit-mask-image: var(--vv-arrow-left);
	mask-image: var(--vv-arrow-left);
}

body.common-home .slick-arrow:hover::before {
	opacity: 0.7;
}

body.common-home .slick-arrow:active::before {
	opacity: 1;
}

/* Hero: два банери 678×264 з кроком 4, крапки за 9px під ними, категорії ще на 13px нижче.
   Банери на проді 1212×528 (2.30:1), у макеті 2.57:1 — cover зрізає ~5% зверху й знизу */
body.common-home .m-section:has(.vv-hero) {
	margin-bottom: 13px;
}

.vv-hero {
	position: relative;
}

.vv-hero .swiper-slide a {
	display: block;
}

.vv-hero .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 678 / 264;
	object-fit: cover;
}

/* стрілки по центру банерів, а не всього блоку з крапками (6px + 9px) */
body.common-home .vv-hero .slick-arrow {
	top: calc((100% - 15px) / 2);
}

.vv-hero .swiper-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 6px;
	margin-top: 9px;
}

.vv-hero .swiper-pagination .swiper-pagination-bullet {
	width: 5px;
	height: 5px;
	margin: 0;
	border-radius: 50%;
	background: #D3D3D3;
	opacity: 0.8;
}

.vv-hero .swiper-pagination .swiper-pagination-bullet-active {
	width: 10px;
	height: 6px;
	border-radius: 3px;
	background: var(--vv-brand);
	opacity: 1;
}

/* Категорії (HTML-модуль): 4 плитки на всю ширину + «Best match» 237.6px */
.vv-cats {
	display: flex;
	gap: 4px;
}

.vv-cats .vv-cat {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-width: 0;
	height: 88px;
	padding: 8px;
	background: var(--vv-white);
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.vv-cats .vv-cat:hover {
	background: var(--vv-brand);
}

/* іконки з макета збережені на білому непрозорому квадраті — на сірій плитці при наведенні він вилазив; multiply
   робить біле кольором плитки (решта картинки на сірому темніє на ~7%) */
.vv-cats .vv-cat img {
	flex: none;
	width: 60px;
	height: auto;
	mix-blend-mode: multiply;
}

.vv-cats .vv-cat--more {
	flex: 0 0 237.6px;
	gap: 12px;
}

.vv-cats .vv-cat--more img {
	width: 58px;
}

/* «Каталог товарів» під плитками — на ширинах, де його нема в шапці (X1 ховає його там до 1000px) */
body.common-home .main-catalog-btn {
	gap: 4px;
	margin-top: 8px;
	padding: 8px;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

body.common-home .main-catalog-btn img {
	width: 24px;
	height: 24px;
}

/* Hot Friday і Outlet (HTML-модулі 57 / 69) — смуги 2026-10-01: HF 110:5719 (1360) / 110:5784 (1100) / 110:5653 (343),
   Outlet 110:5896 (1360) / 110:5927 (1000) / 110:5850 (343). Банер — ціла картинка @2x (лого, слоган, декор і кнопка
   намальовані; шар без кнопки з макета не витягти), три версії під ширину банера: на ширинах макета 1:1, між ними
   пропорційно масштабується (висота 84 при 1360 → 99 при 1600). Ширина банера = вікно − 80 (з 768) / вікно − 32.
   «Перейти до акції» (.vv-banner-btn) — прозора зона точно над намальованою кнопкою: посилання для скрінрідерів, а при
   наведенні на банер — затемнення 7.5% (лайм → ≈ --vv-brand-hover). Таймера в новому макеті нема — схований
   (розмітка модуля лишилась, JS лічильника нешкідливий). */
.vv-hf,
.vv-outlet {
	position: relative;
	display: block;
	aspect-ratio: 1360 / 84;
	overflow: hidden;
	color: var(--vv-black);
	background: 0 0 / 100% 100% no-repeat;
}

.vv-hf {
	background-color: #E7F127;
	background-image: url("/assets/brand/home/hf-1360.jpg");
}

.vv-outlet {
	background-color: #5D16F6;
	background-image: url("/assets/brand/home/outlet-1360.jpg");
}

/* кнопка 158×35 на 24.5 (HF) / 25 (Outlet) від верху, впритул праворуч — у відсотках від картинки */
.vv-banner-btn {
	position: absolute;
	top: 29.167%;
	left: 88.382%;
	width: 11.618%;
	height: 41.667%;
	overflow: hidden;
	color: transparent;
	font-size: 14px;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.vv-outlet .vv-banner-btn {
	top: 29.762%;
}

.vv-hf:hover .vv-banner-btn,
.vv-outlet:hover .vv-banner-btn {
	background: rgba(0, 0, 0, 0.075);
}

.vv-hf-timer {
	display: none;
}

/* середня версія: HF 1100 — для банера вужчого за 1230 (вікно < 1310), Outlet 1000 — вужчого за 1180 (вікно < 1260) */
@media (max-width: 1309px) {
	.vv-hf {
		aspect-ratio: 1100 / 84;
		background-image: url("/assets/brand/home/hf-1100.jpg");
	}

	.vv-hf .vv-banner-btn {
		left: 85.636%;
		width: 14.364%;
	}
}

@media (max-width: 1259px) {
	.vv-outlet {
		aspect-ratio: 1000 / 84;
		background-image: url("/assets/brand/home/outlet-1000.jpg");
	}

	.vv-outlet .vv-banner-btn {
		left: 84.2%;
		width: 15.8%;
	}
}

/* мобілка 343×60: кнопка 106×20 у правому нижньому куті */
@media (max-width: 767px) {
	.vv-hf,
	.vv-outlet {
		aspect-ratio: 343 / 60;
	}

	.vv-hf {
		background-image: url("/assets/brand/home/hf-343.jpg");
	}

	.vv-outlet {
		background-image: url("/assets/brand/home/outlet-343.jpg");
	}

	.vv-hf .vv-banner-btn,
	.vv-outlet .vv-banner-btn {
		top: 66.667%;
		left: 69.096%;
		width: 30.904%;
		height: 33.333%;
		font-size: 10px;
	}
}

/* для скрінрідерів: текст банера намальований на картинці */
.vv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Ціна тижня + Рекомендуємо: 2 + 4 картки по 223.33 з кроком 4 */
body.common-home .price-week-module {
	margin-bottom: 0;
}

body.common-home .price-week-row {
	gap: 4px;
}

/* Банер квадратний, як у макеті. !important — на ньому ще клас .product-thumb, а stylesheet.css дає 6px !important.
   У banner.jpg (713×1002) вшиті білі кути r≈17px: коли банер майже тих самих пропорцій (телефони 412–430),
   cover їх не зрізає. Тому фон на 7px ширший за блок з кожного боку — overflow: hidden обрізає кути завжди */
body.common-home .price-week-banner {
	border-radius: 0 !important;
	background: none;
}

body.common-home .price-week-banner::before {
	content: "";
	position: absolute;
	inset: -7px;
	background: url('/assets/events/priceweek/banner.jpg') center / cover no-repeat;
}

@media (min-width: 1201px) {
	body.common-home .price-week-row {
		grid-template-columns: calc((100% - 20px) / 3 + 4px) minmax(0, 1fr);
	}
}

/* з 1441 каруселі головної — 7 карток у ряд (common.js), тут 2 колонки з 7 під «Ціну тижня» і 5 під «Рекомендуємо» */
@media (min-width: 1441px) {
	body.common-home .price-week-row {
		grid-template-columns: calc((100% - 24px) / 7 * 2 + 4px) minmax(0, 1fr);
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	body.common-home .price-week-row {
		grid-template-columns: calc((100% - 16px) / 5 * 2 + 4px) minmax(0, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	body.common-home .price-week-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Промо-картки 268.8×144.29 і відео 337×187.7 (каруселі банерів). Банери на проді 713×433 і 16:9 —
   макет показує їх зрізаними по висоті, тому cover */
.vv-promo .swiper-slide img,
.vv-videos .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* заголовки банерів угорі — макет ріже переважно низ. Продові міні-банери мають вшиті білі кути r≈17px (зі старого
   дизайну) — scale 1.02 ховає їх за край слайда (overflow: hidden у X1) */
.vv-promo .swiper-slide img {
	aspect-ratio: 268.8 / 144.29;
	object-position: 50% 10%;
	transform: scale(1.02);
}

.vv-videos .swiper-slide img {
	aspect-ratio: 337 / 187.7;
}

/* SEO-текст (HTML-модуль, 9:8324): згорнутий до заголовка й двох рядків */
body.common-home .custom-block-expand {
	padding: 12px;
	border-radius: 0;
	background: var(--vv-white);
}

body.common-home .custom-block-expand .custom-block-expand-content {
	max-height: 57px;
}

body.common-home .custom-block-expand-content h1,
body.common-home .custom-block-expand-content h2 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 21px;
}

body.common-home .custom-block-expand-content p,
body.common-home .custom-block-expand-content li {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
}

body.common-home .custom-block-expand.open .custom-block-expand-content h2 {
	margin-top: 12px;
}

/* у згорнутому видно заголовок і два рядки першого абзацу — з трикрапкою, як у макеті */
body.common-home .custom-block-expand:not(.open) .custom-block-expand-content p:first-of-type {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

body.common-home .custom-block-expand-overlay {
	margin-top: 12px;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	text-decoration: underline;
}

body.common-home .custom-block-expand-overlay img {
	display: none;
}

@media (max-width: 1000px) {
	.vv-cats {
		flex-wrap: wrap;
	}

	.vv-cats .vv-cat,
	.vv-cats .vv-cat--more {
		flex: 1 0 0;
		flex-direction: column;
		gap: 8px;
		font-size: 14px;
		line-height: 17px;
	}

	.vv-cats .vv-cat img,
	.vv-cats .vv-cat--more img {
		width: 44px;
	}

	body.common-home .main-catalog-btn {
		display: flex;
	}
}

@media (max-width: 767px) {
	/* розпірка під fixed-шапкою з X1 має margin-bottom: -5px — контент заїжджав під шапку */
	body.common-home > .null {
		margin-bottom: 0;
	}

	body.common-home #content {
		padding-top: 16px;
	}

	body.common-home .m-section {
		margin-bottom: 24px;
	}

	/* банер 140, крапки за 5px, категорії ще на 9px нижче; після категорій — 28, як на десктопі */
	body.common-home .m-section:has(.vv-hero) {
		margin-bottom: 9px;
	}

	body.common-home .m-section:has(.vv-cats) {
		margin-bottom: 28px;
	}

	/* «Ціна тижня» і «Рекомендуємо» тут одна під одною — між ними ритм секцій */
	body.common-home .price-week-row {
		gap: 24px;
	}

	body.common-home .m-section > .container {
		padding: 0 16px;
	}

	/* каруселі на мобілці виходять за правий край екрана */
	body.common-home .swiper-adaptive.module {
		margin: 0 -16px;
	}

	body.common-home .swiper-adaptive .swiper-container {
		padding-right: 16px;
	}

	body.common-home .swiper-adaptive .swiper-slide:first-child,
	body.common-home .adaptive-h2 {
		margin-left: 16px;
	}

	/* 18px !important на .h2 ставить stylesheet.css */
	body.common-home .adaptive-h2 {
		margin-bottom: 8px;
		font-size: 16px !important;
		line-height: 20px;
	}

	/* у макеті мобілки (9:5907) заголовок відео 14px чорний, решта секцій — 16px #1F1F22 */
	body.common-home .vv-videos .adaptive-h2 {
		font-size: 14px !important;
		color: var(--vv-black);
	}

	.vv-hero {
		width: calc(100% + 16px);
	}

	/* глобальний мобільний відступ першого слайда в петлі зсуває всю стрічку — видно край попереднього банера */
	body.common-home .vv-hero .swiper-slide:first-child {
		margin-left: 0;
	}

	.vv-hero .swiper-slide img {
		aspect-ratio: 318 / 140;
	}

	.vv-hero .swiper-pagination {
		margin-top: 5px;
		margin-right: 16px;
	}

	/* сітка 3 в ряд, усі 6 плиток (з Hot Friday і Best match) — як на старому проді (Юра, 2026-10-01; макет 9:5576
	   мав 4 в ряд без них): іконка 44 над підписом 14, плитка 88 */
	.vv-cats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vv-cats .vv-cat,
	.vv-cats .vv-cat--more {
		display: flex;
		padding: 8px 4px;
		font-weight: 400;
	}

	/* на мобілці промо 184.5×112 — рідна пропорція банерів 713×433 */
	.vv-promo .swiper-slide img {
		aspect-ratio: 184.5 / 112;
	}

	body.common-home .custom-block-expand {
		padding: 8px;
	}

	body.common-home .custom-block-expand-content h1 {
		font-weight: 600;
	}

	body.common-home .custom-block-expand-overlay {
		margin-top: 10px;
	}
}

/* ---------- Сторінка категорії (Figma 57:10685 — десктоп 1680, 57:10997 / 57:11330 — з вибраними фільтрами,
   57:11781 — мобілка, 57:12298 — панель фільтра, 57:12277 — шторка сортування, 57:11720 — магазини) ---------- */
/* Розмітка — product/category.twig, фільтр — OCFilter 4.8 (шаблони default/…/ocfilter48). CSS фільтра (ocf.cache.*.css)
   друкується всередині модуля в <body>, тобто стоїть останнім, а stylesheet.css місцями дає !important —
   звідси префікс body категорії й !important там, де інакше не перебити. Макет 1680 з полями 40 = контент 1600, як у нас */

:root {
	--vv-link: #2B7AE8;
	--vv-field-border: #DCDDDB;
	--vv-x-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M16.5 5.5L11 11M11 11L5.5 16.5M11 11L16.5 16.5M11 11L5.5 5.5' stroke='%23898E86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--vv-x-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M16.5 5.5L11 11M11 11L5.5 16.5M11 11L16.5 16.5M11 11L5.5 5.5' stroke='%232B7AE8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--vv-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.1665 11.0495L6.32136 13.2975C6.87692 13.8771 7.1547 14.1668 7.49987 14.1668C7.84505 14.1668 8.12283 13.8771 8.67842 13.2975L15.8332 5.8335' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* крихти: 8px під шапкою, 12 Medium #898E86, розділювач «·» Bold з відступами 4 */
body[class*="product-category-"] .category-page ul.breadcrumb {
	margin: 0 !important;
	padding: 8px 0 0;
	background: none;
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
}

body[class*="product-category-"] .category-page .breadcrumb li,
body[class*="product-category-"] .category-page .breadcrumb a {
	color: var(--vv-muted);
	font-size: 12px;
	line-height: 15px;
}

/* flex — щоб пробіл із розмітки між «·» і посиланням не додавав ще 3px */
body[class*="product-category-"] .category-page .breadcrumb li {
	display: inline-flex;
	align-items: baseline;
}

body[class*="product-category-"] .category-page .breadcrumb li + li::before {
	content: "·";
	width: auto;
	height: auto;
	margin: 0 4px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--vv-muted);
	font-weight: 700;
	vertical-align: baseline;
}

/* H1 18 SemiBold, кількість 14 #9E9E9E під ним; сортування справа, низом по кількості (57:10741) */
body[class*="product-category-"] .category-page h1 {
	margin: 12px 0 0;
	color: var(--vv-black);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

body[class*="product-category-"] .category-page .product-total {
	padding: 0;
	color: #9E9E9E;
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

body[class*="product-category-"] .category-page h1 .product-total {
	padding-left: 0;
}

/* без фільтрів рядок (кількість + сортування 34px) заходить під H1 на 13px: кількість стає на 4px під H1, низ таблетки = низ кількості.
   Праве поле H1 = таблетка 181 + 16: у макеті назва коротка, а довга («Картриджі для електронних сигарет…») інакше лізла під таблетку */
body[class*="product-category-"] .category-page-header {
	align-items: flex-end;
	margin: -13px 0 0;
}

@media (min-width: 768px) {
	body[class*="product-category-"] .category-page h1 {
		padding-right: 197px;
	}
}

/* з вибраними фільтрами кількість у рядку з H1, під ним чипи (57:11053): рядок одразу під H1, таблетка 34 низом по чипах 30 — чипи на 4 нижче H1 */
body[class*="product-category-"] .vv-cat-filtered .category-page-header {
	margin-top: 0;
}

body[class*="product-category-"] .category-page .ocf-selected-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
}

/* чипи — лише в рядку над сіткою: той самий клас .ocf-selected OCFilter дає вибраному значенню в колонці фільтра */
body[class*="product-category-"] .category-page .ocf-selected-row .ocf-selected {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	margin: 0;
	/* у Figma обводка всередині (8 = рамка + поле), у CSS рамка додається — тому 7; інакше кожен чип +2px */
	padding: 3px 7px;
	border: 1px solid var(--vv-surface);
	border-radius: 50px;
	background: none;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

body[class*="product-category-"] .category-page .ocf-selected-row .ocf-selected::after,
body[class*="product-category-"] .category-page .ocf-clear-all::after {
	content: "";
	position: static;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	background: var(--vv-x-muted) center / 22px no-repeat;
	transform: none;
}

body[class*="product-category-"] .category-page .ocf-btn.ocf-clear-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-link) !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
}

body[class*="product-category-"] .category-page .ocf-clear-all::after {
	background-image: var(--vv-x-link);
}

/* сортування: біла таблетка 181, шеврон 22 #9E9E9E (57:12388); список — біла панель з тінню, як у магазинів */
body[class*="product-category-"] .sort-selected {
	justify-content: space-between;
	width: 181px;
	padding: 6px 8px;
	border-radius: 50px;
	background: var(--vv-white);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

body[class*="product-category-"] .sort-selected::after {
	content: none;
}

body[class*="product-category-"] .sort-block span.sort-text {
	overflow: hidden;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 17px;
	text-overflow: ellipsis;
	text-transform: lowercase;
}

body[class*="product-category-"] .sort-selected .vv-icon {
	width: 22px;
	height: 22px;
	color: #9E9E9E;
	transition: transform .2s;
}

body[class*="product-category-"] .custom-sort.open .sort-selected .vv-icon {
	transform: rotate(180deg);
}

body[class*="product-category-"] .sort-options {
	min-width: 100%;
	padding: 4px 12px;
	border-radius: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .11);
}

body[class*="product-category-"] .sort-overlay.open .sort-options {
	padding: 4px 12px;
}

body[class*="product-category-"] .sort-option {
	flex-direction: row-reverse;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom-color: #EFEFEF;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}

/* радіо з мобільної шторки (57:12284): порожнє — рамка #DCDDDB, вибране — лайм з чорною крапкою 8 */
body[class*="product-category-"] .sort-block .sort-option-circle {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 1px solid var(--vv-field-border);
	border-radius: 50%;
	background: var(--vv-white);
}

body[class*="product-category-"] .sort-option.active .sort-option-circle {
	border: 0;
	background: var(--vv-brand);
}

body[class*="product-category-"] .sort-option.active .sort-option-circle::after {
	left: 6px;
	top: 6px;
	width: 8px;
	height: 8px;
	background: var(--vv-black);
}

/* сітка: колонка фільтра 259.16 (макет) + картки ≥210 через 4 — на 1680 виходить 6 по 218.8, на 1440 — 5 по 215 */
body[class*="product-category-"] .catalog-wrapper {
	grid-template-columns: 259.16px minmax(0, 1fr);
	gap: 8px;
	margin-top: 8px;
}

body[class*="product-category-"] .category-page .product-row {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 4px;
}

body[class*="product-category-"] .catalog-inner.pb-10 {
	padding-bottom: 0;
}

/* фільтр: білі блоки без радіуса через 4px, поля 12, заголовок 14 Medium (57:10747) */
body[class*="product-category-"] #column-left .ocf-filter {
	margin: 0 0 4px !important;
	padding: 12px;
	border-radius: 0;
	background: var(--vv-white);
	box-shadow: none;
}

/* !important — stylesheet.css 6939 (.col-module .ocf-filter-header) і 7724 (.ocf-content .ocf-value) ставлять свої з !important */
body[class*="product-category-"] #column-left .ocf-filter-header {
	margin: 0 0 12px !important;
	padding: 0;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

/* 20px, а не 1.4 (=19.6): Figma округлює текстовий бокс до 20, інакше по 5 блоках набігало 2px */
body[class*="product-category-"] #column-left .ocf-filter-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

body[class*="product-category-"] #column-left .ocf-active-label,
body[class*="product-category-"] #column-left .ocf-filter-header-append {
	display: none;
}

/* значення: чекбокс 20 + 8 + назва 14, кількість 12 #9E9E9E; рядки через 6 */
body[class*="product-category-"] #column-left .ocf-value {
	display: flex;
	align-items: center;
	min-height: 20px;
	margin: 0 0 6px !important;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.1;
}

/* останній рядок без відступу, щоб блок закінчувався полем 12 (значення лежать у .ocf-value-list-body); «Показати ще» — на 8 нижче */
body[class*="product-category-"] #column-left .ocf-value-list-body > .ocf-value:last-child,
body[class*="product-category-"] #column-left .ocf-multistore-online .ocf-value {
	margin-bottom: 0 !important;
}

body[class*="product-category-"] #column-left .ocf-value-name {
	color: var(--vv-black);
	font-size: 14px;
	line-height: 1.1;
}

/* Figma тісний рядок (1.1) кладе гліфи на 2px нижче, ніж браузер (заміряно по пікселях, 2026-09-29) — лише рядки з чекбоксами */
@media (min-width: 768px) {
	body[class*="product-category-"] #column-left .ocf-value-list .ocf-value-name {
		position: relative;
		top: 2px;
	}
}

/* у ядра OCFilter ще padding-left 6 — кількість стояла на 6px далі, ніж 4 від назви в макеті */
body[class*="product-category-"] #column-left .ocf-value-count {
	margin-left: 4px;
	padding: 0 !important;
	background: none !important;
	color: #9E9E9E;
	font-size: 12px;
	line-height: normal;
}

body[class*="product-category-"] #column-left .ocf-value-input-checkbox {
	position: relative;
	flex: 0 0 20px !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 8px 0 0 !important;
	border: 1px solid var(--vv-field-border) !important;
	border-radius: 0 !important;
	background: #FCFCFC !important;
}

body[class*="product-category-"] #column-left .ocf-value-input-checkbox::before,
body[class*="product-category-"] #column-left .ocf-value-input-checkbox::after {
	content: none !important;
}

body[class*="product-category-"] #column-left .ocf-selected .ocf-value-input-checkbox {
	border-color: var(--vv-brand) !important;
	background: var(--vv-brand) var(--vv-check) center / 20px no-repeat !important;
}

/* у вибраного рядка ядро OCFilter малює × — у макеті (Explorer, 57:10800) лише кількість */
body[class*="product-category-"] #column-left .ocf-selected .ocf-value-append::before,
body[class*="product-category-"] #column-left .ocf-selected .ocf-value-append::after {
	content: none !important;
}

/* спливна «Показати N товарів» біля значення (у макеті нема): панель як випадайка магазинів, кнопка — лайм як «Готово» */
body[class*="product-category-"] #column-left .ocf-popover {
	border: 0;
	border-radius: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .11);
}

body[class*="product-category-"] #column-left .ocf-search-btn-popover {
	border: 0;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

body[class*="product-category-"] #column-left .ocf-search-btn-popover.ocf-disabled {
	background: var(--vv-surface);
}

/* «Показати ще» — синє підкреслене 14, без числа й шеврона */
body[class*="product-category-"] #column-left .ocf-btn-show-values {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-link) !important;
	font-size: 14px;
	line-height: 20px;
	text-decoration: underline;
	text-underline-position: from-font;
}

body[class*="product-category-"] #column-left .ocf-btn-show-values .ocf-icon {
	display: none;
}

/* ціна: два поля 12px з рамкою 0.8 #DCDDDB, під ними повзунок: лайм між ручками, #DCDDDB поза ними, ручки 12 чорні з лаймовим кільцем */
body[class*="product-category-"] #column-left .ocf-slider .ocf-filter-header {
	margin-bottom: 14px !important;
	line-height: 1.1;
}

body[class*="product-category-"] #column-left .ocf-slider-input-group {
	display: flex;
	gap: 4px;
	margin: 0;
}

body[class*="product-category-"] #column-left .ocf-slider-input-group .ocf-form-control {
	flex: 1 0 0;
	min-width: 0;
	height: 33px;
	margin: 0;
	padding: 8px;
	border: .8px solid var(--vv-field-border) !important;
	border-radius: 0 !important;
	background: var(--vv-white);
	color: var(--vv-black);
	font-size: 12px;
	line-height: 1.4;
	box-shadow: none;
}

body[class*="product-category-"] #column-left .ocf-slider-input-group .ocf-input-group-addon {
	display: none;
}

/* зона повзунка 12 — як ручки: самі ручки абсолютні й місця в потоці не займають */
body[class*="product-category-"] #column-left .ocf-value-slider {
	margin: 14px 6px 0;
	padding: 5px 0 6px;
}

body[class*="product-category-"] #column-left .ocf-slider .ocf-filter-name {
	line-height: 15px;
}

body[class*="product-category-"] #column-left .ocf-noUi-target {
	height: 1px;
	border: 0;
	border-radius: 0;
	background: var(--vv-field-border);
	box-shadow: none;
}

/* у ядрі noUi база 18px — лаймова смуга заливала всю висоту */
body[class*="product-category-"] #column-left .ocf-noUi-base,
body[class*="product-category-"] #column-left .ocf-noUi-connects {
	height: 100%;
}

body[class*="product-category-"] #column-left .ocf-noUi-connect {
	background: var(--vv-brand) !important;
}

/* старий жовтий шар stylesheet.css 7773 — зі своєю висотою, лінія виходила товща за 1px */
body[class*="product-category-"] #column-left .ocf-content .ocf-noUi-connect::before {
	content: none !important;
}

/* absolute: з relative (так стоїть зараз) right рахувався не від кінця доріжки, ручки з'їжджали на 10px */
body[class*="product-category-"] #column-left .ocf-noUi-handle,
body[class*="product-category-"] .ocf-content .ocf-noUi-handle {
	position: absolute !important;
	left: auto !important;
	top: -5.5px !important;
	right: -6px !important;
	width: 12px !important;
	height: 12px !important;
	border: 4px solid var(--vv-brand) !important;
	border-radius: 50%;
	background: var(--vv-black) !important;
	box-shadow: none !important;
	cursor: pointer;
}

body[class*="product-category-"] #column-left .ocf-noUi-handle::before,
body[class*="product-category-"] #column-left .ocf-noUi-handle::after {
	content: none;
}

body[class*="product-category-"] #column-left .ocf-noUi-pips {
	display: none;
}

/* наявність у магазинах: поле пошуку з рамкою #DCDDDB (у фокусі чорна), випадайка з тінню, міста й адреси з чекбоксами */
body[class*="product-category-"] #column-left .ocf-multistore-control {
	margin: 0 0 12px;
}

body[class*="product-category-"] #column-left .custom-select-input {
	width: 100%;
	height: 36px;
	padding: 8px;
	border: 1px solid var(--vv-field-border);
	border-radius: 0;
	background: var(--vv-white);
	color: var(--vv-black);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: none;
}

body[class*="product-category-"] #column-left .custom-select-input::placeholder {
	color: #B9B9B9;
}

body[class*="product-category-"] #column-left .custom-select-input:focus {
	border: .8px solid var(--vv-black);
	outline: 0;
}

body[class*="product-category-"] #column-left .custom-select-wrapper::after {
	content: none;
}

/* поля 12 — на .results (прокручуваний список усередині), не на самій випадайці, інакше виходило 24 */
/* 2px під полем дає вже stylesheet.css (top: calc(100% + 2px)) */
body[class*="product-category-"] #column-left .ocf-multistore-dropdown {
	margin-top: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--vv-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .11);
}

/* у макеті скролбар лежить у правому полі 12 (3 від краю), контент іде до 12 від краю — інакше «…Стрийська 109» переносилось */
body[class*="product-category-"] #column-left .ocf-multistore-dropdown .results {
	max-height: 310px;
	padding: 12px 6px 12px 12px;
	border-right: 3px solid transparent;
}

/* скролбар як у макеті (57:11778): доріжка #F2F2F2, повзунок #D3D3D3 */
body[class*="product-category-"] #column-left .ocf-multistore-dropdown .results::-webkit-scrollbar {
	width: 3px;
	background-color: #F2F2F2;
}

body[class*="product-category-"] #column-left .ocf-multistore-dropdown .results::-webkit-scrollbar-thumb {
	background-color: #D3D3D3;
}

/* padding !important — stylesheet.css дає .ocf-city-head padding-top 12 з !important (заголовок був 30 замість 18) */
body[class*="product-category-"] #column-left .ocf-city-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 8px;
	padding: 0 !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
}

/* шеврон міста — SVG з макета 1:1 (57:11730, «Vector 34»: 9×5, stroke 1 #9E9E9E, круглі кінці): вгору — розгорнуте, вниз — згорнуте */
body[class*="product-category-"] #column-left .ocf-city-chevron {
	flex-shrink: 0;
	width: 9px;
	height: 5px;
	margin: 0;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5' fill='none'%3E%3Cpath d='M8.5 4.5L4.37097 0.5L0.5 4.5' stroke='%239E9E9E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 5px no-repeat;
	transform: none;
}

body[class*="product-category-"] #column-left .ocf-city-head[aria-expanded="false"] .ocf-city-chevron {
	transform: rotate(180deg);
}

body[class*="product-category-"] #column-left .ocf-city-values {
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-bottom: .8px solid var(--vv-field-border);
}

body[class*="product-category-"] #column-left .ocf-city-values .ocf-value {
	align-items: flex-start;
	margin-bottom: 8px !important;
	line-height: 1.3;
}

/* від останнього магазину до лінії 8 — це поле блоку міста */
body[class*="product-category-"] #column-left .ocf-city-values .ocf-value:last-child {
	margin-bottom: 0 !important;
}

body[class*="product-category-"] #column-left .ocf-city-values .ocf-value-name {
	line-height: 1.3;
}

/* пагінація: без стрілок, цифри 14 #1D1D1D через 16, поточна — біла в рамці #2B7AE8 (57:10890) */
body[class*="product-category-"] .category-page .pag-page {
	gap: 16px;
	margin: 16px 0 0;
	padding: 0;
}

body[class*="product-category-"] .category-page .pag-page .pag-btn {
	display: none;
}

body[class*="product-category-"] .category-page .pag-page li a,
body[class*="product-category-"] .category-page .pag-page li span {
	display: block;
	min-width: 0;
	padding: 0;
	color: #1D1D1D;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

body[class*="product-category-"] .category-page .pag-page li.active span {
	min-width: 22px;
	height: 22px;
	border: 1px solid var(--vv-link);
	background: var(--vv-white);
	color: var(--vv-black);
	text-align: center;
}

/* SEO-текст: білий блок, поля 12, текст 12/1.5, згорнуто 3 рядки, «Читати повністю» — підкреслене 14 (57:10896) */
body[class*="product-category-"] .category-page .custom-block-expand {
	margin: 24px 0 0;
	padding: 12px;
	border-radius: 0;
	background: var(--vv-white);
}

body[class*="product-category-"] .custom-block-expand .custom-block-expand-content {
	max-height: 54px;
	color: var(--vv-black);
	font-size: 12px;
	line-height: 1.5;
}

body[class*="product-category-"] .custom-block-expand.open .custom-block-expand-content {
	max-height: none;
}

body[class*="product-category-"] .custom-block-expand-content p,
body[class*="product-category-"] .custom-block-expand-content li {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}

body[class*="product-category-"] .custom-block-expand-content h2,
body[class*="product-category-"] .custom-block-expand-content h3 {
	margin: 12px 0 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

body[class*="product-category-"] .custom-block-expand-content a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

body[class*="product-category-"] .custom-block-expand-overlay {
	position: static;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
	text-decoration: underline;
	text-underline-position: from-font;
}

body[class*="product-category-"] .custom-block-expand-overlay img {
	display: none;
}

/* SEO-теги OCFilter під текстом (у макеті нема) — лишені: це єдині внутрішні посилання на SEO-сторінки фільтрів */
body[class*="product-category-"] .category-page .ocf-page-list-bottom {
	margin-top: 20px;
}

/* від останнього блоку до футера 20 (57:10730: SEO-блок закінчується на 1259, футер з 1279) */
body[class*="product-category-"] .category-page > .container {
	padding-bottom: 20px;
}

@media (max-width: 767px) {
	body[class*="product-category-"] .category-page > .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* крихти 6px під шапкою 48 (57:11784), в один рядок з прокруткою. Сторінка на мобілці стартує з 43 (на 5 під шапку),
	   тому поле 11 */
	body[class*="product-category-"] .category-page ul.breadcrumb {
		margin: 0 !important;
		padding: 11px 0 0;
		background: none;
		scrollbar-width: none;
	}

	body[class*="product-category-"] .category-page ul.breadcrumb::-webkit-scrollbar {
		display: none;
	}

	/* H1 16 SemiBold, кількість у тому ж рядку через 8 (57:11790) */
	body[class*="product-category-"] .category-page h1 {
		margin: 8px 0 0;
		font-size: 16px;
		line-height: 20px;
	}

	body[class*="product-category-"] .category-page h1 .product-total {
		margin-left: 4px;
	}

	body[class*="product-category-"] .category-page-header,
	body[class*="product-category-"] .vv-cat-filtered .category-page-header {
		margin: 12px 0 0;
	}

	/* «Фільтри» (сіра таблетка) + сортування 181 через 4, обидві 32 */
	body[class*="product-category-"] .category-page-header-right {
		display: flex !important;
		gap: 4px;
		width: 100%;
		margin: 0;
	}

	body[class*="product-category-"] .filter-btn.mobile {
		display: flex;
		flex: 1 0 0;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 32px;
		padding: 6px 10px;
		border: 0;
		border-radius: 50px;
		background: var(--vv-surface);
		color: var(--vv-black);
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
	}

	body[class*="product-category-"] .filter-btn.mobile .vv-icon {
		width: 20px;
		height: 20px;
		color: #9E9E9E;
	}

	body[class*="product-category-"] .sort-block {
		display: block !important;
		flex-shrink: 0;
	}

	body[class*="product-category-"] .sort-selected {
		height: 32px;
	}

	body[class*="product-category-"] .sort-selected .vv-icon {
		width: 20px;
		height: 20px;
	}

	/* колонка фільтра тут — панель поверх сторінки, сітка на всю ширину; gap 0 — порожня обгортка колонки інакше давала +8 над товарами */
	body[class*="product-category-"] .catalog-wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin-top: 12px;
	}

	body[class*="product-category-"] .category-page .product-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* панель фільтра (57:12298). stylesheet.css 8029–8154 для мобілки дає !important — тут теж.
	   Шапка 49 + лінія (16 + рядок 20 + 13) */
	body[class*="product-category-"] #column-left .ocf-header {
		padding: 16px 16px 13px !important;
		border-bottom: 1px solid #EFEFEF;
		color: var(--vv-black);
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 20px !important;
	}

	/* блоки з полями 16 і лінією на ширину контенту; активний блок stylesheet.css 8052 ставив інакше — заголовок з'їжджав.
	   Як у макеті: перший заголовок на 10 під лінією шапки, між ціною й виробником лінії нема (лише 16) */
	body[class*="product-category-"] #column-left .ocf-filter-list .ocf-filter,
	body[class*="product-category-"] #column-left .ocf-filter-list .ocf-filter.ocf-active {
		margin: 0 16px !important;
		padding: 16px 0 !important;
		border-top: 0 !important;
		border-bottom: 1px solid #EFEFEF !important;
		background: none !important;
	}

	/* 10 до першого заголовка вже дає тіло панелі */
	body[class*="product-category-"] #column-left .ocf-filter-list .ocf-filter:first-child {
		padding-top: 0 !important;
	}

	body[class*="product-category-"] #column-left .ocf-filter-list .ocf-filter.ocf-slider {
		padding-bottom: 0 !important;
		border-bottom: 0 !important;
	}

	body[class*="product-category-"] #column-left .ocf-filter-list .ocf-filter:last-child {
		border-bottom: 0 !important;
	}

	/* від заголовка до чипів 8 (у магазинів — 12, у ціни — 14, як на десктопі) */
	body[class*="product-category-"] #column-left .ocf-filter-list .ocf-filter:not(:first-child):not(.ocf-slider) .ocf-filter-header {
		margin-bottom: 8px !important;
	}

	body[class*="product-category-"] #column-left .ocf-close-mobile {
		color: var(--vv-link) !important;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
	}

	/* значення — чипи 28 (4 + 20 + 4) #EDEEEB через 4, вибраний — лайм (у макеті стану нема; як вибраний чекбокс) */
	body[class*="product-category-"] #column-left .ocf-open .ocf-value-list,
	body[class*="product-category-"] #column-left .ocf-open .ocf-value-list-body {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	body[class*="product-category-"] #column-left .ocf-open .ocf-value-list .ocf-value {
		height: 28px;
		min-height: 0;
		margin: 0 !important;
		padding: 4px 10px !important;
		border-radius: 50px !important;
		background-color: var(--vv-surface) !important;
		font-size: 14px;
		line-height: 20px;
	}

	body[class*="product-category-"] #column-left .ocf-open .ocf-value-list .ocf-value.ocf-selected {
		background-color: var(--vv-brand) !important;
	}

	body[class*="product-category-"] #column-left .ocf-open .ocf-value-list .ocf-value-name {
		line-height: 20px;
	}

	body[class*="product-category-"] #column-left .ocf-open .ocf-value-list .ocf-btn-show-values {
		flex-basis: 100%;
		margin-top: 4px;
	}

	/* старий мобільний css ховає кількість у всіх значень; у макеті панелі (57:12298) «онлайн (25)» її має, чипи — ні */
	body[class*="product-category-"] #column-left .ocf-open .ocf-multistore-online .ocf-value-append {
		display: inline;
	}

	/* у мобільній панелі поле магазинів світліше, ніж на десктопі (#EFEFEF проти #DCDDDB, 57:12298) */
	body[class*="product-category-"] #column-left .ocf-open .custom-select-input:not(:focus) {
		border-color: #EFEFEF;
	}

	body[class*="product-category-"] #column-left .ocf-noUi-base,
	body[class*="product-category-"] #column-left .ocf-noUi-connects {
		height: 100% !important;
	}

	/* мобільний css OCFilter: під полями ціни 20, у повзунка поля 0 14 0 9 — доріжка була вужча й нижча, ручки не на кінцях */
	body[class*="product-category-"] #column-left .ocf-slider-input-group {
		margin: 0 !important;
	}

	body[class*="product-category-"] #column-left .ocf-value-slider {
		margin: 14px 6px 0 !important;
		padding: 5px 0 6px !important;
	}

	/* «Показати N товарів» — лайм на всю ширину з полями 16, як «Готово» */
	body[class*="product-category-"] #column-left .ocf-footer {
		padding: 16px !important;
		background: var(--vv-white);
	}

	body[class*="product-category-"] #column-left .ocf-search-btn-static {
		width: 100%;
		padding: 12px 20px !important;
		border: 0;
		border-radius: 0 !important;
		background-color: var(--vv-brand) !important;
		color: var(--vv-black) !important;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
	}

	body[class*="product-category-"] .category-page .custom-block-expand {
		margin-top: 12px;
		padding: 8px;
	}

	body[class*="product-category-"] .custom-block-expand .custom-block-expand-content {
		max-height: 90px;
	}

	/* шторка сортування (57:12277): без радіуса, лайм замість #FFCC00, тап застосовує одразу (скрипт у category.twig) */
	body[class*="product-category-"] .sort-overlay {
		background: rgba(158, 158, 158, .5);
	}

	body[class*="product-category-"] .sort-wrapper {
		border-radius: 0;
		box-shadow: 0 0 8px rgba(0, 0, 0, .04);
	}

	body[class*="product-category-"] .sort-options,
	body[class*="product-category-"] .sort-overlay.open .sort-options {
		padding: 0 !important;
		box-shadow: none;
	}

	/* 12 + 20 + 11 + лінія 1 = 44: у Figma лінія всередині рядка 44, у CSS border додавався 45-м пікселем */
	body[class*="product-category-"] .sort-option {
		padding: 12px 0 11px;
		font-size: 16px;
		line-height: 20px;
	}

	body[class*="product-category-"] .sort-option:last-child {
		padding-bottom: 12px;
	}

	/* ручка шторки: 34×3 на 13 від верху (57:12278) */
	body[class*="product-category-"] .sort-wrapper::before {
		top: 13px;
		height: 3px;
	}

	body[class*="product-category-"] .sort-title {
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
	}

	body[class*="product-category-"] .sort-btn {
		display: none !important;
	}
}

/* ---------- Сторінка товару (Figma, сторінка «Картка товару» 70:8413: десктоп 70:13512, мобілка 70:14337) ---------- */
/* Усе під body[class*="product-product-"]. Розмітку сторінки на ~40% складають OCMOD-вставки (hpmodel, multistore,
   hint_at_gift) — їхні іконки перефарбовано масками поверх наявних img, а не правкою XML. Якорі OCMOD у product.twig
   не чіпати (список — 11-rebranding.md). hpmodel при зміні варіанта замінює #product, .product-left, h1, .breadcrumb,
   #tab-attribute, #tab-description — стилі мають триматися на цих самих класах. */

:root {
	--vv-tab-blue: #0074EB;
	/* іконки кіту для масок (шляхи — ті самі, що в спрайті) */
	/* «додати в кошик» — кошик із «+» (shopping-basket-add-03 від дизайнера, vv-basket-add у спрайті); після
	   успішного додавання на 2 с — кошик із галочкою (basket, 9:12114; vv-basket) — клас .is-added з футера */
	--vv-i-basket-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.5 8H1.5'/%3E%3Cpath d='M18 8L15 3'/%3E%3Cpath d='M6 8L9 3'/%3E%3Cpath d='M19 15V21M16 18H22'/%3E%3Cpath d='M14 20H9.583C7.155 20 5.942 20 5.102 19.289C4.263 18.578 4.064 17.381 3.664 14.986L2.5 8H21.5L20.75 12.5'/%3E%3C/svg%3E");
	--vv-i-basket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12V16'/%3E%3Cpath d='M8 12V16'/%3E%3Cpath d='M22.5 8H1.5'/%3E%3Cpath d='M18 8L15 3'/%3E%3Cpath d='M6 8L9 3'/%3E%3Cpath d='M15 19C15 19 16 19 17 21C17 21 19.1765 16 22 15'/%3E%3Cpath d='M12 20H9.58276C7.15525 20 5.94149 20 5.10226 19.2891C4.26302 18.5781 4.06348 17.3809 3.6644 14.9864L2.5 8H21.5L20.8333 12'/%3E%3C/svg%3E");
	--vv-i-circle-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.433 12C22.433 17.5228 17.9558 22 12.433 22C6.91013 22 2.43298 17.5228 2.43298 12C2.43298 6.47715 6.91013 2 12.433 2C17.9558 2 22.433 6.47715 22.433 12Z'/%3E%3Cpath d='M12.433 9.00014V16.0002M15.933 11.5C15.933 11.5 13.3553 8.00001 12.433 8C11.5107 7.99999 8.93298 11.5 8.93298 11.5'/%3E%3C/svg%3E");
	--vv-i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.933 18C15.933 19.933 14.366 21.5 12.433 21.5C10.5 21.5 8.93298 19.933 8.93298 18'/%3E%3Cpath d='M19.6641 18H5.20185C4.22493 18 3.43298 17.208 3.43298 16.2311C3.43298 15.762 3.61934 15.3121 3.95107 14.9803L4.5543 14.3771C5.11691 13.8145 5.43298 13.0514 5.43298 12.2558V9.5C5.43298 5.63401 8.56699 2.5 12.433 2.5C16.299 2.5 19.433 5.634 19.433 9.5V12.2558C19.433 13.0514 19.7491 13.8145 20.3117 14.3771L20.9149 14.9803C21.2466 15.3121 21.433 15.762 21.433 16.2311C21.433 17.208 20.641 18 19.6641 18Z'/%3E%3C/svg%3E");
	--vv-i-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M14.5 10C14.0697 8.55426 12.5855 7.5 11 7.5C9.067 7.5 7.5 9.067 7.5 11C7.5 12.7632 8.80385 14.2574 10.5 14.5'/%3E%3Cpath d='M19.9504 10C19.4697 5.53446 15.5596 2 11 2C6.12944 2 2 6.03298 2 10.9258C2 15.9137 6.2039 19.3616 10.073 21.7567C10.3555 21.9162 10.675 22 11 22C11.325 22 11.6445 21.9162 11.927 21.7567C12.1816 21.6009 12.4376 21.4403 12.6937 21.2748'/%3E%3Cpath stroke-linecap='butt' d='M17.5 12C19.9353 12 22 14.0165 22 16.4629C22 18.9482 19.9017 20.6924 17.9635 21.8783C17.8223 21.9581 17.6625 22 17.5 22C17.3375 22 17.1777 21.9581 17.0365 21.8783C15.1019 20.6808 13 18.9568 13 16.4629C13 14.0165 15.0647 12 17.5 12Z'/%3E%3Cpath stroke-linejoin='round' d='M17.625 16.5H17.5M17.75 16.5C17.75 16.6381 17.6381 16.75 17.5 16.75C17.3619 16.75 17.25 16.6381 17.25 16.5C17.25 16.3619 17.3619 16.25 17.5 16.25C17.6381 16.25 17.75 16.3619 17.75 16.5Z'/%3E%3C/svg%3E");
	--vv-i-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9C6 9 10.4189 15 12 15C13.5812 15 18 9 18 9' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* крихти: 16px під шапкою, до табів 12 (70:13516) */
body[class*="product-product-"] ul.breadcrumb {
	margin: 0 !important;
	padding: 16px 0 0;
	background: none;
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
}

body[class*="product-product-"] .breadcrumb li,
body[class*="product-product-"] .breadcrumb a {
	color: var(--vv-muted);
	font-size: 12px;
	line-height: 15px;
}

body[class*="product-product-"] .breadcrumb li {
	display: inline-flex;
	align-items: baseline;
}

body[class*="product-product-"] .breadcrumb li + li::before {
	content: "·";
	width: auto;
	height: auto;
	margin: 0 4px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--vv-muted);
	font-weight: 700;
	vertical-align: baseline;
}

/* таби: білий рядок 60, текст 16 з кроком 36, активний Medium синій з лінією 2px під текстом, що на 1px виходить
   за рядок (70:13523). Порядок як у макеті — «Доставка і оплата» останньою (у розмітці вона перед «Відгуками») */
body[class*="product-product-"] #product-nav {
	margin-top: 12px;
}

body[class*="product-product-"] #product-nav .flex-tab {
	height: 60px;
	margin: 0 0 16px;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: var(--vv-white);
	overflow: visible;
}

body[class*="product-product-"] #product-nav .flex-tab li:has(> a[href="#tab-0"]) {
	order: 1;
}

body[class*="product-product-"] .tab-block .product-nav a {
	padding: 20px 18px;
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}

body[class*="product-product-"] .flex-tab li.active a {
	color: var(--vv-tab-blue);
	font-weight: 500;
}

body[class*="product-product-"] .flex-tab li.active a::after {
	left: 18px;
	right: 18px;
	bottom: -1px;
	height: 2px;
	background: var(--vv-tab-blue);
}

/* дві колонки 878 + 706 через 16 (70:13531): у макеті контейнер 1601, у нас 1600 — зайвий піксель знято з лівої */
body[class*="product-product-"] .product-card-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 878.04fr) minmax(0, 705.96fr);
	gap: 16px;
	align-items: start;
	margin-bottom: 20px;
}

body[class*="product-product-"] .product-card-wrapper > .product-left,
body[class*="product-product-"] .product-card-wrapper > .product-right {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
}

/* галерея: мініатюри 72 з кроком 8, до фото 16; фото — біле поле 790×779, знімок по центру з полями 25 (70:13533) */
body[class*="product-product-"] .product-image-section {
	margin-bottom: 16px;
}

body[class*="product-product-"] .product-image-section .over {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

body[class*="product-product-"] #image-additional {
	float: none;
	flex: 0 0 72px;
	width: 72px;
	margin: 0;
}

body[class*="product-product-"] #image-additional .slick-slide {
	margin-bottom: 8px;
}

body[class*="product-product-"] #image-additional li.image-additional {
	width: 72px;
	height: 72px;
	border: 1px solid transparent;
	background: var(--vv-white);
	overflow: hidden;
	cursor: pointer;
}

body[class*="product-product-"] #image-additional .slick-current {
	border-color: var(--vv-black);
}

body[class*="product-product-"] .image-additional.slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body[class*="product-product-"] .one-image-wrapper {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

body[class*="product-product-"] #one-image,
body[class*="product-product-"] #one-image.left-thumb {
	float: none;
	width: 100%;
	margin: 0;
	border-radius: 0;
	background: var(--vv-white);
}

body[class*="product-product-"] #one-image .slick-slide {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 779px;
	padding: 25px;
	filter: none;
}

body[class*="product-product-"] #one-image .slick-slide img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
}

/* Arrow Button (кіт) у стані hover, як у макеті: #DCDED7, стрілка 22 з прозорістю 0.7, по 16 від країв фото */
body[class*="product-product-"] .product-image-section .slick-arrow,
body[class*="product-product-"] #complect .slick-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 2px;
	border-radius: 0;
	background: var(--vv-surface-hover);
	color: var(--vv-black);
	z-index: 2;
}

body[class*="product-product-"] .product-image-section .slick-arrow.arrow-left {
	left: 16px;
}

body[class*="product-product-"] .product-image-section .slick-arrow.arrow-right {
	right: 16px;
}

body[class*="product-product-"] .product-image-section .slick-arrow img,
body[class*="product-product-"] #complect .slick-arrow img {
	display: none;
}

body[class*="product-product-"] .product-image-section .slick-arrow::before,
body[class*="product-product-"] #complect .slick-arrow::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	opacity: 0.7;
	-webkit-mask: var(--vv-arrow-right) center / 22px no-repeat;
	mask: var(--vv-arrow-right) center / 22px no-repeat;
}

body[class*="product-product-"] .product-image-section .slick-arrow.arrow-left::before,
body[class*="product-product-"] #complect .slick-arrow.arrow-left::before {
	-webkit-mask-image: var(--vv-arrow-left);
	mask-image: var(--vv-arrow-left);
}

body[class*="product-product-"] .product-image-section .slick-arrow:hover::before,
body[class*="product-product-"] #complect .slick-arrow:hover::before {
	opacity: 1;
}

/* стікери на фото — ті самі маркери, що в картках, кеглем 16 (у макеті «Шалена знижка» на 20/22 від кута) */
body[class*="product-product-"] .product-stickers {
	top: 22px;
	left: 20px;
	gap: 8px;
}

body[class*="product-product-"] .product-stickers .vv-sticker {
	font-size: 16px;
}

/* коротка характеристика під фото: білий блок, 18 SemiBold, пари «назва значення» через «·» (70:13554) */
body[class*="product-product-"] #product-attr .product-section {
	margin: 0;
	padding: 20px;
	border-radius: 0;
}

body[class*="product-product-"] .mini-attributes h2 {
	margin: 0 0 20px;
	color: var(--vv-black);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

body[class*="product-product-"] .mini-attributes .attribute-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

body[class*="product-product-"] .mini-attributes .attribute-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.3;
}

body[class*="product-product-"] .mini-attributes .attribute-item::before {
	content: none;
}

/* стара тема малює розділювач абсолютною крапкою 3px під padding-right 21 — тут це текстовий «·» Bold, як у макеті */
body[class*="product-product-"] .mini-attributes .attribute-row .attribute-item {
	position: static;
	padding: 0;
}

body[class*="product-product-"] .mini-attributes .attribute-row .attribute-item:not(:last-child)::after {
	content: "·";
	position: static;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--vv-muted);
	font-weight: 700;
	transform: none;
}

body[class*="product-product-"] .mini-attributes .attribute-name {
	color: var(--vv-muted);
	font-weight: 400;
}

body[class*="product-product-"] .mini-attributes .attribute-text {
	color: var(--vv-black);
	font-weight: 500;
}

/* права колонка: картка покупки p20, групи через 28; далі «Натякнути», бренд, комплектуючі через 8 (70:13588) */
body[class*="product-product-"] .product-right .product-section {
	margin: 0 0 8px;
	border-radius: 0;
}

body[class*="product-product-"] #product-info-data {
	padding: 20px;
}

body[class*="product-product-"] .product-right h1 {
	margin: 0 0 12px;
	color: var(--vv-black);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}

body[class*="product-product-"] .product-top.pc {
	align-items: center;
	height: 24px;
	margin: 0 0 28px;
}

body[class*="product-product-"] .product-top .reviews a,
body[class*="product-product-"] .product-top .sku {
	gap: 4px;
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

body[class*="product-product-"] .product-top .sku {
	gap: 6px;
}

body[class*="product-product-"] .product-top .vv-icon {
	width: 22px;
	height: 22px;
}

body[class*="product-product-"] .product-top .reviews .vv-icon {
	color: var(--vv-star);
}

/* варіанти (hpmodel): «Колір: значення» 14/1.4, плитки 72.39 через 8 на #F5F3F1 з рамкою #E1E1E1, вибрана — чорна
   рамка; фото з білим фоном множенням лягає на #F5F3F1, як у макеті (70:13603). Старі правила x001 з !important */
body[class*="product-product-"] #hpmodel {
	margin: 0 0 8px;
}

/* між групами варіантів (смак → міцність) 28 (70:9393) дає gap теми — .product-section #hpmodel { display: flex; gap: 28px },
   тож власного margin між групами нема */
body[class*="product-product-"] #hpmodel .hpm-group {
	margin: 0;
}

body[class*="product-product-"] .hpm-selected-display {
	margin: 0 0 16px;
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

body[class*="product-product-"] .hpm-selected-display .hpm-selected-value {
	color: var(--vv-black);
	font-weight: 600;
}

body[class*="product-product-"] #hpmodel .hpm-type-images {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

body[class*="product-product-"] #hpmodel .hpm-type-images .hpm-item {
	position: relative;
	float: none;
	width: 72.39px;
	height: 72.39px;
	max-width: none;
	margin: 0;
	padding: 0 !important;
	border: 1px solid #E1E1E1 !important;
	border-radius: 0 !important;
	background: #F5F3F1;
	overflow: hidden;
}

body[class*="product-product-"] #hpmodel .hpm-type-images .hpm-item.active {
	border-color: var(--vv-black) !important;
	background: #F5F3F1;
}

body[class*="product-product-"] #hpmodel .hpm-type-images .hcol-image {
	width: 100%;
	height: 100%;
	padding: 0;
}

body[class*="product-product-"] #hpmodel .hcol-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

body[class*="product-product-"] #hpmodel .hpm-type-images .hpm-item.no-stock {
	background: rgba(245, 243, 241, 0.3);
}

body[class*="product-product-"] #hpmodel .hpm-type-images .hpm-item.no-stock > div {
	opacity: 0.2;
	filter: none;
}

body[class*="product-product-"] #hpmodel .hpm-type-images .hpm-item.no-stock::after {
	background: #E1E1E1;
}

/* наявність 14/1.4: «В наявності:» Medium кольором статусу (колір — у мовному файлі), решта #898E86 */
body[class*="product-product-"] .stock-info {
	margin: 0 0 28px;
	color: var(--vv-muted);
	font-size: 14px;
	line-height: 1.4;
}

body[class*="product-product-"] .stock-info span {
	font-weight: 500;
}

/* ціна 36 Medium, «₴» Regular замість « грн» (його дописує x001 у span); бонус — сірий чип угорі справа (70:13629) */
body[class*="product-product-"] .product-right .price-block {
	align-items: flex-start;
	gap: 4px;
	margin: 0 0 20px;
}

body[class*="product-product-"] .product-right .price-block .price {
	color: var(--vv-black);
	font-size: 36px;
	font-weight: 500;
	line-height: 42px;
}

/* line-height 0 — інакше порожній span з успадкованим рядком 42 роздував блок ціни до 55 */
body[class*="product-product-"] .price-block .price > span {
	font-size: 0;
	line-height: 0;
}

body[class*="product-product-"] .price-block .price > span::after {
	content: "₴";
	font-size: 36px;
	font-weight: 400;
}

body[class*="product-product-"] .product-right .price-block .price-old {
	margin: 0;
	color: #B5B5B5;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	text-decoration: line-through;
}

body[class*="product-product-"] .price-block .price-old > span {
	font-size: 0;
	line-height: 0;
}

body[class*="product-product-"] .price-block .price-old > span::after {
	content: "₴";
	font-size: 16px;
}

body[class*="product-product-"] .product-right .price-block .price-new {
	color: var(--vv-red);
}

body[class*="product-product-"] .product-right .price-block .reward {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding: 6px 8px;
	border-radius: 0;
	background: var(--vv-surface);
	color: #211A23;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
}

body[class*="product-product-"] .price-block .reward .vv-icon {
	width: 22px;
	height: 22px;
	color: var(--vv-black);
}

/* кількість 103 (мінус і плюс по 28 — знаки 20 Regular), «Додати в кошик» 60 лайм, серце 60 на лаймі 16% (70:13637) */
body[class*="product-product-"] .product-buttons {
	gap: 8px;
	margin: 0 0 12px;
}

body[class*="product-product-"] .product-right .qty {
	width: 103px;
	height: 60px;
	column-gap: 0;
	border: 1px solid #E1E1E1;
	border-radius: 0;
	font-weight: 400;
}

body[class*="product-product-"] .product-right .qty div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 58px;
	margin: 0;
}

body[class*="product-product-"] .qty div.minus::before,
body[class*="product-product-"] .qty div.plus::before {
	content: "-";
	position: static;
	width: auto;
	margin: 0;
	border: 0;
	color: var(--vv-black);
	font-size: 20px;
	line-height: 24px;
}

body[class*="product-product-"] .qty div.plus::before {
	content: "+";
}

body[class*="product-product-"] .qty div.plus::after {
	content: none;
}

body[class*="product-product-"] .product-right .qty input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 58px;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
}

body[class*="product-product-"] .product-right .product-buttons .made-btn {
	gap: 8px;
	height: 60px;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

/* іконки кнопок — з кіту, маскою поверх старих img (кнопку вставляє z_hpm__madeshop) */
body[class*="product-product-"] #product .product-buttons .made-btn > img {
	display: none;
}

body[class*="product-product-"] #product .product-buttons .made-btn::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--vv-i-basket-add) center / 24px no-repeat;
	mask: var(--vv-i-basket-add) center / 24px no-repeat;
}

/* «Оберіть колір девайсу вище» (70:15246): #D1D3CC, стрілка в колі */
body[class*="product-product-"] #product .product-buttons #button-cart-nostock.no-parent-button {
	background: #D1D3CC !important;
	border: 0 !important;
	color: var(--vv-black) !important;
}

body[class*="product-product-"] #product .product-buttons .no-parent-button::before {
	-webkit-mask-image: var(--vv-i-circle-arrow-up);
	mask-image: var(--vv-i-circle-arrow-up);
}

/* «Повідомити про наявність» (70:15249): біла з лаймовою рамкою, дзвіночок */
body[class*="product-product-"] #product .product-buttons .btn-notify,
body[class*="product-product-"] #product .product-buttons .btn-notifyed {
	background: var(--vv-white) !important;
	border: 1px solid var(--vv-brand) !important;
	color: var(--vv-black) !important;
}

body[class*="product-product-"] #product .product-buttons .btn-notify::before {
	-webkit-mask-image: var(--vv-i-bell);
	mask-image: var(--vv-i-bell);
}

body[class*="product-product-"] #product .product-buttons .btn-notifyed::before,
body[class*="product-product-"] #product .product-buttons .btn-discontinued::before {
	content: none;
}

body[class*="product-product-"] #product .product-buttons .btn-notifyed svg {
	width: 24px;
	height: 24px;
	margin: 0;
}

body[class*="product-product-"] .group-rad .wishlist {
	width: 60px;
	height: 60px;
	border-radius: 0;
	background: rgba(231, 241, 39, 0.16);
}

body[class*="product-product-"] .group-rad .wishlist svg {
	width: 24px;
	height: 24px;
	color: var(--vv-black);
}

/* «Потрібні комплектуючі?» 53 на #FBFDDC; «Є в наявності в N магазинах» 53 на #EDEEEB (70:13654, 70:13660) */
body[class*="product-product-"] .need-complect-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 53px;
	margin: 0;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: #FBFDDC;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

/* #product в селекторі — інлайн x001 має #product .btn svg{20px; margin-top:-3px} */
body[class*="product-product-"] #product .need-complect-btn .vv-icon {
	width: 24px;
	height: 24px;
	margin: 0;
}

body[class*="product-product-"] .product-stock-count {
	gap: 10px;
	margin: 12px 0 0;
	padding: 10px;
	border-radius: 0;
	background: var(--vv-surface);
	color: rgba(29, 25, 19, 0.51);
	font-size: 12px;
	line-height: 14px;
}

body[class*="product-product-"] .product-stock-count > img {
	display: none;
}

body[class*="product-product-"] .product-stock-count::before,
body[class*="product-product-"] .product-stock-count::after {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background-color: var(--vv-muted);
	-webkit-mask: var(--vv-i-location) center / 24px no-repeat;
	mask: var(--vv-i-location) center / 24px no-repeat;
}

body[class*="product-product-"] .product-stock-count::after {
	background-color: var(--vv-black);
	-webkit-mask-image: var(--vv-arrow-right);
	mask-image: var(--vv-arrow-right);
}

body[class*="product-product-"] .product-stock-content h3 {
	margin: 0;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
}

/* нижній відступ правої колонки — лише від сітки (20 до «З цим товаром купують»), без margin останнього блоку */
body[class*="product-product-"] .product-right > :last-child {
	margin-bottom: 0;
}

/* «Натякнути на подарунок» 56 на #EBE5FF (стилі модуля — інлайном у <body>, тож специфічніший селектор) */
body[class*="product-product-"] .product-right .gift-btn {
	height: 56px;
	margin: 0 0 8px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: #EBE5FF;
	color: #221F1F;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

body[class*="product-product-"] .product-right .gift-btn img {
	width: 24px;
	height: 24px;
}

/* бренд 56: лого 22 заввишки, назва 14 SemiBold, «Усі товари бренду» 14 Medium з підкресленням */
body[class*="product-product-"] .product-right .manufacturer-block {
	height: 56px;
	padding: 0 20px;
	color: #221F1F;
	font-size: 14px;
	font-weight: 600;
	line-height: 19.6px;
}

body[class*="product-product-"] .manufacturer-block .irow {
	gap: 8px;
}

body[class*="product-product-"] .manufacturer-block img {
	width: auto;
	height: 22px;
	max-height: 22px;
}

body[class*="product-product-"] .manufacturer-block a {
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-underline-position: from-font;
}

/* комплектуючі: заголовок 18, картки 262×96 через 8 з рамкою 0.5 #E1E1E1, праворуч біле затухання (70:13693) */
body[class*="product-product-"] #tab-complect.product-section {
	position: relative;
	padding: 20px;
}

body[class*="product-product-"] #tab-complect h2 {
	margin: 0 0 12px;
	color: #221F1F;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

body[class*="product-product-"] #tab-complect::after {
	content: "";
	position: absolute;
	top: 54px;
	right: 0;
	width: 125.52px;
	height: 116.92px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--vv-white));
	pointer-events: none;
	z-index: 1;
}

body[class*="product-product-"] #complect .slick-list {
	margin-right: -8px;
}

body[class*="product-product-"] #complect .slick-slide {
	padding-right: 8px;
}

body[class*="product-product-"] #complect .slick-arrow {
	display: none !important;
}

/* стара тема: .product-layout{padding:0 8px 5px 0 !important} — лишаємо тільки проміжок між картками (слайд = .product-layout) */
body[class*="product-product-"] #complect .product-layout {
	padding: 0 8px 0 0 !important;
}

body[class*="product-product-"] .mini-product-thumb {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	height: 96px;
	min-height: 0;
	padding: 8px;
	border: 0.5px solid #E1E1E1;
	border-radius: 0;
	background: var(--vv-white);
}

body[class*="product-product-"] .mini-product-thumb-top {
	display: flex;
	align-items: center;
	gap: 8px;
}

body[class*="product-product-"] .mini-product-thumb .image {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: 0;
}

body[class*="product-product-"] .mini-product-thumb .image img {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
}

body[class*="product-product-"] .mini-product-thumb .h4 {
	flex: 1 1 auto;
	max-height: 46.8px;
	margin: 0;
	overflow: hidden;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

body[class*="product-product-"] .mini-product-thumb .h4 a {
	color: var(--vv-black);
}

body[class*="product-product-"] .mini-product-thumb .action-block {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

body[class*="product-product-"] .mini-product-thumb .price {
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1;
}

body[class*="product-product-"] .mini-product-thumb .price .current-price {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1;
}

body[class*="product-product-"] .mini-product-thumb .price span > span {
	font-size: 0;
	line-height: 0;
}

body[class*="product-product-"] .mini-product-thumb .price span > span::after {
	content: "₴";
	font-size: 14px;
	font-weight: 400;
}

body[class*="product-product-"] .mini-product-thumb .c-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 4px;
	border: 0;
	border-radius: 0;
	background: var(--vv-brand);
}

body[class*="product-product-"] .mini-product-thumb .c-icon svg {
	display: none;
}

body[class*="product-product-"] .mini-product-thumb .c-icon::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: var(--vv-black);
	-webkit-mask: var(--vv-i-basket-add) center / 20px no-repeat;
	mask: var(--vv-i-basket-add) center / 20px no-repeat;
}

body[class*="product-product-"] .mini-product-thumb .btn-notify.c-icon::before {
	-webkit-mask-image: var(--vv-i-bell);
	mask-image: var(--vv-i-bell);
}

/* обгортки старих стікерів лишились (на них тримається Hot Friday PNG) — під маркерами без фону й полів */
body[class*="product-product-"] .product-sticker:has(.vv-sticker) {
	width: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	line-height: normal;
}

/* комплектуючі гортаються картками фіксованої ширини: 262 + 8 проміжок (slick variableWidth) */
body[class*="product-product-"] #complect .slick-slide {
	width: 270px;
}

/* ---------- Сторінка товару: секції під верхнім блоком (70:13740 … 70:14249) ---------- */

:root {
	--vv-i-thumbs-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.43298 12.5C2.43298 11.3954 3.32841 10.5 4.43298 10.5C6.08983 10.5 7.43298 11.8431 7.43298 13.5V17.5C7.43298 19.1569 6.08983 20.5 4.43298 20.5C3.32841 20.5 2.43298 19.6046 2.43298 18.5V12.5Z'/%3E%3Cpath d='M15.9117 7.80626L15.6454 8.66634C15.4272 9.37111 15.3181 9.72349 15.402 10.0018C15.4699 10.2269 15.6189 10.421 15.822 10.5487C16.073 10.7065 16.4527 10.7065 17.2121 10.7065H17.6161C20.1862 10.7065 21.4712 10.7065 22.0782 11.4673C22.1475 11.5542 22.2092 11.6467 22.2626 11.7437C22.7295 12.5921 22.1987 13.7351 21.137 16.0211C20.1627 18.1189 19.6755 19.1678 18.771 19.7852C18.6835 19.8449 18.5935 19.9013 18.5013 19.9541C17.549 20.5 16.3692 20.5 14.0094 20.5H13.4976C10.6387 20.5 9.20926 20.5 8.32112 19.6395C7.43298 18.7789 7.43298 17.3939 7.43298 14.6239V13.6503C7.43298 12.1946 7.43298 11.4668 7.69132 10.8006C7.94966 10.1344 8.44433 9.58664 9.43367 8.49112L13.5251 3.96056C13.6277 3.84694 13.679 3.79012 13.7243 3.75075C14.1465 3.38328 14.7982 3.42464 15.1674 3.84235C15.207 3.8871 15.2502 3.94991 15.3366 4.07554C15.4718 4.27205 15.5394 4.37031 15.5984 4.46765C16.1258 5.33913 16.2854 6.37436 16.0438 7.35715C16.0168 7.46692 15.9818 7.5801 15.9117 7.80626Z'/%3E%3C/svg%3E");
	--vv-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.0507 21.367C13.6171 21.773 13.0374 22 12.4341 22C11.8308 22 11.2512 21.773 10.8175 21.367C6.846 17.626 1.52374 13.4469 4.11925 7.37966C5.52261 4.09916 8.89132 2 12.4341 2C15.9769 2 19.3456 4.09916 20.749 7.37966C23.3412 13.4393 18.032 17.6389 14.0507 21.367Z' stroke='%23000' stroke-width='1.5' /%3E%3Cpath d='M15.933 11C15.933 12.933 14.366 14.5 12.433 14.5C10.5 14.5 8.93298 12.933 8.93298 11C8.93298 9.067 10.5 7.5 12.433 7.5C14.366 7.5 15.933 9.067 15.933 11Z' stroke='%23000' stroke-width='1.5' /%3E%3C/svg%3E");
	--vv-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.433 22C17.9558 22 22.433 17.5228 22.433 12C22.433 6.47715 17.9558 2 12.433 2C6.91014 2 2.43298 6.47715 2.43298 12C2.43298 17.5228 6.91014 22 12.433 22Z' stroke='%23000' stroke-width='1.5' /%3E%3Cpath d='M12.433 8V12L14.433 14' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
	--vv-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11.4397 2.87015L12.9062 5.8274C13.1062 6.23906 13.6394 6.63391 14.0894 6.70952L16.7474 7.15479C18.4473 7.44044 18.8472 8.68383 17.6223 9.91041L15.5559 11.9939C15.2059 12.3467 15.0143 13.0272 15.1226 13.5146L15.7142 16.0937C16.1808 18.1352 15.1059 18.925 13.3145 17.858L10.8231 16.371C10.3732 16.1022 9.63158 16.1022 9.17325 16.371L6.68189 17.858C4.89875 18.925 3.81554 18.1268 4.28216 16.0937L4.87376 13.5146C4.98207 13.0272 4.79043 12.3467 4.44047 11.9939L2.37403 9.91041C1.1575 8.68383 1.54912 7.44044 3.24893 7.15479L5.90697 6.70952C6.34859 6.63391 6.88187 6.23906 7.08184 5.8274L8.54833 2.87015C9.34825 1.26551 10.6481 1.26551 11.4397 2.87015Z'/%3E%3C/svg%3E");
}

/* каруселі «З цим товаром купують» і «Ви дивились»: заголовок 18 SemiBold, до карток 12, картки 225 через 4 (70:13740) */
body[class*="product-product-"] .related-swiper .adaptive-h2,
body[class*="product-product-"] .pbottom .adaptive-h2 {
	margin: 0 0 12px;
	color: var(--vv-black);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

body[class*="product-product-"] .related-swiper,
body[class*="product-product-"] .pbottom .m-section {
	margin: 0 0 8px;
}

body[class*="product-product-"] .related-swiper .swiper-slide,
body[class*="product-product-"] .pbottom .swiper-slide {
	padding: 0 !important;
}

body[class*="product-product-"] .related-swiper .swiper-viewport,
body[class*="product-product-"] .related-swiper .swiper-container,
body[class*="product-product-"] .related-swiper .swiper-slide,
body[class*="product-product-"] .pbottom .swiper-viewport,
body[class*="product-product-"] .pbottom .swiper-container,
body[class*="product-product-"] .pbottom .swiper-slide {
	border-radius: 0 !important;
}

body[class*="product-product-"] .related-swiper .slick-arrow,
body[class*="product-product-"] .pbottom .slick-arrow {
	width: 26px;
	height: 26px;
	padding: 2px;
	border-radius: 0;
	background: var(--vv-surface);
	color: var(--vv-black);
}

body[class*="product-product-"] .related-swiper .slick-arrow:hover,
body[class*="product-product-"] .pbottom .slick-arrow:hover {
	background: var(--vv-surface-hover);
}

body[class*="product-product-"] .related-swiper .slick-arrow.arrow-left,
body[class*="product-product-"] .pbottom .slick-arrow.arrow-left {
	left: 0;
}

body[class*="product-product-"] .related-swiper .slick-arrow.arrow-right,
body[class*="product-product-"] .pbottom .slick-arrow.arrow-right {
	right: 0;
}

body[class*="product-product-"] .related-swiper .slick-arrow img,
body[class*="product-product-"] .pbottom .slick-arrow img {
	display: none;
}

body[class*="product-product-"] .related-swiper .slick-arrow::before,
body[class*="product-product-"] .pbottom .slick-arrow::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	opacity: 0.4;
	-webkit-mask: var(--vv-arrow-right) center / 22px no-repeat;
	mask: var(--vv-arrow-right) center / 22px no-repeat;
}

body[class*="product-product-"] .related-swiper .slick-arrow.arrow-left::before,
body[class*="product-product-"] .pbottom .slick-arrow.arrow-left::before {
	-webkit-mask-image: var(--vv-arrow-left);
	mask-image: var(--vv-arrow-left);
}

body[class*="product-product-"] .related-swiper .slick-arrow:hover::before,
body[class*="product-product-"] .pbottom .slick-arrow:hover::before {
	opacity: 0.7;
}

/* секції: білі, p20, через 8; заголовок 18 SemiBold, стрілка 22 справа (вниз — згорнуто, вгору — розгорнуто).
   У макеті в «Доставці» й «Гарантії» поле 16, а стрілки винесені за поле — узято одне правило для всіх */
body[class*="product-product-"] #tab-attribute,
body[class*="product-product-"] #tab-description,
body[class*="product-product-"] #tab-review,
body[class*="product-product-"] #tab-sstock,
body[class*="product-product-"] #tab-0,
body[class*="product-product-"] #tab-1,
body[class*="product-product-"] #tab-2 {
	margin: 0 0 8px;
	border-radius: 0;
}

body[class*="product-product-"] #tab-sstock {
	background: var(--vv-white);
}

body[class*="product-product-"] #tab-sstock > .product-section {
	margin: 0;
	padding: 20px 20px 12px;
	border-radius: 0;
}

body[class*="product-product-"] #tab-attribute h2,
body[class*="product-product-"] .product-section .collapse-title h2 {
	margin: 0;
	color: var(--vv-black);
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
}

body[class*="product-product-"] .product-section .collapse-title {
	position: relative;
	padding: 0 38px 0 0;
}

body[class*="product-product-"] .product-section .collapse-content {
	padding-top: 16px;
	text-align: left;
}

body[class*="product-product-"] .collapse-arrow {
	top: 2px;
	right: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	transform: none;
	transition: transform 0.3s;
}

body[class*="product-product-"] #tab-sstock .collapse-arrow {
	top: 0;
}

body[class*="product-product-"] .collapse-arrow img {
	display: none;
}

body[class*="product-product-"] .collapse-arrow::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: var(--vv-black);
	-webkit-mask: var(--vv-i-arrow-down) center / 22px no-repeat;
	mask: var(--vv-i-arrow-down) center / 22px no-repeat;
}

body[class*="product-product-"] .collapse-title[aria-expanded="true"] .collapse-arrow {
	transform: rotate(180deg);
}

/* повні характеристики: дві колонки по половині, пара «назва ···· значення», рядки кроком 34, значення в колонці 160
   (70:13757). Колонки заповнюються згори вниз, як у макеті */
body[class*="product-product-"] #tab-attribute {
	padding: 20px;
}

/* акордеон, розгорнутий за замовчуванням (можна згорнути): заголовок у .collapse-title, до сітки 16 дає .collapse-content;
   відступ останнього рядка забирає обгортка (не сітка) — інакше висота ≠ scrollHeight і collapse стрибає в кінці */
body[class*="product-product-"] #attribute-content {
	margin-bottom: -8px;
}

body[class*="product-product-"] #tab-attribute .attribute-grid {
	display: block;
	columns: 2;
	column-gap: 0;
}

body[class*="product-product-"] #tab-attribute .attribute-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 160px;
	align-items: end;
	margin: 0 0 8px;
	padding: 0 0 8px;
	break-inside: avoid;
	font-size: 14px;
	line-height: 18px;
	white-space: normal;
}

body[class*="product-product-"] #tab-attribute .attribute-name {
	display: flex;
	align-items: flex-end;
	color: var(--vv-muted);
	font-weight: 500;
	white-space: nowrap;
}

body[class*="product-product-"] #tab-attribute .attribute-item .dots {
	flex: 1 1 auto;
	width: auto;
	height: 0;
	margin: 0 0 2.8px 3px;
	border-bottom: 1px dashed var(--vv-surface);
}

body[class*="product-product-"] #tab-attribute .attribute-text {
	padding-right: 10px;
	color: var(--vv-black);
	font-weight: 400;
}

/* опис 14/1.4, абзаци через 13; «Переглянути увесь опис» 16 Medium синім з підкресленням на 12 нижче (70:13873) */
body[class*="product-product-"] #tab-description {
	padding: 20px;
}

body[class*="product-product-"] #description-content,
/* 14×1.4 Figma рендерить рядком 20 (70:13881); на мобілці свій — 21 */
body[class*="product-product-"] #description-content p {
	color: var(--vv-black);
	font-size: 14px;
	line-height: 20px;
}

body[class*="product-product-"] #description-content p {
	margin: 0 0 13px;
}

body[class*="product-product-"] .product-section .block-expand-overlay,
body[class*="product-product-"] .product-section .block-expand-overlay b {
	padding-top: 12px;
	background: none;
	color: var(--vv-tab-blue);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ---------- Відгуки (шаблон madeshop/product_feedback.twig; класи спільні зі сторінкою відгуків — тут лише під товаром) ---------- */
body[class*="product-product-"] #tab-review {
	padding: 20px;
}

body[class*="product-product-"] #tab-review .r-page,
body[class*="product-product-"] #tab-review .container {
	margin: 0;
	padding: 0;
}

body[class*="product-product-"] #review .feedback_general_info-block {
	display: flex;
	align-items: stretch;
	gap: 26px;
	margin: 0;
	padding: 0;
	background: none;
}

body[class*="product-product-"] #review .feedback_general_info-block-left {
	flex: 1 1 auto;
	color: var(--vv-black);
	font-size: 14px;
	line-height: 1.4;
}

body[class*="product-product-"] #review .feedback_general_info-block-left b {
	font-weight: 600;
}

/* середня оцінка: #FFD12E 10%, p12, зірка 22 + «4,8» 24 Medium + підписи 14/12 */
body[class*="product-product-"] #review .feedback-summary-item {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin: 0;
	padding: 12px;
	border-radius: 0;
	background: rgba(255, 209, 46, 0.1);
}

body[class*="product-product-"] #review .feedback-summary-icon {
	width: 22px;
	height: 22px;
	background: var(--vv-star);
	-webkit-mask: var(--vv-i-star) center / 22px no-repeat;
	mask: var(--vv-i-star) center / 22px no-repeat;
}

body[class*="product-product-"] #review .feedback-summary-icon > * {
	display: none;
}

body[class*="product-product-"] #review .feedback-summary-score {
	color: var(--vv-black);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
}

body[class*="product-product-"] #review .feedback-summary-details {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

body[class*="product-product-"] #review .feedback-summary-label {
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
}

body[class*="product-product-"] #review .feedback-summary-total {
	color: var(--vv-muted);
	font-size: 12px;
	font-weight: 400;
}

/* «Є ідея для покращення? Напиши нам ›» — пігулка #F9F9F9 p12 (єдиний радіус на сторінці, як у макеті) */
body[class*="product-product-"] #review .add_idea_block {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 16px;
	padding: 12px;
	border-radius: 50px;
	background: #F9F9F9;
	color: var(--vv-black);
	font-size: 14px;
	line-height: 1.4;
}

body[class*="product-product-"] #review .add_idea_block a {
	color: var(--vv-tab-blue);
	font-weight: 500;
	text-decoration: none;
}

body[class*="product-product-"] #review .add_idea_block::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: var(--vv-black);
	-webkit-mask: var(--vv-arrow-right) center / 20px no-repeat;
	mask: var(--vv-arrow-right) center / 20px no-repeat;
}

/* вкладки «Відгуки N / Питання N»: 16, крок 30, активна Medium синя з лінією 1.14, під усім — лінія 0.7 #D3D3D3 */
body[class*="product-product-"] #review .nav-tabs {
	display: flex;
	gap: 30px;
	margin: 0 0 20px;
	padding: 0 0 6px;
	border: 0;
	box-shadow: inset 0 -0.7px 0 #D3D3D3;
}

body[class*="product-product-"] #review .nav-tabs li {
	margin: 0;
	float: none;
}

body[class*="product-product-"] #review .nav-tabs li a,
body[class*="product-product-"] #review .nav-tabs li.active a {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

body[class*="product-product-"] #review .nav-tabs li.active a {
	color: var(--vv-tab-blue);
	font-weight: 500;
}

body[class*="product-product-"] #review .nav-tabs li.active a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7.14px;
	height: 1.14px;
	background: var(--vv-tab-blue);
}

/* «Додати відгук» — лайм p12/20, сортування — пігулка 156 з рамкою #EBEBEB */
body[class*="product-product-"] #review .feedback-header {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	margin: 0 0 16px;
}

body[class*="product-product-"] #review .add-feedback-btn {
	height: auto;
	padding: 12px 20px;
	border: 1px solid var(--vv-brand);
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
}

body[class*="product-product-"] #review .sort-block .w-select {
	width: 156px;
	height: 100%;
	border: 1px solid #EBEBEB;
	border-radius: 50px;
	background: var(--vv-white);
}

body[class*="product-product-"] #review .sort-block .bline {
	padding: 8px 12px;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

/* картка відгуку: #F9F9F9 p12 через 8; автор — аватар 42 коло, ім'я 18 Medium, дата 12 #898E86; зірки 20 справа */
body[class*="product-product-"] #review .feedback-block {
	margin: 0 0 8px;
	padding: 12px;
	border: 0;
	border-radius: 0;
	background: #F9F9F9;
}

body[class*="product-product-"] #review .feedback-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
}

body[class*="product-product-"] #review .feedback-author-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
}

body[class*="product-product-"] #review .feedback-author-avatar,
body[class*="product-product-"] #review .rev-author-avatar {
	width: 42px;
	height: 42px;
	margin: 0;
	border-radius: 200px;
	overflow: hidden;
}

body[class*="product-product-"] #review .feedback-author-avatar img,
body[class*="product-product-"] #review .rev-author-avatar img {
	width: 42px;
	height: 42px;
	object-fit: cover;
}

body[class*="product-product-"] #review .author-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

body[class*="product-product-"] #review .feedback-author {
	color: var(--vv-black);
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
}

body[class*="product-product-"] #review .feedback-date {
	color: var(--vv-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
}

body[class*="product-product-"] #review .feedback-rating-block {
	display: flex;
	gap: 0;
	margin: 0;
}

body[class*="product-product-"] #review .rating li {
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--vv-star);
	-webkit-mask: var(--vv-i-star) center / 20px no-repeat;
	mask: var(--vv-i-star) center / 20px no-repeat;
}

body[class*="product-product-"] #review .rating li.nocheck {
	background: #D1D3CC;
}

body[class*="product-product-"] #review .rating li::before,
body[class*="product-product-"] #review .rating li::after {
	content: none;
}

body[class*="product-product-"] #review .feedback-card__text-wrapper {
	margin: 11px 0 0;
}

body[class*="product-product-"] #review .feedback-text {
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

/* фото й відео відгуку: 84×112 через 8 з радіусом 8, кнопка відтворення 34 (70:13937) */
body[class*="product-product-"] #review .feedback-imgs {
	display: flex;
	gap: 8px;
	margin: 16px 0 0;
}

body[class*="product-product-"] #review .feedback-image-thumb,
body[class*="product-product-"] #review .video-button {
	position: relative;
	width: 84px;
	height: 112px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
}

body[class*="product-product-"] #review .feedback-image-thumb img,
body[class*="product-product-"] #review .video-button img {
	width: 84px;
	height: 112px;
	border-radius: 8px;
	object-fit: cover;
}

/* «Корисний відгук? 👍 N» справа, 14 Medium; лайк 22 з кіту, лічильник 16 #898E86 */
body[class*="product-product-"] #review .feedback-footer {
	display: flex;
	justify-content: flex-end;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
}

body[class*="product-product-"] #review .r-vote {
	display: flex;
	align-items: center;
	gap: 12px;
}

body[class*="product-product-"] #review .block-plus-label {
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

body[class*="product-product-"] #review .block-plus {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

body[class*="product-product-"] #review .block-plus svg {
	display: none;
}

body[class*="product-product-"] #review .block-plus::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: var(--vv-black);
	-webkit-mask: var(--vv-i-thumbs-up) center / 22px no-repeat;
	mask: var(--vv-i-thumbs-up) center / 22px no-repeat;
}

body[class*="product-product-"] #review .r-num {
	color: var(--vv-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

/* відповідь магазину — всередині тієї ж картки: відступ 50, лінія 0.7 #E1E1E1, «Читати далі ⌄» 14 Medium #898E86 */
body[class*="product-product-"] #review .comments-block {
	margin: 12px 0 0;
	padding: 0 0 0 50px;
}

body[class*="product-product-"] #review .comment {
	padding: 12px 0 0;
	border-top: 0.7px solid #E1E1E1;
}

body[class*="product-product-"] #review .comment_border {
	display: none;
}

body[class*="product-product-"] #review .feedback-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
}

/* ---------- Наявність у магазинах: список 456 ліворуч, карта праворуч (70:14026) ---------- */
body[class*="product-product-"] #tab-sstock .collapse-title > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body[class*="product-product-"] #tab-sstock .collapse-title h2 {
	line-height: 22px;
}

/* вступ — рядок 17, як рендерить Figma (normal давав 18 через посилання в рядку) */
body[class*="product-product-"] #tab-sstock .collapse-title p {
	margin: 0;
	color: var(--vv-black);
	font-size: 14px;
	line-height: 17px;
}

body[class*="product-product-"] #tab-sstock .collapse-title p a {
	color: var(--vv-tab-blue);
	text-decoration: underline !important;
	text-underline-position: from-font;
}

body[class*="product-product-"] #tab-sstock .collapse-arrow {
	top: 50%;
	margin-top: -11px;
}

/* 15 + рамка 1 = 16 до списку (у Figma лінія нульової висоти) */
body[class*="product-product-"] #multistore-content {
	padding: 15px 0 0;
}

body[class*="product-product-"] #multistore-content .offline-stores {
	gap: 0;
	border-top: 1px solid #F2F2F2;
}

body[class*="product-product-"] #multistore-content .offline-stores-wrapper {
	grid-template-columns: 456px minmax(0, 1fr);
	min-height: 642px;
	border-radius: 0;
}

body[class*="product-product-"] #multistore-content .offline-stores-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 4px 20px 20px;
	min-width: 0;
}

body[class*="product-product-"] #multistore-content .offline-stores-filters {
	gap: 8px;
	margin: 0;
	padding: 0 8px 0 0;
	border: 0;
}

/* поле міста 42 з рамкою #D3D3D3, плейсхолдер 14 Medium #D3D3D3, стрілка вниз 20 */
body[class*="product-product-"] #multistore-content .custom-select-wrapper .custom-select-input {
	height: 42px;
	padding: 12px 40px 12px 12px;
	border: 1px solid #D3D3D3;
	border-radius: 0;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

body[class*="product-product-"] #multistore-content .custom-select-input::placeholder {
	color: #D3D3D3;
	font-size: 14px;
	font-weight: 500;
}

body[class*="product-product-"] #multistore-content .offline-stores-list {
	gap: 16px;
	max-height: 560px;
	margin: 0;
	padding: 0 8px 0 0;
}

body[class*="product-product-"] #multistore-content .offline-stores-list::-webkit-scrollbar {
	width: 4px;
}

body[class*="product-product-"] #multistore-content .offline-stores-list::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background: #D3D3D3;
}

body[class*="product-product-"] #multistore-content .offline-stores-list::-webkit-scrollbar-track {
	border-radius: 2px;
	background: #F2F2F2;
}

body[class*="product-product-"] #multistore-content .offline-stores-block + .offline-stores-block {
	padding-top: 16px;
	border-top: 1px solid #F2F2F2;
}

body[class*="product-product-"] #multistore-content .offline-stores-block-info {
	align-items: flex-start;
	gap: 4px;
	padding: 0;
	border: 0;
}

body[class*="product-product-"] #multistore-content .offline-stores-block-info > div:first-child {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

body[class*="product-product-"] #multistore-content .offline-stores-block-row {
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
}

body[class*="product-product-"] #multistore-content .offline-stores-block-info > div:first-child > .offline-stores-block-row:first-child {
	color: var(--vv-black);
	font-weight: 500;
	line-height: 1.3;
}

/* іконки рядка — шпилька й годинник кіту 20 #898E86 замість старих 10px */
body[class*="product-product-"] #multistore-content .offline-stores-block-row .icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: var(--vv-muted);
	-webkit-mask: var(--vv-i-pin) center / 20px no-repeat;
	mask: var(--vv-i-pin) center / 20px no-repeat;
}

body[class*="product-product-"] #multistore-content .offline-stores-block-row .icon svg {
	display: none;
}

body[class*="product-product-"] #multistore-content .offline-stores-block-row + .offline-stores-block-row .icon {
	-webkit-mask-image: var(--vv-i-clock);
	mask-image: var(--vv-i-clock);
}

/* ціни магазину в рядку в новому макеті нема (є лише в старому фреймі станів 70:12894) */
body[class*="product-product-"] #multistore-content .shop-price {
	display: none;
}

body[class*="product-product-"] #multistore-content .offline-stores-block .arrow {
	width: 20px;
	height: 20px;
}

body[class*="product-product-"] #multistore-content .offline-stores-block .arrow svg {
	display: none;
}

body[class*="product-product-"] #multistore-content .offline-stores-block .arrow::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--vv-black);
	-webkit-mask: var(--vv-i-arrow-down) center / 20px no-repeat;
	mask: var(--vv-i-arrow-down) center / 20px no-repeat;
}

/* залишки по варіантах: #F9F9F9 p10, назва 14 Medium, кількість Regular #898E86; рамка — колір статусу з бекенду */
body[class*="product-product-"] #tab-sstock .offline-stores-block-content {
	padding: 8px 0 0;
}

body[class*="product-product-"] #tab-sstock .stock-chips {
	gap: 4px;
}

body[class*="product-product-"] #tab-sstock .stock-chips .sp-item {
	padding: 10px;
	border-width: 1px;
	border-style: solid;
	border-radius: 0;
	background: #F9F9F9;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

body[class*="product-product-"] #tab-sstock .stock-chips .sp-item span span {
	color: var(--vv-muted) !important;
	font-weight: 400;
}

/* плашки «місто не знайдено» / «на жаль, немає в наявності» (70:12893): #F9F9F9 p10, 14/18 #8C8A87, по ширині тексту,
   одразу на 20 під полем (відступ дає список; mobile-правило offlinestores.css додавало ще 12) */
body[class*="product-product-"] #tab-sstock .ms-city-hint,
body[class*="product-product-"] #tab-sstock .ms-nothing-found {
	max-width: max-content;
	margin: 0;
	padding: 10px;
	border-radius: 0;
	background: #F9F9F9;
	color: #8C8A87;
	font-size: 14px;
	line-height: 18px;
}

/* карта: лаймові маркери (іконку задає скрипт multistore), кнопки масштабу 28 білі з тінню */
body[class*="product-product-"] #multistore-content .offline-stores-map {
	min-height: 642px;
	border-radius: 0;
}

body[class*="product-product-"] #multistore-content .leaflet-bar {
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

body[class*="product-product-"] #multistore-content .leaflet-bar a {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 0;
	color: var(--vv-black);
	line-height: 28px;
}

body[class*="product-product-"] #multistore-content .leaflet-bar a + a {
	margin-top: 4px;
}

/* ---------- Доставка й оплата (HTML з адмінки, вкладка 0: .info-alert, .info-wrapper > .info-block) ---------- */
body[class*="product-product-"] #tab-0,
body[class*="product-product-"] #tab-1,
body[class*="product-product-"] #tab-2 {
	padding: 20px;
}

body[class*="product-product-"] #tab0-content .info-alert {
	display: inline-block;
	margin: 0 0 8px;
	padding: 12px;
	border: 0;
	border-radius: 0;
	background: rgba(249, 215, 215, 0.3);
	color: var(--vv-red);
	font-size: 14px;
	line-height: 1.3;
}

body[class*="product-product-"] #tab0-content .info-wrapper {
	gap: 8px;
}

body[class*="product-product-"] #tab0-content .info-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border-radius: 0;
	background: #F9F9F9;
	color: var(--vv-black);
	font-size: 14px;
	line-height: 1.3;
}

body[class*="product-product-"] #tab0-content .info-block-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 26px;
	padding: 0 0 8px;
	border-bottom: 1px solid #F2F2F2;
}

body[class*="product-product-"] #tab0-content .info-block-top h4 {
	margin: 0;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
}

body[class*="product-product-"] #tab0-content .info-block-icons {
	display: flex;
	gap: 4px;
}

body[class*="product-product-"] #tab0-content .info-block-icons img {
	width: 26px;
	height: 26px;
}

body[class*="product-product-"] #tab0-content .info-block p {
	margin: 0;
}

body[class*="product-product-"] #tab0-content .info-block p + p {
	margin-top: 18.2px;
}

body[class*="product-product-"] #tab0-content .info-block ul {
	margin: 0;
	padding: 0 0 0 21px;
	list-style: disc;
}

body[class*="product-product-"] #tab0-content > div:last-child {
	color: var(--vv-muted) !important;
	font-size: 14px;
	line-height: 1.3;
}

body[class*="product-product-"] #tab2-content,
body[class*="product-product-"] #tab1-content {
	color: var(--vv-black);
	font-size: 14px;
	line-height: 1.3;
}

/* ---------- Липка плашка на десктопі (70:14261): фото 45, назва 16 SemiBold, ціна 36, «Додати в кошик» 14 з полями 24, серце 48 ---------- */
body[class*="product-product-"] .product-info.sticky {
	top: var(--vv-header-h);
	box-shadow: 0 16px 10px rgba(0, 0, 0, 0.04);
}

body[class*="product-product-"] .product-info.sticky .product-info-container {
	gap: 20px;
	padding: 10px 40px;
	grid-template-columns: minmax(0, 1fr) max-content max-content;
}

body[class*="product-product-"] .product-info.sticky .product-data-image {
	flex: 0 0 45px;
	width: 45px;
	height: 45px;
	border: 1px solid #E1E1E1;
	background: #F5F3F1;
	overflow: hidden;
}

body[class*="product-product-"] .product-info.sticky .product-data-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

body[class*="product-product-"] .product-info.sticky .product-data-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 45px;
}

body[class*="product-product-"] .product-info.sticky .h1 {
	margin: 0;
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.1;
}

body[class*="product-product-"] .product-info.sticky .reviews a {
	gap: 6px;
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

body[class*="product-product-"] .product-info.sticky .reviews .vv-icon {
	width: 16px;
	height: 16px;
	color: var(--vv-star);
}

body[class*="product-product-"] .product-info.sticky .price-block .price {
	color: #211A23;
	font-size: 36px;
	line-height: 1.3;
}

body[class*="product-product-"] .product-info.sticky .product-buttons {
	gap: 4px;
	margin: 0;
}

body[class*="product-product-"] .product-info.sticky .product-buttons .made-btn {
	height: 47px;
	padding: 0 24px;
	font-size: 14px;
}

body[class*="product-product-"] .product-info.sticky .group-rad .wishlist {
	width: 48px !important;
	height: 47px !important;
}

/* опис: видно 173px тексту, далі через 12 посилання на білій смужці (оверлей x001 з градієнтом тут не потрібен) */
body[class*="product-product-"] #tab-description .block-expand {
	max-height: 209px;
	padding-bottom: 36px;
	line-height: 1.4;
}

body[class*="product-product-"] #tab-description .block-expand.open {
	max-height: none !important;
}

body[class*="product-product-"] #tab-description .block-expand-overlay {
	top: auto;
	bottom: 0;
	height: 36px !important;
	max-height: none !important;
	padding: 12px 0 0;
	background: var(--vv-white);
}

body[class*="product-product-"] #tab-description .block-expand-overlay b {
	padding: 0;
	background: none;
}

/* обгортка відгуків мала власні поля 20 — поле вже дає секція */
body[class*="product-product-"] #feedback-content-wrapper {
	padding: 0;
	border-radius: 0;
	background: none;
}

/* стрілка «Напиши нам» — з кіту (::after), вбудований у мовний рядок SVG 6×10 ховаємо */
body[class*="product-product-"] #review .add_idea_block {
	max-width: max-content;
	font-weight: 400;
}

body[class*="product-product-"] #review .add_idea_block a svg {
	display: none;
}

body[class*="product-product-"] #review .feedback-header {
	align-items: center;
}

body[class*="product-product-"] #review .sort-block .w-select {
	height: 41px;
}

/* «Показати всі записи» (у макеті три відгуки без кнопки) — у стилі «Додати відгук» */
body[class*="product-product-"] #review .show-more-feedback {
	margin: 8px auto 0;
	padding: 12px 20px;
	border-radius: 0;
	background: var(--vv-brand);
	font-size: 14px;
	line-height: normal;
}

/* список магазинів + поле міста = 642, як карта */
body[class*="product-product-"] #multistore-content .offline-stores-list {
	max-height: 540px;
}

/* масштаб карти — праворуч унизу, як у макеті */
body[class*="product-product-"] #multistore-content .leaflet-top.leaflet-left {
	top: auto;
	left: auto;
	right: 10.5px;
	bottom: 20px;
}

/* ---------- Сторінка товару, мобілка ≤767 (Figma 70:14337, 375): поля 12, картки через 8, секції через 12 ---------- */
@media (max-width: 767px) {
	body[class*="product-product-"] .container:has(> ul.breadcrumb),
	body[class*="product-product-"] #product-nav .container,
	body[class*="product-product-"] .container:has(> #tab-product) {
		padding: 0 12px;
	}

	/* крихти 14 під краєм сторінки (текст на 9 під шапкою 48, сторінка стартує на 5 під неї), в один рядок */
	body[class*="product-product-"] ul.breadcrumb {
		padding: 14px 0 0;
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	body[class*="product-product-"] ul.breadcrumb::-webkit-scrollbar {
		display: none;
	}

	/* таби: рядок 28, текст 14 #444 з кроком 16, активний синій Medium, лінія 2 під текстом (70:14356) */
	body[class*="product-product-"] #product-nav {
		margin-top: 8px;
	}

	body[class*="product-product-"] #product-nav .container {
		overflow-x: auto;
		scrollbar-width: none;
	}

	body[class*="product-product-"] #product-nav .container::-webkit-scrollbar {
		display: none;
	}

	body[class*="product-product-"] #product-nav .flex-tab {
		height: 28px;
		margin: 0 0 12px;
		padding: 0;
	}

	body[class*="product-product-"] .tab-block .product-nav a {
		padding: 5.5px 8px;
		color: #444;
		font-size: 14px;
		line-height: 17px;
	}

	body[class*="product-product-"] .flex-tab li.active a::after {
		left: 8px;
		right: 8px;
	}

	/* верхня картка: назва 16 Bold, рейтинг і код по 20, під ними через 12 фото 342 з крапками внизу (70:14366) */
	body[class*="product-product-"] .product-top-section.mobile {
		margin: 0;
		padding: 12px 12px 0;
		border-radius: 0;
	}

	body[class*="product-product-"] .product-top-section .h1 {
		margin: 0 0 4px;
		color: var(--vv-black);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.1;
	}

	body[class*="product-product-"] .product-top.mobile {
		align-items: center;
		height: 24px;
		margin: 0;
	}

	body[class*="product-product-"] .product-top .vv-icon {
		width: 20px;
		height: 20px;
	}

	body[class*="product-product-"] .product-card-wrapper {
		display: block;
		margin: 0 0 12px;
	}

	body[class*="product-product-"] .product-image-section {
		margin: 0 0 8px;
		padding: 12px;
		background: var(--vv-white);
	}

	body[class*="product-product-"] .product-image-section .over {
		display: block;
	}

	body[class*="product-product-"] #image-additional {
		display: none;
	}

	body[class*="product-product-"] #one-image .slick-slide {
		height: 342px;
		padding: 10px 0;
	}

	body[class*="product-product-"] #one-image .slick-dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex !important;
		justify-content: center;
		gap: 3px;
		margin: 0;
		padding: 0;
	}

	body[class*="product-product-"] #one-image .slick-dots li {
		width: 6px;
		height: 6px;
		margin: 0;
		border-radius: 50%;
		background: #D9D9D9;
	}

	body[class*="product-product-"] #one-image .slick-dots li.slick-active {
		background: var(--vv-brand);
	}

	body[class*="product-product-"] .product-image-section .slick-arrow {
		display: none !important;
	}

	body[class*="product-product-"] .product-stickers {
		top: 76px;
		left: 0;
	}

	/* картка покупки p12: плитки 50.21 через 4, ціна 26, бонус 12, кнопки 52 (70:14389) */
	body[class*="product-product-"] #product-info-data {
		padding: 12px;
	}

	body[class*="product-product-"] .hpm-selected-display {
		margin: 0 0 12px;
		line-height: 1.3;
	}

	body[class*="product-product-"] #hpmodel .hpm-type-images {
		gap: 4px;
	}

	body[class*="product-product-"] #hpmodel .hpm-type-images .hpm-item {
		width: 50.21px;
		height: 50.21px;
	}

	body[class*="product-product-"] .product-right .price-block .price {
		color: #211A23;
		font-size: 26px;
		line-height: 42px;
	}

	body[class*="product-product-"] .price-block .price > span::after {
		font-size: 26px;
	}

	body[class*="product-product-"] .product-right .price-block .reward {
		font-size: 12px;
	}

	body[class*="product-product-"] .product-right .qty {
		width: 82px;
		height: 52px;
	}

	body[class*="product-product-"] .product-right .qty div,
	body[class*="product-product-"] .product-right .qty input {
		height: 50px;
	}

	body[class*="product-product-"] .product-right .product-buttons .made-btn {
		height: 52px;
		font-size: 14px;
	}

	body[class*="product-product-"] #product .product-buttons .made-btn::before {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
		-webkit-mask-size: 22px;
		mask-size: 22px;
	}

	body[class*="product-product-"] .group-rad .wishlist {
		width: 52px;
		height: 52px;
	}

	body[class*="product-product-"] .group-rad .wishlist svg,
	body[class*="product-product-"] #product .need-complect-btn .vv-icon {
		width: 22px;
		height: 22px;
	}

	body[class*="product-product-"] .product-stock-count {
		padding: 10px 8px;
	}

	body[class*="product-product-"] .product-stock-count::before {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
		-webkit-mask-size: 22px;
		mask-size: 22px;
	}

	body[class*="product-product-"] .product-stock-count::after {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
		-webkit-mask-size: 20px;
		mask-size: 20px;
	}

	body[class*="product-product-"] .product-right .gift-btn,
	body[class*="product-product-"] .product-right .manufacturer-block {
		padding: 0 12px;
	}

	/* комплектуючі: заголовок 16, картки 254 через 4 з рамкою 1 #E1E1E1, затухання 40 праворуч (70:14480) */
	body[class*="product-product-"] #tab-complect.product-section {
		padding: 12px;
	}

	body[class*="product-product-"] #tab-complect h2 {
		font-size: 16px;
	}

	body[class*="product-product-"] #tab-complect::after {
		top: 46.77px;
		width: 40px;
		height: 112.32px;
	}

	body[class*="product-product-"] #complect .slick-slide {
		width: 258px;
		padding-right: 4px !important;
	}

	body[class*="product-product-"] #complect .slick-list {
		margin-right: -4px;
	}

	body[class*="product-product-"] .mini-product-thumb {
		gap: 6px;
		height: auto;
		border-width: 1px;
	}

	body[class*="product-product-"] .mini-product-thumb-top {
		align-items: flex-start;
		gap: 6px;
	}

	body[class*="product-product-"] .mini-product-thumb .image img {
		border-radius: 0;
	}

	/* «Рекомендуємо» / «Ви дивились»: заголовок 16/20, до карток 8 (!important — стара тема: .h2{font-size:18px !important}).
	   Модуль теми на мобілці виходить на 10 за поле (margin 0 -10px, перша картка з відступом 10) — заголовок повертаємо на 12,
	   «Рекомендуємо» ставимо в ту саму геометрію, що й «Ви дивились»: картки 164 з x=12 (70:14463, 70:15233) */
	body[class*="product-product-"] .related-swiper .adaptive-h2,
	body[class*="product-product-"] .pbottom .adaptive-h2 {
		margin: 0 0 8px 10px;
		font-size: 16px !important;
		line-height: 20px;
	}

	body[class*="product-product-"] .related-swiper {
		margin: 0 -10px 12px;
	}

	body[class*="product-product-"] .pbottom .m-section {
		margin: 0 0 12px;
	}

	/* секції p12 через 12, заголовок 16 SemiBold, стрілка 20 */
	body[class*="product-product-"] #tab-attribute,
	body[class*="product-product-"] #tab-description,
	body[class*="product-product-"] #tab-review,
	body[class*="product-product-"] #tab-0,
	body[class*="product-product-"] #tab-1,
	body[class*="product-product-"] #tab-2 {
		margin: 0 0 12px;
		padding: 12px;
	}

	body[class*="product-product-"] #tab-sstock {
		margin: 0 0 12px;
	}

	body[class*="product-product-"] #tab-sstock > .product-section {
		padding: 12px;
	}

	body[class*="product-product-"] #tab-attribute h2,
	body[class*="product-product-"] .product-section .collapse-title h2 {
		font-size: 16px;
		line-height: 22px;
	}

	body[class*="product-product-"] #tab-attribute .collapse-content {
		padding-top: 8px;
	}

	body[class*="product-product-"] .product-section .collapse-content {
		padding-top: 12px;
	}

	body[class*="product-product-"] .collapse-arrow,
	body[class*="product-product-"] .collapse-arrow::before {
		width: 20px;
		height: 20px;
		-webkit-mask-size: 20px;
		mask-size: 20px;
	}

	/* характеристики однією колонкою: назва з лідером 167, значення 160, крок 30 (70:14822) */
	body[class*="product-product-"] #tab-attribute .attribute-grid {
		columns: 1;
	}

	body[class*="product-product-"] #attribute-content {
		margin-bottom: -4px;
	}

	body[class*="product-product-"] #tab-attribute .attribute-item {
		grid-template-columns: minmax(0, 1fr) 160px;
		margin: 0 0 4px;
	}

	/* опис: видно 147, посилання 16 на 8 нижче (70:14938) */
	body[class*="product-product-"] #tab-description .block-expand {
		max-height: 176px;
		padding-bottom: 29px;
	}

	body[class*="product-product-"] #tab-description .block-expand-overlay {
		height: 29px !important;
		padding-top: 8px;
	}

	/* посилання на мобілці 14/21 (70:14946), на десктопі 16 */
	body[class*="product-product-"] #tab-description .block-expand-overlay,
	body[class*="product-product-"] #tab-description .block-expand-overlay b {
		font-size: 14px;
	}

	/* відгуки: блок оцінки під текстом на всю ширину */
	body[class*="product-product-"] #review .feedback_general_info-block {
		flex-direction: column;
		gap: 13px;
	}

	body[class*="product-product-"] #review .feedback-summary-item {
		justify-content: center;
	}

	/* магазини: заголовок 16, перемикач «Список / На карті» 36 (активний — лаймова рамка), пошук (70:15091, 70:15101) */
	body[class*="product-product-"] #tab-sstock .collapse-title > div {
		gap: 4px;
	}

	body[class*="product-product-"] #multistore-content {
		padding: 0;
	}

	body[class*="product-product-"] #multistore-content .offline-stores {
		border: 0;
	}

	body[class*="product-product-"] #multistore-content .offline-stores-wrapper {
		display: block;
		min-height: 0;
	}

	body[class*="product-product-"] #multistore-content .offline-stores-content {
		padding: 0 12px 12px;
		gap: 12px;
	}

	body[class*="product-product-"] #multistore-content .offline-stores-filters {
		padding: 0;
		gap: 8px;
	}

	body[class*="product-product-"] .offline-stores-nav {
		display: flex;
		gap: 8px;
	}

	body[class*="product-product-"] .offline-stores-nav button {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		height: 36px;
		padding: 0 20px;
		border: 1px solid #D3D3D3;
		border-radius: 0;
		background: var(--vv-white);
		color: var(--vv-black);
		font-size: 14px;
		font-weight: 500;
	}

	body[class*="product-product-"] .offline-stores-nav button.active {
		border-color: var(--vv-brand);
	}

	body[class*="product-product-"] .offline-stores-nav button svg {
		width: 20px;
		height: 20px;
	}

	body[class*="product-product-"] #multistore-content .ms-search-block {
		display: block;
	}

	body[class*="product-product-"] #multistore-content .ms-search-block input {
		height: 42px;
		padding: 12px 40px 12px 12px;
		border: 1px solid #D3D3D3;
		border-radius: 0;
		font-size: 14px;
	}

	body[class*="product-product-"] #multistore-content .offline-stores-list {
		max-height: 420px;
	}

	body[class*="product-product-"] #multistore-content .offline-stores-map {
		min-height: 420px;
	}

	/* доставка: картки одна під одною */
	body[class*="product-product-"] #tab0-content .info-wrapper {
		display: flex;
		flex-direction: column;
	}
}

/* пігулка «Є ідея…»: текст і посилання — один рядок тексту (у flex вони розпадались на дві колонки), стрілка інлайн */
body[class*="product-product-"] #review .add_idea_block {
	display: inline-block;
}

body[class*="product-product-"] #review .add_idea_block::after {
	display: inline-block;
	margin-left: 8px;
	vertical-align: -5px;
}

@media (max-width: 767px) {
	/* на мобілці — плашка на всю ширину без радіуса, стрілка праворуч; «Додати відгук» і сортування навпіл через 12 */
	body[class*="product-product-"] #review .add_idea_block {
		display: block;
		max-width: none;
		border-radius: 0;
	}

	body[class*="product-product-"] #review .add_idea_block::after {
		float: right;
		margin: 0;
		vertical-align: 0;
	}

	body[class*="product-product-"] #review .feedback-header {
		gap: 12px;
	}

	body[class*="product-product-"] #review .add-feedback-btn,
	body[class*="product-product-"] #review .sort-block {
		flex: 1 1 0;
		min-width: 0;
	}

	body[class*="product-product-"] #review .sort-block .w-select {
		width: 100%;
		border-radius: 0;
	}
}

@media (max-width: 767px) {
	/* стрілка магазинів — угорі поряд із заголовком (70:15093), а не по центру шапки з підзаголовком */
	body[class*="product-product-"] #tab-sstock .collapse-arrow {
		top: 1px;
		margin-top: 0;
	}
}

/* slick робить слайдам inline-block — базова лінія додавала 5px під карткою комплектуючих */
body[class*="product-product-"] #complect .product-layout {
	vertical-align: top;
}

/* «Комплектуючі»: рядок 22.4 як у макеті; гліфи Figma в цьому рядку стоять на 3px нижче, ніж у браузера */
body[class*="product-product-"] #tab-complect h2 {
	position: relative;
	top: 3px;
	line-height: 22.4px;
}

/* поки варіант не вибрано (батьківський товар), hpmodel не пише підпис групи — у макеті («Колір:», «Міцність:», 70:9393) він є:
   беремо назву з data-title групи */
body[class*="product-product-"] #hpmodel .hpm-group[data-title]:has(> .hpm-selected-display:not(.hpm-has-selection))::before {
	content: attr(data-title) ":";
	display: block;
	margin: 0 0 16px;
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

/* текстові варіанти (міцність, об'єм): чипи ≥72×40, поля 10/16, 14 SemiBold, рамка #E1E1E1, вибраний — чорна,
   недоступний — блідий текст і діагональ, крок 12 (70:10344) */
body[class*="product-product-"] #hpmodel .hpm-type-images:has(.hcol-attribute) {
	gap: 12px;
}

body[class*="product-product-"] #hpmodel .hpm-type-images .hpm-item:has(.hcol-attribute) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 72px;
	height: 40px;
	padding: 10px 16px !important;
	background: var(--vv-white);
}

body[class*="product-product-"] #hpmodel .hcol-attribute {
	padding: 0 !important;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 600;
	line-height: 19.6px;
	white-space: nowrap;
}

body[class*="product-product-"] #hpmodel .hpm-item.no-stock:has(.hcol-attribute) > div {
	opacity: 1;
	color: rgba(225, 225, 225, 0.6);
}

/* банер оптової знижки (у макеті його нема) — лише без радіуса, у палітрі бренду */
body[class*="product-product-"] .volume-discount-banner {
	border-color: var(--vv-red);
	border-radius: 0;
}

body[class*="product-product-"] .volume-discount-banner__label {
	color: var(--vv-red);
}

/* ---------- Попап «Хочеш це в подарунок?» (70:13470 / 70:13490; стилі модуля — інлайн у <body>) ---------- */
body[class*="product-product-"] .gift-hint-modal {
	max-width: 426px;
	padding: 24px;
	border-radius: 0;
	color: #1D1D1D;
}

body[class*="product-product-"] .gift-hint-modal .modal-close {
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

body[class*="product-product-"] .gift-hint-modal .modal-close svg {
	display: none;
}

body[class*="product-product-"] .gift-hint-modal .modal-close::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: #898E86;
	-webkit-mask: var(--vv-x-muted) center / 24px no-repeat;
	mask: var(--vv-x-muted) center / 24px no-repeat;
}

body[class*="product-product-"] .gift-hint-modal .modal-title {
	margin: 0 0 8px;
	padding-right: 24px;
	color: #1D1D1D;
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
}

body[class*="product-product-"] .gift-hint-modal .modal-desc {
	margin: 0 0 36px;
	color: #1D1D1D;
	font-size: 14px;
	line-height: normal;
}

/* поля: рамка #D1D3CC без радіуса, 48; підпис 14 #9E9E9E, у заповненому — 11 Medium над значенням */
body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap {
	min-height: 48px;
	margin: 0 0 16px;
	border: 1px solid #D1D3CC;
	border-radius: 0;
}

body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap label {
	left: 16px;
	color: #9E9E9E;
	font-size: 14px;
	font-weight: 400;
}

body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap.focused label,
body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap.has-value label {
	top: 8px;
	color: #9E9E9E;
	font-size: 11px;
	font-weight: 500;
}

body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap input,
body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap textarea {
	min-height: 46px;
	padding: 25px 16px 6px;
	color: var(--vv-black);
	font-size: 14px;
	line-height: normal;
}

body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap textarea {
	min-height: 78px;
}

body[class*="product-product-"] .gift-hint-modal .made-btn {
	height: 48px;
	margin: 0;
	padding: 11px 22px;
	border-radius: 0;
	background: #D1D3CC;
	color: #898E86;
	font-size: 16px;
	font-weight: 500;
}

body[class*="product-product-"] .gift-hint-modal .made-btn.valid {
	background: var(--vv-brand);
	color: var(--vv-black);
}

/* рамка поля — всередині 48, як у Figma; повідомлення за замовчуванням (поле вимкнене) сіре, без ручки ресайзу */
body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap {
	box-sizing: border-box;
}

body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap textarea {
	resize: none;
}

body[class*="product-product-"] .gift-hint-modal .gift-floating-wrap textarea:disabled {
	background: none;
	color: #9E9E9E;
	-webkit-text-fill-color: #9E9E9E;
}

/* у липкій плашці бонусу нема (70:14261) — стара тема ховала його, наш display:flex перебивав */
body[class*="product-product-"] .product-info.sticky .price-block .reward {
	display: none;
}

/* фото — пропорція макета 790:779 замість фіксованих 779, щоб на вужчих екранах не витягувалось */
@media (min-width: 768px) {
	body[class*="product-product-"] #one-image .slick-slide {
		height: auto;
		aspect-ratio: 790 / 779;
	}
}

/* коли таби не влазять (вужче ~1100), рядок гортається всередині контейнера, а не розпирає сторінку */
@media (min-width: 768px) and (max-width: 1100px) {
	body[class*="product-product-"] #product-nav .container {
		overflow-x: auto;
		scrollbar-width: none;
	}

	body[class*="product-product-"] #product-nav .container::-webkit-scrollbar {
		display: none;
	}
}

/* 768–1100: права колонка вузька (≈290 усередині) — кількість 72, кнопка 14 з іконкою 20, серце 48, щоб ряд влазив */
@media (min-width: 768px) and (max-width: 1100px) {
	body[class*="product-product-"] .product-right .qty {
		width: 72px;
	}

	body[class*="product-product-"] .product-right .qty div {
		width: 24px;
	}

	body[class*="product-product-"] .product-right .product-buttons .made-btn {
		min-width: 0;
		gap: 6px;
		padding: 0 8px;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
	}

	body[class*="product-product-"] #product .product-buttons .made-btn::before {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
		-webkit-mask-size: 20px;
		mask-size: 20px;
	}

	body[class*="product-product-"] .group-rad .wishlist {
		width: 48px;
	}
}

/* до футера 20, як на категорії: після «Ви дивились» — його margin, без модуля — поле .pbottom (гарантія дає ще 8) */
body[class*="product-product-"] .pbottom .m-section:last-child {
	margin-bottom: 20px;
}

body[class*="product-product-"] .pbottom:not(:has(.m-section)) {
	padding-top: 12px;
}

/* відгук у макеті видно повністю (12 рядків на мобілці) — обрізаємо лише довші, «Читати далі» з'являється після 12
   (поріг у common.js береться з цього ж -webkit-line-clamp); відступ до тексту — лише обгортки (11 / 12 у відповіді) */
body[class*="product-product-"] #review .feedback-text {
	margin: 0;
	-webkit-line-clamp: 12;
	max-height: 16.8em;
}

body[class*="product-product-"] #review .feedback-text.expanded {
	max-height: none;
}

body[class*="product-product-"] #review .comment .feedback-card__text-wrapper {
	margin-top: 12px;
}

/* «Твій вейп друг» з лаймовою галочкою 16 (70:13967). Стара жовта галочка вшита в мовний рядок admin_author_text
   (<img check_mark.svg>, той самий рядок і на сторінці відгуків магазину) — тут ховаємо її, лишається ::after */
body[class*="product-product-"] #review .comment .feedback-author img {
	display: none;
}

/* ім'я відповіді — flex з gap 8 від старої теми; галочка в макеті на 4 від імені (відступ дає gap, margin у ::after — 0) */
body[class*="product-product-"] #review .comment .feedback-author {
	align-items: center;
	gap: 4px;
}

/* аватар відповіді 42, як у макеті (70:13958): стара тема — .rev-author-avatar img { 37px !important } */
body[class*="product-product-"] #review .rev-author-avatar img {
	width: 42px !important;
	height: 42px !important;
}

body[class*="product-product-"] #review .comment .feedback-author::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 0;
	vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23E7F127'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.1869 5.47982C12.3821 5.67508 12.3821 5.99167 12.1869 6.18693L7.52022 10.8536C7.32496 11.0489 7.00838 11.0489 6.81311 10.8536L4.14645 8.18693C3.95118 7.99167 3.95118 7.67508 4.14645 7.47982C4.34171 7.28456 4.65829 7.28456 4.85355 7.47982L7.16667 9.79293L11.4798 5.47982C11.675 5.28456 11.9916 5.28456 12.1869 5.47982Z' fill='black'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* доставка: рядок заголовка 26 лише там, де іконки; порожній рядок між абзацами 18.2 (з урахуванням gap 8) */
body[class*="product-product-"] #tab0-content .info-block-top {
	min-height: 0;
}

body[class*="product-product-"] #tab0-content .info-block-top:has(.info-block-icons) {
	min-height: 26px;
}

body[class*="product-product-"] #tab0-content .info-block p + p {
	margin-top: 10.2px;
}

@media (max-width: 767px) {
	/* відгуки на мобілці: ім'я 14 Medium, відповідь з відступом 16, середня оцінка на всю ширину (70:14980) */
	body[class*="product-product-"] #review .feedback-author {
		font-size: 14px;
	}

	body[class*="product-product-"] #review .comments-block {
		padding-left: 16px;
	}

	body[class*="product-product-"] #review .feedback-summary-item {
		width: 100%;
		max-width: none;
	}
}

/* ---------- Правки за pixel-perfect звіркою сторінки товару (2026-09-30) ---------- */

/* шапки секцій — висоти рядка з макета (десктоп: характеристики 26, опис 30, відгуки 31, доставка 22, гарантія 23) */
body[class*="product-product-"] #tab-description .collapse-title h2 {
	line-height: 30px;
}

body[class*="product-product-"] #tab-review .collapse-title h2 {
	line-height: 31px;
}

body[class*="product-product-"] #tab-0 .collapse-title h2 {
	line-height: 22px;
}

body[class*="product-product-"] #tab-2 .collapse-title h2 {
	line-height: 23px;
}

/* стрілка — по центру рядка заголовка будь-якої висоти */
body[class*="product-product-"] .product-section .collapse-title .collapse-arrow {
	top: 50%;
	margin-top: -11px;
}

/* сортування відгуків: рамка лише на внутрішній пігулці (.bline-offer), зовнішній .w-select без рамки; «Додати відгук» 41 з рамкою всередині */
body[class*="product-product-"] #review .sort-block .w-select {
	border: 0;
	background: none;
}

body[class*="product-product-"] #review .sort-block .bline-offer {
	width: 156px;
	height: 41px;
	padding: 0 12px;
	border: 1px solid #EBEBEB;
	border-radius: 50px;
	box-sizing: border-box;
}

body[class*="product-product-"] #review .sort-block .bline {
	flex: 1 1 auto;
	padding: 0;
}

/* стрілка сортування — кітова 20, #898E86 (70:13915, 70:14979), замість тонкої svg теми */
body[class*="product-product-"] #review .sort-block .bline-offer svg {
	display: none;
}

body[class*="product-product-"] #review .sort-block .bline-offer::after {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background-color: var(--vv-muted);
	-webkit-mask: var(--vv-i-arrow-down) center / 20px no-repeat;
	mask: var(--vv-i-arrow-down) center / 20px no-repeat;
	pointer-events: none;
}

body[class*="product-product-"] #review .add-feedback-btn {
	height: 41px;
	padding: 0 20px;
	box-sizing: border-box;
}

/* плашка 18+ — блок по ширині тексту (inline-block давав зайві 4px під собою) */
body[class*="product-product-"] #tab0-content .info-alert {
	display: block;
	width: fit-content;
	max-width: 100%;
}

/* магазин: стрілка по центру рядка, як у макеті (і десктоп, і мобілка) */
body[class*="product-product-"] #multistore-content .offline-stores-block-info {
	align-items: center;
}

@media (max-width: 767px) {
	/* заголовки секцій на мобілці: опис 30 +8, відгуки 31 +16, магазини 20, доставка 21 +8, гарантія 21 +16 (70:14809) */
	body[class*="product-product-"] #tab-description .collapse-title h2 {
		line-height: 30px;
	}

	body[class*="product-product-"] #tab-description .collapse-content {
		padding-top: 8px;
	}

	body[class*="product-product-"] #tab-review .collapse-title h2 {
		line-height: 31px;
	}

	body[class*="product-product-"] #tab-review .collapse-content {
		padding-top: 16px;
	}

	body[class*="product-product-"] #tab-sstock .collapse-title h2 {
		line-height: 20px;
	}

	body[class*="product-product-"] #tab-0 .collapse-title h2,
	body[class*="product-product-"] #tab-2 .collapse-title h2 {
		line-height: 21px;
	}

	body[class*="product-product-"] #tab-0 .collapse-content {
		padding-top: 8px;
	}

	body[class*="product-product-"] #tab-2 .collapse-content {
		padding-top: 16px;
	}

	/* «Комплектуючі»: поправка гліфів 3px — лише десктопна */
	body[class*="product-product-"] #tab-complect h2 {
		top: 0;
		line-height: 1.3;
	}

	/* опис на мобілці: рядок 21, згорнутий — 7 рядків з трикрапкою (70:14945) */
	body[class*="product-product-"] #description-content,
	body[class*="product-product-"] #description-content p {
		line-height: 21px;
	}

	body[class*="product-product-"] #tab-description .block-expand:not(.open) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 7;
	}

	/* «Додати відгук» і сортування — навпіл через 12, сортування квадратне */
	body[class*="product-product-"] #review .add-feedback-btn,
	body[class*="product-product-"] #review .sort-block {
		flex: 0 0 calc(50% - 6px);
	}

	body[class*="product-product-"] #review .sort-block .bline-offer {
		width: 100%;
		border-color: #EBEBEB;
		border-radius: 0;
	}

	/* «Ви дивились»: поле 12, як у решти сторінки */
	body[class*="product-product-"] .pbottom .container {
		padding: 0 12px;
	}
}

/* відгуки: Figma рендерить 14×1.4 як 20, а 12×1.4 як 17 — рядки з макета в px (десктоп 70:13888, мобілка 70:14952) */
body[class*="product-product-"] #review .feedback_general_info-block-left,
body[class*="product-product-"] #review .add_idea_block,
body[class*="product-product-"] #review .feedback-summary-label,
body[class*="product-product-"] #review .feedback-text {
	line-height: 20px;
}

body[class*="product-product-"] #review .feedback-summary-total {
	line-height: 17px;
}

/* після останньої картки відгуку — одразу поле секції (десктоп 70:13916, мобілка 70:14980) */
body[class*="product-product-"] #review .feedback-block:last-child {
	margin-bottom: 0;
}

/* «Читати далі»: flex без рядкового бокса — інакше під кнопкою зайвий 1px */
body[class*="product-product-"] #review .feedback-toggle {
	display: flex;
	width: fit-content;
}

/* лічильник «корисний» — поле 12, як у макеті (70:15012, 70:13948) */
body[class*="product-product-"] #review .r-num {
	min-width: 12px;
}

/* 12 рядків по 20 */
body[class*="product-product-"] #review .feedback-text {
	max-height: 240px;
}

/* вкладки: текст 20, лінія активної 26–27.14, наступний ряд на 47.14 */
body[class*="product-product-"] #review .nav-tabs {
	margin-bottom: 20.14px;
	padding-bottom: 7px;
}

body[class*="product-product-"] #review .nav-tabs li a,
body[class*="product-product-"] #review .nav-tabs li.active a {
	display: block;
	line-height: 20px;
}

/* стрілка рядка магазину — #898E86, як у макеті (десктоп і мобілка) */
body[class*="product-product-"] #multistore-content .offline-stores-block .arrow::before {
	background-color: var(--vv-muted);
}

/* магазини: розділювач лише МІЖ рядками — перший видимий (попередні сховані фільтром міста через style=display:none) без лінії й відступу */
body[class*="product-product-"] #multistore-content .offline-stores-block:nth-child(1 of .offline-stores-block:not([style*="none"])) {
	padding-top: 0;
	border-top: 0;
}

/* стара тема дає .info-block-top ще margin-bottom — між лінією й текстом виходило 16 замість 8 */
body[class*="product-product-"] #tab0-content .info-block-top {
	margin: 0;
	padding-bottom: 7px;
}

/* «Доставка і оплата» (десктоп 70:14206, мобілка 70:15191): Figma рендерить 14×1.3 рядком 18, заголовок 14×1.1 — 15;
   лінія на 8 під заголовком (у Figma нульової висоти, у нас рамка 1px — тому відступ 7) */
body[class*="product-product-"] #tab0-content .info-alert,
body[class*="product-product-"] #tab0-content .info-block p,
body[class*="product-product-"] #tab0-content .info-block li,
body[class*="product-product-"] #tab0-content > div:last-child {
	line-height: 18px;
}

body[class*="product-product-"] #tab0-content .info-block-top h4 {
	line-height: 15px;
}

body[class*="product-product-"] #tab0-content .info-block p + p {
	margin-top: 10px;
}

/* гарантія: 14×1.3 — теж рядок 18 (70:14247, 70:15232) */
body[class*="product-product-"] #tab2-content {
	line-height: 18px;
}

@media (max-width: 767px) {
	/* «Комплектуючі» на мобілці — рядок 22.4 (70:14485) */
	body[class*="product-product-"] #tab-complect h2 {
		line-height: 22.4px;
	}

	/* ціна 42 і чип бонусів 34 — по центру рядка (70:14417), на десктопі чип угорі */
	body[class*="product-product-"] .product-right .price-block {
		align-items: center;
	}

	/* на мобілці заголовки карток SemiBold, плашка 18+ Medium (на десктопі Bold і Regular — розкид макета) */
	body[class*="product-product-"] #tab0-content .info-block-top h4 {
		font-weight: 600;
	}

	body[class*="product-product-"] #tab0-content .info-alert {
		font-weight: 500;
	}

	/* відгуки (70:14980): картки через 4, остання без відступу; «Корисний відгук?» 12/17, лайк 20, лічильник 14; ім'я автора SemiBold */
	body[class*="product-product-"] #review .feedback-block {
		margin-bottom: 4px;
	}

	body[class*="product-product-"] #review .r-vote {
		gap: 8px;
	}

	body[class*="product-product-"] #review .block-plus-label {
		font-size: 12px;
		line-height: 17px;
	}

	body[class*="product-product-"] #review .block-plus {
		gap: 4px;
	}

	body[class*="product-product-"] #review .block-plus::before {
		width: 20px;
		height: 20px;
		-webkit-mask-size: 20px;
		mask-size: 20px;
	}

	body[class*="product-product-"] #review .r-num {
		font-size: 14px;
	}

	body[class*="product-product-"] #review .feedback-block > .feedback-info .feedback-author {
		font-weight: 600;
	}

	/* «Читати далі» — рядок 20 зі стрілкою 20 (70:15037) */
	body[class*="product-product-"] #review .feedback-toggle {
		min-height: 20px;
	}

	/* магазини (70:15090): до поля міста 16, перемикач на 22 нижче поля,
	   лінія на 9 під ним, пошук на 12 під лінією, список на 20 під пошуком, висота списку 426 */
	body[class*="product-product-"] #multistore-content .offline-stores-content {
		gap: 20px;
		padding-top: 4px;
	}

	body[class*="product-product-"] #multistore-content .custom-select-input::placeholder {
		font-weight: 400;
	}

	body[class*="product-product-"] .offline-stores-nav {
		margin: 14px 0 4px;
		padding-bottom: 9px;
	}

	body[class*="product-product-"] #multistore-content .offline-stores-list {
		max-height: 426px;
		padding-right: 0;
	}

	/* рядок магазину на мобілці: назва SemiBold 14/18, години #9E9E9E, стрілка #898E86 */
	body[class*="product-product-"] #multistore-content .offline-stores-block-info > div:first-child > .offline-stores-block-row:first-child {
		font-weight: 600;
		line-height: 18px;
	}

	body[class*="product-product-"] #multistore-content .offline-stores-block-row {
		color: #9E9E9E;
	}

	/* крок рядків 76: у Figma лінія нульової висоти, у нас рамка 1px — забираємо її з відступу */
	body[class*="product-product-"] #multistore-content .offline-stores-block + .offline-stores-block {
		padding-top: 15px;
	}
}

/* ≤370: ряд «кількість · кошик · серце» потребує 371 — на 360 серце виїжджало за картку на 11px, на 320 на 50.
   Кількість 72, серце 44; ≤349 ще й кнопка без іконки */
@media (max-width: 370px) {
	body[class*="product-product-"] .product-right .qty {
		width: 72px;
	}

	body[class*="product-product-"] .product-right .qty div {
		width: 24px;
	}

	body[class*="product-product-"] .product-right .product-buttons .made-btn {
		min-width: 0;
		padding: 0 8px;
		white-space: nowrap;
		overflow: hidden;
	}

	body[class*="product-product-"] .group-rad .wishlist {
		width: 44px;
	}
}

@media (max-width: 349px) {
	body[class*="product-product-"] #product .product-buttons .made-btn::before {
		display: none;
	}
}

/* згортання секцій без стрибка в кінці: відступ над вмістом (і «мінус останній рядок» характеристик) їде разом з висотою.
   Bootstrap на початку hide одразу ставить заголовку aria-expanded="false" — за ним і відрізняємо згортання від розгортання */
body[class*="product-product-"] .product-section .collapse-title[aria-expanded="false"] + .collapse-content.collapsing,
body[class*="product-product-"] #tab-sstock:has(.collapse-title[aria-expanded="false"]) #multistore-content.collapsing {
	padding-top: 0;
	margin-bottom: 0;
	transition: height 0.35s ease, padding-top 0.35s ease, margin-bottom 0.35s ease;
}

/* у характеристик «мінус останній рядок» стоїть на #attribute-content (ID) — загальне правило вище його не перебиває */
body[class*="product-product-"] #tab-attribute .collapse-title[aria-expanded="false"] + #attribute-content.collapsing {
	margin-bottom: 0;
}

/* ---------- Сірі хрестики: при наведенні плавно стають чорними (прохання дизайнера, 2026-09-30) ---------- */
/* бокове меню, мобільний каталог, чипи вибраних фільтрів категорії, попап «Натякнути на подарунок».
   Наведення — лише там, де є мишка: на тачі :hover «залипає» після тапу */
.vv-sidebar-close,
header .header-catalog-close {
	transition: color 0.2s ease;
}

/* у чипі хрестик був картинкою — тепер маска, щоб колір можна було змінити */
body[class*="product-category-"] .category-page .ocf-selected-row .ocf-selected::after {
	background: var(--vv-muted);
	-webkit-mask: var(--vv-x-muted) center / 22px no-repeat;
	mask: var(--vv-x-muted) center / 22px no-repeat;
	transition: background-color 0.2s ease;
}

body[class*="product-product-"] .gift-hint-modal .modal-close::before {
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
	.vv-sidebar-close:hover,
	header .header-catalog-close:hover {
		color: var(--vv-black);
	}

	body[class*="product-category-"] .category-page .ocf-selected-row .ocf-selected:hover::after,
	body[class*="product-product-"] .gift-hint-modal .modal-close:hover::before {
		background-color: var(--vv-black);
	}
}

/* ряд ціни: у рідин поряд ще плашка «Економія від N шт.» — на 768–1099 (права колонка ~282) чип бонусів виїжджав
   за картку на 122px. Дозволяємо перенос: де все влазить, ряд лишається одним */
body[class*="product-product-"] .product-right .price-block {
	flex-wrap: wrap;
	row-gap: 8px;
}

/* ---------- Варіанти рідин (кілька груп hpmodel) — як 70:9393 (рішення Юри 2026-09-30) ---------- */
/* девайси (одна група) лишаються як 70:13512: підпис → плитки 16, плитки через 8. У рідин: підпис 20 → плитки 8,
   фото-плитки 72.39 розкладені на всю ширину (8 у ряд при 666 — крок 12.41), ряди через 12.41; між групами 28 — gap теми.
   Макет рідини лише десктопний — мобілка як у девайса */
@media (min-width: 768px) {
	body[class*="product-product-"] #hpmodel .hpm-selected-display,
	body[class*="product-product-"] #hpmodel .hpm-group[data-title]:has(> .hpm-selected-display:not(.hpm-has-selection))::before {
		line-height: 20px;
	}

	body[class*="product-product-"] #hpmodel:has(> .hpm-group + .hpm-group) .hpm-selected-display,
	body[class*="product-product-"] #hpmodel:has(> .hpm-group + .hpm-group) .hpm-group[data-title]:has(> .hpm-selected-display:not(.hpm-has-selection))::before {
		margin-bottom: 8px;
	}

}

/* розкладка на всю ширину — лише там, де права колонка широка; на 768–1100 у ряд 3–4 плитки й проміжки виходили по 32 */
@media (min-width: 1101px) {
	body[class*="product-product-"] #hpmodel:has(> .hpm-group + .hpm-group) .hpm-type-images:not(:has(.hcol-attribute)) {
		display: grid;
		grid-template-columns: repeat(auto-fill, 72.39px);
		justify-content: space-between;
		gap: 12.41px 8px;
	}
}

/* ---------- Чекаут (Figma: десктоп 99:14054 — гість, крок 1; 99:14248 — пройдений крок, розгорнуті «Доставка» й
   «Для зв'язку»; мобілка 99:13825 — усі кроки розгорнуті) ---------- */
/* Шаблон checkout/checkout.twig, стара верстка — checkout.css (грузиться перед brand.css). common.js після кожної зміни
   кошика підміняє .checkout-product-list, .checkout-data, .checkout-delivery-data і #submit — стилі тримаються на цих класах.
   Рішення Юри (2026-09-30): «Не телефонувати мені» лишається радіо в кроці 3 (чекбокса під кнопкою, як у макеті, нема);
   шапки кроків усі 16 (у макеті закриті 18); пройдений крок відкривається кліком по шапці з шевроном замість «Змінити». */

/* крихти 16 під шапкою, заголовок на 12 нижче, картки ще на 12 (99:14057) */
body.checkout-checkout #checkout ul.breadcrumb {
	margin: 0 !important;
	padding: 16px 0 0;
	background: none;
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
}

body.checkout-checkout #checkout .breadcrumb li,
body.checkout-checkout #checkout .breadcrumb a {
	color: var(--vv-muted);
	font-size: 12px;
	line-height: 15px;
}

body.checkout-checkout #checkout .breadcrumb li {
	display: inline-flex;
	align-items: baseline;
}

body.checkout-checkout #checkout .breadcrumb li + li::before {
	content: "·";
	width: auto;
	height: auto;
	margin: 0 4px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--vv-muted);
	font-weight: 700;
	vertical-align: baseline;
}

body.checkout-checkout #checkout .checkout-title {
	margin: 12px 0 0;
	color: #1F1F22;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}

/* колонки 1012 + 580 через 8 (на 1680) */
body.checkout-checkout #checkout .checkout-wrapper {
	grid-template-columns: minmax(0, 1012fr) minmax(0, 580fr);
	align-items: start;
	gap: 8px;
	margin-top: 12px;
}

body.checkout-checkout #checkout .checkout-content {
	gap: 8px;
}

body.checkout-checkout #checkout .checkout-block {
	padding: 20px;
	border-radius: 0;
	transition: none;
}

body.checkout-checkout #checkout .checkout-form__title {
	margin: 0;
	color: #1F1F22;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

/* --- кроки: шапка = заголовок + шеврон 22 (відкритий — вгору), контент на 12 нижче (у «Для зв'язку» й «Оплаті» — 20) */
body.checkout-checkout #checkout .checkout-container-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

body.checkout-checkout #checkout .checkout-container-header__inner {
	gap: 8px;
	min-width: 0;
}

/* пройдений крок: під заголовком підсумок («Іван Кучерявий, +38…, email»), шеврон по центру (99:14260) */
body.checkout-checkout #checkout .checkout-container-header__content {
	overflow-wrap: anywhere;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

body.checkout-checkout #checkout .checkout-block-closed .checkout-container-header {
	align-items: center;
	cursor: pointer;
}

body.checkout-checkout #checkout .checkout-container-header__btn {
	display: flex;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-black);
	pointer-events: none;
}

body.checkout-checkout #checkout .checkout-block-closed .checkout-container-header__btn {
	pointer-events: auto;
	cursor: pointer;
}

body.checkout-checkout #checkout .checkout-container-header__btn .vv-icon {
	width: 22px;
	height: 22px;
	transform: rotate(180deg);
}

body.checkout-checkout #checkout .checkout-block-hidden .checkout-container-header__btn .vv-icon,
body.checkout-checkout #checkout .checkout-block-closed .checkout-container-header__btn .vv-icon {
	transform: none;
}

body.checkout-checkout #checkout .checkout-container-header + .checkout-block-content-to-hide {
	margin-top: 12px;
}

body.checkout-checkout #checkout #checkout-container-3 .checkout-container-header + .checkout-block-content-to-hide,
body.checkout-checkout #checkout #checkout-container-4 .checkout-container-header + .checkout-block-content-to-hide {
	margin-top: 20px;
}

/* гість: рядок SMS, поля — на 24 нижче */
body.checkout-checkout #checkout .checkout-block-content-to-hide + .checkout-block-content-to-hide {
	margin-top: 24px;
}

/* --- кнопки: лайм 14 Medium, «Продовжити» 176×45, неактивна #D1D3CC */
body.checkout-checkout #checkout .checkout-button {
	margin: 0;
	padding: 14px 40px;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	transition: background-color .15s;
}

body.checkout-checkout #checkout .checkout-button:not(:disabled):hover {
	background: var(--vv-brand-hover);
}

body.checkout-checkout #checkout .checkout-button:disabled {
	background: #D1D3CC;
	color: var(--vv-black);
}

body.checkout-checkout #checkout .checkout-next {
	margin-top: 20px;
}

/* --- крок 1 (99:14066): «Авторизація по СМС» + опис 12/16 на сірому, поля 3 + 2 */
body.checkout-checkout #checkout .checkout-contact-data__row {
	display: flex;
	gap: 8px;
	margin: 0;
}

body.checkout-checkout #checkout .checkout-contact-data__row .checkout-button {
	flex: 1 1 0;
	min-width: 0;
	padding: 16px 22px;
}

body.checkout-checkout #checkout .checkout-contact-data__description {
	display: flex;
	flex: 0 1 491.8px;
	align-items: center;
	padding: 4px 8px;
	border-radius: 0;
	background: var(--vv-surface);
	color: var(--vv-black);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

body.checkout-checkout #checkout .checkout-contact-data__wrapper {
	gap: 12px;
	margin: 0;
}

body.checkout-checkout #checkout .checkout-contact-data__wrapper-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 8px;
}

body.checkout-checkout #checkout .checkout-contact-data__wrapper-row--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* підписів над полями в макеті нема — їх текст у плейсхолдері («Ім’я*») */
body.checkout-checkout #checkout .checkout-contact-data__wrapper .checkout-form__label {
	display: none;
}

/* другий отримувач — ті самі поля під радіо */
body.checkout-checkout #checkout #recipient-container:has(*) {
	margin: 12px 0 0;
}

/* --- поля: рамка #DCDDDB, 41 заввишки, текст 14, плейсхолдер #B9B9B9, фокус — чорна рамка */
body.checkout-checkout #checkout .checkout-form__input {
	height: 41px;
	padding: 11px;
	border: 1px solid var(--vv-field-border);
	border-radius: 0;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

body.checkout-checkout #checkout textarea.checkout-form__input {
	height: 71px;
	padding: 10px 11px;
	line-height: 15px;
	resize: vertical;
}

body.checkout-checkout #checkout .checkout-form__input::placeholder {
	color: #B9B9B9;
	font-weight: 400;
	opacity: 1;
}

/* у макеті плейсхолдер коментаря світліший за поля (99:13944) */
body.checkout-checkout #checkout textarea.checkout-form__input::placeholder {
	color: var(--vv-field-border);
}

body.checkout-checkout #checkout .checkout-form__input:focus {
	border-color: var(--vv-black);
	outline: 0;
}

body.checkout-checkout #checkout .checkout-input-error,
body.checkout-checkout #checkout .checkout-input-error:focus {
	border-color: var(--vv-red);
}

body.checkout-checkout #checkout .checkout-error-message {
	color: var(--vv-red);
	font-size: 12px;
	line-height: 15px;
}

/* --- «Отримувач замовлення»: підпис 14 Medium сірий, радіо через 32 (перше займає 226) */
body.checkout-checkout #checkout .checkout-recipient {
	gap: 12px;
	margin: 24px 0 0;
}

body.checkout-checkout #checkout .checkout-form__label {
	margin: 0;
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 15px;
}

body.checkout-checkout #checkout .checkout-form__input:required + .checkout-form__label::after {
	content: none;
}

body.checkout-checkout #checkout .checkout-form__radio-row {
	flex-direction: row;
	gap: 32px;
}

body.checkout-checkout #checkout .checkout-form__radio-row > .checkout-form__radio-label:first-child {
	flex: 0 0 226px;
}

/* підпис над групою радіо (способи доставки) — як «Отримувач замовлення», на 12 вище */
body.checkout-checkout #checkout .checkout-form__input-block:has(> .checkout-form__radio-col) {
	gap: 12px;
}

/* --- радіо 18: порожнє — рамка #DCDDDB, вибране — лайм з чорною крапкою 8 */
body.checkout-checkout #checkout .checkout-form__radio-col {
	gap: 16px;
}

body.checkout-checkout #checkout .checkout-form__radio-label {
	gap: 8px;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 15px;
}

body.checkout-checkout #checkout .checkout-form__radio-custom {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--vv-field-border);
	background: var(--vv-white);
	box-sizing: border-box;
}

body.checkout-checkout #checkout .checkout-form__radio:checked + .checkout-form__radio-custom {
	border: 4px solid var(--vv-brand);
	background: var(--vv-brand);
}

body.checkout-checkout #checkout .checkout-form__radio:checked + .checkout-form__radio-custom::before {
	width: 8px;
	height: 8px;
	background: var(--vv-black);
}

/* «і» 20 #D1D3CC на 4 від тексту; тултіп — чорна плашка без радіуса, як у решті ребрендингу */
body.checkout-checkout #checkout .checkout-form__radio-label__icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-left: -4px;
}

body.checkout-checkout #checkout .checkout-form__radio-label__icon::after {
	padding: 8px 12px;
	border-radius: 0;
	background: var(--vv-black);
	box-shadow: none;
	color: var(--vv-white);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

/* --- крок 3 (99:14286): питання 14 Medium, радіо на 12 нижче, між групами й до коментаря — 20 */
body.checkout-checkout #checkout .checkout-text {
	margin: 0 0 12px;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 15px;
}

body.checkout-checkout #checkout .checkout-form__radio-col + .checkout-text,
body.checkout-checkout #checkout .checkout-form__radio-col + textarea {
	margin-top: 20px;
}

/* --- крок 2 (99:14277): місто — рамка з відступом 20, піна 20 сіра, текст 14; стрілки select2 в макеті нема */
body.checkout-checkout #checkout #checkout-container-2 .checkout-input-wrapper > div > .checkout-form__label {
	display: none;
}

body.checkout-checkout #checkout .checkout-input-wrapper,
body.checkout-checkout #checkout .checkout-input-wrapper__inner {
	gap: 20px;
}

body.checkout-checkout #checkout .checkout-form__delivery-input-block {
	border: 1px solid var(--vv-field-border);
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-form__delivery-input-block .icon {
	left: 19px;
	height: 20px;
}

body.checkout-checkout #checkout .checkout-form__delivery-input-block .icon img {
	width: 20px;
	height: 20px;
}

body.checkout-checkout #checkout .checkout-form__delivery-input-block .select2-container--default .select2-selection--single {
	padding: 19px 19px 19px 47px;
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-form__delivery-input-block .select2-selection__rendered {
	padding: 0;
	color: var(--vv-black);
	font-size: 14px;
	line-height: 20px;
}

body.checkout-checkout #checkout #shipping_address_city:has(option:checked[value=""]) + .select2 .select2-selection__rendered {
	color: var(--vv-muted);
}

body.checkout-checkout #checkout .checkout-form__delivery-input-block .select2-selection__arrow {
	display: none;
}

/* способи доставки й відділення — поза макетом, у тій самій мові: рамки #DCDDDB без радіуса */
body.checkout-checkout #checkout .checkout-form__delivery-block {
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--vv-field-border);
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-form__delivery-label {
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

body.checkout-checkout #checkout .checkout_circle-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 4px solid var(--vv-brand);
	background: var(--vv-brand);
	box-sizing: border-box;
}

body.checkout-checkout #checkout .checkout_circle-icon::before {
	width: 8px;
	height: 8px;
	background: var(--vv-black);
}

body.checkout-checkout #checkout .checkout-form__delivery-input-custom,
body.checkout-checkout #checkout .checkout-form__delivery-block .select2-container--default .select2-selection--single {
	border: 1px solid var(--vv-field-border) !important;
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-form__delivery-block .select2-selection__rendered {
	font-size: 14px;
}

/* --- права колонка: «Ваше замовлення» (99:14122) — заголовок, «У кошику N товари:» 12 сірий, рядки через 16 з лінією */
body.checkout-checkout #checkout .checkout-form__product-wrapper_label {
	margin: 1px 0 0;
	font-size: 12px;
	line-height: 15px;
}

body.checkout-checkout #checkout .checkout-product-list {
	gap: 16px;
	margin: 20px 0 0;
}

body.checkout-checkout #checkout #checkout-products-block-btn {
	display: flex;
}

body.checkout-checkout #checkout #checkout-products-block-btn:has(button) {
	margin-top: 8px;
}

/* рядок товару: фото 86, праворуч назва + (бонус · лічильник · ціна) по центру фото, під рядком лінія через 16 */
body.checkout-checkout #checkout .checkout-product-block {
	grid-template-columns: 86px minmax(0, 1fr);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas: "image ." "image head" "image content" "image .";
	column-gap: 8px;
	row-gap: 0;
	align-items: stretch;
	padding: 0 0 16px;
	border: 0;
	border-bottom: 1px solid #EFEFEF;
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-product-block__image {
	width: 86px;
	height: 86px;
	align-self: center;
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-product-block__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.checkout-checkout #checkout .checkout-product-block__head .checkout-product-block__row {
	gap: 12px;
}

body.checkout-checkout #checkout .checkout-product-block__title,
body.checkout-checkout #checkout .checkout-product-block__title a {
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

body.checkout-checkout #checkout .checkout-product-model {
	display: none;
}

body.checkout-checkout #checkout .checkout-product-block__delete {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

/* смітник сірий, при наведенні плавно чорніє — як сірі хрестики (Юра, 2026-09-30); картинку замінює маска,
   щоб колір можна було змінити. Наведення — лише з мишкою: на тачі :hover «залипає» після тапу */
body.checkout-checkout #checkout .checkout-product-block__delete {
	position: relative;
}

body.checkout-checkout #checkout .checkout-product-block__delete img {
	width: 20px;
	height: 20px;
	visibility: hidden;
}

body.checkout-checkout #checkout .checkout-product-block__delete::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vv-muted);
	-webkit-mask: url("/assets/brand/checkout/delete.svg") center / 20px no-repeat;
	mask: url("/assets/brand/checkout/delete.svg") center / 20px no-repeat;
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
	body.checkout-checkout #checkout .checkout-product-block__delete:hover::before {
		background-color: var(--vv-black);
	}
}

/* бонус ліворуч, група «лічильник + ціна» (через 26) праворуч; між ними щонайменше 7 (мобілка 99:13984).
   Не влазить (вузький екран, чотиризначна сума) — група переноситься під бонус, лишаючись праворуч */
body.checkout-checkout #checkout .checkout-product-block__content {
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 7px;
	margin-top: 8px;
}

body.checkout-checkout #checkout .checkout-product-block__buy {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-left: auto;
}

/* бонус: сірий чип 34 — блискавка 22 + «+35₴» 12 */
body.checkout-checkout #checkout .checkout-product-block__discount {
	flex: 0 0 auto;
	gap: 4px;
	min-width: 73px;
	padding: 6px 8px;
	border-radius: 0;
	background: var(--vv-surface);
	color: #211A23;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
}

body.checkout-checkout #checkout .checkout-product-block__discount .icon,
body.checkout-checkout #checkout .checkout-product-block__discount .icon .vv-icon {
	width: 22px;
	height: 22px;
}

/* лічильник 82×34: рамка #E1E1E1 без перегородок, «−»/«+» 20, кількість 14 */
body.checkout-checkout #checkout .checkout-product-block__counter {
	flex: 0 0 auto;
	align-items: stretch;
	height: 34px;
	padding: 0;
	border: 1px solid #E1E1E1;
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-product-block__counter-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	padding: 0;
	color: var(--vv-black);
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
}

body.checkout-checkout #checkout .checkout-product-block__counter-text {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	color: var(--vv-black);
	font-size: 14px;
	line-height: 17px;
}

/* ціна 16 Medium, «₴» Regular; зі знижкою — стара 12 сіра закреслена над червоною */
/* мін. ширина — як у макеті (44), щоб лічильники в рядках стояли в один стовпчик */
body.checkout-checkout #checkout .checkout-product-block__price {
	flex: 0 0 auto;
	align-items: flex-start;
	min-width: 44px;
}

body.checkout-checkout #checkout .checkout-product-block__price-old {
	color: var(--vv-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	text-decoration: line-through;
	white-space: nowrap;
}

body.checkout-checkout #checkout .checkout-product-block__price-actual {
	display: flex;
	align-items: flex-end;
	gap: 1px;
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	white-space: nowrap;
}

body.checkout-checkout #checkout .checkout-product-block__price-actual--special {
	color: var(--vv-red);
}

body.checkout-checkout #checkout .vv-cur {
	font-weight: 400;
	line-height: 20px;
}

/* «Показати усі товари (3)» — синє посилання 13 Medium */
body.checkout-checkout #checkout .checkout-inline-button {
	padding: 0;
	color: var(--vv-tab-blue);
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	text-underline-position: from-font;
}

/* «Разом дешевше» — той самий рядок, лише рамка набору #EFEFEF без радіуса */
body.checkout-checkout #checkout .checkout-bundle-block {
	padding: 0 0 16px;
	border: 0;
	border-bottom: 1px solid #EFEFEF;
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-bundle-block .checkout-product-block {
	padding: 12px 0;
}

body.checkout-checkout #checkout .checkout-tc-bundle__discount-pill {
	border-radius: 0;
	background: var(--vv-brand);
}

/* --- акордеони (подарунки, бонуси, промокоди): 60 заввишки, «+» 20; до «+» 4 — на мобілці «Подарункове
   упакування/листівка» має влізти в рядок (у макеті до іконки 7) */
body.checkout-checkout #checkout .checkout-block-top {
	gap: 4px;
}

body.checkout-checkout #checkout .checkout-form__title--points {
	display: flex;
	align-items: center;
	gap: 8px;
}

body.checkout-checkout #checkout .checkout-form__title-note {
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

body.checkout-checkout #checkout .checkout-toggle-button {
	display: flex;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	padding: 0;
}

body.checkout-checkout #checkout .checkout-toggle-button img {
	width: 20px;
	height: 20px;
}

/* вміст акордеонів — поза макетом, у тій самій мові: поле + кнопка 41, плашки без радіуса, «+» подарунка лаймовий */
body.checkout-checkout #checkout .checkout-block-input-row .checkout-button {
	height: auto;
	padding: 12px 22px;
}

body.checkout-checkout #checkout .checkout-coupon-disabled,
body.checkout-checkout #checkout .checkout-applied-coupon {
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-coupon-disabled {
	background: var(--vv-surface);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

body.checkout-checkout #checkout .checkout-coupon-sticker {
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-block-product-wrapper__block-image {
	border-radius: 0;
}

body.checkout-checkout #checkout .checkout-block-product-wrapper__block-row {
	border-top-color: #EFEFEF;
}

body.checkout-checkout #checkout .checkout-product-block__add {
	width: 20px;
	height: 20px;
	border-radius: 0;
	background: var(--vv-brand);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	transition: background-color .15s;
}

body.checkout-checkout #checkout .checkout-product-block__add:hover {
	background: var(--vv-brand-hover);
}

/* --- безкоштовна доставка: блакитна плашка, подарунок 24, текст 14 з виділенням SemiBold */
body.checkout-checkout #checkout .checkout-delivery-data {
	align-items: center;
	gap: 8px;
	background: var(--vv-accent);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

body.checkout-checkout #checkout .checkout-delivery-data .icon,
body.checkout-checkout #checkout .checkout-delivery-data .icon img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

body.checkout-checkout #checkout .checkout-delivery-data .bold {
	font-weight: 600;
}

/* --- «Разом» (99:14178): рядки 14 Medium через 16, лінія, «До сплати» 16 / сума 20, кнопка на 24 нижче */
body.checkout-checkout #checkout .checkout-data .checkout-form__title {
	margin-bottom: 16px;
}

body.checkout-checkout #checkout .checkout-data__row {
	margin: 0 0 16px;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

body.checkout-checkout #checkout .checkout-data .bold {
	font-weight: 500;
}

body.checkout-checkout #checkout .checkout-data__row-total {
	align-items: center;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid #EFEFEF;
	font-size: 16px;
	line-height: 18px;
}

body.checkout-checkout #checkout .checkout-data__row-total .bold {
	display: flex;
	align-items: flex-end;
	gap: 1px;
	font-size: 20px;
	line-height: 24px;
}

body.checkout-checkout #checkout .checkout-data__row > .bold {
	display: flex;
	align-items: flex-end;
	gap: 1px;
}

body.checkout-checkout #checkout .checkout-data__row .vv-cur {
	line-height: inherit;
}

body.checkout-checkout #checkout .checkout-data__row__delivery {
	text-align: right;
}

/* «Замовлення підтверджую»: на всю ширину; поки кроки не пройдені — лайм 50% із сірим текстом */
body.checkout-checkout #checkout #submit {
	width: 100%;
	margin-top: 24px;
	padding: 14px 22px;
}

body.checkout-checkout #checkout #submit:disabled {
	background: var(--vv-brand);
	color: var(--vv-muted);
	opacity: .5;
}

/* --- 1024–1199: права колонка вужча — бонус/лічильник/ціна переходять під фото */
@media (max-width: 1199px) {
	body.checkout-checkout #checkout .checkout-product-block {
		grid-template-rows: 1fr auto 1fr auto;
		grid-template-areas: "image ." "image head" "image ." "content content";
	}

	body.checkout-checkout #checkout .checkout-product-block__content {
		margin-top: 12px;
	}
}

/* --- ≤1023: одна колонка (підсумок під кроками) */
@media (max-width: 1023px) {
	body.checkout-checkout #checkout .checkout-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	body.checkout-checkout #checkout .checkout-product-block {
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: "image ." "image head" "image content" "image .";
	}

	body.checkout-checkout #checkout .checkout-product-block__content {
		margin-top: 8px;
	}
}

/* --- мобілка ≤767 (99:13825, 375): поля сторінки 12, картки через 4 з відступом 12, заголовка сторінки нема,
   поля й радіо в стовпчик, кнопки на всю ширину */
@media (max-width: 767px) {
	body.checkout-checkout #checkout.container {
		padding: 0 12px;
	}

	/* текст крихт на 9 під шапкою 48 — як на сторінці товару, сторінка стартує на 5 під шапку */
	body.checkout-checkout #checkout ul.breadcrumb {
		margin: 0 !important;
		padding: 14px 0 0;
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	body.checkout-checkout #checkout ul.breadcrumb::-webkit-scrollbar {
		display: none;
	}

	body.checkout-checkout #checkout .checkout-title {
		display: none;
	}

	body.checkout-checkout #checkout .checkout-wrapper,
	body.checkout-checkout #checkout .checkout-content {
		gap: 4px;
	}

	body.checkout-checkout #checkout .checkout-block {
		padding: 12px;
	}

	body.checkout-checkout #checkout .checkout-contact-data__row {
		flex-direction: column;
	}

	body.checkout-checkout #checkout .checkout-contact-data__row .checkout-button {
		flex: 0 0 auto;
		padding: 12px 22px;
	}

	body.checkout-checkout #checkout .checkout-contact-data__description {
		flex: 0 0 auto;
		padding: 8px;
	}

	body.checkout-checkout #checkout .checkout-block-content-to-hide + .checkout-block-content-to-hide,
	body.checkout-checkout #checkout .checkout-recipient {
		margin-top: 16px;
	}

	body.checkout-checkout #checkout .checkout-contact-data__wrapper,
	body.checkout-checkout #checkout .checkout-contact-data__wrapper-row,
	body.checkout-checkout #checkout .checkout-contact-data__wrapper-row--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	body.checkout-checkout #checkout .checkout-recipient .checkout-form__label {
		font-size: 12px;
		line-height: 13px;
	}

	body.checkout-checkout #checkout .checkout-form__radio-row {
		flex-direction: column;
		gap: 12px;
	}

	body.checkout-checkout #checkout .checkout-form__radio-row > .checkout-form__radio-label:first-child {
		flex: 0 0 auto;
	}

	body.checkout-checkout #checkout .checkout-form__radio-col {
		gap: 12px;
	}

	/* перше питання кроку 3 у два рядки — 14/20 */
	body.checkout-checkout #checkout #checkout-container-3 .checkout-text:first-child {
		line-height: 20px;
	}

	body.checkout-checkout #checkout .checkout-button {
		width: 100%;
		padding: 12px 22px;
	}

	body.checkout-checkout #checkout .checkout-form__delivery-input-block .icon {
		left: 11px;
	}

	body.checkout-checkout #checkout .checkout-form__delivery-input-block .select2-container--default .select2-selection--single {
		padding: 11px 11px 11px 39px;
	}

	body.checkout-checkout #checkout .checkout-form__delivery-block {
		padding: 12px;
	}

	/* права колонка: рядки «Разом» через 12, кнопка на 16 нижче (99:14027) */
	body.checkout-checkout #checkout .checkout-data .checkout-form__title,
	body.checkout-checkout #checkout .checkout-data__row {
		margin-bottom: 12px;
	}

	body.checkout-checkout #checkout .checkout-data__row-total {
		margin: 0;
		padding-top: 12px;
	}

	body.checkout-checkout #checkout #submit {
		margin-top: 16px;
		padding: 14px 22px;
	}

	body.checkout-checkout #checkout .checkout-delivery-data {
		padding: 12px;
	}
}

/* ---------- Кошик — модалка (Figma: десктоп 107:8868 / модалка 107:9447, порожній 101:810 / 101:1389 — 1440; мобілка 375 —
   з товарами 107:10061, безкоштовна доставка 107:10613, порожній 107:9550) ---------- */
/* Шаблон madeshop/cart.twig (ocmod не патчить), вантажиться в #cart-panel (.spanel) на кожній сторінці; стара верстка —
   stylesheet.css (#cart …, брейкпоінти 889/767/577), тому тут усе під #cart-panel #cart. Рекомендації — модуль featured 47
   (рішення Юри — лишити), картки ті самі vv-card. Рішення Юри: без «при оплаті онлайн» у плашці (поріг від способу оплати
   не залежить), кнопка скрізь «Перейти до оформлення» (на мобілці в макеті — «Оформити замовлення»). */

/* оверлей — сірий 50%, як під сайдбаром; модалка 1220 по центру, відступ 40 */
#cart-panel.spanel {
	padding: 20px;
	background-color: rgba(158, 158, 158, 0.5) !important;
}

#cart-panel.spanel.open {
	display: flex !important;
}

#cart-panel #cart {
	width: 100%;
	max-width: 1220px;
	height: auto;
	margin: auto;
	padding: 0;
	border-radius: 0;
	overflow: visible;
}

#cart-panel #cart .content {
	position: relative;
	height: auto;
	max-height: none;
	padding: 40px;
	border-radius: 0;
	overflow: visible;
}

/* «Товарів у кошику 2»: 20 SemiBold + лічильник 16 сірий; хрестик 24 у куті (11 від краю), сірий → чорний при наведенні */
#cart-panel #cart .title-wrapper {
	margin: 0 0 24px;
}

/* flex: пробіл перед <span> з лічильником у тексті мови інакше додавався до відступу 8 (було 13); лічильник — по низу
   рядка (107:9453) */
#cart-panel #cart .title {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	color: #1F1F22;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}

#cart-panel #cart .title span {
	margin-left: 0;
	color: var(--vv-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}

#cart-panel #cart .close-cart {
	position: absolute;
	top: 11.5px;
	right: 11px;
	width: 24px;
	height: 24px;
	background: var(--vv-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L12 12M12 12L6 18M12 12L18 18M12 12L6 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L12 12M12 12L6 18M12 12L18 18M12 12L6 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
	transition: background-color 0.2s ease;
}

#cart-panel #cart .close-cart svg {
	display: none;
}

@media (hover: hover) {
	#cart-panel #cart .close-cart:hover {
		background-color: var(--vv-black);
	}
}

/* --- список 720 + колонка 400 через 20 */
#cart-panel #cart .cart-wrapper {
	gap: 20px;
	align-items: flex-start;
	margin: 0;
}

#cart-panel #cart .list-offer {
	flex: 1 1 0;
	min-width: 0;
}

#cart-panel #cart .cart-list {
	padding: 0;
	border-top: 1px solid #EFEFEF;
}

/* рядок: лінія зверху, 22 → фото 86 → 16 → лінія (101:2007) */
#cart-panel #cart .cart-product-list > .cart-item-card {
	margin: 0;
	padding: 22px 0 16px;
	border: 0;
	border-bottom: 1px solid #EFEFEF;
	border-radius: 0;
}

#cart-panel #cart .cart-item-card__box,
#cart-panel #cart .trow {
	margin: 0;
	padding: 0;
	border: 0;
}

#cart-panel #cart .trow .tdes {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	padding: 0;
}

#cart-panel #cart .trow .timage {
	position: relative;
	display: flex;
	flex: 0 0 86px;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
}

#cart-panel #cart .trow .timage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* праворуч від фото: зверху назва + код, знизу бонус · лічильник · ціна; смітник 20 у куті */
#cart-panel #cart .trow .tblock-body {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
	padding: 0;
}

#cart-panel #cart .tblock-header {
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	margin: 0;
	padding-right: 32px;
	text-align: left;
}

/* мініатюра для вузької мобілки (фото в шапці рядка) — на десктопі не потрібна */
#cart-panel #cart .trow .timage-mini {
	display: none;
}

#cart-panel #cart .tblock-header-inner {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#cart-panel #cart .pname,
#cart-panel #cart .pname a {
	margin: 0;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

#cart-panel #cart .model {
	color: var(--vv-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 15px;
}

#cart-panel #cart .pdescription-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
	margin: 0;
}

#cart-panel #cart .pdescription-block .options {
	flex: 0 0 100%;
}

#cart-panel #cart .reward-wrap {
	margin-right: 7px;
	padding: 0 !important;
}

/* бонус: сірий чип 34 — блискавка 22 + «+35₴» 12 */
#cart-panel #cart .reward {
	gap: 4px;
	padding: 6px 8px;
	border-radius: 0;
	background: var(--vv-surface);
	color: #211A23;
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
}

#cart-panel #cart .reward .vv-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
}

/* лічильник 82×34 (рамка #E1E1E1 без перегородок, «−»/«+» 20) і ціна через 26 — праворуч */
#cart-panel #cart .trow .tqty {
	width: auto;
	margin-left: auto;
	padding: 0;
}

#cart-panel #cart .qty {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	width: auto;
	height: 34px;
	padding: 0;
	border: 1px solid #E1E1E1;
	border-radius: 0;
}

#cart-panel #cart .qty .minus,
#cart-panel #cart .qty .plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: auto;
	padding: 0;
	color: var(--vv-black);
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	cursor: pointer;
}

#cart-panel #cart .qty .minus i,
#cart-panel #cart .qty .plus i {
	display: none;
}

/* стара тема малює «−»/«+» абсолютними смужками в ::before/::after — скидаємо, лишаємо символи */
#cart-panel #cart .qty .minus::before,
#cart-panel #cart .qty .plus::before {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	background: none;
	transform: none;
}

#cart-panel #cart .qty .minus::after,
#cart-panel #cart .qty .plus::after {
	content: none;
}

#cart-panel #cart .qty .minus::before {
	content: "-";
}

#cart-panel #cart .qty .plus::before {
	content: "+";
}

#cart-panel #cart .qty input {
	width: 26px;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-black);
	font-size: 14px;
	line-height: 17px;
	text-align: center;
}

#cart-panel #cart .trow .tprice {
	position: static;
	align-self: center;
	width: auto;
	min-width: 44px;
	margin-left: 26px;
	text-align: left;
}

#cart-panel #cart .trow .price-total {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: end;
	gap: 0 1px;
	color: var(--vv-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	white-space: nowrap;
}

#cart-panel #cart .trow .price-total .price-old {
	grid-column: 1 / -1;
	color: var(--vv-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	text-decoration: line-through;
}

#cart-panel #cart .trow .price-value {
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
}

/* « грн» → «₴» Regular */
#cart-panel #cart .price-currency {
	font-size: 0;
	line-height: 0;
}

#cart-panel #cart .price-currency::after {
	content: "₴";
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}

#cart-panel #cart .trow .price-total--special .price-value,
#cart-panel #cart .trow .price-total--special .price-currency::after {
	color: var(--vv-red);
}

/* смітник сірий, при наведенні плавно чорніє — як у чекауті; стара svg схована, малює маска */
#cart-panel #cart .cart-remove {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	background: var(--vv-muted);
	-webkit-mask: url("/assets/brand/checkout/delete.svg") center / 20px no-repeat;
	mask: url("/assets/brand/checkout/delete.svg") center / 20px no-repeat;
	transition: background-color 0.2s ease;
}

#cart-panel #cart .cart-remove svg {
	display: none;
}

@media (hover: hover) {
	#cart-panel #cart .cart-remove:hover {
		background-color: var(--vv-black);
	}
}

/* «Разом дешевше» — той самий рядок */
#cart-panel #cart .trow-bundle .tblock-body {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}

#cart-panel #cart .trow-bundle .cart-remove {
	position: relative;
	flex: 0 0 20px;
}

#cart-panel #cart .trow-bundle .pname {
	font-weight: 600;
}

#cart-panel #cart .trow-bundle-item,
#cart-panel #cart .trow-bundle-total {
	margin-top: 12px;
}

#cart-panel #cart .tc-sum__discount {
	border-radius: 0;
	background: var(--vv-brand);
}

/* «Показати усі товари (3)» — синє посилання 13 Medium */
#cart-panel #cart .show-more-button {
	margin-top: 8px;
	color: var(--vv-tab-blue);
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	text-decoration: underline;
	text-underline-position: from-font;
	cursor: pointer;
}

/* --- колонка 400 (101:2071): «Загальна сума 678₴», плашка доставки, «Перейти до оформлення»; між блоками 12 */
#cart-panel #cart .cart-checkout-wrapper {
	display: flex;
	flex: 0 0 400px;
	flex-direction: column;
	gap: 12px;
	max-width: 400px;
}

#cart-panel #cart .cart-checkout {
	display: contents;
}

#cart-panel #cart .total-block {
	order: -1;
	width: 100%;
	margin: 0;
}

#cart-panel #cart .total-block td {
	padding: 0;
	border: 0;
	vertical-align: bottom;
}

#cart-panel #cart .total-block .name {
	padding-bottom: 2px;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

#cart-panel #cart .total-block .price-total {
	color: var(--vv-black);
	font-size: 24px;
	font-weight: 500;
	line-height: 29px;
	white-space: nowrap;
}

#cart-panel #cart .total-block .price-currency::after {
	font-size: 24px;
	font-weight: 500;
	line-height: 29px;
}

#cart-panel #cart .cart-checkout-btn {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 12px 42px;
	border: 0;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	text-transform: none;
	transition: background-color 0.15s;
}

/* !important — на кнопці .made-btn, а stylesheet.css дає .made-btn:hover старий жовтий #f9d76b !important */
#cart-panel #cart .cart-checkout-btn:hover {
	background: var(--vv-brand-hover) !important;
	color: var(--vv-black);
}

/* безкоштовна доставка: блакитна плашка (#7EB6FF на 40%, 107:9527), подарунок 24 + текст 14/18, під ним смуга 20 —
   лайм до поточної суми, мітка з порогом на краю лайму */
#cart-panel #cart .free-delivery-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 12px;
	border-radius: 0;
	background: rgba(126, 182, 255, 0.4);
}

#cart-panel #cart .free-delivery-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

#cart-panel #cart .free-delivery-header::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("/assets/brand/checkout/gift.svg") center / 24px no-repeat;
}

/* поріг узято (107:10613): хлопавка замість подарунка, до тексту 4, смуга лаймова на всю ширину */
#cart-panel #cart .free-delivery-block--done .free-delivery-header {
	gap: 4px;
}

#cart-panel #cart .free-delivery-block--done .free-delivery-header::before {
	background-image: url("/assets/brand/cart/party-popper.svg");
}

#cart-panel #cart .free-delivery-text {
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}

#cart-panel #cart .free-delivery-text strong {
	font-weight: 600;
}

#cart-panel #cart .progress-bar-container {
	position: relative;
	display: block;
	height: 20px;
	margin: 0;
	padding: 0;
	background: #F2F2F2;
}

#cart-panel #cart .progress-bar {
	height: 20px;
	margin: 0;
	border-radius: 0;
	background: none;
}

#cart-panel #cart .progress-bar-line {
	min-width: 52px;
	max-width: 100%;
	height: 20px;
	border-radius: 0;
	background: var(--vv-brand);
}

#cart-panel #cart .progress-bar-line-icon {
	display: none;
}

#cart-panel #cart .progress-bar-container .cart-total {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: flex-end;
	width: max(var(--vv-fill, 100%), 52px);
	max-width: 100%;
	height: 20px;
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: none;
}

#cart-panel #cart .progress-bar-container .total-value {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	display: none;
}

/* акція Hard Vandal («Додай ще 2 смаки…») — поза макетом, у тій самій мові */
#cart-panel #cart .cart-info-block {
	margin: 0;
	padding: 12px;
	border-radius: 0;
	background: var(--vv-surface);
	color: var(--vv-black);
	font-size: 14px;
	line-height: 18px;
}

#cart-panel #cart .cart-info-block .orange-btn {
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
}

/* --- «Рекомендуємо»: заголовок 18 SemiBold, картки на 12 нижче, 6 у ряд через 4 без рамок */
#cart-panel #cart .recs-wrapper {
	margin-top: 24px;
}

#cart-panel #cart .recs-wrapper .module {
	margin: 0;
}

#cart-panel #cart .recs-wrapper .h2 {
	margin: 0 0 12px;
	padding: 0;
	color: #1F1F22;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	text-transform: none;
}

#cart-panel #cart .recs-wrapper .product-thumb.vv-card {
	border: 0;
}

/* --- порожній кошик (101:1390): кошик 74, 24 → «Твій кошик поки що порожній» 24 + підзаголовок 16/22 сірий,
   28 → кнопка 406×50. Заголовок «Товарів у кошику» (без лічильника) — і на десктопі, як у заповненому (дизайнер,
   107:9454): 24 → лінія → 24 → вміст */
#cart-panel #cart .empty-cart .title-wrapper {
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #EFEFEF;
	box-sizing: content-box;
}

#cart-panel #cart .empty-cart .title span,
#cart-panel #cart .empty-cart-icon--mob {
	display: none;
}

#cart-panel #cart .empty.cart-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 406px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

#cart-panel #cart .empty-cart-icon {
	width: 74px;
	height: 74px;
	margin: 0 0 24px;
}

#cart-panel #cart .empty.cart-content h2 {
	margin: 0 0 4px;
	color: #1F1F22;
	font-size: 24px;
	font-weight: 600;
	line-height: 29px;
}

#cart-panel #cart .empty.cart-content p {
	margin: 0 0 28px;
	color: var(--vv-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
}

#cart-panel #cart .empty.cart-content a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 24px;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	transition: background-color 0.15s;
}

#cart-panel #cart .empty.cart-content a:hover {
	background: var(--vv-brand-hover);
}

#cart-panel #cart .empty-cart .recs-wrapper {
	margin-top: 23px;
}

/* --- кошик, мобілка ≤889 (107:10061 / 107:10613 / 107:9550, 375): аркуш на всю ширину без полів, усередині 12.
   З товарами — на весь екран від самого верху, «Загальна сума + Перейти до оформлення» прилипають донизу поверх нижнього
   меню (тінь угору); порожній — одразу під шапкою (у макеті 55 — стара шапка фону, на сайті 48), висота за вмістом.
   Рядок як на десктопі: фото 86 по центру висоти + праворуч назва (код на мобілці схований) і бонус · лічильник · ціна */
@media (max-width: 889px) {
	#cart-panel.spanel {
		padding: 0;
	}

	#cart-panel.spanel.open {
		display: block !important;
	}

	#cart-panel #cart {
		max-width: none;
		margin: 0;
	}

	#cart-panel #cart .content {
		min-height: 100vh;
		min-height: 100dvh;
		padding: 12px 12px 116px;
	}

	#cart-panel #cart .content.empty-cart {
		min-height: 0;
		margin-top: 48px;
		padding-bottom: 12px;
	}

	#cart-panel #cart .close-cart {
		top: 12px;
		right: 12px;
	}

	/* «Товарів у кошику 2» — 16 SemiBold, лічильник через 4; рядок 24 (хрестик), під ним 8 → лінія → 8 */
	#cart-panel #cart .title-wrapper {
		display: flex;
		align-items: center;
		min-height: 24px;
		margin: 0 0 8px;
		padding-right: 32px;
	}

	#cart-panel #cart .title {
		align-items: center;
		gap: 4px;
		font-size: 16px;
		line-height: 20px;
	}

	#cart-panel #cart .cart-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	#cart-panel #cart .list-offer,
	#cart-panel #cart .cart-checkout-wrapper {
		flex: none;
		width: 100%;
		max-width: none;
	}

	/* stylesheet.css на мобілці додає колонці ще 20 зверху — відступ дає gap 16 */
	#cart-panel #cart .cart-checkout-wrapper {
		margin-top: 0;
	}

	#cart-panel #cart .cart-product-list > .cart-item-card {
		padding: 8px 0 16px;
	}

	#cart-panel #cart .trow .tdes {
		align-items: center;
	}

	#cart-panel #cart .trow .tblock-body {
		justify-content: flex-start;
	}

	#cart-panel #cart .pname,
	#cart-panel #cart .pname a {
		display: block;
		overflow: visible;
		line-height: 1.2;
		-webkit-line-clamp: unset;
	}

	#cart-panel #cart .trow .model {
		display: none;
	}

	#cart-panel #cart .show-more-button {
		display: block;
		line-height: 1.2;
	}

	/* прилиплий низ (107:10605): біле тло з тінню вгору, поля 12; «Загальна сума» 14 + сума 20 (₴ 16 Regular) по низу
	   рядка, під ними через 8 кнопка 44 */
	#cart-panel #cart .cart-checkout {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999999;
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: auto;
		margin: 0;
		padding: 12px;
		border: 0;
		border-radius: 0;
		background: var(--vv-white);
		box-shadow: 0 -4px 17px rgba(0, 0, 0, 0.06);
	}

	#cart-panel #cart .total-block {
		order: 0;
	}

	#cart-panel #cart .total-block .name {
		padding-bottom: 0;
	}

	#cart-panel #cart .total-block .price-total {
		font-size: 20px;
		line-height: 28px;
	}

	#cart-panel #cart .total-block .price-currency::after {
		margin-left: 1px;
		font-size: 16px;
		font-weight: 400;
		line-height: 20px;
	}

	#cart-panel #cart .cart-checkout-btn {
		height: 44px;
		padding: 0 12px;
		line-height: 20px;
	}

	/* «Рекомендуємо» 16, картки на 8 нижче, 164 через 4 — ряд доходить до правого краю аркуша */
	#cart-panel #cart .recs-wrapper,
	#cart-panel #cart .empty-cart .recs-wrapper {
		margin: 16px -12px 0 0;
	}

	#cart-panel #cart .recs-wrapper .h2 {
		margin-bottom: 8px;
		font-size: 16px;
		line-height: 20px;
	}

	/* stylesheet.css ≤767 зсуває модуль на −10 з боків, контейнеру дає +10 праворуч, першій картці +10 зліва */
	#cart-panel #cart .recs-wrapper .swiper-adaptive.module {
		margin: 0;
	}

	#cart-panel #cart .recs-wrapper .swiper-container {
		padding-right: 0;
	}

	#cart-panel #cart .recs-wrapper .swiper-slide:first-child {
		margin-left: 0;
	}

	/* порожній (107:10046): кошик 60, 12 → «Твій кошик поки що порожній» 16 + підзаголовок 14/1.4 через 4, 20 → кнопка 41 */
	#cart-panel #cart .empty-cart .title-wrapper {
		margin-bottom: 8px;
		padding-bottom: 8px;
		border-bottom: 1px solid #EFEFEF;
		box-sizing: content-box;
	}

	#cart-panel #cart .empty.cart-content {
		width: 100%;
		margin: 0;
	}

	#cart-panel #cart .empty-cart-icon--desk {
		display: none;
	}

	#cart-panel #cart .empty-cart-icon--mob {
		display: block;
		width: 60px;
		height: 60px;
		margin: 0 0 12px;
	}

	#cart-panel #cart .empty.cart-content h2 {
		font-size: 16px;
		line-height: 20px;
	}

	#cart-panel #cart .empty.cart-content p {
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 1.4;
	}

	#cart-panel #cart .empty.cart-content a {
		height: 41px;
	}
}

/* ≤359 бонус · лічильник · ціна (≈229) не влазять у колонку біля фото (202 на 320): бонус окремим рядком, лічильник
   і ціна лишаються разом праворуч */
@media (max-width: 359px) {
	#cart-panel #cart .reward-wrap {
		flex: 0 0 100%;
		margin-right: 0;
	}

	#cart-panel #cart .reward-wrap .reward {
		width: fit-content;
	}
}

/* stylesheet.css ≤577 жорстко ставить картці в кошику 190 !important — повертаємо формулу Swiper для 2.1667 у ряд
   (common.js, гілка -cart): (ширина − 4 × 1.1667) / 2.1667 = 164 на 375 */
@media (max-width: 577px) {
	#cart-panel #cart .recs-wrapper .swiper-slide {
		width: calc((100% - 4.6668px) / 2.1667) !important;
	}
}

/* ---------- Модалка авторизації (Figma 105:7641 «Комп'ютерна адаптація»: телефон 105:7960 / 105:7973 / 105:7988,
   код Viber / Telegram / СМС — 105:7724 / 105:7786 / 105:7853 та ін., дзвінок 105:7876 / 105:7916 / 105:7937,
   ліміт 105:7702, спінер 105:8005, рефералка 105:8020 / 105:8037, вітання 105:8010) ---------- */
/* Шаблон extension/module/sms_reg.twig (у шапку вставляє OCMOD із БД SMS_REG, сам файл ocmod не патчить); стара
   верстка — stylesheet.css «SMS LOGIN». Рішення Юри: перевірку «Невірний номер телефону» не додаємо (лише вигляд наявних
   помилок), текст ліміту лишається «…через 10 хвилин». Мобілки в макеті нема — поля 24, як було. */

body:has(#auth-modal.open) .modal-backdrop {
	background: rgba(158, 158, 158, 0.5);
	opacity: 1;
}

#auth-modal.auth-modal {
	width: calc(100% - 24px);
	max-width: 426px;
	padding: 40px;
	border-radius: 0;
	color: #1F1F22;
}

/* хрестик 24 у куті (12 від краю), сірий → чорний при наведенні — як в інших модалках */
#auth-modal .modal-close {
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: var(--vv-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L12 12M12 12L6 18M12 12L18 18M12 12L6 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L12 12M12 12L6 18M12 12L18 18M12 12L6 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
	transition: background-color 0.2s ease;
}

#auth-modal .modal-close svg {
	display: none;
}

@media (hover: hover) {
	#auth-modal .modal-close:hover {
		background-color: var(--vv-black);
	}
}

/* --- шапка: заголовок 24 SemiBold, опис 14 (телефон/рефералка, на 8 нижче) або 16 (код, на 12 нижче); до форми 36 */
#auth-modal .title {
	margin: 0;
	color: #1F1F22;
	font-size: 24px;
	font-weight: 600;
	line-height: 29px;
}

#auth-modal .desc {
	margin: 8px 0 0;
	color: #1F1F22;
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

#auth-modal .desc p {
	line-height: 20px;
}

/* рефералка (105:8037): опис на 12 нижче заголовка */
#auth-modal .modal-body:has(input[name="firstname"]) .desc {
	margin-top: 12px;
}

/* крок коду: «Ми відправили код на номер:» / номер + «Змінити» — 16, між рядками 2 */
#auth-modal .modal-body:has(#input-code-login2) .desc {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 12px;
	font-size: 16px;
	line-height: 20px;
}

#auth-modal .modal-body:has(#input-code-login2) .desc p:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}

/* дзвінок (105:7876): «Ми зателефонували на номер:» дрібніше — 14, на 8 нижче заголовка */
#auth-modal .modal-body:has(#input-code-login2) .desc.vv-auth-desc-call {
	margin-top: 8px;
	font-size: 14px;
	line-height: 17px;
}

#auth-modal .modal-body:has(#input-code-login2) .desc.vv-auth-desc-call p {
	line-height: 17px;
}

#auth-modal .code-inline-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-tab-blue);
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
	cursor: pointer;
}

/* вітання після рефералки (105:8010): текст 14/1.4 чорний */
#auth-modal .modal-body:has(> a.btn-primary) .desc {
	margin-top: 12px;
	color: var(--vv-black);
	line-height: 20px;
}

/* --- поля 48 з плаваючим підписом (105:7973): порожнє — підпис 14 сірий по центру, у фокусі / заповнене — 11 Medium
   угорі, значення 14 під ним; між полями 16 */
#auth-modal .vv-auth-field {
	position: relative;
	margin-top: 16px;
}

#auth-modal .desc + .vv-auth-field {
	margin-top: 36px;
}

#auth-modal .vv-auth-field input,
#auth-modal .vv-auth-field input.form-control {
	display: block;
	width: 100%;
	height: 48px !important;
	margin: 0;
	padding: 21px 15px 6px !important;
	border: 1px solid #D3D3D3;
	border-radius: 0;
	box-shadow: none;
	color: var(--vv-black);
	font-size: 14px !important;
	font-weight: 400;
	line-height: 17px;
}

#auth-modal .vv-auth-field input:focus {
	border-color: var(--vv-black);
	outline: 0;
}

/* inputmask кладе шаблон «+38(___)…» у placeholder — під плаваючим підписом він не потрібен */
#auth-modal .vv-auth-field input::placeholder {
	color: transparent;
	opacity: 0;
}

#auth-modal .vv-auth-field label {
	position: absolute;
	top: 15.5px;
	left: 16px;
	margin: 0;
	color: var(--vv-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
	pointer-events: none;
	transition: top 0.15s ease, font-size 0.15s ease, line-height 0.15s ease;
}

#auth-modal .vv-auth-field:focus-within label,
#auth-modal .vv-auth-field.is-filled label {
	top: 7px;
	font-size: 11px;
	font-weight: 500;
	line-height: 13px;
}

/* помилка під полем (105:7988): червона рамка й значення, текст 11 Medium на 4 нижче */
#auth-modal .error-message {
	margin-top: 4px;
	color: var(--vv-red);
	font-size: 11px;
	font-weight: 500;
	line-height: 13px;
}

#auth-modal .error-message:empty {
	margin-top: 0;
}

#auth-modal .vv-auth-field:has(+ .error-message:not(:empty)) input {
	border-color: var(--vv-red);
	color: var(--vv-red);
}

#auth-modal .error-message a {
	color: inherit;
	text-decoration: underline;
}

#auth-modal .cf-turnstile-box {
	margin-top: 16px;
}

/* --- кнопки: лайм 14 Medium, 41 (на кроці телефону 48); неактивна #D3D3D3 з сірим текстом */
#auth-modal .btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 41px;
	margin: 16px 0 0;
	padding: 0 22px;
	border: 0;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	transition: background-color 0.15s;
}

/* !important — stylesheet.css дає .btn-primary:hover старий жовтий #f9d76b !important */
#auth-modal .btn-primary:not(:disabled):hover {
	background: var(--vv-brand-hover) !important;
	color: var(--vv-black);
}

#auth-modal .btn-primary:disabled,
#auth-modal .btn-primary:disabled:hover {
	background: #D3D3D3 !important;
	color: #9E9E9E;
	opacity: 1;
}

#auth-modal .modal-body:not(:has(input[name="firstname"])) #phone-login-btn {
	height: 48px;
}

#auth-modal a.btn-primary {
	margin-top: 36px;
	text-decoration: none;
}

/* згода 11/1.3, посилання синє з підкресленням; від кнопки 12 */
#auth-modal .text-gray {
	margin-top: 12px;
	color: #1F1F22;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
}

#auth-modal .text-gray a {
	color: var(--vv-tab-blue);
	text-decoration: underline;
	text-underline-position: from-font;
}

/* --- код (105:7786): поле 41, цифри по центру, під ним на 8 — «Отримати новий код» (іконка 20) або таймер (сірий
   текст), кнопка на 24, «Не отримали код? Отримати дзвінок» на 20 */
#auth-modal #input-code-login2,
#auth-modal input#input-code-login2.form-control {
	display: block;
	width: 100%;
	height: 41px !important;
	margin: 36px 0 0;
	/* 8 з боків — щоб влізла підказка дзвінка «Останні 4 цифри номера, з якого був дзвінок» (105:7876) */
	padding: 11px 8px !important;
	border: 1px solid #D3D3D3;
	border-radius: 0;
	box-shadow: none;
	color: var(--vv-black);
	font-size: 14px !important;
	line-height: 17px;
	text-align: center !important;
}

#auth-modal #input-code-login2::placeholder {
	color: var(--vv-muted);
	font-size: 14px;
	opacity: 1;
}

#auth-modal #input-code-login2:focus {
	border-color: var(--vv-black);
	outline: 0;
}

#auth-modal #input-code-login2 + .error-message {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 400;
	line-height: 15px;
}

#auth-modal #input-code-login2 + .error-message:empty {
	margin-top: 0;
}

#auth-modal #resend-login-code {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-black);
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
}

#auth-modal #resend-login-code .vv-auth-refresh {
	flex: 0 0 20px;
}

#auth-modal #resend-login-code.is-cooldown {
	color: var(--vv-muted);
	font-weight: 400;
}

#auth-modal #resend-login-code.is-cooldown .vv-auth-refresh {
	display: none;
}

#auth-modal #code-login-btn {
	margin-top: 24px;
}

#auth-modal .code-resend-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 8px;
	margin-top: 20px;
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}

/* --- очікування відповіді (105:8005): вміст ховається, кільце 80 — сіра доріжка 7 і лаймова дуга */
#auth-modal .modal-body.loading {
	opacity: 1;
}

#auth-modal .modal-body.loading::after {
	z-index: 9;
	background: var(--vv-white);
}

#auth-modal .modal-body.loading::before {
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border: 7px solid var(--vv-brand);
	border-top-color: #ECECEC;
	box-sizing: border-box;
	animation-duration: 0.8s;
}

/* «Бонус за реєстрацію діє тільки для нових клієнтів» — червоний бренду */
#auth-modal .red {
	color: var(--vv-red);
}

@media (max-width: 767px) {
	#auth-modal.auth-modal {
		padding: 24px;
	}

	#auth-modal .modal-close {
		top: 8px;
		right: 8px;
	}

	#auth-modal .title {
		padding-right: 16px;
	}

	/* підказка дзвінка (~330 px при 14) на 375 не влазить у поле 303 — дрібніше, а на вужчих обрізається трьома крапками */
	#auth-modal #input-code-login2 {
		text-overflow: ellipsis;
	}

	#auth-modal #input-code-login2::placeholder {
		font-size: 12px;
	}
}

/* ---------- Лаймові кнопки: наведення (дизайнер, 2026-10-01 — «при наведенні трішки темніший колір за кнопку») ----------
   Усі — var(--vv-brand-hover). Банери, чекаут, кошик, порожній кошик і авторизація мають hover у своїх секціях; тут —
   решта. !important: на частині кнопок класи .made-btn / .btn-primary, яким stylesheet.css на наведенні ставить старий
   жовтий #f9d76b !important, а фільтр категорії має лаймове тло з !important. */
.vv-sidebar-catalog,
.vv-sidebar-soc a,
.vv-footer-soc a,
.product-thumb.vv-card .c-icon,
body.common-home .main-catalog-btn,
body[class*="product-category-"] #column-left .ocf-search-btn-popover,
body[class*="product-category-"] #column-left .ocf-search-btn-static,
body[class*="product-product-"] .product-buttons .made-btn,
body[class*="product-product-"] .mini-product-thumb .c-icon,
body[class*="product-product-"] #review .add-feedback-btn,
body[class*="product-product-"] #review .show-more-feedback,
body[class*="product-product-"] .gift-hint-modal .made-btn.valid,
#cart-panel #cart .cart-info-block .orange-btn {
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.vv-sidebar-catalog:hover,
.vv-sidebar-soc a:hover,
.vv-footer-soc a:hover,
.product-thumb.vv-card .c-icon:hover,
body.common-home .main-catalog-btn:hover,
body[class*="product-category-"] #column-left .ocf-search-btn-popover:hover,
body[class*="product-category-"] #column-left .ocf-search-btn-static:hover,
body[class*="product-product-"] .product-buttons .made-btn:hover,
body[class*="product-product-"] .mini-product-thumb .c-icon:hover,
body[class*="product-product-"] #review .add-feedback-btn:hover,
body[class*="product-product-"] #review .show-more-feedback:hover,
body[class*="product-product-"] .gift-hint-modal .made-btn.valid:hover,
#cart-panel #cart .cart-info-block .orange-btn:hover {
	border-color: var(--vv-brand-hover) !important;
	background-color: var(--vv-brand-hover) !important;
	color: var(--vv-black) !important;
}

/* неактивна (сіра) кнопка подарунка на наведенні лишається сірою — інакше .made-btn:hover фарбує її в старий жовтий */
body[class*="product-product-"] .gift-hint-modal .made-btn:not(.valid):hover {
	background: #D1D3CC !important;
	color: #898E86 !important;
}

/* ---------- Правки дизайнера (2026-10-01) ---------- */

/* кошик: стрілки рекомендацій — Arrow Button з кіту (26, #EDEEEB, стрілка 22 з прозорістю .4 / hover .7 / натиснута 1)
   на будь-якій сторінці; на головній це вже давало body.common-home .slick-arrow, на решті лишались старі. Права — на 6 за
   краєм ряду (107:9549) */
#cart-panel #cart .recs-wrapper .slick-arrow {
	width: 26px;
	height: 26px;
	padding: 2px;
	border-radius: 0;
	background: var(--vv-surface);
	color: var(--vv-black);
	transition: background-color 0.15s ease;
}

#cart-panel #cart .recs-wrapper .slick-arrow:hover {
	background: var(--vv-surface-hover);
}

#cart-panel #cart .recs-wrapper .slick-arrow.arrow-left {
	left: -6px;
}

#cart-panel #cart .recs-wrapper .slick-arrow.arrow-right {
	right: -6px;
}

#cart-panel #cart .recs-wrapper .slick-arrow img {
	display: none;
}

#cart-panel #cart .recs-wrapper .slick-arrow::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	opacity: 0.4;
	-webkit-mask: var(--vv-arrow-right) center / 22px no-repeat;
	mask: var(--vv-arrow-right) center / 22px no-repeat;
}

#cart-panel #cart .recs-wrapper .slick-arrow.arrow-left::before {
	-webkit-mask-image: var(--vv-arrow-left);
	mask-image: var(--vv-arrow-left);
}

#cart-panel #cart .recs-wrapper .slick-arrow:hover::before {
	opacity: 0.7;
}

#cart-panel #cart .recs-wrapper .slick-arrow:active::before {
	opacity: 1;
}

/* на мобілці ряд іде до краю аркуша — стрілка в межах екрана */
@media (max-width: 889px) {
	#cart-panel #cart .recs-wrapper .slick-arrow.arrow-left {
		left: 0;
	}

	#cart-panel #cart .recs-wrapper .slick-arrow.arrow-right {
		right: 0;
	}
}

/* товар, наявність у магазинах: стрілка поля міста — кітова arrow-left −90° (70:14041): 20, #898E86, лінія 1.5, 12 від
   краю; stylesheet.css малював стару тонку 10×6 */
body[class*="product-product-"] #multistore-content .custom-select-wrapper::after {
	right: 12px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5C5 7.5 8.682 12.5 10 12.5C11.318 12.5 15 7.5 15 7.5' stroke='%23898E86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* список магазинів — до самого низу блоку 642: під ним було ще 20 білого поля колонки, і рядки при прокрутці ніби
   «з'їдались» (дизайнер). На мобілці список над картою — там відступ 12 лишається */
@media (min-width: 768px) {
	body[class*="product-product-"] #multistore-content .offline-stores-content {
		padding-bottom: 0;
	}

	body[class*="product-product-"] #multistore-content .offline-stores-list {
		max-height: 560px;
	}
}

/* галерея товару без заокруглень (дизайнер): мініатюри мали 8 зі stylesheet.css */
body[class*="product-product-"] #image-additional li.image-additional,
body[class*="product-product-"] #image-additional li.image-additional img,
body[class*="product-product-"] #one-image .slick-slide,
body[class*="product-product-"] #one-image .slick-slide img {
	border-radius: 0;
}

/* «додати в кошик» у старих модулях (стаття блогу, featured_product, special): гліф FontAwesome \f07a у .picon →
   кошик із галочкою з кіту (Юра: ця іконка всюди, де додавання в кошик). Кошик у шапці (#cart-url) — не .picon */
.picon .cart-icon::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--vv-i-basket-add) center / 20px no-repeat;
	mask: var(--vv-i-basket-add) center / 20px no-repeat;
}

/* «додати в кошик» — щойно додано (клас .is-added на 2 с, скрипт у footer.twig): галочка замість «+» */
body[class*="product-product-"] #product .product-buttons .made-btn.is-added::before,
body[class*="product-product-"] .mini-product-thumb .c-icon.is-added::before,
.picon.is-added .cart-icon::before {
	-webkit-mask-image: var(--vv-i-basket);
	mask-image: var(--vv-i-basket);
}

/* сторінка пошуку (product/search): кнопка «Пошук» біля поля й категорії — була старим жовтим .made-btn (#f7cd46, r5).
   Окремого макета нема — як решта лаймових кнопок: лайм, без радіуса, 14/500; висота 50 — як у поля й селекта поруч.
   !important на ховері — stylesheet.css дає .made-btn:hover старий жовтий #f9d76b !important */
#block-search #button-search.made-btn {
	height: 50px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: var(--vv-brand);
	color: var(--vv-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	box-shadow: none;
	transition: background-color 0.15s;
}

#block-search #button-search.made-btn:hover,
#block-search #button-search.made-btn:focus-visible {
	background: var(--vv-brand-hover) !important;
	color: var(--vv-black) !important;
}