.c-search {
  display               : grid;
  grid-template-columns : 1fr;
  column-gap            : 16px;
  margin-top            : 16px;
  align-items           : center;
  border                : 1px solid var(--c-border);
  border-radius         : var(--c-radius);
  padding               : 0 8px 8px 8px;
  grid-template-areas: 
    "label_name    "
    "input_name    "
    "label_cat1    "
    "select_cat1   "
    "label_cat5    "
    "select_cat5   "
    "label_rel3    "
    "select_rel3   "
    "label_time    "
    "select_time   "
    "label_origin  "
    "select_origin "
    "label_label   "
    "select_label  "
    "button        "
    "d1            "
    "d2            ";
}
@media(min-width: 530px) {
  .c-search {
    padding               : 0 16px 16px 16px;
    grid-template-columns : 1fr 1fr;
    grid-template-areas: 
    "label_name   label_cat1    "
    "input_name   select_cat1   "
    "label_cat5   label_rel3    "
    "select_cat5  select_rel3   "
    "label_time   label_origin  "
    "select_time  select_origin "
    "label_label  .             "
    "select_label button        "
    "d1           d1            "
    "d2           d2            ";
  }
}
@media(min-width: 768px) {
  .c-search {
    grid-template-columns : 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "label_name  label_cat1    label_cat5   label_rel3  "
    "input_name  select_cat1   select_cat5  select_rel3 "
    "label_time  label_origin  label_label  .           "
    "select_time select_origin select_label button      "
    "d1          d1            d2           d2          ";
  }
}
 
.c-search > label {
  margin-top: 8px;
}
@media(min-width: 530px) {
  .c-search > label {
    margin-top: 24px;
  }
}

.c-search > button {
  grid-area  : button;
}
.c-search > button::before {
  background-image : url(/wp-content/plugins/custom/assets/search-icon-bright.svg) !important;
}
.c-search > div {
  display    : contents;
  margin-top : 24px;
}
.c-search > div > div:nth-child(1) {
  grid-area  : d1;
  align-self : start;
  margin-top : 24px;
}
.c-search > div > div:nth-child(1):empty {
  display : none;
}

.c-search > div > div:nth-child(2) {
  grid-area  : d2;
  align-self : start;
  margin-top : 24px;
}
.c-search > div > div:nth-child(2):empty {
  display : none;
}

.c-search > div > div{
  border-radius    : var(--c-radius);
  border           : 1px solid var(--c-border);
  background-color : white;
  padding          : 16px 16px;

}
.c-search > 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);
}
.c-search > 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;
}
.c-search > div > div:nth-child(1) a::before {
  background-image : url(/wp-content/plugins/custom/assets/arrow-right-icon.svg);
}
.c-search > div > div:nth-child(2) a::before {
  background-image : url(/wp-content/plugins/custom/assets/list-icon.svg);
}

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