/* ==========================================================
 * 页面内容容器
 *
 * 抄参考站 Zz_www.dorellfabrics.com 的阶梯 —— 它用的是百分比，
 * 不是固定像素，所以视口越宽内容跟着变宽，不会一直卡在 1320：
 *
 *   基础        width:100% + 左右 20px 内边距
 *   <768        100%
 *   768-1023    93.75%
 *   1024-1279   90%
 *   1280-1439   87.5%
 *   >=1440      85%          <- 1920 下内容 1632px、左右各留 144px
 *   兜底上限     1800px       （参考站写的是 112.5rem，这里换算成 px）
 *
 * 之前是写死 max-width:1320px，1920 下左右各留 300px，
 * 比参考站宽出一倍多，看着像两页拼起来的。
 *
 * box-sizing 显式写一份：11 个页面各自的 reset 里都有，
 * 但 _bnr-test.html 那个桩没有，靠这里的声明兜住
 * （没有它，width:100% 会再加上 40px padding，横向溢出）。
 * ========================================================== */
.container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    padding-left: 20px;
    padding-right: 20px;
}

        @media (min-width: 1280px) {
            /* ≥1280px 起容器有 1080px，扣掉导航 604 + CTA 130 还能余 ~340px，
             * 这一档把槽位顶到 300px，容得下 260px 的图和 48px 的文字
             * （11 字符 × 0.58em × 48 ≈ 306px，会被 ellipsis 收一点点）。 */
            .header-inner .logo { width: 300px; }
            .logo-text { font-size: 48px; }
        }

@media (min-width: 768px) {
    .container { max-width: 93.75%; }
}

@media (min-width: 1024px) {
    .container { max-width: 90%; }
}

@media (min-width: 1280px) {
    .container { max-width: 87.5%; }
}

@media (min-width: 1440px) {
    .container { width: 85%; }
}

