/* ============================================================
   Каталог в шапке — выпадающее меню в стиле shadcn/ui
   Кнопка-триггер остаётся штатной (.wrap > a .catalog-Epf),
   меняется только сама выпадашка. Открытие по ховеру, чистый CSS.
   Подгружается автоматически как style.css шаблона компонента.
   ============================================================ */

/* ---------- Кнопка-триггер «Каталог» (старый вид) ---------- */
.catalog-menu {
	display: flex;
	align-items: stretch;
}
.catalog-menu__root {
	position: relative;
	display: flex;
}
.catalog-menu__trigger {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: #000;
	color: #fff;                  /* белый текст */
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 4px;
	font-size: 1rem;
}


@media (min-width: 992px) {
	.search .dropdown-select .dropdown-select__title{
		line-height: 2.5 !important;
	}
}
.catalog-menu__trigger:hover,
.catalog-menu__root:hover .catalog-menu__trigger {
	background: #000;
	color: #fff;
	text-decoration: none;
}
.catalog-menu__trigger-icon {
	position: relative;
	top: -1px;
	display: inline-flex;
	width: 20px;
	height: 16px;
	margin-right: 4px;
}
.catalog-menu__trigger-icon svg {
	display: block;
	width: 20px;
	height: 16px;
}

/* ---------- Панель выпадашки ---------- */
.catalog-menu__panel {
	--cm-bg: #ffffff;
	--cm-border: #e4e4e7;      /* zinc-200 */
	--cm-fg: #18181b;          /* zinc-900 */
	--cm-muted: #71717a;       /* zinc-500 */
	--cm-accent-bg: #f4f4f5;   /* zinc-100 (hover) */
	--cm-brand: #ee151e;       /* фирменный */
	--cm-radius: 10px;
	--cm-item-radius: 6px;
	--cm-shadow: 0 12px 32px -8px rgba(24, 24, 27, .18), 0 4px 8px -2px rgba(24, 24, 27, .08);

	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	padding-top: 6px;             /* невидимый «мостик» для ховера */

	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.catalog-menu__root:hover > .catalog-menu__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ---------- Карточка (popover) ---------- */
.catalog-menu__card {
	min-width: 260px;
	max-width: 320px;
	background: var(--cm-bg);
	border: 1px solid var(--cm-border);
	border-radius: var(--cm-radius);
	box-shadow: var(--cm-shadow);
	padding: 5px;
	color: var(--cm-fg);
}

/* ---------- Список пунктов ---------- */
.catalog-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.catalog-menu__list::-webkit-scrollbar { width: 8px; }
.catalog-menu__list::-webkit-scrollbar-thumb {
	background: #d4d4d8;
	border: 2px solid var(--cm-bg);
	border-radius: 8px;
}
.catalog-menu__list::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

.catalog-menu__item { position: relative; margin: 0; padding: 0; }
.catalog-menu__item:before { display: none !important; } /* убираем буллеты темы */

/* ---------- Ссылка пункта ---------- */
.catalog-menu__link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border-radius: var(--cm-item-radius);
	color: var(--cm-fg);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	white-space: normal;
	transition: background-color .12s ease, color .12s ease;
}
.catalog-menu__link:hover,
.catalog-menu__item.has-sub:hover > .catalog-menu__link {
	background-color: var(--cm-accent-bg);
	color: var(--cm-fg);
	text-decoration: none;
}
.catalog-menu__item.is-active > .catalog-menu__link {
	color: var(--cm-brand);
}

/* Иконка раздела */
.catalog-menu__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}
.catalog-menu__icon img,
.catalog-menu__icon svg {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
}
.catalog-menu__text { flex: 1 1 auto; min-width: 0; }

/* Стрелка вправо у пунктов с подменю */
.catalog-menu__caret {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--cm-muted);
}

/* ---------- Подменю (flyout вправо) ---------- */
.catalog-menu__subpanel {
	position: absolute;
	top: -5px;
	left: 100%;
	z-index: 1001;
	padding-left: 6px;            /* мостик для ховера */

	opacity: 0;
	visibility: hidden;
	transform: translateX(4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.catalog-menu__item.has-sub:hover > .catalog-menu__subpanel {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* На узких экранах flyout раскрывается влево, чтобы не уезжать за край */
@media (max-width: 1280px) {
	.catalog-menu__subpanel {
		left: auto;
		right: 100%;
		padding-left: 0;
		padding-right: 6px;
		transform: translateX(-4px);
	}
	.catalog-menu__item.has-sub:hover > .catalog-menu__subpanel {
		transform: translateX(0);
	}
}