/* =====================================================
   PSILO DROPS — WooCommerce Category CSS
   Geladen op: product categorie pagina's
   Generiek (slug-agnostisch) — later uitbreiden per
   categorie via body.term-{slug} selectors
   ===================================================== */

/* ── Categorie header ────────────────────────────── */
.woocommerce-products-header {
  background: var(--off-white);
  padding: 48px 64px 32px;
  border-bottom: 2px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Subtiele achtergrond glow */
.woocommerce-products-header::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 240, 37, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.woocommerce-products-header__title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.woocommerce-products-header .term-description {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  position: relative;
  z-index: 1;
}

/* ── Categorie accent-balk ───────────────────────── */
.woocommerce-products-header::after {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--blue) 60%, var(--purple) 100%);
  position: absolute;
  bottom: 0; left: 0; right: 0;
}

/* ── Filter / Sortering rij ─────────────────────── */
.woocommerce-shop-toolbar,
.woocommerce .woocommerce-result-counts + .woocommerce-ordering {
  padding: 20px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ── Per categorie aanpassingen ─────────────────── */
/* Microdosering */
/* body.term-microdose .woocommerce-products-header {
  background: linear-gradient(135deg, #f0fce8, var(--off-white));
} */

/* Classic */
/* body.term-classic .woocommerce-products-header {
  background: linear-gradient(135deg, #e8eeff, var(--off-white));
} */

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-products-header {
    padding: 32px 24px 24px;
  }
  .woocommerce-shop-toolbar,
  .woocommerce .woocommerce-result-counts + .woocommerce-ordering {
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}