/* ====================================================================
 * KENDA. Левое меню каталога на телефоне и планшете.
 *
 * Веня 28.08.2026: «Хлебные скрываем, баннер убираем. Вместо хлебных, сделай
 * кнопку меню красную» и следом «При нажатии на меню, слева как у 4байк
 * появляется меню как в десктоп слева».
 *
 * ⭐⭐⭐ Панель это САМ `#sidebar`, а не его копия. Ниже 1000 колонка выходит
 * из потока и превращается в выезжающую слева панель со всем своим
 * содержимым: меню разделов, баннер для оптовых, два списка. Оттого баннер и
 * пропадает со страницы: он уехал внутрь панели.
 *
 * Разметку кнопки, затемнения и крестика печатает
 * `mu-plugins/kenda-levoe-menyu.php` (стили подключаются приоритетом 1001,
 * последними: правила ниже отменяют телефонные и планшетные правила из
 * `kolonka.css` и `menyu-razdelov.css`).
 * ==================================================================== */

/* ⭐ Высота шапки живёт ОДНОЙ переменной: от неё отсчитываются и панель, и
   затемнение, и крестик. Ниже 1000 шапка ровно 64 пикселя.
   ⛔ У вошедшего в панель управления сверху ещё и полоса WordPress: 46
   пикселей на узком экране и 32 на широком. Без этой поправки панель
   съезжала бы вниз ровно на её высоту (замечание Кодекса 28.08.2026). */
:root {
	--k-levoe-shapka: 64px;
}

body.admin-bar {
	--k-levoe-shapka: 110px;
}

@media (min-width: 783px) {
	body.admin-bar {
		--k-levoe-shapka: 96px;
	}
}

/* На широком экране кнопки нет вовсе: колонка и так стоит слева. */
.k-levoe-pusk,
.k-levoe-fon,
.k-levoe-zakryt {
	display: none;
}

