/*
 * KaelteRechnerSW6 – Zubehör zum Verdichter (Konzept VERDICHTER-UX §7.5).
 * Nur eingebunden bei verdichterZubehoerAktiv = true:
 *   - Produktseite und Verdichter-Listen: base.html.twig, Block kaelte_verdichter_zubehoer_assets
 *     (nur mit Page-Extension "kaelteZubehoer" bzw. Listing-Extension "kaelteVerdichterZubehoer"),
 *   - Offcanvas-Warenkorb: als <link> im Fragment (component/kaelte-verdichter-zubehoer/offcanvas).
 *
 * Geltungsbereich – nie global, alles mit Präfix kvz-:
 *   .kvzb …          Abschnitt „Passendes Zubehör“ (Standard-PDP .kvzb--std, PDP-Design .kvzb--kpdp)
 *   .kvzb-zeile …    Hinweis in der Verdichter-Listenzeile (.kvl-row)
 *   .kvzb-oc …       Block „Für diesen Verdichter mitbestellen“ im Offcanvas
 *
 * Design-Tokens wie Verdichter-Liste/Filterpanel (WCAG 2.1 AA, dort gerechnet): Text #2E2E2E,
 * Zweittext #454444, gedämpft #6B7480 (nur auf Weiß), Primär #156F94 (5,6:1), Lager #1C6B35,
 * Hinweis brennbar #4D3900 auf #FFF1C2 (9,8:1). Karten weiß mit Rand #E0E4E8, ruhig, ohne Schatten.
 * Mobil (375 px): eine Spalte, keine Überbreite (min-width: 0, Umbruch langer Namen).
 */

.kvzb,
.kvzb-zeile,
.kvzb-oc {
    --kvz-primary: #156f94;
    --kvz-primary-hover: #0e4f6b;
    --kvz-card-border: #e0e4e8;
    --kvz-text: #2e2e2e;
    --kvz-text-2: #454444;
    --kvz-muted: #6b7480;
    --kvz-ok: #1c6b35;
    --kvz-warn-bg: #fff1c2;
    --kvz-warn-fg: #4d3900;
    --kvz-soft-bg: #eef1f4;
    --kvz-focus: 0 0 0 2px #fff, 0 0 0 4px #156f94;
}

/* ================= Produktseite ================= */

.kvzb-wrap {
    margin: 0 0 2rem;
}

.kvzb {
    scroll-margin-top: 120px; /* Sprung aus der Listenzeile: Platz für den festen Kopf */
    color: var(--kvz-text);
}

.kvzb.kvzb--std {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--kvz-card-border);
    border-radius: 8px;
    background: #fff;
}

.kvzb.kvzb--nur-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.kvzb.kvzb--std.kvzb--nur-link {
    padding: 1rem 1.25rem;
}

.kvzb .kvzb__head {
    margin: 0 0 1rem;
}

