.elco-cart-toast-host { position: fixed; inset-block-start: calc(env(safe-area-inset-top, 0px) + 1rem); inset-inline-end: calc(env(safe-area-inset-right, 0px) + 1rem); z-index: 1085; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; } .elco-cart-toast { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.9rem 0.95rem 0.95rem; border-radius: 16px; border: 1px solid rgba(124, 58, 237, 0.14); background: #fff; color: #1f2937; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14); transform: translateY(-12px); opacity: 0; transition: transform 0.24s ease, opacity 0.24s ease; pointer-events: auto; } .elco-cart-toast.is-visible { transform: translateY(0); opacity: 1; } .elco-cart-toast.is-hiding { transform: translateY(-8px); opacity: 0; } .elco-cart-toast__close { position: absolute; inset-block-start: 0.55rem; inset-inline-end: 0.55rem; width: 1.75rem; height: 1.75rem; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(124, 58, 237, 0.08); color: #6b7280; cursor: pointer; padding: 0; } .elco-cart-toast__close:hover, .elco-cart-toast__close:focus-visible { background: rgba(124, 58, 237, 0.14); color: #374151; outline: none; } .elco-cart-toast__head { display: flex; align-items: center; gap: 0.55rem; padding-inline-end: 2rem; } .elco-cart-toast__check { width: 1.65rem; height: 1.65rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #10b981; color: #fff; flex-shrink: 0; font-size: 0.95rem; } .elco-cart-toast__title { font-size: 0.92rem; font-weight: 800; color: #111827; } .elco-cart-toast__body { display: flex; align-items: center; gap: 0.75rem; } .elco-cart-toast__thumb { width: 3.5rem; height: 3.5rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(124, 58, 237, 0.12); background: #f8fafc; flex-shrink: 0; } .elco-cart-toast__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .elco-cart-toast__thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: #7c3aed; font-size: 1.25rem; } .elco-cart-toast__meta { min-width: 0; flex: 1 1 auto; } .elco-cart-toast__name { font-size: 0.84rem; font-weight: 700; color: #1f2937; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .elco-cart-toast__qty { margin-top: 0.2rem; font-size: 0.76rem; color: #6b7280; } .elco-cart-toast__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .elco-cart-toast__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: 0.45rem 0.65rem; border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .elco-cart-toast__btn--primary { border: none; background: #7c3aed; color: #fff; } .elco-cart-toast__btn--primary:hover, .elco-cart-toast__btn--primary:focus-visible { background: #6d28d9; color: #fff; } .elco-cart-toast__btn--ghost { border: 1px solid rgba(124, 58, 237, 0.22); background: #fff; color: #5b21b6; } .elco-cart-toast__btn--ghost:hover, .elco-cart-toast__btn--ghost:focus-visible { background: rgba(124, 58, 237, 0.06); color: #4c1d95; } @media (max-width: 575.98px) { .elco-cart-toast-host { inset-block-start: auto; inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 5.5rem); inset-inline: 1rem; width: auto; } .elco-cart-toast { transform: translateY(16px); } .elco-cart-toast.is-visible { transform: translateY(0); } .elco-cart-toast.is-hiding { transform: translateY(12px); } } .kolbeh-header .header-cart-icon.is-cart-bump, .kolbeh-header .header-mobile-cart__icon.is-cart-bump, .kolbeh-header .kolbeh-header__cart-link.is-cart-bump { animation: elcoCartBump 0.45s ease; } @keyframes elcoCartBump { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.18); } 65% { transform: scale(0.94); } }