/* ==========================================================================
   nivel.css — camada ADITIVA da LOJA /estoque da AFRITRONIC
   --------------------------------------------------------------------------
   Carregada DEPOIS de css/style.css. Reverter tudo = tirar um <link>.
   Zero JavaScript, zero CDN, zero fontes novas: só CSS sobre a DOM que já
   existe (#grelha, #faixa-novidades, #chips, .topo, .aviso-encomenda,
   .marca, .rodape, #ficha, #carrinho, #pedido).

   PORQUÊ: a página inicial foi elevada a 25/09 (afritronic-vivo/estoque/css/futuro.css)
   e ficou com uma língua própria — fundo azul-marinho profundo com grelha
   geométrica, azul vivo como acento, verde de "ao vivo", tipografia grande,
   muito espaço, pílulas. A loja continuava branca com barras azuis
   empilhadas: duas línguas no mesmo sítio. Esta camada faz a loja falar a
   MESMA língua — não inventa paleta nenhuma. Os valores saem dos tokens que
   já existem em style.css (--navy --navy-profundo --azul-claro --azul-suave
   --texto-navy --acento --ouro --fio) e do :root canónico da página inicial
   (--bg #000015 · --bg-card rgba(0,20,60,.75) · --text #E0E0E0
   --text-muted #8899BB · --border-subtle rgba(0,64,224,.2) · --success-light
   #34D399).

   Índice:
     1. Tokens (a língua, em variáveis --nv-*)
     2. Fundo da página (gradiente + grelha geométrica + glow)
     3. Cabeçalho compacto — UMA barra + faixa de categorias
     4. Aviso por encomenda reduzido a uma linha discreta
     5. Promessa / hero
     6. Novidades: carril compacto, sem duplicar a grelha
     7. Grelha + cartão: o PREÇO é o herói
     8. Coerência: ficha, carrinho, banda, rodapé, vazio
     9. Mobile a sério (≤900 / ≤560 / ≤400)
    10. Acessibilidade e impressão
   ========================================================================== */

/* ------------------------------------------------------- 1. TOKENS (a língua) */
:root {
  /* Fundo e superfícies — iguais à página inicial */
  --nv-bg:        #000015;
  --nv-bg-2:      #000a30;
  --nv-glass:     rgba(0, 12, 40, .82);   /* barra fixa */
  --nv-glass-2:   rgba(0, 20, 60, .58);   /* cartão */
  --nv-glass-3:   rgba(0, 8, 32, .92);    /* cartão, fundo do gradiente */

  /* Traços — hairlines finas, como a página inicial */
  --nv-line:      rgba(0, 64, 224, .20);
  --nv-line-2:    rgba(0, 64, 224, .34);
  --nv-line-3:    rgba(0, 64, 224, .10);  /* = --fut-line */

  /* Texto */
  --nv-text:      #E0E0E0;
  --nv-muted:     #8899BB;
  --nv-muted-2:   #9AAACB;   /* muted sobre vidro, mais claro (contraste) */
  --nv-bright:    #FFFFFF;

  /* Acentos — os mesmos da página inicial */
  --nv-blue:      #1A5FFF;   /* = --primary-light / --azul-claro */
  --nv-blue-deep: #0040E0;   /* = --primary / --acento */
  --nv-blue-soft: #7EA2FF;   /* = --azul-suave */
  --nv-live:      #34D399;   /* = --success-light: o preço, como na inicial */
  --nv-live-bg:   rgba(52, 211, 153, .10);
  --nv-live-bd:   rgba(52, 211, 153, .32);
  --nv-gold:      #C9A24B;   /* = --ouro (só "sob consulta") */

  /* Caixa da fotografia: fica CLARA de propósito — o produto é que manda
     na imagem, e uma moldura clara sobre página escura é a galeria. */
  --nv-media:     linear-gradient(180deg, #FAFCFF 0%, #EDF1F8 100%);
  --nv-media-bd:  rgba(255, 255, 255, .10);

  /* Forma e movimento — escala da página inicial */
  --nv-r-sm: 10px;
  --nv-r:    14px;
  --nv-r-lg: 18px;
  --nv-r-xl: 24px;
  --nv-ease: cubic-bezier(.4, 0, .2, 1);
  --nv-tr:   .22s var(--nv-ease);

  /* Profundidade */
  --nv-sh-card:  0 12px 32px rgba(0, 0, 0, .38);
  --nv-sh-hover: 0 22px 52px rgba(0, 0, 0, .5), 0 0 0 1px rgba(26, 95, 255, .28);
  --nv-sh-bar:   0 10px 30px rgba(0, 0, 21, .55);
  --nv-sh-glow:  0 10px 40px rgba(0, 64, 224, .22);

  /* Semânticos que o style.css usa e que aqui têm de apontar para o escuro.
     Redefinir os tokens é o caminho mais económico: tudo o que style.css
     escreve com var(--card) / var(--linha) / var(--fundo) fica escuro de
     uma só vez, sem 200 overrides. */
  --fundo:       #000015;
  --card:        rgba(0, 20, 60, .58);
  --linha:       rgba(0, 64, 224, .20);
  --texto:       #E0E0E0;
  --texto-suave: #8899BB;
}

/* ------------------------------------------- 2. FUNDO (a pele da página) */
body {
  background: var(--nv-bg);
  color: var(--nv-text);
  /* padding-bottom: 86px do style.css fica — é o lugar da barra de pedido */
}

/* Grelha geométrica + dois glows, por baixo de tudo e fixos ao rolar.
   A mesma receita do .fut-hero-lines da página inicial (máscara radial para
   as linhas se dissolverem nas bordas). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 46% at 50% -6%, rgba(0, 64, 224, .13) 0%, transparent 62%),
    radial-gradient(ellipse 46% 34% at 92% 18%, rgba(124, 58, 237, .07) 0%, transparent 58%),
    radial-gradient(ellipse 46% 34% at 4% 52%, rgba(0, 64, 224, .06) 0%, transparent 55%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0, 64, 224, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 64, 224, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 22%, #000 0%, transparent 82%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 22%, #000 0%, transparent 82%);
}

main {
  padding: 1rem 1.25rem 2.5rem;
  max-width: 1560px;
}

/* Barra de rolagem em tom escuro (o polegar claro do style.css fica sujo). */
::-webkit-scrollbar-thumb { background: rgba(126, 162, 255, .28); border-color: transparent; }
::-webkit-scrollbar-thumb:hover { background: rgba(126, 162, 255, .45); }
::selection { background: var(--nv-blue); color: #fff; }

/* --------------------------------------- 3. CABEÇALHO COMPACTO (UMA barra) */
/* A DOM do .topo tem três linhas empilhadas:
      .topo-linha    → .marca + .topo-acoes (contador, cotação, PDF, carrinho)
      .topo-filtros  → #busca + #ordenacao
      #chips         → pílulas de categoria
   Para as juntar numa barra só, sem tocar no HTML: display:contents nas três
   linhas promove os filhos a itens do flex do .topo, e a `order` põe cada um
   no lugar certo. #chips leva flex-basis:100% e cai na 2.ª linha — que passa
   a ser a entrada por categorias, colada por baixo da barra. */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  padding: .55rem 1.25rem .5rem;
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--nv-glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--nv-line);
  box-shadow: var(--nv-sh-bar);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topo { background: rgba(0, 8, 28, .97); }
}
/* As três linhas deixam de ter caixa — os netos passam a ser itens da barra. */
.topo-linha,
.topo-acoes,
.topo-filtros { display: contents; }

