/**
 * WooCommerce Product Tabs - Horizontal Scroll Styles
 * タブが複数ある場合でも1行に表示し、横スクロール可能にする
 */

/* デスクトップ・タブレット向けスタイル (768px以上) */
@media screen and (min-width: 768px) {
    /* タブコンテナを横スクロール可能にする */
    .woocommerce div.product .woocommerce-tabs {
        overflow: hidden;
        position: relative;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0;
        padding: 0;
        position: relative;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #ddd #f5f5f5;
    }

    /* スクロールバーのスタイリング (Webkit) */
    .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
        height: 6px;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar-track {
        background: #f5f5f5;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 3px;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar-thumb:hover {
        background: #ccc;
    }

    /* タブアイテムのスタイル調整 */
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin: 0;
        white-space: nowrap;
    }

    /* タブリンクのスタイル */
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        display: block;
        padding: 1em 1.5em;
        white-space: nowrap;
    }

    /* タブパネルの調整 */
    .woocommerce div.product .woocommerce-tabs .panel {
        margin-top: 0;
    }

    /* スクロール可能な場合の視覚的ヒント（グラデーション） - 削除済み */
    /* .woocommerce div.product .woocommerce-tabs::before,
    .woocommerce div.product .woocommerce-tabs::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 30px;
        pointer-events: none;
        z-index: 2;
    }

    .woocommerce div.product .woocommerce-tabs::before {
        left: 0;
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    }

    .woocommerce div.product .woocommerce-tabs::after {
        right: 0;
        background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    } */
}

/* モバイル向けスタイル (767px以下) */
@media screen and (max-width: 767px) {
    /* モバイルでも横スクロールを維持 */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* モバイルではスクロールバーを非表示 */
    }

    /* モバイルでスクロールバーを非表示 */
    .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
        display: none;
    }

    /* タブアイテムのスタイル */
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        flex: 0 0 auto;
        margin: 0;
        border-right: 1px solid #ddd;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li:last-child {
        border-right: none;
    }

    /* タブリンクのスタイル（モバイル用に調整） */
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        /* padding: 0.8em 1.2em; */
        font-size: 0.9em;
        white-space: nowrap;
    }

    /* スクロール可能であることを示すインジケーター */
    .woocommerce div.product .woocommerce-tabs {
        position: relative;
        overflow: hidden;
    }

    /* 右端にスクロール可能を示すグラデーション - 削除済み */
    /* .woocommerce div.product .woocommerce-tabs::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to left, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
        pointer-events: none;
        z-index: 1;
    } */
}

/* 全画面サイズ共通のスタイル */
/* アクティブなタブの強調 */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: #fff;
    border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    font-weight: bold;
    color: #333;
}

/* タブホバー効果 */
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover {
    background-color: #f9f9f9;
}

/* タブコンテンツエリアの調整 */
.woocommerce div.product .woocommerce-tabs .panel {
    clear: both;
}

/* Arkheテーマとの互換性調整 */
.arkhe .woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
}

/* タブが4つ以上ある場合の最適化 */
.woocommerce div.product .woocommerce-tabs ul.tabs:has(li:nth-child(4)) li a {
    /* padding: 1em 1.2em; */
}

/* タブが5つ以上ある場合のさらなる最適化 */
.woocommerce div.product .woocommerce-tabs ul.tabs:has(li:nth-child(5)) li a {
    /* padding: 1em 1em; */
    font-size: 0.95em;
}