/**
 * MSBG – Mobile Header (only)
 * 只負責手機版 Header 排版，不含豪華手機選單
 *
 * 斷點：max-width: 991.98px
 */

@media (max-width: 991.98px) {

    /* ===============================
       Mobile Header Layout
       =============================== */

    /* 整體 header 間距微調，讓手機版更緊湊 */
    .site-header.site-header--modern {
        position: sticky;
        top: 0;
        z-index: 999;
        
        /* === GPU 硬體加速優化 === */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
    }

    .site-header__inner {
        padding: 0 12px 6px;
    }

    /* LOGO 行 */
    .site-header__logo-row {
        padding-top: 10px;
        padding-bottom: 4px;
    }

    .site-header__logo-inner {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .site-header__logo-inner img {
        max-height: 54px;
        height: auto;
        width: auto;
    }

    /* 第二行：導航與操作區 */
    .site-header__nav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 0;
        padding-bottom: 6px;
    }

    .site-header__col {
        display: flex;
        align-items: center;
    }

    .site-header__col--nav {
        flex: 0 0 auto;
    }

    .mj-primary-nav {
        display: none;
    }

    .site-header__col--actions {
        flex: 1 1 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
    }

    /* 按鈕樣式 */
    .mj-header-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(12, 12, 15, 0.72);
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    }

    .mj-header-link:hover,
    .mj-header-link:focus-visible {
        background: rgba(26, 26, 32, 0.9);
        border-color: rgba(255, 255, 255, 0.32);
        transform: translateY(-1px);
    }

    .mj-header-link__label {
        display: inline-block;
    }

    /* 購物車數量 */
    .mj-header-link--cart {
        position: relative;
        padding-right: 16px;
    }

    .mj-header-cart-count {
        position: absolute;
        top: -4px;
        right: -2px;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        border-radius: 999px;
        background: #e63946;
        color: #fff;
        font-size: 11px;
        line-height: 16px;
        text-align: center;
        font-weight: 600;
        box-shadow: 0 0 0 1px rgba(12, 12, 15, 0.9);
    }

    /* ===============================
       [修正] 手機選單按鈕：手機上必須顯示
       =============================== */
    .mj-header-link--menu {
        display: inline-flex; /* 原本是 none，已修正為 inline-flex */
    }
}


/* 小螢幕微調 */
@media (max-width: 420px) {
    .site-header__inner {
        padding-left: 8px;
        padding-right: 8px;
    }

    .site-header__nav-row {
        gap: 8px;
    }

    .site-header__col--actions {
        gap: 6px;
    }

    .mj-header-link {
        font-size: 12px;
        padding: 7px 8px;
    }

    .mj-header-link--cart {
        padding-right: 14px;
    }

    .mj-header-cart-count {
        top: -3px;
        right: -3px;
    }
}

/* ===================================================
   Desktop: 隱藏手機選單按鈕 (大於 992px)
   =================================================== */
@media (min-width: 992px) {
    .mj-header-link--menu {
        display: none !important; /* 強制隱藏 */
    }
}

/* ======================================================
   Mobile Menu Fix – Prevent Visual Offset
   Scope: Mobile only
   Issue: sub-menu left:50% causes page visual shift
   ====================================================== */

@media (max-width: 767px) {

  /* Header / Mobile menu only — avoid affecting footer/other navs */
  .site-header .sub-menu,
  .msbg-mobile-menu .sub-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-left: 0 !important;
  }

}