/* Catalog grids (root/catalog/index: games, recipes; the game page's "More games") on faxo.css's
   colors, light and dark. */
.fx-catalog-page { background: var(--bg); padding-bottom: 96px; }
.fx-cat-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; padding: 14px 0 0; color: var(--secondary); }
.fx-cat-crumbs a { color: var(--accent); text-decoration: none; }
.fx-cat-head h1 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 4px; color: var(--label); }
.fx-cat-head p { color: var(--secondary); font-size: 17px; margin: 0 0 14px; }

/* categories: one row you swipe at every width, faded at the edge */
.fx-cat-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 14px; }
.fx-cat-chips::-webkit-scrollbar { display: none; }
.fx-cat-chips a { flex: 0 0 auto; background: var(--fill); color: var(--label); border-radius: 999px; padding: 7px 14px; font-size: 15px;
  text-decoration: none; white-space: nowrap; }
.fx-cat-chips a:hover { background: var(--fill-pressed); }
.fx-cat-chips a.on { background: var(--label); color: var(--bg); }

.fx-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.fx-cat-card { display: grid; gap: 6px; align-content: start; color: var(--label); text-decoration: none; }
.fx-cat-card-img { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--fill); }
.fx-cat-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.fx-cat-card:hover .fx-cat-card-img img { transform: scale(1.04); }
.fx-cat-card-price { font-size: 17px; font-weight: 700; margin-bottom: -4px; }
.fx-cat-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-cat-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fx-cat-more-head h2 { font-size: 22px; font-weight: 700; margin: 0 0 12px; color: var(--label); }
.fx-cat-more-head a { font-size: 17px; color: var(--accent); text-decoration: none; }
.fx-cat-pager { display: flex; justify-content: center; margin: 22px 0 0; }
.fx-cat-pager .fx-btn { width: auto; padding: 0 22px; height: 44px; color: var(--label); }
.fx-cat-empty { color: var(--secondary); padding: 40px 0; text-align: center; }

@media (min-width: 560px) { .fx-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) {
  .fx-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fx-cat-chips { margin: 0; padding: 2px 0 16px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent); }
}
@media (min-width: 1100px) { .fx-cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }