refactor(styles): moved toast styling to styles from product

assets/css/styles.css

@@ -234,8 +234,9 @@ nav {
 .nav-links {
 	display: flex;
 	list-style: none;
-	gap: var(--space-1);
+	gap: var(--space-2);
 	align-items: center;
+	justify-content: center;
 	flex: 1;
 }
 
@@ -1109,7 +1110,7 @@ footer {
 	margin: 0 auto;
 	padding: 0 var(--space-6);
 	display: grid;
-	grid-template-columns: 2fr 1fr 1fr 1.4fr;
+	grid-template-columns: 2fr 1fr 1fr;
 	gap: var(--space-12);
 	margin-bottom: var(--space-8);
 }
@@ -1209,6 +1210,43 @@ footer {
 	color: var(--blue);
 }
 
+/* ── TOAST NOTIFICATION ── */
+.toast {
+	position: fixed;
+	bottom: var(--space-6);
+	right: var(--space-6);
+	background: var(--gray-800);
+	color: white;
+	padding: var(--space-3) var(--space-5);
+	border-radius: var(--radius-lg);
+	font-size: var(--text-md);
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
+	transform: translateY(6rem);
+	opacity: 0;
+	transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+	z-index: 9999;
+	pointer-events: none;
+}
+
+.toast.show {
+	transform: translateY(0);
+	opacity: 1;
+}
+.toast-icon {
+	font-size: var(--text-xl);
+}
+.toast-view {
+	color: var(--yellow);
+	cursor: pointer;
+	pointer-events: all;
+	margin-left: var(--space-2);
+	text-decoration: underline;
+}
+
 /* ── RESPONSIVE ── */
 @media (max-width: 68.75rem) {
 	.products-grid {