/* Editorial Grid für b2b-ersatzteile-Kategorien.
   3-spaltiges Karten-Grid nach dem Claude-Design (variants.jsx).
   Greift nur auf die Algolia-Listen-Ansicht (#instant-search-results-container.list). */

body.catalog-category-view[class*="categorypath-b2b-ersatzteile"] #instant-search-results-container.list {

    /* Design-Tokens (aus variants.jsx übernommen) */
    --hf-accent:        #4a8a35;
    --hf-accent-hover:  #3d7329;
    --hf-ink:           #1f2126;
    --hf-ink-2:         #5a6068;
    --hf-ink-3:         #8a9099;
    --hf-line:          #e5e7e9;
    --hf-line-strong:   #c9cdd2;
    --hf-paper:         #ffffff;

    font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;

    /* ---- Grid-Container (das <ol>) ---- */
    .ais-Hits-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        list-style: none !important;
        padding: 0 !important;
        margin: 18px 0 0 !important;
    }
    .ais-Hits-item {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    /* Theme-Höhen/Abstände der Wrapper neutralisieren */
    .list-item,
    .list-item.list-2 {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    /* result-content und result-information aus dem Layout ziehen,
       damit die inhaltlichen Kinder direkte Flex-Items von .result-wrapper werden */
    .result-content,
    .result-information {
        display: contents;
    }

    /* ---- Karte: .result-wrapper ---- */
    .result-wrapper {
        position: relative;
        background: var(--hf-paper);
        border: 1px solid var(--hf-line);
        padding: 22px 22px 18px;
        min-height: 168px;
        display: flex;
        flex-direction: column;
        transition: background 140ms, border-color 140ms, box-shadow 140ms;
    }
    /* Grüner Akzent-Streifen links, kommt per scaleY beim Hover rein */
    .result-wrapper::before {
        content: "";
        position: absolute;
        left: -1px; top: -1px; bottom: -1px;
        width: 3px;
        background: var(--hf-accent);
        transform: scaleY(0);
        transform-origin: center;
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
        z-index: 3;
    }
    .result-wrapper:hover {
        background: #fafbfa;
        border-color: var(--hf-line-strong);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    }
    .result-wrapper:hover::before {
        transform: scaleY(1);
    }

    /* ---- Plan-Nummer (oben) ---- */
    .product-info-sku {
        font-size: 13px;
        color: var(--hf-ink-2);
        line-height: 1.3;
        margin: 0 !important;
        padding: 0;
    }
    /* "Artikelnummer:"-Label ausblenden, durch "Plan-Nummer:" ersetzen.
       Label und Wert erben jetzt beide dieselbe Farbe vom Eltern-Element. */
    .product-info-sku .label { display: none; }
    .product-info-sku::before { content: "Plan-Nummer: "; }
    .product-info-sku .sku.attribute {
        color: inherit;
        font-weight: inherit;
    }

    /* ---- Produkt-Titel (mitte) ---- */
    .product-title {
        margin: 10px 0 0 !important;
        padding: 0;
    }
    .product-title h3.result-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: var(--hf-accent) !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .result-wrapper:hover .product-title h3.result-title {
        color: var(--hf-accent-hover) !important;
    }

    /* ---- Footer: .product-addto-links wird zum Karten-Footer ----
       Kein "Detail ›" mehr - die ganze Karte ist der Link zum Artikel
       (über das absolut positionierte .result-link). */
    .product-addto-links {
        position: relative;
        z-index: 2;
        padding: 12px 0 0 !important;
        border-top: 1px solid var(--hf-line);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: auto 0 0 !important;
    }

    /* Merkliste-Link: Layout sicherstellen (icon + label vertikal mittig),
       aber Optik (Kreis, Farbe, Schrift) komplett dem Theme überlassen,
       damit es identisch zur restlichen Seite aussieht. */
    .product-addto-links a.towishlist {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
    }

    /* Klick-Overlay füllt die Karte, liegt aber unter dem Merkliste-Link */
    .result-link {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    /* ---- Alles ausblenden, was nicht in die Karte gehört ---- */
    .result-thumbnail,
    .product-info.short-description,
    .algolia-dynamic-widget-container,
    .product-addto-links .tocompare,
    .result-details {
        display: none !important;
    }
}