/* 0) Wspólna stała na szerokość – identyczna jak glass-container-menu */
:root { --ga-shell: clamp(360px, 80vw, 2400px); }
@media (max-width: 1920px) { :root { --ga-shell: clamp(360px, 80vw, 1440px); } }
@media (max-width: 1366px) { :root { --ga-shell: clamp(360px, 80vw, 1140px); } }
@media (max-width: 768px)  { :root { --ga-shell: clamp(360px, 90vw, 768px); } }
@media (max-width: 480px)  { :root { --ga-shell: clamp(200px, 90vw, 430px); } }
@media (max-width: 360px)  { :root { --ga-shell: clamp(200px, 95vw, 330px); } }

/* 1) Styl „szklany” + wymiary – 1:1 jak .glass-container-menu */
.menu-flexbox {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  z-index: 9999 !important;

  width: var(--ga-shell) !important;
  margin: 25px auto 50px !important;
  overflow: hidden !important;

  /* domyślny układ menu */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  padding: 10px 16px !important;
}

/* 2) Wymuś FLEX na właściwym WĘŹLE Elementora, niezależnie gdzie dasz klasę */
.elementor-section.menu-flexbox > .elementor-container,
.elementor-column.menu-flexbox > .elementor-widget-wrap,
.elementor-widget-nav-menu.menu-flexbox > .elementor-widget-container,
.e-con.menu-flexbox,
.e-con.menu-flexbox > .e-con-inner,
.e-con-boxed.menu-flexbox {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important; /* w ramach menu-flexbox */
  max-width: 100% !important;
}

/* 3) Zdejmij „kaptury” z szerokości narzucone przez Elementor BOXED */
.e-con-boxed.menu-flexbox { max-width: var(--ga-shell) !important; }
.menu-flexbox > .e-con-inner,
.menu-flexbox > .elementor-container { width: 100% !important; max-width: 100% !important; }

/* 4) Upewnij się, że samo menu wykorzystuje całą szerokość */
.menu-flexbox .elementor-nav-menu { width: 100% !important; }

/* (opcjonalnie) Jeśli masz równolegle wrapper .glass-container-menu,
   możesz spiąć szerokość jednym źródłem */
.glass-container-menu, .menu-flexbox { width: var(--ga-shell) !important; }