.sbx-page{
    --sbx-purple:#6d28d9;
    --sbx-purple-dark:#13082f;
    --sbx-pink:#ec3f7a;
    --sbx-soft:#f8f5ff;
    --sbx-border:#eee8fb;
    --sbx-text:#4f4864;
    --sbx-muted:#7b728d;

    width:100% !important;
    max-width:1320px !important;
    margin:0 auto !important;
    padding:0 0 70px !important;
    font-family:inherit;
}

.sbx-page *,
.sbx-page *:before,
.sbx-page *:after{
    box-sizing:border-box;
}

.sbx-page svg{
    width:18px;
    height:18px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sbx-loading{
    opacity:.55;
    pointer-events:none;
    transition:.2s ease;
}

.sbx-page a{
    text-decoration:none;
}

.sbx-page img{
    max-width:100%;
    height:auto;
    display:block;
}

/* Remove sidebar only on shortcode page */
body:has(.sbx-page) #secondary,
body:has(.sbx-page) .widget-area,
body:has(.sbx-page) aside.sidebar{
    display:none !important;
}

/* Make content column full, but keep plugin centered */
body:has(.sbx-page) #primary,
body:has(.sbx-page) .content-area,
body:has(.sbx-page) .site-main,
body:has(.sbx-page) .entry-content,
body:has(.sbx-page) .page-content{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
}

/* Desktop alignment like other course pages */
@media(min-width:769px){
    .entry-content > .sbx-page,
    .page-content > .sbx-page{
        max-width:1320px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* Align breadcrumbs with plugin width */
body:has(.sbx-page) .tutor-breadcrumb,
body:has(.sbx-page) .tutor-breadcrumb-wrap,
body:has(.sbx-page) .breadcrumb,
body:has(.sbx-page) .breadcrumbs,
body:has(.sbx-page) .page-breadcrumb,
body:has(.sbx-page) .woocommerce-breadcrumb{
    max-width:1320px !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:24px !important;
    padding-right:24px !important;
}

/* Mobile/tablet spacing */
@media(max-width:768px){
    .sbx-page{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:0 12px 54px !important;
    }
}

@media(max-width:480px){
    .sbx-page{
        padding:0 12px 46px !important;
    }
}