@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
/* Kam Bess - CSS customizado (Recursos do Site)
   Revisao 11/09/2026: todas as cores usam as variaveis do tema definidas no Site Builder
   (--cor-primaria, --cor-secundaria, --cor-base, --cor-background).
   NAO hardcodar hex aqui. Para trocar cores, alterar no Site Builder > Cores.

   Bloco A: elementos de compra (ja existia, migrado para variaveis).
   Bloco B: padronizacao das paginas internas com a home (produto, categoria, institucionais),
   necessaria porque o tema nao aplica as variaveis de forma consistente fora da home. */

/* ---------- Bloco A: elementos de compra ---------- */

div#main-area div.produto div.main-produto .area-buy-product button.button {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

div#main-area div.produto div.main-produto .area-buy-product button.button:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    filter: brightness(0.85);
}

[class*="icon-whats"] {
  background-color: var(--cor-primaria) !important;
}

.area-comprar .button-buy {
  background: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
}

.area-comprar .button-buy:hover {
  background: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
  filter: brightness(0.85);
}

.variacao-tipo-box .variacao-lista li.selected {
  background: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
}

.variacao-tipo-box .variacao-lista li.selected .variacao-label {
  color: #ffffff !important;
}

/* ---------- Bloco B: paginas internas iguais a home ---------- */

/* Fundo: na home o body usa --cor-background; nas internas fica transparente */
body {
  background-color: var(--cor-background) !important;
}

/* Barra superior do header: na home resolve --cor-base, nas internas caia em cinza do tema */
.header-top {
  background-color: var(--cor-base) !important;
}

/* Preco: na home usa --cor-secundaria; na pagina de produto o seletor e .price-big */
.price-big,
.price-product,
.price-product .valor-big,
.valor-big,
.detalhes-valor-produto {
  color: var(--cor-secundaria) !important;
}

/* ---------- Bloco C: eliminar fundos brancos estruturais nas paginas internas ----------
   Na home estes contentores sao transparentes e deixam --cor-background aparecer.
   Nas paginas internas o tema pinta de branco, quebrando a continuidade visual.
   Mantidos brancos de proposito (iguais a home): drawer do carrinho, dropdown do menu,
   widget de newsletter, widget de avaliacao e o bloco interno do rodape. */

.header-bottom,
.area-breadcrumb,
.descricao-produto,
.produto-caracteristicas,
.produtos-relacionados,
.container.clearfix,
.container.conteudo-adicional,
.container.box-pesquisa,
.bg-title {
  background-color: transparent !important;
}

/* ---------- Bloco D: substituir cinzas frios do tema por tons quentes da marca ----------
   O tema traz a escala "secondary" do Tailwind, que e cinza AZULADO (#F6F7F8, #E8EAED,
   #CCD1D7) e briga com a paleta quente da Kam Bess (ecru / camel / bordo). Branco puro
   tem o mesmo problema: e frio e corta o fundo ecru em faixas.
   Escada quente equivalente, do mais claro ao mais escuro:
     --kb-elev  #FAF7F1  off-white quente, para cards e campos que precisam "subir" do fundo
     --cor-background #F4F1EA  fundo padrao da loja
     --kb-sutil #EDE7DC  separacao suave entre secoes
     --cor-bordas #DFD9CE  bordas e placeholders */

:root {
  --kb-elev: #FAF7F1;
  --kb-sutil: #EDE7DC;
}

.ra-footer,
footer.ra-footer,
.widget-cadastro-news,
.widget-avaliacao,
.bg-white,
[class*="bg-white"] {
  background-color: var(--cor-background) !important;
}

.footer-middle,
[class*="bg-secondary-100"] {
  background-color: var(--kb-sutil) !important;
}

[class*="bg-secondary-50"] {
  background-color: var(--kb-elev) !important;
}

[class*="bg-secondary-200"],
[class*="bg-secondary-300"] {
  background-color: var(--cor-bordas) !important;
}

/* placeholder das imagens em lazyload: cinza neutro -> bege de borda */
.lazyload,
img.img-principal {
  background-color: var(--cor-bordas) !important;
}

/* campos de formulario: off-white quente em vez de branco puro */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
  background-color: var(--kb-elev) !important;
}
/* blocos internos da pagina de produto que ainda vinham em cinza/branco frio */
.content.accompaniments {
  background-color: var(--kb-elev) !important;
}

.produto-caracteristicas dd.even,
.produto-caracteristicas dt.even,
dd.even,
dt.even {
  background-color: var(--kb-elev) !important;
}

dd.odd,
dt.odd {
  background-color: transparent !important;
}

/* ---------- Bloco E: vitrine, faixa de tamanhos sobre a foto ----------
   O tema usa .!bg-white (Tailwind com !important e especificidade 0-2-0), que vence
   seletores simples. Por isso as regras abaixo usam .ra-vitrine como prefixo.
   A faixa branca 70% sobre a foto virava um retangulo frio cortando a imagem;
   passa a ser o ecru da marca com leve transparencia e um fio de borda. */

