/* ===========================
   GreenMart Frontend Overrides
   =========================== */

/* Use Tailwind utilities for layout, spacing, colors, and responsiveness.
   These are minimal custom tweaks. */

/* Body */
body {
  @apply font-sans bg-gray-100 text-gray-800 m-0 p-0;
}

/* Header */
header {
  @apply bg-green-600 text-white p-4;
}
header nav {
  @apply flex flex-wrap gap-2;
}
header nav a,
header nav button {
  @apply text-white font-bold px-3 py-2 rounded-md bg-green-700 transition;
}
header nav a:hover,
header nav button:hover {
  @apply bg-green-800;
}

/* Main content */
main {
  @apply p-6;
}

/* Footer */
footer {
  @apply bg-gray-800 text-white text-center p-4;
}

/* Product grid */
.products {
  @apply grid gap-6;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.product {
  @apply border border-gray-200 p-4 bg-white text-center rounded-md shadow-sm;
}
.product img {
  @apply w-full h-auto object-contain;
}

/* Buttons */
button {
  @apply bg-green-600 text-white font-medium px-3 py-2 rounded-md transition;
}
button:hover {
  @apply bg-green-700;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  header nav { @apply flex-col; }
  .products { grid-template-columns: 1fr; }
}