/* Keep the Figma illustration layers on the same scale as their shop content. */
.verification-phone-icon {
  aspect-ratio: 96 / 112;
  position: relative;
  flex: none;
}
.verification-phone-icon img {
  position: absolute;
  max-width: none;
}
.verification-phone-tablet {
  width: 90.625%;
  height: 90.17857%;
  left: 0;
  top: 2.67857%;
}
.verification-phone-top {
  width: 90.625%;
  height: 4.46429%;
  left: 0;
  top: 16.96429%;
}
.verification-phone-bottom {
  width: 65.62656%;
  height: 4.46429%;
  left: 0;
  top: 70.53571%;
  transform: rotate(.41deg);
}
.verification-phone-dot-left {
  width: 2.60417%;
  height: 2.67857%;
  left: 42.70833%;
  top: 81.25%;
}
.verification-phone-dot-right {
  width: 2.60417%;
  height: 2.67857%;
  left: 75%;
  top: 86.60714%;
}
.verification-phone-device {
  width: 37.5%;
  height: 56.25%;
  left: 60.41667%;
  top: 41.07143%;
}
.verification-phone-bell {
  width: 26.74177%;
  height: 26.29625%;
  left: 66.66667%;
  top: 0;
}
.verification-conclusion-icon {
  --verification-art-unit: var(--shop-unit);
  position: relative;
  width: calc(119 * var(--verification-art-unit));
  height: calc(102 * var(--verification-art-unit));
  margin: 0 auto calc(12 * var(--verification-art-unit));
}
.verification-conclusion-chameleon {
  width: calc(119 * var(--verification-art-unit));
  height: calc(82.1846 * var(--verification-art-unit));
  position: absolute;
  left: 0;
  top: calc(23 * var(--verification-art-unit));
}
.verification-conclusion-cap {
  position: absolute;
  left: calc(54 * var(--verification-art-unit));
  top: calc(-2 * var(--verification-art-unit));
  transform: rotate(-177.55deg) scaleY(-1) skewX(.12deg);
}
.verification-conclusion-cap img {
  width: calc(57.3197 * var(--verification-art-unit));
  height: calc(50.3938 * var(--verification-art-unit));
  display: block;
  max-width: none;
}

@media (max-width: 48rem) {
  .verification-conclusion-icon { --verification-art-unit: calc(.7 * var(--shop-mobile-unit)); }

  /* PID descriptions can wrap beyond the age-check copy. Keep its dimensions and
     typography, but let the wallet section follow the actual text height. */
  .shop-age-verification { height: auto; }
  .shop-age-wallet {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: calc(115 * var(--shop-mobile-unit)) minmax(0, 1fr);
    column-gap: calc(30 * var(--shop-mobile-unit));
    row-gap: calc(13 * var(--shop-mobile-unit));
    min-height: calc(216 * var(--shop-mobile-unit));
    margin: calc(25 * var(--shop-mobile-unit)) calc(16 * var(--shop-mobile-unit)) calc(23 * var(--shop-mobile-unit));
  }
  .shop-age-desktop-qr, .shop-age-steps, .shop-age-mobile-separator, .shop-age-mobile-wallet {
    position: static;
  }
  .shop-age-steps { grid-column: 2; grid-row: 1; }
  .shop-age-mobile-separator, .shop-age-mobile-wallet {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .shop-age-mobile-wallet { grid-row: 3; margin-top: calc(12 * var(--shop-mobile-unit)); }
}