/* --- RESET PARA ESTILO CORADA/OCTOFOOD --- */

/* 1. Fundo e Fontes */
body { 
    background-color: #f9fbf7 !important; /* Verde quase branco, muito fresco */
    font-family: 'Montserrat', sans-serif !important;
}

/* 2. Cabeçalho (Topo) */
#cabecalho { 
    background-color: #ffffff !important; 
    border-bottom: 1px solid #eee !important;
}
#cabecalho .conteudo-topo { box-shadow: none !important; }
.menu.superior { background-color: #5d245f !important; } /* Seu Roxo no Menu */

/* 3. Carrinho e Busca */
.carrinho { 
    background-color: #5d245f !important; 
    border-radius: 12px !important; 
}
.busca { 
    border-radius: 25px !important; 
    border: 1px solid #e1e1e1 !important; 
    box-shadow: none !important;
}

/* 4. Cards de Produto (O segredo do Octofood) */
.listagem .listagem-item {
    border: none !important;
    background: #ffffff !important;
    border-radius: 25px !important;
    padding: 15px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04) !important;
    transition: 0.3s !important;
}

.listagem .listagem-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(142, 198, 63, 0.15) !important;
}

/* Arredondar as imagens das marmitas */
.listagem .imagem-produto { border-radius: 20px !important; overflow: hidden; }

/* 5. Preços e Botões */
.preco-promocional { 
    color: #5d245f !important; 
    font-weight: 800 !important; 
    font-size: 18px !important;
}

.botao-comprar {
    background-color: #8ec63f !important; /* Seu Verde */
    color: #ffffff !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    border: none !important;
    font-size: 13px !important;
}

/* 6. Rodapé */
#rodape { 
    background-color: #ffffff !important; 
    border-top: 4px solid #8ec63f !important; 
}
/* Limpeza do Topo - Estilo Minimalista */

/* Esconde as bandeiras de cartões e selos do topo */
.canais-contato.span9 .links-ajuda, 
.conteudo-topo .span4.hidden-phone {
    display: none !important;
}

/* Centraliza o Logo e aumenta o destaque */
#cabecalho .logo {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

#cabecalho .logo img {
    max-height: 120px !important; /* Ajuste conforme necessário */
    width: auto;
}

/* Deixa a barra de busca mais fina e moderna */
#cabecalho .busca {
    box-shadow: none !important;
    border: 1.5px solid #f0f0f0 !important;
    background: #fdfdfd !important;
}

/* Remove a linha preta/cinza comum em temas antigos */
.barra-inicial {
    display: none !important;
}
/* Ajustes finos de contraste */
#cabecalho .busca .botao-busca {
    color: #5d245f !important; /* Lupa em Roxo */
}

#cabecalho .carrinho i {
    color: #ffffff !important; /* Ícone do carrinho branco */
}

/* Deixa o texto do menu em negrito para facilitar a leitura */
#cabecalho .menu.superior .titulo {
    font-weight: 700 !important;
}
/* AJUSTE FINO DE LIMPEZA - LIGHT MARKET */

/* 1. Remove a barra cinza/preta do topo que ainda aparece */
.barra-inicial { 
    display: none !important; 
}

/* 2. Centraliza o logotipo e remove o fundo escuro do topo */
#cabecalho .conteudo-topo {
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 20px 0 !important;
}

#cabecalho .logo {
    display: flex !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 auto !important;
}

/* 3. Ajusta o Menu Roxo para não ficar "grudado" */
#cabecalho .menu.superior {
    margin-top: 10px !important;
    border-radius: 0 !important;
}

