.breadcrumbs {
    background-color: #eaf4f9;
    padding: 8px 10px; /* Умеренные отступы */
    font-size: 14px; /* Возвращаем нормальный размер текста */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    overflow-x: auto; /* Горизонтальный скролл */
    overflow-y: hidden; /* Убираем вертикальный скролл */
    white-space: nowrap;
    list-style: none;
    margin: 0;
    max-height: 32px; /* Чуть увеличиваем высоту */
}

/* Убираем отступы у списка внутри хлебных крошек */
.breadcrumbs ol {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

/* Ссылки */
.breadcrumbs a {
    text-decoration: none;
    color: #0077b6;
    font-weight: normal;
    font-size: 14px; /* Чуть увеличиваем размер */
    transition: color 0.2s ease-in-out;
}

.breadcrumbs a:hover {
    text-decoration: underline;
    color: #005f91;
}

/* Последний элемент (текущая страница) */
.breadcrumbs li:last-child span {
    color: #555;
    font-weight: bold;
}

/* Элементы списка */
.breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

/* Стрелочка-разделитель */
.breadcrumbs li::after {
    content: "›";
    margin: 0 5px;
    color: #999;
    font-weight: normal;
}

/* Убираем стрелочку у последнего элемента */
.breadcrumbs li:last-child::after {
    content: "";
}

/* 📌 Оптимизация для мобильных устройств */
@media (max-width: 600px) {
    .breadcrumbs {
        font-size: 13px; /* Чуть меньше, но не критично */
        max-height: 30px; /* Делаем компактнее */
    }
    .breadcrumbs a {
        font-size: 13px; /* Достаточно крупный размер */
    }
}

/* Стили для скролла (только в WebKit) */
.breadcrumbs::-webkit-scrollbar {
    height: 4px;
}
.breadcrumbs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}