.products-bestsellers-wrapper {
   margin-bottom: 35px;
   position: relative;

   .btn-show-all-container {
      width: 100%;
      position: absolute;
      bottom: -17px;
      text-align: center;
   }

   .btn-show-all {
      font-size: $font-size-smaller;
      padding: 6px 13px;
   }
}

.product-bestseller-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px 10px;
   border-bottom: 1px solid $border-color;

   p {
      margin: 0;
      line-height: $line-height-md;
   }

   a:not(.btn) {
      @include underline-never;

      color: $text-dark;
   }

   .product-link {
      display: flex;
      align-items: center;
      flex: 1;
   }

   .product-position {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid $border-color;
      font-weight: $font-weight-bold;
      margin-right: 15px;
   }

   .img {
      width: 58px;
   }

   .catalog-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .product-bestseller-text {
         flex: 1;
      }

      .title {
         margin-bottom: 2px;
         padding-right: 20px;
      }

      .perex {
         font-size: $font-size-smaller;
         color: $text-muted;
      }
   }

   .availability {
      width: 200px;
      margin-right: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      p {
         display: flex;
         align-items: center;
      }

      .fc {
         margin-right: 6px;
      }

      .icons_check-circle {
         color: $state-success;
      }
   }

   .availability-single {
      justify-content: flex-end;
   }

   .price-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 130px;
   }

   .price {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      strong {
         font-size: $font-size-larger;
      }

      .strike-price {
         font-weight: $font-weight-bold;
         color: $text-muted;
      }

      .unit-price {
         font-size: $font-size-smaller;
         color: $text-muted;
      }
   }


   .catalog-btn {
      width: 200px;
   }

   .submit-block {
      margin: 0;
   }

   .btn,
   .btn-insert {
      @include delete-after;
      @include btn-primary;

      padding-left: 0;
      padding-right: 0;
   }

   @include haf {
      .title {
         text-decoration: underline;
      }
   }
}

@media screen and (max-width: $xxl - 1) {
   .product-bestseller-item {
      .availability {
         flex-direction: column;
         align-items: flex-start;
         width: 140px;
         margin: 0 20px;
      }
   }
}

@media screen and (max-width: $xl - 1) {
   .product-bestseller-item {
      .availability {
         display: none;
      }

      .catalog-btn {
         width: 150px;
      }
   }
}

@media screen and (max-width: 599px) {
   .products-bestsellers-wrapper {
      margin-bottom: 15px;

      .btn-show-all-container {
         display: none;
      }
   }

   .products-bestsellers-items {
      display: flex;
      padding-top: 10px;
   }

   .product-bestseller-item {
      width: percentage(calc(1 / 3));
      display: block;
      padding: 0 10px;
      border-left: 1px solid $border-color;
      border-bottom: 0;

      &:first-child {
         border-left: 0;
      }

      .product-position {
         margin-right: 0;
      }

      .product-link {
         flex-direction: column;
      }

      .img {
         width: auto;
         margin: 15px auto 5px;
      }

      .catalog-content {
         padding: 0;
         flex-direction: column;
         text-align: center;

         .title {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 71px;
            margin-bottom: 5px;

            strong {
               display: block;
            }
         }

         .perex {
            display: none;
         }
      }

      .price-wrapper {
         width: auto;

      }

      .catalog-btn {
         display: none;
      }
   }
}

@media screen and (max-width: 499px) {
   .products-bestsellers-wrapper {
      width: 100%;
      overflow-x: scroll;
      margin-bottom: 0;
   }

   .products-bestsellers-items {
      overflow-x: scroll;
      width: 600px;
      padding-bottom: 15px;
   }
}
