/* ---------- predictive product search (hero + header) ---------- */
.ruo-search{position:relative;width:100%;margin-top:20px}
.ruo-search-field{position:relative;display:flex;align-items:center}
.ruo-search-icon{position:absolute;left:17px;width:17px;height:17px;
  color:var(--gold);opacity:.75;pointer-events:none}
.ruo-search-input{
  width:100%;height:52px;padding:0 44px;margin:0;
  background:rgba(19,20,20,.82);color:var(--cream);
  border:1px solid var(--line);border-radius:var(--aru-control-radius,12px);
  font-family:var(--sans);font-size:14px;font-weight:300;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s ease,background .2s ease}
.ruo-search-input::placeholder{color:rgba(241,237,228,.44);
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:1}
.ruo-search-input:focus{outline:none;border-color:var(--gold);
  background:rgba(19,20,20,.96);box-shadow:0 0 0 1px rgba(230,184,109,.28)}
.ruo-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.ruo-search-spinner{position:absolute;right:17px;width:15px;height:15px;
  border:1.5px solid rgba(230,184,109,.28);border-top-color:var(--gold);border-radius:50%;
  opacity:0;transition:opacity .15s ease;pointer-events:none}
.ruo-search.is-busy .ruo-search-spinner{opacity:1;animation:ruo-spin .7s linear infinite}
@keyframes ruo-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ruo-search.is-busy .ruo-search-spinner{animation:none}
}

.ruo-search-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  max-height:344px;overflow-y:auto;overscroll-behavior:contain;padding:6px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--aru-control-radius,12px);
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.ruo-search-panel[hidden]{display:none}

/* One quiet row per result: no dividers, no stacked lines. The title sits on
   its own line and the class badge, category and stock note share the single
   muted line beneath it, so the panel scans top to bottom in one pass. */
.ruo-hit{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:8px 8px;border-radius:2px;color:var(--cream);
  text-decoration:none;transition:background .15s ease}
.ruo-hit:hover,
.ruo-hit.is-active,
.ruo-hit:focus-within{background:rgba(230,184,109,.08)}
.ruo-hit-img{width:40px;height:40px;object-fit:cover;border-radius:2px;
  background:var(--ink-3)}
.ruo-hit-img.is-blank{display:block}
.ruo-hit-link{color:inherit;text-decoration:none}
.ruo-hit-image{display:block}
/* The whole row is the link. The title anchor stretches an invisible layer
   across the hit, so the padding, badge, meta and price all navigate to the
   product; Quick Add sits above that layer and keeps its own click. */
.ruo-hit{position:relative}
.ruo-hit-title::after{content:"";position:absolute;inset:0;z-index:1}
.ruo-search-add{position:relative;z-index:2}
.ruo-search-add{justify-self:end;white-space:nowrap;border:0;border-radius:2px;
  background:transparent;color:var(--gold);padding:6px 4px;
  font:500 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;opacity:.62;transition:opacity .15s ease}
.ruo-hit:hover .ruo-search-add,
.ruo-hit.is-active .ruo-search-add,
.ruo-search-add:focus-visible{opacity:1}
.ruo-search-add:disabled{opacity:.4;cursor:wait}
.ruo-hit-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;min-width:0}
.ruo-hit-title{order:1;flex:0 0 100%;font-size:14.5px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ruo-hit-title mark{background:none;color:var(--gold);font-weight:500}
.ruo-hit-meta{order:3;margin:0;min-width:0;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream-faint,rgba(241,237,228,.42));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* General sibling, not adjacent: the title anchor sits between the badge and
   the meta in the markup. */
.ruo-hit-class ~ .ruo-hit-meta::before{content:"\00b7";margin-right:7px;opacity:.55}
.ruo-hit-class{order:2;margin:0;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;white-space:nowrap}
.ruo-hit-class-compound{color:var(--cream-faint,rgba(241,237,228,.5))}
.ruo-hit-class-equipment{color:var(--gold,#E6B86D)}
.ruo-hit-price{font-family:var(--serif);font-size:16px;color:var(--gold);
  white-space:nowrap;font-variant-numeric:tabular-nums}

.ruo-search-all{display:block;margin-top:2px;padding:11px 8px;text-align:center;
  border-radius:2px;font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);opacity:.8;text-decoration:none;
  transition:background .15s ease,opacity .15s ease}
.ruo-search-all:hover{background:rgba(230,184,109,.08);opacity:1}
.ruo-search-empty{margin:0;padding:16px 8px;text-align:center;
  font-size:13.5px;color:var(--cream-dim)}

/* Touch has no hover, so the quick-add stays legible rather than waiting for a
   pointer that never arrives. */
@media (hover:none){
  .ruo-search-add{opacity:1}
}

@media (max-width:767px){
  .ruo-search{margin-top:14px}
  .ruo-search-input{height:48px;font-size:16px}
  .ruo-search-panel{max-height:270px;padding:5px}
  .ruo-hit{grid-template-columns:36px minmax(0,1fr) auto auto;gap:10px;padding:8px 6px}
  .ruo-hit-img{width:36px;height:36px}
  .ruo-hit-title{font-size:13.5px}
  .ruo-hit-price{font-size:15px}
}
/* ---------- header toolbar search ---------- */
/* The utility row is hidden below 1023px and the burger appears; this button
   mirrors that so exactly one search icon is ever visible. */
/* Scoped to .hdr so these beat the theme's own .icon-btn{display:grid}, which
   would otherwise win on source order and show two magnifiers at once. */
.hdr .burger-search{display:none}
@media (max-width:1023px){
  .hdr .burger-search{display:grid}
}
/* Open state is marked by icon colour alone. The 42x42 background this used to
   paint sat on the theme's 2px radius, so it read as a hard square block behind
   the magnifier and stuck there for as long as the bar was open. */
.icon-btn[data-ruo-search-toggle].is-open{color:var(--gold)}
/* The open acknowledgement is the shared icon glow declared in the theme
   stylesheet (.icon-btn.rs-icon-glow svg), applied by aurelia-search.js on a
   closed -> open transition only. It replaced a button-level rs-gold-flash
   outline here that fired on close as well, so those rules are gone rather
   than left dead. Keyboard focus keeps its own .icon-btn:focus-visible rule in
   the theme, untouched. */

/* Sticks directly beneath the sticky header, so opening it while scrolled down
   still puts the field on screen rather than at the top of the document. */
.hdr-search{position:sticky;top:var(--hdr);z-index:59;
  background:rgba(19,20,20,.97);border-bottom:1px solid var(--line-soft)}
.hdr-search[hidden]{display:none}
.hdr-search .wrap{padding-top:14px;padding-bottom:14px}
.hdr-search .ruo-search{margin-top:0;max-width:560px;margin-left:auto;margin-right:auto}