.whatsapp-button {
  position: fixed;
  bottom: 20px; /* Ajuste conforme necessário para alinhar com o botão "Voltar ao Topo" */
  right: 12px;  /* Movido mais 1px para o centro no desktop (11px + 1px) */
  background-color: #ffffff; /* Fundo branco em estado de repouso */
  border-radius: 30px; /* Raio ajustado para 30px no desktop */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  width: 55px; /* Diâmetro aumentado em 5px no desktop (50px + 5px) */
  height: 55px; /* Diâmetro ajustado */
  padding: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.whatsapp-button img {
  width: 100%; /* A imagem ajusta-se ao botão */
  height: 100%;
  object-fit: cover;
}

/* Cor de fundo cinza claro ao passar o mouse */
.whatsapp-button:hover {
  background-color: #d3d3d3;
}

/* Cor de fundo cinza claro ao clicar */
.whatsapp-button:active {
  background-color: #d3d3d3;
}

/* Responsividade para versão mobile */
@media (max-width: 768px) {
  .whatsapp-button {
    bottom: 10px;
    right: 12px;  /* Ajustado para mover o botão mais 1px para o centro da página no mobile (11px + 1px) */
    width: 57px;  /* Diâmetro ajustado para 57px no mobile */
    height: 57px; /* Diâmetro ajustado */
    border-radius: 50%; /* Manter o raio na versão mobile */
  }

  .whatsapp-button img {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 768px) { /* Ajuste o valor conforme necessário */
  .container-categorias {
    overflow-x: auto; /* Permite rolar horizontalmente */
    white-space: nowrap; /* Evita quebra de linha */
    scroll-behavior: smooth; /* Rolagem suave */
  }

  .container-categorias-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
  }

  .categoria-item {
    flex: 1 0 33.33%; /* Exibe três itens por vez */
    box-sizing: border-box;
    /* Ajuste o tamanho dos itens se necessário */
}

}