/* Core bar: hidden to avoid any header change */
#wmfm-bar { display:none !important; }

/* Overlay - lightened */
.wmfm-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.6); backdrop-filter: saturate(150%) blur(4px); z-index: 9998; opacity: 0; transition: opacity .25s ease; }
.wmfm-overlay.visible { opacity: 1; }

/* Flyout */
.wmfm-menu { position: fixed; top: 0; bottom: 0; left: 0; width: 85%; max-width: 340px; background: #fff; z-index: 9999; transform: translateX(-105%); transition: transform .3s ease; box-shadow: 2px 0 24px rgba(0,0,0,.15); overflow: hidden; }
.wmfm-menu.open { transform: translateX(0); }
.wmfm-menu .wmfm-menu-panel { position: absolute; inset: 0; padding: 12px 8px; overflow: auto; }
.wmfm-menu .wmfm-list, .wmfm-menu .wmfm-list ul { list-style: none; margin: 0; padding: 0; }
.wmfm-menu .menu-item { border-bottom: 1px solid #eee; }
.wmfm-menu .wmfm-link { display: flex; justify-content: space-between; align-items: center; padding: 14px 10px; color: #111; }
.wmfm-menu .wmfm-link:hover { background: #f9f9f9; }
.wmfm-menu .wmfm-caret { font-size: 22px; line-height: 1; }

/* Slide stacks */
.wmfm-menu .wmfm-sub { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #fff; overflow: auto; transition: transform .25s ease; }
.wmfm-menu .wmfm-sub.active { transform: translateX(-100%); }
.wmfm-menu .wmfm-back { display: flex; align-items: center; gap: 8px; padding: 12px 10px; border-bottom: 1px solid #eee; background: #fdfdfd; text-decoration: none; color: #111; }
.wmfm-menu .wmfm-back svg { flex: 0 0 auto; }

/* Cart badge (kept simple & dark for contrast) */
#wmfm-cart { display:inline-flex; align-items:center; }
#wmfm-cart.hidden { display:none; }
#wmfm-cart .wmfm-cart-count { font-size:12px; min-width:18px; text-align:center; background:#111; color:#fff; border-radius:10px; padding:1px 6px; margin-left:6px; }

/* Only hide Divi's dropdown when our flyout is open (scoped, reversible) */
html.wmfm-flyout-open #et_mobile_nav_menu ul.et_mobile_menu { display: none !important; }

/* Stack levels above Divi header */
.wmfm-menu{z-index:99999}
.wmfm-overlay{z-index:99998}

/* ensure overlay visibility classes */
.wmfm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:9998}
.wmfm-overlay.visible{opacity:1;visibility:visible}

/* v1.3.2 stacked submenu panels */
#w m f m - m e n u {} /* prevent minifiers from removing previous rules */ 
.wmfm-menu { position: fixed; top: 0; left: 0; width: 85%; max-width: 360px; height: 100%; background: #fff; box-shadow: 2px 0 24px rgba(0,0,0,.12); transform: translateX(-105%); transition: transform .25s ease; z-index: 9999; overflow: hidden; }
.wmfm-menu.open { transform: translateX(0); }

.wmfm-stack { position: absolute; inset: 0; transition: transform .25s ease; will-change: transform; }
.wmfm-panel { position: absolute; top: 0; width: 100%; height: 100%; overflow-y: auto; background: #fff; }
.wmfm-panel .wmfm-panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #eee; background: #fafafa; position: sticky; top: 0; }
.wmfm-back-btn { display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; }
.wmfm-panel .wmfm-list, .wmfm-panel .wmfm-list ul { list-style: none; margin: 0; padding: 0; }
.wmfm-panel .wmfm-list > li > a { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px; border-bottom: 1px solid #f1f1f1; color: #111; text-decoration: none; }
.wmfm-caret { margin-left: 10px; font-size: 18px; }

/* overlay already defined earlier; ensure click-to-close works nicely */
.wmfm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 9998; }
.wmfm-overlay.visible { opacity: 1; visibility: visible; }

/* v1.3.3 ensure flyout sits above Divi header */
#wmfm-menu { position: fixed; top: 0; left: 0; z-index: 1000000 !important; }
.wmfm-overlay { z-index: 999999 !important; }
@media (max-width: 1024px) {
  body.admin-bar #wmfm-menu { top: 46px; }
}


/* v1.3.3 — ensure flyout sits above Divi header */
#wmfm-menu { position: fixed; top: 0; left: 0; z-index: 1000000 !important; }
.wmfm-overlay { z-index: 999999 !important; }

/* Nudge for WP admin bar on mobile */
@media (max-width: 1024px) {
  body.admin-bar #wmfm-menu { top: 46px; }
}

/* v1.3.6 — stack layout sizing */
.wmfm-menu { width: 85%; max-width: 360px; }
.wmfm-stack { position: absolute; inset: 0; }
.wmfm-panel { width: 100%; height: 100%; overflow-y: auto; position: absolute; top: 0; background: #fff; }


/* ===== v1.3.7 WMFM – Polished flyout styling ===== */
:root{
  --wmfm-accent: currentColor;
  --wmfm-text: #2b2b2b;
  --wmfm-muted: #6b6b6b;
  --wmfm-border: #ececec;
  --wmfm-row-bg: #fff;
  --wmfm-row-bg-hover: #f8f8f8;
  --wmfm-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Container */
#wmfm-menu{
  width: 86%;
  max-width: 360px;
  background: #fff;
  box-shadow: var(--wmfm-shadow);
  font-family: inherit;
  color: var(--wmfm-text);
}

/* Stack + panels */
.wmfm-stack{ position:absolute; inset:0; }
.wmfm-panel{
  background:#fff;
  display:flex; flex-direction:column;
}

/* Sticky header */
.wmfm-panel-header{
  position: sticky; top: 0; z-index: 2;
  display:flex; align-items:center; gap:.5rem;
  min-height: 52px; padding: 10px 14px;
  background:#fff;
  border-bottom: 1px solid var(--wmfm-border);
}

/* Back + title */
.wmfm-back-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:600; text-decoration:none;
  color: var(--wmfm-accent);
}
.wmfm-back-btn::before{
  content:"◀";
  font-size: 14px; line-height:1;
  opacity:.9;
}
.wmfm-title{
  font-weight:700; font-size:18px; color: var(--wmfm-muted);
}

/* Rows */
.wmfm-panel .wmfm-list,
.wmfm-panel .wmfm-list ul{ list-style:none; margin:0; padding:0; }
.wmfm-panel .wmfm-list > li{
  border-bottom:1px solid var(--wmfm-border);
  background: var(--wmfm-row-bg);
}
.wmfm-panel .wmfm-list > li > a{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; min-height: 50px;
  text-decoration:none;
  color: var(--wmfm-text); font-weight:600;
  transition: background .18s ease, transform .08s ease;
}
.wmfm-panel .wmfm-list > li:hover > a{ background: var(--wmfm-row-bg-hover); }
.wmfm-panel .wmfm-list > li:active > a{ transform: translateY(1px); }

/* Caret */
.wmfm-caret{
  margin-left: 12px;
  font-size: 18px; line-height:1;
  color: var(--wmfm-accent);
}

/* Current item highlight */
.wmfm-panel .current-menu-item > a{ color: var(--wmfm-accent); }

/* Scrolling */
.wmfm-panel{ overflow-y:auto; -webkit-overflow-scrolling: touch; }

/* Overlay polish */
.wmfm-overlay{ background: rgba(0,0,0,.25); }

/* Safe area for notches */
@supports (padding: max(0px)) {
  #wmfm-menu{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* Admin bar offset */
@media (max-width:1024px){
  body.admin-bar #wmfm-menu{ top:46px; }
}

/* Optional brand accent (uncomment to lock in RGBuk red) */
/*
#wmfm-menu { --wmfm-accent: #e53935; }
*/

/* v1.3.8 — unify submenu styling with main */
#wmfm-menu .wmfm-panel .wmfm-list > li > a{
  color: var(--wmfm-text) !important;
  font-weight: 700;
}
#wmfm-menu .wmfm-panel .wmfm-list > li > a .wmfm-caret{
  color: #2b2b2b;
  opacity: .75;
}
#wmfm-menu .wmfm-panel .wmfm-list > li{ border-bottom:1px solid var(--wmfm-border); background:#fff; }
#wmfm-menu .wmfm-panel .wmfm-list > li:hover > a{ background: var(--wmfm-row-bg-hover); }
#wmfm-menu .wmfm-panel .wmfm-list .menu-item-has-children > a{ padding-right: 20px; }
#wmfm-menu .wmfm-panel-header{ background:#fff; border-bottom:1px solid var(--wmfm-border); }
#wmfm-menu .wmfm-back-btn{ color: var(--wmfm-text); font-weight:700; }
#wmfm-menu .wmfm-back-btn::before{ content:"◀"; color:#2b2b2b; opacity:.85; }
#wmfm-menu .wmfm-title{ color: var(--wmfm-muted); font-weight:700; }


/* v1.3.9 — make submenus match main panel */
#wmfm-menu .wmfm-panel a{ color: var(--wmfm-text) !important; text-decoration: none; }
#wmfm-menu .wmfm-panel a:hover{ color: var(--wmfm-text) !important; }

#wmfm-menu .wmfm-panel .wmfm-list > li,
#wmfm-menu .wmfm-panel ul > li{
  background: #fff;
  border-bottom: 1px solid var(--wmfm-border);
}

#wmfm-menu .wmfm-panel .wmfm-list > li > a,
#wmfm-menu .wmfm-panel ul > li > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  min-height: 56px;
  color: var(--wmfm-text) !important;
  font-weight: 700;
  transition: background .18s ease, transform .08s ease;
}

#wmfm-menu .wmfm-panel .wmfm-list > li:hover > a,
#wmfm-menu .wmfm-panel ul > li:hover > a{
  background: var(--wmfm-row-bg-hover);
}

#wmfm-menu .wmfm-caret{
  margin-left: 12px;
  font-size: 18px;
  line-height: 1;
  color: #2b2b2b;
  opacity: .75;
}

/* v1.4.0 — optional current panel visibility aid */
#wmfm-menu .wmfm-panel{ visibility: hidden; }
#wmfm-menu .wmfm-panel.is-current{ visibility: visible; }

/* v1.6.0 — header actions */
#wmfm-menu .wmfm-actions{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#wmfm-menu .wmfm-action{
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 9999px;
  color: var(--wmfm-text);
  text-decoration: none;
}
#wmfm-menu .wmfm-action svg{ display:block; }

#wmfm-menu .wmfm-cart-badge{
  position: absolute;
  top: 0; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e53935;
  color: #fff;
  font-size: 11px; line-height: 18px;
  text-align: center;
  display: none;
}
#wmfm-menu .wmfm-cart.has-items .wmfm-cart-badge{ display: inline-block; }