body {
    font-family: "Roboto", "sans-serif";
}
/* INICIO PERSONALIZACAO DAS CORES DOS BOTOES*/

.alert-warning {
    background: #ff0000;
    color: #fff;
}

.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
    background-color: #ff0000;
    border-color: #ff0000;
}

.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 0, 0, 0.5);
}

.btn-success.focus, .btn-success:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 0, 0, 0.5);
}

.btn-success {
    background-color: #ff0000;
    border-color: #ff0000;
}
.btn-success:hover {
    background-color: #015Aff;
    border-color: #015Aff;
}
.btn-light {
    background-color: #015Aff;
    border-color: #015Aff;
    color: #fff;
}

/* FIM PERSONALIZACAO DAS CORES DOS BOTOES*/

.search__button {
    background: #015Aff;
}

.loading__spinner {
    color: #ED3237;
}

.site-header {
    background-color: #015Aff !important;
}
.site-header__logo img {
    height: 70px;
}

.site-header__cart i {
    color: #999;
}

.site-header__cart i:hover {
    color: #5a5a5a;
}

.site-header__cart .indicator__value {
    background-color: #ED3237;
    color: #fff;
}

.footer-contacts__text img {
    height: 70px;
}

.footer-apps__text img {
    width: 120px;
}

.nav-panel {
    background: #015Aff;
    color: #FFF;
}

.block-brands__slider .owl-nav i, .block-products-carousel__slider .owl-nav i {
    color: #ED3237;
}

.block-products-carousel__column .product-card__name {
    min-height: 55px;
}

.block-products-carousel__column .product-card__prices {
    min-height: 35px;
    margin-bottom: 10px;
}

.block-products-carousel__column .product-card__buttons {
    margin-top: 0px;
}

.product-card__prices {
    min-height: 15px;
}

.product-card__price {
    color: #015Aff;
}

.product-card__new-price {
    color: #015Aff;
}

.product__price {
    color: #015Aff;
}

.product__new-price {
    color: #015Aff;
}

.top-button {
    color: #015Aff;
}

@media (max-width: 991px) {
    .indicator__value {
        background: #015Aff;
        color: #FFF;
    }
}

.page-header__back i {
    color: #015Aff;
}

.input-check__input:checked ~ .input-check__box {
    background: #015Aff;
}

.block-slideshow .owl-carousel .owl-dot {
    background: #999;
}

.block-slideshow .owl-carousel .owl-dot.active {
    background: #ED3237;
}

.block-header__arrow {
    background: transparent;
    color: #ED3237;
}

.block-header__arrow:hover {
    background: #f7f7f7;
    color: #999;
}

.block-header__arrow:active {
    background: transparent;
    color: #015Aff;
}

.block-header__arrow:focus {
    background: #f7f7f7;
    color: #015Aff;
}

.filter__arrow {
    color: #ED3237;
}

.site-newsletter__title {
    color: #fff;
    background: #015Aff;
}
.site-newsletter {
    background: #015Aff;
}

.service-bar {
    background: #ff0000;
    color: #fff;
}

.footer-links__title {
    color: #015Aff;
}

.footer-contacts__title, .service-bar__title:hover {
    color: #015Aff;
}

.footer-newsletter__title {
    color: #015Aff;
}

.footer-payment__title {
    color: #015Aff;
}

.footer-seals__title {
    color: #015Aff;
}

.footer-apps__title {
    color: #015Aff;
}

.megamenu__links--level--1 .megamenu__item a {
    font-size: 14px;
    white-space: nowrap;
    margin-right: 15px;
}

.footer-seals__text img {
    width: 50%!important;
}

.block-header__title {
    color: #015Aff;
}

.page-header__title {
    color: #015Aff;
}

.product__name {
    color: #015Aff;
}

.container__products-carousel-grid {
    margin-top: 30px;
}

.product-tabs__item {
    color: #015Aff;
}

.product-tabs__item:hover {
    color: #015Aff;
}

.product-tabs__item--active {
    border-bottom-color: #015Aff;
}

.block-products-carousel[data-layout=grid-5] .product-card .product-card__actions {
    padding: 15px 15px 15px;
}

