/* A single icon, hit area, reveal direction and motion for every example. */
.example-comparison{position:relative;display:block;width:100%;height:auto;aspect-ratio:3/2;overflow:hidden;background:#f4f3ef;--split:50%;touch-action:pan-y}
:is(#actionCards,#inspirationBrowser,.native-tools,.renovation-picker,.reno-example-dialog) .example-comparison>img{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;object-fit:contain;margin:0;padding:0;border-radius:0}
.example-comparison>.example-after{clip-path:inset(0 0 0 50%);animation:example-reveal 7s ease-in-out infinite}
.example-comparison>.example-divider{position:absolute;inset:0 auto 0 50%;width:2px;background:white;pointer-events:none;animation:example-divider 7s ease-in-out infinite}
.example-comparison .example-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:white;color:#171717;box-shadow:0 2px 10px #0004;display:grid;place-items:center}
:is(#actionCards,#inspirationBrowser,.native-tools,.renovation-picker,.reno-example-dialog) .example-grip svg{display:block;width:13px;height:13px;min-height:0;background:none}
.example-comparison>input[type=range]{position:absolute!important;inset:0!important;z-index:5;width:100%!important;height:100%!important;opacity:0;cursor:ew-resize;touch-action:pan-y;margin:0!important;padding:0!important}
.example-comparison:focus-within{outline:3px solid #2059e9;outline-offset:-3px}
.example-comparison.manual>.example-after{animation:none!important;clip-path:inset(0 0 0 var(--split))!important}
.example-comparison.manual>.example-divider{animation:none!important;left:var(--split)!important}
.examples-paused .example-comparison>*{animation-play-state:paused!important}
@keyframes example-reveal{0%,15%,100%{clip-path:inset(0 0 0 100%)}45%,65%{clip-path:inset(0 0 0 0%)}}
@keyframes example-divider{0%,15%,100%{left:100%}45%,65%{left:0%}}
@media(prefers-reduced-motion:reduce){[data-example-motion]:not(.examples-play-requested) .example-comparison>*{animation-play-state:paused!important}}
#actionCards .compact-action>.example-comparison{width:clamp(180px,16vw,260px);flex:none;border-radius:7px}
@media(max-width:700px){#actionCards .compact-action>.example-comparison{width:100%;border-radius:0}}
.renovation-picker .reno-option-summary{display:block;padding:0 10px 12px;font:12px/1.4 system-ui;color:#697386;text-align:center}
.reno-example-dialog .example-comparison,#inspirationBrowser .example-comparison{border-radius:10px}
.wiz-cmp .tag{display:none}

/* Keep preview actions outside the slider so neither control covers the other. */
.example-preview{display:flex;flex-direction:column;min-width:0;flex:none}
.example-preview .example-expand{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;padding:8px 10px;border:0;border-top:1px solid #e3e6ed;border-radius:0;background:#f6f8fc;color:#2148b6;font:600 13px/1.3 Inter,system-ui,sans-serif;cursor:pointer}
.example-preview .example-expand:focus-visible{outline:3px solid #2059e9;outline-offset:-3px}
.example-single{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#f4f3ef}
.reno-example-dialog>.example-single{max-height:65dvh}
.example-view-controls{display:flex;gap:4px;padding:4px;background:#f6f8fc}
.example-view-controls>button{flex:1;min-height:44px;padding:8px;border:1px solid #d8dbe3;border-radius:6px;background:#fff;color:#2148b6;font:600 13px/1.3 Inter,system-ui,sans-serif;cursor:pointer}
#actionCards .compact-action>.example-preview{width:clamp(180px,16vw,260px);overflow:hidden;border-radius:7px}
#actionCards .action-copy{border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:center;cursor:pointer;align-self:stretch;padding:10px;min-height:44px}
#actionCards .visual-card[data-selected=true]{border-color:#1d50ed;box-shadow:inset 0 0 0 1px #1d50ed;background:#f0f4ff}
@media(max-width:700px){#actionCards .compact-action>.example-preview{width:100%;border-radius:0}}
.renovation-picker .reno-door-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.renovation-picker .reno-door-view{display:block;flex:none;position:relative;aspect-ratio:2/3;overflow:hidden;background:#eef1f5}
.renovation-picker .reno-door-view img{position:absolute;right:0;top:-18%;width:350%;max-width:none;height:auto}