/* ============================================================
文件：category-page.css
说明：品类 / 产品线入口页版式升级（仅作用于 body.cat-page）
      由 _archive/upgrade-category-pages.js 挂载到 86 个
      category-hero 系页面
版本：1.0（2026-09-22）

改造动机（整页截图走查）：
  1. 区块标题一律「居中标签 + 居中 h2 + 居中副标题」，同一页连排
     多个区块时（equipment.html 有 8 个 subcategories 区块）每屏
     长得一模一样，页长近 6000px 却毫无节奏；
  2. 卡片居中排布、无边框层次，八面卡片墙读起来是同一张图；
  3. 长页没有任何页内导航，用户只能一路滚。
本文件不改动任何文案，只调整排布与视觉。
============================================================ */

/* ------------------------------------------------------------
1. 区块：交替底色形成节奏（equipment 等连排页面）
------------------------------------------------------------ */
body.cat-page .subcategories {
    /* 多个页面在 section 上写了 inline padding，需 !important 才能统一节奏 */
    padding: 64px 0 !important;
}
body.cat-page .subcategories.alt {
    background: #fafbfc;
}
/* 末尾 subcategories 为 alt（灰底）时，紧跟的优势段默认也是灰底 → 会两灰相邻；
   补丁脚本会给它加 .plain 拉回白底，保住分章节奏 */
body.cat-page .advantages.plain {
    background: var(--color-white);
}

/* ------------------------------------------------------------
2. 区块标题：居中堆叠 → 左对齐编辑式（细分割线 + 品牌色短线）
   统一作用于本页所有 .section-header（subcategories / advantages /
   model-list 等），避免同页一半左对齐一半居中造成割裂
------------------------------------------------------------ */
body.cat-page .section-header {
    position: relative;
    text-align: left;
    margin-bottom: 36px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-gray-200);
}
body.cat-page .section-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 2px;
    background: var(--color-accent);
}
body.cat-page .section-header .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0 0 0 10px;
    border-radius: 0;
    border-left: 3px solid var(--color-accent);
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1.4;
}
body.cat-page .section-header h2 {
    font-size: 1.8rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
body.cat-page .section-header p {
    max-width: 680px;
    margin: 10px 0 0;
    font-size: 1rem;
    line-height: 1.75;
}

/* ------------------------------------------------------------
3. 卡片：同款居中卡 → 左对齐 + 顶部品牌细线 + 底部状态/动作分行
------------------------------------------------------------ */
body.cat-page .subcategory-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--color-white);
    padding: 24px 22px 22px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
body.cat-page .subcategory-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), #4facfe);
    transform: scaleX(0.22);
    transform-origin: left;
    transition: transform var(--transition);
}
body.cat-page .subcategory-card:hover::before {
    transform: scaleX(1);
}
body.cat-page .subcategory-card:hover {
    border-color: rgba(0, 102, 179, 0.35);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
body.cat-page .subcategory-card h3,
body.cat-page .subcategory-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}
body.cat-page .subcategory-card .sub-desc {
    flex: 1 1 auto;
    font-size: 0.87rem;
    line-height: 1.7;
    margin-bottom: 18px;
}
body.cat-page .subcategory-card .badge-status {
    align-self: flex-start;
    margin-top: auto;
}
body.cat-page .subcategory-card .arrow-hint {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 12px;
    align-self: flex-end;
    font-size: 0.82rem;
}

