/* Quick View Image Display Fixes */

/* Ensure proper image container */
.quick-view-image-section {
    position: relative !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    min-height: 350px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    overflow: hidden !important;
}

/* Professional image display */
.quick-view-product-image {
    width: auto !important;
    max-width: 100% !important;
    max-height: 320px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px !important;
    background: white !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Loading state */
.quick-view-product-image:not([src]),
.quick-view-product-image[src=""] {
    background: linear-gradient(90deg, 
        #f0f0f0 25%, 
        #e0e0e0 50%, 
        #f0f0f0 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: quickViewShimmer 1.5s infinite !important;
    width: 100% !important;
    height: 320px !important;
}

/* Error state styling */
.quick-view-product-image.image-error {
    opacity: 0.8 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 2px dashed #dee2e6 !important;
}

/* Hover effects */
.quick-view-product-image:hover:not(.image-error) {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* Shimmer animation */
@keyframes quickViewShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Remove any conflicting styles */
.quick-view-modal .quick-view-product-image {
    border: none !important;
    outline: none !important;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .quick-view-image-section {
        min-height: 280px !important;
        padding: 10px !important;
    }
    
    .quick-view-product-image {
        max-height: 260px !important;
    }
}