/* =====================================================
   Bilcommerce 公共固定导航栏
   所有页面统一引用
===================================================== */

:root{
    --site-header-height:88px;
}

html{
    scroll-padding-top:calc(var(--site-header-height) + 20px);
}

body{
    padding-top:var(--site-header-height);
}

.site-header,
.site-header *{
    box-sizing:border-box;
}

.site-header{
    position:fixed;
    top:0;
    left:0;
    z-index:10000;

    width:100%;
    height:var(--site-header-height);

    display:flex;
    align-items:center;

    padding:0 5%;

    background:rgba(248,247,243,.96);
    border-bottom:1px solid rgba(16,38,77,.08);
    box-shadow:0 4px 18px rgba(16,38,77,.06);

    font-family:
        "PingFang SC",
        "Microsoft YaHei",
        Arial,
        sans-serif;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.site-header-logo{
    flex-shrink:0;
}

.site-header-logo a{
    color:#10264d;

    font-size:28px;
    font-weight:700;
    letter-spacing:.5px;
    text-decoration:none;
    white-space:nowrap;
}

.site-main-nav{
    margin-left:auto;
}

.site-main-nav ul{
    display:flex;
    align-items:center;
    gap:34px;

    margin:0;
    padding:0;

    list-style:none;
}

.site-main-nav li{
    margin:0;
    padding:0;
}

.site-main-nav a{
    position:relative;

    display:block;

    color:#17233d;

    font-size:17px;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;

    transition:color .3s ease;
}

.site-main-nav a::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:-11px;

    width:0;
    height:2px;

    background:#c69736;

    transform:translateX(-50%);
    transition:width .3s ease;
}

.site-main-nav a:hover,
.site-main-nav a.active{
    color:#b1842d;
}

.site-main-nav a:hover::after,
.site-main-nav a.active::after{
    width:100%;
}

.site-language{
    display:flex;
    align-items:center;
    gap:8px;

    margin-left:34px;

    flex-shrink:0;
}

.site-language a,
.site-language span{
    color:#17233d;

    font-size:15px;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
}

.site-language a:hover,
.site-language a.active{
    color:#b1842d;
}

.site-header-contact{
    margin-left:28px;

    flex-shrink:0;
}

