.tp-popup-root {
	--tp-accent: #059669;
	position: fixed; z-index: 99000; max-width: 340px; pointer-events: none;
}
.tp-pos-bottom-left { left: 20px; bottom: 20px; }
.tp-pos-bottom-right { right: 20px; bottom: 20px; }
.tp-pos-top-left { left: 20px; top: 20px; }
.tp-pos-top-right { right: 20px; top: 20px; }

.tp-toast {
	display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px;
	padding: 12px 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .16); pointer-events: auto;
	opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
	border-left: 4px solid var(--tp-accent);
}
.tp-toast.tp-toast-visible { opacity: 1; transform: translateY(0); }

.tp-toast-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f4f5f7; }
.tp-toast-body { min-width: 0; flex: 1; }
.tp-toast-line { font-size: 13px; color: #1f2430; }
.tp-toast-line strong { color: var(--tp-accent); }
.tp-toast-product {
	font-size: 13px; font-weight: 600; color: #1f2430; margin-top: 1px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-toast-time { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.tp-toast-close {
	background: none; border: none; color: #c7cad3; font-size: 18px; line-height: 1; cursor: pointer;
	padding: 2px 4px; flex-shrink: 0; transition: color .15s ease;
}
.tp-toast-close:hover { color: #6b7280; }

.tp-product-widgets {
	--tp-accent: #059669;
	display: flex; flex-direction: column; gap: 8px; margin: 14px 0;
}
.tp-inline-badge {
	display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
	padding: 8px 12px; border-radius: 8px; width: fit-content;
}
.tp-badge-sold { background: color-mix(in srgb, var(--tp-accent) 12%, transparent); color: var(--tp-accent); }
.tp-badge-lowstock { background: #fef2f2; color: #b91c1c; }
.tp-badge-viewers { background: #fffbeb; color: #92400e; }
.tp-badge-viewers::before { content: '●'; color: #f59e0b; font-size: 9px; }

@media (max-width: 480px) {
	.tp-popup-root { left: 12px !important; right: 12px !important; max-width: none; }
}