/* =====================================================
   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;
  }
}

/* ═══════════════════════════════════════════════
   CATEGORIE-TITEL — Hello Oppa + container (v5.0.1)
   De Blocksy-paginatitel op categoriepagina's is
   <h1 class="page-title"> (NIET .woocommerce-products-
   header__title). Daarom mikken we op .page-title.
   .pd-category-title blijft als alias meegenomen.
   Stijl A: witte kaart, ronde hoeken, accent-balk.
   ═══════════════════════════════════════════════ */
body.tax-product_cat .page-title,
body.tax-product_cat .pd-category-title {
  position: relative;
  display: block;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(17, 17, 34, 0.06);
  padding: 28px 32px;
  margin: 24px auto;
  max-width: 760px;
  overflow: hidden;
  text-align: center;
  font-family: 'Hello Oppa', 'Fredoka One', cursive !important;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  color: var(--ink) !important;
}

body.tax-product_cat .page-title::before,
body.tax-product_cat .pd-category-title::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--blue) 60%, var(--purple) 100%);
}

@media (max-width: 768px) {
  body.tax-product_cat .page-title,
  body.tax-product_cat .pd-category-title {
    padding: 20px 22px;
    border-radius: 16px;
    margin: 18px auto;
  }
}