/* catalog.css — 仅 /products/ 目录页新增的补充样式。
   全部类名使用 .cat- 前缀，避免与 /_astro/ 全站样式冲突。 */

/* ---------- 区块与页头 ---------- */
.cat-hero { padding-block: 8px 12px; }
.cat-hero__title { margin: 12px 0 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.cat-hero__lead { margin: 14px 0 0; max-width: 46rem; font-size: 1.0625rem; line-height: 1.75; color: var(--text-3, #475261); }
.cat-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--muted, #8a94a3); }

.cat-section { padding-block: 56px; }
.cat-section--first { padding-top: 24px; }
.cat-section-head { max-width: 46rem; margin-bottom: 28px; }
.cat-eyebrow { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--primary-ink, #2e63ff); }
.cat-h2 { margin: 8px 0 0; font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; }
.cat-h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.cat-lead { margin: 10px 0 0; font-size: .9375rem; line-height: 1.7; color: var(--text-3, #475261); }

/* ---------- 产品网格 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1020px) { .cat-grid, .cat-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cat-grid, .cat-grid--2 { grid-template-columns: 1fr; } }

/* ---------- 产品卡 ---------- */
.cat-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border, #e3e8ef); border-radius: 18px; background: var(--surface, #fff); transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
.cat-card:hover { border-color: var(--border-strong, #c6cfdb); box-shadow: 0 14px 34px -18px rgba(11, 15, 20, .18); transform: translateY(-3px); }
.cat-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 20px 22px 22px; }
.cat-card__name { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.4; }
.cat-card__price { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: #b23b2e; }
.cat-card__price small { font-size: .75rem; font-weight: 500; color: var(--muted, #8a94a3); }
.cat-card__status { display: inline-flex; align-items: center; height: 22px; padding-inline: 8px; border-radius: 6px; background: #eef4ff; color: #2e63ff; font-size: .75rem; font-weight: 500; white-space: nowrap; width: fit-content; }
.cat-card__noimg { background: #fbf2ec; color: #9a6a2f; }
.cat-card__tagline { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--text-3, #475261); }
.cat-card__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cat-card__specs li { font-size: .75rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border, #e3e8ef); color: var(--n-700, #3a4453); background: #f8fafc; }
.cat-card__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.cat-link-more { font-size: .875rem; font-weight: 500; color: var(--primary-ink, #2e63ff); text-decoration: none; }
.cat-link-more:hover { text-decoration: underline; }
.cat-link-official { font-size: .8125rem; color: var(--muted, #8a94a3); text-decoration: none; }
.cat-link-official:hover { color: var(--n-800, #232b38); text-decoration: underline; }

/* ---------- 图片卡（正方形浅色底 contain） ---------- */
.cat-media { display: block; margin: 14px 14px 0; }
.cat-media__frame { aspect-ratio: 1 / 1; width: 100%; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border, #e3e8ef); border-radius: 12px; background: linear-gradient(168deg, #fbfcfd, #f3f5f8 58%, #eef1f5); }
.cat-media__frame img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.cat-media__frame--detail { aspect-ratio: 16 / 9; }
.cat-media__credit { margin: 8px 2px 0; font-size: .6875rem; line-height: 1.5; color: var(--muted, #8a94a3); }

/* ---------- 无图占位卡（诚实声明） ---------- */
.cat-ph { aspect-ratio: 1 / 1; width: 100%; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--n-300, #cbd3dd); border-radius: 12px; background: linear-gradient(168deg, #fbfcfd, #f3f5f8 58%, #eef1f5); }
.cat-ph__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px; text-align: center; }
.cat-ph__inner svg { width: 52px; height: auto; color: var(--n-300, #cbd3dd); }
.cat-ph__label { margin: 0; font-size: .875rem; font-weight: 600; color: var(--n-600, #55606f); }
.cat-ph__note { margin: 0; font-size: .75rem; line-height: 1.6; color: var(--muted, #8a94a3); }

/* ---------- 参数表（zebra） ---------- */
.cat-specwrap { overflow-x: auto; border: 1px solid var(--border, #e3e8ef); border-radius: 14px; background: var(--surface, #fff); }
.cat-spec { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.6; }
.cat-spec caption { text-align: left; padding: 14px 18px; font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.cat-spec th, .cat-spec td { padding: 11px 18px; vertical-align: top; border-top: 1px solid var(--border, #e3e8ef); text-align: left; }
.cat-spec tbody tr:nth-child(even) { background: #f7f9fc; }
.cat-spec th { width: 9.5em; font-weight: 500; color: var(--muted, #8a94a3); white-space: nowrap; }
.cat-spec td { color: var(--n-800, #232b38); }

/* ---------- 详情（图文 + 参数表 + 细节图） ---------- */
.cat-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; border: 1px solid var(--border, #e3e8ef); border-radius: 20px; background: var(--surface, #fff); padding: 26px; }
.cat-detail + .cat-detail { margin-top: 28px; }
@media (max-width: 900px) { .cat-detail { grid-template-columns: 1fr; } }
.cat-detail--rev .cat-detail__media { order: 2; }
@media (max-width: 900px) { .cat-detail--rev .cat-detail__media { order: 0; } }
.cat-detail__media { position: sticky; top: 110px; }
@media (max-width: 900px) { .cat-detail__media { position: static; } }
.cat-detail__body { min-width: 0; }
.cat-detail__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.cat-detail__title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.cat-detail__price { font-size: 1.125rem; font-weight: 700; color: #b23b2e; }
.cat-detail__status { margin: 0 0 6px; font-size: .8125rem; color: var(--muted, #8a94a3); }
.cat-detail__features { margin: 10px 0 18px; font-size: .9375rem; line-height: 1.7; color: var(--text-3, #475261); }
.cat-detail__detail-title { margin: 22px 0 10px; font-size: 1rem; font-weight: 650; }
.cat-detail__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- 标签 / 提示 ---------- */
.cat-pill { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; background: #eef4ff; color: #2e63ff; }
.cat-pill--warn { background: #fbf2ec; color: #9a6a2f; }

.cat-note { margin: 18px 0 0; padding: 14px 18px; border: 1px dashed var(--n-300, #cbd3dd); border-radius: 12px; font-size: .8125rem; line-height: 1.7; color: var(--muted, #8a94a3); background: #fbfcfd; }

/* ---------- 历史型号一行列表 ---------- */
.cat-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cat-history li { display: flex; gap: 10px; align-items: baseline; font-size: .875rem; line-height: 1.6; color: var(--text-3, #475261); }
.cat-history li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--n-300, #cbd3dd); transform: translateY(-1px); }

/* ---------- 分组锚点导航 ---------- */
.cat-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.cat-toc a { display: inline-flex; align-items: center; height: 34px; padding-inline: 14px; border: 1px solid var(--border, #e3e8ef); border-radius: 999px; font-size: .8125rem; font-weight: 500; color: var(--n-800, #232b38); text-decoration: none; background: var(--surface, #fff); transition: border-color .2s ease, background .2s ease; }
.cat-toc a:hover { border-color: var(--primary-ink, #2e63ff); background: #f6f9ff; }

.hero__prod{position:absolute;left:50%;top:50%;width:min(58%,360px);height:auto;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 22px 34px rgba(11,15,20,.35));border-radius:24px;z-index:2}
.pcard__imgwrap{overflow:hidden;border-radius:12px;background:#f5f7fa;border:1px solid #e6e9ef}