/* 5180 temporary layout experiment only. */
.user-home .user-home-canvas {
  width: min(71.4vw, 1478px) !important;
  min-width: 1239px !important;
  max-width: 1478px !important;
}

.user-home .home-banner-wrap {
  width: min(71.4vw, 1478px) !important;
  min-width: 1239px !important;
  max-width: 1478px !important;
}

.user-home .home-banner-carousel .el-carousel__container {
  aspect-ratio: auto !important;
  height: 100% !important;
}

.user-home .home-banner-carousel .el-carousel__item,
.user-home .home-banner-carousel .home-banner,
.user-home .home-banner-carousel .home-banner-image {
  height: 100% !important;
}

.user-home .home-banner-carousel .el-carousel__indicators--horizontal {
  bottom: 16px !important;
  z-index: 6 !important;
}

.user-home .home-banner-carousel .el-carousel__indicator {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.user-home .products-section {
  width: min(71.4vw, 1478px) !important;
  min-width: 1239px !important;
  max-width: 1478px !important;
}

.user-home .products-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.user-home .product-card {
  width: 100% !important;
  min-width: 0 !important;
}

.user-home .product-card .product-image {
  width: 96.9230769231% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.user-home .product-card .product-image .product-progressive-image,
.user-home .product-card .product-image .progressive-product-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  background: transparent !important;
}

.user-home .product-card .product-image .progressive-product-image:not(.is-loaded) {
  aspect-ratio: 1 / 1 !important;
  background: #f4f7fb !important;
}

.user-home .product-card .product-image .progressive-product-image > img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

@media (max-width: 1328px) {
  .user-home .user-home-canvas,
  .user-home .home-banner-wrap,
  .user-home .products-section {
    width: 1239px !important;
    max-width: 1239px !important;
  }
}

/* 5180 detail dialog image experiment: match the home card 63/65 image ratio. */
.home-product-dialog .product-detail .detail-left,
.home-product-dialog .product-detail .detail-images,
.home-product-dialog .product-detail .detail-image-wrap,
.home-product-dialog .product-detail .detail-stack-frame {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.home-product-dialog .product-detail .detail-stack-frame,
.home-product-dialog .product-detail .detail-gallery-placeholder {
  width: 96.9230769231% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
}

.home-product-dialog .product-detail .detail-stack-image,
.home-product-dialog .product-detail .detail-stack-frame .progressive-product-image,
.home-product-dialog .product-detail .detail-stack-frame .product-progressive-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
}

.home-product-dialog .product-detail .detail-stack-frame .progressive-product-image:not(.is-loaded),
.home-product-dialog .product-detail .detail-stack-frame .product-progressive-image:not(.is-loaded) {
  aspect-ratio: 1 / 1 !important;
  background: #f4f7fb !important;
}

/* Disabled 2026-05-31 13:06 CST.
   Replaced by product-detail-auto-scroll-images-20260531.css.
   The old rule hid all images after the first one, which blocked the
   upper main-image window and lower detail-image window from auto-scrolling. */

.home-product-dialog .product-detail .detail-stack-frame img,
.home-product-dialog .product-detail .detail-stack-image img,
.home-product-dialog .product-detail .progressive-product-image > img,
.home-product-dialog .product-detail .product-progressive-image > img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
}