/* resp1.css - Responsividade para telas pequenas (celulares) */

@media only screen and (max-width: 768px) {
    /* Ajustes gerais */
    body {
        overflow-x: hidden;
    }
    
    /* Título */
    .title {
        margin-top: 25%;
    }
    
    .title h1 {
        font-size: 24px;
    }
    
    .title h4 {
        font-size: 16px;
    }
    
    /* Slider/Banner */
    .slider {
        height: 165px;
        margin-bottom: 10px;
        margin: 20px auto;
        border-radius: 8px;
    }
    
    #slideLx img {
        width: 180px;
        height: 180px;
    }
    
    #slideL img {
        width: 180px;
        height: 180px;
    }
    
    /* Produtos - Ajuste principal aqui */
    .produtos {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
        gap: 10px;
        padding: 5px;
        width: 97%;
        
    }
    
    .produto {
        width: 100%; /* Ocupa toda a largura da célula da grade */
        margin-bottom: 10px;
        box-sizing: border-box; /* Inclui padding e border na largura */
    }
    
    .produto:hover {
        transform: none; /* Remove o efeito hover em mobile */
    }
    
    .detalhes h3 {
        font-size: 13px;
        margin: 5px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .detalhes p {
        font-size: 11px;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limita a 2 linhas */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    #preco {
        font-size: 14px;
    }
    
    #frete {
        font-size: 10px;
    }
}

@media only screen and (max-width: 480px) {
    /* Ajustes para telas muito pequenas */
    .title {
        margin-top: 33%;
    }
    
    .slider {
        height: 165px;
    }
    
    /* Ajuste para o menu mobile (se houver) */
    header {
        padding: 10px 5px;
    }
    
    /* Reduz para 2 colunas em telas muito pequenas se necessário */
    @media (max-width: 400px) {
        .produtos {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}