:root {
    --cor-menu: #fff;
    --cor-texto: #3b3b3b;
    --cor-qtdcarrinho: #ff671c;
}

body {
    background-color: white; /* Define a cor de fundo do corpo da página */
    font-family: "Reddit Sans", sans-serif !important; /* Define a família de fontes para a página */
    font-size: 14px; /* Define o tamanho da fonte para a página */
}
.titulo {
    font-family: "Reddit Sans", sans-serif !important;
}





/* DESKTOP */
/* @media (min-width: 1024px) {  */
    @media (min-width: 800px) { 

#finalizarCompra {
    padding: 10px 60px;
}

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.conteudo.span12 {
    margin: 0; /* correção do margin left que acontecia no corpo da home quando carrega a página */
}

    /*BARRA INICIAL*/
    .barra-inicial {
        background-color: var(--cor-principal);
    }
    .lista-redes ul {
        display: none; /* Esconde todos os elementos <ul> (listas não ordenadas) que estão dentro de um elemento com a classe "lista-redes" */
    }
    #barraTopo {
        display: none !important;
    }

    /* CABEÇALHO */
    /* logo */
    .logo a img {
        right: 100px;
    }
    #cabecalho .conteiner {
        max-width: 100%; /* Define a largura máxima do container do cabeçalho */
        padding: 0; /* Remove o padding do container do cabeçalho */
    }
    #cabecalho .conteiner>.row-fluid {
        max-width: 1140px; /* Define a largura máxima do conteúdo dentro do container do cabeçalho */
        margin: 0 auto; /* Centraliza o conteúdo do cabeçalho */
    }
    /* minha conta - carrinho */
    .bem-vindo {
        display: none !important;
    }
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.superior.row-fluid.hidden-phone > div.span4 > ul {
        display: none; /* remove o ícone minha conta default da plataforma */
    }
    /* remove o texto - adicionado no carrinho */
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span4.hidden-phone > div.carrinho > a > span:nth-child(3) {
        display: none !important;
    }
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span4 {
        width: 10%; /* define a largura da div dos icones */
        margin-left: 0;
        margin-top: 14px;
    }
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span8.busca-mobile {
        width: 70%; /* define a largura da div da busca */
    }
    .inferior .acoes-conta li:first-child a {
        border: 0; /* remove a borda da tag a que tem o icone minha conta */
    }
    ul.acoes-conta.borda-alpha {
        background-color: transparent;
    }
    /* profile */
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.inferior.row-fluid > div:nth-child(2) > ul > li > a > i {
        color: var(--cor-principal);
    }
    .acoes-conta>li i {
        width: 100%;
        height: 100%;
        font-size: 20px; /* define o tamanho do ícone */
        background-color: white;
    }
    /*carrinho */
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span4.hidden-phone > div.carrinho > a > i {
        color: var(--cor-principal);
    }
    .carrinho>a i {
        width: 100%;
        height: 100%;
        font-size: 20px; /* define o tamanho do ícone */
        background-color: white;
    }
    .carrinho.vazio>a span {
        display: none !important;
    }
    .carrinho {
        border: 0;
    }
    .carrinho>a strong {
        line-height: 25px;
        float: right;
        margin-right: 40px;
        margin-left: 0;
        font-size: 15px;
        font-weight: 600;
    }
    /* quantidade de produtos no carrinho */
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span4.hidden-phone > div.carrinho > a > strong {
        position: absolute;
        left: 47px;
        line-height: 1rem;
        height: 1rem;
        width: 1rem;
        border-radius: 1rem;
        background-color: var(--cor-qtdcarrinho);
        color: #fff;
        font-size: .75rem;
        font-weight: 700;
        z-index: 1;
        text-align: center;
    }


    /* meus pedidos */
    #cabecalho > div.conteiner > div.row-fluid > div.conteudo-topo.span9 > div.superior.row-fluid.hidden-phone > div.span4 > ul > li:nth-child(1) {
        display: none;
    }
    .fundo-principal, .fundo-principal *, .fundo-principal *:hover, .fundo-principal:hover, .fundo-principal.botao:hover {
        color: var(--cor-principal); /* hover do icone */
    }

    /* BUSCA */
    .canais-contato ul li {
        border: none !important; /* Remove a borda dos itens de contato */
    }
    #cabecalho .busca {
        position: relative; /* Define a posição relativa para o campo de busca */
        padding: 0; /* Remove o padding do campo de busca */
        background-color: transparent; /* Define o fundo do campo de busca como transparente */
        border: none; /* Remove a borda do campo de busca */
        float: left;
        width: 80%;
        margin-top: 12px;
    }
    #cabecalho .busca input {
        width: 94%; /* Define a largura do campo de entrada de busca */
        border: none; /* Remove a borda do campo de entrada de busca */
        box-shadow: none; /* Remove a sombra do campo de entrada de busca */
        border-bottom: 1px solid var(--cor-principal); /* Adiciona uma borda inferior ao campo de entrada de busca */
        border-radius: 0; /* Remove o arredondamento das bordas do campo de entrada de busca */
    }
    #cabecalho .busca .botao-busca {
        position: absolute; /* Define a posição absoluta para o botão de busca */
        right: 5px; /* Posiciona o botão de busca à direita */
        top: 0px; /* Alinha o botão de busca ao topo */
        height: 30px; /* Define a altura do botão de busca */
        background: transparent; /* Define o fundo do botão de busca como transparente */
        color: var(--cor-principal); /* Define a cor do texto do botão de busca */
        border: none; /* Remove a borda do botão de busca */
    }

    /*CARRINHO*/
    .carrinho-interno .nome-produto {
        font-size: 14px; /* Define o tamanho da fonte dos elementos com a classe "nome-produto" que estão dentro de um elemento com a classe "carrinho-interno" como 14 pixels */
    }


    /* MENU */
    .menu.superior {
        background-color: var(--cor-menu); /* Define a cor de fundo do menu superior */
        text-align: center; /* Centraliza o texto do menu */
        margin: 0 auto; /* Centraliza o menu */
        display: flex; /* Define o menu como um flex container */
    }
    .menu.superior .titulo {
        margin: 3px 0;
        color: var(--cor-texto);
    }
    .menu ul {
        width: fit-content; /* Define a largura do menu para ajustar ao conteúdo */
        margin: auto; /* Centraliza o menu */
        text-align: center; /* Centraliza o texto dos itens do menu */
    }
    .menu.superior .nivel-um>li {
        border: none; /* Remove a borda dos itens do menu de nível um */
    }
    .menu li.com-filho>a i {
        display: none;
    }
    .menu .nivel-dois {
        padding: 0;
    }
    .menu li {
        padding: 5px 20px;
    }
    .menu.superior .nivel-dois {
        top: 35px;
    }

    /* FULLBANNER */
    .conteiner-principal .conteiner {
        box-shadow: none; /* Remove a sombra do container principal */
        max-width: 1200px; /* Define a largura máxima do container principal */
        margin: 0 auto; /* Centraliza o container principal */
    }
    .secao-banners .conteiner {
        max-width: 100%; /* Define a largura máxima do container de banners */
        padding: 0; /* Remove o padding do container de banners */
    }

    /* BANNER TARJA */
    .banner.cheio+.row-fluid {
        margin-top: 0; /* Remove a margem superior do banner cheio */
        text-align: center; /* Centraliza o texto do banner cheio */
    }
    .spanNone.banner.tarja {
        display: grid;
        justify-content: center;
    }

    /* MINI BANNERS */
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div.row-fluid.banner.mini-banner.hidden-phone > div > div > ul.slides > li > a > img {
        transition: transform 0.2s ease-in-out;
        transform-origin: bottom;
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div.row-fluid.banner.mini-banner.hidden-phone > div > div > ul.slides > li > a > img:hover {
        transform: scale(1.1);
    }

    /* CARROSSEL DE MARCAS */
    .marcas::before {
        content: "Compre pela marca";
        font-size: 22px;
        text-transform: uppercase;
        font-weight: 400;
        color: #000000;
        justify-content: center;
        display: grid;
    }

    /* CORPO */
    .conteiner-principal .conteiner {
        padding: 10px 0px;
    }


    /* VITRINE */
    .titulo-categoria {
        border: none; /* Remove a borda do título da categoria */
        text-align: center; /* Centraliza o texto do título da categoria */
        font-size: 22px !important; /* Define o tamanho da fonte do título da categoria */
        margin: 40px 0; /* Adiciona margem acima e abaixo do título da categoria */
        text-transform: uppercase; /* Transforma o texto do título da categoria para maiúsculas */
    }
    .listagem .titulo-categoria:hover {
        text-decoration: none; /* Remove a decoração de texto do título da categoria ao passar o mouse */
        background: none; /* Remove o fundo do título da categoria ao passar o mouse */
        padding-left: 0; /* Remove o padding à esquerda do título da categoria ao passar o mouse */
    }
    .titulo-categoria strong {
        font-weight: 400; /* Define o peso da fonte do texto forte no título da categoria */
    }
    .listagem-item .acoes-produto {
        display: none; /* Esconde as ações do produto na listagem */
    }
    div#listagemProdutos {
        text-align: center; /* Centraliza o texto da listagem de produtos */
    }
    .listagem .span3 .imagem-produto, .listagem .produtos-carrossel[data-produtos-linha="4"] .imagem-produto {
        height: 300px; /* Define a altura das imagens dos produtos */
    }
    .listagem .info-produto {
        text-align: center; /* Centraliza o texto das informações do produto */
    }
    .listagem .span3 .listagem-item .nome-produto, .listagem .produtos-carrossel[data-produtos-linha="4"] .listagem-item .nome-produto {
        min-height: 0px; /* Define a altura mínima dos nomes dos produtos */
    }
    .listagem .listagem-item .nome-produto {
        display: inline; /* Exibe os nomes dos produtos inline */
    }
    .listagem .listagem-item .nome-produto {
        font-size: 12px; /* Define o tamanho da fonte dos nomes dos produtos */
        line-height: 14px; /* Define a altura da linha dos nomes dos produtos */
        text-transform: uppercase; /* Transforma o texto dos nomes dos produtos para maiúsculas */
    }
    span.preco-parcela {
        display: none; /* Esconde os preços parcelados */
    }
    .preco-produto .preco-venda {
        font-size: 13px; /* Define o tamanho da fonte dos preços de venda */
    }
    .preco-produto strong.titulo {
        font-size: 13px; /* Define o tamanho da fonte dos preços promocionais */
        font-weight: 600; /* Define o peso da fonte dos preços promocionais */
    }
    .listagem .span4 .imagem-produto, .listagem .produtos-carrossel[data-produtos-linha="3"] .imagem-produto {
        height: 400px; /* Define a altura das imagens dos produtos em listagens que ocupam 4 colunas (span4) ou em carrosséis com 3 produtos por linha */
    }
    .listagem .listagem-linha li {
        border: none; /* Remove as bordas dos itens <li> dentro das linhas de listagem de produtos */
    }

    /* bandeiras */
    .span12 .bandeiras-produto {
        top: 380px;
        left: 25px;
    }
    .span12 .bandeiras-produto span {
        line-height: 20px;
        color: #FFF;
        border: 0;
        box-shadow: none;
        white-space: nowrap;
        background-color: #000000b0;
    }


    /*NEWSLETTER*/
    #barraNewsletter {
        box-shadow: none; /* Remove qualquer sombra aplicada ao elemento com o id "barraNewsletter" */
    }

    #barraNewsletter {
        color: #474747; /* Define a cor do texto do elemento com o id "barraNewsletter" como #474747 (um tom de cinza escuro) */
    }

    #barraNewsletter .componente input[type="text"] {
        width: 400px; /* Define a largura dos campos de texto dentro do elemento com a classe "componente", que está dentro do elemento com o id "barraNewsletter", como 400 pixels */
        margin: 0 20px; /* Define a margem superior e inferior como 0 e a margem esquerda e direita como 20 pixels */
        border-top: none; /* Remove a borda superior dos campos de texto */
        border-left: none; /* Remove a borda esquerda dos campos de texto */
        border-right: none; /* Remove a borda direita dos campos de texto */
        box-shadow: none; /* Remove qualquer sombra dos campos de texto */
        border-color: #d9d9d9; /* Define a cor da borda inferior dos campos de texto como #d9d9d9 (um tom claro de cinza) */
        border-radius: 0; /* Remove qualquer arredondamento dos cantos dos campos de texto */
    }
    /* ajuste da font do cta da newsletter */
    #barraNewsletter .componente .newsletter-assinar:after {
        font-family: "Reddit Sans", sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: white;
    }





    /* DEPOIMENTOS */

    #testimonials h2 {
        display: flex;
        flex-direction: column;
        color: #000;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 18px;
        margin: 0 0 20px;
        font-family: Montserrat
    }

    #testimonials h2 strong {
        font-size: 30px;
        font-weight: 700;
        text-transform: lowercase;
        color: #000
    }

    #testimonials .draggable {
        width: 95%;
        margin: 0 auto
    }

    #testimonials article.slick-slide {
        margin: 40px 3px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #000
    }

    #testimonials h2 strong {
        font-size: 30px;
        font-weight: 700;
        text-transform: lowercase;
        color: #000
    }

    #testimonials h2 strong:after {
        content: "";
        width: 50%;
        height: 2px;
        display: block;
        background: #000;
        margin: 5px auto
    }

    article.slick-slide.slick-active p {
        font-size: 15px;
        color: #707070;
        width: 307px
    }

    #testimonials article.slick-slide h3 {
        font-size: 14px
    }

    #testimonials article.slick-slide strong {
        font-size: 14px;
        color: #757575;
        margin-top: 5px;
        margin-bottom: 16px;
        font-weight: 600;
    }


    /* NEWSLETTER RODAPÉ */
    #barraNewsletter, #barraNewsletter .show-hide, #barraNewsletter .componente, #barraNewsletter.posicao-rodape .conteiner {
        background-color: #FFFFFF;
    }


    /*RODAPÉ*/
    #rodape .titulo {
        font-size: 18px;
        border: 0;
        font-weight: 500;
    }
    #rodape .institucional {
        background-image: none; /* Remove qualquer imagem de fundo do elemento com a classe "institucional" dentro do rodapé */
        background-color: var(--cor-principal);
        font-weight: 300;
    }
    .pagamento-selos {
        background: none; /* Remove qualquer imagem de fundo do elemento com a classe "pagamento-selos" dentro do rodapé */
    }
    .institucional .redes-sociais .titulo {
        color: white; /* Define a cor do texto do elemento com a classe "titulo", que está dentro de um elemento com a classe "redes-sociais", que por sua vez está dentro de um elemento com a classe "institucional", como branco */
    }

    /*CATEGORIAS*/
    .links-rodape ul li {
        list-style-image: none; /* Remove qualquer imagem de marcador de lista dos itens de lista no rodapé */
    }

    /* REDES SOCIAIS */

    span.titulo.cor-secundaria.hidden-phone {
        margin-top: 10px; /* Adiciona uma margem superior de 10 pixels */
        padding-bottom: 12px !important; /* Adiciona um preenchimento inferior de 12 pixels, usando !important para sobrescrever outros estilos */
    }
    #rodape .redes-sociais {
        width: 230px; /* Define a largura do elemento com a classe "redes-sociais" dentro do rodapé para 220 pixels */
        padding: 0 20px; /* Aplica um padding (preenchimento interno) de 0 pixels no topo e na base, e de 20 pixels nas laterais esquerda e direita */
        position: absolute; /* Define o posicionamento do elemento como absoluto, permitindo a sua posição ser ajustada em relação ao seu contêiner mais próximo com posição relativa */
        top: 0; /* Posiciona a parte superior do elemento no topo do contêiner pai */
        bottom: 0; /* Posiciona a parte inferior do elemento na base do contêiner pai */
        background: transparent; /* Define o fundo do elemento como transparente */
        box-shadow: none; /* Remove qualquer sombra aplicada ao elemento */
        border: none;
    }

    .lista-redes i {
        width: 25px;
        height: 25px;
        line-height: 25px;
    }

    /* correção do ícone do Facebook */
    #rodape .institucional li {
        list-style: none;
        display: block !important;
    }
    #rodape .caixa-facebook {
        display: none;
    }


    /* remove fundo do ícone */
    i.icon-facebook {
        background: transparent !important;
    }
    i.icon-twitter {
        background: transparent !important;
    }
    i.icon-youtube {
        background: transparent !important;
    }
    i.icon-instagram {
        background: transparent !important;
    }
    i.icon-pinterest {
        background: transparent !important;
    }

    #rodape .institucional .lista-redes {
        text-align: left; /* Alinha o texto à esquerda para o elemento com a classe "lista-redes" que está dentro de "institucional" dentro do "rodape" */
    }
    .lista-redes ul li {
        border-left: 0; /* Remove a borda esquerda de cada item de lista <li> dentro de qualquer lista não ordenada <ul> dentro de "lista-redes" */
    }
    .lista-redes i {
        font-size: 20px; /* Define o tamanho da fonte dos ícones */
        padding: 8px 8px; /* Define o preenchimento ao redor dos ícones */
    }
    .lista-redes a:hover i {
        background-color: white !important; /* Define o fundo do ícone como branco quando o link é hover */
        color: var(--cor-principal); /* Define a cor do ícone como preto quando o link é hover */
    }





    /* PÁGINA DE PRODUTO */

    /* tamanho do nome do produto */
    .produto .nome-produto {
        font-size: 32px;
        font-weight: 600;
        color: var(--cor-principal);
        padding: 0 0 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    /* alinhamento do nome da marca do produto */
    .produto .codigo-produto {
        font-size: 16px;
        padding: 0;
        border: 0;
        margin-bottom: 0px;
    }
    /* remove o código do produto - SKU */
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(1) > div:nth-child(2) > div > div.info-principal-produto > div.codigo-produto > span:nth-child(1) > span {
        display: none;
    }
    /* remove o escrito código */
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(1) > div:nth-child(2) > div > div.info-principal-produto > div.codigo-produto > span:nth-child(1) > b {
        display: none;
    }

    /* remover caminho da home até o produto */
    .breadcrumbs ul {
        margin: 0;
        display: none;
    }
    .info-principal-produto .breadcrumbs {
        margin: 0 0;
    }

    /* alterar ícones de atributo do produto */
    .atributos ul li a {
        box-shadow: none;
    }

    /* atributo cor */
    .atributo-cor ul li a:hover, .atributo-cor ul li.active a {
        background-color: transparent !important;
        border: 0;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
        margin: 0 2px 2px 0;
    }
    .atributo-cor a span {
        border-width: 0 0 30px 30px;
        box-shadow: 1px 2px 5px #8888883d;
    }

    /* P M G */
    .atributo-comum a.atributo-item {
        background-color: #d3d3d3;
    }
    .atributo-comum .atributos ul li a:hover, .atributos ul li.active a {
        border: 0;
    }
    .atributo-comum a:hover span, .atributo-comum .active a span {
        color: white;
    }
    .atributo-comum ul li a:hover, .atributo-comum ul li.active a {
        background-color: var(--cor-principal);
        margin-right: 2px;
    }
    .atributo-comum ul li a:hover, .atributo-comum ul li.active a {
        border-width: 0;
        margin-bottom: 2px;
    }

    /* TAMANHO DE ANEL */
    .atributo-comum a span {
        color: var(--cor-principal);
    }
    .atributo-comum a.atributo-item {
        background-color: #ffffff;
    }


    /* disponibilidade do produto */
    .produto .acoes-produto .comprar .disponibilidade-produto {
        display: none;
    }

    /* botão comprar */
    .acoes-produto .preco-produto {
        float: none;
    }
    .produto .acoes-produto .comprar {
        float: left;
    }
    .botao {
        border-radius: 0;
        border: 0;
    }
    .botao.grande {
        font-size: 18px;
        padding: 10px 120px;
        text-shadow: none;
        text-transform: uppercase;
    }
    .botao.grande .icon-shopping-cart:before {
        display: none;
    }

    /* sempre aparecer as parcelas */
    .parcelas-produto.borda-alpha.padrao {
        display: block;
    }

    /* calculo de frete */
    .input-small {
        width: 191px;
    }
    .cep .input-append.input-prepend input {
        border-radius: 0;
        box-shadow: none;
    }
    .btn {
        display: inline-block;
        padding: 5px 12px;
        color: #fff;
        text-shadow: none;
        background-color: var(--cor-principal);
        background-image: linear-gradient(to bottom, var(--cor-principal), var(--cor-principal));
        cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
        transition: background 0.5s; /* Transição suave para o fundo */
        border: 0;

    }
    .btn:hover, .btn:focus {
        color: white;
    }
    .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.12)); /* Degradê do claro para o escuro */
        background-color: var(--cor-principal);
    }
    .input-prepend.input-append .add-on:last-child, .input-prepend.input-append .btn:last-child {
        border-radius: 0;
    }

    /* ações flutuantes */
    .acoes-flutuante .botao.grande {
        font-size: 14px;
        padding: 10px 50px;
    }

    /* descrição */
    .abas-custom .tab-content {
        box-shadow: none;
    }
    /* produtos relacionados */
    div.listagem.aproveite-tambem.borda-alpha > ul > li > ul > li > div {
        padding: 0;
        margin: 0;
    }
    div.listagem.aproveite-tambem.borda-alpha > ul > li > ul > li > div > div.info-produto {
        padding: 0;
    }
    .aproveite-tambem h4.titulo.cor-secundaria {
        border: none;
        text-align: center;
        font-size: 18px !important;
        margin: 40px 0;
        text-transform: uppercase;
        font-weight: bold;
    }
    .aproveite-tambem .imagem-produto {
        height: 400px !important;
    }
    .listagem.aproveite-tambem .listagem-item .nome-produto {
        font-size: 12px;
        line-height: 14px;
        text-transform: uppercase;
        margin-bottom: 10px;
        font-weight: 400 !important;
        border: 0;
    }
    .listagem .span3 .listagem-item .nome-produto, .listagem .produtos-carrossel[data-produtos-linha="4"] .listagem-item .nome-produto {
        font-weight: 400;
    }
    /* bandeira de desconto */
    .aproveite-tambem .bandeiras-produto {
        top: 370px;
        left: -10px;
    }






    /* PÁGINA DE CATEGORIA */


    /* ajuste das bordas */
    .breadcrumbs {
        border-top: 1px;
    }
    .ordenar-listagem.topo {
        border: 0;
    }
    .listagem .listagem-linha {
        border: 0;
    }
    .ordenar-listagem.rodape {
        border: 0;
    }

    /* titulo */
    .span9 h1 {
        margin-left: 20px;
        line-height: 10px;
    }

    /* escolher ordem */
    .ordenar-listagem.topo {
        float: right;
    }
    .ordenar-listagem label {
        border-radius: 0;
    }
    .input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child>.dropdown-toggle {
        border-radius: 0;
    }
    i.icon-caret-down {
        color: white;
    }
    .btn-group.open .btn.dropdown-toggle {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.12));
        background-color: var(--cor-principal);
    }
    .btn:focus {
        outline: 0;
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div.conteudo.span9 > div.ordenar-listagem.topo.borda-alpha > div > div > div > div > div > ul > li:nth-child(2) > a > i::before {
        color: #333; /* cor do icone carrinho dentro do menu dropdown de organizar a categoria */
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div.conteudo.span9 > div.ordenar-listagem.topo.borda-alpha > div > div > div > div > div > ul > li:nth-child(2) > a:hover > i::before {
        color: white; /* cor do icone hover */
    }

    /* menu lateral */
    .menu.lateral ul{
        width: auto;
        outline: 1px solid rgba(0, 0, 0, 0.05);
        border-width: 2px 0 0;
        border-style: solid;
        border-color: var(--cor-principal);
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div.coluna.span3 > div:nth-child(1) > ul > li > ul {
        border-color: #d3d3d3;
        border-width: 1px 0 0;
    }
    .menu.lateral.outras li .titulo {
        font-size: 15px;
    }
    .menu.lateral .nivel-um>li>a {
        box-shadow: none;
        border-top: 1px solid #e3e3e3;
    }
    .span9 #listagemProdutos div.imagem-produto {
        height: 316px;
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div.coluna.span3 > div:nth-child(1) > ul > li > ul > li {
        padding: 0; /* ajuste de subcategoria no menu lateral */
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div.coluna.span3 > div:nth-child(1) > ul > li > ul {
        box-shadow: none;
    }
    .menu.lateral .com-filho.borda-principal {
        border: 0;
    }

    /* bandeiras */

    .listagem-item.produto-adicionado .bandeiras-produto .adicionado-carrinho {
        display: none; /* remove a bandeira de produto adiconado no carrinho */
    }
    .span9 .bandeiras-produto {
        top: 300px;
        left: 0px;
    }
    .span9 .bandeiras-produto span {
        line-height: 20px;
        color: #FFF;
        border: 0;
        box-shadow: none;
        white-space: nowrap;
        background-color: #000000b0;
    }





    /* CARRINHO */
    .caixa-sombreada {
        box-shadow: none;
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div.caixa-sombreada > table > tbody > tr > td > div > a {
        font-weight: 600; /* nome do produto */
    }
    /* ajuste do texto - clique em finalizar a compra p... */
    .cabecalho-interno .titulo small {
        float: right;
        line-height: 2;
        margin-top: 5px;
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div.caixa-sombreada > table > tbody > tr > td > div > ul > li:nth-child(1) > span {
        display: none; /* remove o sku das informação do produto no carrinho */
    }
    /* lixeira */
    .icon-trash:before {
        font-weight: 200; /* ajuste do peso da lixeira */
    }
    .pagina-carrinho input {
        border-radius: 0;
        box-shadow: none;
    }
    .pagina-carrinho  #btn-frete {
        width: 103px;
    }
    .pagina-carrinho thead:nth-child(1) tr:nth-child(1) h6 {
        color: white;
        font-weight: 500;
    }
    .pagina-carrinho thead:nth-child(1) tr:nth-child(1) {
        background-color: var(--cor-principal);
    }
}




/* PÁGINA FINALIZAR COMPRA - INSERIR EMAIL PARA CONTINUAR */
.pagina-login #corpo {
    max-width: 1200px;
    margin: 0 auto;
}
.carrinho-checkout .atendimento {
    border: 0;
}
.carrinho-checkout .atendimento .icone-box {
    border: 0;
}
a.submit-email.botao.principal.grande {
    font-size: 14px;
}




    /* MOBILE */
    @media (max-width: 768px) {

/* remove espaço entre o conteúdo e o rodapé */
#corpo {
    margin-bottom: 0;
}

/* CABECALHO */
#cabecalho {
    padding-top: 0px;
}
.conteiner .logo {
    margin: 0 0 0px;
}
.logo a img {
    z-index: 2;
}
.atalhos-mobile {
    border-color: transparent;
    border: none;
    background: transparent;
    top: 40px;
    position: absolute;
    z-index: 1;
}
.atalhos-mobile>ul {
    text-align: center;
    margin: 0 10px;
    display: inline-flex;
    float: right;
}
.atalhos-mobile li {
    float: right;
    line-height: 30px;
    border-right: none;
    border-left: none;
    background: transparent;
    width: 30px;
}

#cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li.minha-conta a{
    color: var(--cor-principal);
    text-shadow: none;
    font-size: 20px;
}
#cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li.fundo-principal > a{
    color: var(--cor-principal);
    text-shadow: none;
    font-size: 20px;
}
.atalhos-mobile li:first-child {
    border: none;
    display: none;
}
.conteudo-topo .busca-mobile {
    overflow: hidden;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 6px;
}
.conteudo-topo .busca-mobile .atalho-menu {
    display: none !important;
}
.busca {
    border: none;
    background: transparent;
    margin: 0 auto;
    height: auto;
    line-height: initial;
    float: left;
    width: 100%;
}
#form-buscar {
    display: inline-flex;
    width: 106%;
}
input[type="text"], input[type="password"], input[type="email"], textarea, .cadastro input[type="text"], .cadastro input[type="password"], .cadastro select, .ordenar-listagem label {
    font-size: 16px;
    height: auto;
    padding: 10px;
    border-radius: 0;
    border: none;
    box-shadow: none;
}
input#auto-complete {
    box-shadow: none !important;
    border-bottom: 1px solid var(--cor-principal);
}
button.botao.botao-busca.icon-search.fundo-secundario {
    border-radius: 150px;
    right: 0;
    font-size: 15px;
    background: transparent;
    border: none;
    color: #c3c3c3;
    width: 0;
}
.atalhos-mobile a {
    padding: 0px 0px;
}
/* ordem dos icones */
li.fundo-principal {
    order: 2; /* carrinho vem depois de minha conta */
}
#cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li:nth-child(4) a.icon-user {
    display:none;

}
#cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li:nth-child(4) a.icon-signout {
    display: block;
}
#cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li:nth-child(5) {
    display: none;
}
#cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li.vazia {
    display: none;
}
.atalhos-mobile a.icon-signout {
    font-size: 20px;
    margin: 5px 0;
    color: black;
    text-shadow: none;
}
/* FIM CABECALHO */    

