/* PAW Warenkorb Rabatt – Frontend. Farben/Maße kommen als CSS-Variablen aus dem Backend. */
.pawcd-box,.pawcd-teaser,.pawcd-note,.pawcd-banner{
    --pawcd-tint:color-mix(in srgb,var(--pawcd-primary,#e11d48) 9%,var(--pawcd-bg,#fff));
    --pawcd-tint-strong:color-mix(in srgb,var(--pawcd-primary,#e11d48) 22%,var(--pawcd-bg,#fff));
    box-sizing:border-box;font-size:var(--pawcd-font,14px);line-height:1.45;color:var(--pawcd-text,#1f2937);
    -webkit-font-smoothing:antialiased
}
.pawcd-box *,.pawcd-teaser *,.pawcd-note *,.pawcd-banner *{box-sizing:border-box}

/* ── Box (Warenkorb / Mini-Warenkorb) ── */
.pawcd-box{position:relative;margin:0 0 16px;padding:16px 18px;background:var(--pawcd-bg,#fff);border:1px solid var(--pawcd-border,#e5e7eb);border-radius:var(--pawcd-radius,14px);box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -18px rgba(15,23,42,.25)}
.pawcd-box.pawcd--soft{background:var(--pawcd-tint);border-color:var(--pawcd-tint-strong);box-shadow:none}
.pawcd-box.pawcd--bold{background:var(--pawcd-primary,#e11d48);border-color:transparent;color:#fff;box-shadow:0 12px 30px -14px var(--pawcd-primary,#e11d48)}
.pawcd-box.pawcd--minimal{padding:4px 0;background:transparent;border:0;box-shadow:none}
.pawcd-box.pawcd--dropdown{margin:0 0 12px;padding:12px 14px;box-shadow:none}

.pawcd-head{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.pawcd-icon{flex:0 0 auto;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pawcd-tint-strong);font-size:15px;line-height:1}
.pawcd--bold .pawcd-icon{background:rgba(255,255,255,.2)}
.pawcd-title{flex:1 1 auto;margin:0;font-size:.78em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.pawcd-saving{flex:0 0 auto;padding:3px 10px;border-radius:999px;background:var(--pawcd-success,#16a34a);color:#fff;font-size:.8em;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.pawcd--bold .pawcd-saving{background:#fff;color:var(--pawcd-primary,#e11d48)}

.pawcd-msg{margin:0;font-size:1.07em;font-weight:700;text-wrap:balance}
.pawcd-sub{margin:2px 0 0;font-size:.9em;font-weight:600;color:var(--pawcd-success,#16a34a)}
.pawcd--bold .pawcd-sub{color:#fff;opacity:.9}
.pawcd-box.is-max .pawcd-msg{color:var(--pawcd-success,#16a34a)}
.pawcd--bold.is-max .pawcd-msg{color:#fff}

/* Fortschrittsbalken */
.pawcd-bar{position:relative;height:var(--pawcd-bar,10px);margin:14px 6px 4px;border-radius:999px;background:var(--pawcd-track,#f1f5f9)}
.pawcd--bold .pawcd-bar{background:rgba(255,255,255,.25)}
.pawcd-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--pawcd-primary,#e11d48) 70%,#fff),var(--pawcd-primary,#e11d48));transition:width .7s cubic-bezier(.22,1,.36,1)}
.pawcd--bold .pawcd-fill{background:#fff}
.is-max .pawcd-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--pawcd-success,#16a34a) 70%,#fff),var(--pawcd-success,#16a34a))}
.pawcd-animate .pawcd-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);transform:translateX(-100%);animation:pawcd-shine 2.6s ease-in-out infinite}
@keyframes pawcd-shine{60%,100%{transform:translateX(100%)}}
.pawcd-marker{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--pawcd-bg,#fff);border:2px solid var(--pawcd-track,#cbd5e1);transition:border-color .3s,background .3s,transform .3s}
.pawcd-marker.is-reached{background:var(--pawcd-primary,#e11d48);border-color:var(--pawcd-bg,#fff);box-shadow:0 0 0 1px var(--pawcd-primary,#e11d48)}
.is-max .pawcd-marker.is-reached{background:var(--pawcd-success,#16a34a);box-shadow:0 0 0 1px var(--pawcd-success,#16a34a)}
.pawcd--bold .pawcd-marker{background:var(--pawcd-primary,#e11d48);border-color:rgba(255,255,255,.5)}
.pawcd--bold .pawcd-marker.is-reached{background:#fff;border-color:var(--pawcd-primary,#e11d48);box-shadow:none}
.pawcd-marker.is-current{transform:scale(1.2)}

/* Stufenliste */
.pawcd-tiers{margin:14px 0 0}
.pawcd-tiers-title{margin:0 0 6px;font-size:.78em;font-weight:700;opacity:.6}
.pawcd-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pawcd-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--pawcd-border,#e5e7eb);border-radius:999px;font-size:.84em;white-space:nowrap;background:var(--pawcd-bg,#fff)}
.pawcd-chip b{font-weight:700}
.pawcd-chip.is-reached{border-color:var(--pawcd-tint-strong);background:var(--pawcd-tint)}
.pawcd-chip.is-reached::before{content:"✓";font-weight:700;color:var(--pawcd-success,#16a34a)}
.pawcd-chip.is-current{border-color:var(--pawcd-primary,#e11d48);background:var(--pawcd-primary,#e11d48);color:#fff}
.pawcd-chip.is-current::before{color:#fff}
.pawcd--bold .pawcd-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.pawcd--bold .pawcd-chip.is-current,.pawcd--bold .pawcd-chip.is-current::before{background:#fff;color:var(--pawcd-primary,#e11d48)}
.pawcd--bold .pawcd-chip.is-reached::before{color:#fff}

/* ── Produkt-Teaser ── */
.pawcd-teaser{display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:10px 14px;border:1px dashed color-mix(in srgb,var(--pawcd-primary,#e11d48) 45%,transparent);border-radius:var(--pawcd-radius,14px);background:var(--pawcd-tint)}
.pawcd-teaser .pawcd-icon{width:26px;height:26px;font-size:13px}
.pawcd-teaser p{margin:0;font-weight:600}
.pawcd-teaser small{display:block;margin-top:2px;font-size:.88em;font-weight:600;color:var(--pawcd-primary,#e11d48)}

/* ── Checkout-Hinweis ── */
.pawcd-note{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:12px 16px;border-radius:var(--pawcd-radius,14px);background:color-mix(in srgb,var(--pawcd-success,#16a34a) 10%,#fff);color:color-mix(in srgb,var(--pawcd-success,#16a34a) 75%,#000);font-weight:600}
.pawcd-note::before{content:"✓";display:inline-grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--pawcd-success,#16a34a);color:#fff;font-size:13px}

/* ── Aktions-Banner ── */
.pawcd-banner{position:relative;z-index:1030;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;width:100%;padding:9px 48px;background:var(--pawcd-banner-bg,#111827);color:var(--pawcd-banner-color,#fff);text-align:center;font-weight:600}
.pawcd-banner.is-sticky{position:sticky;top:0}
.pawcd-banner .pawcd-count{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:.9em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pawcd-banner .pawcd-close{position:absolute;top:50%;right:10px;width:30px;height:30px;margin-top:-15px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.75}
.pawcd-banner .pawcd-close:hover,.pawcd-banner .pawcd-close:focus-visible{opacity:1;background:rgba(255,255,255,.14)}

.pawcd-enter{animation:pawcd-in .35s cubic-bezier(.22,1,.36,1) both}
@keyframes pawcd-in{from{opacity:0;transform:translateY(4px)}}

@media (prefers-reduced-motion:reduce){
    .pawcd-fill,.pawcd-marker{transition:none}
    .pawcd-animate .pawcd-fill::after,.pawcd-enter{animation:none}
}
@media (max-width:575.98px){
    .pawcd-box{padding:14px}
    .pawcd-banner{padding:8px 42px;font-size:.92em}
}
