/* Header additions to rk.css (docs/04 §A). .hsearch is the prototype's button that opens the search overlay. */

/* Vector logo from RK Store → Settings → Brand, replacing the wordmark. */
.brand__logo {
  display: block;
  width: auto;
  height: 2.5rem;
  max-width: 12rem;
}

/* Live search (@rk/search): listbox in the search overlay (docs/04 §A). */
.search__results { padding-block: var(--space-6) var(--space-10); }
.slist { display: grid; gap: var(--space-5); }
.sgroup { display: grid; gap: var(--space-1); }
.sgroup .search__h { margin-bottom: var(--space-1); }
.sopt { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-md); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); cursor: pointer; font-size: var(--fs-sm); }
.sopt:hover, .sopt.is-active { background: var(--color-surface); }
.sopt.is-active { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.sopt__img { flex: none; inline-size: 3rem; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-media); background: var(--color-plate); }
.sopt__img img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sopt__text { display: grid; gap: var(--space-1); min-inline-size: 0; }
.sopt__name { color: var(--color-ink); }
.sopt__meta { color: var(--color-ink-3); font-size: var(--fs-xs); }
.sopt__tag { color: var(--color-offer-ink); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.sopt__price { font-size: var(--fs-xs); }
.sopt--exact { background: var(--color-offer-soft); }
.sopt--all { color: var(--color-ink); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 0.3em; }
.search__empty { display: grid; gap: var(--space-4); justify-items: start; }
.search-try { display: grid; gap: var(--space-8); }

/* Former inline styles (docs/10 §1). */
.mega__feature .mega__title { font-size: var(--fs-title); }
.brand--start { justify-items: start; }

/* Signed in: the sticky header sits below WordPress's fixed admin bar (32 px, 46 px at ≤ 782 px). At ≤ 600 px the
   bar scrolls away with the page, so the header sticks to the top as for visitors (RK-39a). */
@media screen and (min-width: 601px) {
  .admin-bar .hdr { top: var(--wp-admin--admin-bar--height, 32px); }
}