/* ==========================================================================
   responsive.css - 手机端自适应补丁
   模板为拖拽式固定 1200px 画布（模块 left/top 像素绝对定位 + 运行时给
   html/body 写入 width:1200px 内联样式），因此：
     1) 用 !important 压过内联宽度，把画布放开为流式；
     2) 窄屏下把绝对定位模块还原为文档流，纵向堆叠；
     3) 内联写死像素的宽度（图片/列表项）按 1200→100vw 等比换算。
   PC（>=1024px）不受任何影响。
   ========================================================================== */

/* ---------- 全局基线（所有宽度） ---------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0 !important;
}

img,
video,
canvas {
  max-width: 100%;
}

/* ---------- 平板（<=1023px）：画布流式 ---------- */
@media (max-width: 1023px) {

  /* 关键：运行时写入的 html/body 内联 width:1200px 必须压过 */
  html,
  body,
  #webBody {
    width: auto !important;
    max-width: 100% !important;
  }

  .wrapper,
  .wrapper-1200,
  #wrapper,
  .topBarArea,
  .headerConArea,
  .header,
  .NCenter,
  .bannerArea,
  .footerConArea,
  .footer,
  .frameContainer,
  .absoluteModuleInner,
  .absoluteModuleWrap,
  .customModuleRow,
  .customModuleRowInner,
  .customModuleRowGroup,
  #headFullXY,
  #fullSubNavBox {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }

  body {
    overflow-x: hidden;
  }

  .pic-item,
  .canvas-area,
  .piclist-area,
  .ev-banner-inner,
  .bannerCon {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 表格与富文本内容 */
  table {
    max-width: 100%;
  }

  iframe {
    max-width: 100%;
  }
}

/* ---------- 手机（<=900px）：模块堆叠 + 等比缩放 ---------- */
@media (max-width: 900px) {

  /* 头部导航从绝对定位还原到文档流 */
  .webNav,
  #web_nav,
  .absolute-module {
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
  }

  /* 模块容器：绝对定位 → 静态流式 */
  .customModuleRowAbsolute .CModulePA,
  .customModuleRowRelative .CModulePA,
  .CModulePA {
    position: static !important;
    height: auto !important;
    width: auto !important;
  }

  .CModulePA > div,
  .ev-module-edit,
  .ev-module-edit-box,
  .rowGroup-box-inner {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    z-index: auto !important;
    box-sizing: border-box;
  }

  .ev-module-edit {
    margin: 6px 0;
  }

  /* 行容器不再写死高度 */
  .customModuleRow,
  .customModuleRowInner,
  .headFullXY {
    height: auto !important;
    position: static !important;
  }

  /* 顶部工具条、悬浮挂件在窄屏隐藏 */
  .topBar,
  .topBarArea,
  .wrapper-1200 .search,
  .wrapper-1200 .shop-cart,
  a[href="phone.html"],
  .ev_side_toolbar,
  .floatQrCode,
  .sideToolBar {
    display: none !important;
  }

  /* 图文列表：内联像素宽度按 1200 画布等比换算 */
  ul li .inner,
  .pic-text-list-module .inner,
  .pic-text-module .pics,
  .pic-text-list-module .pics,
  .pic-module a.pics {
    float: none !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .pic-text-list-module ul,
  .pic-text-module ul,
  ul.q {
    width: auto !important;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    text-align: center;
  }

  .pic-text-list-module li,
  .pic-text-module li,
  ul.q > li {
    display: inline-block !important;
    float: none !important;
    position: static !important;
    width: 46% !important;
    margin: 2% !important;
    vertical-align: top;
    box-sizing: border-box;
    font-size: 13px;
  }

  /* 图片容器（内联 width:250px 等）等比缩放并保持宽高比 */
  span.pic,
  .pic-item,
  a.pics {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
  }

  span.pic table,
  span.pic tbody,
  span.pic tr,
  span.pic td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  span.pic img,
  .pic-item img,
  a.pics img {
    width: 100% !important;
    height: auto !important;
  }

  /* 侧边栏移到正文之后，宽度铺满 */
  .sidebar-area,
  .sidebar-inner,
  .frameSideColumn,
  .frameMainColumn {
    float: none !important;
    width: 100% !important;
    position: static !important;
  }

  /* 导航条目换行排列 */
  .NItem,
  .NItemTable,
  .NItemL,
  .NItemM,
  .NItemR,
  .NMain,
  .nav {
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
  }

  .nav-wrap,
  .webNav {
    text-align: center;
    width: 100% !important;
  }

  /* 筛选面板（绝对定位滑出）在窄屏不可用，隐藏 */
  .list_c {
    display: none !important;
  }

  /* 背景图模块等比裁剪 */
  .rowImgBg,
  .ev-container-bg {
    background-size: cover !important;
    background-position: center top !important;
  }

  /* 富文本表格内容允许横向滚动而不是撑破页面 */
  .ev-module-text table,
  .ue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 小屏手机（<=420px）：列表单列 ---------- */
@media (max-width: 420px) {
  .pic-text-list-module li,
  .pic-text-module li,
  ul.q > li {
    width: 96% !important;
  }
}

/* ---------- 手机端隐藏右侧悬浮工具条（sidebar2_Mo 为 position:fixed，会压住正文） ---------- */
@media (max-width: 1023px) {
  .sidebar2_Mo,
  .sidebar2_list,
  .sidebar2_listB,
  .sidebar2_listC,
  .ev_side_toolbar,
  .sideToolBar,
  .floatQrCode {
    display: none !important;
  }

  /* 顶部轮播为 JS 画布（canvas）渲染，按屏宽缩放避免只露左上角一小块 */
  .ev-banner-module,
  .ev-banner-inner,
  .bannerCon,
  .bannerArea,
  .canvas-area {
    width: 100% !important;
    max-width: 100% !important;
  }

  .canvas-area canvas,
  .ev-banner-inner canvas {
    width: 100% !important;
    height: auto !important;
  }
}