/* ============================================================
   breadcrumb-v2.css — крошки-бейджи
   Белый текст на акцентном бейдже, основной цвет — на plain
   ============================================================ */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 24px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 12px;
    line-height: 1;
}

.breadcrumb .bc-sep {
    color: var(--border-strong);
    font-size: 14px;
    line-height: 1;
    user-select: none;
    margin: 0 2px;
}

/* --- Обычные (plain) бейджи и ссылки-бейджи --- */
.breadcrumb .badge,
.breadcrumb a.badge {
    color: var(--text);
    text-decoration: none;
    transition: opacity .15s, border-color .15s;
}
.breadcrumb a.badge:hover {
    text-decoration: none;
    opacity: .85;
    border-color: var(--accent-30);
}

/* --- Акцентный бейдж («Главная») — всегда белый текст, 
      селектор с тем же весом что a.badge или выше --- */
.breadcrumb a.badge.badge-accent,
.breadcrumb span.badge.badge-accent {
    color: #fff;
}

/* --- Остальные бейджи внутри крошек — на случай, если появятся 
      и другие акцентные элементы --- */
.breadcrumb a.badge.badge-plain:hover {
    color: var(--accent);
    border-color: var(--accent-30);
}

@media (max-width: 640px) {
    .breadcrumb {
        gap: 5px;
        margin-bottom: 16px;
    }
    .breadcrumb .bc-sep {
        font-size: 12px;
        margin: 0 1px;
    }
}