/* ==========================================================
   ESOFT SISTEMAS — TEMA 5.0
   MÓDULO 01 — IDENTIDADE VISUAL + CABEÇALHO
   Baseado na estrutura nativa documentada da Loja Integrada.

   IMPORTANTE:
   - Não altera display, position, float, flex, overflow ou z-index.
   - Não altera abertura de menu, submenu, login ou carrinho.
   - Não altera a hierarquia .nivel-um, .nivel-dois e .nivel-tres.
   ========================================================== */


/* ==========================================================
   01. BASE VISUAL
   ========================================================== */

body {
    background-color: #F4F7FA !important;
    color: #263746 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
}

a {
    color: #06376B;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #78AA16;
    text-decoration: none;
}

.titulo {
    color: #06376B;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
}

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

.fundo-principal {
    background-color: #06376B !important;
}

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

.cor-secundaria {
    color: #78AA16 !important;
}

.fundo-secundario {
    background-color: #78AA16 !important;
}


/* ==========================================================
   02. CONTEÚDO GERAL
   ========================================================== */

.conteiner {
    background-color: #FFFFFF;
}

#corpo > .conteiner {
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(6, 55, 107, 0.06);
}


/* ==========================================================
   03. CABEÇALHO — ACABAMENTO VISUAL
   ========================================================== */

#cabecalho {
    background-color: #FFFFFF !important;
    border-top: 4px solid #06376B !important;
    border-bottom: 1px solid #DCE4EC !important;
    box-shadow: 0 5px 18px rgba(6, 55, 107, 0.08) !important;
}

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

#cabecalho .logo img {
    opacity: 1;
    transition: opacity 0.2s ease;
}

#cabecalho .logo a:hover img {
    opacity: 0.94;
}


/* ==========================================================
   04. ÁREA DE LOGIN, DÚVIDAS E CARRINHO
   Somente cores, tipografia e acabamento.
   ========================================================== */

#cabecalho .actions-menu a,
#cabecalho .menu-login a,
#cabecalho .menu-carrinho a {
    color: #263746 !important;
    text-decoration: none !important;
}

#cabecalho .actions-menu a:hover,
#cabecalho .actions-menu a:focus,
#cabecalho .menu-login a:hover,
#cabecalho .menu-login a:focus,
#cabecalho .menu-carrinho a:hover,
#cabecalho .menu-carrinho a:focus {
    color: #06376B !important;
}

#cabecalho .actions-menu strong,
#cabecalho .menu-login strong,
#cabecalho .menu-carrinho strong,
#cabecalho .menu-carrinho .total-carrinho {
    color: #06376B !important;
    font-weight: 700 !important;
}

#cabecalho .actions-menu i,
#cabecalho .menu-login i,
#cabecalho .menu-carrinho i {
    color: #78AA16 !important;
    text-shadow: none !important;
}


/* ==========================================================
   05. CAMPO DE BUSCA
   Mantém o formulário e o botão nas posições nativas.
   ========================================================== */

#cabecalho .busca {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#cabecalho .busca input,
#cabecalho .busca input[type="search"],
#cabecalho .busca input[type="text"] {
    background-color: #FFFFFF !important;
    border: 1px solid #D8E1EA !important;
    border-radius: 8px !important;
    color: #263746 !important;
    box-shadow: 0 4px 12px rgba(6, 55, 107, 0.08) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#cabecalho .busca input:focus,
#cabecalho .busca input[type="search"]:focus,
#cabecalho .busca input[type="text"]:focus {
    border-color: #78AA16 !important;
    box-shadow: 0 0 0 3px rgba(120, 170, 22, 0.15) !important;
    outline: none !important;
}

#cabecalho .busca input::-webkit-input-placeholder {
    color: #7B8996 !important;
}

#cabecalho .busca input:-moz-placeholder {
    color: #7B8996 !important;
}

#cabecalho .busca input::-moz-placeholder {
    color: #7B8996 !important;
}

#cabecalho .busca input:-ms-input-placeholder {
    color: #7B8996 !important;
}

