:root{
  --eco-gutter: 12px;
  --eco-header-bg: rgba(0,0,0,0.35);
  --eco-panel: rgba(0,0,0,0.60);
  --eco-panel-hover: rgba(0,0,0,0.68);
  --eco-date-size: 18px;
}

/* ===== Header fixed ===== */
.eco-global-menu{
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--adminbar, 0px));
  z-index: 9999;
  width: 100%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eco-global-menu.eco-bar{
  background: var(--eco-header-bg) !important;
  box-shadow: none !important;
}

/* Header inner (flex, gutters) */
.eco-global-menu .eco-menu-inner{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  padding: 6px var(--eco-gutter) !important;
  min-height: 60px !important;
}

/* Logo 52px */
.eco-global-menu .eco-logo{
  display:flex !important;
  align-items:center !important;
  line-height:0 !important;
  min-width: 52px !important;
  height: 100% !important;
}
.eco-global-menu .eco-logo-img,
.eco-global-menu .eco-logo img{
  height: 52px !important;
  width: auto !important;
  max-height: none !important;
  display: block !important;
}
/* Protect against global caps */
.eco-global-menu img{ max-height:none !important; }

/* Toggle */
.eco-global-menu .eco-hamburger{
  width:34px !important; height:34px !important;
  display:grid !important; place-items:center !important;
  background: var(--eco-panel) !important;
  border:0 !important; border-radius:10px !important;
  margin-left:8px !important; padding:0 !important; cursor:pointer !important;
}
.eco-global-menu .eco-hamburger:hover{ background: var(--eco-panel-hover) !important; }
.eco-global-menu .eco-hamburger::before{
  content:""; width:18px; height:18px; display:block;
  background:
    radial-gradient(#fff 2px,transparent 3px) 2px 50%,
    radial-gradient(#fff 2px,transparent 3px) 50% 50%,
    radial-gradient(#fff 2px,transparent 3px) calc(100% - 2px) 50%;
  background-size:4px 4px; background-repeat:no-repeat;
  transition:transform .22s ease;
}
body.eco-nav-open .eco-hamburger::before{ transform: rotate(90deg); }

/* Centered date */
.eco-global-menu .eco-title{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: var(--eco-date-size) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  color:#fff !important; opacity:.95 !important;
  text-align:center !important;
}

/* ===== Overlay & Offcanvas ===== */
.eco-overlay{
  position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(var(--adminbar, 0px) + var(--eco-header-height, 60px));
  background: rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
  z-index: 9998;
}
.eco-offcanvas{
  position: fixed;
  top: calc(var(--adminbar, 0px) + var(--eco-header-height, 60px));
  height: calc(100vh - var(--adminbar, 0px) - var(--eco-header-height, 60px));
  left: 0; width: 320px; max-width: 90vw;
  background: var(--eco-panel);
  transform: translateX(-100%); transition: transform .28s ease;
  z-index: 10000; box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  border-top-right-radius: 14px;
}
.eco-offcanvas-inner{ padding: 12px; }

/* Vertical list + accordion */
.eco-vertical-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.eco-vertical-list > li > a{
  display:block; padding:12px 12px; border-radius:10px;
  color:#fff; text-decoration:none; background: rgba(255,255,255,0.06);
  font-size:16px; font-weight:600; position:relative;
}
.eco-vertical-list > li > a:hover{ background: rgba(255,255,255,0.14); }
.eco-vertical-list li.menu-item-has-children > a::after{
  content: '▸'; position:absolute; right:10px; top:50%; transform: translateY(-50%); opacity:.9; font-size:14px;
}
.eco-vertical-list li.menu-item-has-children.eco-open > a::after{ content: '▾'; }
.eco-vertical-list li ul.sub-menu{
  list-style:none; margin:6px 0 0 10px; padding:0 0 0 10px;
  border-left: 2px solid rgba(255,255,255,0.2);
  max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.eco-vertical-list li ul.sub-menu li a{
  display:block; padding:8px 10px; color:#fff; text-decoration:none;
  opacity:.9; font-size:14px; font-weight:500;
}
.eco-vertical-list li ul.sub-menu li a:hover{ opacity:1; }

/* Open state */
body.eco-nav-open .eco-offcanvas{ transform: translateX(0); }
body.eco-nav-open .eco-overlay{ opacity:1; visibility:visible; }

/* Compensate content below fixed header */
body.has-eco-fixed-header{
  padding-top: calc(var(--adminbar, 0px) + var(--eco-header-height, 60px) - 8px) !important;
}

/* Mobile smaller logo (optional) */
@media (max-width:480px){
  .eco-global-menu .eco-logo-img{ height:44px !important; }
}

/* ===== Guards: keep content containers transparent inside eco pages */
.eco-root,
.eco-root .elementor-section,
.eco-root .elementor-container,
.eco-root .elementor-widget-wrap,
.eco-root .elementor-widget-container,
.eco-root .e-con,
.eco-root .e-con-inner{
  background: transparent !important;
  box-shadow: none !important;
}

/* Kill any inner background blocks in pasted HTML templates */
.eco-root .eco-bg{ display:none !important; }