@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}
/* ★★ 2026-09-28（业主本轮点名「导航条文字太小、LOGO 也太小，看看人家的」）：
   导航项 12px→15px、字重 600→700、项距 28px→34px；品牌字（本站 LOGO 是「橙块 + 品牌字」，
   没有独立图片 logo）21px→28px、橙块 12px→17px；页头高度 72px→88px。
   只改官网这一站；B2B / B2C 两站的样式表不在本文件里。 */
.site-header{min-height:88px;padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:60}
.brand{font-weight:800;letter-spacing:-.03em;font-size:28px;display:inline-flex;align-items:center;gap:11px}
.brand::before{content:'';width:17px;height:17px;background:var(--accent);border-radius:4px;display:inline-block}
.site-header nav{display:flex;gap:34px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;align-items:center}
/* 中屏（窄桌面 / 平板横屏）：品牌字 28px + 5 项 15px 导航会挤出 1400 容器，
   按比例收一档（仍是 13.5px，明显大于改动前的 12px）；再窄由 ≤700px 的块级版式接管。 */
@media(max-width:1100px){
  .site-header{min-height:80px}
  .brand{font-size:25px}
  .brand::before{width:15px;height:15px}
  .site-header nav{gap:22px;font-size:13.5px}
}
.site-header nav a:hover{color:var(--accent)}
/* 当前页导航项：由 layout/theme.liquid 输出 aria-current="page" */
.site-header nav a[aria-current="page"]{color:var(--accent)}
.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}
/* 特性图片网格（参考站 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)}
.collection-name{font-size:25px;letter-spacing:-.02em;font-weight:700}
.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}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.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)}
/* =========================================================================
   博客详情页（2026-09-15 版式重做）。
   ★ 重做的主因：`.body-html` 在这之前**一条样式都没有** —— 正文里的 h2 / 表格 / 列表
     全走浏览器默认长相，所以再好的内容看起来也"不大气"。这里补上完整排版。
   ★ 版式：左右两栏 = 目录（sticky）+ 正文；没有目录时（article_toc 为空）
     模板会给 .article-layout 加 .is-single，退化成单栏。
   ========================================================================= */
