.image-comparison {
  /* 移除所有手动的CSS变量定义，让布局控制面板系统自动应用 */
  margin: 0;
  /* 使用配色方案，但保持原始的实现逻辑 */
}

.image-comparison .image-comparison-main {
  position: relative;
  max-width: var(--container-max-width, 1200px);
  aspect-ratio: var(--image-ratio, 16/9);
  margin: 0 auto;
  overflow: hidden;
  margin-top: 20px;
}

.image-comparison .image-comparison-header {
  text-align: center;
}

.image-comparison .image-comparison-header .title {
  padding: 10px;
  letter-spacing: 2px;
  /* 让Shopline字体类控制大小 */
}

.image-comparison .image-comparison-header .subTitle {
  padding: 10px;
  letter-spacing: 5px;
  /* 让Shopline字体类控制大小 */
}

/* 文字大小写控制 */
.image-comparison .title.text-uppercase {
  text-transform: uppercase;
}

.image-comparison .subTitle.text-uppercase {
  text-transform: uppercase;
}

.image-comparison .image-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 关键：这个overflow hidden会裁剪文字 */
}

.image-comparison .image-before {
  width: 50%;
  z-index: 2;
}

.image-comparison .image-after {
  z-index: 1;
}

.image-comparison img {
  position: absolute;
  width: var(--container-max-width, 1200px);
  height: 100%;
  object-fit: var(--image-fit, cover);
  display: block;
  left: 0;
  top: 0;
}

.image-comparison .slider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: white;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-comparison .slider svg {
  position: absolute;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border-radius: 25px;
  pointer-events: auto; /* 修改：让SVG也能接收点击事件 */
  cursor: ew-resize; /* 添加：确保SVG上也显示拖拽光标 */
}

/* 文字覆盖层 */
.image-comparison .text-overlay {
  position: absolute;
  font-family: var(--font-body-family, Arial, sans-serif);
  z-index: 5;
  /* 关键修复：固定宽度，不受父容器影响 */
  width: max-content; /* 让文字内容决定宽度 */
  white-space: nowrap; /* 确保文字不换行 */
}

.image-comparison .text-before {
  bottom: 40px; /* 从30px增加到40px */
  left: 40px; /* 从30px增加到40px */
  /* 确保文字内容不受容器宽度变化影响 */
  min-width: max-content;
}

.image-comparison .text-after {
  bottom: 40px; /* 从30px增加到40px */
  right: 40px; /* 从30px增加到40px */
  text-align: right;
  /* 确保文字内容不受容器宽度变化影响 */
  min-width: max-content;
}

.image-comparison .text-overlay .text {
  letter-spacing: 2px; /* 默认间距，会被覆盖 */
  margin: 0 0 10px 0;
  white-space: nowrap; /* 确保文字不换行 */
  /* 让Shopline字体类控制大小 */
}

/* 覆盖文字大小写控制 */
.image-comparison .text-overlay .text.text-uppercase {
  text-transform: uppercase;
}

/* 按钮与文字的间距控制 */
.image-comparison .text-overlay {
  --text-button-spacing: var(--spacing, 20px);
}

.image-comparison .text-overlay .image-button {
  cursor: pointer;
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 1px;
  margin: var(--text-button-spacing, 20px) 0 0 0; /* 使用CSS变量控制间距 */
  white-space: nowrap;
  /* 使用当前文字颜色 */
}

/* 覆盖文字大小控制 */
.image-comparison .text-overlay .text.caption {
  font-size: var(--font-size-caption, 0.75rem);
}

.image-comparison .text-overlay .text.body {
  font-size: var(--font-size-body, 1rem);
}

.image-comparison .text-overlay .text.title4 {
  font-size: var(--font-size-title4, 1.125rem);
}

/* 按钮文字大小控制 */
.image-comparison .text-overlay .image-button.caption {
  font-size: var(--font-size-caption, 0.75rem);
}

.image-comparison .text-overlay .image-button.body {
  font-size: var(--font-size-body, 1rem);
}

.image-comparison .text-overlay .image-button.title4 {
  font-size: var(--font-size-title4, 1.125rem);
}

/* 文字间距控制 */
.image-comparison .text-overlay .text {
  letter-spacing: 2px; /* 默认间距 */
  margin: 0 0 10px 0;
  white-space: nowrap;
}

/* 动态间距类 */
.image-comparison .text-overlay .text.spacing-tight {
  letter-spacing: 1px;
}

.image-comparison .text-overlay .text.spacing-normal {
  letter-spacing: 2px;
}

