/* ===== PBC – Product Swiper (Swiper v11) ===== */

/* ── Konténer + változók (egy helyen) ───────────────────────────── */
.pbc-product-swiper-wrap {
    /* layout változók */
    --gap: 24px;
    /* ugyanannyi, mint JS spaceBetween desktopon */
    --peek: 60px;
    /* ennyit „lógjon be” jobbra desktopon */

    position: relative;
    padding: 24px 0 0;
    width: 100%;
    overflow-x: hidden;
    /* ne legyen horizontális görgetés */
    padding-right: var(--peek);
    /* így a „peek” a konténeren belül marad */
}

@media (max-width:1199px) {
    .pbc-product-swiper-wrap {
        --gap: 20px;
        --peek: 50px;
        padding-right: var(--peek);
    }
}

@media (max-width:767px) {
    .pbc-product-swiper-wrap {
        --gap: 12px;
        --peek: 40px;
        padding-right: var(--peek);
    }
}

/* ── Fejléci vezérlők ───────────────────────────────────────────── */
.pbc-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    /* nav balra */
    gap: 16px;
    margin-bottom: 12px;
    width: 100%;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
    width: auto !important;
}

/* Nyilak */
.pbc-nav {
    display: flex;
    gap: 10px;
}

.pbc-prev,
.pbc-next {
    all: unset;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 999px;
    transition: transform .15s, opacity .15s, box-shadow .2s;
    color: #c31a1a;
    border: 1px solid transparent;
    outline: 0;
}

.pbc-prev:hover,
.pbc-next:hover {
    transform: translateY(-1px);
    opacity: .9;
}

.pbc-nav button.is-pressed {
    transform: scale(.96);
}

.pbc-nav button.is-active {
    box-shadow: 0 0 0 2px currentColor inset;
}

.pbc-nav button.is-disabled {
    opacity: .35;
    pointer-events: none;
}

/* Bulletek */
.pbc-pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto !important;
    /* pagination jobbra */
}

.pbc-bullet {
    display:none;
    /*width: 15px;
    height: 15px;
    border-radius: 999px;
    border: 1px solid #d9d9d9;
    opacity: .6;
    display: inline-block;
    transition: opacity .2s, transform .2s;
    cursor: pointer;*/
}

.pbc-bullet:hover {
    opacity: .8;
    transform: scale(1.05);
}

.pbc-bullet-active {
    background: #c31a1a;
    border-color: #c31a1a;
    opacity: 1;
}

/* ── Swiper tartalom + „peek” logika ────────────────────────────── */
.pbc-product-swiper {
    overflow: visible;
}

/* a kikandikáló elem látszódjon */
.pbc-product-swiper .swiper-wrapper {
    align-items: stretch;
    will-change: transform;
}

/* DESKTOP (>=1200px): 2 teljes kártya + jobbra peek */
@media (min-width:1200px) {
    .pbc-product-swiper .swiper-slide {
        /* 2 * width + 1 * gap + 1 * peek = 100% */
        width: calc((100% - var(--gap) - var(--peek)) / 2);
    }
}

/* <1200px: 1 teljes kártya + jobbra peek */
@media (max-width:1199px) {
    .pbc-product-swiper .swiper-slide {
        /* 1 * width + 1 * peek = 100% (a gap-et a Swiper kezeli) */
        width: calc(100% - var(--peek));
    }
}

/* apró simítások */
.pbc-product-swiper .swiper-slide {
    height: auto;
    transition: opacity .15s ease;
}

/* ── Képarányok ─────────────────────────────────────────────────── */
.pbc-slide-fig {
    margin: 0;
    aspect-ratio: 3/4;
    overflow: hidden;
    
    background: #f5f5f5;
}

.pbc-slide-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width:767px) {
    .pbc-slide-fig {
        aspect-ratio: 4/5;
    }
}