/* --- Header search v3 --- */
.hs-root { position: relative; z-index: 10000; }

/* panel */
#search_v3_window.hs-panel[hidden] { display: none !important; }
#search_v3_window.hs-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  padding-block: 4px;
  background: #fff !important;          /* átlátszatlanság */
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
  max-height: min(70vh, 520px);
  overflow: auto;
  z-index: 10001;
  contain: paint;
  isolation: isolate;
}
#search_v3_window.hs-panel, #search_v3_window * { mix-blend-mode: normal !important; }

/* lista */
.hs-list { display: grid; grid-template-columns: 1fr; }

/* sorok */
.hs-item, .hs-all {
  display: grid;
  grid-template-columns: 56px 1fr max-content;  /* kép | név | ár+badge */
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}
.hs-item:hover, .hs-item.is-active,
.hs-all:hover, .hs-all.is-active { background: rgba(0,0,0,.06); }
.hs-item[aria-selected="true"], .hs-all[aria-selected="true"] { outline: 0; }

/* kép */
.hs-img {
  width: 56px; height: 56px; object-fit: contain;
  background: #fafafa; border-radius: 6px;
}

/* meta */
.hs-meta { display: flex; flex-direction: column; min-width: 0; }
.hs-name {
  font-size: 14px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60vw; /* kisebb nézetben se fusson túl */
}
.hs-name mark { background: #ffec99; color: inherit; padding: 0 2px; border-radius: 3px; }

/* ár + készlet */
.hs-line { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.hs-price { min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.hs-price.sale { font-weight: 600; }
.hs-price.sale::after {
  content: " Akció";
  font-size: 11px; margin-left: 6px; padding: 2px 6px;
  border-radius: 10px; background: #ffe3e3;
}
.hs-stock { white-space: nowrap; font-size: 13px; }
.hs-stock.in  { color: #0a7f3f; }
.hs-stock.out { color: #9a6a00; }

/* lábléc */
.hs-footer { 
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-top: 1px solid rgba(0,0,0,.08);
}
.hs-note { font-size: 12px; color: #666; opacity: .85; }
.hs-all { grid-template-columns: 1fr; gap: 0; }

/* üres állapot */
.hs-empty {
  padding: 14px 12px; color: #666; font-size: 14px;
}

/* skeleton */
.hs-skel {
  display: grid; grid-template-columns: 56px 1fr max-content;
  gap: 10px; align-items: center; padding: 10px 12px;
}
.hs-skel .i { width: 56px; height: 56px; border-radius: 6px; background: #f3f3f3; }
.hs-skel .b { height: 12px; border-radius: 6px; background: linear-gradient(90deg,#eee,#f7f7f7,#eee);
  background-size: 200% 100%; animation: hs-shine 1.2s linear infinite; }
.hs-skel .b.w1 { width: 55%; }
.hs-skel .b.w2 { width: 35%; }
.hs-skel .b.w3 { width: 70%; }
@keyframes hs-shine { 0%{background-position: 200% 0} 100%{background-position: -200% 0} }

/* jobb oldali oszlop konténer */
.hs-right { display:flex; align-items:center; }

/* accessibility – vizuálisan rejtett státusz */
.hs-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- v3: kényszerített balra igazítás a névre (desktopon is) --- */
.search_form_container .hs-panel,
.search_form_container .hs-item,
.search_form_container .hs-meta,
.search_form_container .hs-name {
  text-align: left !important;
}

/* jobb oldali oszlop maradjon jobbra */
.search_form_container .hs-right,
.search_form_container .hs-line,
.search_form_container .hs-price {
  text-align: right;
}

/* mobil kiegészítés (opcionális finomhangolás) */
@media (max-width: 768px) {
  .hs-name { max-width: 48vw; }
  .hs-price { min-width: 72px; }
}


/* ===== Retired (kifutott) blokk – HEADER SEARCH V3 =====
   Ezek a szabályok csak az ajánlói panelben (autocomplete) jelennek meg.
   Nem piszkálják a layoutot, csak vizuálisan jelölik a kifutott elemeket. */

/* Szekció-fejléc a „Kifutott nyomtatók (archív)” sorhoz */
.hs-section-head{
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px 4px;
  color: #444;
  opacity: .85;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

/* Kifutott sorok jelölése (diszkrét) */
.hs-item.is-retired{
  position: relative;
  background: #fafafa;
  border-left: 4px solid #d1d5db; /* finom szürke jelölő sáv */
}

/* A név marad olvasható, de kicsit visszafogottabb */
.hs-item.is-retired .hs-name{ opacity: .95; }

/* Jobb oszlop: retirednél nincs ár/készlet – a JS úgyis „Archív modell”-t ír,
   itt csak igazítunk, hogy szépen a jobb szélhez álljon. */
.hs-item.is-retired .hs-right .hs-line{
  justify-content: flex-end;
}

/* „Kifutott modell” badge a név mellett (JS-ben .hs-badge-retired kerül a .hs-meta-ba) */
.hs-badge-retired{
  display: inline-block;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 10px;
  color: #374151; /* slate-700 */
}

/* Archív megjegyzés a jobb oszlopban (JS: .hs-retired-note) */
.hs-retired-note{
  font-size: 12px;
  color: #555;
  opacity: .75;
}

/* Opcionális: halvány szürkeárnyalat a képre a kifutottaknál */
.hs-item.is-retired .hs-img{
  filter: grayscale(35%);
}

/* Hover/active állapotok megőrzése (finomítás, hogy ne legyen túl sötét) */
.hs-item.is-retired:hover,
.hs-item.is-retired.is-active{
  background: rgba(0,0,0,.045);
}

/* Mobil finomhangolás: badge ne törje szét a sort */
@media (max-width: 768px) {
  .hs-badge-retired{ display: none; } /* ha kell, kapcsold vissza */
}



/* --- HOTFIX: ne legyen ikon/nyíl a retired badge előtt --- */
.sv3-retired::before{
  content: none !important;
  border: 0 !important;
}

/* --- Tooltip a "Kifutott modell" jelölőhöz (csak ::after) --- */
.sv3-retired{
  position: relative;
  cursor: help;
}

.sv3-retired::after{
  content: "Ez a nyomtató már nem elérhető. Nézd meg az utángyártott kellékeket vagy az újabb modelleket.";
  position: absolute;
  left: 50%;
  bottom: 125%;
  transform: translateX(-50%);
  width: 240px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.35;
  color: #fff;
  background: rgba(0,0,0,.85);
  border-radius: 6px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-in-out;
  z-index: 20;
}

/* kis „nyíl” nélkül – nem kell ::before, így nincs ütközés */

.sv3-retired:hover::after{
  opacity: 1;
}

/* Dark mode passzolás */
@media (prefers-color-scheme: dark){
  .sv3-retired::after{
    background: rgba(0,0,0,.9);
  }
}