.article-detail{padding:45px var(--gutter) 110px;max-width:1160px;margin:0 auto}
.article-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.article-crumbs a{color:inherit;border-bottom:1px solid transparent}
.article-crumbs a:hover{border-bottom-color:currentColor}
.crumb-current{color:var(--ink)}
/* 与商品面包屑的 .breadcrumb .sep 保持一致的分隔符色 */
.article-crumbs .crumb-sep{color:#c9d1d9}
/* 标题区给到整栏宽（1160 容器 = 1112 内容），正文列仍是 820 —— 标题比正文更宽，
   20 字左右的中文标题能**一行放得下**。中文没有词边界，行尾断在「结/构」这种字中间
   靠 text-wrap:balance 治不了（它只均分行长），唯一的解法是别让它折行。 */
.article-header{margin:26px 0 0}
.article-header h1{font-size:clamp(32px,3.9vw,52px);line-height:1.06;letter-spacing:-.025em;margin:18px 0 20px;font-weight:800;text-wrap:balance}
.article-header .lead{color:var(--muted);font-size:17px;line-height:1.7;margin:0;max-width:820px;text-wrap:pretty}
.article-meta{display:flex;align-items:center;gap:12px;margin-top:22px;font:11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.meta-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.article-cover{margin:38px 0 0}
.article-cover img{width:100%;height:auto;display:block;background:#eceef1}
.article-layout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:64px;margin-top:52px;align-items:start}
.article-layout.is-single{grid-template-columns:minmax(0,1fr);max-width:820px}
/* 无小标题的文章（TOC 为空）：单栏 820 居中，免得在 1160 容器里偏左压出一片空 */
.article-detail.is-single .article-header,
.article-detail.is-single .article-layout,
.article-detail.is-single .article-cover{max-width:820px;margin-left:auto;margin-right:auto}
.article-toc{position:sticky;top:96px;border-left:2px solid var(--line);padding-left:20px}
.toc-title{margin:0 0 14px;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.toc-item a{font-size:13px;line-height:1.5;color:var(--muted);border-bottom:1px solid transparent}
.toc-item a:hover{color:var(--ink);border-bottom-color:var(--line)}
.toc-level-3{padding-left:14px}
.toc-level-3 a{font-size:12.5px}
/* ★ 这里必须显式写 background / padding / color：模板元素是 <footer>，
   而 theme.css 顶部有一条裸元素规则 `footer{background:var(--footer-bg);color:#b9c3cd;
   padding:64px var(--gutter) 0}` —— 类选择器只覆盖「我声明过的属性」，
   没声明的会从裸元素规则漏进来，结果就是文章底部被染成深色导航条、
   左右被 gutter 撑开、下内边距为 0，且 .back-link 的 #6f7a85 压在 #1e2b38 上看不见。
   （教训：新模板里用 <footer>/<nav> 这类可能被裸元素选择器命中的标签时，兜底属性要写全。） */
.article-foot{background:transparent;color:var(--ink);padding:32px 0 0;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:64px;border-top:1px solid var(--line)}
.article-foot .back-link{font-size:13px;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line);padding-bottom:2px}
.article-foot .back-link:hover{border-bottom-color:var(--ink)}
/* .button 自带 margin-top:25px（为块级 CTA 设计），放进 flex 行里必须归零 */
.article-cta{text-decoration:none;margin-top:0}

/* ---------- 正文排版 ---------- */
/* 820px 行宽 = 与 .article-header 同一把尺子；中文约 50 字/行，
   再宽就不是"大气"而是"费眼"了（表格走 100% 仍能铺满列宽）。 */
.body-html{font-size:16.5px;line-height:1.82;color:var(--ink);max-width:820px}
.body-html > *:first-child{margin-top:0}
.body-html p{margin:0 0 22px}
.body-html h2{font-size:clamp(24px,2.4vw,32px);line-height:1.22;letter-spacing:-.02em;font-weight:800;margin:52px 0 18px;padding-top:26px;border-top:1px solid var(--line);scroll-margin-top:96px}
.body-html h3{font-size:20px;line-height:1.32;letter-spacing:-.01em;font-weight:700;margin:36px 0 14px;scroll-margin-top:96px}
.body-html ul,.body-html ol{margin:0 0 22px;padding-left:22px}
.body-html li{margin-bottom:9px}
.body-html li > ul,.body-html li > ol{margin-top:9px;margin-bottom:0}
.body-html strong{font-weight:700}
.body-html em{font-style:italic}
.body-html a{color:var(--ink);border-bottom:1px solid var(--accent)}
.body-html blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);color:var(--muted)}
.body-html code{font:13px 'DM Mono',monospace;background:#f2f5f8;padding:2px 6px;border-radius:3px}
.body-html pre{margin:0 0 22px;padding:18px;background:#f7f9fb;border:1px solid var(--line);overflow-x:auto}
.body-html pre code{background:transparent;padding:0}
.body-html img{max-width:100%;height:auto;display:block;margin:26px 0}
.body-html hr{border:0;border-top:1px solid var(--line);margin:44px 0}
/* 表格：GEO 文章大量用表格，必须像样（表头底色 + 斑马纹 + 单元格够松） */
.body-html table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:14.5px}
.body-html th,.body-html td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top;line-height:1.6}
.body-html thead th{background:#f7f9fb;font-weight:700;font-size:13px;letter-spacing:.02em}
.body-html tbody tr:nth-child(even){background:#fafbfc}
/* dl/dt/dd 同样有裸元素规则（dl{margin:0 0 35px;border-top:1px solid var(--line)}，
   那是商品参数区的样式）；正文里也显式接管，免得顶部莫名多一条横线。 */
.body-html dl{margin:0 0 22px;border-top:0}
.body-html dt{font-weight:700;margin-top:14px}
.body-html dd{margin:0 0 6px;padding-left:0;text-align:left;color:var(--muted)}
.body-html figcaption{font-size:13px;color:var(--muted);text-align:center;margin:-14px 0 26px}
@media(max-width:1000px){.article-layout{grid-template-columns:minmax(0,1fr);gap:40px}.article-toc{position:static;border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.article-detail{padding-top:30px}}
@media(max-width:700px){.body-html table{display:block;overflow-x:auto;white-space:nowrap}.body-html{font-size:16px}.article-foot{flex-direction:column;align-items:flex-start}}

/* 静态页正文：原来写的是 `padding:0 22vw 110px` —— 而上面的 .page-intro 用的是 --gutter，
   同一页里标题和正文的左边缘因此对不上（1440 下差 293px），这是"看起来散"的主因之一。
   统一到 --gutter，正文再靠 .body-html 的 820 上限收行宽。 */
.page-body{padding:0 var(--gutter) 110px}
.page-body > .body-html{max-width:820px}
.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)}
.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)}
.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)}
@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}}
@media(max-width:700px){.site-header{padding:0 6vw;height:auto;padding-top:18px;padding-bottom:18px;display:block;position:static}.brand{font-size:25px}.brand::before{width:15px;height:15px}.site-header nav{gap:18px;font-size:13px;margin-top:15px;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}.site-header .brand__logo{max-width:100%;max-height:clamp(28px,7vw + 14px,40px)}}
.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}
.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:24px}
.lang-switch-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.lang-switch select{border:1px solid var(--line);background:#fff;color:var(--ink);font:600 13px/1.2 inherit;padding:8px 11px;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)}
@media (max-width:820px){.site-header .lang-switch{margin-left:10px}.site-header .lang-switch-label{display:none}}

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

/* 详情页价格。
   ★ 库里只存基准货币（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)}
.currency-note{margin:10px 0 0;font-size:11px;color:rgba(255,255,255,.45)}
@media (max-width:700px){.price-now{font-size:28px}}

/* ==========================================================================
   Phase 2-C · 官网首页改版（软件产品官网视觉）
   新增：深色首屏 / 数字条 / 双卡对比 / 定价表
   原则：只追加，不改上面既有规则 —— 内页（商品、文章、询价）不受影响。
   ========================================================================== */

/* ---------- 深色首屏 ----------
   为什么不用背景图：卖的是软件，不是工厂。深色渐变 + 橙色光晕 + 细网格底纹
   比一张 stock 图更能表达"技术产品"，而且**零外部请求**（不依赖 Unsplash，
   断网/被墙也不会开天窗）。 */
.hero-dark{
  position:relative;
  padding:118px var(--gutter) 104px;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(880px 520px at 80% 6%, rgba(242,107,29,.30) 0%, rgba(242,107,29,0) 64%),
    radial-gradient(620px 460px at 4% 96%, rgba(64,124,190,.24) 0%, rgba(64,124,190,0) 66%),
    linear-gradient(140deg,#0d151d 0%,#16212d 48%,#1f2f42 100%);
}
/* 细网格底纹：给大色块一点"工程感"的秩序，边缘用遮罩淡出以免显脏 */
.hero-dark::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000 0%,transparent 100%);
  mask-image:radial-gradient(72% 62% at 50% 42%,#000 0%,transparent 100%);
}
.hero-dark>*{position:relative;z-index:1}
.hero-dark .eyebrow{color:#ffb98a}
.hero-dark h1{
  color:#fff;
  font-size:clamp(36px,4.4vw,64px);
  line-height:1.06;
  letter-spacing:-.035em;
  max-width:900px;
  margin:26px 0 0;
}
/* 深色底上的强调行：用橙色高亮而不是斜体衬线（衬线在深色上显得软） */
.hero-dark h1 em{font-style:normal;color:#ff9d5c}
.hero-dark .hero-copy{color:#aebbc9;max-width:600px;font-size:16px;line-height:1.85;margin:26px 0 0}
/* 信任小字：等宽字体 + 大写，像技术规格书上的那行参数 */
.hero-trust{margin:32px 0 0;font:500 11.5px 'DM Mono',monospace;letter-spacing:.07em;color:#7f8fa0;text-transform:uppercase;line-height:1.9}

/* 首屏按钮组：
   .button 自带 margin-top:25px（为旧版单按钮的纵向节奏设的），进了 flex 行必须归零，
   否则两个按钮在行内会各自往下沉 25px（`.detail-actions` 踩过同一个坑）。 */
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:38px}
.hero-actions .button{margin-top:0}
/* 描边按钮：深色底上的第二 CTA。用 box-shadow 内描边而不是 border，
   这样 hover 的时候按钮尺寸不会因为边框占位而变化。 */
.button-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.button-ghost:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}

/* ---------- 数字条 ---------- */
.section-stats{padding:0 var(--gutter)}
.stats-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-item{padding:40px 28px;border-right:1px solid var(--line);min-width:0}
.stat-item:last-child{border-right:0}
.stat-item strong{display:block;font-size:clamp(30px,3vw,44px);letter-spacing:-.045em;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat-item strong em{font-style:normal;font-size:.46em;letter-spacing:-.01em;color:var(--accent);margin-left:3px;font-weight:700}
.stat-item span{display:block;margin-top:13px;font:500 11.5px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);line-height:1.6}

/* ---------- 双卡对比 ---------- */
.section-duo{background:#f4f6f8}
.duo-head-copy{max-width:520px;text-align:right}
.duo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.duo-card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:44px 40px 40px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.duo-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(28,39,51,.10)}
/* 顶部橙色渐变条：两张卡各有一条，作为"这是重点区"的视觉标记 */
.duo-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent) 0%,#ffb98a 100%)}
.duo-num{font:500 12px 'DM Mono',monospace;letter-spacing:.16em;color:var(--accent)}
.duo-card h3{font-size:clamp(24px,2.3vw,31px);letter-spacing:-.03em;margin:16px 0 10px;font-weight:800}
.duo-sub{font-size:15.5px;font-weight:600;line-height:1.6;margin:0 0 18px;color:var(--ink)}
.duo-body{color:var(--muted);font-size:14px;line-height:1.8;margin:0}
.duo-points{list-style:none;padding:24px 0 0;margin:26px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.duo-points li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.6;color:#3d4854}
.duo-points li::before{content:'';position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.duo-link{display:inline-block;margin-top:26px}

/* ---------- 定价表 ---------- */
.section-pricing{background:#fff}
.pricing-head-copy{max-width:460px;text-align:right}
.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:38px 30px 32px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.plan:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(28,39,51,.10)}
/* 高亮档：橙色描边 + 暖投影。不做"放大一圈"——四列网格里放大一格会让
   基线全部错位，看起来是没对齐而不是"推荐"。 */
.plan-featured{border-color:var(--accent);box-shadow:0 20px 48px rgba(242,107,29,.15)}
.plan-badge{
  position:absolute;right:22px;top:-11px;
  background:var(--accent);color:#fff;border-radius:99px;
  font:600 10.5px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;
}
.plan-name{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0}
/* 固定最小高度：四档的"适合谁"字数不同，不固定会让价格行的起始位置参差 */
.plan-for{color:var(--muted);font-size:12.5px;line-height:1.65;margin:9px 0 0;min-height:42px}
.plan-price{display:flex;align-items:baseline;gap:5px;margin:22px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line)}
.plan-price .cur{font-size:16px;font-weight:700}
.plan-price .num{font-size:40px;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.plan-price .per{font-size:12px;color:var(--muted)}
.plan-feats{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px;align-content:start;flex:1}
.plan-feats li{position:relative;padding-left:22px;font-size:13px;line-height:1.6;color:#3d4854}
.plan-feats li::before{content:'\2713';position:absolute;left:1px;top:0;color:var(--accent);font-weight:800;font-size:11.5px}
/* 「不含」项：灰显 + 短横，跟打勾项形成明确对比（不用红叉，太吵） */
.plan-feats li.is-off{color:#a8b0b8}
.plan-feats li.is-off::before{content:'\2013';color:#c2c9d0;left:2px}
.plan .button{width:100%;justify-content:center;margin-top:28px}
.plan-more{text-align:center;margin:28px 0 0;font-size:13px;color:var(--muted);line-height:1.7}

/* ---------- 新板块的响应式 ---------- */
@media(max-width:1100px){
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .plan-for{min-height:0}
}
@media(max-width:900px){
  .hero-dark{padding:88px var(--gutter) 76px;min-height:0}
  .duo-grid{grid-template-columns:1fr}
  .duo-head-copy,.pricing-head-copy{text-align:left;max-width:560px}
  .stats-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-item:nth-child(2n){border-right:0}
  .stat-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:640px){
  .pricing-grid{grid-template-columns:1fr}
  .duo-card{padding:34px 26px 30px}
  .plan{padding:32px 24px 28px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .button{justify-content:center}
}
/* 无配图的能力卡（软件官网的能力墙）：一条顶线 + hover 变橙。
   避免 8 张纯文字卡在页面上"飘着"，同时给鼠标一个明确的落点。 */
.feature-grid .feature-card{border-top:2px solid var(--line);padding-top:18px;transition:border-color .2s}
.feature-grid .feature-card:hover{border-top-color:var(--accent)}

/* ============================================================
   分页（博客列表页 / 文章列表区块共用）
   ★ 用 **真实链接**（`?page=N`）而不是 JS 翻页：
     ① 爬虫能顺着链接爬到第 2 页之后的内容（JS 翻页对 SEO 等于没有第 2 页）；
     ② 关掉 JS 也能用；
     ③ 与语言/货币切换器同一个"参数 + 表单"的朴素做法，保持一致。
   ============================================================ */
.pager{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:38px var(--gutter) 0;padding-top:24px;border-top:1px solid var(--line);font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em}
.pager-count{color:var(--muted);white-space:nowrap}
.pager-sep{margin:0 6px;opacity:.5}
.pager-pages{display:flex;align-items:center;gap:6px}
.pager-num{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;color:var(--ink);text-decoration:none;padding:0 8px}
a.pager-num:hover{border-color:var(--accent);color:var(--accent)}
.pager-num.is-current{background:var(--ink);border-color:var(--ink);color:#fff}
.pager-gap{min-width:32px;text-align:center;color:var(--muted)}
.pager-nav{display:flex;align-items:center;gap:12px;white-space:nowrap}
.pager-step{color:var(--ink);text-decoration:none}
a.pager-step:hover{color:var(--accent)}
.pager-step.is-disabled{opacity:.35;pointer-events:none}
@media(max-width:700px){.pager{flex-direction:column;align-items:flex-start;gap:14px}.pager-nav{order:2}.pager-pages{order:1}}

/* 套餐价的"按汇率折算，仅供参考"：换货币才出现，跟着价签走，别喧宾夺主 */
.plan-fx{margin:7px 0 0;font:11px 'DM Mono',monospace;color:var(--muted);letter-spacing:.02em}

/* ============================================================
   从右往左（RTL）基础适配
   ★ 存在的理由：多语言改成「可自助添加语言」后，阿拉伯语 / 希伯来语 / 波斯语 / 乌尔都语
     都在可选目录里，它们**本来就从右往左写**。只挂一个 `dir="rtl"` 而不做镜像，
     得到的是"文字从右到左、版面还按左到右摆"的半成品 —— 那还不如不提供这些语言。
   ★ 分工：**能自动镜像的不管**（flex / grid 的行内轴会跟着 `direction` 翻，
     文字对齐也会翻），这里只处理 CSS 里**写死了物理方向**的地方
     （`left:` / `right:` / `padding-left` / `border-left` / `text-align:right`）。
   ⚠️ 这是**基础适配**，不是逐组件精修：长文案在 RTL 下仍可能有换行位置不理想的地方，
     真要用 RTL 语种上线，建议再按目标语言过一遍视觉。
   ============================================================ */
[dir="rtl"] .card-arrow{right:auto;left:15px}
[dir="rtl"] .hero-stat{right:auto;left:var(--gutter)}
[dir="rtl"] .hero-banner .hero-stat{left:auto}
[dir="rtl"] .announcement-close{right:auto;left:var(--gutter)}
[dir="rtl"] .plan-badge{right:auto;left:22px}
[dir="rtl"] .lang-switch{margin-left:0;margin-right:22px}
[dir="rtl"] .collection-arrow,
[dir="rtl"] .article-arrow,
[dir="rtl"] .duo-head-copy,
[dir="rtl"] .pricing-head-copy{text-align:left}
[dir="rtl"] .spec-table dd,
[dir="rtl"] dd{text-align:left}
[dir="rtl"] .spec-bullets li,
[dir="rtl"] .duo-points li,
[dir="rtl"] .plan-feats li{padding-left:0;padding-right:22px}
[dir="rtl"] .spec-bullets li::before,
[dir="rtl"] .duo-points li::before,
[dir="rtl"] .plan-feats li::before{left:auto;right:1px}
[dir="rtl"] .plan-feats li.is-off::before{left:auto;right:2px}
[dir="rtl"] .article-toc{border-left:0;border-right:2px solid var(--line);padding-left:0;padding-right:20px}
[dir="rtl"] .toc-level-3{padding-left:0;padding-right:14px}
[dir="rtl"] .body-html ul,
[dir="rtl"] .body-html ol{padding-left:0;padding-right:22px}
[dir="rtl"] .body-html blockquote{padding:4px 22px 4px 0;border-left:0;border-right:3px solid var(--accent)}
[dir="rtl"] .body-html th,
[dir="rtl"] .body-html td{text-align:right}
[dir="rtl"] .body-html dd{padding-right:0;text-align:right}
[dir="rtl"] .stat-item{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .stat-item:last-child{border-left:0}
[dir="rtl"] .stat-item strong em{margin-left:0;margin-right:3px}
[dir="rtl"] .banner::after{background:linear-gradient(270deg,rgba(16,24,34,.72) 0%,rgba(16,24,34,.28) 70%,rgba(16,24,34,.1) 100%)}
@media(max-width:900px){
  [dir="rtl"] .stat-item:nth-child(2n){border-left:0}
}
@media(max-width:820px){
  [dir="rtl"] .site-header .lang-switch{margin-right:10px}
}

/* ============================================================
   定价区「更多」折叠 + 「详细版本对比」入口（2026-09-28 业主本轮点名）
   · 首页原来把「加购：B2B 批发商城升级包」整段平铺在四档方案下面，业主希望它
     **默认收起**，四档下方只留一个「更多」按钮，点开才看。
   · 实现走**原生 <details>/<summary>**：无 JS 也能展开（渐进增强），
     且折叠内容**仍在 HTML 里**（爬虫读得到）——CSS 折叠，不是服务端不渲染。
   · 样式沿用既有变量/类名体系（--line / --accent / --ink / .button），不引入新框架。
   ============================================================ */
/* 折叠区块紧贴上方四档：上内边距归零（下内边距仍是 .section 的 72px） */
.section-pricing-more{padding-top:0}
.pricing-more{margin:0}
/* summary 去掉默认三角，做成一条通栏的「更多」按钮 */
.pricing-more-summary{
  list-style:none;cursor:pointer;width:100%;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:18px 24px;background:#fff;border:1px solid var(--line);border-radius:8px;
  font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  transition:border-color .2s,color .2s,box-shadow .2s;
}
.pricing-more-summary::-webkit-details-marker{display:none}
.pricing-more-summary:hover{border-color:var(--accent);color:var(--accent)}
.pricing-more[open] .pricing-more-summary{border-color:var(--accent);box-shadow:0 12px 30px rgba(28,39,51,.07)}
/* 折叠按钮旁的小字：等宽大写，跟站点其它「参数行」同一语言 */
.pricing-more-hint{font:500 11.5px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500}
/* 开合指示：纯 CSS 画的箭头，展开时翻 180° */
.pricing-more-caret{
  width:9px;height:9px;margin-top:-4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;
}
.pricing-more[open] .pricing-more-caret{transform:rotate(-135deg);margin-top:4px}
.pricing-more-body{padding-top:56px}
/* 版本对比入口：四档下方 / 折叠面板下方的醒目按钮 */
.pricing-compare{display:flex;justify-content:center;margin-top:30px}
.pricing-compare .button{margin-top:0}
@media(max-width:640px){
  .pricing-more-summary{font-size:14px;padding:16px 18px;gap:9px}
  .pricing-more-body{padding-top:38px}
}

/* 宽表页（自定义页面正文里带 <table>，如「版本对比」）：正文列 820px 装不下 6 列，
   含表格时把正文列放宽到整栏（--gutter 仍保证左右边距）。无 :has() 的旧浏览器
   退化为原来的 820px —— 表格自动横滚，不会破版。 */
.page-body > .body-html:has(table){max-width:none}

/* ============================================================
   模板预览页（自定义页面 /pages/templates 的正文）：18 张模板卡网格（2026-09-28）
   · 正文结构由站点建页接口写进 pages.body_html：
       <h2>一组</h2><div>  ← 一组（组容器）
           <div><a href="整页大图"><img src="卡片图" …></a><p><strong>名称</strong></p><p>一句话风格</p><p>预览 · 选用</p></div>
       …</div>
   · ★★ **认页方式 = `:has(img[src^="/img/demo/tpl-"])`，不给正文加 class、不改任何模板。**
     原因：正文走净化白名单（src/core/html.js 的 ALLOWED_ATTRS 只放
     `a[href|title]` / `img[src|alt|width|height]`）—— `class` / `style` / `id` / `target`
     **全部会被剥掉**，所以定位只能靠结构与 `src` 前缀。
     兼容口径与上方 :658「宽表页」一致：无 `:has()` 的旧浏览器退化为单列堆叠，不破版。
   · 图：`public/img/demo/tpl-<主题>.jpg` = 卡片图（1200×750，8:5）；
     点开的整页大图是同目录 `-full.jpg`（1280×2400）。两者同名不同后缀 ⇒ 换图只覆盖文件即可。
   ============================================================ */
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]){max-width:none}
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin:0 0 34px
}
/* 单张卡 */
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div > div{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:box-shadow .18s,border-color .18s
}
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div > div:hover{
  border-color:#d7dbe0;box-shadow:0 10px 26px -12px rgba(16,24,40,.22)
}
/* 图片链接：不是「正文链接」，去下划线；行高归零消掉图片下方的基线缝 */
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div > div > a{display:block;border-bottom:0;line-height:0}
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div > div img{
  width:100%;height:auto;margin:0;border-radius:0;border-bottom:1px solid var(--line);
  aspect-ratio:1200/750;object-fit:cover;object-position:top
}
/* 卡内三行：名称 / 一句话风格 / 预览·选用 */
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div > div p{
  margin:0;padding:0 16px;font-size:14px;line-height:1.6;color:var(--muted)
}
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div > div p:first-of-type{
  padding-top:14px;font-size:15.5px;color:var(--ink)
}
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div > div p:last-of-type{
  padding-top:10px;padding-bottom:16px;margin-top:auto
}
section.page-body > .body-html:has(img[src^="/img/demo/tpl-"]) > div > div p:last-of-type a{
  color:var(--accent-dark);border-bottom:1px solid rgba(242,107,29,.35);font-weight:600
}

/* ============================================================
   页头 LOGO 图片化（2026-09-28 业主「LOGO 全部用图片」）
   · 页头品牌位渲染 <img class="brand__logo">，见 themes/b2b-default/layout/theme.liquid。
   · 资源：public/img/brand/keyone-wordmark.png（290×79，按墨迹紧裁，宽高比 3.671）。
     ★ 原图 300×300 正方形、墨迹只占中间一条（上下各 ~110px 空白），若按 max-height
     缩放，可见字标会被空白摊薄到只剩 1/4 —— 所以必须先紧裁再定尺寸。
   · 尺寸带（实测口径，2026-09-28 业主复核）：
     桌面 1440 可见字标 ~169×46（旧文字标整块 186.8×38）＝「大一点」而不是翻倍；
     窄屏 ≤700 另有护栏（见上方媒体查询），390 下可见 ~147×40，四档均无横向溢出。
   ============================================================ */
.brand__logo{display:block;width:auto;height:auto;max-height:clamp(36px,1.6vw + 23px,46px);max-width:min(400px,68vw);object-fit:contain}
/* 深色页头下的可读性开关（基座默认 no-op，官网白底页头不受影响） */
.site-header .brand__logo{filter:var(--brand-logo-filter,none)}
/* 图片态下抑制文字态那个橙色方块（.brand::before），否则图片旁会多一个方块 */
.brand--logo::before{display:none}

/* ============================================================
   手机端折叠导航（2026-09-28 业主口径 A：结构与 B2B / B2C 手机端一致）
   —— ≤700px 顶部栏只留「汉堡（左）+ LOGO（居中）」；导航与语言/货币切换全部
      收进左侧折叠抽屉（抽屉顶部关闭按钮 + 右侧遮罩，点遮罩也关闭）。
   ★★ 桌面（>700px）**零变化**：下列类名全部是**新增**的，>700px 一律 display:none；
      所有位移/显隐都写在 @media (max-width:700px) 内 ⇒ 桌面端一个像素都不动，
      且不改动任何现存桌面规则（只新增规则 + 新增节点）。
   ★ 纯 CSS 开合（隐藏 checkbox + 两个 <label>）⇒ **无 JS 也能开/关**（键盘可操作那个
      视觉隐藏的 checkbox）；JS 只做渐进增强（同步 aria-expanded / Esc 关闭 / 锁背景滚动）。
   ★ 抽屉实现：让 header 自身在打开态变成「左侧面板」—— 它的 nav / lang-switch 天然就是
      抽屉内容 ⇒ 不搬 DOM、也不复制任何导航标记（避免"两份菜单"漂移）。
   ★ 语言 / 货币切换的 `<form action>` **一字不动**（只换显隐位置）—— 保持干净路径，
      否则 `<noscript>` 切语言会失效（既有铁律）。
   ============================================================ */
.mobile-nav-state,.mobile-nav-toggle,.mobile-nav-close,.mobile-nav-backdrop{display:none}

@media(max-width:700px){
  /* ── 顶部栏：汉堡 · LOGO（居中） ── */
  header.site-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;padding:10px 5vw;height:auto;min-height:0;position:relative}
  .mobile-nav-state{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}
  .mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;cursor:pointer;color:inherit;border-radius:4px;-webkit-tap-highlight-color:transparent}
  .mobile-nav-toggle:active{background:rgba(127,127,127,.16)}
  /* 键盘聚焦那个视觉隐藏的 checkbox 时，把焦点环画在汉堡上（否则"看不见焦点"） */
  .mobile-nav-state:focus-visible ~ .site-header .mobile-nav-toggle{outline:2px solid var(--accent);outline-offset:2px}
  /* ★ 业主原话「LOGO 在中间」：把品牌区**绝对定位到顶栏水平中线**，而不是让它在 flex 行里
     "伸缩占满剩余宽度"（那样会停在汉堡右侧一点，永远偏左）。不能用 flex 平衡左右：两侧
     元素天然不等宽。宽度上限 62% / 320px ⇒ 长 LOGO 会等比缩小，绝不压到右侧图标。
     ★ 只在 ≤700px 生效 ⇒ 桌面端布局一个像素都不动（桌面 .brand 仍是普通 flex 项）。 */
  .site-header .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;max-width:min(62%,320px);display:inline-flex;justify-content:center;overflow:hidden}
  .site-header .brand__logo{max-width:100%;max-height:clamp(28px,7vw + 14px,40px)}
  /* 以下三项顶部栏不显示（收进抽屉） */
  .site-header > nav,.site-header .lang-switch,.mobile-nav-close{display:none}

  /* ── 抽屉（打开态）：header 变左侧面板 ── */
  #mobileNavOpen:checked ~ .site-header{
    position:fixed;top:0;left:0;bottom:0;right:auto;width:min(86vw,360px);height:auto;min-height:0;
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0;
    padding:0 0 24px;overflow-y:auto;overflow-x:hidden;z-index:80;
    background:#fff;box-shadow:0 0 40px rgba(16,24,34,.28);
  }
  #mobileNavOpen:checked ~ .site-header .brand,
  #mobileNavOpen:checked ~ .site-header .mobile-nav-toggle{display:none}
  /* 关闭按钮（纯 label ⇒ 无 JS 也能关）；order:-1 让它排在抽屉最顶部 */
  #mobileNavOpen:checked ~ .site-header .mobile-nav-close{
    order:-1;display:flex;align-items:center;justify-content:flex-end;width:100%;box-sizing:border-box;
    padding:10px 5vw;background:transparent;color:inherit;cursor:pointer;
    font:400 30px/1 system-ui,Arial,sans-serif;
  }
  /* ★ 原实现是 `flex-wrap:wrap` + 项间 gap ⇒ 标签横着挤成一团（业主反馈"横七竖八"）。
     新实现：**纵向单列 + 细分隔线**，一项一行（整段只在 ≤700px 抽屉里生效 ⇒ 桌面零变化）。 */
  #mobileNavOpen:checked ~ .site-header > nav{
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;
    gap:0;margin:0;padding:6px 5vw 18px;
    font-size:16px;font-weight:600;letter-spacing:.01em;text-transform:none;white-space:normal;
  }
  #mobileNavOpen:checked ~ .site-header > nav > a{
    display:flex;flex:0 0 auto;box-sizing:border-box;width:100%;align-items:center;justify-content:space-between;
    padding:12px 2px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;
  }
  #mobileNavOpen:checked ~ .site-header > nav > a[aria-current="page"]{color:var(--accent)}
  /* 语言 / 货币切换（表单结构不动，只挪进抽屉并铺满面板宽） */
  #mobileNavOpen:checked ~ .site-header .lang-switch{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;padding:12px 5vw}
  #mobileNavOpen:checked ~ .site-header .lang-switch-label{font-size:11px}
  #mobileNavOpen:checked ~ .site-header .lang-switch select{width:100%;box-sizing:border-box}
  /* 遮罩：点它 = 关闭（纯 label，无 JS 亦可）；位于面板右侧可见区域 */
  #mobileNavOpen:checked ~ .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:70;background:rgba(16,24,34,.45)}
  /* 打开时锁背景滚动（JS 加类；无 JS 时最多背景可滚，不影响开/合） */
  html.mobile-nav-lock,html.mobile-nav-lock body{overflow:hidden}
}