/* remove espaço entre cabeçalho e fullbanner */
#cabecalho > div.conteiner > div > div.conteudo-topo.span9 > div.inferior.row-fluid > div:nth-child(2) {
    display: none;
}
/* remove box shadow entre cabeçalho e conteiner principal */
.conteiner-principal .conteiner {
    box-shadow: none;
}

/* BANNER */
.row-fluid.banner.cheio {
    display: none;
}
.row-fluid.banner.mini-banner {
    margin: 10px 0;
    display: block !important;
}
.row-fluid.banner.mini-banner .modulo.span4 {
    margin: 20px 0;
}
#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div.row-fluid.banner.mini-banner > div > div {
    margin: 1px;
    margin-top: 8px;
}


/* fullbanner */
.slick-next, .slick-prev {
    width: 15px;
    height: 15px;
    display: block;
    z-index: 20;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}
.slick-next {
    right: -7px;
}
.slick-prev {
    left: -7px;
}
/* FIM BANNER */

/*MENU MOBILE */

.pagina-inicial #corpo {
    margin-top: -15px;
}
#corpo {
    margin-top: 20px;
}

.galeria iframe.snapwidget-widget {
    width: 300px !important;
    height: 80px !important;
}

.hamb-1 {
    width: 20px;
    height: 3px;
    margin-bottom: 4px;
    transition: all .2s;
    background-color: var(--cor-principal);
}

