/* static/site_search.css — the header search box (website audit 2026-10-20, #6).
   NEW selectors only (.sssearch*), linked from partials/header.html, which every page includes
   after its own <style> blocks, so no template re-declares them (CLAUDE.md "storefront cascade").
   The header-row rules at the bottom are the exception; each says why it is here.

   At rest the box takes whatever the header row has left (40px up to 180px). Focused, it opens
   OVER the row: on a phone across the whole header, on a desktop 460px wide over the nav links.
   So it fits at every width without the row ever growing. */

.sssearch{position:relative; flex:0 1 180px; min-width:40px; height:40px}
.sssearch__box{position:absolute; inset:0; margin:0; display:flex; align-items:center}
.sssearch__ico{position:absolute; left:12px; top:50%; width:16px; height:16px; margin-top:-8px;
  color:var(--muted, #9a9aa3); pointer-events:none}
.sssearch__in{width:100%; height:100%; margin:0; padding:0 12px 0 36px; border-radius:999px;
  border:1px solid var(--line, #26262b); background:rgba(255,255,255,.05); color:var(--text, #f5f5f6);
  font:inherit; font-size:14px; line-height:1; outline:none; -webkit-appearance:none; appearance:none;
  text-overflow:ellipsis; transition:border-color .15s, background .15s}
.sssearch__in::placeholder{color:var(--muted, #9a9aa3); opacity:1}
.sssearch__in::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.sssearch__in:hover{border-color:#3a3a40}
.sssearch__in:focus{border-color:var(--red, #e11d2a); background:#0e0e10}
.sssearch__in:focus-visible{box-shadow:0 0 0 3px rgba(225,29,42,.25)}
.sssearch__x{display:none; position:absolute; right:6px; top:50%; width:30px; height:30px;
  margin-top:-15px; border:0; border-radius:50%; background:transparent; color:var(--muted, #9a9aa3);
  font-size:22px; line-height:30px; cursor:pointer; padding:0}
.sssearch__x:hover{color:#fff; background:rgba(255,255,255,.08)}
.sssearch__sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* open */
.sssearch.is-open .sssearch__box{z-index:70}
.sssearch.is-open .sssearch__in{padding-right:40px}
.sssearch.is-open .sssearch__x{display:block}

/* the results */
.sssearch__list{position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:71;
  max-height:min(70vh, 560px); overflow-y:auto; overscroll-behavior:contain; padding:6px;
  background:#0e0e10; border:1px solid var(--line, #26262b); border-radius:14px;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.9); text-transform:none; letter-spacing:normal}
.sssearch__list[hidden]{display:none}
.sssearch__opt{display:flex; align-items:center; gap:12px; padding:8px; border-radius:10px;
  color:var(--text, #f5f5f6); text-decoration:none}
.sssearch__pic{flex:none; width:48px; height:48px; border-radius:8px; background:var(--tile, #f3f3f5);
  display:grid; place-items:center; overflow:hidden}
.sssearch__pic img{width:48px; height:48px; object-fit:contain; display:block}
.sssearch__txt{min-width:0; display:flex; flex-direction:column; gap:2px}
.sssearch__t{font-size:14px; font-weight:600; line-height:1.3; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere}
.sssearch__m{font-size:12.5px; color:var(--muted, #9a9aa3); line-height:1.3}
.sssearch__all{display:block; padding:11px 10px; margin-top:2px; border-radius:10px;
  border-top:1px solid var(--line, #26262b); font-size:13.5px; font-weight:600;
  color:var(--text, #f5f5f6); text-decoration:none}
.sssearch__opt + .sssearch__all{margin-top:6px}
.sssearch__all + .sssearch__all{border-top:0; margin-top:0}
.sssearch__opt:hover, .sssearch__all:hover,
.sssearch__opt.is-active, .sssearch__all.is-active{background:rgba(255,255,255,.07)}
.sssearch__opt.is-active, .sssearch__all.is-active{outline:2px solid var(--red, #e11d2a); outline-offset:-2px}
.sssearch__note{padding:12px 10px; font-size:13.5px; color:var(--muted, #9a9aa3)}

/* desktop: the box opens 460px wide from where it sits, over the nav links */
@media (min-width:1025px){
  .sssearch.is-open .sssearch__box{right:auto; width:min(460px, calc(100vw - 260px))}
}
/* phone + tablet: the row is brand · box · menu · cart, and the box opens across all of it.
   `.wrap.nav` is the positioned parent at this width (ss.css, max-width:1024px). */
@media (max-width:1024px){
  .sssearch.is-open{position:static}
  .sssearch.is-open .sssearch__box{left:12px; right:12px; top:10px; bottom:10px}
  .sssearch__in{font-size:16px}          /* under 16px, iOS zooms the page on focus */
  .sssearch__list{max-height:calc(100vh - 96px)}
}

/* ⚠ HEADER-ROW RULES — the only rules here outside .sssearch. The row had no room for a box:
   1025–1279px. Measured 2026-10-20 on /shop/firearms: brand 196 + links 657 + cart 114 + three
     26px gaps already overran the content box by 33px at 1030px (an 11px page scroll before this
     box existed). Tighter row and link gaps make room for the 40px box and clear that scroll.
     `header .wrap.nav` outranks the templates' inline `.nav{gap:26px}` / `.nav .links{gap:24px}`.
   381–440px. ss.css shows the bare S&S mark below 381px; at 390px the wordmark (144px), menu
     (40) and cart (102) left exactly 40px and no gap for the box, so the mark-only header now
     runs to 440px. Same two declarations as ss.css's max-width:380px block. */
@media (min-width:1025px) and (max-width:1279px){
  header .wrap.nav{gap:12px}
  header .wrap.nav .links{gap:14px}
}
@media (max-width:440px){
  header .wrap.nav .brand{font-size:0; gap:0}
  header .wrap.nav .brand .mark{font-size:11px}
}