/* catalog-hero.css — Polished catalog and homepage hero with animated mesh + filter chips */

/* ─────────────────────────────────────────────────────────────────────
   Animated hero section with gradient mesh background
   ───────────────────────────────────────────────────────────────────── */
.cat-hero{
  position: relative;
  padding: 80px 32px 100px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

/* Animated gradient mesh backdrop */
.cat-hero::before{
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(233, 69, 96, 0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(245, 197, 24, 0.14), transparent 40%);
  filter: blur(40px);
  animation: catHeroShift 20s ease-in-out infinite;
  z-index: 0;
}

.cat-hero > *{
  position: relative;
  z-index: 1;
}

@keyframes catHeroShift{
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(15deg) scale(1.1);
  }
}

.cat-hero h1,
.cat-hero-title{
  font-family: var(--font-display, 'Georgia', serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 18px;
}

.cat-hero-title .accent{
  background: linear-gradient(135deg, var(--accent, #e94560), var(--gold, #f5c518));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cat-hero p,
.cat-hero-sub{
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.cat-hero-ctas,
.cta-row{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────
   Filter chips row (horizontal, scrollable)
   ───────────────────────────────────────────────────────────────────── */
.cat-filters{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0 14px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--glassBorder, rgba(255, 255, 255, 0.12));
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.cat-filters::-webkit-scrollbar{
  height: 6px;
}

.cat-filters::-webkit-scrollbar-track{
  background: transparent;
}

.cat-filters::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.cat-filters::-webkit-scrollbar-thumb:hover{
  background: rgba(255, 255, 255, 0.25);
}

.cat-filter-group{
  display: flex;
  gap: 8px;
  align-items: center;
}

.cat-chip{
  padding: 7px 16px;
  border-radius: var(--rd-pill, 99px);
  border: 1px solid var(--glassBorder, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast, 140ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
  text-decoration: none;
  display: inline-block;
  user-select: none;
  flex-shrink: 0;
}

.cat-chip:hover{
  border-color: var(--accent, #e94560);
  background: rgba(233, 69, 96, 0.06);
  color: #fff;
}

.cat-chip.active{
  background: linear-gradient(135deg, var(--accent, #e94560), color-mix(in oklab, var(--accent, #e94560) 75%, var(--gold, #f5c518)));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(233, 69, 96, 0.30);
}

/* Sort select styling */
.cat-sort{
  padding: 7px 12px;
  border-radius: var(--rd-pill, 99px);
  border: 1px solid var(--glassBorder, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast, 140ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.75)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  flex-shrink: 0;
}

.cat-sort:hover{
  border-color: var(--accent, #e94560);
  background-color: rgba(233, 69, 96, 0.06);
}

.cat-sort:focus{
  outline: none;
  border-color: var(--accent, #e94560);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────
   Course card improvements
   ───────────────────────────────────────────────────────────────────── */
.cat-grid,
.course-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.cat-card,
.course-card{
  position: relative;
  background: var(--glass, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glassBorder, rgba(255, 255, 255, 0.12));
  border-radius: var(--rd-lg, 14px);
  overflow: hidden;
  transition: transform var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)), box-shadow var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)), border-color var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.cat-card:hover,
.course-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--el-3, 0 14px 36px rgba(0, 0, 0, 0.40));
  border-color: rgba(233, 69, 96, 0.30);
}

.cat-card .cover,
.course-card .cover{
  aspect-ratio: 16 / 9;
  /* Subtler gradient so empty covers (no cover_image) feel atmospheric, not
     screaming pink. Keeps the brand tint but at much lower saturation. */
  background:
    radial-gradient(circle at 30% 20%, rgba(233, 69, 96, 0.10), transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(245, 197, 24, 0.08), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.cat-card .cover img,
.course-card .cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow, 400ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
}

.cat-card:hover .cover img,
.course-card:hover .cover img{
  transform: scale(1.06);
}

.cat-card .body,
.course-card .body{
  padding: 18px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.cat-card .title,
.course-card .title{
  font-family: var(--font-display, 'Georgia', serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.3;
}

.cat-card .desc,
.course-card .desc,
.course-card p{
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
  margin: 0 0 14px;
  flex-grow: 1;
}

.cat-card .meta,
.course-card .meta{
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.cat-card .meta span,
.course-card .meta span{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cat-card .footer,
.course-card .footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cat-card .author,
.course-card .author{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.cat-card .cta,
.course-card .cta{
  font-size: 12px;
  color: var(--accent, #e94560);
  font-weight: 600;
}

/* Price tag / badge positioning. Note: theme.css has a conflicting
   `.cat-card .cover .price-tag` rule (3-class specificity) that sets
   bottom:12px / left:14px for an old "big floating price text" treatment;
   bumping our selector specificity here ensures the modern pill
   wins ALL position properties — otherwise we get a stretched oval.
   Layout: price-tag on top-LEFT (visual weight balances featured badge
   on right). Badge-row + heart button stack on the right. */
.cat-card .cover .price-tag,
.course-card .cover .price-tag,
.cat-card .price-tag,
.course-card .price-tag{
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  padding: 5px 11px;
  border-radius: var(--rd-pill, 99px);
  background: var(--accent, #e94560);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  font-family: var(--font-body, inherit);
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 4px 10px rgba(233, 69, 96, 0.30);
  z-index: 3;
  white-space: nowrap;
}

.cat-card .cover .price-tag.free,
.course-card .cover .price-tag.free,
.cat-card .price-tag.free,
.course-card .price-tag.free{
  background: rgba(0, 200, 150, 0.85);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 200, 150, 0.30);
}

/* Badge row (Featured / etc) — sits below the heart button on the right.
   Heart button is at top-right of the card itself, so badges drop down. */
.cat-card .cover .badge-row,
.course-card .cover .badge-row{
  top: auto;
  bottom: 12px;
  right: 12px;
  left: auto;
  z-index: 3;
}

.cat-card .badge-row,
.course-card .badge-row{
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.cat-card .lbl,
.course-card .lbl,
.course-card .badge{
  padding: 4px 10px;
  border-radius: var(--rd-pill, 99px);
  background: linear-gradient(135deg, var(--gold, #f5c518), var(--accent, #e94560));
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30);
  white-space: nowrap;
}

.cat-card .lbl.free,
.course-card .lbl.free,
.course-card .badge.free{
  background: rgba(0, 200, 150, 0.85);
  color: #fff;
}

.cat-card .emoji,
.course-card .emoji{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.40));
}

/* ─────────────────────────────────────────────────────────────────────
   Skeleton loading state (shimmer animation)
   ───────────────────────────────────────────────────────────────────── */
.course-card.skeleton{
  pointer-events: none;
  opacity: 0.6;
}

.course-card.skeleton .cover,
.course-card.skeleton .title,
.course-card.skeleton .desc,
.course-card.skeleton .meta{
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  background-size: 200% 100%;
  animation: catShimmer 1.4s ease-in-out infinite;
  color: transparent;
}

@keyframes catShimmer{
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Empty state styling
   ───────────────────────────────────────────────────────────────────── */
.cat-results-count{
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 24px;
  display: block;
}

.dash-empty,
.empty-state{
  text-align: center;
  padding: 60px 40px;
}

.dash-empty-icon,
.empty-state-icon{
  font-size: 64px;
  line-height: 1;
  margin-bottom: 20px;
  display: inline-block;
  animation: polishFloat 3s ease-in-out infinite;
}

.dash-empty h3,
.empty-state h2,
.empty-state h3{
  margin-bottom: 12px;
  color: #fff;
  font-family: var(--font-display, 'Georgia', serif);
  font-size: 1.4rem;
  font-weight: 700;
}

.dash-empty p,
.empty-state p{
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 24px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────
   Category pills (horizontal filter row below hero)
   ───────────────────────────────────────────────────────────────────── */
.cat-pills{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 0 0 16px;
}

.cat-pill{
  padding: 8px 16px;
  border-radius: var(--rd-pill, 99px);
  border: 1px solid var(--glassBorder, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast, 140ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cat-pill:hover{
  border-color: var(--accent, #e94560);
  background: rgba(233, 69, 96, 0.06);
  color: #fff;
}

.cat-pill.active{
  background: linear-gradient(135deg, var(--accent, #e94560), color-mix(in oklab, var(--accent, #e94560) 75%, var(--gold, #f5c518)));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(233, 69, 96, 0.30);
}

.cat-pill .count{
  font-size: 11px;
  opacity: 0.7;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────
   Search form styling (if present)
   ───────────────────────────────────────────────────────────────────── */
.cat-search{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto 24px;
  flex-wrap: wrap;
}

.cat-search input[type="text"]{
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: var(--rd-lg, 14px);
  border: 1px solid var(--glassBorder, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  transition: all var(--dur-fast, 140ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
}

.cat-search input[type="text"]::placeholder{
  color: rgba(255, 255, 255, 0.4);
}

.cat-search input[type="text"]:focus{
  outline: none;
  border-color: var(--accent, #e94560);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.cat-search button{
  padding: 10px 20px;
  border-radius: var(--rd-lg, 14px);
  border: none;
  background: linear-gradient(135deg, var(--accent, #e94560), color-mix(in oklab, var(--accent, #e94560) 85%, var(--gold, #f5c518)));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast, 140ms) var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
  white-space: nowrap;
}

.cat-search button:hover{
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(233, 69, 96, 0.30);
}

.cat-search button:active{
  transform: translateY(1px);
}

/* ─────────────────────────────────────────────────────────────────────
   Responsive adjustments
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px){
  .cat-hero{
    padding: 60px 20px 80px;
  }

  .cat-hero h1,
  .cat-hero-title{
    font-size: clamp(1.8rem, 5vw, 3rem);
  }

  .cat-filters{
    margin: 0 -20px 24px;
    padding: 8px 20px 14px;
  }

  .cat-grid,
  .course-grid{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }

  .cat-search{
    flex-direction: column;
  }

  .cat-search input[type="text"]{
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Narrow mobile (375px / iPhone width)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px){
  .cat-hero{
    padding: 40px 14px 60px;
  }

  .cat-hero h1,
  .cat-hero-title{
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
    margin-bottom: 12px;
  }

  .cat-hero p,
  .cat-hero-sub{
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .cat-hero-ctas,
  .cta-row{
    gap: 10px;
  }

  .cat-grid,
  .course-grid,
  .cat-rail-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cat-filters{
    margin: 0 -14px 16px;
    padding: 8px 14px 12px;
  }

  .cat-browse{
    margin: 8px auto 16px;
    padding: 12px 12px 10px;
    border-radius: 12px;
  }

  .cat-browse-head{
    flex-direction: column;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .cat-browse-eyebrow{
    font-size: 10px;
  }

  .cat-browse-count{
    font-size: 11px;
  }

  .cat-browse-row{
    gap: 6px;
  }

  .cat-browse-filters .cat-sort{
    width: 100%;
    margin: 8px 0 0 0;
  }

  .cat-search{
    max-width: 100%;
    margin: 0 auto 16px;
  }

  .cat-search input[type="text"]{
    min-width: 100%;
  }

  .cat-empty{
    padding: 40px 16px;
    margin: 16px auto 40px;
  }

  .cat-empty-icon{
    font-size: 40px;
    margin-bottom: 12px;
  }

  .cat-empty h3{
    font-size: 1.1rem;
  }

  .cat-rail{
    padding: 0 12px;
    margin: 0 auto 14px;
  }

  .cat-rail-title{
    font-size: 1.1rem;
  }

  .cat-discover-band{
    padding: 16px 12px 6px;
  }

  /* Bundle cards stack on mobile */
  .cat-bundle-card{
    margin-bottom: 10px;
  }

  .cat-rail-mini{
    min-width: 0;
  }

  @media (max-width: 320px){
    .cat-hero h1,
    .cat-hero-title{
      font-size: 1.2rem;
    }

    .cat-hero p,
    .cat-hero-sub{
      font-size: 0.9rem;
    }

    .cat-empty h3{
      font-size: 1rem;
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .cat-hero::before,
  .course-card,
  .cat-chip,
  .cat-search input[type="text"],
  .cat-search button,
  .cat-pill{
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Hero refinements: eyebrow tag + tighter top padding when at top of page
   ───────────────────────────────────────────────────────────────────── */
.cat-hero-eyebrow{
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(233, 69, 96, 0.12);
  border: 1px solid rgba(233, 69, 96, 0.30);
  color: var(--accent, #e94560);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cat-save-search-btn{
  margin-top: 14px;
  background: rgba(167, 139, 250, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.30);
  color: #c4b5fd;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast, 140ms), border-color var(--dur-fast, 140ms);
}
.cat-save-search-btn:hover{
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.50);
}

/* ─────────────────────────────────────────────────────────────────────
   Rails (trending / new / bundles) — uniform CSS, no inline styles
   ───────────────────────────────────────────────────────────────────── */
.cat-rail{
  padding: 0 clamp(20px, 4vw, 48px);
  margin: 0 auto 20px;
  max-width: 1280px;
}
.cat-rail:last-of-type{ margin-bottom: 12px; }
.cat-rail-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cat-rail-title{
  font-family: var(--font-display, 'Georgia', serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.cat-rail-emoji{ font-size: 1.2em; line-height: 1; }
.cat-rail-blurb{ font-size: 12.5px; color: rgba(255,255,255,0.45); }
.cat-rail-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.cat-rail-grid.is-bundles{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cat-rail-card{
  display: block;
  padding: 18px;
  border-radius: var(--rd-lg, 14px);
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glassBorder, rgba(255,255,255,0.12));
  text-decoration: none;
  color: var(--text, #fff);
  transition: transform var(--dur-fast,180ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              border-color var(--dur-fast,180ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              box-shadow var(--dur-fast,180ms) var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
.cat-rail-card:hover{
  transform: translateY(-3px);
  border-color: rgba(233,69,96,0.30);
  box-shadow: 0 14px 30px rgba(0,0,0,0.30);
}
.cat-rail-card-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.cat-rail-emoji-lg{ font-size: 28px; line-height: 1; }
.cat-rail-price{
  font-family: var(--font-display, 'Georgia', serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gold, #f5c518);
}
.cat-rail-price.is-free{ color: #7be4a3; }
.cat-rail-card-title{
  font-family: var(--font-display, 'Georgia', serif);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.25;
  color: #fff;
}
.cat-rail-card-sub{
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0;
}

/* Bundle card: distinct gold treatment */
.cat-bundle-card{
  display: block;
  padding: 20px;
  border-radius: var(--rd-lg, 14px);
  background: linear-gradient(135deg, rgba(245,197,24,0.10), rgba(233,69,96,0.05));
  border: 1px solid rgba(245,197,24,0.30);
  text-decoration: none;
  color: var(--text, #fff);
  transition: transform var(--dur-fast,180ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              box-shadow var(--dur-fast,180ms) var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
.cat-bundle-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(245,197,24,0.18);
}
.cat-bundle-pill{
  background: rgba(245,197,24,0.18);
  color: var(--gold, #f5c518);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.cat-bundle-foot{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.cat-bundle-price{
  font-family: var(--font-display, 'Georgia', serif);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold, #f5c518);
}
.cat-bundle-save{
  font-size: 12px;
  color: #7be4a3;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   Active filter summary chips (above the results grid)
   ───────────────────────────────────────────────────────────────────── */
.cat-active-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 0 6px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
.cat-active-label{
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}
.cat-active-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border-radius: 99px;
  background: rgba(233,69,96,0.10);
  border: 1px solid rgba(233,69,96,0.28);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast, 140ms), border-color var(--dur-fast, 140ms);
}
.cat-active-chip:hover{
  background: rgba(233,69,96,0.20);
  border-color: var(--accent, #e94560);
}
.cat-active-x{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.cat-active-clear{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  margin-left: 4px;
}
.cat-active-clear:hover{ color: var(--accent, #e94560); }

/* ─────────────────────────────────────────────────────────────────────
   Empty-state polish (replaces inline styles on .dash-empty)
   ───────────────────────────────────────────────────────────────────── */
.cat-empty{
  text-align: center;
  padding: 80px 24px;
  margin: 20px auto 60px;
  max-width: 600px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.cat-empty-icon{
  font-size: 56px;
  line-height: 1;
  margin-bottom: 20px;
  display: inline-block;
  filter: grayscale(0.3);
  animation: catFloat 4s ease-in-out infinite;
}
@keyframes catFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.cat-empty h3{
  font-family: var(--font-display, 'Georgia', serif);
  font-size: 1.4rem;
  margin: 0 0 8px;
  color: #fff;
}
.cat-empty p{
  color: rgba(255,255,255,0.60);
  margin: 0 auto 20px;
  max-width: 420px;
  line-height: 1.6;
}
.cat-empty-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cat-empty-suggest{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Tighter vertical rhythm: catalog page-wide overrides so the giant 50px
   .page top/bottom padding doesn't create dead space between the toolbar,
   active-filter chips, and the results grid. */
.cat-browse + .page,
.cat-browse + .page + .page,
.cat-active-filters{ padding-top: 0 !important; }
.cat-results{ padding-top: 8px; }

/* ─────────────────────────────────────────────────────────────────────
   Discover band — sits BELOW the main grid. Holds the trending / new /
   bundle rails so they support the catalog instead of outshouting it.
   Visually quieter: top-divider, smaller text, less saturated background.
   ───────────────────────────────────────────────────────────────────── */
.cat-discover-band{
  max-width: 1280px;
  margin: 32px auto 24px;
  padding: 24px clamp(16px, 4vw, 40px) 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cat-discover-eyebrow{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-faint, rgba(255,255,255,0.40));
  margin-bottom: 14px;
  text-align: center;
}

/* Slim rail variant (Trending / New): horizontal-scroll strip of mini
   cards. Stays visually below the prime course grid. */
.cat-rail--slim{
  margin-bottom: 22px;
  padding: 0;
}
.cat-rail--slim .cat-rail-head{
  margin-bottom: 10px;
  padding: 0 4px;
}
.cat-rail--slim .cat-rail-title{
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
}
.cat-rail--slim .cat-rail-emoji{ font-size: 1em; }

.cat-rail-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
@media (max-width: 880px){
  .cat-rail-strip{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .cat-rail-strip::-webkit-scrollbar{ height: 6px; }
  .cat-rail-strip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.10); border-radius: 3px; }
  .cat-rail-mini{ flex: 0 0 220px; scroll-snap-align: start; }
}

.cat-rail-mini{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text, #fff);
  text-decoration: none;
  transition: background var(--dur-fast, 140ms),
              border-color var(--dur-fast, 140ms),
              transform var(--dur-fast, 140ms);
  min-width: 0;
}
.cat-rail-mini:hover{
  background: rgba(255,255,255,0.05);
  border-color: rgba(233,69,96,0.30);
  transform: translateX(2px);
}
.cat-rail-mini-emoji{
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(233,69,96,0.10), rgba(245,197,24,0.06));
  border: 1px solid rgba(255,255,255,0.05);
}
.cat-rail-mini-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.cat-rail-mini-title{
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cat-rail-mini-meta{
  font-size: 11.5px;
  color: rgba(255,255,255,0.50);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-rail-mini-price{
  color: var(--gold, #f5c518);
  font-weight: 700;
}
.cat-rail-mini-price.is-free{ color: #7be4a3; }
.cat-rail-mini-dot{ opacity: 0.5; }

/* ─────────────────────────────────────────────────────────────────────
   Browse toolbar — categories + filters in one consolidated section
   so the page doesn't have a giant gap between rails and the grid.
   ───────────────────────────────────────────────────────────────────── */
.cat-browse{
  margin: 12px auto 24px;
  padding: 18px clamp(16px, 3vw, 28px) 16px;
  max-width: 1280px;
  border: 1px solid var(--glassBorder, rgba(255,255,255,0.08));
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(233,69,96,0.04), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(245,197,24,0.03), transparent 50%),
    rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
}
.cat-browse-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.cat-browse-eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint, rgba(255,255,255,0.50));
}
.cat-browse-count{
  font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.65));
  font-weight: 500;
}
.cat-browse-row{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cat-browse-cats{
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
/* Override the older .cat-pills bottom-padding rule which left dead space */
.cat-browse-cats .cat-pill{ margin: 0; }
.cat-browse-filters{ row-gap: 8px; }
.cat-browse-divider{
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.10);
  margin: 0 4px;
  flex-shrink: 0;
}
.cat-browse-clear{
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #e94560);
  text-decoration: underline;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background var(--dur-fast, 140ms);
}
.cat-browse-clear:hover{
  background: rgba(233,69,96,0.10);
}

/* Make the sort select align nicely with chips inside the toolbar */
.cat-browse-filters .cat-sort{
  margin-left: auto;
}

@media (max-width: 760px){
  .cat-browse{ padding: 14px 14px 12px; border-radius: 14px; }
  .cat-browse-row{ gap: 6px; }
  .cat-browse-divider{ display: none; }
  .cat-browse-filters .cat-sort{ margin-left: 0; }
}

/* Subtle stagger entrance for grid cards */
@media (prefers-reduced-motion: no-preference){
  .cat-grid > .cat-card{
    animation: catCardIn 360ms cubic-bezier(.2,.7,.2,1) backwards;
  }
  .cat-grid > .cat-card:nth-child(1){ animation-delay: 0ms; }
  .cat-grid > .cat-card:nth-child(2){ animation-delay: 40ms; }
  .cat-grid > .cat-card:nth-child(3){ animation-delay: 80ms; }
  .cat-grid > .cat-card:nth-child(4){ animation-delay: 120ms; }
  .cat-grid > .cat-card:nth-child(5){ animation-delay: 160ms; }
  .cat-grid > .cat-card:nth-child(6){ animation-delay: 200ms; }
  .cat-grid > .cat-card:nth-child(7){ animation-delay: 240ms; }
  .cat-grid > .cat-card:nth-child(8){ animation-delay: 280ms; }
  .cat-grid > .cat-card:nth-child(n+9){ animation-delay: 320ms; }
}
@keyframes catCardIn{
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}