/* Subcategory "pill" links — ALL BREAKPOINTS */
.grid:has(.subCategory-name) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;           /* 5px row/col spacing */
  align-items: flex-start;
  /* Optional: center them on desktop
     justify-content: center; */
}

/* Break the one-per-row behavior for those columns only */
.grid:has(.subCategory-name) > .gridColumn {
  flex: 0 0 auto !important;     /* no 100% flex-basis */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;          /* gap handled by container */
  float: none !important;
  clear: none !important;
  display: inline-block !important;
}

/* Pill look */
.grid:has(.subCategory-name) .subCategory-name,
.grid:has(.subCategory-name) .subCategory-name a {
  display: inline-flex !important;
  align-items: center;
  background: #000;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px;         /* pill */
  padding: 5px 10px;
  margin: 0;                     /* container gap handles spacing */
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none !important;
  text-transform: none;          /* in case something forces uppercase */
  white-space: nowrap;           /* keep label on one line */
}

/* If some theme CSS sets nowrap on the row, cancel it */
.grid:has(.subCategory-name) { white-space: normal !important; }

/* Center the subcategory pills */
.grid:has(.subCategory-name) {
  justify-content: center !important;  /* centers each wrapped row */
  /* optional: also center multi-row packing if needed */
  align-content: center !important;
}

