/* Riizz Roots Breadcrumb Mobile Fix
   Fixes clipped breadcrumbs on narrow screens with long category/product names.
   Load after older breadcrumb files. */

#navBreadCrumb,
nav#navBreadCrumb.rr-breadcrumb-shell {
    box-sizing: border-box !important;
    max-width: calc(100% - 24px) !important;
    overflow: visible !important;
}

#navBreadCrumb > .rr-breadcrumb-wrap,
#navBreadCrumb > .rr-breadcrumb-card,
#navBreadCrumb > .rr-breadcrumb,
#navBreadCrumb > .breadcrumb,
#navBreadCrumb > ol.breadcrumb,
#navBreadCrumb > ul.breadcrumb {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: visible !important;
}

@media (max-width: 575px) {
    #navBreadCrumb,
    nav#navBreadCrumb.rr-breadcrumb-shell {
        width: calc(100% - 18px) !important;
        max-width: calc(100% - 18px) !important;
        margin: 10px auto 16px auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #navBreadCrumb > .rr-breadcrumb-wrap,
    #navBreadCrumb > .rr-breadcrumb-card,
    #navBreadCrumb > .rr-breadcrumb,
    #navBreadCrumb > .breadcrumb,
    #navBreadCrumb > ol.breadcrumb,
    #navBreadCrumb > ul.breadcrumb {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 10px 12px !important;
        border-radius: 15px !important;
        overflow: visible !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
    }

    #navBreadCrumb a,
    #navBreadCrumb span,
    #navBreadCrumb li,
    #navBreadCrumb .breadcrumb-item {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
        font-size: 12.25px !important;
        line-height: 1.35 !important;
    }

    #navBreadCrumb .rr-breadcrumb-divider,
    #navBreadCrumb .rr-breadcrumb-separator,
    #navBreadCrumb .breadcrumb-separator,
    #navBreadCrumb .separator,
    #navBreadCrumb .breadcrumb-item + .breadcrumb-item::before {
        flex: 0 0 auto !important;
        margin: 0 3px !important;
        white-space: nowrap !important;
    }

    #navBreadCrumb .rr-breadcrumb-wrap > span:last-child,
    #navBreadCrumb .rr-breadcrumb-card > span:last-child,
    #navBreadCrumb .breadcrumb-item.active,
    #navBreadCrumb li:last-child,
    #navBreadCrumb span:last-child {
        flex: 1 1 auto !important;
        min-width: 120px !important;
        max-width: 100% !important;
    }
}