/* ============================================================
   common.css —— 全站公共组件样式（每个页面都会引入）
   包含：Loading 动画、占位内容区、汉堡菜单 / H5 Header 适配、
         H5 全屏移动菜单、footer Request A Quote（询价区）
   说明：页面级样式（如首页、About 页）请放入各自页面级 CSS，
         不要污染本文件 / 也不要让页面级 CSS 被全站引入。
   ============================================================ */


/* ---------- 占位内容区（后续替换为业务模块） ---------- */
.page-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 1.2rem 0.4rem;
    background: linear-gradient(160deg, #101830 0%, #1b2447 55%, #0f1626 100%);
    color: #eef2ff;
    text-align: center;
}

.page-placeholder__title {
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(135deg, #00B8E2 0%, #0063C3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-placeholder__desc {
    margin-top: 0.24rem;
    font-size: 0.22rem;
    color: #9aa5c4;
}

.page-placeholder__links {
    display: flex;
    justify-content: center;
    gap: 0.24rem;
    margin-top: 0.4rem;
}

.page-placeholder__link {
    display: inline-block;
    padding: 0.12rem 0.32rem;
    font-size: 0.2rem;
    font-weight: 600;
    line-height: 1;
    color: #eef2ff;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0.06rem;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.page-placeholder__link:hover {
    color: #fff;
    background: linear-gradient(135deg, #00B8E2 0%, #0063C3 100%);
    border-color: transparent;
}

/* ============================================================
   H5 移动端适配（data-mode="h5"，750 设计稿基准）
   ============================================================ */
/* ---------- 汉堡菜单按钮 ---------- */
.menu-btn {
    display: none;
}

html[data-mode="h5"] .menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.09rem;
    width: 0.4rem;
    height: 0.4rem;
    padding: 0;
    border: none;
    border-radius: 0.1rem;
    background: rgba(255, 255, 255, 0.24);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

html[data-mode="h5"] .menu-btn span {
    display: block;
    width: 0.22rem;
    height: 0.03rem;
    border-radius: 0.03rem;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

html[data-mode="h5"] .header.is-scrolled .menu-btn {
    background: rgba(51, 51, 51, 0.08);
}

html[data-mode="h5"] .header.is-scrolled .menu-btn span {
    background: #333;
}

html[data-mode="h5"] .menu-btn.is-open span:nth-child(1) {
    transform: translateY(0.12rem) rotate(45deg);
}

html[data-mode="h5"] .menu-btn.is-open span:nth-child(2) {
    opacity: 0;
}

html[data-mode="h5"] .menu-btn.is-open span:nth-child(3) {
    transform: translateY(-0.12rem) rotate(-45deg);
}

/* ---------- H5 Header 布局 ---------- */
/* H5：隐藏上半信息条与主导航（改用汉堡菜单），仅保留 Logo + CTA + 菜单按钮 */
html[data-mode="h5"] .header {
    padding: 0 0.3rem;
}

html[data-mode="h5"] .header__top {
    display: none;
}

html[data-mode="h5"] .header__bottom {
    height: 0.8rem;
    gap: 0.15rem;
}

html[data-mode="h5"] .header__nav {
    display: none;
}

html[data-mode="h5"] .header__brand {
    font-size: 0.32rem;
}

html[data-mode="h5"] .header__cta {
    height: 0.36rem;
    padding: 0 0.14rem;
    font-size: 0.2rem;
}

/* ---------- H5：展开后的全屏下拉菜单（使用 #nav 元素作为容器） ---------- */
html[data-mode="h5"] .header__nav.is-open {
    position: fixed;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 7.5rem;
    height: calc(100vh - 0.8rem);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0.3rem 0.6rem 0.6rem;
    box-sizing: border-box;
    background: #fff;
    overflow-y: auto;
    animation: h5NavFadeIn 0.25s ease both;
}

@keyframes h5NavFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -0.2rem);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

html[data-mode="h5"] .header__nav.is-open .header__nav-item {
    width: 100%;
    padding: 0.22rem 0;
    border-bottom: 0.01rem solid #f0f2f5;
    color: #333;
    font-size: 0.3rem;
}

html[data-mode="h5"] .header__nav.is-open .header__nav-item:active {
    color: #00B8E2;
}

html[data-mode="h5"] .header__nav.is-open .header__nav-item::after {
    display: none;
}

/* ---------- H5：动态构建的全屏移动菜单（由 framework.js 生成） ---------- */
.header__nav-mobile {
    display: none;
}

html[data-mode="h5"] .header__nav-mobile {
    position: fixed;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 7.5rem;
    height: calc(100vh - 0.8rem);
    z-index: 99;
    background: #fff;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.3rem 0.6rem 0.6rem;
    box-sizing: border-box;
    box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.08);
}

html[data-mode="h5"] .header__nav-mobile.is-open {
    display: flex;
    animation: h5NavFadeIn 0.25s ease both;
}

html[data-mode="h5"] .header__nav-mobile .header__nav-item {
    width: 100%;
    padding: 0.22rem 0;
    border-bottom: 0.01rem solid #f0f2f5;
    color: #333;
    font-size: 0.3rem;
}

html[data-mode="h5"] .header__nav-mobile .header__nav-item:active {
    color: #00B8E2;
}

html[data-mode="h5"] .header__nav-mobile .header__nav-item::after {
    display: none;
}

/* ---------- H5：占位内容区 ---------- */
html[data-mode="h5"] .page-placeholder {
    min-height: 80vh;
    padding: 1rem 0.4rem;
}

html[data-mode="h5"] .page-placeholder__title {
    font-size: 0.4rem;
}

html[data-mode="h5"] .page-placeholder__desc {
    font-size: 0.22rem;
}

html[data-mode="h5"] .page-placeholder__links {
    gap: 0.18rem;
    margin-top: 0.3rem;
}

html[data-mode="h5"] .page-placeholder__link {
    padding: 0.1rem 0.24rem;
    font-size: 0.22rem;
}

/* ============================================================
   footer 第一屏：Request A Quote（询价区）
   设计稿基准 1920px（PC），H5 单独覆盖
   ============================================================ */
.quote {
    height: 8.4rem;
    /* 840px */
    padding: 0.95rem 1.43rem 0.95rem 1.27rem;
    /* 95 / 143 / 95 / 127 */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0) 100%),
        url("../assets/images/home/quote-bg.webp") center / cover no-repeat;
    background-color: #0e1a2b;
}