@media (max-width: 999px) {

	/* ------------------------------------------------ кнопка вместо крошек */

	/* ⛔ Хлебные крошки скрыты по прямой просьбе Вени. Из разметки они НЕ
	   убраны: их читают поисковые машины, и разметка пути остаётся в
	   `application/ld+json` вместе с ними. Скрываем только с глаз. */
	.k-put {
		display: none !important;
	}

	.k-levoe-pusk {
		display: block;
		/* Поле как у содержимого каталога: 6 слева, как у плиток. */
		padding: 14px 6px 0;
	}

	/* ⚠️ Флажок спрятан РАЗМЕРОМ, а не `display: none`: иначе он перестал бы
	   принимать фокус, и меню нельзя было бы открыть с клавиатуры. */
	.k-levoe-vkl {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		border: 0;
	}

	/* ⭐ Веня 28.08.2026: «кнопка меньше и ниже». Было 44 в высоту, поле 18,
	   кегль 14 и слово «Меню каталога» на 180 пикселей.
	   ⚠️ 38 это ниже нашего порога в 44 для цели пальца. Решение Вени, и оно
	   защищено тем, что кнопка стоит одна на пустой строке: промахнуться
	   мимо неё некуда, соседних целей рядом нет. */
	.k-levoe-knopka {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 38px;
		padding: 0 14px;
		border-radius: 10px;
		background: #d81f2a;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .02em;
		line-height: 1;
		cursor: pointer;
		user-select: none;
		transition: background-color .16s ease;
	}

	.k-levoe-knopka:hover {
		background: #b3141e;
	}

	/* ⛔⭐⭐ Слово внутри кнопки печаталось цветом темы rgb(255, 79, 87), её
	   служебным лососевым, а не белым: у Salient есть правило на вложенные
	   `span`, и оно сильнее наследования от кнопки. На красной заливке это
	   почти нечитаемо (замер 28.08.2026). */
	.k-levoe-knopka,
	.k-levoe-knopka span {
		color: #fff !important;
	}

	/* ⛔ Размер значка с пометкой: тема правит размеры любой вложенной графики,
	   и без неё полоски растягивались во всю высоту кнопки. Те же грабли уже
	   были у кнопки дилера в шапке. */
	.k-levoe-znak {
		flex: 0 0 16px;
		width: 16px !important;
		height: 16px !important;
		max-width: 16px;
	}

	/* кольцо фокуса рисуем на подписи: сам флажок не виден */
	.k-levoe-vkl:focus-visible + .k-levoe-knopka {
		outline: 2px solid #16181a;
		outline-offset: 3px;
	}

	/* ------------------------------------------------------------ панель */

	body.tax-product_cat #sidebar,
	body.tax-product_tag #sidebar,
	body.post-type-archive-product #sidebar {
		display: block !important;
		position: fixed;
		/* ⚠️ Панель начинается ПОД шапкой: у шапки `z-index: 9995`, она всегда
		   сверху, и панель от нуля пряталась бы под неё вместе с крестиком. */
		top: var(--k-levoe-shapka);
		left: 0;
		bottom: 0;
		z-index: 9000;
		/* ⛔⭐ Ширина с пометкой: у темы своя ширина колонки `.col.span_3`, и
		   без неё панель растягивалась во весь экран (замер 28.08.2026:
		   390 из 390 на телефоне и 768 на планшете вместо 340). */
		width: min(340px, 88vw) !important;
		max-width: min(340px, 88vw) !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		/* ⛔⭐⭐ Поля с пометкой: у темы своё правило на `#sidebar`, и расчётное
		   значение оставалось `0px` (замер 28.08.2026), из-за чего первый блок
		   упирался в верх панели, а крестик ложился прямо на его заголовок.
		   ⚠️ Верхние 66 это полоса под крестик: он стоит на 76 и занимает 44,
		   то есть кончается на 120, а содержимое начинается на 130. */
		padding: 66px 14px 24px !important;
		box-sizing: border-box;
		background: #fff;
		/* ⛔⭐ Прокрутка обязательна: содержимое колонки на 1400 пикселей
		   длиннее любого телефона. `contain` не даёт прокрутке уйти на
		   страницу под панелью. */
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 0 44px rgba(10, 12, 16, .38);
		transform: translateX(-101%);
		/* ⛔⭐⭐ `visibility` обязательна, и не ради вида. Сдвинутая за край
		   панель остаётся в дереве доступности: клавиша `Tab` уводила бы фокус
		   в невидимое меню на два десятка ссылок. `visibility: hidden`
		   выключает и это, а нулевая задержка на закрытие даёт съезду
		   доиграть до конца. */
		visibility: hidden;
		transition: transform .22s ease-out, visibility 0s linear .22s;
	}

	/* ⚠️ `-101%`, а не `-100%`: при дробном масштабе экрана округление
	   оставляло на краю полоску тени в один пиксель. */

	body:has(.k-levoe-vkl:checked) #sidebar {
		transform: none;
		visibility: visible;
		transition: transform .22s ease-out, visibility 0s;
	}

	/* ⚠️ Скрипт переводит фокус НА панель при открытии, чтобы клавиатура не
	   оставалась снаружи. Кольца при этом быть не должно: панель не орган
	   управления. У того, кто пришёл клавиатурой, кольцо остаётся. */
	#sidebar:focus {
		outline: none;
	}

	#sidebar:focus-visible {
		outline: 2px solid #16181a;
		outline-offset: -3px;
	}

	/* ⛔⭐⭐⭐ Обёртка содержимого держит `position: relative; z-index: 11`, то
	   есть СВОЙ слой. Внутри него `z-index: 9000` панели значит только «выше
	   соседей внутри обёртки», а снаружи вся обёртка остаётся на 11, и
	   затемнение с 8999 ложилось ПОВЕРХ панели: меню было видно сквозь серую
	   пелену (кадр 28.08.2026).
	   Пока панель открыта, слой обёртки распускаем: `z-index: auto` при
	   `position: relative` слоя не создаёт, и панель встаёт в общий порядок
	   рядом с затемнением и шапкой. */
	body:has(.k-levoe-vkl:checked) .container-wrap {
		z-index: auto;
	}

	/* ⛔ Внутри панели видно ВСЁ, что видно на десктопе. `kolonka.css`
	   прячет на телефоне всё, кроме баннера: там колонка стояла в потоке и
	   отжимала товары вниз. В панели этой беды нет.
	   ⛔⭐⭐ Исключение `:not(.k-diler)` ОБЯЗАТЕЛЬНО и повторяет исключение из
	   `kolonka.css`. Без него общее `display: block` било по самому баннеру,
	   у которого раскладка гибкая: надпись, заголовок и текст слипались в одну
	   строку без просветов (кадр 28.08.2026). Баннер и так виден, прятать его
	   там нечем. */
	body.tax-product_cat #sidebar .widget > *:not(.k-diler),
	body.tax-product_tag #sidebar .widget > *:not(.k-diler),
	body.post-type-archive-product #sidebar .widget > *:not(.k-diler) {
		display: block !important;
	}

	/* ⛔⭐ Меню разделов возвращается в СТОЛБИК. Ниже 1000 оно раскладывалось
	   сеткой в три колонки: так задумано для планшета, где колонка стоит над
	   товарами во всю ширину. В панели шириной 340 три колонки дают по 100
	   пикселей на пункт, и названия разделов не читаются. */
	#sidebar .widget .k-menyu__spisok,
	#sidebar .k-menyu__spisok {
		display: block !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		padding: 8px !important;
	}

	#sidebar .widget .k-menyu__spisok > li,
	#sidebar .widget .k-menyu__podspisok,
	#sidebar .widget .k-menyu__podspisok > li {
		display: block !important;
	}

	/* два списка колонки тоже в один столбец */
	#sidebar .widget .k-spisok,
	#sidebar .k-spisok {
		display: block !important;
		grid-template-columns: none !important;
	}

	#sidebar .k-spisok > li + li {
		border-top: 1px solid #f1f2f4 !important;
	}

	#sidebar .k-spisok > li:nth-child(even) {
		border-left: 0 !important;
	}

	/* ⛔ Баннер дилера в узкой панели идёт столбиком: на планшете он стоял
	   строкой, и кнопка уезжала бы за край панели. */
	#sidebar .k-diler {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin: 0 0 16px;
	}

	#sidebar .k-diler__knopka {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}

	/* ⚠️ Липкость внутри панели не нужна и вредна: панель сама прокручивается. */
	html.k-lipkaya #sidebar > .widget {
		position: static !important;
		top: auto !important;
	}

	/* --------------------------------------------------- затемнение и крестик */

	.k-levoe-fon {
		display: block;
		position: fixed;
		/* под шапкой, как и панель: шапка остаётся рабочей и незатемнённой */
		top: var(--k-levoe-shapka);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 8999;
		background: rgba(10, 12, 16, .55);
		opacity: 0;
		pointer-events: none;
		transition: opacity .22s ease-out;
	}

	body:has(.k-levoe-vkl:checked) .k-levoe-fon {
		opacity: 1;
		pointer-events: auto;
	}

	.k-levoe-zakryt {
		display: none;
		position: fixed;
		top: calc(var(--k-levoe-shapka) + 12px);
		left: calc(min(340px, 88vw) - 56px);
		z-index: 9001;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		background: #f1f2f4;
		color: #16181a;
		cursor: pointer;
	}

	body:has(.k-levoe-vkl:checked) .k-levoe-zakryt {
		display: flex;
	}

	.k-levoe-zakryt svg {
		width: 20px !important;
		height: 20px !important;
	}

	/* ⛔ Страница под открытой панелью не прокручивается: иначе палец, промахнувшись
	   мимо панели, уезжает по каталогу и теряет место. */
	body:has(.k-levoe-vkl:checked) {
		overflow: hidden;
	}
}

