.produtos {
  display: grid;                                  /* Usa Grid Layout para organizar os produtos em colunas e linhas */
  grid-template-columns: repeat(5, 1fr);         /* Cria 5 colunas de largura igual (1fr cada), distribuindo os produtos uniformemente */
  gap: var(--rem-15);                             /* Espaçamento entre linhas e colunas (horizontal e vertical) */
  padding: var(--rem-2);                          /* Espaçamento interno da grid, criando distância das bordas do container */
  align-items: stretch;                           /* Garante que todos os itens (cards) tenham a mesma altura na linha */
}

/* CARD PRODUTO */
.produto-card {
  background: var(--branco);                 /* Fundo branco, destacando o card do fundo da página */
  border: 1px solid var(--cinza-claro);     /* Borda cinza clara ao redor do card, dando definição sem pesar visualmente */
  border-radius: var(--rem-025);            /* Cantos levemente arredondados para um visual moderno e suave */
  padding: var(--rem-1);                     /* Espaçamento interno, separando o conteúdo das bordas do card */
  display: flex;                             /* Torna o card um container Flexbox */
  flex-direction: column;                    /* Organiza o conteúdo do card em coluna (imagem, título, preço, botão) */
  gap: var(--rem-05);                        /* Espaçamento uniforme entre os elementos internos do card */
  height: 100%;                              /* Faz o card ocupar toda a altura da célula do grid, garantindo uniformidade */
}

.produto-card img {
  width: 100%;               /* A imagem ocupa toda a largura do card */
  height: 180px;             /* Altura fixa da imagem, garantindo uniformidade entre cards */
  object-fit: contain;       /* Ajusta a imagem para caber dentro da área sem cortar, mantendo proporção */
}

.produto-titulo {
  font-size: var(--rem-1);           /* Tamanho do título do produto (~16px) */
}

.produto-descricao-container {
  display: flex;             /* Flexbox para organizar a descrição e avisos verticalmente */
  flex-direction: column;    /* Organiza elementos em coluna */
  gap: var(--rem-025);              /* Pequeno espaço entre os elementos internos */
  flex-grow: 1;              /* Faz o container ocupar o espaço restante do card, empurrando preço e botão para a base */
}

.produto-aviso {
  font-size: var(--rem-075);             /* Texto pequeno para avisos (ex: "Oferta limitada") */
  color: var(--vermelho-suave);   /* Cor vermelha suave, destacando mas sem exagero */
  font-style: italic;              /* Texto em itálico, indicando que é uma observação secundária */
}

.produto-descricao {
  font-size: 0.9rem;             /* Texto legível, menor que o título */
  color: var(--preto-suave);     /* Cor preta suave, sem contrastar demais */
  margin-top: auto;               /* Empurra o preço e o botão para a base do card */
}

.produto-preco {
  font-weight: bold;             /* Preço destacado, em negrito */
  color: var(--verde-escuro);    /* Cor verde escuro, chamando atenção para preço */
}

/* Botão Carrinho */
.btn-carrinho {
  margin-top: var(--rem-05);              /* Espaço acima do botão, separando do conteúdo acima (ex: descrição ou preço) */
  background: var(--verde-escuro);        /* Cor de fundo verde escuro, chamativa para ação principal */
  border: none;                           /* Remove borda padrão do botão */
  cursor: pointer;                        /* Cursor de mãozinha, indicando que é clicável */
  padding: var(--rem-05) var(--rem-1);    /* Espaçamento interno: vertical (top/bottom) menor, horizontal (left/right) maior */
  text-align: center;                     /* Centraliza o texto dentro do botão */
  color: var(--branco);                    /* Texto branco para contraste com o fundo verde */
  font-weight: bold;                       /* Texto em negrito, destacando a ação */
  border-radius: var(--rem-025);          /* Cantos levemente arredondados, estilo moderno */
  transition: background-color 0.3s ease; /* Transição suave da cor de fundo no hover */
}

.btn-carrinho:hover {
  background-color: var(--verde-mais-escuro); /* Muda o fundo para verde mais escuro ao passar o mouse */
}

