/* CORREÇÃO ESPECÍFICA PARA PROBLEMAS DE IMAGENS NO MOBILE */

/* Remove conflitos do lazy loading no mobile */
@media screen and (max-width: 768px) {
    
    /* Força carregamento imediato das imagens principais no mobile */
    main#lista .produtos .item figure img,
    .fotoProduto figure img,
    .fotoProduto img {
        loading: eager !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        width: 110px !important;
        height: 110px !important;
        object-fit: cover !important;
        border-radius: 8px;
        transition: none !important;
    }
    
    /* Remove filtros que podem causar problemas no mobile */
    img[data-src] {
        filter: none !important;
    }
    
    /* Força visibilidade das figuras */
    main#lista .produtos .item figure,
    .fotoProduto figure {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 110px !important;
        height: 110px !important;
        overflow: hidden;
        border-radius: 8px;
    }
    
    /* Corrige container das imagens de produto */
    main#lista .produtos .item .fotoProduto {
        width: 110px !important;
        height: 110px !important;
        flex-shrink: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove efeitos de lazy loading problemáticos no mobile */
    .lazy-loading {
        background: none !important;
        animation: none !important;
    }
    
    /* Garante que skeleton não interfira */
    .skeleton,
    .skeleton-image {
        display: none !important;
    }
    
    /* Remove blur dos placeholders */
    img[loading="lazy"] {
        filter: none !important;
        opacity: 1 !important;
    }
    
    /* Força carregamento das imagens de review */
    .reviews img,
    img[src*="rv"] {
        loading: eager !important;
        width: 70px !important;
        height: 70px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
    
    /* Corrige layout dos itens de produto no mobile */
    main#lista .produtos .item a {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 15px !important;
        border-radius: 12px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
        text-decoration: none;
        color: inherit;
    }
    
    /* Texto do produto */
    main#lista .produtos .item .texto {
        flex: 1;
        max-width: calc(100% - 125px) !important;
    }
    
    /* Título do produto */
    main#lista .produtos .item .texto h3 {
        font-size: 16px !important;
        font-weight: 600;
        margin-bottom: 8px;
        line-height: 1.3;
        color: #333;
    }
    
    /* Preços */
    main#lista .produtos .item .texto .preco {
        font-size: 18px !important;
        font-weight: bold;
        color: #077c22 !important;
    }
    
    main#lista .produtos .item .texto .precoPromocao {
        font-size: 14px !important;
        text-decoration: line-through;
        color: #999;
    }
    
    /* Container dos produtos */
    main#lista .produtos {
        display: block !important;
        gap: 0 !important;
    }
    
    main#lista .produtos .item {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    /* Força carregamento das imagens de logo */
    header#topo .cover .logo img {
        loading: eager !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Remove animações problemáticas no mobile */
    * {
        animation-play-state: running !important;
    }
    
    /* Corrige visibility hidden que pode estar bloqueando imagens */
    [style*="visibility: hidden"] img,
    [style*="opacity: 0"] img {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Correções específicas para dispositivos muito pequenos */
@media screen and (max-width: 450px) {
    
    main#lista .produtos .item figure img,
    .fotoProduto figure img {
        width: 90px !important;
        height: 90px !important;
    }
    
    main#lista .produtos .item figure,
    .fotoProduto figure {
        width: 90px !important;
        height: 90px !important;
    }
    
    main#lista .produtos .item .fotoProduto {
        width: 90px !important;
        height: 90px !important;
    }
    
    main#lista .produtos .item .texto {
        max-width: calc(100% - 105px) !important;
    }
}

/* Fallback para forçar carregamento */
@media (hover: none) and (pointer: coarse) {
    /* Detecta dispositivos touch (mobile) */
    img {
        loading: eager !important;
    }
    
    .lazy-loading,
    .skeleton {
        display: none !important;
    }
} 