/* ==========================================================================
   idcub 主题 · 桥接层 (Bridge)
   --------------------------------------------------------------------------
   为什么需要这一层：

   商品列表由【核心 JS】异步渲染，核心 assets/user/controller/index/index.js 里
   硬编码了 `.acg-card / .acg-thumb / .acg-body / .goods-title / .soldout-ribbon`
   这套类名和 DOM 结构，我们改不动（改核心会影响所有主题）。

   所以本页的做法是：保留核心的类名与选择器契约（.item-list 挂载点、
   .switch-category 触发器），只在外观层面用 idcub 的设计令牌重塑它。
   代价是多一层 CSS；收益是不改核心就能换肤，且主题能跟随核心的字段增删。

   载入顺序：必须在 token.css / base.css / shop.css 【之后】，
   因为这里的选择器权重更高，靠覆盖生效。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 挂载点
   核心会把 .acg-card 直接 append 进 .item-list，需要清掉 Cartoon 的网格假设
   -------------------------------------------------------------------------- */
/* ★ 横卡是单列纵向列表。
   ★★ .item-list 上【不要】用 .nv-grid 做限定 —— 核心 JS 会移除该类，
      最终 DOM 只有 nv-list + item-list。详见 shop.css 同名注释。
   布局由 shop.css 的 .item-list.nv-list 统一定义，本层不重复。 */

/* 加载态占位：撑满整行，避免出现半格骨架 */
.item-list.nv-grid > .nv-skeleton { grid-column: 1 / -1; }

/* 核心的空态文案是一个裸 div，这里给它一个像样的容器 */
.item-list.nv-grid > div:not(.acg-card):not(.nv-skeleton) {
  grid-column: 1 / -1;
  padding: var(--nv-space-16) var(--nv-space-4);
  text-align: center;
  font-size: var(--nv-fs-caption);
  color: var(--nv-text-muted);
}

/* --------------------------------------------------------------------------
   2. 卡片容器 · 横向扁平卡
   --------------------------------------------------------------------------
   核心 DOM（不可改）：
     <a class="item-card-cell">
       <div class="acg-card">
         <div class="acg-thumb" style="background:url(…)">      ← 图（背景图）
         <div class="acg-body">                                  ← 主体
           <div class="tags">…</div>
           <p class="goods-title">…</p>
           <div class="stat-row"><div class="price">…</div></div>
           <div class="stat-bottom">库存/已售</div>
         </div>
       </div>
     </a>

   ★ 这里把它从「图在上、信息在下」的纵向卡，重塑为「图在左、信息在中、
     价格在右」的横向扁卡 —— 与 demo 的设计一致（单屏可见更多商品）。
     .acg-thumb 与 .acg-body 是兄弟节点，改 row 即可横排。
   -------------------------------------------------------------------------- */
.item-card-cell {
  display: block;
  color: inherit;
  min-width: 0;

  /* ★ 懒渲染（2026-10-16）—— 解决「首页一次拉全量商品 → 全部封面图都下载」

     ★ 为什么必须用 CSS 而不是 JS 懒加载：
       卡片是【核心 index.js 用内联 style="background: url(…)"】渲染的
       （见 _PushCommodityList），主题碰不到那个字符串；
       content-visibility 是纯 CSS，**核心一行都不用改**。
     ★ 为什么不能只靠主题现有的前端分页：
       initPager() 用的是 display:none —— 而首页一次拉的是【全量商品】，
       请求数、图片数、DOM 节点数一个都没省。
     ★ 本规则让【视口外】的卡片跳过布局与绘制，其 background-image
       也就不会发起请求 —— 等效于懒加载，且零 JS、零 FOUC。
     ★ 不支持该属性的浏览器会忽略它，回退成现在的行为（渐进增强）。 */
  content-visibility: auto;
  /* ★★ 估算值必须是卡片的【真实高度】——这是本规则唯一的风险点：
       视口外的卡片首次按此值占位，若与实际高度差得多，
       滚动时页面总高会被不断修正 → 滚动条跳动、滚动位置漂移。

     ★ 为什么是 88px（有据可依，不是估的）：
       同文件下方 .acg-card 的注释写明「缩略图 72 + 上下 margin 16 = 88」，
       而它的 min-height:76px 只在没有缩略图等极端情况下兜底。
       本列表是【单列纵向】（核心 index.js 会移除 nv-grid 类），
       卡片高度与屏宽无关，所以一个值就够，无需按断点分档。

     ★ 初版误填 120px（比实际高估约 36%）。382 张卡片累积约 1.2 万 px 虚高，
       表现是往下滚时页面一路"缩"、滚动条持续跳动 —— 勿改回大值。

     ★ auto 关键字 = 元素一旦渲染过就改用它的真实尺寸，
       所以这个估算值只影响「从未进入过视口」的卡片。 */
  contain-intrinsic-size: auto 88px;
}

