/* ============================================================
   Multi-page fallbacks
   The original design relies on background photos under
   /assets/images/ (hero-bg.png, image4.png, etc.). Until those
   photos are added, these rules provide on-brand fallbacks so the
   footer and hero are fully visible instead of white-on-white.
   Loaded AFTER style.css so it overrides only the backgrounds.
   ============================================================ */

/* Footer: warm orange-curve render with a dark overlay so the white
   footer text stays readable. */
.footer {
  background-color: #201108;
  background-image: linear-gradient(rgba(22, 12, 6, 0.74), rgba(22, 12, 6, 0.80)), url('assets/images/footer-bg.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Hero: reuse kiln-shelves.png with a strong left-side overlay so the white heading/buttons read. */
.hero {
  background-color: #2a1c10;
  background-image: linear-gradient(100deg, rgba(18, 10, 5, 0.86) 0%, rgba(18, 10, 5, 0.55) 50%, rgba(18, 10, 5, 0.25) 100%), url('assets/images/kiln-shelves.png');
}

/* Product / hero photos that 404 are hidden by page.js (img error
   handler); keep the cream frame looking intentional meanwhile. */
.product-image,
.hero-image img {
  background: var(--cream);
}

/* ============================================================
   Page hero banner (inner pages) + breadcrumb (all pages)
   Consistent, on-brand header used across every page.
   ============================================================ */

/* Inner-page hero banner: warm branded strip with the page title. */
.page-hero {
  position: relative;
  background-color: #201108;
  background-image: linear-gradient(rgba(22, 12, 6, 0.74), rgba(22, 12, 6, 0.80)), url('assets/images/footer-bg.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--white);
  text-align: center;
  padding: 64px 0 58px;
}

.page-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--white);
}

/* small brand underline beneath the banner title */
.page-hero-underline {
  display: block;
  width: 70px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: var(--orange-primary);
}

/* Breadcrumb bar: light strip directly under the banner / hero. */
.breadcrumb-bar {
  background: var(--light-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 14px 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 500;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb a {
  color: var(--text-mid);
  text-decoration: none;
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: var(--orange-primary);
}

.breadcrumb .sep {
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1;
}

.breadcrumb .current {
  color: var(--orange-primary);
  font-weight: 600;
}

@media (max-width: 600px) {
  .page-hero {
    padding: 48px 0 42px;
  }

  .page-hero h1 {
    font-size: 1.9rem;
  }
}