:root {
  --devrocket-voltar-topo-altura: 60px;
  --devrocket-voltar-topo-largura: 60px;
  --devrocket-voltar-topo-espaco-direita: 20px;
  --devrocket-voltar-topo-espaco-esquerda: 20px;
  --devrocket-voltar-topo-borda-arredondada: 60px;
  --devrocket-voltar-topo-tamanho-fonte: 22px;
  --devrocket-voltar-topo-cor-fonte: #ffffff;
  --devrocket-voltar-topo-espaco-abaixo: 230px;
  --devrocket-voltar-topo-posicao: right;

  --devrocket-telegram-cor-fundo: #0088cc;
  --devrocket-telegram-altura: 60px;
  --devrocket-telegram-largura: 60px;
  --devrocket-telegram-espaco-direita: 20px;
  --devrocket-telegram-espaco-esquerda: 20px;
  --devrocket-telegram-borda-arredondada: 60px;
  --devrocket-telegram-tamanho-fonte: 32px;
  --devrocket-telegram-cor-fonte: #ffffff;
  --devrocket-telegram-espaco-abaixo: 90px;
  --devrocket-telegram-posicao: right;

  --devrocket-instagram-cor-fundo: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
  --devrocket-instagram-altura: 60px;
  --devrocket-instagram-largura: 60px;
  --devrocket-instagram-espaco-direita: 20px;
  --devrocket-instagram-espaco-esquerda: 20px;
  --devrocket-instagram-borda-arredondada: 60px;
  --devrocket-instagram-tamanho-fonte: 32px;
  --devrocket-instagram-cor-fonte: #ffffff;
  --devrocket-instagram-espaco-abaixo: 160px;
  --devrocket-instagram-posicao: right;

  --cor-fonte-menu: #ffffff;
  --cor-fonte-submenu: #ffffff;
}

/* ALTERADO - Removendo botões de compartilhamento de redes */
.produto-compartilhar {
    display: none !important;
}

.devrocket-imagem-categoria {
  filter: invert(100%);
}

#cabecalho .menu .fundo-menu .titulo,
#cabecalho .menu ul li.com-filho a i,
.menu.superior .nivel-um .titulo {
  color: var(--cor-fonte-menu) !important;
  font-weight: 600 !important;
}

/* ALTERADO cor diferente para menu lateral */
.menu.lateral .nivel-um .titulo {
  color: #444444;
  font-weight: 600 !important;
}

.menu.superior .nivel-dois a,
#cabecalho .menu.superior.menu-slide .com-filho.borda-principal .com-filho a i {
  color: var(--cor-fonte-submenu) !important;
}

.mostrarAvisoCookie #avisoCookies {
  display: none;
}

ul.nivel-um.fundo-menu,
#cabecalho .menu {
  background-color: #46b89e !important;
}

li.devrocket-oferta-dia {
  display: none !important;
}

.devrocket-instagram {
  top: 90%;
  z-index: 999;
  position: fixed;
  float: var(--devrocket-instagram-posicao);
  left: var(--devrocket-instagram-espaco-direita);
  bottom: var(--devrocket-instagram-espaco-abaixo);
  width: var(--devrocket-instagram-largura);
  height: var(--devrocket-instagram-altura);
  background: var(--devrocket-instagram-cor-fundo);
  border-radius: var(--devrocket-instagram-borda-arredondada);
  display: flex;
  justify-content: center;
  align-items: center;
}

img.devrocket-imagem-categoria {
  display: none !important;
}

table.table.table-hover.hidden-phone {
  display: none;
}

#cabecalho .menu ul {
  max-width: 100% !important;
  margin: 0 auto;
}

.logo a {
  position: relative;
  display: block;
  height: 50px !important;
}

strong.titulo {
  font-size: 15px !important;
}

#cabecalho.devrocket-menu-horizontal .nivel-um > li:hover > .nivel-dois {
  padding-right: 105px !important;
  display: contents !important;
  color: white;
}

.form-horizontal .controls {
  display: flex !important;
  margin-left: 110px !important;
}

#modalContato {
  width: 30% !important;
  margin-left: -245px !important;
  top: 8%;
}

#cabecalho.devrocket-menu-horizontal .menu.superior li {
  border: 0px;
  background-color: #46b89e !important;
}

.balao-flutuante-whats {
  position: fixed;
  bottom: 100px;
  right: 10px;
  background-color: #46b89e;
  color: #fff;
  padding: 25px 10px;
  border-radius: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 13px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  z-index: 1000;
  cursor: pointer;
  animation: pular 2s infinite;
  transition: background-color 0.3s ease;
}

.balao-flutuante-whats:hover {
  background-color: #1ebc5a;
}

.balao-flutuante-whats a {
  text-decoration: none;
  color: inherit;
}

@keyframes pular {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.links-rodape.dados-contato {
  color: #ffffff !important;
  margin-top: 10px;
}

.links-rodape.dados-contato ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0 0;
}

.links-rodape.dados-contato li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff !important;
}

.links-rodape.dados-contato .titulo {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
  color: #ffffff !important;
}

/* RETIRADA DE PRODUTOS EM DESTAQUE*/

.produtos-vitrine {
  display: none !important;
}

