/*
Theme Name: Venexia Store
Theme URI: https://vo.venexia.com.br
Author: Venexia
Author URI: https://vo.venexia.com.br
Description: Tema clássico para a loja Venexia, na direção visual VNX·IDV v1.0. Traduz o sistema do Venexia Office — Porcelana e Grafite como base, ouro como acento, Julius Sans One para display, IBM Plex Mono para todo número — para o vocabulário de uma loja: catálogo, produto, carrinho e checkout. Não é um tema de blocos.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venexia-store
Tags: e-commerce, custom-colors, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/*
   NOTA sobre "Requires at least": 6.3, e nao 6.0. O formato de array no 5o
   parametro de wp_enqueue_script(), com 'strategy' => 'defer', so existe a
   partir do 6.3. Em 6.0-6.2 o array e lido como booleano e o script sai sem
   defer, silenciosamente.

   Esta nota NAO pode ficar dentro do cabecalho de tema acima. Comentario de CSS
   nao aninha: um delimitador de abertura la dentro fecha o cabecalho no
   primeiro delimitador de fechamento que aparecer, e tudo depois disso deixa de
   ser lido. (A primeira versao desta nota caiu nisso duas vezes seguidas --
   inclusive CITANDO os delimitadores no proprio texto.)
*/

/* ============================================================================
   1 · TOKENS
   ============================================================================
   O contrato VNX·IDV v1.0 fixa quatro cores e três papéis tipográficos. Tudo
   aqui deriva delas; nada introduz família nova.

   A REGRA QUE GOVERNA O RESTO: ouro é ACENTO, nunca superfície de área grande,
   nunca cor de texto corrido. Proporção 55·25·12·8 — neutro domina, e quanto
   menos ouro aparece, mais ele vale. Numa loja isso é uma decisão de desenho, e
   não um detalhe: uma grade de doze produtos com doze botões dourados destruiria
   o acento. Por isso o "adicionar ao carrinho" da listagem é contorno, e o ouro
   sólido fica reservado ao CTA ÚNICO de cada tela.
   ========================================================================= */

:root {
  /* --- Ouro Venexia — acento · o gesto humano ---------------------------- */
  --vnx-ouro-50: #fbf6e9;
  --vnx-ouro-100: #f6edd3;
  --vnx-ouro-200: #eddba7;
  --vnx-ouro-300: #e4c87b;
  --vnx-ouro-400: #e2bd67; /* 100% do manual */
  --vnx-ouro-500: #c9a454;
  --vnx-ouro-600: #a88742;
  --vnx-ouro-700: #866b35; /* ouro como TEXTO na base clara */
  --vnx-ouro-800: #645028;
  --vnx-ouro-900: #43361b;
  --vnx-ouro-950: #2a210f;

  /* --- Platina — secundária · o método ----------------------------------- */
  --vnx-platina-100: #e8e9ec;
  --vnx-platina-200: #d1d3d8;
  --vnx-platina-300: #babdc4;
  --vnx-platina-400: #a8abb2; /* 100% do manual */
  --vnx-platina-500: #8e929a;
  --vnx-platina-600: #737780;
  --vnx-platina-700: #595c64;

  /* --- Grafite / Porcelana — neutros de base ------------------------------ */
  --vnx-porcelana: #f8f7f3; /* 100% do manual */
  --vnx-grafite: #17181d; /* 100% do manual */
  --vnx-grafite-950: #0e0e12; /* texto sobre ouro — 8,2:1 / 10,7:1 */
  --vnx-grafite-800: #23242b;
  --vnx-grafite-700: #32322e;
  --vnx-grafite-100: #edece6;
  --vnx-grafite-200: #d8d6cf;
  --vnx-grafite-300: #b8b6af;

  /* --- Semânticos permitidos --------------------------------------------- */
  --vnx-success: #059669;
  --vnx-warning: #b45309;
  --vnx-error: #be123c;
  --vnx-info: #0369a1;

  /* --- Geometria ---------------------------------------------------------- */
  /* Cantos CONTIDOS. Nada de rounded-2xl/rounded-full em superfícies — só o
     manual permite, em avatares, badges de status e pill buttons. */
  --vnx-radius: 0.25rem;
  --vnx-radius-pill: 999px;
  --vnx-rule: 1px;

  /* --- Tipografia --------------------------------------------------------- */
  --vnx-font-display: 'Julius Sans One', ui-sans-serif, system-ui, sans-serif;
  --vnx-font-sans: 'Albert Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --vnx-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --vnx-tracking-display: 0.18em;
  --vnx-measure: 68ch;

  /* --- Movimento ---------------------------------------------------------- */
  --vnx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --vnx-dur: 200ms;
}

/* ---------------------------------------------------------------------------
   Base CLARA (Porcelana). `:root` sem `.dark` é o estado claro; o escuro ganha
   quando `<html>` recebe `.dark`, que é o mesmo sufixo que o Office usa.
   ------------------------------------------------------------------------ */
