/* SEUS ESTILOS ORIGINAIS MANTIDOS */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
}
.cabecalho-categoris {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* <-- evita quebra lateral */
  width: 100%;     /* <-- ocupa toda a largura do pai */
  box-sizing: border-box;
  margin: 5px;
  padding: 10px 0;
  margin-right: 25px;
}

.categoris-nome,
.quantidade-produtos {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  word-break: break-word; /* Garante quebra de texto em nomes longos */
  margin-left: 12px;
}

/* Esconde em telas maiores que 768px */
@media (min-width: 769px) {
  .cabecalho-categoris {
    display: none;
  }
}




body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f8f6fc;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 3px;
}

.categoria {
    flex: 0 0 auto;
    background-color: #e9ecef99;
    padding: 1px 20px;
    margin-right: 15px;
    border-radius: 5px;
    white-space: nowrap;
    cursor: pointer;
    font-family: 'Poppins';
    font-size: 13px;
    line-height: 2rem 32px;
    font-weight: bold;
    transition: background-color 0.3s;
    color: #000;
}

.categoria:hover{
  color: #000;
  text-decoration: none;
  background-color: #dee2e6;
  font-weight: bold;
}

.categoria.ativa {
  background-color: #6f42c1;
  color: white;
  text-decoration: none;
}


.scroll-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
}

.produtos {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  justify-content: none;
}

@media (max-width: 600px) {
  .produtos {
    justify-content: center; /* centraliza no celular */
  }
  .produtos > * {
    flex: 0 1 90%; /* cada item ocupa quase toda a largura no celular */
    max-width: 90%;
  }
}
.produto {
  position: relative;
  background-color: white;
  border-radius: 8px;
  width: 300px;
  padding: 10px;
  text-align: center;
  transition: transform 0.2s;
  margin: 10px;
  box-shadow: 0 4px 12px rgba(106, 27, 154, 0.12);
    animation: fadeIn 0.5s 
ease forwards;
    transition: box-shadow 0.3s 
ease;
}


.produto:hover {
  transform: translateY(-5px);
}

.carrinho-icone {
  position: absolute;
  top: 190px;
  left: 20px;
  color: black;
  font-size: 20px;
}

.btn-detalhes {
  display: inline-block;
  background-color: #17a2b8;
  color: white;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 5px;
  margin-top: 10px;
  transition: background-color 0.3s;
}

.btn-detalhes:hover {
  background-color: #0b7dda;
}


.produto img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-top: 5px;
}

.produto h3 {
    font-size: 15px;
    color: #333;
    margin: 10px 0;
    font-weight: bold;
    font-family: 'Poppins';
    padding: 0px 12px;
}

.produto-preco {
  font-size: 15px;
  color: #008000;
  font-weight: bold;
}

.paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
  text-align: center;
}


.paginacao a,
.paginacao span,
.paginacao button {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  background-color: white;
  cursor: pointer;
}

.paginacao button {
  outline: none;
  box-shadow: none;
}

.paginacao button:hover:not(:disabled) {
  background-color: #6a1b9a;
  color: white;
  border-color: #dee2e6;
}