/* Ordem visual da barra: marca · busca · ordenar · AO VIVO · ações */
.marca       { order: 1; min-width: 0; gap: 9px; }
#busca       { order: 2; flex: 1 1 220px; min-width: 0; }
#ordenacao   { order: 3; flex: 0 0 auto; }
#contador    { order: 4; }
#btn-cotacao { order: 5; }
#btn-revista { order: 6; }
#btn-carrinho{ order: 7; }
#chips       { order: 8; flex: 1 0 100%; }

/* Marca: o subtítulo repetia a promessa do hero — sai da barra (fica no hero
   e no rodapé), e o nome desce a 1 linha. */
.topo-logo { height: 30px; border-radius: 7px; background: #fff; padding: 2px 5px; }
.marca-nome { font-size: .98rem; letter-spacing: .07em; white-space: nowrap; }
.marca-sub { display: none; }

/* Busca: vidro + foco azul, alvo ≥44px. */
.busca,
.select {
  min-height: 44px;
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-r);
  background: rgba(0, 8, 32, .72);
  color: var(--nv-text);
  font-family: inherit;
  transition: border-color var(--nv-tr), box-shadow var(--nv-tr), background var(--nv-tr);
}
.busca::placeholder { color: #6C7CA0; }
.busca:hover, .select:hover { border-color: var(--nv-line-2); }
.busca:focus, .select:focus {
  outline: none;
  border-color: var(--nv-blue);
  background: rgba(0, 12, 44, .92);
  box-shadow: 0 0 0 3px rgba(26, 95, 255, .22);
}
.select option { background: #001028; color: var(--nv-text); }

/* Contador AO VIVO — o "382 produtos" com ponto verde, como na inicial. */
.contador {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--nv-muted-2);
  white-space: nowrap;
}
.contador::before { background: var(--nv-live); }

/* Ações: pílulas de vidro, sem gradiente chapado. */
.topo .botao-cotacao,
.topo .botao-secundario,
.topo .botao-carrinho {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-r);
  background: rgba(0, 26, 74, .55);
  color: var(--nv-text);
  font-size: .875rem;
  box-shadow: none;
  transition: border-color var(--nv-tr), background var(--nv-tr), color var(--nv-tr), transform var(--nv-tr);
}
.topo .botao-cotacao:hover,
.topo .botao-secundario:hover,
.topo .botao-carrinho:hover {
  border-color: var(--nv-blue);
  background: rgba(0, 40, 110, .72);
  color: var(--nv-bright);
  transform: translateY(-1px);
}
/* A cotação é a ação que traz dinheiro: fica sólida no azul vivo. */
.topo .botao-cotacao {
  background: linear-gradient(180deg, #2A63F0, var(--nv-blue-deep) 60%);
  border-color: rgba(126, 162, 255, .45);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 64, 224, .34), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.topo .botao-cotacao:hover {
  background: linear-gradient(180deg, #3773FF, #0048F5 60%);
  border-color: var(--nv-blue-soft);
}
.topo .botao-carrinho { padding: 0 .8rem; }

/* Categorias: pílulas de vidro, a ativa no azul vivo. A máscara desvanece a
   última pílula na borda — sem ela o corte a meio lê-se como defeito. */
#chips {
  padding: .1rem 0 .15rem;
  gap: .4rem;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.chip {
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--nv-line);
  border-radius: 999px;
  background: rgba(0, 20, 60, .6);
  color: var(--nv-muted-2);
  font-size: .8125rem;
  font-weight: 600;
  transition: border-color var(--nv-tr), color var(--nv-tr), background var(--nv-tr);
}
.chip:hover { border-color: var(--nv-line-2); color: var(--nv-bright); }
.chip.ativo {
  background: linear-gradient(135deg, var(--nv-blue-deep), var(--nv-blue));
  border-color: var(--nv-blue-soft);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 64, 224, .38);
}

