/* --- Utility Classes Patch --- */
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-4 { margin-top: 1rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.w-full { width: 100%; }
.block  { display: block; }
.hidden { display: none !important; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl{ font-size: 1.5rem; line-height: 2rem; }
.font-semibold { font-weight: 600; }
.font-bold      { font-weight: 700; }

.text-gray-400  { color: #9CA3AF; }
.text-gray-500  { color: #6B7280; }
.text-gray-600  { color: #4B5563; }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-red-500   { color: #ef4444; }

.transition { transition: all 0.2s ease-in-out; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.creator-card:hover { background: #f5f3ff; cursor: pointer; }
.creator-card { transition: background-color 0.2s ease; }

.input { 
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid #ccc; border-radius: 0.5rem;
  background: #fff; font: inherit; line-height: 1.5;
  transition: border-color 0.2s;
}
.input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168,85,247,0.3);
  outline: none;
}
textarea.input { resize: vertical; }

.btn--primary:hover {
  background: #6931d1;
  box-shadow: 0 0 8px rgba(123,58,237, 0.4);
}
/* Layout container utility */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
/* --- wishlist-modal visibility ------------------------------------ */
.modal-overlay          { display:none;  /* default = hidden */ }
.modal-overlay.is-open  { display:grid; }