@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

/* ============================================================
   BEARD BLAZE — modern theme layer
   Load AFTER bootstrap.css. Re-skins the classes you already
   use, so most of the page needs zero markup changes.
   Tuned for Bootstrap 5.3 (uses .btn / component CSS vars).
   ============================================================ */

:root{
  --bb-ink:     #1C1917;   /* near-black, warm — text + dark buttons   */
  --bb-ember:   #C2410C;   /* the "blaze" — primary CTAs ONLY          */
  --bb-ember-d: #9A3412;   /* ember hover / active                     */
  --bb-stone:   #6F6A63;   /* muted body copy (warmer than BS grey)    */
  --bb-line:    #E8E3DA;   /* hairline borders                         */
  --bb-paper:   #FAF8F4;   /* faint warm wash — use sparingly          */
}

/* ---------- Type: condensed display heads, clean body ---------- */
h1,h2,h3,h4,h5,h6,.card-title{
  font-family:'Oswald',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--bb-ink);
}
.display-4{ font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.lead{ font-weight:400; }

body{ color:var(--bb-ink); -webkit-font-smoothing:antialiased; }
.text-muted{ color:var(--bb-stone) !important; }

/* ---------- Buttons (Bootstrap 5.3 component variables) ---------- */
.btn{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase; letter-spacing:.6px; font-weight:600;
  border-radius:4px; padding-inline:1.4rem;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover{ transform:translateY(-1px); }

.btn-primary{
  --bs-btn-bg:var(--bb-ember);          --bs-btn-border-color:var(--bb-ember);
  --bs-btn-hover-bg:var(--bb-ember-d);  --bs-btn-hover-border-color:var(--bb-ember-d);
  --bs-btn-active-bg:var(--bb-ember-d); --bs-btn-active-border-color:var(--bb-ember-d);
  --bs-btn-disabled-bg:var(--bb-ember); --bs-btn-disabled-border-color:var(--bb-ember);
}
.btn-dark{
  --bs-btn-bg:var(--bb-ink); --bs-btn-border-color:var(--bb-ink);
  --bs-btn-hover-bg:#000;    --bs-btn-hover-border-color:#000;
}
.btn-outline-primary{
  --bs-btn-color:var(--bb-ember);        --bs-btn-border-color:var(--bb-ember);
  --bs-btn-hover-bg:var(--bb-ember);     --bs-btn-hover-border-color:var(--bb-ember);
  --bs-btn-active-bg:var(--bb-ember-d);  --bs-btn-active-border-color:var(--bb-ember-d);
}
.btn-outline-dark{
  --bs-btn-color:var(--bb-ink);     --bs-btn-border-color:var(--bb-ink);
  --bs-btn-hover-bg:var(--bb-ink);  --bs-btn-hover-border-color:var(--bb-ink);
}

/* ---------- Product cards ---------- */
.card{
  border:1px solid var(--bb-line); border-radius:8px; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card.shadow-sm{ box-shadow:0 1px 2px rgba(28,25,23,.05) !important; }
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(28,25,23,.10) !important; }
.card-img-top{ background:#fff; padding:1.25rem; }
.card-title{ font-size:1.15rem; margin-bottom:.4rem; }
.product-price .fw-bold{ font-size:1.25rem; color:var(--bb-ink); }

/* star rating: ember stars, muted count */
.card-body p{ color:var(--bb-ember); letter-spacing:1px; margin-bottom:.5rem; }
.card-body p small{ color:var(--bb-stone); letter-spacing:0; }

/* ---------- Hero: gradient overlay, not a dark box ---------- */
.bb-hero{ height:78vh; }
.bb-hero::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(28,25,23,.40) 0%, rgba(28,25,23,.72) 100%);
}
.bb-hero-content{ position:relative; z-index:1; max-width:760px; padding:1rem; }
/* headings default to charcoal globally — force them white over the hero */
.bb-hero-content h1,
.bb-hero-content .display-4,
.bb-hero-content .lead{ color:#fff; }
.bb-hero-content .display-4{ text-shadow:0 2px 18px rgba(0,0,0,.55); }
.bb-hero-content .lead{ opacity:.92; }

/* ---------- Section rhythm ---------- */
hr{ border-top:1px solid var(--bb-line) !important; }

/* ---------- Optional: trust / feature strip ---------- */
.bb-feature-strip{ background:var(--bb-paper); border-block:1px solid var(--bb-line); }
.bb-feature-strip .bb-feat{
  font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.6px; font-size:.95rem; color:var(--bb-ink);
}
.bb-feature-strip .bb-feat span{
  display:block; color:var(--bb-stone);
  text-transform:none; letter-spacing:0; font-size:.8rem; font-family:system-ui,sans-serif;
}

/* ---------- Accessibility floor ---------- */
@media (prefers-reduced-motion: reduce){
  .btn,.card{ transition:none; }
  .btn:hover,.card:hover{ transform:none; }
}