html {
    scroll-behavior: smooth;
}

::selection {
    background-color: rgba(201, 164, 74, 0.2);
    color: #1a1a1a;
}

/* Título das categorias na vitrine */
.g_ .g_title, .g_ .listagem .titulo-categoria strong {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;    
}

/* Preço do produto na vitrine */
.g_ .listagem .preco-produto * {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

/* Ajuste menu mobile */
@media only screen and (max-width: 767px) {
    .menu.superior .titulo, .menu.lateral .titulo {
        margin: 10px 0;
    }
    
    .menu.superior .nivel-um .titulo, .menu.lateral .nivel-um .titulo {
        font-family: "Montserrat", sans-serif;
        font-weight: 600 !important;
    }
    
    .g_ .theme-functions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    
    /* Quebra o texto grande */
    .menu .nivel-um li a,
    .menu .nivel-dois li a {
        display: block;
        width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }
}

/* Outros elementos */
a, button, div, h1, h2, h3, h4, h5, h6, label, p, span {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Título do rodapé */
.g_ #rodape .institucional h5, .g_ #rodape .titulo {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: #ffffff;
}

/* Elementos do rodapé */
.g_ #rodape .institucional p, .g_ #rodape .institucional ul li a {
    color: #D8D0C4 !important;
}

/* Ícones do rodapé */
.g_ #rodape .institucional ul li a i {
    color: #c9a24b !important;
}

/* Cor de fundo da página */
.g_ body {
    background: #F7F3EC !important;
}

/* Espaçamento do rodapé */
.g_ #rodape .pagamento-selos,
.g_ #rodape>div:last-child,
.g_ #rodape .institucional {
    padding: 1rem 0 !important;
}

/* Títulos da seção de pagamentos no rodapé */
.pagamento-selos .titulo {
    color: #ffffff !important;
}

/* Imagens da seção de pagamentos no rodapé */
.gateways-rodape li img,
.selos img {
    filter: brightness(10);
}

/* Produtos vitrine */
.g_ .listagem .preco-produto .cor-principal,
.g_ .listagem .preco-produto .cor-secundaria {
    color: rgb(160, 126, 46) !important;
}

.listagem .produtos-carrossel .listagem-linha li .listagem-item {
    margin: 5px 10px;
    background: #ffffff;
    border: 1px solid #c1c1c1;
    border-radius: 5px;
    box-shadow: 0 8px 16px -2px #1e1e1c24;
}


/* Define a cor de fundo do cabeçalho */
header .align-items-center {
    background-color: #fdf8f2; /* #333F37 */
}

/* Espaçamento do corpo  */
.g_ body:not(.pagina-inicial) header {
    margin-bottom: 10px !important;
}

@media (max-width: 767px) {
    .g_ body:not(.pagina-inicial) header {
        margin-bottom: 15px !important;
    }
}

/* Ajusta o tamanho do logotipo no desktop */
@media(min-width: 1024px) {
    .g_ .logo a>img, .g_ .logo img, .g_ .logo svg {
        max-width: 216px !important; /* 398 */
        max-height: 80px !important; /* 140 */
    }
}

/* Ajusta o tamanho do logotipo no mobile */
@media (max-width: 767px) {
    .g_ .logo a>img, .g_ .logo img, .g_ .logo svg {
        max-width: 569px !important;
        max-height: 60px !important; /* 20 */
    }
}

/* Define a cor do menu no desktop */
/*.g_ .menu.superior>.nivel-um>li>a>strong {
    color: #ffffff !important;
}*/

/* Define a cor do menu no mobile */
/*@media (max-width: 768px) {
    .g_ .menu.superior>.nivel-um>li>a>strong {
        color: #000000 !important;
    }
}*/

/* Define a cor do fundo do indicador antes dos itens do menu */
.g_ .menu.superior>.nivel-um>li:before {
    background-color: #c9a24b !important;
}

/* Define a cor do ícone de seta para baixo no cabeçalho */
header .icon-chevron-down:before {
    color: #ffffff !important;
}

/* Altera a cor dos ícones no menu quando ele estiver visível */
.menu-visible .g_ .menu.superior ul>li>a>i {
    color: var(--tc1) !important;
}

/* Estiliza o botão de acionamento do menu (hambúrguer) */
.g_ .menu-trigger:before,
.g_ .menu-trigger:after {
    background: #000 !important;
}

/* Adiciona uma borda ao botão do menu */
.g_ .menu-trigger {
    border-top: 3px solid #000 !important;
}