/* 公共导航栏样式（所有页面共用） */

        /* ========== NAVIGATION ==========
         * 导航浮在横幅上面，不是把横幅往下推。
         * 做法照参考站 Zz_lemonchiffon 的 .uicore-transparent：
         *   .uicore-transparent .uicore-header-wrapper { position: absolute }
         *   .uicore-transparent:not(.uicore-scrolled) { 菜单文字改成浅色 }
         *   滚动后 JS 加 .uicore-scrolled → 变回实底深色字
         * 横幅从页面最顶端开始（y=0），导航是 position:fixed 盖在上面。
         */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            /* 顶部状态：全透明，不画分隔线，文字走浅色（见下面 .is-solid） */
            background: transparent;
            border-bottom: 1px solid transparent;
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* 滚过顶部（或移动端展开了菜单）之后的实底状态 */
        .header.is-solid {
            background: var(--white);
            border-bottom-color: var(--gray-200);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        }

        .header-inner {
            display: flex;
            align-items: center;
            /* 参考站 worldbestjason 是 .head-info { height: 100px }，
             * logo 靠 max-height:70px 定在 70%（100 的七成）。
             * 我们原来导航只有 80px，logo 再怎么调也撑不到 70px 这个视觉量级 ——
             * 差的不是 logo 参数，是盒子小了一号。这里把导航也放大到 100px。 */
            height: 100px;
        }

        /* Logo 槽位：随视口缩放，不能写死。
         * 导航是 6 个菜单项 + 语言切换，桌面端总共要 ~730px。
         * 769–1023px 这一段本来就放不下（导航改高之前槽位 200px 也一样挤），
         * 写死 260px 会让菜单被压得更厉害，所以这里跟着视口走：
         *   1024px -> 195px    1280px -> 243px    1440px 以上 -> 300px 封顶
         * ≥1280px 的那档在下面的媒体查询里再放大（那里确实有余量）。 */
        .header-inner .logo {
            width: clamp(160px, 19vw, 300px);
            flex-shrink: 0;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        /* logo 图片盒：直接对齐参考站 worldbestjason
         *   .head-info .head-logo a img { width: auto; max-height: 70px }
         * 它的导航是 100px，logo 70px = 70%。我们导航也改成 100px，
         * 所以 max-height 同样给 70px；宽按用户报的 260px 给，
         * object-fit:contain 保证 266x90（2.96:1）这类比例的图不变形。
         * 其余两站作参考：dorellfabrics logo 宽 240px（≥1440）、
         * lemonchiffon logo 高 38px / 导航 68px = 56%。 */
        .logo-img {
            display: block;
            max-width: 260px;
            max-height: 70px;
            width: auto;
            height: auto;
            object-fit: contain;
            object-position: left center;
        }

        /* 文字版 logo。参考站用的都是图片，没有文字 logo 可抄；
         * 这里的字号按「视觉高 ≈ 70px 的 70%」反推 ——
         * Manrope 800 大写字高约 0.72em，所以 48px 的字视觉高约 35px，
         * 加上 x-height 的部分，整块读起来和 70px 高的图片是同一个量级。 */
        .logo-text {
            font-size: clamp(32px, 3vw, 48px);
            font-weight: 800;
            color: var(--black);
            letter-spacing: -1px;
            line-height: 1.05;
            /* 名字配长了就省略，别把导航撑破或换行 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.3s ease;
        }

        .logo-text span {
            color: var(--accent, #C4A17B); /* 炭黑主色下用金铜点缀，深色页脚同样可见 */
        }

        /* 浮在深色横幅上时 Logo 的 "Fabric" 也要转白，否则黑字压在图上看不见。
         * 金色的 "World" 不动 —— 深底浅底都够对比。 */
        .header:not(.is-solid) .logo-text {
            color: var(--white);
        }

        .header-inner nav {
            flex: 1;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            list-style: none;
        }

        .nav-menu a {
            display: block;
            padding: 0 16px;
            font-size: 15px;
            font-weight: 500;
            color: var(--gray-700);
            position: relative;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            cursor: pointer;
            transition: color 0.3s cubic-bezier(0.24, 1, 0.3, 1);
        }

        /* 浮在横幅上：菜单文字转浅色（参考站用的是
         * rgba(248,245,237,.70) + hover 纯白，数值照搬） */
        .header:not(.is-solid) .nav-menu a {
            color: rgba(248, 245, 237, 0.7);
        }

        .header:not(.is-solid) .nav-menu a:hover {
            color: var(--white);
        }

        /* 上下滑动翻转：两层文字垂直叠放，容器整体做位移 */
        .nav-menu a .nav-swap {
            display: block;
            position: relative;
            line-height: 20px;
            height: 20px;
            width: max-content;
            transition: transform 0.4s cubic-bezier(0.24, 1, 0.3, 1);
            will-change: transform;
        }

        /* 第二层副本 — 绝对定位在可视区正下方，悬停时随容器上移滑入 */
        .nav-menu a .nav-swap__dup {
            position: absolute;
            top: 100%;
            left: 0;
            white-space: nowrap;
            color: var(--primary);
        }

        .nav-menu a:hover {
            color: var(--primary);
        }

        .nav-menu a:hover .nav-swap {
            transform: translateY(-20px);
        }

        /* ========== 关于我们：桌面端 hover 下拉小卡片 ==========
         * 定位挂在 li 上而不是 a 上：桌面端 a 有 height:20px + overflow:hidden
         * （为上下翻转动效服务），面板挂在 a 里会被裁掉。
         *
         * 悬停热区要盖住 li 整体（含面板），否则鼠标从菜单项移向面板的
         * 途中会短暂离开 li，面板立刻收起，压根点不到子项。
         */
        .nav-menu > li.has-sub {
            position: relative;
        }

        /* 纯透明热区，不影响视觉：向上吃掉 header 下方的空白 */
        .nav-menu > li.has-sub::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            height: 18px;
        }

        .nav-menu > li.has-sub > .submenu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 200px;
            padding: 8px 0;
            margin: 0;
            list-style: none;
            background: var(--white);
            border: 1px solid var(--gray-200);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
            /* 隐藏用 opacity/visibility 而不是 display，
             * 这样还能保留过渡动画；visibility 让子项不可聚焦 */
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity 0.25s cubic-bezier(0.24, 1, 0.3, 1),
                        transform 0.25s cubic-bezier(0.24, 1, 0.3, 1),
                        visibility 0.25s;
        }

        .nav-menu > li.has-sub:hover > .submenu,
        .nav-menu > li.has-sub:focus-within > .submenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* 子项不需要翻转动效，复位成普通文字 */
        .nav-menu > li.has-sub > .submenu > li > a {
            height: auto;
            line-height: 1.5;
            padding: 10px 20px;
            overflow: visible;
            white-space: nowrap;
            font-size: 14px;
            color: var(--gray-700);
        }

        .nav-menu > li.has-sub > .submenu > li > a:hover {
            background: var(--gray-50);
            color: var(--primary);
        }


        /* ========== 语言切换（自定义下拉 + Google 翻译引擎） ==========
         * js/google-translate.js 生成 .lang-menu 插在汉堡按钮左边；
         * 官方挂件 #google_translate_element 只是藏在暗处当翻译引擎（display:none）。
         * element.js 会在 body 顶部塞一条翻译横幅、塞 tooltip iframe，
         * 这两样对布局是纯破坏，必须压掉。 */

        /* 触发钮：地球图标 + 当前语言名 + 箭头，视觉跟导航项一致 */
        .lang-menu {
            position: relative;
            margin-left: 16px;
        }

        .lang-menu__btn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px 2px;
            font-size: 14px;
            font-weight: 500;
            color: var(--gray-800);
            line-height: 20px;
            transition: color 0.3s cubic-bezier(0.24, 1, 0.3, 1);
        }

        .lang-menu__globe,
        .lang-menu__caret {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            flex-shrink: 0;
        }

        .lang-menu__caret {
            width: 12px;
            height: 12px;
            transition: transform 0.3s cubic-bezier(0.24, 1, 0.3, 1);
        }

        .lang-menu.is-open .lang-menu__caret {
            transform: rotate(180deg);
        }

        /* 浮在横幅上时深灰看不清，跟着导航一起转白 */
        .header:not(.is-solid) .lang-menu__btn {
            color: var(--white);
        }

        .lang-menu__btn:hover {
            color: var(--primary);
        }

        .header:not(.is-solid) .lang-menu__btn:hover {
            color: var(--white);
        }

        /* 展开浮层：白底卡片，右对齐弹出（贴导航右缘，不会被截断） */
        .lang-menu__list {
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            min-width: 180px;
            max-height: 320px;
            overflow-y: auto;
            background: var(--white);
            border: 1px solid var(--gray-200);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
            border-radius: 6px;
            padding: 6px 0;
            list-style: none;
            z-index: 1000;
        }

        .lang-menu.is-open .lang-menu__list {
            display: block;
        }

        .lang-menu__list li {
            padding: 9px 18px;
            font-size: 14px;
            color: var(--gray-700);
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s;
        }

        .lang-menu__list li:hover {
            background: var(--gray-50);
            color: var(--primary);
        }

        .lang-menu__list li.is-active {
            color: var(--primary);
            font-weight: 600;
        }

        /* 阿拉伯语（dir=rtl）下整页已镜像，语言按钮到了左侧，
         * 浮层也跟着贴左弹，否则会弹到屏幕外一侧。 */
        html[dir="rtl"] .lang-menu__list {
            right: auto;
            left: 0;
        }

        /* element.js 注入的顶部横幅和 tooltip：藏掉并抵消它给 body 加的偏移。
         * 横幅实际是插在 body 首位的 iframe.skiptranslate（类名 goog-te-banner-frame
         * 不总在），所以选择器要把 iframe 本身和 skiptranslate 包一层都盖住。 */
        body {
            top: 0 !important;
            position: static !important;
        }

        .goog-te-banner-frame,
        iframe.goog-te-banner-frame,
        iframe.skiptranslate,
        body > div.skiptranslate,
        .goog-te-balloon-frame,
        #goog-gt-tt,
        .goog-tooltip {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            border: none !important;
        }

        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
        }

        .mobile-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--gray-800);
            margin: 6px 0;
            transition: all 0.3s cubic-bezier(0.24, 1, 0.3, 1);
        }

        /* 浮在横幅上时汉堡按钮的杠也要转白，否则看不见 */
        .header:not(.is-solid) .mobile-toggle span {
            background: var(--white);
        }

        /* ========== 移动端导航（≤768px） ==========
         * 之所以收口到 common.css，有两个原因：
         *
         * 1) header 是跨页面公共区块，这段规则以前散在 9 个页面里各写一份，
         *    已经漂移成三套（top:100% / top:80px、padding 20px / 12px 24px 24px /
         *    24px），互相不一致。
         *
         * 2) 更要命的是加载顺序：各页都是内联 <style> 在前、common.css 在后，
         *    而媒体查询并不提高优先级。于是 common.css 里桌面端的
         *    .nav-menu{display:flex} 和 .mobile-toggle{display:none}
         *    把页面里的移动端规则整个盖掉 —— 移动端菜单会横向挤在头部、
         *    汉堡按钮根本不显示。放在 common.css 的媒体查询里（顺序在最后）
         *    才能稳定压过桌面端规则。
         */
        @media (max-width: 768px) {
            .header-inner {
                /* 参考站移动端 .head-info { height: 60px } */
                height: 60px;
                justify-content: space-between;
            }

            .header-inner .logo {
                width: auto;
            }

            /* 参考站移动端 img { max-height: 50px }，占 60px 的 83%。
             * 照搬这个比例 —— 移动端本来就是让 logo 尽量大。 */
            .logo-img { max-width: 160px; max-height: 50px; }
            .logo-text { font-size: 34px; }

            /* top:100% 相对 .header（position:fixed），
             * 不写死 80px —— 以后头部高度调整也不会错位。 */
            .nav-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
                padding: 8px 24px 20px;
                background: var(--white);
                border-top: 1px solid var(--gray-200);
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
                /* 矮屏（如横屏）菜单超出一屏时可滚动 */
                /* 菜单面板的滚动上限 = 视口高 − 导航高（60px） */
            max-height: calc(100vh - 60px);
                overflow-y: auto;
            }

            .nav-menu.active {
                display: flex;
            }

            /* 关键：桌面端 a 是 height:20px + line-height:20px + overflow:hidden
             *（为上下翻转的悬停动效服务），移动端必须把 height/overflow 复位，
             * 否则加了 padding 也会被裁成 20px 高、文字显示不全。 */
            .nav-menu a {
                width: 100%;
                height: auto;
                line-height: 1.6;
                padding: 13px 0;
                overflow: visible;
                border-bottom: 1px solid var(--gray-100);
            }

            .nav-menu li:last-child a {
                border-bottom: none;
            }

            /* 翻转动效在触屏上会留粘滞 hover，移动端关掉。
             * 需带上 :hover / :focus 才能压过上面同等特异性的悬停规则。 */
            .nav-menu a .nav-swap,
            .nav-menu a:hover .nav-swap,
            .nav-menu a:focus .nav-swap {
                height: auto;
                transform: none;
            }

            /* a 已经 overflow:visible，副本若还留着会盖住下一项 */
            .nav-menu a .nav-swap__dup {
                display: none;
            }

            /* 桌面端 .nav-swap 用 width:max-content 让文字不换行，
             * 纵向菜单里必须复位，否则每项按最长内容算宽，会撑出屏幕。 */
            .nav-menu a .nav-swap {
                width: auto;
            }

            /* 移动端：子菜单回到汉堡面板的流里竖排展开。
             * 桌面端是 hover 弹层，触屏没有 hover，所以这里点父项只展开/
             * 收起（js/header.js 里拦掉了默认跳转），子项才负责跳转。
             *
             * 收起用 display 而不是 visibility —— 收起后的子项必须彻底
             * 退出布局，否则会撑出一段空白。 */
            .nav-menu > li.has-sub > .submenu {
                display: none;
                position: static;
                min-width: 0;
                padding: 0 0 0 16px;
                background: none;
                border: none;
                box-shadow: none;
            }

            .nav-menu li.has-sub.open > .submenu {
                display: block;
            }

            .nav-menu > li.has-sub > .submenu > li {
                display: block;
                margin: 0;
            }

            .nav-menu > li.has-sub > .submenu > li > a {
                padding: 11px 0;
                font-size: 14px;
                color: var(--gray-500);
                white-space: normal;
            }

            .nav-menu > li.has-sub > .submenu > li > a:hover {
                background: none;
                color: var(--primary);
            }

            /* 父项 About 仍占一行，右侧留位给箭头 */
            .nav-menu .has-sub > a {
                position: relative;
                padding: 13px 32px 13px 0;
                border-bottom: 1px solid var(--gray-100);
            }

            .nav-menu > li.has-sub > a::after {
                right: 6px;
                margin-top: -5px;
                width: 8px;
                height: 8px;
            }

            /* 子项沿用父项的分割线，父项已经有一根了，这里不再重复 */
            .nav-menu .submenu li:last-child a {
                border-bottom: 1px solid var(--gray-100);
            }

            .mobile-toggle {
                display: block;
                padding: 10px 8px;
            }

            /* 移动端语言切换：留在顶栏右侧（汉堡按钮左边），不进下拉面板；
             * 展开浮层改为固定定位，避免被顶栏裁剪 */
            .lang-menu {
                margin-left: 4px;
            }

            .lang-menu__btn {
                font-size: 13px;
            }

            .lang-menu__label {
                max-width: 64px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .lang-menu__list {
                position: fixed;
                top: 64px;
                right: 12px;
                left: auto;
                min-width: 168px;
            }

            /* 改成固定 margin，展开动画的位移量才好算准 */
            .mobile-toggle span {
                margin: 0 auto 6px;
            }

            .mobile-toggle span:last-child {
                margin-bottom: 0;
            }

            /* 展开时汉堡变叉。菜单是按钮的前一个兄弟子树，普通选择器够不着，
             * 用 :has() 反向关联；老浏览器不支持时退化成普通汉堡，不影响使用。 */
            .header-inner:has(.nav-menu.active) .mobile-toggle span:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }
            .header-inner:has(.nav-menu.active) .mobile-toggle span:nth-child(2) {
                opacity: 0;
            }
            .header-inner:has(.nav-menu.active) .mobile-toggle span:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }
        }


