/* ============================================================
   UNIVERSAL BREADCRUMBS
   Полностью изолированные стили хлебных крошек
   ============================================================ */

.cs-universal-breadcrumbs {
    width: 100% !important;
    margin: 0 0 35px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Главный контейнер */
.cs-universal-breadcrumbs .cs-universal-breadcrumbs__inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif !important;

    box-sizing: border-box !important;
}


/* ============================================================
   ОТДЕЛЬНЫЙ ЭЛЕМЕНТ КРОШЕК
   ============================================================ */

.cs-universal-breadcrumbs .cs-universal-breadcrumbs__item {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;

    padding: 6px 14px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    color: #475569 !important;
    text-decoration: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;

    transition:
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out,
        transform 0.2s ease-in-out !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01) !important;
}


/* ============================================================
   HOVER
   ============================================================ */

.cs-universal-breadcrumbs
.cs-universal-breadcrumbs__item:hover {
    background: #ffffff !important;
    border-color: #e67e22 !important;
    color: #e67e22 !important;

    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.05) !important;

    transform: translateY(-1px) !important;
}


/* ============================================================
   ИКОНКА
   ============================================================ */

.cs-universal-breadcrumbs .cs-universal-breadcrumbs__icon {
    color: #94a3b8 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;

    transition: color 0.2s ease-in-out !important;
}

.cs-universal-breadcrumbs
.cs-universal-breadcrumbs__item:hover
.cs-universal-breadcrumbs__icon {
    color: #e67e22 !important;
}


/* ============================================================
   РАЗДЕЛИТЕЛЬ
   ============================================================ */

.cs-universal-breadcrumbs .cs-universal-breadcrumbs__divider {
    color: #94a3b8 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 2px !important;

    user-select: none !important;

    flex-shrink: 0 !important;

    box-sizing: border-box !important;
}


/* SVG разделителя */
.cs-universal-breadcrumbs
.cs-universal-breadcrumbs__divider svg {
    display: block !important;
    flex-shrink: 0 !important;
}


/* ============================================================
   ТЕКУЩАЯ СТРАНИЦА
   ============================================================ */

.cs-universal-breadcrumbs
.cs-universal-breadcrumbs__item--current {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;

    color: #0f172a !important;

    font-weight: 700 !important;

    pointer-events: none !important;

    cursor: default !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01) !important;
}


/* На текущую страницу hover НЕ должен менять оформление */
.cs-universal-breadcrumbs
.cs-universal-breadcrumbs__item--current:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01) !important;

    transform: none !important;
}


/* ============================================================
   MOBILE
   Один ряд + горизонтальный скролл
   ============================================================ */

@media screen and (max-width: 768px) {

    .cs-universal-breadcrumbs {
        width: 100% !important;

        margin: 0 0 25px 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    .cs-universal-breadcrumbs
    .cs-universal-breadcrumbs__inner {

        display: flex !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 5px 2px !important;

        gap: 6px !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;

        box-sizing: border-box !important;
    }


    /* Chrome / Safari / Edge / iOS */
    .cs-universal-breadcrumbs
    .cs-universal-breadcrumbs__inner::-webkit-scrollbar {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
    }


    /* Элементы на мобильном */
    .cs-universal-breadcrumbs
    .cs-universal-breadcrumbs__item {

        padding: 6px 10px !important;

        font-size: 12px !important;

        line-height: 1.4 !important;

        border-radius: 6px !important;

        white-space: nowrap !important;

        flex-shrink: 0 !important;
    }


    /* Разделители */
    .cs-universal-breadcrumbs
    .cs-universal-breadcrumbs__divider {

        flex-shrink: 0 !important;

        padding: 0 2px !important;
    }


    .cs-universal-breadcrumbs
    .cs-universal-breadcrumbs__divider svg {

        width: 10px !important;
        height: 10px !important;

        flex-shrink: 0 !important;
    }
}