/* ============================================================
   cnxianshu.com · 全局增量样式 theme.css
   目标：在保留现有蓝绿(#07c68a)品牌风格前提下
   - 建立轻量设计变量
   - 小幅美化（圆角/阴影/过渡/可读性）
   - 补全响应式（核心缺口：原 body{min-width:1200px} 导致移动端横向溢出）
   本文件由 header / header-index 在最后引入，覆盖优先级最高。
   ============================================================ */

/* ---------- 设计变量（不改动原有配色，仅引用） ---------- */
:root{
  --primary:#07c68a;
  --primary-dark:#06ad79;
  --primary-darker:#029e6e;
  --accent:#F45204;
  --accent-soft:#fff3ec;
  --text:#333;
  --text-2:#666;
  --muted:#999;
  --line:#ececec;
  --bg:#f5f6f8;
  --radius:6px;
  --radius-lg:10px;
  --shadow:0 1px 4px rgba(0,0,0,.06);
  --shadow-hover:0 6px 18px rgba(7,198,138,.12);
  --maxw:1200px;
  --gap:15px;
  --tap:40px;
}

/* ---------- 基础可读性增强 ---------- */
img{max-width:100%;height:auto;}
a{transition:color .15s ease;}
::selection{background:var(--primary);color:#fff;}
html{-webkit-text-size-adjust:100%;}
body{font-family:"microsoft yahei","PingFang SC","Helvetica Neue",Arial,sans-serif;}

/* 让所有容器宽度在窄屏收住，杜绝横向滚动 */
* , *::before , *::after{box-sizing:border-box;}

/* ---------- 轻量卡片美化（仅 hover/圆角，不改布局） ---------- */
.topitnew,.faqlist,.right_news,.sucesswk,
.category-box .list-cate-content,
.product-list li,
.weike_order .sucewk{
  border-radius:var(--radius);
  transition:box-shadow .2s ease, transform .2s ease;
}
.topitnew:hover,.faqlist:hover,.right_news:hover,.sucesswk:hover{
  box-shadow:var(--shadow-hover);
}
.product-list li:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}
/* 区块标题小圆点统一用品牌色（已有 i 元素，补过渡） */
.zhaogongchang .bigtitle i{transition:background .2s ease;}

