/* 源站主题（yardley）横向溢出兜底
 *
 * 为什么需要这个文件：
 *   源站的 .menu（顶部导航容器）在 @media only screen and (max-width:1280px)
 *   下会变成「抽屉」—— position:fixed; right:-241px，也就是刻意停在视口右侧外面。
 *   这个元素的右边界到 1521px，于是 documentElement.scrollWidth 变成 1382，
 *   1280 宽的屏幕上凭空多出一条横向滚动条。
 *   源站自己不处理（或者靠别的断点掩盖），这里显式兜一下。
 *
 * ⚠️ 只压横向：纵向必须留着，否则 header 的 position:fixed 吸顶会跟着失效。
 */
html,
body {
    overflow-x: hidden;
}

/* 右侧「双滚动条」收敛（用户 2026-10-07 反馈，PC + 移动都出现）
 *
 * 根因：`html` 和 `body` 同时带 `overflow-y: auto`（上面那条规则的
 * `overflow-x: hidden` 只压横向，纵向是初始值 auto），于是**两个元素
 * 各自都是潜在的滚动容器**。正常情况浏览器只用视口那一条，但一旦
 * body 的高度与 html 不同步（比如 body 撑出 11179px 而 html 仍是
 * auto），Chrome 会把滚动条画在 body 的右边缘 —— 而 body 右边缘
 * 因为负边距/百分比宽度落在视口内，于是视口右侧与body 右侧
 * 各出现一条，看起来就是「两条竖滚动条」。
 *
 * 正解：**只让 html 一个元素滚动**，body 不再是滚动容器。
 *
 * ⚠️⚠️ 关键坑（第一版写错过）：不能写成
 *     html { overflow-y: auto }  body { overflow-y: visible }
 * 因为 body 上一条规则已经给了 `overflow-x: hidden`，而
 * `overflow-x:hidden` + `overflow-y:visible` 是**非法组合** ——
 * 按 CSS 规范，visible 会被强制计算成 auto（规范原文：
 * "if one of overflow-x/y is neither visible nor clip,
 *  visible computes to auto"）。
 * 实测：规则确实被解析（body -> oy:visible），但 computed 仍是 auto，
 * 双滚动条照旧。**必须用 clip 代替 visible**（clip 不触发该降级）。
 *
 * ⚠️ 竖向滚动必须保留 —— header 是 position:fixed，
 *    一旦写成 overflow:hidden 会让吸顶完全失效。
 */
html {
    overflow-y: auto !important;
}
body {
    /* clip 而非 visible：visible 会与上面的 overflow-x:hidden 冲突并被降级。
       ⚠️ 但 clip/visible 在 body 上都会让 body 不再是滚动容器 ——
       这正是我们要的（滚动条只留 html 一条）。
       body 高度仍由内容撑开（offsetHeight 照常增长），
       所以纵向滚动完全由 html 承担，吸顶不受影响。 */
    overflow-y: clip !important;
}

/* 首页大 banner 高度兜底
 *
 * 为什么需要：
 *   Home_*.css 里 banner 这块的高度是**逐层继承**的 ——
 *     #c_static_001_P_1169-16773922386690 .e_bannerA-1            {height:100%}
 *     #c_static_001_P_1169-16773922386690 .swiper-container        {height:inherit}
 *     #c_static_001_P_1169-16773922386690 .swiper-wrapper         {height:inherit}
 *     #c_static_001_P_1169-16773922386690 .swiper-slide           {height:inherit}
 *   也就是说**最外层容器自身必须有个确定的高度**，否则 inherit 一路传下来全是 0
 *   ——实测 banner 容器和 slide 都只有 24px，图片被压成一条。
 *
 *   源站靠页面组件的 JS（needjs + upload/js/*.js）在运行时写入高度，
 *   那是源站 SaaS 的行为，本地这套 LiteCMS 没有对应的组件运行时。
 *   模板改用 index.php 派生的 $banners 后内容能出来了，但高度要自己兜住。
 *
 * ⚠️ 2026-10-06 改为**整屏 100vh**（原来是 calc(100vh - 176px)）：
 *   用户要求「自动识别屏幕然后全屏显示」。减去 176px 是为了避开吸顶页头，
 *   结果首屏 banner 永远差一屏。现在用 100vh 真正铺满视口；
 *   页头是 position:fixed 悬浮在上面的，不需要为它让出高度。
 *   min/max 兜底保留，防止超宽屏把图拉得过高、小屏什么都看不见。
 */
#c_static_001_P_1169-16773922386690 {
    height: 100vh !important;
    min-height: 480px !important;
    max-height: 100vh !important;
}

/* ⚠️ 手机竖屏全屏（2026-10-06）
 *
 * 现象：390×844 竖屏下 banner 只有 320px 高，页面首屏大半是空白。
 *
 * 真因：上面那条 `height:100vh` 只给了**最外层**的
 *   `#c_static_001_P_1169-…`，而 Home_*.min.css 在
 *   `@media screen and (max-width:768px)` 里把 swiper 容器**硬写死**成
 *     `.e_bannerA-1 .swiper-container{height:320px}`
 *   —— 320 是源站自己给移动端定的固定值，与视口高度无关。
 *   内层被钉死 320，外层的 100vh 完全传不进去。
 *
 * 做法：≤768px 时把 320px 覆盖成继承，逐层把高度打通到外层。
 *   `100dvh` 而不是 `100vh`：移动端浏览器地址栏收起/展开会改变
 *   视口高度，用 vh 会出现底部被截或留白，dvh 跟随实际可视高度。
 *   老浏览器不认识 dvh，所以前面留一条 100vh 兜底。
 *   `svh`（small viewport height）作为下限，保证地址栏展开时也够高。
 */
@media screen and (max-width: 768px) {
    /* 手机版 banner：只横向满页，不再竖向满屏（2026-10-08 用户改回）。
       外层不再强制 100dvh，交给下面的横幅高度撑开。 */
    #c_static_001_P_1169-16773922386690 {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #c_static_001_P_1169-16773922386690 .e_bannerA-1,
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .swiper-container,
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .swiper-wrapper {
        height: auto !important;
        min-height: 0 !important;
    }

    /* 横幅高度：视口宽度的 52%，封顶 300px、保底 180px。
       仅横向满页，竖向不占满屏幕。 */
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .swiper-slide,
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .p_img {
        height: 52vw !important;
        min-height: 180px !important;
        max-height: 300px !important;
    }

    /* 图片铺满横幅、不变形 */
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .p_img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* 文案跟桌面一致：标题 + 描述都显示（源站手机端把描述藏了） */
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .p_info {
        display: flex !important;
        width: 92% !important;
        max-width: 92% !important;
    }
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .p_btitle {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        font-size: 22px !important;
    }
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .p_summary {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        margin: 10px auto 0 !important;
    }
}

/* 首页 banner 的 <picture> 包裹层（2026-10-06 为 PC/MB 双图接入）
 *
 * 为什么必须补这一段：
 *   模板里 <img> 被包进 <picture>（<source media="(max-width:768px)"> 换移动图）。
 *   <picture> 默认是 display:inline —— 而 inline 元素**不能为子元素提供
 *   百分比高度参照**，于是内部 img 的 height:100%（源站
 *   `.e_bannerA-1 .p_img img{height:100%;object-fit:cover}`）会解析失败，
 *   表现为移动端 banner 图高度塌陷、只剩顶部一条。
 *   所以这里把 picture 提成块级并给满高，让 img 的百分比重新成立。
 *
 * ⚠️ 断点 768px 必须与内页 `.mobitem` 的切换断点一致：
 *    源站各页面 min.css 里是 `@media screen and (max-width:768px)`
 *    才把 .pcitem 隐藏、.mobitem 显示。两边不一致会出现
 *    「768~1024 之间首页换移动图、内页仍用桌面图」的错档。 */
#c_static_001_P_1169-16773922386690 .e_bannerA-1 .p_img picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* 平板/小笔记本横屏（769~1024）：源站在这一档给的是 height:100%，
 * 依赖组件运行时写入高度，本地没有 → 同样按视口高度兜住，
 * 但不强制 100dvh（桌面浏览器没有地址栏问题），留 620px 下限，
 * 避免矮窗口（如 1024×600）把图压成一条。 */
@media screen and (min-width: 769px) and (max-width: 1280px) {
    #c_static_001_P_1169-16773922386690 {
        height: 78vh !important;
        min-height: 420px !important;
        max-height: 100vh !important;
    }

    #c_static_001_P_1169-16773922386690 .e_bannerA-1,
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .swiper-container,
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .swiper-wrapper,
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .swiper-slide,
    #c_static_001_P_1169-16773922386690 .e_bannerA-1 .p_img {
        height: 100% !important;
    }
}

/* 首页 banner 右下角分页点（斜切平行四边形小方块，可点击切换）
 *
 * 源站真实做法：Home_*.min.css 里**只有**一句
 *   `#c_… .e_bannerA-1 .custom-bullet{background:#ccc}`
 * 方块的斜切造型和右下角定位在它自己的 SaaS 运行时里（本地没有），
 * 所以这里按用户截图复刻：三个约 14×20 的平行四边形，skew 制造斜边，
 * 当前项纯白、其余深蓝半透明，放在右下角。
 *
 * ⚠️ renderBullet 之前输出的是数字（源站 SSR 首屏确实是数字 TAB），
 *    用户要的是方块，所以在 yardley.js 里改成 span.y_bullet，
 *    这里配套给样式；两边必须同时改。
 */
#c_static_001_P_1169-16773922386690 .p_pagenation {
    position: absolute !important;
    right: 40px;
    bottom: 40px;
    z-index: 12;
    display: flex;
    gap: 10px;
    align-items: center;
    width: auto !important;
    text-align: right;
}

#c_static_001_P_1169-16773922386690 .p_pagenation .y_bullet {
    display: block;
    width: 14px;
    height: 20px;
    background: rgba(255, 255, 255, .35);
    transform: skewX(-20deg);
    cursor: pointer;
    transition: background .3s ease;
    border: 0;
    padding: 0;
}

#c_static_001_P_1169-16773922386690 .p_pagenation .y_bullet.swiper-pagination-bullet-active {
    background: #fff;
}

#c_static_001_P_1169-16773922386690 .p_pagenation .y_bullet:hover {
    background: rgba(255, 255, 255, .7);
}

/* 语言切换器：官方 {cms:langs} → 源站 .select > ul > li > a 结构
 *
 * 背景（2026-10-06 实测）：
 *   1) 源站这个下拉的样式写在每页各自的 CSS 里，且各页**完全一致**：
 *        #c_navigation_029_P_001-16723087710960 .select ul{display:none;
 *          position:absolute;top:70px;right:0px;background:#303234;
 *          width:130px;opacity:.95;color:#fff;z-index:9}
 *        #c_navigation_029_P_001-16723087710960 .select ul li{…}
 *        #c_navigation_029_P_001-16723087710960 .select ul li a{…}
 *        #c_navigation_029_P_001-16723087710960 .select ul li a:hover{…}
 *        #c_navigation_029_P_001-16723087710960 .select ul{right:-50px}
 *      **必须有 ul/li 两层才命中**。官方 {cms:langs} 走 Tpl::langLinks()，
 *      输出 <div class="langs"><a>…</a></div>，没有 ul/li → 一条都不命中。
 *      运行时由 initLangBox()（assets/yardley.js）把 <a> 包成 <ul><li>。
 *
 *   2) 源站只写了 display:none，**没有 :hover 展开规则** ——
 *      展开动作在它的 SaaS 运行时里（本地没有这套运行时），所以要补触发。
 *
 *   3) 源站 .select input 的 width/max-width 是百分比，套上<i> 图标后
 *      实测被压到 12px，语言名"Bahasa Indonesia"只露 2 个字母。
 *
 * 下面按「源站原值 + 只补缺失项」的原则写，不另创一套视觉。
 */

