/* ==========================================================================
 * 对外站点样式（CARSPARE public storefront）
 *
 * 只引用 apex-vi.css 的 --apx-* 令牌，不新增品牌色、状态色或字体。
 * 加载顺序：apex-vi.css -> storefront.css（见 views/storefront/layout.php）。
 * 分区（按文件内出现顺序）：Header / Home hero / Sections / Page headers /
 *   Product catalog / Product detail / EPC workspace / RFQ drawer & toast / Footer。
 * 维护：改视觉前先读 docs/brand/00-Apex-Auto-VI系统与设计规范.md；
 *       新增或修改组件必须同步品牌规范与 docs/frontend/00-对外站点页面.md，
 *       并运行 php tools/vi_check.php（错误数必须为 0）。
 * 约定：颜色/间距/圆角/动效一律走令牌；结构分隔用 1px 边线，浮层才用阴影。
 * ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.sf-body {
  margin: 0;
  background: var(--apx-canvas);
  color: var(--apx-ink);
  font-family: var(--apx-font-sans);
  font-size: var(--apx-text-body);
  line-height: var(--apx-leading-body);
  -webkit-font-smoothing: antialiased;
}

.sf-body h1,
.sf-body h2,
.sf-body h3,
.sf-body h4,
.sf-body p,
.sf-body dl,
.sf-body dd,
.sf-body figure {
  margin: 0;
}

/* 正文链接使用零优先级默认色；按钮型链接仍由 .apx-btn--primary 等组件色控制。 */
:where(.sf-body a) {
  color: var(--apx-forest-700);
  text-decoration: none;
}

/* Hover 也保持零优先级，避免覆盖实心主按钮的白色前景。 */
:where(.sf-body a:hover) {
  color: var(--apx-forest-800);
}

.sf-body img {
  max-width: 100%;
}

.sf-body button,
.sf-body input,
.sf-body select,
.sf-body textarea {
  font: inherit;
}

/*
 * 零优先级重置：只提供默认继承色，不压过按钮自己的白字/状态色。
 * 若写成 .sf-body button（0,1,1），会盖掉 .site-search__button、.sf-hotspot
 * 等 0,1,0 规则，导致 Forest 600 实心按钮出现深色文字。
 */
:where(.sf-body button) {
  color: inherit;
}

.sf-body :focus-visible {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

.sf-body--workspace {
  background: var(--apx-surface);
}

.sf-container {
  width: min(var(--apx-container), calc(100% - 64px));
  margin-inline: auto;
}

.sf-main {
  min-height: 70vh;
}

.sf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sf-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 8px 12px;
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-3);
  transform: translateY(-160%);
}

.sf-skip-link:focus {
  transform: translateY(0);
}

.sf-mono {
  font-family: var(--apx-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}

.sf-kicker {
  display: inline-block;
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: var(--apx-text-label);
  font-weight: 700;
  letter-spacing: var(--apx-tracking-label);
  line-height: 1.35;
  text-transform: uppercase;
}

.sf-muted {
  color: var(--apx-slate-500);
}

.sf-small {
  font-size: var(--apx-text-body-sm);
}

.sf-btn-block {
  width: 100%;
}

.sf-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--apx-text-body-sm);
  font-weight: 600;
}

.sf-text-link svg,
.sf-body .apx-btn svg,
.sf-body .site-nav svg,
.sf-body .site-utility svg,
.sf-body .site-inquiry svg,
.sf-body .sf-purchase-notes svg,
.sf-body .sf-data-card svg,
.sf-body .sf-trust-line svg {
  width: 16px;
  height: 16px;
}

.sf-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--apx-forest-300);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--apx-forest-300) 18%, transparent);
}

.sf-icon-tile {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
}

.sf-icon-tile svg {
  width: 21px;
  height: 21px;
}

.sf-icon-btn {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface-raised);
  color: var(--apx-slate-700);
  cursor: pointer;
  transition:
    background-color var(--apx-duration-fast) var(--apx-ease-standard),
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-icon-btn:hover {
  border-color: var(--apx-slate-400);
  background: var(--apx-surface-sunken);
  color: var(--apx-ink);
}

.sf-icon-btn svg {
  width: 18px;
  height: 18px;
}

.sf-icon-btn--light {
  border-color: var(--apx-line);
  background: color-mix(in srgb, var(--apx-white) 86%, transparent);
}

.sf-icon-btn--solid {
  border-color: var(--apx-forest-600);
  background: var(--apx-forest-600);
  color: var(--apx-white);
}

.sf-icon-btn--solid:hover {
  border-color: var(--apx-forest-700);
  background: var(--apx-forest-700);
  color: var(--apx-white);
}

.sf-field {
  display: grid;
  gap: 6px;
}

.sf-field label {
  color: var(--apx-slate-700);
  font-size: var(--apx-text-body-sm);
  font-weight: 600;
}

.sf-field select,
.sf-field input,
.sf-inline-search input,
.sf-epc-finder select,
.sf-catalog-search input,
.site-search input {
  min-width: 135px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface-raised);
  color: var(--apx-ink);
}

.sf-field select:focus,
.sf-field input:focus,
.sf-inline-search input:focus,
.sf-epc-finder select:focus,
.sf-catalog-search input:focus,
.site-search input:focus {
  border-color: var(--apx-forest-600);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--apx-forest-600) 18%, transparent);
}

/* Header —— 工具条（36px）+ 营销抬头（108px）/ 工作台抬头（72px）；由 views/storefront/partials/header.php 使用 */

.site-header {
  /* 抬头整体吸顶：深色工具条（36px）+ 主抬头（108px）一起冻结在顶部，
     滚动时两者都保持可见；工作台抬头没有工具条，同样整条吸顶。 */
  position: sticky;
  top: 0;
  z-index: var(--apx-z-header);
  background: var(--apx-white);
  transition: box-shadow var(--apx-duration-base) var(--apx-ease-standard);
}

/* 吸住之后加一层很轻的浮层阴影，和下面内容区分（VI：浮层才用阴影） */
.site-header.is-stuck {
  box-shadow: var(--apx-shadow-2);
}

/* EPC 工作台：72px 深色条本身直接吸顶（它没有工具条，负 top 不适用） */
.site-header--workspace {
  position: sticky;
  top: 0;
}

/* 页内锚点（#epc-showcase / #data-layers / #bulk-rfq）跳转时给吸顶抬头留出高度 */
.sf-section[id] {
  scroll-margin-top: calc(var(--apx-header-utility) + var(--apx-header-marketing) + 12px);
}

.site-utility {
  height: var(--apx-header-utility);
  background: var(--apx-charcoal-950);
  color: var(--apx-on-dark-muted);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.site-utility__inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-utility__signal {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--apx-on-dark);
  white-space: nowrap;
}

.site-utility__tag {
  padding: 2px 6px;
  border-radius: var(--apx-radius-xs);
  background: color-mix(in srgb, var(--apx-charcoal-800) 72%, transparent);
  color: var(--apx-forest-200);
}

/* Utility account actions: Sign in / Register / My account / Sign out / Contact us.
   Account routes are live customer pages; Contact us remains a controlled placeholder. */
.sf-utility-actions {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sf-utility-action {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--apx-radius-action);
  background: transparent;
  color: var(--apx-on-dark-muted);
  font-family: var(--apx-font-mono);
  font-size: var(--apx-text-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--apx-duration-fast) var(--apx-ease-standard),
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-utility-form {
  display: inline-flex;
  margin: 0;
}

.sf-utility-action:hover {
  background: var(--apx-charcoal-800);
  color: var(--apx-white);
}

.sf-utility-action:focus-visible {
  outline: 2px solid var(--apx-forest-300);
  outline-offset: 2px;
}

.sf-body .site-utility .sf-utility-action svg {
  width: 13px;
  height: 13px;
  color: currentColor;
}

.sf-utility-action--outline {
  border-color: var(--apx-charcoal-800);
  color: var(--apx-on-dark);
}

.sf-utility-action--outline:hover {
  border-color: var(--apx-forest-300);
  background: transparent;
  color: var(--apx-forest-300);
}

.sf-utility-action--primary {
  background: var(--apx-forest-600);
  color: var(--apx-white);
  font-weight: 600;
}

.sf-utility-action--primary:hover {
  background: var(--apx-forest-700);
  color: var(--apx-white);
}

.site-utility svg {
  width: 13px;
  height: 13px;
  color: var(--apx-forest-300);
}

.site-masthead {
  border-bottom: 1px solid var(--apx-line);
  background: color-mix(in srgb, var(--apx-white) 96%, var(--apx-surface-cool));
}

.site-masthead__inner {
  display: flex;
  min-height: var(--apx-header-marketing);
  align-items: center;
  gap: 28px;
}

.site-brand {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.site-brand picture {
  display: flex;
}

/* Logo lockup（2026-10-21）：字标帽高 = 图标高 75%，整标宽高比约 6.03:1；
   296px 宽对应约 49px 高，保持原有视觉高度，仅按新比例加宽。 */
.site-brand img {
  width: 265px;
  height: auto;
  max-height: 54px;
  object-fit: contain;
}

.site-brand__descriptor {
  padding-left: 2px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 19px;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: var(--apx-slate-700);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--apx-forest-700);
}

.site-nav__link.is-active {
  font-weight: 700;
}

.site-nav__link.is-active::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  background: var(--apx-forest-600);
  content: "";
}

.site-nav__badge {
  padding: 2px 5px;
  border-radius: var(--apx-radius-xs);
  background: var(--apx-forest-100);
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
}

.site-search {
  display: flex;
  min-width: 250px;
  max-width: 500px;
  flex: 1 1 350px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-card);
  background: var(--apx-surface-raised);
}

.site-search__input {
  min-width: 0;
  min-height: 44px;
  flex: 1;
  padding-inline: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.site-search__input:focus {
  box-shadow: none;
}

.site-search__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 0;
  background: var(--apx-forest-600);
  color: var(--apx-white);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.site-search__button:hover {
  background: var(--apx-forest-700);
}

.site-search__button svg {
  width: 16px;
  height: 16px;
}

.site-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.site-inquiry {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--apx-radius-card);
  background: transparent;
  color: var(--apx-ink);
  text-align: left;
  cursor: pointer;
}

.site-inquiry:hover {
  background: var(--apx-surface-sunken);
}

.site-inquiry > svg {
  width: 21px;
  height: 21px;
  color: var(--apx-forest-700);
}

.site-inquiry__copy {
  display: flex;
  flex-direction: column;
}

.site-inquiry__copy strong {
  font-size: 12px;
}

.site-inquiry__copy small {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
}

.site-bom-link {
  min-height: 42px;
}

.site-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  cursor: pointer;
}

.site-mobile-nav {
  border-top: 1px solid var(--apx-line);
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.site-mobile-nav nav {
  display: grid;
  padding: 8px 24px 14px;
}

.site-mobile-nav a,
.site-mobile-nav button {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--apx-line);
  background: transparent;
  color: var(--apx-ink);
  text-align: left;
  cursor: pointer;
}

.site-mobile-nav form {
  margin: 0;
}

.site-workspace-bar {
  position: sticky;
  top: 0;
  z-index: var(--apx-z-header);
  height: var(--apx-header-workspace);
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-charcoal-950);
  color: var(--apx-on-dark);
}

.site-workspace-bar__inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  gap: 24px;
  padding-inline: 20px;
}

.site-workspace-bar .site-brand img {
  width: 236px;
  max-height: 42px;
}

.site-workspace-bar .site-brand__descriptor {
  color: var(--apx-on-dark-muted);
}

.site-workspace-bar .site-search {
  max-width: 580px;
  border-color: var(--apx-charcoal-800);
  background: var(--apx-charcoal-900);
}

.site-workspace-bar .site-search__input {
  color: var(--apx-white);
}

.site-workspace-bar .site-search__input::placeholder {
  color: var(--apx-on-dark-muted);
}

.site-workspace-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.site-workspace-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--apx-on-dark-muted);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.site-workspace-link:hover {
  color: var(--apx-white);
}

.site-inquiry--compact {
  min-width: 46px;
  min-height: 40px;
  justify-content: center;
  border: 1px solid var(--apx-charcoal-800);
  background: color-mix(in srgb, var(--apx-white) 8%, transparent);
  color: var(--apx-white);
  font-family: var(--apx-font-mono);
  font-size: 11px;
}

.site-inquiry--compact > svg {
  color: var(--apx-forest-300);
}

/* Home hero —— 首页首屏：标题、OE 搜索、指标四宫格与右侧发动机线稿面板（views/storefront/home.php） */

.sf-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--apx-line);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--apx-forest-100) 65%, transparent), transparent 35%),
    var(--apx-surface-raised);
}

.sf-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--apx-charcoal-900) 11%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--apx-charcoal-900) 3%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--apx-charcoal-900) 3%, transparent) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
  pointer-events: none;
}

.sf-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
  gap: 64px;
  align-items: center;
  padding-block: 72px 56px;
}

.sf-hero__copy {
  position: relative;
  z-index: 1;
}

.sf-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sf-kicker-row span:not(:last-child)::after {
  margin-left: 12px;
  color: var(--apx-slate-300);
  content: "•";
}

.sf-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 6px 10px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: color-mix(in srgb, var(--apx-white) 76%, transparent);
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.sf-hero h1 {
  max-width: 800px;
  margin-top: 18px;
  color: var(--apx-ink);
  font-size: clamp(38px, 4.5vw, 68px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.sf-hero h1 span {
  color: var(--apx-forest-700);
}

.sf-hero__lead {
  max-width: 680px;
  margin-top: 22px;
  color: var(--apx-slate-600);
  font-size: 16px;
  line-height: 1.7;
}

.sf-hero-search {
  display: grid;
  max-width: 760px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 28px;
  padding: 7px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-overlay);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-2);
}

.sf-hero-search__field input {
  width: 100%;
  height: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--apx-ink);
}

.sf-hero-search__field input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--apx-forest-600) 25%, transparent);
}

.sf-hero-search .apx-btn {
  min-height: 48px;
}

.sf-hero__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--apx-slate-500);
  font-size: 11px;
}

.sf-hero__quick a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--apx-slate-700);
  font-weight: 600;
}

.sf-hero__quick a:hover {
  color: var(--apx-forest-700);
}

.sf-hero__quick svg {
  width: 14px;
  height: 14px;
}

.sf-metrics-ribbon {
  display: grid;
  /* 首屏指标固定 3 项：Aftermarket SKUs / Used SKUs / EPC 图纸（爆炸图）。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: color-mix(in srgb, var(--apx-white) 82%, var(--apx-surface-cool));
}

.sf-metrics-ribbon > div {
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--apx-line);
}

.sf-metrics-ribbon > div:last-child {
  border-right: 0;
}

.sf-metrics-ribbon strong {
  display: block;
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.sf-metrics-ribbon span {
  display: block;
  margin-top: 4px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
}

.sf-hero__visual {
  position: relative;
}

.sf-hero-board {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--apx-charcoal-800);
  border-radius: var(--apx-radius-overlay);
  background: var(--apx-charcoal-950);
  box-shadow: var(--apx-shadow-3);
  color: var(--apx-on-dark);
}

.sf-hero-board--engine {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--apx-ink);
}

.sf-hero-board__top,
.sf-hero-board__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
}

.sf-hero-board__top {
  border-bottom: 1px solid color-mix(in srgb, var(--apx-white) 12%, transparent);
  color: var(--apx-on-dark-muted);
  font-size: 9px;
}

.sf-hero-board--engine .sf-hero-board__top,
.sf-hero-board--engine .sf-hero-board__bottom {
  padding-inline: 0;
}

.sf-hero-board--engine .sf-hero-board__top {
  border-bottom-color: var(--apx-line);
  color: var(--apx-slate-600);
}

.sf-hero-board__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--apx-forest-200);
}

.sf-hero-board--engine .sf-hero-board__live {
  color: var(--apx-forest-700);
}

.sf-hero-board--engine .sf-hero-board__live .sf-status-dot {
  background: var(--apx-forest-600);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--apx-forest-600) 12%, transparent);
}

.sf-hero-board__canvas {
  position: relative;
  min-height: 420px;
  background:
    linear-gradient(color-mix(in srgb, var(--apx-white) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--apx-white) 3%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--apx-forest-500) 18%, transparent), transparent 40%);
  background-size: 24px 24px, 24px 24px, auto;
}

.sf-hero-board__cad {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  color: var(--apx-on-dark-muted);
}

.sf-hero-board__canvas > img {
  position: absolute;
  inset: 11% 8%;
  width: 84%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px color-mix(in srgb, var(--apx-charcoal-950) 60%, transparent));
}

.sf-hero-board__canvas--engine {
  padding: 0;
  background: transparent;
}

.sf-hero-board__engine-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.sf-cad-callout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--apx-white) 18%, transparent);
  border-radius: var(--apx-radius-control);
  background: color-mix(in srgb, var(--apx-charcoal-950) 88%, transparent);
  box-shadow: var(--apx-shadow-2);
  backdrop-filter: blur(8px);
}

.sf-cad-callout > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--apx-white);
  border-radius: 50%;
  background: var(--apx-forest-700);
  box-shadow: 0 0 0 1px var(--apx-charcoal-800);
  color: var(--apx-white);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 700;
}

.sf-cad-callout div {
  display: flex;
  flex-direction: column;
}

.sf-cad-callout small {
  color: var(--apx-on-dark-muted);
  font-family: var(--apx-font-mono);
  font-size: 8px;
}

.sf-cad-callout strong {
  color: var(--apx-white);
  font-size: 10px;
}

.sf-cad-callout--one {
  top: 18%;
  left: 5%;
}

.sf-cad-callout--two {
  right: 5%;
  bottom: 16%;
}

.sf-hero-board__bottom {
  border-top: 1px solid color-mix(in srgb, var(--apx-white) 12%, transparent);
}

.sf-hero-board--engine .sf-hero-board__bottom {
  border-top-color: var(--apx-line);
  color: var(--apx-ink);
}

.sf-hero-board--engine .sf-hero-board__bottom strong {
  color: var(--apx-ink);
}

.sf-hero-board--engine .sf-hero-board__bottom .sf-kicker {
  color: var(--apx-forest-700);
}

.sf-hero-board__bottom > div {
  min-width: 0;
}

.sf-hero-board__bottom strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--apx-white);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-hero__data-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--apx-slate-500);
  font-size: 9px;
  text-transform: uppercase;
}

.sf-hero__data-note span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sf-hero__data-note svg {
  width: 14px;
  height: 14px;
  color: var(--apx-forest-600);
}

.sf-part-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--apx-charcoal-900) 10%, transparent) 1px, transparent 1px),
    var(--apx-surface-sunken);
  background-size: 24px 24px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.sf-part-placeholder svg {
  width: 42px;
  height: 42px;
  color: var(--apx-slate-400);
}

.sf-part-placeholder--hero {
  position: absolute;
  inset: 11% 8%;
  width: 84%;
  height: 78%;
  border: 1px dashed var(--apx-charcoal-800);
  border-radius: var(--apx-radius-card);
  background: color-mix(in srgb, var(--apx-charcoal-800) 55%, transparent);
  color: var(--apx-on-dark-muted);
}

.sf-part-placeholder--large {
  min-height: 440px;
}

/* Sections —— 内容区块通用骨架：区块间距、区块头、卡片网格与三层数据卡（首页/分类/列表共用） */

.sf-section {
  padding-block: 80px;
}

.sf-section--tight {
  padding-block: 42px;
}

/* 分类树区块：压缩顶部留白，使 10 个大类卡片整体上移、更贴近页头指标区 */
.sf-section--category-tree {
  padding-block: 40px 72px;
}

.sf-section--surface {
  border-block: 1px solid var(--apx-line);
  background: var(--apx-surface-cool);
}

.sf-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}

.sf-section-head > div:first-child {
  max-width: 760px;
}

.sf-section-head h2 {
  margin-top: 7px;
  color: var(--apx-ink);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.sf-section-head p {
  max-width: 470px;
  color: var(--apx-slate-600);
  font-size: 13px;
  line-height: 1.7;
}

.sf-section-head__meta {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.sf-lookup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sf-lookup-card {
  padding: 24px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-1);
}

.sf-lookup-card--epc {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--apx-forest-100) 72%, transparent), transparent 40%),
    var(--apx-white);
}

.sf-lookup-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sf-lookup-card__head h3 {
  margin-top: 2px;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.sf-lookup-card > p {
  margin-top: 16px;
  color: var(--apx-slate-600);
  font-size: 13px;
}

.sf-inline-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 20px;
}

.sf-source-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.sf-epc-finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 20px;
}

.sf-route-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.sf-route-steps i {
  width: 16px;
  height: 1px;
  background: var(--apx-line-strong);
}

