.jbm-list {
    --jbm-list-columns: 1.5;
    --jbm-list-gap: 12px;
    container: jbm-list / inline-size;
    inline-size: 100%;
    min-inline-size: 0;
    margin-block: 20px;
    font-family: inherit;
    color: inherit;
}

.jbm-list[hidden],
.jbm-list [hidden] { display: none !important; }

.jbm-list .jbm-list__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 14px;
}

.jbm-list .jbm-list__title {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 700;
    line-height: 1.7;
}

.jbm-list .jbm-list__actions,
.jbm-list .jbm-list__navigation {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jbm-list .jbm-list__actions { margin-inline-start: auto; }
.jbm-list .jbm-list__all { color: #2b53a0; font-size: 12px; }

.jbm-list .jbm-list__navigation button {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    background: #fff;
    color: #2b53a0;
    cursor: pointer;
    box-shadow: none;
}

.jbm-list .jbm-list__navigation button:hover { background: #f3f6fb; }
.jbm-list .jbm-list__navigation button:disabled { opacity: .35; cursor: default; }
.jbm-list .jbm-list__navigation .jbm-list__button--locked { display: none; }
.jbm-list button:focus-visible,
.jbm-list a:focus-visible { outline: 2px solid #2b53a0; outline-offset: 3px; }

/* Scoped Swiper layout: no global .swiper overrides or icon font. */
.jbm-list .jbm-list__viewport {
    position: relative;
    min-inline-size: 0;
    padding: 2px 0 5px;
}

.jbm-list .swiper { display: block; overflow: hidden; z-index: 1; touch-action: pan-y; }
.jbm-list .swiper-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    box-sizing: content-box;
    inline-size: 100%;
    block-size: 100%;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
}

.jbm-list .swiper-slide {
    position: relative;
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    inline-size: 100%;
    block-size: auto;
    transition-property: transform;
}

.jbm-list .jbm-list__slide { display: flex; min-inline-size: 0; }
.jbm-list .jbm-list__slide > .jbm-card {
    display: flex;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
    margin: 0;
}

.jbm-list .jbm-card .jbm-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    inline-size: 100%;
    min-inline-size: 0;
}

/* Equal heights and price alignment belong to the list container. */
.jbm-list .jbm-card .jbm-card__price { margin-block-start: auto; }
.jbm-list .jbm-card .jbm-card__current { max-inline-size: 100%; }
.jbm-list .jbm-card .woocommerce-Price-amount { white-space: normal; overflow-wrap: normal; word-break: normal; }
.jbm-list .jbm-card .woocommerce-Price-currencySymbol { display: inline-block; white-space: nowrap; }

.jbm-list .swiper-notification {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Usable horizontal scrolling before initialization, without JS, or if it fails. */
.jbm-list .swiper:not(.swiper-initialized) { touch-action: auto; }
.jbm-list .swiper:not(.swiper-initialized) .swiper-wrapper {
    gap: var(--jbm-list-gap);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    padding-block-end: 5px;
}
.jbm-list .swiper:not(.swiper-initialized) .swiper-slide {
    inline-size: calc((100% - (var(--jbm-list-columns) - 1) * var(--jbm-list-gap)) / var(--jbm-list-columns));
    scroll-snap-align: start;
}

.jbm-list--grid .jbm-list__track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

@container jbm-list (min-width: 520px) {
    .jbm-list .jbm-list__viewport { --jbm-list-columns: 2.5; }
    .jbm-list--grid .jbm-list__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container jbm-list (min-width: 740px) {
    .jbm-list .jbm-list__viewport { --jbm-list-columns: 3; --jbm-list-gap: 16px; }
    .jbm-list--grid .jbm-list__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@container jbm-list (min-width: 960px) {
    .jbm-list .jbm-list__viewport { --jbm-list-columns: 4; }
    .jbm-list--grid .jbm-list__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container jbm-list (min-width: 1120px) {
    .jbm-list .jbm-list__viewport { --jbm-list-columns: var(--jbm-desktop-columns, 5); }
    .jbm-list--grid .jbm-list__track { grid-template-columns: repeat(var(--jbm-desktop-columns, 5), minmax(0, 1fr)); }
}