/* ===================================================== */
/*       MZ OFFICIAL ® 2025 — 终极无敌版 CSS             */
/*   已修复所有语法错误 · 产品详情页 100% 正常显示        */
/* ===================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#000;color:#fff;font-family:'Helvetica Neue',Arial,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrapper{min-height:100vh;display:flex;flex-direction:column}

/* ==================== Header ==================== */
header{padding:50px 5% 30px;text-align:center}
header h1 a{font-size:3.8rem;font-weight:900;letter-spacing:3px;transition:.3s}
header h1 a:hover{color:#00ff88}
.tagline{margin-top:12px;color:#00ff88;font-size:1.3rem;font-weight:bold}

/* ==================== 搜索框 ==================== */
.search-bar{background:#111;padding:50px 0;text-align:center}
.search-inner{position:relative;display:inline-block;width:90%;max-width:720px}
#search{width:100%;padding:20px 70px 20px 50px;background:#222;border:2px solid #333;border-radius:50px;font-size:1.4rem;color:#fff;outline:none}
#search::placeholder{color:#777}
#search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#00ff88;color:#000;padding:14px 40px;border-radius:50px;font-weight:bold;cursor:pointer;border:none;transition:.3s}
#search-btn:hover{background:#00cc70}

/* ==================== 分类导航 ==================== */
.nav-categories{text-align:center;margin:40px 0 60px}
.nav-categories button{margin:0 10px;padding:14px 34px;background:transparent;border:2px solid #333;color:#fff;border-radius:50px;font-weight:bold;cursor:pointer;transition:.3s}
.nav-categories button.active,.nav-categories button:hover{background:#00ff88;color:#000;border-color:#00ff88}

/* ==================== 热销区 & 商品网格 ==================== */
.hot-section,.products-section{padding:0 5% 100px}
.hot-section h2,.products-section h2{font-size:3.2rem;text-align:center;margin-bottom:70px}
.hot-grid,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:40px}
.hot-card,.card{background:#111;border-radius:20px;overflow:hidden;transition:.4s;cursor:pointer}
.hot-card:hover,.card:hover{transform:translateY(-20px);box-shadow:0 30px 60px rgba(0,255,136,.15)}
.hot-card img,.card img{width:100%;height:420px;object-fit:contain;background:#000}
.hot-info,.card-info{padding:32px;text-align:center}
.hot-info h3,.card-info h3{font-size:1.9rem;margin-bottom:12px}
.price{font-size:2.4rem;color:#00ff88;font-weight:900}
.promo{margin-top:16px;color:#999;font-size:1rem;line-height:1.6}

/* ==================== 分页 ==================== */
.pagination{text-align:center;margin:100px 0}
.pagination button{margin:0 6px;padding:12px 22px;background:#222;border:2px solid #333;color:#fff;border-radius:10px;font-weight:bold;cursor:pointer}
.pagination button.active{background:#00ff88;color:#000;border-color:#00ff88}

/* ==================== 浮动按钮 ==================== */
.floating-btn{position:fixed;right:24px;z-index:9999;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.6);transition:.3s}
.floating-btn:hover{transform:scale(1.12)}
.telegram-float{bottom:156px}
.whatsapp-float{bottom:88px}
.floating-btn img{width:38px;height:38px}

/* ==================== 产品详情页（已修复 · 完美显示） ==================== */
.product-detail-pro{max-width:1400px;margin:0 auto;padding:60px 5% 120px}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
  margin-bottom:120px;
}

/* 轮播图容器 */
.slider-container{position:relative;overflow:hidden;border-radius:20px;background:#000}
.slides{position:relative}
.slides img{
  width:100%;
  max-height:720px;
  object-fit:contain;
  position:absolute;
  top:0;left:0;
  opacity:0;
  transition:opacity .6s ease;
  border-radius:20px;
  background:#000;
}
.slides img.active{
  opacity:1;
  position:relative;
  z-index:1;
}

/* 轮播按钮 */
.prev,.next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.7);
  color:#fff;
  border:none;
  width:60px;
  height:60px;
  border-radius:50%;
  font-size:2.6rem;
  cursor:pointer;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s;
}
.prev{left:20px}
.next{right:20px}
.prev:hover,.next:hover{
  background:#00ff88;
  color:#000;
  transform:translateY(-50%) scale(1.1);
}

/* 轮播点 */
.dots{text-align:center;margin-top:30px}
.dot{
  display:inline-block;
  width:12px;
  height:12px;
  background:#333;
  border-radius:50%;
  margin:0 8px;
  cursor:pointer;
  transition:all .3s;
}
.dot.active{
  background:#00ff88;
  transform:scale(1.4);
}

/* 右侧信息栏 */
.info-pro h1{font-size:3.6rem;margin-bottom:16px}
.price-pro{font-size:3.2rem;color:#00ff88;font-weight:900;margin:20px 0}
.promo-text{font-size:1.35rem;color:#aaa;line-height:1.8;margin:30px 0}

.size-select{margin:40px 0}
.size-select label{display:block;margin-bottom:12px;font-size:1.1rem;color:#aaa}
.size-select select{
  width:100%;
  padding:18px;
  background:#111;
  border:2px solid #333;
  border-radius:12px;
  color:#fff;
  font-size:1.2rem;
}

.btn-group{display:flex;gap:20px;margin:50px 0}
.buy-pro,.wa-pro{
  flex:1;
  padding:20px;
  text-align:center;
  border-radius:12px;
  font-weight:bold;
  font-size:1.4rem;
  transition:all .3s;
}
.buy-pro{background:#00ff88;color:#000}
.wa-pro{background:#25d366;color:#fff}
.buy-pro:hover{transform:scale(1.03);background:#00dd77}
.wa-pro:hover{opacity:0.9}

.desc-pro{margin-top:60px;line-height:2;color:#ddd}
.desc-pro h3{font-size:1.8rem;margin-bottom:20px;color:#00ff88}

/* 所有细节图 */
.all-detail h2{font-size:3rem;text-align:center;margin:140px 0 80px}
.detail-images{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
  gap:30px;
}
.detail-images img{
  width:100%;
  border-radius:16px;
  background:#000;
  object-fit:contain;
}

/* ==================== 通用页面 ==================== */
.page-content{max-width:1100px;margin:0 auto;padding:100px 5% 140px;text-align:center}
.page-content h1{font-size:4.5rem;margin-bottom:50px}
.page-content h2{font-size:2.8rem;margin:80px 0 40px;color:#00ff88}
.page-content p{font-size:1.35rem;color:#ccc;line-height:2;margin:30px 0}
.page-content table{width:100%;max-width:700px;margin:60px auto;border-collapse:collapse}
.page-content th,.page-content td{padding:24px;border:2px solid #333;text-align:center}
.page-content th{background:#111;color:#00ff88}
.note{font-style:italic;color:#777;margin-top:20px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px;margin:80px 0}
.contact-card{background:#111;padding:50px;border-radius:20px;transition:.3s}
.contact-card:hover{transform:translateY(-10px)}
.contact-card h3{font-size:1.8rem;margin-bottom:20px;color:#00ff88}
.contact-btn{display:block;margin-top:24px;padding:18px;background:#00ff88;color:#000;border-radius:12px;font-weight:bold;font-size:1.2rem}

/* ==================== 页脚 ==================== */
.pro-footer{background:#0a0a0a;padding:100px 5% 50px;margin-top:auto}
.footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:60px;margin-bottom:60px}
.footer-col h3{font-size:1.6rem;margin-bottom:24px;color:#00ff88}
.footer-col a{display:block;margin:14px 0;color:#888;transition:.3s}
.footer-col a:hover{color:#00ff88;transform:translateX(6px)}
.footer-bottom{text-align:center;color:#555;font-size:0.95rem}

/* ==================== 响应式 ==================== */
@media (max-width:1200px){.detail-grid{gap:60px}}
@media (max-width:900px){
  .detail-grid{grid-template-columns:1fr;gap:60px}
  .info-pro h1{font-size:3rem}
  .price-pro{font-size:2.8rem}
  .btn-group{flex-direction:column}
  .slides img{max-height:560px}
  .hot-grid,.grid{grid-template-columns:repeat(2,1fr)}
  header h1 a{font-size:2.8rem}
  .page-content h1{font-size:3.5rem}
}
@media (max-width:640px){
  .hot-grid,.grid{grid-template-columns:1fr}
  header h1 a{font-size:2.4rem}
  .nav-categories button{margin:8px 6px;padding:12px 20px;font-size:0.95rem}
  .detail-images{grid-template-columns:1fr}
}


/* 通用内容页标题更霸气 */
.page-content h1 {
  font-size: 5.5rem !important;
  margin-bottom: 40px !important;
  letter-spacing: 2px;
}
.page-content h2 {
  font-size: 2.6rem !important;
  margin: 90px 0 40px !important;
  color: #00ff88 !important;
}

/* 表格更高级 */
.page-content table {
  width: 100%;
  max-width: 800px;
  margin: 60px auto;
  border-collapse: collapse;
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,255,136,0.1);
}
.page-content th {
  background: #00ff88;
  color: #000;
  padding: 28px;
  font-size: 1.4rem;
  font-weight: 900;
}
.page-content td {
  padding: 24px;
  text-align: center;
  border-bottom: 1px solid #333;
}
.page-content tr:last-child td { border-bottom: none; }

/* 联系方式卡片优化 */
.contact-grid { 
  gap: 50px; 
  margin: 100px 0; 
}
.contact-card {
  background: linear-gradient(135deg, #111, #0a0a0a);
  padding: 60px 40px;
  border-radius: 24px;
  border: 2px solid #333;
  transition: all .4s;
}
.contact-card:hover {
  border-color: #00ff88;
  transform: translateY(-16px);
  box-shadow: 0 30px 80px rgba(0,255,136,0.2);
}
.contact-btn {
  background: #00ff88;
  color: #000;
  padding: 18px 40px;
  border-radius: 50px;
  font-weight: 900;
  font-size: 1.3rem;
  margin-top: 30px;
  transition: .3s;
}
.contact-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0,255,136,0.4);
}

/* FAQ 页面问题更清晰 */
.page-content h2 + p,
.page-content h2 + a {
  font-size: 1.5rem;
  line-height: 2;
  color: #ddd;
}

/* 小屏优化 */
@media (max-width: 768px) {
  .page-content h1 { font-size: 4rem !important; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 50px 30px; }
}
 
/* ==================== 2025 终极首页移动端完美修复版 ==================== */
@media (max-width: 1024px) {
  html, body {
    width: 100%;
    min-width: unset;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
  }

  /* 1. 搜索框强行救回来（最关键！） */
  .search-bar,
  .search-container,
  .header-search {
    position: relative !important;
    width: 92% !important;
    max-width: 600px !important;
    margin: 30px auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .search-bar input,
  .search-container input {
    flex: 1 !important;
    width: auto !important;
    padding: 18px 24px !important;
    font-size: 1.1rem !important;
    border-radius: 50px !important;
  }

  .search-bar button,
  .search-container button {
    width: 120px !important;
    min-width: 120px !important;
    padding: 18px 20px !important;
    border-radius: 50px !important;
    font-size: 1.1rem !important;
  }

  /* 2. 分类按钮横向可滑动（高端感拉满） */
  .category-buttons,
  .nav-buttons,
  .menu-buttons {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 15px 5% 25px !important;
    gap: 16px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .category-buttons::-webkit-scrollbar { display: none; }

  .category-btn,
  .cat-btn {
    flex: 0 0 auto !important;
    min-width: 150px !important;
    padding: 16px 32px !important;
    font-size: 1.05rem !important;
    border-radius: 50px !important;
    white-space: nowrap !important;
  }

  /* 3. 产品网格：电脑 4 列，手机 2 列（绝不变成 1 列！） */
  .products-grid,
  .product-grid,
  .hot-products,
  #relatedProducts {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    padding: 0 5% !important;
  }

  /* 4. 标题居中加大 */
  h1, h2, .section-title {
    font-size: 2.6rem !important;
    text-align: center !important;
    margin: 60px 0 40px !important;
  }

  /* 5. 产品卡片图片高度统一 */
  .product-card img {
    width: 100% !important;
    height: 320px !important;
    object-fit: cover !important;
    border-radius: 20px !important;
  }

  /* 6. 悬浮按钮缩小一点 */
  .float-btn,
  .whatsapp-btn,
  .telegram-btn {
    width: 56px !important;
    height: 56px !important;
    right: 16px !important;
  }
}

/* 超小屏（iPhone SE 等）也完美 */
@media (max-width: 480px) {
  .search-bar input { padding: 16px 20px !important; font-size: 1rem !important; }
  .search-bar button { width: 100px !important; font-size: 1rem !important; }
  .category-btn { min-width: 130px !important; padding: 14px 24px !important; font-size: 0.95rem !important; }
  h1, h2 { font-size: 2.3rem !important; }
  .product-card img { height: 260px !important; }
}