:root{--bg:#f6f3ee;--panel:#fbfaf7;--ink:#2b2824;--ink-soft:#6d665c;--line:#e4ddd1;--accent:#9c7a47;--accent-soft:#f1e8da;--danger:#a2402f;--radius:12px;--sidebar-w:340px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);overflow:hidden}button{font:inherit;color:inherit}.app{grid-template-columns:var(--sidebar-w) 1fr;height:100vh;display:grid}.sidebar{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;min-height:0;display:flex}.sidebar-header{padding:22px 22px 14px}.brand{letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-size:11px;font-weight:600}.sidebar-header h1{letter-spacing:-.01em;margin:0;font-size:21px;font-weight:600}.lede{color:var(--ink-soft);margin:6px 0 0;font-size:13.5px;line-height:1.45}.product-list{flex:1;align-content:start;gap:10px;margin:0;padding:6px 14px 14px;list-style:none;display:grid;overflow:hidden auto}.sidebar-footer{color:var(--ink-soft);border-top:1px solid var(--line);padding:12px 22px 16px;font-size:12px}.filters{gap:8px;margin-top:12px;display:grid}.filter-rows{gap:5px;display:grid}.search{width:100%;font:inherit;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:99px;outline:none;padding:8px 12px;font-size:13.5px}.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.filter-toggle{display:none}.chip-row{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.chip-label{width:46px;color:var(--ink-soft);font-size:11px}.chip{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:99px;padding:4px 9px;font-size:11.5px}.chip span{color:var(--ink-soft);font-size:10.5px}.chip:hover{border-color:#cdbfa9}.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}.chip.is-active span{color:#ffffffb3}.product-card[hidden]{display:none}.product-list.is-empty:after{content:"Geen lijsten gevonden";color:var(--ink-soft);padding:12px 8px;font-size:13px}.product-card{position:relative}.card-hit{text-align:left;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#fff;grid-template-columns:88px 1fr;gap:10px;width:100%;padding:8px;transition:border-color .15s,box-shadow .15s,transform .15s;display:grid}.card-hit:hover{border-color:#cdbfa9;box-shadow:0 4px 14px #3c2d1912}.card-hit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.is-selected .card-hit{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 6px 18px #9c7a4729;background:#fffdf9}.card-media{aspect-ratio:1;background:#ece8e1;border-radius:8px;display:block;overflow:hidden}.card-media img{object-fit:cover;width:100%;height:100%;display:block}.card-body{flex-direction:column;min-width:0;display:flex}.card-hit>*{min-width:0}.card-top{justify-content:space-between;align-items:center;gap:6px;display:flex}.card-code{letter-spacing:.01em;font-size:15px;font-weight:650}.card-badges{gap:4px;display:flex}.badge{background:var(--accent-soft);color:#7a5c30;border-radius:99px;padding:2px 6px;font-size:10px;font-weight:600}.card-size{font-variant-numeric:tabular-nums;margin-top:2px;font-size:14px}.card-meta{color:var(--ink-soft);margin-top:1px;font-size:11.5px}.card-note{color:#8a5a2b;margin-top:2px;font-size:10.5px}.card-bottom{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:6px 8px;margin-top:auto;display:flex}.card-profile{flex:none;width:72px;height:40px;display:block}.card-cta{border:1px solid var(--line);white-space:nowrap;border-radius:99px;margin-left:auto;padding:5px 9px;font-size:11.5px;font-weight:600}.is-selected .card-cta{background:var(--accent);border-color:var(--accent);color:#fff}.is-loading .card-cta{opacity:.55}.card-error{color:var(--danger);margin:4px 4px 0;font-size:12px}.stage{min-width:0;min-height:0;position:relative}.viewport{position:absolute;inset:0}.viewport canvas{cursor:grab;touch-action:none;display:block}.viewport canvas:active{cursor:grabbing}.info-panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);background:#fbfaf7eb;border:1px solid #e4ddd1e6;align-items:center;gap:16px;padding:14px 16px;display:flex;position:absolute;top:18px;right:18px;box-shadow:0 8px 28px #3228191a}.info-panel[hidden]{display:none}.info-panel p{margin:0}.info-label{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-size:11px}.info-code{font-size:22px;font-weight:650;margin-top:2px!important}.info-size{font-variant-numeric:tabular-nums;font-size:15px}.info-meta{color:var(--ink-soft);font-size:12px;margin-top:4px!important}.info-note{color:#8a5a2b;max-width:230px;font-size:11px;line-height:1.35;margin-top:6px!important}.info-note[hidden]{display:none}.info-profile{text-align:center;margin:0}.info-profile canvas{border:1px solid var(--line);background:#fff;border-radius:8px;width:190px;height:118px;display:block}.info-profile figcaption{color:var(--ink-soft);margin-top:4px;font-size:10.5px}.view-controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fbfaf7eb;border:1px solid #e4ddd1e6;border-radius:99px;gap:6px;padding:5px;display:flex;position:absolute;bottom:18px;left:18px;box-shadow:0 6px 20px #32281914}.view-controls button{cursor:pointer;background:0 0;border:0;border-radius:99px;padding:8px 14px;font-size:13px}.view-controls button:hover{background:var(--accent-soft)}.view-controls .reset{background:var(--ink);color:#fff}.view-controls .reset:hover{background:#45403a}.hint{color:#2b28249e;pointer-events:none;margin:0;font-size:12px;position:absolute;bottom:22px;right:18px}.status{background:var(--ink);color:#fff;border-radius:99px;padding:8px 14px;font-size:13px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.status.is-error{background:var(--danger)}@media (width<=720px){.app{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:100dvh}.stage{grid-row:1}.sidebar{border-right:0;border-top:1px solid var(--line);grid-row:2;min-width:0}.sidebar-header{padding:8px 10px 4px}.sidebar-header h1,.lede,.sidebar-footer{display:none}.filters{grid-template-columns:1fr auto;gap:6px;margin-top:0}.search{padding:7px 12px;font-size:16px}.filter-toggle{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:99px;padding:0 14px;font-size:13px;display:block}.filters.is-open .filter-toggle{background:var(--ink);border-color:var(--ink);color:#fff}.filter-rows{grid-column:1/-1;display:none}.filters.is-open .filter-rows{display:grid}.chip-row{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}.chip-row::-webkit-scrollbar{display:none}.chip,.chip-label{flex:none}.product-list{scroll-snap-type:x proximity;gap:8px;padding:4px 10px 10px;display:flex;overflow:auto hidden}.product-card{scroll-snap-align:start;flex:0 0 128px}.card-hit{grid-template-columns:1fr;gap:5px;padding:6px}.card-media{aspect-ratio:4/3}.card-code{font-size:13.5px}.card-size{font-size:12px}.card-meta{font-size:10.5px}.card-badges .badge{padding:1px 5px;font-size:9px}.card-bottom{display:none}.card-error{font-size:10.5px}.info-panel{gap:10px;padding:8px 10px;top:auto;bottom:8px;right:8px}.info-label,.info-profile figcaption{display:none}.info-code{font-size:16px;margin-top:0!important}.info-size{font-size:12.5px}.info-meta{font-size:11px;margin-top:2px!important}.info-note{max-width:140px;font-size:10px}.info-profile canvas{width:104px;height:66px}.view-controls{padding:3px;bottom:8px;left:8px}.view-controls button{padding:6px 11px;font-size:12px}.view-controls button:not(.reset),.hint{display:none}.status{text-align:center;border-radius:12px;max-width:calc(100% - 16px);font-size:12px;top:auto;bottom:96px}}.debug-panel{color:#e7e9ee;background:#14161ae6;border-radius:10px;width:560px;max-height:calc(100% - 100px);padding:12px 14px;font:12px/1.4 ui-monospace,Cascadia Mono,Consolas,monospace;position:absolute;top:18px;left:18px;overflow:auto}.debug-panel h3{color:#ffcf6e;margin:0 0 8px;font-size:13px}.debug-panel table{border-collapse:collapse;width:100%}.debug-panel th{text-align:left;color:#9aa3b2;white-space:nowrap;vertical-align:top;padding:1px 10px 1px 0;font-weight:500}.debug-panel td{word-break:break-all;padding:1px 0}.debug-panel .warn{color:#ffb4a2;padding-left:16px}.debug-panel canvas{background:#f6f3ee;border-radius:6px;width:520px;height:300px;margin:10px 0 6px;display:block}.debug-panel label{margin-right:14px}.debug-panel .hint{color:#9aa3b2;margin-top:6px;position:static}