.serviumwp-builder.serviumwp-builder--canvas {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
    gap: clamp(1rem, 3vw, 3rem);
    max-width: var(--servium-canvas-max-width, 1440px);
    align-items: start;
}
.serviumwp-builder--canvas > .serviumwp-builder-form { min-width: 0; }
.servium-canvas { position: sticky; top: var(--servium-canvas-sticky-top, 2rem); min-width: 0; }
.servium-canvas[hidden], .servium-canvas [hidden] { display: none !important; }
.servium-canvas__views { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.servium-canvas__views button { font: inherit; padding: .5rem .8rem; border: 1px solid #777; border-radius: .25rem; background: #fff; color: #222; cursor: pointer; }
.servium-canvas__views button[aria-pressed="true"] { background: #222; color: #fff; }
.servium-canvas__views button:focus-visible { outline: 3px solid #2171b5; outline-offset: 3px; }
.servium-canvas__frame { position: relative; width: 100%; overflow: hidden; isolation: isolate; }
.servium-canvas__component, .servium-canvas__material, .servium-canvas__layer {
    position: absolute; inset: 0; width: 100% !important; height: 100%; margin: 0; padding: 0; border: 0;
}
.servium-canvas__component { isolation: isolate; }
.servium-canvas__material { mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-mode: alpha; }
.servium-canvas img.servium-canvas__layer { display: block; max-width: none; object-fit: fill; border-radius: 0; box-shadow: none; }
.servium-canvas__texture, .servium-canvas__shadow { mix-blend-mode: multiply; }
.servium-canvas__highlight { mix-blend-mode: screen; }
.servium-canvas__status { font-size: .9rem; }
.servium-canvas__status:empty { display: none; }
@media (max-width: 760px) {
    .serviumwp-builder.serviumwp-builder--canvas { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .servium-canvas { position: static; }
    .servium-canvas__stage { max-width: 32rem; margin-inline: auto; }
}