/* ============================================================
   ALL CAKES — a working catalog: sticky search, filter chips,
   dense grid, result count. Deliberately more utilitarian than
   the home page — this page's job is to help people find one
   cake fast out of 80+.
   ============================================================ */

.catalog-hero{
  background:var(--choc); color:var(--cream);
  padding:44px 28px 30px;
}
.catalog-hero .wrap{ max-width:var(--maxw); margin:0 auto; }
.catalog-hero h1{ font-size:clamp(1.8rem, 4vw, 2.6rem); font-style:italic; color:var(--cream); }
.catalog-hero p{ color:#D9C9B8; margin-top:8px; font-size:0.95rem; }

.search-bar{
  position:sticky; top:77px; z-index:150;
  background:var(--cream); border-bottom:1px solid var(--line);
  padding:16px 28px;
}
.search-inner{ max-width:var(--maxw); margin:0 auto; }
.search-input-row{
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border:1.5px solid var(--line); border-radius:14px;
  padding:12px 16px;
}
.search-input-row svg{ width:18px; height:18px; flex-shrink:0; color:var(--choc-soft); }
.search-input-row input{
  border:none; outline:none; background:none; font-family:inherit; font-size:1rem;
  width:100%; color:var(--choc);
}
.search-input-row input::placeholder{ color:#B7A793; }

.chip-row{
  display:flex; gap:8px; overflow-x:auto; margin-top:14px; padding-bottom:4px;
  scrollbar-width:thin;
}
.filter-chip{
  flex:0 0 auto; background:var(--paper); border:1.5px solid var(--line); border-radius:999px;
  padding:8px 16px; font-size:0.84rem; font-weight:600; color:var(--choc-soft);
  transition:all .15s ease;
}
.filter-chip.active{ background:var(--berry); border-color:var(--berry); color:#fff; }
.filter-chip:hover{ transform:translateY(-1px); }

.result-count{
  max-width:var(--maxw); margin:20px auto 0; padding:0 28px;
  font-size:0.86rem; color:var(--choc-soft); font-weight:600;
}
.catalog-grid-wrap{ max-width:var(--maxw); margin:0 auto; padding:16px 28px 70px; }

.no-results{
  text-align:center; padding:70px 20px; color:var(--choc-soft);
}
.no-results div.emoji{ font-size:2.4rem; margin-bottom:14px; }

.back-to-top{
  position:fixed; bottom:26px; right:26px; z-index:80;
  background:var(--choc); color:var(--cream); border:none; border-radius:50%;
  width:48px; height:48px; font-size:1.2rem; display:none;
  align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(61,43,31,0.25);
}
.back-to-top.show{ display:flex; }

@media(max-width:760px){
  .search-bar{ top:69px; }
}