/* =====================================================================
   RASCUNHO — design system inspirado em valedeprata.com.br/colares
   Só tipografia, cabeçalho, barra de aviso, cards e respiro.
   Identidade Santelli preservada: logo oficial (marca/oficial), paleta
   cacau/creme/dourado, botões cacau com texto creme.
   ===================================================================== */
:root {
  --r-serif: "Cormorant Garamond", Georgia, serif;
  --r-sans: "Inter", Arial, sans-serif;
  --r-cacau: #2A1A13;      /* texto e botões */
  --r-btn: #4A2C1F;        /* botão do site (cacau) */
  --r-creme: #F3E5CF;      /* texto sobre cacau */
  --r-faixa: #F4EDE3;      /* linho-claro: fundo do cabeçalho */
  --r-ouro: #C9A462;
  --r-ouro-esc: #8E6C33;
  --r-suave: #6B5849;
  --r-linha: #E4D9C8;
  --sans: var(--r-sans);
  --serif: var(--r-serif);
}
html body { font-family: var(--r-sans); color: var(--r-cacau); }

/* ---------- barra de aviso: caixa alta, espaçada ---------- */
html body .avisos {
  background: var(--r-cacau); color: var(--r-creme);
  font: 500 12px/26px var(--r-sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 16px; text-align: center;
}
html body .avisos .sep { color: var(--r-ouro); margin: 0 14px; }

/* ---------- cabeçalho creme sólido: logo + ícones em cima, menu numa linha branca embaixo ---------- */
:root { --avisos-h: 36px; --topo-h: 128px; --r-gut: max(24px, calc(50% - 600px)); }
@media (max-width: 900px) { :root { --avisos-h: 30px; --topo-h: 64px; } }
html body, html body.home { padding-top: calc(var(--avisos-h) + var(--topo-h)); }
html body .topo-wrap { background: var(--r-faixa) !important; }
html body .topo-wrap .topo, html body.home .topo-wrap .topo, html body.home.rolou .topo-wrap .topo,
html body.home:not(.rolou) .topo-wrap .topo, html body.home:not(.rolou) .topo:not(:hover):not(.mega-on) {
  position: relative !important; top: auto; left: auto; right: auto;
  background: var(--r-faixa) !important; color: var(--r-cacau);
  border-bottom: 1px solid var(--r-linha) !important; box-shadow: none; backdrop-filter: none;
}
html body .topo .icone, html body.home .topo .icone, html body .topo .marca, html body.home .topo .marca,
html body.home .topo .nav a, html body.home .topo .cep { color: var(--r-cacau) !important; text-shadow: none !important; }
html body .topo-wrap .topo .topo-linha, html body.rolou .topo-wrap .topo .topo-linha {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 50px;
  grid-template-areas: "esq acoes" "nav nav";
  align-items: center; max-width: none; margin: 0; padding: 0 var(--r-gut); column-gap: 24px;
}
html body .topo-esq { grid-area: esq; display: flex; align-items: center; gap: 8px; }
html body .acoes { grid-area: acoes; justify-self: end; }
html body .topo .marca-logo .logo-creme { display: none !important; }
html body .topo .marca-logo .logo-cacau { display: block !important; height: 44px !important; width: auto !important; position: static !important; opacity: 1 !important; }
html body .topo .nav {
  grid-area: nav; align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 0 calc(-1 * var(--r-gut)); padding: 0 calc(var(--r-gut) + 40px); background: #fff; border-top: 1px solid var(--r-linha);
}
html body .topo .nav a, html body.home .topo .nav a {
  font: 500 13px/1 var(--r-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--r-cacau); padding: 6px 0; border-bottom: 1px solid transparent;
}
html body .topo .nav a:hover, html body .topo .nav a.ativo { border-color: var(--r-ouro); }
html body .topo .nav a.sale { color: var(--r-ouro-esc) !important; }
@media (max-width: 900px) {
  html body .topo-wrap .topo .topo-linha, html body.rolou .topo-wrap .topo .topo-linha { grid-template-rows: 1fr; grid-template-areas: "esq acoes"; padding: 0 16px; }
  html body .topo .nav { display: none; }
  html body .topo .marca-logo .logo-cacau { height: 30px !important; }
}

/* banner da inicial: texto continua claro sobre a foto; números alinhados */
html body { font-variant-numeric: lining-nums; }
html body .hero-texto h1, html body .ev-hero h1, html body .bf-hero h1, html body .bf-banner h1 {
  font-family: var(--r-serif); font-weight: 500; letter-spacing: -.02em; color: #fff;
}

/* ---------- títulos: Cormorant 600, tracking negativo leve ---------- */
html body .lista-topo h1, html body .titulo-secao h2, html body .secao h2, html body .pdp-info h1, html body .ev-sec-titulo, html body .ev-cab h2 {
  font-family: var(--r-serif); font-weight: 500; letter-spacing: -.025em; text-transform: none; color: var(--r-cacau);
}
html body .lista-topo { flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 8px 0 18px; margin: 28px 0 28px; border-bottom: 1px solid var(--r-linha); }
html body .lista-topo h1 { font-size: 38px; line-height: 1.05; margin: 0; }
html body .lista-topo .total { font: 400 12px var(--r-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--r-suave); }
html body .titulo-secao h2, html body .secao > h2 { font-size: clamp(30px, 3vw, 38px); line-height: 1.05; }
html body .migalha { font: 400 12px var(--r-sans); color: var(--r-suave); letter-spacing: .02em; }
html body .pdp-info h1 { font-size: 34px; line-height: 1.1; }

/* ---------- cards centralizados, nome em Cormorant ~18px ---------- */
html body .ev-card .ev-info { align-items: center; text-align: center; padding-top: 18px; gap: 4px; }
html body .ev-card .ev-info b, html body .ev-info b {
  font: 500 18px/1.1 var(--r-serif); letter-spacing: -.015em; text-transform: none; text-align: center;
  color: var(--r-cacau); min-height: 2.2em; -webkit-line-clamp: 2; padding: 0 6px;
}
html body .ev-preco, html body .ev-card .ev-preco { justify-content: center; margin-top: 6px; font-family: var(--r-sans); }
html body .ev-preco em, html body .ev-preco em.cheio, html body .ev-card .ev-preco em {
  font: 600 19px/1.2 var(--r-sans); color: var(--r-cacau); letter-spacing: -.01em;
}
html body .ev-preco s { font: 400 13px/1.2 var(--r-sans); color: var(--r-suave); align-self: center; }
html body .ev-card .pix-card, html body .ev-card .parcela-card {
  justify-content: center; font: 400 11.5px/1.45 var(--r-sans); color: var(--r-suave);
}
html body .ev-card .pix-card strong, html body .ev-card .parcela-card strong { color: var(--r-cacau); font-weight: 500; }
html body .ev-card .comprar-card, html body .ev-info + .comprar-card, html body button.comprar-card {
  align-self: center; width: 78%; max-width: 210px; height: 42px; margin-top: 14px;
  background: var(--r-btn); color: var(--r-creme); border: 0; border-radius: 0;
  font: 500 12px var(--r-sans); letter-spacing: .14em; text-transform: uppercase;
}
html body .ev-card .comprar-card:hover { background: var(--r-cacau); color: var(--r-creme); }
html body .ev-card .selo { font: 500 10px/1 var(--r-sans); letter-spacing: .12em; text-transform: uppercase;
  background: var(--r-btn); color: var(--r-creme); padding: 6px 9px; border-radius: 0; }

/* ---------- grade com respiro ---------- */
html body .grade { column-gap: 28px; row-gap: 56px; }
html body .secao { padding-top: 8px; padding-bottom: 72px; }
html body .filtros { justify-content: center; margin-bottom: 36px; }
html body .chip { font: 500 12px var(--r-sans); letter-spacing: .06em; text-transform: uppercase; border-radius: 0; }
html body .btn, html body .btn.claro { font-family: var(--r-sans); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- ajustes da 2ª rodada ---------- */
/* faixa branca do menu ocupa a largura toda da tela */
html body .topo .nav { margin: 0; padding: 0 40px; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
/* Black Friday no menu: dourado escuro, legível no branco */
html body .topo .nav .nav-bf, html body.home .topo .nav .nav-bf, html body .topo .nav .nav-bf * { color: var(--r-ouro-esc) !important; font-weight: 500; }
html body .topo .nav .nav-bf::before { background: var(--r-ouro); }
/* logo sem sombra */
html body .topo .marca-logo .logo, html body.home .topo .marca-logo .logo { filter: none !important; }
/* números das abas do banner em Inter (algarismos alinhados) */
html body .ev-abas b { font-family: var(--r-sans); font-weight: 500; letter-spacing: .04em; }
/* títulos de seção da inicial: Cormorant 600, sem caixa alta */
html body .ev-titulo h2, html body .ev-secao h2, html body .ev-cab h2, html body section h2 {
  font-family: var(--r-serif) !important; font-weight: 500 !important; font-size: clamp(30px, 2.8vw, 38px) !important;
  line-height: 1.05; letter-spacing: -.025em !important; text-transform: none !important; color: var(--r-cacau);
}
html body .ev-titulo p { font: 400 14px/1.5 var(--r-sans); color: var(--r-suave); }
html body .ev-titulo a { font: 500 11px var(--r-sans); letter-spacing: .14em; text-transform: uppercase; }
/* grade da inicial com o mesmo respiro */
html body .ev-grade { column-gap: 28px; row-gap: 56px; }
html body .ev-secao { padding-top: 72px; padding-bottom: 24px; }
/* Black Friday visível também na inicial (vence a regra de texto branco do banner) */
html body.home:not(.rolou) .topo-wrap .topo:not(:hover):not(.mega-on) .nav a.nav-bf,
html body.home .topo-wrap .topo .nav a.nav-bf { color: var(--r-ouro-esc) !important; }
/* menu do celular em Inter */
html body #menu-mob #nav-mob a, html body #menu-mob #nav-mob a.nav-bf { font: 500 14px/1.4 var(--r-sans); letter-spacing: .06em; }
/* celular: nome em até 3 linhas, sem cortar */
@media (max-width: 600px) { html body .ev-card .ev-info b, html body .ev-info b { font-size: 16px; -webkit-line-clamp: 3; min-height: 3.3em; } }
/* cabeçalho no mesmo creme em todas as páginas */
html body:not(.home) .topo-wrap .topo, html body.rolou .topo-wrap .topo { background: var(--r-faixa) !important; }
/* todo preço/valor/total em Inter (nunca na serifada) */
html body [class*="preco"], html body [class*="preco"] *, html body [class*="total"], html body [class*="total"] *,
html body [class*="valor"], html body [class*="valor"] *, html body .look-resumo strong, html body .look-resumo b {
  font-family: var(--r-sans) !important; font-variant-numeric: lining-nums tabular-nums;
}
html body .pdp-info .preco { font-weight: 600; font-size: 24px; color: var(--r-cacau); }
/* página do produto: títulos das abas em Inter, discretos e espaçados */
html body .pdp-info details summary, html body .detalhes details summary {
  font: 500 12px var(--r-sans) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--r-cacau);
}

/* ---------- barra de avisos: um aviso por vez, sem sobrepor (revisão Instinct) ----------
   o que sai some em .35s; o próximo só começa a aparecer depois (atraso de .4s) */
html body .avisos-rot > .av-i { transition: opacity .35s ease, transform .35s ease; transition-delay: 0s; }
html body .avisos-rot > .av-i.on { transition-delay: .4s; }
html body .avisos-rot > .av-i:not(.on) { visibility: hidden; transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
html body .avisos-rot > .av-i.on { visibility: visible; transition: opacity .35s ease .4s, transform .35s ease .4s, visibility 0s linear .4s; }

/* ===== 04/11 · pedido do Gui pela prévia no celular: header, imagens maiores na home, título em 2 linhas ===== */
/* cabeçalho: logo centrado na faixa creme (computador: centro vertical da linha de cima) */
html body .topo-wrap .topo .topo-linha, html body.rolou .topo-wrap .topo .topo-linha { grid-template-rows: 78px 50px; }
html body .topo-esq, html body .topo .acoes { align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; }
html body .topo .marca-logo { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; line-height: 0; }
html body .topo .marca-logo .logo-cacau { height: 46px !important; }
@media (max-width: 900px) {
  /* celular: logo no centro exato da tela (antes ficava 26px para a direita, empurrado pelos ícones da esquerda) */
  html body .topo-wrap .topo .topo-linha, html body.rolou .topo-wrap .topo .topo-linha { grid-template-rows: var(--topo-h); position: relative; }
  html body .topo .marca-logo { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  html body .topo .marca-logo .logo-cacau { height: 32px !important; }
}
/* imagens maiores na home: carrosséis com menos peças por tela; grade mais larga */
@media (min-width: 901px) {
  html body .ev-trilho { grid-auto-columns: calc((100% - 3 * 20px) / 3.3); gap: 20px; }
  html body .ev-secao .ev-grade { margin-left: -28px; margin-right: -28px; column-gap: 20px; }
}
@media (max-width: 900px) {
  html body .ev-trilho, html body .ev-queridinhos .ev-trilho { grid-auto-columns: calc((100% + var(--gutter) - 24px) / 1.6); gap: 12px; }
  html body .ev-secao .ev-grade { margin-left: calc(16px - var(--gutter)); margin-right: calc(16px - var(--gutter)); column-gap: 12px; }
}
/* título dos cards: no máximo 2 linhas também no celular (antes 3) */
@media (max-width: 600px) { html body .ev-card .ev-info b, html body .ev-info b { -webkit-line-clamp: 2; min-height: 2.2em; } }
@media (max-width: 900px) {
  html body .topo-esq { position: static !important; }
  html body .topo .marca-logo { width: max-content; }
  html body .topo .marca-logo .logo-cacau { width: auto !important; max-width: none !important; }
}
@media (max-width: 900px) { html body .topo .marca-logo, html body.home .topo .marca-logo { left: 50% !important; right: auto !important; top: 50% !important; } }
@media (max-width: 900px) { html body .topo .marca-logo, html body.home .topo .marca-logo { grid-column: 1 / -1 !important; grid-row: 1 / -1 !important; grid-area: auto !important; } }

/* ===== 04/11 · página do produto na lógica da referência (galeria grande à esquerda, resumo à direita; celular em coluna) ===== */
html body .pdp-secao { padding-top: 40px; }
html body .pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
html body .pdp-galeria, html body .pdp-info { top: calc(var(--avisos-h) + var(--topo-h) + 24px); }
html body .pdp-info { gap: 0; }
/* metadados discretos */
html body .pdp-info .pdp-topo { margin-bottom: 10px; }
html body .pdp-info .pdp-topo .ref, html body .pdp-info .pdp-topo .compartilhar { font: 500 11px var(--r-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--r-suave); }
html body .pdp-info h1 { margin: 0 0 18px; }
/* preço forte + Pix e parcelas logo abaixo, fechados por um filete */
html body .pdp-info .pdp-precos { display: grid; gap: 8px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--r-linha); }
html body .pdp-info .preco { font-size: 28px; letter-spacing: -.01em; }
html body .pdp-info .pix, html body .pdp-info .parcela { font: 400 14px var(--r-sans); color: var(--r-suave); }
html body .pdp-info .pix b, html body .pdp-info .parcela b { color: var(--r-cacau); }
/* CTA largo */
html body .pdp-info .comprar { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
html body .pdp-info .comprar #add { height: 54px; width: 100%; background: var(--r-btn) !important; color: var(--r-creme) !important; letter-spacing: .14em; }
html body .pdp-info .comprar .qtd { height: 54px; }
html body .pdp-info .wa-comprar { margin-top: 10px; height: 50px; width: 100%; }
/* bloco do frete em fundo creme */
html body .pdp-info .frete-calc { margin-top: 24px; padding: 18px 20px; background: var(--r-faixa); border: 0; border-radius: 4px; }
html body .pdp-info .frete-calc label { font: 500 11px var(--r-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--r-cacau); }
html body .pdp-info .frete-calc input { background: #fff; border-color: var(--r-linha); }
html body .pdp-info .beneficios { margin-top: 20px; font-size: 13px; color: var(--r-suave); }
html body .pdp-info .detalhes { margin-top: 28px; border-top: 1px solid var(--r-linha); }
@media (max-width: 820px) {
  html body .pdp-secao { padding-top: 0; }
  html body .pdp { grid-template-columns: 1fr; gap: 0; }
  html body .pdp-info { padding-top: 22px; }
  html body .pdp-info h1 { font-size: 28px; margin-bottom: 14px; }
  html body .pdp-info .preco { font-size: 26px; }
  html body .pdp-info .comprar { grid-template-columns: 108px minmax(0, 1fr); }
  html body .pdp-info .frete-calc { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 20px var(--gutter); border-radius: 0; }
}
html body .pdp { margin-top: 40px; }
@media (max-width: 820px) {
  html body .pdp { margin-top: 0; }
  html body .pdp-info .frete-calc { max-width: none !important; width: auto; }
}

/* ===== 04/11 · revisão: centro visual do logo e alinhamento do carrossel (computador) ===== */
@media (min-width: 901px) {
  /* havia 24px de espaço entre as linhas da grade do cabeçalho: o menu descia e a faixa creme ficava 102px com o logo no alto */
  html body .topo-wrap .topo .topo-linha, html body.rolou .topo-wrap .topo .topo-linha { row-gap: 0 !important; }
  /* o desenho do SVG tem mais respiro embaixo que em cima: desce 3px para o centro da tinta bater com o dos ícones */
  html body .topo .marca-logo .logo-cacau { transform: translateY(3px); }
  /* carrossel na mesma largura da grade de produtos */
  html body .ev-car { margin-left: -28px; margin-right: -28px; }
}

/* ===== 04/11 · página do produto refeita na composição da referência (medidas tiradas da referência em 1280×713 e 390×844) ===== */
html body .pdp-vp { max-width: 930px; margin: 0 auto; padding: 46px 0 0 !important; }
html body .pdp-vp .pdp-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 12.5px var(--r-sans); color: var(--r-suave); margin-bottom: 30px; }
html body .pdp-vp .pdp-trilha a { color: var(--r-suave); }
html body .pdp-vp .pdp-trilha a:hover { color: var(--r-cacau); }
html body .pdp-vp .pdp-trilha b { font-weight: 500; color: var(--r-cacau); }
html body .pdp-vp .pdp { display: grid; grid-template-columns: minmax(0, 500fr) minmax(0, 386fr); gap: 44px; margin: 0; align-items: start; }
/* galeria: miniaturas em coluna + foto grande; legenda embaixo */
html body .pdp-vp .pdp-galeria, html body .pdp-vp .pdp-galeria.uma { position: static; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 15px; align-items: start; }
html body .pdp-vp .pdp-miniaturas { display: grid !important; grid-auto-flow: row; gap: 16px; }
html body .pdp-vp .pdp-miniaturas button { display: block; width: 100px; padding: 9px; border: 1px solid var(--r-linha); background: #fff; }
html body .pdp-vp .pdp-miniaturas button.ativo { border-color: var(--r-cacau); }
html body .pdp-vp .pdp-miniaturas img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
html body .pdp-vp .pdp-foto { aspect-ratio: 4 / 5; border-radius: 0; overflow: hidden; background: #f4f3f1; }
html body .pdp-vp .pdp-foto img { width: 100%; height: 100%; object-fit: cover; }
html body .pdp-vp .pdp-ampliar { margin: 12px 0 0; text-align: center; font: 400 13.5px var(--r-sans); color: var(--r-cacau); }
html body .pdp-vp .pdp-pontos { display: none; }
/* resumo */
html body .pdp-vp .pdp-info { position: static; display: block; padding: 0; }
html body .pdp-vp .pdp-selo { display: inline-block; margin-bottom: 18px; padding: 7px 12px; background: var(--r-btn); color: var(--r-creme); font: 500 11px/1 var(--r-sans); letter-spacing: .14em; text-transform: uppercase; }
html body .pdp-vp .pdp-info h1 { margin: 0 0 22px; font: 500 38px/1.02 var(--r-serif) !important; letter-spacing: -.03em; color: var(--r-cacau); }
html body .pdp-vp .pdp-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 400 13px var(--r-sans); color: var(--r-cacau); }
html body .pdp-vp .pdp-link { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 13.5px var(--r-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--r-ouro-esc) !important; }
html body .pdp-vp .pdp-link span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
html body .pdp-vp .pdp-link svg, html body .pdp-vp .pdp-link .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
html body .pdp-vp .compartilhar { margin-top: 26px; }
html body .pdp-vp .pdp-precos { display: block; margin: 26px 0 0; padding: 0; border: 0; }
html body .pdp-vp .pdp-de { display: block; font: 400 15px var(--r-sans); color: #8b8079; margin-bottom: 2px; }
html body .pdp-vp .pdp-valor { font: 600 40px/1.1 var(--r-sans); letter-spacing: -.02em; color: var(--r-cacau); }
html body .pdp-vp .pdp-valor small { font-size: 21px; letter-spacing: 0; margin-right: 4px; }
html body .pdp-vp .pdp-precos p { margin: 4px 0 0; font: 400 14px/1.35 var(--r-sans); color: var(--r-cacau); }
html body .pdp-vp .pdp-precos p + p { margin-top: 1px; }
html body .pdp-vp .pdp-precos + .pdp-link { margin: 24px 0 18px; }
html body .pdp-vp .variacoes { margin: 0 0 18px; }
html body .pdp-vp .pdp-comprar { display: block; width: 360px; max-width: 100%; height: 54px; margin: 0; border: 0; border-radius: 0; background: var(--r-btn) !important; color: var(--r-creme) !important; font: 500 15px var(--r-sans) !important; letter-spacing: .2em; text-transform: uppercase; }
html body .pdp-vp .pdp-comprar:hover { background: var(--r-cacau) !important; }
html body .pdp-vp .pdp-wa { margin-top: 14px; }
/* frete em bloco creme */
html body .pdp-vp .frete-calc { margin: 24px 0 0 !important; padding: 20px !important; background: var(--r-faixa); border: 0 !important; border-radius: 0; max-width: none !important; display: block; }
html body .pdp-vp .frete-calc label { display: block; margin-bottom: 8px; font: 500 18px var(--r-serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--r-cacau); }
html body .pdp-vp .frete-calc > div:first-of-type { display: flex; gap: 26px; }
html body .pdp-vp .frete-calc input { flex: 1; height: 42px; border: 1px solid #c9bfb3; border-radius: 0; background: #fff; font: 400 13px var(--r-sans); padding: 0 12px; }
html body .pdp-vp .frete-calc .btn { flex: none; width: 108px; height: 42px; padding: 0; border: 0; border-radius: 0; background: var(--r-btn) !important; color: var(--r-creme) !important; font: 600 11px var(--r-sans) !important; letter-spacing: .12em; text-transform: uppercase; }
html body .pdp-vp .frete-nota { margin: 12px 0 0; font: 400 12.5px var(--r-sans); color: var(--r-suave); }
/* conteúdo de baixo em abas */
html body .pdp-vp .pdp-abas { margin-top: 64px; }
html body .pdp-vp .pdp-abas-barra { display: flex; flex-wrap: wrap; border-bottom: 1px solid #d4cbbd; }
html body .pdp-vp .pdp-abas-barra button { height: 48px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font: 500 17px var(--r-sans); color: var(--r-cacau); }
html body .pdp-vp .pdp-abas-barra button.ativo { color: var(--r-ouro-esc); border-bottom-color: var(--r-ouro-esc); }
html body .pdp-vp .pdp-aba { border: 0; }
html body .pdp-vp .pdp-aba > summary { display: none; }
html body .pdp-vp .pdp-aba-corpo { padding: 28px 0 8px; font: 400 15px/1.85 var(--r-sans); color: var(--r-suave); max-width: none; }
html body .pdp-vp .pdp-aba-corpo p { margin: 0; }
html body .pdp-vp .pdp-aba-corpo ul { margin: 0; padding-left: 30px; list-style: none; }
html body .pdp-vp .pdp-aba-corpo li { position: relative; }
html body .pdp-vp .pdp-aba-corpo li::before { content: ""; position: absolute; left: -20px; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: var(--r-ouro-esc); }
html body .pdp-vp .pdp-aba-corpo b { color: var(--r-cacau); font-weight: 500; }
/* barra fixa de compra também no computador, como na referência */
@media (min-width: 821px) {
  html body .barra-compra { display: flex !important; padding: 8px max(24px, calc(50% - 476px)) !important; gap: 26px; background: #fff !important; border-top: 1px solid #d4cbbd; z-index: 42; }
  html body .barra-compra img { width: 60px !important; }
  html body .barra-compra div { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; }
  html body .barra-compra div span:first-child { font: 400 16px var(--r-serif) !important; color: var(--r-cacau); }
  html body .barra-compra .preco { font: 600 24px var(--r-sans) !important; color: var(--r-cacau); }
  html body .barra-compra .btn { width: 170px; height: 48px !important; border-radius: 0; background: var(--r-btn) !important; color: var(--r-creme) !important; font: 500 13px var(--r-sans) !important; letter-spacing: .14em; }
}
/* celular: coluna única, galeria com pontos, abas viram acordeões */
@media (max-width: 820px) {
  html body .pdp-vp { padding: 22px var(--gutter) 0 !important; max-width: none; }
  html body .pdp-vp .pdp-trilha { margin-bottom: 26px; font-size: 13px; }
  html body .pdp-vp .pdp { grid-template-columns: 1fr; gap: 40px; }
  html body .pdp-vp .pdp-galeria, html body .pdp-vp .pdp-galeria.uma { grid-template-columns: 1fr; }
  html body .pdp-vp .pdp-miniaturas { display: none !important; }
  html body .pdp-vp .pdp-pontos { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  html body .pdp-vp .pdp-pontos button { width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 1px solid var(--r-suave); background: #fff; }
  html body .pdp-vp .pdp-pontos button.ativo { background: var(--r-cacau); border-color: var(--r-cacau); }
  html body .pdp-vp .pdp-ampliar { display: none; }
  html body .pdp-vp .pdp-info h1 { font-size: 26px !important; margin-bottom: 18px; }
  html body .pdp-vp .pdp-valor { font-size: 38px; }
  html body .pdp-vp .pdp-comprar { width: 100%; }
  html body .pdp-vp .frete-calc { margin-left: 0 !important; margin-right: 0 !important; padding: 26px 20px !important; }
  html body .pdp-vp .pdp-abas { margin: 56px calc(-1 * var(--gutter)) 0; }
  html body .pdp-vp .pdp-abas-barra { display: none; }
  html body .pdp-vp .pdp-aba { border-top: 1px solid #d4cbbd; }
  html body .pdp-vp .pdp-aba:last-child { border-bottom: 1px solid #d4cbbd; }
  html body .pdp-vp .pdp-aba > summary { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gutter); list-style: none; cursor: pointer; font: 500 18px var(--r-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--r-cacau); }
  html body .pdp-vp .pdp-aba > summary::-webkit-details-marker { display: none; }
  html body .pdp-vp .pdp-aba > summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--r-cacau); border-bottom: 1.5px solid var(--r-cacau); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
  html body .pdp-vp .pdp-aba[open] > summary::after { transform: rotate(225deg); }
  html body .pdp-vp .pdp-aba-corpo { padding: 0 var(--gutter) 22px; }
}
html body .barra-compra div span:first-child { text-transform: none !important; letter-spacing: 0 !important; }
html body .barra-compra .btn { text-transform: uppercase; }
html body .pdp-vp + .secao { margin-top: 72px; }
@media (max-width: 820px) {
  html body .pdp-vp .pdp-info h1 { font-size: 24px !important; line-height: 1.1 !important; }
  html body .barra-compra div span:first-child { font: 400 15px/1.25 var(--r-serif) !important; color: var(--r-cacau); }
  html body .barra-compra .btn { border-radius: 0; background: var(--r-btn) !important; color: var(--r-creme) !important; font: 500 13px var(--r-sans) !important; letter-spacing: .14em; }
  html body .pdp-vp + .secao { margin-top: 48px; }
}

/* ===== 04/11 · teste funcional: cabeçalho fixo e barra de compra não podem cobrir o que foi focado/ancorado ===== */
html { scroll-padding-top: calc(var(--avisos-h) + var(--topo-h) + 16px); }
html:has(body.barra-on) { scroll-padding-bottom: calc(var(--barra-real, 72px) + 12px); }
/* ícone do cartão: mesmo desenho em cards e na página do produto, na cor do texto */
html body .parcela-card .ic-cartao, html body .ev-card .parcela-card .ic-cartao { flex: none; display: block; width: 1.25em; height: 1.25em; margin: 0; color: var(--r-cacau); fill: none !important; stroke: currentColor !important; }
html body .pdp-vp .pdp-link .ic-cartao { color: var(--r-ouro-esc); }

/* ===== 04/11 17:20 · revisão do Gui: selo + Compartilhar na mesma linha (compartilhar à direita); ícones nas linhas de Pix e parcelas ===== */
html body .pdp-vp .pdp-topo-vp { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 26px; margin-bottom: 16px; }
html body .pdp-vp .pdp-topo-vp .pdp-selo { margin: 0; }
html body .pdp-vp .pdp-topo-vp .compartilhar { margin: 0 0 0 auto; font-weight: 500 !important; font-size: 13px !important; color: var(--r-suave) !important; }
html body .pdp-vp .pdp-topo-vp .compartilhar span { text-decoration: none; }
html body .pdp-vp .pdp-topo-vp .compartilhar svg { width: 18px; height: 18px; }
html body .pdp-vp .pdp-info h1 { margin-bottom: 20px; }
html body .pdp-vp .pdp-precos { margin-top: 0; }
html body .pdp-vp .pdp-precos p { display: flex; align-items: center; gap: 8px; }
html body .pdp-vp .pdp-precos p .ic-pix { width: 16px; height: 16px; flex: none; display: block; margin: 0; }
html body .pdp-vp .pdp-precos p .ic-cartao { width: 17px; height: 17px; flex: none; color: var(--r-cacau); fill: none !important; stroke: currentColor !important; stroke-width: 1.7; }
html body .pdp-vp .pdp-precos .pdp-valor + p { margin-top: 8px; }
html body .pdp-vp .pdp-precos p + p { margin-top: 5px; }
/* linha do Pix sem a pílula verde herdada do selo "5% off" antigo */
html body .pdp-vp .pdp-precos .pix span { background: none !important; color: inherit !important; padding: 0 !important; margin: 0 !important; font: inherit !important; border-radius: 0 !important; }

/* ===== 04/11 · zona segura do rodapé: links legais nunca embaixo do WhatsApp flutuante nem da barra de compra ===== */
@media (min-width: 821px) {
  html body:has(.barra-compra) .rodape { padding-bottom: calc(var(--barra-real, 92px) + 28px) !important; }
  html body:has(.barra-compra.on) .wa-flutuante { bottom: calc(var(--barra-real, 92px) + 16px) !important; }
}
@media (max-width: 820px) {
  html body .rodape { padding-bottom: calc(46px + 14px + 28px + env(safe-area-inset-bottom)) !important; }
  html body:has(.barra-compra) .rodape { padding-bottom: calc(var(--barra-real, 76px) + 46px + 14px + 28px + env(safe-area-inset-bottom)) !important; }
}

/* ===== 04/11 17:29 · Gui: sem a trilha em cima; foto encostada no cabeçalho e na lateral ===== */
html body .pdp-vp { max-width: none; padding: 0 !important; margin: 0; }
html body .pdp-vp .pdp { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 0; }
/* foto: começa na base do cabeçalho e encosta na borda esquerda; proporção 4:5 da foto real, sem esticar */
html body .pdp-vp .pdp-galeria, html body .pdp-vp .pdp-galeria.uma { display: block; position: relative; }
html body .pdp-vp .pdp-foto { aspect-ratio: 4 / 5; width: 100%; }
html body .pdp-vp .pdp-galeria.uma .pdp-miniaturas { display: none !important; }
html body .pdp-vp .pdp-galeria:not(.uma) .pdp-miniaturas { position: absolute; z-index: 2; left: 20px; top: 20px; width: 72px; gap: 10px; }
html body .pdp-vp .pdp-galeria:not(.uma) .pdp-miniaturas button { width: 72px; padding: 5px; }
html body .pdp-vp .pdp-ampliar { margin: 12px 0 0; }
/* resumo à direita, alinhado ao fim do cabeçalho (mesma margem do menu) */
html body .pdp-vp .pdp-info { position: sticky; top: calc(var(--avisos-h) + var(--topo-h) + 32px); padding: 40px var(--r-gut) 40px 56px; }
html body .pdp-vp .pdp-abas { max-width: 930px; margin: 64px auto 0; }
@media (max-width: 820px) {
  html body .pdp-vp { padding: 0 !important; }
  html body .pdp-vp .pdp { grid-template-columns: 1fr; gap: 0; }
  html body .pdp-vp .pdp-galeria .pdp-miniaturas { display: none !important; }
  html body .pdp-vp .pdp-info { position: static; padding: 24px var(--gutter) 0; }
  html body .pdp-vp .pdp-abas { max-width: none; margin: 56px 0 0; }
}
html body .pdp-vp .pdp-galeria, html body .pdp-vp .pdp-galeria.uma { top: auto !important; }
/* computador: o copyright fica à esquerda, na mesma altura do WhatsApp flutuante — reserva a altura do botão (46px + 18px de margem + folga) */
@media (min-width: 821px) {
  html body .rodape { padding-bottom: calc(46px + 18px + 24px) !important; }
  html body:has(.barra-compra) .rodape { padding-bottom: calc(var(--barra-real, 92px) + 46px + 16px + 24px) !important; }
}

/* rascunho 04/11 (Gui 17:43): formas de pagamento em sanfonas por método, como na referência (área 920, linhas 67, logos 45x36, 14px) */
html body .pdp-vp .pg-sanfonas { max-width: 920px; }
html body .pdp-vp .pg-item { border: 0; } /* Gui 18:15: sem riscos separando os métodos */
html body .pdp-vp .pg-item > summary { display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 0 15px; list-style: none; cursor: pointer; font: 400 14px/1.4 var(--r-sans); color: var(--r-suave); }
html body .pdp-vp .pg-item > summary::-webkit-details-marker { display: none; }
html body .pdp-vp .pg-item > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--r-suave); border-bottom: 1.5px solid var(--r-suave); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
html body .pdp-vp .pg-item[open] > summary::after { transform: rotate(-45deg); }
html body .pdp-vp .pg-logo { width: 45px; height: 36px; object-fit: contain; flex: none; }
html body .pdp-vp .pg-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding: 4px 15px 22px; border: 0; font: 400 14px/1.6 var(--r-sans); color: var(--r-suave); }
@media (max-width: 820px) {
  html body .pdp-vp .pdp-aba-corpo:has(.pg-sanfonas) { padding: 0 0 8px; }
  html body .pdp-vp .pg-item > summary { padding: 0 var(--gutter); }
  html body .pdp-vp .pg-corpo { grid-template-columns: 1fr; padding: 4px var(--gutter) 20px; }
}

/* rascunho 04/11 (revisão 17:57): WhatsApp flutuante recolhe quando ficaria por cima do conteúdo (ver fim do app.js) */
html body .wa-flutuante { transition: bottom .3s, opacity .2s, transform .2s, visibility .2s; }
html body .wa-flutuante.wa-recolhido { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html body .wa-flutuante { transition: none; } }

/* rascunho 04/11 (Gui 18:15/18:16): página do produto sem riscos entre abas, acordeões e formas de pagamento; separação só por espaço.
   Sem contorno depois de clique, toque ou foco do link; no teclado, foco discreto: fundo linho-claro e texto sublinhado. Campo de CEP intocado. */
html body .pdp-vp .pdp-abas-barra { border-bottom: 0; gap: 4px; }
html body .pdp-vp .pdp-abas-barra button { border-bottom: 0; margin-bottom: 0; border-radius: 2px; }
html body .pdp-vp .pdp-abas-barra button.ativo { background: var(--r-faixa); }
html body .pdp-vp .pdp-abas-barra button:focus,
html body .pdp-vp .pdp-aba > summary:focus,
html body .pdp-vp .pg-item > summary:focus { outline: none; box-shadow: none; }
html body .pdp-vp .pdp-abas-barra button:focus-visible,
html body .pdp-vp .pdp-aba > summary:focus-visible,
html body .pdp-vp .pg-item > summary:focus-visible { outline: none; background: var(--r-faixa); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 820px) {
  html body .pdp-vp .pdp-aba, html body .pdp-vp .pdp-aba:last-child { border: 0; }
  html body .pdp-vp .pdp-aba + .pdp-aba { margin-top: 4px; }
}

/* rascunho 04/11 (Gui 18:19): títulos de abas/acordeões mais discretos — ícone de linha, fonte menor e mais fina; área de toque mantida */
html body .pdp-vp .ic-aba { width: 18px; height: 18px; flex: none; color: var(--r-ouro-esc); }
html body .pdp-vp .pdp-abas-barra button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; font: 400 15px var(--r-sans); color: var(--r-suave); }
html body .pdp-vp .pdp-abas-barra button.ativo { color: var(--r-cacau); font-weight: 500; }
@media (max-width: 820px) {
  html body .pdp-vp .pdp-aba > summary { justify-content: flex-start; gap: 12px; min-height: 56px; padding: 14px var(--gutter); font: 400 15.5px var(--r-sans) !important; color: var(--r-cacau); }
  html body .pdp-vp .pdp-aba > summary::after { margin-left: auto; width: 8px; height: 8px; border-right-width: 1.2px; border-bottom-width: 1.2px; border-color: var(--r-suave); }
}

/* rascunho 04/11 (Gui 18:19): link e janela da tabela de medidas */
html body .pdp-vp .pdp-medidas { margin: -2px 0 16px; }
html body .medidas-modal { width: calc(100vw - 40px); max-width: 1240px; height: calc(100dvh - 40px); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--r-cacau); overflow: hidden; }
html body .medidas-modal::backdrop { background: rgba(42, 26, 19, .55); }
html body .medidas-caixa { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 64px 24px 40px; font: 400 15px/1.7 var(--r-sans); color: var(--r-suave); }
html body .medidas-modal .medidas-caixa h2 { margin: 18px 0 14px; font: 500 42px/1.1 var(--r-serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--r-cacau); }
html body .medidas-caixa h3 { margin: 28px 0 10px; font: 500 26px/1.2 var(--r-serif); color: var(--r-cacau); }
html body .medidas-caixa p { margin: 0 0 14px; }
html body .medidas-intro { margin-bottom: 4px !important; padding-right: 48px; }
html body .medidas-fechar { position: sticky; top: 0; float: right; margin: -52px -12px 0 0; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 2px; background: var(--r-cacau); cursor: pointer; z-index: 1; }
html body .medidas-fechar svg { width: 16px; height: 16px; fill: none; stroke: var(--r-creme); stroke-width: 1.8; stroke-linecap: round; }
html body .medidas-tabela { width: 100%; margin: 4px 0 12px; border-collapse: collapse; }
html body .medidas-tabela th, html body .medidas-tabela td { padding: 12px; text-align: left; vertical-align: top; border: 1px solid #d4cbbd; }
html body .medidas-tabela th { background: var(--r-faixa); font: 600 12px var(--r-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--r-cacau); }
html body .medidas-tabela td { font: 400 16px/1.5 var(--r-sans); color: var(--r-cacau); }
html body .medidas-tabela td:first-child { width: 32%; }
html body .medidas-tabela tr.atual td:first-child { font-weight: 500; }
html body .medidas-nota { font-size: 13px; }
html:has(.medidas-modal[open]) { overflow: hidden; }
@media (max-width: 820px) {
  html body .medidas-modal { width: calc(100vw - 32px); height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); }
  html body .medidas-caixa { padding: 60px 18px calc(28px + env(safe-area-inset-bottom)); }
  html body .medidas-modal .medidas-caixa h2 { font-size: 32px !important; }
  html body .medidas-caixa h3 { font-size: 23px; }
  html body .medidas-fechar { margin-right: -4px; }
  html body .medidas-tabela td { font-size: 15px; }
}

/* rascunho 04/11 (Gui 18:33): parcelas em tabela como na referência — colunas 100 / 400 / resto, 14px/22,4px cinza,
   condição e valor em peso 600; sem linhas (18:15). No celular a observação vai para baixo da tabela, sem sumir. */
html body .pdp-vp .pg-corpo { display: block; padding: 15px 15px 24px; }
html body .pdp-vp .pg-tabela { width: 100%; border-collapse: collapse; font: 400 14px/22.4px var(--r-sans); color: var(--r-suave); }
html body .pdp-vp .pg-tabela th, html body .pdp-vp .pg-tabela td { padding: 0; border: 0; text-align: left; vertical-align: top; background: none; }
html body .pdp-vp .pg-tabela th { width: 100px; font-weight: 500; color: var(--r-suave); }
html body .pdp-vp .pg-tabela .pg-val { width: 400px; }
html body .pdp-vp .pg-tabela b { font-weight: 500; color: var(--r-suave); }
html body .pdp-vp .pg-nota-cel { display: none; }
@media (max-width: 820px) {
  html body .pdp-vp .pg-corpo { padding: 15px var(--gutter) 24px; }
  html body .pdp-vp .pg-tabela th { width: 68px; }
  html body .pdp-vp .pg-tabela .pg-val { width: auto; }
  html body .pdp-vp .pg-tabela .pg-obs { display: none; }
  html body .pdp-vp .pg-nota-cel { display: block; margin: 6px 0 0; font: 400 14px/22.4px var(--r-sans); color: var(--r-suave); }
  html body .pdp-vp .pg-nota-cel b { font-weight: 500; color: var(--r-suave); }
}

/* rascunho 04/11 (Gui 18:53): linhas de cartão e Pix dos cards no formato da página do produto, centralizadas; quebram linha em vez de cortar */
html body .ev-card .parcela-card, html body .ev-card .pix-card { display: block; max-width: 100%; text-align: center; font: 400 11.5px/1.45 var(--r-sans); color: var(--r-suave); }
html body .ev-card .parcela-card > span, html body .ev-card .pix-card > span { white-space: normal; overflow: visible; text-overflow: clip; }
/* ícone na mesma linha do texto: em card estreito a linha quebra centralizada, com o ícone no começo */
html body .ev-card .parcela-card .ic-cartao { display: inline-block; width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -3px; }
html body .ev-card .pix-card .ic-pix { display: inline-block; width: 13px; height: 13px; margin: 0 6px 0 0; vertical-align: -2px; }
html body .ev-card .parcela-card + .pix-card { margin-top: 2px; }

/* rascunho 04/11 (Gui 19:35): nota da simulação ilustrativa abaixo de R$ 90, colada à linha da parcela */
html body .ev-card .sim-nota { display: block; max-width: 100%; margin: 1px 0 2px; text-align: center; font: italic 400 10.5px/1.35 var(--r-sans); color: var(--r-suave); }
html body .pdp-vp .pdp-precos .sim-nota { margin: -2px 0 2px 25px; font: italic 400 12px/1.4 var(--r-sans); color: var(--r-suave); }

/* rascunho 04/11 (Gui 19:39): cards da HOME um pouco menores só no computador (~10% nas fotos); fonte, valores, celular e coleções iguais */
@media (min-width: 901px) {
  html body .ev-trilho { grid-auto-columns: calc((100% - 3 * 20px) / 3.7); }
  html body .ev-secao .ev-grade { column-gap: 24px; }
}

/* rascunho 04/11 (Gui 19:46): só na página do produto, o texto das linhas do cartão e do Pix começa na mesma coluna; ícones no lugar */
html body .pdp-vp .pdp-precos p.parcela > .ic-cartao, html body .pdp-vp .pdp-precos p.pix > .ic-pix { flex: 0 0 18px; width: 18px; object-fit: contain; }
/* ===== 04/11 20:05 · Gui 19:48: enquadramento da página do produto no computador — container com respiro; foto cabe na tela; resumo maior. Celular (≤820px) não muda. ===== */
@media (min-width: 821px) {
  html body .pdp-vp .pdp { max-width: 1240px; margin: 32px auto 0; padding: 0 40px; grid-template-columns: auto minmax(380px, 460px); justify-content: center; column-gap: clamp(40px, 5vw, 72px); }
  html body .pdp-vp .pdp-galeria, html body .pdp-vp .pdp-galeria.uma { width: clamp(400px, calc((100vh - var(--avisos-h) - var(--topo-h) - 72px) * .8), 620px); max-width: 100%; }
  html body .pdp-vp .pdp-info { padding: 8px 0 40px; }
}
/* ===== 04/11 20:16 · Gui 20:14: resultado do frete na página do produto em blocos discretos (mesmos dados da API, sem transportadora) ===== */
html body .pdp-vp #frete-res .frete-ref { margin: 18px 0 10px; font: 400 13px var(--r-sans); color: var(--r-suave); }
html body .pdp-vp #frete-res .frete-ref b { font: 500 16px var(--r-serif); color: var(--r-cacau); }
html body .pdp-vp .frete-ops { display: grid; gap: 8px; }
html body .pdp-vp .frete-op { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; border: 0; cursor: default; font: 400 14px var(--r-sans); color: var(--r-cacau); }
html body .pdp-vp .frete-op span { flex: 1; min-width: 0; }
html body .pdp-vp .frete-op small { display: block; margin-top: 2px; font: 400 12.5px var(--r-sans); color: var(--r-suave); }
html body .pdp-vp .frete-op b { flex: none; font: 500 14px var(--r-sans); color: var(--r-cacau); }
/* Gui 20:23: caminhãozinho discreto ao lado de "Frete e prazo" (mesmo traço fino dos ícones das abas) */
html body .pdp-vp .frete-calc label { display: flex !important; align-items: center; gap: 8px; }
html body .pdp-vp .frete-calc label .ic-frete { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--r-ouro-esc); stroke-width: 1.4; stroke-linejoin: round; }
/* Gui 20:31: topo do menu lateral (celular) com o monograma oficial SA em vez da assinatura completa; cabeçalho geral não muda */
html body .gaveta-topo .marca-mono { display: flex; align-items: center; }
html body .gaveta-topo .logo-mono { display: block; width: 40px; height: 40px; }
/* Gui 20:37: no computador a foto começa na MESMA linha (borda esquerda) do quadro "Complete o look" abaixo; tamanho da foto mantido. Celular não muda. */
@media (min-width: 821px) {
  html body .pdp-vp .pdp { justify-content: start; grid-template-columns: auto minmax(380px, 1fr); padding: 0 20px; } /* 1240 − 2×20 = 1200, mesma largura útil do "Complete o look" */
  html body .pdp-vp .pdp-info { max-width: 520px; }
}
/* Gui 20:40 ("fonte ligeiramente mais fina/delicada… pouca coisa"): pesos um degrau abaixo — 700→600 e 600→500 nas regras deste arquivo;
   negrito padrão (b/strong, 700 do navegador/style.css) → 600. Família, tamanhos e cores iguais; 400 não muda (nada vira 300). */
html body b, html body strong { font-weight: 600; }
/* ===== 04/11 21:16 · Gui 21:13: descrição e demais informações logo abaixo do frete, na coluna da direita.
   Computador: as 5 abas não cabem na largura da coluna → sanfona (mesmo conteúdo). Celular: mesma ordem de antes. ===== */
@media (min-width: 821px) {
  html body .pdp-vp .pdp-info > .pdp-abas { max-width: none; margin: 28px 0 0; }
  html body .pdp-vp .pdp-info .pdp-abas-barra { display: none; }
  html body .pdp-vp .pdp-info .pdp-aba > summary { display: flex; align-items: center; gap: 10px; padding: 15px 2px; list-style: none; cursor: pointer; font: 400 15.5px var(--r-sans); color: var(--r-cacau); }
  html body .pdp-vp .pdp-info .pdp-aba > summary::-webkit-details-marker { display: none; }
  html body .pdp-vp .pdp-info .pdp-aba > summary, html body .pdp-vp .pdp-info .pg-item > summary { text-transform: none !important; letter-spacing: normal !important; }
  html body .pdp-vp .pdp-info .pdp-aba > summary { font: 400 15.5px var(--r-sans) !important; color: var(--r-cacau) !important; } /* uma regra genérica de summary com !important reduzia para 12px */
  html body .pdp-vp .pdp-info .pdp-aba > summary .ic-aba { width: 18px; height: 18px; flex: none; }
  html body .pdp-vp .pdp-info .pdp-aba > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--r-cacau); border-bottom: 1.5px solid var(--r-cacau); transform: rotate(45deg); transition: transform .2s; }
  html body .pdp-vp .pdp-info .pdp-aba[open] > summary::after { transform: rotate(225deg); }
  html body .pdp-vp .pdp-info .pdp-aba-corpo { padding: 0 2px 18px; font-size: 14.5px; line-height: 1.75; }
  html body .pdp-vp .pdp-info .pdp-aba-corpo:has(.pg-sanfonas) { padding: 0 0 8px; }
  html body .pdp-vp .pdp-info .pg-corpo { padding: 12px 0 20px; }
  html body .pdp-vp .pdp-info .pg-tabela th { width: 68px; }
  html body .pdp-vp .pdp-info .pg-tabela .pg-val { width: auto; }
  html body .pdp-vp .pdp-info .pg-tabela .pg-obs { display: none; }
  html body .pdp-vp .pdp-info .pg-nota-cel { display: block; margin: 6px 0 0; font: 400 14px/22.4px var(--r-sans); color: var(--r-suave); }
}
@media (max-width: 820px) {
  html body .pdp-vp .pdp-info > .pdp-abas { max-width: none; margin: 56px calc(-1 * var(--gutter)) 0; }
}
/* Gui 21:51: título da página do produto um pouco mais fino; no computador cabe em 1 linha quando o nome permite (sem forçar) */
html body .pdp-vp .pdp-info h1 { font-weight: 400 !important; }
@media (min-width: 821px) { html body .pdp-vp .pdp-info h1 { font-size: 34px !important; } }
/* Gui 21:51:59: borda direita da coluna de cima alinhada com o quadro "Seu look" abaixo (computador) */
@media (min-width: 821px) { html body .pdp-vp .pdp-info { max-width: none; margin-right: 16px; } }
/* ===== 04/11 22:16 · pedidos Gui 22:02–22:03 ===== */
/* 1) seletor de quantidade − 1 + à esquerda do Comprar (usa o mesmo #qtd e os botões [data-q] que o app já trata) */
html body .pdp-vp .pdp-compra-linha { display: flex; align-items: stretch; gap: 12px; max-width: 100%; }
html body .pdp-vp .qtd-sel { display: flex; align-items: stretch; flex: none; height: 54px; border: 1px solid #bbb; background: #fff; }
html body .pdp-vp .qtd-sel button { width: 42px; border: 0; background: none; cursor: pointer; font: 400 20px/1 var(--r-sans); color: var(--r-cacau); }
html body .pdp-vp .qtd-sel input { width: 36px; border: 0; padding: 0; text-align: center; background: none; font: 500 15px var(--r-sans); color: var(--r-cacau); }
html body .pdp-vp .pdp-compra-linha .pdp-comprar { flex: 1 1 auto; width: auto; max-width: none; } /* Gui 22:45: borda direita do Comprar = card do frete */
@media (max-width: 820px) { html body .pdp-vp .pdp-compra-linha .pdp-comprar { max-width: none; } }
/* 3) computador: topo da foto = topo da linha da etiqueta Black Friday / Compartilhar */
@media (min-width: 821px) {
  html body .pdp-vp .pdp-info { padding-top: 0 !important; }
  html body .pdp-vp .pdp-topo-vp { align-items: flex-start; }
}
/* 4) logo do rodapé maior (cabeçalho não muda) */
html body .rodape .marca-rodape .logo { height: 112px !important; width: auto !important; }
@media (max-width: 820px) { html body .rodape .marca-rodape .logo { height: 92px !important; } }
/* 5) espaçamento padronizado entre seções: um só ritmo, sempre acima de cada bloco (56px computador / 40px celular) */
:root { --r-ritmo: 56px; }
@media (max-width: 820px) { :root { --r-ritmo: 40px; } }
html body .ev-secao { padding-top: var(--r-ritmo) !important; padding-bottom: 0 !important; }
html body .ev-insta { margin-top: var(--r-ritmo) !important; }
html body #app > .secao { padding-bottom: 0 !important; }
html body #app > .secao + .secao, html body .pdp-vp + .secao { margin-top: 0 !important; padding-top: var(--r-ritmo) !important; }
html body .pre-rodape { margin-top: var(--r-ritmo) !important; }

/* Gui 22:47: sem tag Black Friday e sem Compartilhar no topo da PDP; título vem primeiro (menu/coleção BF intactos) */
html body .pdp-vp .pdp-topo-vp { display: none !important; }
html body .pdp-vp .pdp-info h1 { margin-top: 0 !important; }

/* Gui 22:48: rodapé só com ícone (monograma) e "Santelli" abaixo, maiores; sem "Acessórios", tagline e slogan */
html body .rodape .marca-empilhada { display: flex; flex-direction: column; align-items: center; gap: 12px; width: fit-content; margin-bottom: 20px; }
html body .rodape .marca-empilhada .rod-mono { height: 104px; width: auto; display: block; }
html body .rodape .marca-empilhada .rod-nome { height: 46px; width: auto; display: block; }
@media (max-width: 820px) { html body .rodape .marca-empilhada .rod-mono { height: 88px; } html body .rodape .marca-empilhada .rod-nome { height: 38px; } }
/* 22:54: nome do rodapé sempre claro no fundo escuro */
html body .rodape .marca-empilhada .rod-nome { filter: brightness(0) invert(93%) sepia(14%) !important; }

/* Retomada 23:34 — Gui 22:52:12: espaço frete → Descrição = espaço "Comprar pelo WhatsApp" → frete (24px medidos), computador e celular */
html body .pdp-vp .pdp-info > .pdp-abas { margin-top: 24px !important; }
/* Gui 22:55:58: banner Queridinhos na mesma largura da fileira de produtos (o carrossel .ev-car sai 28px de cada lado a partir de 901px) */
@media (min-width: 901px) { html body .ev-queridinhos .ev-q-banner { margin-left: -28px; margin-right: -28px; } }

/* 2026-11-05 (pedido Gui): grade das colecoes na largura padrao Queridinhos (1360px) - substitui o ajuste de 04/11 que estreitava os cards */
@media (min-width: 901px) {
  html body .ev-secao .ev-grade { margin-left: -28px; margin-right: -28px; column-gap: 20px; }
}

/* frete PDP 2026-11-05: rotulo "Envio a domicilio" removido + paddings padronizados (mesma especificidade das regras .pdp-vp acima, vence por ordem) */
html body .pdp-vp .frete-calc { padding: 20px !important; }
html body .pdp-vp .frete-calc label { margin-bottom: 12px; }
html body .pdp-vp .frete-calc > div:first-of-type { gap: 10px; }
html body .pdp-vp #frete-res .frete-ref { margin: 14px 0 10px; }
html body .pdp-vp .frete-nota { margin-top: 14px; }

/* home mobile 2026-11-05: colecoes e banners na largura da grade referencia (12px das bordas); hero e news seguem full */
@media (max-width: 900px) {
  html body .ev-secao { padding-left: 16px; padding-right: 16px; }
  html body .ev-secao .ev-grade { margin-left: 0; margin-right: 0; }
}

/* 2026-11-05 faixa do grupo colada no footer (somente home) */
html body.pg-home .pre-rodape { margin-top: 0 !important; }
html body.pg-home #app { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body.pg-home .rodape { margin-top: 0 !important; }

/* 2026-11-05 banners responsivos sem corte: altura proporcional a arte (Queridinhos + faixa do grupo) */
html body .ev-q-banner { height: auto !important; min-height: 0 !important; background-size: cover; background-position: center; }
html body .ev-convite-grupo { height: auto; min-height: 0; background-size: cover; background-position: center; }
html body .ev-q-banner h3 { font-size: clamp(26px, 3.4vw, 54px); line-height: 1; margin-bottom: .2em; }
html body .ev-q-banner p { font-size: clamp(13px, 1.15vw, 16px); }
html body .ev-secao .ev-convite-grupo h2, html body .ev-insta .ev-convite-grupo h2 { font-size: clamp(26px, 3.4vw, 54px) !important; }
html body .ev-convite-grupo p { font-size: clamp(13px, 1.15vw, 16px); }
@media (min-width: 901px) {
  html body .ev-q-banner { aspect-ratio: 2560/595; }
  html body .ev-q-banner > div { max-width: 38%; padding: 0 0 0 clamp(24px, 3vw, 56px); }
  html body .ev-q-banner h3 { font-size: clamp(26px, 2.8vw, 46px); }
  html body .ev-convite-grupo { aspect-ratio: 2560/680; }
}
@media (max-width: 900px) {
  html body .ev-q-banner { aspect-ratio: 1432/880; }
  html body .ev-q-banner > div { max-width: 55%; padding: 16px; }
  html body .ev-q-banner h3 { font-size: clamp(22px, 6vw, 30px); }
  html body .ev-convite-grupo { aspect-ratio: 1432/1200; }
  html body .ev-secao .ev-convite-grupo h2, html body .ev-insta .ev-convite-grupo h2 { font-size: clamp(22px, 6vw, 30px) !important; }
}

/* 2026-11-05 resp2: mobile q-banner, texto nunca passa de 40% (bandeja da arte comeca ~44%) */
@media (max-width: 900px) {
  html body .ev-q-banner > div { max-width: 40% !important; box-sizing: border-box; }
  html body .ev-q-banner > div > * { max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; word-break: normal; white-space: normal; }
}

/* 2026-11-05 resp3: titulo Queridinhos nunca quebra no meio da palavra */
@media (max-width: 900px) {
  html body .ev-q-banner h3 { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; font-size: clamp(18px, 5.6vw, 26px) !important; }
}

/* 2026-11-05 resp4: subtitulo Destaques volta a 2 linhas com padding 16px (so mobile; desktop intacto).
   <br> some no mobile (a 1a linha forcada de 53 car. nao cabe em 328px a >=11px); texto flui/balanceia em 2 linhas. */
@media (max-width: 768px) {
  html body .ev-titulo.centro p { font-size: min(11.5px, 3.2vw); width: 100%; max-width: none; box-sizing: border-box; text-wrap: balance; }
  html body .ev-titulo.centro p br { display: none; }
}

/* 2026-11-05 resp5: mobile q-banner full-width (sangra o padding 16px da secao) + texto centralizado na vertical */
@media (max-width: 900px) {
  html body .ev-secao.ev-queridinhos .ev-q-banner { margin-left: -16px !important; margin-right: -16px !important; border-radius: 0 !important; align-items: center !important; }
  html body .ev-q-banner { align-items: center !important; }
  html body .ev-q-banner > div { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* 2026-11-05 resp6: banner do grupo (texto maior + respiro vertical) e legendas dos icones de beneficios */
html body .ev-secao .ev-convite-grupo h2, html body .ev-insta .ev-convite-grupo h2 { font-size: clamp(30px, 3.8vw, 60px) !important; margin-bottom: 14px; }
html body .ev-convite-grupo p { font-size: clamp(14px, 1.25vw, 18px); margin-bottom: 28px; }
@media (max-width: 900px) {
  html body .ev-secao .ev-convite-grupo h2, html body .ev-insta .ev-convite-grupo h2 { font-size: clamp(24px, 6.8vw, 32px) !important; margin-bottom: 14px; }
  html body .ev-convite-grupo p { font-size: clamp(14px, 3.7vw, 16px); margin-bottom: 26px; }
}
html body .ev-icones div { font-size: 15px; }

/* 2026-11-05 resp7: banner Queridinhos (texto maior + distribuicao vertical; so .ev-q-banner) */
html body .ev-q-banner h3 { font-size: clamp(30px, 3.2vw, 52px); margin-bottom: 12px; }
html body .ev-q-banner p { font-size: clamp(14px, 1.25vw, 18px); margin-bottom: 26px; }
@media (max-width: 900px) {
  html body .ev-q-banner h3 { font-size: clamp(19px, 6vw, 24px) !important; margin-bottom: 12px; white-space: nowrap; }
  html body .ev-q-banner p { font-size: clamp(14px, 3.7vw, 16px); margin-bottom: 24px; }
}

/* resp8: +30% espaço banner Queridinhos -> grade */
html body .ev-q-banner { margin-bottom: 36px; }
@media (max-width: 900px) { html body .ev-q-banner { margin-bottom: 26px; } }

/* 2026-11-05 q2: Queridinhos - titulo +25% e marrom da marca (#4A2C1F, igual aos botoes COMPRAR); CTA marrom; subtitulo escuro (o fundo e madeira clara);
   scrim escuro antigo (video.css ::before) trocado por veu branco bem sutil a esquerda, so atras do texto (pecas a partir de ~44% ficam livres) */
html body .ev-q-banner::before { background: linear-gradient(90deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .16) 32%, rgba(255, 255, 255, 0) 52%) !important; }
html body .ev-q-banner h3 { font-size: clamp(37px, 4vw, 65px) !important; color: #4A2C1F !important; }
html body .ev-q-banner p { color: #4A3226 !important; opacity: 1 !important; }
html body .ev-q-banner span { color: #4A2C1F !important; text-decoration-color: #4A2C1F !important; font-weight: 600; }
@media (max-width: 900px) {
  html body .ev-q-banner::before { background: linear-gradient(90deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .18) 34%, rgba(255, 255, 255, 0) 50%) !important; }
  html body .ev-q-banner h3 { font-size: clamp(24px, 7.5vw, 30px) !important; white-space: nowrap; }
}

/* 2026-11-05 q3: subtitulo do banner Queridinhos um passo mais fino (400->300) e 10% menor (so o <p>; titulo e CTA intactos) */
html body .ev-q-banner p { font-size: clamp(12.6px, 1.125vw, 16.2px) !important; font-weight: 300 !important; }
@media (max-width: 900px) {
  html body .ev-q-banner p { font-size: clamp(12.6px, 3.33vw, 14.4px) !important; font-weight: 300 !important; }
}

/* 2026-11-05 q4: paragrafo da faixa "Grupo de Novidades" igual ao subtitulo do Queridinhos: peso 400->300 e 10% menor (so o <p>; titulo e botao intactos) */
html body .ev-convite-grupo p { font-size: clamp(12.6px, 1.125vw, 16.2px) !important; font-weight: 300 !important; }
@media (max-width: 900px) {
  html body .ev-convite-grupo p { font-size: clamp(12.6px, 3.33vw, 14.4px) !important; font-weight: 300 !important; }
}

/* 2026-11-05 cart1: icones na gaveta da sacola + efeito ao ganhar frete gratis */
html body .gaveta-topo h3 { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
html body .gaveta-topo h3 .ic-sacola-t { width: 24px !important; height: 24px !important; flex: none !important; color: #4A2C1F !important; }
html body .resumo .falta.ganhou { display: flex !important; align-items: center !important; gap: 8px !important; position: relative !important; overflow: hidden !important; color: #4A2C1F !important; animation: cart1-sobe .6s cubic-bezier(.2,.7,.2,1) both !important; }
html body .resumo .falta.ganhou .ic-frete-ok { width: 20px !important; height: 20px !important; flex: none !important; color: #9A7B3F !important; animation: cart1-pop .7s cubic-bezier(.2,.9,.3,1.3) .15s both !important; }
html body .resumo .falta.ganhou::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(105deg, transparent 30%, rgba(214,182,119,.45) 50%, transparent 70%) !important; transform: translateX(-120%) !important; animation: cart1-brilho 1.1s ease-out .35s 1 forwards !important; pointer-events: none !important; }
@keyframes cart1-sobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cart1-pop { 0% { opacity: 0; transform: scale(.4) translateX(-6px); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes cart1-brilho { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  html body .resumo .falta.ganhou, html body .resumo .falta.ganhou .ic-frete-ok { animation: none !important; }
  html body .resumo .falta.ganhou::after { display: none !important; }
}
html body .resumo .falta { display: flex !important; align-items: center !important; gap: 8px !important; }
html body .resumo .falta .ic-frete-falta { width: 16px !important; height: 16px !important; flex: none !important; opacity: .75 !important; }

/* 2026-11-05 capas colecoes: circulo centralizado + nome cacau abaixo (aprovado pelo Gui) */
html body .mega-destaque { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; }
html body .mega-destaque img { width: 190px !important; height: 190px !important; border-radius: 50% !important; object-fit: cover !important; box-shadow: 0 6px 18px rgba(74,44,31,.25) !important; }
html body .mega-destaque b { position: static !important; color: #4A2C1F !important; text-shadow: none !important; font: 400 20px var(--serif) !important; }

/* rascunho 05/11 (Gui): secao Colecoes na home, abaixo de Novidades - circulos com capa e nome cacau embaixo, fundo transparente (sem cartao) */
html body .ev-colecoes .ev-cols { display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 -28px; gap:28px 20px; background:transparent; }
html body .ev-colecoes .ev-col-item { display:flex; flex-direction:column; align-items:center; gap:12px; width:205px; background:transparent; text-decoration:none; }
html body .ev-colecoes .ev-col-item img { width:205px; height:205px; border-radius:50%; object-fit:cover; display:block; background:transparent; }
html body .ev-colecoes .ev-col-item b { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:20px; color:#4A2C1F; text-align:center; }
@media (max-width:720px) {
  html body .ev-colecoes .ev-cols { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:16px; margin:0; }
  html body .ev-colecoes .ev-col-item { width:160px; flex:0 0 auto; }
  html body .ev-colecoes .ev-col-item img { width:160px; height:160px; }
  html body .ev-colecoes .ev-col-item b { font-size:16px; }
}

/* rascunho 05/11 (Gui 13:36): remover a faixa branca do menu de categorias no desktop e o aviso Demonstracao/Saiba mais ao lado direito, mantendo cabecalho bege, icones e menu movel */
html body .topo-linha > #nav { display:none !important; }
html body .demo-faixa { display:none !important; }

/* rascunho 05/11 (Gui): Complete o look layout C - foto grande quadrada + miniaturas com check; resumo Seu look intacto */
html body .look-c { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html body .look-destaque img { width: 100%; max-width: 480px; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; display: block; background: var(--areia); }
html body .look-destaque-info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; max-width: 480px; margin-top: 10px; }
html body .look-destaque-info span { font-size: 15px; color: var(--texto); }
html body .look-destaque-info b { font: 600 16px var(--serif); color: var(--grafite); white-space: nowrap; }
html body .look-minis { display: flex; gap: 8px; flex-wrap: wrap; }
html body .look-mini { position: relative; width: 88px; cursor: pointer; }
html body .look-mini img { width: 88px; height: 88px; object-fit: cover; border-radius: 6px; display: block; border: 2px solid transparent; background: var(--areia); }
html body .look-mini.ativa img { border-color: #4A2C1F; }
html body .look-mini.off img { opacity: .55; }
html body .look-mini input { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; accent-color: #4A2C1F; z-index: 1; cursor: pointer; }
html body .look-mini.fixa input { cursor: default; }
@media (max-width: 720px) {
  html body .look-destaque img, html body .look-destaque-info { max-width: 100%; }
  html body .look-minis { flex-wrap: nowrap; }
  html body .look-mini { width: calc((100% - 24px) / 4); }
  html body .look-mini img { width: 100%; height: auto; aspect-ratio: 1/1; }
}

/* rascunho 05/11 (Gui 13:44): faixa de beneficios maior e padronizada, ocupando a mesma extensao horizontal das demais dobras */
html body .ev-icones { justify-content: space-between !important; gap: 24px !important; padding: 32px 0 !important; }
html body .ev-icones > div { display: flex; flex: 1 1 0; min-width: 0; max-width: none; flex-direction: column; align-items: center; gap: 10px; font-size: 17px; text-align: center; }
html body .ev-icones svg { width: 34px; height: 34px; }
@media (max-width: 720px) {
  html body .ev-icones { row-gap: 28px !important; column-gap: 20px !important; }
  html body .ev-icones > div { font-size: 16px; gap: 8px; }
  html body .ev-icones svg { width: 30px; height: 30px; }
}

/* rascunho 05/11 (Gui 13:58): beneficios de ponta a ponta com icone centralizado sobre o texto - grupos distribuidos com gaps iguais, primeiro rente a esquerda, ultimo rente a direita */
@media (min-width: 721px) {
  html body .ev-icones { justify-content: space-between; }
  html body .ev-icones > div { flex: 0 0 auto; align-items: center; text-align: center; }
}

/* rascunho 05/11 (Gui 14:10): Complete o look desktop - par de colunas centralizado na secao, sem vazio central; mobile inalterado */
@media (min-width: 821px) {
  html body .look { grid-template-columns: auto 300px; justify-content: center; column-gap: clamp(40px, 5vw, 72px); }
}

/* rascunho 05/11 (look3): card da somatoria do mesmo tamanho da coluna esquerda (480px x altura da .look-c); mobile inalterado */
@media (min-width: 821px) {
  html body .look { grid-template-columns: minmax(0, 480px) minmax(0, 480px); justify-content: center; align-items: stretch; }
  html body aside.look-resumo { width: 100%; max-width: none; height: 100%; align-self: stretch; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
}

/* rascunho 05/11 (Gui 14:21): header desktop sem a linha vazia da nav removida - respiro abaixo do logo igual ao de cima */
@media (min-width: 901px) {
  :root { --topo-h: 78px; }
  html body .topo-wrap header.topo .topo-linha, html body.rolou .topo-wrap header.topo .topo-linha { grid-template-rows: 78px; }
}

/* rascunho 05/11 (Gui 14:24): card Seu look desktop escalonado ~1.3x - fontes, miniaturas e espacamentos proporcionais ao card maior; mobile inalterado */
@media (min-width: 821px) {
  html body aside.look-resumo { padding: 28px; gap: 18px; }
  html body aside.look-resumo .look-rotulo { font-size: 16px; }
  html body aside.look-resumo .look-fotos img { width: 64px; height: 64px; margin-left: -16px; border-width: 3px; }
  html body aside.look-resumo .look-fotos img:first-child { margin-left: 0; }
  html body aside.look-resumo .look-lista { gap: 12px; font-size: 17px; }
  html body aside.look-resumo .look-lista li { gap: 14px; font-size: 17px; }
  html body aside.look-resumo .look-total { padding-top: 18px; }
  html body aside.look-resumo .look-total span { font-size: 15px; }
  html body aside.look-resumo .look-total b { font-size: 26px; }
  html body aside.look-resumo .look-parc { font-size: 15px; margin-top: -8px; }
  html body aside.look-resumo .look-frete { font-size: 15px; padding: 12px 14px; }
  html body aside.look-resumo .btn { height: 54px; font-size: 16px; padding: 0 36px; }
}

/* rascunho 05/11 (Gui 14:31): nomes do Seu look menores, clicaveis e popup de produto no hover (desktop) */
html body aside.look-resumo .look-lista li > span { font-size: 15.5px; }
html body aside.look-resumo .look-lista li > span a { color: inherit; font: inherit; text-decoration: none; }
html body aside.look-resumo .look-lista li > span a:hover, html body aside.look-resumo .look-lista li > span a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.look-pop { display: none; }
@media (min-width: 821px) and (pointer: fine) {
  html body .look-pop { display: flex; flex-direction: column; gap: 6px; position: fixed; z-index: 9999; width: 190px; padding: 10px; background: #fff; color: inherit; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); pointer-events: none; font-size: 14px; line-height: 1.3; }
  html body .look-pop img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
  html body .look-pop b { font-weight: 600; }
}

/* rascunho 05/11 (Gui 14:36): icones pix e cartao nas linhas de pagamento do Seu look, iguais ao resto do site */
html body aside.look-resumo .look-parc > span { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
html body aside.look-resumo .look-parc .ic-pix { width: 18px; height: 18px; flex: none; display: block; margin: 0; object-fit: contain; }
html body aside.look-resumo .look-parc .ic-cartao { width: 18px; height: 18px; flex: none; display: block; margin: 0; color: var(--r-cacau); fill: none !important; stroke: currentColor !important; stroke-width: 1.7; }

/* ===== TEMA CACAU ESCURO: barrinha + header + footer (todo paleta) ===== */
/* aprovado pelo dono: header cacau, footer claro, barrinha dourada; hero/banners/PDP intactos */
:root { --cacau: #2A1A13; --creme: #E9DCC9; --r-creme: #F3E5CF; --dourado: #D6B677; --ouro-claro: #E6CC9A; }

/* --- barrinha de anuncio: dourado + texto cacau --- */
html body .avisos, html body .topo-wrap .avisos, html body.rolou .topo-wrap .avisos, html body:not(.home) .topo-wrap .avisos {
  background: var(--tema-barrinha-bg, #D6B677) !important; color: var(--tema-barrinha-txt, #2A1A13) !important; border-bottom: 1px solid rgba(42, 26, 19, .15) !important;
}
html body .avisos .av-i, html body .avisos a, html body .avisos #aviso, html body .avisos #aviso2 { color: var(--tema-barrinha-txt, #2A1A13); }
html body .avisos .sep, html body .avisos .sep-i { color: var(--tema-barrinha-txt, #2A1A13); background: var(--tema-barrinha-txt, #2A1A13); }

/* --- header cacau (linha do logo + linha do menu) --- */
html body .topo-wrap { background: var(--tema-header-bg, #2A1A13) !important; }
html body .topo-wrap .topo, html body.home .topo-wrap .topo, html body.home.rolou .topo-wrap .topo,
html body.home:not(.rolou) .topo-wrap .topo, html body.home:not(.rolou) .topo:not(:hover):not(.mega-on),
html body.home:not(.rolou) .topo-wrap .topo:hover, html body.home:not(.rolou) .topo-wrap .topo.mega-on,
html body:not(.home) .topo-wrap .topo, html body.rolou .topo-wrap .topo {
  background: var(--tema-header-bg, #2A1A13) !important; border-bottom: 1px solid rgba(243, 229, 207, .15) !important;
  border-bottom-color: color-mix(in srgb, var(--tema-header-txt, #F3E5CF) 15%, transparent) !important;
}
/* logo Santelli (img): troca para a versao creme ja existente no markup */
html body .topo .marca-logo .logo-cacau { display: var(--tema-logo-cacau, none) !important; }
html body .topo .marca-logo .logo-creme { display: var(--tema-logo-creme, block) !important; height: 46px !important; width: auto !important; position: static !important; opacity: 1 !important; filter: none !important; }
html body.home:not(.rolou) .topo .marca-logo .logo-creme, html body.home .topo .marca-logo .logo-creme { filter: none !important; }
@media (max-width: 900px) { html body .topo .marca-logo .logo-creme { height: 32px !important; } }
/* icones (svg stroke currentColor) + hamburguer */
html body .topo .icone, html body.home .topo .icone, html body .topo .marca, html body.home .topo .marca, html body.home .topo .cep { color: var(--tema-header-txt, #F3E5CF) !important; }
html body .topo .icone:hover, html body.home .topo .icone:hover { background: rgba(243, 229, 207, .14) !important; }
html body .topo .contador { background: var(--dourado); color: var(--cacau); }
/* linha do menu: antes branca, agora cacau (inclui o sombreado de largura total) */
html body .topo .nav { background: var(--tema-header-bg, #2A1A13); box-shadow: 0 0 0 100vmax var(--tema-header-bg, #2A1A13); border-top: 1px solid rgba(243, 229, 207, .15); border-top-color: color-mix(in srgb, var(--tema-header-txt, #F3E5CF) 15%, transparent); }
html body .topo .nav a, html body.home .topo .nav a, html body.home:not(.rolou) .topo:not(:hover):not(.mega-on) .nav a { color: var(--tema-header-txt, #F3E5CF) !important; }
html body .topo .nav a:hover, html body .topo .nav a.ativo { border-color: var(--dourado); }
html body .topo .nav a.sale, html body .topo .nav .nav-bf, html body.home .topo .nav .nav-bf, html body .topo .nav .nav-bf *,
html body.home:not(.rolou) .topo-wrap .topo:not(:hover):not(.mega-on) .nav a.nav-bf, html body.home .topo-wrap .topo .nav a.nav-bf { color: var(--ouro-claro) !important; }
html body .topo .nav .nav-bf::before { background: var(--dourado); }

/* --- footer claro --- */
html body .rodape { background: var(--r-creme); color: var(--tema-footer-txt, #2A1A13); border-top: 1px solid rgba(42, 26, 19, .15); }
html body .rodape h2.rodape-tit, html body .rodape h4 { color: var(--tema-footer-txt, #2A1A13); }
html body .rodape a, html body .rodape li { color: var(--tema-footer-txt, #2A1A13); }
html body .rodape a:hover { color: var(--tema-footer-txt, #2A1A13); text-decoration: underline; text-underline-offset: 3px; }
html body .rodape p, html body .rodape li:not(:has(a)), html body .rodape .rodape-base, html body .rodape .rodape-base span { color: rgba(42, 26, 19, .8); }
html body .rodape p, html body .rodape li:not(:has(a)), html body .rodape .rodape-base, html body .rodape .rodape-base span { color: color-mix(in srgb, var(--tema-footer-txt, #2A1A13) 80%, transparent); }
html body .rodape .rodape-base a { color: rgba(42, 26, 19, .8); }
html body .rodape .rodape-base a { color: color-mix(in srgb, var(--tema-footer-txt, #2A1A13) 80%, transparent); }
html body .rodape .rodape-base { border-top: 1px solid rgba(42, 26, 19, .15); }
html body .rodape .redes a { color: var(--tema-footer-txt, #2A1A13); border-color: rgba(42, 26, 19, .25); }
html body .rodape .redes a:hover { color: var(--tema-footer-txt, #2A1A13); border-color: var(--tema-footer-txt, #2A1A13); }
/* logo SA do rodape: imgs claras (creme) para fundo escuro -> arte cacau como fundo, img original escondida (so estes 2 imgs) */
html body .rodape .marca-empilhada .rod-mono { background: var(--tema-rod-mono, url(/brand-oficial/monograma-cacau.svg)) center / contain no-repeat; object-fit: none; object-position: 9999px 0; }
html body .rodape .marca-empilhada .rod-nome { background: var(--tema-rod-nome, url(/brand-oficial/nome-cacau.svg)) center / contain no-repeat; object-fit: none; object-position: 9999px 0; filter: none !important; }
/* nome do rodape no footer escuro: server.js da o mesmo ETag (tamanho+mtime) a nome-creme.svg e nome-cacau.svg e o cache brotli serve o mesmo conteudo nas 2 URLs (sai cacau);
   o SVG creme vira so a forma (mascara) e a cor creme vem de uma sombra interna que so e opaca com fundo do footer escuro (mesma regra lumHex < 110 do servidor); sem --tema-rod-nome = sem mascara e sombra transparente (cacau intacto) */
@supports ((mask-image: none) or (-webkit-mask-image: none)) and (color: rgb(from red r g b)) {
  html body .rodape .marca-empilhada .rod-nome { -webkit-mask: var(--tema-rod-nome, none) center / contain no-repeat; mask: var(--tema-rod-nome, none) center / contain no-repeat; box-shadow: inset 0 0 0 999px rgb(from var(--tema-footer-bg, #D6B677) 243 229 207 / clamp(0, (110 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000, 1)); }
}
/* .pagamentos img (bandeiras): intocadas */

/* ===== TEMA3: footer = dourado da barrinha; logo do header branca ===== */
html body footer.rodape, html body .rodape { background: var(--tema-footer-bg, #D6B677); border-top: 1px solid rgba(42, 26, 19, .25); border-top-color: color-mix(in srgb, var(--tema-footer-txt, #2A1A13) 25%, transparent); }
html body footer.rodape .rodape-base, html body .rodape .rodape-base { background: transparent; border-top: 1px solid rgba(42, 26, 19, .25); }
html body .rodape a:hover, html body .rodape .rodape-base a:hover { color: var(--tema-footer-txt, #2A1A13); text-decoration: underline; text-decoration-color: var(--tema-footer-txt, #2A1A13); text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body .rodape .redes a { border-color: rgba(42, 26, 19, .25); }
html body .rodape .redes a:hover { border-color: var(--tema-footer-txt, #2A1A13); background: rgba(42, 26, 19, .08); }

/* ===== MAPA DE TEMAS (so comentario, sem efeito): estrelas de avaliacao =====
   tema ESCURO -> estrelas var(--r-ouro-esc)  (inline do demo-avaliacoes.js: fallback #9a7533; valor efetivo no site: #8E6C33, definido em :root)
   tema CLARO  -> estrelas var(--dourado)     (#D6B677)
   Regra do TEMA4 (.demo-av .demo-av-est i { color: var(--dourado) }) removida a pedido do dono; reaplicar so no tema claro. ===== */

/* ===== TEMA5 (REVERTIDO no TEMA6): textos claros do footer removidos a pedido do dono; footer volta a escrita escura (cacau). Bloco antigo substituido por este. ===== */
html body footer.rodape h2.rodape-tit, html body footer.rodape h4, html body footer.rodape a, html body footer.rodape li:has(a) { color: var(--tema-footer-txt, #2A1A13); }
html body footer.rodape p, html body footer.rodape li:not(:has(a)), html body footer.rodape .rodape-base, html body footer.rodape .rodape-base span, html body footer.rodape .rodape-base a { color: rgba(42, 26, 19, .8); }
html body footer.rodape p, html body footer.rodape li:not(:has(a)), html body footer.rodape .rodape-base, html body footer.rodape .rodape-base span, html body footer.rodape .rodape-base a { color: color-mix(in srgb, var(--tema-footer-txt, #2A1A13) 80%, transparent); }
html body footer.rodape a:hover, html body footer.rodape .rodape-base a:hover { color: var(--tema-footer-txt, #2A1A13); text-decoration: underline; text-decoration-style: solid; text-decoration-color: var(--tema-footer-txt, #2A1A13); text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body footer.rodape .rodape-base, html body .rodape .rodape-base { border-top: 1px solid rgba(42, 26, 19, .25); }
html body footer.rodape, html body .rodape { border-top-color: rgba(42, 26, 19, .25); }
/* icones sociais: cacau mantido */
html body footer.rodape .redes a, html body footer.rodape .redes a:hover { color: var(--tema-footer-txt, #2A1A13); text-decoration: none; }

/* ===== TEMA6: textura cetim/jacquard discreta no footer (so CSS, camadas acima da cor var(--dourado)) ===== */
html body footer.rodape, html body .rodape {
  background-color: var(--tema-footer-bg, #D6B677);
  background-image:
    linear-gradient(rgba(42, 26, 19, 0) 70%, rgba(42, 26, 19, .06)),
    radial-gradient(ellipse 120% 90% at 50% -20%, rgba(255, 255, 255, .14), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 7px);
}
/* TEMA8: faixa de baixo SEM fundo proprio -> herda cor+textura do footer (tecido unico, sem emenda); so divisor e texto */
html body footer.rodape .rodape-base, html body .rodape .rodape-base {
  background: transparent;
}
/* TEMA8: overscroll (fim/topo da pagina) continua dourado; body mantem seu proprio fundo */
html { background: var(--tema-footer-bg, #D6B677); }
/* TEMA8: o body tinha padding-bottom (70px / barra de compra) pintado de branco abaixo do footer; o proprio .rodape ja reserva essa zona segura (padding-bottom !important acima) -> zera so no mobile */
@media (max-width: 820px) {
  html body:has(.rodape), html body.barra-on:has(.rodape) { padding-bottom: 0; }
}

/* ===== TEMA (vars): bordas do footer e estrelas seguem o tema; fallback = literais cacau ===== */
html body footer.rodape .rodape-base, html body .rodape .rodape-base, html body footer.rodape, html body .rodape { border-top-color: color-mix(in srgb, var(--tema-footer-txt, #2A1A13) 25%, transparent); }
html body .rodape .redes a, html body footer.rodape .redes a { border-color: color-mix(in srgb, var(--tema-footer-txt, #2A1A13) 25%, transparent); }
html body .rodape .redes a:hover { border-color: var(--tema-footer-txt, #2A1A13); background: color-mix(in srgb, var(--tema-footer-txt, #2A1A13) 8%, transparent); }
html body .demo-av .demo-av-est i { color: var(--tema-estrelas, #8E6C33) !important; }

/* rascunho 05/11 (look7): nome do Seu look termina na borda direita da ultima miniatura (quebra linha, sem reticencias); valor da direita maior. --look-n = nº de pecas (app.js) */
html body aside.look-resumo .look-lista { --look-foto: 54px; --look-passo: 42px; }
html body aside.look-resumo .look-lista li { align-items: flex-start; }
html body aside.look-resumo .look-lista li > span {
  flex: 0 1 auto; width: auto; max-width: max(150px, calc(var(--look-foto) + (var(--look-n, 2) - 1) * var(--look-passo)));
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
}
html body aside.look-resumo .look-lista li > b { margin-left: auto; font-size: 18px; font-weight: 600; color: var(--r-cacau); line-height: 1.25; }
@media (min-width: 821px) {
  html body aside.look-resumo .look-lista { --look-foto: 64px; --look-passo: 48px; }
}

/* rascunho 05/11 (dono): titulo "Seu look" do card de resumo um pouquinho maior (~15%); mobile 11->12.5px, desktop 16->18px */
html body aside.look-resumo .look-rotulo { font-size: 12.5px; }
@media (min-width: 821px) {
  html body aside.look-resumo .look-rotulo { font-size: 18px; }
}

/* rascunho 05/11 (look9): card direito - nomes em 1 linha (reverte look7), valor 17px; legenda esquerda - nome limitado a largura da fileira de miniaturas, valor maior; icone de email na newsletter */
html body aside.look-resumo .look-lista li { align-items: center; }
html body aside.look-resumo .look-lista li > span { flex: 1 1 auto; min-width: 0; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
html body aside.look-resumo .look-lista li > b { flex: none; font-size: 17px; }
html body .look-destaque-info { align-items: flex-start; }
html body .look-destaque-info span { flex: 0 1 auto; min-width: 0; max-width: calc(var(--look-n, 4) * 96px - 8px); overflow-wrap: anywhere; }
html body .look-destaque-info b { flex: none; margin-left: auto; font: 600 17px/1.3 var(--serif); color: var(--r-cacau); }
@media (min-width: 821px) { html body .look-destaque-info b { font-size: 18px; } }
@media (max-width: 820px) { html body .look-destaque-info span { max-width: calc(var(--look-n, 4) * (100% - 24px) / 4 + (var(--look-n, 4) - 1) * 8px); } }
html body .newsletter h3 { display: flex; align-items: center; gap: 10px; }
html body .newsletter h3 .news-ic { width: 22px; height: 22px; flex: none; color: var(--r-cacau); }

/* Gui 05/11 (dono): caminhao na faixa "Este look tem frete gratis" (so na variante conquistada) */
html body aside.look-resumo .look-frete:has(.ic-frete-look) { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
html body aside.look-resumo .look-frete .ic-frete-look { width: 19px; height: 19px; flex: none; color: inherit; }

/* Gui 05/11 (look11): icone na mesma cor do texto (var(--champanhe-esc), a do <b>), maior; sem fundo cinza na faixa de frete e no container da secao Seu look */
html body aside.look-resumo .look-frete .ic-frete-look { width: 23px; height: 23px; color: var(--champanhe-esc); }
html body .look { background: transparent; }

/* Gui 05/11 (banners17): icone de email da newsletter maior (22px -> 29px desktop, 26px mobile), centralizado com o h3 */
html body .newsletter h3 .news-ic { width: 29px; height: 29px; }
@media (max-width: 820px) { html body .newsletter h3 .news-ic { width: 26px; height: 26px; } }

/* Gui 05/11 (banners19, dono): card Seu look em cinza (--areia), faixa de frete dentro do card em branco; secao .look segue transparente */
html body aside.look-resumo { background: var(--areia); }
html body aside.look-resumo .look-frete { background: #FFFFFF; }

/* Gui 05/11 (banners20, dono): coluna esquerda do Seu look (.look-c) com o fundo do card de frete (--r-faixa), card gemeo do direito: mesmo radius (--pc-r), padding 28px desktop / 18px mobile; foto, legenda e miniaturas dentro, na largura interna */
html body .look-c { background: var(--r-faixa); border-radius: var(--pc-r); padding: 18px; box-sizing: border-box; width: 100%; }
@media (min-width: 821px) { html body .look-c { padding: 28px; } }

/* Gui 05/11 (banners21, dono): nomes do card Seu look 15.5px -> 14.5px (1 linha, ellipsis); miniaturas ocupam 100% da largura da foto grande (4 colunas iguais, gap 8px, quadradas); legenda com max-width 100% da fileira */
html body aside.look-resumo .look-lista li > span { font-size: 14.5px; }
html body .look-minis { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 480px; box-sizing: border-box; }
html body .look-mini { flex: 1 1 0; width: auto; min-width: 0; }
html body .look-mini img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
html body .look-destaque-info span { max-width: 100%; }
@media (max-width: 820px) { html body .look-destaque-info span { max-width: 100%; } }
@media (max-width: 720px) { html body .look-minis { max-width: 100%; } }

/* ===== look17 · header herda o tema em TODOS os estados (rolou+hover/mega-on, .topo-wrap, busca/CEP abertos, fim de scroll) ===== */
/* causa: style.css (brief 16, !important) pinta .topo-wrap e .topo:hover/.mega-on rolados de bege com especificidade maior que os overrides anteriores */
html body.rolou .topo-wrap, html body.home.rolou .topo-wrap, html body:not(.home) .topo-wrap, html body .topo-wrap, html body .topo-wrap:hover,
html body .topo, html body.home .topo, html body.rolou .topo, html body.home.rolou .topo,
html body .topo:hover, html body .topo.mega-on, html body.home .topo:hover, html body.home .topo.mega-on,
html body.rolou .topo-wrap .topo, html body.rolou .topo-wrap .topo:hover, html body.rolou .topo-wrap .topo.mega-on,
html body.home.rolou .topo-wrap .topo, html body.home.rolou .topo-wrap .topo:hover, html body.home.rolou .topo-wrap .topo.mega-on,
html body.home.rolou .topo-wrap header.topo:hover, html body.home.rolou .topo-wrap header.topo.mega-on, html body.rolou .topo-wrap header.topo:hover, html body.rolou .topo-wrap header.topo.mega-on,
html body.home:not(.rolou) .topo-wrap .topo:hover, html body.home:not(.rolou) .topo-wrap .topo.mega-on {
  background: var(--tema-header-bg, #2A1A13) !important; background-color: var(--tema-header-bg, #2A1A13) !important; opacity: 1 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.rolou .topo-wrap .topo .marca, html body.rolou .topo-wrap .topo .icone, html body.rolou .topo-wrap .topo .nav a, html body.rolou .topo-wrap .topo .cep,
html body .topo:hover .marca, html body .topo:hover .icone, html body .topo.mega-on .marca, html body .topo.mega-on .icone, html body .topo.mega-on .cep,
html body.home .topo.mega-on .nav a, html body.home .topo:hover .nav a, html body.rolou .topo-wrap .topo:hover .nav a, html body.rolou .topo-wrap .topo.mega-on .nav a { color: var(--tema-header-txt, #F3E5CF) !important; text-shadow: none; }
html body .topo .nav a.nav-bf, html body.rolou .topo-wrap .topo .nav a.nav-bf, html body .topo:hover .nav a.nav-bf, html body .topo.mega-on .nav a.nav-bf { color: var(--ouro-claro) !important; }
/* logo: sempre a versao do tema, em todos os estados */
html body .topo .marca-logo .logo-cacau, html body.home:not(.rolou) .topo:hover .marca-logo .logo-cacau, html body.home:not(.rolou) .topo.mega-on .marca-logo .logo-cacau { display: var(--tema-logo-cacau, none) !important; }
html body .topo .marca-logo .logo-creme, html body.home:not(.rolou) .topo:hover .marca-logo .logo-creme, html body.home:not(.rolou) .topo.mega-on .marca-logo .logo-creme { display: var(--tema-logo-creme, block) !important; filter: none !important; }
/* barras de busca e CEP (form dentro do header): fundo do tema; input legivel (texto do tema sobre fundo do tema) */
html body .topo .busca-aberta, html body .topo-wrap .busca-aberta, html body .topo .cep-aberta {
  background: var(--tema-header-bg, #2A1A13) !important; color: var(--tema-header-txt, #F3E5CF) !important;
  border-top: 1px solid rgba(243, 229, 207, .15) !important; border-top-color: color-mix(in srgb, var(--tema-header-txt, #F3E5CF) 15%, transparent) !important;
}
html body .topo .busca-aberta[hidden], html body .topo .cep-aberta[hidden] { display: none !important; }
html body .topo .busca-aberta input, html body .topo .cep-aberta input {
  color: var(--tema-header-txt, #F3E5CF) !important; -webkit-text-fill-color: var(--tema-header-txt, #F3E5CF); caret-color: var(--tema-header-txt, #F3E5CF);
  background: transparent !important; border-bottom-color: var(--tema-header-txt, #F3E5CF) !important;
}
html body .topo .busca-aberta input::placeholder, html body .topo .cep-aberta input::placeholder { color: var(--tema-header-txt, #F3E5CF); opacity: .6; -webkit-text-fill-color: currentColor; }
html body .topo .busca-aberta svg, html body .topo .busca-aberta button:not(.btn), html body .topo .cep-aberta svg, html body .topo .cep-aberta button:not(.btn) { color: var(--tema-header-txt, #F3E5CF) !important; background: transparent; }
html body .topo .busca-aberta input:-webkit-autofill, html body .topo .cep-aberta input:-webkit-autofill { -webkit-text-fill-color: var(--tema-header-txt, #F3E5CF); transition: background-color 9999s; }
html body .topo .cep-erro { color: var(--ouro-claro); }