/*
 * Shared browser-only physical product context for MPS Creator previews.
 * This layer never supplies production geometry or fulfilment artwork.
 */
.mpsc-contextual-preview {
    --mpsc-context-aspect: 1 / 1;
    --mpsc-context-product-aspect: 1;
    --mpsc-context-product-clip: inset(0);
    --mpsc-context-padding: 0%;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.mpsc-contextual-preview-product {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: min(100%, 520px);
    min-width: 0;
    padding: clamp(.35rem, 1.6vw, .7rem);
    box-sizing: border-box;
}

.mpsc-contextual-preview[data-context-has-product-silhouette="yes"] .mpsc-contextual-preview-product {
    aspect-ratio: var(--mpsc-context-product-aspect);
    isolation: isolate;
}

.mpsc-contextual-preview[data-context-has-product-silhouette="yes"] .mpsc-contextual-preview-product::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    clip-path: var(--mpsc-context-product-clip);
    background: color-mix(in srgb, currentColor 10%, #f5f5f5);
    filter: drop-shadow(0 .22rem .42rem color-mix(in srgb, currentColor 15%, transparent));
    pointer-events: none;
}

.mpsc-contextual-preview-surface {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--mpsc-context-aspect);
    overflow: hidden;
    background: #fff;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    box-sizing: border-box;
    transform: translateZ(0);
    z-index: 2;
}

.mpsc-contextual-preview-surface > canvas,
.mpsc-contextual-preview-surface > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    max-height: none;
    aspect-ratio: var(--mpsc-context-aspect) !important;
    object-fit: contain;
    box-sizing: border-box;
}

.mpsc-contextual-preview-surface > .mpsc-roster-v2-preview {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: none;
    box-sizing: border-box;
}

.mpsc-contextual-preview[data-context-type="square"] .mpsc-contextual-preview-surface {
    box-shadow: 0 .22rem .55rem color-mix(in srgb, currentColor 12%, transparent);
}

.mpsc-contextual-preview[data-context-type="coaster"] .mpsc-contextual-preview-surface {
    border-radius: 8%;
    box-shadow: 0 .28rem .7rem color-mix(in srgb, currentColor 17%, transparent);
}

.mpsc-contextual-preview[data-context-type="round"] .mpsc-contextual-preview-surface,
.mpsc-contextual-preview[data-context-type="clock"] .mpsc-contextual-preview-surface {
    border-radius: 50%;
}

.mpsc-contextual-preview[data-context-type="clock"] .mpsc-contextual-preview-product::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: clamp(4px, 1.8%, 8px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    opacity: .68;
    pointer-events: none;
}

.mpsc-contextual-preview[data-context-type="wrap"] .mpsc-contextual-preview-product {
    padding-right: clamp(1.15rem, 7%, 2.35rem);
}

.mpsc-contextual-preview[data-context-type="wrap"] .mpsc-contextual-preview-product::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: clamp(.1rem, 1.5%, .45rem);
    top: 28%;
    width: clamp(1.25rem, 10%, 2.65rem);
    height: 44%;
    border: clamp(3px, .8vw, 6px) solid color-mix(in srgb, currentColor 32%, transparent);
    border-left: 0;
    border-radius: 0 55% 55% 0;
    box-sizing: border-box;
    pointer-events: none;
}

.mpsc-contextual-preview[data-context-type="wrap"] .mpsc-contextual-preview-surface {
    z-index: 1;
    border-radius: 2.5% / 6%;
}

.mpsc-contextual-preview[data-context-type="frame"] .mpsc-contextual-preview-product {
    padding: clamp(.65rem, 3.5vw, 1.35rem);
    border: clamp(5px, 1.5vw, 12px) solid color-mix(in srgb, currentColor 28%, #fff);
    background: color-mix(in srgb, currentColor 7%, #fff);
    box-shadow: 0 .25rem .75rem color-mix(in srgb, currentColor 12%, transparent);
}

.mpsc-contextual-preview[data-context-type="holder"] .mpsc-contextual-preview-surface,
.mpsc-contextual-preview[data-context-type="pouch"] .mpsc-contextual-preview-surface,
.mpsc-contextual-preview[data-context-type="organiser"] .mpsc-contextual-preview-surface {
    border-radius: 4%;
}

.mpsc-contextual-preview[data-context-role="front"]::before,
.mpsc-contextual-preview[data-context-role="back"]::before {
    content: attr(data-context-role);
    justify-self: start;
    margin: 0 0 .25rem .15rem;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .62;
}

@media (max-width: 699px) {
    .mpsc-contextual-preview-product {
        max-width: 100%;
        padding: .35rem;
    }

    .mpsc-contextual-preview[data-context-type="wrap"] .mpsc-contextual-preview-product {
        padding-right: 1.15rem;
    }
}

/* When a Preview Profile supplies a physical silhouette plus a print-area frame,
 * the silhouette is presentation-only and the live design remains confined to
 * the Product Family print surface inside it. */
.mpsc-contextual-preview[data-context-has-product-silhouette="yes"] .mpsc-contextual-preview-surface {
    max-width: none;
}

.mpsc-contextual-preview[data-context-type="garment"][data-context-has-product-silhouette="yes"] .mpsc-contextual-preview-product {
    padding: 0;
}

/* Active editor containment: the contextual shell owns the physical aspect.
 * Retire historical preview max-height rules inside this shell so the canvas is
 * never stretched to satisfy a rectangular viewport. The 420px product cap
 * keeps portrait surfaces usable on laptop and mobile while preserving ratio. */
.mpsc-editor-contextual-preview .mpsc-contextual-preview-product {
    max-width: min(100%, 420px);
}

.mpsc-editor-contextual-preview .mpsc-preview-wrap,
.mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-preview-wrap {
    max-height: none !important;
}

.mpsc-editor-contextual-preview .mpsc-preview,
.mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-preview {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: var(--mpsc-context-aspect) !important;
}
.mpsc-editor-contextual-preview .mpsc-preview-wrap,
.mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-preview-wrap {
    padding: 0 !important;
}
.mpsc-editor-contextual-preview .mpsc-preview-wrap,
.mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-preview-wrap {
    height: auto !important;
}

/* A calibrated single-surface product mock-up may replace the flat design
 * canvas in the product summary. The mock-up owns presentation geometry only;
 * Product Family geometry remains authoritative for production. */
.mpsc-contextual-preview[data-inline-product-mockup="yes"] .mpsc-contextual-preview-product {
    width: 100%;
    max-width: min(100%, 420px);
    padding: 0;
}

.mpsc-contextual-preview[data-inline-product-mockup="yes"] .mpsc-contextual-preview-surface {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    overflow: hidden;
    border: 0;
    background: #fff;
    box-shadow: none;
    clip-path: none !important;
}

.mpsc-contextual-preview[data-inline-product-mockup="yes"] .mpsc-contextual-preview-surface > canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
}

.mpsc-contextual-preview[data-inline-product-mockup="yes"][data-context-role="front"]::before,
.mpsc-contextual-preview[data-inline-product-mockup="yes"][data-context-role="back"]::before {
    display: none;
}