.product-block
  .image-holder
    width: 100px
    +flex(center, center)
    max-height: 95%
    min-height: 130px
    position: relative

    img
      width: 80%
    .thumbs
      position: absolute
      display: block
      white-space: nowrap
      bottom: -10px
      left: 20px

      li
        display: inline-block
        overflow: hidden
        width: 40px
        height: 40px
        border-radius: 100%
        margin-left: 10px

        +transition(border-color .3s, box-shadow .3s)

        a
          display: block
          width: 100%
          height: 100%
          border: 2px solid $mobileBorderColor
          border-radius: 100%
          background-size: cover
          background-repeat: no-repeat
          background-position: center

        &.active
          border: none
          a
            border-color: $blue
          img
            +opacity(.5) 

  .product-info
    width: calc(100% - 105px)
    padding-right: 10px
    position: relative
    h2
      margin: 25px 0 15px
      .rule-1
        +bold
        font-size: 14px
        line-height: 16px
        color: $dark-grey
        display: block
        margin-bottom: 2px

      .rule-2
        +regular
        font-size: 14px
        line-height: 16px
        color: $mobileBlack
        display: block
        margin-bottom: 2px

      .rule-3
        +regular
        display: block
        font-size: 14px
        line-height: 16px
        color: $blue
    .article-number
      font-size: 13px
      line-height: 16px
      color: $mobileBlack
      margin: 15px 0
      p
        margin: 0
        white-space: nowrap
        &.supplier-number
          overflow: hidden
          height: 17px
          position: relative
          &:after
            content: ''
            width: 45px
            height: 100%
            position: absolute
            right: 0
            top: 0
            +linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, #fff 100%)
      strong
        display: block
        +semibold
        color: $dark-grey
        font-size: 14px
        line-height: 17px
      span
        display: inline-block
        margin-top: 3px
        +semibold
        &:first-of-type
          margin-top: 0
    .pricing
      margin: 0
      font-size: 14px
      line-height: 16px
      color: $light-grey
      +regular
      .price
        font-size: 16px
        line-height: 18px
        color: $dark-grey
        +bold

    .price-block
      .price
        font-size: 18px
        line-height: 22px
        color: $dark-grey
        +bold
      .original-price
        font-size: 13px
        line-height: 16px
        margin-left: 5px
        text-decoration: line-through
        color: $light-grey
        +regular
      .price-info
        font-size: 14px
        line-height: 16px
        color: $light-grey
        +regular


    .stock
      +semibold
      color: $green
      font-size: 13px
      line-height: 16px
      +flex(flex-start, center)
      margin: 4px 0 15px
      padding-right: 35px

      span
        +flex(flex-start, center)
        width: 30px
        height: 16px
        &:after
          content: ''
          +icon-sprite-mobile(-70px -90px, 16px, 16px)

      &.dt-del_time1,
      &.dt-del_time2,
      &.dt-onRequest
        color: $orange

        span:after
          +icon-sprite-mobile(-30px -140px, 16px, 16px)

    .arrow
      display: block
      position: absolute
      +icon-sprite-mobile(-110px -10px, 16px, 17px)
      right: 20px
      bottom: 20px

  &.product-detail
    .quick-order
      width: 100%
      +flex(space-between, flex-start)
      +flex-rows
      padding-bottom: 18px

      h3
        +bold
        font-size: 16px
        line-height: 18px
        color: $darkOrange
        width: 100%
        padding: 20px 16px
        margin: 0

      .product-info
        h2
          margin-top: 0

      .mobile-order
        padding-top: 5px
        border-top: none