/* ==========================================================================
   YUNA 浴纳 · 组件样式
   --------------------------------------------------------------------------
   依据：design-spec.md v2.0 §6.1 – §6.15（15 个组件）
   真源：tokens.css —— 本文件只引用变量，不出现任何硬编码色值/字号/间距
   铁律：圆角一律 var(--radius-md)=0；产品图 object-fit:contain；
        焦点环 2px 不可移除（已在 tokens.css 统一声明，本文件不得写 outline:none）
   ========================================================================== */

/* ==========================================================================
   6.1 顶部导航（桌面 / 移动）
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:var(--c-bg-page);
  border-bottom:var(--bw-hairline) solid var(--c-divider);
}
.site-header__inner{
  height:88px; display:flex; align-items:center; gap:var(--sp-8);
}
.site-header__logo{ flex:0 0 auto; display:flex; align-items:center; }
/* 只设 height，width:auto 让 SVG 自身比例生效，VIS A-07 禁止变形 */
.site-header__logo img{ height:var(--logo-nav-h); width:auto; }
.site-header__logo-text{
  display:flex; flex-direction:column; gap:2px; text-decoration:none;
}
.site-header__logo-brand{
  font:var(--fw-semibold) var(--fs-h5)/1 var(--font-en);
  letter-spacing:.14em; color:var(--c-text-primary);
}
.site-header__logo-cn{
  font:var(--fw-regular) var(--fs-micro)/1 var(--font-cn);
  letter-spacing:.32em; color:var(--c-text-secondary);
}

.site-nav{ margin-left:auto; min-width:0; }
.site-nav__list{
  display:flex; gap:var(--sp-6);
  margin:0; padding:0; list-style:none;
}
.site-nav__link{
  position:relative; display:inline-block;
  padding:var(--sp-2) 0;
  font:var(--fw-medium) var(--fs-small)/var(--lh-small) var(--font-cn);
  color:var(--c-text-primary); text-decoration:none; white-space:nowrap;
  transition:color var(--transition-color);
}
.site-nav__link:hover{ color:var(--c-text-secondary); }
.site-nav__link.is-current{ font-weight:var(--fw-semibold); }
.site-nav__link.is-current::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:var(--bw-thick); background:var(--c-black);
}

.site-header__actions{
  display:flex; align-items:center; gap:var(--sp-4); flex:0 0 auto;
}

/* ---- 语言切换 ---- */
.lang-switch{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  min-height:var(--tap-min); padding:0 var(--sp-3);
  background:none; border:0; cursor:pointer;
  font:var(--fw-medium) var(--fs-caption)/1 var(--font-en);
  color:var(--c-text-tertiary);
}
.lang-switch__sep{ color:var(--c-g400); }
.lang-switch .is-active{ color:var(--c-text-primary); font-weight:var(--fw-semibold); }

/* ---- 汉堡：44×44 触控区 + 3 条 20px 细线 ---- */
.nav-toggle{
  display:none; width:var(--tap-min); height:var(--tap-min);
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:0;
}
.nav-toggle__bar{
  display:block; width:20px; height:1px; background:var(--c-black);
  transition:transform var(--transition-transform), opacity var(--transition-opacity);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---- 移动端全屏抽屉 ---- */
.mobile-drawer{ position:fixed; inset:0; z-index:var(--z-drawer); }
.mobile-drawer[hidden]{ display:none; }
.mobile-drawer__scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  border:0; padding:0; cursor:pointer;
}
.mobile-drawer__panel{
  position:absolute; inset:0 0 0 auto; width:100%; max-width:420px;
  display:flex; flex-direction:column;
  background:var(--c-bg-page);
  padding:var(--sp-6) var(--sp-5);
  overflow-y:auto;
  animation:drawer-in var(--dur-2) var(--ease-out);
}
@keyframes drawer-in{ from{ transform:translateX(100%); } to{ transform:none; } }
.mobile-drawer__close{
  position:absolute; top:var(--sp-4); right:var(--sp-4);
  width:var(--tap-min); height:var(--tap-min);
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  font-size:var(--fs-h4); color:var(--c-text-primary);
}
.mobile-drawer__list{ list-style:none; margin:0 0 var(--sp-6); padding:0; }
.mobile-drawer__list a{
  display:flex; align-items:center; min-height:var(--tap-min);
  border-bottom:var(--bw-hairline) solid var(--c-divider);
  font:var(--fw-medium) var(--fs-h5)/var(--lh-h5) var(--font-cn);
  color:var(--c-text-primary); text-decoration:none;
}
.mobile-drawer__list a.is-current{ font-weight:var(--fw-semibold); }
.mobile-drawer__foot{ margin-top:auto; padding-top:var(--sp-6); }
.mobile-drawer__lang{ margin-bottom:var(--sp-4); }

body.is-locked{ overflow:hidden; }

@media (max-width:1023px){
  .site-header__inner{ height:72px; }
  .site-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header__actions .btn{ display:none; }
  .site-header__actions{ margin-left:auto; }
}
@media (max-width:639px){
  .site-header__inner{ height:60px; gap:var(--sp-4); }
  .lang-switch{ display:none; }   /* 语言切换移入抽屉底部 */
}

/* ==========================================================================
   6.2 页脚
   ========================================================================== */
