/**
 * JOSE956 自訂分類選單樣式
 * 只在手機版顯示（類似 mouggan 風格）
 */

/* 預設隱藏（電腦版不顯示） */
.jose956-custom-menu-wrap {
    display: none;
}

/* ===============================================
   手機版樣式 - 只在手機版顯示
   =============================================== */
@media (max-width: 991px) {
    /* 選單外層容器 */
    .jose956-custom-menu-wrap {
        display: block;
        background: #fff;
        border-bottom: 1px solid #eee;
        position: relative;
        z-index: 100;
    }

    /* 選單內層 */
    .jose956-custom-menu {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 55px;
        padding: 5px 25px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .jose956-custom-menu::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    /* 選單項目 */
    .jose956-menu-item {
        color: #333;
        text-decoration: none;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.5px;
        white-space: nowrap;
        padding: 5px 0;
        transition: all 0.2s ease;
    }

    .jose956-menu-item:hover,
    .jose956-menu-item:active {
        color: #000;
    }

    /* 活動狀態 - 粗體表示 */
    .jose956-menu-item.active {
        color: #000;
        font-weight: 600;
    }
}

/* 小螢幕手機 */
@media (max-width: 480px) {
    .jose956-custom-menu {
        gap: 35px;
        padding: 8px 12px;
    }

    .jose956-menu-item {
        font-size: 12px;
    }
}

/* ===============================================
   特殊效果（可選）
   =============================================== */

/* 強調項目 - 紅色 */
.jose956-menu-item.highlight {
    color: #e74c3c;
}

.jose956-menu-item.highlight:hover {
    color: #c0392b;
    border-bottom-color: #c0392b;
}

/* NEW 標籤 */
.jose956-menu-item.new::after {
    content: 'NEW';
    font-size: 8px;
    background: #e74c3c;
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 5px;
    vertical-align: super;
}

/* ===============================================
   修正: 防止 shop-loop-head 被自訂選單蓋住
   =============================================== */
@media (max-width: 991px) {
    /* 當自訂選單存在時，補償 shop-loop-head 的負 margin */
    .jose956-custom-menu-wrap + .main-page-wrapper .shop-loop-head,
    .jose956-custom-menu-wrap ~ .container .shop-loop-head,
    body.woocommerce .shop-loop-head {
        margin-top: 10px !important;
    }
}