/* ====================================================================
 * ⛔⭐⭐ Запасная ветка для браузеров без `:has()`.
 * Связь флажка с панелью держится только на нём: панель лежит в другой ветке
 * дерева, и добраться до неё соседними или дочерними связями нельзя. Без
 * `:has()` панель осталась бы навсегда уехавшей за край, а вместе с ней
 * пропали бы и баннер, и меню разделов.
 * Поэтому там колонка остаётся в потоке ровно так, как было до этой правки,
 * а кнопка и затемнение не показываются вовсе.
 * ⚠️ `:has()` есть во всех браузерах с конца 2023 года, эта ветка на самый
 * старый случай.
 * ==================================================================== */
@supports not selector(:has(*)) {
	@media (max-width: 999px) {
		.k-levoe-pusk,
		.k-levoe-fon,
		.k-levoe-zakryt {
			display: none !important;
		}

		.k-put {
			display: flex !important;
		}

		body.tax-product_cat #sidebar,
		body.tax-product_tag #sidebar,
		body.post-type-archive-product #sidebar {
			position: static;
			/* ⛔⭐⭐ `width` и `max-width` со своей пометкой: в основной ветке они
			   стоят с `!important`, и без неё колонка осталась бы шириной 340
			   посреди страницы. */
			width: auto !important;
			max-width: none !important;
			padding: 0;
			background: none;
			box-shadow: none;
			transform: none;
			overflow: visible;
			/* ⛔⭐⭐⭐ И `visibility`. Без этой строки колонка в запасной ветке
			   пропадала БЕССЛЕДНО: основное правило прячет её до нажатия, а
			   нажатия здесь нет вовсе. Поймано своей же проверкой 28.08.2026,
			   до показа владельцу. */
			visibility: visible;
		}

		body.tax-product_cat #sidebar .widget > *:not(.k-diler),
		body.tax-product_tag #sidebar .widget > *:not(.k-diler),
		body.post-type-archive-product #sidebar .widget > *:not(.k-diler) {
			display: none !important;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	body.tax-product_cat #sidebar,
	body.tax-product_tag #sidebar,
	body.post-type-archive-product #sidebar,
	.k-levoe-fon,
	.k-levoe-knopka {
		transition: none;
	}
}