/* V52: every live customer uses one full-body stage contract. */

.shop {
  --guest-stage-size: clamp(344px, 27vw, 366px);
}

.shop .customer:not(.preview) .alien-art {
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  filter:
    sepia(.07)
    saturate(.96)
    contrast(1.02)
    brightness(1.005)
    drop-shadow(0 9px 8px rgb(20 11 17 / 42%));
}

@media (min-width: 721px) and (min-height: 500px) {
  .shop .customer:not(.preview) .alien-wrap {
    inset: 2% 0 0;
    width: 100%;
    height: 96%;
    overflow: visible;
    align-items: flex-end;
    justify-content: center;
  }

  .shop .customer:not(.preview) .alien-figure,
  .shop .customer:not(.preview) .alien-art {
    width: var(--guest-stage-size);
    height: var(--guest-stage-size);
    max-width: none;
    max-height: none;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .shop {
    --guest-stage-size: 214px;
  }

  .shop .customer:not(.preview) .alien-wrap {
    inset: 2% 0 0;
    width: 100%;
    height: 94%;
    overflow: visible;
    align-items: flex-end;
    justify-content: center;
  }

  .shop .customer:not(.preview) .alien-figure,
  .shop .customer:not(.preview) .alien-art {
    width: var(--guest-stage-size);
    height: var(--guest-stage-size);
    max-width: none;
    max-height: none;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  .shop {
    --guest-stage-size: 154px;
  }

  .shop .customer:not(.preview) .alien-wrap {
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    align-items: flex-start;
    justify-content: center;
  }

  .shop .customer:not(.preview) .alien-figure,
  .shop .customer:not(.preview) .alien-art {
    width: var(--guest-stage-size);
    height: var(--guest-stage-size);
    max-width: none;
    max-height: none;
  }
}