/* =============================================
   Tamanho do Texto do Preço Principal (à vista)
   ============================================= */
.preco-produto .preco-promocional {
    font-size: 28px !important;
}

/* ================================
   Tamanho do Texto do Parcelamento
   ================================ */
   
.preco-produto .preco-parcela {
    font-size: 16px !important;
}

/* =========================================================================
   Alteração da Cor do Texto do Botão de Comprar dentro da página do produto
   ========================================================================= */

/**/
.comprar .botao-comprar {
    color: #333129 !important;
}

/* =========================================================
   Alteração da cor do botão na listagem de produtos da home
   ========================================================= */

/* 1. Estado Normal do Botão (Fundo #FFCE32 e Texto #333129) */
.listagem-item .botao-comprar,
.listagem-item .tag-comprar {
    background-color: #FFCE32 !important;
    background-image: none !important; /* Remove degradê padrão do tema */
    color: #333129 !important;
    border-color: #FFCE32 !important;
    transition: all 0.3s ease !important; /* Efeito suave na transição do hover */
}

/* Garante que o ícone do carrinho e o texto no mobile sigam a cor do texto */
.listagem-item .botao-comprar i,
.listagem-item .tag-comprar .titulo,
.listagem-item .tag-comprar i {
    color: #333129 !important;
    transition: color 0.3s ease !important;
}

/* 2. Estado HOVER (Fundo #333129 e Texto #FFCE32) */
.listagem-item .botao-comprar:hover,
.listagem-item .tag-comprar:hover {
    background-color: #333129 !important;
    color: #FFCE32 !important;
    border-color: #333129 !important;
}

/* Garante a troca de cor dos ícones e textos internos ao passar o mouse */
.listagem-item .botao-comprar:hover i,
.listagem-item .tag-comprar:hover .titulo,
.listagem-item .tag-comprar:hover i {
    color: #FFCE32 !important;
}

/* ========================================
   COR DO TEXTO DO BOTÃO "FINALIZAR COMPRA"
   ======================================== */

/* Altera a cor do texto e do ícone dentro do botão */
button.botao.principal.grande,
button.botao.principal.grande i {
    color: #333129 !important;
}

/* ==========================================================
   TROCA DA IMAGEM NA BARRA FRASE (.conteiner)
   ========================================================== */

/* 1. Esconde a imagem antiga */
.barra-frase .conteiner i img {
    display: none !important;
}

/* 2. Insere a nova imagem no contêiner do ícone */
.barra-frase .conteiner i {
    display: inline-block !important;
    width: 24px !important;  /* Ajuste a largura do seu novo ícone */
    height: 24px !important; /* Ajuste a altura do seu novo ícone */
    background-image: url('https://cdn.awsli.com.br/3025/3025055/arquivos/pix-icone.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle !important;
}

/* 3. Ajusta a margem da imagem somente no desktop */
@media only screen and (min-width: 768px) {
    .barra-frase .conteiner i {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================
   TROCA DE TEXTO DA BARRA FRASE
   ========================================================== */

/* Esconde o texto original sem ocultar a tag pai */
.barra-frase .conteiner span {
    font-size: 0 !important;
}

/* Insere o novo texto */
.barra-frase .conteiner span::after {
    content: "Aprovação mais rápida pagando com PIX" !important;
    font-size: 14px !important; /* Ajuste o tamanho da fonte se necessário */
    color: inherit !important;   /* Mantém a cor original configurada */
}

/* ==========================================================
   ALTERAÇÃO DE COR DO MENU SUPERIOR E TEXTOS
   ========================================================== */

/* 1. Cor de Fundo da Barra do Menu Superior */
#cabecalho .menu.superior {
    background-color: #333129 !important;
    background-image: none !important;
}

/* 2. Cor do Texto e Links do Nível Principal (Categorias) */
#cabecalho .menu.superior .nivel-um > li > a,
#cabecalho .menu.superior .nivel-um > li > a .titulo,
#cabecalho .menu.superior .nivel-um > li > a i {
    color: #FFFFFF !important;
    background-color: transparent !important; /* Remove fundo padrão dos títulos */
}

/* 3. Cor do Texto das Subcategorias (Dropdown / Menu Suspenso) */
#cabecalho .menu.superior .nivel-dois a {
    color: #FFFFFF !important;
}

/* 4. Cor do Fundo do Dropdown (Subcategorias) */
#cabecalho .menu.superior .nivel-dois {
    background-color: #333129 !important;
}

