header .nav-left {
    justify-content: center;
}






@media (min-width:1440px) {
    .nav-spacing-xlarge>li {
        margin: 0 40px;
       
    }
}


/*
 * Page: Mega Dropdown Menu - Full Width 8 Columns
 * Target: .dak-menu
 *
 * 说明：
 * 1. 保留全屏下拉宽度
 * 2. 内容最大 1680px 居中
 * 3. PC 平均 8 列
 * 4. 尽量不折行
 * 5. Hover 每列不加背景色
 * 6. 文字稍小，更精致
 */

/* ==========================================================================
   外层下拉：突破 Flatsome 默认盒子宽度
   ========================================================================== */


/* 防止外层裁切 */
.header-wrapper,
.header-main,
.header-nav,
.header-nav-main,
.nav,
.nav > li,
.menu-item-has-block,
.nav-dropdown:has(.dak-menu) {
    overflow: visible !important;
}

/* ==========================================================================
   下拉主容器：背景全屏，内容居中
   ========================================================================== */

.dak-menu {
    --dak-menu-theme: #0d0b52;
    --dak-menu-text: #2d3443;
    --dak-menu-muted: #5c6676;
    --dak-menu-line: rgba(13, 11, 82, 0.12);

    position: relative;
    left: 50%;

    width: 100vw !important;
    max-width: 100vw !important;

    margin: 0 !important;

    padding:
        34px
        max(44px, calc((100vw - 1680px) / 2 + 44px))
        36px !important;

    background: rgba(255, 255, 255, 0.98) !important;

    transform: translateX(-50%);

    overflow: visible !important;
}

/* 顶部短线 */
.dak-menu::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 88px;
    height: 3px;

    background: #111820;

    transform: translateX(-50%);
}

/* 内容最大宽度居中 */
.dak-menu > .section-content {
    width: 100% !important;
    max-width: 1680px !important;

    margin-right: auto !important;
    margin-left: auto !important;
}

/* ==========================================================================
   Row：强制 8 等分
   ========================================================================== */

.dak-menu > .section-content > .row,
.dak-menu .row {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(145px, 1fr)) !important;
    gap: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
}

/* 覆盖 Flatsome col 宽度 */
.dak-menu .row > .col,
.dak-menu .left-menu {
    width: auto !important;
    max-width: none !important;
    flex: none !important;

    min-height: 174px;

    padding: 0 5px !important;

    border-left: 1px solid var(--dak-menu-line);

    background: transparent !important;

    transition:
        transform 0.26s ease;
}

/* 最后一列右边线 */
.dak-menu .row > .col:last-child,
.dak-menu .left-menu:last-child {
    border-right: 1px solid var(--dak-menu-line);
}

/* Hover 每列不加背景 */
.dak-menu .left-menu:hover {
    background: transparent !important;
    transform: none !important;
}

/* ==========================================================================
   一级标题
   ========================================================================== */

.dak-menu .left-menu h4 {
    position: relative;

    margin: 0 0 14px !important;
    padding: 0 !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em;

    white-space: nowrap !important;
}

.dak-menu .left-menu h4 a {
    position: relative;

    display: inline-flex;
    align-items: center;

    color: var(--dak-menu-text) !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    transition:
        color 0.24s ease,
        transform 0.24s ease;
}

/* 标题短线 */
.dak-menu .left-menu h4 a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -8px;

    width: 12px;
    height: 1px;

    background: var(--dak-menu-theme);

    opacity: 0.35;

    transition:
        width 0.28s ease,
        opacity 0.28s ease;
}

/* 标题 hover */
.dak-menu .left-menu:hover h4 a {
    color: var(--dak-menu-theme) !important;

    transform: translateX(2px);
}

.dak-menu .left-menu:hover h4 a::after {
    width: 26px;

    opacity: 1;
}

/* ==========================================================================
   子菜单链接
   ========================================================================== */

.dak-menu .ux-menu,
.dak-menu .ux-menu-link,
.dak-menu .ux-menu-link__link {
    border: 0 !important;
}

.dak-menu .ux-menu {
    margin: 0 !important;
    padding: 0 !important;
}

.dak-menu .ux-menu-link {
    margin: 0 !important;
    padding: 0 !important;
}

.dak-menu .ux-menu-link__link,
.dak-menu .ux-menu a {
    position: relative;

    display: inline-flex !important;
    align-items: center;

    min-height: 24px !important;

    padding: 10px 3px !important;

    color: var(--dak-menu-muted) !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    transition:
        color 0.24s ease,
        transform 0.24s ease;
}

/* 子链接 hover：不加背景，只做线条和位移 */
.dak-menu .ux-menu-link__link::before,
.dak-menu .ux-menu a::before {
    content: "";

    width: 0;
    height: 1px;

    margin-right: 0;

    background: var(--dak-menu-theme);

    opacity: 0;

    transition:
        width 0.24s ease,
        margin-right 0.24s ease,
        opacity 0.24s ease;
}

.dak-menu .ux-menu-link__link:hover,
.dak-menu .ux-menu a:hover {
    color: var(--dak-menu-theme) !important;

    transform: translateX(4px);
}

.dak-menu .ux-menu-link__link:hover::before,
.dak-menu .ux-menu a:hover::before {
    width: 10px;

    margin-right: 6px;

    opacity: 1;
}

/* 防止 Flatsome 强制换行 */
.dak-menu h4,
.dak-menu a,
.dak-menu span {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* ==========================================================================
透明亮文字添加遮罩
   ========================================================================== */

.has-transparent{
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); /* 从黑色到透明的渐变背景 */
}