/* ------------------------- 4. AVISO POR ENCOMENDA → UMA LINHA DISCRETA */
/* Tinha ~167px (e ~233px antes da 1.ª camada) a dizer o mesmo. Passa a ser
   uma linha de serviço: texto curto + link, com o ✕ do lado direito.
   .aviso-textos leva display:contents para o <h2> ser irmão flex do botão. */
.aviso-encomenda {
  position: relative;
  margin: 0 0 .9rem;
  padding: .5rem 2.6rem .5rem 1rem;
  border: 1px solid var(--nv-line-3);
  border-left: 2px solid rgba(201, 162, 75, .5);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 20, 60, .62), rgba(0, 8, 32, .34));
  box-shadow: none;
}
.aviso-inner {
  display: flex;
  flex-direction: row;          /* uma linha SEMPRE (o style.css empilha ≤760) */
  flex-wrap: nowrap;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}
.aviso-textos { display: contents; }
.aviso-kicker,
.aviso-sub { display: none; }
.aviso-titulo {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--nv-muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aviso-titulo b { color: var(--nv-text); font-weight: 700; }
.botao-aviso {
  flex: none;
  width: auto;                  /* o style.css fá-lo 100% ≤720 */
  background: none;
  border: 0;
  border-radius: 999px;
  padding: .1rem .35rem;
  color: var(--nv-blue-soft);
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.botao-aviso:hover { transform: none; filter: none; color: var(--nv-bright); background: none; }
.botao-aviso:active { transform: none; }
.aviso-fechar {
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, .07);
  border-color: var(--nv-line);
  color: var(--nv-muted-2);
}
.aviso-fechar:hover { background: rgba(255, 255, 255, .16); color: var(--nv-bright); }

/* ------------------------------------------------- 5. PROMESSA / HERO */
.kicker {
  margin: 0 0 .35rem;
  font-size: .64rem;
  letter-spacing: .32em;
  color: var(--nv-muted);
  gap: .7rem;
}
.kicker::before { background: var(--nv-blue); opacity: 1; width: 30px; }
.kicker b { color: var(--nv-blue-soft); }

.hero-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  margin: 0 0 1.15rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--nv-bright);
}
.hero-titulo b {
  color: var(--nv-blue-soft);   /* queda: se background-clip:text faltar */
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-titulo b {
    color: transparent;
    background: linear-gradient(100deg, var(--nv-blue-soft) 0%, var(--nv-blue) 55%, #5588FF 100%);
    -webkit-background-clip: text;
            background-clip: text;
  }
}
/* A promessa das 24h em verde "ao vivo" — é o que se cumpre. */
.hero-24h {
  margin-left: 0;
  vertical-align: baseline;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--nv-live);
  background: var(--nv-live-bg);
  border: 1px solid var(--nv-live-bd);
  border-radius: 999px;
  padding: .3rem .7rem;
}
.hero-24h::before { content: none; }  /* sai o ❧, entra o ponto ao vivo */

