/* ============================================================
 * g 站(ginflatables.com)手机端优化 (mobile-opt.css)
 * 说明: 规则只在 <=991.98px(g 主题手机断点) 生效, 不影响桌面端.
 *       独立文件, 在 theme.css 之后加载, 便于回滚/审阅.
 * 参照 cn 站的优化, 按 g 主题结构重新实现.
 * 2026-08-13
 * ============================================================ */

@media (max-width: 991.98px) {

  /* ---------- 1. 头部压缩 ----------
   * 黑色次要链接条(Quote List | Quality Control | ...): 缩小字号/间距, 单行更紧凑 */
  .header-nav { padding-top: 4px !important; padding-bottom: 4px !important; }
  .header-nav .userinfo-inner { padding: 0 !important; }
  ul.userinfo, .header-nav .userinfo {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-nav .userinfo li { padding: 0 6px !important; margin: 0 !important; line-height: 1.4 !important; }
  .header-nav .userinfo li a { font-size: 12px !important; }

  /* logo 区收紧上下留白(logo 列原有 20px 上下内边距) */
  .header-top { padding-top: 6px !important; padding-bottom: 6px !important; }
  #desktop_logo { padding-top: 4px !important; padding-bottom: 4px !important; }
  .header-top .logo { max-height: 46px !important; width: auto !important; }

  /* ---------- 2. Our Expos(文章内)卡片: 一行一个 ----------
   * 限定 .sdsarticle-des 内的卡片网格, 不影响产品列表页 */
  .sdsarticle-des .list_grid_container > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ---------- 3. 产品页分类手风琴下拉(JS 注入 .gcat-dropdown) ----------
   * 顶级分类 + 点箭头展开子分类, 参考 cn */
  .gcat-dropdown { position: relative; margin: 12px 0; }
  .gcat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #ffffff;
    border: 1.5px solid #333333;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    cursor: pointer;
  }
  .gcat-btn i { transition: transform .2s ease; }
  .gcat-dropdown.open .gcat-btn i { transform: rotate(180deg); }
  .gcat-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: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 50;
    padding: 6px 0;
  }
  /* 面板显隐由 JS 的 slideToggle 控制(平滑展开), .open 仅用于按钮箭头旋转 */
  .gcat-item { position: relative; border-bottom: 1px solid #eee; }
  .gcat-cat {
    display: block;
    padding: 13px 48px 13px 18px;
    color: #222 !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }
  .gcat-toggle {
    position: absolute;
    right: 0; top: 0;
    width: 50px; height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .gcat-toggle::after { content: "\f107"; font-family: FontAwesome; color: #333333; font-size: 16px; }
  .gcat-item.expanded .gcat-toggle::after { content: "\f106"; }
  /* 显隐由 JS 的 slideToggle 控制(平滑展开), 这里只给初始态与外观 */
  .gcat-subs { display: none; background: #f5f7f6; padding: 4px 0; }
  .gcat-sub {
    display: block;
    padding: 10px 18px 10px 34px;
    color: #444 !important;
    font-size: 14px;
    text-decoration: none;
  }

  /* ---------- 4. 手机菜单美化: 顶部 Logo + 分隔线 ---------- */
  #_mobile_top_menu .gmenu-logo {
    padding: 16px 18px 14px;
    border-bottom: 1px solid #eee;
    background: #fafbfc;
    text-align: center;
  }
  #_mobile_top_menu .gmenu-logo img { max-width: 150px; height: auto; display: inline-block; }

  /* 菜单项宽松化(参考 cn 抽屉布局): 行更高、左缩进、字号加大、分隔线到边 */
  #mobile_top_menu_wrapper #_mobile_top_menu { padding: 0 !important; }
  #_mobile_top_menu > ul.top-menu > li { border-bottom: 1px solid #eee; position: relative; }
  #_mobile_top_menu > ul.top-menu > li > a[data-depth="0"] {
    display: block !important;
    padding: 16px 50px 16px 22px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    color: #333 !important;
  }
  /* 可展开项右侧箭头: material-icons 字体可能缺失, 改用 FontAwesome 下箭头 */
  #_mobile_top_menu > ul.top-menu > li .navbar-toggler.collapse-icons {
    /* 锚定到"表头行"顶部, 不用 top:50%: 展开时该 li 会把子菜单包进来变很高,
     * 50% 会把箭头带到整块垂直中点(飘到某个子项上, 还和它的箭头叠成菱形 ◇) */
    top: 14px !important;
    bottom: auto !important;
    transform: none !important;
    left: auto !important;
    right: 18px !important;
    width: auto !important;
    z-index: 5 !important;  /* 高于 a[data-depth=0] 的白底 z-index:1, 否则箭头被盖住 */
  }
  #_mobile_top_menu > ul.top-menu > li .navbar-toggler .material-icons { display: none !important; }
  #_mobile_top_menu > ul.top-menu > li .navbar-toggler.collapse-icons::after {
    content: "\f107";
    font-family: FontAwesome;
    color: #888888;
    font-size: 16px;
  }
  #_mobile_top_menu > ul.top-menu > li .navbar-toggler.collapse-icons[aria-expanded="true"]::after { content: "\f106"; }
  /* 子菜单项也留出左缩进与行距 */
  #_mobile_top_menu > ul.top-menu > li .sub-menu a {
    padding: 12px 20px 12px 34px !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
  }

  /* ---------- 5. 手机端隐藏网格/列表视图切换 ----------
   * 手机上产品本就一行一个, grid/list 切换意义不大且占位, 桌面端保留 */
  .layout-options { display: none !important; }

}