/* woonwinkel-materialen: materialen in jouw licht.
   Vorm: React Bits Pro Blocks/card-8 (block-port: werkbalk van 36 px met teller en twee knoppen van 32 px,
   raster van paneelknoppen met buiten- en binnenpaneel, vlak van 96 px met vinkvak van 20 px, naam,
   soort en maat in kleine tabulaire tekst; overgangen 120 ms met ease (0.2, 0, 0, 1), tik 0,98).
   Daaronder de subsectie #adviesgesprek met het gedeelde boekingsvak. */
.msm-woonwinkel-materialen{--wm-p:var(--m-primary,#9a5237);--wm-bg:var(--m-bg,#dfddd8);--wm-ink:var(--m-ink,#252628);--wm-s:var(--m-surface,#f7f6f2);--wm-mu:var(--m-muted,#6b6d6e);--wm-a:var(--m-accent2,#c48a6e);--wm-l:var(--m-line,#c8c5be);--wm-ease:cubic-bezier(.2,0,0,1);position:relative;scroll-margin-top:112px;padding:64px 16px 0;background:var(--wm-s);color:var(--wm-ink);font-family:var(--m-font-body,"Manrope","Segoe UI",system-ui,sans-serif);font-size:16px;line-height:1.55}
.msm-woonwinkel-materialen *{box-sizing:border-box}
.msm-woonwinkel-materialen [hidden]{display:none!important}
.msm-woonwinkel-materialen .wm-wrap{width:min(1400px,100%);margin:0 auto}
@media (min-width:640px){.msm-woonwinkel-materialen{padding:80px 24px 0}}
@media (min-width:1024px){.msm-woonwinkel-materialen{padding:96px 32px 0}}

.msm-woonwinkel-materialen .wm-head{max-width:760px}
.msm-woonwinkel-materialen .wm-kicker{margin:0 0 12px;color:var(--wm-p);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.msm-woonwinkel-materialen .wm-title{margin:0;font:400 clamp(30px,5vw,60px)/1.05 var(--m-font-display,"Instrument Serif","Georgia",serif);letter-spacing:-.02em;text-wrap:balance}
.msm-woonwinkel-materialen .wm-intro{margin:16px 0 0;max-width:60ch;color:var(--wm-mu);font-size:17px;text-wrap:pretty}

/* drie stappen in gewone tekst met een cijfer ervoor */
.msm-woonwinkel-materialen .wm-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:clamp(32px,4vw,48px) 0 0;padding:0;list-style:none;counter-reset:none}
@media (min-width:768px){.msm-woonwinkel-materialen .wm-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.msm-woonwinkel-materialen .wm-step{display:flex;gap:16px;align-items:flex-start;padding-top:16px;border-top:1px solid var(--wm-l)}
.msm-woonwinkel-materialen .wm-stepnum{flex:none;font:400 32px/1 var(--m-font-display,"Instrument Serif","Georgia",serif);color:var(--wm-p);font-variant-numeric:tabular-nums}
.msm-woonwinkel-materialen .wm-steptitle{margin:4px 0 6px;font-size:17px;font-weight:600;line-height:1.3}
.msm-woonwinkel-materialen .wm-steptext p{margin:0;font-size:15px;line-height:1.6;color:var(--wm-mu)}

/* card-8: het paneel (bg canvas, p-6 sm:p-8) */
.msm-woonwinkel-materialen .wm-board{margin-top:clamp(40px,5vw,64px);padding:24px;border:1px solid var(--wm-l);border-radius:16px;background:var(--wm-bg)}
@media (min-width:640px){.msm-woonwinkel-materialen .wm-board{padding:32px}}
.msm-woonwinkel-materialen .wm-toolbar{display:flex;align-items:center;gap:8px;height:36px;flex:none}
.msm-woonwinkel-materialen .wm-counter{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--wm-ink) 80%,transparent)}
.msm-woonwinkel-materialen .wm-countstrong{color:var(--wm-ink)}
.msm-woonwinkel-materialen .wm-btn{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:8px;height:32px;margin:0;padding:0 16px;border-radius:6px;font:inherit;font-size:14px;line-height:16px;font-weight:500;white-space:nowrap;user-select:none;cursor:pointer;transition:color .12s var(--wm-ease),background-color .12s var(--wm-ease),border-color .12s var(--wm-ease),box-shadow .12s var(--wm-ease),scale .12s var(--wm-ease),filter .12s var(--wm-ease)}
.msm-woonwinkel-materialen .wm-btn:active:not(:disabled){scale:.98;transition-duration:60ms}
.msm-woonwinkel-materialen .wm-btn:disabled{cursor:not-allowed}
.msm-woonwinkel-materialen .wm-btn:focus-visible,.msm-woonwinkel-materialen .wm-tile:focus-visible{outline:2px solid var(--wm-p);outline-offset:2px}
.msm-woonwinkel-materialen .wm-btn--secondary{border:1px solid color-mix(in srgb,var(--wm-ink) 12%,transparent);background:var(--wm-s);color:var(--wm-ink);box-shadow:0 1px 2px -1px rgb(0 0 0/.12)}
.msm-woonwinkel-materialen .wm-btn--secondary:hover:not(:disabled){border-color:color-mix(in srgb,var(--wm-ink) 32%,transparent);background:linear-gradient(to bottom,color-mix(in srgb,var(--wm-ink) 3%,var(--wm-s)),color-mix(in srgb,var(--wm-ink) 3%,var(--wm-s)))}
.msm-woonwinkel-materialen .wm-btn--secondary:active:not(:disabled){box-shadow:inset 0 1px 2px rgb(0 0 0/.12)}
.msm-woonwinkel-materialen .wm-btn--secondary:disabled{border-color:color-mix(in srgb,var(--wm-ink) 8%,transparent);color:color-mix(in srgb,var(--wm-ink) 40%,transparent);box-shadow:none}
.msm-woonwinkel-materialen .wm-btn--primary{border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--wm-p) 84%,white),color-mix(in srgb,var(--wm-p) 94%,black));color:var(--wm-s);box-shadow:inset 0 2px 0 -1px rgb(255 255 255/.2),inset 0 -2px 0 -1px rgb(0 0 0/.3),inset 0 0 0 1px color-mix(in srgb,var(--wm-p) 88%,black),0 1px 1px rgb(0 0 0/.22),0 2px 5px -2px rgb(0 0 0/.3)}
.msm-woonwinkel-materialen .wm-btn--primary:hover:not(:disabled){filter:brightness(1.1)}
.msm-woonwinkel-materialen .wm-btn--primary:active:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wm-p) 88%,black),inset 0 1px 2px rgb(0 0 0/.42)}
.msm-woonwinkel-materialen .wm-btn--primary:disabled{opacity:.4;box-shadow:none}
/* smal: de werkbalk wikkelt, de teller op een eigen regel en de primaire knop mag de breedte nemen */
@media (max-width:479px){.msm-woonwinkel-materialen .wm-toolbar{flex-wrap:wrap;height:auto;min-height:36px;row-gap:8px}.msm-woonwinkel-materialen .wm-counter{flex:1 1 100%}.msm-woonwinkel-materialen .wm-btn--primary{flex:1;min-width:0;height:auto;min-height:32px;padding:6px 12px;white-space:normal;text-align:left}}