.item-card-cell:hover { color: inherit; }

/* ★ 打印时必须关掉上面的懒渲染。
   content-visibility: auto 是按【视口】判定"要不要渲染"的，
   而打印场景的"视口"是纸张大小 —— 于是纸张之外的卡片很可能
   【整块不出现在打印结果里】，客户打印商品清单会缺项。
   打印列表虽不是高频操作，但确实存在（比价、报价单），
   而这条覆盖的成本只有两行。 */
@media print {
  .item-card-cell { content-visibility: visible; }
}

/* 核心在售罄时把 href 换成 javascript:void(0)，此时不该有 hover 上浮 */
.item-card-cell[href^="javascript"] { cursor: default; }
.item-card-cell[href^="javascript"]:hover .acg-card {
  transform: none;
  border-color: var(--nv-border-soft);
}

.acg-card {
  position: relative;
  display: flex;
  flex-direction: row;          /* ★ 横向扁卡的关键 */
  align-items: stretch;
  /* ★★ 2026-10-14 降高：96 → 84
     ★ 这个 min-height 才是卡片高度的【真正决定因素】——
       改小缩略图后卡片纹丝不动，就是被它锁住的（实测踩过）。
       现在把锁解开，卡片高度交给内容（缩略图 72 + 上下 margin 16 = 88）决定。
       值设 84（略小于自然高 88）是为了不干预自然布局，
       只在没有缩略图等极端情况下兜一个下限。 */
  min-height: 76px;
  background-color: var(--nv-elevated);
  /* 参考项目特征：描边极淡，层次靠柔和阴影表达 */
  border: .5px solid rgba(var(--nv-border-soft-rgb), calc(var(--nv-border-soft-a) * 0.45));
  border: .5px solid color-mix(in srgb, var(--nv-border-soft) 45%, transparent);
  border-radius: var(--nv-radius-card);
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .06), 0 8px 22px -14px rgba(0, 0, 0, .16);
  overflow: hidden;
  transition:
    box-shadow var(--nv-dur-normal) var(--nv-ease-out),
    border-color var(--nv-dur-fast) var(--nv-ease-out),
    transform var(--nv-dur-normal) var(--nv-ease-out);
}

/* 顶部渐变细条在横卡上不适用，隐藏；改用左侧竖条（hover 才亮） */
.acg-card::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background-image: var(--nv-gradient);
  opacity: 0;
  transition: opacity var(--nv-dur-normal) var(--nv-ease-out);
  pointer-events: none;
  z-index: 2;
}

@media (hover: hover) {
  .item-card-cell:not([href^="javascript"]):hover .acg-card {
    transform: translateX(2px);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .07), 0 16px 34px -18px rgba(0, 0, 0, .22);
    border-color: rgba(var(--nv-brand-rgb), 0.42);
    border-color: color-mix(in srgb, var(--nv-brand) 42%, transparent);
  }
  .item-card-cell:not([href^="javascript"]):hover .acg-card::before { opacity: 1; }
  .item-card-cell:not([href^="javascript"]):hover .acg-thumb { transform: scale(1.06); }
  .item-card-cell:not([href^="javascript"]):hover .goods-title { color: var(--nv-brand-ink); }
}

.item-card-cell:active .acg-card { transform: translateX(1px); }

/* --------------------------------------------------------------------------
   3. 图区（横卡：左侧固定宽方块）
   --------------------------------------------------------------------------
   核心把图片写在 style="background:url(…) center/cover" 上，
   所以这里只用容器控制尺寸与圆角，不要覆盖 background-image。
   -------------------------------------------------------------------------- */
.acg-card .acg-thumb {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  align-self: center;
  aspect-ratio: 1 / 1;
  margin: 10px 0 10px 12px;
  border-radius: calc(var(--nv-radius-card) - 5px);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform var(--nv-dur-slow) var(--nv-ease-out);
}

