/* =========================================
   1. FUNDO DO CABEÇALHO (TOPO)
========================================= */
/* Pega tanto a tag moderna quanto o ID antigo */
header, #cabecalho, .cabecalho {
    background-color: #CCBBA9 !important;
    /* Para a textura, descomente as linhas abaixo e insira o link #e3dbd1 */
    /* background-image: url('https://cdn.awsli.com.br/3057/3057269/arquivos/gemini_generated_image_btthxwbtthxwbtth.png') !important; */
    /* background-size: cover !important; */
    /* background-repeat: no-repeat !important; */
}

/* Garante que partes internas do topo fiquem transparentes para mostrar o fundo */
header > div, #cabecalho .conteiner {
    background-color: transparent !important;
}

/* =========================================
   2. BARRA DE MENU
========================================= */
/* Aplica o fundo branco na barra de menu */
header nav, .menu.superior, .menu-principal, #cabecalho .menu.superior {
    background-color: #ffffff !important;
    border-top: none !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

/* Cor dos textos do menu */
header nav a, .menu.superior .nivel-um > li > a {
    color: #333333 !important;
    font-weight: 500 !important;
}

/* Cor ao passar o mouse no menu (Rosa/Magenta) */
header nav a:hover, .menu.superior .nivel-um > li:hover > a {
    color: #9C336D !important;
}

/* =========================================
   3. BOTÕES DE COMPRA
========================================= */
/* Ataca todos os possíveis botões de compra e adicionar ao carrinho */
.botao.principal, 
.botao-comprar, 
.acoes-produto .botao,
button.btn-primary,
a.botao,
#listagemProdutos .botao-comprar {
    background-color: #9C336D !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
}

/* Botões ao passar o mouse */
.botao.principal:hover, 
.botao-comprar:hover, 
.acoes-produto .botao:hover,
button.btn-primary:hover,
a.botao:hover {
    background-color: #7A2654 !important;
    color: #ffffff !important;
}

/* =========================================
   4. CARDS DE PRODUTOS (VITRINE) E FONTES
========================================= */
/* Estilo do Card do produto */
.listagem-item, .card-produto, .produto-item {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #f0f0f0 !important; /* Bordinha leve igual na imagem */
    padding: 10px !important;
}

/* Título e preço do produto no card */
.listagem-item .nome-produto, .card-produto .nome, .produto-item h2 {
    color: #333333 !important;
}

.preco-produto .preco-venda, .preco-promocional {
    color: #1a1a1a !important;
    font-weight: bold !important;
}

/* =========================================
   6. LIMPEZA DOS ÍCONES DO TOPO
========================================= */
/* Remove qualquer fundo quadrado nos ícones de conta e carrinho */
#cabecalho .acoes-conta,
#cabecalho .acoes-conta > a, 
#cabecalho .acoes-conta > div,
#cabecalho .acoes-conta i,
#cabecalho .carrinho,
#cabecalho .carrinho i {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
}

/* Garante que os ícones fiquem na cor magenta/roxa do tema */
#cabecalho .acoes-conta i, 
#cabecalho .carrinho i,
#cabecalho [class^="icon-"] {
    color: #9C336D !important; 
}

/* =========================================
   7. TÍTULOS DAS SEÇÕES (Ex: MAIS VENDIDOS)
========================================= */
/* Altera a cor de roxo para cinza escuro elegante e ajusta o espaçamento */
.titulo-categoria, 
.titulo.cor-secundaria, 
.listagem .titulo-categoria,
.titulo {
    color: #333333 !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    border-color: #e3dbd1 !important; /* Suaviza as linhas ao lado do título */
}

/* =========================================
   8. BURLAR LIMITE DE TAMANHO DO LOGO
========================================= */
/* Esconde a imagem do logo que o sistema limita */
.logo a img {
    display: none !important;
}

