/* === SUBCATEGORIE - CHIPY S OUTLINE === */

/* Horizontální layout */
.subcategories.with-image,
.subcategories {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  gap: 10px !important;
  margin: 0 0 40px 0 !important;
  padding: 0 0 0 0 !important;
  list-style: none !important;
  align-items: center !important;
}

/* Skrytí scrollbaru */
.subcategories.with-image::-webkit-scrollbar,
.subcategories::-webkit-scrollbar {
  display: none;
}
.subcategories.with-image,
.subcategories {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Reset grid tříd */
.subcategories.with-image > li,
.subcategories > li,
.subcategories.with-image > li.col-xs-6,
.subcategories.with-image > li.col-sm-6,
.subcategories.with-image > li.col-lg-3,
.subcategories.with-image > li.col-xl-3 {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  scroll-snap-align: start;
}

/* Chip styl */
.subcategories.with-image li a,
.subcategories li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 48px !important;
  padding: 0 20px 0 6px !important;
  border: 1.5px solid #E5E5E5 !important;
  border-radius: 999px !important;
  background: #fff !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-family: "roc-grotesk", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #192826 !important;
  transition: border-color 0.2s ease !important;
}

.subcategories.with-image li a:hover,
.subcategories li a:hover {
  border-color: #192826 !important;
}

/* Šipka - skrytí */
.subcategories.with-image li a::after,
.subcategories li a::after {
  display: none !important;
}

/* Fotky v chipu - 36px */
.subcategories.with-image li a .image {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background-color: #F5F5F5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.subcategories.with-image li a .image img {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  mix-blend-mode: darken !important;
  margin: 0 !important;
  max-height: none !important;
}

/* Text v chipu */
.subcategories.with-image li a .text,
.subcategories li a .text {
  width: auto !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: "roc-grotesk", sans-serif !important;
  text-align: left !important;
  padding: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: inline !important;
  line-height: 1 !important;
}

/* Čárka za textem (z původního CSS) - skrýt */
.subcategories.with-image li a .text::after {
  display: none !important;
}

/* === BREADCRUMB CHIP === */
.subcategory-breadcrumb-li {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.subcategory-breadcrumb-chip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 48px !important;
  padding: 0 14px 0 20px !important;
  border: 1.5px solid #192826 !important;
  border-radius: 999px !important;
  background: #fff !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-family: "roc-grotesk", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #192826 !important;
  flex: 0 0 auto !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.subcategory-breadcrumb-chip:hover {
  background-color: #F5F5F5 !important;
  border-color: #192826 !important;
  color: #192826 !important;
  text-decoration: none !important;
}

/* Šipka mezi úrovněmi */
.subcategory-breadcrumb-chip .chip-separator {
  color: #999 !important;
  font-size: 12px !important;
  margin: 0 -2px !important;
}

/* X tlačítko */
.subcategory-breadcrumb-chip .chip-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #F0F0F0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: #666 !important;
  margin-left: 2px !important;
  transition: background-color 0.2s ease !important;
}

.subcategory-breadcrumb-chip:hover .chip-close {
  background-color: #E0E0E0 !important;
  color: #192826 !important;
}

/* === MOBIL === */
@media screen and (max-width: 767px) {

  .subcategories.with-image,
  .subcategories {
    margin: 0 -10px 32px 0 !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  .subcategories.with-image li a,
  .subcategories li a {
    font-size: 15px !important;
    height: 44px !important;
    padding: 0 16px 0 5px !important;
    gap: 8px !important;
  }

  .subcategories.with-image li a .image {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .subcategories.with-image li a .image img {
    width: 34px !important;
    height: 34px !important;
  }

  .subcategory-breadcrumb-chip {
    font-size: 15px !important;
    height: 44px !important;
    padding: 0 12px 0 16px !important;
    gap: 8px !important;
  }

  .subcategories.with-image li a .text,
  .subcategories li a .text {
    font-size: 15px !important;
  }
}

/* === DESKTOP === */
@media screen and (min-width: 992px) {
  .subcategories.with-image,
  .subcategories {
    overflow-x: visible !important;
    margin-bottom: 48px !important;
    gap: 12px !important;
  }
}