/* 公共页脚样式 */

        /* ========== FOOTER ========== */
        .footer {
            background: var(--gray-900);
            color: var(--gray-400);
            padding: 80px 0 40px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 48px;
            margin-bottom: 60px;
        }

        .footer-brand p {
            font-size: 14px;
            line-height: 1.7;
            margin-top: 20px;
        }

        .footer-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            font-size: 14px;
            color: var(--gray-400);
            transition: color 0.3s cubic-bezier(0.24, 1, 0.3, 1);
        }

        .footer-links a:hover {
            color: var(--accent, #C4A17B); /* 页脚深灰底上炭黑不可见，改金铜 */
        }

        .footer .logo-text {
            color: var(--white);
            font-size: 40px;
        }

        /* 页脚没有导航条压着，logo 可以比导航再大一圈。
         * 注意深底上如果配了图，得用浅色版 logo ——
         * 图片不吃 color 变浅，浅底 logo 放深底上会看不清。 */
        .footer .logo-img {
            max-width: 200px;
            max-height: 58px;
        }

        /* ========== 页脚社媒图标 ==========
         * 只做轮廓式图标（描边随 currentColor），
         * 品牌色图标直接压深灰底会糊，用半透明白底 + hover 转金铜
         * 和页脚整体的克制调性一致。 */
        .footer-social {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 24px;
            padding: 0;
            list-style: none;
        }

        .footer-social li {
            margin: 0;
        }

        .footer-social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 50%;
            color: var(--gray-400);
            transition: color 0.3s cubic-bezier(0.24, 1, 0.3, 1),
                        border-color 0.3s cubic-bezier(0.24, 1, 0.3, 1),
                        background 0.3s cubic-bezier(0.24, 1, 0.3, 1);
        }

        .footer-social-link:hover {
            color: var(--accent, #C4A17B);
            border-color: var(--accent, #C4A17B);
            background: rgba(255, 255, 255, 0.05);
        }

        /* 社媒图标统一走 <img>：SVG 文件里 fill 写死，
         * 内联进来反而要额外规则去适配颜色，不如直接引文件。 */
        .footer-social-link img {
            display: block;
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        /* WhatsApp2 的图标是纯黑的（wsapp2.svg），在深色页脚上不描个白底
         * 根本看不见。只给这一个加，其他社媒图标保持原样。 */
        .footer-social-link.js-soc-wa2 {
            background: #fff;
            border-color: #fff;
        }

        /* 只给读屏软件用的文字，视觉上藏起来但不能 display:none
         * ——那样读屏软件也读不到。 */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* ========== 页脚联系方式（图标 + 文字） ========== */
        .footer-contact {
            list-style: none;
            padding: 0;
        }

        .footer-contact li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 14px;
            font-size: 14px;
            line-height: 1.6;
            color: var(--gray-400);
        }

        .footer-contact li:last-child {
            margin-bottom: 0;
        }

        .footer-contact svg {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            margin-top: 3px;
            fill: none;
            stroke: var(--gray-500);
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .footer-contact a {
            color: var(--gray-400);
            transition: color 0.3s cubic-bezier(0.24, 1, 0.3, 1);
        }

        .footer-contact a:hover {
            color: var(--accent, #C4A17B);
        }

        /* ========== 页脚响应式 ==========
         * 页脚是跨页面公共区块，响应式也收在这里（和各页内联 style 无关）。
         * 断点跟导航一致：1024px 收窄间距，768px 以下改为单列。 */
        @media (max-width: 1024px) {
            .footer {
                padding: 60px 0 32px;
            }

            .footer-grid {
                gap: 32px;
                margin-bottom: 44px;
            }

            .footer .logo-text {
                font-size: 34px;
            }
        }

        @media (max-width: 768px) {
            .footer {
                padding: 48px 0 28px;
            }

            /* 四栏在窄屏会挤成一条缝，直接单列；
             * 品牌区保持最上，联系方式排在最后。 */
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 32px;
                margin-bottom: 0;
            }

            /* 单列后各栏之间补一条分隔线，视觉上不至于糊成一片 */
            .footer-grid > div + div {
                padding-top: 28px;
                border-top: 1px solid var(--gray-800);
            }

            .footer-brand p {
                font-size: 13px;
                margin-top: 16px;
            }

            .footer-title {
                font-size: 14px;
                margin-bottom: 16px;
            }

            .footer-social {
                margin-top: 20px;
                gap: 8px;
            }

            .footer-links li,
            .footer-contact li {
                margin-bottom: 10px;
            }
        }

        .footer-bottom {
            border-top: 1px solid var(--gray-800);
            padding-top: 30px;
            text-align: center;
            font-size: 13px;
            color: var(--gray-500);
        }


/* 回到顶部按钮 */

        /* ========== GO TOP ========== */
        .go-top {
            position: fixed;
            right: 24px;
            /* 让开右下角的在线客服悬浮球：它一般停在 bottom 20~24px 一带，
               按钮上移到 100px 才不会和它叠在一起。客服栏关了的话，
               这个位置稍微偏高一点，但不影响使用。 */
            bottom: 100px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--primary);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s cubic-bezier(0.24, 1, 0.3, 1);
            z-index: 1000;
        }

        .go-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .go-top svg {
            width: 20px;
            height: 20px;
            stroke: var(--white);
            stroke-width: 2;
            fill: none;
        }

        /* 手机端的客服对话框基本贴满右下角，发送键就在按钮上方，
         * 100px 还会被它压住，所以窄屏再往上抬一截。
         * PC 端维持上面的 100px 不动（那边客服是独立悬浮球，不冲突）。 */
        @media (max-width: 768px) {
            .go-top {
                bottom: 220px;
            }

            /* 在线客服的悬浮球（Knocket SDK，宿主 #contact-widget-auto）默认停在
               bottom 20px，窄屏同样会被全屏对话框的发送键压住，也往上挪一截，
               落在「回到顶部」箭头（bottom 220px + 48px 高）的正上方。
               这几个变量 SDK 只 var() 取用、从不自己声明，这里覆盖一定生效；
               写在 :root 上才能穿过 shadow DOM 继承进去。PC 端不写这条，
               保持 SDK 默认的右下角位置不动。 */
            :root {
                --contact-widget-bottom: 280px;
            }
        }


/* ========== 右侧浮动联系栏（白色卡片） ========== */
        .float-contact {
            position: fixed;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 950;
        }

        .float-contact-card {
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            padding: 16px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
        }

        .float-contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            /* 换成 img/ 下的彩色品牌图标后不再用金色底：
             * 微信绿 / WhatsApp 绿 / Gmail 四彩压在金色方块上对比很差，
             * Gmail 那张本身以白色为主，贴金底会糊成一团。 */
            background: transparent;
            text-decoration: none;
            transition: background .25s, transform .25s cubic-bezier(0.24, 1, 0.3, 1);
            cursor: pointer;
            border-radius: 10px;
        }

        .float-contact-item:hover {
            background: var(--gray-100);
            transform: scale(1.08);
        }

        .float-contact-item img {
            display: block;
            width: 26px;
            height: 26px;
            object-fit: contain;
        }

        /* 微信二维码浮层
         * 二维码尺寸必须写死，并显式压掉 max-width。各页内联样式都有
         * img { max-width:100%; height:auto; display:block }，那是给内容区
         * 大图自适应用的；一旦作用到浮层这张图上，图片加载完成前没有固有尺寸，
         * height:auto 算出来就是 0，<img> 塌成 0x0，浮层只剩 padding+border
         * 的一条白色细边 —— 表现就是「二维码被挡住、只出来一个边边」。
         * 原来只靠 .float-wechat-qrcode img(0,1,1) 压过它(0,0,1)，
         * 页面没更新到 common.css 就会塌，故在此写死并提高优先级。 */
        .float-wechat-wrapper {
            position: relative;
            /* 和浮层一起提到卡片之上。原先两层都没有 z-index，
             * 只靠 DOM 顺序绘制，很容易被祖先意外生成的层叠上下文压住。 */
            z-index: 999;
        }

        .float-wechat-qrcode {
            position: absolute;
            right: calc(100% + 14px);
            /* 垂直居中改用 margin-top，不再用 transform。
             * 原先这里是 transform: translateY(-50%) scale(.9)，而 transform
             * 会让元素「生成层叠上下文」—— 正是浮层明明在 DOM 里靠后、
             * 却被当成同层甚至更低层绘制而「被挡住」的成因。
             * 内容高度固定 150 + padding 16 + border 2 = 168，写死偏移即可。 */
            top: 50%;
            margin-top: -84px;
            background: var(--white);
            border: 1px solid var(--gray-200);
            padding: 8px;
            border-radius: 4px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            opacity: 0;
            visibility: hidden;
            transition: opacity .25s, visibility .25s;
            pointer-events: none;
            white-space: nowrap;
            z-index: 999;
        }

        .float-wechat-qrcode::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -6px;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-left-color: var(--white);
        }

        /* 后台没配二维码、或后端文件加载失败时，js 会给浮层加这个类，
         * 直接收掉，不留 150x150 的白色空框。 */
        .float-wechat-qrcode.is-hidden {
            display: none;
        }

        .float-wechat-qrcode img,
        .float-wechat-qrcode .js-wechat-qr {
            width: 150px;
            height: 150px;
            max-width: none;
            display: block;
        }

        .float-wechat-wrapper:hover .float-wechat-qrcode,
        .float-wechat-qrcode.is-show {
            opacity: 1;
            visibility: visible;
            /* 这里绝不能再写 transform：垂直位置已由 top:50% + margin-top:-84px
             * 确定，若再加 translateY(-50%) 就是二次偏移，浮层会被顶到卡片外面；
             * 而且 transform 会生成层叠上下文，正是「被挡住」的成因。 */
            transform: none;
            pointer-events: auto;
        }

        /* 移动端隐藏 */
        @media (max-width: 768px) {
            .float-contact {
                display: none;
            }
        }

        /* ========== 页脚微信二维码弹层 ==========
         * 点页脚微信图标弹出，全屏遮罩 + 居中白卡，点遮罩或 × 关闭。
         * 由 js/page-common.js 现建 DOM，页面里无需预埋结构。 */
        .wc-qr-mask {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .wc-qr-box {
            position: relative;
            background: var(--white);
            padding: 16px;
            border-radius: 6px;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
        }

        .wc-qr-img {
            display: block;
            width: 220px;
            height: 220px;
        }

        .wc-qr-close {
            position: absolute;
            top: -14px;
            right: -14px;
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
            background: var(--gray-800, #333);
            color: #fff;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
        }

        .wc-qr-close:hover {
            background: var(--gray-600, #555);
        }

/* ========== 会员登录 / 注册 ==========
 * 弹窗由 js/member.js 动态注入，11 个页面共用这一份，
 * 页面 HTML 里不用各写一遍。
 * 导航栏不放登录入口，需要时由页面调用 MemberUI.openLogin() 弹出。 */
.mb-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    overflow-y: auto;
}

.mb-box {
    position: relative;
    background: var(--white);
    border-radius: 6px;
    width: 100%;
    max-width: 420px;
    padding: 36px 32px 32px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.mb-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 4px;
}

.mb-sub {
    font-size: 13px;
    color: var(--gray-600);
    margin: 0 0 24px;
}

.mb-field {
    margin-bottom: 16px;
}

.mb-field label {
    display: block;
    font-size: 13px;
    color: var(--gray-700, #374151);
    margin-bottom: 6px;
}

.mb-field input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--gray-300, #D1D5DB);
    border-radius: 3px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--gray-900);
    outline: none;
    transition: border-color 0.2s linear;
}

.mb-field input:focus {
    border-color: var(--primary);
}

/* 验证码行：输入框 + 「看验证码」按钮 */
.mb-captcha-row {
    display: flex;
    gap: 10px;
}

.mb-captcha-row input {
    flex: 1;
    min-width: 0;
}

.mb-captcha-btn {
    flex-shrink: 0;
    min-width: 104px;
    border: 1px solid var(--gray-300, #D1D5DB);
    border-radius: 3px;
    background: var(--gray-50, #F9FAFB);
    color: var(--primary);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 4px;
    cursor: pointer;
    padding: 0 12px;
}

.mb-captcha-btn:disabled {
    color: var(--gray-500, #9CA3AF);
    cursor: default;
}

.mb-submit {
    width: 100%;
    border: none;
    border-radius: 3px;
    background: var(--primary);
    color: var(--white);
    font-family: inherit;
    font-size: 15px;
    padding: 12px;
    cursor: pointer;
    transition: background 0.2s linear;
}

.mb-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.mb-submit:hover:not(:disabled) {
    background: var(--primary-dark);
}

.mb-msg {
    min-height: 20px;
    font-size: 13px;
    margin: 12px 0 0;
}

.mb-msg.is-err {
    color: #DC2626;
}

.mb-msg.is-ok {
    color: #059669;
}

.mb-switch {
    text-align: center;
    font-size: 13px;
    color: var(--gray-600);
    margin: 18px 0 0;
}

.mb-switch button {
    border: none;
    background: none;
    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

.mb-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--gray-500, #9CA3AF);
    cursor: pointer;
    padding: 4px 8px;
}

.mb-hint {
    font-size: 12px;
    color: var(--gray-500, #9CA3AF);
    margin: -8px 0 16px;
    padding: 8px 10px;
    background: var(--gray-50, #F9FAFB);
    border-radius: 3px;
    line-height: 1.6;
}

/* ========== 页面横幅（banner）轮播 ==========
 * 容器在页面上用 data-banner="槽位" 标注，js/banner.js 按结构接管。
 * 这里是唯一一份样式：9 个页面共用。
 */
.bnr-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bnr-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}
.bnr-slide.is-active { opacity: 1; pointer-events: auto; }
.bnr-slide.is-link { cursor: pointer; }

/* 图片型横幅（products / product-detail / news-detail）：
 * 容器高度本来是靠那张 <img> 撑的，改成绝对定位后就没有高度了。
 * 让第一张留在文档流里按 aspect-ratio 撑开，其余几张叠在它上面。 */
.bnr-slides--img { position: relative; inset: auto; }
.bnr-slides--img .bnr-slide { position: absolute; inset: 0; aspect-ratio: 16 / 5; }
.bnr-slides--img .bnr-slide:first-child { position: relative; }
.bnr-slides--img .bnr-slide picture { display: block; height: 100%; }
.bnr-slides--img .bnr-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 背景图型：桌面图 / 移动端图分别用 CSS 变量喂进来，媒体查询里切换。
 * var(--bnr-m, var(--bnr-d)) 表示没配移动端图时沿用桌面图。 */
.bnr-slide-bg {
    position: absolute;
    inset: 0;
    background-image: var(--bnr-d);
    background-size: cover;
    background-position: center;
}
/* 首页 hero 的图片压暗。
 * 原来这里是 .6 —— 它是「遮罩时代」的遗留做法（那时没有 ::before，
 * 只能靠图片自身透明度压暗）。后来加了 ::before 渐变遮罩，图片又压一层，
 * 两层叠加后图片发灰、细节全糊了。
 * 现在压暗统一交给 ::before，这里只留一点点，
 * 避免完全依赖渐变时遇到浅色图标题糊掉。 */
.hero .bnr-slide-bg { opacity: .88; }

/* 层级：图（0）→ 页面自带的遮罩（1）→ 文案（3）→ 切换控件（4）。
 * 各页 .page-hero::before / .hero-content 本来就定位过，这里统一兜底，
 * 不依赖每个页面有没有写。 */
.page-hero::before,
.hero::before { z-index: 1; }
.page-hero > .container,
.hero > .container { position: relative; z-index: 3; }

/* 文案淡入淡出由 js 给容器加 is-fading，这里只需过渡规则 */
.bnr-text { transition: opacity .35s ease; }
.bnr-text.is-fading { opacity: 0; }
/* 文案整块被包成链接时，保持原样继承颜色和排版 */
.bnr-link { display: block; color: inherit; text-decoration: none; }
.bnr-link:hover { color: inherit; }

/* 左右切换按钮 */
.bnr-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s;
}
.bnr-btn:hover { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .7); }
.bnr-btn--prev { left: 18px; }
.bnr-btn--next { right: 18px; }

/* 指示点 */
.bnr-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.bnr-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.bnr-dot:hover { background: rgba(255, 255, 255, .75); }
.bnr-dot.is-active { background: #fff; transform: scale(1.25); }

@media (max-width: 768px) {
    .bnr-slide-bg { background-image: var(--bnr-m, var(--bnr-d)); }
    .bnr-slides--img .bnr-slide { aspect-ratio: 4 / 3; }
    .bnr-btn { width: 38px; height: 38px; font-size: 22px; }
    .bnr-btn--prev { left: 10px; }
    .bnr-btn--next { right: 10px; }
    .bnr-dots { bottom: 10px; }
}

/* 尊重系统的「减弱动态效果」设置：不做过渡 */
@media (prefers-reduced-motion: reduce) {
    .bnr-slide,
    .bnr-text,
    .bnr-dot,
    .bnr-btn { transition: none; }
}

/* ==========================================================
 * 页面横幅（内页 page-hero）统一规格
 *
 * 之前这段样式在 7 个页面的 <style> 里各抄一份，改一处就得改七处，
 * 已经走样过（有人加高有人没加）。现在只此一份，页面里不要再写。
 *
 * 位置：横幅从页面最顶端 y=0 开始，导航是 position:fixed 浮在它上面。
 *       所以这里不能写 margin-top 让位 —— 写了横幅就被推下去，
 *       顶部又会露出一条白边、导航和横幅之间裂开。
 *
 * 尺寸基准：solutions.html，16 / 5。
 * 文字排版基准：参考站 Zz_lemonchiffon post-977 的页首
 *   —— 只有「页眉 + 标题」两行，没有描述。
 *      页眉 11px / 500 / uppercase / ls .22em
 *      标题 weight 600 / lh 1.2 / ls -.027em（移动端 24px）
 * ========================================================== */

.page-hero {
    position: relative;
    aspect-ratio: 16 / 5;
    /* 16/5 在窄屏上只有 200 多像素高，标题会被浮在上面的导航压住，
     * 所以给一个下限。低于 1200px 视口时由 min-height 接管，
     * 宽屏（≥1200px）仍然严格是 16/5，尺寸基准不变。 */
    min-height: 400px;
    /* 上内边距给浮着的导航留位：导航 100px + 24px 余量 = 124px。
     * 导航之前是 80px、这里写 96px；导航加高到 100px 后必须同步，
     * 否则标题会滑到导航底边下面。
     * aspect-ratio 约束的是 border box，加 padding 只压缩内容区、
     * 不改变盒子高度，所以比例不会走形。 */
    padding: 124px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 参考站是小字 + 标题在 Bootstrap .row 里【左对齐】，
     * 靠 col-7 / col-10 控制行长，不是居中。跟着改成左对齐。 */
    text-align: left;
    overflow: hidden;
    background: var(--gray-900);
}

/* 遮罩两层：上面是原有的金色调，下面是新加的深色压暗。
 *
 * 深色层是导航浮上来之后才需要的 —— 之前横幅顶部被白导航挡着，
 * 图上只压了薄薄一层金色，遇到浅色 banner 图时浮在上面的白导航字
 * 就看不清了。现在顶部压得最重，中间留出来给图。
 *
 * 数值从 .55/.32/.55 降到 .38/.12/.30：原来这三段叠起来太闷，
 * 图里的织机、面料细节全看不见了。顶部仍是最重的一段 —— 导航浮在上面，
 * 那里的白字需要对比度；中间几乎不压，让图片本身透出来。
 *
 * pointer-events:none 是必须的：这张伪元素铺满整个横幅，
 * 不关掉的话配了 linkUrl 的整张图点不动
 * （事件落在 section 上，closest('.bnr-slide') 找不到）。 */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(196, 161, 123, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.38) 0%, rgba(17, 24, 39, 0.12) 55%, rgba(17, 24, 39, 0.30) 100%);
}

/* ==========================================================
 * 横幅文字：小字 + 标题
 *
 * 抄参考站 Zz_www.dorellfabrics.com 的 solutions.html：
 *   <span class="heading-6 … col-12 col-7-sm-up">Solutions</span>
 *   <h1  class="… col-12 col-10-md-up margin-4-t heading-3">…</h1>
 *
 * 参考站原值：
 *   .heading-6  clamp(1.25rem,  -0.58rem + 2.03vw, 2.0625rem)
 *              weight 500  lh 1.2   ls .07em   uppercase
 *   .heading-3  clamp(5.125rem, -2.19rem + 8.13vw, 8.375rem)
 *              weight 700  lh .9    ls -.02em
 *   .margin-4-t  margin-top 2.5rem = 40px
 *   .alabaster   #f7f6f0    .black-bg  #000
 *
 * 两处没照搬，理由见下面各自的注释。
 * ========================================================== */

/* 小字。col-7 / 12 = 58.33%
 * 参考站靠 Bootstrap 的 col-7 限制行长，这里直接用 max-width ——
 * 视觉等价，且不依赖 .bnr-copy 这层包装在不在（banner.js 接管后才有）。 */
.page-hero-label {
    display: block;
    font-size: clamp(14px, 7.2px + 0.7vw, 24px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    /* 参考站 alabaster #f7f6f0，小字按惯例压到 70% */
    color: rgba(247, 246, 240, 0.7);
    max-width: 58.33%;
    margin: 0 0 40px;   /* .margin-4-t 的 2.5rem */
}

/* ========== 面包屑栏 ==========
 * 独立一条浅色栏，夹在横幅图和正文之间 —— 位置和原来是 .banner-content
 * 那条一样，没有挪动过。刻意不放进 .page-hero 里：横幅是叠图，
 * 塞进去就变成压在图上，位置变了。
 *
 * 用在 products / product-detail / news-detail 三页。 */
.page-crumb {
    background: #FAFAFA;
    border-bottom: 1px solid var(--gray-200);
}

.page-crumb .container {
    display: flex;
    align-items: center;
    min-height: 46px;
}

.page-crumb .banner-breadcrumbs {
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-600);
    text-transform: capitalize;
}

.page-crumb .banner-breadcrumbs a {
    color: var(--gray-600);
    transition: color 0.2s ease;
}

.page-crumb .banner-breadcrumbs a:hover {
    color: var(--primary);
}

.page-crumb .banner-breadcrumbs .home-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: -2px;
}

.page-crumb .banner-breadcrumbs .home-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* 最后一段是「当前页」，没有链接，用更深的颜色区分 */
.page-crumb .banner-breadcrumbs span:not(.home-icon) {
    color: var(--gray-900);
}

@media (max-width: 768px) {
    .page-crumb .container { min-height: 40px; }
    .page-crumb .banner-breadcrumbs { font-size: 12px; }
}

/* 标题。col-10 / 12 = 83.33%
 *
 * 字号下限比参考站低，这是有意为之：
 * 参考站标题压在【图下面】的独立区块，padding 150px，盒子想多高有多高；
 * 我们的标题叠在 16/5 的图上，高度被比例锁死。照搬它 82px 的下限，
 * 1920 下正文需要 512px 而内容区只有 408px，会直接溢出。
 * 保留 clamp 的曲线形状和小字/标题的比例关系，只把上下限各压一档。
 * 字体也仍是 Manrope/Inter —— 参考站的 Moneta 是商业衬线字体，
 * 换字体属于全站设计变更，不在这次范围内。 */
.page-hero-title {
    font-size: clamp(40px, -9.6px + 5.4vw, 96px);
    font-weight: 700;
    line-height: 0.95;   /* 参考站 .9；两行时用 .95 行距不至于挤在一起 */
    letter-spacing: -0.02em;
    color: #f7f6f0;      /* 参考站 alabaster 暖白，不是纯白 #fff */
    max-width: 83.33%;
    margin: 0;
}

/* 首页 hero：保持「全屏」。
 * 导航浮在上面、hero 自己就是 100vh，两者相加正好一屏 ——
 * 因为 header 是 position:fixed，不占文档流。
 *
 * display:flex + align-items:center 是文案的垂直居中。
 * 这两条之前漏在 index.html 的内联样式里，收进 common.css 时没跟过来，
 * 结果首页文案贴着顶部、其他页面（.page-hero 有这两条）却正常。 */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--gray-900);
}