#cabecalho .busca .botao-busca {
    background-color: #78AA16 !important;
    border-color: #78AA16 !important;
    border-radius: 7px !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

#cabecalho .busca .botao-busca:hover,
#cabecalho .busca .botao-busca:focus {
    background-color: #689612 !important;
    border-color: #689612 !important;
    color: #FFFFFF !important;
}


/* ==========================================================
   06. BOTÕES GERAIS
   ========================================================== */

.botao {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD7E2 !important;
    border-radius: 7px !important;
    color: #06376B !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease !important;
}

.botao:not(.botao-input):not(.newsletter-assinar):hover,
.botao:not(.botao-input):not(.newsletter-assinar):focus {
    background-color: #F2F7E8 !important;
    border-color: #78AA16 !important;
    color: #06376B !important;
    box-shadow: 0 4px 10px rgba(6, 55, 107, 0.08) !important;
}

.botao.principal,
.botao.fundo-principal {
    background-color: #06376B !important;
    border-color: #06376B !important;
    color: #FFFFFF !important;
}

.botao.principal:hover,
.botao.principal:focus,
.botao.fundo-principal:hover,
.botao.fundo-principal:focus {
    background-color: #0B4A87 !important;
    border-color: #0B4A87 !important;
    color: #FFFFFF !important;
}


/* ==========================================================
   07. FORMULÁRIOS
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border-color: #D8E1EA;
    border-radius: 6px;
    color: #263746;
    box-shadow: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: #78AA16;
    box-shadow: 0 0 0 2px rgba(120, 170, 22, 0.13);
    outline: none;
}


/* ==========================================================
   08. MOBILE — SOMENTE ACABAMENTO VISUAL
   ========================================================== */

@media screen and (max-width: 767px) {
    body {
        background-color: #FFFFFF !important;
    }

    #cabecalho {
        border-top-width: 3px !important;
        box-shadow: 0 3px 12px rgba(6, 55, 107, 0.08) !important;
    }

    #cabecalho .busca input,
    #cabecalho .busca input[type="search"],
    #cabecalho .busca input[type="text"] {
        border-radius: 7px !important;
    }

    #corpo > .conteiner {
        border-radius: 0;
        box-shadow: none;
    }
}

/* ==========================================================
ESOFT TEMA 5.0
MÓDULO 02 - MENU SUPERIOR (SOMENTE VISUAL)
Não altera display, position, float, flex, overflow ou z-index.
========================================================== */

/* Barra principal */
.menu.superior{
    background:#06376B !important;
    border-top:1px solid #0B4A87 !important;
    border-bottom:4px solid #78AA16 !important;
    box-shadow:0 4px 14px rgba(6,55,107,.10) !important;
}

/* Links principais */
.menu.superior .nivel-um>li>a,
.menu.superior .nivel-um>li>a span,
.menu.superior .nivel-um>li>a .titulo,
.menu.superior .nivel-um>li>a>i{
    color:#FFFFFF !important;
    font-weight:700 !important;
    text-shadow:none !important;
}

/* Hover */
.menu.superior .nivel-um>li:hover>a,
.menu.superior .nivel-um>li>a:hover{
    background:#78AA16 !important;
    color:#FFFFFF !important;
}

/* Item ativo */
.menu.superior .ativo>a,
.menu.superior .active>a,
.menu.superior .nivel-um>li.ativo>a,
.menu.superior .nivel-um>li.active>a{
    background:#0B4A87 !important;
    color:#FFFFFF !important;
}

/* Separadores */
.menu.superior .nivel-um>li{
    border-right:1px solid rgba(255,255,255,.18) !important;
}
.menu.superior .nivel-um>li:last-child{
    border-right:none !important;
}

/* Submenu */
.menu.superior .nivel-dois{
    background:#FFFFFF !important;
    border-top:3px solid #78AA16 !important;
    border-radius:0 0 8px 8px !important;
    box-shadow:0 8px 18px rgba(6,55,107,.14) !important;
}
.menu.superior .nivel-dois a{
    color:#263746 !important;
    background:#FFFFFF !important;
    font-weight:600 !important;
}
.menu.superior .nivel-dois a:hover{
    background:#EEF7DA !important;
    color:#06376B !important;
}

