/* dsx-ajax: Live-Such-Dropdown. CI-Farben via CSS-Variablen -> pro Shop anpassbar.
   Defaults im Drexel-CI (Olivgruen / Hellgruen). Verankert am bestehenden .search-wrapper,
   ohne den Header-DOM umzubauen. */
.search-wrapper.dsx-anchor {
    --dsx-accent: rgb(64, 86, 29);
    --dsx-accent-soft: rgb(233, 241, 222);
    --dsx-border: #e3e3df;
    --dsx-text: #2b2b2b;
    --dsx-muted: #6b7257;
    position: relative;
}

.dsx-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1080;
    /* Position/Breite wird per .dsx-pos-* (Backend-Setting) gesteuert, siehe unten. */
    max-height: 75vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--dsx-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    padding: .4rem 0;
    text-align: left;
}
.dsx-dropdown[hidden] { display: none; }

.dsx-group + .dsx-group { border-top: 1px solid var(--dsx-border); }
.dsx-group-head {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dsx-muted);
    padding: .6rem 1rem .25rem;
}

.dsx-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 1rem;
    color: var(--dsx-text);
    text-decoration: none;
    line-height: 1.3;
}
.dsx-item:hover,
.dsx-item.is-active {
    background: var(--dsx-accent-soft);
    text-decoration: none;
    color: var(--dsx-text);
}

.dsx-item-img {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f4f2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dsx-item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.dsx-item-icon {
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    color: var(--dsx-muted);
}

.dsx-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dsx-item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsx-item-artnr { font-size: .72rem; color: var(--dsx-muted); }
.dsx-item-preis { font-size: .85rem; color: var(--dsx-accent); font-weight: 600; }
.dsx-item-vpe { color: var(--dsx-muted); font-weight: 400; margin-left: .3rem; }

.dsx-item-link .dsx-item-name { font-weight: 500; white-space: normal; }

.dsx-all {
    display: block;
    text-align: center;
    margin: .4rem .6rem .25rem;
    padding: .6rem;
    border-radius: 10px;
    background: var(--dsx-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.dsx-all:hover { background: rgb(52, 70, 23); color: #fff; text-decoration: none; }

/* dsx: Hinweis — die Link-Farben (.dsx-item/.dsx-all) werden zusaetzlich per injiziertem <style>
   (Bootstrap::injectAssets) mit hoeherer Spezifitaet gesetzt, um `header a:not(...)` (0,2,2) aus
   dem NOVA-Theme zu schlagen. Dort, weil das injizierte <style> nie gecacht wird (kein
   Template-Versionsbump noetig), hier bleiben nur die Basiswerte. */

.dsx-empty { padding: 1rem; text-align: center; color: var(--dsx-muted); }

/* dsx: kleiner Lade-Spinner rechts im Suchfeld */
.dsx-spinner {
    position: absolute;
    top: 50%;
    right: 52px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--dsx-accent-soft);
    border-top-color: var(--dsx-accent);
    border-radius: 50%;
    z-index: 1081;
    animation: dsx-spin .6s linear infinite;
    pointer-events: none;
}
.dsx-spinner[hidden] { display: none; }
@keyframes dsx-spin { to { transform: rotate(360deg); } }

/* dsx: Position/Breite je Backend-Setting.
   field = an Suchfeldbreite (Standard, left:0/right:0 aus .dsx-dropdown).
   wide  = rechtsbuendig, breiter, damit lange Treffernamen mehr Platz haben. */
.dsx-pos-wide .dsx-dropdown {
    left: auto;
    right: 0;
    max-width: 92vw;
}
@media (min-width: 768px) {
    .dsx-pos-wide .dsx-dropdown { min-width: 480px; }
}
@media (min-width: 1200px) {
    .dsx-pos-wide .dsx-dropdown { min-width: 560px; }
}