/* ==========================================================================
   Reako Smart 官网 · 共享设计系统
   token 与姿态规则见 brand-spec.md（色值实测自 prodynamics.com.mx）

   视觉语言：技术图纸 / 量具。产品图落在细网格坐标场上、四角带定位角标，
   栏目标签带刻度线，暗色区块做机加工金属感，结构一律方角。
   —— 依据业务叙事（按原车面板开模、量中控开孔），不是装饰。
   ========================================================================== */

/* 自托管 Helvetica（替换原 Google Fonts 的 Barlow/Manrope/JetBrains）。
   只提供 3 个字重：light 300 / regular 400 / bold 700。中间字重由浏览器就近匹配。 */
@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/helvetica-light.ttf") format("truetype");
}
@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/helvetica-regular.otf") format("opentype");
}
@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/helvetica-bold.ttf") format("truetype");
}

:root {
  /* 核心 6 token */
  --bg: oklch(0.988 0 0);
  --surface: oklch(1 0 0);
  --fg: oklch(0.181 0 0);
  --muted: oklch(0.424 0 0);
  --border: oklch(0.917 0 0);
  --accent: oklch(0.492 0.203 28.6);

  /* 派生层 */
  --accent-bright: oklch(0.564 0.202 27.5);
  --accent-deep: oklch(0.4 0.17 28.6);
  --signal: oklch(0.876 0.164 96.3);
  --whatsapp: #25D366;   /* WhatsApp 品牌绿，悬浮聊天按钮专用 */
  --ink-0: oklch(0.142 0 0);
  --ink: oklch(0.181 0 0);
  --ink-2: oklch(0.246 0 0);
  --ink-3: oklch(0.315 0 0);
  --ink-fg: oklch(0.957 0 0);
  --ink-muted: oklch(0.665 0.002 285);
  --ink-line: rgb(255 255 255 / 0.1);
  --ok: oklch(0.58 0.13 152);
  --sink: oklch(0.966 0 0);

  /* 图纸网格：产品图坐标场与暗区测量线 */
  --graph: oklch(0.898 0 0);
  --graph-dark: rgb(255 255 255 / 0.045);

  /* 全站统一 Helvetica（自托管）；CJK 交给系统字体兜底，供后台中文界面用 */
  --font-display: "Helvetica", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Helvetica", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Helvetica", Arial, ui-monospace, "PingFang SC", "Microsoft YaHei", monospace;

  --wrap: 1288px;
  --gut: clamp(16px, 4vw, 40px);
  /* 圆角尺度（苹果风：小元素小圆角、大容器大圆角，嵌套时递减）。
     --r 保留为「默认圆角」，原来写死 var(--r) 的地方自动变圆，不用逐条改。 */
  --r: 10px;          /* 默认：按钮、输入框、药丸外的常规元素 */
  --r-sm: 7px;        /* 小控件：标签、小按钮、表格内输入 */
  --r-lg: 16px;       /* 大容器：卡片、面板、抽屉、弹窗 */
  --r-xl: 22px;       /* 特大：hero 卡、结算摘要这种整块 */
  --head-h: 68px;
  /* 苹果风缓动：进场略带减速回弹，界面「有物理感」而不生硬 */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 柔和扩散阴影：贴近苹果的「悬浮」质感 —— 大范围、低透明、多层叠加，
     而不是一条硬边。第一层收边缘，第二层给漂浮感。 */
  --lift-1: 0 1px 2px rgb(17 17 17 / 0.04), 0 4px 12px rgb(17 17 17 / 0.05);
  --lift-2: 0 2px 6px rgb(17 17 17 / 0.06), 0 18px 44px rgb(17 17 17 / 0.10);
  --lift-3: 0 4px 10px rgb(17 17 17 / 0.07), 0 30px 70px rgb(17 17 17 / 0.14);
  --lift-btn: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 0 var(--accent-deep), 0 3px 8px rgb(186 10 18 / 0.3);
  --r-pill: 999px;
  /* 暗色面：垂直微渐变 + 顶部高光 = 机加工金属，而不是平涂 */
  --machined: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 44%, var(--ink-0) 100%);
  --machined-hi: inset 0 1px 0 rgb(255 255 255 / 0.07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--signal); color: var(--fg); }
/* 仅供屏幕阅读器/SEO 的隐藏文本（视觉上不占位） */
.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;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 跳到主内容（WCAG 2.4.1）—— 每页顶部都有 sticky 导航，键盘用户需要绕过它 */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--fg);
  color: #fff;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
  transition: transform .16s;
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }

/* ---------------------------------------------------------------- 数据状态
   目录是 385KB 的同步脚本：慢网络下网格会先空一段时间，
   加载失败时更要说清楚，而不是留一片空白。                                  */

.loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px dashed var(--border);
  background: var(--surface);
}
.loading span {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.loading i {
  display: block;
  height: 8px;
  background: var(--border);
  animation: pulse 1.4s ease-in-out infinite;
}
.loading i:nth-child(2) { width: 82%; animation-delay: .12s; }
.loading i:nth-child(3) { width: 58%; animation-delay: .24s; }
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.data-error {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface);
}
.data-error > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); stroke-width: 1.8; }
.data-error h3 { font-size: 18px; margin-bottom: 6px; }
.data-error p { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 62ch; }
.data-error code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--sink); padding: 1px 5px; border: 1px solid var(--border);
}
.band-dark .loading, .band-dark .data-error { background: rgb(255 255 255 / 0.04); }
.band-dark .loading span, .band-dark .data-error p { color: var(--ink-muted); }
.band-dark .loading i { background: rgb(255 255 255 / 0.14); }