:root {
  --vnx-bg: var(--vnx-porcelana);
  --vnx-bg-muted: var(--vnx-grafite-100);
  --vnx-bg-elevated: #ffffff;
  --vnx-bg-accented: var(--vnx-ouro-100);

  /* A PLACA DE PRODUTO — fixa nos dois temas, e a repetição no `.dark` seria
     um defeito, não uma melhoria.

     A fotografia do catálogo não é foto: é RECORTE. Os PNGs têm ~64% de pixels
     totalmente transparentes, e o produto dentro deles é escuro — a caixa do
     Valen é preta. Sobre o `--vnx-bg-elevated` do tema escuro (#23242B) a caixa
     preta simplesmente desaparece: a página do produto abria com um retângulo
     vazio no lugar da foto. Medido: a cor dominante do centro da galeria era
     `rgb(35,36,43)`, que é o fundo, e não o produto.

     É a MESMA classe de decisão que o admin do Venexia Office já tomou ao fixar
     o cabeçalho em Grafite nos dois temas: lá o logo é bicolor com fills
     literais e some sobre a Porcelana; aqui o produto é escuro e some sobre o
     Grafite. Nos dois casos **o ativo manda na superfície, e o ativo não é
     nosso para recolorir**.

     Na base clara a placa coincide com o que já havia (o `--vnx-bg-elevated`
     claro é branco); no escuro ela é a exceção deliberada. Manter o valor
     `--vnx-bg-muted` do escuro "para combinar" devolveria o defeito. */
  --vnx-media-plate: var(--vnx-porcelana);

  --vnx-text-highlighted: var(--vnx-grafite);
  --vnx-text: var(--vnx-grafite-700);
  --vnx-text-muted: var(--vnx-platina-700);
  --vnx-text-dimmed: var(--vnx-platina-500);

  --vnx-border: var(--vnx-platina-100);
  --vnx-border-strong: var(--vnx-platina-200);

  /* Ouro como TEXTO precisa do tom profundo no claro: o ouro pleno sobre
     Porcelana dá 2,3:1. O #866B35 dá 4,7:1. */
  --vnx-accent-text: var(--vnx-ouro-700);
  --vnx-accent: var(--vnx-ouro-400);
  /* O fio e o anel de foco são ELEMENTO GRÁFICO: o contrato pede 3:1, e não
     4,5:1. O ouro pleno sobre a Porcelana dá 1,67:1 — praticamente invisível.
     O tom profundo dá 4,7:1 e continua sendo ouro. */
  --vnx-accent-line: var(--vnx-ouro-700);
  /* Texto sobre superfície sólida de ouro: Grafite, NUNCA branco. Branco sobre
     ouro é 2,2:1 — é o erro exato do tema padrão do WooCommerce. */
  --vnx-on-accent: var(--vnx-grafite-950);

  --vnx-shadow: 0 1px 2px rgb(23 24 29 / 0.04);
}

.dark {
  --vnx-bg: var(--vnx-grafite);
  --vnx-bg-muted: #1c1d23;
  --vnx-bg-elevated: var(--vnx-grafite-800);
  --vnx-bg-accented: var(--vnx-ouro-950);

  /* `--vnx-media-plate` NÃO é redefinida aqui, e a ausência é a regra. Ver a
     justificativa completa no `:root` claro: o produto é um recorte escuro e
     precisa de placa clara nos dois temas. */

  --vnx-text-highlighted: var(--vnx-porcelana);
  --vnx-text: var(--vnx-grafite-200);
  --vnx-text-muted: var(--vnx-platina-400);
  --vnx-text-dimmed: var(--vnx-platina-600);

  --vnx-border: #2c2e33;
  --vnx-border-strong: #3a3d44;

  /* No escuro o ouro pleno é o correto como texto: 9,9:1. */
  --vnx-accent-text: var(--vnx-ouro-400);
  --vnx-accent: var(--vnx-ouro-400);
  --vnx-accent-line: var(--vnx-ouro-400);
  --vnx-on-accent: var(--vnx-grafite-950);

  /* Os semânticos precisam de par claro/escuro. O contrato é explícito: "toda
     cor precisa de definição explícita nas duas bases". Medido sobre o Grafite,
     o #be123c do claro dá 2,8:1 — reprovado. */
  --vnx-success: #34d399;
  --vnx-warning: #fbbf24;
  --vnx-error: #fb7185;
  --vnx-info: #38bdf8;

  --vnx-shadow: none;
}

/* ============================================================================
   2 · FONTES — self-hosted
   ============================================================================
   Mesmos arquivos que o admin do Office serve. Sem CDN: a loja não deve depender
   de terceiro para a marca aparecer, e a MOLLIES do logotipo NUNCA é importada
   (licença comercial exclusiva do SVG oficial).
   ========================================================================= */

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/albert-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/albert-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/julius-sans-one-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/julius-sans-one-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   3 · BASE
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--vnx-bg);
  color: var(--vnx-text);
  font-family: var(--vnx-font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--vnx-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--vnx-dur) var(--vnx-ease);
}

a:hover {
  color: var(--vnx-text-highlighted);
}