.site-footer{
  position:relative; overflow:hidden;
  background:var(--c-bg-inverse); color:var(--c-text-inverse);
  padding-block:var(--sp-9) var(--sp-6);
}
.site-footer__geo{
  position:absolute; inset:0; z-index:var(--z-geo);
  opacity:var(--geo-opacity-inverse);   /* 0.08 < 0.10，避免干扰反白文字 */
  pointer-events:none; background-repeat:repeat;
}
.site-footer .container{ position:relative; z-index:var(--z-content); }
.site-footer__grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--gutter);
}
.site-footer__title{
  font:var(--fw-semibold) var(--fs-h6)/var(--lh-h6) var(--font-cn);
  letter-spacing:var(--ls-h6); margin-bottom:var(--sp-4);
  color:var(--c-text-inverse);
}
.site-footer__col ul{ list-style:none; margin:0; padding:0; }
.site-footer__col a,
.site-footer__col p{
  display:inline-block; padding-block:var(--sp-2);
  font:var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-cn);
  color:var(--c-text-inverse-2); text-decoration:none;
}
.site-footer__col a:hover{ color:var(--c-text-inverse); text-decoration:underline; }
.site-footer__logo img{ height:var(--logo-footer-h); width:auto; }
.site-footer__slogan{
  font:var(--fw-medium) var(--fs-small)/1 var(--font-en);
  letter-spacing:.14em; margin-top:var(--sp-4); color:var(--c-text-inverse);
}
.site-footer__desc{
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-cn);
  color:var(--c-text-inverse-2); margin-top:var(--sp-2);
}
.site-footer__legal{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-8); padding-top:var(--sp-5);
  border-top:var(--bw-hairline) solid var(--c-g900);
  font:var(--fw-regular) var(--fs-micro)/var(--lh-micro) var(--font-cn);
  color:var(--c-text-inverse-2);
}
.site-footer__legal a{ color:var(--c-text-inverse-2); }
.site-footer__legal a:hover{ color:var(--c-text-inverse); }
[hidden]{ display:none !important; }

