.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:24px}
.catalog-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;overflow:hidden}
.catalog-card h3,.catalog-card p{margin:0;overflow-wrap:anywhere}
.catalog-card>.row:last-child{margin-top:auto}
.catalog-cover{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:var(--primary-soft);display:grid;place-items:center}
.catalog-cover img{width:100%;height:100%;object-fit:cover;min-height:0}
.catalog-cover--qris{aspect-ratio:1;background:white}
.catalog-cover--qris img{object-fit:contain;padding:12px}
.catalog-intro{padding:clamp(28px,5vw,64px) 0 28px}
.catalog-intro h1{font-size:clamp(2.2rem,5vw,4rem);margin:14px 0}
.catalog-intro p{max-width:65ch;line-height:1.7}
.catalog-public{padding-bottom:48px}
.catalog-public .catalog-card{border:2px solid var(--ink,#25243a);border-radius:24px;box-shadow:4px 5px 0 var(--ink,#25243a)}
.catalog-public .catalog-search{max-width:620px;margin:16px 0 32px}
.catalog-number{font-family:monospace;font-size:clamp(1.1rem,4vw,1.6rem);overflow-wrap:anywhere}
.catalog-description{white-space:pre-wrap;line-height:1.7}
.catalog-gallery img{display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto}
.catalog-shortcuts{display:flex;flex-wrap:wrap;gap:12px;padding:18px 0}
[hidden]{display:none!important}
.catalog-media{position:relative;display:grid;place-items:center;width:100%;min-width:0;min-height:220px}
.catalog-cover>.catalog-media{height:100%;min-height:0}
.catalog-image-feedback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:var(--slate-500,#65758a);font-size:14px;line-height:1.6;min-height:220px;width:100%}
.catalog-cover .catalog-image-feedback{min-height:0;height:100%;font-size:13px}
.catalog-image-spinner{width:34px;height:34px;border:3px solid var(--pink-soft,#fce2ef);border-top-color:var(--primary,#c93e7b);border-radius:50%;animation:catalog-image-spin .8s linear infinite}
@keyframes catalog-image-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.catalog-image-spinner{animation:none;border-style:dotted}}