/**
 * Category page — listing shell (Homepage design system)
 * Do not load on locked Homepage.
 */

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  max-width: 100%;
}

.category-chips__item {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
}

.category-chips__item.is-active,
.category-chips__item[aria-current="page"] {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.category-chips__item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.category-chips__item.is-active:hover {
  background: #fff;
}

/* Sparse / empty category: real counts, no filler cards */
#category-products .grid-products--sparse {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 100%;
}

.category-empty {
  margin: 0;
  max-width: 28rem;
  padding: 28px 20px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(17, 17, 17, 0.12);
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--muted);
}

@media (min-width: 1280px) {
  .category-chips {
    gap: 10px;
    margin-top: 22px;
  }

  .category-chips__item {
    height: 38px;
    padding: 0 16px;
    font-size: var(--fs-13);
  }

  #category-products .grid-products--sparse {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
  }

  #category-products.section {
    min-height: 420px;
  }

  .category-empty {
    padding: 40px 32px;
    font-size: var(--fs-15);
  }
}