.ok-product{--ok-ink:#173447;--ok-muted:#647c8b;--ok-blue:#005a9f;--ok-line:#dce4e8;color:var(--ok-ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;max-width:1480px;margin:auto;box-sizing:border-box}
.ok-product *,.ok-product *::before,.ok-product *::after{box-sizing:border-box}.ok-product button,.ok-product input{font:inherit}.ok-product button{cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-product button:focus-visible,.ok-product input:focus-visible,.ok-product canvas:focus-visible{outline:3px solid #1686cc;outline-offset:4px}.ok-product button:disabled{cursor:wait;opacity:.55}.ok-product svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.okv-products{display:flex;gap:8px;overflow-x:auto;padding:0 0 20px;scrollbar-width:thin;scrollbar-color:#bccbd3 transparent}.okv-products button{flex:1 0 160px;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--ok-line);border-radius:13px;padding:16px 18px;min-height:76px;text-align:left;color:var(--ok-ink);transition:background .15s,border-color .15s}.okv-products button svg{width:34px;height:34px;flex:none;stroke-width:1.25}.okv-products button span{font-size:15px;font-weight:600;line-height:1.25}.okv-products button small{display:block;margin-top:6px;font-size:10px;letter-spacing:.13em;font-weight:500;color:var(--ok-muted)}.okv-products button[aria-pressed=true]{background:#173c54;color:#fff;border-color:#173c54}.okv-products button[aria-pressed=true] small{color:#b6d2e3}.okv-products button:hover{border-color:#54819c}
.okv-layout{display:grid;grid-template-columns:minmax(0,1fr) 334px;gap:18px;align-items:start}.okv-visual{min-width:0}.okv-stage{position:relative;height:clamp(480px,61vw,650px);background:#dce2e5;border-radius:18px;overflow:hidden;isolation:isolate}.okv-canvas-host{position:absolute;inset:60px 0 56px}.okv-canvas-host canvas{display:block;width:100%;height:100%}.okv-stage-top{position:absolute;top:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none}.okv-brand{font-weight:800;font-size:15px;letter-spacing:.13em;color:#365061}.okv-live{font-size:11px;color:#496471;display:flex;align-items:center;gap:6px}.okv-live i{width:6px;height:6px;background:#638a72;border-radius:50%}.okv-cameras{display:flex;position:absolute;top:56px;left:24px;z-index:3;gap:3px;padding:4px;border:1px solid #ffffff80;background:#f7fafbc4;backdrop-filter:blur(8px);border-radius:10px}.okv-cameras button{background:none;border:0;border-radius:7px;min-height:34px;padding:6px 12px;font-size:11px;color:#526c7b}.okv-cameras button[aria-pressed=true]{background:white;color:#124a70;box-shadow:0 1px 5px #1b3c5510}.okv-zoom{position:absolute;right:22px;top:76px;z-index:4;display:grid;gap:7px}.okv-zoom button{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffffb0;border-radius:9px;background:#f6fafbd6;box-shadow:0 3px 8px #34546d09;color:#36576b;font:300 24px/1 system-ui}.okv-zoom svg{width:18px;height:18px}.okv-caption{position:absolute;left:26px;right:26px;bottom:50px;pointer-events:none}.okv-caption h2{margin:0 0 5px;font-size:22px;line-height:1.2;letter-spacing:-.04em;font-weight:650}.okv-caption p{font-size:12px;max-width:500px;margin:0;color:#5a707b}.okv-stage-hint{position:absolute;bottom:20px;left:26px;font-size:10px;color:#718490;letter-spacing:.02em;pointer-events:none}.okv-status{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);padding:11px 16px;border-radius:10px;background:#ffffffed;color:#184561;font-size:12px;max-width:90%;text-align:center;box-shadow:0 10px 32px #1c405214}.okv-status:empty{display:none}
.okv-openings{background:#fff;border:1px solid var(--ok-line);border-radius:13px;margin-top:12px;padding:15px 20px;display:grid;gap:14px}.okv-sash-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.okv-sash-name{font-size:12px;font-weight:600;color:#526d7d}.okv-sash-buttons{display:flex;background:#f3f6f8;padding:4px;border-radius:9px;gap:3px}.okv-sash-buttons button{border:0;border-radius:6px;background:none;color:#627684;font-size:11px;min-height:36px;padding:8px 12px;white-space:nowrap}.okv-sash-buttons button[aria-pressed=true]{background:#fff;color:var(--ok-blue);box-shadow:0 1px 4px #2645601a}
.okv-options{background:#fff;border:1px solid var(--ok-line);border-radius:18px;padding:26px 22px;min-width:0}.okv-section-head{display:flex;align-items:center;gap:10px}.okv-step{font-size:10px;color:#93a6b1;letter-spacing:.03em;font-weight:600}.okv-section-head h3{font-size:14px;font-weight:650;letter-spacing:-.015em;margin:0}.okv-count{margin-left:auto;background:#eef3f5;color:#778e9b;padding:3px 7px;border-radius:5px;font-size:10px}.okv-selected-finish{font-size:20px;line-height:1.2;font-weight:550;letter-spacing:-.04em;margin:15px 0 16px;min-height:48px}.okv-finishes{display:flex;position:relative;overflow:auto;gap:9px;padding:3px 3px 10px;scrollbar-width:none;scroll-snap-type:x proximity}.okv-finishes::-webkit-scrollbar{display:none}.okv-finishes button{flex:0 0 58px;border:0;padding:0;background:none;color:#7b909d;scroll-snap-align:center}.okv-swatch{height:66px;display:block;border-radius:7px;border:3px solid white;outline:1px solid #e1e6e8;overflow:hidden;position:relative}.okv-swatch img{width:100%;height:100%;object-fit:cover;display:block}.okv-swatch-label{display:block;font-size:10px;margin-top:7px}.okv-finishes button[aria-pressed=true] .okv-swatch{outline:2px solid #176696}.okv-finishes button[aria-pressed=true]{color:#13537d;font-weight:600}.okv-finishes button[aria-pressed=true] .okv-swatch::after{content:'✓';position:absolute;right:3px;bottom:3px;color:#fff;background:#185b80;border-radius:50%;font-size:9px;width:16px;height:16px;text-align:center;line-height:16px}
.okv-palette-nav{display:flex;align-items:center;gap:12px;margin-top:4px}.okv-palette-nav button{border:0;background:#f3f6f8;border-radius:6px;width:30px;height:30px;color:#496e84;flex:none;font-size:16px}.okv-palette-nav input{width:100%;min-width:0;accent-color:#17577e;cursor:pointer;height:24px}.okv-palette-note{font-size:10px;color:#91a0a9;margin:7px 0 0}.okv-rule{height:1px;background:#e8edf0;margin:23px 0}.okv-glasses{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.okv-glasses button{display:flex;position:relative;align-items:center;gap:9px;min-height:65px;border:1px solid #dce5eb;border-radius:9px;background:#fff;text-align:left;padding:10px;color:#35576d}.okv-glasses button[aria-pressed=true]{border-color:#176797;background:#f3f8fb;box-shadow:inset 0 0 0 .5px #176797}.okv-glasses strong{display:block;font-size:12px;font-weight:600}.okv-glasses small{display:block;font-size:7px;letter-spacing:.08em;color:#8a9ba6;margin-top:3px}.okv-glass-chip{width:26px;height:35px;flex:none;border:1px solid #bacdd3;border-radius:2px;transform:skewY(-5deg);box-shadow:3px 3px 4px #163c5010;background:linear-gradient(128deg,#f9fdfd 1%,#d8e6e8 30%,#f3f9f9 34%,#b5cdcf 58%,#ecf3f2)}.okv-glass-chip.phoenix-grey{background:linear-gradient(128deg,#b8c2c4,#7b8e96 30%,#b0bfc5 34%,#728891 75%,#97afb8);border-color:#8397a1}.okv-glass-chip.phoenix-bronze{background:linear-gradient(128deg,#dbcab5,#a68870 30%,#d2bba2 34%,#ab8a6d 70%,#dfcbb2);border-color:#bca389}.okv-glass-chip.frosted{background:linear-gradient(135deg,#f4f6f5,#d0d8d8);opacity:.85}.okv-glass-description{font-size:11px;line-height:1.55;color:#7a8f9b;margin:12px 0 0;min-height:34px}.okv-summary>span{font-size:10px;color:#94a3ae}.okv-summary strong{display:block;font-size:15px;font-weight:650;margin-top:6px}.okv-summary p{font-size:11px;color:#7c909c;margin:4px 0 20px}.okv-save{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;color:white;background:#135b88;border:0;border-radius:9px;font-size:12px;font-weight:600}.okv-save:hover{background:#11496c}.okv-save svg{width:17px;height:17px}.okv-reset{display:block;width:100%;background:none;border:0;font-size:11px;color:#8a9ba6;margin:12px 0 15px;padding:6px}.okv-color-note{font-size:10px;line-height:1.6;color:#9aabb5;margin:0}
@media(min-width:1600px){.okv-stage{height:690px}.okv-layout{grid-template-columns:minmax(0,1fr) 354px}}
@media(max-width:980px){.okv-layout{grid-template-columns:minmax(0,1fr) 300px;gap:12px}.okv-options{padding:22px 17px}.okv-products button{flex-basis:148px;padding:14px 12px}.okv-products button span{font-size:13px}.okv-stage{height:610px}.okv-cameras{left:16px}.okv-zoom{right:14px;top:114px}.okv-sash-row{flex-direction:column;align-items:flex-start;gap:8px}.okv-sash-buttons{width:100%}.okv-sash-buttons button{flex:1;padding:8px}.okv-caption h2{font-size:20px}.okv-caption{left:20px;right:20px}.okv-stage-hint{left:20px}}
@media(max-width:740px){.okv-layout{grid-template-columns:1fr}.okv-products{padding-bottom:12px;gap:7px}.okv-products button{flex:0 0 150px;min-height:69px;padding:12px}.okv-products button svg{width:29px;height:29px}.okv-stage{height:500px;border-radius:14px}.okv-stage-top{left:18px;right:18px;top:19px}.okv-brand{font-size:13px}.okv-live{font-size:10px}.okv-caption h2{font-size:21px}.okv-caption p{font-size:11px;max-width:310px}.okv-caption{bottom:45px}.okv-options{padding:22px;border-radius:14px}.okv-selected-finish{min-height:0}.okv-finishes{padding-top:4px}.okv-swatch{height:78px}.okv-finishes button{flex-basis:64px}.okv-glasses{grid-template-columns:repeat(4,1fr)}.okv-glasses button{flex-direction:column;align-items:center;text-align:center;min-height:107px;gap:9px;padding:11px 5px}.okv-glass-chip{width:32px;height:38px}.okv-summary{margin-bottom:6px}.okv-glass-description{min-height:0}.okv-openings{margin-top:9px;padding:13px 16px}.okv-sash-row{flex-direction:row;align-items:center}.okv-sash-name{max-width:115px;font-size:10px}.okv-sash-buttons{width:auto;flex:1}.okv-sash-buttons button{font-size:10px;padding:8px 7px;min-height:36px}.okv-rule{margin:20px 0}.okv-section-head h3{font-size:15px}}
@media(max-width:390px){.okv-stage{height:445px}.okv-cameras button{padding:6px 10px}.okv-caption h2{font-size:19px}.okv-caption p{max-width:260px}.okv-sash-row{flex-direction:column;align-items:stretch}.okv-sash-name{max-width:none}.okv-options{padding:20px 17px}.okv-glasses{gap:6px}.okv-glasses strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.ok-product *{scroll-behavior:auto!important;transition:none!important}}