.paginacao button:disabled {
  color: #999;
  border-color: #dee2e6;
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.paginacao button.pagina-atual {
  background-color: #17a2b8;
  color: white;
  border-color: #17a2b8;
  cursor: default;
}


.barra-resultados {
  display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    /* border-bottom: 1px solid #dee2e6; */
    background-color: #f8f9fa;
    font-family: 'Poppins';
    font-size: 14px;
    margin-top: 11px;
    margin-bottom: -10px;

}


.info-resultados {
    color: #000;
    margin-left: 297px;
    font-family: 'Poppins';
    margin-bottom: 7px;


}

.ordenacao {
    margin-right: 8px;
    color: #000;
   margin-bottom: -14px;
}

.ordenacao label {
  margin-right: 8px;
  color: #000;
  
}

.ordenacao select {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.selos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.selo {
     font-family: 'Poppins';
    border: 1px solid #e9ecef;
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 13px;
}

.selos i {
  color: #c3cccfa6;
  font-size: 13px;
    border: 1px solid #e9ecef;
    padding: 4px 7px;
    border-radius: 4px;
  
  
}



/* Container do switch */
.switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between; /* <-- Alinha texto à esquerda e switch à direita */
  width: 100%;
  gap: 10px;
}


/* Oculta o checkbox padrão */
.switch-label input {
  display: none;
}

.switch-divs {
 border-radius: 5px;
    width: 230px;
    padding: 10px;
    background-color: #fff;
    /* box-shadow
Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0; omitted colors are a user agent chosen color.
Learn more
Don't show
: 0 2px 5px rgba(0, 0, 0, 0.2); */
    margin-bottom: 15px;
    border: 1px solid #ced4da;
}

.switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.switch-label input {
  display: none;
}

.switch-slider {
    width: 40px;
    height: 22px;
    background-color: rgb(138 92 247 / 30%);
    border-radius: 30px;
    position: relative;
    transition: background-color 0.3s;
    cursor: pointer;
    display: inline-block;
}

.switch-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.filtro-selo:checked + .switch-slider {
  background-color: #6a1b9a;
}

.filtro-selo:checked + .switch-slider::before {
  transform: translateX(18px);
}

.switch-text {
  font-size: 13px;
  font-family: 'Poppins';
}

.switch-description {
    font-size: 11px;
    color: #00000099;
    margin-top: 0px;
    display: block;
    font-family: 'Poppins';
}

.brev-descricao {
  display: inline-block;
  background-color: rgb(16 0 255 / 9%); /* cinza claro */
  color: #000; /* azul acinzentado */
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  margin-top: 8px;

}



.linha-superior {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #555;
  margin-bottom: 4px;
}

.status-lance {
  color: #00a650;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 8px 0;
}

.lance-atual {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 12px;
  color: #333;
  font-family: 'Poppins', sans-serif;
}

.info-produto {
  font-family: 'Poppins', sans-serif;
  padding: 12px;
  max-width: 270px;
  width: 100%; /* Permite que ela se adapte melhor */
  margin: 7px auto 0 auto; /* Centraliza horizontalmente */
  box-sizing: border-box; /* Garante que padding não ultrapasse o limite */
}


.valor {
  font-weight: bold;
}

.btn-lance {
  display: block;
    text-align: center;
    background-color: #6a1b9a;
    color: white;
    padding: 12px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
    font-family: 'Poppins';
}




.btn-lance:hover {
  background-color: #891bb4ff;
  text-decoration: none;
  color: #fff;
}

/* Estilos por tipo de selo */
.icone-novo {
  color: #007bff; /* Azul */
}

.icone-mais-vendido {
  color: #ff4500; /* Vermelho alaranjado */
}

.icone-oferta {
  color: #ffcc00; /* Amarelo */
}

.filtro-lateral{
    width: 280px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    margin-top: -68px;
    margin-bottom: 10px;
}

@media(max-width:800px) {
  .filtro-lateral{
      margin-top: -85px;
  }
}
.links-cat{
  margin-bottom: 5px;
    align-items: center;    /* Centraliza verticalmente ícone + texto */
    gap: 6px;               /* Espaço entre ícone e texto */
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.titulo-filtro{
  font-size: 0.94rem;
  font-family: 'Poppins';
  margin-bottom: 12px;
}

.cat-select{
      font-family: 'Poppins';
    font-size: 13px;
}

.explore {
  text-decoration: none;
  color: #5a2d82; /* você pode mudar essa cor */
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

.explore:hover {
  color: #8e44ad; /* cor ao passar o mouse */
  transform: translateX(5px);
  text-decoration: none; /* leve movimento para a direita */
}

@media (max-width: 768px) {
  .paginacao {
    display: none !important;
  }
}
  @media (max-width: 768px) {
    .ocultar-no-celular {
      display: none !important;
    }
  }

  .mensagem-filtro{
    font-weight: bold;
    border-radius: 3px; 
    border: 1px solid #ced4da; 
    text-align: center; 
    font-family:'Poppins'; 
    padding: 10px; 
    margin: 20px;
   height: 230px;
  }

  .categoria-container {
  position: relative;
  display: flex;
  align-items: center;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.6); /* Mais translúcido */
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Sombra mais suave */
  width: 33px;
  height: 33px;
  cursor: pointer;
  z-index: 10;
  font-size: 20px;
  color: #333;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  outline: none;
}

.scroll-btn:hover {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.scroll-btn:focus {
  outline: none;
 /* border-color: #007bff; */
}

.scroll-btn.left {
  left: 10px;
}

.scroll-btn.right {
  right: 10px;
}