.site-header { display: flex; align-items: center; }
.search-form {
  position: relative;
  order: 99;
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.search-form input {
  width: 8.4rem;
  height: 2rem;
  padding: 0 .75rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--bg, #fff) 55%, transparent);
  color: inherit;
  font: 500 .78rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .06em;
  outline: none;
  transition: width .24s cubic-bezier(.2,.8,.2,1), border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.search-form input::-webkit-search-decoration,
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-form input::placeholder { color: color-mix(in srgb, currentColor 46%, transparent); letter-spacing: .12em; font-weight: 400; }
.search-form input:focus { border-color: currentColor; width: 12.5rem; }
.search-form.is-on input { width: 14rem; padding-right: 1.8rem; }
.search-glass {
  display: none;
  position: absolute;
  right: .5rem;
  width: .62rem;
  height: .62rem;
  border: 1.25px solid currentColor;
  border-radius: 50%;
  opacity: .72;
  pointer-events: none;
}
.search-glass::after {
  content: "";
  position: absolute;
  width: .34rem;
  height: 1.25px;
  background: currentColor;
  right: -.26rem;
  bottom: -.1rem;
  transform: rotate(42deg);
}
.search-form.is-on .search-glass { display: block; }
.search-suggest {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 40;
  min-width: 16rem;
  background: var(--bg-elevated, #faf8f3);
  border: 1px solid var(--border, #ddd8ce);
}
.search-suggest a { display: flex; gap: .6rem; align-items: center; padding: .45rem .6rem; }
.search-suggest img, .search-suggest i { width: 36px; height: 46px; object-fit: cover; background: var(--bg-muted, #ece8e0); flex: 0 0 36px; }
.search-suggest b { display: block; font-weight: 500; }
.search-suggest small { color: var(--fg-muted, #5c5852); }
@media (max-width: 720px) {
  .search-form { width: auto; margin-left: auto; }
  .search-form input { width: 6.4rem; }
  .search-form input:focus, .search-form.is-on input { width: 9.5rem; }
}

.search-page { max-width: 720px; margin: 0 auto; padding: 3rem 1.2rem 5rem; }
.search-list { list-style: none; padding: 0; }
.search-list a { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--border, #ddd8ce); }
.search-list img { width: 48px; height: 62px; object-fit: cover; }
.search-kicker { letter-spacing: .16em; text-transform: uppercase; font-size: .68rem; color: var(--fg-dim, #8a857c); }

.search-suggest a.is-active { background: color-mix(in srgb, currentColor 8%, transparent); }