/*html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
body {
    font-family: Jaldi, Helvetica, 微軟正黑體, sans-serif;
    margin:0px;
}*/
.is-hidden {
    display: none !important;
}
.menu-mobile {
    display: none;
}

header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
    background: linear-gradient(to bottom, rgba(248,244,241,0.9), rgba(248,244,241,0.7));
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    width: 100%;
    max-width: var(--max-menu-width);
    margin: 0 auto;
    padding: 0 20px;
    min-height:88px;
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 20px;
    cursor:pointer;
}

/* 這裡的 svg 路徑換成你的鳥 logo 向量檔 */
.logo-mark {
    width: 28px;
    height: 28px;
    background: #000;
    mask: url('patternx-logo-bird.svg') center/contain no-repeat;
    -webkit-mask: url('patternx-logo-bird.svg') center/contain no-repeat;
}

nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    width: 100%;
}

    nav a {
        color: var(--text-muted);
    }

        nav a:hover {
            color: var(--text-main);
        }

#Header {
    top: 0;
    z-index: 998;
    width: 100%;
    background: #ffffff;
    padding-bottom: 12px;
    position: fixed;
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: #000000;
}
nav #HeaderContent {
    width: 1380px;
    text-align: center;
    margin: 0 auto;
}
nav #TopDiscount {
    top: 0;
    z-index: 999;
    text-align: center;
    line-height: 35px;
    width: 100%;
    height: 35px;
    background-color: rgba(236, 239, 241, 0.8);
    letter-spacing: 0.5px;
}



nav #HeaderRight {
    margin-right: 1.3%;
    text-align: right;
    margin-top: 21px;
    float: right;
    width:16%;
}
nav .MiniFuncList {
    position: absolute;
    width: 105px;
    /*height: 300px;*/
    z-index: 10;
    background-color: #fff;
    overflow: hidden;
    outline: none;
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
    border: 1px solid #646565;
    /*transition: opacity 0.5s;*/
    /*opacity: 0;*/
    right: 310px;
    display: none;
}
    nav .MiniFuncList .MiniFuncListInner {
        /*height: 250px;*/
        padding: 10px;
    }
nav .MiniCart {
    position: absolute;
    width: 265px;
    height: 300px;
    z-index: 10;
    background-color: #fff;
    overflow: hidden;
    outline: none;
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
    border: 1px solid #646565;
    /*transition: opacity 0.5s;*/
    opacity: 0;
    right: 265px;
    max-height: 0px;
    /* [2026-04-09] 目的：與 .site-header__client 迷你車一致，內層列表＋底部結帳垂直分配 */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
    nav .MiniCart .MiniCartInner {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        max-height: none;
        padding: 8px 12px 8px 14px;
        box-sizing: border-box;
    }
    nav .MiniCart .MiniCartBlock {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    nav .MiniCart .MiniCartCheckout {
        flex-shrink: 0;
        border-top: 1px solid #646565;
        width: 100%;
        font-size: 15px;
        line-height: 52px;
        letter-spacing: 7px;
        cursor: pointer;
        text-align: center;
    }
        nav .MiniCart .MiniCartCheckout:hover {
            color: #a1b6c8;
            font-size: 16px;
        }

    /* [2026-04-09] 目的：迷你車單列改為可換行、高度自適應，避免規格文字被單行裁切 */
    nav .MiniCart .CartItem {
        text-align: left;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 8px 0 10px 0;
        box-sizing: border-box;
    }
        nav .MiniCart .CartItem a {
            padding-left: 0px;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 10px;
            text-decoration: none;
            color: inherit;
        }
        nav .MiniCart .CartItem .CartItemPhoto {
            width: 53px;
            height: 53px;
            min-width: 53px;
            min-height: 53px;
            float: none;
            flex-shrink: 0;
        }
            nav .MiniCart .CartItem .CartItemPhoto img {
                box-sizing: border-box;
                display: inline-block;
                width: calc(100% - 3px);
                height: calc(100% - 3px);
                object-fit: cover;
            }
        nav .MiniCart .CartItem .CartItemData {
            float: none;
            flex: 1 1 auto;
            min-width: 0;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            word-break: break-word;
            color: #646565;
        }
            nav .MiniCart .CartItem .CartItemData div {
                line-height: 1.45;
            }
        nav .MiniCart .CartItem .CartItemName {
            font-weight: 600;
            margin-bottom: 4px;
        }
        nav .MiniCart .CartItem .CartSpecContent {
            font-size: 12px;
            line-height: 1.45;
        }
        nav .MiniCart .CartItem .CartItemQTY {
            font-size: 12px;
            margin-top: 4px;
        }




.flex-item a:hover, .footer_right a:hover {
    text-decoration: underline;
}
.flex-item span {
    cursor:pointer;
}
@media screen and (min-width: 944px) {
    .flex-item .CartName, .flex-item .LoginName {
       /* padding-top: 11px;*/
        padding-left: 2em;
        display: inline-block;
    }
    .flex-item .MemberZone {
       /* padding-top: 11px;
        padding-left: 2em;*/
        display: inline-block;
    }
}
.MiniFuncListLine {
    text-align: center;
    height: 35px;
    border-bottom: solid 1px;
    vertical-align: middle;
    line-height: 35px;
}
@media screen and (max-width: 943px) {
    .flex-item .CartName, .flex-item .LoginName {
        font-size: 1em;
        padding-top: 21px;
        padding-left: 6px;
        display: inline-block;
    }
    .flex-item .MemberZone {
        font-size: 1em;
        padding-top: 21px;
        padding-left: 6px;
        display: inline-block;
    }
}
#HeaderRightBottom a {
   /* color: #000000;*/
    text-decoration: none;
}
#HeaderRightTop{
    float:right;
}
#HeaderRightBottom{
    float:left;
}


