/* woonwinkel-winkel: block-port van ReactBitsPro Blocks/contact-12 (six animated support option cards).
   Tailwind vertaald naar gescopete CSS; kleuren alleen via --m-*-tokens (lichte variant van de bron).
   Sectie px 16/24/32 py 64/80/96; max-w 1400; kop flex-col gap 32, vanaf 1024 px rij items-end
   justify-between; h2 mt 20 36/48/60 px semibold leading 1.05 tracking-tight; intro mt 24 max-w-xl 16/18 px
   leading-relaxed gedempt; rechts een blok shrink-0 (lg: pb 4, text-right) met een grote regel 30 px
   semibold tracking-tight en een regel mt 4 14 px gedempt; raster mt 48/64 grid 1/2/3 kolommen gap 16/20;
   kaart flex-col rounded-2xl rand (--m-line op 70 procent) --m-surface p 24/32; iconvak 44 px rounded-xl
   rand; h3 mt 24 18 px semibold tracking-tight; tekst mt 8 14 px leading-relaxed gedempt; voet mt-auto pt 32
   met ronde knop (border, px 20 py 10, 14 px medium) die bij hover vult in de inktkleur met tekst in de
   achtergrondkleur (transition-colors) en een focusring van 2 px met offset. De entrees (stagger 0,07,
   delay 0,05; 20 px; 0,6 s ease [0.22,1,0.36,1]) zitten in module.js. Toegevoegd: uitklapblokken en een
   voorbeeldformulier in de kaart. */
.msm-woonwinkel-winkel{--ww-p:var(--m-primary,#9a5237);--ww-bg:var(--m-bg,#dfddd8);--ww-ink:var(--m-ink,#252628);--ww-s:var(--m-surface,#f7f6f2);--ww-mu:var(--m-muted,#6b6d6e);--ww-a:var(--m-accent2,#c48a6e);--ww-l:var(--m-line,#c8c5be);--ww-ease:cubic-bezier(.22,1,.36,1);box-sizing:border-box;scroll-margin-top:112px;width:100%;padding:64px 16px;background:var(--ww-bg);color:var(--ww-ink);font-family:var(--m-font-body,'Manrope',Arial,sans-serif);font-size:16px;line-height:1.55}
.msm-woonwinkel-winkel *{box-sizing:border-box}
@media (min-width:640px){.msm-woonwinkel-winkel{padding:80px 24px}}
@media (min-width:1024px){.msm-woonwinkel-winkel{padding:96px 32px}}
.msm-woonwinkel-winkel .ww-wrap{width:100%;max-width:1400px;margin:0 auto}

/* kop: flex-col gap-8 lg:flex-row lg:items-end lg:justify-between */
.msm-woonwinkel-winkel .ww-head{display:flex;flex-direction:column;gap:32px}
@media (min-width:1024px){.msm-woonwinkel-winkel .ww-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.msm-woonwinkel-winkel .ww-title{margin:20px 0 0;font:400 clamp(36px,4.6vw,60px)/1.05 var(--m-font-display,'Instrument Serif',Georgia,serif);letter-spacing:-.015em;color:var(--ww-ink)}
.msm-woonwinkel-winkel .ww-intro{margin:24px 0 0;max-width:576px;color:var(--ww-mu);font-size:16px;line-height:1.625}
@media (min-width:640px){.msm-woonwinkel-winkel .ww-intro{font-size:18px}}
/* rechts: shrink-0 lg:pb-1 lg:text-right; grote regel 3xl semibold tabular tracking-tight, mt-1 text-sm */
.msm-woonwinkel-winkel .ww-hours{flex:0 0 auto}
@media (min-width:1024px){.msm-woonwinkel-winkel .ww-hours{padding-bottom:4px;text-align:right}}
.msm-woonwinkel-winkel .ww-hours-main{margin:0;font:400 clamp(22px,2.2vw,30px)/1.2 var(--m-font-display,'Instrument Serif',Georgia,serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ww-ink)}
.msm-woonwinkel-winkel .ww-hours-sub{margin:4px 0 0;font-size:14px;color:var(--ww-mu)}

/* raster: mt-12 lg:mt-16 grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 */
.msm-woonwinkel-winkel .ww-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:48px}
@media (min-width:640px){.msm-woonwinkel-winkel .ww-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1024px){.msm-woonwinkel-winkel .ww-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px}}
/* kaart: flex-col rounded-2xl border/70 bg p-6 sm:p-8 */
.msm-woonwinkel-winkel .ww-card{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid color-mix(in srgb,var(--ww-l) 70%,transparent);border-radius:16px;background:var(--ww-s)}
@media (min-width:640px){.msm-woonwinkel-winkel .ww-card{padding:32px}}
/* iconvak: h-11 w-11 rounded-xl border bg; icoon 20 px stroke 1.75 */
.msm-woonwinkel-winkel .ww-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--ww-l);border-radius:12px;background:var(--ww-bg);color:var(--ww-ink)}
.msm-woonwinkel-winkel .ww-card-title{margin:24px 0 0;font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ww-ink)}
.msm-woonwinkel-winkel .ww-card-text{margin:8px 0 0;font-size:14px;line-height:1.625;color:var(--ww-mu)}
.msm-woonwinkel-winkel .ww-card-foot{margin-top:auto;padding-top:32px}
/* knop: inline-flex rounded-full border px-5 py-2.5 14 px medium; hover border ink, bg ink, tekst bg; focusring 2 px offset 2 */
.msm-woonwinkel-winkel .ww-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 20px;border:1px solid color-mix(in srgb,var(--ww-l) 60%,var(--ww-mu));border-radius:999px;background:transparent;color:var(--ww-ink);font-family:inherit;font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.msm-woonwinkel-winkel .ww-cta:hover{border-color:var(--ww-ink);background:var(--ww-ink);color:var(--ww-bg)}
.msm-woonwinkel-winkel .ww-cta:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ww-s),0 0 0 4px var(--ww-ink)}
.msm-woonwinkel-winkel .ww-cta[aria-expanded="true"]{border-color:var(--ww-ink);background:var(--ww-ink);color:var(--ww-bg)}
.msm-woonwinkel-winkel .ww-cta-fill{border-color:var(--ww-p);background:var(--ww-p);color:var(--ww-s)}
.msm-woonwinkel-winkel .ww-cta-fill:hover{border-color:var(--ww-ink);background:var(--ww-ink);color:var(--ww-bg)}