/* Foco visível em TUDO que é interativo — anel de ouro, como no Office.
   Fora do `:where()` de propósito: aquele seletor tem especificidade ZERO, e
   qualquer `a:focus { outline: none }` de plugin passaria por cima. O
   `!important` é justificado aqui — o anel de foco é a única coisa que nunca
   pode ser suprimida, e é o que a WCAG 2.4.7 exige. */
:focus-visible {
  outline: 2px solid var(--vnx-accent-line) !important;
  outline-offset: 2px;
  border-radius: var(--vnx-radius);
}

hr {
  border: 0;
  border-top: var(--vnx-rule) solid var(--vnx-border);
  margin: 2.5rem 0;
}

::selection {
  background: var(--vnx-ouro-200);
  color: var(--vnx-grafite-950);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  clip: auto;
  padding: 0.75rem 1rem;
  background: var(--vnx-bg-elevated);
  color: var(--vnx-text-highlighted);
  z-index: 100000;
}

/* Pular para o conteúdo — primeiro elemento focável da página. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--vnx-bg-elevated);
  border: var(--vnx-rule) solid var(--vnx-accent);
  border-radius: var(--vnx-radius);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   4 · TIPOGRAFIA
   ============================================================================
   Três papéis, e a regra que mais importa nesta loja: TODO NÚMERO É DADO.
   Preço, quantidade, SKU, número de pedido, prazo, CEP — tudo em IBM Plex Mono
   com `tabular-nums`, para as colunas de uma lista de itens alinharem como uma
   tabela de verdade. É isso que faz a loja ler como Venexia e não como uma loja
   genérica: no contrato, "cada número tem rótulo, unidade e origem".
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.75rem;
  color: var(--vnx-text-highlighted);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p {
  margin: 0 0 1.25rem;
  max-width: var(--vnx-measure);
}

/* Display: SEMPRE caixa-alta, sempre com tracking. Nunca em texto corrido. */
.vnx-display,
.vnx-eyebrow,
.vnx-section__title,
.entry-title,
.page-title {
  font-family: var(--vnx-font-display);
  letter-spacing: var(--vnx-tracking-display);
  text-transform: uppercase;
  font-weight: 400;
}

/* Rótulo de seção — o "eyebrow". Ouro sobre a base, no tom que passa contraste. */
.vnx-eyebrow {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--vnx-accent-text);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
}

.vnx-lede {
  font-size: 1.0625rem;
  color: var(--vnx-text-muted);
  max-width: 58ch;
}

/* Dados — o registro laboratorial. */
.vnx-data,
.price,
.woocommerce-Price-amount,
.product-sku,
.order-number {
  font-family: var(--vnx-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.vnx-label {
  display: block;
  font-family: var(--vnx-font-display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vnx-text-muted);
}

/* ============================================================================
   5 · O FIO DE OURO — a assinatura
   ============================================================================
   O contrato diz: "A marca aparece no fio, não no preenchimento." Este é o
   dispositivo que se repete por toda a loja — sob cada título de seção, como
   divisória entre preço e especificação no cartão de produto, e no resumo do
   pedido. É a única coisa que a loja carrega de ponta a ponta, e por isso o
   resto pode ficar quieto.
   ========================================================================= */

.vnx-rule {
  display: block;
  width: 3rem;
  height: var(--vnx-rule);
  border: 0;
  background: var(--vnx-accent-line);
  margin: 0 0 1.25rem;
}

.vnx-rule--wide { width: 100%; }
.vnx-rule--center { margin-inline: auto; }

.vnx-section__title {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--vnx-text-highlighted);
}

/* A MESMA classe veste dois papéis: rótulo pequeno (`<h2>` de rodapé e widget) e
   o TÍTULO DA PÁGINA (`<h1>` em página, artigo, arquivo, catálogo e busca).
   Como classe (0,1,0) vence o seletor de tipo `h1` (0,0,1), a versão de 13 px
   ganhava em todo lugar — e a H1 do site ficava MENOR que o corpo do texto.
   Aqui o título de página recupera o tamanho, e o rótulo segue pequeno. */
h1.vnx-section__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: var(--vnx-tracking-display);
}

/* Cabeçalho de seção: título + fio, sempre juntos. */
.vnx-section-head {
  margin-bottom: 2rem;
}

.vnx-section-head .vnx-rule {
  margin-bottom: 0;
}

/* ============================================================================
   6 · LAYOUT
   ========================================================================= */

.vnx-shell {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
  .vnx-shell { padding-inline: 2rem; }
}

.vnx-section {
  padding-block: 3.5rem;
}

@media (min-width: 48rem) {
  .vnx-section { padding-block: 5rem; }
}

.vnx-section--muted {
  background: var(--vnx-bg-muted);
}

/* Sobre o fundo `muted` o ouro-700 cai para 4,26:1 — abaixo do mínimo. Um degrau
   mais fundo resolve sem trocar de cor. */
.vnx-section--muted .vnx-eyebrow {
  color: var(--vnx-ouro-800);
}

