/* ==========================================================================
   CNCT B2B — Design System
   Layout & rhythm modelled on the gardening-and-landscape starter template
   (1200px content width, 120/80/64px section rhythm, ghost buttons),
   re-skinned in CNCT brand colours: the logo's two greys + white, with the
   logo red kept strictly for buttons and links.

   Every colour here reads from the :root custom properties below. The nine
   "editable" ones are owned by the 配色 panel (后台 CNCT 站点内容 → 配色，
   或前台可视化编辑 → 全站配色)；cnct-colors.php recomputes everything derived
   from them, so re-skinning the site never means editing this file.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       配色。上面九个是「可编辑色」——后台 CNCT 站点内容 → 配色，或者前台
       「可视化编辑 → 全站配色」都能改；cnct-colors.php 会在本样式表之后输出
       一个 :root 覆盖块，把下面所有带「派生」注释的变量按新主色重算一遍。
       所以这里写的值只是没有设置过时的兜底默认。
       ---------------------------------------------------------------------- */
    --c-dark: #3F3F41;              /* 深色主色（logo 深灰 #8B8B8C 压 55% 黑，配白字 10.5:1） */
    --c-accent: #D8222B;            /* 强调色（按钮 / 链接） */
    --c-cream: #F5F5F6;             /* 浅色板块底色 / 表单底 / 表头底（近白，不是中灰） */
    --c-page: #FFFFFF;              /* 页面底色 */
    --c-ink: #111111;               /* 标题文字 */
    --c-body: #4E4E50;              /* 正文文字（logo 深灰压 45% 黑） */
    --c-muted: #8B8B8C;             /* 次要文字（logo 深灰原色） */
    --c-line: #C9CACA;              /* 描边 / 分隔线（logo 浅灰原色） */
    --c-btn-ink: #FFFFFF;           /* 按钮上的文字 */
    --c-white: #FFFFFF;
    --c-grey-dark: #8B8B8C;         /* logo 主灰，取样自 cnct-logo.png 37.1% 像素 */
    --c-grey-light: #C9CACA;        /* logo 次灰，取样自 cnct-logo.png 23.9% 像素 */

    /* 派生：深色主色的深浅档 + 强调色 hover */
    --c-dark-2: #373739;
    --c-dark-3: #4E4E4F;
    --c-dark-deep: #1C1C1D;
    --c-accent-d: #B51D24;

    /* 派生：浅色底色的两档 */
    --c-light-2: #E9E9EA;
    --c-light-3: #DCDCDD;

    /* 派生：深色块上的文字（正文 / 亮一档 / 暗一档 / 强调 / 图标） */
    --c-on-dark: #CDCDCE;
    --c-on-dark-strong: #D8D8D9;
    --c-on-dark-soft: #B3B3B5;
    --c-on-dark-accent: #ECB1B5;
    --c-on-dark-icon: #DFDFE0;

    /* 派生：rgba() 阴影与叠色用的 RGB 三元组 */
    --c-dark-rgb: 63,63,65;
    --c-dark-2-rgb: 55,55,57;
    --c-dark-3-rgb: 78,78,79;
    --c-dark-deep-rgb: 28,28,29;
    --c-accent-rgb: 216,34,43;
    --c-accent-d-rgb: 181,29,36;

    /* 2026-10-14 客户指示：对齐参考站 homeboxsolutions.com 的字体观感。
       标题 Poppins（几何无衬线），正文 IBM Plex Sans（工程感强、小字清晰）。
       两者均自托管于 assets/fonts/（见 fonts.css），无 CDN 请求。
       回滚：改回 'Archivo' 即可（Archivo 的 @font-face 仍在 fonts.css 里）。 */
    --c-font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --c-font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

    --c-wrap: 1210px;               /* 2026-10-13 对齐参考站内容宽（原 1200px） */
    --c-pad: 20px;                  /* 2026-10-13 参考站内容区左右各 20px（原 40px），产品框因此变宽 */
    /* 2026-10-14 参考站节奏：Flatsome section 只有 30px，但它的 row 自带内边距，
       实测整段视觉间距约 80–90px。原先 120px 太空，收到 88px 更接近参考站。 */
    --c-sec: 88px;
    /* 2026-10-14 参考站是全方角体系（Flatsome .button{border-radius:0}、卡片方角），
       全站圆角归零 —— 一处变量控制，回滚只改这一行。 */
    --c-radius: 0;
    /* 参考站几乎不用软阴影（hover 只做 20% 压暗）。保留极浅一档给 hover 用，
       常驻卡片改用 1px 细边线表达边界（见文件末尾「方角扁平化」块）。 */
    --c-shadow: 0 14px 34px rgba(var(--c-dark-rgb), .12);
}

/* ---------- base ---------------------------------------------------------- */

body.cnct-body {
    font-family: var(--c-font-body);
    font-size: 16.5px;
    /* 2026-10-14：IBM Plex Sans 的 x-height 比 Archivo 大，行距 1.72 会显得松，
       收到 1.68 与参考站（Flatsome 正文 1.6）观感一致。 */
    line-height: 1.68;
    color: var(--c-body);
    background: var(--c-page);
    -webkit-font-smoothing: antialiased;
}

/* 2026-10-13 修复滚动被锁死。hello-elementor 的 reset.css 写了
   `body{overflow-x:clip}`（见 wp-content/themes/hello-elementor/assets/css/reset.css）。
   按 CSS Overflow 规范，`overflow-x:clip` 会把另一轴也补成 `clip`（不是 visible），
   于是 body 计算值变成 `overflow: clip visible` —— body 彻底不可滚动，
   整页只能靠 html 滚动；更糟的是 body 变成了「不可滚动包含块」，导致
   元素命中测试 / :hover / mouseenter 命中区不可靠（产品卡悬停翻图因此失效）。
   这里显式把两轴拉回 visible，让滚动与指针命中都回到 html 层，恢复正常。 */
body.cnct-body {
    overflow-x: visible;
    overflow-y: visible;
}

.cnct-page h1, .cnct-page h2, .cnct-page h3, .cnct-page h4,
.cnct-band h1, .cnct-hero h1, .cnct-cta h2, .cnct-footer h4 {
    font-family: var(--c-font-head);
    color: var(--c-dark);
    letter-spacing: -.015em;
    margin: 0;
}

.cnct-page p { margin: 0 0 1.1em; }
.cnct-page a { color: var(--c-accent); }
.cnct-page img { max-width: 100%; height: auto; display: block; }

/* Elementor wrappers must not add their own spacing around our sections */
.elementor-widget-html > .elementor-widget-container { margin: 0; }
.cnct-shell > .e-con-inner, .cnct-shell { padding: 0 !important; }
body.elementor-page .cnct-page { padding: 0; margin: 0; }

/* ---------- layout primitives -------------------------------------------- */

.cnct-wrap {
    max-width: var(--c-wrap);
    margin: 0 auto;
    padding-left: var(--c-pad);
    padding-right: var(--c-pad);
    width: 100%;
}

.cnct-sec { padding: var(--c-sec) 0; }
.cnct-sec--light { background: var(--c-cream); }
.cnct-sec--dark { background: var(--c-dark); }
.cnct-sec--dark .cnct-h2, .cnct-sec--dark .cnct-h3 { color: var(--c-white); }
.cnct-sec--dark .cnct-p { color: var(--c-on-dark); }
/* 2026-10-14：段间距基数收到 88px 后，tight / xspad 两档同步下调，
   否则「紧凑档」比默认档还宽，层级就失效了。 */
.cnct-sec--tight { padding: 66px 0; }
.cnct-sec--xspad { padding: 50px 0; }
.cnct-sec--nb { padding-bottom: 0; }
.cnct-sec--nt { padding-top: 0; }

/* 2026-10-14 字体与字阶对齐参考站 homeboxsolutions.com：
   字族换成 Poppins（标题）+ IBM Plex Sans（正文）；字重从 800 收敛到 600
   （参考站是 Poppins 500，600 在工业品类目里更稳）；字阶同步收紧一档
   （参考站 h2 只有 1.6em ≈ 26px，原先 40px 的空旷感与它差距太大）。
   响应式档位见文件下方的 @media，保持等比缩放。 */
.cnct-h1 { font-size: 52px; line-height: 1.14; font-weight: 600; }
.cnct-h2 { font-size: 34px; line-height: 1.24; font-weight: 600; }
.cnct-h3 { font-size: 21px; line-height: 1.35; font-weight: 600; }
.cnct-h4 { font-size: 17px; line-height: 1.4; font-weight: 600; }
.cnct-lead { font-size: 18px; line-height: 1.68; color: var(--c-body); }
.cnct-p { color: var(--c-body); }
.cnct-muted { color: var(--c-muted); font-size: 14.5px; }

.cnct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--c-font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 0 0 16px;
}
.cnct-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--c-accent);
    display: inline-block;
}
.cnct-sec--dark .cnct-eyebrow { color: var(--c-on-dark-accent); }
.cnct-sec--dark .cnct-eyebrow::before { background: var(--c-on-dark-accent); }
.cnct-eyebrow--plain::before { display: none; }

.cnct-head { max-width: 720px; margin-bottom: 44px; }
.cnct-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cnct-head .cnct-p { margin-top: 16px; }

/* ---------- buttons ------------------------------------------------------- */

.cnct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 30px;
    font-family: var(--c-font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .1px;
    text-decoration: none !important;
    border: 2px solid transparent;
    border-radius: var(--c-radius);
    cursor: pointer;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.cnct-btn--primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-btn-ink) !important;
}
.cnct-btn--primary:hover { background: var(--c-accent-d); border-color: var(--c-accent-d); transform: translateY(-2px); }

.cnct-btn--ghost { border-color: var(--c-dark); color: var(--c-dark) !important; background: transparent; }
.cnct-btn--ghost:hover { background: var(--c-dark); color: var(--c-white) !important; }

.cnct-btn--ghost-light { border-color: rgba(255, 255, 255, .72); color: var(--c-white) !important; background: rgba(255, 255, 255, .04); }
.cnct-btn--ghost-light:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-dark) !important; }

.cnct-btn--white { background: var(--c-white); border-color: var(--c-white); color: var(--c-dark) !important; }
.cnct-btn--white:hover { background: transparent; color: var(--c-white) !important; }

.cnct-btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cnct-btn-row--center { justify-content: center; }

.cnct-link {
    font-weight: 700;
    font-size: 15px;
    color: var(--c-accent) !important;
    text-decoration: none !important;
}
.cnct-link::after { content: " →"; transition: margin .2s ease; }
.cnct-link:hover::after { margin-left: 4px; }

/* ---------- grids --------------------------------------------------------- */

.cnct-grid { display: grid; gap: 30px; }
.cnct-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cnct-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cnct-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cnct-grid--5 { grid-template-columns: repeat(5, 1fr); }
.cnct-grid--gap { gap: 36px; }

.cnct-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.cnct-split--media-left { direction: ltr; }
.cnct-split--stack { align-items: start; }
/* 单栏变体：配图撤除后文字独占整宽，避免被 1fr 1fr 挤成半栏 */
.cnct-split--solo { grid-template-columns: 1fr; }
.cnct-split--solo > div { max-width: 760px; }
.cnct-split__media { position: relative; }
.cnct-split--reverse .cnct-split__media { order: 2; }

/* ---------- icon box / cards --------------------------------------------- */

.cnct-ib { display: flex; flex-direction: column; gap: 14px; }
.cnct-ib__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--c-accent-rgb), .10);
    color: var(--c-accent);
    font-size: 22px;
    flex: none;
}
.cnct-sec--dark .cnct-ib__icon { background: rgba(255, 255, 255, .12); color: var(--c-on-dark-accent); }
.cnct-sec--light .cnct-ib__icon { background: rgba(var(--c-accent-rgb), .10); }
.cnct-ib__title { font-family: var(--c-font-head); font-size: 19px; font-weight: 700; color: var(--c-dark); margin: 0; }
.cnct-sec--dark .cnct-ib__title { color: var(--c-white); }
.cnct-ib__text { margin: 0; font-size: 15.5px; color: var(--c-body); }
.cnct-sec--dark .cnct-ib__text { color: var(--c-on-dark); }

.cnct-card {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cnct-card:hover { transform: translateY(-5px); box-shadow: var(--c-shadow); border-color: transparent; }
.cnct-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.cnct-card__title { font-family: var(--c-font-head); font-size: 20px; font-weight: 700; color: var(--c-dark); margin: 0; }
.cnct-card__text { margin: 0; font-size: 15px; color: var(--c-body); }
.cnct-card__meta {
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--c-accent);
}

/* ---------------------------------------------------------------- 产品家族分组
   一个品类 = 一个分组：组头写品类（名称/一句话/起订量），组内直接挂该家族的
   型号卡。取代过去"品类区块 + 型号区块"两个并列区块重复罗列同一批品类名。 */
.cnct-family { margin-top: 56px; }
.cnct-family:first-of-type { margin-top: 44px; }
.cnct-family__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--c-line);
}
.cnct-family__icon { flex: 0 0 auto; color: var(--c-accent); line-height: 0; padding-top: 3px; }
.cnct-family__icon .cnct-i { width: 24px; height: 24px; }
.cnct-family__title {
    font-family: var(--c-font-head);
    font-size: 24px;
    font-weight: 700;
    color: var(--c-dark);
    margin: 0 0 7px;
}
.cnct-family__title a { color: inherit; text-decoration: none; }
.cnct-family__title a:hover { color: var(--c-accent); }
.cnct-family__text { margin: 0; font-size: 15.5px; color: var(--c-body); max-width: 78ch; }
.cnct-family__meta {
    margin: 9px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--c-accent);
}
.cnct-family--oem .cnct-family__head { border-bottom-style: dashed; }
/* 型号卡比品类卡轻一档：标题小一点、正文密一点，视觉上明确是"从属"于上方品类 */
.cnct-card--model .cnct-card__body { padding: 22px 22px 24px; gap: 7px; }
.cnct-card--model .cnct-card__title { font-size: 17px; line-height: 1.35; }
.cnct-card--model .cnct-card__text { font-size: 14px; }
.cnct-card--model .cnct-card__meta { padding-top: 0; margin-top: 0; font-size: 12px; }
.cnct-card--model:hover { transform: translateY(-3px); }

/* ---------------------------------------------------------------- 产品分类悬停展示面板
   首页 home-products：左栏深色分类列表，右栏该分类的产品卡（图 + 型号，无价格）。
   悬停 / 聚焦 / 点按切换（cnct-pcat.js）。无 JS 时第一个面板默认可见，
   其余 hidden；按钮本身是品类页链接 —— 内容仍可达（渐进增强）。

   ⚠️ 两处优先级坑（都真实踩过）：
   1) .cnct-page a { color: accent } 是 (0,1,1)，会压过 (0,1,0) 的按钮白字 ——
      红底按钮上出红字等于隐形。所以下面所有按钮规则都带 .cnct-pcat 前缀到 (0,2,0)。
   2) 卡片类名必须是 cnct-pcat__card —— cnct-pcard 已被短代码/详情页占用。 */
.cnct-sec--wide .cnct-wrap { max-width: 1400px; }   /* 本节是首页主视觉，容器加宽 */
.cnct-pcat {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(var(--c-dark-rgb), 0.08);
}
.cnct-pcat__rail {
    background: var(--c-dark);
    color: #fff;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    /* 左栏保持默认 stretch（与 2 排面板等高），间距拉大 + 按钮弹性伸展铺满整栏，
       底部不再留深色空档。 */
    gap: 16px;
}
.cnct-pcat__mark { color: var(--c-on-dark-icon); margin-bottom: 2px; }
.cnct-pcat__title {
    font-family: var(--c-font-head);
    font-size: 25px;
    line-height: 1.2;
    margin: 0;
    color: #fff;
}
.cnct-pcat__sub { margin: 0 0 6px; font-size: 13px; color: var(--c-on-dark-soft); }
.cnct-pcat .cnct-pcat__btn {
    flex: 1 1 auto;          /* 沿栏纵向弹性伸展，铺满加高后的左栏 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border-radius: var(--c-radius);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.15s ease;
}
.cnct-pcat .cnct-pcat__btn .cnct-pcat__chev { flex: none; transition: transform 0.15s ease; }
.cnct-pcat .cnct-pcat__btn:hover,
.cnct-pcat .cnct-pcat__btn:focus-visible { background: rgba(255, 255, 255, 0.15); color: #fff; outline: none; }
.cnct-pcat .cnct-pcat__btn.is-active { background: var(--c-accent); color: #fff; }
.cnct-pcat .cnct-pcat__btn.is-active .cnct-pcat__chev { transform: translateX(3px); }
/* OEM 入口：虚线框，视觉上与产品品类区分（它是服务入口，不是产品线） */
.cnct-pcat .cnct-pcat__btn--oem {
    margin-top: 10px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.38);
}
/* 右栏撑满：面板与卡片都拉伸到与左栏等高，图片区域吃掉全部剩余高度 */
.cnct-pcat__stage { padding: 24px; display: flex; flex-direction: column; }
.cnct-pcat__panel { flex: 1; display: flex; }
.cnct-pcat__panel[hidden] { display: none; }
.cnct-pcat__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 行高用 1fr 等分：所有行 = 最高一行的内容高度，空位卡所在的行被抬到
       与真实产品行等高 —— 面板总高恒定，切换品类绝不跳变。
       （此前 grid-auto-rows:auto 时空行高度塌成 0，raised-beds 这类不足两排的
       品类照样缩半 —— 占位卡只占格不定行高，必须靠 1fr 抬起来。） */
    grid-auto-rows: 1fr;
    gap: 20px;
}
.cnct-pcat__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: var(--c-radius);
    min-width: 0;
}
/* 空位占格：只占位不显示（保持面板两排高度，视觉上留白） */
.cnct-pcat__card--empty { visibility: hidden; pointer-events: none; }
.cnct-pcat__card .cnct-ph {
    flex: 1 1 auto;
    aspect-ratio: auto;      /* 放开 4:3 锁定，高度由面板撑满决定 */
    min-height: 300px;       /* 2 排大面板：单卡图撑高，面板整体下探 */
    border-radius: var(--c-radius);
}
.cnct-pcat__name {
    display: block;
    margin-top: 12px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: var(--c-ink);
    transition: color 0.15s ease;
}
.cnct-pcat__sku {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--c-muted);
}
.cnct-pcat__card:hover .cnct-pcat__name,
.cnct-pcat__card:focus-visible .cnct-pcat__name { color: var(--c-accent); }

