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

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

/* Align mixed promo badges across sibling product cards. */
[data-product-card-block] .product-card {
    --product-card-badge-offset: 0px;
}

[data-product-card-block]:has(.product-card [data-product-card-badge]:not([hidden])) .product-card:not(:has([data-product-card-badge]:not([hidden]))) {
    margin-top: var(--product-card-badge-offset);
}

[data-product-card-block]:has(.product-card [data-product-card-badge]:not([hidden])) :is(.swiper-slide, [data-loadmore-card]) .product-card:not(:has([data-product-card-badge]:not([hidden]))) {
    height: calc(100% - var(--product-card-badge-offset)) !important;
}

/* 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;
    }
}