$topContainerHeight: 250px

.overview-product
  position: relative
  +grid-margin($bottom: 0.5)

  // Top container
  .top-container
    position: relative
    @extend %clearfix

  .product-info-container
    float: left
    padding: 20px 0 20px 20px
    width: 66.6665%
    min-height: $topContainerHeight
    border-right: $productOverviewBorder 1px solid
    @extend %clearfix

  // Image
  .image-holder
    float: left
    width: 25%
    padding-right: 20px

    img
      display: block
      margin: 0 auto
      max-height: 100%
      max-width: 100%

  // Product info
  .product-info
    float: left
    width: 75%

    // Article number
    .article-number
      display: block
      +grid-margin-s($bottom: .5)
      font-size: 1.5em
      margin-top: 20px

  // Order info
  .order-info
    position: relative
    padding: 20px 20px 0
    float: right
    width: 33.3332%
    min-height: $topContainerHeight

  .order-info-bottom-container
    position: absolute
    bottom: 0
    right: 0
    width: 33.3332%

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

    .product-detail .discount-percentage
      position: absolute
      top: 0
      +grid-position-s($right: .5)
      margin-right: 0
      span
        display: block
        font-size: 0.6em

  // Bottom container
  .bottom-container
    border-top: $productOverviewBorder 1px solid
    background: $productOverviewBackground
    @extend %clearfix

  // Composition container
  .composition-container
    float: left
    width: 66.6665%
    min-height: 120px
    border-right: $productOverviewBorder 1px solid
    background: #fff

    .composition .composition-class
      width: 70px

    .overview-composition-title
      float: left
      width: 25%

      .header
        padding: 5px 20px
        background: #F8F7F6
        font-size: 1.4em
        +bold
        white-space: nowrap

      .brand-holder
        padding: 10px
        width: 100%
        img
          max-width: 100%

    .overview-composition
      float: left
      width: 75%

  .usp-container
    float: left
    padding: 21px 10px 10px 20px
    width: 33.3332%