/* ========================================
   BREADCRUMB ALIGNMENT & SPACING FIX
   ======================================== */

/* Main breadcrumb container */
.breadcrumb-nav {
    background: #f8f9fa !important;
    padding: 15px 0 !important;
    margin: 0 0 30px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    width: 100% !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Match container with hero_area padding (45px) */
.breadcrumb-nav .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 45px !important; /* Match hero_area padding */
}

/* Breadcrumb list */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Breadcrumb items */
.breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #666 !important;
}

/* Separator between items */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›" !important;
    padding: 0 10px !important;
    color: #999 !important;
    font-size: 16px !important;
}

/* Active/current item */
.breadcrumb-item.active {
    color: #333 !important;
    font-weight: 500 !important;
}

/* Links */
.breadcrumb-item a {
    color: #007bff !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.breadcrumb-item a:hover {
    color: #0056b3 !important;
}

/* ========================================
   LAYOUT FIXES
   ======================================== */

/* Ensure main content starts with correct padding */
main {
    padding: 0 !important;
    margin: 0 !important;
}

/* Content sections after breadcrumb */
.breadcrumb-nav + section,
.breadcrumb-nav + .shop_section,
.breadcrumb-nav + .placeorder_section {
    padding-top: 45px !important;
}

/* Override layout_padding when after breadcrumb */
.breadcrumb-nav + .layout_padding {
    padding-top: 45px !important;
}

/* ========================================
   RESPONSIVE PADDING
   ======================================== */

@media (max-width: 991px) {
    .breadcrumb-nav .container {
        padding: 0 25px !important;
    }
}

@media (max-width: 768px) {
    .breadcrumb-nav {
        padding: 12px 0 !important;
        margin-bottom: 20px !important;
    }
    
    .breadcrumb-nav .container {
        padding: 0 15px !important;
    }
    
    .breadcrumb-item {
        font-size: 13px !important;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 8px !important;
    }
}

@media (max-width: 576px) {
    .breadcrumb-nav {
        padding: 10px 0 !important;
    }
    
    .breadcrumb-item {
        font-size: 12px !important;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 6px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   PREVENT STYLE CONFLICTS
   ======================================== */

/* Isolate breadcrumb from other nav styles */
.breadcrumb-nav,
.breadcrumb-nav *,
.breadcrumb,
.breadcrumb * {
    font-family: "Poppins", sans-serif !important;
}

/* Reset any bootstrap breadcrumb styles */
nav.breadcrumb-nav {
    display: block !important;
}

.breadcrumb-nav ol.breadcrumb {
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* ========================================
   VISUAL ENHANCEMENTS
   ======================================== */

/* Subtle hover effect on links */
.breadcrumb-item a {
    position: relative !important;
}

.breadcrumb-item a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background: #0056b3 !important;
    transition: width 0.2s ease !important;
}

.breadcrumb-item a:hover::after {
    width: 100% !important;
}

/* Clear floats */
.breadcrumb-nav::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}