/* Chethu Creations Premium Design Studio 2.0. Scope everything to studio. */ #ccds-entry,#ccds-entry *,#ccds-modal,#ccds-modal *{box-sizing:border-box} #ccds-entry{width:100%;clear:both;margin:17px 0 19px;padding:19px 18px;border-radius:18px;background:linear-gradient(125deg,#f4edff,#fff 58%,#fff4eb);border:1px solid #ded4f0;box-shadow:0 7px 25px #3121470d;color:#251e36} .ccds-entry-top{display:flex;gap:12px;align-items:center;margin-bottom:15px}.ccds-entry-symbol{display:grid;place-items:center;background:#361c5d;color:#fff;height:44px;width:44px;border-radius:13px;font-size:25px;flex:none}.ccds-entry-top strong{display:block;font-size:17px;font-weight:800}.ccds-entry-top span:not(.ccds-entry-symbol){font-size:12px;color:#655c72}.ccds-launch{border:0!important;width:100%!important;border-radius:11px!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:10px!important;background:linear-gradient(110deg,#28133d,#7040a9)!important;color:#fff!important;font-size:14px!important;font-weight:800!important;padding:16px 17px!important;cursor:pointer!important;box-shadow:0 9px 18px #59338c30!important}.ccds-launch span{margin-left:auto}.ccds-saved{padding-top:12px;font-size:12px;color:#9b5c17}.ccds-saved.is-saved{color:#17834d;font-weight:700} #ccds-modal[hidden],#ccds-properties[hidden],#ccds-text-props[hidden],#ccds-shape-props[hidden],#ccds-image-props[hidden],#ccds-overlay[hidden]{display:none!important} html.ccds-open{overflow:hidden!important} #ccds-modal{position:fixed!important;inset:0!important;z-index:2147483000!important;background:#07050bbd!important;padding:10px!important;color:#201b2f!important;font:13px/1.38 Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important} #ccds-modal button,#ccds-modal input,#ccds-modal select,#ccds-modal textarea{font-family:inherit!important;font-size:13px!important;text-transform:none!important;line-height:1.35!important;letter-spacing:normal!important} #ccds-modal button{cursor:pointer!important;box-shadow:none!important}#ccds-modal button:disabled{opacity:.43!important;cursor:not-allowed!important} #ccds-modal label{font-size:12px!important}#ccds-modal button:focus-visible,#ccds-modal input:focus-visible,#ccds-modal textarea:focus-visible,#ccds-modal select:focus-visible{outline:2px solid #966aff!important;outline-offset:2px!important} .ccds-shell{height:100%;width:100%;border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 35px 80px #0007} .ccds-header{flex:none;min-height:66px;background:linear-gradient(115deg,#120d20 0%,#221331 46%,#391933 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 23px;gap:12px} .ccds-brand{display:flex;align-items:center;gap:12px}.ccds-logo{height:42px;width:42px;border:1px solid #ffffff5c;background:#ffffff1b;border-radius:13px;display:grid;place-items:center;font-size:24px;color:#e5bb7e}.ccds-brand strong{display:block;letter-spacing:1.2px;font-weight:900;font-size:14px}.ccds-brand small{display:block;letter-spacing:1.8px;font-size:9px;color:#dfd0f1;margin-top:4px}.ccds-brand small span{color:#e4c490}.ccds-header-actions{display:flex;gap:16px;align-items:center}.ccds-status{font-size:11px;color:#eee6f4;max-width:420px;text-align:right}.ccds-error{color:#ffd28c!important}.ccds-icon-button{display:grid!important;place-items:center!important;height:39px!important;width:39px!important;border:1px solid #ffffff4a!important;border-radius:12px!important;background:#ffffff14!important;color:#fff!important;font-size:20px!important} .ccds-mobile-tabs{display:none}.ccds-workspace{flex:1;display:grid;grid-template-columns:minmax(230px,260px) minmax(0,1fr) minmax(225px,280px);min-height:0;overflow:hidden} .ccds-sidebar{min-height:0;overflow:auto;background:#fff;overscroll-behavior:contain}.ccds-left{border-right:1px solid #ebe7f0}.ccds-right{border-left:1px solid #ebe7f0;background:#fff}.ccds-section{padding:17px 17px 20px;border-bottom:1px solid #f1eef3}.ccds-section-first{padding-top:21px}.ccds-kicker{font-size:10px;font-weight:900;color:#876e9c;letter-spacing:1.25px;display:block;margin-bottom:9px}.ccds-input-label{display:block;color:#4e4161;font-weight:700!important;margin:14px 0 7px!important}.ccds-hint{margin:9px 0 0!important;color:#81778b;font-size:11px!important;line-height:1.5!important}.ccds-flex{display:flex;align-items:center;justify-content:space-between;gap:10px}.ccds-flex .ccds-input-label{margin:0!important}.ccds-field{display:block!important;width:100%!important;border:1px solid #e4ddea!important;background:#fff!important;border-radius:10px!important;color:#281d37!important;padding:11px!important;height:auto!important;min-height:40px!important;box-shadow:none!important}.ccds-right textarea.ccds-field{min-height:73px;resize:vertical!important} .ccds-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ccds-tool{display:flex!important;flex-direction:column!important;gap:4px!important;align-items:center!important;justify-content:center!important;min-height:88px!important;padding:12px 6px!important;border:1px solid #e4ddea!important;background:#fbf9fe!important;border-radius:13px!important;color:#4c355e!important;text-align:center!important}.ccds-tool:hover{border-color:#8d62c5!important;background:#f5efff!important}.ccds-tool-icon{display:grid;place-items:center;color:#623495;background:#efe7fb;height:34px;width:34px;border-radius:10px;font-size:22px;font-weight:900}.ccds-tool strong{font-size:12px!important;font-weight:800}.ccds-tool small{color:#9b8ca9;font-size:10px!important}.ccds-upload-tool{cursor:pointer}.ccds-swatches{display:flex;gap:10px;margin:14px 0}.ccds-swatches button{width:32px;height:32px;border:2px solid #e9e3ed!important;background:var(--sw)!important;border-radius:100%!important;flex:none}.ccds-right input[type=color],.ccds-left input[type=color]{width:51px;min-width:51px;height:35px;padding:3px;border-radius:10px;border:1px solid #ddd0e8;background:#fff}.ccds-right input[type=range]{width:100%;padding:0!important;min-height:20px!important;border:0!important;background:transparent!important;accent-color:#7946b5} .ccds-duo{display:flex;gap:8px;margin:11px 0;align-items:center}.ccds-duo>*{min-width:0;flex:1}.ccds-secondary{border:1px solid #e4dfeb!important;background:#fff!important;border-radius:10px!important;color:#4c3c61!important;padding:10px 9px!important;min-height:38px!important;font-size:11px!important;font-weight:750!important;white-space:normal!important}.ccds-secondary:hover,.ccds-secondary.is-on{background:#f5edff!important;border-color:#a381dc!important;color:#562597!important}.ccds-secondary.ccds-danger{color:#b34161!important}.ccds-full{width:100%}.ccds-link{background:none!important;color:#7652a8!important;border:0!important;padding:4px!important;font-weight:750!important;font-size:11px!important}.ccds-history-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.ccds-history-btn{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:46px!important;padding:12px 14px!important;border:1px solid #d8c8ea!important;border-radius:14px!important;background:linear-gradient(180deg,#fff,#f5efff)!important;color:#4d2f71!important;font-size:14px!important;font-weight:900!important;box-shadow:0 8px 16px rgba(85,47,130,.10)!important}.ccds-history-btn:hover:not(:disabled){border-color:#8c61c7!important;background:linear-gradient(180deg,#fdfbff,#efe4ff)!important}.ccds-history-btn:disabled{opacity:.45!important;cursor:not-allowed!important}.ccds-history-btn:focus-visible{outline:2px solid #8c61c7!important;outline-offset:2px}.ccds-photo-fit strong{display:block;margin-bottom:8px;color:#4b3a5f}.ccds-fit-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .ccds-layers{display:flex;flex-direction:column;gap:7px;max-height:250px;overflow:auto;margin:11px 0}.ccds-layer{width:100%;display:flex;align-items:center;gap:10px;padding:10px 8px!important;background:#fff!important;border-radius:10px!important;border:1px solid #ede7f0!important;color:#523d60!important;text-align:left!important}.ccds-layer b{width:26px;height:26px;display:grid;place-items:center;background:#f2eaf8;border-radius:7px;font-size:15px}.ccds-layer span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px!important}.ccds-layer.is-active{background:#f6edff!important;border-color:#945ed0!important}.ccds-utility-tools{background:#fcfafd}.ccds-presetbar{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:12px 0 20px}.ccds-presetbar button{background:#f6f3fa!important;border:1px solid #e5daee!important;border-radius:8px!important;padding:10px 3px!important;font-size:9px!important;font-weight:700!important;color:#613682!important} .ccds-main{min-width:0;min-height:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 54% 38%,#fff 0%,#f1edf6 70%,#eae4ef 100%)}.ccds-stage-top,.ccds-stage-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 17px;color:#85788e}.ccds-stage-top strong{font-size:10px!important;letter-spacing:1.3px;display:block;color:#634c79}.ccds-stage-top span{font-size:11px!important;display:block;margin-top:3px}.ccds-grid-toggle{display:flex;gap:6px;align-items:center}.ccds-grid-toggle input{accent-color:#8453c4}.ccds-stage-wrap{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:auto;padding:14px}.ccds-stage{position:relative;width:min(100%,530px);aspect-ratio:1/1;max-height:none;background-color:#fff;background-size:100% 100%;background-position:center;background-repeat:no-repeat;border-radius:4px;box-shadow:0 22px 60px #2211392a,0 0 0 1px #d4cbdc;overflow:hidden;flex-shrink:0}.ccds-print-region{position:absolute;touch-action:none;overflow:hidden;background:transparent}.ccds-print-region canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.ccds-print-region canvas:active{cursor:grabbing}.ccds-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.ccds-stage-bottom{font-size:11px!important}.ccds-stage-bottom strong{font-weight:800;color:#643c8a;white-space:nowrap}.ccds-quickbar{display:flex;gap:7px;justify-content:center;align-items:center;border-top:1px solid #e6ddec;padding:11px;flex-wrap:wrap;background:#f8f5fa}.ccds-quickbar button{min-width:75px;flex:1;max-width:135px;padding:11px 6px!important;border:1px solid #e0d5e9!important;border-radius:10px!important;background:#fff!important;color:#49355c!important;font-weight:800!important;font-size:11px!important} .ccds-footer{flex:none;background:#fff;border-top:1px solid #ebe6ef;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:13px 20px}.ccds-footer-caption strong{font-size:12px;color:#3f2b54;display:block}.ccds-footer-caption span{display:block;color:#897a94;font-size:11px;margin-top:3px}.ccds-footer-actions{display:flex;align-items:center;gap:10px}.ccds-primary{color:#fff!important;border:0!important;border-radius:11px!important;background:linear-gradient(115deg,#33174c,#7b45b3)!important;padding:14px 23px!important;min-height:44px!important;font-weight:900!important;font-size:13px!important;box-shadow:0 7px 14px #421c7131!important;white-space:normal!important}.ccds-footer .ccds-secondary{min-height:44px;padding:11px 19px!important}.ccds-note{background:#fcf9ff;color:#715b80}.ccds-note strong{color:#54337c}.ccds-note p{font-size:11px;line-height:1.6;margin:7px 0 0} @media(max-width:1080px){.ccds-workspace{grid-template-columns:minmax(200px,220px) minmax(0,1fr) minmax(210px,235px)}.ccds-section{padding:15px 12px}.ccds-stage-wrap{padding:8px}.ccds-brand strong{font-size:12px}} @media(max-width:800px){#ccds-modal{padding:0!important}.ccds-shell{border-radius:0}.ccds-header{min-height:58px;padding:8px 12px}.ccds-brand{gap:8px}.ccds-brand strong{font-size:12px}.ccds-brand small{font-size:8px}.ccds-logo{width:36px;height:36px;border-radius:10px}.ccds-status{display:none}.ccds-mobile-tabs{display:grid;grid-template-columns:repeat(3,1fr);flex:none;background:#fff;border-bottom:1px solid #e9e3ef;min-height:46px}.ccds-mobile-tab{background:#fff!important;border:0!important;border-bottom:3px solid transparent!important;font-weight:800!important;color:#85758f!important;padding:11px!important}.ccds-mobile-tab.is-active{color:#66349b!important;border-color:#66349b!important;background:#fcf9ff!important}.ccds-workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(210px,52%) minmax(0,48%);min-height:0;overflow:hidden}.ccds-main{grid-row:1;min-height:0}.ccds-sidebar{grid-row:2;grid-column:1;min-height:0;overflow-y:auto;display:none}.ccds-sidebar.ccds-panel-active{display:block}.ccds-section{padding:13px 16px}.ccds-stage-top,.ccds-stage-bottom{padding:6px 11px}.ccds-stage-top span{display:none}.ccds-stage-bottom span{font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ccds-stage-wrap{padding:7px}.ccds-quickbar{padding:5px 8px;gap:6px;flex-wrap:nowrap}.ccds-quickbar button{padding:7px 2px!important;min-height:30px!important;min-width:0;font-size:10px!important}.ccds-footer{padding:9px 12px}.ccds-footer-caption{display:none}.ccds-footer-actions{width:100%}.ccds-footer-actions button:first-child{flex:0 0 25%}.ccds-footer-actions button:last-child{flex:1;min-height:45px!important;padding:12px!important}.ccds-layers-panel,.ccds-add-panel{display:block}#ccds-modal[data-mobile-tab="add"] .ccds-layers-panel{display:none}#ccds-modal[data-mobile-tab="add"] .ccds-utility-tools{display:none}#ccds-modal[data-mobile-tab="layers"] .ccds-add-panel{display:none}#ccds-modal[data-mobile-tab="edit"] .ccds-right{display:block}.ccds-tool-grid{grid-template-columns:repeat(2,1fr)}.ccds-tool{min-height:69px!important}.ccds-tool-icon{height:29px;width:29px;font-size:17px}.ccds-tool strong{font-size:10px!important}.ccds-tool small{display:none}.ccds-history-bar{position:sticky;bottom:0;z-index:6;padding:10px 0 2px;background:linear-gradient(180deg,rgba(252,249,255,0),#fcf9ff 35%,#fcf9ff 100%)}.ccds-history-btn{min-height:44px!important;font-size:13px!important;border-radius:13px!important}} @media(max-width:400px){.ccds-logo{display:none}.ccds-brand strong{font-size:11px}.ccds-brand small{letter-spacing:1px}.ccds-stage-bottom strong{font-size:9px}.ccds-stage-bottom span{max-width:68%}.ccds-primary{font-size:12px!important}.ccds-stage-top strong{font-size:9px!important}.ccds-section{padding:12px}} @media(prefers-reduced-motion:reduce){#ccds-modal *{scroll-behavior:auto!important;transition:none!important}} /* Shape mask must stretch across the entire normalized design area. */ #ccds-print-region{-webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;-webkit-mask-position:center!important;mask-position:center!important} /* 2.0.2: Native file inputs receive the tap themselves. Hidden inputs frequently fail in Android WebViews. */ #ccds-modal .ccds-upload-tool,#ccds-modal .ccds-quick-photo-trigger{position:relative!important;overflow:hidden!important;cursor:pointer!important;isolation:isolate} #ccds-modal .ccds-native-photo-input{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;max-width:none!important;min-height:100%!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;z-index:3!important;cursor:pointer!important;font-size:100px!important;appearance:none!important;-webkit-appearance:none!important} #ccds-modal .ccds-native-photo-input:focus-visible{outline:3px solid #9d62de!important;outline-offset:-4px!important} #ccds-modal .ccds-upload-tool:focus-within,#ccds-modal .ccds-quick-photo-trigger:focus-within{box-shadow:0 0 0 3px #bb99e4!important} #ccds-modal .ccds-upload-tool strong{line-height:1.25!important;max-width:100%} #ccds-modal .ccds-upload-feedback{margin:10px 0 4px!important;padding:10px 12px!important;background:#f1ebfa!important;color:#5d397c!important;border-left:3px solid #8b50ca!important;border-radius:6px!important;font-size:12px!important;line-height:1.45!important;font-weight:650!important;overflow-wrap:anywhere} #ccds-modal .ccds-upload-feedback.is-error{border-color:#d33e67!important;color:#992a53!important;background:#fff0f5!important} #ccds-modal .ccds-upload-feedback.is-success{border-color:#228255!important;color:#196345!important;background:#eaf9f0!important} #ccds-modal .ccds-quick-photo-trigger{display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;min-width:75px;flex:1;max-width:135px;min-height:38px;padding:9px 6px!important;border:1px solid #e0d5e9!important;border-radius:10px!important;background:#fff!important;color:#49355c!important;font-weight:800!important;font-size:11px!important;white-space:nowrap!important} @media(max-width:800px){#ccds-modal .ccds-quick-photo-trigger{min-width:0!important;min-height:30px!important;padding:6px 2px!important;font-size:10px!important}} /* 2.1 proof view and touch controls */ .ccds-proof{position:absolute;inset:0;z-index:20;background:#f5f3fa;overflow:auto;padding:22px;text-align:center}.ccds-proof[hidden]{display:none}.ccds-proof img{display:block;max-width:100%;max-height:75vh;margin:20px auto;object-fit:contain}.ccds-shell{position:relative}.ccds-secondary{min-height:40px}.ccds-footer-actions{flex-wrap:wrap}.ccds-tool-grid{gap:7px} .ccds-live-message{padding:8px 14px;background:#f0eafa;color:#452369;font-size:12px;line-height:1.4;flex-shrink:0;overflow-wrap:anywhere}.ccds-live-message.is-error{background:#fff0ed;color:#a12414} /* 2.3.0 — Single premium launch button. All rules scoped to this plugin. */ #ccds-entry{ width:100%!important;max-width:100%;min-width:0;clear:both; margin:14px 0 18px!important;padding:0!important;border:0!important; border-radius:0!important;background:transparent!important;box-shadow:none!important; overflow:visible!important;isolation:isolate; } #ccds-entry .ccds-sr-only{ 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;clip-path:inset(50%)!important; } #ccds-entry #ccds-launch{ box-sizing:border-box!important;appearance:none!important;-webkit-appearance:none!important; -webkit-tap-highlight-color:transparent;touch-action:manipulation; position:relative;isolation:isolate;overflow:hidden!important;display:flex!important; align-items:center!important;justify-content:flex-start!important; width:100%!important;max-width:100%!important;min-width:0!important;min-height:88px!important; margin:0!important;padding:17px clamp(15px,2.6vw,25px)!important;gap:clamp(11px,2vw,19px)!important; border-radius:20px!important;border:1px solid rgba(255,255,255,.22)!important; background:linear-gradient(108deg,#30154d 0%,#522271 44%,#843bad 100%)!important; color:#fff!important;text-align:left!important;text-decoration:none!important; box-shadow:0 9px 22px rgba(63,23,95,.28),0 2px 5px rgba(41,16,66,.13)!important; cursor:pointer!important;transition:transform .18s ease,box-shadow .2s ease,filter .2s ease!important; font:inherit!important;line-height:1.25!important;text-transform:none!important;letter-spacing:normal!important; } #ccds-entry #ccds-launch::before{ content:'';position:absolute;z-index:0;pointer-events:none;top:-80%;bottom:-80%;left:-65%;width:34%; transform:skewX(-19deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); animation:ccds-premium-shimmer 6s ease-in-out infinite; } #ccds-entry #ccds-launch::after{ content:'';position:absolute;z-index:0;pointer-events:none;inset:1px;border-radius:inherit; box-shadow:inset 0 1px rgba(255,255,255,.13); } #ccds-entry #ccds-launch>*{position:relative;z-index:1} #ccds-entry #ccds-launch:hover{transform:translateY(-2px);filter:brightness(1.045);box-shadow:0 13px 25px rgba(64,25,102,.34),0 3px 8px rgba(64,25,102,.13)!important} #ccds-entry #ccds-launch:active{transform:translateY(0) scale(.994);filter:brightness(.98)} #ccds-entry #ccds-launch:focus-visible{outline:3px solid #e4bb65!important;outline-offset:4px!important} #ccds-entry .ccds-launch-icon{ display:grid!important;place-items:center!important;flex:0 0 clamp(43px,5.1vw,58px); width:clamp(43px,5.1vw,58px);height:clamp(43px,5.1vw,58px); margin:0!important;padding:0!important; border-radius:15px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26); color:#ffdc9b;font-size:clamp(22px,3vw,29px);line-height:1;font-weight:800; } #ccds-entry .ccds-launch-copy{ display:flex!important;flex:1 1 auto;flex-direction:column;justify-content:center; align-items:flex-start!important;min-width:0!important;margin:0!important;padding:0!important;gap:4px; } #ccds-entry .ccds-launch-copy strong{ display:block;color:#fff!important;font-family:inherit!important;font-weight:800!important; font-size:clamp(15px,2vw,20px)!important;line-height:1.2!important; letter-spacing:0!important;text-transform:none!important;overflow-wrap:break-word; } #ccds-entry .ccds-launch-copy small{ display:block;color:rgba(255,255,255,.87)!important;font-family:inherit!important; font-size:clamp(11px,1.35vw,14px)!important;font-weight:550!important; line-height:1.35!important;letter-spacing:.1px!important;text-transform:none!important; overflow-wrap:anywhere; } #ccds-entry .ccds-launch-arrow{ display:grid!important;place-items:center!important;flex:0 0 clamp(34px,4.3vw,43px); width:clamp(34px,4.3vw,43px);height:clamp(34px,4.3vw,43px); padding:0!important;margin:0 0 0 auto!important;border-radius:50%; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.09); color:#fff;font-size:clamp(24px,2.5vw,30px);line-height:1; transition:transform .18s ease,background .18s ease; } #ccds-entry #ccds-launch:hover .ccds-launch-arrow{transform:translateX(3px);background:rgba(255,255,255,.22)} #ccds-entry #ccds-launch.ccds-launch-saved .ccds-launch-icon{color:#fff3bc;border-color:rgba(255,243,188,.4)} @keyframes ccds-premium-shimmer{ 0%,58%,100%{left:-65%;opacity:0}63%{opacity:.7}78%{left:135%;opacity:0} } @media(hover:none){#ccds-entry #ccds-launch:hover{transform:none;filter:none}} @media(max-width:600px){ #ccds-entry{margin:12px 0 16px!important} #ccds-entry #ccds-launch{min-height:77px!important;border-radius:16px!important;padding:13px 14px!important;gap:10px!important} #ccds-entry .ccds-launch-icon{flex-basis:45px;width:45px;height:45px;border-radius:12px;font-size:23px} #ccds-entry .ccds-launch-copy strong{font-size:clamp(14px,4.1vw,17px)!important} #ccds-entry .ccds-launch-copy small{font-size:clamp(10px,3vw,12px)!important} #ccds-entry .ccds-launch-arrow{flex-basis:35px;width:35px;height:35px;font-size:25px} } @media(max-width:340px){ #ccds-entry #ccds-launch{padding:11px 10px!important;gap:8px!important} #ccds-entry .ccds-launch-icon{flex-basis:39px;width:39px;height:39px} #ccds-entry .ccds-launch-arrow{flex-basis:31px;width:31px;height:31px} #ccds-entry .ccds-launch-copy strong{font-size:13px!important} #ccds-entry .ccds-launch-copy small{font-size:10px!important} } #ccds-modal #ccds-smart-guide{flex:none;background:linear-gradient(100deg,#fcf9ff,#fff9f2);border-bottom:1px solid #e4d8f1;box-shadow:0 3px 12px #3718600c;color:#402455;z-index:2} #ccds-modal #ccds-smart-guide[hidden],#ccds-modal #ccds-guide-details[hidden],#ccds-modal #ccds-guide-show[hidden]{display:none!important} #ccds-modal .ccds-guide-head{display:flex;align-items:center;gap:9px;min-height:51px;padding:7px 12px} #ccds-modal .ccds-guide-spark{font-size:20px;color:#7b44b5;animation:ccds-sparkle 3.6s ease-in-out infinite} #ccds-modal .ccds-guide-copy{min-width:0;flex:1} #ccds-modal .ccds-guide-copy strong{font-size:9px!important;letter-spacing:.45px;display:block;line-height:1.25;color:#5d347e} #ccds-modal .ccds-guide-copy strong span{font-size:9px;color:#9a69bf;font-weight:750;margin-left:5px} #ccds-modal .ccds-guide-copy>span{display:block;font-size:11px;line-height:1.35;font-weight:650;color:#44324f;margin-top:3px;overflow-wrap:anywhere} #ccds-modal .ccds-guide-action{flex:none;background:#633498!important;color:#fff!important;border:0!important;border-radius:9px!important;min-height:36px;padding:8px 11px!important;font-size:10px!important;font-weight:850!important;max-width:150px;box-shadow:0 5px 12px #622f9f32!important} #ccds-modal .ccds-guide-action:hover{background:#7f4cb4!important} #ccds-modal .ccds-guide-toggle{flex:none;width:27px;height:34px;border:1px solid #e4d9ee!important;background:#fff!important;border-radius:9px!important;color:#7c51a5!important;padding:0!important} #ccds-modal .ccds-guide-toggle[aria-expanded=true]{transform:rotate(180deg)} #ccds-modal .ccds-guide-details{padding:0 14px 12px 40px;background:#fcf9ff} #ccds-modal .ccds-guide-details p{margin:0 0 8px;font-size:11px;line-height:1.6;color:#553e6a} #ccds-modal .ccds-guide-rail{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 7px} #ccds-modal .ccds-guide-rail span{background:#eee4f6;border-radius:10px;padding:5px 8px;font-size:9px;font-weight:800;color:#87609d} #ccds-modal .ccds-guide-rail span.is-current{background:#5d2f8c;color:#fff} #ccds-modal .ccds-guide-dismiss{border:none!important;background:none!important;color:#7f549e!important;padding:3px!important;font-size:10px!important;font-weight:800!important;text-decoration:underline!important} #ccds-modal .ccds-guide-show{border:1px solid #d9c5e9!important;background:#fff!important;color:#693994!important;border-radius:8px!important;padding:5px 7px!important;font-size:11px!important;font-weight:800!important} #ccds-modal .ccds-guide-highlight{outline:3px solid #be8cf0!important;outline-offset:3px!important;animation:ccds-tip-glow 1.25s ease-in-out 3} @keyframes ccds-sparkle{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.18);transform:scale(1.04)}} @keyframes ccds-tip-glow{0%,100%{outline-color:#be8cf0}50%{outline-color:#f4bd65}} @media(max-width:800px){ #ccds-modal .ccds-guide-head{padding:6px 8px;gap:6px;min-height:46px} #ccds-modal .ccds-guide-copy strong{font-size:8px!important} #ccds-modal .ccds-guide-copy>span{font-size:10px} #ccds-modal .ccds-guide-action{min-height:32px;padding:5px 7px!important;font-size:9px!important} #ccds-modal .ccds-guide-spark{font-size:16px} #ccds-modal .ccds-guide-details{padding:0 9px 9px 28px} } @media(max-width:390px){ #ccds-modal .ccds-guide-copy>span{font-size:9px} #ccds-modal .ccds-guide-action{max-width:90px} } @media(prefers-reduced-motion:reduce){ #ccds-entry #ccds-launch::before,#ccds-modal .ccds-guide-spark,#ccds-modal .ccds-guide-highlight{animation:none!important} #ccds-entry #ccds-launch,#ccds-entry .ccds-launch-arrow{transition:none!important} } /* v2.4.0 — streamlined official editor: one place for every editing action. */ #ccds-modal #ccds-template-section[hidden]{display:none!important} #ccds-modal .ccds-shell{background:#fff;border:1px solid #e7ddf0} #ccds-modal .ccds-workspace{grid-template-columns:minmax(245px,268px) minmax(0,1fr) minmax(230px,284px)} #ccds-modal .ccds-sidebar{scrollbar-color:#d3c1e4 transparent;scrollbar-width:thin} #ccds-modal .ccds-main{background:radial-gradient(ellipse at 50% 34%,#ffffff 0%,#f7f3fa 64%,#ede6f4 100%)} #ccds-modal .ccds-stage-wrap{padding:12px 20px} #ccds-modal .ccds-stage{box-shadow:0 23px 62px #23153225,0 0 0 1px #e1d7ea} #ccds-modal .ccds-stage-top{background:#fff;border-bottom:1px solid #eee9f2} #ccds-modal .ccds-stage-top strong{font-size:11px!important;color:#46305c;letter-spacing:1.1px} #ccds-modal .ccds-section{border-bottom-color:#eee8f4} #ccds-modal .ccds-kicker{color:#77459e} #ccds-modal .ccds-footer{border-top:1px solid #eae0f0;box-shadow:0 -2px 15px #2513340a} #ccds-modal .ccds-footer-caption strong{font-weight:800;color:#47305a} #ccds-modal .ccds-note{border-left:3px solid #aa7dcc;background:#fbf8ff} #ccds-modal .ccds-tool:focus-within,#ccds-modal button:focus-visible{outline-offset:2px!important} @media(max-width:1080px) and (min-width:801px){#ccds-modal .ccds-workspace{grid-template-columns:minmax(195px,220px) minmax(0,1fr) minmax(205px,236px)}} @media(max-width:800px){ #ccds-modal .ccds-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(210px,54%) minmax(0,46%)} #ccds-modal .ccds-stage-wrap{padding:8px} #ccds-modal .ccds-stage-top{padding:8px 12px} #ccds-modal .ccds-footer-actions{gap:7px} #ccds-modal .ccds-footer-actions button{min-width:0;padding:10px 8px!important} #ccds-modal .ccds-footer-actions #ccds-save{flex:1.2} } @media(max-width:400px){#ccds-modal .ccds-footer-actions #ccds-cancel{padding:9px 7px!important}} /* ============================================================== Chethu Premium Design Studio 2.8.0 — clean adaptive editor Respects the customer's browser zoom and accessibility settings. All selectors are restricted to Design Studio components. ============================================================== */ #ccds-modal { width:100%!important; max-width:100vw!important; height:100%!important; max-height:100dvh!important; min-width:0!important; overflow:hidden!important; } #ccds-modal .ccds-shell { max-width:100%!important; min-width:0!important; min-height:0!important; } #ccds-modal .ccds-workspace { min-width:0!important; width:100%!important; } #ccds-modal .ccds-header { min-width:0!important; } #ccds-modal .ccds-stage-wrap { min-width:0!important; overflow:hidden!important; } #ccds-modal .ccds-stage { max-width:100%!important; } #ccds-modal .ccds-stage:focus-within { outline:2px solid #8f62cb; } #ccds-modal .ccds-section { overflow-wrap:anywhere; } #ccds-modal .ccds-footer { min-width:0!important; } #ccds-modal .ccds-footer-actions { min-width:0; } #ccds-modal .ccds-live-message { background:#f8f5fc!important;color:#634878!important;border-bottom:1px solid #eee7f4;min-height:30px; } #ccds-modal .ccds-live-message.is-error { background:#fff0ee!important;color:#9b2f28!important;border-left:3px solid #c44b42; } #ccds-modal .ccds-tool { transition:background .16s,border-color .16s,transform .16s; } @media(hover:hover){#ccds-modal .ccds-tool:hover { transform:translateY(-1px); }} #ccds-modal .ccds-mobile-tabs { padding:0!important; } #ccds-modal .ccds-footer-actions .ccds-primary { background:linear-gradient(115deg,#412066,#8b45bb)!important; } #ccds-modal .ccds-stage-top .ccds-grid-toggle { flex-shrink:0; } #ccds-modal .ccds-guide-action { white-space:normal!important; } @media(max-width:800px){ #ccds-modal { inset:0!important; padding:0!important; height:100dvh!important; width:100vw!important; max-width:100vw!important; border-radius:0!important; } #ccds-modal .ccds-shell { border:0!important; border-radius:0!important; width:100%!important; height:100%!important; } #ccds-modal .ccds-header { min-height:55px!important; max-height:64px!important; padding:7px 12px!important; gap:8px!important; } #ccds-modal .ccds-brand { min-width:0!important; } #ccds-modal .ccds-brand strong { font-size:12px!important; letter-spacing:.6px!important; } #ccds-modal .ccds-logo { width:32px!important; height:32px!important; font-size:17px!important; } #ccds-modal .ccds-header-actions { flex:none!important; } #ccds-modal .ccds-header-actions .ccds-status { display:none!important; } #ccds-modal .ccds-close { width:39px!important; height:39px!important; flex:none!important; } #ccds-modal .ccds-mobile-tabs { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important;min-height:43px!important; } #ccds-modal .ccds-mobile-tab {min-width:0!important;min-height:42px!important;font-size:12px!important;padding:9px 3px!important; } #ccds-modal .ccds-workspace {display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,59fr) minmax(0,41fr)!important;flex:1!important;min-height:0!important;overflow:hidden!important; } #ccds-modal .ccds-main {grid-column:1!important;grid-row:1!important; min-width:0!important;min-height:0!important;overflow:hidden!important; } #ccds-modal .ccds-sidebar {grid-column:1!important;grid-row:2!important;min-width:0!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important; -webkit-overflow-scrolling:touch; } #ccds-modal .ccds-left,#ccds-modal .ccds-right {display:none!important;border-left:0!important;border-right:0!important; } #ccds-modal[data-mobile-tab="add"] .ccds-left, #ccds-modal[data-mobile-tab="layers"] .ccds-left, #ccds-modal[data-mobile-tab="edit"] .ccds-right {display:block!important; } #ccds-modal[data-mobile-tab="add"] .ccds-layers-panel, #ccds-modal[data-mobile-tab="add"] .ccds-utility-tools, #ccds-modal[data-mobile-tab="layers"] .ccds-add-panel {display:none!important; } #ccds-modal .ccds-stage-top { padding:7px 12px!important; flex:none!important; } #ccds-modal .ccds-stage-top strong {font-size:10px!important;} #ccds-modal .ccds-stage-wrap {padding:6px 12px!important;min-height:0!important;flex:1!important; overflow:hidden!important; } #ccds-modal .ccds-stage { flex-shrink:0!important; box-shadow:0 6px 22px rgba(48,20,70,.19),0 0 0 1px #ddd3e8!important; } #ccds-modal .ccds-stage-bottom {padding:4px 12px!important;flex:none!important; } #ccds-modal .ccds-smart-guide { flex:none!important; } #ccds-modal .ccds-guide-head { min-height:42px!important; } #ccds-modal .ccds-live-message { padding:5px 12px!important;font-size:11px!important;line-height:1.35!important; } #ccds-modal .ccds-tool-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important; } #ccds-modal .ccds-tool {min-height:64px!important;flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;padding:9px 10px!important;gap:9px!important;} #ccds-modal .ccds-tool-icon{flex:none!important;width:31px!important;height:31px!important;} #ccds-modal .ccds-tool strong{font-size:11px!important;} #ccds-modal .ccds-tool small{display:none!important;} #ccds-modal .ccds-section {padding:13px 15px!important;} #ccds-modal .ccds-footer {padding:9px 11px max(9px,env(safe-area-inset-bottom))!important;min-height:57px!important;flex:none!important;} #ccds-modal .ccds-footer-caption {display:none!important;} #ccds-modal .ccds-footer-actions {display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.4fr)!important; gap:7px!important; width:100%!important;} #ccds-modal .ccds-footer-actions button {width:100%!important;min-width:0!important;margin:0!important;padding:10px 6px!important;min-height:43px!important;font-size:11px!important;flex:none!important;line-height:1.12!important;} #ccds-modal .ccds-footer-actions #ccds-save{font-weight:800!important;} #ccds-modal .ccds-proof {padding:14px 12px!important;} #ccds-modal .ccds-proof img {max-height:65vh!important;} } @media(max-width:360px){ #ccds-modal .ccds-logo{display:none!important;} #ccds-modal .ccds-footer-actions {grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,2fr)!important;gap:5px!important;} #ccds-modal .ccds-footer-actions button{font-size:10px!important;} #ccds-modal .ccds-guide-action{max-width:85px!important;} } @media(max-height:560px) and (max-width:800px) { #ccds-modal .ccds-workspace {grid-template-rows:minmax(0,57fr) minmax(0,43fr)!important;} #ccds-modal .ccds-guide-head {min-height:34px!important;} #ccds-modal .ccds-brand small {display:none!important;} } /* =========================================================== CHETHU CREATIONS — STUDIO 2.9.0 EASY EDITION One primary photo chooser, full-photo fit by default, simple two-step controls, stable mobile canvas and always-visible save. All overrides are scoped to #ccds-modal. =========================================================== */ #ccds-modal #ccds-crop-controls[hidden]{display:none!important} #ccds-modal .ccds-extra-tools{display:block;border:1px solid #e9e1ef;border-radius:13px;margin:14px 0 0;overflow:clip;background:#fff} #ccds-modal .ccds-extra-tools>summary{display:list-item;list-style-position:inside;padding:12px 14px;font-size:12px;font-weight:750;color:#694588;cursor:pointer;user-select:none;outline-offset:-3px} #ccds-modal .ccds-extra-tools[open]>summary{background:#f8f4fc;border-bottom:1px solid #eee5f5} #ccds-modal .ccds-extra-grid{padding:12px} #ccds-modal .ccds-advanced-tools{border:0;border-radius:0;border-bottom:1px solid #efeaf5;margin:0} #ccds-modal .ccds-advanced-tools>.ccds-section{border-bottom:0} #ccds-modal .ccds-edit-advanced{margin:12px 0 3px} #ccds-modal .ccds-edit-advanced .ccds-presetbar{margin:7px 10px 10px} #ccds-modal .ccds-edit-advanced .ccds-input-label, #ccds-modal .ccds-edit-advanced input[type=range], #ccds-modal .ccds-edit-advanced .ccds-duo, #ccds-modal .ccds-edit-advanced .ccds-hint, #ccds-modal .ccds-edit-advanced #ccds-crop-controls{margin-left:12px!important;margin-right:12px!important;width:calc(100% - 24px)!important} #ccds-modal .ccds-photo-fit{padding:13px;background:#f8f4fe;border:1px solid #ddcaee;border-radius:13px} #ccds-modal .ccds-photo-fit>strong{display:block;color:#492564;font-size:13px;margin-bottom:9px} #ccds-modal .ccds-fit-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px} #ccds-modal .ccds-fit-buttons button{min-height:46px!important;line-height:1.3!important;font-size:11px!important;padding:9px 8px!important} #ccds-modal .ccds-fit-buttons .is-on{background:#68309a!important;border-color:#68309a!important;color:#fff!important;box-shadow:0 3px 10px #4c217d26!important} #ccds-modal .ccds-photo-fit .ccds-hint{color:#66506f!important} #ccds-modal .ccds-add-panel>.ccds-section:nth-child(2) .ccds-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #ccds-modal #ccds-save{box-shadow:0 3px 10px rgba(90,45,136,.24)!important;letter-spacing:.1px!important} #ccds-modal #ccds-save:focus-visible{outline:3px solid #ffd166!important} #ccds-modal .ccds-live-message:not(.is-error){border-bottom-color:#f1ebf5!important;color:#5f4c70!important} #ccds-modal .ccds-stage{touch-action:pan-y} @media(max-width:800px){ #ccds-modal{overscroll-behavior:contain!important} #ccds-modal .ccds-header{min-height:53px!important;max-height:61px!important} #ccds-modal .ccds-mobile-tabs{background:#fff!important;border-bottom:1px solid #e4dbea!important} #ccds-modal .ccds-mobile-tab.is-active{background:#f3ebfc!important;color:#62318d!important;border-bottom:3px solid #7542a2!important} #ccds-modal .ccds-workspace{grid-template-rows:minmax(0,55fr) minmax(0,45fr)!important} #ccds-modal .ccds-stage-top{padding:5px 12px!important} #ccds-modal .ccds-stage-top span{display:none!important} #ccds-modal .ccds-stage-wrap{padding:5px 9px!important} #ccds-modal .ccds-stage-bottom{padding:5px 11px!important;line-height:1.2!important} #ccds-modal .ccds-stage-bottom span{font-size:10px!important;max-width:76%;color:#5b3b73} #ccds-modal .ccds-guide-head{min-height:38px!important;padding:5px 10px!important} #ccds-modal .ccds-guide-copy>span{font-size:10px!important;line-height:1.2!important} #ccds-modal .ccds-guide-action{max-width:100px!important;font-size:10px!important} #ccds-modal.ccds-has-photo .ccds-guide-details{display:none!important} #ccds-modal.ccds-has-photo .ccds-guide-spark{display:none!important} #ccds-modal.ccds-has-photo .ccds-guide-head{min-height:33px!important} #ccds-modal .ccds-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} #ccds-modal .ccds-tool{min-height:65px!important;border-radius:12px!important;font-size:13px!important} #ccds-modal .ccds-tool strong{font-size:12px!important} #ccds-modal #ccds-upload-feedback{margin-bottom:0!important} #ccds-modal .ccds-photo-fit{padding:11px!important} #ccds-modal .ccds-section{padding:12px 15px!important} #ccds-modal .ccds-footer{padding:7px 11px max(9px,env(safe-area-inset-bottom))!important;box-shadow:0 -4px 17px #24113719!important} #ccds-modal .ccds-footer-actions{grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;gap:8px!important} #ccds-modal #ccds-cancel{display:none!important} /* close via always-visible header X */ #ccds-modal .ccds-footer-actions button{min-height:47px!important;font-size:12px!important;border-radius:11px!important} #ccds-modal #ccds-save{font-size:13px!important;font-weight:850!important} } @media(max-width:370px){ #ccds-modal .ccds-brand strong{font-size:11px!important} #ccds-modal .ccds-fit-buttons{grid-template-columns:1fr 1fr} #ccds-modal .ccds-fit-buttons button{font-size:10px!important} #ccds-modal .ccds-footer-actions button{font-size:11px!important} #ccds-modal .ccds-guide-copy>span{font-size:9px!important} } /* ======================================================= 3.0.0 PREMIUM SIMPLE STUDIO Compact three-step flow, beginner-friendly tool hierarchy, progressive advanced controls, and one clear Save action. ======================================================= */ #ccds-modal .ccds-flow{flex:none;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 12px;background:#fff;border-bottom:1px solid #eee6f3;color:#91849e} #ccds-modal .ccds-flow span{display:flex;align-items:center;gap:6px;font-size:11px!important;font-weight:800;white-space:nowrap} #ccds-modal .ccds-flow span b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid #e5dcee;background:#f8f3fc;color:#866b9e;font-size:11px} #ccds-modal .ccds-flow i{font-style:normal;color:#b5a6c2;font-size:17px} #ccds-modal .ccds-flow .is-complete{color:#52775d} #ccds-modal .ccds-flow .is-complete b{color:#fff;background:#32815c;border-color:#32815c} #ccds-modal .ccds-flow .is-current{color:#502675} #ccds-modal .ccds-flow .is-current b{color:#fff;background:linear-gradient(130deg,#54217f,#a061d1);border-color:#68309a;box-shadow:0 3px 8px #68309a35} #ccds-modal #ccds-guide-action[hidden]{display:none!important} #ccds-modal .ccds-guide-copy strong{letter-spacing:.3px} #ccds-modal .ccds-background-options{margin:14px 15px 20px} #ccds-modal .ccds-background-options .ccds-section{padding:12px!important;border-bottom:none} #ccds-modal .ccds-simple-controls{background:#f9f6fc;border:1px solid #ebe2f2;padding:13px;border-radius:13px;margin-top:12px} #ccds-modal .ccds-simple-controls label{margin:0 0 7px!important} #ccds-modal .ccds-simple-controls input[type=range]{margin:0 0 12px!important;width:100%!important} #ccds-modal .ccds-simple-controls button{width:100%;background:#fff!important;border:1px solid #d8c7e8!important;font-weight:750!important;color:#673591!important} #ccds-modal .ccds-precision-options{padding-bottom:11px} #ccds-modal .ccds-precision-options>label,#ccds-modal .ccds-precision-options>input,#ccds-modal .ccds-precision-options>.ccds-tool-grid,#ccds-modal .ccds-precision-options>#ccds-center-v{margin-left:12px!important;margin-right:12px!important;width:calc(100% - 24px)!important} #ccds-modal .ccds-precision-options>.ccds-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px!important} #ccds-modal .ccds-proof{z-index:21;padding:18px;display:flex;flex-direction:column;align-items:center} #ccds-modal .ccds-proof[hidden]{display:none} #ccds-modal .ccds-proof-bar{position:sticky;top:0;z-index:2;width:min(640px,100%);display:flex;gap:12px;justify-content:space-between;align-items:center;padding:10px 0;background:#f5f3fa} #ccds-modal .ccds-proof-bar button{min-height:46px!important;flex:1} #ccds-modal .ccds-proof img{max-height:min(70vh,720px);width:auto;max-width:100%;object-fit:contain;border-radius:8px;box-shadow:0 8px 28px #31144817} #ccds-modal #ccds-save:disabled{background:#eaf5ef!important;color:#286e45!important;box-shadow:none!important;opacity:1!important} #ccds-modal .ccds-tool{border-radius:15px!important} #ccds-modal .ccds-upload-tool{background:linear-gradient(135deg,#f4eafb,#f9f1ff)!important;border:1px solid #d5b7e9!important} #ccds-modal .ccds-upload-tool .ccds-tool-icon{background:#663591;color:#fff} #ccds-modal .ccds-upload-tool:focus-within{box-shadow:0 0 0 3px #d3acf1!important} @media(max-width:800px){ #ccds-modal .ccds-flow{gap:6px;padding:7px 5px;min-height:34px} #ccds-modal .ccds-flow span{font-size:10px!important;gap:4px} #ccds-modal .ccds-flow span b{height:19px;width:19px;font-size:10px} #ccds-modal .ccds-flow i{font-size:12px} #ccds-modal .ccds-stage-top{display:none!important} #ccds-modal #ccds-live-message:not(.is-error){display:none!important} #ccds-modal .ccds-smart-guide{border-bottom:1px solid #eee3f5} #ccds-modal .ccds-guide-head{min-height:33px!important;padding:5px 10px!important} #ccds-modal .ccds-guide-copy strong{font-size:8px!important} #ccds-modal .ccds-guide-copy>span{font-size:10px!important} #ccds-modal .ccds-workspace{grid-template-rows:minmax(0,56fr) minmax(0,44fr)!important} #ccds-modal .ccds-mobile-tab{font-size:11px!important;letter-spacing:-.15px!important} #ccds-modal .ccds-background-options{margin:10px 12px 15px} #ccds-modal .ccds-proof{padding:12px} #ccds-modal .ccds-proof-bar{gap:7px;flex-wrap:nowrap} #ccds-modal .ccds-proof-bar button{padding:10px 7px!important;min-height:44px!important;font-size:11px!important} #ccds-modal .ccds-simple-controls{margin-top:8px;padding:11px} #ccds-modal .ccds-footer-actions #ccds-save{font-size:13px!important} } @media(max-width:345px){ #ccds-modal .ccds-flow{gap:3px} #ccds-modal .ccds-flow span{font-size:9px!important} #ccds-modal .ccds-flow span b{width:17px;height:17px} #ccds-modal .ccds-flow i{font-size:11px} } @media(prefers-reduced-motion:reduce){#ccds-modal .ccds-flow *{animation:none!important;transition:none!important}} /* Version 3.0.0 final adjustments: keep photo sizing before advanced effects and make saving progress visible on mobile. */ #ccds-modal #ccds-photo-advanced[hidden]{display:none!important} #ccds-modal #ccds-live-message.is-working{display:block!important;background:#efe6ff!important;color:#5c3188!important;font-weight:750!important;border-bottom:1px solid #dec8f3!important} #ccds-modal #ccds-live-message.is-working::before{content:'◌';display:inline-block;margin-right:8px;font-size:17px;animation:ccds-saving-pulse 1s linear infinite} @keyframes ccds-saving-pulse{50%{opacity:.25}} @media(prefers-reduced-motion:reduce){#ccds-modal #ccds-live-message.is-working::before{animation:none!important}} /* ============================================================= 3.2.0 MOBILE-FIRST EDITING: ergonomic toolbar and canvas zoom Zoom is viewport-only; it does not change artwork pixel quality. ============================================================= */ #ccds-modal .ccds-canvas-toolbar{display:flex;flex:none;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-bottom:1px solid #eae2f1} #ccds-modal .ccds-canvas-toolbar .ccds-history-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:0;position:static;background:none} #ccds-modal .ccds-canvas-toolbar .ccds-history-btn{min-height:42px!important;min-width:85px!important;padding:8px 13px!important;margin:0!important;border-radius:12px!important;font-size:13px!important;white-space:nowrap!important;box-shadow:none!important} #ccds-modal .ccds-zoom-bar{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0} #ccds-modal .ccds-zoom-btn,#ccds-modal .ccds-zoom-fit{display:grid!important;place-items:center!important;min-width:42px!important;min-height:42px!important;padding:5px!important;border:1px solid #d4c6e2!important;border-radius:11px!important;background:#f6f0ff!important;color:#552b82!important;font-size:23px!important;font-weight:850!important;touch-action:manipulation} #ccds-modal .ccds-zoom-fit{font-size:12px!important;min-width:55px!important;background:#fff!important} #ccds-modal .ccds-zoom-level{display:grid;place-items:center;min-width:52px!important;font-size:12px!important;font-weight:900;color:#4f3173;font-variant-numeric:tabular-nums} #ccds-modal .ccds-zoom-btn:disabled{opacity:.42!important} #ccds-modal .ccds-canvas-help{background:#f9f5ff;padding:5px 12px;font-size:10px;font-weight:700;color:#6b5680;text-align:center;flex:none;line-height:1.2} #ccds-modal #ccds-stage-wrap{overflow:auto!important;overscroll-behavior:contain!important;display:flex!important;justify-content:flex-start!important;align-items:flex-start!important;scrollbar-width:thin!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-x pan-y!important} #ccds-modal .ccds-stage-space{position:relative;flex:0 0 auto;min-width:1px;min-height:1px;margin:auto} #ccds-modal .ccds-stage-space>.ccds-stage{transform-origin:top left!important;flex:none!important;margin:0!important;max-width:none!important} #ccds-modal .ccds-print-region canvas{touch-action:none!important} #ccds-modal .ccds-zoom-btn:focus-visible,#ccds-modal .ccds-zoom-fit:focus-visible,#ccds-modal .ccds-history-btn:focus-visible{outline:3px solid #9c65d3!important;outline-offset:2px!important} @media(max-width:800px){ #ccds-modal .ccds-canvas-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;padding:6px 8px!important} #ccds-modal .ccds-canvas-toolbar .ccds-history-btn{min-width:0!important;padding:8px 6px!important;min-height:42px!important;font-size:12px!important} #ccds-modal .ccds-zoom-btn{min-width:40px!important;min-height:42px!important} #ccds-modal .ccds-zoom-fit{min-width:43px!important;min-height:42px!important;font-size:11px!important} #ccds-modal .ccds-zoom-level{min-width:40px!important;font-size:11px!important} #ccds-modal .ccds-zoom-bar{gap:3px!important} #ccds-modal .ccds-canvas-help{padding:3px 7px!important;font-size:10px!important} #ccds-modal .ccds-mobile-tab{min-height:44px!important;line-height:1.15!important} #ccds-modal #ccds-save{min-height:48px!important} } @media(max-width:360px){ #ccds-modal .ccds-canvas-toolbar{grid-template-columns:1fr!important;gap:5px!important} #ccds-modal .ccds-canvas-toolbar .ccds-history-bar{grid-row:2} #ccds-modal .ccds-zoom-bar{grid-row:1;justify-content:center!important} #ccds-modal .ccds-zoom-btn,#ccds-modal .ccds-zoom-fit{min-height:40px!important} #ccds-modal .ccds-canvas-toolbar .ccds-history-btn{min-height:39px!important} #ccds-modal .ccds-mobile-tab{font-size:10px!important} } @media(prefers-reduced-motion:reduce){#ccds-modal .ccds-canvas-toolbar *{transition:none!important;animation:none!important}} /* Compact phones keep all controls on one row and give the canvas more height. */ @media(max-width:370px){ #ccds-modal .ccds-canvas-toolbar{grid-template-columns:minmax(0,1fr) auto!important;gap:4px!important;padding:5px 6px!important} #ccds-modal .ccds-canvas-toolbar .ccds-history-bar{grid-row:auto!important;gap:4px!important} #ccds-modal .ccds-canvas-toolbar .ccds-history-btn{padding:5px 3px!important;min-height:40px!important;font-size:11px!important} #ccds-modal .ccds-zoom-bar{grid-row:auto!important;gap:2px!important} #ccds-modal .ccds-zoom-btn{min-height:40px!important;min-width:37px!important;padding:3px!important} #ccds-modal .ccds-zoom-fit{min-height:40px!important;min-width:36px!important;padding:2px!important;font-size:10px!important} #ccds-modal .ccds-zoom-level{min-width:35px!important;font-size:10px!important} } @media(max-height:760px) and (max-width:800px){ #ccds-modal .ccds-workspace{grid-template-rows:minmax(0,65fr) minmax(0,35fr)!important} #ccds-modal .ccds-canvas-help{display:none!important} #ccds-modal .ccds-guide-head{min-height:27px!important} } /* v3.2.1 - mobile save must remain reachable above fixed Android app navigation. */ #ccds-modal .ccds-save-feedback[hidden]{display:none!important} #ccds-modal .ccds-save-feedback{display:block;width:100%;padding:8px 11px;margin:0 0 7px;border-radius:10px;background:#eef8f1;color:#246c48;font-size:12px;font-weight:750;line-height:1.35;overflow-wrap:anywhere;text-align:left} #ccds-modal .ccds-save-feedback.is-working{background:#f3ebff;color:#5a2e83} #ccds-modal .ccds-save-feedback.is-error{background:#fff0f3;color:#9b214b;border:1px solid #eec1d2} #ccds-modal .ccds-save-feedback.is-success{background:#edf8f1;color:#1f7044} @media(max-width:800px){ /* Re-order existing controls; no duplicate Save button is created. */ #ccds-modal .ccds-header{order:1!important} #ccds-modal .ccds-mobile-tabs{order:2!important} #ccds-modal .ccds-footer{order:3!important;position:relative!important;z-index:9!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;flex:none!important;padding:9px 12px!important;border-top:0!important;border-bottom:1px solid #e3d6ee!important;background:#fff!important;box-shadow:0 5px 16px #32144b1c!important} #ccds-modal .ccds-footer-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)!important;gap:9px!important;width:100%!important} #ccds-modal #ccds-cancel{display:none!important} #ccds-modal .ccds-footer-actions #ccds-preview{min-height:48px!important;font-size:13px!important} #ccds-modal .ccds-footer-actions #ccds-save{min-height:50px!important;font-size:15px!important;letter-spacing:.1px!important;background:linear-gradient(110deg,#3b155d,#8744b6)!important;color:#fff!important;border-radius:13px!important;box-shadow:0 5px 15px #48227438!important} #ccds-modal .ccds-footer-actions #ccds-save:disabled{background:#e8f4ed!important;color:#206c47!important} #ccds-modal .ccds-workspace{order:4!important;min-height:0!important;flex:1 1 auto!important} #ccds-modal .ccds-shell{min-height:0!important;height:100%!important;height:100dvh!important} #ccds-modal{height:100%!important;height:100dvh!important;max-height:100dvh!important} #ccds-modal .ccds-proof{z-index:25!important} } @media(max-width:380px){ #ccds-modal .ccds-footer{padding:7px 9px!important} #ccds-modal .ccds-footer-actions #ccds-save{font-size:13px!important;min-height:46px!important} #ccds-modal .ccds-footer-actions #ccds-preview{font-size:12px!important;min-height:46px!important} } /* 3.2.2 — remove the on-canvas helpful-tip panel and align the remaining controls. This keeps the compact progress indicator, existing buttons, and print area. */ #ccds-modal .ccds-main{min-height:0;min-width:0;overflow:hidden} #ccds-modal .ccds-flow{flex:none;margin:0!important;border-bottom:1px solid #eee6f3!important} #ccds-modal .ccds-canvas-toolbar{margin:0!important;min-width:0!important} #ccds-modal .ccds-canvas-toolbar>.ccds-history-bar,#ccds-modal .ccds-zoom-bar{min-width:0} #ccds-modal .ccds-stage-bottom{min-width:0!important;gap:8px!important} #ccds-modal .ccds-stage-bottom #ccds-tip{min-width:0;overflow:hidden;text-overflow:ellipsis} #ccds-modal .ccds-stage-bottom #ccds-dimensions{flex:none} @media(max-width:800px){ #ccds-modal .ccds-flow{padding:7px 8px!important;min-height:34px!important} #ccds-modal .ccds-canvas-toolbar{gap:6px!important;align-items:center!important} #ccds-modal .ccds-stage-bottom{padding:5px 10px!important;min-height:27px!important} #ccds-modal .ccds-workspace{grid-template-rows:minmax(0,57fr) minmax(0,43fr)!important} #ccds-modal .ccds-stage-wrap{min-width:0!important;min-height:0!important} } @media(max-width:370px){ #ccds-modal .ccds-canvas-toolbar{padding:5px 6px!important;gap:4px!important} #ccds-modal .ccds-flow{gap:4px!important;padding:6px 4px!important} #ccds-modal .ccds-flow span{min-width:0!important;font-size:9px!important} #ccds-modal .ccds-flow i{flex:none} } /* 3.2.3 — Mobile editor accessibility and bottom-navigation clearance. A single, natural vertical scroll replaces the tiny nested settings pane. Preview and Save stay at the top; canvas zoom and original artwork are unchanged. */ @media (max-width: 800px) { #ccds-modal { /* Reserve room for Chethu Creations' persistent Android app footer. */ --ccds-app-bar-clearance: 88px; inset: 0 0 var(--ccds-app-bar-clearance) 0 !important; width: 100vw !important; height: calc(100dvh - var(--ccds-app-bar-clearance)) !important; max-height: calc(100dvh - var(--ccds-app-bar-clearance)) !important; padding: 0 !important; overflow: hidden !important; } #ccds-modal .ccds-shell { height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } #ccds-modal .ccds-header, #ccds-modal .ccds-mobile-tabs, #ccds-modal .ccds-footer { flex: 0 0 auto !important; } #ccds-modal .ccds-workspace { order: 4 !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; width: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 0 0 max(26px, env(safe-area-inset-bottom)) !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch; scroll-padding: 16px 0 52px; scrollbar-width: thin; } #ccds-modal .ccds-main { display: flex !important; flex-direction: column !important; order: 0 !important; grid-area: auto !important; flex: 0 0 auto !important; width: 100% !important; min-height: 0 !important; height: auto !important; overflow: visible !important; } #ccds-modal .ccds-stage-wrap, #ccds-modal #ccds-stage-wrap { flex: 0 0 auto !important; height: clamp(225px, 39svh, 345px) !important; min-height: 225px !important; max-height: none !important; width: 100% !important; overflow: auto !important; } #ccds-modal .ccds-sidebar { grid-area: auto !important; order: 1 !important; flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; overscroll-behavior: auto !important; background: #fff !important; } #ccds-modal .ccds-left, #ccds-modal .ccds-right {display: none !important;} #ccds-modal[data-mobile-tab="add"] .ccds-left, #ccds-modal[data-mobile-tab="layers"] .ccds-left, #ccds-modal[data-mobile-tab="edit"] .ccds-right {display: block !important;} #ccds-modal .ccds-sidebar > :last-child {margin-bottom: 16px;} #ccds-modal .ccds-right .ccds-section {overflow: visible;} #ccds-modal .ccds-footer {padding-bottom: 7px !important;z-index:12 !important;} #ccds-modal .ccds-fit-buttons {grid-template-columns:repeat(2,minmax(0,1fr)) !important;} #ccds-modal .ccds-fit-buttons button {min-width:0 !important;white-space:normal !important;min-height:46px !important;} #ccds-modal .ccds-duo {flex-wrap:wrap;} #ccds-modal .ccds-duo > * {min-width:0;} /* Keep preview dialog inside the visible editor region, not under the app footer. */ #ccds-modal .ccds-proof {inset: 0 !important;overflow-y:auto !important;} } @media (max-width:800px) and (max-height:640px) { #ccds-modal {--ccds-app-bar-clearance: 78px;} #ccds-modal .ccds-stage-wrap, #ccds-modal #ccds-stage-wrap {height: 220px !important;min-height: 200px !important;} } @media (max-width:800px) and (orientation:landscape) and (max-height:480px){ #ccds-modal {--ccds-app-bar-clearance: 45px;} #ccds-modal .ccds-stage-wrap, #ccds-modal #ccds-stage-wrap {height: 195px !important;min-height: 160px !important;} } /* v3.2.4 — Official smart size & position dock, beside the product. One control only; nothing duplicated in the lower Edit panel. */ #ccds-modal .ccds-stage-area{display:flex;align-items:stretch;justify-content:center;gap:9px;min-width:0;min-height:0;flex:1 1 auto;padding:5px 12px 7px;isolation:isolate} #ccds-modal .ccds-stage-area #ccds-stage-wrap{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:none!important;height:100%!important;min-height:0!important;padding:3px!important;overflow:auto!important} #ccds-modal .ccds-size-dock{position:relative;z-index:3;display:flex;flex:0 0 96px;min-width:0;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:9px 6px;border:1px solid #dfd1ed;border-radius:17px;background:linear-gradient(175deg,#fff,#f4ebff);box-shadow:0 6px 20px #44206217;color:#5d3285;overscroll-behavior:contain} #ccds-modal .ccds-size-eyebrow{font-size:10px;letter-spacing:.5px;font-weight:900;text-align:center;color:#613e80;line-height:1.3} #ccds-modal .ccds-size-value{display:block;text-align:center;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;color:#512b7d;margin:0!important;white-space:nowrap} #ccds-modal .ccds-size-step{display:grid!important;place-items:center!important;width:43px!important;min-width:43px!important;height:37px!important;min-height:37px!important;padding:0!important;border:1px solid #d2b9e8!important;border-radius:12px!important;background:#fff!important;color:#622c91!important;font-size:23px!important;line-height:1!important;font-weight:850!important;box-shadow:none!important;touch-action:manipulation!important} #ccds-modal .ccds-size-range{display:block!important;writing-mode:vertical-lr!important;direction:rtl!important;accent-color:#8242b4!important;width:34px!important;height:68px!important;min-height:45px!important;padding:0!important;border:0!important;margin:0 auto!important;background:transparent!important;touch-action:none!important;cursor:pointer!important;appearance:auto!important} #ccds-modal .ccds-size-center{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;width:100%!important;min-height:48px!important;padding:6px 1px!important;border:1px solid #bda1d7!important;border-radius:12px!important;background:linear-gradient(130deg,#5c2588,#8b49b7)!important;color:#fff!important;font-size:21px!important;font-weight:800!important;line-height:1!important;white-space:normal!important} #ccds-modal .ccds-size-center span{font-size:10px!important;line-height:1.1!important} #ccds-modal .ccds-size-reset{display:block!important;padding:3px!important;min-height:26px!important;width:100%!important;border:0!important;background:transparent!important;color:#633785!important;font-size:11px!important;font-weight:800!important;text-decoration:underline!important} #ccds-modal .ccds-size-dock.is-disabled{opacity:.55} #ccds-modal .ccds-size-dock button:disabled,#ccds-modal .ccds-size-dock input:disabled{cursor:not-allowed!important;filter:grayscale(.4)} #ccds-modal .ccds-size-dock button:focus-visible,#ccds-modal .ccds-size-range:focus-visible{outline:3px solid #a67fd0!important;outline-offset:2px!important} @media(max-width:800px){ #ccds-modal .ccds-stage-area{flex:0 0 auto!important;height:clamp(225px,39svh,345px)!important;min-height:225px!important;padding:5px 8px 7px!important;gap:7px!important} #ccds-modal .ccds-stage-area #ccds-stage-wrap{height:100%!important;min-height:0!important;flex:1 1 0!important;width:0!important;padding:2px!important} #ccds-modal .ccds-size-dock{flex-basis:79px!important;gap:4px!important;padding:7px 4px!important;border-radius:14px!important} #ccds-modal .ccds-size-eyebrow{font-size:9px!important} #ccds-modal .ccds-size-step{min-height:38px!important;width:43px!important} #ccds-modal .ccds-size-range{height:62px!important} #ccds-modal .ccds-size-center{min-height:44px!important} #ccds-modal .ccds-size-reset{min-height:25px!important} } @media(max-width:800px) and (max-height:640px){#ccds-modal .ccds-stage-area{height:220px!important;min-height:200px!important}} @media(max-width:800px) and (orientation:landscape) and (max-height:480px){#ccds-modal .ccds-stage-area{height:195px!important;min-height:160px!important}#ccds-modal .ccds-size-dock{gap:1px!important;padding:4px!important}#ccds-modal .ccds-size-range{height:39px!important}#ccds-modal .ccds-size-center{min-height:35px!important}} @media(max-width:360px){#ccds-modal .ccds-stage-area{gap:5px!important;padding:4px 6px!important}#ccds-modal .ccds-size-dock{flex-basis:72px!important}#ccds-modal .ccds-size-step{min-height:34px!important}#ccds-modal .ccds-size-range{height:54px!important}} /* v3.2.5 — compact Photoshop-inspired LEFT icon rail; actual tools remain the * existing fully-functional design editor (no duplicated PHP save endpoints). */ #ccds-modal .ccds-workspace{ display:grid!important;grid-template-columns:68px minmax(238px,270px) minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important;min-height:0!important;overflow:hidden!important; } #ccds-modal .ccds-tool-rail{ grid-column:1!important;grid-row:1!important;display:flex!important;flex-direction:column!important; align-items:stretch!important;gap:5px!important;padding:10px 6px 14px!important; min-width:0!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important; background:linear-gradient(165deg,#20132f 0%,#351b4b 60%,#271532 100%)!important; border-right:1px solid #5a4075!important;scrollbar-width:thin!important;scrollbar-color:#8b70aa #281936!important; overscroll-behavior:contain!important;z-index:4; } #ccds-modal .ccds-rail-caption{color:#d4b8f0;text-align:center;font-size:9px;font-weight:850;letter-spacing:1.5px;padding:4px 0 8px;line-height:1.2} #ccds-modal .ccds-rail-btn{ position:relative!important;flex:0 0 auto!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important;gap:3px!important; width:100%!important;min-width:0!important;min-height:49px!important;max-height:56px!important; margin:0!important;padding:6px 2px!important;border:1px solid transparent!important; border-radius:12px!important;background:transparent!important;color:#f4eefd!important; cursor:pointer!important;box-shadow:none!important;touch-action:manipulation!important; transition:background-color .18s,border-color .18s,transform .18s; } #ccds-modal .ccds-rail-btn svg{height:21px;width:21px;display:block;flex:none;pointer-events:none} #ccds-modal .ccds-rail-btn span{font-size:9px!important;font-weight:780!important;line-height:1.05!important;white-space:nowrap!important;pointer-events:none!important;color:inherit!important} #ccds-modal .ccds-rail-btn:hover,#ccds-modal .ccds-rail-btn.is-active,#ccds-modal .ccds-rail-btn:focus-within{ background:#8d54bc!important;border-color:#cfa9f1!important;color:#fff!important; } #ccds-modal .ccds-rail-btn:focus-visible{outline:3px solid #e5c7fa!important;outline-offset:-2px!important} #ccds-modal .ccds-rail-btn:disabled{opacity:.38!important} #ccds-modal .ccds-rail-sep{height:1px;min-height:1px;width:72%;margin:6px auto;background:#a783c06b} #ccds-modal .ccds-tool-rail .ccds-native-photo-input{z-index:10!important;cursor:pointer!important} #ccds-modal .ccds-left,#ccds-modal .ccds-right{ grid-column:2!important;grid-row:1!important;min-height:0!important;min-width:0!important; height:auto!important;max-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important; border-right:1px solid #e9dff1!important;border-left:0!important;background:#fff!important; display:none!important;scrollbar-width:thin!important; } #ccds-modal .ccds-main{grid-column:3!important;grid-row:1!important;min-width:0!important;min-height:0!important;order:initial!important} #ccds-modal[data-mobile-tab="add"] .ccds-left,#ccds-modal[data-mobile-tab="layers"] .ccds-left{display:block!important} #ccds-modal[data-mobile-tab="edit"] .ccds-right{display:block!important} #ccds-modal[data-mobile-tab="add"] .ccds-left .ccds-add-panel{display:block!important} #ccds-modal[data-mobile-tab="add"] .ccds-left .ccds-layers-panel{display:none!important} #ccds-modal[data-mobile-tab="layers"] .ccds-left .ccds-add-panel{display:none!important} #ccds-modal[data-mobile-tab="layers"] .ccds-left .ccds-layers-panel{display:block!important} #ccds-modal .ccds-canvas-toolbar{justify-content:center!important;gap:6px!important} #ccds-modal .ccds-canvas-toolbar .ccds-zoom-bar{justify-content:center!important} #ccds-modal .ccds-tool-rail .ccds-upload-tool{isolation:isolate!important;overflow:hidden!important} @media (max-width:1100px) and (min-width:801px){ #ccds-modal .ccds-workspace{grid-template-columns:62px minmax(205px,230px) minmax(0,1fr)!important} #ccds-modal .ccds-tool-rail{padding:7px 4px!important} #ccds-modal .ccds-rail-btn{min-height:45px!important;padding:4px 2px!important} } @media(max-width:800px){ #ccds-modal .ccds-mobile-tabs{display:none!important} #ccds-modal .ccds-workspace{ display:grid!important;grid-template-columns:53px minmax(0,1fr)!important; grid-template-rows:auto auto!important;align-content:start!important;align-items:start!important; flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important; overflow-y:auto!important;overflow-x:hidden!important; padding:0 0 max(30px,env(safe-area-inset-bottom))!important; } #ccds-modal .ccds-tool-rail{ grid-column:1!important;grid-row:1 / span 2!important; position:sticky!important;top:0!important;align-self:start!important; height:auto!important;min-height:0!important;max-height:min(76svh,680px)!important; padding:6px 3px 18px!important;gap:3px!important;z-index:8!important; border-radius:0 0 14px 0!important; } #ccds-modal .ccds-rail-caption{padding:2px 0 4px;font-size:8px} #ccds-modal .ccds-rail-btn{min-height:44px!important;max-height:52px!important;gap:2px!important;padding:5px 2px!important;border-radius:10px!important} #ccds-modal .ccds-rail-btn svg{width:20px;height:20px} #ccds-modal .ccds-rail-btn span{font-size:8px!important} #ccds-modal .ccds-main{ display:flex!important;flex-direction:column!important;grid-column:2!important;grid-row:1!important; width:100%!important;height:auto!important;min-height:0!important;max-height:none!important; overflow:visible!important;order:initial!important;flex:0 0 auto!important; } #ccds-modal .ccds-left,#ccds-modal .ccds-right{ grid-column:2!important;grid-row:2!important;order:initial!important; width:100%!important;max-width:100%!important;height:auto!important; min-height:0!important;max-height:none!important;overflow:visible!important; } #ccds-modal .ccds-stage-area{padding-left:4px!important;padding-right:5px!important;gap:5px!important} #ccds-modal .ccds-flow{gap:3px!important;padding:5px 2px!important} #ccds-modal .ccds-flow span{font-size:9px!important} #ccds-modal .ccds-canvas-help{font-size:9px!important} #ccds-modal .ccds-canvas-toolbar{padding:6px 2px!important} #ccds-modal .ccds-footer{order:3!important;position:relative!important} #ccds-modal .ccds-header{order:1!important} } @media(max-width:370px){ #ccds-modal .ccds-workspace{grid-template-columns:46px minmax(0,1fr)!important} #ccds-modal .ccds-tool-rail{padding:4px 2px!important} #ccds-modal .ccds-rail-btn{min-height:42px!important} #ccds-modal .ccds-rail-btn span{font-size:7px!important} #ccds-modal .ccds-size-dock{flex-basis:58px!important;padding:5px 1px!important} #ccds-modal .ccds-size-step{width:36px!important;min-width:36px!important} #ccds-modal .ccds-size-center{font-size:17px!important} #ccds-modal .ccds-size-center span{font-size:8px!important} #ccds-modal .ccds-size-range{height:42px!important} } @media(prefers-reduced-motion:reduce){#ccds-modal .ccds-rail-btn{transition:none!important}} /* v3.3.0 premium creative tools */ #ccds-modal .ccds-creative-tools{display:flex;flex-direction:column;gap:12px;padding:14px!important} #ccds-modal .ccds-creative-card{background:linear-gradient(145deg,#fff,#f7f2ff);border:1px solid #e2d7f1;border-radius:15px;padding:13px;display:flex;flex-direction:column;gap:8px} #ccds-modal .ccds-creative-card strong{font-size:13px;color:#4d2e6b} #ccds-modal .ccds-creative-card p{margin:0;font-size:11px;line-height:1.45;color:#6f607d} #ccds-modal .ccds-creative-card button{min-height:42px!important;white-space:normal!important} #ccds-modal .ccds-creative-card input[type="range"]{width:100%;accent-color:#7d3eac} #ccds-modal .ccds-custom-bg-btn{display:block;position:relative;cursor:pointer;background:#673595;color:#fff;text-align:center;padding:15px 10px;border-radius:11px;font-weight:800;font-size:12px;overflow:hidden} #ccds-modal .ccds-custom-bg-btn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer} #ccds-modal .ccds-creative-card .ccds-secondary.is-on{background:#e5d2fa!important;border-color:#673595!important} #ccds-modal .ccds-rail-btn[data-ccds-tool="mosaic"] svg{stroke-width:2.3} #ccds-modal .ccds-creative-card [type="color"]{height:40px;width:64px;border-radius:8px} /* v3.3.2: keep unconfigured AI control out of customer-facing editor. */ #ccds-modal #ccds-ai-setup-note a{color:#5f278c!important;font-weight:750;text-decoration:underline;text-underline-offset:2px} #ccds-modal .ccds-android-picker-help{border-left:3px solid #8a55b9;background:#f7f2fb;color:#583c70;padding:9px 12px;border-radius:7px;margin-top:9px!important;line-height:1.5} /* Mosaic Maker v3.3.8 — Gandr-like quick tools with smart auto-arrange */ #ccds-modal .ccds-mosaic-card{background:linear-gradient(165deg,#fff,#f9f4ff)!important;border-color:#e3d7f0!important} #ccds-modal .ccds-mosaic-heading{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px} #ccds-modal .ccds-mosaic-heading strong{font-size:12px;font-weight:900;color:#47235f} #ccds-modal .ccds-mosaic-heading p{margin:4px 0 0;font-size:10px;color:#796b8b;line-height:1.45} #ccds-modal .ccds-mosaic-symbol{font-size:23px;line-height:1;color:#7337ad} #ccds-modal .ccds-mosaic-layouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:12px 0} #ccds-modal .ccds-mosaic-layout{display:flex!important;min-width:0;flex-direction:column;align-items:center;gap:5px;border:1px solid #e3d9eb!important;border-radius:9px!important;padding:8px 3px!important;background:#fff!important;color:#55416a!important;font-size:10px!important;font-weight:750!important;line-height:1.15!important} #ccds-modal .ccds-mosaic-layout.is-active{background:#f0e6ff!important;border-color:#8548c6!important;box-shadow:inset 0 0 0 1px #8548c6!important;color:#4b1f78!important} #ccds-modal .ccds-mosaic-layout:focus-visible,#ccds-modal .ccds-mosaic-add:focus-visible{outline:3px solid #9061d2;outline-offset:2px} #ccds-modal .ccds-mosaic-thumbnail{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#ebe2fa;width:58px;height:42px;border-radius:4px;padding:3px} #ccds-modal .ccds-mosaic-thumbnail i{display:block;background:#9360c6;border-radius:2px} #ccds-modal .ccds-thumb-gandr{grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr} #ccds-modal .ccds-thumb-gandr i:first-child{grid-row:span 2;background:#683494} #ccds-modal .ccds-thumb-gandr i:nth-child(4){display:none} #ccds-modal .ccds-thumb-brick{grid-template-columns:.7fr 1.3fr .7fr;grid-template-rows:1fr 1fr} #ccds-modal .ccds-thumb-brick i:nth-child(1){grid-column:span 2} #ccds-modal .ccds-thumb-brick i:nth-child(2){grid-column:3} #ccds-modal .ccds-thumb-brick i:nth-child(3){grid-column:1} #ccds-modal .ccds-thumb-brick i:nth-child(4){grid-column:span 2} #ccds-modal .ccds-mosaic-add{display:flex!important;align-items:center;justify-content:space-between;gap:7px;background:#633397!important;border:0!important;border-radius:10px!important;color:#fff!important;font-weight:850!important;font-size:12px!important;padding:12px!important;cursor:pointer;min-height:43px} #ccds-modal .ccds-mosaic-add span{font-size:10px;color:#efdbff;font-weight:650} #ccds-modal .ccds-mosaic-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 7px} #ccds-modal .ccds-mosaic-options label{font-size:10px;color:#6c5a7d;font-weight:800;min-width:0} #ccds-modal .ccds-mosaic-options select{font-size:11px!important;min-width:0!important;width:100%!important;margin-top:5px!important;padding:7px 20px 7px 7px!important;min-height:38px!important} #ccds-modal .ccds-mosaic-download{margin-top:9px!important;color:#5f2c94!important;border-color:#cdb8e3!important;font-size:12px!important;min-height:42px!important} #ccds-modal #ccds-mosaic-status{font-size:10px;line-height:1.5;padding:7px 0 0;margin:0} #ccds-modal #ccds-mosaic-status.is-error{color:#a92340!important} @media(max-width:390px){#ccds-modal .ccds-mosaic-options{grid-template-columns:1fr}#ccds-modal .ccds-mosaic-layout{font-size:9px!important}} /* Smart Mosaic v3.3.8 enhancements */ #ccds-modal .ccds-mosaic-toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:10px 0 12px} #ccds-modal .ccds-mosaic-tool{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;border:1px solid #ddd0ec!important;border-radius:12px!important;background:#fff!important;color:#592a83!important;font-size:11px!important;font-weight:800!important;line-height:1!important;padding:7px 4px!important} #ccds-modal .ccds-mosaic-tool span{font-size:10px;color:#664980} #ccds-modal .ccds-mosaic-sections{display:grid;gap:10px} #ccds-modal .ccds-mosaic-section{display:grid;gap:6px} #ccds-modal .ccds-mosaic-ratios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} #ccds-modal .ccds-mosaic-chip{border:1px solid #ddcfee!important;border-radius:11px!important;background:#fff!important;color:#5e2d8c!important;font-size:11px!important;font-weight:800!important;padding:10px 6px!important;min-height:40px!important} #ccds-modal .ccds-mosaic-chip.is-active{background:#efe5ff!important;border-color:#8a52c7!important;box-shadow:inset 0 0 0 1px #8a52c7!important;color:#4b1979!important} #ccds-modal .ccds-mosaic-bg-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:center} #ccds-modal .ccds-mosaic-swatch{height:38px;border-radius:12px!important;border:2px solid #ddcfee!important;box-shadow:0 2px 6px #00000008} #ccds-modal .ccds-mosaic-swatch.is-white{background:#fff} #ccds-modal .ccds-mosaic-swatch.is-black{background:#111} #ccds-modal .ccds-mosaic-swatch.is-purple{background:#f3ecff} #ccds-modal .ccds-mosaic-swatch.is-pink{background:#fff0f7} #ccds-modal .ccds-mosaic-bg-upload{grid-column:span 1;min-height:38px!important;padding:8px 6px!important;font-size:10px!important} #ccds-modal .ccds-mosaic-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px} #ccds-modal .ccds-mosaic-actions .ccds-primary,#ccds-modal .ccds-mosaic-actions .ccds-secondary{min-height:44px!important;font-size:12px!important} #ccds-modal .ccds-mosaic-heading strong{font-size:13px;font-weight:900;color:#47235f} #ccds-modal .ccds-mosaic-heading p{font-size:10px;color:#796b8b;line-height:1.55} @media(max-width:800px){ #ccds-modal[data-active-tool="mosaic"] .ccds-size-dock{display:none!important} #ccds-modal[data-active-tool="mosaic"] .ccds-stage-area{gap:0!important;padding-right:6px!important} #ccds-modal .ccds-mosaic-toolbar{grid-template-columns:repeat(6,minmax(54px,1fr));overflow:auto;padding-bottom:2px} #ccds-modal .ccds-mosaic-actions{grid-template-columns:1fr} } @media(max-width:420px){ #ccds-modal .ccds-mosaic-ratios{grid-template-columns:repeat(2,minmax(0,1fr))} #ccds-modal .ccds-mosaic-bg-swatches{grid-template-columns:repeat(3,minmax(0,1fr))} #ccds-modal .ccds-mosaic-bg-upload{grid-column:span 3} } /* v3.3.9 mobile customer workspace polish */ @media(max-width:800px){ #ccds-modal .ccds-mosaic-tool{min-width:52px!important;min-height:50px!important} #ccds-modal .ccds-mosaic-actions{position:relative;z-index:2;padding-bottom:12px} #ccds-modal .ccds-mosaic-sections{padding-bottom:20px} #ccds-modal .ccds-mosaic-section{scroll-margin-top:105px} #ccds-modal .ccds-mosaic-options{min-width:0!important} #ccds-modal .ccds-mosaic-bg-swatches{max-width:100%} } /* Professional UI Edition 3.4.0 — focused mosaic mode and readable touch controls */ #ccds-modal .ccds-mosaic-quick{display:none;gap:9px;background:#fff;border-bottom:1px solid #eadff1;padding:12px 14px} #ccds-modal .ccds-mosaic-quick-title{display:flex;flex-direction:column;gap:3px} #ccds-modal .ccds-mosaic-quick-title strong{color:#341949;font-size:14px;font-weight:900} #ccds-modal .ccds-mosaic-quick-title span{font-size:11px;color:#756781;line-height:1.35} #ccds-modal .ccds-mosaic-quick-actions{display:grid;grid-template-columns:1.05fr 1.35fr .85fr 37px;gap:6px;align-items:center} #ccds-modal .ccds-mosaic-quick-actions button,#ccds-modal .ccds-mosaic-quick-upload{display:flex!important;align-items:center;justify-content:center;min-height:43px!important;min-width:0!important;padding:8px 5px!important;border-radius:10px!important;font-size:11px!important;font-weight:800!important;white-space:normal!important;text-align:center;line-height:1.12!important;color:#5b337c!important;background:#faf7fd!important;border:1px solid #d9c9e8!important;cursor:pointer} #ccds-modal .ccds-mosaic-quick-upload,#ccds-modal #ccds-mosaic-quick-auto{background:linear-gradient(110deg,#41205f,#8541ad)!important;color:#fff!important;border:0!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick{display:grid} #ccds-modal.ccds-mosaic-mode .ccds-canvas-help{display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-grid-toggle{display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-left .ccds-add-panel > .ccds-section:not(#ccds-creative-tools){display:none!important} #ccds-modal.ccds-mosaic-mode #ccds-creative-tools > :not(#ccds-mosaic-panel){display:none!important} #ccds-modal.ccds-mosaic-mode #ccds-creative-tools{padding:8px!important;border:0!important} #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel{padding:13px!important;box-shadow:none!important;border:0!important;background:#fff!important} #ccds-modal.ccds-mosaic-mode .ccds-add-panel > .ccds-extra-tools{display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-flow{background:#f8f4fc!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-tool{border-radius:12px!important;min-height:47px!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-layout{min-height:78px!important} #ccds-modal.ccds-mosaic-mode #ccds-mosaic-status{color:#5d506b!important;line-height:1.5!important;font-size:11px!important} #ccds-modal .ccds-mosaic-quick-actions button:focus-visible,#ccds-modal .ccds-mosaic-quick-upload:focus-visible{outline:3px solid #a17bd1!important;outline-offset:2px} @media(max-width:800px){ #ccds-modal.ccds-mosaic-mode .ccds-tool-rail .ccds-rail-btn:not(.ccds-upload-tool):not([data-ccds-tool="select"]):not([data-ccds-tool="mosaic"]):not([data-ccds-tool="layers"]):not(#ccds-undo):not(#ccds-redo):not(#ccds-add-text){display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-tool-rail .ccds-rail-sep{display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-stage-area{height:clamp(245px,44svh,410px)!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick{padding:9px 7px!important;gap:7px!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick-title span{font-size:10px!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick-actions{grid-template-columns:1fr 1.15fr .85fr 31px;gap:4px!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick-actions button,#ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick-upload{min-height:40px!important;padding:7px 3px!important;font-size:10px!important} #ccds-modal.ccds-mosaic-mode .ccds-flow{padding:7px 5px!important} #ccds-modal.ccds-mosaic-mode #ccds-mosaic-add,#ccds-modal.ccds-mosaic-mode #ccds-mosaic-create{display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-heading{margin:6px 0!important} #ccds-modal.ccds-mosaic-mode .ccds-size-dock{display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-stage-area{padding:5px!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-actions{grid-template-columns:1fr!important} #ccds-modal .ccds-creative-card p{line-height:1.5} } @media(max-width:360px){ #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick-actions{grid-template-columns:1fr 1fr 29px!important} #ccds-modal.ccds-mosaic-mode #ccds-mosaic-quick-shuffle{display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick-actions button,#ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick-upload{font-size:9px!important} } /* Mobile essential-tools first: advanced Photoshop-style tools behind More */ #ccds-modal .ccds-rail-more{display:none!important} @media(max-width:800px){ #ccds-modal .ccds-rail-more{display:flex!important;background:#463062!important} #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-btn[data-ccds-tool="effects"], #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-btn[data-ccds-tool="align"], #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-btn[data-ccds-tool="background"], #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-btn[data-ccds-tool="custom-bg"], #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-btn[data-ccds-tool="brush"], #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-btn[data-ccds-tool="eraser"], #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-btn[data-ccds-tool="zoom"], #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail #ccds-add-rect, #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail #ccds-add-circle{display:none!important} #ccds-modal.ccds-mosaic-mode .ccds-tool-rail .ccds-rail-more{display:none!important} #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-sep{display:none!important} } /* v3.4.1 customer-first interface: one task at a time, no duplicate panels. */ #ccds-modal .ccds-flow,#ccds-modal .ccds-stage-top,#ccds-modal .ccds-canvas-help{display:none!important} #ccds-modal .ccds-stage-bottom{font-size:10px!important;padding:7px 10px!important} #ccds-modal .ccds-stage-bottom #ccds-tip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #ccds-modal .ccds-tool-rail .ccds-rail-caption{display:none!important} #ccds-modal .ccds-rail-btn{border-radius:12px!important;transition:background .15s ease,transform .15s ease!important} #ccds-modal .ccds-rail-btn.is-active{background:linear-gradient(160deg,#7041aa,#9861c9)!important;color:#fff!important;box-shadow:0 5px 12px rgba(67,30,101,.20)!important} #ccds-modal .ccds-left .ccds-add-panel > .ccds-section:not(#ccds-creative-tools){display:none!important} #ccds-modal .ccds-left #ccds-creative-tools{display:none!important;padding:12px!important;border:0!important} #ccds-modal .ccds-left .ccds-creative-card{display:none!important} #ccds-modal .ccds-left .ccds-extra-tools{display:none!important} #ccds-modal[data-active-tool="photo"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2), #ccds-modal[data-active-tool="select"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2), #ccds-modal[data-active-tool="move"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2), #ccds-modal[data-active-tool="size"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2), #ccds-modal[data-active-tool="text"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2){display:block!important} #ccds-modal[data-active-tool="custom-bg"] .ccds-left #ccds-creative-tools, #ccds-modal[data-active-tool="brush"] .ccds-left #ccds-creative-tools, #ccds-modal[data-active-tool="eraser"] .ccds-left #ccds-creative-tools, #ccds-modal[data-active-tool="mosaic"] .ccds-left #ccds-creative-tools{display:block!important} #ccds-modal[data-active-tool="custom-bg"] .ccds-left #ccds-creative-tools > .ccds-creative-card:first-of-type, #ccds-modal[data-active-tool="brush"] .ccds-left #ccds-creative-tools > .ccds-creative-card:nth-of-type(2), #ccds-modal[data-active-tool="eraser"] .ccds-left #ccds-creative-tools > .ccds-creative-card:nth-of-type(2), #ccds-modal[data-active-tool="mosaic"] .ccds-left #ccds-mosaic-panel{display:block!important} #ccds-modal[data-active-tool="background"] .ccds-left .ccds-background-options, #ccds-modal[data-active-tool="align"] .ccds-left .ccds-advanced-tools{display:block!important} #ccds-modal .ccds-easy-photo{display:flex!important;align-items:center;justify-content:center;gap:10px;cursor:pointer;padding:14px!important;min-height:52px;background:linear-gradient(125deg,#442163,#8546b4)!important;border-radius:14px!important;color:#fff!important;font-size:14px!important;font-weight:850!important} #ccds-modal .ccds-easy-photo span{font-size:24px;line-height:1} #ccds-modal .ccds-add-panel .ccds-section:nth-child(2) > .ccds-kicker{font-size:11px!important;margin-bottom:12px} #ccds-modal .ccds-add-panel #ccds-upload-feedback{margin:10px 0 0!important;font-size:11px!important;padding:9px!important} #ccds-modal .ccds-add-panel #ccds-upload-feedback:not(.is-error):not(.is-success){display:none!important} #ccds-modal .ccds-mosaic-heading p,#ccds-modal .ccds-mosaic-quick-title span, #ccds-modal .ccds-creative-card > p:not([role=status]){display:none!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-heading{margin:0 0 8px!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-toolbar{margin:4px 0 10px!important;overflow-x:auto!important;scrollbar-width:thin} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-layouts{margin:5px 0!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-more{border:1px solid #e8dff2;border-radius:12px;background:#fcfaff;margin:8px 0;padding:0 9px} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-more>summary{display:list-item;cursor:pointer;font-size:12px;font-weight:800;color:#5c3084;padding:13px 7px;list-style-position:inside} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-more:not([open]) > :not(summary){display:none!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-more[open]{padding-bottom:10px} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-actions{margin-top:10px!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-actions button{border-radius:12px!important;min-height:45px!important} #ccds-modal .ccds-left .ccds-creative-card{box-shadow:none!important;border:1px solid #e8dff2!important;border-radius:13px!important;background:#fff!important;margin:0!important;padding:12px!important} #ccds-modal .ccds-size-dock.is-disabled{display:none!important} #ccds-modal .ccds-right .ccds-note{display:none!important} #ccds-modal .ccds-footer-caption{display:none!important} #ccds-modal .ccds-header-actions .ccds-status:not(.ccds-error){display:none!important} #ccds-modal .ccds-mosaic-quick{background:#faf7fd!important} @media(max-width:800px){ #ccds-modal .ccds-shell{max-height:100svh!important} #ccds-modal .ccds-tool-rail{max-height:min(75svh,650px)!important;padding:5px 3px 12px!important} #ccds-modal .ccds-rail-btn{min-height:44px!important;max-height:49px!important} #ccds-modal .ccds-stage-area{height:clamp(250px,42svh,390px)!important;min-height:250px!important} #ccds-modal .ccds-stage-bottom{padding:8px 8px!important} #ccds-modal .ccds-left .ccds-add-panel > .ccds-section:nth-child(2){padding:16px 12px!important} #ccds-modal .ccds-mosaic-quick-title{display:none!important} #ccds-modal .ccds-mosaic-quick{padding:7px!important;gap:0!important} #ccds-modal .ccds-mosaic-actions{grid-template-columns:1fr!important} #ccds-modal .ccds-left #ccds-creative-tools{padding:9px!important} #ccds-modal #ccds-mosaic-panel{padding:10px!important} #ccds-modal .ccds-mosaic-toolbar{grid-template-columns:repeat(6,minmax(44px,1fr))!important;gap:4px!important} #ccds-modal .ccds-mosaic-tool{min-width:44px!important;font-size:12px!important} #ccds-modal .ccds-mosaic-tool span{font-size:9px!important} } @media(max-width:800px){ #ccds-modal .ccds-main{position:relative!important;z-index:0!important} #ccds-modal .ccds-left,#ccds-modal .ccds-right{position:relative!important;z-index:2!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-section{scroll-margin-top:12px!important} } /* v3.4.1: explicitly unhide the photo picker over older high-specificity rules. */ #ccds-modal[data-active-tool="photo"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2):not(#ccds-creative-tools), #ccds-modal[data-active-tool="select"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2):not(#ccds-creative-tools), #ccds-modal[data-active-tool="move"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2):not(#ccds-creative-tools), #ccds-modal[data-active-tool="size"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2):not(#ccds-creative-tools), #ccds-modal[data-active-tool="text"] .ccds-left .ccds-add-panel > .ccds-section:nth-child(2):not(#ccds-creative-tools){display:block!important} /* Avoid duplicate Mosaic arrangement actions; top action is primary. */ #ccds-modal.ccds-mosaic-mode #ccds-mosaic-create{display:none!important} #ccds-modal .ccds-mosaic-tool svg{display:block;flex:none;color:#69339c} #ccds-modal .ccds-mosaic-tool{gap:3px!important} #ccds-modal .ccds-mosaic-quick-actions label,#ccds-modal .ccds-mosaic-quick-actions button{border-radius:11px!important} /* v3.4.2 — Remove the duplicate - / 100% / + / Fit bar completely. Internal zoom elements are retained for gesture and optional tool compatibility. */ #ccds-modal .ccds-canvas-toolbar, #ccds-modal .ccds-zoom-bar{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important} /* One simple Mosaic workspace: primary actions above the canvas, layout chooser and one optional-settings disclosure below it. */ #ccds-modal #ccds-mosaic-panel .ccds-mosaic-toolbar{display:none!important} #ccds-modal #ccds-mosaic-panel{border:0!important;box-shadow:none!important;padding:10px!important;margin:0!important;background:#fff!important;min-width:0!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-heading{padding:0 0 9px!important;margin:0!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-heading strong{font-size:14px!important;line-height:1.25!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-sections{display:flex!important;flex-direction:column!important;gap:8px!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-layouts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;width:100%!important;margin:0!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-layout{min-width:0!important;max-width:none!important;min-height:100px!important;padding:10px 4px!important;gap:6px!important;line-height:1.2!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-thumbnail{width:min(100%,88px)!important;height:50px!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-layout span:last-child{overflow-wrap:anywhere;font-size:11px!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-more{margin:7px 0!important;background:#fff!important} #ccds-modal #ccds-mosaic-panel #ccds-mosaic-add{display:none!important} #ccds-modal #ccds-mosaic-panel #ccds-mosaic-create{display:none!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-actions{margin:4px 0 0!important;display:block!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-download{display:block!important;width:100%!important;margin:0!important} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick{margin-bottom:0!important;border-radius:0!important} #ccds-modal.ccds-mosaic-mode .ccds-stage-area{margin-top:0!important} @media(max-width:800px){ #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel{padding:10px 9px 14px!important} #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel .ccds-mosaic-layout{min-height:94px!important} #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel .ccds-mosaic-thumbnail{height:42px!important} #ccds-modal.ccds-mosaic-mode .ccds-stage-area{height:clamp(255px,43svh,380px)!important} } @media(max-width:360px){ #ccds-modal #ccds-mosaic-panel .ccds-mosaic-layouts{gap:4px!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-layout{padding:7px 2px!important} #ccds-modal #ccds-mosaic-panel .ccds-mosaic-layout span:last-child{font-size:10px!important} } @media(max-width:800px){#ccds-modal .ccds-workspace{grid-template-rows:max-content max-content!important;align-items:start!important;}} /* v3.4.3 — Full product preview + aligned Mosaic tools. The preview is a square product; never cap it at a shorter viewport-based fixed height on phones. This removes the clipped lower half seen on Android. */ @media(max-width:800px){ #ccds-modal .ccds-workspace{ grid-template-rows:auto auto!important; align-content:start!important; scroll-padding-top:8px!important; } #ccds-modal .ccds-main{ align-self:start!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:0!important; margin:0!important; } #ccds-modal .ccds-stage-area, #ccds-modal.ccds-mosaic-mode .ccds-stage-area{ box-sizing:border-box!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:1/1!important; padding:9px!important; margin:0!important; flex:0 0 auto!important; display:flex!important; align-items:center!important; justify-content:center!important; } #ccds-modal .ccds-stage-area #ccds-stage-wrap{ box-sizing:border-box!important; flex:1 1 100%!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; padding:6px!important; overflow:auto!important; display:flex!important; align-items:center!important; justify-content:center!important; } #ccds-modal .ccds-stage-bottom{ flex:0 0 auto!important; position:static!important; min-height:27px!important; padding:5px 10px 8px!important; background:#f5f0f8!important; border-bottom:1px solid #ebe2ee!important; } #ccds-modal .ccds-left,#ccds-modal .ccds-right{ align-self:start!important; position:relative!important; margin:0!important; padding:0!important; z-index:0!important; border-top:1px solid #e8dff1!important; } #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel{ margin:0!important; padding:12px 10px 18px!important; border-top:0!important; background:#fff!important; border-radius:0!important; } #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel .ccds-mosaic-layouts{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important; gap:7px!important; margin:0!important; } #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel .ccds-mosaic-layout{ min-height:86px!important; padding:9px 4px!important; border-radius:13px!important; line-height:1.15!important; } #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel .ccds-mosaic-thumbnail{ width:min(100%,80px)!important;height:39px!important; } #ccds-modal.ccds-mosaic-mode .ccds-tool-rail{z-index:3!important;} #ccds-modal.ccds-mosaic-mode .ccds-mosaic-quick{z-index:2!important;} } @media(max-width:360px){ #ccds-modal .ccds-stage-area,#ccds-modal.ccds-mosaic-mode .ccds-stage-area{padding:6px!important;} #ccds-modal.ccds-mosaic-mode #ccds-mosaic-panel .ccds-mosaic-layouts{gap:5px!important;} } /* Ensure row tracks grow with the square preview; never distribute the viewport height across Mosaic controls. A scrollable workspace handles extra height. */ @media(max-width:800px){ #ccds-modal .ccds-workspace{grid-template-rows:max-content max-content!important;align-content:start!important;} } @media (min-width:601px) and (max-width:800px){ #ccds-modal.ccds-mosaic-mode .ccds-stage-area,#ccds-modal .ccds-stage-area{ max-height:600px!important; aspect-ratio:auto!important; height:min(calc(100vw - 53px),600px)!important; } } /* v3.4.4 Layer action bar: six one-tap icons in a single mobile row. */ #ccds-modal .ccds-layer-action-row{ display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important; align-items:stretch;gap:4px!important;width:100%!important;min-width:0!important; overflow:visible; margin:9px 0 2px!important; } #ccds-modal .ccds-layer-action{ appearance:none; display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important;gap:5px!important; box-sizing:border-box!important;min-width:0!important;width:100%!important; min-height:53px!important; padding:5px 1px!important; border:1px solid #dcd0e9!important;border-radius:10px!important; background:#faf7ff!important;color:#5b3188!important; box-shadow:none!important; font-size:9px!important;font-weight:750!important; line-height:1.05!important;white-space:nowrap!important; } #ccds-modal .ccds-layer-action svg{display:block;flex:0 0 auto;width:19px;height:19px;stroke:currentColor} #ccds-modal .ccds-layer-action span{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px!important} #ccds-modal .ccds-layer-action:disabled{opacity:.38!important;cursor:not-allowed!important} #ccds-modal .ccds-layer-action.is-active:not(:disabled){background:#e9daf9!important;border-color:#9a67cb!important} #ccds-modal .ccds-layer-action-delete:not(:disabled){color:#ae3656!important;background:#fff8fa!important} #ccds-modal .ccds-layer-action:focus-visible{outline:2px solid #743bad!important;outline-offset:2px!important} @media(max-width:800px){ #ccds-modal .ccds-layer-action-row{gap:3px!important} #ccds-modal .ccds-layer-action{min-height:48px!important;padding:5px 0!important;border-radius:9px!important} #ccds-modal .ccds-layer-action svg{width:18px;height:18px} #ccds-modal .ccds-layer-action span{font-size:8px!important} } @media(max-width:350px){ #ccds-modal .ccds-layer-action-row{gap:2px!important} #ccds-modal .ccds-layer-action{min-height:46px!important} #ccds-modal .ccds-layer-action svg{width:17px;height:17px} #ccds-modal .ccds-layer-action span{font-size:7.5px!important} } /* v3.4.5 Effects icon row */ #ccds-modal .ccds-edit-advanced .ccds-presetbar.ccds-icon-row, #ccds-modal .ccds-edit-advanced .ccds-effect-actions.ccds-icon-row{ display:flex!important; flex-wrap:nowrap!important; gap:10px!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 1px 8px; margin:10px 0 14px!important; scroll-snap-type:x proximity; } #ccds-modal .ccds-edit-advanced .ccds-presetbar.ccds-icon-row::-webkit-scrollbar, #ccds-modal .ccds-edit-advanced .ccds-effect-actions.ccds-icon-row::-webkit-scrollbar{display:none} #ccds-modal .ccds-edit-advanced .ccds-icon-tool, #ccds-modal .ccds-edit-advanced .ccds-icon-action{ flex:0 0 auto; min-width:84px; min-height:74px!important; padding:10px 12px!important; border-radius:16px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:6px!important; text-align:center!important; white-space:normal!important; scroll-snap-align:start; box-shadow:0 6px 14px rgba(84,44,126,.08); } #ccds-modal .ccds-edit-advanced .ccds-icon-tool{ background:linear-gradient(180deg,#fff,#f6f0ff)!important; border:1px solid #dfd2ef!important; color:#5f3385!important; } #ccds-modal .ccds-edit-advanced .ccds-icon-tool:hover, #ccds-modal .ccds-edit-advanced .ccds-icon-tool:focus-visible, #ccds-modal .ccds-edit-advanced .ccds-icon-tool.is-on, #ccds-modal .ccds-edit-advanced .ccds-presetbar button[aria-pressed="true"]{ background:linear-gradient(180deg,#f5ecff,#ead8ff)!important; border-color:#8f63cb!important; color:#4e2473!important; } #ccds-modal .ccds-edit-advanced .ccds-icon-action{ min-width:98px; } #ccds-modal .ccds-edit-advanced .ccds-icon-tool__icon{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:12px; background:#ffffffcc; border:1px solid #e9ddf7; font-size:18px; line-height:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); } #ccds-modal .ccds-edit-advanced .ccds-icon-tool__label{ font-size:12px; font-weight:800; line-height:1.1; color:inherit; } #ccds-modal .ccds-edit-advanced .ccds-effect-actions .ccds-icon-tool__icon{ font-size:20px; } @media (max-width: 480px){ #ccds-modal .ccds-edit-advanced .ccds-icon-tool, #ccds-modal .ccds-edit-advanced .ccds-icon-action{min-width:82px;min-height:72px!important;padding:10px 10px!important} #ccds-modal .ccds-edit-advanced .ccds-icon-action{min-width:92px} #ccds-modal .ccds-edit-advanced .ccds-icon-tool__label{font-size:11px} } /* Chethu Design Studio 3.4.6 — photographic effects below the product. */ #ccds-modal .ccds-photo-effects-panel[hidden]{display:none!important} #ccds-modal #ccds-photo-advanced{display:none!important} #ccds-modal[data-active-tool="effects"] #ccds-photo-advanced:not([hidden]){ display:block!important; flex:0 0 auto!important; width:100%!important; min-width:0!important; padding:12px 12px 15px!important; border-top:1px solid #e3d4ef!important; border-bottom:1px solid #e3d4ef!important; background:linear-gradient(180deg,#fff 0%,#fbf6ff 100%)!important; box-sizing:border-box!important; } #ccds-modal .ccds-effects-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px} #ccds-modal .ccds-effects-heading strong{display:block;font-size:14px;color:#452064;font-weight:900} #ccds-modal .ccds-effects-heading span{display:block;font-size:10px;color:#826b93;margin-top:2px} #ccds-modal #ccds-effects-clear{ appearance:none;border:1px solid #e0d0eb!important;background:#fff!important; color:#60338b!important;border-radius:11px!important;min-height:33px!important; padding:7px 11px!important;font-size:11px!important;font-weight:850!important; white-space:nowrap!important; } #ccds-modal #ccds-effects-clear:disabled{opacity:.45!important} #ccds-modal .ccds-effects-presets{ display:flex!important;flex-wrap:nowrap!important;gap:9px!important; overflow-x:auto!important;overflow-y:hidden!important;min-width:0!important; width:100%!important;padding:2px 2px 11px!important; -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#bba0d9 transparent; scroll-snap-type:x proximity;box-sizing:border-box!important; } #ccds-modal .ccds-effect-look{ appearance:none;flex:0 0 91px!important;width:91px!important;min-width:91px!important; display:flex!important;flex-direction:column!important;gap:4px!important; padding:5px!important;border:2px solid #e8ddf0!important; border-radius:13px!important;background:#fff!important;color:#5a397a!important; box-shadow:0 3px 9px #3f1f5710!important;overflow:hidden!important; text-align:center!important;scroll-snap-align:start;box-sizing:border-box!important; transition:border-color .17s,background-color .17s; } #ccds-modal .ccds-effect-look-photo{ position:relative;display:block;width:100%;height:70px; border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#8667a4 0%,#c59ba8 58%,#7cacc0 100%); } #ccds-modal .ccds-effect-look-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;position:relative;z-index:1} #ccds-modal .ccds-effect-look-photo img[hidden]{display:none!important} #ccds-modal .ccds-effect-look-placeholder{position:absolute;inset:0;display:block;background:radial-gradient(ellipse at 40% 35%,#ffffff80 0%,transparent 35%),linear-gradient(145deg,#b2a2cd,#9966a1 48%,#8bb3cd)} #ccds-modal .ccds-effect-look[data-filter="cinema-gold"] .ccds-effect-look-placeholder{background:linear-gradient(145deg,#ebcc7b,#9c7046,#512940)} #ccds-modal .ccds-effect-look[data-filter="cinema-teal"] .ccds-effect-look-placeholder{background:linear-gradient(135deg,#184758,#e29a65)} #ccds-modal .ccds-effect-look[data-filter="midnight"] .ccds-effect-look-placeholder{background:linear-gradient(135deg,#15234a,#523958,#1b142d)} #ccds-modal .ccds-effect-look[data-filter="sunset"] .ccds-effect-look-placeholder{background:linear-gradient(135deg,#d76177,#edb663,#915071)} #ccds-modal .ccds-effect-look[data-filter="mono"] .ccds-effect-look-placeholder{filter:grayscale(1)} #ccds-modal .ccds-effect-look-name{display:block;min-height:24px;font-weight:800;font-size:10px;line-height:1.16;color:inherit;white-space:normal} #ccds-modal .ccds-effect-look.is-on,#ccds-modal .ccds-effect-look[aria-pressed="true"]{ border-color:#8542bd!important;background:#f5e9ff!important; box-shadow:0 0 0 1px #8542bd45,0 6px 17px #7d41a925!important; } #ccds-modal .ccds-effect-look:focus-visible{outline:3px solid #9362d0!important;outline-offset:2px!important} #ccds-modal .ccds-effect-look:disabled{opacity:.66!important;cursor:not-allowed!important} #ccds-modal .ccds-effects-sliders-label{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:2px 0 7px} #ccds-modal .ccds-effects-sliders-label strong{font-size:12px;color:#5b3480} #ccds-modal .ccds-effects-sliders-label span{font-size:10px;color:#917c9f;text-align:right} #ccds-modal .ccds-effects-slider-row{ display:flex!important;flex-wrap:nowrap!important;gap:9px!important; overflow-x:auto!important;overflow-y:hidden!important; width:100%!important;min-width:0!important; box-sizing:border-box!important;padding:3px 2px 10px!important; -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#bba0d9 transparent; scroll-snap-type:x proximity; } #ccds-modal .ccds-effects-slider-row[hidden]{display:none!important} #ccds-modal .ccds-effect-slider-card{ flex:0 0 174px!important;width:174px!important;min-width:174px!important; box-sizing:border-box!important;display:block!important; border:1px solid #e1d5eb;border-radius:13px;background:#fff; padding:11px 11px 14px!important;margin:0!important;scroll-snap-align:start; } #ccds-modal .ccds-effect-slider-title{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:13px;color:#5d367f;font-size:11px;font-weight:800} #ccds-modal .ccds-effect-slider-title output{font-size:10px;font-weight:850;color:#7e4aad;white-space:nowrap} #ccds-modal .ccds-effect-slider-card input[type=range]{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;accent-color:#8b43c1;margin:0!important;min-height:22px!important;touch-action:pan-x} #ccds-modal .ccds-effect-actions{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;width:100%;overflow-x:auto!important;padding:3px 1px!important;margin:5px 0!important} #ccds-modal .ccds-effect-actions button{flex:0 0 auto!important;min-width:94px!important;min-height:38px!important;padding:9px!important;border-radius:10px!important;white-space:nowrap!important;font-weight:800!important;font-size:11px!important} #ccds-modal .ccds-effects-quality{margin:6px 2px 0!important;color:#806b8e;font-size:10px;line-height:1.35} #ccds-modal[data-active-tool="effects"] .ccds-main{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain!important} /* Always keep the product fully visible; the effects dock follows it in document flow. */ @media(max-width:800px){ #ccds-modal[data-active-tool="effects"] .ccds-main{overflow:visible!important;min-height:0!important;max-height:none!important;height:auto!important} #ccds-modal[data-active-tool="effects"] .ccds-left, #ccds-modal[data-active-tool="effects"] .ccds-right{display:none!important} #ccds-modal[data-active-tool="effects"] .ccds-stage-area{flex:0 0 auto!important} #ccds-modal[data-active-tool="effects"] #ccds-photo-advanced{padding:13px 9px 17px!important} #ccds-modal .ccds-effect-look{flex-basis:84px!important;width:84px!important;min-width:84px!important} #ccds-modal .ccds-effect-look-photo{height:65px} #ccds-modal .ccds-effect-slider-card{flex-basis:157px!important;width:157px!important;min-width:157px!important} } /* Keep Effects discoverable on the essential phone toolbar. */ @media(max-width:800px){ #ccds-modal:not(.ccds-all-tools) .ccds-tool-rail .ccds-rail-btn[data-ccds-tool="effects"]{display:flex!important} } /* 3.4.7 — Visible, accessible effect adjustments for small phones. */ #ccds-modal .ccds-effects-slider-row:not([hidden]){ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; width:100%!important; min-width:0!important; max-width:100%!important; overflow:visible!important; padding:3px 0 10px!important; margin:0!important; scroll-snap-type:none!important; box-sizing:border-box!important; } #ccds-modal .ccds-effects-slider-row .ccds-effect-slider-card{ display:flex!important; flex-direction:column!important; justify-content:space-between!important; gap:12px!important; flex:none!important; width:100%!important; min-width:0!important; max-width:100%!important; min-height:88px!important; padding:12px!important; border:1px solid #e5d9ee!important; background:#fff!important; box-sizing:border-box!important; overflow:hidden!important; } #ccds-modal .ccds-effect-slider-title{ display:flex!important; justify-content:space-between!important; align-items:center!important; flex-wrap:wrap!important; column-gap:6px!important; row-gap:3px!important; min-width:0!important; margin:0!important; line-height:1.3!important; font-size:12px!important; } #ccds-modal .ccds-effect-slider-title output{ margin-left:auto!important; font-size:12px!important; font-weight:900!important; color:#7736a4!important; } #ccds-modal .ccds-effect-slider-card input[type="range"]{ display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; height:30px!important; min-height:30px!important; margin:0!important; padding:0!important; accent-color:#8744be; } #ccds-modal .ccds-effects-sliders-label{margin:8px 0 10px!important;flex-wrap:wrap!important} #ccds-modal .ccds-effects-sliders-label span{font-size:11px!important} #ccds-modal .ccds-effect-actions{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; width:100%!important; overflow:visible!important; padding:4px 0 8px!important; box-sizing:border-box!important; } #ccds-modal .ccds-effect-actions button{ width:100%!important; min-width:0!important; min-height:46px!important; padding:7px 5px!important; white-space:normal!important; overflow-wrap:break-word!important; line-height:1.25!important; text-align:center!important; font-size:11px!important; } @media(max-width:1000px){ #ccds-modal .ccds-effects-slider-row:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:360px){ #ccds-modal .ccds-effects-slider-row:not([hidden]){grid-template-columns:minmax(0,1fr)!important} #ccds-modal .ccds-effects-slider-row .ccds-effect-slider-card{ min-height:80px!important; padding:10px 12px!important; } #ccds-modal .ccds-effect-actions button{font-size:10px!important} } /* v3.4.8 — Quick Position Tools: concise launcher and responsive pop-up. */ #ccds-modal .ccds-quick-position-launch{ display:flex!important;align-items:center!important;justify-content:space-between!important; gap:10px!important;width:100%!important;min-height:54px!important; margin:14px 0 2px!important;padding:11px 15px!important; background:linear-gradient(100deg,#f5edff,#fff)!important; border:1px solid #d9c3ee!important;border-radius:15px!important; color:#582d82!important;font-weight:850!important;font-size:14px!important; text-align:left!important; } #ccds-modal .ccds-quick-position-launch-icon{ width:34px;height:34px;flex:none;display:grid;place-items:center; border-radius:11px;background:#e5d6f7;color:#5b2a89;font-size:22px; } #ccds-modal .ccds-quick-position-launch span:nth-child(2){flex:1} #ccds-modal .ccds-position-layer{ position:absolute;inset:0;z-index:45;display:flex;align-items:flex-end; justify-content:flex-end;isolation:isolate;pointer-events:auto; } #ccds-modal .ccds-position-layer[hidden]{display:none!important} #ccds-modal .ccds-position-backdrop{ position:absolute;inset:0;width:100%;height:100%;border:0!important; background:rgba(24,11,37,.28)!important;border-radius:0!important; } #ccds-modal .ccds-position-sheet{ position:relative;z-index:1;width:min(410px,100%);max-width:100%; max-height:min(77%,540px);min-height:0;overflow-y:auto; background:linear-gradient(180deg,#fff 0%,#faf7ff 100%); border-radius:24px 0 0 0;border:1px solid #d8c8e9; box-shadow:0 -12px 45px rgba(35,14,50,.25); padding:14px 17px calc(16px + env(safe-area-inset-bottom,0px)); display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain; } #ccds-modal .ccds-position-handle{display:none} #ccds-modal .ccds-position-header{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px; } #ccds-modal .ccds-position-header strong{ display:block;color:#3b2154;font-size:16px;font-weight:900;line-height:1.3; } #ccds-modal .ccds-position-header span{ display:block;font-size:11px;color:#877893;margin-top:4px;line-height:1.4; } #ccds-modal .ccds-position-close{ display:grid!important;place-items:center!important;width:39px;height:39px; min-width:39px;min-height:39px;border-radius:12px!important; color:#58337b!important;background:#f5edff!important; border:1px solid #ded2ea!important;font-size:16px!important; } #ccds-modal .ccds-position-icon-grid{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px; } #ccds-modal .ccds-position-icon{ border:1px solid #e1d7ec!important;border-radius:13px!important; min-width:0;min-height:69px!important;padding:9px 2px!important; background:#fff!important;color:#59317d!important; display:flex!important;flex-direction:column;align-items:center;justify-content:center; gap:7px;touch-action:manipulation; } #ccds-modal .ccds-position-icon:hover, #ccds-modal .ccds-position-icon:focus-visible{ background:#efe1ff!important;border-color:#a275ca!important; } #ccds-modal .ccds-position-icon svg{ width:22px;height:22px;stroke:currentColor;stroke-width:1.7; fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none; } #ccds-modal .ccds-position-icon span{ font-size:10px;color:inherit;font-weight:850;line-height:1.1;text-align:center; white-space:nowrap; } #ccds-modal .ccds-position-sliders{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; } #ccds-modal .ccds-position-slider{ display:flex;flex-direction:column;gap:11px;min-width:0; border:1px solid #e2d7ed;border-radius:15px; padding:12px;background:#fff;color:#4d2a70; } #ccds-modal .ccds-position-slider > span{ display:flex;align-items:center;justify-content:space-between;gap:5px; min-width:0;font-weight:800;font-size:12px; } #ccds-modal .ccds-position-slider output{font-weight:900;color:#793eb3;white-space:nowrap} #ccds-modal .ccds-position-slider input[type=range]{ appearance:auto;-webkit-appearance:auto; accent-color:#8248b3;width:100%;min-width:0; height:28px;min-height:28px;margin:0!important;padding:0!important; background:transparent!important;border:0!important; } #ccds-modal .ccds-position-footer{ display:grid;grid-template-columns:1fr 1fr;gap:10px; } #ccds-modal .ccds-position-footer button{ min-height:47px!important;font-size:12px!important; border-radius:13px!important;padding:12px 10px!important; } @media(max-width:800px){ #ccds-modal .ccds-position-layer{justify-content:center} #ccds-modal .ccds-position-sheet{ width:100%;max-height:min(62%,470px);border-radius:23px 23px 0 0; padding:8px 15px calc(15px + env(safe-area-inset-bottom,0px)); } #ccds-modal .ccds-position-handle{ display:block;width:43px;height:5px;border-radius:10px; background:#d4c5e1;margin:0 auto 2px;flex:none; } } @media(max-width:380px){ #ccds-modal .ccds-position-sheet{max-height:min(67%,490px);padding-left:12px;padding-right:12px;gap:10px} #ccds-modal .ccds-position-icon-grid{gap:5px} #ccds-modal .ccds-position-icon{min-height:60px!important;gap:5px} #ccds-modal .ccds-position-icon svg{width:20px;height:20px} #ccds-modal .ccds-position-icon span{font-size:9px} #ccds-modal .ccds-position-slider{padding:10px} } @media(prefers-reduced-motion:no-preference){ #ccds-modal .ccds-position-sheet{animation:ccds-position-enter .2s ease-out both} @keyframes ccds-position-enter{from{transform:translateY(18px);opacity:.55}to{transform:translateY(0);opacity:1}} } /* v3.4.9 — Live photo preview stays visible while customers use editing tools. */ #ccds-modal .ccds-live-preview-dock[hidden]{display:none!important} #ccds-modal .ccds-live-preview-dock{display:none} #ccds-modal .ccds-live-preview-artwork{flex:none;min-width:0;width:88px;height:auto;display:grid;place-items:center} #ccds-modal .ccds-live-preview-stage{position:relative!important;display:block;width:100%!important;max-height:none!important;max-width:100%!important;box-sizing:border-box;overflow:hidden!important;flex:none!important;margin:0!important;border-radius:7px!important;background-repeat:no-repeat;background-position:center;background-size:100% 100%!important;transform:none!important} #ccds-modal .ccds-live-preview-stage .ccds-print-region{position:absolute!important;overflow:hidden!important} #ccds-modal .ccds-live-preview-stage canvas{display:block!important;width:100%!important;height:100%!important} #ccds-modal .ccds-live-preview-stage .ccds-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none} #ccds-modal .ccds-live-preview-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:1;min-width:0;gap:3px} #ccds-modal .ccds-live-preview-text strong{color:#452365;font-size:12px!important;font-weight:850;display:flex;align-items:center;gap:5px} #ccds-modal .ccds-live-preview-text>span{font-size:10px;color:#816c90;line-height:1.35} #ccds-modal .ccds-live-indicator{width:7px;height:7px;border-radius:50%;background:#319b66;box-shadow:0 0 0 3px #dff6e8} #ccds-modal .ccds-live-preview-expand{flex:none;border:1px solid #ddceed!important;border-radius:11px!important;color:#5b3281!important;background:#fff!important;min-height:39px!important;padding:8px!important;font-size:11px!important;font-weight:850!important} @media(max-width:800px){ /* The compact preview is a separate fixed-height row between Save and the scrollable tools. */ #ccds-modal .ccds-shell>#ccds-live-preview-dock:not([hidden]){ order:3!important;display:flex!important;position:relative!important;z-index:8; align-items:center;gap:13px;flex:0 0 auto!important; width:100%;min-height:100px;max-height:112px;padding:8px 12px!important; border-bottom:1px solid #e7ddec;background:#fff!important; box-shadow:0 4px 15px #4a237a12; } #ccds-modal .ccds-shell>#ccds-live-preview-dock .ccds-live-preview-artwork{width:min(88px,24vw);} #ccds-modal .ccds-workspace{order:4!important} /* Move the live image above the popup controls so nothing covers the product. */ #ccds-modal .ccds-position-layer{flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;padding:8px 0 0!important} #ccds-modal .ccds-position-backdrop{background:rgba(25,12,38,.10)!important} #ccds-modal .ccds-position-layer>#ccds-live-preview-dock:not([hidden]){ display:flex!important;flex:0 1 auto!important;align-items:center!important;justify-content:center!important;gap:10px; position:relative!important;z-index:1;width:calc(100% - 30px);max-width:460px;min-height:0; padding:9px 12px!important;border:1px solid #dfd0ec;border-radius:17px; background:#fff!important;box-shadow:0 6px 23px #28104122; } #ccds-modal .ccds-position-layer>#ccds-live-preview-dock .ccds-live-preview-artwork{width:min(27vh,47vw,205px);max-height:29vh;} #ccds-modal .ccds-position-layer>#ccds-live-preview-dock .ccds-live-preview-text{display:none!important} #ccds-modal .ccds-position-layer>#ccds-live-preview-dock .ccds-live-preview-expand{display:none!important} #ccds-modal .ccds-position-sheet{flex:0 1 auto!important;max-height:min(49dvh,390px)!important;min-height:0!important;gap:9px!important;box-shadow:0 -6px 26px #2810412a!important} #ccds-modal .ccds-position-icon{min-height:53px!important;gap:3px!important;padding:7px 2px!important} #ccds-modal .ccds-position-icon-grid{gap:5px!important} #ccds-modal .ccds-position-slider{padding:8px!important;gap:6px!important} #ccds-modal .ccds-position-footer button{min-height:42px!important} } @media(max-width:800px) and (max-height:650px){ #ccds-modal .ccds-shell>#ccds-live-preview-dock:not([hidden]){min-height:80px;max-height:88px;padding:5px 10px!important} #ccds-modal .ccds-shell>#ccds-live-preview-dock .ccds-live-preview-artwork{width:70px} #ccds-modal .ccds-position-layer>#ccds-live-preview-dock .ccds-live-preview-artwork{width:min(22vh,34vw,150px)} #ccds-modal .ccds-position-sheet{max-height:53dvh!important} } @media(min-width:801px){ /* On desktop the actual product preview is already visible beside the tools. */ #ccds-modal .ccds-position-layer>#ccds-live-preview-dock{display:none!important} #ccds-modal .ccds-position-backdrop{background:rgba(24,11,37,.13)!important} } /* 3.5.1 — top visible product tools, crop and shapes shortcuts */ #ccds-modal .ccds-top-tools{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;align-items:center!important;overflow-x:auto!important;padding:0 0 2px!important;scrollbar-width:thin} #ccds-modal .ccds-top-tools .ccds-history-btn{min-width:110px!important;min-height:42px!important;padding:9px 12px!important;font-size:13px!important;white-space:nowrap!important;flex:0 0 auto!important} #ccds-modal .ccds-shapes-card .ccds-duo{margin-top:10px} @media(max-width:800px){#ccds-modal .ccds-canvas-toolbar{grid-template-columns:1fr!important;gap:6px!important}#ccds-modal .ccds-top-tools{order:1}#ccds-modal .ccds-zoom-bar{order:2;justify-content:flex-start!important;overflow-x:auto!important;padding-bottom:2px}#ccds-modal .ccds-top-tools .ccds-history-btn{min-width:96px!important;min-height:40px!important;font-size:12px!important;padding:8px 10px!important}} /* 3.6: unified canvas workspace. Scoped specificity isolates older theme overrides. */ #ccds-modal#ccds-modal.ccds-modern{padding:0!important;background:#111827!important;inset:0!important;height:100dvh!important;z-index:2147483000!important} #ccds-modal#ccds-modal.ccds-modern[hidden],#ccds-modal#ccds-modal.ccds-modern [hidden]{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-shell{width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:#f8fafc!important} #ccds-modal#ccds-modal.ccds-modern .ccds-header{flex:0 0 52px!important;min-height:52px!important;padding:6px 16px!important;background:#fff!important;color:#202331!important;border-bottom:1px solid #e2e8f0!important;box-shadow:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{color:#202331!important;font-size:13px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-brand small{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-header-actions{margin-left:auto!important} #ccds-modal#ccds-modal.ccds-modern .ccds-close{background:#eef0f5!important;color:#111827!important;width:40px!important;height:40px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{display:grid!important;grid-template-columns:74px minmax(0,1fr) 310px!important;grid-template-rows:minmax(0,1fr)!important;gap:0!important;flex:1 1 0!important;min-height:0!important;overflow:hidden!important;padding:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{grid-column:1!important;grid-row:1!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;position:static!important;width:auto!important;height:auto!important;max-height:none!important;min-height:0!important;padding:8px 5px!important;gap:3px!important;overflow:auto!important;background:#fff!important;border-right:1px solid #e2e8f0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{display:flex!important;position:relative!important;flex:0 0 58px!important;width:60px!important;min-width:60px!important;height:58px!important;flex-direction:column!important;gap:3px!important;justify-content:center!important;align-items:center!important;padding:5px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#475569!important;box-shadow:none!important;font-size:11px!important;line-height:1.2!important} #ccds-modal#ccds-modal.ccds-modern .ccds-rail-btn span{display:block!important;font-size:10px!important;color:inherit!important} #ccds-modal#ccds-modal.ccds-modern .ccds-rail-btn svg{width:21px!important;height:21px!important;flex-shrink:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-rail-btn.is-active{background:#ede9fe!important;color:#6d28d9!important} #ccds-modal#ccds-modal.ccds-modern .ccds-main{grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:column!important;min-width:0!important;min-height:0!important;height:100%!important;overflow:hidden!important;padding:0!important;gap:0!important;background:#e9edf3!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{display:flex!important;flex:0 0 48px!important;justify-content:space-between!important;align-items:center!important;padding:4px 10px!important;margin:0!important;border-radius:0!important;border:0!important;background:#f8fafc!important;gap:6px!important;min-height:48px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-history-bar,#ccds-modal#ccds-modal.ccds-modern .ccds-zoom-bar{display:flex!important;gap:4px!important;align-items:center!important;padding:0!important;margin:0!important;width:auto!important;min-width:0!important;background:none!important;box-shadow:none!important;border:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar button{min-width:34px!important;min-height:36px!important;height:36px!important;padding:4px 8px!important;border:0!important;background:#fff!important;color:#334155!important;font-size:12px!important;box-shadow:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-stage-area{display:flex!important;flex:1 1 0!important;min-height:0!important;width:100%!important;padding:0!important;margin:0!important;overflow:hidden!important} #ccds-modal#ccds-modal.ccds-modern .ccds-stage-wrap{display:flex!important;align-items:center!important;justify-content:center!important;flex:1 1 0!important;min-width:0!important;min-height:0!important;width:100%!important;height:100%!important;max-height:none!important;padding:10px!important;overflow:auto!important;touch-action:pan-x pan-y!important;background:transparent!important} #ccds-modal#ccds-modal.ccds-modern .ccds-stage-space{flex-shrink:0!important;margin:auto!important;position:relative!important} #ccds-modal#ccds-modal.ccds-modern .ccds-stage{position:relative!important;flex-shrink:0!important;min-width:0!important;max-width:none!important;max-height:none!important;transform-origin:top left!important;border-radius:0!important;box-shadow:0 6px 28px #1e293b25!important} #ccds-modal#ccds-modal.ccds-modern .ccds-stage canvas{touch-action:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector{grid-column:3;grid-row:1;overflow:auto;min-width:0;min-height:0;background:#fff;padding:14px;border-left:1px solid #e2e8f0;overscroll-behavior:contain} #ccds-modal#ccds-modal.ccds-modern .ccds-option-panel{display:block;min-width:0} #ccds-modal#ccds-modal.ccds-modern .ccds-right,#ccds-modal#ccds-modal.ccds-modern .ccds-layers-panel,#ccds-modal#ccds-modal.ccds-modern .ccds-photo-effects-panel,#ccds-modal#ccds-modal.ccds-modern .ccds-creative-card,#ccds-modal#ccds-modal.ccds-modern .ccds-background-options{display:block!important;position:static!important;width:100%!important;max-height:none!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;overflow:visible!important} #ccds-modal#ccds-modal.ccds-modern .ccds-section{padding:8px 0!important;border:0!important;margin:0!important;min-height:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-field,#ccds-modal#ccds-modal.ccds-modern textarea,#ccds-modal#ccds-modal.ccds-modern select{width:100%!important;min-height:42px!important;font-size:16px!important;color:#1e293b!important;background:#f8fafc!important;border:1px solid #cbd5e1!important;border-radius:8px!important} #ccds-modal#ccds-modal.ccds-modern input[type=range]{width:100%!important;min-height:32px!important;touch-action:pan-y!important;accent-color:#7c3aed} #ccds-modal#ccds-modal.ccds-modern .ccds-input-label{display:block!important;margin:10px 0 5px!important;font-size:12px!important;color:#475569!important} #ccds-modal#ccds-modal.ccds-modern .ccds-duo{display:flex!important;gap:8px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-secondary,#ccds-modal#ccds-modal.ccds-modern .ccds-primary{min-height:40px!important;white-space:normal!important;border-radius:8px!important;padding:9px 12px!important;font-size:12px!important;box-shadow:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-primary{background:#7c3aed!important;color:#fff!important} #ccds-modal#ccds-modal.ccds-modern .ccds-effects-presets{display:flex!important;overflow-x:auto!important;gap:8px!important;padding:8px 0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-effect-look{display:block!important;flex:0 0 66px!important;width:66px!important;min-width:66px!important;padding:3px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-effect-look-photo{height:56px!important;width:56px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-effect-look-name{font-size:10px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-effects-slider-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;overflow:visible!important;padding:8px 0!important;margin:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-effect-slider-card{min-width:0!important;width:100%!important;padding:8px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-size-dock{display:flex!important;flex-direction:column!important;position:static!important;width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;gap:8px!important;padding:0!important;border:0!important;box-shadow:none!important;background:#fff!important} #ccds-modal#ccds-modal.ccds-modern .ccds-size-range{writing-mode:horizontal-tb!important;direction:ltr!important;appearance:auto!important;transform:none!important;width:100%!important;height:32px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;overflow:visible!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action{width:auto!important;min-width:0!important;min-height:48px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-footer{display:flex!important;flex:0 0 auto!important;justify-content:flex-end!important;position:static!important;padding:8px 14px max(8px,env(safe-area-inset-bottom))!important;min-height:56px!important;gap:10px!important;background:#fff!important;border-top:1px solid #e2e8f0!important;box-shadow:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-footer-actions{display:flex!important;gap:8px!important;width:auto!important} #ccds-modal#ccds-modal.ccds-modern .ccds-footer-actions button{min-width:96px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-save-feedback{max-width:65%;font-size:12px!important;margin:0!important;padding:4px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-live-message{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-live-message.is-error,#ccds-modal#ccds-modal.ccds-modern .ccds-live-message.is-working{display:block!important;margin:0!important;padding:6px 12px!important;font-size:12px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-empty-selection{font-size:13px;color:#64748b} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector[data-tool=crop] .ccds-effects-presets,#ccds-modal#ccds-modal.ccds-modern .ccds-inspector[data-tool=crop] .ccds-effects-slider-row:not(.ccds-effects-crop),#ccds-modal#ccds-modal.ccds-modern .ccds-inspector[data-tool=crop] .ccds-effects-heading{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector:not([data-tool=crop]) .ccds-effects-crop{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-left,#ccds-modal#ccds-modal.ccds-modern .ccds-mobile-tabs,#ccds-modal#ccds-modal.ccds-modern .ccds-flow,#ccds-modal#ccds-modal.ccds-modern .ccds-stage-top,#ccds-modal#ccds-modal.ccds-modern .ccds-stage-bottom,#ccds-modal#ccds-modal.ccds-modern .ccds-canvas-help,#ccds-modal#ccds-modal.ccds-modern .ccds-mosaic-quick,#ccds-modal#ccds-modal.ccds-modern .ccds-rail-caption,#ccds-modal#ccds-modal.ccds-modern .ccds-rail-sep,#ccds-modal#ccds-modal.ccds-modern .ccds-footer-caption,#ccds-modal#ccds-modal.ccds-modern .ccds-live-preview-dock,#ccds-modal#ccds-modal.ccds-modern .ccds-status,#ccds-modal#ccds-modal.ccds-modern .ccds-effects-sliders-label,#ccds-modal#ccds-modal.ccds-modern .ccds-effects-selection,#ccds-modal#ccds-modal.ccds-modern .ccds-hint:not(#ccds-mosaic-status):not(#ccds-android-picker-help),#ccds-modal#ccds-modal.ccds-modern #ccds-fit-note,#ccds-modal#ccds-modal.ccds-modern #ccds-crop-top,#ccds-modal#ccds-modal.ccds-modern #ccds-shapes-top,#ccds-modal#ccds-modal.ccds-modern #ccds-cancel,#ccds-modal#ccds-modal.ccds-modern #ccds-add-rect,#ccds-modal#ccds-modal.ccds-modern #ccds-add-circle,#ccds-modal#ccds-modal.ccds-modern #ccds-undo,#ccds-modal#ccds-modal.ccds-modern #ccds-redo,#ccds-modal#ccds-modal.ccds-modern #ccds-rail-more,#ccds-modal#ccds-modal.ccds-modern [data-ccds-tool=move],#ccds-modal#ccds-modal.ccds-modern [data-ccds-tool=custom-bg],#ccds-modal#ccds-modal.ccds-modern [data-ccds-tool=zoom],#ccds-modal#ccds-modal.ccds-modern #ccds-center-h,#ccds-modal#ccds-modal.ccds-modern #ccds-auto-layout,#ccds-modal#ccds-modal.ccds-modern #ccds-auto-enhance,#ccds-modal#ccds-modal.ccds-modern #ccds-effects-clear{display:none!important} #ccds-modal#ccds-modal.ccds-modern button:disabled{opacity:.4!important;cursor:not-allowed!important} #ccds-modal#ccds-modal.ccds-modern button:focus-visible,#ccds-modal#ccds-modal.ccds-modern input:focus-visible{outline:2px solid #7c3aed!important;outline-offset:2px} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-header{flex-basis:46px!important;min-height:46px!important;padding:3px 10px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(120px,1fr) minmax(0,27%) 70px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-main{grid-row:1!important;grid-column:1!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector{grid-row:2;grid-column:1;border:0;border-top:1px solid #e2e8f0;padding:8px 12px;} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{grid-row:3!important;grid-column:1!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 6px!important;gap:2px!important;border-top:1px solid #e2e8f0!important;border-right:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{flex:0 0 58px!important;min-width:58px!important;width:58px!important;height:58px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{flex-basis:42px!important;min-height:42px!important;padding:3px 6px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar button{padding:4px 6px!important;font-size:11px!important;min-width:30px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-footer{min-height:52px!important;padding:6px 10px max(6px,env(safe-area-inset-bottom))!important} #ccds-modal#ccds-modal.ccds-modern .ccds-save-feedback{max-width:50%;max-height:60px;overflow:auto} #ccds-modal#ccds-modal.ccds-modern .ccds-footer-actions button{min-width:80px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-effects-slider-row{grid-template-columns:repeat(2,minmax(0,1fr))!important} #ccds-modal#ccds-modal.ccds-modern .ccds-size-dock{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important} #ccds-modal#ccds-modal.ccds-modern .ccds-size-range{flex:1 1 100px!important;width:100px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action-row{grid-template-columns:repeat(6,minmax(0,1fr))!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action{padding:4px!important;font-size:10px!important} } #ccds-modal#ccds-modal [hidden]{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector[data-tool=crop] .ccds-effects-crop{display:grid!important} #ccds-modal#ccds-modal.ccds-modern #ccds-select-hint{display:block!important;font-size:12px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector .ccds-kicker,#ccds-modal#ccds-modal.ccds-modern .ccds-creative-card>.ccds-hint,#ccds-modal#ccds-modal.ccds-modern #ccds-effects-selection{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-native-photo-input{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:3!important} #ccds-modal#ccds-modal [hidden]{display:none!important} #ccds-modal#ccds-modal.ccds-modern *{box-sizing:border-box} #ccds-modal#ccds-modal.ccds-modern .ccds-header{order:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{order:1!important;grid-template-areas:none!important;align-items:stretch!important} #ccds-modal#ccds-modal.ccds-modern .ccds-footer{order:2!important;flex-direction:row!important} #ccds-modal#ccds-modal.ccds-modern .ccds-footer-actions{flex-direction:row!important;flex-wrap:nowrap!important} #ccds-modal#ccds-modal.ccds-modern .ccds-footer-actions button{width:auto!important;flex:0 0 auto!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector{align-self:stretch!important;height:100%!important;max-height:100%!important;overflow:auto!important} #ccds-modal#ccds-modal.ccds-modern .ccds-zoom-bar{position:static!important;visibility:visible!important;opacity:1!important;flex-direction:row!important;max-width:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-main,#ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{align-self:stretch!important;margin:0!important} #ccds-modal#ccds-modal [hidden]{display:none!important} #ccds-modal#ccds-modal#ccds-modal#ccds-modal [hidden]{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-shell{padding:0!important;margin:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail [data-ccds-tool=move],#ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail [data-ccds-tool=zoom],#ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail [data-ccds-tool=custom-bg]{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-zoom-bar>*{display:block!important} #ccds-modal#ccds-modal.ccds-modern .ccds-zoom-bar{display:flex!important;flex:0 0 auto!important;height:36px!important;overflow:visible!important} #ccds-modal#ccds-modal#ccds-modal#ccds-modal [hidden]{display:none!important} #ccds-modal#ccds-modal.ccds-modern{max-height:none!important;width:100%!important;max-width:none!important} #ccds-modal#ccds-modal.ccds-modern #ccds-mosaic-panel #ccds-mosaic-create{display:block!important;width:100%!important;margin-bottom:8px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector .ccds-advanced-tools{display:block!important;margin-top:12px!important} /* v3.6.1 premium editing workspace: retain existing functional tools. */ #ccds-modal#ccds-modal.ccds-modern{--ccds-accent:#7c3aed;--ccds-accent2:#db2777;--ccds-ink:#f8fafc} #ccds-modal#ccds-modal.ccds-modern .ccds-header{background:linear-gradient(110deg,#111027,#21143c 72%,#382052)!important;border-bottom:1px solid #6649a2!important;color:#fff!important} #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{color:#fff!important;letter-spacing:.055em!important} #ccds-modal#ccds-modal.ccds-modern .ccds-logo{background:linear-gradient(130deg,#f7b2de,#aa81ff)!important;color:#261139!important;border-radius:11px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-close{background:#ffffff20!important;color:#fff!important;border:1px solid #ffffff30!important} #ccds-modal#ccds-modal.ccds-modern .ccds-shell{background:#121326!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{background:#19162a!important;border-color:#332948!important;scrollbar-width:thin!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{color:#e9ddff!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn:hover,#ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.is-active{background:linear-gradient(140deg,#7444dc,#a12f9a)!important;color:#fff!important} #ccds-modal#ccds-modal.ccds-modern .ccds-main{background:radial-gradient(circle at center,#f3eafb,#e4e2f1 65%,#d9d8e9)!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{background:#eeebf7!important;border-bottom:1px solid #ddd5ec!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar button{border-radius:9px!important;border:1px solid #d9d2e8!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar button:hover{background:#e5d9ff!important;color:#5b21b6!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector{background:#fcfaff!important;border-color:#ded6ee!important} #ccds-modal#ccds-modal.ccds-modern .ccds-primary{background:linear-gradient(115deg,#6d28d9,#a21caf)!important;border:0!important;font-weight:700!important} #ccds-modal#ccds-modal.ccds-modern input[type=range]{accent-color:#873ae8!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail [data-ccds-tool=custom-bg],#ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail [data-ccds-tool=move],#ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail [data-ccds-tool=zoom]{display:flex!important} #ccds-modal#ccds-modal.ccds-modern #ccds-auto-layout,#ccds-modal#ccds-modal.ccds-modern #ccds-auto-enhance,#ccds-modal#ccds-modal.ccds-modern #ccds-effects-clear{display:inline-flex!important;align-items:center!important;justify-content:center!important} #ccds-modal#ccds-modal.ccds-modern .ccds-background-options{display:block!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action-row{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:3px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action{min-width:0!important;overflow:hidden!important;padding:5px 2px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action svg{flex:0 0 auto!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn:focus-visible{outline:2px solid #f4b9fe!important;outline-offset:-2px!important} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{grid-template-rows:minmax(150px,1fr) minmax(128px,32%) 66px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{padding:3px 7px!important;gap:5px!important;scroll-snap-type:x proximity!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{flex:0 0 60px!important;min-width:60px!important;width:60px!important;height:57px!important;scroll-snap-align:start!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector{padding:8px 12px!important;overscroll-behavior:contain!important} #ccds-modal#ccds-modal.ccds-modern .ccds-header{padding-inline:10px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action-row{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important} #ccds-modal#ccds-modal.ccds-modern .ccds-layer-action span{font-size:9px!important} } @media(max-width:380px){#ccds-modal#ccds-modal.ccds-modern .ccds-workspace{grid-template-rows:minmax(130px,1fr) minmax(122px,34%) 62px!important}} /* v3.6.3 — Mobile toolbar alignment ONLY, using the original v3.6.1 tools and handlers. Keep canvas visible; put existing icons directly below it, above editing options. */ @media (max-width: 800px) { #ccds-modal#ccds-modal.ccds-modern .ccds-workspace { grid-template-rows: minmax(138px, 1fr) 64px minmax(116px, 30%) !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main { grid-column: 1 !important; grid-row: 1 !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { grid-column: 1 !important; grid-row: 2 !important; min-width: 0 !important; min-height: 0 !important; height: 64px !important; align-items: center !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 5px !important; padding: 3px 8px !important; border-top: 1px solid #332948 !important; border-right: 0 !important; scroll-padding-inline: 8px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn { flex: 0 0 60px !important; width: 60px !important; min-width: 60px !important; height: 56px !important; min-height: 56px !important; padding: 4px 3px !important; gap: 3px !important; scroll-snap-align: start; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn svg { width: 22px !important; height: 22px !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn span { font-size: 10px !important; line-height: 1.15 !important; white-space: nowrap !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector { grid-column: 1 !important; grid-row: 3 !important; min-height: 0 !important; padding: 8px 12px !important; } } @media (max-width: 380px) { #ccds-modal#ccds-modal.ccds-modern .ccds-workspace { grid-template-rows: minmax(112px, 1fr) 62px minmax(102px, 31%) !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { height: 62px !important; padding-inline: 5px !important; } } /* v3.6.4 — MOBILE ALIGNMENT ONLY. Keep the 3.6.1 / 3.6.3 tool buttons and their original event handlers. Mobile layout: artwork > scrollable settings > tools > Preview/Save footer. The tool rail remains the last grid row directly above the fixed bottom action bar. No duplication, sticky overlay or JavaScript reparenting. */ @media screen and (max-width: 800px) { #ccds-modal#ccds-modal.ccds-modern .ccds-workspace { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(138px, 1fr) minmax(116px, 30%) 64px !important; min-height: 0 !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main { grid-column: 1 !important; grid-row: 1 !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector { grid-column: 1 !important; grid-row: 2 !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; border-top: 1px solid #ded6ee !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { grid-column: 1 !important; grid-row: 3 !important; width: 100% !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 3px 8px !important; gap: 5px !important; margin: 0 !important; border-top: 1px solid #403354 !important; border-right: 0 !important; scroll-snap-type: x proximity; scroll-padding-inline: 8px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn { flex: 0 0 60px !important; width: 60px !important; min-width: 60px !important; height: 56px !important; min-height: 56px !important; align-self: center !important; justify-content: center !important; padding: 4px 3px !important; gap: 3px !important; scroll-snap-align: start; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn svg { width: 22px !important; height: 22px !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn span { font-size: 10px !important; line-height: 1.15 !important; white-space: nowrap !important; } /* Preview / Save area stays directly below the toolbar, including on Android browser/WebView with a gesture navigation safe area. */ #ccds-modal#ccds-modal.ccds-modern .ccds-footer { flex: 0 0 auto !important; position: relative !important; z-index: 1 !important; } } @media screen and (max-width: 380px) { #ccds-modal#ccds-modal.ccds-modern .ccds-workspace { grid-template-rows: minmax(112px, 1fr) minmax(102px, 31%) 62px !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { height: 62px !important; min-height: 62px !important; max-height: 62px !important; padding-inline: 5px !important; } } /* v3.6.5 — mobile footer clearance & complete tool labels. v3.6.4 forced full 100dvh for the modern editor, accidentally overriding the site's 88px mobile-navigation clearance established in v3.2.3. Restore that clearance at the end of the cascade, so the external fixed Home / You / Orders / Cart / Menu bar cannot cover the tool names or Save. This is styling only: tool markup and JavaScript handlers are unchanged. */ @media screen and (max-width: 800px) { #ccds-modal#ccds-modal.ccds-modern { --ccds-app-bar-clearance: 88px; top: 0 !important; right: 0 !important; bottom: var(--ccds-app-bar-clearance) !important; left: 0 !important; height: calc(100dvh - var(--ccds-app-bar-clearance)) !important; max-height: calc(100dvh - var(--ccds-app-bar-clearance)) !important; min-height: 0 !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-shell { height: 100% !important; max-height: 100% !important; min-height: 0 !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-workspace { grid-template-rows: minmax(110px, 1fr) minmax(90px, 30%) 76px !important; min-height: 0 !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector { overflow-y: auto !important; overscroll-behavior: contain !important; min-height: 0 !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { grid-row: 3 !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; padding: 5px 8px !important; gap: 5px !important; align-items: center !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-padding-inline: 8px; -webkit-overflow-scrolling: touch; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn { box-sizing: border-box !important; flex: 0 0 66px !important; width: 66px !important; min-width: 66px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; padding: 5px 2px !important; overflow: visible !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn svg { display: block !important; width: 23px !important; height: 23px !important; flex: 0 0 23px !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn span { display: block !important; font-size: 11px !important; font-weight: 700 !important; line-height: 14px !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; max-width: none !important; text-overflow: clip !important; flex: 0 0 auto !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-footer { flex: 0 0 auto !important; min-height: 54px !important; z-index: 2 !important; position: relative !important; } } @media screen and (max-width: 800px) and (max-height: 640px) { #ccds-modal#ccds-modal.ccds-modern { --ccds-app-bar-clearance: 88px; } #ccds-modal#ccds-modal.ccds-modern .ccds-workspace { grid-template-rows: minmax(75px, 1fr) minmax(65px, 28%) 72px !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { height: 72px !important; min-height: 72px !important; max-height: 72px !important; padding-block: 4px !important; } } @media screen and (max-width: 800px) and (orientation: landscape) and (max-height: 480px) { #ccds-modal#ccds-modal.ccds-modern { --ccds-app-bar-clearance: 45px; } #ccds-modal#ccds-modal.ccds-modern .ccds-workspace { grid-template-rows: minmax(50px, 1fr) minmax(48px, 24%) 68px !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { height: 68px !important; min-height: 68px !important; max-height: 68px !important; padding-block: 2px !important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn { height: 61px !important; min-height: 61px !important; max-height: 61px !important; } } /* v3.6.6 — Official mobile studio header actions and aligned, unobstructed tools. The ORIGINAL Preview and Save button IDs are moved into the top header. The former bottom footer is feedback-only, outside the normal flex layout. All editing tool buttons, their ordering, and their JS actions are preserved. */ #ccds-modal#ccds-modal.ccds-modern .ccds-header { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; flex-shrink:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-brand { display:flex!important; align-items:center!important; flex:0 1 auto!important; min-width:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-brand>div {min-width:0!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong {white-space:nowrap!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-header-actions { display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:6px!important; flex:0 0 auto!important; margin-left:auto!important; min-width:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions { display:flex!important; align-items:center!important; gap:6px!important; flex:0 0 auto!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions button { position:relative!important; display:inline-flex!important; gap:4px!important; align-items:center!important; justify-content:center!important; width:auto!important; height:38px!important; min-height:38px!important; max-height:38px!important; padding:5px 9px!important; margin:0!important; border-radius:10px!important; font-size:12px!important; line-height:1.05!important; font-weight:800!important; letter-spacing:0!important; white-space:nowrap!important; box-shadow:none!important; flex:0 0 auto!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions #ccds-preview { background:rgba(255,255,255,.11)!important; border:1px solid rgba(255,255,255,.32)!important; color:#fff!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions #ccds-preview svg { display:block!important;flex:0 0 16px!important;width:16px!important;height:16px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions #ccds-save { background:linear-gradient(115deg,#9254ef,#b232ae)!important; color:#fff!important; border:1px solid #d5afff66!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions #ccds-save:disabled { background:rgba(255,255,255,.2)!important; color:#e4d7ef!important; opacity:.75!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions button:focus-visible { outline:2px solid #ffdbfa!important;outline-offset:2px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-feedback-only { position:absolute!important; top:56px!important; bottom:auto!important; left:12px!important; right:12px!important; width:auto!important; height:auto!important; min-height:0!important; max-height:none!important; padding:0!important; border:0!important; margin:0!important; background:transparent!important; box-shadow:none!important; pointer-events:none!important; flex:0 0 auto!important; z-index:45!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-feedback-only .ccds-footer-caption, #ccds-modal#ccds-modal.ccds-modern .ccds-feedback-only #ccds-cancel {display:none!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-feedback-only .ccds-save-feedback { display:block!important; width:100%!important; max-width:none!important; max-height:96px!important; overflow-y:auto!important; margin:0!important; padding:10px 13px!important; border-radius:12px!important; box-shadow:0 6px 22px #20143836!important; font-size:12px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-feedback-only .ccds-save-feedback[hidden] {display:none!important;} @media (max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-header { flex-basis:54px!important; min-height:54px!important; height:54px!important; padding:5px 9px!important; gap:4px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-brand {gap:0!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-logo {display:none!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong { font-size:clamp(11px,3.15vw,14px)!important; letter-spacing:0.25px!important; line-height:1.1!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-actions, #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions {gap:4px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions button { min-width:0!important; width:auto!important; min-height:36px!important; height:36px!important; max-height:36px!important; padding:4px 7px!important; font-size:11px!important; border-radius:9px!important; } #ccds-modal#ccds-modal.ccds-modern #ccds-preview svg {width:14px!important;height:14px!important;flex-basis:14px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-close { flex:0 0 34px!important; min-width:34px!important; width:34px!important; height:36px!important; min-height:36px!important; border-radius:10px!important; font-size:18px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-feedback-only {top:60px!important;} /* Retain v3.6.5 footer clearance and a complete, labeled single-row swipe toolbar. */ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace { grid-template-rows:minmax(106px,1fr) minmax(86px,31%) 76px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { justify-content:flex-start!important; align-items:center!important; flex-wrap:nowrap!important; padding:5px 8px!important; gap:5px!important; scroll-snap-type:x proximity!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn { flex:0 0 66px!important; width:66px!important; min-width:66px!important; height:64px!important; padding:5px 2px!important; justify-content:center!important; align-items:center!important; border-radius:12px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn span { font-size:11px!important; line-height:14px!important; white-space:nowrap!important; text-overflow:clip!important; max-width:none!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn svg { display:block!important; width:23px!important; height:23px!important; } } @media(max-width:360px){ #ccds-modal#ccds-modal.ccds-modern .ccds-header {padding-inline:6px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong {font-size:11px!important;letter-spacing:0!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions button {font-size:10px!important;padding-inline:5px!important;gap:3px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-close {flex-basis:32px!important;min-width:32px!important;width:32px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn {flex-basis:60px!important;min-width:60px!important;width:60px!important;} } @media(max-width:800px) and (max-height:640px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{grid-template-rows:minmax(66px,1fr) minmax(60px,29%) 72px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{min-height:72px!important;height:72px!important;max-height:72px!important;} } @media(max-width:800px) and (orientation:landscape) and (max-height:480px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{grid-template-rows:minmax(48px,1fr) minmax(45px,27%) 68px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{min-height:68px!important;height:68px!important;max-height:68px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{min-height:60px!important;height:60px!important;max-height:60px!important;} } /* v3.6.7 — Android mobile navigation sits flush against the editor tool rail. The JavaScript measures the real bottom nav; 70px is only a safe fallback. Keep all editing tool dimensions and the Preview / Save header unchanged. */ @media screen and (max-width:800px){ #ccds-modal#ccds-modal.ccds-modern { --ccds-app-bar-clearance:70px; } #ccds-modal#ccds-modal.ccds-modern .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern .ccds-shell { min-height:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail { margin-bottom:0!important; border-bottom:0!important; } } @media screen and (max-width:800px) and (orientation:landscape) and (max-height:480px){ #ccds-modal#ccds-modal.ccds-modern {--ccds-app-bar-clearance:45px;} } /* v3.6.8 — More shapes, handwriting fonts and premium colour picker. These panels live in the existing tool options and do not move the rail, footer, or header Save / Preview buttons. */ #ccds-modal .ccds-shape-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 13px} #ccds-modal .ccds-shape-choice {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-width:0;min-height:76px;padding:10px 4px;border:1px solid #ded4ed;border-radius:13px;background:linear-gradient(155deg,#fff,#f8f3ff);color:#4c2367;font:600 11px/1.15 system-ui,sans-serif;cursor:pointer;transition:transform .12s ease,border-color .12s ease} #ccds-modal .ccds-shape-choice svg {width:35px;height:35px;flex-shrink:0;fill:#8a43b4;stroke:#642783;stroke-width:1.5;stroke-linejoin:round} #ccds-modal .ccds-shape-choice span {white-space:normal;text-align:center;overflow-wrap:anywhere} #ccds-modal .ccds-shape-choice:active {transform:scale(.96)} #ccds-modal .ccds-shape-choice:focus-visible,#ccds-modal .ccds-font-choice:focus-visible,#ccds-modal .ccds-premium-swatch:focus-visible {outline:3px solid #b676f4;outline-offset:2px} #ccds-modal .ccds-font-presets {display:grid;gap:6px;margin:10px 0} #ccds-modal .ccds-font-strip {display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding:3px 2px 9px;scrollbar-width:thin} #ccds-modal .ccds-font-choice {white-space:nowrap;flex:0 0 auto;scroll-snap-align:start;min-height:49px;padding:8px 14px;border:1px solid #dccde9;border-radius:11px;background:#fff;color:#421b5a;font-size:18px;line-height:1.2;cursor:pointer} #ccds-modal .ccds-font-choice.is-selected {border-color:#933fc3;background:#f2e3ff;box-shadow:0 0 0 2px #b985df55} #ccds-modal .ccds-font-hint {font-size:11px;line-height:1.4;margin:3px 0 8px} #ccds-modal .ccds-premium-palette {display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;margin:9px 0 14px} #ccds-modal .ccds-premium-swatch {display:block!important;width:100%;min-width:0;aspect-ratio:1/1;max-height:39px;min-height:27px;border-radius:9px;border:2px solid #0000001f;background:var(--ccds-swatch)!important;cursor:pointer;box-shadow:0 1px 4px #23182f20} #ccds-modal .ccds-premium-swatch.is-selected {outline:2px solid #8c3bc4;outline-offset:2px} #ccds-modal .ccds-color-picker-row {display:flex;align-items:center;gap:10px;margin:6px 0 13px;color:#735888;font-size:12px} #ccds-modal .ccds-color-picker-row input[type=color] {width:58px;min-width:58px;height:40px;padding:3px;border:1px solid #dbccec;border-radius:8px} @media(max-width:370px){#ccds-modal .ccds-shape-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#ccds-modal .ccds-premium-palette{grid-template-columns:repeat(6,minmax(0,1fr))}} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Cinzel"]{font-family:"Cinzel",serif!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Playfair Display"]{font-family:"Playfair Display",serif!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Cormorant Garamond"]{font-family:"Cormorant Garamond",serif!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Bebas Neue"]{font-family:"Bebas Neue",sans-serif!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Oswald"]{font-family:"Oswald",sans-serif!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="DM Serif Display"]{font-family:"DM Serif Display",serif!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Great Vibes"]{font-family:"Great Vibes",cursive!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Dancing Script"]{font-family:"Dancing Script",cursive!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Pacifico"]{font-family:"Pacifico",cursive!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Caveat"]{font-family:"Caveat",cursive!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Satisfy"]{font-family:"Satisfy",cursive!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Allura"]{font-family:"Allura",cursive!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Sacramento"]{font-family:"Sacramento",cursive!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal button.ccds-font-choice[data-ccds-font="Kalam"]{font-family:"Kalam",cursive!important;font-size:18px!important;letter-spacing:normal!important} #ccds-modal#ccds-modal .ccds-shape-choice{min-height:76px!important;padding:10px 4px!important} #ccds-modal#ccds-modal .ccds-premium-swatch{min-height:27px!important;padding:0!important;border-radius:9px!important} /* v3.6.9 — Explain independently required product photo uploads without pop-ups. */ /* v3.7.0: distinguish the product mockup from the actual clipped print */ #ccds-modal .ccds-proof-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(820px,100%);align-items:start} #ccds-modal .ccds-proof-views figure{margin:0;min-width:0;background:#fff;border:1px solid #e2d7ec;border-radius:12px;padding:12px} #ccds-modal .ccds-proof-views figcaption{font-weight:800;color:#4e2d69;font-size:13px;margin-bottom:9px} #ccds-modal .ccds-proof-views img{margin:0 auto!important;max-width:100%!important;max-height:44vh!important;box-shadow:none!important} #ccds-modal #ccds-proof-print-image{background-color:#fff;background-image:linear-gradient(45deg,#e7e2ed 25%,transparent 25%),linear-gradient(-45deg,#e7e2ed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7e2ed 75%),linear-gradient(-45deg,transparent 75%,#e7e2ed 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0} @media(max-width:520px){#ccds-modal .ccds-proof-views{grid-template-columns:1fr;gap:10px}#ccds-modal .ccds-proof-views img{max-height:32vh!important}#ccds-modal .ccds-proof-views figure{padding:10px}} /* v3.8.0 – Product #6455: fixed 13-photo floral clock slots. */ #ccds-modal .ccds-clock-slots{margin:14px 0 8px;padding:13px;border-radius:13px;background:linear-gradient(135deg,#181c2b,#101017);border:1px solid #42404e;color:#f5f5ff} #ccds-modal .ccds-clock-heading{display:flex;flex-direction:column;gap:4px;margin-bottom:11px} #ccds-modal .ccds-clock-heading strong{font-size:12px;font-weight:800;letter-spacing:.075em;color:#f0d7a5} #ccds-modal .ccds-clock-heading small{font-size:12px;line-height:1.5;color:#e6e3ea} #ccds-modal .ccds-clock-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px} #ccds-modal button.ccds-clock-slot{min-width:0;min-height:38px;padding:5px 4px;border:1px solid #58525c;border-radius:9px;background:#282938;color:#f3ebf6;font-family:inherit;font-weight:700;font-size:12px;line-height:1.25;cursor:pointer;touch-action:manipulation;box-shadow:none} #ccds-modal button.ccds-clock-slot.is-filled{background:#25392f;border-color:#6dae82;color:#f2fff2} #ccds-modal button.ccds-clock-slot.is-filled::after{content:' ✓';font-size:10px;color:#96e6ab} #ccds-modal button.ccds-clock-slot.is-current{outline:2px solid #e9c57b;outline-offset:1px} #ccds-modal button.ccds-clock-slot:focus-visible{outline:3px solid #f5da8b;outline-offset:2px} @media(max-width:480px){#ccds-modal .ccds-clock-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}#ccds-modal .ccds-clock-slots{padding:10px}} /* v3.9.1 — Photo position UX: a single permanent selector directly underneath the product preview, outside hidden tool-specific panels. No horizontal slider, no duplicated controls. Buttons stay accessible across modes. */ #ccds-modal#ccds-modal.ccds-modern .ccds-clock-slots{ box-sizing:border-box!important;flex:0 0 auto!important; position:relative;z-index:2; width:calc(100% - 24px)!important;max-width:860px!important; margin:7px auto 9px!important;padding:10px 13px!important; border:1px solid #504258!important;border-radius:14px!important; background:linear-gradient(130deg,#191b2c,#12121d)!important; box-shadow:0 3px 12px rgba(24,15,43,.15)!important; color:#fff!important; overflow:visible!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-clock-heading{gap:3px!important;margin-bottom:9px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-clock-heading strong{font-size:13px!important;line-height:1.25!important;letter-spacing:.015em!important;color:#f5d9a2!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-clock-heading small{font-size:11px!important;line-height:1.35!important;color:#f2eef5!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-clock-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px!important;width:100%!important;overflow:visible!important;} #ccds-modal#ccds-modal.ccds-modern button.ccds-clock-slot{ display:flex!important;align-items:center!important;justify-content:center!important; position:relative!important;min-width:0!important;min-height:43px!important; height:43px!important;width:100%!important;padding:4px 2px!important; font-size:13px!important;font-weight:750!important;line-height:1.1!important; touch-action:manipulation!important;-webkit-tap-highlight-color:transparent; border-radius:9px!important;white-space:nowrap!important; } #ccds-modal#ccds-modal.ccds-modern button.ccds-clock-slot.is-current{ outline:2px solid #f6d48c!important;outline-offset:1px!important; box-shadow:inset 0 0 0 2px #b68a41!important; } #ccds-modal#ccds-modal.ccds-modern button.ccds-clock-slot.is-filled{background:#213e33!important;border-color:#67a989!important;color:#fff!important;} #ccds-modal#ccds-modal.ccds-modern button.ccds-clock-slot:focus-visible{outline:3px solid #ffde99!important;outline-offset:2px!important;} @media(max-width:800px){ /* Phone layout: artwork above, numbered photos below, then other settings. The inspector is scrollable but the selector stays at its top. */ #ccds-modal#ccds-modal.ccds-modern.ccds-has-photo-slots .ccds-workspace{ grid-template-rows:minmax(115px,1fr) minmax(0,42%) 70px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-has-many-photo-slots .ccds-workspace{ grid-template-rows:minmax(115px,1fr) minmax(0,48%) 70px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-has-few-photo-slots .ccds-workspace{ grid-template-rows:minmax(115px,1fr) minmax(0,30%) 70px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-has-few-photo-slots .ccds-clock-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-has-photo-slots .ccds-inspector{ position:relative!important;overflow-y:auto!important;min-height:0!important; padding:8px 9px 11px!important;scrollbar-width:thin!important; overscroll-behavior:contain!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots{ position:sticky!important;top:0!important;z-index:10!important; width:100%!important;max-width:none!important; margin:0 0 9px!important;padding:9px 9px 10px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-clock-heading{margin-bottom:7px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-clock-heading strong{font-size:12px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-clock-heading small{font-size:10.5px!important;line-height:1.3!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-clock-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important;} #ccds-modal#ccds-modal.ccds-modern button.ccds-clock-slot{height:44px!important;min-height:44px!important;font-size:12px!important;} } @media(max-width:355px){ #ccds-modal#ccds-modal.ccds-modern .ccds-clock-grid{gap:4px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots{padding-inline:6px!important;} #ccds-modal#ccds-modal.ccds-modern button.ccds-clock-slot{font-size:11px!important;} } @media(max-width:800px) and (max-height:600px){ /* Very short screens still have a scrollable selector and a usable canvas. */ #ccds-modal#ccds-modal.ccds-modern.ccds-has-photo-slots .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-has-many-photo-slots .ccds-workspace{ grid-template-rows:minmax(90px,1fr) minmax(0,47%) 64px!important; } } @media(max-width:380px) and (max-height:700px){ /* Compact one line of instruction so the last photo row remains visible. */ #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots{ padding-top:7px!important;padding-bottom:7px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-clock-heading small{line-height:1.2!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-clock-grid{row-gap:4px!important;} } /* v3.9.2 original-product reference and easy single-photo upload */ #ccds-modal .ccds-product-original{display:flex;align-items:center;gap:9px;margin:0 0 7px;color:#f6eee4;font-weight:650;font-size:12px;line-height:1.3;min-width:0} #ccds-modal .ccds-product-original img{display:block;width:43px;height:43px;flex:0 0 43px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;box-sizing:border-box} #ccds-modal .ccds-product-original span{min-width:0;overflow-wrap:anywhere;max-height:44px;overflow:hidden} #ccds-modal.ccds-has-few-photo-slots .ccds-clock-grid:has(> :only-child){grid-template-columns:minmax(140px,1fr)!important} #ccds-modal.ccds-has-few-photo-slots .ccds-clock-grid:has(> :only-child) button.ccds-clock-slot{min-height:48px!important} @media(max-width:800px){#ccds-modal .ccds-product-original img{width:35px;height:35px;flex-basis:35px}#ccds-modal .ccds-product-original{font-size:11px}#ccds-modal .ccds-clock-slots{scroll-margin-top:6px}} /* 3.9.3 — original product reference and product-specific customer editing */ #ccds-modal.ccds-modern .ccds-product-card{display:flex!important;gap:14px!important;flex:0 0 auto!important;min-height:84px!important;padding:10px 15px!important;background:#fff!important;border-bottom:1px solid #e6dff2!important;align-items:center!important;box-sizing:border-box!important} #ccds-modal.ccds-modern .ccds-product-card[hidden]{display:none!important} #ccds-modal.ccds-modern .ccds-product-card-image{flex:0 0 74px!important;width:74px!important;height:74px!important;position:relative!important;border-radius:13px!important;background:#faf8f6!important;overflow:hidden!important;border:1px solid #eee8e2!important} #ccds-modal.ccds-modern .ccds-product-card-image img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important} #ccds-modal.ccds-modern .ccds-product-card-details{display:flex!important;flex-direction:column!important;gap:5px!important;min-width:0!important;flex:1!important;align-items:flex-start!important} #ccds-modal.ccds-modern .ccds-product-card-details strong{font-size:13px!important;line-height:1.35!important;color:#231b31!important;font-weight:800!important} #ccds-modal.ccds-modern .ccds-product-card-details span{font-size:11px!important;color:#6b6275!important;line-height:1.35!important} #ccds-modal.ccds-modern .ccds-product-card-details button{font-size:12px!important;padding:8px 12px!important;border:1px solid #ded3ee!important;border-radius:9px!important;background:#faf6ff!important;color:#49216a!important;cursor:pointer!important} #ccds-modal.ccds-modern .ccds-engraving-on-product{display:none} #ccds-modal.ccds-modern .ccds-product-requirements{background:linear-gradient(145deg,#fffdf9,#f6f0ff)!important;border:1px solid #e9d9f4!important;border-radius:16px!important;padding:17px!important;margin:0 0 14px!important;box-shadow:0 4px 20px #2a133312!important} #ccds-modal.ccds-modern .ccds-product-requirements[hidden]{display:none!important} #ccds-modal.ccds-modern .ccds-product-requirements .ccds-required-kicker{font-size:10px!important;font-weight:900!important;color:#8d5eb3!important;letter-spacing:1.2px!important;margin:0 0 11px!important} #ccds-modal.ccds-modern .ccds-product-requirements label{display:block!important;font-size:14px!important;font-weight:850!important;color:#32203e!important;margin-bottom:9px!important} #ccds-modal.ccds-modern .ccds-product-requirements label span{color:#a32948!important} #ccds-modal.ccds-modern #ccds-quick-text{box-sizing:border-box!important;display:block!important;width:100%!important;min-height:52px!important;background:#fff!important;border:2px solid #c9b1de!important;border-radius:11px!important;padding:11px 13px!important;font:600 16px/1.4 system-ui,sans-serif!important;color:#1e1831!important;outline-offset:2px!important} #ccds-modal.ccds-modern #ccds-quick-text:focus{border-color:#713ca6!important;outline:2px solid #d1b6e6!important} #ccds-modal.ccds-modern .ccds-quick-count{font-size:11px!important;color:#79658b!important;text-align:right!important;padding:6px 1px 9px!important} #ccds-modal.ccds-modern .ccds-quick-fonts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important} #ccds-modal.ccds-modern .ccds-quick-fonts button{font-size:12px!important;font-weight:700!important;min-height:42px!important;border:1px solid #d6c7df!important;border-radius:10px!important;color:#49315a!important;background:#fff!important;cursor:pointer!important} #ccds-modal.ccds-modern .ccds-quick-fonts button.is-selected{background:#4b206d!important;color:#fff!important;border-color:#4b206d!important} #ccds-modal.ccds-modern .ccds-engraving-guide{font-size:11px!important;line-height:1.6!important;color:#776d85!important;margin:12px 0 0!important} /* Text-only products open directly on their actual WooCommerce product picture. Export remains the separate transparent print canvas. */ #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card{display:flex!important;flex:1 1 0!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;min-height:0!important;overflow:auto!important;background:radial-gradient(circle at center,#fffdfa,#e8e2f0 78%)!important;padding:12px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card-image{flex:1 1 auto!important;width:min(100%,570px)!important;height:auto!important;min-height:0!important;aspect-ratio:1/1!important;max-height:min(67svh,560px)!important;margin:auto!important;background:#fffdf9!important;border:1px solid #e8e1dd!important;border-radius:18px!important;box-shadow:0 9px 35px #2a1e4014!important;overflow:hidden!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card-details{flex:0 0 auto!important;align-self:center!important;width:min(100%,570px)!important;max-height:none!important;gap:5px!important;padding:7px 4px 4px!important;box-sizing:border-box!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card-details strong{font-size:14px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-engraving-on-product:not([hidden]){display:block!important;position:absolute!important;left:50%!important;top:57%!important;transform:translate(-50%,-50%) rotate(-90deg)!important;white-space:nowrap!important;max-width:48%!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:clamp(9px,2.1vw,16px)!important;font-weight:700!important;letter-spacing:.02em!important;line-height:1.2!important;text-shadow:0 1px 1px #2228!important;pointer-events:none!important} #ccds-modal.ccds-modern.ccds-profile-engraving:not(.ccds-view-artwork) .ccds-stage-area{display:none!important} #ccds-modal.ccds-modern.ccds-profile-engraving:not(.ccds-view-artwork) .ccds-stage-bottom{display:none!important} #ccds-modal.ccds-modern.ccds-profile-engraving.ccds-view-artwork .ccds-product-card{flex:0 0 auto!important;flex-direction:row!important;min-height:78px!important;padding:9px!important;} #ccds-modal.ccds-modern.ccds-profile-engraving.ccds-view-artwork .ccds-product-card-image{flex:0 0 72px!important;max-width:72px!important;height:72px!important;min-height:0!important;border-radius:10px!important} #ccds-modal.ccds-modern.ccds-profile-engraving.ccds-view-artwork .ccds-product-card-details{flex:1!important;width:auto!important;align-self:center!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-tool-rail .ccds-rail-btn:not(#ccds-add-text):not(#ccds-undo):not(#ccds-redo), #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-tool-rail .ccds-rail-more, #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-tool-rail .ccds-rail-sep{display:none!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-inspector>.ccds-option-panel, #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-inspector>.ccds-empty-selection{display:none!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-canvas-toolbar #ccds-crop-top, #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-canvas-toolbar #ccds-shapes-top{display:none!important} @media(max-width:800px){ #ccds-modal.ccds-modern .ccds-product-card{padding:7px 10px!important;min-height:68px!important;gap:9px!important} #ccds-modal.ccds-modern .ccds-product-card-image{width:56px!important;height:56px!important;flex-basis:56px!important} #ccds-modal.ccds-modern .ccds-product-card-details strong{font-size:11px!important} #ccds-modal.ccds-modern .ccds-product-card-details span{font-size:10px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card{padding:7px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card-image{max-height:calc(100% - 64px)!important;width:min(100%,260px)!important;aspect-ratio:1/1!important;} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card-details{max-width:350px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card-details strong{font-size:11px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-card-details span{display:none!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-inspector{padding:8px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-requirements{padding:10px!important;margin:0!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-requirements label{font-size:12px!important;margin:0 0 5px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-product-requirements .ccds-required-kicker{display:none!important} #ccds-modal.ccds-modern.ccds-profile-engraving #ccds-quick-text{min-height:45px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-engraving-guide{font-size:10px!important;margin-top:6px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-quick-fonts button{min-height:34px!important} #ccds-modal.ccds-modern.ccds-profile-engraving .ccds-workspace{grid-template-rows:minmax(150px,1fr) minmax(180px,37%) 64px!important} } @media(max-width:360px){#ccds-modal.ccds-modern.ccds-profile-engraving .ccds-workspace{grid-template-rows:minmax(120px,1fr) minmax(155px,40%) 62px!important}} /* Override inherited high-specificity stage-area grid rule for text-only templates. */ #ccds-modal#ccds-modal.ccds-modern.ccds-profile-engraving:not(.ccds-view-artwork) .ccds-main>.ccds-stage-area{display:none!important;visibility:hidden!important;flex:0 0 0!important;height:0!important;min-height:0!important;max-height:0!important;padding:0!important;overflow:hidden!important} #ccds-modal#ccds-modal.ccds-modern.ccds-profile-engraving:not(.ccds-view-artwork) .ccds-main>.ccds-stage-bottom{display:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-profile-engraving.ccds-view-artwork .ccds-main>.ccds-stage-area{display:flex!important;visibility:visible!important;flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-profile-engraving .ccds-main>.ccds-product-card{flex:1 1 auto!important;min-height:0!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-profile-engraving.ccds-view-artwork .ccds-main>.ccds-product-card{flex:0 0 auto!important;min-height:75px!important} /* v3.9.4 - premium product-aware layout: keep ORIGINAL product visible while editing artwork. */ #ccds-modal#ccds-modal.ccds-modern.ccds-profile-photos .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-profile-mixed .ccds-main>.ccds-product-card { flex:0 0 clamp(155px, 34%, 310px)!important; min-height:155px!important; padding:12px 18px!important; gap:clamp(12px,2vw,24px)!important; background:linear-gradient(125deg,#fffefb,#faf5ff)!important; border-bottom:1px solid #e0d5ec!important; box-shadow:0 4px 16px #26153b0b!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-profile-photos .ccds-product-card-image, #ccds-modal#ccds-modal.ccds-modern.ccds-profile-mixed .ccds-product-card-image { flex:0 0 clamp(136px,31%,280px)!important;width:clamp(136px,31%,280px)!important; height:100%!important;min-height:135px!important; border-radius:16px!important;background:#fff!important; box-shadow:0 8px 26px #201c3020!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-original-label{ display:block!important;font-size:10px!important;font-weight:900!important; letter-spacing:1.1px!important;color:#8862a2!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-print-note{ display:block!important;padding:7px 10px!important;font-size:11px!important; border:1px solid #e4d8f0!important;border-radius:10px!important; background:#fff!important;color:#573b78!important;line-height:1.45!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details strong{ font-size:clamp(12px,1.25vw,17px)!important;max-width:62ch!important; display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important; overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-profile-photos .ccds-main>.ccds-stage-area, #ccds-modal#ccds-modal.ccds-modern.ccds-profile-mixed .ccds-main>.ccds-stage-area{ flex:1 1 0!important;min-height:0!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-no-product-image .ccds-product-card-image{background:repeating-conic-gradient(#eee7f3 0% 25%,white 0% 50%) 50%/18px 18px!important;} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern.ccds-profile-photos .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-profile-mixed .ccds-main>.ccds-product-card{ flex:0 0 min(30%,155px)!important;min-height:94px!important; padding:6px 9px!important;gap:9px!important;align-items:center!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-profile-photos .ccds-product-card-image, #ccds-modal#ccds-modal.ccds-modern.ccds-profile-mixed .ccds-product-card-image{ flex:0 0 clamp(78px,24%,115px)!important; width:clamp(78px,24%,115px)!important;height:100%!important;min-height:82px!important; border-radius:12px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details{gap:3px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-original-label{font-size:9px!important;letter-spacing:.4px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details strong{font-size:11px!important;-webkit-line-clamp:2!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details span:not(.ccds-original-label):not(.ccds-print-note){font-size:10px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-print-note{font-size:9px!important;padding:4px 6px!important;} } @media(max-width:360px){ #ccds-modal#ccds-modal.ccds-modern.ccds-profile-photos .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-profile-mixed .ccds-main>.ccds-product-card{flex-basis:110px!important;min-height:90px!important;} #ccds-modal#ccds-modal.ccds-modern .ccds-print-note{display:none!important;} } #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details .ccds-reset-artwork{ min-height:32px!important;border:1px solid #d2bfdb!important;color:#64385e!important; background:#fff!important;border-radius:9px!important;font-size:11px!important;padding:5px 10px!important; font-weight:750!important;cursor:pointer!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details .ccds-reset-artwork[hidden]{display:none!important;} @media(max-width:800px){#ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details .ccds-reset-artwork{padding:4px 8px!important;min-height:26px!important;font-size:10px!important;}} /* The print preview itself follows the actual editable window, not a generic rectangle. */ #ccds-modal#ccds-modal.ccds-modern[data-print-shape="circle"] .ccds-stage { border-radius:50%!important; box-shadow:0 8px 32px #281e3840,0 0 0 5px #d8b46d,0 0 0 9px #fff8e8!important; } #ccds-modal#ccds-modal.ccds-modern[data-print-shape="heart"] .ccds-stage, #ccds-modal#ccds-modal.ccds-modern[data-print-shape="mask"] .ccds-stage { background-color:transparent!important; } #ccds-modal#ccds-modal.ccds-modern[data-print-shape="heart"] .ccds-stage .ccds-print-region, #ccds-modal#ccds-modal.ccds-modern[data-print-shape="mask"] .ccds-stage .ccds-print-region { filter:drop-shadow(0 5px 8px #271c3840); } /* 3.9.6 Product-on-phone editing: visual shell is UI ONLY. Never exported. */ #ccds-modal#ccds-modal .ccds-phone-controls{display:flex!important;flex:0 0 auto!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px;background:#fff!important;padding:7px 12px!important;border-bottom:1px solid #e4d9ed!important} #ccds-modal#ccds-modal .ccds-phone-controls[hidden]{display:none!important} #ccds-modal .ccds-phone-switch{display:flex;background:#f1ebf7;border-radius:10px;padding:3px;gap:3px;flex:0 0 auto} #ccds-modal .ccds-phone-switch button{border:0!important;border-radius:8px!important;background:transparent!important;color:#523f66!important;padding:7px 12px!important;font-size:12px!important;font-weight:800!important;min-height:36px!important} #ccds-modal .ccds-phone-switch button[aria-pressed="true"]{background:#472069!important;color:white!important;box-shadow:0 3px 9px #34144721!important} #ccds-modal #ccds-phone-explain{color:#655675;font-size:11px;font-weight:650;line-height:1.35;flex:1 1 145px;min-width:0} #ccds-modal .ccds-print-help{flex:0 1 auto;position:relative;color:#653b78;font-size:11px} #ccds-modal .ccds-print-help summary{cursor:pointer;font-weight:800;list-style:revert} #ccds-modal .ccds-print-help p{margin:5px 0 2px;line-height:1.4;max-width:650px} #ccds-modal.ccds-phone-product .ccds-stage-wrap{background:radial-gradient(circle,#fff 10%,#f4edf7 80%)} #ccds-modal .ccds-stage.ccds-generic-phone{border-radius:clamp(21px,7%,48px)!important;overflow:hidden!important;box-shadow:0 14px 30px #21152c40,0 0 0 4px #b0adc4,0 0 0 9px #242733!important;background-color:#fff!important} #ccds-modal .ccds-stage.ccds-generic-phone::after{content:'';pointer-events:none;position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 5px #ffffffb2,inset 0 0 17px #03030952;z-index:3} #ccds-modal .ccds-stage.ccds-generic-phone-print{border-radius:2px!important;box-shadow:0 6px 24px #37244122,0 0 0 1px #c7bbcf!important} #ccds-modal.ccds-phone-product .ccds-main>.ccds-product-card{flex:0 0 100px!important;min-height:88px!important;padding:6px 10px!important;gap:9px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-image{width:85px!important;height:82px!important;min-height:0!important;flex:0 0 85px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details{gap:2px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details .ccds-print-note{padding:2px 5px!important;font-size:10px!important} @media(max-width:800px){ #ccds-modal#ccds-modal .ccds-phone-controls{gap:5px;padding:6px 8px!important} #ccds-modal .ccds-phone-switch{width:100%;justify-content:center;gap:3px} #ccds-modal .ccds-phone-switch button{flex:1!important;padding:7px 5px!important;min-height:35px!important} #ccds-modal #ccds-phone-explain{flex:1 1 100%;text-align:center;font-size:10px} #ccds-modal .ccds-print-help{width:100%;text-align:center} #ccds-modal .ccds-print-help summary{font-size:10px} #ccds-modal .ccds-print-help p{text-align:left;font-size:10px} #ccds-modal.ccds-phone-product .ccds-main>.ccds-product-card{flex:0 0 86px!important;min-height:80px!important;padding:4px 7px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-image{width:70px!important;height:74px!important;flex:0 0 70px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details .ccds-print-note{display:none!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details #ccds-reference-guidance{display:none!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details .ccds-reset-artwork{min-height:25px!important;padding:3px 7px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-stage-area{min-height:170px!important;flex:1 1 auto!important} } /* 3.9.7 – premium mobile live preview refinements */ #ccds-modal#ccds-modal .ccds-phone-controls{background:linear-gradient(180deg,#fff,#faf6ff)!important;border-bottom:1px solid #e8dff0!important;padding:8px 12px!important;gap:6px!important} #ccds-modal #ccds-phone-explain{display:inline-flex!important;align-items:center;justify-content:center;border-radius:999px;background:#f3ecfb;color:#5b2c7f;font-size:11px;font-weight:800;padding:6px 10px;flex:0 0 auto} #ccds-modal .ccds-print-help{margin-left:auto} #ccds-modal.ccds-phone-product .ccds-main>.ccds-product-card{background:linear-gradient(135deg,#fffefc,#f7f1fd)!important;border-bottom:1px solid #e8ddf2!important;box-shadow:0 6px 18px rgba(46,22,77,.08)!important} #ccds-modal.ccds-phone-product .ccds-stage-wrap{background:radial-gradient(circle at 50% 40%,#fff 0%,#f5eef9 82%)!important} #ccds-modal.ccds-phone-product .ccds-stage{width:min(100%,290px)!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload{background:linear-gradient(135deg,#141726,#12101d)!important;border:1px solid #3f3952!important;padding:12px!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload .ccds-clock-heading{margin-bottom:8px!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload .ccds-clock-grid{grid-template-columns:minmax(0,1fr)!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload button.ccds-clock-slot{min-height:52px!important;height:auto!important;font-size:15px!important;border-radius:14px!important;background:linear-gradient(180deg,#53307b,#3f225f)!important;border-color:#7e5ca8!important;color:#fff!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload button.ccds-clock-slot.is-filled{background:linear-gradient(180deg,#315a4a,#234036)!important;border-color:#6bb18a!important} @media(max-width:800px){ #ccds-modal#ccds-modal .ccds-phone-controls{padding:7px 8px!important;gap:5px!important} #ccds-modal .ccds-phone-switch{width:100%!important} #ccds-modal .ccds-phone-switch button{min-height:38px!important;font-size:13px!important} #ccds-modal #ccds-phone-explain{order:2!important;flex:1 1 auto!important;padding:5px 10px!important;font-size:10px!important} #ccds-modal .ccds-print-help{display:none!important} #ccds-modal.ccds-phone-product .ccds-main>.ccds-product-card{flex:0 0 104px!important;min-height:100px!important;padding:7px 9px!important;gap:10px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-image{width:92px!important;height:92px!important;flex:0 0 92px!important;border-radius:14px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details strong{font-size:13px!important;line-height:1.25!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details .ccds-original-label{font-size:10px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details .ccds-print-note, #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details #ccds-reference-guidance{display:none!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-details .ccds-reset-artwork{min-height:28px!important;padding:4px 9px!important;font-size:10px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-stage-area{min-height:270px!important;height:clamp(270px,44svh,390px)!important;padding:6px 8px 8px!important} #ccds-modal.ccds-phone-product .ccds-stage{width:min(100%,248px)!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload{margin:10px 0 6px!important;padding:10px!important;border-radius:16px!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload .ccds-clock-heading strong{font-size:14px!important;color:#f5dfb2!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload .ccds-clock-heading small{font-size:11px!important;color:#ece6f5!important} } @media(max-width:380px){ #ccds-modal.ccds-phone-product .ccds-main>.ccds-product-card{flex:0 0 96px!important;min-height:92px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-product-card-image{width:84px!important;height:84px!important;flex-basis:84px!important} #ccds-modal.ccds-phone-product .ccds-main .ccds-stage-area{min-height:245px!important;height:clamp(245px,42svh,340px)!important} #ccds-modal.ccds-phone-product .ccds-stage{width:min(100%,228px)!important} } /* 3.9.8 - Cleaner mobile product-first studio. Pure editor UI; WooCommerce products untouched. */ #ccds-modal .ccds-case-empty{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;gap:3px;color:#5d4a72;text-align:center;text-shadow:0 1px 2px #ffffff77} #ccds-modal .ccds-case-empty[hidden]{display:none!important} #ccds-modal .ccds-case-empty>span{width:48px;height:48px;display:grid;place-items:center;background:#eee4f6b3;border:1px solid #ded0e6;border-radius:50%;font-size:30px;font-weight:500} #ccds-modal .ccds-case-empty strong{font-size:13px;font-weight:850;line-height:1.35} #ccds-modal .ccds-case-empty small{font-size:10px;font-weight:650} #ccds-modal.ccds-phone-product .ccds-stage.ccds-generic-phone::before{content:'';position:absolute;z-index:5;left:6%;top:3.4%;width:22%;height:13%;border-radius:13px;background:linear-gradient(135deg,#171b25,#545c73);border:3px solid #b5b3c4;box-shadow:inset 0 1px 8px #0505086a,0 2px 8px #1b152a45;pointer-events:none} #ccds-modal.ccds-phone-print-mode .ccds-stage.ccds-generic-phone::before{display:none} #ccds-modal.ccds-phone-product .ccds-product-card-details .ccds-original-label{display:none!important} #ccds-modal.ccds-phone-product .ccds-product-card-details #ccds-reference-guidance{display:none!important} #ccds-modal.ccds-phone-product .ccds-product-card-details .ccds-print-note{display:none!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload .ccds-product-original{display:none!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload .ccds-clock-heading small{display:none!important} #ccds-modal.ccds-phone-product .ccds-phone-controls .ccds-print-help{display:none!important} #ccds-modal.ccds-phone-product .ccds-phone-controls #ccds-phone-explain{display:none!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload{margin:0!important;background:#fff!important;border:0!important;border-radius:13px!important;box-shadow:none!important;padding:6px 10px!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload .ccds-clock-heading{margin:0 0 6px!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload .ccds-clock-heading strong{color:#322044!important;font-size:13px!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload button.ccds-clock-slot{min-height:42px!important;height:42px!important;font-size:13px!important;border-radius:11px!important;background:linear-gradient(110deg,#45236a,#7839ad)!important;border:0!important;color:white!important} #ccds-modal.ccds-phone-product .ccds-clock-slots.ccds-single-slot-upload button.ccds-clock-slot.is-filled{background:linear-gradient(110deg,#285949,#1f8068)!important} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-workspace{grid-template-rows:minmax(0,1fr) minmax(93px,122px) 64px!important;overflow:hidden!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main{min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main>.ccds-product-card{flex:0 0 52px!important;height:52px!important;min-height:52px!important;padding:5px 12px!important;gap:8px!important;align-items:center!important;background:#fff!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main .ccds-product-card-image{width:42px!important;height:42px!important;flex:0 0 42px!important;min-height:42px!important;border-radius:9px!important;box-shadow:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main .ccds-product-card-details{gap:0!important;justify-content:center!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main .ccds-product-card-details strong{font-size:12px!important;line-height:1.25!important;-webkit-line-clamp:1!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-product-card-details .ccds-reset-artwork{display:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-phone-controls{display:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main>.ccds-stage-area{display:flex!important;flex:1 1 0!important;height:auto!important;min-height:160px!important;max-height:none!important;padding:3px 6px 5px!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:linear-gradient(160deg,#f6f2fa,#eee8f4)!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-stage-area #ccds-stage-wrap{flex:1 1 auto!important;width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;padding:0!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product #ccds-stage-space{margin:auto!important;flex:0 0 auto!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-stage{flex:0 0 auto!important;max-width:none!important;border-radius:30px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-stage-bottom{display:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector{min-height:0!important;overflow-y:auto!important;padding:4px 9px!important;background:#fff!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector>.ccds-clock-slots{position:static!important;top:auto!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector .ccds-clock-heading{margin-bottom:4px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-tool-rail{height:64px!important;min-height:64px!important;max-height:64px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-tool-rail .ccds-rail-btn{height:59px!important;min-height:59px!important;max-height:59px!important} #ccds-modal.ccds-phone-product .ccds-stage.ccds-generic-phone::before{border-radius:10px!important} } /* Ensure a single-photo upload/replace button uses the whole row, not a five-slot grid. */ #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector>.ccds-clock-slots.ccds-single-slot-upload .ccds-clock-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:0!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector>.ccds-clock-slots.ccds-single-slot-upload button.ccds-clock-slot{width:100%!important;min-height:44px!important;height:44px!important;font-size:14px!important;padding:8px 10px!important;white-space:normal!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector>.ccds-clock-slots.ccds-single-slot-upload .ccds-clock-heading strong{color:#372349!important;font-size:12px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product #ccds-clear-select{display:none!important} /* Final selector priority corrections for legacy theme/mobile rules. */ #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main .ccds-product-card .ccds-product-card-details .ccds-original-label, #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main .ccds-product-card .ccds-product-card-details .ccds-print-note, #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-main .ccds-product-card .ccds-product-card-details #ccds-reference-guidance{display:none!important} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector>.ccds-clock-slots.ccds-single-slot-upload{position:static!important;top:auto!important;display:block!important;width:100%!important;margin:0!important;padding:8px!important;background:#fff!important;box-shadow:none!important;border:1px solid #e9e0f0!important;border-radius:14px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector .ccds-option-panel[data-panel=photo] .ccds-easy-photo, #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector .ccds-option-panel[data-panel=photo] #ccds-template-section{display:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector .ccds-option-panel[data-panel=photo] #ccds-upload-feedback:not(.is-error):not(.is-working):not(.is-success){display:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-inspector .ccds-option-panel[data-panel=photo]{background:transparent!important;padding:0!important;min-height:0!important} } @media(max-width:380px){ #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-workspace{grid-template-rows:minmax(0,1fr) minmax(85px,105px) 58px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-tool-rail{height:58px!important;min-height:58px!important;max-height:58px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-phone-product .ccds-tool-rail .ccds-rail-btn{height:54px!important;min-height:54px!important;max-height:54px!important} } /* =================================================================== Chethu Creations v4.0.0-beta.1 — Original-product design preview. These changes do not affect image assets, checkout or production PNG. =================================================================== */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage.ccds-product-reference-stage { background-color:#fff!important; background-position:center!important; background-size:100% 100%!important; background-repeat:no-repeat!important; overflow:hidden!important; border-radius:16px!important; box-shadow:0 16px 38px #23133226,0 0 0 1px #e7ddec!important; } /* The photo-window mask clips ONLY the uploaded design, never the unchanged product body. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage.ccds-product-reference-stage .ccds-print-region { box-shadow:0 0 0 1px #faf6ff96,0 0 0 2px #5528786e!important; background:transparent!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product:not(.ccds-beta-print-mode) .ccds-stage { border-radius:15px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage.ccds-product-reference-stage .ccds-case-empty { inset:auto 9% 5% 9%!important; min-height:58px!important; padding:8px 12px!important; flex-direction:row!important; justify-content:center!important; gap:10px!important; text-align:left!important; color:#392049!important; background:#fffef9ed!important; border:1px solid #dcc5e1!important; border-radius:14px!important; box-shadow:0 7px 24px #2e173e29!important; touch-action:manipulation!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-case-empty>span { width:37px!important;height:37px!important;flex:0 0 37px!important; font-size:23px!important;background:#f5e6f4!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-case-empty strong{font-size:12px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-case-empty small{display:none!important} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-phone-controls { flex:0 0 auto!important; background:#fff!important; padding:5px 10px!important; border-bottom:1px solid #e5daeb!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-phone-switch button { min-height:34px!important; font-size:12px!important; white-space:nowrap!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-phone-switch button[aria-pressed=true]{background:#4d245c!important} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-print-note { color:#5b4360!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card { flex:0 0 65px!important;height:65px!important;min-height:65px!important; padding:6px 11px!important;align-items:center!important;gap:10px!important; background:#fff!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-product-card-image { flex:0 0 50px!important;width:50px!important;height:50px!important;min-height:50px!important; border-radius:10px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-product-card-details { gap:2px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-product-card-details strong { font-size:12px!important;-webkit-line-clamp:1!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-original-label, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-print-note, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product #ccds-reference-guidance { display:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-stage-area { display:flex!important;flex:1 1 0!important;min-height:0!important;height:auto!important; max-height:none!important;align-items:center!important;justify-content:center!important; background:radial-gradient(circle at center,#fdfcff,#eee8f5)!important; overflow:hidden!important;padding:6px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage-area .ccds-stage-wrap { height:100%!important;max-height:100%!important;min-height:0!important; display:flex!important;align-items:center!important;justify-content:center!important; padding:4px!important;overflow:auto!important; } @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-workspace { grid-template-rows:minmax(200px,1fr) minmax(100px,29%) 62px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card { flex:0 0 50px!important;height:50px!important;min-height:50px!important;max-height:50px!important; padding:3px 8px!important;box-shadow:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-product-card-image { flex:0 0 43px!important;width:43px!important;height:43px!important;min-height:43px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-product-card-details strong { font-size:11px!important;line-height:1.25!important;-webkit-line-clamp:1!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-product-card .ccds-reset-artwork { display:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-phone-controls { padding:3px 8px!important;gap:0!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product #ccds-phone-explain, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-print-help {display:none!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-phone-switch { width:100%!important;gap:3px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-phone-switch button { flex:1 1 0!important;min-width:0!important;min-height:34px!important; padding:6px 4px!important;font-size:11px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-stage-area { flex:1 1 0!important;min-height:120px!important;height:auto!important;max-height:none!important; padding:3px 5px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage { max-width:none!important; border-radius:10px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-case-empty { min-height:48px!important; padding:5px 8px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-case-empty strong {font-size:11px!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-inspector { min-height:0!important;overflow-y:auto!important;padding:6px 8px!important; } } @media(max-width:360px){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-workspace{ grid-template-rows:minmax(130px,1fr) minmax(85px,32%) 56px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card{ flex-basis:46px!important;height:46px!important;min-height:46px!important; } } /* v4.0.0-beta.2 | ONE native photo picker on the original-product preview. No print/export/WooCommerce order selectors are modified here. */ #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-tool-rail .ccds-upload-tool, #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-easy-photo, #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-clock-slots.ccds-single-slot-upload { display:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-option-panel[data-panel="photo"] > .ccds-section:not(#ccds-template-section){display:none!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow.ccds-upload-has-error .ccds-option-panel[data-panel="photo"] > .ccds-section.ccds-upload-feedback-section:not(#ccds-template-section) {display:block!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow.ccds-upload-has-error #ccds-upload-feedback{display:block!important;color:#8a172a!important;font-size:12px!important;padding:8px!important;} /* The control sits ON the printable patch when empty; after upload it shrinks to a discrete replace badge so the customer's photograph is not covered. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-stage .ccds-case-empty { inset:auto!important; left:var(--ccds-photo-center-x,50%)!important; top:var(--ccds-photo-center-y,50%)!important; bottom:auto!important;right:auto!important; transform:translate(-50%,-50%)!important; width:min(78%,174px)!important; min-width:98px!important; height:auto!important;min-height:48px!important; padding:8px!important; display:flex!important;flex-direction:row!important; background:rgba(255,255,255,.92)!important; color:#3a1c4f!important;border:1px solid #d6bde0!important; border-radius:14px!important; box-shadow:0 4px 15px #24112a30!important; text-shadow:none!important; z-index:8!important; touch-action:manipulation!important; isolation:isolate!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-stage .ccds-case-empty[hidden]{display:none!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-stage .ccds-case-empty>span{ display:grid!important;place-items:center!important; flex:0 0 30px!important;width:30px!important;height:30px!important; font-size:22px!important;line-height:1!important; background:#f5e8fa!important;border-radius:50%!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-stage .ccds-case-empty strong{font-size:11px!important;line-height:1.25!important;white-space:normal!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-stage .ccds-case-empty.ccds-has-uploaded-photo { top:auto!important;left:auto!important;right:7px!important;bottom:7px!important; transform:none!important;min-width:0!important;width:auto!important; height:31px!important;min-height:31px!important; padding:3px 8px!important;border-radius:10px!important; background:#fffdf9eb!important;gap:4px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-stage .ccds-case-empty.ccds-has-uploaded-photo>span{width:20px!important;height:20px!important;flex-basis:20px!important;font-size:14px!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-case-empty.ccds-has-uploaded-photo strong{font-size:10px!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-case-empty .ccds-native-photo-input { position:absolute!important;inset:0!important;width:100%!important;height:100%!important; opacity:0!important;cursor:pointer!important;z-index:10!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow.ccds-beta-product .ccds-stage.ccds-product-reference-stage .ccds-print-region { background:transparent!important; box-shadow:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow.ccds-beta-empty .ccds-stage.ccds-product-reference-stage .ccds-print-region { outline:1px dashed #b38ac49c!important; outline-offset:0!important; } @media(max-width:800px){ /* No dead/empty upload section: the original product occupies the gained space. */ #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow[data-active-tool="photo"] .ccds-workspace{ grid-template-rows:minmax(0,1fr) 0px 60px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow[data-active-tool="photo"] .ccds-inspector { height:0!important;min-height:0!important;padding:0!important;overflow:hidden!important;border:0!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-main>.ccds-stage-area {min-height:160px!important;padding:4px!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-stage-area .ccds-stage-wrap{padding:3px!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-stage .ccds-case-empty{ min-width:94px!important;width:min(65%,145px)!important;min-height:43px!important;padding:5px 7px!important; } } /* v4.0.0-beta.3 — exact circular window + compact, aligned mobile controls. Applies to the editor only. Never modifies WooCommerce photos or print PNGs. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-beta-gold-circle-frame:not(.ccds-beta-print-mode) .ccds-stage.ccds-product-reference-stage { border:0!important; border-radius:13px!important; box-shadow:0 8px 22px #35234022,0 0 0 1px #dfd4e7!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-beta-gold-circle-frame:not(.ccds-beta-print-mode) .ccds-print-region { background:transparent!important; border:0!important; outline:0!important; box-shadow:none!important; /* Keep the customer's artwork inside the INSIDE edge of the gold rim. */ clip-path:ellipse(50% 50% at 50% 50%)!important; -webkit-clip-path:ellipse(50% 50% at 50% 50%)!important; } /* Put the single replace control in the unused top-right margin of the square product photo instead of obscuring the frame and print artwork. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow:not(.ccds-beta-print-mode) .ccds-stage .ccds-case-empty.ccds-has-uploaded-photo { top:8px!important;right:8px!important;bottom:auto!important;left:auto!important; transform:none!important;min-height:35px!important;height:35px!important; width:auto!important;max-width:130px!important; padding:3px 8px!important;gap:5px!important; border:1px solid #e2d7e7!important;border-radius:11px!important; background:#fffefbf5!important;box-shadow:0 3px 12px #24112a24!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow:not(.ccds-beta-print-mode) .ccds-stage .ccds-case-empty.ccds-has-uploaded-photo strong { font-size:11px!important;white-space:nowrap!important;line-height:1!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow:not(.ccds-beta-print-mode) .ccds-stage .ccds-case-empty.ccds-has-uploaded-photo>span { width:23px!important;height:23px!important;flex:0 0 23px!important; } @media screen and (max-width:800px) { #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-workspace { grid-template-rows:minmax(0,1fr) minmax(96px,138px) 76px!important; } /* The photo-upload tab already has one button ON the product. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow[data-active-tool="photo"] .ccds-workspace { grid-template-rows:minmax(0,1fr) 0px 76px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail { height:76px!important;min-height:76px!important;max-height:76px!important; padding:4px 8px 6px!important;align-items:stretch!important; overflow-y:hidden!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail .ccds-rail-btn { height:64px!important;min-height:64px!important;max-height:64px!important; flex:0 0 68px!important;width:68px!important;min-width:68px!important; gap:4px!important;padding:6px 3px!important;align-self:center!important; justify-content:center!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail .ccds-rail-btn svg { width:22px!important;height:22px!important;flex:0 0 22px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail .ccds-rail-btn span { display:block!important;font-size:11px!important;line-height:14px!important; max-width:100%!important;overflow:visible!important;white-space:nowrap!important; } /* Align the photo-fit and quick-position controls on a compact single panel rather than allowing either to push the live product off the screen. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-inspector[data-tool="select"] { min-height:0!important;max-height:138px!important;overflow-y:auto!important; padding:6px 11px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-inspector[data-tool="select"] .ccds-photo-fit { padding:6px 9px!important;margin:0 0 6px!important;border-radius:11px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-inspector[data-tool="select"] .ccds-photo-fit strong { margin:0 0 5px!important;font-size:12px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-inspector[data-tool="select"] .ccds-fit-buttons { margin:0!important;gap:6px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-inspector[data-tool="select"] .ccds-fit-buttons button { min-width:0!important;min-height:34px!important;height:34px!important; padding:4px 7px!important;font-size:12px!important;line-height:1.1!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-inspector[data-tool="select"] #ccds-quick-position-open { display:flex!important;align-items:center!important;justify-content:space-between!important; min-height:40px!important;height:40px!important;margin:0!important; padding:5px 10px!important;border-radius:10px!important; font-size:12px!important; } /* Avoid fake square outline around the untouched gold rim preview. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-beta-gold-circle-frame:not(.ccds-beta-print-mode) .ccds-stage .ccds-print-region { box-shadow:none!important;outline:none!important; } } @media screen and (max-width:800px) and (max-height:680px){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-workspace { grid-template-rows:minmax(0,1fr) minmax(72px,110px) 70px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow[data-active-tool="photo"] .ccds-workspace{ grid-template-rows:minmax(0,1fr) 0px 70px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail{height:70px!important;min-height:70px!important;max-height:70px!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail .ccds-rail-btn{height:60px!important;min-height:60px!important;max-height:60px!important;} } /* v4.0.0-beta.4: Original-product multi-photo proof, no floating rectangles. */ #ccds-modal .ccds-product-slot-view, #ccds-modal .ccds-product-slot-buttons { position:absolute!important;inset:0!important;width:100%!important;height:100%!important; border:0!important;background:transparent!important;box-shadow:none!important; } #ccds-modal .ccds-product-slot-view{z-index:5!important;pointer-events:none!important;object-fit:fill!important} /* Preview hardware (black rims, clock numerals and hands) must stay over imported photos. */ #ccds-modal.ccds-beta-product .ccds-overlay{z-index:6!important;} #ccds-modal .ccds-product-slot-buttons{z-index:7!important;pointer-events:none!important} #ccds-modal .ccds-product-slot-hotspot { position:absolute!important;display:flex!important;justify-content:center!important;align-items:center!important; padding:0!important;pointer-events:auto!important;background:transparent!important; border:1px dashed rgba(86,34,115,.30)!important;border-radius:3px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)!important; cursor:pointer!important;touch-action:manipulation!important; } #ccds-modal .ccds-product-slot-hotspot span { display:grid;place-items:center;min-width:23px;height:23px;padding:0 4px; border-radius:12px;background:#fffef3e5;color:#4b225d;font-size:11px;font-weight:800; box-shadow:0 2px 9px rgba(0,0,0,.17); } #ccds-modal .ccds-product-slot-hotspot.is-filled {border-color:transparent!important;box-shadow:none!important} #ccds-modal .ccds-product-slot-hotspot.is-filled span {opacity:.64;transform:scale(.80)} #ccds-modal .ccds-product-slot-hotspot:focus-visible{outline:3px solid #7d2da5!important;outline-offset:2px} #ccds-modal.ccds-product-multi-map:not(.ccds-beta-print-mode) .ccds-stage .ccds-print-region{ visibility:hidden!important;pointer-events:none!important; } #ccds-modal.ccds-product-multi-map .ccds-easy-photo, #ccds-modal.ccds-has-few-photo-slots.ccds-beta-product .ccds-easy-photo{ display:none!important; } #ccds-modal.ccds-product-multi-map .ccds-clock-slots .ccds-product-original{display:none!important} #ccds-modal.ccds-product-multi-map .ccds-clock-slots{padding:10px!important;margin:6px 9px!important} #ccds-modal.ccds-product-multi-map .ccds-clock-grid{gap:8px!important} #ccds-modal.ccds-product-multi-map .ccds-clock-grid button{min-height:42px!important} @media(max-width:800px){ #ccds-modal.ccds-product-multi-map .ccds-stage-area{padding:4px!important} #ccds-modal.ccds-product-multi-map .ccds-clock-slots .ccds-clock-heading{gap:4px!important} #ccds-modal.ccds-product-multi-map .ccds-clock-slots .ccds-clock-heading small{font-size:11px!important} #ccds-modal.ccds-product-multi-map .ccds-product-slot-hotspot span{min-width:26px;height:26px} } /* In product preview, the three/four numbered apertures ARE the upload buttons. Keep the fallback position selector in the printable-layout tab. */ #ccds-modal.ccds-product-multi-map .ccds-clock-grid{display:none!important} #ccds-modal.ccds-product-multi-map .ccds-clock-heading{margin:0!important} #ccds-modal.ccds-product-multi-map .ccds-clock-heading small{max-width:100%!important} @media(max-width:800px){ /* Numbered openings in the product ARE its photo uploader; do not duplicate. */ #ccds-modal#ccds-modal.ccds-modern.ccds-product-multi-map:not(.ccds-beta-print-mode) .ccds-clock-slots{display:none!important} } /* v4.0.0-beta.5 — 9/13-photo floral clock: full product visible on phones. The selector is a compact photo-position grid rather than a second product card covering the preview. Print artwork, slot coords and uploads unchanged. */ @media screen and (max-width:800px) { #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-workspace { display:grid!important; grid-template-rows:minmax(0,1fr) 144px 68px!important; min-height:0!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main { display:flex!important;flex-direction:column!important;min-height:0!important; height:100%!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main>.ccds-product-card { display:flex!important;flex:0 0 50px!important;min-height:50px!important;max-height:50px!important; height:50px!important;gap:8px!important;padding:3px 9px!important; border-bottom:1px solid #e9e2ee!important;background:#fff!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main .ccds-product-card-image { flex:0 0 42px!important;width:42px!important;height:42px!important;min-height:42px!important; padding:1px!important;border-radius:8px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main .ccds-product-card-details { flex:1!important;min-width:0!important;justify-content:center!important;gap:0!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main .ccds-product-card-details strong { font-size:12px!important;line-height:1.3!important;max-height:33px!important; display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important; overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main .ccds-original-label, #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main .ccds-print-note, #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main #ccds-reference-guidance, #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main .ccds-reset-artwork { display:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main>.ccds-stage-area { flex:1 1 0!important;min-height:0!important;max-height:none!important;height:auto!important; aspect-ratio:auto!important; display:flex!important;justify-content:center!important;align-items:center!important; overflow:hidden!important;padding:4px 8px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-main .ccds-stage-wrap { display:flex!important;align-items:center!important;justify-content:center!important; flex:1 1 0!important;width:100%!important;height:100%!important;max-height:100%!important; min-height:0!important;min-width:0!important;overflow:auto!important;padding:1px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-stage { border-radius:8px!important;box-shadow:0 3px 12px rgba(35,15,45,.19)!important; flex:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-inspector { position:relative!important;min-height:0!important;max-height:none!important;height:auto!important; overflow-y:auto!important;overscroll-behavior:contain!important; padding:4px 8px 6px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-inspector>.ccds-clock-slots { display:block!important;position:relative!important;top:auto!important;inset:auto!important; box-sizing:border-box!important;width:100%!important;max-width:none!important; margin:0!important;padding:8px!important;border-radius:11px!important; box-shadow:none!important;border:1px solid #4e4159!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-heading { display:flex!important;flex-direction:row!important;flex-wrap:wrap!important; align-items:baseline!important;justify-content:space-between!important; gap:2px 8px!important;margin:0 0 6px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-heading .ccds-product-original { display:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-heading strong { font-size:12px!important;line-height:15px!important;color:#f4d9a5!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-heading small { display:block!important;color:#ede4f4!important;font-size:10px!important; line-height:14px!important;white-space:normal!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-grid { display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important; gap:4px!important;width:100%!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-grid button.ccds-clock-slot { height:37px!important;min-height:37px!important;width:100%!important;min-width:0!important; padding:2px 0!important;border-radius:8px!important;font-size:11px!important; line-height:1.1!important;touch-action:manipulation!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-easy-photo {display:none!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-tool-rail { height:68px!important;min-height:68px!important;max-height:68px!important; overflow-y:hidden!important;padding:3px 5px 5px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-tool-rail .ccds-rail-btn { flex:0 0 61px!important;width:61px!important;min-width:61px!important; height:59px!important;min-height:59px!important;max-height:59px!important; gap:3px!important;padding:4px 2px!important;align-self:center!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-tool-rail .ccds-rail-btn svg { width:21px!important;height:21px!important;flex-shrink:0!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-tool-rail .ccds-rail-btn span { display:block!important;font-size:10px!important;line-height:12px!important;white-space:nowrap!important; } } @media screen and (max-width:800px) and (max-height:690px) { #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-workspace { grid-template-rows:minmax(0,1fr) 132px 62px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-tool-rail { height:62px!important;min-height:62px!important;max-height:62px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-tool-rail .ccds-rail-btn { height:54px!important;min-height:54px!important;max-height:54px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-grid button.ccds-clock-slot { min-height:34px!important;height:34px!important; } } @media screen and (max-width:360px) { #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-inspector>.ccds-clock-slots {padding:6px!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-grid {gap:3px!important;} #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-clock-grid button.ccds-clock-slot {font-size:10px!important;} } /* Beta 6: cover sample photography only inside the clipped print aperture. */ #ccds-modal#ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow.ccds-beta-product:not(.ccds-beta-print-mode) .ccds-stage .ccds-print-region{background:#fff!important;filter:none!important} #ccds-modal#ccds-modal#ccds-modal.ccds-modern.ccds-profile-engraving .ccds-engraving-on-product{border-radius:1px!important;text-shadow:none!important;letter-spacing:0!important} /* Beta 7: verified-photo progress and mobile artwork priority */ #ccds-modal .ccds-photo-checklist{ display:grid!important;grid-template-columns:auto minmax(0,1fr)!important; column-gap:12px!important;row-gap:5px!important;align-items:center!important; margin:5px 12px 8px!important;padding:10px 13px!important; border:1px solid #e6d9ee!important;border-radius:12px!important; background:#fcfaff!important;min-width:0!important; } #ccds-modal .ccds-checklist-status{font-size:12px!important;font-weight:800!important;color:#4a2860!important;white-space:nowrap!important} #ccds-modal .ccds-checklist-detail{font-size:11px!important;line-height:1.4!important;color:#675b70!important;overflow-wrap:anywhere!important} #ccds-modal .ccds-checklist-track{grid-column:1/-1;display:block;height:5px!important;border-radius:99px!important;background:#e7dcec!important;overflow:hidden!important} #ccds-modal .ccds-checklist-track i{display:block!important;height:100%!important;width:0%;border-radius:99px!important;background:#7b3e9c!important;transition:width .15s ease!important} #ccds-modal .ccds-photo-checklist[data-completed="true"] .ccds-checklist-track i{background:#188366!important} #ccds-modal .ccds-product-slot-hotspot{min-width:20px!important;min-height:20px!important} #ccds-modal .ccds-clock-slot.is-filled{background:#f1fff8!important;border-color:#72aa8b!important} @media(max-width:800px){ #ccds-modal .ccds-photo-checklist{grid-template-columns:1fr!important;margin:3px 8px 5px!important;padding:7px 10px!important;gap:3px!important;} #ccds-modal .ccds-checklist-status{font-size:11px!important;} #ccds-modal .ccds-checklist-detail{font-size:10px!important;line-height:1.25!important;} #ccds-modal .ccds-checklist-track{grid-column:1!important;height:4px!important;} #ccds-modal.ccds-beta-product:not(.ccds-profile-engraving) .ccds-product-card-image{display:none!important} #ccds-modal.ccds-beta-product:not(.ccds-profile-engraving) .ccds-product-card-details{padding:5px 10px!important;gap:3px!important} #ccds-modal.ccds-beta-product:not(.ccds-profile-engraving) .ccds-product-card-details .ccds-original-label, #ccds-modal.ccds-beta-product:not(.ccds-profile-engraving) .ccds-product-card-details .ccds-print-note{display:none!important} #ccds-modal.ccds-beta-product:not(.ccds-profile-engraving) #ccds-original-product-name{font-size:12px!important;line-height:1.2!important;max-height:2.4em!important;overflow:hidden!important} #ccds-modal.ccds-beta-product:not(.ccds-profile-engraving) #ccds-reference-guidance{font-size:10px!important} #ccds-modal .ccds-product-slot-hotspot span{font-weight:850!important;box-shadow:0 1px 4px #0003!important} } /* Beta 7: use the mobile viewport for the PRODUCT, not redundant options panels. Multi-photo numbered apertures remain accessible directly on the image. */ @media (max-width:800px){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-multi-map .ccds-workspace{ grid-template-rows:minmax(210px,1fr) minmax(72px,16%) 68px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-workspace{ grid-template-rows:minmax(210px,1fr) minmax(74px,17%) 68px!important; } } /* Beta 8: panel choices remain reachable, including rear faces absent from the photograph. */ #ccds-modal#ccds-modal.ccds-modern.ccds-product-multi-map .ccds-clock-slots{display:block!important} #ccds-modal#ccds-modal.ccds-modern.ccds-product-multi-map .ccds-clock-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(70px,1fr))!important} #ccds-modal#ccds-modal.ccds-modern.ccds-product-multi-map .ccds-clock-grid button{white-space:normal;min-height:44px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-multi-map:not(.ccds-beta-print-mode) .ccds-clock-slots{display:block!important} #ccds-modal#ccds-modal.ccds-modern.ccds-product-multi-map .ccds-clock-grid{grid-template-columns:repeat(var(--ccds-slot-columns,4),minmax(0,1fr))!important;gap:4px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-product-multi-map .ccds-clock-grid button{font-size:11px!important;padding:4px!important;overflow-wrap:anywhere} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-multi-map .ccds-workspace{grid-template-rows:minmax(140px,1fr) minmax(126px,22%) 68px!important} } /* Beta 9: the one-photo mapping retains a single native upload button. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-single-map .ccds-clock-slots, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-single-map:not(.ccds-beta-print-mode) .ccds-clock-slots{display:none!important} #ccds-modal.ccds-product-single-map .ccds-product-slot-buttons{display:none!important} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-single-map .ccds-workspace{grid-template-rows:minmax(180px,1fr) minmax(74px,17%) 68px!important} } @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-many-map .ccds-workspace{grid-template-rows:minmax(110px,1fr) minmax(174px,28%) 68px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-product-many-map .ccds-clock-heading small{display:none!important} } /* v4.0.0-beta.10 — 360° product preview; display-only, never printed. */ #ccds-modal .ccds-header-orbit{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;white-space:nowrap!important;flex:none!important;border:1px solid #ddcaa5!important;background:linear-gradient(130deg,#41225e,#663873)!important;color:#fff!important;border-radius:10px!important;font-size:12px!important;font-weight:850!important;padding:8px 11px!important;min-height:38px!important} #ccds-modal .ccds-header-orbit:hover,#ccds-modal .ccds-header-orbit:focus-visible{outline:2px solid #eed2a0!important;outline-offset:2px!important} #ccds-modal .ccds-orbit{position:absolute!important;inset:0!important;z-index:110!important;display:flex!important;justify-content:center!important;align-items:center!important;background:#120d1ee8!important;padding:clamp(8px,2vw,24px)!important;overflow-y:auto!important;overscroll-behavior:contain!important} #ccds-modal .ccds-orbit[hidden]{display:none!important} #ccds-modal .ccds-orbit-panel{width:min(760px,100%)!important;max-height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;padding:clamp(12px,2.5vw,24px)!important;border-radius:19px!important;background:#fff!important;box-shadow:0 26px 80px #0007!important;gap:10px!important;color:#30293e!important;overflow-y:auto!important} #ccds-modal .ccds-orbit-heading{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:12px!important} #ccds-modal .ccds-orbit-heading span{font-size:10px!important;letter-spacing:1.4px!important;color:#855f9a!important;font-weight:850!important} #ccds-modal .ccds-orbit-heading h2{margin:4px 0 0!important;font-size:clamp(17px,3vw,23px)!important;color:#292034!important;line-height:1.2!important} #ccds-modal .ccds-orbit-close{display:grid!important;place-items:center!important;flex:none!important;min-width:40px!important;min-height:40px!important;border-radius:11px!important;background:#eee8f3!important;border:1px solid #dcd1e4!important;color:#392544!important;font-size:17px!important} #ccds-modal .ccds-orbit-screen{width:100%!important;min-height:170px!important;max-height:min(48vh,430px)!important;aspect-ratio:640/460!important;overflow:hidden!important;border-radius:15px!important;background:#f4f0f8!important;position:relative!important;touch-action:pan-y!important;cursor:grab!important;flex:0 1 auto!important} #ccds-modal .ccds-orbit-screen:active{cursor:grabbing!important} #ccds-modal .ccds-orbit-screen canvas{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none!important} #ccds-modal .ccds-orbit-hint{position:absolute!important;bottom:9px!important;left:50%!important;transform:translateX(-50%)!important;font-size:11px!important;border-radius:20px!important;background:#21192bcf!important;color:#fff!important;padding:5px 12px!important;text-align:center!important;white-space:nowrap!important;pointer-events:none!important} #ccds-modal .ccds-orbit-controls{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-width:0!important} #ccds-modal .ccds-orbit-range-label{display:flex!important;align-items:center!important;gap:5px!important;white-space:nowrap!important;font-size:12px!important;color:#5a466b!important;font-weight:750!important} #ccds-modal .ccds-orbit-range-label output{min-width:36px!important;text-align:right!important;font-variant-numeric:tabular-nums!important;color:#7c3388!important} #ccds-modal #ccds-orbit-angle{flex:1 1 auto!important;width:100%!important;min-width:40px!important;accent-color:#713998!important;touch-action:pan-x!important} #ccds-modal .ccds-orbit-arrow{display:grid!important;place-items:center!important;flex:none!important;min-width:40px!important;min-height:42px!important;border-radius:10px!important;background:#f2ebf7!important;border:1px solid #ded3e8!important;color:#513463!important;font-size:23px!important} #ccds-modal .ccds-orbit-actions{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important} #ccds-modal .ccds-orbit-actions button{flex:1 1 auto!important;min-height:42px!important;border-radius:10px!important;font-size:12px!important;font-weight:750!important} #ccds-modal .ccds-orbit-disclaimer{border-top:1px solid #eee8f1!important;padding-top:9px!important;margin:0!important;font-size:11px!important;line-height:1.5!important;color:#71657b!important;max-width:none!important;text-align:left!important} @media(max-width:800px){ #ccds-modal .ccds-header-orbit{min-height:34px!important;padding:6px 8px!important;font-size:11px!important} #ccds-modal .ccds-orbit{padding:8px!important;align-items:center!important} #ccds-modal .ccds-orbit-panel{border-radius:13px!important;gap:8px!important;padding:11px!important;max-height:calc(100dvh - 16px)!important} #ccds-modal .ccds-orbit-screen{max-height:40dvh!important;min-height:140px!important} #ccds-modal .ccds-orbit-hint{font-size:10px!important;padding:4px 9px!important} #ccds-modal .ccds-orbit-controls{gap:5px!important} #ccds-modal .ccds-orbit-range-label{font-size:10px!important;flex-direction:column!important;align-items:center!important;gap:0!important} #ccds-modal .ccds-orbit-arrow{min-width:35px!important;min-height:39px!important} #ccds-modal .ccds-orbit-actions button{min-height:40px!important} } @media(max-width:390px){ #ccds-modal .ccds-header-orbit span{display:none!important} #ccds-modal .ccds-header-orbit{font-size:14px!important;padding:6px 9px!important} #ccds-modal .ccds-orbit-heading h2{font-size:17px!important} #ccds-modal .ccds-orbit-actions button{font-size:10px!important;padding:8px 5px!important} } @media(prefers-reduced-motion:reduce){#ccds-modal .ccds-orbit *,#ccds-modal .ccds-orbit *::before,#ccds-modal .ccds-orbit *::after{transition:none!important;animation:none!important}} @media(max-width:610px){#ccds-modal .ccds-header-orbit span{display:none!important}} /* Chethu Studio beta.11 — premium turntable; viewport-safe in Android/WebView. */ #ccds-modal .ccds-orbit{z-index:120!important;background:#100d16ed!important;padding:12px!important;overscroll-behavior:contain!important} #ccds-modal .ccds-orbit-panel{width:min(790px,100%)!important;max-height:min(95dvh,900px)!important;gap:12px!important;padding:17px!important;background:linear-gradient(160deg,#fffdfa,#faf7f8)!important;border:1px solid #eee4df!important;border-radius:22px!important;box-shadow:0 25px 100px #050308a0!important;color:#2b2530!important;overflow-y:auto!important} #ccds-modal .ccds-orbit-heading{align-items:center!important;gap:8px!important;padding:0 2px 2px!important} #ccds-modal .ccds-orbit-heading .ccds-orbit-brand{display:block!important;font-size:10px!important;letter-spacing:1.9px!important;color:#9d7469!important;font-weight:850!important} #ccds-modal .ccds-orbit-heading h2{font-size:clamp(20px,3vw,27px)!important;line-height:1.24!important;color:#241b2b!important;letter-spacing:-.65px!important} #ccds-modal .ccds-orbit-heading h2 small{display:inline-block!important;vertical-align:middle!important;margin-left:5px!important;font-size:10px!important;letter-spacing:.4px!important;color:#997b75!important;font-weight:700!important;background:#f6ede8!important;padding:5px 8px!important;border-radius:40px!important} #ccds-modal .ccds-orbit-close{width:40px!important;height:40px!important;border-radius:50%!important;background:#f5eee9!important;border:1px solid #e6dbd4!important;color:#573946!important;box-shadow:none!important} #ccds-modal .ccds-orbit-screen{width:100%!important;aspect-ratio:800/560!important;max-height:min(50dvh,450px)!important;min-height:180px!important;border:1px solid #e6d8dc!important;background:#f4ecee!important;border-radius:17px!important;touch-action:none!important;cursor:grab!important;overflow:hidden!important;box-shadow:inset 0 1px 8px #3b232208!important} #ccds-modal .ccds-orbit-screen canvas{width:100%!important;height:100%!important;object-fit:fill!important} #ccds-modal .ccds-orbit-screen-tools{position:absolute!important;top:12px!important;left:12px!important;right:12px!important;display:flex!important;gap:8px!important;justify-content:space-between!important;align-items:flex-start!important;pointer-events:none!important;z-index:2!important} #ccds-modal .ccds-orbit-mode{font-size:9px!important;line-height:1.3!important;font-weight:900!important;letter-spacing:1px!important;color:#5a3146!important;border:1px solid #e0c6c9!important;border-radius:30px!important;background:#fff9f1eb!important;padding:8px 10px!important;max-width:62%!important} #ccds-modal .ccds-orbit-zoom{display:flex!important;align-items:center!important;gap:2px!important;border:1px solid #e3d2d4!important;border-radius:12px!important;background:#fffdf3ea!important;padding:3px!important;pointer-events:auto!important;white-space:nowrap!important;box-shadow:0 4px 12px #a27b7b1a!important} #ccds-modal .ccds-orbit-zoom button{display:grid!important;place-items:center!important;border:0!important;width:32px!important;height:31px!important;border-radius:9px!important;background:transparent!important;font-size:21px!important;color:#5b354c!important;font-weight:600!important;padding:0!important;min-height:0!important} #ccds-modal .ccds-orbit-zoom output{font-weight:850!important;color:#44293b!important;font-size:11px!important;min-width:40px!important;text-align:center!important;font-variant-numeric:tabular-nums!important} #ccds-modal .ccds-orbit-angle-badge{position:absolute!important;bottom:12px!important;left:14px!important;border:1px solid #ead9dc!important;background:#fffaf3dd!important;color:#623a4f!important;border-radius:10px!important;font-weight:900!important;font-size:17px!important;padding:5px 10px!important;pointer-events:none!important} #ccds-modal .ccds-orbit-hint{bottom:14px!important;left:50%!important;max-width:68%!important;background:#241c27d9!important;color:white!important;border-radius:30px!important;box-shadow:0 5px 16px #33233225!important;font-weight:650!important;font-size:10px!important;letter-spacing:.15px!important;padding:8px 11px!important;white-space:normal!important;line-height:1.2!important} #ccds-modal .ccds-orbit-angle-presets{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;width:100%!important} #ccds-modal .ccds-orbit-angle-presets button{border:1px solid #e2d6d8!important;border-radius:12px!important;min-width:0!important;min-height:43px!important;background:#fff!important;color:#594b59!important;font-size:13px!important;font-weight:900!important;padding:7px 3px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important} #ccds-modal .ccds-orbit-angle-presets button span{font-size:10px!important;font-weight:650!important;color:#92848b!important} #ccds-modal .ccds-orbit-angle-presets button.is-active{background:#50233e!important;border-color:#50233e!important;color:#fff!important;box-shadow:0 4px 12px #50233e2d!important} #ccds-modal .ccds-orbit-angle-presets button.is-active span{color:#f4dcb9!important} #ccds-modal .ccds-orbit-controls{gap:11px!important;display:flex!important;padding:2px 1px!important;align-items:center!important} #ccds-modal .ccds-orbit-range-wrap{min-width:0!important;flex:1!important;display:flex!important;flex-direction:column!important;gap:2px!important} #ccds-modal .ccds-orbit-range-label{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;color:#5d505d!important;font-size:11px!important;font-weight:750!important} #ccds-modal .ccds-orbit-range-label output{font-size:11px!important;color:#784e62!important} #ccds-modal .ccds-orbit-arrow{min-width:42px!important;min-height:42px!important;border-radius:12px!important;background:#f8f0ec!important;border:1px solid #e5d7d3!important;color:#57304a!important;box-shadow:none!important} #ccds-modal #ccds-orbit-angle{min-height:20px!important;width:100%!important;accent-color:#713c55!important;cursor:pointer!important} #ccds-modal .ccds-orbit-actions{display:grid!important;grid-template-columns:1fr 1fr 1.38fr!important;gap:7px!important;width:100%!important} #ccds-modal .ccds-orbit-actions button{font-size:12px!important;min-width:0!important;min-height:45px!important;padding:9px 8px!important;line-height:1.2!important;white-space:normal!important;border-radius:12px!important;border:1px solid #e3d4d4!important;background:#fff!important;color:#543d4d!important;font-weight:850!important;box-shadow:none!important} #ccds-modal .ccds-orbit-actions #ccds-orbit-done{border-color:#53213d!important;color:#fff!important;background:linear-gradient(105deg,#4d203d,#852d62)!important;box-shadow:0 7px 18px #63284630!important} #ccds-modal .ccds-orbit-actions #ccds-orbit-auto[aria-pressed="true"]{background:#f2e6ed!important;color:#632644!important} #ccds-modal .ccds-orbit-accuracy{border:1px solid #eee4e5!important;border-radius:11px!important;background:#fcfaf9!important;margin:0!important;max-width:none!important;overflow:hidden!important} #ccds-modal .ccds-orbit-accuracy summary{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;cursor:pointer!important;padding:9px 11px!important;list-style:none!important;font-size:10px!important;font-weight:750!important;color:#85737b!important} #ccds-modal .ccds-orbit-accuracy summary::-webkit-details-marker{display:none!important} #ccds-modal .ccds-orbit-accuracy summary span:first-child{color:#725065!important;font-weight:850!important} #ccds-modal .ccds-orbit-disclaimer{padding:0 11px 11px!important;margin:0!important;border:0!important;font-size:11px!important;color:#6b5964!important;line-height:1.5!important} #ccds-modal .ccds-orbit :is(button,summary,input):focus-visible{outline:3px solid #bd8550!important;outline-offset:2px!important} @media(max-width:800px){ #ccds-modal .ccds-orbit{padding:8px!important} #ccds-modal .ccds-orbit-panel{padding:11px!important;gap:9px!important;max-height:calc(100dvh - 16px)!important;border-radius:17px!important} #ccds-modal .ccds-orbit-screen{max-height:min(45dvh,390px)!important;min-height:168px!important} #ccds-modal .ccds-orbit-angle-presets{gap:5px!important} #ccds-modal .ccds-orbit-angle-presets button{font-size:12px!important;min-height:39px!important;padding:6px 1px!important;gap:4px!important} #ccds-modal .ccds-orbit-angle-presets button span{font-size:9px!important} #ccds-modal .ccds-orbit-actions button{font-size:11px!important;min-height:42px!important;padding:8px 4px!important} #ccds-modal .ccds-orbit-hint{font-size:9px!important;padding:6px 9px!important} } @media(max-width:390px){ #ccds-modal .ccds-orbit-panel{padding:9px!important;gap:7px!important} #ccds-modal .ccds-orbit-heading .ccds-orbit-brand{font-size:8px!important;letter-spacing:1.1px!important} #ccds-modal .ccds-orbit-heading h2{font-size:17px!important} #ccds-modal .ccds-orbit-heading h2 small{display:none!important} #ccds-modal .ccds-orbit-screen{max-height:39dvh!important} #ccds-modal .ccds-orbit-mode{font-size:8px!important;padding:6px 7px!important} #ccds-modal .ccds-orbit-zoom button{width:27px!important;height:27px!important} #ccds-modal .ccds-orbit-zoom output{font-size:9px!important;min-width:30px!important} #ccds-modal .ccds-orbit-accuracy summary{font-size:9px!important} } @media(max-height:650px) and (max-width:800px){#ccds-modal .ccds-orbit{align-items:flex-start!important}#ccds-modal .ccds-orbit-screen{max-height:32dvh!important}#ccds-modal .ccds-orbit-panel{gap:7px!important}} /* v4.0.0-beta.12 — transparent product photography, six exact directions. */ #ccds-modal .ccds-orbit-screen.is-transparent{background-color:#fff!important;background-image:linear-gradient(45deg,#eeeef2 25%,transparent 25%),linear-gradient(-45deg,#eeeef2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eeeef2 75%),linear-gradient(-45deg,transparent 75%,#eeeef2 75%)!important;background-size:20px 20px!important;background-position:0 0,0 10px,10px -10px,-10px 0!important} #ccds-modal .ccds-orbit-angle-presets{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:5px!important} #ccds-modal .ccds-orbit-angle-presets button{min-height:52px!important;display:flex!important;flex-direction:column!important;gap:1px!important;font-size:19px!important;line-height:1.05!important} #ccds-modal .ccds-orbit-angle-presets button span{display:block!important;font-size:11px!important;letter-spacing:.1px!important} #ccds-modal .ccds-orbit-angle-presets button:disabled{opacity:.38!important;cursor:not-allowed!important;background:#f4f1f3!important;box-shadow:none!important} #ccds-modal .ccds-orbit-arrow:disabled,#ccds-modal .ccds-orbit-actions button:disabled,#ccds-modal #ccds-orbit-angle:disabled{opacity:.4!important;cursor:not-allowed!important} #ccds-modal .ccds-orbit-background-toggle{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:wrap!important;font-size:11px!important;color:#61515d!important} #ccds-modal .ccds-orbit-background-toggle span{font-weight:780!important;margin-right:auto!important} #ccds-modal .ccds-orbit-background-toggle button{border:1px solid #e0d3db!important;border-radius:8px!important;padding:5px 10px!important;background:#fff!important;color:#553a4e!important;font-size:11px!important;font-weight:850!important;min-height:30px!important} #ccds-modal .ccds-orbit-background-toggle button.is-active{background:#50233e!important;color:#fff!important;border-color:#50233e!important} #ccds-modal .ccds-orbit-angle-badge{font-size:13px!important} @media(max-width:560px){#ccds-modal .ccds-orbit-angle-presets{gap:3px!important}#ccds-modal .ccds-orbit-angle-presets button{min-height:43px!important;font-size:16px!important;padding:5px 1px!important}#ccds-modal .ccds-orbit-angle-presets button span{font-size:9px!important}#ccds-modal .ccds-orbit-panel{gap:7px!important}#ccds-modal .ccds-orbit-screen{max-height:35dvh!important;min-height:160px!important}} @media(max-width:350px){#ccds-modal .ccds-orbit-angle-presets button span{font-size:8px!important}} /* Beta 20: scoped mobile usability and completion guidance. */ #ccds-modal .ccds-completion{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;background:#faf6f0;border-bottom:1px solid #e5d8ca;color:#493348;font-size:12px;flex:none;min-width:0} #ccds-modal .ccds-completion button{border:1px solid #754360;border-radius:9px;background:white;color:#59314b;padding:8px 12px;min-height:44px;font-weight:700;flex-shrink:0} #ccds-modal .ccds-completion button[hidden]{display:none!important} #ccds-modal :is(button,input,select,textarea,summary):focus-visible{outline:3px solid #a66b24!important;outline-offset:2px!important} @media(max-width:800px){ #ccds-modal .ccds-header-actions{min-width:0!important} #ccds-modal :is(.ccds-header-save,.ccds-close,.ccds-history-btn,.ccds-position-icon){min-height:44px!important;min-width:44px!important} #ccds-modal :is(input[type=text],input[type=number],textarea,select){font-size:16px!important} #ccds-modal .ccds-completion{padding:6px 10px;font-size:11px} #ccds-modal .ccds-completion span{min-width:0;overflow-wrap:anywhere} } @media(prefers-reduced-motion:reduce){ #ccds-modal *,#ccds-modal *::before,#ccds-modal *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important} } /* ===================================================================== CC Design Studio 4.0.0-beta.21 — large product / individual photo controls. Last-in-file overrides intentionally consolidate earlier beta layouts. The physical product/photo template geometry is unchanged. ===================================================================== */ #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{ color:#291c38!important;font-size:clamp(13px,1.5vw,18px)!important; font-weight:900!important;letter-spacing:-.2px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{ flex:0 0 auto!important;height:auto!important;min-height:54px!important; padding:5px 10px!important;gap:8px!important;background:#faf7ff!important; border-bottom:1px solid #e1d7eb!important;box-sizing:border-box!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust{ display:flex!important;align-items:center!important;justify-content:flex-end!important; gap:6px!important;flex:1 1 auto!important;min-width:0!important;min-height:42px!important; overflow-x:auto!important;overflow-y:hidden!important; -webkit-overflow-scrolling:touch;scrollbar-width:thin; scroll-padding-inline:8px!important;color:#392444!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust-caption{ flex:0 0 auto!important;font-size:11px!important;font-weight:850!important; color:#5b3b72!important;white-space:nowrap!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-nudge, #ccds-modal#ccds-modal.ccds-modern .ccds-photo-sizes{ display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important; border:1px solid #ded0e8!important;padding:3px!important;border-radius:12px!important; background:#fff!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-nudge button, #ccds-modal#ccds-modal.ccds-modern .ccds-photo-sizes button{ display:grid!important;place-items:center!important;flex:0 0 34px!important; min-width:34px!important;width:34px!important;min-height:36px!important;height:36px!important; border:0!important;border-radius:9px!important;background:#f4eaf8!important; color:#53246e!important;padding:0!important;font-size:19px!important; font-weight:850!important;line-height:1!important;cursor:pointer!important; touch-action:manipulation!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-sizes span{ font-size:10px!important;font-weight:850!important;white-space:nowrap!important; padding:0 3px!important;color:#5a4170!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-step-label{ display:flex!important;align-items:center!important;gap:4px!important; flex:0 0 auto!important;font-size:10px!important;font-weight:800!important; color:#695271!important;white-space:nowrap!important; } #ccds-modal#ccds-modal.ccds-modern #ccds-photo-step{ display:block!important;width:auto!important;min-width:78px!important;height:38px!important; min-height:38px!important;max-height:none!important; padding:4px 18px 4px 8px!important;margin:0!important; background:#fff!important;border:1px solid #dccfe5!important; border-radius:9px!important;font-size:13px!important;color:#442d54!important; touch-action:manipulation!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust #ccds-photo-reset{ flex:0 0 auto!important;min-height:42px!important;height:42px!important; padding:6px 10px!important;border:1px solid #dccfe5!important; border-radius:9px!important;color:#633978!important;background:#fff!important; font-size:12px!important;font-weight:800!important;white-space:nowrap!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust button:disabled{ opacity:.4!important;cursor:not-allowed!important;background:#f0edf2!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust button:focus-visible, #ccds-modal#ccds-modal.ccds-modern #ccds-photo-step:focus-visible{ outline:3px solid #9b59b6!important;outline-offset:2px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust:not(.is-disabled) .ccds-photo-adjust-caption{ color:#522b79!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage-area{ box-sizing:border-box!important;min-height:0!important;padding:2px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage-area #ccds-stage-wrap{ min-height:0!important;padding:2px!important;box-sizing:border-box!important; overflow:hidden!important; } /* The existing side size panel duplicates the photo controls and takes about 80px of valuable mobile product width. Text/shape sliders stay in Inspector. */ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage-area .ccds-size-dock{ display:none!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage-space{ margin:auto!important; } @media(min-width:801px) and (max-width:1180px){ #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{ flex-wrap:wrap!important;justify-content:flex-start!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust{ width:100%!important;justify-content:flex-start!important; } } @media(max-width:800px){ /* Larger canvas: reserve one compact options row, not 25–34% of height. */ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-single-map .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-multi-map .ccds-workspace{ grid-template-columns:minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr) minmax(86px,17%) 62px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-many-map .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(128px,25%) 62px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main{ min-height:0!important;height:100%!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card{ flex:0 0 44px!important;height:44px!important;min-height:44px!important; max-height:44px!important;gap:7px!important;padding:2px 9px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card .ccds-product-card-image{ flex:0 0 38px!important;width:38px!important;height:38px!important; min-height:38px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card .ccds-product-card-details strong{ font-size:11px!important;line-height:1.3!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{ display:flex!important;flex-direction:column!important;align-items:stretch!important; min-height:86px!important;height:auto!important;max-height:90px!important; padding:3px 6px!important;gap:2px!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar{ display:flex!important;width:100%!important;flex:0 0 33px!important; align-items:center!important;justify-content:center!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar button{ min-height:30px!important;height:30px!important;font-size:11px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust{ flex:0 0 43px!important;height:43px!important;min-height:43px!important; width:100%!important;justify-content:flex-start!important; padding:0 1px!important;gap:5px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust-caption{font-size:10px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-photo-nudge button, #ccds-modal#ccds-modal.ccds-modern .ccds-photo-sizes button{ min-width:36px!important;width:36px!important;min-height:36px!important;height:36px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust #ccds-photo-reset{min-height:40px!important;height:40px!important} #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-stage-area{ flex:1 1 0!important;height:auto!important;min-height:0!important;max-height:none!important; padding:1px 3px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-stage-area #ccds-stage-wrap{ flex:1 1 auto!important;padding:2px!important;width:100%!important;max-height:none!important; } } @media(max-width:800px) and (max-height:570px){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card{height:34px!important;min-height:34px!important;max-height:34px!important;flex-basis:34px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{min-height:76px!important;max-height:78px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar{flex-basis:29px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust{flex-basis:40px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-workspace{grid-template-rows:minmax(0,1fr) minmax(72px,15%) 57px!important} } @media(max-width:800px) and (orientation:landscape) and (max-height:480px){ #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{min-height:46px!important;max-height:48px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{grid-template-rows:minmax(0,1fr) minmax(62px,18%) 50px!important} } @media(prefers-reduced-motion:reduce){ #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust *{transition:none!important;animation:none!important} } /* Beta 21 refinements verified against narrow-phone and tablet viewports. */ @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{color:#fff!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar{ position:static!important;order:0!important;bottom:auto!important; padding:0!important;margin:0!important;z-index:auto!important; background:transparent!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-photo-adjust{order:1!important} } /* Landscape phablets at 801–1180px have a desktop grid by width, but not enough height for desktop's two-row toolbar. Keep the editing preview usable. */ @media(min-width:801px) and (max-width:1180px) and (max-height:520px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{grid-template-columns:54px minmax(0,1fr) 205px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{padding:2px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{ width:49px!important;min-width:49px!important;height:48px!important;flex-basis:48px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card{ height:34px!important;min-height:34px!important;max-height:34px!important;flex-basis:34px!important; padding:2px 7px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card .ccds-product-card-image{ height:30px!important;min-height:30px!important;width:30px!important;flex-basis:30px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-phone-controls{padding:1px 6px!important;min-height:28px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{ display:flex!important;flex-wrap:nowrap!important;min-height:44px!important; max-height:46px!important;padding:2px 5px!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust{ flex:1 1 auto!important;min-height:40px!important;justify-content:flex-start!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector{padding:6px!important} } /* Final responsive review: the modal header uses a dark plum background. */ #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{color:#fff!important} @media(max-width:800px) and (max-height:650px){ #ccds-modal#ccds-modal.ccds-modern .ccds-completion{ flex:0 0 36px!important;min-height:36px!important;height:36px!important; max-height:36px!important;padding:2px 8px!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-completion button{ min-height:30px!important;max-height:32px!important;padding:3px 8px!important;font-size:10px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-photo-checklist{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card{ flex:0 0 34px!important;min-height:34px!important;max-height:34px!important;height:34px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-phone-controls{min-height:30px!important;padding:1px 6px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{min-height:76px!important;max-height:78px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-single-map .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(66px,13%) 54px!important; } } @media(max-width:1180px) and (max-height:520px) and (orientation:landscape){ #ccds-modal#ccds-modal.ccds-modern .ccds-completion{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-photo-checklist{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card{ flex:0 0 32px!important;min-height:32px!important;max-height:32px!important;height:32px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-phone-controls, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-phone-controls{ flex:0 0 28px!important;min-height:28px!important;max-height:28px!important; padding:1px 6px!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main .ccds-phone-switch button{min-height:25px!important;height:25px!important;padding:2px 5px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{ flex:0 0 44px!important;min-height:44px!important;max-height:44px!important; padding:1px 5px!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust{ flex:1 1 auto!important;height:40px!important;min-height:40px!important; justify-content:flex-start!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-stage-area{ flex:1 1 0!important;min-height:0!important;height:auto!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-stage-area #ccds-stage-wrap{ min-height:0!important;height:100%!important;padding:2px!important; } } /* Prevent title and action buttons colliding on narrow Android handsets. */ @media(max-width:360px){ #ccds-modal#ccds-modal.ccds-modern .ccds-header{padding:4px 5px!important;gap:3px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-brand{min-width:0!important;flex:0 1 auto!important} #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{ font-size:11px!important;letter-spacing:-.35px!important;white-space:nowrap!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-actions, #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions{gap:3px!important;flex:0 0 auto!important} #ccds-modal#ccds-modal.ccds-modern .ccds-header-preview span, #ccds-modal#ccds-modal.ccds-modern .ccds-header-orbit span{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-header-preview{ min-width:31px!important;width:31px!important;padding:5px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-orbit{ padding:4px!important;font-size:10px!important;min-width:42px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-save{ font-size:11px!important;min-width:48px!important;padding:5px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-close{ min-width:31px!important;width:31px!important;height:34px!important; } } /* Beta 22 refinements: cleaner photo controls, larger product preview, premium title */ #ccds-modal#ccds-modal.ccds-modern .ccds-brand>div{ display:flex!important;align-items:flex-start!important;justify-content:center!important;flex-direction:column!important; padding:5px 11px!important;border-radius:12px!important; border:1px solid rgba(240,215,161,.22)!important; background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(240,215,161,.06))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{ color:#f5dd9c!important;font-weight:900!important;letter-spacing:.09em!important; text-transform:uppercase!important; text-shadow:0 1px 0 rgba(54,29,84,.6),0 0 14px rgba(245,221,156,.16)!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-logo{ background:linear-gradient(135deg,#f8d38a,#b183ff)!important; color:#2a163d!important;border:1px solid rgba(255,255,255,.22)!important; box-shadow:0 8px 22px rgba(27,16,45,.28)!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust-caption{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust{gap:6px!important} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-mobile-tabs{min-height:40px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-mobile-tab{padding:8px 6px!important;font-size:12px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-phone-controls{padding:2px 8px!important;min-height:42px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-phone-switch{padding:2px!important;gap:2px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-phone-switch button{min-height:34px!important;padding:6px 10px!important;font-size:12px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card{ flex:0 0 34px!important;height:34px!important;min-height:34px!important;max-height:34px!important; gap:6px!important;padding:2px 8px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card .ccds-product-card-image{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details{padding:0!important;gap:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details strong{ font-size:10.5px!important;line-height:1.2!important;-webkit-line-clamp:1!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details span, #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details .ccds-original-label, #ccds-modal#ccds-modal.ccds-modern .ccds-product-card-details .ccds-print-note{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-single-map .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-multi-map .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(72px,14%) 56px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-many-map .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(112px,21%) 56px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{ min-height:72px!important;height:auto!important;max-height:74px!important; padding:2px 4px!important;gap:2px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar{ flex:0 0 27px!important;min-height:27px!important;padding:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar .ccds-history-bar button{ min-height:26px!important;height:26px!important;font-size:10px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust{ flex:1 1 auto!important;min-height:40px!important;height:40px!important; width:100%!important;justify-content:space-between!important;padding:0!important;gap:4px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-nudge{gap:4px!important;padding:3px 4px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-photo-nudge button, #ccds-modal#ccds-modal.ccds-modern .ccds-photo-sizes button{ min-width:34px!important;width:34px!important;min-height:34px!important;height:34px!important; } #ccds-modal#ccds-modal.ccds-modern #ccds-photo-step{ min-width:74px!important;height:34px!important;min-height:34px!important;padding:4px 16px 4px 8px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust #ccds-photo-reset{ min-height:34px!important;height:34px!important;padding:4px 8px!important;font-size:11px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-stage-area, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-stage-area{ padding:0 4px 2px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-stage-area #ccds-stage-wrap{padding:0!important} } @media(max-width:420px){ #ccds-modal#ccds-modal.ccds-modern .ccds-brand>div{padding:3px 7px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{font-size:11px!important;letter-spacing:.06em!important} #ccds-modal#ccds-modal.ccds-modern .ccds-photo-adjust #ccds-photo-reset{display:none!important} } @media(max-width:800px) and (max-height:570px){ #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-product-card, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-main>.ccds-product-card{height:30px!important;min-height:30px!important;max-height:30px!important;flex-basis:30px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-phone-controls{min-height:38px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-canvas-toolbar{min-height:66px!important;max-height:68px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-workspace{grid-template-rows:minmax(0,1fr) minmax(66px,13%) 52px!important} } /* ================= CC Design Studio beta.23 ================= Canvas-first product preview: hide the three UI strips shown in customer feedback, not the real artwork layer. The original product card is still essential for engraving-only products and remains visible there. ==================================================================== */ #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-canvas-toolbar { display:none!important;visibility:hidden!important;height:0!important;min-height:0!important; padding:0!important;margin:0!important;border:0!important;flex:0 0 0!important; } #ccds-modal#ccds-modal.ccds-modern:not(.ccds-profile-engraving) .ccds-main>.ccds-product-card { display:none!important;visibility:hidden!important;height:0!important;min-height:0!important; max-height:0!important;flex:0 0 0!important;padding:0!important;margin:0!important; border:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-phone-controls{ display:none!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-canvas-help{ display:none!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-stage-area{ flex:1 1 0!important;min-height:0!important;max-height:none!important; padding:3px 7px!important;background:radial-gradient(ellipse at 50% 42%,#fff 0%,#f9f6fd 68%,#ece7f4 100%)!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-stage-area #ccds-stage-wrap{ padding:2px!important;width:100%!important;min-height:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-stage-space>.ccds-stage{ box-shadow:0 12px 34px rgba(32,16,45,.14)!important; } /* Premium brand in a compact header: no clipped labels or extra header height */ #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{ color:#ffdfa3!important;text-transform:none!important; font-weight:850!important;letter-spacing:.015em!important; font-size:clamp(12px,1.25vw,17px)!important;line-height:1.15!important; text-shadow:0 1px 10px rgba(214,155,64,.23)!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-brand>div{ padding:5px 10px!important;border-radius:11px!important; background:linear-gradient(120deg,rgba(239,198,127,.13),rgba(255,255,255,.045))!important; border:1px solid rgba(232,185,112,.26)!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header{ border-bottom:1px solid rgba(218,178,114,.28)!important; background:linear-gradient(110deg,#170d24 0%,#2b163d 62%,#38193f 100%)!important; } /* Photo controls exist once, moved to the Edit Photo sidebar */ #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer, #ccds-modal#ccds-modal.ccds-modern .ccds-preview-drawer{ margin:10px 10px 12px!important; border:1px solid #e5d9ec!important;border-radius:15px!important; background:linear-gradient(160deg,#fff,#faf6fd)!important; box-shadow:0 4px 16px rgba(48,26,74,.06)!important;overflow:hidden!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer>summary, #ccds-modal#ccds-modal.ccds-modern .ccds-preview-drawer>summary{ display:list-item!important;cursor:pointer!important;list-style-position:inside!important; font-weight:850!important;color:#402052!important;font-size:13px!important; padding:12px 13px!important;line-height:1.35!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer>summary:focus-visible, #ccds-modal#ccds-modal.ccds-modern .ccds-preview-drawer>summary:focus-visible{ outline:3px solid #8b54b2!important;outline-offset:-3px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-help{ color:#746381!important;font-size:11px!important;line-height:1.45!important; padding:0 12px 7px!important;margin:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer .ccds-photo-adjust{ display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important; min-width:0!important;width:100%!important;max-height:none!important;height:auto!important; overflow:visible!important;padding:7px 10px 13px!important;gap:7px!important; background:transparent!important;border:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer .ccds-photo-nudge{ flex:0 0 auto!important;gap:3px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer .ccds-photo-step-label{ flex:1 0 84px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer .ccds-photo-sizes{ flex:1 0 auto!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer .ccds-photo-reset{ display:inline-flex!important;align-items:center!important;justify-content:center!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-preview-drawer .ccds-phone-controls{ display:flex!important;position:static!important;flex-direction:column!important; align-items:stretch!important;flex-wrap:wrap!important;gap:7px!important; min-width:0!important;margin:0!important;padding:9px 10px 12px!important; box-shadow:none!important;border:0!important;background:transparent!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-preview-drawer .ccds-phone-switch{ width:100%!important;display:flex!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-preview-drawer .ccds-phone-switch button{ flex:1 1 0!important;min-width:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-preview-drawer #ccds-phone-explain{ flex:0 0 auto!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-preview-drawer[hidden]{display:none!important} @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-stage-area{ padding:1px 2px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-stage-area #ccds-stage-wrap{ padding:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-brand>div{padding:5px 7px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{font-size:clamp(10px,3.2vw,14px)!important} #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer .ccds-photo-adjust{ flex:0 1 auto!important;min-height:0!important;max-height:none!important; width:100%!important;height:auto!important;padding:6px 9px 12px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-adjust-drawer .ccds-photo-nudge button{ min-height:40px!important;height:40px!important;min-width:40px!important;width:40px!important; } } @media(max-width:360px){ #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{font-size:10px!important;letter-spacing:0!important} #ccds-modal#ccds-modal.ccds-modern .ccds-brand>div{padding:4px 5px!important} } /* ===================== Beta 24 / premium left-side quick tools ===================== Keep a single accessible upload input; reuse original Undo/Redo handlers. Photo / Text / Undo / Redo / Edit come first in the desktop LEFT tool rail, and first on the mobile left-aligned swipe rail without shrinking artwork. */ #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{ background:linear-gradient(180deg,#1d132e 0%,#221832 100%)!important; border-color:rgba(214,170,108,.25)!important; scrollbar-width:thin!important; scrollbar-color:rgba(196,155,221,.45) transparent!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-upload-tool, #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail #ccds-undo, #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail #ccds-redo{ display:flex!important; visibility:visible!important; } /* Restore Photo button even on the single-photo flow; it uses the ONE existing file picker and is a shortcut to the same printable opening on the product. */ #ccds-modal#ccds-modal.ccds-modern.ccds-single-photo-flow .ccds-tool-rail .ccds-upload-tool{ display:flex!important;visibility:visible!important; } /* Engraving-only products have no printable photo opening, so retain a text-only workflow. */ #ccds-modal#ccds-modal.ccds-modern.ccds-profile-engraving .ccds-tool-rail .ccds-upload-tool{display:none!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.ccds-primary-tool, #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.ccds-history-tool{ color:#f7e9ff!important; background:linear-gradient(150deg,rgba(131,77,174,.27),rgba(88,48,119,.22))!important; border:1px solid rgba(212,165,228,.22)!important; border-radius:12px!important; box-shadow:inset 0 1px rgba(255,255,255,.08)!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.ccds-primary-tool{ background:linear-gradient(150deg,rgba(224,172,99,.25),rgba(100,42,109,.22))!important; border-color:rgba(241,202,142,.36)!important; color:#ffe5ae!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.ccds-history-tool:disabled{ opacity:.48!important; filter:grayscale(.28)!important; cursor:not-allowed!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.ccds-primary-tool:focus-visible, #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.ccds-history-tool:focus-visible{ outline:3px solid #f9d39e!important;outline-offset:1px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.ccds-primary-tool:hover, #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn.ccds-history-tool:not(:disabled):hover{ border-color:#f6d5a0!important;background:#624084!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn span{ font-weight:750!important;letter-spacing:.005em!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{ color:#fce0ac!important;font-family:system-ui,-apple-system,Segoe UI,sans-serif!important; font-weight:900!important;letter-spacing:.008em!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-header-edit-actions button{ border-radius:11px!important; } @media(min-width:801px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{ grid-template-columns:76px minmax(0,1fr) minmax(250px,300px)!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{ padding:10px 6px!important;gap:6px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{ flex-basis:55px!important;width:62px!important;min-width:62px!important; height:55px!important;min-height:55px!important;max-height:55px!important; margin:0 auto!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn svg{width:21px!important;height:21px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-inspector{background:#fdfbff!important;padding:12px!important} } @media(min-width:801px) and (max-width:1100px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{grid-template-columns:68px minmax(0,1fr) minmax(212px,265px)!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{padding:5px 3px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{width:56px!important;min-width:56px!important;flex-basis:50px!important;height:50px!important;min-height:50px!important;max-height:50px!important} } @media(max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{ justify-content:flex-start!important;align-items:center!important; gap:4px!important;padding:4px 7px!important; scroll-snap-type:x proximity!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail .ccds-rail-btn{ flex:0 0 61px!important;width:61px!important;min-width:61px!important; height:56px!important;min-height:56px!important;max-height:56px!important; padding:4px 2px!important;gap:3px!important; scroll-snap-align:start!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn span{ font-size:10px!important;line-height:12px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn svg{ width:22px!important;height:22px!important;flex:0 0 22px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-native-photo-input{ inset:0!important;min-width:100%!important;height:100%!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-main>.ccds-stage-area{ padding:0 2px!important; } } @media(max-width:350px){ #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail{padding-inline:3px!important;gap:3px!important} #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail .ccds-rail-btn{ flex-basis:57px!important;width:57px!important;min-width:57px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-brand strong{font-size:10px!important} } @media(prefers-reduced-motion:reduce){ #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn{transition:none!important} } /* Beta 25 — Compact mobile photo selector (Main / 01–12). Late .ccds-product-multi-map rules previously overwrote the clock selector with five oversized columns. Preserve the selected-slot behaviour and all printable geometry; change only the control grid's presentation. */ @media screen and (max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact{ width:100%!important;max-width:none!important; padding:6px 7px!important;margin:0!important; border-radius:12px!important; overflow:visible!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-heading{ margin:0 0 5px!important;padding:0!important; min-height:16px!important;gap:0!important; align-items:center!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-heading strong{ font-size:11px!important;line-height:16px!important;font-weight:800!important; letter-spacing:.015em!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-heading small{ display:none!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid{ display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important; grid-auto-flow:row!important;gap:3px!important; min-width:0!important;width:100%!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid button.ccds-clock-slot{ box-sizing:border-box!important; display:flex!important;justify-content:center!important;align-items:center!important; min-width:0!important;width:100%!important;max-width:none!important; height:40px!important;min-height:40px!important;max-height:40px!important; padding:2px 1px!important;margin:0!important; font-size:11px!important;line-height:1!important;font-weight:800!important; border-radius:8px!important;white-space:nowrap!important; touch-action:manipulation!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid button.ccds-clock-slot.is-current{ outline:2px solid #f8d99d!important;outline-offset:0!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid button.ccds-clock-slot:focus-visible{ outline:3px solid #ffdb9a!important;outline-offset:1px!important; } } @media screen and (max-width:360px){ #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact{ padding:5px 5px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid{ gap:2px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid button.ccds-clock-slot{ height:39px!important;min-height:39px!important;max-height:39px!important; font-size:10px!important;border-radius:7px!important; } } @media screen and (max-width:315px){ #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid{ grid-template-columns:repeat(6,minmax(0,1fr))!important; } } /* Beta 26 — tighter numbered photo-selector buttons and a mobile toolbar lifted 2 mm (~8 CSS px) above the site's bottom navigation. Styles are UI-only; do not alter the product artwork, templates, or photo-slot logic. */ @media screen and (max-width:800px){ /* More compact two-row Main / 01–12 selector, without scaling the clock. */ #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact{ padding:4px 5px!important; border-radius:10px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-heading{ margin:0 0 3px!important;min-height:14px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-heading strong{ font-size:10px!important;line-height:14px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid{ grid-template-columns:repeat(8,minmax(0,1fr))!important; gap:3px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid button.ccds-clock-slot{ justify-self:center!important;align-self:center!important; width:100%!important;max-width:37px!important;min-width:0!important; height:33px!important;min-height:33px!important;max-height:33px!important; padding:1px!important;border-radius:7px!important; font-size:10px!important;line-height:1!important; } /* The full toolbar (including touch targets) sits 8px higher. Reserve clearance in the workspace rather than translating buttons out of their scrollable hit area or covering the photo selector. */ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{ padding-bottom:8px!important; box-sizing:border-box!important; background:linear-gradient(180deg,#fff 0%,#fff calc(100% - 8px),#221832 calc(100% - 8px),#221832 100%)!important; } } @media screen and (max-width:350px){ #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid{ gap:2px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-inspector>.ccds-clock-slots.ccds-clock-compact .ccds-clock-grid button.ccds-clock-slot{ height:32px!important;min-height:32px!important;max-height:32px!important; font-size:9px!important;border-radius:6px!important; } } @media screen and (max-width:800px) and (orientation:landscape) and (max-height:480px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace{ padding-bottom:8px!important; } } /* Beta 26 mobile grid fix: the legacy 68px rail height must match its allocated track. Otherwise it spills into the 8px footer clearance. */ @media screen and (max-width:800px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-multi-map .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-single-map .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(78px,15%) 64px!important; } #ccds-modal#ccds-modal.ccds-modern.ccds-has-many-photo-slots .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(98px,17%) 64px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail, #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-tool-rail, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail{ height:64px!important;min-height:64px!important;max-height:64px!important; padding:3px 6px!important;margin:0!important; box-sizing:border-box!important; } } @media screen and (max-width:800px) and (orientation:landscape) and (max-height:480px){ #ccds-modal#ccds-modal.ccds-modern .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-has-many-photo-slots .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(78px,21%) 60px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail, #ccds-modal#ccds-modal.ccds-modern.ccds-floral-clock .ccds-tool-rail{ height:60px!important;min-height:60px!important;max-height:60px!important; padding:2px 6px!important; } #ccds-modal#ccds-modal.ccds-modern .ccds-tool-rail .ccds-rail-btn, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-single-photo-flow .ccds-tool-rail .ccds-rail-btn{ height:54px!important;min-height:54px!important;max-height:54px!important; } } /* Keep the full second row visible even on 320px-wide phones. */ @media screen and (max-width:800px) and (orientation:portrait){ #ccds-modal#ccds-modal.ccds-modern.ccds-has-many-photo-slots .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(110px,17%) 64px!important; } } @media screen and (max-width:800px) and (orientation:portrait){ #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-product-multi-map.ccds-has-many-photo-slots .ccds-workspace, #ccds-modal#ccds-modal.ccds-modern.ccds-beta-product.ccds-floral-clock.ccds-has-many-photo-slots .ccds-workspace{ grid-template-rows:minmax(0,1fr) minmax(110px,17%) 64px!important; } }