/**
 * Ряд «Избранное / Доступные / Мои курсы» в каталоге.
 * Значения — CSS-переменные (настраиваются во вкладке «Оформление каталога»).
 */

.mkk_nav.mbn-mkk-nav .mkk_nav_wrap {
	display: flex;
	justify-content: var(--mbn-cnav-align, flex-end);
}

.mkk_nav.mbn-mkk-nav .item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center;
	gap: 0;
	font-size: var(--mbn-cnav-font-size, 14px) !important;
	font-weight: var(--mbn-cnav-font-weight, 400) !important;
	text-transform: var(--mbn-cnav-transform, none);
	line-height: 1.25 !important;
	vertical-align: middle;
	float: none !important;
	position: relative;
	overflow: visible;
	transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
	text-decoration: none !important;
	box-sizing: border-box;
}

.mkk_nav.mbn-mkk-nav .item .fa,
.mkk_nav.mbn-mkk-nav .item .mbn-nav-uicon {
	/* inline-block: FA-глифы (♥) иначе обрезаются слева в inline-flex */
	display: inline-block !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-right: var(--mbn-cnav-icon-gap, 6px);
	padding-left: 0.08em;
	font-size: inherit !important;
	line-height: 1 !important;
	vertical-align: middle;
	flex-shrink: 0;
	position: relative;
	top: 0 !important;
	overflow: visible;
}

.mkk_nav.mbn-mkk-nav .item .mkk_nav_text {
	display: inline-block;
	font-size: inherit !important;
	font-weight: inherit !important;
	text-transform: inherit;
	line-height: 1.25 !important;
	vertical-align: middle;
}

/* ——— Рамка ——— */
.mkk_nav.mbn-mkk-nav--frame .mkk_nav_inner {
	border: 1px solid var(--mbn-cnav-frame-border, #ccc);
	background: var(--mbn-cnav-frame-bg, #fff);
	border-radius: var(--mbn-cnav-frame-radius, 7px);
	margin: var(--mbn-cnav-frame-margin-y, 15px) 0;
	padding: var(--mbn-cnav-frame-pad-y, 10px) var(--mbn-cnav-frame-pad-x, 15px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
}

.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item,
.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item:last-child {
	margin: var(--mbn-cnav-frame-item-margin-y, 5px) var(--mbn-cnav-frame-item-margin-x, 15px) !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--mbn-cnav-frame-color, #888) !important;
	border-radius: 0 !important;
}

.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item span {
	color: inherit !important;
}

.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item:hover,
.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item:hover span {
	color: var(--mbn-cnav-frame-color-hover, #000) !important;
}

.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item.current,
.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item.current span {
	color: var(--mbn-cnav-frame-color-current, #000) !important;
	pointer-events: none;
}

/* ——— Кнопки ——— */
.mkk_nav.mbn-mkk-nav--buttons .mkk_nav_inner {
	margin: var(--mbn-cnav-frame-margin-y, 15px) 0;
	padding: 0;
	border: 0;
	background: transparent;
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--mbn-cnav-align, flex-end);
	align-items: center;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
}

.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item,
.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item:last-child {
	margin: var(--mbn-cnav-btn-margin-y, 5px) var(--mbn-cnav-btn-margin-x, 7px) !important;
	border: 1px solid var(--mbn-cnav-btn-border, #ccc) !important;
	background: var(--mbn-cnav-btn-bg, #fff) !important;
	border-radius: var(--mbn-cnav-btn-radius, 7px) !important;
	padding: var(--mbn-cnav-btn-pad-y, 12px) var(--mbn-cnav-btn-pad-x, 24px) !important;
	color: var(--mbn-cnav-btn-color, #000) !important;
	box-sizing: border-box;
}

.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item span {
	color: inherit !important;
}

.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item:hover {
	border-color: var(--mbn-cnav-btn-border-hover, #333) !important;
	background: var(--mbn-cnav-btn-bg-hover, #333) !important;
	color: var(--mbn-cnav-btn-color-hover, #fff) !important;
}

.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item:hover span {
	color: inherit !important;
}

.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item.current {
	border-color: var(--mbn-cnav-btn-border-current, #333) !important;
	background: var(--mbn-cnav-btn-bg-current, #333) !important;
	color: var(--mbn-cnav-btn-color-current, #fff) !important;
	pointer-events: none;
}

.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item.current span {
	color: inherit !important;
}

/* ——— Как в MEMBERLUX (без рамки/кнопок), цвета ряда ——— */
.mkk_nav.mbn-mkk-nav--off .mkk_nav_inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--mbn-cnav-align, flex-end);
	align-items: center;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	gap: 0;
}

.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item,
.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item:last-child {
	margin: var(--mbn-cnav-native-item-margin-y, 5px) var(--mbn-cnav-native-item-margin-x, 15px) !important;
	padding: 0 !important;
	color: var(--mbn-cnav-native-color, #555) !important;
	transition: color 0.3s ease-in-out !important;
}

.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item span,
.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item .fa,
.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item .mbn-nav-uicon,
.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item .mkk_nav_text {
	color: inherit !important;
}

.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item:hover,
.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item:hover span {
	color: var(--mbn-cnav-native-color-hover, #000) !important;
}

.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item.current,
.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item.current span {
	color: var(--mbn-cnav-native-color-current, #000) !important;
	pointer-events: none;
}

@media (max-width: 480px) {
	.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item,
	.mkk_nav.mbn-mkk-nav--frame .breadcrumbs-wrap .mkk_nav_inner .item:last-child {
		margin: var(--mbn-cnav-frame-item-margin-y, 5px) 10px !important;
	}

	.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item,
	.mkk_nav.mbn-mkk-nav--buttons .breadcrumbs-wrap .mkk_nav_inner .item:last-child {
		padding: 10px 16px !important;
	}

	.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item,
	.mkk_nav.mbn-mkk-nav--off .breadcrumbs-wrap .mkk_nav_inner .item:last-child {
		margin: var(--mbn-cnav-native-item-margin-y, 5px) 10px !important;
	}
}

/* Предпросмотр в админке */
.mbn-cnav-preview {
	margin: 12px 0 20px;
	padding: 16px;
	background: #f0f2f4;
	border-radius: 8px;
}
.mbn-cnav-preview .mkk_nav {
	margin: 0;
}
.mbn-cnav-preview .container,
.mbn-cnav-preview .row,
.mbn-cnav-preview .col-xs-12 {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}
.mbn-cnav-preview .breadcrumbs-row {
	padding: 0;
}
.mbn-cnav-preview .mkk_nav_wrap {
	display: flex;
	justify-content: var(--mbn-cnav-align, flex-end);
	width: 100%;
}
.mbn-cnav-preview .mkk_nav_inner {
	width: auto !important;
	max-width: 100%;
	float: none !important;
}
.mbn-cnav-preview .item {
	cursor: default;
	float: none !important;
	white-space: nowrap;
}
.mbn-cnav-preview[data-mbn-cnav-mode="off"] .mbn-cnav-preview__note {
	display: block;
}
.mbn-cnav-preview__note {
	display: none;
	margin: 8px 0 12px;
	color: #646970;
}
.mbn-cnav-preview .mkk_nav.mbn-mkk-nav--off .mkk_nav_inner {
	border: 0;
	background: transparent;
	padding: 4px 0;
	margin: 0;
}