/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/components/commerce-breadcrumbs.css?{ versionKey }"/> */
/* 
    This component is used on the "Category", "Product", "Search" pages

    Setting in 'Experience Builder':

    1. TEXT STYLES:
        1.1. Text Size:        Small **HAS NO EFFECT**
        1.2. Link Color:       --com-c-breadcrumb-link-color
        1.3. Link Hover Color: --com-c-breadcrumb-link-hover-color
        1.4. Text Color:       --com-c-breadcrumb-text-color

    2. DIVIDER STYLES
        2.1. Divider:          --com-c-breadcrumb-divider
        2.2. Color:            --com-c-breadcrumb-divider-color

*/

commerce-breadcrumbs nav.commerce-breadcrumb {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

commerce-breadcrumbs nav.commerce-breadcrumb ol li,
commerce-breadcrumbs nav.commerce-breadcrumb ol li a,
commerce-breadcrumbs nav.commerce-breadcrumb ol li a p,
commerce-breadcrumbs nav.commerce-breadcrumb ol li a p::before {
    font-size: 0.875rem !important;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none !important;
    transition: color 0.1s !important;
}

commerce-breadcrumbs nav.commerce-breadcrumb ol li + li,
commerce-breadcrumbs nav.commerce-breadcrumb ol li p {
    padding-left: 0 !important;
    margin-left: 0.75rem !important;
}