/*
 * Mobile single-product purchase bar — overlap-safe positioning.
 * Scope: mobile product sticky bar only.
 *
 * The quick navigation itself is 66px tall and sits at
 * max(8px, env(safe-area-inset-bottom)). Keep the product bar a fixed 10px
 * above that exact geometry. The in-page duplicate state remains fade-only;
 * the footer state intentionally slides away in sync with the quick nav.
 */
@media (max-width: 767px) {
  .product-sticky-purchase-bar {
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    bottom: calc(76px + max(8px, env(safe-area-inset-bottom))) !important;
    z-index: 39 !important;

    /* Neutralize React's own hidden translate. Footer motion is applied only
       by our dedicated footer state below, keeping the two concerns separate. */
    transform: translate3d(0, 0, 0) !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform 340ms cubic-bezier(.16, 1, .3, 1),
      opacity 240ms ease,
      visibility 0s linear 0s !important;
    will-change: transform, opacity;
  }

  /* Footer synchronization: use the same slide-away language as the mobile quick nav.
     This state is independent from the in-page primary purchase visibility state. */
  .product-sticky-purchase-bar.mergan-product-sticky-at-footer {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, calc(100% + 28px), 0) scale(.98) !important;
    translate: none !important;
    transition:
      transform 340ms cubic-bezier(.16, 1, .3, 1),
      opacity 220ms ease,
      visibility 0s linear 340ms !important;
  }

  /* The sticky action appears only after the real in-page control leaves the viewport. */
  .product-sticky-purchase-bar.mergan-product-sticky-at-primary {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 0) !important;
    translate: none !important;
    transition:
      opacity 180ms ease,
      visibility 0s linear 180ms !important;
  }

  /* The cart drawer stays above everything. Hiding here is also fade-only so
     the product bar can never travel through/behind the bottom navigation. */
  html.mergan-mobile-cart-open .product-sticky-purchase-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 0) !important;
    translate: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .product-sticky-purchase-bar,
  .product-sticky-purchase-bar.mergan-product-sticky-at-primary,
  .product-sticky-purchase-bar.mergan-product-sticky-at-footer {
    transition: none !important;
  }
}