:root { --catalog-ink:#172033; --catalog-muted:#64748b; --catalog-primary:#2563eb; --catalog-green:#0f9f6e; --catalog-bg:#f5f7fb; }
* { box-sizing:border-box; }
body.catalog-page { min-height:100vh; margin:0; color:var(--catalog-ink); background:var(--catalog-bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.catalog-shell { max-width:1240px; margin:0 auto; padding:28px 20px 64px; }
.catalog-nav { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:56px; }
.catalog-brand { display:flex; align-items:center; gap:12px; color:var(--catalog-ink); text-decoration:none; font-weight:800; letter-spacing:-.02em; }
.catalog-brand img { width:42px; height:42px; object-fit:contain; border-radius:12px; box-shadow:0 8px 20px rgba(37,99,235,.16); }
.catalog-nav-actions { display:flex; gap:10px; flex-wrap:wrap; }
.catalog-hero { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:32px; margin-bottom:42px; }
.catalog-eyebrow { color:var(--catalog-primary); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.catalog-hero h1 { max-width:720px; margin:10px 0 14px; font-size:clamp(2.3rem,6vw,4.6rem); line-height:1.02; letter-spacing:-.055em; font-weight:850; }
.catalog-hero p { max-width:620px; color:var(--catalog-muted); font-size:1.08rem; line-height:1.7; }
.catalog-hero-panel { min-height:220px; padding:28px; border:1px solid rgba(37,99,235,.12); border-radius:28px; background:linear-gradient(145deg,#fff 0%,#eaf1ff 100%); box-shadow:0 20px 60px rgba(30,64,175,.1); }
.catalog-hero-panel .hero-icon { width:72px; height:72px; display:grid; place-items:center; margin-bottom:26px; border-radius:22px; color:#fff; background:linear-gradient(135deg,#2563eb,#7c3aed); font-size:2rem; }
.catalog-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.catalog-toolbar h2 { margin:0; font-size:1.25rem; font-weight:800; }
.catalog-search { max-width:320px; border:1px solid #dbe3ef; border-radius:12px; padding:11px 14px; background:#fff; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.catalog-card { display:flex; flex-direction:column; min-height:100%; overflow:hidden; border:1px solid #e4eaf2; border-radius:22px; background:#fff; box-shadow:0 10px 28px rgba(15,23,42,.05); transition:transform .2s ease,box-shadow .2s ease; }
.catalog-card:hover { transform:translateY(-5px); box-shadow:0 18px 42px rgba(15,23,42,.12); }
.catalog-card-media { height:190px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#edf3ff,#f8fafc); }
.catalog-card-media img { width:100%; height:100%; object-fit:cover; }
.catalog-card-media .fallback-icon { color:#7c3aed; font-size:3rem; }
.catalog-card-body { display:flex; flex:1; flex-direction:column; padding:22px; }
.catalog-card h3 { margin:0 0 8px; font-size:1.12rem; font-weight:800; }
.catalog-card p { flex:1; margin:0 0 18px; color:var(--catalog-muted); line-height:1.55; }
.catalog-price { margin-bottom:14px; color:var(--catalog-green); font-size:1.25rem; font-weight:850; }
.catalog-empty { grid-column:1/-1; padding:64px 20px; text-align:center; border:1px dashed #cbd5e1; border-radius:20px; color:var(--catalog-muted); background:#fff; }
.catalog-footer { margin-top:54px; color:var(--catalog-muted); font-size:.9rem; text-align:center; }
.catalog-modal .modal-content { overflow:hidden; border:0; border-radius:24px; }
.catalog-modal-image { width:100%; height:300px; object-fit:cover; background:#eef3ff; }
@media (max-width: 900px) { .catalog-hero { grid-template-columns:1fr; } .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .catalog-shell { padding:18px 14px 44px; } .catalog-nav { align-items:flex-start; margin-bottom:34px; } .catalog-nav-actions { justify-content:flex-end; } .catalog-nav-actions .btn { padding:.42rem .6rem; font-size:.82rem; } .catalog-hero { gap:18px; margin-bottom:30px; } .catalog-hero h1 { font-size:2.6rem; } .catalog-toolbar { align-items:stretch; flex-direction:column; } .catalog-search { max-width:none; } .catalog-grid { grid-template-columns:1fr; gap:16px; } .catalog-card-media { height:210px; } }