/* Phase 2: Swiper-driven complementary-options (cross-sell / upsell) slider.
 * The track is upgraded in place by asa-related-swiper.js; these rules scope
 * strictly to initialized Swiper rails so catalog grids are untouched. */
.asa-related-swiper,
.asa-product-related-track.asa-related-swiper,
.asa-product-related-v2 .asa-related-swiper,
body.asa-product-redesign .asa-product-related-track.asa-related-swiper {
  /* Win over catalog grid rules that use display:grid!important on the
   * related track: a Swiper container must be a plain block so the wrapper
   * spans the full width. Higher specificity + !important beats the theme
   * bundle's `.asa-product-related-v2 .asa-product-related-track` grid rule. */
  display: block !important;
  grid-template-columns: none !important;
  grid-auto-columns: auto !important;
  overflow: hidden;
}

.asa-related-swiper.swiper {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
}

/* `.asa-product-related-v2` uses content-visibility:auto + contain:content with
   an intrinsic-size placeholder. When Swiper initialised while the rail was
   off-screen the placeholder froze the card height, clipping the info row.
   Render the upgraded rail normally so it sizes to its real content. */
.asa-product-related-v2:has(.asa-related-swiper),
.asa-product-related-v2:has(.asa-related-swiper) .asa-product-related-track {
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: none !important;
}

.asa-related-swiper .swiper-wrapper {
  align-items: stretch;
}

/* Slides reuse the exact catalog card: same height, card fills the slide. */
.asa-related-swiper .asa-store-product-shell,
.asa-related-swiper .asa-store-product-card,
.asa-related-swiper .asa-related-slide {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Catalog cards use content-visibility:auto + contain-intrinsic-size. Inside
   the slider that placeholder height clipped the info row, so render the
   slides normally and let the card size to its real media + info. */
.asa-related-swiper .asa-store-product-shell,
.asa-related-swiper .asa-store-product-card {
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: none !important;
}

.asa-related-swiper .swiper-slide {
  height: auto;
  min-width: 0;
}

/* Each product card is wrapped in a real slide so Swiper controls the width;
   the card (which carries a catalog `width:100%!important`) then fills it. */
.asa-related-swiper .swiper-slide.asa-related-slide {
  display: flex;
  height: auto;
}

.asa-related-swiper .swiper-slide.asa-related-slide > .asa-store-product-shell {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
}

.asa-product-related-v2 {
  position: relative;
}

.asa-swiper-nav {
  position: absolute;
  z-index: 5;
  top: 42%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  color: #0b1b33;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 27, 51, 0.12);
}

.asa-swiper-nav--prev {
  left: -8px;
}

.asa-swiper-nav--next {
  right: -8px;
}

.asa-swiper-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.asa-swiper-pagination,
.asa-related-swiper .swiper-pagination {
  display: none !important;
}

.dark .asa-swiper-nav {
  border-color: rgba(255, 255, 255, 0.14);
  background: #101c2e;
  color: #f8fafc;
}

@media (max-width: 700px) {
  /* Two cards side-by-side on phones, controls kept inside the rail. */
  .asa-product-related-track:not(.swiper) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .asa-swiper-nav {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .asa-swiper-nav--prev {
    left: 2px;
  }

  .asa-swiper-nav--next {
    right: 2px;
  }
}

/* Complementary slides reuse the exact catalog card: no extra buttons. */
.asa-related-swiper .asa-related-atc,
.asa-related-atc {
  display: none !important;
}

/* Phase 4 (#9): the related grid ships display:grid!important, which would
   beat the UA [hidden] rule. Force the section/track hidden when the data
   pipeline returns no complementary products. */
.asa-product-related-v2[hidden],
.asa-product-related-v2[data-asa-related-empty],
.asa-product-related-track[hidden]{display:none!important}