@media (max-width: 960px) {
    .cnct-pcat { grid-template-columns: 1fr; }
    .cnct-pcat__rail {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 20px;
        gap: 8px;
    }
    .cnct-pcat__mark { display: none; }
    .cnct-pcat__title { width: 100%; font-size: 20px; }
    .cnct-pcat__sub { width: 100%; margin-bottom: 4px; }
    .cnct-pcat .cnct-pcat__btn { flex: 1 1 auto; padding: 10px 12px; font-size: 14px; }
    .cnct-pcat .cnct-pcat__btn--oem { margin-top: 0; }
    .cnct-pcat__stage { padding: 16px; }
    .cnct-pcat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cnct-pcat__card .cnct-ph { min-height: 210px; }
}
@media (max-width: 560px) {
    .cnct-pcat__grid { grid-template-columns: 1fr; }
    /* 手机单列：空位卡会把面板拉出好几屏空白，这里直接隐藏（面板高度回归内容） */
    .cnct-pcat__card--empty { display: none; }
    .cnct-pcat__card .cnct-ph { min-height: 190px; }
}

/* ---------- 证书墙（品质认证页，2026-09-24；2026-10-15 v2 改为纯展示）
   2026-10-15 客户指示：证书一律不可点击 —— 整卡是 <div>，没有 <a>、没有下载行。
   悬停不抬升、指针不手型，避免误导。文字规则仍带 .cnct-cert 前缀抬到 (0,2,0)
   （.cnct-page a 色彩坑的历史防御，保留无害）。 */
.cnct-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 10px;
}
.cnct-cert {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    overflow: hidden;
    cursor: default;
}
.cnct-cert__thumb {
    display: block;
    background: #f2f0e9;                       /* 证书纸色衬底，扫描白边不突兀 */
    border-bottom: 1px solid var(--c-line);
}
.cnct-cert__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 210 / 297;                   /* A4 竖版 */
    object-fit: cover;
}
.cnct-cert .cnct-cert__title {
    display: block;
    padding: 16px 16px 0;
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.35;
    color: var(--c-ink);
}
.cnct-cert .cnct-cert__meta {
    display: block;
    padding: 5px 16px 0;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--c-muted);
}
.cnct-cert .cnct-cert__desc {
    display: block;
    padding: 10px 16px 0;
    margin-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--c-ink);
    opacity: 0.78;
}
@media (max-width: 960px) {
    .cnct-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 480px) {
    .cnct-cert-grid { grid-template-columns: 1fr; }
}
/* 首页紧凑证书行：只留 缩略图 + 名称 + 编号（说明隐藏），卡更矮更轻 */
.cnct-cert--compact { border-radius: 10px; }
.cnct-cert--compact .cnct-cert__title { padding: 12px 14px 0; font-size: 14.5px; }
.cnct-cert--compact .cnct-cert__meta { padding: 4px 14px 14px; font-size: 12px; }

/* ---------- 2×2 优势卡（2026-09-24：why 并入 about，参照 Winland「Why Choose」版式）
   无图标、无列表：小标题 + 两三行正文，干净直接。 */
.cnct-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 44px;
}
.cnct-why-card__title {
    margin: 0;
    font-family: var(--c-font-head);
    font-size: 20px;
    line-height: 1.25;
    color: var(--c-ink);
}
.cnct-why-card__text {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--c-muted);
}
@media (max-width: 960px) {
    .cnct-why-grid { gap: 22px 28px; }
}
@media (max-width: 560px) {
    .cnct-why-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- image placeholder blocks ------------------------------------- */

.cnct-ph {
    position: relative;
    width: 100%;
    border-radius: var(--c-radius);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(120deg, var(--c-dark-3) 0%, var(--c-dark) 60%, var(--c-dark-2) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 20px;
}
.cnct-ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 46px);
    pointer-events: none;
}
.cnct-ph__label {
    position: relative;
    z-index: 1;
    font-family: var(--c-font-head);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
}
.cnct-ph__sub {
    position: relative;
    z-index: 1;
    font-size: 12px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.cnct-ph__tag {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    background: rgba(var(--c-accent-rgb), .85);
    padding: 4px 9px;
    border-radius: var(--c-radius);
}
.cnct-ph--4x3 { aspect-ratio: 4 / 3; }
.cnct-ph--3x2 { aspect-ratio: 3 / 2; }
.cnct-ph--16x9 { aspect-ratio: 16 / 9; }
.cnct-ph--1x1 { aspect-ratio: 1 / 1; }
.cnct-ph--4x5 { aspect-ratio: 4 / 5; }
.cnct-ph--650x260 { aspect-ratio: 650 / 260; }  /* 2026-10-20 首页工厂段：客户指定 650:260 */
.cnct-ph--580x450 { aspect-ratio: 580 / 450; }  /* 2026-10-21 DFM 左图：客户指定 580:450 */
.cnct-ph--9x16 { aspect-ratio: 9 / 16; }        /* 2026-10-21 OEM 编号卡 2 小图：客户指定 9:16 */
.cnct-ph--tall { aspect-ratio: 3 / 4; }
.cnct-ph--sm .cnct-ph__label { font-size: 14px; }
/* real photo inside the same aspect box (set from CNCT 站点内容) */
.cnct-ph--photo { background: var(--c-dark-2); }
.cnct-ph--photo::after { display: none; }
.cnct-ph--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cnct-ph--light {
    background:
        linear-gradient(135deg, rgba(var(--c-dark-rgb), .05) 0%, rgba(var(--c-dark-rgb), 0) 45%),
        linear-gradient(120deg, var(--c-light-2) 0%, var(--c-cream) 55%, var(--c-light-3) 100%);
}
.cnct-ph--light .cnct-ph__label { color: var(--c-dark); }
.cnct-ph--light .cnct-ph__sub { color: rgba(var(--c-dark-rgb), .55); }

/* stacked photo pair used in the "about" block */
.cnct-photo-pair { position: relative; }
.cnct-photo-pair__a { border-radius: 10px; }
.cnct-photo-pair__b {
    position: absolute;
    right: -22px;
    bottom: -30px;
    width: 46%;
    border-radius: var(--c-radius);
    border: 6px solid var(--c-white);
    box-shadow: var(--c-shadow);
}

/* ---------- stats --------------------------------------------------------- */

.cnct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.cnct-stat { display: flex; flex-direction: column; gap: 6px; }
.cnct-stat__num {
    font-family: var(--c-font-head);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-dark);
    letter-spacing: -.02em;
    /* 2026-10-22 客户指示：数字+单位一行显示完整（10,000+ m² / 15+ Years 不再折行） */
    white-space: nowrap;
}
.cnct-sec--dark .cnct-stat__num { color: var(--c-white); }
.cnct-stat__num em { font-style: normal; color: var(--c-accent); }
.cnct-stat__label { font-size: 14px; color: var(--c-muted); }
.cnct-sec--dark .cnct-stat__label { color: var(--c-on-dark-soft); }
.cnct-stat--bordered { border-left: 2px solid var(--c-line); padding-left: 22px; }
.cnct-sec--dark .cnct-stat--bordered { border-left-color: rgba(255, 255, 255, .18); }

/* ---------- lists --------------------------------------------------------- */

.cnct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.cnct-list li {
    position: relative;
    padding-left: 34px;
    font-size: 16px;
    color: var(--c-body);
}
.cnct-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--c-accent-rgb), .12) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8222B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.cnct-sec--dark .cnct-list li { color: var(--c-on-dark-strong); }
.cnct-sec--dark .cnct-list li::before { background-color: rgba(255, 255, 255, .14); }
.cnct-list--2 { grid-template-columns: 1fr 1fr; gap: 13px 30px; }

.cnct-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cnct-chips li {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-dark);
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    padding: 8px 16px;
}
.cnct-sec--dark .cnct-chips li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: var(--c-on-dark-strong); }

/* ---------- hero ---------------------------------------------------------- */

.cnct-hero {
    position: relative;
    background:
        linear-gradient(110deg, rgba(var(--c-dark-2-rgb), .96) 0%, rgba(var(--c-dark-rgb), .78) 42%, rgba(var(--c-dark-rgb), .42) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 62px),
        linear-gradient(120deg, var(--c-dark-3) 0%, var(--c-dark) 55%, var(--c-dark-2) 100%);
    padding: 150px 0 110px;
    overflow: hidden;
}
.cnct-hero--tall { min-height: 82vh; display: flex; align-items: center; padding: 150px 0 130px; }
.cnct-hero--mid { min-height: 70vh; display: flex; align-items: center; padding: 140px 0 118px; }
.cnct-hero--short { padding: 104px 0 78px; }
/* custom height from CNCT 站点内容 — the variable lets the phone rules shrink it */
.cnct-hero--custom { min-height: var(--cnct-hero-minh, 640px); display: flex; align-items: center; padding: 140px 0 120px; }
/* ---------- hero / band background image (CNCT 站点内容) ------------------ */
.cnct-hero--img, .cnct-band--img { background: var(--c-dark-3); }
.cnct-hero__bg, .cnct-band__bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
}
.cnct-hero__veil, .cnct-band__veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, rgba(var(--c-dark-deep-rgb), .99) 0%, rgba(var(--c-dark-2-rgb), .93) 48%, rgba(var(--c-dark-rgb), .74) 100%);
}
.cnct-hero > .cnct-wrap, .cnct-band > .cnct-wrap { position: relative; z-index: 2; }
.cnct-hero__inner { max-width: var(--cnct-hero-inner, 720px); }
.cnct-hero h1 { color: var(--c-white); }
.cnct-hero .cnct-lead { color: var(--c-on-dark-strong); margin: 22px 0 34px; max-width: 620px; }
.cnct-hero__note { margin-top: 28px; font-size: 13.5px; color: var(--c-on-dark-soft); }
.cnct-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.cnct-hero__badge { font-size: 13.5px; font-weight: 600; color: var(--c-on-dark-strong); display: flex; align-items: center; gap: 8px; }
.cnct-hero__badge b { color: var(--c-white); font-family: var(--c-font-head); font-size: 16px; }

/* ---------- inner page band ---------------------------------------------- */

.cnct-band {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(var(--c-dark-2-rgb), .96) 0%, rgba(var(--c-dark-rgb), .86) 60%, rgba(var(--c-dark-3-rgb), .8) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 58px),
        linear-gradient(120deg, var(--c-dark-3) 0%, var(--c-dark) 60%, var(--c-dark-2) 100%);
    padding: var(--cnct-band-pt, 110px) 0 var(--cnct-band-pb, 78px);
}
.cnct-band h1 { color: var(--c-white); max-width: 860px; }
.cnct-band .cnct-lead { color: var(--c-on-dark-strong); margin-top: 18px; max-width: 700px; }
.cnct-crumbs { font-size: 13px; color: var(--c-on-dark-soft); margin-bottom: 20px; }
.cnct-crumbs a { color: var(--c-on-dark-strong) !important; text-decoration: none !important; }
.cnct-crumbs a:hover { color: var(--c-white) !important; }
.cnct-crumbs span { opacity: .5; margin: 0 8px; }
.cnct-band__meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 30px; }
.cnct-band__meta div { font-size: 14px; color: var(--c-on-dark); }
.cnct-band__meta b { color: var(--c-white); display: block; font-family: var(--c-font-head); font-size: 18px; }

/* ---------- CTA ----------------------------------------------------------- */

.cnct-cta {
    position: relative;
    background:
        linear-gradient(110deg, rgba(var(--c-dark-2-rgb), .97) 0%, rgba(var(--c-dark-rgb), .9) 55%, rgba(var(--c-dark-3-rgb), .88) 100%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 54px),
        linear-gradient(120deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
    padding: 100px 0;
    text-align: center;
}
.cnct-cta h2 { color: var(--c-white); max-width: 720px; margin: 0 auto; }
.cnct-cta .cnct-p { color: var(--c-on-dark); max-width: 620px; margin: 18px auto 34px; }
.cnct-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cnct-cta__note { margin-top: 26px; font-size: 13.5px; color: var(--c-on-dark-soft); }
.cnct-cta__note a { color: var(--c-on-dark-strong) !important; }

/* ---------- header -------------------------------------------------------- */

/* Frozen header. position:sticky needs the header to sit at body level — it
   is emitted by cnct_global_header() directly, NOT through the Elementor
   header template, whose section wrapper is only as tall as the header and
   would leave sticky with no room to travel. */
.cnct-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 1px 0 rgba(var(--c-dark-rgb), .02);
}
/* JS adds .is-stuck once the page is scrolled; without JS the header is still
   frozen, it just keeps the subtle resting shadow. */
.cnct-header.is-stuck { box-shadow: 0 10px 28px rgba(var(--c-dark-rgb), .10); }

/* Mobile: the frozen bar is tall (info strip + wrapped nav/CTA row), so it
   slides away on scroll-down and returns on scroll-up. transform only — the
   element keeps its space in the flow, so nothing jumps and no content is
   ever covered. Never applies while the drawer is open (JS guards it). */
@media (max-width: 1024px) {
    .cnct-header { transition: transform .26s ease, box-shadow .2s ease; }
    .cnct-header.is-hidden { transform: translateY(-101%); }
}
@media (prefers-reduced-motion: reduce) {
    .cnct-header { transition: none; }
}
/* 2026-10-12 顶部信息条按客户指示删除，.cnct-header__top 规则一并移除。 */
.cnct-header__bar .cnct-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 78px;
}
.cnct-header__logo img { height: 40px; width: auto; display: block; }
.cnct-header__logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; }
.cnct-header__tag {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-muted);
    border-left: 1px solid var(--c-line);
    padding-left: 12px;
    line-height: 1.25;
    max-width: 150px;
}
.cnct-header__right { display: flex; align-items: center; gap: 26px; }

/* primary nav (shortcode markup: .cnct-nav / .cnct-item / .cnct-panel)
   2026-10-14 对齐参考站：导航字体用 Poppins 500（参考站 nav 也走 Poppins），
   激活/悬停改成底部条（参考站的 nav-line-bottom），不再用灰底块。 */
.cnct-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.cnct-nav .cnct-item { white-space: nowrap; }
.cnct-nav .cnct-item {
    display: block;
    padding: 10px 14px;
    font-family: var(--c-font-head);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-dark) !important;
    text-decoration: none !important;
    border-radius: var(--c-radius);
    line-height: 1.2;
    box-shadow: inset 0 -2px 0 0 transparent;
    transition: color .2s ease, box-shadow .2s ease;
}
.cnct-nav .cnct-item:hover { color: var(--c-accent) !important; background: transparent; box-shadow: inset 0 -2px 0 0 rgba(var(--c-accent-rgb), .45); }
.cnct-nav .cnct-item.active { color: var(--c-accent) !important; background: transparent; box-shadow: inset 0 -2px 0 0 var(--c-accent); }
.cnct-nav .cnct-dd { position: relative; }
.cnct-nav .cnct-caret { font-size: 9px; margin-left: 6px; opacity: .8; }
.cnct-nav .cnct-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 236px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    box-shadow: 0 18px 40px rgba(var(--c-dark-rgb), .16);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1000;
}
.cnct-nav .cnct-dd:hover .cnct-panel,
.cnct-nav .cnct-dd:focus-within .cnct-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.cnct-nav .cnct-panel a {
    display: block;
    padding: 11px 20px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--c-body) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--c-line);
}
.cnct-nav .cnct-panel a:last-child { border-bottom: none; }
.cnct-nav .cnct-panel a:hover { background: var(--c-cream); color: var(--c-accent) !important; }
.cnct-nav .cnct-panel a.cnct-sub-active { color: var(--c-accent) !important; font-weight: 700; background: var(--c-cream); }

/* mobile drawer — burger button (hidden on desktop, shown <=1024px) */
.cnct-navwrap { display: flex; align-items: center; }
.cnct-burger {
    display: none;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    font-family: var(--c-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-dark);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.cnct-burger:hover { border-color: var(--c-accent); color: var(--c-accent); }
.cnct-burger:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cnct-burger__bars { display: inline-flex; flex-direction: column; justify-content: space-between; width: 18px; height: 13px; }
.cnct-burger__bars i {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: var(--c-radius);
    transition: transform .22s ease, opacity .18s ease;
}
.cnct-navwrap.is-open .cnct-burger__bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.cnct-navwrap.is-open .cnct-burger__bars i:nth-child(2) { opacity: 0; }
.cnct-navwrap.is-open .cnct-burger__bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- footer -------------------------------------------------------- */

.cnct-footer { background: var(--c-dark); color: var(--c-on-dark); padding: 84px 0 0; }
.cnct-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; }
.cnct-footer h4 {
    color: var(--c-white);
    font-family: var(--c-font-head);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px;
    letter-spacing: .01em;
}
/* 2026-10-15 客户指示：页脚 logo 不要白色衬板 —— logo PNG 本身透明底、字色浅灰+红，
   深色页脚上直接放可读，去掉 background/padding/圆角。 */
.cnct-footer__logo { height: 34px; width: auto; margin-bottom: 18px; }
.cnct-footer p { font-size: 14.5px; color: var(--c-on-dark-soft); margin: 0 0 14px; }
.cnct-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cnct-footer ul a { color: var(--c-on-dark) !important; text-decoration: none !important; font-size: 14.5px; }
.cnct-footer ul a:hover { color: var(--c-white) !important; }
.cnct-footer__contact li { display: flex; gap: 11px; font-size: 14.5px; color: var(--c-on-dark); }
.cnct-footer__contact i { color: var(--c-accent); margin-top: 4px; }
.cnct-footer__contact b { color: var(--c-white); }
.cnct-footer__bottom {
    margin-top: 66px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 24px 0;
    font-size: 13px;
    color: var(--c-on-dark-soft);
}
.cnct-footer__bottom .cnct-wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; }
.cnct-footer__bottom a { color: var(--c-on-dark-soft) !important; text-decoration: none !important; }
.cnct-footer__bottom a:hover { color: var(--c-white) !important; }

/* ---------- product cards / grids (shortcode output) --------------------- */

