/* ============================================================
文件：css/cat-drill.css
说明：设备类型页「品牌 › 产品 › 系列」三分级左侧导航 + 右侧单系列规格面板
      仅作用于 body.cat-drill（由 _archive/fix28-cat-drill.js 挂载到设备类型页）
      ⛔ 不修改 css/style.css / css/category-page.css
版本：1.1（2026-09-23）
  · v1.0 首版：左三分级树 + 右侧只渲染当前系列。
  · v1.1 修「二级树点不开下拉」的**错误暗示**：把叶子型二级节点（无下级系列，占 88%）
    的箭头图标改为圆点 .drill-leaf-dot，与可展开的 .drill-caret 明确区分；
    并给 .drill-product-link.is-current 加左侧 inset 高亮条，让「选中」一目了然。

设计意图（整页截图走查）：
  设备类型页把「系列卡 + 完整型号清单」两段并列，多品牌合并页（如
  dry-bath-pcr-centrifuge 78KB / 551 行表格）页长近 6000px，靠滚动翻找型号极累。
  改为：左侧三分级树（品牌 › 产品 › 系列）＋ 右侧只渲染当前系列的规格表，
  点品牌展开产品、点产品展开系列、点系列切换右侧面板 —— 页长收敛到一屏。
  ⚠️ 无 JS 时（.drill-ready 未加上）所有面板平铺显示，等同改造前，不丢内容。
  ⚠️ 两类别名并列：**有下级系列**的产品 = 箭头（可展开）；**无下级系列**的产品 = 圆点（终点项，点它直接换右侧表格）。
============================================================ */

