@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cor-principal: #122A59;
    --cor-padrao-texto: #0d0d0d;
    --cor-padrao-texto-secundario: #0477BF;
    --cor-padrao-fundo: #EBEBEB;
    --cor-padrao-fundo-menu: #F4F4F4;
    --cor-secundaria: #D91424;
    --cor-terciaria: #F28E13;
    --cor-padrao-bg-leve: #9bc9e5;
}

a { text-decoration: none; }
h2 { color: var(--cor-principal); font-size: 1em; }

body {
    background-color: var(--cor-padrao-fundo);
    color: var(--cor-padrao-texto);
    font-family: "Montserrat", serif;
    font-size: 1em;
    margin: 0 auto;
}
/* .avaliacao-estrela { color: var(--cor-terciaria); font-size: 0.9em; } */
.barra-categoria {
    /* background-color: #F9F9F9 !important; */
    background-color: #F2F2F2 !important;
    color: var(--cor-principal);
    font-weight: 600;  
}
.barra-categoria a { color: var(--cor-principal); }
.barra-topo {
    background-color: var(--cor-padrao-texto-secundario);
    color: #FFF;
}
.botao-padrao { height: 50px; font-weight: 800;}
.botao-conta {
    background: var(--cor-padrao-texto-secundario);
    background: linear-gradient(150deg, rgba(4, 119, 191, 1) 0%, rgba(2, 55, 89, 1) 95%);
    font-size: 1em;
    font-weight: 500;
}
.botao-padrao-comprar { background-color: var(--cor-principal); color:#FFFFFF; }
.botao-padrao-comprar-outline { background-color: #FFFFFF; color:var(--cor-principal); border-color: var(--cor-principal); }

.botao-padrao-adicionar { background-color: var(--cor-padrao-bg-leve); color: var(--cor-principal); }
.botao-padrao-adicionar:hover,
.botao-padrao-comprar:hover {
    background-color: var(--cor-secundaria);
    color: #FFFFFF;
}

.botao-padrao-comprar-outline:hover { background-color: var(--cor-principal); color:#FFFFFF; }

.box-categoria-titulo {
    backdrop-filter: blur(2px);
    background-color: rgba(4, 119, 191, 0.25);
    bottom: 5px;
    color: #FFFFFF;
    font-weight: 600;
    height: 45px;
    line-height: normal;
    padding: 2%;
}
.box-header { 
    border-bottom: 2px solid #d9d9d957;
    height: 45px;
    padding: 4% 3%; 
}
.box-header-2l {
    height: 60px;
}
.box-header h2 {
    color: var(--cor-principal);
    font-size: 1em;
    font-weight: bold;
}
.box-footer { 
    border-top: 2px solid #d9d9d957;
    color: var(--cor-principal);
    font-size: 0.875em;
    height: 45px;
    padding: 4% 3%; 
}
/* .cabecalho, .cabecalho button { color: var(--cor-principal); } */

.breadcrumb { 
    color: var(--cor-principal);
    font-size: 0.8em;
}
.breadcrumb-item.active { font-weight: bold; color: inherit;} 
.breadcrumb a { color: inherit; }

.cabecalho .btn-primary { 
    --bs-btn-bg: var(--cor-padrao-texto-secundario);
    --bs-btn-border-color: var(--cor-padrao-texto-secundario);
    --bs-btn-hover-bg: var(--cor-principal);
    --bs-btn-hover-border-color: var(--cor-principal);
}
.cabecalho .btn-outline-primary {
    --bs-btn-border-color: var(--cor-padrao-texto-secundario);
    --bs-btn-hover-bg: var(--cor-padrao-texto-secundario);
    --bs-btn-color: var(--cor-padrao-texto-secundario);
}

.carousel-indicators [data-bs-target] {
    background-color: var(--cor-principal);
    border-radius: 50%;
    width: 15px;
    height: 15px;
}

.box-categoria-imagem {
    background-repeat: no-repeat;
    background-size: cover;
    height: 106px;
    width: 100%;
}

.produto-destaque-preco-desconto {
    color: var(--cor-secundaria);
    font-size: 20px;
}

.produto-detalhe h1 { font-size: 1em; font-weight: bold;}

/* Vitrines em grade */
.produto-grade-lista h3 {
    font-size: 12px;
    font-weight: 500;
    line-height: 1em;
}
.produto-grade-lista .desconto {
    color: var(--cor-secundaria);
    font-size: 1em;
}
.produto-grade-lista .parcelamento {
    font-size: 10px;
}
.produto-grade-lista .preco_de {
    color: #B7B4B4;
    font-size: 10px;
}
.produto-grade-lista .preco_por {
    font-size: 1em;
    font-weight: 500;
}
.produto-grade-lista .preco_por > .unidade { 
    color: rgba(13, 13, 13, 0.5); 
    font-weight: 300;
}
/* Vitrines em grade */

/* Vitrine grandes */
.produto-vitrine h3,
.produto-destaque h3 {
    font-size: 1em;
    font-weight: 500;
}
/* .produto-grade-lista .avaliacao, 
.produto-vitrine .avaliacao, 
.categoria,
.produto-destaque-categoria  {
    color: var(--cor-terciaria);
    font-size: 1em;
} */
.produto-detalhe .avaliacao, 
.produto-vitrine .avaliacao, 
.categoria,
.produto-destaque-categoria  {
    color: var(--cor-terciaria);
    /* font-size: 10px; */
    font-size: 1em;
}
.produto-detalhe .preco-desconto, 
.produto-vitrine .preco-desconto {
    color: var(--cor-secundaria);
    font-size: 16px;
}

.produto-vitrine .parcelamento,
.produto-destaque-preco-parcelamento {
    font-size: 10px;
}
.produto-detalhe .preco_de,
.produto-vitrine .preco_de,
.produto-destaque-preco-preco_de {
    color: #B7B4B4;
    font-size: 12px;
}
.produto-detalhe .preco_por,
.produto-vitrine .preco_por,
.produto-destaque-preco-preco_por {
    font-size: 18px;
    font-weight: 600;
}
.produto-vitrine .unidade,
.produto-destaque-preco-preco_por .unidade { 
    color: rgba(13, 13, 13, 0.5); 
    font-weight: 300;
}
.produto-vitrine .texto,
.produto-destaque-texto {
    font-size: 12px;
    font-weight: 300;
}

.produtos-mais-visitados h3 { font-size: 14px;}
/* Vitrine grandes */

.rodape-menu {
    background-color: var(--cor-principal);
    color: #FFFFFF;
}
.rodape-politicas { font-size: 0.75em;}
.rodape-slogan {
    background-color: #FFFFFF;
    border-bottom: 5px solid var(--cor-padrao-texto-secundario);
    color: var(--cor-principal);
}

#area-news { color:var(--cor-principal); }
#area-news h2 { font-size: 1.5em;}
#area-news p { font-size: 0.875em;}

#material_construcao {
    background-image: url("/imagens/categoria-material-construcao.png");
}
#pisos_revestimentos {
    background-image: url("/imagens/categoria-pisos-e-revestimentos.png");
}
#material_pintura {
    background-image: url("/imagens/categoria-pintura-acabamento.png");
}
#categoria_encanamento {
    background-image: url("/imagens/categoria-encanamento.png");;
}
#categoria_eletrica {
    background-image: url("/imagens/categoria-eletrica.png");
}
#categoria_ferramentas {
    background-image: url("/imagens/categoria-ferramentas.png");
}

