header
  background-color: rgba($darkBrown, 0.85)

  .pre-header
    position: relative
    border-bottom: 1px solid rgba($borderColor, 0.4)

    .grid-row
      padding: 8px 0
      +flex(space-between, center)

    .reasons
      +flex(flex-start, center)

      p
        margin: 0
        font-size: 0.65rem
        line-height: 1.2
        color: rgba($lightGrey, 0.75)
        +bold

        + p
          margin-left: 40px

        &:before
          content: ''
          display: inline-block
          margin-right: 5px
          +sprite(170px 33px, 13px, 10px)
          opacity: 0.75

    .mail-button
      font-size: 0.65rem
      line-height: 1.2
      color: rgba($lightGrey, 0.75)
      +bold
      text-decoration: none
      transition: color 0.3s

      &:hover
        color: $lightGrey

      &:before
        content: ''
        position: relative
        top: -1px
        display: inline-block
        margin-right: 5px
        width: 6px
        height: 6px
        border-radius: 100%
        background-color: $green

      &:after
        content: ''
        position: relative
        display: inline-block
        margin-left: 5px
        +sprite(170px 0, 10px, 11px)

  .main-row
    padding: 20px 0
    +flex(space-between, center)

    .logo
      display: block
      +sprite(0 0, 168px, 80px)

    .search-placeholder
      +flex(center, center)
      width: calc(100% - 336px)

      .search
        position: relative

        width: 100%
        max-width: 415px

        .search-input
          +appearance(none)
          width: 100%
          display: block
          padding: 7px 40px 7px 10px
          background-color: white
          border: none
          font-size: 0.7rem
          line-height: 1.2
          color: $greyBrown

          &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
            transition: 9999s background-color
            -webkit-text-fill-color: $greyBrown
            transition-delay: 9999s

          &:focus
            outline: none
        //  outline-color: $lighterGrey

        .submit
          position: absolute
          right: 0
          top: 0
          +flex(center, center)
          width: 30px
          height: 30px
          background-color: $darkGrey
          cursor: pointer
          transition: background-color 0.3s

          .icon
            +sprite(185px 0, 14px, 14px)

          input
            display: none

          &:hover
            background-color: rgba($darkGrey, 0.75)

    .shopping-cart-icon
      +flex(flex-end, center)
      width: 168px
      text-decoration: none

      .icon
        position: relative
        display: block
        width: 24px
        height: 24px
        margin-right: 8px
        &:before
          content: ''
          display: inline-block
          +sprite(185px 19px, 24px, 24px)
          opacity: 0.5
          transition: opacity 0.3s


        &:after
          content: attr(data-amount)
          position: absolute
          left: 15px
          top: -10px
          +flex(center, center)
          box-sizing: border-box
          min-width: 20px
          height: 20px
          padding: 0 5px
          color: white
          background-color: $buttonRed
          border-radius: 20px
          font-size: 0.6rem
          line-height: 1.2
          +bold

        &[data-amount='0']
          &:after
            display: none


      span
        font-size: 0.65rem
        line-height: 1.2
        color: rgba($lightGrey, 0.75)
        transition: color 0.3s
        +bold

      &:hover
        .icon
          &:before
            opacity: 1
        span
          color: $lightGrey


  nav
    background-color: $grey
    border-top: 1px solid $borderColor
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5)

    .grid-row
      +flex(space-between, center)

      a
        display: block
        padding: 18px 0
        background-color: transparent
        text-align: center
        text-transform: uppercase
        text-decoration: none
        font-size: 0.6rem
        line-height: 1.2
        color: white
        +bold
        transition: background-color 0.3s, color 0.3s

        + a
          border-left: 1px solid $borderColor

        &:hover
          //background-color: rgba(white, 0.2)
          color: $red