photo-comparison{--reveal:50%;display:block;width:100%;color:#00283b}photo-comparison .pc-stage{position:relative;isolation:isolate;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#e7ecee;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}photo-comparison .pc-stage img{display:block;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;pointer-events:none}photo-comparison .pc-after{position:absolute;inset:0;clip-path:inset(0 0 0 calc(100% - var(--reveal)))}photo-comparison .pc-label{position:absolute;top:12px;padding:7px 10px;border-radius:4px;color:#fff;font:600 11px/1.2 Arial,sans-serif;letter-spacing:.06em;pointer-events:none;box-shadow:0 1px 6px #0004}photo-comparison .pc-label-before{left:12px;background:#00283b}photo-comparison .pc-label-after{right:12px;background:#007d88}photo-comparison[data-position="0"] .pc-label-after,photo-comparison[data-position="100"] .pc-label-before{visibility:hidden}photo-comparison .pc-divider{position:absolute;top:0;bottom:0;left:calc(100% - var(--reveal));width:3px;transform:translate(-50%);background:#fff;box-shadow:0 0 5px #0008;pointer-events:none}photo-comparison .pc-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid #fff;background:#007d88;color:#fff;font:600 25px/1 Arial,sans-serif;box-shadow:0 2px 8px #0005}photo-comparison .pc-control{display:flex;align-items:center;gap:14px;margin:8px 0 0;font-size:12px;line-height:1.4}photo-comparison .pc-control>span{white-space:nowrap}photo-comparison input[type=range]{min-width:0;flex:1;width:100%;height:36px;margin:0;padding:0;accent-color:#007d88;cursor:ew-resize;touch-action:pan-y}photo-comparison input:focus-visible{outline:3px solid #ff8a12;outline-offset:2px;border-radius:3px}photo-comparison:focus-within .pc-stage{outline:2px solid #007d88;outline-offset:3px}.pc-gallery photo-comparison{max-width:900px;margin-inline:auto}.pc-gallery .pc-stage{aspect-ratio:16/10}#bathroom-project .pc-stage{aspect-ratio:4/3}@media(max-width:575px){photo-comparison .pc-label{font-size:10px;padding:6px 8px;top:9px}.pc-gallery .pc-stage{aspect-ratio:4/3}photo-comparison .pc-control{gap:10px}}
