/* ==========================================================
   CATALOG - tombol kategori, judul katalog, grid & kartu produk
   Kategori: app/config/categories.php
   Produk  : app/data/products.php
   ========================================================== */
#katalog{margin-top:44px}

/* tombol kategori */
.pills{display:flex;gap:10px;overflow-x:auto;padding:2px 0 26px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:500;font-size:13px;white-space:nowrap}
.pill.on{background:linear-gradient(135deg,#4678de,#2a52b8);border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(47,95,207,.25)}

/* kotak judul katalog */
.catalog-head{display:flex;align-items:center;gap:14px;margin:0 0 28px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:18px}
.catalog-head h2{margin:0;font-size:18px;font-weight:800}
.catalog-head p{margin:0;font-size:13px;color:var(--mut)}
.catalog-head-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-l);color:var(--brand-d)}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
.empty{display:none;padding:40px 0;text-align:center;color:var(--mut)}

/* kartu produk (padding 14px rata semua sisi) */
.grid .card{display:flex;flex-direction:column;gap:6px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.card h3{margin:6px 4px 0;font-size:14px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.thumb span{font-size:56px;font-weight:800;color:#fff}
.thumb img{width:100%;height:100%;object-fit:cover}

.desc{margin:0 4px;font-size:12.5px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:nowrap;gap:2px 8px;margin:0 4px;font-size:11.5px;white-space:nowrap;overflow:hidden;color:var(--mut)}
.stars{color:var(--star)}
.price{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:2px 6px;margin:6px 4px 8px;font-size:15px;font-weight:800;white-space:nowrap}
.price em{font-style:normal;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--brand-l);color:var(--brand-d)}
/* "Sisa N": stok menipis, warna hangat supaya cepat terlihat */
.badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.price em.left{background:#fff3e0;color:#b45309}
:root[data-theme="dark"] .price em.left{background:#3a2a12;color:#fbbf24}

/* tombol BELI + favorit */
.grid .card-actions{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.grid .card-actions .btn{flex:1;letter-spacing:.08em}
.grid .fav{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;line-height:0}
.grid .fav svg{display:block;margin:0}
.fav[aria-pressed=true]{color:#e11d48}
.fav[aria-pressed=true] svg{fill:#e11d48;stroke:#e11d48}

@media (min-width:700px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px}
}
@media (min-width:960px){
  #katalog{margin-top:52px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
@media (min-width:1200px){
  .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ukuran lebih besar di layar >= 700px */
@media (min-width:700px){
  .card h3{font-size:15px}
  .meta{font-size:12px;gap:2px 12px}
  .price{font-size:17px}
  .price em{font-size:11px;padding:2px 8px}
}
/* layar sangat kecil (< 360px): sembunyikan bintang supaya baris tetap 1 baris & sejajar */
@media (max-width:359px){
  .stars{display:none}
  .price{font-size:14px}
}

/* ==========================================================
   ANIMASI katalog (otomatis nonaktif kalau pengguna pilih "kurangi gerakan")
   ========================================================== */
/* muncul saat di-scroll (kelas .reveal/.in dipasang oleh js/modules/reveal.js) */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.js .card.reveal{opacity:0;translate:0 18px;transition:opacity .55s ease var(--d,0ms),translate .55s ease var(--d,0ms),transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.js .card.reveal.in{opacity:1;translate:0 0}

/* gambar produk membesar pelan saat kartu di-hover */
.thumb img,.thumb span{transition:transform .45s ease}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);border-color:#c9d6f2;box-shadow:0 14px 30px rgba(11,23,54,.10)}
  .card:hover .thumb img,.card:hover .thumb span{transform:scale(1.07)}
  .fav:hover{background:#fff1f3;border-color:#fecdd3}
  .pill:not(.on):hover{border-color:#c9d6f2;background:var(--brand-l);transform:translateY(-1px)}
}
.card .btn:active{transform:scale(.97)}
.pill{transition:background .15s,color .15s,border-color .15s,transform .15s}

/* hati berdenyut saat difavoritkan */
.fav{transition:transform .15s,background .15s,border-color .15s}
.fav[aria-pressed=true] svg{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.3)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .js .card.reveal{opacity:1;translate:none}
  .card:hover,.card:hover .thumb img,.card:hover .thumb span{transform:none}
  .fav[aria-pressed=true] svg{animation:none}
}
/* rating, keterangan harga, kartu stok habis */
.rate{display:inline-flex;align-items:center;gap:3px;font-weight:600;color:var(--ink)}
.price-main{display:flex;flex-direction:column;line-height:1.25}
.price-main small{font-size:10.5px;font-weight:500;color:var(--mut)}
.card.soldout{filter:grayscale(1);opacity:.55;pointer-events:none;user-select:none}
.card.soldout:hover{transform:none;box-shadow:none;border-color:var(--line)}
.card.soldout .price-main{color:var(--mut)}
.was{margin-left:4px;font-weight:500;color:var(--mut);text-decoration:line-through}
.variant strong .was{margin:0 6px 0 0;font-size:.8em}
.card-actions .btn:disabled{background:var(--line);color:var(--mut);text-shadow:none;box-shadow:none;cursor:not-allowed;transform:none;filter:none}