/* Independent vertical stretch. Translation keeps the center in place; pinned trim grows upwards.
   Separate from existing template/custom styles so old layouts remain unchanged at 100%. */
.template-stickers > .template-sticker {
    transform: translate(-50%, var(--sticker-render-translate-y, var(--sticker-translate-y, -50%))) scaleY(var(--sticker-render-height-scale, var(--sticker-height-scale, 1)));
    transform-origin: 50% var(--sticker-render-origin-y, 50%);
}
@media (min-width: 601px) {
    .template-stickers > .template-sticker[data-sticker-pin-top="true"] {
        transform: translate(-50%, 0) scaleY(var(--sticker-render-height-scale, var(--sticker-height-scale, 1)));
        transform-origin: 50% 0;
    }
    .template-stickers > .template-sticker[data-sticker-pin-bottom="true"] {
        transform: translate(-50%, var(--sticker-render-translate-y, 0px)) scaleY(var(--sticker-render-height-scale, var(--sticker-height-scale, 1)));
        transform-origin: 50% var(--sticker-render-origin-y, 100%);
    }
}
@media (max-width: 600px) {
    .template-stickers > .template-sticker {
        transform: translate(-50%, var(--sticker-render-translate-y, var(--sticker-mobile-translate-y, -50%))) scaleY(var(--sticker-render-height-scale, var(--sticker-mobile-height-scale, 1)));
    }
    .template-stickers > .template-sticker[data-sticker-mobile-pin-top="true"] {
        transform: translate(-50%, 0) scaleY(var(--sticker-render-height-scale, var(--sticker-mobile-height-scale, 1)));
        transform-origin: 50% 0;
    }
    .template-stickers > .template-sticker[data-sticker-mobile-pin-bottom="true"] {
        transform: translate(-50%, var(--sticker-render-translate-y, 0px)) scaleY(var(--sticker-render-height-scale, var(--sticker-mobile-height-scale, 1)));
        transform-origin: 50% var(--sticker-render-origin-y, 100%);
    }
}