#HeaderRightSearch {
    margin-right: 24px;
    cursor: pointer;
}

#HeaderRighttop, #HeaderRightbottom {
    text-align: right;
}

#HeaderSearchBox {
    width: 19%;
    border: 0;
    vertical-align: super;
    margin-right: 1%;
    text-align: center;
}

    #HeaderSearchBox:focus {
        outline: none;
        border-bottom: solid 1px #979797;
    }

#HeaderSearchBoxFocus {
    outline: none;
    border-bottom: solid 1px #979797;
}
#dropdown {
    position: relative;
    display: inline-block;
}
#dropbtn {
    background-color: #ffffff;
    border: none;
    cursor: pointer;
    vertical-align: super;
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    color: #000000;
}
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 92px;
    border: solid 1px #979797;
    margin-top: 6px;
    z-index: 997;
}

.blursss {
}

/* first level ul style */
.content-blurred {
}

.content-wrapper {
}



.cbp-hrsub-blur-img {
}

.cbp-hrmenu {
    width: 100%;
    height: 65px;
    /* [2026-03-25] 目的：submenu 內容需要向下自動撐高，不要被固定高度裁切 */
    overflow: visible !important;
}

    /* general ul style */
    .cbp-hrmenu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        
        line-height: 40px;
    }
    .cbp-hrmenu > ul > li {
        display: inline-block;
    }
        .cbp-hrmenu > ul > li img {
            margin-top: -3px;
            vertical-align:middle;
        }
        .cbp-hrmenu > ul > li > a:hover {
            color: #000000;
            text-decoration: underline;
        }

        .cbp-hrmenu > ul > li.cbp-hropen > a,
        .cbp-hrmenu > ul > li.cbp-hropen > a:hover {
            color: #000000;
            text-decoration: underline;
        }

/* sub-menu */

.MenuBanner {
    /* [2026-03-25] 目的：submenu 視覺更輕盈、避免第一層欄位太「重」 */
    width: 150px;
    height: 85px;
    object-fit: cover;
    box-sizing: border-box;
    border-radius: 12px;
}
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /*background-color: rgba(249, 252, 255, 0.5);*/
    /*background-color: rgba(255, 255, 255, 0.9);*/
    /* [2026-03-25] 目的：submenu 視窗底色不要半透明，視覺更乾淨 */
    background-color: rgba(239, 239, 239, 1);
    z-index: 999;
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 30px;

    width: 100%;
    position: absolute;
    left: 0px;
    border: 1px solid rgb(240 240 240);
    /* [2026-03-25] 目的：全展開時第二列/更深階層不應被裁切 */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    /* [2026-03-25] 目的：submenu 內容置中（.cbp-hrsub-inner 為 inline-block） */
    text-align: center;
    /* [2026-03-25] 目的：submenu 視窗必須貼著 menu，否則 hover 會斷掉自動關閉 */
}




.cbp-hrsub-inner {
    /*box-shadow: 3px 3px 5px 6px rgba(249, 252, 255, 1.0);*/
    
    display: inline-block;
    box-sizing: border-box;
}
.cbp-hrsub-inner::after {
    /* [2026-03-25] 目的：若子層仍有 float，避免父層高度塌陷導致 submenu 背景不撐高 */
    content: "";
    display: block;
    clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner ul
{

}
.cbp-hrmenu .cbp-hrsub-inner > div > ul > li > div {/*第二層*/
    /* [2026-03-25] 目的：第二層在各自第一層欄位內要垂直堆疊，
       讓階層性更明顯，且避免因 float 造成第二層在不同欄位之間「橫向散開」。 */
    float: none !important;
    clear: both;
    /* [2026-03-25] 目的：第二層改用「縮排」表現階層，避免左邊線太硬 */
    margin: 8px 0;
    padding-left: 0;
    border-left: none;
}
    .cbp-hrmenu .cbp-hrsub-inner > div > ul > li > div > ul > li div { /*第三層 第四層*/
        margin-left:10px;
    }

/* [2026-03-25] 目的：第三/第四層 banner 也要在 submenu 一次完整呈現 */

.cbp-hrmenu .cbp-hrsub-inner > div > a {
    display: block;
    /* [2026-03-25] 目的：第一層標題/圖片間距更緊湊 */
    margin-bottom: 6px;
}

/* [2026-03-25] 目的：電腦版 hover submenu 需要完整展開四層內容
   作法：避免 float 排版導致深層看起來像被擠/沒顯示，把第二層改成可垂直堆疊。 */
@media screen and (min-width: 960px) {
    /* [2026-08-06] 目的：桌機版完整 mega menu 改為 1.2 秒由上往下滑出與收回，讓大量選單的展開過程清楚可辨。 */
    .cbp-hrmenu .cbp-hrsub {
        display: block;
        width: 100%;
        left: 0;
        padding-bottom: 30px;
        max-height: 80vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-14px);
        transform-origin: top center;
        clip-path: inset(0 0 100% 0);
        transition:
            clip-path 1200ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 600ms ease,
            visibility 0s linear 1200ms;
        will-change: clip-path, transform, opacity;
    }

    .cbp-hropen .cbp-hrsub {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        transition-delay: 0s;
    }

    /* [2026-03-25] 目的：撤回 flex-wrap，避免第二列被折疊/裁切導致內容消失
       置中改由 text-align 與 inline-block 自動處理。 */

    /* [2026-03-25] 目的：第一層（每個分類欄）要橫排呈現 */
    .cbp-hrmenu .cbp-hrsub-inner > div {
        float: none !important;
        display: inline-block !important;
        vertical-align: top;
        /* [2026-03-25] 目的：固定欄寬讓從屬視覺更平均，避免某欄過寬/過窄 */
        width: 210px;
        margin: 0 22px 0 0 !important;
    }

    /* [2026-03-25] 目的：第一層欄位固定寬後，讓欄位內對齊更一致 */
    .cbp-hrsub-inner {
        text-align: left;
    }

    /* [2026-03-25] 目的：內容太長時不要爆版；超過視窗高度比例後才出現垂直滾動條 */
    .cbp-hropen .cbp-hrsub {
        max-height: 80vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .cbp-hrmenu .cbp-hrsub-inner > div > ul > li > div > ul > li div {
        margin-left: 12px !important;
    }
}

@media screen and (min-width: 960px) and (prefers-reduced-motion: reduce) {
    /* [2026-08-06] 目的：尊重使用者的減少動態效果設定，保留選單功能但停用滑出動畫。 */
    .cbp-hrmenu .cbp-hrsub {
        transition: none;
        transform: none;
    }
}

    .cbp-hrmenu .cbp-hrsub-inner > div > a:hover {
    }

.cbp-hrmenu .cbp-hrsub-inner > div a {
    /*color: #000000;*/
    text-decoration: none;
    /* [2026-03-25] 目的：submenu 文字字距過大導致視覺不精緻 */
    letter-spacing: 0.3px;
    line-height: 22px;
    font-size: 13px;
}

    .cbp-hrmenu .cbp-hrsub-inner > div a:hover {
        /*color: #000000;*/
        text-decoration: underline;
    }

.cbp-hrsub h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    margin: 0px 0px 8px;
}