/* Terceiro nível */
.menu.superior .nivel-tres{
    background:#FFFFFF !important;
}
.menu.superior .nivel-tres a:hover{
    background:#EEF7DA !important;
    color:#06376B !important;
}

/* ==========================================================
   ESOFT TEMA 5.0
   MÓDULO 02.1 — ÍCONES DO CABEÇALHO
   Correção visual dos ícones de dúvidas, login e carrinho.

   Não altera:
   display, position, float, flex, overflow, z-index,
   estrutura do menu, carrinho ou comportamento mobile.
   ========================================================== */

/* Ícones circulares do cabeçalho */
#cabecalho .actions-menu > li.visible-phone > a > i,
#cabecalho .menu-login > a > i,
#cabecalho .menu-carrinho .carrinho > a > i {
    background-color: #78AA16 !important;
    border-color: #78AA16 !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    box-shadow: 0 4px 10px rgba(6, 55, 107, 0.14) !important;
}

/* Garante a cor branca também nos estados de interação */
#cabecalho .actions-menu > li.visible-phone > a:hover > i,
#cabecalho .actions-menu > li.visible-phone > a:focus > i,
#cabecalho .menu-login > a:hover > i,
#cabecalho .menu-login > a:focus > i,
#cabecalho .menu-carrinho .carrinho > a:hover > i,
#cabecalho .menu-carrinho .carrinho > a:focus > i {
    background-color: #689612 !important;
    border-color: #689612 !important;
    color: #FFFFFF !important;
}

/* Ícones internos ou pseudoícones herdados */
#cabecalho .actions-menu > li.visible-phone > a > i:before,
#cabecalho .menu-login > a > i:before,
#cabecalho .menu-carrinho .carrinho > a > i:before {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/* Textos do cabeçalho */
#cabecalho .actions-menu > li.visible-phone > a > div,
#cabecalho .menu-login > a > div,
#cabecalho .menu-carrinho .carrinho > a > div {
    color: #263746 !important;
}

#cabecalho .actions-menu > li.visible-phone > a > div strong,
#cabecalho .menu-login strong,
#cabecalho .menu-carrinho strong,
#cabecalho .menu-carrinho .total-carrinho {
    color: #06376B !important;
    font-weight: 700 !important;
}
/* ==========================================================
   Correção da lupa da pesquisa
   ========================================================== */

#cabecalho .busca .botao-busca i,
#cabecalho .busca .botao-busca .icon-search,
#cabecalho .busca .botao-busca .icon-search:before,
#cabecalho .busca .botao-busca .fa,
#cabecalho .busca .botao-busca .fa-search,
#cabecalho .busca .botao-busca .fa-search:before{
    display:inline-block !important;
    color:#FFFFFF !important;
    font-size:20px !important;
    line-height:1 !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* ==========================================================
   ESOFT TEMA 5.0
   MÓDULO 03.1 — BANNER PREMIUM CORRIGIDO

   Substitua integralmente o Módulo 03 anterior por este arquivo.
   Atua somente na área de banners e no Flexslider.
   ========================================================== */

/* Área externa: cria respiro visível em volta do banner */
.secao-banners {
    background-color: #F4F7FA !important;
    padding-top: 14px !important;
    padding-bottom: 18px !important;
}

.secao-banners .conteiner {
    background-color: transparent !important;
}

/* Compatibilidade com diferentes estruturas do tema */
.secao-banners .banner,
.secao-banners .banner.cheio,
.secao-banners .banner .flexslider,
.secao-banners .flexslider,
.banner.cheio .flexslider {
    border: 1px solid #DCE4EC !important;
    border-radius: 14px !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 12px 30px rgba(6, 55, 107, 0.16) !important;
}

/* Faz os cantos arredondados aparecerem na imagem */
.secao-banners .flex-viewport,
.secao-banners .slides,
.secao-banners .slides > li,
.secao-banners .slides img,
.secao-banners .banner img,
.banner.cheio .flex-viewport,
.banner.cheio .slides img {
    border-radius: 13px !important;
}

