// Cart Rows
// ==========================================================================

.cart-rows
  //+grid-margin-s($bottom: 1)

// Cart Row
.cart-row
  position: relative
  border-bottom: 1px solid #E7E4E1
  overflow: hidden
  @extend %clearfix
  &.empty-cart
    +grid-margin-s($bottom: 1)


  // Product Figure
  .product-image
    position: relative
    float: left
    width: 10%

    +grid-padding-s(.5,.5,.5,.5)

    img
      width: 100%

  .product-details
    position: relative
    float: left
    width: 90%


    .product-title
      position: relative
      width: 100%
      +grid-padding-s( .5,.5,.5,.5)
      +type-basic
      .product-link
        width: 62.9629%
        float: left
        margin-bottom: 10px
      .between
        width: 30%
        float: left

      a:hover span
        color: $blue !important

      span
        display: block
        color: $grey
        width: 62.9629%

      .title
        +bold
        color: $dark-grey

      .number
        color: #b3b3b3

    // Product Information
    .product-composition
      float: left
      width: 62.96294%

      +grid-padding-s($bottom: .5, $left: .5, $right: 2)

      table.composition, table.composition-inner-table

        .composition-header
          display: none

        tr:nth-child(2n + 1)
          background: none

        td
          padding: 0
          color: #B3B3B3

          &.composition-note
            padding-left: 0

    // Product Price
    .product-order-details
      float: right
      width: 37.037%
      +grid-padding-s($bottom: .5, $left: .5, $right: .5  )

    // Delete button
    .delete
      display: block
      +position(absolute,0 20px null null)
      width: 12px
      height: 12px
      +grid-padding-s(.5, .5, .5, .5)
      +box-sizing(content-box)

      &::after
        display: block
        +position(absolute, 50% 20px null null)
        width: 12px
        height: 12px
        margin: -6px 0 0 -6px
        @extend %icon-sprite
        +icon-sprite(8,4,12px,12px)
        content: ''

    // Quantity
    .quantity-holder
      float: left
      box-shadow: none
      +grid-margin-s($right: 0, $bottom: .25)
      +transition(all 0.2s ease-out)
      &.short-glow
        box-shadow: 0 0 5px $blue
        +transition(all 0.2s ease-out)
      &.no-glow
        box-shadow: none

    // Price + discount
    .price-holder
      float: right
      text-align: right

      .price
        display: block
        color: $dark-grey
        +regular
        font-size: 2.4em // 20px
        line-height: 1

      .discount
        margin-top: 0.4em
        font-size: 1.4em

        .percentage
          color: #ff7d20
        .original-price
          text-decoration: line-through
          color: #b3b3b3

    .discount-holder
      +grid-margin-s($top: .5)

      .next-discount
        color: $green
        font-size: 1.6em
        height: 20px
        &.hoover
          color: $blue