/* boerderijwinkel-erf: het erf met React Bits Pro snapshot-trail (origineel gecompileerd, three uit _shared/vendor). */
.msm-boerderijwinkel-erf{--ef-p:var(--m-primary,#7d2b38);--ef-bg:var(--m-bg,#f5efe1);--ef-ink:var(--m-ink,#2b2219);--ef-s:var(--m-surface,#fffbf3);--ef-mu:var(--m-muted,#6b5f4f);--ef-a:var(--m-accent2,#e3ad3b);--ef-l:var(--m-line,#e1d6c1);--ef-display:var(--m-font-display,"Young Serif",Georgia,"Times New Roman",serif);--ef-body:var(--m-font-body,"Schibsted Grotesk","Segoe UI",system-ui,sans-serif);position:relative;box-sizing:border-box;width:100%;scroll-margin-top:112px;padding:64px 16px;background:var(--ef-bg);color:var(--ef-ink);font-family:var(--ef-body);font-size:16px;line-height:1.55}
.msm-boerderijwinkel-erf *{box-sizing:border-box}
.msm-boerderijwinkel-erf .ef-wrap{width:100%;max-width:1280px;margin:0 auto}
/* Het vak met het spoor: de tekst ligt erboven (layer back). */
.msm-boerderijwinkel-erf .ef-vak{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;min-height:560px;padding:28px 20px;overflow:hidden;border:1px solid var(--ef-l);border-radius:32px;background:var(--ef-s);isolation:isolate}
.msm-boerderijwinkel-erf .ef-trail{position:absolute;inset:0;z-index:0}
/* Originele component-CSS (snapshot-trail.css), gescoped. */
.msm-boerderijwinkel-erf .snapshot-trail{position:relative;isolation:isolate;width:100%;height:100%;min-height:320px;overflow:hidden}
.msm-boerderijwinkel-erf .ef-text{position:relative;z-index:1;align-self:start;max-width:520px;padding:22px 22px 24px;border-radius:24px;background:color-mix(in srgb,var(--ef-s) 86%,transparent);box-shadow:0 1px 0 var(--ef-l)}
.msm-boerderijwinkel-erf .ef-kicker{margin:0 0 10px;color:var(--ef-p);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.msm-boerderijwinkel-erf .ef-title{margin:0;font-family:var(--ef-display);font-weight:400;font-size:clamp(30px,4.6vw,52px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.msm-boerderijwinkel-erf .ef-intro{margin:16px 0 0;color:var(--ef-mu);font-size:16px;line-height:1.65}
/* Stil stapeltje: zonder JavaScript, zonder WebGL en bij reduced motion. */
.msm-boerderijwinkel-erf .ef-stack{position:relative;z-index:1;min-height:300px;transition:opacity .3s}
.msm-boerderijwinkel-erf .ef-snap{position:absolute;left:50%;top:50%;width:132px;padding:6px 6px 22px;border-radius:6px;background:var(--ef-s);box-shadow:0 10px 26px color-mix(in srgb,var(--ef-ink) 22%,transparent),0 1px 2px color-mix(in srgb,var(--ef-ink) 18%,transparent);transform:translate(-50%,-50%) translate(calc(var(--ef-x,0px) * var(--ef-k,.6)),var(--ef-y,0px)) rotate(var(--ef-r,0deg))}
.msm-boerderijwinkel-erf .ef-snap img{display:block;width:100%;height:auto;aspect-ratio:168/236;object-fit:cover;border-radius:3px;background:var(--ef-bg)}
.msm-boerderijwinkel-erf .ef-snap--1{--ef-x:-120px;--ef-y:-34px;--ef-r:-9deg}
.msm-boerderijwinkel-erf .ef-snap--2{--ef-x:-80px;--ef-y:22px;--ef-r:5deg}
.msm-boerderijwinkel-erf .ef-snap--3{--ef-x:-40px;--ef-y:-26px;--ef-r:-4deg}
.msm-boerderijwinkel-erf .ef-snap--4{--ef-x:0px;--ef-y:28px;--ef-r:7deg}
.msm-boerderijwinkel-erf .ef-snap--5{--ef-x:40px;--ef-y:-20px;--ef-r:-6deg}
.msm-boerderijwinkel-erf .ef-snap--6{--ef-x:80px;--ef-y:24px;--ef-r:3deg}
.msm-boerderijwinkel-erf .ef-snap--7{--ef-x:112px;--ef-y:-30px;--ef-r:-2deg}
.msm-boerderijwinkel-erf .ef-snap--8{--ef-x:132px;--ef-y:18px;--ef-r:6deg}
/* Spoor actief: stapeltje weg, tekst laat de aanwijzer door naar het spoor. */
.msm-boerderijwinkel-erf[data-ef-trail="on"] .ef-stack{opacity:0;visibility:hidden}
.msm-boerderijwinkel-erf[data-ef-trail="on"] .ef-text{pointer-events:none}
.msm-boerderijwinkel-erf[data-ef-trail="on"] .ef-vak{cursor:crosshair}
.msm-boerderijwinkel-erf .ef-info{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px}
.msm-boerderijwinkel-erf .ef-block{padding:20px 22px;border:1px solid var(--ef-l);border-radius:22px;background:var(--ef-s)}
.msm-boerderijwinkel-erf .ef-block h3{margin:0 0 6px;font-family:var(--ef-display);font-weight:400;font-size:20px;line-height:1.25}
.msm-boerderijwinkel-erf .ef-block p{margin:0;color:var(--ef-mu);font-size:15px;line-height:1.6}
.msm-boerderijwinkel-erf .ef-family{margin:18px 0 0;padding:12px 16px;border-left:3px solid var(--ef-p);border-radius:0 14px 14px 0;background:color-mix(in srgb,var(--ef-a) 26%,var(--ef-s));color:var(--ef-ink);font-size:15px;line-height:1.5}
.msm-boerderijwinkel-erf .ef-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(124px,40%);gap:12px;margin:24px 0 0;padding:4px 2px 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;border-radius:12px}
.msm-boerderijwinkel-erf .ef-thumbs:focus-visible{outline:2px solid var(--ef-p);outline-offset:3px}
.msm-boerderijwinkel-erf .ef-thumb{scroll-snap-align:start}
.msm-boerderijwinkel-erf .ef-thumb figure{margin:0}
.msm-boerderijwinkel-erf .ef-thumb-media{display:block;overflow:hidden;padding:5px 5px 16px;border-radius:6px;background:var(--ef-s);box-shadow:0 1px 3px color-mix(in srgb,var(--ef-ink) 16%,transparent)}
.msm-boerderijwinkel-erf .ef-thumb-media img{display:block;width:100%;height:auto;aspect-ratio:5/7;object-fit:cover;border-radius:3px;background:var(--ef-bg)}
.msm-boerderijwinkel-erf .ef-thumb figcaption{margin-top:8px;color:var(--ef-ink);font-size:13px;line-height:1.35}
@media (min-width:640px){
.msm-boerderijwinkel-erf{padding:80px 24px}
.msm-boerderijwinkel-erf .ef-vak{padding:36px}
.msm-boerderijwinkel-erf .ef-info{grid-template-columns:repeat(3,minmax(0,1fr))}
.msm-boerderijwinkel-erf .ef-thumbs{grid-auto-columns:minmax(124px,22%)}
.msm-boerderijwinkel-erf .ef-snap{width:150px;--ef-k:1}
}
@media (min-width:1024px){
.msm-boerderijwinkel-erf{padding:104px 32px}
.msm-boerderijwinkel-erf .ef-vak{grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:center;min-height:620px;padding:48px}
.msm-boerderijwinkel-erf .ef-text{padding:28px 30px 30px}
.msm-boerderijwinkel-erf .ef-stack{min-height:440px}
.msm-boerderijwinkel-erf .ef-snap{width:168px}
.msm-boerderijwinkel-erf .ef-snap--1{--ef-x:-170px}
.msm-boerderijwinkel-erf .ef-snap--2{--ef-x:-115px}
.msm-boerderijwinkel-erf .ef-snap--3{--ef-x:-60px}
.msm-boerderijwinkel-erf .ef-snap--5{--ef-x:60px}
.msm-boerderijwinkel-erf .ef-snap--6{--ef-x:115px}
.msm-boerderijwinkel-erf .ef-snap--7{--ef-x:160px}
.msm-boerderijwinkel-erf .ef-snap--8{--ef-x:196px}
.msm-boerderijwinkel-erf .ef-thumbs{grid-auto-flow:row;grid-template-columns:repeat(8,minmax(0,1fr));overflow:visible}
}
@media (prefers-reduced-motion:reduce){
.msm-boerderijwinkel-erf .ef-stack{transition:none}
}
