/* ==========================================================================
   css_menu.css – menú principal header (Creative Elements)
   ==========================================================================
   Partes modificadas:
   - Hover / activo: texto y subrayado rojo marca
   - Dropdown desktop en columnas (menos scroll en submenús)
   - Carrito CE: precio blanco, burbuja contador amarilla

   Responsive:
   - Desktop ≥ 768px: dropdown multi-columna, flechas scroll ocultas
   - Móvil ≤ 767px: hover en ítems de dropdown móvil
   ========================================================================== */

/* Texto + subrayado (pointer underline) en hover / activo */
#header .elementor-nav--main .elementor-item:hover,
#header .elementor-nav--main .elementor-item:focus,
#header .elementor-nav--main .elementor-item.highlighted,
#header .elementor-nav--main .elementor-item.elementor-item-active,
#header .elementor-nav--main .elementor-item:hover .sub-arrow,
#header .elementor-nav--main .elementor-item.highlighted .sub-arrow,
#header .elementor-nav--main .elementor-item.elementor-item-active .sub-arrow {
  color: var(--dil-red, oklch(55% 0.19 27)) !important;
}

#header .e--pointer-underline .elementor-item:after,
#header .e--pointer-overline .elementor-item:before,
#header .e--pointer-double-line .elementor-item:before,
#header .e--pointer-double-line .elementor-item:after,
#header .e--pointer-framed .elementor-item:before,
#header .e--pointer-framed .elementor-item:after {
  background-color: var(--dil-red, oklch(55% 0.19 27)) !important;
  border-color: var(--dil-red, oklch(55% 0.19 27)) !important;
}

/* Ítems del desplegable: hover / activo / focus → blanco suave + texto negro (no gris) */
#header .elementor-nav--dropdown .menu-item .elementor-item-active,
#header .elementor-nav--dropdown .menu-item .highlighted,
#header .elementor-nav--dropdown .menu-item [href]:focus,
#header .elementor-nav--dropdown .menu-item [href]:hover,
#header .elementor-nav--dropdown .elementor-sub-item:hover,
#header .elementor-nav--dropdown .elementor-sub-item:focus,
#header .elementor-nav--dropdown .elementor-sub-item.highlighted,
#header .elementor-nav--dropdown .elementor-sub-item.elementor-item-active,
#header .elementor-nav--dropdown a:hover:not(#e),
#header .elementor-nav--dropdown a:focus:not(#e),
#header .elementor-nav--dropdown a.highlighted:not(#e),
#header .elementor-nav--dropdown a.elementor-item-active:not(#e) {
  background-color: #fff !important;
  color: var(--dil-black, #000) !important;
}

/* ----- Desktop: dropdown en columnas (evita scroll largo) ----- */

@media (min-width: 768px) {
  #header .elementor-nav--layout-horizontal:not(.ce-user-menu) > .elementor-nav > .menu-item-has-children > .sub-menu.elementor-nav--dropdown,
  #header .elementor-nav--layout-horizontal:not(.ce-user-menu) .menu-item-has-children > ul.sub-menu {
    box-sizing: border-box;
    width: max-content;
    min-width: 18rem;
    max-width: min(42rem, 92vw);
    max-height: none !important;
    overflow: visible !important;
    padding: 0.65rem 0.55rem !important;
    column-count: 3;
    column-gap: 0.35rem;
    column-width: 11.5rem;
    background: var(--dil-cream, #faf5eb);
    border: 1px solid var(--dil-line, #ddd8ce);
    border-radius: 0;
    box-shadow: none;
  }

  /* Menús cortos: 2 columnas basta */
  #header .elementor-nav--layout-horizontal:not(.ce-user-menu) > .elementor-nav > .menu-item-has-children > .sub-menu.elementor-nav--dropdown:has(> .menu-item:nth-child(-n + 8):last-child) {
    column-count: 2;
    max-width: min(28rem, 92vw);
  }

  /* Muy cortos: 1 columna */
  #header .elementor-nav--layout-horizontal:not(.ce-user-menu) > .elementor-nav > .menu-item-has-children > .sub-menu.elementor-nav--dropdown:has(> .menu-item:nth-child(-n + 4):last-child) {
    column-count: 1;
    min-width: 12rem;
    max-width: 16rem;
  }

  #header .elementor-nav--layout-horizontal:not(.ce-user-menu) .menu-item-has-children > .sub-menu.elementor-nav--dropdown > .menu-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    float: none !important;
    width: 100%;
    margin: 0;
  }

  #header .elementor-nav--layout-horizontal:not(.ce-user-menu) .menu-item-has-children > .sub-menu.elementor-nav--dropdown .elementor-sub-item {
    padding: 0.45rem 0.75rem !important;
    white-space: nowrap;
    font-size: 0.78rem;
    line-height: 1.25;
  }

  /* Ocultar flechas de scroll de SmartMenus (ya no hacen falta) */
  #header .elementor-nav-menu span.scroll-up,
  #header .elementor-nav-menu span.scroll-down {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Menú principal: ocupa todo el ancho de la fila 3 */
#header .elementor[data-elementor-type='header'] > .elementor-section-wrap > .elementor-top-section:nth-child(3) .elementor-widget-nav-menu,
#header .elementor[data-elementor-type='header'] > .elementor-section-wrap > .elementor-top-section:nth-child(3) .elementor-nav--main,
#header .elementor[data-elementor-type='header'] > .elementor-section-wrap > .elementor-top-section:nth-child(3) .elementor-nav--main > .elementor-nav {
  width: 100%;
}

#header .elementor[data-elementor-type='header'] > .elementor-section-wrap > .elementor-top-section:nth-child(3) .elementor-nav--main > .elementor-nav {
  justify-content: center;
}

/* Móvil: mismo hover blanco + negro */
@media (max-width: 767px) {
  #header .elementor-nav--dropdown .menu-item .elementor-item-active,
  #header .elementor-nav--dropdown .menu-item .highlighted,
  #header .elementor-nav--dropdown .menu-item [href]:focus,
  #header .elementor-nav--dropdown .menu-item [href]:hover,
  #header .elementor-nav--dropdown .elementor-sub-item:hover,
  #header .elementor-nav--dropdown a:hover:not(#e),
  #header .elementor-nav--dropdown a:focus:not(#e),
  #header .elementor-nav--dropdown a.elementor-item-active:not(#e) {
    background-color: #fff !important;
    color: var(--dil-black, #000) !important;
  }
}

/* Carrito header (CE) – subtotal blanco sobre botón negro */
#header .elementor-widget-shopping-cart .elementor-cart__toggle a.elementor-button,
#header .elementor-widget-shopping-cart .elementor-cart__toggle .elementor-button-text,
#header .elementor-widget-shopping-cart .elementor-cart__toggle .elementor-button-icon {
  color: #fff !important;
}

/* Badge qty: compacto para no tapar la cesta (sobre todo en header shrink) */
#header .elementor-cart--items-indicator-bubble .elementor-cart__toggle .elementor-button-icon[data-counter]::before {
  background-color: var(--dil-yellow, #fccf27) !important;
  color: var(--dil-black, #000) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  min-width: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  top: -5px !important;
  right: -6px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}