/* ---- 源站规则原样复制 ----
 * ⚠️ top 用 100% 而不是源站的 70px：
 *    源站 .select 本身有 70px 高，70px 恰好贴着它底部；
 *    本地 .select 只有 23px（地球 GIF 高度），照抄 70px 会让下拉悬空 47px，
 *    鼠标往下移的过程中脱离 :hover，菜单「还没到就消失」（2026-10-06 反馈）。
 *
 * ⚠️⚠️ 桥接区为什么用 :before 而不是 padding-top + background-clip:
 *    源站有**两条** .select ul 规则 —— 第 1 条在通用 CSS，
 *    第 2 条 `#c_… .select ul{right:-50px}` 在各页min.css 里**后加载**。
 *    试过 padding-top:20px + background-clip:content-box，
 *    实测 background-clip 被算成 border-box（padding 区照样着色 → 出现一条深色悬空块），
 *    权重不够压不住后加载的那条。
 *    改成 ::before 伪元素：它画在 ul 的背景之上，透明且不影响 ul 的 background。
 *
 *    ul 自身 top:100% 紧贴控件底边；::before 从 -20px 往上盖住这 20px 间隙，
 *    鼠标穿过它时仍在 .select 的 hover 范围内，不会中途收起。 */
#c_navigation_029_P_001-16723087710960 .select ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0px;
    background: #303234;
    width: 130px;
    opacity: .95;
    color: #fff;
    z-index: 9;
}

/* 透明桥接：盖住控件与下拉之间的 20px 间隙，维持 :hover 不断链 */
#c_navigation_029_P_001-16723087710960 .select ul:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
    background: transparent;
}

#c_navigation_029_P_001-16723087710960 .select ul li {
    margin: 0 auto;
    float: none;
}

#c_navigation_029_P_001-16723087710960 .select ul li a {
    line-height: 28px;
    padding: 0 10px;
    font-size: 14px;
    display: block;
    color: #fff;
    text-align: left;
    white-space: nowrap;
}

#c_navigation_029_P_001-16723087710960 .select ul li a:hover {
    background: #f98600;
    height: 28px;
}

/* ---- 展开触发（源站缺这段）----
   :hover 给桌面端；:focus-within 给键盘；
   .y_open 给触屏 —— 触屏点一下没有 :hover，只靠 focus-within 会在选完跳走后立刻收起。 */
#c_navigation_029_P_001-16723087710960 .select:hover ul,
#c_navigation_029_P_001-16723087710960 .select:focus-within ul,
#c_navigation_029_P_001-16723087710960 .select.y_open ul {
    display: block;
}

/* 当前语言项：langLinks() 给的是 class="on"，源站 CSS 没有为它定义任何样式 */
#c_navigation_029_P_001-16723087710960 .select ul li a.on {
    color: #f98600;
}

/* JS 尚未执行（还没转成 ul）时，<div class="langs"> 里的 <a> 会裸排到页面上。
   .y_langs_ul 是 initLangBox() 转换完成后加的标记。 */
#c_navigation_029_P_001-16723087710960 .select .langs:not(.y_langs_ul) {
    display: none;
}

/* 语言按钮本体：按源站原样复制。
 *
 * 源站（#c_navigation_029_P_001-16723087710960）原文：
 *   .select{width:auto;position:relative}
 *   .select:before{content:'\F229';position:absolute;right:0;top:0;
 *     font-family:bootstrap-icons !important;font-size:14px;color:#fff}
 *   .select input{background:none;border:none;padding-left:10px;
 *     cursor:pointer;font-size:16px;color:#fff;
 *     width:auto;max-width:0px;margin-left:15px}
 *
 * ⚠️ max-width:0px 是**源站本意**，不是 bug：语言名在框里是"永远看不见"的，
 *    整个控件就只露 :before 那个地球图标 + 右侧尖角。
 *    之前这里给 input 加了 min-width:96px 让"Bahasa Indonesia"显示出来，
 *    那是我的错 —— 用户要的就是源站那样"不显示当前语言"（2026-10-06 反馈）。 */
#c_navigation_029_P_001-16723087710960 .select {
    width: auto;
    position: relative;
    min-width: 46px;
    padding-right: 18px;          /* 给 :before 的下拉尖角留位 */
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 地球图标：直接用源站原始方案 —— <i class="iconfont map"> + 背景图 GIF
 *（一个会转的小地球，就是用户要的效果）。
 * 源站 CSS 原文：
 *   .map{width:23px;height:23px;background:url(../img/93432532-….gif) no-repeat
 *        center center;background-size:cover;display:inline-block;border-radius:50%}
 * 图片文件本地已有：assets/img/93432532-68f0-4ded-ad76-7c54a76210da.gif
 *
 * ⚠️ 不要改用 :before + bootstrap-icons 的 \F229 —— 那个码位在 bootstrap-icons
 *    里是 caret-down-fill（实心三角），画出来是尖角不是地球。踩过。 */
#c_navigation_029_P_001-16723087710960 .select .map {
    width: 23px;
    height: 23px;
    background: url(../img/93432532-68f0-4ded-ad76-7c54a76210da.gif) no-repeat center center;
    background-size: cover;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: 5px;
    flex: 0 0 auto;
}

/* 尖角（caret-down）：**要保留**。
   源站 .select 的视觉 = 地球 GIF + 右侧这个下拉尖角，
   源站原文：.select:before{content:'\F229';position:absolute;right:0;top:0;
                font-family:bootstrap-icons !important;font-size:14px;color:#fff}
   注意 \F229 在 bootstrap-icons 里是 caret-down-fill（实心三角），
   正是要的形状 —— 它跟地球是两回事：地球用 <i class="map"> 背景图，尖角用这个伪元素。 */
#c_navigation_029_P_001-16723087710960 .select:before {
    content: '\F229' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: bootstrap-icons !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #fff !important;
    pointer-events: none;
}

/* input 绝对定位移出布局流：源站 max-width:0 把文字压掉后它仍占高度，
   会把 select 顶高、导致下拉定位错位。源站 input 本就是透明的点击把手。 */
#c_navigation_029_P_001-16723087710960 .header .language .select input {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    background: none !important;
    outline: medium !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    font-size: 16px;
    border-radius: 2px;
    color: transparent !important;
    z-index: 1;                 /* 盖在图标上，整块都是点击热区 */
}

/* 滚动到顶部后页头变浅色时，图标跟着变深色（源站 .scroll .select 规则） */
#c_navigation_029_P_001-16723087710960 .select:before {
    color: #111;
}

/* 首页分类卡：淡出占位 LOGO 后变成纯文字卡
 *
 * 背景：
 *   LiteCMS 的 cms_arctype 没有图标字段，分类区块拿不到每个分类自己的图。
 *   复刻时用站点 LOGO 占位，但 15 张卡各印一个 LOGO 会盖住分类名、视觉上很脏。
 *   yardley.js 的 initCatCards() 识别出「与页头 LOGO 同源」的图并淡出，
 *   这里负责淡出后卡片的排版：图区高度归零、分类名居中、保留可点区域。 */
.y_cat_textonly .e_image-71 {
    display: none !important;
}

.y_cat_textonly .e_container-70,
.y_cat_textonly .cbox-70-0 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.y_cat_textonly .e_text-72 {
    width: 100%;
    text-align: center;
}

.y_cat_textonly .e_text-72 a {
    display: block;
    padding: 18px 10px;
    line-height: 1.5;
}

/* ================= 首页第 10 区「企业新闻」=================
 *
 * 需求（2026-10-06）：企业新闻只有 1 条，但那条正文里有 5 张图，
 * 要显示「里面的 4 个图片」→ 结构定为主卡 + 2×2 图网格。
 * 图由 assets/yardley.js 的 initCompanyNews() 从隐藏容器里抽出后写进
 * .y_cnews_grid（模板引擎没有 {php} 标签，正文里的 img 没法在模板层拆）。
 *
 * ⚠️ 为什么这整块要自己写样式：
 *   原来这里是 EXHIBITION 展柜，用的是 .e_container-33/.swiper.magnify 那套
 *   组件样式；换成企业新闻后结构完全变了，原组件样式一个都命中不了。
 *   视觉沿用源站新闻区（.kovant_news）那套：左大右小、日期在上、橙色短横分隔。
 */
#c_static_001_P_16921-17187954297120 .y_cnews_box {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

#c_static_001_P_16921-17187954297120 .y_cnews_main {
    flex: 0 0 46%;
    min-width: 0;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
}

#c_static_001_P_16921-17187954297120 .y_cnews_cover img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

#c_static_001_P_16921-17187954297120 .y_cnews_body {
    padding: 26px 30px 30px;
}

#c_static_001_P_16921-17187954297120 .y_cnews_date {
    margin: 0 0 10px;
    font-size: 15px;
    color: #999;
    font-family: 'Montserrat', sans-serif;
}

#c_static_001_P_16921-17187954297120 .y_cnews_line {
    width: 34px;
    height: 2px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: #f98600;
}

#c_static_001_P_16921-17187954297120 .y_cnews_title {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 600;
}

#c_static_001_P_16921-17187954297120 .y_cnews_title a {
    color: #333;
}

#c_static_001_P_16921-17187954297120 .y_cnews_summary {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    /* 印尼语正文很长，固定 3 行；配合 JS 清掉正文里的 <img>，
       避免和右侧 2×2 网格重复显示同一批图 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#c_static_001_P_16921-17187954297120 .y_cnews_summary img {
    display: none !important;
}

#c_static_001_P_16921-17187954297120 .y_cnews_more {
    display: inline-block;
    margin-top: 18px;
    font-size: 15px;
    color: #f98600;
}

/* 右侧 2×2 图网格 */
#c_static_001_P_16921-17187954297120 .y_cnews_grid {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

#c_static_001_P_16921-17187954297120 .y_cnews_cell {
    display: block;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
    transition: transform .35s ease, box-shadow .35s ease;
}

#c_static_001_P_16921-17187954297120 .y_cnews_cell:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

#c_static_001_P_16921-17187954297120 .y_cnews_cell img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
}

/* 隐藏容器：模板把正文原文放这儿等 JS 读，不是给人看的 */
#c_static_001_P_16921-17187954297120 .y_cnews_raw {
    display: none !important;
}

@media only screen and (max-width: 991px) {
    #c_static_001_P_16921-17187954297120 .y_cnews_box {
        flex-direction: column;
    }

    #c_static_001_P_16921-17187954297120 .y_cnews_main {
        flex: 0 0 auto;
    }

    #c_static_001_P_16921-17187954297120 .y_cnews_cover img {
        height: 300px;
    }

    #c_static_001_P_16921-17187954297120 .y_cnews_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #c_static_001_P_16921-17187954297120 .y_cnews_cell img {
        min-height: 150px;
    }
}

