/* SetGet.Shop - Custom Styles */
:root {
  --primary: #1a1a2e;
  --accent: #e94560;
  --light: #f8f9fa;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* Cart drawer transition */
#cart-drawer { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Product card hover */
.product-card:hover { transform: translateY(-2px); }

/* Smooth image loading */
img { transition: opacity 0.3s ease; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded { opacity: 1; }

/* Focus styles */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Mobile padding for bottom bar */
@media (max-width: 768px) {
  body { padding-bottom: 64px; }
}

/* Prose styles for product description */
.prose p { margin-bottom: 0.75rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.prose li { margin-bottom: 0.25rem; }

/* Animation */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease forwards; }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }