/* ---- <bz-avatar-3d>: the 3D character (components/bz-avatar-3d.js) ---- */
bz-avatar-3d { display: block; position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
bz-avatar-3d.av3d--drag { cursor: grabbing; }
.av3d__poster { position: absolute; inset: 0; transition: opacity .35s ease; }
.av3d__poster .bz-char { width: 100%; height: 100%; }
.av3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .35s ease; touch-action: pan-y; }
.av3d--on .av3d__canvas { opacity: 1; }
.av3d--on .av3d__poster { opacity: 0; }
.av3d__ctl { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: space-between; pointer-events: none; }
.av3d__ctl[hidden] { display: none; }
.av3d__btn { pointer-events: auto; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); background: rgba(20, 22, 48, .55); color: #fff; cursor: pointer; }
.av3d__btn:hover { background: rgba(20, 22, 48, .8); }
.av3d__btn:focus-visible { outline: 3px solid #FFC93C; outline-offset: 2px; }
.av3d__btn .bz-icon { width: 18px; height: 18px; }
/* zoom="on": the canvas scales toward the head (--av3d-zoom 1 = full body, up to 2.6 = head close-up) */
bz-avatar-3d[zoom="on"] { touch-action: none; }
bz-avatar-3d[zoom="on"] .av3d__canvas, bz-avatar-3d[zoom="on"] .av3d__poster { transform: scale(var(--av3d-zoom, 1)); transform-origin: 50% 14%; touch-action: none; }
bz-avatar-3d[zoom="on"]:focus-visible { outline: 3px solid #FFC93C; outline-offset: -3px; }
.av3d__mid { display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }
.av3d__reset { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .45); background: rgba(20, 22, 48, .55); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.av3d__reset:hover { background: rgba(20, 22, 48, .8); }
.av3d__reset:focus-visible { outline: 3px solid #FFC93C; outline-offset: 2px; }
.av3d__reset .bz-icon { width: 16px; height: 16px; }
@media (max-width: 400px) { .av3d__reset { padding: 0 10px; font-size: 13px; } .av3d__mid { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .av3d__canvas, .av3d__poster { transition: none; } }
.bz-reduce-motion .av3d__canvas, .bz-reduce-motion .av3d__poster { transition: none; }
.shop-stage__art bz-avatar-3d { flex: 1; min-width: 0; min-height: 300px; border-radius: 20px; }
.pf-avatar bz-avatar-3d { width: 168px; height: 216px; border-radius: 22px; background: var(--soft); }
.ob-look__stage bz-avatar-3d { width: 100%; height: 100%; }
@media (max-width: 720px) { .pf-avatar bz-avatar-3d { width: 128px; height: 168px; } }
.av3d-note { font-size: 12px; color: #C3C7DD; text-align: center; }