/* ==========================================================
   VP3 - AJUSTE SEGURO DO CABEÇALHO
   ========================================================== */


/* 1. FUNDO DO CABEÇALHO */

#cabecalho,
#cabecalho .conteiner {
    background-color: #F7F8FA !important;
    background-image: none !important;
}


/* 2. TEXTOS DA ÁREA DE ATENDIMENTO / CONTA */

.cores-personalizadas #cabecalho .painel a,
.cores-personalizadas #cabecalho .painel span {
    color: #123B63 !important;
}


/* 3. ÍCONES SVG DO CABEÇALHO */

.cores-personalizadas #cabecalho .painel a > svg,
.cores-personalizadas .icone-carrinho svg,
.cores-personalizadas .busca-topo svg {
    fill: #123B63 !important;
}


/* 4. MENU AZUL */

.menu.superior,
.menu.superior .nivel-um {
    background-color: #123B63 !important;
}


/* 5. TEXTO DO MENU EM BRANCO */

.menu.superior .nivel-um > li > a,
.menu.superior .nivel-um > li > a strong {
    color: #FFFFFF !important;
}
/* ==========================================================
   VP3 - SOMENTE CABEÇALHO SUPERIOR
   NÃO ALTERA O MENU DE CATEGORIAS
   ========================================================== */


/* FUNDO DO CABEÇALHO */
body #cabecalho,
body #cabecalho > .conteiner {
    background: #F7F8FA !important;
    background-image: none !important;
}


/* ==========================================================
   TEXTOS: ATENDIMENTO / MINHA CONTA / CARRINHO
   ========================================================== */

body #cabecalho .conteudo-topo,
body #cabecalho .conteudo-topo a,
body #cabecalho .conteudo-topo span,
body #cabecalho .conteudo-topo strong,

body #cabecalho .acoes-conta,
body #cabecalho .acoes-conta a,
body #cabecalho .acoes-conta span,

body #cabecalho .painel,
body #cabecalho .painel a,
body #cabecalho .painel span,

body #cabecalho .carrinho,
body #cabecalho .carrinho a,
body #cabecalho .carrinho span {
    color: #123B63 !important;
}


/* ==========================================================
   ÍCONES DO CABEÇALHO
   ========================================================== */

/* Ícones em fonte */
body #cabecalho .conteudo-topo i,
body #cabecalho .acoes-conta i,
body #cabecalho .painel i,
body #cabecalho .carrinho i {
    color: #123B63 !important;
}


/* Ícones criados com :before */
body #cabecalho .conteudo-topo [class*="icon-"]::before,
body #cabecalho .acoes-conta [class*="icon-"]::before,
body #cabecalho .painel [class*="icon-"]::before,
body #cabecalho .carrinho [class*="icon-"]::before {
    color: #123B63 !important;
    opacity: 1 !important;
}


/* Ícones mais comuns da Loja Integrada */
body #cabecalho .icon-user::before,
body #cabecalho .icon-comment::before,
body #cabecalho .icon-comments::before,
body #cabecalho .icon-shopping-cart::before,
body #cabecalho .icon-search::before,
body #cabecalho .icon-bag::before {
    color: #123B63 !important;
}


/* ==========================================================
   CASO OS ÍCONES SEJAM SVG
   ========================================================== */

body #cabecalho .conteudo-topo svg,
body #cabecalho .acoes-conta svg,
body #cabecalho .painel svg,
body #cabecalho .carrinho svg {
    color: #123B63 !important;
    stroke: #123B63 !important;
}


/* Traços internos */
body #cabecalho .conteudo-topo svg *,
body #cabecalho .acoes-conta svg *,
body #cabecalho .painel svg *,
body #cabecalho .carrinho svg * {
    stroke: #123B63 !important;
}


/* Elementos preenchidos do SVG */
body #cabecalho svg path[fill]:not([fill="none"]),
body #cabecalho svg circle[fill]:not([fill="none"]) {
    fill: #123B63 !important;
}


/* ==========================================================
   CAMPO DE BUSCA
   ========================================================== */

body #cabecalho .busca input,
body #cabecalho input[type="text"],
body #cabecalho input[type="search"] {
    background: #FFFFFF !important;
    color: #333333 !important;
}


/* "Digite o que você procura" */
body #cabecalho .busca input::placeholder,
body #cabecalho input[type="text"]::placeholder,
body #cabecalho input[type="search"]::placeholder {
    color: #6B7280 !important;
    opacity: 1 !important;
}


/* Ícone da lupa */
body #cabecalho .busca .botao,
body #cabecalho .busca .botao-busca,
body #cabecalho .busca [class*="icon-search"],
body #cabecalho .busca [class*="icon-search"]::before {
    color: #123B63 !important;
}


/* ==========================================================
   CARRINHO
   ========================================================== */

body #cabecalho .carrinho > a,
body #cabecalho .carrinho > a > i,
body #cabecalho .carrinho > a > i::before {
    color: #123B63 !important;
}
/* ==========================================
   VP3 - COR DO TOPO DO CABEÇALHO
   ========================================== */

