/* ===================================================================
   移动端适配优化（Mobile-first 补丁）
   目标设备：390px（iPhone 14/15）、360px（主流安卓）、414px（Plus）
   非洲客户以手机访问为主，此处为关键优化
   =================================================================== */

/* ---------- 全局防溢出兜底 ---------- */
html,body{max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%}

/* ---------- 触摸友好的最小点击区域 ---------- */
@media (max-width:1000px){
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .main-nav a{padding:14px 8px;font-size:16px}
  .nav-toggle{width:44px;height:44px}
}

/* ---------- 平板（<=1000px）---------- */
@media (max-width:1000px){
  .header-inner{flex-wrap:nowrap}
  .brand{min-width:0}
  .brand-text b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-text span{font-size:10px}
  .lang-switch{flex-shrink:0}
}

/* ---------- 手机（<=640px）---------- */
@media (max-width:640px){

  /* --- 头部：三段式紧凑布局 --- */
  .site-header{position:sticky;top:0;z-index:60}
  .header-inner{
    padding:9px 0;gap:8px;
    display:flex;align-items:center;
  }
  .brand{gap:8px;flex:1 1 auto;min-width:0;overflow:hidden}
  .brand img{height:34px;width:34px;flex-shrink:0}
  .brand-text{min-width:0;overflow:hidden}
  .brand-text b{font-size:14.5px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .brand-text span{display:none}          /* 副标题在窄屏隐藏，避免拥挤 */

  /* 语言切换：只保留紧凑胶囊 */
  .lang-switch{padding:2px;gap:1px;flex-shrink:0}
  .lang-switch a,.lang-switch button{padding:6px 8px;font-size:12px}

  /* 汉堡按钮 */
  .nav-toggle{display:block;flex-shrink:0;margin-left:auto}
  .main-nav{top:58px;max-height:calc(100vh - 58px);overflow-y:auto}
  .main-nav a{font-size:15.5px;padding:13px 6px}

  /* --- 首屏 hero --- */
  .hero-inner{padding:40px 0 44px;max-width:100%}
  .hero h1{font-size:24px;line-height:1.3;letter-spacing:-.2px;margin-bottom:14px}
  .hero .sub{font-size:15px;line-height:1.65;margin-bottom:22px}
  .hero .cta{flex-direction:column;gap:10px}
  .hero .cta .btn{width:100%}

  /* hero 标签：改成 2×2 网格，不再横向挤 */
  .hero-tags{
    display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;
    margin-top:28px;padding-top:22px;
  }
  .hero-tags div{font-size:13px}
  .hero-tags b{font-size:20px}

  /* --- 通用区块 --- */
  section{padding:42px 0}
  .wrap{padding:0 16px}
  .sec-head{margin-bottom:28px}
  h2.sec-title{font-size:21px;line-height:1.35}
  .sec-desc{font-size:14.5px}
  .eyebrow{font-size:11.5px;padding:4px 10px}

  /* --- 产品卡片 --- */
  .grid{gap:16px}
  .card-img img{padding:4px 6px}
  .card-body{padding:15px 15px 17px}
  .card-body h3{font-size:16px;line-height:1.4}
  .card-body .spec,.card-body .feat{font-size:13px}
  .card-body .btn{width:100%;justify-content:center}

  /* --- 参数表：横向滚动 + 提示 --- */
  .table-wrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:8px;position:relative;
    background:
      linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
      linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(11,45,92,.14),transparent),
      radial-gradient(farthest-side at 100% 50%,rgba(11,45,92,.14),transparent) 100% 0;
    background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
  .table-wrap table{min-width:520px;font-size:13px}
  .table-wrap th,.table-wrap td{padding:9px 10px}
  .table-hint{display:block;font-size:12px;color:var(--muted);margin-top:8px}

  /* --- 联系页 --- */
  .contact-grid{gap:26px}
  .contact-item{font-size:14.5px;align-items:flex-start}
  .contact-item .ic{width:34px;height:34px;font-size:14px;flex-shrink:0}
  .detail-actions{display:flex;flex-direction:column;gap:10px}
  .detail-actions .btn{width:100%}
  .form-card{padding:20px 16px}
  .field input,.field textarea,.field select{font-size:16px} /* 防 iOS 聚焦缩放 */
  .field-row{gap:12px}

  /* --- 页脚 --- */
  .footer-grid{gap:26px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;font-size:12.5px}

  /* --- 悬浮按钮（WhatsApp / 邮件 / 返回顶部，三者尺寸统一）--- */
  .float-wa{right:14px;bottom:16px;gap:10px}
  .float-wa a,.float-wa button{width:48px;height:48px}
  .float-wa svg{width:23px;height:23px}

  /* --- 微信号复制 --- */
  .copy-btn{min-height:34px;padding:5px 11px;font-size:12.5px}
}

