/* The approved image is the only mobile Pharma hero background. */
@media (max-width: 1000px) {
  .home-route .hero {
    position: relative;
    isolation: isolate;
    display: block;
    min-height: 0;
    aspect-ratio: auto;
    height: var(--mobile-hero-height, calc(360px + 73.12vw));
    padding-bottom: 0;
    background-color: transparent;
    background-image: url('/comparateur/assets/pharma-hero/hero_photo_final.png');
    background-repeat: no-repeat;
    /* Fit the cross and basket without increasing the mobile hero height. */
    background-size: var(--mobile-image-width, 100%) var(--mobile-image-height, auto);
    background-position: center var(--mobile-image-top, -100px);
  }
  /* Extend only the outer purple edges of the same image into the side margins.
     The centered basket and cross retain the source image's natural ratio. */
  .home-route .hero::before,
  .home-route .hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: max(0px, calc((100% - var(--mobile-image-width, 100%)) / 2 + 2px));
    pointer-events: none;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: calc(var(--mobile-image-width, 100%) * 4) var(--mobile-image-height, auto);
    transform: scaleX(-1);
  }
  .home-route .hero::before {
    left: 0;
    background-position: left var(--mobile-image-top, -100px);
  }
  .home-route .hero::after {
    right: 0;
    background-position: right var(--mobile-image-top, -100px);
  }
  .home-route .family-navigation { padding-top: 10px; }
  .home-route body.mobile-cart-visible .family-navigation {
    padding-top: calc(var(--home-cart-height, 52px) + 24px);
  }
  .home-route .hero-inner { display: block; }
  .home-route .hero-visual { display: none; }
}