.cat span.category {
  top: 0px;
  position: relative;
}


.cat {
  padding: 8px 0;
  float: none;
  opacity: 1;
  transition: all .4s;
  position: absolute;
  left: 10px;
  display: block;
  width: 50px;
  height: 0px;
  color: transparent;
  border: 1px solid;
  top: 0px;
}
#cabecalho .cab-nav {
  height: 50px;
  z-index: 1000;
}



#cabecalho .close-nav {
    float: right;
    padding: 0;
    width: 50px;
    text-align: center;
    position: relative;
    top: 20px;
    right: 0px;
    height: 50px;
}

#cabecalho .nivel-um .close-nav-full {
  width: 0;
}

#cabecalho .nivel-um.active .close-nav-full {
  width: 20%;
  position: fixed;
  right: 0;
  min-height: 100%;
}

#cabecalho .menu.superior .nivel-um::-webkit-scrollbar {
  display: none;
}

.menu.superior .nivel-dois li a, .menu.lateral .nivel-dois li a {
  font-size: 14px;
  color: var(--cor-secundaria);
}

.menu.superior .nivel-um .titulo, .menu.lateral .nivel-um .titulo {
  font-size: 16px;
  font-weight: 400;
}

.menu.superior .nivel-um > li, .menu.lateral .nivel-um > li {
  border: 0;
}

