/* Before/after viewer. Colors fall back to neutral values so this works on the public page too. */
.cmpw { --c-line: var(--hair, rgba(37,39,44,.12)); --c-ink: var(--ink, #25272C); position: relative; }
.cmp-empty { padding: 20px; color: var(--ink-2, #666); font-size: 14px; }
.cmp-stage { position: relative; border-radius: 16px; overflow: hidden; background: var(--chip, rgba(37,39,44,.06)); box-shadow: 0 0 0 1px var(--c-line); max-height: 640px; }
.cmp-stage.open { max-height: none; }
.cmp-stage:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none; background: linear-gradient(transparent, rgba(0,0,0,.18)); }
.cmp-more { margin: 10px auto 0; display: block; border: 0; border-radius: 999px; padding: 7px 16px; font: 600 13px/1 var(--body, system-ui, sans-serif); background: var(--chip, rgba(37,39,44,.08)); color: var(--c-ink); cursor: pointer; }
.cmp-more:hover { background: var(--c-line); }
.cmp-tag { position: absolute; z-index: 3; top: 10px; font: 600 12px/1 var(--body, system-ui, sans-serif); padding: 6px 12px; border-radius: 999px; color: #fff; background: rgba(37,39,44,.82); pointer-events: none; }
.cmp-tag.after { background: #FE5F55; }
.cmp-slider .cmp-tag.before { left: 10px; } .cmp-slider .cmp-tag.after { right: 10px; }
.cmp-slider { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; background: #fff; }
.cmp-slider.mobile { max-width: 420px; margin: 0 auto; }
.cmp-slider img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.cmp-slider img.b { clip-path: inset(0 0 0 var(--p, 50%)); }
.cmp-handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--p, 50%); width: 44px; margin-left: -22px; border: 0; background: none; padding: 0; cursor: ew-resize; }
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(37,39,44,.25); }
.cmp-handle .knob { position: absolute; left: 50%; top: var(--y, 30%); display: block; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(37,39,44,.35); opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s var(--spring, ease); pointer-events: none; }
.cmp-slider.touching .knob, .cmp-handle:focus-visible .knob { opacity: 1; transform: none; }
@media (hover: hover) { .cmp-slider:hover .knob { opacity: 1; transform: none; } }
.cmp-handle .knob::before, .cmp-handle .knob::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: solid #25272C; border-width: 0 0 2px 2px; margin-top: -4px; }
.cmp-handle .knob::before { left: 9px; transform: rotate(45deg); } .cmp-handle .knob::after { right: 9px; transform: rotate(-135deg); }
.cmp-handle:focus-visible .knob { outline: 3px solid rgba(254,95,85,.6); outline-offset: 2px; }
.cmp-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px; }
.cmp-side.mobile { max-width: 640px; margin: 0 auto; }
.cmp-side .col { margin: 0; position: relative; min-width: 0; }
.cmp-side .col .cmp-tag { top: 8px; left: 8px; }
.cmp-side .col img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 0 0 1px var(--c-line); background: #fff; }
@media (max-width: 560px) { .cmp-side { grid-template-columns: 1fr; } }
.cmp-slider .wf { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cmp-side .col .wf { height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--c-line); }