.sf-workflow-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-workflow-rail span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-right: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.sf-workflow-rail span:last-child {
  border-right: 0;
}

.sf-workflow-rail b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--apx-surface-sunken);
  color: var(--apx-slate-600);
  font-size: 8px;
}

.sf-workflow-rail .is-active {
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
}

.sf-workflow-rail .is-active b {
  background: var(--apx-forest-600);
  color: var(--apx-white);
}

.sf-epc-preview {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr) 330px;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-2);
}

.sf-epc-preview__tree {
  display: flex;
  min-height: 510px;
  flex-direction: column;
  padding: 18px 14px;
  border-right: 1px solid var(--apx-line);
  background: var(--apx-surface);
}

.sf-epc-preview__tree > strong {
  margin-top: 4px;
  font-family: var(--apx-font-mono);
  font-size: 11px;
}

.sf-tree-list {
  display: grid;
  gap: 7px;
  margin-top: 18px;
}

.sf-tree-list > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--apx-line);
  border-left: 2px solid transparent;
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-tree-list > div.is-active {
  border-left-color: var(--apx-forest-600);
  background: var(--apx-forest-050);
}

.sf-tree-list > div > span {
  color: var(--apx-forest-700);
}

.sf-tree-list svg {
  width: 18px;
  height: 18px;
}

.sf-tree-list small {
  display: block;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
}

.sf-tree-list strong {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
}

.sf-epc-preview__sync {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
}

.sf-epc-preview__sync svg {
  width: 15px;
  height: 15px;
  color: var(--apx-forest-700);
}

.sf-epc-preview__canvas {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--apx-surface-sunken);
}

.sf-canvas-toolbar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-white);
  font-size: 10px;
}

.sf-diagram-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--diagram-ratio, 16 / 11);
  overflow: hidden;
  border: 1px solid var(--apx-line);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--apx-charcoal-900) 8%, transparent) 1px, transparent 1px),
    var(--apx-white);
  background-size: 24px 24px;
  transition: transform var(--apx-duration-fast) var(--apx-ease-standard);
  transform-origin: center;
}

.sf-diagram-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.sf-epc-preview__canvas .sf-diagram-frame {
  margin: auto;
  border: 0;
  border-radius: 0;
}

.sf-hotspot {
  /* 服务端百分比坐标是唯一锚点；按钮只做自身中心对齐，不再叠加横向漂移。 */
  position: absolute;
  z-index: 3;
  display: inline-flex;
  /* 引脚尺寸：短编号呈圆形，长编号（如 43330K）自然拉成胶囊；整体压小以免盖住图面 */
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid var(--apx-white);
  border-radius: 5px;
  /* 默认半透明，避免成片引脚遮住 EPC 零件轮廓；Hover / Focus / 选中再恢复实色。 */
  background: color-mix(in srgb, var(--apx-forest-700) 50%, transparent);
  box-shadow: 0 0 0 1px var(--apx-charcoal-800), var(--apx-shadow-2);
  color: var(--apx-white);
  cursor: pointer;
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--apx-charcoal-900) 70%, transparent);
  transform: translate(-50%, -50%);
  transition:
    background-color var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard),
    text-shadow var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-hotspot:hover,
.sf-hotspot:focus-visible,
.sf-hotspot.is-focus,
.sf-hotspot.is-highlight,
.sf-hotspot.is-selected {
  background: var(--apx-forest-600);
  box-shadow:
    0 0 0 1px var(--apx-charcoal-800),
    0 0 0 5px color-mix(in srgb, var(--apx-forest-600) 22%, transparent),
    var(--apx-shadow-2);
  text-shadow: none;
  transform: translate(-50%, -50%) scale(1.08);
}

.sf-hotspot--static {
  pointer-events: none;
  font-size: 8px;
}

.sf-hotspot--focus {
  /* 定位热点保留外环强调，背景改为半透明，避免遮住 EPC 图面下方的零件轮廓与 callout。 */
  background: color-mix(in srgb, var(--apx-forest-600) 60%, transparent);
  box-shadow:
    0 0 0 1px var(--apx-charcoal-800),
    0 0 0 6px color-mix(in srgb, var(--apx-forest-600) 20%, transparent),
    var(--apx-shadow-2);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--apx-charcoal-900) 70%, transparent);
}

/*
 * 详情页 EPC 面板：右侧 All diagram OEs 悬停时的临时热点。
 * 这些热点由服务端一次性渲染并默认隐藏，避免为每次悬停发请求；JS 只切换 is-visible。
 * 默认不占位、不可点击、不进入无障碍树（模板已加 aria-hidden），显示时用比默认热点
 * 更清晰的 Forest 600 半透明底和 5px 外环，与当前 OE 的 6px 定位环区分。
 */
.sf-hotspot--preview {
  display: none;
  z-index: 4;
  pointer-events: none;
}

.sf-hotspot--preview.is-visible {
  display: inline-flex;
  background: color-mix(in srgb, var(--apx-forest-600) 62%, transparent);
  box-shadow:
    0 0 0 1px var(--apx-charcoal-800),
    0 0 0 5px color-mix(in srgb, var(--apx-forest-600) 18%, transparent),
    var(--apx-shadow-2);
}

.sf-epc-preview__schedule {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-left: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.sf-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-schedule-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--apx-line);
  border-left: 2px solid transparent;
  border-radius: var(--apx-radius-control);
}

.sf-schedule-row.is-focus {
  border-left-color: var(--apx-forest-600);
  background: var(--apx-forest-050);
}

.sf-schedule-row .sf-mono {
  display: block;
  font-size: 10px;
}

.sf-schedule-row small {
  display: block;
  overflow: hidden;
  color: var(--apx-slate-500);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-pin {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--apx-white);
  border-radius: 50%;
  background: var(--apx-forest-700);
  box-shadow: 0 0 0 1px var(--apx-charcoal-800);
  color: var(--apx-white);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  font-weight: 700;
}

.sf-pin--small {
  /* 与 EPC 页 .sf-epc-rowitem__ref 对齐：无描边/阴影的 Forest 胶囊编号。 */
  width: auto;
  min-width: 48px;
  min-height: 26px;
  height: 26px;
  padding-inline: 5px;
  border: 0;
  border-radius: var(--apx-radius-pill);
  background: var(--apx-forest-600);
  box-shadow: none;
  /* All diagram OEs 的 callout 数字是客户对照图面的主索引，按 VI 热点基线维持 10px。 */
  font-size: 10px;
  font-weight: 600;
}

.sf-diagram-line.is-published .sf-pin--small {
  background: var(--apx-forest-700);
}

.sf-epc-preview__schedule > .apx-btn {
  margin-top: auto;
}

.sf-diagram-empty {
  display: flex;
  min-height: 420px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  color: var(--apx-slate-500);
  text-align: center;
}

.sf-diagram-empty svg {
  width: 46px;
  height: 46px;
  color: var(--apx-slate-400);
}

.sf-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.sf-data-card {
  padding: 24px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-data-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sf-index {
  color: var(--apx-slate-300);
  font-family: var(--apx-font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.sf-data-card h3 {
  margin-top: 5px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.sf-data-card p {
  margin-top: 12px;
  color: var(--apx-slate-600);
  font-size: 13px;
}

.sf-data-card__metric {
  margin-top: 22px;
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.sf-data-card__metric span {
  color: var(--apx-slate-500);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sf-data-card__meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
}

.sf-trust-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 13px 16px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  color: var(--apx-slate-600);
  font-size: 11px;
}

.sf-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sf-brand-grid--wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 首页品牌墙固定最多 8 行：随列数同步隐藏溢出条目，服务端仍保留热门顺序的前 32 个。 */
@media (max-width: 1199px) {
  .sf-brand-grid--home-coverage > :nth-child(n + 25) {
    display: none;
  }
}

@media (max-width: 1023px) {
  .sf-brand-grid--home-coverage > :nth-child(n + 17) {
    display: none;
  }
}

@media (max-width: 767px) {
  .sf-brand-grid--home-coverage > :nth-child(n + 9) {
    display: none;
  }
}

.sf-brand-tile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  color: var(--apx-ink);
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-brand-tile:hover {
  border-color: var(--apx-forest-500);
  color: var(--apx-ink);
  transform: translateY(-2px);
}

.sf-brand-tile__monogram {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 11px;
  font-weight: 700;
}

.sf-brand-tile__monogram.has-logo {
  padding: 5px;
  border-color: var(--apx-line);
  background: var(--apx-white);
}

.sf-brand-tile__monogram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-brand-tile > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.sf-brand-tile strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-brand-tile small {
  display: block;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-brand-tile > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--apx-slate-400);
}

.sf-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sf-category-tile {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  color: var(--apx-ink);
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    box-shadow var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-category-tile:hover {
  border-color: var(--apx-forest-500);
  box-shadow: var(--apx-shadow-2);
  color: var(--apx-ink);
  transform: translateY(-3px);
}

.sf-category-tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--apx-slate-400);
  font-size: 10px;
}

.sf-category-tile h3 {
  margin-top: 18px;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.sf-category-tile p {
  margin-top: 8px;
  color: var(--apx-slate-600);
  font-size: 11px;
  line-height: 1.65;
}

.sf-category-tile__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.sf-category-tile__bottom svg {
  width: 16px;
  height: 16px;
}

.sf-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sf-product-grid--catalog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-product-grid--related {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sf-part-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    box-shadow var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-part-card:hover {
  border-color: var(--apx-slate-300);
  box-shadow: var(--apx-shadow-2);
  transform: translateY(-2px);
}

.sf-part-card__visual {
  position: relative;
  padding: 12px;
  background: var(--apx-surface);
}

.sf-part-card__image-link {
  display: block;
  aspect-ratio: 1 / 0.87;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-part-card__image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--apx-duration-base) var(--apx-ease-standard);
}

.sf-part-card:hover .sf-part-card__image-link img {
  transform: scale(1.025);
}

.sf-part-card__flags {
  position: absolute;
  top: 18px;
  right: 18px;
  left: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
  pointer-events: none;
}

.sf-badge-neutral {
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--apx-white) 80%, transparent);
  border-radius: var(--apx-radius-control);
  background: color-mix(in srgb, var(--apx-white) 88%, transparent);
  color: var(--apx-slate-700);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.sf-part-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px;
}

.sf-part-card__eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--apx-slate-500);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sf-part-card__brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.sf-part-card__brand img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  object-fit: contain;
}

.sf-part-card__brand > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-part-card__eyebrow .sf-mono {
  /* OE 是客户选件的首要识别字段，列表卡片单独提升字号与字重。 */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--apx-forest-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-part-card h3 {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.sf-part-card h3 a {
  color: var(--apx-ink);
}

.sf-part-card__commercial {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.sf-part-card__commercial span {
  display: block;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.sf-part-card__commercial strong {
  display: block;
  margin-top: 2px;
  font-family: var(--apx-font-mono);
  font-size: 12px;
}

.sf-part-card__suppliers {
  text-align: right;
}

.sf-part-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 8px;
  border-top: 1px solid var(--apx-line);
}

.sf-part-card__foot .apx-btn {
  min-height: 34px;
  padding-inline: 8px;
  font-size: 11px;
}

.sf-add-rfq {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-action);
  background: var(--apx-white);
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.sf-add-rfq:hover {
  border-color: var(--apx-forest-500);
  background: var(--apx-forest-050);
}

.sf-add-rfq svg {
  width: 14px;
  height: 14px;
}

.sf-bom-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 32px;
  align-items: center;
  padding: 38px;
  border: 1px solid var(--apx-charcoal-800);
  border-radius: var(--apx-radius-overlay);
  background:
    radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--apx-forest-500) 20%, transparent), transparent 35%),
    var(--apx-charcoal-950);
  color: var(--apx-on-dark);
}

.sf-bom-card h2 {
  margin-top: 6px;
  color: var(--apx-white);
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.03em;
}

.sf-bom-card__copy p {
  max-width: 660px;
  margin-top: 14px;
  color: var(--apx-on-dark-muted);
  font-size: 13px;
}

.sf-bom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.sf-bom-card .apx-btn--secondary {
  border-color: color-mix(in srgb, var(--apx-white) 40%, transparent);
  background: color-mix(in srgb, var(--apx-white) 10%, transparent);
  color: var(--apx-white);
}

.sf-bom-card .apx-btn--secondary:hover {
  background: var(--apx-white);
  color: var(--apx-ink);
}

.sf-bom-drop {
  position: relative;
  min-height: 220px;
  border: 2px dashed color-mix(in srgb, var(--apx-white) 34%, transparent);
  border-radius: var(--apx-radius-card);
  background: color-mix(in srgb, var(--apx-white) 5%, transparent);
}

.sf-bom-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sf-bom-drop label {
  display: flex;
  height: 100%;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
}

.sf-bom-drop label svg {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  color: var(--apx-forest-300);
}

.sf-bom-drop label strong {
  color: var(--apx-white);
}

.sf-bom-drop label span {
  color: var(--apx-on-dark-muted);
  font-size: 11px;
}

.sf-bom-drop.is-dragging {
  border-color: var(--apx-forest-300);
  background: color-mix(in srgb, var(--apx-forest-300) 10%, transparent);
}

.sf-bom-drop small {
  position: absolute;
  right: 14px;
  bottom: 10px;
  left: 14px;
  color: var(--apx-forest-200);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  text-align: center;
}

/* Page headers —— 分类页与列表页的页头、面包屑与筛选条件回显 */

.sf-page-hero,
.sf-catalog-head {
  padding-block: 36px 30px;
  border-bottom: 1px solid var(--apx-line);
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--apx-forest-100) 75%, transparent), transparent 30%),
    var(--apx-white);
}

.sf-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.sf-breadcrumbs a {
  color: var(--apx-slate-600);
}

.sf-page-hero__split,
.sf-catalog-head__main {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-top: 20px;
}

.sf-page-hero h1,
.sf-catalog-head h1 {
  max-width: 860px;
  margin-top: 7px;
  color: var(--apx-ink);
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.sf-page-hero p,
.sf-catalog-head p {
  max-width: 760px;
  margin-top: 12px;
  color: var(--apx-slate-600);
  font-size: 14px;
}

.sf-page-hero__stats {
  display: flex;
  flex: 0 0 auto;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-line);
}

.sf-page-hero__stats > div {
  min-width: 118px;
  padding: 14px;
  background: var(--apx-white);
}

.sf-page-hero__stats strong {
  display: block;
  font-family: var(--apx-font-mono);
  font-size: 20px;
}

.sf-page-hero__stats span {
  display: block;
  margin-top: 3px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

/* 页头三条服务特征（分类页 / 产品列表 / 拆车件列表，搜索栏上方）：
   视觉与拆车件落地页 .sf-used-hero__features 对齐，只引用 apex-vi 令牌 */
.sf-hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 20px 0 18px;
  padding: 0;
  list-style: none;
}

.sf-hero-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 240px;
  color: var(--apx-slate-500);
  font-size: 11px;
  line-height: 1.5;
}

.sf-hero-features svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--apx-forest-600);
}

.sf-hero-features strong {
  display: block;
  color: var(--apx-ink);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .sf-hero-features {
    flex-direction: column;
    gap: 12px;
  }
}

/* 分类页顶部 OE 搜索：视觉与拆车件落地页 .sf-used-search 对齐（白底 + 描边 + 主色按钮），
   只引用 apex-vi 令牌；≤767px 输入与按钮改为上下堆叠 */
.sf-category-search {
  display: grid;
  max-width: 640px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 20px;
  padding: 7px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-overlay);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-2);
}

.sf-category-search input {
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--apx-ink);
}

.sf-category-search input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--apx-forest-600) 25%, transparent);
}

@media (max-width: 767px) {
  .sf-category-search {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sf-category-index {
  display: grid;
  gap: 8px;
}

.sf-category-row {
  display: grid;
  grid-template-columns: 38px 42px minmax(0, 1fr) 130px 38px;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  color: var(--apx-ink);
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    box-shadow var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-category-row:hover {
  border-color: var(--apx-forest-500);
  box-shadow: var(--apx-shadow-2);
  color: var(--apx-ink);
}

.sf-category-row__body {
  min-width: 0;
}

.sf-category-row__body strong {
  display: block;
  font-size: 16px;
}

.sf-category-row__body small {
  display: block;
  margin-top: 3px;
  color: var(--apx-slate-500);
  font-size: 11px;
}

.sf-category-row__count {
  text-align: right;
}

.sf-category-row__count strong {
  display: block;
  font-family: var(--apx-font-mono);
  font-size: 16px;
}

.sf-category-row__count small {
  color: var(--apx-slate-500);
  font-size: 8px;
}

/* 两级分类树：大类可点击进入大类筛选，下方小类直接进入小类筛选 */
.sf-category-tree {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.sf-category-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-category-group__head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 12px;
  color: var(--apx-ink);
  transition: background var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-category-group__head:hover {
  background: var(--apx-surface-cool);
  color: var(--apx-ink);
}

/* 大类标题容器：grid 子项允许收缩，并与左侧图标保持 8px 呼吸间距 */
.sf-category-group__title {
  min-width: 0;
  padding-left: 8px;
}

/* 大类名称：单行加粗，字号沿用 13.5px，避免 5 列卡片内长名称占用过多行高 */
.sf-category-group__title strong {
  display: block;
  font-size: 13.5px;
  line-height: 1.25;
}

.sf-category-group__title small {
  display: none;
}

/* 小类列表：一行一个小类，纵向排列，避免长名称被挤压截断 */
.sf-category-sublist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  padding: 12px 14px 16px;
  border-top: 1px solid var(--apx-line);
}

/* 小类链接：名称左、数量右；名称过长时整行换行，不再用省略号 */
.sf-category-chip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 1px 0;
  border: 0;
  background: transparent;
  color: var(--apx-slate-600);
  font-size: 12px;
  line-height: 1.45;
  transition:
    color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-category-chip:hover {
  color: var(--apx-forest-700);
}

/* 名称允许换行：单列布局下有足够宽度，长小类名可完整阅读 */
.sf-category-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sf-category-chip em {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 10.5px;
  font-style: normal;
  flex: 0 0 auto;
}

/* Product catalog —— 产品列表：筛选栏、结果网格、分页与精确匹配横幅 */

.sf-catalog-head__count {
  flex: 0 0 auto;
  padding-left: 24px;
  border-left: 1px solid var(--apx-line);
  text-align: right;
}

.sf-catalog-head__count strong {
  display: block;
  font-family: var(--apx-font-mono);
  font-size: 28px;
  letter-spacing: -0.04em;
}

.sf-catalog-head__count span {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.sf-catalog-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  max-width: 820px;
  margin-top: 24px;
  padding: 6px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-surface);
}

.sf-catalog-search input {
  background: var(--apx-white);
}

.sf-catalog-layout {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-block: 28px 64px;
}

.sf-facets {
  position: sticky;
  /* 抬头已吸顶：筛选栏停在整条抬头（工具条 + 主抬头）下方，避免被盖住 */
  top: calc(var(--apx-header-utility) + var(--apx-header-marketing) + 16px);
  padding: 18px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-facets__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-facets__head h2 {
  margin-top: 3px;
  font-size: 18px;
}

.sf-facet-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.sf-facet-note {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-facet-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--apx-forest-700);
}

.sf-results {
  min-width: 0;
}

.sf-active-filters {
  display: flex;
  min-height: 34px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-active-filters__spacer {
  flex: 1;
}

.sf-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-pill);
  background: var(--apx-white);
  color: var(--apx-slate-700);
  font-weight: 600;
}

.sf-filter-chip--mono {
  font-family: var(--apx-font-mono);
}

.sf-filter-chip svg {
  width: 13px;
  height: 13px;
  color: var(--apx-forest-700);
}

.sf-exact-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--apx-forest-500);
  border-radius: var(--apx-radius-card);
  background:
    linear-gradient(90deg, var(--apx-forest-050), color-mix(in srgb, var(--apx-white) 70%, transparent));
}

.sf-exact-match h2 {
  margin-top: 8px;
  font-size: 24px;
}

.sf-exact-match p {
  margin-top: 5px;
  color: var(--apx-slate-600);
  font-size: 12px;
}

.sf-exact-match .apx-badge {
  gap: 4px;
}

.sf-empty-state {
  display: flex;
  min-height: 360px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 36px;
  border: 1px dashed var(--apx-line-strong);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  text-align: center;
}

.sf-empty-state__icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid var(--apx-line);
  border-radius: 50%;
  background: var(--apx-surface);
  color: var(--apx-slate-400);
}

.sf-empty-state__icon svg {
  width: 28px;
  height: 28px;
}

