/* =========================================================================
   F05 Upsell zum Gratisversand (inc/upsell.php) – Mockup claude.ai/artifact/EjMz2wD8Hh36NU2vWy1PB2
   Warenkorb: Desktop 3er-Raster, Handy Wisch-Reihe. Mini-Warenkorb: eine kompakte Karte.
   ========================================================================= */
.wcbr-up {
    --up-bx: #8e153c; --up-bx-d: #6d0f2e; --up-creme: #f7f0e9; --up-panel: #fdfaf7;
    --up-ink: #3a2b2b; --up-grau: #6b5e58; --up-rand: #e6dbd2; --up-rand2: #ece1d8; --up-gruen: #4da209; --up-ok: #2f6b06;
    color: var(--up-ink); font-variant-numeric: lining-nums; box-sizing: border-box;
}
.wcbr-up *, .wcbr-up *::before, .wcbr-up *::after { box-sizing: border-box; }

/* ---------- Warenkorbseite ---------- */
.wcbr-up--seite { margin: 0 0 16px; background: var(--up-panel); border: 1px solid var(--up-rand); border-radius: 16px; padding: 16px 18px 18px; }
.wcbr-up__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; flex-wrap: wrap; }
.wcbr-up__kopf h2 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 32px !important; line-height: 1 !important; margin: 0 !important; color: var(--up-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
.wcbr-up__kopf span { font-size: 13px; color: var(--up-grau); }
.wcbr-up--seite .wcbr-up__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.wcbr-up__karte {
    position: relative; background: #fff; border: 1px solid var(--up-rand); border-radius: 14px; padding: 12px; min-width: 0;
    display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; gap: 6px 12px; align-content: start;
}
.wcbr-up__bild { grid-row: 1 / 3; display: block; }
.wcbr-up__bild img { width: 76px !important; height: 76px !important; object-fit: contain; border: 1px solid var(--up-rand2); border-radius: 10px; background: #fff; display: block; margin: 0 !important; }
.wcbr-up__chip { justify-self: start; align-self: start; font-size: 11.5px; font-weight: 700; color: var(--up-bx-d); background: var(--up-creme); border: 1px solid var(--up-rand); border-radius: 999px; padding: 2px 9px; line-height: 1.5; }
.wcbr-up__name { font-size: 13.5px; font-weight: 700; color: var(--up-bx) !important; line-height: 1.3; text-decoration: none !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wcbr-up__name:hover { color: var(--up-bx-d) !important; text-decoration: underline !important; }
.wcbr-up__preis { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.wcbr-up__preis b { font-size: 18px; font-weight: 800; }
.wcbr-up__preis span { font-size: 12px; color: var(--up-grau); }
.wcbr-up__akt { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.wcbr-up__add {
    height: 44px; border: 0 !important; border-radius: 999px !important; background: var(--up-gruen) !important; color: #fff !important;
    font: 700 14px/1 inherit; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 0 16px !important; width: 100%;
    transition: background .15s ease, transform .1s ease;
}
.wcbr-up__add:hover { background: #3f8607 !important; }
.wcbr-up__add:active { transform: scale(.98); }
.wcbr-up__add:focus-visible { outline: 3px solid var(--up-bx); outline-offset: 2px; }
.wcbr-up__ok { font-size: 12px; color: var(--up-ok); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.wcbr-up__det { font-size: 12px; color: var(--up-bx) !important; font-weight: 600; }

/* Zustände nach „Hinzufügen“ */
.wcbr-up__karte.is-laedt .wcbr-up__add { opacity: .65; cursor: progress; }
.wcbr-up__karte.is-drin { border-color: var(--up-gruen); }
.wcbr-up__karte.is-drin .wcbr-up__add { background: #fff !important; color: var(--up-ok) !important; border: 1px solid var(--up-gruen) !important; pointer-events: none; }
.wcbr-up__karte.is-drin .wcbr-up__add svg { display: none; }
.wcbr-up__karte.is-drin .wcbr-up__add span::after { content: '✓ Im Warenkorb'; }
.wcbr-up__karte.is-drin .wcbr-up__add span { font-size: 0; }
.wcbr-up__karte.is-drin .wcbr-up__add span::after { font-size: 14px; }

/* ---------- Mini-Warenkorb (Astra-Schublade) ----------
   Gleiche Maße wie die Positionen (warenkorb.css: Liste 16 px Rand, Karte 12 px, Bild 56 px, Spalte 12 px),
   aber Creme statt Weiß – Vorschlag und eigener Warenkorb sollen sich klar unterscheiden. */
.wcbr-up--mini { margin: 4px 16px 0; }
.wcbr-up__k { font-size: 11.5px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--up-grau, #6b5e58); margin: 0 0 6px !important; }
.wcbr-up__k--korb { margin: 16px 16px 6px !important; }
.wcbr-up--mini .wcbr-up__karte {
    grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 4px 12px; padding: 12px 12px 12px 10px;   /* Bild bündig mit den Positionen (gemessen 22.10.) */ align-items: center;
    background: var(--up-creme); border: 1px dashed #d9c7b8; border-radius: 12px;
}
.wcbr-up--mini .wcbr-up__bild { grid-row: 1 / 4; align-self: start; }
.wcbr-up--mini .wcbr-up__bild img { width: 56px !important; height: 56px !important; border-radius: 8px; }
.wcbr-up--mini .wcbr-up__chip { font-size: 10.5px; padding: 1px 8px; grid-column: 2; background: #fff; }
.wcbr-up--mini .wcbr-up__name { grid-column: 2; font-size: 13px; font-weight: 600; -webkit-line-clamp: 2; }
.wcbr-up--mini .wcbr-up__preis { grid-column: 2; justify-content: flex-start; gap: 0 6px; margin: 0; }
.wcbr-up--mini .wcbr-up__preis b { font-size: 14px; }
.wcbr-up--mini .wcbr-up__akt { grid-column: 3; grid-row: 1 / 4; }
.wcbr-up--mini .wcbr-up__add { width: 40px; height: 40px; padding: 0 !important; gap: 0; } /* leeres Text-span + gap schob das Plus aus der Mitte */
.wcbr-up--mini .wcbr-up__karte.is-drin { border-style: solid; }
.wcbr-up--mini .wcbr-up__karte.is-drin .wcbr-up__add span::after { content: '✓'; font-size: 18px; }

/* ---------- Handy (< 768 px): Zähler + Vorschläge als EINE Karte, Vorschläge als schmale Zeilen ----------
   Mockup „Handy kompakt“ (claude.ai/artifact/EjMz2wD8Hh36NU2vWy1PB2, Freigabe Marcel 22.10.2026). Begründung, Name und
   Preis je eine Zeile (zu Langes endet mit „…“) – jede Zeile gleich hoch, egal welcher Text. Seite höchstens 2 Vorschläge
   (inc/upsell.php, wp_is_mobile), Mini-Warenkorb 1. Desktop bleibt wie oben. */
@media (max-width: 767px) {
    /* Zähler oben, Vorschläge direkt angesetzt */
    .wcbr-wk .wcbr-gv.wcbr-gv:has(+ .wcbr-up) { border-bottom: 0 !important; border-radius: 14px 14px 0 0 !important; margin-bottom: 0 !important; min-height: 0; }
    .wcbr-up--seite, .wcbr-up--mini {
        margin: 0 0 16px; padding: 0; background: var(--up-creme); border: 1px solid var(--up-rand); border-top: 1px dashed #d9c7b8;
        border-radius: 0 0 14px 14px; overflow: hidden;
    }
    .wcbr-up--mini { margin: 0 16px 12px; }
    .wcbr-up__kopf { margin: 0; padding: 10px 14px 2px; display: block; }
    .wcbr-up__kopf h2, .wcbr-up__k {
        font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .05em !important;
        text-transform: uppercase !important; color: var(--up-grau) !important; line-height: 1.4 !important; margin: 0 !important;
    }
    .wcbr-up__k { padding: 10px 14px 2px; }
    .wcbr-up__kopf span { display: none; }
    .wcbr-up--seite .wcbr-up__liste, .wcbr-up--mini .wcbr-up__liste { display: block; }
    .wcbr-up--seite .wcbr-up__karte, .wcbr-up--mini .wcbr-up__karte {
        display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 2px 10px; align-items: center;
        padding: 8px 12px 8px 14px; background: transparent; border: 0; border-radius: 0;
    }
    .wcbr-up--mini .wcbr-up__karte { padding-left: 10px; }   /* Bild bündig mit den Bildern der Positionen darunter (gemessen 22.10.) */
    .wcbr-up__karte + .wcbr-up__karte { border-top: 1px solid var(--up-rand2) !important; }
    .wcbr-up__karte:last-child { padding-bottom: 12px !important; }
    .wcbr-up--seite .wcbr-up__bild, .wcbr-up--mini .wcbr-up__bild { grid-column: 1; grid-row: 1 / 4; align-self: center; }
    .wcbr-up--seite .wcbr-up__bild img, .wcbr-up--mini .wcbr-up__bild img { width: 48px !important; height: 48px !important; aspect-ratio: auto; border-radius: 8px; }
    .wcbr-up--seite .wcbr-up__chip, .wcbr-up--mini .wcbr-up__chip {
        grid-column: 2; justify-self: stretch; min-width: 0; background: none; border: 0; padding: 0; border-radius: 0;
        font-size: 11px; font-weight: 700; line-height: 1.35; color: var(--up-bx-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wcbr-up--seite .wcbr-up__name, .wcbr-up--mini .wcbr-up__name {
        grid-column: 2; display: block; font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        -webkit-line-clamp: unset;
    }
    .wcbr-up--seite .wcbr-up__preis, .wcbr-up--mini .wcbr-up__preis {
        grid-column: 2; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; gap: 6px; margin: 0; min-width: 0; overflow: hidden;
    }
    .wcbr-up--seite .wcbr-up__preis b, .wcbr-up--mini .wcbr-up__preis b { font-size: 13.5px; font-weight: 700; flex-shrink: 0; }
    .wcbr-up--seite .wcbr-up__preis span, .wcbr-up--mini .wcbr-up__preis span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wcbr-up--seite .wcbr-up__akt, .wcbr-up--mini .wcbr-up__akt { grid-column: 3; grid-row: 1 / 4; }
    .wcbr-up--seite .wcbr-up__ok, .wcbr-up--seite .wcbr-up__det { display: none; }
    .wcbr-up--seite .wcbr-up__add, .wcbr-up--mini .wcbr-up__add { width: 40px; height: 40px; padding: 0 !important; gap: 0; }
    /* Text ganz weg: Astras letter-spacing (1px) ließ den unsichtbaren Text 10 px breit und schob das Plus aus der Mitte */
    .wcbr-up--seite .wcbr-up__add span { display: none; }
    .wcbr-up--seite .wcbr-up__karte.is-drin .wcbr-up__add::after { content: '✓'; font-size: 18px; letter-spacing: 0; }
    .wcbr-up__karte.is-drin { border-color: transparent; }
    /* Mini-Warenkorb: Überschrift „Ihr Warenkorb“ entfällt, die Karte trennt schon genug */
    .wcbr-up__k--korb { display: none; }
}

@media (prefers-reduced-motion: reduce) { .wcbr-up__add { transition: none; } }