/**
 * Splide v4 — home MV + product mainVisual.
 * Keep overrides minimal so Splide core fade/slide can work.
 */

/* —— Home hero ——
 * Outer .mns-home-hero owns design aspect 2538/876 (home-parity.css).
 * Inner .mns-home-hero__splide fills the shell; controls overlay inside it.
 */
.mns-home-hero {
  position: relative;
  overflow: hidden;
  transform: none;
  -webkit-transform: none;
}

.mns-home-hero__splide.splide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Override Splide default visibility:hidden before init */
  visibility: visible !important;
}

.mns-home-hero__splide .splide__track,
.mns-home-hero__splide .splide__list {
  width: 100%;
  height: 100%;
}

/*
 * Full-bleed fade slides via CSS height — do NOT trust Splide options.height.
 * Stack all slides at inset:0 and fade with opacity only.
 * Splide still writes translateX(-N*100%) as if slides were in a flex row;
 * with absolute stacking that would shove slide 2/3 off-screen → white MV.
 *
 * IMPORTANT: Apply the same stack BEFORE .is-initialized / .splide__track--fade.
 * Pre-mount Splide uses display:flex on .splide__list; slides then size to
 * content and text/media pile in the top-left until JS mounts (FOUC).
 */
.mns-home-hero__splide .splide__list,
.mns-home-hero__splide .splide__track--fade > .splide__list {
  display: block !important;
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

.mns-home-hero__splide .splide__slide,
.mns-home-hero__splide .splide__track--fade > .splide__list > .splide__slide {
  position: absolute !important;
  inset: 0;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  flex-shrink: 0;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Kill legacy theme.css “hide every slide until .is-active” */
.mns-home-hero .mns-home-hero__slide {
  visibility: visible !important;
}

.mns-home-hero .mns-home-hero__media,
.mns-home-hero .mns-home-hero__picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.mns-home-hero .mns-home-hero__picture img,
.mns-home-hero .mns-home-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center;
}

.mns-home-hero .mns-home-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0e0f0e;
}

/* Poster/fallback under video; hidden once video can play (class toggled by JS optional) */
.mns-home-hero .mns-home-hero__picture--fallback {
  z-index: 0;
}

.mns-home-hero .has-video-bg.is-active .mns-home-hero__video {
  opacity: 1;
}

/*
 * Text layer rail = 新商品 .mns-new-products-inner edges:
 * section has pad gutter; inner is min(100%, 1280) → same as
 * width: min(100% - 2×gutter, 1280) centered, no extra side pad.
 */
.mns-home-hero .mns-home-hero__frame {
  position: relative;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  width: min(100% - (var(--mns-page-gutter, clamp(24px, 5vw, 72px)) * 2), var(--mns-container, 1280px));
  max-width: none;
  height: 100%;
  margin-inline: auto;
  align-items: center;
  padding-top: calc(var(--mns-header-hero-inset, var(--mns-header-total-height, 72px)) + clamp(16px, 3svh, 28px));
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 56px;
}

/* Pre-init + idle: only first/active slide visible (others stay stacked full-bleed). */
.mns-home-hero__splide:not(.is-initialized) .splide__slide {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.mns-home-hero__splide:not(.is-initialized) .splide__slide.is-active,
.mns-home-hero__splide:not(.is-initialized) .splide__slide:first-child {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* After init: reinforce active over theme.css opacity:0 */
.mns-home-hero__splide.is-initialized .splide__slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1;
  pointer-events: auto;
}

/* Non-active fade slides stay in-place (absolute stack), only opacity changes */
.mns-home-hero__splide.is-initialized .splide__slide:not(.is-active) {
  z-index: 0;
}

.mns-home-hero__splide .splide__arrows,
.mns-home-hero__splide .splide__pagination {
  display: none !important;
}

/* Home results touch UI: force dots even when Splide omits is-overflow */
.mns-results__splide.is-results-touch .splide__pagination,
.mns-results__splide.is-results-touch.splide:not(.is-overflow) .splide__pagination {
  display: flex !important;
}

/* Controls stay above the slider layer */
.mns-home-hero__controls {
  z-index: 20;
}

/* —— Product mainVisual stage —— */
.mns-product-detail-page .mns-pd-main-visual-embla.splide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: visible !important;
}

.mns-product-detail-page .mns-pd-main-visual-embla .splide__track,
.mns-product-detail-page .mns-pd-main-visual-embla .splide__list {
  height: 100%;
  min-height: 0;
}

.mns-product-detail-page .mns-pd-main-visual-embla.splide .splide__list.mns-pd-main-visual-embla-container {
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  /* Horizontal drag/scroll owned by Splide; keep vertical page scroll free. */
  touch-action: pan-y pinch-zoom;
}

.mns-product-detail-page .mns-pd-main-visual-embla .splide__slide {
  display: grid;
  height: 100%;
  min-height: 0;
  place-items: stretch;
  overflow: hidden;
  flex-shrink: 0;
  /* Opaque stage fill so object-fit:contain letterboxing never reveals page chrome. */
  background: color-mix(in srgb, var(--pd-bg, #F4F4F2) 94%, white);
  isolation: isolate;
  opacity: 1;
}

.mns-product-detail-page .mns-pd-main-visual-embla .splide__slide > .mns-pd-main-visual-preview-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.mns-product-detail-page .mns-pd-main-visual-embla .splide__slide > .mns-pd-main-visual-media,
.mns-product-detail-page .mns-pd-main-visual-embla .splide__slide > img {
  place-self: center;
  max-width: 100%;
  max-height: 100%;
}

.mns-product-detail-page .mns-pd-main-visual-embla .splide__arrows,
.mns-product-detail-page .mns-pd-main-visual-embla .splide__pagination {
  display: none !important;
}

/* Slide mode: neighbors must stay visible while scrolling (no fade hide). */
.mns-product-detail-page .mns-pd-main-visual-embla.splide .splide__slide.is-active,
.mns-product-detail-page .mns-pd-main-visual-embla.splide .splide__slide:not(.is-active) {
  opacity: 1;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .mns-product-detail-page .mns-pd-main-visual-embla.splide .splide__slide {
    transition: none;
  }
}