:root {

/* =========================
CORES DA MARCA
========================= */

--cor-principal: #dbac94;
--cor-secundaria: #5b5041;
--cor-terciaria: #5b5041;

--cor-botao: #25d366;

--cor-titulos:#5b5041;
--cor-preco: #dbac94;
--cor-icones: #dbac94;

/* =========================
TOPO DA LOJA
========================= */

--cor-background-topo: #ede8e6;

/* =========================
CORPO DA LOJA
========================= */

--cor-background-corpo: #ffffff;

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

--cor-menu-rodape: #5b5041;
--cor-background-menu-rodape: #ede8e6;
--cor-background-rodape: #ede8e6;

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

--cor-background-newsletter: #e8b49c;
--cor-texto-newsletter: #ffffff;

/* =========================
TEXTO BANNER
========================= */

--cor-texto-1: #000000;
--cor-texto-2: #ffffff;

/* =========================
COMPRE JUNTO
========================= */

--cor-background-compre-junto: #ffffff;

}

/* =========================
MENU CATEGORIAS
========================= */

#cabecalho .menu.superior {
background-color: #dbac94;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#cabecalho .menu.superior .nivel-um>li>a {
color: #5b5041;
font-weight: 600;
transition:0.2s;
}

#cabecalho .menu.superior .nivel-um>li>a:hover {
color: #ffffff;
}

/* =========================
LOGO
========================= */

.logo a img {
max-height: 150px;
}

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

.modal-modalNewsletter .fancybox-skin {
background: transparent url('https://cdn.awsli.com.br/2475/2475368/arquivos/banner%20newsletter.png') no-repeat center;
background-size: cover;
}

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

.botao,
.botao-comprar,
.carrinho-interno>div .botao,
#comprar-ajax-status .sucesso .buttons>* {

background-color: #25d366;
font-weight:700;
letter-spacing:0.5px;
border-radius:8px;
padding:12px 16px;
transition: all 0.2s ease;
}

/* HOVER BOTÕES */

.botao:hover,
.botao-comprar:hover {
transform:scale(1.05);
box-shadow:0 6px 16px rgba(0,0,0,0.15);
}

/* =========================
CARDS DE PRODUTOS
========================= */

.listagem .produto {
border-radius:12px;
overflow:hidden;
transition: all 0.25s ease;
background:#fff;
}

.listagem .produto:hover {

transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);

}

/* IMAGEM PRODUTO */

.listagem .produto .imagem-produto img {
transition:0.3s;
}

.listagem .produto:hover .imagem-produto img {
transform:scale(1.05);
}

/* =========================
PREÇO
========================= */

.preco-promocional,
.preco-a-vista {

font-weight:700;
font-size:20px;

}

/* =========================
BOTÃO VOLTAR AO TOPO
========================= */

.scrollToTop {

background-color: #e8b49c;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.15);

}

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

#rodape .institucional {
background-color: #ede8e6;
}

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

.carrinho.carrinho-manipula strong.qtd-carrinho {
color: white;
}

/* =========================
OCULTAR CAMPOS
========================= */

#modalContato > form > div > div > div:nth-child(2) > table > tbody > tr:nth-child(5) {
display: none;
}

.carrinho-checkout .atendimento li:nth-child(4) {
display: none;
}

#atedimento .titulo {
display: none;
}

#atedimento .contact-items {
display: none;
}

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

h2.titulo,
h2.titulo-categoria {
text-transform: capitalize !important;
font-weight:700;
}

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

@media only screen and (max-width: 767px){

/* atalhos */

.atalhos-mobile {
background: #ede8e6;
}

/* produtos */

.listagem .produto {

margin-bottom:14px;

}

/* botão comprar maior */

.botao-comprar{

font-size:16px;
padding:14px;

}

/* menu */

#cabecalho .menu.superior{

overflow-x:auto;

}

}

/* =========================
ANIMAÇÕES LEVES
========================= */

a,
button{
transition:0.2s;
}

/* =========================
SCROLL SUAVE
========================= */

html{
scroll-behavior:smooth;
}