/* Breadcrumb Separator Fix CSS */

/* Make the breadcrumb separator (greater than symbol) smaller */
.breadcrumb-item + .breadcrumb-item::before {
    font-size: 6px !important;
    content: ">" !important;
    color: #999 !important;
    position: relative !important;
    top: -3px !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    transform: scale(0.8) !important;
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
    .breadcrumb-item + .breadcrumb-item::before {
        font-size: 5px !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
        top: -3px !important;
        transform: scale(0.7) !important;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    .breadcrumb-item + .breadcrumb-item::before {
        font-size: 4px !important;
        padding-right: 2px !important;
        padding-left: 2px !important;
        top: -3px !important;
        transform: scale(0.6) !important;
    }
}

/* Specific fix for the FRUITS & VEGETABLES breadcrumb */
.category-header-bar .breadcrumb-item + .breadcrumb-item::before {
    font-size: 4px !important;
    transform: scale(0.5) !important;
    top: -4px !important;
    color: #aaa !important;
}