/*************************************************************************************************************************
    Multi SKU Spec Table - Mobile Horizontal Scroll - No Sticky V8
    修改基準：
    Multi SKU Table_for Mobile_2605221.css

    用途：
    1. 只處理 Specifications tab 裡含有 .value.multi-value 的 spec table。
    2. 手機版保留桌機表格欄位邏輯，改用橫向捲動避免文字互相覆蓋。
    3. 暫時不使用 fixed / sticky，避免 colspan title 與其它表格狀態互相影響。
    4. 不重置所有 td border，避免影響整體表格線條。
    5. 只針對 .spec-value-grid 補左右邊界線。
    6. 不改 HTML、不改 JS、不影響資料來源。
*************************************************************************************************************************/

@media (max-width: 767px) {

    /*********************************************************************************************************************
        1. 外層容器
        說明：
        只針對 Specifications tab 裡「含有 .value.multi-value」的 spec table 啟用橫向捲動。
        目前不做 sticky / fixed，只讓整張表格自然左右滑動。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px !important;
    }

    /*********************************************************************************************************************
        2. 目標表格
        說明：
        表格寬度 = 左欄 120px + 右側 Multi SKU 560px。
        這裡維持 table 原本邏輯，不改 display，不重置 td 全域邊線。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table {
        width: 680px !important;
        min-width: 680px !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        background: #fff !important;
    }

    /*********************************************************************************************************************
        3. 大分類列
        目標：
        Power Plug、Physical Properties 這類 colspan="2" 的分類列。

        說明：
        暫時不固定，跟著整張表格一起橫向滑動。
        只處理文字正常換行，不介入 sticky / fixed。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table td.title[colspan] {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;

        padding: 12px 14px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        background: #fff !important;
    }

    /*********************************************************************************************************************
        4. 左側規格名稱欄
        目標：
        Country、Plug Type、Interfaces、Housing、Weight、Dimensions... 等左側欄位。

        說明：
        這版不使用 sticky / fixed。
        只固定欄寬，避免手機版文字被壓縮到互相覆蓋。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table td.subtitle,
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table td.title:not([colspan]) {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        box-sizing: border-box !important;

        padding: 10px 12px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        background: #fff !important;
    }

    /*********************************************************************************************************************
        5. Multi SKU 左側欄位
        目標：
        Country / Plug Type 這種右側是 td.value.multi-value 的列。

        說明：
        這兩列的右側分隔線改由 .spec-value-grid 的 inset shadow 補。
        這樣避免左側 td border 與 grid 邊界線疊在一起變粗。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table tr:has(> td.value.multi-value) > td.subtitle,
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table tr:has(> td.value.multi-value) > td.title:not([colspan]) {
        border-right: 0 !important;
    }

    /*********************************************************************************************************************
        6. 一般 value 欄位
        目標：
        Interfaces = DVI to HDMI、Housing = Plastic、Weight = 30 g... 等非 multi-value 的右側欄位。

        說明：
        右側內容欄給足寬度，避免文字被壓縮後互相覆蓋。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table td.value:not(.multi-value) {
        min-width: 560px !important;
        box-sizing: border-box !important;

        padding: 10px 14px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        background: #fff !important;
    }

    /*********************************************************************************************************************
        7. Multi SKU value 外層欄位
        目標：
        td.value.multi-value，也就是 Country / Plug Type 右側整包 SKU 欄位。

        說明：
        padding 歸零，讓內部 .spec-value-grid 自己控制 SKU 欄位與欄線。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table td.value.multi-value {
        min-width: 560px !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        background: #fff !important;
    }

    /*********************************************************************************************************************
        8. Multi SKU 欄位容器
        目標：
        .spec-value-grid 是 td.value.multi-value 裡面真正承載 US / EU / KR / TW / JP 的 grid 容器。

        修正：
        1. 後台目前會輸出 --spec-value-count: 5。
        2. 用固定欄寬 112px，讓 5 欄剛好是 560px。
        3. 用 inset box-shadow 補左右邊界線，不影響寬度，也不改 td 原本線條。
        4. 左線補 Country / Plug Type 與第一個 SKU 欄位中間的界線。
        5. 右線補 JP 右側界線。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table .spec-value-grid {
        display: grid !important;
        grid-template-columns: repeat(var(--spec-value-count), 112px) !important;

        width: 560px !important;
        min-width: 560px !important;
        max-width: 560px !important;
        box-sizing: border-box !important;

        background: #fff !important;
        box-shadow:
            inset 1px 0 0 #dbdbdb,
            inset -1px 0 0 #dbdbdb !important;
    }

    /*********************************************************************************************************************
        9. 單一 SKU 欄位
        目標：
        US、EU、KR、TW、JP
        US plug、EU plug、KR plug、TW plug、JP plug

        說明：
        欄位之間的分隔線由第二個 SKU 開始畫左線。
        第一個 SKU 左線由 .spec-value-grid 的 inset left shadow 負責。
        最後一欄右線由 .spec-value-grid 的 inset right shadow 負責。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table .spec-value-item {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        box-sizing: border-box !important;

        padding: 10px 12px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;

        background: #fff !important;
        border-left: 1px solid #dbdbdb !important;
    }

    /*********************************************************************************************************************
        10. 第一個 SKU 欄位
        說明：
        第一條分隔線已由 .spec-value-grid 的 inset left shadow 負責。
        第一個 SKU 不重複畫線，避免線條變粗。
    *********************************************************************************************************************/
    #specification-tab > .container:has(table.spec_table .value.multi-value) table.spec_table .spec-value-item:first-child {
        /* border-left: 0 !important; */
    }
}