/* Black Friday bar above the header (fbw-bf-bar.php). Ink band, white text, the code in a yellow chip as in the
   manual's banners (bf-web-notices). One row on desktop; on a phone only the offer, the code and the link (owner,
   2026-11-04: «mucho texto»). Calm: nothing moves but the clock. */
.fbw-bf { background: var(--base-ultra-dark); color: var(--white); font-size: var(--text-s); line-height: 1.3; }
.fbw-bf__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.875rem;
  max-inline-size: var(--content-width, 80rem); margin-inline: auto; padding: 0.5rem 1rem; min-block-size: 2.75rem; }
.fbw-bf p.fbw-bf__msg { margin: 0; color: inherit; font-size: inherit; display: inline-flex; flex-wrap: wrap; gap: 0 0.375rem; justify-content: center; }
.fbw-bf b { font-weight: 600; color: var(--white); }
.fbw-bf[data-state="sold"] :is(.fbw-bf__code, .fbw-bf__count) { display: none; }

/* audits 2026-11-04: «Get lifetime» is the one filled element; the code is a quiet outline chip next to the price it
   gives. Before, the solid yellow code out-shouted the call to action (owner) */
.fbw-bf__deal s { color: color-mix(in srgb, var(--white) 55%, transparent); text-decoration-thickness: 1px; }
.fbw-bf[data-state="early"] .fbw-bf__list, .fbw-bf[data-state="sold"] .fbw-bf__deal { display: none; }
.fbw-bf__code { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 35px; padding: 0.25rem 0.75rem;
  border: 1px dashed var(--primary); border-radius: var(--fbw-radius-btn); background: transparent; color: var(--white); font: inherit;
  font-weight: 600; letter-spacing: 0.04em; cursor: pointer; white-space: nowrap;
  transition: background-color var(--fbw-t-s) var(--fbw-ease-color), border-color var(--fbw-t-s) var(--fbw-ease-color), scale 150ms ease; }
.fbw-bf__code svg { color: var(--primary); }
.fbw-bf__code:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.fbw-bf__code:active { scale: 0.97; }
.fbw-bf__code[data-copied] { border-style: solid; }

.fbw-bf__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; justify-content: center; color: color-mix(in srgb, var(--white) 75%, transparent); }
.fbw-bf__meta b, .fbw-bf__clock b { font-variant-numeric: tabular-nums; }
.fbw-bf__clock[hidden] { display: none; }
/* the countdown: one small box per unit, the digits fixed-width so nothing shifts as they tick */
.fbw-bf__clock { display: inline-flex; align-items: center; gap: 0.5rem; }
.fbw-bf__units { display: inline-flex; gap: 0.25rem; }
.fbw-bf__u { display: inline-flex; align-items: baseline; gap: 1px; min-inline-size: 2.375rem; justify-content: center; padding: 0.25rem 0.375rem;
  border-radius: 0.375rem; background: color-mix(in srgb, var(--white) 10%, transparent); }
.fbw-bf__u b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--white); }
.fbw-bf__u small { font-size: 0.75em; color: color-mix(in srgb, var(--white) 65%, transparent); }

/* «Get lifetime» is the web's FBK Button (Primary · Brand · S · Brackets), the same markup Bricks prints for «Browse
   templates»; on the ink bar it behaves as on every dark section (fbw.css: .fbw-bf joins those :where() lists) */
.fbw-bf .fbw-bf__code:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 767px) {
  .fbw-bf__in { gap: 0.375rem 0.625rem; padding-block: 0.5rem; }
  /* the offer on its own line, the code and «Get lifetime» side by side under it (owner, 2026-11-04: the button looked
     alone on the second line) */
  .fbw-bf p.fbw-bf__msg { flex-basis: 100%; }
  .fbw-bf__meta { display: none; }  /* a phone gets the offer, the code and the link only (owner, 2026-11-04: «mucho texto») */
}
@media (prefers-reduced-motion: reduce) { .fbw-bf__code { transition: none; } }