@media (max-width:1023px){ .site-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:639px){
  .site-footer__grid{ grid-template-columns:1fr; gap:var(--sp-6); }
  .site-footer__legal{ flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
}

/* ==========================================================================
   6.3 按钮（主 / 次 / 文字）
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:var(--sp-3) var(--sp-5);
  border:var(--bw-thick) solid transparent; border-radius:var(--radius-md);
  font:var(--fw-medium) var(--fs-body)/1.4 var(--font-cn);
  text-align:center; text-decoration:none; cursor:pointer;
  transition:background-color var(--transition-color),
             color var(--transition-color),
             border-color var(--transition-color);
}
.btn--block{ display:flex; width:100%; }
.btn--primary{ background:var(--c-black); color:var(--c-white); border-color:var(--c-black); }
.btn--primary:hover{ background:var(--c-g900); border-color:var(--c-g900); }
.btn--primary:active{ background:var(--c-g800); }
.btn--secondary{ background:var(--c-white); color:var(--c-black); border-color:var(--c-black); }
.btn--secondary:hover{ background:var(--c-bg-section); }
.btn--secondary:active{ background:var(--c-g100); }
.btn--text{
  min-height:var(--tap-min); padding:var(--sp-2) 0;
  color:var(--c-black); font-weight:var(--fw-medium);
  border:0; background:none; text-decoration:none;
}
.btn--text:hover{ text-decoration:underline; text-underline-offset:4px; }
.btn--sm{ min-height:var(--tap-min); padding:var(--sp-2) var(--sp-4);
  font:var(--fw-medium) var(--fs-small)/1.4 var(--font-cn); }
.btn:disabled,
.btn[aria-disabled="true"]{
  background:var(--c-bg-section); color:var(--c-text-disabled);
  border-color:var(--c-divider); cursor:not-allowed; pointer-events:none;
}
@media (max-width:639px){
  .btn{ min-height:52px; padding:var(--sp-3) var(--sp-4); }
}

/* ==========================================================================
   6.4 产品卡片
   ========================================================================== */
.product-card{
  display:flex; flex-direction:column;
  background:var(--c-bg-card);
  border:var(--bw-hairline) solid var(--c-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color var(--transition-color);
}
.product-card:hover{ border-color:var(--c-black); }
.product-card__media{
  position:relative; display:block;
  aspect-ratio:var(--product-ratio);
  background:var(--product-bg);
  padding:var(--sp-4); overflow:hidden;
}
.product-card__media img{
  width:100%; height:100%;
  object-fit:var(--product-fit);          /* contain，比例跨度 0.562–1.975 不裁切 */
  transition:transform var(--transition-transform);
}
.product-card:hover .product-card__media img{ transform:translateY(-2px); }
.product-card__media--empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-2);
  font:var(--fw-regular) var(--fs-caption)/1.5 var(--font-cn);
  color:var(--c-text-secondary); text-align:center;
  padding:var(--sp-5);
}
.badge{
  position:absolute; top:var(--sp-3); left:var(--sp-3); z-index:var(--z-content);
  padding:2px var(--sp-2); border-radius:var(--radius-sm);
  background:var(--c-black); color:var(--c-white);
  font:var(--fw-medium) var(--fs-micro)/var(--lh-micro) var(--font-cn);
}
.product-card__body{
  padding:var(--sp-5); display:flex; flex-direction:column;
  flex:1; gap:var(--sp-2);
}
.product-card__model{
  font-family:var(--font-model); font-weight:var(--fw-semibold);
  font-size:var(--fs-model); line-height:var(--lh-model);
  letter-spacing:var(--ls-model); font-feature-settings:"tnum"1;
  color:var(--c-text-primary);
}
.product-card__title{ font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-cn); }
.product-card__title a{ color:inherit; text-decoration:none; }
.product-card__title a:hover{ text-decoration:underline; text-underline-offset:3px; }
.product-card__title-en{
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-en);
  color:var(--c-text-tertiary);
}
.product-card__tags{
  list-style:none; display:flex; flex-wrap:wrap;
  gap:var(--sp-2); margin:var(--sp-2) 0 0; padding:0;
}
.tag{
  padding:2px var(--sp-2);
  background:var(--c-bg-section); border-radius:var(--radius-sm);
  font:var(--fw-regular) var(--fs-micro)/var(--lh-micro) var(--font-cn);
  color:var(--c-text-secondary);   /* #585656 → 6.57:1 on #F3F3F3 */
}
.product-card__colors{
  list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-4);
  margin:var(--sp-2) 0 0; padding:0;
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-cn);
  color:var(--c-text-secondary);
}
.product-card__colors li{ display:flex; align-items:center; gap:var(--sp-1); }
.swatch{
  display:inline-block; width:12px; height:12px;
  border-radius:var(--radius-full);
  border:var(--bw-hairline) solid var(--c-border-strong);
  flex:0 0 auto;
}
.product-card__foot{
  margin-top:auto; padding-top:var(--sp-3);
  border-top:var(--bw-hairline) solid var(--c-divider);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.product-card__add{ margin-top:0; }
.product-card__add.is-added{ color:var(--c-text-secondary); }

/* 卡片网格 */
.product-grid{
  display:grid; gap:var(--gutter);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  list-style:none; margin:0; padding:0;
}
@media (max-width:639px){
  .product-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
}

/* ==========================================================================
   6.5 筛选器 / 标签控件
   ========================================================================== */
.filter-group{ border:0; padding:0; margin:0 0 var(--sp-5); }
.filter-group__legend{
  padding:0; margin-bottom:var(--sp-3);
  font:var(--fw-semibold) var(--fs-small)/var(--lh-small) var(--font-cn);
}
.chip-group{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.chip{
  min-height:36px; padding:var(--sp-2) var(--sp-4);
  background:var(--c-bg-card); color:var(--c-text-primary);
  border:var(--bw-hairline) solid var(--c-border-strong);
  border-radius:var(--radius-sm); cursor:pointer;
  font:var(--fw-regular) var(--fs-small)/1.4 var(--font-cn);
  transition:background-color var(--transition-color), color var(--transition-color);
}
.chip:hover{ background:var(--c-bg-section); }
.chip.is-active,
.chip[aria-pressed="true"]{
  background:var(--c-black); color:var(--c-white);
  border-color:var(--c-black); font-weight:var(--fw-medium);
}
.dot-group{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.dot{
  width:var(--tap-min); height:var(--tap-min); padding:0;
  background:none; border:0; cursor:pointer;
  display:grid; place-items:center;
}
.dot__swatch{
  width:24px; height:24px; border-radius:var(--radius-full);
  border:var(--bw-hairline) solid var(--c-border-strong);
}
.dot[aria-pressed="true"] .dot__swatch{
  outline:var(--bw-thick) solid var(--c-black); outline-offset:2px;
}
.dot__label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.filter-select{
  width:100%; min-height:44px; padding:var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3);
  background:var(--c-bg-card); color:var(--c-text-primary);
  border:var(--bw-hairline) solid var(--c-border-strong);
  border-radius:var(--radius-sm); cursor:pointer;
  font:var(--fw-regular) var(--fs-small)/1.4 var(--font-cn);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--sp-3) center;
}
.filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  background:var(--c-bg-section);
  border:var(--bw-hairline) solid var(--c-divider);
  border-radius:var(--radius-md);
}
.filter-bar__count{
  font:var(--fw-medium) var(--fs-small)/1.4 var(--font-cn);
  color:var(--c-text-primary);
}
.filter-toggle{ display:none; }
.filters{ min-width:0; }
.filters__panel{ display:grid; gap:var(--sp-5); }
@media (max-width:639px){
  .filter-toggle{ display:flex; width:100%; }
  .filters{ display:none; }
  .filters.is-open{ display:block; }
}
@media (min-width:640px){
  .filter-toggle{ display:none !important; }
  .filters{ display:block !important; }
}

/* ==========================================================================
   6.6 产品详情模态框（桌面侧滑 / 移动全屏）
   ========================================================================== */
