/* =====================================================
   ELITE4i20 - GALERIA
   TEMA BLACK & WHITE
   ===================================================== */


/* FUNDO GERAL */
html,
body,
#corpo {
    background-color: #000000 !important;
    color: #ffffff !important;
}


/* =====================================================
   HEADER
   ===================================================== */

#cabecalho,
#cabecalho .conteiner,
.barra-superior,
.superior,
.topo,
.header,
.conteiner-topo {
    background-color: #000000 !important;
    color: #ffffff !important;
}

#cabecalho {
    border-bottom: 1px solid #222222 !important;
}


/* LINKS DO HEADER */

#cabecalho a,
.header a,
.topo a,
.superior a {
    color: #ffffff !important;
}

#cabecalho a:hover,
.header a:hover,
.topo a:hover,
.superior a:hover {
    color: #aaaaaa !important;
}


/* =====================================================
   MENU PRINCIPAL
   ===================================================== */

.menu.superior,
.menu.superior .conteiner {
    background-color: #000000 !important;
}

.menu.superior {
    border-top: 1px solid #222222 !important;
    border-bottom: 1px solid #222222 !important;
}

.menu.superior a {
    color: #ffffff !important;
    font-weight: 600;
}

.menu.superior a:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* =====================================================
   CAMPO DE BUSCA
   ===================================================== */

.busca input,
.busca .input,
input[type="search"] {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

.busca input::placeholder,
input[type="search"]::placeholder {
    color: #777777 !important;
}

.busca input:focus,
input[type="search"]:focus {
    border-color: #ffffff !important;
    outline: none !important;
}


/* =====================================================
   ICONES DO HEADER
   ===================================================== */

#cabecalho i,
#cabecalho svg,
.header i,
.header svg {
    color: #ffffff !important;
}


/* =====================================================
   CONTEUDO
   ===================================================== */

#corpo,
.conteudo-principal,
.conteiner-principal {
    background-color: #000000 !important;
    color: #ffffff !important;
}


/* =====================================================
   TITULOS
   ===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff !important;
}


/* =====================================================
   VITRINES
   ===================================================== */

.vitrine {
    background-color: transparent !important;
}

.vitrine .titulo,
.titulo-vitrine,
.titulo-categoria {
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}


/* =====================================================
   CARDS DE PRODUTOS
   ===================================================== */

.listagem .listagem-item,
.listagem .listagem-item .produto,
.produto {
    background-color: #080808 !important;
    border-color: #222222 !important;
}

.listagem .listagem-item {
    transition: transform 0.25s ease;
}

.listagem .listagem-item:hover {
    transform: translateY(-3px);
    border-color: #ffffff !important;
}


/* =====================================================
   NOME DOS PRODUTOS
   ===================================================== */

.listagem .nome-produto,
.nome-produto,
.produto .nome {
    color: #ffffff !important;
    font-weight: 600;
}


/* =====================================================
   PREÇOS
   ===================================================== */

.preco-produto,
.preco,
.precos {
    color: #ffffff !important;
}

.preco-promocional {
    color: #ffffff !important;
    font-weight: 800;
}


/* =====================================================
   BOTÕES
   ===================================================== */

.botao,
.botao-principal,
.botao-comprar,
.btn-comprar,
.botao.principal {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    font-weight: 700;
}

.botao:hover,
.botao-principal:hover,
.botao-comprar:hover,
.btn-comprar:hover,
.botao.principal:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}


/* =====================================================
   MENU LATERAL
   ===================================================== */

.menu.lateral {
    background-color: #ffffff !important;
}

.menu.lateral li a {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.menu.lateral li a:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}


/* =====================================================
   NEWSLETTER
   ===================================================== */

.newsletter,
.newsletter .conteiner {
    background-color: #0b0b0b !important;
    color: #ffffff !important;
    border-color: #222222 !important;
}

.newsletter input {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}


/* =====================================================
   RODAPE
   ===================================================== */

#rodape,
.rodape {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-top: 1px solid #222222 !important;
}

#rodape a,
.rodape a {
    color: #ffffff !important;
}

#rodape a:hover,
.rodape a:hover {
    color: #aaaaaa !important;
}


/* =====================================================
   PAGINACAO
   ===================================================== */

