swiper-collection,
swiper-slide {
  display: block;
}

swiper-container {
  &:has(.swiper-slide-active) {
    flex-wrap: nowrap;

    swiper-slide {
      height: auto;

      @media screen and (width < 480px) {
        max-width: 100%;

        &:where(:not(.grid__item)) {
          width: 60%;
        }

        &:where(.grid__item) {
          width: calc(60% - var(--grid-mobile-horizontal-spacing) / 2);
        }
      }
    }
  }

  .grid__item-inner {
    height: 100%;
  }
}

/* collection swiper styles */
.section-collection-swiper {
  container-name: collection-swiper;
  container-type: inline-size;

  .collection__title .title {
    font-weight: var(--font-weight-Medium);

    strong {
      font: inherit;
      color: rgb(var(--color-heading-strong));
    }
  }
}

swiper-collection {
  --swiper-navigation-size: 3rem;
  --swiper-navigation-icon-size: 1.2rem;
  --swiper-navigation-sides-offset: 1.4rem;
  --swiper-navigation-color: rgb(var(--color-icon-fill));
  position: relative;

  swiper-container::part(container) {
    padding: var(--product-card-border-width);
  }

  .product-grid {
    margin-bottom: 0;
  }

  .swiper-button {
    width: var(--swiper-navigation-size);
    border: 0.1rem solid var(--swiper-navigation-color);
    background-color: rgb(var(--color-background));

    .svg-wrapper {
      width: var(--swiper-navigation-icon-size);
      height: var(--swiper-navigation-icon-size);
    }

    &:where([aria-disabled="true"], .disabled) {
      opacity: 0.4;
    }

    &::after {
      display: none;
    }
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: auto;
    right: calc(100% + var(--swiper-navigation-sides-offset, 1rem));
  }

  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: auto;
    left: calc(100% + var(--swiper-navigation-sides-offset, 1rem));
  }
}

@container collection-swiper (width < 750px) {
  swiper-collection {
    --swiper-navigation-sides-offset: calc(-1 * (var(--swiper-navigation-size) / 1.5));
  }
}

@container collection-swiper (width >=750px) and (width < 1440px) {
  swiper-collection {
    --swiper-navigation-sides-offset: calc((var(--page-width-horizontal-space) - var(--swiper-navigation-size)) / 2);
  }
}