.cnct-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 30px; margin: 0; }
.cnct-pcard {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
}
.cnct-pcard:hover { transform: translateY(-5px); box-shadow: var(--c-shadow); }
/* 卡片图片比例 1:1 正方形（参考站 .has-equal-box-heights .box-image{padding-top:100%} 同款）。
   2026-10-13 客户要求「展示框尺寸加高」：卡宽 277px 时图高 277px，
   比 4:3（208px）高 33%，产品图更醒目。 */
.cnct-pcard .cnct-pimg { width: 100%; aspect-ratio: 1 / 1; height: auto; margin: 0; border-radius: 0; object-fit: cover; display: block; }
.cnct-pcard .cnct-pimg-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--c-font-head);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 45%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 44px),
        linear-gradient(120deg, var(--c-dark-3) 0%, var(--c-dark) 60%, var(--c-dark-2) 100%);
}
/* 2026-10-13 客户指示：卡片对齐参考站 —— 只显示图片 + 名称，悬停/点击图片切第二张，
   标题悬停变色。旧 __body / psku / pmeta / pex / pgo 样式保留兼容旧缓存页面，可后续清理。
   ⚠️ 关键：__media 必须是 block 且由第一张图撑出高度，第二张图 position:absolute inset:0
   才有参照 —— 否则（span 默认 inline + height:100% 无父高）悬停翻图完全不显示。 */
.cnct-pcard__media { position: relative; display: block; overflow: hidden; }
.cnct-pcard .cnct-pimg--alt {
    position: absolute;
    inset: 0;                 /* 四边贴合 __media（由主图撑高），比 height:100% 更稳 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .28s ease;
}
/* 悬停切第二张；触屏/点击由 cnct-pcard.js 加 .is-flipped（第一次点击只翻图不跳转） */
.cnct-pcard:hover .cnct-pimg--alt,
.cnct-pcard:focus-visible .cnct-pimg--alt,
.cnct-pcard.is-flipped .cnct-pimg--alt { opacity: 1; }
.cnct-pcard .cnct-ptitle {
    margin: 20px 20px 26px;
    font-size: 15px;    /* v2.67.1 客户指示：全名 2 行内展示完 */
    line-height: 1.4;
    transition: color .18s ease;
}
.cnct-pcard:hover .cnct-ptitle,
.cnct-pcard:focus-visible .cnct-ptitle { color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
    .cnct-pcard .cnct-pimg--alt, .cnct-pcard .cnct-ptitle { transition: none; }
}

.cnct-pcard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cnct-ptitle { font-family: var(--c-font-head); font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--c-dark); margin: 0; } /* v2.67.1：19px→15px 全名 2 行内 */
.cnct-psku { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin: 0; }
.cnct-pmeta { font-size: 13.5px; font-weight: 700; color: var(--c-dark); margin: 0; }
.cnct-pex { font-size: 14.5px; color: var(--c-body); margin: 0; }
.cnct-pgo { margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--c-accent); }

/* compat: old shortcode markup without __body wrapper */
.cnct-pcard > .cnct-ptitle, .cnct-pcard > .cnct-psku, .cnct-pcard > .cnct-pmeta,
.cnct-pcard > .cnct-pex, .cnct-pcard > .cnct-pgo { margin-left: 24px; margin-right: 24px; }
.cnct-pcard > .cnct-pgo { margin-bottom: 24px; }

/* ---------- product single: specs table ---------------------------------- */

.cnct-specs-wrap { margin: 0 0 8px; }
.cnct-specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.cnct-specs th, .cnct-specs td { border-bottom: 1px solid var(--c-line); padding: 14px 18px; text-align: left; vertical-align: top; }
.cnct-specs tr:first-child th, .cnct-specs tr:first-child td { border-top: 1px solid var(--c-line); }
.cnct-specs th { background: var(--c-cream); color: var(--c-dark); width: 42%; font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.cnct-specs td { color: var(--c-body); }
.cnct-specs .cnct-spec-hl { font-weight: 700; color: var(--c-accent); }
.cnct-spec-note { font-size: 13px; color: var(--c-muted); margin-top: 14px; }
/* 旧站规格副表分组标题（Product Details 组） */
.cnct-specs .cnct-specs__group th {
    background: var(--c-dark);
    color: var(--c-white);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 12px 18px;
    border-bottom: 0;
}
.cnct-specs .cnct-specs__group + tr th, .cnct-specs .cnct-specs__group + tr td { border-top: 0; }
/* 规格未补齐时替代空表的中性说明（数据补齐后自动不再输出） */
.cnct-spec-onrequest {
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-body);
    border-left: 3px solid var(--c-accent);
    background: var(--c-cream);
    padding: 20px 22px;
    margin: 0 0 6px;
}

/* ---------- product single: overview prose ------------------------------- */

.cnct-prose-wrap { max-width: 880px; }
.cnct-prose { font-size: 16px; line-height: 1.78; color: var(--c-body); }
.cnct-prose img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
}
.cnct-prose > *:first-child { margin-top: 0; }
.cnct-prose p { margin: 0 0 18px; }
.cnct-prose h3 { font-size: 21px; line-height: 1.4; color: var(--c-ink); margin: 40px 0 14px; font-weight: 700; }
.cnct-prose h4 { font-size: 17px; line-height: 1.45; color: var(--c-dark); margin: 30px 0 10px; font-weight: 700; }
.cnct-prose ul, .cnct-prose ol { margin: 0 0 20px; padding-left: 22px; }
.cnct-prose li { margin: 0 0 10px; }
.cnct-prose li::marker { color: var(--c-accent); }
.cnct-prose strong { color: var(--c-dark); font-weight: 700; }
.cnct-prose a { color: var(--c-accent); }
.cnct-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.cnct-prose th, .cnct-prose td { border-bottom: 1px solid var(--c-line); padding: 12px 16px; text-align: left; vertical-align: top; }
.cnct-prose th { background: var(--c-cream); color: var(--c-dark); font-weight: 700; }
.cnct-prose-note {
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-muted);
    border-top: 1px solid var(--c-line);
    padding-top: 16px;
    margin-top: 26px;
}

/* ---------- product single: gallery + colour variants -------------------- */

.cnct-gal-wrap { margin-top: 4px; }
.cnct-gal {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.cnct-gal--tight { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cnct-gal__item {
    display: block;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    overflow: hidden;
    background: var(--c-white);
    line-height: 0;
    transition: border-color .2s ease;
}
.cnct-gal__item:hover { border-color: var(--c-accent); }
.cnct-gal__item img { width: 100%; height: 168px; object-fit: cover; display: block; }
.cnct-gal--tight .cnct-gal__item img { height: 122px; }
.cnct-var { margin-top: 40px; }
.cnct-var__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-dark);
    margin: 0 0 16px;
}
.cnct-var__label::after {
    content: "";
    flex: 1 1 auto;
    width: 54px;
    height: 1px;
    background: var(--c-line);
    display: block;
}

/* ---------- product colour viewer (old-site style) ------------------------ */
/* Two-class selectors (0,2,0) on purpose: they must beat .cnct-page a (0,1,1). */

.cnct-pv { display: flex; flex-direction: column; gap: 14px; }
.cnct-pv--plain { gap: 0; }
.cnct-pv .cnct-pv__main {
    display: block;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    overflow: hidden;
    background: var(--c-white);
    line-height: 0;
}
.cnct-pv .cnct-pv__main img { width: 100%; height: auto; display: block; }
.cnct-pv .cnct-pv__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.cnct-pv .cnct-pv__thumb {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    padding: 0;
    font: inherit;
    cursor: pointer;
    appearance: none;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    overflow: hidden;
    background: var(--c-white);
    line-height: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cnct-pv .cnct-pv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnct-pv .cnct-pv__thumb:hover { border-color: var(--c-muted); }
.cnct-pv .cnct-pv__thumb.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.cnct-pv .cnct-pv__colors { display: flex; gap: 10px; flex-wrap: wrap; }
.cnct-pv .cnct-pv__color {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 7px;
    font: inherit;
    cursor: pointer;
    appearance: none;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cnct-pv .cnct-pv__color img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--c-radius);
    display: block;
}
.cnct-pv .cnct-pv__color span {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
}
.cnct-pv .cnct-pv__color:hover { border-color: var(--c-muted); }
.cnct-pv .cnct-pv__color.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }

/* Colour options block lives in the INFO column, above the quote button
   (old-site layout). Same card look, own spacing and eyebrow-style label. */
.cnct-pvcol { margin: 26px 0 4px; }
.cnct-pvcol__label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.cnct-pvcol .cnct-pv__colors { display: flex; gap: 10px; flex-wrap: wrap; }
.cnct-pvcol .cnct-pv__color {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 7px;
    font: inherit;
    cursor: pointer;
    appearance: none;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cnct-pvcol .cnct-pv__color img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--c-radius);
    display: block;
}
.cnct-pvcol .cnct-pv__color span {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
}
.cnct-pvcol .cnct-pv__color:hover { border-color: var(--c-muted); }
.cnct-pvcol .cnct-pv__color.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }

@media (max-width: 480px) {
    .cnct-pv .cnct-pv__thumb { width: 68px; height: 68px; }
    .cnct-pv .cnct-pv__color { padding: 6px 12px 6px 6px; }
    .cnct-pv .cnct-pv__color img { width: 40px; height: 40px; }
    .cnct-pv .cnct-pv__color span { font-size: 13px; }
    .cnct-pvcol .cnct-pv__color { padding: 6px 12px 6px 6px; }
    .cnct-pvcol .cnct-pv__color img { width: 40px; height: 40px; }
    .cnct-pvcol .cnct-pv__color span { font-size: 13px; }
}

.cnct-qbox {
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    padding: 30px;
}
.cnct-qbox h3 { margin: 0 0 10px; }
.cnct-qbox .cnct-p { font-size: 15px; }

/* ---------- forms (Fluent Forms inside our layout) ----------------------- */

.cnct-formcard {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    padding: 38px 36px 34px;
    box-shadow: var(--c-shadow);
}
.cnct-formcard h3 { margin: 0 0 8px; }
.cnct-formcard .cnct-muted { margin-bottom: 24px; display: block; }
.cnct-formcard .fluentform .ff-el-input--label label {
    font-family: var(--c-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--c-dark);
}
.cnct-formcard .fluentform input[type=text],
.cnct-formcard .fluentform input[type=email],
.cnct-formcard .fluentform input[type=tel],
.cnct-formcard .fluentform select,
.cnct-formcard .fluentform textarea {
    border: 1px solid var(--c-line) !important;
    border-radius: var(--c-radius) !important;
    background: var(--c-cream) !important;
    padding: 12px 14px !important;
    font-family: var(--c-font-body) !important;
    font-size: 15px !important;
    color: var(--c-ink) !important;
    box-shadow: none !important;
}
.cnct-formcard .fluentform input:focus,
.cnct-formcard .fluentform select:focus,
.cnct-formcard .fluentform textarea:focus { border-color: var(--c-accent) !important; background: var(--c-white) !important; }
.cnct-formcard .fluentform .ff-btn-submit {
    background: var(--c-accent) !important;
    border: 2px solid var(--c-accent) !important;
    color: var(--c-white) !important;
    font-family: var(--c-font-body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 14px 34px !important;
    border-radius: var(--c-radius) !important;
    width: auto !important;
    transition: background-color .2s ease;
}
.cnct-formcard .fluentform .ff-btn-submit:hover { background: var(--c-accent-d) !important; border-color: var(--c-accent-d) !important; }

/* ---------- inline svg icons --------------------------------------------- */

.cnct-i { flex: none; display: block; }
.cnct-btn .cnct-i { width: 17px; height: 17px; }
.cnct-ib__icon .cnct-i { width: 24px; height: 24px; }
.cnct-card__icon .cnct-i { width: 26px; height: 26px; }
.cnct-stat__icon .cnct-i { width: 22px; height: 22px; }
.cnct-hero__badge .cnct-i { width: 17px; height: 17px; color: var(--c-on-dark-icon); }
.cnct-list--icon li::before { display: none; }
.cnct-list--icon li { padding-left: 0; display: flex; gap: 12px; align-items: flex-start; }
.cnct-list--icon li .cnct-i { width: 19px; height: 19px; color: var(--c-accent); margin-top: 5px; }
.cnct-sec--dark .cnct-list--icon li .cnct-i { color: var(--c-on-dark-accent); }
.cnct-footer__contact .cnct-i { width: 18px; height: 18px; color: var(--c-accent); margin-top: 5px; flex: none; }
.cnct-dl { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--c-dark) !important; text-decoration: none !important; }
.cnct-dl .cnct-i { width: 18px; height: 18px; color: var(--c-accent); }

/* small icon chip used on category cards */
.cnct-card__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--c-radius);
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    color: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- plain content pages (legal / text pages) --------------------- */

.cnct-plain { padding: 90px 0 100px; }
.cnct-plain .cnct-wrap { max-width: 880px; }
.cnct-plain h1, .cnct-plain h2, .cnct-plain h3 { font-family: var(--c-font-head); color: var(--c-dark); margin: 1.6em 0 .5em; }
.cnct-plain h1 { font-size: 38px; margin-top: 0; }
.cnct-plain h2 { font-size: 26px; }
.cnct-plain h3 { font-size: 20px; }
.cnct-plain p, .cnct-plain li { color: var(--c-body); }
.cnct-plain a { color: var(--c-accent); }
.cnct-plain table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cnct-plain th, .cnct-plain td { border: 1px solid var(--c-line); padding: 10px 14px; text-align: left; }
.cnct-plain th { background: var(--c-cream); }
body.cnct-body .site-main .entry-content > *:first-child { margin-top: 0; }

/* ---------- misc --------------------------------------------------------- */

.cnct-steps { counter-reset: step; display: grid; gap: 26px; }
.cnct-step { position: relative; padding-left: 74px; }
.cnct-step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -4px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    color: var(--c-accent);
    font-family: var(--c-font-head);
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cnct-step h3 { margin-bottom: 6px; }
.cnct-step p { font-size: 15.5px; }

.cnct-divider { height: 1px; background: var(--c-line); margin: 54px 0; border: 0; }
.cnct-note {
    border-left: 3px solid var(--c-accent);
    background: var(--c-cream);
    padding: 18px 22px;
    border-radius: 0 var(--c-radius) var(--c-radius) 0;
    font-size: 15px;
    color: var(--c-body);
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1100px) {
    :root { --c-pad: 32px; --c-sec: 64px; }
    .cnct-h1 { font-size: 42px; }
    .cnct-h2 { font-size: 30px; }
    .cnct-grid--4, .cnct-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .cnct-stats { grid-template-columns: repeat(2, 1fr); gap: 36px 30px; }
    .cnct-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .cnct-split { gap: 34px; }
    .cnct-photo-pair__b { position: static; width: 100%; margin-top: 16px; border: none; }
    .cnct-hero { padding: 110px 0 84px; }
    .cnct-hero--tall, .cnct-hero--mid { min-height: 0; }
    .cnct-hero--custom { min-height: min(var(--cnct-hero-minh, 640px), 74vh); }
    .cnct-header__tag { display: none; }
}

@media (max-width: 1024px) {
    /* collapse the primary nav into a burger-triggered drawer */
    .cnct-header__bar .cnct-wrap { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 12px; min-height: 0; }
    .cnct-header__right { order: 3; width: 100%; align-items: flex-start; gap: 12px; overflow: visible; }
    .cnct-header__right .cnct-btn { flex: 0 0 auto; width: auto; }
    .cnct-navwrap { flex: 1 1 auto; flex-wrap: wrap; gap: 10px; }
    .cnct-burger { display: inline-flex; }

    /* drawer: hidden until .is-open, then a full-width stacked panel */
    .cnct-nav {
        display: none;
        width: 100%;
        margin-top: 10px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px;
        background: var(--c-white);
        border: 1px solid var(--c-line);
        border-radius: var(--c-radius);
        box-shadow: 0 18px 40px rgba(var(--c-dark-rgb), .12);
    }
    .cnct-navwrap.is-open .cnct-nav { display: flex; }
    .cnct-nav .cnct-item { padding: 13px 14px; font-size: 16px; border-radius: 6px; }
    .cnct-nav .cnct-dd { position: static; }
    .cnct-nav .cnct-dd__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: inherit !important;
        text-decoration: none !important;
    }
    .cnct-nav .cnct-caret { margin-left: 0; transition: transform .2s ease; }
    .cnct-nav .cnct-dd.is-open .cnct-caret { transform: rotate(180deg); }
    .cnct-nav .cnct-panel {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 0 0 6px;
        margin: 0 0 4px 10px;
        border-left: 2px solid var(--c-line);
        display: none;
    }
    .cnct-nav .cnct-dd.is-open .cnct-panel { display: block; }
    .cnct-nav .cnct-panel a { padding: 11px 14px; }
}

@media (max-width: 767px) {
    :root { --c-pad: 24px; --c-sec: 48px; }
    body.cnct-body { font-size: 16px; }
    .cnct-h1 { font-size: 30px; }
    .cnct-h2 { font-size: 24px; }
    .cnct-h3 { font-size: 20px; }
    .cnct-lead { font-size: 17px; }
    .cnct-grid--2, .cnct-grid--3, .cnct-grid--4, .cnct-grid--5 { grid-template-columns: 1fr; }
    .cnct-stats { grid-template-columns: 1fr 1fr; }
    .cnct-stat--bordered { border-left: none; padding-left: 0; }
    .cnct-split { grid-template-columns: 1fr; }
    .cnct-split--reverse .cnct-split__media { order: 0; }
    .cnct-list--2 { grid-template-columns: 1fr; }
    .cnct-footer__grid { grid-template-columns: 1fr; gap: 34px; }
    .cnct-hero { padding: 84px 0 64px; }
    .cnct-hero--tall, .cnct-hero--mid, .cnct-hero--custom { padding: 84px 0 64px; }
    .cnct-band { padding: min(var(--cnct-band-pt, 110px), 78px) 0 min(var(--cnct-band-pb, 78px), 56px); }
    .cnct-cta { padding: 64px 0; }
    .cnct-btn { width: 100%; }
    .cnct-btn-row { flex-direction: column; align-items: stretch; }
    .cnct-btn-row .cnct-btn { width: 100%; }
    .cnct-head { margin-bottom: 34px; }
    .cnct-formcard { padding: 26px 20px 24px; }
    .cnct-header__logo img { height: 34px; }
}