.sf-empty-state h1,
.sf-empty-state h2 {
  max-width: 640px;
  margin-top: 18px;
  font-size: 26px;
  letter-spacing: -0.025em;
}

.sf-empty-state p {
  max-width: 620px;
  margin-top: 10px;
  color: var(--apx-slate-600);
}

.sf-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

/* OE 无结果引导：说明搜索范围，并把客户导向 EPC 或人工邮件处理。 */
.sf-empty-state--oe-help h2 {
  margin-top: 12px;
}

.sf-empty-state--oe-help .apx-badge {
  margin-top: 16px;
}

/*
 * 有效但未发布 OE 的无结果空态。
 * 参考客户询价转化层级，改为左对齐信息区：主询价操作整行，邮件与 EPC 两等分；
 * 白色表面、Forest 主按钮和 Slate 边线均来自现有 APEX VI 令牌。
 */
.sf-empty-state--oe-rfq {
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  width: 100%;
  max-width: 750px;
  margin-right: auto;
  margin-left: auto;
  padding: 32px 36px;
  border-style: solid;
  border-color: var(--apx-line);
  text-align: left;
}

.sf-empty-state__oe-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--apx-forest-700);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
}

.sf-empty-state__oe-kicker svg {
  width: 16px;
  height: 16px;
}

.sf-empty-state--oe-rfq h2 {
  max-width: none;
  margin-top: 10px;
  color: var(--apx-ink);
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0;
}

.sf-empty-state--oe-rfq p {
  max-width: 760px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 22px;
}

.sf-empty-state--oe-rfq .sf-empty-state__actions {
  display: grid;
  width: 100%;
  max-width: none;
  justify-content: stretch;
  gap: 10px;
  margin-top: 22px;
}

.sf-empty-state--oe-rfq .apx-btn {
  width: 100%;
  min-height: 42px;
  justify-content: center;
}

.sf-empty-state__oe-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sf-oe-help__note {
  max-width: 660px;
  margin-top: 18px !important;
  padding-top: 14px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-slate-600) !important;
  font-size: 11px;
}

.sf-empty-state--oe-rfq .sf-oe-help__note {
  max-width: none;
  margin-top: 16px !important;
  line-height: 17px;
}

.sf-empty-page {
  padding-block: 40px 70px;
  background: var(--apx-surface);
}

@media (max-width: 767px) {
  .sf-empty-state--oe-rfq {
    padding: 24px;
  }

  .sf-empty-state__oe-secondary {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sf-empty-state--page {
  margin-top: 28px;
}

.sf-empty-state__code {
  color: var(--apx-slate-400);
  font-size: 10px;
}

.sf-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--apx-line);
}

.sf-pagination__step {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-slate-700);
  font-size: 11px;
  font-weight: 600;
}

.sf-pagination__step:first-child svg {
  transform: rotate(180deg);
}

.sf-pagination__step svg {
  width: 14px;
  height: 14px;
}

.sf-pagination__step.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.sf-pagination__numbers {
  display: flex;
  gap: 5px;
}

.sf-pagination__numbers a {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-slate-700);
  font-family: var(--apx-font-mono);
  font-size: 10px;
}

.sf-pagination__numbers a.is-current {
  border-color: var(--apx-forest-600);
  background: var(--apx-forest-600);
  color: var(--apx-white);
}

/* Product detail —— 产品详情：单张主图、报价区、EPC 定位、适配矩阵、技术字段与标签区 */

.sf-context-strip {
  padding-block: 11px;
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-surface-cool);
}

.sf-context-strip .sf-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sf-context-strip__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--apx-slate-500);
  font-size: 9px;
  text-transform: uppercase;
}

.sf-context-strip__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sf-context-strip__meta svg {
  width: 14px;
  height: 14px;
  color: var(--apx-forest-700);
}

.sf-pdp {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px;
  align-items: start;
  padding-block: 30px 20px;
}

.sf-pdp__gallery,
.sf-pdp__summary {
  display: grid;
  gap: 14px;
}

/* 主图舞台：栏头 / 图片区 / 说明三段纵向排列，图片区高度由自身比例决定 */
.sf-gallery-stage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-gallery-stage__bar,
.sf-gallery-stage__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-gallery-stage__bar {
  border-bottom: 1px solid var(--apx-line);
}

.sf-fitment-logo-strip {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.sf-fitment-logo {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  padding: 3px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--apx-forest-700);
}

/* 图片顶栏统一落在 22px 内容区；裁掉窄高素材因原始比例产生的纵向溢出。 */
.sf-fitment-logo img {
  display: block;
  width: 22px;
  height: 22px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/*
 * 部分上游 PNG Logo 自带不透明白色画布。统一对白色资源面使用 multiply，
 * 让白底与页面融为同一白色，同时保持品牌图形的原有色值。
 */
.sf-brand-tile__monogram img,
.sf-epc-brand-card__mono img,
.sf-part-card__brand img,
.sf-pdp-chip__logo img,
.sf-fitment-logo img {
  mix-blend-mode: multiply;
}

.sf-fitment-logo svg {
  width: 15px;
  height: 15px;
}

/* 主图来源徽标按请求保留标题式大小写，不继承全局 badge 的全大写规则。 */
.sf-gallery-stage__bar .sf-sourcing-badge {
  letter-spacing: 0.02em;
  text-transform: none;
}

.sf-gallery-stage__bar .sf-sourcing-badge svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke-width: 2.2;
}

.sf-gallery-stage__caption {
  position: relative;
  border-top: 1px solid var(--apx-line);
  justify-content: flex-start;
}

.sf-gallery-stage__caption span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sf-gallery-stage__caption svg {
  width: 14px;
  height: 14px;
  color: var(--apx-forest-700);
}

.sf-image-disclaimer {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--apx-slate-600);
  cursor: help;
}

.sf-image-disclaimer > svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.sf-image-disclaimer:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

.sf-gallery-stage__caption .sf-image-disclaimer__tip {
  position: absolute;
  bottom: calc(100%);
  right: 0;
  left: 0;
  z-index: var(--apx-z-overlay);
  display: block;
  width: auto;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--apx-white) 18%, transparent);
  border-radius: var(--apx-radius-control);
  background: var(--apx-charcoal-950);
  box-shadow: var(--apx-shadow-3);
  color: var(--apx-on-dark);
  font-size: 10px;
  font-weight: 200;
  line-height: 1.55;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard),
    visibility var(--apx-duration-fast) var(--apx-ease-standard);
  visibility: hidden;
}

.sf-image-disclaimer:hover .sf-image-disclaimer__tip,
.sf-image-disclaimer:focus .sf-image-disclaimer__tip,
.sf-image-disclaimer:focus-within .sf-image-disclaimer__tip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .sf-gallery-stage__caption .sf-image-disclaimer__tip {
    transition: none;
  }
}

/* 图片区：沿用原舞台的 1:0.93 比例；留白交给 50% 图宽自然形成 */
.sf-gallery-stage__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 0.93;
}

/* 主图：固定为容器宽度的 50%，水平/垂直居中；超出图片区高度时按 contain 收缩 */
.sf-gallery-stage__media > img {
  display: block;
  width: 50%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* 无图占位：保留 18px 内缩后铺满图片区，不参与 50% 缩放 */
.sf-gallery-stage__media > .sf-part-placeholder {
  width: calc(100% - 36px);
  height: calc(100% - 36px);
}

.sf-evidence-card {
  padding: 18px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-evidence-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-evidence-card__metrics {
  display: grid;
  /* 对外口径下指标数会变（当前 2 项：EPC 位置 / 适用车型），auto-fit 自动铺满 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  background: var(--apx-line);
}

.sf-evidence-card__metrics > div {
  padding: 10px;
  background: var(--apx-surface);
}

.sf-evidence-card__metrics strong {
  display: block;
  font-family: var(--apx-font-mono);
  font-size: 17px;
}

.sf-evidence-card__metrics span {
  display: block;
  color: var(--apx-slate-500);
  font-size: 8px;
}

.sf-evidence-card p {
  margin-top: 12px;
  color: var(--apx-slate-600);
  font-size: 11px;
}

.sf-evidence-card .apx-btn {
  margin-top: 12px;
}

.sf-pdp__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sf-pdp__title h1 {
  margin-top: 7px;
  color: var(--apx-ink);
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.sf-pdp__title p {
  margin-top: 10px;
  color: var(--apx-slate-600);
  font-size: 13px;
}

.sf-oe-card {
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-surface);
}

.sf-oe-card__main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.sf-oe-card__main > span {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.sf-oe-card__main strong {
  color: var(--apx-forest-700);
  font-size: 20px;
  letter-spacing: -0.02em;
}

.sf-oe-card__main .sf-icon-btn {
  margin-left: auto;
}

.sf-oe-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--apx-line);
  background: var(--apx-white);
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-oe-card__meta b {
  color: var(--apx-slate-700);
  font-weight: 600;
}

.sf-purchase-card {
  --sf-purchase-aside-width: 148px;
  padding: 20px;
  border: 1px solid var(--apx-charcoal-800);
  border-radius: var(--apx-radius-overlay);
  background: var(--apx-charcoal-950);
  color: var(--apx-on-dark);
}

.sf-purchase-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.sf-purchase-card .sf-kicker {
  color: var(--apx-forest-300);
}

.sf-purchase-card__price {
  display: block;
  margin-top: 5px;
  color: var(--apx-white);
  font-family: var(--apx-font-mono);
  font-size: 27px;
  letter-spacing: -0.04em;
}

.sf-purchase-card__top small {
  display: block;
  margin-top: 3px;
  color: var(--apx-on-dark-muted);
  font-size: 9px;
}

/* 商品来源：放在价格卡右上角，沿用参考图的浅绿底、绿色描边与确认图标。 */
.sf-origin-signal {
  display: inline-flex;
  width: var(--sf-purchase-aside-width);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--apx-forest-300) 40%, transparent);
  border-radius: var(--apx-radius-control);
  background: color-mix(in srgb, var(--apx-forest-300) 10%, transparent);
  color: var(--apx-forest-200);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  white-space: nowrap;
}

.sf-origin-signal svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: inherit;
}

.sf-origin-signal b {
  color: inherit;
  font-weight: 600;
}

/* 拆车件详情：在共用来源标签上单独提升文案清晰度，不影响全新件的原产地标签。 */
.sf-origin-signal--used {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sf-origin-signal--used svg {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.sf-purchase-metrics {
  display: grid;
  /* 指标格子数会随对外口径变化（当前 2 项：EPC 装车行数 / 适用车型），用 auto-fit 自动铺满 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: var(--apx-radius-control);
  background: color-mix(in srgb, var(--apx-white) 15%, transparent);
}

.sf-purchase-metrics > div {
  padding: 10px;
  background: color-mix(in srgb, var(--apx-charcoal-800) 74%, transparent);
}

.sf-purchase-metrics span {
  display: block;
  color: var(--apx-on-dark-muted);
  font-size: 8px;
  text-transform: uppercase;
}

.sf-purchase-metrics strong {
  display: block;
  margin-top: 2px;
  color: var(--apx-white);
  font-family: var(--apx-font-mono);
  font-size: 13px;
}

.sf-purchase-actions {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: 16px;
}

.sf-quantity-control {
  display: grid;
  gap: 5px;
}

.sf-quantity-control__label {
  color: var(--apx-on-dark-muted);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sf-quantity-stepper {
  display: inline-grid;
  height: 44px;
  grid-template-columns: 36px 38px 36px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--apx-white) 18%, transparent);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface-sunken);
}

.sf-quantity-stepper button {
  display: grid;
  width: 36px;
  height: 100%;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--apx-slate-700);
  font-family: var(--apx-font-mono);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.sf-quantity-stepper button[data-quantity-plus] {
  color: var(--apx-forest-700);
}

.sf-quantity-stepper button:hover:not(:disabled) {
  background: var(--apx-white);
}

.sf-quantity-stepper button:disabled {
  color: var(--apx-slate-300);
  cursor: not-allowed;
}

.sf-quantity-stepper input {
  display: block;
  width: 38px;
  min-width: 0;
  height: 100%;
  padding: 0 2px;
  border: 0;
  border-inline: 1px solid var(--apx-line);
  border-radius: 0;
  background: var(--apx-white);
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.sf-quantity-stepper input:focus-visible {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: -2px;
}

.sf-quantity-stepper input::-webkit-inner-spin-button,
.sf-quantity-stepper input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.sf-quantity-stepper input[type="number"] {
  appearance: textfield;
}

.sf-purchase-actions .apx-btn--secondary {
  width: var(--sf-purchase-aside-width);
  justify-content: center;
  border-color: color-mix(in srgb, var(--apx-white) 45%, transparent);
  background: color-mix(in srgb, var(--apx-white) 8%, transparent);
  color: var(--apx-white);
}

.sf-purchase-actions .apx-btn--secondary:hover {
  background: var(--apx-white);
  color: var(--apx-ink);
}

.sf-purchase-actions .sf-expert-help {
  gap: 6px;
  padding-inline: 10px;
  font-size: 10px;
}

.sf-purchase-actions .sf-expert-help svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.sf-purchase-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--apx-white) 12%, transparent);
  color: var(--apx-on-dark-muted);
  font-size: 8px;
  text-transform: uppercase;
}

.sf-purchase-notes span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sf-purchase-notes svg {
  color: var(--apx-forest-300);
}

.sf-pdp__source-note {
  display: flex;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-pdp__source-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--apx-forest-700);
}

.sf-diagram-panel {
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-diagram-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-diagram-panel__head h2 {
  margin-top: 4px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.sf-diagram-panel__head p {
  margin-top: 5px;
  color: var(--apx-slate-500);
  font-size: 10px;
}

/* 标题栏右侧动作区：缩略位置图 + EPC 工作台入口；窄屏整体折行，不压缩左侧标题。 */
.sf-diagram-panel__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/*
 * EPC 详情面板的“缩略位置图”定位入口。
 * 竖版 EPC 原图按容器宽度铺满后图面很高，当前热点常在首屏之外；这张 64px 宽的小图
 * 用同一组百分比坐标标出热点，点击后由 storefront.js::initEpcPartsLocator() 滚动定位。
 * 视觉只复用现有 Forest / Slate / Line 令牌：白面、1px 中性描边、Forest 热点方块，
 * 不新增颜色、字体或阴影令牌。
 */
.sf-diagram-locator {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-ink);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--apx-duration-fast) var(--apx-ease-standard),
    border-color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-diagram-locator:hover {
  border-color: var(--apx-line-strong);
  background: var(--apx-forest-050);
}

.sf-diagram-locator:focus-visible {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

/* 缩略图框：宽 64px，高度按 EPC 原图比例由内联 --diagram-ratio 决定。 */
.sf-diagram-locator__map {
  position: relative;
  display: block;
  width: 64px;
  flex: 0 0 auto;
  aspect-ratio: var(--diagram-ratio, 3 / 4);
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: 3px;
  background: var(--apx-surface);
}

.sf-diagram-locator__map img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* 热点方块与主图 .sf-hotspot 同一 Forest 600 语义，但缩略图不做编号文字。 */
.sf-diagram-locator__pin {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--apx-white);
  border-radius: 2px;
  background: var(--apx-forest-600);
  box-shadow: 0 0 0 1px var(--apx-charcoal-800);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/*
 * 悬停右侧 All diagram OEs 行时，在缩略位置图同步显示的空心环。
 * 用空心区分常驻的实心“当前 OE”方块；位置由 storefront.js::initEpcPartsHoverPreview() 写入，
 * 大图上的预览热点即使超出首屏，客户也能在标题栏缩略图上看到相对位置。
 */
.sf-diagram-locator__hover {
  display: none;
  position: absolute;
  width: 11px;
  height: 11px;
  border: 2px solid var(--apx-forest-600);
  border-radius: 50%;
  background: color-mix(in srgb, var(--apx-white) 72%, transparent);
  box-shadow: 0 0 0 1px var(--apx-charcoal-800);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.sf-diagram-locator__hover.is-visible {
  display: block;
}

.sf-diagram-locator__meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.sf-diagram-locator__kicker {
  color: var(--apx-slate-500);
  font-size: 8px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.sf-diagram-locator__ref {
  color: var(--apx-forest-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

.sf-diagram-locator__cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--apx-slate-500);
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

.sf-diagram-locator__cta svg {
  width: 12px;
  height: 12px;
}

.sf-diagram-locator:hover .sf-diagram-locator__cta {
  color: var(--apx-forest-700);
}

/*
 * 定位后的脉冲环：2px Forest 600 边框向外扩散两次，帮助客户在整张大图里回看热点；
 * 只作用于 .sf-hotspot，不改变热点本身的坐标、尺寸与其它高亮态。
 */
.sf-hotspot.is-located::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid var(--apx-forest-600);
  border-radius: 8px;
  pointer-events: none;
  animation: sf-hotspot-locate 1.1s var(--apx-ease-standard) 2;
}

@keyframes sf-hotspot-locate {
  0% {
    opacity: 0.85;
    transform: scale(0.72);
  }

  70% {
    opacity: 0;
    transform: scale(1.35);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-diagram-locator {
    transition: none;
  }

  .sf-hotspot.is-located::after {
    animation: none;
    opacity: 0.85;
    transform: scale(1.1);
  }
}

.sf-diagram-panel__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.sf-diagram-frame--pdp {
  grid-row: 1;
  grid-column: 1;
  border: 0;
  border-right: 1px solid var(--apx-line);
}

.sf-diagram-panel__list {
  display: flex;
  position: absolute;
  inset: 0 0 0 auto;
  width: 340px;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  padding: 10px;
  background: var(--apx-surface);
}

.sf-diagram-panel__list-head {
  position: sticky;
  top: -10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -10px -10px 8px;
  padding: 10px;
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-surface);
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sf-diagram-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 8px;
  border-bottom: 1px solid var(--apx-line);
  color: var(--apx-ink);
}

.sf-diagram-line:last-child {
  border-bottom: 0;
}

a.sf-diagram-line {
  text-decoration: none;
}

a.sf-diagram-line:hover {
  border-color: var(--apx-line-strong);
  background: var(--apx-forest-050);
}

a.sf-diagram-line:focus-visible {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

.sf-diagram-line.is-published {
  border-left: 2px solid var(--apx-forest-600);
}

.sf-diagram-line.is-used {
  border-left: 2px solid var(--apx-used-line);
  background: var(--apx-used-bg);
}

a.sf-diagram-line.is-used:hover {
  background: color-mix(in srgb, var(--apx-used-bg) 88%, var(--apx-surface-raised));
}

.sf-diagram-line.is-focus {
  box-shadow: inset 0 0 0 1px var(--apx-forest-600);
}

.sf-diagram-line.is-used .sf-pin {
  background: var(--apx-used-fg);
}

/*
 * All diagram OEs 行内引脚 —— 新品详情和拆车件详情共用 epc-parts-panel.php。
 * 行本身保留 8px 内边距供文字区呼吸；小引脚向左收回同一距离，使其紧贴 2px
 * New/Used 状态边线，并与参考图位置一致，同时不改变中间文字和右侧状态列。
 */
.sf-diagram-line > .sf-pin--small {
  margin-left: -8px;
}

.sf-diagram-line__status {
  display: flex;
  min-width: 64px;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.sf-diagram-line__status .apx-badge {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 8px;
}

.sf-diagram-line__price {
  display: block;
  max-width: 76px;
  color: var(--apx-slate-500);
  font-size: 8px;
  line-height: 1.35;
  text-align: right;
}

.sf-diagram-line b {
  display: block;
  color: var(--apx-forest-700);
  font-size: 10px;
}

.sf-diagram-line small {
  display: block;
  overflow: hidden;
  color: var(--apx-slate-500);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-diagram-line > svg {
  width: 14px;
  height: 14px;
  color: var(--apx-forest-700);
}

.sf-pdp-tabs-section {
  padding-block: 40px 60px;
}

.sf-tabs {
  display: flex;
  /*
   * 只允许横向滚动：激活页签的 ::after 下划线画在 bottom:-1px，会让 scrollHeight 比
   * clientHeight 多 1px；overflow-y:visible 会被计算成 auto，Windows Chrome 就会在页签条
   * 右端渲染一条无用的纵向滚动条（上下箭头 + 短滑块）。overflow-y:hidden 保留窄屏横向滚动，
   * 同时让这条纵向滚动条不再出现。
   */
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--apx-line-strong);
}

.sf-tab {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--apx-slate-600);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.sf-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  content: "";
}

.sf-tab.is-active {
  color: var(--apx-forest-700);
}

.sf-tab.is-active::after {
  background: var(--apx-forest-600);
}

.sf-tab svg {
  width: 17px;
  height: 17px;
}

.sf-tab span {
  display: inline-grid;
  min-width: 20px;
  height: 18px;
  place-items: center;
  border-radius: var(--apx-radius-pill);
  background: var(--apx-surface-sunken);
  font-family: var(--apx-font-mono);
  font-size: 8px;
}

.sf-tab-panel {
  padding-top: 24px;
}

.sf-tab-panel[hidden] {
  display: none;
}

.sf-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-panel-head h2 {
  margin-top: 3px;
  color: var(--apx-ink);
  font-size: 24px;
  letter-spacing: -0.025em;
}

.sf-panel-head h3 {
  color: var(--apx-ink);
  font-size: 16px;
}

.sf-panel-head--small {
  margin-bottom: 12px;
}

/* Product detail — How to Order：六步询价、交付与验货售后流程、说明卡与底部询价行动区 */
.sf-order-guide {
  display: grid;
  gap: 14px;
}

.sf-order-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 28px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-order-hero__copy {
  max-width: 780px;
}

.sf-order-hero h2 {
  margin-top: 6px;
  color: var(--apx-ink);
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.sf-order-hero p {
  max-width: 720px;
  margin-top: 10px;
  color: var(--apx-slate-600);
  font-size: 13px;
  line-height: 1.7;
}

.sf-order-hero__counter {
  display: grid;
  min-width: 108px;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--apx-line);
}

.sf-order-hero__counter > span:first-child {
  color: var(--apx-forest-700);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.sf-order-hero__counter > span:last-child {
  max-width: 62px;
  padding-bottom: 2px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

/* 横向六步总览：相邻项使用同一分隔线形成连续流程条。 */
.sf-order-progress {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  list-style: none;
}

.sf-order-progress li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 13px 12px;
}

.sf-order-progress li:not(:last-child) {
  border-right: 1px solid var(--apx-line);
}

.sf-order-progress__number {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
  font-size: 9px;
  font-weight: 700;
}

.sf-order-progress strong,
.sf-order-progress small {
  display: block;
}

.sf-order-progress strong {
  overflow: hidden;
  color: var(--apx-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-order-progress small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 详细步骤：Step 01–06 共用两列卡片；移动端按 01→06 单列排列。 */
.sf-order-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-order-step-list > li {
  min-width: 0;
}

.sf-order-step {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-order-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sf-order-step__index {
  color: var(--apx-forest-700);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sf-order-step__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--apx-radius-control);
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
}

.sf-order-step__icon svg {
  width: 17px;
  height: 17px;
}

.sf-order-step h3 {
  margin-top: 14px;
  color: var(--apx-ink);
  font-size: 18px;
  letter-spacing: -0.015em;
}

.sf-order-step > p {
  margin-top: 8px;
  color: var(--apx-slate-600);
  font-size: 12px;
  line-height: 1.7;
}

.sf-order-points,
.sf-order-info-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.sf-order-points li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--apx-slate-600);
  font-size: 11px;
  line-height: 1.5;
}

.sf-order-points svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--apx-forest-700);
}

.sf-order-info-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-order-info-list li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface-cool);
  color: var(--apx-slate-700);
  font-size: 10px;
  line-height: 1.45;
}

.sf-order-info-list svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--apx-forest-700);
}

.sf-order-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface-sunken);
  color: var(--apx-slate-600);
  font-size: 10px;
  line-height: 1.55;
}

