.optib-breadcrumb-bar {
background: var(--color-bg-light, #f0f0f0);
padding-block: 10px;
margin-bottom: 24px;
color: var(--color-text-muted);
font-size: 13px;
line-height: 1.6;
} .optib-breadcrumb-bar .optib-crumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.optib-breadcrumb-bar .optib-crumbs__item {
display: flex;
align-items: center;
} .optib-breadcrumb-bar .optib-crumbs__item + .optib-crumbs__item::before {
content: ">";
margin: 0 0.5em;
color: var(--color-text-muted);
} .optib-breadcrumb-bar .optib-crumbs__item--home::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 0.4em;
flex: none;
background-color: var(--color-text-muted);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.optib-breadcrumb-bar a {
color: var(--color-text-muted);
text-decoration: none;
}
.optib-breadcrumb-bar a:hover,
.optib-breadcrumb-bar a:focus-visible {
color: var(--color-primary);
text-decoration: underline;
} .optib-breadcrumb-bar .optib-crumbs__current {
color: var(--color-text);
font-weight: 700;
} .optib-breadcrumb-bar .optib-crumbs__yoast,
.optib-breadcrumb-bar .optib-crumbs__yoast p {
margin: 0;
}
.optib-breadcrumb-bar .optib-crumbs__yoast .breadcrumb_last {
color: var(--color-text);
font-weight: 700;
} @media (max-width: 767.98px) {
.optib-breadcrumb-bar {
margin-bottom: 16px;
font-size: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.optib-breadcrumb-bar .optib-crumbs__list,
.optib-breadcrumb-bar .optib-crumbs__yoast {
flex-wrap: nowrap;
white-space: nowrap;
}
}