/* === ÍCONES SVG === */
svg path,
svg rect {
    fill: #FF69B4;
}

/* === Aba ativa na descrição do produto === */
.tab-content .tab-pane .tabs .tab-link.current {
    background-color: #000000;
}

/* === Hover no botão "Guia de Medidas" === */
.produto .size-table .open-table:hover {
    background-color: #FF69B4;
    border: 1px solid red;
}

/* === Scroll personalizado no filtro === */
.filtro.lista ul::-webkit-scrollbar-thumb {
    background-color: #FF69B4;
}
.filtro.lista ul {
    scrollbar-color: #FF69B4 transparent;
}

/* === Modal Newsletter com imagem === */
.modal-modalNewsletter .fancybox-skin {
    background-image: url('https://cdn.awsli.com.br/821/821616/arquivos/template (3).png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* === Botão de busca com ícone === */
button.buscarCodigo:before {
    content: "\f002";
    font-family: FontAwesome;
    font-size: 1.2em;
}

button.buscarCodigo {
    position: absolute;
    right: 0;
    float: right;
    line-height: 38px;
    padding: 0 15px;
    background-color: #000000;
    color: #000000;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* === Logo da loja === */
.logo a img {
    max-height: 70px;
}

/* === Barra superior === */
#barraTopo .conteiner {
    height: 75px;
}

/* === Ícones do menu superior === */
.menu.superior .nivel-um > li > a i {
    background-color: transparent;
}

/* === AJUSTES PARA CELULARES === */
@media (max-width: 768px) {
    /* Reduzir altura da barra superior */
    #barraTopo .conteiner {
        height: 60px;
    }

    /* Ajustar logo para caber melhor em telas pequenas */
    .logo a img {
        max-height: 50px;
    }

    /* Botão de busca com mais espaço para o dedo */
    button.buscarCodigo {
        padding: 0 12px;
        font-size: 1em;
        line-height: 36px;
    }

    /* Abas mais legíveis no mobile */
    .tab-content .tab-pane .tabs .tab-link.current {
        font-size: 14px;
        padding: 10px;
    }

    /* Melhor responsividade do modal */
    .modal-modalNewsletter .fancybox-skin {
        background-size: contain;
    }

    /* Menu superior com ícones mais organizados */
    .menu.superior .nivel-um > li > a {
        font-size: 14px;
        padding: 10px 5px;
    }

    /* === Ajuste para o banner superior no mobile === */
    #tarja-top { /* Usando o ID correto do seu banner */
        width: 100%; /* Garante que o banner ocupe toda a largura da tela */
        height: auto; /* Ajusta automaticamente a altura */
        background-size: cover; /* Faz a imagem do banner cobrir toda a área */
        background-position: center center; /* Centraliza a imagem */
        background-repeat: no-repeat; /* Impede a repetição da imagem */
        display: block; /* Garante que o banner seja exibido */
        visibility: visible; /* Garante que o banner seja visível */
    }
}