.commerce-screen .role-grid{margin:20px 0}
.commerce-screen .role-grid+.card{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.commerce-screen .role-grid+.card>button{max-width:100%;white-space:normal;text-align:left;line-height:1.5}
.commerce-screen .role-grid+.card>section{width:100%;min-width:0;border-top:1px solid #333;padding-top:24px;display:flex;flex-direction:column;gap:14px}
.commerce-screen .role-grid+.card>section>h3,.commerce-screen .role-grid+.card>section>p{margin:0}
.commerce-screen .role-grid+.card>section>.actions{gap:12px}
.commerce-screen .role-grid+.card>section>.actions>span{flex-basis:100%;font-size:12px;line-height:1.6;color:#aaa}
.commerce-screen .editor>article.card.segment{display:flex;flex-direction:column;gap:16px;margin:20px 0}
.commerce-screen .editor>article.card.segment>h3,.commerce-screen .editor>article.card.segment>p,.commerce-screen .editor>article.card.segment>.actions{margin:0}
.commerce-screen .editor>article.card.segment>details{padding:14px 16px;background:#151515;border:1px solid #303030;border-radius:8px;min-width:0}
.commerce-screen .editor>article.card.segment>details>summary{font-size:13px;line-height:1.6;cursor:pointer}
.commerce-screen .editor>article.card.segment>details>pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;line-height:1.8;color:#bbb;margin:14px 0 0}
.commerce-screen .editor>article.card.segment>.actions{gap:12px}
.commerce-screen .editor>article.card.segment>.actions>span{flex-basis:100%;font-size:12px;line-height:1.6;color:#aaa}
@media(max-width:640px){.commerce-screen .role-grid+.card{gap:20px}.commerce-screen .role-grid+.card>section{padding-top:20px}.commerce-screen .role-grid+.card>button{width:100%}.commerce-screen .role-grid+.card>section>.actions>button,.commerce-screen .editor>article.card.segment>.actions>button{flex:1 1 160px;white-space:normal}}