/* ---------------------------------------------------------------- 排版 */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* 上限 62px：hero 文案列约 610px，74px 时「你的车能装哪一台，」（9 字）
   要 666px，会把「台，」挤成孤行。62px 刚好落进列宽内。 */
.d1 {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h1 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -0.028em; }
.h2 { font-size: clamp(24px, 2.7vw, 34px); letter-spacing: -0.022em; }
.h3 { font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.012em; }

p { margin: 0; }
.lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; color: var(--muted); max-width: 62ch; }
.body-sm { font-size: 14px; line-height: 1.55; color: var(--muted); }
.cap { font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; color: var(--muted); }

/* 栏目标签：文字走石墨，前缀是刻度线（红色只占几像素，不占版面重量） */
.eyebrow {
  --tick-c: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 9px;
  flex: none;
  background: repeating-linear-gradient(90deg, var(--tick-c) 0 2px, transparent 2px 8px);
}
.eyebrow.on-dark { --tick-c: var(--signal); color: var(--ink-fg); }
.eyebrow.plain { --tick-c: var(--muted); color: var(--fg); }

.zh-label {
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 小字说明的可读上限。
   .cap 是 12px，铺满 1208px 的内容宽是 118 字符/行 —— 眼睛回扫会丢行。
   65ch 落在 65–75 字符的可读区间内。
   **只作用于段落**：`.cap` 也用在表格单元、汇总行、行内标注上，
   一刀切加 max-width 会打乱那些布局；而行内 span 本来就不受 max-width 影响。 */
p.cap { max-width: 65ch; }
/* 需要铺满的段落显式开闸 */
td p.cap, .site-foot p.cap, .cap-wide { max-width: none; }

/* ---------------------------------------------------------------- 结构 */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* 大节距：宽屏上限 104 → 76px。原值在 1440+ 宽屏上显得空旷，
   窄屏下限(56px)不动 —— 手机本来就不空。 */
.sec { padding-block: clamp(48px, 6vw, 76px); }
.sec-tight { padding-block: clamp(40px, 5vw, 64px); }

.band-dark {
  position: relative;      /* 容纳背景图，修掉图片“逃逸到页顶”的定位 bug */
  overflow: hidden;
  isolation: isolate;
  background-color: var(--ink);
  box-shadow: var(--machined-hi);
  color: var(--ink-fg);
}
/* 压暗遮罩只对“有背景图”的暗块生效；纯深色块(无图)保持干净、不加不对称阴影 */
.band-dark:has(.hero-bg)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, oklch(0.14 0 0 / 0.82) 0%, oklch(0.16 0 0 / 0.6) 60%, oklch(0.18 0 0 / 0.45) 100%);
}
.band-dark .lede, .band-dark .body-sm, .band-dark .cap { color: var(--ink-muted); }
.band-sink { background: var(--sink); }

.rule { height: 1px; background: var(--border); border: 0; margin: 0; }
.band-dark .rule { background: var(--ink-line); }

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.sec-head > div:first-child { max-width: 68ch; }

/* ---------------------------------------------------------------- 按钮 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--lift-btn);
  transition: background .16s, box-shadow .16s, transform .1s;
}
.btn:hover {
  background: var(--accent-bright);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 0 var(--accent-deep), 0 5px 14px rgb(186 10 18 / 0.36);
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25); }
/* 对比按钮在不足 2 项时是 disabled —— 必须看起来就点不了 */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--border);
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { background: var(--border); box-shadow: none; }
.band-dark .btn:disabled,
.cmp-bar .btn:disabled {
  background: rgb(255 255 255 / 0.12);
  color: var(--ink-muted);
  border-color: transparent;
}
.band-dark .btn:disabled:hover,
.cmp-bar .btn:disabled:hover { background: rgb(255 255 255 / 0.12); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--fg); color: #fff; box-shadow: none; }

.btn-dark {
  background: var(--fg);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), var(--lift-1);
}
.btn-dark:hover { background: var(--ink-2); }

.btn-on-dark {
  background: transparent;
  color: var(--ink-fg);
  border-color: rgb(255 255 255 / 0.34);
  box-shadow: none;
}
.btn-on-dark:hover { background: rgb(255 255 255 / 0.1); border-color: var(--ink-fg); }

.btn-sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.btn-wide { width: 100%; }
/* 详情页购买按钮：品牌黄底 + 深色字 + 药丸形（加入购物车 / COMPRAR AHORA 共用）*/
.btn-buy { background: var(--signal); color: var(--fg); box-shadow: none; border-radius: var(--r-pill); letter-spacing: 0.04em; }
.btn-buy:hover { background: oklch(0.915 0.17 96.3); box-shadow: none; }
.btn-buy:active { background: var(--signal); }
.btn-buy:disabled { background: var(--border); color: var(--muted); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  transition: gap .16s, border-color .16s;
}
.link-arrow:hover { gap: 12px; border-color: var(--fg); }
.band-dark .link-arrow { border-color: var(--ink-line); }
.band-dark .link-arrow:hover { border-color: var(--ink-fg); }

