/* ═══ Instant search panel (public/js/instant-search.js) ═════════════
   Its own stylesheet rather than more of chrome.css, which is already
   past the ~200-line ceiling (CLAUDE.md §2). Linked straight after it
   because the panel hangs off the header that file lays out.

   ONE PANEL, TWO FORM FACTORS (§9.1).
   - Phone: full width of the header bar, directly under it. The form is
     not positioned at this width, so the panel's containing block is
     .hdr-bar — whose width IS the viewport — and nothing can cross the
     right edge at 360px (UI_UX §9.1, §9.4).
   - From 768px the form is positioned and the panel becomes a dropdown
     under the field, the same width as it.

   Open state is an ATTRIBUTE set by JS ([data-open]), never :has()
   (§10.7). Colours are tokens only (§1.2). */
.hdr-bar{position:relative}

.isrch{
  display:none;position:absolute;left:0;right:0;top:100%;
  /* Above the sticky listing toolbar (same --z-sticky, later in the
     DOM), below the drawer and the lightbox. */
  z-index:calc(var(--z-sticky) + 1);
  max-height:min(70vh, 560px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);color:var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.isrch[data-open]{display:block;animation:isrch-in .12s ease-out}
@keyframes isrch-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .isrch[data-open]{animation:none}
}

.isrch-list{list-style:none;margin:0;padding:var(--sp-1) 0}

.isrch-opt{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--tap);padding:var(--sp-2) var(--gutter);
  cursor:pointer;min-width:0;
}
.isrch-opt:hover,.isrch-opt.is-active{background:var(--surface-2)}
/* The keyboard row also gets a bar, so it is not shown by tint alone. */
.isrch-opt.is-active{box-shadow:inset 3px 0 0 var(--brand)}

/* A 1:1 box reserved before decode, so nothing shifts (§6). */
.isrch-thumb{
  flex:0 0 auto;width:40px;aspect-ratio:1 / 1;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--logo-chip);
  border:1px solid var(--line-soft);overflow:hidden;color:var(--ink-3);
}
.isrch-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.isrch-thumb .ico{width:22px;height:22px}

.isrch-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
/* Names are long ("DC-DC 300W 9A Step Down Buck Converter 5-40V…"):
   two lines, then clipped. The full name is one tap away. */
.isrch-name{
  font-size:1rem;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;
}
.isrch-name mark{background:var(--brand-light);color:inherit;font-weight:700;
  border-radius:2px;padding:0 1px}
.isrch-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);
  font-size:.875rem;line-height:1.3}
.isrch-price{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.isrch-was{color:var(--ink-3);text-decoration:line-through;font-variant-numeric:tabular-nums}
.isrch-low{color:var(--red);font-weight:600}

/* Pinned to the panel's foot: on a phone eight rows overflow the panel,
   and the way on to the full listing must not scroll away with them. */
.isrch-all{
  position:sticky;bottom:calc(var(--sp-1) * -1);background:var(--surface);
  border-top:1px solid var(--line);margin-top:var(--sp-1);
  font-size:1rem;font-weight:600;color:var(--brand-ink);
}
.isrch-all:hover,.isrch-all.is-active{background:var(--surface-2)}
.isrch-all .ico{width:22px;height:22px;flex:0 0 auto}   /* §9.3 icon + label */
.isrch-all span{min-width:0;overflow-wrap:anywhere}

.isrch-note{margin:0;padding:var(--sp-4) var(--gutter);font-size:1rem;color:var(--ink-2)}
.isrch-note:empty{display:none}

@media (min-width:768px){
  .hdr-search{position:relative}
  .isrch{
    top:calc(100% + var(--sp-1));
    border:1px solid var(--line);border-radius:var(--r);
    max-height:min(70vh, 600px);
  }
  .isrch-opt{padding-inline:var(--sp-3)}
  .isrch-note{padding-inline:var(--sp-3)}
}