@media screen and (min-width: 944px) {
    .cbp-hrmenu .cbp-hrsub-inner > div {
    }
    /*.cbp-hrmenu > ul > li > a {
        color: #212121;
        display: inline-block;
        text-decoration: none;
        padding-top: 12px;
        padding-left: 24px;
        font-size: 14px;
        letter-spacing: 0.5px;
        font-family: Lato, sans-serif;
        font-weight: 600;
        letter-spacing: 1px;
        font-style: normal;
    }*/

    .cbp-hrmenu > ul > li > a {
        
        

        padding-left: 45px;
        font-size: 14px;
        letter-spacing: 1px;
        font-weight: 400;
    }
}
.cbp-hrmenu > ul > li > a {
    /*color: #212121;*/
    display: inline-block;
    text-decoration: none;

}
@media screen and (max-width: 943px) {
    .cbp-hrmenu .cbp-hrsub-inner > div {
    }

    .cbp-hrmenu > ul > li > a {
        font-weight: 700;

        padding-top: 13px;
        padding-left: 6px;
        font-size: 1em;
    }
}

@media (max-width: 575px) {
    #Header {
        font-size: 28px;
    }

    a:link {
        color: #212121;
    }

    a:visited {
        color: #212121;
    }

    .flex-container {
        padding: 0;
        margin: 0;
        line-height: 32px;
        font-size: 24px;
    }

        .flex-container a {
            text-decoration: none;
        }

    li {
        list-style: none;
    }

    .tree_label a {
        line-height: 32px;
        font-size: 24px;
        text-decoration: none;
    }

    .flex-container {
        padding: 0;
        margin: 0;
    }
    .flex-container {
        padding: 0;
        margin: 0;
    }
    nav .HeaderCenter {
        float: left;
        text-align: left;
        width: 100%;
        display: none;
        overflow: scroll;
    }


    .menu-mobile {
        display: block;
        margin-top: 10px;
    }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }
    .navbar-toggle {
        padding: 7px 10px 9px 10px;
        background-color: transparent;
        background-image: none;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        float: right;
    }
        .navbar-toggle .icon-bar {
            display: block;
            width: 22px;
            height: 2px;
            border-radius: 1px;
            background-color: #888;
            margin-top: 4px;
        }

    .menu {
        display: none;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    #Header {
        font-size: 32px;
    }

    a:link {
        color: #212121;
    }

    a:visited {
        color: #212121;
    }

    .flex-container {
        padding: 0;
        margin: 0;
      /*  line-height: 40px;
        font-size: 28px;*/
    }

        .flex-container a {
            text-decoration: none;
        }

    li {
        list-style: none;
    }

    .tree_label a {
       /* line-height: 40px;
        font-size: 28px;*/
        text-decoration: none;
    }
    .flex-container {
        padding: 0;
        margin: 0;
    }
    nav .HeaderCenter {
        float: left;
        text-align: left;
        width: 100%;
        display: none;
        overflow: scroll;
    }

    .menu-mobile {
        display: block;
        margin-top: 10px;
    }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }
    .navbar-toggle {
        padding: 7px 10px 9px 10px;
        background-color: transparent;
        background-image: none;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        float: right;
    }
        .navbar-toggle .icon-bar {
            display: block;
            width: 22px;
            height: 2px;
            border-radius: 1px;
            background-color: #888;
            margin-top: 4px;
        }

    .menu {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {

    #Header{
        font-size:32px;
    }
    a:link {
        color: #212121;
    }
    a:visited {
        color: #212121;
    }
    .flex-container {
        padding: 0;
        margin: 0;
       /* line-height: 70px;
        font-size: 36px;*/
        
    }
        .flex-container a {
            text-decoration: none;
        }
    li {
        list-style: none;
    }
    .tree_label a {
        line-height: 70px;
        font-size: 36px;
        text-decoration: none;
    }
    nav .HeaderCenter {
        float: left;
        text-align: left;
        width: 100%;
        display: none;
        overflow: scroll;
    }


    .menu-mobile {
        display: block;
        margin-top: 10px;
    }
    
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }
    .navbar-toggle {
        padding: 7px 10px 9px 10px;
        background-color: transparent;
        background-image: none;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        /* float: right; */
        position: absolute;
        right: 10px;
        top: 50px;
    }
        .navbar-toggle .icon-bar {
            display: block;
            width: 44px;
            height: 4px;
            border-radius: 2px;
            background-color: #888;
            margin-top: 8px;
        }

    .menu {
        display: none;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: flex-end;
    }
    nav .HeaderCenter {
        margin-top: 50px;
        float: left;
        text-align: left;
        width: 830px;
    }

    .menu-mobile {
        display: none;
    }

    .menu {
        display: inline-block;
    }
}
@media (min-width: 1200px) {
    .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: flex-end;
    }
    nav .HeaderCenter {
       
        float: left;
        text-align: left;
        width: 80%;
    }

    .menu-mobile {
        display: none;
    }
    .menu {
        
    }
}