#cabecalho .cab-nav a {
  float: left;
  width: 40px;
  border: 0;
  top: 0;
  font-size: 24px;
}

.menu.superior .nivel-um {
  position: fixed;
  background: var(--cor-branco);
  z-index: 10000;
  left: -130%;
  top: 0;
  width: 80%;
  box-shadow: 0 0 0 160px rgba(0,0,0,.5);
  bottom: 0;
  margin: 0;
  border: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  min-height: 100%;
  transition: all .5s;
  display: block!important;
  opacity: 0;
}


.menu.superior .nivel-um.active {
  left: 0;
  opacity: 1;
}

.menu.superior .nivel-dois {
  webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  border: 0;
  box-shadow: none;
  top: 0;
}

.menu.superior .nivel-um >li {
  padding: 0 20px;
}

.menu.superior .nivel-um>li {
  display: block;
}

.menu.superior .nivel-um {
  border: 0;
  position: fixed;
  width: 80%;
  top: 0;
  background: var(--cor-branco);
  z-index: 1000;
  margin: 0;
}

.menu.superior .categoria-marcas .nivel-dois li a, .menu.superior .categoria-paginas .nivel-dois li a {
  padding: 0;
}

.cab-nav .category .hamb-1:nth-child(2) {
  opacity: 0;
}

