.personalization-preview { position: relative; width: 100%; aspect-ratio: 3 / 4; isolation: isolate; overflow: hidden; }
.personalization-preview__render { display: block; width: 100%; height: 100%; object-fit: contain; }
.personalization-preview__color, .personalization-preview__texture { position: absolute; inset: 0; pointer-events: none; }
.personalization-preview__color { background: var(--garment-color, #e6e1d8); mask-image: var(--mockup-image); mask-size: 200% 100%; mask-position: var(--mockup-position); mask-repeat: no-repeat; -webkit-mask-image: var(--mockup-image); -webkit-mask-size: 200% 100%; -webkit-mask-position: var(--mockup-position); -webkit-mask-repeat: no-repeat; }
.personalization-preview__texture { background-image: var(--mockup-image); background-size: 200% 100%; background-position: var(--mockup-position); background-repeat: no-repeat; mix-blend-mode: multiply; }
.personalization-preview__art { position: absolute; display: grid; place-items: center; pointer-events: none; }
.personalization-preview__art img { position: absolute; inset: 0; display: block; min-width: 0; min-height: 0; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.personalization-preview__art span { font-size: 11px; text-align: center; color: #222; background: #f4eee5; padding: 4px; }
.personalization-preview__logo { position: absolute; aspect-ratio: 3 / 1; transform: translateX(-50%); mask: var(--logo-mask) center / contain no-repeat; -webkit-mask: var(--logo-mask) center / contain no-repeat; pointer-events: none; }
.personalization-preview__fallback { position: absolute; inset: 15% 12%; display: grid; align-content: center; font: 14px/1.4 Karla, sans-serif; text-align: center; color: #222; background: #ebe5db; }
.personalization-preview--unavailable .personalization-preview__art, .personalization-preview--unavailable .personalization-preview__logo { visibility: hidden; }
[data-personalization-preview] { width: 100%; }