/* How It Works hero approved mannequin visual — 2026-08-27 */
.page-hero-visual {
  overflow: hidden;
}

.page-hero-visual .system-graphic.hero-approved {
  position: absolute;
  inset: 0;
  top: 0 !important;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px 28px 0 18px;
}

.page-hero-visual .system-graphic.hero-approved .system-product-image {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
  height: calc(100% - 6px);
  max-width: min(100%, 465px);
  max-height: 100%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 24px 28px rgba(7, 57, 86, 0.12));
  transform: translateX(-22px);
}

@media (min-width: 1001px) {
  .page-hero-visual .system-graphic.hero-approved {
    padding: 12px 30px 0 12px;
  }

  .page-hero-visual .system-graphic.hero-approved .system-product-image {
    height: calc(100% - 4px);
    max-width: min(100%, 485px);
    transform: translateX(-26px);
  }
}

@media (max-width: 1000px) {
  .page-hero-visual {
    min-height: 520px;
  }

  .page-hero-visual .system-graphic.hero-approved {
    position: relative;
    inset: auto;
    left: auto;
    top: auto !important;
    width: 100%;
    min-height: 520px;
    padding: 18px 24px 0 24px;
    justify-content: center;
    transform: none;
    transform-origin: center center;
  }

  .page-hero-visual .system-graphic.hero-approved .system-product-image {
    height: 500px;
    max-width: min(100%, 420px);
    transform: none;
  }
}

@media (max-width: 700px) {
  .page-hero-visual {
    min-height: 470px;
  }

  .page-hero-visual .system-graphic.hero-approved {
    min-height: 470px;
    padding: 10px 16px 0 16px;
  }

  .page-hero-visual .system-graphic.hero-approved .system-product-image {
    height: 450px;
    max-width: min(100%, 355px);
    transform: none;
  }
}