/* =========================================================================
   Light B2B template (matches the original site visual):
   white header, dark active nav pill, big hero, right-side social dock,
   bottom Quick Inquiry pill, clean section headings.
   ========================================================================= */

:root {
  --ink: #0f1115;
  --ink-700: #2a2f38;
  --navy: #1f3a4d;          /* active nav pill */
  --navy-700: #16293a;
  --primary: #1f3a4d;
  --accent: #0a66c2;         /* quick inquiry / link */
  --line: #e5e8ec;
  --line-strong: #cfd4da;
  --slate-900: #11161d;
  --slate-700: #3a424c;
  --slate-500: #6b7480;
  --slate-400: #9aa3ad;
  --paper: #f6f7f9;
  --white: #ffffff;
  --green: #25d366;          /* whatsapp */
  --wechat: #1aad19;
  --skype: #00aff0;
  --yt: #ff0000;
  --ig-from: #feda77;
  --ig-mid1: #f58529;
  --ig-mid2: #dd2a7b;
  --ig-to: #8134af;
  --pin: #e60023;

  --font-display: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  --maxw: 1200px;
  --header-h: 76px;
  --radius: 6px;
  --radius-pill: 999px;
  --z-header: 40;
  --z-dock: 55;
  /* 弹窗/提示必须高过站点顶栏：文件末尾为压住 hero 轮播给 `header#header .header-top`
     写了 z-index:2000，若弹窗还是 60，顶栏（电话/EN/Get a Quote 那条）会盖在弹窗上（"页面混乱"的成因）。 */
  --z-modal: 3000;
  --z-toast: 3100;
  /* 产品图灯箱：高于弹窗/提示、低于移动端抽屉 */
  --z-lightbox: 3200;
  /* 移动端抽屉（#top-primary-nav-clone）。它是独立的 fixed 面板，必须高过
     弹窗(3000)/提示(3100)/顶栏(2000)/浮栏(55)，所以单列一档。
     `--z-drawer-toggle` 是汉堡按钮：抽屉打开后汉堡要能被二次点击关闭，
     必须压在面板之上（见附录 §3）。两者同属一个层叠上下文
     （都在 .header-nav-wrapper 里），因此只比较这两个数值即可。 */
  --z-drawer: 10000;
  --z-drawer-toggle: 10001;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body { margin: 0; font-family: var(--font-body); color: var(--slate-900); background: var(--white); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.container-site { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }
/* 内页内容顶边统一：`.container-site` 是 display:block 且 padding-top:0，
   首个子元素的 margin-top 会"穿透塌陷"到容器外，把整个容器连同内容一起往下推：
   products / news / download 首元素是 `<p class="mt-3">`(16px) → 内容整体低 16px；
   faq 首元素 `.faq-list`(32px) → 低 32px；而 privacy / terms / about / contact
   首元素无上外边距 → 正好停在 section 的 72px padding 边(395px)。
   结果点导航时每页内容起始高度都不一样（411 / 427 / 395）。
   抹掉主内容区里容器的首个子元素上外边距即可全部对齐到 395px。
   ⚠ bootstrap 的 .mt-* 工具类带 !important，这里也必须带才能盖过它。 */
#main .container-site > :first-child { margin-top: 0 !important; }
/* 内页正文块统一：老模板的 `.pro-content` 自带 `border-top:1px solid #c2c2c2` +
   `padding-top:20px`（style-main.css 约 7934 行），会在正文上方多出一条灰线、并把
   首个段落压低 21px。contact 早先用内联 `style="border:none;padding-top:0"` 局部抵消过，
   about 没有 ⇒ About 的正文比 Contact 低 21px（416 vs 397），且多一条灰线。
   统一由站点样式抵消（`.main-content-area .pro-content` 权重高于主题的 `.pro-content`），
   contact 的内联特例随之移除，两边同源。 */
.main-content-area .pro-content { border-top: 0; padding-top: 0; }
/* 顶栏三项的图标原来尺寸不一（whatsapp.svg 22×22，telphone/email.svg 20×20），
   垂直位置也差 1px → 看起来"电话/邮件显示异常"。统一成 20×20 并垂直居中。 */
/* 注意：主题 style-main.css:23683 有 `.whatsapp-svg { height: 22px !important }`，
   会把 whatsapp 图标单独撑到 22px（电话/邮件是 20px）——所以这里必须带 !important
   且用 header#header 提权，否则三个图标大小不一致。 */
header#header .header-top .contact-list > li > img { width: 20px !important; height: 20px !important; object-fit: contain; vertical-align: middle; }
header#header .header-top .contact-list > li > a { vertical-align: middle; }

/* 头部通栏：原来用的是 bootstrap .container（max-width 1170 居中），
   窗口越宽左右空得越多。改成铺满整宽，logo / 电话从最左边开始。
   同时把 .row 的 -15px 负边距去掉，否则内容会被推出容器外。 */
.header-top .container,
.menuzord-container .container { max-width: none; margin-inline: 0; padding-inline: 24px; }
.header-top .row,
.menuzord-container .row { margin-inline: 0; }

/* 品牌字标（替换老模板的 "Your Logo" 占位图，由 nav-fix.js 注入） */
.site-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* 品牌换成真正的 logo 图（assets/img/logo-primary.svg）后，字号由图片自身比例决定：
   只锁 height、width:auto，避免拉伸变形。SVG 里字标已是 SOUTHWIND，不要再叠一层文字。 */
/* ★提权不能省，实测踩过两次（写成 44px 却一直是 54px）：
   ① 主题 style-main.css 的 `.header-nav-col-row a img{max-height:54px}`（0,0,1,2）—— 它只是上限，
      真正把高度打回 auto 的是 ②：
   ② `img[width][height]{height:auto}`（0,0,2,1，防 CLS 的通用规则）。只要 img 上保留了
      width/height 属性就会命中它，特异性比 `.site-brand .site-brand-logo`（0,0,2,0）**高**，
      于是 height 变 auto → 按固有 64px 渲染 → 被 ① 的 max-height 截到 54px。
   所以在选择器末尾补上 [width][height] 拿到 (0,0,4,0) 才压得住 —— 同时保留 width/height 属性
   带来的 CLS 保护（高度已由 CSS 锁死，宽高比不变，不会跳动）。 */
.site-brand .site-brand-logo[width][height] { display: block; height: 44px; width: auto; }
.site-brand-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; flex: 0 0 auto; }
.site-brand-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--navy); letter-spacing: .2px; white-space: nowrap; }
.section { padding-block: 72px; }
/* 首页用的是 bootstrap 的 .container（max-width 1140 / padding 15px），内页用
   .container-site（1200 / 24px）—— 点导航时内容宽度会跳一下。统一按后者走。 */
.main-content-area .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section-tight { padding-block: 40px; }
.text-center { text-align: center; }

/* ============== HEADER (white) ============== */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.wordmark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.wordmark .mark { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, #f0a44a, #d9531e); }
.nav-desktop { display: none; align-items: center; gap: 4px; }
.nav-desktop a { padding: 10px 18px; font-size: 15px; font-weight: 500; color: var(--slate-700); border-radius: var(--radius-pill); transition: background-color .15s ease, color .15s ease; }
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a.active { background: var(--navy); color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--slate-700); font-size: 14px; cursor: pointer; }
.lang-btn:hover { border-color: var(--navy); color: var(--navy); }
.menu-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--slate-700); cursor: pointer; }
@media (min-width: 1024px) { .nav-desktop { display: flex; } .menu-btn { display: none; } }
.mobile-panel { display: none; border-top: 1px solid var(--line); background: var(--white); }
.mobile-panel.open { display: block; }
.mobile-panel nav { display: flex; flex-direction: column; padding: 8px 16px 16px; }
.mobile-panel nav a { padding: 12px 8px; color: var(--slate-700); font-size: 15px; border-bottom: 1px solid var(--line); }
.mobile-panel nav a.active { color: var(--navy); font-weight: 600; }
.mobile-langs { display: flex; gap: 8px; padding: 12px 16px; }
.mobile-langs a { padding: 6px 12px; border-radius: var(--radius); background: var(--paper); color: var(--slate-700); font-size: 13px; }
.mobile-langs a.active { background: var(--navy); color: #fff; }

/* ============== HERO ============== */
.hero { position: relative; }
.hero-image { width: 100%; aspect-ratio: 16/5; min-height: 320px; background: linear-gradient(135deg, #d7dde3 0%, #eef1f4 45%, #f7e9d4 100%); position: relative; overflow: hidden; }
.hero-image::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 70% at 20% 60%, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(40% 60% at 80% 40%, rgba(217,83,30,.18), transparent 70%); }
.hero-pattern { position: absolute; inset: 0; opacity: .25; background-image:
  repeating-linear-gradient(45deg, rgba(31,58,77,.08) 0 1px, transparent 1px 14px),
  repeating-linear-gradient(-45deg, rgba(31,58,77,.05) 0 1px, transparent 1px 22px); }
.hero-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; text-shadow: 0 2px 16px rgba(15,17,21,.45); }
.hero-tag .eyebrow { color: #fff; opacity: .9; }
.hero-tag h1 { font-size: clamp(36px, 5vw, 56px); margin-top: 12px; color: #fff; }

.eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--slate-500); text-transform: none; letter-spacing: 0; }
.eyebrow::before, .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.section-title { font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); margin-top: 8px; }