/* [2026-03-25] 目的：註冊頁 storefront header shell（site-header、主分類橫列、滿版選單） */
:root {
    --store-header-bg: rgba(252, 250, 248, 0.92);
    --store-header-border: rgba(0, 0, 0, 0.06);
    --store-header-text: #1a1a1a;
    --store-header-muted: #6b6b6b;
    --store-header-accent: #2c2c2c;
    --store-header-strip-max: 100%;
}

.site-header[data-store-header-shell] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--store-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--store-header-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    /* [2026-03-26] 目的：手機捲動聯動收合 header 時，避免瀏覽器 Scroll Anchoring 自動調整 scrollY 造成震盪與閃爍 */
    overflow-anchor: none;
}

/* [2026-03-26] 目的：移除 ProductList 特例滿版修正；改以修正真正來源（避免後台 ManageBase.css 汙染前台頁） */

/* [2026-03-26] 目的：登入/註冊頁 MainContent 使用 align=center，強制 storefront header 滿寬與左對齊，避免桌機主列排版把搜尋擠到不可見 */
#MainContent > .site-header[data-store-header-shell] {
    display: block;
    width: 100%;
    max-width: none;
    text-align: left;
    box-sizing: border-box;
}

.site-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* [2026-03-25] 目的：單一 flex 列整合工具列／搜尋／桌面選單；手機換行為「上列＋下列搜尋」 */
.site-header__row--unified {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    min-height: 56px;
    padding-bottom: 10px;
}

.site-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--store-header-accent);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-header__icon-btn:hover,
.site-header__icon-btn:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
}

.site-header__icon-svg {
    display: block;
    flex-shrink: 0;
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    justify-content: center;
    text-decoration: none;
    color: var(--store-header-text);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.site-header__burger {
    flex: 0 0 auto;
}

@media (min-width: 960px) {
    .site-header__burger {
        display: none;
    }

    .site-header__logo {
        justify-content: flex-start;
        flex: 0 1 auto;
        max-width: 200px;
    }

    .site-header__row--unified {
        flex-wrap: nowrap;
        align-items: center;
        min-height: 0;
        padding-top: 6px;
        padding-bottom: 8px;
        gap: 12px 16px;
    }

    /* [2026-03-25] 目的：主列各欄垂直置中，避免圖示按鈕視覺偏上、下方留白 */
    .site-header[data-store-header-shell] .site-header__search-slot,
    .site-header[data-store-header-shell] .site-header__logo,
    .site-header[data-store-header-shell] .site-header__desktop,
    .site-header[data-store-header-shell] .site-header__toolbar-actions {
        align-self: center;
    }

    /* [2026-03-25] 目的：舊版 .flex-item .CartName 的 padding-left 不套用在 #CartName 連結 */
    .site-header[data-store-header-shell] .flex-item > a#CartName,
    .site-header[data-store-header-shell] .flex-item > a {
        padding-left: 0 !important;
    }

    .site-header[data-store-header-shell] .site-header__lang-btn {
        height: 42px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid var(--store-header-border);
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        vertical-align: middle;
    }
}

/* [2026-03-25] 目的：註冊頁 header 不使用 Logo 旁裝飾方塊；舊 class 若仍存在則隱藏 */
.site-header[data-store-header-shell] .site-header__logo-mark {
    display: none !important;
}

.site-header__logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2c2c2c 0%, #5a5a5a 100%);
    flex-shrink: 0;
}

.site-header__logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* [2026-03-25] 目的：Logo 若為圖片時維持正確比例，避免顯示成方塊感 */
.site-header__logo-text img {
    height: 30px;
    width: auto;
    max-width: 160px;
    display: block;
    object-fit: contain;
}

.site-header__toolbar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

@media (max-width: 959px) {
    .site-header[data-store-header-shell] .site-header__toolbar-actions {
        margin-left: auto;
    }
}

.site-header__client {
    font-size: 13px;
    position: relative;
}

.site-header__client .flex-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.site-header__client a {
    color: var(--store-header-muted);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.03);
    line-height: 1;
    font-size: 12px;
    min-height: 30px;
    white-space: nowrap;
}

.site-header__client a:hover {
    color: var(--store-header-accent);
    background: rgba(0, 0, 0, 0.08);
}

/* [2026-03-25] 目的：會員／購物車用 SVG 圖示（避免 emoji 在部分環境變亂碼；依 .is-login / .is-cart） */
.site-header__client a.is-login::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* [2026-03-25] 目的：登入後「會員專區」主按鈕用網格圖示，與「登入」人形圖示區隔 */
.site-header__client a.is-member-hub::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

.site-header__client a.is-cart::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.72a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}

