body {
    font-family: "Roboto", sans-serif;
    background-color: #f0f0f0; /* Fundo claro */
    color: #333; /* Texto padrão */
    margin: 0; /* Remove margens padrão do body */
    padding: 0; /* Remove preenchimento padrão do body */
}

header {
    background-color: #007bff; /* Cor do cabeçalho */
    color: white; /* Texto branco */
    padding: 20px; /* Preenchimento do cabeçalho */
    text-align: center; /* Centraliza o texto do cabeçalho */
}

h2 {
    text-align: center; /* Centraliza o título */
    padding: 20px; /* Espaçamento ao redor do título */
    color: #007bff; /* Cor do título */
    font-size: 2em; /* Tamanho do texto do título */
}

.produtos-container {
    display: flex; /* Exibe os produtos em linha */
    flex-wrap: wrap; /* Permite quebra de linha */
    justify-content: center; /* Centraliza os itens */
    gap: 20px; /* Espaço entre os produtos */
    padding: 15px; /* Espaçamento ao redor do container */
}

.produto {
    background-color: #fff; /* Fundo do produto */
    border: 4px solid #00ffff; /* Borda leve */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 15px; /* Preenchimento interno do produto */
    width: 180px; /* Largura dos produtos */
    transition: transform 0.3s, box-shadow 0.3s; /* Efeitos de transição */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /** Sombra leve */
    display: flex; /* Usar flexbox para alinhar a imagem e o texto */
    flex-direction: column; /* Organiza a imagem e o texto em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    text-align: center; /* Centraliza o texto */
}

.produto img {
    max-width: 180%; /* A imagem ocupa a largura máxima do produto */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 5px; /* Bordas arredondadas para a imagem */
    margin-bottom: -25px; /* Espaçamento abaixo da imagem */
}

.tamanho, .cor, .preco, .estoque {
    margin: 5px 0; /* Espaçamento entre os textos */
}

.preco {
    font-weight: bold; /* Texto em negrito */
    color: #28a745; /* Cor verde do preço */
}

.estoque {
    color: #e74c3c; /* Cor vermelha do estoque */
    font-weight: bold; /* Texto em negrito */
}

.botao-comprar {
    border: none; /* Remove bordas do botão */
    border-radius: 5px; /* Bordas arredondadas do botão */
    padding: 5px 10px; /* Preenchimento do botão */
    cursor: pointer; /* Cursor em forma de mão ao passar o mouse */
    background-color: #15ff00; /* Cor azul do botão */
    color: white; /* Texto do botão em branco */
    font-size: 0.8em;
    margin-top: 10px;
    transition: background-color 0.3s; /* Efeito de transição de cor */
}

.botao {
    background-color: #007bff; /* Cor azul do botão */
    color: white; /* Texto do botão em branco */
    border: none; /* Remove bordas do botão */
    border-radius: 5px; /* Bordas arredondadas do botão */
    padding: 5px 5px; /* Preenchimento do botão */
    cursor: pointer; /* Cursor em forma de mão ao passar o mouse */
    transition: background-color 0.3s; /* Efeito de transição de cor */
    font-size: 0.9em; /* Tamanho do texto do botão */
    margin-top: 10px; /* Espaçamento acima do botão */
}

.botao:hover {
    background-color: #0056b3; /* Cor do botão ao passar o mouse */
}

.botoes-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 5px;
    margin-top: 10px;
}

.botao, .botao-comprar {
    flex: 1;
    text-align: center;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .produtos-container {
        flex-direction: column; /* Muda para coluna em telas menores */
        align-items: center; /* Centraliza os itens */
    }

    .produto {
        width: 90%; /* Largura maior em telas pequenas */
    }

    .botoes-container {
        flex-direction: column; /* Torna os botões verticais no mobile */
        gap: 10px; /* Espaço entre os botões */
    }

    .botao, .botao-comprar {
        width: 100%; /* Os botões ocupam a largura inteira no mobile */
    }
}