/*
 * Prostore - WB Style Product Gallery
 * Version: 1.0.0
 *
 * Keeps the native Prostore Swiper/Fancybox/zoom logic and changes only
 * the desktop/tablet geometry of the product gallery.
 */

@media (min-width: 768px) {
  /* Make the thumbnail rail compact, close to marketplace-style galleries. */
  .wb-gallery .sku__vertical-control {
    width: 8.8rem;
    flex: 0 0 8.8rem;
    padding: 0 0 4.8rem;
    border-right: 0;
    margin-right: 0.8rem;
  }

  /* Give all released width to the main product image. */
  .wb-gallery .sku__vertical-slides {
    max-width: calc(100% - 9.6rem);
  }

  /* Remove the large empty inset around the main image. */
  .wb-gallery .sku__slide {
    padding: 0.6rem 0.4rem 0.6rem 0;
  }

  .wb-gallery .sku__slide img {
    max-width: 100%;
    max-height: 74rem;
    width: auto;
    height: auto;
  }

  /* Compact thumbnail cards. */
  .wb-gallery .swiper-vertical-thumbs {
    border-radius: 0;
  }

  .wb-gallery .swiper-vertical-thumbs .swiper-slide {
    border: 0;
    padding: 0.35rem 0;
    background: transparent;
  }

  .wb-gallery .sku__thumb {
    padding: 0.45rem;
    border: 1px solid #e7e7ee;
    border-radius: 0.8rem;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
  }

  .wb-gallery .sku__thumb img {
    max-width: 7.2rem;
    max-height: 7.8rem;
  }

  .wb-gallery .swiper-vertical-thumbs .swiper-slide-thumb-active .sku__thumb {
    border-color: var(--theme-primary-color, #5c4cff);
    box-shadow: inset 0 0 0 1px var(--theme-primary-color, #5c4cff);
  }

  .wb-gallery .sku__thumb:hover img {
    transform: none;
  }

  /* Replace the oversized bottom navigation area with a compact control. */
  .wb-gallery .sku__vertical-nav {
    width: 8.8rem;
    height: 4.4rem;
    padding: 0.35rem 0;
    gap: 0.35rem;
    border-top: 0;
    background: #fff;
  }

  .wb-gallery .sku__vertical-nav > * {
    border: 1px solid #e7e7ee;
    border-radius: 0.8rem;
    background: #f7f7fb;
    transition: background .2s ease, border-color .2s ease;
  }

  .wb-gallery .sku__vertical-nav > *:hover {
    background: #fff;
    border-color: #cfcfd9;
  }

  /* Keep gallery and image flush instead of the stock wide visual gap. */
  .wb-gallery .sku__vertical {
    border-bottom: 0;
  }
}

/* At wide desktop sizes the image can use almost the whole freed area. */
@media (min-width: 1200px) {
  .wb-gallery .sku__slide {
    padding-left: 0;
    padding-right: 0.2rem;
  }
}

/* Preserve Prostore's native mobile carousel exactly as-is. */
@media (max-width: 767px) {
  .wb-gallery .sku__slide,
  .wb-gallery .sku__thumb,
  .wb-gallery .sku__vertical-control,
  .wb-gallery .sku__vertical-slides,
  .wb-gallery .sku__vertical-nav {
    /* Intentionally no layout overrides on mobile. */
  }
}