/* Product preview shape masks — clip-path applied to viewport & upload overlay */
.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-heart {
    --product-shape-clip: polygon(50% 96%, 6% 38%, 6% 22%, 22% 6%, 50% 26%, 78% 6%, 94% 22%, 94% 38%);
}

.preview-stage.shape-balloon {
    --product-shape-clip: polygon(50% 0%, 88% 18%, 100% 50%, 88% 78%, 50% 100%, 12% 78%, 0% 50%, 12% 18%);
}

.preview-stage.shape-leaf {
    --product-shape-clip: polygon(50% 0%, 95% 35%, 80% 100%, 50% 85%, 20% 100%, 5% 35%);
}

.preview-stage.shape-floral,
.preview-stage.shape-star {
    --product-shape-clip: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

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

.preview-stage.shape-curved {
    --product-shape-clip: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
}

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

.preview-stage.shape-squircle {
    --product-shape-clip: inset(0 round 18%);
}

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

.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;
}