/* Shared product hero geometry. Product art uses a fixed optical stage on desktop. */
body.product-page {
  --product-hero-content-width: 1190px;
  --product-hero-gutter: max(24px, calc((100vw - var(--product-hero-content-width)) / 2));
}

@media (min-width: 821px) {
  body.product-page .detail-banner .banner {
    aspect-ratio: auto !important;
    height: 600px !important;
    min-height: 600px !important;
  }

  body.product-page .detail-banner .banner .info,
  body.product-page .detail-banner .banner .info > div {
    box-sizing: border-box;
  }

  body.product-page .detail-banner .banner .info {
    left: var(--product-hero-gutter) !important;
    width: min(610px, 43%) !important;
    max-width: 610px !important;
    min-width: 0 !important;
    transform: translateY(calc(-50% + 24px)) !important;
  }

  body.product-page .detail-banner .banner .info h1,
  body.product-page .detail-banner .banner .info .feature,
  body.product-page .detail-banner .banner .info .desc {
    white-space: normal !important;
  }

  body.product-page .detail-banner .banner .info h1 {
    margin: 0 0 18px !important;
  }

  body.product-page .detail-banner .banner .info .feature {
    margin: 0 !important;
  }

  body.product-page .detail-banner .banner .info .feature + .feature {
    margin-top: 4px !important;
  }

  body.product-page .detail-banner .banner .info .desc {
    margin: 10px 0 0 !important;
    max-width: 560px !important;
  }

  body.product-page .detail-banner img[class$="-banner__product"] {
    top: 50% !important;
    right: calc(var(--product-hero-gutter) + min(295px, 22vw)) !important;
    bottom: auto !important;
    left: auto !important;
    width: min(400px, 40vw) !important;
    height: 300px !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate(50%, -50%) !important;
    rotate: none !important;
  }

  /* Different aspect ratios need distinct boxes to keep visible mass comparable. */
  body.product-page .detail-banner img.h-controller-banner__product {
    width: min(320px, 36vw) !important;
    height: 330px !important;
  }

  body.product-page .detail-banner img.g-controller-banner__product {
    width: min(340px, 36vw) !important;
    height: 250px !important;
  }

  body.product-page .detail-banner img.a-controller-banner__product {
    width: min(320px, 36vw) !important;
    height: 370px !important;
  }

  body.product-page .detail-banner img.blade-banner__product {
    width: min(390px, 42vw) !important;
    height: 315px !important;
  }

  body.product-page .detail-banner img.v-controller-banner__product {
    width: min(440px, 42vw) !important;
    height: 250px !important;
  }

  body.product-page .detail-banner img.edge-controller-banner__product,
  body.product-page .detail-banner img.industrial-router-banner__product {
    width: min(220px, 24vw) !important;
    height: 390px !important;
  }

  body.product-page .detail-banner img.i2smp-banner__product {
    width: min(360px, 38vw) !important;
    height: 390px !important;
  }
}

@media (min-width: 821px) and (max-width: 1440px) {
  body.product-page .detail-banner .banner .info {
    left: clamp(32px, 7vw, 96px) !important;
    width: min(560px, 44%) !important;
  }
}

@media (min-width: 601px) and (max-width: 820px) {
  body.product-page .detail-banner .banner {
    aspect-ratio: auto !important;
    height: 360px !important;
    min-height: 360px !important;
  }

  body.product-page .detail-banner .banner .info {
    top: 36px !important;
    left: 28px !important;
    width: 46% !important;
    max-width: 46% !important;
    min-width: 0 !important;
    transform: none !important;
  }

  body.product-page .detail-banner .banner .info h1,
  body.product-page .detail-banner .banner .info .feature {
    white-space: normal !important;
  }

  body.product-page .detail-banner img[class$="-banner__product"] {
    top: auto !important;
    right: 4% !important;
    bottom: 14px !important;
    left: auto !important;
    width: 43% !important;
    height: 230px !important;
    min-width: 0 !important;
    max-width: 43% !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
  }

  body.product-page .detail-banner img.g-controller-banner__product,
  body.product-page .detail-banner img.h-controller-banner__product {
    right: 7% !important;
    width: 34% !important;
    height: 185px !important;
  }
}

@media (max-width: 600px) {
  body.product-page .detail-banner .banner {
    aspect-ratio: auto !important;
    height: 240px !important;
    min-height: 240px !important;
  }

  body.product-page .detail-banner .banner .info {
    top: 50% !important;
    left: 20px !important;
    width: 48% !important;
    max-width: 48% !important;
    min-width: 0 !important;
    transform: translateY(-50%) !important;
  }

  body.product-page .detail-banner .banner .info h1,
  body.product-page .detail-banner .banner .info .feature {
    white-space: normal !important;
  }

  body.product-page .detail-banner .banner .info .desc {
    display: none !important;
  }

  body.product-page .detail-banner img[class$="-banner__product"] {
    top: 50% !important;
    right: 4% !important;
    bottom: auto !important;
    left: auto !important;
    width: 40% !important;
    height: 46% !important;
    min-width: 0 !important;
    max-width: 40% !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: translateY(-50%) !important;
  }

  body.product-page .detail-banner img.g-controller-banner__product,
  body.product-page .detail-banner img.h-controller-banner__product {
    right: 7% !important;
    width: 32% !important;
    height: 38% !important;
  }
}

@media (max-width: 360px) {
  body.product-page .detail-banner .banner .info {
    left: 16px !important;
  }
}