/* ============================================================
   Меню каталога САРМА (заменяет navstyle.css)
   Десктоп: мегаменю «рельса разделов + панель подразделов»
   Мобильный: offcanvas с пошаговым погружением (drill-down)
   ============================================================ */

/* ---------- Десктоп: мегаменю ---------- */

.sa-catalog-nav > .nav-link {
	font-weight: var(--font-weight-bold, bold);
}

/* Стрелка каретки: плавный поворот при открытом меню */
.sa-catalog-nav > .nav-link::after {
	vertical-align: .15em;
	transition: transform .2s ease;
}

.sa-catalog-nav > .nav-link.show::after,
.sa-catalog-nav > .nav-link[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.sa-catalog-nav > .nav-link::after { transition: none; }
}

.sa-mega {
	left: 0;
	right: 0;
	width: 100%;
	margin-top: 0;
	padding: 0;
	border: 0;
	border-top: 3px solid var(--primary-color, #1da1ca);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 18px 40px rgba(29, 48, 66, .22);
	overflow: hidden;
}

.sa-mega-inner {
	display: flex;
	min-height: 320px;
	max-height: calc(100vh - 120px);
}

/* Рельса разделов слева */
.sa-mega-rail {
	flex: 0 0 300px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #f5f7f9;
	border-right: 1px solid #e6eaee;
	overflow-y: auto;
}

.sa-rail-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 11px 14px 11px 18px;
	border: 0;
	border-left: 3px solid transparent;
	background: none;
	text-align: left;
	font-size: 15px;
	color: var(--link-color, #404040);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.sa-rail-item svg { flex: 0 0 auto; opacity: .35; }

.sa-rail-item:hover,
.sa-rail-item:focus-visible,
.sa-rail-item.active {
	background: #fff;
	border-left-color: var(--primary-color, #1da1ca);
	color: var(--primary-color, #1da1ca);
	font-weight: 600;
	outline: none;
}

.sa-rail-item.active svg { opacity: 1; }

/* Панель подразделов справа */
.sa-mega-panes {
	flex: 1 1 auto;
	background: #fff;
	overflow-y: auto;
}

.sa-pane { display: none; padding: 22px 26px 26px; }
.sa-pane.active { display: block; }

.sa-pane-title {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 19px;
	font-weight: 700;
	color: var(--deep-blue-color, #1d3042);
	text-decoration: none;
}

.sa-pane-title span {
	font-size: 13px;
	font-weight: 400;
	color: var(--primary-color, #1da1ca);
	white-space: nowrap;
}

.sa-pane-title:hover,
.sa-pane-title:hover span { color: var(--primary-color, #1da1ca); }

/* Колонки: группы раскладываются автоматически */
.sa-pane-cols {
	columns: 240px 3;
	column-gap: 34px;
}

.sa-col-group {
	break-inside: avoid;
	margin-bottom: 18px;
}

.sa-group-title {
	display: block;
	margin-bottom: 6px;
	padding-bottom: 5px;
	border-bottom: 1px solid #eef1f4;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--deep-blue-color, #1d3042);
	text-decoration: none;
}

.sa-group-title:hover { color: var(--primary-color, #1da1ca); }

.sa-link {
	display: block;
	padding: 4px 0;
	font-size: 14px;
	line-height: 1.35;
	color: var(--p-color, #666262);
	text-decoration: none;
}

.sa-link:hover { color: var(--primary-color, #1da1ca); }

.sa-link.active {
	color: var(--primary-color, #1da1ca);
	font-weight: 600;
}

/* ---------- Мобильный offcanvas: drill-down ---------- */

.sa-catalog-offcanvas { max-width: 340px; }

.sa-catalog-offcanvas .offcanvas-header {
	gap: 10px;
	border-bottom: 1px solid #e6eaee;
}

.sa-oc-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f0f3f6;
	color: var(--deep-blue-color, #1d3042);
	cursor: pointer;
}

.sa-oc-back:hover { background: #e2e8ee; }

.sa-oc-panel { display: none; }
.sa-oc-panel.active { display: block; animation: saOcIn .18s ease; }

@keyframes saOcIn {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

.sa-oc-link,
.sa-oc-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid #eef1f4;
	background: none;
	text-align: left;
	font-size: 15px;
	color: var(--link-color, #404040);
	text-decoration: none;
	cursor: pointer;
}

.sa-oc-next svg { flex: 0 0 auto; color: var(--gray-color, #bdbdbd); }

.sa-oc-link:hover,
.sa-oc-next:hover { color: var(--primary-color, #1da1ca); background: #f8fafc; }

.sa-oc-link.active { color: var(--primary-color, #1da1ca); font-weight: 600; }

.sa-oc-all {
	font-weight: 600;
	color: var(--primary-color, #1da1ca);
	background: #f5fafd;
}

/* Уважение к reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sa-oc-panel.active { animation: none; }
}