/*
Header
==========================================
*/

// Basic header
.header-main {
  background-color: @gray-light;
}

.shop--navigation {

  .navigation--list {
    display: flex;
    justify-content: space-around;
    @media screen and (min-width: @tabletViewportWidth) {
      justify-content: flex-end;
    }
  }
  .navigation--entry {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;

    // General button styling in shop navigation
    .btn {
      background-color: transparent;
      border-color: transparent;
      width: 100%;
      display: block;
      .unitize-padding(0, 4);
      .unitize(font-size, 20);

      [class^='icon'] {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        .unitize(font-size, 20);
        vertical-align: middle;
      }
      [class*="--display"] {
        display: block;
        font-family: @font-base-stack;
        .unitize(font-size, 12);
        margin: 0;
        font-weight: normal;
        line-height: 1;
        color: @text-color;
        .unitize-padding(28, 0, 0, 0);
      }
    }
  }
  .entry--menu-left {
    border: 1px solid transparent;
    position: inherit;
    .btn {
      display: block;
      color: inherit;
    }
  }
  .entry--cart {
    margin-right: 0;
  }

  .entry--search {
    @media screen and (min-width: @phoneLandscapeViewportWidth) {
      .unitize(margin-right, 5, 16);
      left: inherit;
      width: auto;
      background-color: transparent;
      position: inherit !important;
      .entry--trigger {
        display: inline-block;
        margin-right: 0;
      }

    }
  }

  .cart--quantity,
  .notes--quantity {
    top: -4px;
    left: auto;
  }
}

.header-main {

  .header--navigation {

    @media (min-width: @tabletViewportWidth) {
      .unitize-padding(20, 0);
    }


    .logo-main {
      .unitize-padding(20, 0);
      @media (min-width: @tabletViewportWidth) {
        width: 100%;
        padding: 0;
      }
      .logo--shop {
        text-align: center;
        width: auto;
        float: inherit;
        height: 40px;
        @media (min-width: @tabletViewportWidth) and (max-width: (@tabletLandscapeViewportWidth - 1)) {
          height: 50px;
          .unitize-padding(0, 0,0,30);
          margin-left: inherit;
          transform: inherit;
        }
        @media (min-width: @tabletLandscapeViewportWidth) {
          height: 50px;
          margin-left: 50%;
          transform: translateX(-50%);
        }
        @media (min-width: 1441px) {
          height: 60px;
        }
      }
     .logo--link {
       height: 100%;
       picture {
         img {
           height: 100%;
         }
       }
     }
    }
  }

  .shop--navigation {
    @media (min-width: @tabletViewportWidth) {
      width: auto;
      position: absolute;
      bottom: 0;
      right: 0;
      float: none;

      @media (min-width: @phoneLandscapeViewportWidth) {
        .unitize(bottom, 20);
      }
    }
  }
}



