/* Боковое меню каталога (.left_block .menu_top_block.catalog_block).
 *
 * Что чинится и почему:
 *  - шаблон рисует 2-й и 3-й уровень одинаково (12px/400, padding 10px 20px),
 *    поэтому подразделы читаются как соседи своего родителя;
 *  - раскрытая ветка получает плашку с рамкой, радиусом и тенью — правило
 *    писалось под подменю, выпадающее вбок, а в сайдбаре оно раскрывается вниз,
 *    и выходит карточка внутри карточки;
 *  - стрелка одинаковая у раскрытых и свёрнутых пунктов;
 *  - «где я» помечено только цветом текста, причём тем же цветом красится и
 *    li.opened, то есть свёрнутый пункт выглядит как текущий;
 *  - подсветка строки при наведении в теме выключена совсем.
 *
 * ⚠ Тёмная тема меню живёт в bitrix/templates/aspro_max/css/custom.css (файл в
 * /bitrix/, править нельзя) и написана через `html body .menu_top_block …` со
 * сплошными !important. Поэтому здесь и !important, и префикс с .left_block —
 * при равном !important спор решает специфичность.
 */

/* ── Раскрытая ветка: направляющая линия вместо всплывающей плашки ───────── */
html body .left_block .menu_top_block.catalog_block ul.menu > li > ul.dropdown,
html body .left_block .menu_top_block.catalog_block ul.menu > li > ul.dropdown.scrollblock {
	background: rgba(168, 92, 247, .05) !important;
	border: 0 !important;
	border-left: 2px solid rgba(168, 92, 247, .30) !important;
	border-radius: 0 10px 10px 0 !important;
	box-shadow: none !important;
	padding: 4px 0 !important;
	margin: 2px 0 8px 16px !important;
}

/* Третий уровень — подчинённый список, а не соседи второго */
html body .left_block .menu_top_block.catalog_block ul.dropdown ul.dropdown,
html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown ul.dropdown {
	border-left: 1px solid rgba(168, 92, 247, .22) !important;
	margin: 2px 0 6px 24px !important;
	padding: 2px 0 !important;
}

html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown li > a.parent1,
html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown li > a.section1 {
	font-size: 11.5px !important;
	padding: 7px 16px 7px 14px !important;
	color: rgba(255, 255, 255, .60) !important;
}

html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown li > a.section {
	font-weight: 500 !important;
	padding-left: 14px !important;
}

/* ── Наведение: строка отзывается фоном, а не только цветом ──────────────── */
html body .left_block .menu_top_block.catalog_block ul.menu > li > a:hover,
html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown li:hover > a,
html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown li > a:hover {
	background: rgba(168, 92, 247, .10) !important;
	border-radius: 8px !important;
}

/* ── Где я: текущий раздел с маркером; свёрнутый пункт акцентом не красим ── */
/* Вся цепочка до текущего раздела помечена классом current, поэтому родители
   получают только цвет, а плашку с маркером — самый глубокий пункт, то есть
   страница, на которой человек стоит. Браузер без :has() покажет цвет без
   плашки — это и есть поведение до правки. */
html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown li.current > a {
	color: #E845DA !important;
	font-weight: 600 !important;
}

html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown li.current:not(:has(li.current)) > a {
	position: relative;
	background: rgba(168, 92, 247, .16) !important;
	border-radius: 8px !important;
}

html body .left_block .menu_top_block.catalog_block ul.menu li ul.dropdown li.current:not(:has(li.current)) > a:before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(180deg, #a855f7, #e845da);
}

/* custom.css красит акцентом и li.opened — то есть пункт, который человек
   свернул руками, выглядит как раздел, в котором он находится. */
html body .left_block .menu_top_block.catalog_block ul.menu li.opened:not(.current) > a,
html body .left_block .menu_top_block.catalog_block ul.menu li.opened:not(.current) > a > span {
	color: #FFFFFF !important;
}

/* ── Стрелка показывает, раскрыт пункт или свёрнут ───────────────────────── */
/* Класс mda-open ставит catalog-menu.js: в разметке Aspro `opened` значит
   «пользователь переключил», а не «раскрыто», — по классам состояние не понять.
   translateY повторяет сдвиг иконки из темы, иначе поворот её смещает. */
html body .left_block .menu_top_block.catalog_block ul.menu a > i.svg-inline-down {
	transition: transform .18s ease !important;
}

html body .left_block .menu_top_block.catalog_block ul.menu li.mda-open > a > i.svg-inline-down {
	transform: rotate(180deg) translateY(5px) !important;
}

/* Зона раскрытия — различимая кнопка, а не невидимый уголок */
html body .left_block .menu_top_block.catalog_block ul.menu .toggle_block {
	width: 44px !important;
	border-radius: 8px !important;
	transition: background-color .15s ease !important;
}

html body .left_block .menu_top_block.catalog_block ul.menu .toggle_block:hover {
	background: rgba(168, 92, 247, .22) !important;
}