/* woninginrichter-stalen: React Bits Pro Components/draggable-grid (origineel gecompileerd), met stalenset. */
.msm-woninginrichter-stalen{--st-p:var(--m-primary,#2f5d50);--st-bg:var(--m-bg,#ece6dc);--st-ink:var(--m-ink,#1f2421);--st-s:var(--m-surface,#f8f5ef);--st-mu:var(--m-muted,#66655b);--st-l:var(--m-line,#d6cdbf);--st-a:var(--m-accent2,#b9824f);--st-r:var(--m-radius,14px);--st-table:color-mix(in srgb,var(--st-a) 22%,var(--st-s));position:relative;box-sizing:border-box;scroll-margin-top:112px;padding:clamp(64px,8vw,112px) 0;background:var(--st-bg);color:var(--st-ink);font-family:var(--m-font-body,"Hanken Grotesk","Segoe UI",sans-serif);font-size:16px;line-height:1.55}
.msm-woninginrichter-stalen *{box-sizing:border-box}
.msm-woninginrichter-stalen [hidden]{display:none!important}
.msm-woninginrichter-stalen .st-wrap{width:min(1240px,100% - 32px);margin:0 auto}
.msm-woninginrichter-stalen .st-head{max-width:760px;margin-bottom:clamp(24px,3vw,40px)}
.msm-woninginrichter-stalen .st-kicker{margin:0 0 10px;color:var(--st-p);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.msm-woninginrichter-stalen .st-title{margin:0;font:400 clamp(36px,5.2vw,64px)/1.02 var(--m-font-display,"Instrument Serif",Georgia,serif);letter-spacing:-.015em}
.msm-woninginrichter-stalen .st-intro{margin:16px 0 0;max-width:60ch;color:var(--st-mu);font-size:17px}
.msm-woninginrichter-stalen .st-body{display:grid;gap:20px;align-items:start}
.msm-woninginrichter-stalen .st-table{position:relative;border-radius:calc(var(--st-r) * 1.6);background:var(--st-table);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-a) 30%,var(--st-s))}
.msm-woninginrichter-stalen .st-table.is-drag{height:clamp(420px,52vw,600px);overflow:hidden}
.msm-woninginrichter-stalen .st-grid{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.msm-woninginrichter-stalen .st-tile{position:relative;display:flex;flex-direction:column;gap:2px;height:100%;padding:8px 8px 12px;border:1px solid var(--st-l);border-radius:var(--st-r);background:var(--st-s);cursor:pointer}
.msm-woninginrichter-stalen .st-tile input{position:absolute;top:12px;right:12px;width:20px;height:20px;margin:0;accent-color:var(--st-p)}
.msm-woninginrichter-stalen .st-tile img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:calc(var(--st-r) * .7);background:color-mix(in srgb,var(--st-bg) 60%,var(--st-s));margin-bottom:6px}
.msm-woninginrichter-stalen .st-tile:has(input:checked){border-color:var(--st-p);box-shadow:inset 0 0 0 1px var(--st-p)}
.msm-woninginrichter-stalen .st-tile:has(input:focus-visible){outline:3px solid var(--st-p);outline-offset:2px}
.msm-woninginrichter-stalen .st-name{font-weight:700;font-size:15px;line-height:1.25}
.msm-woninginrichter-stalen .st-mat{font-size:13px;line-height:1.35;color:var(--st-mu)}
.msm-woninginrichter-stalen .st-drag{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.msm-woninginrichter-stalen .st-set{position:relative;padding:22px;border:1px solid var(--st-l);border-radius:calc(var(--st-r) * 1.4);background:var(--st-s)}
.msm-woninginrichter-stalen .st-set-title{margin:0;font:400 30px/1.1 var(--m-font-display,"Instrument Serif",Georgia,serif)}
.msm-woninginrichter-stalen .st-count{margin:6px 0 14px;font-size:14px;font-weight:600;color:var(--st-p);font-variant-numeric:tabular-nums}
.msm-woninginrichter-stalen .st-empty{margin:0 0 14px;padding:14px;border:1px dashed var(--st-l);border-radius:var(--st-r);font-size:14px;color:var(--st-mu)}
.msm-woninginrichter-stalen .st-picked{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.msm-woninginrichter-stalen .st-pick{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px;border:1px solid var(--st-l);border-radius:var(--st-r);background:var(--st-bg)}
.msm-woninginrichter-stalen .st-pick img{width:48px;height:48px;object-fit:contain;border-radius:8px;background:var(--st-s)}
.msm-woninginrichter-stalen .st-pick b{display:block;font-size:14px;line-height:1.25}
.msm-woninginrichter-stalen .st-pick span{display:block;font-size:12px;line-height:1.3;color:var(--st-mu)}
.msm-woninginrichter-stalen .st-remove{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:var(--st-ink);cursor:pointer}
.msm-woninginrichter-stalen .st-remove svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.msm-woninginrichter-stalen .st-remove:hover{background:var(--st-s)}
.msm-woninginrichter-stalen .st-btn{width:100%;min-height:48px;padding:12px 20px;border:0;border-radius:999px;background:var(--st-p);color:var(--st-s);font:700 15px/1 var(--m-font-body,"Hanken Grotesk","Segoe UI",sans-serif);cursor:pointer}
.msm-woninginrichter-stalen .st-btn:focus-visible,.msm-woninginrichter-stalen .st-remove:focus-visible{outline:3px solid var(--st-p);outline-offset:3px}
.msm-woninginrichter-stalen .st-msg{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--st-ink)}
.msm-woninginrichter-stalen .st-msg:empty{display:none}
.msm-woninginrichter-stalen .st-demo{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--st-mu)}
/* Originele CSS van draggable-grid, gescoped. */
.msm-woninginrichter-stalen .draggable-grid-container{overflow:hidden;transform-origin:center center;will-change:transform}
.msm-woninginrichter-stalen .draggable-grid-container.fixed-mode{position:fixed;width:100vw;height:100vh;top:0;left:0}
.msm-woninginrichter-stalen .draggable-grid-container.absolute-mode{position:absolute;inset:0;width:100%;height:100%}
.msm-woninginrichter-stalen .draggable-grid{position:absolute;width:max-content;height:max-content;display:flex;will-change:transform}
.msm-woninginrichter-stalen .draggable-grid.draggable{cursor:grab}
.msm-woninginrichter-stalen .draggable-grid.dragging{cursor:grabbing}
.msm-woninginrichter-stalen .draggable-grid-column{display:flex;flex-direction:column}
.msm-woninginrichter-stalen .draggable-grid-column.offset{margin-top:10vw}
.msm-woninginrichter-stalen .product{position:relative;aspect-ratio:1/1}
.msm-woninginrichter-stalen .product-inner{aspect-ratio:1/1;will-change:transform}
.msm-woninginrichter-stalen .product-image{position:absolute;width:100%;height:100%;object-fit:contain;will-change:transform;transition:transform .3s ease-in-out;user-select:none;-webkit-user-select:none;pointer-events:none}
.msm-woninginrichter-stalen .product:hover .product-image{transform:scale(1.05)}
.msm-woninginrichter-stalen .draggable-grid.dragging *{user-select:none;-webkit-user-select:none}
/* Eigen aanvulling: tegel als knop, naam bij hover en focus, gekozen met rand en vinkje. */
.msm-woninginrichter-stalen .product{border-radius:var(--st-r);outline:none}
.msm-woninginrichter-stalen .product-inner{position:relative;border-radius:var(--st-r);background:color-mix(in srgb,var(--st-s) 82%,transparent);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--st-ink) 45%,transparent)}
.msm-woninginrichter-stalen .product::before{content:attr(aria-label);position:absolute;left:8px;right:8px;bottom:8px;z-index:2;padding:6px 10px;border-radius:999px;background:var(--st-ink);color:var(--st-s);font-size:12px;font-weight:600;line-height:1.2;text-align:center;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.msm-woninginrichter-stalen .product:hover::before,.msm-woninginrichter-stalen .product:focus-visible::before,.msm-woninginrichter-stalen .product[aria-pressed="true"]::before{opacity:1;transform:none}
.msm-woninginrichter-stalen .product[aria-pressed="true"]::before{background:var(--st-p)}
.msm-woninginrichter-stalen .product:focus-visible .product-inner{outline:3px solid var(--st-ink);outline-offset:4px}
.msm-woninginrichter-stalen .product[aria-pressed="true"] .product-inner{box-shadow:0 0 0 3px var(--st-p),0 10px 24px -14px color-mix(in srgb,var(--st-ink) 45%,transparent)}
.msm-woninginrichter-stalen .product::after{content:"";position:absolute;top:10px;right:10px;z-index:2;width:26px;height:26px;border-radius:999px;background:var(--st-p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s;pointer-events:none}
.msm-woninginrichter-stalen .product[aria-pressed="true"]::after{opacity:1;transform:none}
@media (min-width:640px){.msm-woninginrichter-stalen .st-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){
.msm-woninginrichter-stalen .st-body{grid-template-columns:minmax(0,1fr) 340px;gap:24px}
.msm-woninginrichter-stalen .st-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.msm-woninginrichter-stalen .st-set{position:sticky;top:112px}
}
@media (prefers-reduced-motion:reduce){
.msm-woninginrichter-stalen .draggable-grid,.msm-woninginrichter-stalen .product-inner,.msm-woninginrichter-stalen .product-image,.msm-woninginrichter-stalen .product::before,.msm-woninginrichter-stalen .product::after{transition:none!important}
}