.sf-order-step > .sf-order-note {
  margin-top: 14px;
  color: var(--apx-slate-600);
  font-size: 10px;
  line-height: 1.55;
}

.sf-order-note svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--apx-forest-700);
}

.sf-order-note--inspection {
  border: 1px solid var(--apx-forest-100);
  background: var(--apx-forest-050);
}

.sf-order-note--inspection strong {
  color: var(--apx-forest-700);
  font-weight: 700;
}

.sf-order-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.sf-order-outcomes span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--apx-forest-100);
  border-radius: var(--apx-radius-control);
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
  font-size: 10px;
  font-weight: 600;
}

.sf-order-outcomes svg {
  width: 14px;
  height: 14px;
}

.sf-order-step__footer {
  margin-top: auto;
  padding-top: 18px;
}

.sf-order-step__action {
  justify-self: start;
}

/* 底部行动区：深色结构面只承载一个主询价动作和一个现有联系占位。 */
.sf-order-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 28px;
  border-radius: var(--apx-radius-overlay);
  background: var(--apx-charcoal-950);
  color: var(--apx-on-dark);
}

.sf-order-cta__copy {
  max-width: 640px;
}

.sf-order-cta .sf-kicker {
  color: var(--apx-forest-300);
}

.sf-order-cta h3 {
  margin-top: 6px;
  color: var(--apx-white);
  font-size: 24px;
  letter-spacing: -0.02em;
}

.sf-order-cta p {
  margin-top: 7px;
  color: var(--apx-on-dark-muted);
  font-size: 12px;
  line-height: 1.65;
}

.sf-order-cta__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-order-contact {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--apx-white) 32%, transparent);
  border-radius: var(--apx-radius-control);
  background: transparent;
  color: var(--apx-white);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.sf-order-contact:hover {
  background: color-mix(in srgb, var(--apx-white) 10%, transparent);
}

.sf-order-contact svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 991px) {
  .sf-order-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-order-hero__counter {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--apx-line);
    border-left: 0;
  }

  .sf-order-step-list {
    grid-template-columns: 1fr;
  }

  .sf-order-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-order-cta__actions {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .sf-order-hero {
    padding: 20px;
  }

  .sf-order-progress {
    grid-template-columns: 1fr;
  }

  .sf-order-progress li:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--apx-line);
  }

  .sf-order-info-list {
    grid-template-columns: 1fr;
  }

  .sf-order-cta {
    padding: 20px;
  }

  .sf-order-cta h3 {
    font-size: 21px;
  }

  .sf-order-cta__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-order-cta__actions .apx-btn,
  .sf-order-contact {
    width: 100%;
  }
}

.sf-offer-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-offer-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 11px;
}

.sf-offer-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--apx-table-head-line);
  background: var(--apx-table-head-bg);
  color: var(--apx-table-head-fg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.sf-offer-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--apx-line);
  vertical-align: middle;
}

.sf-offer-table tr:last-child td {
  border-bottom: 0;
}

.sf-offer-table tbody tr:hover {
  background: var(--apx-forest-050);
}

.sf-offer-product {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.sf-offer-product__image {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-slate-400);
}

.sf-offer-product__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.sf-offer-product strong {
  display: block;
  max-width: 480px;
  color: var(--apx-ink);
  font-size: 11px;
  line-height: 1.45;
}

.sf-offer-product small,
.sf-offer-table td > small {
  display: block;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-price {
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.sf-listing-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--apx-slate-500);
  font-size: 9px;
  white-space: nowrap;
}

.sf-listing-meta + .sf-listing-meta {
  margin-top: 4px;
}

.sf-listing-meta svg {
  width: 13px;
  height: 13px;
  color: var(--apx-forest-700);
}

.sf-empty-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed var(--apx-line-strong);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  color: var(--apx-slate-600);
  font-size: 11px;
}

.sf-empty-inline svg {
  width: 18px;
  height: 18px;
  color: var(--apx-warning-fg);
}

.sf-fitment-brands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.sf-fitment-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-fitment-brand strong {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-fitment-brand small {
  display: block;
  color: var(--apx-slate-500);
  font-size: 8px;
}

.sf-subsection {
  margin-top: 26px;
}

.sf-fitment-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.sf-fitment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-fitment-pill b {
  color: var(--apx-ink);
}

.sf-spareto-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sf-spareto-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-spareto-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sf-spareto-card__head > div {
  min-width: 0;
  flex: 1;
}

.sf-spareto-card__head strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-spareto-card__head span {
  display: block;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-spareto-card h3 {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.sf-spareto-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-spareto-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sf-spareto-card__meta svg {
  width: 13px;
  height: 13px;
  color: var(--apx-forest-700);
}

.sf-spareto-card .sf-text-link {
  margin-top: 10px;
}

.sf-crossref-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.sf-crossref {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-crossref span {
  display: block;
  overflow: hidden;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 7px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sf-crossref strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--apx-forest-700);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-crossref small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-technical-grid {
  display: grid;
  /* Specifications 页签仅保留 Identification 与 Quality note，两列等宽。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sf-technical-card {
  padding: 16px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-technical-card h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

.sf-technical-card h3 svg {
  width: 18px;
  height: 18px;
  color: var(--apx-forest-700);
}

.sf-spec-list {
  margin-top: 12px;
}

.sf-spec-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--apx-line);
}

.sf-spec-list > div:last-child {
  border-bottom: 0;
}

.sf-spec-list dt {
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-spec-list dd {
  color: var(--apx-ink);
  font-size: 10px;
  text-align: right;
}

/* Product detail —— 经销商视角：适配标签、商业条款、关键规格、适配筛选、文档与信任块 */

/* 适配品牌标签：标题下方的 Toyota / Lexus 等覆盖范围 */
.sf-pdp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.sf-pdp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--apx-line);
  border-radius: 999px;
  background: var(--apx-white);
  color: var(--apx-slate-700);
  font-size: 10px;
}

.sf-pdp-chip__logo {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  color: var(--apx-forest-700);
}

.sf-pdp-chip__logo.has-logo {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* 胶囊 Logo 使用固定 18px 方格并等比 contain；PONTIAC 等窄高素材不得撑破胶囊。 */
.sf-pdp-chip__logo img {
  display: block;
  width: 18px;
  height: 18px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sf-pdp-chip__logo svg {
  width: 13px;
  height: 13px;
}

.sf-pdp-chip--muted {
  background: var(--apx-surface-cool);
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
}

/* 卖点列表（后台 bullets，一行一条） */
.sf-pdp-bullets {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.sf-pdp-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--apx-slate-600);
  font-size: 12px;
}

.sf-pdp-bullets svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--apx-forest-700);
}

.sf-purchase-sample {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  color: var(--apx-on-dark-muted);
  font-size: 10px;
}

.sf-purchase-sample svg {
  width: 13px;
  height: 13px;
}

/* 适配筛选工具条 */
.sf-fitment-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}

.sf-fitment-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-fitment-search svg {
  width: 14px;
  height: 14px;
  color: var(--apx-slate-400);
}

.sf-fitment-search input {
  width: 200px;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.sf-fitment-toolbar select {
  padding: 8px 10px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  font-size: 12px;
}

.sf-fitment-toolbar__hint {
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-fitment-empty {
  padding: 18px 0;
  color: var(--apx-slate-500);
  font-size: 12px;
  text-align: center;
}

.sf-fitment-table td:first-child strong {
  font-size: 12px;
}

/* 技术卡里的质量徽标 */
.sf-technical-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.sf-technical-badges span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--apx-line);
  border-radius: 999px;
  color: var(--apx-slate-600);
  font-size: 9px;
}

.sf-technical-badges svg {
  width: 12px;
  height: 12px;
  color: var(--apx-forest-700);
}

/* 移动端底部固定询价条：默认收起，滚动超过购买卡后由 JS 显示 */
.sf-pdp-sticky {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--apx-line);
  background: color-mix(in srgb, var(--apx-white) 96%, transparent);
  box-shadow: 0 -6px 24px rgb(15 23 32 / 10%);
  backdrop-filter: blur(10px);
  transform: translateY(110%);
  transition: transform var(--apx-duration-fast) var(--apx-ease-standard);
  pointer-events: none;
}

.sf-pdp-sticky.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.sf-pdp-sticky strong {
  display: block;
  font-size: 13px;
}

.sf-pdp-sticky span {
  color: var(--apx-slate-500);
  font-size: 9px;
}

@media (min-width: 768px) {
  .sf-pdp-sticky {
    display: none;
  }
}

@media (max-width: 767px) {
  .sf-fitment-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-fitment-search input {
    width: 100%;
  }

  /* 移动端适配表：去掉 EPC 位置列，避免横向滚动；品牌列收窄，保留车型/年份/图组入口 */
  .sf-fitment-table {
    min-width: 0;
  }

  .sf-fitment-table th:nth-child(4),
  .sf-fitment-table td:nth-child(4) {
    display: none;
  }

  .sf-fitment-table th,
  .sf-fitment-table td {
    padding: 9px 8px;
  }

  .sf-fitment-table th:nth-child(1),
  .sf-fitment-table td:nth-child(1) {
    font-size: 9px;
  }
}

/* EPC workspace —— 三栏工作台：288px 导航 / 工程图面 / 440px 同步零件清单（含移动端抽屉与底部 sheet） */

.sf-main--workspace {
  min-height: calc(100vh - var(--apx-header-workspace));
}

.sf-epc-context {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-inline: 20px;
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-surface-cool);
}

.sf-epc-context__breadcrumb,
.sf-epc-context__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.sf-epc-context__breadcrumb .is-current {
  color: var(--apx-ink);
  font-weight: 600;
}

.sf-epc-context__meta {
  flex: 0 0 auto;
}

.sf-epc-vehiclebar {
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.sf-epc-vehiclebar__inner {
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  gap: 22px;
  padding-inline: 20px;
}

.sf-epc-vehiclebar__identity {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
}

.sf-epc-vehiclebar__identity strong {
  font-size: 13px;
}

.sf-epc-vehiclebar__identity > span:last-child {
  color: var(--apx-slate-500);
  font-size: 8px;
}

.sf-epc-attributes {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 6px;
  overflow-x: auto;
}

.sf-epc-attributes span {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  white-space: nowrap;
}

.sf-epc-attributes b {
  color: var(--apx-ink);
  font-weight: 600;
}

.sf-epc-oe-search {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
}

.sf-epc-oe-search > span {
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-epc-oe-search input {
  width: 176px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--apx-ink);
  font-size: 11px;
}

.sf-epc-oe-search input:focus {
  outline: none;
}

.sf-epc-result-strip {
  border-bottom: 1px solid var(--apx-line);
}

.sf-epc-result-strip.is-success {
  background: var(--apx-forest-050);
}

.sf-epc-result-strip.is-warning {
  background: var(--apx-warning-bg);
}

.sf-epc-result-strip__inner {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
}

.sf-epc-result-strip__inner > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: var(--apx-slate-600);
  font-size: 10px;
}

.sf-epc-result-strip__inner .sf-icon-tile {
  width: 34px;
  height: 34px;
}

.sf-epc-result-strip.is-warning .sf-icon-tile {
  background: var(--apx-warning-bg);
  color: var(--apx-warning-fg);
}

.sf-epc-workspace {
  display: grid;
  grid-template-columns: var(--apx-rail) minmax(0, 1fr) var(--apx-panel-schedule);
  /* 单行网格必须显式限高：否则右侧 60+ 行清单会把整行撑到几千像素，
     中间图面被 flex 居中推到页面很下方（表现为画布空白） */
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - var(--apx-header-workspace) - 103px);
  min-height: 620px;
  overflow: hidden;
}

/* 三栏都允许在网格行内收缩，各自内部滚动（左侧 tree / 右侧清单） */
.sf-epc-left,
.sf-epc-center,
.sf-epc-right {
  min-height: 0;
}

.sf-epc-workspace:has(+ .sf-epc-result-strip),
.sf-epc-result-strip + .sf-epc-workspace {
  height: calc(100vh - var(--apx-header-workspace) - 161px);
}

.sf-epc-left {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--apx-line);
  background: var(--apx-surface);
}

.sf-epc-left__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.sf-epc-left__head strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

.sf-epc-left__close {
  display: none;
}

.sf-epc-selects {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.sf-epc-selects .sf-field {
  gap: 3px;
}

.sf-epc-selects .sf-field label {
  font-family: var(--apx-font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sf-epc-selects select {
  min-height: 35px;
  padding-block: 6px;
  font-size: 10px;
}

.sf-epc-selects .apx-btn {
  min-height: 34px;
  font-size: 10px;
}

.sf-epc-left__filter,
.sf-epc-right__filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 12px 6px;
  padding: 6px 9px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-epc-left__filter svg,
.sf-epc-right__filter svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--apx-slate-500);
}

.sf-epc-left__filter input,
.sf-epc-right__filter input {
  width: 100%;
  min-width: 0;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--apx-ink);
  font-size: 10px;
}

.sf-epc-left__filter input:focus,
.sf-epc-right__filter input:focus {
  outline: none;
}

.sf-epc-diagram-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 13px 8px;
  color: var(--apx-slate-500);
  font-size: 8px;
}

.sf-epc-diagram-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.sf-epc-diagram-link {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  padding: 8px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--apx-radius-control);
  color: var(--apx-ink);
}

.sf-epc-diagram-link:hover {
  border-color: var(--apx-line);
  background: var(--apx-white);
  color: var(--apx-ink);
}

.sf-epc-diagram-link.is-active {
  border-color: var(--apx-line);
  border-left-color: var(--apx-forest-600);
  background: var(--apx-forest-050);
}

.sf-epc-diagram-link__code {
  display: grid;
  min-height: 28px;
  place-items: center;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-forest-700);
  font-size: 8px;
  font-weight: 700;
}

.sf-epc-diagram-link strong {
  display: block;
  font-size: 10px;
  line-height: 1.35;
}

.sf-epc-diagram-link small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-epc-diagram-link__count {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
}

.sf-epc-left__foot,
.sf-epc-right__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--apx-line);
  background: var(--apx-white);
  color: var(--apx-slate-500);
  font-size: 8px;
}

.sf-epc-left__foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sf-epc-left__foot svg {
  width: 14px;
  height: 14px;
  color: var(--apx-forest-700);
}

.sf-epc-center {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--apx-surface-sunken);
}

.sf-epc-toolbar {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.sf-epc-toolbar > div:first-child {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.sf-epc-toolbar strong {
  overflow: hidden;
  max-width: 580px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-epc-toolbar > div:first-child > span:last-child {
  color: var(--apx-slate-500);
  font-size: 8px;
}

.sf-epc-toolbar__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.sf-epc-toolbar .sf-icon-btn {
  width: 30px;
  height: 30px;
}

.sf-epc-left-toggle {
  display: none;
}

.sf-epc-canvas {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 22px;
}

.sf-epc-canvas__grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--apx-charcoal-900) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--apx-charcoal-900) 2%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--apx-charcoal-900) 2%, transparent) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
  pointer-events: none;
}

.sf-diagram-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 1050px);
  max-height: 100%;
}

.sf-diagram-frame--workspace {
  border-radius: var(--apx-radius-card);
  box-shadow: var(--apx-shadow-2);
}

.sf-diagram-frame--workspace .sf-hotspot {
  min-width: 24px;
  min-height: 24px;
  padding: 0 5px;
  font-size: 9px;
}

.sf-epc-canvas__badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  display: flex;
  max-width: 500px;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: color-mix(in srgb, var(--apx-white) 90%, transparent);
  color: var(--apx-slate-600);
  font-size: 8px;
  backdrop-filter: blur(8px);
}

.sf-epc-canvas__badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--apx-forest-700);
}

.sf-epc-legend {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 10px;
  padding: 6px 9px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: color-mix(in srgb, var(--apx-white) 90%, transparent);
  color: var(--apx-slate-500);
  font-size: 8px;
  backdrop-filter: blur(8px);
}

.sf-epc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sf-epc-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.sf-epc-legend .is-published {
  background: var(--apx-forest-600);
}

.sf-epc-legend .is-sourcing {
  background: var(--apx-warning-fg);
}

.sf-diagram-empty--canvas {
  position: relative;
  z-index: 1;
  min-height: 360px;
  border: 1px dashed var(--apx-line-strong);
  border-radius: var(--apx-radius-card);
  background: color-mix(in srgb, var(--apx-white) 74%, transparent);
}

.sf-epc-right {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-left: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.sf-epc-right__head {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-epc-right__head strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  max-width: 300px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-epc-right__head > span {
  flex: 0 0 auto;
  color: var(--apx-slate-500);
  font-size: 8px;
}

.sf-epc-right .sf-epc-right__filter {
  margin: 9px 10px 4px;
}

.sf-epc-schedule {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}

.sf-epc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  padding: 8px;
  border: 1px solid var(--apx-line);
  border-left: 2px solid transparent;
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
}

.sf-epc-row:hover,
.sf-epc-row.is-highlight,
.sf-epc-row.is-selected,
.sf-epc-row.is-focus {
  border-left-color: var(--apx-forest-600);
  background: var(--apx-forest-050);
}

.sf-epc-row.is-published {
  border-left-color: var(--apx-forest-300);
}

.sf-epc-row__body {
  min-width: 0;
}

.sf-epc-row__body > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sf-epc-row__body .sf-mono {
  color: var(--apx-forest-700);
  font-size: 9px;
  font-weight: 600;
}

.sf-epc-row__qty {
  color: var(--apx-slate-400);
  font-family: var(--apx-font-mono);
  font-size: 7px;
}

.sf-epc-row__body strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--apx-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-epc-row__body small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-epc-row__action {
  display: flex;
  gap: 3px;
}

.sf-epc-row__action .sf-icon-btn {
  width: 28px;
  height: 28px;
}

.sf-epc-row__action .apx-badge {
  font-size: 8px;
}

.sf-epc-right__foot > div {
  display: flex;
  flex-direction: column;
}

.sf-epc-right__foot strong {
  margin-top: 1px;
  color: var(--apx-ink);
  font-size: 10px;
}

/* RFQ drawer and toast —— 询价抽屉、遮罩与轻提示（本地清单，无提交接口） */

.sf-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--apx-z-overlay);
  background: color-mix(in srgb, var(--apx-charcoal-900) 55%, transparent);
  backdrop-filter: blur(2px);
}

