/* Remove a barra lateral das páginas de categoria */
.pagina-categoria .coluna.span3 {
    display: none !important;
}

/* Faz os produtos ocuparem toda a largura */
.pagina-categoria .conteudo.span9 {
    width: 100% !important;
    margin-left: 0 !important;
}

/* Banner principal - Barra Dez */
.banner.cheio {
    max-width: 1360px;
    margin: 20px auto;
    border-radius: 16px;
    overflow: hidden;
}

/* Deixa o banner mais baixo */
.banner.cheio img {
    width: 100% !important;
    height: 360px !important;
    object-fit: cover;
}

/* No celular não força a altura */
@media (max-width: 767px) {
    .banner.cheio {
        margin: 10px;
        border-radius: 12px;
    }

    .banner.cheio img {
        height: auto !important;
    }
}

/* =========================================================
   BARRA DEZ — IDENTIDADE VISUAL
   #050505 = PRETO
   #E2F754 = VERDE NEON
   #FFFFFF = BRANCO
========================================================= */


/* =========================================================
   1. FUNDO GERAL DO SITE
========================================================= */

html,
body,
#corpo,
#corpo .conteiner,
.conteiner-principal,
.pagina-inicial,
.pagina-categoria,
.pagina-produto {
    background: #FFFFFF !important;
    color: #050505 !important;
}


/* =========================================================
   2. BARRA SUPERIOR
   PRETA COM TEXTO BRANCO
========================================================= */

.barra-inicial,
.barra-inicial .conteiner,
.barra-inicial ul,
.barra-inicial li {
    background: #050505 !important;
    color: #FFFFFF !important;
}

.barra-inicial a,
.barra-inicial span,
.barra-inicial i,
.barra-inicial strong {
    color: #FFFFFF !important;
}

.barra-inicial a:hover,
.barra-inicial a:hover span,
.barra-inicial a:hover i {
    color: #E2F754 !important;
}


/* =========================================================
   3. CABEÇALHO PRINCIPAL
   BRANCO + TEXTO PRETO
========================================================= */

#cabecalho,
#cabecalho .conteiner,
#cabecalho .row-fluid {
    background: #FFFFFF !important;
    color: #050505 !important;
}

#cabecalho a,
#cabecalho span,
#cabecalho strong,
#cabecalho i {
    color: #050505 !important;
}


/* =========================================================
   4. CAMPO DE BUSCA
========================================================= */

#cabecalho .busca,
#cabecalho .busca form {
    background: #FFFFFF !important;
}

#cabecalho .busca input {
    background: #FFFFFF !important;
    color: #050505 !important;

    border: 2px solid #050505 !important;
    box-shadow: none !important;
}

#cabecalho .busca input::placeholder {
    color: #050505 !important;
    opacity: 1;
}


/* BOTÃO DA BUSCA */

#cabecalho .busca .botao {
    background: #E2F754 !important;
    border-color: #E2F754 !important;
    color: #050505 !important;
}

#cabecalho .busca .botao i {
    color: #050505 !important;
}


/* =========================================================
   5. CARRINHO
========================================================= */

#cabecalho .carrinho,
#cabecalho .carrinho a {
    background: #FFFFFF !important;
    color: #050505 !important;
}

#cabecalho .carrinho i {
    color: #050505 !important;
}


/* contador do carrinho */

#cabecalho .carrinho .qtd-carrinho,
#cabecalho .carrinho .numero-itens {
    background: #E2F754 !important;
    color: #050505 !important;
}


/* =========================================================
   6. MENU PRINCIPAL
========================================================= */

.menu.superior,
.menu.superior .nivel-um,
#cabecalho .menu.superior {
    background: #FFFFFF !important;
    border-color: #050505 !important;
}


/* links */

.menu.superior .nivel-um > li {
    background: #FFFFFF !important;
}

.menu.superior .nivel-um > li > a,
.menu.superior .nivel-um > li > a strong {
    color: #050505 !important;
    background: #FFFFFF !important;
}


/* hover do menu */

