.package-viewer{border-radius:12px;background:#fff;color:#253979;overflow:hidden;border:1px solid #e3e6ed}.viewer-bar{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;font-size:11px;letter-spacing:1.6px}.viewer-bar>span:last-child{letter-spacing:.3px;color:#5a6580}.viewer-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f8b61e;margin-right:8px;vertical-align:middle}.box-scene{height:460px;position:relative;perspective:1100px;cursor:grab;touch-action:pan-y;user-select:none;outline-offset:-5px}.box-scene.is-dragging{cursor:grabbing}.box-scene:focus-visible{outline:2px solid #253979}.box-scene:before{content:"";position:absolute;width:44%;height:34px;left:28%;bottom:43px;border-radius:50%;background:#253979;filter:blur(22px);opacity:.12;pointer-events:none}.box-position{position:absolute;left:50%;top:47%;width:360px;height:208px;transform:translate(-50%,-50%) scale(var(--box-scale,1));transform-style:preserve-3d}.box-model{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-30deg)}.box-model.smooth{transition:transform .45s ease}.box-face{position:absolute;left:50%;top:50%;width:360px;height:208px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f8b61e;outline:1px solid #25397930}.box-face img{width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none}.box-front{transform:translate(-50%,-50%) translateZ(130px)}.box-back{transform:translate(-50%,-50%) rotateY(180deg) translateZ(130px)}.box-right{width:260px;transform:translate(-50%,-50%) rotateY(90deg) translateZ(180px)}.box-left{width:260px;transform:translate(-50%,-50%) rotateY(-90deg) translateZ(180px)}.box-top{height:260px;transform:translate(-50%,-50%) rotateX(90deg) translateZ(104px)}.box-right:after,.box-left:after{content:"";position:absolute;inset:0;background:#000;opacity:.06;pointer-events:none}.viewer-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 28px;padding-top:20px;border-top:1px solid #e3e6ed}.view-presets,.zoom-controls{display:flex;gap:5px;flex-wrap:wrap}.viewer-controls button{font-family:inherit;color:#253979;background:transparent;border:1px solid transparent;font-size:12px;border-radius:25px;padding:10px 15px;cursor:pointer;min-height:44px}.viewer-controls button:hover{background:#f1f3f8}.viewer-controls button[aria-pressed=true]{background:#f8b61e;color:#16275c}.viewer-controls button:focus-visible{outline:2px solid #253979;outline-offset:3px}.zoom-controls{flex-wrap:nowrap}.zoom-controls button{border-color:#d4dae6}.zoom-controls button:disabled{opacity:.35;cursor:default}.zoom-controls button:first-child,.zoom-controls button:last-child{font-size:20px;width:44px;padding:6px}.package-viewer #box-help{color:#5a6580;font-size:11px;text-align:center;padding:21px 20px 25px;line-height:1.7;margin:0}.no-script{text-align:center;font-size:12px;padding:12px}@media(max-width:640px){.viewer-bar{padding:20px 17px;font-size:9px}.box-scene{height:clamp(270px,78vw,360px);perspective:850px}.box-position{--box-scale:.6}.box-scene:before{bottom:28px}.viewer-controls{margin:0 16px;flex-direction:column;gap:13px;padding-top:16px}.view-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}.viewer-controls button{font-size:12px;padding:10px 12px;min-height:44px}.view-presets button{border-color:#e3e6ed}.zoom-controls{width:100%;justify-content:center;gap:8px}.zoom-controls #box-reset{min-width:92px}.package-viewer #box-help{font-size:11px;padding:18px 18px 20px}}@media(prefers-reduced-motion:reduce){.box-model.smooth{transition:none}}