/* --------------------- 6. NOVIDADES: CARRIL COMPACTO (sem duplicar a grelha) */
/* O carril tinha 305px de altura e mostrava EXACTAMENTE os mesmos 7 produtos
   que a grelha logo abaixo (a ordem por omissão é a mais recente, e os novos
   são os últimos do catálogo). Passa a carril horizontal de mini-cartões
   (foto 76px + nome + preço), ~180px, e a duplicação é resolvida em §6b. */
.faixa-novidades {
  margin: 0 0 1.15rem;
  padding: .95rem 1.1rem 1rem;
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-lg);
  background:
    radial-gradient(560px 200px at 96% -40%, rgba(0, 64, 224, .34), transparent 62%),
    linear-gradient(150deg, rgba(0, 20, 60, .72), rgba(0, 8, 32, .92));
  box-shadow: var(--nv-sh-card);
  color: var(--nv-text);
}
.faixa-cabeca { margin: 0 0 .75rem; align-items: center; }
.faixa-kicker { margin: 0 0 .25rem; font-size: .6rem; letter-spacing: .28em; color: var(--nv-gold); }
.faixa-kicker::before { content: none; }
.faixa-titulo {
  font-family: var(--serif);
  font-size: 1.06rem;
  letter-spacing: .01em;
  color: var(--nv-bright);
}
.faixa-titulo b { color: var(--nv-blue-soft); }
.faixa-ver-todas {
  color: var(--nv-muted-2);
  border-color: var(--nv-line);
  background: rgba(0, 20, 60, .5);
  font-size: .78rem;
  min-height: 34px;
}
.faixa-ver-todas:hover { border-color: var(--nv-blue-soft); color: var(--nv-bright); }
.faixa-ver-todas span { color: var(--nv-blue-soft); }

.faixa-pista { gap: .6rem; padding: .1rem .1rem .35rem; }
/* Mini-cartão horizontal: a foto à esquerda, nome em cima e preço em baixo. */
.faixa-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: .65rem;
  width: 236px;
  padding: .5rem;
  border-radius: var(--nv-r);
  background: linear-gradient(160deg, rgba(0, 30, 84, .6), rgba(0, 10, 38, .9));
  border: 1px solid var(--nv-line-3);
  box-shadow: none;
  color: var(--nv-text);
  transition: border-color var(--nv-tr), transform var(--nv-tr), box-shadow var(--nv-tr);
}
.faixa-card:hover {
  transform: translateY(-2px);
  border-color: var(--nv-line-2);
  box-shadow: var(--nv-sh-glow);
}
.faixa-card:focus-visible { outline: 2px solid var(--nv-blue-soft); outline-offset: 2px; }
.faixa-foto {
  grid-row: 1 / span 2;
  width: 76px;
  height: 76px;
  aspect-ratio: auto;
  padding: 4px;
  border-radius: var(--nv-r-sm);
  background: var(--nv-media);
  border: 1px solid var(--nv-media-bd);
}
.faixa-nome {
  align-self: end;
  padding: 0;
  font-size: .74rem;
  line-height: 1.3;
  font-weight: 600;
  min-height: 0;
  color: var(--nv-text);
}
.faixa-preco {
  align-self: start;
  padding: .15rem 0 0;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--nv-live);
  font-variant-numeric: tabular-nums;
}
.faixa-preco.consulta { color: var(--nv-gold); font-size: .76rem; font-weight: 700; }

/* ------- 6b. ZERO DUPLICAÇÃO NO 1.º ECRÃ (só CSS, com :has) ---------------
   O defeito medido: no primeiro ecrã apareciam os MESMOS produtos duas vezes
   — a faixa "Novidades no catálogo" e, logo abaixo, a grelha com os mesmos
   produtos à frente. A causa está no app.js: a ordem por omissão é "mais
   recentes", que é o catálogo invertido, e os novos são os últimos do
   catálogo — logo os primeiros da grelha SÃO os primeiros da faixa.

   Aqui o carril cede o lugar à grelha quando a grelha já mostra o mesmo:
     · "Mais recentes"     → grelha = catálogo invertido = os novos à frente;
                             é literalmente o conteúdo do carril.
     · "Novidades primeiro" → grelha = o mesmo conjunto (todos os novos), por
                             nome. Mesmo conjunto, mesma redundância.
   Nas duas ordens NADA se perde: todos os produtos do carril estão na grelha
   (antes, esconder os cartões marcados NOVO tirava 65 produtos da grelha e
   deixava uma parede de 5 toner iguais no lugar deles). Nas outras ordens
   (Nome, Preço) a grelha já não os mostra à frente e o carril volta a ser a
   montra "acabaram de chegar" que ele quer ser.

   Se o navegador não tiver :has(), ignora a regra inteira e fica como estava
   — degrada para o comportamento antigo, não parte. */
