/* ==========================================================================
   Reako Smart · 应用层样式
   site.css 是设计基准（brand-spec 的视觉契约、verify.mjs 的检查对象），
   本文件只放静态站里没有、独立站新增的组件：公告条、会员页、订单时间线、
   分页器、后台。token 一律复用 site.css 的 :root，不新增颜色。

   纪律沿用 brand-spec：
     - 结构方角（--r: 0），只有语义标签保持全圆
     - 红色只给页面级 CTA；这里的组件一律走石墨
     - 工业黄 = 此刻生效（选中态、有内容）
     - 栅格轨道必须 minmax(min(Npx,100%),1fr)，否则 360px 视口横向溢出
   ========================================================================== */

/* ---------------------------------------------------------------- 页头：西语标语的宽度补偿
   原设计的标语是中文「车用智能硬件」（6 字 ≈ 70px）。西语版即使压到
   "Audio para tu auto" 也有 ~150px，加上 0.18em 字距，在 360px 视口会把
   页头顶出横向滚动条。site.css 里没有这条规则是因为它那时不需要。
   窄屏直接隐藏标语：logo 主体仍在，品牌识别不受影响。 */
@media (max-width: 620px) {
  .logo span { display: none; }
}

/* ---------------------------------------------------------------- 公告条 */
/* 后台内容位 notice.bar 控制。走暗色机加工面，不用红色（红色预算已被顶边占用） */
.notice-bar {
  background: var(--machined);
  box-shadow: var(--machined-hi);
  color: var(--ink-fg);
  font: 550 13px/1.5 var(--font-body);
  letter-spacing: 0.02em;
  padding-block: 9px;
  border-bottom: 1px solid var(--ink-line);
}
.notice-bar .wrap { display: flex; align-items: center; gap: 10px; }
/* 前缀刻度线：与 .eyebrow 同一套语言，颜色走工业黄（暗区） */
.notice-bar .wrap::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--signal) 0 4px, transparent 4px 6px);
}

/* ---------------------------------------------------------------- 配置切换：链接版
   site.css 里 .variants 是 button（靠 JS 切换）。详情页改成 <a>：
   每档配置有自己的 URL，可分享、可被收录、没有 JS 也能换配置。
   视觉与 button 版一字不差 —— 选中态仍然压 2px 工业黄内阴影
   （brand-spec：工业黄 = 此刻生效），只是触发属性从 aria-pressed 换成 aria-current。 */
.variants a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 9px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: var(--r);
  color: var(--fg);
  text-decoration: none;
  transition: border-color .14s, color .14s, background .14s;
}
.variants a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.variants a[aria-current="page"] {
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--signal);
}

/* ---------------------------------------------------------------- 筛选器：链接版
   site.css 里的筛选项是 JS 切换的 button/checkbox。这里改成链接：
   每种筛选组合都是一个可分享、可收录、可回退的 URL，关掉 JS 也能筛。
   选中态从 aria-pressed 换成 aria-current，视觉保持一致（2px 工业黄）。 */
.fpill { text-decoration: none; }
.fpill[aria-current="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--signal);
}
/* 筛选数量：品牌红 + 满不透明，浅底侧栏与深底抽屉都清晰（原 opacity .65 太淡看不清）*/
.fpill .cap { font-size: 11px; font-weight: 600; color: var(--accent); }
.fpill[aria-current="true"] .cap { color: rgb(255 255 255 / .85); }
.fopt .cap { font-weight: 600; color: var(--accent); }

.fopt {
  text-decoration: none;
  color: var(--fg);
  justify-content: space-between;
}
.fopt[aria-current="true"] {
  background: var(--fg);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--signal);
  padding-left: 8px;
}
.fopt[aria-current="true"] .cap { color: rgb(255 255 255 / .7); }

/* 已选条件的标签行：点 × 去掉该条件 */
.active-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--signal);
  border-radius: 999px;   /* 语义标签保持全圆 —— brand-spec：方=结构，圆=标签 */
  background: var(--signal);   /* 工业黄底 = 此刻生效的筛选，辨识度高 */
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
}
.active-tag:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.active-tag svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- 分页
   数字页码 + 上一页/下一页。当前页用石墨实心，不用红色（红色预算）。 */
.pager { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; margin-top: 32px; }
.pager a, .pager span {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  color: var(--muted);
}
.pager a:hover { border-color: var(--fg); color: var(--fg); }
.pager [aria-current="page"] {
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--signal);
}
.pager .gap { border: 0; background: transparent; min-width: 20px; }

/* ---------------------------------------------------------------- 配置对照表（车型页）
   一个车型 4~8 个配置，表格比卡片网格更容易横向比较价格与内存。 */
