// Filter
// ==========================================================================


.payment-method-bar
  +position(absolute, 60px 0 null null)

  &.nl
    +icon-sprite-two(-10px -180px,220px,30px)
  &.de
    +icon-sprite-two(-10px -224px,220px,30px)

  .payment-options &
    +position(absolute, 7px 0 null null)

    +respond-to(medium)
      top: 12px

// Filter
.top-bar
  +grid-line-height
  +grid-height
  +grid-padding-s($left: .5, $right: .5)
  +grid-margin($bottom: 0.5)
  z-index: 20 !important

  .filter-holder
    float: left
    +grid-margin-s($right: .5)
    +grid-height

  label,.label
    display: inline-block
    float: left
    color: $blue
    +type-small-title-uc
    margin-right: 8px

  .show-all
    float: right
    color: #b3b3b3
    font-size: 1.4em

  .payment-options
    text-align: right

    img
      max-width: 100%

//// Block
//// ==========================================================================
//
//// Block
//.product-block
//  position: relative
//  +grid-margin($bottom: 0.5)
//
//  .column
//    position: relative
//    top: 0
//    bottom: 0
//
//  .top-section
//    min-height: 125px
//
//  .image-holder
//    +grid-padding-s($top: 0.5, $right: 0.25, $bottom: 0.5, $left: 0.25)
//    img
//      display: block
//      margin-left: auto
//      margin-right: auto
//      max-height: 100%
//      max-width: 100%
//
//  .product-information
//    +grid-padding-s($top: 0.5, $bottom: 0.5, $left: 0.25, $right: 0.5)
//    +dashed-border(right)
//    min-height: 30em
//    z-index: 6
//
//
//    .bottom-section
//      min-height: 190px
//
//  .buying-options
//    position: absolute
//    top: 0
//    right: 0
//    height: 100%
//
//    .inner
//      text-align: right
//      position: absolute
//      width: 100%
//      height: 100%
//
//    .top-section
//      min-height: 145px
//
//  .brand
//    +grid-position-s($left: .5, $bottom: .5)
//
//  .price
//    +grid-margin-s($top: .5, $right: .5)
//
//  .original-price
//    display: inline-block
//    +grid-margin-s($right: .5)
//    font-size: 1.4em
//    text-decoration: line-through
//    color: #959595
//    margin-top: .5em
//
//  .discount-percentage
//    display: inline-block
//    padding: .75em
//    margin-right: 1em
//    +border-bottom-radius(5px)
//    background-color: #ff7d20
//    color: #ffffff
//    font-size: 1.6em
//
//  .discount-notifier
//    background-color: #F8F7F6
//    padding: 1.6em
//    width: 100%
//    ul
//      list-style: none
//      margin: 0
//      padding: 0
//      li
//        margin: 0
//        padding: 0
//
//    ul.notifier-items
//      li
//        display: none
//        font-size: 1.3em
//        text-align: center
//      li.active
//        display: block
//
//    ul.notifier-navigation
//      white-space: nowrap
//      text-align: center
//      margin-top: 10px
//
//      li
//        display: inline-block
//        width: 6px
//        height: 6px
//        border-radius: 6px
//        background-color: #DEDEDE
//        box-shadow: inset 0 0 3px rgba(0, 0, 0, .25)
//        &.active
//          box-shadow: none
//          background-color: $blue
//
//
//  // Product information
//  // ==========================================================================
//
//  // Title
//  .product-title
//    font-size: 2em // 20px
//    margin-top: 0
//    +grid-margin-s($bottom: .5)
//    .rule-1,
//    .rule-2,
//    .rule-3
//      display: block
//    .rule-1
//      +semibold
//      color: $dark-grey
//    .rule-2,
//    .rule-3
//      color: $grey
//      +light
//    .rule-3,
//    .bypass
//      color: $blue
//
//  .article-number
//    display: block
//    +grid-margin-s($bottom: .5)
//    +type-basic
//
//  .product-composition-title
//    display: block
//    height: 20px
//    font-size: 1.4em
//
//  // Specs
//  .product-specs
//    width: 100%
//    +grid-margin-s($bottom: 0.5)
//    +type-small
//
//    // Table cell
//    .specs-title
//      width: 40%
//      +semibold
//      color: $dark-grey
//
//    .info
//      display: inline-block
//      @extend %icon-sprite
//      +icon-sprite(3,0,12px,12px)
//
//  .warning
//    border: solid 2px #C8E5F5
//    background-color: #D2E9F5
//    color: #73A0BD
//
//  // Read more
//  .read-more
//    display: inline-block
//    position: relative
//    +grid-margin-s($top: .5)
//    +type-small
//    color: $light-grey
//    +grid-padding-s($right: .5)
//
//    &:after
//      position: absolute
//      right: 0
//      top: .266666667em
//      z-index: 10
//      content: ''
//      @extend %icon-sprite
//      +icon-sprite(2,0,6px,10px)
//
//  // Buying options
//  // ==========================================================================
//
//  // Price
//  .price
//    display: inline-block
//    color: $dark-grey
//    font-size: 2.5em // 20px
//    line-height: 1
//
//    .decimal
//      position: relative
//      top: 1px
//
//  .price-info
//    display: block
//    font-size: 1.3em
//    color: $light-grey
//    margin-top: 4px
//    +grid-margin-s($right: .5)
//
//  // Stock
//  .in-stock
//    display: inline-block
//    +grid-position-s($right: .5)
//    padding-left: 20px
//    color: $green
//    +type-small
//    margin-top: 1.6em
//
//    &:before
//      position: absolute
//      top: 1px
//      left: 0
//      z-index: 10
//      content: ''
//      @extend %icon-sprite
//      +icon-sprite(0,2,16px,16px)
//
//  // Order row (amount + add to cart)
//  .order-row
//    display: block
//    +grid-padding-s($left: .5, $right: .5)
//    width: 100%
//    +grid-height-s
//    margin-top: 1.6em
//
//    .btn-holder
//      float: left
//      width: 63.66667%
//      .btn
//        width: 100%
//
//  .quantity-holder
//    float: left
//    margin-right: 3%
//    width: 33.33333%

