@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
/* 参考 shopb2bfly.fecshop.cn（Fecify B2B 演示站）的视觉体系：
   白底 + 深蓝灰墨色 + 橙色强调 + 深色 footer；大图 hero 居中排版。 */
/* 内容容器：与竞品 shopb2bfly 一致，固定 1400px 居中（1920 视口下内容区正好 1400px、
   4 列卡片各 335px —— 竞品实测值）。这里用 % 而不是 vw：padding/margin 的百分比按
   「包含块宽度」解析，天然排除滚动条，能精确得到 1400 而不是 1385。视口 ≤1400 时
   退化为 24px 安全边距，移动端也正好是合适的边距。 */
:root{--ink:#1c2733;--muted:#6f7a85;--paper:#ffffff;--accent:#f26b1d;--accent-dark:#d95c14;--line:#e7e8ea;--footer-bg:#1e2b38;--serif:Georgia,'Times New Roman',serif;--gutter:max(24px,calc((100% - 1400px)/2))}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
a{color:inherit;text-decoration:none}
/* ★ 顶栏横向溢出（业主点名「英语不对齐 / 德语也坏了」的真身）—— 根因与修法：
   原规则是 `display:flex + justify-content:space-between`，但**没有 `flex-wrap`**，
   5 个子项（.brand / nav / 顶栏搜索 / 语言切换 / 货币切换）被强排在同一行；
   当 5 项自然宽度之和 > 容器宽（视口 ≲1400px 时必然）时，flex 不能折行 ⇒
     ① 各子项被压缩、导航项在**词内折行**（"CONNECTORS & CABLES" 断成两行）→ 导航参差；
     ② 整体横向溢出 ⇒ `documentElement.scrollWidth > innerWidth`，整页可左右拖动。
   修法（不用任何「藏溢出」的假修复）：
     · 允许折行（flex-wrap）+ 子项内不折行（brand 站名、nav 菜单项）。
     · 一行放不下时折成**两行**：第 1 行 brand + 控件，第 2 行 nav 独占整行（见下方 701–1439 规则）。
     · 顶栏高度保持 72px（min-height + align-content:center，两行也垂直居中，不跳高）。
   ★ 绝不使用 `overflow-x:hidden`：那只是把「整页可横向拖动」换成「右侧内容被直接裁掉」，
     溢出还在，只是看不见了。 */
.site-header{min-height:72px;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:space-between;row-gap:6px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:60}
/* ★ 件① 顶栏：品牌与导航之间必须有**确定**的水平间距。
   根因（线上实测 "Xuanan TradingHOME" 中间零间距）：`.brand` 没有右外边距，而
   `@media(min-width:1024px)` 里 `nav{flex:1 1 auto;justify-content:flex-start}` ⇒ nav 撑满剩余空间、
   其首项从 nav 左边缘（= 品牌右边缘）起排，于是紧贴品牌。
   修法：只给 `.brand` 加右外边距（32px）——
     · 比给 `.site-header` 加 column-gap 更**外科**：容器 gap 会在 4 组相邻项（品牌|导航|搜索|语言|货币）
       各加一份，合计最多 +128px，白白抬高溢出风险；品牌外边距只加 1 份，直接把 nav 右推 32px。
     · flex 项外边距**不折叠**，故 ≥1024px 时 品牌右缘→导航首项左缘 恒为 32px（要求 ≥24px）。
   目标：任意语言 / 任意宽度下两者间距 ≥24px 且**绝不重叠**。 */
.brand{font-weight:800;letter-spacing:-.03em;font-size:21px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;margin-right:32px}
.brand::before{content:'';width:12px;height:12px;background:var(--accent);border-radius:3px;display:inline-block}
.site-header nav{display:flex;gap:28px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;align-items:center;white-space:nowrap}
.site-header nav a:hover{color:var(--accent)}
/* 当前页导航项：由 layout/theme.liquid 输出 aria-current="page" */
.site-header nav a[aria-current="page"]{color:var(--accent)}
/* ── 顶栏响应式（细节A 修复「英文下 Account 掉到第二行」）─────────────────────────────
   旧逻辑两处问题：
     ① 701–1439px 无条件把 nav 折到第 2 行（flex:0 0 100%）——即便整行排得下也折，
        1366/1280 上顶栏永远是「两行」；
     ② ≥1440px 允许整行 flex-wrap：英文/德文/法文/俄文等每项更长，brand + nav + 搜索 +
        语言 + 货币 + 账号的自然宽度之和 > 内容区（最宽 1400px）时，**排在最后的账号被单独
        挤到第二行** —— 这正是业主截图「Account 掉到第二行」的真身。
   新逻辑（一行优先 + 绝不孤立换行 + 不隐藏任何功能项）：
     · ≤700px 走既有移动端 `display:block`（不变）。
     · 701–1023px 沿用「两行」：brand + 控件占第 1 行，nav 独占第 2 行（窄屏最稳）。
     · ≥1024px **一律单行**（`flex-wrap:nowrap`）：整行永不换行 ⇒ 账号**永远**留在第一行。
       空间不够时不藏功能项，而是让 **nav 自己收缩 / 按项折行**吸收（nav：flex:1 1 auto +
       min-width:0 + 自身 flex-wrap）：标准菜单下 nav 仍是整齐一行；菜单很长时导航按项折行，
       也远好过「账号被挤下去」或「横向溢出」。控件组与账号 `flex:0 0 auto`，稳稳留在右端。
   ★ 绝不使用 overflow-x:hidden（那只是把溢出藏起来，问题还在）。 */
@media (min-width:701px) and (max-width:1023px){
  /* ★ 件①：701–1023 两行布局里 nav 独占整行（flex:0 0 100%）⇒ 本行内也让它居中（原先左贴）。 */
  .site-header>nav{order:2;flex:0 0 100%;gap:12px;font-size:11px;letter-spacing:.05em;flex-wrap:wrap;row-gap:4px;justify-content:center}
  .site-header .site-search--header{margin-left:auto}
}
/* ≥1024px：单行优先。nav 弹性吸收、控件与账号固定，整行容器永不换行（账号绝不掉行）。
   ★ 件① 导航居中（2026-09-21）：菜单组在「品牌」与「右侧控件组」之间**水平居中**。
     根因：nav 被 flex:1 1 auto 撑满、justify-content 却是 flex-start ⇒ 菜单**左贴品牌**；
       英文菜单长所以看不出，中日文菜单短 ⇒ 右侧与搜索图标之间留一大块空白（业主点名）。
     修法：nav `justify-content:center`（菜单在 nav 内容盒内居中）+ nav 右外边距 **20px**。
     为什么是 20 而不是随便给：**让左右留白相等** ——
       左留白 = `.brand{margin-right:32px}` = 32px；
       右留白 = nav 右外边距 + 首个控件自带左外边距（`.site-search--header` / `.lang-switch` 均 12px）；
       32 − 12 = **20** ⇒ 左留白 = 右留白 = 32px ⇒ 菜单中心 = (品牌右缘 + 控件组左缘)/2，
       正是判据里「nav 盒子 = [brand.right, 控件组.left]」的中心（实测中心差 0）。
   ★★ 件④ 英文菜单折行（2026-09-22，业主「英文又换行了」）：**先量后改**的实测数字（隔离实例、
     7 项英文菜单、搜索/语言/货币/账号全开，CDP 真浏览器）：
     · 菜单最小单行宽度 = Σ子项宽 + (n-1)×gap：**734px**（font 12px / gap 14px / ls .05em）；
     · nav 可用宽度随视口线性变化：avail(w) = w − 765（1024→259、1200→435、1366→601、1440→675）；
     · 结论：**1024–1420px 物理放不下**（哪怕字号压到 11px 下限、gap 压到 8px，仍需 avail≥644，
       即视口 ≥1409）。因此采取分级策略：
       ① 1024–1439：font 12→**11px**（下限）、gap 14→**8px**、ls .05→.04em，尽量推迟折行；
       ② ≥1440：gap 8→**10px**（avail=675 ≥ 实测 en 656 / de 640 / ja 545 / zh 372 ⇒ 单行）；
       ③ 放不下的语言/宽度（如俄语长词菜单在 ≤1439、en 在 ≤1419）**允许按项折行**，但
          `justify-content:center` 保证**每一行都居中**（实测各行中心差恒 0）；
     · 不变量（改前 20 组实测 + 改后 20 组复测均满足）：整行 flex-wrap:nowrap ⇒ 账号**恒在首行**、
       **零横向溢出**、品牌↔首项 ≥32px（≥24 红线）。
     · ★ 绝不使用 overflow-x:hidden（那只是把溢出藏起来，问题还在）。
     · 取舍说明：若业主要求 1024–1439 也绝不折行，需再让出约 130px（隐藏 LANGUAGE/CURRENCY
       文字标签）或精简菜单项 —— 这是产品决策，不是 CSS 能无中生有的，待业主裁决。 */
@media (min-width:1024px){
  .site-header{flex-wrap:nowrap}
  .site-header>nav{order:0;flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:center;gap:8px;font-size:11px;letter-spacing:.04em;row-gap:2px;margin-right:20px}
  .brand{flex:0 0 auto}
  .site-header .site-search--header{margin-left:12px;flex:0 0 auto}
  .site-header .lang-switch{margin-left:12px;flex:0 0 auto}
}
@media (min-width:1440px){
  .site-header>nav{gap:10px}
}
.hero{padding:9vw var(--gutter);min-height:560px;position:relative;background:linear-gradient(115deg,#f6f7f9 0%,#f6f7f9 60%,#e9edf2 100%)}
.eyebrow{font:500 11px 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.hero h1,.page-intro h1{font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.03em;margin:26px 0;font-weight:800}
.hero h1 em,.page-intro h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.hero-copy{max-width:460px;color:var(--muted);line-height:1.75;font-size:15px}
.button{display:inline-flex;align-items:center;gap:12px;padding:15px 30px;margin-top:25px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;cursor:pointer;border:0;border-radius:4px;transition:background .2s,color .2s}
.button span{font-size:16px;line-height:0}
.button-dark{background:var(--ink);color:#fff}
.button-dark:hover{background:#0e1620}
.button-light{background:#fff;color:var(--ink)}
.button-accent{background:var(--accent);color:#fff}
.button-accent:hover{background:var(--accent-dark)}
/* 描边按钮：详情页「Ask for samples」用；.button 自带 margin-top:25px，在 flex 行里必须归零 */
.button-light-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.button-light-outline:hover{background:var(--ink);color:#fff}
/* 大图 hero（严格对标参考站：通栏背景图 + 深色遮罩 + 居中白色标题，高度 800px） */
.hero-banner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:800px;padding:90px var(--gutter);background-size:cover;background-position:center;position:relative;color:#fff}
.hero-banner::after{content:'';position:absolute;inset:0;background:rgba(16,24,34,var(--hero-overlay,.55))}
.hero-banner>*{position:relative;z-index:1}
.hero-banner .eyebrow{color:#ffb98a}
.hero-banner h1{color:#fff;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(28px,3vw,46px);margin:22px 0 14px;max-width:900px}
.hero-banner h1 em{font-style:normal}
.hero-banner .hero-copy{color:#e5e9ee;max-width:640px;margin:0 auto}
.hero-stat{position:absolute;right:var(--gutter);bottom:6vw;display:flex;align-items:center;gap:14px}
.hero-banner .hero-stat{position:relative;right:auto;bottom:auto;margin-top:38px}
.hero-stat strong{font-size:52px;letter-spacing:-.04em}
.hero-stat span{font:11px 'DM Mono',monospace;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.hero-banner .hero-stat span{color:#c8d0d9}
.section{padding:72px var(--gutter)}
.section-products{background:#fff}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px}
.section-heading h2,.cta-section h2{font-size:clamp(28px,2.6vw,38px);line-height:1.06;letter-spacing:-.03em;margin:18px 0 0;font-weight:800}
.text-link{font:12px 'DM Mono',monospace;text-transform:uppercase;border-bottom:1px solid;padding-bottom:7px}
.text-link span{font-size:16px}
/* 商品网格：桌面 4 列起步。
   之前固定 2 列 → 1920 视口下单卡宽 785px、图片 581px 高，用户反馈「图片搞这么大」「布局太分散」。
   密排小卡才是 B2B 目录该有的密度（对标 shopb2bfly 首页）。 */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}
@media(max-width:1500px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.product-grid{grid-template-columns:1fr;gap:30px}}
/* 空结果提示在网格里必须跨满整行，否则会被当成一个单元格挤在左上角 */
.product-grid .empty-state{grid-column:1/-1}
.product-grid-large{padding:0 var(--gutter) 72px}
.product-card{display:block}
/* 卡片图统一 1:1 方图：与详情页主图、竞品目录一致，避免同一批商品忽高忽低 */
.card-image{aspect-ratio:1;background-size:cover;background-position:center;position:relative;background-color:#eceef1;transition:transform .35s}
.product-card:hover .card-image{transform:translateY(-5px)}
.card-arrow{position:absolute;right:15px;top:15px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:18px;opacity:0;transition:opacity .2s}
.product-card:hover .card-arrow{opacity:1}
/* 无图占位：以前这里复用 .card-arrow，但箭头改成就绪才显示后会变成「什么都看不见」 */
.card-noimg{position:absolute;inset:0;display:grid;place-items:center;color:#98a1ab;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
/* 卡片文案：严格对标参考站商品卡（方图 → 标题两行）。
   参考站图下只有标题 + 价格；我们是 B2B 不放价格，因此图下只保留标题。
   原先这里还有一行 10px 等宽大写的 `SKU-xxx / INQUIRY ONLY` 和一段 12.5px 灰色摘要，
   用户反馈「下面为什么还有小字，排版很难看」，已整体移除（见 templates/*.liquid）。 */
.product-card h3{font-size:16px;line-height:1.5;letter-spacing:-.01em;margin:10px 0 0;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ============================================================================
   Q7 展示类增强（插件 product-display）—— 基座样式骨架，**类名前缀统一、可被主题覆盖**
   ★ 5 套主题的 assets/theme.css 是「风格身份」，**刻意不动**；主题可用下面这些
     `--pd-*` 变量在自己的 :root 里覆写颜色/圆角，无需重写规则。
   ★ 全部规则「默认关 ⇒ 零输出」：模板在子开关关闭时不产出任何元素，所以这些类
     在未开启时**不会命中任何节点**（不影响既有版式）。
   ============================================================================ */
/* ① 商品角标：绝对定位在图右上角（.card-image 已 position:relative + overflow:hidden） */
.product-badge{position:absolute;z-index:2;top:10px;left:10px;display:inline-block;max-width:calc(100% - 20px);padding:4px 9px;border-radius:var(--pd-badge-radius,4px);background:var(--pd-badge-bg,#1f2933);color:var(--pd-badge-fg,#fff);font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.product-badge--new{background:var(--pd-badge-new-bg,var(--pd-badge-bg,#1f2933))}
.product-badge--sale{background:var(--pd-badge-sale-bg,#c0392b)}
.product-badge--custom{background:var(--pd-badge-custom-bg,var(--pd-badge-bg,#1f2933))}
/* ② 列表卡片简介：图下标题下的一段小字（默认不产出） */
.product-card-desc{margin:6px 0 0;color:var(--muted,#6b7280);font-size:12.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ③ 描述装修：按块排版的容器（默认不产出；原富文本口径保持不变） */
.desc-blocks{display:block;margin:0 0 16px}
.desc-block{margin:0 0 18px}
.desc-block:last-child{margin-bottom:0}
.desc-block-title{font-size:16px;font-weight:600;margin:0 0 8px;line-height:1.4}
.desc-block-text{margin:0;line-height:1.75;white-space:pre-wrap}
.desc-block-table{width:100%;border-collapse:collapse;font-size:13px}
.desc-block-table th,.desc-block-table td{border:1px solid var(--art-border-color,#ebeef5);padding:8px 10px;text-align:left}
.desc-block-table thead th{background:#fafafa;font-weight:600}
.desc-block-cta{display:inline-block;padding:10px 18px;border-radius:var(--pd-badge-radius,4px);background:var(--pd-badge-bg,#1f2933);color:#fff;text-decoration:none;font-weight:600;line-height:1.4}
.desc-block-cta:hover{opacity:.9}
/* ④ 尺码表：详情页固定结构的尺寸对照表（默认不产出） */
.size-chart{margin:8px 0 0}
.size-chart-title{font-size:16px;font-weight:600;margin:0 0 12px}
.size-chart-table{width:100%;border-collapse:collapse;font-size:13px}
.size-chart-table th,.size-chart-table td{border:1px solid var(--art-border-color,#ebeef5);padding:8px 10px;text-align:left}
.size-chart-table thead th{background:#fafafa;font-weight:600}
/* 特性图片网格（参考站 2×4 服务/能力卡片） */
.section-features{background:#fff}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px}
.feature-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-card{display:block}
/* 特性图用更扁的比例：8 张卡按 4 列排 2 行，1.4 的方图会让整段过高（曾达 1075px） */
.feature-card .feature-image{aspect-ratio:1.7;background-size:cover;background-position:center;background-color:#eceef1;margin-bottom:13px;transition:transform .3s}
.feature-card:hover .feature-image{transform:translateY(-4px)}
.feature-card h3{font-size:15px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.feature-card p{color:var(--muted);font-size:12px;line-height:1.65;margin:0}
.section-collections{background:#f4f6f8}
.collection-list{margin-top:40px;border-top:1px solid var(--line)}
.collection-row{display:grid;grid-template-columns:70px 1fr 200px 40px;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.collection-row:hover{background:#eceff2}
.collection-index{font:11px 'DM Mono',monospace;color:var(--muted)}
/* ★ 移动端横向溢出治理（320/375 实测；根因 = grid 子项 min-width:auto ⇒ min-content 撑破容器）：
   · 首页专辑行：.collection-name 允许收缩 + 断词 ⇒ 行内 1fr 轨道可缩到容器内，箭头列不再被顶出视口；
   · 联系页表单：.inquiry-form 是 .inquiry-wrap 的 grid 子项、.field 又是其 grid 子项，
     <input> 默认 size 的 min-content 把表单撑到 331.9px（容器仅 320）⇒ 溢出；对策见下方 .inquiry-* 规则。 */
.collection-name{font-size:25px;letter-spacing:-.02em;font-weight:700;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.collection-count{font:11px 'DM Mono',monospace;text-transform:uppercase;color:var(--muted)}
.collection-arrow{font-size:20px;text-align:right;color:var(--accent)}
.cta-section{background:var(--ink);color:#fff;display:flex;justify-content:space-between;gap:60px}
.cta-section.cta-accent{background:linear-gradient(100deg,var(--accent) 0%,var(--accent-dark) 100%)}
.cta-section.cta-accent .eyebrow{color:#ffd9bd}
.cta-section .eyebrow{color:#9aa7b4}
.cta-copy{max-width:340px;color:#b7c1cb;line-height:1.7;font-size:14px}
.cta-section.cta-accent .cta-copy{color:#ffe3cf}
/* 深色多列 footer（参考站样式） */
footer{background:var(--footer-bg);color:#b9c3cd;padding:64px var(--gutter) 0;font-size:13px}
/* ★ 件② 页脚列宽（2026-09-21 二次收紧）：把 RESOURCES / CONTACT 再整体左移。
   业主口径「红框里的内容（RESOURCES）左边移动一点」——旧值 1.15fr 1fr 1fr 1.15fr + 60px 列间距，
   1366 实测 RESOURCES 左缘 ≈705（离内容左缘太远）。本次收窄前两列份额（1fr / .85fr）+ 列间距 60→40，
   使 RESOURCES 左缘落进 620–650 目标带；四列仍两两不相交、无横向溢出。
   ★ 本值必须与 5 套主题 `layout/theme.liquid` 内 @media(min-width:901px) 的同名覆盖**逐字节一致**
     （那边才是 ≥901 的真正生效者；这里是 <901 的兜底 + 单一真相备忘）。 */
.footer-cols{display:grid;grid-template-columns:1.15fr .8fr 1.3fr .8fr auto 1.15fr;gap:40px;padding-bottom:48px}
/* 槽位本体：正常文档流（禁 absolute/fixed/固定高度/overflow），内容多只会把页脚往下推 */
.footer-slot{min-width:0}
/* 社媒块进槽后改为**左对齐**（与相邻栏目列的 h4+ul 对齐；底带兜底路径仍走居中规则） */
.footer-slot .b2b-fs{align-items:flex-start}
.footer-slot .b2b-fs__list{justify-content:flex-start}
.footer-brand strong{color:#fff;font-size:19px;letter-spacing:-.02em}
.footer-brand p{color:#8fa0af;margin:10px 0 0;line-height:1.7}
.footer-col h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin:4px 0 18px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;color:#8fa0af}
.footer-bottom a{color:#8fa0af}
.footer-bottom a:hover{color:#fff}
footer p{color:#8fa0af;margin:8px 0 0}
.footer-links{display:flex;gap:24px;align-items:center;font:11px 'DM Mono',monospace;text-transform:uppercase}
/* 去掉 max-width:1000px：边距已由 --gutter 统一给到 1400 容器，
   再叠加 1000 上限会把正文列压到 ~500px（标题被迫折成窄柱）。 */
.page-intro{padding:64px var(--gutter) 40px}
/* 列表页标题不该跟首页 hero 一样大（hero 是 64px 的视觉锤，内页 64px 只会显得空） */
.page-intro h1{font-size:clamp(30px,3vw,44px);margin:18px 0}
.page-intro p{max-width:460px;line-height:1.7;color:var(--muted)}
.catalog-toolbar{margin:0 var(--gutter) 55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;align-items:center;font:11px 'DM Mono',monospace;text-transform:uppercase}
.catalog-toolbar form{display:flex;gap:8px}
.catalog-toolbar input{border:0;border-bottom:1px solid var(--ink);background:transparent;padding:6px 3px;font:12px Manrope;outline:0}
.catalog-toolbar button{border:0;background:transparent;font:11px 'DM Mono';text-transform:uppercase;cursor:pointer}
.empty-state{padding:60px 0;color:var(--muted);font-size:14px}
/* ===== 商品详情：对标 shopb2bfly 的紧凑双栏 =====
   旧值两栏间距按 8% 视口宽算（1920 下 153px），加上 h1 58px、上下留白 45/110px，
   整体非常松散（用户反馈「布局太分散」）。
   现改为左右各半、间距 56px，并补齐面包屑 / 卖点 / 保障条 / 分页签，提高信息密度。 */
.product-detail{padding:26px var(--gutter) 72px}
.breadcrumb{display:flex;gap:9px;align-items:center;font:11px 'DM Mono',monospace;text-transform:uppercase;color:#98a1ab;margin-bottom:22px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{color:#c9d1d9}
.back-link{font:11px 'DM Mono',monospace;text-transform:uppercase;color:var(--muted)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:0;align-items:start}
.detail-image{aspect-ratio:1;background-size:cover;background-position:center;background-color:#eceef1}
.detail-copy{padding:0;min-width:0}
/* 商品多图图库：主图固定 1:1，缩略图切换 */
/* 不要给图库加 position:sticky：主图 1:1 + 缩略图常常高于视口，sticky 会把缩略图裁在屏外 */
.detail-gallery{display:flex;flex-direction:column;gap:12px;min-width:0}
.gallery-main{position:relative;aspect-ratio:1;background:#eceef1;overflow:hidden;border-radius:4px;border:1px solid var(--line)}
.gallery-main img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-placeholder{display:grid;place-items:center;color:#98a1ab;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em}
.gallery-thumbs{display:flex;gap:9px;flex-wrap:wrap}
.gallery-thumb{width:74px;height:74px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:#eceef1;transition:border-color .2s}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb.is-active{border-color:var(--accent)}
/* 商品视频（并入主图区）：视频用 contain 保留完整画面、不裁切；缩略图叠播放角标。
   ★ 必须显式写 [hidden] 规则 —— `.gallery-main img` 已经设了 `display:block`，
     只写 `hidden` 属性会被它盖掉，导致"切到视频后图片还在旁边"。 */
.gallery-main video{width:100%;height:100%;object-fit:contain;display:block;background:#0b0d10}
.gallery-main img[hidden],.gallery-main video[hidden]{display:none}
.gallery-thumb-video{position:relative}
.gallery-thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);pointer-events:none}
.gallery-thumb-play::after{content:'';position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
/* 远程引用视频（YouTube / Vimeo）：主区先给「封面+播放按钮」，点了才换成 iframe。
   ★ 这样页面加载时不发任何第三方请求（否则等于替访客把 cookie 种上了）。 */
.gallery-embed{position:absolute;inset:0}
.gallery-embed[hidden]{display:none}
.gallery-embed-frame{width:100%;height:100%;border:0;display:block;background:#000}
.gallery-embed-poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#0b0d10;cursor:pointer}
.gallery-embed-poster[hidden]{display:none}
.gallery-embed-poster img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.gallery-embed-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.6)}
.gallery-embed-play::after{content:'';position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
/* 商品卡片图统一用 img + object-fit，保证尺寸一致、无图有占位 */
.card-image{overflow:hidden}
.card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.detail-copy h1{font-size:clamp(24px,2.3vw,33px);line-height:1.16;letter-spacing:-.02em;margin:0 0 14px;font-weight:800}
.lead{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 20px}
/* 卖点要点（对标竞品价格下方的 bullet 列表） */
.spec-bullets{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px}
.spec-bullets li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.55;color:#3d4854}
.spec-bullets li::before{content:'';position:absolute;left:2px;top:7px;width:6px;height:6px;background:var(--accent);border-radius:50%}
/* 询盘操作区 */
.detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 20px}
.detail-actions .button{flex:1 1 190px;justify-content:center;text-align:center;margin-top:0}
/* 保障条：对标竞品 Free Shipping / Warranty / Support 三格 */
.guarantee{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 22px}
.guarantee div{background:#fff;padding:13px 10px;text-align:center}
.guarantee strong{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.guarantee span{display:block;font:10px 'DM Mono',monospace;text-transform:uppercase;color:#98a1ab;margin-top:5px}
.rule{border-top:1px solid var(--line);margin:24px 0}
/* 详情页的键值表（SPU / MOQ / Pricing）压紧行高，跟紧凑双栏保持一致 */
.fact-list{margin:0 0 20px}
.fact-list div{padding:10px 0}
/* 详情页分页签：描述 / 规格 / 物流 */
.detail-tabs{margin-top:52px;border-top:1px solid var(--line)}
.tab-nav{display:flex;gap:30px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab-nav button{background:none;border:0;padding:15px 0;font:12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#98a1ab;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-nav button.is-active{color:var(--ink);border-bottom-color:var(--accent)}
.tab-panel{display:none;padding:30px 0 6px;max-width:940px}
.tab-panel.is-active{display:block}
/* 规格表：双列，避免长列表把页面拉得很长 */
.spec-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;border-top:1px solid var(--line)}
.spec-table div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:11px 0;font-size:13px}
.spec-table dt{color:var(--muted)}
.spec-table dd{text-align:right}
@media(max-width:900px){.spec-table{grid-template-columns:1fr}}
@media(max-width:640px){.guarantee{grid-template-columns:1fr}.detail-actions .button{flex:1 1 100%}}
.body-html{line-height:1.8;color:#4c5763}
/* 富文本内嵌媒体必须限宽：编辑器上传的原图动辄两三千像素，不限宽会按原始尺寸
   铺开，直接撑破详情/文章栏（用户报「这图片这么大」的根因）。历史数据里已存在
   这类大图，只靠上传时压缩救不了旧内容，所以必须在展示层兜住。 */
.body-html img,.body-html video,.body-html iframe{max-width:100%;height:auto;display:block;margin:18px 0;border-radius:4px}
.body-html table{display:block;max-width:100%;overflow-x:auto}
.detail-copy h2{font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-top:45px}
dl{margin:0 0 35px;border-top:1px solid var(--line)}
dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;font-size:13px;gap:20px}
dt{color:var(--muted)}
dd{margin:0;text-align:right}
.fact-list{margin-top:0}
.faq-list details{border-bottom:1px solid var(--line);padding:16px 0}
.faq-list summary{cursor:pointer;font-size:14px;font-weight:600}
.faq-list p{color:var(--muted);font-size:13px;line-height:1.7}
.related-section{background:#fff}
.article-list{padding:0 var(--gutter) 110px}
.article-row{display:grid;grid-template-columns:120px 1.2fr 1.6fr 30px;gap:26px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.article-row:hover{background:#f4f6f8}
.article-date{font:11px 'DM Mono',monospace;color:var(--muted)}
.article-title{font-size:22px;letter-spacing:-.02em;font-weight:700}
.article-summary{color:var(--muted);font-size:13px;line-height:1.6}
.article-arrow{text-align:right;color:var(--accent)}
/* ★ 件③ 博客列表翻页条**居中**（业主「博客文章翻页也不是居中的」）：
   旧版 nav.pagination 是裸块级元素，里面的行内链接天然从左侧起排（1366 实测内容中心
   偏离内容区中心 625px）。修法只动 CSS：外层 wrap 变 flex 居中、内层 nav 变 flex 行 ——
   分页链接的生成逻辑（src/public-routes.js）不属本文件，一字不动。 */
.pagination-wrap{display:flex;justify-content:center;padding:0 var(--gutter) 64px}
/* ★ 件① 翻页条「上移」（业主「下一页太靠下了…在上面一点」）：
   .article-list 的通用底部 padding 是 110px，它同时也是首页 insights 区块在用 ——
   **不能改通用值**（会波及首页）。这里只用**相邻兄弟**选择器：当翻页条紧跟在文章列表之后
   （sections/article-list.liquid 的 `</section>`+`<nav>` 与 templates/blog.liquid 的
   `.article-list`+`.pagination-wrap` 两种形态都覆盖）时，用负 margin-top 把它提上来，
   使「最后一行 → 翻页条」的间隔从 110px 收到 ~50px（1366 实测，见提交说明）。 */
.article-list + .pagination-wrap,.article-list + .pagination{margin-top:-60px}
/* ★ 件① 翻页文字放大（业主「文字大一点」）：11px → 13px。
   font 简写里 size 与 family 之外的项（line-height）会被重置为 normal —— 保持原样即可，
   大写/等宽风格、颜色、gap 结构、letter-spacing 全部保留。
   （justify-content:center 双形态兼容：nav.pagination 无论包在 .pagination-wrap 里还是直接
   躺在 <main> 下，内容都相对内容区居中。） */
.pagination{display:flex;align-items:center;justify-content:center;gap:18px;font:13px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pagination a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.pagination a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.article-detail{padding:45px 22vw 110px}
.article-header h1{font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.03em;margin:22px 0;font-weight:800}
.page-body{padding:0 22vw 110px}
.inquiry-wrap{display:grid;grid-template-columns:1.4fr .8fr;gap:56px;padding:0 var(--gutter) 90px;align-items:start}
.inquiry-form{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.field{display:flex;flex-direction:column;gap:9px}
.field-full{grid-column:1 / -1}
.field label{font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.field input,.field textarea{border:0;border-bottom:1px solid var(--line);background:transparent;padding:11px 2px;font:14px Manrope;color:var(--ink);outline:0;resize:vertical}
.field input:focus,.field textarea:focus{border-bottom-color:var(--accent)}
/* ★ 联系页表单的收缩放行（配合 .collection-name 的同一条纪律）：
   .inquiry-wrap 是 grid，其子项 .inquiry-form、以及表单内的 .field 都默认 min-width:auto ——
   只要其中一个的 min-content 超过容器（<input> 的默认 size 即可），整行就被撑出视口。
   这里统一放行为可收缩，并让 input/textarea 取满列宽（不再靠默认 preferred width 定宽）。 */
.inquiry-wrap>*{min-width:0}
.inquiry-form{min-width:0}
.field{min-width:0}
.field input,.field textarea{width:100%;min-width:0}
.form-footer{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:10px}
.form-note{color:var(--muted);font-size:12px;line-height:1.6;max-width:330px;margin:0}
.form-status{grid-column:1 / -1;font-size:13px;line-height:1.6;margin:0;min-height:20px}
.form-status.is-ok{color:#2f7d4f}
.form-status.is-error{color:#c0392b}
.inquiry-aside{background:#f7f9fb;padding:38px 34px;border:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.aside-strong{font-size:22px;letter-spacing:-.02em;margin:14px 0 0;font-weight:700}
.inquiry-aside dl{margin-top:26px;margin-bottom:0}
.inquiry-aside dd a{border-bottom:1px solid var(--line);word-break:break-word}
/* ★ 联系页右侧信息栏：邮箱/网址这类**不可断词**的长 token 会把 flex 行撑破
   （320 实测残留 1px 溢出：dd 的 min-content 210px 顶出 272px 的栏）。放行收缩 + 允许断词。 */
.inquiry-aside dd{min-width:0}
@media(max-width:900px){.detail-grid,.inquiry-wrap{grid-template-columns:1fr;gap:45px}.article-detail,.page-body{padding-left:6%;padding-right:6%}.collection-row{grid-template-columns:50px 1fr 30px;row-gap:8px}.collection-count{display:none}.article-row{grid-template-columns:1fr 30px;row-gap:8px}.article-date,.article-summary{grid-column:1/-1}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-cols{grid-template-columns:1fr 1fr;column-gap:40px}
/* ★ ≤900px：页脚恢复 2×2 堆叠，社媒/二维码两个槽**整行铺满并排在全部栏目之后**（业主口径）——
   grid order 把两个槽挪到视觉末尾，任何内容高度都不会产生重叠（正常文档流）。 */
.footer-slot-social,.footer-slot-qr{grid-column:1/-1;order:10}}
@media(max-width:700px){.site-header{padding:0 6vw;height:auto;padding-top:16px;padding-bottom:16px;display:block;position:static}.site-header nav{gap:14px;font-size:10px;margin-top:14px;flex-wrap:wrap}.hero{padding:16vw var(--gutter);min-height:0}.hero-stat{left:var(--gutter);bottom:auto;right:auto;margin-top:35px}.section{padding:70px var(--gutter)}.section-heading{display:block}.section-heading h2,.cta-section h2{font-size:36px}.section-heading .text-link{display:inline-block;margin-top:25px}.product-grid{grid-template-columns:1fr;gap:45px}.product-grid-large{padding:0 var(--gutter) 80px}.cta-section{display:block}.cta-copy{margin-top:35px}.page-intro{padding:70px var(--gutter) 45px}.page-intro h1{font-size:48px}.catalog-toolbar{margin:0 var(--gutter) 45px;display:block}.catalog-toolbar form{margin-top:15px}.product-detail{padding:30px var(--gutter) 80px}.inquiry-form{grid-template-columns:1fr}.form-footer{display:block}footer{display:block;padding-top:48px}.footer-cols{grid-template-columns:1fr;gap:30px}.footer-bottom{flex-direction:column}.footer-links{margin-top:20px;flex-wrap:wrap;gap:14px}.feature-grid{grid-template-columns:1fr}}
.announcement{display:flex;align-items:center;justify-content:center;gap:18px;padding:11px var(--gutter);font:500 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;position:relative;background:var(--ink);color:#dfe5ea}
.announcement a{border-bottom:1px solid;padding-bottom:2px}
.announcement-close{background:transparent;border:0;font-size:17px;line-height:1;cursor:pointer;color:inherit;position:absolute;right:var(--gutter)}
.collection-heading,.faq-heading,.rich-heading{font-size:clamp(32px,3.4vw,46px);line-height:1.02;letter-spacing:-.03em;margin:20px 0 0;font-weight:800}
/* ★ 长词兜底（移动端横向溢出）：德语等语言的**长复合词**（如 Beschaffungsteams）无法在
   `overflow-wrap:normal` 下断行，窄屏会把标题容器撑破 —— 320px 实测 `.rich-heading`
   内容 299px > 容器 257px ⇒ 文档 scrollWidth 323 > 视口 305，整页可横向拖动。
   这里与既有 `.collection-name` 同口径（overflow-wrap:anywhere + word-break:break-word），
   仅在不折行就溢出时才断词，正常语言（中/英）观感不变。 */
.collection-heading,.faq-heading,.rich-heading,.section-heading h2,.cta-section h2,.page-intro h1,.rich-item h3{overflow-wrap:anywhere;word-break:break-word}
.section-rich .rich-head{margin-bottom:55px}
.section-rich .rich-head h2{margin-bottom:0}
.rich-grid{display:grid;gap:45px 32px}
.rich-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rich-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rich-item h3{font-size:21px;letter-spacing:-.02em;margin:0 0 12px;font-weight:700}
.rich-item p{color:var(--muted);font-size:14px;line-height:1.75;margin:0}
.rich-item-wide{grid-column:1/-1;max-width:640px}
.rich-image{aspect-ratio:1.6;background-size:cover;background-position:center;background-color:#eceef1;margin-bottom:22px}
.rich-foot{margin-top:55px}
.section-faq .faq-list{margin-top:45px;border-top:1px solid var(--line)}
.banner{display:flex;align-items:center;padding:90px var(--gutter);background-size:cover;background-position:center;background-color:#2a3644;position:relative}
.banner::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,24,34,.72) 0%,rgba(16,24,34,.28) 70%,rgba(16,24,34,.1) 100%)}
.banner-inner{position:relative;z-index:1;max-width:560px;color:#fff}
.banner-inner h2{font-size:clamp(34px,4vw,54px);line-height:1.02;letter-spacing:-.03em;margin:20px 0 18px;font-weight:800}
.banner-inner p{color:#d9dee4;line-height:1.7;font-size:15px;margin:0}
.banner-inner .eyebrow{color:#ffb98a}
.banner-align-center{margin:0 auto;text-align:center}
@media(max-width:900px){.rich-cols-2,.rich-cols-3{grid-template-columns:1fr}}

/* 语言切换器（前台界面多语言）。顶部在 header 右侧、底部在页脚，位置由后台设置控制。
   用原生 <select>（不用 appearance:none + 自制箭头），无 JS 也能用、移动端体验最好。 */
.lang-switch{display:inline-flex;align-items:center;gap:8px;margin-left:22px}
.lang-switch-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* ★ 同一条陷阱的第二处：`font:600 12px/1.2 inherit` 里 `inherit` 非法 → 整条 font 声明被丢弃
   → 语言切换下拉框回落到 UA 默认（400 13.33px Arial），与同一行的 `.lang-switch-label` 字重不一致。
   改成显式长写（字体族单独写 `font-family:inherit` 才是合法的"继承"）。 */
.lang-switch select{border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:12px;line-height:1.2;font-family:inherit;padding:7px 10px;border-radius:4px;cursor:pointer}
.lang-switch select:hover,.lang-switch select:focus{border-color:var(--accent);outline:none}
.lang-switch-footer{margin:14px 0 0}
.lang-switch-footer .lang-switch-label{color:rgba(255,255,255,.6)}
.lang-switch-footer select{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
/* ★ ≤820px：窄屏也让「语言 / 货币」这几个字的**文字标签保持可见**（业主口径）。
   难点：手机端顶栏横向空间极窄 —— 320px 时 header 可用内容宽仅约 267px，而两个下拉并排本身就要 ~309px。
   所以光把 `display:none` 改成显示、其余不动，**必然把顶栏挤溢出**（顶栏溢出是刚修好的 P0）。
   做法是**三档收紧**，靠"缩字号/缩间距/极窄屏改上下两行"消化标签新增的宽度：
     ① ≤820px：恢复标签显示，同时收窄标签与下拉的间距（gap 8→5px）；
     ② ≤560px：进一步压到 9px 字号 + 更紧的 gap / select padding；
     ③ ≤360px：两个切换器各占一行（width:100% 强制换行）—— 从"并排"改"上下"，
        因为 320px 物理上放不下并排（下拉本身已 ~309px），换行是**唯一**不溢出的形态。
   ⚠️ 绝不引入 `overflow-x:hidden` 兜底：那是把溢出"藏起来"而非"消除"，会连带裁掉真正的内容。 */
@media (max-width:820px){.site-header .lang-switch{margin-left:10px;gap:5px}.site-header .lang-switch-label{display:inline;font-size:10px;letter-spacing:.04em}}
@media (max-width:560px){.site-header .lang-switch{margin-left:6px;gap:4px}.site-header .lang-switch-label{font-size:9px;letter-spacing:.02em}.site-header .lang-switch select{font-size:11px;padding:5px 7px}}
@media (max-width:360px){.site-header .lang-switch{display:flex;width:100%;margin:6px 0 0}}

/* 货币切换器：复用 .lang-switch 的外观（同一个 form 结构），只补一处细节：
   货币代码是等宽更有秩序感，且切换器的 select 比语言那个略窄（选项只有 3~4 个）。
   ⚠️ 货币与语言是两个**独立**的控件（各有各的 Cookie），只是长得一样。 */
.currency-switch select{font-family:'DM Mono',monospace;letter-spacing:.04em}

/* 站内搜索（插件 search-engine）：顶栏的单行搜索框 + 结果页里的同款。
   ★ 放在**基座** public/theme.css（不是逐主题 assets/theme.css）：
     `/theme.css` 的分发是「基座 + 当前模板覆盖」，写在这里 5 个主题一次生效，
     不必在 5 份主题样式里各抄一遍（抄漏一份就是"换个主题搜索框变形"）。
   ★ 用原生 <form> GET 提交（/search?q=…）：无 JS 也能用，与语言/货币切换器同一范式。 */
.site-search{display:inline-flex;align-items:center;margin-left:22px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:2px 3px 2px 12px}
/* ★ font 简写里写 `inherit` 是**非法值** —— 整条声明会被浏览器丢弃（实测计算值 = 400 13.3333px/normal Arial，
   字重/字号/行高/字体族全丢）⇒ 按钮高度随语言漂移（拉丁 33px / 中日韩 37px），各语言"控件与文案"对不齐。
   改成显式长写 + 固定高度 + flex 居中 ⇒ 任何语言都是同一个尺寸、同一条中线。 */
.site-search input{border:0;background:transparent;outline:0;font-weight:400;font-size:13px;line-height:normal;font-family:inherit;color:var(--ink);width:144px;height:32px;padding:0 6px;box-sizing:border-box}
.site-search input::placeholder{color:var(--muted)}
.site-search input:focus{width:180px;transition:width .18s ease}
.site-search button{border:0;background:var(--accent);color:#fff;border-radius:999px;font-weight:600;font-size:11px;line-height:1;font-family:inherit;letter-spacing:.06em;text-transform:uppercase;height:32px;padding:0 15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.site-search button:hover{background:var(--accent-dark)}
/* 结果页里的搜索框（在 .catalog-toolbar 里，靠左、更宽） */
.site-search-page{margin-left:0}
.site-search-page input{width:220px}
.site-search-page input:focus{width:260px}
/* 命中的专辑（结果页排在商品之前：买家常常先找"哪一类"） */
.search-collections{margin:0 var(--gutter) 55px;border-top:1px solid var(--line);padding-top:18px}
.search-collections h2{font:600 12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px}
.search-collections ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.search-collections li a{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px}
.search-collections li a:hover{border-color:var(--accent);color:var(--accent)}
.search-count{font:11px 'DM Mono',monospace;color:var(--muted)}
@media (max-width:980px){.site-search{margin-left:10px}.site-search input,.site-search input:focus{width:96px}}
/* ≤700px 时 .site-header 已变成 display:block（见上面的移动端规则）⇒ 搜索框顺势铺满一行，
   **不能** display:none —— 手机端是主要流量，藏掉搜索入口等于把刚做出来的功能砍掉一半。 */
@media (max-width:700px){.site-search{display:flex;margin:14px 0 0;width:100%}.site-search input,.site-search input:focus{width:auto;flex:1}}

/* ── 顶栏搜索 · 收起态只露一个图标，点击展开（第一阶段；第二阶段"实时建议"不做）──────────
   桌面：点图标 → 浮层输入框（≈320px，带放大镜与清除）。浮层**绝对定位**，
         展开/收起**不改变导航布局**（业主痛点原话：搜索框一展开就把导航文字挤变形）。
   移动(≤700px)：点图标 → **全宽搜索层**，覆盖 header，可关闭 / ESC。
   ★ 展开/收起由 **纯 CSS** 完成（<label for> 切一个视觉隐藏的 checkbox）⇒ **无 JS 也能用**；
     public/site-search.js 只做渐进增强（展开自动聚焦 / ESC / 点外部关闭）。
   ★ 与结果页的 `.site-search-page` 互不影响：那一支仍走上面的 `.site-search` 基础样式。
   ★ 放基座（不是逐主题 assets/theme.css）：5 个主题一次生效，避免"换个主题搜索框就回退"。 */
.site-search--header{position:relative;display:inline-flex;align-items:center;margin-left:22px;padding:0;border:0;border-radius:0;background:transparent}
.site-search--header .site-search__state{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.site-search--header .site-search__toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;color:var(--ink);cursor:pointer;transition:background .16s ease}
.site-search--header .site-search__toggle:hover{background:rgba(16,24,34,.06)}
.site-search--header .site-search__state:focus-visible ~ .site-search__toggle{outline:2px solid var(--accent);outline-offset:2px}
.site-search--header .site-search__ico{width:19px;height:19px;fill:currentColor;display:block}
.site-search--header .site-search__field{position:absolute;top:calc(100% + 10px);right:0;z-index:70;display:flex;align-items:center;gap:6px;width:320px;max-width:calc(100vw - 32px);padding:6px 6px 6px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 18px 44px rgba(16,24,34,.18);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.site-search--header .site-search__state:checked ~ .site-search__field{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.site-search--header .site-search__field input{border:0;background:transparent;outline:0;font-weight:400;font-size:14px;line-height:normal;font-family:inherit;color:var(--ink);flex:1 1 auto;min-width:0;width:auto;height:32px;padding:0 4px}
.site-search--header .site-search__field input::placeholder{color:var(--muted)}
.site-search--header .site-search__close{display:none}
.site-search--header .site-search__submit{border:0;background:var(--accent);color:#fff;border-radius:999px;font-weight:600;font-size:11px;line-height:1;font-family:inherit;letter-spacing:.06em;text-transform:uppercase;height:32px;padding:0 15px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.site-search--header .site-search__submit:hover{background:var(--accent-dark)}
@media (max-width:980px){.site-search--header{margin-left:12px}}
@media (max-width:700px){
  .site-search--header{display:flex;justify-content:flex-end;margin:14px 0 0;width:100%}
  .site-search--header .site-search__field{position:fixed;left:0;right:0;top:0;width:auto;max-width:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 16px;background:#fff;transform:translateY(-100%);transition:transform .18s ease,opacity .18s ease,visibility .18s}
  .site-search--header .site-search__state:checked ~ .site-search__field{transform:none}
  .site-search--header .site-search__close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border:0;background:transparent;color:var(--muted);font:24px/1 system-ui,sans-serif;cursor:pointer}
}

/* 详情页价格。
   ★ 库里只存基准货币（CNY）的整数「分」，这里显示的是**经汇率换算后的值** ——
     所以非基准货币时必须跟一句「仅供参考」（B2B 报价场景，避免被当成正式报价）。
   数字用 tabular-nums 让不同位数的价格在列表里竖排对齐。 */
.product-price{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.price-now{font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-was{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.price-inquiry{font-size:17px;font-weight:700;letter-spacing:-.01em}
.price-note{margin:-8px 0 16px;font-size:12px;color:var(--muted)}
/* P0-5 批发阶梯价表（插件 wholesale-tiers）：数量区间 → 单价（单卖口径）。
   ★ 只在商品真的配了阶梯价时渲染（product.tiers.size>0），没有则一个字符都不多。 */
.tier-price{margin:0 0 20px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tier-head{padding:9px 14px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(0,0,0,.03);color:#3d4854}
.tier-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tier-table th,.tier-table td{padding:9px 14px;text-align:left;border-top:1px solid var(--line)}
.tier-table th{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tier-table td{font-variant-numeric:tabular-nums}
.tier-table .tier-price-cell{font-weight:700;white-space:nowrap}
.tier-note{margin:0;padding:9px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line)}
.currency-note{margin:10px 0 0;font-size:11px;color:rgba(255,255,255,.45)}
@media (max-width:700px){.price-now{font-size:28px}}

/* ===== 站点悬浮元素 · 基座默认样式（一键回到顶部 + 悬浮联系方式）=====
   ★★ 为什么放**基座**（而不是逐主题 assets/theme.css）：
     `/theme.css` 的分发 = 基座 public/theme.css + 当前模板 assets/theme.css 的叠加。
     两条硬理由：
       ① 5 个主题一次生效，不必各抄一遍（抄漏一份 = "换个主题按钮就没样式"）；
       ② **客户自带主题**（第三方主题，不含我们的 assets/theme.css）也照样有样式 ——
          这正是此前「客户自带主题按钮无样式」缺口的根因。
     逐主题若要有差异，只在各自的 assets/theme.css 里**覆盖 CSS 变量**即可。
   ★ 两个挂载点都是「独立 JS 路由」，按**实时配置**输出，关闭时零 DOM：
       · 一键回到顶部   GET /back-to-top.js       → .b2b-back-to-top
       · 悬浮联系方式   GET /floating-contact.js  → .b2b-fc / .b2b-fs
   ★ 可覆盖变量：
       --b2b-btt-{right,left,bottom,size,size-mobile,font,font-mobile,radius,bg,bg-hover}
       --b2b-fc-{offset,panel-w,bg,ink,muted,accent,toggle-bg,radius} */

/* ---------- 一键回到顶部（Back to Top） ---------- */
.b2b-back-to-top{position:fixed;right:var(--b2b-btt-right,16px);left:var(--b2b-btt-left,auto);bottom:var(--b2b-btt-bottom,16px);z-index:2147481999;width:var(--b2b-btt-size,48px);height:var(--b2b-btt-size,48px);padding:0;border:0;border-radius:var(--b2b-btt-radius,50%);background:var(--b2b-btt-bg,#0d9488);color:#fff;font-size:var(--b2b-btt-font,22px);line-height:1;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility .2s,background .2s ease}
.b2b-back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.b2b-back-to-top:hover{background:var(--b2b-btt-bg-hover,#0b7d72);transform:translateY(-2px)}
.b2b-back-to-top:disabled{cursor:default;opacity:.7}
@media (max-width:768px){.b2b-back-to-top{width:var(--b2b-btt-size-mobile,40px);height:var(--b2b-btt-size-mobile,40px);font-size:var(--b2b-btt-font-mobile,18px)}}
@media (prefers-reduced-motion:reduce){.b2b-back-to-top,.b2b-back-to-top.visible{transition:none}}

/* ---------- 悬浮联系方式（Floating contact） ----------
   右侧/左侧一列 APP 图标的 pill 条；桌面 hover（含键盘 focus-within）弹出详情卡片，
   移动端点顶部「联系」按钮展开同一张卡片（同一套 DOM，只差尺寸）。
   详情卡片里每渠道一行「图标 + 名称 + 号码/账号 + 复制/打开」，二维码 160×160 居中收尾。 */
.b2b-fc{position:fixed;top:50%;transform:translateY(-50%);z-index:2147482000;display:flex;align-items:center;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;line-height:1.45;color:var(--b2b-fc-ink,var(--ink,#1c2733))}
.b2b-fc--right{right:var(--b2b-fc-offset,16px);flex-direction:row}
.b2b-fc--left{left:var(--b2b-fc-offset,16px);flex-direction:row-reverse}

/* pill 条（常驻）：一列 APP 图标 */
/* ★★ 这里**不要**设 max-height / overflow —— 详情卡片是挂在「条外」的（right:calc(100% + 12px)），
   bar 上只要有 overflow（×hidden 或 ×auto，含 max-height 引发的滚动），卡片就会被**横向裁掉**
   （业主实测：悬停只弹出一个名称 + 浏览器 title 气泡，整张卡片看不见）。
   高度让位改由脚本「收窄间距」（见 floating-contact.js 的 layout()）——**宁可轻微溢出，也绝不裁切**。 */
.b2b-fc__bar{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;background:var(--b2b-fc-bg,#fff);border:1px solid rgba(16,24,34,.08);border-radius:var(--b2b-fc-radius,999px);box-shadow:0 8px 26px rgba(16,24,34,.16)}
.b2b-fc__bar::-webkit-scrollbar{width:0;height:0}

/* 单个 APP 图标（<a> 与 <button> 两种形态共用） */
/* ★ 业主参照图口径：**白底圆形按钮 + 各 APP 品牌色图标**（旧版是"品牌色实心圆 + 白色同一个气泡"，
   5 个渠道长得一模一样）。现在背景固定白、图标走品牌色 ⇒ 一眼能分出是哪个 APP。 */
.b2b-fc__app{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(16,24,34,.08);border-radius:50%;background:var(--b2b-fc-app-bg,#fff);color:var(--fc-color,var(--b2b-fc-accent,var(--accent,#2f7df6)));cursor:pointer;text-decoration:none;flex:none;box-shadow:0 2px 8px rgba(16,24,34,.12);transition:transform .16s ease,box-shadow .16s ease}
.b2b-fc__app:hover{transform:scale(1.09);box-shadow:0 6px 16px rgba(16,24,34,.22)}
.b2b-fc__app:active{transform:scale(.96)}
.b2b-fc__app:focus-visible{outline:2px solid var(--fc-color,var(--b2b-fc-accent,var(--accent,#2f7df6)));outline-offset:2px}
.b2b-fc__app svg{width:23px;height:23px;display:block;fill:currentColor;pointer-events:none}
.b2b-fc__app--toggle{background:var(--b2b-fc-toggle-bg,var(--accent,#2f7df6))}

/* ---------- ★ 每个渠道一个**独立**卡片 ----------
   旧版：整列共用一个面板、把全部渠道堆成一列 ⇒ 业主实测"鼠标放 5 个图标任意一个，
   弹出来的内容完全一样（同一个号码出现 3 次）"。现在一个渠道 = 一张卡，只显示它自己。 */
.b2b-fc__item{position:relative;display:flex;justify-content:center;flex:none}
/* ★★ 详情卡片 = **独立层**：由脚本在「打开时」直接挂到 <body>（position:fixed），位置按图标的
   getBoundingClientRect() 现算。它**不在** .b2b-fc / .b2b-fc__bar 的盒子里 ⇒ 任何祖先的
   overflow（hidden/auto/scroll）或 transform/filter 都裁不到它 —— 这正是「卡片被裁没」的根因。
   （旧实现把卡片绝对定位在 .b2b-fc__item 内、伸到「条外」，只要 bar 上有 overflow 就被横向裁掉：
   业主实测悬停只弹出一个名称气泡，整张卡片看不见。） */
.b2b-fc__card{position:fixed;top:0;left:0;z-index:2147483500;width:var(--b2b-fc-card-w,236px);max-width:calc(100vw - 16px);padding:12px;background:var(--b2b-fc-bg,#fff);border:1px solid rgba(16,24,34,.08);border-radius:14px;box-shadow:0 16px 40px rgba(16,24,34,.2);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(8px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.b2b-fc__card--left{transform:translateX(-8px)}
.b2b-fc__card.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.b2b-fc__card-head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.b2b-fc__card-val{font-size:13px;font-weight:600;line-height:1.4;word-break:break-all;color:var(--b2b-fc-ink,#1c2733);margin:0 0 10px}
.b2b-fc__card .b2b-fc__go{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box}
.b2b-fc__card-qr{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(16,24,34,.14);display:flex;flex-direction:column;align-items:center;gap:6px}
/* ★ 回到顶部落进这一列的最底部（青绿色圆钮）—— 不再独立悬浮去压住询价篮 */
.b2b-fc__btt-slot{display:flex;justify-content:center;flex:none;margin-top:2px}
.b2b-fc__btt{position:static;right:auto;left:auto;bottom:auto;display:none;width:44px;height:44px;font-size:19px;opacity:1;visibility:visible;transform:none;flex:none;background:var(--b2b-btt-bg,#0d9488)}
.b2b-fc__btt.visible{display:flex;align-items:center;justify-content:center}
.b2b-fc__btt:hover{transform:scale(1.08);background:var(--b2b-btt-bg-hover,#0b7d72)}

/* 详情卡片：桌面 hover / 移动 click 展开（同一张卡片） */
.b2b-fc__panel{--fc-tx:10px;position:absolute;top:50%;transform:translate(var(--fc-tx),-50%);width:var(--b2b-fc-panel-w,292px);max-height:min(76vh,600px);overflow-y:auto;background:var(--b2b-fc-bg,#fff);border:1px solid rgba(16,24,34,.08);border-radius:16px;box-shadow:0 18px 46px rgba(16,24,34,.22);padding:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.b2b-fc--right .b2b-fc__panel{right:100%;margin-right:12px}
.b2b-fc--left .b2b-fc__panel{--fc-tx:-10px;left:100%;margin-left:12px}
.b2b-fc.is-open .b2b-fc__panel{--fc-tx:0px;opacity:1;visibility:visible;pointer-events:auto}
@media (min-width:769px){
  /* 桌面：hover 或键盘 focus 即弹出（不用点击） */
  .b2b-fc:hover .b2b-fc__panel,.b2b-fc:focus-within .b2b-fc__panel{--fc-tx:0px;opacity:1;visibility:visible;pointer-events:auto}
  /* 桌面有 hover，不需要「联系」按钮（省一个视觉噪音）；移动端才显示它 */
  .b2b-fc__app--toggle{display:none}
}

.b2b-fc__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.b2b-fc__title{font-size:14px;font-weight:700;letter-spacing:-.01em}
.b2b-fc__close{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;padding:0;border:0;border-radius:50%;background:rgba(16,24,34,.06);color:var(--b2b-fc-muted,#6f7a85);font:16px/1 system-ui,sans-serif;cursor:pointer}
.b2b-fc__close:hover{background:rgba(16,24,34,.12)}
.b2b-fc__list{display:flex;flex-direction:column;gap:4px}
.b2b-fc__row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px}
.b2b-fc__row:hover{background:rgba(16,24,34,.04)}
.b2b-fc__ico{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--fc-color,var(--b2b-fc-accent,var(--accent,#2f7df6)));color:#fff}
.b2b-fc__ico svg{width:18px;height:18px;display:block;fill:currentColor}
.b2b-fc__meta{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.b2b-fc__name{font-size:13px;font-weight:600;line-height:1.35}
.b2b-fc__val{font-size:12px;color:var(--b2b-fc-muted,#6f7a85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b2b-fc__go{flex:none;padding:6px 12px;border:0;border-radius:999px;background:rgba(16,24,34,.06);color:var(--b2b-fc-ink,#1c2733);font:600 12px/1.2 system-ui,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .16s ease,color .16s ease}
.b2b-fc__go:hover{background:var(--b2b-fc-accent,var(--accent,#f26b1d));color:#fff}
.b2b-fc__qr{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(16,24,34,.14);display:flex;flex-direction:column;align-items:center;gap:6px}
.b2b-fc__qr-img{width:160px;height:160px;max-width:100%;object-fit:contain;display:block;background:#fff;border:1px solid rgba(16,24,34,.08);border-radius:10px;padding:6px}
.b2b-fc__qr-label{font-size:13px;font-weight:600;text-align:center}
.b2b-fc__qr-hint{font-size:11px;color:var(--b2b-fc-muted,#6f7a85)}

/* 复制反馈（挂在 <body> 上：不受 .b2b-fc 的 transform 影响，始终居中于视口） */
.b2b-fc__toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);z-index:2147482001;padding:8px 15px;border-radius:999px;background:rgba(16,24,34,.92);color:#fff;font:600 12.5px/1.2 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.b2b-fc__toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ★ 件③④ 页脚底部带（#b2b-footer-extra / .b2b-fe）：社媒 + 二维码同处一条**正常文档流**的带子。
   ★ 红线：全部在正常文档流 —— 禁 position:absolute/fixed、**不设固定高度**、不 overflow:hidden；
     栏目内容变多只会把这条带子往下推，**永不重叠**。分隔线由本条提供（.b2b-fs 不再重复画线，避免双线）。
   ★ 件④ 社媒**居中** + 件③ 二维码**靠右**（业主：二维码挪到红箭头指的右侧）：
     `grid-template-columns:1fr auto 1fr` —— 两翼 1fr 等宽 ⇒ 中间 auto 列（社媒）恒处于**整带正中**；
     二维码落第 3 列、`justify-self:end` ⇒ 靠右（右缘对齐内容右缘 = CONTACT 列右上方那一带）。
     网格本身是**正常文档流**，天然不重叠、不裁切、无固定高度。 */
.b2b-fe{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:32px;margin:34px 0 30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12)}
/* 社媒：落中间 auto 列并整体居中；块内标题与图标行都居中（否则标题居中、图标仍靠左）。 */
#b2b-footer-extra #b2b-footer-social{grid-column:2;justify-self:center}
/* margin/padding/border-top 归零（分隔线已由 .b2b-fe 提供）；min-width:0 让长文案可收缩不溢出。 */
.b2b-fs{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0;padding:0;border-top:0;min-width:0}
.b2b-fs__title{font:600 12px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.b2b-fs__list{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.b2b-fs__item{display:inline-flex;align-items:center;justify-content:center;height:34px;max-width:100%;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:600 12px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-decoration:none;overflow-wrap:anywhere;transition:background .16s ease,color .16s ease}
.b2b-fs__item:hover{background:var(--b2b-fc-accent,var(--accent,#f26b1d));color:#fff}
/* 页脚二维码块（#b2b-footer-qr / .b2b-fc-footer-qr）：落第 3 列并**靠右**（justify-self:end）。
   块内仍**左对齐** —— 图片与自己的标签/提示保持**同一左边缘**（刻意不 text-align:center：
   若图片居中、文字左对齐，视觉上会显得「歪」）。 */
#b2b-footer-extra #b2b-footer-qr{grid-column:3;justify-self:end}
.b2b-fc-footer-qr{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
/* 二维码图：**正方形、不许变形**（160×160 + object-fit:contain）；display:block 消除行内基线间隙 */
.b2b-fc-footer-qr .b2b-fc__qr-img{width:160px;height:160px;max-width:100%;object-fit:contain;display:block;background:#fff;border-radius:8px;padding:6px}
.b2b-fc-footer-qr .b2b-fc__qr-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.55)}
.b2b-fc-footer-qr .b2b-fc__qr-hint{font-size:11px;color:rgba(255,255,255,.4)}
/* ★ 件② 商品页分享菜单：**图标右侧一排**展开（业主「我要的是点击后直接在右边一排展开」）。
   这里放**基座**规则（容器单行 nowrap、宽度由内容决定）；5 套 product.liquid 的同名规则
   只保留定位/外观，不再写 flex-direction:column —— 两边协同，客户自带主题也拿到单行基线。
   ⚠️ 单行 7 项实测宽 ~705px：只有超宽视口才容得下「图标右侧」这一形态；窄视口由
   product.liquid 里的降级 @media 兜底（回到「图标下方 + 允许换行」）。 */
.share-menu{flex-direction:row;flex-wrap:nowrap;gap:2px 4px;width:max-content}
.share-item{flex:0 0 auto}
.share-item span{white-space:nowrap}

/* 移动端：尺寸收一档（几何不变，仍是右侧居中 + 同一张卡片） */
@media (max-width:768px){
  .b2b-fc{--b2b-fc-offset:10px}
  .b2b-fc__app{width:40px;height:40px}
  .b2b-fc__app svg{width:21px;height:21px}
  /* ★ 回到顶部按钮已并入这一列，必须跟着一起收尺寸：否则 768 及以下是「40 的渠道钮 + 44 的回顶钮」，
     同一列里两个圆钮一大一小，视觉上像拼错了。 */
  .b2b-fc__btt{width:40px;height:40px;font-size:17px}
  /* 渠道卡片（.b2b-fc__card）已挂 <body>（position:fixed）⇒ 不再受 pill 条 58px 宽度限制，
     直接把「两侧各留 8px」作为宽度上限即可（脚本定位时也会把 left/right 夹在 8px 内）。 */
  .b2b-fc__card{width:min(86vw,300px,calc(100vw - 16px))}
  /* 卡片朝左（右栏时）展开，宽度必须同时让出「边距 10 + pill 条宽 58 + 间隙 12 + 左侧留白」，
     否则 375/360 这类窄屏上卡片左缘会被视口裁掉（真机 iPhone SE 375px 实测 -5px）。
     用 100vw 是因为卡片的包含块是 .b2b-fc（仅 58px 宽），百分比无意义；
     减去 104px 后即使浏览器reserve了 15px 经典滚动条（100vw 含滚动条）也仍有 ≥9px 余量。 */
  .b2b-fc--right .b2b-fc__panel,.b2b-fc--left .b2b-fc__panel{width:min(86vw,300px,calc(100vw - 104px));max-height:70vh}
}
@media (prefers-reduced-motion:reduce){
  .b2b-fc__panel,.b2b-fc__app,.b2b-fc__toast,.b2b-fs__item{transition:none}
}

/* ==========================================================================
   S1.5/PV3 变体选择器（商品详情页「款式」区）—— 基座样式，5 个主题共用
   ★ 业主口径（PV3，2026-09-19）：「维度值是可以多加的」⇒ **每个维度各渲染一行 chip**
     （淘宝「颜色分类 + 套餐」形态）：最左是维度名，右侧跟该维度的取值 chip。
   ★ 业主口径（返工 2026-09-18）：图只出现在**第一维度**（如「颜色分类」）chip 里
     （左缩略图 + 右自定义名称）；删掉下方多余的 SKU 清单块；点 chip 切主图；
     组合自定义名称显示在 SPU 行。**第二及以后维度（如「套餐」）= 纯文字 chip，无图。**
   ★ 数据契约（服务端 public-routes.js 挂到 product 上，模板 product.liquid 渲染）：
       · product.options[].values[] → { value, image_url }            ← 取值级图 ⇒ 首维 chip 内出缩略图
       · product.variants[]         → { combo, spu, image_url, name? } ← 组合级图/名称（首维 chip 文案 + 选中联动主图/SPU 行）
   ★ 隐藏规则在**模板**里落（首维无名无图的取值不进 DOM）；样式这里只负责布局。
   ★ 优雅降级：无图 ⇒ 只有文字；图 404 ⇒ 脚本加 .is-broken 隐藏；名称空 ⇒ 回退取值文本。
   ★ 绝不 overflow-x:hidden —— 用 flex-wrap + min-width:0 让长名称自然折行（与顶栏同一条纪律）。
   ========================================================================== */
.pv-options{margin:18px 0 6px}
/* 一行 = 一个维度：维度名在左、取值 chip 在右；窄屏时 chip 先换行、维度名可在极端长名下折行（不溢出）。 */
.pv-group{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 12px;margin:0 0 14px}
.pv-label{flex:0 0 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);line-height:34px;margin:0}
.pv-values{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px}
.pv-value{display:inline-flex;align-items:center;gap:8px;min-height:34px;max-width:100%;padding:4px 12px;border:1px solid var(--line);background:#fff;border-radius:6px;font:inherit;font-size:13px;line-height:1.25;color:var(--ink);cursor:pointer;transition:border-color .16s ease,color .16s ease,box-shadow .16s ease}
.pv-value:hover{border-color:#c8c9cc}
.pv-value.is-active{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pv-value-thumb{width:28px;height:28px;flex:0 0 auto;object-fit:cover;border-radius:4px;display:block;background:#f1f2f4}
.pv-value-text{min-width:0;overflow-wrap:anywhere}
/* 破图兜底：脚本加 .is-broken 后彻底隐藏（不占位、不塌布局） */
.pv-value-thumb.is-broken{display:none}
/* SPU / 自定义组合名称行（PV2：名称挪到 SPU 行；两者皆空 ⇒ 整行 hidden，不留空档） */
.pv-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:10px 0 0}
.pv-meta[hidden]{display:none}
.pv-spu{font-size:12px;color:var(--muted);margin:0}
.pv-spu:empty{display:none}
.pv-name{font-size:12px;color:var(--muted)}
.pv-name[hidden]{display:none}
@media (max-width:480px){
  .pv-value{font-size:12px}
  .pv-value-thumb{width:24px;height:24px}
}

/* ===== B2B 内容区块扩展（20 个） ===== */
/* 与既有 .section / .section-heading / .eyebrow / .button 同风格；
   网格统一 minmax(0,1fr) + 断点收敛，320px 亦无横向溢出。 */
.sec-cards{display:grid;gap:24px}
.sec-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sec-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.sec-cards-3,.sec-cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.sec-cards-2,.sec-cards-3,.sec-cards-4{grid-template-columns:1fr}}
.sec-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px;min-width:0}
.sec-card-flush{padding:0;overflow:hidden}
.sec-card-pad{padding:20px;display:flex;flex-direction:column;gap:8px}
.sec-card h3,.sec-step h3,.sec-event h3,.sec-member h3,.sec-tl-item h3,.sec-sol h3,.sec-cat-tile h3,.sec-cert-item h3,.sec-dl-main h3{font-size:16px;font-weight:700;margin:0;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-word}
.sec-card p,.sec-step p,.sec-event p,.sec-sol p{color:var(--muted);font-size:13px;line-height:1.7;margin:0;overflow-wrap:anywhere}
.sec-card-icon{width:46px;height:46px;border-radius:10px;background:#f4f6f8;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.sec-card-icon img{width:26px;height:26px;object-fit:contain}
.sec-imgtop{width:100%;aspect-ratio:1.7;object-fit:cover;background:#eceef1;display:block}
.sec-h2{font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em;margin:16px 0 0;font-weight:800;overflow-wrap:anywhere;word-break:break-word}
.sec-lead{color:var(--muted);line-height:1.75;font-size:14px;margin:14px 0 0}
.sec-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.sec-split-rev .sec-split-media{order:2}
@media(max-width:900px){.sec-split{grid-template-columns:1fr;gap:32px}.sec-split-rev .sec-split-media{order:0}}
.sec-split-media{min-width:0}
.sec-split-media img{width:100%;height:auto;display:block;border-radius:8px;aspect-ratio:1.2;object-fit:cover;background:#eceef1}
.sec-map{width:100%;aspect-ratio:16/10;border:0;border-radius:8px;display:block;background:#eceef1}
.sec-stat-row{display:flex;flex-wrap:wrap;gap:26px 40px;margin-top:28px}
.sec-stat{min-width:0}
.sec-stat strong{display:block;font-size:34px;letter-spacing:-.03em;font-weight:800;overflow-wrap:anywhere}
.sec-stat span{font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sec-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.sec-list li{position:relative;padding-left:22px;color:var(--muted);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.sec-list li::before{content:'\2713';position:absolute;left:0;color:var(--accent);font-weight:700}
.sec-metrics{}
.sec-metric{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 22px;text-align:center;min-width:0}
.sec-metric strong{display:block;font-size:clamp(30px,3vw,44px);letter-spacing:-.04em;font-weight:800;line-height:1;overflow-wrap:anywhere}
.sec-metric span{display:block;margin-top:10px;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sec-tl{list-style:none;margin:8px 0 0 8px;padding:0;border-left:2px solid var(--line)}
.sec-tl-item{position:relative;padding:0 0 34px 30px}
.sec-tl-item:last-child{padding-bottom:0}
.sec-tl-item::before{content:'';position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #fff}
.sec-tl-year{display:block;font:600 12px 'DM Mono',monospace;letter-spacing:.06em;color:var(--accent);margin-bottom:6px}
.sec-tl-body p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.sec-quote{background:var(--ink);color:#fff}
.sec-quote-inner{max-width:820px}
.sec-quote h2{font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em;margin:16px 0 0;font-weight:800;overflow-wrap:anywhere}
.sec-quote p{color:#c4cdd7;line-height:1.7;font-size:14px;max-width:520px;margin:14px 0 0}
.sec-quote .eyebrow{color:#ffb98a}
.sec-quote-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:26px}
.sec-quote .button{margin-top:0}
.sec-quote .button-light-outline{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.sec-quote .button-light-outline:hover{background:#fff;color:var(--ink)}
.sec-quote-phone{font:600 15px 'DM Mono',monospace;letter-spacing:.02em;color:#fff;overflow-wrap:anywhere}
.sec-cat-tile{position:relative;display:flex;align-items:flex-end;min-height:210px;border-radius:8px;overflow:hidden;background:#2a3644;background-size:cover;background-position:center;color:#fff;text-decoration:none;min-width:0}
.sec-cat-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,24,34,0) 30%,rgba(16,24,34,.74) 100%)}
.sec-cat-tile-inner{position:relative;z-index:1;padding:20px}
.sec-cat-tile span{display:block;margin-top:4px;font-size:12px;color:#d5dbe2;overflow-wrap:anywhere}
.sec-slider-wrap{padding-left:0;padding-right:0}
.sec-slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 var(--gutter) 6px}
.sec-slide{position:relative;flex:0 0 min(920px,86%);min-height:380px;scroll-snap-align:start;border-radius:8px;overflow:hidden;background:#2a3644;background-size:cover;background-position:center;display:flex;align-items:center}
.sec-slide::after{content:'';position:absolute;inset:0;background:rgba(16,24,34,.5)}
.sec-slide-inner{position:relative;z-index:1;padding:44px;max-width:620px;color:#fff}
.sec-slide h2{font-size:clamp(24px,2.6vw,40px);line-height:1.08;letter-spacing:-.03em;margin:14px 0 0;font-weight:800;overflow-wrap:anywhere}
.sec-slide p{color:#e5e9ee;line-height:1.7;font-size:14px;margin:12px 0 0}
.sec-slide .eyebrow{color:#ffb98a}
.sec-slide .button{margin-top:22px}
@media(max-width:640px){.sec-slide{flex-basis:88%;min-height:300px}.sec-slide-inner{padding:26px}}
.sec-dl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sec-dl-item{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--line)}
.sec-dl-main{min-width:0}
.sec-dl-main span{display:block;margin-top:4px;font:11px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.sec-dl-item .button{margin-top:0}
.sec-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 22px 22px;min-width:0}
.sec-step-no{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font:700 15px 'DM Mono',monospace;margin-bottom:14px}
.sec-step p{margin:8px 0 0}
.sec-sol{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.sec-sol img{width:100%;aspect-ratio:1.7;object-fit:cover;display:block;background:#eceef1}
.sec-sol-body{padding:20px;display:flex;flex-direction:column;gap:6px}
.sec-sol h3{margin:0 0 2px}
.sec-sol .button{margin-top:14px}
.sec-event{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;min-width:0}
.sec-event-date{display:inline-block;font:600 11px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sec-event-meta{margin:14px 0 0;display:grid;gap:8px}
.sec-event-meta div{display:flex;gap:10px;min-width:0}
.sec-event-meta dt{color:var(--muted);font-size:12px;min-width:64px;overflow-wrap:anywhere}
.sec-event-meta dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.sec-event .button{margin-top:18px}
.sec-member{text-align:center;min-width:0}
.sec-member-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#eceef1;display:block;margin-bottom:14px}
.sec-member span{display:block;margin-top:4px;color:var(--muted);font-size:12px;letter-spacing:.02em;overflow-wrap:anywhere}
.sec-member a{display:inline-block;margin-top:8px;font-size:12px;color:var(--accent);overflow-wrap:anywhere}
.sec-logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;align-items:stretch}
@media(max-width:1100px){.sec-logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){.sec-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sec-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;color:inherit}
.sec-logo img{max-width:100%;height:44px;object-fit:contain;filter:grayscale(1);opacity:.78}
.sec-logo span{font-size:11px;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.sec-cert-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media(max-width:900px){.sec-cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sec-cert-grid{grid-template-columns:1fr}}
.sec-cert-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 16px;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:0}
.sec-cert-img{width:72px;height:72px;object-fit:contain}
.sec-cert-item p{margin:0;font-size:12px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.sec-badges-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 30px}
.sec-badge{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.sec-badge img{height:52px;max-width:100%;object-fit:contain}
.sec-badge span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.sec-compare-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.sec-compare-table th,.sec-compare-table td{border:1px solid var(--line);padding:12px;text-align:left;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
.sec-compare-table thead th{background:#f4f6f8;font-weight:700;font-size:12px;letter-spacing:.02em}
.sec-compare-table tbody th{font-weight:600;background:#fbfcfd}
.sec-contact-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.sec-contact-list li{display:flex;gap:12px;align-items:baseline;min-width:0}
.sec-contact-k{flex:0 0 84px;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sec-contact-v{overflow-wrap:anywhere;font-size:14px;min-width:0}
.sec-video-frame{max-width:960px;margin:0 auto;border-radius:8px;overflow:hidden;background:#0e1620}
.sec-video-frame iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.sec-video-poster{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.sec-video-play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.9);position:relative}
.sec-video-play::after{content:'';position:absolute;left:26px;top:20px;border-left:20px solid var(--ink);border-top:13px solid transparent;border-bottom:13px solid transparent}
/* b2b-default：默认 B2B 主题覆盖层。当前只承载「站点悬浮元素」的**主题级变量覆盖**，
   其余样式（含回到顶部 / 悬浮联系方式的默认样式）由基座 public/theme.css 提供。 */

/* 一键回到顶部：默认样式在基座 public/theme.css（客户自带主题也生效）；
   这里**只覆盖 CSS 变量**，不再抄整段 `.b2b-back-to-top` 规则
   （抄漏一份 = 换个主题按钮就没样式）。主题色取自本主题强调色。 */
:root {
  --b2b-btt-bg: var(--accent);
  --b2b-btt-bg-hover: var(--accent-dark);
}