/* 下拉的横向位置：源站第 2 条 `#c_… .select ul{right:-50px}` 在各页 min.css 里
   后加载，会把上面第 1 条的 right:0 顶掉。源站本意就是右偏 50px（让下拉
   往左展开一点，视觉上对准地球图标下方），这里显式确认一次，
   免得换页面时偏移又变。 */
#c_navigation_029_P_001-16723087710960 .select ul {
    right: -50px;
}

/* 桥接伪元素同样要跟着 ul 的偏移走，否则间隙对不上（宽度 130px 的 ul 右移 50px后，
   桥接区也跟着移，正好衔接控件 —— 这是 :before 用 left/right:0 自适应的原因）。 */
#c_navigation_029_P_001-16723087710960 .select ul:before {
    left: -50px;
    right: -50px;
}

/* =====================================================================
   分页（.p_page 里的 {cms:pager}）
   ---------------------------------------------------------------------
   ⚠️ 为什么本地分页「乱了」：
   core 的 {cms:pager} 输出的是**通用后台样式**结构
       <div class="pager"><ul><li class="on"><a>上一页</a></li>…</ul></div>
   而源站（凡科 SaaS）输出的是
       <div class="page_con"><a class="page_a page_num current">1</a>…</div>
   源站全部 CSS 里**只存在 .page_con / .page_a 这两个类名**
   （site.css、ceccbootstrap.min.css、news_list_*.min.css 都只有它们），
   压根没有 .pager 的任何规则 → 本地分页是纯裸排：
   li 默认块级换行、字号继承正文、当前页没有任何视觉区分。

   这里不改 core、不改 {cms:pager} 的输出（那是引擎行为，多站点共用），
   而是把 .pager 的内部结构**在 CSS 层映射成 .page_a 的外观**：
   尺寸/圆角/配色逐条对齐 site.css 里真实的 .page_a 规则。
   .gap（省略号）与首页 ? 保持继承。
   ===================================================================== */
.p_page .pager {
    display: block;
    width: 100%;
    text-align: center;
    margin: 30px 0 10px;
    /* 清掉 .pager 作为块级默认带来的边距差异 */
    padding: 0;
}

.p_page .pager ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

/* li 本身只做布局，不给颜色 —— 颜色全在 a 上，与 .page_a 一致 */
.p_page .pager ul li {
    display: inline-block;
    margin: 0 3px;
    vertical-align: middle;
}

.p_page .pager ul li a {
    /* —— 以下数值直接抄 site.css 的 .page_a 家族 —— */
    display: inline-block;
    box-sizing: border-box;
    min-width: 30px;
    height: 30px;
    line-height: 28px;
    padding: 0 6px;
    text-align: center;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #8a8a8a;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    text-decoration: none;
    transition: color .2s, background-color .2s, border-color .2s;
}

.p_page .pager ul li a:hover {
    color: #fff;
    border-color: #aac8e4;
    background-color: #aac8e4;
}

/* 当前页：源站 site.css 里最后一条 .page_a.current 是橙色 #f98600（覆盖前面的蓝），
   这里跟随橙色，与源站列表页实测一致。 */
.p_page .pager ul li.on a,
.p_page .pager ul li a.current {
    background-color: #f98600;
    border-color: #f98600;
    border-width: 0;
    color: #fff;
    cursor: default;
}

.p_page .pager ul li.on a:hover,
.p_page .pager ul li a.current:hover {
    background-color: #f98600;
    color: #fff;
}

/* 首页 / 末页的「上一页」「下一页」在 core 里是普通 a（没有 disabled 类），
   只靠 href 指向当前页本身。视觉上做成禁用态更贴近源站的 .page_a.disabled，
   但**不能真的 disable** —— 那会让键盘/读屏用户失去「回到本页」的线索，
   所以保留可点，只加 disabled 的灰。 */
.p_page .pager ul li:first-child a[href$="page="] {
    color: #fff;
}

.p_page .pager ul li.gap {
    display: inline-block;
    padding: 0 4px;
    color: #8a8a8a;
    font-size: 14px;
    line-height: 30px;
}

/* 源站省略号是单独的一个 .page_a 方块（「…」包在灰底方块里），
   core 给的是裸文本 li.gap，这里补上同样的方块外框。 */
.p_page .pager ul li.gap a,
.p_page .pager ul li.gap span {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    color: #8a8a8a;
    background-color: #f4f4f4;
    border-radius: 2px;
}

/* 移动端分页按钮略小一点，避免一行放不下导致换行 */
@media only screen and (max-width: 767px) {
    .p_page .pager ul li {
        margin: 0 2px;
    }

    .p_page .pager ul li a,
    .p_page .pager ul li.gap a,
    .p_page .pager ul li.gap span {
        min-width: 28px;
        height: 28px;
        line-height: 26px;
        font-size: 13px;
    }
}

/* =====================================================================
   列表页产品卡：NO IMAGE 占位
   ---------------------------------------------------------------------
   模板里 .p_noimg_box 恒定输出（给「既没封面也没图集」的产品留位），
   但它**故意不带 active** —— 因为 CSS 是
       .p_listimg{display:none} + div.active{display:block}
   一旦占位块 active，真图就被挤掉了。
   于是需要一条「只有它自己」时才显示的规则：
       :only-child 说明前面一张真图都没有，正是要显示占位的场景。
   有真图时它前面有兄弟，:only-child 不匹配 → 保持 display:none。 */
#c_product_list_039_P_092-1713256794914 .e_preView-37 .p_noimg_box:only-child {
    display: block;
}

#c_product_list_039_P_092-1713256794914 .e_preView-37 .p_noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    font-size: 13px;
    letter-spacing: 1px;
    color: #b6b6b6;
    background: #f7f7f7;
}

/* 多图切换时的淡入：给 .p_listimg 一点过渡，避免生硬闪一下 */
#c_product_list_039_P_092-1713256794914 .e_preView-37 .p_listimg {
    transition: opacity .25s ease;
}

/* =====================================================================
   产品详情：摘要块 e_richText-178 + 图集计数
   ---------------------------------------------------------------------
   摘要块是源站右栏标题与「Klasifikasi」之间的那块简介
   （源站类名 e_richText-178，CSS 里只给了 e_richText 通用的字体/颜色，
   间距靠布局，这里补一条与上下块一致的呼吸感）。 */
#c_product_detail_003_P_174-1692350228608 .e_richText-178 {
    margin: 14px 0 18px;
    font-size: 14px;
    line-height: 24px;
    color: #555;
}

#c_product_detail_003_P_174-1692350228608 .e_richText-178 p {
    margin: 0;
}

#c_product_detail_003_P_174-1692350228608 .e_richText-178 .y_sum_label {
    font-weight: 600;
    color: #333;
}

/* 摘要里的 <br> 由后台多行文本产生，正常显示；不要继承正文的大字号 */
#c_product_detail_003_P_174-1692350228608 .e_richText-178 img {
    max-width: 100%;
    height: auto;
}

/* 图集右下角「第 n 张」计数（绝对定位在主图区内，别把图集撑高） */
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 {
    position: relative;
}

#c_product_detail_003_P_174-1692350228608 .y_gal_count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 6;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 13px;
    line-height: 26px;
    text-align: center;
    pointer-events: none;
}

/* ⚠️ 单图产品不显示计数（源站单图产品右上角没有这个角标）。
   .y_gal_count 是 .e_imageList-141 的子节点、一定有兄弟，
   所以**不能**用 :only-child 判定（那选择器永远不匹配）。
   由 index.php 把真实张数挂到 $arc._gcount，模板按张数决定输不输出。 */

/* 图集：主图区给一个最小高度，避免图未加载时缩略图条顶到标题上 */
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top {
    min-height: 220px;
}

/* =====================================================================
   图集排版修复（2026-10-06）
   ---------------------------------------------------------------------
   现象：多图产品进详情页后，主图区占满整行（宽 1380px / 高 1727px），
        把右侧的标题、参数、按钮全挤到下一行，页面完全散架。

   真因：源站的图集高度分配是**百分比**链路 ——
     .e_imageList-141        { height: auto }
     .gallery-top            { height: 80% }
     .gallery-thumbs         { height: 20%; padding-top: 5px }
     .p_img                  { height: 0; padding-bottom: 100% }  ← 定比例

   链条断在第一环：.e_imageList-141 的 height:auto 一旦生效，
   它的 80% / 20% 就退化成了「按内容算」，而 .p_img 的 padding-bottom:100%
   又反过来依赖父宽度 → 变成 1380px 见方的大方块，把 flex 行彻底撑爆。

   修法：不再依赖那条百分比链，改成 viewport 限高的 flex 列布局。
        宽度交给 .cbox-2-0 的 flex:0 0 50%（这条源站规则是命中的），
        高度按视口给一个上限，保证主图是正方比例、缩略图条固定高度。
   ===================================================================== */
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 {
    position: relative;
    /* 关键：给一个确定高度，80%/20% 才有意义 */
    height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ⚠️ 源站 .e_container-2 是 flex + flex-wrap:wrap，
   而 .cbox-2-0 的 flex:0 0 50% 在实测里算出 1380px（= 整行宽）而不是 50%。
   原因：源站 .e_container-2 > .p_item{flex:1;max-width:100%}
   的 flex:1 来自「基尺寸 auto」，与 flex-basis:50% 叠加后被
   max-width:100% 兜成整行 —— wrap 随即把右栏挤到下一行。
   这里显式锁死：左50%+3%间隙、右栏自适应、不换行。
   （改的是布局意图，不是源站像素值；视觉结果与源站一致。） */
#c_product_detail_003_P_174-1692350228608 .e_container-2 {
    flex-wrap: nowrap !important;
    align-items: flex-start;
}

#c_product_detail_003_P_174-1692350228608 .e_container-2 > .cbox-2-0 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50%;
    margin-right: 3%;
}

#c_product_detail_003_P_174-1692350228608 .e_container-2 > .cbox-2-1 {
    flex: 1 1 auto !important;
    max-width: 47% !important;
}

/* 窄屏回到上下堆叠（源站在 <=768px 也是这么做的） */
@media only screen and (max-width: 768px) {
    #c_product_detail_003_P_174-1692350228608 .e_container-2 {
        flex-wrap: wrap !important;
    }

    #c_product_detail_003_P_174-1692350228608 .e_container-2 > .cbox-2-0,
    #c_product_detail_003_P_174-1692350228608 .e_container-2 > .cbox-2-1 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100%;
        margin-right: 0;
    }
}

/* 主图区：不用 flex 传高度（swiper-slide 拿不到，塌成 2px），
   改成「外层占位盒 + 内层绝对定位铺满」，高度用 aspect-ratio 正方。 */
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 62vh;
    min-height: 260px;
    /* aspect-ratio + max-height 冲突时，用 height 兜住宽度方向 */
    height: auto;
}

/* swiper 需要一个确定的像素高度才能算 slide 尺寸。
   运行时由 yardley.js 用ResizeObserver 把容器实测高度写成 --y-gal-h，
   这里先用 aspect-ratio 撑住首屏。 */
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top .swiper-wrapper,
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top .swiper-slide {
    height: 100%;
}

