/* 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: 20px; /* Espaçamento superior */
    font-size: 14px; /* Altere o tamanho da fonte conforme desejado */
    color: #333; /* Altere a cor do texto conforme desejado */
    margin-top: 10px; /* Ajuste o espaçamento superior conforme desejado */
}

/* Ajustar o espaçamento entre as categorias */
.devrocket-carrossel-categorias-item {
    margin: 10px; /* Altere o valor conforme desejado */
}

/* Ajustar a margem superior e inferior da linha das categorias */
#carrossel-categorias {
    margin-top: 100px; /* Ajuste a margem superior conforme desejado */
    margin-bottom: 100px; /* Ajuste a margem inferior conforme desejado */
}

/* 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 */
}
