.catalog-hero{
  padding:9.5rem 0 1.4rem;
}

.back-link{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  margin-bottom:2rem;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}

.catalog-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-top:6px;
}

.catalog-intro-copy{
  width:min(100%,760px);
}

.catalog-subtitle{
  max-width:720px;
  margin:0 0 28px !important;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}

.catalog-filter{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:7px;
}

.catalog-filter .filter-btn{
  min-height:34px;
  padding:6px 13px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.catalog-count{
  flex:0 0 auto;
  margin:0 0 7px;
  font-size:13px;
  color:var(--muted);
}

.catalog-grid-section{
  padding-top:0 !important;
}

.catalog-grid{
  --bs-gutter-x:18px;
  --bs-gutter-y:18px;
}

.catalog-card{
  height:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
}

.catalog-card .template-shot{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
}

.catalog-card .template-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.catalog-card-body{
  padding:14px 15px 15px !important;
}

.catalog-card-category{
  display:block;
  margin-bottom:5px;
  font-size:12px;
  line-height:1.3;
  color:var(--muted);
}

.catalog-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.catalog-card-title{
  min-width:0;
  margin:0 !important;
  font-size:17px !important;
  line-height:1.2;
  font-weight:800;
}

.catalog-card-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.catalog-card-btn{
  height:30px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease;
}

.catalog-card-btn:hover{
  transform:translateY(-1px);
}

.catalog-card-btn-buy{
  background:var(--paper);
  color:var(--brand);
}

.catalog-card-btn-demo{
  background:transparent;
  color:var(--ink);
}

.catalog-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:2rem;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--card);
}

.template-placeholder{
  height:100%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#f1eef9,#e4dcf7);
  font-weight:800;
  color:var(--brand);
}

footer{
  border-top:1px solid var(--line);
}

footer a{
  color:inherit;
}

/* Dark mode */
html[data-theme="dark"] .catalog-hero,
html[data-theme="dark"] main{
  background:var(--bg);
  color:var(--ink);
}

html[data-theme="dark"] .catalog-card,
html[data-theme="dark"] .catalog-cta{
  background:var(--surface);
  border-color:var(--line);
}

html[data-theme="dark"] .template-placeholder{
  background:linear-gradient(145deg,#1c1730,#2b2147);
  color:#c9baf2;
}

html[data-theme="dark"] .catalog-card-btn-buy{
  background:#f7f5fb;
  color:var(--brand);
}

html[data-theme="dark"] .catalog-card-btn-demo{
  color:var(--ink);
}

@media(max-width:991.98px){
  .catalog-intro{
    align-items:flex-start;
  }
}

@media(max-width:767.98px){
  .catalog-hero{
    padding-top:7.5rem;
  }

  .catalog-intro{
    display:block;
  }

  .catalog-subtitle{
    margin-bottom:18px !important;
    font-size:14px;
  }

  .catalog-filter{
    overflow-x:auto;
    flex-wrap:nowrap;
    gap:6px;
    padding-bottom:.35rem;
  }

  .catalog-filter .filter-btn{
    min-height:32px;
    padding:6px 11px;
    font-size:11px;
  }

  .catalog-count{
    margin-top:14px;
  }

  .catalog-card-body{
    padding:13px 14px 14px !important;
  }

  .catalog-cta{
    align-items:flex-start;
    flex-direction:column;
  }

  .catalog-cta .btn{
    width:100%;
  }
}

@media(max-width:480px){
  .catalog-card-footer{
    align-items:flex-end;
  }

  .catalog-card-title{
    font-size:16px !important;
  }

  .catalog-card-btn{
    height:28px;
    min-height:28px;
    padding:0 9px;
    font-size:11px;
  }
}