/* Cria um espaço novo, insere sua imagem grande e mantém clicável */
.logo a {
    display: block !important;
    background-image: url('https://cdn.awsli.com.br/3057/3057269/arquivos/logonomeb.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    
    /* DEFINA O TAMANHO QUE VOCÊ QUER AQUI */
    width: 500px !important;  /* Largura do seu logo */
    height: 150px !important; /* Altura do seu logo */
    margin: 0 auto !important; /* Centraliza se necessário */
}

/* =========================================
   9. ALINHAMENTO VERTICAL (LOGO, BUSCA E ÍCONES)
========================================= */
@media screen and (min-width: 768px) {
    /* Força a linha principal do cabeçalho a alinhar todos os itens ao centro verticalmente */
    #cabecalho .conteiner > .row-fluid,
    header .conteiner > .row-fluid {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Ajusta a barra de busca para não ser empurrada para baixo e ficar no centro */
    #cabecalho .busca {
        margin: 0 auto !important;
        padding: 0 !important;
        flex-grow: 1 !important; 
        max-width: 50% !important; /* Evita que a busca fique esticada demais */
        display: flex !important;
        justify-content: center !important;
    }

    /* Agrupa a área direita (ícones de contato, frete, conta e carrinho) */
    #cabecalho .conteiner > .row-fluid > .span4 {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 15px !important; /* Cria um espaçamento uniforme entre os ícones */
        margin: 0 !important;
    }

    /* Remove margens antigas dos ícones para que o alinhamento fique perfeito */
    #cabecalho .acoes-conta, 
    #cabecalho .carrinho {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* =========================================
   10. REMOVER FUNDO QUADRADO DO ÍCONE DE CONTA
========================================= */
/* Garante que o ícone de usuário fique com fundo transparente como os outros */
#cabecalho .acoes-conta > a,
#cabecalho .acoes-conta i {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}

/* =========================================
   9. OCULTAR BUSCA E ALINHAR TOPO (ESQUERDA/DIREITA)
========================================= */
/* Esconde a barra de busca completamente */
#cabecalho .busca {
    display: none !important;
}

/* Transforma a linha do topo para alinhar o Logo e os Ícones nas pontas */
#cabecalho .conteiner > .row-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important; /* Necessário para centralizar a imagem nova */
    min-height: 130px !important; /* Altura mínima para caber sua imagem central, ajuste se precisar */
}

/* Garante que o bloco dos ícones na direita fique alinhado */
#cabecalho .span4:last-child, 
.area-direita, 
#cabecalho .conteiner > .row-fluid > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important;
}

/* =========================================
   10. INSERIR IMAGEM CENTRALIZADA
========================================= */
/* Este código "injeta" uma imagem no meio do cabeçalho */
#cabecalho .conteiner > .row-fluid::after {
    content: "";
    position: absolute;
    left: 50%; /* Joga para o meio da tela */
    top: 50%;
    transform: translate(-50%, -50%); /* Centraliza perfeitamente nos eixos X e Y */
    
    /* === AJUSTE AQUI === */
    width: 400px; /* Largura da sua imagem central */
    height: 90px;  /* Altura da sua imagem central */
    background-image: url('https://cdn.awsli.com.br/3057/3057269/arquivos/gemini_generated_image_btthxwbtthxwbtth.png'); 
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
}

/* =========================================
   11. LIMPEZA TOTAL DO FUNDO DOS ÍCONES (CONTA E CARRINHO)
========================================= */
/* Força a remoção de qualquer quadrado colorido nos ícones */
#cabecalho .acoes-conta *,
#cabecalho .acoes-conta,
#cabecalho .carrinho *,
#cabecalho .carrinho {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Garante a cor correta dos ícones */
#cabecalho .acoes-conta i,
#cabecalho .carrinho i,
#cabecalho .canais-contato i {
    color: #9C336D !important;
    font-size: 24px !important; /* Ajuste o tamanho dos ícones se quiser */
}

/* =========================================
   12. FORÇAR VISIBILIDADE DO CONTEÚDO DO RODAPÉ
========================================= */
/* Garante que os links, textos e listas do rodapé fiquem na cor cinza escuro */
#rodape .conteiner a, 
#rodape .conteiner span, 
#rodape .conteiner p, 
#rodape .conteiner li,
#rodape .institucional a {
    color: #444444 !important;
    visibility: visible !important;
    display: inline-block !important; /* Ajuda a forçar a exibição dos ícones de pagamento */
}

/* Força a cor dos ícones de redes sociais caso usem fontes de ícone */
#rodape .redes-sociais i {
    color: #9C336D !important; /* Cor magenta para combinar com os botões */
    font-size: 24px !important;
}

/* Garante que a área de pagamento não fique escondida */
#rodape .pagamento {
    display: block !important;
    opacity: 1 !important;
}
/* =========================================
   13. ORGANIZAR LINKS DO RODAPÉ EM LISTA
========================================= */
/* Força cada link do rodapé a pular uma linha e dar um pequeno espaço */
#rodape .institucional a, 
#rodape .links a,
#rodape .span3 a,
#rodape div > a {
    display: block !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
}

/* Remove a formatação do código anterior que grudou tudo */
#rodape .conteiner li {
    display: block !important;
}