/* ==========================================================================
   M&M Home Textile — 竖屏（手机）专用样式
   仅在 max-width:820px 生效，桌面版不受任何影响。
   设计目标：竖屏阅读、单手操作、表格转卡片。
   ========================================================================== */

@media (max-width: 1040px) {

  /* ===================== 基础排版：竖屏阅读节奏 ===================== */
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: 17px;              /* 比桌面的 16px 略大，手机上更好读 */
    line-height: 1.72;
    /* 给底部固定询盘条留位。
       条自身高 69px；iPhone 上还会多出 34px 的 env(safe-area-inset-bottom)。
       写死 76px 的话，带刘海/指示条的机型上末尾内容会被压住约 27px，
       所以这里跟着条的实际高度一起变。 */
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
  .wrap { padding: 0 18px; }
  .sec { padding: 56px 0; }
  .sec-hd { margin-bottom: 30px; }
  .sec-hd h2 { font-size: 26px; line-height: 1.24; }
  .sec-hd p { font-size: 16px; margin-top: 12px; }
  /* 11.5px 对 40–60 岁的采购决策人偏小，手机上提到 13px */
  .eyebrow { font-size: 13px; letter-spacing: .12em; }

  h1 { font-size: 30px; line-height: 1.2; }
  h2 { font-size: 24px; line-height: 1.24; }
  h3 { font-size: 19px; }

  /* ===================== 顶栏：极简 + 汉堡菜单 ===================== */
  .hdr { position: sticky; top: 0; }
  .hdr-in {
    height: 58px; gap: 8px; padding: 0 14px;
    justify-content: space-between;
  }
  /* 顶栏高 58px，给 logo 撑到 44px 的可点高度（原先是 30px，手指点不准） */
  .brand { font-size: 15px; gap: 9px; flex: 0 1 auto; min-width: 0; min-height: 44px; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; }
  .brand span { min-width: 0; }
  .brand small { display: none; }
  .brand > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 桌面导航与语言按钮在手机上收进菜单 */
  .nav { display: none; }
  .langsel { display: none; }
  .hdr-cta { display: none; }

  /* 汉堡按钮 */
  .mnav-btn {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--ink); cursor: pointer; padding: 0;
  }
  .mnav-btn:active { background: var(--bg-2); }

  /* 全屏抽屉菜单 */
  .mnav {
    position: fixed; inset: 0; z-index: 200;
    background: #0e332e; color: #fff;
    transform: translateY(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column; overflow-y: auto;
  }
  .mnav.open { transform: none; }
  .mnav-top {
    display: flex; align-items: center; justify-content: space-between;
    height: 58px; padding: 0 18px; flex: 0 0 auto;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .mnav-top b { font-size: 15px; font-weight: 650; }
  .mnav-x {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: rgba(255,255,255,.08); border: 0; border-radius: 12px;
    color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  }
  .mnav-list { padding: 8px 18px 20px; flex: 1 1 auto; }
  .mnav-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 17px 2px; font-size: 19px; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.10); color: #eaf4f1;
  }
  .mnav-list a:active { color: var(--accent-2); }
  .mnav-list a span.arw { color: #6f948c; font-size: 17px; }
  .mnav-foot {
    padding: 20px 18px 32px; flex: 0 0 auto;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .mnav-foot .lbl { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #7fa79e; margin-bottom: 12px; }
  .mnav-lang { display: flex; gap: 8px; margin-bottom: 18px; }
  .mnav-lang button {
    flex: 1; padding: 12px 8px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
    color: #dceee9; font-size: 14px; font-weight: 620; font-family: inherit;
  }
  .mnav-lang button[aria-pressed="true"] { background: var(--accent); color: #231c05; border-color: transparent; }
  .mnav-contact a {
    display: block; padding: 12px 0; font-size: 15px; color: #cfe6e0;
  }
  .mnav-contact a b { color: #fff; }

  /* ===================== 视频头图：竖屏铺满 ===================== */
  .vhero { min-height: 0; padding: 0; display: block; }
  .vhero video {
    position: absolute; inset: 0; height: 100%;
    object-fit: cover; opacity: .42;
  }
  .vhero::after {
    background: linear-gradient(180deg,
      rgba(4,17,15,.78) 0%, rgba(4,17,15,.52) 30%, rgba(4,17,15,.94) 100%);
  }
  .vhero-in { padding: 62px 18px 40px; }
  .vhero-tag { font-size: 11px; letter-spacing: .09em; margin-bottom: 14px; }
  .vhero-tag::before { width: 18px; }
  .vhero h1 { font-size: 33px; line-height: 1.18; max-width: none; }
  .vhero p.lead { font-size: 16.5px; line-height: 1.66; margin-top: 16px; max-width: none; }
  .vhero-acts { gap: 10px; margin-top: 26px; }
  /* 按钮通栏、够大好点 */
  .vhero-acts .btn, .btn {
    padding: 15px 22px; font-size: 16px; min-height: 50px;
    justify-content: center;
  }
  .vhero-acts { flex-direction: column; }
  .vhero-acts .btn { width: 100%; }
  .played { display: none; }

  /* ===================== 数据条：2×2 竖排 ===================== */
  .statband { padding: 36px 0; }
  .statband .wrap { grid-template-columns: 1fr 1fr; gap: 0; }
  .stat {
    padding: 18px 16px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13);
  }
  .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.13); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .stat b { font-size: 34px; }
  .stat span { font-size: 12.5px; margin-top: 6px; }

  /* ===================== 表格 → 竖排卡片（手机端最关键的一块） ===================== */
  table.spec {
    border: 0; background: transparent; font-size: 15.5px;
    display: block; width: 100%;
  }
  table.spec tbody { display: block; }
  table.spec tr.hdr { display: none; }          /* 表头行在手机上隐藏 */

  table.spec tr {
    display: block; position: relative;
    background: #fff; border: 1px solid var(--line);
    border-radius: 14px; padding: 15px 17px 16px;
    margin-bottom: 10px;
  }
  table.spec tr:last-child { margin-bottom: 0; }

  table.spec td {
    display: block; width: auto !important;
    padding: 0; border: 0; text-align: left;
  }
  /* 第一格当作卡片标题 */
  table.spec td:first-child {
    font-weight: 700; font-size: 16px; color: var(--ink);
    line-height: 1.4; margin-bottom: 5px;
    padding-right: 0;
  }
  table.spec td:first-child strong { font-weight: 700; }
  /* 其余格作为内容 */
  table.spec td + td {
    color: var(--ink-2); font-size: 15px; line-height: 1.62;
    margin-top: 6px;
  }
  /* 两列以上的表格：第二列起前面加个小标题点 */
  table.spec td + td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; font-weight: 750; letter-spacing: .1em;
    text-transform: uppercase; color: var(--brand-3);
    margin-bottom: 3px;
  }
  table.spec td + td[data-label=""]::before { display: none; }

  /* 表格里的待确认标记 */
  table.spec .tbc { font-size: 14.5px; }

  /* ===================== 卡片：竖屏比例 ===================== */
  .types, .pgrid, .steps, .certs, .pillars, .grid2, .plat { grid-template-columns: 1fr !important; }
  .grid2 { gap: 16px; }

  .pcard { border-radius: 18px; }
  .pcard .ph { aspect-ratio: 4 / 3; }
  .pcard .bd { padding: 17px 17px 19px; }
  .pcard h3 { font-size: 18px; }
  .pcard p { font-size: 15px; line-height: 1.62; }
  .pcard .go { font-size: 14.5px; padding-top: 12px; }
  .tag { font-size: 13px; padding: 5px 11px; }
  .rank { font-size: 12px; padding: 5px 10px; }

  .type { padding: 20px 18px; border-radius: 18px; }
  .type h3 { font-size: 18px; }
  .type p, .type li { font-size: 15px; }
  .type .tick { width: 34px; height: 34px; font-size: 16px; }
  .type .pin { font-size: 14px; }

  /* 定制四步：竖排时间线感 */
  .steps { border-radius: 18px; }
  .step {
    padding: 20px 18px; border-right: 0;
    border-bottom: 1px solid var(--line);
    display: block;
  }
  .step:last-child { border-bottom: 0; }
  .step b.n { font-size: 11.5px; }
  .step h3 { font-size: 17px; margin-top: 6px; }
  .step p { font-size: 15px; }

  /* 认证卡 */
  .cert { padding: 18px; border-radius: 14px; border-left-width: 4px; }
  .cert h3 { font-size: 16.5px; }
  .cert dl { font-size: 14.5px; gap: 6px 10px; }

  /* ===================== 历程：全部左对齐单列 ===================== */
  .tl-wrap { padding: 4px 0 20px; }
  .tl-rail { left: 7px; }
  .tl { gap: 4px; }
  .tl-item {
    grid-template-columns: 34px 1fr !important;
    padding: 8px 0; min-height: 0;
  }
  .tl-item:nth-child(n) .tl-card {
    grid-column: 2 !important; grid-row: 1 !important;
    margin: 0 !important; text-align: left !important;
    padding: 17px 18px; border-radius: 16px;
  }
  .tl-item:nth-child(n) .tl-dot {
    grid-column: 1 !important; grid-row: 1 !important;
    justify-self: center !important; margin: 22px 0 0 0 !important;
    width: 13px; height: 13px;
  }
  .tl-item:nth-child(n) .tl-year {
    grid-column: 1 !important; grid-row: 2 !important;
    text-align: center !important; padding: 6px 0 0 !important;
    font-size: 12px !important; color: var(--ink-3);
  }
  .tl-card h3 { font-size: 17px; }
  .tl-card p { font-size: 15px; line-height: 1.66; }
  .tl-card .tagline { font-size: 11.5px; }

  /* ===================== 语音模块：竖屏友好 ===================== */
  .voice { border-radius: 18px; }
  .voice-in { padding: 24px 16px 22px; }
  .voice h2 { font-size: 22px; line-height: 1.26; }
  .voice .sub { font-size: 15px; line-height: 1.66; }
  .roles { gap: 8px; margin-top: 18px; }
  .role { padding: 11px 15px; font-size: 14px; min-height: 44px; }

  .stage {
    grid-template-columns: 1fr; gap: 16px;
    padding: 20px 16px; border-radius: 16px; margin-top: 18px;
  }
  .orb { width: 76px; height: 76px; margin: 0 auto; }
  .orb::after { inset: -10px; }
  .speech { min-height: 0; }
  .speech p.say { font-size: 16.5px; line-height: 1.66; }
  .speech p.say.rtl { font-size: 18px; }
  .speech .who { font-size: 11px; }

  .stage-ctl { gap: 8px; margin-top: 16px; }
  .vbtn { padding: 12px 16px; font-size: 14.5px; min-height: 46px; }
  .vnote { font-size: 12px; width: 100%; }

  .askbar { gap: 8px; margin-top: 18px; }
  .askbar input {
    flex: 1 1 100%; order: 3; min-width: 0;
    padding: 14px 18px; font-size: 16px;   /* ≥16px 防 iOS 自动放大 */
    border-radius: 14px;
  }
  .askbar .mic { order: 1; width: 50px; height: 50px; }
  .askbar .vbtn { order: 2; flex: 1; }

  .qchips { gap: 7px; margin-top: 14px; }
  .qchip { font-size: 12.5px; padding: 9px 13px; min-height: 40px; display: inline-flex; align-items: center; }

  #wave { height: 46px; }

  /* ===================== 询盘表单 ===================== */
  .rfq { padding: 22px 18px; border-radius: 18px; }
  .frow { grid-template-columns: 1fr; gap: 14px; }
  .frow + .frow { margin-top: 14px; }
  label.f { font-size: 14px; margin-bottom: 7px; }
  input.i, select.i, textarea.i {
    padding: 14px 15px; font-size: 16px; border-radius: 12px; min-height: 50px;
  }
  textarea.i { min-height: 104px; }
  .rfq .btn { width: 100%; }
  select.i { -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7480' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

  /* ===================== FAQ 手风琴 ===================== */
  details.faq summary { padding: 16px 18px; font-size: 16px; gap: 12px; }
  details.faq summary::after { font-size: 20px; }
  .faq-a { padding: 0 18px 18px; font-size: 15.5px; line-height: 1.7; }

  ul.fnlist { padding-left: 18px; font-size: 15.5px; }
  ul.fnlist li { margin: 12px 0; }
  .attrblock { padding: 18px; border-radius: 14px; }
  .attrblock ul { font-size: 14.5px; }

  /* ===================== 客户故事：正文与侧栏竖排 ===================== */
  .story { border-left: 3px solid var(--accent); padding-left: 16px; }
  .story p { font-size: 16.5px; line-height: 1.78; margin-bottom: 15px; }
  .grid2[style*="1.35fr"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  .notice[style*="sticky"] { position: static !important; }

  /* ===================== 子页头图 ===================== */
  .phero { padding: 40px 0 38px; }
  .phero.vid { min-height: 0; }
  .phero h1 { font-size: 29px; line-height: 1.22; }
  .phero p { font-size: 16px; line-height: 1.66; }
  .crumb { font-size: 12.5px; margin-bottom: 12px; }
  /* 面包屑链接只有 16px 高，手指点不准。
     用伪元素把热区撑到 44px，不改视觉、不推布局。 */
  .crumb a { position: relative; }
  .crumb a::after { content: ""; position: absolute; inset: -14px -10px; }

  /* ===================== 页脚 ===================== */
  footer { padding: 40px 0 26px; font-size: 15px; }
  .fgrid { grid-template-columns: 1fr; gap: 28px; }
  footer h4 { font-size: 12.5px; margin-bottom: 13px; }
  .socials a { width: 44px; height: 44px; }
  .fbot { flex-direction: column; gap: 8px; font-size: 12px; }

  /* ===================== 悬浮按钮：收成一个主按钮 ===================== */
  #fab-stack { right: 14px; bottom: 84px; gap: 10px; }
  .fab { width: 50px; height: 50px; box-shadow: 0 8px 22px rgba(16,20,24,.26); }
  .fab.wa { width: 54px; height: 54px; }
  .fab.chat { display: none; }   /* 手机上收进底部条，避免遮挡 */

  #fab-panel {
    right: 14px; left: 14px; width: auto; bottom: 146px;
    max-height: 68vh; overflow: auto;
  }
  #fab-panel .fp-hd { padding: 14px 16px; }
  #fab-panel .fp-bd { padding: 16px; }
  #fab-panel .fp-ft { padding: 14px 16px; }
  #fab-panel .preset button { font-size: 12.5px; padding: 8px 11px; min-height: 38px; }
  #fab-panel textarea { font-size: 16px; min-height: 76px; }

  /* ===================== 底部固定操作条 ===================== */
  #msbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; gap: 9px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  #msbar a, #msbar button {
    flex: 1; min-height: 48px; border-radius: 13px; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 15px; font-weight: 650; font-family: inherit; text-align: center;
  }
  #msbar .s-quote { background: var(--brand); color: #fff; }
  #msbar .s-wa { background: #25d366; color: #04331a; flex: 0 0 48px; }
  #msbar .s-ask { background: var(--bg-3); color: var(--brand); flex: 0 0 48px; font-size: 19px; }

  /* 平台页图片网格：两列更紧凑 */
  #msbar + * { margin-bottom: 0; }

  /* 免责/脚注 */
  .tiny { font-size: 13.5px; }
  .notice { padding: 16px 18px; font-size: 15px; border-radius: 14px; }
  .card, .pdffig img { border-radius: 14px; }
}

/* 小屏再收一档 */
@media (max-width: 380px) {
  .vhero h1 { font-size: 29px; }
  .vhero-in { padding: 52px 16px 34px; }
  .statband .wrap { grid-template-columns: 1fr; }
  .stat:nth-child(odd) { border-right: 0; }
  .stat { padding: 15px 16px; }
  .stat:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); }
  .stat:last-child { border-bottom: 0; }
  h1 { font-size: 27px; }
  .sec-hd h2 { font-size: 23px; }
  table.spec { font-size: 15px; }
}

/* 平台页的 547 张缩略图：手机端两列 */
@media (max-width: 1040px) {
  #msbar ~ * .pgrid, .sec .pgrid { grid-template-columns: 1fr; }
}