/* 首页原来没有遮罩，只靠图片 opacity .6 压暗。
 * 导航浮上来之后顶部也要压一层，浮在上面的白字才够对比。
 *
 * 数值从 .5/.18/.42 降到 .32/.06/.22，图片透明度同时从 .6 提到 .88，
 * 两处一起调才有效 —— 只压遮罩不改图片，图还是灰的；
 * 只提图片不压遮罩，浅色图上的白标题就糊了。 */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.32) 0%, rgba(17, 24, 39, 0.06) 45%, rgba(17, 24, 39, 0.22) 100%);
}

/* image 型横幅（products / product-detail / news-detail）。
 * 导航浮在上面，这张图要从 y=0 就开始。
 * 顶部压一道由深到浅的暗色，否则浅色 banner 图上的白导航字会看不清 ——
 * image 型的图没有 .page-hero::before 那层统一压暗，得自己补。 */
.banner-inner {
    position: relative;
    overflow: hidden;
    background: var(--gray-900);
}

.banner-inner::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.45) 0%, rgba(17, 24, 39, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* 横幅图本身的点击跳转（banner.js 的 linkUrl）不能被上面两层遮罩吃掉 */
.banner-inner .bnr-slides,
.banner-inner .bnr-slide {
    z-index: 0;
}

/* .banner-content（标题条）要压在渐变之上 */
.banner-inner > .banner-content {
    position: relative;
    z-index: 2;
}

/* image 型横幅的独立文案层（banner.js 的 ensureImageCopy 新建）。
 * 叠在横幅图下半部：页眉小字 + 大标题，与 about.html 的
 * .page-hero-label / .page-hero-title 同一套排版（共用那些类名）。
 * 图下方的 .banner-content（面包屑条）不被改动，仍用下面 z-index:2。
 * 文案层要在遮罩（::before / ::after）之上、控制层之下，定 z-index:3。 */
.banner-inner .bnr-copy--img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 3;
    pointer-events: none;
}

