:root {
  --swiper-navigation-size: 2rem;
  --swiper-theme-color: #808080;
}

.m4d-product-media {
  width: 100%;
}

/* MAIN */
.m4d-main-swiper {
  width: 100%;
}

.m4d-main-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.m4d-main-swiper img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* THUMBS */
.m4d-thumb-swiper {
  width: 100%;
  margin-top: 1rem;
  --m4d-thumb-spacing: 1rem;
}

/* This is the critical part: prevent slides from being 100% width */
.m4d-thumb-swiper .swiper-slide {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.m4d-thumb-swiper img {
  display: block;
  height: 70px;
  width: auto;
  max-width: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.m4d-thumb-swiper .swiper-slide-thumb-active img {
  opacity: 1;
}

.m4d-thumb-swiper .swiper-wrapper {
  cursor: grab;
  padding-right: 0;
}

.m4d-thumb-swiper.is-grabbing,
.m4d-thumb-swiper.is-grabbing .swiper-wrapper,
.m4d-thumb-swiper.is-grabbing .swiper-slide {
  cursor: grabbing;
}

/* Pagination */
.m4d-thumb-swiper .swiper-pagination {
  position: relative;
  margin-top: 1rem;
  font-size: 0.75rem;
  top: 0;
  bottom: 0;
}

.m4d-thumb-swiper .swiper-pagination-bullet {
  margin-right: 0.125em;
  margin-left: 0.125em;
  background-color: #ea3829;
  opacity: 0.25;
  transition: all 0.3s ease;
  cursor: pointer;
}

.m4d-thumb-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.m4d-thumb-swiper .swiper-pagination-bullet:hover {
  background-color: #bb2d21;
  opacity: 1;
}

.m4d-thumb-swiper .swiper-button-next, .m4d-thumb-swiper .swiper-button-prev {
  transition: all 0.3s ease;
  cursor: pointer;
}

.m4d-thumb-swiper .swiper-button-next:hover, .m4d-thumb-swiper .swiper-button-prev:hover {
  background-color: #bb2d21;
  opacity: 1;
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
  .m4d-thumb-swiper .swiper-wrapper {
    margin-right: calc(-1 * var(--m4d-thumb-spacing));
  }
}

@media only screen and (max-width: 1024px) {
  .m4d-thumb-swiper .swiper-slide {
    width: calc((100% - 3rem) / 4) !important;
  }

  .m4d-thumb-swiper img {
    width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 768px) {
  .m4d-thumb-swiper .swiper-slide {
    width: calc((100% - (2 * var(--m4d-thumb-spacing))) / 3) !important;
  }

  .m4d-thumb-swiper img {
    width: 100%;
    height: auto;
  }
}