.hero .hero-compare{--reveal:50%;isolation:isolate;min-height:540px;background:#d4d0c2;touch-action:pan-y}
.hero-compare>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none}
.hero-compare .compare-after{clip-path:inset(0 0 0 var(--reveal))}
.compare-label{position:absolute;top:24px;z-index:2;background:#f8f6f0ed;padding:7px 14px;font-size:11px;letter-spacing:1px;pointer-events:none}.compare-label-before{left:24px}.compare-label-after{right:24px}
.compare-divider{position:absolute;top:0;bottom:0;left:var(--reveal);width:2px;background:#fff;transform:translateX(-50%);z-index:2;pointer-events:none;box-shadow:0 0 12px #0002}.compare-divider>span{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;gap:12px;width:52px;height:52px;border-radius:50%;background:#f8f6f0;color:#414c38;border:1px solid #fff;box-shadow:0 3px 18px #0002;font-size:28px}.compare-divider b{font-weight:400}
.hero-compare .compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;z-index:3;cursor:ew-resize;touch-action:pan-y}
.hero-compare:has(.compare-range:focus-visible){outline:3px solid #ad713d;outline-offset:-4px}.hero-compare:has(.compare-range:focus-visible) .compare-divider>span{outline:3px solid #ad713d;outline-offset:3px}
.compare-bottom{position:absolute;bottom:42px;left:24px;right:24px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:14px;background:#f8f6f0ed;padding:16px 20px;pointer-events:none}.compare-bottom p{margin:0}.compare-bottom strong{display:block;font:22px/1.2 Georgia,serif}.compare-bottom p span{display:block;font-size:11px;margin-top:7px}.compare-motion{pointer-events:auto;border:1px solid #a7ae9e;background:transparent;color:#303a2f;padding:10px;font-size:11px;min-height:44px;white-space:nowrap}.compare-note{position:absolute;bottom:12px;right:16px;background:#f8f6f0e8;padding:3px 7px;font-size:9px;z-index:4;pointer-events:none}
@media(max-width:760px){.hero .hero-compare{min-height:420px}.compare-bottom{left:14px;right:14px;bottom:42px;padding:13px;gap:10px}.compare-bottom strong{font-size:18px}.compare-bottom p span{font-size:10px}.compare-label{top:16px}.compare-label-before{left:16px}.compare-label-after{right:16px}.compare-motion{font-size:10px;white-space:normal;max-width:100px}.compare-note{font-size:8px;right:12px}}

.compare-product{display:inline-block;pointer-events:auto;text-decoration:underline;text-underline-offset:3px;font-size:11px;margin-top:8px}.compare-product:focus-visible{outline:2px solid #ad713d}