.modal{ position:fixed; inset:0; z-index:var(--z-modal); }
.modal[hidden]{ display:none; }
.modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); border:0; padding:0; }
.modal__panel{
  position:absolute; inset:0 0 0 auto; width:560px; max-width:100%;
  display:flex; flex-direction:column;
  background:var(--c-bg-page); box-shadow:var(--shadow-lg);
  animation:panel-in var(--dur-2) var(--ease-out);
}
@keyframes panel-in{ from{ transform:translateX(100%); } to{ transform:none; } }
.modal__head{
  position:relative; flex:0 0 auto;
  padding:var(--sp-5); border-bottom:var(--bw-hairline) solid var(--c-divider);
}
.modal__model{
  font-family:var(--font-model); font-weight:var(--fw-semibold);
  font-size:var(--fs-model); letter-spacing:var(--ls-model);
  font-feature-settings:"tnum"1;
}
.modal__title{ font:var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-cn); margin-top:var(--sp-1); }
.modal__title-en{
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-en);
  color:var(--c-text-tertiary); margin-top:var(--sp-1);
}
.modal__close{
  position:absolute; top:var(--sp-4); right:var(--sp-4);
  width:var(--tap-min); height:var(--tap-min);
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; font-size:var(--fs-h4);
  color:var(--c-text-primary);
}
.modal__body{ flex:1 1 auto; overflow-y:auto; padding:var(--sp-5); }
.modal__figure{
  margin:0 0 var(--sp-5);
  background:var(--product-bg); padding:var(--sp-4);
}
.modal__figure img{ width:100%; height:auto; }
.modal__figure[hidden]{ display:none; }
.modal__foot{
  flex:0 0 auto; padding:var(--sp-5);
  border-top:var(--bw-hairline) solid var(--c-divider);
  background:var(--c-bg-page);
}
.modal__gallery{ display:flex; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap; }
.modal__thumb{
  width:64px; height:64px; padding:var(--sp-1); cursor:pointer;
  background:var(--product-bg); border:var(--bw-hairline) solid var(--c-border);
  border-radius:var(--radius-sm);
}
.modal__thumb img{ width:100%; height:100%; object-fit:var(--product-fit); }
.modal__thumb[aria-current="true"]{ border-color:var(--c-black); border-width:var(--bw-thick); }

@media (max-width:639px){
  .modal__panel{ inset:0; width:100%; animation:modal-up var(--dur-2) var(--ease-out); }
  @keyframes modal-up{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
  .modal__foot{ padding:var(--sp-4); }
  .modal__foot .btn{ min-height:52px; }
}

/* ==========================================================================
   6.7 参数表格
   ========================================================================== */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table__caption{
  text-align:left; padding-bottom:var(--sp-3);
  font:var(--fw-semibold) var(--fs-h6)/var(--lh-h6) var(--font-cn);
}
.spec-table th,.spec-table td{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:var(--bw-hairline) solid var(--c-divider);
  font:var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-cn);
  text-align:left; vertical-align:middle;
}
.spec-table thead th{
  background:var(--c-bg-section);
  font-weight:var(--fw-semibold); color:var(--c-text-primary);
  border-bottom:var(--bw-thick) solid var(--c-black);
  white-space:nowrap;
}
.spec-table tbody tr:nth-child(even){ background:var(--c-bg-section); }
.spec-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.spec-table td.num i{
  font-style:normal; font-size:var(--fs-caption);
  color:var(--c-text-secondary); margin-left:2px;
}
.spec-table th[aria-sort]{ cursor:pointer; }
.spec-table th[aria-sort]::after{ content:" ↕"; color:var(--c-text-tertiary); }
.spec-table th[aria-sort="ascending"]::after{ content:" ↑"; color:var(--c-text-secondary); }
.spec-table th[aria-sort="descending"]::after{ content:" ↓"; color:var(--c-text-secondary); }
.spec-table .is-pending{ font-weight:var(--fw-semibold); color:var(--c-text-primary); }
.spec-table .is-pending::before{ content:"— "; color:var(--c-text-tertiary); }
.spec-table__ask{
  margin-left:var(--sp-2);
  font:var(--fw-medium) var(--fs-caption)/1 var(--font-cn);
  color:var(--c-text-primary); text-underline-offset:3px;
}

/* 长表容器：桌面表头吸顶；窄屏横向滚动 + 首列吸附 */
.table-scroll{
  /* overflow-x 必须全局生效，不能包在 max-width:639px 里：
     平板（640~1023px）下 .spec-table--full 的 min-width:720px 会超出容器，
     没有滚动容器时右侧列会被直接裁掉且无法滚动到可见（实测 768px 下
     scrollWidth 恒等于 clientWidth，scrollLeft 拉不动）。
     只给表格滚动容器加 overflow，产品图容器/卡片容器不受影响。 */
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-scroll__hint{
  display:none; align-items:center; gap:var(--sp-2);
  margin-bottom:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  background:var(--c-bg-section);
  font:var(--fw-regular) var(--fs-caption)/1.5 var(--font-cn);
  color:var(--c-text-secondary);
}
.spec-table--full{ min-width:720px; }   /* 横向滚动的下限，低于此值列会挤坏 */
.spec-table--full thead th{
  position:sticky; top:88px; z-index:var(--z-raised);
}
.spec-table--full tbody th{
  position:sticky; left:0; z-index:var(--z-base);
  /* 背景必须不透明：横滑时下方单元格会透过来，型号列重影 */
  background:var(--c-bg-card);
  border-right:var(--bw-hairline) solid var(--c-border);
}
.spec-table--full tbody tr:nth-child(even) th{ background:var(--c-bg-section); }
/* 首列吸附的表头单元格同样需要不透明背景 + 左侧吸附 */
.spec-table--full thead th:first-child{
  position:sticky; left:0; z-index:var(--z-raised);
  background:var(--c-bg-card);
  border-right:var(--bw-hairline) solid var(--c-border);
}

@media (max-width:1023px){
  .spec-table--full thead th{ top:72px; }
}
@media (max-width:639px){
  .spec-table th,.spec-table td{ padding:var(--sp-3); }
  .table-scroll{ padding-bottom:var(--sp-2); }
  .table-scroll__hint{ display:flex; }
  .spec-table--full thead th{ top:60px; }
  .spec-table--full{ min-width:720px; }
}

/* ==========================================================================
   6.8 表单
   ========================================================================== */
.field{ margin-bottom:var(--sp-5); }
.field__label{
  display:block; margin-bottom:var(--sp-2);
  font:var(--fw-semibold) var(--fs-small)/var(--lh-small) var(--font-cn);
}
.field__req{ color:var(--c-text-primary); }
.field__input{
  width:100%; min-height:48px; padding:var(--sp-3) var(--sp-4);
  background:var(--c-bg-card); color:var(--c-text-primary);
  border:var(--bw-hairline) solid var(--c-border-strong);
  border-radius:var(--radius-sm);
  font:var(--fw-regular) var(--fs-body)/1.5 var(--font-cn);
  transition:border-color var(--transition-color);
  -webkit-appearance:none; appearance:none;
}
.field__input::placeholder{ color:var(--c-text-placeholder); opacity:1; }
.field__input:hover{ border-color:var(--c-black); }
textarea.field__input{ min-height:120px; resize:vertical; }
.field__select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--sp-4) center;
  padding-right:var(--sp-8); cursor:pointer;
}
.field__hint{
  margin-top:var(--sp-1);
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-cn);
  color:var(--c-text-secondary);
}
.field__error{
  display:none; align-items:center; gap:var(--sp-1);
  margin-top:var(--sp-1);
  font:var(--fw-medium) var(--fs-caption)/var(--lh-caption) var(--font-cn);
  color:var(--c-text-primary);
}
.field.is-error .field__error{ display:flex; }
.field.is-error .field__input{
  border-width:var(--bw-thick); border-color:var(--c-black);
  background:var(--st-error-bg);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--gutter); }
