.product-detail-page

  .product-detail
    +flex(space-between, center)
    +flex-rows


    .specs-holder
      border-top: $productOverviewBorder 1px solid
      padding: 15px 16px

      h3
        margin: 0 0 10px
        +bold
        font-size: 14px
        line-height: 17px
        color: $mobileBlack

      .composition
        width: 100%
        margin-bottom: 12px

        tr
          +flex(space-between, flex-start)
          &:nth-child(odd)
            background: #F8F7F6

          td
            padding: 5px 0
            vertical-align: top
            color: $mobileBlack
            font-size: 13px
            line-height: 15px
            +regular

            &.composition-quantity
              padding: 5px 0 5px 10px
              width: 50px

            &.composition-class
              width: calc((100% - 50px) / 5 * 2)

            &.composition-type
              padding-right: 10px
              width: calc((100% - 50px) / 5 * 3)

            &.composition-note
              padding-left: 0
              width: calc(100% - 50px)
              color: $light-grey
              +italic

          &.composition-header
            td
              +bold
      .warning
        width: 100%
        +flex(center, center)
        background-color: $mobileFilterWarning
        box-sizing: border-box
        border: 1px solid $semiBlue

        color: $mobileFilterWarningText
        font-size: 14px
        line-height: 14px
        +regular
        padding: 8px 16px

    .mobile-order
      width: 100%
      padding-top: 15px
      border-top: $productOverviewBorder 1px solid
      form
        padding: 0 16px 0 30px
        +flex(space-between, center)
        &:after
          display: none
        .quantity-holder
          width: 60px
          height: 34px
          input
            width: 100%
            height: 100%
            display: block
            border-radius: 4px
            border: 1px solid $productOverviewBorder
            +flex(center, center)
            color: $grey
            +regular
            font-size: 18px
            line-height: 22px
            text-align: center
            &:focus
              outline: none
              border-color: #9ecaed
              box-shadow: 0 0 10px #9ecaed
        .btn-holder
          width: calc(100% - 78px)
          height: 50px
          >.btn
            background-color: $blue
            +flex(center, center)
            border-radius: 6px
            height: 100%
            width: 100%
            position: relative
            span
              color: white
              +regular
              font-size: 17px
              line-height: 19px
              width: 100%
              +flex(center, center)
              height: 100%
              &:before
                content: ''
                display: inline-block
                margin-right: 10px
                +icon-sprite-mobile(-115px -90px, 24px, 22px)

            input
              display: block
              width: 100%
              height: 100%
              position: absolute
              left: 0
              top: 0
              border-radius: 6px
              opacity: 0

      .discount-tip
        +regular
        padding: 10px 30px
        font-size: 14px
        line-height: 17px
        color: $mobileBlack

      // Discount bar
      .product-discount-bar
        width: 100%
        height: 32px
        border-top: $productOverviewBorder 1px solid
        border-bottom: $productOverviewBorder 1px solid
        +flex(space-between, center)

        li
          width: 25%
          border-right: $productOverviewBorder 1px solid
          color: $mobileBlack
          font-size: 14px
          line-height: 15px
          +flex(center, center)
          height: 100%
          +regular

          &:last-child
            border-right: none
          &.active
            +bold
            font-size: 14px
            line-height: 15px
            background-color: $pastel-green
            color: white

  .selling-points-mobile
    padding: 20px 16px
    +flex(flex-start, center)

    ul
      li
        +regular
        font-size: 14px
        line-height: 16px
        color: $mobileBlack
        display: block
        margin-bottom: 8px
        &:last-of-type
          margin-bottom: 0

        &:before
          content: ''
          display: inline-block
          margin-right: 10px
          +icon-sprite-mobile(-50px -70px, 17px, 17px)
          position: relative
          top: 4px