.template-sticker-host { position: relative; isolation: isolate; }
.template-stickers { position: absolute; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
/* The isolated host paints its own background first; template background siblings precede this layer. */
.template-stickers[data-sticker-plane="back"] { z-index: -1; }
.template-stickers > .template-sticker {
    position: absolute;
    display: var(--sticker-display, block);
    left: var(--sticker-x);
    top: var(--sticker-y);
    width: var(--sticker-width);
    height: auto;
    max-width: none;
    margin: 0;
    transform: translate(-50%, var(--sticker-translate-y, -50%));
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
.template-stickers > .template-sticker-link { padding: 0; border: 0; background: transparent; line-height: 0; pointer-events: auto; cursor: pointer; }
.template-sticker-link > img { display: block; width: 100%; height: auto; max-width: none; margin: 0; pointer-events: none; }
.template-sticker-link:focus-visible { outline: 3px solid #287cce; outline-offset: 3px; }
/* Do not flash a section-relative marker before the photo dimensions are available. */
@media (min-width: 601px) { .template-sticker[data-sticker-reference="image"] { visibility: hidden; } }
@media (max-width: 600px) { .template-sticker[data-sticker-mobile-reference="image"] { visibility: hidden; } }
@media (max-width: 600px) {
    .template-stickers > .template-sticker {
        display: var(--sticker-mobile-display, block);
        left: var(--sticker-mobile-x);
        top: var(--sticker-mobile-y);
        width: var(--sticker-mobile-width);
        transform: translate(-50%, var(--sticker-mobile-translate-y, -50%));
    }
}