.id { display: none; }
img, video { max-width: 100%; height: auto; }
.baloo-font { font-family: 'Baloo Bhaijaan 2', cursive; }
body, input, button, textarea, select {
  font-family:'SF Pro', 'SF Pro Display', 'SF Pro Text', 'San Francisco', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
.carousel-dot {
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
/* 分步动画 */
.hero-anim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
}
.hero-anim-1.show { transition-delay: 0.05s; opacity: 1; transform: none; }
.hero-anim-2.show { transition-delay: 0.15s; opacity: 1; transform: none; }
.hero-anim-3.show { transition-delay: 0.25s; opacity: 1; transform: none; }
.hero-anim-4.show { transition-delay: 0.35s; opacity: 1; transform: none; }
.hero-anim-5.show { transition-delay: 0.45s; opacity: 1; transform: none; }
.hero-anim-6.show { transition-delay: 0.55s; opacity: 1; transform: none; }

/* 产品图片预览效果 */
.product-image-container {
  overflow: visible;
  position: relative;
}

.main-product-image {
  transition: transform 0.3s ease;
  cursor: crosshair;
}

.image-preview {
  transition: all 0.3s ease;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  border-radius: 8px;
  overflow: hidden;
  width: 500px;
  background-size: 1000px 1000px;
  background-repeat: no-repeat;
}

.thumbnail-container {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prev-arrow, .next-arrow {
  transition: all 0.3s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
}

.prev-arrow:hover, .next-arrow:hover {
  transform: scale(1.1);
}

.prev-arrow:hover svg, .next-arrow:hover svg {
  color: #f97316 !important;
}

.prev-arrow.opacity-30, .next-arrow.opacity-30 {
  cursor: not-allowed;
  pointer-events: none;
}

.thumbnail-image {
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.thumbnail-image:hover {
  transform: scale(1.05);
}

.thumbnail-image.active {
  border-color: #f97316 !important;
  transform: scale(1.1);
}

/* 视频容器样式 */
#video-container {
  transition: all 0.3s ease;
}

#image-display, #video-display {
  transition: all 0.3s ease;
}

/* 视频播放按钮样式 */
.video-thumbnail {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.video-thumbnail:hover {
  transform: scale(1.05);
  border-color: #f97316 !important;
}

.video-thumbnail:hover img {
  transform: scale(1.1);
}

.video-thumbnail.active {
  border-color: #f97316 !important;
  transform: scale(1.1);
}

.video-thumbnail img {
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 视频播放区域样式 */
#video-display {
  position: relative;
  transition: all 0.3s ease;
}