.menu.superior .nivel-um > li:hover > a,
.menu.superior .nivel-um > li:hover > a strong {
    background: #E2F754 !important;
    color: #050505 !important;
}


/* submenu */

.menu.superior .nivel-dois,
.menu.superior .nivel-tres {
    background: #FFFFFF !important;
    border-color: #050505 !important;
}

.menu.superior .nivel-dois li,
.menu.superior .nivel-tres li {
    background: #FFFFFF !important;
}

.menu.superior .nivel-dois a,
.menu.superior .nivel-tres a {
    color: #050505 !important;
}

.menu.superior .nivel-dois li:hover,
.menu.superior .nivel-tres li:hover,
.menu.superior .nivel-dois a:hover,
.menu.superior .nivel-tres a:hover {
    background: #E2F754 !important;
    color: #050505 !important;
}


/* =========================================================
   7. ÁREA PRINCIPAL
========================================================= */

#corpo,
#corpo .conteiner,
.secao-principal,
.conteudo,
.conteudo.span9,
.conteudo.span12 {
    background: #FFFFFF !important;
    color: #050505 !important;
}


/* =========================================================
   8. TÍTULOS
========================================================= */

#corpo h1,
#corpo h2,
#corpo h3,
#corpo h4,
#corpo h5,
.titulo-categoria,
.listagem .titulo-categoria {
    color: #050505 !important;
}


/* detalhe neon abaixo de títulos */

.listagem .titulo-categoria {
    border-bottom: 3px solid #E2F754 !important;
}


/* =========================================================
   9. VITRINE DE PRODUTOS
========================================================= */

.listagem,
.listagem .listagem-linha,
.listagem .listagem-item {
    background: #FFFFFF !important;
    color: #050505 !important;
}


/* Nome do produto */

.listagem .nome-produto,
.listagem .nome-produto a,
.listagem-item .nome-produto {
    color: #050505 !important;
}


/* Todos os preços em preto */

.listagem .preco-produto,
.listagem .preco-produto span,
.listagem .preco-produto strong,
.listagem .preco-promocional,
.listagem .preco-a-partir,
.listagem .preco-venda,
.listagem .parcelas-produto,
.listagem .preco-parcela {
    color: #050505 !important;
}


/* =========================================================
   10. BOTÕES — VERDE NEON
========================================================= */

.botao,
.botao.principal,
.botao-comprar,
.acoes-produto .botao,
.acoes-produto-responsiva .botao,
.listagem .botao,
#finalizarCompra {
    background: #E2F754 !important;
    background-image: none !important;

    color: #050505 !important;

    border: 2px solid #E2F754 !important;
    box-shadow: none !important;
}


/* tudo dentro do botão preto */

.botao *,
.botao.principal *,
.botao-comprar *,
.acoes-produto .botao *,
.acoes-produto-responsiva .botao * {
    color: #050505 !important;
}


/* hover */

.botao:hover,
.botao.principal:hover,
.botao-comprar:hover,
.acoes-produto .botao:hover,
.acoes-produto-responsiva .botao:hover,
.listagem .botao:hover,
#finalizarCompra:hover {
    background: #050505 !important;
    border-color: #050505 !important;
    color: #FFFFFF !important;
}

.botao:hover *,
.botao.principal:hover *,
.botao-comprar:hover *,
.acoes-produto .botao:hover *,
.acoes-produto-responsiva .botao:hover * {
    color: #FFFFFF !important;
}


/* =========================================================
   11. LINKS
========================================================= */

#corpo a {
    color: #050505 !important;
}

#corpo a:hover {
    color: #050505 !important;
}


/* não deixar links internos dos botões sobrescreverem */

#corpo .botao,
#corpo .botao *,
#corpo .botao.principal,
#corpo .botao.principal * {
    color: #050505 !important;
}

#corpo .botao:hover,
#corpo .botao:hover *,
#corpo .botao.principal:hover,
#corpo .botao.principal:hover * {
    color: #FFFFFF !important;
}


/* =========================================================
   12. PÁGINA DO PRODUTO
========================================================= */