/* 4. Melhora os Cards de Produto */
.listagem .listagem-item {
    border: 1px solid #f0f0f0 !important; /* Borda bem fininha */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

/* 5. Esconde links inúteis que sobraram no topo */
.canais-contato, .links-ajuda {
    display: none !important;
}
.barra-inicial { display: none !important; }
#cabecalho .conteudo-topo { background: #ffffff !important; box-shadow: none !important; padding: 20px 0 !important; }
#cabecalho .logo { display: flex !important; justify-content: center !important; float: none !important; margin: 0 auto !important; }
#cabecalho .menu.superior { margin-top: 10px !important; border-radius: 0 !important; }
.listagem .listagem-item { border: 1px solid #f0f0f0 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important; border-radius: 20px !important; }
.canais-contato, .links-ajuda { display: none !important; }
/* AJUSTE DE ACABAMENTO MENU */
#cabecalho .menu.superior {
    box-shadow: none !important;
    border: none !important;
}

#cabecalho .menu.superior .titulo {
    text-transform: none !important; /* Tira o grito das letras maiúsculas */
    font-size: 15px !important;
}

/* Deixa os preços mais chamativos (Verde) */
.preco-venda {
    color: #8ec63f !important;
    font-size: 18px !important;
}
/* AJUSTES FINAIS DE REFINAMENTO - LIGHT MARKET */

/* 1. Garante que o texto do menu seja branco e legível */
#cabecalho .menu.superior .titulo {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* 2. Limpa a barra de busca (tira o cinza e deixa moderna) */
#cabecalho .busca {
    background: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    box-shadow: none !important;
}

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

/* 3. Ajuste nos Cards de Produto para estilo "App" */
.listagem .listagem-item {
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; /* Sombra muito suave */
    margin-bottom: 20px !important;
}

/* 4. Tira a linha preta ou escura que sobra no rodapé */
#rodape .institucional {
    background: #ffffff !important;
    border: none !important;
}

/* 5. Deixa os botões "Ver Detalhes" ou "Comprar" com o seu Verde */
.botao-comprar, .botao-comprar:hover {
    background-color: #8ec63f !important;
    color: #fff !important;
    border: none !important;
    text-shadow: none !important;
}
/* Estilo dos Selos no Card */
.selos-produto-box {
    opacity: 0.9;
    transition: 0.3s;
}

.listagem-item:hover .selos-produto-box {
    opacity: 1;
}

/* Ajuste para não apertar o texto */
.selos-produto-box span {
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.2;
}
/* Garante que o texto do menu roxo seja BRANCO */
#cabecalho .menu.superior .titulo {
    color: #ffffff !important;
}
/* --- ESTILIZAÇÃO DO CHECKOUT (FINALIZAÇÃO DE COMPRA) --- */

/* Botão Finalizar Compra e Continuar */
#finalizarCompra, .botao-finalizar-compra, .botao.principal.grande {
    background-color: #8ec63f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(142, 198, 63, 0.3) !important;
}

/* Cor dos links e passos do checkout */
.checkout-passos .passo.ativo .numero, .checkout-passos .passo.ativo .nome {
    color: #5d245f !important; /* Roxo para o passo atual */
}

/* Bordas dos campos de preenchimento */
input[type="text"]:focus, input[type="email"]:focus {
    border-color: #8ec63f !important;
    box-shadow: 0 0 5px rgba(142, 198, 63, 0.2) !important;
}

/* Botão de Cupom */
#usarCupom {
    background-color: #5d245f !important;
    border-radius: 8px !important;
}
/* --- OTIMIZAÇÃO MOBILE ESTILO APP --- */
@media only screen and (max-width: 767px) {
    /* 1. Deixa o logo em um tamanho bom no celular */
    #cabecalho .logo img {
        max-height: 80px !important;
    }

    /* 2. Ajusta os cards de produto para ficarem em 2 colunas organizadas */
    .listagem .listagem-item {
        margin: 5px !important;
        padding: 10px !important;
        border-radius: 15px !important;
    }

    /* 3. Botão Comprar mais largo para o polegar */
    .listagem .botao-comprar {
        padding: 12px 5px !important;
        font-size: 11px !important;
        width: 100% !important;
    }

    /* 4. Esconde elementos que poluem o topo no celular */
    .atalhos-mobile {
        background: #ffffff !important;
        border: none !important;
    }
    
    /* 5. Deixa o ícone do Menu e Carrinho em Roxo */
    .atalhos-mobile i {
        color: #5d245f !important;
    }

    /* 6. Barra de Busca Mobile arredondada */
    .conteudo-topo .busca-mobile {
        border-radius: 25px !important;
        border: 1px solid #eee !important;
    }
}
/* FORÇAR TEXTO BRANCO NO MENU */
#cabecalho .menu.superior .titulo {
    color: #ffffff !important;
}
/* AJUSTE DE CONTRASTE DO MENU */
#cabecalho .menu.superior .titulo {
    color: #ffffff !important; /* Deixa o texto branco */
    font-weight: bold !important;
}