/* ============================================================
   版本对比页（/pages/plan-compare）—— 重做（方案 B，2026-09-28 official-theme）
   ────────────────────────────────────────────────────────────
   ★★ 为什么整块都 scope 在 `section.page-body` 下：
      `.body-html` 是**共用类** —— templates/article.liquid、product.liquid 里
      都有它，文章正文里也有裸 <table>（实测 /blog/geo-vs-seo-geo 有 2 个）。
      而 `class="page-body"` 全主题**只出现在 templates/page.liquid 那一行**
      （已全目录核对）⇒ 拿它当作用域，文章页 / 商品页的表格一个像素都不动。
   ★★ 修的两个根因（都带实测数）：
      1) `theme.css:217 .body-html table{display:block;max-width:100%;overflow-x:auto}`
         与 `:305 .body-html table{width:100%;…}` 撞车 —— 后者没写 display，
         于是 `display:block` 活到最后 ⇒ 内层匿名表盒 shrink-to-fit 成 899px，
         容器 1377px ⇒ **右侧白丢 477.5px**（业主说「难看」的最大来源）。
      2) ≤700px 时滚动容器是**表自己**且首列不冻结 ⇒ 横滚 570px 后首列 x=−547，
         能力名整列看不见，22 行根本读不下去。
   ★★ 三条踩过的坑（写在这儿免得后人重犯）：
      · 表上**任何** `overflow:hidden`（哪怕只为裁圆角）都会让表自身变成滚动容器，
        表内 `position:sticky` 一律退化成「在表内偏移 0」⇒ 圆角只能用四角
        `border-radius`，**不能**用 overflow 裁。
      · **不做**表头吸顶（sticky thead）：22 行收益有限，却要再赌一次滚动容器
        与层级，不值。
      · 移动端冻结首列的 sticky 必须挂在**表外的滚动容器**（`.body-html`）上，
        表本身保持 `overflow:visible`。
   ============================================================ */

