/* HeyBear · Product: Imagine (compare) (sections/hb-product-imagine.liquid) */
/* from pdp */
.p-imagine{background:var(--fbg);padding-block:clamp(80px,9vw,130px) clamp(60px,7vw,100px);transition:background .6s}
.p-im-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,60px);align-items:center}
.p-im-grid>*{min-width:0}
.p-im-h{font:800 clamp(40px,5.2vw,76px)/.95 var(--f-display);letter-spacing:-.04em;margin:14px 0 0}
.p-im-h .pre{display:block;font:italic 400 .55em/1 var(--f-serif);letter-spacing:0;margin-bottom:6px}
.p-im-h .w{color:var(--fac);transition:color .5s}
.p-im-h .post{display:block;font:700 .26em/1 var(--f-body);letter-spacing:.3em;text-transform:uppercase;margin-top:14px}
.p-im-grid p{color:var(--ink-2);font-size:18px;max-width:40ch}
.cmp{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center;--pos:50%;touch-action:pan-y}
.cmp .glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,#fff,transparent 70%)}
.cmp .ly{position:absolute;inset:0;display:grid;place-items:end center;padding:8% 12% 10%}
.cmp .ly svg,.cmp .ly img{max-height:80%;max-width:90%;height:auto;width:auto;filter:drop-shadow(0 16px 16px rgba(15,28,46,.22))}
.cmp .l1 svg,.cmp .l1 img{width:auto!important;height:var(--bear-height,78%)!important;max-width:90%;max-height:80%;object-fit:contain}
.cmp .l1{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp .l2{clip-path:inset(0 0 0 var(--pos))}
.cmp .dv{position:absolute;top:4%;bottom:4%;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--ink);pointer-events:none}
.cmp .dv i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--cream);border:2.5px solid var(--ink);display:grid;place-items:center;font-style:normal;font-weight:800;box-shadow:0 4px 0 var(--ink)}
.cmp .tg{position:absolute;top:3%;font:800 12px/1 var(--f-display);text-transform:uppercase;letter-spacing:.1em;padding:6px 10px;border-radius:var(--r-pill);border:2px solid var(--ink);background:#fff}
.cmp .tg.a{left:2%;transform:rotate(-5deg)}
.cmp .tg.b{right:2%;transform:rotate(5deg);background:var(--ink);color:var(--cream)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
@media (max-width:900px){
.p-im-grid{grid-template-columns:1fr}
.cmp{max-width:380px}
}