/* ---------- 超窄屏（<=360px）---------- */
@media (max-width:360px){
  .hero h1{font-size:22px}
  .hero-tags{grid-template-columns:1fr;gap:12px}
  .brand-text b{font-size:13.5px}
  .lang-switch a,.lang-switch button{padding:5px 7px;font-size:11.5px}
  .wrap{padding:0 13px}
}

/* ---------- 横屏手机（低高度）---------- */
@media (max-width:900px) and (orientation:landscape) and (max-height:480px){
  .hero-inner{padding:26px 0 30px}
  .hero h1{font-size:21px}
}

/* ---------- 触摸设备：去掉 hover 位移，避免点按残留 ---------- */
@media (hover:none){
  .card:hover{transform:none;box-shadow:var(--shadow)}
}

/* ---------- 文字断词与溢出精确修复（第二轮） ---------- */

/* 所有长文本允许在单词内断行，防止横向撑开 */
h1,h2,h3,h4,p,li,td,th,span,div,a{
  overflow-wrap:break-word;word-wrap:break-word;
}

/* hero 与 page-hero 内容严格限制在视口内 */
.hero,.page-hero,.detail,.prose,.contact-grid,.form-card{
  max-width:100vw;overflow-x:clip;
}
.hero-inner,.page-hero .wrap{padding-left:16px;padding-right:16px}

/* 面包屑：超长时截断显示，不撑宽页面 */
.breadcrumb,.breadcrumbs,.detail-crumbs{
  max-width:100%;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;flex-wrap:nowrap;
}
.breadcrumb a,.breadcrumbs a{white-space:nowrap}

/* 产品标题在窄屏下允许自然换行（不断词） */
.detail h1,.card-body h3,.page-hero h1,.hero h1,.sec-title{
  overflow-wrap:break-word;word-break:normal;
}

/* 表格标题区与角标不参与溢出 */
.card-badge{white-space:nowrap}

/* iOS 安全区适配（刘海屏） */
.site-header,.float-wa{
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}
.float-wa{bottom:calc(16px + env(safe-area-inset-bottom,0))}

/* 点击高亮去除（移动端体验） */
*{-webkit-tap-highlight-color:transparent}

/* ---------- 第三轮：强制所有容器不超视口 ---------- */
@media (max-width:1000px){
  .wrap,.detail,.prose,.form-card,.sec-head,.contact-grid,
  .hero-inner,.footer-grid,.table-wrap,.keyline,.feat-list,
  .cta-band,.inquiry-box,.logos-row,.grid,.card,.detail-actions,
  section > div,article{
    max-width:100% !important;
  }
  .detail img,.prose img,.card img{max-width:100% !important;height:auto}
}

/* 产品详情布局：窄屏单列时图片与文字都在同一容器内 */
@media (max-width:1000px){
  .detail{width:100%}
  .detail > *{min-width:0}
  .detail .spec-card,.detail .specs,.detail .card{max-width:100%}
}

/* 参数速览卡片（Rated Output 等）不超宽 */
.spec-card,.spec-grid,.key-stat{max-width:100%;overflow:hidden}

/* ---------- 第四轮：核弹级防溢出（所有元素 ≤ 视口） ---------- */
@media (max-width:1000px){
  *{max-width:100vw !important}
  img,svg,video,iframe,table{max-width:100% !important}
  body{width:100vw;overflow-x:hidden}
}
/* 桌面端不受影响（>1000px 无此规则） */

/* ---------- 标题换行兜底 ---------- */
@media (max-width:1000px){
  h1,h2,h3,.detail h1,.page-hero h1,.hero h1,.sec-title{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal;
    overflow-wrap:break-word;
  }
}

/* ---------- 第五轮：产品详情布局强修（wrap 500px 问题） ---------- */
@media (max-width:1000px){
  .wrap{width:100% !important;max-width:100vw !important;padding-left:16px !important;padding-right:16px !important;margin-left:0 !important;margin-right:0 !important}
  .detail{display:block !important;width:100% !important;max-width:100vw !important;grid-template-columns:none !important}
  .detail > *{width:100% !important;margin-left:0 !important;margin-right:0 !important;max-width:100% !important}
  .detail .bread,.detail .crumbs{max-width:100% !important;overflow:hidden !important}
}

/* 悬浮按钮尺寸统一：三个按钮（返回顶部 / WhatsApp / 邮件）均由
   .float-wa a,.float-wa button 统一控制（桌面 56px、≤640px 48px），
   此处不再对 .back-top 单独覆盖尺寸，避免出现大小不一致。 */