@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2');}

    /* ====== Design Tokens (绿色系 — 后续多页面统一引用) ====== */
    :root {
      --color-primary:        #1FB264;
      --color-primary-dark:   #128A4E;
      --color-primary-light:  #4ADE80;
      --color-primary-50:     #ECFDF5;
      --color-primary-100:    #D1FAE5;
      --color-accent:         #F08213;
      --color-orange:         #F08213;
      --color-orange-deep:    #C25C00;
      --color-orange-50:      #FFF1E6;
      --color-text-900:       #0F172A;
      --color-text-700:       #334155;
      --color-text-500:       #64748B;
      --color-text-400:       #94A3B8;
      --color-bg:             #FFFFFF;
      --color-bg-soft:        #F8FAFC;
      --color-border:         #E2E8F0;
      --color-wa:             #25D366;
      --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
      --shadow-md: 0 4px 14px rgba(15,23,42,.06);
      --shadow-lg: 0 12px 32px rgba(15,23,42,.08);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --container: 1400px;
      --header-h: 72px;
    }

    /* ====== Reset & Base ====== */
    *,*::before,*::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; height: 100%; }
    body {
      margin: 0;
      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--color-text-700);
      background: var(--color-bg);
    }
    /* 内容不足一屏时页脚贴底：空白留在中间内容区，页脚下方不留白
       注意：body 变成 flex 后，带 `margin:0 auto` 的直接子元素（.container）会退化成
       收缩适应宽度（max-content）并居中，导致主体宽度随内容变化 → 必须显式 width:100% */
    body { min-height: 100vh; display: flex; flex-direction: column; }
    body > * { width: 100%; flex: 0 0 auto; }
    body > .site-footer { margin-top: auto; }
    img, svg { max-width: 100%; display: block; }
    a { color: var(--color-primary); text-decoration: none; transition: color .2s; }
    a:hover { color: var(--color-primary-dark); }
    h1, h2, h3, h4 {
      color: var(--color-text-900);
      font-weight: 700;
      line-height: 1.25;
      margin: 0 0 .5em;
      letter-spacing: -0.01em;
    }
    h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.02em; }
    h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
    h3 { font-size: clamp(1.125rem, 1.8vw, 1.35rem); }
    p  { margin: 0 0 1em; }
    .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

    /* ====== Header ====== */
    .site-header {
      position: sticky; top: 0; z-index: 100;
      display: flex; align-items: center;
      background: rgba(255,255,255,.92);
      backdrop-filter: saturate(180%) blur(12px);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      border-bottom: 1px solid var(--color-border);
      height: var(--header-h);
    }
    .site-header .container { width: 100%; }
    .nav {
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px;
    }
    .logo {
      display: flex; align-items: center; gap: 10px;
      font-weight: 800; font-size: 1.25rem; color: var(--color-text-900);
      letter-spacing: -0.01em;
    }
    .logo img { height: 60px; width: auto; display: block; }
    .site-footer .logo img { height: 48px; }
    .logo-mark {
      width: 36px; height: 36px; border-radius: 8px;
      background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
      display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
      box-shadow: 0 4px 10px rgba(31,178,100,.25);
    }
    .logo-mark span { transform: translateY(-1px); }
    .nav-menu {
      display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0;
    }
    .nav-menu > li > a {
      display: inline-block; padding: 8px 12px; border-radius: 8px;
      color: var(--color-text-700); font-weight: 500; font-size: .95rem;
    }
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active { background: var(--color-primary); color: #fff; }
    .nav-cta { display: flex; align-items: center; gap: 10px; }

    /* Language Switcher */
    .lang { position: relative; }
    .lang-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 4px; background: transparent; border: 0;      /* 去掉边框（2026-09-27 用户要求）*/
      border-radius: 8px; color: var(--color-text-700); font-weight: 500; font-size: .9rem;
      cursor: pointer; transition: all .2s;
    }
    .lang-btn:hover { color: var(--color-primary-dark); }
    .lang-btn svg { width: 16px; height: 16px; }
    .lang-menu {
      position: absolute; top: calc(100% + 6px); right: 0;
      min-width: 220px; background: #fff; border: 1px solid var(--color-border);
      border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px;
      opacity: 0; visibility: hidden; transform: translateY(-4px);
      transition: all .2s;
    }
    .lang.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    /* ⚠️ 名称与标签必须各自成元素：纯文本节点不参与 flex，gap/space-between 对它无效
       （曾因此出现「FranzösischFR」紧贴，2026-09-27）*/
    .lang-menu button, .lang-menu a {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 9px 12px; background: transparent; border: 0; border-radius: 6px;
      color: var(--color-text-700); font-size: .9rem; cursor: pointer; text-align: left;
    }
    /* 2026-10-02：切换项由 <button> 改为 <a href>（让爬虫可跟随、无 JS 也能切语言）
       → 选择器统一为 `button, a` 共用样式；<a> 需显式去掉下划线 */
    .lang-menu button, .lang-menu a { text-decoration: none; }
    .lang-menu button .lnm, .lang-menu a .lnm { flex: 1; text-align: left; }                       /* 名称左对齐并撑开 */
    .lang-menu button span:not(.lnm), .lang-menu a span:not(.lnm) { margin-left: 14px; color: #94A3B8; font-size: .78rem; font-weight: 500; letter-spacing: .03em; }
    .lang-menu button.active span:not(.lnm), .lang-menu a.active span:not(.lnm) { color: inherit; }
    .lang-menu button:hover, .lang-menu a:hover { background: var(--color-primary-50); color: var(--color-primary-dark); }
    .lang-menu button.active, .lang-menu a.active { color: var(--color-primary); font-weight: 600; }

    /* Mobile menu toggle */
    .menu-toggle {
      display: none; width: 40px; height: 40px;
      background: transparent; border: 1px solid var(--color-border); border-radius: 8px;
      cursor: pointer; padding: 0; align-items: center; justify-content: center;
    }
    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after {
      content: ''; display: block; width: 18px; height: 2px; background: var(--color-text-900);
      border-radius: 2px; transition: transform .2s;
    }
    .menu-toggle span { position: relative; }
    .menu-toggle span::before { position: absolute; top: -6px; }
    .menu-toggle span::after  { position: absolute; top:  6px; }

    /* ====== Buttons ====== */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
      font-weight: 600; font-size: .95rem; cursor: pointer;
      transition: all .2s; white-space: nowrap;
    }
    .btn-primary {
      background: var(--color-primary); color: #fff;
      box-shadow: 0 4px 12px rgba(31,178,100,.25);
    }
    .btn-primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-1px); }
    .btn-outline {
      background: transparent; color: var(--color-primary-dark);
      border: 2px solid var(--color-primary);
    }
    .btn-outline:hover { background: var(--color-primary-50); color: var(--color-primary-dark); }
    .btn-wa { background: var(--color-primary); color: #fff; }
    .btn-wa svg { color: #fff; }
    .btn-wa:hover { background: var(--color-primary-dark); color: #fff; }
    .btn-ghost { background: transparent; color: var(--color-text-700); }
    .btn-ghost:hover { background: var(--color-primary-50); color: var(--color-primary-dark); }
    .btn-lg { padding: 14px 26px; font-size: 1rem; border-radius: 12px; }
    .btn-sm { padding: 7px 14px; font-size: .85rem; }

    /* ====== Hero ====== */
    .hero {
      position: relative; overflow: hidden;
      padding: 88px 0 96px;
      background:
        radial-gradient(ellipse 60% 50% at 80% 0%, var(--color-primary-50), transparent 70%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--color-primary-100), transparent 60%),
        #fff;
    }
    .hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(to right, rgba(31,178,100,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(31,178,100,.04) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
    }
    .hero-grid {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      flex-wrap: wrap; max-width: 100%; white-space: normal;   /* 长文案（法语/德语）允许换行，避免撑宽 */
      padding: 14px; background: var(--color-orange);
      color: #fff; border-radius: 999px;
      /* line-height 收紧：继承的 ~1.6 会让文字盒子高于字形，视觉上「文字靠下」（2026-09-28） */
      line-height: 1.2;
      font-size: .85rem; font-weight: 600; margin-bottom: 20px;
    }
    .hero-eyebrow::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25);
      flex-shrink: 0;   /* 不被压缩，保证与小字垂直对齐（缺此属性在窄屏会变形错位）*/
      align-self: center;
    }
    .hero h1 { color: var(--color-text-900); font-size: clamp(1.8rem, 3.8vw, 2.75rem); }
    .hero h1 .accent { color: var(--color-orange); white-space: nowrap; }
    .hero-lead { font-size: 1.125rem; color: var(--color-text-500); max-width: 540px; margin-bottom: 28px; }
    .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
    .hero-trust {
      display: flex; gap: 24px; margin-top: 36px; padding-top: 24px;
      border-top: 1px solid var(--color-border); flex-wrap: wrap;
    }
    .hero-trust-item { display: flex; align-items: center; gap: 8px; color: var(--color-text-500); font-size: .9rem; }
    .hero-trust-item svg { width: 18px; height: 18px; color: var(--color-primary); }

    .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
    .hero-visual img { width: 500px; height: 500px; max-width: 100%; object-fit: cover; display: block; border-radius: 12px; }
    .spool {
      position: absolute; border-radius: 50%;
      box-shadow: 0 18px 40px rgba(15,23,42,.12);
    }
    .spool-1 { width: 70%; height: 70%; top: 8%; left: 15%; background: conic-gradient(from 45deg, var(--color-primary), var(--color-primary-light), var(--color-primary-dark), var(--color-primary)); }
    .spool-1::before, .spool-1::after {
      content: ''; position: absolute; background: #fff; border-radius: 50%;
    }
    .spool-1::before { inset: 22%; }
    .spool-1::after  { inset: 40%; background: var(--color-text-900); }
    .spool-2 { width: 40%; height: 40%; top: 0; right: 0; background: conic-gradient(from 0deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ef4444); }
    .spool-2::before { content: ''; position: absolute; inset: 28%; background: #fff; border-radius: 50%; }
    .spool-2::after  { content: ''; position: absolute; inset: 42%; background: var(--color-text-900); border-radius: 50%; }
    .spool-3 { width: 36%; height: 36%; bottom: 0; left: 0; background: conic-gradient(from 0deg, #128A4E, #1FB264, #4ADE80, #128A4E); }
    .spool-3::before { content: ''; position: absolute; inset: 28%; background: #fff; border-radius: 50%; }
    .spool-3::after  { content: ''; position: absolute; inset: 44%; background: var(--color-text-900); border-radius: 50%; }
    .spool-label {
      position: absolute; background: #fff; padding: 8px 14px; border-radius: 8px;
      font-size: .8rem; font-weight: 600; box-shadow: var(--shadow-md);
      display: flex; align-items: center; gap: 6px;
    }
    .spool-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
    .spool-label.l-1 { top: 6%; left: -8px; }
    .spool-label.l-2 { top: 60%; right: -10px; }
    .spool-label.l-3 { bottom: -4px; left: 40%; }
    .spool-label.l-2::before { background: #f59e0b; }
    .spool-label.l-3::before { background: #F08213; }

    /* ====== Sections ====== */
    section { padding: 80px 0; }
    .section-soft { background: var(--color-bg-soft); }
    .section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
    .section-eyebrow {
      display: inline-block; padding: 4px 12px; background: var(--color-primary-50);
      color: var(--color-primary-dark); border-radius: 999px;
      font-size: .8rem; font-weight: 600; margin-bottom: 14px; letter-spacing: .04em; text-transform: uppercase;
    }
    .section-head p { color: var(--color-text-500); font-size: 1.05rem; }

    /* ====== Stats Strip ====== */
    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .stat {
      text-align: center; padding: 28px 16px;
      background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
      transition: all .25s;
    }
    .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary-100); }
    .stat-num { font-size: clamp(1.6rem, 2.5vw, 2.1rem); font-weight: 800; color: var(--color-primary); line-height: 1.1; transition: color .25s ease; }
    /* 鼠标移入卡片：该卡片的绿色数字变橙色（点睛色） */
    .stat:hover .stat-num { color: var(--o); }
    .stat-label { color: var(--color-text-500); font-size: .9rem; margin-top: 6px; }

    /* ====== Product Cards ====== */
    .products { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, calc(25% - 15px)); gap: 20px; overflow-x: auto; padding-top: 8px; padding-bottom: 28px; margin-top: -8px; scroll-snap-type: x proximity; }
    .products .product { scroll-snap-align: start; }
    /* 左右箭头 */
    .products-wrap { position: relative; padding: 0 28px; }
    .products-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%;
      background: #fff; color: var(--color-text-900);
      border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
      display: grid; place-items: center; cursor: pointer; z-index: 2;
    }
    .products-nav:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(31,178,100,.35); }
    .products-prev { left: 0; }
    .products-next { right: 0; }
    /* 隐藏滚动条 */
    .products { scrollbar-width: none; }
    .products::-webkit-scrollbar { display: none; }

    /* ====== Product Cards 缩略图 ======
       🔴 2026-09-28：这里此前有「两份」同名 .product-thumb 规则互相覆盖 ——
          先写 3/2 + cover，后又写 4/3 + contain（靠后者胜出）
          → 运营上传的系列图是 3:2（300×200），却塞进 4/3 容器做 contain 居中，
            图片内容只占容器高度的 88.9%，**上下各留约 5.6% 空白**
            （用户反馈「图片上面不要留空」就是它）。
       现按原设计意图统一为 **3:2 + cover**：容器比例 = 图片比例 → 图片完整填满、零留白、零裁切。
       ⚠️ 只保留这一份，不要再新增同名规则覆盖（改前先 grep 全文）。 */
    .product {
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-lg); overflow: hidden;
      transition: all .3s; display: flex; flex-direction: column;
    }
    .product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-100); }
    .product-thumb {
      aspect-ratio: 3 / 2; display: grid; place-items: center;
      position: relative; overflow: hidden; padding: 0; background: #fff;
    }
    .product-thumb svg { width: 60%; height: 60%; }
    .product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .product-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
    .product-tag {
      display: inline-block; padding: 2px 8px; border-radius: 4px;
      background: #F1F5F9; color: #475569;
      font-size: .75rem; font-weight: 600; margin-bottom: 10px;
    }
    .products .product:nth-child(1) .product-tag {
      background: var(--color-orange); color: #fff;
    }
    .product h3 { margin: 0 0 6px; }
    .product p { color: var(--color-text-500); font-size: .9rem; margin-bottom: 16px; flex: 1; }
    .product-cta { color: var(--color-primary); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 4px; }
    /* 整卡可点击（stretched link，全局）：标题链接铺满卡片，View Series 保持独立可点 */
    .product { position: relative; cursor: pointer; }
    .product h3 a { color: inherit; text-decoration: none; }
    .product h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
    .product h3 a:hover { color: var(--color-primary); }
    .product .product-cta { position: relative; z-index: 2; }
    .product-cta::after { content: '→'; transition: transform .2s; }
    .product:hover .product-cta::after { transform: translateX(4px); }

    /* ====== Why Us (Features) ====== */
    .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .feature {
      padding: 28px; background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); text-align: center;
      transition: transform .32s cubic-bezier(.2,.9,.3,1.15), border-color .28s ease, box-shadow .32s ease;
    }
    /* 鼠标移入：整卡上浮 + 阴影加深 + 图标变绿放大 + 标题变品牌绿 */
    .feature:hover {
      transform: translateY(-6px);
      border-color: var(--color-primary-100);
      box-shadow: 0 18px 38px rgba(15,23,42,.13);
    }
    .feature-icon {
      width: 48px; height: 48px; border-radius: 12px;
      background: var(--color-primary-50); color: var(--color-primary);
      display: grid; place-items: center; margin: 0 auto 16px;
      transition: transform .35s cubic-bezier(.2,.9,.3,1.15), background .28s ease, color .28s ease;
    }
    .feature:hover .feature-icon { transform: translateY(-3px) scale(1.09); background: var(--color-primary); color: #fff; }
    .feature h3 { transition: color .25s ease; }
    .feature:hover h3 { color: var(--color-primary); }
    .feature-icon svg { width: 24px; height: 24px; }
    .feature h3 { margin: 0 0 6px; font-size: 1.1rem; }
    .feature p { color: var(--color-text-500); font-size: .9rem; margin: 0; text-align: left; }   /* 描述保持左对齐 */

    /* ====== Factory Showcase ====== */
    /* 左右各留 56px 给画廊箭头（箭头在图片外侧，不遮挡、不露底色） */
    .factory-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: 0 44px; }
    .factory-visual {
      aspect-ratio: 16/10;
      position: relative;
      overflow: visible;          /* 箭头需要移到容器外 */
      background: none;           /* 图片铺满，不再露出渐变底色 */
      box-shadow: none;           /* 圆角与阴影交给内部 .gal-viewport */
    }
    .factory-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
    .badge {
      padding: 6px 12px; border-radius: 6px; background: #fff; border: 1px solid var(--color-border);
      font-size: .85rem; color: var(--color-text-700); font-weight: 500;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .badge svg { width: 14px; height: 14px; color: var(--color-primary); }

    /* ====== Resources ====== */
        .resources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .res-faq .res-list { display: block; }
    .res-card {
      padding: 28px; background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); transition: all .2s;
      display: flex; flex-direction: column; gap: 10px;
    }
    .res-card:hover { border-color: var(--color-primary-100); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
    .res-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary-50); color: var(--color-primary); display: grid; place-items: center; }
    .res-card-icon svg { width: 22px; height: 22px; }
    /* 窄屏：资源区 2 列 / 1 列 */
    @media (max-width: 1100px) { .resources { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 680px) { .resources { grid-template-columns: 1fr; } }
    /* 窄屏：资源区 2 列 / 1 列 */
    @media (max-width: 1100px) { .resources { grid-template-columns: 1fr 1fr; } .res-faq .res-list { grid-template-columns: 1fr; } }
    @media (max-width: 680px) { .resources { grid-template-columns: 1fr; } }
    .res-card h3 { margin: 4px 0 2px; font-size: 1.05rem; }
    .res-card p { color: var(--color-text-500); font-size: .85rem; margin: 0; }
    .res-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
    .res-list li a { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-700); font-size: .85rem; }
    .res-list li:last-child a { border-bottom: 0; }
    .res-list li a:hover { color: var(--color-primary); }
    .res-list li a::before { content: '→'; color: var(--color-primary); }

    /* ====== Inquiry Cards ====== */
    .inquiry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .inquiry-card {
      padding: 32px; border-radius: var(--radius-lg);
      background: #fff; border: 1px solid var(--color-border);
      display: flex; flex-direction: column; gap: 14px;
      transition: all .25s; position: relative; overflow: hidden;
    }
    .inquiry-card.featured { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; border-color: transparent; }
    .inquiry-card.featured h3, .inquiry-card.featured .inquiry-icon { color: #fff; }
    .inquiry-card.featured p  { color: rgba(255,255,255,.85); }
    .inquiry-card.featured .btn { background: #fff; color: var(--color-primary-dark); }
    .inquiry-card.featured .btn:hover { background: var(--color-primary-50); }
    .inquiry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .inquiry-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--color-primary-50); color: var(--color-primary); display: grid; place-items: center; }
    .inquiry-icon svg { width: 24px; height: 24px; }
    .inquiry-card.featured .inquiry-icon { background: rgba(255,255,255,.18); }
    .inquiry-card h3 { margin: 0; font-size: 1.25rem; }
    .inquiry-card p { color: var(--color-text-500); font-size: .92rem; margin: 0; flex: 1; }
    .inquiry-card .btn { align-self: flex-start; }
    /* 2026-10-07（用户要求）：首页「與我們的團隊洽談」**中间卡**（B2B 批發報價）按钮用**辅橙**突出 ✓
       做法：该按钮加修饰类 `btn-accent`（见 index.php ✓），此处定义橙色样式 ✓ → 另两张卡不受影响 ✓
       配色：复用设计令牌 `--o`(#F08213) ✓；hover 用 #E8590C（与 .shop-badge.hot 橙色渐变同色系 ✓）
       ⚠️ 选择器用 3 个类 + :hover 提升优先级 ✓ —— 压过 `.inquiry-card .btn` / `.featured .btn` 等规则 ✓ */
    /* 🔴 2026-10-07 补：`.btn-primary` 自带**绿色常驻外发光** ✗（第 167 行 `box-shadow:0 4px 12px rgba(31,178,100,.25)`）
       实测：橙按钮默认/hover 态 box-shadow 仍是 rgba(31,178,100,.25) → **橙色按钮顶着一圈绿光** ✗
       用户反馈："还是绿色的，跟橙色的按钮不搭" ✓ → 此处连同外发光一起改成橙色系 ✓
       （选择器 4 个类 ✓ 优先级高于 .btn-primary ✓ 无需 !important ✓） */
    .inquiry-card .btn.btn-accent { background: var(--o); border-color: var(--o); color: #fff;
      box-shadow: 0 4px 12px rgba(240,130,19,.3); }
    .inquiry-card .btn.btn-accent:hover { background: #E8590C; border-color: #E8590C; color: #fff; transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(240,130,19,.38); }
    .inquiry-card .btn.btn-accent:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(240,130,19,.35); }
    .featured-tag { position: absolute; top: 16px; right: 16px; background: var(--color-orange); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600; }

    /* ====== Support / Trust ====== */
    .support { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .support-card {
      padding: 24px; background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); text-align: center; transition: all .2s;
    }
    .support-card { cursor: default; transition: transform .32s cubic-bezier(.2,.9,.3,1.15), border-color .28s ease, box-shadow .32s ease; }
    .support-card:hover { transform: translateY(-6px); border-color: var(--color-primary-100); box-shadow: 0 18px 38px rgba(15,23,42,.13); }
    .support-card svg { transition: transform .35s cubic-bezier(.2,.9,.3,1.15); }
    .support-card:hover svg { transform: translateY(-3px) scale(1.1); }
    .support-card h4 { transition: color .25s ease; }
    .support-card:hover h4 { color: var(--color-primary); }
    .support-card svg { width: 32px; height: 32px; color: var(--color-primary); margin: 0 auto 12px; }
    .support-card h4 { margin: 0 0 4px; font-size: 1rem; }
    .support-card p { color: var(--color-text-500); font-size: .85rem; margin: 0; }

    /* ====== CTA Strip ====== */
    .cta-strip {
      padding: 56px 40px; border-radius: var(--radius-lg);
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      color: #fff; text-align: center; position: relative; overflow: hidden;
    }
    .cta-strip::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,255,255,.12), transparent 60%);
    }
    .cta-strip > * { position: relative; z-index: 1; }
    .cta-strip h2 { color: #fff; margin: 0 0 10px; }
    .cta-strip p  { color: rgba(255,255,255,.9); max-width: 600px; margin: 0 auto 24px; }
    .cta-strip .btn { background: #fff; color: var(--color-primary-dark); }
    .cta-strip .btn:hover { background: var(--color-primary-50); transform: translateY(-1px); }
    .cta-strip .btn-wa { background: #fff; color: var(--color-primary-dark); }
    .cta-strip .btn-wa svg { color: var(--color-wa); }
    .cta-strip .btn-wa:hover { background: var(--color-primary-50); color: var(--color-primary-dark); }

    /* ====== Footer ====== */
    .site-footer { background: #000000; color: rgba(255,255,255,.8); padding: 64px 0 0; }
    .footer-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap: 40px; padding-bottom: 40px; }
    .footer-col h5 { color: #fff; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; }
    .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .footer-col a { color: rgba(255,255,255,.72); font-size: .9rem; }
    .footer-col a:hover { color: #fff; }
    .footer-brand p { color: rgba(255,255,255,.72); font-size: .9rem; margin: 14px 0 18px; line-height: 1.65; }
    .footer-social { display: flex; gap: 10px; }
    .footer-social a {
      width: 36px; height: 36px; border-radius: 8px;
      background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
      display: grid; place-items: center; transition: all .2s;
    }
    .footer-social a:hover { background: var(--color-primary); color: #fff; }
    .footer-social svg { width: 18px; height: 18px; }
    .footer-subscribe form { display: flex; gap: 8px; }
    .footer-subscribe input {
      flex: 1; padding: 10px 12px; border-radius: 8px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      color: #fff; font-size: .9rem; min-width: 0;
    }
    .footer-subscribe input::placeholder { color: rgba(255,255,255,.4); }
    .footer-subscribe form { max-width: 100%; }
    .footer-subscribe .btn { flex-shrink: 0; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 16px 0 18px; display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.55);
    }
    .footer-bottom .lang-btn { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.14); }
.footer-bottom .footer-copy { display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom .footer-sitemap { color: inherit; text-decoration: none; opacity: .78; border-bottom: 1px solid transparent; transition: opacity .15s, border-color .15s; }
.footer-bottom .footer-sitemap:hover { opacity: 1; border-bottom-color: currentColor; }
/* 缺省图（noimage.png 300x300）自适应：
   用 object-fit: scale-down —— 取 none 与 contain 中较小者：
     · 容器比图大 → 保持原始尺寸(300x300)，绝不放大（放大必模糊）
     · 容器比图小 → 等比缩小适应容器
   配合容器原有的 width/height:100%，天然居中，且不脱离文档流（不会撑破容器、不会与相邻元素重叠） */
img.is-noimg {
  /* 关键：约束在容器内 —— aspect-ratio 容器下 height:100% 会失效，
     缺省图(1:1) 会按自身比例撑高而溢出容器，故必须用 max-* 约束 */
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: scale-down !important;   /* 容器大→原尺寸(不放大)；容器小→等比缩小 */
  object-position: center !important;
  margin: auto !important;
  display: block !important;
  background: transparent !important;
}
/* 底部布局：语言切换在左，版权 + Sitemap 在右（所有屏幕宽度生效） */
.footer-bottom > .lang { order: 1; }
.footer-bottom > .footer-copy { order: 2; }
.footer-bottom { justify-content: space-between; }
    .footer-bottom .lang-btn:hover { color: #fff; border-color: var(--color-primary); }

    /* ====== Responsive ====== */
    @media (max-width: 1024px) {
      /* ⚠️ 必须 minmax(0,1fr)：Grid 的 `1fr` = minmax(auto,1fr)，长法语文本会把列撑宽，
         而 .hero 有 overflow:hidden → 表现为「内容被截断、像超出屏幕」（2026-09-28 用户反馈） */
      .hero-grid, .factory-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
      .hero-visual img { width: 100%; max-width: 500px; height: auto; aspect-ratio: 1 / 1; }
      /* 移动端：橙色强调句与正文放开限制（桌面保持一行的 .accent 在窄屏必须允许换行，
         否则被 .hero 的 overflow:hidden 裁断，看起来像"超出屏幕"）2026-09-28 */
      .hero h1 .accent { white-space: normal; }
      .hero-lead { max-width: 100%; }
      /* 法语文案最长（Filaments esthétiques et spéciaux haut de gamme）；
         字号与左右内边距一起收，争取单行居中显示（2026-09-28）*/
      .hero-eyebrow { font-size: .69rem; padding: 10px; line-height: 1.25; letter-spacing: -.005em; }

      .products { grid-auto-columns: calc(50% - 10px); }
      .features { grid-template-columns: repeat(2, 1fr); }
      .resources { grid-template-columns: 1fr; }
      .res-faq { grid-column: auto; }
      .res-faq .res-list { grid-template-columns: 1fr; }
      .inquiry { grid-template-columns: 1fr; }
      .support { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 768px) {
      section { padding: 56px 0; }
      .nav-menu, .nav-cta .btn:not(.menu-cta) { display: none; }
      .menu-toggle { display: inline-flex; }
      .nav-menu.open {
        display: flex; flex-direction: column; align-items: stretch; gap: 4px;
        position: absolute; top: var(--header-h); left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--color-border);
        padding: 12px 20px 20px; box-shadow: var(--shadow-md);
      }
      .nav-menu.open > li > a { padding: 10px 12px; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .features, .resources, .support { grid-template-columns: 1fr; }
      .products { grid-auto-columns: 100%; }   /* 手机端整张卡片，不露一半 */
      .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .footer-bottom { justify-content: center; text-align: center; }
    }
    @media (max-width: 480px) {
      .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px 18px; }
      .footer-brand { grid-column: 1 / -1; }
      .hero-cta { flex-direction: column; align-items: stretch; }
      .hero-cta .btn { justify-content: center; }
    }

    /* ====== Placeholders for future hooks ====== */
    /* PRICE_RESERVED: 产品卡片/列表中可启用价格显示位 (当前 v1 隐藏) */
    .price-slot { display: none; }
    /* AUTH_RESERVED: 会员/登录入口 (当前 v1 隐藏) */
    .auth-slot { display: none; }
    /* PAY_RESERVED: 支付/下单按钮 (当前 v1 隐藏) */
    .pay-slot { display: none; }
  

/* ============ Shop: filaments list & detail ============ */
/* banner */
.shop-banner{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('../images/filament/filament_banner.jpg') center/cover no-repeat;color:#fff;padding:104px 0}
.shop-banner h1{color:#fff;margin:0 0 6px}
.shop-banner p{color:rgba(255,255,255,.9);max-width:640px;margin:0}
.shop-banner .crumb{font-size:.82rem;color:#fff;margin-bottom:10px}
.shop-banner .crumb a{color:#fff}
.shop-banner .crumb a:hover{color:#4ADE80}
/* shop layout */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:36px;padding:36px 0 64px}
.shop-aside{position:sticky;top:calc(var(--header-h) + 20px);align-self:start;max-height:calc(100vh - var(--header-h) - 40px);overflow-y:auto;overflow-x:hidden;padding-left:3px;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.18) transparent}
.shop-aside::-webkit-scrollbar{width:6px}
.shop-aside::-webkit-scrollbar-track{background:transparent}
.shop-aside::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:99px}
.shop-aside::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.3)}
.filter-group{border-bottom:1px solid var(--color-border);padding:14px 3px}
.filter-group:last-child{border-bottom:0}
.filter-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:600;color:var(--color-text-900);font-size:.95rem}
.filter-title svg{width:16px;height:16px;transition:transform .2s}
.filter-group.collapsed .filter-title svg{transform:rotate(-90deg)}
.filter-body{padding-top:10px}
.filter-body.hidden{display:none}
.check-row{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:.94rem;color:var(--color-text-700);cursor:pointer}
.check-row input{accent-color:var(--color-primary);width:16px;height:16px;cursor:pointer}
.check-row .cnt{color:var(--color-text-400);margin-left:auto;font-size:.84rem}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{display:inline-block;width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;background-clip:border-box;position:relative;transition:.15s}
.swatch:hover{transform:translateZ(0) scale(1.15)}
/* 选中：色块整体变深（叠加半透明黑）+ 圆圈正中白色对勾；悬停时加深更明显 */
/* 选中：不改变描边（继承基础样式，保证单击前后一致）；仅叠加半透明遮罩 + 白勾 */
.swatch.on::before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(15,23,42,.30)}
.swatch.on::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;
  transform:translate(-50%,-58%) rotate(-45deg)}
.swatch.on:hover{transform:scale(1.15)}
.swatch-more{width:30px;height:30px;border-radius:50%;border:1px dashed var(--bd);display:grid;place-items:center;font-weight:700;font-size:1.15rem;color:var(--t7);cursor:pointer;transition:.15s;line-height:1}

/* ==================== SYMBOL-FIX-20260919 ====================
   Color 筛选区「+/−」改用伪元素绘制：不依赖字体度量，横竖线严格正交、绝对居中。
   （此前用文本字符 '+' / '−'，不同字体下会偏斜、不居中。） */
.swatch-more{position:relative}
.swatch-more::before,.swatch-more::after{content:'';position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px;transform:translate(-50%,-50%)}
.swatch-more::before{width:15px;height:2px}                        /* 横线（＋ 和 − 共用） */
.swatch-more::after{width:2px;height:15px;transition:transform .18s}  /* 竖线（＋ 专有） */
.swatch-more.is-minus::after{transform:translate(-50%,-50%) scaleY(0)} /* 展开态：竖线收起 → 变减号 */

.swatch-more:hover{border-color:var(--p);color:var(--p);background:var(--p50)}
.swatch-more-old{width:22px;height:22px;border-radius:50%;border:1px dashed var(--color-border);font-size:.72rem;display:grid;place-items:center;cursor:pointer;color:var(--color-text-500)}
.show-more-btn{background:none;border:0;color:var(--color-primary);font-size:.82rem;cursor:pointer;padding:6px 0;font-weight:500}
/* toolbar & grid */
.shop-main{min-width:0}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.result-count{color:var(--color-text-500);font-size:.9rem}
.sort-control{display:flex;align-items:center;gap:8px;font-size:.9rem}
/* 🔴 2026-10-03：选择器必须**同时覆盖两种标记** ✗ —— 本项目两处写法不同：
     桌面 filaments.php:197  <div class="sort-control"><label>…</label><select id="sortSel">
     手机 filaments.php:208  <select class="sort-control" id="sortSelM">      ← 类在 select 自身 ✗
   原 CSS 只写 `.sort-control select` → **手机那一个从来没匹配上** ✗ →
   手机端一直是浏览器"原生控件"外观（用户截图报"太丑"✓，元凶就是它 ✓）
   现统一：`.sort-control select, select.sort-control` 两种写法都命中 ✓ */
.sort-control select, select.sort-control{-webkit-appearance:none;appearance:none;
  padding:10px 34px 10px 12px;border:1px solid var(--bd);border-radius:10px;background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;
  color:var(--t9);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:.15s;
  min-height:42px;line-height:1.2;width:auto}
.sort-control select:hover, select.sort-control:hover{border-color:var(--p)}
.sort-control select:focus, select.sort-control:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(31,178,100,.15)}

/* ==========================================================================
 * 2026-10-03（用户要求）：排序控件升级为**站内自定义下拉 .qcp**（与询盘弹层同一套 ✓）
 * 动机：原生 <select> 的**展开列表**由系统渲染、无法美化 ✗（用户："真的是系统默认的select，不好看"✓）
 * 做法：渐进增强 —— 原生 select 保留在 DOM（隐藏 ✓ 值/change 逻辑零改动 ✓）；无 JS 时自动回退原生 ✓
 *   · .qcp-lg   大号触发器（排序栏用，比弹层里的小触发器大一号 ✓）
 *   · .qcp-sort 共存标记：弹层那套 document 委托会跳过它 ✓（否则会按"颜色下拉"误处理 ✗）
 * ========================================================================== */
.qcp-lg{margin-top:0}
.qcp-lg .qcp-btn{padding:10px 12px;border-radius:10px;min-height:42px;font-size:.9rem;font-weight:500;gap:8px;color:var(--t9);max-width:100%}
.qcp-lg .qcp-btn:hover{border-color:var(--p);color:var(--t9)}
.qcp-lg.open .qcp-btn{border-color:var(--p);box-shadow:0 0 0 3px rgba(31,178,100,.15)}
.qcp-lg .qcp-list{margin-top:6px;padding:6px;min-width:100%;max-height:280px;border-radius:12px;border-color:var(--bd);box-shadow:0 16px 40px rgba(15,23,42,.16)}
.qcp-lg .qcp-item{padding:10px 12px;border-radius:9px;font-size:.9rem;color:var(--t7)}
.qcp-lg .qcp-item:hover,.qcp-lg .qcp-item.on{background:#ECFDF5;color:#128A4E}
.qcp-lg .qcp-item.on{font-weight:600}
/* 增强完成后隐藏原生 select（仍保留在 DOM → 值/事件照常 ✓） */
select.csel-off{display:none !important}

/* 2026-10-03：手机端排序控件位于屏幕**右侧**、浮层默认左对齐 → 会向右溢出被切 ✗
   （实测最长项 "Le plus de couleurs" 让浮层超出视口 ✗）
   → 手机端改为**右对齐、向左展开** ✓ 并限制最大宽度 ✓（永不超出视口 ✓） */
@media (max-width:680px){
  /* 右对齐 + 向左展开 ✓；宽度仍是"最长项"但被 max-width 兜住 → 永不超出视口 ✓
     ⚠️ 切勿改成 white-space:normal ✗ —— 浮层宽度受 min-width:100%（= 触发器宽）约束，
        允许换行会让"Tri : En vedette"折成两行 ✗（实测踩过 ✓） */
  .qcp-lg .qcp-list{left:auto;right:0;max-width:min(300px, calc(100vw - 32px))}
}

/* ==========================================================================
 * 2026-10-03（用户要求：逐页排查手机端"点击输入框被放大 → 横向滚动条"）
 * 上面那条 16px 兜底规则位于 **≤640px** 断点内 ✗ —— 会漏掉：
 *   · 手机**横屏**（iPhone 横屏视口宽 667~932px ✗）
 *   · **平板**（768~1024px ✓ 同样是触屏 ✗）
 * → 这些情况下 iOS/Android 依然"聚焦即放大" ✗
 * ✅ 补一条 `pointer: coarse`：**凡触屏设备一律 ≥16px**（与宽度无关 ✓ 不影响鼠标设备 ✓✓）
 * ⚠️ 这是触屏可用性兜底，不是样式偏好 ✓（系统只在 <16px 时才自动缩放 ✓）
 * ⚠️ `[contenteditable]` 一并兜住（富文本型输入同样会触发放大 ✗）
 * ========================================================================== */
@media (pointer: coarse){
  input, select, textarea, [contenteditable=""], [contenteditable="true"]{ font-size:16px !important; }
}
.mobile-filters{display:none}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shop-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;position:relative;cursor:pointer}
.shop-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.thumb{aspect-ratio:1/1;background:#F8FAFC;position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:opacity .25s}
.thumb img.alt{opacity:0}
.shop-card:hover .thumb img.alt{opacity:1}
.shop-card:hover .thumb img.main{opacity:0}
.shop-badge{position:absolute;top:10px;left:10px;z-index:3;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600;color:#fff}
.shop-badge.sale{background:var(--color-accent)}
.shop-badge.new{background:var(--color-primary)}
.shop-badge.hot{background:#1FB264;background:linear-gradient(135deg,#F08213,#E8590C)}
.shop-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.shop-cat{font-size:.72rem;color:var(--color-accent);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
/* 标题固定 2 行高度：超出省略、不足 2 行也占位，保证同排卡片高度一致 */
.shop-name{font-size:1rem;font-weight:600;color:var(--color-text-900);margin:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
a.shop-name:hover{color:var(--color-primary)}
.shop-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.78rem;color:var(--color-text-500)}
.shop-meta span{display:inline-flex;align-items:center;gap:4px}
.shop-meta svg{width:12px;height:12px;color:var(--color-primary)}
.shop-colors{display:flex;align-items:center;gap:6px;margin-top:8px}
.shop-colors i.cc{width:24px;height:24px;border-radius:50%;display:inline-block;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px rgba(15,23,42,.12);transition:transform .15s}
    .shop-colors i.cc:hover{transform:scale(1.18);box-shadow:0 0 0 2px var(--color-primary)}
    .shop-colors i.cc.on{transform:scale(1.12);box-shadow:0 0 0 2px var(--color-primary)}
.shop-colors .cc-more{font-size:.8rem;color:var(--color-text-700);font-weight:600;padding-left:2px}
    .shop-container{max-width:1400px;margin:0 auto;padding:0 24px}
.quote-add{position:absolute;left:50%;right:auto;bottom:12px;width:auto;margin:0;z-index:6;transform:translate(-50%,6px);box-shadow:0 6px 18px rgba(15,23,42,.16)}
.shop-card.picked .thumb img.alt{opacity:0}
.shop-card.picked:hover .thumb img.main{opacity:1}
    .quote-add.btn{padding:6px 14px;min-height:32px;justify-content:center;font-size:.84rem;opacity:.95;transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease}
    .quote-add.btn:hover{background:#F08213;border-color:#F08213;color:#fff;opacity:1}
    /* hover 才显示 Add to Quote（触屏设备始终显示） */
    @media (hover:hover) and (pointer:fine){
      .quote-add,.quote-add.btn{opacity:0;pointer-events:none}
      .shop-card:hover .quote-add,.shop-card:hover .quote-add.btn{opacity:.95;pointer-events:auto;transform:translate(-50%,0)}
    }
.empty-state{text-align:center;padding:60px 20px;color:var(--color-text-500)}
.empty-state.hidden{display:none}
.empty-state{display:flex;align-items:center;justify-content:center;width:100%;min-height:calc(100vh - 430px)}
.empty-state.hidden{display:none}
.empty-state .empty-state-blog{min-height:auto;padding:20px}
.empty-state-blog{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px;padding:40px 20px;text-align:center;color:var(--color-text-500)}
.empty-state-blog svg{color:#94A3B8;margin-bottom:16px;opacity:.7}
.empty-state-blog .t{font-size:1.1rem;font-weight:600;color:#334155;margin:0 0 6px}
.empty-state-blog .s{font-size:.9rem;color:#94A3B8;margin:0 0 18px;max-width:380px;line-height:1.55}
.empty-state-blog .btn{font-size:.85rem}
/* pagination */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:34px}
.pagination button{width:38px;height:38px;border:1px solid var(--color-border);border-radius:8px;background:#fff;cursor:pointer;font-weight:500;color:var(--color-text-700)}
.pagination button.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
/* floating quote bar + modal */
.quote-bar{position:fixed;bottom:20px;right:20px;z-index:90;display:inline-flex;width:auto;max-width:calc(100vw - 40px);align-items:center;gap:12px;background:var(--color-text-900);color:#fff;padding:10px;border-radius:999px;box-shadow:var(--shadow-lg);transform:translateY(120%);transition:transform .3s}
.quote-bar .qb-ico{display:none;width:26px;height:26px;align-items:center;justify-content:center}
.quote-bar .qb-ico svg{width:26px;height:26px}
.quote-bar.mini{width:56px;height:56px;padding:0;gap:0;justify-content:center;align-items:center;background:#F08213;border-radius:50%;cursor:pointer;transition:transform .3s,background .2s,box-shadow .2s}
.quote-bar.mini:hover{background:#D9700F;box-shadow:0 12px 28px rgba(240,130,19,.42)}
.quote-bar.mini .quote-count,.quote-bar.mini .qb-label,.quote-bar.mini .qb-view{display:none}
.quote-bar.mini .qb-ico{display:flex}
.quote-bar.show{transform:translateY(0)}
.quote-count{width:22px;height:22px;border-radius:50%;background:var(--color-accent);color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:700}
.quote-bar .btn{margin-left:4px;border-radius:100px}
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:200;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}
.modal-mask.open{opacity:1;visibility:visible}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:900px;width:100%;max-height:88vh;overflow:visible;transform:translate(var(--mx,0px),calc(var(--my,0px) + 16px));transition:.25s;will-change:transform}
.modal.dragging{transition:none!important}
.modal-mask.open .modal{transform:translate(var(--mx,0px),var(--my,0px))}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--color-border);position:sticky;top:0;background:#fff;cursor:grab;user-select:none;touch-action:none}
.modal-head.dragging{cursor:grabbing}
.modal-head h3{margin:0;font-size:1.1rem}
.modal-close{width:34px;height:34px;border:0;background:var(--color-bg-soft);border-radius:50%;cursor:pointer;font-size:1.15rem;color:var(--color-text-700);display:grid;place-items:center;padding:0;line-height:1;transition:background .25s ease,color .25s ease,transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s ease}
.modal-close:hover{background:#F08213;color:#fff;transform:rotate(180deg);box-shadow:0 6px 18px rgba(240,130,19,.38)}
.modal-close:active{transform:rotate(180deg) scale(.94)}
.modal-body{padding:20px 24px;max-height:calc(88vh - 74px);overflow-y:auto;overscroll-behavior:contain;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
/* 客服图：水平居中、底部与头部下边线齐平、顶部自然溢出弹层 */
.modal-head{overflow:visible;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.modal-kefu{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:192px;width:auto;pointer-events:none;user-select:none;z-index:2;filter:drop-shadow(0 8px 20px rgba(15,23,42,.18))}
/* 窄屏：隐藏，确保不遮挡标题文字 */
@media (max-width:680px){.modal-kefu{display:none}}
/* 窄屏：询盘行改为两行布局（图跨两行 / 名称+规格 / Remove 右上 / 数量第二行），避免挤成多行 */
@media (max-width:680px){
  .q-item{grid-template-columns:52px 1fr auto;column-gap:12px;row-gap:10px;align-items:start}
  .q-item>img{grid-row:1/span 2;align-self:start;width:52px;height:52px;object-fit:cover;border-radius:8px}
  .q-item>div:nth-child(2){grid-column:2;grid-row:1;min-width:0}
  .q-item .q-name,.q-item .name{word-break:break-word}
  .q-item .q-qty{grid-column:2;grid-row:2;justify-self:start;margin:0}
  .q-item .q-remove{grid-column:3;grid-row:1;align-self:start;min-width:auto;padding:2px 4px}
  .q-item .qcp{max-width:100%}
  .q-item .qcp-btn{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.q-item{display:grid;grid-template-columns:64px 1fr auto 104px;gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-border)}
.q-item .q-qty{margin:0;justify-self:end}                 /* 数量：靠中列右端，与 Remove 之间留白 */
.q-item .q-remove{justify-self:end;white-space:nowrap;min-width:80px;display:inline-flex;align-items:center;justify-content:flex-end;gap:5px}
.q-item .q-remove svg{width:13px;height:13px;flex-shrink:0}  /* 移除：固定最右列 */
.q-item img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.q-item .name{font-weight:600;color:var(--color-text-900);font-size:.92rem}
.q-item .var{font-size:.8rem;color:var(--color-text-500);margin-top:2px}
.q-item .qty{display:flex;align-items:center;gap:8px}
.qty-btn{width:26px;height:26px;border:1px solid var(--color-border);border-radius:6px;background:#fff;cursor:pointer;font-weight:600}
.q-item .qty input{width:44px;text-align:center;border:1px solid var(--color-border);border-radius:6px;padding:3px;font-family:inherit}
.q-remove{background:none;border:0;color:#94A3B8;cursor:pointer;font-size:.9rem;font-weight:600;transition:color .16s}   /* 移除按钮：默认灰 */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.form-grid .full{grid-column:1/-1}
.form-grid label{font-size:.8rem;color:var(--color-text-500);display:block;margin-bottom:4px}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:8px;font-family:inherit;font-size:.9rem;background:#fff}
/* 聚焦：品牌绿边框 + 绿光晕（与站内 .field 表单保持一致，替代浏览器默认黑色描边）*/
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(31,178,100,.15)}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:#A8B3C2}
.form-grid textarea{resize:vertical;min-height:70px}
.form-submit{margin-top:16px;width:100%}
.submit-ok{display:none;text-align:center;padding:26px 10px}
.submit-ok.show{display:block}
.submit-ok svg{width:52px;height:52px;color:var(--color-primary);margin:0 auto 12px}
@media (max-width:1024px){
  .shop-layout{grid-template-columns:1fr;gap:16px}
  .shop-aside{position:static;max-height:none}
  .mobile-filters{display:flex;gap:10px;margin-bottom:12px}
  .mobile-filters .btn{flex:1}
  /* ★ 断点统一：≤1024 显示手机工具栏时，同步隐藏 PC 工具栏（否则 1000px 附近两套同时出现） */
  .toolbar{display:block !important;margin-bottom:0 !important}
  .toolbar .sort-control{display:none !important}
  .toolbar .result-count{display:none}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .nav-menu{display:none}
  .menu-toggle{display:inline-flex}
  /* ★ 商品详情：≤1024 改单列（原「5fr 7fr」两列在窄屏下 .gallery/.info 各撑到 520px
     → 页面总宽 544px，手机端出现横向滚动条，2026-09-27 用户反馈）
     ⚠️ 两个必须注意的点（都踩过）：
       ① 用 `body .detail` 提高特异性 —— 基础规则 `.detail{5fr 7fr}` 在第 767 行（本段之后），
          同特异性下「后者胜」，不加前缀会被它覆盖（第一次修复因此无效）。
       ② 必须写 `minmax(0,1fr)` 而不是 `1fr` —— Grid 的 `1fr` = `minmax(auto,1fr)`，
          内容 min-content 大时列**不会收缩**，反而被长文本/缩略图条撑到 2400px+（第二次修复翻车）。 */
  body .detail{grid-template-columns:minmax(0,1fr);gap:26px}
  body .gallery{max-width:100%;min-width:0;margin:0 auto}
  body .detail .info{max-width:100%;min-width:0}
  body .gallery-main{max-width:100%}
  body .gal-thumb-wrap{max-width:100%;min-width:0}
  body .gallery-thumbs{min-width:0;max-width:100%}
}
@media (max-width:768px){
  /* 手机端商品列表单列（一行一个，避免两列太窄） */
  .shop-grid{grid-template-columns:1fr;gap:14px}
  .shop-body{padding:10px}
  /* 详情页：图片区随屏幕缩，缩略图左右留白收窄 */
  .gal-thumb-wrap{padding:0 26px}
  .detail{padding:14px 0 6px;gap:20px}
}
@media (max-width:480px){
  .shop-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  /* 长单词/长 URL（法语尤其明显）强制换行，避免撑破容器 */
  .detail, .info, .gallery, .pd-article, .pda-banner{overflow-wrap:break-word;word-break:break-word}
  /* 底部报价栏：手机端**不换行** + 字号/间距收紧（德语 Angebot anfordern、法语 Demander un devis
     等较长文案会折成两行，2026-09-28 用户反馈）*/
  .quote-bar{gap:8px;padding:10px;font-size:.8rem;max-width:calc(100vw - 24px)}
  .quote-bar .quote-count,
  .quote-bar .qb-label,
  .quote-bar .qb-view{white-space:nowrap;line-height:1.2}
  .quote-bar .qb-label{font-size:.8rem}
  .quote-bar .qb-view,
  .quote-bar .btn{margin-left:0;padding:9px 12px;font-size:.8rem;line-height:1.2;white-space:nowrap}
}

.crumb{font-size:.82rem;color:var(--color-text-500);padding:16px 0 0}
.crumb a{color:var(--color-text-500)}.shop-banner .crumb a:hover{color:#4ADE80}
/* detail layout */
.detail{display:grid;grid-template-columns:5fr 7fr;gap:48px;padding:22px 0 10px;align-items:start}
.gallery{position:relative;max-width:520px;margin:0}
.gallery-main{width:100%;aspect-ratio:1/1;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:#F8FAFC}
.gallery-main img{width:100%;height:100%;object-fit:contain;display:block}
.gal-thumb-wrap{position:relative;margin-top:12px;padding:0 34px}
.gallery-thumbs{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumbs img{flex:0 0 74px;width:74px;height:74px;object-fit:cover;border:2px solid transparent;border-radius:10px;cursor:pointer;transition:.15s}
.gal-nav{position:absolute;top:37px;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1px solid var(--color-border);background:#fff;cursor:pointer;display:none;place-items:center;z-index:2;box-shadow:0 2px 8px rgba(15,23,42,.12);color:var(--color-text-700);font-size:16px;line-height:1;padding:0 0 2px}
.gal-nav.show{display:grid}
.gal-nav:hover{border-color:var(--color-primary);color:var(--color-primary)}
.gal-nav.prev{left:0}
.gal-nav.next{right:0}
.gallery-thumbs img.on{border-color:var(--color-primary)}
.g-badge{position:absolute;top:14px;left:14px;z-index:3;background:var(--color-accent);color:#fff;padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:600}
.info h1{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:4px}
.info .cat{color:var(--color-accent);font-weight:600;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.info .lead{color:var(--color-text-500);margin:10px 0 16px;font-size:.98rem}
.rate-row{display:flex;align-items:center;gap:10px;margin:4px 0;font-size:.85rem;color:var(--color-text-500)}
.rate-track{width:180px;height:8px;background:var(--color-bg-soft);border-radius:99px;overflow:hidden}
.rate-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--color-primary),#7AE0A8)}
.opt{margin:18px 0}
.opt-label{font-weight:600;color:var(--color-text-900);font-size:.88rem;margin-bottom:8px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{display:inline-block;width:30px;height:30px;border-radius:50%;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px rgba(15,23,42,.1);transform:translateZ(0)}
.swatch .swatch-fill{display:block;width:100%;height:100%}
.swatch:hover{transform:scale(1.1)}
/* 选中：色块整体变深（叠加半透明黑）+ 圆圈正中白色对勾；悬停时加深更明显 */
/* 选中：不改变描边（继承基础样式，保证单击前后一致）；仅叠加半透明遮罩 + 白勾 */
.swatch.on::before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(15,23,42,.30)}
.swatch.on::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;
  transform:translate(-50%,-58%) rotate(-45deg)}
.swatch.on:hover{transform:scale(1.15)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1px solid var(--color-border);padding:7px 16px;border-radius:8px;font-size:.88rem;cursor:pointer;background:#fff;color:var(--color-text-700);font-family:inherit}
.pill.on{background:var(--color-text-900);color:#fff;border-color:var(--color-text-900)}
.quote-area{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.trustline{display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--color-text-500);padding-top:12px;border-top:1px solid var(--color-border)}
.trustline span{display:inline-flex;align-items:center;gap:6px}
.trustline svg{width:15px;height:15px;color:var(--color-primary)}
/* description blocks */
.block{padding:44px 0}
.block-alt{background:var(--color-bg-soft)}
.block h2{font-size:clamp(1.35rem,2.6vw,1.8rem)}
.feature-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.fitem{text-align:center;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px 14px}
.fitem svg{width:30px;height:30px;color:var(--color-primary);margin:0 auto 8px}
.fitem h4{margin:0 0 2px;font-size:.98rem}
.fitem p{font-size:.82rem;color:var(--color-text-500);margin:0}
/* tables */
table.data{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff;border-radius:var(--radius-md);overflow:hidden}
table.data th{background:var(--color-primary-50);color:var(--color-text-900);font-weight:600;text-align:left;padding:11px 14px;font-size:.86rem}
table.data td{padding:10px 14px;border-top:1px solid var(--color-border);color:var(--color-text-700)}
.notes{font-size:.8rem;color:var(--color-text-400);margin-top:10px}
/* related */
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.related-grid .mini-card img,.related-grid img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;display:block}
.mini-card{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:#fff;transition:.2s}
.mini-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.mini-card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.mini-card .mc-body{padding:12px}
.mini-card .mc-name{font-weight:600;color:var(--color-text-900);font-size:.9rem}
.mini-card .mc-cat{font-size:.75rem;color:var(--color-text-400)}
/* quote bar + modal */
.quote-bar{position:fixed;bottom:20px;right:20px;z-index:90;display:inline-flex;width:auto;max-width:calc(100vw - 40px);align-items:center;gap:12px;background:var(--color-text-900);color:#fff;padding:10px;border-radius:999px;box-shadow:var(--shadow-lg);transform:translateY(120%);transition:transform .3s}
.quote-bar .qb-ico{display:none;width:26px;height:26px;align-items:center;justify-content:center}
.quote-bar .qb-ico svg{width:26px;height:26px}
.quote-bar.mini{width:56px;height:56px;padding:0;gap:0;justify-content:center;align-items:center;background:#F08213;border-radius:50%;cursor:pointer;transition:transform .3s,background .2s,box-shadow .2s}
.quote-bar.mini:hover{background:#D9700F;box-shadow:0 12px 28px rgba(240,130,19,.42)}
.quote-bar.mini .quote-count,.quote-bar.mini .qb-label,.quote-bar.mini .qb-view{display:none}
.quote-bar.mini .qb-ico{display:flex}
.quote-bar.show{transform:translateY(0)}
.quote-count{width:22px;height:22px;border-radius:50%;background:var(--color-accent);color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:700}
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:200;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}
.modal-mask.open{opacity:1;visibility:visible}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:900px;width:100%;max-height:88vh;overflow:visible;transform:translate(var(--mx,0px),calc(var(--my,0px) + 16px));transition:.25s;will-change:transform}
.modal.dragging{transition:none!important}
.modal-mask.open .modal{transform:translate(var(--mx,0px),var(--my,0px))}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--color-border);position:sticky;top:0;background:#fff}
.modal-head h3{margin:0;font-size:1.1rem}
.modal-close{width:34px;height:34px;border:0;background:var(--color-bg-soft);border-radius:8px;cursor:pointer;font-size:1.2rem}
.modal-body{padding:20px 24px;max-height:calc(88vh - 74px);overflow-y:auto;overscroll-behavior:contain;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
/* 客服图：水平居中、底部与头部下边线齐平、顶部自然溢出弹层 */
.modal-head{overflow:visible;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.modal-kefu{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:192px;width:auto;pointer-events:none;user-select:none;z-index:2;filter:drop-shadow(0 8px 20px rgba(15,23,42,.18))}
/* 窄屏：隐藏，确保不遮挡标题文字 */
@media (max-width:680px){.modal-kefu{display:none}}
.q-item{display:grid;grid-template-columns:64px 1fr auto 104px;gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-border)}
.q-item .q-qty{margin:0;justify-self:end}                 /* 数量：靠中列右端，与 Remove 之间留白 */
.q-item .q-remove{justify-self:end;white-space:nowrap;min-width:80px;display:inline-flex;align-items:center;justify-content:flex-end;gap:5px}
.q-item .q-remove svg{width:13px;height:13px;flex-shrink:0}  /* 移除：固定最右列 */
.q-item img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.q-item .name{font-weight:600;font-size:.92rem;color:var(--color-text-900)}
.q-item .var{font-size:.8rem;color:var(--color-text-500)}
.q-remove{background:none;border:0;color:#94A3B8;cursor:pointer;font-weight:600;transition:color .16s}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.form-grid .full{grid-column:1/-1}
.form-grid label{font-size:.8rem;color:var(--color-text-500);display:block;margin-bottom:4px}
.form-grid input,.form-grid textarea{width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:8px;font-family:inherit;font-size:.9rem}
.form-submit{margin-top:16px;width:100%}
.submit-ok{display:none;text-align:center;padding:24px 10px}
.submit-ok.show{display:block}
.submit-ok svg{width:50px;height:50px;color:var(--color-primary);margin:0 auto 10px}
@media (max-width:1024px){
  .detail{grid-template-columns:1fr;gap:26px}
  .feature-icons{grid-template-columns:repeat(3,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .nav-menu{display:none}.menu-toggle{display:inline-flex}
}
@media (max-width:768px){
  .feature-icons{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}

/* ===== Blog list & detail ===== */

:root{--p:#1FB264;--pd:#128A4E;--p50:#ECFDF5;--o:#F08213;--t9:#0F172A;--t7:#334155;--t5:#64748B;--t4:#94A3B8;--bg:#fff;--soft:#F8FAFC;--bd:#E2E8F0;--radius:14px;--w:1400px;--hh:72px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Poppins',system-ui,sans-serif;font-size:16px;line-height:1.65;color:var(--t7);background:var(--bg)}
img,svg{max-width:100%;display:block}
a{color:var(--pd);text-decoration:none}a:hover{color:var(--p)}
h1,h2,h3,h4{color:var(--t9);font-weight:700;line-height:1.3;margin:0 0 .5em;letter-spacing:-.01em}
.container{max-width:var(--w);margin:0 auto;padding:0 24px}
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);height:var(--hh)}
.site-header .container{width:100%}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo img{height:60px;width:auto}.site-footer .logo img{height:48px}
.nav-menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-menu>li>a{padding:8px 12px;border-radius:8px;color:var(--t7);font-weight:500;font-size:.95rem;display:block}
.nav-menu>li>a:hover,.nav-menu>li>a.active{background:var(--p);color:#fff}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;transition:.2s}
.btn-primary{background:var(--p);color:#fff}.btn-primary:hover{background:var(--pd);color:#fff;transform:translateY(-1px)}
.btn-sm{padding:7px 14px;font-size:.85rem}
/* banner */
.shop-banner{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('../images/filament/filament_banner.jpg') center/cover no-repeat;color:#fff;padding:104px 0}
.shop-banner h1{color:#fff;margin:0;font-size:clamp(1.9rem,4vw,2.6rem)}
.shop-banner .crumb{color:rgba(255,255,255,.85);font-size:.84rem;margin-bottom:8px}
.shop-banner .crumb a{color:#fff;border-bottom:1px solid transparent}.shop-banner .crumb a:hover{color:#4ADE80}
/* layout */
.blog-wrap{display:grid;grid-template-columns:300px 1fr;gap:36px;padding:36px 0 60px}
.cats{position:sticky;top:calc(var(--hh,72px) + 20px);align-self:start}
.cat-title{font-size:.86rem;font-weight:600;color:var(--t5);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.cat-list{display:flex;flex-direction:column;gap:2px}
.cat-list a{padding:9px 12px;border-radius:8px;color:var(--t7);font-size:.92rem;display:flex;justify-content:space-between;align-items:center;transition:.15s}
.cat-list a:hover{background:var(--p50);color:var(--pd)}
.cat-list a.on{background:var(--p);color:#fff;font-weight:500}
.cat-list a .n{color:var(--t4);font-size:.8rem;margin-left:8px}
.cat-list a.on .n{color:#fff}
/* feature post */
.feature-post{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--bd);border-radius:var(--radius);overflow:hidden;margin-bottom:30px;background:#fff}
.feature-post img{width:100%;height:100%;object-fit:cover;min-height:320px}
.fp-body{padding:34px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.fp-tag{font-size:.76rem;font-weight:600;color:var(--o);text-transform:uppercase;letter-spacing:.05em}
.fp-body h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0}
.fp-date{font-size:.82rem;color:var(--t4)}
.fp-body p{color:var(--t5);font-size:.95rem;margin:0}
/* posts 卡片列：**由 JS 按断点分列（3/2/1）**，让阅读顺序 = 发布时间顺序（左→右→下一行）。
   原实现 `.posts{columns:3}` 是 CSS 多列：**按列填充**，最新的一批会全堆在第一列（2026-09-30 用户反馈）。
   ⚠️ 纯 CSS 无法解决：卡片高度不一致（实测 315~575px），浏览器按「高度平衡」分列 → 分列结果不确定，
      只改数据顺序无法保证按行 → 必须 JS 重排。
   下面保留 `columns:3` 作为**无 JS 时的回退**（外观与改动前一致；DOM 顺序本身就是发布时间顺序，不影响 SEO）
   加 `.js-cols` 后（JS 已接管）切到 flex 三列，列内顺序由 JS 控制。 */
.posts{columns:3;column-gap:22px}
.posts.js-cols{display:flex;align-items:flex-start;gap:22px;column-count:auto;column-width:auto}
.posts>.pcol{flex:1 1 0;min-width:0}
.post-card{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 20px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);border-radius:var(--radius);overflow:hidden;transition:.25s;position:relative;cursor:pointer}
/* 整卡可点击（stretched link）：标题链接的伪元素铺满整张卡片，图片与 Read More 仍是独立链接 */
.post-card h3 a::after{content:'';position:absolute;inset:0;z-index:1}
.post-card .pc-img,.post-card .read-more{position:relative;z-index:2}
.post-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,23,42,.1)}
.post-card img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}
/* 无图卡纯文字 + 顶部分类色条（瀑布流中高度自然约为有图卡一半） */
.post-card.no-img .pc-body{padding-top:22px}
.pc-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-cat{font-size:.74rem;font-weight:600;color:var(--o);text-transform:uppercase;letter-spacing:.05em}
.pc-body h3{font-size:1.05rem;line-height:1.4;margin:0}
.pc-body h3 a{color:var(--t9)}.pc-body h3 a:hover{color:var(--p)}
.pc-date{font-size:.8rem;color:var(--t4)}
.pc-body p{font-size:.88rem;color:var(--t5);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.read-more{font-size:.86rem;font-weight:600;color:var(--pd);display:inline-flex;align-items:center;gap:4px}
.read-more:hover{color:var(--p)}.read-more::after{content:'→';transition:transform .2s}.post-card:hover .read-more::after{transform:translateX(3px)}
/* pagination */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:44px}
.pagination button{width:40px;height:40px;border:1px solid var(--bd);border-radius:9px;background:#fff;font-weight:500;color:var(--t7);cursor:pointer}
.pagination button.on{background:var(--p);color:#fff;border-color:var(--p)}
.pagination a.pg-btn,.pagination span.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 14px;border:1px solid var(--bd);border-radius:9px;background:#fff;font-weight:500;font-size:.88rem;color:var(--color-text-700);text-decoration:none}
.pagination a.pg-btn:hover{border-color:var(--p);color:var(--p)}
.pagination span.pg-btn.on{background:var(--p);color:#fff;border-color:var(--p)}
.pagination a.pg-btn.off{opacity:.45;pointer-events:none}
.pagination span.gap{border:none;background:none;color:var(--color-text-400);cursor:default;min-width:auto;padding:0 2px}
@media (max-width:1100px){
  .blog-wrap{grid-template-columns:1fr}
  .cats{position:static;display:flex;flex-wrap:wrap;gap:8px}
  .cat-list{flex-direction:row;flex-wrap:wrap;gap:6px}
  .feature-post{grid-template-columns:1fr}
  .nav-menu{display:none}
}
@media (max-width:900px){.posts{columns:2}}
@media (max-width:600px){.posts{columns:1}}

:root{--p:#1FB264;--pd:#128A4E;--p50:#ECFDF5;--o:#F08213;--t9:#0F172A;--t7:#334155;--t5:#64748B;--t4:#94A3B8;--bg:#fff;--soft:#F8FAFC;--bd:#E2E8F0;--radius:14px;--w:1400px;--hh:72px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Poppins',system-ui,sans-serif;font-size:16px;line-height:1.75;color:var(--t7);background:var(--bg)}
img,svg{max-width:100%;display:block}
a{color:var(--pd);text-decoration:none}a:hover{color:var(--p)}
h1,h2,h3,h4{color:var(--t9);font-weight:700;line-height:1.3;margin:0 0 .5em;letter-spacing:-.01em}
.container{max-width:var(--w);margin:0 auto;padding:0 24px}
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);height:var(--hh)}
.site-header .container{width:100%}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo img{height:60px;width:auto}.site-footer .logo img{height:48px}
.nav-menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-menu>li>a{padding:8px 12px;border-radius:8px;color:var(--t7);font-weight:500;font-size:.95rem;display:block}
.nav-menu>li>a:hover,.nav-menu>li>a.active{background:var(--p);color:#fff}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;transition:.2s}
.btn-primary{background:var(--p);color:#fff}.btn-primary:hover{background:var(--pd);color:#fff;transform:translateY(-1px)}
.btn-sm{padding:7px 14px;font-size:.85rem}
/* crumbs */
.crumb{padding:22px 0 4px;font-size:.84rem;color:var(--t5)}
.crumb a{color:var(--t5)}.crumb a:hover{color:var(--pd)}
/* article */
.article{max-width:1500px;margin:0 auto;padding:20px 0 10px}
.article h1{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.25}
.meta{display:flex;align-items:center;gap:14px;color:var(--t4);font-size:.86rem;flex-wrap:wrap;margin:14px 0 24px;padding-bottom:22px;border-bottom:1px solid var(--bd)}
.meta .cat{color:var(--o);font-weight:600}
.meta svg{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:7px}
.cover{border-radius:var(--radius);margin:0 0 28px;width:100%;aspect-ratio:16/8;object-fit:cover}
.article h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin-top:1.6em}
.article h3{font-size:1.15rem;margin-top:1.4em}
.article p{color:var(--t7);margin:0 0 1.1em}
.article img.inset{border-radius:12px;margin:14px auto;width:100%}
/* 正文内图片水平居中（含后台编辑器插入的原始 <img>，如带 width 属性但宽度小于容器的图） */
.article-body img{display:block;margin-left:auto;margin-right:auto;max-width:100%;height:auto}
/* 正文视频：本地上传的 <video> 与 YouTube/TikTok 嵌入的 <iframe> 自适应 */
.article-body video{width:100%;max-width:100%;height:auto;display:block;margin:18px auto;border-radius:12px;background:#000}
.article-body iframe{width:100%;max-width:100%;aspect-ratio:16/9;height:auto;display:block;margin:18px auto;border:0;border-radius:12px;background:#000}
.article ul,.article ol{padding-left:1.4em;margin:0 0 1.2em}
.article li{margin-bottom:.5em}
.article blockquote{border-left:4px solid var(--p);background:var(--p50);padding:16px 20px;border-radius:0 12px 12px 0;margin:1.4em 0;color:var(--t7)}
.article blockquote p{margin:0}
.callout{background:var(--soft);border:1px solid var(--bd);border-radius:12px;padding:18px 20px;margin:1.4em 0}
.callout b{color:var(--t9)}
.article table{width:100%;border-collapse:collapse;font-size:.9rem;margin:1.4em 0;background:#fff}
.article th{background:var(--p50);color:var(--t9);text-align:left;padding:11px 14px;font-weight:600}
.article td{padding:10px 14px;border-top:1px solid var(--bd)}
/* tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 18px}
.tags a{background:var(--soft);border:1px solid var(--bd);border-radius:999px;padding:5px 14px;font-size:.8rem;color:var(--t5)}
.tags a:hover{border-color:var(--p);color:var(--pd)}
/* share */
.share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:20px;background:var(--soft);border-radius:10px}
.share .lbl{font-size:.86rem;color:var(--t5);font-weight:500}
.share a{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#475569;background:rgba(255,255,255,.9);border:1px solid var(--bd);transition:.2s}
.share a:hover{transform:translateY(-2px);opacity:.9}
.share a svg{width:16px;height:16px}
.share .s-fb svg{width:19px}
.share .s-in svg{width:21px}
.share .s-mail svg{width:19px}
.share a:hover{color:#fff;background:#0F172A;border-color:#0F172A}
/* share 图标统一黑白（彩色底已移除） */
/* prev next */
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:26px 0}
.pager a{border:1px solid var(--bd);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;transition:.2s;color:var(--t7)}
.pager a:hover{border-color:var(--p);box-shadow:0 8px 24px rgba(31,178,100,.08)}
.pager .dir{font-size:.76rem;color:var(--t4);text-transform:uppercase;letter-spacing:.06em}
.pager .ttl{font-weight:600;color:var(--t9);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.pager a.off{opacity:.5;pointer-events:none}
.pager .next{text-align:right;align-items:flex-end}
.pager .next .ttl::after{content:' →'}
.pager .prev .ttl::before{content:'← '}
.form-err-tip{position:absolute;z-index:500;background:#0F172A;color:#fff;font-size:.8rem;padding:7px 10px;border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.25);pointer-events:none;animation:errIn .18s ease;max-width:180px;width:max-content;line-height:1.35;white-space:normal}
@keyframes errIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* footer 样式统一使用文件前部定义（含完整响应式断点），此处为重复定义已移除 */
@media (max-width:1024px){.nav-menu{display:none}.pager{grid-template-columns:1fr}}

/* ===== Contact & service forms ===== */
.contact-hero{background:linear-gradient(180deg,var(--p50),#fff);padding:60px 0 46px;text-align:center}
.contact-hero h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 6px}
.contact-hero p{color:var(--t5);margin:0}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:0;max-width:1100px;margin:30px auto 50px;background:#fff;border:1px solid var(--bd);border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(15,23,42,.08)}
.info-pane{background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;padding:42px 40px}
.info-pane h2{color:#fff;font-size:clamp(1.5rem,2.6vw,1.9rem);margin:0 0 14px}
.info-pane .lede{color:rgba(255,255,255,.85);font-size:.95rem;margin:0 0 26px;line-height:1.6}
.info-list{display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
.info-row{display:flex;gap:12px;align-items:flex-start}
.info-row .ic{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex-shrink:0}
.info-row .ic svg{width:18px;height:18px;color:#fff}
.info-row b{display:block;font-weight:600;color:#fff;font-size:.92rem}
.info-row span{display:block;color:rgba(255,255,255,.78);font-size:.86rem;margin-top:1px}
.info-tips{background:rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;font-size:.84rem;color:rgba(255,255,255,.85);line-height:1.55}
.info-tips b{color:#fff}
.info-social{display:flex;gap:10px;margin-top:8px}
.info-social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;transition:.2s}
.info-social a:hover{background:#fff;color:var(--pd)}
.info-social svg{width:18px;height:18px}
.form-pane{padding:36px 40px}
.form-pane h2{font-size:1.4rem;margin:0 0 6px}
.form-pane .lede{color:var(--t5);font-size:.88rem;margin:0 0 22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:.82rem;font-weight:500;color:var(--t7);margin-bottom:5px}
.field label .req{color:#dc2626;margin-left:2px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--bd);border-radius:9px;background:#fff;font-family:inherit;font-size:.92rem;color:var(--t9);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(31,178,100,.15)}

/* ==========================================================================
 * 2026-10-03（用户反馈）：手机端点/双击**弹层里的按钮、输入框、复选框**时，系统会把页面**放大**
 *   → 放大后视口变窄 → 出现**横向滚动条** → 严重妨碍操作 ✓
 * 原因：移动浏览器对"可点区域"默认启用**双击缩放**（double-tap to zoom）✓
 * 修法：`touch-action: manipulation` —— 保留单指滚动与**双指缩放**（不损无障碍 ✓），
 *       仅**禁用双击缩放** ✓（官方推荐做法 ✓）
 * ⚠️ 不覆盖 `touch-action:none` 的元素（如 .modal-head 拖拽把手 ✓）：
 *    本规则是**元素级**选择器，.modal-head 是类选择器，优先级更高 ✓
 * ⚠️ touch-action **不继承**，但浏览器判定手势时会看祖先链 ✓
 *    → 拖拽/画廊容器上已有的 `touch-action:none` 仍然有效 ✓
 * ========================================================================== */
button, [role="button"], input, select, textarea, label, summary, a[href] { touch-action: manipulation; }
.field textarea{resize:vertical;min-height:100px}
.form-submit{margin-top:18px;width:100%;padding:14px;font-size:.98rem}
.form-success{display:none;text-align:center;padding:30px 20px}
.form-success.show{display:block}
.form-success svg{width:46px;height:46px;color:var(--p);margin:0 auto 10px}
.form-error{display:none;background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;border-radius:10px;padding:11px 16px;margin:14px 0 0;font-size:.9rem;text-align:center}
.form-error.show{display:block}
/* services row */
.services-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:0 auto 60px}
.svc-card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;transition:.25s;color:var(--t7)}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.08);border-color:var(--p)}
.svc-ic{width:46px;height:46px;border-radius:11px;background:var(--p50);color:var(--p);display:grid;place-items:center;margin-bottom:4px}
.svc-ic svg{width:22px;height:22px}
.svc-card h3{margin:0;font-size:1.1rem}
.svc-card p{margin:0;color:var(--t5);font-size:.88rem;flex:1}
.svc-card .more{font-weight:600;color:var(--pd);font-size:.88rem;margin-top:8px;align-self:flex-start}
.svc-card .more::after{content:' →';transition:transform .2s}
.svc-card:hover .more::after{transform:translateX(3px)}
.svc-card:hover .more{color:var(--p)}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr;margin:20px 16px 36px}.info-pane{padding:32px 24px}.form-pane{padding:28px 24px}.form-grid{grid-template-columns:1fr}.services-row{grid-template-columns:1fr;margin:0 16px 40px}}

/* ===== Contact tabs ===== */
.ctabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:1400px;margin:8px auto 0;position:relative;z-index:2}
.ctab{position:relative;background:#fff;border:1px solid var(--bd);border-radius:14px 14px 0 0;border-bottom:0;padding:18px 16px 16px;font-family:inherit;font-size:.95rem;font-weight:600;color:var(--t7);cursor:pointer;text-align:center;transition:.2s;box-shadow:0 -6px 16px rgba(15,23,42,.04)}
.ctab:hover{color:var(--pd)}
.ctab .tt{display:block}
.ctab .sub{display:block;font-size:.78rem;font-weight:400;color:var(--t4);margin-top:2px}
/* 2026-10-03 用户要求：选中态改为**辅橙 #F08213**（PC + 手机一致 ✓）
   ⚠️ 箭头 `::after` 的 border-top-color 必须与背景同步，否则桌面"标签小三角"会残留绿色 ✗ */
.ctab.on{background:linear-gradient(135deg,#f08213,#f08213);color:#fff;border-color:transparent;transform:translateY(-6px);box-shadow:0 12px 28px #f0821342}
.ctab.on .sub{color:rgba(255,255,255,.82)}
.ctab.on::after{content:'';position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-top-color:#f08213;border-bottom:none}
.cpanels{max-width:1400px;margin:0 auto 60px;background:#fff;border:1px solid var(--bd);border-radius:0 0 18px 18px;overflow:hidden;box-shadow:0 14px 40px rgba(15,23,42,.08)}
.cpanel{display:none}
.cpanel.active{display:grid;grid-template-columns:1.1fr 1fr;animation:cFade .35s ease}
@keyframes cFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cpanel .info-pane{border-radius:0}
.cpanel .form-pane{border-radius:0}
/* 2026-10-03：手机端（≤960px）把三个 Tab 从「三块独立卡片」改为**一体式分段列表** ✓
   原状态：.ctab 沿用桌面样式（上圆角 14px、无下边框、盒阴影）→ 纵向叠起来形成明显**缝隙/盖楼感** ✗；
           且外层 .cpanels 满宽 + 内层 .cpanel 又 inset 16px → 出现双重边距断层 ✗
   新样式：① 三个 Tab 合成一张卡片，行间用 1px 分隔线 ✓
           ② 选中态 = 整行绿色填充（不再"浮起来一格"）✓
           ③ 标题左对齐、副标题右对齐（紧凑列表观感）✓
           ④ Tab 卡片与内容面板**同边距、零间距、圆角对接** → 整体一块，无断层 ✓
   ⚠️ PC（>960px）仍是三列文件夹标签样式，完全不受影响 ✓ */
@media (max-width:960px){
  .ctabs{grid-template-columns:1fr;gap:0;margin:0 16px;background:#fff;border:1px solid var(--bd);border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 -6px 16px rgba(15,23,42,.04)}
  /* ↑ margin 由后面的「收窄边距」规则覆盖为 -16px（见本断点末尾）✓ */
  .ctab{border:0;border-radius:0;border-bottom:1px solid var(--bd);box-shadow:none;padding:14px 16px;text-align:left;font-size:.95rem}
  .ctab:last-child{border-bottom:0}
  /* ⚠️ 不要做「标题左 / 副标题右」的分栏：法语副标题（Filament et marque privée sur mesure）较长，
     在 350px 宽里会被 nowrap 挤到换行 → 行高参差（实测 73/50/95 ✗）。
     改回上下堆叠、统一左对齐 → 三行高度自然一致 ✓ */
  .ctab .tt{display:block;font-size:.95rem}
  .ctab .sub{display:block;margin-top:3px;text-align:left;font-size:.78rem;white-space:normal}
  .ctab.on{transform:none;background:linear-gradient(135deg,#f08213,#f08213);color:#fff;border-bottom-color:transparent}
  .ctab.on::after{display:none}
  /* 2026-10-03 追加（用户要求）：手机端**收窄左右外边距**，让中间内容显示得更大 ✓
     原状态：容器 padding 24px + 卡片自身 margin 16px = **每侧 40px** ✗（390px 视口下占 10%，内容被挤小）
     做法：卡片用 **-16px 负外边距**抵消容器的 24px 左右 padding → 实际离屏 **8px** ✓
     ⚠️ 负值仍在容器 padding(24px) 范围内 → 不会横向溢出 ✓
     ⚠️ PC（>960px）不受影响：容器 padding 与三列标签布局原样 ✓ */
  .ctabs{margin:0 -16px}
  /* 2026-10-03 追加（用户要求）：手机端把表单 textarea 加高，让占位文字**一屏看完、不用滚动** ✓
     实测（390px 视口，占位文字临时写进 value 量 scrollHeight）：
       en 122px / fr·de·es·pt·it·ru **147px**（最长）/ ko·cn 98px —— 而当前只有 98px ✗
     → 取 160px（147 + 13 余量）✓
     ⚠️ 作用域安全：`.field` 类**只在 contact.php 使用**（其它页面的留言框是 `.full` + `.form-grid`）✓
     ⚠️ PC（>960px）保持原 min-height:100px ✓ 不变 */
  .field textarea{min-height:160px}
  .cpanels{margin:0 -16px 40px;border-radius:0 0 14px 14px}
  .cpanel.active{grid-template-columns:1fr;margin:0}
}

/* ===== About us ===== */
.about-hero{background:linear-gradient(180deg,var(--p50),#fff);padding:60px 0 40px;text-align:center}
.about-hero h1{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:0 0 8px}
.about-hero p{color:var(--t5);margin:0;max-width:760px;margin-left:auto;margin-right:auto}
.about-block{padding:80px 0}   /* 栏目间距与全站 section 节奏一致（80+80=160px） */
.about-intro{display:grid;grid-template-columns:.8fr 1fr;align-items:center}   /* 图片列比原来宽 20% */
.about-intro h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin:0 0 16px}
.about-intro p{color:var(--t5);font-size:.96rem;line-height:1.8;margin:0 0 14px}
.about-intro .stats-line{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px}
.about-intro .sl-num{font-size:1.7rem;font-weight:700;color:var(--p);line-height:1}
.about-intro .sl-lb{font-size:.82rem;color:var(--t4);margin-top:4px}
.about-intro img{border-radius:18px;width:100%;aspect-ratio:16/11;object-fit:cover;box-shadow:0 18px 40px rgba(15,23,42,.12)}
/* ===== Banner 视频（后台可传 mp4/mov/webm）=====
   规格与图片一致：铺满容器、超出部分裁剪（object-fit:cover）、文字压在上层 */
.shop-banner{position:relative;overflow:hidden}
.banner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;background:#0F172A}
.banner-shade{position:absolute;inset:0;background:rgba(0,0,0,.38);z-index:1;pointer-events:none}
.shop-banner>.container{position:relative;z-index:2}
/* 公司图片画廊（about 页 Who We Are + 首页工厂展示共用）=====
   规格：3:2 比例、图片最大宽 700px、高度等比、超出容器裁剪（object-fit:cover）
   箭头位置/样式对齐首页 .products-wrap（放在图片两侧留白里） */
.gal-wrap{position:relative;width:100%;max-width:796px;margin:0 auto;padding:0 48px}
.gal-viewport{border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(15,23,42,.12);height:100%}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;aspect-ratio:3/2;scrollbar-width:none}
.gal-track::-webkit-scrollbar{display:none;height:0}
.gal-item{flex:0 0 100%;width:100%;height:100%;margin:0;overflow:hidden}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--t9);border:1px solid var(--bd);box-shadow:0 6px 18px rgba(15,23,42,.12);display:grid;place-items:center;cursor:pointer;z-index:2;padding:0;transition:background .18s,color .18s,border-color .18s}
.gal-nav:hover{background:var(--p);color:#fff;border-color:var(--p)}
.gal-nav svg{width:20px;height:20px}
.gal-prev{left:26px}.gal-next{right:26px}   /* 圆心正好落在图片边缘线上（wrap 留白 48px - 22px 半个箭头） */
.gal-dots{position:absolute;left:48px;right:48px;bottom:18px;display:flex;gap:8px;justify-content:center;z-index:2}
.gal-dots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.62);box-shadow:none;transition:background .2s,transform .2s}
.gal-dots i.on{background:#1FB264;transform:scale(1.12)}
/* 首页工厂展示位：图片铺满整个容器（无底色），箭头移到容器外侧留白里（48px 与栅格间隙等宽，正好不压到右侧文字） */
.factory-visual .gal-wrap{max-width:none;height:100%;padding:0;margin:0}
.factory-visual .gal-viewport{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);height:100%}
.factory-visual .gal-track{aspect-ratio:auto;height:100%}
.factory-visual .gal-prev{left:-22px}
.factory-visual .gal-next{right:-22px}
.factory-visual .gal-dots{left:0;right:0;bottom:18px}
@media (max-width:1024px){
  /* 单列布局：图片铺满整列（不额外缩进），箭头负偏移到列外，圆心贴图片边缘 */
  .factory-grid{padding:0}
  .factory-visual .gal-prev{left:-18px}
  .factory-visual .gal-next{right:-18px}
}
@media (max-width:680px){
  /* 手机：图片铺满整列（把 24px 留白还给图片），箭头用负偏移移到列外，
     圆心依旧压在图片边缘线上（36px 箭头 → 半宽 18），箭头外露部分正好落在 .container 的 24px 内边距里 */
  .gal-wrap{padding:0}
  .gal-prev{left:-18px}
  .gal-next{right:-18px}
  .gal-nav{width:36px;height:36px}
  .gal-nav svg{width:17px;height:17px}
  .gal-dots{left:0;right:0;bottom:14px}
  .gal-dots i{width:11px;height:11px}
}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px}
.proc-card{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden;transition:.25s}
.proc-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.1)}
.proc-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proc-card .pc2{padding:16px 18px}
.proc-ph{aspect-ratio:4/3;background:linear-gradient(135deg,var(--p50),#D7F5E4);display:grid;place-items:center}
.proc-ph span{font-size:2.1rem;font-weight:800;color:var(--p);opacity:.55;letter-spacing:.02em}
.proc-card .step{font-size:.72rem;font-weight:600;color:var(--o);text-transform:uppercase;letter-spacing:.05em}
.proc-card h3{margin:4px 0 0;font-size:1rem;transition:color .25s ease}
.proc-card:hover h3{color:var(--p)}
.proc-card p{margin:4px 0 0;font-size:.84rem;color:var(--t5);line-height:1.55}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px}
/* 团队区：一行 4 个，超出左右滚动（复用首页 products-wrap 箭头）*/
.team-rail{grid-auto-flow:column;grid-auto-columns:calc(25% - 15px);gap:20px;align-items:stretch;padding-bottom:52px;margin-bottom:-52px}   /* 卡片等高（以最高的为基准） */   /* 底部留白 ≥ 阴影扩散范围，避免 hover 投影被切割 */   /* 一行正好 4 个（3 个间隙 ×20px ÷4 = 15px） */
@media (max-width:1024px){.team-rail{grid-auto-columns:calc((100% - 20px) / 2)}}
@media (max-width:680px){.team-rail{grid-auto-columns:100%}}   /* 手机端整张卡片，不露一半 */
/* 成员少于 4 个：按实际人数分列并整体居中（不再左侧挤、右侧留空） */
.team-grid.few{grid-template-columns:repeat(var(--tn,3),minmax(0,300px));justify-content:center}
.team-card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:24px 18px;text-align:center;transition:.25s;
  height:100%;display:flex;flex-direction:column;align-items:center}   /* 卡片等高：拉伸填满栅格行高 */
.team-card .team-av{flex-shrink:0}
.team-card p{margin-top:auto}   /* 描述贴底，短内容不留突兀空隙 */
.team-card .team-av{transition:transform .35s cubic-bezier(.2,.9,.3,1.15),box-shadow .3s ease}
.team-card h3{transition:color .25s ease}
.team-card:hover .team-av{transform:scale(1.09);box-shadow:0 6px 18px rgba(31,178,100,.22)}
.team-card:hover h3{color:var(--color-primary)}
.team-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.1)}
.team-av{width:92px;height:92px;margin:0 auto 14px;border-radius:50%;background:#dcdcdc;color:#6B7280;display:grid;place-items:center;font-size:1.9rem;font-weight:700;overflow:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1.15)}
.team-card:hover .team-av{transform:scale(1.06)}
.team-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.team-card h3{margin:0;font-size:1.02rem;transition:color .25s ease}
.team-card:hover h3{color:var(--p)}
.team-card .role{font-size:.82rem;color:var(--t5);font-weight:500;margin:2px 0 6px}   /* 职位：灰色 */
.team-card .team-mail{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:.78rem;color:var(--o);font-weight:500;margin:0 0 10px;line-height:1.4;word-break:break-all}   /* 邮箱：橙色点睛 */
.team-card .team-mail svg{width:13px;height:13px;flex-shrink:0}
.team-card .team-mail:hover{color:#C96A0C;text-decoration:underline}
.team-card p{font-size:.82rem;color:var(--t5);margin:0;line-height:1.55;text-align:center}
.qual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px}
.qual-card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:24px 20px;transition:.2s;text-align:center}
.qual-card p{text-align:left}      /* 图标与标题居中、描述左对齐 */
.qual-card:hover{border-color:var(--p);box-shadow:0 16px 34px rgba(15,23,42,.12);transform:translateY(-4px)}
.qual-card:hover{border-color:var(--p)}
.qual-card svg{width:26px;height:26px;color:var(--p);margin:0 auto 12px;display:block;transition:transform .3s cubic-bezier(.2,.9,.3,1.15)}
.qual-card:hover svg{transform:scale(1.15)}
.qual-card h3{margin:0 0 6px;font-size:1.02rem}
.qual-card p{margin:0;font-size:.86rem;color:var(--t5);line-height:1.6;text-align:left}
@media (max-width:1024px){.about-intro{grid-template-columns:1fr}.proc-grid{grid-template-columns:1fr 1fr}.team-grid,.team-grid.few{grid-template-columns:1fr 1fr}.qual-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.proc-grid,.team-grid,.team-grid.few,.qual-grid{grid-template-columns:1fr}}

/* ===== OEM page ===== */
.oem-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 0;width:100%}
.oem-step-btn{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:20px 16px;text-align:left;cursor:pointer;transition:.25s;position:relative}
.oem-step-btn:hover{border-color:var(--p)}
/* 当前选中的步骤卡：底部小箭头指向下方内容面板 */
.oem-step-btn.on::after{content:'';position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid var(--pd)}
.oem-step-btn .sb-no{font-size:.72rem;font-weight:600;color:var(--o);letter-spacing:.05em}
.oem-step-btn h3{margin:6px 0 4px;font-size:1rem;line-height:1.35}
.oem-step-btn p{margin:0;font-size:.8rem;color:var(--t4);line-height:1.5}
.oem-step-btn.on{background:linear-gradient(135deg,var(--p),var(--pd));border-color:transparent;color:#fff;box-shadow:0 14px 30px rgba(31,178,100,.22)}
.oem-step-btn.on h3{color:#fff}.oem-step-btn.on p{color:rgba(255,255,255,.85)}.oem-step-btn.on .sb-no{color:#fff;opacity:.9}
.oem-step-detail{margin-top:20px;background:var(--soft);border:1px solid var(--bd);border-radius:16px;padding:30px 34px;display:none}
.oem-step-detail.on{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;animation:cFade .3s ease}
/* 图文混排：文字在左，图片在右 */
.osd-img img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.14);display:block}
.oem-step-detail h3{margin:0 0 10px;font-size:1.25rem}
.oem-step-detail p{margin:0 0 14px;color:var(--t5);line-height:1.75}
.oem-step-detail ul{margin:0;padding-left:1.3em;color:var(--t5);font-size:.92rem;line-height:1.8}
.oem-why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.oem-why-card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:24px 22px;transition:.2s;text-align:center}
.oem-why-card:hover{border-color:var(--p);transform:translateY(-3px)}
.oem-why-card svg{width:24px;height:24px;color:var(--p);margin:0 auto 10px;display:block}
.oem-why-card h3{margin:0 0 6px;font-size:1.02rem}
.oem-why-card p{margin:0;font-size:.86rem;color:var(--t5);line-height:1.6;text-align:left}
.faq-list{max-width:860px;margin:26px auto 0}
.faq-item{border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden;scroll-margin-top:90px}
.faq-q{display:flex;justify-content:flex-start;align-items:center;gap:12px;width:100%;padding:16px 20px;border:0;background:none;font-family:inherit;font-size:.98rem;font-weight:600;color:var(--t9);cursor:pointer;text-align:left;transition:color .25s ease}
.faq-q:hover{color:var(--p)}   /* 鼠标移入：问题标题由黑变品牌绿 */
/* 问题前的对话气泡图标：颜色跟随标题（hover/展开时随标题一起变绿） */
.faq-q .faq-ico{color:inherit;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:color .25s ease}
.faq-q .faq-ico svg{display:block}
.faq-q .faq-ico{color:inherit}
.faq-q .faq-txt{flex:1 1 auto;min-width:0}   /* 撑开中间，把 +/− 推到最右 */
.faq-q .ic{transition:transform .25s;color:var(--p);flex-shrink:0}
.faq-item.open{background:#f5f6f8}   /* 已展开：整块淡绿底 */
.faq-item.open .faq-q{color:var(--p)}   /* 已展开：标题保持品牌绿 */
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 20px 16px;margin:0;color:var(--t5);font-size:.9rem;line-height:1.7}
/* FAQ 两栏（左分类 / 右问答），左侧样式复用 blogs.php 的 .cats */
.faq-main{min-width:0}
.faq-main .faq-list{max-width:none;margin:0}
/* oem-odm 页的 FAQ：更宽的列表 + 「More FAQs」入口 */
.faq-oem{max-width:1024px}
.faq-more{display:flex;align-items:center;justify-content:center;gap:8px;max-width:1024px;margin:22px auto 0;padding:13px 20px;border:1px solid var(--bd);border-radius:12px;background:#fff;color:var(--pd);font-weight:600;font-size:.94rem;transition:border-color .18s,color .18s}
.faq-more:hover{border-color:var(--p);color:var(--p)}
.faq-more span{transition:transform .2s}
.faq-more:hover span{transform:translateX(3px)}
.faq-group{scroll-margin-top:90px}
.faq-group+.faq-group{margin-top:38px}
/* 「全部问题」视图：跨分类时不再加大间距，所有问题卡片间距完全一致 */
.faq-main.all-view .faq-group+.faq-group{margin-top:0}
.faq-main.all-view .faq-item{margin-bottom:14px}
/* 左侧「Need More Help?」辅助卡片（绿色系） */
.cat-help{margin-top:22px;background:var(--p50);border:1px solid #BBF7D0;border-radius:16px;padding:20px 18px;text-align:center}
.cat-help h3{margin:0 0 8px;font-size:1.02rem;font-weight:700;color:var(--pd);line-height:1.35}
.cat-help p{margin:0 0 16px;font-size:.85rem;line-height:1.6;color:var(--t5);text-align:left}
.cat-help .btn-help{display:flex;align-items:center;justify-content:center;width:100%;padding:11px 16px;border-radius:11px;background:var(--p);color:#fff;font-size:.9rem;font-weight:600;border:1px solid var(--p);transition:background .18s,border-color .18s,color .18s}
.cat-help .btn-help:hover{background:var(--pd);border-color:var(--pd);color:#fff}
.cat-help .btn-help.ghost{background:#fff;color:var(--pd);border-color:#BBF7D0;margin-top:10px}
.cat-help .btn-help.ghost:hover{background:#fff;border-color:var(--p);color:var(--pd)}
@media (max-width:1024px){
  /* 窄屏：分类变成横向胶囊，帮助卡片独占一行、左对齐 */
  .cat-help{flex:1 0 100%;margin-top:14px;text-align:left}
  .cat-help .btn-help{width:auto;min-width:190px}
}
.faq-group-title{font-size:1.3rem;font-weight:700;color:var(--t9);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.oem-cta{margin:34px 0 0;background:#1FB264;background:linear-gradient(135deg,var(--p,#1FB264),var(--pd,#128A4E));border-radius:18px;padding:40px;color:#fff !important;text-align:center;position:relative;overflow:hidden}
.oem-cta h2{color:#fff !important;margin:0 0 8px}
.oem-cta p{color:rgba(255,255,255,.88) !important;margin:0 0 18px}
.oem-cta .oem-cta-btn{background:#fff !important;color:#128A4E !important;border-color:transparent}
.oem-cta .oem-cta-btn:hover{color:#128A4E !important}
@media (max-width:1024px){.oem-steps{grid-template-columns:1fr 1fr}.oem-why{grid-template-columns:1fr 1fr}.oem-step-detail.on{grid-template-columns:1fr;gap:20px}.osd-img{order:-1}
  /* 2026-10-03：手机/平板（≤1024px，即单列堆叠态）让 Step 图片**通栏铺满**。
     原因：图片本身已是 width:100%，但父级 .oem-step-detail 有 padding:30px 34px →
     图片被左右各挤掉 34px 显得很小 ✗。
     做法：负外边距抵掉左右 padding + **顶部 padding**（-30px → 图片贴到卡片顶边，顶部不留白 ✓）；
     高度等比 —— img 已有 width:100% + aspect-ratio:16/10 ✓；
     顶部贴边后圆角需与卡片一致（卡片 16px 圆角 + 1px 边框 → 内侧 15px）✓，并去掉投影 ✓。
     ⚠️ 纵向：只吃掉顶部 30px；图片与文字的间距仍由 gap:20px 保证 ✓
     ⚠️ PC（>1024px）是双列布局，不受本断点影响 ✓ 保持不变 ✓ */
  .oem-step-detail.on .osd-img{margin:-30px -34px 0}
  .oem-step-detail.on .osd-img img{border-radius:15px 15px 0 0;box-shadow:none}}
@media (max-width:680px){.oem-steps{grid-template-columns:1fr}.oem-why{grid-template-columns:1fr}}

/* ===== OEM customize dimensions ===== */
.oem-custom{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.oc-card{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden;transition:.25s}
.oc-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.1)}
.oc-ph{aspect-ratio:16/9;background:linear-gradient(150deg,#F1F5F9,#E2E8F0);display:grid;place-items:center;color:var(--t4);font-size:.8rem;gap:6px;position:relative;overflow:hidden}
.oc-ph.oc-has-img{padding:0}
.oc-ph.oc-has-img svg,.oc-ph.oc-has-img span{display:none}
.oc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.oc-ph svg{width:34px;height:34px;color:var(--t4)}
.oc-ph .tag{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.9);color:var(--t5);font-size:.68rem;padding:3px 8px;border-radius:99px}
.oc-body{padding:16px 18px}
.oc-body h3{margin:0 0 4px;font-size:1rem}
.oc-body p{margin:0;font-size:.84rem;color:var(--t5);line-height:1.55}
.detail-ph{margin-top:14px;border:1px dashed var(--bd);border-radius:12px;height:170px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--t4);font-size:.82rem}
.detail-ph svg{width:30px;height:30px;color:var(--t4)}
@media (max-width:1024px){.oem-custom{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.oem-custom{grid-template-columns:1fr}}

/* ===== 404 ===== */
.e404{text-align:center;padding:90px 20px 110px}
.e404 .code{font-size:clamp(5rem,12vw,8rem);font-weight:800;line-height:1;background:linear-gradient(135deg,var(--p),var(--pd));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.e404 h1{font-size:clamp(1.4rem,3vw,2rem);margin:12px 0 8px}
.e404 p{color:var(--t5);max-width:520px;margin:0 auto 26px}
.e404 .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.e404 .spool-art{width:170px;height:170px;margin:0 auto 18px;position:relative;filter:drop-shadow(0 8px 18px rgba(19,138,78,.10))}
.e404 .spool-art svg{width:100%;height:100%;display:block}

/* ===== 顶部导航下拉 / mega 菜单（2026-09-12） ===== */
.nav-menu > li{position:relative}
.nav-menu .has-drop > a{display:inline-flex;align-items:center;gap:5px}
.nav-menu .caret{display:inline-block;width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px;vertical-align:middle;transition:transform .18s}
.nav-menu .has-drop:hover .caret{transform:rotate(180deg)}
.drop-panel{position:absolute;left:-8px;top:calc(100% + 12px);min-width:240px;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.18);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;z-index:80}
.nav-menu .has-drop:hover .drop-panel,.nav-menu .has-drop.open .drop-panel{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .16s ease,transform .16s ease,visibility 0s}
/* 菜单项与下拉层之间的空隙做成透明 hover 热区（否则鼠标慢速穿空隙时 li:hover 失效 → 下拉层消失/闪烁）
   普通下拉：面板 top = li 底 + 12px；mega：fixed 面板贴头部下沿，与 li 底相距约 16~20px → 热区统一 28px 全覆盖 */
.nav-menu > li.has-drop::after{content:'';position:absolute;left:-12px;right:-12px;top:100%;height:28px}
.drop-panel::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
.drop-panel > a{display:block;padding:9px 14px;border-radius:9px;color:var(--t7);font-size:.9rem;text-decoration:none;transition:background .15s,color .15s}
.drop-panel > a:hover{background:var(--p50);color:var(--p)}
/* mega：整条全宽（fixed 贴头部下沿），内部内容区限宽 1400px 居中 */
.mega-panel{display:block;padding:0;overflow:hidden;position:fixed;left:0;right:0;width:auto;top:var(--hh,72px);border-radius:0;border-left:0;border-right:0;border-top:0}
.mega-inner{max-width:1400px;margin:0 auto;padding:0 24px;display:flex}
.mega-cats{width:272px;flex-shrink:0;background:var(--soft);padding:18px 14px;border-right:1px solid var(--bd)}
.mega-cat{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--t7);font-size:.9rem;font-weight:500;transition:background .15s,color .15s}
.mega-cat img{width:46px;height:34px;object-fit:cover;border-radius:7px;flex-shrink:0;background:#fff}
.mega-cat:hover,.mega-cat.on{background:#fff;color:var(--p);box-shadow:0 6px 18px rgba(15,23,42,.08)}
.mega-items{flex:1;min-width:0;padding:26px 28px}
.mega-group{display:none}
.mega-group.on{display:block}
.mega-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mega-head h4{margin:0;font-size:1.02rem}
.mega-all{color:var(--p);font-size:.85rem;font-weight:600;text-decoration:none}
.mega-all:hover{text-decoration:underline}
.mega-products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mega-p{display:block;text-decoration:none;color:var(--t7);text-align:center;border:1px solid var(--bd);border-radius:12px;padding:10px;transition:border-color .18s,transform .18s,box-shadow .18s}
.mega-p:hover{border-color:var(--p);transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.1)}
.mega-p-img{display:block;aspect-ratio:1/1;margin-bottom:8px}
.mega-p-img img{width:100%;height:100%;object-fit:contain}
.mega-p-name{display:block;font-size:.82rem;line-height:1.4}
.mega-empty{color:var(--t4);font-size:.86rem;margin:0;min-width:230px;white-space:nowrap;line-height:1.5}
@media (max-width:768px){
  .drop-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:4px 0 8px;min-width:0;display:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mega-cats{background:transparent;border-right:0}
  .drop-panel::before{display:none}
  .nav-menu .has-drop.open .drop-panel{display:block}
  /* 移动端：mega 退化为普通分类名称列表（与 Resources / Support 下拉同款） */
  .mega-panel{width:auto;left:0;right:auto;border-radius:0}
  .mega-inner{display:block;max-width:none;padding:0}
  .mega-cats{display:block;width:auto;background:transparent;border:0;padding:0;overflow:visible}
  .mega-cat{display:block;padding:9px 14px;border-radius:9px;color:var(--t7);font-size:.9rem;font-weight:400;box-shadow:none}
  .mega-cat img{display:none}
  .mega-cat:hover,.mega-cat.on{background:var(--p50);color:var(--p);box-shadow:none}
  .mega-items{display:none}
}

/* ===== 滚动隐藏导航栏（向下滚隐藏 / 向上滚显示，2026-09-13） ===== */
.site-header{transition:transform .3s ease}
.site-header.header-hide{transform:translateY(-100%)}
@media (max-width:768px){
  /* 移动端抽屉内居中：一级项用 flex（文字 + 下拉箭头垂直居中对齐并水平居中） */
  .nav-menu.open > li{display:block}
  .nav-menu.open > li > a{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}
  .nav-menu.open > li > a .caret{margin:0}
  .nav-menu.open .drop-panel > a,
  .nav-menu.open .mega-cat{display:block;text-align:center}
}
/* 移动端抽屉展开时：导航栏与下拉以外的区域加半透明遮罩（参考站效果） */
@media (max-width:768px){
  /* 抽屉展开时的毛玻璃遮罩：从顶部覆盖（导航 z-index:100 在其上，仍可见）
     原来用 top:var(--hh)，但该变量从未被设置 → top 失效导致遮罩异常 */
  body.nav-open::after{content:'';position:fixed;left:0;right:0;top:0;bottom:0;
    background:rgba(15,23,42,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:90}
  /* 语言下拉展开时的同款遮罩 */
  body.lang-open::after{content:'';position:fixed;left:0;right:0;top:0;bottom:0;
    background:rgba(15,23,42,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:90}
  /* 导航整体（含汉堡、语言按钮、抽屉）始终在遮罩之上 */
  .site-header{z-index:100}
  .nav-menu.open{z-index:99}
}

/* ===== Request a Quote 弹层（全站公共）===== */
.qcp{position:relative;display:inline-block;margin-top:2px}
.qcp-btn{padding:4px 10px;border:1px solid var(--color-border);border-radius:8px;background:#fff;font-size:.82rem;color:var(--color-text-700);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.qcp-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.qcp-list{position:absolute;left:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--color-border);border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.14);padding:4px;min-width:150px;max-height:210px;overflow-y:auto;z-index:60;display:none}
.qcp.open .qcp-list{display:block}
.qcp-item{padding:6px 10px;border-radius:8px;font-size:.84rem;color:var(--color-text-700);cursor:pointer;white-space:nowrap}
.qcp-item:hover,.qcp-item.on{background:#ECFDF5;color:#128A4E}
.q-qty{display:inline-flex;align-items:center;gap:6px;margin:0 10px;background:#F1F5F9;border-radius:10px;padding:4px 8px}
.q-qty .qq-btn{width:26px;height:26px;border-radius:8px;border:1px solid var(--color-border);background:#fff;cursor:pointer;font-size:15px;line-height:1;color:var(--color-text-700);display:grid;place-items:center;padding:0}
.q-qty .qq-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.q-qty .qq-inp{width:64px;min-width:0;height:26px;border:1px solid var(--color-border);border-radius:8px;text-align:center;font-size:.9rem;padding:0 2px;background:#fff}
.q-qty .qq-unit{font-size:.82rem;color:var(--color-text-500)}
.q-item .q-remove{background:none;border:0;color:#94A3B8;font-size:.88rem;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .16s,background .16s}   /* 移除：默认灰 */
.q-item .q-remove:hover{color:#F08213;background:#FFF7ED}   /* hover：品牌橙（原来是红色 #DC2626） */
.q-item.q-item-missing{opacity:.6}

/* ===== 询盘弹层：桌面端整体下移 + 高度扣除「客服图溢出量」（必须放在文件最后，避免被重复的 .modal-mask 定义覆盖）=====
   客服图 192px、弹层头部约 68px → 图片在弹层顶部之上溢出约 124px
   因此：弹层顶部留白 = 124 + 26 = 150px；弹层最大高度 = 100vh - 150 - 24 = calc(100vh - 174px) */
@media (min-width:681px){
  .modal-mask{padding:150px 20px 24px;place-items:start center;align-content:start}
  .modal{max-height:calc(100vh - 174px)}
  .modal-body{max-height:calc(100vh - 174px - 74px)}
  .modal-mask{overflow:hidden}          /* 不产生任何滚动条（含横向） */
}

/* ===== OEM/ODM 页底部 CTA 按钮（.oem-cta-btn；注意勿与区块 .oem-cta 同名）：鼠标移入适当变长，移出复原 ===== */
.oem-cta-btn{transition:padding .32s cubic-bezier(.2,.9,.3,1.15), box-shadow .28s ease, transform .28s ease}
.oem-cta-btn:hover{padding-left:42px;padding-right:42px;box-shadow:0 12px 28px rgba(255,255,255,.26);transform:translateY(-1px)}
@media (max-width:680px){.oem-cta-btn:hover{padding-left:30px;padding-right:30px}}

/* ===== 筛选栏：勾选后的选项文字变绿色加粗（左侧筛选）===== */
.check-row:has(input:checked) span,
.check-row.on span{color:var(--color-primary);font-weight:700}
.check-row:has(input:checked),
.check-row.on{color:var(--color-primary)}
.check-row:has(input:checked) .cnt,
.check-row.on .cnt{color:var(--color-primary);opacity:.8;font-weight:600}
/* 勾选框本身也统一为品牌绿 */

/* ===== 筛选栏复选框：自定义外观（勾选后绿底 + 白色对勾，避免原生黑色勾在绿底上看不清）===== */
.check-row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:0;
  border:2px solid #CBD5E1;border-radius:5px;background:#fff;position:relative;cursor:pointer;flex-shrink:0;
  transition:background .16s,border-color .16s,box-shadow .16s}
.check-row input[type=checkbox]:hover{border-color:#86EFAC;box-shadow:0 0 0 3px rgba(31,178,100,.10)}
.check-row input[type=checkbox]:checked{background:var(--color-primary);border-color:var(--color-primary)}
.check-row input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:8px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}

/* ===== 询盘弹层「Remove」最终态：默认灰色，鼠标移入变品牌橙 ===== */
.q-item .q-remove,
.q-item .q-remove:visited,
.q-item .q-remove:focus{color:#94A3B8;font-weight:600;background:none}
.q-item .q-remove:hover,
.q-item .q-remove:active{color:#F08213;background:#FFF7ED}
.q-item .q-remove svg{stroke:currentColor}

/* ===== contact 页：社交二维码组（后台每个平台各一张；点击跳对应链接）===== */
.info-qrs{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.info-qr{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 12px 10px;text-decoration:none;
  background:rgba(255,255,255,.12);border:0;border-radius:12px;transition:background .2s,transform .2s}
.info-qr:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.info-qr img{width:92px;height:92px;object-fit:contain;background:#fff;border-radius:8px;padding:5px;display:block;
  box-shadow:0 4px 12px rgba(0,0,0,.14)}
.info-qr span{font-size:.78rem;color:rgba(255,255,255,.9);letter-spacing:.2px}
/* 2026-10-03：手机端让二维码卡片「等分两列」填满容器。
   原来卡片没有宽度（宽由内容决定 ≈116px），2×2 排完后右侧会剩一大块空白 ✗
   `flex:0 1 calc(50% - 6px)` = 每张占一半宽（gap:12px → 各减 6px），
   用 0 1（不 grow）而非 1 1：这样平台只有 3 个时第 3 张不会被拉成整行宽 ✓
   ⚠️ 仅手机断点：PC / 平板保持原样（卡片按内容宽、左对齐）✓ */
@media (max-width:680px){.info-qr img{width:80px;height:80px}.info-qr{flex:0 1 calc(50% - 6px)}}

/* ===== 后台「社交链接」行排版：链接左、二维码右（按钮→缩略图→删除 同排）===== */
.social-row{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px dashed #EEF2F6}
.social-row label{display:block;margin-bottom:7px;font-weight:600;color:#475569}
.social-row label .opt{color:#94A3B8;font-weight:400}
.social-link{flex:0 0 auto;width:400px;max-width:100%}
.social-link input[type=text]{width:100%}
.social-qr{flex:1 1 260px;min-width:240px}
/* 一行内：选择按钮 → 已上传缩略图 → 删除勾选（缩略图放最后，不压在按钮上方）*/
.social-qr .qr-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.social-qr .file-pick{display:inline-flex;align-items:center;gap:9px;margin:0}
.social-qr .file-pick .file-name{color:#94A3B8;font-size:.84rem}
.social-qr .qr-thumb{width:46px;height:46px;object-fit:contain;background:#fff;border:1px solid #E2E8F0;
  border-radius:8px;padding:3px;display:block}
.social-qr .qr-del{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;color:#B91C1C;
  cursor:pointer;font-size:.86rem;white-space:nowrap}
.social-qr .qr-del input{width:auto;margin:0}

/* ===== 手机端：询盘弹层铺满屏幕、内容可滚动、强制水平居中（禁用拖拽偏移）===== */
@media (max-width:680px){
  .modal-mask{padding:10px}
  .modal{max-width:100% !important;width:100%;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:14px;transform:none !important}
  .modal-mask.open .modal{transform:none !important}
  .modal-head{padding:14px 16px}
  .modal-head h3{font-size:1rem}
  .modal-close{width:30px;height:30px;font-size:1rem}
}

/* ===== 手机端：/filaments.php 无筛选结果时，空状态紧凑显示（不留大片空白）===== */
@media (max-width:680px){
  .empty-state{padding:8px 0 4px}
  .empty-state .adm-empty{padding:22px 16px 16px}
  .empty-state .adm-empty svg{width:100px;height:80px;margin-bottom:12px}
  .empty-state .adm-empty h4{font-size:.96rem;margin-bottom:5px}
  .empty-state .adm-empty p{font-size:.83rem}
  .shop-grid:empty{display:none}          /* 没有任何卡片时，grid 不占位 */
}

/* ===== 手机端：/faq.php 顺序调整 =====
   期望顺序：Topics（分类）→ All Questions（问题列表）→ Need More Help?（联系我们）
   实现：把 .faq-wrap 变纵向 flex，并用 display:contents 让 aside.cats 的子项参与排序 */
@media (max-width:768px){
  .faq-wrap{display:flex;flex-direction:column}
  .faq-wrap .cats{display:contents}
  .faq-wrap .cat-title{order:1}
  .faq-wrap .cat-list{order:2}
  .faq-wrap .faq-main{order:3}
  .faq-wrap .cat-help{order:4;margin-top:26px;margin-bottom:0}
  .faq-wrap .cat-list{margin-bottom:18px}
}

/* ================= 手机端 / 通用 修复（2026-09-16 第 2 轮） ================= */

/* ① 触屏：卡片不再因 hover 位移，Add to Quote 按钮常显、位置固定
   （移动端点击会触发 :hover 且会「粘」住，导致卡片上移 → 按钮看着"跑了"） */
@media (hover:none), (pointer:coarse){
  .shop-card:hover{transform:none !important;box-shadow:0 1px 3px rgba(15,23,42,.06) !important}
  .shop-card:hover .thumb img.alt{opacity:0 !important}
  .shop-card:hover .thumb img.main{opacity:1 !important}
  .quote-add,.quote-add.btn{opacity:1 !important;pointer-events:auto !important;transform:translate(-50%,0) !important}
}

/* ② 空状态：PC 端也收紧高度（原来 min-height:calc(100vh - 430px) 太大 + 触发页面滚动条） */
.shop-grid:empty{display:none}                       /* 提到全局：grid 空时不占位 */
.empty-state{min-height:0 !important;padding:30px 20px 24px !important;
  display:flex;align-items:center;justify-content:center}
.empty-state .adm-empty{padding:30px 20px 24px}
.empty-state .adm-empty svg{width:112px;height:90px;margin-bottom:14px}

/* ③ Clear All Filters：显式品牌绿（iOS Safari 会把按钮/链接渲染成蓝色） */
#clearFilter,.btn-outline,.btn-outline:visited{color:var(--color-primary) !important;
  -webkit-text-fill-color:currentColor;-webkit-appearance:none;appearance:none}
#clearFilter:hover,.btn-outline:hover{color:var(--color-primary-dark) !important}

/* ④ 横向卡片列表：滚动吸附到「每张卡片起点」，配合 JS 步长 = 卡片宽+gap */
.products,.team-rail{scroll-snap-type:x mandatory;scroll-padding-left:0}
.products > *,.team-rail > *{scroll-snap-align:start;scroll-snap-stop:always}
@media (max-width:680px){
  .products{grid-auto-columns:100% !important}
  .team-rail{grid-auto-columns:100% !important}
}
@media (max-width:1024px){
  .team-rail{grid-auto-columns:calc((100% - 20px) / 2)}
}

/* ================= 手机端修复 + OEM 字体（2026-09-16 第 3 轮） ================= */

/* ① 空状态里的「Clear all filters」按钮：显式品牌绿（iOS Safari 会渲染成蓝色） */
.empty-state .btn,
.empty-state .btn.ghost,
.empty-state button{color:var(--color-primary) !important;border-color:var(--color-primary) !important;
  -webkit-text-fill-color:currentColor;-webkit-appearance:none;appearance:none;background:#fff}
.empty-state .btn:hover,
.empty-state button:hover{color:#fff !important;-webkit-text-fill-color:#fff;background:var(--color-primary);
  border-color:var(--color-primary) !important}
#clearFilter,#clearFilter:visited,.btn-outline,.btn-outline:visited{color:var(--color-primary) !important;
  -webkit-text-fill-color:currentColor;-webkit-appearance:none;appearance:none}

/* ③ 手机端筛选重复：隐藏 PC 版「Sort by」行（保留 Showing x of y 文案），仅保留手机版 Filters + Sort 下拉 */
@media (max-width:680px){
  .toolbar .sort-control{display:none !important}
  .toolbar{margin-bottom:10px}
  .mobile-filters{display:flex !important;align-items:center;gap:10px;margin-bottom:14px}
}

/* ② Color 色块：手机端放大到约 1.3 倍（PC 端保持原样） */
@media (max-width:680px){
  .filter-body .swatches{gap:11px}
  .filter-body .swatch{width:29px !important;height:29px !important}
  .filter-body .swatch-more{width:29px !important;height:29px !important}
  .filter-body .swatch.on::after{width:12px;height:7px;border-left-width:2.8px;border-bottom-width:2.8px}
}

/* ===== OEM 页字体统一（与正文一致 = 1rem） ===== */
.oem-step-btn p{font-size:1rem;line-height:1.55}
.oem-step-btn .sb-no{font-size:.86rem}
.oem-steps, .oem-steps *{font-family:inherit}
.oc-body p{font-size:1rem;line-height:1.6}
.oem-why-card p{font-size:1rem;line-height:1.6}
.oem-why-card h3{font-size:1.05rem}

/* ===== 手机端工具栏重排（Showing 计数 + Sort 同行、去掉 Filters 按钮的占位）===== */
@media (max-width:680px){
  /* PC 工具栏里的 Sort 隐藏，但保留 Showing 计数并移入手机栏 */
  .toolbar{display:block !important;margin-bottom:0 !important}
  .toolbar .sort-control{display:none !important}
  .toolbar .result-count{display:none}          /* 计数改由 .mobile-filters 显示 */
  .mobile-filters{display:flex !important;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 16px}
  .mobile-filters .m-count{font-size:.86rem;color:var(--t5);line-height:1.3}
  .mobile-filters .sort-control{width:auto;flex:0 0 auto}
  .mobile-filters .sort-control select, .mobile-filters select.sort-control{width:auto;min-width:150px;padding:10px 34px 10px 12px}
}
/* 无数据时手机工具栏也保持一行（计数会显示 Showing 0 products） */
@media (max-width:680px){
  #btnFilter{display:none !important}           /* 移动端不再显示 Filters 按钮 */
}

/* 色块最终尺寸（放在文件末尾确保生效）：手机端 = 桌面 22px × 1.3 ≈ 29px */
.filter-body .swatches{gap:11px}
.filter-body .swatches .swatch{width:29px !important;height:29px !important;box-shadow:0 0 0 1px rgba(15,23,42,.12)}
.filter-body .swatches .swatch-more{width:29px !important;height:29px !important}
@media (min-width:681px){
  .filter-body .swatches .swatch{width:22px !important;height:22px !important}   /* PC 保持原尺寸 */
  .filter-body .swatches .swatch-more{width:30px !important;height:30px !important}
  .filter-body .swatches{gap:8px}
}

/* Remove 按钮改为图标：尺寸固定、只显示图标，默认灰 / hover 橙 */
.q-remove svg{width:17px;height:17px;flex-shrink:0;display:block}
.q-item .q-remove svg{width:17px;height:17px}
.q-remove{min-width:auto;padding:6px;line-height:0}
.q-item .q-remove{min-width:auto;padding:6px 8px;justify-content:center}

/* ===== 手机端：Sort 下拉高度略增（宽度不变） + 色块放大到易点击尺寸 ===== */
@media (max-width:680px){
  /* Sort 下拉：只增加高度 */
  .mobile-filters .sort-control select,
  /* 🔴 2026-10-03：这条 ID 规则带 !important，优先级高于上面所有 class 规则 ✗
     → 改 .sort-control select 的 padding 时**必须同步改这里**，否则手机端看不到效果 ✓ */
  #sortSelM{padding:10px 34px 10px 12px !important;line-height:1.2;height:auto !important}
  .mobile-filters .sort-control{width:auto}
}

/* 色块：用最高优先级 + min-width/min-height，确保放大生效（手机上手指不易点错） */
@media (max-width:680px){
  html body .swatches .swatch,
  html body .filter-body .swatches .swatch,
  html body i.swatch,
  html body .swatch{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:none !important;
    max-height:none !important;
    flex:0 0 auto !important;
    box-sizing:border-box !important;
  }
  html body .swatches{gap:13px !important}
  html body .swatches .swatch-more,
  html body .swatch-more{width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important}
  /* 选中对勾按比例放大（34/22 ≈ 1.55 倍） */
  html body .swatch.on::after{width:14px !important;height:8px !important;
    border-left-width:3px !important;border-bottom-width:3px !important}
}

/* ===== 语言下拉展开时的毛玻璃遮罩（与 body.nav-open 同款效果）===== */
body.lang-open::after{content:'';position:fixed;left:0;right:0;top:0;bottom:0;
  background:rgba(15,23,42,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:90}
/* 语言下拉与按钮必须在遮罩之上 */
.lang{position:relative;z-index:95}
.lang.open{z-index:95}
.lang-menu{z-index:96 !important}
.site-header{z-index:100}

/* ===== PC 端色块也放大到 22×1.3≈29px（便于点击）===== */
.filter-body .swatches .swatch{width:29px !important;height:29px !important}
.filter-body .swatches{gap:9px}
@media (min-width:681px){
  .filter-body .swatches .swatch{width:29px !important;height:29px !important}   /* PC 端同步放大 */
  .filter-body .swatches .swatch-more{width:29px !important;height:29px !important}
}

/* ===== 工具栏显示互斥（统一断点：≤1024 用手机版，>1024 用 PC 版）===== */
@media (max-width:1024px){
  .mobile-filters{display:flex !important}
  .toolbar .sort-control,
  .toolbar .result-count{display:none !important}
  .toolbar{display:block !important;margin-bottom:0 !important}
}
@media (min-width:1025px){
  .mobile-filters{display:none !important}
  .toolbar{display:flex !important}
  .toolbar .sort-control{display:flex !important}
  .toolbar .result-count{display:inline !important}
}

/* ===== 底部悬浮条（Submit Quote）与页脚语言切换的层级/位置分离 ===== */
/* ① 语言切换放在下层：浮动条 z-index 更高，且页脚语言区不参与堆叠上下文竞争 */
.footer-bottom .lang{position:relative;z-index:1}
/* ② 悬浮条提升到最上层（高于页脚隐藏遮罩 90，低于弹层 200） */
.quote-bar{z-index:120}
/* ③ 页脚底部预留悬浮条高度，避免视觉重叠（移动端更明显） */
@media (max-width:768px){
  .footer-bottom .lang{display:inline-flex;justify-content:center}
}

/* ===== 页脚底部：语言切换在左、版权文字在右（避开右下角悬浮条，互不影响）===== */
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom > .lang{order:1}                       /* 语言切换 → 左侧 */
.footer-bottom > .footer-copy{order:2}   /* 版权文字 → 右侧 */
/* 语言容器需高于遮罩(90)，否则其内部 .lang-menu 会被父级堆叠上下文锁住、浮不出来 */
.footer-bottom .lang{position:relative;z-index:95}
.footer-bottom .lang.open{z-index:96}
.footer-bottom .lang-menu{z-index:97}
.quote-bar{z-index:120}
@media (max-width:768px){
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
}

/* ==========================================================================
 * 页脚语言下拉 —— 唯一权威规则（全 !important，置于文件末尾）
 *   手机 ≤768px：水平居中于按钮 + 位于按钮正上方
 *   PC  ≥769px：左对齐于按钮下方
 *   禁止再追加同选择器规则！
 * ========================================================================== */
.footer-bottom .lang{position:relative !important;z-index:95 !important}
.footer-bottom .lang.open{z-index:96 !important}

@media (max-width:768px){
  .footer-bottom .lang-menu{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(100% + 10px) !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    width:190px !important;
    min-width:190px !important;
    max-width:calc(100vw - 24px) !important;
    z-index:210 !important;
    border-radius:14px !important;
    box-shadow:0 18px 44px rgba(0,0,0,.34) !important;
  }
  .footer-bottom .lang.open .lang-menu{
    transform:translateX(-50%) !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media (min-width:769px){
  .footer-bottom .lang-menu{
    left:0 !important;
    right:auto !important;
    /* ★ 关键：必须向上弹（页脚已在页面底部，向下弹会溢出 body 撑出空白） */
    top:auto !important;
    bottom:calc(100% + 8px) !important;
    transform:none !important;
    width:190px !important;
    min-width:190px !important;
    margin:0 !important;
  }
  .footer-bottom .lang.open .lang-menu{transform:none !important;opacity:1 !important;visibility:visible !important}
}

/* ==========================================================================
 * Request a Quote 弹层修复（2026-09-16）
 * ========================================================================== */

/* ① 遮罩改为毛玻璃（原来是纯半透明 rgba，改成 backdrop-filter 磨砂） */
.modal-mask{
  background:rgba(15,23,42,.42) !important;
  -webkit-backdrop-filter:blur(8px) saturate(120%) !important;
  backdrop-filter:blur(8px) saturate(120%) !important;
}
/* 手机端可再强一点 */
@media (max-width:680px){
  .modal-mask{
    background:rgba(15,23,42,.38) !important;
    -webkit-backdrop-filter:blur(10px) saturate(120%) !important;
    backdrop-filter:blur(10px) saturate(120%) !important;
  }
}

/* ② 手机端「删除」图标不见了：给第 3 列明确宽度 + 图标放大到易点击尺寸 */
@media (max-width:680px){
  .q-item{grid-template-columns:52px minmax(0,1fr) 42px !important}
  .q-item .q-remove{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:center !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .q-item .q-remove svg{width:20px !important;height:20px !important;display:block !important;stroke-width:2 !important}
  .q-remove{display:inline-flex !important;align-items:center !important;justify-content:center !important}
  .q-remove svg{width:18px !important;height:18px !important}
}

/* ===== about.php 团队区（.team-wrap）：轮播箭头垂直位置微调（用户要求 top:45%）===== */
.team-wrap .products-nav{top:45%}

/* ==========================================================================
 * 产品详情页（filament_detail.php）新增样式
 *   1. Why Customers Choose —— 4 张卡片
 *   2. 图文栏目（长图 + 图文错排 + 视频 + 图片墙）
 *   3. 参数三列卡片（每列独立，便于响应式）
 * ========================================================================== */

/* ---------- 1. Why 栏目：4 列卡片 ---------- */
.feature-icons{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .feature-icons{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){  .feature-icons{grid-template-columns:1fr} }

/* ---------- 2. 图文栏目（无右侧栏，单栏正文） ---------- */
.pd-article{padding:0 0 8px}

/* 2-1 长图 + 图上文字 */
.pda-banner{position:relative;border-radius:var(--radius-lg,16px);overflow:hidden;margin:0 0 56px;
  box-shadow:0 18px 44px rgba(15,23,42,.12)}
.pda-banner img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.pda-banner-txt{position:absolute;left:6%;top:50%;transform:translateY(-50%);max-width:500px;
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.pda-banner-txt h3{margin:0 0 10px;font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.2;color:#fff;font-weight:800}
.pda-banner-txt p{margin:0;font-size:clamp(.82rem,1.4vw,1rem);line-height:1.7;color:rgba(255,255,255,.92)}

/* 2-2 图文混排：左右错开 */
.pda-blocks{display:flex;flex-direction:column;gap:64px;margin:0 0 56px}
.pda-block{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.pda-block .pda-media{border-radius:var(--radius-lg,16px);overflow:hidden;background:var(--color-bg-soft);
  width:100%;max-width:600px;justify-self:start}
.pda-block.rev .pda-media{justify-self:end}                          /* 反向块：图片贴右对齐 */
.pda-block .pda-media img{display:block;width:100%;height:auto;
  aspect-ratio:3/2;max-width:600px;max-height:400px;object-fit:cover}  /* 3:2，上限 600×400 */
.pda-block .pda-text h3{margin:0 0 14px;font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.3;color:var(--color-text-900);font-weight:800}
.pda-block .pda-text p{margin:0 0 12px;font-size:.94rem;line-height:1.75;color:var(--color-text-700)}
.pda-block .pda-text p:last-child{margin-bottom:0}
/* 反向：文字在左、图片在右 */
.pda-block.rev .pda-media{order:2}
.pda-block.rev .pda-text{order:1}

/* 2-3 视频区 */
.pda-video{margin:0 0 56px;border-radius:var(--radius-lg,16px);overflow:hidden;background:#000;
  box-shadow:0 18px 44px rgba(15,23,42,.16)}
.pda-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}

/* 2-4 四张 1:1 图片墙 */
.pda-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pda-gallery img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--radius-md,12px);transition:transform .35s ease}
.pda-gallery a{display:block;border-radius:var(--radius-md,12px);overflow:hidden}
.pda-gallery a:hover img{transform:scale(1.05)}

@media (max-width:900px){
  .pda-banner img{aspect-ratio:16/10}
  .pda-banner-txt{left:5%;max-width:60%}
  .pda-block{grid-template-columns:1fr;gap:22px}
  .pda-block.rev .pda-media{order:0}      /* 窄屏统一：图在上、文在下 */
  .pda-block.rev .pda-text{order:0}
  .pda-blocks{gap:46px}
}
@media (max-width:680px){
  .pda-banner{margin-bottom:40px}
  .pda-banner img{aspect-ratio:4/3}
  .pda-banner-txt{position:static;transform:none;max-width:none;padding:18px 16px;
    background:var(--color-text-900);color:#fff;text-shadow:none}
  .pda-banner-txt h3{font-size:1.15rem}
  .pda-gallery{grid-template-columns:repeat(2,1fr);gap:12px}
  .pda-video{margin-bottom:40px}
}

/* ---------- 3. 参数三列卡片（每列独立，响应式友好） ---------- */

/* 窄屏：参数行改为「标签在上、值在下」，避免同行挤压溢出 */

/* ==========================================================================
 * 参数三列（唯一权威规则 —— 注意：不要再追加任何 .spec-* 同选择器规则！）
 *   · 三列等高：grid stretch + 每列 flex column
 *   · 属性靠左、值靠右，且「值」从固定列起始 → 跨行左边缘对齐
 *   · 行间只保留 1 根 1px 细实线（无虚线）
 * ========================================================================== */
.spec-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.spec-col{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-md,12px);overflow:hidden;box-shadow:0 4px 16px rgba(15,23,42,.05)}
.spec-col-head{background:#111;color:#fff;font-weight:700;font-size:.95rem;text-align:center;
  padding:14px 16px;letter-spacing:.2px;flex:0 0 auto}
.spec-col-body{flex:1 1 auto;padding:0;display:flex;flex-direction:column}

.spec-row{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:10px;align-items:baseline;padding:11px 16px;font-size:.86rem;
  border-top:1px solid rgba(15,23,42,.08);border-bottom:0}
.spec-row:first-child{border-top:0}
.spec-row>span{color:var(--color-text-500);min-width:0;line-height:1.5}
.spec-row>b{color:var(--color-text-900);font-weight:600;text-align:left;min-width:0;
  line-height:1.5;word-break:break-word;overflow-wrap:anywhere}

@media (max-width:1024px){
  .spec-cols{grid-template-columns:repeat(2,1fr)}
  .spec-row{font-size:.84rem}
}
@media (max-width:680px){
  .spec-cols{grid-template-columns:1fr;gap:14px}
  .spec-row{grid-template-columns:minmax(0,1fr);gap:3px;padding:10px 14px}
  .spec-row>b{font-size:.9rem}
}

/* ==========================================================================
 * 需求：视频区统一 16:9 且最大高度 580px（与后台「商品模板」编辑区一致）
 * ========================================================================== */
.pda-video video{aspect-ratio:16/9;max-height:580px;object-fit:cover}
.pda-video{max-width:1352px;margin-left:auto;margin-right:auto}

/* ==========================================================================
 * 需求：长图区去阴影、文字改黑（与后台编辑器一致）
 * ========================================================================== */
.pda-banner{box-shadow:none !important}
.pda-banner-txt{text-shadow:none !important;color:#0F172A !important}
.pda-banner-txt h3{color:#0F172A !important;text-shadow:none !important}
.pda-banner-txt p{color:#334155 !important;text-shadow:none !important}

/* ==========================================================================
 * 修复：视频铺满容器（容器 1352 宽 × 16/9 = 760 高；video 不再设 max-height）
 * ========================================================================== */
.pda-video{max-width:1352px;margin-left:auto;margin-right:auto}
.pda-video video{display:block;width:100%;aspect-ratio:16/9;max-height:none !important;object-fit:cover}

/* ==========================================================================
 * 长图文字样式（3 选 1）：默认 / 白底黑字(light) / 黑底白字(dark)
 *   由后台「选择理由 → 长图区」的样式单选控制
 * ========================================================================== */
/* 白字：只把文字改白，不加遮罩 */
.pda-banner.style-white .pda-banner-txt,
.pda-banner.style-white .pda-banner-txt h3{color:#FFFFFF !important}
.pda-banner.style-white .pda-banner-txt p{color:rgba(255,255,255,.92) !important}
.pda-banner.style-light::before,
.pda-banner.style-dark::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.pda-banner.style-light::before{background:rgba(255,255,255,.3)}
.pda-banner.style-dark::before{background:rgba(0,0,0,.3)}
.pda-banner-txt{z-index:2}   /* 只加层级；position 仍由原规则保持 absolute（叠加在图上）*/
.pda-banner.style-light .pda-banner-txt,
.pda-banner.style-light .pda-banner-txt h3{color:#0F172A !important}
.pda-banner.style-light .pda-banner-txt p{color:#334155 !important}
.pda-banner.style-dark .pda-banner-txt,
.pda-banner.style-dark .pda-banner-txt h3{color:#FFFFFF !important}
.pda-banner.style-dark .pda-banner-txt p{color:rgba(255,255,255,.92) !important}
.swatches{gap:10px !important}
@media (max-width:680px){
  .swatch,
  i.swatch,
  .swatches .swatch,
  .filter-body .swatches .swatch{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
  }
  .swatches{gap:12px !important}
}

/* ==================== SWATCH-ROUND-FIX-20260920（v2）====================
   详情页 Color 色块必须为正圆。历史同款问题（filaments.php 左侧筛选区）的根因与解法：
   1) `.swatch` 是 <i>（inline 元素）→ 早期 width/height 无效 → 圆不成立 → 必须 display:inline-block；
   2) border-radius + overflow 的裁切在部分浏览器/滚动容器里会失效（出现方角/缺角）
      → 加 transform:translateZ(0) 强制走合成层，裁切才稳定（当年就是靠这条解决的）；
   3) 作为 flex item 时会被收缩压扁 → flex:0 0 auto；
   4) aspect-ratio 保证宽高恒等；
   5) 内联的 linear-gradient background 也会被 border-radius 裁成圆形。 */
.swatch,
i.swatch,
.swatches .swatch,
.filter-body .swatches .swatch{
  display:inline-block !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  align-self:center !important;
  transform:translateZ(0) !important;          /* 关键：裁切走合成层，圆角才稳定 */
  -webkit-transform:translateZ(0) !important;
  background-clip:padding-box !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}
.swatch:hover,
i.swatch:hover,
.swatches .swatch:hover{
  transform:translateZ(0) scale(1.12) !important;   /* hover 同步保留 translateZ */
}
.swatches{gap:10px !important;align-items:center !important}
@media (max-width:680px){
  .swatch,
  i.swatch,
  .swatches .swatch,
  .filter-body .swatches .swatch{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    max-width:32px !important;
    max-height:32px !important;
  }
  .swatches{gap:12px !important}
}

/* ==================== CC-ROUND-FIX-20260920 ====================
   商品卡片颜色色块（.shop-colors i.cc）强制正圆。
   与 .swatch 同一根因：仅有 border-radius 不够 —— 内联的 linear-gradient / url() 背景
   在部分浏览器/滚动容器里不会被圆角裁切（表现为方形），必须：
   display:inline-block（<i> 是 inline，宽高无效）+ overflow:hidden + translateZ(0)（走合成层，裁切才稳定）。 */
.shop-colors i.cc,
.shop-colors .cc,
i.cc{
  display:inline-block !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  background-clip:padding-box !important;
  box-sizing:border-box !important;
}
/* hover / 选中态：同步保留 translateZ，否则会退回方形裁切 */
.shop-colors i.cc:hover{
  transform:translateZ(0) scale(1.18) !important;
}
.shop-colors i.cc.on{
  transform:translateZ(0) scale(1.12) !important;
}
/* 「+N」计数不要被当成色块 */
.shop-colors .cc-more{
  aspect-ratio:auto !important;
  border-radius:0 !important;
  transform:none !important;
  overflow:visible !important;
}

/* ===== Hero 轮播（多图滚动展示，后台 /panel9xk2/home.php Hero 区维护）
   ⚠️ 本段必须留在文件【顶层】，不要放进任何 @media —— 否则桌面端整段失效（曾因此出现图片平铺）===== */
.hero-slider { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.hero-slide.on { opacity: 1; pointer-events: auto; }
.hero-slide a, .hero-slide img { display: block; width: 100%; height: 100%; }
.hero-slide img { object-fit: cover; border-radius: 0; }

/* 指示点：淡灰半透明胶囊底托（无阴影），默认白色圆点、当前项品牌绿药丸 */
.hero-dots {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px; z-index: 3;
  padding: 8px 14px; border-radius: 99px;
  background: rgb(46 47 46 / 13%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-dot {
  width: 13.5px; height: 13.5px; padding: 0; flex: 0 0 auto;   /* 9px 的 1.5 倍 */
  border: 0; border-radius: 99px;
  background: #fff;                                            /* 默认：白色圆 */
  cursor: pointer; transition: width .28s ease, background .28s ease, transform .2s ease;
}
.hero-dot:hover { transform: scale(1.12); }
.hero-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31, 178, 100, .55); }
.hero-dot.on {
  width: 39px; height: 13.5px; background: #1FB264;             /* 当前项：品牌绿（高度同为 1.5 倍） */
}
@media (max-width: 768px) {
  .hero-dots { bottom: 12px; padding: 6px 11px; gap: 7px; }
  .hero-dot { width: 12px; height: 12px; }
  .hero-dot.on { width: 34px; }
}


/* ===== Add to Quote 飞入动效：报价栏脉冲反馈（作用在内层徽章，避免覆盖 .quote-bar 自身 transform）===== */
.quote-bar.qb-pop .quote-count{animation:qbPop .46s cubic-bezier(.34,1.56,.64,1)}
.quote-bar.qb-pop{box-shadow:0 10px 30px rgba(15,23,42,.35),0 0 0 4px rgba(240,130,19,.28)}
@keyframes qbPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.35)}
  100%{transform:scale(1)}
}


/* ===== 报价栏光标统一为手型（2026-09-23）：show 态下文字/数字子元素默认为 text 光标，易被误认为不可点 ===== */
/* AUDIT-QUOTEBAR-CURSOR */
.quote-bar,
.quote-bar *{cursor:pointer}
.quote-bar .qb-view,
.quote-bar button{cursor:pointer}

/* ===== 首页 Resource Center：前 3 个卡片的文章标题精确裁到 3 行（2026-09-24）=====
   目标卡片（按位置选，.res-faq 类实际加在第 1 个「3D Printing Blog」卡片上，不能用于排除 FAQ）：
     1 = 3D Printing Blog、2 = Use Cases & Applications、3 = Video Tutorials；第 4 个 FAQ 不受影响。
   ⚠️ 要点：
     1) -webkit-line-clamp 需配 display:-webkit-box；
     2) 仅靠 line-clamp 会因行高取整（23.8px × 3 + padding 16px = 87.4px）
        与实际盒高 88px 不完全吻合而**露出第 4 行残影**，
        故**显式给出 line-height 与 max-height** 做硬裁切；
     3) 盒模型为 border-box，max-height 需包含上下 padding（各 8px）。 */
.resources > .res-card:nth-child(-n+3) .res-list li a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
  /* 字号 13.6px、行高 1.75 -> 23.8px/行；3 行 = 71.4px。
     盒模型 border-box，overflow 裁剪到 padding box 且内容自 padding-top(8px) 起算，
     故 max-height 应为 8 + 71.4 = 79.4px。
     用 px 直接给出（不用 em）以避免子像素取整差异：79px 宁少不多，
     确保绝不露出第 4 行；若取 80px 会露出约 0.6px 残影。 */
  line-height: 1.75;
  max-height: 79px;
}
.resources > .res-card:nth-child(-n+3) .res-list li a::before{
  margin-right: 6px;
}

/* ===== 首页 Resource Center：前 3 个卡片条目「上下均匀一致」的间距（2026-09-24）=====
   上一版只在 li 下设 padding-bottom(14px)、a 设 padding-top(2px)，
   导致文字距上方线 2px、距下方线 14px，上下不对称（Blog 卡片尤其明显）。
   现改为：li 上下 padding 对称，间距完全由 padding 控制（取消 gap），
   使每条文字与上方线、下方线的距离相等。仅前 3 个卡片。 */
.resources > .res-card:nth-child(-n+3) .res-list{
  gap: 0;                                     /* 间距改由 li 的上下 padding 控制，保证对称 */
}
.resources > .res-card:nth-child(-n+3) .res-list li{
  border-bottom: 1px solid var(--color-border);
  padding-top: 14px;                          /* 与下方 padding 对称 */
  padding-bottom: 14px;
}
.resources > .res-card:nth-child(-n+3) .res-list li:first-child{
  padding-top: 0;                             /* 首条上方不留额外空白 */
}
.resources > .res-card:nth-child(-n+3) .res-list li:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.resources > .res-card:nth-child(-n+3) .res-list li a{
  border-bottom: 0;                           /* 原边框已在 li 上 */
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== 报价弹层（Request a Quote）商品缩略图：强制 1:1（2026-09-24）=====
   问题：实测图片为 52x64（宽高不等）——宽度来自手机端 .q-item>img{width:52px}，
        高度被全局 .q-item img{height:64px} 覆盖，两条规则各生效一半，导致图片显示不全。
   方案：用 #quoteItems 提高优先级并明确成对给出宽高 + aspect-ratio，桌面 64 方形、手机 52 方形。 */
#quoteItems .q-item img{
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
  align-self: start;
  border-radius: 8px;
}
@media (max-width: 680px){
  #quoteItems .q-item img{
    width: 52px;
    height: 52px;
  }
}

/* ===== 页脚社交图标：鼠标移入时图标「先放大再缩回」（2026-09-24）=====
   要求：容器尺寸不变（36x36），只放大内部的 svg。
   做法：对 svg 施放 scale() 关键帧动画（transform 不参与布局，容器不受影响），
        移入/键盘聚焦时播放一次「放大 -> 缩回」，形成弹性反馈。
   参考：inkcloudtech 页脚社交图标的动效。 */
.footer-social a svg{
  transform-origin: center center;
  transition: transform .3s ease;
  will-change: transform;
}
.footer-social a:hover svg,
.footer-social a:focus-visible svg{
  animation: footerSocialPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes footerSocialPop{
  0%   { transform: scale(1); }
  48%  { transform: scale(1.35); }   /* 放大 */
  100% { transform: scale(1); }      /* 缩回原位 */
}
/* 无障碍：尊重系统「减少动效」偏好 */
@media (prefers-reduced-motion: reduce){
  .footer-social a:hover svg,
  .footer-social a:focus-visible svg{ animation: none; }
}

/* ===== 正文嵌入视频自适应尺寸（2026-09-25）=====
   TikTok：最大宽度 800px、按 9:16 自适应高度、居中
   YouTube：占满内容宽度、按 16:9 自适应高度 */
/* TikTok 嵌入：播放器宽度是 TikTok 官方固定的 325x578（9:16），
   容器大于 325px 时播放器仍为 325px 并居中、两侧留白（官方行为，CSS 无法放大）。
   因此把容器就设为 325px，使布局恰好贴合、不留空白。
   若正文是官方 blockquote 代码（由 tiktok.com/embed.js 渲染），同样按此宽度约束。 */
.article-body iframe[src*="tiktok.com"]{
  max-width: 325px;
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  margin: 18px auto;
  display: block;
}
.article-body div:has(> iframe[src*="tiktok.com"]) > div,
.article-body figure:has(iframe[src*="tiktok.com"]) > div{
  max-width: 325px;
  margin: 0 auto;
}
.article-body blockquote.tiktok-embed{
  max-width: 325px;
  min-width: 0;
  margin: 18px auto;
}
.article-body iframe[src*="youtube.com"],
.article-body iframe[src*="youtube-nocookie.com"]{
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 18px auto;
  display: block;
}
/* 媒体嵌入外壳（CKEditor5 figure.media）不额外限制宽度，交由内部 iframe 规则控制 */
.article-body figure.media{ margin: 18px 0; max-width: 100%; }

/* ==========================================================================
 * 分页：窄屏适配（2026-09-28）
 * --------------------------------------------------------------------------
 * 事故：手机端「Precedente / Successivo」文字按钮 + 页码总宽 405px，而 body 只有 345px
 *   → 把父容器一起撑到 405px → **整页横向滚动条**（实测 /it/blogs.html 溢出 84px；
 *     根因还叠加了 flex-wrap:nowrap → 不换行只能往外撑）。
 * 方案：① 允许换行（宁可换行也不撑破容器）
 *       ② ≤640px 把「上一页/下一页」文字换成 ← / → 箭头，省下 ~140px
 *          （HTML 里同时输出 .pg-arw 与 .pg-txt 两层，由本断点切换；a[aria-label] 保留语义，
 *            无障碍与 SEO 不受影响）
 * 影响面：blogs.php 与 filaments.php 共用 .pagination；**桌面端观感完全不变**。
 * ========================================================================== */
.pagination{flex-wrap:wrap}
.pagination .pg-btn .pg-arw{display:none}          /* 桌面：只显示文字 */

@media (max-width:640px){
  .pagination{gap:4px;margin-top:26px}
  .pagination a.pg-btn,.pagination span.pg-btn{min-width:36px;height:36px;padding:0 9px;font-size:.85rem}
  .pagination .pg-btn .pg-txt{display:none}        /* 手机：隐藏「上一页 / 下一页」文字 */
  .pagination .pg-btn .pg-arw{display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1}
  .pagination .pg-prev .pg-arw::before{content:"\2190"}   /* ← */
  .pagination .pg-next .pg-arw::before{content:"\2192"}   /* → */
}

/* ==========================================================================
 * 手机端：输入框防缩放 + 页脚版权行排版（2026-09-28 用户反馈）
 * --------------------------------------------------------------------------
 * ① 输入框聚焦时 iOS Safari 会**自动放大页面**（放大后视口变窄 → 出现横向滚动条）。
 *    触发条件是输入框字号 < 16px —— 本项目输入框普遍是 .9rem / .92rem（≈14.4/14.7px）。
 *    → ≤640px 统一提到 16px（官方推荐做法）。
 *      ❌ 不用 viewport 的 maximum-scale=1：那会禁用用户双指缩放，损害无障碍。
 * ② 页脚「站点地图(Sitemap/Карта сайта)」在窄屏被 .footer-copy 的 flex-wrap 挤到单独一行；
 *    用户要求紧跟 "PrinterPartPro" 同一行、只空一格 → 窄屏改为普通文本流（block 容器 + inline 子项）。
 * 桌面端（>640px）**完全不受影响**。
 * ========================================================================== */
@media (max-width:640px){
  /* ① 输入框字号 ≥16px：iOS 不再自动缩放页面 */
  input, select, textarea,
  .footer-subscribe input,
  .form-grid input, .form-grid textarea, .form-grid select,
  /* 🔴 2026-10-03：原按 class 逐个补 16px 的做法太脆 ✗ —— 任何"更具体的选择器"都会把它顶掉
     （实测：`.q-qty .qq-inp{font-size:.9rem}` 就压过了 `input{font-size:16px}` ✗
       → 弹层里**重量输入框**聚焦时仍会触发 iOS 自动放大 ✗）
     故此处用 !important 兜住整类问题 ✓：手机端所有表单控件字号**一律 ≥16px** ✓
     （这是移动端可用性/无障碍的硬要求 ✓ 不是样式偏好 —— iOS 只在 <16px 时才自动缩放 ✓） */
  input, select, textarea{ font-size:16px !important; }

  /* ①·补 订阅表单改为两行（输入框独占一行）：
     字号提到 16px 后，一行布局会把输入框压到 ~90px 宽，placeholder「your@email.com」被截断成「you…」。
     改两行后输入框 ~300px 宽，占位符完整，点击区域也更大（移动端表单的常规做法）。 */
  .footer-subscribe form{ flex-wrap:wrap; }
  .footer-subscribe input{ flex:1 1 100%; }
  .footer-subscribe .btn{ flex:1 1 100%; }

  /* ② 站点地图与版权文字同排一行，仅空一格 */
  .footer-bottom .footer-copy{ display:block; }
  .footer-bottom .footer-copy .footer-sitemap{ display:inline; margin-left:.45em; }
}

/* ==========================================================================
 * 手机端：Hero CTA 按钮防溢出（2026-09-28 用户反馈俄语首页按钮撑出容器）
 * --------------------------------------------------------------------------
 * 实测 @360px：`/ru/` 的「Запросить коммерческое предложение →」按钮宽 **379px** > 容器 312px（超出 67px），
 *   其余语言（en/fr/de/es/pt/it/ko）刚好 312px 未溢出 —— 因为俄语译文最长（比英文长 ~80%）。
 * 根因：`.btn{padding:11px 20px}` 左右共 40px + 文字不换行（white-space 继承 nowrap）。
 * 修法：① 窄屏左右内边距 20px → 12px（省 16px，惠及所有语言，视觉更紧凑）
 *       ② 允许换行兜底（任何语言再长出新的长译文都不会撑破）
 *       ③ 俄语单独略缩字号（`html[lang="ru"]`）→ 保持单行显示（用户要求：缩小文字只针对俄语）
 * 桌面端不受影响（媒体查询限定 ≤640px）。
 * ========================================================================== */
@media (max-width:640px){
  .hero-cta .btn, .hero-cta .btn-lg{ padding-left:12px; padding-right:12px; white-space:normal; text-align:center; line-height:1.32; }
  html[lang="ru"] .hero-cta .btn{ font-size:.8rem; }
  html[lang="ru"] .hero-cta .btn-lg{ font-size:.8rem; }
}

/* ==========================================================================
 * 图标线帽统一：stroke-linecap / stroke-linejoin = round（2026-09-28）
 * --------------------------------------------------------------------------
 * 背景：Lucide 风格图标的「点」是用 0 长度线段 + 圆头线帽画出来的（如 d="M12 17h.01"）。
 *   若 <svg> 漏写 stroke-linecap，默认值 butt 会让这个点**完全消失**。
 *   实测症状：首页 FAQ 卡片问号少一个点、页脚 Instagram 少相机闪光点、
 *            「How We Work」厂房图标少 8 个窗格点、支持卡片调色/奖牌折角变尖。
 * 现状：全站 76 个描边图标里 **53 个漏写**该属性（0 个使用 butt/miter、也无虚线）→ 属遗漏而非有意设计。
 * 做法：在此统一兜底。presentation 属性（写在标签上的 stroke-*）优先级低于任何 CSS 规则，
 *   所以这一条能覆盖全部漏写的图标，**日后新增图标也不会再犯**。
 * 范围：只命中描边图标（fill="none" + stroke）；实心图标（fill="currentColor"）不在选择器内，不受影响。
 * ========================================================================== */
svg[fill="none"][stroke]{ stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
 * 手机端：页脚订阅邮箱输入框「聚焦拉长」（2026-09-28 用户要求）
 * --------------------------------------------------------------------------
 * 问题：≤640px 时页脚为两列栅格，订阅表单落在右列 → 实测输入框仅
 *   147px(@360) / 162px(@390) / 174px(@414) / 207px(@480)，占位符 your@email.com 被截断。
 * 要求：默认宽度不变；聚焦时向左拉长到接近整屏宽、左右各留出与页脚内边距一致的边距；失焦复原。
 * 实现：CSS 只管「放大后长什么样」，具体宽度/位移由 JS 实测后写入 --sub-x-w / --sub-x-dx
 *   （不写 calc(100vw - 48px) 硬算 —— 那会与栅格 gap 强耦合，改 gap 就错位）。
 * 两个坑：
 *   ① 放大后会压住左列的链接文字 → 背景必须**不透明**。原背景 rgba(255,255,255,.06) 叠在黑底上
 *      正好等于 #0f0f0f，取这个同色值 → 视觉不变、又能完全遮住下层。
 *   ② 必须 position + z-index，否则盖不住左列；左右边距对称才不会产生横向滚动条。
 * 仅 ≤640px 生效（桌面端页脚是 5 列，输入框本就够宽，不做处理）。
 * ========================================================================== */
@media (max-width:640px){
  #subForm input[name=email].sub-x{
    flex: 0 0 auto;
    width: var(--sub-x-w, 100%);
    margin-left: var(--sub-x-dx, 0);
    position: relative;
    z-index: 6;
    background: #0f0f0f;
    border-color: rgba(255,255,255,.26);
    box-shadow: 0 10px 28px rgba(0,0,0,.6);
    transition: width .18s ease, margin-left .18s ease;
  }
}