/* ============================================================
   sunpir · 伟创科技 · H5 移动端覆盖样式 (mobile.css)
   叠在 style.css / index.css 之后加载。
   仅在窄屏生效，桌面(>=1025px)保持原版 1226px 布局不变。
   不删改任何结构/DOM —— 栏目与链接原样保留。
   ============================================================ */

/* ---------- 通用流式化 ---------- */
@media (max-width: 1024px){
  .container{ width:100% !important; max-width:100% !important; padding-left:14px; padding-right:14px; box-sizing:border-box; }
  html,body{ max-width:100%; overflow-x:hidden; }
  img{ max-width:100%; height:auto; }
}

/* 小于等于 1024：栅格堆叠为单列/半列，脱离固定 float 宽度 */
@media (max-width: 767px){
  .row{ margin-left:0 !important; }
  .span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,
  .span10,.span11,.span12,.span13,.span14,.span15,.span16,.span17,
  .span18,.span19,.span20{
    float:none !important; display:block !important; width:100% !important;
    margin-left:0 !important; margin-right:0 !important; box-sizing:border-box;
  }
  .span-first{ margin-left:0 !important; }

  /* 商品横幅 / 栅格内缩略图防止横向撑破 */
  .goods-list .goods-item, .xm-carousel-list li, .brick-list li,
  .goods-item, .review, .brick-item{ box-sizing:border-box; max-width:100%; }
  .goods-list img, .xm-carousel-list img, .brick-list img,
  .list img, li img{ height:auto !important; }
}

/* ---------- 顶栏 / 头部 ---------- */
@media (max-width: 767px){
  body{ padding-top:0; }
  .site-topbar{ height:auto; line-height:24px; font-size:11px; }
  .site-topbar .container{ }
  .site-topbar .topbar-cart{ width:100% !important; height:auto; float:none; line-height:22px; font-size:11px; }
  .site-topbar .topbar-nav{ float:none; width:100% !important; margin:0; line-height:26px; }
  .site-topbar .topbar-info{ }
}

/* ---------- 主导航：移动堆叠 + 可点折叠 ---------- */
@media (max-width: 767px){
  .site-header{ }
  .site-header .container{ }
  .site-header .header-logo{ float:none !important; margin:0 auto; text-align:center; }
  .site-header .header-logo img{ height:44px !important; width:auto; }
  .site-header .header-nav{ width:100% !important; float:none; clear:both; }
  .site-header .header-nav .nav-list{
    float:none !important; width:100% !important; height:auto !important;
    padding:10px 0 6px !important; clear:both; text-align:center;
    display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px; box-sizing:border-box;
  }
  .site-header .header-nav .nav-list .nav-category{
    float:none !important; width:auto !important; height:auto !important;
    display:inline-block; margin:2px 0 !important;
  }
  .site-header .header-nav .nav-list .nav-category .btn-category-list{
    display:inline-block !important; padding:6px 12px !important;
    border:1px solid #e0e0e0; border-radius:4px; font-size:13px !important; color:#333;
    margin:0 !important;
  }
  /* 主导航其它 item */
  .site-header .header-nav .nav-list .nav-item{
    float:none !important; display:inline-block !important; margin:0 !important;
  }
  .site-header .header-nav .nav-list .nav-item .link{
    display:inline-block; padding:6px 10px !important; font-size:14px;
  }
  /* 分类下拉：移动改为整块可见/可滚动，不再是绝对浮层hover */
  .site-header .header-nav .nav-list .nav-category .site-category{
    position:static !important; width:100% !important; height:auto !important;
    max-height:60vh; overflow:auto; top:auto; left:auto; margin-top:6px;
    background:#fff; border:1px solid #eee;
  }
  .site-category-list .category-item{
    width:100% !important; float:none !important;
  }
  .site-category-list .title{ width:100% !important; padding:9px 12px !important; }
  .site-category-list .children{ position:static !important; left:auto !important;
    width:100% !important; height:auto !important; background:#fafafa; }
  .site-category-list .children-list{ float:left; width:50%; box-sizing:border-box; }
  /* 分类右侧展示(children thumb)小屏简化 */
  .site-category-list .children .figure{ display:none !important; }
}

/* ---------- 首页轮播：等比缩放不裁切、固定高容器去掉 ---------- */
@media (max-width: 767px){
  .home-hero-slider{
    height:auto !important;
  }
  .home-hero-slider .xm-slider .slide a,
  .home-hero-slider .slide img{
    width:100% !important; height:auto !important; max-width:100%;
  }
  /* SuperSlide 运行时会给 <a>/<img> 写 inline 宽高，用 !important 在上面已盖；
     img 容器 inline height 由 JS 设到 wrapper，强制 auto 容器可在下条兜底 */
  .xm-slider-container, .xm-slider-control, .xm-slider-slide{
    height:auto !important;
  }
  .home-hero-slider .xm-slider-pagination{ right:6px !important; left:auto !important; }
}

/* ---------- 首页 sub 广告 / 推荐商品区 ---------- */
@media (max-width: 767px){
  .home-hero-sub{ margin-top:8px; }
  /* 六宫格/四宫格商品卡：flex 换行按 2 列 */
  .goods-list{ margin-left:0 !important; }
  .xm-carousel-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .xm-carousel-list{
    display:flex; flex-wrap:nowrap; gap:8px; width:auto; margin-left:0 !important;
  }
  .xm-carousel-list li{ flex:0 0 46%; box-sizing:border-box; margin:0 !important; }
  .xm-carousel-list li .thumb img{ width:100%; height:auto !important; }
  .xm-carousel-list li .title{ white-space:normal !important; font-size:13px; }
  /* 标题行 */
  .xm-plain-box .box-hd{ height:auto !important; padding:12px 0 6px; }
  .xm-plain-box .box-hd .title{ font-size:17px !important; }
  .xm-plain-box .box-hd .more{ position:static !important; float:right; }
}