/* Хлебные крошки */
/* 1. Общий контейнер */
.mod-breadcrumbs.breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    background: transparent !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none;
}

/* Удаляем стандартные разделители (слеши) */
.mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: none !important;
}

/* 2. Общие стили для ВСЕХ блоков (и текста "Вы здесь", и ссылок) */
.mod-breadcrumbs__here, 
.mod-breadcrumbs__divider, 
.mod-breadcrumbs__item {
    position: relative;
    height: 40px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: rgba(74, 74, 74, 0.8);
    box-shadow: 0px 0px 18px -2px #d9d9d9;
    display: flex;
    align-items: center;
    padding: 0 15px 0 30px; /* Отступ слева для компенсации стрелки */
    margin-right: 5px;
    transition: all 0.2s ease-in-out;
}

/* 3. Ссылка внутри блока должна занимать всё пространство */
.mod-breadcrumbs__item a {
    display: block;
    color: rgba(74, 74, 74, 0.8);
    text-decoration: none;
    z-index: 5;
    position: relative;
}

/* 4. Особенности ПЕРВОГО блока (будь то текст "Вы здесь", иконка или Главная) */
.mod-breadcrumbs > li:first-child {
    padding-left: 20px !important; /* У первого блока нет соседа слева, отступ меньше */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* 5. Стрелка (::after) - добавляем всем, кроме самого последнего элемента */
.mod-breadcrumbs > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 6px;
    width: 0;
    height: 0;
    border: 14px solid #ffffff;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
    margin-left: -14px; /* Наложение на следующий блок */
    z-index: 10; /* Стрелка всегда поверх следующего блока */
    box-shadow: 5px -5px 10px -4px #d9d9d9;
    transition: all 0.2s ease-in-out;
}

/* 6. Решение проблемы с наложением текста (Padding-left) */
/* Чтобы текст не прятался под стрелку предыдущего блока */
.mod-breadcrumbs > li:not(:first-child) {
    padding-left: 35px !important; 
}

/* 7. Управление слоями (Z-index) */
/* Первый элемент самый высокий, последний - самый низкий */
.mod-breadcrumbs > li:nth-child(1) { z-index: 20; }
.mod-breadcrumbs > li:nth-child(2) { z-index: 19; }
.mod-breadcrumbs > li:nth-child(3) { z-index: 18; }
.mod-breadcrumbs > li:nth-child(4) { z-index: 17; }
.mod-breadcrumbs > li:nth-child(5) { z-index: 16; }

/* 8. Оформление последнего (активного) элемента */
.mod-breadcrumbs > li:last-child {
    background-color: rgba(23, 165, 98, 0.06);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding-right: 20px;
}

/* 9. Стили для иконки (если текст "Вы здесь" отключен) */
.mod-breadcrumbs__divider .icon-location {
    color: #17a562;
    font-size: 16px;
}

/* 10. Эффекты при наведении */
.mod-breadcrumbs__item:not(:last-child):hover {
    background-color: #f9f9f9;
}
.mod-breadcrumbs__item:not(:last-child):hover::after {
    border-top-color: #f9f9f9;
    border-right-color: #f9f9f9;
}
.mod-breadcrumbs__item:hover a {
    color: #17a562; /* Цвет ссылки при наведении */
}
@media (max-width: 768px) {
    /* 1. Разрешаем внутреннюю прокрутку контейнера */
    .mod-breadcrumbs.breadcrumb {
        overflow-x: auto !important; /* Включаем горизонтальный скролл */
        overflow-y: hidden;
        flex-wrap: nowrap !important; /* Запрещаем перенос */
        -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iPhone */
        padding-bottom: 10px !important; /* Место для полосы прокрутки, если она появится */
        scrollbar-width: none; /* Скрываем полосу в Firefox */
    }

    /* Скрываем полосу прокрутки в Chrome/Safari для красоты */
    .mod-breadcrumbs.breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* 2. Запрещаем элементам сжиматься, чтобы текст не превращался в кашу */
    .mod-breadcrumbs > li {
        flex-shrink: 0 !important; 
    }
}

/* Добавляем текст перед иконкой бургера */
#offcanvas-toggler::before {
    content: 'Все категории блога \27A4'; /* \27A4 - это стрелка → */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #17a562; /* Зеленый из ваших крошек */
    margin-right: 12px;
    white-space: nowrap;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Анимация пульсации для привлечения внимания */
@keyframes hintPulse {
    0% { opacity: 1; transform: translateX(0); }
    50% { opacity: 0.7; transform: translateX(-3px); }
    100% { opacity: 1; transform: translateX(0); }
}

#offcanvas-toggler:hover::before {
    color: #138a52;
    animation: hintPulse 1s infinite;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 991px) {
    #offcanvas-toggler::before {
        font-size: 11px;
        margin-right: 8px;
    }
}

@media (max-width: 480px) {
    #offcanvas-toggler::before {
        content: 'Категории \2192'; /* Сокращаем текст на малых экранах */
    }
}

/* Центрируем содержимое кнопки, если оно сместилось */
#offcanvas-toggler {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
}