// Отображение карточек широким «списком» (ex cardList())
.tpl-component-goods .tpl-block-list-objects.tpl-layout-tiles
  margin-right: -20px

.tpl-component-goods .tpl-layout-list
  .tpl-block-list-object
    float: none
    width: 100%

  article
    border: 5px solid //colorDull
    theme(border-color 'dull')
    padding: 15px 15px 15px
    margin-bottom: 20px
    height: 220px
    width: 100%
    position: relative

    > a
      display: block
      text-decoration: none
      theme(color 'accent-1')
      &:hover
        h3
          theme(color 'accent-2')

  .tpl-block-admin
    position: relative
    z-index: 50
    top: -14px
    left: -9px

  h3
    text-transform: none
    display: block
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    text-align: left
    position: absolute
    left: 300px
    right: 265px
    top: 25px
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.5em;
    /*transition: color .2s*/
    gradient-right(bgColor, 60px)

  .tpl-property-type
    display: block
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    line-height: 1.2
    position: absolute
    left: 300px
    right: 170px
    top: 55px
    text-align: left
    font-weight: 400
    theme(color 'base')
    gradient-right()

  .tpl-property-image
    display: block
    position: absolute
    width: 250px
    left: 25px
    top: 25px
    height: 160px
    line-height: 155px
    text-align: center
    img
      display: inline-block
      vertical-align: middle

  .tpl-block-rating
    position: absolute
    right: 180px
    top: 22px
    font-size: 16px
    text-align: left
    /*
    padding-left: 30px
    &:before
      content: ''
      position: absolute
      top: 0
      left: -30px
      background: linear-gradient(to right, 10% rgba(colorWhite, 0), 30% colorWhite)
      height: 100%
      width: 160px
    */

  .tpl-property-item-price
  .tpl-property-original-price
    display: block
    position: absolute
    left: 100%
    margin-left: -150px

  .tpl-property-item-price
    top: 23px
    line-height: 1.2
    font-size: 28px
    text-align: left
    font-weight: 400
    width: 130px

  .tpl-property-item-price-range
    font-size: 24px
    .tpl-value { white-space: nowrap }

  .tpl-property-original-price
    theme(color 'gray')
    top: 54px
    price-strike-through(54%)

  .tpl-property-description
    display: block
    position: absolute
    left: 300px
    right: 180px
    top: 85px
    height: 100px
    line-height: 1.45
    overflow: hidden
    text-overflow: ellipsis
    gradient-right()
    &:after
      height: 1.4em
      top: auto
      bottom: 0    

  .tpl-link-compare-add
  .tpl-link-compare-remove
  .tpl-link-favorite-add
  .tpl-link-favorite-remove
    font-size 0
    position absolute
    top 155px
    &:before
      text-decoration none

  .tpl-link-compare-add
  .tpl-link-compare-remove
    right 135px
    icon-down-accent-1()

  .tpl-link-favorite-add
  .tpl-link-favorite-remove
    right 84px
    icon-flag-accent-1()

  .tpl-link-cart-add
    position absolute
    right 30px
    top 150px
    font-size 0
    button-transparent()
    icon-cart-accent-2()

  a.tpl-link-select-variant
    button()

  .tpl-link-cart-add-and-checkout
  .tpl-link-select-variant
    position absolute
    right 15px
    top 90px
    padding: 0 4px !important
    min-width 130px
