/* =====================================================================
 * KERWEN — Modern Patch Stylesheet  (2026 refresh)
 * 文件作用: 仅覆盖, 不修改任何原 css/*.css.
 * 加载顺序: 在 head.php 中最后一个注册, 确保优先级最高.
 * 设计参考: awesome-design-md (HashiCorp + Stripe + Tesla 风格融合)
 * ===================================================================== */

/* ----------- 1. 设计 Token (颜色/字体/阴影) -------------------------- */
:root {
    /* 品牌主色: 深海军蓝 + Kerwen 红 (代替原来 12+ 种乱色) */
    --kw-brand-primary:    #0B1F3A;
    --kw-brand-primary-2:  #143C6B;
    --kw-brand-accent:     #C8102E;
    --kw-brand-accent-2:   #E63946;

    /* 中性色阶 (灰度梯度) */
    --kw-neutral-0:        #FFFFFF;
    --kw-neutral-50:       #F7F8FA;
    --kw-neutral-100:      #F1F2F3;
    --kw-neutral-200:      #D5D7DB;
    --kw-neutral-400:      #B2B6BD;
    --kw-neutral-500:      #656A76;
    --kw-neutral-700:      #3B3D45;
    --kw-neutral-900:      #0D0E12;

    /* 功能色 (仅在必要时使用) */
    --kw-whatsapp:         #25D366;
    --kw-whatsapp-hover:   #1EBE5A;
    --kw-success:          #14C66B;
    --kw-warning:          #FFB020;

    /* 阴影 (HashiCorp 同款 micro-shadow) */
    --kw-shadow-sm:        rgba(13, 14, 18, 0.04) 0px 1px 1px,
                           rgba(13, 14, 18, 0.04) 0px 2px 2px;
    --kw-shadow-md:        rgba(13, 14, 18, 0.06) 0px 4px 8px,
                           rgba(13, 14, 18, 0.04) 0px 2px 4px;
    --kw-shadow-lg:        rgba(13, 14, 18, 0.10) 0px 12px 28px,
                           rgba(13, 14, 18, 0.06) 0px 4px 12px;

    /* 圆角系统 */
    --kw-radius-sm:        4px;
    --kw-radius-md:        8px;
    --kw-radius-lg:        12px;
    --kw-radius-pill:      999px;
}

/* ----------- 2. 字体: 强制统一到 Cera Pro (项目自带) ------------------ */
@font-face {
    font-family: 'Cera Pro';
    src: url('CeraPro-Regular.woff2') format('woff2'),
         url('CeraPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('CeraPro-Medium.woff2') format('woff2'),
         url('CeraPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('CeraPro-Bold.woff2') format('woff2'),
         url('CeraPro-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('CeraPro-Black.woff2') format('woff2'),
         url('CeraPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
input, button, select, textarea,
.foot, .foot-tel-title, .foot-font-con, .foot-link,
.footcopy, .footcopy_left, .footcopy_right,
.bannertop, .dwlist, .msxbanner {
    font-family: 'Cera Pro', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-feature-settings: 'kern' 1;
}

/* HashiCorp 风格的大写小标签 */
.kw-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--kw-neutral-500);
    line-height: 1.69;
}

/* ----------- 3. 隐藏第三方聊天浮窗 (jivo 不再加载, 双保险) ------------ */
jdiv,
jdiv *,
[id^="jvlabelWrap"],
[id^="jivo"],
.jivo-c-widget,
#jivo-iframe-container {
    display: none !important;
    visibility: hidden !important;
}

/* ----------- 4. 悬浮按钮组: 重新设计为右下角 5 按钮组 ----------------- */

/* 隐藏旧的左侧浮窗触发器和左侧按钮组 */
.leftbar,
.leftbarbox {
    display: none !important;
}

/* 重新设计右下角 5 按钮组 */
.rightbarbox {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 9999 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column-reverse !important;  /* 视觉自下而上: WhatsApp 在最下最显眼 */
    gap: 10px !important;
    background: transparent !important;
}

/* li 容器: 必须重置, 否则会继承原 .rightbarbox li 的蓝方块 + 浓黑阴影 */
.rightbarbox > li,
.rightbarbox li {
    background: transparent !important;
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;       /* 关键: 抹掉原 li 的方形阴影 */
    list-style: none !important;
    cursor: auto !important;
    line-height: 1 !important;
}

/* 单个圆形按钮 (尺寸 44px, 比之前 52px 稍小) */
.rightbarbox > li > a,
.rightbarbox > li > a.fancybox {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--kw-neutral-0) !important;
    color: var(--kw-brand-primary) !important;
    /* 极轻的阴影 + 实色描边, 看起来是干净圆形, 不再有"方块感" */
    box-shadow: 0 1px 2px rgba(13, 14, 18, 0.06),
                0 2px 4px rgba(13, 14, 18, 0.04) !important;
    border: 1px solid rgba(11, 31, 58, 0.08) !important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.rightbarbox > li > a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(13, 14, 18, 0.12),
                0 2px 4px rgba(13, 14, 18, 0.06) !important;
    text-decoration: none !important;
}

.rightbarbox > li > a img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    margin: 0 !important;
    filter: none !important;
}

