/* ==========================================================
   KallzStore — Katalog Produk
   ========================================================== */

.catalog-top{
  padding: 24px 0 0;
}
.search-bar{
  display:flex; align-items:center; gap:10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  max-width: 520px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-bar:focus-within{ border-color: var(--red); box-shadow: 0 0 0 3px rgba(225,29,46,.15); }
.search-bar input{
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: .92rem; width: 100%;
}
.search-bar input::placeholder{ color: var(--text-dim); }
.search-bar .ico{ color: var(--text-dim); }

.catalog-layout{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 28px 0 80px;
  align-items: start;
}

.sidebar{
  position: sticky; top: 88px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.sidebar h4{
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); margin-bottom: 12px; font-family: var(--font-body); font-weight: 700;
}
.cat-list{ display:flex; flex-direction:column; gap: 4px; }
.cat-item{
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px 12px; border-radius: 9px;
  font-size: .88rem; color: var(--text-dim);
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cat-item:hover{ color: var(--text); background: var(--surface-2); }
.cat-item.active{
  color: #fff; background: linear-gradient(180deg, var(--red-glow), var(--red));
  box-shadow: 0 6px 18px -8px rgba(225,29,46,.6);
}
.cat-item .n{
  font-size: .72rem; opacity: .75;
}

.catalog-head{
  display:flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px;
}
.catalog-head h2{ font-size: 1.3rem; font-weight: 700; }
.catalog-count{ font-size: .82rem; color: var(--text-dim); }

.product-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pcard{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  cursor: pointer;
}
.pcard:hover{
  transform: translateY(-4px);
  border-color: rgba(225,29,46,.45);
  box-shadow: 0 16px 32px -16px rgba(225,29,46,.35);
}
.pcard .badge{
  position: absolute; top: 16px; right: 16px;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 6px;
  background: var(--red-dim); color: var(--red-glow);
  text-transform: uppercase;
}
.pcard .icon-tile{ font-size: 1.4rem; }
.pcard h3{ font-size: 1rem; font-weight: 600; margin: 4px 0 2px; }
.pcard .cat-tag{ font-size: .74rem; color: var(--text-dim); margin-bottom: 14px; }
.pcard .price-row{
  display:flex; align-items:baseline; justify-content: space-between;
  padding-top: 14px; border-top: 1px dashed var(--border);
}
.pcard .price-label{ font-size: .72rem; color: var(--text-dim); }
.pcard .price{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.pcard .price .accent{ color: var(--red-glow); }

.pcard .hover-cta{
  position: absolute; inset: auto 22px 22px 22px;
  opacity: 0; translate: 0 6px;
  transition: opacity .2s ease, translate .2s ease;
  pointer-events: none;
}
.pcard:hover .hover-cta{ opacity: 1; translate: 0 0; pointer-events: auto; }
.pcard .price-row{ transition: opacity .2s ease; }
.pcard:hover .price-row{ opacity: 0; }

.empty-state{
  grid-column: 1 / -1;
  text-align:center; padding: 60px 20px;
  color: var(--text-dim);
}
.empty-state .glyph{ font-size: 2rem; margin-bottom: 10px; }

@media (max-width: 900px){
  .catalog-layout{ grid-template-columns: 1fr; }
  .sidebar{ position: static; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .product-grid{ grid-template-columns: 1fr; }
}