/* corporate-webshop — externalised head <style> (§9.3) */
@media (max-width: 600px) {
      /* Nearly full-bleed iPad image on mobile. */
      .webshop-figure-wrap { padding-inline: .5rem; }
      /* Move the "60+ webshops" stat badge to the image's bottom-right corner. */
      #brand-partnerships .stat-badge { left: auto; right: 2rem; }
    }
    @media (max-width: 860px) {
      /* Desktop pulls the figure up under the hero by ~75-130px so it overlaps
         the hero's bottom edge. On mobile/tablet the always-on tips (below)
         need that headroom back to clear the CTA buttons above — pull up less. */
      .webshop-figure { margin-top: 1.5rem; }
      /* No hover on touch devices — keep the tip bubbles permanently visible.
         All 3 markers sit right-of-centre, so open every tip to the left
         (instead of --right's default rightward open) and shrink it so it
         stays inside the image instead of overflowing the viewport. */
      .webshop-figure .hotspot .tip,
      .webshop-figure .hotspot--right .tip {
        opacity: 1; visibility: visible;
        right: calc(100% + 12px); left: auto; transform: translateY(-50%);
        max-width: 148px; font-size: .74rem; line-height: 1.15; padding: .45rem .65rem;
      }
      /* The image is short and landscape (16:9), so the 3 markers' original
         desktop-hover positions (21/44/61% top) sit too close together once
         their tips are always-on — the tip bubbles collide. Space the markers
         evenly instead so their permanently-visible tips clear each other. */
      .webshop-figure .hotspot:nth-of-type(1) { top: 15% !important; }
      .webshop-figure .hotspot:nth-of-type(2) { top: 50% !important; }
      .webshop-figure .hotspot:nth-of-type(3) { top: 85% !important; }
      /* Even spread out, each ~3-line tip is taller than the gap between markers
         on a short image — nudge each tip further from its own marker (dot stays
         put, only the bubble moves) so all 3 clear each other vertically too. */
      .webshop-figure .hotspot:nth-of-type(1) .tip { transform: translateY(calc(-50% - 20px)); }
      .webshop-figure .hotspot:nth-of-type(3) .tip { transform: translateY(calc(-50% + 20px)); }
    }