#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top .p_img {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
}

#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top .p_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: static;
    transform: none;
    top: auto;
    left: auto;
}

/* 缩略图条：固定 84px 一行（源站是 20% ≈ 大图区的 1/4，视觉一致） */
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-thumbs {
    flex: 0 0 84px;
    height: 84px;
    box-sizing: border-box;
    padding-top: 5px;
    width: 100%;
}

/* ⚠️ 覆盖源站的 .p_img{height:0;padding-bottom:100%}
   那条是靠父宽度定高的，在这里会把 slide 撑成大方块。
   改成撑满父容器（父高已由上面的 flex 限好）。 */
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top .p_img {
    height: 100%;
    padding-bottom: 0;
    width: 100%;
}

#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-thumbs .p_img {
    height: 100%;
    padding-bottom: 0;
    width: 100%;
}

/* 窄屏：图集改为整行宽，高度按视口给上限 */
@media only screen and (max-width: 991px) {
    #c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top {
        max-height: 60vh;
    }

    #c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-thumbs {
        flex: 0 0 68px;
        height: 68px;
    }
}

/* 拖拽轮播的手型光标：Swiper 开启 grabCursor 后会给 .swiper-slide-grab，
   这里兜底给主图区也加一个，避免资源加载顺序导致光标没变。 */
#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top {
    cursor: grab;
}

#c_product_detail_003_P_174-1692350228608 .e_imageList-141 .gallery-top:active {
    cursor: grabbing;
}

/* =====================================================================
   询价「产品选择弹窗」y_picker
   ---------------------------------------------------------------------
   源站靠 bootstrap.js 给 .modal 加 .show 并显示 backdrop。
   本地不引 bootstrap.js（引入会和源站自带的 AMD 组件抢 jQuery），
   所以由 yardley.js 切class，这里补齐 bootstrap 那套 .show 表现。

   ⚠️ .modal 默认 display:none（bootstrap 的 .modal 就是这样定义的），
      所以只要 .y_picker.show 加上 display:block + opacity:1 就能弹出来。 */
#c_product_detail_003_P_174-1692350228608 .y_picker {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

#c_product_detail_003_P_174-1692350228608 .y_picker.show {
    display: block;
    opacity: 1;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .modal-dialog {
    position: relative;
    width: auto;
    margin: 30px auto;
    pointer-events: none;
    max-width: 900px;
}

/* 窄屏下留边距，别顶到屏幕边缘 */
@media only screen and (max-width: 991px) {
    #c_product_detail_003_P_174-1692350228608 .y_picker .modal-dialog {
        margin: 10px;
    }
}

#c_product_detail_003_P_174-1692350228608 .y_picker .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    outline: 0;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .modal-header,
#c_product_detail_003_P_174-1692350228608 .y_picker .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border: 0;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .modal-header {
    border-bottom: 1px solid #f0f0f0;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .modal-footer {
    justify-content: flex-end;
    border-top: 1px solid #f0f0f0;
    gap: 8px;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 20px;
    overflow-y: auto;
    max-height: 62vh;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .modal-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

/* 关闭按钮：源站是 .close + × 文本，补一下点击区域 */
#c_product_detail_003_P_174-1692350228608 .y_picker .close {
    padding: 0;
    font-size: 22px;
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: .8;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .close:hover {
    opacity: 1;
}

/* 弹窗里的产品缩略图 */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_tabel img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border: 1px solid #eee;
    background: #fff;
}

/* 表格行 hover 高亮，方便点勾选 */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_tabel tbody tr:hover {
    background: #fafafa;
}

/* 加载中/ 空数据的提示行 */
#c_product_detail_003_P_174-1692350228608 .y_picker .y_picker_hint {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 24px 10px !important;
}

/* 「全选」那个复选框在表头，源站还配了一段 label 文案；
   这里让表头复选框和底部 label 视觉上对齐同一列。 */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_oprate {
    margin-top: 12px;
}

/* 遮罩：bootstrap 的 .modal-backdrop 默认没显示规则，这里手写一份 */
.y_picker_mask {
    display: none;
    position: fixed;
    /* ⚠️ 遮罩在模板里被放在 .e_relevantItem-102 内部（跟弹窗做兄弟），
       而那个容器是 display:flex。flex 容器里的子项不是 containing block，
       但它自己有 overflow 时会裁剪 fixed —— 所以这里显式清掉可能的裁剪因素：
       父级若有 transform/filter/will-change 会让 fixed 退化成 absolute。
       所以把遮罩的 z-index 抬到弹窗之下、页面之上即可。 */
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0;
}

/* 遮罩显示。类名已刻意避开源站的 .modal-backdrop（源站 CSS 在本文件之后
   加载且写死了 .modal-backdrop{display:none}，同权重后加载者会赢）。 */
.y_picker_mask.show {
    display: block;
    opacity: .5;
}

/* 同理，弹窗本体 .modal.fade:not(.show) 也会压掉我们的 .show，
   一起提权，否则「点开是块空白」这种症状最难查。 */
#c_product_detail_003_P_174-1692350228608 .y_picker.fade.show,
#c_product_detail_003_P_174-1692350228608 .y_picker.show.y_picker {
    display: block;
    opacity: 1;
}

/* ---------------------------------------------------------------------
   y_picker 的几处收尾修正（截图复核后发现）
   1) 复选框那一列被 .p_tabel 的 padding 挤歪了 → 给固定宽度的列清掉 padding
   2)「Pilih semua + 分页」那一行被弹窗内容顶到可视区外 →
      表格区限高、内部滚动，让底部操作条始终可见
   3) 搜索框别占满整行（源站是左对齐的窄框）
   --------------------------------------------------------------------- */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_tabel th:first-child,
#c_product_detail_003_P_174-1692350228608 .y_picker .p_tabel td:first-child {
    width: 44px;
    padding-left: 12px !important;
    padding-right: 6px !important;
    text-align: center;
    vertical-align: middle;
}

/* 复选框本体：源站 bootstrap 的 .form-check-input 有自己的尺寸规则，
   这里显式给一个稳定大小，避免各浏览器默认 appearance 差异。 */
#c_product_detail_003_P_174-1692350228608 .y_picker .form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

/* 表格容器限高 + 内部滚动：保证底部「全选 / 分页 / 确定」始终露出来 */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_list {
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid #f0f0f0;
}

/* 表头吸顶：表格内部滚动时列名不跑掉 */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_tabel thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e0e0e0;
    font-weight: 500;
}

/* 搜索框区域：源站是窄框，不要拉满 */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_searchCon {
    flex: 0 0 340px;
    max-width: 100%;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .p_searchInput {
    height: 36px;
}

/* 分页按钮：源站 .page_a 已有样式，这里只调间距 */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_listPage {
    text-align: right;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .p_selectAll {
    padding-left: 4px;
    font-size: 13px;
    color: #555;
}

/* 弹窗底部按钮：源站用 bootstrap 的 btn，这里补主色与 hover */
#c_product_detail_003_P_174-1692350228608 .y_picker .btn-primary {
    background: var(--color, #f98600);
    border-color: var(--color, #f98600);
    color: #fff;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .btn-primary:hover {
    opacity: .9;
    color: #fff;
}

#c_product_detail_003_P_174-1692350228608 .y_picker .btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* 「Pilih semua + 分页」这一行要**常驻可见**（不能跟着 modal-body 一起滚走），
   所以把 .p_list 的限高收到 40vh，让 p_oprate + modal-footer 都留在首屏内。
   源站是整页不滚动、内容多时 modal-body 自己滚，这里效果一致。 */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_list {
    max-height: 40vh;
}

/* 分页按钮排得太挤时允许换行（产品上百、页数多的情况） */
#c_product_detail_003_P_174-1692350228608 .y_picker .p_listPage {
    line-height: 30px;
    white-space: normal;
}

/* ⚠️ 限高的最终值：必须**带上组件 id 前缀**才压得住源站那条
     `#c_product_detail_003_P_174-… .e_relevantItem-102 .p_list{max-height:800px}`
     （源站规则 3 个 class + 1 个 id；我之前只写 2 个 class，权重不够，
      实测 max-height 仍是 800px → 表格把「全选/分页/确定」顶出首屏）。
     同权重时后加载者赢，overflow-fix.css 在最后，所以加上 id 即可。 */
#c_product_detail_003_P_174-1692350228608 .e_relevantItem-102 .y_picker .p_list,
#c_product_detail_003_P_174-1692350228608 .e_relevantItem-102 .p_list {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #f0f0f0;
}

/* =====================================================================
   产品详情 · 加购条 y_addcart（2026-10-07）
   ---------------------------------------------------------------------
   现象：「Tambah ke Keranjang」按钮飘到页面右上角、压住右侧浮动栏。

   真因：加购 <form> 是 .e_container-2（display:flex）的**第三个子项**，
         而源站 CSS 只给 .cbox-2-0 / .cbox-2-1 定了宽度
         （50% + 47%），form 没有任何 flex 规则 →
         flex 容器把它当第 3 个 item 挤到剩余空间里，落在右侧。

   修法：让它独占一行（flex-basis 100%），与源站「两栏下方通栏」一致。
   ⚠️ 用 y_ 前缀自有类，不与源站类名抢（项目铁律）。 */
#c_product_detail_003_P_174-1692350228608 .y_addcart {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
    margin: 18px 0 0;
}

/* 相关产品区：源站 .e_loop-46 .p_loopitem{flex-basis:calc(100%/4)} 四列。
   这条规则在本地的 product_*.min.css 里存在，但 cbox-46 还需要去掉
   图片区那条 padding-bottom:100% 的自撑高（源站就是正方形，保留）。
   这里只补 hover 与标题间距（源站 e_text-60 已给 line-clamp:1）。 */
#c_product_detail_003_P_174-1692350228608 .e_loop-46 .cbox-46 {
    padding: 0 10px;
    box-sizing: border-box;
}

#c_product_detail_003_P_174-1692350228608 .e_loop-46 .e_container-47 {
    margin-bottom: 24px;
}

/* 图集/单页详情（channel=3）在 view_related.htm 里也用了 .e_container-2，
   那里没有 .y_addcart，不受影响。 */

/* ============================================================
   右侧浮动栏（客服 / WhatsApp / 邮件 / 电话 / 询价车）
   --------------------------------------------------------
   ⚠️ 整块**不用源站的 .pl_service3 / .service_item / .service_value 类名**。
   源站每个页面 min.css 里都带着这三条：
       .pl_service3 .service_item.kf:hover{width:270px !important}
       .pl_service3 .service_item.kf p{margin-bottom:2rem;line-height:30px}
       .pl_service3{font-size:12px}
   前两条权重 (0,3,1)/(0,4,1)，压得住我原来写的 (0,2,1)：
   hover 时 kf 被硬撑到 270px 宽、面板里每个 p 被灌 2rem 下边距，
   表现就是面板溢出边界、两行文案被撑开、图标跟面板错位。
   换自有类名后源站这些规则一条都命中不了，不用打 !important 擂台。
   （与询价弹窗遮罩用 y_picker_mask 而非 .modal-backdrop 同一思路。）
   ============================================================ */

