/* Ansicht Liste | Kacheln in allen Produktlisten mit Box-Layout „standard" (außer Verdichter-Listen).
   Umschalter und Skript: component/product/listing.html.twig, Block element_product_listing_sorting.
   html.ks-ansicht-an = der Umschalter ist auf der Seite; html.kvl-kacheln = Kacheln gewählt (sonst Liste).
   Beide Klassen sitzen am <html> und überstehen das AJAX-Nachladen der Liste.

   Liste: Bild | Name, Artikelnummer, Chips | Preis und Knopf – statt der Standardkarte über die volle
   Breite (auf Staging 880 px je Artikel). Kacheln: Raster aus Standardkarten, 4 / 3 / 2 je Reihe nach
   Breite der Liste (24 je Seite gehen in jeder Stufe ohne angebrochene Reihe auf). */

.ks-ansicht {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid #878f9a;
    border-radius: 6px;
    overflow: hidden;
}

.ks-ansicht__b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: #2e2e2e;
    line-height: 1;
    cursor: pointer;
}

.ks-ansicht__b + .ks-ansicht__b {
    border-left: 1px solid #878f9a;
}

.ks-ansicht__b svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.ks-ansicht__b[aria-pressed="true"] {
    background: #156f94;
    color: #fff;
}

.ks-ansicht__b:focus-visible {
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #156f94;
}

@media (max-width: 767.98px), (pointer: coarse) {
    .ks-ansicht__b {
        width: 44px;
        min-height: 44px;
    }
}

/* Alter Umschalter aus dem .customTemplate (listView()/gridView()) – ersetzt, solange unserer da ist */
.ks-ansicht ~ #btnGridListContainer {
    display: none !important;
}

html.ks-ansicht-an .cms-element-product-listing {
    container: ksliste / inline-size;
}

/* Handy: Seitennavigation nur unter der Liste – oben kostete sie eine eigene Zeile vor dem ersten Produkt */
@media (max-width: 767.98px) {
    html.ks-ansicht-an .cms-element-product-listing-actions .pagination-nav {
        display: none;
    }
}

/* ---------- Liste ---------- */

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .product-box.box-standard {
    height: auto;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .product-box.box-standard > .card-body {
    position: relative;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 240px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
        "img name price"
        "img nr price"
        "img chips action"
        "img rest action";
    column-gap: 24px;
    align-items: start;
}

/* Kinder von .product-info werden Teil des Rasters (Bild | Text | Preis) */
html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-info {
    display: contents;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .card-body > *,
html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-info > * {
    grid-column: 2;
    min-width: 0;
}

/* Absolut im Raster: Bezug ist die Rasterfläche des Elements – hier die des Bildes, nicht die des Namens */
html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-badges {
    grid-area: img;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 0;
}

/* Breite fest: sonst wächst der Rahmen mit dem Bild (Querformat bei 140 px Höhe → 228 px) über den Text */
html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-image-wrapper {
    grid-area: img;
    width: 100%;
    height: 140px;
    margin: 0;
    overflow: hidden;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-image-wrapper img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-name {
    grid-area: name;
    height: auto;
    margin: 0 0 2px;
    -webkit-line-clamp: unset;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-number {
    grid-area: nr;
    margin: 0;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .kpdp-boxchips {
    grid-area: chips;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-price-info {
    grid-area: price;
    margin: 0;
    text-align: right;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-price-info > .mb-2:empty {
    display: none;
}

html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-action {
    grid-area: action;
    align-self: end;
    margin: 8px 0 0;
}

/* Liste schmal (Handy, Tablet hochkant): Bild | Text, darunter Preis und Knopf über die ganze Breite */
@container ksliste (max-width: 699.98px) {
    html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .product-box.box-standard > .card-body {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "img name"
            "img nr"
            "img chips"
            "price price"
            "action action";
        column-gap: 14px;
    }

    html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-image-wrapper {
        height: 96px;
    }

    html.ks-ansicht-an:not(.kvl-kacheln) .cms-listing-col:not(.kvl-col) .box-standard .product-price-info {
        margin-top: 10px;
        text-align: left;
    }
}

/* ---------- Kacheln ---------- */

html.ks-ansicht-an.kvl-kacheln .cms-element-product-listing .cms-listing-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

html.ks-ansicht-an.kvl-kacheln .cms-element-product-listing .cms-listing-row > .cms-listing-col:not(.kvl-col) {
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin: 0;
}

html.ks-ansicht-an.kvl-kacheln .cms-listing-col:not(.kvl-col) .product-box.box-standard {
    height: 100%;
}

html.ks-ansicht-an.kvl-kacheln .cms-listing-col:not(.kvl-col) .box-standard .product-image-wrapper {
    height: 180px;
}

html.ks-ansicht-an.kvl-kacheln .cms-listing-col:not(.kvl-col) .box-standard .product-image-wrapper img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Leere Liste („Keine Produkte gefunden") nimmt die ganze Breite */
html.ks-ansicht-an.kvl-kacheln .cms-element-product-listing .cms-listing-row > .cms-listing-col:only-child {
    grid-column: 1 / -1;
}

@container ksliste (max-width: 899.98px) {
    html.ks-ansicht-an.kvl-kacheln .cms-element-product-listing .cms-listing-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container ksliste (max-width: 599.98px) {
    html.ks-ansicht-an.kvl-kacheln .cms-element-product-listing .cms-listing-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    html.ks-ansicht-an.kvl-kacheln .cms-listing-col:not(.kvl-col) .box-standard .product-image-wrapper {
        height: 130px;
    }

    /* Zwei Kacheln je Reihe: keine Trennung mitten im Wort („VERFLÜSSIGUNGS|SATZ"), lieber Silbentrennung –
       wie die Produktkacheln der Startseite. Artikelnummer ganz statt „47-…": ohne das 40 px breite
       Barcode-Bild (::before) passt sie in die Zeile. */
    html.ks-ansicht-an.kvl-kacheln .cms-listing-col:not(.kvl-col) .box-standard .product-name {
        text-transform: none;
        word-break: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    html.ks-ansicht-an.kvl-kacheln .cms-listing-col:not(.kvl-col) .box-standard .product-number::before {
        display: none;
    }
}