/* GERAL */
    .conteiner {
        max-width: 100%;
    }
    
    #corpo .conteiner {
        padding: 0 !important;
    }
    
    .barra-inicial {
        display: none;
    }
    
    .pagination ul>.active>a {
        background: #F1BF04;
        color: black !important;
    }
    .titulo {
        font-family: 'Josefin Sans';
    }
    .borda-principal {
        border-color: #F1BF04;
    }
    .modal {
        top: 40% !important;
    }
    .caixa-info {
        border-radius: 10px;
    }
    
    /* COR DE FUNDO DOS ICONES */
    .fundo-principal,.atalhos-mobile a .botao.principal {
        background-color: #333;
    }
    
    /* ESTILOS DO BANNER PRINCIPAL */
    @media (min-width: 768px) {
        .secao-banners {
            margin-top: 120px;
        }
    }
    .secao-banners .conteiner {
        width: 100%;
    }
    .flex-direction-nav li a{
        background-color: white;
        border-radius: 50px;
    }
    
    .banner.cheio+.row-fluid {
        margin-top: 0;
    }
    
    .flex-direction-nav .flex-next, .flex-direction-nav .flex-prev {
        opacity: 0 !important;
    }
    
    
    /* Aplica a margem normalmente */
    .secao-principal.row-fluid.sem-coluna {
        margin-top: 170px;
    }
    
    .pagina-inicial .secao-principal.row-fluid.sem-coluna {
        margin-top: 0;
    }
    
    @media (max-width: 1185px) {
        .secao-principal.row-fluid.sem-coluna {
            margin-top: 220px;
        }
    
        .pagina-inicial .secao-principal.row-fluid.sem-coluna {
            margin-top: 0;
        }
    }
    
    /* ESPACAMENTOS DO BANNER PRINCIPAL E MENU SUPERIOR*/
    #cabecalho .menu.superior {
      transition: transform 0.3s ease, opacity 0.3s ease;
      transform: translateY(0);
      opacity: 1;
      position: fixed;
      width: 100%;
      z-index: 9998;
    }
    
    #cabecalho .menu.superior.oculto {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
    }
    
    .menu.superior {
        margin-top: 0px;
        background-color: #333;
    }
    
    .menu a, .menu .titulo {
        vertical-align: middle;
        font-stretch: normal;
        font-weight: bold;
    }
    
    /* borda embaixo do logo menu */
    #cabecalho .conteiner .menu.superior {
    		border-top: 0.3px solid rgba(0, 0, 0, 0.2);
    		border-top-width: 85%;
    }
    
    .conteiner .conteudo-topo.span9 {
        margin-left: 0;
        padding: 0 15px;
        width: 100%;
    }
    
    .menu li>a i.icon-chevron-down {
        margin-right: 15px;
        margin-left: 0;
    }
    
    .menu li>a i.icon-chevron-down, .menu li>a i.icon-chevron-right {
        background-color: transparent !important;
        color: black;
    }
    
    .menu li>a i.icon-chevron-down:hover, .menu li>a i.icon-chevron-right {
        background-color: transparent !important;
        color: black;
    }
    
    .menu.superior .nivel-um>li {
        border: none;
        transition: all 0.2s;
    }
    .menu.superior .nivel-um>li:hover {
        border: none;
    }
    
    @media (min-width: 768px) {
        .busca {
            width: 50% !important;
        }
    }
    
    @media (max-width: 768px) { /* Ajuste o valor conforme necessário */
        #cabecalho .conteiner .menu.superior {
            display: none !important;
    	}
    	
    	.conteudo-topo .busca-mobile .atalho-menu {
            float: right;
            line-height: 28px;
            border-radius: 50px;
    	}
    	
    	.conteiner .conteudo-topo.span9 {
            margin-top: -40px;
            margin-bottom: 10px;
    	}
    	
    	#cabecalho {
    	    position: static !important;
    	}
    	
    	.busca {
    	    margin: 0;
            position: sticky;
            top: 0;
            z-index: 999; /* garante que fique por cima dos outros elementos */
            background: #FFD100; /* evita sobreposição de conteúdo transparente */
            padding: 10px 0;
        }
    }
    
    a.atalho-menu.botao {
        background: none;
        border: none;
        top: 10px;
    }
    
    
    /* menu diminuto */
    #barraTopo .busca {
        width: 100% !important;
    }
    
    #barraTopo .busca .botao-busca {
        top: 50%;
        right: -5px;
        height: 100%;
        border-radius: 30px;
    }
    
    #barraTopo .row-fluid {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #barraTopo img {
        border-radius: 20px;
    }
    
    .busca input {
        border-radius: 20px;
        padding: 0;
        width: 96% !important;
    }
    
    /* MENU LATERAL */
    .menu.lateral {
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
        padding: 10px;
        border-radius: 5px;
        border: none;
    }
    
    .menu.lateral ul li a strong {
        font-family: 'Josefin Sans';
        color: #000;
    }
    
    .menu.lateral.outras ul li a strong {
        font-size: 16px !important;
    }
    
    .menu.lateral .com-filho.borda-principal {
        border: none;
    }
    
    .lateral.outras.filtro-coluna.faceta-marca {
        display: none;
    }
    
    .menu.lateral .nivel-um>li>a {
        box-shadow: none;
        padding: 0 !important;
        padding-right: 0;
    }
    
    .menu.lateral .nivel-um>li>a i {
        display: none;
    }
    
    .menu.lateral.fechado .nivel-um .com-filho i {
        display: block;
    }
    
    .menu.lateral.fechado .nivel-dois .com-filho i {
        margin-top: 7px;
    } 
    
    .menu.lateral.fechado .com-filho>ul {
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
    }
    
    .menu.lateral .nivel-dois {
        box-shadow: none;
        padding: 0 10px;
    }
    
    .coluna .row-fluid .span {
        display: none;
    }
    
    /* ESPACAMENTOS DA LISTAGEM DE PRODUTOS */
    .conteudo.span12 {
        padding-left: 2%;
        margin-left: 0;
    }
    .listagem .listagem-linha>ul {
        width: 100%;
    }
    
    #listagemProdutos {
        margin-top: 50px;
    }
    .listagem-item .acoes-produto {
        display: none;
    }
    
    #listagemProdutos ul.row-fluid {
      display: flex;
        justify-content: left;
        align-items: center;
        flex-wrap: wrap;
    }
    
    #listagemProdutos li {
      align-items: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    
    .ordenar-listagem.topo {
        padding: 0 10px 10px 10px;
    }
    
    .ordenar-listagem #botaoOrdenar {
        background: #F1BF04;
        transition: all 0.2s;
    }
    .ordenar-listagem #botaoOrdenar:hover {
        background: #cda103;
    }
    
    .listagem-item .produto-sobrepor {
        transition: all 0.2s;
        border-radius: 5px;
    }
    
    .listagem-item .produto-sobrepor:hover {
        box-shadow: 0 0 10px #00000033;
    }
    
    .listagem-item {
      display: flex;
      flex-direction: column;
      height: 100%; /* Faz com que o produto ocupe toda a altura disponível */
      padding: 0 !important;
      border-radius: 5px;
      margin: 10px !important;
      margin-left: 0 !important;
    }
    
    .preco-produto .preco-parcela, .preco-produto .desconto-a-vista {
        font-size: 12px;
    }
    
    .preco-produto .preco-parcela strong, .preco-produto .preco-promocional, .preco-produto .desconto-a-vista strong {
        font-size: 15px;
    }
    
    .info-produto {
      flex-grow: 1; /* Faz com que o conteúdo do produto expanda para ocupar todo o espaço */
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* Distribui os elementos uniformemente */
      text-align: center;
      background: #F5F5F5;
      border-top: 1px solid #ccc;
      border-radius: 0 0 5px 5px;
    }
    
    .bandeira-carrinho.adicionado-carrinho {
        background: #F1bF04 !important;
        color: black;
    }
    
    /* DETALHES DO TITULO DE CATEGORIA NA PAGINA INICIAL */
    .pagina-inicial .listagem .titulo-categoria {
    	background-color: #F1BF04;
    	color: black;
    	cursor: pointer;
    	border-radius: 10px 0 0 10px;
    }
    
    .pagina-inicial .listagem .titulo-categoria strong {
    	margin-left: 50px;
    }
    
    /* CONFIGURACAO DO BANNER DE WHATSAPP */
    .banner-whatsapp {
        width: 100vw;
        height: 450px;
        margin-top: 50px;
    }
    /* CONFIGURACAO PARA MOBILE DO BANNER WHATSAPP */
    @media (max-width: 767px){
        .banner-whatsapp {
            height: 150px;
        }
        
        .busca input {
            width: 94%;
        }
        
        .menu.superior .nivel-um.active {
            display: none !important;
        }
    }
    
    
    /* =============== ESTILOS DOS BLOCOS DE MINI BANNER =============== */
    .modulo .flexslider .slides li img{
        max-width: 250px;
        max-height: 250px;
        transition: all 0.6s ease-in-out;
        cursor: pointer;
    }
    .modulo .flexslider .slides li img:hover{
        transform: scale(1.05);
        box-shadow: 1px 1px 3px grey;
    }
    .flexslider .slides li {
        background: #333;
        background-image: url(https://cdn.awsli.com.br/2764/2764952/arquivos/background_carro.jpg);
        background-color: rgba(0, 0, 0, 0.7);
        background-blend-mode: darken;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .row-fluid.banner.mini-banner.hidden-phone {
        display: flex;
        justify-content: space-between;
        max-width: 100vw;
        margin-top: 30px;
        padding: 0px;
    }
    @media (min-width: 768px) {
        .flexslider .slides {
            margin: 90px 0 0 0;
        }
        .flexslider .slides img {
            max-width: 80% !important;
            width: fit-content;
            margin: 0 auto;
            max-height: 70vh;
        }
    }
    @media (min-width: 1100px) {
        .flexslider .slides {
            margin: 40px 0 0 0;
        }
    }
    
    /* =============== ESTILOS DO CABECALHO E TAMANHO DO BLOCO DE CARRINHO =============== */
    #cabecalho {
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background: #F1BF04 !important;
        z-index: 9998;
    }
    #cabecalho .conteiner{
        padding: 0px;
        box-shadow: none !important;
    }
    #cabecalho .conteiner .row-fluid {
        background-color: #F1BF04;
    }
    #cabecalho .conteiner .menu.superior {
        padding: 5px;
        display: flex;
        justify-content: center;
        background-color: #F1BF04;
    }
    #cabecalho .conteiner .menu.superior ul.nivel-um {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        font-family: "Josefin Sans", sans-serif;
    }
    .menu.superior .nivel-um>li {
        float: none !important;
    }
    #barraTopo {
        background-color: #F1BF04;
        height: auto !important;
        padding: 10px;
        z-index: 50;
    }
    
    
    #barraTopo .conteiner {
        padding: 0;
    }
    
    #barraTopo .conteiner .row-fluid .span3 .canais-contato ul li a{
        font-size: 16px;
        color: black;
    }
    #barraTopo .conteiner .row-fluid .span3 .canais-contato ul li a:hover {
        color: black;
        text-decoration: none;
    }
    
    .carrinho {
        border: none;
    }
    
    .carrinho a {
        position: relative;
    }
    
    .carrinho a span {
        display: none !important;
    }
    
    #barraTopo .carrinho>a span {
        padding-left: 10px;
        line-height: 40px;
        display: none !important;
    }
    
    .carrinho>a strong {
        font-size: 13px;
        font-family: 'Roboto';
        margin: 0;
        line-height: normal;
        background: white;
        width: 20px;
        height: 20px;
        text-align: center;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -6px;
        right: -6px;
        /* border-style: double; */
        /* border: 2px solid black; */
        box-shadow: 0 1px 10px #000000AA;
    }
    
    #barraTopo .carrinho>a i {
        height: 40px;
        width: 40px;
        line-height: normal;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    @media (min-width: 1200px) {
        #barraTopo .row-fluid .span3 {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    
    /* =============== AJUSTAR O RODAPE AO CENTRO =============== */
    .pagamento-selos {
        display: flex;
        background: #FFF !important;
    }
    .pagamento-selos .conteiner {
        width: 100%;
    }
    .pagamento-selos .conteiner .row-fluid {
        display: flex;
        justify-content: center;
        gap: 50px;
    }
    @media (max-width: 767px){
        .pagamento-selos .conteiner .row-fluid {
            gap: 20px;
        }
    }
    
    
    
    /* ===============  AJUSTAR RESPONSIVIDADE EXTRAS =============== */
    @media (max-width: 767px) {
        .row-fluid.banner.hidden-phone {
            display: flex !important;
        }
        .span12.banner.tarja img {
            height: 50px;
            width: 100%;
        }
        .span12.banner.tarja {
    		display: none;
    	}
        
        .row-fluid.banner.mini-banner.hidden-phone {
        display: flex !important; /* Define o contêiner como flexível */
        flex-wrap: wrap; /* Permite que os itens se movam para a próxima linha */
        gap: 20px; /* Espaçamento entre os itens */
        padding: 0; /* Remove preenchimento */
        }
        
        .row-fluid.banner.mini-banner.hidden-phone .modulo.span4 {
            flex: 0 0 calc(50% - 10px); /* Define a largura de cada módulo como 50% menos o espaço */
            box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
        }
        
        .row-fluid.banner.mini-banner.hidden-phone img {
            width: 100%; /* Faz com que as imagens ocupem 100% da largura do módulo */
            height: auto; /* Mantém a proporção da imagem */
            max-width: none; /* Remove qualquer limitação de largura máxima */
        }
        
        .secao-banners .conteiner {
            padding: 0; /* Remove preenchimento */
        }
        
        #smarthint-home-position3, #blank-home-position3, .row-fluid:before {
            display: none; /* Oculta elementos indesejados */
        }
    }
    
    
    /* =============== BANNERS TARJA =============== */
    .banner-tarja-1, .banner-tarja-2 {
        width: 100%;
        margin-top: 20px;
    }
    
    /* =============== BOTAO VOLTAR A HOME NA PAGINA DE BUSCA ONDE NAO ENCONTROU RESULTADOS =============== */
    a.botao.secundario {
        background-color: #333;
        color: white;
    }
    
    
    /* =============== Configs Cabecalho =============== */
    #cabecalho > .conteiner > .row-fluid {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #F1BF04; /* Preto como fundo principal */
        width: 100%;
    }
    .superior.hidden-phone {
        display: none !important;
    }
    
    #cabecalho .span3 {
        width: 200px;
    }
    
    .atalhos-mobile a:hover {
        color: #F1BF04;
        background-color: transparent !important;
    }
    
    .atalhos-mobile a {
        top: 2px;
        font-size: 22px;
    }
    
    @media (max-width: 767px){
        #cabecalho .conteiner .row-fluid{
            display: flex;
            flex-direction: column;
        }
        
        .atalhos-mobile {
            border: 0px;
            margin: 0px;
        }
        
        .atalhos-mobile a {
            font-size: 18px;
        }
        
        #cabecalho .span3 {
            height: 75px;
        }
    }
    
    /* =============== Barra Superior e Inferior =============== */
    .inferior.row-fluid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0;
    }
    
    .inferior.row-fluid .span4 {
        width: auto;
    }
    
    .inferior > * {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Remover flex: 1 para que os elementos não ocupem o mesmo espaço */
    }
    
    .inferior .about-us,
    .inferior .acoes-conta,
    .inferior .carrinho {
        flex-grow: 0; /* Impede que esses itens cresçam e ocupem mais espaço do que o necessário */
        flex-shrink: 1; /* Permite que encolham se necessário */
    }
    
    .inferior .about-us a {
        color: black;
    }
    
    .inferior .about-us a:hover,
    .inferior .acoes-conta li .cor-secundaria:hover,
    .inferior .carrinho a span:hover {
        text-decoration: none;
    }
    
    .inferior .acoes-conta li {
        width: 100% !important;
    }
    
    /* =============== Barra de Buscar =============== */
    .span8.busca-mobile {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0;
        justify-content: end;
    }
    
    .busca form {
        width: 100%;
    }
    
    .busca {
        display: flex;
        align-items: center;
        position: relative;
        width: 30%;
        margin-right: auto;
        background: #F1BF04;
        border: none;
    }
    
    #auto-complete {
        padding: 10px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        border-bottom: 1px solid black;
        position: relative;
        font-family: "Josefin Sans", sans-serif;
    }
    
    #auto-complete::placeholder {
        color: #000;
    }
    
    .botao.botao-busca.icon-search.fundo-secundario {
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 30px;
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: black;
        background-image: none;
        border: none;
        cursor: pointer;
    }
    
    @media (max-width: 767px) {
        .span8.busca-mobile {
            width: 100%;
            background: #F1BF04;
        }
    
        .busca {
            width: 100%;
            padding: 0 10px;
        }
    }
    
    
    /* =============== Sobre Nós =============== */
    .inferior .about-us {
        border: none;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 10px;
        width: 40%;
    }
    .inferior .about-us a {
        font-black: 16px;
        color: black; /* Fonte branca em fundo preto */
        text-transform: uppercase;
    }
    
    /* =============== Minha conta =============== */
    .inferior .acoes-conta {
        float: none;
        padding: 0px;
        border: none;
        margin: 0 20px 0 0;
        width: fit-content;
        background: #F1BF04;
    }
    
    .inferior .acoes-conta li .cor-secundaria {
        border: none;
        font-weight: normal;
        font-size: 18px;
        font-family: 'Josefin Sans';
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: fit-content;
    }

    .icon-user.fundo-principal {
        width: 40px;
        height: 40px;
        color: #000;
        background: none !important;
        font-size: 26px;
        line-height: 40px;
        margin-right: 0;
    }
    
    /* =============== Carrinho =============== */
    .icon-shopping-cart.fundo-principal {
        color: black;
        background: none !important;
    }
    .carrinho.vazio a span {
        text-transform: uppercase;
        font-size: 16px;
        color: black;
        width: fit-content;
        margin-left: 45px;
        display: none !important;
    }
    
    .carrinho.vazio {
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        width: fit-content;
    }
    
    @media (min-width: 1200px) {
        .inferior .span4 {
            margin: 0px;
            width: fit-content;
        }
    }
    /*=================== Responsividade Cabeçalho ===================*/
    @media (max-width: 767px) {
        .inferior {
            flex-direction: column; /* Muda para coluna nas telas pequenas */
            align-items: center;
        }
        
        .superior, .inferior {
            align-items: center;
            text-align: center;
        }
    
        .inferior > * {
            margin-bottom: 10px; /* Adiciona espaçamento entre os itens */
        }
    }
    
    @media only screen and (max-width: 767px) {
        .logo a {
            height: 7rem;
        }
        
        .conteiner .logo {
            position: relative;
            margin: 0;
            top: -40px;
            left: 0;
            z-index: 1000;
        }
        
        .inferior .about-us, .inferior .acoes-conta {
            display: none;
        }
    }
    
    #rodape .institucional {
    	background-color: #111111;
    	background-position: top center;
    	background-repeat: repeat;
    	display: none;
    }
    
    /* =============== Estilização do menu principal =============== */
    /** Trecho de código CSS feito para Estilização do menu principal autor: Pedro Lucas, ultima modificação: 09-10-2024, criado em: 08-10-2024 **/
    /** Estilização do menu principal **/
    .menu-principal {
        display: flex; /* Exibe os itens em linha */
        flex-direction: row; /* Alinha os itens na horizontal */
        justify-content: space-between;
        max-width: 100%;
        gap: 20px;
        padding-top: 15px; /* Espaçamento superior */
        padding-bottom: 15px; /* Espaçamento inferior */
        font-size: 12px; /* Tamanho da fonte para os itens */
        position: relative; /* Define a posição relativa para alinhar menus secundários */
        background-color: #F1BF04;
    }
    
    /** Estilização dos itens do menu principal **/
    .item-menu-principal {
        display: flex; /* Exibe os itens em linha */
        justify-content: center; /* Centraliza o conteúdo dentro do item */
        position: relative; /* Define a posição relativa para elementos filhos */
        padding: 0;
        transition: all 0.2s ease-in-out; /* Transição suave ao mudar propriedades */
    }
    
    .menu li {
        padding: 0;
    }
    
    #cabecalho .menu .nivel-dois {
        padding: 0;
        border-radius: 5px;
    }
    
    /* Estilização da busca lateral*/
    .menu .nivel-dois a {
        color: black;
        line-height: normal;
        margin-right: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
        align-items: center;
        text-align: start;
        line-height: 15px !important;
        font-family: 'Josefin Sans';
    }
    
    .menu .nivel-dois .com-filho i {
        margin-top: 0;
        display: block;
        position: inherit;
        order: 2;
    }
    
    .menu .nivel-dois .com-filho>a {
        margin-right: 0;
    }
    
    .menu .nivel-tres {
        border-radius: 5px;
    }
    
    /** Estilo padrão dos links dentro dos itens do menu principal **/
    .item-menu-principal a {
        color: black;
        font-family: Poppins, Arial, sans-serif; /* Fonte utilizada */
        font-size: 12px; /* Tamanho do texto dos links */
        padding: 5px;
    }
    
    /** Efeito ao passar o mouse sobre os itens do menu principal **/
    .item-menu-principal:hover {
        padding-top: 5px; /* Ajusta o padding superior para criar um efeito de movimento */
        border-bottom: 0.8px solid black; /* Adiciona uma borda inferior ao passar o mouse */
    }
    
    /** Estilização do menu secundário que aparece ao passar o mouse **/
    .menu-secundario {
        display: none; /* Oculta o menu secundário por padrão */
        background-color: white; /* Fundo branco para o menu secundário */
        flex-direction: column; /* Alinha os itens do menu secundário na vertical */
        position: absolute; /* Posiciona o menu secundário em relação ao item pai */
        top: calc(100% + 2px); /* Posiciona o menu secundário logo abaixo do item principal */
        justify-content: flex-start; /* Alinha os itens no topo */
        gap: 4px; /* Espaço entre os itens do menu secundário */
        z-index: 1; /* Garante que o menu secundário apareça sobre outros elementos */
        min-width: 100%;
        width: fit-content;
        text-align: center;
        border-radius: 0 0 10px 10px;
    }
    
    .logo a {
        height: 100px;
    }
    
    .logo a img {
        border-radius: 20px;
    }
    
    /** Estilo padrão dos links dentro do menu secundário **/
    .menu-secundario a {
        padding: 5px;
        color: black;
    }
    
    /** Muda a cor do texto dos links do menu secundário quando o mouse está sobre eles **/
    .menu-secundario a:hover {
        background: #eee; /* Cor do texto ao passar o mouse (preto) */
    }
    
    /** Estilização adicional para a classe .row-fluid **/
    .row-fluid {
        color: black; /* Cor do texto */
        font-family: Poppins, Arial, Helvetica, sans-serif; /* Fonte utilizada */
        font-size: 15px; /* Tamanho do texto */
    }
    
    /* ========== Estilização do menu principal no mobile ============ */
    
    @media screen and (max-width: 768px) { 
        /* Aplica os estilos dentro das chaves quando a largura da tela é de no máximo 768px */
        
        .menu-principal {
            display: none; /* O menu principal não será exibido em dispositivos móveis */
        }
        
        .span12.banner.tarja {
            display: none; /* Oculta a faixa de banner em telas menores */
        }
    }
    
    /* Estilo para o menu principal em dispositivos móveis */
    .menu-principal-mobile {
        width: 100%; /* O menu ocupa toda a largura da tela */
        height: 100%; /* O menu ocupa toda a altura da tela */
        position: fixed; /* O menu é fixo, ocupando a tela inteira */
        top: 0; /* Alinhado ao topo da tela */
        left: 0; /* Alinhado à esquerda da tela */
        display: flex; /* Utiliza flexbox para centralizar os itens */
        background-color: rgba(255, 255, 255, 0.8); /* Fundo branco com opacidade */
        z-index: 1000; /* Coloca o menu acima dos outros elementos */
        justify-content: center; /* Centraliza os itens horizontalmente */
        align-items: center; /* Centraliza os itens verticalmente */
    }
    
    /* Estilo para cada item do menu principal no modo móvel */
    .item-menu-principal-mobile {
        margin-bottom: 15px; /* Espaçamento abaixo de cada item do menu */
        text-align: center; /* Centraliza o texto do item */
    }
    
    /* Estilo para os links dos itens do menu principal */
    .item-menu-principal-mobile a {
        font-size: 20px; /* Tamanho da fonte dos links */
        font-weight: bold; /* Fonte em negrito */
        color: black; /* Cor do texto dos links */
    }
    
    /* Estilo para o menu secundário em dispositivos móveis */
    .menu-secundario-mobile {
        display: none; /* O menu secundário não será exibido inicialmente */
        margin-right: 20px; /* Margem à direita */
        margin-top: 10px; /* Margem no topo */
        gap: 10px; /* Adiciona espaçamento entre os itens do menu secundário */ 
    }
    
    .item-menu-secundario-mobile {
        gap: 5px; /* Espaço entre os itens do submenu */
    }
    
    /* Estilo para os links do menu secundário */
    .menu-secundario-mobile a {
        font-weight: normal; /* Fonte normal (não em negrito) */
        font-size: 20px; /* Tamanho da fonte dos links */
    }
    
    /* Estilo para o botão de fechar o menu */
    .botao-fechar {
        position: absolute; /* Posição absoluta em relação ao menu */
        padding: 10px; /* Espaçamento interno do botão */
        top: 10px; /* Distância do topo da tela */
        right: 20px; /* Distância da direita da tela */
        background: black; /* Fundo preto do botão */
        border: none; /* Sem borda */
        border-radius: 20px; /* Bordas arredondadas */
        font-size: 30px; /* Tamanho da fonte do botão */
        cursor: pointer; /* Cursor em forma de ponteiro ao passar sobre o botão */
        color: white; /* Cor do texto do botão */
    }
    
    /* Estilo da seta */
    .seta {
        display: inline-block; /* Exibe a seta como um bloco em linha */
        width: 0; /* Largura inicial da seta */
        height: 0; /* Altura inicial da seta */
        margin-left: 5px; /* Espaço à esquerda da seta */
        vertical-align: middle; /* Alinha verticalmente a seta com o texto */
        border-left: 5px solid transparent; /* Cria uma borda esquerda transparente para formar a seta */
        border-right: 5px solid transparent; /* Cria uma borda direita transparente para formar a seta */
        border-top: 5px solid #000; /* Cor da seta */
        transition: transform 0.5s ease; /* Transição suave ao rotacionar a seta */
    }
    
    /* Rotaciona a seta quando o menu está aberto */
    .item-menu-principal-mobile.open .seta {
        transform: rotate(180deg); /* Rotaciona a seta em 180 graus quando o menu está aberto */
    }
    
    /* ========== Estilização do conteiner das 4 imagens ============ */
    /* Estilo para o contêiner do banner */
    .row-fluid.banner.mini-banner.hidden-phone {
        display: flex; /* Define o contêiner como flexível */
        flex-wrap: wrap; /* Permite que os itens se movam para a próxima linha */
        gap: auto; /* Espaçamento entre os itens */
        padding: 0; /* Remove preenchimento */
        justify-content: center; /* Centraliza os itens horizontalmente */
    }
    
    /* Estilo para dispositivos desktop */
    @media (min-width: 769px) {
        .row-fluid.banner.mini-banner.hidden-phone {
            flex-direction: row; /* Organiza os itens em uma única linha */
            justify-content: center; /* Centraliza as imagens */
        }
    
        .row-fluid.banner.mini-banner.hidden-phone .modulo.span4 {
            flex: 0 0 calc(25% - 50px); /* Define a largura de cada módulo como 25% menos o espaço */
            margin-bottom: 20px; /* Aumenta o espaço abaixo de cada linha */
        }
    }
    
    /* Estilo para dispositivos móveis */
    @media (max-width: 768px) {
        .row-fluid.banner.mini-banner.hidden-phone {
            flex-direction: row; /* Organiza em linha, mas terá duas colunas */
        }
    
        .row-fluid.banner.mini-banner.hidden-phone .modulo.span4 {
            flex: 0 0 calc(50% - 10px); /* Define a largura de cada módulo como 50% menos o espaço */
            margin-bottom: 20px; /* Aumenta o espaço abaixo de cada linha */
        }
    }
    
    /* Estilo para as imagens */
    .row-fluid.banner.mini-banner.hidden-phone img {
        width: 100%;
        height: auto;
        max-width: none;
        margin-top: 50px;
    }
    
    /* Estilo para o contêiner de banners */
    .secao-banners .conteiner {
        padding: 0; /* Remove preenchimento */
    }
    
    /* Oculta elementos indesejados */
    #smarthint-home-position3, #blank-home-position3, .row-fluid:before {
        display: none; /* Oculta elementos indesejados */
    }
    
    
    
    /* ========== Estilização do link do whatsapp ============ */
    .li-whatsapp a {
        position: fixed; /* O elemento é posicionado em relação à janela de visualização (viewport) */
        right: 16px; /* Define a distância do lado direito da janela de visualização */
        bottom: 22px !important; /* Define a distância do fundo da janela de visualização */
        display: flex; /* Utiliza o modelo de caixa flexível para alinhar os itens dentro do elemento */
        align-items: center; /* Alinha verticalmente os itens ao centro */
        justify-content: center; /* Alinha horizontalmente os itens ao centro */
        width: 50px !important; /* Define a largura do elemento */
        height: 50px !important; /* Define a altura do elemento */
        border-radius: 100%; /* Aplica bordas arredondadas, transformando o elemento em um círculo */
        background-image: linear-gradient(to right, #209142, #56d263); /* Cria um fundo com um gradiente que vai do verde escuro para o verde claro */
        text-decoration: none; /* Remove a sublinha padrão dos links */
        z-index: 99; /* Define a ordem do elemento em relação a outros elementos sobrepostos; valores mais altos aparecem por cima */
    }
    
    .li-whatsapp i {
        font-size: 32px !important; /* Define o tamanho da fonte (ícone) dentro do elemento */
        color: #fff; /* Define a cor do ícone como branco */
    }
    
    /* ========== css para ajustes ============ */
    .listagem .listagem-linha li {
        border-style: none !important;
    }
    
    @media only screen and (max-width: 767px) {
        .listagem-linha li {
            margin-top: 0;
            width: 50% !important;
        }
    }
    
    .listagem .titulo-categoria {
        font-size: 23px;
    }
    
    
    /* ========== Estilo do botão voltar ao topo ============ */
    .scrollToTop {
        position: fixed;
        z-index: 999;
        bottom: 100px;
        right: 1rem;
        background: black;
        color: #000;
        display: block;
        width: 54px;
        height: 54px;
        text-align: center;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
        border-radius: 150px;
        padding: 0 6px;
        text-transform: uppercase;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        text-decoration: none;
    }
    
    /* Ajustes de espaçamento e fonte do texto */
    .scrollToTop span {
        font-size: 12px;
        font-weight: 600;
        font-family: Poppins, arial, helvetica;
        color: white;
        text-decoration: none;
        margin-top: 13px;
    }
    
    /* Estilo do ícone */
    .scrollToTop i {
        font-size: 2em;
        font-weight: 600;
        color: white;
    }
    
    /* Efeito hover */
    .scrollToTop:hover {
        background: white;
        color: black;
        text-decoration: none;
    }
    
    .scrollToTop:hover i,
    .scrollToTop:hover span {
        color: black;
    }
    
    /* Responsividade para telas menores (smartphones) */
    @media (max-width: 768px) {
        .scrollToTop {
            width: 45px;
            height: 45px;
            bottom: 4rem;
            right: 1rem;
        }
    
        .scrollToTop i {
            font-size: 1.2em;
        }
    
        .scrollToTop span {
            font-size: 11px;
        }
    }
    
    /* Responsividade para telas muito pequenas (smartphones em modo paisagem) */
    @media (max-width: 480px) {
        .scrollToTop {
            width: 40px;
            height: 40px;
            bottom: 3rem;
            right: 0.5rem;
        }
    
        .scrollToTop i {
            font-size: 1.2em;
        }
    
        .scrollToTop span {
            font-size: 10px;
        }
    }
    
    .span4.selos ul {
    	display: flex;
    	flex-direction: column;
    }
    .span4.selos ul br {
    	display: none;
    }
    
    /* ========== Estilização da tela de confirmar compra ============ */
    
    tr th:last-child, tr td:last-child {
        min-width: 100px;
        font-family: 'Roboto';
    }
    
    tr th:first-child, tr td:first-child {
        width: 100%;
    }
    
    .pagina-carrinho.carrinho-checkout .acao-editar .selo-ssl {
        display: none;
        text-align: center;
        position: static;
    }
    
    button#finalizarCompra {
        font-size: 22px;
        width: 80%;
    }
    
    button#finalizarCompra i {
        display: none;
    }
    
    .atributos ul li a:hover, .atributos ul li.active a, .tema-escuro .nav-tabs li.active a, .elastislide-carousel ul li.active a {
        border-color: #555;
        width: fit-content;
    }
    .pagina-carrinho.carrinho-checkout #cabecalho .conteiner .row-fluid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: fit-content;
    }
    
    .pagina-carrinho table th {
        border: none;
        font-family: 'Josefin Sans';
    }
    .pagina-carrinho table th h6 {
        font-size: 16px;
        color: #000;
    }
    
    .pagina-carrinho .secao-principal.row-fluid.sem-coluna {
        margin-top: 100px;
    }
    .pagina-carrinho #finalizarCompra {
        padding: 10px !important;
    }
    #formularioCheckout .row-fluid:first-child {
        display: flex;
        flex-direction: column !important;
    }
    #formularioCheckout .span4 {
        width: 100%;
        margin-left: 0;
    }
    .carrinho-checkout .atendimento, .clean-layout .atendimento {
        border-width: 1px;
        border-style: none;
        padding: 5px;
        margin: auto;
        display: none;
    }
    tr.bg-dark.tr-checkout-total {
        font-weight: bold;
    }
    
    tr.bg-dark.tr-checkout-total strong {
        font-weight: bold;
    }
    @media (min-width: 768px) {
        .pagina-carrinho.carrinho-checkout .campos-pedido .campos-pedido {
            display: flex;
            position: relative;
            align-items: flex-start;
        }
            
        .pagina-carrinho.carrinho-checkout .campos-pedido .campos-pedido > .row-fluid {
            order: 2;
            position: sticky;
            top: 120px;
            background: #fff;
            z-index: 50;
            width: 40vw;
            padding: 20px;
        }
        
        .pagina-carrinho.carrinho-checkout .campos-pedido .campos-pedido #formularioCheckout {
            width: 60vw;    
        }
    }
        
    @media (max-width: 768px) {
        .campos-pedido h2 {
            margin-top: 0 !important;
        }
        .pagina-carrinho .tr-checkout-frete {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: right;
            padding: 0 20px;
            font-size: 16px;
        }
        .pagina-carrinho.carrinho-checkout .conteiner .logo {
            top: 0;
        }
        #cabecalho .span3 {
            height: 110px;
            width: 100px;
        }
    }
    
    /* ====== Ajuste de banners ======= */
    .pagina-inicial .element.style {
        width: 100% !important;
        margin-top: 70px !important;
    }
    /* ====== Botão de Sair ===========*/
    /* Estilos gerais para botões */
    .botao {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom-color: rgba(0, 0, 0, 0.2);
        color: black;
        font-size: 14px;
        line-height: normal;
        text-transform: none;
        padding: 6px 14px;
        display: inline-block;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        background-color: #bbb;
        white-space: nowrap;
        border-radius: 5px;
    }
    
    .botao:hover {
        background-image: none;
    }
    
    .pagina-pedido-listar .sairButton {
        padding: 6px;
        margin-left: 10px;
    }
    
    /* Estilos específicos para o botão "Sair" */
    .sairButton, .pagina-pedido-listar .sairButton {
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom-color: rgba(0, 0, 0, 0.2);
        color: darkred;
        font-size: 16px;
        line-height: normal;
        text-transform: none;
        display: inline-block;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        background-color: transparent;
        border: none;
        white-space: nowrap;
        transition: all 0.2s;
    }
    
    .sairButton:hover, .pagina-pedido-listar .sairButton:hover {
        color: #fff;
        background: darkred;
        text-decoration: none;
    }
    
    .acao-editar a {
        gap: 10px; /* Define um espaçamento de 10px entre os links (para uso em layout flexível, se necessário) */
        margin: 10px; /* Adiciona uma margem de 10px ao redor dos links */
    }
    /* esconde o botão de sair da pagina do carrinho*/
    .pagina-carrinho .sairButton {
    	display: none;
    }
    /* ========= Pagina de Login e Cadastro ====== */
    
    /* Adiciona espaco na base do conteiner */
    .pagina-login .conteiner-principal .conteiner {
        padding-bottom: 50px;
    }
    
    /* Ajusta e centraliza o titulo da pagina */
    .cadastro .cabecalho-interno .span12 h1{
    	display: flex;
    	justify-content: center;
    	flex-direction: column;
    	text-align: center;
    }
    
    
    /* Alinha os blocos Login e Cadastro */
    .cadastro-logar {
    	margin-top: 50px;
    	display: flex;
    	justify-content: center;
    	gap: 5%;
    	margin: 20px;
    }
    
    /* Ajusta dimensao e posicao dos blocos */
    .cadastro .cadastro-logar .span6 {
        width: 50%;
        height: 100%;
        justify-content: center;
    }
    
    .cadastro .cadastro-logar .span6 .caixa-sombreada{
    	border: none;
    	box-shadow: none;
      padding: 0px;
      width: 100%;
    }
    
    /* Alinha o titulo do bloco e ajusta os botoes */
    .pagina-login fieldset .titulo {
    	text-align: center;
    }
    .pagina-login fieldset .botao {
    	width: 100%;
    	padding: 5px;
    	margin: 0px;
    	margin-top: 25px;
    }
    
    /* Ajusta os inputs do bloco de login */
    .pagina-login .control-group .controls {
        margin: 0px;
    }
    .pagina-login .controls input {
        width: 100%;
        border: 0px;
        border-bottom: 0.5px solid darkgrey;
        box-shadow: none;
        border-radius: 0px;
    }
    .pagina-login #id_senha {
    	padding: 0px;
    }
    
    /* Add borda e ajusta o input do cadastro */
    .pagina-login fieldset .span8 {
        border: 0px;
        border-bottom: 0.5px solid darkgrey;
        border-radius: 0px;
        width: 100%;
        box-shadow: none;
    }
    
    /* Deixa os elementos um abaixo do outro */
    .pagina-login .control-group {
        display: flex;
        flex-direction: column;
    }
    .pagina-login .controls {
        display: flex;
        flex-direction: column;
    }
    
    /* Ajusta o link de redefinicao */
    .pagina-login .recuperar-senha {
        margin-top: 16px;
        margin-left: 0px;
        text-align: center;
    }
    
    .cadastro {
        margin-top: 170px;
    }
    
    /* Ajusta o tamanho do input email no bloco cadastro */
    @media (min-width: 1200px) {
        .pagina-login .row-fluid #id_email {
           width: 100%;
        }
    }
    
    /* Estilos de Login / Cadastro para mobile*/
    @media screen and (max-width: 767px){
    	.pagina-login #cabecalho .conteiner .row-fluid {
        height: auto; 
    	}
    	
    	.pagina-login .cadastro-logar {
    	  margin-top: 20px;
    	  display: flex;
    	  justify-content: center;
    	  flex-direction: column;
    	  gap: 30px;
    	}
    	
    	.cadastro .cadastro-logar .span6 {
        width: auto;
        height: auto;
        justify-content: center;
    	}
    	
    	.pagina-login .conteiner-principal .conteiner {
        padding-bottom: 20px;
    	}
    	
    	.pagina-login fieldset .recuperar-senha {
    		display: flex;
    		justify-content: center;
    	}
    	
    	.cadastro {
    	    margin-top: 0;
    	    padding: 20px;
    	}
    }
    /* ============================================================== */
    .caixa-sombreada {
        padding: 20px;
        box-shadow: none !important;
    }
    
    .atalhos-mobile {
        display: none;
    }
    /* ============= ajuste dos icones mobile (perfil, carrinho e home) =============== */
    @media (max-width: 768px) {
        .atalhos-mobile {
            display: block;
        	position: absolute; 
        	width: 100% !important; 
        	right: 0; 
        }
        
        .atalhos-mobile li {
            border: none;
            transition: all 0.2s;
        }
        
        .atalhos-mobile li:hover {
            color: #F1BF04;
        }
        
        .atalhos-mobile .icon-home {
            display: none !important;
        }
    }
    
    /* ============================================================== */
    /* =========== alinha itens do menu secundario =============== */
    #barraTopo .canais-contato {
        /* display: flex;
        align-items: center;
        justify-content: center;
        margin-left: -80px; */
        display: none;
    }
    
    #barraTopo .canais-contato ul li {
      line-height: normal;
      float: none;
      margin: 0;
      padding: 0;
      border: none;
    }
    #barraTopo .canais-contato ul {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      
    }
    #barraTopo .row-fluid .span6.hidden-phone {
        width: fit-content;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* ============================================================== */
    
    /* =========== ajuste de produtos na home =============== */
    .conteiner-parcelamento {
    	display: flex;
    	flex-direction: column;
    	margin-bottom: 10px;
    }
    .parcelamento-img {
    	width: 30px;
    	height: 20px;
    }
    
    .pagina-inicial .acoes-produto-responsiva a .titulo {
        color: black;
        font-weight: bolder;
    }
    
    .acoes-produto-responsiva .tag-comprar i {
        display: none;
        /* Esconde todos os ícones dentro da tag-comprar */
    }
    
    .listagem .listagem-item .acoes-produto-responsiva {
        display: none !important;
        background: #F1BF04;
        text-align: center;
        position: static;   
        padding: 5px;
    }
    
    .tag-comprar .titulo {
        color: #000 !important;
    }
    
    .listagem .listagem-item .acoes-produto-responsiva .tag-comprar {
        background: #F1BF04;
    }
    
    .listagem-item.produto-adicionado .bandeiras-produto .adicionado-carrinho {
        background: black;
        border: none;
        border-radius: 10px;
    }
    
    .listagem-item.indisponivel {
        display: none !important;
    }
    /* ============================================================== */
    
    .breadcrumbs {
        /* border-style:solid; */
        border: none;
        padding: 10px 0;
        margin: 0 0 20px
    }
    
    /* ============= modifica pagina de produto ======================= */
    /* tamanho da fonte de codigo e marca na pag produto */
    .pagina-produto .codigo-produto {
    	font-size: 20px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        flex-direction: column-reverse;
    }
    
    .produto .codigo-produto .cor-secundaria:first-child {
        font-size: 16px;
    }
    
    .pagina-produto .zm-viewer {
        background: #FFF;
    }
    
    .produto .principal {
        padding: 20px;
    }
    
    .produto .span6 .produto-compartilhar {
        display: none;
    }
    
    .compartilhar-redes a[href*="wa.me"] .icone-rede {
      width: 30px;
      height: 30px;
    }
    
    /* ajustar alinhamento da marca na pagina produto */
    .pagina-produto .produto .codigo-produto>span+span {
        display: block;
        margin-top: 0px;
    }
    
    /* exibir titulo na pagina de produto */
    .pagina-produto .nome-produto {
    	display: block;
    	font-size: 2rem;
    	font-family: "Roboto";
    }
    
    /* corrigir imagem ativa nas miniaturas do produto */
    .pagina-produto .miniaturas li.active a{
    	width: auto;
    }
    
    .pagina-produto .conteiner-imagem {
        width: 100%;
    }
    
    .produto .conteiner-imagem img {
        width: 100%;
        height: 100%;
    }
    
    .produto .acoes-produto {
        display: flex;
        flex-direction: column;
    }
    
    .produto .listagem.aproveite-tambem {
        padding: 0 20px;
    }
    
    .produto .acoes-flutuante {
        top: 20% !important;
        height: max-content;
    }
    
    .produto .acoes-flutuante .nome-produto {
        max-width: 100% !important;
    }
    
    .produto .comprar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        float: none !important;
    }
    
    .produto .comprar .principal {
        margin-right: auto;
    }
    
    .produto .comprar .qtde-adicionar-carrinho {
        width: 30% !important;
        max-width: 80px !important;
        min-width: 60px !important;
    }
    
    .produto .comprar .disponibilidade-produto {
        flex-basis: 100%;
        width: 100%;
        order: 2;
        display: flex !important;
        flex-direction: column;
        align-items: start;
        font-size: 13px !important;
    }
    
    .produto .comprar .qtde-carrinho-title {
        display: none !important;
    }
    
    .produto .comprar .qtde-carrinho {
        height: 100%;
        border-radius: 10px;
        font-size: 22px !important;
        font-weight: bold;
    }
    
    @media only screen and (max-width: 767px) {
        .produto .comprar .botao-comprar {
            width: auto;
            min-width: 200px;
            float: left;
            padding: 0;
            line-height: 50px;
        }
    }
    
    /* ============================================================== */
    /* ========== Ajusta botões na pagina de perfil e meus pedidos ============== */
    .abas-conteudo.borda-alpha, .abas-conta.borda-alpha .active, .abas-conta li.active a {
        background: #f9f9f9;
    }
    
    .abas-conteudo.borda-alpha .caixa-info {
        background: #FFF;
    }
    
    .abas-conteudo.borda-alpha .acao-editar {
        display: flex;
        flex-direction: column;
    }
    
    .pagina-conta .caixa-info {
        font-size: medium;
    }
    
    .pagina-conta .sairButton {
    	border-radius: 5px;
    	padding: 5px 10px;
    }
    
    .pagina-conta .botao.pequeno.principal {
        border-radius: 5px;
        padding: 5px 10px;
        font-size: 16px;
        background: transparent;
        color: #000;
        border: 1px solid black;
        text-shadow: none;
        transition: all 0.2s;
    }
    
    .pagina-conta .botao.pequeno.principal:hover, 
    .pagina-conta .botao.pequeno.pull-left:hover, 
    .pagina-pedido-listar .botao.pequeno.principal:hover {
        background: #F1bF04;
    }

    .pagina-conta .botao.pequeno.pull-left, .pagina-pedido-listar .botao.pequeno.principal {
        font-size: 16px;
        padding: 5px 10px;
        background: transparent;
        color: black;
        border: 1px solid black;
        border-radius: 5px;
        text-shadow: none;
        transition: all 0.2s;
    }
    
    .pagina-conta .breadcrumbs {
        display: none;
    }
    
    /* ============================================== */
    
    .pagina-pedido-listar .buscar-pedidos label span {
        font-size: medium;
    }
    
    .cep .btn {
        background: #F1BF04;
    }
    
    .cep label {
        font-size: 18px;
    }
    
    .abas-custom .tab-content {
        margin: 20px;
        border-radius: 10px;
    }
    
    @media (min-width: 767px) {
        .produto .span6 {
            display: flex !important;
        }
        
        .produto .span6 .produto-thumbs {
            order: 1
        }
        
        .produto .span6 .produto-thumbs .miniaturas.slides {
            display: flex;
            flex-direction: column;
            width: auto !important;
        }
        
        .produto .span6 .produto-thumbs .flexslider .slides li {
            width: auto !important;
        }
        
        .produto .span6 .conteiner-imagem {
            order: 2;
        }
    }
    
    @media (max-width: 767px) {
        .span12.produto {
                padding: 20px;
        }
        
        .pagina-produto .nome-produto {
        	display: block;
        	font-size: 1.5rem;
        }
    }
    
    /* ============================================= */
    
    b.titulo.cor-secundaria {
    	margin-bottom: 12px;
    }
    /* Define uma margem inferior de 12px para elementos <b> com a classe .titulo.cor-secundaria. */
    
    /* =========== ajustes necessarios para o rodape ====================*/
    /* =========== ajustes necessarios para o rodape ==================== */
    #rodape .span4 .titulo {
    	text-transform: uppercase;
    	font-weight: bolder;
    }
    /* Define o alinhamento do texto dentro de elementos com a classe .span4 no rodapé como justificado, para uma aparência mais organizada e uniforme. */
    
    /* Estilos para layout padrão */
    .bloco-responsivo {
        display: inline-block;
        width: 48%; /* Define a largura das divs como 48%, permitindo que fiquem lado a lado em telas maiores. */
        vertical-align: top; /* Alinha as divs no topo, se houver diferença de altura. */
        margin-right: 2%; /* Adiciona um espaço de 2% entre as colunas. */
    }
    
    @media (max-width: 768px) {
      .categorias,
      .selos {
        overflow: hidden;
      }
    
      .categorias ul,
      .selos ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
      }
    
      .categorias.ativo ul,
      .selos.ativo ul {
        max-height: 500px; /* valor suficiente para conter o conteúdo interno */
      }
    
      .categorias .titulo,
      .selos .titulo {
        cursor: pointer;
        position: relative;
        display: block;
        padding-right: 20px;
      }
    
      .categorias .titulo::after,
      .selos .titulo::after {
        content: "+";
        position: absolute;
        right: 15px;
        top: 15px;
        transform: rotate(0deg);
        transition: transform 0.3s ease;
      }
    
      .categorias.ativo .titulo::after,
      .selos.ativo .titulo::after {
        transform: rotate(180deg);
      }
    }
    
    /* Ajusta o layout em telas menores */
    @media (max-width: 768px) {
        #rodape .row-fluid {
        	flex-direction: column;
        }
        .span4 {
            display: flex;
            flex-direction: column; /* Altera a direção dos filhos para coluna */
        }
    
        .categorias {
            order: 1; /* As categorias aparecem primeiro */
        }
    
        .contato {
            order: 3; /* O contato aparece em segundo */
        }
    
        .selos {
            order: 2; /* Os selos aparecem por último */
        }
    }
    
    #rodape .row-fluid a {
    	font-size: medium;
    }
    /* Define o tamanho da fonte como médio para os links dentro de elementos com a classe .row-fluid no rodapé. */
    
    #rodape .row-fluid li {
    	font-size: medium;
    	margin-top: 4px;
    }
    /* Define o tamanho da fonte como médio e uma margem superior de 4px para os itens de lista dentro de .row-fluid no rodapé. */
    
    #rodape .row-fluid a {
    	color: black;
    	font-family: "Josefin Sans", sans-serif;
    }
    /* Define a cor do texto dos links dentro de .row-fluid no rodapé como preto. */
    
    /* ============================================================ */
    
    /* feito dia 31-10-2024 */
    /* ============ Ajuste na tela de finalização de compra ======== */
    /* ============================================= */
    .tabela-carrinho .conteiner-imagem {
        float: left;
    }
    .finalizar-compra {
        padding: 10px;
    }
    
    .col-item-unit-price .preco-promocional {
        font-size: 16px;
    }
    .preco-produto .titulo {
        font-family: 'Roboto';
        font-weight: 600;
    }
    .tabela-carrinho .quantidade input[type="text"] {
        width: 20px;
        font-size: 16px;
    }
    .tabela-carrinho .clearfix form .quantidade a::before {
        font-size: 14px;
    }
    .carrinho-checkout .atendimento .icone-box, .clean-layout .atendimento .icone-box {
        border: none;
    }
    .carrinho-checkout .atendimento li .display-table, .clean-layout .atendimento li .display-table {
        font-size: large;
    }
    .carrinho-checkout .modal-body.borda-principal .botao.principal.pull-right {
    	
    }
    .carrinho-checkout .botao.pull-right {
    	border-radius: 20px;
    }
    @media (max-width: 768px) {
        .tr-checkout-frete td:first-child {
          display: none;
        }
    }
    
    /* ================================ PÁGINA DE MINHA CONTA ============================ */
    .conta-menu .nome-usuario {
        min-width: fit-content;
    }
    
    
    /* ============================================================ */
    
    .carrinho-interno {
        border: none;
        border-radius: 5px;
        z-index: 9999;
    }
    
    .carrinho-interno .nome-produto {
        width: 115px;
        max-height: 65px;
        overflow: hidden;
        margin-left: 10px;
        font-size: 13px;
        line-height: normal
    }
    
    .carrinho-interno .preco-produto .preco-promocional {
        font-size: 14px;
        display: block
    }
    
    .carrinho-interno>div .botao {
        background: #F1BF04 !important;
        color: #000;
    }
    
    .pagina-produto .principal .preco-produto.destaque-avista div .preco-promocional {
        font-size: 2.5rem;
    }
    
    
    /* EXIBIR PRODUTOS EM DUAS COLUNAS NO MOBILE */
    @media (max-width: 768px){
        /* Garante que apenas os produtos dentro da listagem sejam afetados */
        #listagemProdutos > ul {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
    
        #listagemProdutos > ul li.listagem-linha > ul {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
    
        /* Aplica 50% de largura somente aos itens da listagem */
        #listagemProdutos > ul li.listagem-linha > ul > li.listagem-item {
            width: 50%;
            margin: 0 0 15px;
        }
        
        #listagemProdutos li {
            flex: none;
        }
    
        .listagem.com-caixa .listagem-item {
            border: 0;
            min-height: 368px;
        }
    
        .listagem.com-caixa .listagem-item .imagem-produto {
            border: 0;
            padding: 0;
        }
    
        .listagem .listagem-item .info-produto {
            border: 1px solid #00000000 !important;
            padding: 5px 0;
        }
    
        .listagem .listagem-item .info-produto a.nome-produto {
            display: flex;
            align-items: center;
        }
        
        .listagem .listagem-linha>ul {
            display: flex;
            flex-wrap: wrap;
        }
    
        .busca .botao-busca {
            padding: 5px 14px !important;
        }
        
        #btn-top {
            display: none;
        }
    
        .preco-produto s.preco-venda {
            display: block;
            font-size: 14px;
        }
    
        .preco-venda {
            display: block;
            font-size: 12px !important;
        }
    }
    
    .botao.principal.botao-comprar, .botao.principal.grande, .acoes-produto-responsiva .tag-comprar {
        background: #F1BF04 !important;
        color: black;
        border-radius: 10px;
    }