/* categories grid on home */
.cats-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 640px) { .cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cats-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card { display: block; text-align: center; padding: 32px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cat-card:hover { transform: translateY(-3px); border-color: var(--navy); box-shadow: 0 12px 30px -18px rgba(15,17,21,.2); }
.cat-icon { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; color: var(--navy); }
.cat-card h3 { font-size: 18px; }
.cat-card p { color: var(--slate-500); font-size: 14px; margin-top: 6px; }
.all-products-cta { text-align: center; margin-top: 40px; }
.btn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius-pill); background: var(--navy); color: #fff; font-weight: 600; font-size: 14px; transition: background-color .15s ease; }
.btn-pill:hover { background: var(--navy-700); }
.btn-pill.btn-outline { background: transparent; border: 1px solid var(--navy); color: var(--navy); }
.btn-pill.btn-outline:hover { background: var(--navy); color: #fff; }

/* ============== About / certs strip on home ============== */
.about-strip { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .about-strip { grid-template-columns: 1fr 1fr; } }
.about-strip .lede { color: var(--slate-500); font-size: 16px; }

/* counters */
.counters { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
@media (min-width: 768px) { .counters { grid-template-columns: repeat(4, 1fr); } }
.counter { text-align: center; }
.counter .num { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--navy); }
.counter .lbl { color: var(--slate-500); font-size: 13px; margin-top: 4px; }

/* cert row */
.cert-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.cert-chip { font-family: var(--font-display); font-size: 13px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--slate-700); background: var(--white); }

/* 静态可抓取产品链接：products.html 的网格由 JS 渲染，这份导航为爬虫/读屏保留，
   视觉上收起但可被辅助技术与搜索引擎读取（=产品页静态内链，避免网格 JS 化后断链）。 */
.crawlable-product-links { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crawlable-product-links ul { list-style: none; margin: 0; padding: 0; }

/* product grid (home + products) */
.product-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
/* 产品列表分页条：每页 12 个、超过才出现（见 site.js renderPager()） */
.product-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 8px; }
.product-pager[hidden] { display: none; }
.pg-btn { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink, #22303c); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.pg-btn:hover:not(:disabled):not(.active) { border-color: var(--navy); color: var(--navy); }
.pg-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.pg-btn:disabled { opacity: .45; cursor: default; }
.pg-btn:focus-visible { outline: 2px solid var(--accent, #1f6fb2); outline-offset: 2px; }
.product-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-3px); border-color: var(--navy); box-shadow: 0 16px 36px -22px rgba(15,17,21,.25); }
/* aspect-ratio 固定缩略图比例：图片未加载时容器已有高度，避免卡片高度在图片到位瞬间跳变（CLS）。
   ★ 容器比例由这里一处决定；<img> 不写死像素 width/height（我们不知道产品图真实尺寸）。 */
.product-thumb { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--paper), #e3e8ed); display: grid; place-items: center; color: var(--slate-500); font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; }
.product-body { padding: 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-body h3 { font-size: 18px; }
.product-cat { font-size: 12px; color: var(--slate-500); text-transform: uppercase; letter-spacing: .08em; }
.product-body p { font-size: 14px; color: var(--slate-500); flex: 1; }
.product-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.price { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.link-arrow { color: var(--navy); font-weight: 600; font-size: 14px; }
/* 目录卡片的「发送询盘」按钮（.inq-btn 专供卡片，不复用 .link-arrow）。
   为什么不改 .link-arrow：它是共享类——108 个静态产品页的「Details →」和 download 页的下载
   链接都用它，加按钮外观会连带把一百多页的文字链接全变成按钮。
   为什么原来难看：.link-arrow 只设了颜色/字重，没重置浏览器默认按钮样式，所以卡片上这个
   <button> 一直带着系统灰底 rgb(240,240,240) + 2px outset 黑边框在渲染（截图里那个方框
   不是标注，是 UA 边框）。这里从零定义外观：品牌深蓝胶囊，hover 加深 + 箭头右移。 */
.inq-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 0; border-radius: var(--radius-pill); background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.inq-btn:hover { background: var(--navy-700); box-shadow: 0 8px 18px -10px rgba(31, 58, 77, .85); }
.inq-btn:active { transform: translateY(1px); box-shadow: none; }
.inq-btn:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }   /* !important 非多余：主题 style-main.css 有全局 `:active,:focus{outline:none !important}`，普通声明会被压掉 → 键盘用户看不出焦点在哪。只影响键盘聚焦，鼠标点击无变化 */
/* 箭头单独成 span 才能只让它滑动，而不动文字 */
.inq-btn .arw { transition: transform .16s ease; }
.inq-btn:hover .arw { transform: translateX(3px); }
/* 卡片页脚允许换行：窄卡（640~1024px 两列）遇到长语种按钮（俄/阿）时整块落到下一行，
   不会把按钮文字挤成两行。静态页的详情卡内容本来就放得下，不受影响。 */
.product-card .product-foot { flex-wrap: wrap; gap: 8px; }
/* 收藏按钮：只有图标没有文字（文案走 aria-label / title），压在缩略图右上角。
   白底半透明是为了在任何产品图上都能看清；已收藏 = 红心实心。 */
.fav-btn { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--slate-500); box-shadow: 0 1px 4px rgba(15,17,21,.18); cursor: pointer; transition: color .15s ease, transform .15s ease; }
.fav-btn:hover { color: #d9531e; transform: scale(1.08); }
.fav-btn.on { color: #d9531e; }
.fav-btn.on svg { fill: currentColor; }
.fav-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* testimonials */
.testimonials { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.testimonial p { color: var(--slate-700); font-size: 14px; }
.testimonial .who { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.testimonial .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #d7dde3, #eef1f4); display: grid; place-items: center; color: var(--navy); font-weight: 700; }
.testimonial .who .name { font-weight: 600; font-size: 14px; }
.testimonial .who .role { font-size: 12px; color: var(--slate-500); }

/* news cards */
.news-grid { display: grid; gap: 24px; margin-top: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.news-card .thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--paper), #e3e8ed); }
.news-card .body { padding: 20px; }
.news-card .date { font-size: 12px; color: var(--slate-500); }
.news-card h3 { font-size: 17px; margin-top: 8px; }
.news-card p { font-size: 14px; color: var(--slate-500); margin-top: 8px; }

/* FAQ */
.faq-list { margin-top: 32px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { width: 18px; height: 18px; color: var(--navy); transition: transform .2s ease; flex-shrink: 0; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-body { padding: 0 0 18px; color: var(--slate-500); max-width: 70ch; }

/* workflow steps */
.steps { display: grid; gap: 24px; margin-top: 32px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { text-align: center; padding: 24px 16px; background: var(--paper); border-radius: var(--radius); }
.step .no { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy); }
.step h3 { margin-top: 8px; font-size: 16px; }
.step p { color: var(--slate-500); font-size: 14px; margin-top: 6px; }

/* selection table */
.split { display: grid; gap: 40px; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; align-items: center; } }
table.compare { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.compare th, table.compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.compare thead th { background: var(--paper); color: var(--slate-700); font-weight: 600; }
table.compare tbody th { font-weight: 600; }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; padding-block: 56px; text-align: center; }
.cta-band h2 { font-size: 28px; }
.cta-band p { color: rgba(255,255,255,.8); margin-top: 12px; }
.cta-band a { display: inline-flex; margin-top: 24px; padding: 12px 28px; background: #fff; color: var(--navy); border-radius: var(--radius-pill); font-weight: 600; }
.cta-band a:hover { background: var(--paper); }

/* ============== FOOTER ============== */
.site-footer { background: var(--ink); color: #c8cdd4; padding-block: 56px 24px; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.site-footer a { color: #c8cdd4; }
.site-footer a:hover { color: #fff; }
.footer-links li { padding: 6px 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 18px; font-size: 13px; color: #8d96a0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }

/* ============== RIGHT-SIDE SOCIAL DOCK ============== */
.dock { position: fixed; right: 0; top: 35%; transform: translateY(-50%); z-index: var(--z-dock); display: flex; flex-direction: column; }
.dock-close { width: 36px; height: 36px; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; border: 0; border-radius: 4px 0 0 4px; }
.dock-list { display: flex; flex-direction: column; }
.dock-item { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; transition: transform .15s ease, filter .15s ease; }
.dock-item:hover { transform: translateX(-3px); filter: brightness(1.1); }
.dock-item.d-fb { background: #1877F2; }
.dock-item.d-in { background: #0A66C2; }
.dock-item.d-pin { background: var(--pin); }
.dock-item.d-ig { background: radial-gradient(circle at 30% 110%, var(--ig-mid2) 0%, var(--ig-mid1) 35%, var(--ig-from) 70%, var(--ig-to) 100%); }
.dock-item.d-yt { background: var(--yt); }
.dock-item.d-wa { background: var(--green); }
.dock-item.d-sk { background: var(--skype); }
.dock-item.d-wc { background: var(--wechat); }
.dock-item.d-ph, .dock-item.d-em, .dock-item.d-up { background: var(--ink); }
.dock-inquiry { margin-top: 8px; background: var(--accent); color: #fff; border-radius: 24px 0 0 24px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; box-shadow: 0 6px 18px -8px rgba(10,102,194,.6); }
.dock-inquiry:hover { background: #084d92; }
@media (max-width: 699px) { .dock { display: none; } }

/* ============== FORMS ============== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; }
.field .req { color: #d9531e; }
.field input, .field textarea, .field select { font: inherit; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--slate-900); width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(31,58,77,.15); }
.field .err { color: #d9531e; font-size: 13px; min-height: 0; }
.field.invalid input, .field.invalid textarea { border-color: #d9531e; }
.form-grid { display: grid; gap: 8px 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-status { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; display: none; }
.form-status.ok { display: block; background: rgba(37,211,102,.1); border: 1px solid var(--green); color: #187d3a; }
.form-status.bad { display: block; background: rgba(217,83,30,.08); border: 1px solid #d9531e; color: #a8391a; }
/* 校验未通过时的字段高亮（crm-inquiry.js 加 .invalid；vendor 的 bootstrap.min.css 里没有 .is-invalid 可用）。
   主题对 .form-control 的边框声明较杂，用 !important 保证状态色稳定盖住；
   浮动快捷询盘用的是裸 input/textarea，一并覆盖。 */
.form-control.invalid, .feedback input.invalid, .feedback textarea.invalid { border-color: #d9531e !important; box-shadow: 0 0 0 3px rgba(217, 83, 30, .12); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-pill); background: var(--navy); color: #fff; font-weight: 600; border: 0; cursor: pointer; }
.btn-primary:hover { background: var(--navy-700); }
.btn-primary:disabled { opacity: .6; cursor: progress; }

/* contact info list */
.info-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.info-list .k { font-weight: 600; min-width: 80px; color: var(--slate-500); }

/* breadcrumb */
.crumb { font-size: 14px; color: var(--slate-500); margin-bottom: 12px; }
.crumb a:hover { color: var(--navy); }

/* filters */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 24px 0 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--white); font-size: 13px; color: var(--slate-700); cursor: pointer; }
.chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.search-input { min-width: 220px; flex: 1; max-width: 320px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; }

/* product detail modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,17,21,.6); display: none; z-index: var(--z-modal); padding: 24px; overflow-y: auto; }
.modal-backdrop.open { display: grid; place-items: start center; }
.modal { background: var(--white); border-radius: var(--radius); max-width: 900px; width: 100%; margin: auto; }
/* 主题自带的 bootstrap.min.css 有 .modal{display:none}（它自己的弹窗组件），而本站 .modal
   只设了背景/圆角没设 display —— 于是弹窗内容一直是隐藏的（点卡片打开只见遮罩）。
   作用域限定在自家遮罩打开时显示，避免影响 Bootstrap 自己的 modal。 */
.modal-backdrop.open .modal { display: block; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 24px; display: grid; gap: 24px; align-items: start; }
@media (min-width: 768px) { .modal-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.modal-close { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); cursor: pointer; font-size: 18px; }
/* 弹窗标题是长品名，最多两行再省略号，别把标题栏撑高 */
#product-modal .modal-head h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; padding-right: 12px; }
/* 弹窗主图：固定 16/10 并裁切，避免不同尺寸的采集图把左栏高度撑得参差。
   （原 4/3 比右栏「分类/起订量」两行高太多 → 右栏空一大片；16/10 两栏高度更接近。） */
#product-modal .product-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; width: 100%; background: var(--paper); }
/* 图片用绝对定位钉满容器：.product-thumb 是 grid + place-items:center，
   作为网格项时 height:100% 不与容器高度挂钩（按内容算），会溢出被裁。
   absolute + inset:0 让图片正好等于容器尺寸，再由 object-fit:contain 完整缩放。 */
#product-modal .product-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-list li:last-child { border-bottom: 0; }
.spec-list .k { color: var(--slate-500); }
.spec-list .v { font-family: var(--font-display); color: var(--slate-900); text-align: right; }
/* 详情图：CRM 采集来的常是 560px+ 的大图，一列叠 6 张能把弹窗撑到 3800px（全是滚动）。
   改成自适应多列 + 单张限高：既看得清，弹窗高度也回到一屏可接受范围。 */
/* display:grid 必须写在这（不能只靠 HTML 内联）：openProduct() 会执行
   detailImgBox.style.display = '' 把内联的 display:grid 清掉，容器会退回 block 而图片全宽堆叠。
   放这里才能在清掉内联后仍保持多列网格。 */
#product-modal [data-modal-detail-images] { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
#product-modal [data-modal-detail-images] img { border: 1px solid var(--line); border-radius: 8px; max-height: 300px; object-fit: contain; background: var(--paper); }

/* utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.empty { padding: 48px; text-align: center; color: var(--slate-500); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: var(--z-toast); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============== TOP CONTACT BAR ============== */
.top-bar { background: #1a3050; color: #fff; font-size: 13px; }
.top-bar .row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 12px; padding-inline: 24px; }
.top-bar .contacts { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.top-bar .contacts a { display: inline-flex; align-items: center; gap: 6px; color: #fff; opacity: .9; transition: color .15s ease, opacity .15s ease; }
.top-bar .contacts a:hover { opacity: 1; color: #f0a23a; }
.top-bar .icon { width: 14px; height: 14px; opacity: .9; }
.top-quote { display: inline-flex; align-items: center; background: #f0a23a; color: #1a3050; font-weight: 700; font-size: 13px; letter-spacing: .04em; padding: 8px 18px; border-radius: 3px; text-transform: uppercase; transition: background-color .15s ease; }
.top-quote:hover { background: #d88c25; color: #fff; }

/* vendor tm_u002 `.contact-list` is rendered without styles by the original
   theme — recover a clean single-row layout for the top contact bar. */
header#header .header-top .contact-list {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0;
  padding: 0; margin: 0; list-style: none; vertical-align: middle;
}
header#header .header-top .contact-list li {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
  position: relative; line-height: 1;
}
/* 分割线「上下对齐」修正：主题 style-main.css:1715 用
   `top:4px; bottom:1px; margin:auto; height:17px` 这套「自动外边距」居中，
   而下面这条规则又给它加了 `transform: translateY(-50%)` —— 两套居中机制叠加，
   线被整体抬到行内容上方（实测线 y 11.5~28.5，图标/文字 y 16~36，中心差 6px）。
   这里统一成同一套机制（top:50% + translateY(-50%)），并用 !important 清掉主题
   漏进来的 top/bottom/margin，线即与图标、文字严格垂直居中（y 17.5~34.5）。 */
header#header .header-top .contact-list li + li::before {
  content: "" !important; position: absolute !important;
  left: -16px !important; right: auto !important;
  top: 50% !important; bottom: auto !important; margin: 0 !important;
  transform: translateY(-50%) !important;
  width: 2px !important; height: 17px !important;
  background: rgba(255,255,255,.7) !important;
}
header#header .header-top .contact-list .contact-icon {
  width: 16px; height: 16px; opacity: .85; flex-shrink: 0;
}
/* 顶栏电话/邮箱链接的 hover 反馈：原来只有主题默认色，悬停毫无变化。
   过渡到主题 CTA 橙（与 GET A QUOTE 按钮同色），只变色不动布局。
   必须 !important：主题 style-main.css 用「.element:not(.a):not(.b)…:hover」一长串
   :not 堆出超高特异性把 hover 色钉死在 #e6e6e6，普通选择器赢不了它。 */
header#header .header-top .contact-list a { transition: color .15s ease; }
header#header .header-top .contact-list a:hover { color: #f0a23a !important; }

/* Fix (2026-09-08): the top bar (and the language dropdown inside it) must stack
   above the hero carousel / banner layers below it. Without an explicit
   position+z-index on .header-top, the .lang-menu's z-index stays trapped in a
   lower stacking context and the menu is painted under the hero image. */
header#header .header-top {
  position: relative;
  z-index: 2000;
}

/* UN language dropdown — sits in the dark top bar, before GET A QUOTE. */
.lang-switcher { position: relative; display: inline-flex; align-items: center; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.45); border-radius: 3px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease;
}
.lang-toggle:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
.lang-toggle .caret { width: 8px; height: 8px; opacity: .9; transition: transform .15s ease; }
.lang-switcher.open .lang-toggle .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 80;
  min-width: 170px; padding: 6px 0; margin: 0; list-style: none;
  background: #14304b; border: 1px solid rgba(255,255,255,.18); border-radius: 4px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.45);
  display: none;
}
.lang-switcher.open .lang-menu { display: block; }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; color: #fff; font-size: 13px; text-decoration: none;
  border: 0; background: transparent; cursor: pointer; line-height: 1.3;
}
.lang-menu a:hover { background: rgba(255,255,255,.08); }
.lang-menu a.active { background: rgba(255,255,255,.14); font-weight: 600; }
.lang-menu a .code { opacity: .65; font-size: 11px; letter-spacing: .08em; }

/* Arabic reads right-to-left; flip the menu origin so it still anchors under the toggle. */
html[lang="ar"] body { direction: rtl; }
html[lang="ar"] header#header .header-top .lang-menu { right: auto; left: 0; }

/* Make sure the top row has room for the new switcher. */
header#header .header-top .header-top-right { display: inline-flex; align-items: center; gap: 14px; }
@media (max-width: 699.98px) {
  header#header .header-top .contact-list li { padding: 0 10px; }
  .lang-toggle { padding: 5px 9px; font-size: 12px; }
}

/* ============== HERO CAROUSEL ============== */
/* When used as a carousel shell, let the slides own the height (avoids the
   parent's 16/5 + min-height fighting the slide's own aspect ratio). */
.hero-carousel .hero-image { aspect-ratio: auto; min-height: 0; }
/* ============== 右侧固定社交栏占位的**唯一来源**（1024~1330） ==============
   真正的固定元素是主题 top.css 的 `.suspension`（position:fixed; right:0;
   实测宽 70px），不是本文件里的 `.dock` —— `.dock` 只在页面没有 `.suspension`
   时才会被 site.js#renderDock() 创建（见 site.js:1156 `if (document.querySelector('.suspension')) return;`），
   本站 10 个页面都内联了 `.suspension` ⇒ `.dock` 那套 CSS 是死代码。
   【2026-11 修正】旧规则只给 `.container-site` 加 52px 内边距，而 products/index
   用的是 bootstrap `.container`（被 `.main-content-area .container` 覆写成
   max-width:1200 + padding-inline:24px）⇒ 这两页的第三列产品卡被浮栏压住
   （实测 1080：网格右缘 1028，浮栏左缘 1010，重叠 18px；1200 更差，重叠 46px）。
   现在两类容器统一让位，88px = 浮栏 70 + 18 呼吸位。 */
@media (min-width: 1024px) and (max-width: 1330px) {
  .container-site,
  .main-content-area .container { padding-right: 88px; }
}

/* ============== VENDOR tm_u002 FOOTER on dark bg ==============
   The vendor footer (".footer" with data-tm-bg-color=#1d1d23) inherits the
   body text color which is near-black — unreadable on the dark background.
   Give the footer (and non-title text) a light color so it is legible. */
.footer { color: #c8cdd4; }
.footer a { color: #c8cdd4; }
.footer a:hover { color: #fff; }
.footer .widget-title { color: #fff; }
.hero-image { position: relative; overflow: hidden; }
.hero-carousel { position: relative; }
.hero-slide { width: 100%; aspect-ratio: 16/5; min-height: 340px; display: grid; place-items: center; color: #fff; text-align: center; padding: 24px; position: relative; }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 20% 60%, rgba(255,255,255,.45), transparent 70%), radial-gradient(40% 60% at 80% 40%, rgba(217,83,30,.18), transparent 70%); }
.hero-slide .pat { position: absolute; inset: 0; opacity: .25; background-image: repeating-linear-gradient(45deg, rgba(31,58,77,.08) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(31,58,77,.05) 0 1px, transparent 1px 22px); }
.hero-slide h2 { font-size: clamp(28px, 4.2vw, 48px); margin: 0; color: #fff; text-shadow: 0 2px 16px rgba(15,17,21,.5); }
.hero-slide p { margin-top: 10px; color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(15,17,21,.5); }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(15,17,21,.45); color: #fff; display: grid; place-items: center; border: 0; cursor: pointer; z-index: 2; transition: background-color .15s ease; }
.hero-arrow:hover { background: rgba(15,17,21,.7); }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }
.hero-quick-overlay { position: absolute; right: 72px; bottom: 24px; background: var(--accent); color: #fff; border: 0; border-radius: 24px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; z-index: 2; box-shadow: 0 6px 18px -8px rgba(10,102,194,.6); }
.hero-quick-overlay:hover { background: #084d92; }
.hero-float-label { position: absolute; left: 16px; top: 16px; background: rgba(15,17,21,.6); color: #fff; padding: 6px 10px; border-radius: 3px; font-size: 12px; z-index: 2; }

/* nav dropdown caret for Product */
.nav-desktop a .caret { display: inline-block; margin-left: 4px; opacity: .7; font-size: 11px; }

/* ============== INNER PAGE HERO (small, dark, with breadcrumb overlay) ============== */
.page-hero { position: relative; overflow: hidden; }
.page-hero-bg { width: 100%; height: 240px; background:
  linear-gradient(135deg, #1f2a35 0%, #2a3a4a 45%, #0a1a26 100%);
  position: relative; }
.page-hero-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 80% at 30% 50%, rgba(255,255,255,.15), transparent 60%),
  radial-gradient(40% 70% at 80% 40%, rgba(255,255,255,.08), transparent 70%); }
.page-hero-inner { position: absolute; inset: 0; display: grid; place-items: center; }
.page-crumb { color: #fff; font-size: 22px; font-family: var(--font-display); font-weight: 600; }
.page-crumb a { color: #fff; opacity: .85; }
.page-crumb a:hover { opacity: 1; }
.page-crumb span { opacity: .9; }
.page-hero-title { color: #fff; font-size: clamp(26px, 3.4vw, 36px); font-family: var(--font-display); font-weight: 700; margin: 0; text-align: center; letter-spacing: .5px; }

/* ============== LEGAL PAGES (privacy / terms) ============== */
.legal { max-width: 840px; }
.legal p, .legal li { color: var(--slate-700); font-size: 15px; line-height: 1.85; }
.legal p { margin: 0 0 14px; }
.legal h2 { font-size: 19px; color: var(--ink); margin: 30px 0 10px; letter-spacing: 0; }
.legal ul { list-style: disc; padding-left: 22px; margin: 0 0 14px; }
.legal ul li { margin-bottom: 6px; }
.legal a { color: var(--accent); }
.legal a:hover { text-decoration: underline; }

/* ============== CONTACT PAGE LAYOUT ============== */
.contact-title { font-size: 38px; text-align: center; color: var(--ink); }
.contact-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.map-frame { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-form .field input,
.contact-form .field textarea { padding: 14px 16px; }
.contact-form .field textarea { resize: vertical; }
.contact-form .btn-primary { width: 100%; padding: 14px; margin-top: 8px; }

/* ============== TOP NAV 位置与间距 ==============
   1) 整块左移：导航是右对齐的（float:right），所以给容器右边加内边距（当前 150px）
      （原来 pr-0，紧贴内容右边界 24px 处）。
   2) 条目间距收紧：主题给每个 a 左右各 20px（相邻两项间隔 40px），改成各 12px（间隔 24px）。
   选择器都带 #top-primary-nav（ID 优先于主题的类选择器），且 site.css 在主题之后加载。 */
#top-primary-nav.menuzord,
#top-primary-nav-clone.menuzord {
    padding-right: 150px;
}

#top-primary-nav .menuzord-menu>li>a,
#top-primary-nav-clone .menuzord-menu>li>a {
    padding-left: 12px;
    padding-right: 12px;
}

/* ============== TOP NAV ==============
   状态样式（2026-09-18 重做）。原来 .current / :hover / li.active 一律套**整块 71px 高的
   大实心蓝**：又重又土，而且悬停和选中长得一模一样，没有层次。现在按"文字尺度的小胶囊"来：
     · 常态    —— 无底色
     · 悬停    —— 浅蓝底 rgba(74,138,200,.10) + 主色文字
     · 当前页 / 下拉展开 —— 品牌蓝实心小胶囊 + 白字
   底色尺寸由 a 自身的 padding + border-radius 决定（见文件末尾导航几何块），不再铺满行高。
   「每次显示不一样」的真凶不是颜色，是主题的 .menuzord a{transition: background .3s}：
   鼠标划过/划走会拖出半透明胶囊，截图正好定格在中间态 ⇒ 仍然取消过渡、瞬时切换。
   选择器必须带 #top-primary-nav 才盖过主题的 .menuzord.red …（ID 优先于类）。 */
#top-primary-nav .menuzord-menu>li>a,
#top-primary-nav-clone .menuzord-menu>li>a {
    transition: none;
}

/* 主题 (menuzord / theme-skin-color-set1) 会给 .menuzord-menu>li.active>a 上实心品牌蓝背景，
   在某些交互/旧构建下会挂到非当前页的 li 上，渲染出第二个蓝框。这里用带 #top-primary-nav 的
   更高优先级把它压回常态（透明底 + 继承文字色），确保只有 a.current 是当前页唯一实心胶囊。 */
#top-primary-nav .menuzord-menu>li.active>a,
#top-primary-nav-clone .menuzord-menu>li.active>a {
    background: transparent;
    color: inherit;
}

/* 实心蓝小胶囊的唯一来源是 a.current（由 nav-fix.js markActive 按 pathname 精确设置）。
   故意不接 li.active：主题在某些状态/旧构建会给 li 挂 active，会渲染出第二个蓝框（与当前页并列）。
   选当前页 = 唯一真相，绝不允许出现两个高亮。 */
#top-primary-nav .menuzord-menu>li>a.current,
#top-primary-nav-clone .menuzord-menu>li>a.current {
    background: #4a8ac8;
    color: #fff;
}

#top-primary-nav .menuzord-menu>li>a:hover,
#top-primary-nav-clone .menuzord-menu>li>a:hover {
    background: rgba(74, 138, 200, .10);
    color: #2a6ea8;
}

/* 选中项被悬停时保持实心蓝，别让浅底把"我在这一页"盖掉 */
#top-primary-nav .menuzord-menu>li>a.current:hover,
#top-primary-nav-clone .menuzord-menu>li>a.current:hover {
    background: #4a8ac8;
    color: #fff;
}

/* 下拉里的分类项：主题把 <a> 写成 background:0 + width:100%，但 <a> 默认是 inline，
   width 不生效 → 背景/内边距只按文字盒子铺开，表现为「三项背景斑驳不一致、长类名折行」。
   这里把 <a> 改成 block（width:100% 生效）、每行自带不透明底、面板也实心、并禁止折行。
   transition: none 是原有约定：划过直接是灰底，不产生渐变中间态。 */
#top-primary-nav .menuzord-menu>li>ul.dropdown,
#top-primary-nav-clone .menuzord-menu>li>ul.dropdown {
    background: #fff;
    min-width: 320px;
}
#top-primary-nav .menuzord-menu ul.dropdown li a,
#top-primary-nav-clone .menuzord-menu ul.dropdown li a {
    display: block;
    width: 100%;
    background: #fff;
    color: #333;
    white-space: nowrap;
    transition: none;
}
#top-primary-nav .menuzord-menu ul.dropdown li a:hover,
#top-primary-nav-clone .menuzord-menu ul.dropdown li a:hover {
    background: #f5f5f5;
    color: #2a6ea8;
    padding-left: 25px;
}

/* GEO/CWV: keep intrinsic aspect ratio once width/height attrs exist */
img[width][height] { height: auto; }

/* ============== CRM 首页广告栏（site=electronics，浏览器直连 4188 公开接口） ==============
   插在 body 最前、联系方式条(.top-bar)之上。
   ⚠️ 2026-09-18 用户要求**取消背景色**：原为深蓝 #1a3050、后台又设过品牌橙 #FF6B1A，
   两条色带都跟本站「深蓝 + 白」主题打架。现在整条走无底色风格 —— 透明背景 + 主题正文色，
   只用一条 --line 细线与下方内容分隔。后台若填了真实 bg/fg 仍会以内联 style 覆盖这里
   （见 site.js#bannerBarHtml），所以这条广告的 bg/fg 必须留空。 */
.crm-banner {
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.crm-banner-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; gap: 14px;
}
/* 文字容器必须透明：某些浏览器扩展（Google 翻译的「显示原文」浮层、Dark Reader 类强制配色）
   或主题规则会给 <p>/容器塞一块浅色底，橙条上就出现"白块"，看着像整条没背景色。
   实测网页本身这两层都是 transparent，这里用 !important 兜底，压掉外部注入的底色。 */
.crm-banner-inner, .crm-banner-text { background: transparent !important; }
.crm-banner-text { margin: 0; flex: 1; min-width: 0; }
.crm-banner-cta { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.crm-banner-cta:hover { text-decoration: underline; }
.crm-banner-close { margin-left: auto; background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; padding: 0 2px; flex: 0 0 auto; }
.crm-banner-close:hover { opacity: 1; }
@media (max-width: 767px) {
  .crm-banner-inner { flex-wrap: wrap; gap: 6px 14px; padding-inline: 16px; }
  .crm-banner-close { position: absolute; right: 10px; top: 4px; }
  .crm-banner { position: relative; }
}

/* ============== 首页轮播（CRM「首页轮播」广告驱动，site=electronics） ==============
   幻灯片沿用主题的 .slide / .slide.active（banner.css 已给绝对定位 + 淡入淡出 + 铺满），
   这里只补两件：整张图可点（<a> 撑满）与覆盖在图上的文案条。
   ⚠️ .tg-hero-cap 用了 display:block —— 必须同时兜底 [hidden]，否则广告没配文案时
   会留下一条空的深色渐变条（display 压掉 [hidden] 是本项目的老坑）。 */
.slide > a { display: block; height: 100%; }
/* 幻灯片字幕：**逐项对齐 craftsite 的 .carousel-caption**（用户要求「按 4600 的效果对齐」）。
   4600 原规则：inset-inline-start:32px / bottom:32px / max-width:min(560px,70%) / padding:12px 18px /
   border-radius: var(--radius-sm)=12px / background rgba(20,28,56,.55) / color #fff /
   font-family var(--font-display) / clamp(16px,2vw,24px) / 700 / line-height 1.35 / backdrop-filter blur(4px)。
   ⚠️ 这里**故意不加小屏特例**：4600 没有 media query，加了（原来那版 767px 下 16px 贴边）两站就不一致了。
   ⚠️ display:block 必须配 [hidden] 兜底 —— 广告没配文案时会留下一条空的深色条（本项目老坑）。
   ⚠️ 2026-09-18 第三轮（用户最终诉求）：「不是显示在广告栏，而是显示页面顶部」⇒ 该字幕**已停用**，
   改由「顶部文字条」渲染到页面最顶端（placement 含 topbar 时 site.js#renderBannerBars 插到 body 最前），
   即页面真正的顶部。下面保留原参数只为回退方便：删掉末尾 .tg-hero-cap{display:none!important} 即可恢复。
   4600 的 .carousel-caption（craftsite/public/css/site.css）已同步做同样处理 —— 两边必须一起改。 */
.tg-hero-cap {
  display: block;
  position: absolute;
  inset-inline-start: 32px;
  top: 32px;
  max-width: min(560px, 70%);
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(20, 28, 56, .55);
  color: #fff;
  font-family: 'Quicksand', 'Nunito', 'Varela Round', 'Trebuchet MS', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.35;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.tg-hero-cap[hidden] { display: none !important; }
/* 第三轮：图上字幕整体停用（同一段文案改由「顶部文字条」渲染到页面最顶端）。
   回退方式：删掉下面这行，并把广告的 placement 去掉 topbar。 */
.tg-hero-cap { display: none !important; }

/* ============== 首页轮播：高度改为 aspect-ratio 派生（消灭 px 硬写） ==============
   【病因·手机端整块空白】容器高度此前有两套写入方，且都以 px 硬写：
     · 主题 banner.css：`.slideshow-container{height:500px}` + `.slide img{max-width:100%}`
       （图片没有 height/object-fit ⇒ 按自身比例渲染后顶部对齐，500px 容器下方全是空白）
     · banner.js：`container.style.height = activeSlide.clientHeight + 'px'`
       （图未加载时 clientHeight=0 ⇒ 容器塌成 0）
     · site.js#mountHeroCarousel：insertAdjacentHTML 后**立即**读 first.clientHeight，
       此时可能还没布局（=0），`if (first.clientHeight)` 这个「防 0」守卫让正确值永远写不进去。
   三者互相打架 ⇒ 容器在 0 / 500 / 163px 之间跳（时对时错）。
   【修法】只留**一套**确定性尺寸：图片解码后由 JS 把 naturalWidth/naturalHeight
   写进 CSS 变量 --tg-hero-ratio，容器高度完全由 aspect-ratio 派生（浏览器唯一的真值来源）。
   JS 只写变量、绝不写 style.height ⇒ 容器高度不再随「读不到的 clientHeight」塌成 0，
   也不再是某个断点下才对的 500px；任意窗口宽度都自动跟随，resize / 旋转设备无需重算。
   比例锁定在**首图**上（本组广告混有 2.4:1 与 3:1 两种素材，逐张切换会让高度每 5 秒跳一次），
   比例不同的那张由下面的 object-fit:cover 居中裁掉少量边缘 ⇒ 任何情况下都不露白。
   ⚠️ height:auto 必须 !important：banner.css 由页面内 <link> 引入（在 site.css 之后），
   同特异性下它会赢，不用 !important 压不掉它的 height:500px。
   顺带的好处：即使浏览器缓存着**旧版 banner.js**（它仍会写 style.height=0px），
   内联的 px 高度也赢不过这里的 !important，布局依旧是正确的。 */
.slideshow-container {
  height: auto !important;
  /* 默认比例 = 当前广告素材 2560×1067；JS 未跑 / 图片未加载完时按它兜底，
     保证任何情况下容器都有确定高度（既不塌成 0，也不是写死的 500px）。 */
  aspect-ratio: var(--tg-hero-ratio, 2560 / 1067);
  /* 图片没加载出来时是一块深色，而不是刺眼的白洞（用户症状「整块空白、像没显示」）。
     取广告主色 navy 系，与 hero 素材底色接近，弱网下也不难看。 */
  background-color: #0e1a30;
}

/* 幻灯片图片必须铺满容器：banner.css 只给了 max-width:100%，缺 height/object-fit，
   这才导致「图片按自身比例渲染、下方留白」。 */
.slide img {
  display: block;
  width: 100%;
  height: 100%;
  /* 容器比例=图片比例时 cover 不裁切；比例不一致时（如手机 min-height 生效）
     居中裁切少量边缘，绝不会出现留白。 */
  object-fit: cover;
  object-position: center;
}

/* ---------- 右侧箭头被固定社交栏压住：用 padding-right 把 .controls 内容盒收进来 ----------
   右侧固定社交栏 .suspension（fixed; right:0; top:170px; z-index:55）整条压在「下一个」箭头上
   —— elementFromPoint 在 390/414/768/1440 四档全部命中 a.a-facebook > i，手指点不到「下一个」
   （2026-10-19「悬浮栏回右侧」那轮引入的既有问题；RTL 下镜像成盖住 prev）。
   修法：用 **padding-right** 把 .controls 的内容盒右边缘收到社交栏内侧。
   为什么是 padding-right 而不是别的：
     · .controls 的子项是 flex 静态项，left/right/inset 一律不生效（banner.css 里 `top:0` 本就是无效声明）；
     · `margin-inline-*` / `inset-inline-*` 在 RTL 会镜像到左侧，而社交栏始终在**物理右侧**，会修错边；
     · `width: calc(100% - 78px)` 在 RTL 下块盒靠 inline-start(=右) 对齐，收的是左边缘，同样修错边；
     · padding 是**物理**属性 + 全站 `*{box-sizing:border-box}`（本文件第 47 行），LTR 收住 next、
       RTL 收住 prev（RTL 下两者镜像），两个方向都对，且不需要 dir 选择器。
   不动 z-index：抬到 55 以上会让箭头画在社交图标上面，从「点不到」变成「看着叠在一起」。
   ⚠️ 配套：`.controls .prev/.next { position: relative }`（见下一条规则）——
      箭头图标 .arrow 是 position:absolute; right:0，其包含块是 position:relative 的 .controls，
      不加这条时图标会留在 .controls 的 padding 盒右边缘（= 屏幕右边缘）不跟着可点区内缩，
      于是「可点区挪开了、图标还在社交栏底下」，点击命中与视觉位置错位（假修）。 */
/* 内缩量按**实测**社交栏宽度取：桌面与手机都是 70px（site.css 里那条 ≤767.98px 的 width:50px
   被后面的 .suspension 规则覆盖了，实测 elementFromPoint 得到的 rect 宽就是 70）。
   所以两个断点都用 78px = 70 + 8 呼吸位；早先手机用 58px 时，箭头右缘还有 12px 压在图标上。 */
.controls { padding-right: 78px; }
/* 让 .arrow（absolute; right:0 / left:0）以**自己的 span** 为包含块，从而随可点区一起内缩。
   position:relative 无偏移量，不改变布局；z-index 仍为 auto，不新建层叠上下文，
   banner.css 里 .arrow 的 z-index:6 依旧相对 .controls 生效。 */
.controls .prev,
.controls .next { position: relative; }

/* ---------- 首页轮播只留「上一个」一个方向键（2026-11 按需求删除右侧箭头） ----------
   index.html 的 .flex-next 已移除，.controls 里只剩 .prev 一个 flex 子项：
     · LTR：justify-content:space-between 对单子项等价 flex-start → 落在视觉左侧，位置同旧版；
     · RTL（ar 页 <html dir="rtl">）：主轴镜像，单子项会落到视觉**右侧**，正好回到
       社交栏底下（也就是刚才被删掉的那个位置）。
   所以 RTL 下反转主轴，把唯一的方向键拉回视觉左侧，保证 6 个语言页观感一致。
   ⚠️ 若将来恢复双箭头，这条规则仍然正确（RTL 下 prev/next 交换视觉位置，符合语序）。 */
html[dir="rtl"] .controls { flex-direction: row-reverse; }

@media (max-width: 767px) {
  /* 390px 宽下 2.4:1 的图只有 163px 高 —— 数值正确但手机上广告"没存在感"。
     给一个最小高度，由 object-fit:cover 居中裁掉左右少量边缘补齐。
     ⚠️ 只在小屏断点生效，不要带到桌面（桌面维持素材原始比例，不裁切）。 */
  .slideshow-container { min-height: 200px; }
}

/* ============== 首页：不要「面包屑 + 页面标题」区块 ==============
   那个 section.page-title 自带一张背景图 + 深色遮罩，而它用的素材
   (/assets/vendor/upload/2023/12/202312271703661521285831.jpg) 与紧随其后的
   首页轮播是同一张 —— 视觉上同一张图连着出现两遍；信息量也是重复的
   （面包屑"首页"指向自己，H1 就是"首页"）。
   去掉后首页直接由 CRM 广告轮播开场，与 craftsite（4600）首页一致。
   · 只作用于首页：.slideshow-container 全站只有 index.html 有，用 :has() 兜住；
     内页的同名区块（关于我们 / 新闻 / FAQ 等，面包屑 + 各自 H1 有导航与信息价值）完全不受影响。
   · 用 CSS 隐藏而不是删 HTML：H1 仍留在 DOM 里（爬虫/无障碍读得到），
     也避免动 18 个页面的结构。 */
body:has(.slideshow-container) section.page-title { display: none !important; }

/* ============== 顶部导航几何稳定化（多语言） ==============
   病因：menuzord 菜单右对齐且宽度由文案决定 ⇒ 一级项总宽随语言在 520(zh)~814(ru) 之间漂移，
   菜单左边缘跟着从 706 跑到 452，长语言几乎顶到 logo。切换语言时整条菜单"跑来跑去"。
   修法：给 ul 一条固定宽度的"跑道"并保持右对齐 —— 内容靠右、左边缘恒定；
   项内 padding 统一、强制 nowrap（避免长词折行撑高行高）；长语言再压一档 padding。 */
#top-primary-nav .menuzord-menu {
  align-items: center;
  /* center（不是 space-between）：菜单项紧凑连成一排，只保留各自 12px 内边距形成的 24px 间距，
     不再把剩余宽度均分到项之间（那会把菜单拉散成中间一片空白）。
     跑道宽度仍是固定的，所以各语言仍然不会左右乱跑 —— 只是内容块在跑道内居中，
     不同语言因文字长度差异会有 ±42px 的对称微移（实测 en 562px / ru 646px）。 */
  justify-content: center;
  flex-wrap: nowrap;
  /* ⚠️ 2026-09-18 随字号一起加宽：700 → 720。字号 14→16 后最长的俄语一级项总宽
     由实测 640px 涨到约 699px，原来的 700 只剩 1px 余量（内容在跑道内居中，
     一旦超出会向两侧同时溢出并压到 logo）。 */
  /* ⚠️ 2026-10-10 短暂加宽到 840 又撤回：加「新闻与文章」长标签时实测 ru 需 737px，
     确实装不下 720；但用户要求标签改回短名「新闻 / News」后，实测最宽项降到
     ru 594 / fr 530 / es 526 —— 原 720（≥1400）/ 660（1200~1399）已有 66px 余量。
     故恢复原值，把跑道留给以后的导航项。 */
  width: 720px !important;
  max-width: 100%;
}
#top-primary-nav .menuzord-menu > li {
  float: none !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* 109px = 改前实测的整条 header 高度（主题给 li 上下各 20px padding + a 的 69~71px）。
     底色胶囊缩到 41px 后必须显式补回行高，否则 header 会整体变矮 28px（页面版式跟着变），
     而且下拉是相对 li 下缘定位，li 一矮下拉就会钻进 header 里。 */
  min-height: 109px;
}
#top-primary-nav .menuzord-menu > li > a {
  display: block;
  /* 上下只给 12px：底色因此只包住文字，成为"小胶囊"而不是整块 71px 大色块。
     左右 14px 保证相邻项之间仍有 28px 视觉间距。 */
  padding: 12px 14px !important;
  border-radius: 8px;
  /* 2026-10-02 用户要求菜单字体再 +2px ⇒ 18px（14 → 16 → 18）。
     实测 18px 下各语言一级项总宽：en 439 / zh 464 / fr 472 / es 484 / ar 433 / ru 547px，
     最长仍是俄语 547px，跑道上限 720px（≥1400）与 660px（1200~1399）都还有 110px+ 余量，
     所以这次**不需要**加宽跑道（上方 .menuzord-menu 的 width 保持 720 / 660 不动）。
     若以后再加大字号：跑道不够时菜单会向两侧溢出并压到 logo，需同步调这两个值。 */
  font-size: 18px;
  white-space: nowrap;
  line-height: 1.2;
}
/* 窄屏的克隆（汉堡）菜单是主题运行时复制的另一份 DOM（id 带 -clone），单独挂字号保持一致。
   同时直接命中 #main-nav-clone > li > a，以防 menuzord 在移动端把 .menuzord-menu 类去掉。 */
#top-primary-nav-clone .menuzord-menu > li > a,
#main-nav-clone > li > a {
  font-size: 18px;
}
/* 中屏（1200~1399）跑道再收窄：12xx 视口下 logo 与菜单之间只剩 46px，不能再靠加宽跑道解决。
   字号涨到 16px 后俄语需约 699px > 660px，所以这里把项内左右 padding 由 14px 收到 9px
   （实测俄语回落约 620px），用"缩内边距"换回宽度，而不是让菜单压到 logo 上。 */
@media (max-width: 1399px) {
  /* ⚠️ 2026-10-10 曾加宽到 780，已随标签改短撤回（理由见上方 width 处的注释）。 */
  #top-primary-nav .menuzord-menu { width: 660px !important; }
  #top-primary-nav .menuzord-menu > li > a { padding: 12px 9px !important; }
}
/* ============== 导航形态：≥1024 桌面菜单 / <1024 汉堡抽屉 ==============
   【2026-11 断点体系统一】原来这里是「700~1099 紧凑桌面模式」的一段：
   为了让 1080 宽 + 150% 缩放（CSS 720）也能用桌面菜单，把 desktop ul 强行
   display:flex!important 一路撑到 700px。实测代价很大：
     · 跑道固定 520~660px，加上 logo(195) 与 .menuzord 的 150px 右内边距，
       768~1023 一行放不下 ⇒ `.header-nav-col-row` 折成两行
       （实测 768：行高 151px，logo 在第一行、菜单整条掉到第二行并左缩）；
     · menuzord 自己的响应式断点是 k=699（menuzord.js: var k=699），>699 时
       它执行 e() = 菜单 show() + 汉堡 .hide() ⇒ 700~1023 既没有正常桌面导航，
       也没有汉堡按钮，是最难用的一档。
   现在统一进四档体系：**<1024 一律走「汉堡 + 抽屉」**（与 375 同一条代码路径），
   桌面菜单只在 ≥1024 出现。menuzord 的 inline display 必须用 !important 压掉
   —— 它每次 resize 都会重写 ul / .showhide 的 inline style。 */
@media (max-width: 1023.98px) {
  #top-primary-nav .menuzord-menu { display: none !important; }
  #top-primary-nav .showhide { display: inline-flex !important; }
}
@media (min-width: 1024px) {
  #top-primary-nav .menuzord-menu { display: flex !important; }
  #top-primary-nav .showhide { display: none !important; }
  /* 克隆导航只在 <1024 的抽屉里出现。删掉旧的 `@media(min-width:700px)`
     隐藏规则后暴露出来的缺口：1024~1199 既不命中 bootstrap 的 d-xl-none，
     也不在 <1024 段里 ⇒ 空的克隆 nav 会以普通块**占 144px 高**（实测 1080）。 */
  body #top-primary-nav-clone { display: none !important; }
}

/* ============== PRODUCT DETAIL (alibaba-style) ==============
   product.html 的商品详情页：面包屑 + 左图右信息（价格/起订量/属性表/CTA/供应商）
   + 下方 产品描述/规格参数/详情图/相关产品。沿用上面的设计变量，不引入新配色。 */
.pd-crumb { margin-top: 8px; font-size: 13px; color: var(--slate-500); }
.pd-crumb a:hover { color: var(--navy); }
.pd-crumb strong { color: var(--slate-900); font-weight: 600; }

.pd-title { font-size: clamp(20px, 2.6vw, 30px); line-height: 1.3; color: var(--ink); margin: 14px 0 0; }

.pd-top { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 22px; }
@media (min-width: 900px) { .pd-top { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 44px; } }

.pd-main { aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; display: grid; place-items: center; }
.pd-main img { width: 100%; height: 100%; object-fit: contain; }
.pd-main .pd-ph { color: var(--slate-400); font-size: 14px; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.pd-thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 2px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; overflow: hidden; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.is-active { border-color: var(--navy); }

.pd-price { margin-top: 16px; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: #d9531e; }
.pd-attrs { margin-top: 18px; border-top: 1px solid var(--line); }
.pd-attrs li { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pd-attrs .k { flex: 0 0 118px; color: var(--slate-500); }
.pd-attrs .v { color: var(--ink); font-weight: 600; word-break: break-word; }
.pd-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pd-cta .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); font-weight: 600; cursor: pointer; }
.pd-cta .btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.pd-supplier { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 16px; }
.pd-supplier h3 { font-size: 15px; color: var(--ink); margin: 0 0 6px; }
.pd-supplier p { font-size: 13px; color: var(--slate-500); }

.pd-sec { margin-top: 48px; }
.pd-sec > h2 { display: inline-block; font-size: 20px; color: var(--ink); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); }
.pd-prose { color: var(--slate-700); font-size: 15px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.pd-imgs { display: grid; gap: 14px; margin-top: 18px; }
/* 防 CLS：详情图册每张图先占一个 1:1 的位置（产品图多为方图），图片到位后不再撑高页面。
   object-fit:contain 保证非方图完整显示、不裁切；背景取纸色，边缘留白不突兀。 */
.pd-imgs img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }

/* ===== 静态产品详情图集交互（2026-11-05） =====
   /products/<slug>.html 是构建期静态页，不加载 product-detail.js，模板里只有裸 <img>，
   此前点图毫无反馈。site.js 的 initStaticProductGallery() 负责切换主图 + 灯箱，
   这里只给状态、焦点与层级，不改动原有图形尺寸规则。 */
.pd-main img[data-pd-zoom], .pd-imgs img[data-pd-zoom] { cursor: zoom-in; }
.pd-imgs img[data-pd-zoom] { transition: border-color .15s ease, box-shadow .15s ease; }
.pd-imgs img[data-pd-zoom]:hover { border-color: var(--navy); }
.pd-imgs img.is-active { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.pd-main img[data-pd-zoom]:focus-visible,
.pd-imgs img[data-pd-zoom]:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.pd-lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(12, 16, 24, .9);
}
.pd-lightbox img {
  max-width: min(92vw, 1200px); max-height: 86vh; object-fit: contain;
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.pd-lightbox-close, .pd-lightbox-nav {
  position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pd-lightbox-close { top: 16px; right: 20px; }
.pd-lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 30px; }
.pd-lightbox-prev { left: 16px; }
.pd-lightbox-next { right: 16px; }
.pd-lightbox-close:hover, .pd-lightbox-nav:hover,
.pd-lightbox-close:focus-visible, .pd-lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, .3); outline: 2px solid #fff; outline-offset: 2px;
}
.pd-lightbox-count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .85); font-size: 13px;
}
/* ★html 与 body 一起锁：本站有 html,body{overflow-x:clip}，只锁 body 时
   overflow 不会传播到视口（移动端抽屉踩过同一个坑）。 */
html.pd-lightbox-open, body.pd-lightbox-open { overflow: hidden; }
body.pd-lightbox-open { padding-right: var(--pd-lock-pad, 0px); }
@media (prefers-reduced-motion: reduce) {
  .pd-imgs img[data-pd-zoom] { transition: none; }
}
.pd-loading { padding: 72px 0; text-align: center; color: var(--slate-500); }
.pd-back { display: inline-block; margin-top: 12px; }

/* ============== QUOTE ITEMS (contact / 询盘页产品清单) ==============
   由 quote-items.js 注入 #quote-items 并渲染：只在 URL 带来产品（?product=）时显示，
   没有产品时面板保持 hidden —— 整块不出现，而不是显示「暂无产品」。 */
.qi-panel { margin-bottom: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.qi-panel h3 { font-size: 15px; color: var(--ink); margin: 0 0 10px; }
.qi-count { color: var(--slate-500); font-weight: 400; }
/* 最多露出 3 条，再多就在列表内滚轮滚动。max-height 由 quote-items.js 按真实行高量出来
   （长中文名折 2~3 行，写死像素会只露出 2 条半、正好 3 条时反而冒滚动条）。
   scrollbar-gutter: 预留滚动条槽位——否则"出滚动条→行宽窄 15px→文字重新折行→行变高"，
   会让 3 条的边界量不准，且面板事后长高还会触发浏览器 scroll anchoring 把页面往下拽。
   overscroll-behavior 防止滚到底后把整页带着一起滚。 */
.qi-list { display: grid; gap: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.qi-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); flex-wrap: wrap; }
.qi-thumb { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.qi-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 名称 + meta 同排占中间：CRM 产品名动辄上百字符（英文尤甚），必须限行，
   否则一个产品就折 4 行、整块清单把页面撑到 700px+（多个产品时非常难看）。
   .qi-main 用 flex-basis 140px + min-width 140px：既保证不缩到 1 字符宽（早前逐字竖排的 bug），
   又让 2 行内放下尽可能多的字。 */
.qi-main { flex: 1 1 140px; min-width: 140px; }
.qi-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: break-word; word-break: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qi-name a { color: inherit; }
.qi-name a:hover { color: var(--navy); }
.qi-meta { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--slate-500); }
.qi-del { flex: 0 0 auto; padding: 2px 6px; border: 0; background: transparent; color: var(--slate-400); font-size: 18px; line-height: 1; cursor: pointer; }
.qi-del:hover { color: #d9531e; }
/* 询盘清单数量输入：默认=起订量，min=起订量；低于起订量标红（is-bad）+ 红字提醒，失焦自动抬到下限 */
.qi-qty-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qi-qty { width: 68px; padding: 5px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink, #22303c); font: inherit; font-size: 13px; text-align: center; }
.qi-qty:focus { outline: none; border-color: var(--navy); }
.qi-qty.is-bad { border-color: #d9531e; color: #d9531e; }
/* 数量下方常驻提示：最少起订量 N；低于时变红字「不能少于起订量 N」 */
.qi-qty-hint { font-size: 11px; line-height: 1.3; color: var(--slate-500); text-align: center; }
.qi-qty-hint.is-error { color: #d9531e; font-weight: 600; }

/* ===== News / Articles list (editorial layout, NOT a product grid) ===== */
.news-archive { display: block; }

/* Featured lead story */
.news-featured {
  display: flex; gap: 28px; align-items: center;
  padding: 22px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 28px;
}
.news-featured-media {
  flex: 0 0 32%; aspect-ratio: 16 / 10; max-height: 210px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, var(--paper), #e3e8ed);
  display: flex;
}
.news-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-featured-media.news-cat-news,
.news-featured-media.news-cat-guide,
.news-featured-media.news-cat-insight,
.news-featured-media.news-cat-case {
  align-items: center; justify-content: center; color: #fff;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 20px;
}
.news-featured-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.news-featured-title { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; margin: 10px 0 12px; }
.news-featured-title a { color: var(--ink); text-decoration: none; }
.news-featured-title a:hover { color: var(--accent); }
.news-featured-excerpt { color: var(--slate-700); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.news-more { font-weight: 600; color: var(--accent); text-decoration: none; font-size: 14px; }
.news-more:hover { text-decoration: underline; }

/* Year grouping */
.news-year { margin-top: 4px; }
.news-year-title {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-500); font-weight: 700;
  padding: 14px 0 2px; margin: 0; border-top: 2px solid var(--line);
}

/* Article rows */
.news-rows { list-style: none; margin: 0; padding: 0; }
.news-row {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.news-thumb {
  flex: 0 0 116px; width: 116px; height: 88px;
  border-radius: 8px; overflow: hidden; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px;
  text-decoration: none;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-row-body { flex: 1; min-width: 0; }
.news-row-title { font-size: 17px; line-height: 1.35; margin: 6px 0 6px; }
.news-row-title a { color: var(--ink); text-decoration: none; }
.news-row-title a:hover { color: var(--accent); }
.news-row-excerpt { color: var(--slate-700); font-size: 14px; line-height: 1.55; margin: 0; }

/* ---- 整卡可点 + 卡片级 hover 反馈（2026-10-14）----
   原来只有缩略图和标题文字能点，卡片空白、摘要区域点了没反应——访客直觉是"整张卡都是链接"。
   做法是 stretched link：让标题那个 <a> 的 ::after 绝对定位铺满整卡（inset:0），
   点击落在伪元素上等于点在标题链接上。比给每个区块套一个 <a> 干净：
   HTML 不用动，也不会出现嵌套链接（卡片里已经有 thumb/title/more 三个链接了）。
   z-index：伪元素 2、缩略图 1 —— 缩略图自己也链向同一 URL，谁在上层都能进详情。
   代价：.news-more 自身的 :hover 下划线会被伪元素挡住，改用 .news-featured:hover 触发。 */
.news-featured, .news-row { position: relative; }
.news-featured-title a::after,
.news-row-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
}
.news-thumb, .news-featured-media { position: relative; z-index: 1; }
.news-featured:hover .news-more { text-decoration: underline; }

/* hover 反馈：卡片整体给底色/描边，缩略图轻微放大，标题变色（标题变色原有，这里补卡片级） */
.news-thumb img, .news-featured-media img { transition: transform .35s ease; }
.news-row { transition: background-color .18s ease; }
.news-row:hover { background: var(--paper); }
.news-row:hover .news-thumb img { transform: scale(1.06); }
.news-featured { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.news-featured:hover { border-color: var(--accent); box-shadow: 0 10px 26px rgba(16,33,31,.10); }
.news-featured:hover .news-featured-media img { transform: scale(1.04); }
/* 无封面时的分类色块也给反馈：否则一半卡片（案例类全是色块）hover 时毫无变化 */
.news-thumb.news-cat-news, .news-thumb.news-cat-guide,
.news-thumb.news-cat-insight, .news-thumb.news-cat-case { transition: filter .18s ease; }
.news-row:hover .news-thumb.news-cat-news,
.news-row:hover .news-thumb.news-cat-guide,
.news-row:hover .news-thumb.news-cat-insight,
.news-row:hover .news-thumb.news-cat-case { filter: brightness(1.12); }

/* 新闻列表分页（2026-10-14：每页 10 条，超出翻页）。
   放在这里而不是 build-articles.mjs 的 ARTICLE_CSS：那段只注入文章详情页，
   而分页控件在 news.html 列表页上——列表页只加载本文件。 */
.news-page.is-hidden { display: none; }
.news-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 34px 0 6px; flex-wrap: wrap; }
.news-pager-btn, .news-pager-num { appearance: none; border: 1px solid #e1e8e6; background: #fff; color: #2b3a36; border-radius: 8px; padding: 8px 14px; font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit; }
.news-pager-btn:hover, .news-pager-num:hover { border-color: #be123c; color: #be123c; }
.news-pager-num.is-active { background: #be123c; border-color: #be123c; color: #fff; }
.news-pager-btn:disabled { opacity: .4; cursor: default; }
.news-pager-btn:disabled:hover { border-color: #e1e8e6; color: #2b3a36; }

/* Shared meta line: category pill · date · read time */
.news-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--slate-500); margin: 0;
}
.news-meta time { color: var(--slate-500); }
/* 成交金额徽章（2026-10-14）：只有案例类文章且填了金额才出现。
   用最深的墨色而不是分类彩标那几色——金额是访客最先找的信息，要比"案例/新闻"标签更重。 */
.news-amount {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 11px; border-radius: 999px;
}
.news-amount-label { font-size: 11px; font-weight: 500; opacity: .82; letter-spacing: .04em; text-transform: uppercase; }
.news-tag {
  color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
}
.news-cat-news    { background: var(--navy); }
.news-cat-guide   { background: var(--accent); }
.news-cat-insight { background: #0f766e; }
.news-cat-case    { background: #b45309; }

/* Empty state */
.news-empty {
  padding: 48px 20px; text-align: center; color: var(--slate-500);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--paper);
}

@media (max-width: 760px) {
  .news-featured { flex-direction: column; gap: 16px; margin-bottom: 20px; }
  .news-featured-media { flex-basis: auto; aspect-ratio: 16 / 9; max-height: none; }
  .news-thumb { flex-basis: 84px; width: 84px; height: 64px; font-size: 11px; }
  .news-row { gap: 12px; }
}

/* ==============================================================================
   首页两个「卡片式板块」：外框 + 卡片统一（2026-10-14）
   ------------------------------------------------------------------------------
   需求：给首页「精选产品」与「产品分类」两个板块加边框，并整体优化观感。
   做法：只在 index.html 这两个 section 的 .container 上挂 .tg-panel，样式全部
   限定在 .tg-panel 后代里 —— 其它页面和其它区块（news / about / FAQ …）零影响。
   ⚠ 卡片 HTML 来自主题模板，内部用了 !important 工具类（.pt-20 / .mb-20 /
     .pt-15），覆盖它们必须同样带 !important，否则规则看起来对却静默失效。
   ============================================================================ */
.tg-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 44px 40px 34px;
  margin: 18px 0 26px;
  box-shadow: 0 1px 2px rgba(15, 17, 21, .04), 0 34px 70px -58px rgba(15, 17, 21, .5);
}
/* 面板内标题到网格的间距：主题给的是 60px，收进框里后过于松散 */
.tg-panel .mb-60 { margin-bottom: 34px !important; }
/* 网格到 ALL PRODUCTS 的间距：卡片自带 mb-20，再叠 pt-15 会松掉半屏 */
.tg-panel .section-content > .text-center { padding-top: 0 !important; }

/* ---- 卡片：白底 + 细描边 + 圆角，并撑满所在列（同一行卡片等高） ---- */
.tg-panel [data-featured-products] > div,
.tg-panel #home-chips > div { display: flex; }
.tg-panel .tm-zatrim-blog {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0 !important;      /* 行距交给列的 mb-20，避免 20+30 叠加 */
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tg-panel .tm-zatrim-blog > article.post { display: flex; flex-direction: column; flex: 1; }
.tg-panel .tm-zatrim-blog:hover {
  transform: translateY(-4px);
  border-color: var(--navy);
  box-shadow: 0 18px 36px -26px rgba(15, 17, 21, .5);
}

/* ---- 图片区：统一 1:1 画框 + contain —— 产品图不被裁切，四张卡一样高 ---- */
.tg-panel .tm-zatrim-blog .thumb { position: relative; aspect-ratio: 1 / 1; background: var(--white); }
.tg-panel .tm-zatrim-blog .thumb img,
.tg-panel .tm-zatrim-blog:hover .thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transform: none;                  /* 关掉主题的 hover 放大：contain 图会被裁掉两端 */
}

/* ---- 标题区：垂直居中，长标题与短标题的卡片底部因此对齐 ---- */
.tg-panel .tm-zatrim-blog .entry-content {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 16px 18px !important;
}
.tg-panel .tm-zatrim-blog .entry-title { font-size: 15px; line-height: 1.42; margin: 0; }
.tg-panel .tm-zatrim-blog .entry-title a { color: var(--ink); }
.tg-panel .tm-zatrim-blog .entry-title a:hover { color: var(--accent); }
.tg-panel #home-chips .entry-title { font-size: 17px; }

@media (max-width: 991px) {
  .tg-panel { padding: 30px 22px 24px; border-radius: 14px; }
  .tg-panel .mb-60 { margin-bottom: 26px !important; }
  .tg-panel .tm-zatrim-blog .entry-title { font-size: 14px; }
  .tg-panel #home-chips .entry-title { font-size: 16px; }
}
@media (max-width: 575px) {
  .tg-panel { padding: 22px 14px 18px; border-radius: 12px; margin: 14px 0 20px; }
  /* 手机单列时 1:1 图区太高（三张分类卡就占满一屏多），改 4:3 压高度 */
  .tg-panel .tm-zatrim-blog .thumb { aspect-ratio: 4 / 3; }
  .tg-panel .tm-zatrim-blog .entry-content { padding: 12px 10px 14px !important; }
  .tg-panel .tm-zatrim-blog .entry-title,
  .tg-panel #home-chips .entry-title { font-size: 13px; line-height: 1.35; }
}

/* ==============================================================================
   首页 About 板块（Get to Know More）：文字块自带深色底 + 左侧产品图（2026-10-14）
   ------------------------------------------------------------------------------
   ★根因：主题拿 `.about-me-content:before` 当这块的背景，而它是一张 **不重复的窄装饰图**
     （map.png，`width:111%` + `center right`）——图片只盖住中间窄窄一条。文案一旦写长，
     白色文字就溢出到白色 section 背景上，**整段几乎读不出来**（用户截图的问题）。
   做法：去掉那张装饰图，改成文字块**自带深色卡片**（自带底就与文字长度无关，永远可读）；
   左侧图片同步圆角化并与卡片等高；两列之间补回左列被 pr-0 吃掉的间距。
   ============================================================================ */
.tg-about .about-me-content:before { content: none; }
.tg-about .about-me-content .content {
  background: linear-gradient(135deg, #1f3a4d 0%, #16293a 100%);
  border-radius: 14px;
  padding: 46px 44px;
  margin-left: 30px;                 /* 左列是 pr-0，间距在这里补 */
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 30px 70px -52px rgba(15, 17, 21, .65);
}
.tg-about .about-me-content .content p { color: rgba(255, 255, 255, .92); margin-bottom: 28px; }
.tg-about .about-me-content .content .btn { align-self: flex-start; }
.tg-about .about-me { height: 100%; }
.tg-about .about-me .thumb { height: 100%; margin-bottom: 0 !important; overflow: hidden; border-radius: 14px; }
.tg-about .about-me .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 等高：列是 stretch，但 .content 的 `height:100%` 在 stretch 下不解析（实测卡片比图片矮 163px），
   所以桌面端把两列都改成 flex、卡片 flex:1 撑满。堆叠（<992px）不需要，各回归自然高度。 */
@media (min-width: 992px) {
  .tg-about .col-lg-5, .tg-about .col-lg-7 { display: flex; }
  .tg-about .about-me, .tg-about .about-me-content { flex: 1 1 auto; min-width: 0; }
  .tg-about .about-me-content { display: flex; }
  .tg-about .about-me-content .content { flex: 1; }
}

@media (max-width: 991px) {
  .tg-about .about-me, .tg-about .about-me .thumb { height: auto; }
  .tg-about .about-me .thumb { margin-bottom: 22px !important; }
  .tg-about .about-me .thumb img { height: auto; }
  .tg-about .about-me-content .content { margin-left: 0; padding: 30px 26px; }
}
@media (max-width: 575px) {
  .tg-about .about-me-content .content { padding: 24px 20px; border-radius: 12px; }
}

/* ==============================================================================
   新闻 / 文章列表：占位块浅色化 + 列表卡片化（2026-10-14）
   ------------------------------------------------------------------------------
   ★根因：`.news-cat-*` **一个类名被两处复用** —— meta 行的小圆角标签（.news-tag）
     与缩略图的无封面占位块（.news-thumb / .news-featured-media）。两处共用同一套
     **饱和底色**，于是列表里出现一块块深棕/深蓝「方砖」，主推大卡那块还占掉整张卡
     1/3 面积 —— 这正是用户截图里"太丑"的来源。
   做法：把标签与占位块**拆成两套**。标签保留实心彩底（它是信息位，字小、需要跳色），
     占位块改成浅色调底 + 同色系深字 + 细描边；列表行同时从「分隔线表格行」升级成
     与首页其它卡片（.tg-panel）一致的白底卡片，圆角/投影/hover 用同一套语言。
   ⚠ 覆盖写在文件末尾以赢过同特异性的旧规则（含 760px 媒体查询里的旧值）。
   ============================================================================ */

/* ---- 无封面占位块：浅色调 + 深字 + 细描边 ---- */
.news-thumb[class*="news-cat-"],
.news-featured-media[class*="news-cat-"] {
  text-transform: none;               /* 中文无 uppercase 意义，英文 "Case" 比 "CASE" 温和 */
  letter-spacing: .01em;
  font-weight: 700;
  border: 1px solid transparent;
}
.news-thumb.news-cat-news,    .news-featured-media.news-cat-news    { background: #eef3f9; color: #1f3a4d; border-color: #dae3ee; }
.news-thumb.news-cat-guide,   .news-featured-media.news-cat-guide   { background: #eaf2fb; color: #0a4f9c; border-color: #d4e4f7; }
.news-thumb.news-cat-insight, .news-featured-media.news-cat-insight { background: #e9f6f3; color: #0c635c; border-color: #d0e8e3; }
.news-thumb.news-cat-case,    .news-featured-media.news-cat-case    { background: #fbf3e8; color: #855209; border-color: #f0e1c9; }
/* 浅底再用 brightness(1.12) 会发白，改成描边加深作为 hover 反馈 */
.news-row:hover .news-thumb[class*="news-cat-"],
.news-featured:hover .news-featured-media[class*="news-cat-"] { filter: none; border-color: var(--slate-400); }

/* ---- 列表行：分隔线行 → 白底卡片（与 .tg-panel 同语言） ---- */
.news-rows { display: grid; gap: 12px; }
.news-row {
  padding: 14px 16px;
  gap: 20px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.news-row:hover {
  background: var(--white);
  border-color: var(--navy);
  box-shadow: 0 16px 34px -26px rgba(15, 17, 21, .5);
  transform: translateY(-2px);
}

/* ---- 主推大卡：圆角/投影与全站卡片统一 ---- */
.news-featured { padding: 26px; border-radius: 14px; box-shadow: 0 24px 54px -46px rgba(15, 17, 21, .55); }
.news-featured:hover {
  border-color: var(--navy);
  box-shadow: 0 30px 60px -42px rgba(15, 17, 21, .5);
  transform: translateY(-3px);
}

/* ---- meta 行：日期加重、标签去 uppercase ---- */
.news-meta { gap: 12px; font-size: 12.5px; }
.news-meta time { color: var(--slate-700); font-weight: 600; font-variant-numeric: tabular-nums; }
.news-tag { text-transform: none; letter-spacing: .01em; padding: 3px 10px; }
/* 置顶标记（2026-10-14）：与 .news-tag 同族但用最深的墨色，一眼区别于分类彩标。
   出现即代表「这篇文章被运营置了顶」，不该和"案例/指南"这类内容分类混为一谈。 */
.news-pinned {
  display: inline-flex; align-items: center;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 999px;
}

/* ---- 年份分组：2px 顶线太重，改细线 + 略大字号 ---- */
.news-year-title { border-top: 1px solid var(--line); padding: 20px 0 12px; font-size: 13px; }

/* ---- 摘要按行截断，避免长文把整行撑高 ---- */
.news-row-excerpt,
.news-featured-excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.news-row-excerpt { -webkit-line-clamp: 2; }
.news-featured-excerpt { -webkit-line-clamp: 3; }

@media (max-width: 760px) {
  .news-row { padding: 12px; gap: 14px; }
  .news-featured { padding: 18px; gap: 18px; }
  /* 移动端标题动辄 4~5 行（Alibaba 商品标题很长），卡片被撑得又高又乱：
     压到 15px 并截 3 行，同时把缩略图放大一点求视觉平衡。
     line-clamp 是纯视觉截断，DOM 文本完整 ⇒ 不影响 SEO 与可访问性。 */
  .news-row-title {
    font-size: 15px;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    -webkit-line-clamp: 3;
  }
  .news-thumb { flex-basis: 96px; width: 96px; height: 72px; }
}

/* ==============================================================================
   新闻列表页整体：区块外框 + 主推深色卡（2026-10-14 第三批）
   ------------------------------------------------------------------------------
   为什么还要这一批：前两批把「卡片本身」收拾干净了，但整页看着仍"平"——
     ① 列表从页面标题直接铺开，没有容器感，卡片飘在白底上；
     ② 主推卡与列表卡长得几乎一样，一页只有一个"主角"却看不出来；
     ③ 年份只有一条 2px 横线，不像分组。
   做法：列表区套 .tg-panel（与首页几个区块同一套外框语言）、主推卡改深色成为
     视觉锚点、年份改竖线标签。作用域限 .tg-news（只在 news.html 挂了这两个类）。
   ========================================================================== */
.tg-news .lede {
  font-size: 15px;
  color: var(--slate-500);
  max-width: 62ch;
  margin: 0 0 26px;
}

/* 板块居中：`.container-site` 是 width:100% + max-width:1200 + margin:0 auto，
   视口 ≤1200 时 auto margin 算出来是 0 ⇒ 外框贴屏幕左右边、没有居中感。
   收窄到 1000px 后，1080 / 1366 这类常规桌面宽度都能看到两侧留白，板块才是"居中"的。 */
.tg-news {
  width: auto;
  max-width: 1000px;
  margin-inline: auto;
}

/* ---- 主推卡：白底 + 左侧强调条（试过整张深色卡，太重、压过整页，退回轻量方案） ---- */
.tg-news .news-featured {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 18px 40px -34px rgba(15, 17, 21, .45);
  overflow: hidden;
}
.tg-news .news-featured::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--navy), var(--accent));
}

/* ---- 年份分组：竖线标签比一条横线更像"分组" ---- */
.tg-news .news-year { margin-top: 8px; }
.tg-news .news-year-title {
  display: flex; align-items: center; gap: 10px;
  border-top: 0;
  padding: 22px 0 12px;
  color: var(--slate-700);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.tg-news .news-year-title::before {
  content: ""; flex: 0 0 auto;
  width: 3px; height: 14px; border-radius: 2px;
  background: var(--navy);
}

/* ---- 列表卡：常态也有一点点投影（否则整页发平） ---- */
.tg-news .news-row { box-shadow: 0 1px 2px rgba(15, 17, 21, .04); }
.tg-news .news-row:hover { box-shadow: 0 18px 38px -26px rgba(15, 17, 21, .5); }

/* ==============================================================================
   首页「四道检验」板块：黑色 owl 轮播 → 浅色静态 2×2 网格（2026-11）
   ------------------------------------------------------------------------------
   ★原实现（主题自带）：section 内联 `background-color: black` + `.tm-owl-testimonial-carousel`
     / `.tm-owl-carousel-2col` + 4 张 `.tm-testimonial-box`。实测（Playwright 1440 / 390）：
       ① 同一轮播内卡片高度 273 / 298 / 350px 三种 —— 高度由各自内容撑，没有任何等高约束；
       ② `.tm-sc-tm-icon` 的 ✓ 水印 absolute 且父级 overflow:visible，溢出卡片，
          390px 下直接压住正文；
       ③ 两卡之间夹着主题的斜楔装饰（白色三角形），黑底上格外刺眼；
       ④ 小标题用主题深灰压黑底，对比度 1.11:1（要 4.5:1）；
       ⑤ owl stage 按列宽算，390px 下卡片右缘到 x=430，横向溢出、被右侧分享栏压住；
       ⑥ 每张卡配 `<img alt="Customer avatar">` —— 认证/检验卡片放客户头像，语义错位。
   做法：轮播类全部删掉，改成语义化 section > h2 + ul > li > article 的**静态网格**；
     浅色（--paper 底 / --white 卡 / --line 描边，全部取 :root 已有变量，零新增色值）；
     序号 01–04 徽标纯 CSS 画，板块内不再有任何 <img>。
   ============================================================================ */
.quality-block {
  padding-block: 72px;
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.quality-block-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }

/* 小标题：原来那条主题深灰在黑底上只有 1.11:1。--slate-500 对 --paper 也只有 4.40:1（差一点），
   所以直接用 --slate-700（9.3:1）；两侧细线用 currentColor 画，替代原来那张 title-icon.png。 */
.quality-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  letter-spacing: .02em;
  color: var(--slate-700);
}
.quality-eyebrow::before,
.quality-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .45; }
.quality-block-title { margin-top: 12px; font-size: clamp(24px, 2.6vw, 32px); color: var(--ink); }

/* ---- 网格：≤767px 单列，≥768px 两列；≥1200px 仍是两列（卡片不至于宽到难读） ----
   `grid-auto-rows: 1fr` 是「四张卡完全等高」的关键：默认每行只按本行最高卡定高，
   上下两行会差 40~80px；1fr 让所有行取同一个高度（= 最高那张）。 */
.quality-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 24px;
  max-width: 1040px;          /* 两列时单卡 ≈ 508px，正文行宽落在 70 字符上下 */
  margin-inline: auto;
}
@media (min-width: 768px) { .quality-grid { grid-template-columns: repeat(2, 1fr); } }
.quality-grid > li { display: flex; min-width: 0; }   /* 列拉伸 → 卡片等高 */

/* ---- 卡片：白底 + 细描边，与 .tg-panel / .news-row 同一套卡片语言 ---- */
.quality-card {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 26px 28px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.quality-card-head { display: flex; align-items: center; gap: 14px; }
/* 序号徽标：纯 CSS（圆形 + --navy 底 + 白字），HTML 上带 aria-hidden —— 纯装饰，
   不参与读屏，卡片语义由 <article> + <h3> 承担。 */
.quality-badge {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
.quality-card-titles { min-width: 0; }
.quality-card-title { font-size: 19px; line-height: 1.3; color: var(--ink); }
.quality-card-sub { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--navy); }
.quality-card-desc { margin-top: 16px; font-size: 15px; line-height: 1.72; color: var(--slate-700); }

@media (max-width: 767px) {
  .quality-block { padding-block: 44px; }
  .quality-block-head { margin-bottom: 26px; }
  /* ★单列时不强行等高：手机上「等高」只会让短文案的卡片底部空一大截，
     看起来像排版出错。等高只在**多列并排**时才有意义（同行卡片要对齐）。
     桌面端仍由 .quality-grid 的 grid-auto-rows: 1fr 保证四张完全等高。 */
  .quality-grid { gap: 16px; grid-auto-rows: auto; }
  .quality-card { padding: 20px 18px 22px; }
  .quality-card-title { font-size: 17px; }
  .quality-card-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.68; }
}

/* ============== MOBILE NAV · 子菜单展开指示器 ==============
   症状：手机抽屉里「Products」右侧多出一道竖线（用户截图红框处），横跨 Home 底边与
        Products 整行，看起来像排版错位。
   根因：menuzord 的响应式规则给「带子菜单的项」生成 <span class="indicator">：
        60×45 的绝对定位空盒子，唯一可见的部分就是 border-left: solid 1px #f5f5f5。
        主题原本靠图标字体在这个盒子里画 + / −，而本站没有加载那套字体 ⇒ 盒子里什么都没有，
        只剩一条 1px 竖线。它**不是**内容，纯属主题在缺少图标字体时的残影。
   修法：去掉边框，改用纯 CSS 折角箭头（不依赖图标字体，也不需要展开态的类名）。
        作用域限定在**一级菜单项**，下拉里的嵌套指示器保持主题行为。 */
@media (max-width: 699.98px) {
    .menuzord-responsive .menuzord-menu>li>a>.indicator {
        border-left: 0;
        color: rgba(255, 255, 255, .55);
    }

    /* 闭合态：右/下两条边框组成的折角转 45° = 向下箭头 */
    .menuzord-responsive .menuzord-menu>li>a>.indicator::after {
        content: "";
        display: block;
        width: 9px;
        height: 9px;
        margin: 16px auto 0;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .18s ease;
    }

    /* 展开态：箭头翻 180° 朝上。
       ★判据来自实测：menuzord 展开子菜单时**不加任何 class**，只把 <ul class="dropdown">
         的内联 style 从 "display: none" 改成 "display: block"。所以这里用 :has() 读兄弟节点的
         内联 display，而不是等一个永远不出现的 .open 类（第一版就是照着 .open 写的，箭头不动）。
         不支持 :has() 的旧浏览器只会停在"永远朝下"，不影响展开功能。 */
    .menuzord-responsive .menuzord-menu>li:has(>ul.dropdown:not([style*="none"]))>a>.indicator::after {
        transform: rotate(-135deg);
        margin-top: 20px;
    }

    @media (prefers-reduced-motion: reduce) {
        .menuzord-responsive .menuzord-menu>li>a>.indicator::after {
            transition: none;
        }
    }
}

/* =========================================================================
   2026-10-19 修复用户报告的三项布局/展示问题：
   1) 右侧悬浮社交图标栏（绿色 WhatsApp 标记）移到左侧；
   2) 移动端 Quick Inquiry 面板宽度适配视口、关闭按钮更明显；
   3) 旧 CRM 横幅内容守卫见 site.js。
   ========================================================================= */

/* 1. 悬浮社交分享栏：从右侧移到左侧（含其弹窗气泡） */
.suspension {
    right: auto !important;
    left: 0 !important;
}
.suspension-box {
    float: left !important;
}
.suspension .d {
    right: auto !important;
    left: 67px !important;
}
@media (max-width: 767.98px) {
    .suspension {
        width: 50px;
    }
    .suspension .a {
        width: 36px;
        height: 36px;
    }
    .suspension .a .i {
        width: 36px;
        height: 36px;
        background-size: 22px 22px;
        background-position: 7px 7px;
    }
    .suspension .d {
        left: 42px !important;
    }
}

/* 2. Quick Inquiry 浮动面板移动端适配 */
@media (max-width: 767.98px) {
    .feedback {
        width: min(300px, calc(100vw - 20px)) !important;
        right: 10px !important;
        left: auto !important;
        border-radius: 10px 10px 0 0;
    }
}
/* 关闭按钮加大并居中，确保在窄屏下可见、可点。
   feedback.css 在 site.css 之后才加载，必须用 !important 压住。 */
.feedback .closeBtn {
    width: 36px !important;
    height: 36px !important;
    right: 6px !important;
    top: 2px !important;
    background-size: 18px 18px !important;
    background-position: center !important;
}
.feedbackHeader {
    padding-right: 42px !important;
}

/* =========================================================================
   2026-10-19（第二轮）修复四项布局/展示问题：
   1) 社交悬浮栏保持左侧；
   2) 移动端汉堡图标推到头部最右侧；
   3) 主题抽屉菜单（#top-primary-nav-clone）内容由 site.js 重建，并加明确关闭按钮；
   4) 抽屉默认不占位，展开时才显示，避免空白菜单/空白留白。

   背景：主题 style-main.css 在 ≤1199px 把桌面菜单设成 display:none !important，
   同时把整个导航克隆到 #top-primary-nav-clone 做右侧 70% 抽屉。克隆结果是
   <ul> 套 <ul> 的畸形结构，真实菜单被外层 display:none 藏住 ⇒ 抽屉空白。
   ========================================================================= */

/* 1) 社交悬浮栏双重保险（top.css 在本文件之后加载，故仍需 !important） */
.suspension {
    right: auto !important;
    left: 0 !important;
}
.suspension-box {
    float: left !important;
}
.suspension .d {
    right: auto !important;
    left: 67px !important;
}

@media (max-width: 1023.98px) {
    /* 2) 头部两列顶到两端，汉堡靠右（2026-11：断点由 699.98 提到 1023.98，
       与「<1024 一律汉堡抽屉」的统一体系对齐；700~1023 以前根本没有汉堡） */
    .header-nav-col-row {
        justify-content: space-between !important;
    }
    #top-primary-nav.menuzord {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center;
        /* 不能用 width:100%：700~1023 时两列是 auto 宽并排，撑满会把 logo 挤掉 */
        width: auto !important;
        padding: 0 !important;
    }
    #top-primary-nav .showhide {
        display: inline-flex !important;
    }
    #top-primary-nav .showhide em {
        float: none !important;
    }

    /* 3) 抽屉面板的定位/底色的**唯一来源**。
       主题只在 @media(max-width:699.98px) 里给 fixed/right-0/70%/height 100%（style-main.css:3337），
       700~1023 完全没有 ⇒ 抽屉会以普通流内元素插在页头下方（一打开就把页面顶开）。
       这里统一到 <1024，并由 site.css 覆盖宽度（62vw / 320px 封顶）。 */
    body #top-primary-nav-clone {
        display: none !important;
        position: fixed;
        top: 0;
        right: 0;
        width: min(62vw, 320px) !important;
        height: 100%;
        height: 100dvh;
        background: #333;
        z-index: 10000;
    }
    body.menuzord-menu-open #top-primary-nav-clone {
        display: block !important;
    }

    /* 5) 抽屉打开时不再推走整页。
       主题的做法是 body{left:-70%} + header{left:-70%!important}，把整站往左推，
       于是汉堡按钮被推到抽屉左侧、变成第二个 ×（用户截图红框处）。
       这里把位移全部归零，只留抽屉右侧面板；汉堡在打开态用 visibility 隐藏
       （保留占位，头部不会因为少一个按钮而抖动），关闭统一交给 .clone-close。 */
    body.menuzord-menu-open {
        left: 0 !important;
    }
    body.menuzord-menu-open .header-nav-wrapper {
        left: 0 !important;
    }
    /* 抽屉关闭态用 .clone-close（面板右上角 ×）。打开态**不再隐藏汉堡**：
       它被抬到面板之上并变成 ×，是「再点一次就关」的入口（见附录 §3）。
       2026-11-R2：原来这里是 visibility:hidden!important，导致汉堡视觉上消失、
       且 elementFromPoint 命中面板 ⇒ 二次点击 30s 超时。已删除。 */

    /* 抽屉收窄：70% 在手机上会盖掉整个屏幕，62vw 封顶 320px 留出背景可见区。
       ★必须同时提 z-index：抽屉默认 z-index:auto，会被 hero / 社交栏（z-index:55）
       / 顶部联系栏（更高）盖住 → 视觉上只剩一条黑边，且 .clone-close 点击被 header-top 拦截。 */
    body.menuzord-menu-open #top-primary-nav-clone {
        width: min(62vw, 320px) !important;
        z-index: var(--z-drawer) !important;
    }

    /* 抽屉是独立面板，不能再背桌面导航的 150px 右侧留白 */
    #top-primary-nav-clone.menuzord {
        padding: 0 !important;
    }

    /* 3) 重建后的菜单列表（site.js normalizeCloneNav 产出） */
    #top-primary-nav-clone #main-nav-clone {
        display: block !important;
        margin: 0;
        padding: 56px 0 20px;
        width: 100% !important;
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    #top-primary-nav-clone #main-nav-clone > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-height: 0 !important;
        position: relative;
        /* 主题在 >699 给 `.menuzord-menu>li` 加了 padding:30px 0（桌面菜单的行高），
           抽屉里会把每个一级项撑成 111px、6 项就溢出面板（实测 768）。
           375 下本来就命中 ≤699 的 0 值，所以这里显式归零，两档一致。 */
        padding: 0 !important;
    }
    #top-primary-nav-clone #main-nav-clone > li > a {
        display: block !important;
        width: 100%;
        padding: 14px 20px !important;
        font-size: 17px !important;
        line-height: 1.3;
        white-space: normal !important;
        color: #fff;
        background: #333;
        border-bottom: 1px solid #444;
        border-radius: 0;
    }
    /* 一级项：右侧留出箭头按钮的位置（否则长文本会压到箭头上） */
    #top-primary-nav-clone #main-nav-clone > li > a {
        padding-right: 60px !important;
    }

    /* 折叠箭头：JS 注入的 <button class="clone-toggle">。
       用纯 CSS 折角箭头（border 拼 9px 方块转 45°），不依赖图标字体 —— 本站没加载
       那套字体，主题原来的 <span class="indicator"> 只会剩一条 1px 竖线。 */
    .clone-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 50px;
        border: 0;
        background: transparent;
        cursor: pointer;
        z-index: 2;
    }
    .clone-toggle::after {
        content: "";
        display: block;
        width: 9px;
        height: 9px;
        margin: 0 auto;
        border-right: 2px solid #ddd;
        border-bottom: 2px solid #ddd;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }
    .clone-toggle[aria-expanded="true"]::after {
        transform: rotate(-135deg);
    }
    @media (prefers-reduced-motion: reduce) {
        .clone-toggle::after {
            transition: none;
        }
    }
    /* 键盘焦点态：抽屉底色是深灰，默认 outline 在部分浏览器上不可见 */
    .clone-toggle:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -6px;
    }

    /* 二级菜单：默认收起，展开时按普通块级列表往下铺（不再浮动/绝对定位）。
       主题对 #top-primary-nav-clone ul.dropdown 还加了 1px 边框 + 大阴影 + 白底，
       这里一并清掉，避免抽屉里出现一块浅色浮层。 */
    #top-primary-nav-clone #main-nav-clone > li > ul.clone-dropdown {
        display: none;
        position: static;
        float: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        background: #3a3a3a;
        padding: 0;
        margin: 0;
        border: 0;
        box-shadow: none;
    }
    #top-primary-nav-clone #main-nav-clone > li.clone-open > ul.clone-dropdown {
        display: block !important;
    }
    #top-primary-nav-clone #main-nav-clone > li > ul.clone-dropdown > li {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #444;
    }
    #top-primary-nav-clone #main-nav-clone > li > ul.clone-dropdown > li > a {
        display: block;
        /* 主题给二级链接设了 float:left，会让 <li> 高度塌成 1px，
           最后一项溢出到下一行下面被盖住。这里必须归零。 */
        float: none !important;
        width: 100%;
        box-sizing: border-box;
        /* 左侧 34px 缩进 = 层级提示，比平铺时更深一档 */
        padding: 12px 20px 12px 34px !important;
        color: #d6d6d6;
        background: #3a3a3a;
        border-bottom: 0;
        font-size: 15px !important;
        line-height: 1.3;
        white-space: normal !important;
    }
    /* 主题的 hover 是浅灰底 + 25px 缩进跳动（深色抽屉上会闪一块白），改为略亮一档 */
    #top-primary-nav-clone #main-nav-clone > li > ul.clone-dropdown > li:hover > a,
    #top-primary-nav-clone #main-nav-clone > li > ul.clone-dropdown > li > a:focus-visible {
        color: #fff;
        background: #444;
        outline: none;
    }
    /* 主题给二级链接画了一个 4px 深色竖条 (:after)，深底上看不见还挡缩进，去掉 */
    #top-primary-nav-clone #main-nav-clone > li > ul.clone-dropdown > li > a::after {
        content: none;
    }

    /* 抽屉右上角关闭按钮。
       2026-11-R2 三处改动：
       ① 40×40 → 44×44（触控目标下限，QA 实测 40 不达标）；
       ② absolute → fixed：R2 把面板本身改成滚动容器（短视口下 6 项 + 附加区
          总共可达 650px，远超 375/500 的横屏高度），absolute 元素会跟着内容
          一起滚走 → 滚到一半就找不到关闭按钮；
       ③ `display:none`：**<1024 不再显示这颗 ×**。它与汉堡只相距 3px，
          同一角落两个关闭控件会让人分不清点哪个；汉堡本身已经改成 44×44 的 ×，
          同时承担打开/关闭（Esc、点外部 也都能关）。CSS 保留完整规则，
          将来若要恢复，删掉这一行 display 即可。 */
    #top-primary-nav-clone .clone-close {
        position: fixed;
        top: 0;
        right: 10px;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 32px;
        line-height: 1;
        cursor: pointer;
        z-index: calc(var(--z-drawer) + 1);
        display: none;
    }
}

