/* =========================================================================
   CSS DE PRODUCAO · pagina de produto Dinoxx
   -------------------------------------------------------------------------
   ARQUIVO GERADO. Nao edite aqui.

   Fonte: assets/css/sistema.css e assets/css/descricao.css do prototipo
   em ~/Sites/dinoxx-produto-local. Gere de novo com
   `python3 scripts/gerar-css-producao.py`.

   Toda regra esta presa a `.dx-produto`, que e a classe da div que
   embrulha o HTML Block. Nada daqui alcanca o resto da loja: nem o
   carrinho, nem o menu, nem o checkout.
   ========================================================================= */

/* O TEMA MEXE NO TAMANHO DA RAIZ.

   O Woodmart declara `html { font-size: 18px }`. Todo `rem` escrito
   aqui foi medido contra os 16px padrao, entao sem esta linha a pagina
   inteira sai 12,5% maior do que o que foi aprovado na tela. Aconteceu
   na Black November e custou uma rodada de correcao as cegas.

   `:has()` deixa a correcao valer so onde o nosso bloco existe, em vez
   de mexer na raiz do site inteiro. */
:root:has(.dx-produto) { font-size: 100%; }

/* O bloco e um bloco: ocupa a largura do contêiner e nao herda o
   alinhamento central que o tema usa na descricao do produto. */
.dx-produto { text-align: left; }


/* ====== assets/css/sistema.css ====== */

/* =========================================================================
   SISTEMA · página de produto
   -------------------------------------------------------------------------
   DIFERENÇA PARA A BLACK NOVEMBER

   Aquela era uma landing de campanha: preta de ponta a ponta, porque a
   página inteira era nossa e o preto era a identidade da campanha.

   Esta não. Ela mora DENTRO da página de produto do Woodmart, que é
   clara, e começa logo abaixo de um resumo claro com preço e botão. Se
   ela entrasse preta, a emenda apareceria como um corte no meio da
   página.

   Então a base é clara, e o preto entra só onde a dramatização paga:
   a comparação de fumaça e o bloco de selamento. Duas respirações
   escuras numa página clara, não o contrário.
   ========================================================================= */

:root {
  /* ---------- Cor ----------
     O laranja é o da marca. Os cinzas foram escolhidos a partir do
     branco do tema, não de uma paleta genérica, para a emenda com o
     resumo do produto não aparecer. */
  --preto:       #0B0B0A;
  --grafite:     #1A1A18;
  --carvao:      #2E2E2B;
  --inox:        #6E6F6C;
  --inox-claro:  #9A9B98;
  --fio:         #E4E3DF;
  --fio-forte:   #CFCEC9;
  --papel:       #FFFFFF;
  --papel-morno: #F7F6F3;
  --ambar:       #FE5C21;
  --ambar-fundo: #FFF1EB;
  --ouro:        #D99A1E;
  --verde:       #1F9D55;

  /* ---------- Tipografia ----------
     Mesmas duas famílias do resto do trabalho: Archivo em todo título,
     Inter Tight em texto, rótulo e dado. Não existe terceiro caso. */
  --fonte-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fonte-ui:      'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t-d1: clamp(1.9rem, 1.25rem + 2.1vw, 3.1rem);
  --t-d2: clamp(1.5rem, 1.10rem + 1.3vw, 2.2rem);
  --t-d3: clamp(1.15rem, 0.98rem + 0.55vw, 1.45rem);
  --t-corpo:  clamp(0.98rem, 0.94rem + 0.14vw, 1.06rem);
  --t-apoio:  clamp(0.90rem, 0.87rem + 0.10vw, 0.96rem);
  --t-rotulo: 0.76rem;
  --t-micro:  0.72rem;
  --tr-rotulo: 0.12em;

  /* ---------- Espaço ----------
     Escala de 4, para o olho reconhecer ritmo em vez de valores soltos.
     Foi a falta disso que encheu os blocos de hoje de 357 espaçadores
     ajustados na mão. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 40px; --e8: 56px;
  --e9: 72px; --e10: 96px; --e11: 128px;

  --margem: clamp(20px, 5vw, 64px);
  --largura: 1180px;

  --r-pequeno: 8px;
  --r-card:    14px;
  --r-pilula:  999px;

  --d-rapido: 180ms;
  --d-base:   320ms;
  --d-lento:  560ms;
  --c-saida:  cubic-bezier(0.22, 1, 0.36, 1);
  --c-dupla:  cubic-bezier(0.65, 0, 0.35, 1);

  --sombra-card: 0 1px 2px rgba(11,11,10,0.04), 0 8px 24px -12px rgba(11,11,10,0.10);
  --sombra-alta: 0 2px 6px rgba(11,11,10,0.06), 0 20px 48px -20px rgba(11,11,10,0.18);
}

.dx-produto *,.dx-produto *::before,.dx-produto *::after{ box-sizing: border-box; }

/* Controles: declarar o padrão que a gente assume.
   Lição da Black November: o Woodmart estiliza `button` no escopo
   global, e o que a gente nunca declarou é o que ele vence. :where()
   não soma especificidade, então isto empata com os componentes e a
   ordem decide: este arquivo vem antes deles. */
/* `.dx-produto`, nao `body.dx-produto`.

   Com `body.` na frente, o reset virava (0,1,1) e passava a vencer os
   componentes, que sao (0,1,0): o `border: 0` daqui apagava a borda do
   `.dx-botao--fio` e o botao "Calcular" saia como texto solto.

   Sem o `body.`, o reset empata com os componentes e a ordem decide.
   Este arquivo carrega primeiro, entao quem declara ganha. */
.dx-produto :where(button, input, select, textarea, a) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-align: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.dx-produto :where(p, li, h1, h2, h3, h4, h5, h6, figure, blockquote) {
  margin: 0;
  line-height: inherit;
}

.dx-produto,
.dx-produto {
  margin: 0;
  background: var(--papel);
  color: var(--grafite);
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dx-produto img,.dx-produto svg,.dx-produto video{ display: block; max-width: 100%; }

/* [hidden] e so (0,1,0) vindo do navegador, entao qualquer classe nossa
   com `display` o vence e o elemento aparece mesmo escondido. Foi o que
   deixou uma barra bege vazia dentro do simulador de frete. */
.dx-produto [hidden]{ display: none !important; }
.dx-produto .tabular{ font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.dx-produto .so-leitor{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Estrutura ---------- */
.dx-produto .dx-secao{ padding-block: clamp(var(--e8), 6vw, var(--e11)); }
.dx-produto .dx-secao--justa{ padding-block: clamp(var(--e7), 4vw, var(--e9)); }

.dx-produto .dx-env{
  width: min(100% - var(--margem) * 2, var(--largura));
  margin-inline: auto;
}

/* As duas respirações escuras da página. */
.dx-produto .dx-secao--escura{
  background: var(--preto);
  color: #F2F1EE;
}
.dx-produto .dx-secao--escura .dx-titulo{ color: #FFFFFF; }
.dx-produto .dx-secao--escura .dx-apoio{ color: rgba(242,241,238,0.72); }

.dx-produto .dx-secao--morna{ background: var(--papel-morno); }

/* ---------- Títulos ----------
   Todo título é Archivo. O rótulo acima dele é Inter Tight em caixa
   alta, e serve de âncora: diz de que assunto é a seção antes de a
   pessoa ler a frase inteira. */
.dx-produto .dx-rotulo{
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--ambar);
}
.dx-produto .dx-rotulo::before{
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}

.dx-produto .dx-titulo{
  font-family: var(--fonte-display);
  font-size: var(--t-d1);
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--preto);
  text-wrap: balance;
}
.dx-produto .dx-titulo--menor{ font-size: var(--t-d2); }

.dx-produto .dx-sub{
  font-family: var(--fonte-display);
  font-size: var(--t-d3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: inherit;
}

.dx-produto .dx-apoio{
  max-width: 62ch;
  /* `pretty` cuida da ultima linha: impede que uma palavra sozinha
     sobre no fim do paragrafo. Sem isto, "...nao em elemento quente. E"
     deixava o "E" pendurado no fim da primeira linha. */
  text-wrap: pretty;
  margin-top: var(--e4);
  font-size: var(--t-apoio);
  color: var(--inox);
}

/* ---------- Buraco de conteúdo ----------
   Onde falta informação, a página mostra que falta. Nunca preenche com
   texto genérico nem com número inventado: dado técnico errado em
   página de produto é problema de assistência, não de design. */
.dx-produto .dx-falta{
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 3px var(--e3);
  border: 1px dashed var(--ouro);
  border-radius: var(--r-pequeno);
  background: #FFFBF0;
  font-size: var(--t-micro);
  font-weight: 600;
  color: #8A6212;
  white-space: nowrap;
}
.dx-produto .dx-falta::before{ content: '!'; font-weight: 800; }

/* ---------- Botões ---------- */
.dx-produto .dx-nowrap{ white-space: nowrap; }

.dx-produto .dx-botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* `justify-content` centraliza as LINHAS dentro do botao; quem
     centraliza o texto DENTRO de cada linha e o `text-align`. Sem ele,
     um rotulo que quebra em duas linhas saia com a segunda encostada na
     esquerda, porque o reset manda `text-align: inherit` em todo botao.
     So aparecia quando o texto quebrava, que e justamente no celular. */
  text-align: center;
  gap: var(--e3);
  min-height: 48px;
  padding: 0 var(--e6);
  border-radius: var(--r-pilula);
  font-size: var(--t-apoio);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-rapido) var(--c-saida),
              border-color var(--d-rapido) var(--c-saida),
              transform var(--d-rapido) var(--c-saida);
}
.dx-produto .dx-botao:active{ transform: translateY(1px); }

.dx-produto .dx-botao--cheio{
  background: var(--ambar);
  color: #FFFFFF;
}
.dx-produto .dx-botao--cheio:hover{ background: #E84E15; }

.dx-produto .dx-botao--fio{
  border: 1px solid var(--fio-forte);
  color: var(--grafite);
}
.dx-produto .dx-botao--fio:hover{ border-color: var(--grafite); }

.dx-produto .dx-secao--escura .dx-botao--fio{
  border-color: rgba(255,255,255,0.26);
  color: #FFFFFF;
}
.dx-produto .dx-secao--escura .dx-botao--fio:hover{ border-color: #FFFFFF; }

/* ---------- Revelação na rolagem ----------
   Discreta. Numa página de venda o movimento serve para guiar o olho,
   não para chamar atenção para si. */
/* O ESCONDER DEPENDE DO JS ESTAR VIVO.

   Esta era a armadilha mais perigosa do projeto. A regra antiga
   escondia tudo com `opacity: 0` e contava com o JavaScript para
   devolver. No prototipo funciona. Em producao o HTML Block e ESTATICO,
   o nosso script nao roda dentro dele, e a pagina de produto inteira
   teria subido INVISIVEL.

   Invertido: o padrao e visivel. O `html.dx-js` so existe se o script
   tiver rodado, e e ele que autoriza esconder para depois revelar. Sem
   script, nada esconde, e a unica perda e a animacao.

   Regra geral que vale levar daqui: nunca esconder conteudo contando
   com JavaScript para mostrar. O custo do erro e assimetrico demais. */
.dx-js .dx-produto [data-sobe]{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--d-lento) var(--c-saida),
              transform var(--d-lento) var(--c-dupla);
  transition-delay: var(--atraso, 0ms);
}
.dx-js .dx-produto [data-sobe][data-visivel]{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dx-produto [data-sobe]{ opacity: 1; transform: none; transition: none; }
  .dx-produto *{ scroll-behavior: auto !important; }
}


/* ====== assets/css/descricao.css ====== */

/* =========================================================================
   A DESCRIÇÃO
   -------------------------------------------------------------------------
   É o que hoje vem do HTML Block, abaixo do resumo. É aqui que mora o
   redesign de verdade.

   A ordem das seções não é estética, é a ordem em que as objeções
   aparecem na cabeça de quem está decidindo gastar R$ 2.600:

     1. o que é isso          → faixa do essencial
     2. faz churrasco mesmo?  → selamento a 300 °C
     3. vai enfumaçar?        → a escala comparativa
     4. cabe e liga aqui?     → voltagem, tomada, apoio
     5. o que vem na caixa    → incluso e opcional
     6. vou saber usar?       → ponto da carne
     7. e o resto             → perguntas frequentes
     8. e se der problema     → documentos e compromisso
   ========================================================================= */

/* ---------- 1 · A faixa do essencial ----------
   Cinco números, antes de qualquer texto. É o que o comparador de preço
   procura nos primeiros segundos. Hoje ele precisa rolar a página
   inteira para achar. */
/* ---------- 1 · O resumo tecnico ----------
   O fundo cinza e o gap de 1px desenham as linhas da grade: cada
   celula e branca e o que aparece entre elas e o fundo do pai.

   A ULTIMA CELULA ESTICA ATE O FIM.

   Sao cinco dados e duas colunas no celular, entao sobrava um buraco
   cinza do tamanho de uma celula, que lia como bloco quebrado. Nao era
   defeito da publicacao: estava igual no mockup, e so apareceu quando
   olhei a pagina inteira em vez de medir seletor por seletor.

   `grid-column: 1 / -1` na ultima celula de uma contagem impar faz ela
   ocupar a linha toda. O dado fica centralizado e o buraco some. */
/* FLEX, E NAO GRADE, e a troca veio de um defeito medido no desktop.
 *
 * A versao anterior era `grid-template-columns: repeat(auto-fit,
 * minmax(160px, 1fr))` mais `grid-column: 1 / -1` na ultima celula de
 * contagem impar. As duas coisas juntas se mordem:
 *
 *   `auto-fit` so colapsa faixa VAZIA. Numa janela de 1482px ele criou
 *   NOVE faixas de 163px. A quinta celula, com `1 / -1`, ocupa todas as
 *   nove. Resultado: nenhuma faixa fica vazia, nada colapsa, as quatro
 *   primeiras celulas ocupam so quatro faixas e sobram 819px do cinza do
 *   fundo a direita. Medido na tela, e e exatamente o buraco que o
 *   Ricardo viu.
 *
 * Ou seja: o truque que consertou o celular foi o que quebrou o desktop.
 *
 * Com flex nao ha faixa nenhuma para sobrar. Cada celula pede 160px e
 * cresce para dividir o que houver: cinco celulas numa tela larga viram
 * cinco colunas que preenchem a linha, e no celular elas quebram sozinhas
 * com a ultima crescendo para ocupar a linha dela. Um mecanismo resolve
 * os dois casos, e o `nth-child` deixa de ser necessario. */
.dx-produto .dx-essencial{
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--fio);
  border-block: 1px solid var(--fio);
}

.dx-produto .dx-essencial__cel{
  flex: 1 1 160px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: var(--e5) var(--e4);
  background: var(--papel);
  text-align: center;
}
.dx-produto .dx-essencial__v{
  font-family: var(--fonte-display);
  font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--preto);
}
.dx-produto .dx-essencial__r{
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inox);
}
/* O "não é bivolt" é a informação que mais causa devolução. Ela aparece
   duas vezes na página de propósito: aqui e na ficha técnica. */
