/**
 * Unified product-page hero
 * Desktop: text + product in site container
 * Mobile (tall): stacked product fills container width, copy below
 */

.product-hero,
.coldash-hero,
.baby-hero,
.adult-hero,
.bodywash-hero {
  --product-hero-gutter: 2.5rem;
  --product-hero-box: min(100% - var(--product-hero-gutter), var(--container));
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f7f9fb;
  display: flex;
  align-items: center;
}

/* ---------- Product-shot heroes (cropped bottle / pack) ---------- */
.product-hero--shot,
.baby-hero {
  aspect-ratio: auto;
  min-height: clamp(420px, 36vw, 620px);
  max-height: none;
}

/* Baby hero: strip baked-in image backdrop against white section */
.baby-page .baby-hero,
.baby-hero {
  background: #ffffff;
}

.baby-hero .product-hero-img,
.baby-hero .baby-hero-bg {
  mix-blend-mode: multiply;
  background: transparent;
}

.product-hero-layout {
  position: relative;
  z-index: 1;
  width: var(--product-hero-box);
  margin-inline: auto;
  padding-block: clamp(5.5rem, 9vw, 7rem) clamp(2.25rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  direction: ltr;
}

.product-hero--shot .product-hero-copy,
.baby-hero .product-hero-copy,
.baby-hero .baby-hero-copy {
  width: 100%;
  max-width: none;
  margin: 0;
  direction: rtl;
  text-align: right;
  color: var(--blue-deep);
}

.product-hero--shot .product-hero-media,
.baby-hero .product-hero-media,
.baby-hero .baby-hero-media {
  position: relative;
  inset: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.product-hero--shot .product-hero-img,
.baby-hero .product-hero-img,
.baby-hero .baby-hero-bg {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: min(100%, 460px);
  height: auto;
  max-height: min(72vh, 560px);
  margin-inline: auto;
  object-fit: contain;
  object-position: center center;
  transform: none;
}

.product-hero-title,
.baby-hero-title,
.coldash-hero-title,
.adult-hero-title,
.bodywash-hero-title {
  text-align: right;
}

.product-hero-text,
.baby-hero-text,
.coldash-hero-text,
.adult-hero-text,
.bodywash-hero-text {
  text-align: right;
}

/* Picture wrapper: full-bleed on desktop, boxed on mobile */
.product-hero-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

.product-hero-picture img {
  width: 100%;
  height: 100%;
}

/* Banner heroes keep full-bleed desktop cover */
.coldash-hero,
.bodywash-hero {
  aspect-ratio: 1920 / 838;
  min-height: clamp(480px, 43.65vw, 838px);
}

/* Adult: extra height so product art (top: 3rem) clears section bottom */
.adult-page .adult-hero,
.adult-hero {
  aspect-ratio: 1920 / 920;
  min-height: clamp(520px, 48vw, 900px);
}

.coldash-hero-bg,
.adult-hero-bg,
.bodywash-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

/* Adult shampoo: nudge product art below the absolute header/nav */
.adult-page .adult-hero-bg,
.adult-hero .adult-hero-bg {
  inset: auto;
  top: 3rem;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.coldash-hero-inner,
.adult-hero-inner,
.bodywash-hero-inner {
  position: relative;
  z-index: 1;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .product-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 1.25rem;
  }

  .product-hero--shot .product-hero-img,
  .baby-hero .product-hero-img,
  .baby-hero .baby-hero-bg {
    max-width: min(100%, 380px);
    max-height: min(58vh, 460px);
  }
}

/* ---------- Mobile tall mode (shared by all product heroes) ---------- */
@media (max-width: 720px) {
  /* Tall mode: force pure white so image fill + site bg blend (beats page #f7fafc overrides) */
  .product-hero,
  .coldash-page .coldash-hero,
  .coldash-hero,
  .baby-page .baby-hero,
  .baby-hero,
  .adult-page .adult-hero,
  .adult-hero,
  .bodywash-page .bodywash-hero,
  .bodywash-hero,
  .bleach-page .coldash-hero,
  .glass-cleaner-page .coldash-hero,
  .apc-page .coldash-hero,
  .oven-cleaner-page .coldash-hero,
  .carpet-shampoo-page .coldash-hero,
  .dishwashing-page .coldash-hero,
  .descaler-page .coldash-hero,
  [class$="-page"] .coldash-hero,
  [class$="-page"] .baby-hero,
  [class$="-page"] .adult-hero,
  [class$="-page"] .bodywash-hero,
  [class$="-page"] .product-hero {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: visible;
    background: #ffffff !important;
  }

  .product-hero-layout {
    width: var(--product-hero-box);
    margin-inline: auto;
    padding-block: 4.75rem 1.5rem;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .product-hero--shot .product-hero-media,
  .baby-hero .product-hero-media,
  .baby-hero .baby-hero-media {
    order: -1;
    width: 100%;
    margin: 0;
    padding: 1.85rem 2.4rem 0.5rem;
    background: #ffffff !important;
    isolation: isolate;
    box-sizing: border-box;
  }

  .product-hero--shot .product-hero-media::after,
  .baby-hero .product-hero-media::after,
  .baby-hero .baby-hero-media::after {
    content: none;
  }

  .product-hero--shot .product-hero-img,
  .baby-hero .product-hero-img,
  .baby-hero .baby-hero-bg {
    width: auto !important;
    max-width: 46% !important;
    height: auto !important;
    max-height: 195px !important;
    margin-inline: auto;
    object-fit: contain;
    object-position: center center;
  }

  .product-hero--shot .product-hero-copy,
  .baby-hero .product-hero-copy,
  .baby-hero .baby-hero-copy,
  .product-hero-layout .product-hero-copy {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: right;
    background: transparent;
  }

  /* Banner heroes → vertical product shot with shared shrink padding */
  .product-hero-picture {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--product-hero-box) !important;
    max-width: var(--product-hero-box) !important;
    height: auto !important;
    margin: 0.85rem auto 0 !important;
    padding: 1.85rem 2.4rem 0.5rem;
    box-sizing: border-box;
    background: #ffffff !important;
    z-index: 0;
  }

  .coldash-page .coldash-hero-bg,
  .coldash-hero .coldash-hero-bg,
  .coldash-hero-bg,
  .adult-page .adult-hero-bg,
  .adult-hero-bg,
  .bodywash-page .bodywash-hero-bg,
  .bodywash-hero-bg {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: auto !important;
    max-width: 46% !important;
    height: auto !important;
    aspect-ratio: auto;
    max-height: 195px !important;
    margin: 0 auto !important;
    object-fit: contain;
    object-position: center center;
    background: #ffffff !important;
  }

  .coldash-hero-inner,
  .adult-hero-inner,
  .bodywash-hero-inner {
    width: var(--product-hero-box) !important;
    max-width: var(--product-hero-box) !important;
    margin-inline: auto;
    margin-top: clamp(-0.85rem, -3vw, -0.35rem);
    padding-block: 0 1.6rem !important;
    padding-inline: 0 !important;
    justify-content: flex-start !important;
    background: #ffffff !important;
  }

  .coldash-hero-copy,
  .adult-hero-copy,
  .bodywash-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0 !important;
    text-align: right !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .coldash-hero-title,
  .adult-hero-title,
  .bodywash-hero-title,
  .baby-hero-title,
  .product-hero-title {
    text-align: right !important;
    margin-bottom: 0.85rem;
  }

  .coldash-hero-text,
  .adult-hero-text,
  .bodywash-hero-text,
  .baby-hero-text,
  .product-hero-text {
    align-items: stretch !important;
    text-align: right !important;
  }

  .coldash-hero-text p,
  .adult-hero-text p,
  .bodywash-hero-text p,
  .baby-hero-text p,
  .product-hero-text p {
    text-align: right !important;
  }
}

@media (max-width: 480px) {
  .product-hero,
  .coldash-hero,
  .baby-hero,
  .adult-hero,
  .bodywash-hero {
    --product-hero-gutter: 2.5rem;
  }

  .product-hero-picture {
    margin-top: 0.65rem;
    padding: 1.5rem 2rem 0.4rem;
  }

  .product-hero--shot .product-hero-media,
  .baby-hero .product-hero-media,
  .baby-hero .baby-hero-media {
    padding: 1.5rem 2rem 0.4rem;
  }

  .product-hero--shot .product-hero-img,
  .baby-hero .product-hero-img,
  .baby-hero .baby-hero-bg,
  .coldash-page .coldash-hero-bg,
  .coldash-hero .coldash-hero-bg,
  .coldash-hero-bg,
  .adult-page .adult-hero-bg,
  .adult-hero-bg,
  .bodywash-page .bodywash-hero-bg,
  .bodywash-hero-bg {
    width: auto !important;
    max-width: 46% !important;
    max-height: 195px !important;
  }
}