/* ==========================================================
   1. VERSÃO DESKTOP (Inalterada)
   ========================================================== */

.botao, 
.botao-comprar, 
.tag-comprar, 
.busca, 
.busca input, 
.busca button,
.carrinho .qtd-carrinho {
    border-radius: 50px !important;
    transition: all 0.3s ease-in-out !important;
}

.botao:hover, 
.botao-comprar:hover, 
.tag-comprar:hover,
.listagem .listagem-item .acoes-produto-responsiva a:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.listagem .listagem-item .imagem-produto {
    overflow: hidden !important;
    border-radius: 10px !important;
}

.listagem .listagem-item .imagem-produto img {
    transition: transform 0.5s ease !important;
}

.listagem .listagem-item:hover .imagem-produto img {
    transform: scale(1.1) !important;
}

.busca input {
    padding-left: 20px !important;
}

/* ==========================================================
   2. AJUSTE MOBILE (Separado para proteger a Pag. Produto)
   ========================================================== */

@media (max-width: 767px) {
    
    /* GRUPO 1: Aplica APENAS A ANIMAÇÃO em TODOS os botões
       (Inclusive na página do produto) */
    .botao, 
    .botao-comprar, 
    .tag-comprar,
    .listagem .listagem-item .acoes-produto-responsiva a {
        animation: piscarExpansivo 2s infinite ease-in-out !important;
        border-radius: 50px !important;
        
        /* Remove o efeito de subir do desktop para não travar no touch */
        transform: none !important;
    }

    /* GRUPO 2: Aplica a COR FIXA apenas na LISTAGEM (Vitrine)
       Isso protege a cor original do botão dentro da página do produto */
    .listagem .listagem-item .acoes-produto-responsiva a,
    .listagem .botao-comprar {
        background-color: var(--cor-principal) !important;
        color: #fff !important;
        border: none !important;
    }
}

/* ==========================================================
   3. NOVA ANIMAÇÃO (Piscar + Expandir Sombra)
   ========================================================== */

@keyframes piscarExpansivo {
    0% {
        filter: brightness(100%);
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); /* Sombra invisível colada no botão */
    }
    50% {
        filter: brightness(120%); /* Botão fica mais claro */
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); /* Sombra expande e fica transparente */
    }
    100% {
        filter: brightness(100%);
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); /* Volta ao normal */
    }
}