/* Page-specific photography; keep the subject tied to the page title. */
.inner-page .page-hero {
  --page-hero-photo: url("../../images/heroes/hero-brand-tools.jpg");
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-image:
    linear-gradient(90deg, rgba(16, 42, 67, .04), rgba(16, 42, 67, .28) 48%, rgba(16, 42, 67, .7)),
    var(--page-hero-photo) !important;
}

.inner-page.mobile-page--about-index .about-hero,
.inner-page.mobile-page--brands-index .brands-hero {
  --page-hero-photo: url("../../images/heroes/hero-about-showroom.jpg");
}

.inner-page.mobile-page--faq-index .about-hero {
  --page-hero-photo: url("../../images/heroes/hero-faq-support.jpg");
}

.inner-page.mobile-page--contact-index .contact-hero {
  --page-hero-photo: url("../../images/heroes/hero-service-support.jpg");
}

.inner-page.mobile-page--shipping-index .about-hero,
.inner-page .cart-page-hero {
  --page-hero-photo: url("../../images/heroes/order-dispatch.jpg");
}

.inner-page.mobile-page--tracking-index .about-hero {
  --page-hero-photo: url("../../images/heroes/hero-order-tracking.jpg");
}

.inner-page.mobile-page--legal-returns .legal-hero {
  --page-hero-photo: url("../../images/heroes/hero-returns-inspection.jpg");
}

.inner-page.mobile-page--legal-terms .legal-hero {
  --page-hero-photo: url("../../images/heroes/hero-terms-use.jpg");
}

.inner-page.mobile-page--legal-privacy .legal-hero {
  --page-hero-photo: url("../../images/heroes/store-policies-privacy.jpg");
}

.inner-page .compare-page-hero {
  --page-hero-photo: url("../../images/heroes/hero-product-comparison.png");
}

.inner-page .page-hero:not(.article-hero)::before,
.inner-page .article-hero::before {
  background: linear-gradient(
    90deg,
    rgba(16, 42, 67, .08) 0%,
    rgba(16, 42, 67, .18) 38%,
    rgba(16, 42, 67, .56) 67%,
    rgba(16, 42, 67, .78) 100%
  ) !important;
}

.inner-page .page-hero.product-detail-hero::before {
  background: linear-gradient(
    90deg,
    rgba(16, 42, 67, 0) 0%,
    rgba(16, 42, 67, .06) 24%,
    rgba(16, 42, 67, .55) 55%,
    rgba(16, 42, 67, .8) 100%
  );
}

/* Foreground photos (about, warranty, articles and individual products)
   replace the CSS photo rather than being layered over a second image. */
.inner-page .page-hero:has(> .hero-image) {
  background-image: none !important;
}

.inner-page .page-hero > .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

/* Square product photos stay complete inside their reserved image column. */
.inner-page .product-detail-hero > .hero-image {
  inset: 0 auto 0 0;
  width: 52%;
  object-fit: contain;
  object-position: left center;
  opacity: 1;
  filter: drop-shadow(0 16px 24px rgba(3, 14, 34, .32));
  transform: scale(1.1);
  transform-origin: left center;
}

/* Article photography fills its column; contain left empty space beside square images. */
.inner-page .article-hero > .hero-image {
  object-position: center 45%;
}

@media (max-width: 767px) {
  .inner-page .page-hero {
    min-height: 280px !important;
    background-position: 36% center !important;
  }

  .inner-page .page-hero:is(.product-detail-hero, .article-hero) > .hero-image {
    width: 100%;
    object-position: center;
    opacity: .88;
  }

  .inner-page .product-detail-hero > .hero-image {
    opacity: .96;
    transform: none;
  }
}