/* ============================================================================
   theme.css — Camada de correção visual da loja
   ----------------------------------------------------------------------------
   Carregada DEPOIS de styles-DJGXpugs.css, sobrescrevendo as utilitárias do
   build original sem tocar no HTML das 72 páginas de produto.

   Princípio: oferta agressiva continua agressiva — mas com hierarquia.
   O problema do layout original não era ser chamativo, era ser chamativo em
   tudo ao mesmo tempo (56 uppercase, 54 font-black, 47 glows numa página só).
   Quando todo elemento está no volume máximo, nenhum destaca.

   Aqui o preço e o botão de compra GRITAM MAIS que antes. Todo o resto recua.
   O contraste entre os dois é o que faz a oferta funcionar.

   Para reverter: remova o <link> desta folha. Nada mais depende dela.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

/* ----------------------------------------------------------------------------
   1. TIPOGRAFIA
   O site não carregava fonte nenhuma — caía no system-ui, ou seja, na fonte
   padrão do Windows de quem visita. Nada entrega "template" mais rápido.
   Archivo tem bold compacto e agressivo (bom para preço) e regular legível.
   ---------------------------------------------------------------------------- */
html body {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------------------
   2. PESO E CAIXA ALTA
   font-black (900) estava em 54 elementos e uppercase em 56. Reservamos os
   dois para quem precisa gritar; o resto vai para 700, que ainda é forte.
   ---------------------------------------------------------------------------- */
html .font-black { font-weight: 700; }

/* Caixa alta some dos títulos de card e headings — fica só nos rótulos
   pequenos (eyebrow) e no botão, onde ela tem função. */
html h2.uppercase,
html h3.uppercase,
html .text-lg.uppercase,
html .text-xl.uppercase,
html .text-2xl.uppercase,
html .text-3xl.uppercase { text-transform: none; letter-spacing: -0.01em; }

/* ----------------------------------------------------------------------------
   3. ESCALA TIPOGRÁFICA
   Havia text-2xl 25 vezes e text-3xl só 3: saltava de corpo de texto para
   outdoor sem meio-termo. Aqui os degraus intermediários são recompostos e os
   headings de seção recuam para não disputar com o preço.
   ---------------------------------------------------------------------------- */
html h1.text-3xl { font-size: 1.75rem; line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; }
@media (min-width: 640px) { html h1.sm\:text-4xl { font-size: 2.25rem; } }
@media (min-width: 1024px) { html h1.lg\:text-5xl { font-size: 2.75rem; } }

/* Headings de seção: eram font-black text-3xl/4xl, quase do tamanho do preço. */
html h2.text-3xl { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
@media (min-width: 640px) { html h2.sm\:text-4xl { font-size: 1.875rem; } }
@media (min-width: 640px) { html h2.sm\:text-5xl { font-size: 2.25rem; } }

/* Título de card: 700 já basta, e sem caixa alta. */
html h3.text-lg { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

/* Rótulo "POR QUE COMPRAR" / "AVALIAÇÕES": aqui a caixa alta É a função.
   Fica menor e mais espaçado, como rótulo de verdade. */
html .text-xs.uppercase.tracking-widest {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  font-weight: 700;
}

/* ----------------------------------------------------------------------------
   4. O PREÇO GRITA MAIS
   É o elemento que fecha a venda. Antes disputava atenção com o H1, com os
   headings de seção e com 47 glows. Agora ele é, sozinho, o maior número
   da tela.
   ---------------------------------------------------------------------------- */
html .text-5xl.font-black.text-primary {
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}
html .text-2xl.font-black.text-primary { font-weight: 900; letter-spacing: -0.03em; }

/* Os centavos são um <span> separado dentro de um flex com gap-2, o que abria
   um vão no meio do número ("R$ 29 ,90"). Aqui eles voltam a colar nos reais,
   e o selo "à vista" mantém o respiro. */
html .flex.items-baseline.gap-2 > .text-5xl.font-black.text-primary + .text-2xl.font-black.text-primary {
  margin-left: -0.45rem;
}

/* Preço "de" riscado: recua para o preço novo saltar mais. */
html .line-through { opacity: 0.55; font-weight: 400; }

/* ----------------------------------------------------------------------------
   5. DISCIPLINA DO BRILHO
   shadow-glow estava em 47 elementos. Brilho é recurso de destaque: usado em
   tudo, vira ruído de fundo. Some de todos — e volta só no botão de compra.
   ---------------------------------------------------------------------------- */
html .shadow-\[var\(--shadow-glow\)\] { box-shadow: none; }
html .hover\:shadow-\[var\(--shadow-glow\)\]:hover { box-shadow: none; }

/* O CTA é a única coisa da página que brilha. */
html a[href*="checkout"].bg-\[image\:var\(--gradient-primary\)\] {
  box-shadow: 0 8px 28px -8px rgba(246, 101, 0, 0.55);
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: transform .12s ease, box-shadow .12s ease;
}
html a[href*="checkout"].bg-\[image\:var\(--gradient-primary\)\]:hover {
  box-shadow: 0 10px 34px -8px rgba(246, 101, 0, 0.7);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   6. DISCIPLINA DA COR
   O gradiente laranja estava em 26 elementos. Laranja passa a significar uma
   coisa só: "aqui é a ação / aqui é o dinheiro". Os quadradinhos de ícone dos
   cards de benefício — o componente mais reconhecível de site gerado por IA —
   ficam neutros.
   ---------------------------------------------------------------------------- */
/* Mira o TAMANHO, não "não ser link". A tentativa anterior excluía <a> e
   <button>, mas o "VER OFERTA" dos cards de produto é um <span> — e acabou
   virando um botão preto no lugar do laranja.
   Os quadradinhos de ícone têm dimensão fixa (h-12 w-12 / h-10 w-10); os
   botões, não. É isso que os separa com segurança. */
html .h-12.w-12.rounded-xl.bg-\[image\:var\(--gradient-primary\)\],
html .h-10.w-10.rounded-full.bg-\[image\:var\(--gradient-primary\)\] {
  background: #1e1b18;
  background-image: none;
}

/* ----------------------------------------------------------------------------
   7. CARDS MAIS LEVES
   Cada card tinha borda + sombra + levantar no hover + brilho no hover. Quatro
   efeitos para exibir um parágrafo. Sobra a borda, que já delimita.
   ---------------------------------------------------------------------------- */
/* Título invisível nos cards de produto.
   O card tem fundo branco (bg-card), mas fica dentro da seção escura do
   carrossel, que define cor de texto branca — e o card herdava isso sem nunca
   sobrescrever. Resultado: título branco sobre branco, com um vão no lugar
   dele. Defeito do build original, não do tema.
   A cor é fixada no card, então vale em qualquer fundo onde ele seja usado. */
html a.rounded-2xl.border.border-border.bg-card,
html a.rounded-2xl.border.border-border.bg-card h3 { color: #111827; }

html .shadow-\[var\(--shadow-card\)\] { box-shadow: none; }
html .hover\:-translate-y-1:hover { transform: none; }
html .rounded-2xl.border.border-border.bg-card { border-color: #e9e4df; }

/* ----------------------------------------------------------------------------
   8. SISTEMA DE RAIO
   Havia cinco raios sem regra. Passam a ser dois: 12px para superfície,
   pílula para etiqueta.
   ---------------------------------------------------------------------------- */
html .rounded-2xl { border-radius: 12px; }
html .rounded-xl  { border-radius: 10px; }
html .rounded-lg  { border-radius: 8px; }

/* ----------------------------------------------------------------------------
   9. MOBILE — onde vive 90% do tráfego
   ----------------------------------------------------------------------------
   Medido num viewport de 387x839 (celular típico), o layout original colocava
   o preço em 936px: o cliente precisava rolar 157px para descobrir quanto
   custa. Numa loja de oferta o preço é a isca — esconder o número é perder a
   venda na primeira tela.

   Duas correções, nenhuma delas mexendo no HTML:
   a) a ordem da coluna passa a ser título → PREÇO → botão → prova social →
      descrição, que é o padrão dos marketplaces no celular;
   b) a galeria encolhe, porque ocupava 57% da tela antes do título começar.
   ---------------------------------------------------------------------------- */
@media (max-width: 639px) {

  /* (a) A ordem passa a ser: prova social → selos → título → PREÇO → botão.
     A nota e o total de vendas vêm logo abaixo da foto, que é onde o olho
     está depois de olhar o produto — e antes de ver o preço. */
  /* ORDEM PADRÃO — precisa vir primeiro.
     Sem isto, qualquer filho que a regra não reconheça fica com order:0, que
     no flexbox vem ANTES de tudo que foi ordenado de 1 a 7. Foi o que quebrou
     18 páginas: o bloco de preço delas usa "mt-5" em vez de "mt-6", não casava
     a regra antiga, e subia para o topo junto com blocos extras — empurrando
     título e avaliações para baixo. A coluna varia de 6 a 11 filhos entre os
     produtos, então "o que eu não reconheço vai para o fim" é a única regra
     segura. */
  /* A ordem padrão é 5: entre o preço e o botão de comprar.
     Não é o fim da lista de propósito — vários produtos têm um seletor de
     variante ali ("Escolha o kit", "Cor", "Escolha a versão"). Jogá-lo para
     depois do botão faria o cliente ver "COMPRAR" antes de escolher o tamanho.
     Entre preço e botão é onde qualquer bloco desconhecido faz menos estrago. */
  /* Padrão 7: DEPOIS do botão. É onde ficam os blocos informativos —
     "O que vem na caixa", selos de frete/garantia. */
  html body.pagina-produto .flex.flex-col:has(> h1) > * { order: 7; }

  /* Exceção: bloco que contém botão é seletor de variante ("Cor:", "Tamanho:",
     "Escolha o modelo:"). Esse precisa vir ANTES da compra — escolher o
     tamanho depois de clicar em comprar não faz sentido.
     Verificado nas 72: 38 blocos com botão são todos variante; os 20 sem botão
     são informativos. As regras específicas abaixo vêm depois desta de
     propósito, para vencerem caso um bloco caia nos dois casos. */
  html body.pagina-produto .flex.flex-col:has(> h1) > div:has(button) { order: 5; }

  /* Âncoras por CONTEÚDO, não por classe de margem: a margem varia entre as
     páginas (mt-5 em 18 delas, mt-6 em 54), o conteúdo não.
     Avaliação = tem estrela. Preço = tem a linha de preço em baseline, o que o
     distingue do seletor de variante, que também usa texto em destaque. */
  html body.pagina-produto .flex.flex-col:has(> h1) > div:has(svg.lucide-star)      { order: 1; margin-top: 0; }
  html body.pagina-produto .flex.flex-col:has(> h1) > .mb-3.flex.flex-wrap          { order: 2; margin-top: 0.75rem; }
  html body.pagina-produto .flex.flex-col:has(> h1) > h1                            { order: 3; }
  html body.pagina-produto .flex.flex-col:has(> h1) > div:has(.flex.items-baseline)  { order: 4; margin-top: 1rem; }

  /* O botão às vezes é filho direto, às vezes vem embrulhado num div. */
  /* O botão de compra aparece em três formas entre os produtos: link direto,
     link embrulhado num div, e <button> (nas páginas com variante, tipo
     "Comprar as 8 — R$ 79,90"). As três precisam da mesma posição. */
  html body.pagina-produto .flex.flex-col:has(> h1) > a[href*="checkout"]           { order: 6; }
  html body.pagina-produto .flex.flex-col:has(> h1) > div:has(> a[href*="checkout"]) { order: 6; }
  html body.pagina-produto .flex.flex-col:has(> h1) > button                        { order: 6; }

  /* A descrição é mt-3 na maioria e mt-2 em algumas — pega qualquer <p>. */
  html body.pagina-produto .flex.flex-col:has(> h1) > p                             { order: 8; }
  html body.pagina-produto .flex.flex-col:has(> h1) > ul                            { order: 9; }

  /* (b) A foto é o que vende: ela cresce. O que encolhe é o espaço morto em
     volta — o respiro de 32px entre o header e a imagem não separava nada,
     só empurrava o preço para fora da tela.
     "contain" em vez de "cover" para não cortar o produto. */
  html body.pagina-produto section.py-8 { padding-top: 0.5rem; }

  html body.pagina-produto section .grid.gap-10 > div:first-child > .overflow-hidden > img {
    height: 336px;
    object-fit: contain;
    background: #fff;
  }

  /* A moldura da foto também apertava: menos borda, mais produto. */
  html body.pagina-produto section .grid.gap-10 > div:first-child > .overflow-hidden { padding: 0; }

  /* O vão de 40px entre galeria e bloco de compra é espaço morto no celular:
     empurra o preço para fora da tela sem separar nada que já não esteja
     separado. Some com a maior parte dele. */
  html body.pagina-produto section .grid.gap-10 { gap: 1.25rem; }

  /* Miniaturas: só o espaçamento aperta. A tira varia de 2 a 8 colunas entre os
     produtos, e o aspect-square original já dimensiona cada caso — forçar uma
     altura fixa achataria as tiras de poucas colunas. */
  html body.pagina-produto section .grid.gap-10 > div:first-child > .grid { gap: 0.375rem; }

  /* Título mais compacto: eram 3 linhas empurrando tudo para baixo. */
  html h1.text-3xl { font-size: 1.5rem; line-height: 1.15; }

  /* Descrição, agora abaixo do botão, ganha respiro do bloco de compra. */
  html body.pagina-produto .flex.flex-col:has(> h1) > p.mt-3.text-base { margin-top: 1.25rem; }
}

/* ----------------------------------------------------------------------------
   10. A BARRA FIXA ESCONDIA O FIM DA PÁGINA
   O CTA fixo do rodapé tem 81px, e o body não tinha padding-bottom nenhum.
   Resultado: os últimos 81px ficavam permanentemente atrás dele — no celular,
   isso engolia o CNPJ e o copyright, que nenhum cliente chegava a ver.

   A folga só entra quando a barra está de fato na tela (classe posta pelo
   theme.js) — senão sobraria um vão branco no fim da página nos momentos em
   que a barra está escondida.
   ---------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* As duas regras precisam da mesma especificidade: com :has() de um lado e
     só uma classe do outro, o :has() vencia sempre e a folga nunca entrava. */
  html body:has(.fixed.bottom-0) {
    padding-bottom: 0;
    transition: padding-bottom .22s ease;
  }
  html body.barra-compra-visivel:has(.fixed.bottom-0) { padding-bottom: 96px; }
}

/* ----------------------------------------------------------------------------
   11. LOGO CENTRALIZADO NO HEADER
   O cabeçalho é um flex de três partes: menu à esquerda, logo no meio (flex-1),
   busca+carrinho à direita. Só que os lados têm larguras diferentes — 40px
   contra 98px — e o logo, centralizado dentro do espaço que sobra, acabava
   29px à esquerda do centro real.

   A correção equilibra os dois lados em vez de empurrar o logo: assim ele
   continua centrado mesmo quando o badge do carrinho passa de 1 para 2 dígitos,
   ou quando a palavra "Carrinho" aparece no desktop.
   ---------------------------------------------------------------------------- */
html header .max-w-7xl.flex > div:first-child,
html header .max-w-7xl.flex > div:last-child {
  flex: 1 1 0;
  min-width: 0;
}
html header .max-w-7xl.flex > div:last-child { justify-content: flex-end; }

/* O bloco do logo passa a ocupar só o que precisa, e fica no centro exato. */
html header .max-w-7xl.flex > .flex-1 { flex: 0 0 auto; }

/* ----------------------------------------------------------------------------
   12. SEPARADOR DO CRONÔMETRO
   As três caixas apareciam soltas ("05 30 09"), sem indicar que são
   hora:minuto:segundo. Os dois-pontos entram no vão ENTRE as caixas, via
   ::after posicionado para fora do fundo escuro — não dentro dele.
   ---------------------------------------------------------------------------- */
html body.pagina-produto .flex.gap-1 { gap: 0.7rem; }

html body.pagina-produto .flex.gap-1 > span.tabular-nums { position: relative; }

html body.pagina-produto .flex.gap-1 > span.tabular-nums:not(:last-child)::after {
  content: ':';
  position: absolute;
  right: -0.52rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  color: #111827;
  opacity: 0.75;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   13. RESPIRO
   Densidade uniforme faz tudo parecer igualmente importante. Um pouco mais de
   ar entre as seções deixa o olho separar os blocos.
   ---------------------------------------------------------------------------- */
html section.py-16 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
html p.text-muted-foreground { line-height: 1.6; }

/* ----------------------------------------------------------------------------
   14. PRECO EM DESTAQUE NAO QUEBRA NO MEIO
   O preco vive num span .text-5xl dentro de um flex, ao lado do selo
   "a vista". Em tela estreita o navegador quebrava entre "R$" e o numero,
   deixando o valor em duas linhas. Piora quando o cliente troca a variacao
   para um preco mais largo (R$ 189,90) — e ai o numero e a coisa mais
   importante da pagina aparecendo torta.

   nowrap segura o valor inteiro; o :has() faz o SELO descer para a linha de
   baixo em vez de espremer o preco. So o preco usa .text-5xl literal (os
   titulos usam lg:text-5xl, que e outro token), entao isto nao pega em h1.
   ---------------------------------------------------------------------------- */
html .text-5xl { white-space: nowrap; }
html div:has(> .text-5xl) { flex-wrap: wrap; }