.paint-visualizer{margin-top:22px;background:#fff;border:1px solid #e6e8ed;border-radius:9px;overflow:hidden;scroll-margin-top:20px}.visualizer-heading{padding:25px 27px 21px;display:flex;justify-content:space-between;align-items:center;gap:20px}.visualizer-heading h2{font-size:25px;color:var(--navy);font-weight:700;letter-spacing:-.6px;line-height:1.5}.visualizer-heading p{font-size:12px;color:#8993a3;margin-top:5px;line-height:1.8}.visualizer-heading>span{display:flex;gap:9px;align-items:center;white-space:nowrap;color:#9a5b48;font-size:11px}.visualizer-heading>span .icon{color:var(--red);width:23px;height:23px}.visualizer-workspace{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(295px,1fr);border-top:1px solid #edf0f4}.visualizer-preview{padding:20px;background:#f8f9fb;min-width:0;border-right:1px solid #edf0f4}.visualizer-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:7px;background:#dfe4e8;aspect-ratio:3/2}.visualizer-stage>img{width:100%;height:100%;object-fit:fill;display:block}.visualizer-stage>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;transition:opacity .2s}.visualizer-stage .visualizer-light{mix-blend-mode:soft-light}.visualizer-stage.is-original>svg{opacity:0}.visualizer-stage[aria-busy=true]>img{opacity:.5}.visualizer-stage[aria-busy=true]>svg{opacity:0}.visualizer-photo-label{position:absolute;left:14px;bottom:14px;background:#ffffffed;border:1px solid #ffffff99;border-radius:5px;color:#26394b;font-size:10px;padding:7px 10px;box-shadow:0 2px 8px #081d3510;max-width:calc(100% - 28px)}.visualizer-photo-label:before{content:'';width:6px;height:6px;background:#83a087;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:middle}.visualizer-scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}.visualizer-scenes button{display:flex;flex-direction:column;align-items:center;border:1px solid #e1e6ed;border-radius:6px;background:#fff;padding:4px;gap:6px;min-width:0;transition:border-color .15s,color .15s}.visualizer-scenes img{width:100%;height:49px;object-fit:cover;border-radius:3px}.visualizer-scenes span{font-size:10px;font-weight:500;padding-bottom:2px;white-space:nowrap}.visualizer-scenes button[aria-pressed=true]{border-color:var(--red);color:var(--red);box-shadow:0 0 0 1px var(--red)}.visualizer-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;min-height:27px}.visualizer-preview-footer>p{color:#8f9aa9;font-size:10px;line-height:1.8}.visualizer-preview-footer button{font-size:10px;padding:4px 0;background:none;white-space:nowrap;color:#61748a;text-decoration:underline;text-underline-offset:3px}.visualizer-controls{padding:23px 25px;min-width:0;display:flex;flex-direction:column}.visualizer-controls h3{font-size:17px;font-weight:600;margin-bottom:4px;color:#23364f}.visualizer-controls>p{font-size:11px;line-height:1.8;color:#9aa3af;margin-bottom:22px}.visualizer-field{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#69798d;font-weight:500;margin-bottom:18px;min-width:0}.visualizer-field>span{display:flex;align-items:center;gap:8px}.visualizer-field b{display:grid;place-items:center;border:1px solid #e1e5ec;border-radius:50%;width:19px;height:19px;font-size:10px;font-weight:500;color:#8c98aa;background:#f8f9fb}.visualizer-field select{width:100%;min-width:0;border:1px solid #dce2ea;border-radius:6px;background:#fff;color:var(--navy);padding:10px 11px;min-height:43px;font-size:12px;line-height:1.6}.visualizer-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:-5px 0 20px;padding:3px}.paint-swatch{height:29px;min-width:0;border-radius:5px;background:var(--swatch);border:1px solid #00000012;position:relative}.paint-swatch[aria-pressed=true]{outline:2px solid var(--red);outline-offset:3px}.paint-swatch[aria-pressed=true]:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:white;text-shadow:0 1px 4px #000}.visualizer-selected{display:flex;align-items:center;gap:11px;padding:12px;background:#f7f9fb;border:1px solid #e8edf3;border-radius:6px}.visualizer-selected>span{width:39px;height:39px;border:1px solid #0000000a;border-radius:5px;flex-shrink:0}.visualizer-selected strong{display:block;font-size:12px;color:#304765;line-height:1.6;font-weight:600}.visualizer-selected small{font-size:10px;color:#94a0b1;letter-spacing:.5px}.visualizer-custom{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#8694a5;margin-top:13px}.visualizer-custom input{width:37px;height:28px;border:1px solid #e0e5ed;border-radius:5px;padding:2px;background:white;cursor:pointer}.visualizer-control-footer{display:flex;justify-content:space-between;gap:9px;align-items:center;border-top:1px solid #edf0f4;margin-top:18px;padding-top:13px}.visualizer-control-footer span{font-size:10px;color:#8c9aab}.visualizer-control-footer button{font-size:10px;background:none;color:var(--red);padding:4px 0}.visualizer-notice{font-size:9px;line-height:1.8;color:#a0a9b5;margin-top:auto;padding-top:18px}.visualizer-error{font-size:11px;line-height:1.8;color:#b71324;background:#fff0f1;padding:9px;border-radius:5px;margin-bottom:12px}
@media(min-width:1500px){.visualizer-controls{padding:26px 28px}.visualizer-scenes img{height:53px}}
@media(max-width:1100px){.visualizer-workspace{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}.visualizer-heading{padding:22px}.visualizer-heading h2{font-size:23px}.visualizer-preview{padding:16px}.visualizer-controls{padding:21px}.visualizer-scenes span{font-size:9px}.visualizer-scenes img{height:43px}.visualizer-swatches{gap:7px}.paint-swatch{height:27px}.visualizer-preview-footer>p{font-size:9px}.visualizer-controls>p{margin-bottom:18px}.visualizer-field{margin-bottom:15px}}
@media(max-width:800px){.visualizer-workspace{grid-template-columns:1fr}.visualizer-preview{border-right:0;border-bottom:1px solid #edf0f4}.visualizer-controls{padding:24px}.visualizer-heading>span{display:none}.visualizer-controls>p{margin-bottom:18px}.visualizer-swatches{grid-template-columns:repeat(8,1fr);max-width:400px}.paint-swatch{height:35px}.visualizer-scenes img{height:64px}.visualizer-scenes span{font-size:11px}.visualizer-notice{padding-top:17px}.visualizer-preview-footer>p{font-size:10px}}
@media(max-width:600px){.paint-visualizer{margin-top:16px}.visualizer-heading{padding:20px 16px 17px}.visualizer-heading h2{font-size:20px;letter-spacing:-.5px}.visualizer-heading p{font-size:11px;line-height:1.8;margin-top:6px}.visualizer-preview{padding:12px}.visualizer-stage{border-radius:5px}.visualizer-photo-label{font-size:8px;padding:6px 8px;bottom:9px;left:9px;max-width:calc(100% - 18px)}.visualizer-scenes{gap:7px;margin-top:10px}.visualizer-scenes img{height:43px}.visualizer-scenes button{padding:3px;gap:5px}.visualizer-scenes span{font-size:8px;white-space:normal;text-align:center;line-height:1.6;min-height:25px;display:flex;align-items:center}.visualizer-preview-footer{margin-top:9px;gap:8px;align-items:flex-start}.visualizer-preview-footer>p{font-size:9px}.visualizer-preview-footer button{font-size:9px}.visualizer-controls{padding:21px 17px}.visualizer-controls h3{font-size:17px}.visualizer-controls>p{font-size:11px;margin-bottom:19px}.visualizer-field{font-size:12px;gap:8px;margin-bottom:17px}.visualizer-field select{font-size:13px;min-height:45px}.visualizer-swatches{gap:9px;margin-bottom:20px}.paint-swatch{height:29px}.visualizer-selected{padding:11px}.visualizer-selected strong{font-size:13px}.visualizer-selected small{font-size:11px}.visualizer-custom{font-size:11px;margin-top:14px}.visualizer-custom input{width:42px;height:31px}.visualizer-control-footer{margin-top:18px}.visualizer-control-footer span,.visualizer-control-footer button{font-size:11px}.visualizer-notice{font-size:10px}}

.visualizer-stage>img{object-fit:contain}.visualizer-stage>.visualizer-recolor{mix-blend-mode:normal}.visualizer-scenes img{object-fit:contain;background:#eef1f4}

@media(max-width:600px){.visualizer-stage{aspect-ratio:var(--photo-ratio,3/2)}}

.visualizer-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.visualizer-stage.is-original>.visualizer-canvas,.visualizer-stage[aria-busy=true]>.visualizer-canvas{opacity:0}