.paginacao a,
.paginacao span {
    background-color: #0b0b0b !important;
    color: #ffffff !important;
    border-color: #222222 !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    #cabecalho,
    #cabecalho .conteiner {
        background-color: #000000 !important;
    }

    .menu.superior {
        background-color: #000000 !important;
    }

    .listagem .listagem-item {
        margin-bottom: 12px;
    }

    .botao-comprar,
    .botao.principal {
        width: 100%;
    }

}

/* =====================================================
   ELITE4i20 - HEADER PREMIUM
   ===================================================== */


/* HEADER PRINCIPAL */

#cabecalho {
    background-color: #000000 !important;
    border-bottom: 1px solid #222222 !important;
    box-shadow: none !important;
}


/* ÁREA INTERNA DO HEADER */

#cabecalho .conteiner {
    background-color: #000000 !important;
}


/* =====================================================
   LOGO
   ===================================================== */

#cabecalho .logo {
    background-color: transparent !important;
}

#cabecalho .logo img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}


/* =====================================================
   ÁREA DE BUSCA
   ===================================================== */

#cabecalho .busca {
    background-color: transparent !important;
}

#cabecalho .busca input {
    height: 44px;
    background-color: #111111 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 3px !important;
    color: #ffffff !important;
    padding-left: 16px;
    transition: border-color 0.25s ease;
}

#cabecalho .busca input:focus {
    border-color: #ffffff !important;
}

#cabecalho .busca input::placeholder {
    color: #777777 !important;
}


/* BOTÃO DA BUSCA */

#cabecalho .busca .botao-busca,
#cabecalho .busca button {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
}


/* =====================================================
   ÁREA DE CONTA
   ===================================================== */

#cabecalho .acoes-conta,
#cabecalho .conta,
#cabecalho .login {
    color: #ffffff !important;
}

#cabecalho .acoes-conta a,
#cabecalho .conta a,
#cabecalho .login a {
    color: #ffffff !important;
}


/* =====================================================
   CARRINHO
   ===================================================== */

#cabecalho .carrinho {
    background-color: transparent !important;
    color: #ffffff !important;
}

#cabecalho .carrinho a {
    color: #ffffff !important;
}

#cabecalho .carrinho .qtd-carrinho {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 700;
}


/* =====================================================
   MENU PRINCIPAL
   ===================================================== */

.menu.superior {
    background-color: #000000 !important;
    border-top: 1px solid #181818 !important;
    border-bottom: 1px solid #222222 !important;
}


.menu.superior .conteiner {
    background-color: #000000 !important;
}


/* LINKS DO MENU */

.menu.superior > .conteiner > .nivel-um > li > a,
.menu.superior .nivel-um > li > a {
    background-color: transparent !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 15px 18px !important;
    transition: all 0.2s ease;
}


/* HOVER */

.menu.superior .nivel-um > li > a:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* =====================================================
   SUBMENU
   ===================================================== */

.menu.superior .nivel-dois,
.menu.superior .nivel-tres {
    background-color: #0b0b0b !important;
    border: 1px solid #252525 !important;
}


.menu.superior .nivel-dois a,
.menu.superior .nivel-tres a {
    background-color: #0b0b0b !important;
    color: #ffffff !important;
    padding: 10px 15px !important;
}


.menu.superior .nivel-dois a:hover,
.menu.superior .nivel-tres a:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* =====================================================
   SEPARAÇÃO ENTRE HEADER E CONTEÚDO
   ===================================================== */

#cabecalho + #corpo {
    border-top: none !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    #cabecalho .logo img {
        max-height: 55px;
    }

    #cabecalho .busca input {
        height: 40px;
    }

    .menu.superior .nivel-um > li > a {
        padding: 12px 15px !important;
        font-size: 12px;
    }

}

/* =====================================================
   ELITE4i20 - VITRINE PREMIUM
   PRODUTOS / CARDS / PREÇOS
   ===================================================== */


/* =====================================================
   ÁREA DAS VITRINES
   ===================================================== */

.vitrine {
    background-color: transparent !important;
    padding-top: 25px;
    padding-bottom: 25px;
}


/* TÍTULO DA VITRINE */

