/*==========================================================================
  Product detail page
  ========================================================================== */

body.product
  overflow-x: hidden

.top
  display: flex

.product-left
  width: column(4.5, 9)
  padding: 30px column(0.5,9) 60px 0
  margin: 0
  overflow: visible

  &:before
    content: ''
    display: block
    position: absolute
    z-index: -1
    background: linear-gradient(269.36deg, #F5FAFF 0%, #F0F5FA 100%)
    width: 400%
    top: 0
    margin-left: -300%
    height: 100%
    box-shadow: 0 0 20px 0 rgba(#B1B8BF, 0.2)

    +respond-to-width(1280)
      display: none

  .breadcrumb
    width: 100%
    margin: 2px 0 30px 0
    height: 17px	
    color: #848D9B
    font-size: 14px
    line-height: 17px

    a
      text-decoration: none
      color: #848D9B

  .images
    z-index: 2
    font-size: 1rem
    line-height: 1.6
    width: 100%
    display: block

  ul
    display: none

.product-right
  position: relative
  width: column(4.5, 9)
  padding: 38px 0 column(0.5, 9) column(0.5,9)
  font-size: 16px
  line-height: 26px
  letter-spacing: 0.08px
  vertical-align: top
  overflow: visible

  &:before
    content: ''
    display: block
    position: absolute
    width: calc(50vw - 190px)
    height: 100%
    background-color: white
    left: 0
    top: 0
    z-index: -1
    box-shadow: 0 0 20px 0 rgba(#B1B8BF, 0.2)

  .button-holder
    +flex(space-between, center)
    flex-wrap: wrap

    .fake-button
      display: inline-block
      width: auto
      padding: 7px 15px 3px 15px
      border: 1px solid #E1E6EB
      border-radius: 5px
      color: #848D9B
      font-family: $headerFontFamily
      font-size: 14px
      font-weight: 500
      line-height: 23px
      text-transform: uppercase
      flex-shrink: 0
      margin-bottom: 15px

      &:first-child
        margin-right: 10px

      label
        color: #2D323C
        font-weight: bold

  h3
    margin-top: 0
    margin-bottom: 0
    color: #2D323C
    font-size: 24px
    font-weight: 600
    line-height: 32px

  h4
    margin-top: 0
    margin-bottom: 0.5rem
    color: #848D9B
    font-size: 18px
    font-weight: 500
    line-height: 27px

  .left, .right
    width: 100%
    height: 200px
    display: inline-block
    vertical-align: top

  .left
    min-width: 200px
    height: auto
    .price
      +flex(flex-start, flex-start)
      color: $blue
      font-size: 28px
      font-weight: bold
      line-height: 48px

      span
        padding-top: 5px
        padding-left: 5px
        font-size: 14px
        line-height: 24px

    .staffeldiscount-price
      display: none
      position: absolute
      text-decoration: line-through
      color: #323232
      font-size: 14px
      font-weight: bold
      line-height: 17px

  .right
    min-width: 170px
    height: auto
    .price-box
      border: 1px solid #E1E6EB
      border-radius: 5px
      width: 100%
      padding: 5px 16px
      color: $blue
      font-size: 15px
      line-height: 30px
      max-width: 350px
      +flex(space-between, center)
      flex-wrap: wrap

      .price-line
        width: 48%
        +inline-flex(space-between, center)
        label
          color: #848D9B
          display: inline-block
          width: 65%

        span
          flex-shrink: 0

    .no-staffeldiscount-message,
    .staffeldiscount-message
      display: none
      color: #7ED321
      font-size: 15px
      font-weight: 600
      line-height: 24px
      padding: 0

    .no-staffeldiscount-message
      display: block
      color: #848D9B

  &.staffel
    .left
      .price
        color: #7ED321

    .right
      .price-box
        .staffel-price-holder
          color: #7ED321




.order-box
  margin-top: 30px
  width: 100%

  .amount-label
    color: #848D9B
    font-family: $headerFontFamily
    font-size: 15px
    font-weight: 500
    line-height: 24px
    width: 100%

  .amount-box
    width: 100%
    display: inline-block
    padding-right: 15px
    +flex(flex-start, center)
    margin-bottom: 30px

    .amount
      margin: 0
      width: 50px
      height: 35px
      background-color: transparent
      border: 2px solid #E1E6EB
      border-radius: 2px
      color: #414650
      font-family: $headerFontFamily
      font-size: 15px
      font-weight: 500
      line-height: 24px
      text-align: center
      -moz-appearance: textfield
      margin-right: 10px

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none
        margin: 0 /* <-- Apparently some margin are still there even though it's hidden */

    .amount-changers
      display: inline-block
      height: 100%
      width: 20px
      margin-right: 20px

      a
        text-decoration: none
        border-radius: 2px
        background-color: #848D9B
        padding: 5px 0 8px 0
        width: 15px
        line-height: 0
        height: 20px
        display: block
        //+flex(space-around, center)
        //margin: 5px 0
        transition: color 0.2s, background-color 0.2s
        transform: rotate(-90deg)
        background-size: 5px 9px
        background-position: center center
        background-repeat: no-repeat
        background-image: url("/img/svg/arrow/arrow_white.svg")

        &.decrease
          transform: rotate(90deg)

        &:hover
          background-color: #414650

    a.button.shoppingCart
      width: auto
      color: white
      background-color: #7ED321
      transition: color 0.3s, background-color 0.2s
      &:hover
        background-color: lighten(#7ED321, 10%)

      svg
        margin-right: 10px
        top: 3px
        position: relative

.specification-holder
  width: 100%
  display: inline-block
  vertical-align: top
  overflow: visible

  h4
    margin: 30px 0 30px 0
    color: #696E73
    font-size: 15px
    font-weight: 600
    line-height: 24px
    text-transform: uppercase

  ul
    list-style: none
    margin: 0
    padding: 0
    box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)
    li
      +flex(flex-start, flex-start)
      padding: 13px 22px
      background-color: white
      color: #8791A0
      font-size: 16px
      line-height: 24px

      label
        color: #2D323C
        font-weight: bold
        width: 20%
        display: inline-block
        flex-shrink: 0

        +respond-to-width(600)
          width: 30%

        +respond-to-width(425)
          width: 40%

      &:nth-child(even)
        background-color: #F0F5FA

.related-products-header
  padding-top: 90px
  padding-bottom: 30px
  position: relative
  +flex(space-between, center)
  flex-wrap: wrap

  h3
    display: inline-block
    color: #696E73
    font-size: 15px
    font-weight: 600
    line-height: 24px
    text-transform: uppercase
    width: auto

  a.button
    background-color: transparent
    border: solid 1px #C8CDD2
    font-size: 15px
    font-weight: 600
    line-height: 24px
    margin: 0 0 30px 20px


+respond-to-width(1280)
  body.categories
    > .content
      .top
        display: inline-block

      .right

        > .grid-row
          &.top
            width: 100%

        .product-left,
        .product-right
          width: 100%
          height: auto

        .product-left
          padding-bottom: 2px

        .product-right
          padding-right: column(0.5, 9)
          &:before
            width: column(8.5, 9)

          .button-holder
            justify-content: flex-start

            .fake-button:first-child
              margin-right: 30px

        .specification-holder
          width: column(8.5, 9)
          padding-left: 0

        .related-products-header
          width: column(8.5, 9)
          padding-top: 30px
          margin: 0

          h3
            text-transform: uppercase

        .related-products
          width: column(8.5, 9)
          padding-bottom: 30px
          margin: 0

+respond-to-width(950)
  body.categories
    > .content
      > .right
        //padding: 0

        .product-left
          padding-right: 0
          padding-bottom: 2px

          .breadcrumb
            padding-left: 0

        .product-right
          &:before
            width: 100%

        > .grid-row
          width: 100%

        .specification-holder
          width: 100%



+respond-to-width(425)
  body.categories
    > .content
      > .right
        .specification-holder h4,
        .related-products-header
          padding-left: 20px
        .related-products-header
          a.button
            right: 20px