/* =========================================================
   GymSupps – kompaktní posuvné podkategorie
   Nahrazuje celý předchozí CSS blok pro:
   ul.subcategories.with-image
   ========================================================= */

/* Reset původního Shoptet rozložení a horní linky */
ul.subcategories.with-image {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;

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

  margin: 20px 0 28px !important;
  padding: 0 0 6px !important;

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

  list-style: none !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

ul.subcategories.with-image::before,
ul.subcategories.with-image::after {
  content: none !important;
  display: none !important;
}

ul.subcategories.with-image::-webkit-scrollbar {
  display: none;
}

/* Jednotlivé karty */
ul.subcategories.with-image > li {
  float: none !important;

  flex: 0 0 182px !important;
  width: 182px !important;
  max-width: 182px !important;

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

  border: 0 !important;
  background: transparent !important;
  scroll-snap-align: start;
}

ul.subcategories.with-image > li > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  min-height: 224px !important;

  margin: 0 !important;
  padding: 16px 12px 14px !important;

  overflow: hidden;
  color: #202027 !important;
  text-align: center !important;
  text-decoration: none !important;

  background: #f6f6f7 !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  box-shadow: none !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

ul.subcategories.with-image > li > a:hover {
  transform: translateY(-2px);
  background: #fff !important;
  border-color: #e6e6e8 !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Obrázek */
ul.subcategories.with-image > li > a .image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 132px !important;

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

  background: transparent !important;
  border: 0 !important;
}

ul.subcategories.with-image > li > a .image img {
  display: block !important;

  width: auto !important;
  max-width: 112px !important;
  height: auto !important;
  max-height: 120px !important;

  margin: 0 auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;

  transition: transform 0.2s ease;
}

ul.subcategories.with-image > li > a:hover .image img {
  transform: scale(1.035);
}

/* Název */
ul.subcategories.with-image > li > a .text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 46px !important;

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

  color: #202027 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.24 !important;
  text-align: center !important;
  white-space: normal !important;
}

/* Odstranění původních dekorací */
ul.subcategories.with-image > li > a::before,
ul.subcategories.with-image > li > a::after,
ul.subcategories.with-image > li > a .image::before,
ul.subcategories.with-image > li > a .image::after,
ul.subcategories.with-image > li > a .text::before,
ul.subcategories.with-image > li > a .text::after {
  content: none !important;
  display: none !important;
}

/* Desktop */
@media (min-width: 1200px) {
  ul.subcategories.with-image {
    gap: 12px !important;
    margin-top: 20px !important;
  }

  ul.subcategories.with-image > li {
    flex-basis: 182px !important;
    width: 182px !important;
    max-width: 182px !important;
  }
}

/* Tablet / menší notebook */
@media (min-width: 768px) and (max-width: 1199px) {
  ul.subcategories.with-image > li {
    flex: 0 0 168px !important;
    width: 168px !important;
    max-width: 168px !important;
  }

  ul.subcategories.with-image > li > a {
    min-height: 212px !important;
    padding: 14px 10px 13px !important;
  }

  ul.subcategories.with-image > li > a .image {
    height: 122px !important;
  }

  ul.subcategories.with-image > li > a .image img {
    max-width: 104px !important;
    max-height: 110px !important;
  }

  ul.subcategories.with-image > li > a .text {
    font-size: 14px !important;
  }
}

/* Mobil */
@media (max-width: 767px) {
  ul.subcategories.with-image {
    gap: 9px !important;
    margin: 16px 0 22px !important;
    padding: 0 16px 6px 0 !important;
  }

  ul.subcategories.with-image > li {
    flex: 0 0 132px !important;
    width: 132px !important;
    max-width: 132px !important;
  }

  ul.subcategories.with-image > li > a {
    min-height: 188px !important;
    padding: 12px 8px 12px !important;
    border-radius: 16px !important;
  }

  ul.subcategories.with-image > li > a .image {
    height: 105px !important;
    margin-bottom: 8px !important;
  }

  ul.subcategories.with-image > li > a .image img {
    max-width: 92px !important;
    max-height: 96px !important;
  }

  ul.subcategories.with-image > li > a .text {
    min-height: 40px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}

/* Velmi malé displeje */
@media (max-width: 380px) {
  ul.subcategories.with-image > li {
    flex-basis: 124px !important;
    width: 124px !important;
    max-width: 124px !important;
  }

  ul.subcategories.with-image > li > a {
    min-height: 180px !important;
  }
}