/* Efeito de zoom na imagem do produto na listagem */
.listagem-item .imagem-produto {
    overflow: hidden;
    border-radius: 8px;
}

.listagem-item:hover .imagem-produto img {
    transform: scale(1.1);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}/* APLICAÇÃO GLOBAL (PC E MOBILE) */
.listagem .listagem-item .acoes-produto .botao-comprar,
.listagem-item .botao-comprar,
.botao-comprar.direto-no-carrinho {
    background: linear-gradient(90deg, #FF4A00 0%, #FF8C00 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 5px !important;
    margin-top: 15px !important; /* Espaço entre o preço e o botão */
    visibility: visible !important;
    opacity: 1 !important;
/* AJUSTE ESPECÍFICO PARA MOBILE */
}@media only screen and (max-width: 767px) {
    /* Força a exibição do container que guarda o botão no mobile */
    #corpo .listagem .listagem-item .acoes-produto {
        position: relative !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* Ajusta o tamanho da fonte para não quebrar a linha no celular */
    .listagem .listagem-item .acoes-produto .botao-comprar {
        font-size: 11px !important; 
        min-height: 42px !important;
    }
}

/* EFEITO AO PASSAR O MOUSE (DESKTOP) */
@media (min-width: 1024px) {
    .listagem .listagem-item .acoes-produto .botao-comprar:hover {
        background: linear-gradient(90deg, #E64300 0%, #FF4A00 100%) !important;
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(255, 74, 0, 0.4) !important;
    }

 }/* Alvo direto no link de compra que fica fora do bloco laranja */
a.botao-comprar.botao-pequeno {
    display: none !important;
}

/* Esconde especificamente a borda preta que aparece na imagem */
.componente .botao-comprar {
    border: none !important;
    background: none !important;
    text-indent: -9999px !important;
}/* 1. Garante o visual do botão principal */
.listagem-item .acoes-produto .botao-comprar, 
.listagem-item .botao-comprar {
    background: linear-gradient(90deg, #FF4A00 0%, #FF8C00 100%) !important;
    border: none !important;
    color: #fff !important;
    visibility: visible !important;
    display: flex !important;
}

/* 2. Mata qualquer botão que não seja o principal na listagem */
/* Vamos esconder o link que fica 'atrás' ou 'abaixo' do botão de clique */

.listagem-item .acoes-produto a.botao-comprar ~ a,
.listagem-item .acoes-produto a + .botao-comprar,
.listagem-item .btn-comprar-extra,
.listagem-item .adicionar-carrinho {
    display: none !important;
}

/* 3. Força o desaparecimento de qualquer texto duplicado que escape do container */
.listagem-item .conteudo-produto .botao-comprar:nth-of-type(n+2) {
    display: none !important;
}/* Esconde qualquer botão dentro da listagem que tenha borda preta ou fundo transparente */
.listagem-item a.botao-comprar[style*="border"], 
.listagem-item a.botao-comprar:not([style*="background"]) {
    display: none !important;
}@media only screen and (max-width: 767px) {
    /* 1. FORÇAR GRADE (2 POR LINHA) */
    /* Alvo: a lista que segura os produtos */
    #corpo .secao-principal .listagem .listagem-linha > ul {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 0 5px !important;
    }

    /* Alvo: cada produto individualmente */
    #corpo .secao-principal .listagem .listagem-linha > ul > li {
        width: 48% !important; /* Ajusta para caber dois */
        display: inline-block !important; /* Força ficar um ao lado do outro */
        margin: 0 0 15px 0 !important;
        vertical-align: top !important;
        float: none !important; /* Remove qualquer float que trave a linha */
}/* Ajuste para os nomes dos produtos na grade mobile */
}@media only screen and (max-width: 767px) {
    .listagem .nome-produto {
        font-size: 13px !important; /* Diminui levemente a fonte para caber melhor */
        line-height: 1.2 !important;
        height: 45px !important; /* Fixa uma altura para os botões ficarem alinhados */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important; /* Ajuda a quebrar em lugares melhores */
    }

    /* Ajuste do preço para não amontoar */
    .listagem .preco-produto {
        margin-top: 10px !important;
    }
    
    /* Se quiser que o nome da marca não se separe de forma feia */
    .listagem .nome-produto a {
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }
}@media only screen and (max-width: 767px) {
    /* Diminui o espaço entre a imagem e o título */
    .listagem .listagem-linha .imagem-produto {
        margin-bottom: 0px !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Remove espaços internos que empurram o texto para baixo */
    .listagem .listagem-linha li .acoes-produto {
        margin-top: 5px !important;
    }

    /* Ajusta o container do nome para subir mais */
    .listagem .nome-produto {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}@media only screen and (max-width: 767px) {
    /* Ataca o container da imagem que força a altura */
    .listagem .listagem-linha .imagem-produto, 
    .listagem .listagem-linha .div-imagem {
        height: 160px !important; /* Ajusta a altura da caixa da imagem */
        min-height: 160px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: flex-end !important; /* Joga a imagem para a base da caixa */
    }

    /* Remove o padding que empurra o nome para baixo */
    .listagem .listagem-linha .info-produto {
        padding-top: 0 !important;
        margin-top: -10px !important; /* Margem negativa para "puxar" o texto */
    }

    /* Garante que a imagem não tenha espaços sobrando */
    .listagem .listagem-linha .imagem-produto img {
        max-height: 100% !important;
        width: auto !important;
        margin: 0 auto !important;
    }
}/* --- BLOCO FINAL DE AJUSTE DE PREÇO E BOTÃO --- */
@media only screen and (max-width: 767px) {
    /* Ajusta o nome do produto */
    .listagem .info-produto .nome-produto {
        margin-bottom: 2px !important;
        min-height: 32px !important;
        height: auto !important;
    }

    /* Organiza o preço para não quebrar as palavras */
    .listagem .info-produto .preco-produto {
        margin-top: 0 !important;
        line-height: 1.2 !important;
    }

    /* Mantém '5x de R$ 13,20' unido */
    .listagem .preco-produto .preco-parcelado {
        display: inline !important; 
        font-size: 11px !important;
    }

    /* Destaque do Preço Pix */
    .listagem .preco-produto .preco-venda {
        display: block !important;
        margin-top: 2px !important;
        font-size: 16px !important;
    }

    /* Remove quebras de linha fantasmas do tema */
    .listagem .preco-produto br {
        display: none !important;
    }

    /* Botão Comprar mais próximo */
    .listagem .acoes-produto {
        margin-top: 5px !important;
    }
}@media only screen and (max-width: 767px) {
    /* 1. Ajuste do nome para tirar o espaço fantasma */
    .listagem .info-produto .nome-produto {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 2px !important;
    }

    /* 2. CALIBRAGEM: Subir o preço apenas o necessário */
    .listagem .info-produto .preco-produto {
        transform: translateY(-10px) !important; /* Diminuímos de -20 para -10 */
        margin-bottom: -10px !important;
    }

    /* 3. Acompanha o botão na mesma distância */
    .listagem .acoes-produto {
        transform: translateY(-10px) !important;
    }
}/* Aplicar apenas em telas pequenas (Mobile) */
@media (max-width: 768px) {
    /* 1. Criamos uma base para o botão se fixar */
    .listagem-item .acoes-produto {
        position: relative !important;
        height: 50px !important; /* Espaço reservado para o botão */
    }

    /* 2. Fazemos o botão laranja "flutuar" por cima de tudo */
    .listagem-item .botao-comprar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 99 !important; /* Coloca ele na frente de qualquer outro botão */
        
        /* Seu gradiente e estilo */
        background: linear-gradient(90deg, #FF4A00 0%, #FF8C00 100%) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }
}