/* Deixa as setinhas do menu brancas também */
#cabecalho .menu.superior i {
    color: #ffffff !important;
}
/* Ajuste de respiro do topo após a barra */
body {
    padding-top: 0 !important;
}
#cabecalho {
    margin-top: 0 !important;
}
/* Deixa os ícones do topo em Roxo para combinar com a marca */
#cabecalho .carrinho i, #cabecalho .conta i {
    color: #5d245f !important;
}

/* Deixa o número de itens no carrinho em Verde */
#cabecalho .carrinho .qtd-carrinho {
    background-color: #8ec63f !important;
    color: #ffffff !important;
}
/* Ajuste da Tarja de Benefícios */
#tarja-beneficios-light .container {
    max-width: 1140px;
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    #tarja-beneficios-light div {
        font-size: 11px !important; /* Texto menor no celular para caber lado a lado */
        padding: 5px;
    }
    #tarja-beneficios-light .container {
        justify-content: center !important;
        gap: 15px !important;
    }
}
/* REMOVER ESPAÇOS SOBRANDO NO FINAL DA PÁGINA */
#rodape {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#corpo .secao-principal {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove qualquer elemento vazio que esteja empurrando a página para baixo */
.conteudo-principal > .container:last-child {
    margin-bottom: 0 !important;
}

/* Se a sombra for uma linha de borda, este comando retira */
#rodape .institucional {
    box-shadow: none !important;
    border-top: none !important;
}
/* RESET DE FUNDO PARA BRANCO TOTAL */
body, #corpo, .secao-principal, #rodape {
    background-color: #ffffff !important;
}

/* Remove sombras que criam o efeito de 'bloco cinza' */
#corpo .container {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Garante que o fundo atrás dos produtos também seja branco */
.conteudo-principal {
    background-color: #ffffff !important;
}

/* Remove uma possível borda cinza que fica no topo do rodapé */
#rodape .institucional {
    background-color: #ffffff !important;
    border: none !important;
}
/* Remove o botão do WhatsApp que estiver sobrando ou mal posicionado */
/* Se houver dois, este código ajuda a alinhar apenas um no canto direito */
.whatsapp-fixed, #whatsapp-widget, .fb_reset {
    z-index: 9999 !important;
}

/* Tenta esconder um possível botão duplicado pelo ID comum */
#auto-whatsapp { display: none !important; }
/* Elimina o espaço em branco gigante no final da página */
#rodape {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#corpo {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove a margem extra que o Google Maps ou Selos podem criar */
.selos, .rodape-links {
    margin-bottom: 0 !important;
}

/* Força o fechamento da página após o rodapé */
footer {
    padding-bottom: 20px !important;
}
/* Remove o fundo branco da seção de redes sociais/contato do rodapé */
#rodape .redes-sociais, .barra-inicial {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove espaços vazios que sobram no final da página */
#rodape .institucional {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Esconde a barra de menu/contato fixa do mobile */
.barra-mobile, .menu-bottom, #barraMovvel {
    display: none !important;
}
/* Remove a sombra e o fundo branco residual do botão de contato/whatsapp */
.barra-inicial, 
#rodape .redes-sociais, 
.social-fixo-mobile {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    display: none !important;
}

/* Ajusta o espaçamento do topo do rodapé para não ficar buraco branco */
#rodape .institucional {
    padding-top: 20px !important;
    border-top: 1px solid #eee;
}

