/* Frame integration only. Checkout typography and components live in original.css. */
html,body{height:100%;background:#fff;overflow:hidden;color-scheme:light}
body{display:flex;flex-direction:column}
.preview-label{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #deded8;background:var(--mezaj-preview-cream);font-size:12px;line-height:1.4;color:#555}
.preview-label strong{color:#b4442f;white-space:nowrap}
.preview-label button{margin-left:auto;min-height:32px;padding:4px 8px;color:#b4442f;font:inherit;background:none;border:0;text-decoration:underline;cursor:pointer}
#checkout-screen{flex:1;min-height:0;width:100%;overflow:hidden}
#checkout-screen>.scrollarea{height:100%;overflow-y:auto}
.dialog{max-height:92%;overflow:auto}
.phurl{display:none}
:focus-visible{outline:2px solid #b4442f;outline-offset:3px}
.btn.of-cta{text-align:center;text-decoration:none;display:block}
body[data-preview-theme="dark"]{background:#281d26;color-scheme:dark}
body[data-preview-theme="dark"] .preview-label{background:#281d26;color:#aaa;border-color:#333}
body[data-preview-theme="dark"] .preview-label :is(strong,button){color:#ddd}
@media(max-width:600px){
 .preview-label{gap:8px;padding:8px 12px;font-size:11px;flex-wrap:wrap}
 .preview-label span{flex-basis:100%;order:3}
 .overlay{padding:10px}
 .dialog{padding:18px}
 .dialog .btn{white-space:normal}
 .bseg{flex-wrap:wrap}
}

body{--page-bg:var(--mezaj-preview-cream)}