/* ---------------------------
   Sections / Filters
---------------------------- */
.section {
  padding: 28px 0 0;
}

.strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  align-items: center;
  justify-content: center;
}

.chipSep {
  width: 100%;
  height: 1px;
  background: var(--border);
  display: block;
  margin: 8px 0;
  flex-basis: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  order: 10; /* Default order for separators */
}

/* ============================================
   archive PAGE - 3 Row Layout
   Row 1: Alphabetical, Trending, Latest (3 buttons)
   Row 2: Gear, Gaming, Coding (3 buttons)
   Row 3: News, Reviews, Guides, Lists (4 buttons)
   ============================================ */

/* Row 1: Sort buttons (Alphabetical, Trending, Latest) */
.strip-archive > .chip:nth-child(1),
.strip-archive > .chip:nth-child(2),
.strip-archive > .chip:nth-child(3) {
  order: 1;
}

/* First separator (after Row 1) */
.strip-archive > .chipSep:nth-child(4) {
  order: 2;
}

/* Row 2: Main category buttons (Gear, Gaming, Coding) */
.strip-archive > .chip:nth-child(5),
.strip-archive > .chip:nth-child(6),
.strip-archive > .chip:nth-child(7) {
  order: 3;
}

/* Second separator (after Row 2) */
.strip-archive > .chipSep:nth-child(8) {
  order: 4;
}

/* Row 3: Content type buttons (News, Reviews, Guides, Lists) */
.strip-archive > .chipSep:nth-child(8) ~ .chip {
  order: 5;
}

/* ============================================
   GEAR & COLLECT PAGES - 2 Row Layout
   Row 1: Alphabetical, Trending, Latest, Staff Picks (4 buttons)
   Row 2: All category taxonomies (variable number)
   ============================================ */

/* Row 1: Sort buttons (Alphabetical, Trending, Latest, Staff Picks) */
.strip-gear > .chip:nth-child(1),
.strip-gear > .chip:nth-child(2),
.strip-gear > .chip:nth-child(3),
.strip-gear > .chip:nth-child(4),
.strip-collect > .chip:nth-child(1),
.strip-collect > .chip:nth-child(2),
.strip-collect > .chip:nth-child(3),
.strip-collect > .chip:nth-child(4) {
  order: 1;
}

/* First separator (after Row 1) */
.strip-gear > .chipSep:nth-child(5),
.strip-collect > .chipSep:nth-child(5) {
  order: 2;
}

/* Row 2: All category taxonomies (all chips after first separator) */
.strip-gear > .chipSep:nth-child(5) ~ .chip,
.strip-collect > .chipSep:nth-child(5) ~ .chip {
  order: 3;
}

.chip {
  padding: 8px 12px;
  border-radius: 10px; /* squarer */
  background: transparent;
  border: 1px solid var(--border);
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
  transition: var(--t);
}
.chip:hover {
  color: var(--text);
  background: var(--chip-hover);
}
.chip.active {
  color: var(--text);
  border-color: rgba(208, 122, 92, 0.55);
  background: rgba(208, 122, 92, 0.14);
}

/* Sort icon in active chips */
.chip .sort-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* ---------------------------
   Grid title row
---------------------------- */
.gridTitleRow {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sectionTitle {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-heading);
}

.sectionSubtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.sortRow {
  display: flex;
  gap: 10px;
}