.breadcrumbs {

    /*
     * --header-offset is calculated live in assets/js/main.js from
     * the header's actual rendered height (top-bar + site-header),
     * so this stays correct across breakpoints, custom logo sizes,
     * and the "Header Height" customizer setting - unlike a fixed
     * px value which only matched one specific header height and
     * caused breadcrumbs to render underneath the navbar.
     * The 100px fallback only applies for the instant before JS runs.
     */
    margin-top: var(--header-offset, 100px);

    position: relative;
    z-index: 1;

    padding: 7px 0;
    font-size: 14px;
    background: #e9e7e7;
}

.breadcrumbs a {
    text-decoration: none;
    color: #2bb673;
}

.breadcrumbs span {
    margin: 0 8px;
    color: #999;
}

.breadcrumbs {
    color: #555;
}