/* ============================================================
   As páginas SEO da loja falam a língua da loja (29/09/2026).

   O PROBLEMA, medido: as 381 páginas de produto e as 17 de categoria
   (`/estoque/produtos/*.html`, `/estoque/categoria/*.html`) carregavam
   **só** `produto.css` — o tema CLARO de 07/09. Nenhuma carregava o
   `style.css`/`nivel.css` da loja. O carril da página inicial manda o
   visitante para lá e ele cai numa casa com outra pele: fundo #f2f4f8 e
   cartões brancos, quando a loja é #000015. Não é «sem desenho» — é o
   desenho ANTIGO, e a remodelação nunca chegou a estas páginas.

   A CURA é de uma linha de tokens, não de 398 ficheiros: o `produto.css` é
   escrito por tokens (`--fundo`, `--card`, `--texto`, `--acento`…), logo
   re-apontá-los muda a família inteira sem tocar em marcação nenhuma. É o
   mesmo padrão que o carril usa (`--vc-*`), e é o que mantém estas páginas
   leves: sem JavaScript, sem o shell do PWA, sem depender do `app.js`.

   CARREGAR SEMPRE DEPOIS de `produto.css`. As cores abaixo vêm da loja
   LIDAS DO BROWSER (não do ficheiro): fundo `#000015`, texto `#E0E0E0`,
   barra `rgba(0,12,40,.82)` com fio `rgba(0,64,224,.2)`.

   O QUE ESTE FICHEIRO NÃO FAZ: não acrescenta o cabeçalho de pesquisa da
   loja nem o carril. Estas páginas são estáticas de propósito (crawl limpo,
   sem JS) — quem quer a loja inteira tem o link na migalha.
   ============================================================ */

:root {
  /* Os tokens do `produto.css`, re-apontados para a loja escura. */
  --fundo:        #000015;                  /* era #f2f4f8 */
  --card:         rgba(0, 20, 60, .58);     /* era #ffffff */
  --linha:        rgba(0, 64, 224, .20);    /* era #e3e7ee */
  --texto:        #E0E0E0;                  /* era #1c2430 */
  --texto-suave:  #8899BB;                  /* era #5b6776 */
  --acento:       #7EA2FF;                  /* era #0040e0 — sobre navy o azul vivo não se lê */
  --acento-forte: #A9C2FF;
  --verde:        #34D399;                  /* era #0e7a3c — o verde da loja */
  --verde-fundo:  rgba(52, 211, 153, .12);
  --cinza-fundo:  rgba(0, 20, 60, .55);     /* era #eef1f5 */
  --carvao:       #000a30;                  /* era #0c0d10 */
  --sombra:       0 1px 2px rgba(0, 0, 0, .45), 0 4px 16px rgba(0, 0, 0, .5);
}

body { background: var(--fundo); }

/* As cores que o `produto.css` NÃO tem em token — presas lá dentro, e por
   isso invisíveis a uma re-apontagem de variáveis. Cada uma tem de ser
   sobreposta à mão, ou o texto fica escuro sobre escuro. */
.prod-topo   { background: rgba(0, 12, 40, .82); }
.prod-migas .sep { color: #4a5a7a; }

/* O `#fff` por baixo das imagens é para o recorte de PNG de produto: em
   claro evita o halo cinzento. Em escuro tem de ser um véu claro, não branco. */
.prod-foto img,
.rel-card img,
.cat-foto     { background: rgba(255, 255, 255, .06); }

.prod-desc,
.prod-historia p,
.hist-curiosidades li { color: #B9C4D8; }

/* O CTA é verde-claro: texto branco por cima dele não se lê. */
.prod-cta       { color: #04120A; }
.prod-cta:hover { background: #2BBF8A; }

.prod-rodape    { color: #8899BB; }
.prod-rodape a  { color: #fff; }

/* A ficha e a história são superfícies: em claro eram cinza, aqui são o
   vidro da loja com o fio azul. */
.prod-ficha,
.prod-tecnica,
.hist-importa { border: 1px solid var(--linha); }

@media print {
  /* Estas páginas são uma lista de artigos com preço — imprime-se para levar
     à loja. Uma tabela de preços em fundo navy é tinta a mais e papel ilegível.
     O `produto.css` não tem regra de impressão nenhuma: isto é novo, e sem ele
     o tema escuro imprimia escuro. */
  body { background: #fff; color: #000; }
  .prod-topo { position: static; background: #fff; }
  .prod-grelha, .prod-ficha, .prod-tecnica, .hist-importa { background: #fff; }
}