.dark .vnx-section--muted .vnx-eyebrow {
  color: var(--vnx-ouro-400);
}

.vnx-main {
  min-height: 40vh;
}

.vnx-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .vnx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .vnx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vnx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vnx-with-sidebar {
  display: grid;
  gap: 3rem;
}

@media (min-width: 64rem) {
  .vnx-with-sidebar {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}

/* ============================================================================
   7 · BOTÕES
   ============================================================================
   A hierarquia do contrato, aplicada a uma loja:
     · `--solid`  é o CTA ÚNICO da tela. Superfície de ouro, texto grafite.
     · `--outline` é a ação repetida (o "adicionar" da listagem). Contorno, e o
       ouro só aparece no hover.
   Nunca dois sólidos na mesma dobra.
   ========================================================================= */

.vnx-btn,
.button,
button,
input[type='submit'],
input[type='button'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.25rem;
  border: var(--vnx-rule) solid transparent;
  border-radius: var(--vnx-radius);
  background: transparent;
  color: var(--vnx-text-highlighted);
  font-family: var(--vnx-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vnx-dur) var(--vnx-ease),
    border-color var(--vnx-dur) var(--vnx-ease),
    color var(--vnx-dur) var(--vnx-ease);
}

/* --- Sólido: o ouro só vira superfície aqui ----------------------------- */
.vnx-btn--solid,
.button.alt,
input[type='submit'].alt,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--vnx-accent);
  /* Grafite, NUNCA branco: branco sobre ouro é 2,2:1. */
  color: var(--vnx-on-accent);
  border-color: var(--vnx-accent);
  font-weight: 600;
}

.vnx-btn--solid:hover,
.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--vnx-ouro-500);
  border-color: var(--vnx-ouro-500);
  color: var(--vnx-on-accent);
}

/* --- Contorno: a ação repetida ------------------------------------------ */
.vnx-btn--outline,
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: transparent;
  color: var(--vnx-text-highlighted);
  border-color: var(--vnx-border-strong);
}

.vnx-btn--outline:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  border-color: var(--vnx-accent);
  color: var(--vnx-accent-text);
  background: transparent;
}

/* --- Ghost: terciária ---------------------------------------------------- */
.vnx-btn--ghost {
  padding-inline: 0.5rem;
  color: var(--vnx-text-muted);
}

.vnx-btn--ghost:hover {
  color: var(--vnx-text-highlighted);
}

.vnx-btn--pill {
  border-radius: var(--vnx-radius-pill);
  padding-inline: 1.5rem;
}

.vnx-btn--block {
  width: 100%;
}

.vnx-btn--sm {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
}

/* ============================================================================
   8 · FORMULÁRIOS
   ========================================================================= */

label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--vnx-text-highlighted);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='date'],
select,
textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--vnx-bg-elevated);
  color: var(--vnx-text-highlighted);
  border: var(--vnx-rule) solid var(--vnx-border-strong);
  border-radius: var(--vnx-radius);
  font-family: var(--vnx-font-sans);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Campo numérico é dado — mono, para os dígitos alinharem. */
input[type='number'] {
  font-family: var(--vnx-font-mono);
  font-variant-numeric: tabular-nums;
}

/* O placeholder é secundário, mas não pode ser ilegível. Todo campo deste tema
   tem `<label>` — o placeholder nunca é a única instrução —, e ainda assim ele
   sobe para o tom que passa contraste: medido, o dimmed dá 3,75:1. */
input::placeholder,
textarea::placeholder {
  color: var(--vnx-text-muted);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--vnx-accent);
}

/* ============================================================================
   9 · CABEÇALHO E NAVEGAÇÃO
   ========================================================================= */

/* ============================================================================
   A MOLDURA É GRAFITE NOS DOIS TEMAS
   ============================================================================
   O cabeçalho e o rodapé carregam o LOGOTIPO, e o logo é bicolor com fills
   LITERAIS no SVG (#E2BD67 ouro, #A8ABB2 platina) — sem `currentColor`, sem
   variante clara. Sobre a Porcelana ele mede 1,7:1: reprovado.

   O `DESIGN.md` §4 afirma que o SVG "funciona nos dois fundos". Não funciona —
   e o próprio sistema já descobriu isso: o admin do Office mantém
   `--header-bg: var(--vnx-grafite)` nas DUAS bases pelo mesmo motivo, e o
   `CLAUDE.md` registra o caso como doc/reality drift, verificado rasterizando.

   Aqui o mesmo precedente, estendido ao rodapé porque o rodapé também tem a
   marca. Redefinir os TOKENS dentro do escopo faz todo filho acompanhar sozinho
   — nenhuma regra de cor precisa ser repetida lá dentro. */
