.searchbox{height:60px;border:1px solid #dfe3e8;border-radius:10px;box-shadow:var(--shadow);display:flex;align-items:center;padding-left:18px;position:relative;background:#fff;max-width:570px}.searchbox input{border:0;outline:0;flex:1;padding:0 12px}.searchbox>button{height:44px;margin-right:7px;border:0;border-radius:7px;background:var(--green);color:#fff;font-weight:700;padding:0 20px}.suggestions{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);z-index:2000}.suggestions.open{display:block}.suggestion{display:block;width:100%;border:0;border-bottom:1px solid #f0f2f4;background:#fff;text-align:left;padding:10px 14px}.suggestion strong,.suggestion small{display:block}.suggestion small{color:var(--muted)}
/* Area page header search */
.header-search{
  position:relative;
  width:290px;
  height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  background:#f7f8f9;
  border:1px solid #e3e7ea;
  border-radius:10px;
  flex:0 1 290px;
}

.header-search:focus-within{
  background:#fff;
  border-color:#b8c7c0;
  box-shadow:0 0 0 3px rgba(31,111,78,.08);
}

.header-search-icon{
  color:var(--muted);
  font-size:17px;
  line-height:1;
  flex:0 0 auto;
}

.header-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  font-size:13px;
  color:inherit;
}

.header-search input::placeholder{
  color:#8c969f;
}

.header-search .suggestions{
  top:44px;
  left:0;
  right:0;
}

@media(max-width:1100px){
  .header-search{
    width:220px;
    flex-basis:220px;
  }

  .site-nav{
    gap:20px;
  }
}

@media(max-width:800px){
  .site-header{
    gap:9px;
  }

  .header-search{
    order:2;
    width:auto;
    flex:1 1 auto;
    height:36px;
    padding:0 9px;
    min-width:0;
  }

  .header-search input{
    font-size:12px;
  }

  .header-search input::placeholder{
    color:transparent;
  }

  .site-header .actions{
    flex:0 0 auto;
    gap:3px;
  }

  .site-header .actions button{
    padding:6px 4px;
    font-size:11px;
  }
}

@media(max-width:520px){
  .site-header .actions button:first-child{
    display:none;
  }

  .site-header .actions button:last-child{
    font-size:0;
  }

  .site-header .actions button:last-child::after{
    content:"♙";
    font-size:18px;
  }
}

.suggestion-empty{
  padding:12px 14px;
  color:#6f7a82;
  font-size:13px;
  line-height:1.45;
  background:#fff;
}