/* Define estilos para a seção institucional do rodapé */
.g_ #rodape .institucional {
    background-color: #1A1A18 !important;
    border-bottom: 1px solid #121212 !important;
}

/* Define o fundo da seção de pagamentos e selos no rodapé */
.g_ #rodape .pagamento-selos {
    background-color: #121212 !important;
}

/* Define a cor de fundo do último bloco do rodapé */
.g_ #rodape>div:last-child {
    background-color: #1A1A18 !important;
}

/* Define a cor do texto no último bloco do rodapé */
.g_ #rodape>div:last-child p {
    color: #e6e6e6 !important;
}

/* Altera a aparência das imagens da classe logo-lista-mais */
.logo-lista-mais {
    filter: brightness(0) invert(1);
}

/* Define a cor do botão de fechar o menu no mobile */
@media (max-width: 767px) {
    .g_ .menu.superior .menu-close-mobile {
        background: #c9a24b !important;
    }
}

/* Mantém os submenus visíveis no mobile */
@media (max-width: 767px) {
    .g_ .menu.superior>.nivel-um>li.com-filho>ul {
        display: initial !important;
    }
}

/* Ajustes de responsividade para full banners no tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .g_ .secao-banners .banner.cheio .flexslider {
        width: 100% !important;
        left: 0 !important;
    }
    
    /* Ajusta o tamanho e comportamento das imagens no banner */
    .g_ .banner.cheio .flexslider .slides img {
        max-height: 40vh;
        max-width: 100vw;
        object-fit: contain !important;
    }
}

/* Sobreposição da barra de pesquisa */
.g_ #search-form {
    background: rgb(0 0 0 / 64%) !important;
}

/* Ícone de X da barra de pesquisa */
#search-form svg {
    fill: #ffffff !important;
}

/* Listagem - botões nã oficarem encima do link  */
.listagem.com-caixa .listagem-item .acoes-produto {
    top: 150px;
    bottom: 180px;
}
.listagem .info-produto .nome-produto {
    padding-top: 20px !important;
    z-index: 1000 !important;
}

/* Listagem - Preço e parcela */
.preco-produto.destaque-parcela {
    text-align: center;
}

/* Listagem - Parcela */
.g_ .listagem .preco-produto .preco-parcela {
    opacity: 1 !important;    
}

@keyframes li-whatsapp-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Botão flutuanbte do WhatsApp */
.li-whatsapp i {
    font-size: 32px !important;
}

.li-whatsapp a {
  background: rgb(37, 211, 102) !important;
  background-image: none !important;
  right: 20px !important;
  bottom: 40px !important;
  width: 56px !important;
  height: 56px !important;
  animation: li-whatsapp-pulse 2s infinite;
}

header {
    border-bottom: 1px solid rgb(200, 190, 168);
}

/* Reordena o cabeçalho: logo à esquerda, menu ao centro, ícones à direita (desktop) */
@media (min-width: 1024px) {
    header .row-flex.align-items-center {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Logo primeiro */
    header .row-flex.align-items-center > .col-auto {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    /* Menu ao centro */
    header .row-flex.align-items-center > .col.g_menu {
        order: 2 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Ícones à direita */
    header .row-flex.align-items-center > .col:not(.g_menu) {
        order: 3 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Garante que o menu não estique e fique de fato centralizado, sem quebrar linha */
    header .g_menu .menu.superior {
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    header .g_menu .menu.superior > .nivel-um {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        width: auto !important;
    }
}

/* Seta do menu herda a cor do texto do cabeçalho — só no desktop */
@media (min-width: 1024px) {
    header .icon-chevron-down:before {
        color: var(--tc1) !important;
    }
}

/* Fundo do cabeçalho ocupando toda a largura da tela */
header {
    background-color: #fdf8f2 !important;
}

/* Limita o conteúdo do cabeçalho a 1180px, centralizado */
header .container {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

header .menu.superior > .nivel-um > li.categoria-id-23396277 {
    display: list-item !important;
}

/* Ajuste nas seções inseridas via JS - Não mexer */
.hero-custom, .hero-custom *,
.manchete-ticker, .manchete-ticker *,
.feature-verao, .feature-verao *,
.minibanners, .minibanners *,
.hero-inferior, .hero-inferior *,
.feature-projetado, .feature-projetado *,
.depoimentos, .depoimentos *,
.promo-bar, .promo-bar * {
    box-sizing: border-box;
}