.rightbarbox > li > a i.mdi,
.rightbarbox > li > a i {
    font-size: 20px !important;
    line-height: 1 !important;
    color: inherit !important;
    margin: 0 !important;
}

/* ---- 每个按钮一个淡色 tint (subtle, 不喧宾夺主) ----
   顺序 (HTML 自上而下, 视觉因 column-reverse 自下而上):
     回顶部 (kw-top)  → 灰
     邮箱            → 紫
     电话            → 蓝
     留言            → 红
     WhatsApp (kw-wa) → 绿 (品牌色, 最显眼) */

/* 回顶部: 浅灰 */
.rightbarbox > li.kw-top > a {
    background: #F3F4F6 !important;
    color: #4B5563 !important;
    border-color: rgba(75, 85, 99, 0.10) !important;
}
.rightbarbox > li.kw-top > a:hover {
    background: #E5E7EB !important;
    color: #1F2937 !important;
}

/* 邮箱 (HTML 第 2 项): 浅紫 */
.rightbarbox > li:nth-child(2) > a {
    background: #EEF2FF !important;
    color: #4338CA !important;
    border-color: rgba(67, 56, 202, 0.12) !important;
}
.rightbarbox > li:nth-child(2) > a:hover {
    background: #E0E7FF !important;
}

/* 电话 (HTML 第 3 项): 浅蓝 */
.rightbarbox > li:nth-child(3) > a {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: rgba(29, 78, 216, 0.12) !important;
}
.rightbarbox > li:nth-child(3) > a:hover {
    background: #DBEAFE !important;
}

/* 留言 (HTML 第 4 项): 浅红 */
.rightbarbox > li:nth-child(4) > a {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
    border-color: rgba(185, 28, 28, 0.12) !important;
}
.rightbarbox > li:nth-child(4) > a:hover {
    background: #FEE2E2 !important;
}

/* WhatsApp: 品牌绿 (饱和实色, 唯一一个不淡的, 作为主 CTA) */
.rightbarbox > li.kw-wa > a {
    background: var(--kw-whatsapp) !important;
    color: var(--kw-neutral-0) !important;
    border-color: var(--kw-whatsapp) !important;
}
.rightbarbox > li.kw-wa > a:hover {
    background: var(--kw-whatsapp-hover) !important;
    border-color: var(--kw-whatsapp-hover) !important;
}

/* 回到顶部: 默认隐藏, 滚动 >300px 后由 JS 加 .visible 类显示
   (页面刷新时已在最顶部, 此时不显示回顶部按钮才合理) */
.rightbarbox > li.kw-top {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    transition: opacity .22s ease, transform .22s ease !important;
}
.rightbarbox > li.kw-top.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* 进度环 (原 #progressBar1) - 不再单独显示, 整合进按钮 */
#progressBarContainer1 {
    display: none !important;
}

/* 移动端尺寸略缩小 */
@media (max-width: 768px) {
    .rightbarbox {
        right: 12px !important;
        bottom: 12px !important;
        gap: 8px !important;
    }
    .rightbarbox > li > a {
        width: 40px !important;
        height: 40px !important;
    }
    .rightbarbox > li > a img,
    .rightbarbox > li > a i.mdi {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
    }
}

/* ----------- 5. 顶部导航: .bannertop 作为唯一的固定顶部导航 ------------
   原 .topbg-nav (来自 nav_index.php / nav.php / nav_detail.php) 是静态顶部导航,
   .bannertop (来自 footer.php) 原本是滚动 >140px 才显示的悬浮导航.
   2026 r3 改造: 让 .bannertop 始终作为固定悬浮顶部导航, 隐藏 .topbg-nav. */

/* 隐藏原静态顶部导航 (保留 HTML 以便回滚) */
.topbg-nav {
    display: none !important;
}