.form-grid .field--full{ grid-column:1 / -1; }
@media (max-width:639px){ .form-grid{ grid-template-columns:1fr; } }

/* 企微二维码：固定上限宽度并保持 1:1，不撑破卡片 */
.qr{
  width:100%; max-width:260px; height:auto; aspect-ratio:1/1;
  object-fit:contain; margin-top:var(--sp-4);
}

/* ==========================================================================
   6.9 询盘清单悬浮条 + 移动吸底条
   ========================================================================== */
.inquiry-fab{
  position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:var(--z-sticky);
  width:56px; height:56px; display:grid; place-items:center;
  background:var(--c-black); color:var(--c-white);
  border:0; border-radius:var(--radius-md); cursor:pointer;
  box-shadow:var(--shadow-md);
}
.inquiry-fab[hidden]{ display:none; }
.inquiry-fab__count{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--c-white); color:var(--c-black);
  border:var(--bw-hairline) solid var(--c-black); border-radius:var(--radius-full);
  font:var(--fw-semibold) var(--fs-micro)/1 var(--font-en);
  font-feature-settings:"tnum"1;
}
.inquiry-panel{
  position:fixed; right:var(--sp-5); bottom:calc(var(--sp-5) + 68px);
  z-index:var(--z-sticky); width:320px; max-height:60vh;
  display:flex; flex-direction:column;
  background:var(--c-bg-page);
  border:var(--bw-hairline) solid var(--c-black);
  box-shadow:var(--shadow-lg);
}
.inquiry-panel[hidden]{ display:none; }
.inquiry-panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4); border-bottom:var(--bw-hairline) solid var(--c-divider);
}
.inquiry-panel__title{ font:var(--fw-semibold) var(--fs-h6)/var(--lh-h6) var(--font-cn); }
.inquiry-panel__clear{
  min-height:32px; padding:0 var(--sp-2);
  background:none; border:0; cursor:pointer;
  font:var(--fw-regular) var(--fs-caption)/1 var(--font-cn);
  color:var(--c-text-secondary); text-decoration:underline;
}
.inquiry-panel__list{
  flex:1; overflow-y:auto; list-style:none; margin:0; padding:0;
}
.inquiry-panel__list li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:var(--bw-hairline) solid var(--c-divider);
  font:var(--fw-regular) var(--fs-small)/1.4 var(--font-cn);
}
.inquiry-panel__remove{
  min-width:32px; min-height:32px;
  background:none; border:0; cursor:pointer;
  color:var(--c-text-secondary); font-size:var(--fs-h5); line-height:1;
}
.inquiry-panel__remove:hover{ color:var(--c-text-primary); }
.inquiry-panel__foot{ padding:var(--sp-4); border-top:var(--bw-hairline) solid var(--c-divider); }

