/* mro365 www 移动端重构样式  v20261107c  (max-width:768px)
   设计目标：在现有 www 模板上做"移动优先"重构——底部 Tab 栏、双列触控商品卡、
   吸顶搜索、横向品牌条（汉盾首位）、精简页脚。
   纯 @media 覆盖层，桌面端完全不触发，PC 视觉零变化。
   加载：各 .dwt <head> 内 <link href="/themes/redbaby/mobile.css?v=20261107c"> */

/* 桌面端隐藏移动端专属元素 */
.m_tabbar, .brand_rec { display: none; }

@media (max-width: 768px) {
  * { box-sizing: border-box; }
  html, body { overflow-x: hidden; }
  body { padding-bottom: 56px !important; }   /* 给底部 Tab 栏留位 */

  /* 1) 1220px 固定容器 -> 满宽 */
  .wrap_990 .w { width: 100% !important; padding: 0 10px; }

  /* 2) 图片全部流式，杜绝横向溢出 */
  img { max-width: 100% !important; height: auto !important; }

  /* 3) 头部：logo + 搜索 竖排满宽，搜索吸顶 */
  .toplayer { display: none !important; }                 /* 顶部热线条移动端隐藏 */
  .headerlayer { position: sticky; top: 0; z-index: 50; background: #fff;
                 border-bottom: 1px solid #f0f0f0; }
  .headerlayer .header.w .logo.fl,
  .headerlayer .header.w .search.fl { float: none !important; width: 100% !important; margin: 6px 0; }
  .search.fl .s_box { width: 100% !important; display: flex; }
  .search.fl .s_text.fl { flex: 1; float: none !important; }
  .search.fl .s_btn.fl { float: none !important; width: 64px; }

  /* 4) 顶部主导航：竖向堆叠可见（汉堡控件存在时才折叠，见下） */
  .mainnav.fl { float: none !important; width: 100% !important; margin-top: 6px; }
  .mainnav ul { display: block; background: #fff; border: 1px solid #eee; }
  .mainnav ul li { float: none !important; width: 100% !important; text-align: left;
                   border-bottom: 1px solid #f0f0f0; }
  .mainnav ul li a { color: #333 !important; padding: 10px 12px !important; display: block; }
  .mainnav ul li.la div { position: static !important; width: 100% !important;
                          box-shadow: none; display: none; background: #fafafa; }
  .mainnav ul li.la:hover div, .mainnav ul li.la.over div { display: block; }
  .allcategory { display: none !important; }             /* mega-menu 移动端隐藏 */

  /* 汉堡折叠（仅当 #nav_toggle 存在于 DOM 时生效） */
  .navlayer:has(#nav_toggle) .nav_toggle_btn {
    display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 38px; line-height: 38px; text-align: center;
    font-size: 22px; color: #fff; background: #F26F1F; border-radius: 4px; cursor: pointer; z-index: 60;
  }
  .navlayer:has(#nav_toggle) .mainnav ul { display: none; }
  .navlayer:has(#nav_toggle:checked) .mainnav ul { display: block; }

  /* 5) 多栏布局折叠为单列 */
  .main_section.fl, .section_tabBox.fl, .section_left.fl, .section_middle.fl,
  .section_right.fl, .section_aside, .r_box.fl, .recommend_right.fl,
  .recommend_body, .section_box, .section_container, .section_brandBox, .section_menu {
    float: none !important; display: block !important; width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  /* 6) 商品格：双列触控卡 */
  .goodsItem, .lc { float: left !important; width: 48% !important; margin: 1% !important;
                    background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; overflow: hidden; }
  .goodsItem .goodsimg { width: 100% !important; height: auto !important; margin: 0 !important; }
  .goodsItem img { width: auto !important; height: auto !important; }
  .goodsItem .goodsName, .goodsItem .goodsInfo, .goodsItem p { padding: 4px 8px; margin: 0; }
  .goodsItem a { color: #333 !important; font-size: 13px; line-height: 1.4; }

  /* 7) 通用块满宽 */
  .w.mt_100, .w.mb_25, .footservice, .foothelp, .friendlink, .footer { width: 100% !important; }
  .footservice .s_box, .foothelp .box { width: 100% !important; float: none !important; }

  /* 8) === 移动端底部固定 Tab 栏 === */
  .m_tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    height: 52px; background: #fff; border-top: 1px solid #eee;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  }
  .m_tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
           color: #666; font-size: 11px; text-decoration: none; gap: 2px; }
  .m_tab .m_ico { font-size: 19px; line-height: 1; }
  .m_tab:active, .m_tab.cur { color: #F26F1F; }

  /* 9) === 首页品牌推荐条（汉盾首位） === */
  .brand_rec { display: block; margin: 10px 0; background: #fff; padding: 10px 0 12px; }
  .brand_rec_tit { font-size: 15px; font-weight: 700; color: #222; margin: 0 10px 8px;
                   border-left: 3px solid #F26F1F; padding-left: 8px; }
  .brand_rec_list { display: flex; gap: 10px; overflow-x: auto; padding: 0 10px 4px;
                    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .brand_rec_list::-webkit-scrollbar { display: none; }
  .brand_rec_item { flex: 0 0 auto; width: 88px; text-align: center; text-decoration: none; }
  .brand_rec_item img { width: 76px; height: 76px; object-fit: contain;
                        border: 1px solid #eee; border-radius: 8px; background: #fff; padding: 6px; }
  .brand_rec_item span { display: block; font-size: 12px; color: #444; margin-top: 4px; }
  .brand_rec_item.is_first img { border: 2px solid #F26F1F; }
  .brand_rec_item.is_first span { color: #F26F1F; font-weight: 700; }
  .brand_rec_item.is_first::after { content: "战略合作"; display: block; font-size: 10px;
                                     color: #fff; background: #F26F1F; border-radius: 4px;
                                     margin: 2px auto 0; width: fit-content; padding: 0 4px; }
}

@media (max-width: 480px) {
  .wrap_990 .w { padding: 0 6px; }
  .nav_toggle_btn { font-size: 20px; width: 38px; height: 34px; line-height: 34px; }
  .goodsItem, .lc { width: 100% !important; margin: 6px 0 !important; }
  .m_tab .m_ico { font-size: 17px; }
}