/* Interactive Hotspot's carousel slide image (components/interactive-
   hotspot/slide.twig) renders at w-full h-42/h-50 object-contain — right
   for a real product photo, but when the uploaded image is an SVG icon
   instead (confirmed a deliberately-supported case: ResponsiveImage()
   itself skips generating a srcset specifically for .svg sources), that
   same box leaves a small icon looking oversized with empty space around
   it. Cap SVGs to a fixed, sensible size instead.

   Scoped to .interactive-hotspot-splide specifically — other Splide
   carousels on the site (hero-product, hero-home) use real photos and
   must not be affected by this. !important matches this theme's own
   convention for overriding a Tailwind utility class applied inline in
   markup (see resources/css/marketo.css). */
.interactive-hotspot-splide .splide__slide img[src$=".svg"] {
  width: 80px !important;
  height: auto !important;
}

/* The "marked image" box (components/interactive-hotspot/main.twig) has
   no min-height — a short/wide (landscape, low-height) image renders a
   correspondingly short box, making the whole section look thin. Force a
   floor via min-height + flex-centering on the OUTER wrapper only
   (content-center/bg-white/w-full are generic Tailwind utilities reused
   all over the site, so this is scoped via the component's own unique
   Alpine root — x-data="interactiveHotspot" — never a bare class match).

   Deliberately NOT applied to the inner `.relative.w-full` box that
   directly wraps the <img> + the absolute-positioned marker overlay
   (`absolute inset-0`): that overlay's marker x/y % coordinates are
   computed against ITS OWN rendered size, which must stay tied to the
   image's real height. Forcing height there would stretch the overlay
   taller than the actual image and misalign every marker. Centering the
   image+overlay unit (unchanged, still image-sized) inside a taller
   outer box keeps markers correct while giving the section more
   vertical presence. */
section[x-data="interactiveHotspot"] .content-center.bg-white {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}