.trending-categories__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-14);
  padding: var(--spacing-medium) var(--container-margin) var(--spacing-14);

  @media (width>=768px) {
    padding: var(--spacing-big) var(--container-margin) var(--spacing-22);
  }

  @media (width >= 1024px) {
    padding: 50px 0 var(--spacing-xbig) var(--container-margin);
    gap: var(--spacing-xbig);
  }

  .trending-categories__header {
    color: var(--neutrals-sub-texts-paragraphs);
    font-feature-settings:
      'liga' off,
      'clig' off;
    font-size: var(--fs-large);
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: normal;

    @media (width >= 768px) {
      font-size: var(--fs-xlarge);
      line-height: normal;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    @media (width >= 1024px) {
      position: relative;
      margin-right: var(--container-margin);
      padding-bottom: var(--spacing-small);
      border-bottom: 1px solid var(--static-gray-300);
    }

    .trending-categories__header-content {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      width: 100%;

      @media (width >= 1024px) {
        width: auto;
        gap: 16px;
      }

      .trending-categories__title {
        font-size: var(--fs-large);
        font-weight: var(--fw-400);
        line-height: 120%;
        letter-spacing: -0.3px;
        margin: 0;

        @media (width >= 1024px) {
          font-size: var(--fs-xxlarge);
          line-height: normal;
          letter-spacing: normal;
        }
      }

      .trending-categories__view-all {
        color: var(--primary-variations-primary);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-500);
        text-decoration: none;
        transition: color 0.3s ease;

        @media (width >= 1024px) {
          font-size: var(--fs-small);
          font-weight: var(--fw-400);
          text-decoration: underline;
        }

        &:hover {
          color: var(--primary-variations-hover);
          text-decoration: underline;
        }
      }
    }

    .trending-categories__nav-wrapper {
      display: none;

      @media (width >= 1024px) {
        display: flex;
        gap: var(--spacing-xsmall);
      }
    }
  }

  .trending-categories__carousel-wrapper {
    .splide__track {
      overflow: hidden;
    }
  }

  .splide__list {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: var(--spacing-l) 0;

    .trending-categories__card {
      position: relative;
      background: var(--ui-surface-flat-high);
      transition: transform 0.3s ease;
      flex-shrink: 0;
      aspect-ratio: 212/282;

      @media (width>=768px) {
        aspect-ratio: 215/253;
      }

      @media (width>=1024px) {
        aspect-ratio: 87/103;
      }

      a.trending-categories__card-link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: var(--tertiary-color);
        width: 100%;
        height: 100%;

        .trending-categories__card-image-wrapper {
          height: 100%;
          width: 100%;

          .trending-categories__card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
          }
        }

        .trending-categories__card-content-wrapper {
          width: 100%;
          display: flex;
          position: absolute;
          bottom: 0;
          flex-direction: column;
          justify-content: flex-end;
          background: linear-gradient(180deg, rgb(0 0 0 / 0%) 41.26%, #000 99.89%);
          height: 100%;
          padding: var(--sizing-m) var(--spacing-2xs);
          font: var(--text-medium-regular);

          .trending-categories__card-content {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;

            .trending-categories__title-wrapper {
              display: flex;
              flex-direction: column;
              gap: 11px;
            }

            .icon {
              width: 14px;
              height: 14px;

              @media (width>=768px) {
                width: 15.325px;
                height: 15.325px;
              }

              @media (width>=1024px) {
                width: 23.333px;
                height: 23.333px;
              }
            }
          }

          * {
            opacity: 0;
          }

          @media (width >= 1024px) {
            padding: var(--sizing-xl) var(--sizing-m);
            line-height: normal;
          }

          .trending-categories__card-title {
            color: var(--tertiary-color);
            font-feature-settings:
              'liga' off,
              'clig' off;
            font-size: var(--fs-xlarge);
            font-style: normal;
            font-weight: var(--fw-500);
            line-height: normal;

            @media (width >= 768px) {
              font-size: var(--fs-medium);
              line-height: normal;
            }

            @media (width >= 1024px) {
              font-size: var(--fs-xlarge);
              line-height: normal;
            }
          }

          .trending-categories__card-footer {
            display: flex;
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: var(--spacing-xxsmall);

            .trending-categories__card-price-wrapper {
              display: flex;
              flex-flow: row wrap;
              color: var(--border-color);
              align-items: center;
              gap: var(--spacing-xxsmall);
              font-weight: var(--fw-400);
              font-feature-settings:
                'liga' off,
                'clig' off;
              font-size: var(--fs-medium);
              line-height: normal;

              @media (width>=768px) {
                font-size: var(--fs-xsmall);
                line-height: normal;
              }

              @media (width>=1024px) {
                font-size: var(--fs-medium);
                line-height: normal;
              }
            }
          }
        }
      }

      &.is-active,
      &:hover {
        transform: scaleY(1.05);
        z-index: 10;

        a.trending-categories__card-link {
          text-decoration: none;

          .trending-categories__card-content-wrapper * {
            opacity: 1;
          }
        }
      }
    }

    .splide {
      visibility: visible !important;
    }
  }

  /* Shimmer UI Style */
  .shimmer__list {
    display: flex;
    gap: var(--spacing-10);
    padding: 0 var(--sizing-l);

    @media (width >= 1024px) {
      gap: var(--spacing-medium);
      padding: 0 var(--container-margin);
    }
  }

  .shimmer__card {
    width: calc(100% / 2);
    height: 258px;

    @media (width >= 768px) {
      width: calc(100% / 3);
      height: 280px;
    }

    @media (width >= 1024px) {
      width: calc(100% / 4);
      height: 315px;
    }
  }

  @media (width < 1024px) {
    .shimmer--desktop-only {
      display: none !important;
    }
  }
}