/* uitklapblok en formulier (toegevoegd): boven een lijn, 14 px, dekking bij openen */
.msm-woonwinkel-winkel .ww-panel{margin:20px 0 0;padding:16px 0 0;border-top:1px solid color-mix(in srgb,var(--ww-l) 70%,transparent)}
.msm-woonwinkel-winkel .ww-panel[hidden]{display:none}
.msm-woonwinkel-winkel .ww-panel-title{margin:12px 0 0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ww-ink)}
.msm-woonwinkel-winkel .ww-panel-title:first-child{margin-top:0}
.msm-woonwinkel-winkel .ww-panel-text{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--ww-mu)}
.msm-woonwinkel-winkel .ww-form{display:flex;flex-direction:column;gap:12px}
.msm-woonwinkel-winkel .ww-form-note{margin:0;font-size:12px;color:var(--ww-mu)}
.msm-woonwinkel-winkel .ww-field{display:flex;flex-direction:column;gap:6px}
.msm-woonwinkel-winkel .ww-field label{font-size:13px;font-weight:600;color:var(--ww-ink)}
.msm-woonwinkel-winkel .ww-field input,.msm-woonwinkel-winkel .ww-field textarea{width:100%;padding:10px 14px;border:1px solid var(--ww-l);border-radius:12px;background:var(--ww-bg);color:var(--ww-ink);font-family:inherit;font-size:14px;line-height:1.5;resize:none;transition:border-color .15s}
.msm-woonwinkel-winkel .ww-field input:focus-visible,.msm-woonwinkel-winkel .ww-field textarea:focus-visible{outline:none;border-color:var(--ww-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ww-ink) 10%,transparent)}
.msm-woonwinkel-winkel .ww-field.is-invalid input,.msm-woonwinkel-winkel .ww-field.is-invalid textarea{border-color:var(--ww-p)}
.msm-woonwinkel-winkel .ww-form-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:4px}
.msm-woonwinkel-winkel .ww-form-status{margin:0;font-size:13px;line-height:1.5;color:var(--ww-ink)}
.msm-woonwinkel-winkel .ww-form-status:empty{display:none}

@media (prefers-reduced-motion:reduce){
  .msm-woonwinkel-winkel .ww-cta,.msm-woonwinkel-winkel .ww-field input,.msm-woonwinkel-winkel .ww-field textarea{transition:none}
}