.vnx-header,
.vnx-footer {
  --vnx-bg: var(--vnx-grafite);
  --vnx-bg-muted: #1c1d23;
  --vnx-bg-elevated: var(--vnx-grafite-800);
  --vnx-text-highlighted: var(--vnx-porcelana);
  --vnx-text: var(--vnx-grafite-200);
  --vnx-text-muted: var(--vnx-platina-400);
  --vnx-text-dimmed: var(--vnx-platina-600);
  --vnx-border: #2c2e33;
  --vnx-border-strong: #3a3d44;
  /* Sobre Grafite o ouro pleno é o tom correto para texto: 9,9:1. */
  --vnx-accent-text: var(--vnx-ouro-400);
}

.vnx-header {
  border-bottom: var(--vnx-rule) solid var(--vnx-border);
  background: var(--vnx-bg);
}

.vnx-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.vnx-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.vnx-header__brand img {
  width: auto;
  height: 2.25rem;
}

.vnx-header__brand:hover { opacity: 0.85; }

/* --- Navegação ---------------------------------------------------------- */
.vnx-nav {
  flex: 1;
}

.vnx-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vnx-nav a {
  display: block;
  padding-block: 0.25rem;
  color: var(--vnx-text);
  font-family: var(--vnx-font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.vnx-nav a:hover,
.vnx-nav .current-menu-item > a {
  color: var(--vnx-accent-text);
}

.vnx-nav .current-menu-item > a {
  /* O item atual se marca com o fio, não com preenchimento. */
  box-shadow: inset 0 -1px 0 0 var(--vnx-accent);
}

/* --- Ações do cabeçalho (conta, carrinho) -------------------------------- */
.vnx-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.vnx-header__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--vnx-text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}

.vnx-header__link:hover { color: var(--vnx-text-highlighted); }

.vnx-cart-count {
  font-family: var(--vnx-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--vnx-rule) solid var(--vnx-accent);
  border-radius: var(--vnx-radius-pill);
  color: var(--vnx-accent-text);
}

/* --- Menu mobile -------------------------------------------------------- */
.vnx-nav-toggle {
  display: none;
  padding: 0.5rem;
}

@media (max-width: 63.99rem) {
  .vnx-header__inner { flex-wrap: wrap; }
  .vnx-nav-toggle { display: inline-flex; margin-left: auto; }
  .vnx-header__actions { margin-left: 0; }

  .vnx-nav {
    display: none;
    flex-basis: 100%;
    order: 3;
    padding-bottom: 1rem;
  }

  .vnx-nav.is-open { display: block; }

  .vnx-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .vnx-nav li { width: 100%; }

  .vnx-nav a {
    padding-block: 0.75rem;
    border-bottom: var(--vnx-rule) solid var(--vnx-border);
  }
}

/* ============================================================================
   10 · CARTÃO — superfície padrão do sistema
   ========================================================================= */

.vnx-panel {
  background: var(--vnx-bg-elevated);
  border: var(--vnx-rule) solid var(--vnx-border);
  border-radius: var(--vnx-radius);
}

.vnx-panel__body { padding: 1.5rem; }

/* ============================================================================
   11 · ESTADOS VAZIOS
   ============================================================================
   Obrigatórios pelo contrato: "nunca uma tabela vazia crua". Um estado vazio é
   um convite a agir, e diz o próximo passo.
   ========================================================================= */

.vnx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 4rem 1.5rem;
  text-align: center;
  border: var(--vnx-rule) dashed var(--vnx-border-strong);
  border-radius: var(--vnx-radius);
}

.vnx-empty__title {
  font-family: var(--vnx-font-display);
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vnx-text-highlighted);
  margin: 0;
}

.vnx-empty__text {
  margin: 0;
  color: var(--vnx-text-muted);
  font-size: 0.9375rem;
}

/* ============================================================================
   12 · RODAPÉ
   ========================================================================= */

.vnx-footer {
  margin-top: 5rem;
  border-top: var(--vnx-rule) solid var(--vnx-border);
  background: var(--vnx-bg-muted);
  padding-block: 3rem 2rem;
  font-size: 0.875rem;
}

.vnx-footer__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .vnx-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vnx-footer__brand img { height: 2rem; width: auto; }

.vnx-footer__base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: var(--vnx-rule) solid var(--vnx-border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  /* `--vnx-text-muted` e não `--vnx-text-dimmed`: medido na tela, o dimmed dá
     3,75:1 sobre o Grafite, abaixo do mínimo de 4,5:1 do contrato. O muted dá
     6,7:1, e a hierarquia continua — o rodapé segue sendo o tom mais baixo da
     página por ser menor, não por ser ilegível. */
  color: var(--vnx-text-muted);
  font-size: 0.8125rem;
}

.vnx-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vnx-footer li { margin-bottom: 0.5rem; }

/* Os links do rodapé são NEUTROS, e não ouro.
   Duas razões que apontam para o mesmo lado. A primeira é medida: o ouro-700
   sobre o fundo do rodapé dá 4,26:1, abaixo do mínimo — o manual mede 4,7:1
   contra a Porcelana, e o rodapé é um tom abaixo dela. A segunda é o contrato:
   uma lista de links é texto corrido, e o manual diz que ouro não é cor de
   texto corrido. O acento do rodapé já vem do fio e da marca. */
