/* Tema Black Friday — nas cores do site (verde-escuro + creme, com detalhe dourado).
   Só vale quando black-friday.js coloca a classe "bf" no <html>;
   depois de 30/11 o site volta sozinho ao visual normal. */
:root { --bf-green: #002928; --bf-cream: #fffcf2; --bf-gold: #d9b46a; }

/* Banners: o banner continua como foi feito; só entram o selo acima do nome e a contagem abaixo do botão */
.banner-slide.bf-on { position: relative; overflow: hidden; }
.bf-tag {
  position: absolute; left: var(--x); top: var(--tag); transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: .4em;
  padding: .75em 1.4em .8em; border-radius: 14px;
  background: rgba(0, 20, 19, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(241, 215, 155, .55);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  white-space: nowrap; pointer-events: none; line-height: 1; text-align: center;
  font-family: 'Montserrat', 'Inter', sans-serif; text-transform: uppercase; color: #fff;
}
.bf-tag span { font-size: max(9px, .78vw); font-weight: 500; letter-spacing: .32em; padding-left: .32em; }
.bf-tag b { font-size: max(12px, 1.2vw); font-weight: 800; letter-spacing: .12em; padding-left: .12em; color: #f1d79b; }
@media (max-width: 768px) {
  .bf-tag { left: var(--mx); top: var(--mtag); gap: 5px; padding: 8px 14px 9px; border-radius: 12px; }
  .bf-tag span { font-size: 9px; letter-spacing: .26em; }
  .bf-tag b { font-size: 12.5px; letter-spacing: .08em; }
}

/* Faixa correndo acima do vídeo: verde com branco, igual ao site */
.bf-marquee { background: var(--bf-green); color: var(--bf-cream); height: 42px; overflow: hidden; display: flex; align-items: center; border-top: 1px solid rgba(217,180,106,.35); border-bottom: 1px solid rgba(217,180,106,.35); }
.bf-marquee-track { display: flex; white-space: nowrap; animation: bf-marquee 48s linear infinite; }
.bf-marquee-track span { font-family: 'Montserrat', 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 0 26px; }
.bf-marquee-track span::before { content: '✦'; margin-right: 26px; color: var(--bf-gold); }
@keyframes bf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Faixa no topo da página do relógio (ela não tem a barra de avisos) */
.bf-strip { background: var(--bf-green); color: var(--bf-cream); display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 9px 12px; font: 700 11px 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bf-strip em { font-style: normal; color: var(--bf-gold); }

@media (max-width: 480px) { .bf-strip { font-size: 10px; letter-spacing: .08em; gap: 8px; } }

/* Selos de desconto */
html.bf .pcard-badge { background: linear-gradient(180deg, #f1d79b, var(--bf-gold)) !important; color: var(--bf-green) !important; font-size: 10px; font-weight: 900; padding: 6px 11px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
html.bf .pcard-badge::before { content: 'BLACK FRIDAY '; font-weight: 700; }
html.bf .product-disc { background: linear-gradient(180deg, #f1d79b, var(--bf-gold)) !important; color: var(--bf-green) !important; font-weight: 900; }

/* Página do relógio */
html.bf .product-price { white-space: nowrap; }
html.bf .product-pricing { flex-wrap: wrap; row-gap: 4px; }
.bf-product { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 6px; padding: 9px 14px; border-radius: 999px; background: var(--bf-green); color: var(--bf-cream); font: 600 13px 'Inter', sans-serif; white-space: nowrap; }
.bf-product b { font-weight: 800; color: var(--bf-gold); }