.try-on-entry{width:100%;margin:0 0 15px;min-height:48px;display:flex;align-items:center;justify-content:space-between;border:1px solid #b8c1af;padding:12px 16px;font-size:11px;transition:background .25s}.try-on-entry:hover{background:#edf0e9}.try-on-entry span:last-child{font:10px Arial;letter-spacing:1px;color:#7d8773}.try-on-entry[hidden]{display:none}
.try-on{--paper:#fafaf8;--ink:#20211e;--line:#deded8;color:var(--ink);font-family:Georgian,Arial,sans-serif;background:var(--paper);border:1px solid var(--line);border-radius:2px;width:min(1000px,calc(100% - 56px));max-height:92svh;padding:0;overflow:auto;box-shadow:0 24px 100px #11170e30;overscroll-behavior:contain}.try-on[open]{animation:try-open .38s var(--ease)}.try-on::backdrop{background:#18201680;backdrop-filter:blur(5px)}.try-on [hidden]{display:none!important}.try-head{padding:26px 30px 22px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);gap:20px}.try-kicker{font:9px Arial;letter-spacing:2px;color:#7c8770;margin:0 0 9px}.try-head h2{font-size:25px;font-weight:400;letter-spacing:-.5px;margin:0}.try-close{width:44px;height:44px;flex-shrink:0;font:26px Arial;border:1px solid var(--line)}.try-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:30px;padding:26px 30px}.try-step{display:flex;align-items:center;gap:10px;font-size:10px;margin:0 0 15px}.try-upload{min-width:0}.try-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:264px;border:1px dashed #b7bdad;background:#f2f3ed;text-align:center;padding:20px;overflow:hidden;cursor:pointer;transition:border-color .2s,background .2s}.try-drop:focus-within{outline:2px solid #46634d;outline-offset:3px}.try-drop.is-dragging{border:2px solid #53664c;background:#e6ecdf}.try-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:2}.try-drop input:disabled{cursor:wait}.try-drop .try-upload-mark{font:28px Arial;color:#68775c;border:1px solid #c8cebe;width:48px;height:48px;display:grid;place-items:center;border-radius:50%}.try-drop strong{font-size:12px;font-weight:400}.try-drop small{font-size:9px;color:#858b7c}.try-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#eeefe9;display:none}.try-drop.has-photo img{display:block}.try-drop.has-photo .try-upload-mark,.try-drop.has-photo strong,.try-drop.has-photo small{visibility:hidden}.try-change{font-size:10px;text-decoration:underline;text-underline-offset:4px;min-height:44px}.try-product{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0;padding:10px 0}.try-product img{width:55px;height:70px;object-fit:contain}.try-product p{margin:5px 0;font-size:12px}.try-product small{font-size:9px;color:#858b7c}.try-actions{display:flex;gap:8px}.try-actions .primary{flex:1;justify-content:center;font-size:11px}.try-cancel{border:1px solid var(--line);padding:10px 12px;min-height:48px;font-size:10px}.try-limit{font-size:9px;color:#818877;line-height:1.8;margin:12px 0 0}.try-result{display:flex;flex-direction:column;min-width:0}.try-result-empty{border:1px solid var(--line);min-height:350px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:#f1f2ec}.try-monogram{position:relative;width:90px;height:90px;border:1px solid #c9cebf;border-radius:50%;display:grid;place-items:center;font:27px Arial;color:#839076;letter-spacing:-2px;margin-bottom:22px}.try-monogram::before{content:'';position:absolute;inset:-8px;border:1px solid transparent;border-radius:50%}.is-generating .try-monogram::before{border-top-color:#66765c;animation:try-spin 2s linear infinite}.try-result-empty p{font-size:12px;line-height:1.9;margin:0 0 12px}.try-result-empty small{font-size:9px;color:#8e9585;line-height:1.8;max-width:245px}.try-status{font-size:11px;line-height:1.9;min-height:44px;margin:17px 0 0;overflow-wrap:anywhere;color:#606e55}.try-status.is-error{color:#9b4536}.try-compare{position:relative}.try-stage{--split:50%;position:relative;aspect-ratio:3/4;background:#e9ebe3;isolation:isolate;overflow:hidden;border:1px solid var(--line)}.try-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.try-stage [data-try-before]{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:1}.try-stage::after{content:'';position:absolute;left:var(--split);top:0;bottom:0;width:1px;background:#fff;box-shadow:0 0 3px #0006;z-index:2;pointer-events:none}.try-photo-label{position:absolute;top:12px;background:#fafaf8e8;color:#434c3b;padding:6px 8px;font-size:9px;z-index:3}.try-photo-label:first-of-type{left:12px}.try-photo-label:last-of-type{right:12px}.try-slider-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;margin:15px 0 0}.try-slider-label input{min-width:0;flex:1;accent-color:#53664c;height:32px;cursor:ew-resize}.try-download{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:11px;text-decoration:none;color:var(--ink);border-bottom:1px solid #89967b;margin-top:10px}
.try-head{position:sticky;top:0;background:var(--paper);z-index:5}
@media(min-width:701px){.try-stage{height:min(42svh,380px);aspect-ratio:auto}}
@keyframes try-open{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes try-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.try-on{width:calc(100% - 24px);max-height:94svh}.try-head{padding:18px}.try-head h2{font-size:21px}.try-kicker{font-size:8px}.try-layout{padding:20px 18px;grid-template-columns:minmax(0,1fr);gap:25px}.try-drop{height:240px}.try-result-empty{min-height:245px}.try-stage{max-height:60svh;aspect-ratio:3/4}.try-actions .primary{min-height:48px}.try-slider-label{font-size:9px}.try-product{margin-top:10px}.try-on-entry span:last-child{font-size:8px}}
@media(prefers-reduced-motion:reduce){.try-on[open],.is-generating .try-monogram::before{animation:none}.try-on-entry,.try-drop{transition:none}}

/* The same live comparison moves into the enlarged modal; media is never duplicated. */
.try-privacy-link{font-size:9px;color:#818877;text-decoration:underline;text-underline-offset:3px;min-height:36px;padding:6px 0}
.try-expand{position:absolute;right:12px;bottom:66px;z-index:4;display:grid;place-items:center;width:44px;height:44px;background:#fafaf8ed;border:1px solid #d4d8cd;color:#434c3b;cursor:pointer}
.try-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}
.try-expand:hover{background:#fff}.try-expand:focus-visible,.try-close:focus-visible,.try-privacy-link:focus-visible{outline:2px solid #53664c;outline-offset:3px}
.try-stage{touch-action:none;cursor:ew-resize}
.try-viewer,.try-privacy{color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:0;box-sizing:border-box;overscroll-behavior:contain;font:inherit}
.try-viewer::backdrop,.try-privacy::backdrop{background:#182016c9}
.try-viewer{width:min(1440px,calc(100% - 32px));max-width:none;height:calc(100svh - 32px);max-height:none;overflow:hidden}
.try-viewer[open]{display:flex;flex-direction:column}
.try-viewer-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-shrink:0;padding:12px 18px;border-bottom:1px solid var(--line)}
.try-viewer-head h2{font-size:16px;font-weight:400;margin:0}.try-viewer-head .try-close{background:transparent;color:inherit}
.try-viewer-slot{display:flex;flex:1;min-height:0;padding:16px 20px 12px}
.try-viewer .try-compare{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.try-viewer .try-stage{height:auto;max-height:none;min-height:0;aspect-ratio:auto;flex:1;width:100%}
.try-viewer .try-slider-label{flex-shrink:0;margin-top:8px;min-height:44px}
.try-viewer .try-expand{display:none}
.try-privacy{width:min(520px,calc(100% - 32px));max-height:90svh}
.try-privacy p{padding:0 22px;font-size:11px;line-height:2;margin:20px 0}
@media(max-width:700px){
 .try-viewer{width:100%;height:100svh;max-height:100svh;margin:0;border:0}
 .try-viewer-head{padding:max(10px,env(safe-area-inset-top)) 12px 10px}
 .try-viewer-slot{padding:10px 12px max(10px,env(safe-area-inset-bottom))}
}