/* 5. (Opcional) Cor dos Links no Hover (ao passar o mouse no menu) */
#cabecalho .menu.superior .nivel-um > li:hover > a,
#cabecalho .menu.superior .nivel-um > li:hover > a .titulo,
#cabecalho .menu.superior .nivel-dois li:hover > a {
    color: #FFCE32 !important; /* Amarelo padrão do botão para destaque */
}

/* ==================================================================
   AJUSTE COR DO TEXTO MENU CATEGORIA NÍVEL 1 - EXCLUSIVO PARA MOBILE
   ================================================================== */

/* 1. Cor do Texto e Links do Nível Principal (Categorias) */
@media screen and (max-width: 767px) {
#cabecalho .menu.superior .nivel-um > li > a, 
#cabecalho .menu.superior .nivel-um > li > a .titulo, 
#cabecalho .menu.superior .nivel-um > li > a i {
    color: #333129 !important;
    background-color: transparent !important;
    }

/* 2. Cor dos Links no Hover (ao passar o mouse no menu) */
#cabecalho .menu.superior .nivel-um > li:hover > a,
#cabecalho .menu.superior .nivel-um > li:hover > a .titulo,
#cabecalho .menu.superior .nivel-dois li:hover > a {
    color: #FFCE32 !important; /* Amarelo padrão do botão para destaque */
}
}


/* ==========================================================
   AJUSTE DE TAMANHO DO LOGOTIPO (DESKTOP)
   ========================================================== */

/* 1. Ajuste Geral da Imagem da Logo */
.logo.cor-secundaria img {
    max-width: 230px !important; /* Defina a largura máxima desejada */
    max-height: 70px !important; /* Defina a altura máxima desejada */
    width: auto !important;       /* Mantém a proporção sem distorcer */
    height: auto !important;      /* Mantém a proporção sem distorcer */
    display: block !important;
}

/* 2. Ajuste de Alinhamento e Espaçamento do Container */
.logo.cor-secundaria {
    margin: 0 !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================
   AJUSTE DE TAMANHO DO LOGOTIPO - EXCLUSIVO PARA MOBILE
   ========================================================== */

@media only screen and (max-width: 767px) {
    /* Centraliza o container da logo e ajusta as margens no celular */
    .logo
    .logo.cor-secundaria {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 5px auto !important;
        padding: 0 !important;
        float: none !important;
        text-align: center !important;
    }

    /* Regula o tamanho e a proporção da imagem no celular */
    .logo.cor-secundaria img {
        max-width: 160px !important; /* Altere este valor para aumentar ou diminuir a largura */
        max-height: 60px !important;  /* Altere este valor para controlar a altura máxima */
        width: auto !important;       /* Garante que a imagem não fique esticada */
        height: auto !important;      /* Mantém a proporção correta */
        margin: 0 auto !important;
    }
}

/* ==========================================================
   AJUSTE MARGEM DO LOGOTIPO - EXCLUSIVO PARA MOBILE
   ========================================================== */
   
@media only screen and (max-width: 767px) {
    #cabecalho .logo a {
        width: 100% !important;
        transition: ease-in-out .2s !important;
        margin: 0 AUTO !important;
        height: 40px !important;
    }
}

/* ==========================================================
   AJUSTE MARGEM DO MENU DE CATEGORIAS - EXCLUSIVO PARA MOBILE
   ========================================================== */
   
@media screen and (max-width: 767px) {
    div#menuinsta {
        margin-top: 0px !important;
        margin-right: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 0px !important;
    }
}

/* ==========================================================
   TROCA DO LOGOTIPO DO PIX NO RODAPÉ
   ========================================================== */
   
.logo-rodape-pix-Pagali {
    box-sizing: border-box !important;
    background: url('https://cdn.awsli.com.br/3025/3025055/arquivos/pix-logo.png') no-repeat center/contain !important;
    padding-left: 100% !important; /* Move a imagem original para fora da visão */
    width: 60px !important;       /* Ajuste a largura conforme necessário */
    height: 30px !important;      /* Ajuste a altura conforme necessário */
    display: inline-block !important;
    overflow: hidden !important;
}

/* ==============================================================
   MUDANÇA DA COR DA DIVISÓRIA DOS MÉTODOS DE PAGAMENTO NO RODAPÉ
   ============================================================== */

.gateways-rodape li:nth-child(2) {
    border-left: 1px solid #333129 !important;
    border-left-width: 1px !important;
    border-left-style: solid !important;
    border-left-color: rgb(51, 49, 41) !important;
    margin-left: -3px !important;
}    
    
/* ==========================================================
   OCULTAR BANNER DE AVISO DE COOKIES
   ========================================================== */
  
#avisoCookies {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}