@media (max-width: 767px) {
  body.blv-mobile-menu-open {
    overflow: auto !important;
    touch-action: auto !important;
    position: static !important;
    overscroll-behavior-y: auto !important;
  }

  /*
   * Safari can keep a transparent fixed backdrop-filter layer in the compositor
   * after the menu closes. Remove that layer from layout completely while the
   * catalog is closed so the browser safe area returns to transparent.
   */
  html body:not(.blv-mobile-menu-open) .blv-mobile-menu-dim,
  html body:not(.blv-mobile-menu-open) .blv-mobile-menu-dim.is-active {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
  }

  /* Restore the dim layer only while the catalog is genuinely open. */
  html body.blv-mobile-menu-open .blv-mobile-menu-dim {
    display: block !important;
  }

  .blv-mobile-menu-dim.is-active,
  body.blv-mobile-menu-open .blv-mobile-menu-dim.is-active {
    bottom: 0 !important;
  }

  /*
   * Keep the fixed glass layer at one physical size in both states.
   * iOS Safari can repaint the browser safe area white when width/height/padding
   * of a fixed backdrop-filter element are animated. Compact mode is therefore
   * rendered with transform scaling instead of resizing the fixed layer.
   */
  html body .blv-mobile-liquid-shell,
  html body.blv-mobile-menu-open .blv-mobile-liquid-shell {
    bottom: calc(var(--blv-menu-bottom-safe) + 4px) !important;
    width: min(95vw, 386px) !important;
    height: 62px !important;
    padding: 5px !important;
    gap: 3px !important;
    border-radius: 24px !important;
    transform: translateX(-50%) scale(1, 1) !important;
    transform-origin: 50% 100% !important;
    transition:
      transform var(--blv-menu-compact-duration, 290ms) var(--blv-menu-compact-ease, cubic-bezier(.22,1,.36,1)),
      border-radius var(--blv-menu-compact-duration, 290ms) var(--blv-menu-compact-ease, cubic-bezier(.22,1,.36,1)) !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  html body .blv-mobile-liquid-shell.is-compact {
    width: min(95vw, 386px) !important;
    height: 62px !important;
    padding: 5px !important;
    gap: 3px !important;
    border-radius: 24px !important;
    transform: translateX(-50%) scale(.803, .903) !important;
  }

  /*
   * Keep child geometry stable too. The visual 45px/52px compact heights are
   * produced by scaling the original 50px/59px controls with the shell.
   */
  html body .blv-mobile-liquid-shell.is-compact .blv-mobile-nav-item,
  html body .blv-mobile-liquid-shell.is-compact .blv-mobile-nav-item.blv-mobile-cart-button {
    height: 50px !important;
    padding: 5px 2px 4px !important;
    gap: 4px !important;
    border-radius: 17px !important;
  }

  html body .blv-mobile-liquid-shell.is-compact .blv-mobile-nav-item.is-center {
    height: 59px !important;
    margin-top: -10px !important;
    border-radius: 19px !important;
  }

  html body .blv-mobile-liquid-shell.is-compact .blv-mobile-nav-icon {
    width: 23px !important;
    height: 23px !important;
  }

  html body .blv-mobile-liquid-shell.is-compact .blv-mobile-nav-item.is-center .blv-mobile-nav-icon {
    width: 30px !important;
    height: 30px !important;
  }

  html body .blv-mobile-liquid-shell.is-compact .blv-mobile-nav-item .sf-cart-count {
    top: 3px !important;
    right: 13px !important;
  }

  /* Remove every shadow from the navigation controls, including active and center states. */
  html body .blv-mobile-liquid-shell .blv-mobile-nav-item,
  html body .blv-mobile-liquid-shell .blv-mobile-nav-item.is-active,
  html body .blv-mobile-liquid-shell .blv-mobile-nav-item[aria-expanded="true"],
  html body .blv-mobile-liquid-shell .blv-mobile-nav-item.is-center,
  html body .blv-mobile-liquid-shell .blv-mobile-nav-item.is-center.is-active {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* Keep the expanded catalog aligned with the navigation. */
  html body .blv-mobile-menu-sheet {
    bottom: calc(73px + var(--blv-menu-bottom-safe) + 4px) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html body .blv-mobile-liquid-shell,
    html body .blv-mobile-liquid-shell.is-compact {
      transition-duration: 1ms !important;
    }
  }
}