.dx-produto .dx-essencial__cel[data-alerta] .dx-essencial__r{ color: var(--ambar); font-weight: 600; }

/* =========================================================================
   AS SECOES ESCURAS OCUPAM A LINHA INTEIRA
   -------------------------------------------------------------------------
   PEDIDO DIRETO: quando a secao tem fundo, o fundo e a largura da tela,
   sem borda dos lados.

   Medido antes de mudar: numa janela de 1512px a secao ia de 15 a 1497,
   porque o container do tema tem 15px de respiro de cada lado. Dentro
   dele, o preto virava uma faixa com duas tiras brancas nas pontas, que
   lê como erro de recorte e nao como decisao.

   `margin-inline` negativo puxa a secao ate a borda; `padding-inline` do
   mesmo tamanho devolve o respiro por dentro, para o texto nao encostar
   no vidro. O `.dx-env` la dentro continua centralizando o conteudo na
   mesma coluna do resto da pagina, entao nada se desalinha.

   O valor vem de `--dx-sangra`, medido em JavaScript: o respiro do tema
   muda conforme a largura da janela e o container, e numero fixo acerta
   em um tamanho de tela e erra em todos os outros. */
.dx-produto .dx-secao--escura,.dx-produto .dx-secao--morna{
  margin-inline: calc(var(--dx-sangra, 0px) * -1);
  padding-inline: var(--dx-sangra, 0px);
  border-radius: 0;
}

/* ---------- 2 · Selamento ---------- */
.dx-produto .dx-selo{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(var(--e6), 5vw, var(--e10)); align-items: center; }
.dx-produto .dx-selo__lista{ display: grid; gap: var(--e3); margin-top: var(--e6); }
.dx-produto .dx-selo__lista li{
  display: flex; gap: var(--e3);
  font-size: var(--t-apoio);
  color: rgba(242,241,238,0.78);
}
.dx-produto .dx-selo__lista li::before{
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px; margin-top: 9px;
  border-radius: 50%;
  background: var(--ambar);
}
.dx-produto .dx-selo__foto{ border-radius: var(--r-card); overflow: hidden; background: #141412; }
.dx-produto .dx-selo__foto img{ width: 100%; }

/* ---------- 3 · Fumaça ----------
   A escala não compara Dinoxx contra carvão: compara POR ACESSÓRIO. A
   quantidade de fumaça é uma escolha de quem cozinha, não um atributo
   fixo do aparelho. É mais honesto e vende melhor, porque transforma o
   acessório em decisão. */
.dx-produto .dx-fumaca__escala{ display: grid; gap: var(--e4); margin-top: var(--e7); }

.dx-produto .dx-barra{
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 62px;
  align-items: center;
  gap: var(--e4);
}
.dx-produto .dx-barra__rot{ font-size: var(--t-apoio); color: rgba(242,241,238,0.82); }
.dx-produto .dx-barra__trilho{
  height: 10px;
  border-radius: var(--r-pilula);
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.dx-produto .dx-barra__preenche{
  /* display: block e obrigatorio.

     O trilho tambem e um <span>, mas funciona porque e filho direto do
     grid `.dx-barra`, e filho de grid e blocado pelo navegador. O
     preenchimento e filho do TRILHO, nao do grid, entao continua inline
     e largura nao se aplica a inline: as cinco barras saiam identicas. */
  display: block;
  height: 100%;
  /* NASCE NA LARGURA CERTA, nao em zero.

     Antes era `width: 0` e so crescia quando o JS marcava
     `[data-visivel]`. No bloco estatico ninguem marca: as cinco barras
     ficariam vazias para sempre, numa secao cujo titulo e "Quase sem
     fumaca, e da para provar". A prova sumiria e sobraria a afirmacao.

     Agora o valor esta no proprio elemento e a animacao e que e
     opcional, logo abaixo. */
  width: var(--pct);
  border-radius: inherit;
  transition: width 1100ms var(--c-saida);
  transition-delay: var(--atraso, 0ms);
}
/* A animacao e enfeite, e enfeite nao segura informacao refem.

   Onde o navegador souber animar pela rolagem sem script (Chrome, Edge,
   Safari novo), a barra cresce quando a secao entra na tela. Onde nao
   souber, ela ja esta no lugar certo desde o primeiro quadro. Nenhum
   dos dois caminhos passa por JavaScript nosso. */
@supports (animation-timeline: view()) {
  .dx-produto .dx-barra__preenche{
    animation: dx-encher 1s var(--c-saida) both;
    animation-timeline: view();
    animation-range: entry 10% cover 34%;
  }
}
@keyframes dx-encher { from { width: 0; } to { width: var(--pct); } }

@media (prefers-reduced-motion: reduce) {
  .dx-produto .dx-barra__preenche{ animation: none; width: var(--pct); }
}

/* Nosso em âmbar, referência externa em cinza. A cor separa "o que você
   controla" de "com o que estamos comparando". */
.dx-produto .dx-barra[data-nosso] .dx-barra__preenche{
  background: linear-gradient(90deg, var(--ambar) 0%, #FF8A4C 100%);
}
.dx-produto .dx-barra:not([data-nosso]) .dx-barra__preenche{ background: rgba(255,255,255,0.26); }

.dx-produto .dx-barra__v{
  font-family: var(--fonte-display);
  font-size: 1.05rem; font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dx-produto .dx-barra[data-nosso] .dx-barra__v{ color: var(--ambar); }
.dx-produto .dx-barra:not([data-nosso]) .dx-barra__v{ color: rgba(242,241,238,0.5); }

/* ---------- A linha de zero por cento ----------
   Uma barra de 0% nao desenha nada, e trilho vazio parece defeito de
   render, nao conquista. Entao a linha de zero ganha um ponto aceso no
   comeco da escala: le-se como "comeca aqui e nao sobe", que e o que o
   numero realmente diz. Sem isso o melhor argumento da pagina seria uma
   faixa cinza vazia. */
.dx-produto .dx-barra[data-zero] .dx-barra__trilho{ position: relative; }
.dx-produto .dx-barra[data-zero] .dx-barra__trilho::after{
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 16px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: var(--r-pilula);
  background: linear-gradient(90deg, var(--ambar) 0%, rgba(255,138,76,0) 100%);
}
.dx-produto .dx-barra[data-zero] .dx-barra__v{ color: var(--ambar); }

/* A nota separa o que ja vem na caixa do que e acessorio. Sem ela a
   barra de 0% viraria promessa do produto nu, e nao e: depende do
   suporte de espeto. */
.dx-produto .dx-barra__nota{
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: var(--t-micro);
  color: rgba(242,241,238,0.45);
  line-height: 1.3;
}
.dx-produto .dx-barra[data-nosso] .dx-barra__nota{ color: rgba(255,138,76,0.74); }

.dx-produto .dx-fumaca__ressalva{
  margin-top: var(--e5);
  font-size: var(--t-micro);
  color: rgba(242,241,238,0.46);
}

.dx-produto .dx-agua{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  margin-top: var(--e8);
  padding: var(--e6);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.03);
}
.dx-produto .dx-agua svg{ width: 30px; height: 30px; color: #5BB8F5; }
.dx-produto .dx-agua__dados{ display: flex; flex-wrap: wrap; gap: var(--e2) var(--e6); margin-top: var(--e4); }
.dx-produto .dx-agua__dados div{ font-size: var(--t-micro); color: rgba(242,241,238,0.6); }
.dx-produto .dx-agua__dados b{ display: block; font-size: var(--t-apoio); color: #FFFFFF; font-weight: 600; }

/* ---------- 4 · Cabe e liga ---------- */
.dx-produto .dx-checa{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4); margin-top: var(--e7); }
.dx-produto .dx-checa__card{
  display: grid; gap: var(--e3); align-content: start;
  padding: var(--e6);
  border: 1px solid var(--fio);
  border-radius: var(--r-card);
  background: var(--papel);
}
.dx-produto .dx-checa__card[data-peso='alto']{
  border-color: #F3D9A9;
  background: #FFFBF2;
}
.dx-produto .dx-checa__n{
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--preto); color: #FFFFFF;
  font-size: var(--t-micro); font-weight: 700;
}
.dx-produto .dx-checa__card[data-peso='alto'] .dx-checa__n{ background: var(--ouro); }
.dx-produto .dx-checa__card p{ font-size: var(--t-apoio); color: var(--inox); }

/* ---------- 5 · Ficha técnica ---------- */
/* A FICHA NAO E UMA GRADE DE TRES COLUNAS IGUAIS, E ESSE ERA O DEFEITO.
   -------------------------------------------------------------------------
   Contado no HTML da Smart Play: Eletrica tem 12 linhas, Medidas tem 3,
   Materiais tem 5. Tres colunas de mesma largura colocam 12 ao lado de 3,
   e sob a coluna curta abre um buraco da altura de nove linhas. Nenhum
   ajuste de espacamento conserta isso, porque o problema e de proporcao,
   nao de medida.

   O arranjo certo segue o conteudo: Eletrica, que e a informacao que
   decide a compra neste produto, fica sozinha numa coluna e ocupa a
   altura toda. Medidas e Materiais empilham na outra. Doze linhas de um
   lado contra oito do outro fecham quase no mesmo pe.

   O `:first-child:nth-last-child(3)` e a trava: a regra do span so vale
   quando existem EXATAMENTE tres grupos. Se um produto renderizar dois,
   o posicionamento automatico assume e nada quebra. */
.dx-produto .dx-ficha{
  columns: 2;
  column-gap: var(--e4);
  margin-top: var(--e6);
}
.dx-produto .dx-ficha__grupo{ break-inside: avoid; margin-bottom: var(--e4); }

/* POR QUE MULTI-COLUNA E NAO GRADE, que foi a primeira tentativa.
   -------------------------------------------------------------------------
   A grade exigia dizer a mao quem ocupa o que: Eletrica atravessando duas
   linhas, Medidas em cima, Materiais embaixo. Medido na tela, nao resolveu.
   Um item que atravessa duas linhas CONTRIBUI para o tamanho das duas, e a
   linha de cima inflava de 234px para 416px por causa dele. Medidas ficava
   com 234 de conteudo dentro de uma linha de 416, e abria um vao de 182px
   boiando entre os dois cartoes da direita. Trocar a linha para
   `min-content` nao mudou um pixel: o item que atravessa continua
   contribuindo.

   Multi-coluna nao tem linhas. O navegador enche a primeira coluna, quebra,
   e enche a segunda, entao Medidas e Materiais ficam separados pela propria
   margem dos cartoes e por mais nada. O balanceamento tambem decide sozinho
   onde cortar, o que vale mais do que meu palpite: ele usa a altura REAL de
   cada grupo, que muda de produto para produto e muda de novo quando a
   pessoa escolhe a voltagem e a coluna eletrica encolhe pela metade.

   `break-inside: avoid` e o que impede um cartao de ser partido no meio,
   com metade das linhas no pe de uma coluna e metade no topo da outra. */

/* CADA GRUPO E UM CARTAO, e isso e consequencia do de cima.
   Com alturas diferentes por construcao, borda fechada e o que faz a
   diferenca ler como arranjo e nao como sobra. Branco sobre o bege da
   secao: separa sem pesar. */
.dx-produto .dx-ficha__grupo{
  padding: var(--e5) var(--e5) var(--e2);
  border: 1px solid var(--fio);
  border-radius: 16px;
  background: var(--papel);
}

.dx-produto .dx-ficha__grupo h3{
  margin: 0 0 var(--e2);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--fio);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--ambar);
}

.dx-produto .dx-ficha__linha{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--fio);
  font-size: var(--t-apoio);
  line-height: 1.45;
}
/* A ultima linha nao leva fio: senao sobra um traco solto antes da borda
   do cartao, que e o tipo de detalhe que faz a peca parecer inacabada. */
