.tryon-trigger{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;margin:12px 0 0;padding:10px 16px;border:1px solid #deded9;border-radius:8px;background:#f5f4f0;color:#252a28;font:600 14px/1.4 Arial,sans-serif;cursor:pointer}
.tryon-trigger svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}.tryon-trigger:hover{border-color:#f76514;background:#fff5ed}
html.tryon-open{overflow:hidden}
dialog.tryon-dialog{position:fixed;inset:0;width:min(1180px,calc(100% - 40px));max-width:none;height:min(820px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);margin:auto;padding:0;border:0;border-radius:14px;background:#fff;color:#252a28;box-shadow:0 20px 100px #0003;font-family:Arial,sans-serif;text-align:left}
.tryon-dialog::backdrop{background:#1f2427a8;backdrop-filter:blur(5px)}
.tryon-dialog [hidden]{display:none!important}.tryon-shell{height:100%;display:flex;flex-direction:column;min-height:0}
.tryon-dialog button{font:600 13px/1.35 Arial,sans-serif;cursor:pointer;border:1px solid #dddfdb;border-radius:7px;background:#fff;color:#252a28;min-height:42px;padding:8px 12px;box-shadow:none;transition:background .15s,border-color .15s}
.tryon-dialog button:hover:not(:disabled){border-color:#f76514;background:#fff5ed}.tryon-dialog button:disabled{opacity:.5;cursor:default}.tryon-dialog button:focus-visible,.tryon-dialog canvas:focus-visible{outline:2px solid #e95d0f;outline-offset:3px}
.tryon-dialog .tryon-primary{background:#f76514;color:#fff;border-color:#f76514}.tryon-dialog .tryon-primary:hover:not(:disabled){background:#d64b00;color:#fff}
.tryon-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid #e8e8e4;flex:none;background:#fff;z-index:1}.tryon-eyebrow{font-size:10px;letter-spacing:1.7px;color:#b9470a;font-weight:700}
.tryon-dialog h2{font-size:24px;line-height:1.25;margin:4px 0 0;font-weight:600}.tryon-dialog .tryon-close{font-size:28px;font-weight:400;line-height:1;width:44px;flex:none;padding:4px;background:#f5f5f2;border-color:transparent}
.tryon-body{display:grid;grid-template-columns:minmax(0,1fr) 302px;min-height:0;flex:1;overflow:hidden}.tryon-workspace{display:flex;flex-direction:column;min-width:0;min-height:0;padding:22px;gap:12px;background:#f4f3ef}.tryon-stage{min-height:0;flex:1;position:relative;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:#e9e8e3}
.tryon-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px}.tryon-empty svg{width:95px;height:76px;fill:none;stroke:#9c9f94;stroke-width:1.2}.tryon-dialog .tryon-empty h3{font-size:21px;line-height:1.4;font-weight:500;margin:0}.tryon-dialog .tryon-empty p{margin:0;font-size:14px;line-height:1.6;color:#656c67}.tryon-empty small{max-width:260px;font-size:11px;line-height:1.5;color:#6b706d}
.tryon-dialog #tryon-canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;touch-action:none;cursor:move;box-shadow:0 3px 18px #0001;flex:none}
.tryon-stage-tools{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.tryon-dialog .tryon-hint{font-size:11px;line-height:1.55;color:#727770;margin:0;text-align:center;flex:none}
.tryon-controls{padding:22px 20px;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:20px}.tryon-controls section{margin:0}.tryon-dialog h3,.tryon-dialog legend{font:600 15px/1.4 Arial,sans-serif;margin:0 0 8px;padding:0;color:#252a28}.tryon-dialog legend{float:none;border:0;width:auto}.tryon-controls h3>span,.tryon-controls legend>span{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:#f0efea;font-size:11px;margin-right:5px}
.tryon-controls p{font-size:12px;line-height:1.55;color:#727770;margin:0 0 12px}.tryon-photos{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.tryon-dialog .tryon-photos button{width:68px;height:72px;min-height:0;padding:3px;position:relative;overflow:hidden}.tryon-dialog .tryon-photos img{width:100%!important;height:100%!important;object-fit:contain;margin:0!important;display:block;position:static;transform:none}.tryon-photos button>span{position:absolute;bottom:1px;right:2px;background:#ffffffdf;border-radius:3px;font:10px/1.3 Arial;padding:1px 3px}
.tryon-dialog button[aria-pressed=true]{border-color:#e65308;background:#fff3e9}.tryon-dialog #tryon-status{margin:8px 0 0;min-height:20px;color:#4a514b}.tryon-dialog #tryon-status[data-error=true]{color:#b34025}.tryon-dialog #tryon-status[data-busy=true]::before{content:'';display:inline-block;width:10px;height:10px;border:2px solid #e8d4c7;border-top-color:#d95911;border-radius:50%;margin-right:7px;animation:tryon-spin .8s linear infinite}
.tryon-placement{border:0;border-top:1px solid #ecece7;margin:0;padding:17px 0 0;min-width:0}.tryon-dialog label{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:#414741;margin:12px 0 7px}.tryon-dialog output{display:inline;color:#737a73;font-size:12px}.tryon-dialog input[type=range]{width:100%;height:24px;margin:0;padding:0;accent-color:#f76514;cursor:pointer}.tryon-dialog input[type=range]:disabled{opacity:.4}.tryon-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.tryon-dialog .tryon-row button{flex:1;padding:8px;font-size:11px}.tryon-dialog .tryon-note{font-size:11px;margin:-8px 0 0}
.tryon-dialog #tryon-mask{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;background:repeating-conic-gradient(#ddd 0 25%,#fafafa 0 50%) 0/16px 16px}.tryon-mask-panel{border-top:1px solid #e6e6e1;padding-top:15px}
@keyframes tryon-spin{to{transform:rotate(360deg)}}
@media(max-width:767px){dialog.tryon-dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0}.tryon-header{padding:12px 15px}.tryon-dialog h2{font-size:20px}.tryon-eyebrow{font-size:9px}.tryon-body{display:block;overflow-y:auto;overscroll-behavior:contain}.tryon-workspace{padding:12px;gap:10px}.tryon-stage{height:42dvh;min-height:240px;flex:none}.tryon-empty{gap:8px;padding:14px}.tryon-empty svg{display:none}.tryon-dialog .tryon-empty h3{font-size:18px}.tryon-dialog .tryon-empty p{font-size:12px}.tryon-empty small{font-size:10px}.tryon-controls{overflow:visible;padding:16px;gap:16px}.tryon-photos{flex-wrap:nowrap;overflow-x:auto;padding:2px;max-width:100%}.tryon-dialog .tryon-photos button{flex:none;width:62px;height:62px}.tryon-stage-tools{gap:5px}.tryon-stage-tools button{font-size:11px;padding:7px}.tryon-dialog #tryon-mask{max-height:none;width:100%;height:auto}.tryon-dialog .tryon-hint{font-size:10px}.tryon-placement{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.tryon-dialog button{transition:none}.tryon-dialog #tryon-status[data-busy=true]::before{animation:none}}
.tryon-header{position:relative;z-index:5}.tryon-heading{flex:1;min-width:0}
@media(max-width:767px){.tryon-header{gap:10px}.tryon-header .tryon-eyebrow{font-size:8px;letter-spacing:1px}}
@media(max-width:380px){.tryon-header h2{font-size:18px}}
@media(max-width:767px){.tryon-has-room .tryon-workspace{position:sticky;top:0;z-index:2;box-shadow:0 5px 10px #00000008}.tryon-has-room .tryon-stage{height:30dvh;min-height:165px}.tryon-controls{scroll-margin-top:calc(30dvh + 140px)}.tryon-mask-panel{scroll-margin-top:calc(30dvh + 140px)}}