.product-box-view { position:relative; aspect-ratio:1.25; overflow:hidden; background:radial-gradient(ellipse at 50% 35%,#fff,#fbeff0); touch-action:pan-y; cursor:grab; }
.product-box-view:active { cursor:grabbing; }
.product-box-view:focus-visible { outline:3px solid #a02830; outline-offset:-4px; }
.product-box-stage { position:absolute; inset:0; perspective:850px; display:grid; place-items:center; }
.product-box-model { position:relative; width:280px; height:178px; transform-style:preserve-3d; transform:rotateX(0deg) rotateY(0deg); }
.product-box-model .box-face { position:absolute; display:block; backface-visibility:hidden; background:#e2e5df; }
.box-front { width:280px; height:178px; transform:translateZ(16px); }
.box-right { width:32px; height:178px; left:124px; transform:rotateY(90deg) translateZ(140px); filter:brightness(.92); }
.box-left { width:32px; height:178px; left:124px; transform:rotateY(-90deg) translateZ(140px); filter:brightness(.95); }
.box-top { width:280px; height:32px; top:73px; transform:rotateX(90deg) translateZ(89px); }
.box-bottom { width:280px; height:32px; top:73px; transform:rotateX(-90deg) translateZ(89px); }
.product-box-hint { position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:11px; color:#45474c; pointer-events:none; }
.product-box-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-box-view.is-ready .product-box-fallback { display:none; }
.product-box-view.is-loading .product-box-fallback,
.product-box-view.is-loading .product-box-model { visibility:hidden; }
.product-box-view.is-loading::after { content:"Preparing carton…"; position:absolute; inset:0; display:grid; place-items:center; color:#616369; font-size:.85rem; pointer-events:none; }

/* Keep the carton above its ground shadow and away from the interaction hint. */
.product-box-stage { bottom:34px; perspective:1000px; }
/* The ground shadow follows its box: product-box.js sets --box-bottom (the box's lower edge in the stage) and
   --box-width. It sits a little below the box with a visible gap, so every carton seems to float above it. */
.product-box-stage::before {
  content:""; position:absolute; left:50%; top:calc(var(--box-bottom, 88%) + 6px); bottom:auto;
  width:calc(var(--box-width, 160px) * 1.1); height:30px; margin-left:calc(var(--box-width, 160px) * -.55);
  border-radius:50%; background:radial-gradient(ellipse,#3c2d1e4d, #3c2d1e1c 42%,transparent 70%);
  filter:blur(6px);
  transform:translateX(var(--shadow-x,5px)) scaleX(var(--shadow-scale,.94));
  pointer-events:none;
}
.product-box-model { will-change:transform; }
.box-front { filter:brightness(var(--front-light,1)); }
.box-right { filter:brightness(var(--right-light,.88)); }
.box-left { filter:brightness(var(--left-light,.98)); }
.box-top { filter:brightness(1.035); }
.product-box-hint { bottom:9px; font-size:11px; }


.box-hanger { position:absolute; width:280px; height:26px; top:-26px; transform:translateZ(-16px); }
.box-hanger svg { display:block; width:100%; height:100%; }