.icon { width: 16px; height: 16px; flex: none; stroke-width: 1.7; }

/* ---------------------------------------------------------------- 页头 */

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* 顶部 3px 品牌压边：全站唯一常驻的红色，品牌签名 */
.site-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
.head-in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--head-h);
  /* 结构护栏：flex 子项默认 min-width:auto，任何一项内容变长就把整行撑破。
     这里允许收缩，配合下面导航的断点，页头就不会再溢出。 */
  min-width: 0;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.logo b {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  /* 全大写必须带正字距，否则字怀会挤在一起 */
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.logo b i { font-style: normal; color: var(--accent); }
.logo span {
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 0; }
.nav a {
  display: block;
  /* 内边距与字号都比原来收一档：西语导航标签比中文长得多，
     原值下五个链接要 629px，页头在 1081–1366px 区间整体溢出。 */
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--fg);
  border-radius: var(--r);
  white-space: nowrap;
  transition: background .14s;
}
.nav a:hover { background: var(--sink); }
.nav a[aria-current="page"] {
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}

.head-cta { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg);
}
.burger:hover { color: var(--accent); }

/* 断点按**实测**定，不是拍的：页头固有宽度 1116px，
   可用内容宽 = min(视口, 1288) − 2×gut。1199px 及以下装不下，
   所以那以下走汉堡菜单（导航项在抽屉里一个不少）。
   原值 1080 是按中文文案定的 —— 西语标签长得多，
   结果 1081–1366px 整个区间页头都在溢出（1081 时溢出 248px）。 */
@media (max-width: 1199px) {
  .nav { display: none; }
  .burger { display: flex; }
}

/* CTA 的隐藏断点和导航**分开**。
   两者原来绑在一起，结果 620–1199px（平板 + 小笔记本）整段都看不到主行动按钮，
   而那里页头右侧空着 500px —— 白扔掉一个入口。
   实测这个按钮到 560px 都装得下（需要 445px，可用 515px）；
   取 620px 是因为 logo 标语本来就在这个断点收起，不再多引一个魔数。 */
@media (max-width: 620px) {
  .head-cta .btn:not(.burger) { display: none; }
}

/* 移动端抽屉 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: rgb(17 17 17 / 0.44);
}
.drawer[open] { display: block; }
.drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(340px, 88vw);
  background: var(--surface);
  padding: 18px var(--gut) 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: slide-in .22s ease-out;
}
@keyframes slide-in { from { transform: translateX(18px); opacity: .6; } }
.drawer-panel a {
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 550;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.x-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r);
  cursor: pointer; color: var(--fg);
}

/* ---------------------------------------------------------------- Hero */

.hero {
  position: relative;
  background: var(--ink);   /* 兜底：背景图由后台所选媒体（.hero-bg）渲染 */
  color: var(--ink-fg);
  overflow: hidden;
  isolation: isolate;
}
/* 背景图完整透出（原来 0.34 透明 + 压暗滤镜把它盖得几乎看不见）*/
/* 背景图：来自后台所选媒体（内容位）。压暗交给 .hero::after / .band-dark::before 遮罩，
   所以图片本身满不透明、清晰可见，同时其上文字始终可读。 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 只保留极淡的等距测量竖线（图纸语言）；去掉原来压暗背景图的深色渐变 */
/* 自动压暗遮罩：背景图上叠一层深色渐变，左侧更暗（文字区），右侧图仍可见 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, oklch(0.14 0 0 / 0.7) 0%, oklch(0.16 0 0 / 0.4) 55%, oklch(0.18 0 0 / 0.2) 100%);
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}
.hero-copy > * + * { margin-top: 20px; }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding-top: 8px;
}
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-stat span { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-muted); }

.hero-shot {
  position: relative;
  border: 1px solid var(--ink-line);
  background: var(--ink-2);
  padding: 10px;
}
.hero-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
/* 图上标签：单角定位、完整落在图内、实底 + 阴影 */
.shot-tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  max-width: calc(100% - 40px);
  background: var(--fg);
  color: #fff;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.32);
  border-left: 2px solid var(--signal);
}

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-shot { order: -1; }
}

/* ---------------------------------------------------------------- 车型适配查询 */

.finder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--fg);
  box-shadow: var(--lift-2);
  padding: clamp(20px, 2.6vw, 30px);
}
.finder.on-dark {
  background: var(--ink-2);
  background-image: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  border-color: var(--ink-line);
  border-top-color: var(--signal);
  color: var(--ink-fg);
  box-shadow: var(--machined-hi);
}
/* 三个下拉竖排，不是横排。
   横排（repeat(3, minmax(0,1fr))）在这个面板宽度下每列只有 117px，而
   选项文字最短的「Elige la marca」就要 118px，选中后是
   「Ecosport 2013–2017 — 4 config. desde $4,299」约 300px ——
   minmax(0,…) 让列缩到比内容还窄，于是文字被裁掉、连下拉箭头都没地方放。
   （列不缩就会横向溢出，那是 brand-spec 的红线，所以两头都不通。）

   竖排每个字段拿到面板的完整宽度，而且这三步本来就是依赖关系：
   先选品牌才有车型，先选车型才有配置。竖排把这个顺序也表达出来了。 */
