/* =========================================================
MENZO HEALTH — SINGLE PRODUCT MOBILE HEADER
TASK 7 FINAL + TASK 8 PLACEMENT
Scope: body.single-product AND max-width 767px only.
Homepage / desktop are not targeted.
Why product pages differ from Home:
Home uses Elementor stretchMenu() which sets inline width
to the viewport and a negative left, plus top below the
toggle. Product pages open the same header 1690 menu via
child-theme JS (needed because stretch dropdowns / search
intercept taps). Without stretch(), the dropdown stays
position:absolute inside column 3392828 (30% / right).
top:auto then paints “Home” in the logo row.
Correct containing block = header 1690.
Open menu = top:100% (below logo row), width:100%.
========================================================= */
@media (max-width: 767px) {
body.single-product header.elementor-location-header {
position: relative;
z-index: 30;
overflow: visible;
}
body.single-product .elementor-location-single,
body.single-product .elementor-1750,
body.single-product .elementor-page-1758 .elementor-location-single {
position: relative;
z-index: 1;
}
body.single-product header.elementor-location-header .elementor-hidden-mobile,
body.single-product header.elementor-location-header .elementor-hidden-phone {
display: none !important;
pointer-events: none !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.single-product .elementor-location-header .elementor-background-overlay,
body.single-product .elementor-motion-effects-container,
body.single-product .elementor-motion-effects-layer {
pointer-events: none !important;
}
/*
* Elementor .elementor-column / .elementor-widget /
* .elementor-widget-wrap / .elementor-container /
* .elementor-section are position:relative. That makes
* the 30% hamburger column the dropdown containing block.
* Force this chain to static so header is the containing
* block. Toggle stays relative so it remains clickable.
*/
body.single-product .elementor-1690 .elementor-element-ca3cfde,
body.single-product .elementor-1690 .elementor-element-ca3cfde > .elementor-container,
body.single-product .elementor-1690 .elementor-element-3392828,
body.single-product .elementor-1690 .elementor-element-3392828 > .elementor-widget-wrap,
body.single-product .elementor-1690 .elementor-element-e3f9f30 {
position: static !important;
}
body.single-product .elementor-1690 .elementor-element-e3f9f30 .elementor-menu-toggle {
position: relative;
z-index: 60;
pointer-events: auto;
}
body.single-product .elementor-1690 .elementor-element-406f98f {
position: relative;
z-index: 60;
pointer-events: auto;
}
body.single-product header.elementor-location-header
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
position: absolute !important;
}
body.single-product header.elementor-location-header
.elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--dropdown,
body.single-product header.elementor-location-header
.elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
pointer-events: none !important;
visibility: hidden !important;
}
body.single-product header.elementor-location-header
.elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
body.single-product header.elementor-location-header
.elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
display: block;
visibility: visible !important;
pointer-events: auto !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
transform: scaleY(1) !important;
transform-origin: top center;
z-index: 40 !important;
box-sizing: border-box;
background-color: #ffffff;
overflow: visible;
}
body.single-product header.elementor-location-header
.elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu,
body.single-product header.elementor-location-header
.elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/*
* Do NOT restyle dropdown tags. Homepage hover/active
* comes from Elementor post-1690.css on widget e3f9f30:
* a:hover / a:focus / a.elementor-item-active / a.highlighted
* background-color:#77A753; color:#FFFFFF;
* default link color:#000000;
* li:not(:last-child){border-style:solid;border-bottom-width:1px}
* Previous display:block on broke Elementor flex
* (justify-content:center) so the green fill did not match Home.
*/
/*
* TASK 8 — show the existing header search on product pages.
*
* Archive already wraps column c19ff47 (search) onto its own
* row under logo + hamburger. Product-only Task 7 CSS set
* that column/widget to z-index:1 and left the 537px tablet
* width in play, so the same Elementor search (adf9c8c) sat
* behind the logo row instead of wrapping below it.
*
* Reuse widget adf9c8c / column c19ff47. Do not restyle the
* input, Search button, or hamburger.
*/
body.single-product header.elementor-location-header
.elementor-1690
.elementor-element-ca3cfde
> .elementor-container {
flex-wrap: wrap !important;
}
body.single-product header.elementor-location-header
.elementor-1690
.elementor-element-c19ff47 {
visibility: visible !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
flex-basis: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
pointer-events: auto !important;
z-index: 5;
--container-widget-width: 100% !important;
}
body.single-product header.elementor-location-header
.elementor-1690
.elementor-element-adf9c8c {
display: block !important;
visibility: visible !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
overflow: visible !important;
pointer-events: auto !important;
z-index: 5;
--container-widget-width: 100% !important;
--container-widget-flex-grow: 1 !important;
}
body.single-product header.elementor-location-header
.elementor-1690
.elementor-element-adf9c8c
.e-search-form,
body.single-product header.elementor-location-header
.elementor-1690
.elementor-element-adf9c8c
.e-search-input-wrapper {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.single-product header.elementor-location-header
.elementor-1690
.elementor-element-adf9c8c
.e-search-label {
z-index: 10;
}
/* Existing search adf9c8c stays .hidden on product pages; Blocksy then sets display:none. */
body.single-product header.elementor-location-header
.elementor-1690
.elementor-element-adf9c8c
.e-search.hidden {
display: block !important;
}
}