.quote__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 16.5rem;
    /* 1650px，避免在大屏上过度拉伸 */
    margin: 0 auto;
}

/* ---------- 左侧文案 ---------- */
.quote__intro {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 2.85rem;
    /* 285px */
}

.quote__title {
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 0.4rem;
    /* 40px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0.24rem;
    /* 24px */
}

.quote__line {
    width: 0.8rem;
    /* 80px */
    height: 0.06rem;
    /* 6px */
    background: #B81C22;
    margin-bottom: 0.24rem;
}

.quote__desc {
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.18rem;
    /* 18px */
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    max-width: 5.6rem;
}

/* ---------- 右侧表单卡片 ----------
   说明：quote 表单内部不使用 class/id，样式一律通过外层父级结构定位。
   footer 第一屏以 section.quote 为锚点；JS 弹窗以 .quote-modal 为锚点，
   两处表单结构完全一致，故选择器成对书写。 */
.quote form,
.quote-modal form {
    flex: 0 0 auto;
    width: 7.24rem;
    /* 644 + 40*2 = 724px */
    padding: 0.4rem;
    /* 40px */
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 0.04rem;
    /* 4px */
}

.quote form > ul,
.quote-modal form > ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.44rem;
    /* 44px = 644 - 300 - 300 */
    row-gap: 0.24rem;
    /* margin: 0 0 0.24rem; */
    padding: 0;
    list-style: none;
}

.quote form > ul > li,
.quote-modal form > ul > li {
    flex: 0 0 auto;
}

/* 前 4 个字段：两列，宽 300 */
.quote form > ul > li:nth-child(1),
.quote form > ul > li:nth-child(2),
.quote form > ul > li:nth-child(3),
.quote form > ul > li:nth-child(4),
.quote-modal form > ul > li:nth-child(1),
.quote-modal form > ul > li:nth-child(2),
.quote-modal form > ul > li:nth-child(3),
.quote-modal form > ul > li:nth-child(4) {
    width: 3rem;
    /* 300px */
    min-height: 0.92rem;
    /* 92px */
}

