/* Responsive skintherx campaign collage hero. */
.skintherx-hero-collage-section { background: #29384a; }
/* Full banner always visible: desktop artwork is 1440x600 (12:5); mobile keeps its 2:3 artwork. */
.skintherx-hero-collage { position: relative; height: min(100vh, 100svh, 41.667vw); min-height: 0; overflow: hidden; isolation: isolate; }
.skintherx-hero-collage__grid { position: relative; height: 100%; background: #29384a; }
.skintherx-hero-collage__grid picture, .skintherx-hero-collage__grid img { display: block; width: 100%; height: 100%; border: 0 !important; outline: 0; }
.skintherx-hero-collage__grid picture { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s ease; }
.skintherx-hero-collage__grid picture.is-active { opacity: 1; visibility: visible; }
.skintherx-hero-collage__grid img { object-fit: contain; object-position: center center; }
.skintherx-hero-collage::after { content: none; }
.skintherx-hero-collage__controls { position: absolute; z-index: 3; right: clamp(22px, 5vw, 70px); bottom: 28px; left: clamp(22px, 5vw, 70px); display: flex; align-items: center; justify-content: space-between; }
.skintherx-hero-collage__dots { display: flex; align-items: center; gap: 9px; margin: 0 auto; }
.skintherx-hero-collage__dots button { width: 8px; height: 8px; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: transparent; cursor: pointer; }
.skintherx-hero-collage__dots button.is-active { background: #fff; transform: scale(1.35); }
.skintherx-hero-collage__arrow { display: grid; width: 34px; height: 34px; place-items: center; padding: 0 0 4px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(24,35,49,.24); color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.skintherx-hero-collage__arrow:hover { background: #fff; color: #29384a; }
@media (max-width: 1023px) {
  .skintherx-hero-collage { height: min(100vh, 100svh, 150vw); min-height: 420px; }
  .skintherx-hero-collage__grid { height: 100%; }
  .skintherx-hero-collage::after { content: none; }
}

@media (min-width: 1024px) {
  .skintherx-hero-collage { height: min(100vh, 100svh, 41.667vw); min-height: 0; }
}

/* Homepage: transparent header overlays the carousel like skintherx.com (not sticky, scrolls away). */
.skintherx-hero-collage::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 160px; z-index: 2; background: linear-gradient(180deg, rgba(24,35,49,.72), rgba(24,35,49,0)); pointer-events: none; }

/* Desktop banners are 3:2 and the hero is wider: fill the bars beside the art with a blurred copy of the same banner. */
.skintherx-hero-collage__grid picture { overflow: hidden; }
.skintherx-hero-collage__grid picture::before { content: ""; position: absolute; inset: -6%; z-index: 0; background: var(--hero-bg) center / cover no-repeat; filter: blur(32px) saturate(1.05); transform: scale(1.05); }
.skintherx-hero-collage__grid picture img { position: relative; z-index: 1; }

/* Phones: the 2:3 banner carries its headline at the top, so it starts BELOW a normal (white) header instead of sitting under a transparent one. */
@media (max-width: 1023px) {
  body.template-index.header-not-sticky main { margin-top: 0 !important; }
  .skintherx-hero-collage::before { display: none; }
  body.template-index .site-header { --header-color: #29384a; }
  body.template-index .site-header .site-header__mobile-nav--btn,
  body.template-index .site-header #cart-icon-bubble-1,
  body.template-index .site-header .site-header__mobile-nav--btn svg,
  body.template-index .site-header #cart-icon-bubble-1 svg { color: #29384a !important; }
}

/* Arrows sit at mid-height on the sides (the chat launcher owns the bottom-right corner); dots stay bottom-centre. */
.skintherx-hero-collage__controls { inset: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; }
.skintherx-hero-collage__controls > * { pointer-events: auto; }
.skintherx-hero-collage__arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.skintherx-hero-collage__arrow[data-carousel-prev] { left: clamp(12px, 2vw, 28px); }
.skintherx-hero-collage__arrow[data-carousel-next] { right: clamp(12px, 2vw, 28px); }
.skintherx-hero-collage__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); margin: 0; }