/* Product detail image layout adjustment, 2026-05-24 v14. */
.home-product-dialog.el-dialog,
.home-product-dialog .el-dialog {
  background: #fff !important;
  border-radius: 20px !important;
  overflow: visible !important;
}

.home-product-dialog .el-dialog__header,
.home-product-dialog .el-dialog__body,
.home-product-dialog .el-dialog__footer {
  background: #fff !important;
}

.home-product-dialog .el-dialog__body {
  overflow: hidden auto !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.product-detail {
  overflow: hidden !important;
}

.home-product-dialog .product-detail,
.home-product-dialog .detail-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.home-product-dialog .detail-left:not(.detail-left-expanded) {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

.home-product-dialog .detail-right {
  flex: 0 0 304px !important;
  width: 304px !important;
  min-width: 304px !important;
}

.product-detail .detail-main,
.product-detail .detail-left,
.product-detail .detail-images,
.product-detail .detail-image-wrap {
  overflow: visible !important;
}

.product-detail .detail-bottom-info {
  background: #fff !important;
  position: relative !important;
  z-index: 1 !important;
}

.product-detail .detail-gallery-collapsed {
  max-height: 315px !important;
}

.product-detail .detail-gallery-expanded {
  max-height: 588px !important;
}

.product-detail .detail-gallery-placeholder {
  min-height: 294px !important;
}

.product-detail .image-side-tab {
  right: -42px !important;
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: 8px 0 20px rgba(15, 23, 42, .16) !important;
}

.product-detail .image-side-tab.image-side-tab-active {
  position: fixed !important;
  top: var(--pluvo-product-tab-top, 50dvh) !important;
  left: var(--pluvo-product-tab-left, calc(50vw + 452px)) !important;
  right: auto !important;
  transform: none !important;
  z-index: 9001 !important;
  width: 52px !important;
  min-width: 52px !important;
  padding: 16px 8px !important;
  border-left: none !important;
  border-radius: 0 16px 16px 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(137, 158, 255, .95) 34%, rgba(93, 109, 225, .98) 64%, rgba(124, 58, 237, .98) 100%) !important;
  border-color: rgba(219, 234, 254, .95) !important;
  color: #fff !important;
  box-shadow:
    0 12px 28px rgba(79, 70, 229, .24),
    7px 0 20px rgba(15, 23, 42, .14),
    inset 1px 0 0 rgba(255, 255, 255, .55) !important;
}

.product-detail .image-side-tab.image-side-tab-active .side-tab-text {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .28) !important;
}

.product-detail .image-side-tab.image-side-tab-active .side-tab-arrow {
  color: #4f46e5 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.product-detail .image-side-tab.image-side-tab-active .side-tab-text {
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

.product-detail .image-side-tab.image-side-tab-active:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(121, 145, 255, .98) 34%, rgba(80, 96, 216, .99) 64%, rgba(109, 40, 217, .99) 100%) !important;
}

/* Disabled 2026-05-31 13:06 CST.
   Replaced by product-detail-auto-scroll-images-20260531.css.
   These old collapsed-first-image-only rules hid the images that the
   existing metrics-based auto-scroll code needs to scroll through. */

.home-product-dialog.el-dialog:has(.detail-left-expanded),
.home-product-dialog.el-dialog:has(.detail-main-expanded),
.home-product-dialog .el-dialog:has(.detail-left-expanded),
.home-product-dialog .el-dialog:has(.detail-main-expanded) {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.home-product-dialog.el-dialog:has(.detail-left-expanded) .el-dialog__body,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .el-dialog__body,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .el-dialog__body,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .el-dialog__body {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.home-product-dialog.el-dialog:has(.detail-left-expanded) .product-detail,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .product-detail,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .product-detail,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .product-detail {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-main,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-main,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-main,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-main,
.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-main-expanded,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-main-expanded,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-main-expanded,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-main-expanded,
.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-left,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-left,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-left,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-left,
.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-left-expanded,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-left-expanded,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-left-expanded,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-left-expanded,
.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-images,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-images,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-images,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-images,
.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-image-wrap,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-image-wrap,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-image-wrap,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-image-wrap,
.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-gallery,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-gallery,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-gallery,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-gallery {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-main-expanded,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-main-expanded,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-main-expanded,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-main-expanded,
.home-product-dialog.el-dialog:has(.detail-left-expanded) .detail-left-expanded,
.home-product-dialog.el-dialog:has(.detail-main-expanded) .detail-left-expanded,
.home-product-dialog .el-dialog:has(.detail-left-expanded) .detail-left-expanded,
.home-product-dialog .el-dialog:has(.detail-main-expanded) .detail-left-expanded {
  flex: 0 0 100% !important;
}

@media (max-height: 760px) {
  .product-detail .image-side-tab.image-side-tab-active {
    top: var(--pluvo-product-tab-top, 92px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}