/* 附件行：整行，上传按钮位于输入框右侧（绝对定位） */
.quote form > ul > li:nth-child(5),
.quote-modal form > ul > li:nth-child(5) {
    width: 6.44rem;
    /* 644px */
    min-height: 0.92rem;
    /* 92px */
}

/* 留言行：整行 */
.quote form > ul > li:nth-child(6),
.quote-modal form > ul > li:nth-child(6) {
    width: 6.44rem;
    /* 644px */
    min-height: 1.21rem;
    /* 121px */
}

.quote form li > p,
.quote-modal form li > p {
    margin: 0;
}

/* 字段包装层（原 span.wpcf7-form-control-wrap） */
.quote form li > p > span,
.quote-modal form li > p > span {
    display: block;
}

/* 附件行：输入框容器（供 Upload 按钮绝对定位） */
.quote form li:nth-child(5) > p > span > span,
.quote-modal form li:nth-child(5) > p > span > span {
    position: relative;
}

/* 附件输入框：为右侧 Upload 按钮预留空间 */
.quote form li:nth-child(5) input,
.quote-modal form li:nth-child(5) input {
    padding-right: 1.04rem;
    /* 为右侧按钮留出空间（92 + 12） */
}

.quote form label,
.quote-modal form label {
    display: block;
    color: #333;
    font-family: "Montserrat", sans-serif;
    font-size: 0.16rem;
    /* 16px */
    font-style: normal;
    font-weight: 600;
    line-height: 175%;
}

.quote form input,
.quote-modal form input,
.quote form textarea,
.quote-modal form textarea {
    display: block;
    width: 100%;
    padding: 0.04rem 0 0.08rem;
    border: none;
    border-bottom: 1px solid #E5E5E5;
    background: transparent;
    outline: none;
    color: #999;
    font-family: "Montserrat", sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
}

.quote form input::placeholder,
.quote-modal form input::placeholder,
.quote form textarea::placeholder,
.quote-modal form textarea::placeholder {
    color: #999;
}

/* textarea 单独调整：去掉浏览器默认边框外观、限制拖拽缩放 */
.quote form textarea,
.quote-modal form textarea {
    height: 1.2rem;
    min-height: 0;
    resize: vertical;
}

html[data-mode="h5"] .quote form textarea,
html[data-mode="h5"] .quote-modal form textarea {
    height: 1.6rem;
}

/* Upload 按钮（附件行，绝对定位于输入框右侧） */
.quote form li:nth-child(5) button[type="button"],
.quote-modal form li:nth-child(5) button[type="button"] {
    position: absolute;
    right: 0;
    bottom: 0.16rem;
    width: 0.92rem;
    /* 92px */
    height: 0.35rem;
    /* 35px */
    border: none;
    border-radius: 0.04rem;
    background: #02347D;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 0.35rem;
    text-align: center;
    cursor: pointer;
}

