#newsletter span, 
#newsletter strong, 
#newsletter p, 
#newsletter h4, 
#newsletter label,
.newsletter span,
.newsletter strong,
.newsletter p {
  color: #444444 !important;
}
/* Aumentar o tamanho do texto dos títulos de categorias */
.titulo-categoria {
  font-size: 18px !important;
}
/* Transforma os textos do rodapé em maiúsculas */
#rodape .titulo, 
#rodape a, 
#rodape p, 
#rodape span {
  text-transform: uppercase !important;
}
/* Centraliza formas de pagamento e selos no rodapé */
#rodape .pagamento-selos .row-fluid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
}
#rodape .pagamento-selos .span4 {
    width: auto !important;
    float: none !important;
    margin: 10px 20px !important;
}
/* Centraliza os títulos e links das colunas do rodapé */
#rodape .span4, 
#rodape .titulo, 
#rodape .links-rodape,
#rodape .sobre-loja-rodape {
    text-align: center !important;
}

/* Garante que as listas de links fiquem centralizadas */
#rodape ul {
    list-style: none !important;
    padding: 0 !important;
    display: inline-block !important;
    width: 100% !important;
}
/* Centralizar formas de pagamento no rodapé */
.pagamento,
.pagamento-selos,
.bandeiras-pagamento {
    text-align: center !important;
}

.pagamento ul,
.pagamento-selos ul,
.bandeiras-pagamento ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.pagamento li,
.pagamento-selos li,
.bandeiras-pagamento li {
    display: inline-block !important;
    float: none !important;
}
/* --- CENTRALIZAR FORMAS DE PAGAMENTO --- */
.pagamento,
.pagamento-selos,
.bandeiras-pagamento {
    text-align: center !important;
}
.pagamento ul,
.pagamento-selos ul,
.bandeiras-pagamento ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.pagamento li,
.pagamento-selos li,
.bandeiras-pagamento li {
    display: inline-block !important;
    float: none !important;
}
/* Centralizar o bloco e a lista de ícones da seção Social */
.redes-sociais,
.redes-sociais .conteudo-redes-sociais,
.rodape .redes-sociais {
    text-align: center !important;
}

.redes-sociais ul,
.redes-sociais .lista-redes,
.redes-sociais .icones {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;
    margin: 10px auto 0 auto !important;
    padding: 0 !important;
    width: auto !important;
}

.redes-sociais li {
    display: inline-block !important;
    float: none !important;
    margin: 0 6px !important;
}
/* Remove os pontos (bullets) das listas do rodapé */
#rodape .institucional ul,
#rodape .categorias ul,
#rodape .links-rodape ul {
    list-style: none !important;
    padding-left: 0 !important;
}

#rodape .institucional li,
#rodape .categorias li,
#rodape .links-rodape li {
    list-style-type: none !important;
    list-style-image: none !important;
}
/* Transformar o título 'Destaques' da vitrine em maiúsculas */
.vitrine-destaque .titulo-categoria, 
.secao-principal .titulo-categoria,
.listagem .titulo-categoria,
h2.titulo {
    text-transform: uppercase !important;
}
/* Transformar cabeçalho superior e links da conta em maiúsculas */
.cabecalho .conteudo-topo,
.cabecalho .conteudo-topo a,
.cabecalho .links-rodape-top,
.cabecalho .links-rodape-top a,
.acoes-conta,
.acoes-conta a {
    text-transform: uppercase !important;
}
/* Forçar maiúsculas em todo o topo: Fale Conosco, Telefone, WhatsApp, Meus Pedidos e Minha Conta */
.cabecalho,
.cabecalho *,
.conteudo-topo,
.conteudo-topo *,
.atendimento,
.atendimento *,
.telefone,
.whatsapp,
.canais-contato,
.canais-contato * {
    text-transform: uppercase !important;
}
/* Altera a cor do valor dos produtos em destaque e nas listas */
.preco-produto .preco-venda,
.preco-produto .titulo,
.produto .preco-produto .preco-promocional,
.componente .preco-produto .preco-venda {
    color: #008A62 !important; /* Substitua pelo código da cor desejada */
    font-weight: bold !important; /* Deixa as letras em negrito para reforçar */
}
/* Botões principais de compra, carrinho e ação */
.botao-comprar,
.fundo-principal,
.botao.principal,
#carro-vazio .botao,
.caixa-sugestao .botao,
button.botao {
    background-color: #C5A059 !important;
    border-color: #C5A059 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease;
}

