.cmp-kitchen-category-nav {
  padding: 40px;
  display: flex;
  justify-content: space-between;
  font-family: Archivo, sans-serif;
  max-width: 1440px;
  margin: 0 auto;
  @media screen and (max-width: 650px) {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }
  .cmp-kitchen-category-nav__header {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .cmp-kitchen-category-nav__title {
      font-size: 44px;
      font-weight: 500;
      color: #232426;
      width: 90%;
      @media screen and (max-width: 650px) {
        font-size: 28px;
        width: 100%;
      }
    }
    .cmp-kitchen-category-nav__subtitle {
      font-size: 16px;
      font-weight: 400;
      color: #696f75;
    }
  }
  .cmp-kitchen-category-nav__pills {
    display: flex;
    gap: 10px;
    @media screen and (max-width: 650px) {
      display: flex;
      gap: 10px;
      overflow: scroll;
      /* Hide scrollbar for Firefox */
        scrollbar-width: none;
      /* Hide scrollbar for IE/Edge */
      -ms-overflow-style: none;
    }
    .cmp-kitchen-category-nav__pills::-webkit-scrollbar {
        display: none;
      }
    .cmp-kitchen-category-nav__pill {
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      overflow: hidden;
      @media screen and (max-width: 650px) {
        min-width: 128px;
      }
      .category-img-plp {
        height: 128px;
        width: 128px;
        border-radius: 4px;
        transition: transform 0.4s ease;
      }
      .white-icon-check-plp {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 1;
      }
      p {
        font-size: 12px;
        font-weight: 500;
        color: #53565a;
      }
    }
    .cmp-kitchen-category-nav__pill:hover {
      .category-img-plp {
        transform: scale(1.06);
      }
    }
    .cmp-kitchen-category-nav__pill--active {
      .category-img-plp {
        filter: brightness(0.5);
      }
      p {
        font-weight: 700;
        color: #232426;
      }
      .white-icon-check-plp {
        display: block;
        height: 62px;
        width: 62px;
      }
    }
  }
}