/* Remove a necessidade de hover, sem alterar o layout */
.listagem-item .acoes-produto {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Mantém comportamento JS normal */
.listagem-item:hover .acoes-produto {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media screen and (max-width: 768px) {
  #cabecalho .menu,
  #cabecalho .menu .fundo-menu .titulo,
  #cabecalho .menu ul li.com-filho a,
  #cabecalho .menu ul li.com-filho a i,
  .menu.superior .nivel-um .titulo,
  .menu.lateral .nivel-um .titulo {
    color: #000000 !important; /* Altere para a cor desejada */
  }

  #cabecalho .menu ul li.com-filho a:hover {
    color: #333333 !important; /* Cor no hover (opcional) */
  }

  /* Se o fundo também for claro, ajuste ele aqui */
  #cabecalho .menu {
    background-color: #ffffff !important;
  }
}

/*NOVO RODAPÉ*/

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap');

/* Regra CRÍTICA e DEFINITIVA para ocultar o rodapé preto antigo */
/* Esta regra visa diretamente o div.container dentro do div.institucional.fundo-secundario */
div.institucional.fundo-secundario > div.container {
    display: none !important;
    visibility: hidden !important; /* Adicionado para garantir ocultação visual */
    height: 0 !important; /* Garante que não ocupe espaço */
    overflow: hidden !important; /* Previne que o conteúdo transborde */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Fonte principal para todo o corpo do site */
body {
    font-family: 'Nunito Sans', sans-serif !important;
}

/* Container principal do rodapé (o #rodape da Loja Integrada) */
/* Este div agora será o pai de TODO o seu novo rodapé e da seção de pagamentos */
#rodape {
    background-color: #ffffff !important; /* Cor de fundo BRANCA */
    padding: 0 !important; /* Resetar o padding padrão do #rodape */
    margin: 0 !important; /* Resetar margens */
    border-top: none !important; /* Remover qualquer borda superior que possa existir */
    display: block !important; /* Garante que o #rodape esteja visível como o pai de tudo */
}

/* Área principal do conteúdo do rodapé que contém as colunas (o NOVO rodapé injetado) */
#new-custom-footer-content-wrapper-global { /* Este é o ID do wrapper que o JS injeta */
    color: #333333;
    max-width: 1200px;
    margin: 0 auto; /* Centraliza o conteúdo dentro do #rodape */
    padding: 40px 20px 20px 20px; /* Padding para o conteúdo principal do rodapé superior */
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribui as colunas uniformemente */
    gap: 30px; /* Espaço entre as colunas */
    font-family: 'Nunito Sans', sans-serif; /* Aplica a fonte especificamente aqui também */
}

/* Estilos para as colunas do rodapé */
.footer-column {
    flex: 1; /* Permite que as seções cresçam e ocupem o espaço disponível */
    min-width: 250px; /* Largura mínima para as colunas */
    max-width: 350px; /* Largura máxima para as colunas */
    box-sizing: border-box;
}

/* Ajustes específicos para a coluna da logo */
.footer-logo-section {
    flex: 1.2; /* Dá um pouco mais de espaço para a seção da logo e texto */
    min-width: 280px;
    max-width: 400px; /* Aumentar max-width para a logo */
}

.footer-logo {
    max-width: 180px; /* Ajuste o tamanho da sua logo no rodapé */
    height: auto;
    margin-bottom: 20px;
}

.footer-logo-section p {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
    color: #666666;
}

.footer-logo-section p:hover {
    color: #333333 !important;
}

/* Estilos para os títulos das colunas */
.footer-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333333;
    transition: color 0.3s ease;
}

.footer-title:hover {
    color: #32B1C3 !important;
}

/* Estilos para a lista de links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
    transition: color 0.3s ease;
}

.footer-links li a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links li:hover {
    color: #32B1C3 !important;
}

.footer-links li a:hover {
    color: #32B1C3 !important;
}

/* Estilos para textos fora de UL (ex: horários de atendimento) */
.footer-text {
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
    margin-bottom: 5px;
}

.footer-text:hover {
    color: #32B1C3 !important;
}



.social-icons-bottom-bar {
    display: flex;
    gap: 15px;
}

/* Estilos para a seção de pagamentos/selos (para garantir que o fundo seja branco e não tenha padding/margin extra) */
.pagamento-selos {
    background-color: #ffffff !important;
    padding: 20px 0 !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    box-sizing: border-box !important;
    
    display: block !important;
    text-align: inherit !important;
}

.pagamento-selos .container {
    padding: 0 20px !important;
}

/* Media Queries para responsividade */
@media (max-width: 992px) {
    .footer-column {
        min-width: 45%;
    }
    .footer-logo-section {
        min-width: 45%;
    }
}

@media (max-width: 768px) {
    #new-custom-footer-content-wrapper-global {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 15px 20px 15px;
        gap: 20px;
    }

    .footer-column, .footer-logo-section {
        min-width: 90%;
        max-width: 90%;
        width: 100%;
        margin-bottom: 30px;
    }

    .footer-column:last-child {
        margin-bottom: 0;
    }

    .social-icons-main-footer {
        justify-content: center;
        width: 100%;
    }

    #bottom-bar-footer {
        flex-direction: column;
        text-align: center;
        margin-top: 20px;
        padding-top: 15px;
    }

    .copyright-text {
        text-align: center;
        margin-bottom: 15px;
    }

    .social-icons-bottom-bar {
        margin-left: 0;
        justify-content: center;
    }

    .pagamento-selos .row-fluid {
        flex-direction: column;
        align-items: center;
    }
    .pagamento-selos .span4.pagamento,
    .pagamento-selos .span4.selos {
        min-width: 90%;
        text-align: center;
    }
}