:root {
  --z-scene-background: 0;
  --z-scene-decor: 5;
  --z-scene-content: 10;
  --z-fruit: 20;
  --z-fruit-active: 30;
  --z-product-float-card: 600;
  --z-product-float-dropdown: 650;
  --z-header: 700;
  --z-mobile-menu: 800;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Keep the viewport product card above every scene and motion stacking context. */
[data-product-float-card] {
  z-index: var(--z-product-float-card) !important;
  isolation: isolate;
  overflow: visible !important;
  pointer-events: auto;
}

[data-product-float-card] > .float-card,
[data-product-float-card] .product-float-card__surface,
[data-product-float-card] .product-float-card__buy,
[data-product-float-card] .custom-dropdown,
[data-product-float-card] .custom-select-trigger {
  z-index: var(--z-product-float-card) !important;
}

/* Menus can be portaled to body by the custom select, so cover both locations. */
[data-product-float-card] .dropdown-menu,
[data-product-float-card] .custom-select-menu,
[data-product-float-card] [role="listbox"],
.custom-select-menu {
  z-index: var(--z-product-float-dropdown) !important;
  pointer-events: auto;
}

.fruit-motion-layer,
.fruit-travel-wrapper,
.fruit-scale-wrapper,
.fruit-image,
.berry-motion-fruit,
.pickedfruit-motion-layer,
.pink-peel-strawberry-layer,
.pink-peel-middle-banana {
  z-index: var(--z-fruit) !important;
}

.is-fruit-active,
.fruit-travel-wrapper.is-active,
.pickedfruit-motion-layer.is-active {
  z-index: var(--z-fruit-active) !important;
}

/* Header and menu remain above the product card on the fruit pages. */
body:is(.blueberry-page, .raspberry-page, .banana-page, .strawberry-page,
  .mango-page, .pickedfruit-page, .mixberry-page, .banana-pineapple-mango-mixed-page) #nav {
  z-index: var(--z-header) !important;
}

body:is(.blueberry-page, .raspberry-page, .banana-page, .strawberry-page,
  .mango-page, .pickedfruit-page, .mixberry-page, .banana-pineapple-mango-mixed-page)
  :is(#mobileMenu, #headerSearchPopover, .mobile-menu-drawer) {
  z-index: var(--z-mobile-menu) !important;
}