/* ===============================
   1. GLOBAL SETTINGS (基础全局设置)
================================ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #333333;
  background-color: #ffffff !important;
}

/* 隐藏后台爬虫摘要和导购文案 */
.hidden-ai-content {
  display: none !important;
}

/* 彻底杜绝新模块中可能出现的“白字隐形”问题 */
p, span, li, a {
  color: #333333;
}
.section-lead, p.section-lead, section p, .product-section p {
  color: #444444 !important;
}

/* Header 区域背景保持为黑 */
#site-header {
  min-height: 72px; 
  width: 100%;
  background: #000;
}

/* ===============================
 2. HERO SECTION (产品详情头部 - 左右分栏)
================================ */
.product-hero {
  background: #ffffff;
  padding: 20px 40px; /* 紧凑上下内边距 */
}

.product-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;       /* 开启左右分栏 */
  gap: 40px;          /* 图片与右侧文字的间隙 */
  align-items: flex-start; /* 顶部对齐 */
  padding: 20px 0;
}

/* Hero 列表样式 (Chauvet 风格) */
.hero-bullets {
  margin: 12px 0 18px;
  padding-left: 18px;
}

.hero-bullets li {
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 6px;
  color: #222;
}

/* ===============================
 3. PRODUCT GALLERY & VIDEO (主图与视频按钮)
================================ */
.product-gallery {
  flex: 0 0 400px;    /* 固定左侧宽度为 400px，不被撑大 */
}

.main-image, .product-gallery .main-image-wrap img {
  width: 100%;
  aspect-ratio: 1 / 1; /* 保持正方形 */
  object-fit: contain; /* 确保灯具全身显示，不被切割 */
  padding: 10px;
  border: 1px solid #f0f0f0;
  background: #fff;
  display: block;
}

.thumbs, .gallery-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.thumbs img, .gallery-thumbnails .thumb-item img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  border: 1px solid #ddd;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s;
}

.thumbs img:hover, .gallery-thumbnails .thumb-item:hover img, .gallery-thumbnails .thumb-item.active {
  border-color: #f5a400;
}

/* 完美融入左侧图库下方的视频按钮 */
.watch-demo-btn {
  background: linear-gradient(135deg, #ff6600, #ff8533) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 20px !important;
  font-size: 0.95rem !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 10px rgba(255, 102, 0, 0.25) !important;
  width: 100% !important;
  max-width: 400px !important;
  margin-top: 15px !important;
  cursor: pointer !important;
  display: block !important;
}
.watch-demo-btn:hover {
  opacity: 0.9;
}

/* ===============================
 4. PRODUCT INFO (右侧描述区域)
================================ */
.product-info {
  flex: 1;
  padding-top: 10px;
}

.product-info h1, h1 {
  font-size: 2.2rem !important; 
  line-height: 1.2 !important;
  margin: 0 0 15px 0 !important;
  font-weight: 700;
  color: #000;
}

.product-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* ===============================
 5. SECTIONS COMMON (兼容所有新模块的间距与标题)
================================ */
.product-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 40px; /* 统一收紧上下间距，告别过大空白 */
  border-top: 1px solid #eee;
  background-color: #ffffff;
  color: #333333;
}

.product-section:first-of-type {
  border-top: none;
}

.product-section h2, h2 {
  font-size: 1.6rem !important;
  margin: 0 0 12px 0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #111111 !important;
}

.product-section h4 {
  font-size: 15px;
  margin: 12px 0 6px 0;
  font-weight: 700;
  color: #000;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
  display: inline-block;
}

.product-section ul {
  margin: 8px 0 8px 18px;
  padding-left: 0;
  list-style: disc;
}

.product-section li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 3px;
  color: #444;
}

/* 兼容新模块中可能出现的浅灰/特色横幅背景（如套餐、相关产品等） */
#related-products, .light-section-fix, .package-section {
  background-color: #f8f9fa !important;
  color: #333333 !important;
  max-width: 100% !important;
  padding: 40px 0 !important;
}
#related-products > div, .light-section-fix > div, .package-section > div {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ===============================
 6. SPECIFICATIONS & GRIDS (规格与多列卡片兼容)
================================ */
.spec-grid {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.spec-grid > div {
  flex: 1;
}

.features-grid, .package-grid, .case-grid {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

/* ===============================
 7. RELATED PRODUCTS & CASES
================================ */
.related-products .product-cards {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.product-card {
  flex: 1;
  max-width: 280px;
  text-decoration: none;
}

.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid #eee;
  background: #fdfdfd;
  transition: transform 0.3s, border-color 0.3s;
}

.product-card:hover img {
  transform: translateY(-5px);
  border-color: #f5a400;
}

.case-item {
  flex: 1;
  text-align: center;
}

.case-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; 
  border: 1px solid #eee;
}

.case-item span, .product-card span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

/* ==========================================
  PRODUCT GALLERY VIDEO
========================================== */
.main-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
  border-radius: 4px;
  display: none;
}

.main-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

  /* ==========================================
     VIDEO THUMBNAIL
  ========================================== */
.video-thumb {
  position: relative;
  width: 90px;
  height: 70px;
  flex: 0 0 90px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #111;
  transition: all 0.25s ease;
}
  
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}

.video-thumb:hover {
  border-color: #ff5a00;
  transform: translateY(-2px);
}
  
  /* ==========================================
     PLAY BUTTON
  ========================================== */
.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #ff5a00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding-left: 2px;
  box-sizing: border-box;
}
  
  /* ==========================================
     VIDEO LABEL
  ========================================== */
.video-label {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.2;
  border-radius: 2px;
}
  
  /* ==========================================
     ACTIVE THUMBNAIL
  ========================================== */
.thumbs img.active-thumb,
.thumbs .video-thumb.active-thumb {
  border: 2px solid #ff5a00;
}
  
  /* ==========================================
     MOBILE
  ========================================== */
@media (max-width: 768px) {
.video-thumb {
  width: 75px;
  height: 58px;
  flex-basis: 75px;
  }
  
}

/* ===============================
 8. BOTTOM WIDGET & INQUIRY (底部问答与表单居中对齐修复)
================================ */
.floating-faq-widget {
  max-width: 1200px !important;
  margin: 30px auto !important;
  padding: 0 40px !important;
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  box-shadow: none !important;
}

.ai-toggle-btn {
  background: #111111 !important;
  color: #ffffff !important;
  width: 100% !important;
  text-align: left !important;
  padding: 14px 20px !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.ai-panel-content {
  background: #fdfdfd !important;
  border: 1px solid #ddd !important;
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
  padding: 20px !important;
}

.inquiry-box {
  background: #f8f9fa !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  padding: 35px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* ===============================
 9. RESPONSIVE (移动端适配)
================================ */
@media (max-width: 992px) {
  .product-hero-inner, .spec-grid, .features-grid, .package-grid, .case-grid {
      flex-direction: column;
      gap: 30px;
  }
  .product-gallery {
      flex: none;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
  }
  .product-hero, .product-section, .floating-faq-widget {
      padding-left: 20px !important;
      padding-right: 20px !important;
  }
}