body:has(#ordenacao option[value="recentes"]:checked) #faixa-novidades,
body:has(#ordenacao option[value="novidades"]:checked) #faixa-novidades {
  display: none;
}

/* ------------------------- 7. GRELHA + CARTÃO: O PREÇO É O HERÓI */
/* 206px no desktop — o passo da grelha da página inicial (minmax(210px,1fr)):
   a 1440 dá 6 colunas, as mesmas de antes, com o dobro do preço lá dentro.
   178px abaixo de 900 para o tablet não ficar com 3 colunas gordas (a 768
   são 4). Não vale a pena engordar o cartão: o que faz vender é o preço
   grande, não a caixa. */
.grelha {
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  margin-top: .25rem;
}
@media (min-width: 901px) {
  .grelha { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); }
}

.card {
  background: linear-gradient(165deg, var(--nv-glass-2), var(--nv-glass-3));
  border: 1px solid var(--nv-line-3);
  border-radius: var(--nv-r-lg);
  box-shadow: var(--nv-sh-card);
  overflow: hidden;
  transition: border-color var(--nv-tr), box-shadow var(--nv-tr), transform var(--nv-tr);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--nv-line-2);
  box-shadow: var(--nv-sh-hover);
}
.card:focus-visible { outline: 2px solid var(--nv-blue-soft); outline-offset: 2px; }
/* Fio de luz no topo do cartão: a hairline que dá requinte sem peso. */
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(126, 162, 255, .5) 50%, transparent);
  opacity: 0;
  transition: opacity var(--nv-tr);
}
.card:hover::after { opacity: 1; }

.card-foto {
  aspect-ratio: 4 / 3;
  padding: 8px;
  background: var(--nv-media);
  border-bottom: 1px solid var(--nv-line-3);
  transition: transform .45s var(--nv-ease);
}
.card-corpo { padding: .7rem .8rem .85rem; gap: .3rem; }

/* O preço sobe ao TOPO do corpo do cartão (order:-1) — é a primeira coisa que
   se lê, e é o motivo de existir desta loja. */