/* --------------------------------------------------------------------------
   ★★ 图片未加载时的占位底色
   --------------------------------------------------------------------------
   需求：图片在时正常显示；图片加载中/失败时露出浅灰底；hover 不自爆。

   ★ 试过并否决的方案（都实测过）：
     1) ::before + z-index:-1
        hover 时卡片加了 transform → 创建新层叠上下文 →
        -1 被限制在卡片内 → 伪元素翻上来盖住图片（"移上去变白"）
     2) 上面再加 isolation:isolate → 伪元素直接盖住 background-image
     3) z-index:0 → 同样盖住图片

   ★ 最终方案：一行 !important，不动层叠
     内联的 background 简写会把 background-color 重置为 transparent，
     而【CSS 的 !important 优先级高于内联样式】，所以可以直接压过去。
     实测结论（对照实验见注释历史）：
       无 important → rgba(0,0,0,0)（透明）
       有 important → rgb(242,242,244) ✅ 且 background-image 照常显示
     → 不需要任何伪元素，不涉及 z-index，hover 的 transform 也不影响。
   -------------------------------------------------------------------------- */
.acg-card .acg-thumb {
  background-color: var(--nv-soft) !important;
}

[data-theme="dark"] .acg-card .acg-thumb {
  background-color: var(--nv-muted) !important;
}

/* --------------------------------------------------------------------------
   4. 文字区（横卡：中间弹性区 + 右侧价格面板）
   -------------------------------------------------------------------------- */
/* ==========================================================================
   ★★ 2026-10-14 用户要求：再降低卡片高度
   --------------------------------------------------------------------------
   原来卡片实测 110px 高，主要被缩略图撑起：
     .acg-thumb 88×88 + margin「上下各 10」 = 108px 有效高
     → 卡片只能跟到 110px（缩略图是"最高的那个元素"）

   降高的三个旋钮（按效果排序）：
     1. 缩略图 88 → 72（省 16px）  ← 主要因素
     2. 缩略图 margin 10/12 → 8/10（省 4px）
     3. .acg-body 上下 padding 14/12 → 11/10（省 5px，与缩略图取齐）

   改完有效高 ≈ 72 + 16 = 88px，卡片落在 90px 左右。
   ★ 72px 的图仍能看清内容，不牺牲可辨识度。
   ========================================================================== */
.acg-card .acg-thumb {
  flex: 0 0 64px;
  width: 64px;
  margin: 7px 0 7px 9px;
}

.acg-card .acg-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* ★ 顶部对齐（原来是 center，观感偏"飘"）。
     标题与标签上移贴近卡片上沿；底部留白由 padding 兜住。 */
  justify-content: flex-start;
  gap: 5px;
  padding: 9px 16px 9px;
  background-color: transparent;
}

.acg-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  order: 1;
}

.acg-card .goods-title {
  order: 0;
  margin: 0;
  /* ★ 收回第一行上方的多余行距：顶部对齐后，标题要贴住 padding 上沿 */
  padding-top: 0;
  font-size: var(--nv-fs-body);
  font-weight: var(--nv-weight-medium);
  line-height: 1.35;
  color: var(--nv-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--nv-dur-fast) var(--nv-ease-out);
}

/* 价格行：移到卡片右侧，做成独立浅灰面板
   ★ 核心把 .stat-row 放在 .acg-body 内部（无法移出 DOM），
     所以让 .acg-body 本身不参与排布，改用绝对定位把价格「钉」到右侧。
     这样既不改核心 DOM，又能得到横卡的右栏效果。 */
.acg-card .stat-row {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  /* ★ 2026-10-14 单行显示后需要更宽：
     价格(约 92px) + gap(10) + 按钮(约 76px) + 左右 padding(26) ≈ 204
     取 196 折中 —— 绝大多数价格是 2-3 位数，够用；
     超长价格由 flex 自动压缩（价格有 white-space:nowrap，会把面板撑开）。 */
  width: 196px;
  /* ★★ 2026-10-14 用户要求：价格与购买按钮【单行显示】（价格在前、按钮在后）。
     原来是 column 竖排（价格在上、按钮在下），面板要占两行的高度。
     → 改成 row + 居中对齐，两行并一行。
     这样卡片高度可以再降一档（面板不再是最高的元素）。 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  /* ★★ 必须显式把 margin 全部归零。
     核心生成的 HTML 是 <div class="stat-row mb-1">，
     .mb-1 带来 margin-bottom: .25rem（4px），
     表现为「价格面板下方露出一条白边」。
     我原来的 margin:0 简写虽然权重更高，但因为
     .mb-1 是单属性声明、且样式表顺序更靠后，实测 computed 值仍是 4px。
     → 这里用 !important 确保归零（只针对这一个属性，副作用可控）。 */
  margin: 0 !important;
  padding: 8px 14px 8px 12px;
  border-left: 1px solid rgba(var(--nv-border-rgb), calc(var(--nv-border-a) * 0.6));
  border-left: 1px solid color-mix(in srgb, var(--nv-border) 60%, transparent);
  background-color: var(--nv-soft);
  z-index: 1;
}