.cab-nav .category .hamb-1:last-child {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 28px;
  position: absolute;
  top: 0;
}

.cab-nav .category .hamb-1:first-child {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 28px;
  position: absolute;
  top: 0;
}

.close-nav .category>i {
  margin: 0;
}
.cab-nav .category .hamb-1 {
    background: white;
}


.close-nav span.category {
  height: 22px;
  display: block;
  padding: 0;
  text-align: center;
  width: 50px;
  border: 0;
  line-height: 32px;
}


.menu.superior .nivel-um>li .titulo {
  line-height: 30px;
  color: var(--cor-principal);
}
.menu.superior ul.nivel-um.active {
    width: 80%;
    border: 1px solid;
    background: white;
    position: fixed;
    top: 0px;
    z-index: 999;
    left: 0;
    right: unset;
}
.menu.superior {
    background-color: transparent;
    margin-top: 0;
    position: absolute;
    width: 100%;
}
.menu.superior .nivel-um > li> a {
    font-size: 15px;
    text-align: left;
    width: 80%;
    float: left;
}
.menu.superior li.com-filho i {
    float: right;
    position: absolute;
    top: 16px;
    right: 30px;
    font-size: 15px;
    background: transparent;
    color: var(--cor-principal);
}
.menu.superior .nivel-um>li:hover .nivel-dois {
    display: none;
    text-align: left;
}
.menu.superior .nivel-dois{
    display: none; /* subcategoria iniciar fechada qdo abrir o menu */
    position: relative;
    left: 15px;
    top: -10px;
}
.menu.superior .nivel-tres {
    position: unset;
    border: none;
    margin-left: 15px;
    margin-top: -20px;
    box-shadow: none;
    background: transparent;
}

