@media (min-width: 1200px) {
        .ml-xl-5, .mx-xl-5 {
            margin-left: 17rem  !important;
        }
    }

    @media (min-width: 768px) {
        .h-md-50px, .size-md-50px {
            height: 113px;
        }
    }

    /* Mobile logo sizing */
    .h-50px {
        height: 50px !important;
    }

    .h-80px {
        height: 80px !important;
    }

    @media (min-width: 768px) {
        .h-md-60px {
            height: 60px !important;
        }
        
        .h-md-90px {
            height: 90px !important;
        }
    }

    /* Center logo-bar-area content vertically */
    .logo-bar-area {
        display: flex !important;
        align-items: center !important;
    }

    @media (min-width: 768px) {
        .logo-bar-area {
            min-height: 113px !important;
            
        }
    }

    /* Fix user dropdown menu positioning - reduce gap */
    .hover-user-top-menu {
        margin-top: -3rem !important;
        top: 100% !important;
        padding-top: 0 !important;
        z-index: 10000 !important;
        position: absolute !important;
    }

    /* Ensure parent container is positioned relative for proper dropdown positioning */
    .nav-user-info {
        position: relative !important;
    }

    .hover-user-top-menu .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .hover-user-top-menu .aiz-user-top-menu {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Position dropdown closer to user info */
    header .hover-user-top-menu {
        margin-top: -3rem !important;
        z-index: 10000 !important;
    }

    /* Ensure dropdown appears above all content when active */
    .hover-user-top-menu.active {
        z-index: 10000 !important;
    }

    /* Proper solution: Group icons container and preserve search bar width */
    @media (min-width: 992px) {
        /* Icons group container - flex item that doesn't grow, positioned after search */
        .logo-bar-area .nav-icons-group {
            display: flex !important;
            align-items: center !important;
            flex-shrink: 0 !important; /* Don't shrink */
            flex-grow: 0 !important; /* Don't grow */
            margin-left: 12px !important;
            gap: 12px !important; /* Space between icons */
        }
        
        /* Individual icons within the group - remove extra margins */
        .nav-icons-group > div,
        .nav-icons-group > ul {
            margin: 0 !important;
        }
        
        /* Notifications list item - remove extra padding */
        .nav-icons-group ul.list-inline li {
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* User profile - spacing from icons group */
        .nav-user-profile {
            flex-shrink: 0 !important; /* Don't shrink */
            flex-grow: 0 !important; /* Don't grow */
            margin-left: 20px !important;
        }
        
        /* CRITICAL: Ensure search bar maintains flex-grow-1 to preserve width */
        .logo-bar-area > .front-header-search {
            flex-grow: 1 !important;
            flex-shrink: 1 !important;
            flex-basis: auto !important;
            min-width: 0 !important; /* Prevents flex item from overflowing */
            max-width: none !important; /* Allow it to grow */
        }
        
        /* Ensure logo-bar-area uses flexbox properly */
        .logo-bar-area {
            display: flex !important;
            align-items: center !important;
        }
    }

    /* Fix black lines - hide broken placeholders without affecting working icons */
    /* Only hide empty elements that don't have icon classes */
    i:empty:not([class*="la-"]):not([class*="fa-"]):not([class*="las"]):not([class*="lab"]):not([class*="lar"]):not([class*="icon"]) {
        display: none !important;
    }

    /* Ensure icon fonts load properly - don't hide working icons */
    i[class*="la-"]::before,
    i[class*="las"]::before,
    i[class*="lab"]::before,
    i[class*="lar"]::before,
    i[class*="fa-"]::before {
        font-family: 'Line Awesome Free', 'Line Awesome Brands', 'Font Awesome' !important;
        font-weight: 900 !important;
        display: inline-block !important;
    }

    /* Hide empty divs/spans that might show as black lines (only if truly empty with no attributes) */
    div:empty:not([class]):not([id]):not([style]),
    span:empty:not([class]):not([id]):not([style]) {
        display: none !important;
    }

    /* Hide broken image placeholders */
    img[src=""],
    img:not([src]):not([data-src]) {
        display: none !important;
    }

    /* Hide empty SVG elements that might show as black lines */
    svg:empty:not([viewBox]):not([width]):not([height]):not([class]):not([id]) {
        display: none !important;
    }

    /* Featured Products - Active border by default */
    #section_featured_div .carousel-box .aiz-card-box {
        border: 1px solid #d6d4da !important;
        border-radius: 8px !important;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        padding-bottom: 0.5rem !important;
    }

    /* Add small bottom padding to product content area */
    #section_featured_div .carousel-box .aiz-card-box .p-2,
    #section_featured_div .carousel-box .aiz-card-box .p-md-3 {
        padding-bottom: 0.5rem !important;
    }

    /* Increase product name font size */
    #section_featured_div .carousel-box .aiz-card-box h3 {
        font-size: 16px !important;
    }

    @media (min-width: 768px) {
        #section_featured_div .carousel-box .aiz-card-box h3 {
            font-size: 18px !important;
        }
    }


    /* Best Selling Products - Same styling as Featured */
    #section_best_selling .carousel-box .aiz-card-box {
        border: 1px solid #d6d4da !important;
        border-radius: 8px !important;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        padding-bottom: 0.5rem !important;
    }

    #section_best_selling .carousel-box .aiz-card-box .p-2,
    #section_best_selling .carousel-box .aiz-card-box .p-md-3 {
        padding-bottom: 0.5rem !important;
    }

    #section_best_selling .carousel-box .aiz-card-box h3 {
        font-size: 16px !important;
    }

    @media (min-width: 768px) {
        #section_best_selling .carousel-box .aiz-card-box h3 {
            font-size: 18px !important;
        }
    }

    /* New Products - Same styling as Featured */
    #section_newest .carousel-box .aiz-card-box {
        border: 1px solid #d6d4da !important;
        border-radius: 8px !important;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        padding-bottom: 0.5rem !important;
    }

    #section_newest .carousel-box .aiz-card-box .p-2,
    #section_newest .carousel-box .aiz-card-box .p-md-3 {
        padding-bottom: 0.5rem !important;
    }

    #section_newest .carousel-box .aiz-card-box h3 {
        font-size: 16px !important;
    }

    @media (min-width: 768px) {
        #section_newest .carousel-box .aiz-card-box h3 {
            font-size: 18px !important;
        }
    }





    /* Fix profile icon border visibility on login section */
    .nav-user-info .nav-user-img {
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        background-color: transparent !important;
        transition: all 0.3s ease !important;
    }

    .nav-user-info:hover .nav-user-img {
        border: 2px solid #ffffff !important;
        box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3) !important;
    }

    /* Ensure SVG icon is visible in profile circle */
    .nav-user-info .nav-user-img svg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .nav-user-info .nav-user-img svg path {
        fill: #ffffff !important;
        transition: fill 0.3s ease !important;
    }

    .nav-user-info:hover .nav-user-img svg path {
        fill: #ffffff !important;
    }

    /* Fix product images - show full image without cropping */
    #section_featured_div .aiz-card-box .img-fit,
    #section_best_selling .aiz-card-box .img-fit,
    #section_newest .aiz-card-box .img-fit {
        
        object-position: center !important;
    }

    #section_featured_div .aiz-card-box .position-relative,
    #section_best_selling .aiz-card-box .position-relative,
    #section_newest .aiz-card-box .position-relative {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Fix banner images - show full image without cropping */
    .aiz-carousel .carousel-box img.img-fit.h-100 {
       
        object-position: center !important;
    }

    .aiz-carousel .carousel-box > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Remove white background from product details in category menu */
    .product-details-container .aiz-card-box,
    .product-details-container .aiz-card-box.bg-white,
    .product-details-container .aiz-card-box[class*="bg-white"],
    .product-details-container .aiz-card-box * {
        background: transparent !important;
        background-color: transparent !important;
    }

    .product-details-container .aiz-card-box .position-relative {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    
    
    /* Fix modal popup z-index to appear above header and all dropdowns */
    /* Header has z-index: 1035, dropdowns have z-index: 9999, user menu has z-index: 10000 */
    /* So modal needs to be higher than 10000 */
    .modal.website-popup:not(.d-none) {
        z-index: 10050 !important;
    }

    .modal.website-popup .absolute-full {
        z-index: 10049 !important;
    }

    .modal.website-popup .modal-dialog {
        z-index: 10051 !important;
    }

    .modal.website-popup .modal-content {
        z-index: 10052 !important;
    }

    /* Ensure modal backdrop is above header */
    .modal-backdrop {
        z-index: 10048 !important;
    }

    /* Other modals should also be above header */
    .modal.fade:not(.d-none),
    .modal.show {
        z-index: 10050 !important;
    }

    #addToCart.modal {
        z-index: 10050 !important;
    }