/* ==========================================================================
   信任层区块 — 认证徽章 / 工厂数据 / 展会背书 / 客户评价 / 浮动询盘入口
   --------------------------------------------------------------------------
   这几块对应的是「集市店铺天生自带、独立站必须自己建」的信任信号：
   认证徽章条 ≈ 平台的 Verified Supplier 徽章，工厂数据带 ≈ Production
   Capability 面板，展会卡 ≈ Trade Shows，评价 ≈ Ratings & Reviews。
   全部都从 CNCT 站点内容 读值，读不到就回落成设计占位块，
   绝不生成任何未经确认的认证声明。
   ========================================================================== */

/* ---- 认证 / 资质徽章条 --------------------------------------------------- */
.cnct-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 34px;
}

.cnct-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-page);
}

.cnct-badge__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--c-cream);
    color: var(--c-dark);
}

.cnct-badge__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnct-badge__text b { font-family: var(--c-font-head); font-size: 15px; font-weight: 600; color: var(--c-ink); }
.cnct-badge__text span { font-size: 12.5px; color: var(--c-muted); }

/* 未确认的资质：虚线边框 + 浅底，一眼能看出「这是占位不是声明」 */
.cnct-badge--pending { border-style: dashed; background: transparent; }
.cnct-badge--pending .cnct-badge__icon { background: transparent; border: 1px dashed var(--c-line); }
.cnct-badge--pending .cnct-badge__text b { color: var(--c-muted); }
.cnct-badge--pending .cnct-badge__text span { font-style: italic; }

/* ---- 工厂规模数据带 ------------------------------------------------------ */
.cnct-figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(var(--c-dark-rgb), .16);
    border-bottom: 1px solid rgba(var(--c-dark-rgb), .16);
}

.cnct-figure {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 34px 26px;
    border-right: 1px solid rgba(var(--c-dark-rgb), .16);
}
.cnct-figure:last-child { border-right: 0; }

.cnct-figure__icon { color: var(--c-accent); }
.cnct-figure__num {
    font-family: var(--c-font-head);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--c-ink);
}
.cnct-figure__label { font-size: 13.5px; color: var(--c-muted); }

/* ---- 展会 / 品牌背书 ---------------------------------------------------- */
.cnct-card--presence .cnct-card__body { padding-top: 22px; }
.cnct-card--presence .cnct-card__meta {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    font-size: 12px;
}

/* ---- 客户评价 ----------------------------------------------------------- */
.cnct-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.cnct-quote {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 28px 26px;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-page);
}
.cnct-quote blockquote { margin: 0; font-size: 15px; line-height: 1.65; color: var(--c-body); }
.cnct-quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.cnct-quote figcaption b { font-size: 14px; color: var(--c-ink); }
.cnct-quote figcaption span { font-size: 12.5px; color: var(--c-muted); }

/* 星标用纯 CSS 画，不引入任何图标字体或图片资源（GDPR 干净） */
.cnct-quote__stars { display: flex; gap: 4px; }
.cnct-quote__stars i {
    width: 14px;
    height: 14px;
    background: var(--c-line);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cnct-quote__stars i.on { background: var(--c-accent); }

/* ---- 浮动询盘入口（阿里 Contact supplier 的独立站等价物） ---------------- */
.cnct-rail {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.cnct-rail[hidden] { display: none; }

.cnct-rail__toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--c-radius);
    background: var(--c-accent);
    color: var(--c-btn-ink);
    font-family: var(--c-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(var(--c-accent-rgb), .34);
}
.cnct-rail__toggle:hover { background: var(--c-accent-d); }
.cnct-rail__toggle-icon { display: grid; place-items: center; }

.cnct-rail__panel {
    display: flex;
    flex-direction: column;
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-page);
    box-shadow: var(--c-shadow);
}
.cnct-rail__panel[hidden] { display: none; }
.cnct-rail__panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--c-radius);
    color: var(--c-ink);
    font-size: 14px;
    text-decoration: none;
}
.cnct-rail__panel a:hover { background: var(--c-cream); color: var(--c-accent); }

/* 滚到页脚时让位：页脚本来就有完整联系方式，浮动条压上去只是重复和遮挡 */
.cnct-rail--yield { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
@media (prefers-reduced-motion: reduce) {
    .cnct-rail--yield { transition: none; }
}

/* 焦点可见性：键盘用户必须能看见焦点落在哪 */
.cnct-rail__toggle:focus-visible,
.cnct-rail__panel a:focus-visible,
.cnct-badge:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (max-width: 1080px) {
    .cnct-badges, .cnct-figures { grid-template-columns: repeat(2, 1fr); }
    .cnct-quotes { grid-template-columns: 1fr; }
    .cnct-figure { border-bottom: 1px solid rgba(var(--c-dark-rgb), .16); }
    .cnct-figure:nth-child(2n) { border-right: 0; }
    .cnct-figure:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 720px) {
    .cnct-badges { grid-template-columns: 1fr; }
    .cnct-figures { grid-template-columns: 1fr; }
    .cnct-figure { border-right: 0; }
    .cnct-figure:nth-last-child(-n+2) { border-bottom: 1px solid rgba(var(--c-dark-rgb), .16); }
    .cnct-figure:last-child { border-bottom: 0; }

    /* 手机上收成一个圆形按钮，避免遮住正文和页脚的联系方式 */
    .cnct-rail { right: 14px; bottom: 14px; }
    .cnct-rail__toggle { padding: 14px; border-radius: 50%; }
    .cnct-rail__toggle-text { display: none; }
    .cnct-rail__panel { min-width: 0; width: calc(100vw - 28px); max-width: 260px; }
}

/* ==========================================================================
   区块级配色覆盖层 — 后台「配色」标签页与前台可视化编辑器的落点
   --------------------------------------------------------------------------
   某一块单独换了底色时，渲染器给这个区域加上 .cnct-surface--tint 和一个内联
   的 --cnct-surface 变量（元素作用域，不会影响别处），文字明暗则由
   .cnct-surface--ink-light / --ink-dark 切换 —— 系统会按底色亮度自动选一个，
   所以不会出现白字压白底。

   这一段刻意放在文件最后：它必须稳定地压过上面那些按设计写死深浅的规则。
   ========================================================================== */

.cnct-surface--tint { background: var(--cnct-surface); }

/* 自定义底色是深色 → 文字转浅 */
.cnct-surface--ink-light .cnct-h1,
.cnct-surface--ink-light .cnct-h2,
.cnct-surface--ink-light .cnct-h3,
.cnct-surface--ink-light .cnct-h4,
.cnct-surface--ink-light .cnct-ib__title,
.cnct-surface--ink-light .cnct-card__title,
.cnct-surface--ink-light .cnct-badge__text b,
.cnct-surface--ink-light .cnct-figure__num,
.cnct-surface--ink-light .cnct-quote figcaption b,
.cnct-surface--ink-light .cnct-stat__num { color: var(--c-white); }

.cnct-surface--ink-light .cnct-p,
.cnct-surface--ink-light .cnct-lead,
.cnct-surface--ink-light .cnct-ib__text,
.cnct-surface--ink-light .cnct-card__text,
.cnct-surface--ink-light .cnct-quote blockquote,
.cnct-surface--ink-light .cnct-list li,
.cnct-surface--ink-light .cnct-stat__label,
.cnct-surface--ink-light .cnct-hero__badge,
.cnct-surface--ink-light .cnct-band__meta div,
.cnct-surface--ink-light .cnct-footer__contact li,
.cnct-surface--ink-light .cnct-footer ul a,
.cnct-surface--ink-light .cnct-footer__bottom,
.cnct-surface--ink-light .cnct-footer__bottom a,
.cnct-surface--ink-light .cnct-crumbs a { color: var(--c-on-dark) !important; }

.cnct-surface--ink-light .cnct-muted,
.cnct-surface--ink-light .cnct-badge__text span,
.cnct-surface--ink-light .cnct-figure__label,
.cnct-surface--ink-light .cnct-quote figcaption span,
.cnct-surface--ink-light .cnct-crumbs,
.cnct-surface--ink-light .cnct-hero__note,
.cnct-surface--ink-light .cnct-cta__note { color: var(--c-on-dark-soft); }

.cnct-surface--ink-light .cnct-eyebrow { color: var(--c-on-dark-accent); }
.cnct-surface--ink-light .cnct-eyebrow::before { background: var(--c-on-dark-accent); }

/* 自定义底色是浅色 → 文字转深 */
.cnct-surface--ink-dark .cnct-h1,
.cnct-surface--ink-dark .cnct-h2,
.cnct-surface--ink-dark .cnct-h3,
.cnct-surface--ink-dark .cnct-h4,
.cnct-surface--ink-dark .cnct-ib__title,
.cnct-surface--ink-dark .cnct-card__title,
.cnct-surface--ink-dark .cnct-badge__text b,
.cnct-surface--ink-dark .cnct-figure__num,
.cnct-surface--ink-dark .cnct-quote figcaption b,
.cnct-surface--ink-dark .cnct-stat__num { color: var(--c-ink); }

.cnct-surface--ink-dark .cnct-p,
.cnct-surface--ink-dark .cnct-lead,
.cnct-surface--ink-dark .cnct-ib__text,
.cnct-surface--ink-dark .cnct-card__text,
.cnct-surface--ink-dark .cnct-quote blockquote,
.cnct-surface--ink-dark .cnct-list li,
.cnct-surface--ink-dark .cnct-stat__label,
.cnct-surface--ink-dark .cnct-hero__badge,
.cnct-surface--ink-dark .cnct-band__meta div,
.cnct-surface--ink-dark .cnct-footer__contact li,
.cnct-surface--ink-dark .cnct-footer ul a,
.cnct-surface--ink-dark .cnct-footer__bottom,
.cnct-surface--ink-dark .cnct-footer__bottom a,
.cnct-surface--ink-dark .cnct-crumbs a { color: var(--c-body) !important; }

.cnct-surface--ink-dark .cnct-muted,
.cnct-surface--ink-dark .cnct-badge__text span,
.cnct-surface--ink-dark .cnct-figure__label,
.cnct-surface--ink-dark .cnct-quote figcaption span,
.cnct-surface--ink-dark .cnct-crumbs,
.cnct-surface--ink-dark .cnct-hero__note,
.cnct-surface--ink-dark .cnct-cta__note { color: var(--c-muted); }

.cnct-surface--ink-dark .cnct-eyebrow { color: var(--c-accent); }
.cnct-surface--ink-dark .cnct-eyebrow::before { background: var(--c-accent); }

/* 深色区域里的白色分隔线，在浅底上要换成深色，否则看不见 */
.cnct-surface--ink-dark { border-color: rgba(var(--c-dark-rgb), .14); }
.cnct-surface--ink-dark .cnct-cta__note,
.cnct-surface--ink-dark .cnct-footer__bottom { border-color: rgba(var(--c-dark-rgb), .14); }

/* 白色的按钮描边 / 徽标数字 / 徽标图标，落到浅底上都得换成深色系，
   不然就是白字白底 —— 用户换了 Banner 底色之后最容易撞上的可读性坑。 */
.cnct-surface--ink-dark .cnct-hero__badge b { color: var(--c-ink); }
.cnct-surface--ink-dark .cnct-hero__badge .cnct-i { color: var(--c-accent); }

.cnct-surface--ink-dark .cnct-btn--ghost-light {
    border-color: rgba(var(--c-dark-rgb), .45);
    color: var(--c-ink) !important;
    background: rgba(var(--c-dark-rgb), .04);
}
.cnct-surface--ink-dark .cnct-btn--ghost-light:hover {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-page) !important;
}

/* ---------- product single: gallery / prose — responsive ------------------ */

@media (max-width: 1024px) {
    .cnct-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cnct-gal--tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .cnct-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cnct-gal--tight { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .cnct-gal__item img { height: 140px; }
    .cnct-gal--tight .cnct-gal__item img { height: 96px; }
    .cnct-prose { font-size: 15.5px; }
    .cnct-prose h3 { font-size: 19px; margin-top: 32px; }
    .cnct-var { margin-top: 30px; }
}

@media (max-width: 480px) {
    .cnct-gal--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- category page: old-site left sidebar (2026-10-12) -------------
   红头块 + 分类链接 + 推荐产品（缩略图 + 型号），参考旧站 Products
   Categories / Featured Products 侧栏。选择器一律 .cnct-catside .x（0,2,0），
   压过 .cnct-page a (0,1,1) 的全局链接色。 */

/* 2026-10-13 对齐参考站 homeboxsolutions.com/all-parcel-boxes 的展示框尺寸：
   内容 1210px，侧栏 25%（302px），产品区 75%；卡片图片 1:1 正方形、列间距 20px。 */
.cnct-catlay { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 20px; align-items: start; }

.cnct-catside { display: grid; gap: 36px; }
@media (min-width: 961px) {
    .cnct-catside { position: sticky; top: 96px; }
}

.cnct-catside__hd {
    margin: 0 0 4px;
    background: var(--c-accent);
    color: #FFFFFF;
    font-family: var(--c-font-head);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 13px 18px;
    border-radius: var(--c-radius);
}

.cnct-catside__list,
.cnct-catside__feat { list-style: none; margin: 0; padding: 12px 8px 0; }

.cnct-catside .cnct-catside__link {
    display: block;
    padding: 12px 14px;
    color: var(--c-ink);
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    border-radius: var(--c-radius);
    transition: color .15s ease, background .15s ease;
}
.cnct-catside .cnct-catside__link:hover { color: var(--c-accent); }
.cnct-catside .cnct-catside__link.is-active { color: var(--c-accent); background: rgba(var(--c-accent-rgb), .08); }

.cnct-catside__feat { display: grid; gap: 16px; }
.cnct-catside .cnct-catside__feat a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--c-ink);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
}
.cnct-catside .cnct-catside__feat a:hover { color: var(--c-accent); }
.cnct-catside__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    overflow: hidden;
    background: var(--c-page);
}
.cnct-catside__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 960px) {
    .cnct-catlay { grid-template-columns: 1fr; gap: 34px; }
    .cnct-catside { position: static; }
    .cnct-catside__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* 分类页主栏一行 3 个产品（2026-10-12 客户指示）。auto-fill 在窄栏里只会给出 2 列，
   这里锁 3 列；窄屏逐级回退 2 列 / 1 列。间距 20px 对齐参考站（列 padding 左右各 9.8px）。 */
.cnct-catlay__main .cnct-plist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) {
    .cnct-catlay__main .cnct-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cnct-catlay__main .cnct-plist { grid-template-columns: 1fr; }
}

/* ---------- category page: FAQ accordion ----------------------------------
   段落结构对齐参考站 homeboxsolutions.com/all-letterboxes（2026-10-12）。
   顶部品类菜单条当晚按客户指示删除，样式一并移除。 */

/* Banner 内部的 CTA 行（品类页 Hero） */
.cnct-btn-row--band { margin-top: 30px; }

/* 生产工艺卡：图标右上角叠「第 N 步」序号，读起来是工序而不是并列卖点 */
.cnct-ib--step { position: relative; }
.cnct-ib--step .cnct-ib__icon { position: relative; }
.cnct-ib__num {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 22px;
    padding: 3px 6px;
    border-radius: var(--c-radius);
    background: var(--c-accent);
    color: #FFFFFF;
    font-family: var(--c-font-head);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

/* 2026-10-13 客户指示：工艺 6 步换车间实拍图 —— 有 proc_stepN_img 附件时
   用 4:3 照片位替代图标圆，数字角标叠在照片右上角；无图品类回落原图标圆。
   图片是 <img>（非链接，符合「点图不弹窗」硬规矩），object-fit:cover 统一裁切。 */
.cnct-ib--hasimg .cnct-ib__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0 0 18px;
    border-radius: var(--c-radius);
    overflow: hidden;
    background: var(--c-light-2);
}
.cnct-ib--hasimg .cnct-ib__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}
.cnct-ib--hasimg .cnct-ib__media .cnct-ib__num {
    top: 10px;
    right: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);   /* 照片上要描边才看得清 */
}

/* FAQ 手风琴：<details> 原生实现，无 JS 也能展开 */
.cnct-faq { max-width: 900px; margin: 40px auto 0; border-top: 1px solid var(--c-line); }
.cnct-faq__item { border-bottom: 1px solid var(--c-line); }
.cnct-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 4px;
    cursor: pointer;
    font-family: var(--c-font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
    list-style: none;
}
.cnct-faq__q::-webkit-details-marker { display: none; }
.cnct-faq__q:hover { color: var(--c-accent); }
.cnct-faq__mark { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.cnct-faq__mark::before,
.cnct-faq__mark::after {
    content: "";
    position: absolute;
    background: var(--c-accent);
    border-radius: var(--c-radius);
}
.cnct-faq__mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.cnct-faq__mark::after { top: 0; left: 6px; width: 2px; height: 14px; transition: transform .18s ease; }
.cnct-faq__item[open] .cnct-faq__mark::after { transform: scaleY(0); }
.cnct-faq__a { padding: 0 4px 22px; }
.cnct-faq__a p { margin: 0; color: var(--c-body); max-width: 76ch; }




/* ==========================================================================
   2026-10-13 全白底层次优化
   客户要求除页脚外全部白底。纯白会让所有板块糊成一片，所以改用「极浅灰
   交替带 + 卡片浮起 + 标题锚点」三件套把层次找回来 —— 底色仍属白色系，
   只是靠 3% 的明度差和描边把板块切开。浅灰带由后台分区底色给出（白 /
   #F7F7F8 交替），这里只负责让落在浅灰带上的元素保持边界清晰。
   ========================================================================== */

/* 1) 浅色带的收边：板块上下各一条极淡的线，白↔浅灰的切换不再靠眼睛找 */
.cnct-surface--tint { border-top: 1px solid rgba(var(--c-dark-rgb), .06); }
.cnct-surface--tint:first-of-type { border-top: 0; }

/* 2) 卡片：常驻微阴影 + logo 浅灰描边。
   白卡压在白底上原本等于隐形，给一圈灰边 + 一点浮起就够了，
   hover 时再加强，不再用「从无到有」的跳变。 */
.cnct-card {
    border-color: var(--c-line);
    box-shadow: 0 1px 2px rgba(var(--c-dark-rgb), .05);
}
.cnct-card:hover {
    box-shadow: 0 16px 40px rgba(var(--c-dark-rgb), .13);
    border-color: rgba(var(--c-dark-rgb), .28);
}

/* 3) 图标盒：圆形底从 10% 提到 12%，深色文字，在浅灰带上不糊 */
.cnct-ib__icon {
    background: rgba(var(--c-dark-rgb), .07);
    color: var(--c-dark);
}
.cnct-sec--light .cnct-ib__icon { background: rgba(var(--c-dark-rgb), .07); }
.cnct-ib__title { color: var(--c-ink); }

/* 4) 标题锚点：h2 下方一条 44px 短杠，给每个板块一个视觉起点。
   只在带 eyebrow 的组头出现，避免每级标题都挂杠。 */
.cnct-head .cnct-h2 { position: relative; padding-bottom: 18px; }
.cnct-head .cnct-h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 44px; height: 3px;
    background: var(--c-accent);
    border-radius: var(--c-radius);
}
.cnct-head--center .cnct-h2::after { left: 50%; transform: translateX(-50%); }