.ra-vitrine .derivacoes-hover.derivacoes-hover {
  background-color: rgba(244, 241, 234, 0.94) !important;
  border-top: 1px solid var(--cor-bordas) !important;
}

.ra-vitrine [class*="bg-white"] {
  background-color: var(--cor-background) !important;
}

.ra-vitrine .deriva.tamanho,
.ra-vitrine .deriva-react.tamanho {
  background-color: var(--cor-background) !important;
  border-color: var(--cor-bordas) !important;
}

/* tamanho esgotado: cinza azulado do tema -> texto secundario da marca */
.deriva.tamanho.esgotado,
.deriva-react.tamanho.esgotado,
.icon-out-stock {
  color: var(--cor-texto-secundario) !important;
}

/* ---------- Bloco F: imagens da descricao do produto ----------
   As fotos usadas na descricao editorial sao PNGs com a imagem ja recortada em circulo
   sobre fundo BRANCO dentro do proprio arquivo. Nenhum elemento da pagina pinta esse
   branco, entao nao ha como resolver por cor de fundo: o quadrado branco esta na imagem.
   Solucao: recortar em circulo por CSS, o que remove os quatro cantos brancos e deixa a
   foto flutuando sobre o ecru. Restrito a imagens quadradas (aspect-ratio 1/1) para nao
   deformar eventuais banners retangulares na descricao. */

.imagem-description img,
.descricao-produto figure img {
  border-radius: 50%;
}

.descricao-produto img:not([width="252"]):not([height="252"]) {
  border-radius: 50%;
}

/* seguranca: imagem claramente retangular volta a ser quadrada */
.descricao-produto img[style*="width: 100%"],
.descricao-produto img.banner,
.descricao-produto img.tabela-medidas {
  border-radius: 0 !important;
}

/* ---------- Bloco G: tres ajustes pedidos pelo Founder ---------- */

/* G1. Botao "Faca uma avaliacao" no bloco sem avaliacoes.
   O tema aplicava texto branco sobre fundo claro (ilegivel) e borda azul #0071DB.
   Passa a CTA solido na cor primaria da marca, igual ao botao Comprar. */
.sem-avaliacoes a,
.sem-avaliacoes button {
  background-color: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
  color: #ffffff !important;
}

/* G2. Rodape: remover o selo da BrandUp e centralizar o selo da Magazord. */
.magazord-logo-container a[href*="brandup"] {
  display: none !important;
}

.magazord-logo-container {
  justify-content: center !important;
  gap: 0 !important;
}

/* G3. Miniaturas da galeria: o CDN entrega a imagem com filters:fill(white),
   entao as faixas laterais brancas estao dentro do proprio arquivo e nenhuma cor de
   fundo as remove. O blend multiply faz o branco assumir o ecru do fundo, mantendo a
   foto legivel. Alternativa futura, se o template permitir: trocar fill(white) por
   fill(f4f1ea) na URL, ja testado e aceito pelo CDN. */
/* G3 RESOLVIDO NA ORIGEM em 11/09/2026: um script no Conteudo Adicional ID 6 reescreve
   a URL das imagens trocando filters:fill(white) por fill(f4f1ea), entao o blend paliativo
   foi removido (ele escurecia levemente as fotos claras). Se o script for removido ou a
   Magazord corrigir o template, reavaliar este bloco. */

/* ============================================================
   BLOCO H (v4) - harmonizacao das cores do tema com a paleta Kam Bess.
   Revisado em 12/09/2026.

   POR QUE ~= E NAO *= :
   [class*="text-secondary-400"] tambem casava com "dark:text-secondary-400"
   e "max-md:bg-secondary-200", ou seja, aplicava em modo claro uma cor de
   modo escuro e no desktop um fundo que o tema so queria no mobile. Era isso
   que criava os quadros de fundo diferente nas colunas do rodape.
   [class~="..."] casa apenas com o token exato e respeita as variantes.

   POR QUE OS SELETORES SAO TRIPLICADOS:
   o tema aplica .ra-produto .!text-secondary-400 com !important num <style>
   inline carregado DEPOIS deste arquivo. Especificidade 0-2-0 empata e perde
   por ordem. Triplicado vira 0-3-0 e vence.

   Nunca usar hex fixo aqui: sempre var(--cor-*) ou var(--kb-*).
   ============================================================ */

/* H1a. Texto escuro do tema -> texto da marca */
[class~="text-secondary-800"][class~="text-secondary-800"][class~="text-secondary-800"],
[class~="text-secondary-900"][class~="text-secondary-900"][class~="text-secondary-900"],
[class~="text-secondary-1000"][class~="text-secondary-1000"][class~="text-secondary-1000"],
[class~="!text-secondary-800"][class~="!text-secondary-800"][class~="!text-secondary-800"],
[class~="!text-secondary-900"][class~="!text-secondary-900"][class~="!text-secondary-900"],
[class~="!text-secondary-1000"][class~="!text-secondary-1000"][class~="!text-secondary-1000"],
.conteudo-adicional, .conteudo-adicional-topo,
.description, .description p, .description span, .description strong, .description li { color: var(--cor-texto) !important; }

