/* Product detail page: use desktop space without changing the site's shared layout. */
.detail-hero.detail-hero { padding-top: 24px; padding-bottom: 12px; }
.detail-hero .back-link { font-size: clamp(16px, .94vw, 18px); }
.detail-hero .eyebrow { font-size: clamp(15px, .84vw, 16px); margin: 8px 0 10px; letter-spacing: .06em; }
.detail-hero + .section { padding-top: 12px; }
.detail-hero .detail-summary {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: clamp(18px, 1.1vw, 21px);
  line-height: 1.65;
}
.detail-hero-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:64px; align-items:center; }
.detail-hero-copy { min-width:0; }
.product-contact { padding:22px 26px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:16px; min-width:0; }
.product-contact h2 { font-size:22px; margin:0 0 8px; }
.product-contact p { font-size:16px; color:var(--muted); margin:0 0 14px; }
.product-contact-row { display:flex; align-items:baseline; gap:4px; line-height:1.65; }
.product-contact-row > span:first-child { font-size:16px; color:var(--muted); flex-shrink:0; }
.product-contact-phone b { font-size:22px; letter-spacing:.02em; }
.product-contact-row .contact-value { min-width:0; overflow-wrap:anywhere; }
.product-contact-email { margin-top:10px; font-size:17px; }
@media (min-width:901px) and (max-width:1499px) { .detail-hero-layout { grid-template-columns:minmax(0,1fr) 340px; gap:36px; } }
@media (max-width:900px) { .detail-hero-layout { grid-template-columns:1fr; gap:20px; } .product-contact { padding:18px 22px; } }
@media (min-width: 1200px) and (max-width: 1499px) {
  .detail-hero > .shell,
  .detail-grid,
  .product-detail-stack,
  .product-detail-builder > .shell {
    width: min(1340px, calc(100% - 64px));
  }

  .detail-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
  }

  .detail-image {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #fff;
  }

  .detail-hero > div > p:last-child {
    max-width: 950px;
  }
}

@media (min-width: 1500px) {
  .detail-hero > .shell,
  .detail-grid,
  .product-detail-stack,
  .product-detail-builder > .shell {
    width: min(1680px, calc(100% - 128px));
  }

  .detail-grid {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 64px;
  }

  .detail-image {
    aspect-ratio: 16 / 9;
    max-height: 720px;
    object-fit: contain;
    background: #fff;
  }

  .detail-hero > div > p:last-child {
    max-width: 1050px;
  }
}

/* Keep the detail modules and their image canvases on the same left/right
   edges as the overview grid above (applications on the left, specs on right). */
.detail-block-image,
.detail-block-image .detail-image-stage {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.product-detail-stack > figure.detail-block-image {
  margin: 0;
  min-width: 0;
}

@media (min-width: 901px) and (max-width: 1499px) {
  .detail-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 36px;
  }

  .detail-image {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #fff;
  }
}

@media (max-width: 900px) {
  .detail-hero {
    padding: 52px 0 38px;
  }

  .detail-grid {
    gap: 32px;
  }

  .detail-image {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #fff;
  }
}