/* Shared storefront / administration studio. */
/* Soft photographic sweep: neutral stone makes white products readable. */
.sp-studio{--s-ink:#201d2b;--s-muted:#736c82;--s-line:#e6e1eb;--s-paper:#fff;--s-accent:#7544ce;color:var(--s-ink);font:14px/1.5 'Poppins',system-ui,sans-serif;background:var(--s-paper);border:1px solid var(--s-line);border-radius:24px;overflow:hidden;text-align:left}
.sp-studio *{box-sizing:border-box}.sp-studio button,.sp-studio input,.sp-studio select{font:inherit}.sp-studio button{cursor:pointer}.sp-studio button:disabled{opacity:.5;cursor:wait}.sp-studio :focus-visible{outline:3px solid #bd9ded;outline-offset:3px}
.sp-studio .sp-top{padding:20px 24px;display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--s-line)}
.sp-eyebrow{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--s-accent)}.sp-studio h3{font-size:20px;letter-spacing:-.04em;margin:2px 0;font-weight:600}.sp-studio h4{font-size:12px;font-weight:600;margin:0 0 10px}.sp-studio p{margin:0}.sp-studio .sp-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:500px}
.sp-stage{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 40%,#faf8fc,#eae5f0);min-height:470px;overflow:hidden;isolation:isolate}.sp-stage:after{content:'';position:absolute;bottom:8%;left:20%;width:60%;height:8%;background:radial-gradient(ellipse,#55506628,transparent 65%);pointer-events:none;z-index:-1}
.sp-stage canvas{display:block;width:100%;height:100%;touch-action:none}.sp-canvas{position:absolute;inset:0}.sp-controls{padding:22px;max-height:620px;overflow:auto;border-left:1px solid var(--s-line)}.sp-controls label{display:block;font-size:11px;font-weight:500;margin:12px 0 5px;color:var(--s-muted)}.sp-controls input:not([type=range]):not([type=color]):not([type=checkbox]),.sp-controls select{width:100%;padding:10px 11px;border:1px solid var(--s-line);border-radius:9px;background:white;color:var(--s-ink)}.sp-controls input[type=range]{width:100%;accent-color:var(--s-accent)}.sp-controls input[type=color]{width:38px;height:32px;border:0;background:transparent;cursor:pointer}.sp-controls .sp-block{border-top:1px solid var(--s-line);padding-top:16px;margin-top:18px}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;background:#fff;border:1px solid var(--s-line);border-radius:10px;color:var(--s-ink);font-size:12px!important;font-weight:500;transition:background .15s,transform .15s;text-decoration:none}.sp-btn:hover{background:#f2edf9}.sp-btn-primary{background:var(--s-accent);color:white;border-color:var(--s-accent)}.sp-btn-primary:hover{background:#6133b4}.sp-btn-dark{background:#252033;color:white;border-color:#252033}.sp-btn svg{width:15px;height:15px;flex-shrink:0}.sp-btn-wide{width:100%;margin-top:9px}.sp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sp-zonebar{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:6px;pointer-events:none}.sp-zonebar button{pointer-events:auto;background:#ffffffda;backdrop-filter:blur(10px)}.sp-tag{position:absolute;top:20px;left:20px;padding:6px 10px;background:#ffffffb0;border-radius:30px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.sp-hint{position:absolute;top:22px;right:20px;font-size:10px;color:var(--s-muted)}.sp-status{font-size:11px;color:var(--s-muted);padding:12px 22px;min-height:43px;border-top:1px solid var(--s-line)}.sp-status[data-error=true]{color:#a42947;background:#fff5f6}.sp-palette{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.sp-swatch{width:25px;height:25px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #ccc}.sp-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--s-accent)}.sp-drop{position:relative;text-align:center;border:1px dashed #c8b7e2;border-radius:12px;background:#f9f6fd;padding:20px 10px;margin-top:12px}.sp-drop svg{width:24px;height:24px;color:var(--s-accent);margin:0 auto 8px;display:block}.sp-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.sp-drop strong{font-size:12px;display:block}.sp-drop small{font-size:10px;color:var(--s-muted)}.sp-empty{padding:18px;background:#f8f6fb;border-radius:12px;color:var(--s-muted);font-size:12px}.sp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:16px 0}.sp-template{border:1px solid var(--s-line);padding:12px;border-radius:12px;background:white;text-align:left;color:var(--s-ink)}.sp-template img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#eeeaf3;border-radius:8px}.sp-template strong{display:block;margin-top:8px;font-size:12px}.sp-template span{font-size:10px;color:var(--s-muted)}.sp-library{padding:20px 24px;border-top:1px solid var(--s-line)}.sp-surface-preview{width:100%;max-height:100px;object-fit:contain;margin-top:12px;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 0/16px 16px;border-radius:8px}.sp-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--s-muted);background:#eee9f2;font-size:13px;z-index:1}.sp-loading[hidden]{display:none}.sp-checkbox{font-size:12px!important;display:flex!important;gap:8px;align-items:center;color:var(--s-ink)!important}.sp-note{font-size:10px;color:var(--s-muted);margin-top:8px!important}.sp-new-button{margin-left:auto}
@media(max-width:760px){.sp-studio .sp-layout{grid-template-columns:1fr}.sp-stage{min-height:360px}.sp-controls{border-left:0;border-top:1px solid var(--s-line);max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}.sp-controls .sp-block{margin:0;padding:0;border:0}.sp-top{padding:16px!important}.sp-studio h3{font-size:17px}.sp-hint{display:none}.sp-controls>.sp-save{grid-column:1/-1}.sp-studio{border-radius:16px}}
@media(max-width:430px){.sp-controls{grid-template-columns:1fr}.sp-stage{min-height:320px}.sp-top>.sp-btn{padding:8px}.sp-top{gap:8px!important}}
@media(prefers-reduced-motion:reduce){.sp-studio *{animation:none!important;transition:none!important}}
.sp-studio .sp-stage{background:radial-gradient(ellipse at 45% 28%,#faf9f5 0%,#e4e1dc 43%,#c9c6c4 100%)}
.sp-stage:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff55,transparent 42%,#625e7012);box-shadow:inset 0 0 90px #5d59620c}
.sp-stage:after{z-index:0;bottom:14%;left:22%;width:56%;height:10%;background:radial-gradient(ellipse,#40394724,transparent 68%);filter:blur(9px)}
.sp-canvas{z-index:1}.sp-tag,.sp-hint,.sp-zonebar{z-index:2}.sp-loading{z-index:3;background:#e9e6e2}
.sp-studio .sp-btn{border-radius:999px;border-color:#d9d3df;background:#ffffffb8;padding:10px 17px;box-shadow:inset 0 1px 0 #ffffffb3;transition:background .2s,border-color .2s,color .2s}
.sp-studio .sp-btn:hover{background:#fff;border-color:#a79bad;transform:none}
.sp-studio .sp-btn-primary{background:#34283f;color:#fff;border-color:#34283f;box-shadow:none}
.sp-studio .sp-btn-primary:hover{background:#503b62;color:#fff;border-color:#503b62}
.sp-zonebar{padding:5px;border:1px solid #ffffff94;border-radius:999px;background:#f8f6f1b8;backdrop-filter:blur(12px);gap:3px}
.sp-zonebar .sp-btn{background:transparent;border-color:transparent;box-shadow:none;padding:8px 14px}
.sp-zonebar .sp-btn:hover,.sp-zonebar .sp-btn[aria-pressed=true]{background:#fff;border-color:#e3dce7}
[data-theme=dark] .sp-studio{--s-ink:#f1edf5;--s-muted:#b5aabc;--s-line:#443a4c;--s-paper:#241f2b;--s-accent:#c6a4ef}
[data-theme=dark] .sp-studio .sp-stage{background:radial-gradient(ellipse at 46% 30%,#57515f 0%,#36313e 45%,#201d27 100%)}
[data-theme=dark] .sp-stage:before{background:linear-gradient(115deg,#d5c3ec0e,transparent 42%,#100d1738);box-shadow:inset 0 0 90px #100d1720}
[data-theme=dark] .sp-stage:after{background:radial-gradient(ellipse,#09060f70,transparent 68%)}
[data-theme=dark] .sp-studio .sp-btn{background:#332c3c;border-color:#514559;color:#f1edf5;box-shadow:inset 0 1px 0 #ffffff08}
[data-theme=dark] .sp-studio .sp-btn:hover{background:#473a53;border-color:#8d749f}
[data-theme=dark] .sp-studio .sp-btn-primary{background:#cdb0ee;border-color:#cdb0ee;color:#25182f}
[data-theme=dark] .sp-studio .sp-btn-primary:hover{background:#dfc9f7;border-color:#dfc9f7}
[data-theme=dark] .sp-controls input:not([type=range]):not([type=color]):not([type=checkbox]),[data-theme=dark] .sp-controls select{background:#302937;border-color:#514559;color:#f1edf5;color-scheme:dark}
[data-theme=dark] .sp-controls input::placeholder{color:#a899b2}
[data-theme=dark] .sp-zonebar{background:#211b2ace;border-color:#ffffff18}
[data-theme=dark] .sp-zonebar .sp-btn{background:transparent;border-color:transparent}
[data-theme=dark] .sp-zonebar .sp-btn:hover,[data-theme=dark] .sp-zonebar .sp-btn[aria-pressed=true]{background:#493c56;border-color:#665175}
[data-theme=dark] .sp-tag,[data-theme=dark] .sp-hint{color:#d7ccdf;background:#27212cbd;border-color:#ffffff1a}
[data-theme=dark] .sp-loading{background:#36313e;color:#e0d5e8}
[data-theme=dark] .sp-template{background:#302937;border-color:#514559;color:#f1edf5}