/*
 * Хлібні крихти (Views/Shared/_Breadcrumbs.cshtml).
 * Поки що абсолютно позиціоновані під шапкою — відступ згори повторює висоту шапки на кожній ширині.
 */

/* Завжди один рядок: довга остання ланка (назва товару, пошуковий запит) обрізається "…",
   щоб крихти не наїжджали на контент під ними */
.breadcrumbs {
    position: absolute;
    z-index: 9;
    top: 118px;
    right: 30px;
    left: 30px;
    color: #91a3b5;
    font-family: Roboto, sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.7;
    text-align: left;
}

.breadcrumbs__list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.breadcrumbs__item {
    display: inline;
}

/* Пробіли навколо "/" дають переноси рядків між і всередині <li> у розмітці */
.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    margin: 0 7px;
}

.breadcrumbs__link,
.breadcrumbs__link:hover {
    color: inherit;
    text-decoration: none;
}

@media (max-width: 1750px) {
    .breadcrumbs {
        top: 84.25px;
    }
}

@media (max-width: 1610px) {
    .breadcrumbs {
        top: 76px;
    }
}

@media (max-width: 1450px) {
    .breadcrumbs {
        top: 80.11px;
        font-size: 18.4px;
    }
}

@media (max-width: 1370px) {
    .breadcrumbs {
        top: 75.32px;
        font-size: 16.1px;
    }
}

@media (max-width: 1200px) {
    .breadcrumbs {
        top: 62.32px;
    }
}

@media (max-width: 850px) {
    .breadcrumbs {
        top: 59.07px;
    }
}

@media (max-width: 730px) {
    .breadcrumbs {
        font-size: 15px;
    }
}

@media (max-width: 700px) {
    .breadcrumbs {
        top: 53.82px;
        right: 25px;
        left: 25px;
    }
}

@media (max-width: 500px) {
    .breadcrumbs {
        right: 15px;
        left: 15px;
        font-size: 14px;
    }
}

@media (max-width: 350px) {
    .breadcrumbs {
        font-size: 13px;
    }
}