body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden;margin:0;background:#000}#apparel-canvas{width:100%;height:100%;border-radius:.5rem;cursor:grab}#apparel-canvas:active{cursor:grabbing}#apparel-canvas-container{width:100vw;height:100vh;border-radius:.5rem}#image-editor-container{position:absolute;top:50%;transform:translateY(-50%);right:1%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:1}#fabricjs-container{width:512px;height:512px;padding:0;overflow:hidden;border:1px solid grey}.image-buttons{display:flex;gap:1rem;width:65%}#add-new-image-btn{border:1px solid white}#add-new-image-btn,#apply-image-btn{flex:1;background:transparent;color:#fff;padding:10px 16px;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .25s ease,border-color .25s ease,background .25s ease}#apply-image-btn{border:1px solid rgb(132,204,22)}#add-new-image-btn:hover,#apply-image-btn:hover{transform:scale(1.05)}#add-new-image-btn:active,#apply-image-btn:active{transform:translateY(-1px) scale(.97)}#fabric-canvas{width:100%;height:100%;display:block}.canvas-container{transform:scale(.25);transform-origin:top left}#upload-btn{position:absolute;bottom:20px;right:20px;padding:12px 24px;background:#007bff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;z-index:10}#upload-btn:hover{background:#0056b3}.fontcolor-icons{width:80px;height:80px;border:1px solid grey;padding:10px;box-sizing:border-box;cursor:pointer;display:flex;transition:transform .2s,border-color .2s}.fontcolor-icons:hover{transform:scale(1.05);border-color:#84cc16}#font-color-picker{width:100%;height:100%;border:none;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}#font-color-picker::-webkit-color-swatch-wrapper{padding:0;border:none}#font-color-picker::-webkit-color-swatch{border:none}#font-color-picker::-moz-color-swatch{border:none}#color-picker-form{position:fixed;top:50%;transform:translateY(-50%);right:1%;display:flex;flex-direction:column;align-items:center;gap:1rem}#base-color-picker{width:100%;height:100%;border:none;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}#base-color-picker::-webkit-color-swatch-wrapper{padding:0;border:none}#base-color-picker::-webkit-color-swatch{border:none}#base-color-picker::-moz-color-swatch{border:none}#left-menu{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:10}.menu-btn{background:#00000059;color:#fff;border:1px solid rgba(255,255,255,.25);width:180px;height:80px;padding:10px 16px;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .25s ease,border-color .25s ease,background .25s ease}.menu-btn:hover{border-color:#84cc16;background:#84cc1614;transform:translateY(-4px)}.menu-btn:active{transform:translateY(-1px) scale(.97)}.menu-btn.active{border-color:#84cc16;background:#84cc1614;transform:translateY(-4px)}.texture-container{position:fixed;top:50%;transform:translateY(-50%);right:1%;display:flex;flex-direction:column;align-items:center;gap:1rem}#texture-colors-container{display:flex;flex-direction:column;gap:1rem}.texture-icons{width:80px;height:80px;border:1px solid grey;padding:10px;box-sizing:border-box;cursor:pointer;position:relative;transition:transform .2s,border-color .2s}.texture-color{width:100%;height:100%}.texture-icons:hover{transform:scale(1.12);border-color:#84cc16}.texture-icons.active{border-color:#84cc16;transform:scale(1.1)}.texture-container:has(.texture-icons:hover) .texture-icons.active:not(:hover){border-color:gray;transform:scale(1)}.texture-heading{color:#fff;width:100%;background:none;border:none;letter-spacing:.15em;font-size:.875rem;margin:0;text-align:center;cursor:default}.texture-heading:after{content:"";display:block;height:1px;background:#fff;margin:6px auto 0;width:100%}.basecolor-heading{color:#fff;width:100%;background:none;border:none;letter-spacing:.15em;font-size:.875rem;margin:0;text-align:center;cursor:default}.basecolor-heading:after{content:"";display:block;height:1px;background:#fff;margin:6px auto 0;width:100%}.basecolor-icons{width:80px;height:80px;border:1px solid grey;padding:10px;box-sizing:border-box;cursor:pointer;position:relative;display:flex;transition:transform .2s,border-color .2s}.basecolor-icons:hover{transform:scale(1.05);border-color:#84cc16}#text-overlay-form{position:fixed;top:50%;transform:translateY(-50%);right:1%;display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:120px;max-width:200px;width:15%}#text-overlay-form h3{margin:.375rem;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;text-align:center;color:#fff}.text-form-content{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:90%;padding:.75rem;border:1px solid grey}#text-overlay-form label{color:#fff;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;align-self:flex-start;margin:0}#text-overlay-form input[type=number],#text-overlay-form input[type=text]{padding:8px;border:1px solid rgba(255,255,255,.25);background:#0003;color:#fff;width:100%;box-sizing:border-box;border-radius:4px}#text-overlay-form input[type=number]::-webkit-inner-spin-button,#text-overlay-form input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#text-overlay-form input[type=number]{-moz-appearance:textfield}#text-overlay-form input[type=number]:focus,#text-overlay-form input[type=text]:focus{outline:none}#apply-text-btn{background:transparent;color:#fff;border:1px solid rgb(132,204,22);padding:10px 16px;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-sizing:border-box;transition:transform .25s ease,border-color .25s ease,background .25s ease}#apply-text-btn:hover{transform:scale(1.05)}#apply-text-btn:active{transform:translateY(-1px) scale(.97)}.fontcolor-heading{color:#fff;width:100%;background:none;border:none;letter-spacing:.15em;font-size:.875rem;margin:0;text-align:center;cursor:default}.fontcolor-heading:after{content:"";display:block;height:1px;background:#fff;margin:6px auto 0;width:100%}#custom-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.popup-content{background:#000000e6;color:#fff;border:1px solid grey;padding:2rem 3rem;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:popupFadeIn .3s ease;display:flex;flex-direction:column;gap:1.5rem;height:200px;justify-content:center;align-items:center}.popup-content p{margin:0}#popup-ok-btn{background:transparent;color:#fff;border:1px solid rgb(132,204,22);padding:10px 16px;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .25s ease,border-color .25s ease,background .25s ease}#popup-ok-btn:hover{transform:scale(1.05)}@keyframes popupFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.selectCategory{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5rem}.category-heading{letter-spacing:.3em;border:none;touch-action:none;color:#fff;letter-spacing:.15em;text-transform:uppercase;margin:0}.category-container{display:flex;justify-content:space-evenly;align-items:center;width:100%}.category-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer}.category-wrapper:hover .category-card{transform:scale(1.05);border-color:#84cc16}.category-wrapper:hover .ui-category-config-button{border-color:#84cc16;background:#84cc1614;transform:translateY(-2px)}.category-wrapper.selected .category-card{border-color:#84cc16;background-color:#84cc1614}.category-card{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;border-radius:12px;background-color:#0000000d;transition:transform .2s ease,background-color .3s ease,border-color .3s ease;border:1px solid grey;pointer-events:none}.category-card img{width:70%}.ui-category-config-button{background:#00000059;color:#fff;border:1px solid rgba(255,255,255,.25);padding:12px 24px;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);min-width:120px;margin-top:10px;pointer-events:none;transition:transform .25s ease,border-color .25s ease,background .25s ease}#model-switcher{position:absolute;bottom:15px;right:1%;z-index:10;cursor:pointer;transition:transform .25s ease,filter .25s ease}#switch-model-icon{height:50px;filter:grayscale(100%) brightness(.7);border:1px solid rgba(255,255,255,.25);padding:10px;background:#00000059;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .25s ease,filter .25s ease,border-color .25s ease}#model-switcher:hover #switch-model-icon{transform:scale(1.1);filter:grayscale(0%) brightness(1);border-color:#84cc16}#pagination{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:.75rem;z-index:10;cursor:default}.page-box{background:#00000059;color:#ffffff80;border:1px solid rgba(255,255,255,.25);padding:10px 16px;font-size:.875rem;letter-spacing:.15em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;transition:color .25s ease,border-color .25s ease}.page-box.active{border-color:#fff}.page-connector{width:30px;height:1px;background:#ffffff40}.menu-btn,.texture-icons,.category-wrapper,.ui-category-config-button,#model-switcher,.page-box{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@media(hover:none)and (pointer:coarse){.menu-btn:hover,.texture-icons:hover,.category-wrapper:hover .category-card,.category-wrapper:hover .ui-category-config-button,#model-switcher:hover #switch-model-icon{transform:none}.menu-btn:active,.texture-icons:active,.category-wrapper:active .category-card{transform:scale(.95)}}#auto-rotate-toggle{position:absolute;bottom:15px;left:20px;z-index:10;cursor:pointer;transition:transform .25s ease,filter .25s ease}#rotate-icon{width:20px;height:20px;filter:grayscale(100%) brightness(.7);border:1px solid rgba(255,255,255,.25);padding:10px;background:#00000059;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .25s ease,filter .25s ease,border-color .25s ease}#auto-rotate-toggle:hover #rotate-icon{transform:scale(1.1);filter:grayscale(0%) brightness(1);border-color:#84cc16}#auto-rotate-toggle.active #rotate-icon{filter:grayscale(0%) brightness(1);border-color:#84cc16;stroke:#84cc16}.icon-tooltip{position:absolute;background:#000000e6;color:#fff;padding:6px 12px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:100}#model-switcher .icon-tooltip{bottom:50%;right:calc(100% + 8px);transform:translateY(50%)}#auto-rotate-toggle .icon-tooltip{bottom:50%;left:calc(100% + 8px);transform:translateY(50%)}#model-switcher:hover .icon-tooltip,#auto-rotate-toggle:hover .icon-tooltip,.texture-icons:hover .icon-tooltip,.basecolor-icons:hover .icon-tooltip{opacity:1}.texture-icons .icon-tooltip,.basecolor-icons .icon-tooltip{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}#mobile-menu-toggle{display:none;position:absolute;top:20px;left:20px;background:#00000059;color:#fff;border:1px solid rgba(255,255,255,.25);padding:10px 16px;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:11;transition:border-color .25s ease,background .25s ease}#mobile-menu-toggle:hover,#mobile-menu-toggle.active{border-color:#84cc16;background:#84cc1614}@media(max-width:1024px){#left-menu{display:none;left:10px;top:55px;gap:10px;transform:translateY(0)}#left-menu.show{display:flex}.menu-btn{width:140px;height:60px;font-size:.75rem;padding:8px 12px}.texture-heading,.basecolor-heading,.fontcolor-heading,#text-overlay-form h3{font-size:.65rem}#text-overlay-form label{font-size:.6rem}#apply-text-btn{font-size:.65rem;padding:10px 16px}.texture-container,#color-picker-form,#text-overlay-form,#image-editor-container{top:10px;right:10px;transform:none}#text-overlay-form{min-width:100px;max-width:150px}#texture-colors-container{flex-direction:row;flex-wrap:wrap;max-width:200px}.texture-icons,.basecolor-icons,.fontcolor-icons{width:25px;height:25px;padding:4px}#fabricjs-container{width:250px;height:250px}.canvas-container{transform:scale(.122)}.category-container{flex-direction:column;gap:2rem}.category-wrapper{width:70%}.category-card{width:100%;padding:15px}.category-card img{max-width:120px}#model-switcher{bottom:15px;right:10px}#auto-rotate-toggle{bottom:15px;left:10px}#pagination{display:none}#mobile-menu-toggle{display:block;top:10px;left:10px;padding:8px 12px;font-size:.75rem}.popup-content{padding:1.5rem 2rem;font-size:.875rem;height:150px}}@media(max-width:480px){#left-menu{left:5px;top:45px;gap:8px}.menu-btn{width:120px;height:50px;font-size:.65rem;padding:6px 10px}.texture-container,#color-picker-form,#text-overlay-form,#image-editor-container{top:5px;right:5px}#texture-colors-container{max-width:180px;gap:.5rem}#text-overlay-form{min-width:120px;max-width:140px}.basecolor-heading,.fontcolor-heading,#text-overlay-form h3{font-size:.6rem}#text-overlay-form label{font-size:.55rem}#apply-text-btn{font-size:.6rem}#fabricjs-container{width:150px;height:150px}.canvas-container{transform:scale(.073)}.selectCategory{gap:1.5rem;padding:20px 10px}.category-heading{font-size:.85rem}.category-wrapper{width:50%;max-width:280px}.category-card{height:140px;padding:10px}.category-card img{max-width:100px;max-height:100px}.ui-category-config-button{padding:8px 16px;font-size:.7rem;min-width:100px}#model-switcher{bottom:12px;right:5px}#auto-rotate-toggle{bottom:12px;left:5px}#mobile-menu-toggle{top:5px;left:5px;padding:6px 10px;font-size:.65rem}.image-buttons{gap:.5rem;display:flex;justify-content:center}#add-new-image-btn,#apply-image-btn{font-size:.6rem;padding:5px 8px}}@media(hover:none){.icon-tooltip{display:none}.texture-icons .icon-tooltip,.basecolor-icons .icon-tooltip{font-size:.6rem;padding:4px 8px}}