/* Grid */
#page.site > header {
  display               : grid;
  grid-template-columns : 54px 1fr 54px 54px;
  grid-template-areas: 
   "button logo search account";
}
@media(min-width: 744px) {
  #page.site > header {
    display               : grid;
    grid-template-columns : 54px 196px 1fr 54px 54px;
    grid-template-areas: 
      "button logo  search account cart";
  }
  body:not(.logged-in) #page.site > header {
    grid-template-columns : 54px 196px 1fr auto;
    grid-template-areas: 
      "button logo  search account";
  }
}
@media(min-width: 1024px) {
  #page.site > header {
    display               : grid;
    grid-template-columns : 54px 196px 1fr 302px 302px;
    grid-template-areas: 
      "button logo  search account cart";
  }
  body:not(.logged-in) #page.site > header {
    display               : grid;
    grid-template-columns : 54px 196px 1fr auto;
    grid-template-areas: 
      "button logo  search account";
  }
}

#page.site > header .c-sidebar-button {
  grid-area : button;
}
@media(min-width: 1024px) {
  #page.site > header .c-sidebar-button {
    display: none;
  }
}

#page.site > header .c-logo {
  grid-area : logo;
}
@media(min-width: 1024px) {
  #page.site > header .c-logo {
    grid-column: 1/3;
  }
}

#page.site > header .c-top-search {
  display : contents;
}
#page.site > header .c-top-search::before {
  display : none;
}
#page.site > header .c-top-search > input {
  display : none;
}
#page.site > header .c-top-search > button {
  grid-area : search;
}
#page.site > header .c-top-search > div {
  display : none;
}
@media (min-width: 744px) {
  #page.site > header .c-top-search {
    grid-area : search;
  }
}

#page.site .c-account-menu {
  grid-area : account;
}
#page.site .c-top-search + div {
  grid-area : account;
}

#page.site > header .site-header-cart {
  display : none;
}
#page.site > header .site-header-cart + a{
  display : none;
}
@media (min-width: 744px) {
  #page.site > header .site-header-cart + a {
    display   : grid;
    grid-area : cart;
  }
}
@media (min-width: 1024px) {
  #page.site > header .site-header-cart {
    display   : block;
    grid-area : cart;   
  }
  #page.site > header .site-header-cart + a {
    display : none;
  }
}

/* Header */
#page.site > header {
  position              : relative;
  width                 : 100%; 
  height                : 56px;
  align-items           : center;
  justify-items         : left;
  background-color      : white;
  border-bottom         : 1px solid var(--c-border);
}

/* Button */
#page.site > header .c-sidebar-button {
  font-size        : 20px;
  padding          : 0;
  margin           : 1px;
  width            : 52px;
  height           : 52px;
  border-right     : 1px solid var(--c-border);
  background-color : white;
}
#page.site > header .c-sidebar-button:hover:focus,
#page.site > header .c-sidebar-button:hover {
  background-color: var(--c-background-dark);
}

/* Logo */
#page.site > header .c-logo {
  margin      : 1px;
  width       : calc(100% - 2px);
  height      : 52px;
  display     : grid;
  align-items : center;
}
#page.site > header .c-logo img {
  height      : 24px;
  max-width   : initial;
  margin      : 0 16px;
}