/* ── ① 表格本体：修回真表格 + 固定列宽吃满容器 ── */
section.page-body .body-html table{
  display:table;
  table-layout:fixed;
  width:100%;min-width:0;
  overflow:visible;                  /* ★ 覆盖 :217 / :316 的 overflow-x:auto */
  white-space:normal;                /* ★ 覆盖 :316 的 white-space:nowrap */
  border:0;border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 34px -14px rgba(16,24,40,.16);
  border-collapse:separate;border-spacing:0;
  margin:0 0 30px;font-size:14.5px;
}
/* 圆角只能靠四角单元格（见上：不能用 overflow:hidden 裁） */
section.page-body .body-html thead th:first-child{border-top-left-radius:14px}
section.page-body .body-html thead th:last-child{border-top-right-radius:14px}
section.page-body .body-html tbody tr:last-child td:first-child{border-bottom-left-radius:14px}
section.page-body .body-html tbody tr:last-child td:last-child{border-bottom-right-radius:14px}

/* ── ② 表头 / 单元格 ── */
section.page-body .body-html thead th{
  background:#f4f6f8;color:var(--ink);font-weight:800;font-size:13.5px;
  letter-spacing:.04em;padding:15px 14px;text-align:center;
  border-bottom:1px solid var(--line);
}
section.page-body .body-html tbody td{
  padding:12px 14px;line-height:1.55;text-align:center;vertical-align:middle;
  color:var(--muted);border-bottom:1px solid var(--line);
}
section.page-body .body-html thead th:first-child,
section.page-body .body-html tbody td:first-child{text-align:left}
section.page-body .body-html tbody td:first-child{
  font-weight:600;color:var(--ink);font-size:14.5px;background:#fbfcfd;
}
section.page-body .body-html th+th,
section.page-body .body-html td+td{border-left:1px solid var(--line)}
section.page-body .body-html tbody tr:last-child td{border-bottom:0}

