.tpg_featured_collection {
  --tpg-gap: 4px;
  --tpg-slides-per-view: 4;
  --tpg-container-padding: 2rem;
  --tpg-content-gap: 0px;
  --tpg-richtext-width: calc(
    ((100% - var(--tpg-content-gap)) * 0.8 - (var(--tpg-gap) * (var(--tpg-slides-per-view) - 1)))
      / var(--tpg-slides-per-view)
  );

  @media screen and (max-width: 749px) {
    --tpg-slides-per-view: 2;
  }

  display: flex;
  align-items: center;
  position: relative;
  column-gap: var(--tpg-content-gap);
  align-items: stretch;

  .featured_mobile_heading_link {
    display: none;
  }

  .section_topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 100%;
  }

  .featured_richtext {
    position: relative;
    width: calc(25% + 40px);
    padding: 0 20px;
    margin-left: -20px;
    background-color: white;
    z-index: 3;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media screen and (max-width: 749px) {
      display: none;
    }

    &::after {
      content: '';
      position: absolute;
      width: 500px;
      height: 100%;
      background-color: #fff;
      top: 0;
      bottom: 0;
      left: -500px
    }

    .richtext_title {
      font-size: 26px;
    }

    .richtext_description {
      font-family: var(--font-body-family);
      font-size: 14px;
      font-weight: 300;
      line-height: 22px;
      letter-spacing: 0.02em;
    }

    .richtext_button {
      border: 1px solid rgba(29, 29, 29, 1);
      background-color: transparent;
      padding: 0 2rem;
      height: 36px;
      min-height: unset;
      display: flex;
      align-items: center;
      width: max-content;

      a {
        font-family: var(--font-body-family);
        font-size: 10px;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 15%;
        text-transform: uppercase;
        text-decoration: none;
      }
    }

    > * {
      margin: 0;
      padding: 0;
      height: fit-content;
    }
  }

  .featured_collections {
    flex: 80%;
    overflow: visible;
    min-width: 0;
    --tpg-slide-width: calc((100% - (var(--tpg-gap) * (var(--tpg-slides-per-view) - 1))) / var(--tpg-slides-per-view));

    &:not(.swiper-initialized) .swiper-wrapper {
      gap: var(--tpg-gap);
    }

    .swiper-wrapper {
      display: flex;
      height: auto;
      align-items: stretch;
    }

    .swiper-slide {
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .featured_item {
      position: relative;
      flex: 0 0 var(--tpg-slide-width);
      width: var(--tpg-slide-width);

      .featured_image {
        width: 100%;
        height: 100%;
        max-height: 393px;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        position: relative;
        background-color: rgba(247, 247, 247, 1);

        > a {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 1;
        }

        .featured_whislist {
          position: absolute;
          top: 2rem;
          right: 2rem;
          z-index: 2;
        }

        .featured_whislist:hover {
          svg {
            filter: invert(39%) sepia(47%) saturate(1643%) hue-rotate(327deg) brightness(92%) contrast(96%);
            fill: #000;
          }
        }

        .featured_badge {
          position: absolute;
          bottom: 24px;
          left: 0;
          display: flex;
          gap: 0.5rem;

          @media screen and (max-width: 749px) {
            bottom: 16px;
          }

          > * {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 8px;

            @media screen and (max-width: 749px) {
              padding: 4px 6px;
            }

            span {
              @media screen and (max-width: 749px) {
                font-size: 12px;
              }
            }
          }

          .featured_new_badge {
            background-color: white;
            width: 60px;
          }

          .featured_discount_badge {
            background-color: rgba(194, 86, 81, 1);
            color: rgba(255, 255, 255, 1);
            width: 47px;

            > * {
              font-weight: 400;
            }
          }
        }
      }

      .featured_image > img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: contain;
        filter: invert(3%);
      }

      .featured_content {
        .product_title {
          overflow: hidden;
          display: -webkit-box;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* allows one wrap, then ellipsis */
          opacity: 0.6;
        }

        .product_price {
          display: flex;
          flex-wrap: wrap;

          .price {
            letter-spacing: .02em;

            @media screen and (max-width: 749px) {
              font-size: 12px;
            }
          }

          > * {
            flex: 100%;
          }

          .discount {
            color: rgba(194, 86, 81, 1);
            font-weight: 600;
            display: flex;
            align-content: start;
          }

          .price_discounted {
            font-size: 12px;
          }
        }

        > * {
          text-align: left;
          display: flex;
          padding: 0;
        }
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      position: absolute;
      top: 35%;

      svg {
        position: absolute;
        width: 45px;
        height: 45px;
      }
    }

    .swiper-button-disabled {
      display: none;
    }

    .swiper-button-prev {
      transform: rotate(-180deg);
    }
  }

  .section_title {
    margin: 0;
    padding-bottom: 16px;

    &.tpg_heading {
      font-family: var(--font-body-family);
      font-weight: 300;
      font-size: 26px;
      line-height: 32px;
      letter-spacing: .01em;

      @media screen and (max-width: 750px) {
        font-size: 20px;
        line-height: 20px;
      }
    }
  }
}

@media screen and (min-width: 1100px) {
  .tpg_featured_collection {
    --tpg-container-padding: 4.8rem;
    --tpg-content-gap: 8rem;
  }
}

@media screen and (min-width: 1360px) {
  .tpg_featured_collection {
    --tpg-container-offset: calc((min(100vw, 1920px) - 1416px) / 2);
  }
}

@media only screen and (max-width: 1200px) {
  .featured_richtext {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .tpg_featured_collection {
    flex-wrap: wrap;

    .featured_mobile_heading_link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
  }
}

@media only screen and (max-width: 749px) {
  .tpg_featured_collection {
    --tpg-gap: 4px;
  }
}

@media screen and (min-width: 768px) {
  .tpg_featured_collection {
    --tpg-gap: 9px;
  }
}


.main-slider-wrapper {
  display: flex;
  width: 100%;
  column-gap: 0;

  @media screen and (min-width: 1100px) {
    column-gap: 8rem;
  }
}