/* ============================================================
   设计地基(2026-08-17 第一块)
   ------------------------------------------------------------
   在这之前本文件 391 行、**一个变量都没有**,颜色和字号全是散落的字面值,
   改一处要满文件找。这一层把「值」和「用途」分开。

   用法规矩(后面加样式请照办):
   · **共用的颜色一律走 token**(正文 / 次要 / 线 / 主行动 / 正面 / 警示)。
   · 只在一个地方出现的一次性配色(运输状态那三档、登录门、聊天软件的品牌色)
     **保留字面值** —— 把它们也变成 token 只会让 token 表变成一本流水账。
   · 圆角和间距的 token 已经定好,但**现有规则里的旧数值这一块不动** ——
     卡片和筛选栏在第二、三块整体重写时再统一取用,免得这一块的改动
     散到全站每一个角落、验收范围失控。
   ============================================================ */
:root {
  /* 版心。同行(BE FORWARD / SBT / TCV / Autowini)全部居中留白,
     我们原来是内容顶到浏览器最左边 12px。 */
  --page: 1180px;
  --gut:  16px;
  /* 左右内边距 = 「至少留 --gut,宽屏时把多出来的一半推到两边」。
     这么写就不用在 base.html 里包一层 div —— 顶栏、正文、页脚共用一条规则。 */
  --pad-x: max(var(--gut), calc((100% - var(--page)) / 2));

  /* ---- 颜色:按职责命名,不按色相命名 ---- */
  --ink:      #14181d;   /* 正文 */
  --ink-2:    #5b6470;   /* 次要文字 */
  --ink-3:    #8b939d;   /* 标签、弱提示 */
  --line:     #e3e6ea;   /* 分隔线、描边 */
  --line-2:   #f0f2f4;   /* 更浅的内部分隔 */
  --surface:  #ffffff;   /* 卡片底 */
  --canvas:   #f6f7f9;   /* 页面底(第二块给列表页用上) */
  --brand:    #0a7d33;   /* 主行动:询价 */
  --brand-d:  #08652a;   /* 主行动按下 */
  --accent:   #2f699b;   /* 导航、流程、跟踪:指路用的蓝,不抢询价的绿 */
  --ok-fg:    #1e6b40;   /* 正面事实:无事故 / 已检测 */
  --ok-bg:    #eef6f0;
  --ok-line:  #cfe3d6;
  --warn-fg:  #b26a00;   /* 价格隐藏时的替代文字 */
  --alert-fg: #b3261e;   /* 事故 / 泡水 / 删除 */
  --alert-bg: #fdecea;
  --alert-ln: #f5c6c2;

  /* ---- 字号阶梯 ----
     原来车名 15px、价格 18px,几乎一样大,人扫不出主次;
     同行的价格是车名的 1.4~1.6 倍。 */
  --t-h1:    28px;
  --t-h2:    19px;
  --t-title: 17px;
  --t-body:  15px;
  --t-spec:  13px;
  --t-lab:   11px;
  --t-price: 23px;

  /* ---- 圆角与间距(定好待用,见上面的规矩) ---- */
  --r-card: 10px;
  --r-btn:   6px;
  --r-chip: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
}

/* 移动端优先(Owner 明确要求):默认单列,宽屏再铺开 */
* { box-sizing: border-box; }
body { margin: 0; font: var(--t-body)/1.5 system-ui, sans-serif; color: var(--ink);
       background: var(--surface); }
main { padding: var(--s3) var(--pad-x); }
a { color: inherit; text-decoration: none; }

/* h1 原来吃浏览器默认值(2em = 30px)。定进阶梯里,顺便收一点字距。 */
h1 { font-size: var(--t-h1); line-height: 1.25; letter-spacing: -.2px;
     margin: .55em 0 .35em; text-wrap: balance; }

.top { display: flex; justify-content: space-between; align-items: center;
       padding: 10px var(--pad-x); border-bottom: 1px solid var(--line); }
.logo { font-weight: 700; }
.langs a, .langs strong { margin-left: 8px; font-size: 13px; }
.langs strong { text-decoration: underline; }

/* ============================================================
   筛选栏(2026-08-17 改版第三块)
   ------------------------------------------------------------
   常驻 5 项 + 「更多条件」展开 12 项 + 4 个是非题 + 已选条件芯片。
   整块是一个普通 GET 表单 —— 状态天然进网址,没有 JS 也能用。
   ============================================================ */
.filters { background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--r-card); padding: 13px 15px 11px; margin: 14px 0 0; }
.frow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters label { display: flex; flex-direction: column; gap: 4px;
                 min-width: 0; flex: 1 1 150px; }
.filters label > span { font-size: var(--t-lab); color: var(--ink-3); letter-spacing: .3px; }
.filters select, .filters input[type=search] {
  width: 100%; padding: 8px 10px; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--surface); }
/* 「显示 N 台」是主动作 —— 实心绿,跟询价同一个绿 */
.filters button[type=submit] { flex: 0 0 auto; padding: 9px 20px; border: 0;
  border-radius: var(--r-btn); background: var(--brand); color: #fff;
  font-size: 14.5px; font-weight: 600; cursor: pointer; }
.filters button[type=submit]:hover { background: var(--brand-d); }
/* 搜索是主动作 —— 手机上独占一行、撑满宽度,别跟一堆下拉挤在一起 */
.filters .q { flex: 1 1 100%; }
@media (min-width: 720px) { .filters .q { flex: 1 1 240px; } }

