/* Layouts da loja. O servidor põe data-tema no <html> (Padrão = sem regras aqui). Os temas trocam as cores e acrescentam enfeites;
   só valem fora do painel de administração (body.admin-ativo), que continua sempre no visual padrão. */

/* ---------- Natal ---------- */
/* faixa de bengala doce no topo */
html[data-tema="natal"] body:not(.admin-ativo) :is(.topo, .capa-topo) {
  border-top: 7px solid transparent;
  border-image: repeating-linear-gradient(135deg, var(--tema-1) 0 12px, #ffffff 12px 24px) 7 0 0 0 / 7px 0 0 0;
}
html[data-tema="natal"] body:not(.admin-ativo) .marca::before { content: "🎄 "; }
html[data-tema="natal"] body:not(.admin-ativo) .marca::after { content: " ✨"; font-size: 0.85em; }
/* capa: fundo verde com neve */
html[data-tema="natal"] body:not(.admin-ativo) .capa-hero {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0 2px, transparent 3px) 0 0 / 90px 90px,
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.4) 0 1.5px, transparent 2.5px) 0 0 / 60px 60px,
    radial-gradient(circle at 45% 85%, rgba(255,255,255,0.3) 0 1px, transparent 2px) 0 0 / 40px 40px,
    linear-gradient(180deg, color-mix(in srgb, var(--tema-3) 65%, #000), var(--tema-3));
  color: #ffffff;
}
html[data-tema="natal"] body:not(.admin-ativo) .capa-hero h1 { color: #ffffff; }
html[data-tema="natal"] body:not(.admin-ativo) .capa-hero h1::after { content: " 🎅"; }
html[data-tema="natal"] body:not(.admin-ativo) .capa-hero .hero-sub { color: rgba(255,255,255,0.88); }
html[data-tema="natal"] body:not(.admin-ativo) .capa-hero .sobretitulo { color: #ffd9a8; }
html[data-tema="natal"] body:not(.admin-ativo) .capa-hero .hero-texto .btn:not(.primario) { background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.6); }
html[data-tema="natal"] body:not(.admin-ativo) .capa-hero .hero-rodada { color: var(--tinta); border-top: 5px solid var(--tema-1); }
html[data-tema="natal"] body:not(.admin-ativo) .capa-hero .hero-rodada .sobretitulo { color: var(--destaque); }
html[data-tema="natal"] body:not(.admin-ativo) .capa-secao h2 { color: var(--tema-3); }
html[data-tema="natal"] body:not(.admin-ativo) .capa-secao.alt { background: var(--superficie); border-color: var(--linha); }
html[data-tema="natal"] body:not(.admin-ativo) .capa-cat.destaque { border-color: var(--tema-3); box-shadow: inset 0 0 0 1px var(--tema-3); }
/* loja: o fio da meta fica verde e os títulos ganham um toque de verde */
html[data-tema="natal"] body:not(.admin-ativo) .fio-cheio { background-color: var(--tema-3); }
html[data-tema="natal"] body:not(.admin-ativo) .topo { box-shadow: 0 6px 18px -14px rgba(179,32,42,0.6); }

/* ---------- Black Friday ---------- */
/* faixa de ofertas colada no topo */
html[data-tema="blackfriday"] body:not(.admin-ativo) :is(.topo, .capa-topo)::before {
  content: "BLACK FRIDAY · ofertas por tempo limitado";
  display: block; text-align: center; background: var(--tema-1); color: var(--destaque-tinta); font: 800 0.72rem/1 var(--f-titulo); letter-spacing: 0.22em; text-transform: uppercase; padding: 0.4rem 0.5rem;
  margin: -0.7rem calc(var(--margem) * -1) 0.2rem;
}
html[data-tema="blackfriday"] body:not(.admin-ativo) .capa-topo::before { margin: 0; }
html[data-tema="blackfriday"] body:not(.admin-ativo) .capa-topo { background: color-mix(in srgb, var(--fundo) 90%, transparent); }
html[data-tema="blackfriday"] body:not(.admin-ativo) .capa-hero {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tema-1) 6%, transparent) 0 2px, transparent 2px 18px), radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--tema-1) 18%, transparent), transparent 60%), var(--fundo);
  border-bottom: 6px solid transparent;
  border-image: repeating-linear-gradient(135deg, var(--tema-1) 0 14px, #111 14px 28px) 6;
}
html[data-tema="blackfriday"] body:not(.admin-ativo) .capa-hero h1 { color: #ffffff; text-transform: uppercase; letter-spacing: -0.01em; }
html[data-tema="blackfriday"] body:not(.admin-ativo) .hero-rodada { box-shadow: 0 18px 40px -24px rgba(255,196,0,0.5); border-color: var(--tema-1); }
html[data-tema="blackfriday"] body:not(.admin-ativo) .capa-secao.alt { background: var(--superficie); }
html[data-tema="blackfriday"] body:not(.admin-ativo) .marca { text-transform: uppercase; letter-spacing: 0.04em; }
/* o que na base é claro fixo: listras e botões de ação nas tabelas, fotos sobre fundo claro */
html[data-tema="blackfriday"] body:not(.admin-ativo) table:not(.zebra) tbody tr:nth-child(even):not(.historico):not(.detalhe) td { background: rgba(255,255,255,0.04); }
html[data-tema="blackfriday"] body:not(.admin-ativo) .btn.perigo:hover { background: color-mix(in srgb, var(--perigo) 18%, var(--superficie)); }
html[data-tema="blackfriday"] body:not(.admin-ativo) .cli-foto { background: color-mix(in srgb, #fff 10%, var(--superficie)); }
html[data-tema="blackfriday"] body:not(.admin-ativo) .btn-carrinho.tem .bolha { background: rgba(0,0,0,0.18); }
html[data-tema="blackfriday"] body:not(.admin-ativo) .tom { border-color: rgba(255,255,255,0.4); }