/* =====================================================================
   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: -40px; margin-right: -40px; 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(12px - var(--gutter)); margin-right: calc(12px - 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: -40px; margin-right: -40px; }
}

/* ===== 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 { margin-left: 0; margin-right: 0; 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 40px de cada lado a partir de 901px) */
@media (min-width: 901px) { html body .ev-queridinhos .ev-q-banner { margin-left: -40px; margin-right: -40px; } }