.menu.superior .nivel-dois li:hover{
    background-color: transparent;
}
.menu.superior ul.nivel-dois li.com-filho i{
    top: 5px;
    right: 10px;
}
.menu.superior ul.nivel-tres li a{
    font-weight: normal;
}
/* FIM MENU MOBILE */


/* VITRINE */
/* titulo */
.titulo-categoria {
    border: none;
    text-align: center;
    font-size: 22px !important;
    margin: 40px 0;
    text-transform: uppercase;
    font-weight: 400;
}



/* produto */
.listagem .span4 .imagem-produto, .listagem .produtos-carrossel[data-produtos-linha="3"] .imagem-produto {
    height: 400px;
}
/* preço */
.info-produto {
    justify-content: center;
    display: grid;
}
.listagem .preco-produto>div {
    margin: 0;
}
.listagem .listagem-item .nome-produto {
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 400;
    min-height: 14px;
}
span.preco-parcela {
    display: none;
}
.preco-produto.destaque-preco {
    justify-content: center;
    display: flex;
}
.listagem .listagem-item .imagem-produto, .listagem .listagem-item .info-produto {
    text-align: center;
}
.preco-produto strong.titulo, .resumo-compra .preco-produto .titulo, .resumo-compra .total strong {
    font-size: 14px;
    font-weight: 500;
}
.preco-produto .preco-venda {
    font-size: 14px;
    font-weight: 500;
}
/* remove o botão vermais */
.listagem .listagem-item .acoes-produto-responsiva {
    margin: 0;
    display: none !important;
}
/* remove a bandeira de produto adicionado */
span.adicionado-carrinho.bandeira-carrinho {
    display: none !important;
}
.span12 .bandeiras-produto {
    top: 380px;
    left: 7px;
}
.span12 .bandeiras-produto span {
    line-height: 20px;
    color: #FFF;
    border: 0;
    box-shadow: none;
    white-space: nowrap;
    background-color: #000000b0;
}