[dir=ltr] .nav-panel__nav-links {
    margin-right: 0px;
    height: 46px;
}

.nav-links__list {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

.nav-links__item-link:hover {
    color: #ED3237;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nav-links__item-link {
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .nav-links__item-link {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
    }
}

.nav-links__item--has-submenu .nav-links__item-body {
    padding-right: 15px!important;
}

.nav-links__item-body .fa-chevron-down {
    display: none;
}

.megamenu__links--level--1 > .megamenu__item > a {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    padding-right: 20px;
}

.megamenu__links--level--1 > .megamenu__item > a:hover {
    color: #015Aff;
}

.megamenu__links--level--1 > .megamenu__item > a:active {
    color: #015Aff;
}

.megamenu__links--level--1 > .megamenu__item > a:focus {
    color: #015Aff;
}

.nav-links__item {
    margin-left: 2px;
    margin-right: 2px;
}

.topbar {
    background: #015Aff;
}

.topbar-link:hover {
    color: #fff;
}

.topbar-link {
    background: #ff0000;
    color: #fff;
    padding: 10px;
}
.topbar-dropdown__btn {
    color: #fff;
}

.topbar-message {
    background: #606061;
    color: #FFF;
    min-height: 40px;
    padding: 10px;
}

.topbar-message .fa-shipping-fast {
    font-size: 20px;
}

.topbar-app {
    background: #e1e1e1;
    color: #FFF;
    min-height: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0px;
    padding-right: 0px;
}

.topbar-app img {
    background: #FFF;
    padding: 7px;
    box-shadow: 1px 1px 3px #606061;
    -webkit-box-shadow: 1px 1px 3px #606061;
    -moz-box-shadow: 1px 1px 3px #606061;
    border-radius: 10px;
    height: 48px;
}

.topbar-app .btn {
    font-weight: 500;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #606061;
    -webkit-box-shadow: 1px 1px 3px #606061;
    -moz-box-shadow: 1px 1px 3px #606061;
}

/* 1. ÍCONES DO CARRINHO E LISTA DE DESEJOS (Deixar Brancos) */
.site-header__cart i {
    color: #FFFFFF !important;
}
.site-header__cart i:hover {
    color: #e2e2e2 !important;
}

/* 2. TEXTOS DE CONTATO (Telefone e WhatsApp Brancos) */
/* Seletores genéricos para forçar a cor branca em contatos no cabeçalho */
.site-header a[href*="whatsapp"],
.site-header a[href*="tel"],
.site-header .fa-whatsapp,
.site-header .fa-phone,
.site-header-contact,
.site-header span,
.site-header p {
    color: #FFFFFF !important;
}


.site-header form,
.site-header .search,
.site-header__search {
    background-color: #FFFFFF !important;
    border-radius: 30px !important;
    border: none !important;
    box-shadow: none !important;

    /* Mantém a altura fina */
    height: 38px !important;

    /* AJUSTE AQUI: 15px de espaço nas laterais para segurar o microfone dentro da barra */
    padding: 0px 15px !important;

    display: flex !important;
    align-items: center !important;
}

/* CÓDIGO DO MICROFONE: Garante que ele fique no canto esquerdo com um respiro */
.site-header form i.fa-microphone,
.site-header form .fa-microphone,
[class*="microphone"] {
    margin-right: 10px !important;
    /* Afasta o texto digitado para a direita */
    margin-left: 5px !important;
    /* Garante que ele não cole na borda esquerda da barra */
    color: #015Aff !important;
    font-size: 16px !important;
}
/* 3. BARRA DE PESQUISA (Branca, Arredondada, sem linha extra e mais Fina) */
/* Fundo branco e cantos arredondados na caixa principal */
.site-header form,
.site-header .search,
.site-header__search {
    background-color: #FFFFFF !important;
    border-radius: 30px !important;
    /* Cantos arredondados */
    border: none !important;
    /* Remove a linha branca/borda inferior */
    box-shadow: none !important;
    /* Remove sombras que parecem linhas */

    /* MODIFICAÇÕES PARA DEIXAR MAIS FINA: */
    padding: 0px 15px !important;
    /* Zeramos o espaçamento vertical e aumentamos um pouco o das laterais */
    height: 38px !important;
    /* Força a barra a ter uma altura menor (ajuste esse número se quiser mais fina ou mais grossa) */
    display: flex !important;
    /* Garante que o conteúdo interno se alinhe ao novo tamanho */
    align-items: center !important;
    /* Centraliza a lupa e o texto verticalmente dentro da barra fina */
}

/* Input (onde digita): Transparente para usar o fundo branco da caixa */
.site-header input[type="text"],
.site-header input.search__input {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    /* Texto que o cliente digitar fica escuro */
    outline: none !important;
    /* Remove linha extra ao clicar */
}

/* 4. ÍCONES DENTRO DA PESQUISA (Lupa e Microfone) */
.site-header form button,
.site-header .search__button,
.site-header form i {
    background: transparent !important;
    color: #015Aff !important;
    /* Ícones em azul para contrastar com o fundo branco */
    border: none !important;
}

/* ELIMINAR QUALQUER BORDA OU SOMBRA DO TOPO */
.site-header,
.site-header__search,
.topbar,
.nav-panel {
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* AJUSTE DE RECORTE DO TOPO */
.site-header {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}
.nav-panel {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/* 3. BARRA DE PESQUISA (Ajustada, Fina e com Elementos Alinhados) */
.site-header form,
.site-header .search,
.site-header__search {
    background-color: #FFFFFF !important;
    border-radius: 30px !important;
    border: none !important;
    box-shadow: none !important;

    /* Mantém a barra fina */
    height: 38px !important;
    padding: 0px 15px !important;

    /* Alinhamento base */
    display: flex !important;
    align-items: center !important;
}

/* Força o campo de texto a ocupar o espaço correto e trazer as palavras de volta */
.site-header input[type="text"],
.site-header input.search__input {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    outline: none !important;

    /* Garante o preenchimento correto na horizontal */
    width: 100% !important;
    max-width: 80% !important;
    /* Deixa margem nas pontas para os ícones */
    height: 100% !important;
    padding: 0px 10px !important;

    /* Faz o texto do "Busca por..." reaparecer alinhado */
    line-height: 38px !important;
}

/* Organiza os botões (Lupa e Microfone) de forma independente */
.site-header form button,
.site-header .search__button,
.site-header__search button,
.site-header form .search__button {
    background: transparent !important;
    color: #015Aff !important;
    border: none !important;
    box-shadow: none !important;

    /* Mantém os botões em formato quadrado e centralizado */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 35px !important;
    /* Como modificar para criar distância: */
    margin-left: 10px !important;
    /* Cria espaço na esquerda de cada botão, afastando-os do texto */
    margin-right: 5px !important;
    /* Cria espaço na direita */
    padding: 0 !important;
}

/* Ajuste fino para os ícones internos não herdarem tamanhos gigantes */
.site-header form i,
.site-header__search i {
    color: #015Aff !important;
    font-size: 16px !important;
    /* Tamanho ideal para a barra fina */
}

/* 1. Remove a trava do texto para ele ocupar o espaço real */
.site-header input[type="text"],
.site-header input.search__input {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    outline: none !important;

    flex: 1 !important;
    /* Faz o texto crescer */
    max-width: none !important;
    /* REMOVE a trava que causou o erro */
    width: 100% !important;
    height: 100% !important;
    padding: 0px 15px !important;
}

/* 2. Joga a Lupa e o X para o extremo direito */
.site-header form button,
.site-header .search__button,
.site-header__search button {
    background: transparent !important;
    color: #015Aff !important;
    border: none !important;
    box-shadow: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 35px !important;

    /* A MÁGICA AQUI: Empurra os botões para o canto direito */
    margin-left: auto !important;
    margin-right: 5px !important;
    /* Dá um respiro para não colar na borda azul */
}

/* 3. BARRA DE PESQUISA */
.site-header form,
.site-header .search,
.site-header__search {
    background-color: #FFFFFF !important;
    border-radius: 30px !important;
    border: none !important;
    box-shadow: none !important;

    height: 38px !important;
    padding: 0px 15px !important;

    /* CORREÇÃO DO ERRO: Força o formulário a ocupar toda a barra branca */
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* O campo de texto estica para ocupar o espaço do meio e empurra o X e a Lupa */
.site-header input[type="text"],
.site-header input.search__input {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    outline: none !important;

    /* Faz o campo crescer ocupando todo o vazio */
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0px 10px !important;
}

/* Trava a Lupa e o X na direita e impede que sejam esmagados */
.site-header form button,
.site-header .search__button,
.site-header__search button {
    background: transparent !important;
    color: #015Aff !important;
    border: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: auto !important;
    padding: 0 5px !important;

    /* Trava os botões para não encolherem e empurra eles para o final */
    flex-shrink: 0 !important;
}

/* Garante o Microfone no canto esquerdo */
.site-header form i.fa-microphone,
.site-header form .fa-microphone,
[class*="microphone"] {
    margin-right: 5px !important;
    flex-shrink: 0 !important;
}

.site-header form i,
.site-header__search i {
    color: #015Aff !important;
    font-size: 16px !important;
}

/* FORÇA BRUTA: FALE CONOSCO E TODOS OS CONTATOS BRANCOS */
.site-header [class*="contact"],
.site-header [class*="contact"] *,
.site-header [class*="phone"],
.site-header [class*="phone"] *,
.site-header p,
.site-header small,
.site-header span,
.site-header .text-muted {
    color: #FFFFFF !important;
}

/* REMOVER VÃO BRANCO ENTRE NEWSLETTER E BARRA DE SERVIÇOS */
.site-newsletter {
    margin-bottom: 0px !important;
    border-bottom: none !important;
}

.service-bar {
    margin-top: 0px !important;
    border-top: none !important;
}

/* Limpa a caixa externa da pesquisa e PUXA A BARRA PARA CIMA no PC */
.site-header .search, .site-header__search {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    /* Zera qualquer margem que estava quebrando o menu */

    /* O NOVO TRUQUE: Sobe a barra flutuando sem quebrar o que está embaixo */
    transform: translateY(-25px) !important;
}

/* ========================================= */
/* AJUSTES EXCLUSIVOS PARA O CELULAR (MOBILE) */
/* ========================================= */
@media (max-width: 991px) {

    /* 1. Fundo do cabeçalho azul e sem linha divisória */
    .mobile-header,
    .mobile-header__panel {
        background-color: #015Aff !important;
        border-bottom: none !important;
    }

    /* 2. Ícones (Menu hamburguer, prancheta e carrinho) em Branco */
    .mobile-header i,
    .mobile-indicator i,
    .mobile-header__menu-button i {
        color: #FFFFFF !important;
    }

    /* 3. Ajuste da bolinha do carrinho (Voltando para Vermelho) */
    .mobile-indicator .indicator__value {
        background-color: #ff0000 !important;
        color: #FFFFFF !important;
    }

    /* 4. Barra de Pesquisa (Branca, redonda e sem borda cinza) */
    .mobile-header .search__input,
    .mobile-search__input,
    .mobile-header form {
        background-color: #FFFFFF !important;
        border-radius: 30px !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 5. Ícone da Lupa na pesquisa do celular (Azul) */
    .mobile-header .search__button i,
    .mobile-search__button i,
    .mobile-search__button {
        color: #015Aff !important;
        background: transparent !important;
        border: none !important;
    }
}

/* ========================================= */
/* RECUPERAR A LUPA E ARREDONDAR (MOBILE)    */
/* ========================================= */

/* 1. Transforma a caixa inteira da pesquisa em uma "pílula" arredondada */
form.search,
.search form,
form:has(input[placeholder*="código"]) {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #cccccc !important;
    /* Cria uma borda cinza em volta de tudo */
    border-radius: 30px !important;
    margin: 8px 10px !important;
    /* Dá um respiro para não colar nas bordas da tela */
    background-color: #FFFFFF !important;
    overflow: hidden !important;
    /* Impede que os cantos fiquem quadrados */
    padding: 0 !important;
}

/* 2. Limpa o campo de texto para ele não ter bordas quadradas próprias */
.search__input,
input[placeholder*="código"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 40px !important;
    padding-left: 15px !important;
    flex: 1 !important;
    /* Faz o texto ocupar todo o espaço do meio */
    width: 100% !important;
    outline: none !important;
}

/* 3. Ressuscita a Lupa e trava ela no canto direito em Azul */
.search__button,
form:has(input[placeholder*="código"]) button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 45px !important;
    height: 40px !important;
    color: #015Aff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Garante que o desenho do ícone assuma o Azul vibrante */
.search__button i,
form:has(input[placeholder*="código"]) button i {
    color: #015Aff !important;
    font-size: 18px !important;
    display: block !important;
}

/* 1. Limpa a "caixa de fora" para não duplicar bordas */
.site-header .search,
.site-header__search {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. Aplica a pílula APENAS na "caixa de dentro" (formulário) */
.site-header form {
    background-color: #FFFFFF !important;
    border-radius: 30px !important;
    border: 1px solid #cccccc !important;
    /* Aqui fica a sua borda única */
    overflow: hidden !important;
    /* Corta os cantos quadrados do texto */

    height: 38px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* ========================================= */
/* FUNDO AZUL ATRÁS DA PESQUISA NO MOBILE    */
/* ========================================= */

.site-header__search,
.site-header .search,
.mobile-header__search,
.mobile-header .search,
.mobile-search {
    background-color: #015Aff !important;
    margin: 0 !important;
    padding: 10px !important;
    /* Dá um respiro azul em cima e embaixo da barra branca */
}

/* ========================================= */
/* FUNDO AZUL ATRÁS DA PESQUISA NO MOBILE    */
/* ========================================= */

.site-header__search,
.site-header .search,
.mobile-header__search,
.mobile-header .search,
.mobile-search {
    background-color: #015Aff !important;
    padding: 10px 0 !important;
    /* Dá um respiro azul em cima e embaixo */

    /* CORREÇÃO DO ATROPELAMENTO: */
    margin-top: 15px !important;
    /* Empurra a barra para baixo da logo */
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;

    clear: both !important;
    /* Obriga a barra a pular para a linha de baixo */
    display: block !important;
    width: 100% !important;
}

/* Garante que a caixa azul do topo estique o suficiente para caber a barra */
.mobile-header {
    height: auto !important;
    min-height: 110px !important;

    /* 1. Limpa a "caixa de fora" para não duplicar bordas */
    .site-header .search,
    .site-header__search {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. Aplica a pílula APENAS na "caixa de dentro" (formulário) */
.site-header form {
    background-color: #FFFFFF !important;
    border-radius: 30px !important;
    border: 1px solid #cccccc !important;
    /* Aqui fica a sua borda única */
    overflow: hidden !important;
    /* Corta os cantos quadrados do texto */

    height: 38px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* ========================================= */
/* ALINHAMENTO DEFINITIVO E SEM LINHAS (MOBILE) */
/* ========================================= */

/* 1. Limpa todas as sombras, linhas e margens antigas que estavam atrapalhando */
.mobile-header,
.mobile-header__panel,
.mobile-header-inner {
    box-shadow: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 2. O Header Principal: Aumentamos a altura dele para 120px (Cria o espaço perfeito) */
.mobile-header {
    background-color: #015Aff !important;
    min-height: 120px !important;
    position: relative !important;
}

/* 3. A Pesquisa: Posicionada no fundo do Header Principal, totalmente livre da logo */
.mobile-header .search,
.mobile-header__search,
.mobile-search {
    position: absolute !important;
    bottom: 0px !important;
    /* Descola 12px do banner de baixo */
    left: 0 !important;
    right: 0 !important;

    /* O truque para esticar a barra sem encostar nos cantos da tela: */
    width: auto !important;
    margin-left: 15px !important;
    margin-right: 15px !important;

    padding: 0 !important;
    background-color: transparent !important;
    /* O fundo azul já vem da caixa de fora */
    border: none !important;
    z-index: 99 !important;
}