/* ============================================================
   mobile-native.css — 手机端原生化呈现层（2026-10-29）
   原则：只改呈现（版式/密度/间距/交互），不删改任何文案、图片与链接
   仅在 <=860px 生效，桌面端完全不受影响
   ============================================================ */

@media (max-width: 860px) {
  :root {
    --mn-pad: 16px;
    --mn-gap: 10px;
  }

  /* ---------- 全局排版与间距 ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: 15px;
    line-height: 1.65;
  }
  h1, .h1 { font-size: 26px !important; line-height: 1.25; }
  h2, .h2, .section__title { font-size: 20px !important; line-height: 1.3; }
  h3, .h3 { font-size: 17px !important; line-height: 1.35; }
  p, li { font-size: 15px; }

  .container,
  .section,
  .wrap,
  .geo-wrap,
  .hub-wrap {
    padding-left: var(--mn-pad) !important;
    padding-right: var(--mn-pad) !important;
  }
  .section { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* ---------- 首屏区块：不再强占整屏 ---------- */
  /* 首页视频 hero：保留满屏感（原 100vh 太高，收到 88vh），不可塌成 auto */
  .hero { min-height: 88vh !important; padding: 80px var(--mn-pad) 0 !important; }
  /* 标题：桌面 128px/0.9 行高，手机 56px 挤在 393 宽会行间重叠，单独调 */
  .hero__title { font-size: 40px !important; line-height: 1.06 !important; letter-spacing: 0 !important; margin-bottom: 14px !important; }
  .hero__meta { font-size: 11px !important; margin-bottom: 10px !important; }
  .hero__sub { font-size: 14px !important; line-height: 1.6 !important; max-width: 100% !important; padding: 0 4px; }
  .hero__bottom-bar { position: absolute !important; left: 0; right: 0; bottom: 0; }
  .hero__bottom-bar-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .hero__bottom-item { padding: 10px 10px 12px !important; }
  .hero__bottom-icon { font-size: 11px !important; }
  .hero__bottom-title { font-size: 11px !important; letter-spacing: .06em !important; }
  .hero__bottom-desc { font-size: 10.5px !important; line-height: 1.35 !important; }
  .hero__lede, .hero__sub, .hero__desc { font-size: 15px !important; max-width: 100% !important; }
  .ph-hero { padding: 18px 14px !important; border-radius: 12px !important; }
  .ph-hero__eyebrow { font-size: 12px !important; margin-bottom: 6px !important; }
  .ph-hero h1 { font-size: 24px !important; line-height: 1.2; }
  .ph-hero__sub {
    font-size: 13px !important;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ph-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 12px 0 !important; }
  .ph-hero__stat { padding: 8px 10px !important; font-size: 13px !important; }
  .ph-hero__cta { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ph-hero__btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  /* ---------- 菜单下拉 / 大菜单：彻底归位 ----------
     多个页面 CSS（DOLUXE / fabrics / craftsmanship / design-ability）都带有
     :hover / :focus-within 的 translateX(-50%)，手机端点按展开时链接获焦会触发，
     把面板左移一半导致左半列被裁掉（看着像点了没反应）。本文件最后加载，强制归位。 */
  .nav__mega,
  .nav__dropdown,
  .nav__item:hover .nav__dropdown,
  .nav__item:focus-within .nav__dropdown,
  .nav__item--mega:hover .nav__mega,
  .nav__item--mega:focus-within .nav__mega {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .mega__inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; }
  .mega__col .mega__cat, .mega__list li a { padding: 12px 14px !important; font-size: 14px !important; }
  .mega__all a { padding: 12px 14px !important; }

  /* ---------- 分类页：产品双列紧凑卡 ---------- */
  .tc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mn-gap) !important;
  }
  .tc__prod { border-radius: 10px !important; }
  .tc__prod-img { aspect-ratio: 1 / 1; overflow: hidden; }
  .tc__prod-img img { width: 100%; height: 100%; object-fit: cover; }
  /* 原图是 1500x2000（3:4 竖图），装进 4:3 横向框时若居中裁剪会把模特头部裁掉。
     锚点固定到顶部：优先保留头部与上半身，裁掉的是腿部。 */
  .tc__prod-img img { object-position: center top; }
  .tc__prod-body { padding: 8px 10px 12px !important; }
  .tc__prod-title { font-size: 14px !important; line-height: 1.3; margin: 0 0 4px !important; }
  .tc__prod-desc {
    font-size: 12px !important;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---------- 分类页顶部重复的分类列表：手机端隐藏 ----------
     总览页（All Products）已有 10 张大卡导航，子分类页再挂一条同样的 11 项列表属于重复，
     且它高 662px 正好占满首屏。内容仍保留在 HTML 里（桌面端照常显示侧栏）。 */
  .tc__cat-title { display: none !important; }
  .tc__cats { display: none !important; }
  /* 侧栏隐藏列表后只剩 Need samples? 卡，移到主内容之后，避免孤立地压在页顶 */
  .tc__main { order: 1; }
  .tc__sidebar { order: 2; }

  /* ---------- 分类页手机端 V2 版式：白卡 F（深色页底 + 纯白卡，仅手机端） ---------- */
  .tc__prod {
    position: relative;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .45) !important;
  }
  .tc__prod-img { background: #EEF1F5 !important; aspect-ratio: 1 / 0.75 !important; }
  .tc__prod-body { padding: 8px 10px 10px !important; }
  .tc__prod-title {
    color: #0E1116 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    margin: 0 0 3px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* 描述在手机端卡片里不显示（内容保留在 HTML，只是不渲染） */
  .tc__prod-desc { display: none !important; }
  .tc__main-head { margin-bottom: 8px !important; }
  .tc__count { background: transparent !important; border-color: rgba(255,255,255,.16) !important; color: rgba(255,255,255,.7) !important; font-size: 12px !important; padding: 4px 12px !important; }

  /* MOQ / 交期：缩小并强制一排（nowrap，必要时按比例收） */
  .mn-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 4px;
    margin: 0 0 5px !important;
  }
  .mn-pill {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 9.5px; line-height: 1.7;
    color: #1D6FE0; border: 1px solid rgba(29,111,224,.35);
    border-radius: 999px; padding: 0 6px; margin: 0;
    background: rgba(29,111,224,.06);
    white-space: nowrap;
  }
  /* 蓝色 + 号徽章：于总要求全部去掉（2026-10-31），JS 侧已不再注入，此处兜底 */
  .mn-badge { display: none !important; }

  /* 手机端分类页顶部：搜索 + 胶囊 + 促销条（脚本注入） */
  .mn-search { position: relative; margin: 6px 0 10px; }
  .mn-search input {
    width: 100%; box-sizing: border-box; height: 44px; border-radius: 999px;
    background: var(--ink-2); border: 1px solid rgba(255,255,255,.1);
    color: #fff; font-size: 14px; padding: 0 16px 0 40px; outline: none;
  }
  .mn-search input:focus { border-color: var(--hot); }
  .mn-search input::placeholder { color: rgba(255,255,255,.4); }
  .mn-search::before {
    content: ''; position: absolute; left: 15px; top: 50%; width: 14px; height: 14px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat center/contain;
  }
  .mn-tagrow { display: flex; gap: 8px; overflow-x: auto; padding: 2px 56px 10px 0; scrollbar-width: none; }
  .mn-tagrow::-webkit-scrollbar { display: none; }
  .mn-tag {
    flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14); background: var(--ink-2);
    color: rgba(255,255,255,.78); font-size: 12.5px; cursor: pointer;
  }
  .mn-tag.is-on { background: var(--hot); color: #fff; border-color: transparent; font-weight: 600; }
  .mn-promo {
    border-radius: 16px; background: var(--ink-2); border: 1px solid rgba(90,169,255,.35);
    border-top: 3px solid var(--hot); padding: 12px 14px; margin: 0 0 10px;
  }
  .mn-promo b { display: block; font-size: 15px; color: #fff; font-weight: 500; margin-bottom: 4px; }
  .mn-promo span { font-size: 12px; color: rgba(255,255,255,.6); }

  /* ============================================================
     产品详情页手机端：整页浅色化（白底 + 深墨字，品牌蓝不变）
     作用域锁在 body.pda（仅 123 个产品详情页带此类），
     桌面端与其它页面完全不受影响。
     ============================================================ */

  /* 页面底色改白。固定页头是 rgba(10,10,10,.85)+blur 的玻璃层，
     白底会透上来把页头冲成灰白，所以给页头补实色，外观仍是原来的深色。
     页脚 .footer 本身是实色 var(--ink)，不用处理。 */
  body.pda { background: #ffffff !important; color: #4A5568 !important; }
  body.pda .nav { background: #0E1116 !important; }
  /* 页脚与底部 CTA 仍是深色块，文字沿用原浅色，不跟随 body 继承 */
  body.pda .footer,
  body.pda .hub-cta { color: #E8EEF5 !important; }
  /* 白底上 62% 半透明的浮动按钮会糊成一层脏雾、白字也看不清 —— 产品页恢复近乎实色 */
  body.pda .float-contact { opacity: .96 !important; }

  /* 顶部参数条 */
  body.pda .pda-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #E6EBF3 !important;
  }
  body.pda .pda-topbar__inner { color: #5A6472 !important; }
  body.pda .pda-topbar__inner strong { color: #0E1116 !important; }

  /* 首屏（主图 + 标题 + 参数 + 按钮） */
  body.pda .pda-hero { background: #ffffff !important; }
  body.pda .pda-hero__img { background: #EEF1F5 !important; }
  body.pda .pda-breadcrumb,
  body.pda .pda-breadcrumb a { color: #7A8699 !important; }
  body.pda .pda-hero__info h1 { color: #0E1116 !important; }
  body.pda .pda-hero__desc { color: #4A5568 !important; }
  body.pda .pda-hero__caption { color: #7A8699 !important; }

  /* 两个按钮：主按钮品牌蓝 + 白字；次按钮白底深字描边（原白描边白字在白底上会消失） */
  body.pda .pda-hero__cta {
    background: #3D8BFF !important;
    border-color: #3D8BFF !important;
    color: #ffffff !important;
  }
  body.pda .pda-hero__actions .btn--outline {
    background: #ffffff !important;
    border-color: #C9D4E4 !important;
    color: #0E1116 !important;
  }

  /* 参数胶囊 */
  body.pda .pda-spec {
    background: #F4F7FD !important;
    border: 1px solid #DCE6F5 !important;
    border-radius: 12px !important;
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    text-align: center;
  }
  body.pda .pda-spec span { color: #7A8699 !important; }
  body.pda .pda-spec strong { color: #0E1116 !important; }

  /* 正文区块 */
  body.pda .pda-article { background: #ffffff !important; }
  body.pda .pda-article__inner { color: #4A5568 !important; }
  body.pda .pda-article__inner h2 { color: #0E1116 !important; }
  body.pda .pda-article__inner strong { color: #0E1116 !important; }
  body.pda .pda-article__inner a { color: #1D6FE0 !important; }
  body.pda .pda-table tr { border-bottom: 1px solid #E6EBF3 !important; }
  body.pda .pda-table td:first-child { color: #7A8699 !important; }
  body.pda .pda-table td:last-child { color: #0E1116 !important; }
  body.pda .pda-list li { color: #4A5568 !important; }

  /* 四类卡片：白底页面上用浅描边 + 极淡阴影区分，纯白卡不再靠深底衬托 */
  body.pda .pda-card,
  body.pda .pda-step,
  body.pda .pda-faq__item,
  body.pda .pda-related__card {
    background: #ffffff !important;
    border: 1px solid #E4E9F2 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(14,17,22,.05) !important;
  }
  body.pda .pda-card { padding: 16px !important; }
  body.pda .pda-step { padding: 16px 12px !important; }

  /* 手机端宽度下 2 列会把标题压成三行、正文每行只剩三四个词 —— 工艺卡与流程卡改单列 */
  body.pda .pda-cards--4,
  body.pda .pda-cards--3 { grid-template-columns: 1fr !important; gap: 12px !important; }
  body.pda .pda-steps { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* 新系列 gallery：手机端 2 列（图片类不需要像文字卡那样单列） */
  body.pda .pda-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.pda .pda-gallery__item figcaption { font-size: 11px !important; }

  /* 卡片内文字层次：标题深墨、正文中灰 */
  body.pda .pda-card h4,
  body.pda .pda-step h4,
  body.pda .pda-faq__item summary { color: #0E1116 !important; }
  body.pda .pda-card p,
  body.pda .pda-step p,
  body.pda .pda-faq__item p { color: #5A6472 !important; }
  body.pda .pda-faq__item summary::after { color: #8792A2 !important; }

  /* 步骤序号圆点：浅蓝底 + 品牌蓝字 */
  body.pda .pda-step span {
    background: rgba(29,111,224,.10) !important;
    color: #1D6FE0 !important;
  }

  /* 相关产品卡 */
  body.pda .pda-related__img { background: #EEF1F5 !important; }
  /* 4:3 横框装 3:4 竖图，居中裁剪会切头 —— 锚点改顶部 */
  body.pda .pda-related__img img { object-position: center top !important; }
  body.pda .pda-related__label { color: #1D6FE0 !important; }
  body.pda .pda-related__title { color: #0E1116 !important; }

  /* ---------- 筛选面板：折叠为抽屉（内容保留） ---------- */
  .tc__filters { position: static !important; }
  .mn-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    margin: 12px 0;
    background: var(--ink-2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }
  .mn-filter-toggle .mn-caret { font-size: 11px; opacity: .75; }
  .tc__filters { display: none; }
  .tc__filters.is-open { display: block; }
  .tc__filters-body { gap: 12px !important; }
  .tc__filter-item { min-height: 36px; font-size: 13px !important; }

  /* ---------- 产品详情页：密度与可读性 ---------- */
  .pda-hero { padding: 20px var(--mn-pad) 28px !important; }
  .pda-hero__inner { gap: 20px !important; }
  .pda-hero__img { max-height: 46vh; object-fit: contain; }
  .pda-hero__specs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .pda-spec { padding: 10px 12px !important; font-size: 13px !important; }
  .pda-hero__actions { flex-wrap: wrap; gap: 8px !important; }
  .pda-hero__cta, .pda-hero__actions a {
    flex: 1 1 46%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pda-article { font-size: 15px; }
  /* 旧的紧凑覆盖（2 列 / 12px padding）已由上方白卡段统一接管，此处清空避免冲突 */

  /* ---------- 表格：横向滑动，不再压成长条 ---------- */
  .mn-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 14px 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .mn-tablewrap table { width: max-content; min-width: 100%; margin: 0 !important; font-size: 13px !important; }
  .mn-tablewrap.is-wide th, .mn-tablewrap.is-wide td { white-space: nowrap; }
  .mn-tablewrap th, .mn-tablewrap td { padding: 8px 10px !important; }

  /* ---------- 长列表 / FAQ ---------- */
  .pda-faq summary, details > summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; }
  details { margin: 8px 0; }

  /* ---------- 悬浮询价条（脚本注入，内容不改变） ---------- */
  /* 右侧浮动联系按钮与询价条重复，手机端收起到询价条里，仅保留返回顶部 */
  /* 右侧浮动联系按钮：悬浮询价条取消后恢复 WhatsApp / 邮件入口 */
  /* 缩小贴边 + 半透明，避免遮挡卡片内容与正文按钮；触摸/悬停时恢复 */
  .float-contact { right: 4px !important; gap: 6px !important; opacity: .62; transition: opacity .2s ease; }
  .float-contact:active, .float-contact:hover { opacity: 1; }
  .float-contact .fc-btn--wa,
  .float-contact .fc-btn--mail,
  .float-contact .fc-btn--top { width: 38px !important; height: 38px !important; }
  .float-contact .fc-btn--wa svg,
  .float-contact .fc-btn--mail svg,
  .float-contact .fc-btn--top svg { width: 17px !important; height: 17px !important; }
  /* 右侧竖排 CONTACT 装饰标签手机端隐藏（内容冗余） */
  .fc-tag { display: none !important; }

  /* 音乐播放器：手机端缩小贴边，避免压住筛选胶囊与搜索框 */
  .music-player { top: 70px !important; right: 6px !important; }
  .music-player__btn { width: 34px !important; height: 34px !important; opacity: .8; }
  .music-player__icon { width: 13px !important; height: 13px !important; }

  /* ---------- 分类总览页：图1 大卡式（单列横排，左序号+文字 / 右图） ---------- */
  .tc__grid.mn-catgrid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .mn-catcard {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .45) !important;
  }
  .mn-catnum {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1D6FE0 !important;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
  }
  .mn-catcard .tc__prod-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  .mn-catcard .tc__prod-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding-right: 0 !important;
  }
  .mn-catcard .tc__prod-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .mn-catcard .tc__prod-img {
    order: 3 !important;
    flex: 0 0 104px !important;
    width: 104px !important;
    height: 104px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }
  .mn-catcard .tc__prod-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }
}

/* 平板：仅做轻度密度优化，不改版式 */
@media (min-width: 861px) and (max-width: 1024px) {
  .tc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .pda-cards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}