/* =========================================================================
   2026-10-19（第三轮）社交悬浮栏回到右侧：

   前两轮把它从左挪到左（`left:0`），是因为当时右侧悬浮栏挤到了「Quick Inquiry」
   浮层。实测右侧才是主题原设计位置，也不会和头部/抽屉冲突（抽屉已收窄到
   62vw / 320px）。本轮把方向改回右，并且必须放在文件**最后** —— top.css 在本文件
   之后加载，同权重 !important 只能靠源码顺序取胜。
   ========================================================================= */
.suspension {
    right: 0 !important;
    left: auto !important;
    /* 头部下方定位：矮视口下不会再顶到头部盖住菜单/汉堡 */
    top: 170px !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}
.suspension-box {
    float: right !important;
}
/* 气泡（.d）挂在图标左侧，所以右移后要从 left:67px 镜像成 right:67px */
.suspension .d {
    left: auto !important;
    right: 67px !important;
}
@media (max-width: 767.98px) {
    /* 手机图标栏只有 36px 宽，气泡偏移同步收窄，避免气泡被挤出左边 */
    .suspension .d {
        right: 42px !important;
    }
}

/* =========================================================================
   2026-10-19（第四轮）修复「页面缩小后不可点击」：

   病因：.suspension 是 position:fixed + z-index:55，靠 inline 的 bottom:350px 定位。
   视口高度 ≤700 时，图标栏（实际约 396px 高）顶部会顶到头部，正好盖住汉堡按钮。
   实测 1080×700 下 elementFromPoint(汉堡中心) 返回 DIV.suspension，
   点汉堡没有任何反应 ⇒ 用户感知为「整页不可点击」。
   头部 .header-nav-wrapper 虽然是 z-index:1000，但 position:static，z-index 不生效，
   所以压不住 fixed 的社交栏。

   修法：
   1) 窄屏把社交栏从 bottom 定位改为「头部下方」top 定位，并允许在矮视口内滚动；
   2) 汉堡显式提层（position:relative + z-index），保证永远可点；
   3) site.js 补「点击抽屉外部关闭」。
   ========================================================================= */
