.header {
   background: $brand-primary;
   color: $white;
   position: relative; // z-index vetsi nez .body kvuli stinu

   h1 { margin: 0; }

   a { color: $white; }

   .logo {
      display: block;
      max-width: 237px;
      margin: 10px 0 15px;

      @media screen and (min-width: 768px) {
         margin: 20px 0 20px;
      }
   }
}

.header-login,
.header-cart {
   line-height: 19px;
   position: relative;
   color: $border-color;

   a {
      color: inherit;
   }

   strong {
      color: $white;
      font-size: 18px;
      padding-top: 10px;
   }
}

.header-login {

   &.logged-in strong {
      font-size: 16px;
   }

   .acc {
      position: relative;
      padding-bottom: 10px;

      &:hover ul { display: block; }
   }

   ul {
      box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .2);
      background: $white;
      display: none;
      padding: 15px 25px;
      position: absolute;
      top: 25px;
      width: 166px;
      z-index: 10;

      li {
         line-height: 30px;
      }

      i {
         margin-right: 8px;
         color: #c4ccda;
      }
   }
}

.header-cart {
   text-align: right;

   &.header-cart-empty {
      pointer-events: none;
   }
}

.header-info > span {
   color: #d3d9e4;
   font-size: 10px;
   padding: 0 10px;
   position: relative;
   top: -2px;
}

.header,
.search-form {

   .input-group {
      width: 100%;

      .btn {
         padding: 11px 20px 10px;
         position: relative;
         z-index: 4;
      }

      .form-control {
         background: $white url("/templates/images/icon_search.png") no-repeat 15px center;
         padding-left: 42px;
      }

      .opened {
         border-color: $brand-primary;
         border-bottom-color: $white;
      }

      @media screen and (min-width: 768px) {
         max-width: 600px;
      }
   }
}

.header form.search {
   display: none;

   .input-group { max-width: 400px; }

   &.active { display: block; }
}


@media screen and (min-width: 1200px) {
   .header form {
      display: block !important;

      .input-group { margin-top: 7px; }
   }
}


@media screen and (max-width: 768px) {
   .header .logo img {
      max-width: 140px;
   }

   .header > div { width: auto; }
}
