/*
 * The v2 header and footer on pages that are not v2 pages
 * (components/site-header, components/site-footer). home.css carries the
 * tokens and the header, menu and footer rules; this file gives the chrome
 * what the .hv2 page shell would otherwise give it, plus the search field
 * that sits in the header row on these pages. Plain CSS, outside the Vite
 * build, like the rest of /v2.
 */

.hv2-chrome { font-family: var(--hv2-font); color: var(--text); -webkit-font-smoothing: antialiased; }
:where(.hv2-chrome) *, :where(.hv2-chrome) *::before, :where(.hv2-chrome) *::after { box-sizing: border-box; }
:where(.hv2-chrome) a { color: inherit; }
:where(.hv2-chrome) button { font: inherit; color: inherit; }
.hv2-chrome :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.hv2-chrome--footer { margin-top: auto; }

/* The header row's search. The header is a dark band in both themes, so the
   field takes the band's tokens. */
.hv2-header__search { flex: 1 1 auto; min-width: 0; max-width: 480px; margin: 0 auto; }
.hv2-header__search .df-search-field { padding: 0; background: none !important; box-shadow: none !important; border-radius: 12px; animation: none !important; }
.hv2-header__search .df-search-input { height: 44px; padding: 0 36px 0 44px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface) !important; color: var(--text) !important; font-family: var(--hv2-font); transition: border-color .15s var(--hv2-ease); }
.hv2-header__search .df-search-input::placeholder { color: var(--text-faint); opacity: 1; }
.hv2-header__search .df-search-field:focus-within .df-search-input { border-color: var(--cta); }
.hv2-header__search .df-search-ic { left: 14px !important; color: var(--text-muted) !important; }
.hv2-header__search .df-search-spark { display: none !important; }
.hv2-header .hv2-header__searchbtn { display: none; }
.hv2-header .hv2-header__seller { white-space: nowrap; }

/* Logo, search and the tools (theme, heart, Aura, Log in, Sign up) need about
   900px in one row. Below that the field becomes a button that opens the
   search bar's fullscreen overlay.
   Selectors are qualified by .hv2-header because a page that loads home.css
   itself loads it AFTER this file, and its .hv2-iconbtn / .hv2-btn display
   would otherwise win on source order. */
@media (max-width: 899px) {
    .hv2-header__search { display: none; }
    .hv2-header .hv2-header__searchbtn { display: inline-flex; }
}
/* On a phone the seller sign-in lives in the account menu, as it did in the
   old header's drawer: the row has no room for a labelled button. */
@media (max-width: 639px) {
    .hv2-header .hv2-header__searchbtn { order: 0; width: 36px; height: 36px; border: 0; }
    .hv2-header .hv2-header__seller { display: none; }
}
@media (max-width: 379px) {
    .hv2-chrome .hv2-logo__img { height: 26px; }
}