/* ============================================================
   手机端布局修复（必须加载在 styles.css 之后）
   修复内容：
   1) 产品详情页在手机/平板上仍显示两列 → 图片被压小、参数区显示不全
      （styles.css 末尾有一条基础规则 .detail-grid{...} 覆盖了媒体查询）
   2) 首页产品横滑卡在手机上只有约 117px 宽 → 图片过小
   3) 产品中心卡片栅格在窄屏图片被压扁、内容显示不全
   ============================================================ */

/* 1) 产品详情页：≤1024px 一律单列堆叠 */
@media(max-width:1024px){
  .detail-grid{ grid-template-columns:1fr; gap:26px; }
}

/* 2) 产品详情：图片高度自适应，缩略图放大，参数表允许换行 */
@media(max-width:820px){
  .gallery-main img{ height:auto; aspect-ratio:4/3; max-height:70vh; }
  .thumbs{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .thumbs img{ height:74px; }
  .detail-info h1{ font-size:23px; line-height:1.4; margin:8px 0 10px; }
  .detail-info .desc{ font-size:14px; line-height:1.85; }
  .ds-head b{ font-size:17px; }
  table.spec-side{ font-size:12px; }
  table.spec-side th, table.spec-side td{ white-space:normal; padding:8px; }
  .pn-row a{ flex:1 1 auto; justify-content:center; }
  .gal-arr{ width:38px; height:52px; line-height:52px; font-size:22px; }
  .detail-specs{ margin-top:20px; }
}
@media(max-width:480px){
  .thumbs img{ height:62px; }
}

/* 3) 首页产品横滑卡：手机端给足宽度（原公式算出约 117px，太小） */
@media(max-width:640px){
  .fp{ width:min(74vw, 320px); }
  .fp-tx b{ font-size:15px; }
  .fc-btn{ width:34px; height:34px; font-size:19px; }
}
@media(max-width:400px){
  .fp{ width:80vw; }
}

/* 4) 产品中心卡片：≤680px 单列大图，图片按比例不压扁 */
@media(max-width:680px){
  .family-grid{ grid-template-columns:1fr; gap:16px; }
  .family-card .im img{ height:auto; aspect-ratio:4/3; }
  .sci-banner{ padding:22px 20px; }
}

/* 5) 图片与表格防溢出（不改 body overflow，避免影响吸顶头部） */
img{ max-width:100%; height:auto; }
.ds-scroll, table.spec, table.spec-side{ max-width:100%; }
/* 轮播/卡片封面仍需填满容器 */
.fp-im img{ height:100%; }

/* ============================================================
   导航拥挤修复（导航项变多后，中宽屏文字会挤在一起）
   策略：≤1200px 提前收进汉堡菜单；1201~1600px 收紧字号与间距
   ============================================================ */
/* 所有 ≥1201px 都收紧（之前只到 1600px，宽屏又变挤） */
@media(min-width:1201px){
  nav.primary>ul{gap:0}
  nav.primary a{padding:30px 9px;font-size:13.5px}
}
/* 超宽屏给一点呼吸空间，但仍比原来的 32px/16px 紧凑 */
@media(min-width:1701px){
  nav.primary a{padding:32px 12px;font-size:14px}
}
/* 搜索框里的提示文字先隐藏，给导航让位 */
@media(max-width:1700px){
  .hsr-hint{display:none}
}
@media(max-width:1200px){
  nav.primary{display:none}
  .hamburger{display:block}
  nav.primary.open{display:block;position:absolute;top:80px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(10,26,40,.1)}
  nav.primary.open>ul{flex-direction:column;padding:8px 28px 20px;gap:0}
  nav.primary.open a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
  nav.primary.open a::after{display:none}
}
@media(max-width:640px){
  nav.primary.open{top:60px;left:auto;right:10px;width:min(300px,82vw);border-radius:14px;overflow:hidden}
  nav.primary.open>ul{padding:6px 0}
  nav.primary.open a{display:flex;justify-content:space-between;align-items:center;
    padding:13px 18px;border-bottom:1px solid #f0f2f4}
  nav.primary.open a:last-child{border-bottom:0}
}

/* 页脚服务区域链接行 */
.f-regions{margin-top:10px;font-size:12.5px;color:#8a97a1}
.f-regions a{color:#c9a25c;text-decoration:none;margin:0 2px}
.f-regions a:hover{text-decoration:underline}