/* ═══════════════════════════════════════════════════════════════════════
   Skin Black da home (/) (CSS)

   Ligada e desligada por data em functions/_lib/skins.js, que injeta este
   arquivo na própria home (mesma URL) e marca <html data-skin="black">.
   Entra DEPOIS do style.css, então ganha nos empates. Tudo aqui é
   prefixado por "bk-" ou escopado por html[data-skin="black"]: fora do
   evento, nada disto é carregado.

   Na home a campanha é discreta: uma chamada acima da grade de produtos e
   um selo no topo de cada card com a oferta daquele produto. Preto puro e
   amarelo de sinalização, as mesmas cores da skin Black das LPs.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-skin="black"] {
  --bk-hot: #ffd23f;
  --bk-ink: #f5f5f4;
  --bk-line: rgba(255, 210, 63, 0.35);
  --bk-cometa: radial-gradient(ellipse 60px 2px at center, #fff 0, var(--bk-hot) 30%, transparent 70%) no-repeat,
    rgba(255, 210, 63, 0.28);
}

/* ─── Chamada acima da grade ────────────────────────────────────────── */
/* Sem caixa: a frase entre dois filetes que somem nas pontas (opção A,
   escolhida pelo Renan em 15/10 entre três no artefato de Design). */
.bk-home-call {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  max-width: 640px; margin: 1.8rem auto 0;
}
.bk-home-call::before, .bk-home-call::after { content: ""; flex: 1; height: 1px; }
.bk-home-call::before { background: linear-gradient(90deg, transparent, var(--bk-line)); }
.bk-home-call::after { background: linear-gradient(90deg, var(--bk-line), transparent); }
.bk-home-call__text {
  font-size: 0.92rem; line-height: 1.4; color: var(--text-2); white-space: nowrap;
}
.bk-home-call__tag {
  margin-right: 0.6rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bk-hot);
}

/* ─── Selo no topo de cada card ─────────────────────────────────────── */
/* BLACK numa linha e o antes e depois embaixo: lado a lado, o preço riscado
   não cabe nas 5 colunas da grade. */
.bk-card-seal {
  position: relative; display: block;
  padding: 0.7rem 1.5rem 0.8rem;
  background: #000;
  line-height: 1.3; text-align: left;
  color: rgba(245, 245, 244, 0.55);
}
/* Filete "cometa" na base do selo: o mesmo das faixas das LPs. */
.bk-card-seal::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--bk-cometa); background-size: 120px 100%, 100% 100%;
  animation: bk-cometa 3.2s linear infinite;
}
@keyframes bk-cometa {
  from { background-position: -120px 0, 0 0; }
  to { background-position: calc(100% + 120px) 0, 0 0; }
}
.bk-card-seal__tag {
  display: block; margin-bottom: 0.3rem;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bk-hot); white-space: nowrap;
}
.bk-card-seal__deal {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-size: 0.76rem; white-space: nowrap;
}
.bk-card-seal__deal s { text-decoration-thickness: 1px; }
.bk-card-seal__deal strong { font-size: 1.05rem; font-weight: 800; color: var(--bk-hot); letter-spacing: -0.01em; }
.bk-card-seal__deal span { margin-left: -0.3rem; color: rgba(245, 245, 244, 0.7); }

html[data-skin="black"] .product-card { border-color: rgba(255, 210, 63, 0.22); }
html[data-skin="black"] .product-card:hover { border-color: rgba(255, 210, 63, 0.6); }

@media (max-width: 640px) {
  .bk-card-seal { padding: 0.7rem 1.4rem 0.75rem; }
  .bk-home-call::before, .bk-home-call::after { display: none; }
  .bk-home-call__text { white-space: normal; text-align: center; font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-card-seal::after { animation: none; }
}