@media (max-width: 699.98px) {
    .suspension {
        top: 170px !important;
        bottom: auto !important;
        height: auto !important;
        max-height: calc(100vh - 190px);
        overflow-y: auto;
    }
    #top-primary-nav .showhide {
        position: relative;
        z-index: 10001;
    }
}

/* ===== 页脚 WhatsApp 二维码：**保真显示后台存的那张图** =====
   ★渲染原则：后台存什么，这里就显示什么 —— 不改内容、不换 logo、不改编码参数。
   ★实现（2026-11-04 重定）：`scripts/qr-vectorize.mjs` 反解源图的 version/纠错级/掩码，
     再用**同一套参数**的规范矩阵重画成矢量（反解对不上就自动退回原 PNG，绝不出"看着像
     却扫不出"的图）。矢量码的画布是**正方形模块坐标系**：37×37 = 29 数据模块 + 四边各
     4 模块静区，模块边界全在整数坐标上。
     ★为什么必须是正方形：旧版直接沿用源图 404×364 的画布（四边静区 5.3/6.6/4.3/**3.6**
     模块，下边不足标准 4），而这里按方形盒子显示 ⇒ 横竖缩放比差 11%，模块被纵向拉长。
     改成方形画布后，任何容器宽度下都是等比缩放，模块恒为正方形。
   ★尺寸 222px 的来历：37 模块 × 6px，正好整数倍 —— 每个模块落在 6×6 CSS 像素上，
     与 svg 的 `shape-rendering:crispEdges` 配合可做到零抗锯齿；dpr=2 时每模块 12 物理像素，
     远高于手机解码所需的 3~4 像素。之前扫不出来是**容器只有 120px**（每模块 2.6px）
     + **CSS 又叠了一层 logo**（吃掉 15% 墨迹），两件事都已修掉。
   ★位图兜底路径同样按 222 显示：每模块 7.6 CSS px，仍远高于解码门槛。
   ★**不要加 image-rendering: pixelated**：矢量码加了会破坏 crispEdges 的整数对齐；
     位图路径加它会让缩小时的模块宽度忽 7px 忽 8px，把规则网格抽坏。
   ★不要设 offset / transform / filter：任何位移都会重新采样一次。 */
