/* T1B-391 — Colour slider on the checkout product image.
   Mirrors the Smart Band checkout-v1a reference (herzp1/smartband/css/v1a_custom.css):
   Swiper 11, dots at the bottom, overlay prev/next arrows. On the reference the
   "SOLD OUT" pill, the 90-day / price-drop badges and the "Color:" label are baked
   into the slide PNGs; here they are HTML overlays positioned inside each slide.
   Insets (~4% / ~5.3%) and badge width (15.9%) match the badges that used to be
   baked into the Wamoma main image (2000x1579). */

.color-slider {
  position: relative;
  width: 100%;
}

.color-slider__main {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 20px; /* Figma: image 570x450, radius 20 */
  overflow: hidden;
}

.color-slider__slide {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1579;
  background: #fff;
  overflow: hidden;
}

.color-slider .color-slider__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Sold out" pill — top left */
.color-slider__soldout {
  position: absolute;
  top: 5.3%;
  left: 4.2%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 6px;
  background: #deff96;
  color: #000;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.color-slider__flame {
  flex: none;
  width: 11px;
  height: 15px;
  fill: #000;
}

/* Badges: 90-day top right, price-drop bottom left. Insets and the 15.9% width
   match the badges that used to be baked into the Wamoma main image. */
.color-slider .color-slider__badge {
  position: absolute;
  z-index: 3;
  display: block;
  width: 15.9%;
  height: auto;
}

.color-slider .color-slider__badge--guarantee {
  top: 5.3%;
  right: 3.8%;
}

.color-slider .color-slider__badge--price {
  left: 4.2%;
  bottom: 5.2%;
}

/* "Color: Black" — bottom right (ticket) */
.color-slider__color {
  position: absolute;
  right: 3.8%;
  bottom: 6%;
  z-index: 3;
  color: #000;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.color-slider__color b {
  font-weight: 700;
}

/* Pagination dots (reference values) */
.color-slider [swiper="slider-main"] > .swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: auto;
}

.color-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #000;
  opacity: 0.3;
  margin: 0 3px;
}

.color-slider .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Overlay navigation arrows (reference values) */
.color-slider .swiper__button-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #0000005e;
  cursor: pointer;
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}

.color-slider .swiper__button-overlay:hover {
  background-color: #00000099;
}

.color-slider .swiper__button-overlay--prev {
  left: 0.5rem;
}

.color-slider .swiper__button-overlay--next {
  right: 0.5rem;
}

.color-slider .swiper__button-overlay img {
  display: block;
  width: 7px;
  height: 13px;
}

.color-slider .arrow-left {
  rotate: 180deg;
  margin-left: -3px;
}

.color-slider .arrow-right {
  margin-left: 3px;
}

/* Tablet / mobile: the left column image is full-bleed with no radius
   (see .olympus-checkout__left-slider rules in checkout.html). */
@media screen and (max-width: 991px) {
  .color-slider__main,
  .color-slider__slide {
    border-radius: 0;
  }
}

@media screen and (max-width: 600px) {
  .color-slider__soldout {
    padding: 6px 8px;
    font-size: 11px;
    gap: 5px;
  }

  .color-slider__flame {
    width: 9px;
    height: 12px;
  }

  .color-slider__color {
    font-size: 14px;
  }

}

@media screen and (max-width: 400px) {
  .color-slider .swiper__button-overlay {
    width: 28px;
    height: 28px;
  }
}