/* G3M site search (g3m-search.php + site-search.js) — owner-approved mock-up, 2026-11-05.
   Desktop panel under the header · the box at the top of the phone menu · the ?s= results page. */

.screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

/* ── Results (shared by the desktop panel and the phone menu) ── */
.g3m-ss-results { display: flex; flex-direction: column; text-align: left; }
.g3m-s-group { padding: 8px 8px 2px; }
.g3m-s-gt { display: flex; justify-content: space-between; padding: 4px 10px 6px; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.g3m-s-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 6px 10px; border-radius: 10px; color: #eef3f8; text-decoration: none; }
.g3m-s-item:hover, .g3m-s-item:focus-visible, .g3m-s-item.is-active { background: rgba(0, 255, 247, .06); outline: 1px solid rgba(0, 255, 247, .25); }
.g3m-s-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; }
.g3m-s-ico { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: #071525; border: 1px solid var(--border); font-size: 16px; color: #c9d6e2; }
.g3m-s-txt { display: flex; flex-direction: column; min-width: 0; }
.g3m-s-txt b { font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.g3m-s-txt small { color: var(--muted); font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g3m-s-item mark { background: none; color: var(--cyan); font-weight: 700; }
.g3m-s-price { color: var(--gold); font-weight: 700; white-space: nowrap; font-size: 14px; }
.g3m-s-price del { color: var(--muted); font-weight: 400; margin-right: 4px; }
.g3m-s-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px 12px; margin-top: 6px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.g3m-s-all { color: var(--cyan); text-decoration: none; }
.g3m-s-all:hover { text-decoration: underline; }
.g3m-s-msg { margin: 0; padding: 18px 18px; color: #c9d6e2; font-size: 14px; text-align: center; }
.g3m-s-msg a { color: var(--cyan); }

/* ── Desktop panel ── */
.g3m-s-backdrop { position: fixed; inset: 0; z-index: 9400; background: rgba(2, 4, 8, .6); display: none; }
.g3m-s-panel { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 9500; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; background: var(--card); border: 1px solid #1e3a50; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); display: none; }
body.g3m-s-open .g3m-s-backdrop, body.g3m-s-open .g3m-s-panel { display: block; }
body.admin-bar .g3m-s-panel { top: 108px; }
.g3m-s-field { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--cyan); }
.g3m-s-field input { flex: 1; min-width: 0; height: 36px; background: transparent; border: 0; outline: none; color: #eef3f8; font-size: 17px; font-family: inherit; }
.g3m-s-field input::placeholder { color: var(--muted); }
.g3m-s-field input::-webkit-search-cancel-button { filter: invert(1) hue-rotate(180deg); }
.g3m-s-esc { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--muted); background: none; border: 1px solid #1e3a50; border-radius: 6px; padding: 3px 7px; cursor: pointer; }
.g3m-s-esc:hover { color: #fff; border-color: var(--cyan); }
.g3m-s-panel-results:empty { display: none; }

/* ── Phones/tablets: the box at the top of the ☰ menu ── */
.nav-overlay-search { width: min(350px, 100%); flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 50px; border: 1px solid rgba(0, 255, 247, .35); border-radius: 12px; background: var(--card); color: var(--cyan); }
.nav-overlay-search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; color: #eef3f8; font-size: 16px; font-family: inherit; }
.nav-overlay-search input::placeholder { color: var(--muted); }
.nav-overlay-search input::-webkit-search-cancel-button { filter: invert(1) hue-rotate(180deg); }
.nav-overlay-search:focus-within { border-color: var(--cyan); }
.nav-overlay-results { width: min(350px, 100%); flex-shrink: 0; }
.nav-overlay-results .g3m-s-group { padding-left: 0; padding-right: 0; }
.nav-overlay-results .g3m-s-keys { display: none; }
.nav-overlay.is-searching { justify-content: flex-start; }
.nav-overlay.is-searching .nav-overlay-link { display: none; }

/* ── The results page (?s=…) ── */
.g3m-sr { max-width: 780px; margin: 0 auto; padding: 120px 24px 100px; color: #c9d8e8; }
.g3m-sr-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin: 0 0 12px; }
.g3m-sr-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: #e2edf6; margin: 0 0 20px; overflow-wrap: anywhere; }
.g3m-sr-form { display: flex; gap: 10px; margin: 0 0 14px; }
.g3m-sr-form input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(0, 255, 247, .35); background: var(--card); color: #eef3f8; font-size: 16px; }
.g3m-sr-form button { height: 50px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--cyan); color: #00201f; font-weight: 700; font-size: 15px; cursor: pointer; }
.g3m-sr-count { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.g3m-sr-group { margin: 0 0 26px; }
.g3m-sr-group h2 { display: flex; justify-content: space-between; margin: 0 0 8px; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.g3m-sr-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.g3m-sr-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: #eef3f8; text-decoration: none; }
.g3m-sr-item:hover, .g3m-sr-item:focus-visible { border-color: rgba(0, 255, 247, .4); }
.g3m-sr-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.g3m-sr-text { display: flex; flex-direction: column; min-width: 0; grid-column: 2; }
.g3m-sr-item > .g3m-sr-text:first-child { grid-column: 1 / 3; }
.g3m-sr-text b { font-weight: 600; overflow-wrap: anywhere; }
.g3m-sr-text small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.g3m-sr-price { color: var(--gold); font-weight: 700; white-space: nowrap; }
.g3m-sr-none { padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); text-align: center; }
.g3m-sr-none p { margin: 0 0 6px; }
.g3m-sr-none a { color: var(--cyan); }
@media (max-width: 600px) {
  .g3m-sr { padding: 96px 16px 80px; }
  .g3m-sr-form button { padding: 0 16px; }
}

/* ⚠ WooCommerce rings every focused input on shop pages: `.woocommerce input:focus { box-shadow: 0 0 0 1px
   cyan !important }` — a box inside our box. The FIELD shows focus instead (border lights up), so the inner
   ring is removed here. `body` + two classes outranks WooCommerce's selector; !important matches its own. */
body .g3m-s-field input:focus, body .g3m-s-field input:focus-visible,
body .nav-overlay-search input:focus, body .nav-overlay-search input:focus-visible { box-shadow: none !important; border-color: transparent !important; outline: none !important; }
.g3m-s-field:focus-within { box-shadow: inset 0 -1px 0 var(--cyan); }