/* 5) 描述文字（次要说明）统一提到 muted，正文对比更有主次 */
.cnct-head .cnct-p { color: var(--c-muted); }

/* 6) 分隔线统一到带灰的描边，深灰体系下更稳 */
.cnct-family__head { border-bottom-color: rgba(var(--c-dark-rgb), .12); }

/* 7) 深色 Hero 若被改回深底，浅灰带的收边线要收掉，免得出现多余横线 */
.cnct-hero.cnct-surface--tint { border-top: 0; }

/* ==========================================================================
   全白底安全网（2026-10-14）
   背景改成白色系之后，最要命的是那些「设计给深色底用」的文字—— 它们在
   深色区域里是白的，落到浅底上就变成白字白底。0,2,0 以上的选择器 + 必要时
   !important，把每一个硬编码白色的文字选择器在浅底区域里全部改写成深色。
   原则：任何 cnct-surface--ink-dark 区域（= 被改成浅色的区域）里不允许存在
   var(--c-white) 的文字色。
   ========================================================================== */

/* 7.1 内页横幅：面包屑 hover、数据条数字 */
.cnct-surface--ink-dark .cnct-crumbs a:hover { color: var(--c-accent) !important; }
.cnct-surface--ink-dark .cnct-band__meta b { color: var(--c-ink); }
.cnct-surface--ink-dark .cnct-band__meta div { color: var(--c-muted) !important; }
.cnct-surface--ink-dark .cnct-crumbs,
.cnct-surface--ink-dark .cnct-crumbs span { color: var(--c-muted) !important; }

/* 7.2 Hero：徽章分隔线、徽章数字、图标 */
.cnct-surface--ink-dark .cnct-hero__badges { border-top-color: rgba(var(--c-dark-rgb), .14); }
.cnct-surface--ink-dark .cnct-hero__badge b { color: var(--c-ink); }
.cnct-surface--ink-dark .cnct-hero__badge .cnct-i { color: var(--c-accent); }
.cnct-surface--ink-dark .cnct-hero__note { color: var(--c-muted) !important; }

/* 7.3 CTA：正文、附注、附注里的邮箱链接 */
.cnct-surface--ink-dark .cnct-cta h2 { color: var(--c-ink); }
.cnct-surface--ink-dark .cnct-cta .cnct-p { color: var(--c-body) !important; }
.cnct-surface--ink-dark .cnct-cta__note { color: var(--c-muted) !important; }
.cnct-surface--ink-dark .cnct-cta__note a { color: var(--c-accent) !important; }

/* 7.4 按钮：ghost-light（原为深底设计的浅描边按钮）与 white 按钮的 hover */
.cnct-surface--ink-dark .cnct-btn--ghost-light {
    border-color: rgba(var(--c-dark-rgb), .45);
    color: var(--c-ink) !important;
    background: rgba(var(--c-dark-rgb), .04);
}
.cnct-surface--ink-dark .cnct-btn--ghost-light:hover {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-page) !important;
}
.cnct-surface--ink-dark .cnct-btn--white { border-color: var(--c-line); }
.cnct-surface--ink-dark .cnct-btn--white:hover {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-page) !important;
}

/* 7.5 页脚：即使整体被改成浅底，也逐项兜住白色文字与 hover */
.cnct-surface--ink-dark .cnct-footer__contact b { color: var(--c-ink); }
.cnct-surface--ink-dark .cnct-footer__contact i,
.cnct-surface--ink-dark .cnct-footer__contact .cnct-i { color: var(--c-accent); }
.cnct-surface--ink-dark .cnct-footer p { color: var(--c-muted); }
.cnct-surface--ink-dark .cnct-footer h4 { color: var(--c-ink); }
.cnct-surface--ink-dark .cnct-footer ul a:hover,
.cnct-surface--ink-dark .cnct-footer__bottom a:hover { color: var(--c-accent) !important; }
.cnct-surface--ink-dark .cnct-footer__logo { background: transparent; padding-left: 0; }

/* 7.6 通用兜底：任何浅底区域里的 eyebrow 用强调色而非「深底浅字」色 */
.cnct-surface--ink-dark .cnct-eyebrow { color: var(--c-accent); }
.cnct-surface--ink-dark .cnct-eyebrow::before { background: var(--c-accent); }

/* ==========================================================================
   2026-10-14(v2) 产品详情图文区 · 原生重建
   客户要求：不要直接贴详情长图，改为按长图的版式与信息结构重建网页内容。
   五个区块：① ODM/OEM 介绍 ② 应用场景 ③ 规格尺寸（动态 SVG，数字读各产品
   meta）④ 工艺细节 ⑤ 装箱清单。白色卡片容器，浅灰分隔线，红点睛。
   ========================================================================== */
.cnct-pdet {
    max-width: 980px;
    margin: 0 auto;
    background: var(--c-white);
    border: 1px solid rgba(var(--c-dark-rgb), .10);
    border-radius: var(--c-radius);
    box-shadow: 0 1px 2px rgba(var(--c-dark-rgb), .04);
    overflow: hidden;
}

/* ① ODM & OEM：左图右卖点 */
.cnct-pdet__intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 30px;
    align-items: center;
    padding: 34px 34px 28px;
}
.cnct-pdet__media {
    margin: 0;
    border-radius: var(--c-radius);
    overflow: hidden;
    background: var(--c-light-2);
    aspect-ratio: 4 / 3;
}
.cnct-pdet__media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.cnct-pdet__h3 { margin: 0 0 18px; font-size: 24px; font-weight: 800; color: var(--c-ink); }
.cnct-pdet__pitch .cnct-pdet__h3 { margin-bottom: 22px; }
.cnct-pdet__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cnct-pdet__chips li { display: flex; gap: 14px; align-items: flex-start; }
.cnct-pdet__chips b { display: block; font-size: 16px; color: var(--c-ink); }
.cnct-pdet__chips span { display: block; font-size: 13.5px; color: var(--c-muted); margin-top: 2px; }
.cnct-pdet__chip-ic {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--c-dark-rgb), .07);
    color: var(--c-dark);
    border-radius: 50%;
}
.cnct-pdet__chip-ic svg { width: 20px; height: 20px; }

/* 四枚徽章条 */
.cnct-pdet__badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(var(--c-dark-rgb), .08);
}
.cnct-pdet__badges li {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 20px 12px;
    text-align: center;
    font-size: 13px; font-weight: 700; color: var(--c-ink);
}
.cnct-pdet__badges li + li { border-left: 1px solid rgba(var(--c-dark-rgb), .08); }
.cnct-pdet__badge-ic {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-dark);
    color: #fff;
    border-radius: 50%;
}
.cnct-pdet__badge-ic svg { width: 19px; height: 19px; }

/* 区块通用标题 */
.cnct-pdet__block { padding: 30px 34px 34px; border-top: 1px solid rgba(var(--c-dark-rgb), .08); }

/* ② 应用场景 */
.cnct-pdet__places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cnct-pdet__place {
    background: var(--c-light-2);
    border-radius: var(--c-radius);
    padding: 18px 18px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.cnct-pdet__place b { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--c-ink); }
.cnct-pdet__place > span { font-size: 13.5px; color: var(--c-muted); line-height: 1.55; }
.cnct-pdet__pin {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-dark); color: #fff;
    border-radius: 50%;
}
.cnct-pdet__pin svg { width: 13px; height: 13px; }

/* ③ 规格尺寸：SVG + 数字 chips */
.cnct-pdet__tag {
    display: inline-block;
    margin: 2px 0 10px;
    padding: 6px 14px;
    background: var(--c-dark); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    border-radius: var(--c-radius);
}
.cnct-pdet__svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 6px auto 0; }
.cnct-pdw-body   { fill: rgba(var(--c-dark-rgb), .06); stroke: var(--c-dark); stroke-width: 2; }
.cnct-pdw-top    { fill: rgba(var(--c-dark-rgb), .10); stroke: var(--c-dark); stroke-width: 2; }
.cnct-pdw-side   { fill: rgba(var(--c-dark-rgb), .14); stroke: var(--c-dark); stroke-width: 2; }
.cnct-pdw-slot   { fill: none; stroke: var(--c-dark); stroke-width: 2; }
.cnct-pdw-line   { stroke: rgba(var(--c-dark-rgb), .55); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cnct-pdw-handle { fill: var(--c-dark); }
.cnct-pdw-lock   { fill: var(--c-dark); }
.cnct-pdw-ground { stroke: rgba(var(--c-dark-rgb), .30); stroke-width: 1.5; }
.cnct-pdw-arr    { stroke: var(--c-dark); stroke-width: 1.6; fill: var(--c-dark); }
.cnct-pdw-maxwin { fill: rgba(216,34,43,.05); stroke: var(--c-accent); stroke-width: 1.4; stroke-dasharray: 6 4; }
.cnct-pdw-callout rect { fill: var(--c-white); stroke: rgba(var(--c-dark-rgb), .35); stroke-width: 1.2; }
.cnct-pdw-callout .cnct-pdt-l { font: 700 10.5px var(--c-font-head, sans-serif); letter-spacing: .08em; fill: var(--c-muted); text-anchor: middle; }
.cnct-pdw-callout .cnct-pdt-v { font: 800 15px var(--c-font-head, sans-serif); fill: var(--c-ink); text-anchor: middle; }
.cnct-pdw-callout .cnct-pdt-l--acc { fill: var(--c-accent); }
.cnct-pdw-maxcall rect { fill: var(--c-white); stroke: var(--c-accent); stroke-width: 1.4; }
.cnct-pdw-maxcall .cnct-pdt-l { font: 700 10.5px var(--c-font-head, sans-serif); letter-spacing: .08em; fill: var(--c-accent); text-anchor: middle; }
.cnct-pdw-maxcall .cnct-pdt-v { font: 800 14px var(--c-font-head, sans-serif); fill: var(--c-ink); text-anchor: middle; }
.cnct-pdet__dimrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.cnct-pdet__dimchip {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(var(--c-dark-rgb), .18);
    border-radius: var(--c-radius);
    font-size: 14px; font-weight: 800; color: var(--c-ink);
}
.cnct-pdet__dimchip b { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted); }
.cnct-pdet__dimchip--accent { border-color: var(--c-accent); color: var(--c-accent); }
.cnct-pdet__dimchip--accent b { color: var(--c-accent); }
.cnct-pdet__nodata {
    margin: 8px 0 0;
    padding: 16px 18px;
    background: var(--c-light-2);
    border-radius: var(--c-radius);
    font-size: 14px; color: var(--c-muted);
}

/* ④ 工艺细节 */
.cnct-pdet__craft { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cnct-pdet__feat {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--c-light-2);
    border-radius: var(--c-radius);
    padding: 18px;
}
.cnct-pdet__num {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-dark); color: #fff;
    border-radius: var(--c-radius);
    font-size: 13px; font-weight: 800;
}
.cnct-pdet__feat h4 { margin: 2px 0 4px; font-size: 15.5px; color: var(--c-ink); }
.cnct-pdet__feat p { margin: 0; font-size: 13.5px; color: var(--c-muted); line-height: 1.55; }

/* ⑤ 装箱清单 */
.cnct-pdet__boxsum { margin: -6px 0 18px; font-size: 14px; color: var(--c-muted); }
.cnct-pdet__kit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cnct-pdet__kit li { background: var(--c-light-2); border-radius: var(--c-radius); padding: 16px; }
.cnct-pdet__kit b { display: block; font-size: 14px; color: var(--c-ink); margin-top: 10px; }
.cnct-pdet__kit span { display: block; font-size: 12.5px; color: var(--c-muted); margin-top: 4px; line-height: 1.5; }
.cnct-pdet__kit-ic {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--c-dark-rgb), .07); color: var(--c-dark);
    border-radius: 50%;
}
.cnct-pdet__kit-ic svg { width: 17px; height: 17px; }

/* 响应式 */
@media (max-width: 900px) {
    .cnct-pdet__intro { grid-template-columns: 1fr; padding: 24px 20px 22px; gap: 22px; }
    .cnct-pdet__places { grid-template-columns: 1fr; }
    .cnct-pdet__craft { grid-template-columns: 1fr; }
    .cnct-pdet__kit { grid-template-columns: repeat(2, 1fr); }
    .cnct-pdet__badges { grid-template-columns: repeat(2, 1fr); }
    .cnct-pdet__badges li:nth-child(3) { border-left: 0; }
    .cnct-pdet__badges li:nth-child(n+3) { border-top: 1px solid rgba(var(--c-dark-rgb), .08); }
    .cnct-pdet__block { padding: 24px 20px 26px; }
}
@media (max-width: 560px) {
    .cnct-pdet__kit { grid-template-columns: 1fr; }
}

/* ==========================================================================
   2026-10-14（v2.43.0）对齐 homeboxsolutions.com 的视觉语言
   ---------------------------------------------------------------------------
   参考站实测参数（抓包取自其主题 CSS，非目测）：
     · 字体：标题 Poppins 500 / 正文 IBM Plex Sans 400 / 导航 Poppins 500
     · 标题颜色 #020618，正文 #4a5565，主色亮绿（本站不采用，保留 CNCT 红）
     · 容器 1210px（与本站一致）；页头 75px 白色 + 导航右对齐
     · 全方角：.button{border-radius:0}，卡片无圆角、无软阴影
     · 按钮：.97em 字号、bolder、letter-spacing .03em、2px 描边款、hover 压暗
     · 箭头概念：区块用细边线 / 图片承载层次，不靠投影

   本站的适配策略：只搬「版式语言」，不搬配色（客户 2026-10-14 明确保留
   灰白 + CNCT 红）。所以下面做的是：字族/字重收敛 → 方角扁平化 →
   按钮瘦身 → 卡片改用细边线表达边界 → 板块节奏收紧。
   ========================================================================== */

/* 1) 标题：Archivo 窄体（font-stretch 82%）退役 —— Poppins 没有宽度轴，
      那条规则已删除。字号/字重已在文件上方 .cnct-h1~.cnct-h4 定义；
      这里只清掉 font-stretch，并把字距归零（Poppins 是几何字，负字距会挤压）。 */
.cnct-h1,
.cnct-h2,
.cnct-pdet__h3 {
    font-stretch: normal;
    letter-spacing: -0.005em;
}

/* 1b) 全站标题字重统一到 600。旧代码里有 43 处 font-weight: 700/800 散落在
       各组件上（.cnct-ib__title、.cnct-prose h3、.cnct-pdet__h3 …）。
       与其逐条改，这里用 0,1,1 的元素选择器一次性收口 —— 块级标题一律 600，
       小号标签（eyebrow / 表格 th / 数字角标）保留 700 的对比。 */
.cnct-page h1, .cnct-page h2, .cnct-page h3, .cnct-page h4, .cnct-page h5,
.cnct-band h1, .cnct-band h2, .cnct-band h3,
.cnct-hero h1, .cnct-cta h2, .cnct-footer h4,
.cnct-pcat__name, .cnct-why-card__title, .cnct-family__title {
    font-weight: 600;
}
.cnct-prose h3, .cnct-prose h4 { font-weight: 600; }

/* 2) 按钮：参考站口径 —— 方角、更细的身、hover 不用位移（改用压暗/换色）。
      padding 从 15/30 收到 13/26，字号 15→14.5，字距 .03em。 */
.cnct-btn {
    border-radius: var(--c-radius);
    padding: 13px 26px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .03em;
}
.cnct-btn:hover { transform: none; }
.cnct-btn--primary:hover { background: var(--c-accent-d); border-color: var(--c-accent-d); }
.cnct-btn--ghost:hover { background: var(--c-dark); border-color: var(--c-dark); }
.cnct-btn--white:hover { background: rgba(255, 255, 255, .18); border-color: var(--c-white); color: var(--c-white) !important; }
.cnct-btn--ghost-light:hover { background: rgba(255, 255, 255, .18); border-color: var(--c-white); color: var(--c-white) !important; }

/* 3) 卡片：常驻阴影换成 1px 细边线（参考站的层次语言），hover 只加深边线 +
      极浅浮起。全白底那会儿靠阴影分辨层级的做法在方角体系下会显脏。 */
.cnct-card {
    border: 1px solid var(--c-line);
    box-shadow: none;
}
.cnct-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--c-dark-rgb), .34);
    box-shadow: var(--c-shadow);
}
/* 3a) 纯展示卡（.cnct-card--plain）：卡片不是链接、点了也没反应的那种 ——
       OEM 页的应用场景卡 / 车间设备卡。保留常驻细边线，但 hover 不浮起、
      不加深边线、不出阴影，避免给客户「这里能点开」的错觉。
      ⚠️ 必须排在上面 .cnct-card:hover 之后：两者优先级同为 (0,2,0)。 */
.cnct-card--plain { cursor: default; }
.cnct-card--plain:hover {
    transform: none;
    border-color: var(--c-line);
    box-shadow: none;
}
.cnct-card--plain .cnct-card__body { padding: 22px 22px 24px; gap: 8px; }
.cnct-card--plain .cnct-card__title { font-size: 18px; }
/* 3b) 步骤图卡（.cnct-ib--hasimg = 带车间实拍的工序卡）：加细边线 + 白底 + 内边距，
       做成参考站那种「图片卡」。裸 .cnct-ib 不加边框 —— 它是没有底色的纯文字列
       （能力条的 4 个图标框），加了框文字会贴住边线。 */
