/* ============================================================================
   OPSD · 商品列表（/products）
   只加载 tokens.css + 本文件。顶栏/banner/页脚是对首页 chrome 的等价复刻
   （paper.css 不属于本页，故此处自带一份，数值逐条对齐，避免两页长得不一样）。

   纪律：
     - 只用 tokens 的纸面四层与墨阶；赭色只出现在主 CTA 与 paper-2/3 上的链接 hover 下划线
     - --ink-2 只允许出现在 --paper-3 之上（本页 3 处 ink-2 全部落在 paper-3：搜索框底、卡片）
       实测 B 的 --ink-2 #6b655a 对 paper-0/1/2/3 = 4.68/4.98/5.25/5.49，比 A/C 那套暖 1.7 L* 的
       板面更宽松；但规则仍按最严的一档执行，不因为"能过"就往暗层挪
     - 中文 ≥13px，字重只用 400
     - 卡片用真 border（0.5px），不用 box-shadow 伪造描边
   ========================================================================= */

/* ---------------------------------------------------------------- 顶栏 */
/* 【与首页的 1px 差异，有意保留】
   首页 header 的底边框是 transparent + .is-stuck，由 page.js 的滚动监听切换；
   本页不加载 page.js（那是首页的资源），所以底边框常显。
   结果：两页在「页面顶部」会有 1px 的边框差。
   不要再为这 1px 复制一份滚动监听 —— 那是两份会漂移的逻辑。
   将来若把 header 抽成公共组件，两边统一。 */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 24px;
  height: var(--topbar-h);
  padding-inline: var(--pad);
  background: var(--paper-1);
  border-bottom: 1px solid var(--line-0);
}

.brand { display: flex; align-items: baseline; gap: 8px; flex: none; }
.brand-mark {
  font-family: var(--font-brand);
  font-style: italic;
  font-size: 15px; line-height: 22px;
  letter-spacing: .06em;
  color: var(--ink-0);
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-caps); line-height: 16px;
  letter-spacing: .12em;
  color: var(--ink-1);
}

/* 真表单：输入框 + 图标，形态与首页「搜索地域」一致，但会回车提交到 /products */
.topbar-search {
  position: relative;
  display: flex; align-items: center;
  width: min(320px, 26vw); flex: none;
  margin-left: 8px;
}
.topbar-search .i16 {
  position: absolute; left: 10px;
  width: 16px; height: 16px;
  color: var(--ink-1);
  pointer-events: none;
}
.topbar-search input {
  width: 100%; height: 36px;
  padding: 0 12px 0 32px;
  border-radius: var(--r-md);
  border: .5px solid var(--line-2);
  background: var(--paper-3);
  color: var(--ink-0);
  font-family: var(--font-cjk);
  font-size: var(--fs-body-s); line-height: 20px;
  -webkit-appearance: none; appearance: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.topbar-search input::placeholder { color: var(--ink-2); }   /* 实测 5.49:1 @paper-3 */
.topbar-search input:focus {
  outline: none;
  border-color: rgba(23, 21, 18, .32);
  box-shadow: 0 0 0 3px rgba(23, 21, 18, .07);
}
.topbar-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.nav { display: flex; align-items: center; gap: 24px; }
.nav a {
  font-size: var(--fs-body); line-height: 20px; color: var(--ink-1);
  transition: color 140ms ease;
}
.nav a:hover {
  color: var(--ink-0);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;    /* 顶栏是 paper-1，赭色文字不过 AA */
}
.nav a[aria-current="page"] { color: var(--ink-0); }

.account { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.account form { display: flex; margin: 0; }   /* 与 paper.css 对齐：退出登录表单只是一个 flex 项 */
.link-btn {
  border: 0; background: none; padding: 0;
  font-size: var(--fs-body-s); line-height: 20px; color: var(--ink-1);
  cursor: pointer;
}
.link-btn:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; }

/* 「即将开放」状态标记：4 字标记不是句子，可以 12px；底色是 paper-1，
   所以用 ink-1（ink-2 在 paper-1 上只有 4.4:1，不过 AA）。 */
.soon-note {
  margin-left: 4px;
  font-size: 12px; line-height: 16px;
  color: var(--ink-1);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- banner */
.banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--banner-h);
  padding-inline: var(--pad);
  background: var(--paper-1);
  border-bottom: 1px solid var(--line-0);
  /* 与首页同一处有意偏离：spec 的 12px 前提是「≤6 字标签」，这里是一句完整承诺句 */
  font-size: var(--fs-body-s); line-height: 20px;
  color: var(--ink-1);
  letter-spacing: .01em;
}
.banner .dot-ok {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok-dot); flex: none;
}

/* ---------------------------------------------------------------- 版心 */
.container { max-width: 1440px; margin: 0 auto; padding-inline: var(--pad); padding-block: 40px 0; }

.pl-head { display: flex; flex-direction: column; gap: 10px; }

.crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-body-s); line-height: 20px;
  color: var(--ink-1);
}
.crumbs a { color: var(--ink-1); }
.crumbs a:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; }
.crumb-sep { color: var(--ink-1); }
.crumb-now { color: var(--ink-0); }

.pl-h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ink-0);
}
.pl-sub { font-size: var(--fs-body); line-height: 22px; color: var(--ink-1); }

