.sofa-reveal { padding:4rem 0 6rem; }
.sofa-reveal-frame { position:relative; max-width:900px; aspect-ratio:16/8; overflow:hidden; border:1px solid #d9b64266; border-radius:18px; background:#110e12; }
.sofa-before-after { max-width:760px; margin:1.35rem auto 0; aspect-ratio:1.22 / 1; border:0; border-radius:0; background:#f8f6f3; isolation:isolate; touch-action:none; }
.sofa-before,.sofa-after { position:absolute; inset:0; overflow:hidden; }
.sofa-before img,.sofa-after img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:center; will-change:transform; }
.sofa-after { clip-path:inset(0 0 0 50%); }
.sofa-divider { position:absolute; top:0; bottom:0; left:50%; width:3px; background:#e1ba40; box-shadow:0 0 18px #d5aa32; pointer-events:none; }
.sofa-before-after::before,.sofa-before-after::after { position:absolute; z-index:3; top:16px; padding:7px 11px; border-radius:999px; background:#0c0b0ddd; color:#fff8e4; font-size:12px; font-weight:800; letter-spacing:.08em; pointer-events:none; }
.sofa-before-after::before { content:'PRZED'; left:16px; }
.sofa-before-after::after { content:'PO'; right:16px; }
html[lang="ru"] .sofa-before-after::before,html[lang="uk"] .sofa-before-after::before { content:'ДО'; }
html[lang="ru"] .sofa-before-after::after { content:'ПОСЛЕ'; }
html[lang="uk"] .sofa-before-after::after { content:'ПІСЛЯ'; }
html[lang="be"] .sofa-before-after::before { content:'ДА'; }
html[lang="be"] .sofa-before-after::after { content:'ПАСЛЯ'; }
.sofa-before-after .sofa-divider { z-index:4; }
.sofa-before-after .sofa-divider span { position:absolute; top:50%; left:50%; display:grid; width:44px; height:44px; place-items:center; border:2px solid #fff0b5; border-radius:50%; background:#171216e8; color:#fff0b5; font-size:20px; transform:translate(-50%,-50%); box-shadow:0 4px 20px #0009; }
.sofa-before-after .sofa-range { position:absolute; z-index:5; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.sofa-reveal-caption { max-width:760px; margin:.9rem auto 0; color:var(--muted); text-align:center; }
.sofa-comparison-library { display:flex; gap:12px; max-width:960px; margin:24px auto 0; padding:4px 2px 12px; overflow-x:auto; scroll-snap-type:x proximity; }
.sofa-library-card { position:relative; display:grid; flex:0 0 230px; grid-template-columns:1fr 1fr; gap:3px; padding:6px; overflow:hidden; border:1px solid rgba(212,175,55,.25); border-radius:10px; background:#121115; cursor:pointer; scroll-snap-align:start; }
.sofa-library-card.is-active { border-color:#d4af37; box-shadow:0 0 0 2px rgba(212,175,55,.18); }
.sofa-library-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.sofa-library-card span { position:absolute; right:9px; bottom:9px; padding:4px 7px; border-radius:99px; color:#17120a; background:#d4af37; font-size:11px; font-weight:900; }
@media (max-width:760px) {
  .sofa-reveal { padding:2.75rem 0 4rem; }
  .sofa-before-after { width:100%; aspect-ratio:4/5; }
  .sofa-before-after::before,.sofa-before-after::after { top:10px; padding:6px 9px; font-size:10px; }
  .sofa-before-after::before { left:10px; }
  .sofa-before-after::after { right:10px; }
  .sofa-library-card { flex-basis:190px; }
}