/* mobile.css — MOHE responsive overlay, PC unaffected */

/* ============ Tablet & below ============ */
@media (max-width: 1024px){
  .topbar-in,.foot-grid,.cap-cols,.essay-in,.fact-in,.l1-hero-in,.cats-grid,
  .spotlight-in,.cross-grid,.block-grid,.fgrid,.j-grid{padding-left:18px;padding-right:18px}
  .stats,.trust-in,.stat-grid{padding:32px 18px}
  .cats-grid{grid-template-columns:repeat(3,1fr) !important}
  .block-grid,.pgrid,.j-grid{grid-template-columns:repeat(3,1fr) !important;gap:18px !important}
  .fgrid{grid-template-columns:repeat(2,1fr) !important;gap:18px}
  .l1-hero h1,.hub-head h1{font-size:38px !important;line-height:1.05}
  .cap-cols{grid-template-columns:repeat(3,1fr) !important;gap:18px}
}

/* ============ Phone ============ */
@media (max-width: 768px){
  :root{font-size:15px}
  body{overflow-x:hidden}

  /* TOPBAR — 汉堡菜单 */
  .topbar{padding:0 !important}
  .topbar-in{display:grid !important;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:14px 16px !important;padding-top:max(14px, env(safe-area-inset-top)) !important}
  .topbar .wordmark{font-size:18px !important;letter-spacing:1px !important}
  .topnav{display:none !important;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-top:1px solid var(--rule);flex-direction:column;align-items:stretch;padding:8px 0;z-index:40;box-shadow:0 8px 20px rgba(0,0,0,.06)}
  .topbar.open .topnav,.topnav.open{display:flex !important}
  .topnav a{padding:14px 20px;border-bottom:1px solid var(--rule);font-size:14px !important;text-align:left;min-height:44px;display:flex;align-items:center}
  .topnav a:last-child{border-bottom:0}
  /* 汉堡按钮 (用 ::after CSS only) */
  .topbar-in::after{content:"☰";font-size:22px;line-height:1;padding:8px 12px;cursor:pointer;color:var(--ink);display:flex;align-items:center;grid-column:3;border-left:1px solid var(--rule)}
  /* lang + currency 收成 abbr */
  .lang{position:relative}
  .lang-cur{padding:6px 10px !important;font-size:11px !important;min-height:32px !important}
  .lang-menu{right:0;left:auto;min-width:130px}
  .meta-strip{display:none !important}  /* 顶部那条城市/FOB belt 太挤,隐藏 */

  /* HERO L1 (gender) */
  .l1-hero-in{grid-template-columns:1fr !important;gap:24px !important;padding:24px 16px !important}
  .l1-hero h1{font-size:30px !important;line-height:1.1 !important}
  .l1-hero .eb,.l1-hero .hero-eb,.hub-head .eb{font-size:10px !important;letter-spacing:2px !important}
  .l1-hero-img img{max-height:340px;object-fit:cover;width:100%}
  .l1-hero .ctas{flex-wrap:wrap;gap:10px}
  .l1-hero .btn-primary,.l1-hero .btn-wa{padding:14px 22px !important;font-size:11px !important;min-height:44px !important;display:flex;align-items:center;justify-content:center}

  /* Stats */
  .stat-grid{grid-template-columns:repeat(2,1fr) !important;gap:16px}
  .stats{grid-template-columns:repeat(2,1fr) !important;padding:24px 16px !important}
  .stat-n{font-size:36px !important}
  .stat-l{font-size:11px !important}

  /* HUB header (L2 + factory + categories etc.) */
  .hub-head{padding:24px 16px !important}
  .hub-head h1{font-size:32px !important;line-height:1.08 !important}
  .hub-head .lede{font-size:15px !important}
  .meta-bar{flex-wrap:wrap;gap:10px}
  .meta-bar span{font-size:12px}

  /* PRODUCT GRID — 4列 → 2列 */
  .block-grid,.pgrid,.cats-grid,.j-grid,.cross-grid{grid-template-columns:repeat(2,1fr) !important;gap:14px !important;padding:0 16px}
  .pgrid-card .meta,.cats .cat .body{padding:10px !important}
  .pgrid-card .ttl{font-size:13px !important;line-height:1.3}
  .pgrid-card .price{font-size:14px !important}

  /* Factories grid 2 -> 1 */
  .fgrid{grid-template-columns:1fr !important;padding:0 16px}
  .fgrid-card{padding:18px !important}

  /* Capability columns 3 -> 1 */
  .cap-cols{grid-template-columns:1fr !important;gap:24px !important;padding:0 16px}
  .cap-col .pic img{width:100%;height:auto;max-height:320px;object-fit:cover}

  /* Essay 2col -> 1col */
  .essay-in,.fact-in,.spotlight-in{grid-template-columns:1fr !important;gap:24px !important;padding:24px 16px !important}
  .essay-pic img,.fact-pic img{width:100%;height:auto;max-height:340px}
  .essay-body-wrap h2,.fact-body-wrap h2.sec-h{font-size:28px !important;line-height:1.1}

  /* Footer — 5 col → 1 col */
  .foot-grid{grid-template-columns:1fr !important;gap:32px !important;padding:32px 18px !important}
  .foot-keywords{padding:0 18px;font-size:11px;line-height:1.5}
  .foot-bottom{flex-direction:column;gap:8px;text-align:center;padding:24px 18px}

  /* PRODUCT DETAIL PAGE */
  .pdetail{display:flex !important;flex-direction:column !important;gap:24px !important;padding:0 16px !important}
  .pd-gallery,.pd-info{width:100% !important;max-width:100% !important}
  .pd-main-img img{width:100%;height:auto}
  .pd-info h1{font-size:24px !important;line-height:1.2 !important}
  .price-row{flex-direction:column;gap:14px !important}
  .pr{width:100%;border-right:0 !important;border-bottom:1px solid var(--rule);padding-bottom:10px}
  .pr:last-child{border-bottom:0}
  .cta-row{flex-direction:column;gap:10px}
  .cta-row a{width:100%;text-align:center;padding:14px !important;min-height:46px;display:flex;align-items:center;justify-content:center}
  .opt-chips{gap:6px}
  .opt-chip{min-width:42px;min-height:36px;padding:8px 10px !important;font-size:12px}

  /* FILTER BAR — editorial 移动适配 */
  .filter-bar.editorial{margin:16px auto !important;padding:0 16px !important}
  .filter-bar.editorial .filter-form{padding:14px 0 !important;gap:10px !important}
  .filter-bar.editorial .filter-row.filter-search{grid-template-columns:1fr !important}
  .filter-bar.editorial .filter-btn{width:100%;padding:12px !important}
  .filter-bar.editorial .filter-row.filter-facets{flex-direction:column;gap:10px !important}
  .filter-bar.editorial .facet{min-width:0 !important;width:100%}
  .filter-bar.editorial .chip{padding:8px 13px !important;font-size:13px !important;min-height:36px;display:inline-flex;align-items:center}

  /* RFQ form */
  form#rfq input,form#rfq textarea{padding:14px !important;font-size:15px !important}
  form#rfq div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  form#rfq button{width:100% !important;padding:16px !important}

  /* Crumb */
  .crumb{padding:14px 16px;font-size:11px;flex-wrap:wrap}

  /* WhatsApp 浮窗 */
  .wa-float{bottom:max(14px, env(safe-area-inset-bottom)) !important;right:14px !important;padding:12px !important}
  .wa-float .wa-label{display:none}

  /* Tables (size chart, HS code) */
  table{font-size:12px !important;word-break:break-word}
  table th,table td{padding:8px !important}

  /* Specs at glance: 4 col → 2 col */
  .specs-glance > div{grid-template-columns:repeat(2,1fr) !important;gap:18px !important}
  .specs-glance{margin:24px 16px !important;padding:20px !important}
  .specs-glance b{font-size:18px !important}

  /* Search results 4 col → 2 col */
  /* trending grid 6 col -> 3 col */
  .trend-grid{grid-template-columns:repeat(3,1fr) !important;gap:8px !important}

  /* Trust 6 → 3 col */
  .trust-in{grid-template-columns:repeat(3,1fr) !important;padding:24px 16px}
  .trust-item .ic{font-size:18px !important}
  .trust-item .lbl{font-size:10px !important}

  /* Coming/CTA */
  .coming{padding:48px 18px !important}
  .coming h2{font-size:28px !important;line-height:1.15}

  /* Hide some heavy decoration on mobile */
  .hero-rule{display:none}

  /* Better tap targets */
  a,button{-webkit-tap-highlight-color:rgba(125,38,38,.1)}
}

