/* Catalogue search, on every page.
 *
 * The search box only ever existed on sales.html. Somebody reading a thruster
 * page who wanted a penetrator had to go back to the catalogue and start
 * again, and 231 product pages -- the pages people actually land on from a
 * search engine -- offered no way to look anything up.
 *
 * The trigger sits in the header next to the navigation; the panel it opens
 * is an overlay rather than a page, so nothing is lost by opening it and
 * closing it again. Everything here is prefixed .vxs- so it cannot collide
 * with the .vx-, .px- and .lp- namespaces already on the site.
 */

.vxs-trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: .35rem;
    padding: .38rem .7rem;
    border: 1px solid var(--c-line-firm);
    border-radius: 999px;
    background: transparent;
    color: var(--c-sub);
    font: 500 .7rem 'IBM Plex Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.vxs-trigger:hover { color: var(--c-accent); border-color: var(--c-accent); }
.vxs-trigger:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.vxs-trigger svg { width: .95rem; height: .95rem; flex-shrink: 0; }
/* The keyboard hint is a promise the pointer-only devices cannot keep. */
.vxs-key { padding: .05rem .3rem; border: 1px solid var(--c-line-firm); border-radius: 4px; font-size: .62rem; letter-spacing: .04em; }
@media (hover: none) { .vxs-key { display: none; } }
/* Below 1024px the navigation collapses behind the hamburger, so the trigger
   sits beside it instead: logo, then a gap, then search, then the menu. */
@media (max-width: 1024px) {
    .vxs-trigger { order: 2; margin-left: auto; }
    .nav-toggle { order: 3; margin-left: .55rem !important; }
}
/* Hidden on a narrow screen as well as a touch one: hover:none is the right
   test but it misses a small window, and a keyboard shortcut printed on a
   phone is an instruction the device cannot follow. */
@media (max-width: 900px) { .vxs-label, .vxs-key { display: none; } .vxs-trigger { padding: .42rem .62rem; } }

.vxs-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    padding: clamp(3rem, 9vh, 7rem) 5% 2rem;
    background: var(--c-scrim);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.vxs-overlay.is-open { display: block; }
body.vxs-locked { overflow: hidden; }

.vxs-panel {
    max-width: 720px;
    margin: 0 auto;
    border-radius: 18px;
    background: var(--c-surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.vxs-field { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-line-thin); }
.vxs-field svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--c-faint); }
.vxs-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-family: Inter, Arial, sans-serif;
    font-size: 1.05rem;
}
.vxs-input:focus { outline: none; }
.vxs-close {
    border: 0; background: transparent; color: var(--c-faint); cursor: pointer;
    font: 500 .68rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase;
}
.vxs-close:hover { color: var(--c-ink); }

.vxs-status { padding: .7rem 1.25rem; color: var(--c-sub); font-size: .8rem; border-bottom: 1px solid var(--c-line-soft); }
.vxs-status:empty { display: none; }

.vxs-results { max-height: min(58vh, 30rem); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.vxs-results:empty { display: none; }
.vxs-result a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem 1.25rem;
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--c-line-soft);
}
.vxs-result a:hover, .vxs-result.is-active a { background: var(--c-tint); }
.vxs-result img { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; background: var(--c-plate-soft); border-radius: 8px; }
.vxs-text { min-width: 0; }
.vxs-name { display: block; font-size: .92rem; font-weight: 500; line-height: 1.35; }
.vxs-meta { display: block; margin-top: .12rem; color: var(--c-sub); font: 500 .66rem 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
/* The part of the name that was typed, so it is obvious why a row matched. */
.vxs-name mark { background: var(--c-mark); color: inherit; padding: 0 .1em; border-radius: 3px; }

.vxs-foot { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: .7rem 1.25rem; border-top: 1px solid var(--c-line-soft); color: var(--c-faint); font-size: .74rem; }
.vxs-foot a { color: var(--c-accent); }

@media (max-width: 600px) {
    .vxs-overlay { padding: 1rem 1rem 2rem; }
    .vxs-results { max-height: 62vh; }
}

/* --- /search/ ------------------------------------------------------------
   The page behind the overlay. Same rows, laid out down the page instead of
   inside a panel, so a result looks the same wherever somebody met it. */
.vxs-page { max-width: 720px; margin-top: 2rem; }
.vxs-page__field { padding: .9rem 1.1rem; border: 1px solid var(--c-line-firm); border-bottom: 1px solid var(--c-line-firm); border-radius: 12px; background: var(--c-surface); }
.vxs-page__field:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-glow); }
.vxs-page .vxs-status { padding: .9rem 0 0; border: 0; }
.vxs-page .vxs-status a { color: var(--c-accent); }
.vxs-page__results { max-height: none; margin-top: .5rem; overflow: visible; }
.vxs-page__results .vxs-result a { padding: .8rem .6rem; border-radius: 10px; }

.vxs-browse-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: .65rem;
    margin-top: 1.25rem;
}
.vxs-browse-links a {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: .75rem .9rem;
    border: 1px solid var(--c-line-mid);
    border-radius: 10px;
    color: var(--c-ink);
    line-height: 1.4;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.vxs-browse-links a:hover,
.vxs-browse-links a:focus-visible {
    border-color: var(--c-accent);
    background: var(--c-tint);
}