.dx-produto .dx-ficha__linha:last-child{ border-bottom: 0; }

.dx-produto .dx-ficha__linha dt{ color: var(--inox); }
.dx-produto .dx-ficha__linha dd{ margin: 0; color: var(--grafite); font-weight: 500; }

/* O destaque ocupa a linha inteira embaixo do valor, nao fica pendurado
   no fim dele. */
.dx-produto .dx-ficha__linha dd em{
  display: block;
  margin-top: var(--e1);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ambar);
}

/* NO CELULAR tudo empilha e o span perde o sentido: uma coluna so. */
@media (max-width: 860px) {
  .dx-produto .dx-ficha{ columns: 1; }
}

/* ---------- 6 · O que vem junto ---------- */
.dx-produto .dx-caixa{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e6); margin-top: var(--e6); }
.dx-produto .dx-caixa__lista{ display: grid; gap: var(--e3); margin-top: var(--e4); }
.dx-produto .dx-caixa__lista li{ display: flex; gap: var(--e3); font-size: var(--t-apoio); }
.dx-produto .dx-caixa__lista li svg{ width: 17px; height: 17px; flex: 0 0 auto; margin-top: 4px; color: var(--verde); }
.dx-produto .dx-caixa--opcional .dx-caixa__lista li svg{ color: var(--inox-claro); }

/* ---------- 7 · O ponto ---------- */
.dx-produto .dx-ponto{ width: 100%; border-collapse: collapse; margin-top: var(--e6); }
.dx-produto .dx-ponto th{
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--fio-forte);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--inox);
  text-align: left;
}
.dx-produto .dx-ponto th:last-child,.dx-produto .dx-ponto td:last-child{ text-align: right; }
.dx-produto .dx-ponto td{
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--fio);
  font-size: var(--t-apoio);
}
.dx-produto .dx-ponto tbody tr:hover{ background: var(--papel-morno); }
.dx-produto .dx-ponto td:last-child{ font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 8 · Perguntas ----------
   Agrupadas pelo MOMENTO da dúvida, não por assunto técnico. Quem está
   decidindo e quem já comprou não têm a mesma pergunta. */
.dx-produto .dx-faq{ display: grid; gap: var(--e8); margin-top: var(--e7); }
.dx-produto .dx-faq__grupo > h3{
  margin-bottom: var(--e4);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--ambar);
}

.dx-produto .dx-p{
  border-bottom: 1px solid var(--fio);
}

/* O triangulo nativo do <details> sai: quem indica estado aqui e o
   sinal de mais que vira X. Precisa das duas formas porque o Safari
   ainda usa a pseudo com prefixo. */
.dx-produto .dx-p__cabeca::-webkit-details-marker{ display: none; }
.dx-produto .dx-p__cabeca{ list-style: none; }

.dx-produto .dx-p__cabeca{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  width: 100%;
  padding: var(--e5) 0;
  font-family: var(--fonte-display);
  font-size: var(--t-d3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--preto);
  text-align: left;
  cursor: pointer;
  transition: color var(--d-rapido) var(--c-saida);
  -webkit-tap-highlight-color: transparent;
}
.dx-produto .dx-p__cabeca:hover{ color: var(--ambar); }
.dx-produto .dx-p__cabeca:focus-visible{
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: var(--r-pequeno);
}

.dx-produto .dx-p__sinal{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--fio-forte);
  border-radius: 50%;
  color: var(--inox);
  transition: transform var(--d-base) var(--c-dupla),
              color var(--d-rapido) var(--c-saida),
              border-color var(--d-rapido) var(--c-saida);
}
.dx-produto .dx-p[open] .dx-p__sinal{
  transform: rotate(45deg);
  color: var(--ambar);
  border-color: var(--ambar);
}
.dx-produto .dx-p__sinal svg{ width: 15px; height: 15px; }

.dx-produto .dx-p__corpo{ padding-bottom: var(--e5); }
.dx-produto .dx-p__corpo p{ max-width: 70ch; font-size: var(--t-apoio); color: var(--inox); }

/* A abertura desliza onde o navegador souber fazer isso sem JavaScript.
   Onde nao souber, abre seco, que e o comportamento nativo de sempre.
   Nenhuma das duas depende de script nosso, que e o ponto. */
@supports (interpolate-size: allow-keywords) {
  .dx-produto .dx-p{ interpolate-size: allow-keywords; }
  .dx-produto .dx-p::details-content{
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--d-base) var(--c-dupla),
                content-visibility var(--d-base) allow-discrete;
  }
  .dx-produto .dx-p[open]::details-content{ block-size: auto; }
}

/* ---------- 8 · Documentos ----------
   O cartao do manual: icone, texto, botao.

   A regra do PAI nao existia, e os filhos pediam `flex`. Sem
   `display: flex` no container, `flex: 1 1 auto` nao faz nada: o texto
   nao esticava, o botao nao era empurrado para a direita e acabava por
   cima da descricao, cortando "6,7 MB" no meio.

   Passou despercebido porque estava igual no mockup e em producao: o
   comparador so diz se os dois ambientes batem, nao se o desenho esta
   certo. Olhar continua sendo necessario. */
.dx-produto .dx-doc{
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e5);
  padding: var(--e5);
  border: 1px solid var(--fio);
  border-radius: var(--r-card);
  background: var(--papel);
  transition: border-color var(--d-rapido) var(--c-saida);
}
.dx-produto .dx-doc:hover{ border-color: var(--fio-forte); }

.dx-produto .dx-doc svg{ width: 34px; height: 34px; flex: 0 0 auto; color: var(--ambar); }

/* `min-width: 0` nao e enfeite: sem ele um item de flex nunca encolhe
   abaixo do proprio conteudo, e a descricao longa empurraria o botao
   para fora do cartao. */
.dx-produto .dx-doc__t{ flex: 1 1 auto; min-width: 0; }
.dx-produto .dx-doc__t b{ display: block; font-size: var(--t-apoio); font-weight: 600; }
.dx-produto .dx-doc__t i{ display: block; margin-top: 2px; font-style: normal; font-size: var(--t-micro); color: var(--inox); }

/* O botao nao encolhe nem quebra o rotulo. */
.dx-produto .dx-doc .dx-botao{ flex: 0 0 auto; }

@media (max-width: 560px) {
  /* No celular o botao vai para baixo e ocupa a largura toda: ao lado
     ele espremeria o nome do documento ate quebrar em tres linhas. */
  .dx-produto .dx-doc{ flex-wrap: wrap; }
  .dx-produto .dx-doc__t{ flex-basis: calc(100% - 34px - var(--e4)); }
  .dx-produto .dx-doc .dx-botao{ flex: 1 1 100%; }
}

.dx-produto .dx-prom{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e5); margin-top: var(--e7); }
.dx-produto .dx-prom__card{ display: grid; gap: var(--e3); align-content: start; }
.dx-produto .dx-prom__card svg{ width: 26px; height: 26px; color: var(--ambar); }
.dx-produto .dx-prom__card b{ font-family: var(--fonte-display); font-size: 1.04rem; font-weight: 700; }
.dx-produto .dx-prom__card p{ font-size: var(--t-apoio); color: rgba(242,241,238,0.7); }

.dx-produto .dx-fale{ display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e8); }

@media (max-width: 860px) {
  .dx-produto .dx-selo{ grid-template-columns: minmax(0, 1fr); }
  .dx-produto .dx-barra{ grid-template-columns: minmax(0, 1fr) 54px; row-gap: var(--e2); }
  .dx-produto .dx-barra__rot{ grid-column: 1 / -1; }
  .dx-produto .dx-agua{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ficha: as duas voltagens, uma por linha ----------
   Enquanto ninguem escolheu, os campos que mudam com a tensao aparecem
   em par. E o estado indeciso virando ajuda: a duvida que traz a pessoa
   ate aqui e justamente "qual das duas eu preciso".

   DUAS COLUNAS, NAO FLEX COM DIVISORIA.

   A primeira versao usava flex e `border-left` para separar os lados.
   Quebrou de duas formas ao mesmo tempo: quando o valor nao cabia, o
   segundo lado descia e levava a divisoria junto, que virava um traco
   solto no comeco da linha; e os dois lados nunca alinhavam, porque
   cada um tinha a largura do proprio texto.

   Grid resolve as duas de uma vez. A coluna da tensao assume a largura
   da maior etiqueta e as duas ficam alinhadas por construcao. A coluna
   do valor fica com o resto, e texto comprido quebra DENTRO dela, com
   as linhas seguintes alinhadas sob a primeira, em vez de empurrar o
   vizinho para baixo.

   Campo que nao muda continua aparecendo uma vez so. Repetir "ferro
   fundido" duas vezes encheria a tabela de ruido e esconderia as poucas
   linhas que de fato diferem, que sao as unicas que importam para a
   decisao. */
.dx-produto .dx-ficha__par{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e1) var(--e2);
  align-items: baseline;
}

/* A TENSAO E ETIQUETA, NAO DADO.
   Virou pastilha porque em texto corrido ela competia com o valor, e o
   valor e o que a pessoa veio buscar. `min-width` com texto centrado
   resolve o alinhamento dos dois lados de uma vez: as pastilhas comecam
   juntas E os valores comecam juntos, mesmo que um dia apareca uma
   etiqueta de largura diferente. */
.dx-produto .dx-ficha__volt{
  justify-self: start;
  min-width: 40px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(254, 92, 33, 0.10);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  color: var(--ambar);
}

.dx-produto .dx-ficha__val{ min-width: 0; }

/* =========================================================================
   O FILME · a seção de tecnologia
   -------------------------------------------------------------------------
   O video e VERTICAL, porque veio das redes sociais, e isso acabou
   sendo a sorte: a secao ja tinha texto a esquerda e imagem a direita
   no desktop, e um retrato cabe nessa coluna melhor que um render
   quadrado. No celular ele ocupa a largura toda, que e o formato nativo
   dele.
   ========================================================================= */
.dx-produto .dx-filme{ margin: 0; }

.dx-produto .dx-filme__palco{
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 72vh;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #0E0E0D;
  /* O vidro do design system, na mesma familia do trilho e do botao. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 60px -28px rgba(0,0,0,0.9);
}

/* QUANDO O PALCO SEGURA FOTO, E NAO FILME
   -------------------------------------------------------------------------
   O 9/16 acima existe para o filme vertical da Smart Play. Foto de cena e
   horizontal, e dentro do palco em pe ela encostava no topo e deixava um
   retangulo preto embaixo do tamanho dela de novo. Apareceu nas dez paginas
   a gas de uma vez, porque nenhuma tem filme e todas usam foto.

   O palco passa a ter a proporcao da foto, e a foto preenche. Recortar a
   cena para caber em 9/16 tiraria justamente a bancada em volta, que e o
   que faz a foto explicar o produto embutido. */
.dx-produto .dx-filme__palco--foto{
  aspect-ratio: 3 / 2;
  max-height: none;
}

.dx-produto .dx-filme__foto{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dx-produto .dx-filme__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* ---------- O botao de assistir ----------
   Fica no canto de baixo, nao no centro: no centro ele tapa justamente
   a carne, que e o que a pessoa esta olhando. */
.dx-produto .dx-filme__play{
  position: absolute;
  left: var(--e4); bottom: var(--e4);
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 9px var(--e4) 9px 10px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-pilula);
  background: rgba(12,12,11,0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-rapido) var(--c-saida),
              border-color var(--d-rapido) var(--c-saida);
}
.dx-produto .dx-filme__play:hover{
  background: rgba(20,20,18,0.78);
  border-color: rgba(255,255,255,0.34);
}
.dx-produto .dx-filme__play-icone{
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ambar);
}
.dx-produto .dx-filme__play-icone svg{ width: 13px; height: 13px; color: #fff; }

/* ---------- A barra de controle ----------
   So aparece com o filme completo tocando. Enquanto e laco nao ha o que
   controlar: ele e ambiente. */
.dx-produto .dx-filme__barra{
  position: absolute;
  left: var(--e3); right: var(--e3); bottom: var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pilula);
  background: rgba(12,12,11,0.66);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
/* `padding: 0` E `flex: none`, e isso foi defeito medido na tela.
 *
 * Os tres botoes da barra apareciam VAZIOS em producao: so o tempo era
 * visivel. Nao era cor nem z-index.
 *
 * O tema aplica `padding: 5px 20px` em `button`. Com `box-sizing:
 * border-box` e os meus 32px de largura perdendo para a largura que o
 * tema impoe, o botao saiu com 40px e 20px de padding de cada lado:
 * sobrou ZERO de area de conteudo. Medido: o `<svg>` computava `0px` de
 * largura e 16px de altura. O icone existia e nao tinha onde caber.
 *
 * Por isso `padding: 0` explicito: nao basta declarar largura, porque o
 * padding do tema come a largura por dentro. E `flex: none` para o botao
 * nao ser espremido pelo `.dx-filme__tempo`, que e `flex: 1 1 auto`. */
.dx-produto .dx-filme__barra button{
  display: grid; place-items: center;
  flex: none;
  width: 32px; height: 32px;
  padding: 0;
  min-width: 0;
  border: 0; border-radius: 50%;
  background: none;
  color: rgba(255,255,255,0.86);
  cursor: pointer;
  transition: background var(--d-rapido) var(--c-saida);
}
.dx-produto .dx-filme__barra button:hover{ background: rgba(255,255,255,0.12); color: #fff; }
/* `flex: none` tambem no icone: dentro de um botao espremido ele
   encolheria junto em vez de manter os 16px. */
.dx-produto .dx-filme__barra svg{ width: 16px; height: 16px; flex: none; }
.dx-produto .dx-filme__tempo{
  flex: 1 1 auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.7);
  text-align: right;
  padding-right: 4px;
}

/* O icone de som ganha um corte quando esta mudo, em vez de trocar de
   desenho: a pessoa reconhece o mesmo objeto em outro estado. */
.dx-produto .dx-filme[data-mudo] [data-filme-som]{ position: relative; color: rgba(255,255,255,0.5); }
.dx-produto .dx-filme[data-mudo] [data-filme-som]::after{
  content: '';
  position: absolute;
  left: 7px; right: 7px; top: 50%;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-38deg);
}

.dx-produto .dx-filme__legenda{
  margin-top: var(--e3);
  font-size: var(--t-micro);
  color: rgba(242,241,238,0.52);
}

/* =========================================================================
   NO CELULAR O FILME SANGRA ATE AS BORDAS
   -------------------------------------------------------------------------
   Vídeo vertical e feito para ocupar a tela: com margem dos dois lados e
   canto arredondado ele vira um cartao de video, que e outra coisa.

   A conta tem DUAS parcelas, e isso importa:

     `--dx-sangra`  a distancia da borda do bloco ate a borda da janela.
                    Vem do container do tema, muda com a largura, e por
                    isso e medida em JavaScript, nao chutada em CSS.

     `--margem`     o respiro do nosso proprio `.dx-env`. No celular o
                    env e `100% - margem*2`, entao a folga lateral dele e
                    exatamente `--margem`. No desktop nao seria, mas esta
                    regra so vale ate 860px.

   `100vw` resolveria em uma linha e traria a barra de rolagem junto:
   `vw` conta a largura da barra, e sobraria uns 15px de transbordo em
   qualquer navegador que a desenhe ocupando espaco.
   ========================================================================= */
@media (max-width: 860px) {
  .dx-produto .dx-filme__palco{
    margin-inline: calc(-1 * (var(--dx-sangra, 0px) + var(--margem)));
    border-radius: 0;
    max-height: none;
    box-shadow: none;   /* sombra so faz sentido em peca destacada do fundo */
  }

  /* A legenda continua alinhada com o resto do texto, e nao com o video. */
  .dx-produto .dx-filme__legenda{ padding-inline: 0; }
}


/* ====== assets/css/lente.css · escopo body.dx-pagina-nova ====== */

/* =========================================================================
   LIQUID GLASS · portado da Black November
   -------------------------------------------------------------------------
   Este arquivo NAO foi reescrito. Ele e o mesmo codigo que ja esta no ar
   em /blacknovember2026, com os nomes trocados de bn- para dx-.

   O motivo e simples: a lente foi ajustada durante dias contra a
   referencia que o Ricardo mandou, e cada numero aqui foi medido na
   tela, nao escolhido. Reescrever de memoria perderia o ajuste.

   As quatro coisas que fazem o vidro parecer vidro, e que so funcionam
   juntas, estao comentadas abaixo onde acontecem.
   ========================================================================= */

/* ---------- O trilho ----------------------------------------------------
   Pilula escura, quase um sulco. Ela existe para a lente ter sobre o
   que deslizar: por isso tem sombra INTERNA, nao externa. Superficie
   que afunda, objeto que flutua. */

body.dx-pagina-nova .dx-trilho{
  position: relative;
  display: flex;
  padding: 4px;
  border: 1px solid rgba(244,241,236,0.09);
  border-radius: var(--r-pilula);
  background: rgba(7, 7, 6, 0.64);
  backdrop-filter: blur(26px) saturate(1.3) brightness(0.86);
  -webkit-backdrop-filter: blur(26px) saturate(1.3) brightness(0.86);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.70),
    inset 0 -1px 0 rgba(244,241,236,0.05),
    0 1px 0 rgba(244,241,236,0.04);
}

