/* Display */


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

#page.site > header .c-top-search > div.c-show {
  display : block;
}
#page.site > header .c-top-search > div > div:empty {
  display : none;
}
#page.site > header .c-top-search > div > div > input {
  display : block;
}
@media (min-width: 744px) {
  #page.site > header .c-top-search > div > div > input {
    display : none;
  }
}
#page.site > header .c-top-search > div > div > button {
  display : block;
}
@media (min-width: 744px) {
  #page.site > header .c-top-search > div > div > button {
    display : none;
  }
}


/* Mobile Button */
#page.site > header .c-top-search > button {
  height           : 52px;
  width            : 52px;
  background-color : white;
  place-self       : center center;
  border-left      : 1px solid var(--c-border);
}

#page.site > header .c-top-search > button::before {
  background-image    : url(/wp-content/plugins/custom/assets/search-icon.svg);
  height              : 16px;
  width               : 16px;
  background-size     : 16px;
}

/* Input Area */
#page.site > header .c-top-search {
  margin                : 1px;
  height                : 52px;
  width                 : calc(100% - 1px);
  border-left           : 1px solid var(--c-border);
  padding               : 0 16px;
  grid-template-columns : auto 1fr;
  align-items           : center;
}
#page.site > header .c-top-search:focus-within {
  outline : 1px solid var(--c-outline);
}
#page.site > header .c-top-search::before {
  content             : '';
  height              : 16px;
  width               : 16px;
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
  margin-right        : 12px;
  vertical-align      : text-bottom;
  background-image    : url(/wp-content/plugins/custom/assets/search-icon.svg);
}

/* Input field */
#page.site > header .c-top-search > input {
  border  : none;
  padding : 0;
}
#page.site > header .c-top-search > input:focus {
  border  : none;
  outline : none;
}

/* Background */
#page.site > header .c-top-search > div.c-show {
  position         : absolute;
  z-index          : 1001;
  top              : 54px;
  right            : 0;
  left             : 0;
  height           : 500vh;
  backdrop-filter  : blur(1px);
  background-color : rgb(0 0 0 / 10%);
}

/* Search box */
#page.site > header .c-top-search > div > div {
  width            : 100vw;
  margin-top       : 4px;
  background-color : white;
  padding          : 24px 16px;
  display          : grid;
  column-gap       : 8px;
  grid-template-columns: 1fr auto;
  grid-template-areas: 
    "input   button "
    "resProd resProd"
    "resList resList";
}
@media (min-width: 744px) {
  #page.site > header .c-top-search > div > div {
    border-radius    : var(--c-radius);
    border           : 1px solid var(--c-border);
    margin-top       : 8px;
    margin-left      : 308px;
    width            : 438px;
  }
}
#page.site > header .c-top-search > div > div > input {
  grid-area     : input;
  margin-bottom : 16px;
}
#page.site > header .c-top-search > div > div > button {
  grid-area        : button;
  border-radius    : var(--c-radius);
  background-color : var(--c-button);
  width            : 40px;
  height           : 40px;
  margin-bottom    : 16px;
}
#page.site > header .c-top-search > div > div > button::before {
  background-image : url(/wp-content/plugins/custom/assets/search-icon-bright.svg);
}

/* Links */
#page.site > header .c-top-search > div > div > div:nth-child(3) {
  grid-area : resProd;
}
#page.site > header .c-top-search > div > div > div:nth-child(4) {
  grid-area : resList;
}
#page.site > header .c-top-search > div > div > div a {
  display     : block;
  padding     : 6px;
  font-size   : 12px;
  line-height : 18px ;
  font-weight : 400;
  font-family : var(--c-font-familiy-text);
  color       : var(--c-text-secondary);
}
#page.site > header .c-top-search > div > div > div a::before {
  content             : '';
  display             : inline-block;
  height              : 14px;
  width               : 14px;
  background-repeat   : no-repeat;
  background-size     : 14px;
  background-position : center center;
  margin-right        : 12px;
  vertical-align      : text-bottom;
}
#page.site > header .c-top-search > div > div > div:nth-child(3) a::before {
  background-image : url(/wp-content/plugins/custom/assets/arrow-right-icon.svg);
}
#page.site > header .c-top-search > div > div > div:nth-child(4) a::before {
  background-image : url(/wp-content/plugins/custom/assets/list-icon.svg);
}
#page.site > header .c-top-search > div > div > div:nth-child(4):not(:empty) {
  margin-top  : 16px;
  border-top  : 1px solid var(--c-border);
  padding-top : 16px;
}

.c-top-search .c-sku {
  color: var(--c-text-placeholder);
}