/* V28: one editable customer stage, assembled from background, cast and counter. */

.scene-counter-occluder {
  display: none !important;
}

.shop {
  isolation: isolate;
  background: none !important;
}

.shop-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.shop-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.shop-stage-background {
  z-index: 0;
}

.shop-counter-foreground {
  z-index: 6;
}

.shop .customers,
.shop .customer {
  z-index: auto;
}

.shop .customer .scene-aura {
  z-index: 3;
}

.shop .customer .alien-wrap,
.shop .departing-guests {
  z-index: 4;
}

.shop .customer .speech,
.shop .customer .customer-reaction {
  z-index: 11;
}

.shop .shift-brief {
  z-index: 15;
}

@media (min-width: 721px) and (min-height: 500px) {
  .shop {
    top: 4.63%;
    right: 0;
    left: 0;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1536 / 500;
    overflow: hidden !important;
  }

  .shop-layer img {
    object-fit: contain;
  }

  .shop .customers {
    inset: 20.8% 4% auto;
    height: 64.4%;
    align-items: start;
  }

  .shop .customer {
    height: 100%;
  }

  .shop .customer:not(.preview) .alien-wrap,
  .shop .customer:not(.preview) .alien-figure {
    top: 0;
    bottom: auto;
    height: 99%;
  }

  .shop .customer:not(.preview) .alien-art,
  .shop .customer:not(.preview) .alien-art.character-insect {
    width: min(21.2vw, 326px);
    height: min(21.2vw, 326px);
    object-position: center bottom;
  }

  .shop .customer .speech {
    bottom: 1px;
  }

  .shop .departing-guests {
    inset: 20.8% 4% 14.8%;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-aspect-ratio: 3 / 2) {
  .shop {
    top: 4.63%;
  }
}

@media (max-width: 720px), (max-height: 499px) {
  .shop {
    overflow: hidden !important;
  }

  .shop-layer img {
    object-fit: cover;
  }
}