/* Product preview shape masks — OMGS-matched acrylic frames */
.preview-stage {
    position: relative;
}

.preview-stage__viewport,
.preview-stage .preview-select-screen,
.preview-stage .preview-text-layer {
    overflow: hidden;
}

.preview-stage.shape-mask .preview-stage__viewport,
.preview-stage.shape-mask .preview-select-screen,
.preview-stage.shape-mask .preview-text-layer {
    clip-path: var(--product-shape-clip);
    -webkit-clip-path: var(--product-shape-clip);
}

.preview-stage.shape-circle {
    --product-shape-clip: circle(50% at 50% 50%);
}

.preview-stage.shape-square_round,
.preview-stage.shape-squircle {
    --product-shape-clip: url(#product-clip-square-round);
}

.preview-stage.shape-heart {
    --product-shape-clip: url(#product-clip-heart);
}

.preview-stage.shape-owl {
    --product-shape-clip: url(#product-clip-owl);
}

.preview-stage.shape-oval {
    --product-shape-clip: url(#product-clip-owl);
}

.preview-stage.shape-leaf {
    --product-shape-clip: url(#product-clip-leaf);
}

.preview-stage.shape-floral,
.preview-stage.shape-star {
    --product-shape-clip: url(#product-clip-floral);
}

.preview-stage.shape-balloon {
    --product-shape-clip: url(#product-clip-balloon);
}

.preview-stage.shape-curved {
    --product-shape-clip: url(#product-clip-curved);
}

.preview-stage.shape-symmetrical {
    --product-shape-clip: url(#product-clip-symmetrical);
}

.preview-stage.shape-triangle {
    --product-shape-clip: polygon(50% 0%, 0% 100%, 100% 100%);
}

.preview-stage.shape-hexagon {
    --product-shape-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.preview-stage.shape-soft_hexagon {
    --product-shape-clip: url(#product-clip-soft-hexagon);
}

.preview-stage.shape-pentagon {
    --product-shape-clip: url(#product-clip-pentagon);
}

.preview-stage.shape-diamond {
    --product-shape-clip: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.preview-stage.shape-cloud {
    --product-shape-clip: url(#product-clip-cloud);
}

.preview-stage.shape-scallop {
    --product-shape-clip: url(#product-clip-scallop);
}

.preview-stage.shape-teardrop {
    --product-shape-clip: url(#product-clip-teardrop);
}

.preview-stage.shape-clover {
    --product-shape-clip: url(#product-clip-clover);
}

.preview-stage.shape-octagon {
    --product-shape-clip: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* Subtle outline so shaped frames are visible before photo upload */
.preview-stage.shape-mask::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    clip-path: var(--product-shape-clip);
    -webkit-clip-path: var(--product-shape-clip);
    box-shadow: inset 0 0 0 2px rgba(201, 162, 39, 0.55);
}

.preview-stage.shape-mask .preview-select-screen {
    background: linear-gradient(145deg, #fafafa 0%, #ececec 100%);
}

.preview-stage.shape-mask #preview-select-btn {
    border-radius: 999px;
}

/* Shared polish for acrylic SVG-masked shapes */
.preview-stage.shape-mask[class*="shape-"] {
    background: transparent !important;
}

.preview-stage.shape-mask .preview-stage__viewport,
.preview-stage.shape-mask .preview-select-screen {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.16));
}

.preview-stage.shape-mask::after {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    background: transparent;
}

.preview-stage.shape-mask #preview-image {
    object-fit: cover;
    object-position: center;
}

.preview-stage.shape-heart.shape-mask #preview-select-btn,
.preview-stage.shape-owl.shape-mask #preview-select-btn,
.preview-stage.shape-leaf.shape-mask #preview-select-btn,
.preview-stage.shape-floral.shape-mask #preview-select-btn,
.preview-stage.shape-balloon.shape-mask #preview-select-btn,
.preview-stage.shape-cloud.shape-mask #preview-select-btn,
.preview-stage.shape-scallop.shape-mask #preview-select-btn,
.preview-stage.shape-teardrop.shape-mask #preview-select-btn,
.preview-stage.shape-clover.shape-mask #preview-select-btn,
.preview-stage.shape-soft_hexagon.shape-mask #preview-select-btn,
.preview-stage.shape-pentagon.shape-mask #preview-select-btn {
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.preview-stage.shape-square_round.shape-mask #preview-select-btn,
.preview-stage.shape-squircle.shape-mask #preview-select-btn,
.preview-stage.shape-curved.shape-mask #preview-select-btn,
.preview-stage.shape-symmetrical.shape-mask #preview-select-btn {
    border-radius: 16px;
}