.fav-hero { padding: 5rem 1rem 2rem; text-align: center; background: linear-gradient(180deg, var(--gray-900), var(--black)); }
.fav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .fav-grid { grid-template-columns: repeat(3, 1fr); } }
.fav-card { background: var(--gray-900); border: 1px solid rgba(212,175,55,0.2); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: border-color 0.3s, transform 0.3s; position: relative; }
.fav-card:hover { border-color: rgba(212,175,55,0.5); transform: translateY(-2px); }
.fav-card img { width: 100%; height: 12rem; object-fit: cover; }
@media (min-width: 768px) { .fav-card img { height: 14rem; } }
.fav-card .info { padding: 1rem; }
.fav-remove { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 5; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(0,0,0,0.7); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.fav-remove:hover { background: #EF4444; }
.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state svg { width: 3rem; height: 3rem; color: var(--gray-500); margin: 0 auto 1rem; }