/**
 * Home critical CSS — mobile-first, design-parity.
 * Blocking on front page only.
 *
 * CLS root cause: before Swiper boots, all .hbn slides stack in normal flow
 * (hero 2–3× tall) then collapse on init → shoves .sec-dmsp (~0.43 CLS).
 */

/* --- Hero: one-slide height lock (all viewports) --- */
body.home .hbn {
  /* Mobile default — covers one stacked slide (text + image), not 2–3 slides. */
  min-height: 52rem;
  overflow: hidden;
  position: relative;
}

body.home .hbn-slider {
  min-height: inherit;
  overflow: hidden;
}

body.home .hbn-slider .swiper {
  overflow: hidden;
  min-height: inherit;
}

body.home .hbn-br {
  position: absolute;
  inset: 0;
  z-index: -1;
}

body.home .hbn-br img,
body.home .hbn-br picture {
  display: block;
  width: 100%;
  height: 100%;
}

body.home .hbn-br img {
  object-fit: cover;
  object-position: 77%;
}

/* LCP: never wait for Swiper .swiper-slide-active */
body.home .hbn-img-main {
  opacity: 1;
  transform: scale(1);
  transition: none;
}

body.home .hbn-img-main img {
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 476;
  object-fit: cover;
  display: block;
}

/*
 * Pre-Swiper: only initialSlide (index 1 = nth-child(2)) stays in flow.
 * Other slides are taken out of flow so .hbn height does not explode.
 */
body.home .hbn-slider .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: block;
  position: relative;
}

body.home .hbn-slider .swiper:not(.swiper-initialized) .swiper-slide {
  display: none;
  width: 100%;
}

body.home .hbn-slider .swiper:not(.swiper-initialized) .swiper-slide:nth-child(2) {
  display: block;
}

body.home .hbn-slider .swiper:not(.swiper-initialized) .swiper-slide:not(:nth-child(2)) .hbn-img-main {
  opacity: 0;
}

body.home .swiper-initialized .hbn-slider .swiper-slide:not(.swiper-slide-active) .hbn-img-main {
  opacity: 0;
  transform: scale(0.5);
  transition: 0.3s cubic-bezier(0.72, 0.04, 0.49, 0.82);
}

body.home .swiper-initialized .hbn-slider .swiper-slide-active .hbn-img-main {
  opacity: 1;
  transform: scale(1);
  transition: 0.45s cubic-bezier(0.72, 0.04, 0.49, 0.82);
}

/* Stabilize stat numbers (minor CLS from font) */
body.home .hbn-sl-number {
  min-height: 1.2em;
}

/* Category strip under hero */
body.home .sec-dmsp .dmsp-slider {
  min-height: 22rem;
}

body.home .dmsp-slider .swiper {
  overflow: hidden;
}

body.home .dmsp-slider .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

body.home .dmsp-slider .swiper:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc((100% - 24px) / 2);
  margin-right: 24px;
}

body.home .dmsp-img {
  aspect-ratio: 1 / 1;
  padding-top: 0;
  height: auto;
}

body.home .dmsp-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  top: 0;
  left: 0;
}

body.home .dmsp-name {
  min-height: 2.8em;
}

/* --- min-width upgrades --- */
@media (min-width: 500px) {
  body.home .dmsp-slider .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 48px) / 3);
  }
}

@media (min-width: 701px) {
  body.home .hbn {
    min-height: 40rem;
  }

  body.home .hbn-br img {
    object-position: center;
  }

  body.home .sec-dmsp .dmsp-slider {
    min-height: 24rem;
  }
}

@media (min-width: 768px) {
  body.home .dmsp-slider .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 96px) / 5);
  }
}

@media (min-width: 901px) {
  body.home .hbn {
    /* Desktop hero is side-by-side — shorter than stacked mobile. */
    min-height: 37.037037037vw;
    /* Sale badge hangs into padding-bottom (--bottom: 8.6rem from common). */
    overflow: hidden;
  }

  /*
   * common.css uses overflow:visible on .swiper so .hbn-img-sale
   * (bottom: calc(-1 * var(--bottom))) can stick out into .hbn padding.
   * Mobile CLS lock kept overflow:hidden — restore visible on desktop.
   */
  body.home .hbn-slider {
    overflow: visible;
  }

  body.home .hbn-slider .swiper {
    overflow: visible;
  }

  /* Background must leave bottom band for BIG SALE (not inset:0). */
  body.home .hbn-br {
    top: 0;
    right: 0;
    left: 0;
    bottom: var(--bottom, 8.6rem);
  }
}

@media (min-width: 1200px) {
  body.home .dmsp-slider .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 120px) / 6);
  }
}