/* ==========================================================================
头部全宽
   ========================================================================== */

.header-full-width .container {
    max-width: 98% !important;
}


.header-shadow .header-wrapper, .header-wrapper.stuck, .layout-shadow #wrapper {
    box-shadow: none
}



/* ==========================================================================
手机端logo宽度
   ========================================================================== */
@media (max-width: 549px) {
  #logo img {
    /*max-height: 24px !important;*/
  }
}


/*
 * Page: Global Transparent Header Hover
 * Effect: Desktop hover switches transparent header to theme color
 * Theme Color: #382b25
 */

@media (min-width: 850px) and (hover: hover) and (pointer: fine) {

    /* =========================================================
       全局变量
       只需要修改这里即可更换主题色
       ========================================================= */
    #header {
        --dak-header-theme: #fff;
        --dak-header-white: #000;
        --dak-header-duration: 0.25s;
    }

    /* =========================================================
       基础过渡动画
       ========================================================= */
    #header,
    #header > .header-wrapper,
    #header #top-bar,
    #header #masthead,
    #header .header-bg-container,
    #header .header-bg-color,
    #header .header-bg-image,
    #header .header-nav-main > li > a,
    #header .header-nav-main > li > a > i,
    #header .header-button .button,
    #header .header-button .button i,
    #header .logo img {
        transition:
            background-color var(--dak-header-duration) ease,
            color var(--dak-header-duration) ease,
            border-color var(--dak-header-duration) ease,
            box-shadow var(--dak-header-duration) ease,
            opacity var(--dak-header-duration) ease,
            visibility var(--dak-header-duration) ease,
            filter var(--dak-header-duration) ease !important;
    }

    /* =========================================================
       Header 整体改为主题色
       ========================================================= */
    html body #wrapper > #header.transparent:hover {
        background-color: var(--dak-header-theme) !important;
    }

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active) {
        background-color: var(--dak-header-theme) !important;
        background-image: none !important;

        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.10),
            0 12px 34px rgba(0, 0, 0, 0.14) !important;
    }

    /* =========================================================
       顶部通知栏和主导航
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    #top-bar,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    #masthead {
        background-color: var(--dak-header-theme) !important;
        background-image: none !important;
    }

    /* =========================================================
       Flatsome Header 背景层
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-bg-container,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-bg-color {
        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        background: var(--dak-header-theme) !important;
        background-color: var(--dak-header-theme) !important;
        background-image: none !important;
    }

    /* =========================================================
       关闭透明 Header 原背景图
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-bg-image {
        opacity: 0 !important;

        background: none !important;
        background-image: none !important;
    }

    /* =========================================================
       一级菜单改为白色
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-nav-main > li > a,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-nav-main > li > a > i {
        color: var(--dak-header-white) !important;
    }

    /* =========================================================
       当前菜单和悬停菜单
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-nav-main > li.active > a,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-nav-main > li.current-menu-item > a,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-nav-main > li.current-menu-parent > a,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-nav-main > li.current-menu-ancestor > a,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-nav-main > li:hover > a {
        color: var(--dak-header-white) !important;
        opacity: 1 !important;
    }

    /* =========================================================
       菜单下划线改为白色
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .nav-line-bottom > li > a::before {
        background-color: var(--dak-header-white) !important;
    }

    /* =========================================================
       顶部通知栏文字改为白色
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    #top-bar,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    #top-bar a,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    #top-bar .html,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    #top-bar i {
        color: var(--dak-header-white) !important;
    }

    /* =========================================================
       搜索、购物车、账户等按钮
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-button .button {
        color: #fff;

        
    }

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-button .button i {
        color: inherit !important;
    }

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-button .button:hover {
        color: var(--dak-header-theme) !important;

        border-color: var(--dak-header-white) !important;

        background-color: var(--dak-header-white) !important;
    }

    /* =========================================================
       普通导航图标改为白色
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .nav > li > a > i,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .icon-search,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .icon-shopping-cart,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .icon-user,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .cart-icon {
        color: var(--dak-header-white) !important;
    }

    /* =========================================================
       购物车数量圆点
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .cart-icon strong,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .header-cart-link .cart-icon strong {
        color: var(--dak-header-theme) !important;

        border-color: var(--dak-header-white) !important;

        background-color: var(--dak-header-white) !important;
    }

    /* =========================================================
       Logo 容器
       ========================================================= */
    #header .logo,
    #header .logo-inner {
        position: relative;
    }

    #header .logo img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* =========================================================
       主题色背景继续显示白色 Logo
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .logo img.header-logo,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .logo img.header_logo {
        display: block !important;

        opacity: 1 !important;
        visibility: visible !important;

        filter: none !important;
    }

    /* =========================================================
       Hover 时隐藏 Flatsome 深色 Logo
       防止深色 Logo 在主题色背景上看不清
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .logo img.header-logo-dark {
        display: none !important;

        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* =========================================================
       如果当前只有深色 Logo，则临时转换为白色
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .logo img.header-logo-dark:only-child {
        display: block !important;

        opacity: 1 !important;
        visibility: visible !important;

        filter:
            brightness(0)
            invert(1) !important;
    }

    /* =========================================================
       防止 Logo 容器被其他主题规则隐藏
       ========================================================= */
    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .logo,

    html body #wrapper > #header.transparent:hover
    > .header-wrapper:not(.stuck):not(.is-sticky):not(.sticky-active)
    .logo-inner {
        opacity: 1 !important;
        visibility: visible !important;
    }
}