/* ============================================================
   Cooked Apps — 3D shopfront (three.js edition) container styles.
   Pairs with shopfront3d.js, which builds a WebGL canvas into any
   `[data-shopfront]` element.
   ============================================================ */
.shopfront3d {
  position: relative;
  z-index: 1;
  isolation: isolate;
  /* Safari has known bugs compositing a transparent-background WebGL
     canvas against nearby DOM content — an adjacent element can end
     up painting over it even though it's later in the stacking
     order. Forcing its own GPU layer (translateZ(0), on top of the
     isolated stacking context above) is the standard workaround. */
  transform: translateZ(0);
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}
.shopfront3d canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.shopfront3d canvas:active { cursor: grabbing; }