.vitrine .titulo,
.vitrine h2,
.titulo-vitrine {
    color: #ffffff !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 25px !important;
}


/* LINHA DECORATIVA ABAIXO DO TÍTULO */

.vitrine .titulo:after,
.vitrine h2:after,
.titulo-vitrine:after {
    content: "";
    display: block;
    width: 45px;
    height: 2px;
    background-color: #ffffff;
    margin: 10px auto 0;
}


/* =====================================================
   GRID DE PRODUTOS
   ===================================================== */

.listagem {
    background-color: transparent !important;
}


/* =====================================================
   CARD
   ===================================================== */

.listagem .listagem-item {
    background-color: #080808 !important;
    border: 1px solid #202020 !important;
    border-radius: 2px !important;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* EFEITO AO PASSAR O MOUSE */

.listagem .listagem-item:hover {
    transform: translateY(-5px);
    border-color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65);
}


/* =====================================================
   IMAGEM DO PRODUTO
   ===================================================== */

.listagem .listagem-item .imagem-produto,
.listagem .listagem-item .imagem {
    background-color: #050505 !important;
    overflow: hidden;
}


/* IMAGEM */

.listagem .listagem-item img {
    transition: transform 0.35s ease;
}


/* ZOOM SUTIL */

.listagem .listagem-item:hover img {
    transform: scale(1.035);
}


/* =====================================================
   INFORMAÇÕES DO PRODUTO
   ===================================================== */

.listagem .listagem-item .info-produto {
    background-color: #080808 !important;
    padding: 14px !important;
}


/* =====================================================
   NOME DO PRODUTO
   ===================================================== */

.listagem .listagem-item .nome-produto {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4;
}


/* HOVER NO NOME */

.listagem .listagem-item:hover .nome-produto {
    color: #ffffff !important;
}


/* =====================================================
   PREÇO ANTIGO
   ===================================================== */

.listagem .listagem-item .preco-venda,
.listagem .listagem-item .preco-de {
    color: #777777 !important;
    font-size: 12px;
    text-decoration: line-through;
}


/* =====================================================
   PREÇO ATUAL
   ===================================================== */

.listagem .listagem-item .preco-promocional,
.listagem .listagem-item .preco {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}


/* =====================================================
   CONDIÇÃO DE PAGAMENTO
   ===================================================== */

.listagem .listagem-item .preco-parcela,
.listagem .listagem-item .preco-parcela strong {
    color: #999999 !important;
    font-size: 11px;
}


/* =====================================================
   BOTÃO COMPRAR
   ===================================================== */

.listagem .listagem-item .botao-comprar,
.listagem .listagem-item .botao.principal,
.listagem .listagem-item .btn-comprar {
    width: 100%;
    margin-top: 12px;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    border-radius: 2px !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 11px 10px !important;
    transition: all 0.25s ease;
}


/* HOVER BOTÃO */

.listagem .listagem-item .botao-comprar:hover,
.listagem .listagem-item .botao.principal:hover,
.listagem .listagem-item .btn-comprar:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}


/* =====================================================
   SELO DE DESCONTO
   ===================================================== */

.listagem .listagem-item .desconto,
.listagem .listagem-item .bandeira {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    border-radius: 0 !important;
}


/* =====================================================
   PAGINAÇÃO / CONTROLES DA VITRINE
   ===================================================== */

