/**
 * VBS Matrix - 全站菜单与导航优化样式表 (Master Menu Stylesheet)
 * 适用插件：Max Mega Menu & FiboSearch 集成优化
 * 优化目的：合并原 7 个散落在 head 的内联 style 标签，实现全站静态缓存与极致 SEO 源码净化
 */

/* ==========================================================================
   1. 购物车与搜索图标对齐微调 (Fix Both Icons Alignment)
   ========================================================================== */

/* 桌面端显示下三角箭头，移动端显示+/-号 */
.mega-indicator:after {
    content: "▾" !important;
    font-size: 25px !important;
    color: #ccc !important;
    /* 浅灰色箭头 */
    visibility: visible !important;
    vertical-align: middle !important;
    line-height: 0 !important;
    margin-top: -5px !important;
    display: inline-block !important;
}

@media(max-width:768px) {
    .mega-indicator:after {
        content: "+" !important;
        float: right !important;
    }

    .mega-toggle-on>.mega-menu-link>.mega-indicator:after {
        content: "-" !important;
    }
}

/* 基础样式 - 所有图标共享的样式 */
.mega-menu-link[href="#search"],
.mega-custom-icon.mega-menu-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 1. 搜索图标容器调整 */
li.mega-menu-item>a.dashicons-search.mega-menu-link,
li.mega-menu-item>a[href="#search"].mega-menu-link {
    top: -2px !important;
    /* 垂直位置调整 */
    transform: scale(1) !important;
    /* 缩放比例 */
}

/* 搜索图标菜单项整体调整 */
li.mega-menu-item>a.dashicons-search.mega-menu-link,
li.mega-menu-item>a[href="#search"].mega-menu-link {
    margin-left: 16px !important;
    /* 使用margin替代left，确保点击区域正确 */
}

/* 2. 会员图标调整 */
#mega-menu-item-54581>a.mega-custom-icon {
    top: -2px !important;
    /* 垂直位置调整 */
    transform: scale(1) !important;
    /* 缩放比例 */
}

/* 会员图标菜单项整体调整 */
#mega-menu-item-54581 {
    margin-left: 0px !important;
    /* 使用margin替代left，确保点击区域正确 */
}

/* 3. 购物车图标调整 */
#mega-menu-item-54680>a.mega-custom-icon {
    top: -2px !important;
    /* 垂直位置调整 */
    transform: scale(1) !important;
    /* 缩放比例 */
}

/* 购物车图标菜单项整体调整 */
#mega-menu-item-54680 {
    margin-left: -10px !important;
    /* 使用margin替代left，确保点击区域正确 */
}

/* PC端购物车计数图标样式 */
.mega-cart-count {
    position: absolute !important;
    top: 3px !important;
    /* 调整垂直位置 */
    right: 6px !important;
    /* 调整水平位置 */
    background: #000000 !important;
    /* 背景颜色 - 黑色 */
    color: #fff !important;
    /* 文字颜色 */
    font-size: 10px !important;
    /* 字体大小 */
    font-weight: bold !important;
    width: 18px !important;
    /* 固定宽度 */
    height: 18px !important;
    /* 固定高度 - 与宽度相同确保是正圆形 */
    line-height: 16px !important;
    /* 行高与高度相同 */
    text-align: center !important;
    border-radius: 50% !important;
    /* 圆角程度 - 50%为圆形 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99 !important;
    border: 1px solid #fff !important;
    /* 白色边框 */
    padding: 0 !important;
    /* 移除内边距 */
    box-sizing: border-box !important;
    /* 确保边框不会增加实际尺寸 */
}

/* 移动端购物车计数图标样式 */
@media screen and (max-width: 768px) {
    .mega-cart-count {
        top: 5px !important;
        /* 移动端调整垂直位置 */
        right: 6px !important;
        /* 移动端调整水平位置 */
        width: 16px !important;
        /* 移动端稍微小一点的尺寸 */
        height: 16px !important;
        /* 移动端稍微小一点的尺寸 */
        font-size: 9px !important;
        /* 移动端更小的字体 */
    }
}

/* ==========================================================================
   2. 遮挡与自带旧组件隐藏 (Prevent Dropdown Obstruction & Hide Native Menu)
   ========================================================================== */

/* 仅在桌面端调整下拉菜单的定位，防止遮挡LOGO */
@media(min-width:769px) {
    .mega-sub-menu {
        margin-top: 10px !important;
    }
}

/* 增加二级菜单顶部边距 */
.inside-header.grid-container,
.main-navigation,
#site-navigation,
.header-widget {
    display: none !important;
    /* 彻底埋葬主题自带的旧菜单和旧页眉组件 */
}

/* ==========================================================================
   3. 移动端汉堡菜单平移预定位 (Mobile Hamburger Position)
   ========================================================================== */
.mega-toggle-animated-box {
    transform: translateX(15px) translateY(10px) !important;
    /* 向右平移 15px，向下平移 10px */
}

