/* ============================================================
   FANXI Tools - Responsive Override Layer
   加载于 style.css 之后，仅用媒体查询覆盖固定宽度布局，
   不修改原站 HTML 结构与 style.css 本体。
   ============================================================ */

/* ---------- 桌面端：导航统一等宽按钮；隐藏右上角语言切换 ---------- */
.langage { display: none !important; }

@media screen and (min-width: 981px) {
  #nav { white-space: nowrap; }
  /* 7 个链接等宽 102px + 2px 间距 = 728px，恰好填满 734px 导航条，所有页面像素一致 */
  #nav a { float: left; width: 102px; padding: 0; text-align: center; }

  /* Gallery 缩略图：统一 92x92 方格、图片居中并限幅，杜绝老图尺寸不一造成的溢出/压边 */
  .related1 ul li { float: left; width: 92px; height: 92px; margin: 0 6px 6px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .related1 ul li a { float: none; display: flex; align-items: center; justify-content: center; }
  .related1 ul li img { float: none; max-width: 80px; max-height: 80px; width: auto; height: auto; margin: 0; }
}

/* ---------- 平板及以下 (<=980px)：单列堆叠 ---------- */
@media screen and (max-width: 980px) {

  html { -webkit-text-size-adjust: 100%; }

  /* 背景图固定附着在移动端性能差且显示异常 */
  body {
    background-attachment: scroll;
    background-size: 100% auto;
  }

  /* 全局：任何图片不许撑破容器 */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 顶层容器全部改为流式宽度 */
  #allbox,
  #header,
  #top,
  #container,
  #footer,
  #otherlink {
    width: 100% !important;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* 主容器改纵向排列：正文内容在前，产品分类栏在后 */
  #container {
    display: flex;
    flex-direction: column;
  }
  #left {
    order: 2;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    background: #efefed;
    margin-top: 14px;
  }
  #list, #list ul, #list ul li, #list ul li ol, #list ul li ol li {
    width: 100% !important;
    float: none !important;
  }
  #list ul li ol li a {
    width: auto !important;
    padding: 8px 10px !important;
  }
  .contactitle { width: 100% !important; margin-top: 12px; }
  .contactin   { width: auto !important; padding: 4px 10px; }

  #right {
    order: 1;
    width: 100% !important;
    float: none !important;
  }

  /* 顶部导航：允许换行、按钮式 */
  #nav {
    width: 100% !important;
    float: none !important;
    margin-top: 6px;
    text-align: center;
    height: auto !important;
  }
  #nav a {
    float: none !important;
    display: inline-block;
    padding: 6px 12px !important;
    margin: 2px 1px;
    line-height: normal;
  }
  .langage { width: 100% !important; float: none !important; text-align: center; }
  .langage ul li { display: inline-block; float: none !important; }

  /* 内容面板：去掉固定 698px 背景，改为纯色圆角 */
  #content, #contentin { width: 100% !important; float: none !important; margin-top: 10px; }
  #ctop, #cbottom { display: none; } /* 固定宽度圆角贴图 */
  #dddnterhome, #dddnter {
    width: 100% !important;
    float: none !important;
    background: #FFFFFF !important;
    box-sizing: border-box;
    padding: 10px !important;
    border: 1px solid #d7dee8;
    border-radius: 4px;
  }

  /* Banner：高度自适应，文字区收窄 */
  .banner {
    width: 100% !important;
    height: auto !important;
    min-height: 120px;
    background-size: cover;
    background-position: center;
  }
  .bannerworder, .firstf, .offer, .offerbottom {
    width: auto !important;
    max-width: 100% !important;
    margin: 14px 12px !important;
    float: none !important;
  }

  /* 固定宽度规格表全部变流式 */
  .table0, .table1, .table2, .table01, .table02, .table03, .table04 {
    width: 100% !important;
    float: none !important;
    margin: 8px 0 !important;
    box-sizing: border-box;
    word-break: break-word;
  }
  .table0 td, .table1 td, .table2 td, .table01 td, .table02 td, .table03 td, .table04 td {
    padding: 3px 4px;
    font-size: 12px;
  }

  /* 文章/产品详情里的固定宽度块 */
  .drill-bit-img1, .drill-bit-img2, .drill-bit-img02,
  .contact3, .contact4 {
    width: 100% !important;
    float: none !important;
    margin: 6px 0 !important;
  }
  .probig {
    width: 100% !important;
    max-width: 420px;
    height: auto !important;
    float: none !important;
    margin: 8px 0 !important;
  }
  .productsp2 ul li ol { width: 100% !important; height: auto !important; box-sizing: border-box; }
  .productsp2 ul li ol li.pro { width: auto !important; margin-left: 8px !important; height: auto !important; }

  /* 首页产品列表：图片与描述上下排列 */
  #homepro ul li, #pro ul li, .relatedpro ul li { height: auto !important; }
  #homepro ul li .f_describe, #pro ul li .describe, .relatedpro ul li .describe {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
  }
  #homepro ul li ol li, #pro ul li ol li, .relatedpro ul li ol li {
    width: 96px !important;
  }

  /* 相关产品缩略图九宫格自适应 */
  .otherpto ul li { width: 21% !important; margin: 0 2% 10px 2% !important; }
  .otherpto ul li a { width: auto !important; }

  /* about / sitemap 等宽内容区 */
  #abouttop, #aboutbottom { display: none; }
  #aboutcenter {
    width: 100% !important;
    float: none !important;
    background: #FFFFFF !important;
    box-sizing: border-box;
    padding: 10px !important;
    border: 1px solid #d7dee8;
    border-radius: 4px;
  }
  #sitemap, .sitemapbig, .sitemapbut, .sitemaplast, .sitemap-li {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .sitemap-li ol li { width: 46% !important; }
  .sitemap-title { width: 100% !important; margin-left: 0 !important; box-sizing: border-box; }

  .aboutleft ul li ol li, .aboutleft ul li ol li.single { width: 100% !important; }
  .aboutright { width: 100% !important; margin-left: 0 !important; }
  #mainprotitle { width: 100% !important; float: none !important; }
  .related ul li { width: 48% !important; }
  .foot { width: 100% !important; float: none !important; }

  /* 浮动元素造成的横向溢出兜底 */
  #container, #right, #dddnter, #dddnterhome, #aboutcenter { overflow: hidden; }
}

/* ---------- 手机 (<=560px) ---------- */
@media screen and (max-width: 560px) {
  body { font-size: 13px; line-height: 1.5; }
  h1, h2 { font-size: 16px !important; width: 100% !important; }

  #logo { width: auto !important; }
  #topleft, #comfont { width: 100% !important; text-align: center; float: none !important; }
  #header { height: auto !important; padding-top: 8px; }

  /* 导航按钮纵向流式排布 */
  #nav a { padding: 7px 10px !important; }

  /* 规格表允许横向滚动而不挤压 */
  .table0, .table1, .table2, .table01, .table02, .table03, .table04 {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table0 table, .table1 table { width: auto !important; min-width: 480px; }

  .otherpto ul li { width: 29% !important; }
  .related ul li { width: 100% !important; }
  .sitemap-li ol li { width: 100% !important; }

  /* WhatsApp 浮动按钮尺寸微调 */
  .wa-float { width: 48px !important; height: 48px !important; right: 12px !important; bottom: 12px !important; }
  .wa-float svg { width: 26px !important; height: 26px !important; }
}

/* ---------- WhatsApp 浮动询盘按钮 ---------- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }