/**
 * 首頁商品列「橫向滑動」（2026-10-07）
 * 後台「網站佈局順序」每一列的樣式選「滑動」時，這一列外框帶 data-wx-style="slide"（partials/wx_category_section.php）：
 * 商品排成一行、左右滑（手機用手指滑、電腦用下方的細捲軸或觸控板）；選「網格」（預設）就維持 wx-home-product-grid.css 的固定欄數。
 * 每屏看到的張數跟網格的欄數一樣：電腦 6、平板 4、手機約 2.4（多露出一點讓人知道可以滑）。
 * 後台即時預覽（body.live-preview-mode）也同樣處理，並由 preview-sync.js 在後台切換時即時換 data-wx-style。
 */
:is(
    body.store-front-container,
    body.live-preview-mode.store-front-container
) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 14px !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

:is(
    body.store-front-container,
    body.live-preview-mode.store-front-container
) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid > .product-card-item-wrap,
:is(
    body.store-front-container,
    body.live-preview-mode.store-front-container
) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid > .product-card-wrapper {
    flex: 0 0 calc((100% - 5 * 16px) / 6) !important;
    width: calc((100% - 5 * 16px) / 6) !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: start;
}

:is(
    body.store-front-container,
    body.live-preview-mode.store-front-container
) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid::-webkit-scrollbar {
    height: 6px;
}
:is(
    body.store-front-container,
    body.live-preview-mode.store-front-container
) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
    border-radius: 999px;
}

@media (min-width: 768px) and (max-width: 1199px) {
    :is(
        body.store-front-container,
        body.live-preview-mode.store-front-container
    ) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid > .product-card-item-wrap,
    :is(
        body.store-front-container,
        body.live-preview-mode.store-front-container
    ) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid > .product-card-wrapper {
        flex-basis: calc((100% - 3 * 16px) / 4) !important;
        width: calc((100% - 3 * 16px) / 4) !important;
    }
}

@media (max-width: 767px) {
    :is(
        body.store-front-container,
        body.live-preview-mode.store-front-container
    ) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid {
        gap: 12px !important;
    }
    :is(
        body.store-front-container,
        body.live-preview-mode.store-front-container
    ) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid > .product-card-item-wrap,
    :is(
        body.store-front-container,
        body.live-preview-mode.store-front-container
    ) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid > .product-card-wrapper {
        flex-basis: calc((100% - 12px) / 2.4) !important;
        width: calc((100% - 12px) / 2.4) !important;
    }
}

/* 沒有商品的提示（「目前尚無此分類商品」）不要被撐成一格 */
:is(
    body.store-front-container,
    body.live-preview-mode.store-front-container
) .product-slider-section-container.wx-home-section-grid[data-wx-style="slide"] .wx-home-product-grid__empty {
    flex: 1 1 100% !important;
}