.tryon{background:#edf1e8}.tryon-intro{max-width:740px}.tryon-intro p{color:var(--muted)}.tryon-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:26px;align-items:start;margin-top:30px}.tryon-workspace{min-width:0}.tryon-upload{padding:32px;background:white;border:1px dashed #9eae9b;border-radius:7px;text-align:center}.tryon-upload h3{margin:0 0 12px}.upload-btn{cursor:pointer}.upload-btn input{position:absolute;width:1px;height:1px;opacity:0}.upload-btn:focus-within{outline:3px solid #578346;outline-offset:4px}.tryon-upload .actions{justify-content:center;margin:20px 0 8px}.tryon-stage{position:relative;overflow:hidden;background:#dfe5d9;border-radius:5px;margin-top:18px;touch-action:none;line-height:0}.tryon-stage canvas{display:block;width:100%;height:auto}.tryon-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.tryon-guide polygon{fill:none;stroke:#d7ef86;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:7 5}.corner-handle{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;padding:0;border:2px solid white;border-radius:50%;background:#173d2d;color:white;font-size:12px;line-height:26px;touch-action:none;cursor:grab;box-shadow:0 1px 7px #0007}.corner-handle:focus{outline:3px solid #d7ef86;outline-offset:3px}.corner-handle:active{cursor:grabbing}.tryon-panel{background:white;padding:23px;border:1px solid var(--line);border-radius:7px}.tryon-panel .field{margin-bottom:19px}.tryon-panel h3{margin-top:0}.tryon-panel .colour-swatches{gap:9px}.tryon-panel .colour-swatch{width:34px;height:34px}.tryon-panel .colour-swatch[aria-pressed=true]::after{left:10px;top:7px}.tryon-panel .btn{width:100%;margin:8px 0 0}.tryon-panel .btn:disabled{opacity:.5;cursor:not-allowed}.tryon-panel input[type=range]{padding:0;accent-color:var(--green)}.tryon-toggle{display:flex;gap:9px;align-items:center;font-size:14px;margin:16px 0;line-height:1.5}.tryon-toggle input{accent-color:var(--green)}.tryon-status{font-size:14px;line-height:1.6;color:var(--green);margin:14px 0}.tryon-steps{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;margin:20px 0}.tryon-steps span{padding-right:15px;border-right:1px solid #bdc8b8}.tryon-tips{font-size:13px;line-height:1.7;color:var(--muted);margin:12px 0}.tryon-panel .btn.light:hover,.product .btn.light:hover{background:var(--green);color:white}.tryon-photo-name{font-size:12px;line-height:1.5;color:var(--muted)}@media(max-width:850px){.tryon-layout{grid-template-columns:minmax(0,1fr)}.tryon-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.tryon-panel h3,.tryon-panel .tryon-colours,.tryon-panel .tryon-controls,.tryon-panel .tryon-tips{grid-column:1/-1}.tryon-upload{padding:25px 18px}.corner-handle{width:32px;height:32px}}@media(max-width:480px){.tryon-panel{display:block}.tryon-steps{gap:7px}.tryon-steps span{border:0;padding:0}.tryon-upload .btn{width:100%}}
.tryon-upload.loaded{padding:14px 18px;text-align:left}.tryon-upload.loaded h3,.tryon-upload.loaded>p:first-of-type{display:none}.tryon-upload.loaded .actions{margin:0;justify-content:flex-start}.tryon-upload.loaded .actions .btn{min-height:44px;font-size:13px;padding:10px 15px}.tryon-upload.loaded>p:last-child{font-size:12px;margin-top:8px}