.before-after{padding:80px 0}.before-after-header{max-width:720px;margin:0 auto 40px;text-align:center}.before-after-header h2{margin:0 0 14px;font-size:clamp(32px,4vw,48px);line-height:1.1;font-weight:700}.before-after-header p{margin:0;font-size:18px;line-height:1.6;opacity:.72}.before-after-wrapper{width:100%;max-width:760px;margin:0 auto}.before-after-card{display:block;width:100%;padding:0;border:0;border-radius:28px;overflow:hidden;background:transparent;cursor:pointer;text-align:inherit;appearance:none;-webkit-appearance:none}.before-after-media{position:relative;width:100%;aspect-ratio:10 / 11;overflow:hidden;border-radius:28px;background:#f6f6f6}.before-after-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.05s cubic-bezier(.22,1,.36,1),filter .9s ease;will-change:opacity,transform}.before-image{opacity:1;z-index:1;transform:scale(1)}.after-image{opacity:0;z-index:2;transform:scale(1.035) translateY(6px)}.before-after-card.is-after .before-image{opacity:0;transform:scale(.985)}.before-after-card.is-after .after-image{opacity:1;transform:scale(1) translateY(0)}.before-after-badge{position:absolute;z-index:5;top:22px;left:22px;padding:10px 18px;border-radius:999px;background:#ffffffeb;color:#111;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 30px #00000014;transition:opacity .35s ease,transform .35s ease}.after-badge{opacity:0;transform:translateY(5px)}.before-after-card.is-after .before-badge{opacity:0;transform:translateY(-5px)}.before-after-card.is-after .after-badge{opacity:1;transform:translateY(0)}.before-after-hint{position:absolute;z-index:5;right:22px;bottom:22px;padding:9px 15px;border-radius:999px;background:#141414b8;color:#fff;font-size:12px;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.mobile-hint{display:none}@media(hover:hover)and (pointer:fine){.before-after-card:hover .before-image{opacity:0;transform:scale(.985)}.before-after-card:hover .after-image{opacity:1;transform:scale(1) translateY(0)}.before-after-card:hover .before-badge{opacity:0;transform:translateY(-5px)}.before-after-card:hover .after-badge{opacity:1;transform:translateY(0)}}@media screen and (max-width:749px){.before-after{padding:56px 0}.before-after-header{margin-bottom:28px}.before-after-header p{font-size:16px}.before-after-media{aspect-ratio:4 / 5;border-radius:22px}.before-after-card{border-radius:22px}.before-after-badge{top:14px;left:14px;padding:8px 14px;font-size:11px}.before-after-hint{right:14px;bottom:14px;font-size:11px}.desktop-hint{display:none}.mobile-hint{display:inline}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/before-after.css.map */