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

:root {
    --largura-geral: 1420px;
    --padding-lateral: 50px;
}

body, html {
    font-family: 'Maven Pro', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .menu, .navbar {
    font-family: 'Maven Pro', sans-serif !important;
}

body::-webkit-scrollbar {
  width: 7px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: #ba4aae;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: white;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid white;  /* creates padding around scroll thumb */
}

#barraNewsletter, #barraNewsletter .show-hide, #barraNewsletter .componente, #barraNewsletter.posicao-rodape .conteiner {
    background-color: #ba4aae;
}
#barraNewsletter.posicao-rodape .componente .interno {
    padding: 15px 0 !important;
}

/* LARGURA GERAL DO SITE */
@media (min-width: 767px) {
    body:not([modelo-cabecalho="modelo-1"]) .menu.superior {
        padding: 0 var(--padding-lateral);
    }

    html body .departments .conteiner {
        padding: 0 !important;
    }

    body:not([modelo-cabecalho="modelo-1"]) div#cabecalho>.conteiner>.row-fluid {
        width: var(--largura-geral) !important;
        padding: 0 var(--padding-lateral) !important;
    }
    
    .conteiner-principal .conteiner {
        width: var(--largura-geral) !important;
        padding: 0 var(--padding-lateral) !important;
    }
    
    html body .secao-banners>.conteiner {
        width: 100% !important;
        padding: 0 !important;
    }
    
    body:not([modelo-cabecalho="modelo-1"]) .menu.superior>.nivel-um {
        width: calc(var(--largura-geral) - var(--padding-lateral) * 2);
    }
}


/* Cartões SEM desconto (só à vista): remove o height do bloco “fantasma” */
.listagem .listagem-item:not(:has(.preco-produto.com-promocao))
  .info-produto > div:not([class]){
  height: auto !important;
  display: block !important;
  margin: auto !important;
}

/* (Opcional) compacta espaço do preço à vista */
.listagem .listagem-item:not(:has(.preco-produto.com-promocao)) .preco-produto{
  margin-top: .25rem !important;
}

/* (Opcional) se estiver cortando algo, libere o overflow */
.listagem .listagem-item:not(:has(.preco-produto.com-promocao))
  .imagem-produto{ overflow: visible !important; }



.listagem-item .info-produto .preco-produto * { text-align:center !important; }
.listagem-item .preco-produto .preco-venda { display:block; }
.listagem-item .wrapper-title-product { margin-bottom:5px !important; }
.listagem-item .info-produto .preco-produto.destaque-avista { margin-bottom:0px; }
li.listagem-linha>ul .listagem-item .info-produto .preco-produto { display:table !important; }
.tab-content>.active p, .tab-content>.active, .tab-content>.active h2, .tab-content>.active ul, .tab-content>.active span, .tab-content>.active div { background:#f9f9f9 !important; }
.menu.superior>.nivel-um>li.categoria-id-offers a { background:black; }

/* Cole em Aparência > Incluir Código > CSS personalizado */
.listagem .listagem-item .imagem-produto,
.listagem-item .imagem-produto{
  height: 230px !important;   /* “remove” o height aplicado antes */
  min-height: 0 !important;  /* garante que nada prenda a altura */
  /* opcional, se estiver cortando imagem */
  overflow: visible !important;
}



html #rodape .institucional p, html #rodape .institucional ul, html #rodape .institucional ul li, html #rodape .institucional ul li a {
    list-style: none !important;
    font-size: .87rem !important;
    text-decoration: none;
    transition: all .3s;
    line-height:200%;
    color: #333 !important;
}
html #rodape .institucional ul li {
    line-height:220%;
}
html #rodape .span4.links-rodape.links-rodape-paginas ul a {
    line-height: 1.5 !important;
}
#rodape a { font-size: .87rem !important; color: #333 !important; }
html #rodape a.link-quem-somos, html #rodape .span12.visible-phone li.help-footer a { font-size: .87rem !important; color: #fff !important; text-transform: capitalize; padding: 5px 10px !important; display:none; }


