/**
 * Mobile Product Touch Fix - CSS Component
 * Fixes double-tap issue on product images for mobile devices
 * 
 * This CSS disables hover effects on touch devices to prevent
 * the double-tap requirement for product image navigation
 */

/* Touch device detection and mobile-specific fixes */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    
    /* Disable all hover effects on product images */
    .product-item-top:hover .hovered-img,
    .product-item:hover .hovered-img,
    .product-list-style-17 .product-item:hover .hovered-img {
        opacity: 0 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .product-item-top:hover .main-img,
    .product-item:hover .main-img {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Ensure product links are touch-friendly */
    .product-item-photo {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(237, 111, 38, 0.2);
        display: block;
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove any pointer-events that might interfere */
    .product-item-photo img {
        pointer-events: none;
    }
    
    /* Ensure the link itself is clickable */
    .product-item-photo {
        pointer-events: auto;
    }
}

/* Alternative approach for older mobile browsers */
@media (max-width: 767px) {
    /* Mobile-specific hover disabling */
    .mobile-no-hover .product-item-top:hover .hovered-img,
    .mobile-no-hover .product-item:hover .hovered-img {
        opacity: 0 !important;
        transform: translateX(100%) !important;
    }
    
    .mobile-no-hover .product-item-top:hover .main-img,
    .mobile-no-hover .product-item:hover .main-img {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    /* Touch feedback for better UX */
    .mobile-no-hover.touch-active {
        background-color: rgba(237, 111, 38, 0.1);
        border-radius: 8px;
        transform: scale(0.98);
        transition: all 0.1s ease;
    }
    
    /* Improve touch targets */
    .product-item-photo {
        display: block;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(237, 111, 38, 0.2);
        min-height: 44px;
        min-width: 44px;
        position: relative;
    }
    
    /* Prevent image dragging on mobile */
    .product-item-photo img {
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
        pointer-events: none;
    }
    
    /* Ensure link is interactive */
    .product-item-photo {
        pointer-events: auto;
    }
    
    /* Remove any transitions that might cause delays */
    .product-image-photo {
        transition: none !important;
    }
    
    /* Fix for products without hover images */
    .product-item-photo:only-child img,
    .product-item-photo img:only-child {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Tablet-specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    /* On tablets, still allow hover but make touch more responsive */
    .product-item-photo {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(237, 111, 38, 0.1);
    }
}

/* Desktop - preserve original hover behavior */
@media (min-width: 1025px) {
    /* No changes needed - hover effects work fine on desktop */
    .mobile-no-hover {
        /* Remove mobile class on desktop */
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .product-image-photo,
    .touch-active {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .touch-active {
        background-color: rgba(0, 0, 0, 0.1);
        border: 2px solid rgba(237, 111, 38, 0.8);
    }
}