.ml-category-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ml-space-6);
}

@media (min-width: 640px) {
  .ml-category-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ml-category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 12rem;
  padding: var(--ml-space-6);
  border-radius: var(--ml-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ml-color-surface-line);
  background:
    linear-gradient(180deg, rgba(18, 14, 10, 0.1), rgba(18, 14, 10, 0.55)),
    linear-gradient(135deg, #3d2f26, #1a1512);
  color: var(--ml-color-text-inverse);
  transition:
    transform var(--ml-motion-duration-base) var(--ml-motion-ease-standard),
    box-shadow var(--ml-motion-duration-base) var(--ml-motion-ease-standard);
}

.ml-category-tile:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 36px rgba(18, 14, 10, 0.2);
}

.ml-category-tile__name {
  font-family: var(--ml-font-family-serif);
  font-size: var(--ml-font-size-2xl);
  font-weight: var(--ml-font-weight-medium);
  margin-bottom: var(--ml-space-2);
}

.ml-category-tile__count {
  font-size: var(--ml-font-size-sm);
  opacity: 0.85;
  margin-bottom: var(--ml-space-4);
}

.ml-category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(243, 112, 33, 0.12), transparent 55%);
  pointer-events: none;
}

.ml-category-tile > span {
  position: relative;
  z-index: 1;
}