/* ==========================================================================
   4. 恢复 Max Mega Menu 默认移动端样式 (Restore Megamenu Defaults)
   ========================================================================== */
@media only screen and (max-width: 768px) {

    /* 移除任何可能覆盖默认对齐方式的自定义样式 */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link {
        text-align: left;
        justify-content: flex-start;
    }

    /* 恢复二级菜单左对齐 */
    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link {
        text-align: left;
    }

    /* 移除任何可能干扰指示器位置的样式 */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children>a.mega-menu-link>span.mega-indicator {
        float: right;
    }
}

/* ==========================================================================
   5. 模块化菜单层级与圆头像切断修复 (VBS Menu Ultimate Fix - LEGO 版)
   ========================================================================== */

/* 1. 全站层级提权（确保菜单在积木页面之上） */
#vbs-header-wrapper,
#top-mega-menu {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}

/* 2. 消除内部挤压：移除 WordPress 自动插入的 <br> 标签影响，确保图片居中 */
.menu-item-image br {
    display: none !important;
}

.menu-item-image a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    width: 100% !important;
}

/* 3. 自定义二级菜单图标：控制图标大小、无圆圈背景、防裁剪 */
.menu-item-image {
    width: 50px !important;
    /* 【图标大小控制项】：全站二级菜单图标宽度 */
    height: 50px !important;
    /* 【图标大小控制项】：全站二级菜单图标高度 */

    margin: 0px !important;
}

.menu-item-image img {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* 设为 contain 防止非正方形图标被扭曲或裁剪 */
}



/* 5. 居中对齐与垂直距离微调 (可整体往下移) */
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu {
    width: 1200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 15px !important;
    /* 【整体下移控制项】：增加此值（如 10px, 15px, 20px）可使下拉板整体往下移动 */
}

.mega-menu-item-content {
    display: flex !important;
    flex-direction: row !important;
    /* 恢复横向排列：文字在图片右侧 */
    align-items: center !important;
    gap: 10px !important;
    /* 【图文间距控制项】：修改此数字直接调整图片和文字的间距 */
    padding: 8px 0 !important;
    /* 【上下行间距控制项】：修改此数值（如 5px, 12px, 15px）直接控制每一行菜单项之间的上下距离 */
    text-align: left !important;
}

/* 强力压制因 WordPress 自动转义生成的 <p> 标签导致的垂直偏移，强行对齐 */
.mega-menu-item-content p {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;        /* 解锁固定高度：由 50px 升级为弹性最小高度，防止超长字符挤压图标 */
    height: auto !important;
}

/* 强力隐藏链接内部因换行自动生成的 <br> 标签，防止其强行占位 */
.menu-item-title br {
    display: none !important;
}

/* 二级菜单文字标题链接样式 */
.menu-item-title {
    line-height: 1.25 !important;       /* 折行行高微调 */
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 核心：确保文字在垂直方向上与图片完美居中对齐 */
    align-items: flex-start !important; /* 文字左对齐 */
    text-align: left !important;
    margin: 0 !important;
    padding: 4px 0 !important;          /* 预留折行文字的上下呼吸边距，防止贴边 */
    min-height: 50px !important;        /* 支持弹性多行高度自适应 */
    height: auto !important;
    color: #666666 !important;
    /* 【文字初始颜色控制】：全站二级菜单初始中灰色（调深防淡） */
    font-size: 12px !important;
    /* 【文字大小控制】：全站二级菜单文字大小 */
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    /* 【文字字间距控制】：全站二级菜单文字字间距 */
    transition: color 0.2s ease !important;
}

/* 鼠标悬停变纯黑色效果 */
.mega-menu-item-content:hover .menu-item-title,
.mega-menu-item-content .menu-item-title:hover {
    color: #000000 !important;
    /* 【悬停文字颜色控制】：悬浮变为纯黑色 */
}

.title-cn {
    display: block;
    font-size: 14px;
    color: #000;
    font-weight: 500;
    transition: all 0.35s ease;
}

.title-en {
    display: block;
    font-size: 10px;
    color: #888;
    font-weight: 400;
    transition: all 0.45s ease;
}

/* 6. 图标初始状态与平滑过渡 */
.menu-item-image img {
    transition: all 0.25s ease-in-out !important;
    /* 确保缩放与变黑动画极其丝滑 */
    filter: brightness(0.55) !important;
    /* 【图标初始深浅控制】：微调亮度使初始灰色图标变深（如 0.55 对应中灰色），与文字深度一致 */

    /* 强力抗锯齿与防发虚指令：强行开启 GPU 3D 高精矢量渲染，确保缩放与滤镜联动时边缘绝对锐利 */
    will-change: transform, filter !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0) !important;
}

/* 7. 图文悬浮联动：鼠标浮动在整个菜单项上时，图标与文字同步变黑、图标等比缩放 */
.mega-menu-item-content:hover .menu-item-image img {
    transform: scale(1.1) !important;
    filter: brightness(0) !important;
    /* 【黑色魔法滤镜】：强行将灰色 SVG 的线条变为纯黑色（#000000），与悬停文字颜色保持 100% 绝对一致！ */
}

