.g_ .produto div.principal .botao.principal.botao-comprar{
    background:#53b555 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.g_ .produto div.principal .botao.principal.botao-comprar svg {
    width: 20px;
    display: flex;
    height: 20px;
    flex-direction: column;
    fill:#fff;
    margin:0px 5px;
}





/* Estilos do carrossel aplicados apenas em telas menores que 768px */
@media (max-width: 768px) {
    #smarthint-home-position1 img {
        max-width: 100%;
        height: auto;
        display: none; /* Esconde todas as imagens inicialmente */
    }

    #smarthint-home-position1 img.active {
        display: block; /* Mostra apenas a imagem ativa */
    }
}

.insta-sel {
    display: none !important;
}






/* Estilo para as imagens das categorias */
.devrocket-carrossel-categorias-img {
    width: 100px; /* Tamanho desejado */
    height: 100px; /* Tamanho desejado */
    border-radius: 100%; /* Torna a imagem circular */
    display: block;
    margin: 0 auto; /* Centraliza a imagem */
}

/* Estilo para o título das categorias */
.devrocket-carrossel-categorias-titulo {
    text-align: center; /* Centraliza o texto */
    margin-top: 10px; /* Espaçamento superior */
    font-size: 18px; /* Altere o tamanho da fonte conforme desejado */
    color: #64C5F6; /* Altere a cor do texto conforme desejado */
    /* Removida a propriedade duplicada margin-top */
}

/* Ajustar o espaçamento entre as categorias */
.devrocket-carrossel-categorias-item {
    margin: 10px; /* Altere o valor conforme desejado */
    background-color: #ffffff; /* Altere para a cor de fundo desejada */
    /* Para ajustar a margem inferior de cada item, se necessário, você pode especificar aqui */
}

/* Ajustar a margem superior e inferior da linha das categorias e a cor do fundo */
#carrossel-categorias {
    margin-top: 10px; /* Ajuste a margem superior conforme desejado */
    margin-bottom: 20px; /* Ajuste a margem inferior conforme desejado */
    background-color: #ffffff; /* Altere para a cor de fundo desejada */
}







/* Estilo global para os banners */
.carrossel-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.banner-item {
    flex: 1 1 auto; /* Para telas maiores, ajuste conforme necessário */
    max-width: calc(33.333% - 20px); /* Subtrai 20px para levar em consideração o espaçamento */
    box-sizing: border-box;
    padding: 10px; /* Espaçamento entre os banners */
}

.banner-img {
    width: 100%;
    height: auto;
}

/* Estilos do carrossel aplicados apenas em telas menores que 768px */
@media (max-width: 768px) {
    .carrossel-container {
        display: block;
    }

    .banner-item {
        max-width: none;
        padding: 0;
    }
}

/* Estilo para os banners fixos no desktop */
.banners-fixo-desktop-container {
    display: flex;
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    margin-top: 20px; /* Adicione um espaçamento superior conforme necessário */
}

.banner-fixo-desktop-item {
    text-align: center; /* Centraliza o conteúdo dentro de cada banner */
    margin: 0; /* Remove o espaçamento padrão */
}

.banner-fixo-desktop-img {
    max-width: 60%; /* Garante que as imagens não ultrapassem a largura do contêiner */
    height: auto; /* Mantém a proporção da imagem */
    border-left: 1px solid transparent; /* Borda esquerda transparente */
    border-right: 1px solid transparent; /* Borda direita transparente */
    margin: 0 10px; /* Espaçamento entre os banners */
}






@media only screen and (max-width: 768px) {
  .listagem-linha .span3 {
    width: 50% !important;
    float: left !important;
  }
}



.listagem-linha ul {
  display: flex;
  flex-wrap: wrap;
}

.listagem-linha .span3 {
  flex: 1 1 auto;
  max-width: calc(50% - 10px); /* Ajuste conforme necessário */
  margin: 5px; /* Ajuste conforme necessário */
}





/* Estilos para dispositivos com largura de tela menor ou igual a 768px */
@media only screen and (max-width: 768px) {
  .info-produto .nome-produto {
    font-size: 8px; /* Tamanho do título do produto para dispositivos móveis */
  }
}

/* Estilos para dispositivos com largura de tela maior que 768px */
.info-produto .nome-produto {
  font-size: 10px; /* Tamanho do título do produto para outros dispositivos */
}


.whatsapp-button {
    opacity: 0;
    animation: fadeIn 20s ease-in-out forwards;
    animation-delay: 5s; /* Altere esse valor para o tempo de delay desejado */
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}