.var-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); background: var(--surface); }
.var-table th, .var-table td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--border); font-size: 14px; }
.var-table thead th {
  border-top: 0;
  font: 550 11px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--sink);
}
.var-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.var-table td.act { text-align: right; white-space: nowrap; }
.var-table tbody tr:hover { background: var(--sink); }
/* 窄屏把表格转成卡片式行：单元格前缀用 data-label 显示表头 */
@media (max-width: 720px) {
  .var-table thead { display: none; }
  .var-table, .var-table tbody, .var-table tr, .var-table td { display: block; width: 100%; }
  .var-table tr { border-top: 1px solid var(--border); padding: 10px 0; }
  .var-table td { border: 0; padding: 4px 14px; }
  .var-table td.act { text-align: left; padding-top: 10px; }
  .var-table td[data-label]::before {
    content: attr(data-label) " ";
    font: 550 10.5px/1 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 6px;
  }
}

/* ---------------------------------------------------------------- 规格表
   两列定义列表。轨道必须写 minmax(min(Npx,100%),1fr)：
   裸 minmax(Npx,1fr) 在容器窄于 N 时不收缩，360px 会横向溢出。 */
.spec-list {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  max-width: 70ch;
}
.spec-row {
  display: grid;
  grid-template-columns: minmax(min(200px, 45%), 40%) 1fr;
  gap: 12px;
  padding: 11px 14px;
  background: var(--surface);
}
.spec-row dt { font-size: 13.5px; color: var(--muted); }
.spec-row dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
  .spec-row { grid-template-columns: 1fr; gap: 2px; }
}

/* 售完 / 已下架的状态文字。用品牌红是因为这是"买不到"的信号，
   与折扣角标的工业黄语义不同，不算破坏红色预算（不是块面，是一行小字）。 */
.warn-text { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- 会员表单卡
   窄栏居中。方角、细描边、顶部石墨压条 —— 与 .finder 同一套语言。 */
.auth-card {
  max-width: 440px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--fg);
  box-shadow: var(--lift-1);
  padding: clamp(22px, 4vw, 34px);
}
.auth-card .field { margin-bottom: 14px; }
.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.auth-links a { color: var(--muted); }
.auth-links a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- 我的账户
   左侧导航 + 右侧内容。窄屏导航转成横向滚动条。 */
.account { display: grid; grid-template-columns: minmax(min(210px, 100%), 210px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.acc-nav { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border); background: var(--border); }
.acc-nav a {
  padding: 11px 14px;
  background: var(--surface);
  font-size: 14px;
  text-decoration: none;
  color: var(--fg);
}
.acc-nav a:hover { background: var(--sink); }
.acc-nav a[aria-current="page"] {
  background: var(--fg);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--signal);
}
@media (max-width: 760px) {
  .account { grid-template-columns: 1fr; }
  .acc-nav { flex-direction: row; overflow-x: auto; }
  .acc-nav a { white-space: nowrap; }
  .acc-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--signal); }
}

/* 地址卡：地址簿与结算页共用 */
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.addr-card {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  font-size: 13.5px;
  line-height: 1.65;
}
.addr-card.is-default { border-color: var(--fg); box-shadow: inset 0 -2px 0 var(--signal); }
.addr-card .addr-label {
  font: 550 11px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.addr-card .addr-actions { display: flex; gap: 10px; margin-top: 12px; font-size: 13px; }

/* ---------------------------------------------------------------- 系统自检面板（仅本地/安装期可见） */
.diag { display: grid; gap: 2px; font: 400 13px/1.7 var(--font-mono); }
.diag-row {
  display: grid;
  grid-template-columns: minmax(min(220px, 100%), auto) 1fr;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.diag-row b { font-weight: 600; }
.diag-ok  { color: var(--ok); }
.diag-bad { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- 页头账户入口
   石墨图标+文字，不用红色（红色预算已被顶边与主 CTA 占满）。
   窄屏只留图标：文字在 360px 会把页头挤爆。 */
.head-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-height: 40px;
  border: 0;
  color: var(--fg);
  text-decoration: none;
  font: 550 13.5px/1 var(--font-body);
  letter-spacing: 0.02em;
}
.head-account:hover { color: var(--accent); }
.head-account .icon { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .head-account span { display: none; }
  .head-account { padding: 8px; }
}

/* ---------------------------------------------------------------- 购物车行
   抽屉与整页共用。下架行整体降透明度但**不隐藏** ——
   客户必须看到它还在车里、为什么不计入小计。 */
.cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.cart-line.is-dead { opacity: .62; }
.cart-thumb { border: 1px solid var(--border); background: var(--surface); }
.cart-thumb img { display: block; width: 100%; height: auto; }
.cart-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--fg);
  text-decoration: none;
}
.cart-name:hover { color: var(--accent); }
.cart-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cart-qty input {
  width: 58px;
  min-height: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 6px;
}
.cart-money {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cart-money b { font-size: 14.5px; }
.cart-money .cap { display: block; font-size: 11px; }
.cart-empty { padding: 28px 4px; text-align: center; }
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 12px;
  font-size: 14px;
}
.cart-total b { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; }

