/* Black Friday / Cyber Monday coupon page (#602). Loaded only on /black-friday.
   Plain CSS scoped under .bf-page, a self-contained light panel with fixed brand
   hex colors (docs/design/branding.md). No site color variables: the dark sites
   (guns-and-ammo, powder) set --color-black/--color-dark-gray to light colors,
   which would be white-on-white here. No Tailwind build step needed. */

.bf-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  color: #374151;
  background: #fff;
}

.bf-page a {
  color: #1B4332;
}

.bf-page .bf-hero {
  margin-bottom: 1.5rem;
  border-left: 4px solid #D4A24C;
  padding: 0.25rem 0 0.25rem 1rem;
}

.bf-page .bf-title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 800;
  color: #1B4332;
}

.bf-page .bf-dates {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: #1F2937;
}

.bf-page .bf-disclosure {
  margin: 0;
  font-size: 0.875rem;
  color: #374151;
}

.bf-page .bf-section-title {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F2937;
}

.bf-page .bf-count,
.bf-page .bf-empty {
  margin: 0 0 1rem;
  color: #374151;
}

.bf-page .bf-merchant-grid,
.bf-page .bf-deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.bf-page .bf-merchant,
.bf-page .bf-deal {
  border: 1px solid #E8E6E1;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.bf-page .bf-merchant {
  padding: 1rem;
}

.bf-page .bf-merchant-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.bf-page .bf-merchant-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.bf-page .bf-merchant-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1B4332;
}

.bf-page .bf-coupons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-page .bf-coupon {
  padding: 0.75rem 0;
  border-top: 1px solid #E8E6E1;
}

.bf-page .bf-coupon:first-child {
  border-top: 0;
  padding-top: 0.25rem;
}

.bf-page .bf-coupon-headline {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: #1F2937;
}

.bf-page .bf-coupon-description {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.bf-page .bf-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
}

.bf-page .bf-code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border: 1px dashed #1B4332;
  border-radius: 4px;
  background: #F5F3EF;
  color: #1B4332;
  word-break: break-all;
}

.bf-page .bf-copy {
  padding: 0.3rem 0.75rem;
  border: 1px solid #1B4332;
  border-radius: 6px;
  background: #fff;
  color: #1B4332;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.bf-page .bf-copy:hover,
.bf-page .bf-copy:focus-visible {
  background: #1B4332;
  color: #fff;
}

.bf-page .bf-ends {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: #374151;
}

/* CTA: white on dark green (about 10:1 contrast). */
.bf-page a.bf-shop {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  background: #1B4332;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

.bf-page a.bf-shop:hover,
.bf-page a.bf-shop:focus-visible {
  background: #2D5A45;
}

.bf-page .bf-deal-image {
  position: relative;
  display: block;
  background: #fff;
}

.bf-page .bf-deal-image img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
  padding: 1rem;
  box-sizing: border-box;
}

.bf-page .bf-deal-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: #A84E20; /* darker rust: passes 4.5:1 with white text */
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.bf-page .bf-deal-body {
  padding: 0.75rem 1rem 1rem;
}

.bf-page .bf-deal-merchant {
  font-size: 0.75rem;
  color: #374151;
  margin-bottom: 0.25rem;
}

.bf-page .bf-deal-title {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1F2937;
  text-decoration: none;
}

.bf-page .bf-deal-prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.bf-page .bf-deal-price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: #A84E20;
}

.bf-page .bf-deal-was {
  text-decoration: line-through;
  color: #6B7280;
  font-size: 0.8125rem;
}

.bf-page .bf-faq-item {
  border-top: 1px solid #E8E6E1;
  padding: 0.75rem 0;
}

.bf-page .bf-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: #1F2937;
}

.bf-page .bf-faq-item p {
  margin: 0.5rem 0 0;
}

/* Site stylesheets color bare elements (light text on the dark sites); keep
   them on this panel's own colors. Class rules above are more specific. */
.bf-page p,
.bf-page li,
.bf-page span,
.bf-page div,
.bf-page summary,
.bf-page h1,
.bf-page h2,
.bf-page h3 {
  color: inherit;
}

@media (max-width: 640px) {
  .bf-page .bf-title {
    font-size: 1.4rem;
  }

  .bf-page .bf-merchant-grid,
  .bf-page .bf-deal-grid {
    grid-template-columns: 1fr;
  }
}