/** * Raise the Empathy X (Interface X) search layer above the storefront sliders. * * Empathy mounts its whole layer inside a Shadow DOM attached to the host * `.x-root-container` (appended to ). The host has no positioning by * default, so the layer paints in the root stacking context below the sliders * (`z-10`/`z-[15]`). Giving the host `position` + a high `z-index` establishes * a stacking context that lifts the entire shadow subtree above theme content * (sliders, header, menu, cart drawer — all <= z-50). */ .x-root-container { position: relative; z-index: 100; } /** * Raise the minicart drawer above the search layer and the add-to-cart modal. * * The drawer is teleported to with `z-30`, so it shares the root * stacking context with `.x-root-container` and would paint underneath it, * even though the shopper can open it from inside the layer * (`UserClickedCartIcon` in snippet.phtml). * * Stack: theme content <= 50 < search layer 100 < add-to-cart modal 1000 * (`z-1000` in product-modal.phtml) < minicart 1001 < notifications 1002. * * Plain CSS on purpose: the theme's `styles.css` is a generated Tailwind * artifact. The id selector also outranks the template's `.z-30` utility. */ #cart-drawer > [role="dialog"] { z-index: 1001; } /** * Keep the notification toasts above the raised drawer. * * `.page.messages` is `sticky z-[100]` and a stacking context of its own, so * its wrapper z-index is what competes at root level. The toasts render * bottom-right, where the drawer opens, so they must stay on top. * * `body` prefix only to outrank the theme's own `.page.messages` rule * regardless of stylesheet order. */ body .page.messages { z-index: 1002; }