.sc-outer {
    position: relative;
    overflow: hidden;
    min-height: 80px;

    // Editor: show dashed border so user knows it's a container
    &::after {
        content: 'SectionCraft';
        position: absolute;
        top: 0;
        left: 0;
        font-size: 10px;
        color: rgba(0,0,0,0.3);
        padding: 2px 6px;
        pointer-events: none;
    }
}

.sc-inner {
    position: relative;
    z-index: 1;
    min-height: 60px;
    padding: var(--sc-pt, 60px) var(--sc-pr, 20px) var(--sc-pb, 60px) var(--sc-pl, 20px);

    // Show inner boundary in editor
    outline: 1px dashed rgba(100, 100, 255, 0.3);
    outline-offset: -2px;
}

@media (max-width: 767px) {
    .sc-inner {
        padding: var(--sc-pt-m, var(--sc-pt, 60px))
            var(--sc-pr-m, var(--sc-pr, 20px))
            var(--sc-pb-m, var(--sc-pb, 60px))
            var(--sc-pl-m, var(--sc-pl, 20px));
    }
}

.sc-shape {
    pointer-events: none;
    z-index: 0;

    svg {
        display: block;
        width: 100%;
        height: 100%;
    }
}

// Inspector UI polish for the Desktop/Mobile padding tabs.
.sc-padding-tabs {
    .components-tab-panel__tabs {
        display: flex;
        gap: 8px;
        margin: 0 0 10px 0;
        padding: 0;
        overflow: visible;
    }

    .components-tab-panel__tabs-item {
        flex: 1;
        justify-content: center;
        border-radius: 8px;
        min-height: 32px;
    }
}