/* VisionAQ Prints - All Products Section V2 - Bug Fix Version */
/* Fixed: Product cards disappearing when touched on mobile */
/* All Products Section Homepage */

.products-section {
    padding: 0 var(--spacing-md) var(--spacing-xl);
    background: var(--white);
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible; /* Allow shadows to show */
    /* FIX: Lock section positioning */
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    transform: translate3d(0, 0, 0);
}

.products-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    justify-items: center;
    align-items: start;
    overflow: visible; /* Allow shadows to show */
    padding: var(--spacing-md) 0; /* Extra padding for shadows */
    visibility: visible !important;
    opacity: 1 !important;
}

/* MOBILE V2 Product Cards - ULTRA-SIMPLIFIED AND STABLE */
.product-card-v2-mobile {
    /* BULLETPROOF: Ensure always visible */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Basic card styling */
    aspect-ratio: 2/3;
    border-radius: 0;
    background: transparent;
    position: relative;
    width: 100%;
    height: auto;
    cursor: pointer;
    pointer-events: auto !important;
    
    /* NO TRANSITIONS: Completely static for maximum stability */
    transition: none !important;
    transform: none !important;
    
    /* Background image support - FULL QUALITY RENDERING */
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #f5f5f5 !important;
    
    /* High-resolution image rendering for retina displays */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: high-quality !important;
    image-rendering: optimizeQuality !important;
    
    /* Ensure crisp rendering on high-DPI displays */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* SIMPLIFIED: No complex hardware acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* NO TOUCH EFFECTS: Remove all interactive styling */
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    
    /* Static z-index */
    z-index: 1;
}

/* DESKTOP: Original product card styling with all effects */
.product-card {
    /* Base card styling that doesn't conflict with premium tilt */
    aspect-ratio: 2/3;
    border-radius: 0;
    background: transparent;
    position: relative;
    width: 100%;
    height: auto;
    box-shadow: none !important; /* Let tilt3d handle shadows */
    cursor: pointer;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* DESKTOP: Premium tilt card - let tilt3d.js handle transforms */
.product-card.premium-tilt-card {
    /* Transform controlled by JavaScript, not overridden by CSS */
}

/* DESKTOP: Error States */
.products-grid .product-card.error {
    opacity: 0.7;
}

.products-grid .product-card.error::after {
    content: 'Image not available';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--gray-500);
    font-size: var(--font-size-sm);
    text-align: center;
    z-index: 20;
}

/* MINIMAL LOADING STATE: No visual changes to prevent interference */
.product-card-v2.loading {
    background-color: #f0f0f0 !important;
    position: relative;
}

.product-card-v2.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ddd;
    border-top: 2px solid #007aff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}



@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* MINIMAL CLICKED STATE: No visual changes */
.product-card-v2.clicked-loading {
    /* No visual changes - just a class for tracking */
}

/* Error state */
.product-card-v2.error {
    background: #f5f5f5 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.product-card-v2.error::after {
    content: 'Image not available';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: 14px;
    text-align: center;
    z-index: 20;
}

/* Loaded state */
.product-card-v2.loaded {
    /* Successfully loaded - no special styling needed */
}

/* Mobile Design - Same beautiful shadows as mobile carousel */
@media (max-width: 767px) {
    .products-section {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }
    
    .products-grid {
        row-gap: calc(var(--spacing-xl) * 1.3);
        column-gap: calc(var(--spacing-xl) * 1.3);
        padding: var(--spacing-lg) 0;
    }
    
    .product-card-v2-mobile {
        max-width: 192px !important; /* 50% bigger: 128px * 1.5 = 192px */
        width: 100% !important;
        margin: 0 auto; /* Center the cards */
        position: relative; /* For pseudo-element glint overlay */
        
        /* MODAL-STYLE SHADOWS: Exact same shadow as working modal */
        position: relative !important;
        z-index: 2 !important;
        box-shadow: 20px 25px 50px rgba(0, 0, 0, 0.6) !important;
    }
    
    /* MOBILE: CSS-only glint overlay to prevent JavaScript duplicates */
    .product-card-v2-mobile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 80%
        );
        transform: translateX(-100%) translateY(-100%) skew(-15deg);
        animation: glint-sweep 6s infinite;
        pointer-events: none;
        filter: blur(12px);
        z-index: 15; /* Above image (z-index: 1) but below other UI elements */
    }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
    .product-card-v2-mobile {
        max-width: 165px !important; /* 50% bigger: 110px * 1.5 = 165px */
    }
}

/* Desktop styling */
@media (min-width: 768px) {
    .products-section {
        padding: 0 var(--spacing-xl) var(--spacing-xl);
    }
    
    .products-grid {
        gap: var(--spacing-xl);
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
        margin: 0 auto;
    }
    
    .product-card {
        max-width: 240px;
        /* Let premium tilt handle shadows */
    }
    
    /* DESKTOP: No manual hover - let premium tilt handle all effects */
}

@media (min-width: 1024px) {
    .products-grid {
        gap: var(--spacing-2xl);
        max-width: 700px;
    }
    
    .product-card {
        max-width: 280px;
    }
}

/* Focus States for Accessibility */
.product-card-v2-mobile:focus-visible,
.product-card:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 4px;
}

/* NO HOVER EFFECTS ON MOBILE: Completely removed to prevent any interference */
@media (hover: none) {
    .product-card-v2-mobile:hover,
    .product-card-v2-mobile:active,
    .product-card-v2-mobile:focus {
        /* NO EFFECTS WHATSOEVER */
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        /* ALLOW glint animations on mobile - remove animation: none */
        filter: none !important;
        z-index: 1 !important;
    }
    
    /* BULLETPROOF: Ensure always clickable on mobile */
    .product-card-v2-mobile {
        pointer-events: auto !important;
        cursor: pointer !important;
        opacity: 1 !important;
        transition: none !important;
        transform: none !important;
    }
    
    /* DESKTOP: Disable premium tilt on touch devices to prevent conflicts */
    .product-card.premium-tilt-card {
        /* On touch devices, disable 3D effects */
        transform: none !important;
        transition: none !important;
    }
    
    /* DESKTOP: Enable glint-overlay on desktop product cards only */
    .product-card .glint-overlay {
        background: linear-gradient(
            115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 80%
        ) !important;
        animation: glint-sweep 6s infinite !important;
        pointer-events: none !important;
        filter: blur(12px) !important;
        z-index: 10 !important;
    }
}

/* Animation for intersection observer */
.products-section.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Empty state */
.products-grid.empty {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-md);
}

.products-error-v2,
.products-empty-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #666;
    min-height: 200px;
    width: 100%;
}

.products-error-v2 button {
    margin-top: 15px;
    padding: 10px 20px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.products-error-v2 button:hover {
    background: #0056b3;
}