@media (min-width: 768px) {
    body {
        background-color: #FFFFFF;
    }
    /* .h-400 {
        height: 400px;
        object-fit: cover;
    } */
    .box-categoria-imagem { height: 200px; }

    .box-categoria-imagem:hover > .box-categoria-titulo { background-color: rgb(4 119 191 / 55%);}

    .box-categoria-titulo { font-size: 1.125em; height: 60px; padding: 2% 4%; }
    
    .box-header { padding: 3% 0%; }
    .box-header h2 { font-size: 1.25em; }
    .box-footer { border:none; height: initial; padding: 1% 2%; }
    /* .cabecalho .btn-primary { 
        --bs-btn-bg: var(--cor-padrao-texto-secundario);
        --bs-btn-border-color: var(--cor-padrao-texto-secundario);
        --bs-btn-hover-bg: var(--cor-principal);
        --bs-btn-hover-border-color: var(--cor-principal);
    }
    .cabecalho .btn-outline-primary {
        --bs-btn-border-color: var(--cor-padrao-texto-secundario);
        --bs-btn-hover-bg: var(--cor-padrao-texto-secundario);
        --bs-btn-color: var(--cor-padrao-texto-secundario);
    } */

    .produto-grade-imagem {
        height: 200px;
        width: 250px;
    }
    .produto-grade-lista-footer {
        background-color: var(--cor-padrao-fundo);
    }

    .produto-grade-lista .avaliacao, 
    .produto-vitrine .avaliacao, 
    .categoria, 
    .produto-destaque-categoria {
        font-size: 1em;
    }
    .produto-grade-lista h3, 
    /* .produto-vitrine h3,  */
    .produto-destaque h3 
    { 
        font-size: 1.125em; 
        line-height: 1em;
    }
    .produto-vitrine .texto, .produto-destaque-texto { font-size: 0.875em; }

    .produto-vitrine .preco_de, .produto-destaque-preco-preco_de { font-size: 1em; }

    .produto-vitrine .preco_por, .produto-destaque-preco-preco_por { font-size: 1.5em; }

    .produto-vitrine .parcelamento, .produto-destaque-preco-parcelamento { font-size: 1em; }

    .produto-grade-lista { 
        border: 1px solid black;
        flex-direction: column;
        height: 470px;
        display: flex;
        min-width: 270px;
        width: 25%;
    }
    /* .produto-grade-lista h3 { font-size: 1em; } */

    .produto-destaque-imagem { border: 1px solid #d9d9d990; border-radius: 10px; }
    .produto-destaque-imagem img { height: 400px; width: 430px; max-width: none;}

    .produtos-mais-visitados h3,
    .produto-vitrine h3 { font-size: 14px;}

    .produtos-mais-visitados .categoria,
    .produto-vitrine .categoria,
     { font-size: 14px;}

    .rodape-slogan,
    .rodape-politicas
    .rodape-empresa { background-color:#F2F2F2;  }
}