.vnx-footer a {
  color: var(--vnx-text);
  text-decoration: none;
}

.vnx-footer a:hover {
  color: var(--vnx-accent-text);
  text-decoration: underline;
}

/* ============================================================================
   13 · ARTIGOS E PÁGINAS
   ========================================================================= */

.entry-header { margin-bottom: 1.5rem; }

.entry-meta {
  font-family: var(--vnx-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--vnx-text-muted);
}

.entry-content > * { max-width: var(--vnx-measure); }

.entry-content blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: var(--vnx-rule) solid var(--vnx-accent);
  font-size: 1.125rem;
  color: var(--vnx-text-highlighted);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.entry-content th,
.entry-content td {
  padding: 0.75rem;
  border-bottom: var(--vnx-rule) solid var(--vnx-border);
  text-align: left;
}

/* Paginação — números em mono, como todo dado. */
.vnx-pagination {
  margin-top: 3rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-family: var(--vnx-font-mono);
  font-variant-numeric: tabular-nums;
}

.vnx-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: 0.5rem;
  border: var(--vnx-rule) solid var(--vnx-border);
  border-radius: var(--vnx-radius);
  color: var(--vnx-text);
  text-decoration: none;
  font-size: 0.875rem;
}

.vnx-pagination .page-numbers.current {
  border-color: var(--vnx-accent);
  color: var(--vnx-accent-text);
}

/* ============================================================================
   14 · ACESSIBILIDADE — além do foco
   ========================================================================= */

/* Alvo de toque mínimo confortável no mobile. */
@media (max-width: 47.99rem) {
  .vnx-btn,
  .button,
  button,
  input[type='submit'] {
    min-height: 2.75rem;
  }
}

/* Nunca depender só de cor para dizer estado. */
.vnx-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border: var(--vnx-rule) solid currentColor;
  border-radius: var(--vnx-radius);
  font-family: var(--vnx-font-display);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vnx-badge--success { color: var(--vnx-success); }
.vnx-badge--warning { color: var(--vnx-warning); }
.vnx-badge--error { color: var(--vnx-error); }
.vnx-badge--neutral { color: var(--vnx-text-muted); }

/* O cartão de produto NÃO tem uma terceira parte `__foot`: o botão que o plugin
   emite é filho direto do `<li>`, e o estilo vem de `.vnx-product > .button`,
   em `assets/css/woocommerce.css`. */

/* ============================================================================
   15 · A FICHA TÉCNICA — a primeira dobra
   ============================================================================
   O hero da loja é uma especificação, e não um banner. A tabela abaixo é o que
   sustenta essa escolha: os combos como LINHAS, com nome, composição e valor —
   a pessoa lê o que está comprando antes de qualquer apelo.

   É uma `<table>` de verdade, e não uma grade de `div`s, porque os dados SÃO
   tabulares: a marcação semântica é o que faz um leitor de tela anunciar
   "linha 2 de 4, coluna 3" em vez de recitar tudo de enfiada. Também é o que
   mantém a coluna de valores alinhada quando os nomes têm tamanhos diferentes —
   que é exatamente o que uma grade de `div`s não garante.
   ========================================================================= */

.vnx-hero {
  padding-block: 3.5rem 3rem;
  border-bottom: var(--vnx-rule) solid var(--vnx-border);
}

@media (min-width: 48rem) {
  /* O respiro de baixo é menor que o de cima de propósito: o fio já separa o
     hero do que vem depois, e somar dois blocos cheios de padding abria um vão
     de quase 200 px entre a ficha e a primeira seção. */
  .vnx-hero { padding-block: 5.5rem 3.5rem; }
}

.vnx-hero__intro {
  max-width: 46rem;
  margin-bottom: 3rem;
}

.vnx-hero__title {
  margin: 0 0 1.25rem;
  font-family: var(--vnx-font-display);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem);
  font-weight: 400;
  letter-spacing: var(--vnx-tracking-display);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--vnx-text-highlighted);
  text-wrap: balance;
}

.vnx-hero__intro .vnx-rule { margin-bottom: 1.25rem; }

.vnx-hero__intro .vnx-lede { margin-bottom: 0; }

/* --- A tabela ------------------------------------------------------------ */

.vnx-spec {
  border: var(--vnx-rule) solid var(--vnx-border);
  border-radius: var(--vnx-radius);
  background: var(--vnx-bg-elevated);
  overflow-x: auto;
}

.vnx-spec__table {
  width: 100%;
  /* 40rem e não 44: em 768 px exatos — o limite do breakpoint — o conteúdo
     disponível é 704 px, e a 44rem a tabela rolava 2 px na horizontal. Feio e
     inútil. A 40rem as três colunas continuam cabendo com folga. */
  min-width: 40rem;
  border-collapse: collapse;
}