.sf-drawer-backdrop[hidden] {
  display: none;
}

.sf-rfq-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--apx-z-overlay) + 1);
  display: flex;
  width: min(420px, 100%);
  flex-direction: column;
  border-left: 1px solid var(--apx-line);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-3);
  transform: translateX(102%);
  transition: transform var(--apx-duration-slow) var(--apx-ease-standard);
}

.sf-rfq-drawer.is-open {
  transform: translateX(0);
}

.sf-rfq-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-rfq-drawer__head h2 {
  margin-top: 3px;
  font-size: 22px;
  letter-spacing: -0.025em;
}

.sf-rfq-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.sf-rfq-empty {
  display: flex;
  min-height: 320px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/* 空态类声明了 display:flex，必须显式尊重 hidden 属性，否则有商品时仍显示“清单为空”。 */
.sf-rfq-empty[hidden] {
  display: none;
}

.sf-rfq-empty__icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid var(--apx-line);
  border-radius: 50%;
  background: var(--apx-surface);
  color: var(--apx-slate-400);
}

.sf-rfq-empty__icon svg {
  width: 28px;
  height: 28px;
}

.sf-rfq-empty strong {
  margin-top: 16px;
}

.sf-rfq-empty p {
  max-width: 300px;
  margin-top: 7px;
  color: var(--apx-slate-500);
  font-size: 11px;
}

.sf-rfq-lines {
  display: grid;
  gap: 8px;
}

.sf-rfq-line {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 150px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-surface);
}

/* Inquiry List 主图：保持正方形并等比 contain，空图由脚本渲染文本占位。 */
.sf-rfq-line__image {
  display: grid;
  width: 58px;
  height: 58px;
  grid-row: 1 / 3;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-rfq-line__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-rfq-line__image > span {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.sf-rfq-line__copy {
  min-width: 0;
}

.sf-rfq-line__copy span {
  display: block;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
}

.sf-rfq-line__meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
}

.sf-rfq-line__condition {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border-radius: var(--apx-radius-pill);
  font-family: var(--apx-font-sans) !important;
  font-size: 7px !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sf-rfq-line__condition--new {
  background: var(--apx-success-bg);
  color: var(--apx-success-fg) !important;
}

.sf-rfq-line__condition--used {
  background: var(--apx-warning-bg);
  color: var(--apx-warning-fg) !important;
}

.sf-rfq-line__copy strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--apx-forest-700);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* OE 是询价行的主键：独立标签 + Forest 等宽大字，优先于商品名识别。 */
.sf-rfq-line__oe-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.sf-rfq-line__oe-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px 4px;
  border-radius: var(--apx-radius-xs);
  background: var(--apx-forest-100);
  color: var(--apx-forest-700) !important;
  font-size: 7px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sf-rfq-line__copy .sf-rfq-line__oe {
  flex: 0 0 auto;
  overflow: visible;
  margin-top: 0;
  color: var(--apx-forest-700);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: clip;
}

.sf-rfq-line__copy small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-rfq-line__label {
  margin-top: 3px;
  color: var(--apx-slate-600) !important;
  font-family: var(--apx-font-sans) !important;
  font-size: 10px !important;
}

/* 行内数量编辑：修改后直接回写 localStorage，不触发整条列表重绘。 */
.sf-rfq-line__quantity {
  display: grid;
  grid-row: 2;
  grid-column: 2 / 4;
  justify-self: start;
  gap: 4px;
}

.sf-rfq-line__quantity > span {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.sf-rfq-line__quantity-stepper {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-rfq-line__quantity-stepper button {
  width: 26px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--apx-forest-700);
  font-size: 14px;
  cursor: pointer;
}

.sf-rfq-line__quantity-stepper button:hover {
  background: var(--apx-forest-050);
}

.sf-rfq-line__quantity-stepper input {
  width: 42px;
  min-height: 30px;
  padding: 0 3px;
  border: 0;
  border-inline: 1px solid var(--apx-line);
  background: var(--apx-white);
  color: var(--apx-ink);
  font: 600 10px var(--apx-font-mono);
  text-align: center;
  appearance: textfield;
}

.sf-rfq-line__quantity-stepper input::-webkit-inner-spin-button,
.sf-rfq-line__quantity-stepper input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.sf-rfq-line__note {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
}

.sf-rfq-line__note label {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sf-rfq-line__note textarea {
  min-height: 46px;
  line-height: 1.5;
  resize: vertical;
}

.sf-rfq-line__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sf-rfq-line__remove {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-slate-500);
  cursor: pointer;
}

.sf-rfq-line__remove:hover {
  border-color: var(--apx-error-line);
  background: var(--apx-error-bg);
  color: var(--apx-error-fg);
}

.sf-rfq-line__remove svg {
  width: 14px;
  height: 14px;
}

.sf-rfq-drawer__foot {
  display: grid;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--apx-line);
  background: var(--apx-surface);
}

.sf-rfq-extra {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.sf-rfq-extra label {
  color: var(--apx-slate-700);
  font-size: 11px;
  font-weight: 600;
}

.sf-rfq-extra__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(100px, 0.6fr);
  gap: 8px;
  margin-bottom: 8px;
}

.sf-rfq-extra__field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 4px;
}

/* Request quote 字段错误：沿用 Error 状态令牌，显示在对应控件下方。 */
.sf-rfq-extra__input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-ink);
  font-size: 11px;
  resize: vertical;
}

.sf-rfq-extra__input[aria-invalid="true"] {
  border-color: var(--apx-error-line);
  background: var(--apx-error-bg);
}

.sf-rfq-field-error {
  color: var(--apx-error-fg);
  font-size: 9px;
  line-height: 1.4;
}

@media (max-width: 575px) {
  .sf-rfq-line {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }

  .sf-rfq-line__image {
    width: 52px;
    height: 52px;
    grid-row: 1 / 3;
  }

}

.sf-rfq-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-rfq-total .sf-mono {
  font-size: 8px;
}

/* 匿名询价提示：先解释登录要求，保留本地清单，再由客户主动进入登录页。 */
.sf-rfq-auth-notice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 2px;
  padding: 12px;
  border: 1px solid var(--apx-warning-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-warning-bg);
  color: var(--apx-warning-fg);
}

.sf-rfq-auth-notice[hidden] {
  display: none;
}

.sf-rfq-auth-notice__icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
}

.sf-rfq-auth-notice__icon svg {
  width: 18px;
  height: 18px;
}

.sf-rfq-auth-notice strong {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.sf-rfq-auth-notice p {
  margin: 3px 0 8px;
  color: var(--apx-warning-fg);
  font-size: 10px;
  line-height: 1.55;
}

.sf-rfq-auth-notice__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
}

.sf-rfq-auth-notice__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--apx-forest-800);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.sf-rfq-auth-notice__action:hover {
  color: var(--apx-forest-700);
  text-decoration: underline;
}

.sf-rfq-auth-notice__action:focus-visible,
.sf-rfq-auth-notice__register a:focus-visible {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 3px;
}

.sf-rfq-auth-notice__action svg {
  width: 14px;
  height: 14px;
}

.sf-rfq-auth-notice__divider {
  color: color-mix(in srgb, var(--apx-warning-fg) 55%, transparent);
  font-size: 10px;
}

.sf-rfq-auth-notice__register {
  color: var(--apx-warning-fg);
  font-size: 10px;
  line-height: 1.5;
}

.sf-rfq-auth-notice__register a {
  color: var(--apx-forest-800);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.sf-rfq-auth-notice__register a:hover {
  color: var(--apx-forest-700);
  text-decoration: underline;
}

.sf-rfq-footnote {
  color: var(--apx-slate-500);
  font-size: 8px;
  text-align: center;
}

.sf-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--apx-z-toast);
  max-width: min(360px, calc(100vw - 40px));
  padding: 11px 14px;
  border: 1px solid var(--apx-charcoal-800);
  border-radius: var(--apx-radius-card);
  background: var(--apx-charcoal-950);
  box-shadow: var(--apx-shadow-3);
  color: var(--apx-white);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Performance debug —— 仅 ?debug=1 时输出，固定在左下角，不影响正常客户页面。 */
.sf-perf-debug {
  position: fixed;
  z-index: calc(var(--apx-z-toast) + 1);
  bottom: 20px;
  left: 20px;
  width: min(460px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--apx-line-strong);
  border-left: 3px solid var(--apx-forest-600);
  border-radius: var(--apx-radius-card);
  background: color-mix(in srgb, var(--apx-white) 97%, transparent);
  box-shadow: var(--apx-shadow-3);
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
}

.sf-perf-debug__head {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-surface-sunken);
}

.sf-perf-debug__eyebrow {
  color: var(--apx-forest-700);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sf-perf-debug h2 {
  margin: 3px 0 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.sf-perf-debug__summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-perf-debug__summary strong {
  color: var(--apx-forest-700);
  font-size: 14px;
  white-space: nowrap;
}

.sf-perf-debug__toggle {
  padding: 5px 9px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-ink);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.sf-perf-debug__toggle:focus-visible {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

.sf-perf-debug__body {
  padding: 13px 14px 14px;
}

.sf-perf-debug.is-collapsed .sf-perf-debug__body {
  display: none;
}

.sf-perf-debug section + section {
  margin-top: 16px;
}

.sf-perf-debug h3 {
  margin: 0 0 8px;
  color: var(--apx-slate-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sf-perf-debug__rows {
  display: grid;
  gap: 6px;
}

.sf-perf-debug__row {
  display: grid;
  grid-template-columns: minmax(112px, 0.9fr) minmax(48px, 1fr) 76px;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.sf-perf-debug__label {
  overflow: hidden;
  color: var(--apx-ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-perf-debug__track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--apx-radius-pill);
  background: var(--apx-surface-sunken);
}

.sf-perf-debug__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--apx-forest-500);
}

.sf-perf-debug__value {
  color: var(--apx-slate-700);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.sf-perf-debug__empty,
.sf-perf-debug__note {
  margin: 0;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-sans);
  font-size: 10px;
  line-height: 1.55;
}

.sf-perf-debug__note {
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid var(--apx-line);
}

@media (max-width: 767px) {
  .sf-perf-debug {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: 50vh;
  }
}

/* Footer —— 页脚：品牌反白标识、三栏链接与合规说明（仅营销页渲染） */

.site-footer {
  padding-block: 56px 18px;
  background: var(--apx-charcoal-950);
  color: var(--apx-on-dark-muted);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 0.65fr));
  gap: 36px;
  padding-bottom: 36px;
}

.site-footer__brand img {
  width: 280px;
  height: auto;
}

/* 高密度 Logo 的 picture 包装保持块级尺寸，避免行内基线产生额外空隙。 */
.site-footer__brand picture {
  display: block;
}

.site-footer__brand p {
  max-width: 420px;
  margin-top: 16px;
  font-size: 11px;
}

.site-footer__micro {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  color: var(--apx-forest-300);
  font-family: var(--apx-font-mono);
  font-size: 8px;
}

.site-footer__micro span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-footer__micro svg {
  width: 13px;
  height: 13px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 10px;
}

.site-footer__title {
  margin-bottom: 4px;
  color: var(--apx-white);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.site-footer__col a {
  color: var(--apx-on-dark-muted);
}

.site-footer__col a:hover {
  color: var(--apx-white);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--apx-white) 12%, transparent);
  font-size: 9px;
}

.site-footer__bottom .sf-mono {
  color: var(--apx-forest-300);
  font-size: 8px;
}

@media (prefers-reduced-motion: reduce) {
  /* 文档滚动容器是 html；只改 .sf-body 无法关掉第 20 行 html 的平滑滚动，
     也会让“定位热点”等脚本在减少动态偏好下仍然播放长距离滚动。 */
  html,
  .sf-body {
    scroll-behavior: auto;
  }

  .sf-part-card,
  .sf-part-card__image-link img,
  .sf-category-tile,
  .sf-brand-tile,
  .sf-hotspot,
  .sf-rfq-drawer,
  .sf-toast {
    transition: none;
  }

  .sf-hotspot:hover,
  .sf-hotspot:focus-visible,
  .sf-hotspot.is-focus {
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 1399px) {
  .site-masthead__inner {
    gap: 18px;
  }

  .site-brand img {
    width: 245px;
  }

  .site-nav {
    gap: 13px;
  }

  .site-nav__link {
    font-size: 12px;
  }

  .site-bom-link {
    display: none;
  }

  .sf-epc-preview {
    grid-template-columns: 220px minmax(0, 1fr) 300px;
  }

  .sf-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-brand-grid--wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sf-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-crossref-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sf-spareto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-epc-workspace {
    grid-template-columns: 256px minmax(0, 1fr) 390px;
  }
}

@media (max-width: 1199px) {
  /* 10 个大类在中等宽度改为 2 列，避免 5 列卡片过窄。 */
  .sf-category-tree {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav {
    display: none;
  }

  .site-menu-toggle {
    display: inline-grid;
  }

  .site-masthead__inner {
    min-height: 84px;
  }

  .sf-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
    gap: 36px;
    padding-block: 52px 42px;
  }

  .sf-hero-board__canvas {
    min-height: 340px;
  }

  .sf-epc-preview {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .sf-epc-preview__schedule {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--apx-line);
    border-left: 0;
  }

  .sf-schedule-head,
  .sf-epc-preview__schedule > .apx-btn {
    grid-column: 1 / -1;
  }

  .sf-brand-grid,
  .sf-brand-grid--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-product-grid,
  .sf-product-grid--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-pdp {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .sf-fitment-brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-technical-grid {
    grid-template-columns: 1fr;
  }

  .sf-epc-workspace {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .sf-epc-left {
    position: fixed;
    top: var(--apx-header-workspace);
    bottom: 0;
    left: 0;
    z-index: var(--apx-z-rail);
    width: var(--apx-rail);
    box-shadow: var(--apx-shadow-3);
    transform: translateX(-102%);
    transition: transform var(--apx-duration-slow) var(--apx-ease-standard);
  }

  .sf-epc-left.is-open {
    transform: translateX(0);
  }

  .sf-epc-left__close,
  .sf-epc-left-toggle {
    display: inline-grid;
  }
}

@media (max-width: 1023px) {
  .sf-container {
    width: calc(100% - 40px);
  }

  .site-utility__signal > span:not(.sf-status-dot):not(.site-utility__tag) {
    display: none;
  }

  .site-utility__tag {
    display: none;
  }

  .sf-utility-actions {
    gap: 4px;
  }

  .sf-utility-action {
    padding: 0 8px;
  }

  .site-masthead__inner {
    flex-wrap: wrap;
    padding-block: 10px;
  }

  .site-search {
    max-width: none;
    flex-basis: 100%;
    order: 5;
  }

  .sf-hero__inner {
    grid-template-columns: 1fr;
  }

  .sf-hero__visual {
    max-width: 680px;
  }

  .sf-hero h1 {
    max-width: 760px;
  }

  .sf-lookup-grid {
    grid-template-columns: 1fr;
  }

  .sf-data-grid,
  .sf-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-workflow-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-workflow-rail span:nth-child(3) {
    border-right: 0;
  }

  .sf-workflow-rail span:nth-child(-n+3) {
    border-bottom: 1px solid var(--apx-line);
  }

  .sf-brand-grid,
  .sf-brand-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-bom-card {
    grid-template-columns: 1fr;
  }

  .sf-page-hero__split,
  .sf-catalog-head__main {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-page-hero__stats {
    width: 100%;
  }

  .sf-page-hero__stats > div {
    flex: 1;
  }

  .sf-catalog-layout {
    grid-template-columns: 1fr;
  }

  .sf-facets {
    position: static;
  }

  .sf-facet-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-facet-form .apx-btn {
    grid-column: 1 / -1;
  }

  .sf-pdp {
    grid-template-columns: 1fr;
  }

  .sf-pdp__gallery {
    max-width: 760px;
  }

  /* 1024px 以下标题栏改为上下两段：动作区独占一行，缩略位置图与工作台按钮不再挤成两行。 */
  .sf-diagram-panel__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .sf-diagram-panel__actions {
    width: 100%;
    justify-content: space-between;
  }

  .sf-diagram-panel__body {
    grid-template-columns: 1fr;
  }

  .sf-diagram-frame--pdp {
    order: 1;
    grid-row: auto;
    grid-column: 1;
    border-right: 0;
    border-bottom: 1px solid var(--apx-line);
    border-left: 0;
  }

  .sf-diagram-panel__list {
    order: 2;
    position: static;
    width: auto;
    max-height: 420px;
  }

  .sf-fitment-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-spareto-grid {
    grid-template-columns: 1fr;
  }

  .sf-crossref-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-epc-workspace {
    display: block;
    height: auto;
    min-height: 0;
  }

  .sf-epc-center,
  .sf-epc-right {
    border-left: 0;
  }

  .sf-epc-right {
    min-height: 480px;
    border-top: 1px solid var(--apx-line);
  }

  .sf-epc-left {
    width: min(330px, 88vw);
  }

  .sf-epc-canvas {
    min-height: 540px;
  }

  .sf-epc-schedule {
    max-height: 600px;
  }

  .sf-epc-context__meta {
    display: none;
  }

  .sf-epc-vehiclebar__inner {
    flex-wrap: wrap;
    padding-block: 9px;
  }

  .sf-epc-attributes {
    order: 3;
    flex-basis: 100%;
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sf-container {
    width: calc(100% - 32px);
  }

  .sf-body {
    font-size: 13px;
  }

  .site-utility {
    display: none;
  }

  .site-masthead__inner {
    min-height: 66px;
    gap: 10px;
  }

  .site-brand img {
    width: 210px;
    max-height: 42px;
  }

  .site-brand__descriptor {
    display: none;
  }

  .site-actions {
    margin-left: auto;
  }

  .site-inquiry__copy {
    display: none;
  }

  .site-search {
    flex-wrap: wrap;
  }

  .site-search__button span {
    display: none;
  }

  .site-search__button {
    padding-inline: 13px;
  }

  .site-workspace-bar {
    height: auto;
    min-height: var(--apx-header-workspace);
  }

  .site-workspace-bar__inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 12px;
  }

  .site-workspace-bar .site-brand img {
    width: 190px;
  }

  .site-workspace-bar .site-brand__descriptor {
    display: none;
  }

  .site-workspace-actions {
    gap: 6px;
  }

  .site-workspace-link {
    display: none;
  }

  .site-workspace-bar .site-search {
    flex-basis: 100%;
    order: 5;
  }

  .sf-hero__inner {
    gap: 32px;
    padding-block: 34px 32px;
  }

  .sf-kicker-row {
    display: none;
  }

  .sf-hero h1 {
    margin-top: 14px;
    font-size: 38px;
  }

  .sf-hero__lead {
    font-size: 14px;
  }

  .sf-hero-search {
    grid-template-columns: 1fr;
  }

  .sf-hero-search .apx-btn {
    min-height: 46px;
  }

  .sf-hero__quick {
    line-height: 1.7;
  }

  .sf-metrics-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 26px;
  }

  .sf-metrics-ribbon > div:nth-child(2) {
    border-right: 0;
  }

  .sf-metrics-ribbon > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--apx-line);
  }

  /* 3 项指标在移动端：前两项并排，第三项（EPC 图纸）独占整行。 */
  .sf-metrics-ribbon > div:nth-child(3) {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .sf-hero-board__canvas {
    min-height: 300px;
  }

  .sf-cad-callout--one {
    top: 9%;
    left: 3%;
  }

  .sf-cad-callout--two {
    right: 3%;
    bottom: 9%;
  }

  .sf-section {
    padding-block: 50px;
  }

  .sf-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .sf-section-head h2 {
    font-size: 28px;
  }

  .sf-inline-search,
  .sf-epc-finder,
  .sf-catalog-search {
    grid-template-columns: 1fr;
  }

  .sf-lookup-card {
    padding: 18px;
  }

  .sf-route-steps {
    display: none;
  }

  .sf-workflow-rail {
    display: flex;
    overflow-x: auto;
  }

  .sf-workflow-rail span {
    flex: 0 0 auto;
    border-bottom: 0 !important;
  }

  .sf-epc-preview {
    grid-template-columns: 1fr;
  }

  .sf-epc-preview__tree {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--apx-line);
  }

  .sf-epc-preview__schedule {
    display: flex;
    grid-column: auto;
  }

  .sf-epc-preview__canvas {
    min-height: 370px;
  }

  .sf-data-grid,
  .sf-category-grid,
  .sf-brand-grid,
  .sf-brand-grid--wide,
  .sf-product-grid,
  .sf-product-grid--catalog,
  .sf-product-grid--related {
    grid-template-columns: 1fr;
  }

  .sf-data-card {
    padding: 20px;
  }

  .sf-trust-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-category-tile {
    min-height: 205px;
  }

  .sf-bom-card {
    padding: 24px 18px;
  }

  .sf-bom-actions {
    display: grid;
  }

  .sf-page-hero h1,
  .sf-catalog-head h1 {
    font-size: 32px;
  }

  .sf-page-hero__stats {
    flex-wrap: wrap;
  }

  .sf-page-hero__stats > div {
    min-width: 45%;
  }

  .sf-category-tree {
    grid-template-columns: 1fr;
  }

  .sf-category-group__head {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px;
  }

  /* 移动端同为一列，仅收紧左右留白，纵向节奏保持不变 */
  .sf-category-sublist {
    padding: 12px 14px 14px;
  }

  .sf-facet-form {
    grid-template-columns: 1fr;
  }

  .sf-exact-match {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-pagination {
    flex-wrap: wrap;
  }

  .sf-pagination__numbers {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .sf-context-strip .sf-container {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-context-strip__meta {
    display: none;
  }

  .sf-pdp {
    gap: 18px;
    padding-top: 18px;
  }

  /* 移动端图片区保底高度，主图仍按容器 50% 宽居中 */
  .sf-gallery-stage__media {
    min-height: 300px;
  }

  .sf-pdp__title h1 {
    font-size: 30px;
  }

  .sf-purchase-card {
    padding: 16px;
  }

  .sf-purchase-card__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-purchase-card__price {
    font-size: 24px;
  }

  .sf-purchase-actions {
    grid-template-columns: 1fr;
  }

  .sf-quantity-control {
    justify-self: start;
  }

  .sf-purchase-notes {
    display: grid;
    gap: 6px;
  }

  .sf-diagram-panel__head {
    align-items: flex-start;
    flex-direction: column;
  }

  /* 窄屏动作区跟随标题栏纵向排列，缩略位置图整行可点，避免与工作台按钮挤在一行。 */
  .sf-diagram-panel__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .sf-diagram-locator {
    width: 100%;
  }

  .sf-diagram-panel__head .apx-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .sf-tab {
    padding-inline: 11px;
  }

  .sf-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .sf-fitment-brands {
    grid-template-columns: 1fr;
  }

  .sf-crossref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer {
    padding-top: 40px;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-epc-context {
    padding: 7px 12px;
  }

  .sf-epc-context__breadcrumb {
    overflow: hidden;
    max-height: 32px;
  }

  .sf-epc-vehiclebar__identity {
    width: 100%;
  }

  .sf-epc-oe-search {
    width: 100%;
  }

  .sf-epc-oe-search input {
    flex: 1;
    width: auto;
  }

  .sf-epc-result-strip__inner {
    flex-wrap: wrap;
    padding: 9px 12px;
  }

  .sf-epc-result-strip__inner > div {
    flex-basis: calc(100% - 50px);
  }

  .sf-epc-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-epc-toolbar__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .sf-epc-canvas {
    min-height: 390px;
    padding: 10px;
  }

  .sf-epc-canvas__badge {
    right: 10px;
    bottom: 38px;
    left: 10px;
  }

  .sf-epc-legend {
    right: 10px;
    bottom: 9px;
    left: 10px;
    justify-content: space-between;
  }

  .sf-epc-right__head strong {
    max-width: 240px;
  }

  .sf-rfq-drawer__body {
    padding-inline: 14px;
  }
}

@media (max-width: 420px) {
  .sf-purchase-metrics,
  .sf-evidence-card__metrics {
    grid-template-columns: 1fr;
  }

  .sf-metrics-ribbon strong {
    font-size: 18px;
  }

  .sf-cad-callout {
    transform: scale(0.86);
    transform-origin: left center;
  }

  .sf-cad-callout--two {
    transform-origin: right center;
  }
}


/* ------------------------------------------------------------------
 * EPC flow（2026-10-23）—— 品牌 → 车系 → 年款 → 车辆参数 → 车型 → 图组 → 零件
 *
 * 只使用 apex-vi.css 的既有令牌（森林绿 / 炭黑 / 冷灰 / Inter + JetBrains Mono），
 * 不新增主色、状态色或字体。类名前缀统一 sf-epcflow / sf-epc-*，与旧三栏工作台
 * （sf-epc-workspace / sf-epc-left …）互不影响；旧样式保留给首页 EPC 预览。
 * ------------------------------------------------------------------ */

.sf-epcflow {
  background: var(--apx-surface);
  color: var(--apx-ink);
}

.sf-epcflow__container {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
}

.sf-epcflow-head {
  border-bottom: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.sf-epcflow-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 18px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sf-epcflow-crumbs a {
  color: var(--apx-slate-600);
  text-decoration: none;
}

.sf-epcflow-crumbs a:hover {
  color: var(--apx-forest-700);
}

.sf-epcflow-crumbs .is-current {
  color: var(--apx-ink);
  font-weight: 600;
}

.sf-epcflow-crumbs__sep {
  color: var(--apx-slate-300);
}

.sf-epcflow-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-block: 22px 26px;
}

.sf-epcflow-title__copy {
  min-width: 0;
  max-width: 820px;
}

.sf-epcflow-title h1 {
  margin: 6px 0 0;
  color: var(--apx-ink);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.sf-epcflow-title p {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--apx-slate-600);
  font-size: 13px;
  line-height: 1.65;
}

.sf-epcflow-oe {
  flex: 0 0 auto;
  width: 360px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-surface);
}

.sf-epcflow-oe label {
  display: block;
  margin-bottom: 6px;
  color: var(--apx-slate-600);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sf-epcflow-oe__field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-epcflow-oe__field > span {
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-epcflow-oe__field input {
  min-width: 0;
  flex: 1;
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--apx-ink);
  font-size: 11px;
}

.sf-epcflow-oe__field input:focus {
  outline: none;
}

.sf-epcflow-oe small {
  display: block;
  margin-top: 7px;
  color: var(--apx-slate-500);
  font-size: 10px;
}

/* 进度条 */
.sf-epcrail {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--apx-line);
  list-style: none;
  overflow-x: auto;
}

.sf-epcrail__item {
  display: flex;
  flex: 1 1 0;
  min-width: 118px;
  border-bottom: 2px solid transparent;
  color: var(--apx-slate-500);
}

.sf-epcrail__link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 13px 14px 14px;
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--apx-duration-fast) var(--apx-ease-standard),
    color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epcrail__link.is-static {
  cursor: default;
}

a.sf-epcrail__link:hover {
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
}

a.sf-epcrail__link:hover .sf-epcrail__num {
  border-color: var(--apx-forest-300);
  color: var(--apx-forest-700);
}

.sf-epcrail__item + .sf-epcrail__item {
  border-left: 1px solid var(--apx-line);
}

.sf-epcrail__num {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--apx-line-strong);
  border-radius: 50%;
  background: var(--apx-white);
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
}

.sf-epcrail__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sf-epcrail__item.is-done {
  color: var(--apx-forest-700);
}

.sf-epcrail__item.is-done .sf-epcrail__num {
  border-color: var(--apx-forest-300);
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
}

.sf-epcrail__item.is-current {
  border-bottom-color: var(--apx-forest-600);
  background: var(--apx-forest-050);
  color: var(--apx-forest-800);
}

.sf-epcrail__item.is-current .sf-epcrail__num {
  border-color: var(--apx-forest-600);
  background: var(--apx-forest-600);
  color: var(--apx-white);
}

/* 提示条 */
.sf-epcflow-notice {
  border-bottom: 1px solid var(--apx-warning-line);
  background: var(--apx-warning-bg);
}

.sf-epcflow-notice .sf-epcflow__container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 12px;
  color: var(--apx-warning-fg);
}

.sf-epcflow-notice p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.sf-epcflow-notice__icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-epcflow-notice__icon svg {
  width: 18px;
  height: 18px;
}

.sf-epcflow-body {
  padding-block: 36px 72px;
}

/* Hero（EPC 首页） */
.sf-epc-hero {
  border-bottom: 1px solid var(--apx-line);
  background:
    linear-gradient(180deg, var(--apx-white) 0%, var(--apx-surface) 100%);
}

.sf-epc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 56px;
  align-items: center;
  padding-block: 64px 58px;
}

.sf-epc-hero__copy h1 {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.sf-epc-hero__copy > p {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--apx-slate-600);
  font-size: 14px;
  line-height: 1.75;
}

.sf-epc-hero__search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 680px;
  margin-top: 26px;
  padding: 7px 7px 7px 16px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-action);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-1);
}

