.sb-container {
    width: 100%;
}

.sb-container__grid {
    display: grid;
    align-items: start;
}

.sb-container__zone {
    min-width: 0;
}

.sb-container__zone-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}

.sb-container__child {
    min-width: 0;
}

/* Builder-only drop affordance */
.pb-block .sb-container {
    background: color-mix(in oklab, Canvas, gray 6%);
    border-radius: .75rem;
    padding: 1rem;
}

.pb-block .sb-container__zone {
    min-height: 140px;
    padding: .75rem;
    border: 1px dashed color-mix(in oklab, CanvasText, transparent 72%);
    border-radius: .75rem;
    background: color-mix(in oklab, Canvas, gray 3%);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

    .pb-block .sb-container__zone[data-empty="1"]::before {
        content: "Drop components here";
        display: block;
        margin-bottom: .25rem;
        color: color-mix(in oklab, CanvasText, transparent 45%);
        font-size: .875rem;
        font-weight: 600;
    }

    .pb-block .sb-container__zone.pb-drop-target-active {
        border-color: var(--bs-primary, #0d6efd);
        background: color-mix(in oklab, var(--bs-primary, #0d6efd) 10%, Canvas);
        box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--bs-primary, #0d6efd) 18%, transparent);
    }

.sb-container__child.pb-block {
    margin: 0;
    border-radius: .75rem;
    overflow: hidden;
}

.sb-container__child .pb-block-body {
    min-width: 0;
}
@media (max-width: 767.98px) {
    .sb-container[data-stack-on-mobile="1"] .sb-container__grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 767.98px) {
    .sb-container[data-stack-on-mobile="1"] .sb-container__zone {
        min-height: auto;
    }

    .sb-container[data-stack-on-mobile="1"] .sb-container__zone-stack {
        gap: .75rem;
    }
}