:root{
    --bg:#f7f7f8; --surface:#fff; --ink:#0f172a; --muted:#475569;
    --line:#e5e7eb; --chip:#eef2f7; --ring:#3b82f6; --accent:#0ea5e9;
    --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.08);
}
html { color-scheme: light; }
body{ margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; background:var(--bg); color:var(--ink); }
.page-wrap{ max-width:1100px; margin:2rem auto; padding:0 1rem; }

/* Header */
.header{
    border:1px solid var(--line); border-radius:var(--radius);
    background:linear-gradient(180deg,#0f172a 0%,#1f2937 100%);
    color:#fff; padding:1.25rem 1.25rem 1rem; margin-bottom:1rem; box-shadow:var(--shadow);
    position: unset !important;
}
.header h1{ margin:0 0 .25rem; font-size:1.75rem; }
.header p{ margin:.25rem 0 0; opacity:.9; }

/* Toolbar */
.toolbar{
    display:flex; gap:.75rem; align-items:center; flex-wrap:wrap;
    margin:1rem 0 1.25rem;
}
.select, .input{
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    border-radius:10px; padding:.55rem .7rem; font-size:.95rem; outline:none;
}
.input{ min-width:240px; }
.select:focus, .input:focus{ border-color:var(--ring); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.btn{
    display:inline-block; border-radius:10px; padding:.55rem .85rem; font-weight:600;
    border:1px solid #111; background:#fff; color:#111; text-decoration:none; margin-left: auto;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s;
}
.btn:hover{ background:#111; color:#fff; text-decoration: underline; }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.spacer{ flex:1 1 auto; }
.muted{ color:#64748b; font-size:.9rem; }

/* Section heading */
.cat-block{ margin:2rem 0 2.5rem; }
.cat-head{
    display:flex; align-items:center; gap:.75rem; margin:.25rem 0 .75rem;
}
.cat-title{ margin:0; font-size:1.35rem; }
.cat-count{ color:#64748b; font-size:.95rem; }

/* Cards */
.cards{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
    gap:14px; list-style:none; padding:0; margin:0;
}
.card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; transition:transform .15s ease, box-shadow .15s ease; position:relative;
    will-change: transform;
    cursor: pointer; /* clickable */
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.card h3{ margin:0 0 .35rem; font-size:1.05rem; color:var(--ink); }
.card p.desc{ margin:0 0 .75rem; color:var(--muted); min-height:2.6em; }

.card-media{
    margin: -16px -16px 12px;
    border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 8px 8px;
    overflow: hidden; position: relative;
    aspect-ratio: 16 / 9; background:#eef2f7;
}
.card-img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .35s ease, filter .25s ease;
}
.card:hover .card-img{ transform: scale(1.03); }
.price-badge{
    position:absolute; top:10px; right:10px; z-index:2;
    background: rgba(0,0,0,.65); color:#fff; backdrop-filter: blur(4px);
    padding:.25rem .5rem; border-radius:10px; font-size:.85rem;
}
.card-img.placeholder{
    display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.8rem;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.ph-0,.ph-1,.ph-2,.ph-3,.ph-4,.ph-5{ background:black; }

.meta-row{
    display:flex; align-items:center; gap:.5rem;
    margin-bottom:.75rem; position:relative; z-index:2;
}
.badge{
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--chip); border:1px solid var(--line);
    border-radius:999px; padding:.2rem .55rem; font-size:.85rem; color:var(--ink);
}
.badge .icon{ width:14px; height:14px; display:inline-block; vertical-align:middle; }

.empty{ color:#64748b; text-align:center; margin:2rem 0; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }