/* VisionAQ Prints - Mobile Carousel ULTIMATE - COMPLETE SCRATCH REBUILD */
/* MOBILE ONLY - Completely isolated from desktop */
/* CORE MISSION: Prevent image disappearing on touch/hold AT ALL COSTS */
/* ENHANCED SHADOWS: Premium darker shadows for product images */

/* MOBILE ONLY - Show only on mobile devices */
@media (max-width: 767px) {
    
    /* Mobile carousel section */
    .mobile-carousel-section {
        display: block !important;
        padding: 0px 0 10px 0;
        background: var(--white, #ffffff);
        position: relative;
        z-index: 1;
        visibility: visible;
        opacity: 1;
        /* FIX: Lock carousel section positioning */
        width: 100%;
        max-width: 100vw;
        left: 0;
        right: 0;
        transform: translate3d(0, 0, 0);
        contain: layout;
    }

    /* Mobile carousel track */
    .mobile-carousel-track {
        display: flex;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 30px 16px 60px 16px; /* Increased bottom padding for shadow spillover */
        gap: 20px;
        scroll-snap-type: x mandatory;
        flex-direction: row;
        align-items: flex-start;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: none;
        overscroll-behavior-y: auto;
        min-height: 330px; /* Increased height for shadow space */
        max-height: 340px; /* Increased max height for shadow space */
        z-index: 5;
        transform: translate3d(0, 0, 0);
        will-change: scroll-position;
        /* PERFORMANCE OPTIMIZATION: Hardware acceleration for smooth scrolling */
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000px;
    }

    /* Hide scrollbar */
    .mobile-carousel-track::-webkit-scrollbar {
        display: none;
    }

    /* ULTIMATE CAROUSEL ITEMS - IMG element approach prevents disappearing */
    .ultimate-carousel-item {
        /* Core structure handled by JavaScript for maximum control */
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        
        /* PERFECT SHADOWS: Exact same as working products grid */
        position: relative !important;
        z-index: 2 !important;
        box-shadow: 20px 25px 50px rgba(0, 0, 0, 0.6) !important;
        
        /* ULTIMATE: NO transitions or animations that could interfere */
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* ULTIMATE IMAGE CONTAINER - Wrapper for the img element */
    .ultimate-image-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important; /* Allow shadows to spill out */
    }
    
    /* ULTIMATE PRODUCT IMAGE - The actual IMG element that cannot disappear */
    .ultimate-product-image {
        /* All properties set by JavaScript with !important for maximum protection */
        /* This ensures images NEVER disappear regardless of touch events */
        /* PERFORMANCE OPTIMIZATION: Hardware acceleration for smooth rendering */
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000px;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* ULTIMATE GLINT EFFECT - The world-record smooth animation */
    .ultimate-carousel-item::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: ultimate-glint-sweep 6s infinite;
        pointer-events: none;
        filter: blur(12px);
        z-index: 10;
        /* WORLD RECORD PERFORMANCE: Hardware acceleration */
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* ULTIMATE GLINT ANIMATION - Smooth, efficient, reversing */
    @keyframes ultimate-glint-sweep {
        0% {
            transform: translateX(-100%) translateY(-100%) skew(-15deg);
            opacity: 0;
        }
        25% {
            opacity: 1;
        }
        50% {
            transform: translateX(100%) translateY(100%) skew(-15deg);
            opacity: 1;
        }
        75% {
            opacity: 1;
        }
        100% {
            transform: translateX(-100%) translateY(-100%) skew(-15deg);
            opacity: 0;
        }
    }

    /* ULTIMATE ACCESSIBILITY - Focus states */
    .ultimate-carousel-item:focus-visible {
        outline: 3px solid #007aff;
        outline-offset: 2px;
        z-index: 15;
    }

    /* ULTIMATE SPACING - Consistent gaps */
    .ultimate-carousel-item:first-child {
        margin-left: 0;
    }

    .ultimate-carousel-item:last-child {
        margin-right: 24px;
    }

    /* ULTIMATE RESPONSIVE - Small mobile screens */
    @media (max-width: 375px) {
        .mobile-carousel-track {
            padding: 25px 12px 55px 12px; /* Increased bottom padding for shadow spillover */
            gap: 16px;
            min-height: 310px; /* Increased height for shadow space */
        }

        .ultimate-carousel-item:last-child {
            margin-right: 16px;
        }
    }

    /* ULTIMATE RESPONSIVE - Larger mobile screens */
    @media (min-width: 414px) and (max-width: 767px) {
        .mobile-carousel-track {
            padding: 35px 20px 65px 20px; /* Increased bottom padding for shadow spillover */
            gap: 24px;
            min-height: 340px; /* Increased height for shadow space */
        }

        .ultimate-carousel-item:last-child {
            margin-right: 24px;
        }
    }

    /* ULTIMATE ORIENTATION SUPPORT - Landscape mobile */
    @media (max-width: 767px) and (orientation: landscape) {
        .mobile-carousel-track {
            min-height: 220px; /* Increased height for shadow space */
            max-height: 240px; /* Increased max height for shadow space */
            padding: 15px 16px 45px 16px; /* Increased bottom padding for shadow spillover */
        }
    }

    /* ULTIMATE ORIENTATION SUPPORT - Portrait mobile */
    @media (max-width: 767px) and (orientation: portrait) {
        .mobile-carousel-track {
            min-height: 330px; /* Increased height for shadow space */
            max-height: 340px; /* Increased max height for shadow space */
            padding: 30px 16px 60px 16px; /* Increased bottom padding for shadow spillover */
        }
    }
}

/* ULTIMATE DESKTOP HIDE - Completely hidden on desktop */
@media (min-width: 768px) {
    .mobile-carousel-section {
        display: none !important;
        visibility: hidden !important;
    }
    
    .ultimate-carousel-item {
        display: none !important;
    }
    
    .ultimate-image-container {
        display: none !important;
    }
    
    .ultimate-product-image {
        display: none !important;
    }
}