.cart-page
  .cart-block
    header
      border-bottom: 2px solid $productOverviewBorder
      .header-placeholder
        +flex(space-between, center)
        padding: 0 16px
        height: 40px
        border-bottom: 2px solid $productOverviewBorder
        h1
          +bold
          color: $blue
          font-size: 16px
          line-height: 19px

    .cart-row
      padding: 16px
      border-bottom: 2px solid $productOverviewBorder
      +flex(space-between, center)

      .product-image
        width: 75px
        +flex(center, center)
        max-height: 95%
        a
          +flex(center, center)
        img
          width: 80%
      .product-details
        width: calc(100% - 85px)
        position: relative
        .product-link
          margin: 0px 0 8px
          text-decoration: none
          padding-right: 20px
          display: block
          .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
        .delete
          position: absolute
          right: 0
          top: 0
          text-decoration: none
          +icon-sprite-mobile(-90px -70px, 14px, 14px)
          cursor: pointer

      .product-order-details
        +flex(space-between, center)
        padding: 5px 0

        .quantity-holder
          width: 40px
          height: 30px
          input
            width: 100%
            height: 100%
            display: block
            border-radius: 4px
            border: 1px solid $productOverviewBorder
            +flex(center, center)
            color: black
            +regular
            font-size: 15px
            line-height: 17px
            text-align: center
            &:focus
              outline: none
              border-color: #9ecaed
              box-shadow: 0 0 10px #9ecaed

        .price-holder
          text-align: right
          .price
            +bold
            font-size: 14px
            line-height: 16px
            color: $dark-grey
          .discount
            .original-price
              font-size: 13px
              line-height: 16px
              margin-left: 5px
              text-decoration: line-through
              color: $light-grey
              +regular

            .percentage
              font-size: 14px
              line-height: 16px
              color: $darkOrange
              +regular
            &.extra
              font-size: 14px
              line-height: 16px
              color: $light-grey
              +regular
      &.empty-cart
        padding: 40px 0
        background-color: $mobileGray
        display: block

        p
          text-align: center
          +semibold
          font-size: 14px
          line-height: 18px
          color: $mobileBlack
        .btn
          background-color: $blue
          border-radius: 12px
          height: 45px
          width: 235px
          margin: auto
          position: relative
          color: white
          +flex(center, center)
          +bold
          font-size: 17px
          line-height: 19px
          text-decoration: none
          &:after
            content: '›'
            +semibold
            color: white
            font-size: 35px
            line-height: 28px
            position: absolute
            right: 15px
            top: -3px
            height: 100%
            +flex(center,center)

    .summary
      .summary-row
        padding: 16px 12px
        border-bottom: 2px solid $productOverviewBorder
        position: relative
        .title
          +bold
          font-size: 14px
          line-height: 16px
          color: $dark-grey
          width: calc(100% - 70px)
          display: block
        .price
          position: absolute
          right: 16px
          top: 17px
          +bold
          font-size: 14px
          line-height: 16px
          color: $dark-grey
          +flex(flex-end, center)

          .check
            +icon-sprite-mobile(-10px -90px, 16px, 16px)
            display: inline-block
            margin-right: 8px

        .description
          width: calc(100% - 70px)
          display: block
          color: $light-grey
          font-size: 14px
          line-height: 16px
          +regular

    .coupon-holder
      padding: 5px 16px 16px
      .title
        +regular
        font-size: 14px
        line-height: 17px
        color: $mobileBlack

      .coupon-input-holder
        width: 240px
        height: 34px
        position: relative
        margin-top: 5px

        #couponCode
          width: 100%
          height: 100%
          +semibold
          font-size: 14px
          line-height: 17px
          color: $mobileBlack
          border-radius: 4px
          border: 1px solid $mobileBorderColor
          padding: 2px 40px 2px 5px
          &:focus
            outline: none
            border-color: #9ecaed
            box-shadow: 0 0 10px #9ecaed
        .coupon-code-button
          width: 40px
          height: 100%
          border-radius: 4px
          background-color: $blue
          position: absolute
          top: 0
          right: 0
          +flex(center, center)
          &:after
            content: '›'
            +semibold
            color: white
            font-size: 30px
            line-height: 28px
            height: 100%
            position: relative
            top: -2px
            +flex(center,center)
          input
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            opacity: 0
            z-index: 10

      .error-coupon-holder
        color: #C42E44
        +semibold
        font-size: 14px
        line-height: 17px
        +flex(flex-start, center)
        margin-top: 10px
        .icon
          +icon-sprite-mobile(-10px -70px, 16px, 16px)
          display: inline-block
          margin-right: 5px
        &.hide, &.ng-hide
          display: none

      .active-coupon-holder
        color: $pastel-green
        +bold
        font-size: 14px
        line-height: 17px
        +flex(flex-start, center)
        margin-top: 10px
        .icon
          +icon-sprite-mobile(-10px -90px, 16px, 16px)
          display: inline-block
          margin-right: 8px
        &.hide, &.ng-hide
          display: none
    .checkout-button
      padding: 16px
      >.btn
        background-color: $blue
        +flex(center, center)
        border-radius: 6px
        height: 50px
        width: 100%
        position: relative
        &:after
          content: '›'
          +semibold
          color: white
          font-size: 35px
          line-height: 28px
          position: absolute
          right: 15px
          top: -3px
          height: 100%
          +flex(center,center)

        span
          color: white
          +regular
          font-size: 17px
          line-height: 19px
          &.lock
            +icon-sprite-mobile(-10px -110px, 13px, 16px)
            display: inline-block
            margin-left: -12px
            margin-right: 10px
            margin-top: -4px
        input
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          display: block
          opacity: 0

    .cart-categories
      background-color: $mobileGray
      padding: 18px 8px 13px
      border-top: 2px solid $productOverviewBorder
      h4
        margin: 0 0 16px
        padding: 0 8px
        +bold
        font-size: 14px
        line-height: 17px
        color: black

      .cart-category
        border: 2px solid $mobileBorderColor
        background-color: white
        margin-bottom: 2px
        a
          +flex(flex-start, center)
          padding: 10px 0
          text-decoration: none
          position: relative

          &:after
            content: '›'
            +semibold
            color: $blue
            font-size: 35px
            line-height: 35px
            position: absolute
            right: 15px
            top: -2px
            height: 100%
            +flex(center,center)

          .image-holder
            +flex(center, center)
            width: 80px
            margin-right: 5px
            img
              width: 75%

          span
            +regular
            font-size: 14px
            line-height: 16px
            color: $mobileBlack


+media-query(380px)
  .cart-page
    .cart-block
      header
        .header-placeholder
          display: block
          height: auto
          padding-left: 0
          h1
            padding-left: 22px