/* H1b. Texto secundario do tema -> texto secundario da marca */
[class~="text-secondary-300"][class~="text-secondary-300"][class~="text-secondary-300"],
[class~="text-secondary-400"][class~="text-secondary-400"][class~="text-secondary-400"],
[class~="text-secondary-500"][class~="text-secondary-500"][class~="text-secondary-500"],
[class~="text-secondary-600"][class~="text-secondary-600"][class~="text-secondary-600"],
[class~="text-secondary-700"][class~="text-secondary-700"][class~="text-secondary-700"],
[class~="!text-secondary-300"][class~="!text-secondary-300"][class~="!text-secondary-300"],
[class~="!text-secondary-400"][class~="!text-secondary-400"][class~="!text-secondary-400"],
[class~="!text-secondary-500"][class~="!text-secondary-500"][class~="!text-secondary-500"],
[class~="!text-secondary-600"][class~="!text-secondary-600"][class~="!text-secondary-600"],
[class~="!text-secondary-700"][class~="!text-secondary-700"][class~="!text-secondary-700"],
.old-price, .value-prefix, .filtro-pretty-check { color: var(--cor-texto-secundario) !important; }

.arrow-user { color: var(--kb-elev) !important; }

/* H2. Escala "primary" do tema (vermelho ED230D / azul 008AE0) -> bordo da marca */
[class~="text-primary-300"][class~="text-primary-300"][class~="text-primary-300"],
[class~="text-primary-400"][class~="text-primary-400"][class~="text-primary-400"],
[class~="text-primary-500"][class~="text-primary-500"][class~="text-primary-500"],
[class~="text-primary-600"][class~="text-primary-600"][class~="text-primary-600"],
[class~="text-primary-700"][class~="text-primary-700"][class~="text-primary-700"],
[class~="text-text-primary-color"][class~="text-text-primary-color"][class~="text-text-primary-color"],
[class~="!text-primary-300"][class~="!text-primary-300"][class~="!text-primary-300"],
[class~="!text-primary-400"][class~="!text-primary-400"][class~="!text-primary-400"],
[class~="!text-primary-500"][class~="!text-primary-500"][class~="!text-primary-500"],
[class~="!text-primary-600"][class~="!text-primary-600"][class~="!text-primary-600"],
[class~="!text-primary-700"][class~="!text-primary-700"][class~="!text-primary-700"] { color: var(--cor-primaria) !important; }
.menu-link-129 { color: var(--cor-primaria) !important; }
.menu-link-367, .menu-link-368, .menu-link-369, .menu-link-370, .menu-link-371,
.menu-link-367 .menu-text, .menu-link-368 .menu-text, .menu-link-369 .menu-text,
.menu-link-370 .menu-text, .menu-link-371 .menu-text { color: var(--cor-texto) !important; }

/* H3. Botoes de fechar (escala "error", vermelho BA1812) */
.header-close-menu, .header-close-menu *,
[class*="close-menu"], [class*="close-menu"] svg,
[class~="text-error-500"][class~="text-error-500"][class~="text-error-500"],
[class~="text-error-600"][class~="text-error-600"][class~="text-error-600"],
[class~="text-error-700"][class~="text-error-700"][class~="text-error-700"],
[class~="text-error-800"][class~="text-error-800"][class~="text-error-800"],
[class~="!text-error-500"][class~="!text-error-500"][class~="!text-error-500"],
[class~="!text-error-600"][class~="!text-error-600"][class~="!text-error-600"],
[class~="!text-error-700"][class~="!text-error-700"][class~="!text-error-700"],
[class~="!text-error-800"][class~="!text-error-800"][class~="!text-error-800"] { color: var(--cor-texto) !important; stroke: var(--cor-texto) !important; }

/* H4. Bordas frias -> borda da marca */
[class~="border-secondary-50"], [class~="border-secondary-100"],
[class~="border-secondary-200"], [class~="border-secondary-300"],
[class~="border-secondary-400"], [class~="border-secondary-500"],
[class~="max-md:border-secondary-200"], [class~="hover:border-secondary-200"],
[class~="border-error-600"], [class~="border-error-700"],
[class*="border-color-gray"], .box-social, .footer-bottom, .footer-middle-top,
.swiper-slide[class*="border"], .action.border,
.value-prefix, .filtro-pretty-check,
.ordenacao, .ordenacao.clearfix, .conteudo-adicional, .conteudo-adicional-topo { border-color: var(--cor-bordas) !important; }
.button-prev span, .button-next span, [class*="border-[#99A3AD]"],
[class*="size-space-10"][class*="rounded"] { border-color: var(--cor-texto-secundario) !important; }

/* H5. Filtro de preco (noUiSlider) */
.noUi-target.noUi-target, .noUi-origin.noUi-origin, .noUi-background { background: var(--cor-bordas) !important; }
.noUi-handle, .noUi-connect { background: var(--cor-secundaria) !important; border-color: var(--cor-secundaria) !important; }

