/* ==========================================================================
   产品列表页（/products）：筛选条 / 搜索 / 产品卡 / 分页 / 空态

   全部使用逻辑属性（margin-inline / padding-inline / text-align:start），
   一套样式同时适配 LTR 与 RTL。
   ========================================================================== */

/* ---------- 筛选条：左分类（可滚动 + 箭头） + 右搜索（固定） ----------
   分类任意多都不会换行，PC 版式恒定。

   ★ 2026-10-12 修复：原先只有 overflow-x:auto 且**隐藏了滚动条**，
   分类一多（实测 7 个就溢出）用户完全不知道右边还有内容，也滑不到 ——
   等于靠后的分类隐形。现在：
     .cat-scroller  相对定位容器，左右各挂一个箭头按钮
     .cat-nav       箭头（溢出时才由 JS 显示；不依赖 JS 也能滚）
     渐隐遮罩       用 ::before/::after + linear-gradient 暗示「这边还有」
   滚动能力仍是原生的（触屏、触控板、Shift+滚轮、键盘都能用）。 */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 18px;
}
.cat-scroller {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;                       /* flex 子项允许收缩，否则不触发滚动 */
}
.filter-bar__cats {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;     /* 滚到头不把整页带着一起滑 */
  /* 横向滚动条藏起来（内容可滚，视觉干净）—— 可发现性交给箭头与渐隐 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 2px;                 /* 滚动到边缘时不被圆角裁切一半 */
  /* 两端留出让位给叠加的箭头按钮，首尾 chip 不被箭头压住 */
  padding-inline: 2px;
  scroll-behavior: smooth;
  /* ★ 刻意不用 scroll-snap-type：
     实测 Chromium 下「x proximity + 首项 snap-align:start + padding-inline-start」
     会把静止位置吸附到 padding 处（scrollLeft 停 38 而非 0），
     导致「是否已到最左」的判定永远为否 → 左箭头在起点也不禁用。
     chip 条本就不需要吸附，去掉后静止位回到 0，判定稳定。 */
}
/* 箭头出现时（JS 给 .cat-scroller 加 is-nav 类），分类条两端让出 38px，
   确保「第一个/最后一个 chip」完全可见，不会被箭头遮住。
   38 = 箭头 30px + 8px 间隙。
   注：两端**始终**让位（不随滚动位置收回）—— 箭头是常显的（到边界只变灰
   不消失），若让位收回，chip 又会被箭头压住，反而更乱。 */
.cat-scroller.is-nav .filter-bar__cats { padding-inline: 38px; }
.filter-bar__cats::-webkit-scrollbar { display: none; }
.filter-bar__cats .chip { flex: 0 0 auto; }
.filter-bar__cats:focus-visible {     /* 键盘 Tab 进来时给个清晰的焦点环 */
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

/* 两端渐隐：有内容被藏住时，边缘淡出，提示「这边还有」。
   .is-overflow-* 由 JS 按滚动位置切换。 */
.cat-scroller::before,
.cat-scroller::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 28px;
  pointer-events: none;               /* 遮罩不能挡住点击 */
  opacity: 0;
  transition: opacity .18s;
  z-index: 1;
}
.cat-scroller::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--bg) 20%, transparent);
}
.cat-scroller::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--bg) 20%, transparent);
}
/* RTL（阿语）：::before/::after 随 inset-inline 跑到对面，
   渐隐方向也要跟着翻，否则出现「左边缘往右淡出」的错觉 */
[dir="rtl"] .cat-scroller::before {
  background: linear-gradient(to left, var(--bg) 20%, transparent);
}
[dir="rtl"] .cat-scroller::after {
  background: linear-gradient(to right, var(--bg) 20%, transparent);
}
.cat-scroller.is-overflow-end::after { opacity: 1; }
.cat-scroller.is-overflow-start::before { opacity: 1; }

/* 左右箭头按钮：**绝对定位叠加**在分类条两端（不占 flex 空间，
   否则会把 chip 挤到看不见）。默认藏，溢出时 JS 放出。 */
.cat-nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;                         /* 抬到渐隐遮罩（z-index:1）之上 */
  inline-size: 30px;
  block-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow-md);
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.cat-nav--prev { inset-inline-start: 0; }
.cat-nav--next { inset-inline-end: 0; }
.cat-nav:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-soft); }
.cat-nav:disabled { opacity: .38; cursor: default; }
.cat-nav:disabled:hover { border-color: var(--line); color: var(--ink-2); background: var(--bg); }
.cat-nav[hidden] { display: none; }
.cat-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.filter-bar .search-box { flex: 0 0 auto; }

/* ---------- 搜索框（输入 + 按钮合成一体） ---------- */
.search-box {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  overflow: hidden;
}
.search-box input[type="search"] {
  flex: 1 1 180px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  padding-inline: 16px 8px;
  padding-block: 8px;
}
.search-box input[type="search"]::placeholder { color: var(--ink-3); }
.search-box .btn {
  border-radius: 0;
  border: 0;
  border-inline-start: 1px solid var(--line);
  margin: 0;
}

