/**
 * STY-02 — one global breadcrumb presentation.
 *
 * This file is deliberately loaded after every canonical stylesheet. Legacy
 * templates keep their contextual colour and outer placement, while the
 * typography, list rhythm and separator are owned here.
 */

body.gt-breadcrumb-system-v1 {
    --gt-breadcrumb-size: 11px;
    --gt-breadcrumb-weight: 400;
    --gt-breadcrumb-line: 1.3;
    --gt-breadcrumb-track: .02em;
    --gt-breadcrumb-separator-gap: 7px;
}

body.gt-breadcrumb-system-v1 :is(
    [aria-label="Хлебные крошки"],
    [aria-label="Навигационная цепочка"],
    .breadcrumbs,
    .wc-breadcrumbs,
    [class*="-breadcrumbs"]
) {
    font-family: var(--gt-font-sans, "Nunito Sans", Arial, sans-serif);
    font-size: var(--gt-breadcrumb-size);
    font-weight: var(--gt-breadcrumb-weight);
    line-height: var(--gt-breadcrumb-line);
    letter-spacing: var(--gt-breadcrumb-track);
}

body.gt-breadcrumb-system-v1 :is(
    [aria-label="Хлебные крошки"],
    [aria-label="Навигационная цепочка"],
    .breadcrumbs,
    .wc-breadcrumbs,
    [class*="-breadcrumbs"]
) :is(ol, ul, li, a, span) {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

body.gt-breadcrumb-system-v1 :is(
    [aria-label="Хлебные крошки"],
    [aria-label="Навигационная цепочка"],
    .breadcrumbs,
    .wc-breadcrumbs,
    [class*="-breadcrumbs"]
) :is(ol, ul) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.gt-breadcrumb-system-v1 :is(
    [aria-label="Хлебные крошки"],
    [aria-label="Навигационная цепочка"],
    .breadcrumbs,
    .wc-breadcrumbs,
    [class*="-breadcrumbs"]
) li {
    display: flex;
    align-items: center;
    gap: 0;
}

body.gt-breadcrumb-system-v1 :is(
    [aria-label="Хлебные крошки"],
    [aria-label="Навигационная цепочка"],
    .breadcrumbs,
    .wc-breadcrumbs,
    [class*="-breadcrumbs"]
) li::before,
body.gt-breadcrumb-system-v1 :is(
    [aria-label="Хлебные крошки"],
    [aria-label="Навигационная цепочка"],
    .breadcrumbs,
    .wc-breadcrumbs,
    [class*="-breadcrumbs"]
) li::after {
    content: none !important;
}

body.gt-breadcrumb-system-v1 .breadcrumbs__separator {
    display: inline-block;
    margin: 0 var(--gt-breadcrumb-separator-gap) !important;
    color: currentColor !important;
    opacity: 1;
}

body.gt-breadcrumb-system-v1 :is(
    [aria-label="Хлебные крошки"],
    [aria-label="Навигационная цепочка"],
    .breadcrumbs,
    .wc-breadcrumbs,
    [class*="-breadcrumbs"]
) a {
    border-bottom: 0;
    text-decoration: none;
}

body.gt-breadcrumb-system-v1 :is(
    [aria-label="Хлебные крошки"],
    [aria-label="Навигационная цепочка"],
    .breadcrumbs,
    .wc-breadcrumbs,
    [class*="-breadcrumbs"]
) a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* STY-02 standalone bands share one left-aligned rhythm. */
body.gt-breadcrumb-system-v1 .gt-breadcrumb-band .container,
body.gt-breadcrumb-system-v1 .gt-breadcrumb-band .breadcrumbs,
body.gt-breadcrumb-system-v1 .gt-breadcrumb-band :is(ol, ul),
body.gt-breadcrumb-system-v1 .gt-hero__breadcrumbs-inline,
body.gt-breadcrumb-system-v1 .gt-hero__breadcrumbs-inline :is(ol, ul) {
    justify-content: flex-start;
    text-align: left;
}

/* Prices use breadcrumbs inside a light hero card. Never inherit the cream
 * colour of the generic dark-page breadcrumb component. */
body.gt-breadcrumb-system-v1 .canonical-page-prices .prices-hero .gt-hero__breadcrumbs-inline,
body.gt-breadcrumb-system-v1 .canonical-page-prices .prices-hero .gt-hero__breadcrumbs-inline :is(ol, li, a, span) {
    color: #536257;
}

body.gt-breadcrumb-system-v1 .canonical-page-prices .prices-hero .gt-hero__breadcrumbs-inline a {
    color: #284e37;
}

/* Canonical dark bands use high-contrast cream after their page styles load. */
body.gt-breadcrumb-system-v1 :is(
    .abon-breadcrumbs,
    .deposit-breadcrumbs,
    .cert-breadcrumbs,
    .product-page .breadcrumbs
),
body.gt-breadcrumb-system-v1 :is(
    .abon-breadcrumbs,
    .deposit-breadcrumbs,
    .cert-breadcrumbs,
    .product-page .breadcrumbs
) :is(ol, li, a, span) {
    color: rgba(243, 220, 172, .82);
}

@media (max-width: 820px) {
    body.gt-breadcrumb-system-v1 {
        --gt-breadcrumb-size: 10px;
        --gt-breadcrumb-separator-gap: 6px;
    }
}