/* ===========================================================================
   卡密中心 · 商品分类 + 折扣档切换（2026-09-25 新增，独立文件）
   ---------------------------------------------------------------------------
   为什么独立成文件：style.css 是全站共享的，按本项目铁律「改别人的样式别动
   style.css → 新建独立 css 并排其后加载」。
   为什么要有它：分级可见上线后，总账号在卡密中心会看到 17 个 SKU —— 同一款月卡
   按 6/5/4 折各占一张卡、重复三遍，要一直往下滑（用户 2026-09-25 反馈）。
   改为「按品类分组 + 同品类合并成一张卡、卡内切折扣」后：17 张 → 7 张。
   类名一律 cc-cat / cc-tier 前缀 —— 已 grep 确认 style.css 里无同名类。
   =========================================================================== */

.cc-cat {
  display: flex; align-items: center; gap: 7px;
  margin: 6px 2px 0; font-size: 12.5px; font-weight: 800;
  color: #5F5E5A; letter-spacing: .5px;
}
.cc-cat::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px;
  background: linear-gradient(180deg, #F97316, #FB923C);
}

.cc-tier-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 2px; }
.cc-tier {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid #E7E7EE; background: #FAFAFC; color: #6E6E80;
  border-radius: 8px; padding: 4.5px 9px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.cc-tier b { font-weight: 800; }
.cc-tier.on {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 2px 7px var(--c1g);
}
.cc-tier:active { transform: scale(.95); }