.cnct-ib--hasimg {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    padding: 0 0 20px;
    transition: border-color .22s ease;
}
.cnct-ib--hasimg .cnct-ib__title,
.cnct-ib--hasimg .cnct-ib__text { padding-left: 18px; padding-right: 18px; }
.cnct-ib--hasimg:hover { border-color: rgba(var(--c-dark-rgb), .30); }

/* 4) 图片一律方角（参考站没有一张圆角图） */
.cnct-photo, .cnct-photo img, .cnct-pimg, .cnct-split__media img,
.cnct-pcat__card .cnct-ph, .cnct-pdet__media img, .cnct-photo-pair__a,
.cnct-photo-pair__b { border-radius: var(--c-radius); }

/* 5) 图标盒：圆形底改成方底（参考站的图标块是方的） */
.cnct-ib__icon, .cnct-card__icon { border-radius: var(--c-radius); }

/* 6) 形态收口：徽章 / 标签 / 数字角标一律方角 */
.cnct-hero__badge, .cnct-card__meta, .cnct-pdet__tag,
.cnct-family__tag, .cnct-specs__pill { border-radius: var(--c-radius); }

/* 7) 表单：参考站输入框是 1px 细边的方框 */
.cnct-field input, .cnct-field textarea, .cnct-field select,
.cnct-form input, .cnct-form textarea, .cnct-form select {
    border-radius: var(--c-radius);
}

/* 8) 首页品类卡（.cnct-ccards）—— 对齐参考站 Product Categories 的方角图片卡：
      图在上、标题 + 一句话在下，卡片之间只用 1px 边线拉开，不用投影。
      五个品类 + 一张深色 OEM/ODM 卡 = 3 列 × 2 排。
      ⚠️ 标题/说明是 <span>，颜色必须写在 span 上：.cnct-page a 的 (0,1,1) 会压过
      继承下来的颜色，写在这里才能压住链接色。 */
.cnct-ccards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.cnct-ccard {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    text-decoration: none !important;
    transition: border-color .22s ease;
}
.cnct-ccard:hover { border-color: rgba(var(--c-dark-rgb), .38); }
.cnct-ccard .cnct-ph { border-radius: var(--c-radius); }
.cnct-ccard__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}
.cnct-ccard__title {
    font-family: var(--c-font-head);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}
