.mega-group{border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 16px}.mega-group summary{list-style:none;cursor:pointer;font-weight:700;padding:14px 0;display:flex;justify-content:space-between;align-items:center}.mega-group summary::-webkit-details-marker{display:none}.mega-group[open] summary{border-bottom:1px solid var(--line)}.mega-stack{display:grid;gap:12px}.upload-section{margin:24px 0 8px;padding:17px;border:1px dashed #c9b6a4;border-radius:14px;background:#fffaf4}.upload-section h3{margin:0 0 5px;font-size:1rem}.upload-section p{margin:0 0 12px;color:var(--muted);font-size:.83rem;line-height:1.45}.upload-section input{font-size:.82rem;background:#fff}.upload-rights{font-size:.76rem!important;color:#8a5738!important}.uploaded-art{width:75%;max-height:165px;object-fit:contain;display:block;margin:0 auto 10px}.upload-badge{display:inline-block;background:#f2ded0;color:#8a471a;font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:99px;margin-bottom:8px}
.mockup .hoodie{position:relative;isolation:isolate}.mockup .hoodie::before{content:"";position:absolute;left:50%;transform:translateX(-50%);background:var(--shirt);box-shadow:inset 0 0 0 1px #0001;z-index:-1}.mockup .hoodie:not(.back)::before{top:-29px;width:118px;height:55px;border-radius:52px 52px 14px 14px}.mockup .hoodie.back::before{top:-48px;width:110px;height:95px;border-radius:58px 58px 20px 20px}.mockup .hoodie.back{padding-top:24px}
.customizer{grid-template-columns:minmax(390px,.82fr) minmax(520px,1.18fr);align-items:start}.preview-panel{padding:32px;min-height:770px;background:linear-gradient(145deg,#f2e4d7,#dfc5ad)}.preview-panel>.eyebrow{margin-bottom:8px}.preview-toggle{margin:0 auto 22px;width:max-content;padding:5px;background:#fff9f4;border:1px solid #dfd1c4;border-radius:999px}.preview-toggle button{min-width:112px}.mockup{height:620px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 43%,#fffdfb 0 26%,#fff8 48%,#cda98754 100%);border:1px solid #e2cdbb;box-shadow:inset 0 1px #fff,0 16px 28px #7e563425}.mockup::after{content:"Live garment preview";position:absolute;right:16px;bottom:14px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#735c4b}.mockup .real-tee-preview{width:min(92%,470px);height:560px;background-color:transparent!important;background-position:center;background-repeat:no-repeat;background-size:contain;box-shadow:none;border-radius:0;transform:perspective(900px) rotateY(-4deg);transition:transform .35s ease,background-image .35s ease}.mockup .real-tee-preview.tee-back{transform:perspective(900px) rotateY(4deg)}.mockup .real-tee-preview:hover{transform:perspective(900px) rotateY(0deg) scale(1.015)}.preview-panel>p:last-of-type{margin:17px auto 19px;max-width:460px;line-height:1.5;color:#665548}.preview-panel>.button{min-width:250px}
.mockup .real-tee-preview{position:relative;overflow:hidden}.mockup .real-tee-preview .uploaded-art{position:absolute;z-index:3;left:50%;top:46%;width:46%;max-height:45%;object-fit:contain;transform:translate(-50%,-50%) scale(var(--art-scale,1));transform-origin:center;filter:drop-shadow(0 1px 1px #0003);pointer-events:none}.mockup .real-tee-preview .upload-badge{position:absolute;z-index:4;top:14%;left:50%;transform:translateX(-50%);font-size:.58rem;letter-spacing:.1em;font-weight:800;color:#48392f;background:#fff9;padding:3px 6px;border-radius:99px}.mockup .real-tee-preview>span:last-child{position:absolute;z-index:2;left:50%;top:62%;transform:translateX(-50%);font-weight:800;font-size:clamp(.75rem,1.6vw,1.05rem);text-shadow:0 1px #fff8;white-space:nowrap}.artwork-controls{margin-top:16px;padding:14px;border:1px solid #e3d5c8;border-radius:12px;background:#fffaf5}.artwork-controls label{display:flex;justify-content:space-between;font-size:.84rem;font-weight:700;color:#5d493b}.artwork-controls output{color:#d95f19}.artwork-controls input[type=range]{width:100%;accent-color:#f56c18;margin:10px 0}.text-button{border:0;background:none;padding:0;color:#d95f19;text-decoration:underline;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:900px){.customizer{grid-template-columns:1fr}.preview-panel{min-height:0}.mockup{height:500px}.mockup .real-tee-preview{height:450px;width:min(96%,400px)}}
@media(max-width:520px){.preview-panel{padding:20px}.mockup{height:405px}.mockup .real-tee-preview{height:365px;width:100%}.preview-toggle button{min-width:100px}.mockup::after{font-size:.58rem}}