/* Interactive 3D product box (drag to rotate, zoom, view buttons; hover shows the back on desktop). Dimensions in "units": W550 x H347 x D88. */
.bx3d{--u:.8px;position:relative;width:100%;max-width:640px;margin:0 auto}
.bx-stage{position:relative;height:calc(var(--u)*540);overflow:hidden;border-radius:24px;background:radial-gradient(60% 55% at 50% 48%,#fff,rgba(255,255,255,0) 75%),linear-gradient(145deg,#e6f3fa,#f3faf8);perspective:calc(var(--u)*1900);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:3px}
.bx-stage.is-drag{cursor:grabbing}.bx-stage:focus-visible{outline:3px solid #15956f}
.bx-zoom{position:absolute;inset:0;transition:transform .35s ease;transform-origin:50% 50%}
.bx-cube{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-4deg) rotateY(-14deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.bx-stage.is-drag .bx-cube{transition:none}
.bx-f{position:absolute;left:0;top:0;display:block;max-width:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none;-webkit-user-drag:none;box-shadow:0 0 0 1px rgba(11,60,110,.12)}
.bx-front,.bx-back{width:calc(var(--u)*550);height:calc(var(--u)*347)}
.bx-left,.bx-right{width:calc(var(--u)*88);height:calc(var(--u)*347)}
.bx-top,.bx-bottom{width:calc(var(--u)*550);height:calc(var(--u)*88)}
.bx-front{transform:translate(-50%,-50%) translateZ(calc(var(--u)*44))}
.bx-back{transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--u)*44))}
.bx-right{transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--u)*275))}
.bx-left{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--u)*275))}
.bx-top{transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--u)*173.5))}
.bx-bottom{transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--u)*173.5))}
.bx-floor{position:absolute;left:50%;bottom:7%;width:60%;height:5%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(11,60,110,.28),transparent);filter:blur(4px);pointer-events:none}
.bx-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.bx-ctl button{font:600 .8rem Inter,system-ui,sans-serif;color:#0b4a86;background:#fff;border:1px solid #cfe1ef;border-radius:50px;padding:8px 14px;min-height:38px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bx-ctl button:hover{border-color:#0b4a86}.bx-ctl button[aria-pressed=true]{background:#0b4a86;color:#fff;border-color:#0b4a86}.bx-ctl button:focus-visible{outline:3px solid #15956f;outline-offset:2px}
.bx-zm{display:inline-flex;gap:6px;margin-left:6px;padding-left:10px;border-left:1px solid #d6e4ef}.bx-zm button{min-width:40px;padding:8px 10px;font-size:1rem;line-height:1}
.bx-hint{margin:10px 0 0;text-align:center;font-size:.76rem;color:#5a6b7b}
@media(max-width:480px){.bx-ctl{gap:6px}.bx-ctl button{padding:7px 11px}.bx-zm{margin-left:0;padding-left:0;border:0;width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.bx-cube,.bx-zoom{transition:none}}