.fxm-coupon-item {
  p {
    margin-bottom: 0;
  }
  .fxm-coupon-item-wrap {
    background: rgba(237, 33, 33, 0.05);
    border-radius: @coupon-item-radius;
    position: relative;
    &::before, &::after {
      content: '';
      background-color: #FFFFFF;
      position: absolute;
      width: @coupon-item-square-half;
      height: @coupon-item-square;
    }
    &::before {
      top: @coupon-item-oy;
      left: 0;
      border-radius:0 @coupon-item-square @coupon-item-square 0;
    }
    &::after {
      top: @coupon-item-oy;
      right: 0;
      border-radius:@coupon-item-square 0 0 @coupon-item-square;
    }
    .item-top-box {
      padding:  @coupon-item-top-padding @coupon-item-padding @coupon-item-box-bottom-padding  @coupon-item-padding;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      & > label {
        margin-right: 12px;
      }
      .collected-img {
        width: @coupon-collected-img-width;
        position: absolute;
        right: 4px;
        top: 0;
      }
      // .isPLT {
      //   background: linear-gradient(90deg, #FF965F 0%, #FF7623 100%);
      //   border-radius: @coupon-item-radius @coupon-item-store-radius @coupon-item-store-radius;
      //   color: #FFFFFF;
      //   padding: 0 @coupon-item-store-span-padding;
      //   font-weight: normal;
      //   position: absolute;
      //   left: 0;
      //   top: 0;
      //   font-size: @coupon-item-store-span-font;
      //   height: @coupon-item-store-span-height;
      //   line-height: @coupon-item-store-span-height;
      //   font-family: var(--light-font, SFProText-Medium, SFProText);
      // }
      .item-price {
        font-weight: bold;
        color: #FF5151;
        font-family: var(--regular-font, SFProText-Medium, SFProText);
        height: @coupon-item-price-height;
        text-align: left;
        display: flex;
        align-items: baseline;
        font-size: @coupon-item-price-span-font;
        .symbol {
          font-family: DINPro-Bold;
          font-size: @coupon-item-price-font;
        }
        .per-off{
          display: inline-block;
        }
        .percentage {
          font-family: DINPro-Bold;
          font-size: @coupon-item-price-font;
          color: #FF5151;
          line-height: 22*@hd;
        }
        .off {
          font-family: SFProText-Bold;
          font-size: @coupon-item-price-font;
          color: #FF5151;
          line-height: 12*@hd;
        }
      }
      .store-price {
        color: #FE7608 !important;
      }
      .invalid-price {
        color: rgba(0,0,0,0.85) !important;
      }
      .item-coupon-condition {
        font-size: @coupon-item-condition-font;
        color: rgba(0, 0, 0, 0.85);
        height: @coupon-item-condition-height;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
      }
      .item-coupon-time {
        font-size: @coupon-item-store-span-font;
        font-family: var(--light-font, SFProText-Medium, SFProText);
        font-weight: 500;
        text-align: left;
        color: rgba(0, 0, 0, 0.65);
      }
      .item-collect-btn {
        display: flex;
        align-items: center;
        background-image: linear-gradient(90deg, #FF5252 1%, #FF3434 100%);
        border-radius: @coupon-item-btn-radius;
        height: @coupon-item-btn-height;
        // line-height: @coupon-item-btn-height;
        font-size: @coupon-item-store-font;
        color: #F7F7F7;
        padding: 0 @coupon-item-btn-padding;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .store-btn {
        background-image: linear-gradient(90deg, #FF965F 1%, #FF7623 100%);
      }
      .collected-btn {
        border-radius: @coupon-item-btn-radius;
        border: 1px solid var(--theme-color, #FF1659);
        color: var(--theme-color, #FF1659);
        background: transparent;
      }
      .invalid-status-img {
        width: 80 * @hd;
        height: 80 * @hd;
        position: absolute;
        right: 0.32rem;
      }
      .store-more-btn {
        border: 1px solid #FE7608;
        color: #FE7608;
      }
      // .coupon-item-selected {
      //   width: @coupon-item-img-width;
      //   margin-right: @coupon-item-btn-padding;
      // }
    }
    .item-cut-off {
      height: 0;
      margin: 0 @coupon-item-cut-margin;
      border: 1px dashed #FFD7D7;
    }
    .store-cut {
      border: 1px dashed rgba(254,118,8,0.20);
    }
    .invalid-cut {
      border: 1px dashed rgba(0,0,0,0.10);
    }
    .item-bottom-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 @coupon-item-bottom-padding;
      .store-wrap {
        margin: 8 *@hd 0;
        display: flex;
        align-items: center;
        .store-img {
          width: @coupon-item-down-store-width;
          height: @coupon-item-down-store-width;
          margin-right: @coupon-item-down-store-margin;
        }
        p {
          font-family: var(--light-font, SFProText-Medium, SFProText);
          color: #3A2E2E;
          font-size: @coupon-item-store-font;
          margin-bottom: 0;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
      .detail-txt {
        font-size: @coupon-item-store-span-font;
        font-family: var(--light-font, SFProText-Medium, SFProText);
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
        margin: 10 *@hd 0;
      }
      .down-img {
        width: @coupon-item-down-icon-width;
        height: @coupon-item-down-icon-width;
      }
    }
  }
  .store-bg {
    background: rgba(254,118,8,0.08);
  }
  .invalid-bg {
    background: rgba(0,0,0,0.08) !important;
  }
  .item-detail-warp {
    background: #FAFAFA;
    border: 1px solid rgba(0,0,0,0.08);
    // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    font-size: @coupon-item-detail-font;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    padding: @coupon-item-detail-padding-top @coupon-item-detail-padding-left @coupon-item-detail-padding-left;
    color: rgba(0, 0, 0, 0.65);
    border-radius: 0px 0px @coupon-item-detail-radius @coupon-item-detail-radius;
    text-align: left;
    border-top: 0;
  }
}



