/* Cart Dropdown Positioning Fix */

/* Desktop Cart Dropdown */
#cartDropdown {
    position: fixed !important;
    top: 120px !important; /* Account for header height */
    right: 20px !important;
    width: 400px !important;
    max-width: 400px !important;
    z-index: 10000 !important;
}

/* Mobile Cart Dropdown */
#cartDropdownMobile {
    position: fixed !important;
    top: 115px !important; /* Account for mobile header height */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #cartDropdown {
        display: none !important;
    }
    
    #cartDropdownMobile {
        top: 96px !important; /* Mobile header height from header.css */
    }
}

@media (max-width: 480px) {
    #cartDropdown {
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        right: 20px !important;
    }
    
    #cartDropdownMobile {
        top: 92px !important; /* Small mobile header height from header.css */
    }
}

/* For very small screens, ensure cart dropdown doesn't overflow */
@media (max-width: 420px) {
    #cartDropdown {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        right: 10px !important;
    }
}

/* Ensure cart dropdown doesn't interfere with page content */
.products-page-wrapper,
.main-content,
body {
    position: relative;
    z-index: 1;
}

/* Ensure header stays above everything */
.main-header,
header {
    z-index: 1000 !important;
}

/* Cart dropdown should be above content but below modals */
#cartDropdown,
#cartDropdownMobile {
    z-index: 9999 !important;
}