/* Manoj Sweets: compact category cards on phones.
   Loaded after the generated stylesheet so these rules override the old 2-column layout. */
.category-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 16px);
}
.category-image {
  aspect-ratio: 1.35;
}
.category-copy {
  padding: 10px 5px 12px;
}
.category-copy h3 {
  font-size: clamp(12px, 1.25vw, 17px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .category-card:hover { transform: none; }
  .category-image { aspect-ratio: 1.15; }
  .category-copy { padding: 8px 3px 10px; }
  .category-copy h3 { font-size: 13px; }
}
@media (max-width: 380px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .category-copy h3 { font-size: 13px; }
}
@media (min-width: 430px) and (max-width: 760px) {
  .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .category-image { aspect-ratio: 1.05; }
  .category-copy { padding: 7px 3px 9px; }
  .category-copy h3 { font-size: 11px; }
}