/* 购物车整页：行在左，合计在右且吸顶 */
.cart-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(300px, 100%), 320px); gap: clamp(20px, 3vw, 40px); align-items: start; }
.cart-page-sum {
  border: 1px solid var(--border);
  border-top: 3px solid var(--fg);
  background: var(--surface);
  padding: 18px;
  position: sticky;
  top: calc(var(--head-h) + 16px);
}
@media (max-width: 860px) {
  .cart-page { grid-template-columns: 1fr; }
  .cart-page-sum { position: static; }
}

/* 提示条：加购成功/失败。石墨底，不用红色（红色预算） */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 90;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  background: var(--ink);
  color: var(--ink-fg);
  font: 550 13.5px/1.45 var(--font-body);
  box-shadow: var(--lift-2), inset 0 -2px 0 var(--signal);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.cart-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cart-toast.is-error { box-shadow: var(--lift-2), inset 0 -2px 0 var(--accent-bright); }
@media (prefers-reduced-motion: reduce) {
  .cart-toast { transition: none; }
}

/* ---------------------------------------------------------------- 金额摘要行 */
.sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.sum-row b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sum-row.sum-total { border-bottom: 0; padding-top: 12px; font-size: 15px; }
.sum-row.sum-total b { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; }

/* 已存地址可点选：button 但看起来是卡片 */
button.addr-card { text-align: left; cursor: pointer; font: inherit; width: 100%; }
button.addr-card:hover { border-color: var(--fg); }

/* ---------------------------------------------------------------- 订单时间线
   左侧刻度线走工业黄 —— 与 .eyebrow 同一套语言（此刻发生的事） */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 16px 16px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -25px; top: 5px;
  width: 8px; height: 8px;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--bg);
}
.tl-when { display: block; font: 400 11.5px/1.4 var(--font-mono); color: var(--muted); }
.tl-what { display: block; font-size: 14px; font-weight: 550; margin-top: 2px; }
.tl-what .cap { display: block; font-weight: 400; margin-top: 2px; }

/* ---------------------------------------------------------------- 法务/FAQ 正文
   长文排版：限制行宽到 68ch（超过就难扫读），标题与段落的节奏跟 site.css 一致。
   mark 用于标出「(por definir)」这类还没填的主体信息 —— 必须显眼，
   一份责任主体为空的隐私声明在法律上没有意义。 */
.prose { max-width: 68ch; }
.prose h2 {
  font: 600 clamp(17px, 2.2vw, 21px)/1.25 var(--font-display);
  letter-spacing: -.01em;
  margin: 30px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font: 600 16px/1.3 var(--font-display); margin: 20px 0 8px; }
.prose p, .prose li { font-size: 15px; line-height: 1.72; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose b, .prose strong { font-weight: 650; }
.prose mark {
  background: var(--signal);
  color: var(--ink);
  padding: 1px 5px;
  font-weight: 600;
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.prose th, .prose td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; }
.prose th { background: var(--sink); font-weight: 600; }

/* ---------------------------------------------------------------- 优惠码 */
.coupon-box { margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.coupon-box label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.coupon-row { display: flex; gap: 6px; }
/* 券码全大写 + 等宽：客户是从短信或海报上抄过来的，字形要好分辨（0/O、1/l） */
.coupon-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.coupon-row .btn { flex: 0 0 auto; }
/* 折扣行用绿色（--ok），和「减价」的方向一致；红色在这套设计里是预算内的强调色 */
.sum-discount b { color: var(--ok); }

/* ---------------------------------------------------------------- 年份歧义提示
   同一车型有多条年份区间重叠时的确认入口。用工业黄（--signal）而不是红色：
   这不是错误，是「此刻需要你确认一下」—— 与全站黄=此刻生效的语义一致。
   红色在这套设计里是预算内的品牌强调色，不能拿来做提示。 */
.amb-note {
  color: oklch(0.52 0.13 96);
  text-decoration: none;
  border-bottom: 1px solid var(--signal);
  white-space: nowrap;
}
.amb-note:hover { color: var(--fg); }
.amb-legend {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--signal);
  max-width: 68ch;
}

/* ---------------------------------------------------------------- 开发者语言开关
   只在 admin/staff 或 DEV_LOCALE=1 时渲染（见 layout/front.php）。
   刻意做得低调 —— 它不是面向客户的功能，不该和页脚里真正的信息抢注意力。 */
.dev-locale { display: inline-flex; align-items: center; gap: 6px; }
.dev-locale b {
  font-weight: 550;
  opacity: .55;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dev-locale a {
  padding: 2px 7px;
  border: 1px solid var(--ink-line);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.6;
}
.dev-locale a:hover { color: var(--ink-fg); border-color: var(--ink-fg); }
/* 当前语言用工业黄压一条边 —— 与全站「此刻生效中」同一语义 */
.dev-locale a[aria-current="true"] {
  color: var(--ink-fg);
  border-color: var(--signal);
  box-shadow: inset 0 -2px 0 var(--signal);
}