.finder-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}
/* 按钮跨满整行 —— 它是这个面板唯一的主行动 */
.finder-row .btn { width: 100%; }
/* 查询主按钮：品牌黄底 + 深色字（覆盖默认的品牌红）*/
.finder .btn { background: var(--signal); color: var(--fg); box-shadow: none; }
.finder .btn:hover { background: oklch(0.915 0.17 96.3); box-shadow: none; }
.finder .btn:active { background: var(--signal); transform: translateY(1px); }
.finder .btn:disabled,
.finder .btn[aria-disabled="true"] { background: var(--border); color: var(--muted); box-shadow: none; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* 防机器人验证码控件（登录/注册/找回密码） */
.captcha-row { display: flex; align-items: center; gap: 10px; }
.captcha-img { width: 200px; max-width: 100%; height: 64px; display: block; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.captcha-refresh { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.captcha-refresh:hover { color: var(--fg); border-color: var(--fg); }
.field > label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.finder.on-dark .field > label { color: var(--ink-muted); }

/* number / date 原来漏在这个选择器外面 —— 它们拿不到 width:100%，
   于是在同一行里一个 265px 一个 43px，整排看起来是歪的。 */
select, textarea,
input[type="text"], input[type="tel"], input[type="email"], input[type="search"],
input[type="number"], input[type="date"], input[type="datetime-local"], input[type="password"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color .14s, box-shadow .14s;
}
textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
select:hover, input:hover, textarea:hover { border-color: var(--muted); }
select:focus, input:focus, textarea:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgb(17 17 17 / 0.08);
  outline: none;
}
select:disabled { background: var(--sink); color: var(--muted); cursor: not-allowed; }
.finder.on-dark select { background: var(--ink-3); border-color: var(--ink-line); color: var(--ink-fg); }
.finder.on-dark select:disabled { color: var(--ink-muted); background: oklch(0.28 0 0); }

.finder-out { margin-top: 18px; }
.finder-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  padding: 12px 14px;
  background: var(--sink);
  border-left: 3px solid var(--muted);
}
.finder.on-dark .finder-msg { background: var(--ink-3); border-color: var(--signal); }
.finder-msg.hit { border-color: var(--ok); }

/* ---------------------------------------------------------------- 产品卡 */

.grid {
  display: grid;
  /* min(Npx, 100%) 是必须的：容器窄于 N 时，裸 minmax(Npx,1fr) 的轨道
     不会收缩，会顶出横向溢出（360px 视口下 .grid-2 溢出 12px）。 */
  grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
/* 420px 而非 340px：1288 容器的内容宽约 1208px，340 会排出 3 列 ——
   首页「四条线」那一节就变成 3+1 的孤行。420 稳定给出 2 列。 */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;   /* 让内部图片跟着卡片圆角裁切 */
  transition: box-shadow .28s var(--ease-out), border-color .2s, transform .28s var(--ease-out);
}
.card:hover { box-shadow: var(--lift-2); border-color: transparent; transform: translateY(-3px); }

/* 产品图背景：纯白（按需求去掉细网格坐标场，改纯色底）。 */
.card-img,
.gal-main,
.line-card .shot {
  background-color: var(--surface);
}

.card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 2px solid var(--fg);
  transition: border-bottom-color .18s;
}
.card:hover .card-img { border-bottom-color: var(--accent); }
.card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.card-img .ph { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }

/* 四角定位角标（8 层背景 = 4 个 L 形裁切标记） */
.card-img::after,
.gal-main::after,
.line-card .shot::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  pointer-events: none;
  opacity: .26;
  transition: opacity .18s;
  background:
    linear-gradient(var(--fg), var(--fg)) left top / 11px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left top / 1px 11px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / 11px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / 1px 11px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 11px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 1px 11px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 11px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 1px 11px no-repeat;
}
.card:hover .card-img::after { opacity: .58; }
.gal-main { position: relative; }

.off-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--signal);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 8px;
  box-shadow: 2px 2px 0 rgb(17 17 17 / 0.16);
}

