/* ====================================================================
 * KENDA. Меню разделов в левой колонке каталога.
 *
 * Собрано по макету Вени от 25.08.2026: белая карточка с мягкой тенью,
 * в каждой строке значок, название и счётчик, открытый раздел залит
 * светло-красным и отмечен красной полосой у самого края карточки.
 *
 * Разметку печатает mu-plugins/kenda-menyu-razdelov.php.
 * Ширину самой колонки задаёт katalog.css.
 * ==================================================================== */

/* ⭐ Веня 25.08.2026: «Каталог KENDA» переехал из баннера сюда, перед меню. */
.k-menyu-blok {
	display: block;
}

/* Общая надпись блока: красная, со значком, который называет содержимое.
   Одна и та же и над меню разделов, и над плиткой категорий: блоки стоят
   рядом, и разный набор был бы виден сразу. Веня 25.08.2026. */
/* ⭐ Веня 26.08.2026: «заголовки к обрамлению ближе». Было 12 снизу. */
.k-nadzagolovok {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px 2px;
	color: #d81f2a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}

/* размер значка жёстко и с обёрткой: тема раздувает вложенную графику */
#ajax-content-wrap .k-nadzagolovok__znachok,
.k-nadzagolovok__znachok {
	flex: 0 0 15px;
	width: 15px !important;
	height: 15px !important;
	max-width: 15px;
	color: #d81f2a;
}


.k-menyu {
	--k-menyu-tekst: #23262b;
	--k-menyu-tihiy: #7c828c;
	--k-menyu-akcent: #d81f2a;
	overflow: hidden;
	border: 1px solid #ebedf0;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(24, 32, 45, .06);
}

/* ⛔ Тема вешает на виджеты свои поля, рамки и маркеры списка. Гасим их
   здесь, а не правкой темы: обновление темы не должно ломать меню. */
/* ⚠️ Полей сверху и снизу у списка БОЛЬШЕ НЕТ. Из-за них при наведении на
   первую и последнюю строку заливка не доходила до края карточки, и над
   розовой полосой оставалась белая полоска в 8 пикселей (Веня, 25.08.2026:
   «видна розовая полоска и верх серого меню»). Теперь строка заливается во
   всю ширину и до самого края, а скругление карточки обрезает её по углам. */
#sidebar .widget .k-menyu__spisok,
.k-menyu__spisok {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* ⚠️ Тема добавляет к пунктам виджета свои поля И пустой `::after` высотой
   12 пикселей: строка выходила 56 вместо 44, а карточка на 120 пикселей
   длиннее макета (замер 25.08.2026, девять строк по 56 и последняя 44).
   Гасим жёстко: перебить наследие темы обычной специфичностью не выходит. */
#sidebar .widget .k-menyu__punkt,
.k-menyu__punkt {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
}

.k-menyu__punkt::before,
.k-menyu__punkt::after,
.k-menyu__punkt::marker {
	content: none !important;
	display: none !important;
}

/* ⭐ Строка идёт во всю ширину карточки: в макете заливка открытого раздела
   доходит до края, а не висит островом с полями по бокам. */
#sidebar .widget .k-menyu__ssylka,
.k-menyu__ssylka {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 44px;
	padding: 7px 14px 7px 16px;
	border: 0;
	color: var(--k-menyu-tekst);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

#sidebar .widget .k-menyu__ssylka:visited,
.k-menyu__ssylka:visited {
	color: var(--k-menyu-tekst);
}

/* ⚠️ Цвет задаётся и самой ссылке, и вложенной подписи: тема красит при
   наведении именно внутренний текст, и название пункта становилось красным,
   хотя красный у нас означает ОТКРЫТЫЙ раздел. Замерено 25.08.2026:
   rgb(255,79,87) вместо тёмного. */
#sidebar .widget .k-menyu__ssylka:hover,
#sidebar .widget .k-menyu__ssylka:hover .k-menyu__imya,
#sidebar .widget .k-menyu__ssylka:focus-visible,
#sidebar .widget .k-menyu__ssylka:focus-visible .k-menyu__imya,
.k-menyu__ssylka:hover,
.k-menyu__ssylka:hover .k-menyu__imya,
.k-menyu__ssylka:focus-visible,
.k-menyu__ssylka:focus-visible .k-menyu__imya {
	background-color: transparent;
	color: var(--k-menyu-tekst);
}

#sidebar .widget .k-menyu__ssylka:hover,
.k-menyu__ssylka:hover,
.k-menyu__ssylka:focus-visible {
	background-color: #f5f6f8;
}

/* у ОТКРЫТОГО раздела наведение ничего не меняет: он и так залит своим */
#sidebar .widget .k-menyu__ssylka--tekushchiy:hover .k-menyu__imya,
.k-menyu__ssylka--tekushchiy:hover .k-menyu__imya {
	color: var(--k-menyu-akcent);
}

.k-menyu__ssylka:focus-visible {
	outline: 2px solid var(--k-menyu-akcent);
	outline-offset: -2px;
}

/* ⚠️ Размер значка задан жёстко и с идентификатором обёртки: тема раздувает
   любую вложенную графику до ширины ячейки (то же было с чипсами разделов). */
#ajax-content-wrap .k-menyu__znachok,
.k-menyu__znachok {
	flex: 0 0 22px;
	width: 22px !important;
	height: 22px !important;
	max-width: 22px;
	color: #4a505a;
	transition: color .15s ease;
}

#ajax-content-wrap .k-menyu__ssylka:hover .k-menyu__znachok,
.k-menyu__ssylka:hover .k-menyu__znachok {
	color: var(--k-menyu-akcent);
}

/* Вложенный список подразделов: своих полей и маркеров у него нет, заливка
   строк по-прежнему идёт во всю ширину карточки. */
#sidebar .widget .k-menyu__podspisok,
.k-menyu__podspisok {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* ⭐ Подраздел стоит правее своего раздела: Веня 25.08.2026. Сдвиг даём
   полем ссылки, а не полем пункта, чтобы заливка при наведении по-прежнему
   шла во всю ширину карточки. */
#sidebar .widget .k-menyu__ssylka--vlozhennyy,
.k-menyu__ssylka--vlozhennyy {
	padding-left: 36px;
}

/* тонкая направляющая, по которой видно, что это ветка раздела выше */
.k-menyu__ssylka--vlozhennyy::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #ebedf0;
}

.k-menyu__ssylka--vlozhennyy .k-menyu__znachok {
	color: #6b727c;
}

.k-menyu__imya {
	flex: 1 1 auto;
	min-width: 0;
}

/* ⛔⭐ Тот же вид плашки, что у плиток каталога (katalog.css). Прежний
   #f2f3f6 отличался от белой подложки на 1,11 при единице как «не
   отличается», и число терялось. Веня 26.08.2026. */
.k-menyu__schet {
	flex: 0 0 auto;
	min-width: 30px;
	padding: 2px 7px;
	border-radius: 7px;
	background: #6b7280;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	transition: background-color .15s ease, color .15s ease;
}

/* ------------------------------------------------------ открытый раздел */
#sidebar .widget .k-menyu__ssylka--tekushchiy,
.k-menyu__ssylka--tekushchiy,
.k-menyu__ssylka--tekushchiy:visited,
.k-menyu__ssylka--tekushchiy:hover {
	background: #fdeef0;
	color: var(--k-menyu-akcent);
	font-weight: 700;
}

.k-menyu__ssylka--tekushchiy .k-menyu__znachok {
	color: var(--k-menyu-akcent);
}

/* у открытого раздела плашка та же, только фирменного цвета: розовая на
   розовом отличалась на 1,14, то есть сливалась с подложкой пункта */
.k-menyu__ssylka--tekushchiy .k-menyu__schet {
	background: var(--k-menyu-akcent);
	color: #fff;
}

/* красная полоса у самого края карточки */
.k-menyu__ssylka--tekushchiy::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--k-menyu-akcent);
}

/* ------------------------------------------------ планшет: три в ряд */
/* ⚠️ Ниже 1000 боковая колонка встаёт над товарами во всю ширину, и десять
   строк в столбик отжимали сетку почти на экран вниз. Раскладываем сеткой. */
@media (max-width: 999px) {
	.k-menyu {
		margin-bottom: 20px;
	}

	#sidebar .widget .k-menyu__spisok,
	.k-menyu__spisok {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2px;
		/* ⚠️ `!important` обязателен: базовое правило выше тоже с ним, а
		   важность сильнее порядка следования. */
		padding: 8px !important;
		/* в сетке отступ вложенности не нужен: ряды и так разбиты по колонкам */
	}

	/* ⛔⭐ Вложенный список подразделов на планшете становится ПРОЗРАЧНЫМ для
	   раскладки: иначе вся ветка «Велопокрышек» занимала ОДНУ ячейку сетки, и
	   справа зияла пустота на девять строк (кадр 25.08.2026, ширина 768).
	   `display: contents` поднимает все ссылки на один уровень сетки. */
	#sidebar .widget .k-menyu__spisok > li,
	.k-menyu__spisok > li,
	#sidebar .widget .k-menyu__podspisok,
	.k-menyu__podspisok,
	#sidebar .widget .k-menyu__podspisok > li,
	.k-menyu__podspisok > li {
		display: contents;
	}

	#sidebar .widget .k-menyu__ssylka,
	.k-menyu__ssylka,
	#sidebar .widget .k-menyu__ssylka--vlozhennyy,
	.k-menyu__ssylka--vlozhennyy {
		border-radius: 10px;
		padding: 7px 12px;
	}

	.k-menyu__ssylka--vlozhennyy::after { content: none; }

	.k-nadzagolovok {
		margin-bottom: 10px;
	}

	.k-menyu__ssylka--tekushchiy::before {
		border-radius: 3px 0 0 3px;
	}
}

@media (max-width: 800px) {
	#sidebar .widget .k-menyu__spisok,
	.k-menyu__spisok {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-menyu__ssylka,
	.k-menyu__znachok,
	.k-menyu__schet {
		transition: none;
	}
}

/* ====================================================================
 * Заголовок карточки: по макету 25.08.2026 он ВНУТРИ рамки, первой
 * строкой, и отделён от списка тонкой линией. Прежде он висел над
 * карточкой сам по себе, и рамка начиналась сразу со списка.
 * ==================================================================== */
.k-menyu .k-nadzagolovok--menyu {
	margin: 0;
	padding: 15px 16px 13px;
	border-bottom: 1px solid #ebedf0;
}

/* ⚠️ У списка внутри карточки полей нет намеренно: заливка строки при
   наведении обязана доходить до края карточки. Отступ от линии даёт
   собственное поле первой строки. */
.k-menyu .k-menyu__spisok {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}


/* ====================================================================
 * ⭐⭐⭐ ЧЁРНЫЙ ТЕКСТ В МЕНЮ КАТАЛОГА. Веня 27.08.2026: «весь текст в
 * левом меню сделай чёрным. Только во вкладке каталога и только текст,
 * иконки не нужно».
 *
 * ⛔ Дело было НЕ в цвете, а в правиле темы:
 *      .ascend.woocommerce #sidebar div ul li a { color: inherit }
 * Вес 124 против наших 120, тема выигрывает четырьмя очками, и ссылки
 * наследуют серый #676767 прямо от `body`. Поэтому объявленный выше
 * `--k-menyu-tekst` до пунктов не доезжал вовсе: замер показывал 103,
 * хотя в переменной стоит #23262b.
 *
 * ⭐ Здесь вес 150: один идентификатор и пять наших классов. Чужих
 * классов темы не трогаем, чтобы правка не рассыпалась при её обновлении.
 *
 * ⚠️ Что НЕ красим и почему:
 *   значки пунктов и значок заголовка   — Веня просил не трогать;
 *   плашки со счётчиками                — белые на цветной подложке,
 *                                         чёрным они станут нечитаемы.
 * ==================================================================== */
#sidebar .k-menyu-blok .k-menyu .k-menyu__spisok .k-menyu__punkt .k-menyu__ssylka,
#sidebar .k-menyu-blok .k-menyu .k-menyu__spisok .k-menyu__punkt .k-menyu__ssylka:link,
#sidebar .k-menyu-blok .k-menyu .k-menyu__spisok .k-menyu__punkt .k-menyu__ssylka:visited,
#sidebar .k-menyu-blok .k-menyu .k-menyu__spisok .k-menyu__punkt .k-menyu__ssylka:hover,
#sidebar .k-menyu-blok .k-menyu .k-menyu__spisok .k-menyu__punkt .k-menyu__ssylka:focus-visible,
#sidebar .k-menyu-blok .k-menyu .k-menyu__spisok .k-menyu__punkt .k-menyu__ssylka .k-menyu__imya {
	color: #000;
}

/* то же, когда меню стоит вне сайдбара: там правило темы не действует,
   и хватает обычного веса */
.k-menyu .k-menyu__ssylka,
.k-menyu .k-menyu__ssylka:hover,
.k-menyu .k-menyu__ssylka:visited,
.k-menyu .k-menyu__ssylka .k-menyu__imya,
.k-menyu .k-menyu__ssylka--tekushchiy,
.k-menyu .k-menyu__ssylka--tekushchiy:hover .k-menyu__imya {
	color: #000;
}

/* заголовок карточки каталога. ⚠️ Класс `--menyu` есть только у него:
   «Помощь по каталогу» и «Полезно перед выбором» остаются красными,
   как Веня и просил, правка только во вкладке каталога. */
.k-nadzagolovok.k-nadzagolovok--menyu {
	color: #000;
}


/* ================================================================== *
 * Телефон и планшет: надзаголовок над плиткой разделов уходит ВПРАВО.
 * Веня 28.08.2026: «заголовок для блоков категорий красный, позиционируется
 * справа. Сами блоки ниже с отступом 6 пикселей слева».
 *
 * ⚠️ Красным он был и раньше (`color: #d81f2a` в базовом правиле выше),
 * новое здесь только положение.
 * ⛔ Правило намеренно привязано к `.kenda-lenta`, а НЕ к `.k-nadzagolovok`
 * вообще: тот же класс стоит над меню разделов внутри выезжающей панели, и
 * там надпись обязана остаться слева, у своего значка.
 * ================================================================== */
@media (max-width: 999px) {
	.kenda-lenta .k-nadzagolovok {
		justify-content: flex-end;
		/* ⚠️ Поле справа равняем с полем плиток слева: 6. Иначе надпись висит
		   на два пикселя дальше края ленты, и правый край выглядит рваным. */
		margin-right: 6px;
	}
}