/**
 * 移动端体验修复补丁 — 2026-08-07
 * 修复左右滚动、元素溢出、固定宽度等问题
 */

/* ===== 1. 全局防溢出 ===== */
html {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===== 2. 全局图片响应式 ===== */
img {
  max-width: 100%;
  height: auto;
}

/* ===== 3. 全局容器防溢出 ===== */
.container-wide {
  overflow: hidden;
  max-width: 100vw;
}

/* ===== 4. 产品轮播 (aoyun.css 修复) ===== */
.view {
  width: 100% !important;
  max-width: 100% !important;
}
.view .swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===== 5. 固定宽度元素自适应 ===== */
.preview {
  max-width: 100%;
}

/* ===== 6. 卡片图片响应式高度 ===== */
.card img {
  height: auto;
  max-height: 250px;
}

/* ===== 7. 禁止横向滚动（覆盖所有 overflow-x: auto） ===== */
.breadcrumb,
.detail-tabs,
.tab-container,
.nav-tabs {
  overflow-x: hidden !important;
}

/* ===== 8. Content 内容区图片限制 ===== */
.content img,
.content iframe,
.content video,
.content table {
  max-width: 100% !important;
  height: auto !important;
}
.content table {
  display: block;
  overflow-x: auto;
}

/* ===== 9. 修复 iOS Safari 输入框缩放问题 ===== */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="url"],
select,
textarea {
  font-size: 16px; /* 防止 iOS 自动缩放 */
}

/* ===== 移动端 (< 768px) 专项修复 ===== */
@media (max-width: 768px) {
  /* 段落和文字防止溢出 */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  li,
  div {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 产品详情页 */
  .product-hero {
    overflow: hidden;
  }
  .gallery-container,
  .info-container {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .main-image-box {
    height: 250px;
    max-width: 100%;
  }
  .main-image-box img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product-title {
    font-size: 24px;
    word-break: break-word;
  }

  /* 面包屑导航 */
  .breadcrumb {
    overflow-x: hidden !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    line-height: 1.8;
    word-break: break-all;
  }

  /* 详情页 Tab */
  .detail-tabs {
    overflow-x: hidden !important;
    flex-wrap: wrap;
    padding: 0 16px;
  }
  .detail-body {
    padding: 20px 16px;
  }

  /* Feature 列表 */
  .feature-list {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .feature-item {
    font-size: 14px;
  }

  /* 新闻列表 */
  .news-item {
    flex-wrap: wrap;
    padding: 15px 16px;
  }
  .news-date-box {
    margin-right: 15px;
    padding-right: 15px;
  }
  .news-title {
    white-space: normal !important;
    font-size: 14px;
  }

  /* Section 间距 */
  .section {
    padding: 40px 12px;
  }

  /* Container-wide 边距 */
  .container-wide {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 分页器 */
  .pagination a,
  .pagination span {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    font-size: 12px;
  }
  .pagination {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* 新闻 Hero */
  .news-hero-modern {
    height: 280px;
  }
  .modern-title {
    font-size: 18px;
  }

  /* 3D 轮播 */
  .carousel-3d-container {
    height: 340px;
  }
  .carousel-3d-item {
    width: 260px;
    height: 360px;
    margin-left: -130px;
    margin-top: -180px;
  }
  .premium-product-section {
    overflow: hidden !important;
  }
}

/* ===== 10. About 页面 Canvas 和装饰元素修复 ===== */
canvas {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}
.orb-1,
.orb-2,
.orb-3 {
  max-width: 100vw;
  overflow: hidden;
}

/* ===== 小屏手机 (< 400px) ===== */
@media (max-width: 400px) {
  .carousel-3d-item {
    width: 220px;
    height: 320px;
    margin-left: -110px;
    margin-top: -160px;
  }
  .carousel-3d-container {
    height: 300px;
  }
  .news-date-box {
    width: 50px;
    padding-right: 10px;
    margin-right: 10px;
  }
  .news-day {
    font-size: 20px;
  }
}