/**
 * Мега-меню organic-box.ru
 *
 * Все цвета и размеры взяты из переменных темы Cosmetsy, своих не вводится:
 *   --color-primary-submenu             #000    цвет пункта
 *   --color-primary-submenu-active      #ef4626 активный пункт
 *   --color-primary-submenu-background  #fff    фон панели
 *   --font-menu-font-size               14px    размер пункта
 *   --font-product-title-font           DM Sans название товара
 * Наведение осветляет текст до #ababab — так же, как в боевом правиле темы
 * .primary-menu .sub-menu .menu-item a:hover.
 */

/* ---------------------------------------------------------------- десктоп */

/* Пункт-хозяин делаем static, чтобы панель позиционировалась от того же
   предка, что и штатный sub-menu темы — это .col.col-left (position:relative,
   ширина 1132px). Своего position:relative добавлять НЕЛЬЗЯ: панель тогда
   схлопнется до ширины nav (933px) и перестанет совпадать с сеткой сайта. */
.site-menu.horizontal-menu .menu > li.ob-mm-host {
	position: static;
}

.ob-mm {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 99;

	display: grid;
	grid-template-columns: 232px 268px 268px 1fr;
	align-items: start;

	padding: 26px 0 40px;
	background: var(--color-primary-submenu-background, #fff);
	box-shadow: 0 4px 8px rgba(0, 0, 0, .1);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

.ob-mm-host:hover > .ob-mm,
.ob-mm-host:focus-within > .ob-mm {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.ob-mm__col {
	min-width: 0;
}

.ob-mm__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 30px;
	font-size: var(--font-menu-font-size, 14px);
	line-height: 1.35;
	color: var(--color-primary-submenu, #000);
	text-decoration: none;
	transition: color .18s ease;
}

.ob-mm__item:hover,
.ob-mm__item:focus {
	color: #ababab;
}

.ob-mm__item.is-active {
	color: var(--color-primary-submenu-active, #ef4626);
}

.ob-mm__item:focus-visible {
	outline: 1px solid var(--color-primary-submenu-active, #ef4626);
	outline-offset: -2px;
}

/* разделы каталога набраны полужирным, как заголовки в меню сайта */
.ob-mm__l1 {
	font-weight: 700;
}

.ob-mm__l2.is-active {
	font-weight: 600;
}

/* «все товары категории» — выделяем, иначе читается как рядовой пункт.
   Селектор с той же специфичностью, что и .ob-mm__l1, иначе не перебьёт. */
.ob-mm .ob-mm__all {
	font-weight: 700;
}

/* стрелка — глиф иконочного шрифта темы, тот же, что в остальном меню */
.ob-mm__arrow {
	margin-left: auto;
	flex: none;
	font-family: klbtheme;
	font-size: 14px;
	line-height: 1;
	font-style: normal;
	color: inherit;
	-webkit-font-smoothing: antialiased;
}

.ob-mm__arrow::before {
	content: "\e80a";
}

/* товары */
.ob-mm__products {
	padding: 0 30px;
}

.ob-mm__plist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 22px;
	animation: ob-mm-in .24s ease both;
}

.ob-mm__pcard {
	display: block;
	text-decoration: none;
	color: var(--color-primary-submenu, #000);
}

.ob-mm__pthumb {
	display: block;
	aspect-ratio: 1;
	margin-bottom: 14px;
	overflow: hidden;
}

.ob-mm__pthumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ob-mm__pname {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--font-product-title-font, "DM Sans", sans-serif);
	font-size: var(--font-product-title-font-size, 14px);
	font-weight: var(--font-product-title-font-weight, 600);
	line-height: 1.25;
	transition: color .18s ease;
}

.ob-mm__pprice {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.ob-mm__pprice del {
	opacity: .5;
	margin-right: 6px;
}

.ob-mm__pcard:hover .ob-mm__pname,
.ob-mm__pcard:hover .ob-mm__pprice {
	color: #ababab;
}

.ob-mm__pane {
	animation: ob-mm-in .2s ease both;
}

@keyframes ob-mm-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* панель только для широких экранов — на узких работает мобильное меню */
@media (max-width: 1100px) {
	.ob-mm {
		grid-template-columns: 206px 238px 238px 1fr;
	}

	.ob-mm__item {
		padding-left: 22px;
		padding-right: 22px;
	}

	.ob-mm__products {
		padding: 0 22px;
	}
}

/* ---------------------------------------------------------------- мобильный */

.ob-mmm {
	position: relative;
	overflow: hidden;
}

.ob-mmm__panes {
	display: flex;
	width: 300%;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.ob-mmm__pane {
	width: 33.3333%;
	flex: none;
}

.ob-mmm__pane[hidden] {
	display: block !important;
	visibility: hidden;
}

.ob-mmm__pane.is-current {
	visibility: visible;
}

.ob-mmm__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 16px;
	border-bottom: 1px solid var(--color-offcanvas-border, #eee);
}

.ob-mmm__back {
	border: 0;
	background: none;
	padding: 0 2px;
	cursor: pointer;
	color: var(--color-offcanvas-color, #111);
	font-family: klbtheme;
	font-size: 16px;
	line-height: 1;
}

/* левый шеврон — тот же глиф темы, развёрнутый на 180°:
   так не приходится угадывать отдельный код символа */
.ob-mmm__back::before {
	content: "\e80a";
	display: inline-block;
	transform: rotate(180deg);
}

.ob-mmm__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.ob-mmm__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-offcanvas-border, #eee);
	font-size: var(--font-mobile-menu-font-size, 14px);
	line-height: 1.35;
	color: var(--color-offcanvas-color, #111);
	text-decoration: none;
	transition: color .18s ease;
}

.ob-mmm__row:hover,
.ob-mmm__row:focus {
	color: #ababab;
}

.ob-mmm__all {
	font-weight: 700;
}

.ob-mmm__products {
	padding: 20px 16px;
}

.ob-mmm__products:empty {
	display: none;
}

.ob-mmm__products .ob-mm__plist {
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ob-mmm__products .ob-mm__pname {
	-webkit-line-clamp: 2;
	font-size: 13px;
}

.ob-mmm__products .ob-mm__pprice {
	font-size: 13px;
	margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {
	.ob-mm,
	.ob-mm__pane,
	.ob-mm__plist,
	.ob-mmm__panes,
	.ob-mm__item {
		transition: none !important;
		animation: none !important;
	}
}


/* ============================================================
   ПЕРЕБИВАЕМ СТИЛИ ТЕМЫ

   Cosmetsy задаёт для всех ссылок внутри пункта меню правило
   .site-header .primary-menu.horizontal-menu .menu > .menu-item a
   { display:inline-flex } — его специфичность выше, чем у классов
   модуля, поэтому пункты панели вставали в строку и налезали друг
   на друга. Правим точечно только то, что ломает раскладку.
   ============================================================ */
.ob-mm,
.ob-mm .ob-mm__col {
	white-space: normal !important;
}

.ob-mm a.ob-mm__item {
	display: flex !important;
	align-items: baseline !important;
	justify-content: flex-start !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 8px 30px !important;
	font-size: var(--font-menu-font-size, 14px) !important;
	line-height: 1.35 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.ob-mm a.ob-mm__pcard {
	display: block !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1.25 !important;
}

.ob-mm .ob-mm__pthumb img {
	max-width: 100% !important;
}

/* мобильная панель живёт в offcanvas — там свои правила темы */
.ob-mmm a.ob-mmm__row {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	height: auto !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	line-height: 1.35 !important;
	white-space: normal !important;
}

.ob-mmm a.ob-mpcard,
.ob-mmm a.ob-mm__pcard {
	display: block !important;
	padding: 0 !important;
	height: auto !important;
}

@media (max-width: 1100px) {
	.ob-mm a.ob-mm__item {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
}

/* --- ЦВЕТ И ВЕС ---
   Та же причина: правило темы для .menu-item a диктует color и
   font-weight. Порядок ниже важен — базовый, затем наведение,
   затем активный. */
.ob-mm a.ob-mm__item {
	color: var(--color-primary-submenu, #000) !important;
	font-weight: 400 !important;
}

.ob-mm a.ob-mm__l1,
.ob-mm a.ob-mm__all {
	font-weight: 700 !important;
}

.ob-mm a.ob-mm__item:hover,
.ob-mm a.ob-mm__item:focus {
	color: #ababab !important;
}

.ob-mm a.ob-mm__l2.is-active {
	font-weight: 600 !important;
}

.ob-mm a.ob-mm__item.is-active {
	color: var(--color-primary-submenu-active, #ef4626) !important;
}

.ob-mmm a.ob-mmm__row {
	color: var(--color-offcanvas-color, #111) !important;
	font-weight: 400 !important;
}

.ob-mmm a.ob-mmm__all {
	font-weight: 700 !important;
}

.ob-mmm a.ob-mmm__row:hover {
	color: #ababab !important;
}

/* --- ПОЛНАЯ ШИРИНА, БЕЗ ТЕНИ ---
   Панель раскрывается во всю ширину экрана. Саму ширину и сдвиг
   выставляет mega-menu.js: панель позиционируется от .col-left,
   который не центрирован относительно экрана, поэтому чистым CSS
   попасть в края нельзя — нужен замер. Здесь только то, что от
   геометрии не зависит. */
.ob-mm {
	box-shadow: none !important;
}

/* --- ЛИНИЯ ПОД ЗОНОЙ МЕНЮ ---
   Отделяет выпадающую панель от строки навигации — без неё панель
   читается как сплошное полотно. Линия идёт во всю ширину панели,
   цвет — родной --color-navigation-border темы. */
.ob-mm {
	border-top: 1px solid var(--color-navigation-border, #e5e5e5) !important;
}

/* --- СТРЕЛКА В МОБИЛЬНОМ ---
   Пункт offcanvas-меню — flex-контейнер, а наша панель шириной 300%
   вставала между ссылкой и стрелкой темы и переносила стрелку на
   вторую строку. Разводим по порядку: ссылка, стрелка, затем панель
   отдельной строкой во всю ширину. */
.vertical-menu .ob-mm-host {
	flex-wrap: wrap !important;
}

.vertical-menu .ob-mm-host > a {
	order: 1;
}

.vertical-menu .ob-mm-host > .menu-dropdown {
	order: 2;
}

.vertical-menu .ob-mm-host > .ob-mmm {
	order: 3;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}

/* --- ЗАГОЛОВОК ПО ЛИНИИ ПУНКТОВ ---
   Кнопка «назад» стояла в потоке и сдвигала заголовок вправо, из-за
   чего он не попадал на левую линию пунктов. Выносим стрелку в левое
   поле, заголовок начинается ровно там же, где текст строк. */
.ob-mmm__head {
	position: relative;
	gap: 0;
	padding-left: 16px;
	padding-right: 16px;
}

.ob-mmm__back {
	position: absolute;
	left: 1px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	padding: 0;
	text-align: center;
}

.ob-mmm__title {
	padding-left: 0;
}

/* --- ЛЕВАЯ ЛИНИЯ МОБИЛЬНОГО МЕНЮ ---
   Весь текст панели — заголовок, строки всех уровней, блок товаров —
   встаёт на одну вертикаль с текстом пунктов самого меню («Каталог»,
   «Бренды»). Значение отступа подставляет mega-menu.js замером,
   16px — только запасной вариант. */
.ob-mmm a.ob-mmm__row,
.ob-mmm .ob-mmm__row,
.ob-mmm .ob-mmm__head,
.ob-mmm .ob-mmm__products,
.ob-mmm .ob-mmm__title {
	padding-left: var(--ob-mm-pad, 16px) !important;
}

.ob-mmm .ob-mmm__title {
	padding-left: 0 !important;
}

.ob-mmm .ob-mmm__head {
	padding-right: var(--ob-mm-pad, 16px) !important;
}

/* стрелка «назад» — тем же кеглем и цветом, что стрелки в строках,
   иначе выглядит жирнее остального набора */
.ob-mmm .ob-mmm__back {
	font-size: 14px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	color: inherit !important;
	opacity: 1;
	left: calc(var(--ob-mm-pad, 16px) - 15px);
}

/* --- ПРАВАЯ ЛИНИЯ СТРЕЛОК ---
   Стрелки строк встают на ту же вертикаль, что стрелки пунктов меню.
   Значение подставляет mega-menu.js замером. */
.ob-mmm a.ob-mmm__row,
.ob-mmm .ob-mmm__row,
.ob-mmm .ob-mmm__head,
.ob-mmm .ob-mmm__products {
	padding-right: var(--ob-mm-pad-right, 16px) !important;
}

/* --- ШЕВРОН КАК У ТЕМЫ ---
   Габариты один в один с .menu-dropdown темы: блок 16x24, иконка
   центрирована. Только так значок совпадает и по толщине, и по
   вертикали, и по центру с соседними пунктами меню. */
.ob-mmm .ob-mmm__chevron {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 16px;
	height: 24px;
	margin-left: auto;
	color: inherit;
}

.ob-mmm .ob-mmm__chevron svg {
	width: 16px;
	height: 24px;
	display: block;
}

.ob-mmm .ob-mmm__back {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 24px;
	padding: 0 !important;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.ob-mmm .ob-mmm__back svg {
	width: 16px;
	height: 24px;
	display: block;
}

/* глифы иконочного шрифта в мобильном больше не используем */
.ob-mmm .ob-mmm__back::before,
.ob-mmm .ob-mmm__chevron::before {
	content: none !important;
}

/* --- КНОПКА НАЗАД СПРАВА ---
   Раньше стрелка стояла слева от заголовка и либо сдвигала его с общей
   линии, либо (после выравнивания) уходила за край панели и пропадала.
   Ставим её справа — туда же, где стрелки остальных строк: заголовок
   остаётся на левой линии, иконка на правой. */
.ob-mmm .ob-mmm__head {
	position: static !important;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ob-mmm .ob-mmm__title {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
}

.ob-mmm .ob-mmm__back {
	position: static !important;
	order: 2;
	margin-left: auto;
	transform: none !important;
	left: auto !important;
	top: auto !important;
}

/* --- OFFCANVAS ВО ВСЮ ШИРИНУ ---
   Тема задаёт панели 20rem, а с 26.25rem — 22.5rem. На телефоне это
   оставляет справа полосу страницы.

   Тянем панель через left/right, а не width:100%: у фиксированного
   элемента 100% берётся вместе с полосой прокрутки, и панель вылезала
   за экран на её ширину, добавляя горизонтальный сдвиг. */
@media screen and (max-width: 62rem) {
	.site-offcanvas {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
	}

	.site-offcanvas--main,
	.site-offcanvas--header {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* --- БРЕНДЫ В МОБИЛЬНОМ ---
   Марок много, в один столбец экран получался бесконечным. Кладём их
   в две колонки и даём такую же шапку с возвратом, как у каталога.
   Отступы берём из той же переменной, что и каталог, — чтобы весь
   текст стоял на одной левой линии. */
.ob-brands {
	animation: ob-brands-in .28s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes ob-brands-in {
	from { opacity: 0; transform: translateX(18%); }
	to   { opacity: 1; transform: none; }
}

.ob-brands__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px var(--ob-mm-pad-right, 16px) 15px var(--ob-mm-pad, 16px);
	border-bottom: 1px solid var(--color-offcanvas-border, #eee);
}

.ob-brands__title {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-offcanvas-color, #111);
}

.ob-brands__back {
	order: 2;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.ob-brands__back svg {
	width: 16px;
	height: 24px;
	display: block;
}

.ob-brands__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px;
}

.ob-brands a.ob-brands__row {
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 13px var(--ob-mm-pad-right, 16px) 13px var(--ob-mm-pad, 16px) !important;
	border-bottom: 1px solid var(--color-offcanvas-border, #eee);
	font-size: var(--font-mobile-menu-font-size, 14px);
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var(--color-offcanvas-color, #111) !important;
	text-decoration: none;
	white-space: normal !important;
	transition: color .18s ease;
}

.ob-brands a.ob-brands__row:hover {
	color: #ababab !important;
}

.ob-brands a.ob-brands__all {
	font-weight: 700 !important;
}

/* правая колонка сетки не должна упираться в край */
.ob-brands__grid a.ob-brands__row:nth-child(2n) {
	padding-left: 0 !important;
}

/* --- БРЕНДЫ: ОТДЕЛЬНОЙ СТРОКОЙ ---
   Пункт меню — flex-контейнер, и панель делила строку со ссылкой,
   уезжая вправо. Та же развязка, что у каталога: ссылка, стрелка,
   затем панель во всю ширину. */
.vertical-menu .ob-brands-host {
	flex-wrap: wrap !important;
}

.vertical-menu .ob-brands-host > a {
	order: 1;
}

.vertical-menu .ob-brands-host > .menu-dropdown {
	order: 2;
}

.vertical-menu .ob-brands-host > .ob-brands {
	order: 3;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}

/* --- ПАНЕЛИ: ТОЛЬКО АКТИВНАЯ ---
   Раньше все панели стояли в ряд и переключались сдвигом на 33%.
   Это работало, пока их было три; на сайте их восемь — сдвиг на
   фиксированный процент показывал соседнюю панель или пустоту, а
   контейнер высотой по самой длинной оставлял внизу пустое поле.
   Теперь в потоке только текущая панель: высота ровно по ней,
   промахнуться некуда. */
.ob-mmm .ob-mmm__panes {
	display: block !important;
	width: auto !important;
	transform: none !important;
	transition: none !important;
}

.ob-mmm .ob-mmm__pane {
	display: none !important;
	width: auto !important;
	visibility: visible !important;
}

.ob-mmm .ob-mmm__pane.is-current {
	display: block !important;
	animation: ob-pane-in .26s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes ob-pane-in {
	from { opacity: 0; transform: translateX(14%); }
	to   { opacity: 1; transform: none; }
}

/* --- ОТКРЫТОЕ МЕНЮ: БЕЗ ПРОКРУТКИ ---
   Пока панель открыта, страница под ней не должна прокручиваться.
   Класс вешает mega-menu.js: у темы нет своего признака открытия,
   она двигает панель напрямую. */
html.ob-menu-open,
html.ob-menu-open body {
	overflow: hidden !important;
	touch-action: none;
	overscroll-behavior: none;
}

/* внутри самой панели прокрутка нужна */
html.ob-menu-open .site-offcanvas {
	overflow-y: auto;
	touch-action: pan-y;
	overscroll-behavior: contain;
}

/* --- КНОПКА ЗАКРЫТИЯ ---
   Чёрный квадрат с белым крестиком. */
.site-offcanvas .offcanvas-close {
	background-color: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

.site-offcanvas .offcanvas-close i,
.site-offcanvas .offcanvas-close svg {
	color: #fff !important;
	fill: currentColor;
	stroke: currentColor;
}

/* --- СОЦСЕТИ В МОБИЛЬНОМ МЕНЮ ---
   Иконки были 15px и терялись внизу панели. Увеличиваем.

   Отдельная история с набором: в шрифте темы есть глифы только для
   YouTube и WhatsApp. Для VK, «Одноклассников» и телеграма ссылки в
   меню заведены, а значков в шрифте нет — поэтому их и не было видно.
   Рисуем их сами: SVG в маске, цвет — от текста, так что вид совпадает
   с остальными. */
.site-offcanvas .site-social ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-offcanvas .site-social li {
	margin: 0;
}

.site-offcanvas .site-social a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	color: var(--color-offcanvas-color, #111);
}

.site-offcanvas .site-social a i {
	font-size: 26px !important;
	line-height: 1;
}

/* значки, которых нет в шрифте темы */
.site-offcanvas .site-social a.telegram i,
.site-offcanvas .site-social a.VK i,
.site-offcanvas .site-social a.OK i {
	display: none !important;
}

.site-offcanvas .site-social a.telegram .social-icon,
.site-offcanvas .site-social a.VK .social-icon,
.site-offcanvas .site-social a.OK .social-icon {
	display: block;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.site-offcanvas .site-social a.telegram .social-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E");
}

.site-offcanvas .site-social a.VK .social-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8 17.4c-5.5 0-8.9-3.8-9-10h2.8c.1 4.6 2.2 6.5 3.8 6.9V7.4h2.6v3.9c1.6-.2 3.2-2 3.8-3.9h2.6c-.4 2.3-2.1 4.1-3.3 4.9 1.2.6 3.1 2.2 3.9 5.1h-2.9c-.6-1.9-2.1-3.4-4.1-3.6v3.6h-.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8 17.4c-5.5 0-8.9-3.8-9-10h2.8c.1 4.6 2.2 6.5 3.8 6.9V7.4h2.6v3.9c1.6-.2 3.2-2 3.8-3.9h2.6c-.4 2.3-2.1 4.1-3.3 4.9 1.2.6 3.1 2.2 3.9 5.1h-2.9c-.6-1.9-2.1-3.4-4.1-3.6v3.6h-.2z'/%3E%3C/svg%3E");
}

.site-offcanvas .site-social a.OK .social-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.9a4.2 4.2 0 100 8.4 4.2 4.2 0 000-8.4zm0 5.8a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2zM14 15.3c1-.2 2-.6 2.8-1.2a1.3 1.3 0 10-1.5-2.1 5.9 5.9 0 01-6.6 0 1.3 1.3 0 10-1.5 2.1c.8.6 1.8 1 2.8 1.2l-2.7 2.7a1.3 1.3 0 001.8 1.8l2.6-2.6 2.6 2.6a1.3 1.3 0 101.8-1.8L14 15.3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.9a4.2 4.2 0 100 8.4 4.2 4.2 0 000-8.4zm0 5.8a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2zM14 15.3c1-.2 2-.6 2.8-1.2a1.3 1.3 0 10-1.5-2.1 5.9 5.9 0 01-6.6 0 1.3 1.3 0 10-1.5 2.1c.8.6 1.8 1 2.8 1.2l-2.7 2.7a1.3 1.3 0 001.8 1.8l2.6-2.6 2.6 2.6a1.3 1.3 0 101.8-1.8L14 15.3z'/%3E%3C/svg%3E");
}

.site-offcanvas .site-social .social-text,
.site-offcanvas .site-social .social-label {
	display: none;
}

/* --- ИКОНКИ ПО ЛЕВОЙ ЛИНИИ ---
   Значки соцсетей стояли по центру, а весь остальной текст меню —
   по левому краю. Ставим их на ту же вертикаль; отступ берём из той
   же переменной, что и пункты меню, чтобы линия была одна. */
.site-offcanvas .site-social,
.site-offcanvas .site-social ul {
	justify-content: flex-start !important;
	text-align: left !important;
}

.site-offcanvas .site-social ul {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* тема сдвигает блок на -6px — это компенсация под собственные
   поля её значков; у наших таких полей нет, и из-за этого ряд
   уезжал левее текста */
.site-offcanvas .site-social {
	margin-left: 0 !important;
}

.site-offcanvas .site-social a {
	justify-content: flex-start !important;
}

/* первая иконка не должна съезжать из-за собственных отступов ссылки */
.site-offcanvas .site-social li:first-child a {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* --- ИКОНКА MAX ---
   Логотип прислали картинкой, векторного контура нет. Используем его
   как маску по прозрачности: цвет тогда берётся от текста, и значок
   встаёт в один ряд с остальными, не выбиваясь цветом. */
.site-offcanvas .site-social a.max i {
	display: none !important;
}

.site-offcanvas .site-social a.max .social-icon {
	display: block;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/png;base64,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");
	mask-image: url("data:image/png;base64,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");
}

/* шесть значков должны уместиться в строку даже на узком экране */
.site-offcanvas .site-social ul {
	gap: 12px !important;
	flex-wrap: nowrap !important;
}

.site-offcanvas .site-social a {
	width: 28px !important;
	height: 28px !important;
	flex: none;
}

.site-offcanvas .site-social a i {
	font-size: 23px !important;
}

.site-offcanvas .site-social .social-icon {
	width: 24px !important;
	height: 24px !important;
}

/* --- БРЕНДЫ НА ДЕСКТОПЕ ---
   Та же панель, что у каталога, но уровень вложенности один: под марки
   отданы все три колонки, справа — карточки товаров наведённой марки.
   Колонки равной ширины: названия марок короткие и разной длины,
   лесенка из колонок 232/268/268 читалась бы как ошибка вёрстки. */
.ob-mm.ob-mm--brands {
	grid-template-columns: 256px 256px 256px 1fr;
}

@media (max-width: 1100px) {
	.ob-mm.ob-mm--brands {
		grid-template-columns: 227px 227px 227px 1fr;
	}
}

/* --- МОБИЛЬНОЕ МЕНЮ: БЕЗ СЕРОЙ ПОДСВЕТКИ ---
   На тач-экране палец, ведущий страницу, оставляет за собой состояние
   hover: пункт под ним светлел и таким и оставался до следующего
   касания — при прокрутке это читалось как случайное мигание строк.
   Наведение в мобильной панели больше не меняет цвет: он и так чёрный,
   как весь остальной текст меню. */
.ob-mmm .ob-mmm__row:hover,
.ob-mmm .ob-mmm__row:focus,
.ob-mmm .ob-mmm__row:active,
.ob-mmm a.ob-mmm__row:hover,
.ob-mmm a.ob-mmm__row:focus,
.ob-mmm a.ob-mmm__row:active,
.ob-brands a.ob-brands__row:hover,
.ob-brands a.ob-brands__row:focus,
.ob-brands a.ob-brands__row:active {
	color: var(--color-offcanvas-color, #111) !important;
}

.ob-mmm .ob-mm__pcard:hover .ob-mm__pname,
.ob-mmm .ob-mm__pcard:hover .ob-mm__pprice {
	color: var(--color-offcanvas-color, #111) !important;
}