/* ─── Dina Boutique — Design System ─────────────────────────────────── */
:root {
  --color-gold:   #C9975A;
  --color-dark:   #1C1C2E;
  --color-cream:  #FAF7F2;
  --font-display: 'Playfair Display', serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

/* Base */
body { font-family: var(--font-body); background: #f9f7f4; }
h1, h2, h3, .font-display { font-family: var(--font-display); }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Product grid line-clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover scale for product images */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.4s ease both; }

/* Cart badge */
#cart-badge { min-width: 18px; min-height: 18px; font-size: 10px; }

/* Radio card hover */
label:has(input[type=radio]):hover { border-color: #C9975A; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Product skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0ede8 25%, #e8e4de 50%, #f0ede8 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
}

/* Sticky header shadow */
header { box-shadow: 0 1px 0 rgba(0,0,0,0.08); }

/* Notification toast */
.notification {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  padding: 14px 20px; border-radius: 12px; font-size: 14px;
  font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  animation: fadeInUp 0.3s ease;
}
.notification.success { background: #1a3a2a; color: #6ee7b7; }
.notification.error   { background: #3a1a1a; color: #fca5a5; }