.y_sidebar {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 98;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

/* 每个图标块：48×48 白底方块，hover 展开左侧文字面板 */
.y_sidebar .y_sb_item {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    margin-top: 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    cursor: pointer;
    text-decoration: none;
    transition: background .3s, border-color .3s;
}
.y_sidebar .y_sb_item:first-child { margin-top: 0; }

.y_sidebar .y_sb_item:hover {
    background: #f98600;
    border-color: #f98600;
}

/* 图标本体：用 flex 居中，不写死 position（源站那套
   .pl_service3 .service_icon{position:absolute;left:0;top:0} 会挤偏） */
.y_sidebar .y_sb_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.y_sidebar .y_sb_icon .icon {
    width: 26px;
    height: 26px;
    fill: #f98600;
    transition: fill .3s;
}
.y_sidebar .y_sb_item:hover .y_sb_icon .icon { fill: #fff; }

/* 悬停文字面板：绝对定位在图标块左侧，垂直居中于图标块 */
.y_sidebar .y_sb_value {
    display: none;
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 18px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
    color: #333;
    text-align: left;
    white-space: nowrap;
    z-index: 2;
}
.y_sidebar .y_sb_item:hover .y_sb_value { display: block; }

/* ⚠️ 关键：源站那条 `.pl_service3 .service_item.kf p{margin-bottom:2rem}`
   是靠 p 元素命中的，这里 y_sb_value 里也是 p —— 必须显式把 margin 归零，
   且权重不低于源站（源站 (0,3,1)，这里 3 个 class = (0,3,1) + overflow-fix 在后加载） */
.y_sidebar .y_sb_value p {
    margin: 0 0 6px;
    line-height: 22px;
}
.y_sidebar .y_sb_value p:last-child { margin-bottom: 0; }

/* ================================================================
 * 移动端侧边抽屉菜单：压掉它自己的横向滚动条（2026-10-06）
 *
 * 现象：手机上看整页右侧会出现**两根**竖向滚动条 ——
 *   外面一根是页面本身的，里面那根在抽屉菜单里。
 *
 * 真因：`#c_navigation_029_P_001-… .menu`（移动端是
 *   position:fixed; right:-241px 的抽屉）里，
 *   源站自己写了一条
 *     menu.menu-main .wrap { display:flex; align-items:center; overflow:scroll }
 *   —— 四个方向全是 scroll。菜单内容宽度 274px、容器 239px，
 *   于是**容器内部**先出一条横向滚动条；浏览器又会把它画成
 *   竖向的窄条（Windows 上滚动条占 17px），视觉上就成了「多一根」。
 *   实测（390×844）：sw=274 / cw=239。
 *
 * 做法：纵向继续留 scroll（菜单内容长时需要能滚），
 *   只把横向改成 hidden —— 菜单本来是竖排一列，不该有横向内容。
 *   overflow-x:hidden 会让 overflow-y:auto 重新计算成滚动容器，
 *   所以要成对写，不能只写其中一个。
 * ================================================================ */
@media screen and (max-width: 1280px) {
    #c_navigation_029_P_001-16723087710960 .menu,
    #c_navigation_029_P_001-16723087710960 .menu .wrap {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* 抽屉停靠在屏幕外时（未展开），整条藏掉，
       免得它在右侧留一道 241px 宽的可滚动区把滚动条露出来。 */
    #c_navigation_029_P_001-16723087710960 .menu:not(.active) {
        visibility: hidden;
    }

    /* 展开态恢复可见（上面的 :not(.active) 只针对收起态）。 */
    #c_navigation_029_P_001-16723087710960 .menu.active {
        visibility: visible;
    }
}

.y_sidebar .y_sb_k { margin-right: 6px; }
.y_sidebar .y_sb_v a { color: #333; text-decoration: none; }
.y_sidebar .y_sb_v a:hover { color: #f98600; }

/* 单行文字的三个（WhatsApp / 邮件 / 电话）：不需要 key:value 两列 */
.y_sidebar .y_sb_single {
    padding: 10px 16px;
    line-height: 24px;
}
.y_sidebar .y_sb_single a {
    color: #333;
    text-decoration: none;
    display: block;
}
.y_sidebar .y_sb_single a:hover { color: #f98600; }

/* 询价车：图标下方带角标 */
.y_sidebar .y_sb_cart .cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #f98600;
    border: 2px solid #fff;
    border-radius: 9px;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    line-height: 14px;
    text-align: center;
    box-sizing: border-box;
}
.y_sidebar .y_sb_cart:hover .cart-badge {
    background: #fff;
    border-color: #f98600;
    color: #f98600;
}

/* 无障碍：键盘聚焦也要能展开面板（hover 规则不覆盖 focus） */
.y_sidebar .y_sb_item:focus-visible .y_sb_value,
.y_sidebar .y_sb_item:focus .y_sb_value { display: block; }
.y_sidebar .y_sb_item:focus-visible { outline: 2px solid #f98600; outline-offset: 2px; }

/* 询价车文案：默认不占位，hover 才显示（避免 5 个图标各挂一块标签） */
.y_sidebar .y_sb_label { display: none; }

@media (max-width: 768px) {
    .y_sidebar { right: 4px; }
    .y_sidebar .y_sb_item {
        width: 38px;
        height: 38px;
        margin-top: 8px;
    }
    .y_sidebar .y_sb_icon .icon { width: 21px; height: 21px; }
    .y_sidebar .y_sb_value {
        right: 46px;
        padding: 9px 12px;
        max-width: 62vw;
        white-space: normal;
    }
    .y_sidebar .y_sb_value p { margin: 0 0 4px; line-height: 18px; }
    .y_sidebar .y_sb_cart .cart-badge {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        line-height: 12px;
    }
}

/* 移动端从右下角往上排，别挡住侧栏/返回顶部 */
@media (max-width: 768px) {
    .y_sidebar { top: auto; bottom: 76px; transform: none; }
}

/* ==========================================================================
   [已删除 2026-10-07] 「首页第 9 屏：左侧大图撑满两行高」补丁
   --------------------------------------------------------------------------
   原规则：@media(min-width:769px) 下把 .p_left .p_focusItem 改成
   position:absolute; inset:0，并给 .e_image-57 写 height:100%!important;
   padding-bottom:0 —— 目的是让大图高度**继承**右侧两行总高，
   避免源站 padding-bottom:94% 把大图钉在 521px、下面留一片空白。

   为什么现在必须删掉：它依赖 `.kovant_Box` 是「p_left + p_right 两个并列
   flex 子容器」的结构 —— p_left 的高度靠 align-items:stretch 由右侧最高的
   兄弟撑出来，absolute 的 containing block 才拿得到那个高度。

   2026-10-07 首页改成**单个 {cms:arclist} 循环**（因为 index.php 每次升级
   都被无条件覆盖，写在那里的 newsBig/newsSide 派生必然归零 ——
   core/Upgrader.php:532 的 `$allowRoot = ['index.php']`），
   5 条卡片成了 .kovant_Box 的**平级** flex item，`.y_nbig` 右侧不再有兄弟节点
   → stretch 失效、height:auto 变成 0 → absolute 的 inset:0 铺了个 0 高度，
   实测大卡塌成 554x0（图片还在，但容器高度为 0）。

   现在大卡回归源站的 padding-bottom:94% 自撑高，不再依赖右侧兄弟。
   ========================================================================== */

   内页正文为 fixed header 让位
   ==========================================================================
   现象：ABOUT / Customization / Honors / Contact 四个单页，
        面包屑贴在 y=13，正好落在 fixed header（y=12、高176）底下，
        页面上第一行文字被导航挡掉一半。

   真因：.p_main 在**任何** min.css 里都没有规则（本项目全站如此）。
         列表页 / 详情页看着正常，是因为它们顶部有子页 banner
         （.subpage_ad 65vh ≈ 342px @1440），天然把内容推到 header 之下；
         单页没有 banner（源站这几页本来也没有），
         .p_main 就从 y=0 开始，直接撞上fixed header。

   为什么不用 .header 的 height 做 calc()：
         header 高度随后台配的 LOGO 图片长宽比变化（本项目 LOGO 215×146，
         渲染 200 宽→ 136 高，加上下 20+20 margin = 176px；
         换一张扁 LOGO 就变成 105px）。写死任何数值都会在换图后失效。
         这里给一个**最小值**：够盖住常见 LOGO 高度，
         更高的 header 仍会被压——但那是后台换图导致，属于可接受范围
         （真要严格对齐，正确做法是让 JS 按 header 实测高度写 CSS 变量）。

   移动端另给一份：≤768px 时 header 更矮（菜单收起态约 60px）。 */
   ⚠️⚠️ 2026-10-06 修正范围（这条曾经把全站 banner 顶下去180px）：
      原写法是**无条件** `.p_main{padding-top:180px}`，
      结果首页/列表/详情这些本来就有 banner 的页面，
      banner 整体从 y=0 被推到 y=180 —— 顶部凭空多出 180px 空白，
      fixed header 浮在空白里，看起来就是「顶部导航坏了」。

      现在改成：**只有页面确实一个 banner 都没有时才让位**。
      判定方式与下面「单页白底 header」同一套:has()，
      三个 banner 形态任一存在就不干预：
        .subpage_ad   —— 内页小 banner（列表/详情/单页）
        .e_bannerA-1  —— 首页大 banner 轮播
        .e_bannerA-2  —— 子页 banner 的组件类（与 .subpage_ad 同时出现）
   */
/* ⚠️⚠️ 2026-10-10 修正写法（原来这条**整块不生效**）：
      原写法是 @supports 里**再嵌@media**：
        @supports selector(body:has(.subpage_ad)) { @media screen and (...) { ... } }
      但 CSS Conditional Rules 只允许 @supports 内嵌套**其他 @supports**，
      @media 直接嵌套在 @supports 里浏览器会**整块丢弃**——
      实测 overflow-fix.css 已加载 198 条规则，里面却一条 p_main 都没有，
      于是四个单页（about / customization / honors / contact-info）全部
      被 position:fixed 的 header 压住顶部。

      改法：@supports 只作「能力探测」的空壳（保留给不支持 :has() 的老浏览器
      整块失效的语义），真正的规则提到顶层 @media 里，
      :has() 本来就在选择器内部，不支持时**该条选择器整体不匹配**，效果等价。*/
@supports selector(body:has(.subpage_ad)) {
    /* 空壳，仅用于能力探测；见上方说明 */
}
@media screen and (min-width: 769px) {
    body:not(:has(.subpage_ad)):not(:has(.e_bannerA-1)) .p_main {
        padding-top: 180px;
    }
}
@media screen and (max-width: 768px) {
    body:not(:has(.subpage_ad)):not(:has(.e_bannerA-1)) .p_main {
        padding-top: 70px;
    }
}

/* ==========================================================================
   单页（无 banner）页面的header 不再透明
   ==========================================================================
   现象：ABOUT / Customization / Honors / Contact 四页顶部只看得见 LOGO，
        右侧导航菜单整个不见了（截图 about_final_pc.png）。

   真因：源站的 header 默认是**透明**的 ——
        #c_navigation_029_… .header{position:fixed; top:12px;
            background:rgba(255,255,255,0); border-bottom:0; box-shadow:none}
        配套的菜单文字也是白的（.header .menu .h3 a{color:#fff}），
        只有滚过 60px 之后 JS 给 header 加 .scroll 类，
        才切成「白底 + #111 黑字」（yardley.js:59 `if (scrollY>60) add('scroll')`）。
        这是为「顶部有大图 banner」的场景设计的：文字压在图上才有对比度。

        首页/列表/详情页顶部都有子页 banner（.subpage_ad 65vh），
        白字压在图上看得见；
        **单页本来就没有 banner**（源站这几页也没有），
        白字落在白底上⇒ 整条导航「隐身」。

   做法：给这四页的 header 一个常态白底 + 黑字，不必等滚动。
        只在「没有 banner 的页面」生效 —— 用 :has() 判定页面上有没有
        .subpage_ad（内页小banner）或 .e_bannerA-1（首页大banner），有则不干预，避免把 banner 页也改成白底
        （banner 页保持透明才是源站效果）。
        :has() 在 Chromium 105+ / Safari 15.4+ / Firefox 121+ 支持；
        老浏览器不识别 :has() 会**整条规则失效**（退回到源站的透明态），
        属于可接受的渐进增强 —— 不会把 banner 页搞坏。 */
@supports selector(body:has(.e_bannerA-1)) {
    body:not(:has(.subpage_ad)):not(:has(.e_bannerA-1)) #c_navigation_029_P_001-16723087710960 .header {
        background: rgba(255, 255, 255, 1) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
    body:not(:has(.subpage_ad)):not(:has(.e_bannerA-1)) #c_navigation_029_P_001-16723087710960 .header .menu .h3 a {
        color: #111 !important;
    }
    body:not(:has(.subpage_ad)):not(:has(.e_bannerA-1)) #c_navigation_029_P_001-16723087710960 .header .menu .h3 a:hover {
        color: var(--color, #0055a7) !important;
    }
}

/* ============================================================
   首页「Berita Terbaru」区块：单 arclist 循环下的大卡 + 小卡布局
   ============================================================
   ⚠️ 为什么需要这段 CSS（2026-10-07）：
     源站是**两层容器**结构：
       <div class="kovant_Box">
         <div class="p_focus p_left">   ← flex:0 0 45%   大卡
         <div class="p_list  p_right">  ← flex:1 + flex-wrap
            <div class="p_loopitem">   ← flex-basis:calc(100%/2)  两列
         </div>
     所有百分比都是**相对各自父容器**算的。

     改成单个 {cms:arclist} 循环（原因见下）后，5 条成了 `.kovant_Box` 的
     **平级子元素**，`.p_loopitem{flex-basis:calc(100%/2)}` 变成相对整个容器
     （1232px）→ 每张 616px，配合大卡的 45% 直接把同行挤爆、每张独占一行。

     单循环没法把「第 2~5 条」放进另一个 div，所以改成**单层 flex + 显式百分比**：
       大卡 45%，小卡 27% → 45% + 27% + 27% = 99% ⇒
       第 1 行 = 大卡 + 小卡1 + 小卡2，第 2 行 = 小卡3 + 小卡4。
     视觉与源站的「左大卡 + 右侧两列」一致，高度也由 flex 行自然决定。

   ⚠️⚠️ 为什么必须用引擎原生 {cms:arclist} 而不能在 index.php 里切片：
     core/Upgrader.php:532 的 `$allowRoot = ['index.php']` 决定了
     **每次 CMS 升级都会无条件覆盖 index.php**。写在那里的派生逻辑一律归零，
     首页这个区块已因此整块空白四次（2026-10-05 / 06 / 07）。
     arclist 由 core 自己查库、并给循环变量 $field 原生派生 _url / _thumb
     （derive() 约 1496 行），升级不丢。

   ⚠️ 必须用 y_ 前缀：源站 CSS 散落在每个页面的 *min.css 且常带 !important，
      用源站类名写自定义样式必然被压（同项目铁律）。 */
#c_static_001-17095604093550 .e_loop-49 .kovant_Box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    overflow: hidden;
}
/* 大卡：左侧 45%（源站 p_left 同值），高度由 e_image-57 的 padding-bottom:94% 撑开 */
#c_static_001-17095604093550 .e_loop-49 .kovant_Box .y_nbig {
    flex: 0 0 45% !important;
    max-width: 45%;
    margin: 0 0 30px 0;
    position: relative;
    min-width: 0;
}
/* 4 张小卡：各 27%，每行两张（27%×2 + 1% 间隙 = 55%，接在大卡右侧） */
#c_static_001-17095604093550 .e_loop-49 .kovant_Box .cbox-49.p_loopitem {
    /* ⚠️ 必须 !important：源站有两条同名规则
       `.e_loop-49 .p_loopitem{flex:0 0 33.3%}` 和
       `.e_loop-49 .p_right .p_loopitem{flex-basis:calc(100%/2)}`，
       后者不带组件 id 前缀，会被别处命中；不加 !important 压不住，
       实测 flex-basis 仍取到源站的 33.3% / calc(100%/2) 导致第 2 张换行。 */
    /* 45%(大卡) + 27% + 27% = 99%，剩下 1% 留白；
       ⚠️ 这里**不能再加水平 margin** —— margin 不占 flex-basis 之外的预算，
       1% + 1% 会把总和推到 101% → 第 2 张小卡被挤到下一行（实测 y=780）。 */
    flex: 0 0 27% !important;
    flex-basis: 27% !important;
    max-width: 27% !important;
    margin: 0 0 30px 0 !important;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
}
/* 大卡文字块：源站是 position:absolute;bottom:0（贴在大卡底部做浮层），
   依赖 .p_left 被右侧兄弟撑高、p_focusItem 再 absolute 铺满。
   单层结构下没有右侧兄弟，p_focusItem 高度 = 图片高，
   absolute 的文字块就直接压在图上（实测 y=208 落在图的中下部）。
   正解：让 p_focusItem 变成 flex 列容器，图片在上、文字块正常流在下，
   两者不再重叠；文字块保留源站的半透明底色与 430px 宽度。 */
