/* ============================================================
 * CN 站手机端优化 (mobile-opt.css)
 * 说明: 全部规则只在 <=767.98px 生效, 不影响桌面端.
 *       独立文件, 由 index.dwt(首页) 与 inc/head.tpl(其它页) 最后加载, 便于回滚/审阅.
 * 2026-08-12
 * ============================================================ */

@media (max-width: 767.98px) {

  /* ---------- A2. 压缩顶部头部(参考 EU 站), 目标 ~130px ----------
   * 原头部约 260px; 现: 顶栏(购物车+语言, 隐藏电话号码) + logo 与搜索同排 + 蓝色「Menu」按钮条. */
  .header-top { padding-top: 2px !important; padding-bottom: 2px !important; }
  /* 隐藏手机顶栏的电话号码(EU 手机端也不显示), 保留购物车 + 语言切换 */
  .hdr-phone-mobile { display: none !important; }

  .header-mdl { padding-top: 6px !important; padding-bottom: 6px !important; }
  /* logo 与搜索框同排, 省一行高度 */
  .header-mdl .hm-inner { display: flex !important; align-items: center !important; gap: 10px !important; }
  .header-mdl .header-logo { padding-bottom: 0 !important; flex: 0 0 auto !important; }
  .header-mdl .header-logo img { width: 132px !important; height: auto !important; }
  .header-form { margin-top: 0 !important; flex: 1 1 auto !important; display: flex !important; }
  .header-form .search-box { flex: 1 1 auto !important; min-width: 0 !important; }
  .header-form .search-box,
  .header-form button { height: 42px !important; }

  /* 蓝色菜单条 -> 「☰ Menu」按钮样式 */
  .headermenu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
  }
  .headermenu .headermenu-label { display: inline !important; }

  /* ---------- 手机菜单: 左侧滑入侧边栏(抽屉) ----------
   * 原为下拉推屏; 改为固定在左侧的抽屉 + 半透明遮罩, 参考 EU 站. */
  .navbarSupportedContentmenu {
    display: block !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important;
    width: 82% !important;
    max-width: 320px !important;
    background: #ffffff !important;   /* EU 风格白底 */
    transform: translateX(-100%) !important;
    transition: transform .28s ease !important;
    z-index: 2000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 24px !important;
    margin: 0 !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .3);
  }
  .navbarSupportedContentmenu.is-open { transform: translateX(0) !important; }

  /* 抽屉顶部 Logo(JS 注入, 参考 EU 站) */
  .drawer-logo {
    padding: 16px 20px 14px !important;
    border-bottom: 1px solid #eeeeee !important;
    background: #fafbfc !important;
  }
  .drawer-logo img {
    max-width: 150px !important;
    height: auto !important;
    display: block !important;
  }

  /* 关闭按钮(× , JS 注入) */
  .menu-close {
    position: absolute;
    top: 8px; right: 12px;
    width: 40px; height: 40px;
    line-height: 38px;
    padding: 0;
    font-size: 30px;
    color: #103741;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1;
  }

  /* ---------- EU 风格菜单列表: 白底 / 左对齐 / 左侧 > / 分隔线 / 可展开项右侧 + ---------- */
  .navbarSupportedContentmenu .navbar-nav { width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .navbarSupportedContentmenu .navbar-nav > li {
    border-bottom: 1px solid #eeeeee !important;
    position: relative !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .header-btm .navbarSupportedContentmenu .navbar-nav > li > .nav-link {
    color: #103741 !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: .2px !important;
    padding: 15px 44px 15px 38px !important;
    position: relative !important;
    display: block !important;
  }
  /* 手机端触摸后 :hover 会"粘住"变蓝, 抽屉里去掉这个悬停高亮(桌面 hover 不受影响) */
  .header-btm .navbarSupportedContentmenu .navbar-nav > li > .nav-link:hover {
    background: transparent !important;
    color: #103741 !important;
  }

  /* 左侧 > 箭头 */
  .navbarSupportedContentmenu .navbar-nav > li > .nav-link::before {
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    color: #b8c2c6;
    font-size: 14px;
  }
  /* 可展开项: 原下箭头隐藏, 右侧显示 + */
  .navbarSupportedContentmenu .navbar-nav > li > .dropdown-toggler .fa-angle-down,
  .navbarSupportedContentmenu .navbar-nav > li > .dropdown-toggler .fa-angle-right { display: none !important; }
  .navbarSupportedContentmenu .navbar-nav > li > .dropdown-toggler::after {
    content: "+";
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    color: #103741;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }
  /* New 2026: 做成普通菜单项(去掉蓝色按钮效果)
   * .hotitem 带桌面横向导航的 flex:1 1 0%, 在竖排抽屉里会缩窄, 需强制 align-self 拉伸. */
  .navbarSupportedContentmenu .navbar-nav > li.hotitem {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    animation: none !important;          /* 去掉 .hotitem 的 scaleDraw 缩放脉冲动画 */
    -webkit-animation: none !important;
    transform: none !important;
  }
  .header-btm .navbarSupportedContentmenu .navbar-nav > li.hotitem > .nav-link {
    color: #103741 !important;
    text-align: left !important;
    padding: 14px 44px 14px 38px !important;
  }

  /* Product 行右侧的展开箭头(+): 独立点击区, 只展开不跳转 */
  .drawer-sub-toggle {
    position: absolute;
    right: 0; top: 0;
    width: 58px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
  }
  .drawer-sub-toggle::after {
    content: "+";
    color: #103741;
    font-size: 22px;
    line-height: 1;
  }
  .navbar-nav > li.submenu-open .drawer-sub-toggle::after { content: "\2212"; }  /* 展开后显示 − */
  /* Warehouse / About Us 展开后, 右侧 + 变 − */
  .navbarSupportedContentmenu .navbar-nav > li.submenu-open > .dropdown-toggler::after { content: "\2212" !important; }
  /* .sub-menu 飞出菜单在桌面靠 opacity/visibility + 0.3s transition + 绝对定位实现;
   * 手机端全部清掉这些, 让顶级子菜单只靠 JS slideToggle 的高度动画(和 Product 完全一致, 才丝滑). */
  .navbarSupportedContentmenu .navbar-nav > li > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    transition: none !important;
    float: none !important;
    left: auto !important;
    top: auto !important;
  }
  /* 展开的子菜单: 浅灰底, 缩进 */
  .navbarSupportedContentmenu .navbar-nav .dropdown-menu {
    background: #f7f7f9 !important;
    border: 0 !important;
    padding: 4px 0 !important;
  }
  .navbarSupportedContentmenu .navbar-nav .dropdown-menu a {
    color: #333 !important;
    text-align: left !important;
    font-size: 15px !important;
  }

  /* 半透明遮罩(JS 注入)
   * 注意: <header> 有 z-index:999 形成层叠上下文, 抽屉困在其中;
   * 故遮罩放到 998(header 之下), 让整个 header 上下文(含抽屉)盖在遮罩之上=抽屉不被压暗. */
  .menu-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease;
    z-index: 998;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .menu-overlay { opacity: 1; visibility: visible; }

  /* ---------- A4. 正文基础字号 14px -> 15px ---------- */
  body { font-size: 15px !important; }

  /* ---------- 顶部 banner 放大: 去掉两侧 15px 留白铺满整宽 + 收掉下方 60px 空隙 ----------
   * banner 图为证书类(rpii/TUV, 768x322), 不能纵向裁切; 铺满整宽后更有存在感, 高度按原比例自然变大. */
  .container.slider [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container.slider .flexslider { margin-bottom: 16px !important; }

  /* ---------- A3. 表单控件字号 >=16px, 防止 iOS Safari 聚焦时自动放大整页 ----------
   * cn 站约 1.85 万 iPhone 访问, 输入框 <16px 会被强制缩放, 体验很差. */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="password"], input:not([type]),
  textarea, select, .search-box {
    font-size: 16px !important;
  }

  /* ---------- B1. 首页场景分类图标: 每行 2 个 ----------
   * 图标做大, 图内文字更清晰. */
  .offer-banners .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* ---------- 分类/列表页产品卡: 每行 1 个(不并排) ----------
   * 原 col-6 每行 2 个; 改成整行 1 个, 产品图更大、信息更清晰(参考 EU 站). */
  .list_grid_container > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ---------- A1. 右侧悬浮按钮瘦身, 减少对内容的遮挡 ----------
   * 原 FB/WhatsApp 各 50px + 返回顶部, 摞在右侧盖住产品图. 缩到 44px 并贴边. */
  .float-wa, .float-fb {
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
    right: 10px !important;
  }
  .float-wa .fa, .float-fb .fa { font-size: 24px !important; }
  /* 竖向依次: WhatsApp(132) -> Facebook(190) -> 返回顶部(248), 各 ~58px 间距不重叠 */
  .float-wa { bottom: 132px !important; }
  .float-fb { bottom: 190px !important; }
  a.scrollup {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    bottom: 248px !important;
    right: 12px !important;
  }

  /* ---------- B3/B4. 首页产品卡片去掉过高的固定高度, 收掉卡片下方大片空白 ----------
   * .item 原 min-height:450px, 手机上图片+标题远不到, 底部空一大截, 轮播还会露出白缝. */
  .popular-products .item,
  .products-slider .item,
  .products-slider4 .item,
  .warehouse-products-section .item {
    min-height: 0 !important;
  }

  /* ---------- B5. 客户评价区收掉多余上下留白 ---------- */
  .review-section { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* ---------- C1. 分类页产品卡收掉标题下多余的内边距 ----------
   * 卡片 .product-box 底部原 padding 30px, 手机上偏空, 收到 14px. */
  .product-box.common-cart-box { padding-bottom: 14px !important; }

  /* ---------- D1. 产品详情页手机吸底询盘条 ----------
   * 原页面只在规格下方出现一次 Get Quote/WhatsApp, 往下 4000px 无 CTA.
   * 吸底条常驻, 复用 #like 既有逻辑. */
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    gap: 8px;
    /* 右侧留出 ~132px 给 tawk 客服悬浮按钮, 避免遮住 WhatsApp */
    padding: 8px 132px calc(8px + env(safe-area-inset-bottom, 0px)) 10px;
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
  }
  .mobile-sticky-cta a {
    flex: 1 1 0;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff !important;
    border-radius: 8px;
    text-decoration: none;
  }
  .mobile-sticky-cta .msc-quote { background: #eb3e32; }
  .mobile-sticky-cta .msc-wa { background: #03a84e; }
  /* 给页面底部留出吸底条的高度, 避免遮住页脚最后一行 */
  body.has-sticky-cta { padding-bottom: 66px; }
}

/* 桌面端隐藏手机吸底条 */
@media (min-width: 768px) {
  .mobile-sticky-cta { display: none !important; }
}

/* ============================================================
 * 产品页(/product)分类侧栏: 手机/平板(<992, 侧栏堆叠在底部)
 * 改成底部单个下拉选择器(参考图二): 按钮 + 展开列表 + 选中打勾
 * ============================================================ */
@media (max-width: 991.98px) {
  /* 隐藏原来的展开分类树, 用下拉选择器替代(仅在产品列表页, 由 JS 加 .has-cat-dropdown 标记) */
  .has-cat-dropdown .shop-sidebar .side-quantity-box .quantity-box-detail { display: none !important; }
  .has-cat-dropdown .shop-inner-section .col-xl-3.order-lg-first {
    order: -1 !important;          /* 移到产品列表上方 */
    border-right: 0 !important;
    margin-bottom: 14px !important;
  }

  .cat-dropdown { position: relative; margin: 8px 0; }
  .cat-dd-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #ffffff;
    border: 1.5px solid #103741;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #103741;
    cursor: pointer;
  }
  .cat-dd-btn i { transition: transform .2s ease; }
  .cat-dropdown.open .cat-dd-btn i { transform: rotate(180deg); }

  /* 列表向下弹出(在产品列表上方) */
  .cat-dd-panel {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 6px);
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 50;
    padding: 6px 0;
  }
  .cat-dropdown.open .cat-dd-panel { display: block; }
  .cat-dd-opt {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px !important;
    color: #103741 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border: 0 !important;
  }
  .cat-dd-opt:hover { background: #f5f7f8 !important; }
  .cat-dd-opt.current { background: #eef4f6 !important; font-weight: 600 !important; }
  .cat-dd-opt.current i { color: #e0a63b; }  /* 金色对勾, 同图二 */
}