.sf-epc-hero__search > span {
  color: var(--apx-slate-500);
  font-size: 10px;
  font-weight: 600;
}

.sf-epc-hero__search input {
  min-width: 0;
  flex: 1;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--apx-ink);
  font-size: 13px;
}

.sf-epc-hero__search input:focus {
  outline: none;
}

.sf-epc-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 28px;
}

.sf-epc-hero__stats > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sf-epc-hero__stats b {
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sf-epc-hero__stats small {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sf-epc-hero__board {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-2);
}

/* EPC Hero 教程：iframe 只使用自身文档做 15s 时间轴，父页面保持轻量。 */
.sf-epc-hero__board--tutorial {
  min-height: 480px;
  background: var(--apx-white);
}

.sf-epc-hero__tutorial-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* 首页区块与品牌卡 */
.sf-epcflow-section {
  padding-block: 58px;
}

/* Brand 返回锚点停在固定营销抬头下方，避免“Choose a car brand”被顶栏遮挡。 */
.sf-epcflow-section[id] {
  scroll-margin-top: calc(var(--apx-header-utility) + var(--apx-header-marketing) + 18px);
}

.sf-epcflow-section--surface {
  border-block: 1px solid var(--apx-line);
  background: var(--apx-surface-cool);
}

.sf-epcflow-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 26px;
}

.sf-epcflow-section__head h2 {
  margin: 6px 0 0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sf-epcflow-section__head p {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--apx-slate-600);
  font-size: 12px;
  line-height: 1.7;
}

.sf-epcflow-section__meta {
  flex: 0 0 auto;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.sf-epc-brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sf-epc-brand-card {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    box-shadow var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epc-brand-card:hover {
  border-color: var(--apx-forest-300);
  box-shadow: var(--apx-shadow-2);
  transform: translateY(-2px);
}

.sf-epc-brand-card__mono {
  display: inline-grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid var(--apx-forest-100);
  border-radius: var(--apx-radius-control);
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 20px;
  font-weight: 700;
}

.sf-epc-brand-card__mono.has-logo {
  /* 1× 屏幕上为本就精细的第三方字标保留 48px 图形区，减少缩小采样造成的边缘锯齿。 */
  padding: 5px;
  border-color: var(--apx-line);
  background: var(--apx-white);
}

.sf-epc-brand-card__mono img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-epc-brand-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.sf-epc-brand-card__body strong {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.sf-epc-brand-card__body small {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sf-epc-brand-card__stats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-slate-600);
  font-size: 11px;
}

.sf-epc-brand-card__stats b {
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-weight: 600;
}

.sf-epc-brand-card__arrow {
  position: absolute;
  top: 20px;
  right: 18px;
  color: var(--apx-slate-400);
  transition: color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epc-brand-card:hover .sf-epc-brand-card__arrow {
  color: var(--apx-forest-600);
}

.sf-epc-brand-card__arrow svg {
  width: 18px;
  height: 18px;
}

.sf-epc-how {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  list-style: none;
  overflow: hidden;
}

.sf-epc-how li {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
}

.sf-epc-how li + li {
  border-left: 1px solid var(--apx-line);
}

.sf-epc-how b {
  color: var(--apx-forest-600);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.sf-epc-how strong {
  font-size: 13px;
}

.sf-epc-how span {
  color: var(--apx-slate-500);
  font-size: 11px;
  line-height: 1.55;
}

/* 品牌页：筛选 + 车系列表 */
.sf-epc-browser {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.sf-epc-browser__filters {
  position: sticky;
  top: calc(var(--apx-header-utility) + var(--apx-header-marketing) + 20px);
  display: grid;
  gap: 14px;
}

.sf-epcfilter-card {
  padding: 18px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-epcfilter-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-epcfilter-card__head strong {
  font-family: var(--apx-font-mono);
  font-size: 10px;
  color: var(--apx-slate-600);
}

.sf-epcfilter-group {
  display: grid;
  gap: 8px;
  padding-top: 14px;
}

.sf-epcfilter-group__label {
  color: var(--apx-slate-700);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sf-epcfilter-group__hint {
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-epc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sf-epc-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  color: var(--apx-slate-700);
  font-size: 11px;
  text-decoration: none;
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    background-color var(--apx-duration-fast) var(--apx-ease-standard),
    color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epc-pill:hover {
  border-color: var(--apx-forest-300);
  color: var(--apx-forest-700);
}

.sf-epc-pill.is-active {
  border-color: var(--apx-forest-600);
  background: var(--apx-forest-600);
  color: var(--apx-white);
  font-weight: 600;
}

.sf-epc-pills--tight .sf-epc-pill {
  font-family: var(--apx-font-mono);
  font-size: 10px;
}

.sf-epcfilter-search {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--apx-line);
}

.sf-epcfilter-search__icon {
  display: none;
}

.sf-epcfilter-search input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  font-size: 12px;
}

.sf-epcfilter-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: var(--apx-slate-600);
  font-size: 11px;
  text-decoration: none;
}

.sf-epcfilter-reset svg {
  width: 15px;
  height: 15px;
}

.sf-epc-letter-group {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding-block: 8px 18px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-epc-letter-group:last-child {
  border-bottom: 0;
}

.sf-epc-letter-group__letter {
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.sf-epc-letter-group__list {
  display: grid;
  gap: 2px;
}

.sf-epc-model-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--apx-radius-control);
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--apx-duration-fast) var(--apx-ease-standard),
    border-color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epc-model-row:hover {
  border-color: var(--apx-line);
  background: var(--apx-white);
}

.sf-epc-model-row__name {
  display: flex;
  min-width: 220px;
  flex-direction: column;
  gap: 2px;
}

.sf-epc-model-row__name strong {
  font-size: 14px;
}

.sf-epc-model-row__name small {
  color: var(--apx-slate-400);
  font-family: var(--apx-font-mono);
  font-size: 9px;
}

.sf-epc-model-row__meta {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--apx-slate-500);
  font-size: 11px;
}

.sf-epc-model-row__meta b {
  color: var(--apx-slate-700);
  font-family: var(--apx-font-mono);
  font-weight: 600;
}

.sf-epc-model-row__arrow {
  color: var(--apx-slate-300);
}

.sf-epc-model-row:hover .sf-epc-model-row__arrow {
  color: var(--apx-forest-600);
}

.sf-epc-model-row__arrow svg {
  width: 17px;
  height: 17px;
}

/* 世代卡片 */
.sf-epc-sectionbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.sf-epc-sectionbar h2 {
  margin: 5px 0 0;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em;
}

.sf-epc-sectionbar__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--apx-slate-500);
  font-size: 11px;
}

.sf-epc-sectionbar__meta b {
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
}

.sf-epc-generations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sf-epc-generation {
  position: relative;
  display: flex;
  min-height: 172px;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    box-shadow var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard);
}

a.sf-epc-generation:hover {
  border-color: var(--apx-forest-300);
  box-shadow: var(--apx-shadow-2);
  transform: translateY(-2px);
}

.sf-epc-generation.is-disabled {
  opacity: 0.55;
}

.sf-epc-generation__code {
  color: var(--apx-forest-600);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.sf-epc-generation__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 18px;
}

.sf-epc-generation__body strong {
  font-size: 17px;
}

.sf-epc-generation__body small {
  color: var(--apx-slate-500);
  font-size: 11px;
}

.sf-epc-generation__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 10px;
}

.sf-epc-generation__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--apx-forest-700);
  font-weight: 600;
}

.sf-epc-generation__go svg {
  width: 14px;
  height: 14px;
}

.sf-epc-generation__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 3px 8px;
  border: 1px solid var(--apx-forest-200);
  border-radius: var(--apx-radius-pill);
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 车辆参数（Step 1 / Step 2） */
.sf-epc-params {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}

.sf-epc-params__main {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-epc-params__head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-epc-params__head h2 {
  margin: 5px 0 0;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em;
}

.sf-epc-params__head p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--apx-slate-600);
  font-size: 12px;
  line-height: 1.7;
}

.sf-epc-params__locked {
  padding: 14px 0 4px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-epc-params__locked-label {
  display: block;
  margin-bottom: 8px;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sf-epc-param-group {
  padding-top: 22px;
}

.sf-epc-param-group > h3 {
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--apx-line);
  color: var(--apx-slate-700);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-epc-dim {
  min-width: 0;
  margin: 0;
  padding: 20px 0 4px;
  border: 0;
}

.sf-epc-dim legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  margin-bottom: 10px;
}

.sf-epc-dim legend span {
  color: var(--apx-ink);
  font-size: 13px;
  font-weight: 650;
}

.sf-epc-dim legend small {
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-epc-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 268px;
  overflow-y: auto;
  padding: 10px 10px 2px 2px;
}

.sf-epc-choice-group {
  position: relative;
  flex: 0 1 auto;
  min-width: 168px;
  max-width: 280px;
}

.sf-epc-choice {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface-sunken);
  cursor: pointer;
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    background-color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epc-choice:hover {
  border-color: var(--apx-forest-300);
  background: var(--apx-forest-050);
}

.sf-epc-choice.is-active {
  border-color: var(--apx-forest-600);
  background: var(--apx-white);
}

.sf-epc-choice.is-disabled {
  border-color: transparent;
  background: var(--apx-surface-sunken);
  cursor: not-allowed;
}

.sf-epc-choice.is-disabled:hover {
  border-color: transparent;
  background: var(--apx-surface-sunken);
}

.sf-epc-choice.is-disabled .sf-epc-choice__body b,
.sf-epc-choice.is-disabled .sf-epc-choice__body small {
  color: var(--apx-slate-500);
}

.sf-epc-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 鼠标选中只保留单一绿框；键盘操作才显示外焦点环，避免选中态叠加两层边框。 */
.sf-epc-choice:has(input:focus-visible) {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

/* 不支持 :has() 的浏览器保留焦点提示；现代 Chromium 走上面的 :focus-visible 分支。 */
@supports not selector(:has(*)) {
  .sf-epc-choice:focus-within {
    outline: 2px solid var(--apx-forest-600);
    outline-offset: 2px;
  }
}

.sf-epc-choice__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.sf-epc-choice__body b {
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sf-epc-choice__body small {
  color: var(--apx-slate-500);
  font-size: 10px;
  line-height: 1.4;
}

a.sf-epc-choice__clear {
  position: absolute;
  z-index: 2;
  top: -8px;
  right: -8px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: var(--apx-radius-pill);
  background: var(--apx-forest-600);
  color: var(--apx-white);
}

a.sf-epc-choice__clear:hover {
  background: var(--apx-forest-700);
  color: var(--apx-white);
}

a.sf-epc-choice__clear:focus-visible {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

.sf-epc-choice__clear svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.sf-epc-params__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--apx-line);
}

.sf-epc-params__actions .apx-btn--quiet {
  margin-right: auto;
}

.sf-epc-params__aside {
  position: sticky;
  top: calc(var(--apx-header-utility) + var(--apx-header-marketing) + 20px);
  display: grid;
  gap: 14px;
}

.sf-epc-aside-card {
  padding: 20px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-epc-aside-card h3 {
  margin: 6px 0 2px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.sf-epc-aside-card__gen {
  margin: 0;
  color: var(--apx-slate-600);
  font-size: 11px;
  line-height: 1.6;
}

.sf-epc-aside-card__gen strong {
  color: var(--apx-ink);
}

.sf-epc-aside-card__change {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--apx-forest-700);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.sf-epc-aside-card__change svg {
  width: 14px;
  height: 14px;
}

.sf-epc-aside-card__hint {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-size: 11px;
  line-height: 1.6;
}

.sf-epc-aside-card__count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--apx-line);
}

.sf-epc-aside-card__count b {
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 24px;
  letter-spacing: -0.03em;
}

.sf-epc-aside-card__count span {
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-epc-aside-card .sf-btn-block {
  margin-top: 12px;
}

.sf-epc-aside-note {
  padding: 16px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-surface-cool);
}

.sf-epc-aside-note p {
  margin: 6px 0 0;
  color: var(--apx-slate-600);
  font-size: 11px;
  line-height: 1.65;
}

/* chips */
.sf-epcchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.sf-epcchip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  font-size: 10px;
}

.sf-epcchip small {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sf-epcchip b {
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  font-weight: 600;
}

/* OE Fitment Explorer —— 产品页进入 EPC 后的车辆筛选与上下文列表 */

.sf-epcfitfilter-shell {
  position: relative;
  display: flow-root;
}

.sf-epcfitfilter-shell.is-guide-active .sf-epcfitfilter {
  border-color: var(--apx-forest-600);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--apx-forest-600) 14%, transparent),
    var(--apx-shadow-2);
}

