/* Basic wrapper */
.eep-carousel-wrapper {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

/* main swiper container (swiper styles come from CDN) */
.eep-carousel-main .swiper-wrapper {
    align-items: center;
}
.eep-carousel-main .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.eep-slide-inner {
    overflow: hidden;
    display: block;
}
.eep-slide-inner img.eep-main-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* thumbnails */
.eep-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.eep-thumbs.bottom { flex-direction: row; }
.eep-thumbs.left, .eep-thumbs.right { flex-direction: column; max-height: 300px; overflow-y: auto; }

.eep-thumbs .eep-thumb-item {
    cursor: pointer;
    flex: 0 0 auto;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 2px;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}
.eep-thumbs .eep-thumb-item.active {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.eep-thumbs .eep-thumb-item img { display:block; width: 100%; height: auto; }

/* thumbnail sizes responsive: you can override in theme */
.eep-thumbs.bottom .eep-thumb-item { width: 80px; }
.eep-thumbs.left .eep-thumb-item, .eep-thumbs.right .eep-thumb-item { width: 72px; height: 72px; }

/* layout for left/right thumbnails */
.eep-carousel-wrapper.thumb-left {
    display: flex;
    gap: 12px;
}
.eep-carousel-wrapper.thumb-right {
    display: flex;
    gap: 12px;
    flex-direction: row-reverse;
}

/* ensure main swiper grows */
.eep-carousel-wrapper .swiper { flex: 1 1 auto; }

/* nav positioning */
.eep-nav .swiper-button-prev,
.eep-nav .swiper-button-next {
    color: inherit;
}

/* make it flexible for theme: inherit font/color */
.eep-carousel-wrapper img { max-width:100%; height:auto; }

/* responsive grid: when thumbnails bottom, stack nicely */
@media (max-width: 768px) {
    .eep-thumbs.bottom .eep-thumb-item { width: 60px; }
    .eep-thumbs.left, .eep-thumbs.right { display: none; } /* hide side thumbs on small screens */
}