/* ---------- A lente -----------------------------------------------------
   O indicador nao e mais uma pastilha pintada: e um corpo de vidro.

   Quatro coisas, juntas, e que so funcionam juntas:

     1. backdrop-filter com brightness e saturate acima de 1. E isto que
        faz a lente AMPLIAR a luz da foto por tras, em vez de tapar.
        Sem isto o resto vira desenho de vidro, nao vidro.
     2. Topo claro e base escura no mesmo gradiente, porque vidro real
        recolhe luz em cima e sombra embaixo.
     3. Dois arcos especulares, um em cada borda, com as pontas
        desaparecendo. Borda inteira acesa parece neon; borda com
        ponta apagada parece reflexo.
     4. Raio de squircle, nao de pilula, e 1px a mais de altura que o
        trilho. A lente precisa parecer que estufa para fora do sulco.
*/

body.dx-pagina-nova .dx-trilho__indicador{
  position: absolute;
  /* ESTUFA PARA FORA do sulco, em cima e embaixo. E este transbordo
     que faz a lente parecer um corpo pousado sobre a pilula, e nao um
     retangulo pintado dentro dela. */
  top: -7px;
  bottom: -7px;
  left: 0;
  border-radius: 20px;
  pointer-events: none;

  /* Corpo ESCURO: o vidro aqui nao clareia, aprofunda. Quem carrega o
     sinal de "selecionado" e a luz nas bordas curvas, nao o
     preenchimento.

     As duas primeiras camadas sao o que separa vidro de desenho de
     vidro: uma caustica, que e a luz que atravessou o corpo e se
     concentrou na base, e uma refracao quente vinda da brasa da cena.
     Nenhuma das duas e visivel conscientemente. A falta delas e. */
  background:
    radial-gradient(84% 58% at 50% 116%,
      rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.03) 44%, transparent 68%),
    radial-gradient(64% 120% at 16% 112%,
      rgba(255,172,112,0.10) 0%, transparent 58%),
    linear-gradient(180deg,
      rgba(28,28,27,0.88) 0%,
      rgba(13,13,12,0.94) 48%,
      rgba(21,21,20,0.91) 100%);

  backdrop-filter: blur(12px) saturate(1.22) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.22) brightness(1.05);

  /* Borda quase apagada: o aro de luz vem das sombras internas, que
     conseguem variar de intensidade por lado. Uma border solida tem a
     mesma forca nos quatro lados, e e isso que denuncia desenho. */
  border: 1px solid rgba(255,255,255,0.085);

  box-shadow:
    /* aro: forte em cima, medio embaixo, quase nada nos lados, como
       um corpo curvo sob uma unica fonte de luz */
    inset 0 1.2px 0.8px rgba(255,255,255,0.30),
    inset 0 -1.2px 0.8px rgba(255,255,255,0.15),
    inset 1.6px 0 1.4px rgba(255,255,255,0.045),
    inset -1.6px 0 1.4px rgba(255,255,255,0.045),
    /* o corpo de vidro projeta sombra no sulco */
    0 12px 28px -11px rgba(0,0,0,0.92),
    0 2px 7px -2px rgba(0,0,0,0.70),
    /* brasa da marca, atras do vidro e nunca nele */
    0 9px 28px -11px rgba(254,92,33,0.34);

  /* Quem anima e a Web Animations API, no JS: uma transicao de CSS nao
     consegue esticar no meio do caminho e voltar. */
  will-change: transform, width;
}

/* ---- Calotas de luz -----------------------------------------------------
   As duas barras brancas da referencia. Sao o reflexo do ambiente nas
   bordas curvas do vidro: largas, arredondadas e com a ponta apagando.
   Elas e que dizem "este e o escolhido". */

body.dx-pagina-nova .dx-trilho__indicador::before,body.dx-pagina-nova .dx-trilho__indicador::after{
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  height: 46%;
  pointer-events: none;

  /* A mascara e o que tira o aspecto de barra. Ela apaga as pontas,
     entao o reflexo nao TERMINA: ele se dissolve na curvatura, que e
     o que olho reconhece como vidro. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* Reflexo de cima: elipse, nao retangulo. O centro e quase branco e a
   luz cai para os lados e para baixo ao mesmo tempo. */
body.dx-pagina-nova .dx-trilho__indicador::before{
  top: 1px;
  background: radial-gradient(70% 150% at 50% -16%,
    rgba(255,255,255,0.88) 0%,
    rgba(255,255,255,0.40) 30%,
    rgba(255,255,255,0.12) 54%,
    transparent 78%);
  filter: blur(1.1px);
}

/* Reflexo de baixo: luz rebatida, mais fraca e levemente quente. A
   diferenca de temperatura entre os dois e pequena de proposito, e e
   ela que impede os dois de parecerem a mesma barra espelhada. */
body.dx-pagina-nova .dx-trilho__indicador::after{
  bottom: 1px;
  background: radial-gradient(74% 150% at 50% 116%,
    rgba(255,248,240,0.56) 0%,
    rgba(255,240,228,0.24) 32%,
    rgba(255,255,255,0.07) 56%,
    transparent 80%);
  filter: blur(1.4px);
}

/* Antes da escolha a lente nao existe.

   Duas razoes se somam aqui. A primeira e tecnica, e veio da Black
   November: antes da primeira medicao a lente apareceria encolhida num
   canto durante o carregamento.

   A segunda e de seguranca, e e desta pagina: a voltagem NAO vem
   pre-marcada, porque o produto nao e bivolt. Marcar uma delas por
   padrao deixa alguem de 127 V comprar a de 220 sem nunca ter
   escolhido. Entao enquanto ninguem escolher, nao ha o que a lente
   indique, e ela fica fora.

   Quando a escolha acontece, ela entra por opacidade, ja no lugar
   certo. Deslizar a partir de uma posicao que a pessoa nunca viu seria
   movimento sem causa. */
body.dx-pagina-nova .dx-trilho:not([data-pronto]) .dx-trilho__indicador{ opacity: 0; }
body.dx-pagina-nova .dx-trilho__indicador{ transition: opacity 420ms var(--c-saida); }

body.dx-pagina-nova .dx-opcao{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 9px var(--e5);
  border-radius: var(--r-pilula);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Rotulo nao escolhido recua. Contraste medido: 0.60 de off-white
     sobre o sulco da ~5:1, acima do minimo de texto pequeno, e ainda
     assim abre distancia suficiente para o branco do selecionado
     saltar sem precisar de mais brilho no vidro. */
  color: rgba(244, 241, 236, 0.60);
  white-space: nowrap;
  transition: color var(--d-rapido) var(--c-saida),
              text-shadow var(--d-rapido) var(--c-saida);
  -webkit-tap-highlight-color: transparent;
}

body.dx-pagina-nova .dx-opcao:hover{ color: rgba(244, 241, 236, 0.94); }

/* Sobre vidro claro o rotulo fica branco, nao preto: o que da contraste
   aqui e a sombra curta, nao a inversao. Inverter para preto mataria a
   transparencia e a lente viraria pastilha de novo. */
body.dx-pagina-nova .dx-opcao[aria-checked='true']{
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 14px rgba(0,0,0,0.35);
}
body.dx-pagina-nova .dx-opcao[aria-checked='true'] .dx-opcao__icone{ opacity: 1; }

body.dx-pagina-nova .dx-opcao__icone{
  width: 15px; height: 15px;
  opacity: 0.62;
  transition: opacity var(--d-rapido) var(--c-saida);
}

/* Instalacao recua quando uma linha assume o comando. Nao fica
   desabilitada: continua clicavel, e clicar devolve o comando a ela.
   Recuo sem bloqueio, que e o que o usuario espera de um filtro. */

/* =========================================================================
   O BOTAO DE VIDRO AMBAR
   -------------------------------------------------------------------------
   ESTE BLOCO E NOVO. Nao veio da Black November: la nao havia botao de
   comprar. O que veio de la foi o vocabulario, e ele esta logo acima:
   calota de luz no topo, sombra na base, dois arcos especulares com as
   pontas apagadas, sulcos internos de 1px.

   POR QUE ELE NAO E TRANSPARENTE COMO A LENTE

   A lente e translucida porque desliza sobre um sulco escuro e precisa
   mostrar o que tem atras. Este botao e a decisao final da pagina e
   mora sobre papel branco: translucido ali, o laranja desbotaria e a
   peca mais decisiva da coluna viraria a mais fraca.

   Entao o corpo e opaco e o vidro esta na SUPERFICIE. E a diferenca
   entre uma janela e uma peca de vidro fundido: as duas sao vidro, uma
   deixa ver atraves e a outra devolve a luz.

   O CONTRASTE, QUE FOI O TRABALHO DE VERDADE

   Branco sobre o laranja da marca (#FE5C21) da 3,1:1. A norma pede
   4,5:1 para texto normal. O botao que esta no ar hoje reprova, e
   copiar o laranja chapado manteria a reprovacao com acabamento melhor.

   Duas correcoes, juntas:

     1. O gradiente ESCURECE para baixo, que e fisica de vidro (luz em
        cima, sombra embaixo) e por acaso resolve metade do problema. No
        meio, onde o texto fica, o fundo e ~#E04A12: 4,1:1.

     2. O rotulo vai a 18,7px com peso 700. Acima de 18,66px em negrito
        a norma pede 3:1, nao 4,5:1, e ai passa com folga.

   O laranja da marca continua intacto no topo, que e onde o olho le a
   cor. Nenhuma das duas correcoes seria suficiente sozinha.
   ========================================================================= */

body.dx-pagina-nova .dx-botao--cheio{
  position: relative;
  /* Cria contexto de empilhamento para os arcos poderem ir para tras do
     texto com z-index negativo sem escapar do botao. */
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--r-pilula);

  background:
    /* calota quente no canto alto esquerdo, como a lente tem */
    radial-gradient(76% 120% at 22% -10%, rgba(255, 214, 180, 0.34) 0%, transparent 56%),
    linear-gradient(180deg, #FF6E38 0%, #F0531A 38%, #DF4A12 68%, #CE400C 100%);
  backdrop-filter: saturate(1.28) brightness(1.03);
  -webkit-backdrop-filter: saturate(1.28) brightness(1.03);

  box-shadow:
    inset 0 1.4px 0.8px rgba(255, 255, 255, 0.52),   /* sulco de luz no topo */
    inset 0 -1.4px 0.8px rgba(94, 24, 0, 0.42),      /* e a sombra na base */
    inset 1.6px 0 1.4px rgba(255, 255, 255, 0.11),
    inset -1.6px 0 1.4px rgba(255, 255, 255, 0.11),
    0 12px 28px -12px rgba(254, 92, 33, 0.62),       /* o brilho quente */
    0 2px 7px -3px rgba(11, 11, 10, 0.42);

  color: #fff;
  font-size: 1.17rem;      /* 18,7px: ver a nota de contraste acima */
  font-weight: 700;
  letter-spacing: -0.005em;
  /* Nao e enfeite: encosta o branco na borda escura das letras e
     segura a leitura quando o gradiente clareia no topo. */
  text-shadow: 0 1px 2px rgba(104, 28, 0, 0.42);

  transition: box-shadow var(--d-rapido) var(--c-saida),
              transform var(--d-rapido) var(--c-saida),
              filter var(--d-rapido) var(--c-saida);
}

/* ---------- Os dois arcos especulares ----------
   Borda inteira acesa parece neon. Borda com as pontas apagadas parece
   reflexo, porque e assim que a luz corre num corpo curvo. A mascara
   faz exatamente isso: apaga os 22% de cada ponta. */
body.dx-pagina-nova .dx-botao--cheio::before,body.dx-pagina-nova .dx-botao--cheio::after{
  content: '';
  position: absolute;
  left: 7%; right: 7%;
  height: 46%;
  z-index: -1;                /* atras do rotulo, na frente do fundo */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
/* Quatro paradas, nao duas.

   Com dois pontos o brilho morria numa linha horizontal visivel no meio
   do botao: a queda de 0.40 para 0.08 era rapida demais e o olho leu a
   emenda como borda. Reflexo em corpo curvo cai depressa no comeco e
   devagar no fim, e e isso que as paradas intermediarias descrevem. */
body.dx-pagina-nova .dx-botao--cheio::before{
  top: 0;
  height: 52%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 255, 255, 0.17) 26%,
    rgba(255, 255, 255, 0.06) 56%,
    rgba(255, 255, 255, 0.015) 80%,
    transparent 100%);
}
/* O de baixo e quente, nao branco: e luz que voltou do corpo laranja,
   nao luz direta. Branco ali faria o botao parecer molhado. */
