/* Tornar a vitrine responsiva com grid */
.vitrine {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
}

.vitrine .produto {
  flex: 1 1 calc(33.333% - 20px) !important; /* 3 colunas em telas grandes */
  max-width: calc(33.333% - 20px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .vitrine .produto {
    flex: 1 1 calc(50% - 10px) !important; /* 2 colunas em tablets */
    max-width: calc(50% - 10px) !important;
  }
}

@media (max-width: 480px) {
  .vitrine .produto {
    flex: 1 1 calc(50% - 10px) !important; /* 2 colunas no mobile */
    max-width: calc(50% - 10px) !important;
  }
}

/* Ajuste do botão "Topo" para o lado esquerdo */
#btnTopo {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 1000 !important;
  background-color: #007BFF !important;
  color: #fff !important;
  padding: 10px 15px !important;
  border-radius: 5px !important;
  text-align: center !important;
  cursor: pointer !important;
}

#btnTopo:hover {
  background-color: #0056b3 !important;
}

/* Garantir que imagens na descrição do produto não fiquem achatadas */
.descricao-produto img {
  max-width: 100% !important; /* Ajusta largura para caber na tela */
  height: auto !important; /* Mantém a proporção da imagem */
  display: block !important; /* Remove possíveis margens ou espaços desnecessários */
  margin: 0 auto !important; /* Centraliza a imagem */
}

/* Melhorar layout das descrições em dispositivos menores */
@media (max-width: 768px) {
  .descricao-produto {
    padding: 10px !important;
    font-size: 14px !important; /* Ajusta tamanho da fonte */
    line-height: 1.5 !important;
  }
}