/* ============================================================
   移动端导航抽屉  nav-mobile.css
   建立时间：2026-11-03
   作用：修复 1000px 以下导航塌陷（每个菜单项占满一整行）
   回滚：删除本文件 + 移除 layout.php 中对应 <link> 即可
   ============================================================ */

.nav-toggle{display:none}
.nav-backdrop{display:none}
.nav-drawer-head,.nav-quick{display:none}

@media (max-width:1000px){

  /* ---------- 顶部：缩小 logo，右侧汉堡按钮 ---------- */
  .brand-row{
    min-height:auto !important;
    padding:12px 16px !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  .brand-row .site-logo{
    width:auto !important;height:auto !important;margin:0 !important;
    flex:0 1 auto;min-width:0;
  }
  .brand-row .site-logo img{
    width:min(58vw,236px) !important;height:auto !important;max-width:100%;
  }
  .brand-row .utility-nav{display:none !important}
  .brand-row .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;margin-left:auto;flex:0 0 46px;
    border:1px solid #dfe4ef;border-radius:10px;background:#fff;
    color:#1d2088;padding:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .brand-row .nav-toggle:active{background:#f3f5fb}
  .brand-row .nav-toggle svg{width:22px;height:22px;display:block}

  /* ---------- 抽屉本体：右侧滑出 ---------- */
  .main-nav.original-menu{
    position:fixed !important;
    top:0;right:0;bottom:0;left:auto !important;
    width:min(86vw,370px);
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    border-top:0 !important;
    background:#fff;
    z-index:1001;
    display:block !important;
    flex-wrap:nowrap !important;
    padding:0 0 30px !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    box-shadow:-12px 0 36px rgba(12,22,70,.18);
    transform:translateX(103%);
    visibility:hidden;
    transition:transform .28s cubic-bezier(.32,.72,.3,1),visibility .28s;
  }
  .main-nav.original-menu.is-open{
    transform:translateX(0);
    visibility:visible;
  }

  .nav-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:1px solid #eef1f7;
    position:sticky;top:0;background:#fff;z-index:6;
  }
  .nav-drawer-head strong{font-size:16px;color:#11184f;letter-spacing:.02em}
  .nav-close{
    width:36px;height:36px;border:0;border-radius:9px;background:#f3f5fb;
    color:#1d2088;font-size:24px;line-height:1;cursor:pointer;padding:0;
    display:flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-close:active{background:#e8ecf9}

  /* ---------- 快捷入口 ---------- */
  .nav-quick{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:14px 18px 2px;
  }
  .nav-quick a{
    display:block;padding:11px 10px;background:#f5f7fc;border-radius:8px;
    font-size:14px;color:#26325c;text-align:center;line-height:1.3;
  }
  .nav-quick a:active{background:#e9eefb}
  .nav-quick .nav-quick-wide{grid-column:1 / -1}

  /* ---------- 一级菜单：竖排单行 ---------- */
  .main-nav.original-menu > ul{
    display:block !important;
    max-width:none !important;
    margin:0 !important;
    padding:6px 0 0 !important;
    flex-wrap:nowrap !important;
  }
  .main-nav.original-menu > ul > li{
    position:relative;
    border-bottom:1px solid #f1f4fa;
  }
  .main-nav.original-menu > ul > li > a{
    display:block !important;
    position:relative;
    padding:15px 48px 15px 20px !important;
    font-size:16px !important;
    line-height:1.4 !important;
    color:#1b2450 !important;
    font-weight:600;
    white-space:normal !important;
  }
  .main-nav.original-menu > ul > li > a:active{background:#f6f8fd}

  /* 展开箭头：相对链接行定位，避免子菜单展开后跑位 */
  .main-nav.original-menu > ul > li.has-children > a::after{
    content:'';position:absolute;right:22px;top:50%;
    width:8px;height:8px;margin-top:-4px;
    border-right:2px solid #8a94ad;border-bottom:2px solid #8a94ad;
    transform:rotate(45deg);
    transition:transform .2s ease;
    z-index:2;
    pointer-events:none;
  }
  .main-nav.original-menu > ul > li.has-children.is-held-open > a::after{
    transform:rotate(-135deg);
  }

  /* ---------- 子菜单：抽屉内嵌竖向展开 ---------- */
  .main-nav.original-menu .mega-menu,
  .main-nav.original-menu .sub-menu{
    display:none !important;
    position:static !important;
    left:auto !important;top:auto !important;
    min-width:0 !important;
    box-shadow:none !important;
    border:0 !important;
    background:#f7f9fd !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:none !important;
  }
  .main-nav.original-menu li.has-children.is-held-open > .mega-menu,
  .main-nav.original-menu li.has-children.is-held-open > .sub-menu{
    display:block !important;
  }
  /* 触摸设备 :hover 会粘滞，强制以 is-held-open 为准 */
  .main-nav.original-menu li.has-children:hover > .mega-menu,
  .main-nav.original-menu li.has-children:hover > .sub-menu{
    display:none !important;
  }
  .main-nav.original-menu li.has-children.is-held-open:hover > .mega-menu,
  .main-nav.original-menu li.has-children.is-held-open:hover > .sub-menu{
    display:block !important;
  }
  .main-nav.original-menu .mega-menu > li,
  .main-nav.original-menu .sub-menu > li{
    border-top:1px solid #eaeef7;
  }
  .main-nav.original-menu .mega-menu a,
  .main-nav.original-menu .sub-menu a{
    display:block !important;
    padding:13px 20px 13px 34px !important;
    font-size:14.5px !important;
    line-height:1.45;
    color:#33415f !important;
    border-bottom:0 !important;
    white-space:normal !important;
  }
  .main-nav.original-menu .mega-menu a:active,
  .main-nav.original-menu .sub-menu a:active{background:#eef2fb}

  /* ---------- 搜索框 ---------- */
  .main-nav.original-menu .product-nav-search{
    display:flex !important;
    width:auto !important;max-width:none !important;min-width:0 !important;
    margin:18px 18px 0 !important;
    padding:0 !important;
    align-items:stretch;
  }
  .main-nav.original-menu .product-nav-search input{
    flex:1;min-width:0;
    padding:11px 12px !important;
    border:1px solid #dfe4ef;border-right:0;
    border-radius:9px 0 0 9px;
    font-size:14px;background:#fff;
  }
  .main-nav.original-menu .product-nav-search button{
    flex:0 0 auto;
    padding:0 18px !important;
    border:0;border-radius:0 9px 9px 0;
    background:#111c90;color:#fff;
    font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  }

  /* ---------- 遮罩 ---------- */
  .nav-backdrop{
    display:block !important;
    position:fixed;top:0;right:0;bottom:0;left:0;
    background:rgba(10,18,48,.46);
    z-index:1000;
    opacity:0;pointer-events:none;
    transition:opacity .26s ease;
  }
  .nav-backdrop.is-open{opacity:1;pointer-events:auto}
  body.nav-locked{overflow:hidden !important}

  /* ---------- 分类页侧边栏：折叠成可点开的筛选面板 ---------- */
  .collection-layout{gap:16px !important}
  .collection-sidebar{
    border:1px solid #e2e7f1 !important;
    border-radius:10px;
    background:#fff;
    padding:0 !important;
    overflow:hidden;
  }
  .collection-sidebar h3{
    margin:0 !important;
    padding:14px 18px !important;
    font-size:15px !important;
    line-height:1.4;
    color:#111a87;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:#f6f8fd;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .collection-sidebar h3::after{
    content:'';flex:0 0 auto;width:9px;height:9px;
    border-right:2px solid #6b7794;border-bottom:2px solid #6b7794;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease;
  }
  .collection-sidebar.is-open h3::after{transform:rotate(-135deg) translateY(-2px)}
  .collection-sidebar .collection-nav-tree{
    display:none !important;
    padding:10px 16px 16px !important;
    margin:0 !important;
  }
  .collection-sidebar.is-open .collection-nav-tree{display:block !important}

  /* 平板宽度下产品卡两列，避免单列过宽 */
  .collection-products .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }
}

@media (max-width:560px){
  .collection-products .product-grid{
    grid-template-columns:1fr !important;
  }

  /* 首页主视觉：小屏标题降字号，避免一行只放几个字 */
  .hero-copy h1{
    font-size:20px !important;
    margin-bottom:6px !important;
  }
  .hero-copy h2{
    font-size:30px !important;
    line-height:1.22 !important;
    margin-bottom:14px !important;
  }
  .hero-copy p{
    font-size:14.5px !important;
    line-height:1.72 !important;
  }
  .hero-overlay{
    min-height:auto !important;
    padding:26px 18px 30px !important;
  }
  .home-hero{min-height:auto !important}

  /* 详情正文表格：小屏固定列宽自动换行，避免右侧列被裁 */
  .product-detail-content table{
    display:table !important;
    width:100% !important;
    table-layout:fixed !important;
    min-width:0 !important;
  }
  .product-detail-content th,
  .product-detail-content td{
    min-width:0 !important;
    padding:8px 7px !important;
    font-size:12.5px !important;
    line-height:1.55 !important;
    white-space:normal !important;
    word-break:break-word;
  }
  .product-detail-content th:first-child,
  .product-detail-content td:first-child{width:32%}
}

/* 桌面端彻底隐藏抽屉专用元素 */
@media (min-width:1001px){
  .nav-drawer-head,.nav-quick,.nav-toggle,.nav-backdrop{display:none !important}
}

/* ---------- 顶部蓝条：窄屏只保留邮箱，避免被裁 ---------- */
@media (max-width:560px){
  .top-strip{
    height:auto !important;
    padding:7px 14px !important;
    justify-content:center !important;
    gap:0 !important;
    flex-wrap:nowrap !important;
  }
  .top-strip .follow-us-list,
  .top-strip .language-switcher{display:none !important}
  .top-strip .top-contact{
    width:100%;
    text-align:center;
    font-size:12.5px !important;
    line-height:1.4 !important;
    white-space:nowrap;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  .top-strip .top-contact span{white-space:nowrap}
}
