/* -------------------------------------------------------------------------
   KH Gratis-Zugabe — Abzeichen und Positionszeile
   (Paket "kh-gratiszugabe", 03.11.2026, Vorgabe Fatih: "vernuenftig aussehend")

   Nur Marken-Tokens aus brand.css, keine neuen Farben, keine Bibliothek.
   Handy zuerst. Der Hinweis auf der Artikelseite benutzt die vorhandenen
   .kh-setoffer-Regeln aus kh-bundle.css und bekommt hier nur das kleine Bild.

   Memory "Klickhome ist hell": heller Grund, Marke als Akzent — kein Schwarz.
   ------------------------------------------------------------------------- */

/* === Abzeichen "Gratis" ================================================= */

.kh-gzbadge {
    display: inline-block;
    padding: 1px 7px 2px;
    border-radius: 999px;
    background: var(--brand-success, #02A067);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 2px;
    white-space: nowrap;
}

.kh-gznote {
    color: var(--color-text-soft, #6b7280);
    font-size: 12px;
    line-height: 1.3;
}

.kh-gzline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 2px;
}

/* === Warenkorbseite ===================================================== */

/* Die Zeile bleibt eine normale Positionszeile; nur ein ruhiger Grund und ein
   Rand am Anfang zeigen, dass sie zum Artikel darueber gehoert. */
.cart-items-body.kh-gzpos {
    border-radius: 10px;
    background: var(--color-surface-soft, #f7f9fb);
    box-shadow: inset 3px 0 0 0 var(--brand-success, #02A067);
}

.kh-gzqty {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.kh-gzqty__val {
    color: var(--color-text, #111827);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.3;
}

.kh-gzqty__hint {
    color: var(--color-text-soft, #6b7280);
    font-size: 11.5px;
    line-height: 1.25;
}

/* Der Gesamtpreis 0,00 EUR soll nicht wie ein Fehler aussehen.
   Die drei Selektoren sind kein Schmuck: checkout-premium.css setzt die Farbe
   der Warenkorbpreise mit !important, zuletzt unter
   `body:not(.is-checkout):has(.rt-basket) .rt-basket__items .price_overall`
   (Zeile 6332). Nur mit mindestens derselben Spezifitaet und !important
   gewinnt die Gratis-Zeile; belegt mit getComputedStyle in
   frontend-tests/gz-vorschau-beleg.mjs (Pruefung B6). */
.cart-items-body.kh-gzpos .price_overall,
.rt-basket__items .cart-items-body.kh-gzpos .price_overall,
body:not(.is-checkout):has(.rt-basket) .rt-basket__items .cart-items-body.kh-gzpos .price_overall {
    color: var(--brand-success, #02A067) !important;
    font-weight: 800;
}

/* === Warenkorb-Schublade (Cart-Drawer) ================================== */

.kh-ci--gratis {
    border-radius: 10px;
    background: var(--color-surface-soft, #f7f9fb);
    box-shadow: inset 3px 0 0 0 var(--brand-success, #02A067);
}

.kh-ci--gratis .kh-ci__unit,
.kh-ci--gratis .kh-ci__now {
    color: var(--brand-success, #02A067);
    font-weight: 800;
}

/* === Kasse: Bestelluebersicht =========================================== */

.rt-opc-drawer-item--gratis {
    border-radius: 10px;
    background: var(--color-surface-soft, #f7f9fb);
    box-shadow: inset 3px 0 0 0 var(--brand-success, #02A067);
}

.rt-opc-drawer-item--gratis .rt-opc-drawer-item__price {
    color: var(--brand-success, #02A067);
    font-weight: 800;
}

/* === Artikelseite: Hinweis unter dem Preis ============================== */

/* Grundoptik kommt aus .kh-setoffer (css/kh-bundle.css). Hier nur der
   Marken-Akzent am Symbol und das kleine Bild der Zugabe. */

.kh-gzhinweis .kh-setoffer__icon {
    background: rgba(2, 160, 103, .12);
    color: var(--brand-success, #02A067);
}

.kh-gzhinweis__bild {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line, rgba(17, 24, 39, .12));
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.kh-gzhinweis__link {
    color: var(--brand-primary, #017EC7);
    font-weight: 650;
    text-decoration: underline;
}

.kh-gzhinweis__link:hover,
.kh-gzhinweis__link:focus {
    color: var(--brand-primary-dark, #0166A3);
}

@media (min-width: 992px) {
    .kh-gzbadge {
        font-size: 11px;
    }

    .kh-gzhinweis__bild {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }
}