.lab-page{background:#ece2e2}.lab-intro{max-width:720px;margin:0 auto;padding:62px 24px 58px}.lab-intro h1{font:900 clamp(42px,6vw,68px)/.95 Arial,sans-serif;letter-spacing:-.04em;margin:0 0 38px}.lab-intro p{font-size:16px;line-height:1.45}.lab-hub{background:#070707;color:#fff;padding:32px max(28px,calc((100% - 1210px)/2)) 70px;text-align:center}.lab-badge{display:inline-block;border:1px solid #6b5935;border-radius:30px;color:#d4b66d;font-weight:800;font-size:12px;padding:8px 14px;letter-spacing:.12em}.lab-hub h2{font:900 clamp(34px,5vw,54px)/1 Arial,sans-serif;margin:22px 0 8px}.lab-hub>p{color:#999;max-width:650px;margin:0 auto 32px}.lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;text-align:left}.lab-tile{position:relative;min-height:340px;overflow:hidden;border-radius:14px;color:#fff;background:#141414}.lab-tile img{position:absolute;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}.lab-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.04) 70%)}.lab-tile div{position:absolute;z-index:1;left:28px;right:28px;bottom:25px}.lab-tile small{color:#dab956;font-weight:900}.lab-tile h3{font:900 26px/1.05 Arial,sans-serif;margin:8px 0 16px}.lab-tile b{font-size:13px}.collections-page{padding:58px 3.2%;background:#ece2e2}.collections-page h1{font:900 clamp(44px,6vw,70px)/1 Arial,sans-serif;margin:0 0 50px}.collections-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #ccc;border-left:1px solid #ccc}.collections-grid a{display:flex;flex-direction:column;min-height:360px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;color:#111;background:#f3eeee;padding:18px;overflow:hidden}.collections-grid a img{width:100%;height:310px;object-fit:cover;margin-top:auto}.studio-body{margin:0;background:#08090c;color:#f7f7f7}.studio-shell{background:#ece2e2;color:#111}.studio-app{max-width:1280px;margin:0 auto;background:#060707;min-height:calc(100vh - 72px);padding:20px}.studio-panel{border:1px solid #242424;border-radius:18px;overflow:hidden;background:#050606}.zone-tabs,.mug-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px}.zone-tabs button,.mug-tabs button{border:1px solid #6f2941;border-radius:28px;background:#0c0c0e;color:#fff;padding:15px 10px;font-weight:800}.zone-tabs button:nth-child(3n){border-color:#744a9b}.zone-tabs button:nth-child(3n+1){border-color:#b18a38}.zone-tabs button.active,.mug-tabs button.active{background:#e2bd5e;color:#181103;box-shadow:0 0 24px #d7ae4755}.zone-tabs small{grid-column:1/-1;text-align:center;color:#777}.tee-workspace{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:24px;max-width:850px;margin:0 auto;padding:16px 25px}.design-stage{position:relative}.tee-stage canvas{display:block;width:100%;max-height:690px;object-fit:contain;background:#141414;border-radius:14px}.stage-upload{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);background:#0b0b0b;color:#fff;border-radius:18px;padding:10px 14px;font-weight:900;font-size:12px;box-shadow:0 6px 20px #0008}.neon-tools,.frame-tools{display:flex;flex-direction:column;gap:11px;justify-content:center}.neon-tools button,.neon-tools label,.frame-tools button,.frame-tools label{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:76px;border:1px solid #7356d8;border-radius:16px;background:#14151a;color:#fff;font-weight:800;cursor:pointer;box-shadow:0 0 16px #6e4cd033}.neon-tools span,.frame-tools span{font-size:11px;margin-top:4px}.neon-tools>*:nth-child(2),.frame-tools>*:nth-child(5){border-color:#d54a9f}.neon-tools>*:nth-child(4),.frame-tools>*:nth-child(6){border-color:#20a9b8}.transform-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:12px 18px;border-top:1px solid #222}.transform-bar label{font-size:12px;color:#bbb}.transform-bar button{background:#17181c;color:#fff;border:1px solid #333;border-radius:8px;padding:9px 13px}.studio-buybar{display:grid;grid-template-columns:150px 1fr 1fr 1.5fr;gap:10px;align-items:center;padding:12px;background:#0e0e10;border-top:1px solid #292929}.studio-buybar>div{display:flex;flex-direction:column}.studio-buybar strong{color:#f3d15c;font-size:24px}.studio-buybar small{color:#74bf48}.studio-buybar fieldset{display:flex;gap:8px;border:0}.studio-buybar fieldset label{background:#222;border-radius:8px;padding:8px}.studio-buybar button{height:48px;border:1px solid #42391f;border-radius:8px;background:#151515;color:#fff;font-weight:900}.studio-buybar .gold,.frame-next{background:linear-gradient(90deg,#ffb200,#ffd452);color:#1c1505}.mug-tabs{grid-template-columns:repeat(3,1fr)}.studio-hint{color:#a9a9a9;margin:4px 10px}.mug-live{height:320px;background:#f5f5f5;border-radius:16px;margin:0 10px;position:relative;overflow:hidden}.mug-live img{height:100%;width:100%;object-fit:contain}.mug-live canvas{position:absolute;inset:0;width:100%;height:100%}.wrap-heading{max-width:520px;margin:10px auto 6px;display:flex;justify-content:space-between;font-size:12px}.wrap-stage{max-width:520px;margin:auto;background:#d3d7df;padding:40px}.wrap-stage canvas{display:block;width:100%;background:#fff;border:4px solid #111}.mug-tools{display:grid;grid-template-columns:repeat(3,125px);gap:6px;justify-content:center;padding:10px}.mug-tools button,.mug-tools label{padding:12px;border:1px solid #6f3758;border-radius:8px;background:#121315;color:#fff;text-align:center;font-weight:800;cursor:pointer}.frame-panel{padding:14px 0 0}.frame-steps{list-style:none;display:flex;justify-content:center;gap:34px;margin:0 0 14px;padding:0}.frame-steps li{width:44px;height:44px;border-radius:50%;background:#20232c;color:#8f96a7;display:grid;place-items:center;font-weight:900;position:relative}.frame-steps li span{position:absolute;top:46px;font-size:10px}.frame-steps li.active{background:#ff2865;color:#fff}.frame-stage-page{max-width:720px;margin:36px auto 0;text-align:center}.frame-stage-page[data-frame-step=design]{display:grid;grid-template-columns:1fr 110px;gap:12px}.frame-design{position:relative;max-width:470px;justify-self:end;background:#fff}.frame-design canvas{display:block;width:100%;aspect-ratio:210/297;background:#fff}.frame-template{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.frame-tools{grid-column:2}.frame-a4{grid-column:1;text-align:left;background:#181b22;padding:12px;border-radius:8px}.frame-a4 b{font-size:24px;margin-right:12px}.frame-transform{grid-column:1/-1}.frame-next,.frame-buy{grid-column:1/-1;width:100%;border:0;border-radius:10px;padding:18px;font-size:17px;font-weight:900}.frame-back{float:left;background:none;color:#fff;border:0}.frame-stage-page h2{clear:both;padding-top:20px;font-size:34px}.frame-choice-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:24px 0}.frame-choice-grid button{min-height:120px;border:2px solid #2d313d;background:#171922;color:#fff;border-radius:10px;padding:8px}.frame-choice-grid button.active{border-color:#ff2865}.frame-choice-grid img{width:100%;aspect-ratio:4/5;object-fit:contain}.size-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:30px 0}.size-cards button{display:flex;flex-direction:column;background:#151720;border:2px solid #2b2f39;border-radius:14px;color:#fff;padding:35px}.size-cards button.active{border-color:#ff2865}.frame-final img{max-width:460px;width:100%;aspect-ratio:4/5;object-fit:contain;background:#eee}.frame-final strong{display:block;font-size:28px;margin:16px}.frame-buy{background:#292929;color:#bbb;margin-top:8px}.studio-status{position:sticky;bottom:0;margin:12px 0 0;padding:11px 15px;background:#17191f;border-left:4px solid #e7c151;color:#ddd;font-size:13px}.final-preview{width:min(700px,94vw);background:#090a0d;color:#fff;border:1px solid #333;border-radius:16px;padding:22px}.final-preview::backdrop{background:#000c}.final-preview>button:first-child{float:right;background:none;border:0;color:#fff;font-size:30px}.final-preview img{width:100%;max-height:65vh;object-fit:contain;background:#fff}.final-preview dl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px}.final-preview dl div{display:contents}.final-preview button[data-action=export]{width:100%;padding:14px;background:#e2bd5e;border:0;font-weight:900}.studio-body[data-type=tee] .studio-shell{display:none}.studio-body[data-type=tee] .studio-app{min-height:100vh}.studio-body[data-type=tee] #tee-studio{border-radius:0} @media(max-width:600px){.studio-body[data-type=tee] .studio-app{padding-top:60px}} /* Source parity: ztees-tshirt-polish.css reserves 60px under the hidden Shopify header on mobile. */ /* Product-linked customizers render inside the recovered Shopify PDP journey. */ .studio-body[data-origin=product-route] .studio-shell{display:grid!important} .studio-body[data-origin=product-route] .studio-app{padding-top:0!important;background-image:none!important} .studio-body[data-type=tee][data-origin=product-route] #studio-app{width:100%;max-width:100vw!important;min-height:100dvh;margin:0;padding-left:0;padding-right:0;border-radius:0} .studio-product-brand{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 6px;background:#000;border-bottom:1px solid #242424;flex-shrink:0;pointer-events:none} .studio-product-brand strong{font-size:14px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:1px} .studio-product-brand strong span{background:#d6b76c;color:#000;font-size:9px;font-weight:900;padding:2px 5px;border-radius:4px;margin-left:5px} .studio-product-brand>b{font-size:11px;color:#8e8e93;font-weight:700} .studio-body[data-type=tee][data-origin=product-route] .zone-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 10px} .studio-body[data-type=tee][data-origin=product-route] .zone-tabs button{padding:7px 5px;border-radius:20px;font-size:10px} .studio-body[data-origin=product-route] .zone-tabs [data-zone=front]{border-color:#2563eb;color:#93c5fd} .studio-body[data-origin=product-route] .zone-tabs [data-zone=left-chest]{border-color:#ef4444;color:#fca5a5} .studio-body[data-origin=product-route] .zone-tabs [data-zone=back]{border-color:#9333ea;color:#d8b4fe} .studio-body[data-origin=product-route] .zone-tabs [data-zone=back-neck]{border-color:#f59e0b;color:#fde68a} .studio-body[data-origin=product-route] .zone-tabs [data-zone=left-sleeve]{border-color:#10b981;color:#6ee7b7} .studio-body[data-origin=product-route] .zone-tabs [data-zone=right-sleeve]{border-color:#06b6d4;color:#67e8f9} .studio-body[data-origin=product-route] .zone-tabs [data-zone].active{background:#e2bd5e;color:#181103;box-shadow:0 0 24px #d7ae4755} @media(max-width:600px){.studio-body[data-origin=product-route] .studio-shell,.studio-body[data-origin=product-route] .category-bubbles,.studio-body[data-origin=product-route] .studio-product-brand{display:none!important}.studio-body[data-type=tee][data-origin=product-route] #studio-app{padding:60px 0 0!important;background-image:linear-gradient(to bottom,#ece2e2 0 60px,transparent 60px)!important}} @media(max-width:760px){.lab-intro{padding:38px 20px}.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lab-tile{min-height:280px}.lab-tile div{left:12px;right:12px;bottom:12px}.lab-tile small{font-size:9px}.lab-tile h3{font-size:14px;margin:7px 0 11px}.lab-tile b{font-size:10px}.collections-grid{grid-template-columns:repeat(2,1fr)}.collections-grid a{min-height:250px}.collections-grid a img{height:205px}.studio-app{padding:0}.zone-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 4px 8px;overflow:visible}.zone-tabs button{min-width:0;min-height:44px;padding:10px 6px}.tee-workspace{grid-template-columns:minmax(0,1fr) 50px;gap:5px;padding:4px 5px 8px}.tee-stage{aspect-ratio:3/4}.tee-stage canvas{height:100%;max-height:none;object-fit:cover}.neon-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.neon-tools button,.neon-tools label{min-height:62px}.studio-buybar{grid-template-columns:1fr 1fr}.studio-buybar fieldset{overflow:auto}.mug-live{height:240px}.wrap-stage{margin:0 8px;padding:18px}.mug-tools{grid-template-columns:repeat(3,1fr)}.frame-stage-page{margin:42px 10px 0}.frame-stage-page[data-frame-step=design]{grid-template-columns:1fr}.frame-design{justify-self:center}.frame-tools{grid-column:1;display:grid;grid-template-columns:repeat(3,1fr)}.frame-tools button,.frame-tools label{min-height:65px}.frame-a4{grid-column:1}.frame-choice-grid{grid-template-columns:repeat(2,1fr)}.size-cards{grid-template-columns:1fr}.frame-steps{gap:22px}.studio-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}} .mug-source-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#f5f5f5}.mug-live canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:auto}.mug-live img{position:relative;z-index:0}.mug-live #mug-three-canvas{z-index:3;cursor:grab;touch-action:none}.mug-live #mug-three-canvas:active{cursor:grabbing}.mug-angle-controls{position:absolute;z-index:4;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:5px;padding:5px;border-radius:999px;background:#07090dbd;backdrop-filter:blur(8px)}.mug-angle-controls button{border:1px solid #ffffff42;border-radius:999px;background:#15171d;color:#fff;padding:6px 10px;font-size:10px;font-weight:800}.mug-angle-controls button.active{background:#e2bd5e;color:#181103;border-color:#e2bd5e} .final-preview-stage{position:relative;width:100%;aspect-ratio:2000/2300;max-height:62vh;overflow:hidden;background:#fff;touch-action:none;cursor:grab;perspective:900px}.final-preview-stage:active{cursor:grabbing}.final-preview-stage img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;background:transparent;transition:opacity .18s ease,transform .28s ease}.final-preview-stage #final-preview-design{pointer-events:none}.final-preview-nav{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:8px;margin-top:10px}.final-preview-nav button{height:42px;border:1px solid #3c3f47;border-radius:999px;background:#17191f;color:#fff;font-size:28px}.final-preview-nav strong{text-align:center;font-size:12px;letter-spacing:.08em}.final-preview-dots{display:flex;justify-content:center;gap:7px;padding:9px}.final-preview-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#565962}.final-preview-dots button.active{width:24px;border-radius:8px;background:#e2bd5e} .advanced-transform{border-top:1px solid #222}.advanced-transform>summary{list-style:none;cursor:pointer;text-align:center;padding:10px;color:#f6d365;font-size:11px;font-weight:900;letter-spacing:.08em}.advanced-transform>summary::-webkit-details-marker{display:none}.advanced-transform>summary:after{content:' +';}.advanced-transform[open]>summary:after{content:' −'}.frame-transform{grid-column:1/-1} @media(max-width:760px){.tee-workspace{grid-template-columns:minmax(0,1fr) 52px;gap:6px;padding:10px 5px}.neon-tools{display:flex;flex-direction:column;gap:5px}.neon-tools button,.neon-tools label{min-height:54px;border-radius:11px;font-size:13px}.neon-tools span{font-size:7px}.frame-stage-page[data-frame-step=design]{grid-template-columns:minmax(0,1fr) 88px;gap:6px;margin-inline:6px}.frame-tools{grid-column:2;display:flex;flex-direction:column;gap:5px}.frame-tools button,.frame-tools label{min-height:94px;border-radius:9px}.frame-a4{grid-column:1/-1}.frame-transform{grid-column:1/-1}.frame-next{grid-column:1/-1}.advanced-transform .transform-bar{padding:8px}} .text-editor-dialog{border:0;border-radius:18px;padding:0;width:min(520px,calc(100vw - 28px));background:#111;color:#fff;box-shadow:0 24px 90px #0009}.text-editor-dialog::backdrop{background:#000a}.text-editor-dialog form{padding:24px;display:grid;gap:18px}.text-editor-head{display:flex;justify-content:space-between;align-items:flex-start}.text-editor-head p{font-size:11px;letter-spacing:.18em;color:#d5b65f;margin:0}.text-editor-head h2{margin:5px 0 0;font-size:26px}.text-editor-head button{border:0;background:transparent;color:#fff;font-size:28px}.text-editor-dialog label{display:grid;gap:7px;font-size:12px;font-weight:800;letter-spacing:.05em}.text-editor-dialog input,.text-editor-dialog select{width:100%;padding:12px;border:1px solid #444;border-radius:8px;background:#1c1c1c;color:#fff}.text-editor-dialog input[type=color]{height:44px;padding:4px}.text-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.text-editor-dialog .gold{padding:13px;border:0;border-radius:9px;background:#d5b65f;color:#111;font-weight:900}@media(max-width:520px){.text-editor-grid{grid-template-columns:1fr}.text-editor-dialog form{padding:18px}} /* Ported mobile shell geometry from the recovered ztees-mug-customizer.css fullscreen rules. */ @media(max-width:600px){ .studio-body[data-type=mug] .studio-shell{display:none} .studio-body[data-type=mug] #mug-studio{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;overflow-y:auto;overscroll-behavior:contain;background:#050606} .studio-body[data-type=mug] .mug-tabs{flex:0 0 38px;height:38px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:calc(100% - 12px);margin:2px 6px;padding:2px;border:1px solid #403526;border-radius:12px;background:#0d0c0a} .studio-body[data-type=mug] .mug-tabs button{height:100%;min-width:0;padding:0 3px;border:1px solid transparent;border-radius:9px;background:transparent;color:#b6b0a5;font-size:10.5px;font-weight:750;white-space:nowrap} .studio-body[data-type=mug] .mug-tabs button.active{border-color:#ffe4a0;background:linear-gradient(135deg,#e2bd5e,#f6d987);color:#140e04;box-shadow:0 0 14px #e2bd5e55} .studio-body[data-type=mug] .studio-hint{flex:0 0 auto;margin:2px 10px 4px;font-size:12px;line-height:16px} .studio-body[data-type=mug] .mug-live{flex:0 0 auto;height:min(40vh,340px);min-height:280px;margin:0 7px 4px;border-radius:12px} .studio-body[data-type=mug] .wrap-stage{margin:0 7px;padding:10px 0} .studio-body[data-type=mug] .mug-tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:min(calc(100% - 14px),380px);margin:0 auto;padding:4px} .studio-body[data-type=mug] .mug-tools button,.studio-body[data-type=mug] .mug-tools label{height:40px;min-height:40px;padding:2px 1px;border-radius:8px;font-size:11px} .studio-body[data-type=mug] .studio-buybar{grid-template-columns:minmax(60px,.7fr) minmax(80px,1fr) minmax(80px,1fr) minmax(105px,1.3fr);gap:5px;padding:8px 6px} .studio-body[data-type=mug] .studio-buybar>span{font-size:10px;text-align:center} .studio-body[data-type=mug] .studio-buybar button{min-width:0;height:44px;padding:4px;font-size:10px} }@media(max-width:600px){ .studio-body[data-type=mug] .wrap-stage{padding:4px 0} .studio-body[data-type=mug] .mug-tools button,.studio-body[data-type=mug] .mug-tools label{height:36px;min-height:36px} } /* Recover original Shopify mug gallery and portrait editor geometry. */ .mug-preview-badge{position:absolute;z-index:5;left:10px;top:8px;padding:4px 9px;border-radius:10px;background:#56585b;color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em} .mug-actual-view-wrap{display:flex;justify-content:center;padding:3px 0 5px} .mug-actual-view-button{min-height:44px;padding:7px 14px;border:1px solid #ffffff55;border-radius:8px;background:#151515;color:#f7f7f8;font-size:13px;font-weight:650} .mug-actual-gallery[hidden]{display:none!important}.mug-actual-gallery{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:16px}.mug-actual-gallery__backdrop{position:absolute;inset:0;background:#000c}.mug-actual-gallery__dialog{position:relative;width:min(100%,520px);max-height:calc(100dvh - 32px);overflow:auto;border-radius:14px;background:#151515;color:#f7f7f8;padding:18px;text-align:center}.mug-actual-gallery__dialog h2{margin:0 32px 6px;font-size:18px}.mug-actual-gallery__dialog p{margin:0 auto 12px;color:#d1d5db;font-size:12px;line-height:1.4}.mug-actual-gallery__close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#fff;font-size:30px}.mug-actual-gallery__image-wrap{background:#fff;border-radius:10px;overflow:hidden}.mug-actual-gallery__image-wrap img{display:block;width:100%;max-height:58dvh;object-fit:contain}.mug-actual-gallery__controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px}.mug-actual-gallery__controls button{width:34px;height:30px;border:1px solid #ffffff55;border-radius:7px;background:transparent;color:#fff;font-size:24px}.mug-actual-gallery__dialog small{display:block;margin-top:10px;color:#bbb;font-size:11px} .frame-design{height:min(648px,calc(100dvh - 196px));max-width:none;width:100%;display:grid;place-items:center;background:#1e2430;overflow:hidden} .frame-sheet{position:relative;width:min(100%,480px);aspect-ratio:210/297;flex:none} .frame-sheet canvas{position:absolute;inset:0;display:block;width:100%;height:100%;background:transparent} .frame-sheet .frame-template{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:1} @media(max-width:600px){.studio-body[data-type=mug] .mug-actual-view-wrap{flex:0 0 50px;height:50px;padding:3px 0 5px}.studio-body[data-type=mug] .mug-live{height:min(40vh,340px);min-height:280px}.frame-stage-page[data-frame-step=design]{margin:0 6px;grid-template-columns:minmax(0,1fr) 88px;min-height:calc(100dvh - 196px)}.frame-design{height:100%;min-height:0}.frame-sheet{width:100%;max-width:100%}} @media(max-width:600px){ .studio-body[data-type=frame] .frame-steps{margin:13px 0 12px;gap:22px} .studio-body[data-type=frame] .frame-steps li{width:44px;height:28px} .studio-body[data-type=frame] .frame-steps li span{top:32px} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=design]{height:calc(100dvh - 196px);min-height:0;margin:10px 6px 0} .studio-body[data-type=frame] .frame-design{height:100%;min-height:0} .studio-body[data-type=frame] .frame-sheet{width:100%;max-width:100%} } @media(min-width:381px) and (max-width:600px){ .studio-body[data-type=frame] .frame-stage-page[data-frame-step=design]{position:relative;width:calc(100% - 16px);height:calc(100dvh - 196px);min-height:0;margin:10px 8px 0;grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:calc(100dvh - 196px) auto auto;gap:8px} .studio-body[data-type=frame] .frame-design{height:100%;min-height:0;padding:6px} .studio-body[data-type=frame] .frame-sheet{width:100%;max-width:100%} .studio-body[data-type=frame] .frame-tools{height:100%;display:grid;grid-template-rows:repeat(6,minmax(48px,1fr));gap:7px} .studio-body[data-type=frame] .frame-tools button,.studio-body[data-type=frame] .frame-tools label{min-height:48px;height:100%} .studio-body[data-type=frame] .frame-next{position:absolute;bottom:-60px;left:4px;right:4px;width:auto;height:48px;padding:12px 8px;z-index:5} } @media(max-width:380px){.studio-body[data-type=frame] .frame-stage-page[data-frame-step=design]{grid-template-columns:minmax(0,1fr) 88px;gap:6px}.studio-body[data-type=frame] .frame-next{bottom:-56px;height:46px}} @media(max-width:600px){ .studio-body[data-type=mug] .studio-buybar{grid-template-columns:72px minmax(45px,1fr) 80px 102px;gap:4px;min-height:58px;padding:4px 6px;align-items:center} .studio-body[data-type=mug] .studio-buybar strong{font-size:20px;line-height:22px} .studio-body[data-type=mug] .studio-buybar small{font-size:9px;line-height:11px;white-space:nowrap} .studio-body[data-type=mug] .studio-buybar>span{font-size:9px;line-height:12px;white-space:nowrap} .studio-body[data-type=mug] .studio-buybar button{height:42px;font-size:9.5px} .studio-body[data-type=mug] .studio-buybar+.advanced-transform{margin-top:0} .studio-body[data-type=frame] .frame-design{padding:6px} .studio-body[data-type=frame] .frame-sheet{background:#fff} .studio-body[data-type=frame] .frame-tools{min-width:0;grid-template-columns:minmax(0,1fr)} .studio-body[data-type=frame] .frame-tools>*{box-sizing:border-box;min-width:0;width:100%;overflow:hidden} .studio-body[data-type=frame] .frame-next{bottom:-48px} } @media(min-width:381px) and (max-width:600px){.studio-body[data-type=mug] .wrap-stage{min-height:210px}} @media(max-width:600px){.studio-body[data-type=frame] #frame-studio{overflow:visible}.studio-body[data-type=frame] .frame-next{background:linear-gradient(135deg,#ff1f57,#ff5789);color:#fff;box-shadow:0 8px 18px #ff1f5740}} @media(max-width:380px){ .studio-body[data-type=frame] .frame-stage-page[data-frame-step=design]{position:relative;width:calc(100% - 12px);height:calc(100dvh - 196px);min-height:0;margin:10px 6px 0;grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:calc(100dvh - 196px) auto auto;gap:6px} .studio-body[data-type=frame] .frame-design{height:100%;min-height:0;padding:6px} .studio-body[data-type=frame] .frame-sheet{width:100%;max-width:100%;background:#fff} .studio-body[data-type=frame] .frame-tools{height:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(6,minmax(44px,1fr));gap:5px} .studio-body[data-type=frame] .frame-tools>*{box-sizing:border-box;min-width:0;width:100%;height:100%;min-height:44px;overflow:hidden} .studio-body[data-type=frame] .frame-next{position:absolute;bottom:-50px;left:4px;right:4px;width:auto;height:50px;background:linear-gradient(135deg,#ff1f57,#ff5789);color:#fff} } .studio-body[data-type=mug] #mug-studio[data-mug-mode=view] .studio-hint, .studio-body[data-type=mug] #mug-studio[data-mug-mode=view] .wrap-heading, .studio-body[data-type=mug] #mug-studio[data-mug-mode=view] .wrap-stage, .studio-body[data-type=mug] #mug-studio[data-mug-mode=view] .mug-wrap-save, .studio-body[data-type=mug] #mug-studio[data-mug-mode=view] .wrap-heading, .studio-body[data-type=mug] #mug-studio[data-mug-mode=view] .mug-tools, .studio-body[data-type=mug] #mug-studio[data-mug-mode=view] .advanced-transform, .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .studio-hint, .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-live, .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-angle-controls, .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-actual-view-wrap{display:none} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .wrap-heading{max-width:520px;width:calc(100% - 20px);display:flex} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .wrap-stage{display:block} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-tools{display:grid} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .advanced-transform{display:block} .mug-wrap-save{display:block;margin:8px auto 12px;min-width:120px;padding:12px 24px;border:0;border-radius:8px;background:#e2bd5e;color:#181103;font-weight:900;cursor:pointer} /* Source parity: Shopify's Mug and Frame product-customizer template removes the storefront chrome and gives the editor the full viewport. */ .studio-body[data-type=mug]{min-height:100dvh;max-height:100dvh;overflow:hidden;background:#050505} .studio-body[data-type=mug] .site-head{height:68px;min-height:68px;max-height:68px;overflow:visible} .studio-body[data-type=mug] #studio-app{width:100%;max-width:none;height:calc(100dvh - 68px);min-height:calc(100dvh - 68px);margin:0;padding:0;background:#050505} .studio-body[data-type=mug] #mug-studio{min-height:calc(100dvh - 68px);border:0;border-radius:0} .studio-body[data-type=frame] .frame-stage-page[hidden]{display:none!important} .studio-body[data-type=frame],.studio-body[data-type=frame] #studio-app,.studio-body[data-type=frame] #frame-studio{background:#111318} .studio-body[data-type=frame] #studio-app{max-width:none} .studio-body[data-type=frame] #frame-studio{border:0;border-radius:0} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=frame]{width:100%;max-width:460px;margin:0 auto;padding:0 2px 12px;box-sizing:border-box} .studio-body[data-type=frame] .frame-current-design{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:0 0 13px;border:1px solid #2a3142;border-radius:12px;background:#1e2430;box-shadow:0 4px 12px #0003} .studio-body[data-type=frame] .frame-current-design img{display:block;width:64px;height:90px;object-fit:contain;border-radius:3px;background:transparent} .studio-body[data-type=frame] .frame-current-design span{font-size:13px;font-weight:700;color:#fff} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=frame] h2{margin:0 0 3px;font-size:21px;line-height:1.2;font-weight:800;color:#fff} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=frame]>p{margin:0 0 14px;font-size:12px;color:#838a9b} .studio-body[data-type=frame] .frame-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0} .studio-body[data-type=frame] .frame-choice-grid button{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:6px;border:2px solid #2a3142;border-radius:11px;background:#1e2430;color:#fff;text-align:center;box-shadow:0 4px 10px #0003;cursor:pointer} .studio-body[data-type=frame] .frame-choice-grid button.active{border-color:#ff1f57;box-shadow:0 0 15px 2px #ff1f5766} .studio-body[data-type=frame] .frame-choice-grid button img{display:block;width:100%;aspect-ratio:1169/1345;object-fit:contain;background:transparent} .studio-body[data-type=frame] .frame-choice-grid button b{display:block;min-height:29px;padding-top:5px;font-size:10px;line-height:1.15;overflow-wrap:anywhere} .studio-body[data-type=frame] .frame-choice-grid button.frame-choice-featured{grid-column:1/-1;align-items:center;padding:11px} .studio-body[data-type=frame] .frame-choice-grid button.frame-choice-featured img{width:min(48%,170px)} .studio-body[data-type=frame] .frame-choice-grid button.frame-choice-featured b{min-height:0;font-size:13px} .studio-body[data-type=frame] .frame-choice-card{position:relative;transition:all .2s ease} .studio-body[data-type=frame] .frame-choice-card:hover{border-color:#ff5789} .studio-body[data-type=frame] .frame-choice-visual{position:relative;display:block;width:100%;aspect-ratio:1169/1345;overflow:hidden;background:transparent} .studio-body[data-type=frame] .frame-choice-visual .frame-live-art{position:absolute;z-index:1;display:block;object-fit:cover;background:transparent} .studio-body[data-type=frame] .frame-choice-visual .frame-live-art{pointer-events:none} .studio-body[data-type=frame] .frame-choice-visual .frame-choice-physical{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:fill;pointer-events:none} .studio-body[data-type=frame] .frame-current-design{width:100%;min-height:70px;box-sizing:border-box} .studio-body[data-type=frame] .frame-choice-grid button.frame-choice-featured .frame-choice-visual{width:min(48%,170px);margin:0 auto} .studio-body[data-type=frame] .frame-choice-grid button.frame-choice-featured .frame-choice-visual img{width:100%} .studio-body[data-type=frame] .frame-choice-name{display:block;width:100%;min-height:29px;padding-top:5px;font-size:10px;line-height:1.15;font-weight:700;overflow-wrap:anywhere} .studio-body[data-type=frame] .frame-choice-featured .frame-choice-name{min-height:0;font-size:13px} .studio-body[data-type=frame] .frame-choice-check{position:absolute;z-index:3;top:4px;right:4px;display:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ff1f57,#ff5789);color:#fff;font-size:13px;font-weight:800;box-shadow:0 2px 6px #ff1f5766} .studio-body[data-type=frame] .frame-choice-card.active .frame-choice-check{display:flex} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=frame] h2{padding-top:0} .studio-body[data-type=frame].frame-chooser-open #studio-app{padding-top:8px} @media(max-width:380px){.studio-body[data-type=frame] .frame-choice-grid{gap:6px}.studio-body[data-type=frame] .frame-choice-grid button{padding:4px}.studio-body[data-type=frame] .frame-choice-grid button b{font-size:9px}} /* Match the recovered Shopify frame chooser's compact mobile state. */ @media(max-width:600px){ .studio-body[data-type=frame].frame-chooser-open #studio-app{padding-top:0} .studio-body[data-type=frame].frame-chooser-open .frame-steps{width:calc(100% - 56px);max-width:360px;display:flex;justify-content:space-between;gap:0;margin:0 auto;padding:2px 0 14px} .studio-body[data-type=frame].frame-chooser-open .frame-steps li{position:relative;display:grid;flex:0 0 22px;width:22px;height:22px;border-radius:50%;font-size:11px} .studio-body[data-type=frame].frame-chooser-open .frame-steps li:not(:last-child)::after{content:"";position:absolute;left:calc(100% + 4px);top:10px;width:calc((100vw - 56px - 88px)/3);height:2px;background:#303541} .studio-body[data-type=frame].frame-chooser-open .frame-steps li.complete,.studio-body[data-type=frame].frame-chooser-open .frame-steps li.active{background:#ff2865;color:#fff} .studio-body[data-type=frame].frame-chooser-open .frame-steps li.complete::after{background:#ff2865} .studio-body[data-type=frame].frame-chooser-open .frame-steps li span{top:26px;font-size:9px;white-space:nowrap} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=frame]{width:100%;max-width:none;margin:0;padding:0 1px 84px} .studio-body[data-type=frame] .frame-current-design{min-height:0;gap:7px;padding:3px 6px;margin-bottom:6px;border-radius:8px} .studio-body[data-type=frame] .frame-current-design img{width:44px;height:62px;flex:0 0 44px} .studio-body[data-type=frame] .frame-current-design span{font-size:11px} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=frame] h2{margin:0 0 1px;font-size:16px;line-height:1.1} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=frame]>p{margin:0 0 6px;font-size:10px;line-height:1.15} .studio-body[data-type=frame] .frame-choice-grid{gap:6px} .studio-body[data-type=frame] .frame-choice-grid button{padding:8px 4px;align-items:center;border-radius:7px;box-shadow:0 2px 6px #0003} .studio-body[data-type=frame] .frame-choice-grid .frame-choice-visual{width:100%;max-width:100px;flex:0 0 auto;margin:0 auto} .studio-body[data-type=frame] .frame-choice-grid button.frame-choice-featured{width:100%;padding:12px 8px} .studio-body[data-type=frame] .frame-choice-grid button.frame-choice-featured .frame-choice-visual{width:150px;max-width:none} .studio-body[data-type=frame] .frame-choice-grid button.frame-choice-featured .frame-choice-name{min-height:12px;max-height:12px;font-size:11px} .studio-body[data-type=frame] .frame-stage-page[data-frame-step=frame] [data-frame-next]{position:fixed;left:50%;bottom:20px;z-index:1000;transform:translateX(-50%);width:calc(100% - 24px);max-width:400px;margin:0} } @media(min-width:601px){ .studio-body[data-type=frame].frame-chooser-open #studio-app{padding-top:0} .studio-body[data-type=frame].frame-chooser-open .frame-steps{display:none} } /* The source Mug Wrap stage uses a centered landscape print sheet and a fixed two-row tool dock with a tall Save action. Keep the approved 210×97 mm canvas. */ .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-stage{display:grid;grid-template-rows:22px minmax(160px,1fr) 92px;gap:4px;padding:2px 8px 6px;min-height:calc(100dvh - 112px);overflow:hidden;background:#050505} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-header{height:22px;line-height:22px;color:#aaa399;font-size:10px;text-align:center} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-canvas-viewport{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;overflow:hidden} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-rotated-frame{display:flex;align-items:center;justify-content:center;width:min(calc(100dvh - 190px),520px);aspect-ratio:210/97;background:#d1d5db;border:1px solid #f59e0b;border-radius:0} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .wrap-stage{display:block;width:100%;height:auto;min-height:0;margin:0;padding:0;background:#d1d5db} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] #mug-canvas{display:block;width:100%;height:auto;aspect-ratio:210/97;outline:2px solid #111;background:#fff} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-bottom-dock{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:4px;width:100%;height:88px} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,42px);gap:4px;width:100%;height:88px} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-tool-grid>*{height:42px;min-height:42px;margin:0} .studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-save{display:flex;align-items:center;justify-content:center;width:100%;height:88px;min-width:0;margin:0;padding:0;border:1px solid #ffe4a0;border-radius:9px;background:linear-gradient(135deg,#f59e0b,#ffd056);color:#120d04;font-size:13px;font-weight:900} /* Port the original Shopify physical-mug gallery sizing and heading treatment. */ .mug-actual-gallery__dialog{box-sizing:border-box;width:min(100%,520px)} .mug-actual-gallery__dialog h2{text-transform:uppercase;font-weight:800} @media(max-width:480px){.mug-actual-gallery{padding:10px}.mug-actual-gallery__dialog{width:calc(100vw - 20px);padding:16px 12px}.mug-actual-gallery__image-wrap img{max-height:55dvh}.mug-actual-gallery__controls button{line-height:1}} @media (orientation:portrait) and (max-width:600px){.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-stage{grid-template-rows:22px auto 92px;align-content:start;row-gap:8px;min-height:0}.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-canvas-viewport{display:flex;align-items:flex-start;justify-content:center;height:auto;overflow:visible}.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-rotated-frame{flex:0 0 auto;width:min(calc(100vw - 28px),402px);height:auto;aspect-ratio:210/97;transform:none}} @media (orientation:landscape) and (max-height:600px){.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-stage{grid-template-columns:minmax(0,1fr) clamp(220px,34vw,310px);grid-template-rows:18px minmax(0,1fr);gap:4px 6px}.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-header{grid-column:1/-1;grid-row:1}.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-canvas-viewport{grid-column:1;grid-row:2}.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-bottom-dock{grid-column:2;grid-row:2;height:min(100%,280px);grid-template-columns:minmax(0,1fr) 68px}.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-tool-grid{height:100%;grid-template-rows:repeat(2,minmax(0,1fr))}.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-tool-grid>*,.studio-body[data-type=mug] #mug-studio[data-mug-mode=wrap] .mug-wrap-save{height:100%;min-height:0}} /* Translate the recovered ztees-tshirt-polish.css layout onto the local studio DOM. */ .studio-body[data-type=tee]{background:#ece2e2} .studio-body[data-type=tee] #studio-app{max-width:1100px;padding:8px 12px 0;background:#080808} .studio-body[data-type=tee] #tee-studio{max-width:1100px;margin:0 auto;overflow:visible;border:0;border-radius:0;background:#080808} .studio-body[data-type=tee] .zone-tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:20px 0 12px} .studio-body[data-type=tee] .zone-tabs button[data-zone=front]{border-color:#3b82f6} .studio-body[data-type=tee] .zone-tabs button[data-zone=left-chest]{border-color:#d84955} .studio-body[data-type=tee] .zone-tabs button[data-zone=back]{border-color:#744a9b} .studio-body[data-type=tee] .zone-tabs button[data-zone=back-neck]{border-color:#b18a38} .studio-body[data-type=tee] .zone-tabs button[data-zone=left-sleeve]{border-color:#20a87e} .studio-body[data-type=tee] .zone-tabs button[data-zone=right-sleeve]{border-color:#20a9b8} .studio-body[data-type=tee] .tee-workspace{grid-template-columns:minmax(0,1fr) 68px;gap:14px;max-width:660px;min-height:350px;margin:0 auto;padding:8px 0 14px;align-items:center} .studio-body[data-type=tee] .zone-tabs button{font-size:12px} .studio-body[data-type=tee] .tee-stage{width:min(100%,480px);aspect-ratio:3/4;justify-self:center;overflow:hidden;border-radius:20px;box-shadow:0 10px 32px #0006} .studio-body[data-type=tee] .tee-stage canvas{width:100%;height:100%;max-height:none;object-fit:fill;border-radius:inherit;background:#141414} .studio-body[data-type=tee] .stage-upload{top:50%;max-width:90%;padding:5px 7px;border:1px solid #b38a35;border-radius:18px;background:#18191c;color:#fff4d8;font-size:10px;line-height:1.25;white-space:nowrap} .studio-body[data-type=tee] .neon-tools{gap:10px;align-items:center} .studio-body[data-type=tee] .neon-tools button,.studio-body[data-type=tee] .neon-tools label{width:62px;height:62px;min-height:62px;padding:7px 2px;border-radius:18px} .studio-body[data-type=tee] .tee-workspace{position:relative} .studio-body[data-type=tee] .tee-workspace>.advanced-transform{position:absolute;right:0;bottom:-18px;z-index:6;margin:0;padding:0;border:0;background:transparent} .studio-body[data-type=tee] .tee-workspace>.advanced-transform>summary{padding:0;color:#a9abb3;font-size:9px;line-height:12px;letter-spacing:.04em} .studio-body[data-type=tee] .tee-workspace>.advanced-transform[open] .transform-bar{position:absolute;right:0;bottom:16px;width:min(94vw,720px);background:#0e0e10;border:1px solid #333;border-radius:8px;box-shadow:0 8px 28px #0009} .studio-body[data-type=tee] .studio-buybar{grid-template-columns:minmax(120px,.7fr) minmax(0,2fr);align-items:center} .studio-body[data-type=tee] .studio-buybar fieldset{grid-column:2;grid-row:1;flex-wrap:wrap} .studio-body[data-type=tee] #tee-sizes{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:7px;min-height:44px;padding:0 0 0 78px} .studio-body[data-type=tee] #tee-sizes legend{position:absolute;left:0;top:50%;padding:0;color:#d8cfbc;font-size:12px;transform:translateY(-50%)} .studio-body[data-type=tee] #tee-sizes label{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;padding:0;border:1px solid #65616c;border-radius:50%;background:#202126;color:#fff;font-size:12px;cursor:pointer} .studio-body[data-type=tee] #tee-sizes label:has(input:checked){border-color:#d6b76c;background:#d6b76c;color:#15120b} .studio-body[data-type=tee] #tee-sizes input{position:absolute;width:1px;height:1px;opacity:0} .studio-body[data-type=tee] .studio-buybar>button{min-height:46px;border-radius:12px} .studio-body[data-type=tee] .studio-buybar>button:nth-of-type(1){grid-column:1;grid-row:2} .studio-body[data-type=tee] .studio-buybar>button:nth-of-type(2){grid-column:2;grid-row:2} @media(max-width:760px){.studio-body[data-type=tee] #studio-app{padding:60px 0 0;background-image:linear-gradient(to bottom,#ece2e2 0 60px,transparent 60px)}.studio-body[data-type=tee] #tee-studio{padding:0 4px}.studio-body[data-type=tee] .zone-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:12px 0 8px}.studio-body[data-type=tee] .tee-workspace{grid-template-columns:minmax(0,1fr) 50px;gap:5px;max-width:none;min-height:330px;padding:4px 0 8px}.studio-body[data-type=tee] .tee-stage{width:100%;border-radius:16px}.studio-body[data-type=tee] .neon-tools{gap:7px}.studio-body[data-type=tee] .neon-tools button,.studio-body[data-type=tee] .neon-tools label{width:48px;height:52px;min-height:52px;padding:6px 1px;border-radius:15px;font-size:8px}.studio-body[data-type=tee] .studio-buybar{grid-template-columns:1fr 1fr}.studio-body[data-type=tee] .studio-buybar fieldset{grid-column:1/-1;grid-row:2;overflow:auto}.studio-body[data-type=tee] #tee-sizes{padding-left:78px;overflow:visible}.studio-body[data-type=tee] #tee-sizes label{width:40px;height:40px;flex-basis:40px}.studio-body[data-type=tee] .studio-buybar>button:nth-of-type(1){grid-column:1;grid-row:3}.studio-body[data-type=tee] .studio-buybar>button:nth-of-type(2){grid-column:2;grid-row:3}} .studio-status{position:fixed!important;left:50%;bottom:14px;z-index:14000;width:max-content;max-width:min(92vw,620px);margin:0;padding:10px 14px;border:1px solid #e7c151;border-left-width:4px;border-radius:10px;background:#17191ff2;color:#eee;font-size:12px;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px);transition:opacity .15s ease,transform .15s ease,visibility .15s}.studio-status.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)} .studio-body[data-type=frame] .frame-back{float:none;justify-self:start;padding:0;background:none;color:#ff2865;font-size:14px;line-height:1.1;font-weight:700;text-align:left} .mug-live #mug-video-overlay-canvas{z-index:3;pointer-events:auto;touch-action:none;cursor:grab}.mug-live #mug-video-overlay-canvas:active{cursor:grabbing} /* ZTEES_MUG_MOBILE_CLEAN_LAYOUT_V1: scoped to mobile Mug Studio only */ @media (max-width:600px) { body.studio-body[data-type="mug"] #mug-studio { box-sizing:border-box;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh; overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch; padding-bottom:max(15px,env(safe-area-inset-bottom)); } body.studio-body[data-type="mug"] #mug-studio .mug-tabs { box-sizing:border-box;position:sticky;top:0;z-index:12;flex:0 0 auto; width:calc(100% - 16px);height:48px;margin:8px 8px 12px;padding:4px; border:1px solid #49423d;border-radius:14px; background:#151419;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px; } body.studio-body[data-type="mug"] #mug-studio .mug-tabs button { display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:100%; min-height:0;padding:6px 2px;font:700 12px/1.1 Arial, sans-serif;white-space:normal; border-radius:10px;letter-spacing:0; } body.studio-body[data-type="mug"] #mug-studio .mug-live { box-sizing:border-box;width:calc(100% - 16px);height:clamp(255px,45vh,360px); min-height:0;margin:0 8px 10px;border:1px solid #343540;border-radius:16px;overflow:hidden; } body.studio-body[data-type="mug"] #mug-studio .mug-live img {max-width:100%;} /* Live = product preview. Wrap = design canvas. Never stack two giant editors. */ body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-stage, body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="view"] .mug-wrap-stage, body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] #ztees-mug-photo-tools-v1, body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="view"] #ztees-mug-photo-tools-v1 {display:none!important;} body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-stage { display:grid!important;box-sizing:border-box;width:100%;min-height:0!important; grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto!important; gap:10px;align-content:start;padding:8px 10px 12px;overflow:visible!important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-header { box-sizing:border-box;width:100%;height:auto;min-height:30px; margin:0;padding:4px 2px;display:flex;justify-content:space-between;align-items:center; gap:8px;color:#f5ead1;font-size:12px;line-height:1.25;text-align:left; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-canvas-viewport { box-sizing:border-box;width:100%;height:auto;min-height:0; overflow:visible;display:flex;align-items:center;justify-content:center; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-rotated-frame { box-sizing:border-box;flex:1 1 auto;width:100%;max-width:520px;height:auto; min-width:0;aspect-ratio:210/97;transform:none; border:1px solid #dfb957;border-radius:10px;overflow:hidden;background:#fff; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .wrap-stage { box-sizing:border-box;display:block;width:100%;height:auto;min-height:0!important; margin:0;padding:0;overflow:hidden;border-radius:inherit;background:#fff; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] #mug-canvas { display:block;width:100%;height:auto;aspect-ratio:2480/1146; outline:none;touch-action:pan-y;background:#fff; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-bottom-dock { box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto; width:100%;height:auto;gap:9px;margin:0;padding:0; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-tool-grid { box-sizing:border-box;display:grid;width:100%;height:auto; grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(62px,auto)); gap:8px;margin:0;padding:0; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-tool-grid > * { box-sizing:border-box;position:relative;min-width:0;width:100%;height:auto;min-height:62px; margin:0;padding:8px 4px;border:1px solid #705978;border-radius:12px; background:#171720;color:#f9f7ff;box-shadow:none;overflow:hidden; display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px; } body.studio-body[data-type="mug"] #mug-studio .mug-tools input[type="file"] { display:none!important; } body.studio-body[data-type="mug"] #mug-studio .ztees-safe-tool-label { font-size:12px;line-height:1.15;max-width:100%;text-align:center; white-space:normal;overflow-wrap:break-word; } body.studio-body[data-type="mug"] #mug-studio .ztees-safe-tool-icon svg {width:21px;height:21px;} body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-save { box-sizing:border-box;display:flex;align-items:center;justify-content:center; width:100%;height:46px;min-height:46px;margin:0;padding:7px 12px; border-radius:12px;font:800 14px/1 Arial,sans-serif; background:linear-gradient(135deg,#e9bd57,#ffe28b);color:#171008; } body.studio-body[data-type="mug"] #mug-studio #ztees-mug-photo-tools-v1 { box-sizing:border-box;display:grid!important;width:calc(100% - 20px)!important; max-width:700px!important;grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px!important;margin:8px auto 14px!important;padding:11px!important; border:1px solid #ac8a49;border-radius:12px; } body.studio-body[data-type="mug"] #mug-studio #ztees-mug-photo-tools-v1 > span { grid-column:1/-1;min-width:0;font:700 12px/1.3 Arial,sans-serif;text-align:center; } body.studio-body[data-type="mug"] #mug-studio #ztees-mug-photo-tools-v1 button { box-sizing:border-box;min-width:0;min-height:44px;padding:9px 6px!important; font:800 12px/1.2 Arial,sans-serif;border-radius:9px; } body.studio-body[data-type="mug"] #mug-studio .studio-hint {margin:3px 12px 10px;font-size:13px;} } /* ZTEES_MUG_LIVE_WRAP_SHARED_TOOLS_V21 — Scoped, mobile-first. Original handlers unchanged. */ .studio-body[data-type="mug"] #mug-studio .mug-universal-tools{ box-sizing:border-box;width:min(calc(100% - 20px),700px);max-width:700px; display:grid;grid-template-columns:minmax(0,1fr);gap:9px; margin:9px auto 6px;padding:0; } .studio-body[data-type="mug"] #mug-studio .mug-universal-tools .mug-tools{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;margin:0;padding:0;width:100%; } .studio-body[data-type="mug"] #mug-studio .mug-universal-tools .mug-tools>*{ box-sizing:border-box;position:relative;min-width:0;width:100%;min-height:58px; display:flex;align-items:center;justify-content:center;flex-direction:column; gap:5px;margin:0;padding:8px 4px;color:#fff;background:#181721; border:1px solid #5c4965;border-radius:12px; } .studio-body[data-type="mug"] #mug-studio .mug-universal-tools .mug-wrap-save{ box-sizing:border-box;display:flex;align-items:center;justify-content:center; width:100%;min-height:44px;margin:0;padding:8px 12px; border-radius:11px;background:linear-gradient(135deg,#efbb45,#ffe18a); color:#181103;font:800 14px/1.2 Arial,sans-serif; } .studio-body[data-type="mug"] #mug-studio[data-mug-mode="view"] .mug-universal-tools{ display:none!important; } .studio-body[data-type="mug"] #mug-studio .mug-photo-select-box{ border:1px solid #9d814c;background:#29212c;color:#fff; } /* Restore selected-photo actions on Live: V1 intentionally hid these there. */ body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] #ztees-mug-photo-tools-v1{ display:grid!important; } /* Limit photo tools to actual editing modes, never overlap the product view. */ .studio-body[data-type="mug"] #mug-studio[data-mug-mode="view"] #ztees-mug-photo-tools-v1{ display:none!important; } @media(max-width:600px){ html:has(.studio-body[data-type="mug"]), body.studio-body[data-type="mug"]{ box-sizing:border-box;width:100%;height:100dvh;max-height:100dvh;overflow:hidden; } body.studio-body[data-type="mug"] #studio-app{ box-sizing:border-box;display:flex;flex-direction:column; width:100%;height:100dvh;min-height:0;max-height:100dvh;padding:0;margin:0; overflow:hidden; } body.studio-body[data-type="mug"] #mug-studio{ box-sizing:border-box;width:100%;max-width:100%; display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0; border:0;border-radius:0;overflow-x:hidden;overflow-y:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding-bottom:env(safe-area-inset-bottom,0px); } body.studio-body[data-type="mug"] #mug-studio .mug-tabs{ box-sizing:border-box;flex:0 0 auto;margin:6px 8px 9px; } body.studio-body[data-type="mug"] #mug-studio .studio-hint{ box-sizing:border-box;flex:0 0 auto;min-height:17px;margin:0 12px 6px;font-size:12px; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .studio-hint, body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="view"] .studio-hint{ display:none!important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-stage, body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="view"] .mug-wrap-stage{ display:none!important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="wrap"] .mug-wrap-stage{ flex:0 0 auto; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-live{ box-sizing:border-box;display:block;flex:1 0 clamp(250px,35dvh,420px); height:auto;min-height:250px;max-height:none; width:calc(100% - 16px);margin:0 8px 6px;border-radius:15px; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="view"] .mug-live{ flex:1 0 clamp(250px,35dvh,420px);height:auto;min-height:250px;max-height:none; } body.studio-body[data-type="mug"] #mug-studio .mug-actual-view-wrap{ flex:0 0 auto;min-height:45px;margin:0;padding:2px 0 5px; } body.studio-body[data-type="mug"] #mug-studio .mug-universal-tools{ flex:0 0 auto;width:calc(100% - 18px);max-width:none; gap:6px;margin:5px 9px 5px; } body.studio-body[data-type="mug"] #mug-studio .mug-universal-tools .mug-tools{ grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; grid-template-rows:repeat(2,minmax(55px,auto)); } body.studio-body[data-type="mug"] #mug-studio .mug-universal-tools .mug-tools>*{ min-height:55px;padding:5px 2px;gap:3px;border-radius:10px; } body.studio-body[data-type="mug"] #mug-studio .mug-universal-tools .mug-wrap-save{ min-height:43px;height:43px; } body.studio-body[data-type="mug"] #mug-studio #ztees-mug-photo-tools-v1{ flex:0 0 auto;display:grid!important;box-sizing:border-box; width:calc(100% - 18px)!important;max-width:none!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px!important;margin:5px 9px!important;padding:6px!important; } body.studio-body[data-type="mug"] #mug-studio #ztees-mug-photo-tools-v1 > span{ grid-column:1/-1;font-size:11px; } body.studio-body[data-type="mug"] #mug-studio #ztees-mug-photo-tools-v1 > button{ box-sizing:border-box;min-width:0;min-height:43px;padding:5px 3px!important; font:700 11px/1.15 Arial,sans-serif!important; border-radius:8px; } body.studio-body[data-type="mug"] #mug-studio #ztees-mug-photo-tools-v1 .mug-photo-select-box{ grid-column:2 / 4; } body.studio-body[data-type="mug"] #mug-studio .studio-buybar{ flex:0 0 auto;box-sizing:border-box;position:sticky;bottom:0;z-index:16; min-height:59px;width:100%;margin-top:auto;padding-bottom:max(5px,env(safe-area-inset-bottom)); background:#0f1014; } body.studio-body[data-type="mug"] #mug-studio .studio-buybar > span{ white-space:normal;line-height:1.2; } body.studio-body[data-type="mug"] #mug-studio .advanced-transform{ box-sizing:border-box;flex:0 0 auto;width:calc(100% - 18px); margin:0 9px 8px; } body.studio-body[data-type="mug"] #mug-studio .advanced-transform > summary{ cursor:pointer;min-height:38px;padding:10px;text-align:center; } } @media (max-width:360px){ body.studio-body[data-type="mug"] #mug-studio #ztees-mug-photo-tools-v1 > button{ font-size:10px!important; } } /* ZTEES MUG - Restore lower Wrap Editor on Live mobile */ @media (max-width: 600px) { body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-stage { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; box-sizing: border-box; flex: 0 0 auto; width: 100%; height: auto !important; min-height: 0 !important; gap: 10px; padding: 8px 10px 12px; overflow: visible !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-canvas-viewport { display: flex !important; width: 100%; height: auto !important; justify-content: center; overflow: visible; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-rotated-frame { width: 100%; max-width: 520px; height: auto !important; aspect-ratio: 210 / 97; transform: none !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .wrap-stage { display: block !important; width: 100%; height: auto !important; min-height: 0 !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] #mug-canvas { display: block !important; width: 100%; height: auto !important; aspect-ratio: 2480 / 1146; } } /* ZTEES MUG - Restore lower Wrap Editor on Live mobile */ @media (max-width: 600px) { body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-stage { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; box-sizing: border-box; flex: 0 0 auto; width: 100%; height: auto !important; min-height: 0 !important; gap: 10px; padding: 8px 10px 12px; overflow: visible !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-canvas-viewport { display: flex !important; width: 100%; height: auto !important; justify-content: center; overflow: visible; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-rotated-frame { width: 100%; max-width: 520px; height: auto !important; aspect-ratio: 210 / 97; transform: none !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .wrap-stage { display: block !important; width: 100%; height: auto !important; min-height: 0 !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] #mug-canvas { display: block !important; width: 100%; height: auto !important; aspect-ratio: 2480 / 1146; } } /* ZTEES MUG - Restore lower Wrap Editor on Live mobile */ @media (max-width: 600px) { body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-stage { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; box-sizing: border-box; flex: 0 0 auto; width: 100%; height: auto !important; min-height: 0 !important; gap: 10px; padding: 8px 10px 12px; overflow: visible !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-canvas-viewport { display: flex !important; width: 100%; height: auto !important; justify-content: center; overflow: visible; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .mug-wrap-rotated-frame { width: 100%; max-width: 520px; height: auto !important; aspect-ratio: 210 / 97; transform: none !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] .wrap-stage { display: block !important; width: 100%; height: auto !important; min-height: 0 !important; } body.studio-body[data-type="mug"] #mug-studio[data-mug-mode="live"] #mug-canvas { display: block !important; width: 100%; height: auto !important; aspect-ratio: 2480 / 1146; } }