/* ============================================================
* 组件样式（分类图标、参考价格、探寻低价、公告、水印、后台）
* ------------------------------------------------------------
* 依赖 style.css 里的 :root 变量（--brand / --ink / --line 等）。
* ============================================================ */
/* ---------------- 分类图标网格 ---------------- */
.cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 9px;
margin-top: 14px;
}
.cat-card {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 8px 11px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-s);
cursor: pointer;
font: inherit;
text-align: left;
transition: border-color .16s, box-shadow .16s, transform .16s;
}
.cat-card:hover {
border-color: var(--chip, var(--brand));
box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
transform: translateY(-1px);
}
.cat-card.active {
border-color: var(--chip, var(--brand));
background: color-mix(in srgb, var(--chip, var(--brand)) 7%, #fff);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip, var(--brand)) 22%, transparent);
}
/* 分类名固定单行，避免窄卡片里折成两行显得凌乱 */
.cat-card .cat-name {
flex: 1;
min-width: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 数量徽章固定不收缩，数字再大也不会撑破卡片 */
.cat-card .cat-count {
flex: 0 0 auto;
font-size: 11.5px;
font-variant-numeric: tabular-nums;
color: var(--muted);
background: var(--bg);
border-radius: 999px;
padding: 2px 8px;
}
.cat-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 9px;
color: var(--chip, var(--brand));
background: color-mix(in srgb, var(--chip, var(--brand)) 12%, #fff);
border: 1px solid color-mix(in srgb, var(--chip, var(--brand)) 20%, #fff);
}
.cat-chip svg { display: block; }
.cat-card .cat-name + .cat-count { margin-left: auto; }
/* ---------------- 首页药品卡片（精简版） ----------------
* 只展示：图片 / 参考价 / 药品名称 / 通用名称 / 适应症前 15 字
* 图片统一 1:1 裁切 → 所有卡片图片尺寸完全一致。 */
.card-thumb {
position: relative;
aspect-ratio: 1 / 1;
background: #f8fbfa;
overflow: hidden;
}
/* 水印脚本会把 ![]()
换成