.product-grid
  box-sizing: border-box
  margin-left: -20px
  width: calc(100% + 40px)
  padding: 10px
  @extend %clearfix

  .product-cell
    float: left
    margin: 0 0 60px
    width: 33.333%
    height: auto
    text-decoration: none

    +respond-to-width($bp_sm)
      html:not(.ie) &
        width: 50%
    +respond-to-width($bp_mobile)
      html:not(.ie) &
        width: 33.333%
    +respond-to-width($bp_xs)
      html:not(.ie) &
        width: 50%

  .product-thumb-image
    img:not(.loading)
      padding: 0 10px
      box-sizing: border-box

// Image
.product-thumb-image
  position: relative
  box-sizing: border-box
  width: 100%

  img:not(.loading)
    position: relative
    width: 100%
    opacity: 0

  img.collection_hover
    position: absolute
    left: 0
    z-index: 99
    opacity: 0

  a
    display: block

  &:hover
    img.collection_hover
      opacity: 1

// Title
.product-thumb-title
  position: relative
  margin-top: 16px
  width: 100%
  height: 80px

  color: #000
  line-height: 1.4
  text-align: center
  text-decoration: none

  &:first-letter
    text-transform: capitalize
  span:first-child
    display: block

// Price
.product-thumb-price
  font-weight: 700

.product-thumb-price-discount
  font-weight: 700

.product-price-line-through
  text-decoration: line-through
  color: #9c9c9b
  font-weight: 400

// New
.product-thumb-new
  position: absolute
  top: 10px
  left: 10px
  z-index: 100

  padding: 8px 12px
  width: auto

  background: #000
  color: #fff

  font-size: 14px
  line-height: 8px
  text-transform: uppercase

// Todo: add support grid ?