/**
 * Mobile-Only Performance Optimizations
 * These fixes only apply to mobile devices (max-width: 768px)
 * Desktop remains unaffected
 */

/* Mobile-only optimizations */
@media (max-width: 768px) {
    /* Prevent layout shift with aspect-ratio (doesn't break responsiveness) */
    .visor_virtual_section img {
        aspect-ratio: 16 / 5;
        object-fit: cover;
    }
    
    .catagory_bg img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    
    .product_container .product-image img {
        aspect-ratio: 4 / 3;
        object-fit: contain;
    }
    
    .banner_col_with_inner img {
        aspect-ratio: 245 / 380;
        object-fit: cover;
    }
    
    /* GPU acceleration for smoother scrolling on mobile */
    .product_container,
    .catagory_bg,
    .banner_col_with_inner,
    .trending_product_hot {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* Lazy load below-fold sections on mobile */
    .feature_product_section,
    .services_section,
    .banner_section,
    .catagory_section {
        content-visibility: auto;
        contain-intrinsic-size: auto 400px;
    }
    
    /* Optimize animations for mobile - use transform only */
    .btn,
    .ctm-btn {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    
    .txt_hover:hover {
        transition: color 0.2s ease;
    }
    
    /* Reduce animation complexity on mobile */
    .slick-slide {
        will-change: transform;
        backface-visibility: hidden;
    }
    
    /* Contain dropdown repaints */
    .dropdown-menu {
        contain: layout style;
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}