/* ============================================================
   GEPRO V3 - Produktsuche (Off-Canvas, Fuzzy + Kategorie)
   ============================================================ */
.nav__search { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill);
  color: inherit; background: transparent; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav__search:hover { background: rgba(125,130,140,.14); }
.nav__search svg { width: 20px; height: 20px; }
.site-header[data-over-dark]:not(.is-scrolled) .nav__search { color: #fff; }

.search-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(8,10,14,.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.search-backdrop.is-open { opacity: 1; visibility: visible; }

.search-panel { position: fixed; inset: 0 0 0 auto; width: min(500px, 100%); z-index: 100; background: #fff;
  box-shadow: -30px 0 90px -40px rgba(8,10,14,.5); transform: translateX(100%); visibility: hidden;
  transition: transform .42s var(--ease), visibility .42s; display: flex; flex-direction: column; }
.search-panel.is-open { transform: none; visibility: visible; }

.search-head { display: flex; gap: .8rem; align-items: center; padding: 1.2rem 1.3rem; box-shadow: inset 0 -1px 0 var(--line); }
.search-field { position: relative; flex: 1; display: flex; align-items: center; }
.search-field__ico { position: absolute; left: 1rem; width: 19px; height: 19px; color: var(--text-3); pointer-events: none; }
.search-field input { width: 100%; font: inherit; font-size: 1.05rem; padding: .85em 2.6em .85em 2.9em;
  border: none; background: var(--bg-soft); border-radius: var(--r-pill); color: var(--text); outline: none; }
.search-field input:focus { box-shadow: 0 0 0 2px var(--blue) inset; }
.search-clear { position: absolute; right: .55rem; width: 30px; height: 30px; border-radius: var(--r-pill);
  background: transparent; cursor: pointer; color: var(--text-3); font-size: 1.4rem; line-height: 1; display: grid; place-items: center; }
.search-clear:hover { background: var(--bg-soft-2); color: var(--text); }
.search-close { width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: transparent; cursor: pointer; color: var(--text-2); flex: none; }
.search-close:hover { background: var(--bg-soft); color: var(--text); }
.search-close svg { width: 22px; height: 22px; }

.search-cats { display: flex; flex-wrap: wrap; gap: .45rem; padding: 1rem 1.3rem; box-shadow: inset 0 -1px 0 var(--line); }
.schip { font-size: .85rem; font-weight: 600; color: var(--text-2); background: var(--bg-soft);
  padding: .5em 1em; border-radius: var(--r-pill); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.schip:hover { background: var(--bg-soft-2); color: var(--text); }
.schip[aria-pressed="true"] { background: var(--blue); color: #fff; }

.search-results { flex: 1; overflow-y: auto; padding: .8rem 1rem 2rem; -webkit-overflow-scrolling: touch; }
.search-hint, .search-empty { color: var(--text-3); font-size: .95rem; padding: 1.4rem 1rem; line-height: 1.5; }
.search-count { font-size: .78rem; color: var(--text-3); padding: .4rem 1rem .6rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.search-hit { display: flex; gap: .9rem; align-items: center; padding: .65rem .7rem; border-radius: 14px; transition: background var(--dur) var(--ease); }
.search-hit:hover, .search-hit:focus-visible { background: var(--bg-soft); outline: none; }
.search-hit__media { width: 64px; height: 48px; flex: none; border-radius: 9px; background: radial-gradient(120% 120% at 50% 20%, #fff 0%, #eef0f3 100%); display: grid; place-items: center; padding: 4px; }
.search-hit__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.search-hit__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.search-hit__model { font-weight: 700; font-size: .98rem; color: var(--text); font-variant-numeric: tabular-nums; }
.search-hit__meta { font-size: .82rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit__tags { display: flex; gap: .3rem; margin-top: .15rem; }
.search-hit__tag { font-size: .66rem; font-weight: 700; padding: .2em .5em; border-radius: 5px; color: var(--blue-700); background: var(--blue-50); }

@media (max-width: 520px) { .search-panel { width: 100%; } }