/* Megamenú de 3 niveles (EcoDroguerías). Namespacing bajo .eco-megamenu para no
   chocar con ningún estilo existente del tema, Elementor o los plugins. */
.eco-megamenu {
  --eco-mm-accent: #ed7e35;
  --eco-mm-dark: #0f2244;
  --eco-mm-text: #20272b;
  --eco-mm-muted: #6b7680;
  --eco-mm-border: #e6e9eb;
  --eco-mm-bg: #ffffff;
  font-family: inherit;
  position: relative;
}

.eco-megamenu__level1 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eco-megamenu__item--l1 {
  position: relative;
}

.eco-megamenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 10px 14px;
  color: var(--eco-mm-dark);
  border-radius: 6px;
  transition: background-color .15s ease;
}

.eco-megamenu__trigger:hover,
.eco-megamenu__trigger:focus-visible,
.eco-megamenu__item--l1.is-open > .eco-megamenu__trigger {
  background-color: rgba(237, 126, 53, 0.12);
  outline: none;
}

.eco-megamenu__count {
  font-size: 11px;
  font-weight: 500;
  color: var(--eco-mm-muted);
}

.eco-megamenu__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: var(--eco-mm-bg);
  border: 1px solid var(--eco-mm-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 34, 68, 0.14);
  padding: 18px 22px;
  min-width: 640px;
  max-width: 900px;
  max-height: 70vh;
  overflow-y: auto;
}

.eco-megamenu__item--l1.is-open > .eco-megamenu__panel {
  display: block;
}

.eco-megamenu__level2 {
  columns: 3;
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eco-megamenu__item--l2 {
  break-inside: avoid;
  margin-bottom: 14px;
}

.eco-megamenu__label2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--eco-mm-dark);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

.eco-megamenu__level3 {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eco-megamenu__item--l3 a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--eco-mm-text);
  text-decoration: none;
  font-size: 13px;
  padding: 3px 0;
}

.eco-megamenu__item--l3 a:hover {
  color: var(--eco-mm-accent);
  text-decoration: underline;
}

.eco-megamenu__badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--eco-mm-dark);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

.eco-megamenu__page-title {
  margin: 0 0 20px;
}

/* Móvil: acordeón simple en vez de flyout flotante */
@media (max-width: 782px) {
  .eco-megamenu__level1 {
    flex-direction: column;
  }
  .eco-megamenu__panel {
    position: static;
    min-width: 0;
    max-width: none;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--eco-mm-border);
    border-radius: 0;
    max-height: none;
  }
  .eco-megamenu__level2 {
    columns: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .eco-megamenu__panel {
    animation: eco-mm-fade .12s ease-out;
  }
}

@keyframes eco-mm-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}