/* PAGINACAO */
.paginacao {
  display: flex;                         /* Flexbox para organizar botões de página em linha */
  justify-content: center;               /* Centraliza os itens horizontalmente */
  align-items: center;                   /* Alinha os itens verticalmente ao centro */
  gap: var(--rem-1);                     /* Espaço entre os botões de página */
  margin-top: var(--rem-2);              /* Espaço acima da paginação em relação aos produtos */
  text-align: center;                    /* Centraliza o texto, caso haja elementos de texto dentro */
  margin-bottom: var(--rem-2);                   /* Espaço abaixo da paginação em relação ao próximo conteúdo */
}

.paginacao button {
  padding: var(--rem-05) var(--rem-1);        /* Espaçamento interno: vertical menor, horizontal maior */
  border: 1px solid var(--cinza-claro);       /* Borda leve cinza clara, destacando os botões sem pesar */
  border-radius: var(--rem-025);              /* Cantos arredondados, estilo moderno */
  background: var(--branco);                  /* Fundo branco para contraste com o layout */
  cursor: pointer;                            /* Cursor de mãozinha, indicando que é clicável */
  transition: background-color 0.2s ease;     /* Transição suave ao mudar a cor de fundo no hover */
}

.paginacao button:disabled {
  opacity: 0.5;           /* Deixa o botão semi-transparente quando desativado */
  cursor: default;        /* Cursor padrão, indicando que não é clicável */
}

.paginacao button:hover:not(:disabled) {
  background-color: var(--branco-suave); /* Fundo levemente destacado ao passar o mouse */
}

.paginacao span {
  font-weight: bold;          /* Texto em negrito (ex: “Página 2 de 5”) */
  margin: 0 1rem;             /* Espaço horizontal entre números ou texto e botões */
}

@media (max-width:1024px){
  .produtos {
    grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas de largura igual (1fr cada), distribuindo os produtos uniformemente */
  }
}

@media (max-width:480px){
  .produtos {
    grid-template-columns: repeat(2, 1fr); /* Cria 2 colunas de largura igual (1fr cada), distribuindo os produtos uniformemente */
  }
}

@media (max-width:430px){

/* GRID DE PRODUTOS */
.produtos{
  padding: var(--rem-1); /* menos padding para celular */
  gap: var(--rem-075); /* espaço menor entre cards */
}

/* CARD PRODUTO */
.produto-card{
  padding: var(--rem-05); /* reduz padding interno */
}

/* IMAGEM */
.produto-card img{
  height: 130px; /* altura menor no celular */
}

/* TITULO */
/* Classe que define o tamanho do texto do título do produto */
.produto-titulo{
  font-size: 0.9rem; /* Define o tamanho da fonte do título */
}

/* DESCRIÇÃO */
/* Classe responsável pelo texto da descrição do produto */
.produto-descricao{
  font-size: 0.8rem; /* Define um tamanho menor que o título */
}

/* AVISO */
/* Classe usada para mostrar avisos ou informações adicionais do produto */
.produto-aviso{
  font-size: 0.7rem; /* Fonte ainda menor para avisos */
}

/* PREÇO */
/* Classe responsável por definir o tamanho do texto do preço */
.produto-preco{
  font-size: 0.85rem; /* Tamanho intermediário para destacar o preço */
}

/* BOTÃO CARRINHO */
/* Classe usada no botão de adicionar produto ao carrinho */
.btn-carrinho{
  padding: 0.35rem 0.7rem; /* Espaçamento interno do botão (vertical e horizontal) */
  font-size: 0.8rem; /* Tamanho do texto do botão */
}

/* PAGINAÇÃO */
/* Container que organiza os botões de navegação entre páginas */
.paginacao{
  flex-direction: column; /* Faz os elementos ficarem empilhados verticalmente */
  gap: var(--rem-05); /* Espaço entre os elementos da paginação */
  margin-top: var(--rem-1); /* Espaço acima da paginação */
  margin-bottom: var(--rem-1); /* Espaço abaixo da paginação */
}

/* BOTÕES DA PAGINAÇÃO */
/* Estiliza os botões dentro da área de paginação */
.paginacao button{
  padding: 0.35rem 0.7rem; /* Espaçamento interno dos botões */
  font-size: 0.8rem; /* Tamanho da fonte do botão */
}

/* TEXTO DA PAGINAÇÃO */
/* Estiliza o texto informativo da paginação (ex: página 1 de 5) */
.paginacao span{
  margin: 0.5rem 0; /* Espaçamento vertical acima e abaixo do texto */
}

}