/**
 * Main header
 */

#header
  position: relative
  margin: 0 auto 50px
  padding: 30px
  width: 100%
  max-width: $gridMaxWidth
  height: 160px
  box-sizing: border-box
  border-bottom: 1px solid #eaeaea

  a
    text-decoration: none

  +respond-to-width($bp_md)
    padding: 30px 20px

  +respond-to-width($bp_mobile)
    padding: 15px 20px
    margin-bottom: 20px
    height: 104px

  // Logo with pay-off
  .logo
    display: block
    margin: 0 auto
    width: 240px

    color: #b7b7b7
    font-size: 13px
    letter-spacing: 0.21em
    line-height: 1em
    text-transform: uppercase
    text-align: center
    white-space: nowrap

    .pay-off
      display: block

    img
      margin-bottom: 5px

    +respond-to-width($bp_mobile)
      width: 180px
      font-size: 10px
      letter-spacing: 0.2em


  // Cart
  .cart-container
    display: block
    position: absolute
    top: 74px
    right: 0

    padding-left: 40px
    width: auto
    height: 56px

    color: #000
    font-size: 18px
    text-align: right

    +respond-to-width($bp_md)
      right: 20px

    +respond-to-width($bp_mobile)
      padding-left: 35px
      top: 45px
      .price
        display: none

    // Cart icon
    &:before
      content: ''
      position: absolute
      top: -2px
      left: 0
      width: 27px
      height: 26px
      +sprite(-5px -25px)

  // Hamburger menu
  .hamburger
    display: none
    position: absolute
    top: 48px
    left: 30px

    +sprite(-45px -28px)
    width: 24px
    height: 13px

    cursor: pointer

    +respond-to-width($bp_mobile)
      display: block

  .fixable-header.fixed

    +respond-to-width($bp_mobile)
      position: fixed
      z-index: 999
      top: 0
      left: 0
      box-sizing: border-box
      width: 100%
      height: 60px
      padding: 5px 20px
      background: #fff
      border-bottom: 1px solid #eaeaea

      .hamburger
        top: 26px
      .cart-container
        top: 22px

      .logo
        width: 140px

        .pay-off
          display: none