.mobile-bar{
  position:fixed; inset:auto 0 0 0; z-index:var(--z-sticky);
  display:none; gap:var(--sp-3);
  background:var(--c-bg-page);
  border-top:var(--bw-hairline) solid var(--c-border);
  padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom));
}
.mobile-bar[hidden]{ display:none; }
@media (max-width:639px){
  .inquiry-fab{ display:none; }
  .mobile-bar{ display:flex; }
  .mobile-bar .btn{ flex:1; }
  .inquiry-panel{
    right:var(--sp-4); left:var(--sp-4); width:auto;
    bottom:calc(72px + env(safe-area-inset-bottom));
    max-height:56vh;
  }
  /* 吸底条出现时给页面留出空间，不遮页脚 */
  body.has-mobile-bar{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   6.10 面包屑
   ========================================================================== */
.breadcrumb{
  padding-block:var(--sp-4);
  border-bottom:var(--bw-hairline) solid var(--c-divider);
}
.breadcrumb__list{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin:0; padding:0; list-style:none;
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-cn);
}
.breadcrumb__list li{ display:flex; align-items:center; gap:var(--sp-2); }
.breadcrumb__list li+li::before{ content:"/"; color:var(--c-text-tertiary); }
.breadcrumb__list a{ color:var(--c-text-secondary); text-decoration:none; }
.breadcrumb__list a:hover{ color:var(--c-text-primary); text-decoration:underline; }
.breadcrumb__list [aria-current]{ color:var(--c-text-primary); font-weight:var(--fw-medium); }
@media (max-width:639px){
  .breadcrumb__list li:not(:last-child):not(:nth-last-child(2)){ display:none; }
}

/* ==========================================================================
   6.11 静态参数图示
   ========================================================================== */
.tech-figure{
  margin:0; background:var(--c-bg-card);
  border:var(--bw-hairline) solid var(--c-border);
  border-radius:var(--radius-md); padding:var(--sp-6);
}
.tech-figure img{ width:100%; height:auto; }   /* 绝不裁切 */
.tech-figure__cap{
  display:flex; gap:var(--sp-2); margin-top:var(--sp-4);
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-cn);
  color:var(--c-text-secondary);
}
.tech-figure__no{
  font-family:var(--font-model); font-feature-settings:"tnum"1;
  color:var(--c-text-tertiary);
}
.tech-figure__dims{
  margin-top:var(--sp-2); padding-top:var(--sp-3);
  border-top:var(--bw-hairline) solid var(--c-divider);
  font-family:var(--font-model); font-size:var(--fs-micro);
  color:var(--c-text-secondary);
}
.tech-figures{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
@media (max-width:639px){
  .tech-figure{ padding:var(--sp-4); }
  .tech-figures{ grid-template-columns:1fr; }
}

/* ==========================================================================
   6.12 数据锚点条
   ========================================================================== */
.data-band{
  position:relative; overflow:hidden;
  background:var(--c-bg-inverse); color:var(--c-text-inverse);
  padding-block:var(--sp-9);
}
.data-band__title{
  font:var(--fw-semibold) var(--fs-h6)/var(--lh-h6) var(--font-cn);
  color:var(--c-text-inverse); margin-bottom:var(--sp-6);
  letter-spacing:var(--ls-h6);
}
.data-band__list{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--gutter); list-style:none; margin:0; padding:0;
  position:relative; z-index:var(--z-content);
}
.data-band__num{
  display:block;
  font:var(--fw-bold) var(--fs-data)/var(--lh-data) var(--font-en);
  letter-spacing:var(--ls-data); font-feature-settings:"tnum"1;
}
.data-band__label{
  display:block; margin-top:var(--sp-2);
  font:var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-cn);
  color:var(--c-text-inverse-2);
}
@media (max-width:1023px){
  .data-band__list{ grid-template-columns:repeat(2,1fr); gap:var(--sp-6); }
}
@media (max-width:639px){
  .data-band__list{ grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
}

/* ==========================================================================
   6.13 状态提示条（Toast / Alert）
   ========================================================================== */
.alert{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border:var(--bw-hairline) solid var(--st-border);
  background:var(--c-bg-section);
  font:var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-cn);
  color:var(--c-text-primary);
}
.alert--success{ background:var(--st-success-bg); }
.alert--warn{ background:var(--st-warn-bg); }
.alert--error{ background:var(--st-error-bg); border-width:var(--bw-thick); }
.alert--error .alert__label{ font-weight:var(--fw-semibold); }
.alert__icon{ font-size:var(--st-icon-size); flex:0 0 auto; line-height:1.4; }
.alert__body{ min-width:0; }
.alert__actions{ margin-top:var(--sp-2); display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.toast{
  position:fixed; left:50%; bottom:var(--sp-8);
  transform:translateX(-50%);
  z-index:var(--z-toast);
  min-width:280px; max-width:calc(100vw - var(--sp-8));
  animation:toast-in var(--dur-2) var(--ease-out);
}
@keyframes toast-in{
  from{ opacity:0; transform:translate(-50%,8px); }
  to{ opacity:1; transform:translate(-50%,0); }
}
.toast-region{
  position:fixed; left:50%; bottom:var(--sp-8); transform:translateX(-50%);
  z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--sp-2);
  width:min(420px,calc(100vw - var(--sp-8)));
  pointer-events:none;
}
.toast-region > *{ pointer-events:auto; }

/* ==========================================================================
   6.14 品牌信任墙（logo 墙）· 基础栅格在 tokens.css，此处补尾格与区块壳
   ========================================================================== */
.logo-wall-section{ padding-block:var(--section-y-desktop); }
.logo-wall{ list-style:none; margin:0; padding:0; }
.logo-wall__item--more{ border-style:dashed; border-color:var(--c-border); }
.logo-wall__item--more .logo-wall__text{
  font-family:var(--font-cn); letter-spacing:0;
}

/* ==========================================================================
   6.15 横幅（内页头图）· 基础样式在 tokens.css，此处补响应式
   ========================================================================== */
@media (max-width:639px){
  .banner{ aspect-ratio:auto; height:200px; }
  .banner__overlay{ padding:var(--sp-5) var(--sp-4); }
  .banner__title{ font-size:var(--fs-h3); }
}

/* ==========================================================================
   通用：区块标题 / 引导句 / 网格（首页与内页共用）
   ========================================================================== */
