.category-art {
  display: grid;
  place-items: center;
  height: 118px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff 0, #fff7ef 48%, #ffd9b5 100%);
}

.category-art img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  filter: drop-shadow(0 8px 9px rgba(89, 36, 67, .16));
  transition: transform .22s ease;
}

.category-rail a:hover .category-art img {
  transform: translateY(-2px) scale(1.06);
}

.category-filter {
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.category-filter:hover {
  transform: translateY(-3px);
}

.category-filter.active {
  border-color: #dd4e83;
  box-shadow: 0 0 0 3px rgba(221, 78, 131, .16), 0 14px 32px rgba(89, 36, 67, .12);
}

.category-filter.active::after {
  content: '✓ 已篩選';
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #dd4e83;
  color: #fff;
  box-shadow: 0 5px 12px rgba(89, 36, 67, .2);
  font-size: 10px;
  font-weight: 900;
}

.category-filter:focus-visible {
  outline: 3px solid #ffc94f;
  outline-offset: 3px;
}

.category-art.bento {
  background: radial-gradient(circle at 50% 35%, #fff 0, #fff8df 52%, #ffd38c 100%);
}

.category-art.drink {
  background: radial-gradient(circle at 50% 35%, #fff 0, #fff0ea 52%, #ffc5b8 100%);
}

.category-art.noodles {
  background: radial-gradient(circle at 50% 35%, #fff 0, #fff7dc 52%, #ffd18a 100%);
}

.category-art.dessert {
  background: radial-gradient(circle at 50% 35%, #fff 0, #fff0f6 52%, #ffc6de 100%);
}

.category-art.night {
  background: radial-gradient(circle at 50% 35%, #fff 0, #fff0d9 52%, #d9b5df 100%);
}

@media (max-width: 780px) {
  .category-art {
    height: 108px;
  }

  .category-art img {
    padding: 2px;
  }

  .category-filter:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-art img {
    transition: none;
  }
}