.sf-epcfitfilter-guide {
  position: relative;
  z-index: 2;
  display: grid;
  width: auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--apx-forest-300);
  border-left: 3px solid var(--apx-forest-600);
  border-radius: var(--apx-radius-card);
  background: var(--apx-forest-050);
  box-shadow: var(--apx-shadow-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  animation: sf-epcfitfilter-guide-cycle 8s var(--apx-ease-standard) both;
}

.sf-epcfitfilter-guide[hidden] {
  display: none;
}

.sf-epcfitfilter-guide::before,
.sf-epcfitfilter-guide::after {
  position: absolute;
  left: var(--sf-guide-target-x, 121px);
  width: 18px;
  height: 9px;
  content: "";
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.sf-epcfitfilter-guide::before {
  top: -8px;
  background: var(--apx-forest-300);
}

.sf-epcfitfilter-guide::after {
  top: -5px;
  width: 14px;
  height: 7px;
  background: var(--apx-forest-050);
}

.sf-epcfitfilter-guide__glow {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
}

.sf-epcfitfilter-guide__glow line {
  fill: none;
  stroke: var(--apx-forest-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 17 83;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 3px var(--apx-forest-300))
    drop-shadow(0 0 7px color-mix(in srgb, var(--apx-forest-300) 72%, transparent));
  animation: sf-epcfitfilter-guide-glow 4.8s linear 1.2s 1 both;
}

.sf-epcfitfilter-guide__glow .is-bottom {
  stroke-dashoffset: 0;
}

@keyframes sf-epcfitfilter-guide-cycle {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }

  7% {
    opacity: 1;
    transform: translateY(0);
  }

  90% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes sf-epcfitfilter-guide-glow {
  0% {
    opacity: 0;
    stroke-dashoffset: 100;
  }

  10% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

.sf-epcfitfilter-guide.is-reduced-motion {
  animation: sf-epcfitfilter-guide-reduced 8s linear both;
}

.sf-epcfitfilter-guide.is-reduced-motion .sf-epcfitfilter-guide__glow line {
  animation: none;
  opacity: 1;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

@keyframes sf-epcfitfilter-guide-reduced {
  0% {
    opacity: 0;
    transform: none;
  }

  10%,
  88% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

.sf-epcfitfilter-guide__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-forest-700);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.sf-epcfitfilter-guide__badge svg {
  width: 14px;
  height: 14px;
}

.sf-epcfitfilter-guide__copy {
  min-width: 0;
}

.sf-epcfitfilter-guide__copy strong {
  display: block;
  color: var(--apx-ink);
  font-size: 13px;
}

.sf-epcfitfilter-guide__copy p {
  margin: 3px 0 0;
  color: var(--apx-slate-600);
  font-size: 11px;
  line-height: 1.5;
}

.sf-epcfitfilter-guide__steps {
  color: var(--apx-forest-700);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.sf-epcfitfilter-guide + .sf-epcfitfilter {
  margin-top: 10px;
}

.sf-epcfitfilter {
  display: grid;
  height: auto;
  gap: 14px;
  margin: 20px 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-epcfitfilter__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 152px;
  align-items: stretch;
  gap: 18px;
}

.sf-epcfitfilter__main {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.sf-epcfitfilter__aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.sf-epcfitfilter__aside .sf-epcfitfilter__product {
  flex: 0 0 auto;
  width: 100%;
}

.sf-epcfitfilter__product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    background-color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epcfitfilter__product:hover {
  border-color: var(--apx-forest-300);
  background: var(--apx-forest-050);
}

.sf-epcfitfilter__product-media {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  padding: 8px;
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-slate-300);
  overflow: hidden;
}

.sf-epcfitfilter__product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-epcfitfilter__product-media svg {
  width: 42px;
  height: 42px;
}

.sf-epcfitfilter__product-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 0 2px 2px;
}

.sf-epcfitfilter__product-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--apx-ink);
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sf-epcfitfilter__product-copy small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--apx-forest-700);
  font-size: 9px;
  font-weight: 600;
}

.sf-epcfitfilter__product-copy small svg {
  width: 12px;
  height: 12px;
}

.sf-epcfitfilter__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.sf-epcfitfilter__head strong {
  display: block;
  margin-top: 3px;
  color: var(--apx-ink);
  font-size: 16px;
}

.sf-epcfitfilter__head-oe {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--apx-radius-control);
  background: var(--apx-forest-050);
  color: var(--apx-forest-700);
  font-size: 10px;
  font-weight: 600;
  vertical-align: 1px;
}

.sf-epcfitfilter__head p {
  max-width: 720px;
  margin: 5px 0 0;
  color: var(--apx-slate-600);
  font-size: 11px;
  line-height: 1.55;
}

.sf-epcfitfilter__controls {
  display: grid;
  grid-template-columns:
    minmax(140px, 0.75fr)
    minmax(160px, 0.9fr)
    minmax(140px, 0.7fr)
    minmax(220px, 1.4fr)
    auto;
  align-items: end;
  gap: 10px;
}

.sf-epcfitfilter__controls > label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--apx-slate-600);
  font-size: 10px;
  font-weight: 600;
}

.sf-epcfitfilter__controls select,
.sf-epcfitfilter__searchbox {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-ink);
  font-size: 12px;
}

.sf-epcfitfilter__controls select {
  padding: 0 34px 0 10px;
}

.sf-epcfitfilter__searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.sf-epcfitfilter__searchbox svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--apx-slate-500);
}

.sf-epcfitfilter__searchbox input {
  min-width: 0;
  flex: 1;
  min-height: 38px;
  border: 0;
  background: transparent;
  font-size: 12px;
}

.sf-epcfitfilter__searchbox input:focus {
  outline: none;
}

.sf-epcfitfilter__controls select:focus,
.sf-epcfitfilter__searchbox:focus-within {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

.sf-epcfitfilter__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sf-epcfitment__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.sf-epcfitment__head h2 {
  margin: 5px 0 0;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em;
}

.sf-epcfitment__head p {
  margin: 6px 0 0;
  color: var(--apx-slate-600);
  font-size: 12px;
}

.sf-epcfitment__match-count {
  flex: 0 0 auto;
  color: var(--apx-slate-600);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.sf-epcfitment__match-count b {
  color: var(--apx-forest-700);
  font-size: 20px;
}

.sf-epcfitment-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  overflow: hidden;
}

.sf-epcfitment-metrics > div {
  min-width: 0;
  padding: 14px 16px;
}

.sf-epcfitment-metrics > div + div {
  border-left: 1px solid var(--apx-line);
}

.sf-epcfitment-metrics b {
  display: block;
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-size: 22px;
}

.sf-epcfitment-metrics span {
  color: var(--apx-slate-600);
  font-size: 10px;
}

.sf-epcfitment-card .sf-epc-variant__code {
  min-width: 98px;
  padding-inline: 8px;
  font-size: 10px;
}

.sf-epcfitment-card .sf-epc-variant__foot > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 车型列表 */
.sf-epc-variants-head,
.sf-epc-diagrams-head,
.sf-epc-diagramhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.sf-epc-variants-head h2,
.sf-epc-diagrams-head h2,
.sf-epc-diagramhead h2 {
  margin: 5px 0 0;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em;
}

.sf-epc-variants-head p,
.sf-epc-diagrams-head p,
.sf-epc-diagramhead p {
  margin: 7px 0 0;
  color: var(--apx-slate-600);
  font-size: 12px;
}

.sf-epc-variants-chips,
.sf-epc-diagrams-chips,
.sf-epc-diagramchips {
  margin-bottom: 18px;
}

.sf-epc-diagramchips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.sf-epc-diagramchips .sf-epcchips {
  flex: 1;
  margin-top: 0;
}

.sf-epc-debug-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid var(--apx-warning-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-used-line);
  color: var(--apx-error-fg);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.sf-epc-debug-link:hover {
  border-color: var(--apx-error-line);
  background: var(--apx-used-bg);
  color: var(--apx-error-fg);
}

.sf-epc-debug-link:focus-visible {
  outline: 2px solid var(--apx-error-fg);
  outline-offset: 2px;
}

.sf-epc-variant-list {
  display: grid;
  gap: 10px;
}

.sf-epc-variant {
  padding: 18px 20px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-epc-variant.is-unavailable {
  opacity: 0.7;
}

.sf-epc-variant__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sf-epc-variant__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.sf-epc-variant__code {
  display: inline-grid;
  min-width: 78px;
  min-height: 42px;
  place-items: center;
  padding: 0 10px;
  border: 1px solid var(--apx-forest-100);
  border-radius: var(--apx-radius-control);
  background: var(--apx-forest-050);
  color: var(--apx-forest-800);
  font-family: var(--apx-font-mono);
  font-size: 14px;
  font-weight: 700;
}

.sf-epc-variant__identity h3 {
  margin: 0;
  font-size: 16px;
}

.sf-epc-variant__identity small {
  display: block;
  max-width: 620px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--apx-slate-400);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-epc-variant__count {
  flex: 0 0 auto;
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 10px;
}

.sf-epc-variant__params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px 18px;
  margin: 16px 0 0;
  padding: 14px 0;
  border-block: 1px solid var(--apx-line);
}

.sf-epc-variant__params div {
  min-width: 0;
}

.sf-epc-variant__params dt {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sf-epc-variant__params dd {
  margin: 2px 0 0;
  color: var(--apx-ink);
  font-family: var(--apx-font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.sf-epc-variant__params .is-more dd {
  color: var(--apx-slate-500);
}

.sf-epc-variant__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  color: var(--apx-slate-500);
  font-size: 11px;
}

.sf-epc-variant__foot b {
  color: var(--apx-slate-700);
  font-family: var(--apx-font-mono);
  font-weight: 600;
}

/* 图组列表 */
.sf-epc-diagrams {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.sf-epc-chapters {
  position: sticky;
  top: calc(var(--apx-header-utility) + var(--apx-header-marketing) + 20px);
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-epc-chapters > .sf-kicker {
  margin-bottom: 8px;
}

.sf-epc-chapter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--apx-radius-control);
  color: var(--apx-slate-700);
  font-size: 11px;
  text-decoration: none;
}

.sf-epc-chapter:hover {
  background: var(--apx-surface);
}

.sf-epc-chapter.is-active {
  border-color: var(--apx-forest-300);
  background: var(--apx-forest-050);
  color: var(--apx-forest-800);
  font-weight: 600;
}

.sf-epc-chapter b {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 9px;
  font-weight: 600;
}

.sf-epc-chapters__empty {
  margin: 6px 0 0;
  color: var(--apx-slate-500);
  font-size: 11px;
  line-height: 1.5;
}

.sf-epc-diagram-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--apx-line-strong);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
}

.sf-epc-diagram-search__icon {
  display: inline-flex;
  color: var(--apx-slate-400);
}

.sf-epc-diagram-search__icon svg {
  width: 17px;
  height: 17px;
}

.sf-epc-diagram-search input {
  min-width: 0;
  flex: 1;
  min-height: 34px;
  border: 0;
  background: transparent;
  font-size: 12px;
}

.sf-epc-diagram-search input:focus {
  outline: none;
}

.sf-epc-diagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sf-epc-diagram-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    box-shadow var(--apx-duration-fast) var(--apx-ease-standard),
    transform var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epc-diagram-card:hover {
  border-color: var(--apx-forest-300);
  box-shadow: var(--apx-shadow-2);
  transform: translateY(-2px);
}

.sf-epc-diagram-card__img {
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--apx-line);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--apx-charcoal-900) 7%, transparent) 1px, transparent 1px),
    var(--apx-white);
  background-size: 20px 20px;
  overflow: hidden;
}

.sf-epc-diagram-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.sf-epc-diagram-card__placeholder {
  color: var(--apx-slate-300);
}

.sf-epc-diagram-card__placeholder svg {
  width: 42px;
  height: 42px;
}

.sf-epc-diagram-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 14px;
}

.sf-epc-diagram-card__code {
  color: var(--apx-forest-700);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.sf-epc-diagram-card__body strong {
  font-size: 13px;
  line-height: 1.35;
}

.sf-epc-diagram-card__body small {
  color: var(--apx-slate-500);
  font-size: 10px;
}

/* 图组详情 */
.sf-epc-focusnote {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 11px 14px;
  border: 1px solid var(--apx-forest-200);
  border-radius: var(--apx-radius-control);
  background: var(--apx-forest-050);
  color: var(--apx-forest-800);
}

.sf-epc-focusnote.is-warning {
  border-color: var(--apx-warning-line);
  background: var(--apx-warning-bg);
  color: var(--apx-warning-fg);
}

.sf-epc-focusnote p {
  margin: 0;
  font-size: 11px;
}

.sf-epc-focusnote__icon {
  display: inline-flex;
}

.sf-epc-focusnote__icon svg {
  width: 18px;
  height: 18px;
}

.sf-epc-diagramview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 16px;
  /* 左右共享同一受限高度；两侧各自滚动，底边严格对齐且不会由长清单撑高整页。 */
  --sf-epc-workspace-height: min(calc(76vh + 96px), 860px);
  align-items: start;
}

.sf-epc-figure,
.sf-epc-schedule {
  min-width: 0;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
}

.sf-epc-figure {
  display: flex;
  height: var(--sf-epc-workspace-height);
  flex-direction: column;
}

.sf-epc-figure__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-epc-figure__bar strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

.sf-epc-figure__tools {
  display: flex;
  gap: 5px;
}

.sf-epc-figure__stage {
  display: grid;
  min-height: 0;
  flex: 1;
  /* 水平居中、垂直从顶部开始，确保图面上沿实际留出 50px，而不被居中定位抵消。 */
  place-items: start center;
  /* 顶部固定预留 50px：中心缩放时给热点/引线留出安全空间，避免靠近顶边的标注被裁切。 */
  padding: 50px 20px 20px;
  overflow: auto;
  background: var(--apx-surface);
}

.sf-epc-figure__stage .sf-hotspot {
  min-width: 28px;
  min-height: 20px;
  padding: 0 5px;
  border-width: 1.5px;
  font-family: var(--apx-font-mono);
  font-size: 9px;
  line-height: 1;
}

.sf-epc-figure__stage .sf-diagram-frame {
  /* 宽高必须严格按图片比例：热点坐标是图片像素百分比，frame 一旦被固定高度 letterbox，
     引脚就会整体偏移。超高图让 stage 内部滚动，不压 frame 比例。 */
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--diagram-ratio);
}

.sf-epc-figure__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-epc-figure__foot > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-epc-figure__foot svg {
  width: 15px;
  height: 15px;
}

.sf-epc-schedule {
  display: flex;
  height: var(--sf-epc-workspace-height);
  min-height: 0;
  flex-direction: column;
}

.sf-epc-schedule__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--apx-line);
}

.sf-epc-schedule__head strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

.sf-epc-schedule__head .sf-mono {
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-epc-schedule__filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 14px;
  padding: 0 10px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
}

.sf-epc-schedule__filter > span {
  display: inline-flex;
  color: var(--apx-slate-400);
}

.sf-epc-schedule__filter svg {
  width: 15px;
  height: 15px;
}

.sf-epc-schedule__filter input {
  min-width: 0;
  flex: 1;
  min-height: 34px;
  border: 0;
  background: transparent;
  font-size: 11px;
}

.sf-epc-schedule__filter input:focus {
  outline: none;
}

.sf-epc-schedule__rows {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
}

.sf-epc-rowitem {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 5px;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: var(--apx-radius-control);
  background: var(--apx-surface);
  transition:
    border-color var(--apx-duration-fast) var(--apx-ease-standard),
    background-color var(--apx-duration-fast) var(--apx-ease-standard);
}

.sf-epc-rowitem[hidden],
.sf-epc-empty[hidden] {
  display: none;
}

.sf-epc-rowitem.has-hotspot {
  cursor: pointer;
}

.sf-epc-rowitem:focus-visible {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

.sf-epc-rowitem.is-highlight {
  border-color: var(--apx-forest-300);
  background: var(--apx-forest-050);
}

.sf-epc-rowitem.is-selected,
.sf-epc-rowitem.is-focus {
  border-color: var(--apx-forest-600);
  background: var(--apx-forest-050);
  box-shadow: inset 3px 0 0 var(--apx-forest-600);
}

.sf-epc-rowitem__ref {
  display: inline-grid;
  min-height: 26px;
  place-items: center;
  padding: 0 5px;
  border-radius: var(--apx-radius-pill);
  background: var(--apx-forest-600);
  color: var(--apx-white);
  font-size: 9px;
  font-weight: 600;
}

.sf-epc-rowitem.is-published .sf-epc-rowitem__ref {
  background: var(--apx-forest-700);
}

/* 拆车件行（业务要求 5）：用琥珀色令牌区分「拆车件」与「全新件」 */
.sf-epc-rowitem.is-used {
  border-color: var(--apx-used-line);
  background: var(--apx-used-bg);
}

.sf-epc-rowitem.is-used .sf-epc-rowitem__ref {
  background: var(--apx-used-fg);
}

.sf-epc-rowitem.is-used .sf-epc-rowitem__body small {
  color: var(--apx-used-fg);
}

.sf-epc-rowitem__body {
  min-width: 0;
}

.sf-epc-rowitem__oe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.sf-epc-rowitem__oe span:first-child {
  color: var(--apx-ink);
  font-size: 11px;
  font-weight: 600;
}

.sf-epc-rowitem__oe span:last-child {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 8px;
}

.sf-epc-rowitem__body strong {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.sf-epc-rowitem__body small {
  display: block;
  margin-top: 2px;
  color: var(--apx-slate-500);
  font-size: 9px;
}

.sf-epc-rowitem__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* RFQ 来源提示：未命中新品/拆车件目录时，悬停或键盘聚焦说明可咨询拆车件。 */
.sf-epc-rfq-status {
  position: relative;
  display: inline-flex;
  outline: none;
}

.sf-epc-rfq-status::after {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  z-index: var(--apx-z-overlay);
  width: max-content;
  max-width: 180px;
  padding: 6px 9px;
  border: 1px solid var(--apx-charcoal-800);
  border-radius: var(--apx-radius-control);
  background: var(--apx-charcoal-950);
  box-shadow: var(--apx-shadow-2);
  color: var(--apx-white);
  content: attr(data-tooltip);
  font-family: var(--apx-font-sans);
  font-size: 10px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity var(--apx-duration-fast) var(--apx-ease-standard);
  visibility: hidden;
}

.sf-epc-rfq-status:hover::after,
.sf-epc-rfq-status:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
  visibility: visible;
}

.sf-epc-rfq-status:focus-visible .apx-badge {
  outline: 2px solid var(--apx-forest-600);
  outline-offset: 2px;
}

.sf-epc-schedule__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--apx-line);
  color: var(--apx-slate-500);
  font-size: 10px;
}

.sf-epc-schedule__foot > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sf-epc-schedule__foot svg {
  width: 14px;
  height: 14px;
}

/* 空状态 / 分页 */
.sf-epc-empty {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  border: 1px dashed var(--apx-line-strong);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  text-align: center;
}

.sf-epc-empty--inline {
  min-height: 160px;
  border: 0;
  background: transparent;
}

.sf-epc-empty__icon {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--apx-surface-sunken);
  color: var(--apx-slate-500);
}

.sf-epc-empty__icon svg {
  width: 24px;
  height: 24px;
}

.sf-epc-empty strong {
  font-size: 15px;
}