/* [2026-03-25] 目的：手機先聚焦核心操作，隱藏「結帳去」避免工具列擁擠 */
@media (max-width: 959px) {
    /* [2026-03-25] 目的：覆寫舊版 .flex-item .CartName 的 padding-top，否則圖示列會重疊爆版 */
    .site-header__client .flex-item {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        vertical-align: middle;
    }

    .site-header__client .flex-item .CartName,
    .site-header__client .flex-item .LoginName,
    .site-header__client .flex-item .MemberZone {
        padding: 0 !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        margin: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    /* [2026-03-25] 目的：手機工具列改為 icon 優先，避免文字擠壓 */
    .site-header__client .flex-container {
        gap: 6px;
    }

    /* [2026-03-25] 目的：與桌機相同，避免 gap+文字節點造成圖示垂直偏移 */
    .site-header[data-store-header-shell] .site-header__client a {
        gap: 0 !important;
    }

    .site-header__client a {
        position: relative;
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        justify-content: center;
        border-radius: 999px;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
    }

    /* [2026-03-25] 目的：角標在圓形按鈕外側，不可 overflow:hidden 否則數字被裁切 */
    .site-header__client a.is-cart {
        overflow: visible !important;
    }

    .site-header__client a::before {
        position: relative;
        z-index: 1;
    }

    .site-header[data-store-header-shell] .site-header__client a::before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        z-index: 1;
    }

    .site-header__client a.is-cart::after {
        content: attr(data-cart-count);
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        border-radius: 999px;
        background: #1f1f1f;
        color: #fff !important;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        box-sizing: border-box;
        z-index: 2;
    }

    .site-header__client a[href*='checkout'],
    .site-header__client a[href*='Checkout'],
    .site-header__client a.is-checkout {
        display: none !important;
    }

    /* [2026-04-14] 目的：若 MiniCart 掛在 #CartName 內，外層 a 的 overflow:hidden＋34px 會裁切整個浮層，手機只剩一小圓圖；先讓觸發錨點可溢出 */
    .site-header__client a#CartName {
        overflow: visible !important;
    }

    .site-header__client li.flex-item:has(.MiniCart) {
        overflow: visible !important;
        position: relative;
        z-index: 40;
    }

    /* [2026-04-14] 目的：手機主列 .site-header__client a 的圓形圖示規則會套到 MiniCart 內商品連結，造成僅剩縮圖、文字透明／字級為0；迷你車列還原為可捲動清單連結 */
    .site-header__client .MiniCart .CartItem > a {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #111827 !important;
        overflow: visible !important;
        background: transparent !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        white-space: normal !important;
    }

    .site-header__client .MiniCart .CartItem > a::before,
    .site-header__client .MiniCart .CartItem > a::after {
        content: none !important;
        display: none !important;
    }

    .site-header__client .MiniCart .CartItem .CartItemData,
    .site-header__client .MiniCart .CartItem .CartItemData div {
        color: #374151 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .site-header__client .MiniCart .CartItem .CartItemName {
        color: #111827 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

}

/* [2026-03-25] 目的：桌機登入／購物車改為純圖示＋購物車角標，避免 icon+長文字擠在 header；aria-label 由 9.js 設定 */
@media (min-width: 960px) {
    .site-header[data-store-header-shell] .site-header__client .flex-container {
        gap: 10px;
        align-items: center;
    }

    .site-header[data-store-header-shell] .site-header__client .flex-item {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    /* [2026-03-25] 目的：覆寫主列 a 的 gap:4px，避免 ::before 與隱藏文字節點成兩欄導致圖示偏上、下方留白 */
    .site-header[data-store-header-shell] .site-header__client a.is-login,
    .site-header[data-store-header-shell] .site-header__client a.is-member-hub,
    .site-header[data-store-header-shell] .site-header__client a.is-cart {
        position: relative;
        box-sizing: border-box;
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        gap: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center;
        border-radius: 12px;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--store-header-border);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .site-header[data-store-header-shell] .site-header__client a.is-cart {
        overflow: visible !important;
    }

    .site-header[data-store-header-shell] .site-header__client a.is-login:hover,
    .site-header[data-store-header-shell] .site-header__client a.is-member-hub:hover,
    .site-header[data-store-header-shell] .site-header__client a.is-cart:hover {
        background: rgba(0, 0, 0, 0.04);
        color: transparent !important;
        border-color: rgba(0, 0, 0, 0.1);
    }

    /* [2026-03-25] 目的：圖示絕對置中，不受「購物車［0］」等隱藏文字 strut 影響 */
    .site-header[data-store-header-shell] .site-header__client a.is-login::before,
    .site-header[data-store-header-shell] .site-header__client a.is-member-hub::before,
    .site-header[data-store-header-shell] .site-header__client a.is-cart::before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 22px;
        height: 22px;
        margin: 0;
        z-index: 1;
        display: block;
    }

    .site-header[data-store-header-shell] .site-header__client a.is-cart::after {
        content: attr(data-cart-count);
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: #1a1a1a;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 600;
        line-height: 18px;
        text-align: center;
        box-sizing: border-box;
        z-index: 2;
    }

    /* [2026-03-25] 目的：桌機僅保留「會員專區」文字入口，隱藏手機風格的九宮格 icon */
    .site-header[data-store-header-shell] .site-header__client a.is-member-hub {
        display: none !important;
    }
}