/* Linha institucional discreta abaixo do banner */
.secao-banners .banner,
.secao-banners .flexslider {
    border-bottom: 4px solid #78AA16 !important;
}

/* Setas do slider */
.secao-banners .flex-direction-nav a,
.banner.cheio .flex-direction-nav a {
    background-color: rgba(6, 55, 107, 0.92) !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    box-shadow: 0 5px 15px rgba(6, 55, 107, 0.22) !important;
}

.secao-banners .flex-direction-nav a:hover,
.secao-banners .flex-direction-nav a:focus,
.banner.cheio .flex-direction-nav a:hover,
.banner.cheio .flex-direction-nav a:focus {
    background-color: #78AA16 !important;
    color: #FFFFFF !important;
}

/* Indicadores inferiores */
.secao-banners .flex-control-paging li a,
.banner.cheio .flex-control-paging li a {
    background-color: #CBD7E2 !important;
    border: 1px solid #FFFFFF !important;
    box-shadow: 0 2px 7px rgba(6, 55, 107, 0.16) !important;
}

.secao-banners .flex-control-paging li a:hover,
.secao-banners .flex-control-paging li a.flex-active,
.banner.cheio .flex-control-paging li a:hover,
.banner.cheio .flex-control-paging li a.flex-active {
    background-color: #78AA16 !important;
}

/* Texto opcional sobre o banner */
.secao-banners .info-banner,
.banner.cheio .info-banner {
    background-color: rgba(6, 55, 107, 0.92) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    text-shadow: none !important;
    box-shadow: 0 5px 16px rgba(6, 55, 107, 0.20) !important;
}

@media screen and (max-width: 767px) {
    .secao-banners {
        padding-top: 8px !important;
        padding-bottom: 10px !important;
        background-color: #FFFFFF !important;
    }

    .secao-banners .banner,
    .secao-banners .banner.cheio,
    .secao-banners .banner .flexslider,
    .secao-banners .flexslider,
    .banner.cheio .flexslider {
        border-radius: 9px !important;
        border-bottom-width: 3px !important;
        box-shadow: 0 7px 20px rgba(6, 55, 107, 0.12) !important;
    }

    .secao-banners .flex-viewport,
    .secao-banners .slides,
    .secao-banners .slides > li,
    .secao-banners .slides img,
    .secao-banners .banner img,
    .banner.cheio .flex-viewport,
    .banner.cheio .slides img {
        border-radius: 8px !important;
    }
}

/* ==========================================================
   ESOFT TEMA 5
   MÓDULO 04A — ACABAMENTO SEGURO DA VITRINE

   Este módulo altera somente:
   - cor da borda;
   - arredondamento;
   - sombra;
   - cor da borda no hover.

   Não altera:
   - altura;
   - posição;
   - imagens;
   - botão;
   - frete grátis;
   - textos;
   - estrutura da Loja Integrada.
========================================================== */

.listagem .listagem-item {
    border: 1px solid #e1e8ef !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(6, 55, 107, 0.06) !important;
}

.listagem .listagem-item:hover {
    border-color: #b8cf86 !important;
    box-shadow: 0 7px 20px rgba(6, 55, 107, 0.10) !important;
}

/* Mobile */

@media screen and (max-width: 767px) {
    .listagem .listagem-item {
        border-radius: 8px !important;
        box-shadow: 0 3px 10px rgba(6, 55, 107, 0.06) !important;
    }

    .listagem .listagem-item:hover {
        box-shadow: 0 3px 10px rgba(6, 55, 107, 0.06) !important;
    }
}/* Corrige espaço excessivo no rodapé no celular */
@media (max-width: 768px) {

    footer,
    .footer,
    #footer {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        min-height: auto !important;
        height: auto !important;
    }

    footer > *:last-child,
    .footer > *:last-child,
    #footer > *:last-child {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================
   ESOFT TEMA 5
   MÓDULO 04B — NOME E PREÇOS DOS PRODUTOS

   Altera somente:
   - nome do produto;
   - preço principal;
   - preço antigo;
   - parcelamento.

   Não altera:
   - altura do card;
   - imagem;
   - botão;
   - selo de frete;
   - posição dos elementos;
   - estrutura da Loja Integrada.
