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

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

  .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

// Block
// ==========================================================================

// Block
.product-block
  position: relative
  +grid-margin($bottom: 0.5)
  .column
    position: relative
    top: 0
    bottom: 0
  .image-holder
    +grid-padding-s($top: 0.5, $right: 0.25, $bottom: 0.5, $left: 0.25)
    img
      width: 100%
  .product-information
    +grid-padding-s($top: 0.5, $bottom: 0.5,$left: 1, $right: 1)
    +dashed-border(left right)
  .buying-options
    position: absolute
    top: 0
    right: 0
    height: 100%
    .inner
      text-align: right
      position: absolute
      width: 100%
      height: 100%
  .brand
    +grid-position-s($left: .5, $bottom: .5)
  .price
    +grid-margin-s($top: .5, $right: .5)

  // Product information
  // ==========================================================================

  // Title
  .product-title
    font-size: 2em // 20px
    margin-top: 0
    +grid-margin-s($bottom: .75)
    .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

  // 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)

  // Read more
  .read-more
    display: inline-block
    position: relative
    +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: block
    color: $dark-grey
    +semibold
    font-size: 2em // 20px
    line-height: 1

  // Stock
  .in-stock
    display: inline-block
    +grid-position-s($right: .5, $bottom: .5)
    padding-left: 20px
    color: $green
    +type-small

    &: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-position-s($bottom: 1.5)
    +grid-padding-s($left: .5, $right: .5)
    width: 100%
    +grid-height-s

    .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
    +dashed-border(right)
    padding: 0
    img
      display: block

    ul
      position: relative
      display: block
      margin: 0
      padding: 0
      list-style: none
      white-space: nowrap
      margin-top: -32px
      top: -20px
      left: 22px
      li
        display: inline-block
        overflow: hidden
        width: 32px
        height: 32px
        border-radius: 32px
        margin-left: 10px
        border: 1px solid #e7e4e1
        background-color: #00a6ff
        &.active
          border: none
          img
            +opacity(.5)

  .product-information
    border: none

  // Price
  .price
    margin-right: 0

  // Stock
  .in-stock
    display: inline-block
    position: relative
    right: 0
    bottom: 0

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

  .specs-holder
    +dashed-border(top)
    +grid-padding-s(1,1,1,1)

  h3
    +type-small-title-uc
    color: $blue