html .box-header-wrapper { background:#ba4aae !important; }
.conteudo-topo .busca form#form-buscar input#auto-complete { background: #f1f1f1 !important; }
html .busca.borda-alpha input#auto-complete { border-color: inherit !important; }




.footer { background:#f4f4f4; }
#rodape .institucional, #rodape .pagamento-selos { background:#f4f4f4; }
#rodape .wrap-logo-rodape span.logo-agencia {
    background: url(https://grupomma.com.br/logo-grupomma.png) center/contain no-repeat #fff;
}
/* Ícone de telefone (font icon) */
#rodape .icon-phone:before {
  color: #ba4aae; /* cor roxa do tema */
}

/* Ícones SVG (horário e endereço) */
#rodape .hour-footer svg,
#rodape .address-footer svg {
  fill: #ba4aae; /* cor roxa do tema */
  color: #ba4aae; /* reforço caso use currentColor */
}

/* Substitui o conteúdo por \f232 (WhatsApp) */
a[href^="tel:"] .icon-phone::before {
  content: "\f232" !important;             /* WhatsApp */
  font-family: "Font Awesome 6 Free";      /* ou 5/4 conforme sua versão */
  font-weight: 900;                         /* solid */
  font-size: 22px;                          /* tamanho */
  color: #25D366;
  margin-right: 8px;
}
/* Rodapé > coluna "Contato" */
#rodape .span12.visible-phone li > a[href^="tel:"]{
  display: inline-flex;      /* mantém na mesma linha */
  align-items: center;       /* alinha verticalmente ícone + texto */
  gap: 8px;                  /* espaçamento entre ícone e texto */
  line-height: 1.2;
  white-space: nowrap;       /* evita quebra no número (opcional) */
}

/* Ícone (o <i class="icon-phone"> que você já trocou para WhatsApp) */
#rodape .span12.visible-phone li > a[href^="tel:"] .icon-phone{
  display: inline-block;
  width: 22px;               /* tamanho do ícone */
  height: 22px;
  margin: 0;                 /* garante que não quebre a linha */
  flex: 0 0 22px;            /* fixa a largura do ícone */
  vertical-align: middle;    /* redundante, mas ajuda em temas teimosos */
}

/* Se você tinha colocado vertical-align negativo antes, neutraliza: */
#rodape .span12.visible-phone li > a[href^="tel:"] .icon-phone{ vertical-align: middle !important; }



/* 1) Zera qualquer glifo do ícone atual (alguns temas usam :before) */
a[href^="tel:"] .icon-phone::before {
  content: "" !important;
}

/* 2) Transforma o <i> num quadrado com o logo do WhatsApp */
a[href^="tel:"] .icon-phone {
  display: inline-block;
  width: 22px;                /* <<< tamanho do ícone */
  height: 22px;               /* <<< tamanho do ícone */
  margin-right: 8px;          /* espaço antes do texto */
  vertical-align: -3px;       /* ajuste fino de alinhamento */

  /* cor do ícone (use currentColor p/ herdar do texto) */
  color: #25D366;

  /* usa o SVG como máscara para poder trocar a cor via CSS */
  background-color: currentColor;

  /* WebKit mask (Chrome/Safari) */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.031-.967-.273-.099-.472-.148-.672.149-.197.297-.768.966-.941 1.164-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.173.198-.297.297-.495.099-.198.05-.372-.025-.521-.075-.149-.672-1.611-.921-2.206-.242-.579-.487-.5-.672-.51l-.571-.01c-.198 0-.521.074-.794.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.267 7.616h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.897a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884M20.52 3.48A11.815 11.815 0 0012 0C5.383 0 0 5.383 0 12c0 2.111.555 4.17 1.607 5.98L.057 24l6.157-1.623A11.94 11.94 0 0012 24c6.617 0 12-5.383 12-12 0-3.194-1.245-6.197-3.48-8.52z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  /* Mask padrão (Firefox/Edge) */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.031-.967-.273-.099-.472-.148-.672.149-.197.297-.768.966-.941 1.164-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.173.198-.297.297-.495.099-.198.05-.372-.025-.521-.075-.149-.672-1.611-.921-2.206-.242-.579-.487-.5-.672-.51l-.571-.01c-.198 0-.521.074-.794.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.267 7.616h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.897a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884M20.52 3.48A11.815 11.815 0 0012 0C5.383 0 0 5.383 0 12c0 2.111.555 4.17 1.607 5.98L.057 24l6.157-1.623A11.94 11.94 0 0012 24c6.617 0 12-5.383 12-12 0-3.194-1.245-6.197-3.48-8.52z"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  /* Esconde qualquer glifo do webfont original */
  font-size: 0 !important;
}