/**
 * Slider kolekcji produktów — Swiper + dopasowanie do siatki Woo.
 */

.nbt-wc-product-collection--swiper-root .nbt-wc-collection-swiper {
  position: relative;
  padding-bottom: 2.25rem;
  margin-left: 0;
  margin-right: 0;
}

.nbt-wc-collection-swiper ul.wc-block-product-template.swiper-wrapper {
  /* Flex z Woo (.is-flex-container) ma domyślnie flex-wrap: wrap — bez tego kartki zjeżdżają w drugi rząd przy Swiperze. */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box;
  grid-template-columns: unset !important;
  /* Woo .wc-block-product-template__responsive: grid-gap 1.25em działa też przy flex — psuje równe 1/3 + translate Swipera. */
  gap: 0 !important;
  grid-gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

.nbt-wc-collection-swiper ul.wc-block-product-template.swiper-wrapper > li.wc-block-product {
  /* Wyższa specyficzność niż Woo .columns-N > li { width: calc(...) } — bez !important, żeby Swiper mógł ustawić width inline. */
  width: unset;
  flex: 0 0 auto;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  max-width: none;
}

.nbt-wc-collection-swiper ul.wc-block-product-template.swiper-wrapper.wc-block-product-template__responsive {
  display: flex !important;
}

.nbt-wc-collection-swiper.swiper {
  overflow: hidden;
  /* Domknięcie ~1px szczeliny od zaokrągleń szerokości slajdów (containerWidth / 3). */
  width: calc(100% + 1px);
  margin-right: -1px;
  box-sizing: border-box;
}

.nbt-wc-collection-swiper .wc-block-product.swiper-slide {
  height: auto;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  min-width: 0;
}

/* Na wąskich viewportach 3× karta — treść ma się mieścić w szerokości slajdu (Swiper ustawia width inline). */
.nbt-wc-collection-swiper .swiper-slide > * {
  min-width: 0;
  max-width: 100%;
}

.nbt-wc-collection-swiper .swiper-slide img {
  max-width: 100%;
  height: auto;
}

.nbt-wc-collection-swiper .swiper-scrollbar {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background-color: #f2f2f2;
  opacity: 1 !important;
  box-shadow: none;
  border: none;
}

.nbt-wc-collection-swiper .swiper-scrollbar-drag {
  height: 100%;
  top: 0;
  margin-top: 0;
  border-radius: 999px;
  background-color: #1a1d23;
  box-shadow: none;
  border: none;
}

.nbt-wc-collection-swiper .swiper-scrollbar-drag:active,
.nbt-wc-collection-swiper .swiper-scrollbar-drag:hover {
  background-color: #1a1d23;
}

/* Nawigacja jak na makiecie: okrągłe, białe, lekki cień + chevron SVG (#101828) */
.nbt-wc-collection-swiper {
  --swiper-navigation-size: 48px;
  --swiper-navigation-color: #0f172a;
  --swiper-navigation-sides-offset: 10px;
  --nbt-swiper-nav-chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M4.94978 6.36398L0 1.41421L1.41422 0L7.77818 6.36398L1.41422 12.7279L0 11.3137L4.94978 6.36398Z' fill='%23101828'/%3E%3C/svg%3E");
}

.nbt-wc-collection-swiper .swiper-button-prev,
.nbt-wc-collection-swiper .swiper-button-next {
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  margin-top: calc(-0.5 * var(--swiper-navigation-size));
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.06);
  color: var(--swiper-navigation-color);
  z-index: 4;
  transition: box-shadow 0.2s ease;
}

.nbt-wc-collection-swiper .swiper-button-prev {
  left: var(--swiper-navigation-sides-offset);
}

.nbt-wc-collection-swiper .swiper-button-next {
  right: var(--swiper-navigation-sides-offset);
}

.nbt-wc-collection-swiper .swiper-button-next:after,
.nbt-wc-collection-swiper .swiper-rtl .swiper-button-prev:after {
  content: "";
  display: block;
  width: 8px;
  height: 13px;
  margin: 0;
  font-family: inherit;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  background: var(--nbt-swiper-nav-chevron-svg) no-repeat center / contain;
  transform: none;
}

.nbt-wc-collection-swiper .swiper-button-prev:after,
.nbt-wc-collection-swiper .swiper-rtl .swiper-button-next:after {
  content: "";
  display: block;
  width: 8px;
  height: 13px;
  margin: 0;
  font-family: inherit;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  background: var(--nbt-swiper-nav-chevron-svg) no-repeat center / contain;
  transform: scaleX(-1);
}

.nbt-wc-collection-swiper
  .swiper-button-prev:not(.swiper-button-disabled):hover,
.nbt-wc-collection-swiper
  .swiper-button-next:not(.swiper-button-disabled):hover {
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(15, 23, 42, 0.08);
}

.nbt-wc-collection-swiper .swiper-button-prev.swiper-button-disabled,
.nbt-wc-collection-swiper .swiper-button-next.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Modal mapy pomieszczeń — rodzic max-content nie może zwężać kontenera Swipera. */
.dom-pdd-area-modal__wp-root .is-layout-constrained > :where(:has(.nbt-wc-product-collection--swiper-root)),
.dom-pdd-modal-wp-doc .is-layout-constrained > :where(:has(.nbt-wc-product-collection--swiper-root)),
.dom-pdd-area-modal__wp-root .nbt-wc-product-collection--swiper-root,
.dom-pdd-modal-wp-doc .nbt-wc-product-collection--swiper-root {
  max-width: 100% !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}