.card-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.card-make {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.14;
}
.card-years { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.01em; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  /* 不用 white-space: nowrap ——
     适配车型名可以合法地很长（"Yukon Chevrolet Tahoe Silverado" 31 字符），
     nowrap 会在 360px 上把整页撑出横向滚动，那是 brand-spec 的硬红线。
     短标签（"8+128GB"）本来就装得下，不会因为去掉 nowrap 而换行；
     overflow-wrap 只在单个词超过一行时才介入。 */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.chip-solid { background: var(--fg); border-color: var(--fg); color: #fff; }

/* 配置选择：真实变体切换，改价。选中态压一条工业黄 = 此刻生效 */
.variants { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.variants button {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 9px;
  min-height: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.variants button:hover { border-color: var(--fg); color: var(--fg); }
.variants button[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--signal);
}

/* 价格块吸底：card-body 是等高的弹性列，auto 顶边把「价格 + 按钮」推到卡片底部，
   于是同一行里标题长短不一的卡片，价格与按钮都对齐。 */
.card-price { margin-top: auto; }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.price {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.price sub { font-size: 11px; font-weight: 550; letter-spacing: 0.06em; color: var(--muted); vertical-align: baseline; }
.was { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; color: var(--muted); text-decoration: line-through; }
.msi { font-size: 12px; color: var(--muted); letter-spacing: 0.01em; }

.card-actions { display: flex; gap: 7px; }
.card-actions .btn { flex: 1; }
/* 卡内主按钮：品牌黄底 + 深色字（按需求从石墨黑改黄）*/
.card-actions .btn:not(.btn-ghost):not(.btn-on-dark) {
  background: var(--signal);
  color: var(--fg);
  box-shadow: none;
}
.card-actions .btn:not(.btn-ghost):not(.btn-on-dark):hover { background: oklch(0.915 0.17 96.3); }

.cmp-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  min-height: 30px;
}
.cmp-box input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* ---------------------------------------------------------------- 筛选 */

.shop { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 940px) { .shop { grid-template-columns: 1fr; } }

.filters { position: sticky; top: calc(var(--head-h) + 16px); display: flex; flex-direction: column; gap: 20px; }

/* 宽屏：筛选栏做成石墨面板 —— 白底页最缺的图底关系 */
@media (min-width: 941px) {
  .filters {
    background: var(--ink);
    background-image: var(--machined);
    box-shadow: var(--machined-hi);
    color: var(--ink-fg);
    padding: 20px 18px 22px;
    gap: 18px;
    /* sticky 面板必须自己封顶：矮视口（笔记本 + 浏览器工具栏）下
       否则「清空全部筛选」会被推到视口外，永远点不到 */
    max-height: calc(100vh - var(--head-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .filters .fgroup { border-top-color: var(--ink-line); }
  .filters .fgroup > h4 { color: var(--ink-muted); }
  .filters .fopt { color: var(--ink-fg); }
  .filters .fopt:hover { background: rgb(255 255 255 / 0.07); }
  .filters .fopt .cn { color: var(--ink-muted); }
  .filters .fopt .n { color: var(--ink-muted); }
  .filters input[type="search"] {
    background: var(--ink-3);
    border-color: var(--ink-line);
    color: var(--ink-fg);
  }
  .filters input[type="search"]::placeholder { color: var(--ink-muted); }
  .filters input[type="search"]:hover { border-color: rgb(255 255 255 / 0.28); }
  .filters input[type="search"]:focus {
    border-color: var(--ink-fg);
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.1);
  }
  .filters .fpill {
    background: rgb(255 255 255 / 0.06);
    border-color: var(--ink-line);
    color: var(--ink-fg);
  }
  .filters .fpill:hover { border-color: var(--ink-fg); color: var(--ink-fg); }
  .filters .fpill[aria-pressed="true"] {
    background: var(--ink-fg);
    border-color: var(--ink-fg);
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--signal);
  }
  .filters .btn-ghost { color: var(--ink-fg); border-color: rgb(255 255 255 / 0.34); }
  .filters .btn-ghost:hover { background: var(--ink-fg); color: var(--ink); border-color: var(--ink-fg); }
}

@media (max-width: 940px) {
  .filters {
    position: fixed; inset: 0; z-index: 88; background: var(--surface);
    padding: 18px var(--gut) 96px; overflow-y: auto; display: none;
  }
  .filters.open { display: flex; }
  .filters-done { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px var(--gut); background: var(--surface); border-top: 1px solid var(--border); }
}
.filters-done { display: none; }
@media (max-width: 940px) { .filters.open .filters-done { display: block; } }

.fgroup > h4 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  font-family: var(--font-body);
}
.fgroup { border-top: 1px solid var(--border); padding-top: 16px; }
.fgroup:first-of-type { border-top: 0; padding-top: 0; }
.fopts { display: flex; flex-direction: column; gap: 2px; max-height: 268px; overflow-y: auto; }
.fopt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 4px;
  min-height: 34px;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--r);
}
.fopt:hover { background: var(--sink); }
.fopt input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; cursor: pointer; }
.fopt .cn { color: var(--muted); }
.fopt .n { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

.fpills { display: flex; flex-wrap: wrap; gap: 6px; }
.fpill {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--muted);
  cursor: pointer;
}
.fpill:hover { border-color: var(--fg); color: var(--fg); }
.fpill[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--signal);
}

.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.shop-count { font-size: 14px; color: var(--muted); }
.shop-count b { font-family: var(--font-mono); color: var(--fg); font-size: 15px; }
.shop-bar .spacer { margin-left: auto; }
.shop-bar select { min-height: 40px; width: auto; min-width: 148px; font-size: 14px; }

.active-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.active-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 550;
  padding: 5px 9px;
  background: var(--sink); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
}
.active-tag:hover { border-color: var(--accent); color: var(--accent); }

.empty {
  border: 1px dashed var(--border);
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
  background: var(--surface);
}

/* ---------------------------------------------------------------- 对比抽屉 */

