/* Wishlist page — shares the product-grid/card component and nav chrome
   from store-common.css; this file only holds what's unique here. */

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 12px; flex-wrap: wrap; }
.page-header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.page-sub { font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 1.5rem; }
.back-to-featured { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55); text-decoration: none; margin-bottom: 14px; transition: color 0.15s; }
.back-to-featured:hover { color: #fff; }

.wishlist-remove { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; margin-top: 8px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.55); background: none; border: 1.5px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.wishlist-remove:hover { color: #EF4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }

.empty-state { text-align: center; padding: 80px 20px; }
.empty-state i { font-size: 64px; color: rgba(255,255,255,0.08); margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: rgba(255,255,255,0.62); }

@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

body.light .page-header h1 { color: #111; }
body.light .page-sub { color: #666; }
body.light .back-to-featured { color: rgba(0,0,0,0.55); }
body.light .back-to-featured:hover { color: #111; }
body.light .wishlist-remove { color: #999; border-color: #DDD; }
body.light .wishlist-remove:hover { color: #EF4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }
body.light .empty-state i { color: rgba(0,0,0,0.08); }
body.light .empty-state h3 { color: #111; }
body.light .empty-state p { color: #888; }