.section__title{ font:var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-cn); }
.section__lead{
  margin-top:var(--sp-4);
  font:var(--fw-regular) var(--fs-lead)/var(--lh-lead) var(--font-cn);
  color:var(--c-text-secondary); max-width:var(--measure);
}
.section__head{ margin-bottom:var(--sp-7); }
/* 紧排版：区块内紧跟上一段内容时用（如 404 页的系统入口小标题） */
.section__head--tight{ margin-top:var(--sp-9); margin-bottom:var(--sp-5); }
.section__actions{ margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.prose{ max-width:var(--measure); }
.prose p + p{ margin-top:var(--sp-4); }
.prose h2{ font:var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-cn);
  margin-top:var(--sp-7); margin-bottom:var(--sp-3); }
.prose h3{ font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-cn);
  margin-top:var(--sp-5); margin-bottom:var(--sp-2); }
.prose ul{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.prose li{
  position:relative; padding-left:var(--sp-5); margin-top:var(--sp-2);
  color:var(--c-text-secondary);
}
.prose li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:6px; height:1px; background:var(--c-text-secondary);
}
.gray-note{ color:var(--c-text-secondary); }  /* 灰底区块辅助文字专用 #585656 */

/* 可点击卡片（系统卡 / 场景卡） */
.link-card{
  display:flex; flex-direction:column;
  background:var(--c-bg-card);
  border:var(--bw-hairline) solid var(--c-border);
  border-radius:var(--radius-md); overflow:hidden;
  text-decoration:none; color:inherit;
  transition:border-color var(--transition-color);
}
.link-card:hover{ border-color:var(--c-black); }
.link-card__media{
  aspect-ratio:var(--banner-ratio);
  background:var(--product-bg); overflow:hidden;
}
.link-card__media img{ width:100%; height:100%; object-fit:var(--banner-fit); }
.link-card__body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.link-card__title{ font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-cn); }
.link-card__title-en{
  font:var(--fw-regular) var(--fs-caption)/1.4 var(--font-en);
  color:var(--c-text-tertiary);
}
.link-card__desc{
  font:var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-cn);
  color:var(--c-text-secondary);
}
.link-card__more{
  margin-top:auto; padding-top:var(--sp-3);
  font:var(--fw-medium) var(--fs-small)/1.4 var(--font-cn);
  color:var(--c-text-primary);
}

.card-grid{
  display:grid; gap:var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  list-style:none; margin:0; padding:0;
}
@media (max-width:639px){
  .card-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
}

/* ==========================================================================
   几何纹样背景（Hero / 页脚）—— 路径写在 CSS，HTML 不写内联 style
   ========================================================================== */
.hero__geo,
.site-footer__geo,
.data-band__geo{
  background-image:url("../img/brand/geo-grid.svg");
  background-size:var(--geo-cell) var(--geo-cell);
}

/* 首页痛点对照表：两列在移动端也不强制 720px */
.spec-table--compact{ min-width:560px; }

/* 抽屉底部语言切换按钮：去掉浏览器默认按钮外观 */
.lang-switch button{
  min-height:var(--tap-min); padding:0 var(--sp-2);
  background:none; border:0; cursor:pointer;
  font:var(--fw-medium) var(--fs-caption)/1 var(--font-en);
  color:var(--c-text-tertiary);
}
.lang-switch button.is-active{ color:var(--c-text-primary); font-weight:var(--fw-semibold); }

/* ==========================================================================
   JS 渲染用到的类（避免在 JS 字符串里写内联 style）
   ========================================================================== */
.modal__subtitle{
  margin-top:var(--sp-5);
  font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-cn);
}
.modal__list{ margin-top:var(--sp-3); }

.inquiry-summary{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  background:var(--c-bg-section);
  border:var(--bw-hairline) solid var(--c-divider);
  border-radius:var(--radius-md);
}
.inquiry-summary__list{
  width:100%; max-height:220px;
  background:var(--c-bg-card);
  border:var(--bw-hairline) solid var(--c-border);
}
.inquiry-panel__list--empty{ display:block; color:var(--c-text-secondary); }

/* 色点：用 CSS 变量承载颜色，JS 只写 --swatch，不写 style="background:..." */
.swatch{ background:var(--swatch, var(--c-g400)); }

/* 页脚内的品牌字（深底反白），避免在 HTML 里写内联色值 */
.site-header__logo-text--inverse .site-header__logo-brand{ color:var(--c-text-inverse); }
.site-header__logo-text--inverse .site-header__logo-cn{ color:var(--c-text-inverse-2); }

/* ==========================================================================
   通用工具类
   ========================================================================== */
/* 仅供读屏：视觉隐藏但保留在无障碍树中（筛选器下拉等原生控件无法挂 aria-label） */
.visually-hidden{
  position:absolute!important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* 表单状态区内的追加块（M1 失败后追加邮件降级入口时用） */
.form-status__block{ margin-top:var(--sp-3); }
.form-status__block:empty{ display:none; }

/* 型号直查输入行：手机端输入框与按钮上下排，不挤在一行 */
.search-row{
  display:flex; gap:var(--sp-3); align-items:stretch;
  margin-top:var(--sp-4); flex-wrap:wrap;
}
.search-row .field__input{ flex:1 1 240px; min-width:0; margin-bottom:0; }
.search-row .btn{ flex:0 0 auto; }
@media (max-width:479px){
  .search-row{ flex-direction:column; }
  .search-row .btn{ width:100%; }
}

/* 内页横幅内的型号计数徽标 */
.banner__count{
  display:inline-block; margin-top:var(--sp-3);
  padding:var(--sp-1) var(--sp-3);
  border:var(--bw-hairline) solid var(--c-text-inverse);
  font:var(--fw-medium) var(--fs-caption)/1.4 var(--font-en);
  color:var(--c-text-inverse);
}

/* 系统页「怎么用这一套」要点卡：不带媒体区，只用正文区 */
.point-card{
  display:flex; flex-direction:column;
  padding:var(--sp-5);
  background:var(--c-bg-card);
  border:var(--bw-hairline) solid var(--c-border);
  border-radius:var(--radius-md);
}
.point-card__no{
  font:var(--fw-bold) var(--fs-caption)/1 var(--font-en);
  letter-spacing:var(--ls-label);
  color:var(--c-text-tertiary);
}
.point-card__text{
  margin-top:var(--sp-2);
  font:var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-cn);
  color:var(--c-text-secondary);
}