.cnct-ccard__text { font-size: 14px; line-height: 1.55; color: var(--c-muted); }
.cnct-ccard__meta {
    margin-top: auto;
    padding-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.cnct-ccard__chev { flex: 0 0 auto; transition: transform .22s ease; }
.cnct-ccard:hover .cnct-ccard__title { color: var(--c-accent); }
.cnct-ccard:hover .cnct-ccard__chev { transform: translateX(3px); }
/* 深色 OEM/ODM 卡已退役（2026-10-16 客户指示：首页与 OEM 页同步去掉色块）——
   卡片回落 .cnct-ccard 白底基础样式，与五个品类卡一致；
   class cnct-ccard--oem 保留在 PHP 里，日后想恢复深色卡再补样式即可。 */

@media (max-width: 1100px) {
    .cnct-ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 767px) {
    .cnct-ccards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   OEM / ODM 页专属皮肤（2026-10-15 客户设计规范）
   --------------------------------------------------------------------------
   客户给的规范：森林绿主色 + 石板灰辅色 + 12px 圆角 + 多层柔和阴影 +
   浅冷灰底 / 纯白交替 + 段间距 80px + 绿色大写段标签（kicker）。
   全站其余页面仍是「CNCT 红 + 方角扁平 + 常驻细边线」体系 —— 下面每一行都
   挂在 .cnct-page--oem 作用域里，靠覆盖 CSS 变量生效，不会漏到别的页面。
   回滚：去掉 OEM 页外层容器的 cnct-page--oem 类即可（一行）。
   ⚠️ 本段必须留在文件最后：多处以同名/同优先级覆盖前面的全站规则。
   ========================================================================== */
.cnct-page--oem {
    /* 本页专属色板（客户规范原文） */
    --oem-green: #2E7D32;
    --oem-green-d: #1E5631;
    --oem-orange: #EA580C;
    --oem-slate: #0F172A;
    --oem-slate-2: #1E293B;
    --oem-body: #475569;
    --oem-light: #F8FAFC;
    --oem-line: #E2E8F0;
    --oem-shadow: 0 10px 15px -3px rgba(15, 23, 42, .07), 0 4px 6px -4px rgba(15, 23, 42, .05);
    --oem-shadow-lift: 0 20px 25px -5px rgba(15, 23, 42, .13), 0 8px 10px -6px rgba(15, 23, 42, .06);

    /* 在本页作用域内改写全站令牌 —— 绿 + 12px 圆角 + 冷灰底 */
    --c-accent: #2E7D32;
    --c-accent-d: #1E5631;
    --c-accent-rgb: 46, 125, 50;
    --c-radius: 12px;
    --c-cream: #F8FAFC;
    --c-line: #E2E8F0;
    --c-ink: #0F172A;
    --c-dark: #1E293B;
    --c-dark-rgb: 30, 41, 59;
    --c-body: #475569;
    --c-muted: #64748B;
    --c-shadow: 0 10px 15px -3px rgba(15, 23, 42, .07), 0 4px 6px -4px rgba(15, 23, 42, .05);
    /* 段间距 80px（客户规范） */
    --c-sec: 80px;
    color: var(--oem-body);
}
.cnct-page--oem .cnct-h1 { letter-spacing: -.022em; }
.cnct-page--oem .cnct-h2 { letter-spacing: -.018em; }
.cnct-page--oem .cnct-p { color: var(--oem-body); line-height: 1.68; }

/* 段标签 kicker —— 全站红小标题已按客户要求删除，这里仅在本页恢复为绿色大写。
   由 cnct_oem_kicker() 输出（cnct_eyebrow() 全站返回空串，本页走自己的渲染器）。 */
.cnct-page--oem .cnct-kicker {
    display: block;
    font-family: var(--c-font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--oem-green);
    margin: 0 0 14px;
}
.cnct-page--oem .cnct-head { max-width: 780px; margin-bottom: 50px; }
.cnct-page--oem .cnct-head--center { text-align: center; }

/* 按钮：绿色实心 + 圆角 + 悬停浮起阴影（客户要求 smooth hover state） */
.cnct-page--oem .cnct-btn { border-radius: var(--c-radius); }
.cnct-page--oem .cnct-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -8px rgba(46, 125, 50, .55);
}

/* --------------------------------------------------------------------------
   S1 OEM & ODM SOLUTIONS 面板（2026-10-22 按参考稿：左主图 + 右 2×2 卡 + 底部绿条）
   -------------------------------------------------------------------------- */
.cnct-oemsol__head { text-align: center; margin: 0 0 34px; }
.cnct-oemsol__h2 { margin: 0; font-family: var(--c-font-head); font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: #131A1E; letter-spacing: .01em; }
.cnct-oemsol__h2 span { color: #131A1E; } /* 2026-10-22 客户指示：标题全黑 */
.cnct-oemsol__sub { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: #131A1E; }
.cnct-oemsol { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; }
.cnct-oemsol__main { background: #fff; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.cnct-oemsol__mainph { flex: 1 1 auto; }
.cnct-oemsol__mainph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnct-oemsol__legend { display: flex; justify-content: center; gap: 26px; }
.cnct-oemsol__legend span { display: grid; grid-template-columns: 26px auto; column-gap: 8px; align-items: center; font-size: 12px; line-height: 1.35; color: #131A1E; }
.cnct-oemsol__legend i { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
.cnct-oemsol__cards { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.cnct-oemsol__card { background: #fff; padding: 20px 22px; display: flex; flex-direction: column; }
.cnct-oemsol__t { margin: 0 0 14px; font-family: var(--c-font-head); font-size: 17px; font-weight: 700; letter-spacing: .02em; color: #0C4A3E; }
.cnct-oemsol__note { margin: auto 0 0; padding-top: 12px; font-size: 12.5px; color: #5B6470; }
.cnct-oemsol__rals { display: flex; gap: 14px; }
.cnct-oemsol__ral { display: grid; justify-items: center; gap: 5px; font-size: 11px; color: #5B6470; text-align: center; }
.cnct-oemsol__ral i { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #D8DDDF; }
.cnct-oemsol__ral em { font-style: normal; font-weight: 700; color: #131A1E; }
.cnct-oemsol__pics { display: flex; gap: 12px; }
.cnct-oemsol__pic { flex: 1 1 0; display: grid; justify-items: center; gap: 7px; }
.cnct-oemsol__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cnct-oemsol__pic .cnct-ph { width: 100%; padding: 0; }
.cnct-oemsol__pic em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #131A1E; }
.cnct-oemsol__logo {
    width: 100%; aspect-ratio: 4 / 3; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #9aa0a5 0%, #6b7176 55%, #565c61 100%);
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.cnct-oemsol__quick { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; align-items: center; }
.cnct-oemsol__qpic img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.cnct-oemsol__steps { display: grid; gap: 10px; }
.cnct-oemsol__step { display: flex; align-items: center; gap: 10px; }
.cnct-oemsol__step b {
    flex: none; width: 34px; height: 34px; border-radius: 8px; background: #0C4A3E; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.cnct-oemsol__step span { flex: 1 1 auto; font-size: 13px; font-weight: 700; color: #131A1E; }
.cnct-oemsol__step .cnct-i, .cnct-oemsol__step svg { color: #0C4A3E; flex: none; }
/* 2026-10-22 二次简化：SOLUTIONS 段 = 标题 + 一张全宽大图（原面板/网格规则不再渲染） */
.cnct-oemsol__wide { max-width: 1210px; margin: 0 auto; }
.cnct-oemsol__wide img { width: 100%; display: block; }
.cnct-oemsol__wide .cnct-ph { padding: 0; }
/* 2026-10-22 客户指示：底部绿条删除（cnct-oemsol__bar 规则留档不再渲染） */
@media (max-width: 767px) {
    .cnct-oemsol__rals { flex-wrap: wrap; }
    .cnct-oemsol__pics { flex-direction: column; }
    .cnct-oemsol__legend { gap: 14px; flex-wrap: wrap; }
}

/* 2026-10-22 内页「标题 + 一张全宽大图」通用样式（OEM 能力段等） */
.cnct-secwide { max-width: 1210px; margin: 30px auto 0; }
.cnct-secwide .cnct-ph { padding: 0; }
.cnct-secwide .cnct-ph--photo img { position: static; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   S0 横幅（2026-10-22 客户指示：简单单图 banner + 标题，去蓝遮罩）
   -------------------------------------------------------------------------- */
.cnct-page--oem .cnct-oemhero {
    background: #101511;
    padding: 56px 0 64px;
}
.cnct-page--oem .cnct-oemhero.cnct-band--img { background: #101511; }
/* 蓝色 #0F172A 遮罩改中性黑轻渐变，仅保证白字可读 */
.cnct-page--oem .cnct-oemhero .cnct-band__veil { background: linear-gradient(180deg, rgba(8, 10, 8, .38) 0%, rgba(8, 10, 8, .58) 100%) !important; }
.cnct-oemhero--simple .cnct-oemhero__copy { max-width: 760px; }
.cnct-oemhero__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 56px;
    align-items: center;
    margin-top: 26px;
}
.cnct-oemhero__copy { max-width: 660px; }
.cnct-oemhero__copy .cnct-h1 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.16; }
.cnct-oemhero__copy .cnct-btn-row { margin-top: 30px; }
/* 信任徽章条：贴在两个按钮下面 */
.cnct-page--oem .cnct-oemhero .cnct-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}
.cnct-page--oem .cnct-oemhero .cnct-badge {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .16);
    border-radius: 10px;
    padding: 13px 15px;
}
.cnct-page--oem .cnct-oemhero .cnct-badge__icon {
    width: 36px; height: 36px;
    background: rgba(46, 125, 50, .22);
    color: #7DD68A;
    border-radius: 9px;
}
.cnct-page--oem .cnct-oemhero .cnct-badge__text b { color: #FFFFFF; font-size: 14px; }
.cnct-page--oem .cnct-oemhero .cnct-badge__text span { color: rgba(255, 255, 255, .62); }
/* 左右分屏图：两张等高照片并排（左边成品 / 右边车间） */
.cnct-oemhero__visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.cnct-oemhero__shot { display: flex; }
.cnct-page--oem .cnct-oemhero__shot .cnct-ph {
    width: 100%;
    aspect-ratio: auto;
    min-height: 330px;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .7);
}
.cnct-page--oem .cnct-oemhero__shot .cnct-ph--photo { background: #0B1220; }

/* --------------------------------------------------------------------------
   S1 应用场景卡：常驻柔和阴影 + 悬停图片放大（客户要求 hover zoom）
   -------------------------------------------------------------------------- */
.cnct-page--oem .cnct-card {
    border-color: var(--oem-line);
    border-radius: var(--c-radius);
    box-shadow: var(--oem-shadow);
    overflow: hidden;
}
.cnct-page--oem .cnct-card:hover {
    transform: translateY(-4px);
    border-color: rgba(46, 125, 50, .34);
    box-shadow: var(--oem-shadow-lift);
}
.cnct-page--oem .cnct-card__title { font-weight: 600; color: var(--oem-slate); }
.cnct-page--oem .cnct-card__text { color: var(--oem-body); }
.cnct-page--oem .cnct-card .cnct-ph { border-radius: 0; overflow: hidden; }
.cnct-page--oem .cnct-card .cnct-ph img { transition: transform .45s ease; }
.cnct-page--oem .cnct-card:hover .cnct-ph img { transform: scale(1.06); }
.cnct-page--oem .cnct-card__body { padding: 24px 24px 26px; gap: 9px; }
.cnct-page--oem .cnct-grid--gap { gap: 28px; }

/* --------------------------------------------------------------------------
   S2 四大能力卡：白底 + 绿图标方框 + 细边线
   -------------------------------------------------------------------------- */
.cnct-page--oem .cnct-oemcards .cnct-ib {
    background: var(--c-white);
    border: 1px solid var(--oem-line);
    border-radius: var(--c-radius);
    padding: 30px 28px 32px;
    gap: 16px;
    box-shadow: var(--oem-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cnct-page--oem .cnct-oemcards .cnct-ib:hover {
    transform: translateY(-4px);
    border-color: rgba(46, 125, 50, .34);
    box-shadow: var(--oem-shadow-lift);
}
.cnct-page--oem .cnct-ib__icon { border-radius: 11px; }
.cnct-page--oem .cnct-ib__title { font-weight: 600; color: var(--oem-slate); font-size: 19px; }
.cnct-page--oem .cnct-ib__text { color: var(--oem-body); font-size: 15.5px; line-height: 1.66; }

/* --------------------------------------------------------------------------
   S3 四步流程：横排 + 01–04 编号 + 虚线时间轴
   -------------------------------------------------------------------------- */
.cnct-oemflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}
.cnct-oemflow__step {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--oem-line);
    border-radius: var(--c-radius);
    padding: 28px 24px 30px;
    box-shadow: var(--oem-shadow);
}
.cnct-oemflow__num {
    display: block;
    font-family: var(--c-font-head);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--oem-green);
    margin-bottom: 14px;
}
.cnct-oemflow__step h3 { font-size: 18px; margin: 0 0 8px; color: var(--oem-slate); }
.cnct-oemflow__step p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--oem-body); }
/* 虚线连接段（编号圆心高度对齐） */
.cnct-oemflow__step + .cnct-oemflow__step::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 44px;
    width: 26px;
    border-top: 2px dotted #CBD5E1;
}

/* --------------------------------------------------------------------------
   S4 户外耐候：左要点列表（粗体小标题）+ 右配图
   -------------------------------------------------------------------------- */
.cnct-page--oem .cnct-oemdura .cnct-list--icon li { align-items: flex-start; gap: 14px; }
.cnct-page--oem .cnct-oemdura .cnct-list--icon li .cnct-i {
    width: 22px; height: 22px; margin-top: 2px; color: var(--oem-green);
}
.cnct-page--oem .cnct-oemdura .cnct-list--icon b {
    display: block;
    font-family: var(--c-font-head);
    font-size: 17px;
    font-weight: 600;
    color: var(--oem-slate);
    margin-bottom: 4px;
}
.cnct-page--oem .cnct-oemdura .cnct-ph {
    border-radius: 14px;
    box-shadow: var(--oem-shadow-lift);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   S5 工厂实力：深石板数据栏（绿色数字）+ 设备卡
   -------------------------------------------------------------------------- */
.cnct-oemstats {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--oem-shadow-lift);
}
.cnct-oemstats .cnct-figures { border-top: 0; border-bottom: 0; }
.cnct-oemstats .cnct-figure { border-right-color: rgba(255, 255, 255, .10); }
.cnct-oemstats .cnct-figure__icon { color: #7DD68A; }
.cnct-oemstats .cnct-figure__num { color: #FFFFFF; }
.cnct-oemstats .cnct-figure__label { color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   S6 为什么选我们：浅底上的三张白卡
   -------------------------------------------------------------------------- */
.cnct-page--oem .cnct-oemtrio .cnct-ib {
    background: var(--c-white);
    border: 1px solid var(--oem-line);
    border-radius: var(--c-radius);
    padding: 32px 28px;
    box-shadow: var(--oem-shadow);
}
.cnct-page--oem .cnct-oemtrio .cnct-ib__title { font-size: 20px; }
.cnct-page--oem .cnct-oemtrio .cnct-ib__text { font-size: 15.5px; line-height: 1.66; }

/* --------------------------------------------------------------------------
   S7 询盘（2026-10-22 客户指示：改回之前的深石板大卡形式）
   -------------------------------------------------------------------------- */
/* 2026-10-22 客户指示：OEM 页各段背景统一白色 #FFFFFF（去掉奶油灰交替），
   底部询盘区深蓝大卡保持不变 */
.cnct-page--oem .cnct-sec--light { background: #FFFFFF; }
.cnct-oemquote {
    display: grid;
    grid-template-columns: 1fr 1.02fr;
    gap: 46px;
    align-items: start;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 18px;
    padding: 52px 48px;
    box-shadow: var(--oem-shadow-lift);
}
.cnct-oemquote .cnct-h2 { color: #FFFFFF; margin: 0; }
.cnct-oemquote .cnct-kicker { color: #7DD68A; }
.cnct-oemquote__lead { color: rgba(255, 255, 255, .70) !important; margin: 16px 0 0; }
.cnct-oemquote__list { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.cnct-oemquote__row { display: flex; gap: 13px; align-items: flex-start; }
.cnct-oemquote__row .cnct-i { color: #7DD68A; margin-top: 3px; }
.cnct-oemquote__row b {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    margin-bottom: 3px;
}
.cnct-oemquote__row span { font-size: 15.5px; color: rgba(255, 255, 255, .92); line-height: 1.5; }
.cnct-oemquote__row a { color: #FFFFFF !important; font-weight: 600; }
.cnct-oemquote__nda {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-top: 30px;
    padding: 16px 18px;
    border: 1px dashed rgba(255, 255, 255, .30);
    border-radius: 11px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}
.cnct-oemquote__nda .cnct-i { flex: none; margin-top: 2px; color: #7DD68A; }
.cnct-oemquote__nda a { color: #FFFFFF !important; font-weight: 600; text-decoration: underline !important; }
/* 表单卡在白底上，字段圆角 12px（继承 --c-radius） */
.cnct-page--oem .cnct-formcard { border-color: var(--oem-line); }
.cnct-page--oem .cnct-formcard .cnct-form__note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--oem-line);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--c-muted);
}
.cnct-page--oem .cnct-formcard .cnct-form__note .cnct-i { flex: none; margin-top: 2px; color: var(--oem-green); }

@media (max-width: 1024px) {
    .cnct-oemhero__grid { grid-template-columns: 1fr; gap: 40px; }
    .cnct-oemhero__copy { max-width: none; }
    .cnct-oemflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cnct-oemflow__step + .cnct-oemflow__step::before { display: none; }
    .cnct-oemquote { grid-template-columns: 1fr; gap: 36px; padding: 40px 32px; }
}
@media (max-width: 767px) {
    .cnct-page--oem { --c-sec: 64px; }
    .cnct-oemhero__visual { gap: 12px; }
    .cnct-page--oem .cnct-oemhero__shot .cnct-ph { min-height: 220px; }
    .cnct-page--oem .cnct-oemhero .cnct-badges { grid-template-columns: 1fr; }
    .cnct-oemflow { grid-template-columns: 1fr; gap: 18px; }
    .cnct-oemquote { padding: 32px 22px; }
    .cnct-oemstats .cnct-figure { padding: 24px 20px; }
}

/* ==========================================================================
   HOME UI2（2026-10-20）：客户 UI 设计稿皮肤 —— 深松绿 #0C4A3E，scoped 在
   .cnct-home--ui2，不动全站「方角 + CNCT 红」体系。回滚 = 去掉外层 class。
   ========================================================================== */
.cnct-home--ui2 {
    --ui2: #0C4A3E;
    --ui2-d: #09382F;
    --ui2-ink: #131A1E;
    --ui2-body: #5B6470;
    --ui2-line: #E5E9EC;
    --ui2-bg: #F6F8F8;
    --ui2-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --c-radius: 8px;
}
.cnct-home--ui2 .cnct-wrap { max-width: 1210px; }

/* ---- 段骨架 ---- */
.cnct-home--ui2 .cnct-ui2sec { padding: 72px 0; background: #fff; }
.cnct-home--ui2 .cnct-ui2sec--gray { background: var(--ui2-bg); }
.cnct-home--ui2 .cnct-ui2sec--dark { background: var(--ui2-d); }
.cnct-home--ui2 .cnct-ui2sec--flush { padding: 0 0 72px; }
.cnct-home--ui2 .cnct-ui2sec__more { text-align: center; margin-top: 34px; }
.cnct-home--ui2 .cnct-ui2head { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.cnct-home--ui2 .cnct-ui2head h2 {
    margin: 0 0 10px; font-family: var(--c-font-head);
    font-size: clamp(24px, 3vw, 32px); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ui2-ink);
}
.cnct-home--ui2 .cnct-ui2sec--dark .cnct-ui2head h2 { color: #fff; }
.cnct-home--ui2 .cnct-ui2head p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ui2-body); }
.cnct-home--ui2 .cnct-ui2sec--dark .cnct-ui2head p { color: rgba(255,255,255,.66); }

/* ---- 按钮 ---- */
.cnct-home--ui2 .cnct-uibtn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--ui2); color: #fff !important; text-decoration: none !important;
    font-size: 14px; font-weight: 600; letter-spacing: .02em;
    padding: 12px 24px; border-radius: 8px; transition: background .22s ease, transform .22s ease;
}
.cnct-home--ui2 .cnct-uibtn:hover { background: var(--ui2-d); transform: translateY(-1px); }
.cnct-home--ui2 .cnct-uibtn--ghost { background: transparent; border: 1px solid var(--ui2); color: var(--ui2) !important; }
.cnct-home--ui2 .cnct-uibtn--ghost:hover { background: var(--ui2); color: #fff !important; }

/* ---- ① Hero ---- */
.cnct-home--ui2 .cnct-ui2hero { position: relative; overflow: hidden; background: #0B3E34; color: #fff; min-height: 620px; display: flex; align-items: center; }
/* ---- 2026-10-21 深绿区可选背景图（Hero / 工序段）---- */
.cnct-home--ui2 .cnct-ui2hero__bg, .cnct-home--ui2 .cnct-uiproc__bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
}
.cnct-home--ui2 .cnct-ui2hero__veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, rgba(9,56,47,.98) 0%, rgba(12,74,62,.90) 52%, rgba(12,74,62,.70) 100%);
}
.cnct-home--ui2 .cnct-uiproc__veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(9,56,47,.97) 0%, rgba(9,56,47,.88) 100%);
}
.cnct-home--ui2 .cnct-ui2hero > .cnct-wrap, .cnct-home--ui2 .cnct-ui2sec--dark > .cnct-wrap { position: relative; z-index: 2; }
.cnct-home--ui2 .cnct-ui2sec--img { position: relative; overflow: hidden; }
.cnct-home--ui2 .cnct-ui2hero--img .cnct-ui2hero__shape, .cnct-home--ui2 .cnct-ui2sec--img .cnct-uiproc__shape { opacity: .35; }
/* 2026-10-21 客户要求 banner 绿色滤镜全去：有背景图时隐藏 shape */
.cnct-home--ui2 .cnct-ui2hero--img .cnct-ui2hero__shape { display: none; }
.cnct-home--ui2 .cnct-ui2hero__shape {
    position: absolute; inset: 0 0 0 auto; width: 58%;
    background: linear-gradient(200deg, #14584A 0%, var(--ui2) 62%);
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
.cnct-home--ui2 .cnct-ui2hero__grid {
    position: relative; display: grid; grid-template-columns: 1fr;
    gap: 46px; align-items: center; padding: 74px 0 78px;
}
.cnct-home--ui2 .cnct-ui2hero__tag {
    display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: #9CC8BC;
    border: 1px solid rgba(156,200,188,.45); border-radius: 999px; padding: 7px 16px; margin-bottom: 20px;
}
.cnct-home--ui2 .cnct-ui2hero__h1 {
    margin: 0 0 16px; font-family: var(--c-font-head);
    font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; line-height: 1.12; color: #fff;
    max-width: 620px; /* 2026-10-21 banner 大标题过长，限宽强制分两行 */
}
.cnct-home--ui2 .cnct-ui2hero__lead { margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.82); max-width: 560px; }
.cnct-home--ui2 .cnct-ui2hero__chips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 26px; }
.cnct-home--ui2 .cnct-ui2hero__chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.9);
}
.cnct-home--ui2 .cnct-ui2hero__chip .cnct-i { color: #7FC0AD; }
.cnct-home--ui2 .cnct-ui2hero__sub { display: flex; max-width: 470px; background: #fff; border-radius: 999px; padding: 5px; }
.cnct-home--ui2 .cnct-ui2hero__sub input {
    flex: 1 1 auto; border: 0; outline: none; background: transparent;
    padding: 10px 18px; font-size: 14px; color: var(--ui2-ink); min-width: 0;
}
.cnct-home--ui2 .cnct-ui2hero__sub button {
    flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--ui2); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.cnct-home--ui2 .cnct-ui2hero__sub button:hover { background: var(--ui2-d); }
.cnct-home--ui2 .cnct-ui2hero__visual { position: relative; }
.cnct-home--ui2 .cnct-ui2hero__visual .cnct-ph { box-shadow: 0 24px 48px -18px rgba(0,0,0,.45); }

/* ---- ② 品类 5 卡 ---- */
.cnct-home--ui2 .cnct-uicats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.cnct-home--ui2 .cnct-uicat {
    position: relative; display: flex; flex-direction: column; text-decoration: none !important;
    background: #fff; border: 1px solid var(--ui2-line); border-radius: var(--c-radius);
    overflow: hidden; box-shadow: var(--ui2-shadow); transition: transform .22s ease, box-shadow .22s ease;
}
.cnct-home--ui2 .cnct-uicat:hover { transform: translateY(-4px); box-shadow: 0 18px 28px -12px rgba(12,74,62,.22); }
.cnct-home--ui2 .cnct-uicat__num {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    width: 30px; height: 30px; border-radius: 8px; background: var(--ui2); color: #fff;
    font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.cnct-home--ui2 .cnct-uicat__body {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 13px 14px;
}
.cnct-home--ui2 .cnct-uicat__name { font-size: 15px; font-weight: 600; color: var(--ui2-ink); }
.cnct-home--ui2 .cnct-uicat:hover .cnct-uicat__name { color: var(--ui2); }
.cnct-home--ui2 .cnct-uicat__go {
    width: 26px; height: 26px; border-radius: 50%; background: var(--ui2-bg);
    display: inline-flex; align-items: center; justify-content: center; color: var(--ui2);
}
.cnct-home--ui2 .cnct-uicat:hover .cnct-uicat__go { background: var(--ui2); color: #fff; }
.cnct-home--ui2 .cnct-uicat:hover .cnct-ph img { transform: scale(1.06); }

/* ---- ③ 工厂规模 ---- */
.cnct-home--ui2 .cnct-uifactory { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.cnct-home--ui2 .cnct-uifactory__photos { display: grid; gap: 10px; }
.cnct-home--ui2 .cnct-uifactory__panel { display: flex; flex-direction: column; justify-content: flex-start; }
.cnct-home--ui2 .cnct-uifactory__panel .cnct-ui2head { text-align: left; margin: 0 0 28px; }
.cnct-home--ui2 .cnct-uifactory__panel .cnct-ui2head h2 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.15; }
.cnct-home--ui2 .cnct-uistats { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; margin-top: auto; }
.cnct-home--ui2 .cnct-uistat {
    display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center;
    border: 1px solid var(--ui2-line); border-radius: var(--c-radius);
    background: #fff; padding: 22px 24px; box-shadow: var(--ui2-shadow);
}
.cnct-home--ui2 .cnct-uistat__icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ui2); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.cnct-home--ui2 .cnct-uistat__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cnct-home--ui2 .cnct-uistat__num {
    font-family: var(--c-font-head); font-size: 30px; line-height: 1.05; font-weight: 700;
    color: var(--ui2-ink); letter-spacing: -0.5px;
}
.cnct-home--ui2 .cnct-uistat__num sup {
    font-size: 13px; font-weight: 700; color: var(--ui2-ink);
    vertical-align: 14px; margin-left: 2px; letter-spacing: 0; line-height: 1;
}
.cnct-home--ui2 .cnct-uistat__label { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--ui2-ink); }

/* ---- ④ 设备 4 图 ---- */
.cnct-home--ui2 .cnct-uieqs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cnct-home--ui2 .cnct-uieq { margin: 0; background: #fff; border: 1px solid var(--ui2-line); border-radius: var(--c-radius); overflow: hidden; box-shadow: var(--ui2-shadow); }
.cnct-home--ui2 .cnct-uieq figcaption { display: grid; gap: 5px; padding: 15px 16px 17px; }
.cnct-home--ui2 .cnct-uieq strong { font-size: 15px; color: var(--ui2-ink); }
.cnct-home--ui2 .cnct-uieq span { font-size: 13px; line-height: 1.55; color: var(--ui2-body); }
.cnct-home--ui2 .cnct-uieq:hover .cnct-ph img { transform: scale(1.06); }

/* ---- ⑤ 工序 2×4（深绿底） ---- */
.cnct-home--ui2 .cnct-uiprocs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cnct-home--ui2 .cnct-uiproc { position: relative; margin: 0; border-radius: var(--c-radius); overflow: hidden; }
.cnct-home--ui2 .cnct-uiproc figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 8px; padding: 26px 12px 10px;
    background: linear-gradient(transparent, rgba(7,40,34,.88));
    color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}
.cnct-home--ui2 .cnct-uiproc__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 20px; border-radius: 5px; background: rgba(255,255,255,.16);
    font-size: 11px; font-weight: 700;
}

/* ---- ⑥ OEM 方案（2026-10-22 客户指示：简化为标题 + 一张全宽大图，原网格规则不再渲染） ---- */
.cnct-home--ui2 .cnct-uioem__wide { max-width: 1210px; margin: 0 auto; }
.cnct-home--ui2 .cnct-uioem__wide .cnct-ph { padding: 0; }
.cnct-home--ui2 .cnct-uioem__wide .cnct-ph--photo img { position: static; width: 100%; height: auto; }
/* 2026-10-21 对齐参考稿：编号改绿底圆角块白字（留档，不再渲染） */
.cnct-home--ui2 .cnct-uioem__imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; }
.cnct-home--ui2 .cnct-uioem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cnct-home--ui2 .cnct-uioem__item {
    display: grid; grid-template-columns: 1fr 118px; gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--ui2-line); border-radius: var(--c-radius);
    padding: 20px 20px 22px; box-shadow: var(--ui2-shadow);
}
/* 2026-10-21 对齐参考稿：编号改绿底圆角块白字 */
.cnct-home--ui2 .cnct-uioem__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 12px; border-radius: 10px;
    background: var(--ui2); color: #fff; font-family: 'Anton CNCT', var(--c-font-head);
    font-size: 26px; line-height: 1;
}
.cnct-home--ui2 .cnct-uioem__item strong { display: block; font-size: 19px; margin-bottom: 7px; }
.cnct-home--ui2 .cnct-uioem__item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ui2-body); }
.cnct-home--ui2 [data-cnct-block="home2-oem"] .cnct-ui2head--split { text-align: center; }
.cnct-home--ui2 [data-cnct-block="home2-oem"] .cnct-ui2head--split p { font-weight: 700; color: var(--ui2-ink); }
/* 2026-10-21 CUSTOM BRANDING 改 YOUR LOGO 样块 */
.cnct-home--ui2 .cnct-uibrand { display: grid; justify-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ui2-ink); }
.cnct-home--ui2 .cnct-uibrand em {
    font-style: normal; width: 96px; height: 58px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #9aa0a5 0%, #6b7176 55%, #565c61 100%);
    color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
    border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.18);
}
/* 2026-10-21 BRANDING 三块支持上传图片 */
.cnct-home--ui2 .cnct-uibrand .cnct-ph { width: 96px; height: 58px; padding: 0; border-radius: 3px; }
.cnct-home--ui2 .cnct-uibrand .cnct-ph--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.cnct-home--ui2 .cnct-uioem__img .cnct-ph { border-radius: var(--c-radius); }
.cnct-home--ui2 .cnct-ui2head--split .cnct-ui2head__green { color: var(--ui2); }
/* 2026-10-21 OEM 标题全黑 */
.cnct-home--ui2 [data-cnct-block="home2-oem"] .cnct-ui2head--split .cnct-ui2head__green { color: var(--ui2-ink); }

/* ---- ⑦ RAL 色卡 / 品牌工艺 ---- */
.cnct-home--ui2 .cnct-uioem__colors { background: var(--ui2-bg); border-radius: var(--c-radius); padding: 26px 28px; margin-top: 30px; }
.cnct-home--ui2 .cnct-uioem__colors .cnct-uiral__col { border: 0; box-shadow: none; background: transparent; padding: 0; }
.cnct-home--ui2 .cnct-uiral { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.cnct-home--ui2 .cnct-uiral__col { background: #fff; border: 1px solid var(--ui2-line); border-radius: var(--c-radius); padding: 24px 26px 26px; box-shadow: var(--ui2-shadow); }
.cnct-home--ui2 .cnct-uiral__col > strong { display: block; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ui2-ink); margin-bottom: 18px; }
.cnct-home--ui2 .cnct-uiral__sws { display: flex; flex-wrap: wrap; gap: 18px 22px; }
.cnct-home--ui2 .cnct-uiral__sw { display: grid; justify-items: center; gap: 7px; font-size: 11.5px; line-height: 1.4; text-align: center; color: var(--ui2-body); }
.cnct-home--ui2 .cnct-uiral__sw i { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ui2-line), var(--ui2-shadow); }
.cnct-home--ui2 .cnct-uiral__brand { display: flex; flex-wrap: wrap; gap: 12px; }
.cnct-home--ui2 .cnct-uiral__brand span {
    flex: 1 1 30%; text-align: center; padding: 14px 10px; border-radius: var(--c-radius);
    background: var(--ui2-bg); border: 1px dashed var(--ui2-line);
    font-size: 13.5px; font-weight: 600; color: var(--ui2-ink);
}

/* ---- ⑧ DFM ---- */
/* 2026-10-21 DFM 段对齐参考稿：左双图并排 + 右标题/绿色副题/3 要点卡/深绿格式条 */
.cnct-home--ui2 .cnct-uidfm { display: grid; grid-template-columns: 1.05fr 1fr; gap: 42px; align-items: center; }
.cnct-home--ui2 .cnct-uidfm__img { align-self: center; }
.cnct-home--ui2 .cnct-uidfm__img .cnct-ph { width: 100%; }
/* 2026-10-21 客户反馈：段加高 + 排版留呼吸感 + 大标题黑色 */
.cnct-home--ui2 .cnct-ui2sec--dfm { padding: 104px 0; }
.cnct-home--ui2 .cnct-uidfm__h2 {
    margin: 0 0 14px; font-family: var(--c-font-head);
    font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.15; color: var(--ui2-ink);
}
.cnct-home--ui2 .cnct-uidfm__sub { margin: 0 0 28px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ui2); }
.cnct-home--ui2 .cnct-uidfm__boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.cnct-home--ui2 .cnct-uidfm__box {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--ui2-line); border-radius: var(--c-radius); padding: 14px 15px; background: #fff;
    box-shadow: var(--ui2-shadow);
}
.cnct-home--ui2 .cnct-uidfm__box > span {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--ui2);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.cnct-home--ui2 .cnct-uidfm__box strong { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ui2-ink); }
.cnct-home--ui2 .cnct-uidfm__box p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ui2-body); }
.cnct-home--ui2 .cnct-uidfm__formats {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ui2); color: #fff; border-radius: var(--c-radius);
    padding: 11px 18px; font-size: 13px; font-weight: 600;
}
.cnct-home--ui2 .cnct-uidfm__formats .cnct-i { flex: 0 0 auto; }

/* ---- ⑨ 品质测试 ---- */
/* ---- ⑨ 品质（2026-10-21 参考稿：标题左上 + 左双图 + 右 2×2 卡 + 底部报告条） ---- */
.cnct-home--ui2 .cnct-uiq2__h2 {
    margin: 0 0 34px; max-width: 640px; text-align: center; margin-left: auto; margin-right: auto;
    font-family: var(--c-font-head);
    font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.18; color: var(--ui2-ink);
}
.cnct-home--ui2 .cnct-uiq2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 10px; align-items: stretch; }
.cnct-home--ui2 .cnct-uiq2__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-self: stretch; }
.cnct-home--ui2 .cnct-uiq2__imgs .cnct-ph { padding: 0; aspect-ratio: auto; height: 100%; }
.cnct-home--ui2 .cnct-uiq2__cards { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.cnct-home--ui2 .cnct-uiq2__card {
    display: flex; flex-direction: column; background: #fff; overflow: hidden;
}
.cnct-home--ui2 .cnct-uiq2__card strong { display: block; padding: 12px 14px; font-size: 13.5px; line-height: 1.35; color: var(--ui2-ink); }
.cnct-home--ui2 .cnct-uiq2__card .cnct-ph { flex: 1 1 auto; }
.cnct-home--ui2 .cnct-uiq2__card .cnct-ph--photo { height: 100%; }
.cnct-home--ui2 .cnct-uiq2__card .cnct-ph--photo img { position: static; width: 100%; height: 100%; object-fit: cover; }
.cnct-home--ui2 .cnct-uiq2__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-top: 10px; padding: 14px 20px; background: #fff;
}
.cnct-home--ui2 .cnct-uiq2__note { display: flex; align-items: center; gap: 14px; color: var(--ui2); }
.cnct-home--ui2 .cnct-uiq2__note span { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ui2-ink); }
.cnct-home--ui2 .cnct-uiq2__dl {
    display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px;
    background: var(--ui2); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none;
}
.cnct-home--ui2 .cnct-uiq2__dl:hover { background: var(--ui2-ink); }
@media (max-width: 1024px) {
    .cnct-home--ui2 .cnct-uiq2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .cnct-home--ui2 .cnct-uiq2__imgs, .cnct-home--ui2 .cnct-uiq2__cards { grid-template-columns: 1fr 1fr; }
    .cnct-home--ui2 .cnct-uiq2__imgs { grid-template-columns: 1fr; }
    .cnct-home--ui2 .cnct-uiq2__bar { flex-direction: column; align-items: flex-start; }
}

