/* Opção 1: Diretamente no container do cabeçalho */
#cabecalho>.conteiner>.row-fluid {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Container pai da busca */
.conteudo-topo .busca,
#cabecalho .busca,
.busca {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* O campo de texto (input) */
.busca input,
.conteudo-topo .busca input,
#cabecalho .busca input {
    width: 100% !important;
    height: 46px !important;
    border-radius: 50px !important;
    border: 1px solid #e0e0e0 !important;
    background-color: #f9f9f9 !important;
    padding-left: 20px !important;
    padding-right: 50px !important; /* Respiro para não escrever por cima da lupa */
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* Efeito ao clicar no campo */
.busca input:focus {
    border-color: #000000 !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Botão da lupa travado no canto direito */
.busca .botao-busca,
.busca button,
#cabecalho .busca .botao-busca {
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important; /* Centraliza verticalmente */
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* Estilo do ícone da lupa */
.busca .botao-busca i,
.busca button i,
.busca .botao-busca span,
.busca button span {
    color: #333333 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: block !important;
}

/* 1. Esconde a caixa/modal que abre ao passar o mouse no rastreio */
.conteudo-topo .rastreio-btn + .dropdown-menu,
.conteudo-topo .rastreio-container .box-rastreio,
.conteudo-topo .rastreio-btn-box,
.conteudo-topo [class*="rastreio"] .dropdown,
.conteudo-topo [class*="rastreio"] ul,
#cabecalho .conteudo-topo .rastreio-btn + div {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Ajuste do tamanho e alinhamento do ícone do Instagram */
.conteudo-topo .rastreio-btn i,
.conteudo-topo a[href*="instagram"] i,
.conteudo-topo .fa-instagram {
    background:transparent !important;
     font-size: 26px !important; /* Ajuste aqui se quiser maior ou menor */
    vertical-align: middle !important;
    transition: color 0.2s ease-in-out, transform 0.2s ease !important;
}

/* 3. Efeito de Hover (mudar de cor / leve zoom) ao passar o mouse */
.conteudo-topo a[href*="instagram"]:hover i,
.conteudo-topo .rastreio-btn:hover i {
    color: #8fbd05 !important; /* Cor rosa/magenta oficial do Instagram (ou use a cor que desejar) */
}

.conteudo-topo .minha-conta:hover .btn-group a i{
    background:transparent !important;
    color:#8fbd05 !important;
}

.conteudo-topo .carrinho a:hover .icon-shopping-cart.fundo-principal{
    background:transparent !important;
    color:#8fbd05 !important;
}

/*Menu Personalizado*/
.menu.superior{
    background: #000000 !important;
}

.menu.superior .nivel-um>li:hover {
    border-top-width: 0;
    margin-top: 0 !important;
}

/* Diminui a fonte e ajusta o menu de categorias principal */
.menu.superior .titulo,
#cabecalho .menu.superior strong,
.menu.superior a,
#cabecalho .conteudo-topo .menu.superior > ul > li > a {
    font-size: 13px !important;    /* Reduz o tamanho da fonte (padrão costuma ser 15px/16px) */
    font-weight: 700 !important;   /* Deixa o negrito um pouco mais suave */
    letter-spacing: 0.1px !important; /* Espaçamento entre as letras para melhorar a leitura */
    color: #8fbd05 !important;
}

/* Opcional: Ajusta o espaçamento interno entre cada item do menu */
.menu.superior > ul > li {
    margin-right: 5px !important;
    margin-left: 5px !important;
}

.scrollToTop {
    left:1rem !important;
    background: #8bb100 !important;
}

/* Container da Barra de Cookies / LGPD / Banner Fixo */
.lgpd-container,
.lgpd-bar,
.alerta-lgpd,
#lgpd-banner,
.barra-cookies {
    background-color: #111111 !important; /* Cor de fundo escura (preto/cinza escuro) */
    color: #ffffff !important;            /* Cor do texto em branco */
    border-top: 1px solid #333333 !important;
    padding: 15px 20px !important;
}

/* Força a cor do texto/mensagem dentro da barra */
.lgpd-container p,
.lgpd-container span,
.lgpd-bar p,
.alerta-lgpd p,
.barra-cookies p,
.barra-cookies span {
    color: #ffffff !important;
    font-size: 13px !important;
}

/* Estilo do Botão de Aceitar ("Entendi", "Aceitar", etc.) */
.lgpd-container button,
.lgpd-container .btn,
.lgpd-bar button,
.alerta-lgpd button,
.barra-cookies button {
    background-color: #00e676 !important; /* Cor verde de destaque (ou a cor principal da loja) */
    color: #000000 !important;             /* Texto do botão em preto */
    border: none !important;
    border-radius: 20px !important;
    padding: 8px 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Efeito Hover no botão de aceitar */
.lgpd-container button:hover,
.lgpd-bar button:hover,
.alerta-lgpd button:hover {
    opacity: 0.9 !important;
    transform: scale(1.03) !important;
}

@media (max-width: 767px) {
    /* Esconde o cabeçalho padrão da Loja Integrada no mobile */
    #cabecalho {
        display: none !important;
    }

    /* Exibe o novo cabeçalho mobile */
    .meu-cabecalho-mobile {
        display: block !important;
        background-color: #ffffff;
        padding: 10px 15px;
        border-bottom: 1px solid #eaeaea;
        width: 100%;
        box-sizing: border-box;
    }

    .topo-linha-1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .logo-mobile img {
        max-height: 40px;
        width: auto;
    }

    .icones-mobile {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .icones-mobile a, 
    .icones-mobile button {
        background: transparent;
        border: none;
        padding: 0;
        font-size: 20px;
        color: #000000;
        cursor: pointer;
    }

    /* Estilo da barra de busca redonda */
    .busca-mobile {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .busca-mobile input {
        width: 100%;
        height: 44px;
        border-radius: 50px;
        border: 1px solid #e0e0e0;
        background-color: #f9f9f9;
        padding-left: 20px;
        padding-right: 45px;
        outline: none;
        font-size: 14px;
    }

    .busca-mobile button {
        position: absolute;
        right: 15px;
        background: transparent;
        border: none;
        font-size: 16px;
        color: #333333;
        cursor: pointer;
    }
}