@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: 5.4rem;
    --section-button-space: 4.8rem;
  }

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

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

    &:not(:only-child) {
      margin-bottom: var(--section-header-gap);
    }
  }

  .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-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) {
      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 {
      scroll-snap-align: center;
      scroll-margin-inline: var(--page-width-horizontal-space);

      &:fist-child {
        scroll-snap-align: start;
      }

      &:last-child {
        scroll-snap-align: end;
      }
    }
  }

  .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));

    &: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 {
    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 {
    .tab-button--icon {
      filter: invert(100%);
      -webkit-filter: invert(100%);
    }
  }

  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;
    }
  }

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

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

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

  @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);
        grid-template-columns: 2fr 3fr;
        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;
      }
    }
  }
}

/* list product variants styles */
/* .section--list-variants {
  .product-grid > .grid__item {
    order: 1;

    &:nth-child(2) {
      order: -1;
    }
  }
} */

/* main collection styles */
.section--main-collection {
  --collection-list-menu-pad-y: 1.5rem;
  --grid-item-cols: 3;
  --grid-item-row-cols: calc(var(--grid-item-cols) - 1);
  --grid-item-card-size: calc(100% * (var(--grid-item-cols) - 1) / var(--grid-item-cols));

  @media screen and (width >=750px) and (width < 990px) {
    --collection-list-menu-pad-y: 2rem;
  }

  @media screen and (width >=990px) {
    --collection-list-menu-pad-y: 3rem;
  }

  .collection-list--menu {
    --grid-desktop-horizontal-spacing: var(--grid-mobile-horizontal-spacing);
    margin-bottom: var(--collection-list-menu-pad-y);

    @media screen and (width < 1300px) {
      .grid {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding-block: 10px;
        width: calc(100% + (var(--page-width-horizontal-space) * 2));
        margin-inline: calc(-1 * var(--page-width-horizontal-space));
        padding-inline: var(--page-width-horizontal-space);
        scroll-padding-inline: var(--page-width-horizontal-space);
        scrollbar-width: thin;

        &::-webkit-scrollbar {
          height: 3px;
        }

        &::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 4px;
        }

        &::-webkit-scrollbar-track {
          background: transparent;
        }

        &>li {
          flex: 0 0 auto;
        }
      }
    }

    /* @media screen and (width >=1300px) {
      overflow: hidden;

      .grid {
        overflow: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: thin;
      }
    } */
  }

  .button {
    --button-height: calc(3.5rem + var(--buttons-border-width) * 2);
    font-size: var(--font-body-size);
    padding-inline: 1.5rem;
    min-width: max-content;
    white-space: nowrap;
  }

  .product-card-wrapper {
    @media screen and (width >=990px) {
      .card__heading {
        --font-heading-4-size: 2rem;
      }

      .price {
        --font-heading-5-size: 1.8rem
      }
    }

    .card__information-meta .quick-add__submit {
      --font-body-size: var(--font-body-size);
    }
  }

  .grid__item-card {
    @media screen and (width < 990px) {
      width: 100%;
      max-width: 100%;
    }

    @media screen and (width >=990px) {
      width: calc(var(--grid-item-card-size) - (var(--grid-desktop-horizontal-spacing) * (var(--grid-item-row-col) - 1) / var(--grid-item-row-col)));
      max-width: calc(var(--grid-item-card-size) - (var(--grid-desktop-horizontal-spacing) * (var(--grid-item-row-col) - 1) / var(--grid-item-row-col)));
    }

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

  .collection-card-wrapper {
    --collection-card-radius: var(--product-card-corner-radius);
    height: 100%;

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

    &,
    .collection-card {
      height: 100%;

      @media screen and (width < 990px) {
        aspect-ratio: 1 / 1;
        width: 100%;
      }

      @media screen and (width >=990px) {
        min-height: 30rem;
      }
    }

    .collection-card {
      display: flex;
      position: relative;

      @media screen and (width < 990px) {
        &::before {
          content: '';
          display: block;
          padding-top: var(--ratio-percent);
        }
      }
    }

    .card__inner {
      width: auto;
    }

    .card__media,
    .collection-card {
      overflow: hidden;
      border-radius: var(--collection-card-radius);
      -webkit-border-radius: var(--collection-card-radius);
      -moz-border-radius: var(--collection-card-radius);
      -ms-border-radius: var(--collection-card-radius);
      -o-border-radius: var(--collection-card-radius);
    }

    .card__media {

      &,
      &>img {
        width: 100%;
        height: 100%;
      }

      &>img {
        object-fit: cover;
      }
    }

    .card__content {
      --collection-card-space: 1rem;
      display: flex;
      position: relative;
      isolation: isolate;
      padding: var(--collection-card-space);

      @media screen and (width >=750px) {
        --collection-card-space: 2rem;
      }

      @media screen and (width >=990px) {
        --collection-card-space: 3rem;
      }

      @media screen and (width >=1440px) {
        --collection-card-space: 3rem;
      }

      &::before {
        --tw-gradient-stops: rgba(var(--color-foreground), 0.8), transparent;
        content: '';
        position: absolute;
        inset: 0;
        top: 0px;
        top: 50%;
        background-image: linear-gradient(to top, var(--tw-gradient-stops));
        z-index: -1;
      }

      .card-information {
        align-self: end;
      }

      .card_heading {
        font-weight: var(--font-weight-600);
        text-shadow: rgb(var(--color-shadow)) 0 4px 14px;
        color: rgb(var(--color-heading));
        margin-block: 0;
      }
    }

    .card__button-wrap {
      max-width: max-content;

      &:not(:first-child) .button {
        margin-top: 0.8rem;
      }
    }
  }
}