body {
  font-family: 'Inter', sans-serif;
  background-color: #0b1120;
  color: #fff;
  padding-top: env(safe-area-inset-top);
}

.glass-panel {
  background: rgba(21, 30, 50, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The shared navigation is the only fixed top bar on this page. */
.tree-explorer-results-content { padding-top: 1.5rem; }

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.results-back-link { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1rem; color: #93c5fd; font-size: .78rem; font-weight: 800; text-decoration: none; transition: color 160ms ease; }
.results-back-link:hover, .results-back-link:focus-visible { color: #fff; text-decoration: none; }
.results-back-link .material-symbols-rounded { font-size: 1.05rem; transition: transform 160ms ease; }
.results-back-link:hover .material-symbols-rounded, .results-back-link:focus-visible .material-symbols-rounded { transform: translateX(-2px); }
.results-header { margin-bottom: 1.25rem; }
.results-header h1 { margin: 0; color: #fff; font-size: 1.4rem; font-weight: 800; }
.results-header p { margin: .25rem 0 0; color: #94a3b8; font-size: .8rem; }

/* ── Collection hero (styled to match view-public-entry) ──────────────────── */
.collection-hero { margin-bottom: 1rem; border-radius: 1rem; }
.collection-hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: clamp(170px, 24vw, 220px);
  overflow: hidden;
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--collection-color, #3b82f6) 24%, transparent), transparent 55%),
    linear-gradient(to top, #0b1120 8%, #131d33 100%);
}
/* Full-bleed cover photo (shown only when the catalog item has one). */
.collection-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.collection-hero__img[hidden] { display: none; }

/* Soft colored glow anchored to the top-left, tinted by the collection color. */
.collection-hero__glow {
  position: absolute;
  top: -35%;
  right: -10%;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--collection-color, #3b82f6) 40%, transparent), transparent 70%);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

/* Darkening gradient over the cover photo so the kicker/title stay legible.
   Only active in the .has-photo state. */
.collection-hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
  background: linear-gradient(to top, rgba(3, 8, 18, .94) 0%, rgba(3, 8, 18, .55) 42%, rgba(3, 8, 18, .18) 100%);
}
.collection-hero.has-photo .collection-hero__shade { display: block; }
/* With a photo, drop the flat tinted background + colored glow in favor of the image. */
.collection-hero.has-photo .collection-hero__media { background: #06111f; }
.collection-hero.has-photo .collection-hero__glow { display: none; }
/* Keep the badge and title above the photo + shade. */
.collection-hero.has-photo .collection-hero__badge,
.collection-hero.has-photo .collection-hero__title { z-index: 2; }
.collection-hero__badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(48px, 12vw, 60px);
  height: clamp(48px, 12vw, 60px);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--collection-color, #3b82f6) 22%, #0b1120);
  border: 1px solid color-mix(in srgb, var(--collection-color, #3b82f6) 55%, transparent);
  box-shadow: 0 12px 30px rgba(2, 6, 23, .45);
}
.collection-hero__badge .material-symbols-rounded {
  color: var(--collection-color, #93c5fd);
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}
.collection-hero__title { position: relative; z-index: 1; }
.collection-hero__title h1 { margin: 0; color: #fff; font-size: clamp(1.5rem, 4.5vw, 2.35rem); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }

/* ── About This Collection card ───────────────────────────────────────────── */
.collection-about {
  margin: 0 0 1.25rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.collection-about__block + .collection-about__block { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.collection-about__header { display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; }
.collection-about__header .material-symbols-rounded { color: var(--collection-color, #93c5fd); font-size: 1.15rem; }
.collection-about__header h2 { margin: 0; color: #e5edf7; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.collection-about__desc { margin: 0; color: #c4d0e2; font-size: .9rem; line-height: 1.6; }

.collection-about__label { margin: 0 0 .6rem; color: #94a3b8; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.collection-about__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.collection-about__tag {
  display: inline-flex;
  align-items: center;
  padding: .4rem .75rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--collection-color, #93c5fd) 72%, #fff);
  background: color-mix(in srgb, var(--collection-color, #3b82f6) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--collection-color, #3b82f6) 45%, transparent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
}

/* ── Grid header ("Trees in this Collection") ─────────────────────────────── */
.collection-grid-head { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; }
.collection-grid-head .material-symbols-rounded { color: var(--collection-color, #93c5fd); font-size: 1.15rem; }
.collection-grid-head h2 { margin: 0; color: #e5edf7; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.collection-grid-head__count { margin-left: auto; padding: .25rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #cbd5e1; font-size: .72rem; font-weight: 800; }