/* navbar */
    .header {
        position: fixed;
        display: flex;
        flex-direction: column; /* 保留可擺放其他區塊 */
        align-items: center;
        flex-wrap: nowrap;
        top: -1px;
        width: 100%;
        height: 5.5rem;
        padding: 1.5rem 2.5rem 0 3rem;
        transition: opacity 0.4s ease, transform 0.4s ease;
        z-index: 6000;
        /* background-color: #28fc2830; */
    }
    .header.hidden {
        pointer-events: none;  /* 下滾隱藏 header */
        transform: translateY(-100%);
        opacity: 0;
    }
    .navbar {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        text-align: center;
        width: 100%;
        /* background-color: #a3880f50; */
    }
    /* nav element */
    .nav-logo {
        position: relative;
        display: inline-block;
        width: auto;
        height: 2rem;
        top: -.5rem;
        transform-origin:center center;
        transition: transform 0.1s ease;
        z-index: 5100;
        background-color: #00000050;
    }
    .nav-logo img {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 12rem;
        height: auto;
        filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3));
        transition: opacity .25s ease, transform .12s ease;
        z-index: 5100;
    }
    .nav-logo:hover {
        transform: scale(1.15);
        z-index: 5101;
    }
    .nav-logo .logo-default { opacity: 1; }
    .nav-logo .logo-alt { opacity: 0; }
    /* 捲動後切換透明度 */
    .header.logo-change .nav-logo .logo-default { opacity: 0; }
    .header.logo-change .nav-logo .logo-alt { opacity: 1; }
    .header.sticky .nav-logo img { width: 12rem; transition: width 0.2s ease-in-out; }
    
    /* menu */
    .nav-menu {
        display: flex;
        gap: 1rem;
        align-items: center;
        white-space: nowrap;
        list-style: none;
        /* background-color: #00000050; */
    }
    .nav-link {
        position: relative;
        display: flex;
        justify-content: space-between; /* 中文左、英文右 */
        align-items: center;
        /* gap: .8rem; */
        width: auto;
        padding: .25rem .5rem;
        text-decoration: none;
        transition: transform 0.2s ease, color 0.25s ease; 
        color:#000000;
        /* background-color: #28fc2870; */
    }
    .nav-link .zh {
        font-size: 1rem;
        font-family: 'TsukuAOldMin','Microsoft JhengHei',sans-serif;
     }
    /* 英文預設桌機隱藏（只有漢堡展開後才顯示） */
    .nav-link .en {
        display: none; 
        font-size: .7rem;
        font-family: 'IWOLSTYB','Microsoft JhengHei',sans-serif;
        opacity: 1;
    }
    .nav_Lineifo { display: none; }
    /* hover 下劃線效果（桌機） */
    .nav-link:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        height: 1px;
        width: 82%;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: transform .2s cubic-bezier(.1,.7,1,.1), background-color .2s;
    }
    .nav-link:hover {
        color: #000000;
        transform: translateY(-4px);
        text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }
    .nav-link:hover:after {
        transform: translateX(-50%) scaleX(1);
        filter: drop-shadow(0 2px 1px rgba(0,0,0,0.25));
        background-color: #b5a426;
    }

    /* hamburger */
    .hamburger {
        position: relative;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: none;
        transition: background 0.35s ease;
        filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3));
        background: transparent;
        cursor: pointer;
        z-index: 5001;
    }
    /* 漢堡線條 */
    .bar {
        position: relative;
        width: 28px;
        height: 3px;
        margin: 4px;
        background:#000;
        border-radius: 3px;
        transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55),
                    opacity 0.2s ease, background 0.25s ease;
        z-index: 2;
    }
    /* hover 狀態：線條變色，不顯示圓底 */
    .hamburger:hover:not(.active) .bar {
        background:#b5a426;
    }
    /* active：圓底 + X 線 */
    .hamburger.active {
        /* background-color: #ffffff30; */
        background-image: linear-gradient(to bottom, #00000055, #00000070);
        /* background-image: linear-gradient(to bottom, #ffffff60, #ffffff30); */
    }
    /* X 線彈開效果 */
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(10.7px) rotate(45deg);
        background:#fff;
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-10.7px) rotate(-45deg);
        background:#fff;
    }
    /* hover active：圓底漸變，但 X 線不受影響 */
    .hamburger.active:hover {
        background: linear-gradient(135deg, #b5a426, #a3880f);
    }

    /* ====== 全螢幕選單（手機） 全螢幕 + 暗色遮罩 + 毛玻璃 ====== */
    @media (max-width: 991px) {
    .navbar { margin-top: -.6rem; }
    .nav-logo { top: 3px; }
    .hamburger { display: flex; transform: scale(0.9); }
    .nav-menu {
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        padding-top: 6rem; /* item高度 */
        background-image: linear-gradient(to bottom, #775100a6, #000000bd);
        backdrop-filter: blur(12px);
        transition: opacity .32s ease;
        pointer-events: none;
        opacity: 0;
        z-index: 5000;
    }
    @media (max-width: 566.98px) {
    .header { padding: 1.2rem 2rem 0 2rem; }
    .hamburger { transform: scale(0.7); }
    .nav-link .en { display: none !important; /* 強制隱藏英文 */ }
    }
    /* 展開 */
    .nav-menu.active { opacity: 1; pointer-events: auto; }
    .nav-menu .nav-item {
        opacity: 0;
        transform: translateY(-40px);
        transition: transform 0.25s cubic-bezier(0.68,-0.55,0.27,1.55),
                    opacity 0.25s ease;
    }
    /* 展開 nav-item */
    .nav-menu.active .nav-item { opacity: 1; transform: translateY(0); }
    /* 依序滑入延遲（流水般感覺） */
    .nav-menu.active .nav-item:nth-child(1) { transition-delay: 0s; }
    .nav-menu.active .nav-item:nth-child(2) { transition-delay: 0.05s; }
    .nav-menu.active .nav-item:nth-child(3) { transition-delay: 0.1s; }
    .nav-menu.active .nav-item.product-item { transition-delay: 0.15s; }
    /* 文字微彈初始狀態 */
    .nav-link .zh, .nav-link .en {
        display: inline-block;
        opacity: 0;
        transform: translateY(-6px);
        transition: transform 0.175s cubic-bezier(0.68,-0.55,0.27,1.55),
                    opacity 0.175s ease;
    }
    /* 展開文字 */
    .nav-menu.active .nav-link .zh,
    .nav-menu.active .nav-link .en { opacity: 1; transform: translateY(0); }
    /* 文字延遲微調，流暢感 */
    .nav-menu.active .nav-item:nth-child(1) .zh { transition-delay: 0.02s; }
    .nav-menu.active .nav-item:nth-child(1) .en { transition-delay: 0.045s; }
    .nav-menu.active .nav-item:nth-child(2) .zh { transition-delay: 0.07s; }
    .nav-menu.active .nav-item:nth-child(2) .en { transition-delay: 0.095s; }
    .nav-menu.active .nav-item:nth-child(3) .zh { transition-delay: 0.12s; }
    .nav-menu.active .nav-item:nth-child(3) .en { transition-delay: 0.145s; }
    .nav-menu.active .nav-item.product-item p { transition-delay: 0.17s; }
    .nav-menu.active .nav-item.product-item a { transition-delay: 0.195s; }
    /* nav-link 手機樣式：中文左、英文右（單行） */
    .nav-item { 
        width: 90%;
        display: flex;
        justify-content: center;
        /* background-color: #00000050; */
    }
    .nav-link {
        align-items: center;
        width: min(860px, 80%);
        margin: .4rem 0;
        padding: .8rem 1.2rem;
        color:#edde6c;
        border-radius: 6px;
        filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3));
        background-image: linear-gradient(to bottom, #00000055, #00000070);
        /* background-image: linear-gradient(to bottom, #ffffff80, #ffffff60); */
    }
    .nav-link .zh { font-size: 1.5rem; white-space: nowrap; }
    .nav-link .en { 
        display: inline-block;
        white-space: nowrap;
        padding-top: 8px;
        font-size: .8rem;
        letter-spacing: 1px;
    }
    /* 只有當 nav-menu 加 .active 時，才顯示英文（桌機仍隱藏） */
    .nav-menu:not(.active) .en { display: none; }
    /* 把 nav_Lineifo 放在 overlay 底部（以 li 包裹） */
    .nav-link:after {
        width: 100%;
    }
    .nav-link:hover {
        color: #ffffff;
        background: transparent;
    }
    .product-item { 
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: auto;
        margin-bottom: 35%;
    }
    .nav-menu.active .nav_Lineifo {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
        width: 72%;
        /* margin-bottom: 5%; */
        padding: 5%;
        font-size: 1rem;
        border-top: 1px #b5a42650 solid;
        border-bottom: 1px #b5a42650 solid;
        filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
        /* background-color: #a3880f90; */
    }
    .nav-menu.active .nav_Lineifo p {
        margin: 0;
        padding: 6px;
        width: 100%;
        font-family: 'Microsoft JhengHei',sans-serif;
        font-weight: 500;
        color: #b5a426;
    }
    .nav-menu.active .nav_Lineifo a {
        padding-bottom: 4px;
        width: 100%;
        font-family: 'IWOLSTYB','Microsoft JhengHei',sans-serif;
        letter-spacing: 1px;
        color: #ffffff;
    }
    .nav-menu.active .nav_Lineifo b {
        font-family: 'IWOLSTYB','Microsoft JhengHei',sans-serif;
        font-weight: 700;
        color: #ff5d35;
    }
    .nav-menu.active .nav_Lineifo a:hover {
        color: #28fc28;
        transition: all cubic-bezier(0.65, 0.05, 0.51, 0.67);
    }
    }