/**
 * Mobile Performance Optimizations
 * Baseado nos insights do PageSpeed Insights
 */

/* ========================================
   📱 OTIMIZAÇÕES PARA MOBILE
   ======================================== */

/* 1. Reduzir layout shifts */
.woocommerce .product img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.woocommerce .product .price {
    min-height: 1.5em;
    display: block;
}

.woocommerce .product .woocommerce-loop-product__title {
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 2. Otimizar animações para mobile */
@media (max-width: 768px) {
    * {
        will-change: auto;
    }
    
    .woocommerce .product:hover {
        will-change: transform;
        transform: translateY(-2px);
        transition: transform 0.2s ease;
    }
    
    /* Reduzir animações em dispositivos com preferência por movimento reduzido */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* 3. Containment para evitar reflow */
.woocommerce .product {
    contain: layout;
    contain: style;
}

.woocommerce .product .product-image {
    contain: layout;
    contain: paint;
}

/* 4. Otimizar fontes para mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    .woocommerce .product .price {
        font-size: 16px;
        font-weight: 600;
    }
    
    .woocommerce .product .woocommerce-loop-product__title {
        font-size: 14px;
        line-height: 1.3;
    }
}

/* 5. Melhorar performance de scroll */
.woocommerce .products {
    contain: layout;
    contain: style;
}

.woocommerce .product {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 6. Otimizar imagens lazy loading */
.woocommerce .product img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

.woocommerce .product img[loading="lazy"].loaded {
    opacity: 1;
}

/* 7. Reduzir repaints */
.woocommerce .product .button {
    contain: layout;
    contain: paint;
}

/* 8. Otimizar grid de produtos */
@media (max-width: 768px) {
    .woocommerce ul.products {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 10px;
    }
    
    .woocommerce ul.products li.product {
        margin: 0;
        padding: 10px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}

/* 9. Melhorar performance de toque */
.woocommerce .product .button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 10. Otimizar carregamento de recursos críticos */
.woocommerce .product .product-image {
    background-color: #f8f9fa;
    background-image: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), 
                      linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #f8f9fa 75%), 
                      linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* 11. Reduzir complexidade de seletores */
.trudes-mobile-optimized .product {
    contain: layout style paint;
}

.trudes-mobile-optimized .product img {
    will-change: auto;
}

.trudes-mobile-optimized .product:hover img {
    will-change: transform;
}

/* 12. Otimizar para conexões lentas */
@media (max-width: 768px) and (max-width: 480px) {
    .woocommerce .product .product-image img {
        max-width: 100%;
        height: auto;
    }
    
    .woocommerce .product .woocommerce-loop-product__title {
        font-size: 13px;
    }
    
    .woocommerce .product .price {
        font-size: 15px;
    }
}

/* 13. Melhorar performance de JavaScript */
.trudes-mobile-optimized {
    contain: layout style;
}

/* 14. Otimizar para dispositivos de baixa resolução */
@media (max-width: 320px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    
    .woocommerce ul.products li.product {
        padding: 8px;
    }
}

/* 15. Reduzir uso de GPU */
@media (max-width: 768px) {
    .woocommerce .product {
        transform: none;
    }
    
    .woocommerce .product:hover {
        transform: none;
    }
}

/* 16. Otimizar para bateria */
@media (max-width: 768px) {
    .woocommerce .product .button {
        background: #007cba;
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .woocommerce .product .button:hover {
        background: #005a87;
    }
}

/* 17. Melhorar acessibilidade e performance */
@media (max-width: 768px) {
    .woocommerce .product .button:focus {
        outline: 2px solid #007cba;
        outline-offset: 2px;
    }
}

/* 18. Otimizar para diferentes orientações */
@media (max-width: 768px) and (orientation: landscape) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 19. Reduzir complexidade de renderização */
.woocommerce .product .product-image {
    position: relative;
    overflow: hidden;
}

.woocommerce .product .product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 20. Otimizar para Core Web Vitals */
.woocommerce .product {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

/* 21. Melhorar LCP (Largest Contentful Paint) */
.woocommerce .product .product-image img:first-child {
    priority: high;
}

/* 22. Otimizar CLS (Cumulative Layout Shift) */
.woocommerce .product .product-image {
    aspect-ratio: 1 / 1;
}

.woocommerce .product .woocommerce-loop-product__title {
    height: 2.5em;
    overflow: hidden;
}

/* 23. Melhorar FID (First Input Delay) */
.woocommerce .product .button {
    pointer-events: auto;
    touch-action: manipulation;
}

/* 24. Otimizar para diferentes densidades de pixel */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .woocommerce .product .product-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 25. Reduzir uso de memória */
.woocommerce .product .product-image img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* 26. Otimizar para diferentes tipos de conexão */
@media (max-width: 768px) {
    .woocommerce .product .product-image img {
        loading: lazy;
        decoding: async;
    }
}

/* 27. Melhorar performance de scroll */
.woocommerce .products {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* 28. Otimizar para diferentes tamanhos de tela */
@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

@media (max-width: 360px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* 29. Reduzir repaints e reflows */
.woocommerce .product {
    will-change: auto;
}

.woocommerce .product:hover {
    will-change: transform;
}

/* 30. Otimizar para diferentes navegadores mobile */
@supports (display: grid) {
    .woocommerce ul.products {
        display: grid;
    }
}

@supports not (display: grid) {
    .woocommerce ul.products {
        display: flex;
        flex-wrap: wrap;
    }
    
    .woocommerce ul.products li.product {
        flex: 1 1 50%;
        max-width: 50%;
    }
}