:where([data-template-background-host]) { position: relative; isolation: isolate; }
[data-template-background-host]:not(.site-menu-panel):has(> .template-background:not([data-background-mode="default"])) { background: transparent !important; }
@media (min-width: 601px) {
    .site-menu-panel:has(> .template-background:not([data-background-mode="default"])) { background: transparent !important; }
}
@media (max-width: 600px) {
    .site-menu-panel:has(> .template-background:not([data-background-mode="default"])):not(:has(> .template-background[data-background-mobile-open-mode="default"])),
    .site-menu-panel:has(> .template-background[data-background-mobile-open-mode="color"]) { background: transparent !important; }
    .site-menu-panel > .template-background[data-background-mobile-open-mode="color"] {
        display: block;
        background: var(--header-mobile-open-color);
    }
    .site-menu-panel > .template-background[data-background-mobile-open-mode="color"] > img[data-template-background-image] { display: none; }
    .site-menu-panel > .template-background[data-background-mobile-open-mode="default"] { display: none; }
    /* New closed-state colors use a separate plate so the logo row still blends. */
    header[data-header-blend="difference"][data-header-mobile-closed-mode="color"]:not(.is-menu-open)::before {
        content: '';
        position: fixed;
        z-index: 50;
        inset: 0 0 auto;
        height: var(--site-menu-row-size);
        background-color: var(--header-mobile-closed-color);
        pointer-events: none;
    }
}
.template-background {
    position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none;
    background: var(--background-color, #fff);
    border-radius: 50% 50% 0 0 /
        min(100%, calc(var(--background-left, 0) * 1px), calc(var(--background-left, 0) * 100vw / 1440))
        min(100%, calc(var(--background-right, 0) * 1px), calc(var(--background-right, 0) * 100vw / 1440)) 0 0;
}
.template-background[data-background-mode="default"] { display: none; }
/* Tint only the background so the menu's backdrop blur stays visible.
   Links and controls remain fully opaque; the closed mobile bar is separate. */
.site-menu-panel > .template-background { opacity: .7; }
/* Masks affect the background only; photos, text and stickers remain outside this layer. */
@media (min-width: 481px) {
    .template-background:is([data-background-shape="bezier"], [data-background-shape="symmetric"]) {
        border-radius: 0;
        -webkit-mask-image: var(--background-mask);
        mask-image: var(--background-mask);
        -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    }
}
header[data-template-background-host] > .template-background { opacity: 0; }
header[data-template-background-host]:is(.is-active, .is-hovered, .is-scrolled, .is-dropdown-open) > .template-background { opacity: 1; }
header[data-template-background-host]:has(> .template-background:not([data-background-mode="default"]))::before { background: transparent !important; }
[data-template-background-host] > .template-background > img[data-template-background-image] { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; margin: 0; padding: 0; border: 0; transform: none; }
@media (max-width: 600px) {
    /* Compact inline headers already have a background before scrolling. */
    header[data-template-background-host] > .template-background { opacity: 1; }
    header[data-template-background-host]:has(> .template-background:not([data-background-mode="default"])) :is([class$="-row"], [class$="-navigation"]) { background: transparent; }
}
@media (max-width: 480px) {
    .template-background {
        border-top-left-radius: 50% min(100%, calc(var(--background-mobile-left, 0) * 1px));
        border-top-right-radius: 50% min(100%, calc(var(--background-mobile-right, 0) * 1px));
    }
    .template-background:is([data-background-mobile-shape="bezier"], [data-background-mobile-shape="symmetric"]) {
        border-radius: 0;
        -webkit-mask-image: var(--background-mobile-mask);
        mask-image: var(--background-mobile-mask);
        -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    }
}