.image-comparison .text-overlay .text.spacing-wide {
  letter-spacing: 3px;
}

.image-comparison .text-overlay .text.spacing-wider {
  letter-spacing: 4px;
}

.image-comparison .image-button:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 鼠标移入 - 下划线从右向左收起 */
.image-comparison .image-button:hover::after {
  transform: scaleX(0);
  transform-origin: left center;
}

/* 鼠标移出 - 下划线从左向右展开 */
.image-comparison .image-button:not(:hover)::after {
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

/* 大屏幕优化 */
@media (min-width: 1400px) {
  .image-comparison .image-comparison-main {
    max-width: var(--container-max-width, 1400px);
  }
  
  /* 确保大屏幕下图片也能铺满容器 */
  .image-comparison img {
    width: var(--container-max-width, 1400px);
    min-width: var(--container-max-width, 1400px);
    left: 0;
    top: 0;
  }
}

/* 桌面端默认设置 */
@media (min-width: 1025px) {
  .image-comparison img {
    width: var(--container-max-width, 1200px);
    min-width: var(--container-max-width, 1200px);
    object-fit: var(--image-fit, cover);
    object-position: center;
    left: 0;
    top: 0;
  }
}

/* iPad端适配 - 768px到1024px */
@media (max-width: 1024px) and (min-width: 769px) {
  .image-comparison .image-comparison-main {
    max-width: 100%;
    width: 100%;
  }
  
  /* iPad端图片响应式 - 保持图片固定，不跟随容器移动 */
  .image-comparison img {
    width: 100vw;
    min-width: 100vw;
    max-width: var(--container-max-width, 1200px);
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* iPad端滑块手柄调整 */
  .image-comparison .slider svg {
    width: 45px;
    height: 45px;
    max-width: 45px;
    max-height: 45px;
  }
  
  /* iPad端文字位置调整 */
  .image-comparison .text-before {
    bottom: 35px;
    left: 35px;
  }

  .image-comparison .text-after {
    bottom: 35px;
    right: 35px;
  }
  
  /* iPad端文字间距调整 */
  .image-comparison .text-overlay .text {
    letter-spacing: 1.5px;
  }
}

/* 响应式调整 - 确保在小屏幕上不超出视口 */
@media (max-width: 768px) {
  .image-comparison .image-comparison-main {
    max-width: 100%;
        width: 100%;
        margin-top: 10px;
  }
  
  /* 移动端图片响应式 - 保持图片固定，不跟随容器移动 */
  .image-comparison img {
    width: 100vw;
    min-width: 100vw;
    max-width: var(--container-max-width, 1200px);
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* 确保图片容器保持正确的宽度 */
  .image-comparison .image-container {
    width: 100%;
    height: 100%;
  }
  
  /* 滑块手柄缩小 */
  .image-comparison .slider svg {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
  }
  
  /* 移动端文字位置调整 */
  .image-comparison .text-before {
    bottom: 30px;
    left: 30px;
  }

  .image-comparison .text-after {
    bottom: 30px;
    right: 30px;
  }
  
  /* 移动端文字间距适当减小 */
  .image-comparison .text-overlay .text {
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .image-comparison .image-comparison-main {
    max-width: 100%;
    width: 100%;
    margin-top: 10px;
  }
  
  /* 小屏幕图片响应式 - 保持图片固定 */
  .image-comparison img {
    width: 100vw;
    min-width: 100vw;
    max-width: var(--container-max-width, 1200px);
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .image-comparison .slider svg {
    width: 35px;
    height: 35px;
    max-width: 35px;
    max-height: 35px;
  }
  
  /* 小屏幕文字位置调整 */
  .image-comparison .text-before {
    bottom: 25px;
    left: 25px;
  }

  .image-comparison .text-after {
    bottom: 25px;
    right: 25px;
  }
  
  /* 小屏幕进一步减小间距 */
  .image-comparison .text-overlay .text {
    letter-spacing: 0.5px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 360px) {
  .image-comparison .image-comparison-main {
    max-height: 350px;
  }
  
  /* 超小屏幕图片适配 - 保持图片固定 */
  .image-comparison img {
    width: 100vw;
    min-width: 100vw;
    max-width: var(--container-max-width, 1200px);
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .image-comparison .slider svg {
    width: 30px;
    height: 30px;
  }
  
  /* 超小屏幕文字调整 */
  .image-comparison .text-before {
    bottom: 20px;
    left: 20px;
  }

  .image-comparison .text-after {
    bottom: 20px;
    right: 20px;
  }
}