.products-carousel {
  --_heading-font-size: 1rem;
  --_heading-line-height: 1.25;
  --_heading-grid-areas: "title link";
  --_heading-padding-inline: 0.5rem;
  --_primary-color: var(--theme-color-yamamay);
  --_heading-grid-areas: "title link" "filters filters";

  &.products-carousel--yman {
    --_primary-color: var(--theme-color-yamamay-man);
  }

  .products-carousel__heading {
    margin-bottom: 2rem;
    display: grid;
    justify-content: space-between;
    grid-template-areas: var(--_heading-grid-areas);
    row-gap: 2rem;
    padding-inline: var(--_heading-padding-inline);
  }

  .products-carousel__heading--title {
    grid-area: title;
  }

  .products-carousel__heading--filters {
    grid-area: filters;
  }

  .products-carousel__heading--link {
    grid-area: link;
    justify-self: end;
  }

  .products-carousel__filter--button {
    &[aria-selected="true"] {
      color: var(--_primary-color);
      position: relative;

      &::after {
        content: "";
        display: block;
        position: absolute;
        top: calc(100% + 0.25rem);
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--_primary-color);
        width: 3px;
        height: 3px;
        border-radius: 50%;
      }
    }

    &:hover,
    &:focus {
      color: var(--_primary-color);
    }
  }

  .swiper {
    height: var(--_slider-height, auto);

    .swiper-wrapper {
      margin-bottom: 4rem;
      align-items: stretch;

      @media screen and (max-width: 1000px) {
        margin-bottom: 2rem;
      }
    }

    .swiper-scrollbar {
      --swiper-scrollbar-size: 0.125rem;
      --swiper-scrollbar-bg-color: var(--theme-color-grey-3);
      --swiper-scrollbar-drag-bg-color: var(--theme-color-black);
      position: relative;
      top: unset;
      left: unset;
      right: unset;
      bottom: unset;
      width: 32%;
      min-width: 11rem;
      margin-inline: auto;
      border-radius: 1rem;
    }
  }

  .products-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;

    @media screen and (min-width: 1000px) {
      display: none;
    }

    .swiper-scrollbar {
      margin-inline: unset;
    }

    .swiper-button-prev,
    .swiper-button-next {
      position: relative;
      width: 2rem;
      height: 2rem;
      color: var(--theme-color-black);
      margin: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease;

      &::after {
        content: none;
      }

      svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: var(--_primary-color);
      }
    }

    .double-launch {
      --_heading-padding-inline: 0;
    }

    &:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled) {
      display: none;
    }
  }
}

@media screen and (min-width: 1000px) {
  .products-carousel {
    --_heading-font-size: 1.5rem;
    --_heading-line-height: 1.16;
    --_heading-grid-areas: "title filters link";
    --_heading-padding-inline: 0.75rem;
  }
}

@media screen and (max-width: 999px) {
  .double-launch {
    margin-inline: 0.5rem;
  }
}