#c_static_001-17095604093550 .kovant_Box .y_nbig .p_focusItem,
#c_static_001-17095604093550 .kovant_Box .cbox-49.p_loopitem {
    display: flex;
    flex-direction: column;
}
/* ⚠️ 必须写 !important：源站这条规则的优先级是
   `#c_static_001-17095604093550 .e_container-58`（组件 id + 类名，0-1-1-0），
   比我们这条（同样是 id + 3 个类名）**更高**，且带 bottom:0;right:0。
   不加 !important 压不住 —— 实测加了 display:flex 但 position 仍是 absolute。 */
#c_static_001-17095604093550 .kovant_Box .y_nbig .e_container-58,
#c_static_001-17095604093550 .kovant_Box .cbox-49.p_loopitem .e_container-51 {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 移动端：全部单列堆叠 */
@media (max-width: 768px) {
    #c_static_001-17095604093550 .e_loop-49 .kovant_Box .y_nbig,
    #c_static_001-17095604093550 .e_loop-49 .kovant_Box .cbox-49.p_loopitem {
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0 0 24px 0;
    }
}
/* ============================================================
   ① 首页 Berita 最新文章 · 三列 masonry（2026-10-07 第二版，按源站截图）
   ============================================================
   源站版式（用户截图）：
     左列 ≈46%  一张竖长大图铺满列高，**右下角叠一块白底文字块**（压在图上）
     中列 ≈27%  **白块在上、图片在下**
     右列 ≈27%  **图片在上、白块在下**
   数据：正好 3 条（{cms:arclist row="3"}），每列一条。

   ⚠️ 为什么必须是 Grid 而不是 flex：
      flex 百分比 + padding 盒模型下，源站 .p_list / .cbox-49 自带的
      margin-left:-15px 与 padding 会把百分比撑出容器（实测只有 1120/1232），
      Grid 用 fr 分配轨道，宽度与 padding 无关，行为确定。

   ⚠️ 三列 DOM 完全一致（.cbox-49 > .y_bn_fig + .y_bn_txt），
      列内「图/文」谁在上由 .y_bn_c1/2/3 的 flex-direction 决定，
      这样 nth-of-type 定位不会因 DOM 差异错位。

   ⚠️ 选择器必须带 .e_loop-49：源站 Home_34397c4c….min.css 里有
      `#c_static_001-17095604093550 .e_loop-49 .p_focusItem{…}` 和
      `.p_loopitem{flex:0 0 33.3%}`，特异性 id+class+class 很高，
      只写 `#id .kovant_Box > *`（多一个 universal）压不过。 */
#c_static_001-17095604093550 .kovant_Box.y_berita_mix {
    display: grid !important;
    grid-template-columns: 46% 27% 27%;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100%;
    min-height: 520px;
    /* ⚠️ 必须给白底：源站这一区的外层（.kovant_news / .e_loop-49 的祖先）
       背景是绿色，不铺白的话列间距会透出绿缝（实测三列之间都是绿条）。 */
    background: #fff;
}
/* 兜底：万一 .e_loop-49 的源站规则把宽度写死，用 Grid 的 auto 轨道覆盖 */
#c_static_001-17095604093550 .e_loop-49 .kovant_Box.y_berita_mix > .cbox-49 {
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box;
}
/* 三列统一：纵向 flex，列间距靠 padding-right */
#c_static_001-17095604093550 .y_berita_mix > .cbox-49 {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-right: 14px;
}
#c_static_001-17095604093550 .y_berita_mix > .cbox-49:last-child {
    padding-right: 0;
}

/* ---- 图片区：铺满剩余高度 ---- */
#c_static_001-17095604093550 .y_bn_fig {
    position: relative !important;
    width: 100%;
    overflow: hidden;
    background: #f2f2f2;
}
#c_static_001-17095604093550 .y_bn_fig a {
    display: block;
    width: 100%;
    height: 100%;
}
#c_static_001-17095604093550 .y_bn_fig img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
#c_static_001-17095604093550 .y_bn_fig:hover img {
    transform: scale(1.05);
}

/* ---- 左列：图铺满全列，白块绝对定位压在右下角 ---- */
#c_static_001-17095604093550 .y_bn_c1 {
    position: relative;
    display: block !important;
    padding-right: 14px;
}
#c_static_001-17095604093550 .y_bn_c1 .y_bn_fig {
    height: 520px;
}

/* ---- 中列：白块在上（固定高），图在下（撑满剩余）---- */
#c_static_001-17095604093550 .y_bn_c2 .y_bn_txt {
    order: -1;                 /* flex 里排到最前 */
    flex: 0 0 auto;
    min-height: 200px;
    margin-bottom: 14px;
}
#c_static_001-17095604093550 .y_bn_c2 .y_bn_fig {
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- 右列：图在上（撑满剩余），白块在下 ---- */
#c_static_001-17095604093550 .y_bn_c3 .y_bn_fig {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 14px;
}
#c_static_001-17095604093550 .y_bn_c3 .y_bn_txt {
    flex: 0 0 auto;
    min-height: 200px;
}