.card-preco {
  order: -1;
  margin: 0;
  font-family: inherit;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--nv-live);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(52, 211, 153, .22);
}
.card-preco.consulta {
  order: -1;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--nv-gold);
  text-shadow: none;
}
/* O NOVO fica acima do preço e cavalga a base da foto. */
.selo-novo {
  order: -2;
  margin-top: -13px;
  margin-bottom: -1px;
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .14em;
  color: #221703;
  background: linear-gradient(180deg, #FFE7AD, #F2BD57);
  border-color: rgba(201, 162, 75, .7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.card-nome {
  order: 0;
  font-size: .84rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--nv-text);
  min-height: 2.7em;
}
.card-nome-link:hover { color: var(--nv-blue-soft); text-decoration: none; }
.card-sku {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  color: #6C7CA0;
  margin: 0;
}

/* Selos: tinta translúcida em vez de pastilha clara. */
.badge {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .15rem .45rem;
  border: 1px solid transparent;
}
.badge-stock { color: var(--nv-live); background: var(--nv-live-bg); border-color: var(--nv-live-bd); }
.badge-esgotado { color: var(--nv-muted); background: rgba(255, 255, 255, .05); border-color: var(--nv-line-3); }
.badge-semfoto { color: var(--nv-muted); background: rgba(255, 255, 255, .05); border-color: var(--nv-line-3); }
.badge-consulta {
  color: #E8C879;
  background: rgba(201, 162, 75, .12);
  border-color: rgba(201, 162, 75, .38);
}
.badge-novo { color: #221703; background: linear-gradient(180deg, #FFE7AD, #F2BD57); border-color: rgba(201, 162, 75, .55); }

/* Botões flutuantes sobre a foto: vidro escuro, não chapado. */
.card-adicionar {
  width: 36px; height: 36px;
  background: rgba(0, 40, 110, .88);
  border: 1px solid rgba(126, 162, 255, .45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  opacity: 1;
  color: #fff;
}
.card-adicionar:hover { background: var(--nv-blue); transform: scale(1.08); }
.card-partilhar {
  width: 32px; height: 32px;
  background: rgba(0, 6, 22, .88);
  border: 1px solid rgba(126, 162, 255, .28);
  color: #DCE6FF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.card-partilhar:hover { background: var(--nv-blue-deep); color: #fff; border-color: var(--nv-blue-soft); }

/* ------------------- 8. COERÊNCIA: FICHA, CARRINHO, BANDA, RODAPÉ, VAZIO */
/* Ficha do produto: a mesma pele escura do cartão (abre sobre a página). */
.modal-fundo { background: rgba(0, 0, 12, .72); }
.modal-painel {
  background: linear-gradient(165deg, rgba(0, 26, 74, .96), rgba(0, 8, 32, .98));
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-xl);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
}
.ficha-galeria { background: rgba(0, 8, 32, .6); border-right: 1px solid var(--nv-line-3); }
#ficha-foto { background: var(--nv-media); border: 1px solid var(--nv-media-bd); }
.ficha-thumbs img { background: var(--nv-media); border-color: var(--nv-line); }
.ficha-thumbs img.ativa { border-color: var(--nv-blue); }
#ficha-nome { color: var(--nv-bright); }
.ficha-categoria { color: var(--nv-blue-soft); }
.ficha-preco {
  background: linear-gradient(180deg, rgba(52, 211, 153, .12), rgba(52, 211, 153, .04));
  border: 1px solid var(--nv-live-bd);
  color: var(--nv-live);
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -.01em;
  border-radius: var(--nv-r);
}
.ficha-preco.consulta { color: var(--nv-gold); background: rgba(201, 162, 75, .10); border-color: rgba(201, 162, 75, .4); }
.ficha-detalhes div { border-bottom-color: var(--nv-line-3); }
.ficha-detalhes dt { color: var(--nv-muted); }
.ficha-detalhes dd { color: var(--nv-text); font-family: var(--mono); }
.ficha-desc { color: var(--nv-muted-2); }
.qtd-stepper {
  background: rgba(0, 8, 32, .8);
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-sm);
}
.qtd-stepper button { background: transparent; color: var(--nv-text); }
.qtd-stepper button:hover { background: rgba(126, 162, 255, .16); }
.qtd-stepper input { background: transparent; color: var(--nv-text); border: 0; }

/* Botões primários: azul vivo, como na página inicial. */
.botao-primario {
  background: linear-gradient(180deg, #2A63F0, var(--nv-blue-deep) 60%);
  border-radius: var(--nv-r-sm);
  box-shadow: 0 6px 20px rgba(0, 64, 224, .34), inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #fff;
}
.botao-primario:hover { background: linear-gradient(180deg, #3773FF, #0048F5 60%); }
.botao-secundario {
  background: rgba(0, 20, 60, .6);
  border: 1px solid var(--nv-line);
  color: var(--nv-text);
  border-radius: var(--nv-r-sm);
}
.botao-secundario:hover { border-color: var(--nv-blue-soft); color: var(--nv-bright); }

/* Carrinho lateral + sugestões. */
.carrinho { background: var(--nv-glass-3); border-left: 1px solid var(--nv-line); }
.carrinho-cabeca { background: linear-gradient(180deg, rgba(0, 26, 74, .96), rgba(0, 8, 32, .98)); border-bottom: 1px solid var(--nv-line-3); }
.carrinho-rodape { background: rgba(0, 8, 32, .92); border-top-color: var(--nv-line); }
.carrinho-resumo strong { color: var(--nv-live); font-family: inherit; }
.carrinho-item .nome { color: var(--nv-text); }
.carrinho-item .preco, .carrinho-item .subtotal { color: var(--nv-muted-2); }
.carrinho-item .subtotal { color: var(--nv-bright); }
.carrinho-item img { background: var(--nv-media); border-radius: var(--nv-r-sm); }
.qtd-mini button { background: rgba(0, 20, 60, .7); border: 1px solid var(--nv-line); color: var(--nv-text); border-radius: 6px; }
.qtd-mini button:hover { border-color: var(--nv-blue-soft); color: var(--nv-bright); }
.carrinho-sugestoes { background: rgba(0, 8, 32, .7); border-top-color: var(--nv-line-3); }
.sugestao { background: rgba(0, 20, 60, .55); border: 1px solid var(--nv-line-3); border-radius: var(--nv-r-sm); }
.sugestao img { background: var(--nv-media); }
.sugestao .nome { color: var(--nv-text); }
.sugestao .preco { color: var(--nv-live); font-weight: 700; }

/* Barra de pedido (fundo) + toast: alinhados à mesma pele. */
.pedido {
  background: linear-gradient(180deg, rgba(0, 20, 60, .96), rgba(0, 6, 24, .99));
  border-top: 1px solid var(--nv-line);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .5);
}
.pedido-total { color: var(--nv-live); font-family: inherit; font-weight: 800; }
.toast { background: rgba(0, 20, 60, .97); border: 1px solid var(--nv-line); border-left: 3px solid var(--nv-blue); }

/* Banda de cotação final. */
.banda-cotacao {
  background:
    radial-gradient(900px 300px at 85% -40%, rgba(0, 64, 224, .42), transparent 62%),
    radial-gradient(700px 320px at -10% 120%, rgba(0, 64, 224, .26), transparent 58%),
    linear-gradient(150deg, rgba(0, 12, 40, .95), rgba(0, 6, 24, .99));
  border-top: 1px solid var(--nv-line-3);
  border-bottom: 1px solid var(--nv-line-3);
}
.banda-kicker { color: var(--nv-blue-soft); }
.banda-kicker::before { background: var(--nv-blue-soft); }
.banda-titulo { color: var(--nv-bright); }
.banda-sub { color: var(--nv-muted-2); }
.botao-banda {
  background: linear-gradient(180deg, #2A63F0, var(--nv-blue-deep) 60%);
  color: #fff;
  border-radius: var(--nv-r);
  box-shadow: 0 8px 24px rgba(0, 64, 224, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.botao-banda:hover { filter: brightness(1.1); }

/* Rodapé. */
.rodape { background: rgba(0, 6, 24, .92); }
.rodape-inner { border-top-color: var(--nv-line-3); }
.rodape-col h3 { color: var(--nv-muted); letter-spacing: .16em; font-size: .68rem; text-transform: uppercase; }
.rodape-col h3::after { background: var(--nv-blue); opacity: .8; }
.rodape-marca p, .rodape-col p { color: var(--nv-muted); }
.rodape-col a { color: var(--nv-blue-soft); }
.rodape-col a:hover { color: var(--nv-bright); }
.rodape-nota { color: #6C7CA0; }
.rodape-nota::before { color: var(--nv-blue); }
.rodape-logo { background: #fff; }

/* Estado vazio. */
.vazio { color: var(--nv-muted); }
.vazio-atomo { background: rgba(0, 20, 60, .7); border-color: var(--nv-line); box-shadow: 0 0 0 8px rgba(0, 64, 224, .06); }
.vazio-atomo span { color: var(--nv-blue-soft); }
.vazio-titulo { color: var(--nv-bright); }

/* Cortina de marca (loader): a mesma pele, sem costura ao sair. */
.loader { background: var(--nv-bg); }
.loader-sub { color: var(--nv-muted); }

/* Foco sempre visível nesta camada. */
.busca:focus-visible, .select:focus-visible, .chip:focus-visible,
.botao-primario:focus-visible, .botao-secundario:focus-visible,
.botao-cotacao:focus-visible, .faixa-ver-todas:focus-visible,
.aviso-fechar:focus-visible, .botao-aviso:focus-visible {
  outline: 2px solid var(--nv-blue-soft);
  outline-offset: 2px;
}

/* -------------------------------------------- 9. MOBILE A SÉRIO */
/* Bloco 1180–1340: a barra já não leva tudo numa linha — sai o rótulo do PDF
   (fica o ícone) e, abaixo de 1175, também o contador AO VIVO. Os dois só
   aparecem a partir de onde a soma das larguras realmente cabe; abaixo disso
   empurravam as ações para uma 2.ª linha e o cabeçalho voltava a crescer. */
@media (max-width: 1340px) {
  #btn-revista .rotulo { display: none; }
  #btn-revista { padding: 0 .75rem; }
}
@media (max-width: 1175px) {
  #contador { display: none; }
}

/* Abaixo de 1060: DUAS linhas — marca+ações, depois busca+ordenação; e as
   categorias. A busca e a ordenação partilham a linha (antes a busca levava
   100% e empurrava tudo para uma linha própria, o que dava 4 linhas). O ponto
   de corte é medido: a 1061px a barra de uma linha ainda cabe com 41px de
   folga; abaixo disso o marca empurrava as ações para uma 2.ª linha e o
   cabeçalho voltava a crescer. */
@media (max-width: 1060px) {
  .topo { padding: .5rem .9rem .45rem; gap: .45rem .55rem; }
  /* Ações só-ícone (o style.css só o faz ≤760, e a 768–1060 os rótulos
     ocupavam 280px e espremiam a busca para a borda). */
  .marca { order: 1; flex: 1 1 auto; min-width: 0; }
  .marca > div { min-width: 0; overflow: hidden; }
  .marca-nome { overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
  .topo-logo { height: 28px; }
  .topo .rotulo { display: none; }
  .topo .botao-cotacao,
  .topo .botao-secundario,
  .topo .botao-carrinho {
    min-width: 42px;
    padding: 0 .75rem;
    justify-content: center;
  }
  #btn-cotacao { order: 2; }
  #btn-revista { order: 3; }
  #btn-carrinho { order: 4; }
  /* Quebra de linha do flexbox: um item de largura 100% e altura 0 fecha a
     1.ª linha. É o que põe a busca e a ordenação juntas na 2.ª linha em vez
     de deixar a busca espremida ao lado dos botões e a ordenação sozinha. */
  .topo::before {
    content: "";
    order: 5;
    flex: 0 0 100%;
    height: 0;
    margin-block: -.225rem;
  }
  #busca { order: 6; flex: 1 1 150px; min-width: 104px; }
  #ordenacao { order: 7; flex: 0 1 auto; max-width: 52%; }
  #chips { order: 8; }
  main { padding: .85rem .9rem 2rem; }
}

/* ≤560: telemóvel. O cartão perde a gordura toda — preço grande, nome, fim.
   O que se poupa aqui é altura de página (382 produtos a 2 colunas). */
@media (max-width: 560px) {
  .topo { padding: .45rem .7rem .4rem; gap: .4rem; }
  /* O PDF sai da barra a esta largura (ganha-se a linha 1 inteira) — o mesmo
     botão continua no rodapé, em "📖 Catálogo em PDF". */
  #btn-revista { display: none; }
  .topo .botao-cotacao,
  .topo .botao-secundario,
  .topo .botao-carrinho { min-height: 42px; border-radius: var(--nv-r-sm); }
  .topo .botao-cotacao { padding: 0 .7rem; }
  .busca, .select { min-height: 42px; border-radius: var(--nv-r-sm); font-size: .9rem; }
  #ordenacao { font-size: .8rem; }
  #busca { flex-basis: 118px; }
  .chip { min-height: 37px; padding: 0 .85rem; font-size: .78rem; }

  .kicker { display: none; }
  .hero-titulo { font-size: 1.42rem; margin-bottom: .8rem; gap: .25rem .6rem; }
  .hero-24h { font-size: .55rem; letter-spacing: .1em; padding: .25rem .55rem; }

  /* Aviso: uma linha só, sem link sublinhado a ocupar a largura toda. */
  .aviso-encomenda { padding: .45rem 2.2rem .45rem .8rem; border-radius: 14px; }
  .aviso-titulo { font-size: .74rem; }
  .botao-aviso { font-size: .74rem; padding: 0 .2rem; }
  .aviso-fechar { width: 22px; height: 22px; font-size: .62rem; right: .45rem; }

  /* Novidades: carril ainda mais baixo. */
  .faixa-novidades { padding: .8rem .85rem .85rem; border-radius: var(--nv-r); }
  .faixa-titulo { font-size: .96rem; }
  .faixa-card { width: 210px; grid-template-columns: 64px minmax(0, 1fr); }
  .faixa-foto { width: 64px; height: 64px; }

  /* Grelha: 2 colunas, cartão enxuto, preço a mandar. A foto passa a 4/3 (a
     do estilo a ≤640 é quadrada): a quadrada custava 48px por cartão, e a 382
     produtos a 2 colunas isso são ~9 000px de rolagem a mais. */
  .grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .card { border-radius: var(--nv-r); }
  .card-foto { aspect-ratio: 4 / 3; padding: 5px; }
  .card-corpo { padding: .5rem .55rem .6rem; gap: .2rem; }
  .card-preco { font-size: 1.12rem; }
  .card-preco.consulta { font-size: .8rem; }
  .card-nome { font-size: .76rem; min-height: 2.7em; }
  .card-sku { font-size: .56rem; }
  .badge { font-size: .56rem; padding: .1rem .35rem; }
  .selo-novo { font-size: .5rem; padding: 1px 7px 1px 8px; margin-top: -10px; }
  .card-adicionar { width: 34px; height: 34px; font-size: 1rem; top: 6px; right: 6px; }
  .card-partilhar { width: 30px; height: 30px; font-size: .8rem; top: 6px; left: 6px; }
}

/* ≤400 (360px medido): nada pode transbordar na horizontal, e a linha da
   marca tem de caber com as duas ações ao lado (a 360px transbordava 10px e
   empurrava uma linha inteira). */
@media (max-width: 400px) {
  .topo .botao-cotacao,
  .topo .botao-secundario,
  .topo .botao-carrinho { padding: 0 .55rem; min-height: 40px; }
  .marca-nome { font-size: .78rem; letter-spacing: .04em; }
  .topo-logo { height: 26px; }
  #busca { flex-basis: 104px; }
  .faixa-card { width: 196px; }
  .grelha { gap: .5rem; }
  .hero-titulo { font-size: 1.3rem; }
}

/* --------------------------------------- 10. ACESSIBILIDADE E IMPRESSÃO */
@media (prefers-reduced-motion: reduce) {
  .card, .card::after, .card-foto, .chip, .busca, .select,
  .topo .botao-cotacao, .topo .botao-secundario, .topo .botao-carrinho,
  .faixa-card, .botao-primario { transition: none; }
  .card:hover { transform: none; }
  .faixa-card:hover { transform: none; }
}

/* Impressão: a camada é escura de propósito no ecrã, mas imprimir a preto
   sobre branco é o que faz sentido (a lista de preços vai para papel). */
@media print {
  body { background: #fff !important; color: #1c2430 !important; }
  body::before, body::after { display: none !important; }
  .card { background: #fff !important; border-color: #e3e7ee !important; box-shadow: none !important; }
  .card-preco { color: #0e7a3c !important; text-shadow: none !important; }
  .card-nome { color: #1c2430 !important; }
  .card-foto { background: #fff !important; }
  .faixa-novidades, .aviso-encomenda { display: none !important; }
}