/* Atendimento e Minha Conta */
.cores-personalizadas #cabecalho .painel a,
.cores-personalizadas #cabecalho .painel a span,
.cores-personalizadas #cabecalho .painel span {
    color: #123B63 !important;
}

/* Ícones Atendimento / Minha Conta */
.cores-personalizadas #cabecalho .painel a > svg,
.cores-personalizadas #cabecalho .painel svg {
    fill: #123B63 !important;
    stroke: #123B63 !important;
}

/* Carrinho */
.cores-personalizadas .icone-carrinho svg,
.cores-personalizadas #cabecalho .icone-carrinho svg {
    fill: #123B63 !important;
    stroke: #123B63 !important;
}

/* Busca / lupa */
.cores-personalizadas .busca-topo svg,
.cores-personalizadas #cabecalho .busca-topo svg {
    fill: #123B63 !important;
    stroke: #123B63 !important;
}

/* Texto digitado e placeholder da busca */
#cabecalho .busca-topo input {
    color: #4B5563 !important;
}

#cabecalho .busca-topo input::placeholder {
    color: #6B7280 !important;
    opacity: 1 !important;
}
b[data-title="Atendimento"] {
    color: #123B63 !important;
}
/* =========================================
   VP3 - COR DO TOPO DO CABEÇALHO
   ========================================= */

/* Atendimento e Minha Conta */
.newheader .options .item b[data-title],
.newheader .options .item b[data-title]::before,
.newheader .options .item b[data-title]::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
    opacity: 1 !important;
}


/* Texto dentro dos itens */
.newheader .options .item span,
.newheader .options .item span::before,
.newheader .options .item span::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
}


/* Ícones do Atendimento / Minha Conta */
.newheader .options .item i,
.newheader .options .item i::before,
.newheader .options .item i::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
    opacity: 1 !important;
}


/* Ícones criados diretamente no item */
.newheader .options .item::before,
.newheader .options .item::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
}


/* Links da área superior */
.newheader .options .item a,
.newheader .options .item a::before,
.newheader .options .item a::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
}


/* Carrinho */
.newheader .options .carrinho,
.newheader .options .carrinho *,
.newheader .options .carrinho::before,
.newheader .options .carrinho::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
}


/* Lupa da busca */
.newheader .busca i,
.newheader .busca i::before,
.newheader .busca i::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
}
/* =========================================
   VP3 - SOMENTE ÍCONES DO CABEÇALHO
   ========================================= */

/* Pseudo-elementos dos ícones */
.newheader .options ul li::before,
.newheader .options ul li::after,
.newheader .options ul li *::before,
.newheader .options ul li *::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
    border-color: #123B63 !important;
    opacity: 1 !important;
}


/* SVGs dos ícones */
.newheader .options svg,
.newheader .options svg *,
.newheader header svg,
.newheader header svg * {
    color: #123B63 !important;
    fill: #123B63 !important;
    stroke: #123B63 !important;
    opacity: 1 !important;
}


/* Ícones que usam fonte */
.newheader .options i,
.newheader .options i::before,
.newheader .options i::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
}


/* LUPA DA BUSCA */
.newheader .busca *::before,
.newheader .busca *::after,
.newheader .busca-topo *::before,
.newheader .busca-topo *::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
    border-color: #123B63 !important;
}


/* SVG DA LUPA */
.newheader .busca svg,
.newheader .busca svg *,
.newheader .busca-topo svg,
.newheader .busca-topo svg * {
    fill: #123B63 !important;
    stroke: #123B63 !important;
}


/* CARRINHO */
.newheader [class*="carrinho"]::before,
.newheader [class*="carrinho"]::after,
.newheader [class*="cart"]::before,
.newheader [class*="cart"]::after {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
    border-color: #123B63 !important;
}
/* =========================================
   VP3 - ÍCONES DO TOPO EM AZUL
   ========================================= */

.newheader header .options .item > img {
    filter: brightness(0) saturate(100%)
            invert(57%)
            sepia(15%)
            saturate(1798%)
            hue-rotate(169deg)
            brightness(41%)
            contrast(113%) !important;

    opacity: 1 !important;
}
/* BOTÃO FINALIZAR COMPRA */
#comprar-ajax-status .botao.principal.ir-carrinho {
    background: #E51B2A !important;
    background-image: none !important;
    border-color: #E51B2A !important;

    color: #FFFFFF !important;

    opacity: 1 !important;
}

/* ÍCONE DO CARRINHO */
#comprar-ajax-status .botao.principal.ir-carrinho i,
#comprar-ajax-status .botao.principal.ir-carrinho i::before {
    color: #FFFFFF !important;
}

/* QUANDO PASSAR O MOUSE */
#comprar-ajax-status .botao.principal.ir-carrinho:hover {
    background: #C91523 !important;
    border-color: #C91523 !important;
    color: #FFFFFF !important;
}
/* BOTÃO PROSSEGUIR - LOGIN */
#id_senha + button.botao.principal {
    background: #E51B2A !important;
    background-image: none !important;
    border-color: #E51B2A !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* HOVER */
#id_senha + button.botao.principal:hover {
    background: #C91523 !important;
    border-color: #C91523 !important;
    color: #FFFFFF !important;
}