/*
|--------------------------------------------------------------------------
| Pattern: Product Card
|--------------------------------------------------------------------------
|
| Scaffolding: assets/css/template-parts/block-productCard.css
*/

/* ── Carousel overrides ── */
/* Aligning is now managed by utility classes directly on the element */

/* common-scrollbar sizing inside productCard */
.common-scrollbar--product-card {
    --common-scrollbar-thumb-seam-color: var(--color-white, #fff);
    --common-scrollbar-btn-size: 44px;
    gap: 20px;
}

.common-scrollbar--product-card .common-scrollbar__controls {
    gap: 24px;
}

@media (min-width: 1280px) {
    .common-scrollbar--product-card {
        gap: 32px;
    }
}

/* ── LoadMore: card hidden on mobile only ─────────────────────────────
 * Cards at index ∈ [mobileInitial, desktopInitial) are marked with
 * data-loadmore-mobile-only. They are hidden on mobile while collapsed
 * and revealed when the grid switches to data-loadmore-expanded="true".
 * On md+ the attribute has no effect (rule is scoped under max-width:767). */
.product-card-loadmore__item:not(.hidden) {
    display: flex;
}

@media (max-width: 767px) {
    [data-loadmore-card][data-loadmore-mobile-only] {
        display: none;
    }

    [data-loadmore-grid][data-loadmore-expanded="true"] [data-loadmore-card][data-loadmore-mobile-only] {
        display: flex;
    }
}