Align search experience with settings

assets/css/frontend/nav/mobile-toggle.css

@@ -553,6 +553,73 @@
   font-size: 0.75rem;
 }
 
+.nav-searchbox__meta {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.nav-searchbox__types {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.nav-searchbox__type {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-pill, 999px);
+  background: var(--surface-2);
+  color: var(--color-ink-3);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.nav-searchbox__type.is-active {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.nav-searchbox__category-wrap {
+  position: relative;
+}
+
+.nav-searchbox__category {
+  appearance: none;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 34px 0 12px;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-pill, 999px);
+  background: var(--surface-2);
+  color: var(--color-ink);
+  font: 500 0.875rem/1 var(--font-ui);
+}
+
+.nav-searchbox__category-wrap::after {
+  content: '';
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--color-ink-3);
+  pointer-events: none;
+}
+
+.nav-searchbox__category:disabled {
+  opacity: 0.56;
+  cursor: not-allowed;
+}
+
 .nav-drawer__menu {
   flex: 1;
   padding: 16px 20px 32px;