/* Dogs Style – suwak przed/po */
.pp{
  --pp-accent:#1E5654; --pp-line:#fff; --pp-pos:50%;
  position:relative; overflow:hidden; border-radius:20px;
  aspect-ratio:var(--pp-ratio,4/3); background:#eee;
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
  cursor:ew-resize; margin:0;
}
.pp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; max-width:none}
.pp .pp-before{clip-path:inset(0 calc(100% - var(--pp-pos)) 0 0)}
.pp-divider{position:absolute; top:0; bottom:0; left:var(--pp-pos); width:3px; margin-left:-1.5px; background:var(--pp-line); box-shadow:0 0 12px rgba(0,0,0,.25); pointer-events:none}
.pp-handle{
  position:absolute; top:50%; left:var(--pp-pos); width:48px; height:48px; margin:-24px 0 0 -24px;
  border-radius:50%; background:#fff; border:0; padding:0; cursor:ew-resize;
  display:grid; place-items:center; color:var(--pp-accent);
  box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform .15s;
}
.pp-handle svg{width:24px; height:24px}
.pp-handle:focus-visible{outline:3px solid var(--pp-accent); outline-offset:3px}
.pp.is-dragging .pp-handle{transform:scale(1.1)}
.pp-label{
  position:absolute; top:14px; padding:6px 14px; border-radius:999px; background:rgba(255,252,246,.92);
  color:#2E2019; font:500 12px/1.2 'Jost',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  pointer-events:none; transition:opacity .2s;
}
.pp-label.l{left:14px} .pp-label.r{right:14px}
.pp[data-hide-l] .pp-label.l, .pp[data-hide-r] .pp-label.r{opacity:0}
.pp figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px; color:#fff; pointer-events:none;
  background:linear-gradient(transparent,rgba(30,20,12,.6)); font:500 15px/1.35 'Jost',system-ui,sans-serif;
}
.pp.is-animating .pp-before{transition:clip-path .6s ease}
.pp.is-animating .pp-divider,.pp.is-animating .pp-handle{transition:left .6s ease}