.gk-search{position:relative;width:100%;max-width:780px;z-index:30}
.gk-search-field{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #cbd5e1;border-radius:14px;padding:7px 14px;box-shadow:0 10px 28px rgba(4,19,43,.12)}
.gk-search-field:focus-within{outline:3px solid #38bdf855;border-color:#0284c7}
.gk-search-icon{font-size:21px;color:#475569}
.gk-search input{flex:1;min-width:0;border:0;background:transparent;color:#0f172a;font:inherit;font-size:17px;padding:12px 0;outline:none}
.gk-search input::placeholder{color:#64748b}
.gk-search-results{position:absolute;top:calc(100% + 7px);left:0;right:0;background:#fff;border:1px solid #cbd5e1;border-radius:14px;box-shadow:0 20px 50px #07152e38;max-height:370px;overflow:auto;color:#0f172a;z-index:100}
.gk-search-results[hidden]{display:none}
.gk-search-option{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;text-decoration:none;color:#0f172a;border-bottom:1px solid #e2e8f0}
.gk-search-option:last-child{border:0}
.gk-search-option:hover,.gk-search-option[aria-selected="true"]{background:#e0f2fe}
.gk-search-option strong{font-size:14px}
.gk-search-option small{font-size:12px;color:#475569;white-space:nowrap}
.gk-search-empty{padding:14px;color:#475569;font-size:14px}
.gk-search-hero{margin:30px 0 16px}
.gk-search-hero .gk-search-field{padding:10px 18px}
.gk-search-hero input{font-size:19px}
.gk-search-header{width:min(300px,30vw);margin-left:auto}
.gk-search-header input{font-size:14px;padding:7px 0}
.gk-search-header .gk-search-field{padding:3px 10px;border-radius:10px}
@media(max-width:900px){.gk-search-header{width:190px}.gk-search-header input{font-size:13px}}
@media(max-width:680px){.gk-search-header{width:100%;order:5;margin:8px 0}.gk-search-hero{margin-top:24px}.gk-search-hero input{font-size:16px}.gk-search-option{flex-direction:column;gap:2px}}

/* Cross-page header search compatibility */
.site-header .gk-search-header {
  flex: 0 1 260px;
  min-width: 160px;
  max-width: 300px;
  margin-left: 12px;
}

@media (max-width: 900px) {
  .site-header .gk-search-header {
    flex-basis: 200px;
    min-width: 140px;
  }
}

@media (max-width: 680px) {
  .site-header .gk-search-header {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 10px 0;
  }
}