/* [2026-03-25] 目的：把 MiniCart 回復為浮層顯示，避免「結帳去」跑到主介面列 */
/* [2026-04-11] 目的：關閉時 pointer-events:none 由 shopMain hideMini 設定；預設不寫死 none，避免展開後仍無法將滑鼠移入面板；top 貼齊列底減少 icon 與浮層縫隙 */
.site-header__client .MiniCart {
    position: absolute !important;
    right: 0;
    top: 100%;
    width: 265px;
    height: 300px;
    /* [2026-04-14] 目的：手機／桌機皆需蓋過下方內容；勿用 30 否則在手機被後段規則覆寫時易壓不住 */
    z-index: 100;
    background-color: #fff;
    overflow: hidden;
    outline: none;
    border-radius: 10px;
    border: 1px solid #646565;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.2s ease, max-height 0.2s ease;
    /* [2026-04-09] 目的：列表區與結帳列垂直分配（併入同一規則，避免重複選擇器） */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.site-header__client .MiniCart .MiniCartInner {
    /* [2026-04-09] 目的：列表區佔滿剩餘高度並交給 niceScroll／內容捲動，減少「兩筆商品下方大塊空白」 */
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none;
    padding: 8px 12px 8px 14px;
    box-sizing: border-box;
}

/* [2026-04-09] 目的：迷你車項目容器（與 shopMain 寫入處一致） */
.site-header__client .MiniCart .MiniCartBlock {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-header__client .MiniCart .CartItem {
    height: auto !important;
    min-height: 0;
    padding: 8px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #f3f4f6;
}

.site-header__client .MiniCart .CartItem > a {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.site-header__client .MiniCart .CartItem .CartItemPhoto {
    float: none !important;
    flex-shrink: 0;
    /* [2026-04-11] 目的：與 nav .MiniCart 一致固定縮圖框，避免 .site-header__client 路徑未套到 nav 規則時圖片以內建尺寸爆版 */
    width: 53px;
    height: 53px;
    min-width: 53px;
    min-height: 53px;
    box-sizing: border-box;
}

.site-header__client .MiniCart .CartItem .CartItemPhoto img {
    display: block;
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    max-width: 100%;
    object-fit: cover;
    box-sizing: border-box;
}

.site-header__client .MiniCart .CartItem .CartItemData {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip;
    word-break: break-word;
}

.site-header__client .MiniCart .CartItem .CartItemData div {
    line-height: 1.45;
}

.site-header__client .MiniCart .CartItem .CartItemName {
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.35;
}

.site-header__client .MiniCart .CartItem .CartSpecContent {
    font-size: 12px;
    line-height: 1.45;
    color: #4b5563;
}

.site-header__client .MiniCart .CartItem .CartItemQTY {
    font-size: 12px;
    margin-top: 4px;
}

.site-header__client .MiniCart .MiniCartCheckout {
    flex-shrink: 0;
    border-top: 1px solid #646565;
    width: 100%;
    font-size: 15px;
    line-height: 52px;
    letter-spacing: 7px;
    cursor: pointer;
    text-align: center;
}

.site-header__client .MiniFuncList {
    position: absolute !important;
    right: 0;
    /* [2026-03-25] 目的：稍微往上，避免被 submenu 視窗蓋到 */
    top: calc(100% + 2px);
    width: 105px;
    z-index: 30;
    background-color: #fff;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #646565;
    display: none;
}

/* [2026-03-25] 目的：會員下拉選單加寬、每列左欄圖示對齊，與「只有第一列有圖」的雜亂感區隔 */
.site-header[data-store-header-shell] .site-header__client .MiniFuncList {
    width: auto;
    min-width: 208px;
    border-radius: 12px;
    border: 1px solid var(--store-header-border);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    /* [2026-03-25] 目的：下拉列表改為乾淨緊湊的全寬列 */
    padding: 6px 0;
}

/* [2026-03-25] 目的：MiniFuncList 最後一列可能是 span（登出），與 a 一起套用相同排版 */
.site-header[data-store-header-shell] .site-header__client .MiniFuncList a,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList span {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    /* [2026-03-25] 目的：icon 與文字間距固定，視覺更一致 */
    gap: 10px;
    box-sizing: border-box;
    padding: 10px 14px !important;
    margin: 0 !important;
    width: 100%;
    min-height: 42px;
    border-radius: 0;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 500;
    color: var(--store-header-text) !important;
    background: transparent !important;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.site-header[data-store-header-shell] .site-header__client .MiniFuncList a:hover,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList span:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

.site-header[data-store-header-shell] .site-header__client .MiniFuncList a::before,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList span::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: center / contain no-repeat;
    /* [2026-03-25] 目的：覆寫 header 主按鈕的 absolute 置中規則，避免 icon 跑到右上或錯位 */
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.site-header[data-store-header-shell] .site-header__client .MiniFuncList a.mini-func--member::before,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList span.mini-func--member::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.site-header[data-store-header-shell] .site-header__client .MiniFuncList a.mini-func--orders::before,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList span.mini-func--orders::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
}

.site-header[data-store-header-shell] .site-header__client .MiniFuncList a.mini-func--logout::before,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList span.mini-func--logout::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* [2026-03-25] 目的：下拉列用分隔線取代外距，避免「很醜」的留白感 */
.site-header[data-store-header-shell] .site-header__client .MiniFuncList a + a,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList span + span,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList a + span,
.site-header[data-store-header-shell] .site-header__client .MiniFuncList span + a {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* [2026-03-25] 目的：覆寫舊版 .MiniFuncListLine 固定高度，避免圖示/文字置中怪異與拉出空白 */
.site-header[data-store-header-shell] .site-header__client .MiniFuncList .MiniFuncListLine {
    height: auto !important;
    line-height: 1.2 !important;
    text-align: left !important;
    padding: 0 !important;
    border-bottom: none !important;
}

/* [2026-03-25] 目的：搜尋外層；手機佔滿次列 */
/* [2026-03-26] 目的：基底 flex:1 1 100% 僅限 ≤959px，避免桌機與其他 flex 規則疊加後搜尋寬度被吃掉（登入/註冊桌機有、手機無之落差） */
@media (max-width: 959px) {
    /* [2026-03-26] 目的：手機捲動聯動收合 header 時，避免 Scroll Anchoring 調整 scrollY 造成震盪閃爍（y 會在 1↔126 來回跳） */
    html, body {
        overflow-anchor: none;
    }

    .site-header[data-store-header-shell] .site-header__search-slot {
        flex: 1 1 100%;
        min-width: 0;
        order: 4;
    }

    /* [2026-03-26] 目的：捲動收合搜尋列到底時移除 flex row-gap，避免第二排「空」仍留一條縫 */
    .site-header[data-store-header-shell] .site-header__row--unified.site-header__row--scroll-slot-collapsed {
        row-gap: 0;
    }
}

@media (min-width: 960px) {
    /* [2026-03-26] 目的：桌機鎖定搜尋欄寬度與順序（!important 壓過舊版 TopMenu/nav 與快取殘留規則） */
    .site-header[data-store-header-shell] .site-header__search-slot {
        flex: 0 0 280px !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 280px !important;
        width: 280px !important;
        max-width: min(320px, 32vw) !important;
        min-width: min(240px, 28vw) !important;
        order: 0 !important;
    }
}

.site-header__search {
    position: relative;
    display: flex;
    align-items: center;
}

.site-header__search-input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 16px;
    border: 1px solid var(--store-header-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    color: var(--store-header-text);
    box-sizing: border-box;
}

.site-header__search-input::placeholder {
    color: #9a9a9a;
}

.site-header__search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--store-header-muted);
    pointer-events: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.primary-category-strip-wrap {
    margin: 0 -16px 8px;
    padding: 0 0 4px;
}

.primary-category-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 4px 16px 8px;
    scroll-padding: 16px;
}

.primary-category-strip__link {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--store-header-muted);
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.primary-category-strip__link:hover {
    color: var(--store-header-accent);
    background: rgba(0, 0, 0, 0.07);
}

.site-header__desktop {
    display: none;
}

@media (min-width: 960px) {
    /* [2026-03-25] 目的：電腦版已有 cbp TopMenu 主列，隱藏 pill 橫列，避免 T 恤／設計師／代工與主選單重複兩次 */
    .site-header[data-store-header-shell] .primary-category-strip-wrap {
        display: none;
    }

    .primary-category-strip-wrap {
        margin-left: 0;
        margin-right: 0;
    }

    /* [2026-03-25] 目的：主選單與搜尋同列，不再另加頂部分隔線 */
    .site-header__desktop {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        border-top: none;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-header__desktop-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px 16px;
        width: 100%;
        min-height: 44px;
        /* [2026-03-25] 目的：下移主選單，讓 submenu 不容易蓋到購物車浮層 */
        margin-top: 4px;
    }

    .site-header__desktop-nav .HeaderCenter {
        float: none !important;
        width: auto !important;
        max-width: none;
        flex: 1;
        min-width: 0;
        margin-top: 0 !important;
        text-align: left;
        display: block !important;
    }

    .site-header__desktop-right {
        float: none;
        width: auto;
        margin-top: 0;
        text-align: right;
        flex-shrink: 0;
        align-self: center;
    }

    /* [2026-03-25] 目的：覆寫全站舊版 nav #HeaderRight 的 float／寬度，與新版 flex 主列對齊 */
    .site-header[data-store-header-shell] #HeaderRight.site-header__desktop-right {
        float: none !important;
        width: auto !important;
        max-width: none;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }

    .site-header[data-store-header-shell] #HeaderRightTop,
    .site-header[data-store-header-shell] #HeaderRightBottom {
        float: none !important;
    }
}

