.banners-top-block .banner-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: auto;
}

.tg-styles .tg-styles-head {
  margin: 0 0 30px !important;
  text-align: left !important;
}
.tg-styles .tg-styles-eyebrow {
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #8a8c8a !important;
  margin: 10px 0 10px !important;
}
.tg-styles .tg-styles-title {
  font-weight: 900 !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.tg-styles .tg-styles-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
.tg-styles .tg-cat {
  position: relative !important;
  display: block !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background: #111211 !important;
}
.tg-styles .tg-cat-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}
.tg-styles .tg-cat-ov {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 24px 22px !important;
  color: #fff !important;
  background: linear-gradient(
    to top,
    rgba(8, 9, 7, 0.82) 0%,
    rgba(8, 9, 7, 0.25) 45%,
    rgba(8, 9, 7, 0) 70%
  ) !important;
}
.tg-styles .tg-cat-kicker {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-secondary) !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  text-align: left !important;
}
.tg-styles .tg-cat-name {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.tg-styles .tg-cat-name::after {
  content: "" !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
  transition: transform 0.2s ease !important;
}
.tg-styles .tg-cat:hover .tg-cat-name::after {
  transform: translateX(5px) !important;
}
.tg-styles .tg-cat::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 0 var(--color-secondary) !important;
  transition: box-shadow 0.18s ease !important;
  pointer-events: none !important;
}
.tg-styles .tg-cat:hover::after {
  box-shadow: inset 0 0 0 3px var(--color-secondary) !important;
}

@media (max-width: 767px) {
  .tg-styles .tg-styles-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .tg-styles .tg-cat-name {
    font-size: 22px !important;
  }
  .homepage-products-heading-3,
  .homepage-products-heading-2 {
    padding: 0px !important;
  }
}

.homepage-products-heading-3::before {
  content: "Top výber" !important;
  display: block !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #8a8c8a !important;
  text-align: left !important;
  margin: 0 0 10px !important;
}

.homepage-products-heading-2::before {
  content: "Nové v ponuke" !important;
  display: block !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #8a8c8a !important;
  text-align: left !important;
  margin: 0 0 10px !important;
}

.homepage-products-heading-3,
.homepage-products-heading-2 {
  text-align: left !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.05 !important;
}

html {
  overflow-x: clip !important;
}
.homepage-products-heading-2,
.homepage-products-2 {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  background: var(--color-primary) !important;
}
.homepage-products-heading-2 {
  margin-bottom: 0 !important;
  padding-top: 52px !important;
  padding-bottom: 16px !important;
  color: #fff !important;
}
.homepage-products-2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 52px !important;
}
.homepage-products-heading-2::before {
  color: var(--color-secondary) !important;
}
.homepage-products-2 .swiper-pagination-bullet {
  opacity: 1 !important;
}
.homepage-products-2 .swiper-pagination-bullet::after {
  background-color: rgba(255, 255, 255, 0.4) !important;
}
.homepage-products-2 .swiper-pagination-bullet-active::after {
  background-color: #fff !important;
}