/* ── ③ 斑马纹：原来那档 #fafbfc 压在 #fff 上肉眼几乎看不出，加深一档 ── */
section.page-body .body-html tbody tr:nth-child(even) td{background:#f7f9fb}
section.page-body .body-html tbody tr:nth-child(even) td:first-child{background:#f2f5f8}

/* ── ④ 列宽：能力 30% + 四档各 12.5% + 加购包 20% ──
   ★★ **列序契约（硬约束）** —— 本段以下所有 `:nth-child(N)` 都依赖下面这张对照表：
       1 = 能力（行标题）   2 = 基础版   3 = 高级版   4 = 企业版   5 = 旗舰版   6 = 加购升级包
     · ③ 斑马纹、⑤ 加购列、⑥ ✓/—、⑩ 推荐列、⑨ 手机端冻结列 **全部按这个列序**；
     · 一旦 `pages.body_html` 的表格**增删列或调换列序**（例如给对比表再插一列），
       `nth-child` 会**静默错位**（不报错、只是样式跑到别的列上）⇒
       改列序者必须**先通知**，改完要重新核对这一段与 ⑤/⑩/⑨ 的列号。
     · 线上复核判据（部署后实拉一次）：
       取 `section.page-body thead th` 的**第 6 个**，其文本应当是「加购升级包」；
       第 4 个应当是「企业版」。对不上 ⇒ 立即停手回滚。 */
section.page-body .body-html thead th:nth-child(1){width:30%}
section.page-body .body-html thead th:nth-child(2),
section.page-body .body-html thead th:nth-child(3),
section.page-body .body-html thead th:nth-child(4),
section.page-body .body-html thead th:nth-child(5){width:12.5%}
section.page-body .body-html thead th:nth-child(6){width:20%}

/* ── ⑤ 「加购升级包」不是第 5 个档位：淡橙底 + 左侧强调线 + 表头主题色 ──
   ★ 2026-09-28 定稿改为**白底 + 仅左侧强调线**：推荐列归「企业版」（见 ⑩），
     两列都橙底会互相打架。注意 ③ 斑马纹的 (0,3,4) 高于本段 (0,3,3)，
     所以偶数行由 ③ 决定 —— 这是**故意**的（斑马纹仍要连贯）。
   ★ 原方案想在这列表头挂一个「加购」小标；改成本做法（纯视觉）——该页有
     en/ja/de/fr/ru 五个语区、表头文字是译文，塞中文徽标会被外语访客看到。 */
section.page-body .body-html thead th:nth-child(6),
section.page-body .body-html tbody td:nth-child(6){background:#fff}
section.page-body .body-html thead th:nth-child(6){
  border-left:2px solid rgba(242,107,29,.45);color:var(--accent-dark);
}
section.page-body .body-html tbody td:nth-child(6){
  border-left:2px solid rgba(242,107,29,.45);color:var(--ink);font-weight:600;
}

/* ── ⑩ 推荐列 = 「企业版」（第 4 列）—— 对齐参考站"推荐列整体高亮" ──
   ★ 依据：首页「方案与价格」把**企业版**标了「推荐」角标；同一产品不能两页给不同推荐档。
   ★ 选择器写成 `tbody tr td:nth-child(4)` 是**故意的**：(0,3,4) 与 ③ 斑马纹同权、靠"后写者胜"
     压住斑马纹；写成 `tbody td:nth-child(4)`(0,3,3) 会被斑马纹反超（见 ⑤ 的注释）。
   ★ 列序依赖：第 4 列 = 企业版（见 ④ 的列序契约）。 */
section.page-body .body-html thead th:nth-child(4){
  background:#fdece0;color:var(--accent-dark);box-shadow:inset 0 3px 0 var(--accent);
}
section.page-body .body-html tbody tr td:nth-child(4){background:rgba(242,107,29,.045)}
section.page-body .body-html tbody tr:nth-child(even) td:nth-child(4){background:rgba(242,107,29,.075)}

/* ── ⑥ ✓ / — 语义化（**已启用**，2026-09-28 定稿） ──
   ★★ 更正：上一轮这里写着「引擎没有 raw/safe 过滤器、模板路线结构性不可行」—— **那是错的**。
     真相（只读取证，liquidjs 10.29.0）：`Liquid.filters` 共 **88 个内置过滤器**，`raw` **在里面**，
     实现是 `{raw:true, handler:identity}` —— 即"把这个值原样输出、别再追加 outputEscape"。
     引擎侧 `registerSafeOutputFilters`（src/core/html.js）只注册 `escape/e/xml_escape/json`，
     **并没有覆盖 `raw`** ⇒ 模板里可以直接用。
   ★★ 所以正确写法是**链尾加 `| raw`**：
       {{ page.body_html | replace: '<td>✓</td>', '<td><span class="pc-yes" …>✓</span></td>' | raw }}
     端到端复现（真引擎 + 真模板 + 真正文，全离线）：
       · 不加 raw ⇒ `<table>` 计数 0、「&lt;」残留 584 —— 与 2026-09-28 那次线上故障**逐项吻合**；
       · 链尾加 raw ⇒ `<table>` 1、`.pc-yes` 43、`.pc-no` 58、「&lt;」残留 0。
   ★★ 教训（本项目"假信号"第 9 例，方向相反：前 8 例是"假绿/假阴"，这例是**假"不可能"**）：
     我上轮只 grep 了**引擎显式注册**的 4 个过滤器，就断言"没有 raw/safe"——
     漏掉了 LiquidJS 的 80+ 个**内置**过滤器。**"我搜不到" ≠ "不存在"**。
     ⇒ 纪律：「找不到 / 不存在」这类结论，**必须先落到权威来源**（内置清单 / 官方文档 / 实现本体），
       而不是"我 grep 了一圈没看到"。
   ★ 仍然成立的部分：`{{ page.body_html }}` **裸输出**是对的（服务端已把 `page.body_html` 标成 SafeHtml
     走白名单放行）；**任何字符串过滤器都会把它降级成普通字符串**，所以 `| raw` 只加在**确实做了替换**的那条链上。
   ★ 注意：`theme.css` 里这条规则是**通用**的（有 class 就生效）；一旦正文里出现 `.pc-yes` 就会点亮。
     ⚠️ 上一版还留着一条 `.pc-yes{background:var(--accent);color:#fff}` 的**第 6 列**特例
     —— 它是给"加购列整列橙底"那版配的；加购列已改白底（见 ⑤），留着会让同一页出现**两种勾**，
     定稿里已删除。（这就是"休眠规则会在条件变化时突然生效"的实例。） */
section.page-body .body-html .pc-yes{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;line-height:1;font-size:12px;font-weight:800;
  background:rgba(242,107,29,.12);color:var(--accent);
}
section.page-body .body-html .pc-no{color:#c3c9cf;font-weight:700}

/* ── ⑦ 正文行宽：`:has(table)` 把正文列放宽到整栏（:658）之后，段落也跟着被
   拉到 1377px —— 一行 100+ 字同样是「难看」。这里只把段落/标题/列表收回 820px，
   表格仍旧整栏（与表头同宽）。 */
section.page-body > .body-html > p,
section.page-body > .body-html > h2,
section.page-body > .body-html > h3,
section.page-body > .body-html > ul,
section.page-body > .body-html > ol{max-width:820px}

/* ── ⑧ 结尾 CTA：原来是一句裸文本（对比页本该是转化页） ── */
section.page-body > .body-html > p:last-child{
  max-width:none;margin:34px 0 0;padding:22px 24px;
  border:1px solid var(--line);border-radius:10px;background:#f7f9fb;
  font-size:15.5px;color:var(--ink);
}
section.page-body > .body-html > p:last-child > a{
  display:inline-flex;align-items:center;margin:0 2px;padding:9px 16px;
  border:0;border-radius:4px;background:var(--ink);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
section.page-body > .body-html > p:last-child > a:hover{background:var(--accent)}

/* ── ⑪ 价格卡带 `.pc-cards`（C · 2026-09-28）──
   来源：业主给的参考站 https://www.ueeshop.com/shop_price.html（"列头即价格卡"）。
   取舍：**形态取参考站、组件用我们自己的** —— 卡片直接复用首页 `.plan` 那套（.plan-name/.plan-for/
   .plan-price/.plan-badge/.button），不新造一套视觉，所以两页的价格卡天然同款。
   与首页的差别：① 不重复功能清单（参考站的列头卡也没有，功能在下方对比表）
   ② 推荐档（企业版）上浮 6px + 顶部渐变条 + 橙环，把"推荐"做成视线落点。
   ★ `padding` 只覆盖纵向：横向必须**继承 `.section` 的 `var(--gutter)`**，
     否则卡片会几乎贴到屏幕边缘（第一版预览就踩了这个，卡片从 x=7 起）。
   ★ `display:none` 的那条不是"藏内容"：模板里**根本不渲染** `.pricing-head`（对比页 h1 已说明
     "四档方案"，参考站也不叠两个大标题）；这里只是万一别处复用时兜一下。 */
.pc-cards{padding:0 var(--gutter) 8px}
.pc-cards .pricing-head{display:none}
.pc-cards .pricing-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.pc-cards .plan{
  border:0;border-radius:14px;background:#fff;padding:26px 22px 22px;position:relative;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 34px -14px rgba(16,24,40,.14);
}
.pc-cards .plan-featured{
  box-shadow:0 0 0 1.5px rgba(242,107,29,.5),0 20px 48px -16px rgba(242,107,29,.34);
  transform:translateY(-6px);
}
.pc-cards .plan-featured::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,#f26b1d,#ff9d5c);
}
.pc-cards .plan-name{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0}
.pc-cards .plan-for{font-size:13.5px;line-height:1.5;color:var(--muted);margin:8px 0 0;min-height:40px}
.pc-cards .plan-price{
  margin:18px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:5px;
}
.pc-cards .plan-price .cur{font-size:17px;font-weight:700}
.pc-cards .plan-price .num{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.pc-cards .plan-price .per{font-size:12.5px;color:var(--muted)}
.pc-cards .plan-badge{
  position:absolute;top:18px;right:18px;border-radius:999px;padding:4px 9px;
  background:rgba(242,107,29,.1);color:var(--accent-dark);font-size:11px;font-weight:800;letter-spacing:.04em;
}
.pc-cards .plan-feats{display:none}
.pc-cards .plan .button{margin-top:auto;width:100%;text-align:center;justify-content:center}
.pc-cards .plan-more{font-size:12.5px;color:var(--muted);margin:20px 0 0;text-align:center}
/* ★ 断点必须与首页 .pricing-grid **完全一致**（1100 / 640），否则两页不同款；
   第一版写 ≤1000px 两列，390 视口下卡宽只剩 157px、价格行溢出 12px（实测）；
   而且 (0,2,0) 的 `.pc-cards .pricing-grid` 会**压过**首页 ≤640px 的单列规则 —— 列数再也回不来。 */
@media(max-width:1100px){
  .pc-cards .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .pc-cards .plan-featured{transform:none}
}
@media(max-width:640px){
  .pc-cards .pricing-grid{grid-template-columns:1fr}
}

/* ── ⑨ 手机端：滚动容器换成表外的 `.body-html`（表自己保持 overflow:visible），
   首列 sticky 冻结在左 ⇒ 22 行横着翻也永远看得见「能力名」那一列。 ── */
@media(max-width:700px){
  section.page-body .body-html{overflow-x:auto;-webkit-overflow-scrolling:touch}
  section.page-body .body-html table{
    display:table;overflow:visible;white-space:normal;
    min-width:720px;font-size:13.5px;
  }
  section.page-body .body-html thead th,
  section.page-body .body-html tbody td{padding:10px}
  section.page-body .body-html thead th:first-child,
  section.page-body .body-html tbody td:first-child{
    position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 var(--line);
  }
  section.page-body .body-html thead th:first-child{background:#f4f6f8;z-index:5}
  section.page-body .body-html tbody tr:nth-child(even) td:first-child{background:#f2f5f8}
  section.page-body .body-html thead th:nth-child(6),
  section.page-body .body-html tbody td:nth-child(6){background:#fff}
  section.page-body .body-html tbody tr td:nth-child(4){background:rgba(242,107,29,.045)}
  section.page-body .body-html tbody tr:nth-child(even) td:nth-child(4){background:rgba(242,107,29,.075)}
}

/* ============================================================================
 * ★★ 导航「多级下拉」样式 —— 2026-09-29 补入基座
 *
 * 为什么放基座：这段原本只**内联**在 themes/b2b-default/layout/theme.liquid（第 52–91 行）。
 *   官网只渲染 b2b-default 时够用；但「模板演示」（/preview/<主题>）要在**同一个站**上
 *   渲染另外 27 套主题（来自 独立站Fecify），那些主题的 layout 里**没有**这段
 *   ⇒ 子菜单退化成普通 <ul>：竖排小圆点、没有下拉浮层、鼠标点上没反应。
 *   一处补齐 ⇒ 28 套主题 + 以后任何新页面全部受益。
 *
 * 为什么对 b2b-default「零变化」（可证，非推测）：
 *   ① 下面这段声明与它 layout 内联的那段**逐字相同**；
 *   ② 内联 <style> 在 <link rel=theme.css> **之后** ⇒ 同特异度时内联胜；
 *   ③ 声明值完全一致 ⇒ 计算值必然不变。
 *   ④ 末尾三条（--2/--3 定位、无类名父项箭头、嵌套 hover 展开）只服务于那 27 套主题：
 *      b2b-default 的标记里不存在 --2/--3、父项是 <span class="nav-item__link--static">
 *      而不是无类名的 <a>、也没有嵌套子菜单 ⇒ 对它是**死规则**。
 * ============================================================================ */
.site-header .nav-item{position:relative;display:inline-flex;align-items:center}
.site-header .nav-item__link{display:inline-flex;align-items:center;cursor:pointer}
.site-header .nav-item--has-children > .nav-item__link::after{content:'';width:0;height:0;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55}
.site-header .nav-item__toggle{display:none;background:transparent;border:0;color:inherit;font-size:12px;line-height:1;cursor:pointer;padding:4px 6px}
.site-header .nav-sub{list-style:none;margin:0;padding:0}
.site-header .nav-sub__link--static{cursor:default}
.site-header .nav-sub__link--static .nav-soon{font-size:11px;font-weight:400;opacity:.7;margin-left:4px}
@media (min-width:701px){
  .site-header .nav-sub{position:absolute;top:100%;left:0;min-width:200px;margin-top:8px;padding:8px 0;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(16,24,34,.14);z-index:75;display:none;flex-direction:column;gap:0}
  /* 悬停断层修复：面板自己带一块透明桥，指针从菜单项移到面板不经过空白 ⇒ 不会误关 */
  .site-header .nav-item--has-children > .nav-sub::before{content:'';position:absolute;left:0;right:0;top:-9px;height:9px}
  .site-header .nav-item--has-children:hover > .nav-sub,
  .site-header .nav-item--has-children:focus-within > .nav-sub,
  .site-header .nav-item--has-children.is-open > .nav-sub{display:flex}
  .site-header .nav-sub__item a{display:block;padding:9px 18px;font-size:13px;font-weight:600;text-transform:none;letter-spacing:.01em;white-space:nowrap;color:var(--ink);text-decoration:none}
  .site-header .nav-sub__item a:hover{background:#f6f7f8;color:var(--accent)}
  .site-header .nav-sub__item .nav-sub__link--static{display:block;padding:9px 18px;font-size:13px;font-weight:600;text-transform:none;letter-spacing:.01em;white-space:nowrap;color:var(--muted)}
}
@media (max-width:700px){
  .site-header .nav-item{display:block;width:100%}
  #mobileNavOpen:checked ~ .site-header > nav > .nav-item > .nav-item__link{display:flex;width:100%;align-items:center;justify-content:space-between;box-sizing:border-box;padding:12px 2px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
  #mobileNavOpen:checked ~ .site-header .nav-item__toggle{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:0;top:50%;transform:translateY(-50%);width:40px;height:40px}
  #mobileNavOpen:checked ~ .site-header .nav-item__toggle span{transition:transform .18s ease}
  #mobileNavOpen:checked ~ .site-header .nav-item.is-open > .nav-item__toggle span{transform:rotate(180deg)}
  #mobileNavOpen:checked ~ .site-header .nav-sub{display:none;padding:2px 0 6px 14px}
  #mobileNavOpen:checked ~ .site-header .nav-item.is-open > .nav-sub{display:flex;flex-direction:column}
  #mobileNavOpen:checked ~ .site-header .nav-sub__item a{display:block;padding:10px 2px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
  #mobileNavOpen:checked ~ .site-header .nav-sub__item .nav-sub__link--static{display:block;padding:10px 2px;border-bottom:1px solid var(--line);color:var(--muted)}
}

/* ── 以下三条只服务 独立站Fecify 那 27 套主题（标记约定与 b2b-default 不同）──────
   b2b-default 里：父项是 <span class="nav-item__link--static">、没有 --2/--3、没有嵌套子菜单
   ⇒ 三条对它**均不可能命中**（死规则），对它是零变化。 */
.site-header .nav-item--has-children > a:not(.nav-item__link)::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}
@media (min-width:701px){
  .site-header .nav-sub--2,
  .site-header .nav-sub--3{top:-11px;left:100%;margin-left:6px}
  .site-header .nav-sub__item:hover > .nav-sub,
  .site-header .nav-sub__item:focus-within > .nav-sub{display:flex}
}

/* ============================================================================
 * ★★ 导航「卡片式宽面板」样式 —— 2026-09-29 nav-card。**末尾追加**，上文一行未改。
 *
 * 与 themes/b2b-default/layout/theme.liquid 内联的 card 段**声明一致**（缩进不同，声明同）。
 * 命中映射的子项由该 layout 渲染成 .nav-card（图标 + 标题 + 一句说明）；
 * 未命中映射的子项仍是 .nav-sub__item 纯文字行（见本文件上方的同名规则）⇒ 不会出现空卡。
 * 面板改 grid 平铺；手机端（≤700px）退化为纵向列表（说明句隐藏）。
 * ============================================================================ */
@media (min-width:701px){
  .site-header .nav-sub--cards{left:50%;transform:translateX(-50%);min-width:580px;max-width:min(660px,calc(100vw - 24px));padding:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .site-header .nav-item--has-children:hover > .nav-sub--cards,
  .site-header .nav-item--has-children:focus-within > .nav-sub--cards,
  .site-header .nav-item--has-children.is-open > .nav-sub--cards{display:grid}
  .site-header .nav-card-item{list-style:none;margin:0;padding:0;min-width:0}
  .site-header .nav-card{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border:1px solid transparent;border-radius:10px;text-decoration:none;color:var(--ink);transition:background .15s ease,border-color .15s ease}
  .site-header .nav-card:hover{background:#f6f7f8;border-color:var(--line)}
  .site-header .nav-card:hover .nav-card__title{color:var(--accent)}
  .site-header .nav-card__icon{flex:none;display:inline-flex;width:20px;height:20px;margin-top:1px;color:var(--accent)}
  .site-header .nav-card__icon svg{display:block;width:20px;height:20px}
  .site-header .nav-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}
  .site-header .nav-card__title{font-size:13px;font-weight:700;line-height:1.3;color:var(--ink);white-space:normal}
  .site-header .nav-card__desc{font-size:12px;font-weight:400;line-height:1.45;color:var(--muted)}
}
@media (max-width:700px){
  #mobileNavOpen:checked ~ .site-header .nav-card{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
  #mobileNavOpen:checked ~ .site-header .nav-card__icon{width:18px;height:18px;margin-top:0;color:var(--muted)}
  #mobileNavOpen:checked ~ .site-header .nav-card__icon svg{width:18px;height:18px}
  #mobileNavOpen:checked ~ .site-header .nav-card__body{flex-direction:row;align-items:center}
  #mobileNavOpen:checked ~ .site-header .nav-card__desc{display:none}
}

/* ============================================================
   ★★ 2026-10-01 nav-grow：页头导航字号与 LOGO 再放大（对标 UEESHOP）。
   · 约束：theme.liquid 内联段（源序在后）已有 16px/nav 与 clamp(42,1.9vw+27,56)/logo，
     同特异度它会赢 ⇒ 本段全部用更高特异度压住：nav 用 .site-header > nav:first-of-type
     (0,2,1) > 内联 .site-header nav (0,1,1)；logo 用 .site-header a.brand > img.brand__logo
     (0,3,2) > 内联 .site-header .brand__logo (0,2,1)。不用 !important。
   · 仅动「nav 字号/项距」与「LOGO max-height」两类；≤1100px / ≤700px 各收一档防换行。
   · 既有规则一条未改；.nav-sub--cards / .nav-card* 结构与字号未碰。
   ============================================================ */
@media (min-width:701px){
  .site-header > nav:first-of-type{font-size:18px;gap:44px}
}
@media (max-width:1100px) and (min-width:701px){
  .site-header > nav:first-of-type{font-size:16px;gap:30px}
}
.site-header a.brand > img.brand__logo{max-height:clamp(50px,2.3vw + 34px,68px)}
@media (max-width:700px){
  .site-header a.brand > img.brand__logo{max-height:clamp(34px,7vw + 18px,50px)}
}
/* ============================================================================
   /buy「购买授权」页 —— 收银台样式（buy-* 全族）  主题级叠加层
   ----------------------------------------------------------------------------
   权威源  = 仓库 D:/WorkBuddy/官网keyone/themes/b2b-default/assets/theme.css
   线上落点 = /opt/keyone-site/themes/b2b-default/assets/theme.css
   生效机制 = 线上 src/server.js 的 `GET /theme.css` 每请求：
                Buffer.concat([ public/theme.css, themes/<theme>/assets/theme.css ])
              ⇒ 本文件被**追加**在基座 public/theme.css 之后；配合
                `cache-control: no-cache, must-revalidate` ⇒ 投放即生效、**免重启**。
   ⛔ 同名陷阱：独立站Fecify/themes/b2b-default/assets/theme.css（5774 B）是
      **B2B 客户站**那份，与本文件同名不同主题，别投错。
   ----------------------------------------------------------------------------
   背景（2026-09-28）：/buy 的正文由服务端 buildBuyBody()
     （独立站Fecify src/features/checkout/routes.js :97–140）拼字符串产出，
     class 全族 buy-*；而此前 theme.css 对该族命中为 **0** ⇒ 页面裸文本。
   本文件选择器**一律收敛在 buy-* 类内** ⇒ 不影响任何其它页面。
   ========================================================================== */

/* ---- 容器：给 page-body 的窄栏（max-width:820px）留一点内边距 ---- */
.buy-page{max-width:820px}

/* ---- 引言 / 提示条 ---- */
.buy-intro{margin:0 0 14px;color:#4c5763;font-size:14px;line-height:1.75}
.buy-note{
  margin:0 0 26px;padding:11px 14px;
  background:rgba(242,107,29,.07);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;
  color:var(--muted);font-size:12.5px;line-height:1.7;
}

/* ---- 套餐区 ---- */
.buy-page form{margin:0}
.buy-plans{
  margin:0;padding:0;border:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px;
}
.buy-plans legend{
  display:block;width:100%;margin:0 0 12px;padding:0;
  color:var(--muted);font:600 11px 'DM Mono',ui-monospace,monospace;
  letter-spacing:.1em;text-transform:uppercase;
}

/* ---- 单张套餐卡（整块 <label> 可点） ---- */
.buy-plan{
  position:relative;display:block;min-width:0;
  padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-radius:6px;cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.buy-plan:hover{border-color:#c8ced4;transform:translateY(-1px)}
.buy-plan.is-active{
  border-color:var(--accent);
  box-shadow:0 14px 34px rgba(242,107,29,.15);
}
/* 原生 radio 视觉隐藏但保留可聚焦/可读屏 */
.buy-plan input[type="radio"]{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

.buy-plan-main{
  position:relative;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:2px 8px;padding-left:26px;min-width:0;
}
/* 自绘圆点（未选中/选中两态） */
.buy-plan-main::before{
  content:"";position:absolute;left:0;top:4px;width:13px;height:13px;
  border:1.5px solid #c9ced3;border-radius:50%;transition:border-color .18s,box-shadow .18s;
}
.buy-plan.is-active .buy-plan-main::before{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 3.5px var(--accent);
}
.buy-plan input[type="radio"]:focus-visible + .buy-plan-main::before{
  outline:2px solid rgba(242,107,29,.4);outline-offset:2px;
}

.buy-plan-name{
  flex:1 1 auto;min-width:0;
  color:var(--ink);font-size:14.5px;font-weight:800;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.buy-price{
  margin-left:auto;white-space:nowrap;
  color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.02em;
}
.buy-list{color:var(--muted);font-size:12.5px;font-weight:500;text-decoration:line-through}
.buy-per{color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap}
.buy-price-na{color:var(--muted);font-size:12.5px;font-weight:500}

/* 「加购项」标签 */
.buy-tag{
  display:inline-block;margin-left:7px;padding:1px 7px;vertical-align:1px;
  background:rgba(242,107,29,.12);color:var(--accent);border-radius:99px;
  font:700 10px 'DM Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;
}

/* ---- 表单字段 ---- */
.buy-fields{
  display:grid;gap:14px;margin:24px 0 0;padding-top:22px;
  border-top:1px solid var(--line);
}
.buy-fields label{
  display:flex;flex-direction:column;gap:6px;
  color:var(--muted);font-size:12.5px;line-height:1.5;
}
.buy-fields input{
  width:100%;box-sizing:border-box;
  padding:11px 12px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:4px;outline:0;
  font:14px Manrope,-apple-system,'Segoe UI',sans-serif;
  transition:border-color .15s,box-shadow .15s;
}
.buy-fields input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,107,29,.12);
}
.buy-fields input::placeholder{color:#aab1b8}

/* ---- 错误提示 ---- */
.buy-error{
  margin:16px 0 0;padding:10px 12px;
  background:rgba(199,58,58,.08);color:#b8332f;border-radius:4px;
  font-size:13px;line-height:1.6;
}
.buy-error[hidden]{display:none}

/* ---- 提交区 ---- */
.buy-actions{display:flex;justify-content:flex-end;margin-top:20px}
.buy-actions .button{margin-top:0}
/* 基座 .button 无 .button-primary 配色（theme.css 未定义）⇒ 此处补齐为站点主色 */
.buy-actions .button-primary{background:var(--accent);color:#fff}
.buy-actions .button-primary:hover{background:var(--accent-dark)}
.buy-actions .button-primary:disabled{opacity:.6;cursor:not-allowed}

/* ---- 窄屏：单列、去溢出 ---- */
@media (max-width:640px){
  .buy-plans{grid-template-columns:1fr;gap:11px}
  .buy-page{max-width:none}
}

/* ── 页头导航组居中（仅 >700px；≤700px 走抽屉，一个像素都不动）────────────────
   流式方案：把「左块 brand / 中段 nav+会员入口 / 右块 语言」三段在剩余空间里居中，
   不用绝对定位（绝对定位版在 /en/ /ru/ 会真压住右侧块 ⇒ 已弃用）。
   · nav 拿满中段（flex:1 1 auto + min-width:0），组内 justify-content:center ⇒ 内容居中于自箱；
   · brand / 语言块两侧各一粒 margin:auto ⇒ 把中段钉在两侧块之间；
   · column-gap 20→16 是「腾 4px×3=12px 地方」的唯一代价：让 zh 达 5 倍，
     并顺带消掉 /ru/ @1440 的两行页头（H 125.98→88）。
   与既有规则零冲突：>700px 此前没有任何 .site-header > nav 的定位/弹性规则；
   .site-header > .lang-switch{margin-left:auto}(0,2,0) 压过基座 .lang-switch{margin-left:24px}(0,1,0)；
   本文件由 server.js 拼在 public/theme.css 之后 ⇒ 同权重的 .site-header{column-gap:16px}
   也稳赢基座的 gap:12px 20px。
   ⛔ 不改 letter-spacing / 字号 / nav 内部 gap（team-lead 2026-09-28 显式授权范围）。
   回滚 = 删掉本段。 */
@media (min-width:701px){
  .site-header{column-gap:16px}
  .site-header > nav{flex:1 1 auto;min-width:0;justify-content:center}
  .site-header > .brand{margin-right:auto}
  .site-header > .lang-switch{margin-left:auto}
}

/* ── 价格卡「查看详情 + 立即购买」双按钮（R8-批2）─────────────────────
   业主 2026-09-30 要求：每个套餐点进去是**它自己的详情页**，同时保留一步下单入口。
   ★ 选择器只命中本段新增的 .plan-acts / .plan-buy-now ⇒ 其它 .plan 结构一字不变。
   回滚 = 删掉本段（.plan-acts 退化成普通块级容器，按钮照旧可点）。 */
.plan-acts{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:auto}
.plan-acts .button{margin-top:0;width:100%;justify-content:center}
.plan-buy-now{font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent}
.plan-buy-now:hover{border-bottom-color:var(--accent)}

/* ============================================================================
   /buy 单卡模式（R8-批3，业主 2026-09-30：「这结算页选的那个套餐就出现那个套餐…
   这 2 个页面分开啊」）—— 左「订单摘要」/ 右「填写并支付」双栏收银台。
   ----------------------------------------------------------------------------
   ★ 服务端 `buildBuyBody()`（独立站Fecify src/features/checkout/routes.js）在
     URL 带了**有效** `?plan=<code>` 时只吐**一张**摘要卡 + 隐藏 input；
     没带 / code 无效时仍吐原来的 6 卡网格 ⇒ 两种形态共用下面这套样式。
   ★ 选择器**一律收敛在 buy-* 类内** ⇒ 不命中其它任何页面（与本文件同条纪律）。
   ★ 保持**虚拟商品语义**：页面上只有邮箱 / 授权域名 / 联系人，没有收货地址、
     运费、物流 —— 本段也不引入任何与之相关的结构。
   ========================================================================== */

/* ---- 单卡模式放宽栏宽（双栏要地方）；多卡模式沿用上面的 820px ---- */
.buy-page-single{max-width:980px}

/* ---- 双栏骨架 ---- */
.buy-layout{display:grid;gap:20px;align-items:start;margin-top:22px}
@media (min-width:880px){
  .buy-layout{grid-template-columns:minmax(250px,.82fr) minmax(0,1.18fr);gap:24px}
}
@media (max-width:640px){
  .buy-page-single{max-width:none}
}

/* ---- 左：订单摘要卡 ---- */
.buy-summary{
  border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px;
}
.buy-eyebrow{
  display:block;color:var(--muted);
  font:600 11px 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
}
.buy-sum-name{margin:10px 0 0;color:var(--ink);font-size:18px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.buy-sum-price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin-top:10px;
}
.buy-sum-price .buy-price{margin-left:0;font-size:20px}
.buy-sum-rows{margin:16px 0 0;border-top:1px solid var(--line)}
.buy-sum-rows > div{
  display:flex;gap:14px;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5;
}
.buy-sum-rows dt{color:var(--muted);flex:0 0 auto}
.buy-sum-rows dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.buy-sum-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0}
.buy-sum-detail,.buy-sum-change{
  font-size:12.5px;font-weight:700;text-decoration:none;border-bottom:1px solid transparent;
}
.buy-sum-detail{color:var(--accent)}
.buy-sum-detail:hover{border-bottom-color:var(--accent)}
.buy-sum-change{color:var(--muted)}
.buy-sum-change:hover{color:var(--accent)}

/* ---- 右：表单面板 ---- */
.buy-panel{border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px}
/* 面板内字段不再需要"上分隔线 + 上留白"（分隔线已由面板边框承担） */
.buy-panel .buy-fields{margin:0;padding-top:0;border-top:0}
.buy-hint{color:#8a939c;font-size:11.5px;font-weight:500;line-height:1.5}

/* ---- 多卡模式下每张卡里的「查看详情」：独占一行，不挤在价签旁边 ---- */
.buy-plan-detail{
  flex:0 0 100%;margin-top:6px;
  color:var(--accent);font-size:12px;font-weight:700;text-decoration:none;
  border-bottom:1px solid transparent;
}
.buy-plan-detail:hover{border-bottom-color:var(--accent)}