/* Critical layout -- works even if the pinned Tailwind runtime is slow to load */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
img, video, svg { max-width: 100%; height: auto; }

/* Responsive card grid: stacks at 400px, fills as the panel widens */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
}

/* Table wrapper for horizontal scroll when needed */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Luxury Watch Store Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Custom premium elements */
.luxury-gradient-dark {
  background: linear-gradient(135deg, #0f0f10 0%, #050506 100%);
}

.luxury-gradient-light {
  background: linear-gradient(135deg, #fbfbfa 0%, #f4f3ef 100%);
}

.luxury-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -10px rgba(180, 142, 84, 0.15);
}

/* Gold border effect on hover */
.gold-border-hover {
  transition: all 0.3s ease;
  border-color: rgba(212, 163, 89, 0.1);
}
.gold-border-hover:hover {
  border-color: rgba(212, 163, 89, 0.4);
}

/* Glassmorphism elements */
.glass-panel {
  background-color: rgba(15, 15, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .glass-panel {
  background-color: rgba(10, 10, 11, 0.9);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0f0f10;
}
::-webkit-scrollbar-thumb {
  background: #d4a359;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b58e54;
}