.cybex-swiper-gallery {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* Thumbnail area */
.cybex-thumbs {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Swiper container for thumbs */
.thumbs-swiper {
  width: 100px;
  height: 400px;
  position: relative;
  margin: 32px 0; /* so arrows don't overlap first/last thumbs */
}

/* Make sure thumbs are vertical */
.thumbs-swiper .swiper-wrapper {
  flex-direction: column !important;
}

/* Individual thumbnail style */
.thumbs-swiper .swiper-slide {
  width: 90px !important;
  height: 90px !important;
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border .2s;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.thumbs-swiper .swiper-slide-thumb-active,
.thumbs-swiper .swiper-slide:hover {
  border: 2px solid #000;
}

/* Thumbnail arrows */
.thumbs-swiper .swiper-button-prev,
.thumbs-swiper .swiper-button-next {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  color: #444;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbs-swiper .swiper-button-prev {
  top: -36px;
}

.thumbs-swiper .swiper-button-next {
  bottom: -36px;
}

/* Main image area */
.cybex-main-image {
  flex: 1 1 0;
  min-width: 0;
}

.main-swiper {
  width: 100%;
  height: 480px;
  position: relative;
}

.main-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
}

.main-swiper .swiper-button-prev,
.main-swiper .swiper-button-next {
  color: #333;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make the thumb list scrollable when too many thumbs */
.thumbs-swiper .swiper-wrapper {
   flex-direction: column !important;
}
.thumbs-swiper {
  width: 100px;
  height: 400px;
  padding: 40px 0;;
  position: relative;
  margin: 0;
}

.thumbs-swiper .swiper-button-prev,
.thumbs-swiper .swiper-button-next {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  color: #444;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}


.swiper-button-next:after, .swiper-button-prev:after{
  font-size: 14px!important;
}

.thumbs-swiper .swiper-button-prev {
  top: -20px;    /* Place up arrow above the first thumb */
}

.thumbs-swiper .swiper-button-next {
  bottom: -20px; /* Place down arrow below the last thumb */
}