/* ------------------------------------------------------------
4. 页内导航（仅区块数 ≥3 的长页注入）
------------------------------------------------------------ */
body.cat-page .cat-subnav {
    position: sticky;
    top: var(--nav-height);
    z-index: 8;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-gray-200);
}
body.cat-page .cat-subnav .container {
    display: flex;
    gap: 6px;
    padding: 10px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.cat-page .cat-subnav .container::-webkit-scrollbar {
    display: none;
}
body.cat-page .cat-subnav a {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-gray-600);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
body.cat-page .cat-subnav a:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

/* 锚点跳转时避开固定导航 + 页内导航条 */
body.cat-page section[id^="sec-"] {
    scroll-margin-top: calc(var(--nav-height) + 58px);
}

/* ------------------------------------------------------------
5. 窄屏
------------------------------------------------------------ */
@media (max-width: 1024px) {
    body.cat-page .subcategories {
        padding: 52px 0;
    }
}
@media (max-width: 768px) {
    body.cat-page .subcategories {
        padding: 44px 0;
    }
    body.cat-page .subcategories .section-header {
        margin-bottom: 26px;
        padding-bottom: 14px;
    }
    body.cat-page .subcategories .section-header h2 {
        font-size: 1.5rem;
    }
    body.cat-page .subcategory-card {
        padding: 20px 18px 18px;
    }
    body.cat-page .subcategory-card .arrow-hint {
        right: 18px;
        bottom: 17px;
    }
}

/* ==========================================================================
   S7 分类页卡片样式收敛 —— 第 111 轮追加块（纯 CSS，结构零改动）
   说明：.advantage-item 等卡片样式定义在 style.css（共享类，无 !important），
         故用更高特异性 .cat-page 前缀覆盖即可，无需改任何页面。
   改动：圆角统一到本站 3px 尺度、数字等宽对齐、图标与文字节奏收紧、悬停加发丝阴影。
   ⛔ 回退：整块删除。
   ========================================================================== */

.cat-page .advantage-item {
    border-radius: 3px;
    padding: 22px 18px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cat-page .advantage-item:hover {
    box-shadow: 0 6px 18px rgba(10, 38, 71, .06);
}
.cat-page .advantage-item .icon {
    margin-bottom: 12px;
    line-height: 1;
}
.cat-page .advantage-item h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--color-primary);
}
.cat-page .advantage-item p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.75;
    color: var(--color-gray-600);
    font-variant-numeric: tabular-nums;
}
.cat-page .container-grid { gap: 22px; }
/* ===== S7 追加块结束 ===== */


/* ==========================================================================
   S1-CAT-NARROW：分类页 ≤768 收窄（P0 二轮 S1）
   现象：PTFE/digestion.html 在 375px 被撑到 424px，根因是页面**内联**的
        style="grid-template-columns: repeat(4, 1fr)" —— 内联样式优先级最高，
        只能以 !important 定点覆盖（全站仅此一条，非"大量 !important"）。
   做法：≤768 压为 2 列；≤480 压为 1 列。⛔ 不隐藏任何内容。
   ========================================================================== */
