nav[data-role='breadcrumbs'] {display:flex;width:100%;text-align:left;gap:1rem;padding:1rem;font-size:0.9rem;border-bottom:1px dotted var(--baseDarkGray);border-top:1px dotted var(--baseDarkGray);justify-content:center;}nav[data-role='breadcrumbs'] ol,
    nav[data-role='breadcrumbs'] ol > li {display:contents;}nav[data-role='breadcrumbs'] ol > li * {white-space:nowrap;}nav[data-role='breadcrumbs'] a {text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:0.2em;text-decoration-color:var(--baseDark);}nav[data-role='breadcrumbs'] a:hover {text-decoration-style:solid;text-decoration-thickness:2px;color:var(--linkHoverColor);}[data-theme='dark'] nav[data-role='breadcrumbs'] a:hover {color:var(--linkHoverColor);}nav[data-role='breadcrumbs'] .current {font-weight:bold;}nav[data-role='breadcrumbs'] .current:empty,
    nav[data-role='breadcrumbs'] .separator:has(+ .current:empty) {display:none;}nav[data-role='breadcrumbs'] .separator {color:var(--baseDark);}[data-theme='dark'] nav[data-role='breadcrumbs'] {background-color:var(--baseDark);}[data-theme='dark'] nav[data-role='breadcrumbs'] .separator {color:var(--baseLight);}

    @media screen and (max-width: 768px) {nav[data-role='breadcrumbs'] {justify-content:flex-start;padding:0.75rem 1rem;overflow-x:auto;flex-wrap:nowrap;}
    }

    /* дополнения сайта */
    /* На узком экране крошки переносятся, а не уезжают за край. */
    @media screen and (max-width: 768px) {nav[data-role='breadcrumbs'] {flex-wrap:wrap;row-gap:0.25em;padding-inline:1rem;box-sizing:border-box;justify-content:flex-start;}nav[data-role='breadcrumbs'] ol > li * {white-space:normal;}
    }