/* assets/css/style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que o padding e border não aumentem o tamanho dos elementos */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garante que o body ocupe pelo menos 100% da altura da tela */
    font-family: Arial, sans-serif;
    margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
    max-width: 80%; /* Largura padrão de 80% para desktop */
    padding: 0; /* Remove o padding vertical desnecessário */
    background-color: #F9FAFB; /* Fundo claro (similar ao exemplo fornecido) */
}

/* Estilo para dispositivos móveis e tablets (largura máxima de 768px) */
@media (max-width: 768px) {
    body {
        max-width: 95%; /* Largura de 95% para mobile e tablet */
    }
}

/* Menu */
header {
    width: 100%; /* Largura total */
    background-color: #333; /* Cor de fundo */
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* Fixa o menu no topo */
    top: 0;
    left: 0;
    z-index: 1000; /* Garante que o menu fique sobre outros elementos */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

header h1 {
    margin: 0;
}

header nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background-color: #555;
    border-radius: 5px;
}

/* Corpo principal */
main {
    flex: 1; /* Ocupa o espaço restante entre o header e footer */
    margin-top: 80px; /* Espaço para evitar sobreposição com o menu fixo */
    padding: 1rem; /* Espaçamento interno */
    background-color: #F9FAFB; /* Mesma cor de fundo do body */
}

/* Produtos */
.produtos {
    display: grid;
    gap: 1.2rem; /* Espaçamento entre os produtos */
    grid-auto-rows: minmax(350px, auto); /* Define altura mínima para cada produto */
}

/* Grid para desktop (4 colunas) */
@media (min-width: 768px) {
    .produtos {
        grid-template-columns: repeat(4, 1fr); /* 4 colunas no desktop */
    }
}

/* Grid para tablets (3 colunas) */
@media (max-width: 768px) and (min-width: 576px) {
    .produtos {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas em tablets */
    }
}

/* Grid para mobile (2 colunas) */
@media (max-width: 576px) {
    .produtos {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em telas menores */
    }
}

/* Grid para telas muito pequenas (1 coluna) */
@media (max-width: 320px) {
    .produtos {
        grid-template-columns: 1fr; /* 1 coluna em telas muito pequenas */
    }
}

.produto {
    border: 0px solid #ccc;
    text-align: center;
    display: flex;
    flex-direction: column; /* Organiza o conteúdo verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    border-radius: 8px; /* Arredonda as bordas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s ease; /* Efeito de hover */
    background-color: #fff; /* Fundo branco para os produtos */
}

.produto:hover {
    transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra mais forte no hover */
}

.produto img {
    width: 100%; /* Largura fixa */
    height: 200px; /* Altura fixa */
    object-fit: contain; /* Ajusta a imagem ao tamanho da caixa mantendo a proporção */
    object-position: center; /* Centraliza a imagem dentro da área */
    border-radius: 8px 8px 0px 0px; /* Arredonda as bordas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    background-color: #fff; /* Cor de fundo para áreas vazias */
}

.produto h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem; /* Espaçamento entre o título e a descrição */
    font-size: 1.2rem; /* Tamanho maior para o título */
    font-weight: bold; /* Negrito no título */
    color: #333; /* Texto preto */
}

.produto p {
    margin-bottom: 0.5rem; /* Espaçamento entre a descrição e o preço */
    font-size: 0.9rem; /* Tamanho menor para a descrição */
    color: #666; /* Cor mais suave para a descrição */
}

.produto .preco {
    font-size: 1.1rem; /* Tamanho maior para o preço */
    font-weight: bold; /* Negrito no preço */
    color: #333; /* Cor destacada para o preço */
}

.adicionar-carrinho {
    background-color: #6a50c9; /* Cor roxa para o botão */
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.adicionar-carrinho i {
    font-size: 0.8rem;
}

/* Paginação */
.paginacao {
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.paginacao a,
.paginacao span {
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #6a50c9; /* Cor roxa para botões */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Efeito de transição ao passar o mouse */
}

.paginacao a:hover {
    background-color: #5b31b1; /* Cor mais escura ao passar o mouse */
}

.espacoh {
    margin-bottom: 1rem; /* Espaço de linha */
}

/* Rodapé */
footer {
    width: 100vw; /* Largura total da viewport */
    background-color: #f4f4f4;
    text-align: center;
    padding: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Empurra o rodapé para o final da página */
    margin-left: calc(-50vw + 50%); /* Centraliza o rodapé e faz ocupar toda a largura */
    margin-right: calc(-50vw + 50%);
}