/* ---- 白底文字块通用 ---- */
#c_static_001-17095604093550 .y_bn_txt {
    position: relative !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    background: #fff;
    padding: 30px 34px 34px;
    display: block !important;
}
#c_static_001-17095604093550 .y_bn_c1 .y_bn_txt {
    padding: 30px 30px 32px;
}
/* ⚠️⚠️ 必须放在「白底文字块通用」**之后**！
   通用段里有 `position: relative !important; bottom: auto !important`，
   如果左列的 absolute 规则写在它前面（同特异性），会被整条覆盖掉 ——
   表现为白块不叠在图上、而是被顶到列底图外（实测 txt 出现在 y=8418，
   而图只到 y=8418，即完全掉到图外面去了）。 */
#c_static_001-17095604093550 .y_bn_c1 .y_bn_txt {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: 14px !important;
    bottom: 0 !important;
    width: 66% !important;
    max-width: 66% !important;
    z-index: 2;
}
#c_static_001-17095604093550 .y_bn_txt .e_timeFormat-59 {
    display: block;
    color: #a6a6a7;
    font-size: 15px;
    margin: 0 0 10px;
}
/* ⚠️ 选择器必须带 .e_loop-49：源站 Home_34397c4c….min.css 里
   `#c_static_001-17095604093550 .e_line-66{border-top-width:3px;width:30px}`
   与本段同特异性（都是 id+class+class），源站在前面 ⇒ 后面写的才生效，
   但如果只写 `#id .y_bn_txt .e_line-66`（多一层 class）就稳压它一头。 */
#c_static_001-17095604093550 .y_bn_txt .e_line-66 {
    border: 0;
    border-top: 3px solid #f98600;      /* 源站原色 rgba(249,134,0) */
    width: 30px;
    height: 0;
    margin: 0 0 12px;
}
#c_static_001-17095604093550 .y_bn_c1 .y_bn_txt .e_line-66 {
    width: 46px;
}
#c_static_001-17095604093550 .y_bn_txt .e_text-60 {
    font-size: 19px;
    line-height: 1.45;
    font-weight: 600;
    margin: 0 0 14px;
}
#c_static_001-17095604093550 .y_bn_txt .e_text-60 a {
    color: #333;
}
/* 摘要只在左列出现（中/右列源站没放摘要） */
#c_static_001-17095604093550 .y_bn_txt .y_bn_sum {
    font-size: 14px;
    line-height: 1.75;
    color: #666;
    max-height: 5.25em;      /* 3 行截断 */
    overflow: hidden;
}
/* 右下角箭头 */
#c_static_001-17095604093550 .y_bn_arrow {
    display: block;
    text-align: right;
    color: #bbb;
    margin-top: 12px;
}
#c_static_001-17095604093550 .y_bn_arrow svg {
    display: inline-block;
    vertical-align: middle;
    transition: transform .35s ease, color .35s ease;
}
#c_static_001-17095604093550 .cbox-49:hover .y_bn_arrow {
    color: #f4d133;
}
#c_static_001-17095604093550 .cbox-49:hover .y_bn_arrow svg {
    transform: translateX(6px);
}

/* ---- 平板：两列（左大图 + 右一列）---- */
@media (max-width: 1024px) {
    #c_static_001-17095604093550 .kovant_Box.y_berita_mix {
        grid-template-columns: 46% 54%;
        min-height: 0;
    }
    #c_static_001-17095604093550 .y_bn_c3 {
        display: none !important;
    }
    #c_static_001-17095604093550 .y_bn_c1 .y_bn_fig {
        height: 460px;
    }
}
/* ---- 移动：单列 ---- */
@media (max-width: 640px) {
    #c_static_001-17095604093550 .kovant_Box.y_berita_mix {
        grid-template-columns: 100%;
    }
    #c_static_001-17095604093550 .y_bn_c2,
    #c_static_001-17095604093550 .y_bn_c3 {
        display: flex !important;
    }
    #c_static_001-17095604093550 .y_berita_mix > .cbox-49 {
        padding: 0 0 22px;
    }
    #c_static_001-17095604093550 .y_bn_c1 {
        position: relative;
        padding: 0 0 22px;
    }
    #c_static_001-17095604093550 .y_bn_c1 .y_bn_fig {
        height: 260px;
    }
    /* 移动端左列白块不再绝对定位（会盖住图），改成常规流排在图下 */
    #c_static_001-17095604093550 .y_bn_c1 .y_bn_txt {
        position: relative !important;
        width: 100%;
        right: auto;
        bottom: auto;
        margin-top: -60px;
        margin-left: 8%;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
    }
    #c_static_001-17095604093550 .y_bn_txt {
        padding: 22px 22px 24px;
    }
    #c_static_001-17095604093550 .y_bn_txt .e_text-60 {
        font-size: 17px;
    }
    #c_static_001-17095604093550 .y_bn_c2 .y_bn_fig,
    #c_static_001-17095604093550 .y_bn_c3 .y_bn_fig {
        min-height: 240px;
    }
}

/* ============================================================
   ② 图集列表（Lokakarya）多列网格
   ============================================================
   源站 equipment 页 .p_list 只有 flex-wrap，
   **列宽规则在本地 CSS 里查不到** —— 源站靠内联 <link> 加载的
   /upload/css/23c692db….css 定列宽，而源站现已 403 限流抓不到。
   所以列数用 y_gal_grid 自己定：PC 4 列、平板 3 列、移动 2 列。
   另：通用 lists.htm 原来写的 cbox-6-0 / e_loop-7 在 equipment CSS 里
   命中数为 0 ⇒ .p_list 退回 display:block，12 张图各占 1440px 全宽竖排。 */
#c_effect_022_P_218-1712130801841 .y_gal_grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100%;
}
#c_effect_022_P_218-1712130801841 .y_gal_grid > .cbox-6 {
    flex: 0 0 25%;
    max-width: 25%;
    width: 25%;
    box-sizing: border-box;
    padding: 0 12px 24px;
    margin: 0 !important;
}
#c_effect_022_P_218-1712130801841 .y_gal_grid .e_image-8 {
    width: 100%;
    overflow: hidden;
    /* 灯箱可点：initLightbox() 靠 .fancyImg img[data-full] 挂载 */
    cursor: zoom-in;
    position: relative;
}
/* 放大镜角标：提示这张图能点开 */
#c_effect_022_P_218-1712130801841 .y_gal_grid .e_image-8::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
#c_effect_022_P_218-1712130801841 .y_gal_grid .cbox-6:hover .e_image-8::after {
    opacity: 1;
    transform: translateY(0);
}
#c_effect_022_P_218-1712130801841 .y_gal_grid .e_image-8 img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
#c_effect_022_P_218-1712130801841 .y_gal_grid .cbox-6:hover .e_image-8 img {
    transform: scale(1.06);
}
#c_effect_022_P_218-1712130801841 .y_gal_grid .e_text-10 {
    text-align: center;
    font-size: 15px;
    color: rgba(51, 51, 51, 1);
    margin: 0;
    padding-top: 12px;
}
#c_effect_022_P_218-1712130801841 .y_gal_grid .e_container-7:hover .e_container-9 {
    background-color: #000;
}
#c_effect_022_P_218-1712130801841 .y_gal_grid .e_container-7:hover .e_text-10 {
    color: #fff;
}

@media (max-width: 1024px) {
    #c_effect_022_P_218-1712130801841 .y_gal_grid > .cbox-6 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        width: 33.333%;
    }
}
@media (max-width: 640px) {
    #c_effect_022_P_218-1712130801841 .y_gal_grid > .cbox-6 {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
        padding: 0 8px 18px;
    }
    #c_effect_022_P_218-1712130801841 .y_gal_grid .e_image-8 img {
        height: 160px !important;
    }
}

/* =====================================================================
   产品详情 · 询盘表单（#Inquiry）2026-10-07
   =====================================================================
   ⚠️⚠️ 本段只**补尺寸**，不重做视觉。
      源站 product/22743ff490e49b0ddedd6387e7aec38a.min.css 里
      `.e_formBtn-128` 的设计是「透明底 + 橙色描边动画按钮」：
        background-color:transparent; color:#f98600; border:1px solid transparent;
        svg{position:absolute;width:100%;height:45px}
        rect{fill:none;stroke:#f98600;stroke-width:2}
      实测这些**全部已经命中**（bg=rgba(0,0,0,0)、color=rgb(249,134,0)、
      rect.stroke=rgb(249,134,0)），不需要再动配色。
      真正的问题是**按钮只有 63px 宽**（=文字宽+padding），
      而 svg 描边 rect 需要一个像样的宽度才画得出完整按钮框，
      源站那个 <a> 本身是块级+max-width:190px，浏览器给了内容宽度。
      ⇒ 这里只补 min-width，让描边框成型。

   ⚠️ 表头背景同理：源站 CSS 写的是 `.p_tabelList thead td{background:#f0f0f0}`，
      **选择器是 td 不是 th**。所以本模板的表头文字不能用 <th>，
      改用 tbody 首行的 td.y_pick_th 承担（见 view_inquiry.htm 注释）。
      但那条规则的祖先链要求它在 thead 里 ⇒ 背景由下面 y_pick_th 补。
   ===================================================================== */

/* 提交按钮：给足宽度让 svg 描边 rect 画出完整按钮框 */
#c_product_detail_003_P_174-1692350228608 #Inquiry .e_formBtn-128 {
    min-width: 190px;
}

/* 已选产品表：表头行底色 + 文字样式（源站是 thead td，我们放在 tbody 首行） */
#c_product_detail_003_P_174-1692350228608 #Inquiry .p_tabelList .y_pick_th {
    background-color: #f0f0f0;
    height: 36px;
    padding: 0 10px;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

/* 表体行：源站 .p_tabelList td{padding:5px 10px;border:0} */
#c_product_detail_003_P_174-1692350228608 #Inquiry .p_tabelList tbody td {
    padding: 5px 10px;
    vertical-align: middle;
}
#c_product_detail_003_P_174-1692350228608 #Inquiry .p_tabelList tbody tr:not(:first-child) td {
    border-top: 1px solid #f0f0f0;
}
/* 表格外框：源站 .p_tabel{border:1px solid #f0f0f0} */
#c_product_detail_003_P_174-1692350228608 #Inquiry .p_tabelList {
    border: 1px solid #f0f0f0;
}

/* 「Tambahkan produk」按钮：源站是渐变蓝底 var(--background)，不是橙色 */
#c_product_detail_003_P_174-1692350228608 #Inquiry .p_addContent {
    margin-top: 10px;
}

/* ============================================================
   留言页（/contact，源站 messages.html）提交按钮最小宽度
   ============================================================
   ⚠️ 为什么需要（2026-10-08）：
     源站 messages_*.min.css 里 .e_formBtn-27 写的是
       width:auto; max-width:300px; margin-left/right:auto
     按钮只有文字「Kirim」时实测宽 54px —— 描边框根本撑不开，
     视觉上不像可点的按钮（产品详情页那个 e_formBtn-128 同理，
     已在上面用 min-width:190px 处理过）。
     这里只补最小宽度，不改颜色/边框 —— 那些继续由源站 CSS 命中。
   ⚠️ 用 y_ 前缀的类是为了万一需要单独微调；
      选择器仍以组件 id 打头，保证不越界影响别的页。 */
