/****************************************************************************
/* ESCONDER CARROSSEL DE CATEGORIAS NO MOBILE */
@media (max-width: 768px) {

  /* some todos os itens de categoria do carrossel */
  .slick-list.draggable li[class^="categoria-id-"],
  .slick-list.draggable li[class*=" categoria-id-"] {
    display: none !important;
  }

  /* opcional: colapsar a área se ficar um espaço em branco */
  .slick-list.draggable {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}
/* remover completamente o bloco #menuinsta */
#menuinsta {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/****************************************************************************


/*****************************
 * MOBILE: 2 PRODUTOS POR LINHA
 *****************************/
@media (max-width: 768px){

    /* Cada produto em 50% da largura */
    #listagemProdutos .listagem-linha > ul > li{
        width: 50% !important;
        float: left;
        box-sizing: border-box;
        padding: 0 5px 20px;
    }

    /* Faz o card ocupar toda a altura possível */
    #listagemProdutos .listagem-linha > ul > li .listagem-item{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
    }

    /* Garante alinhamento pelo topo */
    #listagemProdutos .listagem-linha > ul{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}
/*****************************
 * PREÇO MAIOR (26PX)
 *****************************/
/* Lista / vitrine */
.listagem .listagem-item .preco-produto .preco-venda,
.listagem .listagem-item .preco-produto .preco-promocional{
    font-size: 26px !important;
    font-weight: 700;
    line-height: 1.2;
}

/* Página do produto */
.produto .preco-produto .preco-venda,
.produto .preco-produto .preco-promocional{
    font-size: 26px !important;
    font-weight: 700;
    line-height: 1.2;
}
/*****************************
 * BOTÃO COMPRAR – LISTAGEM / VITRINE
 *****************************/
/* Estilo base – desktop e mobile */
.listagem-item .acoes-produto a.botao-comprar,
.listagem-item .acoes-produto-responsiva .tag-comprar{
    background-color: #25D366 !important;   /* verde */
    border: none !important;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 20px;
    display: inline-block;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* Garante texto branco, mesmo com span dentro */
.listagem-item .acoes-produto a.botao-comprar,
.listagem-item .acoes-produto a.botao-comprar * ,
.listagem-item .acoes-produto-responsiva .tag-comprar,
.listagem-item .acoes-produto-responsiva .tag-comprar *{
    color: #ffffff !important;
}

/* Mobile: botão ocupa 100% da largura do card */
@media (max-width: 768px){
    .listagem-item .acoes-produto a.botao-comprar,
    .listagem-item .acoes-produto-responsiva .tag-comprar{
        width: 100%;
        padding: 12px 0;
        font-size: 14px;
    }
}

/* Hover no desktop */
.listagem-item .acoes-produto a.botao-comprar:hover,
.listagem-item .acoes-produto-responsiva .tag-comprar:hover{
    background-color: #218838 !important;
    color: #ffffff !important;
}
/*****************************
 * BOTÃO COMPRAR – PÁGINA DO PRODUTO (PULSANDO)
 *****************************/
.produto .acoes-produto a.botao.botao-comprar.principal.grande{
    background-color: #25D366 !important;    /* verde WhatsApp */
    border-radius: 999px;
    padding: 14px 0px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    display: inline-block;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    cursor: pointer;
    
    animation: pulsar-comprar 1.4s ease-in-out infinite;
}

/* Texto branco, inclusive dentro de span */
.produto .acoes-produto a.botao.botao-comprar.principal.grande,
.produto .acoes-produto a.botao.botao-comprar.principal.grande *{
    color: #ffffff !important;
}

/* Hover (desktop) */
.produto .acoes-produto a.botao.botao-comprar.principal.grande:hover{
    background-color: #1ebe5a !important;
}

/* Animação de pulso */
@keyframes pulsar-comprar{
    0%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37,211,102,0.7);
    }
    70%{
        transform: scale(1.06);
        box-shadow: 0 0 0 14px rgba(37,211,102,0);
    }
    100%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37,211,102,0);
    }
}


/****************************************************************************




/* BOTÃO TOPO – ESQUERDA, VERDE, SÓ SETA CENTRALIZADA */
.scrollToTop {
  position: fixed;
  bottom: 15px !important;
  left: 15px !important;
  right: auto !important;

  background-color: #00c853 !important;  /* verde */
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;

  /* esconde o texto "Topo" mantendo o tamanho original do botão */
  font-size: 0 !important;
  color: transparent !important;
}

/* cria a seta para cima */
.scrollToTop::before {
  content: "↑";
  font-size: 18px;          /* ajusta se quiser maior/menor */
  color: #ffffff;
  line-height: 1;
}

/* garante que nada interno apareça (caso tenha ícone/texto) */
.scrollToTop * {
  display: none !important;
}


/****************************************************************************


/* CONTAINER DOS BOTÕES FLUTUANTES */
.ei-float-social {
  position: fixed;
  right: 19px;          /* distância da borda direita */
  bottom: 19px;         /* distância do rodapé -> COLADO NO FIM DA PÁGINA */
  display: flex;
  flex-direction: column-reverse; /* deixa o primeiro (WhatsApp) EMBAIXO */
  gap: 10px;            /* espaço entre os botões */
  z-index: 9999;        /* fica sempre por cima do site */
}

/* ESTILO GERAL DOS BOTÕES (REDONDOS) */
.ei-float-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  text-decoration: none;
  overflow: hidden;
}

/* ÍCONES DENTRO DOS BOTÕES */
.ei-float-btn img {
  width: 26px;
  height: 26px;
  display: block;
  /* deixa o ícone branco */
  filter: brightness(0) invert(1);
}

/* CORES DE FUNDO ESPECÍFICAS */
.ei-float-btn.ei-whatsapp {
  background: #25D366;        /* verde WhatsApp */
}

.ei-float-btn.ei-instagram {
  background: #E4405F;  /* rosa Instagram sólido */
}

/* OPCIONAL: LEVE EFEITO AO PASSAR O MOUSE (DESKTOP) */
.ei-float-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}



/****************************************************************************


/* --- PADRONIZAR ALTURA DOS CARDS E ALINHAR BOTÃO COMPRAR --- */

/* Deixa cada item de produto em coluna */
.listagem .listagem-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Área de informações do produto também em coluna */
.listagem .listagem-item .info-produto,
.vitrine-produtos .info-produto {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* TÍTULO DO PRODUTO - mesma altura para todos + "..." */
.listagem .listagem-item .nome-produto,
.vitrine-produtos .nome-produto {
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* máx. 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3.2em;             /* garante espaço igual */
  max-height: 3.2em;
}

/* Empurra o botão COMPRAR para o final do card */
.listagem .listagem-item .acoes-produto,
.vitrine-produtos .acoes-produto {
  margin-top: auto;
}


/****************************************************************************

/* CARRINHO VAZIO – só ícone */
.carrinho.vazio i,
.carrinho.vazio svg,
.carrinho.vazio [class^="icon-"],
.carrinho.vazio [class*=" icon-"] {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* MINHA CONTA – só ícone */
.minha-conta i,
.minha-conta svg,
.minha-conta [class^="icon-"],
.minha-conta [class*=" icon-"] {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* RASTREIO – só ícone */
.rastreio-btn i,
.rastreio-btn svg,
.rastreio-btn [class^="icon-"],
.rastreio-btn [class*=" icon-"] {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* CONTATO – só ícone */
.contato-top i,
.contato-top svg,
.contato-top [class^="icon-"],
.contato-top [class*=" icon-"] {
  color: #ffffff !important;
  fill: #ffffff !important;
}