.cmp-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--ink);
  background-image: linear-gradient(180deg, var(--ink-2), var(--ink-0));
  color: var(--ink-fg);
  border-top: 2px solid var(--signal);
  transform: translateY(101%);
  transition: transform .24s ease-out;
}
.cmp-bar.up { transform: none; }
.cmp-in { display: flex; align-items: center; gap: 14px; padding-block: 12px; flex-wrap: wrap; }
.cmp-slots { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.cmp-slot {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-2); border: 1px solid var(--ink-line);
  padding: 6px 8px; font-size: 12.5px; max-width: 260px;
}
.cmp-slot img { width: 34px; height: 26px; object-fit: contain; background: #fff; flex: none; }
.cmp-slot b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-slot button {
  background: transparent; border: 0; color: var(--ink-muted); cursor: pointer;
  width: 24px; height: 24px; display: grid; place-items: center; flex: none;
}
.cmp-slot button:hover { color: var(--ink-fg); }

/* ---------------------------------------------------------------- 对话框 */

dialog {
  border: 1px solid var(--border);
  border-top: 3px solid var(--fg);
  border-radius: var(--r);
  padding: 0;
  max-width: min(920px, calc(100vw - 32px));
  width: 100%;
  max-height: min(88vh, 900px);
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 24px 60px rgb(17 17 17 / 0.3);
}
dialog::backdrop { background: rgb(17 17 17 / 0.58); }
.dlg-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.dlg-head > div { flex: 1; min-width: 0; }
.dlg-body { padding: 20px; overflow-y: auto; }
.dlg-foot {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--surface);
}

/* 规格表 */
.spec-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-tbl th, .spec-tbl td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.spec-tbl th {
  font-weight: 550; color: var(--muted); font-size: 12.5px;
  letter-spacing: 0.02em; width: 38%;
}
.spec-tbl td { font-family: var(--font-mono); font-size: 13px; }
.spec-tbl tr:last-child th, .spec-tbl tr:last-child td { border-bottom: 0; }

.cmp-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cmp-tbl th, .cmp-tbl td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
.cmp-tbl thead th { background: var(--sink); font-weight: 600; font-size: 13px; }
.cmp-tbl tbody th { font-weight: 550; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.cmp-tbl td { font-family: var(--font-mono); font-size: 13px; }
.tbl-scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- 特性 / 数据块 */

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.feat {
  background: var(--surface);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
}
.band-dark .feat-grid { background: var(--ink-line); border-color: var(--ink-line); }
.band-dark .feat { background: rgb(255 255 255 / 0.02); }
.feat > svg { width: 24px; height: 24px; stroke-width: 1.7; color: var(--fg); }
.band-dark .feat > svg { color: var(--signal); }
.feat h3 { font-size: 18px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1px; background: var(--border); }
/* 透明 —— 让所在暗区的垂直渐变透过来，否则平涂色块会在带子顶部露出矩形边 */
.stat { background: transparent; padding: 22px clamp(16px, 2vw, 26px); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 7px; font-size: 12.5px; letter-spacing: 0.05em; color: var(--muted); }

/* 产品线入口卡 */
.line-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.line-card:hover { box-shadow: var(--lift-2); transform: translateY(-3px); border-color: var(--muted); }
.line-card .shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 2px solid var(--fg);
  transition: border-bottom-color .2s;
}
.line-card:hover .shot { border-bottom-color: var(--accent); }
.line-card:hover .shot::after { opacity: .58; }
.line-card .shot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s; }
.line-card:hover .shot img { transform: scale(1.04); }
.line-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.line-card .n {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--muted);
}
.line-card .go {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r);
  background: var(--signal); color: var(--fg);
  font-size: 14px; font-weight: 600;
  transition: gap .2s, background .16s;
}
.line-card:hover .go { gap: 12px; background: oklch(0.915 0.17 96.3); }
.line-card .go svg { transition: transform .2s; }

/* FAQ */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700;
  letter-spacing: -0.016em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s; margin-right: 6px;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { color: var(--fg); }
.faq .ans { padding: 0 4px 20px; max-width: 76ch; }

/* 步骤：序号做成描边字，重量够但不抢正文 */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: s; }
.step { counter-increment: s; display: flex; flex-direction: column; gap: 9px; }
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--fg);
  line-height: .88;
}
.band-dark .step::before { color: var(--ink-fg); }
@supports (-webkit-text-stroke: 1px #000) {
  .step::before { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
  .band-dark .step::before { color: transparent; -webkit-text-stroke: 1.5px var(--signal); }
}

/* 产品详情版式（灯具等 SKU 少的品类） */
.detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; }
@media (max-width: 880px) { .detail { grid-template-columns: 1fr; } }
.gal-main { border: 1px solid var(--border); aspect-ratio: 4 / 3; }
.gal-main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gal-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.gal-thumbs button {
  width: 68px; aspect-ratio: 1; padding: 0;
  border: 1px solid var(--border); background: var(--sink); cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.gal-thumbs button[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 -2px 0 var(--signal); }
.gal-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.detail-buy {
  border: 1px solid var(--border);
  border-top: 3px solid var(--fg);
  background: var(--surface);
  padding: clamp(18px, 2.2vw, 26px);
  display: flex; flex-direction: column; gap: 14px;
}

.bullets { display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; list-style: none; }
.bullets li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.bullets li > svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--ok); stroke-width: 2; }

/* 提示条 */
.note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; background: var(--sink); border-left: 3px solid var(--fg);
  font-size: 14px; line-height: 1.55;
}
.note.warn { border-color: var(--signal); }
.band-dark .note { background: rgb(255 255 255 / 0.04); border-color: var(--signal); }
.note > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* 表单 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.err { font-size: 12.5px; color: var(--accent); font-weight: 550; min-height: 17px; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--accent); }
.form-ok {
  display: none; gap: 11px; align-items: flex-start;
  padding: 16px; border: 1px solid var(--ok); border-left-width: 3px;
  background: oklch(0.58 0.13 152 / 0.07); font-size: 14.5px;
}
.form-ok.show { display: flex; }