#c_introl_detail_004_P_033-1708324640030 .e_formBtn-27.y_msg_submit {
    min-width: 150px;
}
#c_introl_detail_004_P_033-1708324640030 .e_formBtn-27.y_msg_submit span {
    padding: 0 8px;
}

/* ============================================================
   contact-info 页右侧「地图」占位（源站是百度地图容器）
   ============================================================
   ⚠️ 源站 c_static_722_P_029-1712563479192 里 cbox-7-1 > e_html-41
     放的是 <div id="container">（百度地图实例容器，height:700px）。
     本站没有百度地图 key、也不引入它的 JS ⇒ 容器保留但空着，
     页面会出现一大片空白。用 y_ 前缀给它一个地图底图 + 说明文字。

     ⚠️ 只写 y_contact_map 自己的样式，不碰 #container / e_html-41
        —— 后两者的规则来自源站 CSS，改了会连带影响别的页面。 */
#c_static_722_P_029-1712563479192 .y_contact_map {
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 30px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #fafafa;
    background-image:
        repeating-linear-gradient(0deg, #f0f0f0 0, #f0f0f0 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(90deg, #f0f0f0 0, #f0f0f0 1px, transparent 1px, transparent 40px);
    color: #999;
    font-size: 15px;
    line-height: 1.9;
}

/* ============================================================
   contact-info 页两张二维码卡（WeChat / Whatsapp）内部换行
   ============================================================
   ⚠️ 为什么需要（2026-10-08实测）：
     源站 contact_bf8b…min.css 给 .e_container-61 / .e_container-57 的规则是
       display:flex; flex-wrap:wrap; flex-direction:row
     而里面两个子项 .cbox-61-0（图片区） 与 .e_container-63（文字区） 都是
       .e_container-61 .p_item { flex:1; max-width:100% }
     flex-basis 是 0 ⇒ 两项各占 50%，**永远不会换行**；
     图片区 .e_image-62 又是 height:0 + padding-bottom:100%（正方形懒加载），
     于是被压成 0 宽 0 高 ⇒ 两张二维码**完全不显示**（图片文件是加载成功的，
     naturalWidth=280，只是盒子没高度）。

     源站之所以正常：它的 .e_loop-66 渲染路径会让图片区拿到实际宽度。
     本站是静态 HTML，只能用 CSS 明确把「图片区独占一行」写出来。

   ⚠️ 只改 flex 归属，不动尺寸/颜色/圆角 —— 那些继续由源站 CSS 命中。 */
#c_static_722_P_029-1712563479192 .e_container-61 > .cbox-61-0,
#c_static_722_P_029-1712563479192 .e_container-57 > .cbox-57-0 {
    flex: 0 0 100%;
    max-width: 100%;
}
#c_static_722_P_029-1712563479192 .e_container-63,
#c_static_722_P_029-1712563479192 .e_container-59 {
    flex: 0 0 100%;
    max-width: 100%;
}
/* 图片本身：源站用 scale() 做hover 放大，加 transition 才有动画 */
#c_static_722_P_029-1712563479192 .e_image-62 img,
#c_static_722_P_029-1712563479192 .e_image-58 img {
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1.0);
}

/* ============================================================
   contact-info 页联系方式文字颜色
   ============================================================
   ⚠️ 源站 contact_bf8b…min.css 里 .e_richText-55 是 color:rgba(255,255,255,1)
     （白字）——源站靠内联 span color:#000000 覆盖成黑字。
     本站照抄了内联色，但 e_richText-55 的 line-height:1 + 16px 在
     深色 header 上叠加时仍偶发不可见，这里显式兜一层 rgba(51,51,51,1)。 */
#c_static_722_P_029-1712563479192 .e_richText-55 {
    color: rgba(51, 51, 51, 1);
    line-height: 1.8;
}
#c_static_722_P_029-1712563479192 .e_richText-55 a {
    color: rgba(51, 51, 51, 1);
}

/* ============================================================
   留言板（/contact 与 /message 共用 partials/message_form.htm）
   ============================================================
   ⚠️ 一律 y_ 前缀：源站规则全是「组件id + 类名」且带 !important，
      用源站类名写自定义样式必被压回去（见铁律 2）。 */

/* 蜜罐字段（index.php:405 查 $_POST['website']）
   ⚠️ 不能用 display:none / visibility:hidden —— 不少机器人会跳过隐藏项，
      移出视口才是真隐藏（源码里肉眼也看不到）。 */
#c_introl_detail_004_P_033-1708324640030 .y_msg_hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 验证码行：图片 132x44（Captcha::svg/GD 都是这个尺寸）+ 输入框并排 */
#c_introl_detail_004_P_033-1708324640030 .y_msg_capRow {
    display: flex;
    align-items: center;
    gap: 10px;
}
#c_introl_detail_004_P_033-1708324640030 .y_msg_capImg {
    flex: 0 0 132px;
    width: 132px;
    height: 44px;
    border: 1px solid rgba(51, 51, 51, 0.15);
    border-radius: 4px;
    cursor: pointer;
}
#c_introl_detail_004_P_033-1708324640030 .y_msg_capRow .p_input {
    flex: 1 1 auto;
    min-width: 0;
}

/* 提交按钮：源站 e_formBtn-27 的 min-width 不够，五个字段后视觉偏窄 */
#c_introl_detail_004_P_033-1708324640030 .e_formBtn-27.y_msg_submit {
    min-width: 150px;
}

/* ---------- 公开留言列表（/message 独有）----------
   ⚠️ 源站 messages.html 没有这个区块（源站不公开留言），
      所以不套源站组件 id，整块自定义。 */
.y_msg_list {
    max-width: 1400px;
    margin: 40px auto 60px;
    padding: 0 15px;
}
.y_msg_listHd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.12);
}
.y_msg_listTitle {
    font-size: 20px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
}
.y_msg_listCount {
    font-size: 14px;
    color: rgba(51, 51, 51, 0.6);
}
.y_msg_item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(51, 51, 51, 0.08);
}
.y_msg_itemHd {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.y_msg_name {
    font-size: 15px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
}
.y_msg_date {
    font-size: 13px;
    color: rgba(51, 51, 51, 0.5);
}
.y_msg_body {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(51, 51, 51, 0.85);
    white-space: pre-wrap;
    word-break: break-word;
}
.y_msg_reply {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(51, 51, 51, 0.04);
    border-left: 3px solid rgba(51, 51, 51, 0.2);
    border-radius: 3px;
}
.y_msg_replyHd {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(51, 51, 51, 0.7);
    margin-bottom: 4px;
}
.y_msg_replyBody {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(51, 51, 51, 0.85);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 表单反馈条（{cms:flash} 输出的 .form-msg）*/
#c_introl_detail_004_P_033-1708324640030 .form-msg {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
}
#c_introl_detail_004_P_033-1708324640030 .form-msg.ok {
    background: rgba(40, 167, 69, 0.1);
    color: rgba(40, 167, 69, 1);
}
#c_introl_detail_004_P_033-1708324640030 .form-msg.err {
    background: rgba(255, 77, 79, 0.1);
    color: rgba(255, 77, 79, 1);
}

/* ============================================================
   customization 页留言表单（partials/page_cu_form.htm）
   ============================================================
   ⚠️ 这个页面用的是**另一个表单组件 id**（源站每页 CSS 独立生成）：
      /contact      → #c_introl_detail_004_P_033-1708324640030
      customization → #c_introl_detail_004_P_033-17192284856310
   两套 y_ 规则必须都写，否则本页的蜜罐/验证码/按钮全是默认样式
   （蜜罐会**直接显示在页面上** —— 它只是靠 left:-9999px 移出视口的）。 */
#c_introl_detail_004_P_033-17192284856310 .y_msg_hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#c_introl_detail_004_P_033-17192284856310 .y_msg_capRow {
    display: flex;
    align-items: center;
    gap: 10px;
}
#c_introl_detail_004_P_033-17192284856310 .y_msg_capImg {
    flex: 0 0 132px;
    width: 132px;
    height: 44px;
    border: 1px solid rgba(51, 51, 51, 0.15);
    border-radius: 4px;
    cursor: pointer;
}
#c_introl_detail_004_P_033-17192284856310 .y_msg_capRow .p_input {
    flex: 1 1 auto;
    min-width: 0;
}
#c_introl_detail_004_P_033-17192284856310 .e_formBtn-27.y_msg_submit {
    min-width: 150px;
}
#c_introl_detail_004_P_033-17192284856310 .form-msg {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
}
#c_introl_detail_004_P_033-17192284856310 .form-msg.ok {
    background: rgba(40, 167, 69, 0.1);
    color: rgba(40, 167, 69, 1);
}
#c_introl_detail_004_P_033-17192284856310 .form-msg.err {
    background: rgba(255, 77, 79, 0.1);
    color: rgba(255, 77, 79, 1);
}

/* ============================================================
   询盘表单：两个新出现的组件 id
   ============================================================
   ⚠️ 源站**每页 CSS 独立生成**，表单组件 id 各不相同，三处各一套 y_ 规则：
      /contact       → #c_introl_detail_004_P_033-1708324640030
      customization  → #c_introl_detail_004_P_033-17192284856310
      /inquiry（新建）→ #c_introl_detail_004_P_033-1708324640030
      产品详情页 Inquiry → #c_product_detail_003_P_174-1692350228608
   蜜罐是靠 left:-9999px 移出视口实现的，**缺样式就会直接显示在页面上**。 */

/* ---------- 产品详情页的 Inquiry 表单 ---------- */
#c_product_detail_003_P_174-1692350228608 .y_msg_hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#c_introl_detail_004_P_033-1708324640030 .y_msg_capRow,
#c_product_detail_003_P_174-1692350228608 .y_msg_capRow {
    display: flex;
    align-items: center;
    gap: 10px;
}
#c_introl_detail_004_P_033-1708324640030 .y_msg_capImg,
#c_product_detail_003_P_174-1692350228608 .y_msg_capImg {
    flex: 0 0 132px;
    width: 132px;
    height: 44px;
    border: 1px solid rgba(51, 51, 51, 0.15);
    border-radius: 4px;
    cursor: pointer;
}
#c_introl_detail_004_P_033-1708324640030 .y_msg_capRow .p_input,
#c_product_detail_003_P_174-1692350228608 .y_msg_capRow .p_input {
    flex: 1 1 auto;
    min-width: 0;
}

/* 询盘页的表单块间距（源站那个组件 id 下没有 y_ 规则，需自带） */
#c_introl_detail_004_P_033-1708324640030 .cbox-101-0 > div {
    margin-bottom: 18px;
}
#c_introl_detail_004_P_033-1708324640030 .e_formBtn-128 {
    min-width: 150px;
}
#c_introl_detail_004_P_033-1708324640030 .form-msg {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
}
#c_introl_detail_004_P_033-1708324640030 .form-msg.ok {
    background: rgba(40, 167, 69, 0.1);
    color: rgba(40, 167, 69, 1);
}
#c_introl_detail_004_P_033-1708324640030 .form-msg.err {
    background: rgba(255, 77, 79, 0.1);
    color: rgba(255, 77, 79, 1);
}

/* 询价车清单表：数字列右对齐，别让价格挤成一团 */
#c_static_001_P_13949-17096384022590 .p_tabelList td:nth-child(n+3) {
    text-align: right;
    white-space: nowrap;
}