.hero-search {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.hero-search input {
  padding-right: 62px;
  padding-left: 16px;
  border: 0;
  background: transparent;
}

.hero-search button {
  top: 0;
  right: 0;
  width: 52px;
  height: 100%;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: rgba(0, 136, 204, .12);
  color: var(--accent-strong);
}

.hero-search button:hover { background: rgba(0, 136, 204, .2); }
.hero-search button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

@media (max-width: 640px) {
  .hero-search input { padding-right: 58px; }
  .hero-search button { width: 50px; height: 100%; }
}