.cart-block
  header
    position: relative
    border-bottom: 1px solid #E7E4E1
    @extend %clearfix

    h2
      float: left
      width: 50%
      +type-h2
      +grid-line-height-s(2)
      +grid-padding-s($left: 1)
      margin: 0

      div
        +grid-line-height-s(2)

    .btn-holder
      position: relative
      top: 15px

  .empty-cart
    +grid-padding-s($left: 1, $right: 1, $bottom: 1)

  // Summary
  // ==========================================================================

  .summary
    //+grid-margin-s($bottom: 1)
    +grid-padding-s($bottom: 1, $top: 1)

    min-height: 390px
    .summary-row
      position: relative
      +grid-padding-s($top: .25, $right: .5, $left: .5)

      &.subtotal-price
        padding-top: 0

        .price
          top: 0

      .title
        display: block
        +grid-margin-s($bottom: .25)
        +semibold
        font-size: 1.5em

      .description
        display: block
        color: #b3b3b3
        font-size: 1.3em

        &.highlight
          padding: 4px 0
          //color: $green
          font-size: 1.5em
          line-height: 1.4

      .price
        display: block
        color: $dark-grey
        +semibold
        font-size: 2em
        line-height: 1
        +grid-position-s($top: 0.25, $right: .5)

      .check
        content: ''
        display: inline-block
        position: relative
        top: 2px
        left: 0
        margin-right: 8px

        @extend %icon-sprite
        +icon-sprite(0,2,16px,16px)

    .total-discount
      background: #f3f3f3
      +grid-padding-s($bottom: .5)

      .discount
        +grid-position-s($top: .5, $right: .5)
        font-size: 2em // 20px

        &::before
          display: block
          position: absolute
          top: 50%
          left: -22px
          z-index: 10
          margin-top: -8px
          @extend %icon-sprite
          +icon-sprite(0,2,16px,16px)
          content: ''

    .shipping-price, .subtotal-price
      .price
        +regular

    .btn-holder
      +grid-margin-s($top: .5 )
  .extra
    border-right: 1px solid #E7E4E1
    +grid-padding-s($top: 1)

  .cart-extra-info
    +grid-padding-s($left: 1, $right: 1, $bottom: 0.5)
    border-bottom: 1px solid #E7E4E1
    @extend %clearfix

    .selling-points
      display: block
      width: 50%
      float: left
  .cart-exhaust-vent
    .image-holder
      +grid-padding-s($left: 1, $top: 1)
      float: left
    .text-holder
      +grid-margin-s($left: 1, $top: 1)
      float: left
      span.exhaust-text
        font-size: 1.5em
        +regular
        color: $grey
      a.btn
        clear: both
        display: block
        margin-top: 10px
        background-color: #BDBAB8
        border-color: #BCB9B7
        &:hover
          background-color: darken(#BDBAB8, 10)
          border-color: darken(#BCB9B7, 10)
  .cart-categories
    +grid-padding-s($left: 1, $right: 1, $bottom: 1, $top: 1)
    .cart-categories-title
      display: block
      +grid-margin-s($bottom: .25)
      +semibold
      font-size: 1.6em
    .cart-categorie
      float: left
      display: block
      border-right: 1px solid #E7E4E1
      padding-right: 20px
      padding-bottom: 20px
      width: 50%
      &:last-child
        border: none
        padding-left: 20px
      .image-holder
        margin-top: 8px
        margin-bottom: 8px
        img
          margin-left: 20px

      .categorie-title
        font-size: 14px
        color: $blue

  // Shipping cost information
  // ==========================================================================
  .shipping-explained
    color: $light-grey
    margin-left: 15px
    font-size: 1.2em
    .title
      padding-left: 2px
      margin-top: 5px
      display: inline-block
    table
      margin-top: 8px
      tr:nth-of-type(even)
        background-color: $productOverviewBackground
      th
        padding: 5px 0
        font-size: 11px
        line-height: 14px
        text-align: right
        color: $lightGreyFont
        vertical-align: baseline
        &:first-child
          text-align: left
        &:nth-child(2)
          width: 30%
        &:last-child
          width: 30%
          padding-right: 5px
        +respond-to-width(1600px)
          font-size: 12px
          padding: 10px 0px 5px 10px
          &:last-child
            padding-right: 0px
      td
        text-align: right
        font-size: 11px
        vertical-align: baseline
        padding: 5px 0
        color: $lightGreyFont

        &:first-child
          text-align: left
        &:last-child
          padding-right: 5px
        +respond-to-width(1600px)
          font-size: 12px
          padding-left: 10px
          &:last-child
            padding-right: 0px
        .decimal
          font-size: 0.75em
          vertical-align: top





  // Misc
  // ==========================================================================

  .btn-holder
    +grid-padding-s($right: .5, $left: .5)
    width: 100%

    .btn
      width: 100%

  .cart-loader
    +grid-padding-s($top: 1, $left: 1, $right: 1)

    img
      position: relative
      top: 6px
      left: 0
      margin-right: 5px