/*
 * Хлебные крошки для страниц, которым не достаются стили каталога.
 *
 * Правила .breadcrumbs живут в critical-catalog-page.css и
 * critical-product-page.css, а лэйаут подключает их только контроллерам
 * catalog и product. Страницам «О нас», «Доставка и оплата», «Гарантии и
 * возврат», «Оптовым покупателям», «Контакты» (контроллер site) нужен
 * этот файл: без него крошки стоят голым списком у края, вплотную к шапке.
 * Правила — те же, что в каталоге; последний пункт (текущая страница без
 * ссылки) виден — font-size у списка нулевой.
 */
.breadcrumbs {
    list-style: none;
    display: inline-block;
    width: 100%;
    max-width: var(--container-width);
    margin: 20px auto 10px;
    padding: 0 var(--container-offset);
    font-size: 0;
}

.breadcrumbs > li {
    display: inline-block;
    margin-bottom: 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumbs a,
.breadcrumbs > li:last-child,
.breadcrumbs > li:not(:last-child)::after {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--color-dark);
}

.breadcrumbs a {
    display: inline-block;
    text-decoration: none;
    transition: color .25s ease;
}

.breadcrumbs > li:not(:last-child)::after {
    content: "/";
    margin: 0 10px;
}

.breadcrumbs > li:last-child {
    pointer-events: none;
    user-select: none;
}

@media (hover: hover) {
    .breadcrumbs a:hover {
        outline: 0;
        color: var(--color-primary);
    }
}

@media (hover: none) {
    .breadcrumbs a:active {
        outline: 0;
        color: var(--color-primary);
    }
}

/*
 * Текстовые страницы меню начинаются блоком с верхним отступом 60px —
 * он рассчитан на страницу без крошек. Под крошками он давал 70px
 * пустоты до заголовка против 25–40px на остальных страницах. Между
 * крошками и <main> стоит JSON-LD, поэтому «~», а не «+».
 */
.breadcrumbs ~ .main > .section:first-child,
.breadcrumbs ~ .main > .text-page:first-child,
.breadcrumbs ~ .main > .contacts:first-child {
    padding-top: 24px;
}