/* ============================================================================ BESTE KUMPELS - seitlicher Warenkorb (Off-Canvas) ---------------------------------------------------------------------------- Markup: basket/cart_dropdown_label.tpl, Verhalten: js/custom.js. Farb-Tokens: bk-base.css. custom.js haengt .bk-cart direkt an . Deshalb darf hier nichts von einem Elternelement abhaengen - alle Regeln stehen fuer sich. ========================================================================== */ /* --------------------------------------------------------------------------- Auslöser im Header ------------------------------------------------------------------------- */ .cart-icon-dropdown .bk-cart-trigger { cursor: pointer; } /* Das Panel liegt vor dem Verschieben noch im

des Headers. Bis custom.js es an gehaengt hat, darf es nicht aufblitzen. */ .cart-icon-dropdown .bk-cart { display: none; } /* --------------------------------------------------------------------------- Panel ------------------------------------------------------------------------- */ body > .bk-cart { position: fixed; inset: 0; z-index: 1090; pointer-events: none; } body > .bk-cart[data-open="true"] { pointer-events: auto; } .bk-cart-ov { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); opacity: 0; transition: opacity .4s var(--bk-ease); } .bk-cart[data-open="true"] .bk-cart-ov { opacity: 1; } .bk-cart-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: #fff; display: flex; flex-direction: column; transform: translateX(101%); transition: transform .46s var(--bk-ease); box-shadow: -8px 0 40px rgba(0, 0, 0, .18); } .bk-cart[data-open="true"] .bk-cart-panel { transform: translateX(0); } @media (max-width: 480px) { /* Auf dem Telefon von unten - der Daumen kommt dort besser hin. */ .bk-cart-panel { top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; transform: translateY(101%); box-shadow: 0 -8px 40px rgba(0, 0, 0, .18); } .bk-cart[data-open="true"] .bk-cart-panel { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .bk-cart-ov, .bk-cart-panel { transition-duration: .01ms !important; } } /* --------------------------------------------------------------------------- Kopfzeile ------------------------------------------------------------------------- */ .bk-cart-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--bk-line); flex: 0 0 auto; } .bk-cart-hd h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--bk-teal); text-transform: none; letter-spacing: 0; line-height: 1.3; } .bk-cart-hd h2 span { display: block; font-size: 12.5px; font-weight: 600; color: var(--bk-muted); margin-top: 1px; } .bk-cart-x { background: none; border: 0; padding: 4px; color: var(--bk-muted); cursor: pointer; flex: 0 0 auto; line-height: 0; transition: color .2s var(--bk-ease); } .bk-cart-x:hover { color: var(--bk-ink); } /* --------------------------------------------------------------------------- Positionen ------------------------------------------------------------------------- */ .bk-cart-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 22px; } .bk-cart-it { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--bk-line-s); transition: opacity .25s var(--bk-ease), transform .25s var(--bk-ease); } .bk-cart-it:last-child { border-bottom: 0; } /* wird von custom.js beim Loeschen gesetzt, bevor neu gerendert wird */ .bk-cart-it[data-removing="true"] { opacity: 0; transform: translateX(14px); } .bk-cart-ph { width: 64px; height: 64px; border-radius: var(--bk-box); background: var(--bk-field); overflow: hidden; } .bk-cart-ph img, .bk-cart-ph picture, .bk-cart-ph a { display: block; width: 100%; height: 100%; } .bk-cart-ph img { object-fit: cover; background: #fff; } .bk-cart-it-main { min-width: 0; } .bk-cart-it-n { font-size: 14.5px; font-weight: 700; color: var(--bk-ink); line-height: 1.35; } .bk-cart-it-n a { color: inherit; text-decoration: none; } .bk-cart-it-n a:hover { color: var(--bk-teal); text-decoration: none; } .bk-cart-it-s { font-size: 12.5px; color: var(--bk-muted); margin-top: 3px; } .bk-cart-it-p { font-size: 15px; font-weight: 800; color: var(--bk-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .bk-cart-rm { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 0; background: none; border: 0; font-size: 12.5px; color: var(--bk-faint); cursor: pointer; transition: color .18s var(--bk-ease); } .bk-cart-rm:hover { color: var(--bk-coral-h); text-decoration: underline; } .bk-cart-rm:focus-visible { outline: 2px solid var(--bk-teal); outline-offset: 2px; } /* Versand, Zuschlaege, Kupons */ .bk-cart-extra { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--bk-line-s); font-size: 13.5px; color: var(--bk-text); } .bk-cart-extra span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .bk-cart-empty { padding: 56px 0; text-align: center; color: var(--bk-faint); } .bk-cart-empty p { margin: 14px 0 0; font-size: 14.5px; color: var(--bk-muted); } /* --------------------------------------------------------------------------- Fusszeile ------------------------------------------------------------------------- */ .bk-cart-ft { flex: 0 0 auto; padding: 16px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bk-line); background: #fff; } .bk-cart-ship { display: flex; gap: 9px; margin: 0 0 14px; padding: 11px 14px; border-radius: var(--bk-box); background: var(--bk-field); font-size: 12.5px; line-height: 1.5; color: var(--bk-text); } .bk-cart-ship svg { flex: 0 0 auto; margin-top: 2px; color: var(--bk-muted); } .bk-cart-ship a { color: var(--bk-teal); } .bk-cart-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 15px; font-weight: 800; color: var(--bk-ink); margin-bottom: 4px; } .bk-cart-sum b { font-size: 24px; font-weight: 900; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .bk-cart-note { margin: 0 0 14px; font-size: 11.5px; line-height: 1.5; color: var(--bk-muted); } .bk-cart-note:last-of-type { margin-bottom: 14px; } .bk-cart-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 12px 20px; border-radius: var(--bk-radius); background: var(--bk-coral); color: #fff; font-size: 16px; font-weight: 800; text-align: center; text-decoration: none; box-shadow: 0 3px 12px -3px rgba(232, 135, 124, .55); transition: background .25s var(--bk-ease), transform .12s var(--bk-ease); } .bk-cart-cta:hover, .bk-cart-cta:focus { background: var(--bk-coral-h); color: #fff; text-decoration: none; } .bk-cart-cta:active { transform: scale(.99); } .bk-cart-alt { display: block; margin-top: 11px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--bk-teal); text-decoration: underline; text-underline-offset: 3px; } .bk-cart-alt:hover { color: var(--bk-teal-h); } /* --------------------------------------------------------------------------- Ladezustand waehrend eines Hintergrund-POST ------------------------------------------------------------------------- */ .bk-cart[data-busy="true"] .bk-cart-body, .bk-cart[data-busy="true"] .bk-cart-ft { opacity: .5; pointer-events: none; transition: opacity .2s ease; } /* Wenn der Warenkorb offen ist, soll die Seite dahinter nicht mitscrollen. */ body.bk-cart-open { overflow: hidden; }