/* Cabeçalho: display, caixa-alta, pequeno. É rótulo, não conteúdo. */
.vnx-spec__table thead th {
  padding: 0.875rem 1.25rem;
  background: var(--vnx-bg-muted);
  border-bottom: var(--vnx-rule) solid var(--vnx-border);
  color: var(--vnx-text-muted);
  font-family: var(--vnx-font-display);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.vnx-spec__table tbody tr {
  border-bottom: var(--vnx-rule) solid var(--vnx-border);
  transition: background var(--vnx-dur) var(--vnx-ease);
}

.vnx-spec__table tbody tr:last-child { border-bottom: 0; }

.vnx-spec__table tbody tr:hover { background: var(--vnx-bg-muted); }

.vnx-spec__table td,
.vnx-spec__table tbody th {
  padding: 1.125rem 1.25rem;
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}

.vnx-spec__name {
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.vnx-spec__name a {
  color: var(--vnx-text-highlighted);
  text-decoration: none;
}

.vnx-spec__name a:hover { color: var(--vnx-accent-text); }

.vnx-spec__detail {
  color: var(--vnx-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  /* A composição pode ser longa; ela quebra, o resto da linha não. */
  min-width: 16rem;
}

/* O VALOR É DADO: mono, tabular, alinhado à direita — como toda coluna
   numérica do sistema. É esta coluna que faz a tabela parecer um instrumento
   em vez de uma vitrine. */
.vnx-spec__num {
  font-family: var(--vnx-font-mono);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--vnx-text-highlighted);
  text-align: right !important;
  white-space: nowrap;
}

/* O preço antigo é informação de verdade ("era R$ 862,93"), não enfeite —
   então ele passa o mesmo mínimo de contraste que o resto do texto. */
.vnx-spec__num del {
  display: block;
  color: var(--vnx-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.vnx-spec__num ins { text-decoration: none; }

.vnx-spec__action { text-align: right !important; white-space: nowrap; }

/* --- A ficha no celular --------------------------------------------------
   Medido: a tabela tem 704 px de largura mínima e a tela tem 390 — a coluna do
   VALOR ficava em x=498, fora da tela. Rolar na horizontal num catálogo é
   aceitável; esconder o preço não é.

   Abaixo de 48rem cada combo vira um bloco, e o valor sobe para junto do botão,
   que é onde ele precisa estar. O `<table>` continua no HTML: a semântica serve
   a quem navega por leitor de tela e às telas largas; o que muda aqui é só a
   apresentação. */
@media (max-width: 47.99rem) {
  .vnx-spec { border: 0; background: none; overflow: visible; }
  .vnx-spec__table { min-width: 0; }

  .vnx-spec__table thead { display: none; }

  .vnx-spec__table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nome    nome"
      "detalhe detalhe"
      "valor   acao";
    gap: 0 1rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    background: var(--vnx-bg-elevated);
    border: var(--vnx-rule) solid var(--vnx-border);
    border-radius: var(--vnx-radius);
  }

  .vnx-spec__table tbody tr:last-child { margin-bottom: 0; }
  .vnx-spec__table tbody tr:hover { background: var(--vnx-bg-elevated); }

  .vnx-spec__table td,
  .vnx-spec__table tbody th {
    display: block;
    padding: 0;
    text-align: left !important;
  }

  .vnx-spec__name { grid-area: nome; margin-bottom: 0.375rem; white-space: normal; }
  .vnx-spec__detail { grid-area: detalhe; min-width: 0; margin-bottom: 1rem; }
  .vnx-spec__num { grid-area: valor; align-self: center; }
  .vnx-spec__action { grid-area: acao; align-self: center; }
  .vnx-spec__num del { display: inline; margin-right: 0.375rem; }
}

/* --- Os três fatos de fecho ---------------------------------------------- */

/* Três blocos de texto lado a lado pedem mais respiro que uma grade de cartões,
   que já tem a moldura para separá-los. */
.vnx-facts { gap: 2.5rem 3rem; }

.vnx-fact p {
  margin: 0;
  color: var(--vnx-text-muted);
  font-size: 0.9375rem;
}

.vnx-fact .vnx-rule { margin-bottom: 0.875rem; }

/* --- Cartão de conteúdo (artigos) ---------------------------------------- */

.vnx-card {
  display: flex;
  flex-direction: column;
  background: var(--vnx-bg-elevated);
  border: var(--vnx-rule) solid var(--vnx-border);
  border-radius: var(--vnx-radius);
  overflow: hidden;
  transition: border-color var(--vnx-dur) var(--vnx-ease);
}

.vnx-card:hover { border-color: var(--vnx-border-strong); }

.vnx-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--vnx-bg-muted);
  overflow: hidden;
}

.vnx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vnx-card__body {
  flex: 1;
  padding: 1.25rem;
}

.vnx-card__title {
  margin: 0 0 0.625rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.vnx-card__title a {
  color: var(--vnx-text-highlighted);
  text-decoration: none;
}

.vnx-card__title a:hover { color: var(--vnx-accent-text); }

.vnx-card__excerpt {
  margin: 0;
  color: var(--vnx-text-muted);
  font-size: 0.875rem;
}

.vnx-card__foot {
  padding: 0.75rem 1.25rem;
  border-top: var(--vnx-rule) solid var(--vnx-border);
}

/* O artigo tem um contêiner de leitura próprio. Sem ele, um título de página
   numa tela larga corre os 78rem do shell inteiro e fica difícil de acompanhar
   com os olhos — o `--vnx-measure` dos parágrafos não alcança os títulos. */
.vnx-article {
  max-width: 52rem;
}

.vnx-article__media {
  margin: 2rem 0;
  border: var(--vnx-rule) solid var(--vnx-border);
  border-radius: var(--vnx-radius);
  overflow: hidden;
}

.entry-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: var(--vnx-rule) solid var(--vnx-border);
}

/* --- Busca ---------------------------------------------------------------- */

.vnx-searchform {
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
}

.vnx-searchform__input { flex: 1; }

.vnx-search-again,
.vnx-404__search { margin-top: 2.5rem; }

.vnx-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --- Comentários ---------------------------------------------------------- */

.vnx-comments {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: var(--vnx-rule) solid var(--vnx-border);
  max-width: var(--vnx-measure);
}

.vnx-comments__list {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.vnx-comments__list .comment-body {
  padding: 1.25rem 0;
  border-bottom: var(--vnx-rule) solid var(--vnx-border);
}

.vnx-comments__list .children {
  margin: 0 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
}

.comment-meta img { border-radius: var(--vnx-radius); }

.vnx-comments__note {
  color: var(--vnx-text-muted);
  font-size: 0.8125rem;
}

/* --- Widgets -------------------------------------------------------------- */

.vnx-widget { margin-bottom: 2rem; }

.vnx-widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vnx-widget li {
  padding-block: 0.5rem;
  border-bottom: var(--vnx-rule) solid var(--vnx-border);
  font-size: 0.875rem;
}

.vnx-shop-sidebar {
  align-self: start;
}

@media (min-width: 64rem) {
  .vnx-shop-sidebar { position: sticky; top: 1.5rem; }
}

.vnx-footer__tagline {
  margin: 0.875rem 0 0;
  color: var(--vnx-text-muted);
  font-size: 0.875rem;
  max-width: 28ch;
}

/*
   ALTERNADOR DE TEMA

   O botão era texto ("Mudar para claro"). Agora é só ícone, como no Venexia
   Office: um quadrado com a lua quando o tema está escuro e o sol quando está
   claro — o estado ATUAL, que é o que o Office mostra.

   Os dois desenhos são as máscaras do Lucide, as MESMAS que o Office usa
   (`i-lucide-moon` / `i-lucide-sun`), para o alternador ser a mesma peça nos
   dois produtos. Máscara e não um SVG colorido: só a FORMA viaja, e a cor vem
   desenhados uma vez, no template, e quem escolhe um ou outro é o CSS. São SVG
   inline, e não máscara como a lupa da galeria: a máscara existe lá para
   recolorear um asset de TERCEIRO, e aqui os glifos são nossos e já nascem com
   `stroke: currentColor`. */

/* 2 rem de lado, como o `square` do Office. Continue carregando a classe
   `vnx-header__link` para herdar a cor e o hover dos vizinhos: o botão fica ao
   lado de "Minha conta" e "Carrinho" e precisa se comportar como eles. */
.vnx-theme-toggle {
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--vnx-radius);
  cursor: pointer;
  transition: background-color var(--vnx-dur) var(--vnx-ease), color var(--vnx-dur) var(--vnx-ease);
}

/* O `--vnx-bg-elevated` do cabeçalho, que o escopo dele redefiniu — é o mesmo
   tratamento do botão fantasma (`variant="ghost"`) do Office. */
.vnx-theme-toggle:hover,
.vnx-theme-toggle:focus-visible {
  background: var(--vnx-bg-elevated);
}

.vnx-theme-toggle__glifo {
  display: block;
}

/* Os dois glifos estão no HTML; o CSS mostra UM. O padrão é o sol (base clara) e
   o `.dark` troca para a lua.

   A troca é do CSS, e não do JavaScript — de propósito. `.dark` é posto no
   `<html>` pelo script inline de `inc/enqueue.php`, que roda ANTES da primeira
   pintura; como a escolha é uma regra de descendência a partir dessa classe, o
   ícone já está certo no primeiro quadro. Se fosse o JS que trocasse o glifo, o
   botão apareceria com a lua para quem prefere claro até o `DOMContentLoaded` —
   um piscar em toda visita.

   Ordem importa: as duas regras que escondem vêm ANTES das que mostram, para o
   caso de as duas casarem (o que não acontece, mas ler a cascata não deveria
   exigir uma simulação mental de especificidade). */
.vnx-theme-toggle__glifo--lua { display: none; }

.dark .vnx-theme-toggle__glifo--sol { display: none; }
.dark .vnx-theme-toggle__glifo--lua { display: block; }

/* ============================================================================
   16 · IMPRESSÃO
   ========================================================================= */

@media print {
  .vnx-header__actions,
  .vnx-nav-toggle,
  .vnx-footer,
  .vnx-nav { display: none !important; }

  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
}