/* 7. 隐藏桌面端意外出现的黑块（关闭按钮） */
@media screen and (min-width: 769px) {
    button.mega-close {
        display: none !important;
    }
}

/* ==========================================================================
   6. 移动端菜单美化 (Mobile Menu Beautify - 白色清爽风格)
   ========================================================================== */
@media only screen and (max-width: 768px) {

    /* 1. 菜单容器：纯白背景 + 阴影 */
    #mega-menu-wrap-primary #mega-menu-primary {
        background-color: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        padding-top: 10px !important;
        border-top: 1px solid #f0f0f0 !important;
    }

    /* 2. 顶级菜单项：深色文字 + 底部细线 */
    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link {
        color: #333333 !important;
        background-color: transparent !important;
        border-bottom: 1px solid #f5f5f5 !important;
        padding: 16px 20px !important;
        /* 增加点击区域 */
        font-size: 15px !important;
        font-weight: 500 !important;
        height: auto !important;
        /* 防止高度被锁死 */
        line-height: 1.5 !important;
    }

    /* 3. 选中/激活/悬停状态：极浅灰背景 + 黑色文字 */
    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link:hover,
    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link:focus {
        background-color: #fafafa !important;
        color: #000000 !important;
        font-weight: 600 !important;
    }

    /* 4. 修复“联系我们”等特殊按钮的背景问题 */
    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-align-bottom-left>a.mega-menu-link {
        background-color: transparent !important;
        /* 强制去黑底 */
    }

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-align-bottom-left.mega-current-menu-item>a.mega-menu-link {
        background-color: #fafafa !important;
        /* 选中时才显色 */
    }

    /* 5. 二级菜单：微缩进 + 柔和背景 */
    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>ul.mega-sub-menu {
        background-color: #fcfcfc !important;
    }

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>ul.mega-sub-menu>li.mega-menu-item>a.mega-menu-link {
        padding-left: 35px !important;
        color: #666666 !important;
        border-bottom: 1px solid #f9f9f9 !important;
        font-size: 14px !important;
    }

    /* 6. 箭头指示器颜色 */
    .mega-indicator:after {
        color: #aaaaaa !important;
    }
}

/* ==========================================================================
   7. 移动端布局防溢出修复 (Mobile Layout Fixes)
   ========================================================================== */
@media only screen and (max-width: 768px) {

    /* 强制修复侧边购物车插件导致的3050px宽度溢出 */
    .vi-wcaio-sidebar-cart-footer-pd-wrap {
        max-width: 100vw !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: none !important;
        /* 暂时隐藏该溢出元素，因为它通常是看不见的或者是错误的布局 */
    }
}

/* ==========================================================================
   8. 从旧自定义样式合并的附加规则 (Merged Custom Additional Rules)
   ========================================================================== */
#mega-menu-primary .widget_custom_html,
#mega-menu-primary .textwidget.custom-html-widget {
    margin-top: -10px !important;
}

/* 强制清除二级自定义 HTML 小挂件中列表默认空心圆圈/圆点 */
#mega-menu-wrap-primary #mega-menu-primary ul,
#mega-menu-wrap-primary #mega-menu-primary li,
#mega-menu-primary .widget_custom_html ul,
#mega-menu-primary .widget_custom_html li,
#mega-menu-primary .textwidget.custom-html-widget ul,
#mega-menu-primary .textwidget.custom-html-widget li {
    list-style: none !important;
    list-style-type: none !important;
}

/* 移动端菜单定位与层级修正 */
@media screen and (max-width: 768px) {
    #mega-menu-wrap-primary #mega-menu-primary {
        position: absolute !important;
        top: 60px !important;
        z-index: 99999 !important;
    }

    /* 隐藏关闭按钮 (补齐之前旧样式表中漏掉的隐藏黑块逻辑) */
    button.mega-close {
        display: none !important;
    }
}

/* ==========================================================================
   10. 俄语及多语言超长字符排版与高度自适应补丁 (Multilingual Layout Fix)
   ========================================================================== */

/* 俄语版专属极精细化字号与行高微调：压缩字号、缩短字间距、收紧行高，强制单行或紧凑多行 */
html[lang^="ru"] #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > a.mega-menu-link {
    font-size: 11px !important;       /* 降低一级列标题字号，防破格 */
    letter-spacing: -0.1px !important; /* 微调俄语字符间距 */
    line-height: 1.25 !important;      /* 收紧俄语换行后的行高 */
}

html[lang^="ru"] .menu-item-title,
html[lang^="ru"] #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    font-size: 11px !important;       /* 降低二级标题字号，防换行过多 */
    letter-spacing: -0.2px !important; /* 微调俄语字符间距 */
    line-height: 1.25 !important;      /* 收紧俄语换行后的行高，极具精致感 */
}