.kvzb .kvzb__h {
    margin: 0 0 4px;
    color: var(--kvz-text);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

.kvzb .kvzb__sub {
    margin: 0;
    color: var(--kvz-text-2);
    font-size: .875rem;
    line-height: 1.45;
}

/* Hinweis bei kritischem Kältemittel bzw. fehlender Angabe: Text trägt die Bedeutung, Farbe nur zusätzlich */
.kvzb .kvzb-note {
    margin: 0 0 1.25rem;
    padding: 10px 14px;
    border-left: 4px solid var(--kvz-warn-fg);
    border-radius: 4px;
    background: var(--kvz-warn-bg);
    color: var(--kvz-warn-fg);
    font-size: .875rem;
    line-height: 1.5;
}

.kvzb .kvzb-note--unklar {
    border-left-color: var(--kvz-muted);
    background: var(--kvz-soft-bg);
    color: var(--kvz-text);
}

.kvzb .kvzb-note__p {
    margin: 0;
}

.kvzb .kvzb-note__p + .kvzb-note__p {
    margin-top: 4px;
}

.kvzb .kvzb-group {
    margin: 0 0 1.25rem;
}

.kvzb .kvzb-group__h {
    margin: 0 0 8px;
    color: var(--kvz-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.kvzb .kvzb-group__note {
    margin: -4px 0 8px;
    color: var(--kvz-text-2);
    font-size: .8125rem;
    line-height: 1.45;
}

.kvzb .kvzb-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kvzb .kvzb-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
        "img body"
        "img buy";
    gap: 8px 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--kvz-card-border);
    border-radius: 8px;
    background: #fff;
}

.kvzb .kvzb-item__img {
    grid-area: img;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
}

.kvzb .kvzb-item__img img,
.kvzb .kvzb-item__imgtag {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kvzb .kvzb-item__ph {
    display: block;
    width: 48px;
    height: 48px;
    color: var(--kvz-card-border);
}

.kvzb .kvzb-item__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kvzb .kvzb-item__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kvz-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.kvzb .kvzb-item__name:hover {
    color: var(--kvz-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kvzb .kvzb-item__nr {
    color: var(--kvz-muted);
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.kvzb-stock {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin: 2px 0 0;
    color: var(--kvz-text-2);
    font-size: .75rem;
    line-height: 1.35;
}

.kvzb-stock .kvzb-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: .3em;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.kvzb-stock.kvzb-stock--ok {
    color: var(--kvz-ok);
    font-weight: 600;
}

.kvzb-stock.kvzb-stock--ok .kvzb-dot {
    background: currentColor;
}

.kvzb-stock.kvzb-stock--muted {
    color: var(--kvz-muted);
}

.kvzb .kvzb-item__buy {
    grid-area: buy;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.kvzb .kvzb-item__price {
    color: var(--kvz-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.kvzb .kvzb-buy {
    margin: 0;
}

.kvzb .kvzb-buy .btn.btn-buy.kvzb-cart {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--kvz-primary);
    --bs-btn-border-color: var(--kvz-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kvz-primary-hover);
    --bs-btn-hover-border-color: var(--kvz-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kvz-primary-hover);
    --bs-btn-active-border-color: var(--kvz-primary-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 40px;
    height: auto;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--kvz-primary);
    border-radius: 5px;
    background-color: var(--kvz-primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    box-shadow: none;
}

.kvzb .kvzb-buy .btn.btn-buy.kvzb-cart:hover,
.kvzb .kvzb-buy .btn.btn-buy.kvzb-cart:active {
    border-color: var(--kvz-primary-hover);
    background-color: var(--kvz-primary-hover);
    color: #fff;
}

.kvzb .kvzb-buy .btn.btn-buy.kvzb-cart:focus-visible,
.kvzb .kvzb-item__name:focus-visible,
.kvzb .kvzb-brand:focus-visible,
.kvzb-zeile:focus-visible,
.kvzb-oc .kvzb-oc__name:focus-visible,
.kvzb-oc .kvzb-oc__add:focus-visible {
    outline: 2px solid transparent;
    border-radius: 3px;
    box-shadow: var(--kvz-focus);
}

.kvzb .kvzb__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.kvzb .kvzb-brand {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--kvz-primary);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.kvzb .kvzb-brand:hover {
    color: var(--kvz-primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kvzb .kvzb-tax {
    margin: 0;
    color: var(--kvz-muted);
    font-size: .75rem;
    line-height: 1.4;
}

.kvzb .kvzb-tax .kvzb-tax__link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: underline;
}

/* PDP-Design des Plugins: Abschnitt wie .kpdp-section, Karten bleiben gleich */
.kvzb.kvzb--kpdp .kvzb__h {
    font-size: 22px;
}

/* Im PDP-Design ist der Kopf eine Flex-Zeile (kpdp-section__head); der lange Untertitel drückte die
   Überschrift mobil in eine schmale Spalte. Untertitel deshalb immer in eigene Zeile. */
.kvzb.kvzb--kpdp .kvzb__head {
    flex-wrap: wrap;
}

.kvzb.kvzb--kpdp .kvzb__sub {
    flex: 1 1 100%;
}

@media (max-width: 575.98px) {
    .kvzb.kvzb--std {
        padding: 1rem;
    }

    .kvzb .kvzb__h {
        font-size: 1.25rem;
    }

    .kvzb .kvzb-buy .btn.btn-buy.kvzb-cart,
    .kvzb .kvzb-brand {
        min-height: 44px;
    }
}

/* ================= Listenzeile ================= */

.kvl-row .kvzb-zeile {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    margin-top: 6px;
    padding: 2px 0;
    color: var(--kvz-primary);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.kvl-row .kvzb-zeile .kvzb-zeile__label {
    flex: none;
    color: var(--kvz-text-2);
    font-weight: 500;
}

.kvl-row .kvzb-zeile .kvzb-zeile__teile {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kvl-row .kvzb-zeile .kvzb-zeile__arr {
    flex: none;
}

.kvl-row .kvzb-zeile:hover .kvzb-zeile__teile {
    color: var(--kvz-primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@container kvl (max-width: 575.98px) {
    .kvl-row .kvzb-zeile {
        margin-top: 4px;
        font-size: .75rem;
    }
}

/* ================= Offcanvas-Warenkorb ================= */

.kvzb-oc {
    margin: 1rem 0 0;
    padding: 12px;
    border: 1px solid var(--kvz-card-border);
    border-radius: 8px;
    background: #fff;
    color: var(--kvz-text);
}

.kvzb-oc .kvzb-oc__h {
    margin: 0;
    color: var(--kvz-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.kvzb-oc .kvzb-oc__fuer {
    margin: 2px 0 8px;
    color: var(--kvz-text-2);
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.kvzb-oc .kvzb-oc__note {
    margin: 0 0 8px;
    padding: 6px 10px;
    border-left: 3px solid var(--kvz-warn-fg);
    border-radius: 3px;
    background: var(--kvz-warn-bg);
    color: var(--kvz-warn-fg);
    font-size: .75rem;
    line-height: 1.4;
}

.kvzb-oc .kvzb-oc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kvzb-oc .kvzb-oc__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--kvz-card-border);
}

.kvzb-oc .kvzb-oc__item:first-child {
    border-top: 0;
}

.kvzb-oc .kvzb-oc__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
}

.kvzb-oc .kvzb-oc__img img,
.kvzb-oc .kvzb-oc__imgtag {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kvzb-oc .kvzb-oc__ph {
    display: block;
    width: 36px;
    height: 36px;
    color: var(--kvz-card-border);
}

.kvzb-oc .kvzb-oc__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kvzb-oc .kvzb-oc__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kvz-text);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.kvzb-oc .kvzb-oc__price {
    color: var(--kvz-text);
    font-size: .8125rem;
    font-weight: 700;
}

.kvzb-oc .kvzb-oc__form {
    margin: 0;
}

.kvzb-oc .kvzb-oc__add {
    min-height: 36px;
    padding: 0 10px;
    font-size: .8125rem;
    white-space: nowrap;
}

.kvzb-oc .kvzb-oc__tax {
    margin: 6px 0 0;
    color: var(--kvz-muted);
    font-size: .6875rem;
    line-height: 1.4;
}

@media (max-width: 575.98px) {
    .kvzb-oc .kvzb-oc__add {
        min-height: 44px;
    }
}