/* ============================================
   OROTÊ - LOJA INTEGRADA
   Inspiração visual Magazine MGP
   ============================================ */

:root {
    --orote-dourado: #9A7443;
    --orote-dourado-hover: #7D5B32;
    --orote-marrom: #3B2417;
    --orote-bege: #F7F3ED;
    --orote-bege-2: #E6DDD2;
    --orote-branco: #FFFFFF;
    --orote-texto: #33261E;
    --orote-cinza: #77706A;
}

/* GERAL */

body {
    background: #fff !important;
    color: var(--orote-texto);
    font-family: "Montserrat", Arial, sans-serif;
}

.conteiner {
    max-width: 1180px;
}

a {
    transition: 0.2s ease;
}


/* ============================================
   CABEÇALHO
   ============================================ */

.cabecalho {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

.cabecalho .conteiner {
    padding-top: 14px;
    padding-bottom: 10px;
}


/* LOGO */

.logo {
    padding: 0;
}

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


/* ============================================
   BUSCA
   ============================================ */

.busca {
    margin-top: 5px;
}

.busca input {
    height: 42px !important;
    border: 1px solid #DDD4C9 !important;
    background: #F8F6F3 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    padding-left: 15px !important;
    color: var(--orote-texto);
}

.busca input:focus {
    background: #fff !important;
    border-color: var(--orote-dourado) !important;
    box-shadow: 0 0 0 2px rgba(154,116,67,.10) !important;
}

.busca .botao {
    height: 42px;
    border: 0 !important;
    background: transparent !important;
    color: var(--orote-dourado) !important;
}


/* ============================================
   ÁREA CLIENTE / CARRINHO
   ============================================ */

.acoes-conta li a,
.carrinho > a {
    color: var(--orote-marrom) !important;
}

.carrinho .qtd-carrinho {
    background: var(--orote-dourado) !important;
    color: #fff !important;
}

.carrinho > a:hover,
.acoes-conta li a:hover {
    color: var(--orote-dourado) !important;
}


/* ============================================
   MENU PRINCIPAL
   ============================================ */

.menu.superior {
    background: #fff !important;
    border: none !important;
    border-top: 1px solid #F0EBE5 !important;
    border-bottom: 1px solid #F0EBE5 !important;
}

.menu.superior .nivel-um {
    display: flex;
    justify-content: space-between;
}

.menu.superior .nivel-um > li {
    border: none !important;
}

.menu.superior .nivel-um > li > a {
    color: var(--orote-marrom) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding: 15px 14px !important;
}

.menu.superior .nivel-um > li:hover > a {
    color: var(--orote-dourado) !important;
    background: transparent !important;
}


/* SUBMENU */

.menu.superior .nivel-dois {
    background: #fff !important;
    border: 1px solid var(--orote-bege-2) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 25px rgba(59,36,23,.10) !important;
    padding: 8px 0;
}

.menu.superior .nivel-dois li a {
    color: var(--orote-texto) !important;
}

.menu.superior .nivel-dois li a:hover {
    color: var(--orote-dourado) !important;
    background: var(--orote-bege) !important;
}


/* ============================================
   BANNER PRINCIPAL
   ============================================ */

.secao-banners {
    margin-top: 18px !important;
}

.banner {
    overflow: hidden;
}

.banner img,
.flexslider {
    border-radius: 14px !important;
}

.flexslider {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* BOLINHAS SLIDER */

.flex-control-paging li a {
    background: #D5C7B5 !important;
}

.flex-control-paging li a.flex-active {
    background: var(--orote-dourado) !important;
}


/* ============================================
   TARJA DE BENEFÍCIOS
   ============================================ */

#barra-beneficios,
.barra-beneficios,
.beneficios {
    background: #fff;
    margin: 20px auto 25px;
    border-bottom: 1px solid #E7DED4;
    border-top: 1px solid #F2ECE6;
}

.barra-beneficios .item,
.beneficios .item {
    padding: 18px;
    text-align: center;
    border-right: 1px solid #E8E1D9;
}

.barra-beneficios i,
.beneficios i {
    color: var(--orote-dourado) !important;
    font-size: 25px;
}

.barra-beneficios strong,
.beneficios strong {
    color: var(--orote-marrom);
}


/* ============================================
   TÍTULOS
   ============================================ */

.titulo-categoria,
.listagem .titulo-categoria,
h1,
h2,
h3 {
    color: var(--orote-marrom);
}

.titulo-categoria {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px !important;
    font-weight: 600;
    margin: 25px 0 20px;
}


/* ============================================
   CATEGORIAS EM CARDS
   ============================================ */

.banner.tarja,
.banner.mini-banner {
    border-radius: 14px;
    overflow: hidden;
}

.banner.mini-banner img,
.mini-banner img {
    border-radius: 14px !important;
    transition: transform .3s ease;
}

.banner.mini-banner:hover img,
.mini-banner:hover img {
    transform: scale(1.025);
}


/* ============================================
   VITRINE PRODUTOS
   ============================================ */

.listagem {
    margin-top: 30px;
}

.listagem .listagem-item {
    background: #fff;
    border: 1px solid #EEE7DF;
    border-radius: 12px;
    padding: 14px;
    transition: all .25s ease;
    min-height: 100%;
}

.listagem .listagem-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(59,36,23,.10);
    border-color: #D9C6AE;
}

.listagem .imagem-produto {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}


/* NOME PRODUTO */

.listagem .info-produto .nome-produto {
    color: var(--orote-texto) !important;
    font-weight: 500 !important;
    line-height: 1.35;
}


/* PREÇO ANTIGO */

.preco-produto .preco-promocional {
    color: #8B8179 !important;
}


/* PREÇO PRINCIPAL */

.listagem .preco-produto strong,
.listagem .preco-produto .preco-venda {
    color: var(--orote-marrom) !important;
    font-weight: 700;
    font-size: 20px !important;
}


/* PARCELAMENTO */

.preco-produto .preco-parcela {
    color: var(--orote-cinza) !important;
}


/* ============================================
   BOTÕES
   ============================================ */

.botao.principal,
.botao.comprar,
.acoes-produto .comprar,
.botao.grande,
button[type="submit"] {
    background: var(--orote-dourado) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-weight: 600;
    box-shadow: none !important;
}

.botao.principal:hover,
.botao.comprar:hover,
.acoes-produto .comprar:hover,
.botao.grande:hover,
button[type="submit"]:hover {
    background: var(--orote-dourado-hover) !important;
}


/* ============================================
   PÁGINA DO PRODUTO
   ============================================ */

.pagina-produto .produto {
    margin-top: 25px;
}


/* GALERIA */

.produto .principal {
    background: #fff;
}

.produto .imagem-principal {
    background: #fff;
    border-radius: 10px;
}

.produto .miniaturas a {
    border: 1px solid #EAE2D9 !important;
    border-radius: 8px !important;
    margin-bottom: 8px;
}

.produto .miniaturas a:hover,
.produto .miniaturas a.active {
    border-color: var(--orote-dourado) !important;
}


/* TÍTULO PRODUTO */

.produto .nome-produto {
    color: #1F1915 !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 1.25;
}


/* CÓDIGO / MARCA */

.produto .codigo-produto,
.produto .marca {
    color: #7B726B;
    font-size: 12px;
}


/* PREÇO */

.produto .preco-produto .preco-venda {
    color: var(--orote-marrom) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
}

.produto .preco-produto .preco-promocional {
    color: #80766E !important;
}


/* PREÇO PIX */

.produto .preco-produto .desconto-a-vista,
.produto .desconto-a-vista {
    color: var(--orote-dourado-hover) !important;
    font-weight: 600;
}


/* BOTÃO COMPRAR */

.produto .acoes-produto .comprar {
    width: 100% !important;
    height: 45px;
    font-size: 16px !important;
    text-transform: none;
}


/* ============================================
   FRETE
   ============================================ */

.produto .cep {
    margin-top: 25px;
}

.produto .cep input {
    height: 38px;
    border: 1px solid #D9D1C8;
    border-radius: 3px;
}

.produto .cep .botao {
    background: var(--orote-marrom) !important;
    color: #fff !important;
}


/* ============================================
   NEWSLETTER
   ============================================ */

.newsletter {
    background: var(--orote-bege) !important;
    padding: 25px 0;
    border-top: 1px solid var(--orote-bege-2);
}

.newsletter .titulo {
    color: var(--orote-marrom) !important;
}

.newsletter input {
    height: 42px !important;
    border: 1px solid #DCCFC1 !important;
    border-radius: 4px !important;
}


/* ============================================
   RODAPÉ
   ============================================ */

.rodape {
    background: var(--orote-marrom) !important;
    color: #fff !important;
}

.rodape .titulo {
    color: #fff !important;
}

.rodape a {
    color: #EADCCB !important;
}

.rodape a:hover {
    color: #fff !important;
}


/* ============================================
   MOBILE
   ============================================ */

@media(max-width: 768px) {

    .conteiner {
        width: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .cabecalho .conteiner {
        padding-top: 10px;
    }

    .logo img {
        max-height: 50px;
    }

    .menu.superior .nivel-um {
        display: block;
    }

    .banner img,
    .flexslider {
        border-radius: 8px !important;
    }

    .titulo-categoria {
        font-size: 25px !important;
    }

    .listagem .listagem-item {
        padding: 10px;
        border-radius: 8px;
    }

    .produto .nome-produto {
        font-size: 20px !important;
    }

}