/* 🚧 WIP 🚧: BEM naming convention needs to be completed for these styles (.block, .block-box, .img-box, etc) */
.cpap__plp-best-sellers.cpap__plp-best-sellers-part-finder {
  .cpap__plp-best-sellers__container {
    margin: 0;
    padding: 0 0 72px 0;
    .cpap__plp-best-sellers__title {
      margin-bottom: 8px;
    }
    .cpap__plp-best-sellers__carousel--most-popular {
      overflow: hidden;
      position: initial;

      .swiper-slide {
        padding: 16px;

        flex-basis: 100%;

        @media (min-width: 556px) {
          flex-basis: 50%;
        }

        @media (min-width: 992px) {
          flex-basis: 33.33%;
        }

        @media (min-width: 1200px) {
          flex-basis: 25%;
        }

        .block {
          box-shadow: none;

          &:hover {
            border-color: transparent;
            .img-box {
              img {
                animation: cpap-slide-up 7s linear infinite;
              }
            }
          }
        }
        .block-box {
          border-radius: 16px;
          background: #fff;
          box-shadow: 0px -4px 36px 0px rgba(0, 0, 0, 0.08);
          padding: 50px 24px 24px 24px;
          .img-box {
            width: 100%;
            max-width: 232px;
            height: 174px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px auto;
            &::before {
              display: none;
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .text-box {
            text-align: left;
            @media (max-width: 1024px) {
              text-align: center;
            }
          }
          .cpap__brand-badge {
            padding: 0;
          }
          h3 {
            font-size: 14px;
            color: #2e2e2e;
            font-weight: 500;
            line-height: 17px;
          }
        }
      }
      .swiper-button-next,
      .swiper-button-prev {
        background: #fff;
        top: 22px;
        right: 20px;
        @media (max-width: 1024px) {
          display: none;
        }
      }
      .swiper-button-prev {
        left: initial;
        right: 76px;
      }

      @media (max-width: 1024px) {
        .swiper-pagination {
          display: flex !important;
        }
      }
    }
  }
}