body.cat-drill .cat-drill {
    padding: 54px 0 72px;
    background: var(--color-gray-100, #f5f8fb);
}

body.cat-drill .drill-wrap {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

/* ---------- 左侧三级导航 ---------- */
body.cat-drill .drill-nav {
    position: sticky;
    top: calc(var(--nav-height, 72px) + 16px);
    max-height: calc(100vh - var(--nav-height, 72px) - 34px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-gray-200, #e9ecef);
    border-radius: var(--radius-card, 16px);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(10, 38, 71, .05));
    overflow: hidden;
}

body.cat-drill .drill-nav-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--color-gray-200, #e9ecef);
    background: #fbfcfe;
}

body.cat-drill .drill-nav-title {
    display: block;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-primary, #0a2647);
}

body.cat-drill .drill-nav-sub {
    display: block;
    margin-top: 3px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: #6b7684;
}

body.cat-drill .drill-nav-scroll {
    overflow: auto;
    padding: 6px 0 10px;
    overscroll-behavior: contain;
}

body.cat-drill .drill-brand-list,
body.cat-drill .drill-products,
body.cat-drill .drill-series {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* L1 品牌 */
body.cat-drill .drill-brand-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-primary, #0a2647);
    text-align: left;
    cursor: pointer;
    transition: var(--transition, 0.3s ease);
}

body.cat-drill .drill-brand-btn:hover { background: #f2f7fd; }
body.cat-drill .drill-brand.is-open > .drill-brand-btn { background: #eaf2fb; }

body.cat-drill .drill-caret {
    flex: 0 0 auto;
    width: 11px;
    font-size: 0.66rem;
    color: var(--color-accent, #0066b3);
    transition: transform var(--transition, 0.3s ease);
}

body.cat-drill .drill-brand.is-open > .drill-brand-btn .drill-caret { transform: rotate(90deg); }

body.cat-drill .drill-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: #5f6b7a;
}

body.cat-drill .drill-brand-desc {
    padding: 0 16px 9px 35px;
    font-size: 0.74rem;
    line-height: 1.55;
    color: #6b7684;
}

body.cat-drill .drill-brand:not(.is-open) > .drill-products { display: none; }

/* L2 产品 */
body.cat-drill .drill-product-btn,
body.cat-drill .drill-product-link {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 9px 16px 9px 30px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    color: #26313d;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition, 0.3s ease);
}

body.cat-drill .drill-product-btn:hover,
body.cat-drill .drill-product-link:hover { background: #f4f8fc; color: var(--color-accent, #0066b3); }

body.cat-drill .drill-product-btn .drill-caret { color: #8494a4; font-size: 0.6rem; width: 10px; }
body.cat-drill .drill-product.is-open > .drill-product-btn .drill-caret { transform: rotate(90deg); color: var(--color-accent, #0066b3); }
body.cat-drill .drill-product.is-open > .drill-product-btn { color: var(--color-primary, #0a2647); }
body.cat-drill .drill-product:not(.is-open) > .drill-series { display: none; }

/* 叶子型二级节点：无下级系列，用圆点表示「终点项」（⛔别再用箭头，会被误读为可展开） */
body.cat-drill .drill-leaf-dot {
    flex: 0 0 auto;
    position: relative;
    width: 10px;
    height: 10px;
}

body.cat-drill .drill-leaf-dot::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: #aab6c2;
    transition: var(--transition, 0.3s ease);
}

body.cat-drill .drill-product-link:hover .drill-leaf-dot::before { background: var(--color-accent, #0066b3); }

body.cat-drill .drill-product-link.is-current {
    color: var(--color-accent, #0066b3);
    background: #f2f7fd;
    box-shadow: inset 3px 0 0 var(--color-accent, #0066b3);
    font-weight: 700;
}

body.cat-drill .drill-product-link.is-current .drill-leaf-dot::before { background: var(--color-accent, #0066b3); }

/* L3 系列 */
body.cat-drill .drill-series { padding: 2px 0 6px; }

body.cat-drill .drill-item {
    display: block;
    padding: 7px 14px 7px 47px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #4a5663;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: var(--transition, 0.3s ease);
}

body.cat-drill .drill-item:hover { color: var(--color-accent, #0066b3); background: #f4f8fc; }

body.cat-drill .drill-item.is-current {
    color: #00518f;
    background: #eaf2fb;
    border-left-color: var(--color-accent, #0066b3);
    font-weight: 600;
}

/* 无系列、仅可询价的品牌节点 */
body.cat-drill .drill-brand-btn[disabled] { color: #8a95a2; cursor: default; }
body.cat-drill .drill-brand-btn[disabled]:hover { background: none; }
body.cat-drill .drill-brand-btn[disabled] .drill-caret { color: #b3bcc6; }

/* ---------- 右侧规格面板 ---------- */
body.cat-drill .drill-main { min-width: 0; }

body.cat-drill .drill-panel {
    display: block;
    background: #fff;
    border: 1px solid var(--color-gray-200, #e9ecef);
    border-radius: var(--radius-card, 16px);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(10, 38, 71, .05));
    padding: 22px 24px 26px;
    scroll-margin-top: calc(var(--nav-height, 72px) + 20px);
}

body.cat-drill.drill-ready .drill-panel { display: none; }
body.cat-drill.drill-ready .drill-panel.is-active { display: block; }

body.cat-drill .drill-panel-kicker {
    display: block;
    margin-bottom: 7px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--color-accent, #0066b3);
}

body.cat-drill .drill-panel-title {
    margin: 0 0 7px;
    font-size: 1.28rem;
    line-height: 1.35;
    color: var(--color-primary, #0a2647);
}

body.cat-drill .drill-panel-meta {
    margin: 0 0 16px;
    font-size: 0.82rem;
    color: #5f6b7a;
}

body.cat-drill .drill-panel .spec-table { margin: 0; }

body.cat-drill .drill-note {
    margin: 16px 0 0;
    padding: 12px 16px;
    font-size: 0.84rem;
    line-height: 1.6;
    color: #4a5663;
    background: #fbfcfe;
    border: 1px solid var(--color-gray-200, #e9ecef);
    border-radius: 12px;
}

body.cat-drill .drill-note:first-child { margin-top: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    body.cat-drill .drill-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    body.cat-drill .drill-nav {
        position: static;
        max-height: none;
    }
    body.cat-drill .drill-nav-scroll { max-height: 320px; }
}

@media (max-width: 768px) {
    body.cat-drill .cat-drill { padding: 32px 0 48px; }
    body.cat-drill .drill-panel { padding: 16px 14px 20px; }
    body.cat-drill .drill-panel-title { font-size: 1.1rem; }
    body.cat-drill .drill-item { padding-left: 42px; }
    body.cat-drill .drill-nav-scroll { max-height: 260px; }
}