/* ==========================================================================
   Black Friday — loaded only between BF_TEASE_FROM and BF_END (includes/black-friday.php).
   "Black card" look: the pages stay light (warm ivory and champagne instead of grey), with black and gold
   as accents — a black countdown bar, the homepage banner as a black card with a gold edge, black buttons
   with gold lettering, gold hairlines and gold hover rings. Coral stays for sale prices.
   ========================================================================== */

html.bf {
  --bf-gold: #E2B04A;        /* on black */
  --bf-gold-2: #F6DB97;
  --bf-gold-deep: #8A6416;   /* gold text on ivory: 5.4:1 */
  --bf-foil: linear-gradient(120deg, #B8862B 0%, #F2D184 35%, #C9973A 55%, #F6DB97 75%, #B8862B 100%);
  --bf-red: #E5484D;

  --paper: #FBF9F4;          /* ivory */
  --stone: #F5F0E6;          /* champagne */
  --stone-2: #EDE6D8;
  --line: #ECE5D7;
  --line-2: #DCD2BF;
}
.bf ::selection { background: #111; color: var(--bf-gold-2); }

/* Header: ivory glass over a gold hairline */
.bf .header { background: rgba(251, 249, 244, .86); }
.bf .header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, #D7AE55 20%, #F2D184 50%, #D7AE55 80%, transparent);
}

/* The nav's Black Friday link as a small black-and-gold pill */
.bf .nav__link[href$="/deals/"] { margin-inline: 4px; padding: 7px 14px; border-radius: 999px; background: #111; color: var(--bf-gold-2); align-self: center; }
.bf .nav__link[href$="/deals/"]::after { display: none; }
@media (hover: hover) { .bf .nav__link[href$="/deals/"]:hover { background: #000; color: #fff; } }
.bf .menu__links a[href$="/deals/"] { color: var(--bf-gold-deep); }

/* Buttons: black with gold lettering; the hover fills gold */
.bf .btn:not(.btn--ghost):not(.btn--light):not(.btn--wa) { --bg: #111; --fg: var(--bf-gold-2); --bd: #111; }
.bf .btn:not(.btn--ghost):not(.btn--light):not(.btn--wa)::before { background: var(--bf-foil); }
@media (hover: hover) { .bf .btn:not(.btn--ghost):not(.btn--light):not(.btn--wa):hover { color: #111; border-color: #C9973A; } }
.bf .btn--ghost { --bd: #D9C9A6; }

/* Headings: the italic word in deep gold */
.bf .section__title em, .bf .page-title em, .bf .hero__title em { color: var(--bf-gold-deep); }
.bf .eyebrow { color: #7A6A4F; }

/* Product cards: a gold ring on hover; sale badges as black tags with gold figures */
.bf .card__media { transition: box-shadow var(--t) var(--ease-out); }
@media (hover: hover) { .bf .card:hover .card__media { box-shadow: 0 0 0 1.5px #D7AE55, 0 22px 44px -24px rgba(138, 100, 22, .55); } }
.bf .badge { background: #111; color: var(--bf-gold-2); }
.bf .badge--light { background: var(--bf-foil); color: #111; }
.bf .badge--muted { background: var(--mute); color: #fff; }
.bf .chip-icon { background: #111; color: var(--bf-gold-2); }

/* Panels get a faint gold edge */
.bf .summary, .bf .card-form, .bf .price-table, .bf .promo-card { border-color: #E6D9BC; }
.bf .float-card { border-color: #EADFC6; }

/* Footer and dark bands: black with a gold line on top */
.bf .footer, .bf .section--ink { background: #0A0A0A; }
.bf .footer { border-top: 2px solid; border-image: linear-gradient(90deg, #8A6416, #F2D184, #8A6416) 1; }

/* Lipa Mdogo Mdogo pop-up */
.bf .lpp-pop__pill { background: #111; color: var(--bf-gold-2); }

/* ---------- Countdown digits ---------- */
.bf-clock { display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; }
.bf-clock__unit { display: inline-flex; align-items: baseline; gap: 2px; }
.bf-clock__unit b { font-weight: 600; }
.bf-clock__unit small { font-size: .7em; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }

/* The bar and the banner are black, so their own text colours are set here. */
.bf-bar, .bf-hero { --ink: #F5F2EC; --ink-3: #D6D0C4; --mute: #A8A196; --line: #2A2723; --line-2: #3B3732; }

/* ---------- The bar above the header (replaces the announcement line) ---------- */
.bf-bar {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  min-height: 44px; padding: 7px 16px; overflow: hidden; isolation: isolate;
  background: #0A0A0A; color: var(--ink); font-size: 13px; letter-spacing: .03em;
}
.bf-bar::before { /* a slow gold sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(242, 209, 132, .16) 50%, transparent 70%) -100% 0 / 60% 100% no-repeat;
  animation: bf-sweep 5s linear infinite;
}
@keyframes bf-sweep { to { background-position: 250% 0; } }
.bf-bar__tag {
  padding: 3px 10px; border-radius: 4px; background: var(--bf-foil); color: #111;
  font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}
.bf-bar__label { color: var(--mute); }
.bf-clock--bar { gap: 8px; color: var(--bf-gold-2); font-size: 14px; }
.bf-clock--bar small { font-size: 10px; color: var(--mute); opacity: 1; }
.bf-bar__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
@media (hover: hover) { .bf-bar:hover .bf-bar__go { color: var(--bf-gold-2); } }
@media (max-width: 640px) {
  .bf-bar { gap: 10px; flex-wrap: nowrap; padding-inline: 10px; font-size: 12px; }
  .bf-bar__tag { padding: 2px 7px; font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; }
  .bf-bar__label { display: none; }
  .bf-bar__go { display: none; }
  .bf-clock--bar { font-size: 13px; gap: 6px; }
  .bf-clock--bar small { font-size: 9px; }
}

/* ---------- Homepage banner: a black card with a gold edge, on the ivory page ---------- */
.bf-hero { padding: clamp(16px, 3vw, 32px) 0 0; text-align: center; }
.bf-hero__inner {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(44px, 7vw, 92px) clamp(40px, 6vw, 80px);
  border-radius: clamp(24px, 3vw, 36px); background: #0A0A0A;
  box-shadow: 0 0 0 1px rgba(226, 176, 74, .55), 0 40px 80px -40px rgba(80, 55, 10, .55);
}
.bf-hero__inner::before { /* soft gold light from the top corners */
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 15% 20%, rgba(226, 176, 74, .22), transparent 70%),
    radial-gradient(35% 45% at 88% 85%, rgba(242, 209, 132, .12), transparent 70%);
  animation: bf-glow 9s ease-in-out infinite alternate;
}
@keyframes bf-glow { to { transform: translate3d(3%, -4%, 0) scale(1.06); } }
.bf-hero__inner::after { /* fine guilloché-like grid, as on a card */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.bf-hero__eyebrow {
  display: inline-block; margin-bottom: 18px; padding: 6px 14px; border: 1px solid rgba(226, 176, 74, .45); border-radius: 999px;
  color: var(--bf-gold-2); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.bf-hero__title {
  font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: -.04em;
  font-size: clamp(3rem, 12vw, 8.5rem); line-height: .9; color: #fff;
}
.bf-hero__title span { background: linear-gradient(180deg, #fff 40%, #9a958c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bf-hero__title em {
  font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -.01em;
  background: var(--bf-foil); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: bf-shine 6s linear infinite;
}
@keyframes bf-shine { to { background-position: -200% 0; } }
.bf-hero__lead { max-width: 560px; margin: 20px auto 30px; padding-inline: 16px; color: var(--ink-3); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 300; }
.bf-hero__count { margin-bottom: 12px; color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.bf-clock--big { gap: clamp(8px, 2vw, 16px); }
.bf-clock--big .bf-clock__unit {
  flex-direction: column; align-items: center; gap: 6px; min-width: clamp(64px, 15vw, 112px); padding: clamp(12px, 2vw, 18px) 8px;
  border: 1px solid rgba(226, 176, 74, .3); border-radius: 16px; background: linear-gradient(180deg, #17150F, #0B0A08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.bf-clock--big b { font-size: clamp(2rem, 7vw, 4rem); line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--bf-gold-2); }
.bf-clock--big small { font-size: 11px; letter-spacing: .14em; color: var(--mute); opacity: 1; }
.bf-hero__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-inline: 16px; }
/* On the black card: the main button in gold foil, the other outlined in gold */
.bf .bf-hero .btn:not(.btn--ghost) { --bg: #E2B04A; --fg: #111; --bd: #E2B04A; background: var(--bf-foil); color: #111; }
.bf .bf-hero .btn:not(.btn--ghost)::before { background: #fff; }
.bf .bf-hero .btn--ghost { --fg: #F6DB97; --bd: rgba(226, 176, 74, .5); }
.bf .bf-hero .btn--ghost::before { background: #F6DB97; }
@media (hover: hover) { .bf .bf-hero .btn--ghost:hover { color: #111; } }
@media (prefers-reduced-motion: reduce) {
  .bf-bar::before, .bf-hero__inner::before, .bf-hero__title em { animation: none; }
}