/* 更多条件。用 <details> 而不是 JS:没有脚本也能展开 */
.fadv { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.fadv > summary { font-size: var(--t-spec); font-weight: 600; color: var(--brand);
                  cursor: pointer; padding: 4px 0; list-style: none; }
.fadv > summary::-webkit-details-marker { display: none; }
.fadv > summary::after { content: " ▾"; }
.fadv[open] > summary::after { content: " ▴"; }
.fadv[open] > summary { margin-bottom: 10px; }

.fchk { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
        margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.fchk label { flex-direction: row; align-items: center; gap: 6px;
              flex: 0 0 auto; font-size: var(--t-spec); color: var(--ink-2); }

/* 已选条件:每个可**单独摘掉**。原来只有一个「重置」,改一个条件得全清重来。 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 11px 0 0; }
.chips .lab { font-size: 12.5px; color: var(--ink-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
        border: 1px solid var(--line); border-radius: var(--r-chip);
        background: var(--line-2); font-size: var(--t-spec); }
.chip i { font-style: normal; color: var(--ink-3); }
.chip:hover { border-color: var(--alert-ln); }
.chip:hover i { color: var(--alert-fg); }
.chip.clear { background: none; border-style: dashed; color: var(--ink-2); }

/* 手机上每个下拉至少占半行,免得挤成一条缝 */
@media (max-width: 560px) {
  .filters label { flex: 1 1 calc(50% - 5px); }
  /* ⚠️ 这一条必须写在上面那条后面 —— 否则搜索框会被"每个占半行"覆盖掉,
     在手机上挤成跟下拉一样窄(2026-08-05 手机上实测到) */
  .filters .q { flex: 1 1 100%; }
  .filters button[type=submit] { flex: 1 1 100%; }
  .fchk label { flex: 1 1 100%; }
}

/* ============================================================
   车源卡片(2026-08-17 改版第二块)
   ------------------------------------------------------------
   最大的改动:**默认从四列网格改成横条**。
   去数过四家同行(BE FORWARD / SBT / TCV / Autowini)—— 它们的默认视图
   **全是横条**,不是网格。原因很实际:横条一行放得下 12~18 个字段,网格放不下。
   网格保留,做成可切换(状态进网址)。

   字段从 6 个变 17 个,多出来的每一项**都已经在公开出口里**,
   不用建表、不用改视图、不用录新数据。
   ============================================================ */
.tools { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
         margin: 14px 0 12px; font-size: var(--t-spec); color: var(--ink-2); }
.tools .found b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tools .tsel { display: inline-flex; align-items: center; gap: 6px; }
.tools select { padding: 6px 9px; font-size: var(--t-spec); color: var(--ink);
                border: 1px solid var(--line); border-radius: var(--r-btn);
                background: var(--surface); }
.viewsw { margin-left: auto; display: flex; border: 1px solid var(--line);
          border-radius: var(--r-btn); overflow: hidden; }
.viewsw button { border: 0; background: var(--surface); color: var(--ink-3);
                 padding: 7px 13px; font-size: var(--t-spec); cursor: pointer; }
.viewsw button.on { background: var(--ink); color: #fff; }

.cars { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cars.rows { grid-template-columns: 1fr; }
.cars.grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .cars.grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cars.grid { grid-template-columns: repeat(4, 1fr); } }

.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-card); overflow: hidden;
        display: flex; flex-direction: column; }
.card:hover { border-color: #c9d0d8; }
/* 宽屏上的横条:图 | 信息 | 价格与按钮 */
@media (min-width: 900px) {
  .cars.rows .card { display: grid; grid-template-columns: 264px 1fr 220px; }
}

/* ---- 图片格 ----
   🔴 图片**绝对定位铺满格子**,不让它自己的长宽比参与算高度。
      不这么写的话,同一排里竖拍的照片会把整行撑高一截,卡片参差不齐
      (2026-08-17 做视觉稿时实测到:亚洲龙那行比凯美瑞高了 130px)。 */
.card .ph { position: relative; display: block; background: #eceff2; min-height: 186px; }
.card .ph img { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: cover; display: block; }
.card .noimg { position: absolute; inset: 0; display: flex; align-items: center;
               justify-content: center; color: var(--ink-3); font-size: var(--t-spec); }
.card .pn { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px;
            border-radius: var(--r-chip); background: rgba(10,14,18,.72); color: #fff;
            font-size: 12px; font-variant-numeric: tabular-nums; }
.card .rib { position: absolute; left: 0; top: 12px; padding: 4px 10px 4px 9px;
             border-radius: 0 4px 4px 0; background: var(--ok-fg); color: #fff;
             font-size: 11.5px; font-weight: 600; }
/* 网格视图里图片按 4:3 定高(横条视图里高度由中间那栏决定) */
.cars.grid .card .ph { aspect-ratio: 4 / 3; min-height: 0; }
@media (max-width: 899px) { .card .ph { aspect-ratio: 4 / 3; min-height: 0; } }

/* ---- 中间那栏 ---- */
/* 🔴 `flex:1` 让中间这一栏**撑开剩余空间**,把价格和按钮那一栏顶到卡片底边。
   不加的话:标签多一个的车(比如多一条「检测报告」)中间栏更高,
   它的按钮就比同排别的车低一截 —— 2026-08-17 网格视图里实测四张卡的按钮
   落在 996 / 958 / 978 / 958 四个高度上。这跟 2026-08-16 Owner 在首页
   一眼看出来的是同一个毛病,换了个地方又长出来一次。
   ⚠️ 宽屏横条视图里卡片是 grid 不是 flex,这条自然不生效,那边靠列宽对齐。 */
.card .mid { padding: 13px 14px; display: flex; flex-direction: column;
             gap: 8px; min-width: 0; flex: 1; }
.card h2 { font-size: var(--t-title); font-weight: 700; line-height: 1.3; margin: 0; }
.card .sub { margin: -3px 0 0; font-size: var(--t-spec); color: var(--ink-2);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 六格微型规格表(标签在上、值在下,一眼扫完)。窄屏三格两行。 */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr);
         border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
@media (min-width: 900px) { .cars.rows .sgrid { grid-template-columns: repeat(6, 1fr); } }
.sgrid > div { padding: 6px 9px; border-right: 1px solid var(--line-2); min-width: 0; }
.sgrid > div:nth-child(3n) { border-right: 0; }
.sgrid > div:nth-child(-n+3) { border-bottom: 1px solid var(--line-2); }
@media (min-width: 900px) {
  .cars.rows .sgrid > div:nth-child(3n) { border-right: 1px solid var(--line-2); }
  .cars.rows .sgrid > div:nth-child(-n+3) { border-bottom: 0; }
  .cars.rows .sgrid > div:last-child { border-right: 0; }
}
.sgrid u { display: block; text-decoration: none; font-size: var(--t-lab);
           color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgrid b { display: block; font-size: var(--t-spec); font-weight: 600;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
           font-variant-numeric: tabular-nums; }
.card .meta { margin: 0; font-size: var(--t-spec); color: var(--ink-2); }

/* ---- 标签行 ----
   🔴 「无事故」「无泡水/无火烧」是**正面陈述**:原来只在有问题时印红标,
      没问题的什么都不印,等于白丢一个卖点。 */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tag { display: inline-block; padding: 3px 9px; border-radius: var(--r-chip);
       font-size: 12px; border: 1px solid var(--line); color: var(--ink-2);
       background: var(--surface); }
.tag.ok { background: var(--ok-bg); border-color: var(--ok-line);
          color: var(--ok-fg); font-weight: 600; }
.tag.bad { background: var(--alert-bg); border-color: var(--alert-ln);
           color: var(--alert-fg); font-weight: 600; }
/* 已经在目的国的现车 —— 对中亚客户是最强的那个卖点(不用等海运/陆运两三周) */
.tag.stock { background: #e3eefb; border-color: #c2d8f0; color: #1f5fa8;
             font-weight: 600; }

/* ---- 价格与按钮那一栏 ---- */
.card .buy { padding: 13px 14px; display: flex; flex-direction: column; gap: 2px;
             border-top: 1px solid var(--line-2); }
@media (min-width: 900px) {
  .cars.rows .card .buy { border-top: 0; border-left: 1px solid var(--line-2); }
}
.plab { font-size: var(--t-lab); color: var(--ink-3); }
.pmain { font-size: var(--t-price); font-weight: 700; letter-spacing: -.3px;
         line-height: 1.15; font-variant-numeric: tabular-nums; }
.pmain.ask { font-size: var(--t-title); color: var(--warn-fg); }
.pland { margin-top: 5px; font-size: var(--t-spec); color: var(--ink-2); }
.pland b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.card .sku { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); text-align: center; }

.pager { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pager a, .pager strong, .pager-step, .pager-gap {
  padding: 4px 8px; border: 1px solid var(--line);
}
.pager-gap { border-color: transparent; }
.pager .disabled { color: var(--ink-3); background: var(--surface-2); }

/* 轮播:横向吸附,手机上原生滑动 */
.carousel { position: relative; }
.frames { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
          scrollbar-width: none; }
.frames::-webkit-scrollbar { display: none; }
.frame { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
/* ⚠️ 每一格固定 4:3,图片填满并裁掉多余部分。
      不这么做的话:采购员的照片横竖混着(2400x1800 和 1800x2400 都有),
      轮播容器会被**最高的那张竖拍照片撑到 576px**,
      而正在看的横拍照片只有 287px 高 —— 底下白掉一大块,
      而且左右滑一张高度就跳一次(2026-08-05 手机尺寸下实测到)。
      车源网站通行做法就是固定比例 + 裁切:车在画面中间,裁掉的是天和地。 */
.frame { aspect-ratio: 4 / 3; overflow: hidden; background: var(--line-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav { position: absolute; top: 50%; transform: translateY(-50%);
       border: 0; background: rgba(0,0,0,.45); color: #fff;
       font-size: 26px; width: 36px; height: 52px; cursor: pointer; }
.nav.prev { left: 0; } .nav.next { right: 0; }
.thumbs { display: flex; gap: 4px; overflow-x: auto; margin-top: 6px; }
.thumb { flex: 0 0 auto; border: 2px solid transparent; padding: 0;
         background: none; cursor: pointer; }
.thumb.on { border-color: var(--ink); }

/* ============================================================
   详情页首屏两栏(2026-08-17 改版第四块)
   ------------------------------------------------------------
   改之前:主图整屏铺满,一屏只看得见一张图,价格和 17 行规格全在屏幕外,
   询价按钮要滚很久才够得着。
   改之后:左图右信息,右侧那块 sticky —— 翻图时价格和询价按钮一直在屏幕上。
   ⚠️ 手机上退回上下排:图在上、信息卡在下(sticky 在窄屏上没有意义)。
   ============================================================ */
.dt { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 4px 0 20px; }
@media (min-width: 960px) { .dt { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } }
/* 左栏 = 图库 + 完整规格表 + 配置三层。
   ⚠️ 这三块放一起是**有意的**:右边那张信息卡靠 sticky 黏住,而 sticky 只能在
      它的容器里黏 —— 容器只包图库的话,图库只比信息卡高一点点,
      2026-08-17 实测只能黏 135 像素,等于没做成。
      把规格和配置也收进来,客户看完这两块之前价格和询价按钮一直在屏幕上。
   ⚠️ 再往下(外观检测图、车况、相似车源)是整幅宽的块,不进这一栏。
   ⚠️ 2026-08-19:运费估算**已经搬进这一栏**(在价格正下方)——
      客户要的就是价格,原来它在整页最底下,要滚过 17 行规格和整块配置才够得着。 */
.dt-left { min-width: 0; }
.dt-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* 🔴 `align-self: start` 不能省 —— grid 的项默认被拉满整行高度,
   一个跟容器一样高的东西**没有可以黏的空间**,sticky 等于没写
   (2026-08-17 实测:滚动时信息卡直接跟着划走了)。 */
@media (min-width: 960px) { .dt-side { position: sticky; top: 14px; align-self: start; } }

/* ---- 手机上把信息卡插到图库和规格表中间(2026-08-19)----
   改之前:手机是单栏,左栏(图库 + 17 行规格 + 三层配置)整块排在信息卡前面 ——
   实测整页 2399 像素高,而价格、运费估算、询价按钮在 1343 处。
   客户要看的价格,得先滚过两屏参数(中亚客户主要用手机)。
   改之后的顺序:图库 → 信息卡(价格 / 运费估算 / 询价)→ 完整规格表 → 配置。
   🔴 用 `display: contents` 把左栏那层壳在手机上「化掉」,让它的三块直接进网格排序 ——
      这样不用动 HTML 结构,电脑上那套两栏 + sticky 一个字都不用改。
   ⚠️ `.dt-left .carousel` 这类后代选择器照样命中(元素还在原来的父节点里)。 */
@media (max-width: 959px) {
  .dt-left { display: contents; }
  .dt-left > .shot-tabs, .dt-left > .carousel { order: 1; }
  .dt-side { order: 2; }
  .dt-left > .specs, .dt-left > .hl { order: 3; }
}

/* ---- 手机上常驻底部的询价条 ----
   ⚠️ 它是 fixed 的,会盖住页面最后那点内容 —— 所以 body 要留出等高的下边距,
      否则页脚永远被压着一截。
   ⚠️ iPhone 底部有一条手势区,`env(safe-area-inset-bottom)` 不加的话按钮会被它盖住。 */
.mcta { display: none; }
@media (max-width: 959px) {
  .mcta {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 8px var(--pad-x) calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
  }
  .mcta .mcta-price { flex: 0 0 auto; font-size: var(--t-lab); color: var(--ink-3);
                      line-height: 1.2; max-width: 40%; }
  .mcta .mcta-price b { display: block; font-size: 17px; color: var(--ink);
                        font-weight: 700; font-variant-numeric: tabular-nums; }
  .mcta .cta.two { margin: 0; flex: 1 1 auto; }
  .mcta .cta.two a { padding: 11px 6px; font-size: 14px; }
  /* 卡里那两个按钮在手机上收起来 —— 底条已经常驻,同一个按钮出现两次是噪音 */
  .scard > .cta.two { display: none; }
  body.has-mcta { padding-bottom: 72px; }
}

.scard { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-card); padding: 16px 18px;
         display: flex; flex-direction: column; }
.scard h1 { font-size: 21px; line-height: 1.25; margin: 0 0 2px; }
.scard .sub { margin: 0 0 10px; font-size: var(--t-spec); color: var(--ink-2); }
.scard .plab { font-size: var(--t-lab); color: var(--ink-3); }
.scard .pbig { font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1;
               font-variant-numeric: tabular-nums; }
.scard .pbig.ask { font-size: 20px; color: var(--warn-fg); }
.scard .pland { margin-top: 5px; font-size: var(--t-spec); color: var(--ink-2); }
.scard .pland b { color: var(--ink); font-weight: 600; }
.scard .tags { margin: 13px 0 0; }

/* ---- 运费估算(2026-08-19 从页面最底下搬进信息卡,就在价格正下方)----
   ⚠️ 这块以前在整幅宽的地方,一个 <table class="specs"> 就够看;
      搬进 ~340 像素的卡片之后要重新排:左标签右数字的两列网格,数字右对齐、
      等宽数字(不然换一个口岸,金额会左右跳)。
   ⚠️ 下拉框要占满一行 —— 「霍尔果斯口岸」这种长名字在窄卡片里会被截掉。 */
.portcalc { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-2); }
.portcalc .pc-head { font-size: var(--t-lab); color: var(--ink-3); letter-spacing: .3px;
                     margin-bottom: 7px; }
.portcalc .pc-pick { margin: 0 0 8px; }
.portcalc .pc-pick select {
  width: 100%; padding: 7px 9px; font-size: var(--t-spec); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.portcalc .pc-rows { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px;
                     margin: 0 0 8px; font-size: var(--t-spec); }
.portcalc .pc-rows dt { color: var(--ink-2); }
.portcalc .pc-rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* 合计那一行加重 —— 客户真正要带走的就是这个数 */
.portcalc .pc-rows dt.sum { color: var(--ink); font-weight: 600; }
.portcalc .pc-rows dd.sum { color: var(--ink); font-weight: 700; }
/* 取数那半秒:整块压暗一点,别让人以为点了没反应。⚠️ 不要禁用下拉框 ——
   禁用会让焦点跳走,键盘操作的人直接丢失位置 */
.portcalc[aria-busy="true"] { opacity: .55; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
      font-size: var(--t-spec); margin: 14px 0 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 600; }
/* 图库那一栏收进卡片里,主图不再顶到浏览器边 */
.dt-left .carousel { border: 1px solid var(--line); border-radius: var(--r-card);
                    overflow: hidden; background: var(--surface); }
.dt-left .thumbs { padding: 8px; margin-top: 0; }
.dt-left .shot-tabs { margin-bottom: 8px; }

.specs { width: 100%; border-collapse: collapse; margin: 16px 0; }
.specs th, .specs td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.specs th { color: var(--ink-2); font-weight: 400; width: 45%; }

/* 配置亮点的标签排。手机上会自己换行 —— 中亚客户主要用手机 */
/* 页脚是 body 的直接子元素(不在 main 里),所以要自己带一份版心内边距 */
.foot { margin: 36px 0 20px; padding: 14px var(--pad-x) 0; border-top: 1px solid var(--line-2);
        font-size: 12px; color: var(--ink-3); text-align: center; }
/* 数据来源署名(GeoNames / CC BY 4.0)—— 比主体名再轻一档,自己占一行 */
.foot-attr { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.foot-attr a { color: inherit; text-decoration: underline; }
.cta2 { margin-left: 10px; }

.hl { margin: 16px 0; }
.hl h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.hl-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hl-tags li {
  font-size: 13px; line-height: 1.4; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: #fafafa; color: var(--ink-2);
}
/* 配置分三层(2026-08-17)。⚠️ 一个 .hl 里现在有多个 h2 ——
   不给第二个及以后的 h2 加上边距的话,「安全配置」会紧贴上一层的标签。 */
.hl h2 + ul + h2, .hl ul + h2 { margin-top: 14px; }
.hl-more { margin-top: 12px; }
.hl-more > summary {
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0; color: var(--ink-2);
}
.hl-more > summary .n { color: var(--ink-3); font-weight: 400; }
.hl-more[open] > summary { margin-bottom: 8px; }

/* 图库按拍摄部位分的三栏 + 「第几张 / 共几张」(2026-08-17) */
.shot-tabs { display: flex; gap: 6px; margin: 0 0 6px; overflow-x: auto; }
.shot-tab {
  flex: 0 0 auto; font-size: 13px; line-height: 1.4; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-2);
  cursor: pointer;
}
.shot-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.shot-tab .n { opacity: .6; margin-left: 3px; }
.shot-count {
  position: absolute; right: 8px; bottom: 68px; margin: 0;
  font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 10px;
  background: rgba(0, 0, 0, .55); color: #fff; font-variant-numeric: tabular-nums;
}

/* 第三方检测报告 —— 有才显示。⚠️ 没有报告的车整块不出现:
   写一句「无检测报告」会让每台还没送检的车看起来有问题。 */
.report-badge {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 6px;
  background: var(--ok-bg); border: 1px solid var(--ok-line);
}
.report-badge strong { font-size: 14px; color: var(--ok-fg); }
.report-badge span { font-size: 13px; color: #4a5b51; }

.cta { display: flex; gap: 10px; margin: 16px 0; }
.cta a { flex: 1; text-align: center; padding: 12px; background: var(--ink); color: #fff; border-radius: 6px; }
/* ---------- 运输跟踪 ---------- */
.trackbox { display: flex; gap: 8px; margin: 14px 0 18px; flex-wrap: wrap; }
/* ⚠️ 字号必须 ≥16px:iOS Safari 上小于 16px 的输入框一点就自动放大整页,
   放大后不会自己缩回去,客户以为页面坏了(2026-08-05 在手机上撞到过) */
.trackbox input { flex: 1 1 240px; min-width: 0; font-size: 16px; padding: 10px 12px;
                  border: 1px solid #d6dae0; border-radius: 8px; }
.trackbox button { flex: 0 0 auto; font-size: 16px; padding: 10px 22px; border: 0;
                   border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.ordref { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.trklist { list-style: none; margin: 0; padding: 0; }
.trklist > li { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.trkhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.trkcar { font-weight: 600; }
.trksku { font-size: 12px; color: var(--ink-3); }
/* 车架号:跟车辆编号同一档,等宽好逐位核对(客户要拿它跟合同对) */
.trkvin { font-size: 12px; color: var(--ink-3);
          font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* 客户看到的四阶段(2026-08-22,二期第 6 步)。横着排,一眼看完剩几步。
   ⚠️ 窄屏(中亚客户绝大多数用手机)竖排 —— 四格横排在 360px 上会挤成两行半。 */
.trkstages { list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
             margin: 12px 0 0; padding: 0; }
.trkstages li { flex: 1 1 120px; border: 1px solid var(--line); border-radius: 8px;
                padding: 8px 10px; font-size: 14px; color: var(--ink-3);
                background: var(--surface); }
.trkstages li .n { display: block; font-weight: 600; }
.trkstages li .d { display: block; font-size: 12px; margin-top: 2px; }
.trkstages li.done { background: #e4f3e8; border-color: #bfe0c8; color: #1f7a3d; }
.trkstages li.now  { background: #e3eefb; border-color: #c2d8f0; color: #1f5fa8; }
.trkwait { margin: 10px 0 0; font-size: 14px; color: var(--ink-3); }

/* ---------- 路线示意图 ---------- */
/* 🔴 这不是地图(守则 §5.998):只有点、连线、当前位置和一层装饰网格。
   零外部依赖 —— 不引任何底图瓦片,客户 IP 不会泄露给第三方。 */
.rline { margin: 14px 0 0; }
.rline svg { width: 100%; height: auto; display: block; }
.rl-grid line { stroke: var(--line-2); stroke-width: 1; }
.rl-seg line { stroke-width: 2.5; stroke-linecap: round; }
.rl-seg line.done { stroke: var(--accent); }
.rl-seg line.todo { stroke: #cbd2d9; stroke-dasharray: 5 6; }
.rl-pt circle { fill: #cbd2d9; }
.rl-pt circle.done { fill: var(--accent); }
.rl-pt circle.cur  { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.rl-pt text { font-size: 12px; fill: var(--ink-2); }
.rl-sea { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.rl-none { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); }

/* ---------- 外观检测 ---------- */
/* 窄屏(中亚客户绝大多数用手机)图在上、清单在下;宽屏并排。
   图固定最大 200px 宽 —— 再大占满一屏,客户要滑很久才看到清单。 */
.ins-wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.bodymap { width: 100%; max-width: 180px; height: auto; flex: 0 0 auto; }
.ins-side { flex: 1 1 260px; min-width: 0; }
.ins-legend { list-style: none; margin: 0 0 10px; padding: 0;
              display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ins-legend li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.ins-legend i { width: 12px; height: 12px; border-radius: 3px;
                border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }
.ins-list { list-style: none; margin: 0; padding: 0; }
.ins-list li { display: flex; justify-content: space-between; gap: 10px;
               padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
/* 状态用左侧色条标出来,不整块上色 —— 整块上色会盖过文字,弱视和强光下都读不清 */
.ins-list b { font-weight: 600; color: var(--ink-2); border-left: 4px solid var(--line);
              padding-left: 8px; white-space: nowrap; }
.ins-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }

.similar ul { list-style: none; padding: 0; }
.similar li { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.empty { padding: 32px 0; text-align: center; color: var(--ink-3); }

/* 询价确认页(预览环境专有) */
.lead-ok { max-width: 520px; margin: 0 auto; }
.lead-ok .big { font-size: 20px; font-weight: 700; color: var(--brand); }
.lead-ok .note { background: #fff8e1; border-left: 3px solid #f0b429;
                 padding: 10px 12px; font-size: 13px; color: #5a4a1a; }
.lead-ok .back { display: inline-block; margin-top: 12px; color: #06c; }

/* 登录页(预览期,上线拆掉) */
body.gate { display: flex; align-items: center; justify-content: center;
            min-height: 100vh; background: #14181c; color: #e8eaed; }
.gate-box { width: 100%; max-width: 330px; padding: 24px; text-align: center; }
.gate-box .brand { font-size: 22px; letter-spacing: 3px; font-weight: 700; }
.gate-box .sub { color: #8d959d; font-size: 13px; margin: 6px 0 26px; }
.gate-box label { display: block; text-align: left; font-size: 12px; color: #8d959d; }
.gate-box input { width: 100%; margin-top: 6px; padding: 12px; font-size: 16px;
                  border: 1px solid #333a41; border-radius: 8px;
                  background: #1c2126; color: #e8eaed; }
.gate-box button { width: 100%; margin-top: 14px; padding: 12px; font-size: 16px;
                   border: 0; border-radius: 8px; background: #e8eaed; color: #14181c;
                   font-weight: 600; }
.gate-box .err { color: #ff8080; font-size: 13px; margin: 10px 0 0; }
.gate-box .foot { margin-top: 26px; font-size: 12px; color: #6f777e; line-height: 1.7; }

/* 价格隐藏时的替代文字 */
.price .ask { font-size: 14px; font-weight: 600; color: var(--warn-fg); }
.pricesw { margin-left: 10px; font-size: 15px; text-decoration: none; }

/* 批量询价单 */
.rfq-link { margin-left: 10px; font-size: 15px; }
.rfq-link b { font-size: 12px; background: var(--ink); color: #fff; border-radius: 9px; padding: 1px 5px; }
.rfq-btn { display: block; margin: 0 8px 8px; padding: 7px; text-align: center;
           border: 1px solid var(--ink); border-radius: 5px; font-size: 13px; }
.rfq-btn.on { border-color: var(--brand); color: var(--brand); }
.cta .primary { flex: 1; text-align: center; padding: 13px; background: var(--ink);
                color: #fff; border-radius: 6px; font-weight: 600; }
.cta .primary.in { background: var(--brand); }
.quick { text-align: center; font-size: 13px; color: var(--ink-2); margin: -6px 0 18px; }
.quick a { color: #06c; text-decoration: underline; }
.rfq-list { list-style: none; padding: 0; }
.rfq-list li { display: flex; gap: 10px; align-items: center; padding: 8px 0;
               border-bottom: 1px solid var(--line-2); }
.rfq-list .info { flex: 1; display: flex; flex-direction: column; }
.rfq-list .sub { font-size: 12px; color: var(--ink-2); }
.rfq-list .rm { font-size: 12px; color: var(--alert-fg); }
.rfq-form { margin-top: 18px; }
.rfq-form label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.rfq-form input, .rfq-form textarea, .rfq-form select {
  width: 100%; margin-top: 4px; padding: 10px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 6px; }
.rfq-form .row { display: flex; gap: 8px; }
.rfq-form .row select { width: 40%; }
.rfq-form button { width: 100%; padding: 14px; font-size: 16px; font-weight: 600;
                   border: 0; border-radius: 6px; background: var(--ink); color: #fff; }

/* 两个并排的行动按钮:左 直接询价 / 右 加入询价单(Owner 2026-08-03 定的版式)。
   🔴 2026-08-17:主次要分明 —— 实心绿 = 主行动,描边 = 次要。
      原来两个都是实心(绿 + 黑),一样重,人不知道该点哪个。
      跟列表卡片上那两个按钮是同一套规则,别两处不一样。 */
.cta.two { display: flex; gap: 10px; margin: 16px 0 0; }
.cta.two a { flex: 1; text-align: center; padding: 13px 6px; border-radius: var(--r-btn);
             font-weight: 600; font-size: 15px; }
.cta.two .ask { background: var(--brand); color: #fff; }
.cta.two .ask:hover { background: var(--brand-d); }
/* 🔴 `background` 必须显式写回来 —— 上面那条通用的 `.cta a` 给了深色底,
   只改文字颜色的话就是**深底深字:按钮上的字整个看不见**
   (2026-08-17 实测,截图上是一个纯黑的空块)。
   凡是覆盖一个已有规则,把它设过的每一个属性都想一遍,别只改要改的那个。 */
.cta.two .rfq { background: var(--surface); border: 1px solid var(--line);
                color: var(--ink); font-weight: 500; }
.cta.two .rfq.in { background: var(--surface); border-color: var(--brand); color: var(--brand); }

/* 🔴 上边距 auto = 把这一行推到那一栏的底边。
   2026-08-16 Owner 在首页一眼看出来:只要有一台车多出「事故:有」那行标签,
   它的按钮就比同排别的车低一截。**同排卡片被 grid 拉成一样高,
   差的只是里面的东西没顶到底** —— 所以要 auto,不能写成 0。
   ⚠️ 2026-08-17 改版后这一行搬进了 `.buy` 栏,左右边距归 .buy 的 padding 管,
      这里只留上下。 */
.card-cta { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 12px; }
.card-cta a, .card-cta span { text-align: center; padding: 10px 6px;
                              border-radius: var(--r-btn); font-size: var(--t-spec);
                              font-weight: 600; }
/* 🔴 主次要分明:实心绿 = 主行动,描边 = 次要。
   原来两个都是实心(绿 + 黑),一样重,人不知道该点哪个。 */
.card-cta .ask { background: var(--brand); color: #fff; }
.card-cta .ask:hover { background: var(--brand-d); }
.card-cta .rfq { border: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.card-cta .rfq.in { border-color: var(--brand); color: var(--brand); }
/* 单子满了(最多 60 台)。**只在脚本那条路上出现** —— 与其静默把客户选的车丢掉,
   不如在按钮原地把话说清楚。灰底无边框:一看就知道它不是能点的东西。 */
.card-cta .rfq.full, .cta.two .rfq.full { background: var(--surface); border: 1px solid var(--line);
                                          color: var(--ink-2); font-weight: 500; font-size: 12px; }
/* 手机上两个按钮并排(竖着排太占屏) */
@media (max-width: 899px) {
  .card-cta { flex-direction: row; }
  .card-cta a, .card-cta span { flex: 1; }
}

.rfq-list .row-cta { display: flex; gap: 6px; }
.rfq-list .row-cta .ask { padding: 6px 10px; border-radius: 5px;
                          background: var(--brand); color: #fff; font-size: 12px; }
.rfq-list .row-cta .rm { padding: 6px 8px; font-size: 12px; color: var(--alert-fg); }

/* 直接询价:选渠道那一页 */
.pick { max-width: 420px; margin: 0 auto; text-align: center; }
.pick-btns { display: flex; gap: 10px; margin: 20px 0; }
.pick-btns a { flex: 1; padding: 16px; border-radius: 8px; color: #fff;
               font-weight: 600; font-size: 16px; }
.pick-btns .wa { background: #25d366; }
.pick-btns .tg { background: #229ed9; }

/* 预先填好的那段话 */
.msg { background: #f4f6f8; border: 1px solid var(--line); border-radius: 6px;
       padding: 10px 12px; font: 13px/1.6 system-ui, sans-serif;
       white-space: pre-wrap; word-break: break-word; text-align: left; }
.pick-btns button { flex: 1; padding: 16px; border: 0; border-radius: 8px;
                    color: #fff; font-weight: 600; font-size: 16px; }
.pick-btns button.wa { background: #25d366; }
.pick-btns button.tg { background: #229ed9; }

/* 询价单合计 —— 客户一眼要看到的数,给它足够的分量 */
.rfq-total{margin:.8rem 0 1.2rem;padding:.7rem .9rem;background:#f6f8fa;border-radius:.5rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.rfq-total strong{font-size:1.15rem}
.rfq-total .sub{color:#6b7480;font-size:.85rem}


/* ============================================================
   手机上的两条硬规矩(2026-08-05 按公开资料核对后加,不是拍脑袋)
   ============================================================ */

/* ① 输入框字号必须 ≥16px。
      iOS Safari 在字号 ≤15px 时,**一点输入框就把整个页面放大**,
      用户得自己捏回去 —— 这是 Safari 有意的行为,不是 bug,只能靠字号躲开。
      桌面上仍用 14px(下面的媒体查询只在窄屏生效)。 */
@media (max-width: 900px) {
  .filters select,
  .filters input[type=search],
  .filters button,
  input[type=text], input[type=password], input[type=search], select, textarea {
    font-size: 16px;
  }
}

/* ② 可点的东西在触屏上至少 44px 高 —— 手指不是鼠标指针。
      只对触屏生效,鼠标设备上保持紧凑。 */
/* ⚠️ 只写 `pointer: coarse` 的话,我在鼠标电脑上**永远验不到这条规则** ——
      改成"触屏 或 窄屏"都生效,这样把窗口调窄就能自己检查。
      (2026-08-05:差点又犯"在验不到的地方写规则"这个错) */
@media (pointer: coarse), (max-width: 560px) {
  .filters select, .filters input[type=search], .filters button,
  .cta, .ask, .rm, .reset, .pick-btns a, .row-cta a {
    min-height: 44px;
  }
  .filters .chk input[type=checkbox] { width: 22px; height: 22px; }
  .filters button { padding: 6px 18px; }
}


/* 品牌位:图标 + 站名。左上角是页面上最值钱的位置,点它回首页(通行做法) */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo img { display: block; width: 30px; height: 30px; }
.logo span { font-weight: 700; }
/* 手机上图标略小一点,免得挤掉语言切换 */
@media (max-width: 480px) { .logo img { width: 26px; height: 26px; } }


/* ---------- 顶部导航 ---------- */
.mainnav { display: flex; gap: 18px; margin-left: 22px; }
.mainnav a { color: var(--ink-2); text-decoration: none; font-size: 15px; padding: 4px 0;
             border-bottom: 2px solid transparent; }
.mainnav a:hover { color: var(--accent); }
.mainnav a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* 手机上导航单独一行,别跟 logo 和语言挤 */
@media (max-width: 620px) {
  .top { flex-wrap: wrap; }
  .mainnav { order: 3; flex: 1 1 100%; margin: 6px 0 0; gap: 16px; }
  .mainnav a { min-height: 40px; display: flex; align-items: center; }
}

/* ---------- 内容页(购车流程 / 关于我们) ----------
   ⚠️ 这个 `.page` 是**正文文字栏**(760px),不是版心 —— 版心叫 `--page`,
      两者名字像但不是一回事。
   ⚠️ 文字栏**左对齐版心**,不居中:居中的话它的左边缘落在 370px,
      而顶栏 logo 和列表页内容都从版心左边线 170px 开始 —— 三个页面三条左边线,
      看着像浮着的。左对齐 = 全站共用一条左边线。 */
.page { max-width: 760px; }
.page .lead { font-size: 17px; color: var(--ink-2); }
.steps { list-style: none; counter-reset: none; padding: 0; margin: 18px 0; }
.steps li { padding: 14px 0; border-top: 1px solid var(--line-2); }
.steps h2 { font-size: 16px; margin: 0 0 4px; color: var(--accent); }
.steps p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.why { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); line-height: 1.9; }
.page-cta { margin: 26px 0; }
.page-cta .cta { display: inline-block; background: var(--accent); color: #fff;
                 padding: 10px 20px; border-radius: 6px; text-decoration: none; }


/* ---------- 品牌选车 ---------- */
.brandpick { margin: 18px 0 22px; }
.brandpick h2 { font-size: 15px; color: var(--ink-2); font-weight: 600; margin: 0 0 10px; }
.brandpick ul { list-style: none; margin: 0; padding: 0;
                display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .brandpick ul { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .brandpick ul { grid-template-columns: repeat(6, 1fr); } }
.brandpick a { display: flex; align-items: center; justify-content: space-between;
               gap: 6px; padding: 12px 12px; min-height: 46px;
               border: 1px solid var(--line); border-radius: 8px;
               text-decoration: none; color: var(--ink); background: #fff; }
.brandpick a:hover { border-color: var(--accent); color: var(--accent); }
.brandpick .bn { font-weight: 600; font-size: 14px; margin-right: auto; }
.brandpick .bc { font-size: 12px; color: var(--ink-3); }
/* 品牌标。原图 50×50 带白边,contain 缩进去 —— 不裁不变形。
   flex:0 0 auto:不让长品牌名把图挤扁。 */
.brandpick .blogo { flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
/* 「展开全部」(2026-08-17)。Owner:「几十个品牌…你是准备塞下几十个在第一屏吗?」
   一屏只摆 12 个,其余收在原生 <details> 里 —— 没有脚本也能展开。
   ⚠️ 两个 span 换着显示:收起时写「展开全部(N)」,展开后写「收起」。
      只留一句话的话,展开状态下按钮还写着「展开全部」,那是在说反话。 */
.brandpick .wallmore { margin-top: 8px; }
.brandpick .wallmore > summary { display: inline-block; cursor: pointer;
    font-size: var(--t-spec); font-weight: 600; color: var(--brand);
    padding: 6px 2px; list-style: none; }
.brandpick .wallmore > summary::-webkit-details-marker { display: none; }
.brandpick .wallmore > summary::after { content: " ▾"; }
.brandpick .wallmore[open] > summary::after { content: " ▴"; }
.brandpick .wallmore[open] > summary { margin-bottom: 8px; }
.brandpick .wallmore[open] .w-more { display: none; }
.brandpick .wallmore:not([open]) .w-less { display: none; }


/* ---------- 购车流程:图标卡片 + 箭头 ---------- */
.steps li { padding: 16px 0; border-top: 1px solid var(--line-2); }
.steps h2 { display: flex; align-items: center; gap: 8px; font-size: 16px;
            margin: 0 0 10px; color: var(--ink); }
.steps h2 i { font-style: normal; width: 22px; height: 22px; border-radius: 4px;
              background: var(--accent); color: #fff; font-size: 12px;
              display: inline-flex; align-items: center; justify-content: center; }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.fcard { flex: 0 1 auto; min-width: 130px; padding: 12px 14px; text-align: center;
         border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; }
/* 自己画的线条图标:统一用品牌蓝,橙色重点在图标文件里点 */
.fic { display: block; width: 30px; height: 30px; margin: 0 auto 2px;
       color: var(--accent); }
.ftx { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.arw { align-self: center; color: var(--ink-3); }
@media (max-width: 560px) {
  .flow { flex-direction: column; }
  .fcard { min-width: 0; text-align: left; display: flex; align-items: center; gap: 10px; }
  .fic { width: 26px; height: 26px; margin: 0; flex: 0 0 auto; }
  .ftx { margin: 0; }
  .arw { transform: rotate(90deg); align-self: flex-start; margin-left: 18px; }
}


/* ---------- 上架前预览的横幅(2026-08-21)----------
   🔴 必须显眼:销售拿到预览链接会顺手转给客户,而这台车**还买不到**。
      用告警色(不是品牌色)—— 它说的是一个限制,不是一个卖点。
   ⚠️ 它是页面第一块内容,不是 fixed 的:fixed 会盖住轮播的翻页按钮,
      而这个功能要看的正是照片。 */
.pv-banner { margin: 0 0 14px; padding: 10px 14px;
             background: var(--alert-bg); border: 1px solid var(--alert-ln);
             border-radius: 6px; color: var(--alert-fg);
             font-size: 14px; font-weight: 600; }