/* Category page — design §1 (Kategorieseite). Only what site.css lacks. */

.pagehead--row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.pagehead--row h1 { margin: 0; max-width: 60ch; text-wrap: pretty; }
.pagehead--row .count-note { white-space: nowrap; padding-bottom: 6px; }

.catgrid { padding: 26px 0 6px; }

/* 3-col category cards get the slightly larger title from the mock (16.5px vs 15px on home). */
.prodgrid--3 .prodcard h3 { font-size: 16.5px; }

.prodcard__date { display: block; font-size: 11.5px; margin-bottom: 4px; }

.prodcard__foot {
  display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px;
}

.catempty { padding: 28px; margin-top: 20px; font-size: 14.5px; }
.catempty p { margin: 0 0 16px; }

@media (max-width: 767px) {
  .pagehead--row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pagehead--row h1 { font-size: 24px; }
  .pagehead--row .count-note { padding-bottom: 0; }
  .catgrid { padding: 16px 0 6px; gap: 12px; }
  .prodgrid--3 .prodcard h3 { font-size: 12.5px; }
  .prodcard .imgwell { height: 100px; margin-bottom: 10px; }
  .prodcard__text { font-size: 11.5px; }
}

/* ---------- Sub-category navigation ---------- */
/* Sits between the page head and the product grid: the grid already shows the
   children's products merged, this is the way down into a single one of them. */
.subnav {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px;
  padding: 14px 0 2px; border-top: 1px solid var(--hairline); margin-top: 14px;
}
.subnav__label {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: var(--meta-2);
  flex: none;
}
.subnav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.subnav__item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; }
.subnav__arrow { color: var(--meta-2); transition: transform .15s ease, color .15s ease; }
a.subnav__item:hover { border-color: var(--blue); color: var(--blue); }
a.subnav__item:hover .subnav__arrow { color: var(--blue); transform: translateX(2px); }

@media (max-width: 767px) {
  .subnav { gap: 8px; padding-top: 12px; }
  .subnav__label { width: 100%; }
}