.qrcode .qr-link {
    position: relative;
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    overflow: visible;
}
.qr-holder {
    display: block;
    /* ★222 = 37 模块 × 6px（29 数据模块 + 四边各 4 静区，见 scripts/qr-vectorize.mjs）。
       矢量码按整数倍显示时，每个模块恰好落在 6×6 个 CSS 像素上，配合 svg 上的
       shape-rendering:crispEdges，模块边缘零抗锯齿 —— 既不糊也不出现 5/6px 混排。
       位图兜底路径同样按 222 显示（每模块 7.6 CSS px，仍远高于解码门槛 3~4px）。 */
    width: 222px;
    max-width: 100%;
    background: #fff;
    border-radius: 6px;
    /* ★静区已经在 SVG 画布内（四边各 4 模块白边），这里不再加 padding：
       额外白边不会提高可扫性，只会让卡片比码区大一圈、看起来"码没居中"。 */
    padding: 0;
    box-sizing: content-box;
    line-height: 0;
    /* ★白卡片恒为正方形（2026-11-04 二次修正）：
       卡片宽度固定 222、高度原本由图片撑开 —— 只要图片因为任何原因比容器窄，
       白底就会露出右侧一条（用户看到的"码贴在左边、右边一大片白"）。
       锁死 1:1 后，无论图片是矢量(37×37)还是位图兜底(404×364)，卡片都是正方形，
       图片用 object-fit:contain 居中留在里面，不会变形、也不会出现白条。 */
    aspect-ratio: 1 / 1;
}
/* ★★★不要删这条的高特异度选择器（2026-11-04 二次修正，真实踩过）：
   vendor 主题 style-main.css:267 有一条只在手机上生效的规则
       @media (max-width:768px){ .qrcode img{ max-width:75% } }
   它会把这个二维码压到容器的 75%（222 → 166.5px）。而 .qr-holder 是固定 222px 的
   白色卡片，于是移动端变成「166.5px 的码贴在 222px 白卡左边、右侧空 55.5px」，
   卡片也从正方形变成长方形 —— 这正是用户报的"二维码显示有问题"。
   vendor 文件不动（升级主题会被覆盖），这里用 (0,2,1) 压过它的 (0,1,1)，
   与加载顺序无关；同时显式声明 max-width:100% 作为语义兜底。 */