.produto,
.produto .principal,
.produto .acoes-produto,
.produto .descricao,
.produto .tab-content,
.produto .informacoes {
    background: #FFFFFF !important;
    color: #050505 !important;
}

.produto .nome-produto,
.produto .preco-produto,
.produto .preco-produto span,
.produto .preco-produto strong,
.produto .parcelas-produto,
.produto .preco-promocional,
.produto .preco-venda {
    color: #050505 !important;
}


/* =========================================================
   13. FILTROS / CATEGORIAS
========================================================= */

.coluna,
.coluna .filtro,
.coluna .menu.lateral,
.menu.lateral {
    background: #FFFFFF !important;
    color: #050505 !important;
}

.coluna a,
.coluna span,
.coluna strong,
.menu.lateral a {
    color: #050505 !important;
}

.menu.lateral li:hover,
.menu.lateral a:hover {
    background: #E2F754 !important;
    color: #050505 !important;
}


/* =========================================================
   14. CAMPOS E FORMULÁRIOS
========================================================= */

#corpo input,
#corpo select,
#corpo textarea {
    background: #FFFFFF !important;
    color: #050505 !important;
    border: 2px solid #050505 !important;
    box-shadow: none !important;
}

#corpo input:focus,
#corpo select:focus,
#corpo textarea:focus {
    border-color: #E2F754 !important;
    outline: none !important;
}


/* =========================================================
   15. PAGINAÇÃO
========================================================= */

.paginacao a {
    background: #FFFFFF !important;
    color: #050505 !important;
    border: 1px solid #050505 !important;
}

.paginacao a:hover,
.paginacao .ativo a {
    background: #E2F754 !important;
    color: #050505 !important;
    border-color: #E2F754 !important;
}


/* =========================================================
   16. NEWSLETTER
========================================================= */

.newsletter,
.newsletter .conteiner {
    background: #FFFFFF !important;
    color: #050505 !important;
}

.newsletter .titulo,
.newsletter p,
.newsletter span {
    color: #050505 !important;
}

.newsletter input {
    background: #FFFFFF !important;
    color: #050505 !important;
    border: 2px solid #050505 !important;
}

.newsletter .botao {
    background: #E2F754 !important;
    color: #050505 !important;
    border-color: #E2F754 !important;
}


/* =========================================================
   17. RODAPÉ
   BRANCO + TEXTO PRETO
========================================================= */

#rodape,
#rodape .institucional,
#rodape .institucional .conteiner,
#rodape .pagamento-selos,
#rodape .pagamento-selos .conteiner {
    background: #FFFFFF !important;
    color: #050505 !important;
}

#rodape h1,
#rodape h2,
#rodape h3,
#rodape h4,
#rodape .titulo,
#rodape p,
#rodape span,
#rodape strong,
#rodape a,
#rodape i {
    color: #050505 !important;
}


/* detalhe de separação do rodapé */

#rodape {
    border-top: 3px solid #E2F754 !important;
}


/* hover */

#rodape a:hover {
    color: #050505 !important;
    background: #E2F754 !important;
}


/* =========================================================
   18. ELEMENTOS PADRÃO DA LOJA INTEGRADA
========================================================= */

.cor-principal {
    color: #050505 !important;
}

.fundo-principal {
    background: #E2F754 !important;
    color: #050505 !important;
}

.borda-principal {
    border-color: #E2F754 !important;
}


/* badges / etiquetas */

.etiqueta,
.label,
.badge {
    background: #E2F754 !important;
    color: #050505 !important;
}


/* =========================================================
   19. SELEÇÃO DE TEXTO
========================================================= */

::selection {
    background: #E2F754 !important;
    color: #050505 !important;
}


/* =========================================================
   20. MOBILE
========================================================= */

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

    body,
    #corpo,
    #corpo .conteiner {
        background: #FFFFFF !important;
    }

    .barra-inicial,
    .barra-inicial .conteiner {
        background: #050505 !important;
    }

    .barra-inicial a,
    .barra-inicial span,
    .barra-inicial i {
        color: #FFFFFF !important;
    }

    #cabecalho,
    #cabecalho .conteiner {
        background: #FFFFFF !important;
    }

}