/**
 * 商品詳情頁手機版修正
 * 建立：2026-08-13
 *
 * 問題：優惠說明（info_blocks 模組）在手機上一條一行，4 條佔掉 108px，
 *       把價格推到 867px —— 而手機螢幕只有 844px，
 *       **客人第一眼看不到價格，得先捲動才知道多少錢**。
 *
 * 修法：優惠說明改成單列橫向捲動。資訊一條都沒少，只是改成用滑的。
 *       右緣會露出下一條的一角，看得出可以滑。
 *
 * 驗證（dev2, 390×844）：
 *   優惠說明 108px → 31px，價格 867 → 790，回到第一屏內。
 *   scrollWidth 530 > clientWidth 295，橫向捲動確實生效。
 *
 * 註：scope 限定 .module-info_blocks，因為單一商品頁上有 13 個 .module-body，
 *     用通用選擇器會誤傷其他模組。
 */

@media (max-width: 767px) {

    .module-info_blocks .module-body {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* Journal3 原本是 justify-content:center，內容一旦超出容器就會
           左右各溢出一半 —— 第一條標籤會跑到容器左緣外 235px 看不見，
           而且 scrollLeft 是 0 所以使用者也滑不回去。必須改成靠左。 */
        justify-content: flex-start !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .module-info_blocks .module-body::-webkit-scrollbar {
        display: none;
    }

    .module-info_blocks .module-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .module-info_blocks .info-block-title {
        white-space: nowrap !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
}