/* 相关系统推荐卡：紧凑横排，无媒体区 */
.sys-card{
  display:flex; align-items:baseline; gap:var(--sp-3);
  padding:var(--sp-5);
  background:var(--c-bg-card);
  border:var(--bw-hairline) solid var(--c-border);
  border-radius:var(--radius-md);
  text-decoration:none; color:inherit;
  transition:border-color var(--transition-color);
}
.sys-card:hover{ border-color:var(--c-black); }
.sys-card__title{
  font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-cn);
}
.sys-card__more{
  margin-left:auto; flex:0 0 auto;
  font:var(--fw-medium) var(--fs-small)/1 var(--font-cn);
  color:var(--c-text-secondary);
}
.sys-grid{
  display:grid; gap:var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  list-style:none; margin:0; padding:0;
}
@media (max-width:639px){
  .sys-grid{ grid-template-columns:1fr; gap:var(--sp-3); }
  .sys-card{ padding:var(--sp-4); }
}

/* 静态图示（design-spec §6.11）：内页「安装示意 / 长度矩阵」等结构化说明 */
.spec-diagram{
  padding:var(--sp-5);
  background:var(--c-bg-card);
  border:var(--bw-hairline) solid var(--c-border);
  border-radius:var(--radius-md);
}
.spec-diagram__title{
  font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-cn);
}
.spec-diagram__note{
  margin-top:var(--sp-2);
  font:var(--fw-regular) var(--fs-caption)/1.5 var(--font-cn);
  color:var(--c-text-secondary);
}
/* 长度条：宽度用内联 --len 变量表达，HTML 不写像素宽度 */
.len-bar{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2); }
.len-bar__track{ flex:1 1 auto; height:8px; background:var(--c-bg-section); border:var(--bw-hairline) solid var(--c-border); }
.len-bar__fill{ height:100%; width:var(--len, 50%); background:var(--c-text-tertiary); }
.len-bar__value{
  flex:0 0 auto; min-width:6ch;
  font:var(--fw-medium) var(--fs-caption)/1 var(--font-en);
  color:var(--c-text-secondary);
  font-variant-numeric:tabular-nums;
}
.len-bars{ list-style:none; margin:var(--sp-4) 0 0; padding:0; }
.len-bars__row{ padding:var(--sp-3) 0; border-top:var(--bw-hairline) solid var(--c-divider); }
.len-bars__model{
  font:var(--fw-medium) var(--fs-small)/1.4 var(--font-en);
  font-variant-numeric:tabular-nums;
}
.len-bars__name{
  margin-left:var(--sp-2);
  font:var(--fw-regular) var(--fs-caption)/1.4 var(--font-cn);
  color:var(--c-text-secondary);
}

/* 场景页 / 配件页的位置卡标题行 */
.scene-head{
  display:flex; align-items:baseline; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-3);
}
.scene-head__no{
  font:var(--fw-bold) var(--fs-h4)/1 var(--font-en);
  color:var(--c-text-tertiary);
}

/* 页面内锚点跳转条：场景页顶部快速定位到某个柜体位置 */
.anchor-bar{
  border-top:var(--bw-hairline) solid var(--c-divider);
  border-bottom:var(--bw-hairline) solid var(--c-divider);
  background:var(--c-bg-card);
}
/* 锚点跳转时给固定头部留出空间，避免标题被顶栏遮住 */
#scene-list > .section{ scroll-margin-top:var(--sp-9); }
.anchor-bar__list{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  list-style:none; margin:0; padding-block:var(--sp-3);
}
.anchor-bar__link{
  display:inline-flex; align-items:center;
  min-height:var(--tap-min); padding:0 var(--sp-4);
  border:var(--bw-hairline) solid var(--c-border);
  font:var(--fw-medium) var(--fs-small)/1 var(--font-cn);
  color:var(--c-text-primary); text-decoration:none;
  transition:border-color var(--transition-color);
}
.anchor-bar__link:hover{ border-color:var(--c-black); }
@media (max-width:639px){
  /* 移动端不横向滚动，直接换行，避免与页面横向滚动冲突 */
  .anchor-bar__list{ gap:var(--sp-2); }
  .anchor-bar__link{ padding:0 var(--sp-3); font:var(--fw-medium) var(--fs-caption)/1 var(--font-cn); }
}

/* 关于页能力板块 */
.cap-grid{
  display:grid; gap:var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  list-style:none; margin:0; padding:0;
}
@media (max-width:639px){
  .cap-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
}

/* 图片说明（图注）：灰度区块内的辅助文字统一 #585656 */
.figure{ margin:0; }
.figure__img{ width:100%; height:auto; display:block; background:var(--product-bg); }
.figure__cap{
  margin-top:var(--sp-3);
  font:var(--fw-regular) var(--fs-caption)/1.5 var(--font-cn);
  color:var(--c-text-secondary);
}