:root {
    --nb-breadcrumb-3-mt: 25px;
    --nb-breadcrumb-3-divider-content: '\e950';
    --nb-breadcrumb-3-padding-x: 50px;
    --nb-breadcrumb-3-gap: 5px;

    --nb-breadcrumb-3-item-title-fs: var(--nb-font-size-12);
    --nb-breadcrumb-3-item-title-fw: var(--nb-font-regular);
    --nb-breadcrumb-3-item-title-lh: 1.3;
    --nb-breadcrumb-3-item-title-color: var(--nb-spec-color);

    --nb-breadcrumb-3-item-number-of-products-fs: var(--nb-breadcrumb-3-item-title-fs);
    --nb-breadcrumb-3-item-number-of-products-fw: var(--nb-breadcrumb-3-item-title-fw);
    --nb-breadcrumb-3-item-number-of-products-lh: var(--nb-breadcrumb-3-item-title-lh);
    --nb-breadcrumb-3-item-number-of-products-color: var(--nb-breadcrumb-3-item-title-color);

    --nb-breadcrumb-3-mobile-back-fs: var(--nb-font-size-16);
    --nb-breadcrumb-3-mobile-back-icon-fs: var(--nb-font-size-18);
    --nb-breadcrumb-3-mobile-back-text-decoration: none;
    --nb-breadcrumb-3-mobile-back-fw: var(--nb-font-regular);
    --nb-breadcrumb-3-mobile-back-lh: 1.2;
    --nb-breadcrumb-3-mobile-back-color: var(--nb-breadcrumb-active-color);
    --nb-breadcrumb-3-mobile-back-gap: 8px;
}

.nb-breadcrumb-3-wrapper {
    width: 100%;
}

.nb-breadcrumb-3 {
    color: var(--nb-breadcrumb-color);
    padding: 0;
    margin: 0 0 10px;
    list-style: none;
}

.nb-breadcrumb-3 .nb-breadcrumb-3-item {
    font-family: var(--nb-breadcrumb-font-family);
    font-size: var(--nb-breadcrumb-font-size);
    font-weight: var(--nb-breadcrumb-font-weight);
    display: inline-block;
    vertical-align: middle;
}

.nb-breadcrumb-3 .nb-breadcrumb-3-item + .nb-breadcrumb-3-item {
    margin-left: var(--nb-breadcrumb-3-gap);
}

.nb-breadcrumb-3 .nb-breadcrumb-3-item a {
    color: var(--nb-breadcrumb-color);
    text-decoration: var(--nb-breadcrumb-text-decoration);
}

.nb-breadcrumb-3 .nb-breadcrumb-3-item a:hover {
    color: var(--nb-breadcrumb-active-color);
}

.nb-breadcrumb-3 .nb-breadcrumb-3-item:last-child,
.nb-breadcrumb-3 .nb-breadcrumb-3-item.active {
    color: var(--nb-breadcrumb-active-color);
}

.nb-breadcrumb-3 .nb-breadcrumb-3-item:last-child:before,
.nb-breadcrumb-3 .nb-breadcrumb-3-item.active:before {
    color: var(--nb-breadcrumb-color);
}

.nb-breadcrumb-3 .nb-breadcrumb-3-item:before {
    content: var(--nb-breadcrumb-3-divider-content);
    font-family: 'nbi-font';
    margin-right: var(--nb-breadcrumb-3-gap);
    display: inline-block;
    vertical-align: middle;
}

.nb-breadcrumb-3 .nb-breadcrumb-3-item:first-child:before {
    display: none;
}

.nb-breadcrumb-3-item .nb-current-title {
    font-size: var(--nb-breadcrumb-3-item-title-fs);
    font-weight: var(--nb-breadcrumb-3-item-title-fw);
    line-height: var(--nb-breadcrumb-3-item-title-lh);
    color: var(--nb-breadcrumb-3-item-title-color);
    display: inline;
}

.nb-breadcrumb-3-item .nb-number-of-products {
    font-size: var(--nb-breadcrumb-3-item-number-of-products-fs);
    font-weight: var(--nb-breadcrumb-3-item-number-of-products-fw);
    line-height: var(--nb-breadcrumb-3-item-number-of-products-lh);
    color: var(--nb-breadcrumb-3-item-number-of-products-color);
    margin-left: 5px;
}

.nb-breadcrumb-3-mobile-back {
    display: none;
}

.nb-breadcrumb-3-mobile-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-breadcrumb-3-mobile-back-gap);
    color: var(--nb-breadcrumb-3-mobile-back-color);
    text-decoration: none;
}

.nb-breadcrumb-3-mobile-back-link:hover {
    color: var(--nb-breadcrumb-3-mobile-back-color);
    text-decoration: none;
}

.nb-breadcrumb-3-mobile-back .nb-icon {
    display: flex;
    font-size: var(--nb-breadcrumb-3-mobile-back-icon-fs);
}

.nb-breadcrumb-3-mobile-back-title {
    font-size: var(--nb-breadcrumb-3-mobile-back-fs);
    font-weight: var(--nb-breadcrumb-3-mobile-back-fw);
    line-height: var(--nb-breadcrumb-3-mobile-back-lh);
    text-decoration: var(--nb-breadcrumb-3-mobile-back-text-decoration);
    color: currentColor;
}

.layout:has(> .block .nb-breadcrumb-3) {
    margin-top: var(--nb-breadcrumb-3-mt) !important;
}

@media screen and (max-width: 768px) {
    :root {
        --nb-breadcrumb-3-padding-x: 10px;
    }
}

@media screen and (max-width: 576px) {
    .nb-breadcrumb-3 {
        display: none;
    }

    .nb-breadcrumb-3-mobile-back {
        display: block;
    }
}