.fxm-product-list-item {
  width: 100%;
  background: #ffffff;
  position: relative;

  &-markdownRatioWrap {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 104px;
  }

  .fxm-price {
    margin: 0;
  }
  .fxm-progress-bar {
    background-color: var(--theme-color, #FF1659);
    border: none;
    border-radius: 9px;
    height: 12px !important;
  }
  .fxm-product-list-item-pb8 {
    padding-bottom: 0 !important;
  }
  &-mb16 {
    margin-bottom: @product-item-padding-8;
  }
  &-img-cot {
    width: 38%;
    height: 0;
    padding-top: 38%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;

    img {
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
  &-mantle {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.45);
  }

  &-sold-out {
    width: @product-item-sold-out-height-64;
    height: @product-item-sold-out-height-64;
    text-align: center;
    line-height: @product-item-sold-out-height-64;
    background: rgba(0, 0, 0, 0.65);
    border-radius: @product-item-sold-out-radius-32;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    font-weight: 400;
    color: #ffffff;
    font-size: @product-item-sold-out-font-size;
  }
  &-progress-box {
    display: flex;
    height: @product-item-progress-height-12;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    padding-left: @product-item-progress-margin-left-12;
    padding-right: @product-item-progress-height-12;
    padding-bottom: @product-item-progress-padding-bottom-1;
    margin-top: @product-item-progress-margin-top-9;
  }
  &-progress {
    width: 100%;
    height: @product-item-progress-height-12;
    background: #f5d4d4;

    border-radius: @product-item-progress-margin-top-9;
  }
  &-progress-txt {
    position: absolute;
    font-size: @product-item-progress-txt-size-10;
    font-family: var(--regular-font, SFProText-Medium, SFProText);
    font-weight: 500;
    color: #ffffff;
  }
  &-btn-cart {
    display: block;
    width: @product-item-btn-cart-size-24;
    height: @product-item-btn-cart-size-24;
    border-radius: @product-item-btn-cart-border-radius-50;
    background: #EFEFEF url('./../../assets/icon-cart.png') no-repeat center center;
    background-size: 75%;
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  &-info-cot {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  &-cot {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
  }
  &-pirce-tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: @product-item-padding-4;
    margin-top: @product-item-padding-8;
  }
  &-pb8 {
    padding-bottom: @product-item-padding-8 !important;
  }
  &-name {
    padding: 0 @product-item-margin-12;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: @product-item-cot-33;
    line-height: @product-item-line-height-16;
    font-size: @product-item-font-14;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    word-break: break-all;
  }
  &-rate {
    padding: 0 @product-item-margin-12;
    line-height: 1.1;
    margin-top: @product-item-padding-10;
  }
  &-mr4 {
    margin-right: @product-item-padding-4;
  }
  &-tags {
    padding: 0 @product-item-margin-12;
    width: 100%;
    overflow: hidden;
    margin-bottom: @product-item-padding-2;
  }
  &-tags-item-off {
    font-size: @product-item-font-10;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    font-weight: 400;
    color: #ffffff;
    display: inline-block;
    padding: @product-item-padding-2 @product-item-padding-4;
    background: linear-gradient(90deg, #ff6b6b 0%, #ff4b4b 100%);
    border-radius: @product-item-padding-4;
  }
  &-tags-item {
    font-size: @product-item-font-10;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    font-weight: 400;
    color: var(--theme-color, #FF1659);
    display: inline-block;
    padding: @product-item-padding-3 @product-item-padding-4;
    background: #fde8e9;
    border-radius: @product-item-padding-4;
  }
  &-market {
    margin-top: @product-item-padding-4;
    font-size: @product-item-font-12;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    padding: 0 @product-item-margin-12 0 @product-item-margin-12;
    text-overflow: ellipsis;
    height: 15px;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
}