sits in a stacking context that paints BELOW the site footer, so footer widgets overlapped the fixed bar and swallowed taps on "Add to cart" (raising the bar's own z-index does nothing — it is trapped inside the landing's context). Giving the landing a positive z-index lifts its stacking context (and the fixed bar inside it) above the footer, while staying BELOW the header (390), toolbar (350) and scroll-to-top (380) so all of those remain visible and tappable. Scope: this stylesheet loads only on QuickMix immersive pages, and every rule is pinned to body.qm-immersive. Desktop (>=1025px, where .wd-toolbar is display:none) is untouched. Rollback: delete this block and revert QM_IMMERSIVE_VERSION in the plugin PHP. */ @media (max-width:1024px){ /* (2) lift the landing's stacking context above the footer so the bar is tappable */ body.qm-immersive main.qm-landing{ position:relative; z-index:1; } /* (1) COMPACT FLOATING add-to-cart FAB (replaces the full-width bottom bar on mobile). Release the fixed container from edge-to-edge, strip the bar chrome (bg/blur/border/pad), and anchor it bottom-right ABOVE the 55px WoodMart toolbar so it reads as a floating pill. */ body.qm-immersive .qm-sticky{ left:auto; right:16px; /* was left:0;right:0 — release full width */ bottom:calc(60px + env(safe-area-inset-bottom)); /* float 5px above the 55px toolbar; keeps pill top at/below the qm-cook caption's baseline so long captions aren't clipped */ width:auto; gap:0; padding:0; /* hug content; drop the bar's padding */ background:transparent; backdrop-filter:none; border-top:0; /* remove full-width bar chrome */ justify-content:flex-end; } /* hide the product-name / price meta — the price is already shown in the hero */ body.qm-immersive .qm-sticky__info{ display:none; } /* give the real add-to-cart control a floating elevation (dark drop + existing brand glow) */ body.qm-immersive .qm-sticky .qm-btn{ box-shadow:0 12px 30px -6px rgba(0,0,0,.55), 0 16px 40px -12px rgba(237,28,46,.6); white-space:nowrap; } /* keep the pill fully tucked below the toolbar until the hero scrolls past. :not(.is-visible) so the JS-toggled .is-visible{transform:none} still reveals it. */ body.qm-immersive .qm-sticky:not(.is-visible){ transform:translateY(240%); } /* (dead rule kept for reversibility; .sticky-toolbar-on is never toggled by the JS) */ body.qm-immersive.sticky-toolbar-on{ padding-bottom:130px; } }