/* DEPOIMENTOS */

    #testimonials h2 {
        display: flex;
        flex-direction: column;
        color: #000;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 18px;
        margin: 0 0 20px;
        font-family: Montserrat
    }

    #testimonials h2 strong {
        font-size: 30px;
        font-weight: 700;
        text-transform: lowercase;
        color: #000
    }

    #testimonials .draggable {
        width: 95%;
        margin: 0 auto
    }

    #testimonials article.slick-slide {
        margin: 40px 3px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #000
    }

    #testimonials h2 strong {
        font-size: 30px;
        font-weight: 700;
        text-transform: lowercase;
        color: #000
    }

    #testimonials h2 strong:after {
        content: "";
        width: 50%;
        height: 2px;
        display: block;
        background: #000;
        margin: 5px auto
    }

    article.slick-slide.slick-active p {
        font-size: 15px;
        color: #707070;
        width: 307px
    }

    #testimonials article.slick-slide h3 {
        font-size: 14px
    }

    #testimonials article.slick-slide strong {
        font-size: 14px;
        color: #757575;
        margin-top: 5px;
        margin-bottom: 16px;
        font-weight: 600;
    }



/*RODAPÉ*/
#rodape {
    text-align: center;
    font-weight: 300;
}

#rodape .institucional {
    background-image: none; /* Remove qualquer imagem de fundo do elemento com a classe "institucional" dentro do rodapé */
    background-color: var(--cor-principal);
}
.pagamento-selos {
    background: none; /* Remove qualquer imagem de fundo do elemento com a classe "pagamento-selos" dentro do rodapé */
}
.institucional .redes-sociais .titulo {
    color: white; /* Define a cor do texto do elemento com a classe "titulo", que está dentro de um elemento com a classe "redes-sociais", que por sua vez está dentro de um elemento com a classe "institucional", como branco */
}

/*CATEGORIAS*/
/* remove categorias do rodapé mobile */
#rodape > div.institucional.fundo-secundario > div > div > div.span9 > div > div.span4.links-rodape.links-rodape-categorias {
    display: none;
}


