/* The approved real render stays unchanged. The labels explain this demo. */
.hero-product-stage { position: relative; isolation: isolate; border-radius: 10px; background: #F0F3F6; }
.hero-product-image { display: block; overflow: hidden; border-radius: 10px; }
.hero-product-image:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.hero-product-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-product-lines path { fill: none; stroke: #2370CA; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hero-product-lines circle { fill: #DA414C; stroke: #FFF; stroke-width: 2; vector-effect: non-scaling-stroke; }
.hero-callout > summary { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px 8px 8px; border: 1px solid #D9EDFF; border-radius: 999px; background: #1263C4; color: #FFF; box-shadow: 0 3px 12px #081E3526; font-size: 14px; font-weight: 650; line-height: 1.2; list-style: none; cursor: pointer; }
.hero-callout > summary::-webkit-details-marker { display: none; }
.hero-callout > summary:hover { background: #094D9E; }
.hero-callout > summary:focus-visible { outline: 3px solid #081E35; outline-offset: 3px; }
.hero-callout[open] > summary { background: #081E35; }
.hero-callout-number { display: grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; border-radius: 50%; background: #FFF; color: #125CB6; font-size: 12px; }
.hero-callout-size > summary { top: 4%; left: 4%; }
.hero-callout-sides > summary { top: 4%; right: 4%; }
.hero-callout-wheels > summary { bottom: 4%; right: 4%; }
.hero-callout-extras > summary { bottom: 4%; left: 4%; }
.hero-callout-copy { position: absolute; z-index: 3; right: 16px; bottom: 70px; left: 16px; padding: 17px 20px; border: 1px solid #AFCDE3; border-radius: 12px; background: #FFF; color: #173D5D; box-shadow: 0 10px 30px #081E3526; }
.hero-callout-copy p { margin: 0; font-size: 15px; line-height: 1.6; }
.hero-callout-copy a { display: inline-block; min-height: 44px; padding-top: 10px; color: #095CBF; font-size: 14px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.hero-callout-copy a:focus-visible { outline: 3px solid #1263C4; outline-offset: 3px; }
.home .hero .shot figcaption .hero-product-hint { display: block; margin-bottom: 4px; }
.rp-editing-text .hero-callout-copy { position: static; margin: 8px; }
.rp-editing-text .hero-callout:not([open]) > .hero-callout-copy { display: block; }
.rp-editing-text .hero-callout::details-content { content-visibility: visible; }
.rp-editing-text .hero-callout > summary { position: static; margin: 8px; }
.rp-editing-text .hero-product-lines { display: none; }
@media (max-width: 600px) {
  .hero-callout > summary { gap: 5px; min-height: 44px; padding: 6px 9px 6px 6px; font-size: 12px; }
  .hero-callout-number { flex-basis: 20px; width: 20px; height: 20px; font-size: 11px; }
  .hero-callout-copy { left: 8px; right: 8px; bottom: 61px; padding: 12px 14px; }
  .hero-callout-copy p { font-size: 13px; line-height: 1.55; }
  .hero-callout-copy a { padding-top: 6px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-callout, .hero-callout-copy { scroll-behavior: auto; }
}