.site-header-contact a{
    min-width:118px;
    height:44px;

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

    padding:0 22px;

    color:#fff;
    background:#c69736;

    border:1px solid #c69736;
    border-radius:24px;

    font-size:16px;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.site-header-contact a:hover{
    background:#b1842d;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(198,151,54,.24);
}

/* 平板 */

@media(max-width:1100px){

    .site-header{
        padding:0 3%;
    }

    .site-main-nav ul{
        gap:20px;
    }

    .site-main-nav a{
        font-size:15px;
    }

    .site-language{
        margin-left:20px;
    }

    .site-header-contact{
        margin-left:18px;
    }
}

/* 手机：导航改成第二行横向滑动，功能全部保留 */

@media(max-width:850px){

    :root{
        --site-header-height:118px;
    }

    .site-header{
        height:var(--site-header-height);

        display:grid;
        grid-template-columns:auto 1fr auto;
        grid-template-rows:64px 54px;

        padding:0 18px;
    }

    .site-header-logo{
        grid-column:1;
        grid-row:1;
    }

    .site-header-logo a{
        font-size:23px;
    }

    .site-language{
        grid-column:2;
        grid-row:1;

        justify-self:end;

        margin-left:0;
        margin-right:16px;
    }

    .site-header-contact{
        grid-column:3;
        grid-row:1;

        margin-left:0;
    }

    .site-header-contact a{
        min-width:auto;
        height:40px;

        padding:0 16px;

        font-size:14px;
    }

    .site-main-nav a{
        font-size:15px;
    }

    .site-main-nav a::after{
        bottom:-8px;
    }
}

@media(max-width:520px){

    .site-header{
        padding:0 12px;
    }

    .site-header-logo a{
        font-size:19px;
    }

    .site-language{
        gap:5px;
        margin-right:8px;
    }

    .site-language a,
    .site-language span{
        font-size:12px;
    }

    .site-header-contact a{
        height:36px;

        padding:0 11px;

        font-size:12px;
    }

    .site-main-nav ul{
        justify-content:flex-start;
        gap:22px;
    }

    .site-main-nav a{
        font-size:14px;
    }
}/* =========================
   产品系列悬浮下拉菜单
========================= */

.product-menu{
    position:relative;
}

/* 下拉卡片 */

.product-dropdown{
    position:absolute;

    top:100%;
    left:50%;

    z-index:10020;

    width:160px;

    display:flex;
    flex-direction:column;
    gap:4px;

    margin-top:18px;
    padding:10px;

    background:rgba(255,255,255,.98);

    border:1px solid rgba(198,151,54,.5);
    border-radius:16px;

    box-shadow:0 14px 35px rgba(16,38,77,.16);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translate(-50%,10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

/* 连接产品文字与下拉卡片之间的空隙 */

.product-dropdown::before{
    content:"";

    position:absolute;

    right:0;
    bottom:100%;
    left:0;

    height:20px;
}

/* 鼠标悬停或键盘聚焦时显示 */

.product-menu:hover .product-dropdown,
.product-menu:focus-within .product-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translate(-50%,0);
}

/* 下拉菜单中的四个分类 */

.site-main-nav .product-dropdown a{
    position:static;

    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:11px 12px;

    color:#17233d;
    background:transparent;

    border-radius:10px;

    font-size:15px;
    line-height:1.3;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

/* 取消主导航下划线 */

.site-main-nav .product-dropdown a::after{
    display:none;
}

/* 分类悬浮效果 */

.site-main-nav .product-dropdown a:hover{
    color:#fff;
    background:#c69736;

    transform:translateX(3px);
}

/* 手机没有稳定的鼠标悬浮，隐藏二级菜单 */

@media(max-width:850px){

    .product-dropdown{
        display:none;
    }
}

/* =====================================================
   强制统一所有页面的公共导航栏
   防止 product.css 等页面样式影响 Header
===================================================== */

.site-header > .site-header-logo,
.site-header > .site-main-nav,
.site-header > .site-language,
.site-header > .site-header-contact{
    position:static;
    float:none;
}

.site-header > .site-main-nav{
    width:auto;
    height:auto;

    display:block;

    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:auto;

    padding:0;

    background:transparent;
    border:0;
    box-shadow:none;

    transform:none;
}

.site-header > .site-main-nav > ul{
    width:auto;
    height:auto;

    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:34px;

    margin:0;
    padding:0;

    background:transparent;
    border:0;

    list-style:none;
}

.site-header > .site-main-nav > ul > li{
    width:auto;
    height:auto;

    display:block;

    margin:0;
    padding:0;

    background:transparent;
    border:0;
}

.site-header > .site-main-nav > ul > li > a{
    width:auto;
    height:auto;

    display:block;

    margin:0;
    padding:0;

    color:#17233d;
    background:transparent;
    border:0;
    border-radius:0;

    font-size:17px;
    line-height:1;
    text-align:left;
    text-decoration:none;
    white-space:nowrap;

    box-shadow:none;
    transform:none;
}

.site-header > .site-main-nav > ul > li > a:hover,
.site-header > .site-main-nav > ul > li > a.active{
    color:#b1842d;
    background:transparent;
}

/* 平板保持与其他页面相同 */

@media(max-width:1100px){

    .site-header > .site-main-nav > ul{
        gap:20px;
    }

    .site-header > .site-main-nav > ul > li > a{
        font-size:15px;
    }
}

/* 手机布局与所有页面统一，不单独让 Product 页面变形 */

@media(max-width:850px){

    .site-header > .site-main-nav{
        grid-column:1 / -1;
        grid-row:2;

        width:100%;

        margin:0;
        padding:0;

        overflow:hidden;
    }

    .site-header > .site-main-nav > ul{
        width:100%;

        justify-content:space-between;
        gap:10px;

        padding:0 2px 14px;
    }

    .site-header > .site-main-nav > ul > li > a{
        font-size:14px;
        text-align:center;
    }

    .product-dropdown{
        display:none;
    }
}

@media(max-width:520px){

    .site-header > .site-main-nav > ul{
        gap:6px;
    }

    .site-header > .site-main-nav > ul > li > a{
        font-size:12px;
    }
}