@font-face{font-family:'Morgenlicht Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin.woff2') format('woff2');font-style:normal;font-weight:500 700;font-display:swap}@font-face{font-family:'Morgenlicht Karla';src:url('assets/fonts/karla-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
.msm-juwelier-maatwerk{position:relative;padding:clamp(90px,11vw,150px) max(20px,calc((100% - 1180px)/2));background:var(--m-ink);color:var(--m-surface);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:50px;overflow:hidden;isolation:isolate}
.msm-juwelier-maatwerk *{box-sizing:border-box}
.msm-juwelier-maatwerk .ma-copy{position:relative;z-index:2;align-self:center}
.msm-juwelier-maatwerk h2{font:500 clamp(48px,7vw,88px)/.95 var(--m-font-display)}
.msm-juwelier-maatwerk .ma-metals{display:flex;flex-wrap:wrap;gap:8px}
.msm-juwelier-maatwerk .ma-metals button{background:transparent;color:inherit;border:1px solid var(--m-muted);padding:11px 14px}
.msm-juwelier-maatwerk .ma-metals button.active,.msm-juwelier-maatwerk .ma-metals button:focus-visible{background:var(--m-primary);border-color:var(--m-primary);outline:2px solid var(--m-surface);outline-offset:2px}
.msm-juwelier-maatwerk a{color:var(--m-surface)}
.msm-juwelier-maatwerk .ma-product-zone{position:relative;z-index:1;min-width:0;height:clamp(360px,48vw,580px);overflow:hidden;isolation:isolate;contain:paint;display:grid;place-items:center}
.msm-juwelier-maatwerk .ma-ring{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;transition:transform .22s ease;filter:drop-shadow(0 24px 35px rgba(0,0,0,.35))}
.msm-juwelier-maatwerk .ms-native-source{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;contain:paint}
.msm-juwelier-maatwerk .ms-native-source>*{display:block;width:100%;height:100%}
.msm-juwelier-maatwerk .ms-native-source canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:.72}
.msm-juwelier-maatwerk .ma-product-zone[data-native-painted=true] .ma-ring{opacity:0}
@media(max-width:700px){.msm-juwelier-maatwerk{grid-template-columns:1fr}.msm-juwelier-maatwerk .ma-product-zone{height:clamp(320px,90vw,520px)}}
@media(prefers-reduced-motion:reduce){.msm-juwelier-maatwerk *{animation:none!important;transition:none!important}}
