/* The responsive part */
.breadcrumb {
    font-size: 12px;
    padding: 0;
    margin-bottom: 0;
    color: #999999;
    border-radius: 0;
    background-color: #fff;
}

.breadcrumbs_top {
    margin: 10px 0;
}

.breadcrumb a {
    color: #777;
    font-weight: bold;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #333;
}

.breadcrumb > li + li::before {
    padding: 0 5px;
    color: #ccc;
    content: "\00bb "; /* Символ » */
}

/* Базові налаштування для пунктів меню */
.breadcrumb > li {
    display: inline-block; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle; 
}

/* Ховаємо всі елементи за замовчуванням */
.breadcrumb > li:nth-child(n+1) {
    display: none;
}

.invisible { 
    display: none; 
}

/* === For phones === */
@media (max-width: 767px) {
    .breadcrumb > li:nth-last-child(-n+2) {
        display: inline-block;
    }
    .breadcrumb > li {
        max-width: 80px; 
    }
}

/* === For tablets === */
@media (min-width: 768px) and (max-width: 991px) {
    .breadcrumb > li:nth-last-child(-n+4) {
        display: inline-block;
    }
    .breadcrumb > li {
        max-width: 120px; 
    }
}

/* === For desktops === */
@media (min-width: 992px) {
    .breadcrumb > li:nth-last-child(-n+6) {
        display: inline-block;
    }
    .breadcrumb > li {
        max-width: 200px; 
    }
}

.breadcrumb > li.breadcrumb-final {
    display: inline-block !important;
    max-width: 100% !important; 
}

.breadcrumb > li.breadcrumb-final > span,
.breadcrumb > li.breadcrumb-final > a {
    color: #333333;              /* Темний колір тексту замість білого */
    background-color: transparent; /* Без ніякого фону */
    font-weight: bold;
    padding: 0;
}

/* Налаштування розділювача (стрілочки) перед фінальним елементом */
.breadcrumb > li + li.breadcrumb-final::before {
    content: "\00bb ";
    padding: 0 5px;
    color: #ccc;
}