.np-universe-page {
  width: min(calc(100% - 32px), var(--np-max));
  margin: 0 auto;
  padding: clamp(18px, 3vw, 32px) 0 70px;
}

/* Universe pages keep a hero, but it behaves like a compact identity strip. */
.np-universe-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 34%);
  align-items: stretch;
  gap: 0;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--np-universe-accent) 22%, #deddd9);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--np-universe-accent) 13%, transparent), transparent 38%),
    var(--np-universe-soft);
  color: var(--np-universe-ink);
}

.np-universe-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(26px, 4vw, 42px);
}

.np-universe-hero h1 {
  margin: 6px 0 8px;
  font-size: clamp(38px, 5.8vw, 64px);
  line-height: .96;
  letter-spacing: -.052em;
}

.np-universe-hero p {
  max-width: 600px;
  margin: 0;
  color: color-mix(in srgb, var(--np-universe-ink) 72%, transparent);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.45;
}

.np-universe-hero__jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--np-universe-accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #fff 62%, transparent);
  color: var(--np-universe-ink);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.np-universe-hero__media {
  min-height: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--np-universe-accent) 10%, #fff);
}

.np-universe-hero__image {
  width: 100%;
  height: 100%;
  min-height: 190px;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

.np-universe-hero__mark {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--np-universe-accent) 22%, transparent), transparent 72%),
    color-mix(in srgb, var(--np-universe-soft) 82%, #fff);
}

.np-universe-hero__mark i {
  width: 78px;
  height: 106px;
  border: 3px solid color-mix(in srgb, var(--np-universe-accent) 64%, white);
  border-radius: 13px;
  transform: rotate(7deg);
  box-shadow: -18px 14px 0 -8px color-mix(in srgb, var(--np-universe-accent) 28%, transparent);
}

.np-universe-products {
  margin-top: clamp(34px, 4.5vw, 48px);
}

.np-universe-products .np-section-heading {
  margin-bottom: 18px;
}

.np-universe-products .woocommerce ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.np-universe-products__empty {
  padding: 22px;
  border: 1px dashed #c8c8c8;
  border-radius: 14px;
  color: #666a72;
}

@media (max-width: 1000px) {
  .np-universe-products .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .np-universe-page {
    width: min(calc(100% - 22px), var(--np-max));
    padding-top: 14px;
  }

  .np-universe-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .np-universe-hero__media,
  .np-universe-hero__mark {
    min-height: 120px;
    max-height: 180px;
    order: -1;
  }

  .np-universe-hero__image {
    min-height: 120px;
    max-height: 180px;
  }

  .np-universe-hero__copy {
    padding: 24px;
  }

  .np-universe-products .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .np-universe-products .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* Shared catalog layout: the universe keeps its identity above, while the
   product area behaves like a real shop with the same reusable filter panel. */
.np-universe-catalog {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.np-universe-catalog__filters {
  position: sticky;
  top: 16px;
}

.np-universe-catalog__filters .np-filter-panel {
  border-color: color-mix(in srgb, var(--np-universe-accent) 14%, var(--np-border));
  background: color-mix(in srgb, var(--np-universe-soft) 24%, #fff);
}

.np-universe-catalog__filters .np-filter-panel__heading {
  background: color-mix(in srgb, var(--np-universe-soft) 58%, #fff);
}

.np-universe-catalog__products {
  min-width: 0;
}

.np-universe-catalog__products ul.products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.np-universe-pagination {
  margin-top: 24px;
}

.np-universe-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-universe-pagination a,
.np-universe-pagination span {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--np-universe-accent) 20%, var(--np-border));
  border-radius: 10px;
  background: #fff;
  color: var(--np-universe-ink);
  text-decoration: none;
}

.np-universe-pagination .current {
  background: var(--np-universe-accent);
  color: #fff;
}

@media (max-width: 1000px) {
  .np-universe-catalog {
    grid-template-columns: 1fr;
  }

  .np-universe-catalog__filters {
    position: static;
  }

  .np-universe-catalog__filters .np-filter-panel {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: stretch;
  }

  .np-universe-catalog__filters .np-filter-panel__heading,
  .np-universe-catalog__filters .np-filter-panel__section {
    border-bottom: 0;
  }

  .np-universe-catalog__filters .np-filter-panel__section + .np-filter-panel__section {
    border-top: 0;
    border-left: 1px solid var(--np-border);
  }

  .np-universe-catalog__products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .np-universe-catalog__filters .np-filter-panel {
    grid-template-columns: 1fr;
  }

  .np-universe-catalog__filters .np-filter-panel__heading {
    border-bottom: 1px solid var(--np-border);
  }

  .np-universe-catalog__filters .np-filter-panel__section + .np-filter-panel__section {
    border-left: 0;
    border-top: 1px solid var(--np-border);
  }

  .np-universe-catalog__products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .np-universe-catalog__products ul.products {
    grid-template-columns: 1fr;
  }
}

/* AJAX filtering keeps the universe identity in place and refreshes only the catalogue. */
.np-universe-catalog {
  transition: opacity .16s ease;
}

.np-universe-catalog.is-loading {
  opacity: .48;
  pointer-events: none;
}