/* ---- Estilos Gerais ---- */

body {
    font-family: Arial, sans-serif;
    /* Define a fonte padrão da página */
    margin: 0;
    /* Remove a margem padrão do corpo da página */
    background-color: #f4f4f4;
    /* Cor de fundo cinza claro para a página */
}

header {
    background-color: #333;
    /* Cor de fundo escura para o cabeçalho */
    color: white;
    /* Cor do texto branca */
    padding: 1rem 0;
    /* Espaçamento interno (1rem em cima/baixo, 0 dos lados) */
    text-align: center;
    /* Centraliza o texto do cabeçalho */
}


/* ---- Layout da Grade de Produtos ---- */

.product-grid {
    display: grid;
    /* Ativa o layout de grade (Grid Layout) */
    grid-template-columns: repeat(5, 1fr);
    /* Cria 3 colunas de tamanho igual (1fr = uma fração do espaço) */
    gap: 20px;
    /* Define um espaçamento de 20px entre os produtos */
    padding: 20px;
    /* Adiciona um espaçamento interno ao redor de toda a grade */
    max-width: 1200px;
    /* Define uma largura máxima para a grade */
    margin: 0 auto;
    /* Centraliza a grade na página */
}


/* ---- Estilo do Cartão de Produto Individual ---- */

.product-card {
    background-color: white;
    /* Fundo branco para cada cartão */
    border: 1px solid #ddd;
    /* Borda cinza clara */
    border-radius: 8px;
    /* Cantos arredondados */
    padding: 15px;
    /* Espaçamento interno */
    text-align: center;
    /* Centraliza todo o conteúdo do cartão */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra suave para dar um efeito de elevação */
    transition: transform 0.2s;
    /* Adiciona uma transição suave para a animação */
}

.product-card:hover {
    transform: scale(1.03);
    /* Aumenta levemente o tamanho do cartão ao passar o mouse */
}


/* ---- Estilos dos Elementos Dentro do Cartão ---- */

.product-card img {
    max-width: 100%;
    /* Garante que a imagem nunca ultrapasse a largura do cartão */
    height: auto;
    /* Mantém a proporção da imagem */
    border-radius: 5px;
    /* Cantos arredondados para a imagem */
    margin-bottom: 15px;
    /* Espaçamento abaixo da imagem */
}

.product-card h2 {
    font-size: 1.2rem;
    /* Tamanho da fonte para o nome do produto */
    margin: 10px 0;
    /* Margem acima e abaixo do título */
}

.product-card p {
    color: #666;
    /* Cor cinza para o texto de descrição */
    font-size: 0.9rem;
    /* Tamanho da fonte da descrição */
}

.product-card .price {
    display: block;
    /* Faz o preço ocupar uma linha inteira */
    font-size: 1.3rem;
    /* Tamanho da fonte do preço */
    font-weight: bold;
    /* Texto em negrito */
    color: #007BFF;
    /* Cor azul para o preço */
    margin: 15px 0;
    /* Margem acima e abaixo do preço */
}

.product-card button {
    background-color: #28a745;
    /* Cor de fundo verde para o botão */
    color: white;
    /* Texto do botão branco */
    border: none;
    /* Remove a borda padrão */
    padding: 10px 20px;
    /* Espaçamento interno do botão */
    border-radius: 5px;
    /* Cantos arredondados */
    cursor: pointer;
    /* Muda o cursor para uma "mãozinha" ao passar por cima */
    font-size: 1rem;
    /* Tamanho da fonte do botão */
    transition: background-color 0.2s;
    /* Transição suave para a cor de fundo */
}

.product-card button:hover {
    background-color: #218838;
    /* Escurece o botão ao passar o mouse */
}


/* ---- Design Responsivo (para celulares e tablets) ---- */

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Muda para 2 colunas em telas menores (tablets) */
    }
}

@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: 1fr;
        /* Muda para 1 coluna em telas muito pequenas (celulares) */
    }
}