/* ══════════════════════════
   CATALOG — extends style.css, same palette/vars
══════════════════════════ */
.catalog-hero { background: var(--g-hero); padding: 130px 0 44px; position: relative; overflow: hidden; }
.catalog-hero .hero-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, black 10%, transparent 80%); }
.catalog-hero h1 { font-size: clamp(1.9rem,3.6vw,2.7rem); font-weight: 800; color: #fff; margin-bottom: 10px; position: relative; z-index: 2; }
.catalog-hero p { font-size: .95rem; color: rgba(255,255,255,.6); max-width: 580px; line-height: 1.7; position: relative; z-index: 2; }

.category-pills-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 28px 0 0; }
.pill-filter { position: relative; cursor: pointer; user-select: none; }
.pill-filter input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pill-filter:has(input:checked) { background: var(--g-brand); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(240,78,26,.35); }
.pill-filter:has(input:checked):hover { color: #fff; }

.catalog-layout { display: grid; grid-template-columns: 272px 1fr; gap: 40px; align-items: start; padding: 48px 0 110px; }

.catalog-sidebar { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 4px 14px 4px 0; }
.catalog-sidebar::-webkit-scrollbar { width: 4px; }
.catalog-sidebar::-webkit-scrollbar-thumb { background: var(--lite); border-radius: 3px; }
.catalog-sidebar::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.filter-group { border-bottom: 1.5px solid #EAE5F5; padding: 18px 0; }
.filter-group:first-child { padding-top: 0; }
.filter-group:last-child { border-bottom: none; }
.fg-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; font-family: var(--f-head); font-weight: 700; font-size: .87rem; color: var(--ink); padding: 0; }
.fg-chevron { transition: transform .2s ease; color: var(--muted); font-size: .68rem; }
.filter-group.open .fg-chevron { transform: rotate(180deg); }
.fg-body { display: none; flex-direction: column; gap: 11px; margin-top: 16px; }
.filter-group.open .fg-body { display: flex; }
.fg-sub-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lite); margin: 4px 0 -2px; }

.filter-item { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--ink2); cursor: pointer; line-height: 1.3; }
.filter-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--fire); cursor: pointer; flex-shrink: 0; }

.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }
.catalog-count { font-size: .87rem; color: var(--muted); }
.catalog-count strong { color: var(--ink); }
.catalog-clear { background: none; border: 1.5px solid #EAE5F5; border-radius: 8px; padding: 8px 16px; font-size: .78rem; font-weight: 600; color: var(--fire); cursor: pointer; transition: border-color .2s; }
.catalog-clear:hover { border-color: var(--fire); }

.catalog-sentinel { height: 1px; }
.catalog-loading { display: none; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--muted); font-size: .85rem; }
.catalog-loading.active { display: flex; }
.catalog-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #EAE5F5; border-top-color: var(--fire); animation: cat-spin .7s linear infinite; }
@keyframes cat-spin { to { transform: rotate(360deg); } }
.catalog-empty { display: none; color: var(--muted); font-size: .92rem; padding: 60px 0; text-align: center; }
.catalog-empty.active { display: block; }
.catalog-end { display: none; text-align: center; color: var(--lite); font-size: .78rem; padding: 30px 0 0; }
.catalog-end.active { display: block; }

@media (max-width: 1024px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar { position: static; max-height: none; overflow-y: visible; padding-right: 0; margin-bottom: 8px; }
}

@media (max-width: 480px) {
  .fg-head { font-size: .82rem; }
  .filter-item { font-size: .78rem; gap: 8px; }
  .filter-item input[type=checkbox] { width: 15px; height: 15px; }
  .fg-sub-label { font-size: .62rem; }
}