/* Theme variables */
:root{--bg:#f8fafc;--card:#fff;--text:#0f172a;--muted:#64748b;--accent:#2563eb;--border:#e2e8f0;--chip:#eef2ff;--chiptext:#3730a3}

/* Reset-ish */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}
header{position:sticky;top:0;z-index:40;background:rgba(248,250,252,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:clamp(28px,6vw,64px);width:auto;display:block}
nav a{color:var(--muted);text-decoration:none;margin-right:10px}
nav a:hover{color:var(--text)}

/* Controls */
.input,select{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.btn{border:1px solid var(--border);background:#fff;padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.muted{color:var(--muted)}

/* Category chip bar with animated selector */
.cat-bar{position:relative;display:flex;gap:8px;flex-wrap:wrap;padding:8px;border:1px solid rgba(37,99,235,.25);border-radius:14px;background:#fff}
.cat-chip{position:relative;z-index:3;padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:600;white-space:nowrap;color:#1f2937}
.cat-chip:hover{color:#0b255f}
.cat-chip[data-active="true"]{color:#0b255f}
.cat-selector{position:absolute;z-index:2;top:8px;height:34px;border-radius:999px;background:rgba(37,99,235,.18);border:1px solid rgba(37,99,235,.50);box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);transition:all .25s cubic-bezier(.22,1,.36,1);will-change:left,width}

/* Product grid */
.grid{columns:300px;column-gap:16px;margin-top:14px}
.card{break-inside:avoid;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin:0 0 16px 0;box-shadow:0 1px 0 rgba(15,23,42,.02)}
.card img{width:100%;display:block;background:#f1f5f9;aspect-ratio:4/3;object-fit:cover}
.pad{padding:14px}
.title{font-weight:700;line-height:1.25;margin:0 0 6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip{background:var(--chip);color:var(--chiptext);padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* Responsive */
@media(max-width:720px){.grid{columns:1}}