/* raster 1, 2, 4 kolommen, gap-4, mt-4 */
.msm-woonwinkel-materialen .wm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:16px 0 0;padding:0;list-style:none}
@media (min-width:640px){.msm-woonwinkel-materialen .wm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.msm-woonwinkel-materialen .wm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.msm-woonwinkel-materialen .wm-cell{display:flex}
/* buitenpaneel: rand, licht vlak, rounded-lg; binnenpaneel met 1 px marge en eigen rand */
.msm-woonwinkel-materialen .wm-tile{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;margin:0;padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--wm-ink) 10%,transparent);border-radius:10px;background:color-mix(in srgb,var(--wm-ink) 3%,var(--wm-s));color:var(--wm-ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .12s var(--wm-ease),box-shadow .12s var(--wm-ease),scale .12s var(--wm-ease)}
.msm-woonwinkel-materialen .wm-tile:active{scale:.98;transition-duration:60ms}
.msm-woonwinkel-materialen .wm-tile:hover{border-color:color-mix(in srgb,var(--wm-ink) 24%,transparent)}
.msm-woonwinkel-materialen .wm-tile[aria-pressed="true"]{border-color:color-mix(in srgb,var(--wm-p) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--wm-p) 35%,transparent)}
.msm-woonwinkel-materialen .wm-tileinner{display:flex;flex:1;flex-direction:column;min-width:0;margin:4px;overflow:hidden;border:1px solid color-mix(in srgb,var(--wm-ink) 8%,transparent);border-radius:6px;background:var(--wm-s)}
.msm-woonwinkel-materialen .wm-tilemedia{position:relative;display:flex;align-items:center;justify-content:center;height:96px;overflow:hidden;border-bottom:1px solid color-mix(in srgb,var(--wm-ink) 8%,transparent);background:var(--wm-bg)}
.msm-woonwinkel-materialen .wm-tilemedia img{display:block;width:100%;height:100%;object-fit:cover}
/* vinkvak van 20 px rechtsboven; bij selectie een gevuld vierkantje met vinkje */
.msm-woonwinkel-materialen .wm-check{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:20px;height:20px;border:1px solid color-mix(in srgb,var(--wm-ink) 50%,transparent);border-radius:4px;background:var(--wm-s);color:var(--wm-s);box-shadow:0 1px 2px -1px rgb(0 0 0/.12);transition:background-color .12s var(--wm-ease),border-color .12s var(--wm-ease),box-shadow .12s var(--wm-ease)}
.msm-woonwinkel-materialen .wm-check svg{opacity:0;transition:opacity .12s var(--wm-ease)}
.msm-woonwinkel-materialen .wm-tile:hover .wm-check{border-color:var(--wm-ink)}
.msm-woonwinkel-materialen .wm-tile[aria-pressed="true"] .wm-check{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--wm-p) 84%,white),color-mix(in srgb,var(--wm-p) 94%,black));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wm-p) 88%,black),0 1px 1px rgb(0 0 0/.22)}
.msm-woonwinkel-materialen .wm-tile[aria-pressed="true"] .wm-check svg{opacity:1}
.msm-woonwinkel-materialen .wm-tilebody{display:flex;flex:1;flex-direction:column;min-width:0;padding:12px}
.msm-woonwinkel-materialen .wm-tilename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:16px;font-weight:500}
.msm-woonwinkel-materialen .wm-tilemeta{display:flex;gap:8px;min-width:0;margin-top:2px;font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--wm-ink) 66%,transparent)}
.msm-woonwinkel-materialen .wm-tileuse{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msm-woonwinkel-materialen .wm-tilesize{flex:none}
.msm-woonwinkel-materialen .wm-tileprop{margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px;color:color-mix(in srgb,var(--wm-ink) 66%,transparent)}
.msm-woonwinkel-materialen .wm-boardnote{margin:16px 0 0;font-size:12px;color:var(--wm-mu)}

/* boekingsvak */
.msm-woonwinkel-materialen .wm-booking{scroll-margin-top:112px;padding:clamp(48px,7vw,96px) 0 clamp(48px,6vw,64px)}
.msm-woonwinkel-materialen .wm-booking:focus{outline:none}

@media (prefers-reduced-motion:reduce){
.msm-woonwinkel-materialen .wm-btn,.msm-woonwinkel-materialen .wm-tile,.msm-woonwinkel-materialen .wm-check,.msm-woonwinkel-materialen .wm-check svg{transition:none}
.msm-woonwinkel-materialen .wm-btn:active:not(:disabled),.msm-woonwinkel-materialen .wm-tile:active{scale:1}
}