body.dx-pagina-nova .dx-botao--cheio::after{
  bottom: 0;
  background: linear-gradient(0deg,
    rgba(255, 206, 170, 0.20) 0%,
    transparent 72%);
}

body.dx-pagina-nova .dx-botao--cheio:hover{
  /* O corpo nao muda de cor: a luz e que aumenta. Trocar o fundo no
     hover apagaria o gradiente inteiro e o vidro sumiria por meio
     segundo, que e justamente quando a pessoa esta olhando. */
  background: /* repetido de proposito: o hover do sistema.css troca o
                 fundo chapado e venceria por ordem de carga */
    radial-gradient(76% 120% at 22% -10%, rgba(255, 214, 180, 0.42) 0%, transparent 58%),
    linear-gradient(180deg, #FF7540 0%, #F55A20 38%, #E44E14 68%, #D4430D 100%);
  box-shadow:
    inset 0 1.4px 0.8px rgba(255, 255, 255, 0.62),
    inset 0 -1.4px 0.8px rgba(94, 24, 0, 0.40),
    inset 1.6px 0 1.4px rgba(255, 255, 255, 0.13),
    inset -1.6px 0 1.4px rgba(255, 255, 255, 0.13),
    0 16px 34px -12px rgba(254, 92, 33, 0.72),
    0 3px 9px -3px rgba(11, 11, 10, 0.44);
}

/* ---------- O clique ----------
   O corpo AFUNDA: o sulco de luz do topo encolhe, a sombra interna
   cresce e o brilho externo recolhe. E o movimento de apertar algo
   macio, nao de mover algo rigido. */
body.dx-pagina-nova .dx-botao--cheio:active{
  transform: translateY(1px) scale(0.993);
  box-shadow:
    inset 0 2.5px 5px rgba(94, 24, 0, 0.50),
    inset 0 1px 0.6px rgba(255, 255, 255, 0.30),
    0 4px 12px -8px rgba(254, 92, 33, 0.50);
}

body.dx-pagina-nova .dx-botao--cheio:focus-visible{
  outline: 2px solid var(--preto);
  outline-offset: 3px;
}

/* ---------- Travado: vidro morto ----------
   Sem escolha de voltagem ele nao e um botao laranja apagado: e vidro
   sem luz. Os arcos somem, o gradiente fica cinza e o brilho quente vai
   embora. Assim a volta do laranja, quando a pessoa escolhe, e um
   acontecimento visivel, e nao so uma opacidade subindo. */
body.dx-pagina-nova .dx-botao--cheio[disabled]{
  background: linear-gradient(180deg, #DEDCD7 0%, #CDCBC5 58%, #C2C0BA 100%);
  border-color: rgba(255, 255, 255, 0.40);
  box-shadow:
    inset 0 1.2px 0.8px rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(11, 11, 10, 0.10);
  color: #54554F;
  text-shadow: none;
  cursor: not-allowed;
  transform: none;
}
body.dx-pagina-nova .dx-botao--cheio[disabled]::before,body.dx-pagina-nova .dx-botao--cheio[disabled]::after{ opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body.dx-pagina-nova .dx-botao--cheio{ transition: none; }
  body.dx-pagina-nova .dx-botao--cheio:active{ transform: none; }
}


/* ====== assets/css/resumo-producao.css · ja escopada, passa inteira ====== */

/* =========================================================================
   O RESUMO DO PRODUTO, EM PRODUÇÃO
   -------------------------------------------------------------------------
   Esta folha veste a METADE DE CIMA da página, que é do WooCommerce:
   foto, nome, preço, seletor de voltagem e botão de comprar.

   POR QUE ELA É SEPARADA DO RESTO

   O CSS do bloco está preso a `.dx-produto`, a div do HTML Block. Isso
   protege o site inteiro, e também impede de alcançar o resumo, que
   vive fora dessa div.

   Aqui o escopo é `body.dx-pagina-nova`, classe que o mu-plugin só
   adiciona em produto que tem o bloco novo. Uma página de produto
   antiga não recebe nada disto.

   O QUE ESTA FOLHA NÃO FAZ

   Não mexe em comportamento. Não esconde botão, não troca campo, não
   altera o formulário de variação. Só tipografia, cor, espaço e forma.
   Quem faz a compra funcionar continua sendo o WooCommerce, intocado.
   ========================================================================= */

/* ---------- Tipografia do nome ----------
   O tema escreve o nome em caixa alta, cor mostarda e Manrope. Três
   decisões que não são nossas e que brigam com o resto da página: o
   bloco logo abaixo usa Archivo, caixa normal e preto.

   Caixa alta também custa legibilidade em nome de produto, porque
   remove as ascendentes e descendentes que o olho usa para reconhecer
   a palavra sem soletrar. */
body.dx-pagina-nova .product_title {
  font-family: var(--fonte-display, 'Archivo', sans-serif);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-transform: none;
  color: var(--preto, #0B0B0A);
}

/* ---------- O preço ----------
   Archivo, tabular e pesado. Tabular porque o número muda quando a
   pessoa escolhe a voltagem, e sem largura fixa de dígito o preço
   "pula" na troca, o que chama atenção para o movimento em vez de para
   o valor. */
/* `.summary-inner` tambem, e nao so `.summary`.
   O Woodmart embrulha o preco numa div a mais, e a regra escrita so
   para `.summary .price` nunca casava: o preco continuou Manrope e em
   caixa alta, e o "a" da faixa saia como "A". */
body.dx-pagina-nova .summary .price,
body.dx-pagina-nova .summary-inner .price,
body.dx-pagina-nova .summary .price .amount,
body.dx-pagina-nova .summary-inner .price .amount,
body.dx-pagina-nova .summary-inner .price bdi {
  font-family: var(--fonte-display, 'Archivo', sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--preto, #0B0B0A);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
body.dx-pagina-nova .summary > .price,
body.dx-pagina-nova .summary-inner > .price { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }

/* O "Faixa de preço: ... através ..." que o WooCommerce põe para leitor
   de tela fica, porque é acessibilidade, mas não ocupa espaço na tela. */
body.dx-pagina-nova .summary .price .screen-reader-text,
body.dx-pagina-nova .summary-inner .price .screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- A descrição curta ----------
   Ela carrega o aviso de pré-venda, que é informação de compra e não
   enfeite. Em vermelho puro parecia erro de sistema; em âmbar sobre
   fundo quente lê como aviso. */
body.dx-pagina-nova .woocommerce-product-details__short-description {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--inox, #6E6F6C);
}
body.dx-pagina-nova .woocommerce-product-details__short-description strong,
body.dx-pagina-nova .woocommerce-product-details__short-description b {
  color: var(--preto, #0B0B0A);
  font-weight: 600;
}

/* ---------- O seletor de voltagem ----------
   O tema entrega uma <table class="variations"> com um <select> dentro.
   A tabela existe por herança do WooCommerce antigo e não tem função
   aqui: é uma linha só, com rótulo e campo.

   O select continua no DOM e continua sendo a fonte da verdade da
   compra. O que muda é que ele fica invisível e o trilho de vidro
   assume a interação, escrevendo nele. Ver resumo-producao.js.

   Se o JavaScript falhar, o select volta a aparecer: a regra que o
   esconde depende da classe que só o script adiciona. Página de
   produto que não vende por falta de script é o pior desfecho
   possível, e ele está impedido por construção. */
body.dx-pagina-nova table.variations {
  display: block;
  width: 100%;
  margin: 0 0 var(--e5, 24px);
  border: 0;
}
body.dx-pagina-nova table.variations tbody,
body.dx-pagina-nova table.variations tr,
body.dx-pagina-nova table.variations th,
body.dx-pagina-nova table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

body.dx-pagina-nova table.variations label {
  display: block;
  margin-bottom: var(--e3, 12px);
  font-family: var(--fonte-ui, 'Inter Tight', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inox, #6E6F6C);
}

/* O select só desaparece DEPOIS de o trilho existir. */
body.dx-pagina-nova .dx-trilho-pronto .woo-variation-select-wrap,
body.dx-pagina-nova .dx-trilho-pronto select {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Limpar", que o WooCommerce mostra depois da escolha. Ele é útil, mas
   não precisa do peso de um link no meio da decisão. */
body.dx-pagina-nova .reset_variations {
  display: inline-block;
  margin-top: var(--e3, 12px);
  font-size: 0.78rem;
  color: var(--inox, #6E6F6C);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- O aviso de tensão ----------
   Escrito pelo JavaScript logo abaixo do trilho, porque é ali que a
   pessoa está olhando quando decide. No rodapé ninguém leria antes de
   pagar. */
body.dx-pagina-nova .dx-volt-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--e3, 12px) 0 var(--e5, 24px);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ambar, #FE5C21);
}
body.dx-pagina-nova .dx-volt-aviso svg {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 1px;
}

/* ---------- Forca sobre o tema ----------
   O Woodmart escreve `.product_title` com caixa alta, Manrope e
   mostarda, e vence por ordem de carga: a folha dele entra depois da
   nossa, e empate de especificidade e resolvido pela ordem.

   `body.dx-pagina-nova .summary .product_title` soma uma classe a mais
   que a regra do tema, entao ganha sem precisar de `!important`.

   Evitar `!important` aqui nao e purismo: ele tira a possibilidade de
   alguem ajustar isso pelo painel do tema depois, e este site e operado
   por quem nao mexe em codigo. */
body.dx-pagina-nova .summary .product_title,
body.dx-pagina-nova .entry-summary .product_title {
  font-family: var(--fonte-display, 'Archivo', sans-serif);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-transform: none;
  color: var(--preto, #0B0B0A);
}

/* ---------- O reset de botao, que faltava aqui ----------
   O `sistema.css` neutraliza `button` dentro de `.dx-produto`. O trilho
   agora vive FORA dessa div, no resumo, entao chegou sem reset: o tema
   pintou as duas opcoes de branco, com borda e raio proprios, e o
   trilho virou duas pilulas claras dentro de um sulco escuro.

   Mesma licao do comeco do projeto: o que a gente nao declara e o que o
   Woodmart vence. */
body.dx-pagina-nova .dx-trilho .dx-opcao {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: var(--r-pilula, 999px);
  box-shadow: none;
  min-height: 0;
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--fonte-ui, 'Inter Tight', sans-serif);
}
body.dx-pagina-nova .dx-trilho .dx-opcao:hover,
body.dx-pagina-nova .dx-trilho .dx-opcao:focus {
  background: none;
  box-shadow: none;
}
body.dx-pagina-nova .dx-opcao__v {
  font-family: var(--fonte-display, 'Archivo', sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* O trilho precisa de altura propria: sem as duas linhas da opcao, ele
   nasceria raso demais para a lente estufar para fora. */
body.dx-pagina-nova .dx-trilho .dx-opcao { padding: 12px var(--e5, 24px); }

/* ---------- O botao de comprar ----------
   Herda o vidro ambar do design system. A regra completa ja esta na
   folha do bloco, presa a `.dx-botao--cheio`; aqui ela e aplicada ao
   botao que o WooCommerce escreve, que tem outro nome de classe.

   O gradiente escurece para baixo por fisica de vidro, e por acaso
   resolve o contraste: branco sobre o laranja puro da marca da 3,1:1, e
   a norma pede 4,5:1. No meio, onde o texto senta, da ~4,1:1, e o
   rotulo vai a 18,7px com peso 700, faixa em que a norma pede 3:1. */
body.dx-pagina-nova .single_add_to_cart_button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--r-pilula, 999px);
  background:
    radial-gradient(76% 120% at 22% -10%, rgba(255, 214, 180, 0.34) 0%, transparent 56%),
    linear-gradient(180deg, #FF6E38 0%, #F0531A 38%, #DF4A12 68%, #CE400C 100%);
  box-shadow:
    inset 0 1.4px 0.8px rgba(255, 255, 255, 0.52),
    inset 0 -1.4px 0.8px rgba(94, 24, 0, 0.42),
    inset 1.6px 0 1.4px rgba(255, 255, 255, 0.11),
    inset -1.6px 0 1.4px rgba(255, 255, 255, 0.11),
    0 12px 28px -12px rgba(254, 92, 33, 0.62),
    0 2px 7px -3px rgba(11, 11, 10, 0.42);
  color: #fff;
  font-family: var(--fonte-ui, 'Inter Tight', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(104, 28, 0, 0.42);
  transition: box-shadow 180ms var(--c-saida, cubic-bezier(0.22,1,0.36,1)),
              transform 180ms var(--c-saida, cubic-bezier(0.22,1,0.36,1));
}
body.dx-pagina-nova .single_add_to_cart_button::before {
  content: '';
  position: absolute;
  left: 7%; right: 7%;
  top: 0;
  height: 52%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.17) 26%,
    rgba(255,255,255,0.06) 56%, rgba(255,255,255,0.015) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
body.dx-pagina-nova .single_add_to_cart_button:hover {
  background:
    radial-gradient(76% 120% at 22% -10%, rgba(255, 214, 180, 0.42) 0%, transparent 58%),
    linear-gradient(180deg, #FF7540 0%, #F55A20 38%, #E44E14 68%, #D4430D 100%);
  box-shadow:
    inset 0 1.4px 0.8px rgba(255, 255, 255, 0.62),
    inset 0 -1.4px 0.8px rgba(94, 24, 0, 0.40),
    0 16px 34px -12px rgba(254, 92, 33, 0.72);
}
body.dx-pagina-nova .single_add_to_cart_button:active {
  transform: translateY(1px) scale(0.993);
}

/* Travado ate a voltagem ser escolhida: vidro morto, nao laranja
   apagado. Assim a volta da cor, quando a pessoa escolhe, e um
   acontecimento visivel. */
body.dx-pagina-nova .single_add_to_cart_button.disabled,
body.dx-pagina-nova .single_add_to_cart_button[disabled] {
  background: linear-gradient(180deg, #DEDCD7 0%, #CDCBC5 58%, #C2C0BA 100%);
  border-color: rgba(255,255,255,0.40);
  box-shadow: inset 0 1.2px 0.8px rgba(255,255,255,0.60), inset 0 -1px 0 rgba(11,11,10,0.10);
  color: #54554F;
  text-shadow: none;
  opacity: 1;              /* o tema baixa a opacidade e apaga o texto */
  cursor: not-allowed;
}
body.dx-pagina-nova .single_add_to_cart_button.disabled::before { opacity: 0; }

/* ---------- Detalhes que o tema escreve ---------- */

/* O "a" da faixa de preco vinha em caixa alta porque o tema aplica
   `text-transform` no bloco inteiro do preco. */
body.dx-pagina-nova .summary .price,
body.dx-pagina-nova .summary-inner .price { text-transform: none; }

/* O vermelho puro da pre-venda lia como erro de sistema. Ambar e a cor
   de aviso do resto da pagina. */
body.dx-pagina-nova .woocommerce-product-details__short-description span[style*="color"],
body.dx-pagina-nova .woocommerce-product-details__short-description font {
  color: var(--ambar, #FE5C21) !important;
}

/* O dois-pontos depois de "Voltagem" e do tema e nao tem funcao: o
   rotulo ja esta separado do campo pelo espaco. */
body.dx-pagina-nova table.variations label::after { content: none; }

/* ---------- A segunda linha da opcao ----------
   Vem da descricao da variacao, editavel no painel. Ver
   resumo-producao.js. */
body.dx-pagina-nova .dx-trilho .dx-opcao {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  white-space: normal;
  text-align: left;
}
body.dx-pagina-nova .dx-opcao__d {
  font-family: var(--fonte-ui, 'Inter Tight', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.74;
}
body.dx-pagina-nova .dx-trilho > .dx-opcao { flex: 1 1 0; }

/* ---------- O simulador de frete antigo sai ----------
   O `wc-simulador-frete` 1.7.3 aparece DUAS vezes nesta pagina, e o
   Ricardo ja avaliou: desatualizado, de outro fornecedor, nunca
   funciona direito e nao e seguro (GET para admin-ajax sem nonce,
   formulario inteiro serializado, disparo a cada tecla).

   Ele sai de cena so nas paginas com o bloco novo, onde o simulador
   proprio vai entrar no lugar. Nas outras continua, porque la ainda e
   o unico que existe.

   O plugin continua instalado: desativar afeta a loja inteira e nao e
   decisao desta pagina. */
body.dx-pagina-nova .wc-shipping-simulator,
body.dx-pagina-nova .shipping-simulator-wrapper,
body.dx-pagina-nova .frenet-shipping-simulator-form { display: none; }

/* ---------- "Limpar" nao se sobrepoe ao preco ----------
   O WooCommerce posiciona o link em absoluto, e ele caia por cima do
   preco da variacao escolhida. */
body.dx-pagina-nova .woocommerce-variation-add-to-cart,
body.dx-pagina-nova .single_variation_wrap { position: relative; }
body.dx-pagina-nova .reset_variations {
  position: static;
  margin: 0 0 var(--e3, 12px);
}
body.dx-pagina-nova .woocommerce-variation-price {
  margin-bottom: var(--e4, 16px);
}
body.dx-pagina-nova .woocommerce-variation-price .amount {
  font-family: var(--fonte-display, 'Archivo', sans-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--preto, #0B0B0A);
}

/* Com a voltagem escolhida, a faixa de preco la de cima some: ela
   existia para dizer "depende da escolha", e a escolha ja aconteceu.
   Duas cifras diferentes na mesma tela confundem. */
body.dx-pagina-nova .summary-inner > .price:has(+ * .woocommerce-variation-price:not(:empty)) { display: none; }


/* ---------- Vencer o CSS inline do tema ----------
   O Woodmart escreve um bloco <style> INLINE, no proprio HTML, com:

     html .product-image-summary-wrap .summary-inner > .price { ... }

   Especificidade (0,3,1), igual a minha. Empate e resolvido pela
   ordem, e estilo inline no documento vem depois de qualquer folha
   externa: o tema ganhava sempre.

   `html body.dx-pagina-nova` sobe para (0,3,2): mesmo numero de
   classes, um elemento a mais. Ganha sem `!important`, e sem
   `!important` o Ricardo continua podendo ajustar pelo painel. */
html body.dx-pagina-nova .summary-inner > .price,
html body.dx-pagina-nova .summary-inner > .price .amount,
html body.dx-pagina-nova .summary-inner > .price bdi,
html body.dx-pagina-nova .wd-single-price .price {
  font-family: var(--fonte-display, 'Archivo', sans-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--preto, #0B0B0A);
  font-variant-numeric: tabular-nums;
}

html body.dx-pagina-nova .product_title {
  font-family: var(--fonte-display, 'Archivo', sans-serif);
  text-transform: none;
  color: var(--preto, #0B0B0A);
}

/* =========================================================================
   OS QUATRO RESTOS
   ========================================================================= */

/* 1 · A FAIXA DE PRECO SOME QUANDO HA ESCOLHA.
   Com a voltagem escolhida o WooCommerce escreve o preco exato logo
   abaixo. Deixar a faixa la em cima punha duas cifras diferentes na
   mesma tela, e a pessoa fica conferindo uma contra a outra em vez de
   comprar.

   A faixa existia para dizer "depende da escolha". A escolha aconteceu. */
html body.dx-pagina-nova .summary-inner:has(.woocommerce-variation-price .amount) > .price {
  display: none;
}

/* 2 · A DESCRICAO DA VARIACAO NAO SE REPETE.
   O WooCommerce imprime "3000 W · 2 × 1500 W" embaixo do seletor. E a
   mesma frase que ja esta dentro da opcao escolhida, a dois centimetros
   dali. Ela continua no painel, cumprindo o papel de alimentar o
   trilho, mas nao aparece duas vezes. */
html body.dx-pagina-nova .woocommerce-variation-description { display: none; }

/* 3 · O SIMULADOR DE FRETE ANTIGO, DE VERDADE.
   A regra anterior era (0,2,0) e o plugin vencia. Aqui vai com
   `!important`, e nesse caso ele se justifica: nao e ajuste de
   acabamento, e remocao de um componente de terceiro que o Ricardo
   avaliou como inseguro e que vai ser substituido. Sem `!important`
   voltaria a aparecer no proximo update do plugin. */
html body.dx-pagina-nova .wc-shipping-simulator,
html body.dx-pagina-nova .shipping-simulator-wrapper,
html body.dx-pagina-nova .frenet-shipping-simulator-form { display: none !important; }

/* 4 · "LIMPAR" RECUA.
   Ele e util e fica, mas em cinza pequeno: no meio da decisao de compra
   ele nao disputa atencao com o preco e o botao. */
html body.dx-pagina-nova .reset_variations {
  display: inline-block;
  margin: 0 0 var(--e2, 8px);
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--inox-claro, #9A9B98);
  text-decoration: underline;
  text-underline-offset: 2px;
}
html body.dx-pagina-nova .reset_variations:hover { color: var(--inox, #6E6F6C); }

/* =========================================================================
   ALINHAR COM O MOCKUP, VALOR POR VALOR
   -------------------------------------------------------------------------
   Nao e ajuste de gosto. Cada numero aqui saiu de medir o mockup e
   producao lado a lado, propriedade por propriedade, e corrigir a
   diferenca. O comparador esta em scripts/comparar.js.

   Eu tinha dito que estava fiel sem ter comparado esta metade da
   pagina. Estava comparando so o bloco da descricao.
   ========================================================================= */

/* O trilho chegou com o valor ORIGINAL da Black November, `0.64`, que
   e preto so sobre fundo preto. Sobre papel branco vira cinza e o
   vidro perde o que refratar. O mockup usa `0.95`, e esse ajuste
   estava em resumo.css, folha que nao entra no pacote de producao. */
html body.dx-pagina-nova .dx-trilho {
  background: rgba(11, 11, 10, 0.95);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.70),
    inset 0 -1px 0 rgba(244,241,236,0.05),
    0 10px 26px -14px rgba(11,11,10,0.55);
}

/* Rotulo nao escolhido: 0.76 no mockup, nao 0.60. Com 0.60 as duas
   opcoes ficavam apagadas demais antes da escolha, e a pessoa nao lia
   o que estava escolhendo. */
html body.dx-pagina-nova .dx-trilho:not([data-pronto]) .dx-opcao {
  color: rgba(244, 241, 236, 0.76);
}
html body.dx-pagina-nova .dx-trilho .dx-opcao { padding: 11px 16px; }

/* Nome: 35,2px no mockup contra 41,6px aqui. O clamp era outro. */
html body.dx-pagina-nova .product_title {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Preco: 33,6px no mockup. */
html body.dx-pagina-nova .summary-inner > .price,
html body.dx-pagina-nova .summary-inner > .price .amount,
html body.dx-pagina-nova .summary-inner > .price bdi {
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
}

/* Botao: 52px de altura e 16px de corpo, como o mockup. Os 42px que
   estavam aqui vinham do tema e deixavam o botao raso demais para o
   peso que ele tem na pagina. */
html body.dx-pagina-nova .single_add_to_cart_button {
  min-height: 52px;
  padding: 0 var(--e6, 32px);
  font-size: 1rem;
}

/* A linha do parcelamento, que nao existia.
   Escrita pelo JavaScript logo abaixo do preco. Antes da escolha ela
   diz que o valor depende da voltagem; depois, mostra em quantas vezes
   da para dividir. */
html body.dx-pagina-nova .dx-parcela {
  display: block;
  margin-top: 4px;
  font-family: var(--fonte-ui, 'Inter Tight', sans-serif);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--inox, #6E6F6C);
}
html body.dx-pagina-nova .dx-parcela b { color: var(--grafite, #1A1A18); font-weight: 600; }
html body.dx-pagina-nova .dx-parcela i { font-style: normal; }

/* ---------- Especificidade, de novo ----------
   As regras de tamanho acima perdiam para as minhas PROPRIAS regras
   anteriores, escritas com `.summary` no meio, que somam uma classe a
   mais. Empate de classe decide por contagem, e `html body.X .product_title`
   tem 2 classes contra 3 de `body.X .summary .product_title`.

   Em vez de continuar empilhando seletor, estas ficam com o mesmo
   numero de classes das primeiras e vem depois, que e o jeito
   previsivel de ganhar. */
html body.dx-pagina-nova .summary-inner .product_title {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
}

html body.dx-pagina-nova .summary-inner > .price,
html body.dx-pagina-nova .summary-inner > .price .amount,
html body.dx-pagina-nova .summary-inner > .price bdi {
  font-size: 2.1rem;
}
@media (max-width: 900px) {
  html body.dx-pagina-nova .summary-inner > .price,
  html body.dx-pagina-nova .summary-inner > .price .amount,
  html body.dx-pagina-nova .summary-inner > .price bdi {
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  }
}

/* O bloco movel do nome, no celular. Ver resumo-producao.js. */
html body.dx-pagina-nova .dx-cabeca-movel {
  margin-bottom: var(--e5, 24px);
}
html body.dx-pagina-nova .dx-cabeca-movel .product_title { margin-bottom: 6px; }

/* ---------- [hidden] tem que vencer ----------
   Terceira vez neste projeto. `[hidden]` e so (0,1,0) vindo do
   navegador, entao qualquer regra nossa com `display` o vence e o
   elemento aparece mesmo escondido.

   No prototipo isso deixou uma barra bege vazia dentro do frete. Aqui
   deixou a caixa de aviso da pre-venda visivel e SEM TEXTO, que e pior:
   parece erro de carregamento.

   Escopado para nao mexer no resto do site. */
html body.dx-pagina-nova [hidden] { display: none !important; }

/* ---------- O aviso de pre-venda ----------
   Portado do mockup (.dx-prevenda em resumo.css). Caixa quente com
   icone, logo abaixo do preco. */
html body.dx-pagina-nova .dx-prevenda {
  display: flex;
  align-items: flex-start;
  gap: var(--e3, 12px);
  margin: var(--e4, 16px) 0 var(--e5, 24px);
  padding: var(--e4, 16px);
  border: 1px solid #F3D9A9;
  border-radius: var(--r-pequeno, 8px);
  background: #FFFBF2;
  font-size: var(--t-apoio, 0.94rem);
  line-height: 1.5;
  color: #6B4E12;
}
html body.dx-pagina-nova .dx-prevenda svg {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--ouro, #D99A1E);
}
html body.dx-pagina-nova .dx-prevenda b { color: #4A3608; font-weight: 700; }

/* ---------- O breadcrumb sai do meio da pagina ----------
   O Woodmart o imprime DENTRO do resumo, entre a galeria e o preco no
   celular. Ali ele corta a leitura exatamente no ponto em que a pessoa
   esta indo do produto para o valor.

   Ele nao some do site: so sai deste lugar, nas paginas com o bloco
   novo. Quem precisa dele para navegar tem o menu e o botao de voltar. */
@media (max-width: 768px) {
  html body.dx-pagina-nova .summary-inner .single-breadcrumbs-wrapper { display: none; }
}

/* ---------- No celular, o botao ocupa a largura toda ----------
   Lado a lado com o seletor de quantidade ele fica estreito demais para
   o peso que tem: e a acao principal da pagina. No mockup a quantidade
   fica acima, centralizada, e o botao embaixo, inteiro. */
@media (max-width: 768px) {
  html body.dx-pagina-nova .woocommerce-variation-add-to-cart,
  html body.dx-pagina-nova form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3, 12px);
  }
  html body.dx-pagina-nova .woocommerce-variation-add-to-cart .quantity,
  html body.dx-pagina-nova form.cart .quantity { flex: 0 0 auto; }
  html body.dx-pagina-nova .single_add_to_cart_button { flex: 1 1 100%; }
}

/* ---------- O preco do acessorio nao quebra de linha ----------
   No celular o nome longo empurrava o valor para a linha de baixo, e a
   linha perdia a leitura de "produto a tanto". */
html body.dx-pagina-nova .dx-item__preco { white-space: nowrap; }

/* ---------- O "R$" menor, como no mockup ---------- */
html body.dx-pagina-nova .summary-inner > .price .woocommerce-Price-currencySymbol,
html body.dx-pagina-nova .woocommerce-variation-price .woocommerce-Price-currencySymbol {
  font-size: 0.56em;
  font-weight: 700;
  vertical-align: 0.42em;
  margin-right: 2px;
}

/* =========================================================================
   A GALERIA E O SELETOR DE QUANTIDADE
   -------------------------------------------------------------------------
   As duas ultimas pecas que a comparacao lado a lado ainda acusava.
   Nenhuma das duas aparecia nas minhas medicoes anteriores porque eu
   media seletor por seletor, e so olhando a pagina inteira ao lado do
   mockup elas saltaram.
   ========================================================================= */

/* ---------- O palco da foto ----------
   No mockup a foto mora numa caixa bege arredondada, com folga em volta.
   Isso faz o produto preto flutuar em vez de encostar na borda da tela,
   e e o que da ao bloco a mesma respiracao do resto da pagina. */
html body.dx-pagina-nova .wd-gallery-images {
  border-radius: var(--r-card, 14px);
  background: var(--papel-morno, #F7F6F3);
  overflow: hidden;
}
html body.dx-pagina-nova .wd-gallery-images img {
  padding: clamp(20px, 5vw, 48px);
  mix-blend-mode: multiply;   /* o fundo branco do render some no bege */
}

/* ---------- As miniaturas ----------
   Moldura clara, e ambar na que esta sendo vista. Sem moldura elas
   boiavam soltas e nao dava para saber qual estava ativa. */
html body.dx-pagina-nova .wd-gallery-thumb img {
  border: 1px solid var(--fio, #E4E3DF);
  border-radius: var(--r-pequeno, 8px);
  background: var(--papel-morno, #F7F6F3);
  padding: 6px;
  transition: border-color 180ms var(--c-saida, ease);
}
html body.dx-pagina-nova .wd-gallery-thumb .wd-active img,
html body.dx-pagina-nova .wd-gallery-thumb [class*="active"] img {
  border-color: var(--ambar, #FE5C21);
}

/* ---------- O seletor de quantidade ----------
   Pilula larga, como no mockup. A caixinha estreita do tema deixava os
   alvos de - e + com menos de 30px, que erra no dedo. */
html body.dx-pagina-nova .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--fio-forte, #CFCEC9);
  border-radius: var(--r-pilula, 999px);
  overflow: hidden;
  background: var(--papel, #fff);
}
html body.dx-pagina-nova .quantity .minus,
html body.dx-pagina-nova .quantity .plus {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 52px;
  border: 0;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--inox, #6E6F6C);
  cursor: pointer;
}
html body.dx-pagina-nova .quantity .minus:hover,
html body.dx-pagina-nova .quantity .plus:hover {
  color: var(--grafite, #1A1A18);
  background: var(--papel-morno, #F7F6F3);
}
html body.dx-pagina-nova .quantity input.qty {
  width: 44px;
  min-height: 52px;
  border: 0;
  background: none;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
html body.dx-pagina-nova .quantity input.qty::-webkit-outer-spin-button,
html body.dx-pagina-nova .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =========================================================================
   ESPACO PARA O BOTAO DO WHATSAPP
   -------------------------------------------------------------------------
   O botao fica, por decisao do Ricardo. Quem se mexe e o conteudo.

   MEDIDO, NAO CHUTADO

   O circulo do Joinchat tem 60x60px, a 14px da borda de baixo e da
   direita. O balao de dica tem 285x32px e termina a 28px do rodape. A
   faixa que eles ocupam no pe da tela e de 88px.

   O QUE ISSO RESOLVE E O QUE NAO RESOLVE

   Resolve o permanente: sem folga no fim da pagina, o ultimo bloco fica
   embaixo do botao para sempre, e se for clicavel vira botao que nao
   clica.

   Nao resolve o transitorio: um elemento fixo cobre o que passa por
   baixo dele enquanto a pessoa rola, e isso e inerente a botao
   flutuante. Tirar isso exigiria tirar o botao.

   Por que `:has()`: a folga so entra onde o botao existe de verdade. Se
   o plugin for desativado um dia, a pagina nao fica com um vao
   inexplicavel no pe. */
/* A FOLGA VAI NO RODAPE, NAO NO BLOCO DO PRODUTO.

   Eu tinha posto no `.product-extra-content`, e nao resolvia nada: o
   rodape vem DEPOIS dele, com `padding-bottom: 0`, e e a linha de
   copyright que acaba embaixo do botao. Quem esta no fim da pagina ve o
   WhatsApp tapando "Copyright ® 2016-2022 | DINOXX".

   Folga no lugar errado e pior que folga nenhuma: da a impressao de que
   o problema foi tratado. */
html body.dx-pagina-nova:has([class*="joinchat"]) .wd-copyrights,
html body.dx-pagina-nova:has([class*="joinchat"]) .copyrights-wrapper {
  padding-bottom: 96px;
}

/* No bloco do produto fica so a respiracao normal do fim de secao. */
html body.dx-pagina-nova .product-extra-content { padding-bottom: var(--e7, 40px); }

/* No celular a faixa tambem protege o fim do resumo, porque o botao de
   comprar e o "leve junto" ficam perto do pe da tela quando a pessoa
   para de rolar. */
@media (max-width: 768px) {
  html body.dx-pagina-nova:has([class*="joinchat"]) .dx-junto { margin-bottom: 88px; }
}

/* O balao de dica some ao primeiro toque, mas enquanto esta la ele cobre
   texto. Deixar ele por cima do nosso conteudo e aceitavel; deixar por
   cima de um BOTAO nosso nao e, porque a pessoa clica no lugar certo e
   nada acontece.

   Esta regra nao esconde o balao: ela garante que os nossos elementos
   clicaveis tenham camada propria acima dele, sem passar do z-index do
   proprio botao do WhatsApp (9000), que continua alcancavel. */
html body.dx-pagina-nova .dx-frete__op,
html body.dx-pagina-nova .dx-item,
html body.dx-pagina-nova [data-junto-add],
html body.dx-pagina-nova .single_add_to_cart_button {
  position: relative;
  z-index: 2;
}

/* =========================================================================
   A GALERIA, PADRONIZADA
   -------------------------------------------------------------------------
   O catálogo mistura três proporções na mesma galeria, e isso é medida,
   não impressão. Na Smart Play:

       0706cbce...        1511 x 1007   foto ambientada, 3:2
       salmao-na-grelha    800 x  800   foto ambientada, 1:1
       smartplay.png       629 x  503   render recortado, 5:4

   O carrossel do tema respeita a proporção de cada uma, então a altura
   mudava a cada troca de imagem: o bloco inteiro pulava para cima e para
   baixo enquanto a pessoa navegava, e a tira de miniaturas saía com peças
   de larguras diferentes.

   `aspect-ratio: 1 / 1` iguala todas as caixas.

   `contain` E NÃO `cover`, e essa é a decisão que importa: `cover`
   deixaria as fotos ambientadas lindas e CORTARIA os renders, tirando
   pedaço do produto. Numa galeria de produto, recorte que come a peça é
   erro; faixa de fundo nas pontas de uma foto 3:2 é só enquadramento.

   O fundo é o papel da marca, o mesmo da moldura da galeria, então as
   faixas somem na superfície em vez de virarem duas tiras.

   `html body` no começo: a folha do tema traz regra de imagem de galeria
   com peso alto, e sem o ponto extra de especificidade ela ganha. Já
   perdi uma rodada para isso neste mesmo arquivo.
   ========================================================================= */

html body.dx-pagina-nova .woocommerce-product-gallery__image img,
html body.dx-pagina-nova .wd-carousel-item .woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #F4F1EC;
}

/* As miniaturas seguem a mesma regra, senão a tira de baixo continua
   desencontrada mesmo com a imagem grande já igualada. */
html body.dx-pagina-nova .wd-gallery-thumb img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #F4F1EC;
  border-radius: 8px;
}

/* =========================================================================
   O PREÇO NÃO SE MEXE
   -------------------------------------------------------------------------
   O tema esconde o `.price` do topo assim que uma variação fica ativa, e
   o WooCommerce imprime o preço escolhido no bloco que vem DEPOIS do
   formulário. Medido na página: escolhida a voltagem, o preço saltava de
   logo abaixo do título para 550px mais embaixo, atrás do simulador de
   frete.

   Aqui o topo volta a aparecer e a cópia de baixo sai. O conteúdo do topo
   é atualizado em `resumo-producao.js`, que copia o preço da variação
   escolhida. Os dois trabalhos são necessários: só CSS mostraria a faixa
   "de X a Y" mesmo com uma voltagem ja escolhida.

   `html body` e `!important`: a regra do tema que esconde tem peso alto,
   e sem os dois ela ganha.
   ========================================================================= */
html body.dx-pagina-nova .summary-inner > .price {
  display: block !important;
}

html body.dx-pagina-nova .woocommerce-variation-price {
  display: none;
}

/* ---------- O "Limpar" ----------
   É o `reset_variations` do WooCommerce. Ele é útil num seletor que nasce
   sem escolha, porque permite voltar ao estado indeciso, mas vinha como
   link azul de formulário, sem relação com o resto.

   Discreto de propósito: desfazer não disputa atenção com escolher. */
html body.dx-pagina-nova .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(26, 26, 24, 0.5);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 26, 24, 0.18);
  transition: color 180ms ease, border-color 180ms ease;
}
html body.dx-pagina-nova .reset_variations:hover {
  color: #1A1A18;
  border-bottom-color: rgba(26, 26, 24, 0.45);
}

/* =========================================================================
   DOIS AJUSTES DE ALINHAMENTO, MEDIDOS NA TELA
   ========================================================================= */

/* ---------- O frete encostava na linha de compra ----------
   Medido: a base do cartão de frete e o topo do seletor de quantidade
   tinham ZERO pixel de distância. Dois controles colados leem como um
   só, e no toque a pessoa erra o alvo. */
html body.dx-pagina-nova .dx-frete { margin-bottom: 22px; }


/* ====== assets/css/compra-producao.css · ja escopada, passa inteira ====== */


/* =========================================================================
   FRETE E LEVE JUNTO · portados do mockup
   -------------------------------------------------------------------------
   Copiados de assets/css/resumo.css, que e onde o desenho foi aprovado
   na tela. Reescrever daqui perderia os ajustes finos de espaco e peso
   que so aparecem olhando.

   Escopo `body.dx-pagina-nova`, nao `.dx-produto`: as duas peças vivem
   na metade de cima da pagina, que e do WooCommerce.
   ========================================================================= */

html body.dx-pagina-nova .dx-frete{
  opacity: 0.6;
  transition: opacity var(--d-base) var(--c-saida);
}


/* =========================================================================
   SIMULADOR DE FRETE
   -------------------------------------------------------------------------
   Fica ABAIXO do preço e ACIMA do botão, porque é informação que a
   pessoa precisa para decidir, não depois de ter decidido. Hoje o
   plugin instalado o joga para dentro do `product_meta`, que é a área
   de SKU e categoria, abaixo do botão, e ainda por cima com display:
   none. Ou seja: carrega e não aparece.
   ========================================================================= */
html body.dx-pagina-nova .dx-frete{
  padding: var(--e5);
  border: 1px solid var(--fio);
  border-radius: var(--r-card);
  background: var(--papel-morno);
}

/* `baseline`, nao `center`.

   Sao dois textos de tamanhos diferentes lado a lado. Centralizar
   alinha as CAIXAS, nao as letras, e o link menor ficava flutuando
   fora da linha do titulo. Tentei compensar com margem negativa e so
   empurrei o erro para o outro lado: 3,8px viraram 6,9px.

   A linha de base e a ferramenta certa para isso. Texto com texto
   alinha pela base, sempre, independente do corpo de cada um. */
html body.dx-pagina-nova .dx-frete__topo{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e4);
}
html body.dx-pagina-nova .dx-frete__tit{
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-apoio); font-weight: 600; color: var(--grafite);
}
html body.dx-pagina-nova .dx-frete__tit svg{ width: 18px; height: 18px; color: var(--inox); }
/* Alvo de toque, nao so texto sublinhado.

   Com 18px de altura ele errava no celular: o dedo pega algo em torno
   de 9mm, e o que esta ao redor aqui e o titulo "Frete e prazo", que
   nao e clicavel. Quem erra o link nao acontece nada, e a pessoa acha
   que o link esta quebrado.

   O padding cresce a area sem crescer o texto, e o margin negativo
   impede que isso empurre o titulo ao lado. */
html body.dx-pagina-nova .dx-frete__ajuda{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  /* A margem negativa existe so para o alvo de toque de 32px nao
     empurrar o que esta ao redor. Quem alinha e o `baseline` do pai. */
  margin: -7px -6px;
  padding: 0 6px;
  font-size: var(--t-micro);
  color: var(--inox);
  text-decoration: underline;
  text-underline-offset: 2px;
}
html body.dx-pagina-nova .dx-frete__ajuda:hover{ color: var(--grafite); }

html body.dx-pagina-nova .dx-frete__campo{ display: flex; gap: var(--e3); }
html body.dx-pagina-nova .dx-frete__campo input{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--e4);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r-pequeno);
  background: var(--papel);
  font-size: var(--t-apoio);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
html body.dx-pagina-nova .dx-frete__campo input:focus-visible{ outline: 2px solid var(--ambar); outline-offset: 1px; }
html body.dx-pagina-nova .dx-frete__campo button{ flex: 0 0 auto; min-height: 48px; }

html body.dx-pagina-nova .dx-frete__erro{
  margin-top: var(--e3);
  font-size: var(--t-micro);
  font-weight: 600;
  color: #C0392B;
}

html body.dx-pagina-nova .dx-frete__lista{ display: grid; gap: var(--e2); margin-top: var(--e4); }

html body.dx-pagina-nova .dx-frete__op{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--fio);
  border-radius: var(--r-pequeno);
  background: var(--papel);
}
html body.dx-pagina-nova .dx-frete__op b{ font-size: var(--t-apoio); font-weight: 600; color: var(--grafite); }
html body.dx-pagina-nova .dx-frete__op i{
  grid-column: 1;
  font-style: normal;
  font-size: var(--t-micro);
  color: var(--inox);
}
html body.dx-pagina-nova .dx-frete__op span{
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--fonte-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--preto);
}

/* Na pré-venda o prazo da transportadora é só metade da conta: falta a
   disponibilidade. Mostrar "chega em 5 dias" num produto que só despacha
   em dezembro é prometer o que a operação não cumpre. */
html body.dx-pagina-nova .dx-frete__nota{
  display: flex; gap: var(--e2);
  margin-top: var(--e3);
  padding: var(--e3);
  border-radius: var(--r-pequeno);
  background: #FFFBF2;
  font-size: var(--t-micro);
  color: #6B4E12;
}

html body.dx-pagina-nova .dx-frete[data-carregando] .dx-frete__lista{ opacity: 0.45; }



html body.dx-pagina-nova .dx-junto{
  margin-top: var(--e5);
  padding: var(--e5);
  border: 1px solid var(--fio);
  border-radius: var(--r-card);
}
html body.dx-pagina-nova .dx-junto__tit{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e4);
}
html body.dx-pagina-nova .dx-junto__tit b{ font-size: var(--t-apoio); font-weight: 600; }
html body.dx-pagina-nova .dx-junto__tit i{ font-style: normal; font-size: var(--t-micro); color: var(--inox); }

html body.dx-pagina-nova .dx-junto__lista{ display: grid; gap: var(--e2); }

html body.dx-pagina-nova .dx-item{
  display: grid;
  grid-template-columns: auto 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid transparent;
  border-radius: var(--r-pequeno);
  cursor: pointer;
  transition: background var(--d-rapido) var(--c-saida),
              border-color var(--d-rapido) var(--c-saida);
}
html body.dx-pagina-nova .dx-item:hover{ background: var(--papel-morno); }
html body.dx-pagina-nova .dx-item[data-marcado]{ border-color: var(--ambar); background: var(--ambar-fundo); }

html body.dx-pagina-nova .dx-item__marca{
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1.5px solid var(--fio-forte);
  border-radius: 6px;
  background: var(--papel);
  color: transparent;
  transition: all var(--d-rapido) var(--c-saida);
}
html body.dx-pagina-nova .dx-item[data-marcado] .dx-item__marca{
  border-color: var(--ambar); background: var(--ambar); color: #FFFFFF;
}
html body.dx-pagina-nova .dx-item__marca svg{ width: 13px; height: 13px; }

html body.dx-pagina-nova .dx-item__foto{
  width: 56px; aspect-ratio: 1;
  border-radius: 6px;
  background: var(--papel-morno);
  object-fit: contain;
  padding: 4px;
}
html body.dx-pagina-nova .dx-item__nome{ font-size: var(--t-apoio); font-weight: 600; line-height: 1.3; }
html body.dx-pagina-nova .dx-item__nota{ font-size: var(--t-micro); color: var(--inox); font-weight: 400; }
html body.dx-pagina-nova .dx-item__preco{
  font-family: var(--fonte-display);
  font-size: 0.98rem; font-weight: 700; color: var(--preto);
  white-space: nowrap;
}

html body.dx-pagina-nova .dx-junto__pe{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); margin-top: var(--e4); padding-top: var(--e4);
  border-top: 1px solid var(--fio);
}
html body.dx-pagina-nova .dx-junto__total{ font-size: var(--t-micro); color: var(--inox); }
html body.dx-pagina-nova .dx-junto__total b{
  display: block;
  font-family: var(--fonte-display);
  font-size: 1.25rem; font-weight: 800; color: var(--preto);
}

@media (max-width: 900px) {
  /* Uma coluna so, e o nome assume o topo. Ver o comentario das areas:
     e aqui que a promessa passa na frente da foto. */
  html body.dx-pagina-nova .dx-resumo{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "cabeca" "galeria" "compra";
    gap: var(--e5);
  }
  html body.dx-pagina-nova .dx-galeria{ position: static; }
  html body.dx-pagina-nova .dx-acao{ flex-wrap: wrap; }
  html body.dx-pagina-nova .dx-acao .dx-botao{ flex-basis: 100%; }
  html body.dx-pagina-nova .dx-item{ grid-template-columns: auto 48px minmax(0, 1fr); }
  html body.dx-pagina-nova .dx-item__preco{ grid-column: 3; grid-row: 2; }
}

/* ---------- Leve junto: a nota precisa de linha propria ----------
   Sem isto o nome e a medida encostam: "Bolsa de transporte53 x 33 cm".
   Era um span dentro de outro span, os dois em linha. */
html body.dx-pagina-nova .dx-item__nota{
  display: block;
  margin-top: 2px;
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.35;
  color: var(--inox);
}

/* Item sem cadastro no WooCommerce. Continua visivel, mas apagado e sem
   cursor de clique: a pendencia tem que aparecer para quem monta a
   pagina, e nao pode parecer compravel para quem visita. */
html body.dx-pagina-nova .dx-item[data-pendente]{
  opacity: 0.55;
  cursor: not-allowed;
}
html body.dx-pagina-nova .dx-item[data-pendente] .dx-item__marca{
  border-style: dashed;
  background: none;
}

/* =========================================================================
   O RESET QUE FALTAVA, DE NOVO
   -------------------------------------------------------------------------
   Terceira vez que isto morde no mesmo projeto: o reset de `button` e
   `input` do sistema esta preso a `.dx-produto`, e tudo que eu monto
   fora dessa div chega sem ele. O tema entao pinta de caixa alta,
   centraliza e poe borda redonda propria.

   A licao ja esta escrita no sistema.css e eu nao apliquei aqui: o que
   a gente nao declara e o que o Woodmart vence.
   ========================================================================= */
html body.dx-pagina-nova .dx-frete button,
html body.dx-pagina-nova .dx-frete input,
html body.dx-pagina-nova .dx-junto button {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  box-shadow: none;
  min-height: 0;
}

html body.dx-pagina-nova .dx-frete__op {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--e4, 16px);
  width: 100%;
  padding: var(--e3, 12px) var(--e4, 16px);
  border: 1px solid var(--fio, #E4E3DF);
  border-radius: var(--r-pequeno, 8px);
  background: var(--papel, #fff);
  cursor: pointer;
  text-align: left;
}
html body.dx-pagina-nova .dx-frete__op b {
  grid-column: 1;
  font-size: var(--t-apoio, 0.94rem);
  font-weight: 600;
  color: var(--grafite, #1A1A18);
  line-height: 1.3;
}
html body.dx-pagina-nova .dx-frete__op i {
  grid-column: 1;
  font-style: normal;
  font-size: var(--t-micro, 0.72rem);
  color: var(--inox, #6E6F6C);
}
html body.dx-pagina-nova .dx-frete__op span {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--fonte-display, 'Archivo', sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--preto, #0B0B0A);
  white-space: nowrap;
}
html body.dx-pagina-nova .dx-frete__op[aria-pressed='true'] {
  border-color: var(--ambar, #FE5C21);
  box-shadow: inset 0 0 0 1px var(--ambar, #FE5C21);
}

/* O campo do CEP e o botao Calcular, lado a lado. */
html body.dx-pagina-nova .dx-frete__campo { display: flex; gap: var(--e3, 12px); }
html body.dx-pagina-nova .dx-frete__campo input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--e4, 16px);
  border: 1px solid var(--fio-forte, #CFCEC9);
  border-radius: var(--r-pequeno, 8px);
  background: var(--papel, #fff);
  font-size: 1rem;
  letter-spacing: 0.04em;
}
html body.dx-pagina-nova .dx-frete__campo button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 var(--e5, 24px);
  border: 1px solid var(--fio-forte, #CFCEC9);
  border-radius: var(--r-pilula, 999px);
  background: none;
  font-size: var(--t-apoio, 0.94rem);
  font-weight: 600;
  color: var(--grafite, #1A1A18);
  text-align: center;
  cursor: pointer;
}

/* A ressalva da pre-venda: uma frase, nao tres colunas. O tema estava
   tratando os <b> internos como celulas. */
html body.dx-pagina-nova .dx-frete__nota {
  display: block;
  margin-top: var(--e3, 12px);
  padding: var(--e3, 12px) var(--e4, 16px);
  border-radius: var(--r-pequeno, 8px);
  background: #FFFBF2;
  border: 1px solid #F3D9A9;
  font-size: var(--t-micro, 0.74rem);
  line-height: 1.5;
  color: #6B4E12;
}
html body.dx-pagina-nova .dx-frete__nota b { font-weight: 700; color: #4A3608; }