/* TPU 产品页色卡 —— 统一为「系列小标题 + 胶囊 chip」形态（四语一致）
 *
 * 背景：
 *   英文 TPU 页是 V3 版式（#nrd3），色卡由 pd-v3/index12.js 从
 *   `.pd-swatches li` 取数后渲染成扁平 chip —— 80 个颜色平铺，丢了 13 个系列分组；
 *   de/ja/ko 是模板原生右栏，走 `.noray-pd.pd-colors-tpu` 的 4 列网格，
 *   但 `.pd-series` 系列小标题没有样式，且被 v5.css 的
 *   `html:not(.nrd3) p { font-size:16px!important; margin-bottom:24px!important }` 污染。
 *   → 本文件把两边统一：系列小标题（橙色竖条 + 14px 加粗）+ 胶囊 chip 流。
 *
 * ⚠ 结构性约定（见 标准化TPU色卡结构.py）：
 *   标题用 h3、系列名与说明用 div —— 刻意避开 h2 / p，
 *   因为 v5.css 对 h2 / p 有 !important 的全局字号，会把色卡区撑成 36px 标题 + 24px 段距。
 *
 * ⚠ 特异性：v5.css 的 `html:not(.nrd3) h3` / `html.nrd3 h3` 带 !important（25px），
 *   本文件要用 !important + 更高特异性把标题压到 20px（与 --nf-h4 一致的层级感）。
 *
 * 注意：/_assets/* 是 immutable 一年缓存，改内容必须换文件名。
 */

/* ---------- 标题 ---------- */
html:not(.nrd3) .noray-pd.pd-colors-tpu .pd-colors-title,
#nrd3 .pd-colors-tpu .pd-colors-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  color: #151a24;
}

html:not(.nrd3) .noray-pd.pd-colors-tpu .pd-colors-title .pd-count,
#nrd3 .pd-colors-tpu .pd-colors-title .pd-count {
  font-size: 15px;
  font-weight: 500;
  color: #8a9198;
  letter-spacing: 0;
}

/* ---------- 系列小标题 ---------- */
.noray-pd.pd-colors-tpu .pd-series,
#nrd3 .pd-colors-tpu .pd-series {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: #151a24;
  letter-spacing: .01em;
}

.noray-pd.pd-colors-tpu .pd-series::before,
#nrd3 .pd-colors-tpu .pd-series::before {
  content: "";
  flex: none;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: #e58722;
}

.noray-pd.pd-colors-tpu .pd-series:first-of-type,
#nrd3 .pd-colors-tpu .pd-series:first-of-type {
  margin-top: 4px;
}

/* ---------- 色块容器：网格 → 胶囊 chip 流 ---------- */
.noray-pd.pd-colors-tpu .pd-swatches,
#nrd3 .pd-colors-tpu .pd-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.noray-pd.pd-colors-tpu .pd-swatches li,
#nrd3 .pd-colors-tpu .pd-swatches li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 8px;
  border: 1px solid #e6e8ea;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  line-height: 1.45;
  color: #3d444b;
  white-space: nowrap;
}

.noray-pd.pd-colors-tpu .pd-swatches li i,
#nrd3 .pd-colors-tpu .pd-swatches li i {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .16);
  display: block;
}

.noray-pd.pd-colors-tpu .pd-swatches li span,
#nrd3 .pd-colors-tpu .pd-swatches li span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* ---------- 说明 ---------- */
.noray-pd.pd-colors-tpu .pd-note,
#nrd3 .pd-colors-tpu .pd-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eef0f2;
  font-size: 13px;
  line-height: 1.7;
  color: #6b7280;
}

/* 英文 V3 页原本的 chip 区（.nr-color-picker）由 tpu.js 重建为上面的结构，
   旧样式会残留，这里把 V3 自带的胶囊样式清掉，避免两套规则叠加。 */
#nrd3 .nr-colors .nr-color-picker {
  display: block;
  margin: 0;
}

#nrd3 .nr-colors .nr-color-note {
  margin: 0;
}

@media (max-width: 767px) {
  .noray-pd.pd-colors-tpu .pd-swatches li,
  #nrd3 .pd-colors-tpu .pd-swatches li {
    font-size: 12.5px;
    padding: 4px 11px 4px 7px;
  }
}