.vitrine .flex-direction-nav a,
.vitrine .slick-arrow {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

.vitrine .flex-direction-nav a:hover,
.vitrine .slick-arrow:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* =====================================================
   ESPAÇAMENTO ENTRE PRODUTOS
   ===================================================== */

@media (min-width: 768px) {

    .listagem .listagem-item {
        margin-bottom: 20px;
    }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    .vitrine {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .vitrine .titulo,
    .vitrine h2,
    .titulo-vitrine {
        font-size: 17px !important;
        letter-spacing: 1px;
    }

    .listagem .listagem-item {
        margin-bottom: 12px;
    }

    .listagem .listagem-item .nome-produto {
        font-size: 13px !important;
    }

    .listagem .listagem-item .preco-promocional,
    .listagem .listagem-item .preco {
        font-size: 16px !important;
    }

}

@media only screen and (max-width: 767px) {

    .listagem-linha ul {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .listagem-linha ul li.span3 {
        width: 50% !important;
        float: left !important;
        padding: 0 5px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .listagem-linha ul li.span3 .listagem-item {
        margin: 0 !important;
    }

}

@media only screen and (max-width: 767px) {

    .listagem-linha ul {
        overflow: hidden !important;
    }

    .listagem-linha ul li.span3:nth-child(2n+1) {
        clear: left !important;
    }

}
@media only screen and (max-width: 767px) {

    .listagem-linha ul li.span3 {
        vertical-align: top !important;
    }

}

 /* =====================================================
    ELITE4i20 - ACABAMENTO VISUAL DOS CARDS
    NÃO ALTERA A GRADE
    ===================================================== */

/* Borda e acabamento externo */
.listagem .listagem-item {
    background: #080808 !important;
    border: 1px solid #222 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* Área da imagem */
.listagem .listagem-item .imagem-produto {
    background: #fff !important;
    border-bottom: 1px solid #222 !important;
    text-align: center !important;
}

/* Imagem */
.listagem .listagem-item .imagem-produto img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Área das informações */
.listagem .listagem-item .info-produto {
    background: #080808 !important;
    padding: 12px 10px !important;
    text-align: left !important;
}

/* Nome */
.listagem .listagem-item .nome-produto {
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Preços */
.listagem .listagem-item .preco-produto {
    color: #fff !important;
}

.listagem .listagem-item .preco-promocional,
.listagem .listagem-item .preco-venda {
    color: #fff !important;
    font-weight: 800 !important;
}

/* Preço anterior */
.listagem .listagem-item .preco-antigo {
    color: #777 !important;
}

/* Botão Comprar */
.listagem .listagem-item .botao-comprar {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
}

/* Hover */
.listagem .listagem-item .botao-comprar:hover {
    background: #000 !important;
    color: #fff !important;
}

/* =====================================================
   ELITE4i20 - BOTÃO + SOBRE A IMAGEM
   NÃO ALTERA A GRADE DOS PRODUTOS
   ===================================================== */

.listagem .listagem-item .imagem-produto {
    position: relative !important;
}

/* BOTÃO + */
.listagem .listagem-item .imagem-produto::after {
    content: "+" !important;
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;

    width: 34px !important;
    height: 34px !important;

    background: #000 !important;
    color: #fff !important;

    border: 1px solid #fff !important;
    border-radius: 50% !important;

    display: block !important;

    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 31px !important;
    text-align: center !important;

    box-sizing: border-box !important;
}

/* Pequeno efeito no computador */
@media only screen and (min-width: 768px) {

    .listagem .listagem-item:hover .imagem-produto::after {
        background: #fff !important;
        color: #000 !important;
    }

}

.elite420-botao-mais {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #000 !important;
    color: #fff !important;

    border: 1px solid #fff !important;
    border-radius: 50% !important;

    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 31px !important;

    text-align: center !important;
    cursor: pointer !important;

    z-index: 20 !important;
    box-sizing: border-box !important;
}

.elite420-botao-mais:hover {
    background: #fff !important;
    color: #000 !important;
}

.listagem .listagem-item .imagem-produto::after {
    pointer-events: none !important;
}

.elite420-botao-mais {
    transition: all 0.2s ease !important;
}

.elite420-botao-mais:hover {
    transform: scale(1.1) !important;
}

@media only screen and (max-width: 767px) {

    .elite420-botao-mais {
        width: 38px !important;
        height: 38px !important;
        line-height: 35px !important;
        font-size: 26px !important;
    }

}

/* =====================================================
   ELITE4i20 - 2 PRODUTOS POR LINHA NA HOME MOBILE
   SOMENTE VITRINES DA PÁGINA INICIAL
   ===================================================== */

@media only screen and (max-width: 767px) {

    /* Vitrine da Home */
    .vitrine-lancamento .listagem-linha ul,
    .vitrine-melhores-vendidos .listagem-linha ul,
    .vitrine-destaques .listagem-linha ul,
    .vitrine-mais-vendidos .listagem-linha ul,
    .vitrine-por-categoria .listagem-linha ul,
    .vitrine-maiores-descontos .listagem-linha ul {

        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }


    .vitrine-lancamento .listagem-linha ul li.span3,
    .vitrine-melhores-vendidos .listagem-linha ul li.span3,
    .vitrine-destaques .listagem-linha ul li.span3,
    .vitrine-mais-vendidos .listagem-linha ul li.span3,
    .vitrine-por-categoria .listagem-linha ul li.span3,
    .vitrine-maiores-descontos .listagem-linha ul li.span3 {

        width: 50% !important;
        float: left !important;
        padding: 0 5px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }


    .vitrine-lancamento .listagem-linha ul li.span3 .listagem-item,
    .vitrine-melhores-vendidos .listagem-linha ul li.span3 .listagem-item,
    .vitrine-destaques .listagem-linha ul li.span3 .listagem-item,
    .vitrine-mais-vendidos .listagem-linha ul li.span3 .listagem-item,
    .vitrine-por-categoria .listagem-linha ul li.span3 .listagem-item,
    .vitrine-maiores-descontos .listagem-linha ul li.span3 .listagem-item {

        margin: 0 !important;
    }


    /* Começa uma nova linha a cada 2 produtos */
    .vitrine-lancamento .listagem-linha ul li.span3:nth-child(2n+1),
    .vitrine-melhores-vendidos .listagem-linha ul li.span3:nth-child(2n+1),
    .vitrine-destaques .listagem-linha ul li.span3:nth-child(2n+1),
    .vitrine-mais-vendidos .listagem-linha ul li.span3:nth-child(2n+1),
    .vitrine-por-categoria .listagem-linha ul li.span3:nth-child(2n+1),
    .vitrine-maiores-descontos .listagem-linha ul li.span3:nth-child(2n+1) {

        clear: left !important;
    }

}

/* =====================================================
   ELITE4i20 - HOME MOBILE
   2 PRODUTOS POR LINHA
   ===================================================== */

@media only screen and (max-width: 767px) {

    .listagem-linha .span3 {
        width: 50% !important;
        padding-top: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        float: left !important;
        box-sizing: border-box !important;
    }

    .listagem-linha li {
        margin-top: 0 !important;
    }

    .listagem-linha ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .listagem-linha .span3:nth-child(2n+1) {
        clear: left !important;
    }

}

/* =====================================================
   ELITE4i20 - HOME MOBILE
   2 PRODUTOS POR LINHA
   ===================================================== */

@media only screen and (max-width: 767px) {

    #listagemProdutos li.listagem-linha li.span3 {
        width: 50% !important;
        margin: 0 !important;
        padding: 0 5px !important;
        float: left !important;
        box-sizing: border-box !important;
    }

    #listagemProdutos li.listagem-linha li.span3:nth-child(2n+1) {
        clear: left !important;
    }

    #listagemProdutos li.listagem-linha ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

}

/* =====================================================
   ELITE4i20 - CARD ESTILO DA MATA (FASE 1 - v3)
   ===================================================== */

/* ---------- CARD: cantos arredondados ---------- */
.listagem .listagem-item {
    border-radius: 14px !important;
    border: 1px solid #1f1f1f !important;
    overflow: hidden !important; /* <- volta para hidden (grid fica certo) */
}

/* ---------- IMAGEM: cantos de cima arredondados ---------- */
.listagem .listagem-item .imagem-produto {
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
}

/* ---------- BOTÃO "+": sombra suave ---------- */
.elite420-botao-mais {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- NOME: 2 linhas + altura fixa (alinha os cards) ---------- */
.listagem .listagem-item .nome-produto {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.35 !important;
    min-height: 2.7em !important; /* <- volta o min-height (alinha os cards) */
}

/* ---------- PREÇO ANTIGO: cinza riscado ---------- */
.listagem .listagem-item .preco-venda,
.listagem .listagem-item .preco-de,
.listagem .listagem-item .preco-antigo,
.listagem .listagem-item .preco-riscado,
.listagem .listagem-item del,
.listagem .listagem-item .preco-produto del,
.listagem .listagem-item .preco-por,
.listagem .listagem-item .preco-normal {
    color: #888 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* ---------- PREÇO ATUAL: branco em destaque ---------- */
.listagem .listagem-item .preco-promocional,
.listagem .listagem-item .preco {
    color: #fff !important;
    font-weight: 800 !important;
}

/* ---------- SELO DE DESCONTO ---------- */
.listagem .listagem-item .desconto,
.listagem .listagem-item .bandeira,
.listagem .listagem-item .selo-desconto,
.listagem .listagem-item .selo {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

/* ---------- BOTÃO COMPRAR: esconder (reforçado) ---------- */
.listagem .listagem-item .botao-comprar,
.listagem .listagem-item .botao.principal,
.listagem .listagem-item .btn-comprar,
.listagem .listagem-item .botao,
.listagem .listagem-item a.botao,
.listagem .listagem-item button.botao,
.listagem .listagem-item .acoes-produto,
.listagem .listagem-item .comprar,
.listagem .listagem-item .botao-comprar-produto,
.listagem .listagem-item .btn-comprar-produto,
.listagem .listagem-item [class*="comprar"],
.listagem .listagem-item [class*="Comprar"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* ---------- ESPAÇAMENTO INTERNO ---------- */
.listagem .listagem-item .info-produto {
    padding: 14px 12px 16px !important;
}

/* ---------- MOBILE ---------- */
@media only screen and (max-width: 767px) {
    .listagem .listagem-item {
        border-radius: 12px !important;
    }
    .listagem .listagem-item .imagem-produto {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }
    .listagem .listagem-item .info-produto {
        padding: 12px 10px 14px !important;
    }
}

/* =====================================================
   ELITE4i20 - CORREÇÃO DO EMPILHAMENTO DOS CARDS
   Garante que os cards fiquem LADO A LADO
   ===================================================== */

/* ---------- DESKTOP: 4 cards por linha ---------- */
@media only screen and (min-width: 768px) {

    .listagem-linha ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .listagem-linha ul li.span3 {
        width: 25% !important;
        float: left !important;
        padding: 0 8px !important;
        margin: 0 0 16px 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        clear: none !important;
    }

    /* A cada 4 cards, limpa o float (nova linha) */
    .listagem-linha ul li.span3:nth-child(4n+1) {
        clear: left !important;
    }

    /* Remove o clear do 2n+1 (que era do mobile) */
    .listagem-linha ul li.span3:nth-child(2n+1) {
        clear: none !important;
    }
}

/* ---------- MOBILE: 2 cards por linha ---------- */
@media only screen and (max-width: 767px) {

    .listagem-linha ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .listagem-linha ul li.span3 {
        width: 50% !important;
        float: left !important;
        padding: 0 5px !important;
        margin: 0 0 12px 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        clear: none !important;
    }

    /* A cada 2 cards, limpa o float (nova linha) */
    .listagem-linha ul li.span3:nth-child(2n+1) {
        clear: left !important;
    }

    .listagem-linha ul li.span3:nth-child(4n+1) {
        clear: none !important;
    }
}

/* =====================================================
   ELITE4i20 - CORREÇÃO FINAL MOBILE
   2 CARDS POR LINHA (sobrepõe tudo que vier antes)
   ===================================================== */

@media only screen and (max-width: 767px) {

    /* ---------- UL: container da linha ---------- */
    .listagem-linha ul,
    .listagem-linha > ul,
    ul.listagem-linha,
    #listagemProdutos .listagem-linha ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }

    /* ---------- LI: cada card ---------- */
    .listagem-linha ul li.span3,
    .listagem-linha ul li,
    ul.listagem-linha > li,
    #listagemProdutos .listagem-linha ul li.span3,
    #listagemProdutos .listagem-linha ul li {
        width: 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        float: left !important;
        padding: 0 5px !important;
        margin: 0 0 12px 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        clear: none !important;
        vertical-align: top !important;
    }

    /* ---------- Quebra de linha a cada 2 cards ---------- */
    .listagem-linha ul li.span3:nth-child(2n+1),
    .listagem-linha ul li:nth-child(2n+1),
    #listagemProdutos .listagem-linha ul li.span3:nth-child(2n+1),
    #listagemProdutos .listagem-linha ul li:nth-child(2n+1) {
        clear: left !important;
    }

    /* ---------- Remove clear do 4n+1 (era do desktop) ---------- */
    .listagem-linha ul li.span3:nth-child(4n+1),
    .listagem-linha ul li:nth-child(4n+1) {
        clear: none !important;
    }

    /* ---------- Card dentro do LI ---------- */
    .listagem-linha ul li.span3 .listagem-item,
    .listagem-linha ul li .listagem-item {
        margin: 0 !important;
        width: 100% !important;
    }

    /* ---------- Remove qualquer float/width que o tema force ---------- */
    .listagem .listagem-item {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================
   ELITE4i20 - AJUSTE DA ÁREA BRANCA DA IMAGEM (v2)
   Proporção ajustada: 90% (levemente retangular)
   ===================================================== */

/* ---------- Container da imagem: proporção controlada ---------- */
.listagem .listagem-item .imagem-produto {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 90% !important; /* <- aumentado de 75% para 90% */
    overflow: hidden !important;
    background: #fff !important;
}

/* ---------- Imagem: encaixada dentro do container ---------- */
.listagem .listagem-item .imagem-produto img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 80% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ---------- Garantir que o card não fique gigante ---------- */
.listagem .listagem-item {
    display: flex !important;
    flex-direction: column !important;
}

.listagem .listagem-item .info-produto {
    flex: 1 1 auto !important;
}

/* ---------- MOBILE: mesma proporção ---------- */
@media only screen and (max-width: 767px) {
    .listagem .listagem-item .imagem-produto {
        padding-bottom: 90% !important;
    }
    .listagem .listagem-item .imagem-produto img {
        max-width: 85% !important;
        max-height: 85% !important;
    }
}

/* =====================================================
   ELITE4i20 - CENTRALIZAÇÃO + PROPORÇÃO 78%
   ===================================================== */

/* ---------- Container da imagem ---------- */
.listagem .listagem-item .imagem-produto {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 78% !important; /* <- ajustado de 82% para 78% */
    overflow: hidden !important;
    background: #fff !important;
}

/* ---------- Imagem: centralizada via flex ---------- */
.listagem .listagem-item .imagem-produto img {
    position: static !important;
    transform: none !important;
    max-width: 80% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* ---------- Botão "+": sempre no canto inferior direito ---------- */
.elite420-botao-mais {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    left: auto !important;
    z-index: 20 !important;
}

/* ---------- Remove o "+" fantasma do CSS antigo ---------- */
.listagem .listagem-item .imagem-produto::after {
    display: none !important;
    content: none !important;
}

/* ---------- MOBILE ---------- */
@media only screen and (max-width: 767px) {
    .listagem .listagem-item .imagem-produto {
        padding-bottom: 78% !important;
    }
    .listagem .listagem-item .imagem-produto img {
        max-width: 85% !important;
        max-height: 85% !important;
    }
}

/* =====================================================
   ELITE4i20 - PROPORÇÃO VIA HEIGHT FORÇADO (v3)
   Área branca reduzida mais um pouco
   ===================================================== */

.listagem .listagem-item .imagem-produto {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    height: 230px !important;           /* <- reduzido de 270px */
    max-height: 230px !important;
    min-height: 230px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.listagem .listagem-item .imagem-produto img {
    position: static !important;
    transform: none !important;
    max-width: 80% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

.elite420-botao-mais {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    left: auto !important;
    z-index: 20 !important;
}

.listagem .listagem-item .imagem-produto::after {
    display: none !important;
    content: none !important;
}

/* ---------- MOBILE ---------- */
@media only screen and (max-width: 767px) {
    .listagem .listagem-item .imagem-produto {
        height: 170px !important;       /* <- reduzido de 200px */
        max-height: 170px !important;
        min-height: 170px !important;
    }
    .listagem .listagem-item .imagem-produto img {
        max-width: 85% !important;
        max-height: 85% !important;
    }
}

/* =====================================================
   ELITE4i20 - DESCRIÇÃO NO CARD (3 linhas)
   ===================================================== */

.elite420-descricao {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;        /* <- 3 linhas */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #999 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #2a2a2a !important;
    min-height: 4.2em !important;             /* <- 3 linhas x 1.4 */
    text-align: left !important;
}

@media only screen and (max-width: 767px) {
    .elite420-descricao {
        font-size: 11px !important;
        min-height: 4em !important;            /* <- 3 linhas no mobile */
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }
}