.qrcode .qr-holder img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    /* 位图兜底是 404×364，等比收进正方形卡片而不是被拉伸 */
    object-fit: contain;
    object-position: center;
}
/* 矢量码只出现在「图裂 / 没配图」的兜底路径上，与位图无关，尺寸与容器对齐即可 */
.qr-holder svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* 码点对齐到像素边界，细线不被抗锯齿糊掉 */
    shape-rendering: crispEdges;
}
/* WhatsApp 中心 logo：二维码正中的绿色圆标，白描边避免与码点粘连。
   ★**默认不叠加**，只有「运行时按号码现场生成」的 SVG 码才显示（data-qr-logo="on"）。
     原因：运营上传的成品图**自带** WhatsApp 圆标（源图中央就有那个绿圆），
     构建期兜底位图同样自带 —— 再叠一层 CSS 绿圆标等于在码区中心盖了个带白
     描边的圆，实测遮住墨迹 15%（≈11 个模块），而 version 3 码的纠错余量只有
     L 级 7% / M 级 15%，直接把它压到解不出来。
     ★不能只在「上传图」分支关掉：CRM 不可达时页面回落到构建期兜底位图，
       那个图也自带 logo —— 所以默认关、由 JS 明确开，才是唯一无分支漏洞的做法。 */
.qr-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #25D366;
    border-radius: 50%;
    display: none;                 /* 默认隐藏；仅 data-qr-logo="on" 时显示 */
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #fff;
    pointer-events: none;
}
/* 运行时生成的 SVG 码是纯码点、无中心 logo —— 这时才叠 WhatsApp 圆标 */
.qr-link[data-qr-logo="on"] .qr-logo { display: flex; }
.qr-logo svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* =========================================================================
   2026-11 响应式体系（四档断点，本文件**唯一**的窄屏依据）
   -------------------------------------------------------------------------
   ≥1200        顶栏一行（左联系人 / 右语言+CTA）；导航一行（logo 左 + 菜单右）
   1024–1199    顶栏**仍然一行**（紧凑：字号 13、内边距收窄）；导航一行但菜单收窄
   768–1023     顶栏一行（联系人 12px）；导航一行：logo 左 + 汉堡右；抽屉内可导航
   <768         顶栏只留 WhatsApp 图标 + CTA；导航：logo 左 + 汉堡右；
                语言切换移入抽屉（顶栏放不下），抽屉内有联系方式 / 语言 / CTA

   ★本任务涉及的临时断点（699 / 700 / 767 / 900 / 1099.98 / 1399 中与顶栏、
     导航、浮栏有关的部分）已合并进这四档，不要在这些选择器上再写一次性断点。
   ========================================================================= */

/* ---------- 0) 横向溢出安全网（兜底，不是主要手段） ----------
   ★2026-11-R2 更正一段错误注释（QA 指出）：这里原先写「实测 scrollWidth 已等于
   clientWidth」，读起来像"本来就没溢出"。事实相反 —— **本站一直有超宽内容**：
   页脚 SEO 隐藏块 `nav.crawlable-product-links`（1×1 + clip）里 8 个 nowrap 链接
   在 1024 下右缘能到 1214px。基线（`body{overflow-x:hidden}`）和这里的 clip 都把它
   裁掉了，所以 `scrollWidth === clientWidth` 在两版都成立 ⇒ **这个指标在本站
   不能作为"无溢出"的证据**。验收要量的是「可见元素的 max(right) vs clientWidth」。
   保留 clip 的真实理由：它是兜底，防止将来某个新内容块把整页顶出横向滚动条。
   用 clip 不用 hidden：overflow:hidden 会让元素成为滚动容器，顶栏的
   position:sticky / navbar-scrolltofixed 会失效；clip 不会。
   ⚠️ 副作用（R2 已处理）：html 一旦有 clip，computed overflow-y 会变成 scroll，
   于是 body 的 overflow 不再传播到视口 —— 滚动锁失效，见 §7c。 */
html, body { overflow-x: clip; }

/* ---------- 1) 顶栏：**一行、永不换行**（所有宽度） ----------
   根因：.header-top 用的是 vendor 栅格 `col-xl-auto`。bootstrap 的 `.row > *`
   在 <1200 时给每个直系子块 width:100%; max-width:100%（只有 col-xl-* 在
   ≥1200 才改回 auto）⇒ 左联系人、右语言+CTA 两列在 <1200 全部变成整行。
   实测症状：1080 顶栏高 105px（≥1200 是 49px），`.header-top-right` 的
   y 从 1px 掉到 54px、x 从 884 掉到 24（贴左）—— 就是用户截图里的
   「蓝色条被撑高、EN + GET A QUOTE 掉到第二行贴左」。
   修法：不再依赖 col-xl-*，直接给这一行 flex nowrap + 右侧 margin-left:auto。 */
.header-top .container > .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}
.header-top .container > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: 0 1 auto;
  min-width: 0;
  padding-inline: 0;
}
.header-top .header-top-left { text-align: start; }
.header-top .header-top-right {
  margin-left: auto;
  text-align: end;
  flex: 0 0 auto;
}
/* 主题在 max-width:1199.98px 给 .header-top 补了 padding-block:5px，
   ≥1200 却是 0 ⇒ 顶栏在 1200 处会硬跳 10px（49 → 59）。
   这里统一归零，让四档的顶栏高度一致（内容本身已经自带 10px 上下留白）。 */
header#header .header-top { padding-block: 0; }
/* 联系人列表本身也不许换行（换行会把整条顶栏撑高，等于回到两行） */
.header-top .header-top-left,
.header-top .header-top-left .contact-info,
header#header .header-top .contact-list { flex-wrap: nowrap; }
header#header .header-top .contact-list li { white-space: nowrap; }

/* ---------- 2) 导航行：一行、永不换行（所有宽度） ----------
   bootstrap `.row > *` 同样在 <576 把两列变成整行 ⇒ 320 下 logo 一行、
   汉堡一行（实测 .header-nav-col-row 高 98px）。 */
.header-nav-col-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.header-nav-col-row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: 0 1 auto;
  min-width: 0;
}
.header-nav-col-row > .ml-auto { margin-left: auto; }

/* ---------- 3) 汉堡按钮（<1024） ----------
   复用 menuzord 注入的 `.showhide`（三个 <em> 组成的三横线），不新增 DOM，
   只把它从 60×46 / float:right / 20px 外边距 改成 44×44 的规范触控目标。
   ★2026-11-R2：抽屉打开时它必须**仍然可见、仍在面板之上**，否则「再点一次关闭」
   这条路径物理上不存在（QA 实测 elementFromPoint 命中面板、Playwright 点击 30s 超时）。
   两个前提缺一不可：
     ① visibility 不能被隐藏 —— 旧规则 `body.menuzord-menu-open .showhide
        {visibility:hidden!important}` 已删除（见上方「抽屉关闭态用 .clone-close」处）；
     ② z-index 必须高于面板 —— .showhide 与 #top-primary-nav-clone 同在
        .header-nav-wrapper 这个层叠上下文里，所以只要 10001 > 10000 就能压住。
        必须写 position:relative 才让 z-index 生效（元素默认 static）。 */
