/* 目录层（/instrument-sourcing/ 的 #catalogue 一节）。
   颜色与圆角全部继承 core-pages.css 的变量；这里只写目录特有的部件。
   跟问卷同一个模子：页面上只有说明加「打开目录」按钮。
   没有 JS：.cat-overlay 就是顺排在按钮下面的完整目录，13 款全显示，顶栏隐藏。
   有 JS（.cat-js）：目录收起，点按钮或命中锚点时整屏展开（.cat-open）。 */

.cat-open-row { margin: 40px 0 0; }

/* ── 选琴页的间距修正（本文件只在选琴页加载）──
   表格（.detail-list）后面的小标题与正文原先上下都是 0 边距，
   整块贴死在表格上，读起来很挤。给它一个像样的呼吸。
   .section-intro 的下边距也是 0，后面紧跟表格或按钮时同样要补。 */
.section-subhead {
  margin: 46px 0 16px;
  font-size: 1.32rem;
  line-height: 1.35;
}
.section-intro + .detail-list { margin-top: 28px; }

/* 结束区有两个按钮（别的页面只有一个），给它们一个不破坏 .cta-layout 的容器 */
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.cat-static-head { margin-bottom: 34px; }
.cat-open .cat-static-head { display: none; }

/* ── 收起 / 展开 ── */
.cat-bar { display: none; }
.cat-js:not(.cat-open) { display: none; }
.cat-overlay.cat-open {
  position: fixed;
  inset: 0;
  z-index: 550;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.cat-open .cat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.cat-bar-name { font-size: 0.95rem; color: var(--text-secondary); letter-spacing: 0.03em; }
.cat-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.cat-close:hover { border-color: var(--accent); }
.cat-open .cat-scroll { flex: 1; overflow-y: auto; padding: 26px 0 70px; }
body.cat-lock { overflow: hidden; }

.cat-layout { margin-top: 28px; }
.cat-open .cat-layout { margin-top: 0; }

/* ── 左栏 ── */
.cat-brand {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cat-rail ul { list-style: none; margin: 0 0 20px; padding: 0; }
.cat-rail li { margin: 0 0 4px; }
.cat-link {
  display: block;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.4;
}
.cat-link:hover { color: var(--text); background: var(--bg-elevated); }
.cat-link[aria-current] {
  color: var(--text);
  background: var(--bg-card);
  border-color: var(--border);
  font-weight: 600;
}
.cat-kind { font-size: 0.75em; color: var(--text-secondary); }

/* ── 型号面板 ── */
.cat-model {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 24px;
  margin-bottom: 24px;
}
.cat-js .cat-model { display: none; margin-bottom: 0; }
.cat-js .cat-model.active { display: block; }

.cat-model-head h3 { margin: 0; font-size: 1.45rem; }
.cat-meta { margin: 6px 0 0; color: var(--text-secondary); font-size: 0.95rem; }

.cat-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  margin-top: 20px;
}
.cat-figure { margin: 0; }
.cat-photo {
  width: 100%;
  max-width: 230px;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.cat-caption { margin-top: 10px; color: var(--text-secondary); font-size: 0.9rem; }

.cat-spec { margin: 0 0 16px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; }
.cat-copy p { margin: 0 0 18px; line-height: 1.8; }

/* 配色介绍：有 JS 时只显示选中的那段；没有 JS 时全部平铺（各带名字前缀，读着像一份清单） */
.cat-blurb {
  margin: 0 0 14px;
  padding-left: 14px;
  /* 用 --accent 本色，不用 --accent-dim：后者只有 12% 透明度，2px 的竖线几乎看不见 */
  border-left: 2px solid var(--accent);
  color: var(--text-secondary);
  line-height: 1.75;
}
.cat-blurb strong { color: var(--text); }
.cat-js .cat-blurb { display: none; }
.cat-js .cat-blurb.active { display: block; margin-bottom: 20px; }

.cat-cws-label {
  margin: 0 0 10px;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.cat-cws {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
}
.cat-swatch {
  display: block;
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-align: center;
  text-decoration: none;
  color: var(--text-secondary);
}
.cat-swatch img {
  width: 100%;
  max-width: 58px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
}
.cat-swatch:hover { border-color: var(--accent-dim); color: var(--text); }
.cat-swatch[aria-current] { border-color: var(--accent); color: var(--text); }
.cat-cw-name { display: block; font-size: 0.78rem; line-height: 1.35; }
.cat-cw-price { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--text-secondary); }

/* ── 桌面：左栏 + 右侧面板 ── */
@media (min-width: 900px) {
  .cat-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .cat-rail { position: sticky; top: 88px; }
  /* 展开态里滚动容器是 .cat-scroll，左栏贴它的顶 */
  .cat-open .cat-rail { top: 0; }
}

/* ── 手机：左栏变成顶部的横滑型号条 ── */
@media (max-width: 899px) {
  .cat-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-bottom: 16px;
  }
  .cat-open .cat-rail {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg);
    padding-top: 4px;
  }
  .cat-brand { display: none; }
  .cat-rail ul { display: flex; gap: 8px; margin: 0; }
  .cat-rail li { margin: 0; }
  .cat-link { white-space: nowrap; border-color: var(--border); }
  .cat-body { display: block; }
  .cat-figure { max-width: 200px; margin: 0 auto 20px; }
  .cat-photo { max-width: 200px; }
}