// Detail
// ==========================================================================

.product-detail
  //.image-holder
  //  position: relative
  //  +grid-padding(.5,.5,.5,.5)
  //  height: 400px
  //
  //  img.fit
  //    opacity: 0
  //    +position(absolute,50% null null 50%)
  //    display: block
  .product-detail-top
    position: relative

  .product-detail-image
    +position(absolute, 50% null null 0)
    +grid-padding(.5,.5,.5,.5)
    margin-top: -200px
    height: 400px

    img.fit
      opacity: 0
      +position(absolute,50% null null 50%)
      display: block

  ul.thumbs
    position: absolute
    display: block
    white-space: nowrap
    bottom: -32px
    left: 32px

    li
      display: inline-block
      overflow: hidden
      width: 32px
      height: 32px
      border-radius: 32px
      margin-left: 10px
      background-color: #00a6ff
      +transition(border-color .3s, box-shadow .3s)

      &.active
        border: none
        img
          +opacity(.5)

      &:not(.active):hover
        border-color: #9ecaed
        box-shadow: 0 0 5px #9ecaed

  .product-information
    position: relative
    z-index: 55
    border: none
    padding: 30px 0 0 0
    min-height: 390px
    border-left: $productOverviewBorder 1px solid
    float: right !important

    .inner-padding
      padding: 0 30px

    .warning
      padding-left: 30px

    .price-and-stock-holder
      max-width: 300px
      margin-top: 20px
      @extend %clearfix

      .price-block
        float: left
        height: 40px

      .in-stock
        position: relative
        top: 8px
        float: right

  // Order row (amount + add to cart)
  .order-row
    position: relative
    bottom: 0
    padding: 0
    +grid-margin-s($top: 1, $bottom: .25)
    max-width: 300px

  .specs-holder
    border-top: $productOverviewBorder 1px solid
    padding: 30px
    font-size: 0.933333em
  h3
    +type-small-title-uc
    color: $blue

  .discount-percentage-container
    text-align: right
    margin: 0
    padding: 0

  .product-discount-bar
    height: 30px

    li
      line-height: 30px

  .usp-container
    padding: 15px 30px
    background: $productOverviewBackground