/* Catalog page styles */

.search { position: relative; display:flex; align-items:center; }
.search__input { width:100%; padding: 12px 36px 12px 12px; border-radius: 12px; border:1px solid var(--bd2); background: var(--panel-2); color: var(--fg); }
.search__input:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(45, 92, 255, 0.3); }
.search__icon { position:absolute; right:10px; color: var(--muted); }

.toolbar { display:flex; align-items:center; gap:10px; margin-top:10px; }

.filters-panel { margin-top: 12px; }
.filters { display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.filters-panel:not(.open) { display:none; }

#grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }

.card--wide { display:grid; grid-template-columns: 1fr; }
.card--wide .media { position:relative; aspect-ratio: 16/10; background:#0b0f14; }
.card--wide .media img { width:100%; height:100%; object-fit:cover; }
.card--wide .media .fav { position:absolute; right:8px; top:8px; background:transparent; color:#fff; border:none; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; padding:0; }
.card--wide .media .fav svg { width:22px; height:22px; display:block; }
.card--wide .media .fav.is-active svg { fill: #ff4768; stroke: #ff4768; }
.card--wide .box { padding: 12px 14px; }
.card--wide .title { margin: 0 0 6px; font-weight: 700; font-size: 16px; }
.card--wide .meta { color: var(--muted); font-size: 13px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card--wide .badges { display:flex; gap:6px; margin-bottom:10px; }
.badge { border:1px solid var(--bd); background: rgba(255,255,255,.04); border-radius:999px; padding: 4px 8px; font-size: 12px; color: #fff; }
.card--wide .actions { display:flex; gap:10px; }

/* Softer card appearance */
.card { border-color: var(--bd); }
.card:hover { border-color: var(--accent); }

#toTop.fab { position: fixed; right: 14px; bottom: 16px; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--panel); border:1px solid var(--bd2); box-shadow: var(--shadow); cursor: pointer; }
#grid .skeleton .ph.lg{ aspect-ratio: 16/10; }