/* =====================================================
   КРОШКИ КАТАЛОГА — ФИНАЛЬНЫЙ СТИЛЬ
===================================================== */


/* =====================================================
   1. НА СТРАНИЦАХ СПИСКОВ / РАЗДЕЛОВ
   КРОШКИ СКРЫВАЕМ
===================================================== */

.t-catalog__breadcrumbs_position_above_cards {
    display: none !important;
}


/* =====================================================
   2. НА ДЕТАЛЬНОЙ СТРАНИЦЕ ТОВАРА
   КРОШКИ ВОЗВРАЩАЕМ

   Несколько вариантов DOM Tilda:
===================================================== */

.t-catalog__prod-popup__breadcrumbs
.t-catalog__breadcrumbs_position_above_cards,

.js-catalog-product
.t-catalog__breadcrumbs_position_above_cards,

.t-catalog__product-snippet
.t-catalog__breadcrumbs_position_above_cards {

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* На случай если Tilda скрывает саму обёртку крошек */
.js-catalog-product
.t-catalog__prod-popup__breadcrumbs,

.t-catalog__product-snippet
.t-catalog__prod-popup__breadcrumbs {

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* =====================================================
   3. УБИРАЕМ ТЕХНИЧЕСКИЙ ПУНКТ "КАТАЛОГ"
===================================================== */

.js-catalog-product
[data-breadcrumb-role="catalog"],

.t-catalog__product-snippet
[data-breadcrumb-role="catalog"] {

    display: none !important;
}


/* Убираем разделитель после "Каталог" */

.js-catalog-product
[data-breadcrumb-role="catalog"]
+ .t-catalog__breadcrumbs-divider,

.t-catalog__product-snippet
[data-breadcrumb-role="catalog"]
+ .t-catalog__breadcrumbs-divider {

    display: none !important;
}


/* =====================================================
   4. ЦЕНТРИРУЕМ ЦЕПОЧКУ
===================================================== */

.js-catalog-product
.t-catalog__breadcrumbs,

.t-catalog__product-snippet
.t-catalog__breadcrumbs {

    width: 100% !important;

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

    padding-bottom: 60px !important;
}


/* =====================================================
   5. ТЕКСТ ПУНКТОВ
===================================================== */

.js-catalog-product
.t-catalog__breadcrumbs-item,

.t-catalog__product-snippet
.t-catalog__breadcrumbs-item {

    font-weight: 600 !important;
    opacity: 1 !important;
}


/* =====================================================
   6. АКТИВНЫЙ ПУНКТ
===================================================== */

.js-catalog-product
.t-catalog__breadcrumbs-item_active,

.t-catalog__product-snippet
.t-catalog__breadcrumbs-item_active {

    opacity: 1 !important;

    color: #2a6d4a !important;

    font-weight: 400 !important;
}


/* =====================================================
   7. СТРЕЛКИ — КАК В ОСТАЛЬНЫХ КРОШКАХ САЙТА
===================================================== */

.js-catalog-product
.t-catalog__breadcrumbs-divider,

.t-catalog__product-snippet
.t-catalog__breadcrumbs-divider {

    /* Прячем родной символ Tilda */
    font-size: 0 !important;

    margin-left: 12px !important;
    margin-right: 12px !important;

    opacity: 1 !important;
}


/* Рисуем нашу стрелку */

.js-catalog-product
.t-catalog__breadcrumbs-divider::after,

.t-catalog__product-snippet
.t-catalog__breadcrumbs-divider::after {

    content: "→";

    display: inline-block;

    font-size: 16px;
    font-weight: 400;
    line-height: 1;

    color: #2a6d4a;

    opacity: 1;
}


/* =====================================================
   8. МОБИЛЬНАЯ ВЕРСИЯ
===================================================== */

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

    .js-catalog-product
    .t-catalog__breadcrumbs,

    .t-catalog__product-snippet
    .t-catalog__breadcrumbs {

        padding-top: 30px !important;
        padding-bottom: 60px !important;
    }

}

</style>