.packaging-actions{display:flex;justify-content:center;gap:12px;margin:18px 0;position:relative;z-index:3}
.packaging-actions button,.packaging-actions a{background:#25211e;border:1px solid #ffffff50;color:#fff;border-radius:24px;padding:10px 20px;font:inherit;font-size:13px;cursor:pointer}
.packaging-actions button:first-child{background:#ff732d;border-color:#ff9a5c}.packaging-actions button:disabled{background:#37322c;opacity:.6;cursor:default}
.package-dialog{width:min(1000px,94vw);max-height:92svh;border:1px solid #ffffff30;border-radius:18px;background:#201d1a;color:white;padding:24px;overflow:auto}.package-dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}
.package-dialog h2{font-size:22px;margin:0 50px 10px 0}.package-dialog .package-close{position:absolute;right:20px;top:16px;background:#ff732d;border-radius:50%;width:34px;height:34px}
.package-viewport{height:min(62svh,590px);display:grid;place-items:center;perspective:1800px;cursor:grab;touch-action:none;overflow:hidden;background:radial-gradient(ellipse at 50% 85%,#80552c44,transparent 65%)}
.package-viewport:active{cursor:grabbing}.package-solid{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,-14deg)) rotateY(var(--ry,-27deg));pointer-events:none}
.package-face{position:absolute;backface-visibility:hidden;overflow:hidden;background:#d9d5ce;outline:.3px solid #0001}
.package-face img{position:absolute;max-width:none;pointer-events:none}.package-face::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 2px #0002;pointer-events:none}
.package-face.right::after{background:#0002}.package-face.top::after{background:#fff1}
.package-view-note{text-align:center;color:#c1b7ab;font-size:13px;margin:12px 0}.package-reset{display:block;margin:auto;border:1px solid #ffffff40;border-radius:20px;background:transparent;padding:8px 20px}
#packaging .package-inline-frame{position:relative;background:radial-gradient(ellipse at 50% 72%,#503c2855,transparent 68%),#231f1b;cursor:pointer;touch-action:none}
#packaging .package-inline-frame>img{visibility:hidden}
#packaging .package-inline-viewport{position:absolute;inset:13% 15% 15%;display:grid;place-items:center;perspective:1800px;cursor:grab;touch-action:none;user-select:none;z-index:3}
#packaging .package-inline-viewport:active{cursor:grabbing}
#packaging .package-inline-viewport:focus-visible{outline:1px dashed #ff792d88;outline-offset:6px}
#packaging .package-inline-viewport::before{content:'';position:absolute;bottom:0;left:16%;right:16%;height:8%;border-radius:50%;background:#0007;filter:blur(13px);pointer-events:none}
#packaging .package-inline-hint{position:absolute;bottom:10%;left:0;width:100%;text-align:center;color:#e4d8c9a0;font-size:10px;pointer-events:none}
#packaging .package-inline-frame .package-face img{display:block;object-fit:fill;border-radius:0;max-height:none}

.package-viewport{position:relative}
#packaging .package-inline-viewport::before,.package-viewport::before{content:'';position:absolute;left:var(--shadow-x,50%);top:var(--shadow-y,75%);bottom:auto;right:auto;width:var(--shadow-width,50%);height:14px;transform:translate(-50%,-30%);border-radius:50%;background:#0008;filter:blur(6px);pointer-events:none}
.package-face.split-lid::after{background:linear-gradient(to bottom,transparent calc(50% - .5px),#30282088 50%,transparent calc(50% + .5px))}

/* Keep face artwork fixed while hovering the draggable 3D preview. */
#packaging .package-inline-frame .package-face img,
#packaging .package-inline-frame:hover .package-face img,
.package-dialog .package-face img{transform:none;filter:none;transition:none}