.store-menu-source {
    display: none !important;
}

/* 手機：桌面 TopMenu 仍保留在 DOM 供解析，畫面上隱藏 */
@media (max-width: 959px) {
    .site-header__desktop {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

body.store-nav-open {
    overflow: hidden;
}

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.mobile-nav-overlay[hidden] {
    display: none !important;
}

.mobile-nav-overlay:not([hidden]) {
    pointer-events: auto;
}

.mobile-nav-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.45);
    backdrop-filter: blur(2px);
}

.mobile-nav-overlay__sheet {
    position: relative;
    width: min(100%, 420px);
    height: 100%;
    max-height: 100dvh;
    background: #faf8f6;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    z-index: 1;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}
    .mobile-nav-overlay__sheet ul{
        padding-left:0px;
    }
    .mobile-nav-overlay--open .mobile-nav-overlay__sheet {
        transform: translateX(0);
    }

.mobile-nav-overlay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 12px 8px;
    border-bottom: 1px solid var(--store-header-border);
    background: rgba(255, 255, 255, 0.65);
    flex-shrink: 0;
}

.mobile-nav-overlay__title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--store-header-text);
}

.mobile-nav-overlay__icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--store-header-accent);
    border-radius: 10px;
    cursor: pointer;
}

.mobile-nav-overlay__icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-nav-overlay__back {
    visibility: hidden;
}

.mobile-nav-overlay__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 24px;
    /* [2026-03-25] 目的：覆寫全站 body 置中，與「有子層列」左欄對齊一致 */
    text-align: left;
}

.mobile-nav-overlay__list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.mobile-nav-overlay__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-align: left;
}

.mobile-nav-overlay__link,
.mobile-nav-overlay__label-link {
    display: block;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--store-header-text);
    text-decoration: none;
    text-align: left;
    box-sizing: border-box;
}

.mobile-nav-overlay__row {
    display: flex;
    align-items: stretch;
    min-height: 52px;
}

.mobile-nav-overlay__row .mobile-nav-overlay__label-link {
    flex: 1;
    min-width: 0;
    padding-right: 12px;
    display: flex;
    align-items: center;
}

.mobile-nav-overlay__chev {
    flex: 0 0 52px;
    border: none;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--store-header-muted);
}

.mobile-nav-overlay__section {
    padding: 10px 20px 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--store-header-muted);
    /* [2026-03-25] 目的：子區塊標題不必全大寫，避免與主列視覺衝突 */
    text-transform: none;
    line-height: 1.35;
}

.mobile-nav-overlay__banner {
    display: block;
    width: calc(100% - 40px);
    max-height: 140px;
    margin: 12px auto 8px;
    object-fit: cover;
    border-radius: 12px;
}

