/* Site base (style.css tokens + reset + .ps-button from premium-site.css), then the frame-filling layout (revision 2). */
:root{--paper:#faf9f6;--ink:#292925;--muted:#65645d;--line:#d7d5cc;--gutter:clamp(24px,4.5vw,88px);--ease:cubic-bezier(.22,.61,.36,1);--e-head:48px;--e-ust:44px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6;display:flex;flex-direction:column;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid currentColor;outline-offset:2px}
h3{font-family:'Manrope',sans-serif;font-weight:400}
[hidden]{display:none!important}
html[dir="rtl"] body{font-family:Tahoma,Arial,sans-serif}
html[dir="rtl"] h3{font-family:Tahoma,Arial,sans-serif;letter-spacing:0;line-height:1.45;font-weight:400}
html[dir="rtl"] .art-studio-signature{direction:ltr}
.ps-button{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid var(--line);padding:13px 20px;min-height:46px;font-size:12px;line-height:1.4;text-align:center;background:transparent;color:var(--ink);cursor:pointer;transition:background .18s,border-color .18s}
.ps-button:hover,.ps-button[aria-pressed=true]{background:#e8e5dc;border-color:#b8b3a8}
.ps-button:disabled{opacity:.4;cursor:default}

/* Header: single-product picker (left) + signature (right). Only shown when the collection has single pieces. */
.e-head{flex:none;height:var(--e-head);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 0 12px;border-bottom:1px solid var(--line);background:var(--paper);min-width:0}
.e-head .art-studio-signature{font-size:21px;flex:none}
.e-head .art-studio-signature img{width:36px!important;height:21px!important}
.e-singles{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.e-select{min-width:0;max-width:min(360px,100%);flex:0 1 auto;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);font:13px/1.2 'Manrope',system-ui,sans-serif;cursor:pointer}
.e-single-clear{flex:none;font-size:12px;padding:6px 10px;border:1px solid var(--line)!important;border-radius:3px;background:#fff!important}

/* Main area fills the rest of the frame exactly; no document scroll for the configurator. */
[data-modis3b-section]{position:relative;flex:1 1 auto;min-height:0;padding:0;scroll-margin-top:0;display:flex;flex-direction:column}
[data-modis3b-section]>[data-m3b-mount]{flex:1 1 auto;min-height:0}
.e-status{margin:0;padding:24px 18px;color:var(--muted);font-size:14px}
.e-status[hidden],.e-status:empty{display:none}
[data-modis3b-section]>.ps-button{margin:0 18px 24px;align-self:flex-start}
body.e-unknown [data-modis3b-section]{display:grid;place-items:center;text-align:center}

/* Desktop: original grid, 300px library column; canvas takes the remaining height; total bar always visible. */
[data-modis3b-section]>.m3b{height:100%;min-height:0;border:0;grid-template-rows:minmax(0,1fr)}
[data-modis3b-section]>.m3b .m3b-yan{max-height:none;min-height:0;overflow:hidden}
[data-modis3b-section]>.m3b .m3b-ana{min-height:0}
[data-modis3b-section] .m3b-ust{flex:none}
[data-modis3b-section] .m3b-gorunum{flex:1 1 auto;min-height:160px}
[data-modis3b-section] .m3b-alt{flex:none}
.m3b.is-tam,.m3b:fullscreen{height:100%}

/* Single viewer fills the main area. */
.e-single-stage{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.e-single-stage>div{flex:1 1 auto;min-height:0}
.e-single-stage .m3b-tekil{height:100%;min-height:0;border:0;grid-template-rows:auto minmax(0,1fr) auto}
.e-single-stage .m3b-tekil .m3b-gorunum{min-height:160px}
.e-single-stage .m3b-single-empty{flex:1;border:0;min-height:0}

.e-offscreen{position:fixed;top:0;inset-inline-start:-9999px;opacity:0}
.e-copy{position:fixed;inset-inline:12px;bottom:12px;z-index:10000;display:flex;gap:10px;align-items:end;padding:12px;background:var(--paper);border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.12);font-size:12px}
.e-copy label{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.e-copy textarea{width:100%;min-height:56px;resize:vertical;font:12px/1.4 ui-monospace,monospace;border:1px solid var(--line);padding:6px;background:#fff;color:var(--ink)}

/* Short frames (old 16:9 ratio boxes): keep the canvas usable, allow the document to scroll as a fallback. */
@media(max-height:499px){
 body{overflow:auto;height:auto;min-height:100%}
 [data-modis3b-section]{min-height:calc(100dvh - var(--e-head))}
 [data-modis3b-section]>.m3b{height:auto;min-height:calc(100dvh - var(--e-head));grid-template-rows:minmax(0,1fr)}
 [data-modis3b-section] .m3b-gorunum{min-height:220px}
 [data-modis3b-section]>.m3b .m3b-yan{max-height:calc(100dvh - var(--e-head))}
}

/* Mobile (original ≤820 single-column): toolbar, canvas (~58% of the frame), horizontal module strip, action bar. */
@media(max-width:820px){
 :root{--e-head:44px}
 .e-head{padding:0 10px}
 .e-head .art-studio-signature{font-size:18px}
 .e-head .art-studio-signature img{width:31px!important;height:18px!important}
 .e-select{height:32px;font-size:12px}
 [data-modis3b-section]>.m3b{display:flex;flex-direction:column;height:100%;grid-template-rows:none}
 [data-modis3b-section]>.m3b .m3b-ana{display:contents}
 [data-modis3b-section] .m3b-ust{order:1;position:relative;min-height:var(--e-ust);height:var(--e-ust);padding:0 8px;flex-wrap:nowrap}
 [data-modis3b-section] .m3b-arac{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;justify-content:flex-start;padding:7px 0}
 [data-modis3b-section] .m3b-arac::-webkit-scrollbar{display:none}
 [data-modis3b-section] .m3b-ikon{flex:none;white-space:nowrap;padding:6px 9px}
 /* Status text overlays the top of the canvas instead of wrapping the toolbar. */
 [data-modis3b-section] .m3b-ust .m3b-durum{position:absolute;top:calc(100% + 8px);inset-inline-start:10px;z-index:3;max-width:calc(100% - 130px)!important;font-size:12px;line-height:1.35;background:rgba(250,249,246,.88);padding:4px 8px;border-radius:3px;pointer-events:none}
 [data-modis3b-section] .m3b-ust .m3b-durum:empty{display:none}
 /* Canvas capped near the original 58vh; leftover height goes to the strip so swipes there can scroll the host page. */
 [data-modis3b-section] .m3b-gorunum{order:2;flex:1 1 58%;min-height:200px;max-height:60svh}
 [data-modis3b-section]>.m3b .m3b-yan{order:3;flex:1 0 auto;border-top:1px solid var(--line);border-inline-end:0;overflow:visible}
 [data-modis3b-section] .m3b-bas{display:none}
 [data-modis3b-section] .m3b-kutuphane{padding:8px 10px;gap:8px;overscroll-behavior-x:contain}
 [data-modis3b-section] .m3b-kart{flex:0 0 172px;grid-template-columns:64px 1fr;grid-template-rows:auto auto;padding:6px;gap:2px 8px}
 [data-modis3b-section] .m3b-kucuk{grid-row:1/3;width:64px;height:58px}
 [data-modis3b-section] .m3b-kart-meta strong{font-size:12px;line-height:1.25}
 [data-modis3b-section] .m3b-kart-olcu{font-size:11px}
 [data-modis3b-section] .m3b-kart-dugme{grid-column:1/-1}
 [data-modis3b-section] .m3b-mini{padding:7px 9px}
 [data-modis3b-section] .m3b-aile-ad{font-size:10px;letter-spacing:.12em}
 [data-modis3b-section] .m3b-alt{order:4;padding:6px 10px 8px;gap:6px}
 [data-modis3b-section] .m3b-secim,[data-modis3b-section] .m3b-eylem{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-height:28px}
 [data-modis3b-section] .m3b-secim::-webkit-scrollbar,[data-modis3b-section] .m3b-eylem::-webkit-scrollbar{display:none}
 [data-modis3b-section] .m3b-cip,[data-modis3b-section] .m3b-dugme{flex:none;white-space:nowrap}
 [data-modis3b-section] .m3b-alt .m3b-not{font-size:10px;line-height:1.3}
 /* Signature sits in the canvas' top corner (original moved it to a separate row). */
 [data-modis3b-section] .m3b>.art-studio-signature{position:absolute;top:calc(var(--e-ust) + 10px);bottom:auto;inset-inline-end:12px;margin:0;font-size:18px;z-index:3}
 [data-modis3b-section] .m3b>.art-studio-signature img{width:31px!important;height:18px!important}
 [data-modis3b-section] .m3b-not{padding-inline-end:0}
 .e-single-stage .m3b-tekil{grid-template-rows:auto minmax(0,64svh) auto;align-content:start}
 .e-single-stage .m3b-tekil>.m3b-ust{order:1}
 .e-single-stage .m3b-tekil>.m3b-gorunum{order:2;min-height:0}
 .e-single-stage .m3b-tekil>.m3b-not{order:3;padding:8px 12px!important;min-height:0!important}
 .e-single-stage .m3b-tekil>.art-studio-signature{position:absolute;top:calc(var(--e-ust) + 10px);bottom:auto;right:12px;font-size:18px}
 .e-single-stage .m3b-tekil>.art-studio-signature img{width:31px!important;height:18px!important}
 .e-single-stage .m3b-tekil .m3b-ust{flex-wrap:nowrap;min-height:var(--e-ust)}
 .e-single-stage .m3b-tekil .m3b-arac{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .e-single-stage .m3b-tekil .m3b-ikon{flex:none;white-space:nowrap}
}
@media(max-width:820px) and (max-height:499px){
 [data-modis3b-section]>.m3b{height:auto}
 [data-modis3b-section] .m3b-gorunum{flex:none;height:300px}
}

/* <768: the host's round "art" button sits bottom-right (~64 px + 16 px inset); keep an 80×80 corner free of controls. */
@media(max-width:767px){
 [data-modis3b-section] .m3b-alt{padding-right:88px}
 .e-single-stage .m3b-tekil>.m3b-not{padding-right:88px!important}
}