/* ============================================================================
   Sticker studio (new-experience page) — phone app layout.
   Only active while <html> has .sx-app (set by dev-studio-phone.js on portrait phones).
   Step 1 "Design Your Sticker" (#sxSpecs): shape / size / finish / quantity, then START DESIGNING.
   Step 2 editor: spec summary bar → big tool tabs → canvas (floating Check design / Share / zoom) →
   edit bar → price + Add to Cart.
   ========================================================================== */

/* ── step 1: specs screen ───────────────────────────────────────────────── */
#sxSpecs{display:none}
html.sx-app #stickerStudio #sxSpecs{position:fixed;left:0;right:0;top:56px;bottom:0;z-index:1200;display:flex;flex-direction:column;background:#f6f9fc;font-family:Inter,Arial,sans-serif;color:#13233a}
html.sx-app #stickerStudio #sxSpecs[hidden]{display:none!important}
html.sx-app #stickerStudio #sxSpecs .sxs-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 18px 22px}
html.sx-app #stickerStudio #sxSpecs .sxs-head{text-align:center;margin:2px 0 16px}
html.sx-app #stickerStudio #sxSpecs .sxs-head h2{font-size:25px;line-height:1.15;font-weight:800;letter-spacing:-.4px;margin:0 0 6px;color:#0f1d31}
html.sx-app #stickerStudio #sxSpecs .sxs-head p{font-size:15px;line-height:1.35;color:#5f7590;margin:0}
html.sx-app #stickerStudio #sxSpecs .sm-spec-options{display:block!important;position:static!important;inset:auto!important;width:auto!important;max-width:none!important;max-height:none!important;margin:0 0 20px!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:none!important;overflow:visible!important;z-index:auto!important}
html.sx-app #stickerStudio #sxSpecs .sm-spec-options h3{display:flex!important;align-items:center;gap:6px;margin:0 0 10px!important;padding:0!important;font-size:13px!important;font-weight:800!important;letter-spacing:.8px!important;text-transform:uppercase;color:#6a7f99!important;border:0!important}
html.sx-app #stickerStudio #sxSpecs .sm-spec-options h3 svg{display:none}
/* shape cards */
html.sx-app #stickerStudio #sxSpecs .sl2-shape-grid,html.sx-app #stickerStudio #sxSpecs .sms-shapes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:104px!important;height:auto!important;padding:12px 6px!important;margin:0!important;border:1.5px solid #dbe4ef!important;border-radius:16px!important;background:#fff!important;color:#2b3d55!important;box-shadow:none!important;transform:none!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card .sl2-shape-icon{margin:0!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card .sl2-shape-icon img{display:block!important;width:68%!important;height:68%!important;object-fit:contain!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card span{font-size:13px!important;font-weight:800!important;letter-spacing:.5px!important;text-transform:uppercase}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card.active{border-color:#2475db!important;background:#eef5ff!important;color:#1d63c4!important;box-shadow:0 0 0 1px #2475db inset!important}
/* size / finish / quantity pills */
html.sx-app #stickerStudio #sxSpecs .sms-sizes{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html.sx-app #stickerStudio #sxSpecs .sms-size-label,html.sx-app #stickerStudio #sxSpecs .sms-finish-btn,html.sx-app #stickerStudio #sxSpecs .sms-qty-pre{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:48px!important;height:48px!important;padding:0 10px!important;margin:0!important;border:1.5px solid #dbe4ef!important;border-radius:12px!important;background:#fff!important;color:#203248!important;font-size:16px!important;font-weight:700!important;box-shadow:none!important;transform:none!important;cursor:pointer}
html.sx-app #stickerStudio #sxSpecs .sms-size-label{flex:1 0 calc(20% - 8px)!important;min-width:56px!important}
html.sx-app #stickerStudio #sxSpecs .sms-size-radio:checked+.sms-size-label,html.sx-app #stickerStudio #sxSpecs .sms-finish-btn.active,html.sx-app #stickerStudio #sxSpecs .sms-qty-pre.active{background:#2475db!important;border-color:#2475db!important;color:#fff!important}
html.sx-app #stickerStudio #sxSpecs .sms-finish-opts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
html.sx-app #stickerStudio #sxSpecs .sms-finish-swatch{width:18px!important;height:18px!important;flex:0 0 18px}
html.sx-app #stickerStudio #sxSpecs .sms-qty-presets{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important}
html.sx-app #stickerStudio #sxSpecs .sms-qty-pre.sms-locked{background:#f1f4f8!important;border-color:#e6ebf1!important;color:#b2bccb!important}
html.sx-app #stickerStudio #sxSpecs .sms-min-qty-hint{font-size:13px!important;margin-top:10px!important}
html.sx-app #stickerStudio #sxSpecs .sms-custom-size{margin-top:12px!important}
html.sx-app #stickerStudio #sxSpecs .sms-custom-input{height:48px!important;font-size:17px!important;border-radius:12px!important}
html.sx-app #stickerStudio #sxSpecs #sxCustomHint{font-size:13px}
/* footer: price + START DESIGNING */
html.sx-app #stickerStudio #sxSpecs .sxs-foot{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e3eaf3;box-shadow:0 -8px 24px rgba(16,42,77,.06)}
html.sx-app #stickerStudio #sxSpecs .sxs-price{display:flex;flex-direction:column;min-width:0}
html.sx-app #stickerStudio #sxSpecs .sxs-price b{font-size:27px;line-height:1.05;font-weight:800;color:#0f1d31;white-space:nowrap}
html.sx-app #stickerStudio #sxSpecs .sxs-price small{font-size:13px;color:#6a7f99;white-space:nowrap}
html.sx-app #stickerStudio #sxSpecs #sxsGo{flex:1;min-height:56px;border:0;border-radius:14px;background:#2475db;color:#fff;font:800 17px/1 Inter,Arial,sans-serif;letter-spacing:.6px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 20px rgba(36,117,219,.28);cursor:pointer}
html.sx-app #stickerStudio #sxSpecs #sxsGo:active{transform:scale(.98)}
html.sx-app #stickerStudio #sxSpecs #sxsGo svg{width:20px;height:20px}

