/* 
 * Ottmegastore.in - Breadcrumbs Navigation Styles
 * Author: Ravi Shandilya
 * Version: 1.0
 * Updated: May 28, 2025
 */

.breadcrumbs {
    padding: 15px 0;
    background-color: var(--light-bg-2);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.breadcrumbs-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 0 20px;
}

.breadcrumbs ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.breadcrumbs li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.breadcrumbs li + li:before {
    content: "/";
    margin: 0 8px;
    color: var(--text-light);
}

.breadcrumbs a {
    color: var(--text-color, #333);
    text-decoration: none;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.breadcrumbs a:hover {
    color: var(--primary-color, #4f46e5);
    text-decoration: underline;
}

.breadcrumbs .active {
    color: var(--primary-color, #4f46e5);
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .breadcrumbs {
        padding: 10px 0;
        margin-bottom: 20px;
    }
    
    .breadcrumbs ol {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .breadcrumbs-container {
        padding: 0 15px;
    }
    
    .breadcrumbs li + li:before {
        margin: 0 5px;
    }
}