/* Optional global styles for dev; prevents missing file 404 and flicker */
:root {
  --bg: #f9fafb;
  --text: #1f2937;
  --muted: #6b7280;
}

* {
  box-sizing: border-box;
}

html, body, #root { 
  height: 100%; 
  background: var(--bg);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

/* Smooth image rendering */
img { 
  image-rendering: auto;
  max-width: 100%;
  height: auto;
}

/* Mobile responsive utilities */
@media (max-width: 640px) {
  html {
    font-size: 14px;
  }
  
  /* Force 1 column grid on mobile with centered items */
  .products-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    justify-items: center !important;
    max-width: 100% !important;
  }
  
  /* Limit card width on mobile */
  .product-card {
    max-width: 280px !important;
    width: 100% !important;
  }
  
  /* Ensure mobile containers don't overflow */
  .main-layout {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Disable text selection on touch devices for better UX */
@media (hover: none) and (pointer: coarse) {
  button, .clickable {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
}

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