/* 隐藏桌面端的移动版 bar */
@media (min-width: 992px) {
    .msxbanner,
    .mobileNav,
    .msxcus {
        display: none !important;
    }
}

/* .bannertop 始终显示为 fixed sticky, 毛玻璃效果 */
.bannertop,
div.bannertop,
.bannertop.hidden-xs {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 99999 !important;  /* 比 .msxbanner(1002) 高得多, 确保覆盖 */
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: saturate(1.4) blur(20px) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(20px) !important;
    border-bottom: 1px solid rgba(13, 14, 18, 0.06) !important;
    box-shadow: 0 1px 0 rgba(13, 14, 18, 0.06),
                0 10px 30px rgba(13, 14, 18, 0.04) !important;
    padding: 8px 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* .bannertop 在所有视口都显示 — 取代旧的 .msxbanner / .topbg-nav */
.bannertop.hidden-xs {
    /* 抹掉 Bootstrap hidden-xs 在小屏的 display:none */
    display: block !important;
}

/* 完全隐藏冗余的移动版黑色顶部 bar 和 mobile 菜单 */
.msxbanner, .mobileNav, .msxcus {
    display: none !important;
}

/* 给 body 加 padding-top, 避免顶部内容被固定导航遮挡 */
body { padding-top: 64px !important; }
@media (max-width: 575px) {
    body { padding-top: 56px !important; }
}

/* logo 图片 */
.bannertop .hlogo {
    padding: 4px 0 !important;
    display: inline-block !important;
}
.bannertop .hlogo img {
    height: 44px !important;
    width: auto !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 主菜单文字行高/间距 */
.bannertop .dwlist {
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    line-height: 48px !important;
    display: block !important;
    /* 故意不在这里加 white-space: nowrap, 否则会继承到 .itemdiv 下拉里
       让 .bannertop .dwlist > li (主菜单 li) 各自 nowrap, 但 .itemdiv 内仍可换行 */
}
.bannertop .dwlist > li {
    padding: 0 10px !important;
    line-height: 48px !important;
    height: 48px !important;        /* 锁死 li 高度, 防止 hover 中变化 */
    vertical-align: middle !important;
    vertical-align: middle !important;
    display: inline-block !important;
    white-space: nowrap !important;  /* 主菜单单项内文字不换行 */
}
.bannertop .dwlist > li > a {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    display: inline-flex !important;       /* flex 居中, hover 时基线绝对稳定, 不会"往下移" */
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    line-height: 1 !important;             /* flex 居中后由 align-items 决定垂直位置, line-height 不再参与 */
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    line-height: 48px !important;
}
.bannertop .dwlist > li.kw-lang-switch > a {
    line-height: 1.4 !important;
    font-size: 13px !important;
}

/* 产品下拉菜单 .itemdiv:
   - 原 style.css 给 .bannertop .itemdiv 设了 width:260px, 部分长分类名 (如
     "Категория аксессуар для башенного крана") 会溢出. 加宽到 320px 让文字
     自然换行成 2 行 (与原版 .topbg-nav 下拉的视觉一致).
   - 同时强制 white-space: normal, 抵消父级可能继承下来的 nowrap.
   - 左右内边距维持原版 5px 20px (style.css line 1288). */
.bannertop .dwlist .itemdiv,
.bannertop .itemdiv {
    width: 320px !important;
    max-width: 90vw !important;
    padding: 8px 0 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 12px 32px rgba(13, 14, 18, 0.10),
                0 4px 8px rgba(13, 14, 18, 0.06) !important;
}
.bannertop .dwlist .itemdiv li,
.bannertop .itemdiv li {
    white-space: normal !important;    /* 关键: 允许长分类名换行 */
    line-height: 1.45 !important;
    padding: 0 !important;
    display: block !important;
}
.bannertop .dwlist .itemdiv li a,
.bannertop .itemdiv li a {
    white-space: normal !important;
    line-height: 1.45 !important;
    padding: 8px 20px !important;
    color: #000 !important;             /* 原版下拉字色 = 黑色, hover 时也保持黑色不变 */
    font-size: 13.5px !important;
    display: block !important;
}
/* 不覆盖 hover 时的字色 — 原 style.css 已是 color:#000, hover 不变 */

/* 下拉菜单 hover 反馈: 浅蓝色 hover, 字保持黑色.
   用 body 前缀 + 多重 class 提高 specificity, 覆盖任何老 CSS / EClientScript 合并后的样式.
   防止某些缓存状态下出现黑色 hover 背景 (用户反馈). */
body .bannertop .dwlist .itemdiv li,
body .bannertop .itemdiv li,
body .bannertop .dwlist .itemdiv li a,
body .bannertop .itemdiv li a {
    background: transparent !important;
    background-color: transparent !important;
    color: #0D0E12 !important;
}
body .bannertop .dwlist .itemdiv li:hover,
body .bannertop .itemdiv li:hover,
body .bannertop .dwlist .itemdiv li:focus,
body .bannertop .itemdiv li:focus,
body .bannertop .dwlist .itemdiv li:active,
body .bannertop .itemdiv li:active {
    background: #EFF6FF !important;                 /* 浅蓝, 跟 logo 蓝同色系 */
    background-color: #EFF6FF !important;
}
body .bannertop .dwlist .itemdiv li:hover a,
body .bannertop .itemdiv li:hover a,
body .bannertop .dwlist .itemdiv li a:hover,
body .bannertop .itemdiv li a:hover,
body .bannertop .dwlist .itemdiv li a:focus,
body .bannertop .itemdiv li a:focus,
body .bannertop .dwlist .itemdiv li a:active,
body .bannertop .itemdiv li a:active {
    background: transparent !important;             /* a 自己始终透明, 让父 li 的浅蓝 hover 显示出来 */
    background-color: transparent !important;
    color: var(--kw-logo-blue, #1976D2) !important; /* hover 时字色变 logo 蓝 (轻量反馈) */
    text-decoration: none !important;
}

/* 中等屏 sm (768-991): 减小 padding 让所有 menu item 横排 */
@media (max-width: 991px) {
    .bannertop .dwlist > li {
        padding: 0 6px !important;
    }
    .bannertop .dwlist > li > a {
        font-size: 13px !important;
    }
    .bannertop .dwlist > li.kw-lang-switch {
        margin-left: 8px !important;
        padding-left: 8px !important;
    }
}

/* 强制 .bannertop 内部布局为 flex 横排, 始终让 logo + 菜单同一行 */
.bannertop .row.s-flexbox {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
}
.bannertop .row.s-flexbox > [class*="col-"] {
    float: none !important;
}
.bannertop .col-md-3,
.bannertop .col-md-3.col-lg-3 {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 12px !important;
}
.bannertop .col-md-9,
.bannertop .col-md-9.col-lg-9 {
    width: auto !important;
    flex: 1 1 auto !important;
    padding: 0 12px !important;
    text-align: right !important;
}

/* 小屏 (<576px) 的 .bannertop: 只显示 logo + 语言切换 */
@media (max-width: 575px) {
    .bannertop .dwlist > li:not(.kw-lang-switch) {
        display: none !important;
    }
    .bannertop .hlogo img {
        height: 34px !important;
    }
    .kw-lang-switch {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
    }
}

/* ----------- 6. 导航 hover: 保留"宽度 0→100%"横线动画, 只改颜色 ----------
   原 style.css 的横线 hover 实现 (line 1039-1057, 971-989):
     .dwlist li:after          { width: 0%;   border-bottom: 2px solid #f00; transition: .5s; }
     .dwlist li:hover:after    { width: 100%; border-bottom: 2px solid #f00; }
   我们的覆盖思路 = 保留 width 0→100% 动画, 只把 #f00 改成 logo 蓝.
   注意: 不能覆盖 transition / width, 否则会破坏原动画. */
:root {
    --kw-logo-blue: #1976D2;       /* Kerwen logo 主蓝 */
    --kw-logo-blue-soft: #2196F3;  /* 略亮的辅蓝 */
}

/* hover 横线动画的颜色从 #f00 改为 logo 蓝 (保留 width 0→100% 的滑入动画) */
.bannertop .dwlist li:after,
.bannertop .dwlist li:hover:after,
.dwlist li:after,
.dwlist li:hover:after,
.bannertop #nav_sel:after,
.bannertop .dwlist li#nav_sel:after,
.dwlist li#nav_sel:after,
.topbg-nav .dwlist li:after,
.topbg-nav .dwlist li:hover:after {
    border-bottom-color: var(--kw-logo-blue) !important;
}

/* 主菜单文字颜色: 保持原 .bannertop 配色 (hover 时仍是 #000) */
.bannertop .dwlist > li > a {
    color: var(--kw-neutral-900, #0D0E12) !important;
    transition: color .2s ease !important;
}
/* 注意: 故意不覆盖 .bannertop .dwlist li:hover a 的颜色 —
   原 style.css 中已经是 color: #000, 字本身不变色, 只有下方横线滑出. */

/* 防御: 抹掉 hover.css / hover-min.css 中 .hvr-overline-from-right:before / :after
   等所有 ::before/::after 可能产生的 background-color (默认 #2098D1) 覆盖,
   它们用 position: absolute + z-index:-1 + background 在 a 上叠一个色块.
   在 .bannertop 内部, 我们不需要任何 hvr-* 自带的色块视觉, 因此强制禁用. */
.bannertop .dwlist a.hvr-overline-from-right::before,
.bannertop .dwlist a.hvr-overline-from-right::after,
.bannertop .dwlist > li > a::before,
.bannertop .dwlist > li > a::after {
    display: none !important;
    background: transparent !important;
    content: none !important;
}

/* 同样, 防止任何继承下来的 background 在 hover 时把整个 li / a 覆盖成纯色 */
.bannertop .dwlist > li,
.bannertop .dwlist > li:hover,
.bannertop .dwlist > li > a,
.bannertop .dwlist > li > a:hover,
.bannertop .dwlist > li > a:focus,
.bannertop .dwlist > li > a:active {
    background: transparent !important;
    background-color: transparent !important;
}

/* ----------- 7. 语言切换 RU / EN / 中 ---------------------------------- */
.bannertop .dwlist > li.kw-lang-switch,
.kw-lang-switch {
    margin-left: 16px !important;
    padding: 0 0 0 16px !important;
    border-left: 1px solid rgba(13, 14, 18, 0.10) !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;       /* 关键: flex 子元素纵向居中 */
    justify-content: flex-end !important;
    gap: 6px !important;
    white-space: nowrap !important;
    height: 48px !important;              /* 容器固定高度, 内部 flex 才能居中 */
    line-height: 48px !important;
    vertical-align: middle !important;
}
.kw-lang-switch:after {
    display: none !important;  /* 不让 .dwlist li:after 给它加下划线 */
}

/* 三个按钮等大、等高、文字纵向居中 */
.bannertop .dwlist > li.kw-lang-switch > a.kw-lang,
.kw-lang {
    font-size: 13px !important;
    font-weight: 600 !important;             /* 统一 600, 避免 active 加粗后宽度跳变 */
    color: var(--kw-neutral-500, #656A76) !important;
    text-decoration: none !important;
    padding: 0 8px !important;               /* 上下 0, 用 line-height 控制 */
    height: 28px !important;
    min-width: 32px !important;              /* RU/EN/CN 都是 2 字符, 等宽 */
    line-height: 28px !important;
    text-align: center !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color .15s ease, background-color .15s ease !important;
    box-sizing: border-box !important;
}
.kw-lang:hover {
    color: var(--kw-logo-blue) !important;
    background: rgba(25, 118, 210, 0.08) !important;
    text-decoration: none !important;
}
.kw-lang.is-active {
    color: var(--kw-logo-blue) !important;
    background: rgba(25, 118, 210, 0.12) !important;
    /* font-weight 保持 600, 不在 active 时变 700 (避免按钮宽度跳变) */
}
.kw-lang-sep {
    color: rgba(13, 14, 18, 0.22) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ----------- 6. 颜色覆盖: 把最刺眼的 #f00 纯红改成品牌红 -------------- */
/* 注: 这里只覆盖最常用的文字红, 不会破坏图标/边框 */
.product-detail-card .price,
.foot a:hover,
.foot-link a:hover,
.dwlist a:hover,
.hvr-underline-from-left:hover {
    color: var(--kw-logo-blue) !important;
}
/* .hvr-overline-from-right:hover 的字色覆盖已移除 —
   原 hover.css 中 .hvr-overline-from-right 已被注释 (line 2450-2477),
   所以这个 class 本来就不应该影响样式. hover 时字色保持原 #000. */

/* ----------- 6.1. Products 下拉与页脚链接 hover 稳定化 -----------------
   旧样式会用 translateY 做滑动, 鼠标从 Products 移向下拉项时目标会移动,
   很容易断 hover. 这里把下拉改成固定位置的浮层, 并加一条不可见的 hover 桥. */
.bannertop .dwlist > li.catalog:not(.catalogunset) {
    position: relative !important;
}
.bannertop .dwlist > li.catalog:not(.catalogunset)::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 48px !important;
    height: 16px !important;
    display: block !important;
}
.bannertop .dwlist > li.catalog:not(.catalogunset) > .itemdiv {
    top: 60px !important;
    transform: none !important;
    transition: opacity .14s ease, visibility .14s ease !important;
    pointer-events: none !important;
}
.bannertop .dwlist > li.catalog:not(.catalogunset):hover > .itemdiv,
.bannertop .dwlist > li.catalog:not(.catalogunset):focus-within > .itemdiv {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.bannertop .dwlist > li.catalog:not(.catalogunset) > a {
    gap: 6px !important;
}
.kw-menu-caret {
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid currentColor !important;
    display: inline-block !important;
    margin-left: 2px !important;
    transform: translateY(1px) !important;
}

/* 搜索/关闭图标用 CSS 绘制, 避免旧 glyphicon 字体丢失时显示成方块. */
.kw-search-icon {
    width: 15px !important;
    height: 15px !important;
    border: 2px solid currentColor !important;
    border-radius: 50% !important;
    display: inline-block !important;
    position: relative !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
.kw-search-icon::after {
    content: "" !important;
    width: 7px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 2px !important;
    position: absolute !important;
    right: -6px !important;
    bottom: -3px !important;
    transform: rotate(45deg) !important;
    transform-origin: center !important;
}
.kw-close-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    position: relative !important;
    vertical-align: middle !important;
}
.kw-close-icon::before,
.kw-close-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 2px !important;
    top: 8px !important;
    width: 14px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 2px !important;
}
.kw-close-icon::before {
    transform: rotate(45deg) !important;
}
.kw-close-icon::after {
    transform: rotate(-45deg) !important;
}
.search .searbut,
.searchbt1,
.searchx {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 页脚快速链接不再使用旧 hover.css 的黑色块动画, 只做文字颜色反馈. */
.foot-link li {
    min-height: 28px !important;
}
.foot-link a,
.foot-link a.hvr-underline-from-left {
    display: inline-block !important;
    height: auto !important;
    line-height: 1.45 !important;
    padding: 4px 0 !important;
    background: transparent !important;
    color: #fff !important;
}
.foot-link a::before,
.foot-link a::after,
.foot-link a.hvr-underline-from-left::before,
.foot-link a.hvr-underline-from-left::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
}
.foot-link a:hover,
.foot-link a:focus,
.foot-link a.hvr-underline-from-left:hover,
.foot-link a.hvr-underline-from-left:focus {
    color: #fff !important;
    background: transparent !important;
    text-decoration: underline !important;
    text-decoration-color: var(--kw-logo-blue) !important;
    text-underline-offset: 5px !important;
}

/* Google Maps embed in the footer, replacing the old Yandex widget. */
.kw-google-map-wrap {
    position: relative !important;
    min-height: 400px !important;
    overflow: hidden !important;
    background: var(--kw-neutral-100) !important;
}
.kw-google-map {
    display: block !important;
    width: 100% !important;
    height: 400px !important;
    min-height: 400px !important;
    border: 0 !important;
}
.kw-google-map-link {
    position: absolute !important;
    right: 18px !important;
    bottom: 18px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: var(--kw-neutral-900) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: var(--kw-shadow-md) !important;
}
.kw-google-map-link:hover,
.kw-google-map-link:focus {
    color: var(--kw-logo-blue) !important;
    text-decoration: none !important;
}
@media (max-width: 767px) {
    .kw-google-map-wrap {
        min-height: 320px !important;
        margin-top: 30px !important;
    }
    .kw-google-map {
        height: 320px !important;
        min-height: 320px !important;
    }
    .kw-google-map-link {
        right: auto !important;
        left: 12px !important;
        bottom: 12px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        max-width: calc(100% - 24px) !important;
    }
}

/* ----------- 7. 页脚版权样式微调 ------------------------------------- */
.footcopy {
    background: var(--kw-neutral-900) !important;
    color: var(--kw-neutral-400) !important;
    padding: 18px 0 !important;
    font-size: 13px !important;
}
.footcopy a {
    color: var(--kw-neutral-200) !important;
    text-decoration: none !important;
}
.footcopy a:hover {
    color: var(--kw-neutral-0) !important;
}

/* ----------- 8. 询价/留言表单弹窗的轻微样式提升 ---------------------- */
.fancybox-inner #askforms,
.fancybox-inner #askform {
    border-radius: var(--kw-radius-md) !important;
    box-shadow: var(--kw-shadow-lg) !important;
}

/* ----------- 9. 屏幕阅读器友好 (a11y) -------------------------------- */
.kw-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}