/* ---- ⑨ 旧品质布局（留档，hidden 兜底） ---- */
.cnct-home--ui2 .cnct-uiq { display: grid; grid-template-columns: 1fr 1.1fr; gap: 42px; align-items: center; }
.cnct-home--ui2 .cnct-uiq__imgs { display: grid; gap: 18px; }
.cnct-home--ui2 .cnct-uiq__panel .cnct-ui2head { text-align: left; margin: 0 0 20px; }
.cnct-home--ui2 .cnct-uiq__list { display: grid; gap: 12px; margin-bottom: 24px; }
.cnct-home--ui2 .cnct-uiq__item { display: flex; gap: 12px; align-items: flex-start; }
.cnct-home--ui2 .cnct-uiq__item > span {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(12,74,62,.08); color: var(--ui2);
    display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.cnct-home--ui2 .cnct-uiq__item strong { font-size: 14.5px; color: var(--ui2-ink); }
.cnct-home--ui2 .cnct-uiq__item p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--ui2-body); }

/* ---- ⑩ 图墙 ---- */
.cnct-home--ui2 .cnct-uigal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cnct-home--ui2 .cnct-uigal__cell { margin: 0; border-radius: var(--c-radius); overflow: hidden; }
.cnct-home--ui2 .cnct-uigal__cell:hover .cnct-ph img { transform: scale(1.06); }

/* ---- ⑪ 系列横幅 + 产品墙 ---- */
.cnct-home--ui2 .cnct-uiseries {
    position: relative; min-height: 360px; display: flex; align-items: center;
    background-size: cover; background-position: center; margin-bottom: 46px;
}
.cnct-home--ui2 .cnct-uiseries::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,56,47,.72) 0%, rgba(9,56,47,.28) 55%, rgba(9,56,47,0) 100%); }
.cnct-home--ui2 .cnct-uiseries__copy { position: relative; max-width: 560px; padding: 70px 0 70px 0; color: #fff; }
.cnct-home--ui2 .cnct-wrap .cnct-uiseries__copy { padding-left: 0; }
.cnct-home--ui2 .cnct-uiseries__copy h2 {
    margin: 0 0 12px; font-family: var(--c-font-head);
    font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.cnct-home--ui2 .cnct-uiseries__copy p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); }
.cnct-home--ui2 .cnct-uiprods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cnct-home--ui2 .cnct-uiprod {
    display: block; text-decoration: none !important; background: #fff;
    border: 1px solid var(--ui2-line); border-radius: var(--c-radius); overflow: hidden;
    box-shadow: var(--ui2-shadow); transition: transform .22s ease, box-shadow .22s ease;
}
.cnct-home--ui2 .cnct-uiprod:hover { transform: translateY(-4px); box-shadow: 0 18px 28px -12px rgba(12,74,62,.22); }
.cnct-home--ui2 .cnct-uiprod__name { display: block; padding: 13px 16px 2px; font-size: 15px; font-weight: 600; color: var(--ui2-ink); }
.cnct-home--ui2 .cnct-uiprod:hover .cnct-uiprod__name { color: var(--ui2); }
.cnct-home--ui2 .cnct-uiprod__sku { display: block; padding: 0 16px 15px; font-size: 12.5px; color: var(--ui2-body); }
.cnct-home--ui2 .cnct-uiprod:hover .cnct-ph img { transform: scale(1.06); }

/* ---- ⑫ 证书墙 ---- */
/* 2026-10-21 证书墙改「挂墙相框」式：深木框 + 白内衬，两行居中，第二行略小 */
.cnct-home--ui2 .cnct-uicerts { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 34px 30px; }
.cnct-home--ui2 .cnct-uicert {
    margin: 0; padding: 9px; border-radius: 3px;
    background: linear-gradient(155deg, #7b5330 0%, #5a3a1e 45%, #3c2512 100%);
    box-shadow: 0 10px 22px rgba(30, 20, 8, 0.28), 0 2px 5px rgba(30, 20, 8, 0.2);
}
.cnct-home--ui2 .cnct-uicert .cnct-ph { display: block; width: auto; }
.cnct-home--ui2 .cnct-uicert .cnct-ph { display: block; width: auto; padding: 0; }
.cnct-home--ui2 .cnct-uicert .cnct-ph--photo img {
    position: static; inset: auto; display: block; width: auto; height: 250px; object-fit: contain;
    border: 7px solid #f6f3ec; background: #fff; box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.cnct-home--ui2 .cnct-uicert:nth-child(n+5) .cnct-ph--photo img { height: 205px; }

/* 2026-10-21 客户要求只留一个大图片框：波浪/网格规则全部作废，.cnct-uipt 仅承载单图 */
@media (min-width: 1025px) { .cnct-home--ui2 .cnct-uipt { padding-bottom: 0; } }
/* ---- ⑬ 合伙人图墙（2026-10-21 改单一大图片框，16x9） ---- */
.cnct-home--ui2 .cnct-uipt { display: block; }
.cnct-home--ui2 .cnct-uipt .cnct-ph { width: 100%; padding: 0; }

/* ---- 图片 hover 缩放（全皮肤通用） ---- */
.cnct-home--ui2 .cnct-ph { overflow: hidden; }
.cnct-home--ui2 .cnct-ph img { transition: transform .35s ease; }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
    .cnct-home--ui2 .cnct-uicats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cnct-home--ui2 .cnct-uieqs, .cnct-home--ui2 .cnct-uiprocs, .cnct-home--ui2 .cnct-uigal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cnct-home--ui2 .cnct-uioem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cnct-home--ui2 .cnct-uifactory, .cnct-home--ui2 .cnct-uidfm, .cnct-home--ui2 .cnct-uiq,
    .cnct-home--ui2 .cnct-uiral { grid-template-columns: 1fr; }
    .cnct-home--ui2 .cnct-uidfm__boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .cnct-home--ui2 .cnct-ui2hero__grid { grid-template-columns: 1fr; padding: 54px 0 60px; }
    .cnct-home--ui2 .cnct-ui2hero { min-height: 0; }
    .cnct-home--ui2 .cnct-ui2sec--dfm { padding: 60px 0; }
    .cnct-home--ui2 .cnct-ui2hero__shape { width: 100%; clip-path: none; opacity: .5; }
    .cnct-home--ui2 .cnct-uicats, .cnct-home--ui2 .cnct-uieqs, .cnct-home--ui2 .cnct-uiprocs,
    .cnct-home--ui2 .cnct-uioem, .cnct-home--ui2 .cnct-uigal,
    .cnct-home--ui2 .cnct-uiprods, .cnct-home--ui2 .cnct-uipt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cnct-home--ui2 .cnct-uicert { padding: 6px; }
    .cnct-home--ui2 .cnct-uicert .cnct-ph--photo img { height: 150px; border-width: 5px; }
    .cnct-home--ui2 .cnct-uicert:nth-child(n+5) .cnct-ph--photo img { height: 130px; }
    .cnct-home--ui2 .cnct-uicerts { gap: 18px 14px; }
    .cnct-home--ui2 .cnct-uicats { grid-template-columns: 1fr; }
    .cnct-home--ui2 .cnct-uistats { grid-template-columns: 1fr 1fr; }
    .cnct-home--ui2 .cnct-ui2sec { padding: 54px 0; }
}

/* ==========================================================================
   Anton —— 客户指定标题字体 Geometr706 BlkCn BT（Bitstream 商用）的免费替代。
   拿到授权字体文件后：替换 fonts/ 下文件并把 family 名改成一致即可，只动这里。
   仅用于首页 UI2 大标题（Anton 无粗体，font-weight 固定 400 防止伪加粗）。
   ========================================================================== */
@font-face {
    font-family: 'Anton CNCT';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/anton-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Anton CNCT';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/anton-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.cnct-home--ui2 .cnct-ui2head h2,
.cnct-home--ui2 .cnct-ui2hero__h1,
.cnct-home--ui2 .cnct-uiseries__copy h2 {
    font-family: 'Anton CNCT', var(--c-font-head);
    font-weight: 400; letter-spacing: .02em;
}
.cnct-home--ui2 .cnct-ui2head h2 { font-size: clamp(26px, 3.2vw, 36px); }
.cnct-home--ui2 .cnct-ui2hero__h1 { font-size: clamp(34px, 4.4vw, 52px); }
/* 设计稿细节：段标题下的小横线 */
.cnct-home--ui2 .cnct-ui2head h2::after {
    content: ''; display: block; width: 64px; height: 3px;
    background: var(--ui2); border-radius: 2px; margin: 14px auto 0;
}
.cnct-home--ui2 .cnct-ui2sec--dark .cnct-ui2head h2::after { background: #7FC0AD; }
.cnct-home--ui2 .cnct-uifactory__panel .cnct-ui2head h2::after,
.cnct-home--ui2 .cnct-uiq__panel .cnct-ui2head h2::after { margin-left: 0; }

/* ==========================================================================
   2026-10-22 全站字阶统一（客户指示：同类字体统一 —— 大标题与首页品牌标题体一致，
   小标题统一 Poppins 700）
   · 大标题（H1 / 段标题 H2）：Anton CNCT（客户指定 Geometr706 BlkCn BT 的替代）
     大写、统一字号、统一字距，段标题统一带短下划线
   · 小标题（H3 / 卡片标题 / 面板小标题）：Poppins 700 统一 19px
   · 段标签（kicker）：IBM Plex Sans 700 12.5px 大写（原已统一，不改）
   回滚：删除本块即可恢复各页原有字阶。
   ========================================================================== */
:root {
    --c-title-font: 'Anton CNCT', 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --c-h1-size: clamp(34px, 4.2vw, 52px);
    --c-h2-size: clamp(26px, 3vw, 36px);
    --c-sub-size: 19px;
}

/* ---- 大标题：H1 ---------------------------------------------------------- */
.cnct-page h1,
.cnct-page .cnct-h1,
.cnct-band h1,
.cnct-hero h1,
.cnct-home--ui2 .cnct-ui2hero__h1,
.cnct-page .cnct-oemhero__copy .cnct-h1 {
    font-family: var(--c-title-font);
    font-weight: 400;
    font-size: var(--c-h1-size);
    line-height: 1.12;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ---- 大标题：段标题 H2 --------------------------------------------------- */
.cnct-page h2,
.cnct-page .cnct-h2,
.cnct-page .cnct-oemsol__h2,
.cnct-page .cnct-ui2head h2,
.cnct-page .cnct-uidfm__h2,
.cnct-page .cnct-uiq2__h2,
.cnct-page .cnct-uifactory__panel .cnct-ui2head h2,
.cnct-page .cnct-uiseries__copy h2,
.cnct-page .cnct-cta h2,
.cnct-page .cnct-oemquote .cnct-h2 {
    font-family: var(--c-title-font);
    font-weight: 400;
    font-size: var(--c-h2-size);
    line-height: 1.14;
    letter-spacing: .02em;
    text-transform: uppercase;
}
/* 段标题统一短下划线（与首页 UI2 段头一致；深底/深卡内不画） */
.cnct-page .cnct-h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 16px 0 0;
    background: var(--c-accent);
}
.cnct-head--center .cnct-h2::after,
.cnct-page .cnct-head--center .cnct-h2::after { margin-left: auto; margin-right: auto; }
.cnct-sec--dark .cnct-h2::after,
.cnct-oemquote .cnct-h2::after,
.cnct-page--oem .cnct-oemhero .cnct-h2::after { display: none; }

/* ---- 小标题 ------------------------------------------------------------- */
.cnct-page h3,
.cnct-page .cnct-h3,
.cnct-page .cnct-h4,
.cnct-page .cnct-ib__title,
.cnct-page .cnct-card__title,
.cnct-page .cnct-ptitle,
.cnct-page .cnct-oemsol__t,
.cnct-page .cnct-oemtrio .cnct-ib__title {
    font-family: var(--c-font-head);
    font-weight: 700;
    font-size: var(--c-sub-size);
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 640px) {
    :root {
        --c-h1-size: 30px;
        --c-h2-size: 23px;
        --c-sub-size: 17px;
    }
}

/* 2026-10-22 About 工序段右侧视频（与图片同框位，自适应宽度） */
.cnct-aboutvid {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #000;
}

/* ==========================================================================
   v2.66.0 OEM 页底部 FAQ（询盘表单上方，原生 <details> 手风琴，仅 OEM 页）
   ========================================================================== */
.cnct-oemfaq {
  max-width: 880px;
  margin: 32px auto 0;
  display: grid;
  gap: 12px;
  text-align: left;
}
.cnct-oemfaq__item {
  background: #FFFFFF;
  border: 1px solid #E3E8E3;
  border-radius: 12px;
  overflow: hidden;
}
.cnct-oemfaq__item[open] {
  border-color: #2E7D32;
  box-shadow: 0 6px 18px rgba(46, 125, 50, 0.08);
}
.cnct-oemfaq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 17px;
  color: #1F2937;
}
.cnct-oemfaq__item summary::-webkit-details-marker { display: none; }
.cnct-oemfaq__item summary:hover .cnct-oemfaq__q { color: #2E7D32; }
.cnct-oemfaq__q { transition: color 0.2s ease; }
.cnct-oemfaq__chev {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #EAF3EA;
  color: #2E7D32;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cnct-oemfaq__item[open] .cnct-oemfaq__chev {
  transform: rotate(45deg);
  background: #2E7D32;
  color: #FFFFFF;
}
.cnct-oemfaq__body {
  padding: 0 22px 18px;
  color: #4B5563;
  font-size: 15.5px;
  line-height: 1.75;
}

/* ==========================================================================
   v2.67.0 News 真实文章卡 + 文章详情排版
   ========================================================================== */
.cnct-newscard { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.cnct-newscard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(17, 24, 39, 0.10); }
.cnct-newscard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #F3F4F6; border-radius: 4px; }
.cnct-newscard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnct-newscard__meta { font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; color: #6B7280; margin: 0 0 8px; }
.cnct-newscard__more { margin-top: auto; padding-top: 14px; display: inline-block; font-weight: 600; font-size: 14px; color: #D8222B; }

/* 文章详情 */
.cnct-newsband__meta { margin: 14px 0 0; font-size: 14px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.85); }
.cnct-article { text-align: left; }
.cnct-article p { line-height: 1.85; color: #374151; margin: 0 0 16px; }
.cnct-article h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 36px 0 14px; }
.cnct-article h3 { font-size: 18px; margin: 26px 0 10px; }
.cnct-article ul, .cnct-article ol { padding-left: 22px; margin: 0 0 18px; }
.cnct-article li { line-height: 1.8; color: #374151; margin-bottom: 8px; }
.cnct-article strong { color: #111827; }
.cnct-article a { color: #D8222B; }
.cnct-article-cta {
  margin-top: 44px;
  padding: 26px 28px;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #D8222B;
  background: #FAFAFA;
}
.cnct-article-cta h3 { margin: 0 0 8px; font-size: 19px; }
.cnct-article-cta p { margin: 0 0 16px; color: #4B5563; }

/* ==========================================================================
   v2.67.1 产品卡名称字号：所有产品名 2 行内展示完整
   （放在文件末尾以覆盖 .cnct-page .cnct-ptitle 的 --c-sub-size）
   ========================================================================== */
.cnct-pcard .cnct-ptitle,
.cnct-ccard .cnct-ccard__title {
    font-size: 15px;
    line-height: 1.4;
}