/* breadcrumbs */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
}

.breadcrumbs-item {
	letter-spacing: -0.3px;
}

.breadcrumbs-item + .breadcrumbs-item::before {
	content: "\f285";
	font-family: bootstrap-icons !important;
	background-size: contain;
	font-size: 10px;
	display: inline-flex;
	margin: 0 8px;
}

@media screen and (max-width: 1199px) {
	.row:has(.breadcrumbs) {
		margin-bottom: 20px;
	}

	.breadcrumbs {
		font-size: 12px;
		/*margin-top: 0.6rem;*/
		margin-top: 0;
		margin-bottom: 0;
	}

	.breadcrumbs-item {
		font-size: 14px;
	}
}
/* breadcrumbs */

/* Внешний контейнер под градиенты */
.breadcrumbs-scroll {
    position: relative;
}

/* Внутренний контейнер с реальным скроллом */
.breadcrumbs-scroll-inner {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Мобилка: превращаем в горизонтальный скролл + градиенты */
@media screen and (max-width: 1199px) {
    .breadcrumbs-scroll-inner {
        white-space: nowrap;
        scrollbar-width: none;            /* Firefox, если нужно скрыть скроллбар */
    }

    .breadcrumbs-scroll-inner::-webkit-scrollbar {
        display: none;                    /* Chrome / Safari */
    }

    /* Крошки в одну линию */
    .breadcrumbs {
        display: inline-flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    /* Псевдоэлементы как полупрозрачные блоки по краям */
    .breadcrumbs-scroll::before,
    .breadcrumbs-scroll::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 32px; /* подстроите под макет */
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 5;
    }

    /* Левый градиент */
    .breadcrumbs-scroll::before {
        left: 0;
        background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0.95),
                rgba(255, 255, 255, 0)
        );
    }

    /* Правый градиент */
    .breadcrumbs-scroll::after {
        right: 0;
        background: linear-gradient(
                to left,
                rgba(255, 255, 255, 0.95),
                rgba(255, 255, 255, 0)
        );
    }

    /* Классы-маркеры для включения градиентов */
    .breadcrumbs-scroll.has-left-shadow::before {
        opacity: 1;
        visibility: visible;
    }

    .breadcrumbs-scroll.has-right-shadow::after {
        opacity: 1;
        visibility: visible;
    }
}