.custom-image-uploader .custom-image-uploader{width:100%;max-width:600px;max-width:1200px;margin:2rem auto;padding:1rem}.custom-image-uploader__container{color:rgb(var(--color-foreground))}.custom-image-uploader__container .custom-image-uploader__title{display:grid;font-size:1.5rem;grid-template-columns:1fr 1fr;font-weight:600;gap:3rem;margin-bottom:1rem;align-items:start;text-align:center}.mockup-display,.custom-image-uploader__description{align-items:center;justify-content:center}:is(.mockup-display,.custom-image-uploader__description) .mockup-container{font-size:.9rem;background:linear-gradient(135deg,#e8daff,#c7b3e5);color:rgba(var(--color-foreground),.7);border-radius:16px;text-align:center;padding:3rem 2rem;margin-bottom:1.5rem;min-height:500px;line-height:1.5;display:flex}.upload-zone{border:2px dashed rgba(var(--color-foreground),.3)}.upload-zone .mockup-scene{border-radius:12px;display:flex;padding:3rem 2rem;align-items:flex-end;text-align:center;justify-content:center;transition:all .3s ease;gap:1rem;background-color:rgba(var(--color-foreground),.02);width:100%;cursor:pointer;position:relative}.upload-zone:hover .pillow-mockup{border-color:rgba(var(--color-foreground),.5);position:relative;background-color:rgba(var(--color-foreground),.05);transition:transform .3s ease}.upload-zone.dragging{transform:scale(1.02)}.upload-zone.dragging .pillow-mockup:hover{border-color:rgb(var(--color-button));transform:translateY(-10px);background-color:rgba(var(--color-button),.1)}.pillow-mockup__shape{position:relative;align-items:center;justify-content:center;width:100%;height:100%;fill:currentColor;width:120px;height:150px;font-size:1.1rem;font-weight:500;max-height:120px}.pillow-mockup__shape .upload-zone__icon{background:#fff;width:64px;border-radius:40% 40% 45% 45%/50% 50% 40% 40%;height:64px;box-shadow:0 20px 40px #00000026;margin:0 auto 1rem;overflow:hidden;opacity:.6;display:flex}.pillow-mockup__shape .pillow-mockup--small .pillow-mockup__image{margin-bottom:.5rem;width:90px;color:rgb(var(--color-foreground));height:auto}.upload-zone__subtext{font-size:.875rem;color:rgba(var(--color-foreground),.6);height:220px;background:#9b7fd9;display:inline-block;padding:.75rem 2rem;font-size:1rem;font-weight:500;cursor:pointer;height:290px}.upload-zone__subtext .pillow-mockup--medium .pillow-mockup__shape{margin-bottom:1.5rem;width:180px}.upload-zone__subtext .pillow-mockup--medium .pillow-mockup__image{background-color:rgb(var(--color-button));width:140px;color:rgb(var(--color-button-text));height:auto;border:none;max-height:180px;border-radius:6px}.upload-zone__subtext .pillow-mockup--large .pillow-mockup__shape{transition:all .3s ease;width:240px}.upload-trigger:hover{transform:translateY(-2px);height:auto;max-height:240px;display:none}.upload-trigger:hover .pillow-mockup--large .pillow-mockup__image{box-shadow:0 4px 12px rgba(var(--color-button),.3);width:190px}.pillow-mockup__image{object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1));position:fixed;top:0;left:0;pointer-events:none}.pillow-mockup__image .pillow-mockup__label{right:0;position:absolute;bottom:0;top:50%;background-color:#000000b3;left:50%;display:none;transform:translate(-50%,-50%);align-items:center;text-align:center;justify-content:center;color:#fff;z-index:9999;font-weight:700;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 2px 4px rgba(0,0,0,.2)}.loading-overlay__content{background:#fff}.loading-overlay__content .pillow-mockup__size{padding:2rem 3rem;font-size:1.1rem;border-radius:12px;letter-spacing:1px;text-align:center;margin-bottom:.25rem;box-shadow:0 10px 40px #0000004d}.pillow-mockup__badge{border:4px solid rgba(var(--color-button),.2);border-top-color:rgb(var(--color-button));border-radius:16px;padding:2rem;@keyframes spin{border: 1px solid rgba(255,255,255,.8); to {transform: rotate(360deg);}}}.pillow-mockup__badge .loading-spinner{font-size:.75rem;width:50px;letter-spacing:.5px;height:50px}.pillow-mockup__badge .upload-controls{animation:spin .8s linear infinite;background:#fff9;margin:0 auto 1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.upload-controls__header{font-weight:500;color:rgb(var(--color-foreground));font-weight:700;color:#333;color:rgba(var(--color-foreground),.6);margin-top:.5rem;color:#666;font-size:.95rem;line-height:1.5;width:200px;height:4px;background-color:rgba(var(--color-button),.2)}.upload-controls__header .loading-overlay__text{margin-bottom:2rem;font-size:1.1rem}.upload-controls__header .upload-controls__title{margin-top:.5rem;font-size:1.75rem}.upload-controls__header .loading-overlay__subtext{margin-bottom:.5rem;font-size:.875rem}.upload-controls__header .upload-zone__row{border-radius:2px;display:flex;margin:1rem auto 1.5rem;align-items:center;overflow:hidden;justify-content:space-between;position:relative}.loading-progress__bar .upload-zone__label{height:100%;font-weight:600;background-color:rgb(var(--color-button));color:#333;width:0%;font-size:1rem;animation:progressAnimation 2s ease-in-out infinite}@keyframes progressAnimation{.upload-trigger,0% {.edit-notes-trigger {width: 0%; padding: .65rem 1.75rem; margin-left: 0%; background: white;} border: 2px solid #E0E0E0; 50% {border-radius: 8px; width: 75%; font-weight: 600; margin-left: 0%; font-size: .85rem;} letter-spacing: .5px; 100% {cursor: pointer; width: 0%; transition: all .2s ease; margin-left: 100%; color: #333;}}}.upload-trigger:hover,.edit-notes-trigger:hover{margin-top:1rem;background-color:#fee;border:1px solid #fcc;font-size:.9rem}:is(.upload-trigger:hover,.edit-notes-trigger:hover) .error-message{background:#f5f5f5;display:none;border-color:#9b7fd9;padding:1rem}:is(.upload-trigger:hover,.edit-notes-trigger:hover) .size-selector{border-radius:6px;flex-direction:column;color:#c33;align-items:flex-start;text-align:center}.size-options{display:flex;gap:1rem;padding:2rem;background:linear-gradient(135deg,rgba(var(--color-foreground),.03),rgba(var(--color-foreground),.06))}.size-options .mockup-container{margin-top:1rem;display:none;width:100%;position:relative}.size-options .size-option{border-radius:12px;flex:1;min-height:400px;cursor:pointer}.mockup-scene{display:flex;align-items:center;border:2px solid #E0E0E0;border-radius:8px}.mockup-scene .size-option input[type=radio]{width:100%;display:none;height:400px}.mockup-scene .size-option__content{justify-content:center;display:flex;transform-style:preserve-3d;flex-direction:column;transition:transform .1s ease-out;align-items:center;cursor:grab;padding:1rem;perspective:1000px;background:#fff}.mockup-scene .mockup-scene:active{transition:all .2s ease;cursor:grabbing}.size-option input[type=radio]:checked+.size-option__content .mockup-wrapper{border-color:#ff7b9c;position:relative;background:#fff5f8;transform-style:preserve-3d}.size-option--popular .size-option__content{border-radius:8px;box-shadow:0 10px 40px #0003;margin-bottom:.25rem}.size-option--popular .size-option__content .mockup-image{background:#ff7b9c;max-width:100%;color:#fff;max-height:350px;border-color:#ff7b9c;object-fit:contain}.size-option--popular .size-option__content .size-option__old-price{background:#fff;font-size:.85rem;padding:1rem;opacity:.6}.rotation-controls{gap:1rem;margin-top:1.5rem;flex-wrap:wrap;font-size:.8rem;color:#666;border:1px solid rgba(var(--color-foreground),.2);background:#fff;justify-content:center;padding:1.25rem;background:linear-gradient(135deg,#ff7b9c,#ff5a7e);font-size:1rem;letter-spacing:1px;gap:.75rem;transition:all .3s ease;height:30px;background-color:rgba(var(--color-foreground),.2);transform:translateY(-2px);box-shadow:0 6px 20px #ff7b9c66;padding:.5rem 1rem;font-size:.875rem;cursor:pointer;transition:all .2s ease;position:fixed;top:0;background:#000000b3;display:none;align-items:center;background-color:transparent;color:rgb(var(--color-foreground))}.rotation-controls .size-option__price{display:flex;font-size:1.25rem;justify-content:center;font-weight:700;align-items:center}.rotation-controls .rotation-controls__button{margin:1.5rem 0;width:40px;text-align:center;height:40px}.rotation-controls .upload-zone__terms a{border-radius:6px;color:#9b7fd9;display:flex;text-decoration:underline;align-items:center}.rotation-controls .upload-my-photo-btn{padding:0;width:100%}.rotation-controls .rotation-controls__button:hover{color:#fff;background-color:rgba(var(--color-button),.1);border:none;border-color:rgb(var(--color-button));border-radius:12px;transform:scale(1.1);font-weight:700}.rotation-controls .rotation-controls__button svg{cursor:pointer;width:20px;display:flex;height:20px;align-items:center;fill:currentColor;justify-content:center}.rotation-controls .rotation-controls__divider{box-shadow:0 4px 12px #ff7b9c4d;width:1px}.rotation-controls .upload-icon{border:1px solid rgba(var(--color-foreground),.3);width:24px;color:rgb(var(--color-foreground));height:24px;border-radius:6px}.rotation-controls .reset-rotation:hover{left:0;background-color:rgba(var(--color-foreground),.05);right:0;border-color:rgba(var(--color-foreground),.5);bottom:0}.rotation-controls .reset-button{justify-content:center;display:none;z-index:9999;margin:1.5rem auto 0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:.75rem 2rem}.rotation-controls .loading-overlay__content{border:2px solid rgba(var(--color-foreground),.3);background:#fff;padding:2.5rem 3rem;font-size:1rem;border-radius:16px;font-weight:500;text-align:center;cursor:pointer;box-shadow:0 10px 40px #0000004d;transition:all .3s ease}.loading-spinner{border-radius:50%;animation:spin .8s linear infinite;margin:1rem auto;text-align:center;@keyframes spin{font-size: .875rem; to {transform: rotate(360deg);} color: rgba(var(--color-foreground),.6);}}.loading-spinner .reset-button:hover{width:50px;background-color:rgba(var(--color-foreground),.05);height:50px;border-color:rgb(var(--color-foreground));border:4px solid rgba(155,127,217,.2);transform:translateY(-2px);border-top-color:#9b7fd9}.loading-overlay__text{gap:.5rem;margin-top:.5rem}.loading-overlay__text .mockup-info__tip{font-size:1.1rem;display:flex;font-weight:600;align-items:center;color:#333;justify-content:center}.error-message{display:none;border-radius:8px;color:#c33;text-align:center;position:absolute;top:50%}.error-message .mockup-info__tip svg{padding:1rem;width:16px;margin-top:1rem;height:16px;background:#fee;opacity:.6;border:1px solid #FCC}@media screen and (max-width: 749px){.error-message{font-size:.9rem;padding:.5rem}}.error-message .reset-button{padding:.75rem 1.5rem;background:transparent;border-radius:8px;font-weight:600}.error-message .reset-button .upload-zone{display:none;padding:2rem 1rem;margin:1.5rem auto 0}.error-message .reset-button .custom-image-uploader__title{color:#666;font-size:1.25rem;border:2px solid #E0E0E0}.error-message .reset-button .mockup-scene{cursor:pointer;height:300px;transition:all .2s ease}.error-message .mockup-image{border-color:#9b7fd9;color:#9b7fd9;gap:.5rem}.error-message .mockup-image .reset-button:hover{max-height:250px;background:#f5f5f5}@media screen and (max-width: 900px){.error-message .rotation-controls__button .custom-image-uploader__container{width:35px;grid-template-columns:1fr;height:35px;gap:2rem}}.error-message .mockup-display,.error-message .mockup-container{@keyframes fadeIn{min-height: 400px; from {} opacity: 0; transform: translateY(10px); .pillow-mockup--small .pillow-mockup__shape {} width: 100px; to {height: 130px; opacity: 1;} transform: translateY(0);}width:150px;height:190px;animation:fadeIn .5s ease}.error-message .pillow-mockup--large .pillow-mockup__shape{width:200px;height:250px;content:""}@media screen and (max-width: 600px){.error-message{left:50%;height:80%;background:radial-gradient(circle,rgba(var(--color-button),.1) 0%,transparent 70%)}.error-message .mockup-scene{transform:translate(-50%,-50%);gap:.5rem;width:80%}.error-message .pillow-mockup--small .pillow-mockup__shape{border-radius:50%;width:70px;z-index:-1;height:90px;opacity:.5}}.error-message .pillow-mockup--medium .pillow-mockup__shape{width:110px}.error-message .pillow-mockup--medium .pillow-mockup__shape .mockup-container.loaded{height:140px;animation:fadeIn .5s ease}.error-message .pillow-mockup--large .pillow-mockup__shape{width:150px;position:absolute;bottom:1rem;font-size:.75rem;color:rgba(var(--color-foreground),.4);transition:opacity .3s ease}.error-message .pillow-mockup--large .pillow-mockup__shape .mockup-scene:after{height:190px;content:"Drag to rotate"}.error-message .pillow-mockup--large .pillow-mockup__shape .size-options{left:50%;flex-direction:column;transform:translate(-50%)}.error-message .pillow-mockup--large .pillow-mockup__shape .upload-controls{pointer-events:none;padding:1.5rem;opacity:1}.mockup-scene.rotating:after{@keyframes fadeIn{opacity: 0; from {} opacity: 0; transform: translateY(20px);}}:is() to{opacity:1;transform:translateY(0)}.custom-image-uploader{animation:fadeIn .5s ease}
/*# sourceMappingURL=/cdn/shop/t/8/assets/custom-image-uploader.css.map */