.products-section {
    padding: 20px 5% 20px 5%; 

    /*padding: 5px 5% 80px 5%; */
    /* Sintaxe: padding: topo | direita | fundo | esquerda; */
    text-align: justify;
    background-color: white; 
    
}

.products-section h2 {
    font-size: 2.5em;
    font-weight: 700;
    color: black; 
    margin-bottom: 30px;
    font-size: 1.2em;
}

.section-subtitle {
    max-width: 800px;
    margin: 0 auto 10px auto;
    font-size: 1.1em;
    color: #555;
}


.product-category {
    margin-bottom: 10px;
}

.product-category h3 {
    font-size: 1.8em;
    color: #ff9900; /* Destaque em Laranja */
    margin-bottom: 30px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    display: inline-block; /* Limita a linha horizontal ao tamanho do texto */
}


.product-grid {
    display: grid;
    /* Por padrão, tenta 3 colunas, mas ajusta para caber no mínimo 300px por coluna */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; /* Espaço entre os cards */
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * Estilo do Card Individual
 */
.product-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem se encaixe na borda arredondada */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all  0.3s ease-in-out;
    text-align: left;
    border: 2px solid transparent;
}

.product-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    background-color: #f8f8f8;
}



.product-card img {
    width: 100%;
    height: 220px; /* Altura fixa para uniformizar as imagens */
    object-fit: contain; /* Garante que a imagem preencha o espaço sem distorcer (cortando) */
    display: block;
}



.card-content {
    padding: 20px;
}

.card-content h4 {
    font-size: 1em;
    color: black;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
}

.card-content p {
    font-size: 0.95em;
    color: #666;
    margin: 0;
}

@media (max-width: 650px) {
    .product-grid {
        /* No celular, o grid se ajusta para 1 coluna grande */
        grid-template-columns: 1fr;
    }
    
    .products-section {
        padding: 60px 5%;
    }
    
    .product-category h3 {
        font-size: 1.5em;
    }
}

/*
 * ====================================
 * RESPONSIVIDADE PARA TABLETS (651px a 1024px)
 * ====================================
 */
/* 
@media (min-width: 651px) and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: 1fr 1fr;
        
        gap: 20px; 
    }
    
    .product-card img {
        height: 180px; 
    }
}
*/