/* 按钮统一圆角过渡 */
.btn_blue,.btn_yellow,.btn_green,.qspage a,.qspage .current,.qspage strong{
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

/* ============================================================
   响应式层
   ============================================================ */

/* ---------- 平板（<=1200）让固定宽容器变为流式 ---------- */
@media (max-width:1200px){
  .box,.header_min .header_min_top,.head .head_width,
  .nav .nav_width .wrap,.nav_index .nav_width,
  .foot_lab,.foot,.foottxt,.footer_min,
  .container,.dx-head,.index_8,.ads_full_screen,
  .index_news .left_news,.index_news .right_news,
  .zhaogongchang .width_left,.zhaogongchang .width_right{
    width:100% !important; max-width:var(--maxw); min-width:0 !important;
  }
  .head .head_width,.nav .nav_width .wrap,.nav_index .nav_width,
  .foot_lab,.foot,.foottxt,.footer_min,.container,.dx-head,.index_8{
    padding-left:12px; padding-right:12px;
  }
}

/* ---------- 中小屏（<=1000）解除 body 最小宽度，全面流式 ---------- */
@media (max-width:1000px){
  body{min-width:0 !important;}
  .header_min .header_min_top{width:auto !important;max-width:100%;padding:0 10px;}
  .head .head_width{width:auto !important;padding:0 12px;height:auto !important;min-width:0 !important;}
  .head .logobox{width:auto !important;max-width:42%;padding-top:18px !important;}
  .head .sobox{width:100% !important;margin-left:0 !important;padding-top:14px !important;float:none !important;clear:both;}
  .head .sobox .inputbg{width:100% !important;}
  .head .mobile{display:none !important;}
  .floatingPhone{position:static !important;padding:6px 12px 0;font-size:14px;}

  .nav .nav_width .wrap,.nav_index .nav_width{width:auto !important;max-width:100%;padding:0 12px;}
  .nav_index .navitems{width:auto !important;float:left !important;margin-left:0 !important;}

  .foot_lab,.foot,.foottxt,.footer_min{width:auto !important;max-width:100%;padding-left:12px;padding-right:12px;}
  .foot .about{width:auto !important;min-width:140px;border-right:1px #3e3e3e solid;}

  /* 首页 */
  .dx-head{width:100% !important;}
  .dx-head .dx-left,.dx-head .dx-container{width:100% !important;float:none !important;}
  .dx-container .tuijtask{width:100% !important;box-sizing:border-box;}
  .zhaogongchang .width_left,.zhaogongchang .width_right{width:100% !important;float:none !important;}
  .index_news .left_news,.index_news .right_news{width:100% !important;float:none !important;margin-bottom:15px;}
  .category-box .list-cate-nav{width:200px !important;}
  .category-box .list-cate-content{width:auto !important;float:right !important;}
  .ads_three{width:100% !important;}
  .ads_three .alist{width:31% !important;margin-right:2% !important;height:auto !important;}
}

/* ---------- 移动端（<=768）汉堡导航 + 首页区块堆叠 ---------- */
@media (max-width:768px){
  /* 头部顶栏允许换行 */
  .header_min .header_min_top{display:flex;flex-wrap:wrap;justify-content:space-between;line-height:34px;height:auto !important;padding:4px 10px;}
  .header_min .header_min_top .itopl,.header_min .header_min_top .itopr{float:none !important;height:auto !important;}
  .header_min .header_min_top .itopr{display:flex;flex-wrap:wrap;gap:2px 6px;}

  /* Logo + 搜索 占满 */
  .head .head_width{display:block;}
  .head .logobox{max-width:55%;}
  .head .logobox img{max-width:100%;height:auto;}
  .head .sobox .righttxt{display:none !important;}

  /* 汉堡导航 */
  .nav-toggle{display:inline-block !important;}
  .nav .nav_width .wrap .navitems,
  .nav_index .nav_width .navitems{
    display:none;
    width:100% !important;float:none !important;height:auto !important;clear:both;
    background:var(--primary-dark);
  }
  .nav-toggle-cb:checked ~ .navitems{display:block !important;}
  .nav .nav_width .wrap .navitems li,
  .nav_index .nav_width .navitems li{
    float:none !important;width:100% !important;height:auto !important;line-height:var(--tap) !important;
    border-bottom:1px rgba(255,255,255,.08);
  }
  .nav .nav_width .wrap .navitems li a,
  .nav_index .nav_width .navitems li a{
    padding:0 16px !important;line-height:var(--tap) !important;font-size:15px !important;
  }
  /* 隐藏导航右侧的占位死链（联系我们等由页脚承载） */
  .nav .nav_width .wrap .navlink,
  .nav_index .nav_width .navlink{display:none !important;}

  /* 首页首屏：横幅 + 分类菜单 + 右栏 改为纵向堆叠 */
  .firstScreen{height:auto !important;min-height:0 !important;}
  .flexslider,.firstScreen .flexslider{height:auto !important;}
  .firstScreen .slides li{height:160px !important;background-size:cover !important;background-position:center !important;}
  .menu_list_wrap{
    position:static !important;right:auto !important;left:auto !important;top:auto !important;
    margin:0 !important;width:100% !important;height:auto !important;
  }
  .menu_list_wrap .menu_list_bar{height:auto !important;}
  .menu_list_wrap ul{height:auto !important;}
  .menu_list_wrap li{padding:6px 0;}
  .firstRight{
    position:static !important;left:auto !important;top:auto !important;margin:12px 0 0 !important;
    width:100% !important;
  }
  .user_info_area{width:100% !important;height:auto !important;min-height:0 !important;}

  /* 找工厂/看款/样品 三块：左分类 + 右内容 堆叠 */
  .category-box{display:block !important;}
  .category-box .list-cate-nav{
    width:100% !important;height:auto !important;float:none !important;border-right:0 !important;
    border-bottom:1px var(--line);
  }
  .category-box .secord-nav-box{height:auto !important;padding:4px 0;}
  .category-box .thrid-nav{display:none !important;} /* 移动端简化，避免遮挡 */
  .category-box .list-cate-content{
    width:100% !important;float:none !important;height:auto !important;border:1px var(--line);
  }
  .category-box .cate-box{width:100% !important;height:auto !important;}
  .category-box .cate-box .list-category{width:100% !important;height:auto !important;border-right:0;border-bottom:1px var(--line);}
  .category-box .cate-box .list{width:100% !important;}
  .category-box .cate-box .list .list-detail{width:100% !important;padding:12px;}
  .category-box .cate-box .list .list-img{display:none !important;}
  .product-list li{width:50% !important;height:auto !important;border:1px var(--line);}
  .product-list li img{width:90% !important;height:auto !important;margin:10px auto 0;}
  .sucesswk{height:auto !important;padding-top:10px !important;}
  .sucesswk .button{position:static !important;width:100% !important;display:block;margin-top:10px;}

  /* 资讯区 */
  .index_news{display:block !important;}
  .topitnew,.faqlist{width:100% !important;height:auto !important;float:none !important;margin-bottom:14px;}
  .topitnew>em{height:auto !important;}
  .topitnew>ul{width:100% !important;height:auto !important;padding:10px;}
  .faqlist ul{width:100% !important;}
  .faqlist ul li{width:48% !important;margin:10px 1% 0 !important;}
  .right_news{width:100% !important;height:auto !important;float:none !important;}
  .right_news .newstab{position:static !important;width:100% !important;}
  .right_news .news_showtabs{margin-top:60px !important;}

  /* 友链 */
  .index_8{width:100% !important;}
  .index_8 .links{width:100% !important;float:none !important;}

  /* 页脚：多列换行 */
  .foot{display:block !important;}
  .foot .service{width:100% !important;border-right:0 !important;border-bottom:1px #3e3e3e solid;height:auto !important;padding-bottom:14px;}
  .foot .about{width:50% !important;float:left !important;min-height:120px;border-right:1px #3e3e3e solid;box-sizing:border-box;}
  .foot_lab .ylist{width:33.33% !important;background-position:20px 0 !important;font-size:15px !important;}

  /* 全站横向滚动兜底 */
  .ads_full_screen,.ads_three{overflow:hidden !important;}
}

/* ---------- 超小屏（<=480）再挤压 ---------- */
@media (max-width:480px){
  .product-list li{width:100% !important;}
  .foot .about{width:100% !important;}
  .head .logobox{max-width:60%;}
  .zhaogongchang .bigtitle .font_title{font-size:20px !important;}
  .zhaogongchang .bigtitle .samp{display:none !important;}
  .faqlist ul li{width:100% !important;margin:10px 0 0 !important;}
}

/* 汉堡按钮基础样式（桌面隐藏） */
.nav-toggle{
  display:none;
  float:right;
  margin:8px 0;
  padding:0 14px;
  height:30px;line-height:30px;
  color:#fff;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius);
  font-size:14px;cursor:pointer;user-select:none;
}
.nav-toggle-cb{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none;}

/* ============================================================
   线束商城 / 看资讯 等频道容器（原固定 .w1000 / .ccm / .left_box / .StoreInfo）
   原模板使用固定像素宽度，移动端会横向溢出 → 补流式 + 轻量卡片美化
   ============================================================ */
/* 让固定宽容器在窄屏收束 */
@media (max-width:1200px){
  .w1000,#destoon_space,.StoreInfo,.ccm,.left_box,.m,.head_s{
    width:100% !important;max-width:var(--maxw);min-width:0 !important;
  }
  .w1000,#destoon_space,.StoreInfo,.ccm,.left_box{padding-left:12px;padding-right:12px;box-sizing:border-box;}
}
@media (max-width:1000px){
  .w1000,.StoreInfo,.ccm,.left_box,.m,.head_s{width:auto !important;max-width:100%;padding-left:12px;padding-right:12px;}
  .StoreInfo .fr,.StoreInfo .fl,.m_l,.m_r,.m_n{float:none !important;width:100% !important;margin:0 !important;}
  .StoreInfo .fr{margin-top:15px;}
}
@media (max-width:768px){
  .w1000,.StoreInfo,.ccm,.left_box{padding:10px;}
  /* 商品/资讯列表卡片：缩小圆角卡片，提升可读性 */
  .left_box .pos,.pos{font-size:13px;line-height:1.8;color:var(--text-2);margin-bottom:10px;}
  .box_head,.left_head{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin-bottom:10px;}
  .box_head strong,.left_head strong{color:var(--primary-dark);}
  .box_body{border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
  .rank_list li,.li_dot li{line-height:1.9;}
  .left_box table{font-size:13px;}
  table.grid,.left_box table.grid{overflow-x:auto;display:block;max-width:100%;}
  /* 商品详情主图/文本区在移动端堆叠 */
  .productDeBox{display:block !important;}
  .proImg,.proText{width:100% !important;float:none !important;margin:0 !important;}
  .proImg{margin-bottom:16px;}
  .xc_left,.xc_right,#xc_right{width:100% !important;float:none !important;margin:0 !important;}
  .xc_left{margin-bottom:16px;}
  .TopBoxFix{display:none !important;}
}
@media (max-width:480px){
  .box_head,.left_head{font-size:14px;}
  .rank_list li,.li_dot li{font-size:12px;}
}