/* [2026-03-25] 目的：mobile submenu 浮動視窗顯示完整第一~第四層
   作法：renderLeafPanel 會 clone 既有 cbp-hrsub DOM，因此需要覆寫其 absolute/none 以便在 overlay 內正常呈現。 */
.mobile-nav-overlay__detail .cbp-hrsub {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
}

.mobile-nav-overlay__detail .cbp-hrsub-inner {
    display: block !important;
}

/* [2026-03-25] 目的：讓 mobile detail 內的 banner 與標題列可以用 order 排版
   wrap 內目前順序是：rootLink（T恤）-> clone(.cbp-hrsub)，我們將用 order 讓標題列出現在 banner 下方。 */
.mobile-nav-overlay__detail {
    display: flex !important;
    flex-direction: column !important;
}

.mobile-nav-overlay__detail img.MenuBanner {
    /* [2026-03-25] 目的：手機版「banner」改成橫幅（圖寬、視覺輕盈） */
    display: block !important;
    width: calc(100% - 24px) !important;
    /* 16:9 橫幅：高度由寬度自動計算 */
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin: 12px auto 10px !important;
}

/* [2026-03-25] 目的：避免 leaf panel 出現「兩列 T恤」的重複來源 */
.mobile-nav-overlay__detail > a.mobile-nav-overlay__link {
    display: none !important;
}

/* [2026-03-25] 目的：隱藏 clone 裡第一層那個 T恤標題，避免與 rootLink 重複 */
.mobile-nav-overlay__detail .cbp-hrsub-inner > div > a {
    display: none !important;
}

/* [2026-03-25] 目的：leaf panel（點進 T恤後的第二層短袖列）要長得跟第一層一樣
   給 cloned 的 cbp-hrsub 裡每一列 anchor：左邊文字、右側往右箭頭、同樣 padding/分隔線。
   注意：renderLeafPanel clone 的是「.cbp-hrsub」本體，不一定包含外層 .cbp-hrmenu，所以 selector 不放 .cbp-hrmenu。 */
.mobile-nav-overlay__detail .cbp-hrsub-inner a[href] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* 跟第一層 row 同高度 */
    min-height: 52px !important;
    padding: 0 0 0 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--store-header-text) !important;
    text-decoration: none !important;
    text-align: left !important;
    gap: 12px !important;

    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* [2026-03-25] 目的：第二層/leaf panel 內 anchor 內的 h4 要跟第一層同字級與行距 */
.mobile-nav-overlay__detail .cbp-hrsub-inner a[href] h4 {
    font-size: 16px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.mobile-nav-overlay__detail .cbp-hrsub-inner a[href]::after {
    /* 右側灰底箭頭區（取代 mobile-nav-overlay__chev） */
    content: "";
    flex: 0 0 auto;
    margin-left: auto !important;
    width: 52px;
    height: 52px;
    background: rgba(0, 0, 0, 0.02);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    /* 預設先隱藏：只有「有下一層 ul」的項目才顯示箭頭 */
    display: none !important;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* 顯示箭頭：僅當該列容器的「直屬下一層 ul」內存在下一層連結（a[href]）時顯示
   避免模板即使產生空 ul 仍誤判。 */
.mobile-nav-overlay__detail .cbp-hrsub-inner li > div:has(> ul a[href]) > a[href]::after {
    display: block !important;
}

/* [2026-03-25] 目的：leaf panel banner 下方只顯示第二層（短袖）清單；
   隱藏 clone 裡第一層的標題列（T恤）但保留 banner 圖像（若圖像在同一個 a 裡）。 */
.mobile-nav-overlay__detail .cbp-hrsub-inner > div > a[href] {
    padding: 0 !important;
    min-height: 0 !important;
    border-bottom: none !important;
}

.mobile-nav-overlay__detail .cbp-hrsub-inner > div > a[href]::after {
    display: none !important;
}

.mobile-nav-overlay__detail .cbp-hrsub-inner > div > a[href] h4 {
    display: none !important;
}

.mobile-nav-overlay__detail .cbp-hrsub-inner > div > ul > li > div {
    float: none !important;
    margin: 0 !important;
    /* [2026-03-25] 目的：第二層與第一層對齊，不縮排 */
    padding-left: 0 !important;
    border-left: none !important;
}

.mobile-nav-overlay__detail .cbp-hrsub-inner > div > ul > li > div > ul > li div {
    /* [2026-03-25] 目的：第三層/第四層保留少量縮排，視覺更有階層 */
    margin-left: 10px !important;
}

.mobile-nav-overlay__empty {
    padding: 24px 20px;
    color: var(--store-header-muted);
    text-align: center;
}

.mobile-nav-overlay__fallback {
    padding: 12px 16px;
    font-size: 14px;
    text-align: left;
}

.site-header__lang-btn {
    border: 1px solid var(--store-header-border);
    background: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}

/* ── Menu 視覺層級強化 ────────────────────────────────────────
   目的：三層、四層選單自動套用字重/字色/縮排差異，不需改 HTML 結構。
   客戶無論設幾層，CSS 選擇器自動對應。
   ──────────────────────────────────────────────────────────── */

/* L2 以下的圖片全部隱藏（只保留欄位標題圖） */
.cbp-hrsub-inner > div > ul img.MenuBanner {
    display: none !important;
}

/* L2：中粗、深色 */
.cbp-hrsub-inner > div > ul > li > div > a {
    font-weight: 600 !important;
    color: #222 !important;
    font-size: 13px !important;
}

/* L3：縮排、灰色、小字 */
.cbp-hrsub-inner > div > ul > li > div > ul > li > div > a {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #777 !important;
    padding-left: 10px !important;
}

/* L4：更縮排、更淡 */
.cbp-hrsub-inner > div > ul > li > div > ul > li > div > ul > li > div > a {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #aaa !important;
    padding-left: 18px !important;
}