.deer-designer-container{position:sticky;position:-webkit-sticky;top:16px;width:100%;max-width:400px;margin:0 auto}.deer-designer-image{position:relative;width:100%;width:260px;margin:0 auto;overflow:hidden}.deer-designer-image .deer-base-image{width:100%;height:auto;display:block;position:relative;z-index:1;pointer-events:none;user-select:none;-webkit-user-drag:none}.deer-designer-image .deer-design-layers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}.deer-designer-image .deer-design-layers>div{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.deer-designer-image .deer-design-layers .deer-background-image,.deer-designer-image .deer-design-layers .deer-text-element,.deer-designer-image .deer-design-layers .deer-uploaded-image{z-index:10}.deer-designer-image .deer-design-layers .deer-background-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;pointer-events:none}.deer-designer-image .deer-design-layers .deer-image-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.deer-designer-image .deer-design-layers .deer-text-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}.deer-designer-image .deer-design-layers .deer-frame-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4;pointer-events:none!important}.deer-designer-image .deer-design-layers .deer-frame-layer .deer-frame-overlay{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none!important;z-index:1;user-select:none;-webkit-user-drag:none}.deer-designer-controls{margin:16px 0;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);border:1px solid #e5e7eb}.deer-control-panel{display:flex;flex-direction:column;gap:1rem}.deer-control-group{padding:1.25rem;background:#f9fafb;border-radius:10px;border:1px solid #e5e7eb;transition:all .2s ease}.deer-control-group.hidden{display:none}.deer-control-group:hover{background:#f3f4f6}.deer-control-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.deer-control-header .deer-icon{display:none}.deer-control-header .deer-control-title{margin:0;font-size:1.5rem;font-weight:600;color:#374151;letter-spacing:0}.deer-save-load,.deer-text-controls .deer-text-input-group{margin-bottom:1.25rem}.deer-upload-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.deer-upload-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;background:#fff;color:#6b7280;border:2px dashed #d1d5db;border-radius:8px;cursor:pointer;font-size:1.4rem;font-weight:500;transition:all .2s ease;text-decoration:none;user-select:none;position:relative}.deer-upload-btn:hover{border-color:#667eea;background:#f9fafb;color:#667eea}.deer-upload-btn.drag-over{border-color:#667eea;background:#eef2ff;color:#667eea;border-style:solid}.deer-upload-btn .deer-file-input{display:none}.deer-upload-btn .deer-upload-icon{width:24px;height:24px;flex-shrink:0;stroke-width:2;opacity:.7}.deer-upload-btn span{font-size:1.3rem;text-align:center}.deer-upload-btn span .deer-upload-hint{display:block;font-size:1.2rem;color:#9ca3af;margin-top:.25rem}.deer-text-controls .deer-text-input-group .deer-label{display:block;margin-bottom:.5rem;font-size:1.4rem;font-weight:500;color:#374151}.deer-text-controls .deer-text-input-group .deer-label .deer-option-icon{display:none}.deer-text-controls .deer-text-input-group .deer-text-input{width:100%;padding:1.4rem;border:1px solid #d1d5db;border-radius:6px;font-size:1.4rem;transition:all .2s ease;background:#fff;outline:0}.deer-text-controls .deer-text-input-group .deer-text-input:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.deer-text-controls .deer-text-input-group .deer-text-input::placeholder{color:#9ca3af}.deer-text-controls .deer-text-input-group .deer-input-hint{display:flex;align-items:center;gap:.375rem;margin-top:.5rem;font-size:1.2rem;color:#9ca3af}.deer-text-controls .deer-text-input-group .deer-input-hint svg{flex-shrink:0;opacity:.7}.deer-text-controls .deer-text-options{display:flex;flex-direction:column;gap:1rem}.deer-text-controls .deer-size-color-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.deer-text-controls .deer-size-color-row .deer-option-group{display:flex;flex-direction:column}.deer-text-controls .deer-option-group .deer-label{display:block;margin-bottom:.5rem;font-size:1.4rem;font-weight:500;color:#374151;min-height:20px}.deer-text-controls .deer-option-group .deer-label .deer-option-icon{display:none}.deer-text-controls .deer-option-group .deer-fonts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.deer-text-controls .deer-option-group .deer-font-card{padding:.75rem;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;transition:all .2s ease;min-height:50px;display:flex;align-items:center;justify-content:center}.deer-text-controls .deer-option-group .deer-font-card:hover{border-color:#667eea;background:#f9fafb}.deer-text-controls .deer-option-group .deer-font-card.active{border-color:#667eea;background:#eef2ff;border-width:2px}.deer-text-controls .deer-option-group .deer-font-card.deer-font-hidden{display:none}.deer-text-controls .deer-option-group .deer-font-load-more{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.75rem;margin-bottom:10px;padding:.625rem 1rem;background:0 0;border:1px dashed #d1d5db;border-radius:6px;color:#667eea;font-size:1.3rem;font-weight:500;cursor:pointer;transition:all .2s ease}.deer-text-controls .deer-option-group .deer-font-load-more:hover{border-color:#667eea;background:#f9fafb}.deer-text-controls .deer-option-group .deer-font-load-more svg{transition:transform .3s ease}.deer-text-controls .deer-option-group .deer-font-preview{font-size:1.6rem;color:#374151;text-align:center;word-break:break-word;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.deer-text-controls .deer-option-group .deer-slider-wrapper{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#fff;border-radius:6px;border:1px solid #d1d5db;min-height:44px}.deer-text-controls .deer-option-group .deer-slider-wrapper .deer-size-slider{flex:1;height:4px;border-radius:4px;background:#e5e7eb;outline:0;-webkit-appearance:none;appearance:none;cursor:pointer}.deer-text-controls .deer-option-group .deer-slider-wrapper .deer-size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;transition:all .2s ease}.deer-text-controls .deer-option-group .deer-slider-wrapper .deer-size-slider::-webkit-slider-thumb:hover{background:#5568d3}.deer-text-controls .deer-option-group .deer-slider-wrapper .deer-size-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:all .2s ease}.deer-text-controls .deer-option-group .deer-slider-wrapper .deer-size-slider::-moz-range-thumb:hover{background:#5568d3}.deer-text-controls .deer-option-group .deer-slider-wrapper .deer-size-value{min-width:50px;text-align:center;font-size:1.4rem;font-weight:600;color:#374151;padding:.25rem .5rem;background:#f9fafb;border-radius:4px}.deer-text-controls .deer-option-group .deer-color-wrapper{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#fff;border-radius:6px;border:1px solid #d1d5db;min-height:44px}.deer-text-controls .deer-option-group .deer-color-wrapper .deer-color-picker{width:26px;height:26px;border:2px solid #e5e7eb;border-radius:6px;cursor:pointer;padding:0;background:0 0;-webkit-appearance:none;appearance:none;transition:all .2s ease;flex-shrink:0}.deer-background-image:active,.deer-uploaded-image:active{cursor:grabbing!important}.deer-text-controls .deer-option-group .deer-color-wrapper .deer-color-picker:hover{border-color:#667eea}.deer-text-controls .deer-option-group .deer-color-wrapper .deer-color-picker::-webkit-color-swatch-wrapper{padding:0}.deer-text-controls .deer-option-group .deer-color-wrapper .deer-color-picker::-webkit-color-swatch{border:none;border-radius:4px}.deer-text-controls .deer-option-group .deer-color-wrapper .deer-color-picker::-moz-color-swatch{border:none;border-radius:4px}.deer-text-controls .deer-option-group .deer-color-wrapper .deer-color-value{flex:1;font-family:monospace;font-size:1.3rem;font-weight:500;color:#374151}.deer-background-image{pointer-events:auto!important}.deer-uploaded-image{pointer-events:auto!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important}.deer-text-wrapper{position:relative;display:inline-block}.deer-text-wrapper:hover .deer-text-remove-btn{opacity:1}.deer-text-wrapper:hover .deer-text-element{border-color:rgba(102,126,234,.3)}.deer-text-element{pointer-events:auto!important;border:2px dashed transparent;border-radius:4px;background:0 0!important;position:relative}.deer-text-element:focus{border-color:#667eea;background:0 0!important}.deer-text-element[contenteditable=true]:focus{cursor:text}.deer-text-remove-btn{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;background:#ef4444;border:2px solid #fff;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;z-index:10;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.15)}.deer-text-remove-btn:hover{background:#dc2626;transform:scale(1.1)}.deer-text-remove-btn:active{transform:scale(.95)}.deer-text-remove-btn svg{flex-shrink:0}.deer-image-controls{display:flex;flex-direction:column;gap:1rem;margin:1.5rem auto;padding:1rem;background:rgba(255,255,255,.98);border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.08);max-width:100%;backdrop-filter:blur(12px)}.deer-image-controls>div:first-child{display:flex;gap:.5rem;justify-content:center}.deer-image-controls .deer-control-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:12px;background:#f3f4f6;color:#374151;cursor:pointer;transition:all .15s ease;outline:0}.deer-image-controls .deer-control-btn:hover{background:#667eea;color:#fff;transform:scale(1.05)}.deer-image-controls .deer-control-btn:active{transform:scale(.95)}.deer-image-controls .deer-control-btn svg{width:20px;height:20px;display:block}.deer-image-controls .deer-control-btn svg.rotate-left-icon{transform:scaleX(-1)}.deer-image-controls .deer-filter-controls{display:flex;gap:.75rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:thin;scrollbar-color:rgba(102,126,234,.3) transparent}.deer-image-controls .deer-filter-controls::-webkit-scrollbar{height:6px}.deer-image-controls .deer-filter-controls::-webkit-scrollbar-track{background:0 0}.deer-image-controls .deer-filter-controls::-webkit-scrollbar-thumb{background:rgba(102,126,234,.3);border-radius:3px}.deer-image-controls .deer-filter-controls::-webkit-scrollbar-thumb:hover{background:rgba(102,126,234,.5)}.deer-image-controls .deer-filter-controls .deer-filter-btn{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.5rem;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;outline:0;min-width:70px}.deer-image-controls .deer-filter-controls .deer-filter-btn .deer-filter-preview{width:60px;height:60px;object-fit:cover;border-radius:4px;pointer-events:none}.deer-image-controls .deer-filter-controls .deer-filter-btn .deer-filter-label{font-size:1.1rem;font-weight:500;color:#374151;text-align:center;line-height:1.2}.deer-image-controls .deer-filter-controls .deer-filter-btn:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.2)}.deer-image-controls .deer-filter-controls .deer-filter-btn:hover .deer-filter-label{color:#667eea}.deer-image-controls .deer-filter-controls .deer-filter-btn.active{border-color:#667eea;border-width:3px;box-shadow:0 4px 16px rgba(102,126,234,.3)}.deer-image-controls .deer-filter-controls .deer-filter-btn.active .deer-filter-label{color:#667eea;font-weight:600}.deer-image-controls .deer-filter-controls .deer-filter-btn:active{transform:translateY(0)}.product-left.position-sticky{top:16px;position:sticky;position:-webkit-sticky}@media (max-width:768px){.deer-control-group,.deer-designer-controls{padding:1rem}.deer-text-controls .deer-text-options{gap:1rem}.deer-text-controls .deer-fonts-grid,.deer-text-controls .deer-size-color-row,.deer-upload-section{grid-template-columns:1fr}}.deer-model-selection{margin:1rem 0;padding:0;background:0 0}.deer-model-selection .deer-selection-loading{padding:.75rem 0;color:#6b7280;font-size:1.3rem;text-align:center}.deer-model-selection .deer-selection-content{display:flex;gap:16px}.deer-load-dialog .deer-dialog-actions,.deer-save-dialog .deer-dialog-actions,.deer-save-load{gap:.75rem;display:flex}@media (max-width:576px){.deer-model-selection .deer-selection-content{flex-direction:column}}.deer-model-selection .deer-selection-content select.form-control{flex:1;padding:.75rem 2.5rem .75rem 1rem;border:1px solid #d1d5db;border-radius:6px;font-size:1.4rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E") right .75rem center no-repeat #fff;background-size:12px;color:#374151;transition:border-color .2s ease;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}.deer-model-selection .deer-selection-content select.form-control:focus{outline:0;border-color:#667eea}.deer-model-selection .deer-selection-content select.form-control:disabled{background-color:#f9fafb;color:#9ca3af;cursor:not-allowed}.deer-model-selection .deer-selection-error{padding:.75rem 0;color:#dc3545;font-size:1.3rem;text-align:center}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.deer-save-load button{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:.625rem;padding:1rem 1.25rem;background:linear-gradient(135deg,#fff 0,#f8f9fa 100%);border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(0,0,0,.04);font-size:1.4rem;font-weight:600;color:#374151;overflow:hidden}.deer-save-load button span{position:relative;z-index:1;transition:color .3s ease}.deer-save-load button::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);opacity:0;transition:opacity .3s ease;z-index:0}.deer-save-load button svg{position:relative;z-index:1;stroke:#667eea;transition:all .3s ease;flex-shrink:0}.deer-save-load button:hover{border-color:#667eea;transform:translateY(-3px);box-shadow:0 8px 24px rgba(102,126,234,.25)}.deer-save-load button:hover::before{opacity:1}.deer-save-load button:hover svg{stroke:#fff;transform:scale(1.1)}.deer-save-load button:hover span{color:#fff}.deer-save-load button:active{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,.2)}.deer-save-load button::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%);transition:width .6s,height .6s}.deer-save-load button:active::after{width:200px;height:200px}@media (max-width:576px){.deer-save-load{gap:.5rem}.deer-save-load button{padding:.875rem 1rem;font-size:1.3rem}.deer-save-load button svg{width:16px;height:16px}.deer-save-load button span{display:none}}.deer-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);padding:1rem 1.5rem;background:#374151;color:#fff;border-radius:8px;font-size:1.4rem;font-weight:500;box-shadow:0 10px 40px rgba(0,0,0,.3);z-index:10000;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.deer-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.deer-load-dialog,.deer-save-dialog{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem;animation:fadeIn .2s ease}.deer-load-dialog .deer-dialog-content,.deer-save-dialog .deer-dialog-content{background:#fff;padding:2rem;border-radius:16px;max-width:450px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .3s ease}.deer-load-dialog .deer-dialog-content h4,.deer-save-dialog .deer-dialog-content h4{margin:0 0 1.5rem;font-size:2rem;font-weight:700;color:#111827}.deer-load-dialog .deer-dialog-content p,.deer-save-dialog .deer-dialog-content p{margin:0 0 1.5rem;font-size:1.4rem;color:#6b7280;line-height:1.6}.deer-load-dialog .deer-dialog-content.deer-dialog-large,.deer-save-dialog .deer-dialog-content.deer-dialog-large{max-width:600px}.deer-load-dialog .deer-design-name-input,.deer-save-dialog .deer-design-name-input{width:100%;padding:.875rem 1rem;border:2px solid #e5e7eb;border-radius:8px;font-size:1.4rem;margin-bottom:1.5rem;transition:all .2s ease}.deer-load-dialog .deer-design-name-input:focus,.deer-save-dialog .deer-design-name-input:focus{outline:0;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.deer-load-dialog .deer-design-name-input::placeholder,.deer-save-dialog .deer-design-name-input::placeholder{color:#9ca3af}.deer-load-dialog .deer-btn-primary,.deer-load-dialog .deer-btn-secondary,.deer-save-dialog .deer-btn-primary,.deer-save-dialog .deer-btn-secondary{padding:.875rem 1.5rem;border-radius:8px;font-size:1.4rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.deer-load-dialog .deer-dialog-actions button,.deer-save-dialog .deer-dialog-actions button{flex:1}.deer-load-dialog .deer-btn-secondary,.deer-save-dialog .deer-btn-secondary{background:#f3f4f6;color:#374151}.deer-load-dialog .deer-btn-secondary:hover,.deer-save-dialog .deer-btn-secondary:hover{background:#e5e7eb}.deer-load-dialog .deer-btn-primary,.deer-save-dialog .deer-btn-primary{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff}.deer-load-dialog .deer-btn-primary:hover,.deer-save-dialog .deer-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.4)}.deer-load-dialog .deer-btn-primary:active,.deer-save-dialog .deer-btn-primary:active{transform:translateY(0)}.deer-load-dialog .deer-close-btn,.deer-save-dialog .deer-close-btn{width:100%;margin-top:1rem}.deer-designs-list{max-height:400px;overflow-y:auto;margin-bottom:1rem;padding-right:.5rem}.deer-designs-list::-webkit-scrollbar{width:6px}.deer-designs-list::-webkit-scrollbar-track{background:#f3f4f6;border-radius:3px}.deer-designs-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.deer-designs-list::-webkit-scrollbar-thumb:hover{background:#9ca3af}.deer-design-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#f9fafb;border:2px solid #e5e7eb;border-radius:10px;margin-bottom:.75rem;transition:all .2s ease}.deer-design-item:hover{background:#fff;border-color:#667eea;transform:translateX(4px)}.deer-design-item .deer-design-info{flex:1}.deer-design-item .deer-design-info h5{margin:0 0 .25rem;font-size:1.5rem;font-weight:600;color:#111827}.deer-design-item .deer-design-info .deer-design-date{font-size:1.2rem;color:#9ca3af}.deer-design-item .deer-design-actions{display:flex;gap:.5rem}.deer-design-item .deer-design-actions button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.deer-design-item .deer-design-actions button svg{stroke:currentColor}.deer-design-item .deer-design-actions button.deer-btn-load{background:#667eea;color:#fff}.deer-design-item .deer-design-actions button.deer-btn-load:hover{background:#5568d3;transform:scale(1.1)}.deer-design-item .deer-design-actions button.deer-btn-delete{background:#fee2e2;color:#dc2626}.deer-design-item .deer-design-actions button.deer-btn-delete:hover{background:#fecaca;transform:scale(1.1)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}