@media screen and (max-width: 749px) {
  .collection .grid__item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 989px) {
  .collection .slider.slider--tablet {
    margin-bottom: 1.5rem;
  }
}

.collection .loading-overlay {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

@media screen and (max-width: 749px) {
  .collection .loading-overlay {
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    left: 0;
  }
}

.collection .loading-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  padding: 0 1.5rem;
  opacity: 0.7;
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.collection.loading .loading-overlay {
  display: block;
}

.collection--empty .title-wrapper {
  margin-top: 10rem;
  margin-bottom: 15rem;
}

@media screen and (max-width: 989px) {
  .collection .slider--tablet.product-grid {
    scroll-padding-left: 1.5rem;
  }
}

.collection__description>* {
  margin: 0;
}

.collection__title.title-wrapper {
  margin-bottom: 2.5rem;
}

.collection__title .title:not(:only-child) {
  margin-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  .collection__title--desktop-slider .title {
    margin-bottom: 2.5rem;
  }

  .collection__title.title-wrapper--self-padded-tablet-down {
    padding: 0 5rem;
  }

  .collection slider-component:not(.page-width-desktop) {
    padding: 0;
  }

  .collection--full-width slider-component:not(.slider-component-desktop) {
    padding: 0 1.5rem;
    max-width: none;
  }
}

.collection__view-all a:not(.link) {
  margin-top: 1rem;
}

/* featured collection styles */
.section--featured-collection {
  --section-header-gap: 1rem;
  --section-header-space: 2.3rem;
  --section-button-space: 5rem;

  @media screen and (width >=990px) {
    --section-header-space: 6.1rem;
    --section-header-space: 5rem;
    --section-button-space: 4.8rem;
  }

  .collection__title {
    margin-bottom: var(--section-header-space);

    &>*+* {
      margin-top: var(--section-header-gap);
    }
  }

  .title {
    font-weight: var(--font-weight-600);

    &:last-child {
      margin-bottom: 0;
    }
  }

  .collection__description {
    color: rgb(var(--color-subheading));
  }

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

  .collection__view-all {
    margin-top: var(--section-button-space);

    a:not(.link) {
      margin-top: 0;

      @media screen and (width < 750px) {
        --button-width: calc(28.6rem + var(--buttons-border-width) * 2);
      }
    }
  }

  /* @media screen and (width < 360px) {
    .contains-card--product:not(.swiper) .product-grid .grid__item,
    swiper-slider[data-swiper-mobile="false"] .product-grid .grid__item {
      width: 100%;
      max-width: 100%;
    }
  } */

  @container product-card (width < 440px) {
    .product-card-wrapper .card--card {
      --card-padding: 1rem;
      padding: 15px 15px 30px 15px;
    }

    .section--featured-collection .product-card-wrapper .card--card {
      padding: 10px;
    }
  }
}

/* swiper tab products styles */
.section--swiper-tab {
  --swiper-tab-thumbs-space: 3rem;

  &,
  swiper-collection,
  swiper-slider-tab {
    overflow: hidden;
  }

  .swiper-tab--list {
    width: 100%;
    scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-inline: var(--page-width-horizontal-space);
    margin-bottom: var(--swiper-tab-thumbs-space);

    @media screen and (width >=990px) {
      --grid-desktop-horizontal-spacing: 0px;
      --grid-mobile-horizontal-spacing: 0px;
      justify-content: center;
    }

    &::-webkit-scrollbar {
      height: 0.4rem;
      width: 0.4rem;
      display: none;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgb(var(--color-foreground));
      border-radius: 0.4rem;
      border: 0;
    }

    &::-webkit-scrollbar-track {
      background: rgba(var(--color-foreground), 0.04);
      border-radius: 0.4rem;
    }

    & {
      --swiper-tab-button-radius: 10rem;
      border-radius: var(--swiper-tab-button-radius);
      -webkit-border-radius: var(--swiper-tab-button-radius);
      -moz-border-radius: var(--swiper-tab-button-radius);
      -ms-border-radius: var(--swiper-tab-button-radius);
      -o-border-radius: var(--swiper-tab-button-radius);

      @media screen and (width < 990px) {
        --grid-mobile-horizontal-spacing: 0px;
        overflow: hidden;
      }

      @media screen and (width >=990px) {
        max-width: 100%;
        padding-inline: 0;
        width: fit-content;
        margin-inline: auto;
      }
    }

    .swiper-tab--button {
      scroll-snap-align: center;
      scroll-margin-inline: var(--page-width-horizontal-space);

      &:first-child {
        scroll-snap-align: start;
        border-top-left-radius: var(--swiper-tab-button-radius);
        border-bottom-left-radius: var(--swiper-tab-button-radius);
      }

      &:last-child {
        scroll-snap-align: end;
        border-top-right-radius: var(--swiper-tab-button-radius);
        border-bottom-right-radius: var(--swiper-tab-button-radius);
      }
    }
  }

  .swiper-tab--button {
    --tab-button-icon-size: 3.2rem;
    white-space: nowrap;
    /* border: var(--buttons-border-width) solid rgba(var(--color-button-text), var(--buttons-border-opacity)); */
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 2rem;
    cursor: pointer;
    background-color: rgb(var(--color-heading-strong));
    color: rgb(var(--color-foreground));

    &:where(.button--secondary.active) {
      --color-button: var(--color-hover-secondary-button);
      --color-button-text: var(--color-hover-secondary-button-text);
    }

    &:where(.button--secondary):hover,
    &:where(.button--secondary.active) {
      border-color: rgba(var(--color-secondary-button-text), var(--buttons-border-opacity));
    }

    &::before,
    &::after {
      display: none !important;
    }

    @media screen and (width < 990px) {
      --tab-button-icon-size: 2rem;
      padding-inline: 1.5rem;
      min-width: auto;
    }
  }

  .tab-button--icon {
    display: inline-flex;
    width: var(--tab-button-icon-size);
    /* height: var(--tab-button-icon-size); */

    img {
      width: 100%;
      height: auto;
      max-width: 100%;
      vertical-align: middle;
    }
  }

  .swiper-tab--button:hover,
  .swiper-tab--button.active {
    color: rgb(var(--color-background));
    background-color: rgb(var(--color-button));

    .tab-button--icon {
      filter: invert(100%);
      -webkit-filter: invert(100%);
    }
  }

  swiper-collection,
  swiper-slider-tab {
    --swiper-pagination-radius: 1.2rem;

    .swiper-pagination {
      margin: 0 auto;
      max-width: 10rem;
      margin-block: 2rem;
    }

    .swiper-pagination,
    .swiper-pagination-progressbar-fill {
      border-radius: var(--swiper-pagination-radius);
      -webkit-border-radius: var(--swiper-pagination-radius);
      -moz-border-radius: var(--swiper-pagination-radius);
      -ms-border-radius: var(--swiper-pagination-radius);
      -o-border-radius: var(--swiper-pagination-radius);
      overflow: hidden;
    }
  }

  swiper-collection {
    .swiper-pagination-bullet {
      --swiper-pagination-color: rgb(var(--color-button));

      transition: 0.3s ease-in-out;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -ms-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      
      &:where(.swiper-pagination-bullet-active) {
        --swiper-pagination-bullet-border-radius: 5px;
        --swiper-pagination-bullet-width: 16px;
      }
    }
  }

  .grid__item-inner {
    --grid-item-list-gap: 4.6rem;
    container-name: grid-item-list;
    container-type: inline-size;
  }

  .product-card-wrapper {
    --grid-item-radius: 1.2rem;
    --grid-item-list-pad: 2rem;
    --grid-item-media: 51rem;
    --grid-item-box: 52rem;

    .card {
      border-radius: var(--grid-item-radius);
      -webkit-border-radius: var(--grid-item-radius);
      -moz-border-radius: var(--grid-item-radius);
      -ms-border-radius: var(--grid-item-radius);
      -o-border-radius: var(--grid-item-radius);

      @media screen and (width < 750px) {
        padding: 1rem;
      }

      &>.card__content .card__information {
        padding-inline: 0;
        max-width: var(--grid-item-box);
      }
    }

    .card__information {
      --card-info--gap: 2.4rem;

      &>* {
        margin-bottom: 0;
      }

      &>*:first-child {
        margin-top: 0;
      }

      &>*+* {
        margin-top: var(--card-info--gap);
      }
    }

    .card__information-meta .card__offers:not(:first-child) {
      margin-top: 1.6rem;

      @media screen and (width >=990px) {
        margin-top: 2.5rem;
      }
    }

    .card__offers,
    .card_feature {
      --card-feature-icon: 2rem;
      --card-feature-gap: 0.8rem;
      display: flex;
      flex-wrap: wrap;
      gap: var(--card-feature-gap);

      .svg-wrapper {
        width: var(--card-feature-icon);
      }
    }

    .card__offers {
      align-items: center;
      color: rgb(var(--color-heading-strong));
    }

    .card_feature {
      .card__feature-text {
        width: calc(100% - (var(--card-feature-icon) + var(--card-feature-gap)));
        max-width: calc(100% - (var(--card-feature-icon) + var(--card-feature-gap)));
      }

      &+.card_feature {
        margin-top: var(--card-feature-gap);
      }
    }

    .quick-add {
      margin-inline: 0;
    }
  }

  @media screen and (width < 750px) {
    .card__info-heading {
      --font-heading-3-size: 2rem;
    }

    .card__heading {
      --font-heading-4-size: 1.8rem;
    }

    .product-card-wrapper .card__features {
      font-size: 1.1rem;
    }
  }

  @media screen and (width < 990px) {
    .swiper-slider-tab {
      --swiper-slider-pad-x: 2rem;
      padding-inline: var(--swiper-slider-pad-x);
      overflow: visible;
    }
  }

  @media screen and (width >=990px) {
    .product-card-wrapper {
      .card--card {
        display: grid;
        gap: var(--grid-item-list-gap);
        padding: var(--grid-item-list-pad);
        grid-template-columns: minmax(auto, var(--grid-item-media)) minmax(auto, 1fr);
        align-items: center;

        .card__information-meta {
          max-width: 52rem;
        }
      }
    }
  }

  @media screen and (width >=1440px) {
    .product-card-wrapper {
      .card__heading {
        --font-heading-4-size: 36px;
        --font-heading-4-scale: 1.3;
      }
    }
  }
} 

ul#product-grid {
  gap: 0;
  justify-content: center;
} 


@media screen and (width < 990px) {
  ul#product-grid {
    justify-content: flex-start;
    --product-card-image-padding: 1.5rem;
  }
}

.section--featured-collection {
  .pcw {
    outline: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
    padding-bottom: 1px;

    .card--card {
      border-color: transparent;

      .card__content {
        padding-bottom: var(--image-padding);
      }
    }
  }
}