/* ---------- 产品卡 ---------- */
.product-card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.product-card:hover { border-color: var(--primary-border); box-shadow: var(--shadow-md); }
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: .875rem; overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: 12px; flex: 1; display: flex; flex-direction: column; }

/* 型号用中性深灰而非品牌色：列表里一片蓝字很吵，
   品牌色的存在感交给价格/按钮（业主 2026-10-12）。 */
.product-card__model {
  font-size: .75rem; color: var(--ink-3); font-weight: 600;
  margin-block-end: 4px;
}
/* 标题刻意不加粗：卡片里加粗元素一多就分不清主次，
   价格才是 B2B 客户第一眼要找的信息（业主 2026-10-12 要求）。 */
.product-card__title {
  font-size: .9375rem; font-weight: 400;
  line-height: 1.45; color: var(--ink);
  margin-block-end: 8px; flex: 1;
}
/* 价格行：列表页最关键的信息 —— 靠「字号 + 字重 + 深色」压住视线，
   不用品牌色（蓝色/橙色价格会显得像促销，耐看度也差）。 */
.product-card__price {
  display: flex; align-items: baseline; gap: 4px;
  flex-wrap: wrap; margin-block-end: 8px; line-height: 1.2;
}
.price-from { font-size: .75rem; color: var(--ink-3); }
.price-num {
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em;
}
.price-unit { font-size: .75rem; color: var(--ink-3); }
.price-ask  { font-size: .8125rem; color: var(--ink-3); }

.product-card__meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: .75rem; color: var(--ink-3);
}
/* 无图占位图标：居中显示，颜色比正文浅一档（别抢视觉） */
.product-card__ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}

/* 卡片里的加入购物车按钮：次要动作，不做成实心主色，避免抢价格 */
.product-card__add { margin-block-start: 10px; }

/* ---------- 分页 ---------- */
/* ★ 第 117 轮：flex-wrap 兜底 —— 页码再多样也只换行、不撑破容器（手机横向溢出的真凶）。
   max-inline-size 保证在任何父级里都不会比容器宽。 */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px; margin-block-start: 32px;
  max-inline-size: 100%;
}
.pager__link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 20px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.pager__link:hover { border-color: var(--primary); color: var(--primary); }
/* ★ 第 117 轮：窄屏把「Previous / Next」换成箭头（见下方 media），文字节点保留给读屏。
   箭头只在窄屏伪元素里出现，后台分页不加载本文件 → 不会多出字符。 */
.pager__link__i { display: none; }
.pager__info { color: var(--ink-2); font-size: 14px; }
.pager__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.pager__num:hover { border-color: var(--primary); color: var(--primary); }
.pager__num--cur { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager__num--cur:hover { color: #fff; }
.pager__ellipsis { color: var(--ink-3); padding-inline: 4px; }
.pager__per {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 8px; color: var(--ink-2); font-size: 14px;
}
.pager__per select {
  min-height: 44px; padding-inline: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink); font-size: 14px;
}

/* ---------- 窄屏：分类与搜索各占一行 ---------- */
@media (max-width: 640px) {
  .filter-bar { flex-wrap: wrap; }
  .cat-scroller { flex: 1 1 100%; }
  .filter-bar__cats { flex: 1 1 100%; }
  .filter-bar .search-box { flex: 1 1 100%; }
  .chip { min-height: 38px; padding-inline: 13px; font-size: 13px; }
  /* 触屏上手指直接滑，箭头是累赘 —— 藏掉，只留渐隐提示 */
  .cat-nav { display: none; }
  .cat-scroller::before,
  .cat-scroller::after { inline-size: 22px; }
  /* 分页：手机上 44px 圆点太占宽。压到 36px、收紧间距，并把「Previous / Next」
     文字换成箭头 —— 否则 6 页时 5 个数字 + 两个文字按钮必定折行或撑破容器。
     箭头用伪元素，RTL（阿语）下左右对调。 */
  .pager { gap: 10px 6px; margin-block-start: 24px; }
  .pager__num { min-width: 36px; min-height: 38px; padding-inline: 6px; font-size: 13px; }
  .pager__link { min-height: 38px; padding-inline: 12px; font-size: 13px; }
  .pager__ellipsis { padding-inline: 1px; }
  .pager__link__t { display: none; }
  .pager__link__i { display: inline-block; font-size: 20px; line-height: 1; }
  .pager__link--prev .pager__link__i::before { content: '‹'; }
  .pager__link--next .pager__link__i::before { content: '›'; }
  [dir='rtl'] .pager__link--prev .pager__link__i::before { content: '›'; }
  [dir='rtl'] .pager__link--next .pager__link__i::before { content: '‹'; }
}