/* ── step 2: editor ─────────────────────────────────────────────────────── */
html.sx-app .sm-codex #stickerStudio .sms-editor{grid-template-rows:48px 78px minmax(0,1fr) auto!important;overflow:hidden!important}
/* spec summary bar (tap to change specs) */
html.sx-app #sxSpecBar{grid-row:1;grid-column:1;display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 14px;border:0;border-bottom:1px solid #e3eaf3;background:#fff;font:600 15px/1 Inter,Arial,sans-serif;color:#2b3d55;text-align:left;cursor:pointer}
#sxSpecBar{display:none}
html.sx-app #sxSpecBar .sxb-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.sx-app #sxSpecBar .sxb-price{font-weight:800;color:#1d63c4}
html.sx-app #sxSpecBar .sxb-edit{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;background:#eef5ff;color:#1d63c4;font-size:14px;font-weight:700}
html.sx-app #sxSpecBar .sxb-edit svg{width:15px;height:15px}
/* big tool tabs */
html.sx-app .sm-codex #stickerStudio .sms-toolstrip{grid-row:2!important;height:78px!important;padding:7px 10px!important;gap:8px!important;justify-content:stretch!important;background:#fff!important}
html.sx-app .sm-codex #stickerStudio .sms-toolstrip .sm-rail-button{flex:1 1 0!important;width:auto!important;min-width:0!important;height:64px!important;min-height:64px!important;gap:6px!important;border-radius:14px!important;padding:6px 4px!important;background:#f3f7fc!important;color:#33475f!important;border:0!important;box-shadow:none!important}
html.sx-app .sm-codex #stickerStudio .sms-toolstrip .sm-rail-button svg{width:27px!important;height:27px!important;stroke-width:1.8}
html.sx-app .sm-codex #stickerStudio .sms-toolstrip .sm-rail-button span{font-size:14px!important;font-weight:700!important;letter-spacing:0!important}
html.sx-app .sm-codex #stickerStudio .sms-toolstrip .sm-rail-button[aria-expanded="true"]{background:#2475db!important;color:#fff!important}
html.sx-app .sm-codex #stickerStudio:not(.sm-has-art) .sms-toolstrip .sm-rail-button:first-child{background:#2475db!important;color:#fff!important}
/* canvas + edit bar */
html.sx-app .sm-codex #stickerStudio .sm-canvas-workspace{grid-row:3!important;grid-column:1!important;grid-template-rows:minmax(0,1fr) auto!important;min-height:0!important}
html.sx-app .sm-codex #stickerStudio .sm-canvas-workspace>.sms-canvas-area{padding:10px 8px 60px!important;overflow:clip!important}
html.sx-app .sm-codex #stickerStudio .sm-canvas-tools{padding:4px 6px 4px!important;border-top:1px solid #e3eaf3!important;background:#fff!important}
html.sx-app .sm-codex #stickerStudio .sm-editbar{gap:0!important;width:100%!important}
html.sx-app .sm-codex #stickerStudio .sm-editbar .sm-toolbar-action{height:60px!important;min-height:60px!important;gap:5px!important;padding:6px 2px!important;border-radius:12px!important}
html.sx-app .sm-codex #stickerStudio .sm-editbar .sm-toolbar-action svg{width:25px!important;height:25px!important}
html.sx-app .sm-codex #stickerStudio .sm-editbar .sm-toolbar-action span{font-size:12px!important;font-weight:600!important}
/* floating Check design / Share (bottom-left) and zoom (bottom-right) on the canvas */
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities{position:absolute!important;left:10px!important;right:10px!important;bottom:10px!important;z-index:34!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;margin:0!important;padding:0!important;flex:none!important;pointer-events:none}
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities>*{pointer-events:auto}
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities #sxCheckDesign,html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities #btnShareLink{position:static!important;flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;border-radius:50%!important;border:1px solid #d6e3f1!important;background:rgba(255,255,255,.96)!important;box-shadow:0 3px 12px rgba(36,73,113,.16)!important;font-size:0!important;color:#2b3d55!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;transform:none!important;box-sizing:border-box!important}
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities #sxCheckDesign svg,html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities #btnShareLink svg{width:20px!important;height:20px!important;margin:0!important}
html.sx-app .sm-codex #stickerStudio #btnDownload,html.sx-app .sm-codex #stickerStudio #sxCheckDesign span{display:none!important}
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities #smsZoomControls{position:static!important;margin-left:auto!important;display:flex!important;align-items:center!important;height:44px!important;min-height:44px!important;transform:none!important;box-sizing:border-box!important;padding:2px!important;border-radius:999px!important;border:1px solid #d6e3f1!important;background:rgba(255,255,255,.96)!important;box-shadow:0 3px 12px rgba(36,73,113,.16)!important}
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities #smsZoomControls .sms-zb{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border:0!important;border-radius:50%!important;background:none!important;font-size:20px!important;font-weight:600!important;color:#2b3d55!important}
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities #smsZoomControls #btnZoomReset{width:auto!important;min-width:48px!important;font-size:13px!important;border-radius:999px!important}
html.sx-app.sx-editing .sm-codex #stickerStudio .sms-canvas-area>.sm-canvas-utilities{display:none!important}
html.sx-app .sm-codex #stickerStudio:not(.sm-has-art) .sms-canvas-area>.sm-canvas-utilities{display:none!important}
/* resolution note: only when it matters (low / cut problem), as a chip above the floating buttons */
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>#smCodexFeedback{position:absolute!important;left:50%!important;right:auto!important;bottom:62px!important;transform:translateX(-50%)!important;max-width:calc(100% - 24px)!important;width:max-content!important;padding:7px 12px!important;border-radius:10px!important;background:#fff7e6!important;border:1px solid #f5d48a!important;color:#7a5204!important;font-size:12px!important;line-height:1.35!important;text-align:center!important;z-index:33!important;box-shadow:0 3px 10px rgba(0,0,0,.08)!important}
html.sx-app .sm-codex #stickerStudio .sms-canvas-area>#smCodexFeedback:not([data-level="low"]){display:none!important}
html.sx-app.sx-editing .sm-codex #stickerStudio .sms-canvas-area>#smCodexFeedback{display:none!important}
/* bottom bar: price + Add to Cart + cart (spec cards replaced by the summary bar and step 1) */
html.sx-app .sm-codex #stickerStudio .sms-config{grid-row:4!important;height:auto!important;grid-template-rows:auto!important;padding:0 12px calc(env(safe-area-inset-bottom)) !important;border-top:1px solid #e3eaf3!important}
html.sx-app .sm-codex #stickerStudio .sms-config>.sms-config-section{display:none!important}
html.sx-app .sm-codex #stickerStudio .sms-price-box{grid-row:1!important;border-top:0!important;padding:10px 0 12px!important;grid-template-columns:auto minmax(0,1fr) auto!important;column-gap:12px!important}
html.sx-app .sm-codex #stickerStudio #btnATCBottom{height:52px!important;min-height:52px!important;font-size:17px!important;border-radius:14px!important}
html.sx-app .sm-codex #stickerStudio #sxCartBtn{height:52px!important;min-height:52px!important;width:52px!important;border-radius:14px!important}
html.sx-app .sm-codex #stickerStudio #sxCartBtn svg{width:22px!important;height:22px!important}
html.sx-app .sm-codex #stickerStudio .sms-price-total{font-size:25px!important}
html.sx-app .sm-codex #stickerStudio #unitPrice{font-size:12px!important}
/* bottom-sheet drawers sit above the bottom bar */
html.sx-app .sm-codex #stickerStudio .sm-tool-panel{max-height:52vh!important}
/* while step 1 is open the editor stays underneath, untouched */
html.sx-app.sx-specs-open .sm-codex #stickerStudio .sms-editor{visibility:hidden}

