/* ==========================================================================
   category-top.css — wspólna góra stron kategorii (nagłówek + controls)
   Desktop / laptop. Mobile = osobny plik później.
   Wymaga: variables.css, layout.css
   ========================================================================== */

:root {
  --category-content-max: var(--category-nav-max, 1400px);
}

.category-page {
  width: 100%;
}

html:not([data-device="phone"]) .site-main:has(.category-page) {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--category-content-max));
  max-width: var(--category-content-max);
  margin-inline: auto;
  padding-top: var(--space-24);
  padding-inline: 0;
}

/* --- Nagłówek kategorii --- */
.category-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-bottom: var(--space-32);
  container-type: inline-size;
  container-name: category-top;
}

.category-header {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.category-header__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
  line-height: var(--lh-tight);
  letter-spacing: 0.00em;
  text-transform: uppercase;
  color: #333333;
}

html[data-theme="dark"] .category-header__title {
  color: #ffffff;
}

.category-header__description {
  margin: 0;
  max-width: 900px;
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  line-height: var(--lh-relaxed);
  color: var(--muted);
}