[data-theme="dark"] .acg-card .stat-row { background-color: var(--nv-muted); }

.acg-card .stat-row .price {
  display: flex;
  align-items: baseline;
  gap: 1px;
  color: var(--nv-price-promo);
  white-space: nowrap;
  font-family: var(--nv-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: var(--nv-weight-bold);
  line-height: 1;
  letter-spacing: -.02em;
}

.acg-card .stat-row .price .unit {
  font-size: var(--nv-fs-caption);
  font-weight: var(--nv-weight-bold);
}

/* 购买按钮：用伪元素画，不占核心 DOM */
.acg-card .stat-row::after {
  content: "购买";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding-inline: 14px;
  border-radius: var(--nv-radius-btn);
  background-image: var(--nv-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: var(--nv-weight-medium);
  white-space: nowrap;
}

/* 库存 / 已售：不展示（用户明确不需要） */
.acg-card .stat-bottom {
  display: none !important;
}

/* 给价格面板让出空间，避免标题被压到面板下面 */
.acg-card .acg-body { padding-right: 208px; }

/* 窄屏：图再缩小一档、价格面板收窄
   ★ 2026-10-14 同步降高：桌面已从 88→72，窄屏再小一档到 64，
     min-height 也跟着 88 → 80，保持"窄屏比桌面更紧凑"的关系。 */
@media (max-width: 640px) {
  .acg-card { min-height: 70px; }
  .acg-card .acg-thumb {
    flex-basis: 56px; width: 56px;
    margin: 7px 0 7px 7px;
  }
  /* ★ 2026-10-14 同步单行布局：面板原来 108px 且隐藏按钮，是为"竖排省空间"设计的。
     改成横排后，面板加宽到 148px 并【保留按钮】——
     手机上"价格 + 购买"单行反而比"只有价格"更完整。
     正文让位宽度同步调。 */
  .acg-card .acg-body { padding: 8px 10px; padding-right: 158px; gap: 4px; }
  .acg-card .stat-row {
    width: 148px;
    padding: 8px 10px;
    gap: 7px;
  }
  .acg-card .stat-row .price { font-size: 1.0625rem; }
  .acg-card .stat-row::after { height: 22px; padding-inline: 11px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   5. 售罄态 · 整卡降级（2026-10-15 重做）
   --------------------------------------------------------------------------
   ★ 改前的问题（用户原话：「似乎你只是对图片颜色做了不可见」）：
     售罄的唯一信号是 .acg-thumb 上压了一层 rgba(0,0,0,.38) 的黑色渐变 ——
     图片被糊黑，但**卡片容器本身和正常商品一模一样**
     （实测计算样式：背景 rgb(255,255,255)、边框同为 border-soft、opacity 1）。
     结果：图是黑的、框是白的，看起来像"图片加载失败"，而不像"卖完了"；
     而且用户明确要求**图片要看得见**。

   ★ 新方案：不动图片，改容器。三层信号叠加，任一单独用都不够：
       ① 底色 —— 白底 → --nv-soft（浅灰），整块卡片退到背景层
       ② 边框 —— border-soft → 加重的 --nv-border，轮廓收紧
       ③ 阴影 —— 去掉浮起阴影，卡片"贴回"页面（不再有可点的悬浮感）
     图片保持原样（只加极轻的 saturate 降饱和，保留辨识度）。
     数字/价格降到 --nv-text-faint，进一步弱化"可交易"的暗示。

   ★ 不可点击由核心保证：售罄时 href 被换成 javascript:void(0)，
     上面 .item-card-cell[href^="javascript"] 已去掉 hover 上浮 + 光标改 default。
   -------------------------------------------------------------------------- */

.acg-card.soldout {
  background-color: var(--nv-soft);
  border-color: var(--nv-border);
  /* 取消浮起阴影：售罄卡不参与"可点"的视觉暗示 */
  box-shadow: none;
}

/* 售罄卡不需要左侧亮条（那是 hover 态的可点提示） */
.acg-card.soldout::before { opacity: 0; }

/* 图片保持可见，只轻微降饱和 —— 让"这是同一件商品、只是卖完了"更直观。
   ------------------------------------------------------------------
   ★★ 这里有一个坑，差点把图片整个弄没：
     缩略图**不是 <img>，而是 .acg-thumb 上的 CSS background**
     （核心写 inline style：`background: url(...) center/cover no-repeat`）。
     图片本身就在 background-image 里。

     旧版为了压暗，曾在 CSS 里给 .acg-thumb 加一条 background-image
     （黑渐变叠加）。那层现在已经**整条删除**了，所以这里
     ★ 绝对不能再写 `background-image: none` —— 那会把真正的商品图一起清掉，
       表现为"图片全白"，看起来像加载失败（实测踩到过）。

     → 只动 filter（滤镜不影响 background 的绘制内容）和 background-color。 */
.acg-card.soldout .acg-thumb {
  /* 占位底色：图加载慢/失败时露出的是灰底，而不是白块 */
  background-color: var(--nv-soft);
  filter: saturate(.35) brightness(.97);
}

/* 售罄卡里的文字层级整体下沉：标题不用主色、价格退到 faint */
.acg-card.soldout .goods-title {
  color: var(--nv-text-secondary);
}
.acg-card.soldout .price {
  color: var(--nv-text-faint);
}

/* ★ 售罄卡右侧的「购买」按钮（.stat-row::after 伪元素，核心 DOM 里没有）
   —— 渲染成中性底 + 中性字，去掉品牌渐变。
   否则一张灰掉的卡片上还亮着一块蓝按钮，看着像"还能买"。
   特异性 (0,2,1) vs 原规则 (0,2,0)，写在后面，稳定胜出。 */
.acg-card.soldout .stat-row::after {
  content: "已售罄";
  background-image: none;
  background-color: var(--nv-muted);
  color: var(--nv-text-muted);
}

/* 同时把右侧价格面板的底色也压灰一档，避免它在灰卡上"亮出来" */
.acg-card.soldout .stat-row {
  background-color: var(--nv-muted);
}

/* --------------------------------------------------------------------------
   5b. 售罄角标
   核心用 .soldout-ribbon，这里改成居中徽标（与卡片遮罩配合）
   -------------------------------------------------------------------------- */
/* ★ 这里原本有一条 .acg-card .acg-thumb::before { content:""; }
   用来给售罄图区压暗。但 ::before 现在被用于铺【占位底色】，
   两者冲突。售罄压暗已改为上面的「整卡降级」，不再压图。 */

.acg-card .soldout-ribbon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: var(--nv-space-1) var(--nv-space-3);
  border-radius: var(--nv-radius-chip);
  background-color: var(--nv-danger-solid);
  color: #fff;
  font-size: var(--nv-fs-micro);
  font-weight: var(--nv-weight-bold);
  letter-spacing: .06em;
  box-shadow: var(--nv-shadow-2);
}

/* --------------------------------------------------------------------------
   6. 徽章与标签
   核心生成：.acg-tag--{color} 与 .badge-soft--{type}
   ★ 彩色徽章的文字必须走 -ink 类保证 AA，不能用 -solid
   -------------------------------------------------------------------------- */
.acg-card .badge-soft {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--nv-space-2);
  border-radius: var(--nv-radius-pill);
  font-size: var(--nv-fs-micro);
  font-weight: var(--nv-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.acg-card .badge-soft-primary {
  background-color: var(--nv-brand-soft);
  color: var(--nv-brand-ink);
}

/* --------------------------------------------------------------------------
   「推荐」徽章 —— 单独走金色 + 皇冠图标
   --------------------------------------------------------------------------
   ★ 核心 index.js 生成的类名固定是 .badge-soft-primary（改不了，那是上游文件）。
     所以这里用属性选择器 .badge-soft-primary[data-nv-rec] 精确命中，
     ★ 不能只写 .badge-soft-primary —— 那会把别处同样用 primary 的徽章一起染金。

   ★ 视觉层级：推荐是「荣誉标识」，要与"自动发货"这类中性徽章拉开距离。
     手段有三层，任一单独用都不够：
       ① 颜色 —— 金（暖）vs 蓝绿灰（冷中性）
       ② 图标 —— 皇冠，形状本身就能被扫读
       ③ 边框 —— 给个同色描边，让它从"色块"变成"徽章"
     再加 font-weight 600 压过相邻徽章的 500，形成权重差。
   -------------------------------------------------------------------------- */
.acg-card .badge-soft-primary[data-nv-rec] {
  background-color: var(--nv-gold-soft);
  color: var(--nv-gold-ink);
  border: 1px solid var(--nv-gold-border);
  font-weight: var(--nv-weight-bold, 700);
  /* 加了 1px 边框会比邻座胖 2px，padding 减 1 让高度视觉一致 */
  padding: 1px calc(var(--nv-space-2) - 1px);
  gap: 3px;
}

/* 皇冠图标：用字形放大代替图片，跟着字号走、不吃请求 */
.acg-card .badge-soft-primary[data-nv-rec] .nv-crown {
  font-size: 1.05em;
  line-height: 1;
  /* 让皇冠比文字再饱和一点，金得更有"金属感" */
  color: var(--nv-gold);
}
.acg-card .badge-soft-success {
  background-color: var(--nv-success-soft);
  color: var(--nv-success-ink);
}
.acg-card .badge-soft-warning {
  background-color: var(--nv-warning-soft);
  color: var(--nv-warning-ink);
}
.acg-card .badge-soft-danger {
  background-color: var(--nv-danger-soft);
  color: var(--nv-danger-ink);
}
.acg-card .badge-soft-info {
  background-color: var(--nv-info-soft);
  color: var(--nv-info-ink);
}

.acg-card .acg-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--nv-space-2);
  border-radius: var(--nv-radius-pill);
  font-size: var(--nv-fs-micro);
  font-weight: var(--nv-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.acg-card .acg-tag--red {
  background-color: var(--nv-danger-soft);
  color: var(--nv-danger-ink);
}
.acg-card .acg-tag--green {
  background-color: var(--nv-success-soft);
  color: var(--nv-success-ink);
}
.acg-card .acg-tag--blue {
  background-color: var(--nv-info-soft);
  color: var(--nv-info-ink);
}
.acg-card .acg-tag--orange,
.acg-card .acg-tag--amber {
  background-color: var(--nv-warning-soft);
  color: var(--nv-warning-ink);
}
.acg-card .acg-tag--purple {
  background-color: rgba(124, 58, 237, .12);
  color: #5b21b6;
}
[data-theme="dark"] .acg-card .acg-tag--purple {
  background-color: rgba(167, 139, 250, .20);
  color: #c4b5fd;
}

/* --------------------------------------------------------------------------
   7. 分类胶囊计数
   -------------------------------------------------------------------------- */
.nv-cat__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--nv-radius-pill);
  background-color: var(--nv-soft);
  font-size: var(--nv-fs-micro);
  color: var(--nv-text-muted);
}

/* 同 shop.css 的说明：选中态认 .is-active（主题）与 .is-primary（核心）两套类名 */
.nv-cat.is-active .nv-cat__count,
.nv-cat.is-primary .nv-cat__count {
  background-color: rgba(255, 255, 255, .24);
  color: #fff;
}

.nv-cat:hover:not(.is-active):not(.is-primary) .nv-cat__count {
  background-color: var(--nv-brand-soft);
  color: var(--nv-brand-ink);
}

/* --------------------------------------------------------------------------
   8. 搜索框（页头内）
   -------------------------------------------------------------------------- */
.nv-head__search .nv-input { min-height: 40px; }
/* 骨架屏撑满整行，避免半格占位 */
.nv-grid > .nv-skeleton {
  grid-column: 1 / -1;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nv-fs-caption);
  color: var(--nv-text-muted);
}

/* ★ 2026-10-14 用户要求：把「售罄」从卡片正中的角标迁到标签行
   （DOM 迁移由 theme.js 的 relocateSoldoutBadges() 完成，
    这里负责迁移后长什么样）。
   ★ 必须覆盖上面那条 .acg-card .soldout-ribbon 的 absolute 定位，
     所以选择器带上 .is-inline 提高特异性，且写在后面。 */
.acg-card .soldout-ribbon.is-inline {
  position: static;              /* 从绝对居中回到文档流 */
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;

  display: inline-flex;
  align-items: center;
  padding: 2px var(--nv-space-2);
  border-radius: var(--nv-radius-pill);
  background-color: var(--nv-danger-soft, #fdecef);
  color: var(--nv-danger-ink, #d92d4a);
  font-size: var(--nv-fs-micro);
  font-weight: var(--nv-weight-bold);
  letter-spacing: .04em;
  line-height: 1.5;
  box-shadow: none;
  white-space: nowrap;
}

/* 标签行本身允许换行（原本可能 nowrap） */
.acg-card .acg-body .tags {
  flex-wrap: wrap;
  gap: 4px;
}