@media (max-width: 768px) {
    .cat-page .container-grid, .category-hero .container-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .cat-page, .cat-page .container { max-width: 100%; overflow-x: clip; }
}
@media (max-width: 480px) {
    .cat-page .container-grid, .category-hero .container-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* ===== S1-CAT-NARROW 结束 ===== */
/* ===== BRAND-BAND-131：分类页品牌识别条（仅作用于 body.cat-page）=====
   适用范围：**仅 4 个已确认的产品分类页**
     · glassware/bottles/pyknometer.html / -en.html
     · glassware/bottles/weighing-flat.html / -en.html
   其它 cat-page 页面不插入本块 HTML ⇒ 本样式对它们不产生任何可见影响

   ── v3 视觉微调（本轮）──────────────────────────────────────────────
   问题：v2 用浅蓝灰通栏（#f5f8fb）+ 上下双线，夹在深色 hero 与白色正文之间，
        自成一条色带，读起来像「额外插入的广告条」。
   做法：① 底色改纯白 #ffffff，与正文同色 ⇒ 不再是色带，只剩一条品牌署名的留白段
        ② 只保留顶部 1px #e6eef7 发丝线（与深色 hero 的交界有据可依），
           取消底部线 ⇒ 与下方正文自然融合，不形成封闭矩形
        ③ 说明文字不再右对齐顶到容器右边缘：改为紧跟双标之后的左对齐文本块
           （margin-left 26px、max-width 560px）⇒ 与 Logo 读成一个整体，
           同时桌面端保持约 40 字的合理阅读宽度，右侧留出 200px 左右空白
        ④ ⛔ 未改：.container 网格对齐、Vissal 主标 132×32 / 112×27.2、
           RichTech 次标 32 / 28 高、中间 1px 分隔线、任何文案、任何图片

   设计要点（与产品详情页 BRAND-LOCKUP-127 同源、但刻意不同构）：
   · 详情页是「卡片」（四边描边 + 圆角 + 内边距），分类页是「署名行」
     （只留顶部发丝线 + 靠 .container 与页面网格对齐）—— 因为分类页紧跟深色 hero，
     品牌区必须退成配角，不能吃掉首屏、也不该自成色带
   · 一行三段：左＝小号辅助标签，中＝双标（Vissal® 主 / RichTech 次，1px 细分隔线），
     右＝一句品牌关联说明（紧跟双标、左对齐，不顶到页面右缘）
   · 蓝灰系全部沿用站内既有取值：#ffffff（正文底色）、#e6eef7（既有描边）、
     #cfdcea（既有分隔线）、#7b8ea6（辅助标签色）、--color-gray-600 #565f68（正文灰，
     本页说明文字用它 ⇒ 与页面正文同色系，白底对比度 6.50:1），不引入新色
   · ⛔ 无阴影、无渐变、无大图标、无大面积色块；不新增标题层级（标签与说明都用 p）

   资产处理（与详情页同一套已验证逻辑，未改任何图片像素）：
   · vissal-logo.png 624×351（2026-10-29 由 2730×1535 等比重采样，1311KB→184KB，原图存档
     _archive/image-originals-20261029/）、colorType=2（RGB 无 Alpha）、纯白底；
     内容包围盒 614×149 = 4.121:1（原 2687×652，比例不变）⇒ 容器 132×32（132/4.121=32.03）+
     object-fit:cover + object-position:50% 42% ⇒ 只裁上下留白，字形零裁切、零拉伸
   · 白底融入底色靠 mix-blend-mode:multiply（白 × 白 = 白，无色差）；
     外层 isolation:isolate 把混合限制在本条内
   · richtech-logo-nobg.png 1221×716 RGBA 透明、内容 1.709:1 ⇒ contain 即可

   ⛔ 回退：整块删除（HTML 侧同步删除 <!-- BRAND-BAND-131 --> … <!-- /BRAND-BAND-131 -->）*/
body.cat-page .brand-band {
    background: #ffffff;                /* v3：与正文同色，不再自成色带 */
    border-top: 1px solid #e6eef7;      /* v3：只留顶部发丝线，去掉底部线 */
    isolation: isolate;                 /* 把 multiply 限定在本条内 */
}
body.cat-page .brand-band .container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 17px;
    padding-bottom: 17px;
    min-width: 0;
}
body.cat-page .brand-band-eyebrow {
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #7b8ea6;
}
body.cat-page .brand-band-marks {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    min-width: 0;
}
body.cat-page .brand-band-vissal {
    display: block;
    width: 132px;
    height: 32px;                       /* 132 / 4.121 = 32.03 —— 与内容比一致，cover 不裁字 */
    object-fit: cover;
    object-position: 50% 42%;
    mix-blend-mode: multiply;           /* 白底 PNG 融入白底，无需抠图 */
}
body.cat-page .brand-band-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 26px;
    background: #cfdcea;
}
body.cat-page .brand-band-richtech {
    display: block;
    height: 32px;
    width: auto;
    object-fit: contain;
}
body.cat-page .brand-band-note {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 0 26px;                 /* v3：紧跟双标，不再 margin-left:auto 顶到右缘 */
    max-width: 560px;                   /* v3：桌面端约 40 字/行的合理阅读宽度 */
    font-size: 0.775rem;
    line-height: 1.55;
    color: var(--color-gray-600, #565f68);  /* v3：与页面正文同灰，白底 6.50:1 */
    text-align: left;                   /* v3：左对齐，与 Logo 读成一个整体 */
}
@media (max-width: 768px) {
    body.cat-page .brand-band .container {
        flex-wrap: wrap;
        gap: 9px 12px;
        padding-top: 13px;
        padding-bottom: 13px;
    }
    body.cat-page .brand-band-eyebrow { flex: 1 1 100%; }
    body.cat-page .brand-band-marks { gap: 10px; }
    body.cat-page .brand-band-vissal { width: 112px; height: 27.2px; }  /* 112 / 4.121 = 27.18 */
    body.cat-page .brand-band-sep { height: 22px; }
    body.cat-page .brand-band-richtech { height: 28px; }
    body.cat-page .brand-band-note {
        flex: 1 1 100%;
        margin: 1px 0 0;
        max-width: none;
        text-align: left;
        font-size: 0.76rem;
        line-height: 1.55;
    }
}
/* ===== BRAND-BAND-131 结束 ===== */