/* 页脚 */
.site-foot {
  background: var(--ink-3);
  box-shadow: var(--machined-hi);
  color: var(--ink-fg);
  padding-block: clamp(40px, 5vw, 64px) 28px;
}
/* 页脚邮件订阅栏 */
.foot-subscribe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 32px;
  padding-bottom: clamp(26px, 3.2vw, 38px);
  margin-bottom: clamp(26px, 3.2vw, 38px);
  border-bottom: 1px solid var(--ink-line);
}
.foot-sub-left { display: flex; align-items: center; gap: 16px; }
.foot-sub-badge {
  flex: none; width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9);
}
.foot-sub-badge svg { width: 24px; height: 24px; }
.foot-sub-head { font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.15; color: var(--ink-fg); }
.foot-sub-form { display: flex; flex-direction: column; gap: 8px; min-width: min(340px, 100%); }
.foot-sub-row {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: var(--r-pill); padding: 5px 5px 5px 18px;
}
.foot-sub-row input[type="email"] {
  flex: 1; min-width: 0; min-height: 40px; padding: 0;
  border: 0; background: transparent; color: var(--fg); font-size: 15px;
}
.foot-sub-row input[type="email"]:focus { outline: none; box-shadow: none; }
.foot-sub-row .btn { min-height: 40px; border-radius: var(--r-pill); white-space: nowrap; background: var(--signal); color: var(--fg); box-shadow: none; letter-spacing: 0.06em; }
.foot-sub-row .btn:hover { background: oklch(0.915 0.17 96.3); }
.foot-sub-consent { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-muted); }
.foot-sub-consent a { color: var(--ink-fg); text-underline-offset: 2px; }
.foot-sub-ok { color: var(--signal); font-weight: 600; font-size: 15px; }
@media (max-width: 620px) { .foot-sub-form { width: 100%; } }

/* WhatsApp 悬浮聊天按钮 —— fixed，随滚动常驻右下角，全站可见 */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wa-bubble {
  position: relative; white-space: nowrap;
  background: var(--surface); color: var(--fg); font-weight: 600; font-size: 14px;
  padding: 8px 13px; border-radius: 14px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
}
.wa-bubble::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--surface); }
.wa-btn { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--whatsapp); color: var(--surface); display: grid; place-items: center; box-shadow: 0 6px 20px rgb(0 0 0 / 0.28); transition: transform .15s; }
.wa-float:hover .wa-btn { transform: scale(1.06); }
@media (max-width: 600px) { .wa-float { right: 14px; bottom: 14px; } .wa-bubble { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-float:hover .wa-btn { transform: none; } }

.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid a { font-size: 14px; text-decoration: none; color: var(--ink-fg); opacity: .84; }
.foot-grid a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot-bot {
  margin-top: clamp(28px, 3.4vw, 44px); padding-top: 20px;
  border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-muted);
}

/* 面包屑 */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); padding-top: 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { opacity: .5; }

/* 首屏标题区：下内边距收紧（原 40px → 24px）。
   宽屏上 hero 右侧本就留白，若下方再留一大段竖直空白，整屏显得空。
   上内边距不动（离顶部 sticky 导航要有呼吸）。 */
.page-head { padding-block: clamp(28px, 4vw, 52px) clamp(16px, 2vw, 24px); }
/* 首屏紧跟的那一节，上内边距也收一档 —— 两处叠加才是那 104px 空白的来源 */
.page-head + .sec-tight { padding-top: clamp(28px, 3.5vw, 44px); }

/* ---------------------------------------------------------------- 触摸目标下限
   只在粗指针设备生效（手机/平板），桌面完全不受影响 —— 主题不动。
   量出来的问题：品牌筛选 chip 只有 27px 高，而它是手机上主要的浏览入口；
   卡片按钮 38px；页脚链接 19px。Apple HIG 与 Material 的下限都是 44px/48dp。
   chip 用「加高 + 加间距」而不是用伪元素扩大热区：热区扩到 44px 会和上下行
   重叠（行距只有 32px），重叠的热区比小热区更容易点错。 */
@media (pointer: coarse) {
  .chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 13px;
    font-size: 12px;
  }
  .chips { gap: 8px; }

  .btn-sm { min-height: 44px; }

  /* 箭头链接与面包屑：靠上下内边距把热区撑起来，视觉位置不变 */
  .link-arrow { min-height: 44px; }
  .crumbs { gap: 4px 10px; }
  .crumbs a { display: inline-block; padding-block: 11px; }
  .crumbs { padding-top: 9px; }

  /* 页脚：列表项之间本来 9px，撑到 44px 会让页脚很长 ——
     取 40px 并把间距收到 2px，总高度基本不变但每一项都点得中 */
  .foot-grid ul { gap: 2px; }
  .foot-grid a { display: inline-flex; align-items: center; min-height: 40px; }

  /* 页头账户入口原来 36px 宽 */
  .head-account { min-width: 44px; min-height: 44px; justify-content: center; }

  /* 卡片标题链接原来只有 25px 高。下面虽然有 44px 的按钮通向同一页，
     但用户本能是点标题。用「内边距撑热区 + 等量负外边距抵消」——
     热区变成 44px，而视觉位置和行距一点不变。 */
  .card-title a {
    display: block;
    padding-block: 10px;
    margin-block: -10px;
  }
}