/* Se a barra branca for da Newsletter/Primeira Compra, isso ajusta */
.newsletter.borda-principal {
    margin-bottom: 0 !important;
    box-shadow: none !important;
}
/* Remove qualquer barra fixa ou flutuante no rodapé (mobile e desktop) */
.barra-inicial, 
.barra-movivel, 
.menu-bottom, 
.social-fixo-mobile,
#whatsapp-widget,
.whatsapp-fixo {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    box-shadow: none !important;
}

/* Remove a sombra específica que fica acima do rodapé */
#rodape .redes-sociais {
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}

/* Garante que o corpo da página não tenha espaço extra embaixo */
body {
    padding-bottom: 0 !important;
}
/* Remove a barra branca/sombra acima do rodapé */
#rodape .redes-sociais, 
.barra-inicial, 
.social-fixo-mobile {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Ajusta o espaçamento do rodapé para não ficar um buraco vazio */
#rodape .institucional {
    padding-top: 20px !important;
    border-top: 1px solid #eee; /* Deixa apenas uma linha fina e elegante */
}
/* Remove a seção de redes sociais e qualquer sombra residual no rodapé */
#rodape .redes-sociais, 
.redes-sociais.borda-principal,
.redes-sociais.hidden-phone {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove a sombra que o tema projeta no topo do rodapé */
#rodape {
    box-shadow: none !important;
    border-top: 1px solid #f2f2f2 !important;
}

/* Garante que o fundo da página seja limpo */
#corpo {
    box-shadow: none !important;
    border: none !important;
}
/* Move o botão do WhatsApp nativo para baixo */
#whatsapp-widget, 
.whatsapp-fixed, 
.btn-whatsapp-fixo {
    bottom: 10px !important; /* Quanto menor o número, mais para baixo ele fica */
    right: 15px !important;  /* Ajusta a distância da lateral direita */
}

/* Ajuste específico para garantir que ele não suba no mobile */
@media only screen and (max-width: 767px) {
    #whatsapp-widget, .whatsapp-fixed {
        bottom: 10px !important;
    }
}
/* Remove a barra/faixa branca e sombras do rodapé e redes sociais */
#rodape .redes-sociais, 
.redes-sociais,
.barra-inicial,
#rodape .newsletter {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Força o sumiço do container que cria o espaço branco */
#rodape > .container > .row-fluid:first-child {
    display: none !important;
}

/* Ajusta o espaçamento para o conteúdo não ficar colado */
#rodape .institucional {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Se a sombra for no fundo da página toda */
#corpo, .conteiner-principal {
    box-shadow: none !important;
}
/* Remove a barra/faixa branca e sombras do rodapé e redes sociais */
#rodape .redes-sociais, 
.redes-sociais,
.barra-inicial,
#rodape .newsletter {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Força o sumiço do container que cria o espaço branco */
#rodape > .container > .row-fluid:first-child {
    display: none !important;
}

/* Ajusta o espaçamento para o conteúdo não ficar colado */
#rodape .institucional {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Se a sombra for no fundo da página toda */
#corpo, .conteiner-principal {
    box-shadow: none !important;
}
/* Desce o botão do WhatsApp para o limite da tela */
#whatsapp-widget, 
.whatsapp-fixed {
    bottom: 5px !important;
    right: 10px !important;
    z-index: 99999 !important;
}
/* Move o botão do WhatsApp nativo para o limite inferior */
#whatsapp-widget, 
.whatsapp-fixed,
.btn-whatsapp-fixo,
div[id^="whatsapp-widget"] {
    bottom: 5px !important; /* Valor mínimo para não sumir da tela */
    right: 15px !important;
    position: fixed !important;
    z-index: 99999 !important; /* Garante que ele fique sobre a barra branca se ela ainda existir */
}

/* Ajuste específico para Mobile (celular) */
@media only screen and (max-width: 767px) {
    #whatsapp-widget, 
    .whatsapp-fixed {
        bottom: 5px !important;
    }
}