/* =======================================================
   MENU INSTA (MOBILE) - TODAS AS CATEGORIAS
   ======================================================= */

@media screen and (max-width: 767px) {
    
    /* Regra geral para todas as bolinhas ficarem perfeitas */
    #menuinsta > div > div > div > li.slick-slide > a:before {
        background-size: cover !important; 
        background-position: center !important;
    }

    /* Categoria 1 */
    #menuinsta > div > div > div > li.slick-slide:nth-child(1) > a:before {
        background-image: url("https://cdn.awsli.com.br/2932/2932346/arquivos/1-papelaria.png") !important;
    }

    /* Categoria 2 */
    #menuinsta > div > div > div > li.slick-slide:nth-child(2) > a:before {
        background-image: url("https://cdn.awsli.com.br/2932/2932346/arquivos/2-camisas.png") !important;
    }

    /* Categoria 3 */
    #menuinsta > div > div > div > li.slick-slide:nth-child(3) > a:before {
        background-image: url("https://cdn.awsli.com.br/2932/2932346/arquivos/3-canecas.png") !important;
    }

    /* Categoria 4 */
    #menuinsta > div > div > div > li.slick-slide:nth-child(4) > a:before {
        background-image: url("https://cdn.awsli.com.br/2932/2932346/arquivos/4-garrafinhas.png") !important;
    }

    /* Categoria 5 */
    #menuinsta > div > div > div > li.slick-slide:nth-child(5) > a:before {
        background-image: url("https://cdn.awsli.com.br/2932/2932346/arquivos/5-ecobag.png") !important;
    }

    /* Categoria 6 */
    #menuinsta > div > div > div > li.slick-slide:nth-child(6) > a:before {
        background-image: url("https://cdn.awsli.com.br/2932/2932346/arquivos/6-fotos.png") !important;
    }

    /* Categoria 7 */
    #menuinsta > div > div > div > li.slick-slide:nth-child(7) > a:before {
        background-image: url("https://cdn.awsli.com.br/2932/2932346/arquivos/7-toalhinhas.png") !important;
    }

    /* Categoria 8 */
    #menuinsta > div > div > div > li.slick-slide:nth-child(8) > a:before {
        background-image: url("https://cdn.awsli.com.br/2932/2932346/arquivos/8-lembrancinhas.png") !important;
    }
}
/* =======================================================
   COR DAS LETRAS DO MENU MOBILE (ROSA)
   ======================================================= */

@media (max-width: 767px) {
    /* Altera a cor dos links principais do menu lateral no celular */
    .menu-mobile .nivel-um > li > a,
    .menu-mobile .nivel-dois > li > a,
    .menu-mobile .tit-nav,
    .menu.lateral a,
    #menu-mobile a {
        color: #FF1493 !important; /* Rosa Pink */
        font-weight: 800 !important; /* Deixa a letra mais fortinha para facilitar a leitura */
    }
}
/* =======================================================
   CARRINHO EM FORMATO DE CORAÇÃO (DESKTOP E MOBILE)
   ======================================================= */

/* Pega o contador no computador, no celular e no menu flutuante */
.carrinho-qtd,
.qtd-carrinho,
.carrinho-interno .qtd-carrinho,
#cabecalho .carrinho-interno .qtd-carrinho,
.acoes-conta > li > a > i.icon-shopping-cart + span,
.carrinho-mobile .qtd-carrinho,
.carrinho-mobile .carrinho-qtd,
.menu-mobile .qtd-carrinho,
.busca-mobile .qtd-carrinho {
    background-color: transparent !important;
    /* Molde do coração na cor Rosa Pink (#FF1493) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF1493'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 0 !important; /* Tira o formato de bolinha original */
    color: #FFFFFF !important; /* Cor do número (Branco) */
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    padding-bottom: 2px !important; /* Ajuste para o número ficar bem no centro do coração */
    font-weight: 800 !important;
    font-size: 11px !important;
    border: none !important;
    box-shadow: none !important;
}
/* =======================================================
   1. ANIMAÇÃO DE RESPIRAÇÃO (SEPARADA PARA NÃO DAR ERRO)
   ======================================================= */
@keyframes respirar-botao {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 20, 147, 0.6); }
    50% { transform: scale(1.05); box-shadow: 0 0 10px 0 rgba(255, 20, 147, 0.3); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 20, 147, 0); }
}

/* =======================================================
   2. BOTÕES ROSA E APLICAÇÃO DO EFEITO NO MOBILE
   ======================================================= */
@media (max-width: 767px) {
    /* Força os botões a ficarem Rosa Pink sempre */
    .botoes-mobile .botao,
    .listagem .botao-comprar,
    .produto .botao-comprar,
    .botao-principal,
    a.botao {
        background-color: #FF1493 !important; 
        color: #FFFFFF !important;
        border: none !important;
        opacity: 1 !important;
    }

    /* Aplica a animação respirando apenas nos botões de Comprar */
    .listagem .botao-comprar,
    .produto .botao-comprar {
        animation: respirar-botao 2s infinite ease-in-out !important;
    }
}