.ts{position:relative;margin-left:auto}
.ts-btn{display:none}
.ts-panel{position:relative}
.ts-field{position:relative;display:flex;align-items:center;width:260px;height:38px;padding:0;border:0;border-radius:10px;color:var(--muted)}
.ts-field:focus-within .ts-input{border-color:var(--accent)}
.ts-field:focus-within{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.ts-field svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none}
.ts-input{flex:1;min-width:0;width:100%;height:100%;box-sizing:border-box;margin:0;padding:0 34px 0 34px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:.92rem;outline:none}
.ts-input::placeholder{color:var(--faint)}
.ts-key{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:.72rem;border:1px solid var(--line2);border-radius:5px;padding:0 5px;color:var(--faint)}
.ts-list{position:absolute;top:calc(100% + 6px);left:0;right:0;width:auto;box-sizing:border-box;max-height:min(420px,70vh);overflow:auto;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow-lg);z-index:60}
.ts-list[hidden]{display:none}
.ts-opt{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:start;padding:8px 10px;border-radius:9px;cursor:pointer;text-decoration:none;color:var(--text)}
.ts-opt[aria-selected=true],.ts-opt:hover{background:var(--line)}
.ts-opt .logo-tile{grid-row:1 / span 2;align-self:start}
.ts-opt>span:nth-child(2){min-width:0}
.ts-name{display:block;font-weight:500;font-size:.93rem;line-height:1.25;overflow-wrap:anywhere}
.ts-cat{display:block;margin-top:2px;font-size:.78rem;line-height:1.35;color:var(--muted);font-weight:500;overflow-wrap:anywhere}
.ts-c{white-space:nowrap}
.ts-hit{font-weight:700;background:transparent;color:inherit;padding:0}
.ts-opt .badge{grid-column:2;justify-self:start;white-space:nowrap}
.ts-more{display:block;margin-top:4px;padding:9px 10px;border-top:1px solid var(--line2);border-radius:0 0 9px 9px;text-align:center;font-weight:500;font-size:.88rem;color:var(--accent)}
.ts-empty{padding:10px;color:var(--muted);font-size:.9rem}
.site-header .nav-links{margin-left:8px}
@media (max-width:900px){
  .ts{margin-left:auto;position:static}
  .ts-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;color:var(--muted);border-radius:9px}
  .ts-panel{display:none;position:absolute;left:0;right:0;top:100%;padding:10px 16px 14px;background:var(--bg);border-bottom:1px solid var(--line);z-index:60}
  .ts.open .ts-panel{display:block}
  .ts-field{width:100%;height:44px}
  .ts-key{display:none}
  .ts-list{position:static;width:100%;margin-top:8px;box-shadow:none}
  .site-header .nav-links{margin-left:0}
}
@media (min-width:901px){.ts-panel{display:block}}
/* Q11 build: the header gained a search button, so tighten it on narrow phones and let it wrap to two rows
   rather than scroll sideways (320 px reflow, with and without text spacing). The panel opens under the header. */
@media (max-width:400px){.site-header .nav{gap:4px}.site-header .nav-links{gap:2px}.site-header .nav-links a{padding:8px 6px}.site-header .nav-links a.btn-primary{margin-left:2px}.ts-btn{width:40px}}
@media (max-width:380px){html{scroll-padding-top:7.5rem}.site-header .nav{flex-wrap:wrap;height:auto;min-height:62px;padding-block:9px;row-gap:4px}.site-header .nav-links{margin-left:auto}}
/* Header overflow at 761-881 px (pending ID from Boss): Q11's fixed 260 px search field plus the full nav was ~882 px wide,
   so 768 px tablets scrolled sideways and "Price changes" wrapped. Up to 900 px the search now uses the same icon button
   and drop-down panel as phones (breakpoints above moved 760/761 -> 900/901); the nav links are unchanged. Above 900 px the
   field may shrink (never past 260 px) and nav links never wrap, as a safety net. */
@media (min-width:901px){.ts{flex:0 1 260px;min-width:0}.ts-field{width:100%}.site-header .nav-links{flex-shrink:0}.site-header .nav-links a{white-space:nowrap}}
/* Q53: fit the header on one row at 320-380 px (logo, search button, nav). Tighter gutters and link padding only;
   targets stay >=24 px (search button 36x44) and the <=380 px wrap above remains as the reflow/text-spacing fallback. */
@media (max-width:360px){.site-header .wrap.nav{padding-inline:12px}.site-header .nav-links a{padding:8px 4px}.ts-btn{width:36px}}