/* Small phone (<400) */
@media (max-width: 400px){
  .block-grid,.pgrid,.cats-grid,.j-grid,.cross-grid{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .l1-hero h1{font-size:26px !important}
  .hub-head h1{font-size:26px !important}
  .pgrid-card .ttl{font-size:12px !important}
}

/* Hamburger toggle (CSS-only, no JS needed if input checkbox added; but pure JS toggle on .topbar-in ::after click is added in JS below) */

/* ============ Mobile height overrides (避免写死 580/680/560/520px 撑爆首屏)============ */
@media (max-width: 768px){
  .l1-hero-in,.hero-in{min-height:auto !important}
  .essay-pic,.fact-pic{min-height:auto !important;border-right:0 !important;border-bottom:1px solid var(--rule)}
  .essay-pic img,.fact-pic img,.l1-hero-img img,.hero-img img{max-height:340px !important;width:100% !important;object-fit:cover !important}

  /* 字体加载完成前减少 layout shift */
  body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}

  /* 顶部 wordmark + 汉堡之间留更多空间 */
  .topbar-in .wordmark{font-size:16px !important;letter-spacing:0.5px !important}

  /* 货币切换菜单太靠右,iOS 安全区适配 */
  .lang .lang-menu{right:0;left:auto;min-width:160px !important;max-width:80vw}

  /* RTL ar 站特殊处理 */
  html[dir="rtl"] .topbar-in::after{border-left:0;border-right:1px solid var(--rule)}
  html[dir="rtl"] .topnav{text-align:right}

  /* 防止图片溢出容器 */
  img{max-width:100%;height:auto}
}

/* ============ Print-friendly (suppress nav/wa)============ */
@media print{
  .topbar,.wa-float,.foot-keywords,.lang,.filter-bar{display:none !important}
  body{background:white !important;color:black !important}
}