/* H6. Barra de ordenacao da categoria */
.ordenacao, .ordenacao.clearfix { background-color: var(--kb-sutil) !important; }

/* H7. Botoes e contadores */
a.back-to-top.back-to-top, .back-to-top.back-to-top,
.button.button-primary, .button-primary.filtro-avancado { background: var(--cor-primaria) !important; color: #FFFFFF !important; }
.button-primary { border-color: var(--cor-primaria) !important; }
.item-ctn, [class*="size-space-16"][class*="rounded-full"] { background-color: var(--cor-primaria) !important; color: #FFFFFF !important; }

/* H8. Carrossel */
.swiper-button-next, .swiper-button-prev { background-color: var(--kb-elev) !important; color: var(--cor-primaria) !important; }

/* H9. Mobile: faixa "Baixe o App" e barra inferior fixa */
#baixe-app { background-color: var(--kb-sutil) !important; color: var(--cor-texto) !important; }
#baixe-app .ver-no-app, .ver-no-app { background-color: var(--cor-primaria) !important; color: #FFFFFF !important; }
.fixed.bottom-0 a[class*="border-t"] { border-top-color: var(--cor-primaria) !important; }

/* H10. Paineis off-canvas (menu mobile, submenus, drawers).
   bg-primary-color do tema e branco puro: o menu lateral abria branco sobre
   uma loja inteira bege. No desktop essa classe so aparece no .header-bottom,
   que ja era bege, entao nao ha efeito colateral. */
[class~="bg-primary-color"][class~="bg-primary-color"] { background-color: var(--cor-background) !important; }

/* H11. Superficies estruturais usam o fundo do site, nao um tom proprio.
   Inclui as colunas do rodape (Institucional, Contato, Selos de seguranca,
   Formas de pagamento), que recebiam um quadro de fundo diferente. */
[class~="bg-white"], [class~="!bg-white"],
[class~="bg-secondary-100"], [class~="bg-secondary-200"], [class~="bg-secondary-300"],
[class~="max-md:bg-secondary-200"], [class~="max-md:bg-secondary-300"],
.footer-middle, .footer-bottom, .ra-footer, footer.ra-footer,
.widget-cadastro-news, .widget-avaliacao { background-color: var(--cor-background) !important; }

/* H12. Campos e superficies que precisam subir levemente do fundo */
[class~="bg-secondary-50"], input, textarea, select { background-color: var(--kb-elev) !important; }

/* H13. Tamanho esgotado na vitrine: risco sobre o tamanho, sem o quadrado.
   Pedido do Founder em 12/09/2026. Escopo restrito a .ra-vitrine: na pagina
   de produto o tamanho e clicavel e a caixa faz sentido. */
.ra-vitrine .deriva.tamanho.out-of-stock {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--cor-texto-secundario) !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: var(--cor-texto-secundario) !important;
}
.ra-vitrine .deriva.tamanho.out-of-stock .icon-out-stock { display: none !important; }

/* H14. Pagina de produto: seletor de quantidade removido da interface.
   Pedido do Founder em 12/09/2026: deixar apenas a selecao de tamanho,
   com a quantidade sempre 1. O campo #prod-qtde NAO e removido do DOM,
   apenas escondido visualmente (tecnica visually-hidden), para que o
   formulario continue enviando quantidade 1 e o JS do tema que le esse
   campo continue funcionando. O botao Comprar passa a ocupar a largura toda. */
.area-buy-product .quantidade-comprar .quantidade {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.area-buy-product .quantidade-comprar { gap: 0 !important; }
.area-buy-product .quantidade-comprar > button { width: 100% !important; flex: 1 1 100% !important; }

/* ============================================================
   BLOCO I - cabecalho desktop unificado (16/09/2026)
   Pedido do Founder: altura do menu em 40% da original, logomarca
   destacada, "Garimpe seu tamanho" na cor dos demais, campo de busca
   igual ao da home, e o mesmo cabecalho em TODAS as paginas.
   Escopo: somente desktop (min-width:901px). O mobile nao e tocado.
   ATENCAO ao medir: os itens do menu tem transition-all; em aba sem
   composicao o computed style devolve o valor ANTIGO e parece que a
   regra nao pegou. Desativar transicoes antes de medir.
   ============================================================ */
@media (min-width:901px){

 /* I1. Altura do menu: 166,5px -> 66,5px (40%). A altura vinha de
    padding duplo: 36px no <a> E 36px no .menu-text. */
 #nav-root > li > a{ padding-top:11px !important; padding-bottom:11px !important; }
 #nav-root > li > a > .menu-text,
 #nav-root > li > a > .menu-icon{ padding-top:11px !important; padding-bottom:11px !important; }

 /* I2. Logomarca com a mesma presenca em toda pagina. A home usa <img>
    dentro de <h1>; as paginas adicionais usam <svg> inline dentro de
    <div>. Sem cobrir os dois, a logo fica 130x18,9 na Sovrana contra
    220x32 na home. O max-width de 190px estava no <a class="logo-preview">. */
 .header-bottom .logo{ max-width:230px !important; margin-right:28px !important; }
 .header-bottom .logo h1,
 .header-bottom .logo > div,
 .header-bottom .logo a{ max-width:230px !important; width:auto !important; }
 .header-bottom .logo img,
 .header-bottom .logo svg{ height:32px !important; width:auto !important; max-height:32px !important; max-width:230px !important; }

 /* I3. "Garimpe seu tamanho" na mesma cor dos demais itens. O vermelho
    vem de regra inline gerada pela configuracao do menu no painel. O
    prefixo #nav-root (ID) vence sem depender de ordem de carregamento. */
 #nav-root a.menu-link-129,
 #nav-root a.menu-link-129 .menu-text{ color: var(--cor-texto) !important; }

 /* I4. Campo de busca identico ao da home em todas as paginas. O fundo
    #FAF7F1 vinha da regra generica de input do Bloco H. */
 .ra-header input, .header-bottom input{ background-color: transparent !important; }
}

/* ============================================================
   BLOCO J - migracao do design system da Kam Bess para a loja inteira
   16/09/2026. Aprovado pelo Founder ("opcao A"), com a condicao de
   testar tudo antes de implantar.

   O QUE ERA O PROBLEMA
   O design system (tokens --kb-*, tipografia, vitrine, rodape, menu)
   existia dentro do Conteudo Adicional ID 6, que injeta cinco blocos
   de <style> na HOME e apenas dois nas demais paginas. Resultado: a
   home renderizava em Source Sans 3 / Archivo, a Sovrana em Montserrat
   e a Quem Somos em Inter. Era essa a origem da divergencia de menu
   que o Founder apontava, e nao o cabecalho.

   POR QUE PRECISA DE !important NA TIPOGRAFIA
   Na home essas regras vencem por estarem inline no <body>, depois do
   tema. Daqui, de um <link>, a regra sem qualificacao perde para o
   tema. As duas regras de font-family levam !important; as demais nao.

   POR QUE O @import NA PRIMEIRA LINHA DO ARQUIVO
   Prova medida: com a font-family correta aplicada, a Sovrana ainda
   ficava 18px mais larga que a home no mesmo texto. Motivo: o <link>
   do Google Fonts com Archivo + Source Sans 3 so existe na HOME. Nas
   demais paginas a familia era declarada mas nao carregada, e o
   navegador caia numa fonte de sistema mais larga. Atencao:
   document.fonts.check retorna true nos dois casos e NAO serve de
   teste; o teste confiavel e medir o mesmo texto num canvas contra uma
   familia inexistente. Depois do @import: 142,5px na home, 142,5px na
   Sovrana, 142,5px na Quem Somos. Os pesos sao exatamente os da home
   (400;600) - pedir 700 faz o navegador usar a face real em vez da
   negrito sintetica e o texto sai 2,2px mais largo que na home.

   CORES: os tokens --kb-* apontam para as variaveis do Site Builder, e
   nao para hex fixo, para manter a regra do topo deste arquivo. Os
   valores conferidos batem com os hex originais do design system.
   ============================================================ */

:root{
  --kb-ecru:    var(--cor-background);        /* #F4F1EA */
  --kb-noir:    var(--cor-base);              /* #1A1917 */
  --kb-stone:   var(--cor-texto-secundario);  /* #8C877D */
  --kb-camel:   var(--cor-secundaria);        /* #A9784C */
  --kb-bordo:   var(--cor-primaria);          /* #5E1F2B */
  --kb-line:    var(--cor-bordas);            /* #DFD9CE */
  --kb-display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --kb-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* J1. Tipografia */
html, body { background: var(--kb-ecru); color: var(--kb-noir); font-family: var(--kb-body) !important; }
h1, h2, h3, h4, h5, h6, .titulo, .title { font-family: var(--kb-display) !important; font-weight: 500; letter-spacing: -0.015em; }

/* J2. Cantos retos */
input, select, textarea, .card, .produto, .produto img, .vitrine .item, .banner img, .tag, .badge { border-radius: 0 !important; }
#main-area { margin-top: 0; margin-bottom: 20px; }

/* J3. Cabecalho */
header { background: transparent !important; }
.header-builder { background: transparent !important; box-shadow: none !important; }
.header-bottom { background: transparent !important; border: 0 !important; }
.header-top { background: var(--kb-noir) !important; }
.header-top > div, .header-top > div > div { background-color: transparent !important; }
.scrolled header { border-bottom: 1px solid var(--kb-line); background: var(--kb-ecru) !important; }

/* J4. Campo de busca */
header .search-area, header .search-area form, header .header-search-full { background: transparent !important; box-shadow: none !important; }
header .search-area input, header .search-area input[type="search"], header .search-area input[type="text"], header .header-search-full input { background: transparent !important; color: var(--kb-noir) !important; border-radius: 0 !important; box-shadow: none !important; }
header .search-area button, header .search-area button[type="submit"], header .header-search-full button, header button[class*="search"], header .search-area .btn, header .search-area .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 10px !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--kb-noir) !important; }
header .search-area button i, header .search-area button svg, header .header-search-full button i, header .header-search-full button svg, header button[class*="search"] i, header button[class*="search"] svg { color: var(--kb-noir) !important; fill: var(--kb-noir) !important; background: transparent !important; filter: none !important; }

/* J5. Cabecalho em tablet/mobile */
header.is-tablet-mobile .search-area { width: 100%; background: rgba(244,241,234,0.5) !important; }
header.is-tablet-mobile .header-search-full { background: transparent !important; }
header.is-tablet-mobile .header-menu-button-ctn > a { background: transparent !important; }
header.is-tablet-mobile .logo, header.is-tablet-mobile .logo img { letter-spacing: 0.22em; }
header.is-tablet-mobile .header-menu-button-ctn > a, header.is-tablet-mobile .header-search-full span { font-family: var(--kb-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kb-noir) !important; }
.scrolled header.is-tablet-mobile .header-menu-button-ctn > a { color: var(--kb-noir) !important; }
#nav-root a, #nav-root a *, .header-bottom a[style*="color"], .header-bottom a[style*="rgb(2"] { color: var(--kb-noir) !important; }

/* J6. Menu lateral mobile */
.menu-mobile, .mobile-menu, .menu-lateral, .nav-mobile { background: var(--kb-ecru) !important; }
.menu-mobile a, .mobile-menu a, .menu-lateral a, .nav-mobile a { padding: 16px 20px; border-bottom: 1px solid var(--kb-line); font-family: var(--kb-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kb-noir) !important; }

/* J7. Vitrine */
header ~ * .vitrine .item, .produto { background: transparent; border: 0; text-align: left; }
.produto .nome, .vitrine .nome-produto { color: var(--kb-noir); font-family: var(--kb-body); font-size: 14px; line-height: 1.35; text-transform: none; }
.produto .preco, .vitrine .preco { font-family: var(--kb-body); font-size: 15px; font-weight: 600; }
.produto .preco-antigo { color: var(--kb-stone); }
.vitrine .titulo-vitrine { padding-bottom: 12px; border-bottom: 1px solid var(--kb-line); font-family: var(--kb-display); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

/* J8. Botoes */
main .btn, main .button, main .btn-primary, main .btn-comprar, #main-area .btn, #main-area .button, #main-area .btn-primary, #main-area .btn-comprar, main button[type="submit"], #main-area button[type="submit"] { padding: 15px 24px; font-family: var(--kb-display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; background: var(--kb-noir) !important; color: var(--kb-ecru) !important; border: 1px solid var(--kb-noir) !important; border-radius: 0 !important; }
header .search-area .btn, header .search-area .button, header .search-area button[type="submit"] { padding: 0 10px !important; background: transparent !important; color: var(--kb-noir) !important; border: 0 !important; }

/* J9. Selos */
.selo-desconto, .flag, .badge-promo { padding: 3px 7px; font-family: var(--kb-display); font-size: 9px; letter-spacing: 0.12em; background: var(--kb-bordo) !important; color: #FFFFFF !important; }
.selo-novidade { background: var(--kb-camel) !important; color: #FFFFFF !important; }

/* J10. WhatsApp flutuante e no rodape */
.whatsapp-float, #whatsapp-flutuante, .btn-whatsapp-float, .float-whatsapp { letter-spacing: 0.08em; text-transform: uppercase; background: var(--kb-noir) !important; color: var(--kb-ecru) !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--kb-display) !important; font-size: 11px !important; }
.whatsapp-float svg, .whatsapp-float i, #whatsapp-flutuante svg, #whatsapp-flutuante i, .btn-whatsapp-float svg, .btn-whatsapp-float i, .float-whatsapp svg, .float-whatsapp i { color: var(--kb-ecru) !important; fill: var(--kb-ecru) !important; }
footer [class*="whatsapp"], .footer [class*="whatsapp"], .footer-institucional [class*="whatsapp"], footer a[href*="wa.me"], footer a[href*="api.whatsapp"], .footer a[href*="wa.me"], .footer a[href*="api.whatsapp"] { display: inline !important; width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; color: var(--kb-noir) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--kb-body) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }
footer [class*="whatsapp"] i, footer [class*="whatsapp"] svg, .footer [class*="whatsapp"] i, .footer [class*="whatsapp"] svg, footer a[href*="wa.me"] i, footer a[href*="wa.me"] svg { color: var(--kb-noir) !important; fill: var(--kb-noir) !important; background: transparent !important; filter: none !important; }

/* J11. Barra inferior fixa do mobile */
.menu-bottom, .bottom-nav, .tab-bar, .footer-mobile-nav { background: var(--kb-ecru) !important; border-top: 1px solid var(--kb-line) !important; }
.menu-bottom i, .bottom-nav i, .tab-bar i { color: var(--kb-noir) !important; }
.menu-bottom .contador, .bottom-nav .badge { background: var(--kb-camel) !important; color: #FFFFFF !important; }

/* J12. Banner */
.main-banner img, .banner-full img { filter: saturate(0.92) contrast(1.02); }

/* J13. Rodape */
footer, .footer, .footer-institucional { background: var(--kb-ecru) !important; color: var(--kb-noir) !important; }
footer a, .footer a, .footer li a, .footer-institucional a { color: var(--kb-noir) !important; opacity: 1 !important; background: transparent !important; box-shadow: none !important; font-family: var(--kb-body) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; }
footer a:hover, .footer a:hover, .footer-institucional a:hover { color: var(--kb-camel) !important; }
footer h3, footer h4, footer .title, .footer .title, footer .titulo-coluna, .footer-institucional .title { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kb-stone) !important; font-family: var(--kb-display) !important; font-size: 12px !important; }
footer .btn-fale-conosco, .footer .btn-fale-conosco, footer a.fale-conosco, .footer a.fale-conosco { align-items: center; justify-content: center; display: inline-flex !important; padding: 12px 20px !important; background: var(--kb-noir) !important; color: var(--kb-ecru) !important; border: 1px solid var(--kb-noir) !important; border-radius: 0 !important; font-family: var(--kb-display) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }

/* ------------------------------------------------------------
   J14. EXCECAO DELIBERADA: botao de compra continua bordo.
   A regra J8 pinta todo botao de #main-area de noir. Medido na pagina
   de produto: o botao Comprar passava de #5E1F2B (bordo) para #1A1917.
   O bordo nos elementos de compra foi decisao explicita do Founder,
   registrada no Bloco A deste mesmo arquivo, e nao ha referencia na
   home para compara-lo (a home nao tem botao de compra). Entao o Bloco
   A prevalece e e restaurado aqui, DEPOIS do J8, mantendo a tipografia
   nova. Para deixar o botao preto, basta remover este bloco.
   ------------------------------------------------------------ */
#main-area .produto .main-produto .area-buy-product button.button,
#main-area .area-comprar .button-buy,
.area-buy-product button.button,
.area-comprar .button-buy { background: var(--cor-primaria) !important; border-color: var(--cor-primaria) !important; color: #FFFFFF !important; }
#main-area .produto .main-produto .area-buy-product button.button:hover,
#main-area .area-comprar .button-buy:hover,
.area-buy-product button.button:hover,
.area-comprar .button-buy:hover { background: var(--cor-primaria) !important; border-color: var(--cor-primaria) !important; filter: brightness(0.85); }

/* ============================================================
   BLOCO K - identidade do Brand Book aplicada a loja inteira. 17/09/2026.
   Pedido do Founder: "fonte e paleta, vc segue a risca o branding book, e
   corrige. se eu nao gostar visualmente, voltamos a versao."

   Fonte de verdade: KNOWLEDGE-BASE/BRANDING-AUTHORITY.md

     Fundo   Ecru      #F4EEE3   (producao trazia #F4F1EA)
     Texto   Noir      #15130F   (producao trazia #1A1917)
     Heranca Camel     #B98A56   (producao trazia #A9784C)
     Neutro  Stone     #A8A197   (producao trazia #8C877D)
     Acento  Bordeaux  #5C2430   (producao trazia #5E1F2B)
     Titulos Nimbus Sans          (producao trazia Archivo)
     Corpo   Lato                 (producao trazia Source Sans 3)

   POR QUE html:root E NAO :root
   O design system duplicado dentro do Conteudo Adicional ID 6 declara os
   tokens --kb-* com hex literal num <style> inline, que carrega DEPOIS deste
   arquivo. Com :root a especificidade empata (0-1-0) e a inline vence por
   ordem - medido: --cor-base virava #15130F mas --kb-noir continuava #1A1917.
   html:root e 0-1-1 e vence sem depender de ordem.

   NIMBUS SANS NAO TEM WEBFONT LIVRE. Testado por medicao em canvas: a familia
   nao carrega. Nimbus Sans e o clone metrico da Helvetica feito pela URW, e
   por isso o fallback Helvetica/Arial tem as mesmas metricas. Se a licenca do
   arquivo real for adquirida, basta hospeda-lo em Recursos do Site e declarar
   @font-face - o stack abaixo ja da preferencia a ele automaticamente.

   TONS DERIVADOS, NAO ESPECIFICADOS PELO BRAND BOOK: --cor-bordas, --kb-elev
   e --kb-sutil sao tons de interface. Foram recalculados a partir do novo Ecru
   preservando o mesmo passo relativo que tinham em relacao ao fundo anterior.

   PARA REVERTER: apagar este bloco inteiro e devolver o @import da primeira
   linha para family=Archivo:wght@400;500;600&family=Source+Sans+3:wght@400;600
   ============================================================ */
html:root{
  --cor-background:#F4EEE3;
  --cor-base:#15130F;
  --cor-texto:#15130F;
  --cor-secundaria:#B98A56;
  --cor-texto-secundario:#A8A197;
  --cor-primaria:#5C2430;
  --cor-bordas:#DFD6C7;
  --kb-elev:#FAF4EA;
  --kb-sutil:#EDE4D5;
  --kb-ecru:#F4EEE3;
  --kb-noir:#15130F;
  --kb-stone:#A8A197;
  --kb-camel:#B98A56;
  --kb-bordo:#5C2430;
  --kb-line:#DFD6C7;
  --kb-display:"Nimbus Sans", Helvetica, Arial, sans-serif;
  --kb-body:"Lato", Helvetica, Arial, sans-serif;
}

/* ============================================================
   BLOCO L - popup de "produto adicionado ao carrinho" na identidade. 17/09/2026.
   Pedido do Founder: "o popup que abre quando um produto e adicionado ao
   carrinho esta completamente fora dos padroes da loja."

   O popup e do plugin SweetAlert2 e vinha com a paleta padrao dele: verde
   #27AE60 no icone, no titulo e no botao principal, cinza #737373 no texto e
   branco puro no fundo. Nada disso tem relacao com a marca.

   Mapeamento aplicado:
     fundo do popup       -> Ecru
     titulo               -> Noir, na fonte de titulos
     texto de apoio       -> Stone
     icone de sucesso     -> Camel, com traco de 2px em vez da borda de 20px do
                             plugin, que fazia o icone virar um disco solido
     "Finalizar compra"   -> Bordeaux, o mesmo do botao Comprar, por ser a acao
                             principal de compra
     "Voltar a navegacao" -> contorno Noir sem preenchimento, hierarquia
                             secundaria
     fundo por tras       -> Noir a 45% em vez de preto puro

   As classes .popup-adicionado-ao-carrinho, .botao-finalizar-compra e
   .botao-continuar-comprando sao da loja, nao do plugin - por isso o escopo
   fica restrito a este popup e nao afeta outros dialogos do SweetAlert2.
   ============================================================ */
.swal2-container.container-popup-add-carrinho{background:rgba(21,19,15,.45) !important}
.swal2-popup.popup-adicionado-ao-carrinho{background:var(--kb-ecru) !important; color:var(--kb-noir) !important;
  border:1px solid var(--kb-line) !important; border-radius:0 !important; box-shadow:none !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-title{color:var(--kb-noir) !important; font-family:var(--kb-display) !important;
  font-weight:500 !important; letter-spacing:-0.015em !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-html-container{color:var(--kb-stone) !important; font-family:var(--kb-body) !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-close{color:var(--kb-stone) !important; box-shadow:none !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-close:hover{color:var(--kb-noir) !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-icon.swal2-success{background:transparent !important; border-color:var(--kb-camel) !important;
  color:var(--kb-camel) !important; border-width:2px !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-icon.swal2-success .swal2-success-ring{border-color:var(--kb-camel) !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-icon.swal2-success [class^=swal2-success-line]{background-color:var(--kb-camel) !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-popup.popup-adicionado-ao-carrinho .swal2-icon.swal2-success .swal2-success-fix{background-color:transparent !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-deny.botao-finalizar-compra{background:var(--kb-bordo) !important; color:var(--kb-ecru) !important;
  border:1px solid var(--kb-bordo) !important; border-radius:0 !important; box-shadow:none !important;
  font-family:var(--kb-display) !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-deny.botao-finalizar-compra:hover{filter:brightness(.88)}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-confirm.botao-continuar-comprando{background:transparent !important; color:var(--kb-noir) !important;
  border:1px solid var(--kb-noir) !important; border-radius:0 !important; box-shadow:none !important;
  font-family:var(--kb-display) !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important}
.swal2-popup.popup-adicionado-ao-carrinho .swal2-confirm.botao-continuar-comprando:hover{background:var(--kb-noir) !important; color:var(--kb-ecru) !important}

/* ============================================================
   BLOCO M - recorte circular das fotos da descricao do produto. 17/09/2026.
   Regressao que EU introduzi no Bloco J e que so ficou visivel com a paleta
   nova. O Founder viu antes de mim.

   O QUE ACONTECEU
   O Bloco F recorta em circulo as fotos da descricao editorial, porque esses
   PNGs trazem o fundo BRANCO dentro do proprio arquivo - nenhuma cor de fundo
   da pagina remove esse branco, so o recorte. Essa regra nao tinha !important.
   O Bloco J2, que publiquei em 16/09, aplica border-radius:0 !important em
   ".produto img". Como a descricao fica dentro de div.produto, o seletor casa
   com essas fotos, o !important venceu e o recorte circular morreu - expondo
   os quadrados brancos. Medido: im.matches('.produto img') === true, cadeia de
   ancestrais .descricao-produto > .conteudo-produto > .main-produto > .produto.

   A troca de paleta NAO causou o problema; apenas tornou o branco mais
   evidente contra o Ecru.

   Aqui o recorte volta com !important e escopo estreito. As excecoes de
   imagem retangular do Bloco F sao preservadas, inclusive a guarda de
   252x252, para nao arredondar tabela de medidas nem banner.
   ============================================================ */
.descricao-produto .imagem-description img,
.descricao-produto figure img:not([width="252"]):not([height="252"]){border-radius:50% !important}
.descricao-produto img.banner,
.descricao-produto img.tabela-medidas,
.descricao-produto img[style*="width: 100%"]{border-radius:0 !important}