/* Compact APEX/VOLT hero sizing; TITAN keeps its existing shared styles. */
.product-breadcrumb { padding-top: clamp(16px, 2vh, 24px); }
.apex-intro { max-width: none; padding: 16px 0 24px; }
.apex-intro h1 { font-size: clamp(4.4rem, 6vw, 6.5rem); }
.apex-subtitle { margin-top: 12px; }
.apex-price { margin-top: 14px; }
.apex-configurator {
  --apex-gallery-gap: clamp(28px, 3vw, 48px);
  gap: var(--apex-gallery-gap);
  grid-template-columns: minmax(0, min(70%, calc(100% - 320px - var(--apex-gallery-gap)), calc((100svh - 420px) * 2.05))) minmax(320px, 1fr);
}
.apex-gallery-stage { aspect-ratio: auto; max-height: none; padding-bottom: 80px; }
.apex-main-image { position: relative; inset: auto; height: auto; aspect-ratio: 2.05 / 1; object-fit: cover; object-position: center bottom; border-radius: inherit; }
.apex-main-image-buffer { position: absolute; inset: 0; }
.apex-gallery-controls { bottom: 15px; }
.apex-options-header { padding-bottom: 24px; }
.apex-options-header h2 { font-size: clamp(2.7rem, 3.5vw, 3.5rem); }

@media (max-width: 900px) {
  .apex-configurator { grid-template-columns: 1fr; }
  .apex-main-image { aspect-ratio: 3 / 2; }
  .apex-options { padding-top: 12px; }
}

@media (max-width: 600px) {
  .product-breadcrumb { padding-top: calc(12px + env(safe-area-inset-top)); }
  .apex-intro { padding: 18px 0 24px; }
  .apex-intro h1 { font-size: clamp(4rem, 22vw, 6.3rem); }
  .apex-price { flex-wrap: wrap; gap: 4px 12px; }
  .apex-gallery-stage { padding-bottom: 76px; }
}