/* ============================================================
   移动端 WAP 专属样式 (手机 ≤767px, 桌面零加载零回归)
   香槟金主题, 移动原生组件: 底部tab/全屏抽屉/触控44px/卡片化表格
   ============================================================ */

/* 桌面先关移动专属控件(否则裸显) */
.m-tabbar, .m-nav, .nav-burger, .f-toggle, .f-backdrop, .f-close, .pd-sticky { display: none; }

@media (max-width: 767px) {
  :root {
    color-scheme: light;  /* 深色模式强制浅色 */
    --tap: 44px; --tap-sm: 40px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --tabbar-h: 56px;
    -webkit-tap-highlight-color: transparent;
  }

  /* 防错基线 */
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); }
  a:active, button:active { opacity: .82; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

  /* ===== 移动端排版系统 ===== */
  h1 { font-size: 26px; line-height: 1.3; }
  h2 { font-size: 21px; line-height: 1.35; }
  h3 { font-size: 17px; }
  p { font-size: 15px; line-height: 1.7; }
  .section { padding: 36px 0; }
  .section h2 { font-size: 23px; }
  .section .sub { font-size: 13px; }

  /* 移动端去掉 WhatsApp 浮窗(抽屉+Quote tab 已有入口, 避免底部臃肿) */
  .wa-float { display: none !important; }

  /* ===== 顶部公告条精简 ===== */
  .topbar { font-size: 11px; padding: 6px 10px; line-height: 1.5; }

  /* ===== Header: 汉堡 + 隐藏桌面导航 ===== */
  header.site { position: sticky; top: 0; backdrop-filter: none; background: var(--paper); }
  .head { height: 56px; gap: 6px; }
  nav.main { display: none; }
  .brand { font-size: 18px; }
  .brand .mark { display: none; }
  .langsel { display: none; }  /* 语言切换移到抽屉 */
  .nav-burger { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); background: none; border: 0; cursor: pointer; }

  /* ===== D1 全屏抽屉菜单 ===== */
  .m-nav { position: fixed; inset: 0; z-index: 200; background: var(--paper);
    min-height: 100vh; min-height: 100dvh; display: none; flex-direction: column; overflow-y: auto; }
  .m-nav.open { display: flex; }
  .m-nav-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center;
    padding: calc(var(--safe-t) + 10px) 16px 10px; border-bottom: 1px solid var(--line); background: var(--paper); }
  .m-nav-logo { font-family: var(--serif); font-weight: 700; font-size: 19px; }
  .m-nav-logo em { color: var(--gold); font-style: normal; }
  .m-nav-close { width: var(--tap); height: var(--tap); font-size: 26px; background: none; border: 0; cursor: pointer; }
  .m-nav-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); padding: 18px 20px 6px; }
  .m-nav a { display: flex; align-items: center; min-height: 48px; padding: 12px 20px; font-size: 15px; font-weight: 600; color: var(--ink); border-inline-start: 3px solid transparent; }
  .m-nav a:active { background: var(--gold-soft); }
  .m-nav-foot { margin-top: auto; padding: 16px; padding-bottom: calc(var(--safe-b) + 16px); border-top: 1px solid var(--line); display: flex; gap: 10px; }
  .m-nav-foot a { flex: 1; justify-content: center; border: 1px solid var(--line); border-radius: 10px; }
  .m-nav-foot a.m-nav-quote { background: var(--ink); color: #fff; border-color: var(--ink); }

  /* ===== D2 底部 tab 栏 ===== */
  .m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--paper); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
  .m-tabbar .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--tabbar-h);
    font-size: 10px; color: var(--muted); gap: 3px; position: relative; }
  .m-tabbar .tab svg { width: 22px; height: 22px; }
  .m-tabbar .tab.on { color: var(--gold-deep); font-weight: 700; }
  .m-tabbar .tab-quote { background: var(--ink); color: #fff; }
  .m-tabbar .tab-quote.on { color: #e6c37a; }
  .m-tabbar .cart-count { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 16px; height: 16px;
    border-radius: 8px; background: var(--gold); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

  /* ===== 布局降列 ===== */
  .container { padding: 0 14px; }
  .section { padding: 32px 0; }
  /* 强制覆盖内联固定列(4列/5列/6列 → 2列) */
  [style*="repeat(3,1fr)"], [style*="repeat(4,1fr)"], [style*="repeat(5,1fr)"], [style*="repeat(6,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  /* 内联分栏(1.05fr/1.25fr 等) → 单列 */
  [style*="1.05fr"], [style*="1.25fr"], [style*="1.2fr"], [style*="1.1fr"] { grid-template-columns: 1fr !important; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card .name { font-size: 12px; min-height: 34px; }
  .card .price { font-size: 15px; }
  .h-scroll { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .h-scroll a { flex: 0 0 44vw; scroll-snap-align: start; }
  .h-scroll .cap .n { font-size: 12.5px; }
  .big-cats { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .big-cat { flex: 0 0 38vw; scroll-snap-align: start; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 18px 12px; }
  .stat .n { font-size: 26px; }
  .pgrid { grid-template-columns: 1fr; gap: 24px; }
  .trust-split { grid-template-columns: 1fr; gap: 24px; }
  .trust-points { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  footer .f-main { grid-template-columns: 1fr 1fr; gap: 24px; padding: 40px 0 32px; }
  footer .f-brand { grid-column: 1 / -1; }
  footer .f-bottom { justify-content: center; text-align: center; }

  /* ===== 触控扩容 ===== */
  .cta, .inquiry, .catbar a, .filter-row a, .dd-menu a, .pagination a, .langsel {
    min-height: var(--tap-sm); display: inline-flex; align-items: center; justify-content: center; }
  input, textarea, select { font-size: 16px; }

  /* ===== 产品页单列 ===== */
  .spec { padding: 20px; }
  .spec h1 { font-size: 21px; }
  .gallery { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .gallery .main { grid-column: 1 / -1; aspect-ratio: 1/1; }
  .gallery > img { aspect-ratio: 1/1; }
  .spec table { font-size: 13px; }
  .spec .price { font-size: 26px; }
  .moq-note { padding: 11px 13px; }
  .compliance .badge { font-size: 11px; padding: 6px 11px; }

  /* ===== D3 购物车表格卡片化 ===== */
  .cart-table, .cart-table tbody { display: block; }
  .cart-table thead { display: none; }
  .cart-table tr { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; position: relative; }
  .cart-table td { display: block; width: 100%; border: 0; padding: 6px 0; text-align: start; }
  .cart-table td[data-label] { display: flex; justify-content: space-between; }
  .cart-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; }

  /* ===== 会员横向 tab ===== */
  .ac-nav { flex-direction: row; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; }

  /* ===== 品牌宣言(One material)移动端 ===== */
  .editorial { padding: 56px 0; text-align: left; }
  .editorial > div { grid-template-columns: 1fr !important; gap: 20px !important; }
  .editorial .lead { font-size: 11px; letter-spacing: 2px; margin-bottom: 10px; }
  .editorial .title { font-size: 28px; line-height: 1.3; margin-bottom: 0; }
  .editorial .body { font-size: 15px; }
  .editorial .body + a { margin-top: 16px; }

  /* ===== 内容页 ===== */
  .prose h1 { font-size: 26px; }
  .prose h2 { font-size: 20px; }
  .editorial { padding: 64px 0; }
  .editorial .title { font-size: 32px; }

  /* ===== 筛选抽屉(bottom sheet) ===== */
  .f-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    min-height: var(--tap); margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-weight: 600; font-size: 14px; }
  .f-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: var(--paper);
    max-height: 85vh; max-height: 85dvh; overflow-y: auto; border-radius: 14px 14px 0 0;
    padding: 18px 16px calc(var(--safe-b) + 18px); transform: translateY(100%); transition: transform .25s ease;
    box-shadow: 0 -12px 40px rgba(28,28,26,.18); }
  .f-panel.open { transform: none; }
  .f-backdrop { display: none; position: fixed; inset: 0; z-index: 110; background: rgba(28,28,26,.45); }
  .f-backdrop.show { display: block; }
  .f-head { position: relative; margin-bottom: 14px; padding-inline-end: var(--tap); font-family: var(--serif); font-size: 18px; font-weight: 600; }
  .f-close { display: block; position: absolute; inset-inline-end: 0; top: -4px; width: var(--tap); height: var(--tap); font-size: 24px; background: none; border: 0; cursor: pointer; }
  .filter-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 0; }
  .filter-name { min-width: auto; }

  /* ===== D8 产品页 sticky 加购栏 ===== */
  .pd-sticky { display: flex; align-items: center; gap: 8px; position: fixed; left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + var(--safe-b)); z-index: 70; background: var(--paper);
    border-top: 1px solid var(--line); padding: 10px 12px; }
  body.pd-page { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 64px); }
  .pd-sticky-price { font-weight: 800; color: var(--gold-deep); font-size: 16px; white-space: nowrap; }
  .pd-sticky-price i { font-style: normal; font-size: 11px; color: var(--muted); }
  .stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; flex: none; }
  .stepper button { width: 36px; height: 40px; font-size: 20px; background: none; border: 0; cursor: pointer; }
  .stepper input { width: 40px; height: 40px; text-align: center; border: 0; font-size: 16px; }
  .pd-sticky-add, .pd-sticky-buy { flex: 1; min-height: 40px; border-radius: 8px; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; }
  .pd-sticky-add { background: var(--gold); color: #fff; }
  .pd-sticky-buy { background: var(--ink); color: #fff; }

  /* ===== D10 横滑画廊 ===== */
  .thumbs-scroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .thumbs-scroll > * { flex: 0 0 auto; scroll-snap-align: start; }

  /* ===== P3 会员/内容 ===== */
  .account-actions, .ac-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .prose table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .prose img { width: 100%; height: auto; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero { min-height: auto; padding: 56px 0 48px; }
  .editorial .title { font-size: 30px; }
  .oem-banner { padding: 32px 22px; }

  /* ===== 细节打磨 ===== */
  /* 首页内联 4 列 grid 降 2 列(信任区/数据条等) */
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  div[style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  .hero .cta { padding: 14px 26px; font-size: 14px; }
  .hero .tags { margin-bottom: 28px; }
  .m-tabbar { box-shadow: 0 -2px 10px rgba(28,28,26,.04); }
  .m-tabbar .tab { gap: 2px; }
  .m-tabbar .tab span { font-size: 10px; line-height: 1.2; }
  .m-tabbar .tab-quote svg { color: #e6c37a; }
  .card .img { border-radius: 10px; }
  .card .body { padding: 10px 12px 12px; }
  .card .name { font-size: 12.5px; line-height: 1.4; }
  .card .price { margin-top: 6px; }
  .badge { font-size: 9.5px; padding: 3px 7px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: 2px; margin-bottom: 14px; }
  .hero p { font-size: 14px; }
  .hero .tags { gap: 6px; }
  .chip { font-size: 11px; padding: 6px 12px; }
  .head { gap: 4px; }
  .h-ico { width: 38px; height: 38px; }
  .m-nav-head { border-bottom: 1px solid var(--line); }
  .m-nav a { font-size: 15px; padding: 13px 20px; }
  .section .head-row { margin-bottom: 18px; }
  .section h2 { font-size: 24px; }
  .head-row .more { font-size: 13px; }
  .mat-row { margin: 20px 0 12px; }
  .mat-row h3 { font-size: 19px; }
  .spec .compliance .badge { font-size: 11px; padding: 6px 11px; }
  .moq-note { font-size: 12.5px; }
  .faq summary { font-size: 15px; padding: 15px 4px; }
  .f-panel .filter-row a { padding: 8px 14px; font-size: 13px; }

  /* ===== RTL 适配 ===== */
  [dir="rtl"] .m-nav a { border-inline-start: 0; border-inline-end: 3px solid transparent; }
  [dir="rtl"] .faq-q { padding: 18px 0 10px 28px; }
  [dir="rtl"] .caret { transform: scaleX(-1); }
}