/* ========================================
   MOBILE TOUCH OPTIMIZATION
   Better touch experience for product images
   ======================================== */

/* Prevent text selection while swiping */
.product-image-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth transitions for image sliding */
.product-images {
    transition: transform 0.3s ease;
}

/* Remove transition during touch drag for immediate feedback */
.product-images.dragging {
    transition: none;
}

/* Make touch targets larger on mobile */
@media (max-width: 768px) {
    /* Hide arrow buttons on mobile (swipe instead) */
    .product-nav {
        display: none;
    }
    
    /* Make entire image container swipeable */
    .product-image-container {
        cursor: grab;
        touch-action: pan-y; /* Allow vertical scrolling, horizontal for swipe */
    }
    
    .product-image-container:active {
        cursor: grabbing;
    }
    
    /* Larger, more visible indicators on mobile */
    .product-indicators {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
    
    .indicator.active {
        width: 24px;
    }
    
    /* Add swipe hint animation (optional) */
    .product-card:first-child .product-image-container::after {
        content: '← Swipe →';
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: #FFC107;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        animation: swipe-hint 3s ease-in-out;
        pointer-events: none;
        opacity: 0;
    }
    
    @keyframes swipe-hint {
        0%, 100% {
            opacity: 0;
        }
        10%, 90% {
            opacity: 1;
        }
    }
}

/* Tablet - Show both arrows and allow swipe */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-image-container {
        touch-action: pan-y;
    }
    
    /* Keep arrows but make them transparent until hover */
    .product-nav {
        opacity: 0.3;
        transition: opacity 0.3s;
    }
    
    .product-card:hover .product-nav {
        opacity: 1;
    }
}

/* Prevent pull-to-refresh on product cards */
.product-card {
    overscroll-behavior: contain;
}

/* Add visual feedback on touch */
.product-image-container:active .product-image {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Smooth indicator transitions */
.indicator {
    transition: all 0.3s ease;
}

/* Optional: Add drag cursor when hovering (desktop with touch) */
@media (hover: hover) and (pointer: fine) {
    .product-image-container:hover {
        cursor: grab;
    }
    
    .product-image-container:active {
        cursor: grabbing;
    }
}