/* REDES SOCIAIS */
#rodape .titulo {
    font-size: 22px;
    padding: 15px 0px 0px;
    margin: 0 0 5px;
    border: 0;
}
/* inclui o título redes sociais */
    /* #rodape .redes-sociais::before {
        content: "Redes Sociais";
        font-size: 22px;
        font-weight: 400;
    } */
    /* alinha os icones das redes sociais */
    #rodape .institucional .lista-redes ul {
        margin: 0 auto;
    }
    span.titulo.cor-secundaria.hidden-phone {
        margin-top: 10px; /* Adiciona uma margem superior de 10 pixels */
        padding-bottom: 12px !important; /* Adiciona um preenchimento inferior de 12 pixels, usando !important para sobrescrever outros estilos */
    }

    .lista-redes i {
        width: 25px;
        height: 25px;
        line-height: 25px;
    }

    /* correção do ícone do Facebook */
    #rodape .institucional li {
        list-style: none;
        display: block !important;
    }
    #rodape .caixa-facebook {
        display: none;
    }


    /* remove fundo do ícone */
    i.icon-facebook {
        background: transparent !important;
    }
    i.icon-twitter {
        background: transparent !important;
    }
    i.icon-youtube {
        background: transparent !important;
    }
    i.icon-instagram {
        background: transparent !important;
    }
    i.icon-pinterest {
        background: transparent !important;
    }

    .lista-redes ul li {
        border-left: 0; /* Remove a borda esquerda de cada item de lista <li> dentro de qualquer lista não ordenada <ul> dentro de "lista-redes" */
    }
    .lista-redes i {
        font-size: 20px; /* Define o tamanho da fonte dos ícones */
        padding: 8px 8px; /* Define o preenchimento ao redor dos ícones */
    }
    .lista-redes a:hover i {
        background-color: white !important; /* Define o fundo do ícone como branco quando o link é hover */
        color: var(--cor-principal); /* Define a cor do ícone como preto quando o link é hover */
    }




    /* PÁGINA DE PRODUTO */



    /* nome do produto */
    .produto .nome-produto {
        font-size: 22px;
        font-weight: 600;
        color: var(--cor-principal);
        padding: 0 0 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        border: 0;
    }
    .produto .codigo-produto {
        display: none; /* remove o código do produto */
    }
    /* imagem do produto */
    .produto .conteiner-imagem > div {
        border: 0; /* remove boarda que fica na imagem */
    }
    /* compartilhar em redes sociais */
    .produto-compartilhar {
        display: none; /* remove opção de compartilhar nas redes sociais */
    }

    /* variação */
    /* atributo cor */
    .atributo-cor ul li a:hover, .atributo-cor ul li.active a {
        background-color: transparent !important;
        border: 0;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
        margin: 0 2px 2px 0;
    }
    .atributo-cor a span {
        border-width: 0 0 30px 30px;
        box-shadow: 1px 2px 5px #8888883d;
    }

    /* P M G */
    .atributo-comum a.atributo-item {
        background-color: #d3d3d3;
        box-shadow: none;
    }
    .atributo-comum .atributos ul li a:hover, .atributos ul li.active a {
        border: 0;
    }
    .atributo-comum a:hover span, .atributo-comum .active a span {
        color: white;
    }
    .atributo-comum ul li a:hover, .atributo-comum ul li.active a {
        background-color: var(--cor-principal);
        margin-right: 2px;
    }
    .atributo-comum ul li a:hover, .atributo-comum ul li.active a {
        border-width: 0;
        margin-bottom: 2px;
    }

    /* disponibilidade do produto */
    .produto .acoes-produto .comprar .disponibilidade-produto {
        display: none;
    }


    /* preço */
    .produto .acoes-produto .preco-produto .titulo {
        font-weight: 600;
    }
    .produto .principal > div {
        border-bottom: 0;
    }
    .acoes-produto .preco-produto, .produto-compartilhar {
        float: none;
        margin: 0 0 15px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-width: 0;
    }

    /* sempre aparecer as parcelas */
    .parcelas-produto.borda-alpha.padrao {
        display: block;
    }

    /* calculo de frete */
    .input-small {
        width: 191px;
    }
    .cep .input-append.input-prepend input {
        border-radius: 0;
        box-shadow: none;
        padding: 5px 20px;
    }
    .btn {
        display: inline-block;
        padding: 5px 12px;
        color: #fff;
        text-shadow: none;
        background-color: var(--cor-principal);
        background-image: linear-gradient(to bottom, var(--cor-principal), var(--cor-principal));
        cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
        transition: background 0.5s; /* Transição suave para o fundo */
        border: 0;

    }
    .btn:hover, .btn:focus {
        color: white;
    }
    .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.12)); /* Degradê do claro para o escuro */
        background-color: var(--cor-principal);
    }
    .input-prepend.input-append .add-on:last-child, .input-prepend.input-append .btn:last-child {
        border-radius: 0;
    }

    /* descrição do produto */
    .abas-custom .tab-content {
        padding: 20px;
        box-shadow: none;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }


    /* produtos relacionados */
    .aproveite-tambem h4.titulo.cor-secundaria {
        border: none;
        text-align: center;
        font-size: 18px !important;
        margin: 40px 0;
        text-transform: uppercase;
        font-weight: bold;
    }
    .aproveite-tambem .imagem-produto {
        height: 400px !important;
    }
    .listagem.aproveite-tambem .listagem-item .nome-produto {
        font-size: 12px;
        line-height: 14px;
        text-transform: uppercase;
        margin: 0;
        font-weight: 400 !important;
        padding-bottom: 5px;
    }



    /* PÁGINA DE CATEGORIA */
    .span9 .bandeiras-produto {
        top: 380px;
        left: 7px;
    }
    .span9 .bandeiras-produto span {
        line-height: 20px;
        color: #FFF;
        border: 0;
        box-shadow: none;
        white-space: nowrap;
        background-color: #000000b0;
    }
    /* linhas */
    .breadcrumbs {
        display: none;
    }
    .ordenar-listagem.rodape {
        display: none;
    }

    /* escolher ordem + filtro */
    .ordenar-listagem label {
        border-radius: 0;
        line-height: 12px;
    }
    .input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child>.dropdown-toggle {
        border-radius: 0;
    }
    .btn-group.open .btn.dropdown-toggle {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.12));
        background-color: var(--cor-principal);
        margin-left: 0;
    }
    button.btn {
        display: inline-block;
        padding: 0 12px;
        color: #fff;
        text-shadow: none;
        background-color: var(--cor-principal);
        background-image: linear-gradient(to bottom, var(--cor-principal), var(--cor-principal));
        cursor: pointer;
        transition: background 0.5s;
        border: 0;
        border-radius: 0;
    }
    .btn:hover, .btn:focus {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.12));
        background-color: var(--cor-principal);
        color: white;
        outline: 0;
    }
    i.icon-caret-down {
        color: white;
    }




    /* CARRINHO */
    .tabela-carrinho .sem-borda {
        border: 0;
        float: left;
    }
    .tabela-carrinho tr:nth-child(1) {
        margin: 0 0 20px;
        border: 1px solid #ccc;
        display: flex;
        flex-wrap: wrap;
        width: 95%;
    }
    .tabela-carrinho tr:nth-child(1) > td:nth-child(1) {
        width: 10%;
    }
    .tabela-carrinho tr:nth-child(1) > td:nth-child(2) {
        width: 60%;
    }
    .tabela-carrinho tr:nth-child(1) > td:nth-child(4) {
        width: 10%;
    }
    .tabela-carrinho tr:nth-child(1) > td:nth-child(5) {
        width: 100%;
    }
    .tabela-carrinho tr:nth-child(1) > td:nth-child(6) {
        width: 100%;
    }
    .sem-borda .produto-info a {
        vertical-align: top;
    }

    td.clearfix {
        display: flex;
        border: 0;
    }
    .quantidade {
        display: inline-grid;
    }
    a.cor-secundaria.icon-plus {
        order: 1;
    }
    .tabela-carrinho .quantidade input[type="text"] {
        order: 2;
        background: transparent;
    }
    a.cor-secundaria.icon-minus {
        order: 3;
    }
    a.cor-secundaria.icon-minus, a.cor-secundaria.icon-plus {
        font-size: 16px;
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div.caixa-sombreada > table > tbody > tr > td:nth-child(6) {
        border-top: 0;
    }
    #corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div.caixa-sombreada > table > tbody > tr > td > div > ul > li:nth-child(1) > span {
        display: none;
    }
    /* remover item do carrinho */
    .icon-trash:before {
        content: "Remover do carrinho";
        font-size: 12px;
        font-family: 'Reddit Sans', sans-serif;
        vertical-align: middle;
        margin-right: 12px;
    }
    .icon-trash:after {
        content: "\f014";
        font-size: 16px;
    }
    /* calculo de frete */
    .tabela-carrinho .form-horizontal {
        margin: 0;
    }
    input#calcularFrete {
        padding: 9px 50px !important;
        border-radius: 0;
        box-shadow: none;
        border-color: rgba(0,0,0,0.06);
    }
    #btn-frete > i {
        display: none; /* remove icone carrinho do btão calcular */
    }
    .tabela-carrinho .bg-dark {
        background-color: transparent;
    }
    .tabela-carrinho .bg-dark td {
        border: 0;
    }
    .tabela-carrinho .bg-dark td:nth-child(2) {
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    input#usarCupom {
        border: 1px solid rgba(0, 0, 0, 0.06);
    }
    
    li.menu-user-logged {
    display: none;
}

}