/* ── Category Header ────────────────────────────────────────────────────────── */
.cw-cat-header {
  background: var(--ink);
  padding: 52px 0 48px;
  border-bottom: 1px solid var(--ink-2);
}

.cw-cat-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cw-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.cw-breadcrumb a { color: var(--ink-3); text-decoration: none; }
.cw-breadcrumb a:hover { color: var(--g); }

.cw-cat-title {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 10px;
}
.cw-cat-title em { color: var(--g); font-style: normal; }

.cw-cat-sub {
  font-size: 14px;
  color: #475569;
  line-height: 1.65;
  max-width: 520px;
}

.cw-cat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.cw-cat-stat-num {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -2px;
  line-height: 1;
  text-align: right;
}
.cw-cat-stat-num em { color: var(--g); font-style: normal; }
.cw-cat-stat-label  { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); text-align: right; }

.cw-cat-type-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cw-cat-type-pill {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--faint);
  text-decoration: none;
  transition: all .15s;
}
.cw-cat-type-pill.active,
.cw-cat-type-pill:hover { background: rgba(5,150,105,.15); border-color: rgba(5,150,105,.3); color: #6EE7B7; }

/* ── Filter bar ─────────────────────────────────────────────────────────────── */
.cw-filter-bar {
  position: sticky;
  top: 60px;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.cw-filter-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.cw-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.cw-f-select {
  padding: 8px 28px 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .15s;
}
.cw-f-select:hover { border-color: var(--g); }

.cw-f-divider { width: 1px; height: 24px; background: var(--line); flex-shrink: 0; margin: 0 2px; }
.cw-f-spacer  { flex: 1; }
.cw-f-sort-label { font-size: 11px; font-weight: 700; color: var(--faint); white-space: nowrap; flex-shrink: 0; }

.cw-f-sort-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
}
.cw-f-sort-btn.on  { background: var(--ink); border-color: var(--ink); color: #fff; }
.cw-f-sort-btn:hover:not(.on) { border-color: var(--ink-3); color: var(--ink); }

.cw-f-count { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* ── Active filter chips ─────────────────────────────────────────────────────── */
.cw-active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cw-af-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.cw-af-chip  {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--gp);
  border: 1.5px solid var(--gl);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  color: var(--g);
  cursor: pointer;
}
.cw-af-x     { font-size: 14px; opacity: .7; cursor: pointer; }
.cw-af-clear { font-size: 12px; font-weight: 700; color: var(--c); cursor: pointer; }

/* ── Archive main ────────────────────────────────────────────────────────────── */
.cw-archive-main { padding: 40px 0 80px; }

/* ── Mobile filter ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cw-cat-header    { padding: 24px 0 0; }
  .cw-cat-header-inner { flex-direction: column; gap: 0; }
  .cw-cat-title     { font-size: 26px; text-align: center; }
  .cw-cat-sub       { text-align: center; font-size: 12px; }
  .cw-cat-right     { align-items: center; width: 100%; border-top: 1px solid var(--ink-2); padding: 14px 0; }
  .cw-cat-stat-num  { font-size: 28px; text-align: center; }
  .cw-cat-stat-label { text-align: center; }
  .cw-cat-type-pills { justify-content: center; }
  .cw-filter-bar    { top: 52px; overflow-x: auto; }
  .cw-f-spacer      { display: none; }
  .cw-f-count       { display: none; }
  .cw-archive-main  { padding: 20px 0 80px; }
}