/* =========================================================
   GymSupps – galerie dalších fotografií
   OBDÉLNÍKOVÁ + OPRAVA PŘEKRÝVÁNÍ
   Nahraď tím předchozí CSS galerie.
   ========================================================= */

.gs-product-gallery-wide {
  position: relative !important;
  display: block !important;
  clear: both !important;

  width: 100% !important;
  max-width: 100% !important;

  /* reálná výška galerie, aby další blok nezajížděl přes ni */
  min-height: 170px !important;

  margin: 22px 0 34px !important;
  padding: 0 !important;

  float: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

/* původní Shoptet wrapper */
.gs-product-gallery-wide .p-thumbnails,
.gs-product-gallery-wide .p-thumbnails-wrapper {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: block !important;
  clear: both !important;
  float: none !important;

  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}

/* scrollovací plocha */
.gs-product-gallery-wide .p-thumbnails-inner {
  position: relative !important;
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  min-height: 148px !important;

  margin: 0 !important;
  padding: 0 8px 8px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.gs-product-gallery-wide .p-thumbnails-inner::-webkit-scrollbar {
  display: none !important;
}

/* vlastní řada */
.gs-product-gallery-wide .p-thumbnails-inner > div {
  position: relative !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;

  width: max-content !important;
  min-width: 100% !important;
  min-height: 140px !important;

  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
}

/* pomocné lightbox odkazy nezabírají místo */
.gs-product-gallery-wide .cbox-gal {
  display: none !important;
}

/* =========================================================
   DLAŽDICE – desktop: obdélník
   ========================================================= */

.gs-product-gallery-wide .p-thumbnail {
  position: relative !important;

  flex: 0 0 220px !important;
  width: 220px !important;
  height: 140px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  /* JS na element vloží /shop/orig/ jako background-image */
  background-color: #f5f5f6 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;

  scroll-snap-align: start !important;
}

/* žádný rámeček ani u aktivního */
.gs-product-gallery-wide .p-thumbnail.highlighted {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* IMG necháváme skrytý – skutečný obraz řeší background z JS */
.gs-product-gallery-wide .p-thumbnail img {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   ŠIPKY
   ========================================================= */

.gs-product-gallery-wide .thumbnail-prev,
.gs-product-gallery-wide .thumbnail-next {
  position: absolute !important;
  top: 70px !important;
  z-index: 10 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #fff !important;
  background: #242424 !important;

  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.13) !important;

  transform: translateY(-50%) !important;
}

.gs-product-gallery-wide .thumbnail-prev {
  left: 8px !important;
}

.gs-product-gallery-wide .thumbnail-next {
  right: 8px !important;
}

.gs-product-gallery-wide .thumbnail-prev::before,
.gs-product-gallery-wide .thumbnail-next::before {
  content: "" !important;

  display: block !important;
  width: 9px !important;
  height: 9px !important;

  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
}

.gs-product-gallery-wide .thumbnail-prev::before {
  margin-left: 3px !important;
  transform: rotate(-135deg) !important;
}

.gs-product-gallery-wide .thumbnail-next::before {
  margin-right: 3px !important;
  transform: rotate(45deg) !important;
}

/* clearfix + ochrana následujícího bloku */
.gs-product-gallery-wide::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

.gs-product-gallery-wide + * {
  position: relative !important;
  clear: both !important;
}

/* větší desktop */
@media (min-width: 1400px) {
  .gs-product-gallery-wide .p-thumbnail {
    flex-basis: 235px !important;
    width: 235px !important;
    height: 150px !important;
  }

  .gs-product-gallery-wide {
    min-height: 180px !important;
  }

  .gs-product-gallery-wide .p-thumbnails-inner {
    min-height: 158px !important;
  }

  .gs-product-gallery-wide .p-thumbnails-inner > div {
    min-height: 150px !important;
  }

  .gs-product-gallery-wide .thumbnail-prev,
  .gs-product-gallery-wide .thumbnail-next {
    top: 75px !important;
  }
}

/* =========================================================
   MOBIL – menší obdélníky + swipe
   ========================================================= */

@media (max-width: 767px) {

  .gs-product-gallery-wide {
    min-height: 135px !important;
    margin: 18px 0 26px !important;
  }

  .gs-product-gallery-wide .p-thumbnails-inner {
    min-height: 118px !important;

    padding: 0 12px 7px !important;

    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 12px !important;
  }

  .gs-product-gallery-wide .p-thumbnails-inner > div {
    min-width: 0 !important;
    min-height: 110px !important;

    gap: 7px !important;
  }

  .gs-product-gallery-wide .p-thumbnail {
    flex: 0 0 42vw !important;

    width: 42vw !important;
    height: 27vw !important;

    min-width: 145px !important;
    min-height: 94px !important;

    max-width: 180px !important;
    max-height: 116px !important;

    border-radius: 14px !important;
  }

  .gs-product-gallery-wide .thumbnail-prev,
  .gs-product-gallery-wide .thumbnail-next {
    display: none !important;
  }
}

/* =========================================================
   GymSupps – galerie dalších fotografií
   PORTRÉTNÍ DLAŽDICE (vyšší než širší)
   Vlož NA KONEC současného CSS galerie.
   ========================================================= */

/* Desktop */
.gs-product-gallery-wide .p-thumbnail {
  flex: 0 0 170px !important;
  width: 170px !important;
  height: 220px !important;
}

.gs-product-gallery-wide {
  min-height: 250px !important;
}

.gs-product-gallery-wide .p-thumbnails-inner {
  min-height: 228px !important;
}

.gs-product-gallery-wide .p-thumbnails-inner > div {
  min-height: 220px !important;
}

.gs-product-gallery-wide .thumbnail-prev,
.gs-product-gallery-wide .thumbnail-next {
  top: 110px !important;
}

/* Velký desktop */
@media (min-width: 1400px) {
  .gs-product-gallery-wide .p-thumbnail {
    flex-basis: 180px !important;
    width: 180px !important;
    height: 235px !important;
  }

  .gs-product-gallery-wide {
    min-height: 265px !important;
  }

  .gs-product-gallery-wide .p-thumbnails-inner {
    min-height: 243px !important;
  }

  .gs-product-gallery-wide .p-thumbnails-inner > div {
    min-height: 235px !important;
  }

  .gs-product-gallery-wide .thumbnail-prev,
  .gs-product-gallery-wide .thumbnail-next {
    top: 117px !important;
  }
}

/* Mobil */
@media (max-width: 767px) {
  .gs-product-gallery-wide {
    min-height: 190px !important;
  }

  .gs-product-gallery-wide .p-thumbnails-inner {
    min-height: 173px !important;
  }

  .gs-product-gallery-wide .p-thumbnails-inner > div {
    min-height: 165px !important;
  }

  .gs-product-gallery-wide .p-thumbnail {
    flex: 0 0 34vw !important;

    width: 34vw !important;
    height: 44vw !important;

    min-width: 118px !important;
    min-height: 153px !important;

    max-width: 145px !important;
    max-height: 188px !important;
  }
}