.hook{background:var(--color-surface);contain:layout paint;border-radius:16px;height:200px;display:block;position:relative;overflow:hidden}.hook__scene{width:400px;height:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.6667)}@media (min-width:1024px){.hook{height:360px}.hook__scene{transform:translate(-50%,-50%)scale(1.2)}}.hook__scene>*{position:absolute}.hook__msg{opacity:0;border-radius:16px;max-width:250px;margin:0;padding:10px 14px;font-size:15px;line-height:1.35}.hook__msg--in{color:var(--color-fg);background:#dbeafe;border-bottom-left-radius:4px;top:28px;left:24px}.hook__msg--out{color:var(--color-muted);background:#fff;border-bottom-right-radius:4px;top:92px;right:24px}.hook__card{background:#fff;border-radius:14px;width:268px;height:196px;padding:14px;top:20px;left:24px;box-shadow:0 1px 3px #1118271f}.hook__card>*{margin:0;position:absolute}.hook__img{background:var(--color-surface);width:72px;height:72px;color:var(--color-muted);border-radius:10px;top:14px;left:14px}.hook__brand{color:var(--color-muted);font-size:12px;top:16px;left:98px}.hook__name{font-size:16px;font-weight:600;top:34px;left:98px}.hook__price{font-size:16px;font-weight:700;top:60px;left:98px}.hook__unit{color:var(--color-muted);font-size:12px;font-weight:400}.hook__qty{border:1px solid var(--color-muted);border-radius:8px;padding:4px 10px;font-size:14px;top:104px;left:14px}.hook__btn{background:var(--color-accent);color:#fff;text-align:center;border-radius:10px;padding:9px 0;font-size:15px;font-weight:600;top:140px;left:14px;right:14px}.hook__cart{width:52px;height:52px;color:var(--color-fg);background:#fff;border-radius:999px;padding:13px;top:24px;right:24px}.hook__badge{background:var(--color-accent);color:#fff;border-radius:999px;place-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:grid;position:absolute;top:-4px;right:-4px}.hook__cursor{width:26px;height:26px;color:var(--color-fg);opacity:0;top:166px;left:150px}.hook__toast{color:var(--color-success);background:#fff;border-radius:12px;align-items:center;gap:8px;margin:0;padding:12px 14px;font-size:15px;font-weight:600;display:flex;bottom:22px;left:24px;right:24px;box-shadow:0 1px 3px #1118271f}.hook [data-anim]{animation-duration:var(--d,.3s);animation-delay:var(--t,0s);animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:both}@keyframes hook-in{0%{opacity:0;transform:translateY(8px)}}.hook__price,.hook__qty,.hook__toast{animation-name:hook-in}@keyframes hook-chat{0%{opacity:0;transform:translateY(8px)}15%,80%{opacity:1;transform:none}to{opacity:0;transform:scale(.96)}}.hook__msg{animation-name:hook-chat}@keyframes hook-card-in{0%{opacity:0;clip-path:inset(30% 20% 40% round 16px);transform:scale(.92)}}.hook__card{animation-name:hook-card-in}@keyframes hook-cursor{0%{opacity:0;transform:translate(150px,70px)}20%{opacity:1}60%{opacity:1;transform:none}75%{opacity:1;transform:scale(.9)}to{opacity:0;transform:none}}.hook__cursor{animation-name:hook-cursor}@keyframes hook-press{50%{transform:scale(.96)}}.hook__btn{animation-name:hook-press}@keyframes hook-pop{0%{transform:scale(0)}}.hook__badge{animation-name:hook-pop}@media (prefers-reduced-motion:reduce){.hook,.hook *{animation:none!important}}