#top-primary-nav .showhide {
  box-sizing: border-box;
  position: relative;
  z-index: var(--z-drawer-toggle);
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  cursor: pointer;
}
#top-primary-nav .showhide em {
  float: none;
  margin: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  position: static;
  top: auto;
}
#top-primary-nav .showhide:hover { border-color: var(--navy); }
#top-primary-nav .showhide:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 打开态：汉堡压在深色抽屉上，白框白底会变成一块亮斑 ⇒ 改成「透明底 + 白色三横线」。
   ★2026-11-R2 一并解决了两件事：
   ① 主题 style-main.css 在 ≤699.98 有
      `body.menuzord-menu-open .menuzord .showhide em:nth-child(1)/(3){position:absolute;
       top:15px;transform:rotate(±45deg)}` + `:nth-child(2){display:none}` ——
      只按 body 类选择器生效、不管 aria-expanded。它会把三横线扭成一个「＞」字形
      （实测 375 截图里那块怪符号）。这里用 ID 提权把 position/display/transform
      全部复位后再自己画 ×。
   ② 面板右上角那个 `.clone-close` 在 <1024 隐藏（见 §7）：它和汉堡只隔 3px，
      同一个角落摆两个关闭控件会让人分不清点哪个。汉堡本身就是 44×44 的 ×，
      既是打开也是关闭的唯一入口（Esc / 点外部 仍然可用）。 */
@media (max-width: 1023.98px) {
  body.menuzord-menu-open #top-primary-nav .showhide {
    background: transparent;
    border-color: transparent;
  }
  body.menuzord-menu-open #top-primary-nav .showhide em {
    background: #fff;
    position: static;
    top: auto;
    display: block;
    transform: none;
  }
  body.menuzord-menu-open #top-primary-nav .showhide em:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menuzord-menu-open #top-primary-nav .showhide em:nth-child(2) { opacity: 0; }
  body.menuzord-menu-open #top-primary-nav .showhide em:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- 4) 1024–1199：顶栏紧凑但**仍是一行** ----------
   实测 1024 下这一行内容总宽约 578px / 可用 976px，余量充足，
   所以 email **保留**（信息量优先）；只把字号/内边距/CTA 收一档，
   给 1200 前后的视觉留出渐变而不是硬跳。 */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  header#header .header-top .contact-list li { padding: 0 12px; }
  header#header .header-top .contact-list li + li::before { left: -13px !important; }
  header#header .header-top .contact-list a { font-size: 13px; }
  header#header .header-top .contact-list > li > img { width: 18px !important; height: 18px !important; }
  header#header .header-top .header-top-right { gap: 10px; }
  header#header .header-top .lang-toggle { padding: 6px 10px; font-size: 12px; }
  header#header .header-top .btn-theme-colored2.btn-sm { padding: 8px 14px; font-size: 12px; }
  /* 菜单跑道右侧 150px 留白在 1024~1199 会把菜单压到 logo 上
     （195 logo + 660 跑道 + 150 留白 + 48 容器内边距 = 1053 > 1024） */
  #top-primary-nav.menuzord { padding-right: 40px; }
}

/* ---------- 5) 768–1023：顶栏一行（联系人 12px） + logo/汉堡一行 ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  header#header .header-top .contact-list li { padding: 0 10px; }
  header#header .header-top .contact-list li + li::before { left: -11px !important; }
  header#header .header-top .contact-list a { font-size: 12px; }
  header#header .header-top .contact-list > li > img { width: 18px !important; height: 18px !important; }
  header#header .header-top .header-top-right { gap: 10px; }
  header#header .header-top .lang-toggle { padding: 6px 9px; font-size: 12px; }
  header#header .header-top .btn-theme-colored2.btn-sm { padding: 8px 12px; font-size: 11.5px; }
  .site-brand .site-brand-logo[width][height] { height: 40px; }
}

/* ---------- 6) <768：顶栏只留 WhatsApp 图标 + CTA ----------
   联系方式挪进抽屉（见 site.js mountDrawerExtras）+ 保留一个 44×44 的
   WhatsApp 图标直达。号码文字用 text-indent 藏视觉、**不**移出无障碍树，
   读屏仍然读得到，点图标等于点号码。 */
@media (max-width: 767.98px) {
  .header-top .container,
  .menuzord-container .container { padding-inline: 16px; }
  /* 576–767 顶栏驼峰：vendor style-main.css:1622 给
     `header#header .header-top .element{padding-block:10px}`，而它的归零规则
     只写在 ≤575.98 的媒体查询里 ⇒ 576~767 顶栏是 44+20=64px，比 375 的 44
     和 768 的 49 都高，形成一段"驼峰"。这里一并归零（只作用于 <768，
     ≥768 的 49px 是既有设计，不动）。 */
  header#header .header-top .element { padding-block: 0; }
  /* ★必须写成 li.contact-email：本文件第 416 行 `... .contact-list li{display:inline-flex}`
     是 (1,2,2)，光写 `.header-top .contact-email` 只有 (1,2,1)，压不住 —— 实测 320 下
     邮箱仍占 208px，整行被顶出 32px。 */
  header#header .header-top .contact-list li.contact-email { display: none; }
  header#header .header-top .contact-list li { padding: 0; }
  header#header .header-top .contact-list li + li::before { display: none !important; }
  header#header .header-top .contact-whatsapp {
    position: relative;
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
  }
  header#header .header-top .contact-whatsapp > img { width: 22px !important; height: 22px !important; }
  header#header .header-top .contact-whatsapp > a {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -999em;
  }
  header#header .header-top .header-top-right { gap: 8px; }
  header#header .header-top .btn-theme-colored2.btn-sm { padding: 10px 14px; font-size: 12px; }
  .site-brand .site-brand-logo[width][height] { height: 40px; }
  .site-brand { min-height: 44px; }
}

/* ---------- 7) 抽屉：整体单滚动容器（联系方式 / 语言 / CTA 一起滚） ----------
   由 site.js mountDrawerExtras() 注入到 #top-primary-nav-clone 末尾。

   ★2026-11-R2 重做布局。原来用 flex 列：`#main-nav-clone{flex:1 1 auto;min-height:0}`
   让菜单区吸收剩余高度、附加区钉在底部。高屏没问题，但**矮屏/横屏会塌**：
     375×500 可用高 500 → 附加区（2×44 联系方式 + 44 语言 + 44 CTA + 内边距 ≈ 225px）
     吃掉 45%，菜单区只剩 219px 而 6 项需要 306px。
     flex item 收缩只压缩**盒子**，内容仍按 overflow 溢出绘制，而 `.drawer-extra`
     DOM 更靠后、底色 `#2b2b2b` 不透明 ⇒ 实测 667×375 下 Products/News/About/FAQ/Contact
     五项被盖住，点 FAQ 命中的是附加区里的 span；面板本身 `scrollHeight==clientHeight`
     连滚都滚不动。这是"横屏用户点不到 Contact，想滚抽屉却在滚背景"的成因。
   修法：**面板整体当一个滚动容器**（`overflow-y:auto`），菜单列表回到普通文档流
   （`flex:none; overflow:visible`），附加区跟在后面一起滚 —— 物理上不可能再重叠，
   任何高度下都能滚到 Contact。代价是附加区不再"钉底"，但矮屏本来就没有"底"可言。
   配套：`.clone-close` 改成 position:fixed（见上文「抽屉右上角关闭按钮」），
   否则滚到一半就找不到关闭按钮。 */
@media (max-width: 1023.98px) {
  body.menuzord-menu-open #top-primary-nav-clone {
    display: block !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #top-primary-nav-clone #main-nav-clone {
    flex: none;
    min-height: 0;
    max-height: none;
    /* 面板已经统一滚，这里绝不能再开第二个滚动条（否则又出现"滚错了"的观感） */
    overflow: visible;
    /* 顶部 100px = 留给面板右上角的 × (y 0~44) 与仍可见的汉堡 (y 47~91)。
       原来 56px 时第一个导航项从 56 起，会被汉堡图标压住右端。 */
    padding: 100px 0 8px;
  }
  .drawer-extra {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px 20px;
    border-top: 1px solid #444;
    background: #2b2b2b;
  }
  .drawer-extra .drawer-contact { display: flex; flex-direction: column; }
  .drawer-extra .drawer-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: #d6d6d6;
    font-size: 13px;
    line-height: 1.3;
    /* 邮箱/号码**不许逐字符断行**：`overflow-wrap:anywhere` 允许在任意字符处断，
       实测 375 下把 coopad123@outlook.com 拆成 "coopad123@outlook.co" + "m"，
       很难看。改为只在 site.js 插入的 <wbr>（邮箱 @ 之后）处换行 ——
       两行分别是 "coopad123@" 和 "outlook.com"，语义完整。
       break-word 只作为兜底：只有当某一段本身比整行还宽时才会触发。
       （面板最窄 199px = 320 屏的 62vw，减内边距 40 + 图标 18 + gap 10 = 131px 可用；
        13px 下 "coopad123@" ≈ 70px、"outlook.com" ≈ 77px，两段都放得下。） */
    overflow-wrap: break-word;
    white-space: normal;
  }
  /* 号码/邮箱本身永远按 LTR 排：RTL 页（/ar/）里 +85262180466 会被 bidi
     重排成 "85262180466+"（"+" 是中性字符，跟在 RTL 段里就跳到数字右侧）。
     unicode-bidi:isolate 让它们独立成段，不影响周围的 RTL 文字。
     ★规则放在 §7 这个块外面（见下方「§7d 号码/邮箱的 bidi」），顶栏与抽屉共用一条，
     避免两份维护、也避免"抽屉修好了顶栏还错"这种漏域问题。 */
  .drawer-extra .drawer-contact a > span { direction: ltr; unicode-bidi: isolate; }
  .drawer-extra .drawer-contact a:hover,
  .drawer-extra .drawer-contact a:focus-visible { color: #fff; }
  .drawer-extra .drawer-contact img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
    opacity: .85;
  }
  /* 语言切换移入抽屉：抽屉是深底，语言面板改成流内展开（1023 宽下没有浮层空间） */
  .drawer-extra .lang-switcher { display: flex; flex-direction: column; align-items: stretch; }
  .drawer-extra .lang-toggle {
    justify-content: center;
    min-height: 44px;
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
  }
  .drawer-extra .lang-menu {
    position: static;
    min-width: 0;
    margin-top: 6px;
    background: #3a3a3a;
    border-color: rgba(255, 255, 255, .18);
  }
  .drawer-extra .lang-menu a { min-height: 44px; }
  .drawer-extra .drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--radius);
    background: #f0a23a;
    color: #1a3050;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .drawer-extra .drawer-cta:hover { background: #d88c25; color: #fff; }

  /* ---------- 7b) RTL：抽屉必须从**汉堡那一侧**滑出 ----------
     阿语页 `<html dir="rtl">` 时汉堡在左侧（实测 x=108），但面板写死了 `right:0`
     ⇒ 面板从右边出来、按钮在左边，方向相反。
     用物理属性翻转（面板永远贴屏幕边缘，不用 inset-inline，避免再被 dir 镜像一次）。 */
  html[dir="rtl"] body.menuzord-menu-open #top-primary-nav-clone,
  html[dir="rtl"] body #top-primary-nav-clone {
    right: auto;
    left: 0;
  }
  /* 同一侧翻转：× 跟到面板左上角，不然它留在屏幕右侧、跑出面板外面 */
  html[dir="rtl"] #top-primary-nav-clone .clone-close {
    right: auto;
    left: 10px;
  }

  /* ---------- 7c) 滚动锁 ----------
     ★2026-11-R2 修的是**根因**：本文件 §0 给 `html,body` 写了 `overflow-x:clip`。
     按 CSS Overflow 规范，一个轴为 clip、另一轴为 visible 时，visible 会计算成 auto
     ⇒ html 的 computed `overflow-y` 变成 scroll，根元素成为滚动容器；而 body 的
     overflow 只有在 html 为 visible 时才传播到视口 ⇒ `body{overflow:hidden}` 完全
     失去作用（实测 375 打开抽屉后 htmlOverflowY:scroll，滚轮/PageDown/Space 照滚
     0→901→1611→2321）。
     修法：把锁同时挂在 `<html>` 上（site.js 同步加 class 到 documentElement），
     这样根元素自己就是 overflow:hidden，视口真的锁住；关闭时摘掉 class，
     html 回到 clip，sticky / scrolltofixed 行为不变。
     滚动条补偿：html 一旦 hidden，Windows 上的经典滚动条会消失、页面横向跳 15~17px，
     用 --nav-lock-pad（site.js 打开瞬间测量并写入）补上同样的右侧内边距。 */
  html.site-nav-lock,
  body.site-nav-lock {
    overflow: hidden;
  }
  body.site-nav-lock {
    padding-right: var(--nav-lock-pad, 0px);
  }
}

/* ---------- 7d) 号码 / 邮箱的 bidi：顶栏与抽屉**共用一条规则** ----------
   症状（QA R2 条件项）：阿语站顶栏把 +85262180466 渲染成 85262180466+，
   「+」跑到数字右边。原因：`+` 是 bidi 中性字符，在 RTL 段落里会被摆到
   数字的右侧；而 .header-top 里的 <a> 是 unicode-bidi:normal、也没有 dir 属性。
   R2 上一版只给抽屉里的 <span dir="ltr"> 加了 isolate，于是出现
   "抽屉对了、顶栏还错"的漏域。
   修法：两个域用同一条选择器表，行为完全一致，不需要改任何 HTML 结构。
   作用域限定 `html[dir="rtl"]` —— LTR 页面本来就没这个问题，不必动。
   ⚠️ 抽屉里只命中 `a > span`（文字容器），**不能**命中 `<a>` 本身：
     `<a>` 是 flex 行容器，给它 direction:ltr 会把图标从右侧翻到左侧，
     与 RTL 语序相反。顶栏的 `<a>` 只含纯文字，可以直接命中。
   ★不加 !important：这里没有任何别的规则设置 direction / unicode-bidi。 */
html[dir="rtl"] .header-top .contact-list a,
html[dir="rtl"] .drawer-extra .drawer-contact a > span {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- 8) 右侧社交浮栏（.suspension）与内容的水平关系 ----------
   ≥1024：留位规则见上文「右侧固定社交栏占位」那段（1024~1330 统一 88px）。
   <1024：浮栏宽 70px，占掉 375 屏的 19%，并且整条压在正文上
   （实测 375 下把「Browse our catalogue — request a quote on any item」
   的句尾压掉）。手机/平板上没有空间给它，直接隐藏；
   联系方式同一份数据已经在抽屉里（WhatsApp / 邮箱 / CTA），能力不丢失。 */
@media (max-width: 1023.98px) {
  .suspension { display: none !important; }
}

/* ---------- 8b) RTL 首页 about 缩略图的 3px 贴边（2026-11-04） ----------
   阿语首页 `.tg-about .about-me .thumb` 的**视觉右缘**在 RTL 下就是 inline-start。
   bootstrap `.row` 的 -15px 负边距把该列推到容器内容盒外 15px（该列上的 `pr-0`
   又把本应抵消它的内边距去掉了），而 1024~1330 的 88px 让位是按"容器内容盒"算的
   ⇒ 实测 1024/1080/1200 缩略图右缘距 `.suspension` 左缘只剩 3px。
   LTR 页同结构的缩略图在左侧，不受影响（间隙 552~720px）。
   修法：只给 RTL 页该列补 16px inline-start 缩进，缩略图宽度随内容盒一起减小，
   间隙 3 → 19px，与 LTR 的 18px 视觉一致。**不改全局栅格**（不动 `.row` 负边距、
   不覆盖 `.pr-0`），作用域严格限定 `html[dir="rtl"]` + 1024~1330：
   LTR 页与 ≤1023（浮栏本来就隐藏）零影响。 */
@media (min-width: 1024px) and (max-width: 1330px) {
  html[dir="rtl"] .tg-about .about-me { padding-inline-start: 16px; }
}

/* ---------- 9) 筛选 chips 的宽度上限 ----------
   实测 320~414 下 chips 已正确换行（chips 本身 327px = 容器宽），
   这里只加一条上限，防止将来出现超长分类名把单行顶出视口。 */
.chips { max-width: 100%; }
.chip { max-width: 100%; }

/* =========================================================================
   10) 联系页（contact.html）视觉重排 —— 2026-11-05
   -------------------------------------------------------------------------
   症状：① 左右两列各占 50%，左列 4 段短文（约 5 行）对着右列 300 多 px 高的
        表单，左下角留出 400px 空白；② 表单没有容器边界，"NAME *"直接贴在
        页面上，字段与按钮的间距完全一样（30px），读不出"一组"关系；
        ③ 两行事实信息（Company Name / Operational Address）与上面两段
        正文同样式，四个段落没有层级差。
   改法（**不改任何文案与功能**，只加一个作用域类 `contact-section`）：
   - `.row` 改 CSS grid：桌面 0.92fr : 1.08fr（表单略宽，符合"左边说、右边填"
     的阅读顺序），<992 单列堆叠。复用的是同一批 `.col-sm-6`，不新增 DOM。
   - 正文段（第 1/2 段）按正文处理，首段作引导语（17.5px/500）；
     第 3/4 段是"事实条目"，做成带图标的细卡片 —— 视觉上与散文分开，
     文案仍是原来那一整句（**不要**为了拆"标签/值"去动 span：
     `data-i18n` 覆写的是整个元素的 textContent，拆了切语言就会被拍平）。
   - 表单加白卡（18px 圆角 + 1px 描边 + 柔和投影 + 顶部 4px 品牌色细条），
     字段 48px 高、10px 圆角，label 小字上移成"字段标签"，按钮 50px 实心。
   - 配色全部取自本文件已有 token（--navy / --slate-* / --line），只新增
     `--contact-ring` 一个焦点环色，避免引入第二套色系。
   ========================================================================= */
