/* One shared outer gutter; nested cards and forms keep their own padding. */
:root { --page-gutter: clamp(16px, 2.5vw, 40px); --workspace-gap: clamp(16px, 2vw, 28px); }
.page-body > .admin-layout {
    width: calc(100% - var(--page-gutter) * 2);
    max-width: 1600px;
    margin-inline: auto;
    padding-block: var(--workspace-gap);
    column-gap: var(--workspace-gap);
}
.page-body > :is(.container, .products-page, .profile-page, .product-detail,
.product-detail-breadcrumb, .product-description-section, .product-reviews,
.similar-products-section, .cart-checkout-page, .error-page-wrap, .blog-shell) {
    width: min(1220px, calc(100% - var(--page-gutter) * 2)) !important;
    margin-inline: auto !important;
    min-width: 0;
}
.home-page-shell > section > .container {
    width: min(1220px, calc(100% - var(--page-gutter) * 2)) !important;
    margin-inline: auto !important;
}
/* Admin nested inside Studio keeps a gutter without reserving a sidebar. */
body.embedded-admin-frame .page-body > .admin-layout {
    width: calc(100% - var(--page-gutter) * 2);
    margin-inline: auto;
}
.admin-layout .admin-panel-header { gap: 16px; margin-bottom: 24px; }
.admin-layout .admin-panel-header .admin-panel-actions { margin-bottom: 0; }
.admin-layout :is(.management-section, .management-card, .product-editor-card) { min-width: 0; }
.admin-layout :is(.form-group, .product-editor-field) > :is(input, select, textarea) { max-width: 100%; min-width: 0; }
@media (max-width: 900px) {
    .page-body > .admin-layout { row-gap: 20px; }
    .admin-layout .admin-panel { padding: 0 !important; }
    .admin-layout .admin-panel-header { padding-inline: 0 !important; }
}
@media (max-width: 480px) {
    .admin-layout .admin-panel-actions { width: 100%; gap: 8px; }
    .admin-layout .admin-panel-actions > .btn { flex: 1 1 auto; }
}