/**
 * sinon.catalogskin — двухпанельное мега-меню каталога (эталон Alif Shop).
 * Перекраивает раскладку .header-menu__dropdown-menu--grids; вёрстку Aspro не трогаем.
 */

.header-menu__dropdown-menu--grids[data-bh-mega] {
	padding: 0 !important;
	display: flex !important;
	min-height: 460px;
	max-height: 74vh;
	border-radius: 20px;
	overflow: hidden;
}

/* Отступ от шапки и скругление углов — на самой обёртке меню (grid внутри неё не
   прямой потомок, его margin отступ от шапки не создаёт). Обёртка absolute. */
.bh-mega-wrap {
	margin-top: 22px !important;
	border-radius: 20px !important;
}

/* Затемнение + блюр фона за открытым меню. z-index 2: под шапкой (.headers-container
   создаёт контекст наложения z:3), но над контентом страницы. */
.bh-mega-overlay {
	position: fixed;
	inset: 0;
	z-index: 2;
	background: rgba(16, 18, 22, .34);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	pointer-events: none;
}

.bh-mega-overlay--on {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.bh-mega-overlay { transition: none; }
}

/* ------------------------------------------------------------ левая колонка */

.bh-mega__side {
	flex: 0 0 306px;
	padding: 16px;
	overflow-y: auto;
	border-right: 1px solid rgba(16, 18, 22, .07);
}

.bh-mega__cat {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 9px 12px;
	border-radius: 12px;
	text-align: left;
	font-family: inherit;
	font-size: 14.5px;
	color: #14171d;
	transition: background-color .13s ease, color .13s ease;
}

/* Фон-подсветка — ТОЛЬКО у активного раздела (открытого справа); наведение
   даёт лишь красный текст, иначе наведённая ссылка и активный раздел выглядели
   бы как две активные одновременно. */
.bh-mega__cat--on {
	background: #f4f5f7;
	color: #e11d2e;
	font-weight: 600;
}

.bh-mega__cat:hover:not(.bh-mega__cat--on) {
	color: #e11d2e;
}

.bh-mega__cat img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	flex: 0 0 30px;
}

.bh-mega__cat .bh-mega__dot {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 8px;
	background: #eceef1;
}

.bh-mega__cat span {
	flex: 1 1 auto;
	line-height: 1.25;
}

.bh-mega__cat .bh-mega__arr {
	flex: 0 0 auto;
	color: #c2c6cd;
	font-style: normal;
	font-size: 16px;
	transition: color .13s ease;
}

.bh-mega__cat--on .bh-mega__arr {
	color: #e11d2e;
}

/* Ссылки Акции/Бренды/Услуги/Компания/Контакты — переходы, без стрелки и правой панели */
a.bh-mega__cat--link {
	text-decoration: none;
}

a.bh-mega__cat--link:hover {
	color: #e11d2e;
}

/* Разделитель: нижний блок (Услуги/Компания/Контакты) отделён от основного */
.bh-mega__sep {
	height: 1px;
	background: rgba(16, 18, 22, .09);
	margin: 10px 12px;
}

/* Подвал сайдбара: телефон + соцсети */
.bh-mega__foot {
	margin-top: 10px;
	padding: 16px 12px 4px;
	border-top: 1px solid rgba(16, 18, 22, .09);
}

.bh-mega__phone {
	display: block;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #14171d;
	text-decoration: none;
	margin-bottom: 12px;
}

.bh-mega__phone:hover {
	color: #e11d2e;
}

.bh-mega__foot .social {
	margin: 0;
}

.bh-mega__foot .social__items {
	gap: 12px;
}

/* ----------------------------------------------------------- правая колонка */

.bh-mega__content {
	flex: 1 1 auto;
	padding: 28px 34px;
	overflow-y: auto;
}

.bh-mega__panel {
	display: none;
}

.bh-mega__panel--on {
	display: block;
}

.bh-mega__h {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #14171d;
	margin: 0 0 20px;
}

.bh-mega__cols {
	column-count: 3;
	column-gap: 32px;
}

.bh-mega__cols a {
	display: block;
	break-inside: avoid;
	font-size: 14px;
	color: #5b616b;
	text-decoration: none;
	padding: 7px 0;
	transition: color .12s ease;
}

.bh-mega__cols a:hover {
	color: #e11d2e;
}

.bh-mega__all {
	display: inline-block;
	margin-top: 14px;
	font-size: 13.5px;
	color: #e11d2e;
	text-decoration: none;
	font-weight: 600;
}

@media (max-width: 1200px) {
	.bh-mega__cols { column-count: 2; }
	.bh-mega__side { flex-basis: 268px; }
}

@media (prefers-reduced-motion: reduce) {
	.bh-mega__cat, .bh-mega__cat .bh-mega__arr, .bh-mega__cols a { transition: none; }
}