/* 提交按钮 */
.quote form > button[type="submit"],
.quote-modal form > button[type="submit"],
.quote form > p > button[type="submit"],
.quote-modal form > p > button[type="submit"] {
    display: block;
    width: 100%;
    padding: 0.2rem 0.3rem;
    /* 20 / 30 */
    border: none;
    border-radius: 0.04rem;
    background: var(--Style, #02347D);
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 0.24rem 0;
    cursor: pointer;
}

/* 提交按钮被 p 包裹时，去掉 p 的默认间距，保持与其他页一致的排版 */
.quote form > p:has(> button[type="submit"]),
.quote-modal form > p:has(> button[type="submit"]) {
    margin: 0;
}

/* ---------- 按钮悬浮微交互（统一升级） ----------
   底色渐变自左向右擦入 + 高光斜向扫过 + 轻微上浮 + 紧致柔和投影
   去掉原先过大的扩散阴影与 brightness 提亮
   ------------------------------------------------ */
.quote form > button[type="submit"],
.quote-modal form > button[type="submit"],
.quote form > p > button[type="submit"],
.quote-modal form > p > button[type="submit"],
.quote form li:nth-child(5) button[type="button"],
.quote-modal form li:nth-child(5) button[type="button"] {
    overflow: hidden;
    background-image: linear-gradient(100deg, #0A4BA8 0%, #014ADC 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}

/* 建立包含块（Upload 按钮自身已绝对定位，不覆盖 position） */
.quote form > button[type="submit"],
.quote-modal form > button[type="submit"],
.quote form > p > button[type="submit"],
.quote-modal form > p > button[type="submit"] {
    position: relative;
}

/* 高光扫过层 */
.quote form > button[type="submit"]::after,
.quote-modal form > button[type="submit"]::after,
.quote form > p > button[type="submit"]::after,
.quote-modal form > p > button[type="submit"]::after,
.quote form li:nth-child(5) button[type="button"]::after,
.quote-modal form li:nth-child(5) button[type="button"]::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.38) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.quote form > button[type="submit"]:hover,
.quote-modal form > button[type="submit"]:hover,
.quote form > p > button[type="submit"]:hover,
.quote-modal form > p > button[type="submit"]:hover,
.quote form li:nth-child(5) button[type="button"]:hover,
.quote-modal form li:nth-child(5) button[type="button"]:hover {
    background-image: linear-gradient(100deg, #0A4BA8 0%, #014ADC 100%);
    background-size: 100% 100%;
    transform: translateY(-0.02rem);
    box-shadow: 0 0.04rem 0.12rem rgba(2, 52, 125, 0.22);
    filter: none;
}

.quote form > button[type="submit"]:hover::after,
.quote-modal form > button[type="submit"]:hover::after,
.quote form > p > button[type="submit"]:hover::after,
.quote-modal form > p > button[type="submit"]:hover::after,
.quote form li:nth-child(5) button[type="button"]:hover::after,
.quote-modal form li:nth-child(5) button[type="button"]:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.quote form > button[type="submit"]:active,
.quote-modal form > button[type="submit"]:active,
.quote form > p > button[type="submit"]:active,
.quote-modal form > p > button[type="submit"]:active,
.quote form li:nth-child(5) button[type="button"]:active,
.quote-modal form li:nth-child(5) button[type="button"]:active {
    transform: translateY(0);
    box-shadow: 0 0.01rem 0.04rem rgba(2, 52, 125, 0.16);
    transition-duration: 0.12s;
}

/* 表单下方说明文字（仅 footer 表单存在） */
.quote form > p {
    color: #999;
    font-family: "Montserrat", sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

/* ---------- H5 适配（≤750px 设计稿） ---------- */
html[data-mode="h5"] .quote {
    height: auto;
    padding: 0.6rem 0.3rem;
    align-items: stretch;
}

html[data-mode="h5"] .quote__inner {
    flex-direction: column;
    align-items: stretch;
    max-width: 7.5rem;
}

html[data-mode="h5"] .quote__intro {
    margin-right: 0;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .quote__title {
    font-size: 0.4rem;
}

html[data-mode="h5"] .quote__desc {
    font-size: 0.26rem;
    max-width: none;
}

html[data-mode="h5"] .quote form,
html[data-mode="h5"] .quote-modal form {
    width: 100%;
    padding: 0.3rem;
}

html[data-mode="h5"] .quote form > ul,
html[data-mode="h5"] .quote-modal form > ul {
    flex-direction: column;
    gap: 0.24rem;
    width: 100%;
    margin-bottom: 0.24rem;
}

html[data-mode="h5"] .quote form > ul > li,
html[data-mode="h5"] .quote form > ul > li:nth-child(1),
html[data-mode="h5"] .quote form > ul > li:nth-child(2),
html[data-mode="h5"] .quote form > ul > li:nth-child(3),
html[data-mode="h5"] .quote form > ul > li:nth-child(4),
html[data-mode="h5"] .quote form > ul > li:nth-child(5),
html[data-mode="h5"] .quote form > ul > li:nth-child(6),
html[data-mode="h5"] .quote-modal form > ul > li,
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(1),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(2),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(3),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(4),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(5),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(6) {
    width: 100%;
}

html[data-mode="h5"] .quote form li:nth-child(5) input,
html[data-mode="h5"] .quote-modal form li:nth-child(5) input {
    padding-right: 1.5rem;
}

html[data-mode="h5"] .quote form li:nth-child(5) button[type="button"],
html[data-mode="h5"] .quote-modal form li:nth-child(5) button[type="button"] {
    width: 1.2rem;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .quote form label,
html[data-mode="h5"] .quote form input,
html[data-mode="h5"] .quote form textarea,
html[data-mode="h5"] .quote-modal form label,
html[data-mode="h5"] .quote-modal form input,
html[data-mode="h5"] .quote-modal form textarea {
    font-size: 0.26rem;
}

html[data-mode="h5"] .quote form > button[type="submit"],
html[data-mode="h5"] .quote-modal form > button[type="submit"],
html[data-mode="h5"] .quote form > p > button[type="submit"],
html[data-mode="h5"] .quote-modal form > p > button[type="submit"] {
    font-size: 0.28rem;
}

html[data-mode="h5"] .quote form > p {
    font-size: 0.24rem;
}

/* ============================================================
   新版导航栏（index.html）：单层深色导航 1920 x 80
   注：Gabarito 字体已注册为 "Montserrat" 家族名（见 framework.css）
   ============================================================ */
.header.navbar {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 0.8rem;
    /* 80px，右侧留 24px，搜索框贴左边缘 */
    padding: 0 0.24rem 0 0;
    background: #141414;
    gap: 0;
}

.header.navbar.is-scrolled {
    background: #141414;
    box-shadow: 0 0.06rem 0.24rem rgba(0, 0, 0, 0.4);
}

/* ---------- 左侧搜索：80 x 80，贴左边缘，右边距 20 ---------- */
.navbar__search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.8rem;
    /* 80px */
    height: 0.8rem;
    /* 80px */
    margin-right: 0.2rem;
    /* 20px */
    flex-shrink: 0;
    background: #141414;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.35s ease;
}

.navbar__search-icon {
    display: block;
    width: 0.14rem;
    /* 14px */
    height: 0.14rem;
    /* 14px */
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.3s ease;
}

/* 悬浮：白色高光斜切扫过 */
.navbar__search::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

/* 悬浮：整块变橙 + 图标旋转放大 */
.navbar__search:hover {
    background: #EA5404;
}

.navbar__search:hover::before {
    left: 130%;
}

.navbar__search:hover .navbar__search-icon {
    transform: rotate(90deg) scale(1.2);
    filter: drop-shadow(0 0 0.06rem rgba(255, 255, 255, 0.8));
}

.navbar__search:active .navbar__search-icon {
    transform: rotate(90deg) scale(0.95);
}

/* ---------- 语言切换（复用旧结构，仅改样式） ---------- */
.navbar__lang {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.36rem;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.14rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.navbar__lang:hover {
    color: #EA5404;
}

.navbar__lang .trp-shortcode-switcher__wrapper {
    width: 100%;
    height: 100%;
}

.navbar__lang .trp-current-language-item__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ---------- Logo（文字） ---------- */
.navbar__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 1.76rem;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.3rem;
    /* 30px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: text-shadow 0.3s ease;
}

/* 悬浮：橙色辉光 */
.navbar__logo:hover {
    text-shadow: 0 0 0.18rem rgba(234, 84, 4, 0.75);
}

/* ---------- 中间主导航 ---------- */
.navbar__nav {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin-right: 0.32rem;
}

.navbar__link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    /* Gabarito */
    font-size: 0.16rem;
    /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        text-shadow 0.3s ease;
}

/* 悬浮：文字变橙 + 辉光 + 轻微上浮 */
.navbar__link:hover {
    color: #EA5404;
    transform: translateY(-0.02rem);
    text-shadow: 0 0 0.14rem rgba(234, 84, 4, 0.55);
}

/* 选中/悬浮：78 x 4 橙色横线，贴底从中间向两侧扫开 */
.navbar__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0.78rem;
    /* 78px */
    height: 0.04rem;
    /* 4px */
    background: #EA5404;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar__link:hover::after,
.navbar__link.is-active::after {
    transform: translateX(-50%) scaleX(1);
}

/* ---------- 右侧操作区 ---------- */
.navbar__right {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    margin-left: 0.9rem;
}

/* ---------- Get a Quote 按钮：135 x 40，圆角 30 ---------- */
.navbar__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    /* 135px */
    height: 0.4rem;
    /* 40px */
    border-radius: 0.3rem;
    /* 30px */
    background: #EA5404;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.14rem;
    /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 悬浮：白色高光斜切扫过 */
.navbar__cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

/* 悬浮：提亮 + 橙色辉光 + 回弹上浮 */
.navbar__cta:hover {
    background: #FF6A1F;
    transform: translateY(-0.03rem) scale(1.04);
    box-shadow: 0 0.08rem 0.24rem rgba(234, 84, 4, 0.55),
        0 0 0.3rem rgba(234, 84, 4, 0.35);
}

.navbar__cta:hover::before {
    left: 130%;
}

.navbar__cta:active {
    transform: translateY(-0.01rem) scale(0.97);
}

/* ---------- H5 适配：汉堡抽屉 ---------- */
html[data-mode="h5"] .header.navbar {
    height: 0.8rem;
    padding: 0 0.3rem;
}

html[data-mode="h5"] .navbar__logo {
    margin-right: 0;
    font-size: 0.32rem;
}

html[data-mode="h5"] .navbar__cta {
    width: auto;
    height: 0.56rem;
    padding: 0 0.3rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .navbar__nav {
    position: fixed;
    top: 0.8rem;
    left: 0;
    right: -1rem;
    bottom: 0;
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    height: auto;
    padding: 0.2rem 0.3rem;
    background: #141414;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-mode="h5"] .navbar__nav.is-open {
    transform: translateX(0);
}

html[data-mode="h5"] .navbar__link {
    width: 100%;
    height: auto;
    padding: 0.22rem 0;
    color: #FFF;
    font-size: 0.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* PC 端 .navbar__item--products 的 height:100% 在 H5 抽屉（fixed 列布局）
   中会被拉伸为整个抽屉高度，导致菜单项之间出现巨大空隙，恢复为内容高度 */
html[data-mode="h5"] .navbar__item--products {
    height: auto;
    display: block;
}

html[data-mode="h5"] .navbar__link::after {
    display: none;
}

/* 滚动后 .header.is-scrolled 的 backdrop-filter 会让 header 成为
   fixed 后代（H5 抽屉 #nav）的包含块，抽屉被压扁成 header 内的一条，
   H5 下必须禁用磨砂效果（与 framework.css 中 transform 的注意事项同理） */
html[data-mode="h5"] .header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-mode="h5"] .navbar__search,
html[data-mode="h5"] .navbar__lang {
    display: none;
}



/* ============================================================
   Product 二级导航（mega menu，1920 设计基准，1rem = 100px）
   全宽 1920 白底，padding 92 0，内容 1135 居中：
   左侧分类 337（行高 50，缩进 50，悬浮选中：#F5F5F5 底 + 橙字 + 右箭头）
   + 1px #CCC 竖分隔线 + 中间产品项 335（16px/400，点击选中变橙）
   + 右侧预览图 285x240 圆角 10
   悬浮 Product 链接或面板本身时展开；H5 下隐藏（走汉堡菜单）
   ============================================================ */
.navbar__item--products {
    /* position: relative; */
    display: flex;
    align-items: center;
    height: 100%;
}

/* 悬浮桥：链接与面板之间留出连续悬浮区，防止穿过间隙时面板收起 */
.navbar__item--products::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -0.4rem;
    right: -0.4rem;
    height: 0.3rem;
}

/* ---------- 面板：1920 全宽，padding 92 0 ---------- */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    padding: 0.92rem 0;
    box-sizing: border-box;
    background: #FFF;
    box-shadow: 0 0.16rem 0.3rem rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    /* transform: translateX(-50%) translateY(0.12rem); */
    transition: opacity 0.3s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.3s ease;
    pointer-events: none;
}

/* 悬浮展开：链接 / 面板任一悬浮均保持展开 */
.navbar__item--products:hover .mega,
.navbar__item--products.is-open .mega {
    opacity: 1;
    visibility: visible;
    /* transform: translateX(-50%) translateY(0); */
    pointer-events: auto;
}

/* ---------- 内容：1135 居中 ---------- */
.mega__inner {
    display: flex;
    align-items: flex-start;
    width: 11.35rem;
    margin: 0 auto;
}

/* ---------- 左侧分类：337 宽，行高 50 ---------- */
.mega__cats {
    display: flex;
    flex-direction: column;
    width: 3.37rem;
    flex: 0 0 auto;
}

.mega__cat {
    position: relative;
    display: flex;
    align-items: center;
    height: 0.5rem;
    padding: 0 0.51rem 0 0.5rem;
    box-sizing: border-box;
    background: transparent;
    color: #333;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.3s ease,
        color 0.3s ease;
}

/* 选中/悬浮：浅灰底 + 橙字 + 右侧箭头浮现 */
.mega__cat:hover,
.mega__cat.is-active {
    background: #F5F5F5;
    color: #EA5404;
}

.mega__cat-arrow {
    width: 0.2rem;
    height: 0.2rem;
    margin-left: auto;
    color: #EA5404;
    opacity: 0;
    transform: translateX(-0.08rem);
    transition: opacity 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mega__cat:hover .mega__cat-arrow,
.mega__cat.is-active .mega__cat-arrow {
    opacity: 1;
    transform: none;
}

/* ---------- 竖分隔线：1px #CCC ---------- */
.mega__divider {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 1.94rem;
    margin: 0 0.66rem 0 0;
    background: #CCC;
}

/* ---------- 中间产品项：335 宽，行距 35 ---------- */
.mega__lists {
    position: relative;
    width: 3.35rem;
    flex: 0 0 auto;
    min-height: 1.91rem;
}

.mega__list {
    display: none;
    flex-direction: column;
    gap: 0.19rem;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 显式约束字号/行高，避免 li 继承根字号把行盒撑大 */
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    line-height: 1;
}

.mega__list.is-active {
    display: flex;
}

.mega__item {
    display: inline-block;
    color: #333;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* 点击选中：橙色 */
.mega__item:hover,
.mega__item.is-active {
    color: #EA5404;
}

/* ---------- 右侧预览图：285 x 240，圆角 10 ---------- */
.mega__preview {
    margin-left: auto;
    width: 2.85rem;
    height: 2.4rem;
    border-radius: 0.1rem;
    overflow: hidden;
    flex: 0 0 auto;
}

.mega__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega__preview:hover .mega__img {
    transform: scale(1.08);
}

/* ---------- H5：隐藏 mega 菜单（走汉堡折叠菜单） ---------- */
html[data-mode="h5"] .mega,
html[data-mode="h5"] .navbar__item--products::after {
    display: none;
}

/* ============================================================
   About 二级下拉菜单（About / Corporate Profile / Factory Display）
   PC：悬浮或键盘聚焦展开；H5：抽屉内静态展示
   ============================================================ */
.navbar__item--about {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

/* 悬浮桥：链接与面板之间留出连续悬浮区，防止穿过间隙时面板收起 */
.navbar__item--about::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -0.4rem;
    right: -0.4rem;
    height: 0.2rem;
}

.navbar__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    min-width: 2.1rem;
    padding: 0.08rem 0;
    box-sizing: border-box;
    background: #FFF;
    border-radius: 0.08rem;
    box-shadow: 0 0.16rem 0.3rem rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(0.12rem);
    transition: opacity 0.3s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.3s ease;
    pointer-events: none;
}

/* 悬浮/键盘聚焦展开 */
.navbar__item--about:hover .navbar__dropdown,
.navbar__item--about:focus-within .navbar__dropdown,
.navbar__item--about.is-open .navbar__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.navbar__dropdown-link {
    display: block;
    padding: 0.12rem 0.24rem;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.15rem;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar__dropdown-link:hover,
.navbar__dropdown-link.is-active {
    background: #F5F5F5;
    color: #EA5404;
}

/* ---------- H5：抽屉内静态展示，不悬浮展开 ---------- */
html[data-mode="h5"] .navbar__item--about {
    display: block;
    height: auto;
}

html[data-mode="h5"] .navbar__item--about::after {
    display: none;
}

html[data-mode="h5"] .navbar__dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 0.06rem 0.24rem;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

html[data-mode="h5"] .navbar__dropdown-link {
    padding: 0.1rem 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.22rem;
}

html[data-mode="h5"] .navbar__dropdown-link:hover,
html[data-mode="h5"] .navbar__dropdown-link.is-active {
    background: transparent;
    color: #EA5404;
}