.sf-epc-empty p {
  max-width: 460px;
  margin: 0 0 8px;
  color: var(--apx-slate-500);
  font-size: 12px;
  line-height: 1.65;
}

.sf-epc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.sf-epc-pager__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-control);
  background: var(--apx-white);
  color: var(--apx-slate-700);
  font-size: 11px;
  text-decoration: none;
}

.sf-epc-pager__btn:hover {
  border-color: var(--apx-forest-300);
  color: var(--apx-forest-700);
}

.sf-epc-pager__btn.is-disabled {
  opacity: 0.45;
}

.sf-epc-pager__btn svg {
  width: 14px;
  height: 14px;
}

.sf-epc-pager__status {
  color: var(--apx-slate-500);
  font-family: var(--apx-font-mono);
  font-size: 10px;
}

/* 响应式 */
@media (max-width: 1199px) {
  .sf-epcflow__container {
    width: calc(100% - 48px);
  }

  .sf-epc-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
    gap: 36px;
  }

  .sf-epc-brands,
  .sf-epc-generations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-epc-diagram-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-epc-diagramview {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

@media (max-width: 991px) {
  .sf-epcflow-title {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .sf-epcflow-oe {
    width: 100%;
  }

  .sf-epc-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-epc-hero__board {
    min-height: 420px;
  }

  .sf-epc-hero__board--tutorial {
    min-height: 520px;
    aspect-ratio: auto;
  }

  .sf-epc-browser,
  .sf-epc-params,
  .sf-epc-diagrams,
  .sf-epc-diagramview {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-epc-browser__filters,
  .sf-epc-params__aside,
  .sf-epc-chapters {
    position: static;
  }

  .sf-epc-how {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-epc-how li:nth-child(4) {
    border-left: 0;
  }

  .sf-epc-how li:nth-child(n + 4) {
    border-top: 1px solid var(--apx-line);
  }

  .sf-epc-schedule {
    height: auto;
    max-height: none;
  }

  .sf-epc-figure {
    height: auto;
  }

  .sf-epc-figure__stage {
    max-height: 76vh;
  }

  .sf-epc-schedule__rows {
    max-height: 60vh;
  }
}

@media (max-width: 767px) {
  .sf-epcflow__container {
    width: calc(100% - 32px);
  }

  .sf-epcflow-head .sf-epcflow__container {
    width: calc(100% - 32px);
  }

  .sf-epcflow-body {
    padding-block: 24px 48px;
  }

  .sf-epc-hero__inner {
    padding-block: 40px 36px;
  }

  .sf-epc-hero__copy h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .sf-epc-hero__search {
    flex-wrap: wrap;
  }

  .sf-epc-hero__search input {
    flex-basis: 100%;
    order: 2;
  }

  .sf-epc-hero__search .apx-btn {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .sf-epc-brands,
  .sf-epc-generations,
  .sf-epc-diagram-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-epc-how {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-epc-how li {
    min-height: 0;
  }

  .sf-epc-how li + li {
    border-top: 1px solid var(--apx-line);
    border-left: 0;
  }

  .sf-epcrail__item {
    min-width: 104px;
  }

  .sf-epcrail__link {
    padding: 11px 10px;
  }

  .sf-epc-letter-group {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
  }

  .sf-epc-model-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .sf-epc-model-row__name {
    min-width: 0;
  }

  .sf-epc-model-row__meta {
    gap: 4px 14px;
  }

  .sf-epc-params__main {
    padding: 18px;
  }

  .sf-epc-choices {
    flex-direction: column;
    max-height: 320px;
  }

  .sf-epc-choice-group {
    width: 100%;
    max-width: none;
  }

  .sf-epc-params__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .sf-epc-params__actions .apx-btn,
  .sf-epc-params__actions .apx-btn--quiet {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }

  .sf-epc-variants-head,
  .sf-epc-diagrams-head,
  .sf-epc-diagramhead {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-epc-variant__identity {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-epc-variant__params {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-epc-figure__stage {
    padding: 50px 10px 10px;
  }

  .sf-epc-schedule__rows {
    max-height: 70vh;
  }

  .sf-epc-pager {
    flex-wrap: wrap;
  }
}

@media (max-width: 1199px) {
  .sf-epcfitfilter__body {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 14px;
  }

  .sf-epcfitfilter__controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-epcfitfilter__search {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .sf-epcfitfilter-guide {
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 10px 0 0;
    padding: 12px;
  }

  .sf-epcfitfilter-guide__badge {
    justify-self: start;
  }

  .sf-epcfitfilter-guide__steps {
    white-space: normal;
  }

  .sf-epcfitfilter {
    padding: 16px;
  }

  .sf-epcfitfilter__body {
    grid-template-columns: 1fr;
  }

  .sf-epcfitfilter__product {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    align-items: center;
  }

  .sf-epcfitfilter__product-copy strong {
    font-size: 12px;
  }

  .sf-epcfitfilter__head,
  .sf-epcfitment__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-epcfitfilter__head-oe {
    margin: 5px 0 0;
  }

  .sf-epcfitfilter__controls {
    grid-template-columns: 1fr;
  }

  .sf-epcfitfilter__search {
    grid-column: auto;
  }

  .sf-epcfitfilter__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-epcfitfilter__actions .apx-btn {
    width: 100%;
    justify-content: center;
  }

  .sf-epcfitment-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-epcfitment-metrics > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--apx-line);
  }

  .sf-epcfitment-metrics > div:nth-child(4) {
    border-top: 1px solid var(--apx-line);
  }

  .sf-epcfitment-card .sf-epc-variant__foot {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-epcfitment-card .sf-epc-variant__foot .apx-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
 * 首页 EPC traceability 三栏卡片（2026-11-03 改版）
 * --------------------------------------------------------------------------
 * 结构：左栏车辆链（1 Brand / 2 Series / 3 Model）→ 中栏图面 + 8 个系统分组
 *       → 右栏 OE 列表（Aftermarket / Dismantled / RFQ 三态）。
 * 约定：
 *   1. 只使用 APEX VI 既有令牌（forest / slate / surface / line / radius），不新增主色；
 *   2. 页签固定 8 列，与 app/config/epc_home_groups.php 的 1..8 对应；
 *   3. ≤1199px 右栏落到第二行、≤767px 单列堆叠，保证移动端不横向溢出；
 *   4. 选项仍是真实链接（无 JS 也能进 EPC 工作台），交互由 storefront.js 渐进增强。
 * ========================================================================== */

.sf-kicker--icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-kicker--icon svg {
  width: 16px;
  height: 16px;
}

.sf-epc-home {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 380px;
  overflow: hidden;
  border: 1px solid var(--apx-line);
  border-radius: var(--apx-radius-card);
  background: var(--apx-white);
  box-shadow: var(--apx-shadow-2);
}

/* ---- 左栏：车辆链 ---- */
.sf-epc-home__rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  border-right: 1px solid var(--apx-line);
  background: var(--apx-white);
}

.sf-epc-home__step {
  display: block;
  min-width: 0;
}

.sf-epc-home__step + .sf-epc-home__step {
  padding-top: 14px;
  border-top: 1px solid var(--apx-line);
}

.sf-epc-home__step-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 下拉容器：标题常显，<summary> 就是「当前值」选择框；收起时只显示选择框。 */
.sf-epc-home__picker > summary {
  list-style: none;
  cursor: pointer;
}

.sf-epc-home__picker > summary::-webkit-details-marker {
  display: none;
}

/* 片段正在异步替换：禁用点击避免重复触发，并显示居中加载动画（不再整体降透明度）。 */
.sf-epc-home {
  position: relative;
}

.sf-epc-home.is-loading {
  pointer-events: none;
}

.sf-epc-home__loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--apx-radius-card);
  background: color-mix(in srgb, var(--apx-white) 66%, transparent);
  color: var(--apx-slate-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sf-epc-home.is-loading .sf-epc-home__loading {
  display: flex;
}

.sf-epc-home__spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--apx-forest-600) 20%, transparent);
  border-top-color: var(--apx-forest-600);
  border-radius: 50%;
  animation: sf-epc-home-spin 0.8s linear infinite;
}

@keyframes sf-epc-home-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 降低动效偏好下放慢旋转，仍保留「正在加载」的可见反馈。 */
  .sf-epc-home__spinner {
    animation-duration: 2.4s;
  }
}

.sf-epc-home__num {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--apx-forest-600);
  color: var(--apx-white);
  font-family: var(--apx-font-mono);
  font-size: 11px;
  font-weight: 700;
}

.sf-epc-home__step-head strong {
  color: var(--apx-ink);
  font-size: 14px;
  font-weight: 600;
}

.sf-epc-home__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--apx-line);
  border-radius: 6px;
  background: var(--apx-white);
  color: var(--apx-ink);
  font-size: 12px;
  font-weight: 600;
}

.sf-epc-home__select.is-active {
  border-color: var(--apx-forest-600);
  background: var(--apx-forest-050);
  box-shadow: inset 0 0 0 1px var(--apx-forest-600);
}

.sf-epc-home__select svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--apx-slate-500);
}

.sf-epc-home__select-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.sf-epc-home__select-brand img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}

.sf-epc-home__select-mono {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--apx-surface-sunken);
  color: var(--apx-slate-600);
  font-size: 10px;
}

.sf-epc-home__options {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.sf-epc-home__option {
  padding: 9px 12px;
  border: 1px solid var(--apx-line);
  border-radius: 6px;
  background: var(--apx-white);
  color: var(--apx-slate-700);
  font-size: 12px;
  font-weight: 500;
}

.sf-epc-home__option:hover {
  border-color: var(--apx-forest-300);
  color: var(--apx-forest-700);
}

.sf-epc-home__option--more {
  border-style: dashed;
  color: var(--apx-slate-500);
  font-size: 11px;
}

/* 第 4 步「型号」最多 10 条：用紧凑行高 + 内部滚动，避免左侧把整张卡片撑高。 */
.sf-epc-home__options--compact {
  max-height: 340px;
  overflow-y: auto;
}

.sf-epc-home__options--compact .sf-epc-home__option {
  padding: 7px 10px;
  font-size: 11px;
}

/* 「N more in EPC workspace」放在滚动区外，始终可见。 */
.sf-epc-home__option--more-block {
  display: block;
  margin-top: 8px;
}

/* ---- 中栏：图面 + 8 分组页签 ---- */
.sf-epc-home__main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--apx-white);
}

.sf-epc-home__main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}

.sf-epc-home__main-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.sf-epc-home__main-title svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--apx-forest-600);
}

.sf-epc-home__main-title span {
  color: var(--apx-ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sf-epc-home__main-title small {
  overflow: hidden;
  color: var(--apx-slate-500);
  font-size: 10px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sf-epc-home__viewfull {
  flex: 0 0 auto;
}

.sf-epc-home__canvas {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0 20px;
}

.sf-epc-home__canvas .sf-diagram-frame {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: var(--apx-white);
}

.sf-epc-home__groups {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 16px 18px;
}

.sf-epc-home__group {
  display: flex;
  min-height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--apx-line);
  border-radius: 6px;
  background: var(--apx-white);
  color: var(--apx-slate-600);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.sf-epc-home__group b {
  font-family: var(--apx-font-mono);
  font-size: 14px;
}

.sf-epc-home__group:hover {
  border-color: var(--apx-forest-300);
  color: var(--apx-forest-700);
}

.sf-epc-home__group.is-active {
  border-color: var(--apx-forest-700);
  background: var(--apx-forest-700);
  color: var(--apx-white);
}

/* 该分组在当前车型下没有已同步图组：置灰但保留位次，避免页签数量跳动。 */
.sf-epc-home__group.is-empty {
  opacity: 0.45;
  pointer-events: none;
}

/* ---- 右栏：All diagram OEs（与商品详情页 epc-parts-panel 同一套表头与行） ---- */
.sf-epc-home__oe {
  display: flex;
  position: relative;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 16px;
  border-left: 1px solid var(--apx-line);
  background: var(--apx-white);
}

/* 表头固定在滚动区顶部，与详情页 .sf-diagram-panel__list-head 的视觉一致。 */
.sf-epc-home__oe-rows .sf-diagram-panel__list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 10px 4px;
  background: var(--apx-white);
}

/* OE 行直接复用商品详情的 .sf-diagram-line；这里只负责滚动与 380px 栏宽下的内边距。
 * 默认 430px 作为无 JS 兜底；桌面端由 storefront.js::syncHomeEpcOeList() 按中栏图面高度
 * 把列表拉伸到按钮上方（覆盖原先的大面积留白），≤1199px 保持 CSS 的 460px 限高。 */
.sf-epc-home__oe-rows {
  display: block;
  min-height: 0;
  max-height: 430px;
  overflow-y: auto;
}

.sf-epc-home__oe-rows .sf-diagram-line {
  padding: 9px 6px 9px 8px;
}

.sf-epc-home__oe-rows .sf-diagram-line > .sf-pin--small {
  margin-left: -8px;
}

/* 与图面联动：悬停/选中清单行时给出同色提示（与 EPC 工作台 is-highlight/is-selected 同口径）。 */
.sf-epc-home__oe-rows .sf-diagram-line.is-highlight {
  box-shadow: inset 0 0 0 1px var(--apx-forest-300);
}

.sf-epc-home__oe-rows .sf-diagram-line.is-selected {
  background: var(--apx-forest-050);
  box-shadow: inset 0 0 0 2px var(--apx-forest-600);
}

.sf-epc-home__oe-empty {
  padding: 18px 4px;
  color: var(--apx-slate-500);
  font-size: 12px;
  line-height: 1.6;
}

.sf-epc-home__cta {
  margin-top: auto;
  justify-content: center;
}

@media (max-width: 1439px) {
  .sf-epc-home {
    grid-template-columns: 270px minmax(0, 1fr) 330px;
  }

  .sf-epc-home__main-title span {
    font-size: 18px;
  }
}

@media (max-width: 1199px) {
  /* 右栏落到第二行，车系/世代列表与图面保持并排，避免中间图面被压扁。 */
  .sf-epc-home {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .sf-epc-home__oe {
    grid-column: 1 / -1;
    border-top: 1px solid var(--apx-line);
    border-left: 0;
  }

  /* 右栏落到第二行后空间变宽：OE 行（.sf-diagram-line）改为两列；仍保留内部滚动，避免 70+ 行把页面拉长。 */
  .sf-epc-home__oe-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    max-height: 460px;
  }

  /* 表头横跨两列并保持顶部吸附。 */
  .sf-epc-home__oe-rows > .sf-diagram-panel__list-head {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  /* 单列堆叠：车辆链 → 图面 → OE 列表；页签改为 4 列两行，避免文字挤压。 */
  .sf-epc-home {
    grid-template-columns: 1fr;
  }

  .sf-epc-home__rail {
    border-right: 0;
    border-bottom: 1px solid var(--apx-line);
  }

  .sf-epc-home__groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sf-epc-home__oe-rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sf-epc-home__main-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
 * 首页分类网格 · EPC workspace 引导卡（2026-11-03）
 *
 * 服务页面：对外首页「N major parts categories」区块的最后两格
 *          （views/storefront/home.php → `.sf-category-tile--epc`）。
 * 由来：一级分类固定 10 个，在 4 / 3 / 2 列栅格下最后一行都会空出 2 个单元格；
 *      本卡固定跨 2 列补齐，同时把「只知道位置、不知道 OE」的客户从分类浏览
 *      直接引到 EPC 工作台（按车型 → 图面 → callout 找件）。
 * 视觉：与相邻分类卡**同色系、同材质** —— 白面 + 右上角 Forest 100 极淡径向光
 *      （沿用同页 `.sf-lookup-card--epc` 的既有绿洗手法）+ Forest 200 边线，
 *      文字继续用 Ink / Slate-600 / Forest-700，四步用 Forest 050 浅底片；
 *      不使用深色结构面，避免在一整片 White 卡片中间出现明暗冲突。
 *      不新增颜色、字体、圆角或阴影令牌。
 * 断点：>1399px 4 列、1024–1399px 3 列、768–1023px 2 列都跨 2 列（正好填满整行）；
 *      ≤767px 单列时回到普通整宽卡片（跨 1 列）。
 * ========================================================================== */

.sf-category-tile--epc {
  grid-column: span 2;
  border-color: var(--apx-forest-200);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--apx-forest-100) 72%, transparent), transparent 42%),
    var(--apx-white);
  color: var(--apx-ink);
}

/* 图标框沿用分类卡既有的 Forest 050 浅底 + Forest 700 图标，只把边线换成 Forest 200 与卡片呼应。 */
.sf-category-tile--epc .sf-icon-tile {
  border-color: var(--apx-forest-200);
}

/* 站内 .sf-kicker 默认就是 Forest 700，白底上继续沿用，只补一处与标题之间的间距。 */
.sf-category-tile--epc .sf-kicker {
  margin-top: 14px;
}

/* 标题/正文沿用分类卡原有的 Ink / Slate-600；标题字号比单格分类卡略大，撑住双格宽度。 */
.sf-category-tile--epc h3 {
  margin-top: 4px;
  font-size: 21px;
}

.sf-category-tile--epc p {
  font-size: 12px;
}

/* 车辆链四步：编号口径与首页 EPC 卡片、EPC 工作台步骤条一致（01–04）；纯文本，不是链接。
   浅绿底片是卡片里唯一比白面稍深的块，只差一层明度，读起来仍是同一张白色卡片。 */
.sf-epc-entry-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.sf-epc-entry-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--apx-forest-100);
  border-radius: var(--apx-radius-control);
  background: var(--apx-forest-050);
  color: var(--apx-slate-600);
  font-family: var(--apx-font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sf-epc-entry-steps b {
  flex: 0 0 auto;
  color: var(--apx-forest-700);
  font-size: 10px;
  font-weight: 700;
}

/* 底部行动行沿用分类卡的「左文案 + 右箭头」与 Forest 700 文案，只把字号提一档，
   让「Open EPC workspace」读起来是动作而不是元数据。 */
.sf-category-tile--epc .sf-category-tile__bottom {
  font-size: 10px;
}

@media (max-width: 767px) {
  /* 单列时分类卡与引导卡都占满整行；四步改 2×2，避免 GENERATION 被截断。 */
  .sf-category-tile--epc {
    grid-column: span 1;
  }

  .sf-epc-entry-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
 * Hero 3D 悬架背景（列表页右侧装饰层，2026-11）
 *
 * 覆盖页面：categories / products / used-parts / used-parts-list 页头右侧。
 * 层级：3D 层 z-index 0（纯装饰、pointer-events:none），页头内容 z-index 1 ——
 *       永不覆盖左侧标题/描述/搜索框/CTA；窄屏与减少动效由 loader 直接不加载。
 * 视觉：右侧 mask 渐入页面背景；低对比、克制，作为背景而非产品展示。
 * ========================================================================== */
.sf-page-hero,
.sf-catalog-head,
.sf-used-hero {
  position: relative;
  isolation: isolate;
}

.sf-page-hero > .sf-container,
.sf-catalog-head > .sf-container,
.sf-used-hero > .sf-container {
  position: relative;
  z-index: 1;
}

.sf-hero-3d {
  position: absolute;
  inset-block: 0;
  right: 2%; /* 与页头内容右缘留出内缩，避免模型贴住/越过容器边界 */
  z-index: -1; /* 位于页头内容容器内、文案之下（容器自身是 z-index:1 的层叠上下文） */
  width: min(58%, 760px); /* 放大：允许向左侧文案区域延伸（文字层级仍在上，保证可读） */
  overflow: hidden;
  pointer-events: none;
  opacity: 0.15; /* 按需求：15% */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
}

.sf-hero-3d__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 页面级放大：容器带 data-scale 时按 CSS 变量等比放大（宽高同乘，宽高比不变 → 取景比例不变、
   模型恰好放大 scale 倍且不切边）。由 views/storefront/partials/hero-chassis.php 的
   $heroChassisScale 输出 --hero-scale；无此属性时维持 1×。 */
.sf-hero-3d[data-scale] {
  width: calc(min(58%, 760px) * var(--hero-scale, 1));
  inset-block: calc((1 - var(--hero-scale, 1)) * 50%);
}

/* 分类页：统计卡移入左侧文案列后与标题组保持间距（宽度贴合内容，不留灰底空条） */
.sf-page-hero__split > div > .sf-page-hero__stats {
  width: fit-content;
  margin-top: 20px;
}

/* 列表页页头右侧命中数徽标压在 3D 层之上时，加极轻白晕保证可读 */
.sf-catalog-head__count {
  position: relative;
  z-index: 2;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.9),
    0 0 4px rgba(255, 255, 255, 0.95);
}

@media (max-width: 991px) {
  .sf-hero-3d {
    display: none;
  }
}