/* shape cards: the SM logo inside each shape (as the old builder showed) */
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card .sl2-shape-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:58px!important;height:58px!important;background:#f3f7fc!important;border:2px solid #9db6d3!important;border-radius:6px!important;box-shadow:none!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-icon img{display:block!important;width:68%!important;height:68%!important;object-fit:contain!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card .sl2-shape-diecut{border-style:dashed!important;border-color:#2475db!important;border-radius:12px!important;background:#fff!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card .sl2-shape-circle{border-radius:50%!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card .sl2-shape-rect{width:66px!important;height:46px!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card .sl2-shape-oval{width:66px!important;height:46px!important;border-radius:50%!important}
html.sx-app #stickerStudio #sxSpecs .sl2-shape-card .sl2-shape-rounded{border-radius:16px!important}
html.sx-app #stickerStudio #sxSpecs .sms-shape-btn.active .sl2-shape-icon{border-color:#2475db!important;background:#e4efff!important}

/* tool drawers: full-width bottom sheet; the sticker slides up above it (dev-studio-phone.js) */
html.sx-app .sm-codex #stickerStudio .sm-tool-panel{left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;max-width:none!important;margin:0!important;max-height:46vh!important;border:0!important;border-radius:20px 20px 0 0!important;box-shadow:0 -10px 30px rgba(16,42,77,.18)!important;padding-bottom:env(safe-area-inset-bottom)!important;z-index:150!important}
html.sx-app .sm-codex #stickerStudio .sm-tool-panel .sm-panel-head{position:sticky!important;top:0!important;z-index:2!important;background:#fff!important;padding:16px 16px 8px!important}
html.sx-app .sm-codex #stickerStudio .sm-tool-panel .sm-panel-head:before{content:"";position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#d3dce8}
html.sx-app .sm-codex #stickerStudio .sm-tool-panel .sm-panel-head small{display:none!important}
html.sx-app .sm-codex #stickerStudio .sm-tool-panel .sm-panel-head strong{font-size:18px!important}
html.sx-app .sm-codex #stickerStudio .sm-tool-panel .sms-tool-group{padding:8px 16px 16px!important}
html.sx-app .sm-codex #stickerStudio #previewArea{transition:transform .25s ease}
/* the old bottom-sheet drag handle under the price (a stray grey bar) */
@media(max-width:768px){.sm-codex #stickerStudio .sms-config::before{display:none!important;content:none!important}}
html.sx-app .sm-codex #stickerStudio .sm-tool-panel .sm-panel-close{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;font-size:22px!important}
html.sx-app .sm-codex #stickerStudio #btnDoneAdjust{min-height:44px!important;height:44px!important;padding:0 22px!important;font-size:16px!important;border-radius:12px!important}
html.sx-app #sl2-proof-ol [data-sx-enh]{min-height:40px!important;padding:0 14px!important}
html.sx-app .sm-codex #stickerStudio .sms-price-box{grid-template-rows:auto auto!important;row-gap:0!important;align-items:center!important;align-content:center!important;min-height:76px!important;height:auto!important}

/* One mobile workspace: desktop categories, one total and one purchase action. */
@media(max-width:768px){
 .sm-codex .sm-codex-bar{height:64px!important;padding:8px 10px!important;gap:8px!important;justify-content:space-between!important}
 .sm-codex .sm-codex-bar .sm-codex-brand{margin:0!important;width:128px!important;min-width:72px;flex:1 1 128px;max-width:144px;justify-content:center;overflow:hidden}
 .sm-codex .sm-codex-actions{display:flex!important;align-items:center;gap:6px!important;flex:none;min-width:0}
 .sm-codex .sm-codex-actions .sm-back-shop,.sm-codex .sm-codex-actions .sm-codex-status{display:none!important}
 #sxHeaderTotal{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:52px;gap:3px;color:#264e79}
 #sxHeaderTotal[hidden]{display:none!important}
 #sxHeaderTotal span{font:600 10px/1 Inter,Arial,sans-serif;color:#8294a9;text-transform:uppercase;letter-spacing:.6px}
 #sxHeaderTotal strong{font:800 18px/1.1 Inter,Arial,sans-serif;white-space:nowrap}
 .sm-codex .sm-codex-actions #smCodexHelp{display:none!important}
 .sm-codex .sm-codex-actions #sxCartBtn{display:grid!important;place-items:center;position:relative;flex:none;height:44px!important;min-height:44px!important;width:44px!important;min-width:44px!important;padding:6px!important;border:1px solid #dce3ed!important;border-radius:10px;background:#f3f4f6!important;color:#528bd0!important;font:600 12px/1.2 Inter,Arial,sans-serif!important}
 .sm-codex .sm-codex-actions #sxCartBtn svg{width:22px;height:22px}
 .sm-codex .sm-codex-actions #sxCartBtn:hover{background:#e4efff!important;color:#2878dc!important}
 .sm-codex .sm-codex-actions #sxCartBtn:focus-visible{outline:2px solid #216ac5;outline-offset:2px}
 html.sx-app .sm-codex #stickerStudio .sms-editor{inset:64px 0 0!important;top:64px!important;height:calc(100dvh - 64px)!important;grid-template-rows:42px 80px minmax(0,1fr) 62px!important;overflow:hidden!important}
 html.sx-app #sxSpecBar{height:42px;padding:0 12px;font-size:13px;gap:8px}
 html.sx-app #sxSpecBar .sxb-price{display:none}
 html.sx-app #sxSpecBar .sxb-edit{height:32px;font-size:12px;padding:0 10px}
 html.sx-app .sm-codex #stickerStudio .sms-toolstrip{display:none!important}
 html.sx-app .sm-codex #stickerStudio .sm-tool-rail{grid-row:2;grid-column:1;display:flex;flex-direction:row;align-items:center;gap:6px;min-width:0;padding:6px 10px;background:#f3f4f7;border-bottom:1px solid #e0e4eb;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#c7d7e9 transparent}
 html.sx-app .sm-codex #stickerStudio .sm-tool-category{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 80px;gap:6px;height:62px;min-height:62px;padding:6px 2px;border:1px solid transparent;border-radius:11px;background:transparent;color:#626b78;font:600 11px/1.25 Inter,Arial,sans-serif;cursor:pointer}
 html.sx-app .sm-codex #stickerStudio .sm-tool-category svg{width:26px;height:26px;flex:none;color:#528bd0;stroke-width:1.8}
 html.sx-app .sm-codex #stickerStudio .sm-tool-category:hover,html.sx-app .sm-codex #stickerStudio .sm-tool-category[aria-expanded=true]{background:#e1ecfd;border-color:#bfd5f3;color:#246cc3}
 html.sx-app .sm-codex #stickerStudio .sm-tool-category:focus-visible{outline:2px solid #4389df;outline-offset:-2px}
 html.sx-app .sm-codex #stickerStudio .sms-config{grid-row:4!important;padding:6px 12px calc(6px + env(safe-area-inset-bottom))!important;min-height:62px!important}
 html.sx-app .sm-codex #stickerStudio .sms-price-box{display:flex!important;align-items:center!important;min-height:0!important;height:auto!important;padding:0!important;width:100%!important}
 html.sx-app .sm-codex #stickerStudio .sms-price-box>:not(#btnATCBottom){display:none!important}
 html.sx-app .sm-codex #stickerStudio #btnATCBottom{width:100%!important;flex:1!important;min-height:48px!important;height:48px!important;border-radius:11px!important;font-size:16px!important}
 html.sx-app #stickerStudio #sxSpecs{top:64px}
 html.sx-app .sm-codex #stickerStudio #smToolPanel{max-height:72dvh!important;overflow-y:auto!important;overscroll-behavior:contain;padding-bottom:16px!important}
 html.sx-app .sm-codex #stickerStudio #smToolPanel[hidden],html.sx-app .sm-codex #stickerStudio #smToolPanel [hidden]{display:none!important}
 html.sx-app .sm-tool-intro{padding:0 16px 8px;color:#6a7d92;font:400 13px/1.5 Inter,Arial,sans-serif}
 html.sx-app .sm-docked-tool>div{width:100%!important;max-width:none!important;max-height:none!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
 html.sx-app .sm-docked-tool>div>h3,html.sx-app .sm-docked-tool .sms-modal-close,html.sx-app .sm-docked-tool #sl2agX,html.sx-app .sm-docked-tool #sl2agCx,html.sx-app .sm-docked-tool #smsTextCancel,html.sx-app .sm-docked-tool#sl2-aigen-ol>div>div:first-child{display:none!important}
 html.sx-app .sm-docked-tool :is(input[type=text],textarea,select),html.sx-app .sm-library-controls :is(input,select){width:100%!important;min-height:44px;min-width:0;box-sizing:border-box;border:1px solid #dce3ed!important;border-radius:10px!important;background:#f8fafc!important;color:#24476f!important;padding:10px!important;font-size:16px!important}
 html.sx-app .sm-library-controls{display:grid;gap:8px;margin-bottom:14px}
 html.sx-app .sm-docked-tool .sm-text-font-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px}
 html.sx-app #smsTextPreview{min-height:72px!important;background:#f3f5f8!important;border:0!important;border-radius:12px!important}
 html.sx-app .sm-docked-tool #smsTextAdd,html.sx-app .sm-docked-tool #sl2agGo,html.sx-app .sm-upload-action,html.sx-app .sm-qr-shortcut{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;width:100%;padding:10px;border:0!important;border-radius:11px!important;background:#2878dc!important;color:#fff!important;font:600 15px/1.3 Inter,Arial,sans-serif!important;cursor:pointer}
 html.sx-app .sm-upload-action svg{width:24px;height:24px}
 html.sx-app .sm-upload-formats,html.sx-app .sm-upload-empty,html.sx-app .sm-library-empty{color:#6a7d92;font:400 13px/1.5 Inter,Arial,sans-serif}
 html.sx-app .sm-gallery-title{margin:18px 0 10px;font:600 13px/1.4 Inter,Arial,sans-serif;color:#536b86}
 html.sx-app .sm-upload-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 html.sx-app .sm-upload-thumb{display:grid;place-items:center;gap:6px;padding:8px;border:1px solid #dce3ed;border-radius:10px;background:#f7f9fc;color:#536b86}
 html.sx-app .sm-upload-thumb img{width:100%;height:80px;object-fit:contain}
 html.sx-app #smToolPanel .sms-modal-grid,html.sx-app .sm-docked-tool div[style*="repeat(4,1fr)"]{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
 html.sx-app #smToolPanel :is(.sms-modal-item,.sms-template-card){display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:84px;min-width:0;padding:10px 4px!important;border:1px solid #e1e6ee!important;border-radius:11px!important;background:#f3f4f6!important;color:#536b86}
 html.sx-app #smToolPanel :is(.sms-modal-item,.sms-template-card)>svg,html.sx-app #smToolPanel .sms-tpl-icon{width:32px!important;height:32px!important;margin:0!important}
 html.sx-app #smToolPanel :is(.sms-modal-item,.sms-template-card) span{font-size:12px!important;line-height:1.3;overflow-wrap:anywhere}
 html.sx-app #smToolPanel :is(.sms-tool-icon,.sms-tool-action){height:56px!important;min-height:56px!important;padding:6px 3px!important;gap:5px!important}
 html.sx-app #smToolPanel :is(.sms-tool-icon,.sms-tool-action) svg{width:23px!important;height:23px!important}
 html.sx-app #smToolPanel :is(.sms-tool-icon,.sms-tool-action) span{font-size:12px!important;line-height:1.25!important}
 html.sx-app #smToolPanel .sms-tool-group-label{font-size:12px!important;line-height:1.4!important;text-align:left;margin-bottom:10px!important}
 html.sx-app #smToolPanel .sl2-ag-chip{min-height:40px;border:1px solid #e1e6ee!important;border-radius:9px;background:#f3f4f6!important;color:#637183!important;font-size:12px!important}
 html.sx-app #smToolPanel .sl2-ag-chip.sl2-ag-active,html.sx-app #smToolPanel .sl2-ag-chip:hover{background:#e1edff!important;border-color:#9cbff0!important;color:#226ecb!important}
 html.sx-app .sm-codex #stickerStudio .sm-editbar{overflow-x:auto!important;scrollbar-width:none;justify-content:flex-start!important}
 html.sx-app .sm-codex #stickerStudio .sm-editbar .sm-toolbar-action{flex:0 0 48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;gap:4px!important}
 html.sx-app .sm-codex #stickerStudio .sm-editbar .sm-toolbar-action svg{width:22px!important;height:22px!important}
 html.sx-app .sm-codex #stickerStudio .sm-editbar .sm-toolbar-action span{font-size:10px!important}
 html.sx-app #stickerStudio:has(#sxLayers.open) #smsTextToolbar,html.sx-app #stickerStudio:has(#smToolPanel:not([hidden])) #smsTextToolbar{display:none!important}
}
@media(max-width:768px) and (max-height:500px){
 html.sx-app .sm-codex #stickerStudio .sms-editor{grid-template-rows:36px 68px minmax(260px,1fr) 56px!important;overflow-y:auto!important;overscroll-behavior:contain}
 html.sx-app #sxSpecBar{height:36px}
 html.sx-app .sm-codex #stickerStudio .sm-tool-category{height:54px;min-height:54px}
 html.sx-app .sm-codex #stickerStudio .sms-config{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;min-height:56px!important;height:56px!important;padding:4px 12px!important;z-index:1000}
 html.sx-app .sm-codex #stickerStudio #btnATCBottom{min-height:48px!important;height:48px!important}
}

/* Merchant finish labels remain readable alongside their swatches. */
html.sx-app #stickerStudio #sxSpecs .sms-finish-btn{flex-direction:column!important;gap:4px!important;font-size:12px!important;line-height:1.1!important;height:56px!important;min-height:56px!important}
html.sx-app #stickerStudio #sxSpecs .sms-finish-btn>span:not(.sms-finish-swatch){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}