/* ============================================================
 * breadcrumbs.css — общие стили хлебных крошек в hero
 * Работает на всех страницах (главная, /styleguide/, внутренние).
 * Разметка: .p2-header-hero__content .breadcrumbs
 * ============================================================ */

/* --- Кнопки-крошки: чёрный фон, белые буквы, скошенные углы --- */
.p2-header-hero__content .breadcrumbs__link,
body.sg-page .p2-header-hero__content .breadcrumbs__link {
    display: inline-block;
    color: #fff !important;
    font-size: 16px;
    line-height: 1.2;
    padding: 10px 22px;
    background: #000 !important;
    text-decoration: none;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    transition: background-color .25s ease, color .25s ease;
}

/* --- Ховер: жёлтый фон, чёрные буквы --- */
.p2-header-hero__content .breadcrumbs__link:hover,
.p2-header-hero__content .breadcrumbs__link:focus-visible,
body.sg-page .p2-header-hero__content .breadcrumbs__link:hover,
body.sg-page .p2-header-hero__content .breadcrumbs__link:focus-visible {
    color: #000 !important;
    background: #fed500 !important;
}

/* --- Текущая (последняя) крошка: жёлтый фон, чёрные буквы --- */
.p2-header-hero__content .breadcrumbs__item[aria-current="page"],
body.sg-page .p2-header-hero__content .breadcrumbs__item[aria-current="page"] {
    display: inline-block;
    color: #000 !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 22px;
    background: #fed500 !important;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}