========================================================== */


/* ==========================================================
   01. NOME DO PRODUTO
========================================================== */

.listagem .listagem-item .nome-produto,
.listagem .listagem-item .nome-produto a {
    color: #263746 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

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


/* ==========================================================
   02. PREÇO PRINCIPAL
========================================================== */

.listagem .listagem-item .preco-produto,
.listagem .listagem-item .preco-promocional,
.listagem .listagem-item .preco-venda {
    color: #06376B !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}


/* ==========================================================
   03. PREÇO ANTIGO
========================================================== */

.listagem .listagem-item .preco-antigo,
.listagem .listagem-item .preco-de {
    color: #8B98A5 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}


/* ==========================================================
   04. PARCELAMENTO
========================================================== */

.listagem .listagem-item .preco-parcela,
.listagem .listagem-item .parcelamento {
    color: #5D6B78 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}


/* ==========================================================
   05. VALOR À VISTA OU PIX
========================================================== */

.listagem .listagem-item .preco-avista,
.listagem .listagem-item .preco-a-vista,
.listagem .listagem-item .preco-boleto {
    color: #78AA16 !important;
    font-weight: 700 !important;
}


/* ==========================================================
   06. MOBILE
========================================================== */

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

    .listagem .listagem-item .nome-produto,
    .listagem .listagem-item .nome-produto a {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    .listagem .listagem-item .preco-parcela,
    .listagem .listagem-item .parcelamento {
        font-size: 12px !important;
    }
}

/* ==========================================
   Correção botão Fale Conosco (Mobile/Desktop)
========================================== */

#cabecalho .conteudo-topo .botao,
.modal .botao,
.conta .botao,
.pagina-conta .botao,
.formulario .botao,
.botao.principal,
.botao.principal.grande,
.botao.principal:hover,
.botao.principal:focus{
    color:#FFFFFF !important;
    text-shadow:none !important;
}

/* ==========================================================
   ESOFT TEMA 5.1
   MÓDULO 04C — BOTÕES PREMIUM
========================================================== */

/* Botão Comprar */

.listagem .botao,
.listagem .botao.principal,
.listagem .acoes-produto .botao{

    background:#06376B !important;
    border:1px solid #06376B !important;

    color:#FFF !important;

    border-radius:8px !important;

    font-weight:700 !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

/* Hover */

.listagem .botao:hover,
.listagem .botao.principal:hover,
.listagem .acoes-produto .botao:hover{

    background:#78AA16 !important;
    border-color:#78AA16 !important;

    color:#FFF !important;

    box-shadow:0 5px 15px rgba(120,170,22,.25) !important;
}

/* ==========================================================
   ESOFT — BOTÃO DA NEWSLETTER
   Correção específica, sem recriar a seta
========================================================== */

/* Estado normal */
#rodape .componente.newsletter
.newsletter-cadastro.input-conteiner
button.newsletter-assinar.botao.botao-input.fundo-principal {
    background: #06376B !important;
    background-color: #06376B !important;
    background-image: none !important;
    border-color: #06376B !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Hover */
#rodape .componente.newsletter
.newsletter-cadastro.input-conteiner
button.newsletter-assinar.botao.botao-input.fundo-principal:hover {
    background: #78AA16 !important;
    background-color: #78AA16 !important;
    background-image: none !important;
    border-color: #78AA16 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(120, 170, 22, 0.30) !important;
}

/* Foco */
#rodape .componente.newsletter
.newsletter-cadastro.input-conteiner
button.newsletter-assinar.botao.botao-input.fundo-principal:focus {
    background: #78AA16 !important;
    background-color: #78AA16 !important;
    background-image: none !important;
    border-color: #78AA16 !important;
    color: #FFFFFF !important;
}

/* Seta nativa */
#rodape .componente.newsletter
button.newsletter-assinar::before,
#rodape .componente.newsletter
button.newsletter-assinar:hover::before,
#rodape .componente.newsletter
button.newsletter-assinar:focus::before {
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: none !important;
}