/* ------------------------------------------------------------ 筛选状态条 */
.filters {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 24px;
  padding: 12px 16px;
  background: var(--paper-2);
  border: .5px solid var(--line-1);
  border-radius: var(--r-md);
}
.filters-label {
  font-size: var(--fs-body-s); line-height: 20px; color: var(--ink-1);
  flex: none;
}
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 4px 0 10px;
  border-radius: var(--r-xs);
  border: .5px solid var(--line-1);
  background: var(--paper-3);
  font-size: var(--fs-body-s); line-height: 18px;
  color: var(--ink-0);
}
.chip-k { color: var(--ink-1); }
.chip-v { color: var(--ink-0); }
.chip-x {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: var(--fs-body-s); line-height: 18px;
  color: var(--ink-1);
}
.chip-x:hover { color: var(--ink-0); background: var(--hover); }
.chip.is-none { padding-right: 10px; color: var(--ink-1); background: transparent; border-color: transparent; }

.filters-all {
  margin-left: auto;
  font-size: var(--fs-body-s); line-height: 20px;
  color: var(--ink-1);
  flex: none;
}
.filters-all:hover {
  color: var(--ink-0);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);   /* 赭色只做 hover 下划线，paper-2 上 4.65:1 */
}

/* 城市级过滤的实话行 */
.pl-note {
  margin-top: 12px;
  font-size: var(--fs-body-s); line-height: 20px;
  color: var(--ink-1);
}

/* ---------------------------------------------------------------- 卡片 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.card {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  padding: 16px;
  background: var(--paper-3);
  border: .5px solid var(--line-1);      /* 真描边，不用 box-shadow */
  border-radius: var(--r-lg);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.card:hover { border-color: var(--line-2); }

.card-head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.card-name {
  font-size: var(--fs-body); line-height: 22px;
  font-weight: 400; color: var(--ink-0);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-region {
  flex: none;
  font-size: var(--fs-caps); line-height: 16px;
  letter-spacing: .08em;
  color: var(--ink-2);                    /* 实测 5.49:1 @paper-3 */
}

.card-purpose {
  font-size: var(--fs-body-s); line-height: 20px;
  color: var(--ink-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 12px;
  border-top: .5px solid var(--line-0);
}
.card-price {
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  color: var(--ink-0);
  font-variant-numeric: tabular-nums;
}
/* 询价与价格用同一个行高：字号可以小一档，行盒必须等高，
   否则同排两卡的价格基线会差 5px，看起来像渲染抖动 */
.card-price.is-ask { font-size: var(--fs-body); line-height: var(--lh-h3); color: var(--ink-1); }
.card-from {
  margin-left: 3px;
  font-size: var(--fs-body-s); line-height: 20px;
  color: var(--ink-1);
}
.card-soon {
  flex: none;
  font-size: var(--fs-body-s); line-height: 20px;   /* 6 字状态短语，按 ≥13px 处理 */
  color: var(--ink-2);                              /* 实测 5.49:1 @paper-3 —— 已是 paper-3 上最浅的合规文字色 */
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 分页 */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--line-0);
}
.pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-md);
  border: .5px solid var(--line-2);
  background: var(--paper-2);
  font-size: var(--fs-body-s); line-height: 20px;
  color: var(--ink-0);
  transition: background-color 140ms ease, border-color 140ms ease;
}
.pager-btn:hover { background: var(--hover); border-color: var(--line-3); }
.pager-btn.is-off { color: var(--ink-1); background: transparent; border-color: var(--line-1); cursor: default; }
.pager-mid { font-size: var(--fs-body-s); line-height: 20px; color: var(--ink-1); }
.pager-range { color: var(--ink-1); }

/* ---------------------------------------------------------------- 空态 */
.pl-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-top: 24px; padding: 48px 24px;
  background: var(--paper-2);
  border: .5px solid var(--line-1);
  border-radius: var(--r-lg);
}
.pl-empty-title { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink-0); }
.pl-empty-sub { font-size: var(--fs-body-s); line-height: 20px; color: var(--ink-1); max-width: 42ch; }
.pl-empty .btn { margin-top: 8px; }

/* ---------------------------------------------------------------- 页脚 */
.footer {
  margin-top: 48px;
  padding: 24px 0 32px;
  background: var(--paper-1);
  border-top: 1px solid var(--line-0);
}
.footer .container { padding-block: 0; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1023px) {
  /* 收窄而不是收成图标：36px 宽的输入框看不见自己打的字，等于没有搜索 */
  .topbar-search { width: min(200px, 34vw); }
  .nav { gap: 16px; }
}

@media (max-width: 767px) {
  .container { padding-block: 24px 0; }
  /* 手机上顶栏折成两行：第一行品牌 + 登录态，第二行整行搜索（搜索框必须能用） */
  .topbar {
    flex-wrap: wrap;
    gap: 8px 12px;
    height: auto;
    padding-block: 8px;
  }
  .topbar-search { order: 3; width: 100%; margin-left: 0; }
  .account { margin-left: auto; }
  .nav { display: none; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .pager { flex-wrap: wrap; }
  .filters { align-items: flex-start; }
  .filters-all { margin-left: 0; }
  .soon-note { display: none; }
}