@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 安全边距，移动端也正好是合适的边距。 */ /* ---------- 设计 token：圆角（2026-09-27） ---------- 背景：改造前**没有统一的圆角变量** —— 各主题只能在 主题样式文件 里逐条写 `border-radius`（b2b-new-birox 逐条 0、b2b-sky 逐条 12/16/24px…）。 后果：想做「13 套模板靠视觉变量表达差异」时，"每套不同的圆角"会退化成 13 份逐条覆盖。 做法：把基座里**取值恰好等于 token 的那几档**（4 / 8 / 12 / 999px）收口成变量； 其余"一次性微调"（3/6/10/14/16px、50%、`6px 0 0 6px` 这类多值）**保持字面量不动** —— 它们本来就不是一套语言的组成，硬抽只会把 token 变成杂物袋。 ★ 本批只做"收口"，**不改任何视觉**：各主题声明的 token 值 = 基座值（见各主题 主题样式文件）。 以后要让某套主题换圆角语言，只改该主题 主题样式文件 里的这几个变量即可。 ★ `--radius-btn` 单独一档：5 套 B2B 的按钮圆角本就各不相同（基座 4 / fly 2 / birox 0 / sky 999 / corp 2），是"用 token 表达差异"最有价值的一档。 */ :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));--radius-sm:4px;--radius:8px;--radius-lg:12px;--radius-pill:999px;--radius-btn:4px} *{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`：那只是把「整页可横向拖动」换成「右侧内容被直接裁掉」， 溢出还在，只是看不见了。 */ /* ---------- 站点顶栏（top bar）新组件 · 2026-09-25 ---------- 业主口径：「导航条现在的『我的账户』移动到上面去吧，现在有点挤了」+「再加个询盘链接入口」。 做法：主头部行上方加一条**细的深色条**，内容右对齐；左/中留空（没有内容就不硬塞占位）。 ★ 只放两个入口：① 我的账户（b2c-member-nav，原样复用，只换挂载位置） ② 询盘清单（指向 /inquiry-list，文案走语言包键 rfq.button） ★★ 整条由模板按「里面真有东西」判据输出（Liquid，不用 JS）—— 会员 / 询盘两个插件都关时**零 DOM**，页头外观与改造前一字不差。 ★ 与下方 .site-header 同用 var(--gutter) 内边距 ⇒ 右缘与导航/LOGO 内容区右缘对齐。 ★ 不写 overflow-x:hidden（与顶栏同一条纪律）：窄屏靠 flex-wrap 折行，绝不裁掉内容。 */ .site-topbar{background:var(--ink,#1c2733);color:rgba(255,255,255,.82);font-size:12.5px;line-height:1} .site-topbar__inner{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-height:34px;padding:5px var(--gutter);flex-wrap:wrap;row-gap:2px} .site-topbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;row-gap:4px;min-width:0} /* 两个入口共用的链接外观；hover 提亮（保证深底上的对比度足够、不刺眼） */ .site-topbar__link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:rgba(255,255,255,.82);font-weight:600;letter-spacing:.02em;padding:2px 0} .site-topbar__link:hover,.site-topbar__link:focus-visible{color:#fff} /* 询盘入口：本项**自定义配色**（业主：「颜色你自己定哦」）—— 文字用满白（比账户项更醒目），图标点缀主题强调色 `--accent`（5 套主题各自的主题色，不写死）。 为什么**不**把文字也刷成 accent：fly(#e8452c) / sky(#2f7df6) 这类中间调在深底上对比度只有 ~4:1， 不达 AA 正文标准；纯白文字 ~15:1，兼顾「够醒目」与「不刺眼」。 */ .site-topbar__link--inquiry{color:#fff} .site-topbar__link--inquiry:hover,.site-topbar__link--inquiry:focus-visible{color:var(--accent,#f26b1d)} .site-topbar__ico{flex:none;color:var(--accent,#f26b1d)} /* 两项之间的细分隔线（只在**两项都在**时由模板输出，见 5 套 主题布局模板） */ .site-topbar__sep{width:1px;height:13px;flex:none;background:rgba(255,255,255,.22)} /* 会员入口（会员导航区块模板 里那枚 .member-nav-entry）在深底上收一档字号、去掉行内留白； ★ 只覆盖**外观**，不动它任何行为（登录态分流 / 未读角标脚本照旧）。 */ .site-topbar .member-nav-entry{font-size:12.5px;padding:2px 0} .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 且**绝不重叠**。 */ /* ★★ 2026-09-24 业主返工「站点名称以后不作为 LOGO 展示，统一用图片」—— 文字 wordmark 路径**整条删除**：站名前缀色块 `.brand::before`（原橙色小方块 / 各主题的圆点、 方点覆盖）、字号 28px / 字距 -.03em / 字重 800，以及"英文站名换行"问题一并消失 （页头现在只渲染图片 LOGO，无图则整块不输出，见 主题布局模板）。 `.brand` 保留为**图片 LOGO 的布局容器**：右外边距是品牌区与导航的确定间距（见上，恒 32px）； 字体相关属性对图片无意义（图片是替换元素、不继承文字样式），故不再保留。 */ .brand{display:inline-flex;align-items:center;margin-right:32px} /* ★ 站点 LOGO 图片（站点设置 → 基本信息 → 站点 LOGO）：页头标识的**唯一来源**。 （无图时模板整块不输出 —— 这里不负责占位，也不再有"文字站名"兜底。） ★★ 2026-09-23 业主返工「logo 显示得太小 / 不会按显示器分辨率自适应」—— 根因（先量后改，本地实例 + 真浏览器实测）：旧规则 `height:40px; width:auto; max-width:220px` 把**高度写死**、且以高度定尺。横版长字标（1000×200，5:1）在 40px 高下只能摊到 200px 宽， 1920 视口里仅占页头内容宽（1400px）的 **14.3%** —— 业主看就是「缩成一团」。 修法：**不写死高度，只给上下限，由浏览器按图片原始宽高比自动定尺**。 · `width:auto; height:auto` + `max-height`：横版长图吃满高度上限； 方形图得等高正方形；竖版图等高 —— 任何宽高比都不变形、不撑破页头。 · `max-width` 是**窄屏护栏**，长图绝不顶破页头。 ★★ 2026-09-24 业主**再次**返工「LOGO 还是太小」⇒ 上限整体上调 **1.35×**（52→70px 封顶）。 实测（真浏览器，图片路径用 5:1 长字标压测，1920/1440/1366/1024/375）： 站头保持单行、导航不折行、375 视口零横向溢出（scrollWidth == innerWidth）。 */ .brand__logo{display:block;width:auto;height:auto;max-height:clamp(52px,1.8vw + 35px,70px);max-width:min(400px,68vw);object-fit:contain} /* ★ 深色页头下的 LOGO 可读性（2026-09-27）： 基座页头是**白底深字**，默认 LOGO 是一枚**纯黑字标**（透明底）—— 在把页头刷成深色的 主题上（当前只有 b2b-fly：`.site-header{background:var(--ink)}`，--ink=#101820）就是 **黑字压黑底**，实测对比度 1.17:1（远低于 3:1）。图片不继承 `color`，只能靠 filter。 ★ 为什么做成变量而不是直接写死：`本样式文件` 是 **9 套主题共享的基座**， 直接写 `filter:brightness(0) invert(1)` 会把另外 8 套**白底页头**上的黑 LOGO 一起刷白 ⇒ 白底白字，比现在还糟。所以基座只提供**默认 no-op 的开关**，由深色页头的主题自己开启： 于 `各主题的样式文件` 写 `:root{--brand-logo-filter:brightness(0) invert(1)}`。 `brightness(0)` 先把字标压成纯黑、`invert(1)` 再翻成纯白 ⇒ 深色页头上是干净的白字标。 */ .site-header .brand__logo{filter:var(--brand-logo-filter,none)} /* ★★ 2026-09-23 同一批返工「导航条文字也很小 / 不随分辨率自适应」。 旧规则把字号**写死**成 12px 主值，随后又被 701–1023 与 ≥1024 两段硬压到 11px ⇒ 1920 视口下导航仍是 11px（页头内容区却还是 1400px，看起来就"小"）。 改为 `clamp()` 随屏宽缩放：下限 11px（≤1400 视口 —— 与改前**完全相同**，零回归）、 上限 13px（≥1800 视口，比改前 +18%）。 ★ 上限为什么是 13 而不是更大（实测，不是拍脑袋）： · 页头内容区在视口 ≥1424 后**恒定 1400px**，导航可用宽度不再增长； · 本地实例真浏览器压力实测（俄语 **9 项**菜单，比业主截图多 2 项 —— 用来吃掉 "顶栏搜索/语言/货币"占的横向空间）：1920 视口下 · 本项目（default/fly/birox）：导航盒 1038px，13.5px 时内容 1019px（只剩 19px 余量）； · 本主题 13px 时内容 911px，余量 127px —— 留足余量，业主再加菜单也不会挤成两行。 宁可上限收 0.5px，也不接受"业主多填两个菜单项就折行"。 ★ 绝不使用 overflow-x:hidden 掩盖 —— 那只是把溢出藏起来，问题还在。 */ .site-header nav{display:flex;gap:28px;font-size:clamp(11px,0.5vw + 4px,13px);font-weight:600;text-transform:uppercase;letter-spacing:.08em;align-items:center;white-space:nowrap} .site-header nav a:hover{color:var(--accent)} /* 当前页导航项：由 主题布局模板 输出 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%）⇒ 本行内也让它居中（原先左贴）。 ★ 2026-09-23：原来的 `font-size:11px` 已删除 —— 基座 `.site-header nav` 的 `clamp(11px,0.5vw + 4px,13px)` 在本区间正好落在下限 11px，结果与改前**逐像素一致**； 保留硬编码反而会盖掉基座的自适应（"同一事实两个来源"）。 */ .site-header>nav{order:2;flex:0 0 100%;gap:12px;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} /* ★ 2026-09-23：原 `font-size:11px` 已删除（见上方 `.site-header nav` 的 clamp 注释）—— 本区间 ≤1400 视口时 clamp 仍取 11px（与改前一致），≥1800 视口才随屏宽长到 13px。 */ .site-header>nav{order:0;flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:center;gap:8px;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} } /* ══ 导航多级下拉（数据源 = 专辑树：`collections.parent_id`，见 服务端专辑模块）═════════ 业主口径：`Products ▾` 悬浮出三列级联分类（参考图），**按专辑树自动生成**，不让业主手填菜单。 同一份 DOM 出两种形态： · ≥701px 且 (hover:hover)：级联浮层（绝对定位 —— **不占布局宽度**，三列向右展开）； · 手机 / 无 hover 设备：手风琴（展开后在导航行内向下推，**不盖住正文、不横向溢出**）。 ★ 顶栏唯一新增的布局宽度 = 「有子级」的小三角（约 12px/项）——刻意做成 `::after` 伪元素， **不新增 DOM**；绝不用 overflow 裁切（那只是把溢出藏起来，问题还在）。 ★ 子级文字强制 `text-transform:none`：导航是 uppercase，分类名不该跟着变大写 （俄语等长词也靠 `white-space:normal` + 最大宽度换行，不撑破视口）。 */ .site-header .nav-item{position:relative;display:inline-flex;align-items:center;min-width:0} .site-header .nav-item > a{display:inline-flex;align-items:center} .site-header .nav-item--has-children > a::after{content:'';width:0;height:0;margin-left:5px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4.5px solid currentColor;opacity:.5;flex:none} .site-header .nav-item--has-children > a[aria-current="page"]::after{opacity:.85} /* 子级列表：默认关闭（display:none ⇒ 不占位、不可 Tab 到 —— 收起时不产生隐形焦点） */ .site-header .nav-sub{display:none;list-style:none;margin:0;padding:0;white-space:normal;min-width:0} .site-header .nav-sub__item{position:relative;display:block;white-space:normal;list-style:none;margin-top:8px} .site-header .nav-sub__item > a{display:inline-flex;align-items:center;text-transform:none;letter-spacing:.02em;color:inherit;text-decoration:none} .site-header .nav-sub__item--has-children > a::after{content:'';width:0;height:0;margin-left:5px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4.5px solid currentColor;opacity:.45;flex:none} .site-header .nav-item.is-open > .nav-sub, .site-header .nav-sub__item.is-open > .nav-sub, .site-header .nav-item:focus-within > .nav-sub, .site-header .nav-sub__item:focus-within > .nav-sub{display:block} /* 手机 / 无 hover 设备：手风琴。展开项独占一整行（nav 是 flex-wrap 的），子级竖直排、居中。 */ @media (max-width:700px), (hover:none){ .site-header .nav-item.is-open{flex:0 0 100%;flex-direction:column;align-items:center;row-gap:8px} .site-header .nav-sub{padding:2px 0 0;text-align:center} .site-header .nav-sub__item{margin-top:8px} .site-header .nav-sub--2,.site-header .nav-sub--3{padding-left:14px} } /* 宽屏 + 可悬浮设备：级联浮层（三列）。绝对定位 ⇒ 对既有「单行不折行」口径零宽度影响。 */ @media (min-width:701px) and (hover:hover){ .site-header .nav-sub{position:absolute;top:100%;left:-12px;display:block;min-width:210px;max-width:min(320px,42vw);padding:10px 8px;background:var(--b2b-nav-sub-bg,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 38px rgba(16,24,34,.15);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:70} /* 触发器与浮层之间的「桥」：鼠标从菜单项移到浮层不会经过空白 ⇒ 不会误关 */ .site-header .nav-sub::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px} /* 第 2 / 3 列：贴父项右侧展开（级联） */ .site-header .nav-sub--2, .site-header .nav-sub--3{top:-11px;left:100%;margin-left:6px} .site-header .nav-item:hover > .nav-sub, .site-header .nav-item:focus-within > .nav-sub, .site-header .nav-item.is-open > .nav-sub, .site-header .nav-sub__item:hover > .nav-sub, .site-header .nav-sub__item:focus-within > .nav-sub, .site-header .nav-sub__item.is-open > .nav-sub{opacity:1;visibility:visible;pointer-events:auto;transform:none} /* Esc 收起：标记由脚本加（把焦点还给触发项时 :focus-within 会立刻又成立，靠它压制） */ .site-header .nav-item--esc > .nav-sub{opacity:0 !important;visibility:hidden !important;pointer-events:none !important} .site-header .nav-sub__item{margin-top:0} .site-header .nav-sub__item > a{display:block;padding:8px 12px;border-radius:6px;font-size:13px;font-weight:500;line-height:1.35;color:var(--ink);letter-spacing:.01em} .site-header .nav-sub__item > a:hover{background:rgba(16,24,34,.05);color:var(--accent)} .site-header .nav-sub__item > a::after{content:none} /* 第 1/2 列里有下一级的项：右侧留出箭头位，箭头用绝对定位（不参与换行计算） */ .site-header .nav-sub__item--has-children > a{padding-right:30px} .site-header .nav-sub__item--has-children > a::after{content:'';position:absolute;right:12px;top:50%;margin:-4px 0 0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:0;opacity:.45} } /* ── 专辑页的「子专辑入口」（模板 专辑页模板）──────────────────────────── 父专辑页聚合了子孙商品，这里给出**进入子专辑**的显式入口（两者都做，业主口径）。 */ .sub-collections{margin:0 var(--gutter) 40px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fafbfc} .sub-collections__title{margin:0 0 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .sub-collections__list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none} .sub-collection{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:var(--radius-pill);background:#fff;color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;transition:border-color .16s ease,color .16s ease} .sub-collection:hover{border-color:var(--accent);color:var(--accent)} .sub-collection__count{font-size:11px;font-weight:500;color:var(--muted)} @media (max-width:700px){.sub-collections{margin:0 var(--gutter) 30px;padding:18px}.sub-collection{font-size:12px;padding:8px 13px}} .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:var(--radius-btn);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 灰色摘要， 用户反馈「下面为什么还有小字，排版很难看」，已整体移除（见 相关模块*.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 套主题的 主题样式文件 是「风格身份」，**刻意不动**；主题可用下面这些 `--pd-*` 变量在自己的 :root 里覆写颜色/圆角，无需重写规则。 ★ 全部规则「默认关 ⇒ 零输出」：模板在子开关关闭时不产出任何元素，所以这些类 在未开启时**不会命中任何节点**（不影响既有版式）。 ============================================================================ */ /* ① 商品角标：绝对定位在图左上角（`.card-image` 已 position:relative + overflow:hidden）； 右上角留给 `.card-arrow`，两者叠在一起会互相遮挡。 ★★ 三色必须与后台预览**逐值一致**（`后台管理界面的徽标页签组件` 的 `.bt-preview-card` 三色：默认 #1f2933 / 新品 #16a34a / 促销 #c0392b），由 `样式回归套件` 的「颜色锁」断言双向守住 —— 只改一边、另一边没跟上就当场变红。 ★ 为什么默认/促销用这两个值：它们是**前台原值**（商家与客户已经在看的样子）， 改前台属于客户可见的视觉变更；只有「新品」必须改（原先它回落默认色 ⇒ 与默认同色， 后台选「新品」看不出一丁点差别，等于「配了没反应」）。 主题若要贴自己的调色板，覆盖 `--pd-badge-*-bg` 即可，不必动规则。 */ .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,#16a34a)} .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} /* GEO 文章里的商品卡片：业主 2026-09-25「卡片太大…**就显示图片加标题就行**」 ⇒ 只留 图 + 标题、尺寸收敛。 ★ 一律挂在**专属** `.geo-media-card`（`GEO 配图模块` 注入时输出）上，**不碰** `.product-card` / `.card-image` 通用规则 ⇒ 前台商品列表、各主题商品卡**完全不受影响**（5 套主题的 主题样式文件 也不动）。 ★ 通用 `.card-image` 是正方形；正文栏 `.article-detail` 左右各 22vw padding（内宽约 56vw），1440 视口下 卡片图原来约 806×806 —— 这就是「太大」的真因。当时改成 16:9 + 宽度上限 360px； **2026-09-25 第二版业主返工为「横向卡」**（左 96px 方图 + 右标题、不带价格），见下方 `.geo-media-card` 段。 ★ 卡片注入在文章 `
` 内，故卡内 `` 会吃到下方 `.body-html img{…height:auto; margin:18px 0…}`。这里用特异性更高的 `.geo-media-card .card-image img`(0,2,1) **压过**它(0,1,1)： `height:100%` 修「图与方框不贴合」，`margin:0` 修「绝对定位图被 18px 外边距顶出 18px 缝」。 */ /* ★★ 2026-09-25 业主返工（第二版）：「卡片改成**横向卡**，照我给的截图那样（左图 + 右标题）， **但不显示价格**」—— 沿用站上「B2B 不展示价格」口径，所以这里**没有价格行、没有平台名、没有简介**。 ★ 为什么要改版式：上一版是「图上一个 360px 窄卡」（`max-width:360px` + `aspect-ratio:16/9`）， 业主看过实效果后要求改成横向紧凑卡（与京东商品卡同构，但去掉价格）。 ★ 不动 HTML 结构：卡片标记仍是 `

标题

`（见 `服务端 GEO 配图模块`）⇒ **纯 CSS 换版式**， 因此同一个类将来用在**博客正文**里也会自动是同一张卡，不必两处各写一套。 ★ 与容器无关：刻意**不依赖** `.article-detail` 等祖先选择器（博客正文与文章正文的容器不同）。 ★ 回退点（改前值）：`.geo-media-card{max-width:360px;margin:0 0 28px}` / `.card-image{aspect-ratio:16/9;border-radius:var(--radius-sm)}` / `h3{font-size:15px;margin-top:8px}`。 */ .geo-media-card{ display:flex;align-items:flex-start;gap:12px; max-width:560px;margin:0 0 28px; } /* 缩略图：96px 方图。`.card-image` 通用规则是 1:1 + `background-size:cover`，这里只收宽度与圆角 */ .geo-media-card .card-image{flex:0 0 96px;width:96px;aspect-ratio:1;border-radius:6px} /* ★ 必须保留：压过 `.body-html img{margin:18px 0}`（否则图被 18px 外边距顶出缝） */ .geo-media-card .card-image img{height:100%;margin:0} /* 标题：14px、两行截断。与 `.product-card h3` 同特异性(0,1,1)但**在本文件更靠后** ⇒ 由本规则生效 */ .geo-media-card h3{ flex:1 1 auto;min-width:0;margin:0; font-size:14px;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* ★★ 2026-09-25 业主返工「GEO 文章里的商品卡片不要 hover 上浮」—— 根因：GEO 卡片复用 `.product-card`（``，见 服务端 GEO 配图模块） ⇒ 被基座 `.product-card:hover .card-image{transform:translateY(-5px)}`（上方第 276 行）连带命中； 3 套主题自带的 `.product-card:hover{transform:…}`（fly / new-birox 带位移）还会把**整卡**顶起。 修法：**只对专属 `.geo-media-card` 取消位移**，绝不动 `.product-card` / `.card-image` 通用规则 （红线：前台商品列表与各主题商品卡的观感必须**保持原样**）。 ★ 为什么把类名写两遍（`.geo-media-card.geo-media-card`）= 刻意提高特异性： · 要压过基座 `.product-card:hover .card-image`(0,3,0) ⇒ 本规则取 (0,4,0)； · 还要压过**主题覆盖层**的 `.product-card:hover{transform:…}`(0,2,0) —— 主题 CSS 在基座之后加载， 同特异性时主题赢，故必须抬到 (0,3,0) 才能**写在基座、5 套主题一次生效** （与仓库既有纪律一致：不逐主题抄一份，"抄漏一套 = 换个主题就复原"）。 ★ 只取消 transform（位移/上浮）；主题的 box-shadow 变化不属于「上浮」，一律保留不动。 */ .geo-media-card.geo-media-card:hover{transform:none} .geo-media-card.geo-media-card:hover .card-image{transform:none} /* ③ 描述装修：按块排版的容器（默认不产出；原富文本口径保持不变） */ .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 子项， 默认 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 套主题 `主题布局模板` 内 @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)} /* ★★ 专辑/全部商品页的「专辑筛选条」（插件 collection-list-plus）。 模板用的是 `.collection-filter` / `__list` / `__item`（见 专辑页模板）， 但**这三个类从来没有样式** ⇒ 页面上就是一排没样式的链接、与下面的商品网格挤在一起 （业主截图实证：「前端还是一样，没有样式，排版还是错乱的」）。 ⇒ 这里按站点既有视觉补：横向胶囊条、可横向滚动、命中项高亮、窄屏不溢出。 */ .collection-filter{margin:0 var(--gutter,24px) 28px} .collection-filter__list{ display:flex;flex-wrap:wrap;gap:10px;align-items:center; } .collection-filter__item{ display:inline-flex;align-items:center;height:38px;padding:0 18px; border:1px solid var(--line,#e7e8ea);border-radius:var(--radius-pill);background:#fff; color:var(--ink,#1c2733);font-size:14px;line-height:1;text-decoration:none; white-space:nowrap;transition:border-color .18s,background .18s,color .18s; } .collection-filter__item:hover{border-color:var(--accent);color:var(--accent)} .collection-filter__item.is-active{ background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600; } @media(max-width:700px){ /* 窄屏：横向滚动而不是换行挤压（与站点其它 pills 条一致） */ .collection-filter{margin-left:var(--gutter,16px);margin-right:0} .collection-filter__list{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px} .collection-filter__item{flex:0 0 auto} } .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:var(--radius-sm);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:var(--radius-sm)} .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 行 —— 分页链接的生成逻辑（服务端路由层）不属本文件，一字不动。 */ .pagination-wrap{display:flex;justify-content:center;padding:0 var(--gutter) 64px} /* ★ 件① 翻页条「上移」（业主「下一页太靠下了…在上面一点」）： .article-list 的通用底部 padding 是 110px，它同时也是首页 insights 区块在用 —— **不能改通用值**（会波及首页）。这里只用**相邻兄弟**选择器：当翻页条紧跟在文章列表之后 （文章列表区块模板 的 ``+`