/* styles.css */

/* 整体画廊容器 */
.cpw-product-gallery {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  font-family: sans-serif;
}

/* 全屏按钮 */
.cpw-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,0.8);
  border: none;
  cursor: pointer;
  z-index: 10;
}

/* 主图容器：相对定位，隐藏溢出，并撑高 */
.cpw-main-image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 方案 A：现代浏览器直接用宽高比撑高 */
  aspect-ratio: 3 / 2;       /* 600 × 400 → 3:2 */
  /* 方案 B：兼容旧浏览器可改用 padding-top
     padding-top: 66.667%;  /* 400 ÷ 600 = 0.66667 = 66.667% */
  border: 1px solid #ddd;
}

/* 大图元素，绝对定位并添加平滑过渡 */
.cpw-main-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

/* 切换前后的位置 */
.cpw-main-image-container img.current { transform: translateX(0); }
.cpw-main-image-container img.next    { transform: translateX(100%); }

/* 添加 .sliding 后触发滑动动画 */
.cpw-main-image-container.sliding img.current { transform: translateX(-100%); }
.cpw-main-image-container.sliding img.next    { transform: translateX(0); }

/* 缩略图区域 */
.cpw-thumbnails {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

/* 缩略图按钮 */
.cpw-thumb-btn {
  border: 2px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  flex: 1;
  margin-right: 4px;
}
.cpw-thumb-btn:last-child {
  margin-right: 0;
}
.cpw-thumb-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* 当前缩略图高亮 */
.cpw-thumb-btn.active {
  border-color: #0073aa;
}

/* 覆盖 elementor-kit-348 的全局 button 样式 */
.cpw-product-gallery button.cpw-fullscreen-btn,
.cpw-product-gallery button.cpw-thumb-btn {
  padding: 0 !important;
  background-color: transparent !important;
}