/* 文案层里的 .page-hero-label / .page-hero-title 继承 common.css 那套字号
 * （clamp 40~96px 大标题），不再需要页面本地再写 .banner-title-h1。
 * 移动端字号跟随 .page-hero-title 的媒体查询降档。 */
.banner-inner .bnr-copy--img .page-hero-label {
    margin-bottom: 16px;
}

.banner-inner .bnr-copy--img .page-hero-title {
    margin: 0;
}

@media (max-width: 768px) {
    .banner-inner .bnr-copy--img {
        bottom: 16px;
    }
}

/* image 型横幅的静态兜底标题（接口不可用 / 后台没配文案时）。
 * 默认它显示在图下方的 .banner-content 面包屑条里（浅灰底小字，
 * 和面包屑同行，两个页面的样式块都这么写的）。
 * 一旦后台配了文案、banner.js 接管，标题会被搬进 .bnr-copy--img
 * 叠在图上，静态这条就不再显示 —— 所以静态样式保持原样即可，
 * 这里不再额外覆盖，避免和两个页面的本地样式块打架。 */

/* 首页 hero 的文案用同一套排版，和内页横幅保持一致
 * （参考站的 home 页首和 solutions 页首是同一个 hero 组件）。 */
.hero-label {
    display: block;
    font-size: clamp(14px, 7.2px + 0.7vw, 24px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(247, 246, 240, 0.7);
    margin: 0 0 40px;
}

.hero-title {
    font-size: clamp(40px, -9.6px + 5.4vw, 96px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: #f7f6f0;
    /* 首页文案是左对齐的，标题不需要限宽到 83% —— 后面还要接两个 CTA 按钮 */
    margin: 0 0 40px;
}

@media (max-width: 768px) {
    /* 移动端只是比例变高，位置不变：横幅照样从 y=0 开始，导航照样浮在上面。
     * 4/3 在 390px 宽上只有 292px，比桌面的下限还矮，所以把 min-height 放开。
     * 字号下限也跟着降一档，40px 在 375px 屏上会把 4/3 撑破。 */
    /* 移动端导航 60px + 24px 余量 = 84px（桌面是 124px） */
    .page-hero { aspect-ratio: 4 / 3; min-height: 0; padding: 84px 0; }
    .page-hero-label,
    .hero-label { font-size: clamp(12px, 2.6vw, 16px); margin-bottom: 20px; }
    .page-hero-title,
    .hero-title { font-size: clamp(26px, 5.4vw, 40px); }
    /* 顶部压暗带跟着导航一起加高（桌面 140px / 移动 100px） */
    .banner-inner::before { height: 100px; }
}

        /* ========== 全局兜底：防止横向滚动 ========== */
        html,
        body {
            overflow-x: hidden;
            max-width: 100%;
        }