/* Efeito ao passar o mouse sobre o botão */
.botao-comprar:hover,
.botao.principal:hover,
button.botao:hover {
    background-color: #B38E47 !important; /* Tom de dourado ligeiramente mais escuro ao passar o mouse */
    border-color: #B38E47 !important;
}
/* Remove bordas e sombras dos blocos, produtos e cabeçalho */
.conteiner-principal, 
.conteiner-principal .listagem-item, 
.conteiner, 
.borda-principal, 
.borda-alpha, 
#cabecalho, 
#rodape, 
.fundo-secundario {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Estilização da Barra Fixa Superior */
#barra-topo-promocional {
    background-color: #C5A059 !important; /* Cor Dourada/Secundária */
    color: #FFFFFF !important;
    text-align: center;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 9999;
}

/* Altera a cor do texto da barra superior para branco */
.barra-inicial, 
.barra-inicial *, 
.faixa-topo, 
.faixa-topo * {
    color: #FFFFFF !important;
}
/* Ajustes para layout mobile */
@media only screen and (max-width: 768px) {
    /* Mantém a barra superior sem cobrir os elementos */
    .barrinha-notificacao, 
    .cabecalho .barra-inicial {
        position: relative !important;
        z-index: 10 !important;
    }

    /* Garante que o cabeçalho e os ícones fiquem sempre acima e visíveis */
    .cabecalho {
        position: relative !important;
        z-index: 100 !important;
    }

    /* Ajusta a posição dos ícones de carrinho e conta no celular */
    .cabecalho .conteudo-topo .carrinho,
    .cabecalho .conteudo-topo .painel-usuario {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
/* Container e botão de busca da Loja Integrada */
.conteudo-topo .busca .botao-busca,
button.botao-busca {
  background-color: #1b4d3e !important; /* Verde escuro da marca */
  border-color: #1b4d3e !important;
  transition: all 0.3s ease !important;
}

/* --- CORREÇÃO DA LUPA DE BUSCA --- */
.conteudo-topo .busca .botao-busca *,
button.botao-busca * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* =======================================================
   ORGANIZAÇÃO DOS CARDS NA VITRINE (DESKTOP E MOBILE)
   ======================================================= */

/* 1. Transforma o card em fluxo vertical (Foto -> Título -> Preço -> Botão) */
.listagem .listagem-item .listagem-item-main {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* 2. Mantém a foto no topo e cria distância do título */
.listagem .listagem-item .imagem-produto {
    position: relative !important;
    float: none !important;
    margin-bottom: 15px !important;
    z-index: 1 !important;
}

/* 3. Limita o título em 2 linhas sem invadir a foto */
.listagem .listagem-item .nome-produto {
    position: relative !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
    height: auto !important;
    z-index: 1 !important;
}

/* 4. Preço posicionado logo abaixo do título */
.listagem .listagem-item .preco-produto {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    z-index: 1 !important;
}

/* 5. Força o botão COMPRAR a ficar sempre no RODAPÉ do card (Abaixo da foto no mobile) */
.listagem .listagem-item .acoes-produto {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: auto !important;
    width: 100% !important;
    z-index: 2 !important;
}

/* 6. Ajuste de tamanho do botão para telas de Celular */
@media only screen and (max-width: 767px) {
    .listagem .listagem-item .acoes-produto .botao-comprar {
        padding: 8px 10px !important;
        font-size: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* =======================================================
   FORÇAR BOTÃO "COMPRAR AGORA" SEMPRE VISÍVEL E FIXO
   ======================================================= */

/* 1. Cancela a ocultação do tema e deixa a caixa do botão sempre visível */
.listagem .listagem-item .acoes-produto,
.listagem .listagem-item .acoes-produto-comprar,
.listagem .listagem-item .botao-comprar,
.listagem .listagem-item .hover-comprar {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    z-index: 5 !important;
}

/* 2. Força o link/botão a ficar visível sem precisar passar o mouse */
.listagem .listagem-item .acoes-produto a,
.listagem .listagem-item a.botao-comprar {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
}
/* =======================================================
   CORREÇÃO DE BOTÃO DUPLICADO / COMPRAR FIXO ABAIXO DO PREÇO
   ======================================================= */

/* 1. APAGA O BOTÃO DUPLICADO / FLUTUANTE EM CIMA DA FOTO */
.listagem .listagem-item .imagem-produto .botao-comprar,
.listagem .listagem-item .imagem-produto .acoes-produto,
.listagem .listagem-item .imagem-produto a.comprar,
.listagem .listagem-item .imagem-produto + a.comprar,
.listagem .listagem-item .hover-comprar,
.listagem .listagem-item .comprar-hover {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2. ESTRUTURA VERTICAL LIMPA DO CARD DO PRODUTO */
/* 3. Título ajustado em 2 linhas */
.listagem .listagem-item .nome-produto {
    position: relative !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
    height: auto !important;
    z-index: 1 !important;
}

/* 4. Preço posicionado acima do botão */
.listagem .listagem-item .preco-produto {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    z-index: 1 !important;
}

/* 5. OCULTA O BOTÃO FLUTUANTE EM CIMA DA FOTO (DESKTOP E MOBILE) */
.listagem .listagem-item .imagem-produto .botao-comprar,
.listagem .listagem-item .imagem-produto .acoes-produto,
.listagem .listagem-item .imagem-produto a,
.listagem .listagem-item .hover-comprar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 6. FORÇA O BOTÃO "COMPRAR AGORA" A FICAR FIXO ABAIXO DO PREÇO */
.listagem .listagem-item .acoes-produto {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    margin-top: 8px !important;
    z-index: 10 !important;
}

.listagem .listagem-item .acoes-produto a,
.listagem .listagem-item .acoes-produto .botao-comprar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 11px !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
}
/* =======================================================
   OCULTAÇÃO FORÇADA DO BOTÃO DUPLICADO NA FOTO (MOBILE)
   ======================================================= */

/* 1. Esconde TUDO que for botão/link de compra associado diretamente à foto */
.listagem .listagem-item .imagem-produto a.botao-comprar,
.listagem .listagem-item .imagem-produto .acoes-produto,
.listagem .listagem-item .imagem-produto [class*="comprar"],
.listagem .listagem-item .imagem-produto + a.comprar,
.listagem .listagem-item .hover-comprar,
.listagem .listagem-item .comprar-hover,
.listagem .listagem-item .tag-comprar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
}

/* 2. Garante que APENAS o botão do rodapé do card fique ativo e visível */
.listagem .listagem-item .listagem-item-main > .acoes-produto,
.listagem .listagem-item > .acoes-produto {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 8px !important;
    width: 100% !important;
    clear: both !important;
    z-index: 10 !important;
}

.listagem .listagem-item .listagem-item-main > .acoes-produto a,
.listagem .listagem-item > .acoes-produto a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 11px !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
}
@media (min-width: 992px) {
  .conteudo .listagem .span4 {
    width: 23% !important;
    margin-left: 2% !important;
  }
  .conteudo .listagem .row-fluid [class*="span"]:first-child {
    margin-left: 0 !important;
  }
}
/* Centraliza o Título Principal da Página Institucional */
#pagina-institucional .titulo-pagina,
.pagina-institucional .titulo-pagina,
.corpo .titulo-pagina {
    text-align: center !important;
    width: 100% !important;
}
/* Centraliza o título e todo o texto dentro do container da caixa branca */
.pagina-pagina .conteudo > .row-fluid,
.pagina-pagina .conteudo .caixa-branca,
.pagina-pagina .conteudo .miolo,
.pagina-pagina .conteudo #conteudo,
.pagina-pagina .secao-principal {
    text-align: center !important;
}

/* Garante que títulos, parágrafos, spans e textos fiquem centralizados */
.pagina-pagina h1,
.pagina-pagina h2,
.pagina-pagina h3,
.pagina-pagina p,
.pagina-pagina span,
.pagina-pagina strong,
.pagina-pagina div {
    text-align: center !important;
}

/* Caso o texto esteja dentro de uma div com largura fixa, centraliza o bloco em si */
.pagina-pagina .conteudo-principal {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Centralizar contatos do rodapé no mobile */
@media screen and (max-width: 767px) {
  #rodape .institucional .span3,
  #rodape .institucional .span4,
  #rodape .institucional .fale-conosco,
  #rodape .institucional .atendimento,
  #rodape .institucional .telefones,
  #rodape .institucional li,
  #rodape .institucional p,
  #rodape .institucional a {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #rodape .institucional .telefones span,
  #rodape .institucional .telefones i,
  #rodape .institucional .fale-conosco span {
    display: block !important;
    text-align: center !important;
    margin: 2px auto !important;
  }
}
/* Limita e estabiliza apenas os selos do rodapé e frete, sem afetar as categorias e produtos */
img[src*="sedex"],
.selos img {
  height: auto;
  max-width: 100%;
}
/* 1. Remove as bordas tracejadas verticais e horizontais em volta de cada produto */
.listagem .listagem-item,
.listagem .listagem-item .borda-alpha,
.listagem .listagem-item .acoes-produto,
.listagem .listagem-item .preco-produto {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

/* 2. Remove a linha contínua cinza horizontal entre as fileiras de produtos */
.listagem-linha,
.listagem .listagem-linha {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* 3. Garante a remoção da borda à esquerda no primeiro item da fileira */
.listagem .listagem-linha > ul > li,
.listagem .listagem-linha [class*="span"] {
    border: 0 !important;
}

/* 4. Elimina linhas desenhadas por elementos invisíveis do tema */
.listagem-item::before,
.listagem-item::after,
.acoes-produto::before,
.acoes-produto::after,
.borda-alpha::before,
.borda-alpha::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
}
/* Correção do tamanho do selo do SEDEX */
img[src*="sedex_zpseb35999c"] {
    width: 60px !important;
    height: auto !important;
}

/* Garante altura mínima APENAS nos produtos da vitrine */
.listagem .listagem-linha li.span3 {
    min-height: 380px !important;
}