.category-buckets__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sizing-xl);
  padding: var(--sizing-xl) 0;

  @media (width >= 1024px) {
    margin: auto;
    padding: 50px 0 0;
    gap: var(--sizing-3xl);
  }

  .category-buckets__header {
    padding: 0 var(--sizing-l);

    @media (width >= 1024px) {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0 var(--container-margin);
    }

    .category-buckets__header-content {
      .category-buckets__title * {
        font-size: var(--fs-large);
        font-weight: var(--fw-400);
        line-height: 120%;
        letter-spacing: -0.3px;
        margin-bottom: var(--spacing-xsmall);

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

      .category-buckets__subtitle {
        color: var(--ui-subtext);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-500);
        letter-spacing: -0.18px;
        text-transform: uppercase;
        margin-bottom: var(--spacing-xsmall);
        line-height: 1.44rem;

        @media (width >= 1024px) {
          font-size: var(--fs-xmedium);
          letter-spacing: -0.27px;
          line-height: 2.16rem;
        }
      }

      .category-buckets__description {
        font: var(--text-medium-regular);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-300);
        line-height: 13.2px;
        letter-spacing: -0.18px;

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

      .category-buckets__cta {
        padding-top: var(--sizing-m);
        font-size: var(--fs-small);
        font-weight: var(--fw-400);
        line-height: var(--lh-small);

        @media (width >= 1024px) {
          padding-top: var(--sizing-xl);
        }

        .button--secondary {
          padding: var(--spacing-xsmall) var(--sizing-m);

          @media (width >= 1024px) {
            padding: 11px var(--sizing-m);
            min-width: 189px;
            font-size: var(--fs-medium);
            line-height: var(--lh-small);
          }
        }
      }
    }

    .category-buckets__nav-wrapper {
      display: none;

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

  .category-buckets__categories-wrapper {
    overflow: hidden;
    padding: 0 var(--sizing-l);

    @media (width >= 1024px) {
      margin-bottom: var(--sizing-xl);
      position: relative;
      z-index: 2;
      padding: 0 var(--container-margin);
    }

    .category-buckets__categories {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      position: relative;
      gap: var(--sizing-s);

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

      .category-buckets__category {
        flex: 0 0 auto;
        background: none;
        border: none;
        color: var(--neutrals-sub-texts-paragraphs);
        font: var(--text-small-bold);
        cursor: pointer;
        padding: var(--spacing-xsmall) var(--spacing-none) var(--sizing-s);
        word-break: keep-all;
        white-space: nowrap;

        @media (width >= 1024px) {
          padding: var(--spacing-xsmall) var(--sizing-l) var(--sizing-xl);
          font-size: var(--fs-xmedium);
          line-height: var(--lh-large);
          min-width: 108px;
        }
      }
    }

    .category-buckets__card-content-wrapper--video {
      cursor: pointer;
    }

    .category-buckets__modal-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;

      .icon {
        width: 46px;
        height: 46px;
      }

      @media (width >= 1024px) {
        .icon {
          width: 75px;
          height: 75px;
        }
      }
    }
  }

  .category-buckets__categories-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
  }

  .splide__list {
    display: flex;
    flex-direction: row;
    list-style: none;

    .category-buckets__card {
      position: relative;
      flex: 0 0 calc(80% - 8px);
      background: var(--ui-surface-glass-thin);
      width: 236px;
      height: 297px;
      transition: width 0.3s ease;
      border: 1px solid var(--border-gray);

      @media (width >= 768px) {
        flex: 0 0 auto;
      }

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

    a.category-buckets__card-content-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      overflow: hidden;
      text-decoration: none;
      color: var(--neutrals-sub-texts-paragraphs);

      img {
        height: 100%;
        object-fit: cover;
      }

      &:hover {
        text-decoration: none;
      }

      picture {
        height: 100%;

        img {
          height: 100%;
          width: 100%;
        }
      }

      .category-buckets__card-image {
        width: 100%;
        height: 158px;
        object-fit: cover;
        transition: transform 0.5s ease;

        @media (width >= 1024px) {
          width: 100%;
          height: 195px;
        }
      }

      .category-buckets__card-content {
        width: 100%;
        min-height: 123px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--spacing-xs);
        padding: var(--sizing-m) var(--spacing-2xs);
        font: var(--text-medium-regular);

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

        .category-buckets__card-label {
          font-size: var(--fs-xmedium);
          font-weight: var(--fw-500);

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

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

          .icon {
            width: 34px;
            height: 34px;
          }

          .category-buckets__card-price-wrapper {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            gap: var(--spacing-xxsmall);
            font-size: var(--fs-small);
            font-weight: var(--fw-400);

            .category-buckets__card-price {
              font-weight: var(--fw-600);
            }
          }

          @media (width >= 1024px) {
            .category-buckets__card-price-wrapper {
              font-size: var(--fs-large);
            }

            .icon {
              width: 40px;
              height: 40px;
            }
          }
        }
      }
    }

    .splide {
      visibility: visible !important;
    }
  }

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

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

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

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

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

    @media (width >= 1440px) {
      width: calc(100% / 5);
    }
  }

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

.modal dialog {
  .modal-container.modal-container--category-buckets {
    background: transparent;
    padding: 20px;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);

    @media (width >=768px) {
      width: 623px;
      padding: 0;
    }

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

    .modal-header {
      margin-bottom: 7px;

      @media (width >= 1024px) {
        position: absolute;
        right: 8px;
        top: 8px;
        left: unset;
        z-index: 1;
      }

      .close-button-container {
        justify-content: flex-end;

        .close-button {
          transform: none;
          position: unset;

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

          .icon.icon-close {
            background-image: url('/genuine-accessories/icons/close-light.svg');
          }
        }
      }
    }

    .modal-content {
      width: 100%;
      height: 168px;

      @media (width >=768px) and (width < 1024px) {
        height: 327px;
      }

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

      .category-buckets__modal-content {
        .category-buckets__card-content-wrapper {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          position: relative;

          img {
            object-fit: cover;
            width: 100%;
            height: 168px;

            @media (width >=768px) and (width < 1024px) {
              height: 327px;
            }

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

          .category-buckets__card-details {
            .category-buckets__card-content {
              position: unset;
              gap: 6px;
              padding: 12.8px;
              height: 168px;

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

          .category-buckets__modal-play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;

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

              @media (width >=768px) and (width < 1024px) {
                width: 60px;
                height: 60px;
              }

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

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .category-buckets__modal-video-wrapper {
          overflow: hidden;

          video {
            object-fit: cover;
            width: 100%;
            height: 168px;

            @media (width >=768px) and (width < 1024px) {
              height: 327px;
            }

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