.contact-section {
  --contact-ring: rgba(74, 138, 200, .18);
  /* 图标用 data-uri mask（不引外部文件：两个 18px 图标不值得多两次请求）。
     mask 只吃 alpha 通道，stroke 的色值随意，这里统一写 %23000。 */
  --ico-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  padding-block: clamp(48px, 6vw, 80px);
  background:
    radial-gradient(880px 300px at 88% -10%, #e9f1fa 0%, rgba(233, 241, 250, 0) 62%),
    var(--paper);
}
/* 网格化：`.row` 默认是 flex + 负边距，换成 grid 后必须把负边距清掉，
   否则内容会比 `.container-site` 宽 30px。
   ★必须写成 `.container-site > .row`（只命中外层那一行）：表单内部还有一个
     bootstrap `.row` 装着三个字段，写成后代选择器 `.contact-section .row`
     会把**表单自己的行**也变成两列 72px 间距的 grid —— 实测 NAME/EMAIL 被并排
     挤到 145px 宽、PHONE 掉到第二行左侧，中间空一大块。 */
.contact-section > .container-site > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-inline: 0;
}
@media (min-width: 992px) {
  .contact-section > .container-site > .row {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}
/* 子列复位：`.col-sm-6` 在 ≥576 会写死 `flex:0 0 50%; max-width:50%`，
   grid 容器里 max-width 会把它再压到列宽的一半，必须显式清掉。 */
.contact-section > .container-site > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: 0;
}

/* ---------- 10a) 左列：引导语 + 事实条目 ---------- */
.contact-section .pro-content { max-width: 46ch; }
.contact-section .pro-content > p {
  margin: 0 0 16px;
  color: var(--slate-700);
  font-size: 15.5px;
  line-height: 1.78;
}
.contact-section .pro-content > p:first-child {
  margin-bottom: 18px;
  color: var(--slate-900);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.68;
  letter-spacing: -.003em;
}
.contact-section .pro-content > p:nth-child(2) { margin-bottom: 26px; }
/* 事实条目：细卡片 + inline-start 图标。图标用 mask，颜色随 currentColor，
   不引外部文件（本站静态资源按需加载，没必要为两个 20px 图标多一次请求）。 */
.contact-section .pro-content > p:nth-child(3),
.contact-section .pro-content > p:nth-child(4) {
  position: relative;
  margin: 0 0 10px;
  padding: 13px 16px;
  padding-inline-start: 46px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  color: var(--slate-900);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
}
.contact-section .pro-content > p:nth-child(3)::before,
.contact-section .pro-content > p:nth-child(4)::before {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-color: #4a8ac8;
  -webkit-mask: var(--ico-building) center / 18px 18px no-repeat;
  mask: var(--ico-building) center / 18px 18px no-repeat;
}
.contact-section .pro-content > p:nth-child(4)::before {
  -webkit-mask-image: var(--ico-pin);
  mask-image: var(--ico-pin);
}

/* ---------- 10b) 右列：表单卡片 ---------- */
.contact-section .contact-form-transparent {
  position: relative;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 48px -28px rgba(16, 24, 40, .3);
}
/* 顶部 4px 品牌色条：给白卡一个"这是操作区"的视觉锚点，不占用内容空间。
   用伪元素而不是 border-top，避免圆角处出现直角缺口。 */
.contact-section .contact-form-transparent::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--navy-700) 0%, #4a8ac8 58%, #d9a353 100%);
}
/* 表单内 bootstrap 栅格的 15px 边距与外层白卡内边距叠加，会把输入框再缩进 15px
   （卡片左右各 32+15=47px），肉眼上"输入框比按钮窄一圈"。这里清零。 */
.contact-section .contact-form-transparent .row { margin-inline: 0; }
.contact-section .contact-form-transparent .row > [class*="col-"] { padding-inline: 0; }
.contact-section .contact-form-transparent .form-group { margin-bottom: 18px; }
.contact-section .contact-form-transparent .tm-sc-button { margin: 4px 0 0; }
.contact-section .contact-form-transparent label {
  display: block;
  margin-bottom: 7px;
  color: var(--slate-500);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
}
/* 必填星号：原来是和标签同色同字号的一个 `<small>*</small>`，看起来像错字。 */
.contact-section .contact-form-transparent label small {
  margin-inline-start: 2px;
  color: #c0392b;
  font-size: 13px;
  font-weight: 700;
}
.contact-section .contact-form-transparent .form-control {
  height: 48px;
  padding: 0 14px;
  background: #fbfcfe;
  border: 1px solid #dfe5ec;
  border-radius: 10px;
  box-shadow: none;
  color: var(--slate-900);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.contact-section .contact-form-transparent textarea.form-control {
  height: auto;
  min-height: 138px;
  padding: 12px 14px;
  line-height: 1.65;
  resize: vertical;
}
.contact-section .contact-form-transparent .form-control:focus {
  background: var(--white);
  border-color: #4a8ac8;
  box-shadow: 0 0 0 3px var(--contact-ring);
  outline: 0;
}
.contact-section .contact-form-transparent .form-control::placeholder {
  color: #8a94a0;
  opacity: 1;
}
/* 提交按钮：原来直接用主题的 `.btn-theme-colored1`（亮蓝 #4a8ac8），与页头
   "Get a Quote" 的橙、导航的深navy 三色打架。统一到深 navy，跟首页主 CTA 同源。 */
.contact-section .contact-form-transparent .btn {
  width: 100%;
  height: 50px;
  padding: 0 18px;
  background: var(--navy);
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 12px 24px -14px rgba(31, 58, 77, .9);
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.contact-section .contact-form-transparent .btn:hover,
.contact-section .contact-form-transparent .btn:focus {
  background: var(--navy-700);
  color: #fff;
  box-shadow: 0 16px 28px -14px rgba(31, 58, 77, .95);
  transform: translateY(-1px);
}
.contact-section .contact-form-transparent .btn:active { transform: translateY(0); }
.contact-section .contact-form-transparent .btn:disabled,
.contact-section .contact-form-transparent .btn[disabled] {
  opacity: .6;
  transform: none;
  cursor: not-allowed;
}

/* ---------- 10c) 窄屏 ---------- */
/* <992 变成单列后，两列都会铺满容器：正文一行 800+px（超过 45 字/行的可读上限），
   表单卡也被拉到 852px，"NAME / Your Name" 这种一对标签+输入框横跨整屏。
   这里只给**上限**，不改变单列堆叠：正文 62ch、表单卡 640px（手机上两者都够不着上限，
   等于不生效）。 */
@media (max-width: 991.98px) {
  .contact-section .pro-content { max-width: 62ch; }
  .contact-section .contact-form-transparent { max-width: 640px; }
}
@media (max-width: 575.98px) {
  .contact-section { padding-block: 40px; }
  .contact-section .row { gap: 24px; }
  .contact-section .pro-content > p:first-child { font-size: 16.5px; }
  .contact-section .contact-form-transparent { border-radius: 14px; }
  .contact-section .contact-form-transparent::before { border-radius: 14px 14px 0 0; }
}
/* 阿语：阿拉伯字母基线高、连写多，1.78 倍行高在长句上偏挤。 */
html[dir="rtl"] .contact-section .pro-content > p { line-height: 1.95; }
html[dir="rtl"] .contact-section .contact-form-transparent label {
  letter-spacing: 0;
  text-transform: none;
  font-size: 12.5px;
}
/* 中文：全大写 + .09em 字距是给拉丁字母设计的；CJK 没有大小写，
   字距只会把"姓名/邮箱"两个字的标签摊得太开、11.5px 又偏小。 */
html:lang(zh) .contact-section .contact-form-transparent label {
  letter-spacing: .04em;
  text-transform: none;
  font-size: 12.5px;
}

/* =========================================================================
   11) 全站页脚视觉重排 —— 2026-11-05
   -------------------------------------------------------------------------
   页脚是构建期 partial（`_partials/footer-widgets.html`）烘进 334 个页面的，
   改一次 HTML 要重跑构建、diff 会铺满整仓。所以这一轮**只动 CSS**，
   用 grid 接管主题那套 bootstrap 栅格，6 个语言版一次性生效。
   原症状：
   ① 断点断层：`col-xl-*` 断在 1200，1080 下退化成 整行(联系方式)+
      半行(分类)+半行(快捷)+整行(二维码) —— 联系方式的简介被拉到 960px 宽
      （一行 60+ 字，读不动），二维码独占一整行、右侧空 700px；
   ② 层级：标题 17.6px 纯白、链接 16px 也是纯白、行高 40px，
      标题和链接几乎同等重要，"Product Categories" 更像一句正文；
   ③ 联系方式三行被 `.opening-hours.border-dark li` 的 `border-bottom:#4a8ac8`
      划了三条通栏蓝线（列宽 390，文字只有 200），视觉噪音；
   ④ 二维码白卡与深底之间没有分离，读起来像"贴上去的一张白纸"。
   改法：
   - `.row` → grid（桌面 4 列 / 768–1199 2×2 / <768 单列），
     断点从 1200 挪到 768/1200，但**不再出现"整行+半行"的混合态**；
     二维码列固定 222px（= .qr-holder 的尺寸，**不要改小**，
     见文件上方 §二维码尺寸那段：低于 222 会压穿手机解码门槛）。
   - 标题 12px/字距 .16em/半透明白，后面跟 26px 品牌色短线；
     链接 14.5px/半透明白，行高收到 33px 左右，hover 白字 + 下划线。
   - 三条蓝线删掉，改成行首 16px 线性图标（pin / 电话 / 邮件），
     标签色更淡、值更亮，形成"标签-值"两级。
   - 页脚底色：`data-tm-bg-color` 会被主题 JS 以 **inline !important**
     写成 `#1d1d23`（custom.js TM_customDataAttributes），样式表压不过
     inline !important；但 JS 只写 background-color，不写 background-image，
     所以这里用 gradient 覆盖（渐变随 background-image 绘制在底色之上）。
   ========================================================================= */
.footer {
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.2a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 1.1 3.2 2 2 0 0 1 3.1 1h2.2a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L6.4 8.5a16 16 0 0 0 6 6l1.1-1.1a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.8 2.3Z'/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2.5 6.5 8.4 6a2 2 0 0 0 2.2 0l8.4-6'/%3E%3C/svg%3E");
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background-color: #0d1a24;
  background-image:
    radial-gradient(760px 320px at 10% -18%, rgba(74, 138, 200, .22), rgba(74, 138, 200, 0) 68%),
    linear-gradient(180deg, #12202c 0%, #0b1620 100%);
  color: rgba(255, 255, 255, .68);
}
/* 主题的 pt-120 / pb-60 是 bootstrap 工具类（带 !important），必须同等对待。 */
.footer .footer-widget-area > .container {
  padding-top: clamp(44px, 5.6vw, 76px) !important;
  padding-bottom: clamp(32px, 4vw, 52px) !important;
}
.footer .footer-widget-area > .container > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "contact" "cats" "quick" "qr";
  gap: 34px;
  margin-inline: 0;
}
@media (min-width: 768px) {
  .footer .footer-widget-area > .container > .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "contact qr"
      "cats    quick";
    gap: 40px 36px;
  }
}
@media (min-width: 1200px) {
  .footer .footer-widget-area > .container > .row {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .8fr) 222px;
    grid-template-areas: "contact cats quick qr";
    gap: 44px 40px;
  }
}
.footer .footer-widget-area > .container > .row > :nth-child(1) { grid-area: contact; }
.footer .footer-widget-area > .container > .row > :nth-child(2) { grid-area: cats; }
.footer .footer-widget-area > .container > .row > :nth-child(3) { grid-area: quick; }
.footer .footer-widget-area > .container > .row > :nth-child(4) { grid-area: qr; }
.footer .footer-widget-area > .container > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: 0;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .footer .footer-widget-area > .container > .row > :nth-child(4) { justify-self: end; }
}

/* ---------- 11a) 标题：小字 + 字距 + 品牌色短线 ---------- */
/* `.text-white` 是 bootstrap 工具类（!important），标题色只能同样带 !important。 */
.footer .widget-title {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  color: rgba(255, 255, 255, .62) !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.5;
}
/* 短线放到标题**下方**而不是右侧：1440 下分类列只有 ~204px，
   "PRODUCT CATEGORIES"（11.5px + .16em 字距）已经 160px，右侧再挂 26px 短线
   就顶到下一列标题上了（实测两者只剩 4px 间隙）。下方独立一行不受列宽影响，
   且 4 个分区的标题基线仍然对齐。 */
.footer .widget-title::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 10px;
  /* 用逻辑外边距钉死方向：LTR 靠左、RTL 靠右。只写 display:block 不够 ——
     阿语页实测这条 2px 短线会跑到列的最左边（与右侧的标题文字分家）。 */
  margin-inline-start: 0;
  margin-inline-end: auto;
  border-radius: 2px;
  background: #4a8ac8;
}

/* ---------- 11b) 简介 ---------- */
.footer .widget_links .description {
  max-width: 38ch;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  line-height: 1.72;
}

/* ---------- 11c) 联系方式：删通栏蓝线，改行首图标 ---------- */
.footer .opening-hours li,
.footer .widget .opening-hours li {
  padding: 0;
  border: 0;
}
.footer .opening-hours li *,
.footer .widget .opening-hours li * { line-height: 1.55; }
/* 主题给 `.opening-hours li span` 写了 float:left（为了做左右对齐的值），
   本站的联系方式是一行一句，float 会让冒号后的值贴不住标签。 */
.footer .opening-hours li span { float: none; }
.footer .opening-hours p {
  position: relative;
  margin: 0;
  padding: 5px 0;
  padding-inline-start: 26px;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.footer .opening-hours p > span:first-child { color: rgba(255, 255, 255, .46); }
.footer .opening-hours p::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: rgba(122, 178, 232, .95);
  -webkit-mask: var(--ico-pin) center / 16px 16px no-repeat;
  mask: var(--ico-pin) center / 16px 16px no-repeat;
}
.footer .opening-hours > ul > li:nth-child(2) p::before {
  -webkit-mask-image: var(--ico-tel);
  mask-image: var(--ico-tel);
}
.footer .opening-hours > ul > li:nth-child(3) p::before {
  -webkit-mask-image: var(--ico-mail);
  mask-image: var(--ico-mail);
}
.footer .opening-hours a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: border-color .16s ease, color .16s ease;
}
.footer .opening-hours a:hover {
  color: #fff;
  border-bottom-color: #4a8ac8;
}

/* ---------- 11d) 链接列表 ---------- */
/* 主题给 `.widget` 写了 `margin-bottom:45px`，四列都带 ⇒ 每列底部多出 45px 空白，
   并且把 grid 行高从 187px 撑到 232px（实测 1080）。页脚的分区靠 gap 分隔，
   这个外边距只会制造空洞。 */
.footer .widget { margin-bottom: 0; }
.footer .widget_nav_menu ul { display: grid; gap: 1px; }
/* `li` 上有一条 `line-height:40px`（来自主题的行高预设），`a` 是 inline-block、
   高度 33px，却因为父级 40px 的行盒被撑到 40px/条（4 条多出 28px，8 条就是 56px）。
   链接的节奏由 `a` 的 padding 决定，这里把 `li` 的行高还成正常值。 */
.footer .widget_nav_menu ul > li { line-height: 1.45; }
.footer .widget_nav_menu ul li a {
  display: inline-block;
  padding: 6px 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14.5px;
  line-height: 1.45;
  transition: color .16s ease;
}
.footer .widget_nav_menu ul li a:hover,
.footer .widget_nav_menu ul li.current-menu-item > a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(122, 178, 232, .8);
}

/* ---------- 11e) 二维码 ---------- */
/* ★`.qr-holder` 的 222×222 与 `aspect-ratio:1` 是"能不能扫出来"的硬约束
   （见本文件 §二维码尺寸），这里只加外阴影把它从深底上"托起来"，不动尺寸。 */
.footer .qrcode {
  margin: 0;
  text-align: start;
  line-height: 0;
}
.footer .qrcode .qr-link { display: inline-block; }
.footer .qr-holder {
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
}
/* 手机：把"标题 + 二维码"从上下堆叠改成一行 —— 原来整行只有 222px 有内容，
   右侧 130px 全空，页脚因此无谓地长了 260px。 */
@media (max-width: 767.98px) {
  .footer .footer-widget-area > .container > .row > :nth-child(4) .widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* 手机屏上"标题在上一行、二维码孤零零占满下一行"是最空的做法（原来整行只有
       222px 有内容、右侧 130px 全空）。改成一张半透明卡片把两者装在一起：
       标题成为码的图注，卡片本身也把这块区域从"留白"变成"分区"。 */
    padding: 16px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
  }
  .footer .footer-widget-area > .container > .row > :nth-child(4) .widget-title { margin: 0; }
  .footer .footer-widget-area > .container > .row > :nth-child(4) .description {
    margin: 0;
    max-width: none;
  }
}

/* ---------- 11e-2) 1024~1330 给右侧社交浮栏让位 ----------
   浮栏 `.suspension` 是 position:fixed、贴右边缘、宽 70px。正文区已有 88px 右侧
   内边距（见本文件「右侧固定社交栏占位」那段），但**页脚不在 `.main-content-area`
   里**，一条都没吃到：
   实测二维码右缘 / 浮栏左缘 = 1200:1170/1130（压 40px）、1240:1190/1170（20px）、
   1280:1210/1210（0px）—— 也就是说 1200~1279 这一段用户看到的二维码右下角
   是被浮栏盖住的。补上与正文同一条 88px。 */
@media (min-width: 1024px) and (max-width: 1330px) {
  .footer .footer-widget-area > .container { padding-right: 88px; }
}

/* ---------- 11f) 底栏 ---------- */.footer .footer-bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .46);
}
.footer .footer-bottom > .container > .row {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.footer .footer-paragraph {
  color: rgba(255, 255, 255, .46);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .005em;
}
/* 原文是 "...Co., Ltd.<a>Privacy Policy</a>"，标签与公司名之间一个空格都没有，
   渲染成 "Ltd.Privacy Policy"（手机上尤其像串行）。用逻辑外边距补断句。 */
.footer .footer-paragraph a {
  margin-inline: 4px;
  color: rgba(255, 255, 255, .72);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .28);
  text-underline-offset: 3px;
  transition: color .16s ease, text-decoration-color .16s ease;
}
.footer .footer-paragraph a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .7);
}

/* ---------- 11g) 阿语（RTL）两处修正 ----------
   ① 对齐：主题在页脚把 `text-align` 写死成 `left`（computed 实测 h4 / ul / li / a / p
      全是 left），LTR 看不出问题；RTL 下标题和链接列表贴左、简介贴右，
      同一列里两种对齐。统统改成 `start`（LTR=左 / RTL=右），LTR 页零变化。
   ② bidi：`WhatsApp: +85262180466` 在 RTL 段落里渲染成 `85262180466+`
      （`+` 是中性字符，被摆到 LTR 号码的末尾）；`Email: coopad…` 的冒号也跑到
      邮箱末尾变成 `coopad123@outlook.com.`。与 §7d 顶栏同因同解：
      给值本身 `direction:ltr + unicode-bidi:isolate`，让号码/邮箱成为一段
      独立的 LTR 文本，标点留在标签那一侧。地址（含逗号的短地名）同样隔离。 */
.footer .widget-title,
.footer .widget_nav_menu ul > li,
.footer .opening-hours p,
.footer .widget_links .description { text-align: start; }
html[dir="rtl"] .footer .opening-hours p > a,
html[dir="rtl"] .footer .opening-hours p > span[data-contact-text] {
  direction: ltr;
  unicode-bidi: isolate;
}