/* ---------------------------------------------------------------- 购物车 */

/* 页头购物车按钮：方形幽灵按钮 + 工业黄角标（黄 = 此刻生效，与折扣标同一语义） */
.cart-btn {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  flex: none;
  transition: color .14s;
}
.cart-btn:hover { color: var(--accent); }
.cart-btn > svg { width: 20px; height: 20px; stroke-width: 1.7; }
.cart-count {
  position: absolute;
  top: -5px; right: -5px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.cart-count.bump { animation: bump .28s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }

/* 抽屉 */
.cart-drawer { position: fixed; inset: 0; z-index: 95; display: none; background: rgb(17 17 17 / 0.48); }
.cart-drawer[open] { display: block; }
.cart-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(440px, 94vw);
  background: var(--surface);
  border-left: 3px solid var(--fg);
  display: flex;
  flex-direction: column;
  animation: slide-in .22s ease-out;
}
.cart-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px var(--gut);
  border-bottom: 2px solid var(--fg);
  flex: none;
}
.cart-head h2 { font-size: 20px; margin-right: auto; }
.cart-body { flex: 1; overflow-y: auto; padding: 4px var(--gut); overscroll-behavior: contain; }
.cart-foot {
  flex: none;
  padding: 16px var(--gut) 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
}

/* 行项目 */
.cart-line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.cart-line:last-child { border-bottom: 0; }
.cart-thumb {
  width: 56px; height: 44px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cart-line-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cart-line-main b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cart-line-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cart-line-price b { font-size: 15px; }
.cart-line-gone .cart-line-main b { color: var(--accent); }

/* 数量步进器 */
.cart-qty { display: inline-flex; align-items: center; margin-top: 3px; }
.cart-qty button {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--fg);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.cart-qty button:hover { border-color: var(--fg); background: var(--sink); }
.cart-qty input {
  width: 44px; min-height: 32px; height: 32px;
  margin-inline: -1px;
  padding: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: 0;
}
.cart-rm {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r);
  color: var(--muted); cursor: pointer;
}
.cart-rm:hover { color: var(--accent); background: var(--sink); }
.cart-rm svg { width: 15px; height: 15px; }

/* 合计 */
.cart-sum { display: flex; flex-direction: column; gap: 7px; padding-bottom: 4px; }
.cart-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; }
.cart-sum-row > b { font-size: 17px; }
.cart-sum-row.cap { font-size: 12px; color: var(--muted); }

.cart-empty { text-align: center; padding: 48px 8px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cart-empty > svg { width: 40px; height: 40px; color: var(--muted); }
.cart-empty .body-sm { max-width: 30ch; }

/* 加购按钮的确认态 */
.btn.is-added { background: var(--ok); box-shadow: none; pointer-events: none; }
.btn.is-added:hover { background: var(--ok); }

/* ---------------------------------------------------------------- 结算 */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(24px, 3vw, 44px); align-items: start; }

.order-box {
  position: sticky;
  top: calc(var(--head-h) + 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--fg);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
/* 窄屏把订单明细提到表单前面 —— 让人先看清买了什么，再填一堆收货字段 */
@media (max-width: 940px) {
  .checkout { display: flex; flex-direction: column; }
  .order-box { position: static; order: -1; }
}
.order-lines { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.order-line {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
  align-items: start; font-size: 13.5px;
}
.order-line:last-child { border-bottom: 0; }
.order-line .cart-thumb { width: 44px; height: 34px; }
.order-line b { font-weight: 600; line-height: 1.35; }
.order-line .mono { font-size: 12px; color: var(--muted); }

.pay-opts { display: flex; flex-direction: column; gap: 10px; }
.pay-opt {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.pay-opt:hover { border-color: var(--muted); }
.pay-opt:has(input:checked) { border-color: var(--fg); box-shadow: inset 0 -2px 0 var(--signal); }
.pay-opt input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.pay-opt b { display: block; font-size: 14.5px; font-weight: 600; }
.pay-opt .cap { margin-top: 3px; }

/* 下单成功 */
.order-done { display: none; }
.order-done.show { display: block; }
.order-no {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.order-slip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg);
  padding: 14px 16px;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
}
.buy-links { display: flex; flex-direction: column; gap: 8px; }
.buy-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  font-size: 14px;
}
.buy-link:hover { border-color: var(--fg); }
.buy-link .mono { margin-left: auto; font-size: 12px; color: var(--muted); }

/* 工具 */
.stack-sm > * + * { margin-top: 10px; }
.stack > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 30px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- 骨架屏
   加载时用占位块代替转圈。研究说超过 3 秒流失一半客户，骨架屏让「等待」
   看起来像「马上就好」而不是「卡住了」—— 占位块的形状预示了内容的形状。 */
.skel { display: grid; gap: 8px; }
.skel-bar {
  height: 44px;
  border-radius: var(--r);
  background: linear-gradient(100deg,
    var(--sink) 30%, color-mix(in oklch, var(--sink) 60%, var(--surface)) 50%, var(--sink) 70%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s ease-in-out infinite;
}
.skel-bar.sm { height: 20px; width: 60%; }
.skel-bar.lg { height: 60px; }
@keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  /* 前庭敏感的人：不闪，用静态占位块（仍然预示形状，只是不动） */
  .skel-bar { animation: none; opacity: .7; }
}