/*!
 * Acme Search & Discovery – Vollbild-Such-Layer (Standalone-Styles)
 * Eigenes, theme-unabhängiges Styling (Doofinder-Modell). Namespaced unter
 * .acme-layer / .acme-* , damit nichts mit dem Shop-Theme kollidiert.
 */
.acme-layer {
    --acme-green: #7cb342;
    --acme-green-d: #558b2f;
    --acme-accent: #8bc34a;
    --acme-ink: #222;
    --acme-muted: #777;
    --acme-line: #e4e4e4;

    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    /* Vorschau-Modus: abgedunkelter Hintergrund, das Panel oben schwebt darüber. */
    background: rgba(18, 18, 18, .42);
    overflow-y: auto;
    color: var(--acme-ink);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.acme-layer.is-open { display: block; }
body.acme-layer-open { overflow: hidden; }

.acme-layer *,
.acme-layer *::before,
.acme-layer *::after { box-sizing: border-box; }

/* Weiße Bühne. Vorschau: wächst mit Inhalt (Schatten). Ergebnis: Vollbild. */
.acme-layer__panel {
    background: #fff;
    width: 100%;
}
.acme-layer:not(.is-results) .acme-layer__panel {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}
.acme-layer.is-results {
    background: #fff;
}
.acme-layer.is-results .acme-layer__panel {
    min-height: 100vh;
}

.acme-layer__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1rem 1.5rem 2rem;
    position: relative;
}
.acme-layer.is-results .acme-layer__inner {
    padding-bottom: 4rem;
}

.acme-layer__bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .4rem 0 1rem;
    border-bottom: 2px solid var(--acme-accent);
}
.acme-layer__form { flex: 1 1 auto; }
.acme-layer__searchwrap { display: flex; align-items: center; gap: .6rem; }
.acme-layer__icon { width: 22px; height: 22px; color: var(--acme-muted); flex: 0 0 auto; }
.acme-layer__input {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: 0;
    font-size: 1.6rem;
    padding: .3rem 0;
    background: transparent;
    color: inherit;
}
.acme-layer__input::placeholder { color: #bbb; }
/* native Such-Feld-Leeren-Kreuz ausblenden (kollidiert sonst mit unserem Schließen-X) */
.acme-layer__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.acme-layer__close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    color: #444;
    padding: 0 .25rem;
}
.acme-layer__close:hover { color: #000; }

.acme-layer__brand {
    position: absolute;
    right: 1.5rem;
    top: 1rem;
    color: #cdcdcd;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* „Zuletzt gesucht" */
.acme-layer__recent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0 .25rem;
}
.acme-layer__recent-label { color: var(--acme-muted); font-size: .85rem; }
.acme-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--acme-line);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .85rem;
    background: #fafafa;
    cursor: pointer;
    color: inherit;
}
.acme-chip:hover { border-color: var(--acme-accent); }
.acme-layer__recent-clear {
    background: none; border: 0; cursor: pointer;
    color: var(--acme-green-d); font-size: .85rem;
}

.acme-layer__body { padding-top: 1rem; }
.acme-layer.is-results .acme-layer__body { min-height: 40vh; }
.acme-layer.is-loading .acme-layer__results { opacity: .5; transition: opacity .15s ease; }

/* --- Vorschau / Leerzustand (beliebte Suchen + Highlights) --------------- */
.acme-empty {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 2.5rem;
    padding-top: .5rem;
}
.acme-empty--single { grid-template-columns: 1fr; }
.acme-empty__title { font-size: 1.05rem; margin: 0 0 1rem; font-weight: 700; }
.acme-empty__popular-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.acme-empty__popular-term {
    background: none; border: 0; padding: 0;
    color: var(--acme-muted); cursor: pointer;
    font-size: .95rem; text-align: left;
}
.acme-empty__popular-term:hover { color: var(--acme-green-d); text-decoration: underline; }

.acme-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}
.acme-carousel .acme-card { min-width: 180px; }

@media (max-width: 720px) {
    .acme-empty { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --- Ergebnis-Layout (Facetten + Grid) im Standalone-Modus --------------- */
.acme-results__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    padding-top: .5rem;
}
.acme-results__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.acme-results__count { font-weight: 600; }
.acme-results__sort { color: var(--acme-muted); font-size: .9rem; }
.acme-results__sort select {
    border: 1px solid var(--acme-line);
    border-radius: 6px;
    padding: .3rem .5rem;
    margin-left: .4rem;
}
.acme-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}
.acme-results__none { color: var(--acme-muted); padding: 2rem 0; }
.acme-results__dym {
    margin-bottom: 1rem;
    padding: .6rem .9rem;
    background: #f1f7ea;
    border-left: 3px solid var(--acme-green);
    border-radius: 4px;
    font-size: .9rem;
    color: var(--acme-green-d);
}

/* --- Facetten ----------------------------------------------------------- */
.acme-facet { margin-bottom: 1.75rem; }
.acme-facet__title { font-size: 1rem; margin: 0 0 .75rem; font-weight: 700; }
.acme-facet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.acme-facet__list li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.acme-facet__list label { display: flex; align-items: center; gap: .5rem; width: 100%; cursor: pointer; }
.acme-facet__list .acme-facet__count { margin-left: auto; color: var(--acme-muted); font-size: .82rem; }
.acme-facet__list input { accent-color: var(--acme-green); }
.acme-facet__price { display: flex; align-items: center; gap: .5rem; }
.acme-facet__price input[type="number"] {
    width: 5rem; border: 1px solid var(--acme-line); border-radius: 6px; padding: .35rem .45rem;
}

/* --- Eigene Produktkarte (Standalone-Modus) ----------------------------- */
.acme-card {
    border: 1px solid var(--acme-line);
    border-radius: 8px;
    background: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
}
.acme-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: #d4d4d4; }
.acme-card__thumb {
    height: 130px;
    border-radius: 6px;
    background: #f3f5f1 center/contain no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.acme-card__thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }
.acme-card__name {
    font-size: .86rem;
    line-height: 1.35;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.acme-card__variants { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.acme-card__variant {
    font-size: .68rem;
    line-height: 1;
    padding: .2rem .4rem;
    border: 1px solid var(--acme-line);
    border-radius: 4px;
    color: var(--acme-muted);
    background: #fafafa;
    white-space: nowrap;
}
.acme-card__variant--more { border-style: dashed; }

.acme-card__price { display: flex; align-items: baseline; gap: .5rem; margin-top: auto; }
.acme-card__old { color: var(--acme-muted); text-decoration: line-through; font-size: .8rem; }
.acme-card__now { font-weight: 700; }
.acme-card__now.is-sale { color: var(--acme-green-d); }

@media (max-width: 860px) {
    .acme-results__layout { grid-template-columns: 1fr; }
    .acme-layer__input { font-size: 1.2rem; }
}